/*=============================================================
  fx.css - 환율 변동추이
    공통 틀은 /dashboard/css/dashboard.css 를 그대로 쓴다.
    여기에는 이 화면에만 있는 것만 둔다.
=============================================================*/

.fx-top {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 20px;
}
.fx-top .chart-card { flex: 1 1 auto; min-width: 0; margin-bottom: 0; }

.fx-side { flex: 0 0 236px; display: flex; flex-direction: column; gap: 12px; }

.fx-panel {
    background: #fff;
    border: 1px solid #e5e5ea;
    border-radius: 14px;
    padding: 14px 16px;
}
.fx-panel-title {
    font-size: 13px;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 10px;
}

.fx-diff-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.fx-diff-tbl th {
    padding: 6px 4px;
    font-weight: 500;
    color: #86868b;
    background: #f5f5f7;
    border: 1px solid #e5e5ea;
    text-align: center;
    white-space: nowrap;
}
.fx-diff-tbl td {
    padding: 8px 4px;
    border: 1px solid #e5e5ea;
    text-align: center;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.fx-diff-tbl td.up   { color: #ff3b30; font-weight: 600; }
.fx-diff-tbl td.down { color: #0a84ff; font-weight: 600; }
.fx-diff-tbl td.flat { color: #86868b; }

.fx-now { font-size: 13px; line-height: 1.9; }
.fx-now .row { display: flex; justify-content: space-between; gap: 10px; }
.fx-now .nm { color: #86868b; }
.fx-now .val { font-weight: 600; font-variant-numeric: tabular-nums; }

.fx-basis { font-size: 13px; }
.fx-basis .b-row { padding: 7px 0; border-bottom: 1px solid #f0f0f2; }
.fx-basis .b-row:last-child { border-bottom: none; }
.fx-basis .b-nm { font-weight: 600; color: #1d1d1f; margin-bottom: 3px; }
.fx-basis .b-line { display: flex; justify-content: space-between; gap: 8px; color: #86868b; line-height: 1.7; }
.fx-basis .b-line .v { color: #1d1d1f; font-variant-numeric: tabular-nums; }
.fx-basis .b-gap { font-weight: 600; font-variant-numeric: tabular-nums; }
.fx-basis .b-gap.up   { color: #ff3b30; }
.fx-basis .b-gap.down { color: #0a84ff; }
.fx-basis .b-none { color: #86868b; }

.fx-note { margin-top: 10px; font-size: 11px; line-height: 1.6; color: #a1a1a6; }

.fx-bottom { display: flex; gap: 16px; align-items: flex-start; }
.fx-bottom > .chart-card { flex: 1 1 auto; min-width: 0; }
.fx-bottom > .fx-bottom-side { flex: 0 0 340px; }

.fx-ctrl {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 16px;
    font-size: 13px;
}
.fx-ctrl .sep { width: 1px; height: 20px; background: #e5e5ea; }
.fx-ctrl input[type=date] {
    padding: 5px 8px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 13px;
}
.fx-cur-box {
    display: flex;
    gap: 4px 12px;
    flex-wrap: wrap;
    align-items: center;
}
.fx-cur-box label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #555;
    cursor: pointer;
    white-space: nowrap;
}
.fx-cur-box input { cursor: pointer; }

.fx-chart-area { position: relative; height: 380px; }

.fx-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.fx-tbl thead th {
    padding: 9px 8px;
    font-weight: 500;
    color: #86868b;
    background: #f5f5f7;
    border-bottom: 1px solid #e5e5ea;
    text-align: right;
    white-space: nowrap;
}
.fx-tbl thead th:first-child { text-align: left; }
.fx-tbl tbody td {
    padding: 8px;
    border-bottom: 1px solid #f0f0f2;
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.fx-tbl tbody td:first-child { text-align: left; color: #555; }
.fx-tbl tbody tr:hover { background: #f9f9fb; }
.fx-tbl tbody td.up   { color: #ff3b30; }
.fx-tbl tbody td.down { color: #0a84ff; }
.fx-tbl-wrap { max-height: 420px; overflow-y: auto; }

.fx-btn {
    padding: 6px 14px;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 8px;
    font-size: 13px;
    color: #555;
    cursor: pointer;
}
.fx-btn:hover { background: #f5f5f7; }

@media (max-width: 900px) {
    /* 세로로 쌓일 때 align-items:flex-start 가 남아 있으면 카드가 내용 폭으로 줄어든다 */
    .fx-top { flex-direction: column; align-items: stretch; }
    .fx-side { flex: 1 1 auto; width: 100%; flex-direction: row; flex-wrap: wrap; }
    .fx-panel { flex: 1 1 240px; }
    .fx-chart-area { height: 300px; }
    .fx-bottom { flex-direction: column; align-items: stretch; }
    .fx-bottom > .fx-bottom-side { flex: 1 1 auto; }
}
@media (max-width: 600px) {
    .fx-chart-area { height: 260px; }
}