@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&family=JetBrains+Mono:wght@400;600&display=swap');

    :root {
        --bg:      #0f172a;
        --border:  #2a3458;
        --accent:  #00c8ff;
        --bid:     #00e5a0;
        --ask:     #ff4d6a;
        --text:    #e2e8f0;
        --muted:   #64748b;
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
        background: var(--bg);
        color: var(--text);
        font-family: 'Noto Sans KR', sans-serif;
        padding: 0px;
    }

    .Whale_Event_Section {
        padding: 0px 40px 40px 40px;
    }

    .Title_img {
        display: flex;
        align-items: center;
        gap: 20px;
        font-size: 60px;
        font-weight: 900;
        margin-bottom: 30px;
    }

    .Title_img img {
        position: relative;
        margin: -70px 20px 0px 80px;
        z-index: 10000 !important;
    }

    .Title_Separator {
        font-size: 15px;
        color: var(--accent);
    }

    .Title_img .Title_Text {
        font-size: 18px;
    }

    .Title_img .meta {
        font-size: 0.78rem;
        color: var(--muted);
    }

    .header {
        margin-left: auto;
        display: flex;
        align-items: baseline;
        gap: 12px;
        padding-top: 30px;
    }

    .count-badge {
        margin-left: auto;
        font-family: 'JetBrains Mono', monospace;
        font-size: 0.85rem;
        background: #040b1b;
        border: 1px solid #2a3458;
        color: var(--accent);
        padding: 15px 30px;
        border-radius: 5px;
        white-space: nowrap;
    }
    .reload-btn {
        padding: 15px 30px;
        background: #040b1b;
        border: 1px solid var(--border);
        border-radius: 4px;
        color: #fff;
        font-family: 'Noto Sans KR', sans-serif;
        font-size: 0.82rem;
        cursor: pointer;
        transition: border-color 0.7s, color 0.15s;
        white-space: nowrap;
    }
    .reload-btn:hover { border-color: var(--accent); color: var(--accent); }

    /* ── 검색 폼 ─────────────────────────────────────────── */
    .search-bar {
        margin-bottom: 10px;
        padding: 20px 30px;
        background: #040b1b;
        border: 1px solid #2a3458;
        border-radius: 4px;
    }
    .search-row {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: flex-end;
        margin-bottom: 12px;
    }
    .search-row:last-child { margin-bottom: 0; }

    .search-group {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    .search-group label {
        font-size: 14px;
        color: var(--text);
        letter-spacing: 0.06em;
        text-transform: uppercase;
        padding-left: 10px;
    }
    .search-group input {
        background: #060c18;
        border: 1px solid #3d476b;
        border-radius: 4px;
        color: var(--text);
        font-family: 'JetBrains Mono', monospace;
        font-size: 0.85rem;
        padding: 7px 12px;
        outline: none;
        transition: border-color 0.15s;
        width: 140px;
    }
    .search-group input:focus { border-color: var(--accent); }
    .search-group input::placeholder { color: #2d3f55; }
    .search-group input:-webkit-autofill,
    .search-group input:-webkit-autofill:hover,
    .search-group input:-webkit-autofill:focus {
        -webkit-text-fill-color: var(--text);
        -webkit-box-shadow: 0 0 0px 1000px #060c18 inset;
        caret-color: var(--text);
        border-color: var(--border);
        transition: background-color 9999s ease-in-out 0s;
    }
    .search-group.wide input { width: 180px; }

    .search-btn {
        padding: 7px 20px;
        background: rgba(0, 110, 255, 0.781);
        border: 1px solid #006eff;
        border-radius: 4px;
        color: #fff;
        font-family: 'Noto Sans KR', sans-serif;
        font-size: 0.85rem;
        font-weight: 500;
        cursor: pointer;
        transition: background 0.15s;
        white-space: nowrap;
    }
    .search-btn:hover { 
        background: #006eff;
        border: 1px solid #4897ff;
     }

    .reset-btn {
        padding: 7px 14px;
        background: transparent;
        border: 1px solid #2a3458;
        border-radius: 4px;
        color: #fff;
        font-family: 'Noto Sans KR', sans-serif;
        font-size: 0.82rem;
        cursor: pointer;
        text-decoration: none;
        transition: border-color 0.15s, color 0.15s;
        white-space: nowrap;
        display: inline-block;
    }
    .reset-btn:hover { border-color: var(--bid); color: var(--bid); }

    .search-hint {
        font-size: 0.72rem;
        color: var(--muted);
        padding-bottom: 8px;
    }

    /* ── 퀵버튼 행 ───────────────────────────────────────── */
    .quick-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
        margin-top: 20px;
    }
    .quick-label {
        font-size: 0.68rem;
        color: var(--muted);
        letter-spacing: 0.06em;
        text-transform: uppercase;
        white-space: nowrap;
        margin-right: 2px;
    }
    .quick-divider {
        width: 1px;
        height: 20px;
        background: var(--border);
        margin: 0 6px;
    }
    .qbtn {
        padding: 4px 20px;
        border-radius: 4px;
        border: 1px solid var(--border);
        background: transparent;
        color: var(--text);
        font-family: 'Noto Sans KR', sans-serif;
        font-size: 0.78rem;
        cursor: pointer;
        transition: all 0.15s;
        white-space: nowrap;
    }
    .qbtn:hover { border-color: var(--accent); color: var(--accent); }
    .qbtn.active { border-color: var(--accent); color: var(--accent); background: rgba(0,200,255,0.08); }

    /* 등급별 퀵버튼 색상 */
    .qbtn[data-grade="대형고래"] { border-color: #4a3870; color: #caa1ff; }
    .qbtn[data-grade="대형고래"]:hover,
    .qbtn[data-grade="대형고래"].active { background: rgba(202,161,255,0.1); border-color: #caa1ff; }

    .qbtn[data-grade="아빠고래"] { border-color: #2a5040; color: #98ffb5; }
    .qbtn[data-grade="아빠고래"]:hover,
    .qbtn[data-grade="아빠고래"].active { background: rgba(152,255,181,0.1); border-color: #98ffb5; }

    .qbtn[data-grade="엄마고래"] { border-color: #5a3040; color: #ff9ea2; }
    .qbtn[data-grade="엄마고래"]:hover,
    .qbtn[data-grade="엄마고래"].active { background: rgba(255,158,162,0.1); border-color: #ff9ea2; }

    .qbtn[data-grade="오빠고래"] { border-color: #1e3a5a; color: #8bc8ff; }
    .qbtn[data-grade="오빠고래"]:hover,
    .qbtn[data-grade="오빠고래"].active { background: rgba(139,200,255,0.1); border-color: #8bc8ff; }

    .qbtn[data-grade="아기고래"] { border-color: #5a2050; color: #ff9adf; }
    .qbtn[data-grade="아기고래"]:hover,
    .qbtn[data-grade="아기고래"].active { background: rgba(255,154,223,0.1); border-color: #ff9adf; }

    .qbtn[data-grade="참치"] { border-color: #3a4050; color: #ffffff; }
    .qbtn[data-grade="참치"]:hover,
    .qbtn[data-grade="참치"].active { background: rgba(255,255,255,0.06); border-color: #ffffff; }

    /* ── 테이블 ──────────────────────────────────────────── */
    .table-wrap { overflow-x: auto; }

    table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.85rem;
        background: #0e1227;
    }
    thead th {
        background: #040b1b;
        color: var(--text);
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        padding: 15px 20px;
        text-align: left;
        border-top: 1px solid #2a3458;
        border-bottom: 1px solid #2a3458;
        white-space: nowrap;
    }
    thead th.num { text-align: right; }

    tbody tr {
        border-bottom: 1px solid var(--border);
        transition: background 0.15s;
    }
    tbody tr:hover { background: #131c2c; }

    td {
        padding: 15px 20px;
        white-space: nowrap;
        vertical-align: middle;
    }
    td.num {
        text-align: right;
        font-family: 'JetBrains Mono', monospace;
    }

    .symbol {
        font-family: 'JetBrains Mono', monospace;
        font-weight: 600;
        font-size: 0.88rem;
        color: #fff;
    }
    .symbol span {
        font-size: 0.72rem;
        color: var(--muted);
        font-weight: 400;
    }

    .badge {
        display: inline-block;
        padding: 2px 8px;
        border-radius: 4px;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.04em;
    }
    .badge.bid {
        background: rgba(0,229,160,0.12);
        color: var(--bid);
        border: 1px solid rgba(0,229,160,0.3);
    }
    .badge.ask {
        background: rgba(255,77,106,0.12);
        color: var(--ask);
        border: 1px solid rgba(255,77,106,0.3);
    }

    .amount      { font-weight: 600; color: #fff; }
    .amount.big  { color: #ffd700; }
    .amount.huge { color: #ff8c00; }

    .grade { font-weight: 700; font-size: 0.78rem; }

    .dt {
        font-family: 'JetBrains Mono', monospace;
        font-size: 0.78rem;
        color: var(--muted);
        text-align: right;
    }

    .empty {
        text-align: center;
        padding: 60px 0;
        color: var(--muted);
        font-size: 0.9rem;
    }

    /* ── 페이징 ──────────────────────────────────────────── */
    .paging {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 6px;
        margin-top: 32px;
    }
    .paging a {
        display: inline-block;
        padding: 5px 11px;
        border-radius: 4px;
        border: 1px solid var(--border);
        color: var(--muted);
        text-decoration: none;
        font-family: 'JetBrains Mono', monospace;
        font-size: 0.82rem;
        transition: all 0.15s;
    }
    .paging a:hover { border-color: var(--accent); color: var(--accent); }
    .paging a.on    { border-color: var(--accent); color: var(--accent); background: rgba(0,200,255,0.08); pointer-events: none; }
    .paging .page-info {
        font-family: 'JetBrains Mono', monospace;
        font-size: 0.78rem;
        color: var(--muted);
        padding: 0 8px;
    }

    .Whale_Event_Help {
        line-height: 23px;
        border-top: 1px solid #2a3458;
        margin-top: 30px;
        padding: 20px 30px;
    }