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

body {
    background: #0f172a;
    color: #e2e8f0;
    font-family: 'Malgun Gothic', sans-serif;
    min-height: 100vh;
    padding: 20px 16px;
}

.Page_Title {
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #2a3458;
    padding: 20px 40px;
}
.Page_Title .Title_Name {
    font-size: 60px;
    font-weight: 700;
    color: #f1f5f9;
}
.Page_Title .Title_Txt {
    border-left: 1px solid #2a3458;
    color: #ccced1;
    font-size: 15px;
    padding-left: 20px;
    margin-left: 5px;
}
.Page_Title img {
    width: 100px;
}

.page_header {
    display: flex;
    align-items: center;
    gap: 15px;
    border-right: 1px solid #2a3458;
    margin-right: 50px;
    padding-right: 50px;
}

.coin_logo { 
    width: 100px; 
}
.coin_title { 
    font-size: 25px; 
    font-weight: 700; 
    color: #f1f5f9;
    padding-left: 5px;
}
.coin_symbol { 
    font-size: 20px; 
    color: #64748b; 
    margin-top: 2px; 
}

.today_card {
    display: flex;
    background: #1a1f3a;
    border-bottom: 1px solid #2a3458;
    border-radius: 5px;
    padding: 20px 40px;
}

.today_label { 
    font-size: 0.75rem; 
    color: #64748b; 
    margin-bottom: 6px; 
}
.today_price { 
    font-size: 1.8rem; 
    font-weight: 700; 
    color: #f1f5f9; 
}

.today_rates {
    display: flex;
    gap: 16px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.rate_group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rate_group_label {
    font-size: 0.7rem;
    color: #475569;
}

.rate_row {
    display: flex;
    gap: 10px;
}

.rate_item { 
    font-size: 0.85rem; 
}
.rate_label { 
    color: #64748b; 
    margin-right: 4px; 
    font-size: 0.75rem; 
}

.rate_up   { color: #f87171; }
.rate_down { color: #60a5fa; }
.rate_even { color: #94a3b8; }

.page_header_coin {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-left: auto;
    padding-right: 20px;
}
.page_header_coin img {
    width: 70px;
    transition: transform 0.5s ease;
}
.page_header_coin img:hover {
    transform: scale(1.25);
    transition: transform 0.5s ease;
}

.history_table { 
    width: 100%; 
    border-collapse: collapse; 
}

.history_table th {
    background: #162445;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid #2a3458;
}

.Th_Year { 
    width: 200px; 
    padding-left: 50px !important;
}
.Th_Date {
    width: 150px;
}
.Th_Price {
    
}
.Th_Yoy_Amount {
    width: 180px;
}
.Th_Yoy {
    width: 150px;
}
.Th_Amount {
    width: 150px;
}
.Th_Amount_Yoy {
    width: 150px;
}
.Th_Source {
    width: 130px;
}

.history_table td {
    padding: 12px;
    border-bottom: 1px solid #1a1f3a;
    font-size: 0.9rem;
    vertical-align: middle;
}

.history_table tr:last-child td { 
    border-bottom: none; 
}
.history_table tr:hover td { 
    background: #162445; 
}

.year_badge {
    display: inline-block;
    background: #0e1521;
    border: 1px solid #2a3458;
    border-radius: 5px;
    padding: 3px 8px;
    font-size: 0.8rem;
    color: #94a3b8;
    margin-left: 40px;
}

.price_val  { 
    font-weight: 600; 
    color: #f1f5f9; 
}
.amount_val { 
    color: #cbd5e1; 
}

.yoy_base { 
    display: block; 
    font-size: 0.7rem; 
    color: #475569; 
    margin-top: 2px; 
}

.diff_up   { 
    color: #14c714; 
    font-size: 0.82rem; 
}
.diff_down { 
    color: #d31212; 
    font-size: 0.82rem; 
}
.diff_even { 
    color: #94a3b8; 
    font-size: 0.82rem; 
}

.source_badge { 
    display: inline-block; 
    font-size: 0.7rem; 
    padding: 2px 6px; 
    border-radius: 3px; 
}
.source_collected { 
    background: #0e2a1a; 
    color: #34d399; 
    border: 1px solid #065f46; 
}
.source_history   { 
    background: #d6560c; 
    color: #fff; 
    border: 1px solid #b4490a; 
}

.no_data { 
    text-align: center; 
    padding: 40px; 
    color: #475569; 
    font-size: 0.9rem; 
}