/* main_responsive.css */
/* index.php(메인) 전용 반응형만 모아둔 파일 */
/* include order 권장: common.css -> layout.css -> main.css -> main_responsive.css -> layout_responsive.css */

@media screen and (max-width: 1600px) {
    #main_visual,
    #main_visual .visual-item img {
        height: 790px;
    }

    .wrap_main #txt_cont1 {
        height: 500px;
    }

    .wrap_main #txt_cont1 > .right_cont {
        height: 92%;
    }

    .wrap_main #txt_cont1 > .right_cont .inner > .txt_cont > p {
        font-size: 1.8rem;
    }

    .wrap_main #news > .txt_cont1 > h1 {
        font-size: 15rem;
    }

    .wrap_main #news > .board_wrap > .txt_cont2 > h3 {
        font-size: 4rem;
    }

    .wrap_main > .img {
        height: 300px;
    }

    .wrap_main #news {
        height: 620px;
        justify-content: center;
    }
}

@media screen and (max-width: 1280px) {
    .wrap_main #news > .txt_cont1 > h1 {
        font-size: 14rem;
    }

    .wrap_main #news > .board_wrap > .txt_cont2 > h3 {
        font-size: 4rem;
    }
}

@media screen and (max-width: 1024px) {
    .wrap_main #txt_cont1 {
        height: 60vh;
    }

    #buz_area > .wrap > .cont1 > h2,
    .wrap_main #txt_cont1 > .left_cont > .cont1 > .inner > h2 {
        font-size: 3.6rem;
    }

    .wrap_main #news > .txt_cont1 > h1 {
        font-size: 12rem;
        line-height: 14rem;
    }

    .wrap_main #news > .txt_cont1 > p {
        font-size: 2.6rem;
    }

    .wrap_main #news > .txt_cont1 {
        display: block;
        height: initial;
    }

    .wrap_main #news > .board_wrap > .txt_cont2 {
        flex-direction: column;
    }

    .wrap_main #news > .txt_cont1 > p {
        margin: 5% 0;
        font-size: 2.6rem;
        text-align: left;
        position: static;
        padding-right: 20px;
    }

    .wrap_main #news > .txt_cont1 > p > br {
        display: none;
    }

    .wrap_main #news > .board_wrap > .txt_cont2 > h3 {
        font-size: 3.6rem;
    }

    .wrap_main #news > .board_wrap > .board {
        width: 68%;
    }

    #main_visual .visual_title h5 {
        font-size: 40px;
    }
}

@media screen and (max-width: 820px) {
    #main_visual .visual_title {
        width: 70vw;
    }

    #main_visual .visual_title h5 {
        font-size: 6rem;
    }

    #main_visual .visual_title p {
        animation: none;
        opacity: 1;
        font-size: 2.4rem;
    }

    #buz_area {
        height: 680px;
    }

    #buz_area .buz_info > .dept > h1 {
        font-size: 8rem;
    }

    .wrap_main #txt_cont1 {
        width: 80vw;
        height: 48vh;
        margin: 0 auto;
        margin-top: 30px;
    }

    .wrap_main #txt_cont1 > .left_cont {
        width: 30%;
    }

    .wrap_main #txt_cont1 > .left_cont > .cont1 {
        height: 100%;
        width: 100%;
        display: block;
    }

    .wrap_main #txt_cont1 > .left_cont > .cont1 > .inner {
        width: 94%;
    }

    .wrap_main #txt_cont1 > .left_cont > .bg {
        display: none;
    }

    #buz_area > .wrap > .cont1 > h2,
    .wrap_main #txt_cont1 > .left_cont > .cont1 > .inner > h2 {
        font-size: 2rem;
    }

    .wrap_main #txt_cont1 > .right_cont {
        width: 68%;
    }

    .wrap_main #txt_cont1 > .right_cont .inner > .img {
        height: 70%;
    }

    .wrap_main #txt_cont1 > .right_cont .inner > .txt_cont {
        height: 40%;
        padding-left: 8px;
    }

    .wrap_main #txt_cont1 > .right_cont .inner > .txt_cont > p {
        font-size: 1.8rem;
    }

    .wrap_main #txt_cont1 > .right_cont .inner > .txt_cont {
        justify-content: initial;
        padding-top: 10px;
    }

    .wrap_main > .img {
        height: 184px;
    }

    .wrap_main #news {
        height: initial;
    }

    .wrap_main #news > .txt_cont1 > h1 {
        font-size: 9rem;
        line-height: 8rem;
    }

    .wrap_main #news > .txt_cont1 {
        height: 170px;
        display: block;
    }

    .wrap_main #news > .txt_cont1 > p {
        bottom: 10px;
        font-size: 2.4rem;
    }

    .wrap_main #news > .board_wrap {
        display: block;
        height: initial;
    }

    /* ===== NEWS 헤더(제목 + 자세히보기) 정렬 ===== */
    .wrap_main #news > .board_wrap > .txt_cont2 {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;     /* 오른쪽 아래 정렬 핵심 */
        gap: 12px;
    }

    .wrap_main #news > .board_wrap > .txt_cont2 > h3 {
        width: auto;
        flex: 1;
        margin: 0;
        padding-top: 0 !important; /* 기존 padding-top(%) 무력화 */
        font-size: 3.4rem;         /* 필요시 조절 */
        line-height: 1.2;
    }

    .wrap_main #news > .board_wrap > .txt_cont2 > a {
        width: auto;
        height: auto;
        margin-top: 0 !important;  /* 기존 margin-top(%) 무력화 */
        flex: 0 0 auto;

        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;

        white-space: nowrap;
        padding-bottom: 2px;       /* 바닥에 깔끔하게 붙는 느낌 */
        font-size: 1.8rem;         /* 필요시 조절 */
    }

    .wrap_main #news > .board_wrap > .txt_cont2 > a > .line {
        width: 48px;
        height: 3px;
        margin-left: 0 !important;
    }

    .wrap_main #news > .board_wrap > .board {
        width: 100%;
        margin-top: 6%;
        height: initial;
    }

    .wrap_main #news > .board_wrap > .board li {
        height: 6vh;
    }

    .wrap_main #news > .txt_cont1 > h1 > .dot {
        width: 20px;
        height: 20px;
        right: -30px;
    }

    .wrap_main #news > .board_wrap > .board li > p {
        display: none;
    }

    .wrap_main #news > .board_wrap > .board li > h6 {
        width: 100%;
    }
}

@media screen and (max-width: 500px) {
    /* 메인 */
    #main_visual,
    #main_visual .visual-item img {
        height: 460px;
    }

    #main_visual .visual_title {
        width: 84%;
        opacity: 0;
        animation: opc 1.8s forwards;
    }

    #main_visual .visual_title h5 {
        font-size: 5rem;
    }

    #main_visual .visual_title p {
        opacity: 1;
        animation: none;
        word-break: keep-all;
        font-size: 1.6rem;
    }

    #buz_area > .wrap > .cont1 > h2 > br,
    .wrap_main #txt_cont1 > .left_cont > .cont1 > .inner > h2 > br {
        display: none;
    }

    #buz_area > .wrap > .cont1 > h2,
    .wrap_main #txt_cont1 > .left_cont > .cont1 > .inner > h2 {
        width: 90%;
        word-break: keep-all;
        font-size: 3rem;
    }

    #buz_area > .wrap > .cont2 {
        margin-top: 12%;
        height: 60%;
    }

    #buz_area .buz_info > .dept {
        display: block;
    }

    #buz_area .buz_info > .dept > h1 {
        line-height: initial;
        font-size: 5rem;
    }

    #buz_area .buz_info > .dept > span {
        margin-left: initial;
    }

    #buz_area .slide_wrap .slide_item > .img {
        height: 60%;
    }

    #buz_area .slide_wrap .slide_item > .img > img {
        width: 100%;
    }

    #buz_area .slide_wrap .slide_item > .buz_info {
        width: 90%;
        height: 45%;
        top: initial;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
    }

    #buz_area .slide_wrap .slide_item > .buz_info > a::after {
        width: 18%;
    }

    .wrap_main #txt_cont1 {
        width: 90vw;
        height: initial;
        margin: 0 auto;
        position: relative;
        display: block;
    }

    .wrap_main #txt_cont1 > .left_cont {
        display: block;
        width: 90%;
        margin: 0 auto;
        margin-bottom: 4%;
    }

    .wrap_main #txt_cont1 > .left_cont > .cont1 {
        width: initial;
        height: initial;
        display: block;
    }

    .wrap_main #txt_cont1 > .left_cont > .cont1 > .inner {
        width: initial;
    }

    .wrap_main #txt_cont1 > .left_cont > .bg {
        display: none;
    }

    .wrap_main #txt_cont1 > .right_cont {
        width: initial;
        height: initial;
        display: block;
    }

    .wrap_main #txt_cont1 > .right_cont > .img_wrap {
        width: 100%;
        height: 44vh;
    }

    .wrap_main #txt_cont1 > .right_cont .inner > .txt_cont {
        height: 38%;
    }

    .wrap_main #txt_cont1 > .right_cont .inner > .txt_cont > h6 {
        font-size: 3rem;
    }

    .wrap_main #txt_cont1 > .right_cont .inner > .txt_cont > p {
        width: 90%;
        font-size: 2.4rem;
    }

    .wrap_main > .img {
        display: none;
    }

    .wrap_main #news {
        display: block;
        width: 82%;
        margin-top: 10%;
        height: initial;
    }
}

@media screen and (max-width: 380px) {
    #buz_area .buz_info > .dept > h1 {
        font-size: 4.2rem;
    }

    .wrap_main #news > .txt_cont1 > h1 {
        font-size: 5rem;
    }

    .wrap_main #news > .txt_cont1 > p {
        font-size: 2.2rem;
    }
}

@media screen and (max-width: 320px) {
    /* 메인 */
    #buz_area {
        height: 82vh;
    }

    #buz_area > .wrap > .cont1 > h2,
    .wrap_main #txt_cont1 > .left_cont > .cont1 > .inner > h2 {
        font-size: 3rem;
    }

    .wrap_main #txt_cont1 > .right_cont {
        width: 80vw;
        margin: 0 auto;
    }

    .wrap_main #txt_cont1 > .right_cont .inner > .txt_cont {
        padding-left: 10px;
    }
}


/* =========================================================
   NEWS 반응형 패치(간격 넓힘 + 자세히보기 우하단 정렬)
   - main_responsive.css 맨 아래에 "통째로" 붙여넣기
   - 반응형(1024/820/500/380/320)만 포함
   ========================================================= */

/* ---------- 1024px 이하 ---------- */
@media screen and (max-width:1024px){

  /* 상단 문구(설명) 숨막힘 완화 */
  .wrap_main #news > .txt_cont1 > p{
    margin: 18px 0 28px !important;   /* 기존 5%보다 안정적 */
    padding-right: 20px;
    line-height: 1.5;
  }

  /* 보드 영역 위 간격 */
  .wrap_main #news > .board_wrap{
    margin-top: 8px;
  }

  /* 리스트 자체 간격 */
  .wrap_main #news > .board_wrap > .board li{
    padding: 14px 0;
  }

  /* (너희 코드에 board width 68% 쓰던 흐름 유지) */
  .wrap_main #news > .board_wrap > .board{
    width: 68%;
  }
}

/* ---------- 820px 이하 (모바일 핵심) ---------- */
@media screen and (max-width:820px){

  /* NEWS 섹션 자체 아래 여백 */
  .wrap_main #news{
    padding-bottom: 30px;
  }

  /* 상단 타이틀/설명 블록: 높이 고정 제거 + 여백 */
  .wrap_main #news > .txt_cont1{
    height: auto !important;
  }

  .wrap_main #news > .txt_cont1 > p{
    bottom: auto !important;          /* position 값 남아있으면 무력화 */
    margin-top: 10px;
    line-height: 1.55;
  }

  /* board_wrap: 전체 간격 */
  .wrap_main #news > .board_wrap{
    display: block;
    height: auto !important;
  }

  /* ===== 제목(왼쪽) + 자세히보기(오른쪽 아래) 정렬 ===== */
  .wrap_main #news > .board_wrap > .txt_cont2{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;            /* 우하단 정렬 핵심 */
    gap: 14px;
    padding-top: 20px;
  }

  .wrap_main #news > .board_wrap > .txt_cont2 > h3{
    width: auto;
    flex: 1;
    margin: 0;
    padding-top: 0 !important;        /* 기존 padding-top(%) 제거 */
    line-height: 1.2;
  }

  .wrap_main #news > .board_wrap > .txt_cont2 > a{
    width: auto;
    height: auto !important;          /* 기존 44px 제거 */
    margin-top: 0 !important;         /* 기존 6% 제거 */
    flex: 0 0 auto;

    display: flex;
    align-items: center;              /* 텍스트+라인 정렬 */
    justify-content: flex-end;
    gap: 10px;

    white-space: nowrap;
    padding-bottom: 2px;              /* 살짝 바닥에 붙는 느낌 */
  }

  .wrap_main #news > .board_wrap > .txt_cont2 > a > .line{
    width: 52px;                      /* 퍼센트 대신 고정폭으로 깔끔 */
    height: 3px;
    margin-left: 0 !important;
  }

  /* 보드 영역: 위 여백 넓히기(기존 6%보다 넉넉) */
  .wrap_main #news > .board_wrap > .board{
    width: 100% !important;
    margin-top: 22px !important;
    height: auto !important;
  }

  /* 리스트: vh 높이 강제 제거 + 간격 넓히기 */
  .wrap_main #news > .board_wrap > .board li{
    height: auto !important;          /* 기존 6vh 무력화 */
    padding: 16px 0;                  /* 숨막힘 완화 */
  }

  /* 모바일에서 날짜 숨기고 싶지 않으면 아래 2줄을 사용(원하면) */
  /* .wrap_main #news > .board_wrap > .board li > p{ display:block !important; } */
  /* .wrap_main #news > .board_wrap > .board li > p.news_dt{ margin-top:6px; font-size:12px; opacity:.65; } */
}

/* ---------- 500px 이하 ---------- */
@media screen and (max-width:500px){

  /* 섹션 폭/여백 약간 여유 */
  .wrap_main #news{
    width: 86% !important;            /* 기존 82%보다 살짝 넓게 */
    margin-top: 12%;
    padding-bottom: 34px;
  }

  /* 보드 위 여백 더 확보 */
  .wrap_main #news > .board_wrap > .board{
    margin-top: 24px !important;
  }

  /* 리스트 간격 + 가독성 */
  .wrap_main #news > .board_wrap > .board li{
    padding: 18px 0;
  }
}

/* ---------- 380px 이하 ---------- */
@media screen and (max-width:380px){
  .wrap_main #news > .board_wrap > .txt_cont2{
    gap: 12px;
  }
  .wrap_main #news > .board_wrap > .txt_cont2 > a > .line{
    width: 46px;
  }
}

/* ---------- 320px 이하 ---------- */
@media screen and (max-width:320px){
  .wrap_main #news > .board_wrap > .board{
    margin-top: 20px !important;
  }
  .wrap_main #news > .board_wrap > .board li{
    padding: 16px 0;
  }
}


/* =========================================================
   NEWS 날짜 복구 (반응형에서 사라지는 문제 해결)
   ========================================================= */

/* 820px 이하에서도 날짜 보이게 */
@media screen and (max-width:820px){

  .wrap_main #news > .board_wrap > .board li > p.news_dt{
    display:block !important;   /* 숨김 해제 */
    margin-top:6px;
    font-size:12px;
    line-height:1.2;
    opacity:.65;
    text-align:left;
  }
}

/* =========================================================
   NEWS 날짜 한 줄 고정(모바일에서 짜치게 줄바꿈 되는 문제 해결)
   - main_responsive.css 맨 아래에 추가
   ========================================================= */
@media screen and (max-width:820px){

  /* 날짜 보이게 + 한 줄 고정 */
  .wrap_main #news > .board_wrap > .board li > p.news_dt{
    display:block !important;      /* 혹시 숨김이면 복구 */
    margin-top:6px;
    font-size:12px;
    line-height:1.2;
    opacity:.65;
    text-align:left;

    white-space:nowrap;            /* ✅ 한 줄 고정 핵심 */
    word-break:normal;             /* keep-all 영향 차단 */
    overflow:hidden;               /* 안전장치 */
    text-overflow:ellipsis;        /* 혹시 길면 ... */
  }
}


/* =========================================================
   NEWS 날짜 우선 표시 (모바일)
   - 날짜는 절대 말줄임 X
   - 제목이 대신 줄어들도록 처리
   ========================================================= */
@media screen and (max-width:820px){

  /* 리스트를 다시 flex로 */


  /* 제목: 2줄 허용 */
  .wrap_main #news > .board_wrap > .board li > h6.news_title{
    white-space:normal;
    overflow:hidden;

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;

    line-height:1.35;
  }

  /* 날짜: 무조건 전체 표시 */
  .wrap_main #news > .board_wrap > .board li > p.news_dt{
    display:block !important;
    margin-top:0;

    font-size:12px;
    opacity:.65;

    white-space:nowrap;      /* 한 줄 */
    overflow:visible;        /* ❗ 말줄임 금지 */
    text-overflow:clip;      /* ❗ ... 제거 */
  }
}