/* [기본 뼈대 스타일] */
    :root{
      --bg-main: #151820;
      --bg-card: #1E2230;
      --bg-input: #111318;
      --border: #343B4E;
      --text: #ffffff;
      --text-sub: #9aa3b2;
      --green: #7CF29C;
      --blue: #4DA3FF;
      --red: #FF6B6B;
      --btn-bg: #262B3A;
      --btn-hover: #2D3445;
      --font-family: 'Malgun Gothic', 'Segoe UI', sans-serif;
      --gap: 12px;
      --radius: 10px;
      --hdr-h: 44px;
      --inp-h: 30px;
    }
    *{ box-sizing:border-box; }
    html,body{ height:100%; margin:0; background:var(--bg-main); color:var(--text); font-family:var(--font-family); overflow:hidden; }

    /* Layout */
    .layout{
      height:100vh;
      display:grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--gap);
      padding: var(--gap);
      min-width: 1400px;
    }
    .col{ display:flex; flex-direction:column; min-width:0; min-height:0; gap: var(--gap); }
    .panel{
      background:var(--bg-card);
      border:1px solid var(--border);
      border-radius: var(--radius);
      display:flex; flex-direction:column; min-height:0;
      position: relative;
    }
    /* Header */
    .panel-header{
      height: var(--hdr-h);
      flex: 0 0 auto;
      display:flex; align-items:center; justify-content:space-between;
      padding: 0 12px;
      background: linear-gradient(180deg, rgba(38,43,58,1) 0%, rgba(30,34,48,1) 100%);
      color:#fff; font-weight:700; letter-spacing:.2px; font-size:14px;
    }
    .panel-body{
      padding: 12px; display:flex; flex-direction:column; gap: 10px;
      flex: 1; min-height:0;
      overflow: visible; 
    }
    .col.split-2 > .panel{ flex: 1 1 0; }
    .scroll-box { flex:1; overflow-y:auto; min-height:0; position:relative; }

    /* Controls */
    .btn{
      border:1px solid var(--border);
      background:var(--btn-bg); color:var(--text);
      padding: 6px 50px; border-radius: 8px; cursor:pointer; font-family:var(--font-family); font-size: 13px;
      user-select:none; white-space:nowrap; display:inline-flex; align-items:center; justify-content:center;
    }
    .btn:hover{ background:var(--btn-hover); }
    .btn.green{ background:var(--green); color:#111318; border:none; font-weight:bold; }
    .btn.red{ background:var(--red); color:white; border:none; font-weight:bold; }
    .btn.outline-green { border: 1px solid var(--green); color: var(--green); background: transparent; }
    .btn.outline-green:hover { background: rgba(124,242,156,0.1); }
    .btn.outline-red { border: 1px solid var(--red); color: var(--red); background: transparent; }
    .btn.outline-red:hover { background: rgba(255, 107, 107, 0.1); }

    .row{ display:grid; grid-template-columns: 90px 10px 1fr; align-items:center; gap: 8px; margin-bottom:4px; }
    .lbl{ color:var(--text); white-space:nowrap; font-weight:700; font-size:13px; }
    .colon{ color:var(--text-sub); text-align:center; }
    .field{ display:flex; align-items:center; gap: 8px; min-width:0; position:relative; }
    
    input, select {
      width:100%; height: var(--inp-h);
      background:var(--bg-input);
      border:1px solid var(--border);
      color:var(--text); padding: 0 10px; border-radius: 8px;
      outline:none; font-size: 13px;
    }
    input:focus{ border-color: var(--blue); }
    input:disabled { opacity: 0.5; cursor: not-allowed; }

    /* Search UI */
    .search-wrap{ position: relative; width: 100%; display: flex; align-items: center; }
    .search-wrap input{ padding-left: 26px !important; text-align: left; }
    .search-icon-left{ 
        position: absolute; 
        left: 6px; 
        top: 50%;
        transform: translateY(-50%) scale(0.8); 
        width: 16px; 
        height: 16px; 
        cursor: pointer; 
        opacity: 0.8; 
        pointer-events: auto;
    }
    .search-icon-left:hover { opacity: 1; }

    .toggle-group { display: flex; gap: 8px; width: 100%; }
    .dd-wrap { flex: 1; position: relative; }

    .market-btn {
      width: 100%; height: var(--inp-h);
      background: var(--bg-input);
      border: 1px solid var(--border);
      color: var(--text); border-radius: 8px; font-size: 13px;
      outline: none; padding: 0 10px;
      display: flex; align-items: center;
      justify-content: center;
      cursor: pointer;
    }
    .market-btn:hover:enabled { background: var(--btn-hover); }
    .market-btn:disabled { opacity: 0.5; cursor: default; }

    .popup-list {
        position: absolute; top: 100%;
        left: 0; width: 100%;
        max-height: 250px; background: #1E2230; 
        border: 1px solid var(--blue); border-radius: 8px;
        overflow-y: auto; display: none; z-index: 9999;
        margin-top: 4px; box-shadow: 0 4px 15px rgba(0,0,0,0.8);
    }
    .popup-item {
        padding: 8px 12px;
        color: #fff; cursor: pointer; font-size: 13px;
        border-bottom: 1px solid rgba(255,255,255,0.05);
        display: flex; justify-content: space-between;
    }
    .popup-item:hover { background: var(--blue); }
    .popup-item b { font-weight: 700; }

    /* Tier Gauge */
    .tier-bar { width: 100%; display: flex; align-items: center; gap: 10px; }
    .tier-gauge {
      flex: 1 1 auto; height: 28px;
      border: 1px solid var(--border);
      border-radius: 999px; background: rgba(0,0,0,.12);
      position: relative; overflow: hidden;
    }
    .tier-fill {
      position: absolute; left: 0; top: 0; bottom: 0;
      width: 25%;
      background: linear-gradient(90deg, rgba(124,242,156,.25), rgba(77,163,255,.18));
      border-right: 1px solid rgba(255,255,255,.05); transition: width 0.3s ease;
    }
    .tier-pillset { position: relative; z-index: 1; display: flex; height: 100%; padding: 3px; gap: 3px; }
    .tier-pill {
      flex: 1 1 0; border-radius: 999px; display: flex;
      align-items: center; justify-content: center;
      font-size: 13px; color: var(--text-sub); cursor: pointer; user-select: none;
    }
    .tier-pill.active { background: rgba(255,255,255,.08); color: #fff; font-weight: 700; }

    /* Tables */
    .box {
      background: var(--bg-input);
      border: 1px solid var(--border);
      border-radius: 10px; display: flex; flex-direction: column;
      overflow: hidden; min-height: 0; flex: 1;
    }
    .box-head {
      background: #111318; padding: 10px; border-bottom: 1px solid #2A2F3E;
      display: grid; gap: 8px; color: #fff; font-size: 13px;
    }
    .box-body { overflow: auto; flex: 1; min-height: 0; }
    
    /* Bots Layout */
    .bots-head, .bots-row { 
        display: grid;
        grid-template-columns: 30px 100px 30px 40px 30px 50px 30px; 
        align-items: center; 
        gap: 10px;
    }
    .bots-row { padding: 8px 10px; font-size: 13px; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.03); }
    .bots-row:hover { background: rgba(255,255,255,0.03); }
    .bots-row.active { background: #111318; box-shadow: inset 3px 0 0 var(--green); }
    
    .bots-head > div, .bots-row > div { text-align: center; }

    /* Rank Layout */
    .rank-head, .rank-row { 
        display: grid;
        grid-template-columns: 30px 30px 100px 30px 50px 80px; 
        align-items: center; 
        gap: 10px; 
    }
    .rank-row { padding: 8px 10px; font-size: 13px; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.03); transition: all 0.2s; }
    .rank-row:hover { background: rgba(255,255,255,0.03); }
    
    .rank-row.added {
        color: var(--text-sub) !important;
        background: rgba(0,0,0,0.2) !important;
        cursor: default;
    }
    .rank-row.added:hover { background: rgba(0,0,0,0.2) !important; }
    .rank-row.added .pill-tier {
        border-color: #444 !important;
        color: #666 !important;
        opacity: 0.6;
    }

    .rank-head > div, .rank-row > div { text-align: center; }
    .rank-row > div:last-child { text-align: right; padding-right: 4px; }

    .pill-tier {
      display: inline-flex; align-items: center; justify-content: center; min-width: 26px;
      padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border);
      background: #111318; font-size: 13px; color: #fff;
    }
    .tier-S { border-color: rgba(124,242,156,.5); color: var(--green); }
    
    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-track { background: #111318; }
    ::-webkit-scrollbar-thumb { background: #2D3445; border-radius: 10px; border: 2px solid #111318; }
    ::-webkit-scrollbar-thumb:hover { background: #343B4E; }

    /* Timezone UI */
    .tz-select{
      width:110px; height:28px;
      padding:0 10px;
      background:var(--bg-input); border:1px solid var(--border);
      color:var(--text); border-radius: 8px; outline:none; font-size: 13px;
    }
    .tz-select:focus{ border-color: var(--blue); }

    /* Last price: borderless */
    #inpLastPrice{
      border:0 !important;
      outline:none !important;
      box-shadow:none !important;
      background: transparent !important;
      padding-left: 0 !important;
    }
  
    .hdr-stack{ display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
    .hdr-row{ display:flex; gap:8px; align-items:center; }
    .hdr-row-3 {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 8px;
    }
    .hdr-row-3 select { width: 100%; height: 28px; padding: 0 10px; }

    #lblReUp, #lblReDn{ font-size:13px; font-weight:700; }
    .row .field span{ font-size:13px; }

    .auth-top{ display:flex; align-items:center; justify-content:flex-end; width:100%; }
    .top-status{
      display:flex; align-items:center; gap:10px;
      font-size:13px; color: var(--text-sub);
      white-space:nowrap;
    }
    .top-status #topEmail{ color: var(--text); font-weight:700; max-width: 220px; overflow:hidden; text-overflow:ellipsis; }

    .panel-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
    .brand-title{ white-space:nowrap; display:inline-flex; align-items:center; }
    .email-btn{
      background: transparent; border: none; padding: 0; cursor: pointer;
      max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .email-btn span{ color: var(--text); font-weight:700; }

    /* Modal */
    .modal{ position:fixed; inset:0; z-index:9999; }
    .modal-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.55); }
    .modal-card{
      position:relative;
      width: 360px; max-width: calc(100vw - 40px); margin: 120px auto 0 auto;
      background: #10141b; border: 1px solid var(--border); border-radius: 16px;
      box-shadow: 0 20px 60px rgba(0,0,0,.45); padding: 16px;
    }
    .modal-title{ font-size:14px; font-weight:800; color: var(--text); margin-bottom:10px; }
    .modal-email{ font-size:13px; color: var(--text); font-weight:700; }
    .modal-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:14px; }
    .btn-ghost{ background: rgba(255,255,255,.04); border: 1px solid var(--border); color: var(--text); }
    .btn-danger{ background: rgba(255,64,64,.18); border: 1px solid rgba(255,64,64,.35); color: #ffb3b3; }

    /* Report Modal Style */
    .report-box { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--bg-card); }
    .report-row { display: grid; grid-template-columns: 1.2fr 1.5fr 1fr 1fr; padding: 10px; border-bottom: 1px solid rgba(255,255,255,0.05); text-align: center; font-size: 13px; }
    .report-row:last-child { border-bottom: none; }
    .report-row.header { background: #111318; font-weight: 700; color: var(--text-sub); }
    .report-row.highlight { background: rgba(124, 242, 156, 0.05); font-weight: bold; color: #fff; }

    /* ✅ 1, 2번 패널 시각적 병합 및 마켓 창 가림 방지 */
    .layout > .col:first-child {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        position: relative;
        z-index: 9999; /* 마켓 드롭다운 최상단 노출 */
    }
    .layout > .col:first-child > .panel {
        border: none;
        background: transparent;
        overflow: visible; /* 패널 밖으로 드롭다운이 나오도록 허용 */
    }
    .layout > .col:first-child > .panel:nth-child(2) > .panel-header {
        background: transparent; /* Trade Settings 타이틀 배경 제거 (텍스트만 유지) */
    }