@charset "UTF-8";
/* 반응형 — 전역 뼈대(헤더·메뉴·팝업·수상 띠·히어로 조작·푸터·서브 상단·이전/다음 띠)만 둔다.
   화면별 구조는 css/pages/<화면>-m.css, 게시판 스킨별은 css/skins/<스킨>-m.css 로 갈라 둔다.
   클래스에 무관한 일괄 규칙(.container div, .sections li, .tit 등)은 쓰지 않는다 — 부모·자식의 원래 좌표
   관계(음수 margin 상쇄 등)를 깨서 화면마다 다른 곳이 어긋난다(QA 2026-10-07 B04·B05·B07).

   1260px 이상에서는 이 파일의 규칙이 하나도 적용되지 않는다(전부 max-width 미디어쿼리 안).
   모바일 전용 요소는 기본 숨김이고 1023 이하에서만 켠다. */

/* 모바일 전용 요소는 기본이 숨김이다 — 1023 이하 블록에서만 켠다(PC 에 새면 안 된다) */
.mo_inq, #moDim, .mv_m { display: none; }
/* PC 메뉴 규칙(.depth1_ul > li, 특이도 0,1,1)이 .mo_head 의 숨김을 이긴다 — 같은 특이도 이상으로 숨긴다 */
.depth1_ul > li.mo_head { display: none !important; }
.mo_menu_btn { display: none; }

/* ── 배경 질감 — 모바일은 작은 타일 ──────────────────────────────────────────────
   원본 질감 그림은 7356×5016(24MB)이다. PC 는 절반으로 줄인 같은 그림을 쓰고(optimize_assets.py), 모바일은 가운데 조각으로
   만든 이음매 없는 타일(약 190KB)을 쓴다 — 이 규칙이 이기면 큰 그림은 내려받지도 않는다. */
@media screen and (max-width: 1023px) {
	body, .header_wrap { background: url(/uploads/mig_site/img/common/bg_img01_m.jpg) repeat 0 0 / 560px 560px; }
}

/* ── 가로 넘침 차단 ─────────────────────────────────────────────────────────────
   등장 모션이 요소를 옆으로 밀어 놓았다 들어오게 하는 동안 문서 폭이 화면보다 커져 가로 스크롤이 생긴다(브랜드·메뉴 5화면,
   PC 1440 에서 +150px). 넘치는 부분은 어차피 화면 밖이라 잘라도 보이는 모습은 같다. clip 은 스크롤 영역을 만들지 않는다. */
#wrap { overflow-x: clip; }

/* ── 폭 잠금 해제 ─────────────────────────────────────────────────────────── */
@media screen and (max-width: 1259px) {
	body { min-width: 0 !important; }
	#wrap { min-width: 0 !important; max-width: 100% !important; }
	.center, .inner { width: 100% !important; max-width: 1260px !important;
		padding-left: 20px; padding-right: 20px; box-sizing: border-box; }
	img { max-width: 100%; height: auto; }
	.slider-wrapper img, .slider-items img { max-width: none; }
}

/* ── 헤더 — 1024~1339: 접지 않고 간격을 폭에 비례해 줄인다 ──────────────────────
   메뉴 6개는 가운데보다 오른쪽(폭/2+약 102)에 놓이고, 그 오른쪽 끝(마지막 글자)은 오른쪽 묶음(전화·SNS 아이콘,
   폭 − 174 부터)과 30px 가량 떨어져야 한다: 폭/2 + 288 + 5m ≤ 폭 − 205(여유 30) → m ≤ (폭 − 971)/10.
   원본 간격(38.5)에서 이 식이 같아지는 폭이 약 1340 이라, 그 아래(원본도 겹친다)부터 연속으로 줄인다.
   왼쪽 쪽(로고 오른쪽 200 + 여백)은 이 식보다 느슨하다. 브레이크포인트가 아니라 연속값이다. */
@media screen and (min-width: 1024px) and (max-width: 1339px) {
	.depth1_ul > li { margin: 0 calc((100vw - 971px) / 10 - .5px) !important; }
}

/* ── 헤더·메뉴 — 1023 이하: 원본 모바일 구성 ──────────────────────────────────
   원본 모바일(m/inc/header.php·sitemap.php): 높이 50px, 왼쪽 가맹문의 아이콘 · 가운데 로고(87×32) ·
   오른쪽 사이트맵 버튼, 누르면 오른쪽에서 225px 패널이 밀려 나오고 뒤는 딤. 메뉴는 아코디언. */
@media screen and (max-width: 1023px) {
	/* 헤더 본체 — transform 이 있으면 그 안의 fixed 가 헤더 기준이 되어 패널이 50px 로 눌린다 */
	.header_wrap { height: 50px !important; transform: none !important; }
	.header { height: 50px; }
	.logo { z-index: 1 !important; left: 50% !important; top: 50% !important; width: 87px !important; height: 32px !important;
		margin: -16px 0 0 -43px !important; background-size: contain !important; background-position: center !important; }
	.sns_list, .h_inquiry { display: none !important; }

	.mo_inq { display: block; position: absolute; left: 0; top: 0; z-index: 1; width: 47px; height: 50px;
		background: url(/uploads/mig_site/img/common/m_hd_inq.png) no-repeat center / 47px 50px; font-size: 0; }
	/* 닫힌 상태는 원본 모바일의 아이콘 그림(윗줄이 짧고 오른쪽) — 열리면 그림을 걷고 세 줄을 X 로 돌린다 */
	.mo_menu_btn { display: block; position: absolute; top: 0; right: 0; z-index: 5;
		width: 50px; height: 50px; padding: 0; border: 0; cursor: pointer;
		background: url(/uploads/mig_site/img/common/m_stm_btn.png) no-repeat center / 50px 50px; }
	.mo_menu_btn i { opacity: 0; }
	body.mo_menu_on .mo_menu_btn { background: none; }
	body.mo_menu_on .mo_menu_btn i { opacity: 1; }
	.mo_menu_btn i { display: block; position: absolute; left: 13px; width: 24px; height: 2px;
		background: #265545; }
	.mo_menu_btn i:nth-child(1) { top: 16px; }
	.mo_menu_btn i:nth-child(2) { top: 24px; }
	.mo_menu_btn i:nth-child(3) { top: 32px; }
	body.mo_menu_on .mo_menu_btn i { background: #fff; }
	body.mo_menu_on .mo_menu_btn i:nth-child(1) { top: 24px; transform: rotate(45deg); }
	body.mo_menu_on .mo_menu_btn i:nth-child(2) { opacity: 0; }
	body.mo_menu_on .mo_menu_btn i:nth-child(3) { top: 24px; transform: rotate(-45deg); }

	#moDim { display: block; position: fixed; left: 0; top: 0; z-index: 3; width: 100%; height: 100%;
		background: rgba(0, 0, 0, .6); opacity: 0; visibility: hidden; }
	body.mo_menu_on #moDim { opacity: 1; visibility: visible; }
	body.mo_menu_on { overflow: hidden; }
	/* 전환은 햄버거로 열고 닫는 동안에만 건다 — 항상 걸어 두면 PC 폭에서 모바일 폭으로 넘어가는 순간 "화면 안 → 밖" 변화가
	   전환으로 재생되어 열려 있던 서랍이 닫히는 것처럼 보인다 */
	body.mo_anim .mo_menu_btn i { transition: all .25s; }
	body.mo_anim #moDim { transition: opacity .25s, visibility .25s; }
	body.mo_anim .depth1_ul { transition: transform .25s, visibility .25s; }

	/* 패널 — 오른쪽에서 밀려 나온다 */
	.depth1_ul { display: block !important; position: fixed !important; top: 0; right: 0; left: auto;
		z-index: 4; width: 225px !important; max-width: 82vw !important; height: 100%;
		margin: 0 !important; padding: 0 !important; overflow-y: auto; -webkit-overflow-scrolling: touch;
		background: #faf1e8; text-align: left !important;
		transform: translateX(100%); visibility: hidden; }
	body.mo_menu_on .depth1_ul { transform: none; visibility: visible; }
	/* 머리 — 원본 사이트맵 머리(stm_top_bnr.jpg)는 로고+번호가 한 장 그림이라 번호(7732)가 박혀 있다. 로고와 전화 아이콘만
	   잘라 쓰고 번호는 글자로 둔다(PC 와 같은 7792). 오른쪽 50px 는 닫기(X) 자리. */
	.depth1_ul > li.mo_head { display: block !important; background: #265545; }
	.mo_head a { display: flex; align-items: center; height: 50px; padding: 0; color: #fff; }
	.mo_head .mo_logo { flex: 0 0 98px; height: 50px; background: url(/uploads/mig_site/img/common/m_stm_logo.png) no-repeat 0 0 / 98px 50px; }
	.mo_head .mo_tel_ico { flex: 0 0 15px; height: 25px; margin-right: 3px; background: url(/uploads/mig_site/img/common/m_stm_tel_ico.png) no-repeat 0 0 / 15px 25px; }
	.mo_head strong { font-family: "IropkeBatangM", serif; font-size: 16px; font-weight: 400; letter-spacing: -.05em; color: #fff100; white-space: nowrap; }
	.mo_head em { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.depth1_ul > li { display: block !important; margin: 0 !important; position: relative; }
	.depth1_ul > li { background: url(/uploads/mig_site/img/common/m_stm_li_bg01.png) no-repeat 90% 19px / 4px 8px; }
	.depth1_ul > li.is-open { background: url(/uploads/mig_site/img/common/m_stm_li_bg02.png) no-repeat 91% 21px / 8px 4px; }
	.depth1_ul > li > a.depth1_a { display: block; height: 45px; line-height: 44px; padding: 0 0 0 25px !important;
		border-bottom: 1px solid #d0d2c8; font-size: 15px !important; letter-spacing: -.05em; text-align: left !important; color: #255243; }
	.depth1_ul > li > a.depth1_a:after { display: none !important; }
	.depth1_ul > li:hover > .depth1_a { color: #255243; }
	.depth2_ul { display: none !important; position: static !important; height: auto !important; width: 100% !important;
		padding: 10px 0 !important; background: #e3d9ce !important; border-bottom: 1px solid #d0d2c8; }
	.depth1_ul > li.is-open > .depth2_ul { display: block !important; }
	.depth2_li { display: block !important; margin: 0 !important; height: 29px !important; text-align: left !important; }
	.depth2_li:after { display: none !important; }
	.depth2_a { display: block; margin: 0 !important; padding: 0 0 0 25px; line-height: 29px; text-align: left !important;
		font-size: 11px !important; color: #666; }
	.depth2_li.on > .depth2_a { color: #ff521f; font-weight: 700; }
	/* 원본 모바일 메뉴에 없는 항목 — PC 메뉴에만 있다: 브랜드 아이덴티티 · 메뉴판 보기 · 정보공개서신청 · 인재채용 · 창업설명회 신청.
	   모바일은 원본 모바일 메뉴 구성을 따른다는 결정(REPORT §0). PC 에서는 그대로 열린다. 위치로 고른다 — 파일명이 바뀌어도 따라간다 */
	.depth1_li01 > .depth2_ul > .depth2_li:nth-child(5),
	.depth1_li02 > .depth2_ul > .depth2_li:nth-child(3),
	.depth1_li05 > .depth2_ul > .depth2_li:nth-child(2),
	.depth1_li05 > .depth2_ul > .depth2_li:nth-child(3),
	.depth1_li06 > .depth2_ul > .depth2_li:nth-child(5) { display: none !important; }
	.gnb_bg { display: none !important; }

	.container { padding-top: 50px !important; }
	.main_visual { padding-top: 50px !important; }
}

/* ── 수상 띠(.emblem) ──────────────────────────────────────────────────────────
   PC 는 헤더 아래 고정 띠다. 모바일은 원본처럼 히어로 바로 아래, 스크롤과 함께 움직이는 검은 띠(높이 27.5vw)에서
   모바일용 배지 그림(2929×177)이 왼쪽으로 쉼 없이 흐른다. 그림 폭 325vw 가 한 바퀴다(CSS 만, 모션 줄이기 존중). */
@media screen and (max-width: 1259px) { .emblem:hover { opacity: 1; } }
@media screen and (max-width: 1023px) {
	.emblem { position: absolute !important; left: 0 !important; transform: none !important; width: 100%; height: 27.5vw;
		top: calc(93.75vw + 50px) !important; overflow: hidden; background: #010101 url(/uploads/mig_site/img/main/m_emblem.png) repeat-x 0 3.8vw / 325vw auto;
		animation: emblem_flow 25s linear infinite; }
	.emblem img { display: none !important; }
}
@keyframes emblem_flow { to { background-position-x: -325vw; } }
@media (prefers-reduced-motion: reduce) { .emblem { animation: none !important; } }

/* ── 홈 팝업 ───────────────────────────────────────────────────────────────────
   홈 팝업 마크업은 렌더 스냅샷에 굳은 값이다 — 인라인 style 에 margin-left:-660px/190px, 이미지에
   width=800/500. 인라인은 !important 로만 이긴다. 1259 이하에서 화면 가운데에 쌓고 폭에 맞춘다
   (겹친 팝업은 위 것을 닫으면 아래 것이 나온다). 1023 이하는 원본 모바일처럼 아래에 큰 버튼 둘:
   '오늘 하루 닫기 | 닫기'. */
@media screen and (max-width: 1259px) {
	.popup_type02, .popup_type04 { position: fixed !important; left: 50% !important; top: 50% !important;
		margin: 0 !important; transform: translate(-50%, -50%); box-sizing: border-box;
		max-width: calc(100vw - 24px); max-height: calc(100vh - 24px); overflow: auto; -webkit-overflow-scrolling: touch; }
	.popup_type02 img, .popup_type04 img { display: block; max-width: 100%; height: auto !important; }
}
@media screen and (max-width: 1023px) {
	.popup_type02 { padding: 0 !important; border-radius: 14px; overflow: hidden; width: calc(100vw - 24px); max-width: 520px; }
	.popup_type02 > a, .popup_type02 > img { display: block; }
	.popup_type02 div.pop_footer { display: flex; height: auto !important; margin: 0 !important; background: #e9e4dc; }
	.popup_type02 div.pop_footer label, .popup_type02 div.pop_footer a.popup_x {
		display: block !important; flex: 1 1 50%; height: 52px !important; margin: 0 !important; padding: 0 !important;
		border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: none;
		font-size: 0 !important; line-height: 52px; text-align: center; color: #222; cursor: pointer; }
	.popup_type02 div.pop_footer label + a.popup_x { border-left: 1px solid #c8c2b8 !important; }
	.popup_type02 div.pop_footer label:after { content: "오늘 하루 닫기"; font-size: 16px; }
	.popup_type02 div.pop_footer a.popup_x:after { content: "닫기"; font-size: 16px; }
	.popup_type02 div.pop_footer .popcheck { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
}

/* ── 히어로 조작 ───────────────────────────────────────────────────────────────
   CONTENTS/SLOGAN 큰 흰 버튼(220×105 고정)은 원본 모바일에 없다 — 1023 이하에선 걷는다(B02).
   오른쪽 쪽 표시는 히어로 높이 안에 가둔다. */
@media screen and (max-width: 1023px) {
	/* 히어로 — PC 는 가로 슬라이더(영상·겹겹 모션, 1630×815 캔버스)이고 원본 모바일은 640×600 그림 6장이 위로 밀려 올라간다.
	   효과가 달라서 모바일 전용 영역(.mv_m)을 따로 두고 PC 슬라이더는 이 폭에서 숨긴다. */
	.scroll_btns { display: none !important; }
	.main_visual { height: calc(93.75vw + 50px) !important; min-height: 0 !important; margin-bottom: 27.5vw; }
	.main_visual > :not(.mv_m) { display: none !important; }
	.mv_m { display: block; position: relative; height: 93.75vw; overflow: hidden; background: #000; }
	.mv_m .mv_m_list { position: absolute; left: 0; top: 0; width: 100%; margin: 0; padding: 0; list-style: none;
		transition: transform 1s ease; }
	.mv_m .mv_m_list li { height: 93.75vw; }
	.mv_m .mv_m_list img { display: block; width: 100%; height: 100%; object-fit: cover; }
	.mv_m .mv_m_paging { position: absolute; top: 0; right: 0; display: table; width: 20px; height: 93.75vw; box-sizing: border-box;
		border-left: 1px solid rgba(255, 255, 255, .2); }
	.mv_m .mv_m_paging ul { display: table-cell; height: 100%; margin: 0; padding: 0; list-style: none; text-align: center; vertical-align: middle; }
	.mv_m .mv_m_paging li { display: inline-block; width: 20px; }
	.mv_m .mv_m_paging a { display: block; width: 100%; padding: 5px 0; font-family: "IropkeBatangM", serif; font-size: 12px;
		letter-spacing: -.05em; color: #959493; text-decoration: none; }
	.mv_m .mv_m_paging a img { display: none; width: 20px; height: auto; }
	.mv_m .mv_m_paging li.on a { border-left: 1px solid #9a7e55; }
	.mv_m .mv_m_paging li.on a span { display: none; }
	.mv_m .mv_m_paging li.on a img { display: block; }
	.mv_m .mv_m_next { position: absolute; right: 0; bottom: 0; width: 20px; height: 40px; padding: 0; border: 0; font-size: 0;
		background: url(/uploads/mig_site/img/common/m_mv_next.png) no-repeat center / 20px 40px; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .mv_m .mv_m_list { transition: none; } }
}

/* ── 홈 본문(슬라이더 해제·구성)은 css/pages/index-m.css ─────────────────────── */

/* ── 푸터 ──────────────────────────────────────────────────────────────────────
   원본 모바일: 가운데 정렬 · 링크 사이 가는 세로선 · SNS 원형 아이콘 4개 · 회사 정보 4줄. PC 푸터의 주소·저작권·블로그 배너는 접고
   같은 내용을 원본 모바일 구성(.ft_m)으로 보인다. PC 푸터는 그대로다. */
.ft_m { display: none; }
@media screen and (max-width: 1023px) {
	.footer { padding: 20px 16px 28px !important; text-align: center; }
	.policy { text-align: center !important; padding-bottom: 4px; }
	.policy li { margin-left: 20px !important; }
	.policy li:first-child { margin-left: 0 !important; }
	.policy li:after { left: -10px !important; }
	.policy li a { font-size: clamp(11px, 1.9vw, 14px) !important; color: #6f6f6f; }
	.policy li.em_txt a { color: #000; }
	.footer address, .footer .copy, .footer .ft_sns { display: none !important; }
	.ft_m { display: block; }
	.ft_m .ft_sns_m { margin: 0; padding: 8px 0; list-style: none; font-size: 0; }
	.ft_m .ft_sns_m li { display: inline-block; width: 20px; height: 20px; margin: 0 0 0 13px; }
	.ft_m .ft_sns_m li:first-child { margin-left: 0; }
	.ft_m .ft_sns_m a { display: block; width: 100%; height: 100%; background: no-repeat center / 20px 20px; font-size: 0; }
	.ft_m .ft_sns_m li:nth-child(1) a { background-image: url(/uploads/mig_site/img/common/m_ft_sns1.png); }
	.ft_m .ft_sns_m li:nth-child(2) a { background-image: url(/uploads/mig_site/img/common/m_ft_sns2.png); }
	.ft_m .ft_sns_m li:nth-child(3) a { background-image: url(/uploads/mig_site/img/common/m_ft_sns3.png); }
	.ft_m .ft_sns_m li:nth-child(4) a { background-image: url(/uploads/mig_site/img/common/m_ft_sns4.png); }
	.ft_m .ft_txt_m { margin: 0; color: #aeaeae; text-align: center; font-size: clamp(10px, 1.8vw, 13px); line-height: 1.5; letter-spacing: -.05em; }
}
/* ── 우측 하단 전화 버튼 · 가맹문의 패널 ───────────────────────────────────────────
   원본 모바일(btn_pop_inq·pop_inq): 50px 원형 전화 버튼이 숨쉬듯 커졌다 작아진다. 누르면 전체 화면 패널이 열리고 버튼은 X 가 된다. */
.btn_pop_inq, .pop_inq { display: none; }
@media screen and (max-width: 1023px) {
	.btn_pop_inq { display: block; position: fixed; right: 10px; bottom: 16px; z-index: 950; width: 50px; height: 50px; }
	.btn_pop_inq .circle-shape { display: block; position: relative; width: 100%; height: 100%; }
	.btn_pop_inq .circle-shape > span { position: absolute; left: 0; top: 0; z-index: 2; width: 100%; height: 100%; border-radius: 50%; transition: opacity .4s; }
	.btn_pop_inq .btn-opener { animation: btn_opener_ani 1s ease-in-out infinite alternate; }
	.btn_pop_inq .btn-opener img { display: block; width: 100%; height: 100%; border-radius: 50%; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
	.btn_pop_inq .btn-close { opacity: 0; border-radius: 50%; background: #bea07f; box-shadow: 0 0 0 2px rgba(255, 255, 255, .55) inset; }
	.btn_pop_inq .btn-close:before, .btn_pop_inq .btn-close:after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 2px; margin: -1px 0 0 -11px; background: #fff; transform: rotate(45deg); }
	.btn_pop_inq .btn-close:after { transform: rotate(-45deg); }
	/* 바가 있는 화면에서는 버튼이 바 위에 뜬다(bottom 은 responsive.js 가 바 높이로 정한다). 서랍이 열리면 접는다 */
	body.mo_menu_on .btn_pop_inq { visibility: hidden; }
	.btn_pop_inq.open .btn-opener { opacity: 0; animation: none; }
	.btn_pop_inq.open .btn-close { opacity: 1; }

	/* 원본은 번호(.pi_tel)를 패널 바닥에 절대 위치로 박아 화면이 내용보다 짧으면 내용 위에 겹친다 — 흐름 안에 두어
	   짧은 화면에서는 패널이 스크롤되고, 긴 화면에서는 번호가 바닥에 붙는다(원본과 같은 모습). */
	.pop_inq { display: flex; flex-direction: column; position: fixed; left: 0; top: 0; z-index: 900; width: 100%; height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; box-sizing: border-box;
		background: #8b7752 url(/uploads/mig_site/img/common/m_pop_bg.jpg) no-repeat center / cover;
		opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; }
	.pop_inq.on { opacity: 1; visibility: visible; }
	body.pop_inq_on { overflow: hidden; }
	.pop_inq .pi_inner { flex: 1 0 auto; width: 90.625%; max-width: 560px; margin: 0 auto; padding-bottom: 16px; }
	.pop_inq .pi_title { padding: 78px 0 40px; font-family: 'NotoSansKR-Thin', sans-serif; font-weight: 100; font-size: clamp(23px, 4.2vw, 34px); letter-spacing: -.03em; line-height: 2; color: #fff; }
	.pop_inq .pi_title em { font-family: 'NotoSansKR-Bold', sans-serif; font-weight: 700; font-style: normal; }
	.pop_inq .pi_title img { width: 125px; height: auto; margin: -7px 10px 0 0; vertical-align: middle; }
	.pop_inq fieldset { margin: 0; padding: 0; border: 0; }
	.pop_inq input[type="text"], .pop_inq select { display: block; width: 100%; height: 40px; padding: 0 15px; box-sizing: border-box; border: 0;
		border-bottom: 1px solid rgba(255, 255, 255, .5); border-radius: 0; background: none; font-family: 'NotoSansKR-Regular', sans-serif; font-size: 13px;
		letter-spacing: -.03em; line-height: 40px; color: #fff; outline: 0; }
	.pop_inq input::placeholder { color: #fff; opacity: 1; }
	.pop_inq select { -webkit-appearance: none; appearance: none; background: url(/uploads/mig_site/img/common/m_pop_arr.png) no-repeat 95% 50% / 12px auto; }
	.pop_inq select option { color: #222; }
	.pop_inq .pi_chk { display: flex; align-items: center; padding: 35px 0 16px 10px; }
	.pop_inq .pi_chk input { position: absolute; opacity: 0; width: 1px; height: 1px; }
	.pop_inq .pi_chk label { position: relative; padding-left: 26px; font-size: 13px; letter-spacing: -.03em; color: #fff; }
	.pop_inq .pi_chk label:before { content: ""; position: absolute; left: 0; top: -1px; width: 19px; height: 19px; background: url(/uploads/mig_site/img/common/m_pop_chk.png) no-repeat 0 0 / 19px auto; }
	.pop_inq .pi_chk input:checked + label:before { background-position: 0 -19px; }
	.pop_inq .pi_chk a { display: inline-block; width: 12px; margin-left: 6px; }
	.pop_inq .pi_chk a img { display: block; width: 12px; height: auto; }
	.pop_inq .pi_btn { width: 100%; height: 44px; border: 0; background: #c3a06d; font-family: 'NotoSansKR-Medium', sans-serif; font-size: 15px; letter-spacing: -.03em; color: #fff; cursor: pointer; }
	.pop_inq .pi_tel { flex: 0 0 auto; margin: 0; padding: 24px 80px 25px 4.6875%; z-index: 20; font-family: 'NotoSansKR-Bold', sans-serif; font-size: 18px; letter-spacing: -.05em; color: #e4d4c0; }
	.pop_inq .pi_tel em { font-style: normal; font-size: 20px; color: #fff; }
}
@keyframes btn_opener_ani { from { transform: scale(.8); } to { transform: scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .btn_pop_inq .btn-opener { animation: none !important; } }

/* ── 푸터 위 성공창업문의 바 ─────────────────────────────────────────────────────
   원본 모바일(bot_inquiry): 초록 바 — 1:1 성공창업문의 · 전화 · 개인정보 수집 동의, 아래 줄에 이름·연락처·보내기. */
.bot_inq_m { display: none; }
@media screen and (max-width: 1023px) {
	/* 원본(bot_inquiry): 화면 아래에 고정되어 있다가 푸터에 닿으면 푸터 위에서 같이 스크롤된다(원본은 스크립트로 fixed↔absolute 전환).
	   sticky 는 같은 동작이다 — 제자리(푸터 바로 위)가 화면 아래에 있으면 화면 아래에 붙고, 제자리가 보이면 제자리에 있다.
	   z-index 는 서랍(헤더 100)보다 낮게 둔다. */
	.bot_inq_m { display: block; position: sticky; bottom: 0; z-index: 90; margin-top: 40px; padding: 12px max(16px, 4%) 14px; box-sizing: border-box;
		background: #265545 url(/uploads/mig_site/img/common/m_bot_bg.jpg) no-repeat center / cover; }
	.bot_inq_m .bi_top { display: flex; align-items: center; gap: 8px; }
	.bot_inq_m .bi_t1 { font-family: 'IropkeBatangM', serif; font-size: clamp(12px, 2.1vw, 16px); letter-spacing: -.05em; color: #fff; white-space: nowrap; }
	.bot_inq_m .bi_t2 { font-family: 'Batang', '바탕', serif; font-size: clamp(16px, 2.8vw, 22px); letter-spacing: -.05em; color: #fff000; white-space: nowrap; }
	.bot_inq_m .bi_t2 img { width: clamp(13px, 2.2vw, 18px); height: auto; margin-right: 3px; vertical-align: 0; }
	.bot_inq_m .bi_chk { position: relative; margin-left: auto; }
	.bot_inq_m .bi_chk input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; }
	.bot_inq_m .bi_chk label { display: inline-block; padding-left: 18px; height: 13px; line-height: 13px; font-size: clamp(10px, 1.8vw, 13px); letter-spacing: -.05em; color: #fff; white-space: nowrap;
		background: url(/uploads/mig_site/img/common/m_bot_check.png) no-repeat 0 0 / 13px 26px; }
	.bot_inq_m .bi_chk input:checked + label { background-position: 0 -13px; }
	.bot_inq_m .bi_fs { display: flex; gap: 1.7%; margin: 8px 0 0; padding: 0; border: 0; }
	.bot_inq_m .bi_fs input { flex: 0 0 34.5%; min-width: 0; height: clamp(26px, 6.6vw, 40px); padding: 0 10px; border: 0; box-sizing: border-box;
		background: rgba(0, 0, 0, .3); font-size: clamp(11px, 1.9vw, 14px); letter-spacing: -.05em; color: #fff; }
	.bot_inq_m .bi_fs input::placeholder { color: #aeaeae; }
	.bot_inq_m .bi_fs button { flex: 1 1 0; height: clamp(26px, 6.6vw, 40px); border: 0; background: #fff; cursor: pointer;
		font-family: 'IropkeBatangM', serif; font-size: clamp(11px, 1.9vw, 14px); letter-spacing: -.05em; color: #265545; }
	.footer { margin-top: 0 !important; }
}

/* ── 서브 상단(비주얼·제목·서브메뉴 탭) · 서브 하단 ────────────────────────────────
   원본 모바일: 경로 바 없음. 비주얼(약 160px) 안에 소제목·제목·한 줄 설명이 가운데로, 양옆에 이전/다음 화살표(얇은 선),
   그 아래에 가로로 밀리는 서브메뉴 탭(현재 항목은 주황 글씨 + 밑줄). 화면 맨 아래 상담바·매장현황 띠는 없다.
   PC 마크업은 그대로 두고, 탭과 화살표만 responsive.js 가 현재 메뉴·이전/다음 링크로 만들어 끼운다. */
.lnb_m, .sub_arrow { display: none; }
@media screen and (max-width: 1023px) {
	.sub_top { position: relative; height: auto !important; overflow: hidden; }
	.path_wrap { display: none !important; }
	/* sub.js 가 비주얼을 3초 동안 투명→불투명·1.2배로 키운다 — 좁은 화면에서는 그 사이 제목 밑이 비었다 채워져 흔들린다. 고정 */
	.sub_visual { height: clamp(160px, 42vw, 300px) !important; background-size: cover !important;
		transform: none !important; opacity: 1 !important; }
	.sub_top .title_area { position: absolute !important; left: 0; top: 0 !important; width: 100%; height: clamp(160px, 42vw, 300px);
		display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 52px; box-sizing: border-box; }
	.sub_stitle { font-size: clamp(11px, 2vw, 16px) !important; letter-spacing: -.05em !important; color: #e4e0d8 !important; }
	.sub_title { padding-top: 8px !important; font-size: clamp(20px, 4.6vw, 36px) !important; line-height: 1.3; letter-spacing: -.05em !important; word-break: keep-all; }
	.sub_text { padding-top: 12px !important; font-size: clamp(12px, 2.2vw, 16px) !important; line-height: 1.5 !important; color: #fff !important; word-break: keep-all; }

	/* 이전/다음 화살표 — 얇은 선 */
	.sub_arrow { display: block; position: absolute; top: 50%; width: 38px; height: 14px; margin-top: -7px; font-size: 0; z-index: 2; }
	.sub_arrow:before, .sub_arrow:after { content: ""; position: absolute; bottom: 0; border-bottom: 1px solid #e4e0d8; }
	.sub_arrow:before { left: 0; width: 100%; }
	.sub_arrow:after { width: 15px; }
	.sub_arrow.sub_prev { left: 14px; }
	.sub_arrow.sub_prev:after { left: 0; transform-origin: 0 100%; transform: rotate(-32deg); }
	.sub_arrow.sub_next { right: 14px; }
	.sub_arrow.sub_next:after { right: 0; transform-origin: 100% 100%; transform: rotate(32deg); }

	/* 서브메뉴 탭 */
	.lnb_m { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none;
		border-bottom: 2px solid #b9a98c; }
	.lnb_m::-webkit-scrollbar { display: none; }
	.lnb_m ul { display: inline-flex; padding: 0 12px; margin: 0; list-style: none; }
	.lnb_m li a { display: block; margin-bottom: -2px; padding: 12px 10px 10px; border-bottom: 3px solid transparent;
		font-size: clamp(13px, 2.2vw, 16px); letter-spacing: -.05em; color: #666; }
	.lnb_m li.on a { border-bottom-color: #ff521f; color: #ff521f; font-weight: 700; }

	/* 서랍과 같은 규칙 — 원본 모바일 메뉴에 없는 항목은 탭에서도 뺀다 */
	.lnb_m li.g1.n5, .lnb_m li.g2.n3, .lnb_m li.g5.n2, .lnb_m li.g5.n3, .lnb_m li.g6.n5 { display: none; }

	/* 하단 — 이전/다음 띠·매장현황·영상·상담 배너 */
	.bottom_wrap { display: none !important; }
}

/* ── 서브 하단 3단(매장현황 슬라이더·영상·상담) ───────────────────────────────── */
@media screen and (max-width: 767px) {
	.bottom_cont .conts { float: none !important; width: 100% !important; margin: 12px 0 0 0 !important; }
	.bottom_cont .conts:first-child { margin-top: 0 !important; }
	.bottom_cont .cont01 .slider-container { width: 100% !important; }
}

/* ── 탭 막대(.tabmenu) — 창업/이벤트/인테리어/뉴스 등이 같이 쓴다 ─────────────────────
   PC 는 220×60 을 가로로 늘어놓는다. 좁으면 줄바꿈이 어긋나므로 한 줄에 균등 분할한다. */
@media screen and (max-width: 767px) {
	.tabmenu { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 24px; }
	.tabmenu > li { display: block; flex: 1 1 0; min-width: 0; width: auto; height: 46px; margin: 0; }
	.tabmenu > li:first-child { margin: 0; }
	.tabmenu > li > a { height: 46px; padding: 0 2px; font-size: 14px; line-height: 46px; letter-spacing: -.05em; }
}

/* ── 서브 공통 제목 ──────────────────────────────────────────────────────────── */
@media screen and (max-width: 767px) {
	.tit_wrap { padding: 40px 16px 24px; }
	.tit_wrap .tit { padding: 6px 0 18px; }
	.stit { font-size: 18px; }
	.tit { font-size: 30px; letter-spacing: -.06em; }
	.txt { font-size: 14px; }
}

/* 한글 제목·본문은 단어 단위로 줄바꿈한다("메/뉴" 처럼 한 글자가 윗줄에 매달리지 않게) */
@media screen and (max-width: 767px) {
	.tit, .stit, .txt { word-break: keep-all; }
}

/* 메뉴판(모바일) — 책 모양 모달은 916×698 고정이라 390px 에서 비례 축소하면 글씨(메뉴명·가격)가 읽히지 않는다(QA R05).
   좁은 화면에서는 쪽 이미지를 폭에 맞춰 세로로 넘겨 본다(responsive.js 가 만든다). 확대는 브라우저 확대로 된다. */
.bk_m { position: fixed; left: 0; top: 0; z-index: 1200; width: 100%; height: 100%; display: flex; flex-direction: column; background: #151515; }
.bk_m_bar { flex: 0 0 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 4px 0 16px; background: #000; color: #fff; font-size: 15px; letter-spacing: -.03em; }
.bk_m_x { position: relative; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.bk_m_x:before, .bk_m_x:after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 2px; margin: -1px 0 0 -11px; background: #fff; transform: rotate(45deg); }
.bk_m_x:after { transform: rotate(-45deg); }
.bk_m_pages { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px 8px 40px; text-align: center; }
.bk_m_pages img { display: block; width: 100%; max-width: 640px; height: auto; margin: 0 auto 8px; background: #fff; }
body.bk_m_on { overflow: hidden; }