/* ////  통계 클래스 //// */

.tongge_comns_ms{padding:40px 0 40px; width:1400px; margin:0 auto;}


/* Style the buttons inside the tab */

.tab_tongge{display:flex; justify-content: center;  font-family: 'Paperozi';}

.tab_tongge button {
  background-color: #ffaa6c;
  border: none;
  outline: none;
  font-family: 'Paperozi';
  cursor: pointer;
  padding: 10px 20px 10px;
  margin-right:30px;
  border-radius:24px;
  transition: 0.3s;
  font-size: 17px;
  color:#fff;
}

/* Change background color of buttons on hover */
.tab_tongge button:hover {
  background-color: #f4781d;
}

/* Create an active/current tablink class */
.tab_tongge button.active {
  background-color: #f4781d;
  color:#fff;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 10px 0px 10px;
  border: 0px solid #ccc;
  border-top: none;
}


/* 통계 1 */

:root{
      --bg:#f3f3f3;
      --text:#1b1b1b;
      --muted:#7a7a7a;
      --line:#d9d9d9;

      --blue:#1f8fb2;        /* 왼쪽 도넛 */
      --orange:#f29a2e;      /* 2.7% */
      --pink:#f6b5bf;        /* 여성 */
      --mint:#bfe8dd;        /* 남성 */

      --y2016:#1f88e8;
      --y2017:#7d84ff;
      --y2018:#00d5a3;
      --y2019:#a8b7d1;
      --y2020:#a7e7ff;
      --y2021:#00bfe1;
      --y2022:#7fe5d6;
      --y2023:#4b3ad3;
      --y2024:#cdbbff;

      --bar2024:#ff9a3d;
      --bar2023:#ead089;

      --cardRadius:18px;
      --maxW:1400px;
    }

    .wrap{
      max-width:var(--maxW);
      margin:0 auto;
      /*background:var(--bg);*/
      border-radius:22px;
      padding:28px 28px 22px;
    }

    .title{
      font-size:28px;
      font-weight:800;
      margin:0 0 18px;
      letter-spacing:-0.5px;
    }

    .top{
      display:grid;
      grid-template-columns: 1.1fr 1fr 1.1fr;
      gap:18px;
      align-items:center;
    }

    .centerStat{
      text-align:center;
      padding:6px 8px;
    }
    .centerStat .label{
      font-size:18px;
      font-weight:700;
      color:#333;
      line-height:1.2;
      margin-bottom:10px;
      white-space:pre-line;
    }
    .centerStat .big{
      font-size:54px;
      font-weight:900;
      color:var(--orange);
      letter-spacing:-1px;
    }

    .divider{
      height:1px;
      background:var(--line);
      margin:22px 0;
    }

    /* Donut */
    .donutCard{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:18px;
      padding:6px 0;
    }
    .donut{
      width:220px;
      max-width:100%;
      aspect-ratio:1/1;
      position:relative;
    }
    .donut svg{width:100%; height:100%; display:block}
    .donut .centerText{
      position:absolute;
      inset:0;
      display:flex;
      align-items:center;
      justify-content:center;
      flex-direction:column;
      text-align:center;
      padding:18px;
    }
    .donut .centerText .small{
      font-size:16px;
      font-weight:500;
      color:#2b2b2b;
      margin-bottom:6px;
    }
    .donut .centerText .num{
      font-size:20px;
      font-weight:900;
      letter-spacing:-0.3px;
    }
    .donut .centerText .num span{font-weight:800; font-size:18px}

    .legendAround{
      position:absolute;
      inset:0;
      pointer-events:none;
      font-weight:500;
      color:#3a3a3a;
    }
    .legendAround .left{
      position:absolute; left:-26px; top:50%;
      transform:translateY(-50%);
      text-align:right;
      font-size:16px;
      line-height:1.1;
    }
    .legendAround .right{
      position:absolute; right:-26px; top:50%;
      transform:translateY(-50%);
      text-align:left;
      font-size:16px;
      line-height:1.1;
    }

    /* 섹션 타이틀 */
   
	.tongge_years_m{display:flex; align-items: center; justify-content: space-between; padding:0 0 15px;}
	.sectionTitle{
      font-size:22px;
      font-weight:700;
      letter-spacing:-0.4px;
    }

	.sm_dll{font-size:14px; color: #777; font-weight: 500;}

    /* 연도별 */
    .yearRow{
      display:grid;
      grid-template-columns: repeat(9, 1fr);
      gap:14px;
      align-items:end;
      padding:8px 4px 2px;
    }

    .yearItem{
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:6px;
      min-width:0;
    }
    .yearItem .val{
      font-weight:500;
      color:#2a2a2a;
      font-size:16px;
      line-height:1;
      white-space:nowrap;
    }
    .yearItem .delta{
      display:flex;
      align-items:center;
      gap:8px;
      font-weight:500;
      color:#111;
      font-size:14px;
      line-height:1;
      white-space:nowrap;
    }
    .yearItem .delta .arrow{
      font-size:16px;
      color:#111;
    }

    .barBox{
      width:48px;
      max-width:100%;
      height:150px;
      display:flex;
      align-items:flex-end;
      justify-content:center;
      position:relative;
    }
    .bar{
      width:46px;
      border-radius:10px;
      height:20px; /* JS로 덮어씀 */
    }

    .year{
      font-weight:700;
      color:#333;
      margin-top:2px;
      font-size:16px;
    }

    /* 하단 비교 */
    .bottom{
      margin-top:10px;
    }
    .subLegend{
      display:flex;
      align-items:center;
      gap:22px;
      justify-content:center;
      margin:8px 0 14px;
      font-weight:900;
      color:#333;
    }
    .chip{
      display:inline-flex;
      align-items:center;
      gap:8px;
      font-size:18px;
    }
    .sq{width:12px; height:12px; border-radius:3px; display:inline-block}
    .sq.o{background:var(--bar2024)}
    .sq.y{background:var(--bar2023)}

    .catRow{
      display:grid;
      grid-template-columns: repeat(5, 1fr);
      gap:22px;
      align-items:end;
      padding:0 6px;
    }

    .cat{
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:8px;
    }
    .pair{
      width:100%;
      height:140px;
      display:flex;
      align-items:flex-end;
      justify-content:center;
      gap:10px;
    }
    .b{
      width:62px;
      max-width:44%;
      border-radius:10px 10px 6px 6px;
      height:18px; /* JS로 */
    }
    .b.o{background:var(--bar2024)}
    .b.y{background:var(--bar2023)}
    .pairVals{
      width:100%;
      display:flex;
      justify-content:center;
      gap:24px;
      margin-top:-6px;
      font-weight:500;
      color:#2a2a2a;
      font-size:16px;
      white-space:nowrap;
    }
    .catName{
      font-weight:700;
      color:#333;
      margin-top:2px;
      font-size:16px;
      text-align:center;
      white-space:nowrap;
    }

   
/* //// */


/* 통계2 */

 /* =========================
  Tonggem Infographic Styles
========================= */
.tonggem_wrap {
   font-family: 'Paperozi';
  color: #111;
  background: #fff;
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px 18px 40px;
}

.tonggem_sec {
  padding: 18px 0 26px;
  border-bottom: 1px solid #e9e9e9;
}

.tonggem_sec_head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  padding: 0 0 30px;
}

.tonggem_sec_head_big {
  margin-bottom: 18px;
}

.tonggem_title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}

.tonggem_unit {
  font-size: 14px;
  color: #777;
  font-weight: 500;
}

/* ==============
  YEAR BAR CHART
============== */
.tonggem_year_grid {
  display: grid;
  grid-template-columns: repeat(11, minmax(56px, 1fr));
  gap: 18px;
  align-items: end;
  padding-top: 6px;
}

.tonggem_year_item {
  display: grid;
  grid-template-rows: 140px auto;
  gap: 10px;
  align-items: end;
  justify-items: center;
  padding: 0 0 30px;
}

.tonggem_year_bar {
  width: 38px;
  height: 100%;
  position: relative;
  border-radius: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.tonggem_year_bar::before {
  content: "";
  width: 100%;
  height: var(--h, 50%);
  display: block;
  border-radius: 0;
  background: currentColor;
}

.tonggem_year_value {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  font-weight: 700;
  color: #111;
  white-space: nowrap;
}

.tonggem_year_label {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

/* colors (연도 막대) */
.tonggem_c_orange { color: #ff7a2f; }
.tonggem_c_yellow { color: #f6c400; }
.tonggem_c_green { color: #79d12b; }
.tonggem_c_gray { color: #5e5e5e; }
.tonggem_c_sky { color: #46c9ff; }
.tonggem_c_blue { color: #2e86c1; }
.tonggem_c_magenta { color: #d1146b; }
.tonggem_c_pink { color: #ff1493; }
.tonggem_c_tan { color: #a48d72; }
.tonggem_c_navy { color: #0a1f66; }
.tonggem_c_deepblue { color: #0b68a6; }

/* ======================
  LEGEND
====================== */
.tonggem_legend {
  display: flex;
  gap: 22px;
  justify-content: center;
  align-items: center;
  margin: 8px 0 14px;
  padding: 0 0 30px;
}

.tonggem_leg {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
}

.tonggem_dot {
  width: 14px;
  height: 14px;
  border-radius: 0;
  display: inline-block;
}

.tonggem_dot_orangeb{background:#ff7a2f;}
.tonggem_dot_yellowb{background:#f6c400;} 

.tonggem_dot_orange { background:/* #ff7a2f;*/ transparent; }
.tonggem_dot_yellow { background: /* #f6c400;*/ transparent;}

/* ======================
  NATIONALITY COMPARE
====================== */
.tonggem_compare_grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(98px, 1fr));
  gap: 24px;
  align-items: end;
}

.tonggem_cmp_item {
  display: grid;
  grid-template-rows: 140px auto;
  gap: 10px;
  justify-items: center;
  align-items: end;
}

.tonggem_cmp_bars {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: end;
  justify-items: center;
}

.tonggem_cmp_bar {
  width: 34px;
  height: 100%;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.tonggem_cmp_bar::before {
  content: "";
  width: 100%;
  height: var(--h, 40%);
  background: #ff7a2f;
  display: block;
}

.tonggem_cmp_bar2 {
  width: 34px;
  height: 100%;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.tonggem_cmp_bar2::before {
    content: "";
    width: 100%;
    height: var(--h, 40%);
    background: #f6c400;
    display: block;
}

.tonggem_cmp_value {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 13px;
  font-weight: 700;
  color: #111;
  white-space: nowrap;
}

.tonggem_cmp_label {
  font-size: 14px;
  font-weight: 700;
  color: #333;
  text-align: center;
  line-height: 1.2;
}

/* ======================
  2025 DETAIL LAYOUT
====================== */
.tonggem_subgrid {
  display: grid;
  grid-template-columns: 1.05fr 1.25fr;
  gap: 26px;
  align-items: start;
  padding-top: 6px;
}

.tonggem_subtitle {
  font-size: 20px;
  font-weight: 800;
  margin: 0 0 10px;
}

.tonggem_total {
  font-size: 16px;
  font-weight: 700;
  color: #333;
  margin: 0 0 12px;
  padding: 0 0 30px;
}

.tonggem_total strong {
  font-weight: 900;
}

/* 과정별 */
.tonggem_course_row {
  display: grid;
  grid-template-columns: repeat(5, minmax(76px, 1fr));
  gap: 22px;
  align-items: end;
}

.tonggem_course_item {
  display: grid;
  grid-template-rows: 170px auto;
  gap: 10px;
  justify-items: center;
  align-items: end;
}

.tonggem_course_bar {
  width: 44px;
  height: 100%;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.tonggem_course_bar::before {
  content: "";
  width: 100%;
  height: var(--h, 40%);
  background: currentColor;
  display: block;
}

.tonggem_course_value {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  font-weight: 800;
  color: #111;
  white-space: nowrap;
}

.tonggem_course_label {
  font-size: 14px;
  font-weight: 800;
  color: #333;
  text-align: center;
}

/* 과정별 컬러 */
.tonggem_course_mint { color: #8fd3c7; }
.tonggem_course_coral { color: #f2877a; }
.tonggem_course_sky { color: #a8e1ff; }
.tonggem_course_sand { color: #f0d9a0; }
.tonggem_course_pink { color: #f7a6bd; }

/* 국적별 카드 그리드 */
.tonggem_cards {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: 16px 10px;
  align-items: start;
}

.tonggem_card {
  text-align: center;
  padding: 6px 6px 10px;
}

.tonggem_flag {
  width: 54px;
  height: 36px;
  margin: 0 auto 8px;
  border: 1px solid #e6e6e6;
  background: #fafafa;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.tonggem_flag img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tonggem_card_kr {
  font-size: 14px;
  font-weight: 900;
  margin-top: 2px;
}

.tonggem_card_en {
  font-size: 12px;
  color: #777;
  font-family: "Poppins", "Noto Sans KR", sans-serif;
  margin-top: 2px;
}

.tonggem_card_num {
  font-size: 16px;
  font-weight: 900;
  margin-top: 6px;
}


/* // */



/* ======================
  RESPONSIVE
====================== */
@media (max-width: 1400px){
	.tongge_comns_ms{width:95%;}
	.tab_tongge button{margin-right:10px;}
}

@media (max-width: 1020px) {
  .tonggem_year_grid {
    grid-template-columns: repeat(6, minmax(56px, 1fr));
    gap: 16px;
  }
  .tonggem_compare_grid {
    grid-template-columns: repeat(4, minmax(110px, 1fr));
  }
  .tonggem_subgrid {
    grid-template-columns: 1fr;
  }
  .tonggem_cards {
    grid-template-columns: repeat(4, minmax(120px, 1fr));
  }
}


@media (max-width: 980px){
      .top{grid-template-columns:1fr; gap:8px}
      .donut{width:240px}
      .centerStat .big{font-size:50px}
 }

 @media (max-width: 760px){
      body{padding:0px}
      .wrap{padding:18px 16px 16px}
      .title{font-size:24px}
      .sectionTitle{font-size:20px}

      .yearRow{grid-template-columns: repeat(3, 1fr); gap:12px}
      .barBox{height:135px}
      .bar{width:44px}

      .catRow{grid-template-columns: 1fr; gap:18px}
      .pair{height:120px}
      .b{width:46%}
      .pairVals{gap:67px}
      .legendAround .left{left:-10px}
      .legendAround .right{right:-10px}
}


@media (max-width: 640px) {
  .tonggem_wrap {
    padding: 18px 14px 30px;
  }
  .tonggem_title {
    font-size: 18px;
  }
  .tonggem_year_grid {
    grid-template-columns: repeat(4, minmax(56px, 1fr));
    gap: 14px;
  }
  .tonggem_year_item {
    grid-template-rows: 120px auto;
  }
  .tonggem_compare_grid {
    grid-template-columns: repeat(2, minmax(130px, 1fr));
    gap: 18px;
  }
  .tonggem_course_row {
    grid-template-columns: repeat(3, minmax(76px, 1fr));
  }
  .tonggem_cards {
    grid-template-columns: repeat(2, minmax(140px, 1fr));
  }
}