@charset "utf-8";
/* ============================================================
   대상 : 메인 main.html  section.main_news.main_combo
          + section.main_update 주요소식 안내 (2026-10-19 — 파란 카드 2장, 이 파일 맨 아래)
          (① .ktdi_news 섬유최신뉴스 · ② .card_list.combo_card KTDI 홍보마당[보도기사|미디어] · ③ .info_tex)
   변경 : 두 화면(보도자료+홍보마당 / INFO-TEX+최신뉴스)을 **한 화면 3칸**으로 배치
   이유 : 2026-09-28 발주처 #10 — "① 섬유최신뉴스 / ② 보도기사 + 미디어 / ③ INFO-TEX" PDF 캡처 배치.
          시안 main.css 의 .main_news(2칸 3fr/7fr)·.card_list(흰 카드)는 그대로 두고 여기서 덮는다.
   ⚠ 시안 원본 CSS 는 수정하지 않는다(개발규약). 풀페이지 해제 구간(≤1200px 또는 세로 ≤639px)은 세로로 쌓는다(2026-10-19 기준 변경).
   ============================================================ */

/* ── 3칸 틀 ─────────────────────────────────────────────── */
.main_combo .wFix.content_wrap {
  max-width: 1820px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 0.8fr);   /* 2026-10-20: 1.15/1.25/0.8 → 0.85/1.7/0.8 → 섬유최신뉴스 조금 더 넓게 1/1.6/0.8 */
  grid-template-rows: minmax(0, 1fr);
  gap: 2.4rem;
  align-items: stretch;
} 

/* ── ① 섬유최신뉴스 — 좁아진 칸에 맞게 썸네일·글자 축소 ───────── */
.main_combo .ktdi_news { min-width: 0; display: flex; flex-direction: column; }
.main_combo .ktdi_news .list > li { gap: 1rem; }
.main_combo .ktdi_news .list .thumb { width: 42%; max-width: 190px; flex-shrink: 0; }
.main_combo .ktdi_news .list .thumb img { width: 100%; height: 100%; object-fit: cover; }
.main_combo .ktdi_news .list .txt_box { min-width: 0; }
.main_combo .ktdi_news .list .txt_box .tit {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ── ② 홍보마당 — 흰 카드 대신 제목 + [보도기사 | 미디어] 두 칸 ─── */
.main_combo .combo_card {
  background: none;
  padding: 0;
  border-radius: 0;
  min-height: 0;
}
.main_combo .combo_card > .tit_st1 {margin-bottom: 1rem;}
.main_combo .combo_cols {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
}
.main_combo .combo_card .tit{
  margin-top: 1.2rem;
}
.main_combo .combo_col { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.main_combo .combo_sub {
  text-align: center;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--sub-tit-color, #222);
  margin-bottom: 1.2rem;
}
/* 슬라이드 높이가 칸을 채우게 — 시안의 '활성 카드(파란 배경)' 모양은 그대로 */
.main_combo .combo_col .swiper { flex: 1; min-height: 0; }
.main_combo .combo_col .swiper-slide { height: auto; }
.main_combo .combo_col .swiper-slide .img_box { height: auto; aspect-ratio: 16 / 10; max-height: none; }
.main_combo .combo_col .swiper-slide .img_box img { width: 100%; height: 100%; object-fit: cover; }
/* 미디어 활성 카드도 보도기사와 같은 파란 카드(main.css .card_list .swiper-slide-active).
   ※ 2026-10-19 사용자 결정으로 '미디어 = 흰 카드' 규칙을 지웠다(9/28 PDF 시안에서 넣었던 것). */
/* 아래 줄(1/5 · 화살표 · VIEW MORE) — 좁은 칸이라 한 줄로 촘촘히 */
.main_combo .combo_col .btn_wrapper { flex-wrap: wrap; gap: 0.4rem; }
.main_combo .combo_col .btn_wrapper .btn_more { font-size: 0.95rem; }

/* ── ③ INFO-TEX ─────────────────────────────────────────── */
.main_combo .info_tex { min-width: 0; }

/* ── 1101~1440px (풀페이지 유지) — 칸이 좁아 글자·여백을 줄인다 ── */
@media screen and (max-width: 1440px) {
  .main_combo .wFix.content_wrap { gap: 1.4rem; }
  .main_combo .combo_sub { font-size: 1.05rem; margin-bottom: 0.5rem; }
  .main_combo .ktdi_news .list .thumb { display: none; }   /* 3칸에선 뉴스 썸네일(공통 더미)보다 제목이 우선 */
  .main_combo .combo_col .swiper-slide-active { padding: 1rem; }
}

/* ── 풀페이지 해제(≤1100px 또는 세로 ≤900px) — 세로로 쌓는다 ───── */
@media screen and (max-width: 1200px), screen and (max-height: 639px) {
  .main_combo .wFix.content_wrap {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    align-content: start;
    gap: 3rem;
  }
  .main_combo .ktdi_news .list .thumb { display: block; }
  .main_combo .combo_col .swiper-slide { height: auto; }
  .main_combo .combo_sub{text-align: left;}
  .main_combo .combo_card > .tit_st1{align-items: start;}
}
@media screen and (max-width: 640px) {
  .main_combo .combo_cols { grid-template-columns: 1fr; gap: 2rem; }
}

/* ── 메인 바로가기 새창 아이콘 — 2026-09-29 발주처 #1 ───────────────────────
   대상 : .quick_menu .btn_go 안 .ico_newwin (TEX-AI · 시험분석 온라인 접수 = 외부 새 창) */
.quick_menu .btn_go { display: inline-flex; align-items: center; gap: 0.2rem; }
.quick_menu .btn_go .ico_newwin { font-size: 1.05em; line-height: 1; }

/* 홍보마당 > 미디어 — 쇼츠(세로영상) 썸네일은 줄여 담기(2026-10-12 발주처 #4, 게시판 목록 media.css 와 같은 처리).
   .is_vertical 은 main.js 가 세로 원본(oardefault)으로 바꿀 때 단다. */
/* 띠 잘라내기 근거는 overrides/media.css 와 같다(oardefault 위아래 190px 검은 띠, 내용 4:5). */
.main_combo .combo_col .swiper-slide .img_box:has(img.is_vertical) { position: relative; overflow: hidden; background: #e9ecf2; }
.main_combo .combo_col .swiper-slide .img_box img.is_vertical {
    position: absolute; top: 50%; left: 50%;
    width: auto; height: 142.2%; max-width: none;
    object-fit: fill; transform: translate(-50%, -50%);
}

/* ── ① 섬유최신뉴스 — 900px 이하 한 줄형 (2026-09-30) ─────────────
   이유 : 노출 3건 → 4건. main.css(≤900px)는 li 를 세로 카드(썸네일 높이 180px)로 쌓아
          4건이면 뉴스만 약 1,100px 이 된다. 게다가 위의 .thumb width:42%·max-width:190px 가
          main.css 의 width:100% 를 이겨서 썸네일이 세로로 길쭉하게(121×180) 잘렸다.
   변경 : 작은 썸네일(112×72) 왼쪽 + 제목·날짜 오른쪽 한 줄. 4건 약 400px (390·768 폭 미리보기로 확인).
   ⚠ 901~1100px(세로 적층 · 넓은 목록)은 기존 모양이 괜찮아서 건드리지 않았다. */
@media screen and (max-width: 900px) {
  .main_combo .ktdi_news .list > li { flex-direction: row; align-items: center; gap: 1rem; }
  .main_combo .ktdi_news .list .thumb { width: 112px; max-width: none; height: 72px; flex-shrink: 0; }
  .main_combo .ktdi_news .list .txt_box { flex: 1; padding-left: 0; }
}

/* ============================================================
   ② 주요소식 안내 — 파란 강조 카드 2장 (2026-10-19 발주처 수정사항 #2)
   요청 : "1번 카드 아래 빈 공간 — 공지 2개씩 배치"
   변경 : 왼쪽 열 = 파란 카드 2장(위·아래 반씩), 오른쪽 = 3·4·5번째 글.
          행을 3 → 6 으로 쪼개 오른쪽 글은 2행씩, 파란 카드는 3행씩 차지한다(오른쪽 모양은 예전과 같음).
          노출 개수 4 → 5 는 overrides/main.js 의 MAX.
   ⚠ main.css 의 파란 카드 규칙은 전부 li:first-child 에 걸려 있다 → 두 번째 카드(li:nth-child(2))에
     같은 값을 폭별로 그대로 옮겨 적었다. main.css 의 first-child 값을 바꾸면 여기도 같이 바꿀 것.
   ⚠ 탭 필터(main.js)가 보이는 li 를 앞으로 재배치하므로 nth-child = '보이는 순서' 다.
   ============================================================ */
.update_list { grid-template-rows: repeat(6, minmax(0, 1fr)); }
.update_list > li:first-child { grid-row: 1 / 4; margin-bottom: 0.5rem; }
.update_list > li:nth-child(2) {
  grid-column: 1;
  grid-row: 4 / 7;
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.5rem;
  background-color: var(--main-color);
  background-image: url("../../img/main/card_bg.png");   /* = main-bg.css (overrides/ 기준 경로) */
  background-repeat: no-repeat;
  background-size: cover;
  background-blend-mode: overlay;
  margin-right: 2rem;
  border-radius: 12px;
  transition: 0.2s all;
  align-items: flex-start;
  background-size: 80%;
  background-position: 142% center;
}
.update_list > li:nth-child(n+3) { grid-column: 2; grid-row: span 2; }
.update_list > li:nth-child(2):hover { box-shadow: 0 2px 10px #99a0a6; }
.update_list > li:nth-child(2) .btn_wrap { justify-content: flex-end; width: 100%; }
.update_list > li:nth-child(2) .btn_more2 { background-color: white; color: var(--main-color); }
.update_list > li:nth-child(2) .btn_more2 .material-symbols-outlined { opacity: 1; }
.update_list > li:nth-child(2) .tit {
  font-size: 1.5rem;
  line-height: 1.4;
  color: white;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: 500;
}
.update_list > li:nth-child(2) .date { color: var(--sub-txt-color2); margin-top: .2rem; display: block; }
/* 마감일 칩 — main-dday.css 의 첫 카드 규칙과 같게(파란 배경에서 흰 칩) */
#updateList > li:nth-child(2) .cat.ing,
#updateList > li:nth-child(2) .cat.ing.is_upcoming { color: var(--main-color); background: #fff; }
#updateList > li:nth-child(2) .cat.done { color: #fff; background: rgba(255, 255, 255, 0.25); }

@media screen and (max-width: 1440px) {
  .update_list > li:nth-child(2) { margin-right: 1rem; }
  .update_list > li:nth-child(2) .tit { font-size: 1.2rem; margin-bottom: 0; -webkit-line-clamp: 1; line-clamp: 1; margin-top: 1rem; }
}
@media screen and (max-width: 1200px) {
  /* 두 번째 파란 카드 글자 — main.css ≤1200 의 첫 카드 값과 같게 */
  .update_list > li:nth-child(2) { padding: 1.2rem; }
  .update_list > li:nth-child(2) .date { margin-top: 0.2rem; }
  .update_list > li:nth-child(2) .tit { font-size: 1rem; margin-top: 0.4rem; }
  /* 목록 ↔ 아래 바로가기 줄 사이 (main.css 2.5rem → 사용자 요청으로 줄임) */
  .update_list_wrap { margin-bottom: 1.6rem; }
}
/* 901~1200px (풀페이지 해제·태블릿 가로) — 파란 카드 2장은 왼쪽에 위아래로, 목록은 오른쪽 (2026-10-19 사용자 요청)
   main.css ≤1200 은 전부 한 줄로 쌓았는데, 카드 2장이 가로로 길게 늘어나 무슨 의미인지 알 수 없었다.
   행은 auto 6줄 — 카드 = 3줄씩, 목록 글 = 2줄씩(넓은 화면과 같은 짜임, 높이만 내용대로). */
@media screen and (min-width: 901px) and (max-width: 1200px) {
  .update_list { grid-template-columns: 4fr 6fr; grid-template-rows: repeat(6, auto); }
  .update_list > li:first-child { grid-column: 1; grid-row: 1 / 4; margin: 0 1rem 0.4rem 0; }
  .update_list > li:nth-child(2) { grid-column: 1; grid-row: 4 / 7; margin: 0.4rem 1rem 0 0; }
  .update_list > li:nth-child(n+3) { grid-column: 2; grid-row: span 2; padding: 0.8rem 0.6rem; }
}
/* ≤900px — 한 줄 목록. 파란 카드 2장이 위에, 나머지가 아래로 */
@media screen and (max-width: 900px) {
  /* 🔴 위쪽 기본값 repeat(6, minmax(0, 1fr)) 를 풀어야 한다 — 안 풀면 모든 칸이 가장 높은 칸(파란 카드)만큼
        똑같이 늘어나 목록 칸 안이 휑하고(168px), 빈 6번째 줄 때문에 바로가기 줄과도 멀어졌다(1100 실측). */
  .update_list { grid-template-rows: none; }
  .update_list > li:first-child { grid-row: auto; margin-bottom: 0; }
  .update_list > li:nth-child(2) { grid-column: 1; grid-row: auto; margin: 0.6rem 0 0; }
  .update_list > li:nth-child(n+3) { grid-column: 1; grid-row: auto; padding: 0.8rem 0.4rem; }
}
@media screen and (max-width: 1200px) {
  .update_list > li:nth-child(2) { padding: 1rem; }
  .update_list > li:nth-child(2) .tit { -webkit-line-clamp: 1; line-clamp: 1; }
  .update_list > li:nth-child(2) .btn_wrap { justify-content: flex-start; }
}
/* 풀페이지 해제(가로 1201 이상 · 세로 639 이하) — main.css 가 행을 repeat(3, auto) 로 바꾼다. 6행으로 맞춘다 */
@media screen and (min-width: 1201px) and (max-height: 639px) {
  .main_update .update_list { grid-template-rows: repeat(6, auto); }
}
/* 넓은 화면(2칸)에선 파란 카드의 [+] 버튼을 오른쪽 아래 구석에 띄운다.
   버튼이 글 아래 한 줄을 따로 차지하면 카드 2장 높이 합이 오른쪽 목록 3줄보다 커져서
   목록 전체가 47px 늘어나 아래 바로가기 줄에 붙었다(1920×911 실측). 띄우면 예전 높이(452px) 그대로. */
@media screen and (min-width: 901px) {   /* 2026-10-19: 1201 → 901 (901~1200 도 2칸) */
  .update_list > li:nth-child(-n+2) { position: relative; }
  .update_list > li:nth-child(-n+2) .btn_wrap { position: absolute; right: 1.5rem; bottom: 1.5rem; width: auto; }
  .update_list > li:nth-child(-n+2) .txt_box { padding-right: 3rem; }
}
@media screen and (min-width: 1201px) and (max-width: 1440px) {
  .update_list > li:nth-child(-n+2) .btn_wrap { right: 1.2rem; bottom: 1.2rem; }
}

/* ============================================================
   ② 홍보마당 — 칸마다 카드 2장 (2026-10-19 발주처 수정사항 #3)
   요청 : "PC 화면 맞춤으로 이미지 2개 삽입(모바일 1개) — 여백이 너무 많다"
   변경 : 보도기사·미디어 슬라이더를 2줄(grid rows 2)로. 2줄은 main.js 가 '가로 1201px↑·세로 800px↑'에서만 켠다(노트북은 1장).
   ⚠ 아래 규칙은 전부 .swiper-grid(=Swiper 가 2줄일 때만 붙이는 클래스) 아래에 건다 → 1장 모드(모바일·좁은 화면)는 예전 모양 그대로.
      2026-10-20: 태블릿 '가로 2장'(.combo_side — main.js 가 붙임)에도 같은 카드 규칙을 쓴다(:is(.swiper-grid, .combo_side)). 카드 높이 반(calc)만 2줄 전용.
   ⚠ 강조(파란 배경)는 **가리키는 카드**를 따라간다 — 마우스를 올리거나 Tab 으로 들어간 카드.
      아무 카드도 안 가리키면 활성 장(.swiper-slide-active = 그 쪽의 위 카드). 보도기사·미디어 같은 파랑.
      (2026-10-19 사용자 결정: '늘 위 카드만 파랑'은 의미가 없어서. :has() 미지원 브라우저는 두 장이 함께 파래질 뿐 깨지진 않는다)
   ⚠ 2줄이라 한 장 높이가 반 → 글자·여백을 줄였다.
   ============================================================ */
.main_combo .combo_col .swiper-grid .swiper-slide,
.main_combo .combo_col .swiper-grid .swiper-slide-active {
  height: calc((100% - 16px) / 2);      /* 2줄일 때만 — 16px = main.js spaceBetween */
}
.main_combo .combo_col :is(.swiper-grid, .combo_side) .swiper-slide,
.main_combo .combo_col :is(.swiper-grid, .combo_side) .swiper-slide-active {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0.9rem;                      /* 활성(main.css 1.5rem)·비활성 같은 여백 → 두 장 썸네일이 줄 맞춤 */
  border-radius: 12px;
}
/* 강조 아닌 카드 = 흰 카드 (2026-10-19 사용자 요청). ⚠ 아래 hover 규칙과 특이도가 같아 반드시 그보다 앞에 둔다 */
.main_combo .combo_col :is(.swiper-grid, .combo_side) .swiper-slide:not(.swiper-slide-active) {
  background-color: #fff;
  background-image: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}
/* 썸네일이 남는 높이를 채우고, 글은 아래에 */
.main_combo .combo_col :is(.swiper-grid, .combo_side) .swiper-slide .img_box {
  flex: 1 1 auto; min-height: 0; height: auto; max-height: none; aspect-ratio: auto; border-radius: 8px;
}
/* 글 — 2장이라 한 장 높이가 반이다. 제목·날짜·간격을 줄인다 */
.main_combo .combo_col :is(.swiper-grid, .combo_side) .swiper-slide .txt_box { flex-shrink: 0; padding-right: 2.4rem; margin-top: 0.55rem; }
.main_combo .combo_col :is(.swiper-grid, .combo_side) .swiper-slide .txt_box .tit {
  margin-top: 0;
  font-size: 1.05rem;
  line-height: 1.35;
  -webkit-line-clamp: 1;
  line-clamp: 2;
}
.main_combo .combo_col :is(.swiper-grid, .combo_side) .swiper-slide .txt_box .date { margin-top: 0.15rem; font-size: 0.8rem; }
/* [+] 는 모든 장에 — 오른쪽 아래 구석 (main.css 는 비활성 장에서 숨긴다) */
.main_combo .combo_col :is(.swiper-grid, .combo_side) .swiper-slide .btn_wrap { display: flex; position: absolute; right: 0.9rem; bottom: 0.9rem; margin: 0; }
@media screen and (max-width: 1440px) {
  .main_combo .combo_col :is(.swiper-grid, .combo_side) .swiper-slide .txt_box .tit { font-size: 0.95rem; }
}
/* 가리키는 카드에 강조 — main.css 의 활성 카드와 같은 값 */
.main_combo .combo_col :is(.swiper-grid, .combo_side) .swiper-slide:is(:hover, :focus-within) {
  background-color: var(--main-color);
  background-image: url("../../img/main/card_bg.png");   /* = main-bg.css */
  background-position: center;
  background-size: cover;
  background-blend-mode: overlay;
}
.main_combo .combo_col :is(.swiper-grid, .combo_side) .swiper-slide:is(:hover, :focus-within) .txt_box .tit { color: #fff; }
.main_combo .combo_col :is(.swiper-grid, .combo_side) .swiper-slide:is(:hover, :focus-within) .txt_box .date { color: var(--sub-txt-color2); }
.main_combo .combo_col :is(.swiper-grid, .combo_side) .swiper-slide:is(:hover, :focus-within) .btn_more2 { background-color: #fff; color: var(--main-color); }
/* 다른 카드를 가리키는 동안 활성 카드는 강조를 내려놓는다(흰 카드 = 비활성 카드 모양으로) */
.main_combo .combo_col :is(.swiper-grid, .combo_side):has(.swiper-slide:not(.swiper-slide-active):is(:hover, :focus-within)) .swiper-slide-active {
  background-color: #fff;
  background-image: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}
.main_combo .combo_col :is(.swiper-grid, .combo_side):has(.swiper-slide:not(.swiper-slide-active):is(:hover, :focus-within)) .swiper-slide-active .txt_box .tit { color: inherit; }
.main_combo .combo_col :is(.swiper-grid, .combo_side):has(.swiper-slide:not(.swiper-slide-active):is(:hover, :focus-within)) .swiper-slide-active .txt_box .date { color: var(--sub-txt-color, #888); }
.main_combo .combo_col :is(.swiper-grid, .combo_side):has(.swiper-slide:not(.swiper-slide-active):is(:hover, :focus-within)) .swiper-slide-active .btn_more2 { background-color: transparent; color: var(--txt-color); }

/* ── 홍보마당 칸 구조 — 제목 줄 / 카드 / 아래 줄 (2026-10-19 사용자 요청) ──────────────
   요청 : ① 보도기사|미디어 사이 구분선은 **카드 영역에만**  ② 쪽번호(1/3)·화살표는 제목(보도기사·미디어)과 한 줄로
   변경 : main.html 에서 쪽번호·화살표를 .combo_head(제목 줄)로, VIEW MORE 를 .combo_foot(아래 줄)로 — 둘 다 .swiper 밖.
          (.swiper 는 overflow:hidden 이라 안에 둔 채 CSS 로 위로 빼면 잘린다)
          두 칸을 3줄 격자(subgrid)로 맞추고, 구분선은 가운데 줄(카드)에만 그린다.
   ⚠ Swiper 는 화살표·쪽번호를 클래스(.press_prev …)로 문서 전체에서 찾으므로 .swiper 밖이어도 그대로 동작한다.
   ⚠ main.css 의 화살표·쪽번호 모양은 '.swiper 안'(.swiper .btn_arrow 등)에만 걸려 있다 → 같은 값을 여기에 옮겨 적었다. */
.main_combo .combo_cols {
  grid-template-rows: auto minmax(0, 1fr) auto;
  column-gap: 2.4rem;
  row-gap: 0;
}
.main_combo .combo_col { display: grid; grid-row: 1 / 4; grid-template-rows: subgrid; row-gap: 0; }
.main_combo .combo_press { grid-column: 1; }   /* 열을 못 박는다 — 구분선(::before)이 2행을 차지해서 자동 배치면 밀려난다 */
.main_combo .combo_media { grid-column: 2; }
/* 구분선 — 가운데 줄(카드)에만, 두 칸 사이 정가운데 */
.main_combo .combo_cols::before {
  content: "";
  grid-row: 2;
  grid-column: 1 / -1;
  justify-self: center;
  width: 1px;
  background: var(--line-color, #e2e2e2);
  pointer-events: none;
}

/* 제목 줄 — 제목 왼쪽, [1/3 ‹ ›] 오른쪽 */
.main_combo .combo_head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 1rem; }
.main_combo .combo_head .combo_sub { margin-bottom: 0; text-align: left; }
.main_combo .combo_nav { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; }
/* 쪽번호 — main.css .swiper .swiper-pagination-* 와 같은 값 */
.main_combo .combo_nav .swiper-pagination { position: static; width: fit-content; margin: 0 0.6rem 0 0; white-space: nowrap; }
.main_combo .combo_nav .swiper-pagination-current { font-weight: 600; }
.main_combo .combo_nav .swiper-pagination-total { opacity: 0.6; }
/* 화살표 — main.css .swiper .btn_arrow 와 같은 값 */
.main_combo .combo_nav .btn_arrow {
  position: static;
  margin: 0;
  width: 2.6rem;
  height: 2.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  border: 1px solid #d2d2d2;
  padding: 0.6rem;
  border-radius: 6px;
  cursor: pointer;
  transition: 0.2s all;
}
.main_combo .combo_nav .btn_arrow:hover { border-color: #666; }
.main_combo .combo_nav .btn_arrow .material-symbols-outlined { font-size: 1.2rem; opacity: 0.5; }
.main_combo .combo_nav .btn_arrow:hover .material-symbols-outlined { opacity: 1; }
.main_combo .combo_nav .btn_arrow.swiper-button-disabled { opacity: 0.35; cursor: default; pointer-events: none; }

/* 아래 줄 — VIEW MORE 만, 왼쪽 */
.main_combo .combo_foot { display: flex; align-items: center; justify-content: flex-start; gap: 0.4rem; margin-top: 1.2rem; }
.main_combo .combo_foot .btn_wrap { margin-left: 0; }   /* main.css .card_list .btn_wrap 의 margin-left:auto 가 오른쪽으로 민다 */
.main_combo .combo_foot .btn_more { font-size: 0.95rem; }

@media screen and (max-width: 1440px) {
  .main_combo .combo_head { margin-bottom: 0.5rem; }
}
@media screen and (max-width: 1200px) {
  .main_combo .combo_nav .btn_arrow { width: 2rem; height: 2rem; }
}
/* 두 칸이 위아래로 쌓이는 폭 — 격자를 풀고 구분선은 뺀다 */
@media screen and (max-width: 640px) {
  .main_combo .combo_cols { display: flex; flex-direction: column; gap: 2rem; }
  .main_combo .combo_col { display: flex; flex-direction: column; }
  .main_combo .combo_cols::before { display: none; }
}

/* ── 홍보마당 큰 제목 — 섬유최신뉴스 제목 줄(main.css .content_wrap .top)처럼 왼쪽 정렬 + 밑줄 (2026-10-19 사용자 요청) ──
   .top 은 padding 1.8rem 0 이지만 .main_news .top 이 padding-top 0 으로 덮는다 → 아래 여백만 1.8rem. */
.main_combo .combo_card > .tit_st1 {
  justify-content: flex-start;
  align-items: flex-start;            /* .card_list .tit_st1 은 세로(column) 플렉스 → align-items 가 좌우 정렬 */
  padding: 0 0 1.8rem;
  border-bottom: 1px solid var(--line-color);
  margin-bottom: 1.2rem;
}
/* 위쪽 .combo_card .tit { margin-top: 1.2rem } 를 큰 제목에서만 푼다 — 안 풀면 섬유최신뉴스 밑줄보다 20px 아래(1920 실측) */
.main_combo .combo_card > .tit_st1 .tit { margin-top: 0; }
@media screen and (max-width: 1200px) {
  .main_combo .combo_card > .tit_st1 { padding-bottom: 1rem; margin-bottom: 0.8rem; }   /* = main.css ≤1200 .content_wrap .top */
}

/* ── 섬유최신뉴스 '준비중' (2026-10-19 발주처 수정사항 #4) ─────────────
   main.html 에서 목록(ul.list)을 th:remove="all" 로 숨기고 그 자리에 .none_data.news_prep 박스.
   .none_data(common.css: 가운데 정렬)를 바탕으로 옅은 파랑 박스 + 흰 아이콘 원형(2026-10-19 사용자 요청). */
.main_combo .ktdi_news .news_prep {
  flex: 1;
  min-height: 16rem;
  gap: 1rem;
  background: #c9d0dc;                     /* 메인 파랑의 아주 옅은 톤 (2026-10-19 사용자 선택) */
  border-radius: 12px;
}
.main_combo .ktdi_news .news_prep_ic {
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}
.main_combo .ktdi_news .news_prep_ic .material-symbols-outlined { font-size: 2.2rem; color: var(--main-color); }
.main_combo .ktdi_news .news_prep p { font-size: 1.2rem; font-weight: 600; color: var(--txt-color, #222); letter-spacing: -0.02em; }
@media screen and (max-width: 1200px) {
  .main_combo .ktdi_news .news_prep_ic { width: 3.6rem; height: 3.6rem; }
  .main_combo .ktdi_news .news_prep_ic .material-symbols-outlined { font-size: 1.8rem; }
  .main_combo .ktdi_news .news_prep p { font-size: 1.05rem; }
}

/* ── 노트북 풀페이지(세로 640~799) — 홍보마당 1장 카드 (2026-10-19) ─────────
   이 높이에선 2장이면 카드가 131px·썸네일 49px 로 납작해서 1장(main.js comboTwoRows = 세로 800↑ 일 때만 2장).
   1장이면 카드가 칸 높이만큼 길어져 썸네일 아래가 비었다 → 썸네일이 남는 높이를 채우게(2장 모드와 같은 방식). */
@media screen and (min-width: 1201px) and (min-height: 640px) and (max-height: 799px) {
  .main_combo .combo_col .swiper-slide { position: relative; display: flex; flex-direction: column; }
  .main_combo .combo_col .swiper-slide .img_box { flex: 1 1 auto; min-height: 0; height: auto; aspect-ratio: auto; max-height: none; }
  .main_combo .combo_col .swiper-slide .txt_box { flex-shrink: 0; margin-top: 0.8rem; padding-right: 2.6rem; }
  .main_combo .combo_col .swiper-slide .txt_box .tit { margin-top: 0; font-size: 1.05rem; line-height: 1.35; -webkit-line-clamp: 2; line-clamp: 2; }
  .main_combo .combo_col .swiper-slide .btn_wrap { position: absolute; right: 1rem; bottom: 1rem; margin: 0; }
}

/* ── 아래 화면(섬유최신뉴스·홍보마당·INFO-TEX) — 풀페이지가 풀린 화면 배치 (2026-10-20 사용자 결정) ──
   예전엔 셋을 전부 가로 전체로 쌓아, INFO-TEX(세로 포스터)가 가로로 늘어나고 높이가 83px 로 찌그러졌다(1100 실측).
   901~1200px(+ 가로 넓고 세로 639 이하) : 원래 순서 유지 — 윗줄 = 섬유최신뉴스 가로 전체 / 아랫줄 = 홍보마당 | INFO-TEX
   홍보마당 카드(보도기사·미디어 1장씩)는 INFO-TEX 포스터 높이에 맞춰 늘어나고 썸네일이 남는 높이를 채운다.
   ≤900px : 한 줄씩 쌓되 INFO-TEX 포스터에 높이를 준다. */
@media screen and (min-width: 901px) and (max-width: 1200px), screen and (min-width: 1201px) and (max-height: 639px) {
  .main_combo .wFix.content_wrap {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    grid-template-areas: "news news" "combo info";
    column-gap: 2rem;
    row-gap: 3rem;
  }
  .main_combo .ktdi_news { grid-area: news; }
  .main_combo .combo_card { grid-area: combo; }
  .main_combo .info_tex { grid-area: info; }
  /* 준비중 동안은 낮은 띠 */
  .main_combo .ktdi_news .news_prep { min-height: 11rem; }
  /* 홍보마당 안쪽(줄 배치·카드)은 아래 '901px 이상' 공통 블록. 태블릿에선 썸네일 최소 높이만 조금 크게 */
  .main_combo .combo_col .combo_side .swiper-slide .img_box { min-height: 8rem; }
  /* INFO-TEX 포스터는 줄 높이(=홍보마당)를 채운다 — 아래 '쌓인 화면' 고정 높이 대신 */
  .main_combo .info_tex .content_box { flex: 1 1 auto; }
  .main_combo .info_tex .content_box .img_box { flex: 1 1 0; height: auto; min-height: 320px; }
}
/* 🔴 포스터 상자는 원래 '남는 높이 채우기(flex:1)'라, 높이가 내용대로인 쌓인 화면에선 0 이 된다 → ≤900 은 고정 높이(901~1200 은 위 블록에서 줄 높이를 채움) */
@media screen and (max-width: 900px) {
  .main_combo .info_tex .content_box .img_box { flex: none; height: clamp(320px, 42vw, 520px); }
}

/* ── 홍보마당 — 보도기사 / 미디어를 위아래 '줄'로, 줄마다 카드 2장 가로 (2026-10-20 사용자 요청: 풀페이지도 가로 정렬) ──
   901px 이상 전부(풀페이지·노트북·태블릿) 같은 짜임. 예전 풀페이지의 '칸마다 2장 세로(grid rows 2)'는 안 쓴다.
   한 줄 = [보도기사 …… 1/3 ‹ ›][VIEW MORE] / [카드][카드]
   VIEW MORE(.combo_foot)는 HTML 위치(카드 아래) 그대로 두고, 격자로 제목 줄 오른쪽 칸에 올렸다.
   카드 모양(흰 카드·가리키는 카드 강조)은 위쪽 :is(.swiper-grid, .combo_side) 규칙 — main.js 가 .combo_side 를 붙인다. */
@media screen and (min-width: 901px) {
  .main_combo .combo_card { display: flex; flex-direction: column; }
  .main_combo .combo_cols { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 1.6rem; }
  .main_combo .combo_cols::before { display: none; }            /* 좌우 구분선 → 위아래 줄이라 필요 없음 */
  .main_combo .combo_col {
    flex: 1 1 0;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: 1.2rem;
    row-gap: 1rem;
  }
  .main_combo .combo_col .combo_head { grid-column: 1; grid-row: 1; margin-bottom: 0; }
  .main_combo .combo_col .combo_foot { grid-column: 2; grid-row: 1; margin: 0; align-self: center; }
  .main_combo .combo_col .swiper { grid-column: 1 / -1; grid-row: 2; min-height: 0; }
  .main_combo .combo_col .swiper-slide { height: auto; align-self: stretch; }
  /* 🔴 썸네일은 원본 비율이 아니라 칸을 나눠 갖는다(flex-basis 0) — auto 면 원본 비율로 커져 카드가 넘쳤다(1100 실측 395px).
        선택자에 .combo_side 를 넣은 건 위의 2장 공통 규칙(클래스 5개)을 이기기 위해서다. */
  .main_combo .combo_col .combo_side .swiper-slide .img_box { flex: 1 1 0; min-height: 6rem; height: auto; aspect-ratio: auto; max-height: none; }
}
@media screen and (min-width: 901px) and (max-width: 1440px) {
  .main_combo .combo_col { row-gap: 0.5rem; }
}

/* ── 홍보마당 카드 — 낮은 화면에서 제목·날짜가 잘리던 것 (2026-10-20 사용자 제보) ──
   원인 : 썸네일 min-height 6rem(96px). 카드가 낮아져도 썸네일이 안 줄어 글이 카드 밖으로 밀리고,
          슬라이더(overflow:hidden)가 잘라냈다 — 1366×650 14px · 1280×640 18px · 태블릿 1100/1000 27px (실측).
   풀페이지 : 썸네일 최소 높이 없음 → 글 높이를 먼저 확보하고 남는 높이만 썸네일(1366×650 에서 68px).
   태블릿   : 줄 높이를 내용대로(칸을 반씩 나눠 갖지 않음) + 썸네일 9rem 고정 → 카드 224px,
              홍보마당이 길어진 만큼 INFO-TEX 포스터도 같이 늘어난다(1100 실측 611 = 611). */
@media screen and (min-width: 901px) {
  .main_combo .combo_col .combo_side .swiper-slide .img_box { min-height: 0; }
}
@media screen and (min-width: 901px) and (max-width: 1200px), screen and (min-width: 1201px) and (max-height: 639px) {
  .main_combo .combo_cols { flex: none; }
  .main_combo .combo_col { flex: none; min-height: auto; grid-template-rows: auto auto; }
  .main_combo .combo_col .swiper { min-height: auto; }
  .main_combo .combo_col .combo_side .swiper-slide .img_box { flex: none; height: 9rem; min-height: 0; }
}