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

body {
    background: #0f172a;
    color: #e2e8f0;
    font-family: 'Courier New', monospace;
    min-height: 100vh;
    padding: 24px;
}
.Whale_Bolock {
    padding: 20px 40px 40px 40px;
}
.Chart_Title {
    overflow: hidden;
    margin-bottom: 10px;
}
.Chart_Title_Left {
    float: left;
}
.Chart_Title_Txt {
    font-size: 80px;
    font-weight: 800;
}
.Chart_Title_Right {
    float: right;
    margin: 10px 20px 0px 0px;
}

.wrap { 
    border: 1px solid #2a3458;
    background: #1a1f3a;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

.btn-refresh {
    margin: 60px 0px 0px auto;
    background: #0158cd;
    border: 1px solid #006eff;
    color: #e2e8f0;
    font-size: 12px;
    padding: 10px 30px;
    border-radius: 4px;
    cursor: pointer;
    letter-spacing: 1px;
}
.btn-refresh:hover { 
    background: #006eff;
    border: 1px solid #006eff; 
    color: #fff;
}

.btn-period {
    background: #0e1623;
    border: 1px solid #1e293b;
    color: #64748b;
    font-size: 12px;
    padding: 4px 14px;
    border-radius: 4px;
    cursor: pointer;
    letter-spacing: 1px;
    text-decoration: none;
}
.btn-period:hover { background: #1e293b; color: #e2e8f0; }
.btn-period.active { border-color: #38bdf8; color: #38bdf8; background: #0a1929; }

.chart-outer { 
    background: #040b1b;
    border-radius: 4px;
    border: 1px solid #2a3458;
    position: relative; 
    padding-left: 40px; 
}

.chart-wrap {
    position: relative;
    width: 100%;
    height: 550px;
    display: flex;
    align-items: flex-end;
    gap: 12px;
    padding-bottom: 0;
    border-left: 1px solid #2a3458;
    border-bottom: 1px solid #2a3458;
    overflow: visible;
}

.bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    position: relative;
}

/* 고래1: 참치 — 느릿느릿 큰 파도 */
@keyframes float1 {
    0%   { transform: translateY(0px) rotate(-2deg); }
    30%  { transform: translateY(-16px) rotate(1deg); }
    60%  { transform: translateY(-8px) rotate(2deg); }
    100% { transform: translateY(0px) rotate(-2deg); }
}
/* 고래2: 아기고래 — 빠르고 통통 튀는 */
@keyframes float2 {
    0%   { transform: translateY(0px) scale(1); }
    20%  { transform: translateY(-18px) scale(1.04); }
    40%  { transform: translateY(-6px) scale(0.97); }
    60%  { transform: translateY(-14px) scale(1.02); }
    80%  { transform: translateY(-3px) scale(0.98); }
    100% { transform: translateY(0px) scale(1); }
}
/* 고래3: 오빠고래 — 좌우로 흔들리며 */
@keyframes float3 {
    0%   { transform: translateY(0px) translateX(0px) rotate(0deg); }
    25%  { transform: translateY(-10px) translateX(6px) rotate(3deg); }
    50%  { transform: translateY(-14px) translateX(0px) rotate(0deg); }
    75%  { transform: translateY(-10px) translateX(-6px) rotate(-3deg); }
    100% { transform: translateY(0px) translateX(0px) rotate(0deg); }
}
/* 고래4: 엄마고래 — 느린 8자 궤도 */
@keyframes float4 {
    0%   { transform: translateY(0px) translateX(0px); }
    20%  { transform: translateY(-12px) translateX(8px); }
    40%  { transform: translateY(-6px) translateX(0px); }
    60%  { transform: translateY(-18px) translateX(-8px); }
    80%  { transform: translateY(-8px) translateX(0px); }
    100% { transform: translateY(0px) translateX(0px); }
}
/* 고래5: 아빠고래 — 묵직하게 한숨씩 */
@keyframes float5 {
    0%   { transform: translateY(0px) rotate(0deg); }
    40%  { transform: translateY(-20px) rotate(-1.5deg); }
    55%  { transform: translateY(-22px) rotate(-1deg); }
    100% { transform: translateY(0px) rotate(0deg); }
}
/* 고래6: 대형고래 — 웅장하게 천천히 */
@keyframes float6 {
    0%   { transform: translateY(0px) scaleX(1); }
    50%  { transform: translateY(-10px) scaleX(1.03); }
    100% { transform: translateY(0px) scaleX(1); }
}

.bar-icon { margin-bottom: 6px; flex-shrink: 0; }
.bar-icon img { 
    object-fit: contain; 
    display: block; 
    width: 150px;
    margin-bottom: 20px;
}
/* 등급별 개별 애니메이션 */
.bar-col-1 .bar-icon img { animation: float1 3.2s ease-in-out infinite; }
.bar-col-2 .bar-icon img { animation: float2 3.0s ease-in-out infinite; }
.bar-col-3 .bar-icon img { animation: float3 3.8s ease-in-out infinite; }
.bar-col-4 .bar-icon img { animation: float4 4.5s ease-in-out infinite; }
.bar-col-5 .bar-icon img { animation: float5 5.0s ease-in-out infinite; }
.bar-col-6 .bar-icon img { animation: float6 6.5s ease-in-out infinite; }

.bar {
    width: 100%; position: relative; min-height: 70px;
    transition: height 0.4s ease;
    overflow: hidden;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.bar.empty { background: #1e293b; border-top: 1px solid #2a3458; }

.bar-inside-cnt {
    font-size: 28px;
    font-weight: bold;
    color: rgba(255,255,255,0.95);
    white-space: nowrap;
    pointer-events: none;
    text-shadow: 0 1px 6px rgba(0,0,0,0.8);
    letter-spacing: 1px;
    user-select: none;
    line-height: 1;
}
.bar-inside-pct {
    font-size: 18px;
    font-weight: bold;
    color: rgba(255,255,255,0.75);
    white-space: nowrap;
    pointer-events: none;
    text-shadow: 0 1px 4px rgba(0,0,0,0.7);
    user-select: none;
    line-height: 1;
}
.bar-inside-amt {
    font-size: 13px;
    font-weight: normal;
    color: rgba(255,255,255,0.55);
    white-space: nowrap;
    pointer-events: none;
    text-shadow: 0 1px 4px rgba(0,0,0,0.7);
    user-select: none;
    line-height: 1;
}

.bar-info {
    position: absolute;
    bottom: -54px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
}

.bar-name { font-size: 11px; color: #94a3b8; }

.y-axis {
    position: absolute;
    left: -40px; top: 0; bottom: 0;
    pointer-events: none;
    width: 36px;
}

.y-tick { position: absolute; right: 0; font-size: 10px; color: #334155; text-align: right; width: 32px; transform: translateY(50%); }

.grid-line {
    position: absolute;
    left: -40px; right: 0;
    height: 1px;
    background: #1a2035;
    pointer-events: none;
}

.bar-labels {
    display: flex;
    gap: 12px;
    margin-top: 12px;
    padding-left: 40px;
}
.bar-label-item {
    flex: 1;
    text-align: center;
    font-size: 13px;
    color: #94a3b8;
    letter-spacing: 1px;
    white-space: nowrap;
    border: 1px solid #2a3458;
    background: #040b1b;
    border-radius: 25px;
    padding: 5px 0px;
}

.foot { 
    margin-top: 20px; 
    font-size: 11px; 
    color: #575d66; 
    letter-spacing: 1px; 
}