@charset "utf-8";
/* 바이오소재 무역통계 (SFR-008-02) — /stats/trade. 화면 구조는 trade-stats.js 가 그린다 */

.trade_stats{position:relative}
.trade_sample_notice{margin-bottom:2rem}
.trade_sample_notice p{color:var(--color-secondary)}
.trade_topics .tab_lst{row-gap:.8rem}
.trade_loading{padding:6rem 0;text-align:center;color:var(--color-gray60)}

/* 주제 제목 + 내려받기 버튼 */
.trade_toolbar{display:flex;justify-content:space-between;align-items:center;gap:1.2rem;flex-wrap:wrap;margin:3.2rem 0 1.6rem}
.trade_topic_tit{display:inline-flex;align-items:center;gap:.8rem;font-size:var(--fs-tit-small);font-weight:var(--fws-semibold);color:var(--color-gray90)}
.trade_topic_tit::before{content:'';width:.4rem;height:1.8rem;border-radius:.2rem;background:var(--color-primary)}
.trade_toolbar .btn_box{display:flex;gap:.8rem;flex-wrap:wrap}

/* 조회 조건 */
.trade_query .option_wrap{padding:2rem 2.4rem}
.trade_label{display:block;margin:0 0 .6rem;padding:0;font-size:1.4rem;font-weight:var(--fws-medium);color:var(--color-gray90)}
.trade_period{display:flex;align-items:center;gap:1.6rem;padding-bottom:1.6rem;margin-bottom:1.6rem;border-bottom:1px dashed var(--color-gray30)}
.trade_period > .trade_label{margin:0;min-width:7rem}
.trade_period_fields{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.trade_period_pair{display:flex;gap:.6rem}
.trade_period_pair select{flex:0 0 12.8rem;width:12.8rem}
.trade_period_sep{color:var(--color-gray60)}
.trade_query_grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.6rem}
.trade_field{min-width:0;margin:0;padding:0;border:0}
.trade_field.wide{grid-column:span 2}
.trade_query select,
.trade_query input[type="search"]{width:100%;height:var(--emmt-m-h);padding:0 1.2rem;border:1px solid var(--color-gray30);border-radius:var(--emmt-br);background-color:#fff;font-size:1.5rem;color:var(--color-gray90)}
.trade_query select{padding-right:3.2rem;background-image:url(/images/common/sel_open.svg);background-repeat:no-repeat;background-size:2.4rem auto;background-position:right center;text-overflow:ellipsis}
.trade_query select:focus,
.trade_query input[type="search"]:focus{border-color:var(--color-point-blue80);box-shadow:0 0 4px rgba(80,136,239,.3)}
.trade_fixed{display:flex;align-items:center;height:var(--emmt-m-h);padding:0 1.2rem;border:1px solid var(--color-gray20);border-radius:var(--emmt-br);background:var(--color-gray10);color:var(--color-gray70);font-size:1.5rem}
.trade_checks{display:flex;align-items:center;gap:2.4rem;height:var(--emmt-m-h)}
.trade_query_foot{display:flex;justify-content:space-between;align-items:center;gap:1.6rem;margin-top:2rem;padding-top:1.6rem;border-top:1px solid var(--color-gray20)}
.trade_query_status{font-size:1.4rem;color:var(--color-gray60)}
.trade_query_status.dirty{color:var(--color-point-orange100);font-weight:var(--fws-medium)}
.trade_query_foot .btn_box{display:flex;gap:.8rem;flex-shrink:0}

/* 결과 머리 */
.trade_result_header{padding-top:3.2rem}
.trade_result_header .tit{font-size:var(--fs-tit-xsmall)}
.trade_badge{display:inline-flex;align-items:center;height:2.4rem;padding:0 .8rem;border-radius:.4rem;background:var(--color-gray-blue20);color:var(--color-secondary);font-size:1.3rem;font-weight:var(--fws-medium)}
.trade_unit{font-size:1.4rem;color:var(--color-gray70)}
.trade_summary{margin:0 0 1.2rem;font-size:1.4rem;color:var(--color-gray70)}
.trade_scope{display:flex;justify-content:space-between;gap:.8rem 1.6rem;flex-wrap:wrap;margin:0 0 1.2rem;padding:1rem 1.4rem;border:1px solid var(--color-gray20);border-radius:.4rem;background:var(--color-gray05);font-size:1.4rem;color:var(--color-gray70)}
.trade_scope b{margin-right:.6rem;color:var(--color-secondary);font-weight:var(--fws-semibold)}

/* 결과표 — 분기가 늘면 가로로 넓어지므로 표 안에서 스크롤 */
.trade_tbl_box{max-height:76rem;overflow:auto}
/* reset.css 의 table-layout:fixed · .scroll_x table 의 min-width 를 풀어 칸이 내용만큼 넓어지게 한다 */
.trade_tbl_box .trade_tbl{width:100%;min-width:0;table-layout:auto;font-size:1.4rem}
.trade_tbl th,
.trade_tbl td{white-space:nowrap;padding:.9rem 1.2rem;border-left:1px solid var(--color-gray20)}
/* 맨 왼쪽 칸만 선을 뺀다. 머리글 2·3행의 첫 칸은 위에서 합친 칸 오른쪽이라 선을 남긴다 */
.trade_tbl tbody tr > :first-child,
.trade_tbl tfoot tr > :first-child,
.trade_tbl thead tr:first-child th:first-child{border-left:0}
.trade_tbl thead tr + tr th{border-top:1px solid var(--color-gray20)}
.trade_tbl thead th{position:sticky;top:0;z-index:1;padding:1rem 1.2rem;background:var(--color-gray05);box-shadow:inset 0 -1px 0 var(--color-gray20)}
.trade_tbl tbody th{font-weight:var(--fws-medium);text-align:center;color:var(--color-gray90)}
.trade_tbl tbody td{text-align:right;font-variant-numeric:tabular-nums}
.trade_tbl td.trade_code,
.trade_tbl td.trade_name,
.trade_tbl td.trade_target,
.trade_tbl td.trade_country,
.trade_tbl td.trade_item{text-align:left}
.trade_tbl td.trade_rank,
.trade_tbl td.trade_change{text-align:center}
.trade_tbl .trade_name small,
.trade_total_label small{display:block;margin-top:.2rem;font-size:1.2rem;font-weight:var(--fws-regular);color:var(--color-gray60)}
.trade_tbl tbody tr.is_std > *{background:var(--color-gray-blue05)}
.trade_tbl tbody tr.is_etc > *{background:var(--color-gray05)}
.trade_tbl tbody tr.block_start > *{border-top:1px solid var(--color-gray40, #c4c4c4)}
.trade_tbl tbody tr:first-child > *{border-top:0}
.trade_tbl tfoot tr > *{background:var(--color-gray-blue10);font-weight:var(--fws-semibold);border-top:1px solid var(--color-gray-blue30)}
.trade_tbl tfoot tr:first-child > *{border-top:2px solid var(--color-secondary)}
.trade_tbl tfoot tr.total_all > *{background:var(--color-gray-blue20);color:var(--color-secondary)}
.trade_tbl tfoot td{text-align:right}
.trade_tbl tfoot td.trade_target{text-align:left}
.trade_total_label{text-align:left !important}
.trade_tbl td.trade_missing,
.trade_tbl .trade_missing{color:var(--color-gray60);font-size:1.2rem;font-weight:var(--fws-regular)}
.trade_tbl td.trade_up{color:var(--color-point-red)}
.trade_tbl td.trade_down{color:var(--color-point-blue)}
.trade_tbl .trade_rank span{display:inline-flex;align-items:center;justify-content:center;min-width:2.4rem;height:2.4rem;padding:0 .4rem;border-radius:.4rem;background:var(--color-secondary);color:#fff;font-size:1.3rem;font-weight:var(--fws-medium)}
.trade_tbl .trade_change.up{color:var(--color-point-red);font-weight:var(--fws-medium)}
.trade_tbl .trade_change.down{color:var(--color-point-blue);font-weight:var(--fws-medium)}
.trade_tbl .trade_item span{display:block;line-height:1.6}
.trade_tbl td.trade_empty{padding:4rem 0;text-align:center;color:var(--color-gray60)}
.trade_tbl_rank td.trade_item{min-width:16rem}

.trade_result_foot{display:flex;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;margin:.8rem 0 1.6rem;font-size:1.3rem;color:var(--color-gray60)}
.trade_notes .lst_dot02{font-size:1.4rem}

/* 알림 */
.trade_toast{position:fixed;left:50%;bottom:4rem;z-index:1000;transform:translateX(-50%);max-width:calc(100% - 4rem);padding:1.2rem 2rem;border-radius:.6rem;background:rgba(5,29,70,.92);color:#fff;font-size:1.4rem;box-shadow:0 .4rem 1.6rem rgba(0,0,0,.18)}
.trade_toast[hidden]{display:none}

/* 통계 안내 */
.trade_guide .modal_body{line-height:1.7}
.trade_guide .modal_body p{margin:0 0 1rem}
.trade_guide .guide_lead{color:var(--color-gray70)}
.trade_guide .guide_tit{margin:2.4rem 0 1rem;font-size:var(--fs-tit-xsmall);font-weight:var(--fws-semibold);color:var(--color-secondary)}
.trade_guide .guide_box{padding:1.2rem 1.6rem;border-radius:.4rem;background:var(--color-gray-blue10)}
.trade_guide .guide_notes dt{margin-top:1.2rem;font-weight:var(--fws-semibold)}
.trade_guide .guide_notes dd{margin:.4rem 0 0}
.trade_guide .guide_foot{margin-top:1.6rem;color:var(--color-gray70);font-size:1.4rem}

@media (max-width:1024px){
    .trade_query_grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
    .trade_query .option_wrap{padding:1.6rem}
    .trade_query_grid{grid-template-columns:minmax(0,1fr)}
    .trade_field.wide{grid-column:auto}
    .trade_period{flex-direction:column;align-items:flex-start;gap:.8rem}
    .trade_period_pair select{width:auto;flex:1 1 auto}
    .trade_query_foot{flex-direction:column;align-items:stretch}
    .trade_query_foot .btn_box{justify-content:flex-end}
    .trade_tbl th,
    .trade_tbl td{padding:.8rem;font-size:1.3rem}
}
@media print{
    .trade_toolbar .btn_box,
    .trade_query,
    .trade_toast{display:none !important}
    .trade_tbl_box{max-height:none;overflow:visible}
}