@charset "utf-8";

/* ═════════════════════════════════════════════════════════
   모바일 헤더 (1023px 이하)
   · 데스크톱 레이아웃은 그대로 두고, 좁은 화면에서만
     GNB 를 햄버거 드로어로 접는다.
   · 모바일 우선 색인(mobile-first indexing) 대응.
   ═════════════════════════════════════════════════════════ */

/* 햄버거 버튼 — 기본(데스크톱)은 숨김 */
.header_burger { display: none; }

@media (max-width: 1199px) {

	/* ── 최상단 바 : 시계 + 공지 + 모드전환만 남긴다 ── */
	.vh_header_wrap .header_login__widget .inner {
		display: flex; align-items: center; gap: 8px;
		min-width: 0; padding: 0 12px;
	}
	.header_login__widget_log { flex: 0 0 auto; }
	.header_login__widget_log #mm_clock { font-size: 11.5px; white-space: nowrap; }
	.header_notice { flex: 1 1 auto; min-width: 0; }
	.header_notice__item a { font-size: 12px; }
	.header_notice__more,
	.header_notice__nav { display: none; }
	.header_login__widget_menu { flex: 0 0 auto; gap: 6px; }
	/* 문구는 접고 버튼만 남김 — 폭을 잡아먹는 주범 */
	.header_login__widget_menu > p { display: none; }
	.header_login__widget_btns a { padding: 5px 9px; font-size: 11.5px; white-space: nowrap; }

	/* ── 헤더 본체 ── */
	#header .header_wrap .inner {
		position: relative;
		display: flex; align-items: center; justify-content: space-between;
		gap: 10px; height: 60px; padding: 0 12px; min-width: 0;
	}
	/* common.css 의 .header_logo{width:320px} 가 좁은 화면에서 넘친다 */
	#header .header_logo { flex: 0 1 auto; width: auto; min-width: 0; text-align: left; }
	#header .header_logo img { height: 38px; width: auto; }

	/* 우측 슬로건(먹튀가 사라지는 그날까지 / 운영은 계속됩니다)은
	   모바일에서 폭만 잡아먹으므로 숨긴다 */
	#header .header_banner { display: none; }

	.header_burger {
		order: 3; flex: 0 0 auto;
		display: flex; flex-direction: column; justify-content: center; gap: 5px;
		width: 42px; height: 42px; padding: 0 10px;
		border: 1px solid #E3E8EC; border-radius: 10px; background: #fff;
		cursor: pointer;
	}
	.header_burger span {
		display: block; height: 2px; width: 100%;
		border-radius: 2px; background: #16212B;
		transition: transform .2s ease, opacity .2s ease;
	}
	.header_burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.header_burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
	.header_burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

	/* ── GNB 드로어 ── */
	#header .header_gnb {
		position: absolute; left: 0; right: 0; top: 100%;
		z-index: 9100;
		display: none; flex-direction: column; align-items: stretch;
		gap: 0; margin: 0; padding: 6px 0 10px;
		max-height: calc(100vh - 120px); overflow-y: auto;
		border-top: 1px solid #EDF1F4;
		background: #fff;
		box-shadow: 0 16px 32px rgba(17, 17, 17, .12);
	}
	#header .header_gnb.open { display: flex; }

	#header .header_gnb > li { width: auto; border-bottom: 1px solid #F2F5F7; }
	#header .header_gnb > li:last-child { border-bottom: 0; }
	#header .header_gnb > li > a {
		display: flex; align-items: center; justify-content: space-between;
		height: auto; padding: 14px 18px;
		font-size: 15px; font-weight: 800; color: #16212B;
	}
	#header .header_gnb > li.on > a { color: #00857F; }
	#header .header_gnb .gnb_arw { width: 14px; height: 14px; transition: transform .2s; }
	#header .header_gnb > li.sub_open > a .gnb_arw { transform: rotate(180deg); }

	/* 하위 메뉴 : 아코디언 (hover 드롭다운 해제) */
	#header .header_gnb > li .header_sub {
		position: static; display: none;
		width: auto; min-width: 0; padding: 4px 0 10px;
		border: 0; border-radius: 0; box-shadow: none;
		background: #F8FAFB;
		opacity: 1; visibility: visible; transform: none;
	}
	#header .header_gnb > li.sub_open .header_sub { display: block; }
	#header .header_gnb > li:hover .header_sub { display: none; }
	#header .header_gnb > li.sub_open:hover .header_sub { display: block; }
	#header .header_gnb .header_sub > li > a {
		display: block; padding: 11px 18px 11px 30px;
		font-size: 14px; color: #5C7386;
	}
	#header .header_gnb .header_sub > li > a.on { color: #00857F; font-weight: 700; }

	/* 로그인 회원 메뉴(종 아이콘)는 햄버거 왼쪽에 둔다 */
	#header .header_mymenu { order: 2; margin-left: auto; }
}

/* 상단 로그인 바 — 320px 급 화면에서 왼쪽 안내문이 밀려 오른쪽 메뉴가 화면 밖으로
   나가던 문제. 분기점을 새로 만들지 않고, 공간이 부족할 때만 안내문이 줄어들게 한다. */
@media (max-width: 1199px) {
	.header_login__widget .inner { min-width: 0; }
	.header_login__widget_log {
		min-width: 0;
		flex-shrink: 1;      /* 공간이 모자라면 안내문이 먼저 줄어들도록 */
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.header_login__widget_menu { flex-shrink: 0; }
}

@media (max-width: 480px) {
	.header_login__widget_log #mm_clock { font-size: 11px; }
	/* 시계는 날짜만 */
	.header_notice__tag span { display: none; }
	#header .header_logo img { height: 32px; }
	#header .header_wrap .inner { height: 54px; padding: 0 10px; }
}

/* ═════════════════════════════════════════════════════════
   모바일 : 가로 스크롤 제거
   · 헤더·푸터는 모든 페이지 공통이라 여기 한 곳에서 처리한다.
   ═════════════════════════════════════════════════════════ */
@media (max-width: 1199px) {

	html, body { max-width: 100%; overflow-x: hidden; }
	.inner { max-width: 100%; box-sizing: border-box; }
	#header .header_wrap .inner { box-sizing: border-box; }

	/* ── 푸터 4단 그리드 → 2단 ── */
	.site_footer__inner { width: min(100% - 32px, 1340px); box-sizing: border-box; }
	.site_footer__top { padding: 32px 0 36px; }
	.site_footer__top_grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 22px 18px;
	}
	.site_footer__top_grid > .site_footer__brand,
	.site_footer__top_grid > .site_footer__channel { grid-column: 1 / -1; }
	.site_footer__nav { min-width: 0; }
	.site_footer__description { max-width: none; }

	/* ── 푸터 상단 4칸 안내 ── */
	.footer_tips ul {
		flex-wrap: wrap;
		gap: 8px;
		padding: 24px 16px;
		box-sizing: border-box;
	}
	.footer_tips li {
		flex: 1 1 calc(50% - 4px);
		min-width: 0;
		padding: 14px 12px;
		gap: 12px;
	}
	.footer_tips li img { width: 40px; height: auto; flex: 0 0 auto; }
	.footer_tips li b { font-size: 15px; }
	.footer_tips li p { font-size: 12.5px; }
	.footer_tips li p br { display: none; }
}

@media (max-width: 640px) {
	.site_footer__top_grid { grid-template-columns: 1fr; }
	.footer_tips li { flex: 1 1 100%; }
	.footer_tips ul { padding: 18px 14px; }
}

/* ═════════════════════════════════════════════════════════
   메인 2단 레이아웃 → 1단 (1023px 이하)
   본문을 먼저 보여주고 좌측 위젯(로그인·랭킹 등)은 아래로 내린다.
   ═════════════════════════════════════════════════════════ */
@media (max-width: 1199px) {
	.content_wrap {
		flex-direction: column;
		gap: 16px;
		padding: 16px 0 60px;
	}
	.content_area  { order: 1; min-width: 0; }
	.content_aside { order: 2; width: auto; flex-shrink: 1; min-width: 0; }

	/* 사이드 위젯은 모바일에서 2단으로 나란히 */
	.content_aside { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.content_aside > .content_aside__user,
	.content_aside > .content_aside__banner { grid-column: 1 / -1; }

	/* 메인 히어로 */
	.main_banner--hero .main_banner__content { padding: 22px 16px; }
	.main_banner--hero h1 { font-size: 22px; line-height: 1.35; }
	.main_banner--hero h1 br { display: none; }
	.search_widget__bar { flex-wrap: nowrap; }
	.search_widget__filter { flex-wrap: wrap; gap: 6px 10px; }
}

@media (max-width: 640px) {
	/* 1fr 은 최소값이 auto(=내용물 폭)라 트랙이 화면보다 넓어질 수 있다.
	   1199px 이하 규칙과 동일하게 minmax(0,1fr) 로 맞춘다. (320px 화면 삐져나감) */
	.content_aside { grid-template-columns: minmax(0, 1fr); }
	.main_banner--hero h1 { font-size: 19px; }
}

/* ── 메인 내부 위젯들 (1023px 이하) ── */
@media (max-width: 1199px) {
	/* 게시글 위젯 2단 → 1단 (496px 고정 트랙이 좁은 화면에서 넘친다) */
	.widget_preview {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
		padding: 14px;
	}
	.post_widget { padding: 18px 16px; }

	/* 빠른 카테고리 : 8칸 가로 한 줄 → 4칸 × 2줄 */
	.category_list { padding: 18px 14px; }
	.category_list ul {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 14px 6px;
	}
	.category_list li { min-width: 0; font-size: 12px; }
	.category_list li b { font-size: 13.5px; }
	.category_list .cate_icon {
		width: 58px; height: 58px; border-radius: 15px; margin-bottom: 9px;
	}
	.category_list .cate_icon img { width: 34px; height: auto; }

	/* 제휴/보증업체 가로 나열 → 줄바꿈 */
	.partners_guide ul { flex-wrap: wrap; gap: 10px; }
	.partners_guide ul > li { flex: 1 1 calc(50% - 5px); min-width: 0; }
}

@media (max-width: 480px) {
	.category_list ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.partners_guide ul > li { flex: 1 1 100%; }
}

@media (max-width: 1199px) {
	/* 섹션 안 위젯 2~3개 가로 배치 → 세로 */
	.content_section__item_group { flex-wrap: wrap; gap: 12px; }
	.content_section__item_group > * { flex: 1 1 100%; min-width: 0; }
}

/* ── 잔여 넘침 미세 조정 ── */
@media (max-width: 1199px) {
	/* 검색창 : 입력칸이 줄고 버튼은 고정 */
	.search_widget__bar { gap: 6px; }
	.search_widget__bar input[type="text"],
	.search_widget__bar input:not([type="submit"]) { min-width: 0; flex: 1 1 auto; }
	.search_widget__bar button { flex: 0 0 auto; white-space: nowrap; }

	/* 섹션 헤더의 "전체보기" 가 눌려 잘리는 문제 */
	.content_section__head { gap: 8px; }
	.content_section__head__more { flex: 0 0 auto; white-space: nowrap; }
	.content_section__head_title { min-width: 0; }

	/* 위젯 헤더의 TODAY / 전체보기 */
	.post_widget__header { flex-wrap: wrap; gap: 6px 10px; }
	.post_widget__actions { flex: 0 0 auto; white-space: nowrap; }
}

@media (max-width: 768px) {
	/* 최상단 공지 티커는 폭이 모자라면 접는다 (공지 링크는 GNB·푸터에 있음) */
	.header_notice { display: none; }
	.header_login__widget_log #mm_clock { font-size: 12px; }
}

@media (max-width: 1199px) {
	/* 보증업체 강조 글로우는 가운데 정렬 전제라 드로어에서는 글자가
	   겹쳐 보인다 — 모바일에서는 글자색 강조만 남긴다 */
	#header .header_gnb > li.gnb_hl > a::before { display: none; }
	#header .header_gnb > li.gnb_hl > a {
		animation: none;
		background: none;
		-webkit-text-fill-color: currentColor;
		color: #E8892E;
	}
}

@media (max-width: 1199px) {
	/* 자동등록방지(캡차) 한 줄 배치가 좁은 화면에서 넘친다 */
	.wrap.mm-body #captcha,
	.wrap.mm-body fieldset#captcha {
		display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
		max-width: 100%; box-sizing: border-box;
	}
	.wrap.mm-body #captcha #captcha_img { flex: 0 0 auto; max-width: 100%; }
	.wrap.mm-body #captcha #captcha_key { flex: 0 0 auto; width: 90px; }
	.wrap.mm-body #captcha #captcha_mp3,
	.wrap.mm-body #captcha #captcha_reload { flex: 0 0 auto; }
	.wrap.mm-body #captcha #captcha_info { flex: 1 1 100%; font-size: 12px; }
}

/* ═════════════════════════════════════════════════════════
   데스크톱 헤더 가로 배분
   · .header_logo 가 320px 로 고정돼 있어 실제 로고 이미지(277px,
     1340px 이하에서는 240·210px)보다 최대 110px 넓었다. 그만큼
     우측 슬로건이 158px 로 눌려 "운영은 계속됩니다." 가 잘렸다.
   · 로고는 이미지 폭만 쓰고, 남는 공간은 GNB 와 슬로건이 가져간다.
   ═════════════════════════════════════════════════════════ */
#header .header_logo { width: auto; text-align: left; }
#header .header_banner {
	flex: 0 0 auto;
	min-width: max-content;   /* 슬로건은 줄지 않는다 */
}
.hb_slogan .hb_top,
.hb_slogan .hb_btm { white-space: nowrap; }

/* "먹튀가 사라지는 그날까지" 윗줄이 #6B7C88 / 13px 라 흰 배경에서
   거의 읽히지 않았다. 대비와 굵기를 올린다(1440px 이하에서도 유지). */
.hb_slogan .hb_top {
	font-size: 14px;
	font-weight: 600;
	color: #45596A;
	letter-spacing: -.01em;
}
.hb_slogan .hb_dot {
	width: 6px;
	height: 6px;
	box-shadow: 0 0 0 3px rgba(12, 239, 211, .3);
}
/* 장식용 밑줄 SVG 의 stroke 가 박스 밖으로 9px 새어나가 가로 스크롤을
   만든다. 배너 전체가 아니라 SVG 자신만 잘라낸다(글자는 그대로). */
.hb_slogan .hb_line {
	/* SVG 는 viewBox 비율을 가진 대체요소라 left+right+width:auto 조합에서
	   right 가 무시되고 30px 씩 삐져나갔다. 오른쪽에 붙이고 폭을 명시한다. */
	left: auto;
	right: 0;
	width: 58%;
	max-width: 100%;
	overflow: hidden;
}

/* ═════════════════════════════════════════════════════════
   상단 카테고리(GNB) 간격 정리 — 1200px 이상
   · 폭마다 글자 크기가 15 / 15.5 / 16.5 / 17px 로 네 번 바뀌고
     gap 2px + 좌우 padding 이 섞여 항목 간격이 들쭉날쭉했다.
   · 크기는 두 단계로만 두고, 간격은 링크 padding 하나로 정한다.
   ═════════════════════════════════════════════════════════ */
@media (min-width: 1200px) {
	#header .header_gnb {
		gap: 4px;
		padding: 0 12px;
		justify-content: center;   /* 로고와 슬로건 사이에서 균형 */
	}
	#header .header_gnb > li > a {
		gap: 5px;                  /* 글자 ↔ 드롭다운 화살표 */
		height: 42px;
		padding: 0 15px;
		font-size: 16px;
		letter-spacing: -.035em;
	}
	/* 화살표가 붙은 항목만 넓어 보이던 문제 — 크기를 줄이고 간격은 gap 으로 */
	#header .header_gnb > li > a .gnb_arw {
		width: 10px;
		height: 10px;
		margin-left: 0;
	}
}

/* 좁은 데스크톱 : 크기만 한 단계 줄이고 리듬은 그대로 */
@media (min-width: 1200px) and (max-width: 1365px) {
	#header .header_gnb { gap: 2px; padding: 0 6px; }
	#header .header_gnb > li > a { padding: 0 11px; font-size: 15px; }
}

/* ═════════════════════════════════════════════════════════
   GNB 하위메뉴(드롭다운) 글자 크기
   · .header_gnb li a { font-size:18px; font-weight:700 } 규칙이
     상위메뉴용인데 선택자 특정도가 더 높아 하위메뉴까지 덮어썼다.
     (.header_gnb li a = 0,1,2  vs  .header_sub a = 0,1,1)
   · 그래서 .header_sub a 의 14px/500 이 한 번도 적용되지 않았다.
   ═════════════════════════════════════════════════════════ */
@media (min-width: 1200px) {
	#header .header_gnb .header_sub {
		min-width: 138px;
		padding: 6px;
		border-radius: 10px;
	}
	#header .header_gnb .header_sub a {
		padding: 7px 11px;
		border-radius: 7px;
		font-size: 13.5px;
		font-weight: 500;
		letter-spacing: -.02em;
		line-height: 1.5;
	}
	#header .header_gnb .header_sub a.on { font-weight: 700; }
}
/* ══ 모바일 터치 영역 확보 (mm-tap-480) ══════════════════
   390px 실측에서 푸터 링크 24px · 빵부스러기 18px · 헤더 위젯 26px 로
   손가락으로 누르기에 작았다. 글자 크기는 그대로 두고
   상하 여백만 키워 실제 누를 수 있는 높이를 확보한다. */
@media (max-width: 480px) {
  .site_footer__links > li > a,
  .footer_tips a {
    display: block;
    padding: 11px 0;         /* 24px → 약 44px */
    line-height: 1.5;
  }
  .bcrumb a, .bcrumb span {
    display: inline-block;
    padding: 11px 3px;       /* 18px → 약 40px */
  }
  .header_login__widget_menu .header_login__widget_btn > a,
  .header_login__widget_menu > button,
  .header_login__widget_menu button.theme_toggle {
    min-height: 40px !important;
    padding-top: 7px; padding-bottom: 7px;
    display: inline-flex;
    align-items: center;
  }
}