/* =============================================================
 * economy-hub.css  —  경제 허브 카테고리 모듈
 *
 * 의존: _tokens.css (색상/폰트/간격/반경/그림자/브레이크포인트 변수)
 * 규약: 브레이크포인트 표준 (≤ 480 / 768 / 1024 / 1280 / 1400 / 1920)
 *       색상/폰트값은 var(--*) 참조 사용
 * ============================================================= */

[hidden] { display: none !important; }

/* =============================================================================
   Root
   ============================================================================= */
.economy-hub {
    --eh-primary:    #1a56db;
    --eh-accent:     #0e9f6e;
    --eh-danger:     #e02424;
    --eh-neutral:    var(--color-gray-500);
    --eh-border:     var(--color-gray-200);
    --eh-bg:         var(--color-white);
    --eh-bg-alt:     var(--color-gray-50);
    --eh-text:       #111827;
    --eh-text-mute:  var(--color-gray-500);
    --eh-radius:     8px;
    --eh-shadow:     0 1px 4px rgba(var(--rgb-black), .07);

    background:    var(--eh-bg);
    border:        1px solid var(--eh-border);
    border-radius: var(--eh-radius);
    margin-bottom: 28px;
    overflow:      hidden;
    font-family:   'Noto Sans KR', sans-serif;
}

/* =============================================================================
   헤더
   ============================================================================= */
.economy-hub__header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         14px 16px 12px;
    border-bottom:   2px solid var(--eh-primary);
    gap:             8px;
}
.economy-hub__heading {
    margin:      0;
    font-size:   var(--fs-xl);
    font-weight: var(--fw-bold);
    color:       var(--eh-text);
    display:     flex;
    align-items: center;
    gap:         6px;
}
.economy-hub__heading-icon { font-size: var(--fs-2xl); }
.economy-hub__today {
    font-size:  var(--fs-sm);
    color:      var(--eh-text-mute);
    white-space: nowrap;
}

/* =============================================================================
   안내 배너
   ============================================================================= */
.economy-hub__notice {
    padding:     8px 16px;
    background:  #fffbeb;
    border-bottom: 1px solid #fde68a;
    font-size:   var(--fs-sm);
    color:       #92400e;
    display:     flex;
    gap:         6px;
    align-items: center;
}

/* =============================================================================
   섹션 탭 (마켓 지표 / 경제 캘린더)
   ============================================================================= */
.economy-hub__section-nav {
    padding:      0 16px;
    border-bottom: 1px solid var(--eh-border);
    background:   var(--eh-bg-alt);
}
.economy-hub__section-tabs {
    display:   flex;
    gap:       0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.economy-hub__section-tabs::-webkit-scrollbar { display: none; }

.economy-hub__section-tab {
    flex:            0 0 auto;
    padding:         10px 16px;
    border:          none;
    background:      none;
    font-size:       var(--fs-md);
    font-weight:     var(--fw-medium);
    color:           var(--eh-text-mute);
    cursor:          pointer;
    border-bottom:   3px solid transparent;
    transition:      color .15s, border-color .15s;
    white-space:     nowrap;
    display:         flex;
    align-items:     center;
    gap:             5px;
}
.economy-hub__section-tab:hover {
    color: var(--eh-primary);
}
.economy-hub__section-tab.is-active {
    color:        var(--eh-primary);
    border-color: var(--eh-primary);
    font-weight:  var(--fw-bold);
}

/* =============================================================================
   ── 섹션 1: 마켓 지표
   ============================================================================= */

/* 마켓 탭 (환율 / 국내 / 해외) */
.economy-hub__market-nav {
    padding:       0 16px;
    border-bottom: 1px solid var(--eh-border);
}
.economy-hub__market-tabs {
    display:   flex;
    gap:       0;
    overflow-x: auto;
    scrollbar-width: none;
}
.economy-hub__market-tabs::-webkit-scrollbar { display: none; }

.economy-hub__market-tab {
    flex:         0 0 auto;
    padding:      8px 14px;
    border:       none;
    background:   none;
    font-size:    var(--fs-base);
    font-weight:  var(--fw-medium);
    color:        var(--eh-text-mute);
    cursor:       pointer;
    border-bottom: 2px solid transparent;
    transition:   color .15s, border-color .15s;
}
.economy-hub__market-tab:hover { color: var(--eh-primary); }
.economy-hub__market-tab.is-active {
    color:        var(--eh-primary);
    border-color: var(--eh-primary);
}

/* 마켓 패널 + 카드 그리드 */
.economy-hub__market-panel {
    padding:  12px 16px 8px;
}

/* 카드 그리드 (JS 렌더링) */
.economy-hub__market-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap:                   10px;
    padding-bottom:        4px;
}

.market-card {
    background:    var(--eh-bg-alt);
    border:        1px solid var(--eh-border);
    border-radius: 6px;
    padding:       12px 12px 10px;
    display:       flex;
    flex-direction: column;
    gap:           4px;
}
.market-card__label {
    font-size:   var(--fs-xs);
    font-weight: var(--fw-bold);
    color:       var(--eh-text-mute);
    text-transform: uppercase;
    letter-spacing: .4px;
}
.market-card__desc {
    font-size: var(--fs-xs);
    color:     var(--eh-text-mute);
}
.market-card__value {
    font-size:   var(--fs-3xl);
    font-weight: var(--fw-bold);
    color:       var(--eh-text);
    line-height: 1.2;
}
.market-card__change {
    font-size:   var(--fs-sm);
    font-weight: var(--fw-medium);
    display:     flex;
    align-items: center;
    gap:         3px;
}
.market-card__change--up   { color: var(--eh-danger); }
.market-card__change--down { color: var(--eh-primary); }
.market-card__change--flat { color: var(--eh-neutral); }

/* 더보기로 접힌 카드 */
.market-card--more { display: none; }

/* 더보기 버튼 */
.economy-hub__market-more-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             5px;
    width:           100%;
    margin-top:      8px;
    padding:         7px 0;
    border:          1px dashed var(--eh-border);
    border-radius:   6px;
    background:      none;
    font-size:       var(--fs-sm);
    font-weight:     var(--fw-medium);
    color:           var(--eh-text-mute);
    cursor:          pointer;
    transition:      color .15s, border-color .15s, background .15s;
}
.economy-hub__market-more-btn:hover {
    color:        var(--eh-primary);
    border-color: var(--eh-primary);
    background:   #f0f4ff;
}
.market-more-count {
    font-weight: var(--fw-bold);
    color:       var(--eh-primary);
}
.market-more-arrow { font-size: var(--fs-xs); }

/* 스켈레톤 로딩 */
.economy-hub__market-skeleton {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap:                   10px;
    padding-bottom:        4px;
}
@keyframes eh-shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position:  400px 0; }
}
.market-skeleton-card {
    height:     86px;
    border-radius: 6px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 800px 100%;
    animation:  eh-shimmer 1.4s infinite linear;
}

/* 출처 + 면책 고지 (전 탭 공통) */
.economy-hub__coin-notice {
    margin:      8px 0 0;
    padding:     7px 10px;
    background:  #fffbeb;
    border:      1px solid #fde68a;
    border-radius: 5px;
    font-size:   var(--fs-xs);
    color:       #92400e;
    line-height: 1.6;
}

/* 업데이트 시각 */
.economy-hub__market-updated {
    font-size:  var(--fs-xs);
    color:      var(--eh-text-mute);
    padding:    0 16px 10px;
    margin:     0;
    text-align: right;
}

/* =============================================================================
   ── 섹션 2: 경제 캘린더
   ============================================================================= */

/* 지역 탭 (국내 / 미국) */
.economy-hub__cal-nav {
    padding:       0 16px;
    border-bottom: 1px solid var(--eh-border);
    background:    var(--eh-bg-alt);
}
.economy-hub__cal-tabs {
    display:    flex;
    gap:        0;
    overflow-x: auto;
    scrollbar-width: none;
}
.economy-hub__cal-tabs::-webkit-scrollbar { display: none; }

.economy-hub__cal-tab {
    flex:         0 0 auto;
    padding:      8px 14px;
    border:       none;
    background:   none;
    font-size:    var(--fs-base);
    font-weight:  var(--fw-medium);
    color:        var(--eh-text-mute);
    cursor:       pointer;
    border-bottom: 2px solid transparent;
    transition:   color .15s, border-color .15s;
}
.economy-hub__cal-tab:hover { color: var(--eh-primary); }
.economy-hub__cal-tab.is-active {
    color:        var(--eh-primary);
    border-color: var(--eh-primary);
}

/* 날짜 범위 필터 */
.economy-hub__cal-filters {
    padding:    10px 16px 8px;
    border-bottom: 1px solid var(--eh-border);
}
.economy-hub__cal-range-group {
    display:    flex;
    gap:        6px;
    flex-wrap:  wrap;
}
.economy-hub__cal-range-btn {
    padding:      4px 10px;
    border:       1px solid var(--eh-border);
    border-radius: 20px;
    background:   var(--eh-bg);
    font-size:    var(--fs-sm);
    font-weight:  var(--fw-medium);
    color:        var(--eh-text-mute);
    cursor:       pointer;
    transition:   all .15s;
}
.economy-hub__cal-range-btn:hover {
    border-color: var(--eh-primary);
    color:        var(--eh-primary);
}
.economy-hub__cal-range-btn.is-active {
    background:   var(--eh-primary);
    border-color: var(--eh-primary);
    color:        var(--color-white);
}

/* 캘린더 패널 */
.economy-hub__cal-panel {
    padding: 0 0 4px;
}

/* 날짜 그룹 */
.economy-hub__cal-day {
    border-bottom: 1px solid var(--eh-border);
}
.economy-hub__cal-day:last-child { border-bottom: none; }

.cal-day__header {
    display:      flex;
    align-items:  center;
    gap:          6px;
    padding:      8px 16px 6px;
    background:   var(--eh-bg-alt);
    border-bottom: 1px solid var(--eh-border);
    position:     sticky;
    top:          0;
    z-index:      1;
}
.cal-day__header.is-today { background: #eff6ff; }
.cal-day__header.is-past  { opacity: .75; }

.cal-day__date {
    font-size:   var(--fs-base);
    font-weight: var(--fw-bold);
    color:       var(--eh-text);
}
.cal-day__dow {
    font-size:  var(--fs-sm);
    color:      var(--eh-text-mute);
}
.cal-day__today-badge {
    font-size:    var(--fs-xs);
    font-weight:  var(--fw-bold);
    background:   var(--eh-primary);
    color:        var(--color-white);
    padding:      1px 6px;
    border-radius: 10px;
    margin-left:  4px;
}

/* 이벤트 행 */
.cal-day__events {
    display: flex;
    flex-direction: column;
}

.cal-event {
    display:       grid;
    grid-template-columns: 80px 1fr auto;
    align-items:   center;
    gap:           8px;
    padding:       10px 16px;
    border-bottom: 1px solid var(--color-gray-100);
    transition:    background .12s;
}
.cal-event:last-child    { border-bottom: none; }
.cal-event:hover         { background: var(--color-gray-50); }

/* 왼쪽: 중요도 + 시간 */
.cal-event__left {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            3px;
}

.cal-event__importance {
    display:       inline-block;
    font-size:     var(--fs-xs);
    font-weight:   var(--fw-bold);
    padding:       1px 5px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: .3px;
}
.cal-event__importance--high   { background: #fee2e2; color: #b91c1c; }
.cal-event__importance--medium { background: #fef3c7; color: #92400e; }
.cal-event__importance--low    { background: var(--color-gray-100); color: var(--color-gray-500); }

.cal-event__time {
    font-size:  var(--fs-xs);
    color:      var(--eh-text-mute);
    font-variant-numeric: tabular-nums;
}

/* 중앙: 타입 아이콘 + 제목 */
.cal-event__main {
    display:     flex;
    align-items: flex-start;
    gap:         6px;
    min-width:   0;
}
.cal-event__type-icon { font-size: var(--fs-md); flex-shrink: 0; margin-top: 1px; }
.cal-event__title {
    font-size:   var(--fs-base);
    font-weight: var(--fw-medium);
    color:       var(--eh-text);
    line-height: 1.4;
    word-break:  keep-all;
}

/* 오른쪽: 이전/예측/실제 값 */
.cal-event__values {
    display:        flex;
    flex-direction: column;
    align-items:    flex-end;
    gap:            2px;
    white-space:    nowrap;
}
.cal-event__val-group {
    display:     flex;
    align-items: center;
    gap:         4px;
}
.cal-event__val-label {
    font-size:  var(--fs-xs);
    color:      var(--eh-text-mute);
}
.cal-event__val {
    font-size:   var(--fs-sm);
    font-weight: var(--fw-medium);
    color:       var(--eh-text);
    font-variant-numeric: tabular-nums;
}
.cal-event__val-group--actual .cal-event__val-label { color: var(--eh-accent); }
.cal-event__val--actual {
    color:      var(--eh-accent);
    font-weight: var(--fw-bold);
}

/* 빈 결과 */
.economy-hub__cal-empty {
    padding:    20px 16px;
    text-align: center;
    color:      var(--eh-text-mute);
    font-size:  var(--fs-base);
    margin:     0;
}
.economy-hub__market-error {
    text-align: center;
    color:      var(--eh-text-mute);
    font-size:  var(--fs-base);
    padding:    20px 0;
}

/* =============================================================================
   환율 / 코인 계산기 모달
   ============================================================================= */

.market-card--calc {
    cursor: pointer;
    transition: transform .12s, box-shadow .12s;
}
.market-card--calc:hover {
    transform:  translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--rgb-black), .10);
}
.market-card--calc::after {
    content:     '계산기 🧮';
    display:     block;
    font-size:   var(--fs-xs);
    color:       var(--eh-primary);
    margin-top:  4px;
    opacity:     .7;
}

.eh-calc-overlay {
    position:        fixed;
    inset:           0;
    background:      rgba(var(--rgb-black), .45);
    z-index:         9999;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         16px;
}
.eh-calc-modal {
    background:    var(--color-white);
    border-radius: 12px;
    padding:       24px 20px 20px;
    width:         100%;
    max-width: 480px;
    box-shadow:    0 8px 32px rgba(var(--rgb-black), .18);
    position:      relative;
}
.eh-calc-close {
    position:   absolute;
    top:        12px;
    right:      14px;
    border:     none;
    background: none;
    font-size:  var(--fs-2xl);
    color:      var(--eh-text-mute);
    cursor:     pointer;
    line-height: 1;
    padding:    0;
}
.eh-calc-close:hover { color: var(--eh-text); }

.eh-calc-header {
    display:     flex;
    align-items: baseline;
    gap:         6px;
    margin-bottom: 4px;
}
.eh-calc-label {
    font-size:   17px;
    font-weight: var(--fw-bold);
    color:       var(--eh-text);
}
.eh-calc-desc {
    font-size:  var(--fs-sm);
    color:      var(--eh-text-mute);
}
.eh-calc-rate {
    font-size:   var(--fs-sm);
    color:       var(--eh-primary);
    font-weight: var(--fw-semibold);
    margin:      0 0 16px;
}

.eh-calc-rows {
    display:        flex;
    flex-direction: column;
    gap:            4px;
}
.eh-calc-row {
    display:     grid;
    grid-template-columns: 56px 1fr;
    grid-template-rows:    auto auto;
    gap:         4px 8px;
    align-items: center;
    padding:     10px 12px;
    background:  var(--eh-bg-alt);
    border:      1px solid var(--eh-border);
    border-radius: 8px;
}
.eh-calc-unit {
    font-size:   var(--fs-xs);
    font-weight: var(--fw-bold);
    color:       var(--eh-text-mute);
    text-transform: uppercase;
}
.eh-calc-input {
    border:        1px solid var(--eh-border);
    border-radius: 5px;
    padding:       6px 8px;
    font-size:     var(--fs-lg);
    font-weight:   var(--fw-semibold);
    color:         var(--eh-text);
    width:         100%;
    box-sizing:    border-box;
    outline:       none;
    background:    var(--color-white);
}
.eh-calc-input:focus {
    border-color: var(--eh-primary);
    box-shadow:   0 0 0 2px rgba(26,86,219,.12);
}
.eh-calc-input::-webkit-inner-spin-button,
.eh-calc-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.eh-calc-result {
    grid-column:  2;
    font-size:    var(--fs-base);
    font-weight:  var(--fw-semibold);
    color:        var(--eh-primary);
    padding-left: 2px;
    min-height:   18px;
}
.eh-calc-swap {
    text-align:  center;
    font-size:   var(--fs-xl);
    color:       var(--eh-text-mute);
    line-height: 1;
    padding:     2px 0;
}

/* =============================================================================
   반응형
   ============================================================================= */
@media (max-width: 768px) {
    /* 헤더 중앙 정렬 + 날짜 숨김 (페이지 상단에 이미 표시됨) */
    .economy-hub__header {
        justify-content: center;
        gap:             12px;
    }
    .economy-hub__today {
        display: none;
    }

    /* 섹션 탭 중앙 정렬 */
    .economy-hub__section-tabs {
        justify-content: center;
    }

    /* 마켓 탭 중앙 정렬 */
    .economy-hub__market-tabs {
        justify-content: center;
    }

    /* 캘린더 지역 탭 중앙 정렬 */
    .economy-hub__cal-tabs {
        justify-content: center;
    }

    /* 날짜 범위 필터 중앙 정렬 */
    .economy-hub__cal-range-group {
        justify-content: center;
    }

    /* 환율 그리드 2열 */
    .economy-hub__market-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .economy-hub__market-skeleton {
        grid-template-columns: repeat(2, 1fr);
    }
    .cal-event {
        grid-template-columns: 70px 1fr;
        grid-template-rows:    auto auto;
    }
    .cal-event__values {
        grid-column: 2;
        align-items: flex-start;
        flex-direction: row;
        flex-wrap:   wrap;
        gap:         6px;
    }
    .market-card__value { font-size: 17px; }
}

@media (max-width: 480px) {
    .economy-hub__market-grid,
    .economy-hub__market-skeleton {
        grid-template-columns: 1fr 1fr;
    }
    .cal-event__values { display: none; }
}