@charset "UTF-8";
/* =============================================================
   2026 제78회 충청남도민체육대회 - 반응형 스타일
   기존 layout.css / style.css 를 덮어쓰는 레이어이므로
   반드시 두 파일보다 뒤에서 로드할 것 (head.jsp 참조)

   breakpoint
     1400px 이하 : 소형 데스크톱 / 가로 태블릿
     1024px 이하 : 태블릿 (GNB → 드로어 메뉴 전환)
      768px 이하 : 모바일
      480px 이하 : 소형 모바일
   ============================================================= */

/* ---------- 공통 : 고정폭 해제 ---------- */
html { -webkit-text-size-adjust: 100%; }
img { max-width: 100%; height: auto; }

/* ---------- 2026 신규 마크업 공통 스타일 ---------- */
/* 헤더 로고 : 2026 엠블럼+로고타입 가로 조합형(가로가 긴 형태)이라 높이를 키운다 */
.head .logo a img { height: 66px; }


/* 경기종목 카드 : 고정 4열 float → 반응형 그리드 */
.item_box.js-item-poup {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
}
.item_box.js-item-poup .item { float: none; width: auto; height: auto; margin: 0; }
.item_box.js-item-poup .item .img { height: 150px; }
.item_box.js-item-poup p { grid-column: 1 / -1; }

/* 표 안내문구 / 부가표기 */
.ref_list { margin-top: 18px; padding-left: 2px; }
.ref_list li { position: relative; padding-left: 14px; margin-bottom: 6px; font-size: 15px; color: #666; line-height: 1.6; word-break: keep-all; }
.ref_list li::before { content: '※'; position: absolute; left: 0; color: #999; }
.ref_list a { color: #0258ad; text-decoration: underline; }
.ref { font-size: 13px; color: #888; }
td.tl, th.tl { text-align: left !important; padding-left: 14px; padding-right: 14px; }

/* 대회개요/참가요강 요약표 : 좌측 항목열 강조 */
.summary_table th { background: #fafafc; font-weight: 700; text-align: center; }
.summary_table td { text-align: left !important; padding: 12px 20px; line-height: 1.7; }
.summary_table td small { color: #888; font-size: 13px; }

/* 슬로건 박스 */
.slogan_box { padding: 34px 20px; text-align: center; border: 1px solid #e6e6e6; background: #fafafc; border-radius: 6px; }
.slogan_box strong { font-size: 28px; color: #0258ad; letter-spacing: -0.5px; word-break: keep-all; }

/* 지역별 경기장 지도 버튼 */
.btn_map_sm { padding: 6px 16px; border: 1px solid #0258ad; background: #fff; color: #0258ad; border-radius: 30px; cursor: pointer; font-size: 14px; }
.btn_map_sm:hover { background: #0258ad; color: #fff; }

/* ---------- 종목별 경기장 카드 정렬 ----------
   원본은 float + 고정높이(340px) + word-spacing 으로 라벨을 벌려 놓은 구조라,
   경기장명이 길면 라벨(종목/종별/경기장명)이 줄바꿈되고 카드 높이가 제각각이 된다.
   그리드 + 세로 flex 로 바꿔 라벨 폭을 고정하고 지도 버튼을 항상 카드 하단에 붙인다. */
.item_list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.item_list .list {
	float: none; width: auto; height: auto; min-height: 340px;
	margin: 0; display: flex; flex-direction: column;
}
.item_list .list .img { flex: 0 0 165px; }
/* table 은 flex 아이템이어도 남는 공간을 흡수하지 않으므로 버튼에 margin-top:auto 를 준다 */
/* table-layout:fixed 가 없으면 width 는 "최소값"으로만 동작한다. 경기장명("신평문화스포츠센터
   체육관" 등)이 길고 td 가 keep-all 이라 표가 카드 폭(233px)을 넘어 346px 까지 벌어졌다.
   폭을 고정하고, 한 낱말이 칸보다 길 때만 강제로 끊기도록 overflow-wrap 을 함께 준다. */
.item_list .list table {
	width: calc(100% - 24px); height: auto; margin: 0 auto; flex: 0 0 auto;
	table-layout: fixed;
}
/* 항목명은 왼쪽 정렬 + 고정폭. 자간 균등배분(text-align-last:justify)을 쓰면
   "경기장명"(글자 실폭 53px)이 112px 를 요구해 74px 칸을 넘어선다.
   폭이 고정돼 있으니 왼쪽 정렬만으로도 세 줄의 값 시작점이 정확히 맞는다. */
.item_list .list table th,
.item_list .list table tr:last-child th {
	width: 74px; min-width: 74px; padding: 2px 8px 2px 0;
	word-spacing: normal; letter-spacing: normal; white-space: nowrap; vertical-align: top;
	text-align: left; text-align-last: left;
}
.item_list .list table td { padding-left: 0; word-break: keep-all; overflow-wrap: anywhere; vertical-align: top; }
.item_list .list .btn_map { flex: 0 0 auto; margin: auto auto 16px; }

/* 상징물 포스터 : .img_layer img 의 width:100% 를 풀고 2022년과 동일한 축소 썸네일로 */
.img_layer.poster_layer { display: flex; flex-wrap: wrap; gap: 20px; }
.img_layer.poster_layer img { width: auto; max-width: 220px; height: auto; border: 1px solid #e6e6e6; }

/* 메인 SNS 배너 D-day 카운트 : 배너 하단 여백 중앙에 오도록 배치.
   배너 폭이 화면에 따라 달라지므로 px 이 아닌 비율(%)로 잡아야 모바일에서도 자리가 맞는다.
   (mn_box_banner_01 은 상단 55% 가 엠블럼·대회명, 하단이 여백) */
.mn_sns > div .count { top: 68%; font-size: 44px; line-height: 1.1; letter-spacing: 1px; }

/* 인사말 : 회장 사진(greetings.png)이 우측 배경으로 깔리므로 본문이 겹치지 않도록 폭 제한 */
.intro .article1,
.intro .article2 { max-width: 62%; }
.intro .greet_sign { max-width: 62%; }

/* 인사말 서명 (친필 서명 이미지 없이 날짜 + 직함·성명만 표기) */
.greet_sign { margin-top: 46px; text-align: right; line-height: 1.9; }
.greet_sign .date { display: block; font-size: 16px; color: #666; }
.greet_sign strong { display: inline-block; margin-top: 8px; font-size: 20px; color: #111; letter-spacing: 1px; }

/* ---------- 경기종목 상세 팝업 ----------
   원본은 흰 박스(.item_inner)에 height:528px 가 박혀 있어 참가자격·경기방법이 긴 종목은
   글자가 박스 밖으로 흘러나온다. 높이를 내용에 맞추고 라벨 열 폭을 고정한다. */
.item_inner { height: auto; min-height: 360px; padding: 46px 50px; }
.item_inner table { margin-bottom: 0; table-layout: fixed; }
.item_inner table th {
	width: 104px; min-width: 104px; padding-right: 26px; padding-bottom: 18px;
	letter-spacing: normal; white-space: nowrap; vertical-align: top;
	text-align: justify; text-align-last: justify;   /* 종별·경기장 등 글자 수가 달라도 폭을 맞춘다 */
}
.item_inner table th.row { letter-spacing: normal; }
.item_inner table td { padding-bottom: 18px; word-break: keep-all; }
/* 내용이 길면 팝업 자체가 세로로 늘어나므로 화면 높이를 넘을 때만 스크롤 */
.layer_pop.item_popup.active { align-items: flex-start; padding: 60px 0 40px; }
.item_popup .pop_container { margin: 0 auto; }

/* =============================================================
   표 레이아웃 정리
   -------------------------------------------------------------
   2022 소스의 표는 (1) colgroup 폭이 지켜지지 않고 (2) 높이가 px 로 고정돼
   여러 줄 내용에서 여백이 무너지며 (3) 항목명 자간을 전각공백으로 손수 맞춰
   글자 수마다 간격이 달랐다. 아래에서 세 가지를 한꺼번에 정리한다.
   ============================================================= */

/* 첫 칸(구분·항목명)은 줄바꿈을 막아 제 폭을 갖게 한다.
   auto 레이아웃에서는 colgroup 의 width 가 "권고"라 두 번째 칸 내용이 길면 무시된다.
   대회개요 "구분" 칸이 222px 지정에도 88px 로 눌려 "정식종목(30)"이 두 줄로 꺾였다.
   table-layout:fixed 는 쓰지 않는다 — colgroup 이 없는 표에서는 칸을 반씩 나눠버린다. */
.sub_right .table_st1 thead th:first-child,
.sub_right .table_st1 tbody th,
.sub_right .table_st1 tbody td:first-child,
.sub_right .table_st4 tbody td:first-child { white-space: nowrap; }

/* 공통 : 높이 고정을 풀고 위아래 여백으로 리듬을 만든다 */
.sub_right .table_st1 td,
.sub_right .table_st4 td {
	height: auto; min-height: 0; padding: 13px 16px;
	line-height: 1.65; vertical-align: middle;
	/* keep-all 만 주면 칸보다 긴 낱말(경기장명·주소)이 칸 밖으로 새기 때문에
	   낱말 단위 줄바꿈을 우선하되, 그래도 안 들어가면 강제로 끊는다. */
	word-break: keep-all; overflow-wrap: anywhere;
}
.sub_right .table_st1 thead th,
.sub_right .table_st4 thead th { height: auto; padding: 13px 16px; line-height: 1.5; }
.sub_right .table_st1 td:nth-child(2) { padding: 13px 20px; }
.sub_right .table_st1 .row td { height: auto; }

/* 여러 줄이 들어가는 칸(대회개요 개최종목·주요일정 등)은 윗줄 기준으로 맞춘다 */
.sub_right .table_st1 .row td,
.summary_table th, .summary_table td { vertical-align: top; }

/* 항목명 칸 : 전각공백으로 자간을 맞추던 것을 걷어내고 가운데 정렬로 통일한다.
   자간 균등배분(text-align-last:justify)은 항목명 길이가 2자("일시")~8자("시군 대표자회의")로
   제각각이라 오히려 들쭉날쭉해진다. 칸 배경을 옅게 깔아 값 칸과 구분되게 했다. */
.summary_table th {
	width: 180px; box-sizing: border-box; padding: 13px 16px;
	font-size: 15px; font-weight: 500; line-height: 1.65;
	letter-spacing: normal; word-spacing: normal; word-break: keep-all;
	text-align: center; text-align-last: center;
	background: #fafafc; color: #222;
}
.summary_table td { padding: 13px 22px; }
.summary_table .ref { display: inline-block; margin-top: 2px; }

/* 개회식 진행순서(.table_st4) : 마지막 칸에 걸린 padding-left:100px 은 2022년 다른 표용
   값이라 90px 짜리 "소요" 칸을 밀어내 머리글과 어긋났다. 가운데 정렬로 되돌린다. */
.sub_right .table_st4 td:last-child { text-align: center; padding-left: 16px; }
.sub_right .table_st4 td:nth-child(2) { text-align: left; }

/* 진행순서·일정표(.table_st3) : 첫 행만 padding 이 0 이라 한 줄이 붙어 보였다 */
.sub_right .table_st3 th,
.sub_right .table_st3 td { padding: 11px 10px; line-height: 1.5; vertical-align: middle; }
.sub_right .table_st3 tbody tr:first-child td { padding: 11px 10px; }
.sub_right .table_st3 tbody td:first-child { padding: 11px 10px; }
.sub_right .table_st3 td.tl { text-align: left; }

/* 메인 히어로
   style.css 는 슬라이드 배경을 #000 으로 두고 있다. 2022년 영상 슬라이드가
   좌우로 남는 여백을 검게 처리하려던 설정인데, 2026 메인 이미지는 흰 배경이라
   1px 이라도 어긋나면 검은 띠로 보인다. 흰색으로 맞춘다.
   또 img 는 기본이 inline 이라 글꼴 baseline 만큼(4~5px) 아래 여백이 생기는데,
   그 틈으로도 슬라이드 배경색이 비친다. display:block 으로 없앤다. */
.mn_slide .mn_swiper .swiper-slide { background: #ffffff; }
.mn_slide .mn_swiper .swiper-slide > img { display: block; width: 100%; height: auto; }

/* 후원기관 로고 : 당진시의회가 빠져 5종이 되면서 오른쪽에 186px 빈 자리가 남았다.
   (로고 합 819px + 슬라이드 간격 40px×4 = 979px < 슬라이더 폭 1165px)
   슬라이드가 전부 보이는 상태라 좌우 화살표는 이미 숨겨져 있으니,
   남는 자리를 슬라이드 사이에 고르게 나눠 양끝을 슬라이더 폭에 맞춘다.
   폭이 좁아 실제로 넘어가는 화면에서는 남는 자리가 없어 이 규칙이 동작하지 않는다(=원래대로 슬라이드). */
.footer_banner .swiper-wrapper { justify-content: space-between; }
.footer_banner .swiper-slide:last-child { margin-right: 0 !important; }

/* 종목 팝업 안내문구 */
.pop_ref { margin-top: 18px; font-size: 14px; color: #666; }
.pop_ref a { color: #0258ad; text-decoration: underline; }

/* 개회식 홍보 카드 (발주처 제공 SNS 카드 7종)
   원본이 4:5 세로형이라 2단으로 배치한다. minmax(0,1fr) 이어야 좁은 화면에서 칸이 줄어든다. */
.event_cards {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px; margin-bottom: 50px;
}
.event_card a { display: block; border: 1px solid #e2e6ea; border-radius: 6px; overflow: hidden; }
.event_card img { display: block; width: 100%; height: auto; }
.event_card a:hover { border-color: #0258ad; }

@media (max-width: 1400px) {
	/* reset.css 의 body{min-width:1335px} 와 layout.css 의 .wrap{min-width:1335px} 를 함께 풀어야
	   .center 의 width:100% 가 뷰포트 기준으로 계산된다. 둘 중 하나만 풀면 가로 스크롤이 남는다. */
	html, body { min-width: 0; overflow-x: hidden; }
	.wrap { min-width: 0; }
	.center { width: 100%; max-width: 1335px; padding: 0 20px; box-sizing: border-box; }
	.head .logo { width: 300px; }
	.head .gnb { width: calc(100% - 300px); padding-left: 40px; }
	.head .gnb ul li { margin-right: 32px; padding-left: 0; }
	.gnb_sub_nav .gnb_sub_count { width: 300px; }
	.gnb_sub_nav .gnb_sub_list { width: calc(100% - 300px); padding-left: 40px; }
	.gnb_sub_nav .gnb_sub_list > ul { margin-right: 12px; }
	.gnb_sub_nav .gnb_sub_list > ul li { width: 112px; }
	.footer_banner .swiper { width: calc(100% - 100px); margin-left: 50px; }
	.fix_menu { display: none; }
	.sub_body .sub_left { width: 220px; margin-right: 40px; }
	.sub_body .sub_right { width: calc(100% - 260px); }
	.item_popup .pop_container { width: 96vw; }
	.item_conts { width: 100%; }
	.map_popup { width: 92vw; max-width: 973px; }
}

/* ---------- 모바일 메뉴 버튼 / 딤 : 데스크톱에서는 숨김 ---------- */
.mo_menu_btn { display: none; }
.mo_dim { display: none; }

/* =============================================================
   1024px 이하 : GNB를 우측 드로어로 전환
   ============================================================= */
@media (max-width: 1024px) {
	body.mo-nav-open { overflow: hidden; }

	.head { position: relative; top: 0; height: 64px; border-bottom: 1px solid #e5e5e5; }
	.head .center { display: flex; align-items: center; justify-content: space-between; height: 64px; }
	.head { height: 76px; }
	.head .center { height: 76px; }
	.head .logo { float: none; width: auto; line-height: 76px; }
	.head .logo a img { height: 45px; }

	/* 데스크톱 GNB 숨김 */
	.head .gnb { display: none; }

	/* 햄버거 버튼 */
	.mo_menu_btn {
		display: flex; flex-direction: column; justify-content: center; gap: 5px;
		width: 40px; height: 40px; padding: 0 8px; margin: 0;
		background: none; border: 0; cursor: pointer; z-index: 860;
	}
	.mo_menu_btn span { display: block; width: 100%; height: 2px; background: #222; transition: transform .25s, opacity .25s; }
	body.mo-nav-open .mo_menu_btn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	body.mo-nav-open .mo_menu_btn span:nth-child(2) { opacity: 0; }
	body.mo-nav-open .mo_menu_btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

	/* 딤 처리 */
	.mo_dim { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.5);
		opacity: 0; visibility: hidden; transition: opacity .25s; z-index: 840; }
	body.mo-nav-open .mo_dim { opacity: 1; visibility: visible; }

	/* 서브 내비게이션 → 우측 드로어 */
	.gnb_sub_nav {
		position: fixed; left: auto; right: 0; top: 0;
		width: 320px; max-width: 85vw; height: 100% !important;
		background-image: none; background-color: #fff;
		box-shadow: -4px 0 18px rgba(0,0,0,.15);
		transform: translateX(100%); transition: transform .28s ease;
		overflow-y: auto; overflow-x: hidden; z-index: 850; border-bottom: 0 !important;
	}
	body.mo-nav-open .gnb_sub_nav { transform: translateX(0); }
	.gnb_sub_nav .center { width: 100%; max-width: none; padding: 0; }

	.gnb_sub_nav .gnb_sub_count {
		float: none; width: 100%; padding: 28px 20px; text-align: left;
		background: linear-gradient(135deg, #0258ad 0%, #00a9ec 100%);
	}
	.gnb_sub_nav .gnb_sub_count > span { float: none; margin-left: 0; font-size: 17px; }
	.gnb_sub_nav .gnb_sub_count .count { font-size: 30px; margin-top: 6px; }

	.gnb_sub_nav .gnb_sub_list {
		float: none; width: 100%; height: auto; padding: 10px 0 60px; border: 0;
	}
	.gnb_sub_nav .gnb_sub_list > ul { float: none; width: 100%; margin: 0; border-bottom: 1px solid #eee; padding: 6px 0; }
	.gnb_sub_nav .gnb_sub_list > ul li { width: 100%; }
	.gnb_sub_nav .gnb_sub_list > ul > li { margin-bottom: 0; }
	.gnb_sub_nav .gnb_sub_list > ul li a { padding: 13px 20px; border-radius: 0; font-size: 16px; }
	/* 3depth : 모바일에서는 아코디언 */
	.gnb_sub_nav .gnb_sub_list > ul > li > ul { display: none; margin-top: 0; background: #f6f9fc; }
	.gnb_sub_nav .gnb_sub_list > ul > li.open > ul,
	.gnb_sub_nav .gnb_sub_list > ul > li.on > ul { display: block; }
	.gnb_sub_nav .gnb_sub_list > ul > li > ul li a { padding-left: 38px; font-size: 14px; }

	/* 서브페이지 : 좌측 내비를 상단 탭으로 */
	.contents .sub_head { height: 240px; }
	.sub_head .banner_title { top: 46%; }
	.sub_head .banner_title h2 { font-size: 28px; margin-bottom: 10px; }
	.sub_head .banner_title span { font-size: 15px; }
	.sub_head .location { bottom: 14px; }
	.sub_head .location li { font-size: 13px; }

	.contents .sub_body .center { flex-direction: column; padding: 0 20px 60px; }
	.sub_body .sub_left { width: 100%; margin: 0 0 24px; }
	.sub_body .sub_right { width: 100%; padding-top: 24px; }
	.sub_left .nav_top { display: none; }
	.sub_left .page_nav { display: flex; flex-wrap: wrap; border: 0; border-bottom: 2px solid #00a9ec; }
	.sub_left .page_nav > li { border-bottom: 0; }
	.sub_left .page_nav > li > a { height: 44px; line-height: 44px; padding: 0 16px; font-size: 15px; }
	.sub_left .page_nav > li ul { display: none; }

	.sub_right .conts_title { font-size: 24px; margin-bottom: 28px; }
	.inner_section { margin-bottom: 44px; }
	.sub_title { font-size: 19px; }

	.footer { height: auto; padding: 30px 20px; font-size: 13px; }
	.footer_banner { height: auto; padding-bottom: 24px; }
	.footer_banner .swiper { margin-top: 24px; }
}

/* =============================================================
   768px 이하 : 모바일
   ============================================================= */
@media (max-width: 768px) {
	.center { padding: 0 16px; }
	.event_cards { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-bottom: 34px; }
	.contents .sub_head { height: 180px; }
	.sub_head .banner_title h2 { font-size: 22px; }
	.sub_head .banner_title span { font-size: 13px; display: block; padding: 0 20px; word-break: keep-all; }
	.contents .sub_body .center { padding: 0 16px 40px; }

	.sub_left .page_nav { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.sub_left .page_nav::-webkit-scrollbar { height: 0; }
	.sub_left .page_nav > li { flex: 0 0 auto; }
	.sub_left .page_nav > li > a { font-size: 14px; padding: 0 13px; white-space: nowrap; }

	/* 모바일에서는 회장 사진 배경을 내리고 본문을 전폭으로 */
	.intro { background-image: none !important; }
	.intro .article1,
	.intro .article2,
	.intro .greet_sign { max-width: 100%; }

	.item_box.js-item-poup { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.item_box.js-item-poup .item .img { height: 120px; }
	.item_list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.item_list .list { min-height: 300px; }
	.item_list .list table th { width: 68px; min-width: 68px; font-size: 14px; }
	.item_list .list table td { font-size: 14px; }
	.slogan_box { padding: 24px 16px; }
	.slogan_box strong { font-size: 20px; }
	.summary_table td { padding: 10px 14px; font-size: 14px; }

	/* 표 : 가로 스크롤 (common.js 가 .table_scroll 로 자동 감쌈) */
	.table_scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.table_scroll > table { min-width: 640px; }
	.table_scroll.is-scrollable { position: relative; }

	.footer_banner .swiper { width: calc(100% - 70px); margin-left: 35px; }
	.footer_banner .swiper-button-prev,
	.footer_banner .swiper-button-next { width: 28px; height: 28px; }
	.footer_banner .swiper .swiper-slide img { max-height: 40px; width: auto; }

	/* 팝업 */
	.layer_pop { padding: 20px 0; }
	.pop_title { font-size: 17px; height: 54px; line-height: 54px; }
	.pop_inner { padding: 20px; }
	.pop_map { height: 300px; margin-bottom: 20px; }
	.map_popup { width: 94vw; }
	.map_popup address { line-height: 1.8; }
	.map_popup address h6,
	.map_popup address p { float: none; font-size: 15px; }
	.map_popup address a { float: none; margin-top: 12px; }
	.item_popup .item_box { padding: 24px 16px; }
	.item_popup .btn_pop_close { top: -46px; width: 32px; height: 32px; }
	.item_inner { height: auto; padding: 20px; }
	.item_inner table th, .item_inner table td { font-size: 15px; line-height: 1.6; }
	.item_inner table th { letter-spacing: 2px; }
	.item_inner table th.row { letter-spacing: 2px; }
	.item_inner .img_list { flex-wrap: wrap; gap: 12px; }
	.item_inner .img_list li { width: 100%; height: auto; }
	.item_conts .img { height: auto; }
}

/* =============================================================
   480px 이하 : 소형 모바일
   ============================================================= */
@media (max-width: 480px) {
	/* 경기장 카드 : 2열이라 칸이 151px 밖에 안 되는데 라벨(68px)까지 옆에 두면
	   경기장명에 57px 만 남아 "당진종합운동장 / 석문국가산업단지 A·B·C구장" 같은 값이
	   11줄로 쪼개진다. 라벨을 값 위로 올려 값이 카드 폭을 다 쓰게 한다. */
	.item_list .list table,
	.item_list .list table tbody,
	.item_list .list table tr,
	.item_list .list table th,
	.item_list .list table td { display: block; width: auto; }
	.item_list .list table th,
	.item_list .list table tr:last-child th {
		width: auto; min-width: 0; padding: 0; font-size: 12px; color: #8a8f96;
		text-align: left; text-align-last: left;
	}
	.item_list .list table td { padding: 1px 0 9px; font-size: 14px; line-height: 1.45; }
	.item_list .list table tr:last-child td { padding-bottom: 0; }

	.contents .sub_head { height: 150px; }
	.sub_head .banner_title h2 { font-size: 19px; }
	.sub_right .conts_title { font-size: 20px; }
	.sub_title { font-size: 17px; }
	.gnb_sub_nav { width: 88vw; }
	.footer { font-size: 12px; line-height: 1.7; }
	.footer p { font-size: 11px; margin-top: 14px; }
}

/* =============================================================
   메인 화면 반응형 (1024px 이하)
   -------------------------------------------------------------
   메인은 .mn_conts .center 를 position:absolute; top:-276px 로 띄워
   슬라이드 위에 겹쳐 올리는 구조라, 좁은 화면에서는 카드가 히어로를 덮고
   news_box 의 width:calc(100% - 450px) 가 음수가 되어 글자가 세로로 쪼개진다.
   절대배치를 풀고 한 줄씩 쌓이도록 바꾼다.
   ============================================================= */
@media (max-width: 1024px) {
	.mn_conts { height: auto; padding: 24px 0 36px; }
	/* layout.css 의 .center{height:100%} 를 함께 풀지 않으면 내부 카드가 넘쳐 다음 섹션을 덮는다 */
	.mn_conts .center { position: static; transform: none; top: auto; left: auto; height: auto; }
	.mn_conts .conts_row { gap: 18px; }

	/* PHOTO / NOTICE : 가로 2단 → 세로 1단 */
	.mn_conts .conts_row .list_box.photo_box,
	.mn_conts .conts_row .list_box.news_box { width: 100%; }
	.mn_conts .conts_row .list_box.photo_box .img { height: 200px; background: #f4f6f8; }
	.mn_conts .conts_row .list_box .top { height: 56px; padding: 0 18px; font-size: 16px; }
	.mn_conts .conts_row .list_box.photo_box .title { height: 56px; line-height: 56px; padding: 0 18px; font-size: 15px; }
	.mn_conts .conts_row .list_box.news_box .list_body { padding: 10px 18px; }
	.mn_conts .conts_row .list_box.news_box .list_body table td { height: 56px; font-size: 15px; }

	/* 종목 탭 : 좌측 세로 탭 → 상단 가로 탭 */
	.mn_conts .mn_item { height: auto; padding: 18px; }
	.mn_conts .mn_item ul { float: none; display: flex; gap: 8px; width: 100%; margin: 0 0 14px; padding-top: 0; }
	.mn_conts .mn_item ul li { width: auto; flex: 1 1 0; height: 40px; line-height: 40px; margin-bottom: 0; font-size: 15px; }
	.mn_conts .mn_item_box { float: none; width: 100%; height: auto; }
	/* 비활성 탭은 원본대로 height:0 으로 접어 둔다.
	   (auto 로 풀면 시범종목 목록까지 함께 펼쳐져 메인이 세로로 늘어난다) */
	.mn_conts .mn_item_box .swiper_box { height: 0; overflow: hidden; padding: 0 34px; }
	.mn_conts .mn_item_box .swiper_box.active { height: auto; }
	.mn_conts .mn_item_box .swiper { height: auto; }
	/* swiper 의 .swiper-slide{height:100%} 가 남아 있으면 높이가 순환 참조되어
	   아이콘 한 칸이 300px 넘게 늘어난다. 높이 사슬을 모두 auto 로 끊는다. */
	.mn_conts .mn_item_box .swiper-wrapper { height: auto; align-items: flex-start; }
	.mn_conts .mn_item_box .swiper-slide {
		height: auto; flex-wrap: wrap; justify-content: center;
		align-content: flex-start; align-items: flex-start; gap: 6px 0;
	}
	.mn_conts .mn_item_box .swiper-slide a { width: 33.333%; height: auto; }
	.mn_conts .mn_item_box .swiper-slide img { width: 100%; max-width: 104px; height: auto; }
	.mn_conts .mn_item_box .swiper-button-prev,
	.mn_conts .mn_item_box .swiper-button-next { width: 28px; height: 28px; }

	/* SNS 배너 3종 : 가로 3단 → 세로 1단 */
	.mn_sns { flex-wrap: wrap; gap: 16px; }
	.mn_sns > div { width: 100%; }
	.mn_sns > div .count { font-size: 40px; }

	/* 당진 관광 : 원형 링크 글자 축소 */
	.mn_img h5 { font-size: 4.4vw; top: 20%; }
	.mn_img h5 span { font-size: 7vw; }
	.mn_img .circle h6 { font-size: 2.6vw; }
}

@media (max-width: 768px) {
	.mn_conts { padding: 18px 0 28px; }
	.mn_conts .conts_row .list_box.photo_box .img { height: 170px; }
	.mn_conts .mn_item_box .swiper-slide img { max-width: 92px; }
	.mn_sns > div .count { font-size: 34px; }
	.mn_img h5 { font-size: 5vw; }
	.mn_img h5 span { font-size: 8vw; }
	.mn_img .circle h6 { font-size: 3vw; }
	.footer_banner .swiper .swiper-slide img { max-height: 34px; }
}

/* ---------- 인쇄 ---------- */
@media print {
	.non-print { display: none !important; }
	.wrap { min-width: 0; }
	.center { width: 100%; padding: 0; }
	.sub_body .sub_right { width: 100%; padding-top: 0; }
}