:root{
      --bg:#0f172a; --card:#94a3b8; --muted:#94a3b8; --text:#e5e7eb; --brand:#6366f1; --brand2:#22d3ee; --radius:16px;--search-max: 720px; --content-max: 720px;
    }
    *{box-sizing:border-box} /*0f172a 2a3d59 */
    html,body{height:100%}
    html { scrollbar-gutter: stable; }              /* 또는 stable both-edges */

    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, search, grid 모두 동일 기준 */
    .container {
      max-width: var(--content-max);
      margin: 0 auto;
      padding: 0 16px;
      /*padding: 16px;*/

    }

    @media(min-width:768px){.container{padding: 0 8px;}}

    /* Topbar */
    /*
    .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}
    .brand .dot{width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--brand2))}
    */
    /* ── 고정 상단 ─────────────────────────────────────────── */
    .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}
  /* Attach banner flush under Topbar */
    .top + .container { padding-top: 0; }

    /* Banner */
    .banner {
      width: 100%;       /* 화면 전체 */
      max-width: none;   /* container 제한 해제 */
      margin: 0;         /* 좌우 여백 제거 */
      border: none;
      border-radius: 0;

      padding: 60px 40px; /* 여백은 적당히 */
      text-align: center;
    }
    .banner h1{margin:0 0 6px;font-size:22px}
    .banner p{margin:0 0 14px;color:var(--muted);line-height:1.45}
  
    .cta{display:inline-flex;align-items:center;gap:8px;font-weight:800;padding:12px 16px;border-radius:14px;background:linear-gradient(135deg,var(--brand),var(--brand2));color:white;box-shadow:0 10px 24px rgba(99,102,241,.35)}
    .cta:active{transform:translateY(1px)}

    .banner {
      background: linear-gradient(135deg, #0f172a, #6366f1);
      color: #fff;   /* 글씨 하얀색 */
      margin-top:45px;
    }
    .banner h1, 
    .banner p {
      color: #fff;   /* 배경과 대비되게 */
    }
    @media (max-width: 900px) {
      .banner {
        padding: 40px 20px; /* 여백은 적당히 */
      }
      .banner p {
        font-size: 0.9em;
        padding:0 20px;
      }
    }
   
    body:not(.app-ready) .container { visibility: hidden; }
    .right-group {
      display: flex;
      align-items: center;
      gap: 8px;
    }

  .right-group > * {
    line-height: 1;        /* 폰트의 상하 여백 제거 */
    vertical-align: middle;/* inline 요소의 수평 기준 통일 */
  }


    
    /* Overlays */
    .overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(2,6,23,.65);backdrop-filter: blur(4px);z-index:50}
    .overlay.show{display:flex}

    /* Result modal (fullscreen mobile, max-width desktop) */
    .modal{background:#0b1220;border:1px solid rgba(148,163,184,.2);box-shadow:0 20px 50px rgba(0,0,0,.6)}
    .modal.result{width:100vw;height:100vh;border-radius:0;overflow:auto}
    @media (min-width:768px){.modal.result{width:96vw;max-width:860px;height:auto;max-height:90vh;border-radius:18px}}
    .modal-header{position:sticky;top:0;display:flex;align-items:center;justify-content:center;padding:12px 16px;border-bottom:1px solid rgba(148,163,184,.15);background:#0b1220;z-index:1}
    .icon-close{position:absolute;right:10px;top:8px;all:unset;cursor:pointer;line-height:1;background:#1f2937;color:#e5e7eb;border-radius:10px;padding:8px 10px;font-weight:900}
    .modal-body{padding:16px}



    body.modal-open { overflow: hidden; }
  
    .grid{
      width: 100%;
      max-width: var(--content-max);
        
        display:grid;
        grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
        grid-template-columns:1fr; /* 한 줄에 1코인 고정 */
        gap:4px;
      }

    .header, .card {
      
      display: grid;
      grid-template-columns: 1fr auto auto; /* 이름 / 가격 / 변동 */
      align-items: center;
      column-gap: 10px;
      padding: 4px 4px;
      min-width: 0;
    }

    .header {
      background: #0f141b;
      font-size:1em;
      color: #94a3b8;
      font-weight: 600;

      border-bottom: 1px solid rgba(255,255,255,0.08); /* 밝은 회색 라인 */
      position: sticky; /* 스크롤 시 상단 고정도 가능 */
      top: 0;
      z-index: 10;
      
    }
      .sortable {
        cursor:pointer;
        user-select:none;
        display:flex;
        align-items:center;

      }
    .arrow { font-size:12px; opacity:.6; margin-left:4px; }
    .card {
      cursor: pointer; /* 👈 추가: 클릭 가능한 카드 느낌 */
      font-size:0.9em;
      border-bottom: 1px solid rgba(255,255,255,0.08); /* 밝은 회색 라인 */
    }

    .card:last-child {
      border-bottom: none;
    }
      .name{
        min-width:0;font-weight:normal;font-size:1em;
        white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
        pointer-events: none;  /* 👈 클릭 막기 */
      }
      .price{font-variant-numeric:tabular-nums;font-weight:normal;font-size:0.9em;pointer-events: none;  /* 👈 클릭 막기 */}
      .change{
        font-variant-numeric:tabular-nums;font-weight:normal;font-size:0.9em;
        padding:4px 8px;border-radius:999px;border:1px solid var(--border);justify-self:end;
        pointer-events: none;
      }
    .pos { color: #ef4444; } /* 🔴 상승 빨강 */
    .neg { color: #3b82f6; } /* 🔵 하락 파랑 */
      @media(max-width:420px){
        .grid{grid-template-columns:1fr;}

        .price{font-size:16px;}
        .change{font-size:14px;}
      }

        /* Footer */

    .footer {

      position: fixed;
      bottom: 0;
      left: 0;
      right: 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;
      text-decoration: none;
      font-size: 14px;
      font-weight: 500;
      padding: 8px 10px;
    }
    .nav a.active {
      color: #10b981;
    }
    .search-wrap{
      position: relative;
      width: 100%;
      max-width: var(--content-max);
      margin: 12px auto 8px; /* 가운데 정렬 */
    }

    .search-wrap .icon{
      position: absolute;
      top: 50%;
      left: 12px;
      transform: translateY(-50%);
      width: 18px; height: 18px;
      color: #94a3b8;
      pointer-events: none;
      transition: opacity .15s ease;
    }

    .search-wrap input{
      width: 100%;
      height: 40px;
      padding: 0 12px 0 38px; /* 아이콘 공간 */
      border: 1px solid var(--border, #1f2937);
      background: #0f141b;
      color: var(--text, #e6edf3);
      border-radius: 10px;
      font-size: 14px;
      outline: none;
    }

    .search-wrap:focus-within .icon{
      opacity: 0; /* 포커스가 들어오면 아이콘 숨김 */
    }

    .search-wrap input::placeholder{
      color: #64748b;
    }
    /* 카드가 업데이트될 때 잠깐 빨간 테두리 */
    /* 항상 border 유지 → 레이아웃 흔들림 없음 */
    .price {
      border: 1px solid transparent;  /* 기본 투명 보더 */
      transition: border-color 0.4s ease;  /* 부드럽게 복귀 */
      padding: 4px 4px;  /* 약간의 여백 */
    }
    .price.flash {
      border: 1px solid #ef4444;               
      animation: flashBorder .3s ease-out;    /* 퍼졌다 사라지는 보더 글로우 */
    }
    @keyframes flashBorder {
      0%   { box-shadow: 0 0 0 0 rgba(239,68,68,.8); }
      100% { box-shadow: 0 0 0 10px rgba(239,68,68,0); }
    }
    /* 스크롤바 */
    ::-webkit-scrollbar{width:6px;height:6px}
    ::-webkit-scrollbar-track{background:rgba(255,255,255,.05);border-radius:4px}
    ::-webkit-scrollbar-thumb{background:rgba(148,163,184,.4);border-radius:4px}
    ::-webkit-scrollbar-thumb:hover{background:rgba(148,163,184,.7)}
  body {
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
  }