/* ============================================================================
 * responsive.css — 모바일 오버라이드 레이어
 *
 * 이 파일은 header.php 에서 "마지막에" 로드된다. 그래서 여기 규칙이 최종 결정권을 갖는다.
 *
 * ────────────────────────────────────────────────────────────────────────────
 * 1. 브레이크포인트 — 이 셋만 쓴다. 새 값을 만들지 않는다.
 * ────────────────────────────────────────────────────────────────────────────
 *
 *   @media (max-width: 767px)    모바일        — 타이포·1단 배치·터치
 *   @media (max-width:  989px)   드로어 경계   — GNB 가 햄버거로 바뀌는 지점
 *   @media (max-width: 1231px)   태블릿        — 컨테이너 폭·그리드 열 수
 *
 *   (예외) max-width: 480px — 소형 단말 그리드 조정 3곳. 새로 추가하지 말 것.
 *
 *   왜 767 인가: 768 은 태블릿 세로 폭이라 경계에 걸친다. 실제로 767/768 이
 *   섞여 있던 시절, 768px 정확히 한 지점에서 히어로가 56px→90px 로 튀면서
 *   메뉴만 드로어로 남는 틈이 있었다. 767 로 통일해 없앴다.
 *
 * ────────────────────────────────────────────────────────────────────────────
 * 2. 모바일에서 다르게 보여야 할 때 — 아래 순서로 내려간다
 * ────────────────────────────────────────────────────────────────────────────
 *
 *   L1  크기·간격이 다르다        clamp()          브레이크포인트 없이 연속 변화
 *                                                  예) font-size: clamp(24px, 4vw + 12px, 32px)
 *
 *   L2  배치가 다르다             미디어쿼리        마크업은 건드리지 않는다
 *                                                  예) 2단 → 1단, float 해제
 *
 *   L3  노출 여부가 다르다        .only-m / .only-d / .sr-only
 *                                 데이터가 있으면 .sr-only (스크린리더 보존)
 *                                 순수 장식이면 display:none
 *
 *   L3-a 같은 데이터, 다른 표기   data-* + content: attr()
 *                                 마크업을 늘리지 않는다. 나중에 카드형 표로 갈 때
 *                                 같은 속성을 data-label 로 재사용할 수 있다.
 *                                 예) <td data-d="2023-04-18">2023-04-18 14:45:25</td>
 *
 *   L4  구조 자체가 다르다        중복 마크업 + 토글 — 최후 수단
 *                                 예) 가로 GNB vs 드로어. 남발하면 수정이 두 배가 된다.
 *
 *   금지: User-Agent 판별로 레이아웃을 가르지 않는다.
 *         기기 종류가 아니라 화면 폭이 기준이어야 한다.
 *         (_controller/index.php 의 $check_mobile 은 레거시. 신규 사용 금지)
 *
 * ────────────────────────────────────────────────────────────────────────────
 * 3. !important 에 대하여
 * ────────────────────────────────────────────────────────────────────────────
 *
 *   이 파일이 마지막에 로드되므로 원칙적으로는 필요 없다. 그런데도 500회 넘게 쓰인 건
 *   style.css 의 셀렉터가 더 구체적이기 때문이다(예: .header .hgroup .menu li a).
 *   당장은 실용적 타협으로 유지하되, 새 규칙을 쓸 때는
 *   "특이도를 맞춰서 이길 수 있는가"를 먼저 보고 안 되면 그때 붙인다.
 *
 * ────────────────────────────────────────────────────────────────────────────
 * 4. 작성 규칙
 * ────────────────────────────────────────────────────────────────────────────
 *
 *   - 블록마다 번호와 "왜" 를 남긴다. 무엇을 했는지는 코드가 말한다.
 *   - 실측값을 적는다. "잘린다" 가 아니라 "320px 에서 118px 잘린다".
 *   - 빗나간 시도도 남긴다. 같은 실수를 반복하지 않으려고.
 * ========================================================================== */


/* ============================================================================
 * 1) 타입 토큰 — 여기 한 줄만 바꾸면 전 페이지가 따라온다
 *
 *     아래 규칙들은 전부 이 변수를 참조한다. 크기를 조정하려면 개별 셀렉터를
 *     찾아다니지 말고 이 블록의 값만 고칠 것.
 *
 *     기준은 14px 밀도형이다. 인테리어 스튜디오라는 성격상 오밀조밀한 밀도를
 *     의도적으로 택했고, 루트(html) font-size 14px 도 그대로 둔다.
 *     그래서 rem 은 사용자 글꼴 설정을 따라가지 못한다 — px 로 적는다.
 *
 *     굵기는 크기와 짝이다. 작은 크기의 한글은 큰 크기 대비 획 두께가 더 필요하다
 *     (박재홍 2020, Noto Sans Korean). 크기를 내리면 굵기를 올려야 한다.
 * ========================================================================== */
:root {
	/* ── 크기 (모바일 기준. 데스크톱은 --d- 접두) ────────────────────────── */
	--fs-display:    clamp(40px, 12vw + 2px, 56px);  /* 히어로. 페이지당 1개 */
	--fs-headline:   clamp(34px, 11vw - 1px, 48px);  /* 섹션 제목 h3.st / h3.mt */
	--fs-title:      18px;   /* 카드 그룹 헤더 */
	--fs-subtitle:   16px;   /* 카드 제목, 히어로 부제 */
	--fs-body:       14px;   /* 본문 ← 기준값 */
	--fs-small:      13px;   /* 보조 정보, 목록 메타 */
	--fs-caption:    12px;   /* 캡션 한 줄. 하한 */
	--fs-form:       16px;   /* 텍스트 입력 — iOS 확대 방지. 내리지 말 것 */
	--fs-nav:        18px;   /* 드로어 메뉴 항목. 헤딩처럼 서야 하지만 --fs-headline(34~)은 과하다 */
	--fs-metric:     26px;   /* 인포그래픽 수치(WHO WE ARE 원 안 숫자).
	                            18~34 사이가 비는데 데이터 표시는 그 구간이 제자리다.
	                            원 지름 120px 기준 "100" 이 47px — 안쪽에 충분히 앉는다. */

	/* ── 굵기 ─────────────────────────────────────────────────────────── */
	--fw-display:    700;
	--fw-headline:   700;
	--fw-strong:     500;   /* 18px 이상 강조 */
	--fw-body:       400;   /* 본문 하한. Light(300) 금지 */
	--fw-small:      500;   /* 13px 이하는 굵기로 벌충 */

	/* ── 행간 ─────────────────────────────────────────────────────────── */
	--lh-display:    1.15;
	--lh-headline:   1.22;
	--lh-title:      1.35;
	--lh-body:       1.6;    /* 한글 기준. WCAG 1.4.12 하한(1.5) 위 */
	--lh-label:      1.45;

	/* ── 여백(모바일) ─────────────────────────────────────────────────
	   근접성: 타이틀은 "위 콘텐츠의 끝"이 아니라 "아래 콘텐츠의 머리"다.
	   그래서 타이틀 위 여백 > 아래 여백 이어야 시선이 아래로 이어진다.
	   위 여백은 섹션 진입 여백(100px~)이 만들므로 여기서 정하는 건 아래쪽뿐. */
	--sp-section:       64px;   /* 섹션 상하 패딩. 데스크톱 100px 을 그대로 쓰면
	                               폭이 1/3 인 화면에서 세로만 길어진다. */
	--sp-title-lead:     0px;   /* 타이틀 → 리드 문장. 둘은 한 덩어리다.
	                               0 이어도 눈에는 12.8px 로 보인다 — 41.9px 대문자
	                               타이틀의 행간·디센더 여유(2.2px)와 리드 위 여유
	                               (10.6px)가 박스 안에 이미 들어 있다.
	                               8px 일 때 실측 잉크 간격이 20.8px 이었다. */
	--sp-title-content: 36px;   /* 타이틀 블록 → 섹션 본문. ← 이 한 줄이 전 페이지 */
}


/* ============================================================================
 * 0) 반응형 유틸리티 — L3 에서 쓴다
 * ========================================================================== */

/* 모바일에서만 보임 */
.only-m { display: none !important; }
@media screen and (max-width: 767px) {
	.only-m { display: block !important; }
	.only-m.inline { display: inline !important; }
	.only-m.flex   { display: flex !important; }
}

/* 데스크톱에서만 보임 */
@media screen and (max-width: 767px) {
	.only-d { display: none !important; }
}

/* 시각적으로만 감춤 — 스크린리더에는 남는다.
   데이터가 있는 요소를 모바일에서 접을 때 display:none 대신 이걸 쓴다. */
.sr-only {
	position: absolute !important;
	width: 1px !important; height: 1px !important;
	padding: 0 !important; margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}


@charset "utf-8";
/* ============================================================================
 * responsive.css — 모바일 대응 오버라이드
 *
 * 배경
 *   이 사이트의 기존 CSS 에는 미디어쿼리가 단 한 건도 없다(전 파일 0건).
 *   대신 header.php 에 width=1200px 뷰포트 메타가 있어서, 물리 화면이 375px 여도
 *   1200px 데스크톱 레이아웃을 그린 뒤 통째로 축소해 보여주고 있었다.
 *   그 메타를 제거하면 레이아웃이 그대로 375px 뷰포트로 쏟아져 나온다(가로 오버플로 825px).
 *
 * 방침
 *   기존 CSS 파일은 건드리지 않는다. 마지막에 로드되는 이 파일에서만 오버라이드한다.
 *   되돌리려면 header.php 의 link 한 줄만 빼면 된다.
 *   데스크톱(>=1232px)은 미디어쿼리 밖이므로 기존 레이아웃이 그대로 유지된다.
 *
 * 구조
 *   1) 공통 안전장치
 *   2) <=1231px : 고정 1200px 컨테이너 유동화
 *   3) <=1024px : 태블릿
 *   4) <=768px  : 모바일 — 다단 -> 단일 컬럼
 *   5) <=480px  : 소형 모바일
 * ========================================================================== */

/* ---------------------------------------------------------------- 1) 공통 */
html { -webkit-text-size-adjust: 100%; }

img, video, iframe, embed, object {
	max-width: 100%;
}
img { height: auto; }

/* 가로 스크롤 유발 방지
 *
 * html 에는 걸지 않는다. iOS Safari 는 루트 요소에 overflow-x:hidden 이 있으면
 * 문서의 스크롤 가능 높이를 잘못 계산해, 페이지 맨 아래 100~150px 을
 * 스크롤로 닿을 수 없게 만드는 일이 있다(푸터 아랫부분이 잘려 보인다).
 * body 한쪽만으로도 가로 스크롤은 동일하게 막힌다.
 *
 * overflow-x:hidden 은 overflow-y 를 auto 로 만들어 body 를 스크롤 컨테이너로
 * 바꾼다. 그래서 clip 을 먼저 주고(스크롤 컨테이너를 만들지 않는다)
 * 미지원 브라우저용으로 hidden 을 뒤에 남긴다 — 순서를 바꾸면 안 된다. */
body {
	overflow-x: hidden;   /* 구형 폴백 */
	overflow-x: clip;     /* 지원 시 이쪽이 이긴다 */
}


/* ------------------------------------------- 2) <=1231px 컨테이너 유동화 */
/* 1200(콘텐츠) + 16*2(여백) = 1232 부터는 기존 그대로 둔다 */
@media screen and (max-width: 1231px) {

	/* .ma 가 이 사이트의 컨테이너 관용구다: .ma { width:1200px; margin:0 auto } */
	.ma,
	.header .hgroup .hbox,
	.search-layer .search-wrap .layout,
	.search,
	.portfolio_tab,
	.bbs_foot_list {
		width: 100% !important;
		max-width: 1200px;
		margin-left: auto;
		margin-right: auto;
		padding-left: 16px;
		padding-right: 16px;
		box-sizing: border-box;
	}

	/* 그 밖의 큰 고정폭들 */
	[style*="width:1200px"],
	[style*="width: 1200px"] {
		width: 100% !important;
		max-width: 1200px;
		box-sizing: border-box;
	}
}


/* --------------------------------------------------------- 3) <=1024px */
@media screen and (max-width: 1231px) {
	.ma { padding-left: 20px; padding-right: 20px; }

	/* 2단 그리드는 유지하되 높이 고정 해제 */
	.monly_list li { height: auto; padding-bottom: 30px; }
}


/* ---------------------------------------------------------- 4) <=768px */
@media screen and (max-width: 767px) {

	/* 다단 리스트 -> 1컬럼 */
	.monly_list li,
	.mourworks_list.grid > ul > li,
	.mourworks_list > ul > li {
		width: 100% !important;
		float: none !important;
		height: auto !important;
		display: block;
	}

	/* 섹션 여백 축소 */
	.ma { padding-left: 16px; padding-right: 16px; }

	/* 표는 가로 스크롤 컨테이너로 */
	table { width: 100% !important; }

	/* 터치 타깃 최소 크기 — 아이콘 버튼(.search-button 19x19 등)은 제외한다 */
	.bbs_ltype td a,
	.bbs_list a,
	nav.menu li a {
		min-height: 44px;
	}

	/* 폼 요소 폭 */
	input[type="text"], input[type="tel"], input[type="email"],
	input[type="password"], select, textarea {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
		font-size: 16px;	/* iOS 에서 16px 미만이면 포커스 시 자동 확대된다 */
	}
}


/* ---------------------------------------------------------- 5) <=480px */
@media screen and (max-width: 480px) {
	.ma { padding-left: 12px; padding-right: 12px; }

}


/* ============================================================================
 * 6) 헤더 / 내비게이션
 *    nav.header 가 position:fixed + width:auto 라 콘텐츠(가로메뉴 542px)에 맞춰
 *    늘어나면서 375px 화면을 밀어냈다. 폭을 명시하고, 모바일에서는 햄버거로 전환한다.
 *    (모바일 메뉴 마크업이 원래 없어서 mobile-nav.js 가 토글 버튼만 주입한다)
 * ========================================================================== */

/* 데스크톱에서는 토글 버튼을 숨긴다 */
.yg-navtoggle { display: none; }

@media screen and (max-width: 1231px) {
	nav.header,
	.header .hgroup {
		width: 100% !important;
		left: 0;
		right: 0;
		box-sizing: border-box;
	}
}

@media screen and (max-width: 767px) {

	.header .hgroup .hbox {
		height: auto !important;
		padding: 12px 16px !important;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.header .hgroup .hbox .logo { float: none !important; margin: 0; }
	.header .hgroup .hbox .logo img { height: 34px; width: auto; }

	/* 검색 버튼은 햄버거 왼쪽으로.
	   static 을 유지한다 — relative 로 바꾸면 style.css:87 의 top:36px 이
	   오프셋으로 되살아나 버튼이 헤더 아래로 밀린다.
	   대신 상자를 44px 로 키워 탭 영역을 확보한다(아이콘은 19px 그대로). */
	.header .hgroup .search-button {
		position: static !important;
		margin-left: auto;
		margin-right: 2px;
	}
	.header .hgroup .search-button:before { display: none; }

	/* --- 햄버거 버튼 --- */
	.yg-navtoggle {
		display: block;
		width: 24px;                    /* 30 → 24 : 정사각 */
		height: 24px;
		padding: 0;
		border: 0;
		background: none;
		position: relative;
		cursor: pointer;
		flex: 0 0 auto;
	}
	.yg-navtoggle span {
		display: block;
		position: absolute;
		left: 0;
		width: 100%;
		height: 2px;
		background: #241A17;
		transition: transform .25s ease, opacity .2s ease, top .25s ease;
	}
	/* 상자는 24px 이지만 손가락이 닿는 면적은 44px 로 넓힌다 (WCAG 2.5.5) */
	.yg-navtoggle::after {
		content: "";
		position: absolute;
		top: 50%; left: 50%;
		width: 44px; height: 44px;
		transform: translate(-50%, -50%);
	}
	.yg-navtoggle span:nth-child(1) { top: 2px; }
	.yg-navtoggle span:nth-child(2) { top: 11px; }
	.yg-navtoggle span:nth-child(3) { top: 20px; }

	.yg-navtoggle.is-open span:nth-child(1) { top: 11px; transform: rotate(45deg); }
	.yg-navtoggle.is-open span:nth-child(2) { opacity: 0; }
	.yg-navtoggle.is-open span:nth-child(3) { top: 11px; transform: rotate(-45deg); }

	/* --- 메뉴 --- */
	.header nav.menu {
		position: static !important;
		width: 100% !important;
		height: auto !important;
		display: none;
		order: 3;
		flex-basis: 100%;
		margin-top: 10px;
		border-top: 1px solid #eee;
	}
	.header nav.menu.is-open { display: block; }

	.header nav.menu ul { width: 100% !important; height: auto !important; }

	.header nav.menu li {
		display: block !important;
		width: 100% !important;
		float: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	.header nav.menu li a {
		display: block;
		width: auto;
		padding: 14px 2px;
		border-bottom: 1px solid #f0f0f0;
		font-size: 16px;
		line-height: 1.3;
	}

	/* 메뉴가 열려 있는 동안 배경 스크롤 방지 */
	body.yg-nav-open { overflow: hidden; }
}


/* ============================================================================
 * 7) 견적 신청 폼 (#request_sec)
 *    .mform_list 가 width:615px 고정이라 375px 에서 넘친다.
 * ========================================================================== */
@media screen and (max-width: 1231px) {
	.mform_list {
		width: 100% !important;
		max-width: 615px;
		box-sizing: border-box;
	}
}

@media screen and (max-width: 767px) {
	.mform_list { padding-left: 0; padding-right: 0; }
	.mform_list .mfrom_text .text03 { width: 100% !important; max-width: 290px; box-sizing: border-box; }

	.mform_list dl { width: 100% !important; }
	.mform_list dt,
	.mform_list dd { width: 100% !important; float: none !important; box-sizing: border-box; }

	/* 라디오/체크박스 줄바꿈 */
	.mform_list ul li { display: block; width: 100%; float: none; }
}


/* ============================================================================
 * 8) 잔여 고정폭 정리 (실측으로 찾은 것들)
 *    가로 오버플로가 남아 있으면 position:fixed 헤더의 100% 가 뷰포트가 아니라
 *    문서 스크롤 폭에 맞춰 계산된다. 오버플로를 없애야 헤더도 함께 정상화된다.
 * ========================================================================== */
@media screen and (max-width: 767px) {

	/* 메뉴는 햄버거로 대체. 테마 스크립트가 인라인 display 를 넣는 경우가 있어 !important */
	.header nav.menu { display: none !important; }
	.header nav.menu.is-open { display: block !important; }

	/* 메인 비주얼 카피 (style.css .carousel-content/.carousel-contentm width:600px) */
	.carousel-content,
	.carousel-contentm,
	.carousel-contentm .visual_text,
	.carousel-contentm .visual_subtext {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
		padding-left: 16px;
		padding-right: 16px;
	}
	.carousel-contentm .visual_text    { font-size: 30px !important; }
	.carousel-contentm .visual_subtext { font-size: 64px !important; margin-top: 0 !important; }

	/* 견적폼 입력창 (style.css .mform_list .inupt_type width:600px) */
	.mform_list .inupt_type,
	.mform_list .on dd .inupt_type {
		width: 100% !important;
		box-sizing: border-box;
	}

	/* 회사소개 (sub.css .philosophy .boxfirst width:600px !important) */
	.philosophy .boxfirst {
		width: 100% !important;
		height: auto !important;
	}

	/* jQuery UI 인라인 데이트피커 */
	.ui-datepicker,
	.ui-datepicker-inline,
	.hasDatepicker {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}
	.ui-datepicker table { width: 100% !important; }

	/* 이미지 폭 속성이 붙어 있어도 넘치지 않게 */
	img[width] { width: auto !important; max-width: 100% !important; }
}


/* ============================================================================
 * 9) 파트너 블록 / 서브 리스트
 *    style.css .mservice .partner {width:429px;height:483px;background:url(...)}
 *    배경 이미지 기반 고정 박스라 폭·높이를 함께 풀어야 한다.
 * ========================================================================== */
@media screen and (max-width: 767px) {
	.mservice .partner {
		width: 100% !important;
		max-width: 429px;
		height: auto !important;
		min-height: 320px;
		margin: 0 auto 20px !important;
		float: none !important;
		background-size: contain !important;
		background-position: center top !important;
		box-sizing: border-box;
	}

	.yegacp_list .list01,
	.yegacp_list .list02 {
		width: 100% !important;
		float: none !important;
		text-align: center !important;
	}
}


/* ============================================================================
 * 10) 고정 헤더 폭 되먹임 차단
 *     nav.header 는 position:fixed 인데, 문서에 가로 오버플로가 남아 있으면
 *     width:100% 가 뷰포트가 아니라 문서 스크롤 폭에 맞춰 계산되어
 *     "헤더가 넓어짐 -> 문서가 넓어짐" 되먹임이 생긴다.
 *     뷰포트 기준(100vw)으로 못박아 고리를 끊는다.
 * ========================================================================== */
@media screen and (max-width: 1231px) {
	/* position:fixed + width:100% 는 이 문서에서 404px 로 계산된다(ICB 가 문서 스크롤 폭을 따름).
	   100vw 는 375px 로 정확히 나오므로 뷰포트 단위를 쓴다. */
	nav.header {
		width: 100vw !important;
		max-width: 100vw !important;
		left: 0 !important;
		right: auto !important;
		overflow-x: hidden;
		box-sizing: border-box;
	}
	/* .hgroup 도 position:fixed 라 100% 가 문서 스크롤 폭에 물린다. 뷰포트 기준으로 고정. */
	.header .hgroup {
		width: 100vw !important;
		max-width: 100vw !important;
		left: 0 !important;
		right: auto !important;
		box-sizing: border-box;
	}
	.header .hgroup .hbox {
		max-width: 100% !important;
		box-sizing: border-box;
	}
}


/* ============================================================================
 * 11) 마지막 잔여 오버플로 (실측)
 * ========================================================================== */
@media screen and (max-width: 767px) {

	/* 메인 비주얼 카피는 position:absolute 라 padding 이 아니라 left/right 로 가둔다 */
	.carousel-contentm .visual_text,
	.carousel-contentm .visual_subtext {
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		padding-left: 16px !important;
		padding-right: 16px !important;
		box-sizing: border-box;
	}

	/* CONTACT US 지점 목록 */
	.mservice .list01,
	li.list01 {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		padding-left: 0 !important;
		float: none !important;
		box-sizing: border-box;
	}
	.list_title, .list_text { width: 100% !important; box-sizing: border-box; word-break: keep-all; }
}


/* ============================================================================
 * 12) 서브 페이지
 * ========================================================================== */
@media screen and (max-width: 767px) {

	/* --- 포트폴리오 상세 (sub.css .pf_content_left 780px / .pf_content_right 378px) --- */
	.pf_content_left,
	.pf_content_left .img_layout,
	.pf_content_right {
		width: 100% !important;
		float: none !important;
		margin-right: 0 !important;
		box-sizing: border-box;
	}
	.pf_content_right { display: block !important; margin-top: 20px; }

	/* --- 게시판 목록 표 ---
	   번호/제목/작성자/조회/작성일 5컬럼은 375px 에 들어가지 않는다.
	   제목과 작성일만 남기고 나머지는 숨긴다. */
	.bbs_ltype { width: 100% !important; table-layout: fixed; }
	.bbs_ltype th, .bbs_ltype td { padding: 12px 6px !important; font-size: 13px !important; }

	.bbs_ltype th:nth-child(1), .bbs_ltype td:nth-child(1),   /* 번호 */
	.bbs_ltype th:nth-child(3), .bbs_ltype td:nth-child(3),   /* 작성자 */
	.bbs_ltype th:nth-child(4), .bbs_ltype td:nth-child(4) {  /* 조회 */
		display: none;
	}
	.bbs_ltype th:nth-child(2), .bbs_ltype td:nth-child(2) {  /* 제목 */
		width: auto;
		text-align: left;
		word-break: break-all;
	}
	.bbs_ltype th:nth-child(5), .bbs_ltype td:nth-child(5) {  /* 작성일 */
		width: 84px;
		white-space: nowrap;
	}

	/* 상세 보기 표(.bbs_vtype)는 스크롤 대신 폭만 맞춘다 */
	.bbs_vtype { width: 100% !important; table-layout: fixed; }
	.bbs_vtype th, .bbs_vtype td { word-break: break-all; }

	/* 그래도 넘치는 표는 가로 스크롤 허용 */
	.bbs_foot_list { overflow-x: auto; -webkit-overflow-scrolling: touch; }

	/* --- 회사소개 페이지의 넓은 요소 --- */
	svg { max-width: 100%; height: auto; }
	.philosophy, .yegacp_list, .history_list { width: 100% !important; box-sizing: border-box; }
}


/* ============================================================================
 * 13) 최종 보정 (실측 반영)
 * ========================================================================== */
@media screen and (max-width: 767px) {

	/* 콘텐츠 이미지만 유동화 (아이콘/스프라이트는 건드리지 않는다) */
	.sub_content img,
	.bbs_gallery img,
	.mourworks_list img,
	.pf_content_left img,
	.board_view img,
	td img { max-width: 100% !important; height: auto !important; }

	.sub_content img,
	.sub_content .img_area,
	.sub_content [class*="_img"] {
		width: auto !important;
		max-width: 100% !important;
		height: auto !important;
	}

	/* 게시판 목록 표: 남은 오버플로 제거 */
	.bbs_ltype { table-layout: fixed; width: 100% !important; }
	.bbs_ltype th, .bbs_ltype td { padding: 12px 4px !important; font-size: 13px !important; }
	.bbs_ltype th:nth-child(5), .bbs_ltype td:nth-child(5) { width: 74px; font-size: 12px !important; }
	.bbs_ltype td:nth-child(2) a { display: inline; word-break: break-all; }

	/* 표를 감싸는 영역이 넘치면 가로 스크롤 */
	.bbs_list, .bbs_wrap, .board_list { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}


/* ============================================================================
 * 14) 회사소개 / 게시글 보기 고정폭 (sub.css 실측)
 * ========================================================================== */
@media screen and (max-width: 1231px) {
	.philosophy .firstlist { width: 100% !important; max-width: 610px; min-height: 0 !important; float: none !important; margin: 0 auto !important; box-sizing: border-box; }
	.philosophy .boxfirst  { width: 100% !important; max-width: 600px; height: auto !important; box-sizing: border-box; }
	.board_view .viewlayout { width: 100% !important; max-width: 940px; box-sizing: border-box; }
	.portfolio_view .pf_content_left,
	.portfolio_view .pf_content_left .img_layout { width: 100% !important; float: none !important; margin-right: 0 !important; box-sizing: border-box; }
}

@media screen and (max-width: 767px) {
	#project .pjlist .pjimg { width: 100% !important; height: auto !important; min-height: 190px; }
}


/* ============================================================================
 * 15) 다음(카카오) 로드맵 위젯
 *     .root_daum_roughmap 이 1920px 고정으로 렌더된다(위젯 자체 설정).
 *     컨테이너를 100% 로 묶고 넘치는 부분은 잘라낸다.
 *     ※ 2단계에서 카카오맵 v2 로 교체하면 이 보정이 불필요해진다.
 * ========================================================================== */
@media screen and (max-width: 1231px) {
	.map_area { overflow: hidden; width: 100%; }

	.root_daum_roughmap,
	.root_daum_roughmap .wrap_map,
	.root_daum_roughmap .map {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}
	.root_daum_roughmap .wrap_map { overflow: hidden; }
}

/* ============================================================================
 * 16) 게시판 표 / 리스트 잔여 오버플로
 * ========================================================================== */
@media screen and (max-width: 767px) {
	.bbs_ltype td, .bbs_ltype th { white-space: normal !important; word-break: break-all; }
	.bbs_ltype td:nth-child(5), .bbs_ltype th:nth-child(5) { white-space: nowrap !important; }

	/* 갤러리형 목록의 li 고정폭 */
	.gallery_list li, .bbs_gallery li, .list_gallery li,
	.sub_content ul > li[style*="width"] {
		width: 100% !important;
		max-width: 100% !important;
		float: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		box-sizing: border-box;
	}
}


/* ============================================================================
 * 17) 최종 잔여 3건 (실측으로 원인 특정)
 * ========================================================================== */
@media screen and (max-width: 767px) {

	/* (1) 게시판 목록 표
	   th/td 를 display:none 해도 마크업의 <colgroup><col style="width:60px"> 가
	   table-layout:fixed 에서 그대로 폭을 잡는다. col 폭을 풀어야 한다. */
	.bbs_ltype colgroup col { width: auto !important; }
	.bbs_ltype tbody td .short { max-width: 100% !important; white-space: normal !important; }

	/* (2) 갤러리 스킨 썸네일 (board.css .bbs_gallery ul li a {width:315px;height:300px}) */
	.bbs_gallery ul li { width: 100% !important; float: none !important; margin-left: 0 !important; margin-right: 0 !important; }
	.bbs_gallery ul li a {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		min-height: 220px;
		box-sizing: border-box;
	}

	/* (3) 회사소개 캐릭터 블록 (.list01/.list02 안의 p 가 280px 고정) */
	.list01, .list02 {
		width: 100% !important;
		background-position: center top !important;
		box-sizing: border-box;
	}
	.list01 p, .list02 p,
	.monly .list03 p, .monly .list04 p {
		width: 100% !important;
		float: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		text-align: center !important;
		box-sizing: border-box;
	}
}


/* ============================================================================
 * 18) 최종 2건 (조상 체인 실측으로 특정)
 * ========================================================================== */
@media screen and (max-width: 767px) {

	/* (1) 회사소개 .yegacp_list 2단 배치 — .list02 가 margin-left:356px 로 밀려 있다 */
	.yegacp_list .list01,
	.yegacp_list .list02,
	.yegacp_list > div {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		float: none !important;
		box-sizing: border-box;
	}
	.yegacp_list { width: 100% !important; box-sizing: border-box; }

	/* (2) 게시판 갤러리 탭 목록 — div.pftab > ul > li 가 258px float:left 2단 */
	.pftab > ul > li,
	.pftab ul li {
		width: 100% !important;
		max-width: 100% !important;
		float: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		box-sizing: border-box;
	}
	.pftab > ul > li > a { width: 100% !important; max-width: 100% !important; box-sizing: border-box; }
}


/* ============================================================================
 * 19) 메인 히어로 (#mslide)
 *
 *   구조: #mslide {height:960px; background:#252525}
 *           └ .carousel > video#video
 *           └ .carousel-contentm > .visual_text   {position:absolute; top:420px; width:600px; 47px}
 *                                > .visual_subtext{position:absolute; top:470px; width:600px; 172px}
 *
 *   문제: 모바일에서 영상은 375x211 로만 잡히는데 섹션은 960px 그대로라
 *         아래로 745px 짙은 회색(#252525)이 남고, top:420px 인 문구가 그 위로 떨어졌다.
 *   해결: 섹션 높이를 뷰포트 기준으로 잡고, 영상이 그 영역을 채우게(object-fit:cover) 한 뒤
 *         문구를 영상 위에 겹쳐 배치한다.
 * ========================================================================== */
@media screen and (max-width: 767px) {

	#mslide {
		height: 78vh !important;
		min-height: 440px;
		max-height: 720px;
	}

	#mslide .carousel,
	#mslide .carousel-inner,
	#mslide .item {
		height: 100% !important;
	}

	#mslide video,
	#mslide #video,
	#mslide .item img {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover;
		object-position: center;
		display: block;
	}

	/* 문구를 영상 위에 겹친다 */
	#mslide .carousel-contentm,
	#mslide .carousel-content {
		position: absolute !important;
		left: 0; right: 0; top: 0; bottom: 0;
		width: 100% !important;
		height: 100% !important;
		padding: 0 !important;
		pointer-events: none;
	}

	#mslide .carousel-contentm .visual_text {
		position: absolute !important;
		top: auto !important;
		bottom: 46% !important;
		left: 0 !important; right: 0 !important;
		width: 100% !important;
		padding: 0 16px !important;
		font-size: 20px !important;
		line-height: 1.4;
	}

	#mslide .carousel-contentm .visual_subtext {
		position: absolute !important;
		top: auto !important;
		bottom: 22% !important;
		left: 0 !important; right: 0 !important;
		width: 100% !important;
		margin-top: 0 !important;
		padding: 0 16px !important;
		font-size: 58px !important;
		line-height: 1.05;
	}

	/* 아래 화살표는 섹션 하단에 */
	/* [6차] bottom:4% 는 히어로 높이에 비례해 뜬다(439px → 18px).
	   41) 블록에서 섹션 하단에 붙이므로 여기서는 해제한다. */
	#mslide .arrow_down { bottom: 0 !important; }
}


/* ============================================================================
 * 20) 검색 버튼 — 19x19 스프라이트라 크기를 건드리면 안 된다
 * ========================================================================== */
@media screen and (max-width: 767px) {
	.header .hgroup .search-button {
		width: 19px !important;
		height: 19px !important;
		min-height: 0 !important;
		flex: 0 0 19px;
		background-size: 19px 19px !important;
		align-self: center;
	}
}


/* ============================================================================
 * 21) 햄버거 메뉴 — 헤더 아래에 붙는 불투명 패널
 *     기존에는 flex 아이템으로만 펼쳐져 반투명하게 히어로 위에 겹쳐 보였다.
 * ========================================================================== */
@media screen and (max-width: 767px) {

	.header .hgroup { z-index: 1000; }

	.header .hgroup .hbox nav.menu,
	.header nav.menu {
		position: absolute !important;
		height: auto !important;
		min-height: 0 !important;
		/* 기존 CSS 가 bottom 을 지정해 두어, top 과 함께 걸리면 높이가 그 사이(9px)로 고정된다.
		   반드시 bottom 을 풀어야 내용 높이만큼 늘어난다. */
		bottom: auto !important;
		top: 100%;
		left: 0;
		right: 0;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 16px 8px !important;
		background: #ffffff !important;
		border-top: 1px solid #eee;
		box-shadow: 0 8px 20px rgba(0,0,0,.12);
		box-sizing: border-box;
		max-height: calc(100vh - 70px);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		z-index: 1001;
	}

	.header nav.menu ul { width: 100% !important; margin: 0; padding: 0; }
	.header nav.menu li  { border: 0 !important; background: none !important; }
	.header nav.menu li a {
		display: block;
		width: 100%;
		padding: 15px 0;
		border-bottom: 1px solid #f0f0f0;
		color: #241A17 !important;
		font-size: 16px;
		line-height: 1.3;
		background: none !important;
	}
	.header nav.menu li:last-child a { border-bottom: 0; }
}


/* ============================================================================
 * 22) 히어로 영상 컨테이너
 *     video 의 부모가 클래스 없는 div 3중이라 선택자가 닿지 않는다.
 *     #mslide 안의 div 는 모두 높이를 채우게 한다.
 * ========================================================================== */
@media screen and (max-width: 767px) {
	#mslide > .carousel,
	#mslide > .carousel > div,
	#mslide > .carousel > div > div,
	#mslide > .carousel > div > div > div {
		height: 100% !important;
		width: 100% !important;
	}
}


/* ============================================================================
 * 23) OUR PROJECT 갤러리 — figure 가 291px 고정 + float:left 라 li 를 못 채운다
 * ========================================================================== */
@media screen and (max-width: 767px) {
	.mourworks_list figure,
	.mourworks_list figure.effect-zoe,
	.mourworks_list li > figure {
		width: 100% !important;
		max-width: 100% !important;
		float: none !important;
		margin: 0 0 12px 0 !important;
		box-sizing: border-box;
	}
	.mourworks_list figure img {
		width: 100% !important;
		height: auto !important;
		display: block;
	}
	.mourworks_list li { margin-bottom: 12px !important; }
}


/* ============================================================================
 * 24) OUR CHARACTER (.monly_list .list01~04)
 *     배경이미지(character0X.png)가 좌/우에 깔리고 텍스트가 반대편에 놓이는 2단 구성이다.
 *     모바일에서 텍스트를 100% 폭으로 바꾸면 이미지 위로 글자가 겹쳐 버린다.
 *     -> 이미지를 위, 텍스트를 아래로 세로 배치한다.
 * ========================================================================== */
@media screen and (max-width: 767px) {
	.monly_list li[class^="list"] {
		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		display: block !important;
		float: none !important;
		background-position: center top !important;
		background-size: auto 150px !important;
		padding-top: 168px !important;
		margin-bottom: 24px !important;
		box-sizing: border-box;
	}
	.monly_list li[class^="list"] strong {
		width: 100% !important;
		text-align: center !important;
		margin-bottom: 12px !important;
		padding-bottom: 0 !important;
	}
	.monly_list li[class^="list"] p {
		width: 100% !important;
		float: none !important;
		margin: 0 !important;
		text-align: center !important;
		box-sizing: border-box;
	}
}


/* ############################################################################
 * ##  통합 재작성 블록 (2차 피드백 반영) — 이 블록이 위의 관련 규칙을 덮어쓴다  ##
 * ############################################################################ */

/* ────────────────────────────────────────────────────────────────────────
 * [A] 히어로(#mslide) : 웹~모바일 사이(769~1231px)에서 회색 배경이 남던 문제
 *     기존 규칙은 max-width: 767px 에만 걸려 있어 그 위 구간이 비었다.
 *     -> 1231px 이하 전체에서 섹션 높이를 영상에 맞추고 문구를 겹친다.
 * ──────────────────────────────────────────────────────────────────────── */
@media screen and (max-width: 1231px) {

	#mslide {
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		background: #000 !important;
	}
	#mslide .carousel,
	#mslide .carousel-inner,
	#mslide .carousel > div,
	#mslide .carousel > div > div,
	#mslide .carousel > div > div > div,
	#mslide .item {
		height: auto !important;
	}
	#mslide video,
	#mslide #video,
	#mslide .item img {
		width: 100% !important;
		height: auto !important;
		display: block;
		object-fit: contain;
	}
	#mslide .carousel-contentm,
	#mslide .carousel-content {
		position: absolute !important;
		left: 0; right: 0; top: 0; bottom: 0;
		width: 100% !important; height: 100% !important;
		padding: 0 !important;
		display: flex; flex-direction: column;
		align-items: center; justify-content: center;
		pointer-events: none;
	}
	#mslide .carousel-contentm .visual_text {
		position: static !important;
		width: auto !important; max-width: 90% !important;
		margin: 0 0 8px 0 !important; padding: 0 !important;
		font-size: clamp(16px, 4.5vw, 30px) !important;
		line-height: 1.4;
	}
	#mslide .carousel-contentm .visual_subtext {
		position: static !important;
		width: auto !important; max-width: 90% !important;
		margin: 0 !important; padding: 0 !important;
		font-size: clamp(44px, 15vw, 120px) !important;
		line-height: 1;
	}
	#mslide .arrow_down { z-index: 5; }
}


/* ────────────────────────────────────────────────────────────────────────
 * [B] 스크롤 시 헤더가 검정(.navbar-shrink)으로 바뀔 때
 *     돋보기 아이콘과 햄버거를 흰색으로. + 모바일 헤더 세로 높이 축소.
 * ──────────────────────────────────────────────────────────────────────── */
@media screen and (max-width: 1231px) {
	.header .hgroup { height: 60px !important; }
	.header .hgroup .hbox {
		height: 60px !important;
		min-height: 60px;
		padding: 0 16px !important;
		align-items: center;
	}
	.header .hgroup .logo { margin-top: 0 !important; }
	.header.navbar-shrink .hgroup,
	.header.navbar-shrink { height: 60px !important; }
	.header.navbar-shrink .hgroup .hbox { height: 60px !important; }
}

@media screen and (max-width: 767px) {
	.header.navbar-shrink .search-button {
		background-image: url(/_public/images/main/search_icon2.png) !important;
	}
	.header.navbar-shrink .yg-navtoggle span { background: #ffffff !important; }
	.header.navbar-shrink .logo img { filter: brightness(0) invert(1); }
}


/* ────────────────────────────────────────────────────────────────────────
 * [C] WHO WE ARE : 4개를 한 화면에 (그리드로 축소 배치)
 * ──────────────────────────────────────────────────────────────────────── */
@media screen and (max-width: 1231px) {
	.mwork_list {
		display: grid !important;
		grid-template-columns: repeat(4, 1fr);
		gap: 10px 8px;
		margin: 0 !important;
		width: 100% !important;
	}
	.mwork_list .work {
		width: 100% !important;
		margin: 0 !important;
		float: none !important;
	}
	.mwork_list .pie_progress,
	.mwork_list .counter {
		width: 100% !important;
		max-width: 120px;
		margin: 0 auto !important;
	}
	.mwork_list .pie_progress svg,
	.mwork_list .counter svg { width: 100% !important; height: auto !important; }
	.mwork_list .pie_progress__number { font-size: 22px !important; }
	.mwork_list .wlist strong { font-size: 15px !important; }
	.mwork_list .wlist .text { font-size: 12px !important; line-height: 1.35; }
	.mwork_list .wlist [class^="icon"] { transform: scale(.8); }
}

@media screen and (max-width: 480px) {
	.mwork_list { grid-template-columns: repeat(2, 1fr); gap: 24px 12px; }
}


/* ────────────────────────────────────────────────────────────────────────
 * [D] OUR CHARACTER : 이미지 왼쪽 · 제목+텍스트 오른쪽 (가독성)
 * ──────────────────────────────────────────────────────────────────────── */
@media screen and (max-width: 767px) {
	.monly_list ul { width: 100% !important; }
	.monly_list li[class^="list"] {
		width: 100% !important;
		min-height: 0 !important;
		height: auto !important;
		display: flex !important;
		align-items: center;
		float: none !important;
		background-position: left center !important;
		background-size: 96px auto !important;
		background-repeat: no-repeat !important;
		padding: 18px 0 18px 116px !important;
		margin-bottom: 18px !important;
		box-sizing: border-box;
		border-bottom: 1px solid #e5e5e5;
	}
	.monly_list li[class^="list"] p {
		width: 100% !important;
		float: none !important;
		margin: 0 !important;
		padding: 0 !important;
		text-align: left !important;
		box-sizing: border-box;
	}
	.monly_list li[class^="list"] strong,
	.monly_list li[class^="list"] strong.fr {
		display: block;
		float: none !important;
		width: 100% !important;
		text-align: left !important;
		margin-bottom: 8px !important;
		padding-bottom: 0 !important;
		font-size: 18px !important;
	}
}


/* ────────────────────────────────────────────────────────────────────────
 * [E] OUR PROJECT 갤러리 : 크롭 말고 썸네일 전체를 축소해서 보이기
 * ──────────────────────────────────────────────────────────────────────── */
@media screen and (max-width: 767px) {
	.mourworks_list .grid figure,
	.mourworks_list figure,
	.grid figure {
		width: 100% !important;
		max-width: 100% !important;
		max-height: none !important;
		height: auto !important;
		float: none !important;
		overflow: visible !important;
		margin: 0 0 12px 0 !important;
	}
	.mourworks_list .grid figure img,
	.grid figure img {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		display: block;
		object-fit: contain !important;
	}
	.mourworks_list li { margin-bottom: 12px !important; width: 100% !important; float: none !important; }
}


/* ────────────────────────────────────────────────────────────────────────
 * [F] 텍스트가 틀 밖으로 나가는 문제 : 공통 줄바꿈/오버플로 방어
 * ──────────────────────────────────────────────────────────────────────── */
@media screen and (max-width: 767px) {
	.sub_content, .sub_content * { max-width: 100%; }
	.sub_content p, .sub_content li, .sub_content dd, .sub_content dt,
	.sub_content td, .sub_content strong, .sub_content address {
		word-break: keep-all;
		overflow-wrap: anywhere;
	}
}


/* ────────────────────────────────────────────────────────────────────────
 * [G] 하단(푸터) 정리
 * ──────────────────────────────────────────────────────────────────────── */
@media screen and (max-width: 767px) {
	.footer .ftarea { width: 100% !important; padding: 30px 16px !important; box-sizing: border-box; }
	.footer .ftarea dl { display: block !important; width: 100% !important; }
	.footer .ftarea dl dt,
	.footer .ftarea dl dd {
		display: inline-block;
		float: none !important;
		margin: 0 6px 6px 0 !important;
		width: auto !important;
	}
	.footer .ftarea dl dt.ml15px { margin-left: 0 !important; }
	.footer .ftarea address { width: 100% !important; word-break: keep-all; line-height: 1.5; }
	.footer .copyright { padding: 16px; word-break: keep-all; text-align: center; }
	.footer dl, .footer dd, .footer dt { box-sizing: border-box; }
}


/* ────────────────────────────────────────────────────────────────────────
 * [수정보완] 히어로 최소 높이 + WHO WE ARE 그리드 균등화
 * ──────────────────────────────────────────────────────────────────────── */
@media screen and (max-width: 1231px) {
	/* contain 으로 줄면 영상이 너무 얕아 문구를 겹칠 공간이 없다.
	   섹션에 최소 높이를 주고, 영상은 그 안을 cover 로 채운다(약간 크롭 허용). */
	#mslide { min-height: 62vh !important; }
	#mslide video, #mslide #video {
		height: 62vh !important;
		min-height: 360px;
		object-fit: cover;
	}

	/* 그리드 컬럼 균등 (자식이 폭을 밀지 않도록 minmax) */
	.mwork_list { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
	.mwork_list .work { min-width: 0 !important; }
}
@media screen and (max-width: 480px) {
	.mwork_list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}


/* ────────────────────────────────────────────────────────────────────────
 * [수정 2] 히어로 비율 + WHO WE ARE 4번째 원 크기
 * ──────────────────────────────────────────────────────────────────────── */
@media screen and (max-width: 1231px) {

	/* 영상 원본이 1280x720(16:9)이다. 임의 높이(62vh)로 잡으면 비율이 안 맞아
	   cover 시 잘리거나 contain 시 검은 여백이 생긴다.
	   -> 컨테이너를 16:9 로 고정하면 여백 없이 딱 맞는다. */
	#mslide {
		aspect-ratio: 16 / 9;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
	}
	#mslide .carousel,
	#mslide .carousel > div,
	#mslide .carousel > div > div,
	#mslide .carousel > div > div > div {
		height: 100% !important;
	}
	#mslide video,
	#mslide #video {
		width: 100% !important;
		height: 100% !important;
		min-height: 0 !important;
		object-fit: cover;   /* 16:9 컨테이너에 16:9 영상 -> 잘림 없이 꽉 참 */
	}

	/* WHO WE ARE 4번째는 .pie_progress 가 아니라 .counter (SVG 199px).
	   나머지(.pie_progress 120px)와 크기를 맞춘다. */
	.mwork_list .work .counter,
	.mwork_list .work .pie_progress {
		width: 100% !important;
		max-width: 120px !important;
		height: auto !important;
		margin: 0 auto !important;
	}
	.mwork_list .work .counter svg,
	.mwork_list .work .pie_progress svg {
		width: 120px !important;
		height: 120px !important;
		max-width: 100% !important;
	}
	/* IDEA 무한대(∞) 심볼 위치 보정 */
	.mwork_list .work .counter .timer { font-size: 24px !important; }
}


/* ────────────────────────────────────────────────────────────────────────
 * [수정 3] WHAT TYPE 카드 + WHO WE ARE 4번째 원 박스
 * ──────────────────────────────────────────────────────────────────────── */
@media screen and (max-width: 1231px) {

	/* WHAT TYPE: li 가 500px(이미지폭) float:left 라 좁은 화면에서 한쪽만 차거나
	   2단이 안 맞는다. 세로 1단, 폭 100%, 이미지 반응형. */
	.what_type .main_con > ul { width: 100% !important; }
	/* [6차] 43) 블록에서 2단 flex 로 다시 잡는다. 여기서는 폭만 해제 */
	/* [6차] .wt_label(크롭한 등급명 이미지)은 제외한다. 이 규칙은 데스크톱용
	   원본 카드 이미지(.only-d)를 반응형으로 만들기 위한 것이다. */
	.what_type .main_con > ul > li img:not(.wt_label) { width: 100% !important; height: auto !important; display: block; }

	/* WHO WE ARE 4번째: .counter 는 배경이미지 원(199px 고정, display:table).
	   SVG 가 아니라 박스 자체를 120 으로 줄여야 나머지 원과 맞는다. */
	.mwork_list .work .counter {
		width: 120px !important;
		height: 120px !important;
		max-width: 120px !important;
		background-size: contain !important;
		background-repeat: no-repeat !important;
		background-position: center !important;
		margin: 0 auto !important;
	}
	.mwork_list .work .counter .timer { font-size: 22px !important; }
}


/* ────────────────────────────────────────────────────────────────────────
 * [수정 4] WHO WE ARE 4번째 원 — drawCircle JS 가 인라인 div(199px) 생성
 *   .counter > div[style="width:199px;height:199px"] 를 CSS 로 덮는다.
 * ──────────────────────────────────────────────────────────────────────── */
@media screen and (max-width: 1231px) {
	.mwork_list .work .counter > div {
		width: 120px !important;
		height: 120px !important;
		margin: 0 auto !important;
	}
	.mwork_list .work .counter > div svg,
	.mwork_list .work .counter svg.zeSvg {
		width: 120px !important;
		height: 120px !important;
	}
}


/* ############################################################################
 * ##  [5차] 비율 정밀 + 햄버거 경계 + 캐치프라이즈 비례                        ##
 * ############################################################################ */

/* ────────────────────────────────────────────────────────────────────────
 * [1] 햄버거 경계 768 -> 990 으로 상향
 *   769~989px 에서 가로메뉴가 좁아 로고와 겹쳤다(820px 확인).
 *   여유가 충분한 990px 이상에서만 가로메뉴, 그 아래는 전부 햄버거.
 * ──────────────────────────────────────────────────────────────────────── */
@media screen and (max-width: 989px) {
	/* 햄버거 표시 */
	.yg-navtoggle { display: block !important; }

	/* 가로메뉴 -> 드롭다운 패널 (기존 768px 규칙과 동일하게, 989까지 확장) */
	.header nav.menu {
		position: absolute !important;
		top: 100% !important;
		bottom: auto !important;
		left: 0 !important; right: 0 !important;
		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		margin: 0 !important;
		padding: 0 16px 8px !important;
		background: #ffffff !important;
		border-top: 1px solid #eee;
		box-shadow: 0 8px 20px rgba(0,0,0,.12);
		display: none !important;
		box-sizing: border-box;
		max-height: calc(100vh - 60px);
		overflow-y: auto;
		z-index: 1001;
	}
	.header nav.menu.is-open { display: block !important; }
	.header nav.menu ul { width: 100% !important; height: auto !important; margin: 0; padding: 0; display: block !important; }
	.header nav.menu li {
		display: block !important; width: 100% !important;
		float: none !important; margin: 0 !important; padding: 0 !important;
		border: 0 !important; background: none !important;
	}
	.header nav.menu li a {
		display: block; width: 100%; padding: 15px 0;
		border-bottom: 1px solid #f0f0f0;
		color: #241A17 !important; font-size: 16px; line-height: 1.3;
		background: none !important;
	}
	.header nav.menu li:last-child a { border-bottom: 0; }

	/* 헤더 세로 축소 + 로고/햄버거 정렬 */
	.header .hgroup { height: 60px !important; width: 100vw !important; max-width: 100vw !important; left:0 !important; right:auto !important; }
	.header .hgroup .hbox {
		height: 60px !important; min-height: 60px; padding: 0 16px !important;
		display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
		max-width: 100% !important; box-sizing: border-box;
	}
	.header .hgroup .logo { float: none !important; margin: 0 !important; }
	.header .hgroup .logo img { height: 34px; width: auto; }
	/* 상자 44px · 아이콘 19px. 44px 상자의 좌우 여백이 12.5px 이므로
	   margin-right 는 14 → 2 로 줄여야 아이콘 간 시각 간격이 유지된다. */
	.header .hgroup .search-button {
		position: static !important; margin-left: auto; margin-right: 2px;
		width: 44px !important; height: 44px !important; min-height: 0 !important;
		flex: 0 0 44px; align-self: center;
		background-size: 19px 19px !important;
		background-position: center !important;
	}
	.header .hgroup .search-button:before { display: none; }
	nav.header { width: 100vw !important; max-width: 100vw !important; left:0 !important; right:auto !important; }
	.header.navbar-shrink, .header.navbar-shrink .hgroup { height: 60px !important; }
	.header.navbar-shrink .hgroup .hbox { height: 60px !important; }

	/* 검정헤더 시 아이콘/햄버거/로고 흰색 */
	.header.navbar-shrink .search-button { background-image: url(/_public/images/main/search_icon2.png) !important; }
	.header.navbar-shrink .yg-navtoggle span { background: #ffffff !important; }
	.header.navbar-shrink .logo img { filter: brightness(0) invert(1); }
}

/* 990px 이상에서는 햄버거 숨기고 가로메뉴 복귀(원본 동작) */
@media screen and (min-width: 990px) and (max-width: 1231px) {
	.yg-navtoggle { display: none !important; }
	.header nav.menu { display: block !important; position: static !important; background: none !important; box-shadow: none !important; }
}


/* ────────────────────────────────────────────────────────────────────────
 * [2] 캐치프라이즈: 히어로 폭(=100vw)에 비례해 함께 줄어들게
 *   #mslide 는 항상 뷰포트 전폭이므로 vw 가 곧 히어로 비례다.
 *   상한을 원본 데스크톱값(47px / 172px)까지 열어 큰 화면에서도 원본과 일치.
 * ──────────────────────────────────────────────────────────────────────── */
@media screen and (max-width: 1231px) {
	#mslide .carousel-contentm .visual_text {
		font-size: clamp(15px, 3.7vw, 47px) !important;
	}
	#mslide .carousel-contentm .visual_subtext {
		font-size: clamp(42px, 13.4vw, 172px) !important;
	}
}


/* [5차-보강] 990 미만에서 닫힌 메뉴는 반드시 숨김 (특이도/순서 충돌 방지) */
@media screen and (max-width: 989px) {
	.header .hgroup .hbox nav.menu:not(.is-open),
	.header nav.menu:not(.is-open) { display: none !important; }
	.header .hgroup .hbox nav.menu.is-open,
	.header nav.menu.is-open { display: block !important; }
	.yg-navtoggle { display: block !important; }
}


/* ============================================================================
 * 26) [6차] 모바일 카드 캡션 — 제목·평수·설명이 :hover 뒤에만 존재해 터치에서 영구 미노출
 *
 *     figcaption 은 position:absolute + translate3d(0,100%,0) 이고 해제 조건이 :hover 뿐이다.
 *     (style.css .filtr-container/.mourworks figure.effect-zoe figcaption)
 *     내부 요소(hr / .title_area / p.description)도 전부 absolute 라 캡션만 static 으로
 *     바꾸면 겹친다. 안쪽까지 전부 흐름으로 되돌려 이미지 아래 블록으로 세운다.
 *
 *     작품·시공현장·시공스토리·다이어리·검색결과 목록이 전부 이 구조를 공유한다.
 * ========================================================================== */
@media screen and (max-width: 767px) {

	/* 카드 컨테이너 — 고정 높이/클리핑 해제 (캡션이 아래로 자랄 자리) */
	.filtr-container li,
	.filtr-container .filtr-item,
	.mourworks_list li {
		height: auto !important;
		min-height: 0 !important;
		overflow: visible !important;
	}
	.filtr-container figure,
	.filtr-container figure.effect-zoe,
	.mourworks figure.effect-zoe {
		height: auto !important;
		max-height: none !important;
		overflow: visible !important;
	}

	/* 캡션을 흐름으로 */
	.filtr-container figure.effect-zoe figcaption,
	.mourworks figure.effect-zoe figcaption,
	.grid figure figcaption {
		position: static !important;
		-webkit-transform: none !important;
		transform: none !important;
		-webkit-transition: none !important;
		transition: none !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		background: #3c4b4b !important;
		color: #fff !important;           /* 원본 #3c4a50 은 같은 배경 위라 대비 1.01:1 */
		padding: 14px 16px 16px !important;
		box-sizing: border-box !important;
	}

	/* 캡션 안 링크 — 원본은 absolute + height:100% 로 카드를 덮는 판이었다 */
	.filtr-container figure figcaption > a,
	.mourworks figure figcaption > a,
	.grid figure figcaption > a {
		position: static !important;
		display: block !important;
		width: 100% !important;
		height: auto !important;
		text-decoration: none !important;
	}

	/* 캡션 내부 요소 — 전부 흐름 배치로 */
	figure.effect-zoe hr {
		position: static !important;
		width: 24px !important;
		margin: 0 0 9px 0 !important;
		border: 0 !important;
		border-top: 2px solid #fff !important;
	}
	figure.effect-zoe .title_area {
		position: static !important;
		margin: 0 !important;
	}
	figure.effect-zoe p.description {
		position: static !important;
		margin: 8px 0 0 0 !important;
		opacity: 1 !important;
	}

	/* 타입 — 작은 크기의 한글은 굵기로 벌충한다(Light/ExtraLight 금지) */
	figure.effect-zoe .list_title {
		font-size: 16px !important;
		font-weight: 500 !important;
		line-height: 1.4 !important;
		letter-spacing: -0.01em !important;
		color: #fff !important;
	}
	figure.effect-zoe .list_text {
		font-size: 13px !important;
		font-weight: 500 !important;
		line-height: 1.5 !important;
		color: #fcfabe !important;
		padding-top: 3px !important;
	}
	figure.effect-zoe p.description {
		font-size: 13px !important;
		font-weight: 400 !important;
		line-height: 1.6 !important;
		color: #fff !important;
	}
}


/* ============================================================================
 * 27) [6차] 모바일 타입 스케일 — 기준 14px 밀도형
 *
 *     루트(html) font-size 가 14px 로 고정돼 있어 rem 은 사용자 글꼴 설정을 따라가지
 *     못한다. 이득이 없으므로 px 로 적는다. 대신 굵기로 벌충한다 —
 *     작은 크기의 한글은 큰 크기 대비 획 두께가 더 필요하다(박재홍 2020, Noto Sans KR).
 *
 *     Display  clamp(24,4vw+12,32)   히어로. 원본 90px 고정이라 320px 에서 118px 잘렸다
 *     Headline clamp(20,2.5vw+12,26) 섹션 제목 h3.st/h3.mt. 원본 66px, 최대 251px 초과
 *     Subtitle 15px                  히어로 부제. 원본 20px
 * ========================================================================== */
@media screen and (max-width: 767px) {

	/* 서브 히어로 — display:table 은 콘텐츠 최소너비 아래로 줄지 않는다. flex 로 교체 */
	.sub_visual {
		display: flex !important;
		align-items: center;
		justify-content: center;
		height: 52vh !important;          /* 폴백 */
		height: 52svh !important;         /* 주소창 표시/숨김에 따라 리사이즈되지 않는다 */
		min-height: 300px !important;
	}
	.sub_visual .visualbox {
		display: block !important;
		width: 100% !important;
		padding: 80px 20px 0 !important;
	}
	.visualbox .visual_text {
		font-size: var(--fs-display) !important;
		line-height: 1.2 !important;
		letter-spacing: -0.01em !important;
		margin-top: 0 !important;
	}
	.sub_visual .visualbox .visual_subtext {
		font-size: 15px !important;
		line-height: 1.6 !important;
		padding-top: 10px !important;
	}

	h3.st,
	h3.mt {
		font-size: var(--fs-headline) !important;
		line-height: 1.3 !important;
		letter-spacing: -0.01em !important;
		word-break: keep-all;
	}
}


/* ============================================================================
 * 28) [6차] 폼 컨트롤 16px — iOS Safari 는 텍스트 입력의 렌더링 크기가 16px 미만이면
 *     포커스 시 화면을 자동 확대한다. 탭할 때마다 화면이 튄다.
 *     viewport 에 maximum-scale 을 거는 우회는 확대 자체를 막아 접근성을 해치므로,
 *     크기를 올리는 것 외에 방법이 없다.
 *     radio/checkbox 는 텍스트 입력이 아니라 대상에서 제외한다.
 * ========================================================================== */
@media screen and (max-width: 767px) {
	input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
	textarea,
	select {
		font-size: var(--fs-form) !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}
	.search_result input[type="text"],
	#piw_sub_container input[type="text"] {
		width: 100% !important;
	}
}


/* ============================================================================
 * 29) [6차] 탭 타깃 — 320px 기준 24px 미만이 다수였다.
 *     글자 크기를 키우지 않고 상하 패딩만 더해 44px 에 접근시킨다.
 * ========================================================================== */
@media screen and (max-width: 767px) {
	.paging_bg,
	.s_num,
	.paging a,
	.paging span {
		min-width: 40px !important;
		min-height: 40px !important;
		line-height: 40px !important;
		display: inline-block !important;
	}
	.header nav.menu li a {
		padding-top: 14px !important;
		padding-bottom: 14px !important;
	}
	.pftab > ul > li > a,
	.btn04 {
		min-height: 44px !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
	}
}


/* ============================================================================
 * 30) [6차] 잔여 가로 넘침 — 320px(WCAG 1.4.10 Reflow 기준 폭) 실측 원인만 조준
 *
 *     overflow-x:hidden 이 페이지 가로 스크롤은 막고 있으나, 넘친 부분은 잘려서
 *     사라진다. 아래는 DOM 을 직접 훑어 확인한 원인 6종이다.
 *     (회사소개의 카카오맵 타일은 부모가 overflow:hidden 으로 가두는 정상 동작이라 제외)
 * ========================================================================== */
@media screen and (max-width: 767px) {

	/* [1] 메인 지점 목록 — .mservice_list 는 102px 인데 자식 .partner 가 165px */
	.mservice .mservice_list,
	.mservice_list {
		width: 100% !important;
		max-width: 100% !important;
		float: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		box-sizing: border-box !important;
	}
	.mservice_list .partner {
		width: 100% !important;
		max-width: 100% !important;
		float: none !important;
		margin-right: 0 !important;
		box-sizing: border-box !important;
	}

	/* [2] 이메일 주소는 공백이 없어 keep-all 로는 안 쪼개진다 */
	.list_text a,
	a.gray_font2,
	.list03 .list_text,
	address {
		overflow-wrap: anywhere !important;
		word-break: break-word !important;
	}

	/* [3] 포트폴리오 상세 — .pf_area 가 378px 고정이라 제목·스펙이 함께 밀렸다 */
	.pf_content_right,
	.pf_area {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}
	.pf_area .ov_list,
	.pf_area .ov_list dl {
		width: 100% !important;
		max-width: 100% !important;
	}
	.pf_area .ov_list dl dd {
		float: none !important;
		width: auto !important;
	}

	/* [4] 게시판 목록 날짜 셀 — white-space:nowrap 이라 74px 칸에서 37px 넘쳤다 */
	table.bbs_ltype td,
	table.bbs_ltype th {
		white-space: normal !important;
	}

	/* [5] 게시글 상세 이전/다음 — dd 안의 .short 가 dd 를 25px 넘는다 */
	.bbs_foot_list dd > *,
	.bbs_foot_list .short {
		max-width: 100% !important;
		box-sizing: border-box !important;
	}
	.bbs_foot_list .short {
		overflow: hidden !important;
		text-overflow: ellipsis !important;
	}

	/* [6] 검색 결과 재검색 — form 이 88px 인데 input 이 185px */
	.search-top .input-wrap,
	.search-top .input-wrap form,
	.search-top form {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}
	.search-top .input-wrap input[type="text"] {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}
}


/* ============================================================================
 * 32) [6차] CONTACT US 연락처 블록 — 지점 전화번호 끝자리가 잘리던 지점
 *     li.list03 이 left:62 에서 270px 폭이라 우측 12px 가 화면 밖으로 나갔다.
 *     초과폭은 가장 작지만 손실은 가장 크다(전환의 마지막 단계).
 * ========================================================================== */
@media screen and (max-width: 767px) {
	li.list03,
	.list03 {
		width: auto !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
		padding-right: 16px !important;
	}
	.list03 .list_title,
	.list03 .list_text,
	.list03 strong,
	.list03 p {
		width: auto !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
		overflow-wrap: anywhere !important;
	}
}


/* ============================================================================
 * 33) [6차] tel: 링크 — 지역 서비스업에서 전화는 1순위 전환 경로다.
 *     번호 21개가 전부 plain text 였다(코드베이스 전체 tel: 0건).
 *     링크로 바뀌었으니 탭 타깃과 시그니파이어를 준다.
 * ========================================================================== */
.tel-link {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}
@media screen and (max-width: 767px) {
	.tel-link {
		display: inline-block;
		min-height: 32px;
		line-height: 32px;
		padding: 0 2px;
		border-bottom: 1px solid currentColor;
	}
}


/* ============================================================================
 * 34) [6차] 잔여 넘침 최종 보정 — 30~33 이후 재측정에서 남은 것만.
 *     앞선 규칙이 빗나간 이유를 각 항목에 남긴다(같은 실수 반복 방지).
 * ========================================================================== */
@media screen and (max-width: 767px) {

	/* [a] width:100% 는 left 오프셋을 고려하지 않아 12px 넘쳤다. auto 로 채운다 */
	.pf_content_right,
	.pf_area,
	.pf_area .ov_list,
	.pf_area .ov_list dl {
		width: auto !important;
		max-width: none !important;
	}

	/* [b] 회사소개 지점 카드 .list-wrap — 296px 고정. 상위 스코프 없이 전역으로 */
	.list-wrap {
		width: auto !important;
		max-width: 100% !important;
		float: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		box-sizing: border-box !important;
	}

	/* [c] 게시판 목록 제목 셀 — nowrap 은 td 가 아니라 자식 .short 에 있었다
	 *     (board.css:46 .bbs_ltype tbody td .short {white-space:nowrap; max-width:790px}) */
	.bbs_ltype tbody td .short,
	.bbs_foot_list .short {
		max-width: 100% !important;
		white-space: nowrap !important;   /* 말줄임은 유지하되 폭을 가둔다 */
		overflow: hidden !important;
		text-overflow: ellipsis !important;
		box-sizing: border-box !important;
	}
	/* 날짜 셀은 줄바꿈 허용 */
	.bbs_ltype td,
	.bbs_ltype th {
		white-space: normal !important;
		word-break: keep-all;
	}

	/* [d] 폼 12px — common.css 의 .f12 유틸리티가 !important 로 이겼다.
	 *     iOS 확대 방지는 기능 문제라 유틸리티보다 우선한다 */
	textarea.f12,
	input.f12,
	select.f12,
	.inupt_type.f12,
	textarea.inupt_type,
	input.inupt_type {
		font-size: 16px !important;
	}

	/* [e] 검색 결과 재검색 — input 에 type 속성이 없어 [type=text] 로는 안 잡혔다 */
	.search-top .input-wrap,
	.search-top .input-wrap form,
	.search-top .input-wrap input,
	.bbs_search,
	.bbs_search input {
		max-width: 100% !important;
		box-sizing: border-box !important;
	}
	.search-top .input-wrap input:not([type="hidden"]):not([type="submit"]):not([type="button"]) {
		width: 100% !important;
	}

	/* [f] jQuery UI 데이트피커 — 연/월 select 2개가 97px 안에서 6px 넘친다 */
	.ui-datepicker,
	.ui-datepicker-header,
	.ui-datepicker-title {
		box-sizing: border-box !important;
		max-width: 100% !important;
	}
	.ui-datepicker-title select {
		max-width: 48% !important;
		box-sizing: border-box !important;
	}
}


/* ============================================================================
 * 35) [6차] 검색 페이지 — style.css:128 `.search .search-top{padding:20px 100px}` 이
 *     320px 화면에서 좌우로만 200px 을 먹는다. 입력창 내부 패딩도 185px 이다.
 *     앞선 규칙이 `.search-top` 만 잡아 `.search .search-top`(특이도 상위)에 졌다.
 * ========================================================================== */
@media screen and (max-width: 767px) {
	.search .search-top {
		padding: 16px !important;
		box-sizing: border-box !important;
	}
	.search .search-top .input-wrap {
		width: 100% !important;
	}
	.search .search-top .input-wrap input[type="text"] {
		width: 100% !important;
		max-width: 100% !important;
		height: 52px !important;
		padding: 0 52px 0 16px !important;
		font-size: 16px !important;
		border-radius: 26px !important;
		box-sizing: border-box !important;
	}
	.search .search-top .input-wrap button {
		right: 14px !important;
	}
}


/* ============================================================================
 * 36) [6차-보정] 섹션 타이틀이 과하게 작았다 — 27) 의 clamp(20,2.5vw+12,26) 는
 *     원본 66px 대비 1/3 로, Display 성격인 자리를 Headline 으로 취급한 실수다.
 *
 *     기준: 원본 66px → 모바일 36~42px 이 업계 관행(데스크톱 72px → 36~42px).
 *           KRDS 모바일 Display large 44 / Material 3 Display Small 36 / iOS Large Title 34.
 *
 *     제약: "YEGA+COMPANY" 는 '+' 에 줄바꿈 지점이 없어 320px 에서 35px 가 한계다.
 *           그래서 고정값이 아니라 320px→34px, 390px→42px 로 흐르게 잡는다.
 *
 *     히어로(Display)도 함께 올린다. 섹션 타이틀만 키우면 위계가 뒤집힌다.
 * ========================================================================== */
@media screen and (max-width: 767px) {

	/* Display — 히어로. 320:40 → 390:49 */
	.visualbox .visual_text {
		font-size: var(--fs-display) !important;
		line-height: 1.15 !important;
		/* 원본 굵기로 되돌린다. 39) 의 h1~h6 일괄 교정이 히어로까지 700 으로
		   올려 서체 인상이 바뀌었다. 굵기로 벌충할 필요가 없는 49px 이고,
		   흰 글자 대비도 이미 확보돼 있다. */
		font-weight: 300 !important;
	}

	/* Headline — 섹션 타이틀. 320:34 → 390:42 */
	h3.st,
	h3.mt {
		font-size: var(--fs-headline) !important;
		line-height: 1.22 !important;
		word-break: keep-all;
	}
}


/* ============================================================================
 * 37) [6차-보정] 게시판 목록 표 — 숨긴 열이 폭을 계속 먹는다
 *
 *     모바일에서 번호·작성자·조회 3개 열을 display:none 으로 감췄는데,
 *     table-layout:fixed + <colgroup> 조합이라 <col> 이 그대로 폭을 배분한다.
 *     320px 기준: 표 296px 중 숨은 열이 166px 을 차지하고 제목은 56px 만 받았다.
 *     그래서 제목이 "예가컴…" 으로 뭉개지고 작성일은 37px 넘쳐 잘렸다.
 *
 *     table-layout:auto 로 바꾸면 nowrap 날짜가 표를 389px 까지 밀어낸다(컨테이너 296px).
 *     -> fixed 를 유지하되 <col> 폭만 해제하고, 보이는 두 열에 직접 폭을 준다.
 *        작성일은 우측 정렬 + 날짜/시각 두 줄로 접어 제목 폭을 확보한다.
 * ========================================================================== */
@media screen and (max-width: 767px) {
	table.bbs_ltype {
		table-layout: fixed !important;
		width: 100% !important;
	}
	/* display:none 은 셀만 숨길 뿐 <col> 이 정의한 열은 폭을 계속 배분한다.
	   숨긴 열(번호·작성자·조회)의 <col> 을 직접 접어야 제목이 폭을 가져간다.
	   visibility:collapse 는 남은 폭을 균등 배분해 버리므로 쓰지 않는다.
	   그리고 display:none 셀은 행에서 아예 제거되므로, 남은 두 셀(제목·작성일)이
	   1·2번 열에 매핑된다. col 인덱스는 원래 위치(2,5)가 아니라 1,2 를 잡아야 한다. */
	table.bbs_ltype col:nth-child(1) { width: 72% !important; }   /* → 제목 */
	table.bbs_ltype col:nth-child(2) { width: 28% !important; }   /* → 작성일 */
	table.bbs_ltype col:nth-child(3),
	table.bbs_ltype col:nth-child(4),
	table.bbs_ltype col:nth-child(5) { width: 0 !important; }

	/* 제목 — 남는 폭 전부 */
	.bbs_ltype th:nth-child(2),
	.bbs_ltype td:nth-child(2) {
		width: auto !important;
		text-align: left !important;
		padding-right: 10px !important;
	}

	/* 작성일 — 우측 정렬. 날짜/시각이 두 줄로 접히도록 nowrap 해제 */
	.bbs_ltype th:nth-child(5),
	.bbs_ltype td:nth-child(5) {
		text-align: right !important;
		white-space: normal !important;
		word-break: keep-all !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		line-height: 1.45 !important;
	}

	/* 제목 말줄임이 셀 폭 안에서만 동작하도록 */
	.bbs_ltype tbody td .short {
		display: block !important;
		max-width: 100% !important;
		width: auto !important;
	}
}


/* ============================================================================
 * 38) [6차] 행간 기본값 — 본문 텍스트의 63%가 line-height:normal 이었다
 *
 *     저자가 행간을 지정하지 않아 브라우저 기본값(한글 약 1.43)에 맡겨져 있었다.
 *     한글은 베이스라인이 낮아 같은 배수에서도 라틴 문자보다 빽빽해 보인다.
 *     WCAG 1.4.12 하한이 1.5 이고, 디자인 시스템 기준값은 1.6 이다.
 *
 *     크기별로 나눠 건다 — 큰 글자에 1.6 을 주면 오히려 흩어진다.
 *     이건 "덮어쓰기" 가 아니라 "미지정 상태에 기본값을 채우는" 성격이라
 *     이미 값이 있는 곳(개별 조정된 곳)을 이기지 않도록 !important 를 쓰지 않는다.
 * ========================================================================== */
@media screen and (max-width: 767px) {

	/* 본문 계열 — 문장이 담기는 요소 */
	p, li, dd, dt, td, th, address,
	.list_text, .mtext, .stext, .text, .wlist, .description {
		line-height: 1.6;
	}

	/* 라벨·메타 — 짧은 구. 1.6 이면 흩어진다 */
	.list_title, .btn04, .pftab a, label,
	.paging a, .paging span, caption, figcaption .list_text {
		line-height: 1.45;
	}

	/* 제목 계열 — 클수록 좁게 */
	h1, h2, h3, h4, h5, h6, strong.list_title {
		line-height: 1.3;
	}
	h3.st, h3.mt, .visualbox .visual_text {
		line-height: 1.22;
	}
}


/* ============================================================================
 * 39) [6차] 굵기 일괄 교정 — 20px 미만 텍스트의 83%가 Light·ExtraLight 였다
 *
 *     근원은 base.css:11 이다. html·body 부터 span·strong 까지 거의 모든 요소에
 *     font-weight:300 을 기본값으로 걸어 두었다. 개별 선언이 아니라 리셋이라
 *     여기서 되돌리지 않으면 전 페이지가 Light 로 깔린다.
 *
 *     작은 크기의 한글은 큰 크기 대비 획 두께가 더 필요하다(박재홍 2020,
 *     Noto Sans Korean 대상). 14px 기준 밀도를 택한 이상 이 보정은 선택이 아니다.
 *
 *     굵기 값은 전부 토큰을 참조한다 — 1) 블록의 --fw-* 만 바꾸면 전체가 따라온다.
 * ========================================================================== */
@media screen and (max-width: 767px) {

	/* 본문 계열 — Light(300) 하한을 Regular(400) 로 */
	body, p, li, dd, dt, td, th, address, span, div, a, label,
	.list_text, .mtext, .stext, .text, .wlist, .description, .nametxt {
		font-weight: var(--fw-body);
	}

	/* 13px 이하 — 굵기로 벌충 */
	.f12, .f13, .caption, figcaption .list_text,
	.viewsub dt, .viewsub dd, address.f12, .copyright {
		font-weight: var(--fw-small);
	}

	/* 강조·제목 */
	strong, b, .list_title, .btn04, .pftab a {
		font-weight: var(--fw-strong);
	}
	h1, h2, h3, h4, h5, h6 {
		font-weight: var(--fw-headline);
	}

	/* common.css 의 굵기 유틸리티가 !important 로 이긴다.
	   실제 마크업에서 쓰이는 건 fw200(5곳)·fw300(3곳)·fw800(3곳) 뿐이고,
	   앞의 둘은 본문 하한 미달이라 되돌린다. fw800 은 강조 의도라 둔다. */
	.fw100, .fw200, .fw300 {
		font-weight: var(--fw-body) !important;
	}
}


/* ============================================================================
 * 40) [6차] 히어로 영상 — 채우기(cover)로 통일
 *
 *     기존에 #mslide video 규칙이 두 벌 있고, 뒤쪽의 height:auto 가 앞쪽의
 *     object-fit:cover 를 무효화하고 있었다. 결과적으로 영상이 원본 16:9 그대로
 *     390×219px 로만 깔려 히어로가 납작했다.
 *
 *     좌우가 잘리더라도 화면을 채우는 쪽이 자연스럽다는 판단.
 *     높이는 서브 히어로(52vh)와 같은 리듬으로 맞춘다.
 * ========================================================================== */
@media screen and (max-width: 767px) {

	/* 메인 슬라이드 히어로 */
	/* #mslide 가 780px(뷰포트의 2배)로 잡혀 있어 좌우가 화면 밖으로 나갔다.
	   높이만 잡고 폭을 안 잡으면 cover 가 무의미하다 — 폭부터 가둔다. */
	#mslide,
	#mslide .carousel,
	#mslide .carousel-inner,
	#mslide .item,
	#mslide .item > div,
	#mslide .carousel > div {
		width: 100% !important;
		max-width: 100% !important;
		height: 52vh !important;          /* 폴백 */
		height: 52svh !important;         /* 주소창 표시/숨김에 따라 리사이즈되지 않는다 */
		min-height: 300px !important;
		max-height: none !important;
		overflow: hidden !important;
		box-sizing: border-box !important;
	}
	#mslide video,
	#mslide #video,
	#mslide .item img {
		width: 100% !important;
		height: 100% !important;          /* auto 로 되돌리던 뒤쪽 규칙을 이긴다 */
		object-fit: cover !important;
		object-position: center center !important;
		margin: 0 !important;             /* 인라인 margin-top:-5px / -55px 무력화 */
		top: 0 !important;
		display: block !important;
	}

	/* 서브 페이지 히어로 영상(작품 목록·검색 결과)도 동일 규칙 */
	.sub_visual video,
	.sub_visual img.visual_bg,
	.search-top ~ * video {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
		object-position: center center !important;
	}
}


/* ============================================================================
 * 41) [6차] 화살표 · 버튼 — 탭 영역만 넓히고 아이콘 크기는 건드리지 않는다
 *
 *     앞선 시도가 아이콘을 망가뜨렸다. 원인 3가지를 기록해 둔다:
 *
 *     (1) .down_link 의 아이콘은 스프라이트다. icon_arrow.png 는 210×180 이고
 *         한 칸이 70×70 이다(.down_link2 는 background-position:-140px 0 으로 3번째 칸).
 *         여기에 background-size:22px 를 주면 스프라이트 전체가 22px 로 줄어
 *         엉뚱한 영역이 보인다. 스프라이트는 크기를 바꾸면 안 된다.
 *
 *     (2) .search-button 은 background-size:cover 에 19×19 아이콘이다.
 *         박스를 44px 로 키우면 cover 가 아이콘을 44px 로 확대해 뭉갠다.
 *
 *     (3) .yg-navtoggle 은 span 3개를 top:3/11/19px 로 절대배치한 햄버거다.
 *         부모에 flex + gap 을 걸면 절대배치와 충돌해 찌그러진다.
 *
 *     결론: 시각 크기는 원본을 유지하고, 탭 영역은 padding 또는 ::after 로 넓힌다.
 * ========================================================================== */
@media screen and (max-width: 767px) {

	/* ── 아래 화살표 — 위치만 섹션 하단에 붙인다. 크기는 원본 70×70 ────── */
	.arrow_down,
	#mslide .arrow_down,
	.sub_visual .arrow_down {
		position: absolute !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		top: auto !important;
		margin: 0 !important;
		width: 100% !important;
		height: 70px !important;
		text-align: center !important;
	}
	/* background-size / background-position 은 건드리지 않는다 (스프라이트) */
	.arrow_down a.down_link,
	.arrow_down a.down_link2 {
		margin: 0 auto !important;
	}

	/* ── 위로가기 — style.css:50 에서 70×70 로 이미 정의돼 있다. 건드리지 않음 ── */

	/* ── 텍스트 버튼 — 44px 하한. 아이콘 버튼은 제외 ──────────────────── */
	.btn01, .btn02, .btn03, .btn04 {
		min-height: 44px !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		line-height: 1.2 !important;
		box-sizing: border-box !important;
	}

	/* ── 아이콘 버튼 — 아이콘은 그대로 두고 탭 영역만 의사요소로 넓힌다 ── */
	.search-button,
	.page_btn,
	.yg-navtoggle {
		position: relative !important;
	}
	.search-button::after,
	.page_btn::after,
	.yg-navtoggle::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 44px;
		height: 44px;
		transform: translate(-50%, -50%);
		/* 시각적으로는 없고 탭만 받는다 */
	}
}


/* ============================================================================
 * 42) [6차] 화살표 버튼 70×70 → 48×48 (모바일)
 *
 *     icon_arrow.png 는 210×180 스프라이트이고 한 칸이 70×70 이다.
 *       (0,0)   검은 화살표 / 흰 배경   → .down_link  (background-position: 0 0)
 *       (70,0)  흰 화살표 / 어두운 배경 → a.top       (background-position: -70px 0)
 *     두 칸 모두 글리프는 33×41, 셀 안 여백은 좌19 상15 로 동일하다.
 *
 *     스프라이트를 줄일 때는 background-size 와 background-position 을
 *     "같은 배율로 함께" 바꿔야 한다. 하나만 바꾸면 칸이 어긋난다.
 *       배율 48/70 = 0.685714…
 *       background-size:     210×180 → 144px / 123.428…px
 *       a.top 의 position:   -70px 0 → -48px 0
 *
 *     세로가 소수점 반복이라 직접 적지 않고 calc() 로 브라우저에 계산시킨다.
 *     반올림해서 적으면 칸 경계가 미세하게 어긋나 옆 칸이 비쳐 보인다.
 *
 *     글리프는 33×41 → 약 23×28px 로 보인다. 원본의 여백 비율을 그대로 유지한
 *     축소라 형태가 깨지지 않는다.
 * ========================================================================== */
@media screen and (max-width: 767px) {

	.arrow_down a.down_link,
	.arrow_down a.down_link2,
	.footer .top_area a.top {
		width: 48px !important;
		height: 48px !important;
		background-size: calc(210px * 48 / 70) calc(180px * 48 / 70) !important;
		margin: 0 auto !important;
	}

	/* 각 칸의 시작점도 같은 배율로 */
	.arrow_down a.down_link   { background-position: 0 0 !important; }
	.footer .top_area a.top   { background-position: -48px 0 !important; }
	.arrow_down a.down_link2  { background-position: -96px 0 !important; }

	/* 버튼 크기에 맞춰 담는 영역도 조정 */
	.arrow_down,
	#mslide .arrow_down,
	.sub_visual .arrow_down {
		height: 48px !important;
	}
	.footer .top_area {
		height: 48px !important;
		top: -48px !important;
	}

	/* 48px 은 이미 터치 하한(44px)을 넘으므로 별도 탭 영역 확장이 필요 없다 */
}


/* ============================================================================
 * 43) [6차] WHAT TYPE 카드 — 모바일 전용 텍스트 카드
 *
 *     what_img01/02.jpg 는 500×785 통이미지로 카드 안의 모든 글자가 JPG 에
 *     구워져 있었다. 모바일에서 카드가 173px 로 줄면 글자도 34.6% 로 함께 줄어
 *     약 4.8px 로 렌더됐고, 타입 스케일·굵기·행간이 닿지 않았다.
 *
 *     ★ 데스크톱은 기존 이미지를 그대로 쓴다(.only-d).
 *       마크업에 <img> 와 텍스트 카드를 함께 두고 폭으로 갈라 보여준다.
 *       데스크톱 CSS(style.css:163-164)는 손대지 않는다.
 *
 *     아이콘+등급명은 SVG 로 다시 그리지 않고 원본에서 크롭해 썼다.
 *     SVG 재현은 형태가 미묘하게 달라진다 — 원본을 그대로 잘라 쓰는 편이
 *     정확하고 손도 덜 간다.
 *       wt_label_mini.png    119×113  (원본 x193~311, y62~174)
 *       wt_label_master.png  207×113  (원본 x149~355, y62~174)
 *       마크 + 등급명 + 밑줄까지가 한 덩어리 아이콘이라 밑줄을 포함해 잘랐다.
 *       그래서 .wt_head 에 CSS 테두리를 따로 두지 않는다.
 *
 *     레이아웃: 아이콘 → 상품설명 → 구분선 → 유저 페르소나, 전부 세로.
 *     <br> 은 마크업에서 제거했다 — 모바일 카드는 데스크톱과 별개 마크업이라
 *     데스크톱 줄바꿈을 물려받을 이유가 없다. 폭에 맞춰 자동으로 흐른다.
 *
 *     본문 글자 크기는 전부 1) 블록의 타입 토큰을 참조한다.
 * ========================================================================== */

/* 기본은 데스크톱 — 텍스트 카드를 감춘다 */
.wt_card { display: none; }

@media screen and (max-width: 767px) {

	/* 레이아웃 — 세로 스택 */
	.what_type .main_con > ul {
		display: flex !important;
		flex-direction: column !important;
		gap: 14px !important;
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 16px !important;
		box-sizing: border-box !important;
	}
	.what_type .main_con > ul > li {
		float: none !important;
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
	}
	.what_type .main_con > ul > li > a {
		display: block !important;
		text-decoration: none !important;
	}

	/* 카드 */
	.wt_card {
		display: block !important;
		background: #F3EEEA;
		border-radius: 10px;
		padding: 20px 20px 22px;
		color: #363636;
		box-sizing: border-box;
	}

	/* 상단: 아이콘 → 상품 설명 순으로 세로 배치 */
	.wt_head {
		display: block;
		padding-bottom: 14px;
		margin-bottom: 14px;
		border-bottom: 1px solid rgba(156, 153, 153, .35);
	}
	.wt_label {
		display: block;
		width: auto !important;    /* only-d 이미지용 width:100% 규칙을 이긴다 */
		height: 52px !important;   /* 원본 113px → 약 46% */
		max-width: 100%;
		margin: 0 auto 14px;       /* 아이콘만 중앙, 텍스트는 좌측 정렬 유지 */
	}

	/* 상품 설명 — 페르소나와 같은 크기. 폭에 맞춰 자동 줄바꿈 */
	.wt_lead {
		display: block;
		margin: 0;
		padding: 0;
		border: 0;
		font-size: var(--fs-small);
		font-weight: var(--fw-small);
		line-height: var(--lh-body);
		color: #8A8785;
		word-break: keep-all;
		overflow-wrap: break-word;
	}

	/* 유저 페르소나 — 다음 행 */
	.wt_body { display: block; width: 100%; }
	.wt_for { display: block; width: 100%; }
	.wt_for > span {
		display: block;
		font-size: var(--fs-small);
		font-weight: var(--fw-small);
		line-height: var(--lh-body);
		color: #363636;
		margin-bottom: 7px;
		padding-left: 13px;
		position: relative;
		text-align: left;
		word-break: keep-all;
	}
	.wt_for > span:last-child { margin-bottom: 0; }
	.wt_for > span::before {
		content: "";
		position: absolute;
		left: 0; top: 0.62em;
		width: 4px; height: 4px;
		border-radius: 50%;
		background: #9C9999;
	}

	/* 모바일 카드는 <br> 없이 마크업했다 — 컨테이너 폭에 맡기고
	   word-break:keep-all 로 단어 단위만 지킨다. */
}


/* ============================================================================
 * 44) [6차] 섹션 타이틀 — 아래 여백이 위만큼 넓어 타이틀이 떠 보인다 (모바일)
 *
 *     증상: 390px 에서 타이틀 블록 아래가 일괄 85px.
 *           위 여백은 섹션마다 100~257px 이라 WHAT TYPE 은 100:85 = 1:0.85,
 *           거의 1:1 이다. 타이틀이 어느 쪽에도 속하지 않고 가운데 뜬다.
 *
 *     원인: style.css:141 `.main_title { margin-bottom:85px }`.
 *           데스크톱(1440px)에서는 화면이 넓어 85px 이 답답하지 않지만,
 *           모바일은 폭이 1/3 이라 같은 85px 이 세로로 훨씬 크게 읽힌다.
 *
 *     원칙: 근접성(proximity). 제목은 위 내용의 꼬리가 아니라 아래 내용의 머리다.
 *           위 : 아래 = 대략 3:1 이 되게 아래만 좁힌다.
 *           위 여백은 섹션 진입 여백이 만드는 것이라 손대지 않는다
 *           (건드리면 섹션 구분이 무너진다).
 *
 *     범위: max-width:767px 안에서만. 데스크톱 85px 은 그대로 둔다.
 *     조정: 값은 §1 의 --sp-title-content 한 줄. 여기 숫자를 직접 쓰지 말 것.
 *
 *        위      100~257px   (섹션 진입 여백 — 유지)
 *        ┌ h3    섹션 타이틀
 *        │  ↕     8px        --sp-title-lead   (타이틀+리드 = 한 덩어리)
 *        └ p     리드 문장
 *           ↕    36px        --sp-title-content
 *          섹션 본문
 * ========================================================================== */
@media screen and (max-width: 767px) {

	/* 아래만 좁힌다. 위(margin-top)는 정의하지 않는다 — 섹션 여백의 몫이다. */
	.main_title {
		margin-bottom: var(--sp-title-content) !important;
	}

	/* 타이틀과 리드 문장은 한 덩어리로 붙인다.
	   .mtext 는 margin 이 0 이고 .stext 만 10px 이라 페이지마다 달랐다 — 통일. */
	.main_title .mtext,
	.main_title .stext {
		margin-top: var(--sp-title-lead) !important;
	}
}


/* ============================================================================
 * 45) [6차] OUR PROJECT — 모바일 2열 격자 (데스크톱 4열 유지)
 *
 *     증상: 4) 와 [E] 가 li 를 width:100% 로 눕혀 카드 8장이 8줄이 됐다.
 *           390px 기준 섹션 높이가 3,200px — 썸네일 하나 보려고 8번 스크롤한다.
 *
 *     처리: ul 을 grid 2열로. 8장 → 4행. 높이가 1/2 이하로 준다.
 *           float 시절 마진(li 12px, figure 0 0 12px)은 gap 으로 대체한다.
 *           둘을 같이 쓰면 24px 이 되므로 반드시 0 으로 눌러야 한다.
 *
 *     행 높이 정렬: 제목 길이가 달라(9~16자) 캡션 줄수가 어긋난다.
 *           li → figure → figcaption 을 flex 로 이어 캡션이 남는 높이를 먹게 한다.
 *           그래야 한 행의 두 카드 밑변이 맞는다. grid 의 stretch 만으로는
 *           li 만 늘어나고 안쪽 figure 는 그대로라 어긋난 채로 남는다.
 *
 *     aspect-ratio 6/5: 현재 썸네일이 전부 300×250(=1.2)이라 지금은 크롭이
 *           0 이다. 비율이 다른 이미지가 올라와도 격자가 깨지지 않게 고정해 둔 것.
 *           [E] 의 "크롭 말고 전체 축소" 결정과 충돌하지 않는다 —
 *           1열일 때는 이웃과 맞출 대상이 없어 원비율이 옳았고, 2열은 반대다.
 *
 *     범위: max-width:767px 안에서만. 데스크톱 291×250 4열은 그대로 둔다.
 *     선행 규칙(4)·[E])이 width:100% !important 라 같은 특정도로 뒤에 온다.
 * ========================================================================== */
@media screen and (max-width: 767px) {

	.mourworks_list.grid > ul {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 12px !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	/* float 시절 마진 제거 — gap 과 겹치면 24px 이 된다 */
	.mourworks_list.grid > ul > li,
	.mourworks_list > ul > li {
		width: auto !important;      /* 100% 가 아니라 트랙에 맡긴다 */
		float: none !important;
		height: auto !important;
		margin: 0 !important;
		display: flex !important;
		flex-direction: column !important;
	}

	.mourworks_list.grid > ul > li > figure,
	.mourworks_list.grid > ul > li > figure.effect-zoe {
		margin: 0 !important;
		width: 100% !important;
		flex: 1 1 auto !important;
		display: flex !important;
		flex-direction: column !important;
	}

	.mourworks_list.grid > ul > li figure img {
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 6 / 5;
		object-fit: cover !important;
		flex: 0 0 auto !important;
	}

	/* 카드 전체를 탭 영역으로 — 얇은 띠만 링크면 제목 텍스트 18px 이 전부다.
	   데스크톱은 figcaption>a 가 absolute + height:100% 로 카드를 덮는 판이지만
	   26) 에서 캡션을 흐름으로 되돌리며 그 판도 같이 풀렸다(제목 줄만 눌린다).
	   a 를 다시 absolute 로 만들면 제목이 흐름에서 빠지므로, a 는 흐름에 두고
	   ::after 만 카드 전체에 펼친다(stretched link). 177×185 → 44px 기준 통과. */
	.mourworks_list.grid > ul > li > figure {
		position: relative !important;
	}
	.mourworks_list.grid > ul > li figure figcaption > a::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 5;
	}

	/* 캡션 — 제목 한 줄짜리 띠. 데스크톱은 hover 로 올라오는 오버레이라
	   hr·평수·설명을 다 담을 자리가 있지만, 모바일은 hover 가 없어 늘 떠 있다.
	   늘 보이는 것에 정보를 다 얹으면 썸네일이 밀린다 → 제목만 남긴다.
	   flex:1 은 유지 — 제목이 1줄인 카드와 2줄인 카드의 밑변을 맞춘다. */
	.mourworks_list.grid > ul > li figure figcaption {
		flex: 1 1 auto !important;
		padding: 9px 10px 10px !important;
	}

	/* hr 은 hover 오버레이용 장식이라 늘 보이는 띠에서는 두께만 차지한다.
	   설명은 8건 모두 비어 있으나 등록될 수 있으므로 같이 눌러 둔다. */
	.mourworks_list.grid > ul > li figure.effect-zoe hr,
	.mourworks_list.grid > ul > li figure.effect-zoe p.description {
		display: none !important;
	}

	/* 제목 — 무조건 한 줄. 줄바꿈을 허용하면 카드마다 띠 두께가 달라진다.
	   단지명은 "반여동메가센텀꿈에그린" 처럼 띄어쓰기가 없어 전역
	   word-break:keep-all(style.css:2) 로는 꺾이지도 않고 넘쳐 나갔다(320px +46px).
	   nowrap + ellipsis 로 넘침과 두께를 한 번에 잡는다.
	   16px 은 2열 폭(153px)에서 말줄임이 과해 보조 정보 크기로 내린다. */
	.mourworks_list.grid > ul > li figure.effect-zoe .list_title {
		font-size: var(--fs-small) !important;      /* 13px */
		font-weight: var(--fw-small) !important;
		line-height: 1.4 !important;
		display: block !important;
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
	}

	/* 평수 — 제목이 잘리면 "51py" 가 같이 날아가므로 아래 줄에 따로 살려 둔다.
	   제목보다 한 단 작게. 두 줄 모두 1줄 고정이라 모든 카드의 띠 두께가 같다. */
	.mourworks_list.grid > ul > li figure.effect-zoe .list_text {
		display: block !important;
		font-size: var(--fs-caption) !important;    /* 12px */
		font-weight: var(--fw-small) !important;
		line-height: 1.35 !important;
		padding-top: 2px !important;
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
	}
	.mourworks_list.grid > ul > li figure.effect-zoe hr {
		margin-bottom: 7px !important;
	}
}


/* ============================================================================
 * 46) [6차] WHO WE ARE 인포그래픽 — 숫자 정렬 · ∞ 크기 · 그룹 위계 · 본문 굵기
 *
 *  (1) 숫자가 원 정중앙이 아니다 — 아래로 7px
 *      .pie_progress 박스가 120 이 아니라 120×124 다. 안의 <svg> 가 display:inline
 *      이라 baseline 아래 4px 여백이 붙는다. 숫자는 top:50% 기준이므로 그 4px 의
 *      절반(2px)만큼 이미 내려가 있고, 여기에 style.css:369 의 margin-top:5px 가
 *      더해진다. svg 를 block 으로 바꿔 박스를 120 으로 되돌리고 margin 을 지운다.
 *      (데스크톱 200px 원에서는 48px 숫자 기준으로 잡은 값이라 그대로 둔다.)
 *
 *  (2) 4번째 '그레고리의 띠'(∞) 가 너무 크다
 *      .counter 의 배경(icon01.png)이 background-size:contain 이라 120px 박스를
 *      가득 채운다. 나머지 셋은 얇은 링 안에 22px 숫자뿐이라 4번만 덩어리져 보인다.
 *      박스(120px)는 그대로 둬야 열이 맞으므로 배경 크기만 60px 로 반 줄인다.
 *
 *  (3) 위계가 뒤집혀 있다
 *      한 덩어리는 [원 + 설명(아이콘·부제·본문)] 인데
 *      원→설명 40px  >  열 간격 12px  이라 옆 열이 더 가깝다.
 *      덩어리 안을 좁히고(16px) 덩어리 사이를 벌린다(열 28 / 행 48).
 *
 *  (4) 본문이 Light(300)
 *      39) 가 .text 로 400 을 줬지만 style.css:160 의 `.mwork .wlist .text` 가
 *      특정도 (0,3,0) 로 이겼다. 같은 특정도로 뒤에서 덮는다.
 *      12px 은 우리 스케일의 하한이라 크기 대신 굵기로 벌충한다(--fw-small).
 *
 *  범위: max-width:767px 안에서만. 데스크톱 4열 200px 원은 그대로.
 * ========================================================================== */
@media screen and (max-width: 767px) {

	/* (1) 숫자 정중앙 */
	.mwork_list .pie_progress svg {
		display: block !important;   /* inline baseline 4px 제거 → 박스 120×120 */
	}
	.mwork_list .pie_progress__number {
		margin-top: 0 !important;    /* style.css:369 의 5px 상쇄 */
	}

	/* (2) ∞ 반으로 */
	.mwork_list .work .counter {
		background-size: 60px auto !important;
	}

	/* (3) 덩어리 안은 좁게, 덩어리 사이는 넓게 */
	.mwork_list {
		gap: 48px 28px !important;   /* 행 24→48, 열 12→28 */
	}
	.mwork .wlist {
		margin-top: 16px !important; /* 원→설명 40→16 */
	}

	/* (4) 본문 굵기 — Light(300) → 500 */
	.mwork .wlist .text,
	.mwork_list .wlist .text {
		font-weight: var(--fw-small) !important;
		font-size: var(--fs-caption) !important;   /* 12px 유지 */
		line-height: var(--lh-body) !important;
		color: #707070 !important;
	}
}


/* ============================================================================
 * 47) [6차] OUR CHARACTER — 2행 2열, 셀 안은 [이미지 / 부제 / 본문] 세로
 *
 *     이전([D]): 이미지 왼쪽 96px · 텍스트 오른쪽, 1열 4행.
 *     세로로 길어 4개를 비교해 읽기 어렵고, 이미지가 작아 인물이 안 보인다.
 *
 *     이미지는 li 의 background 다(character0X.png, 281×187 = 3:2).
 *     padding-top 을 % 로 주면 요소 '폭' 기준이라 열 폭이 변해도 비율이 유지된다.
 *     100/1.503 = 66.5%. background-size:100% auto 와 짝을 맞춘다.
 *
 *     본문 안 <br><br> — 두 줄 띄기라 리드 문장과 본문이 남남처럼 벌어졌다.
 *     원래 '해결사' 와 '무엇을 도와드릴까요?' 가 붙어 보이던 것과 같은 뿌리다
 *     (덩어리 안이 덩어리 사이보다 넓다). 둘째 <br> 만 접어 한 줄 띄기로 만든다.
 *     마크업은 그대로 두므로 데스크톱 2단 배치는 영향이 없다.
 *
 *     범위: max-width:767px 안에서만.
 * ========================================================================== */
@media screen and (max-width: 767px) {

	.monly_list > ul {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 32px 16px !important;      /* 행 32 / 열 16 — 덩어리 사이 */
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.monly_list li[class^="list"] {
		width: auto !important;         /* 트랙에 맡긴다 */
		height: auto !important;
		min-height: 0 !important;
		display: block !important;      /* [D] 의 flex 해제 */
		float: none !important;
		margin: 0 !important;
		border-bottom: 0 !important;    /* [D] 의 행 구분선 — 격자에선 불필요 */
		background-position: center top !important;
		background-size: 100% auto !important;
		background-repeat: no-repeat !important;
		padding: 66.5% 0 0 0 !important;  /* 281×187 = 3:2 → 이미지 높이 */
		box-sizing: border-box;
	}

	/* 부제 — 이미지 바로 아래. 밑줄로 본문과 나눈다. */
	.monly_list li[class^="list"] strong,
	.monly_list li[class^="list"] strong.fr {
		display: block !important;
		float: none !important;
		width: 100% !important;
		text-align: left !important;
		margin: 12px 0 8px !important;
		padding-bottom: 7px !important;
		border-bottom: 1px solid #d5d5d5 !important;
	}

	/* 본문 */
	.monly_list li[class^="list"] p {
		display: block !important;
		width: 100% !important;
		float: none !important;
		margin: 0 !important;
		padding: 0 !important;
		text-align: left !important;
		box-sizing: border-box;
	}

	/* 수동 줄바꿈 전부 해제 — 폭에 맞춰 자연스럽게 흐르게 한다.
	   <br> 위치는 데스크톱 280px 단 기준으로 찍힌 것이라 175px 열에서는
	   이미 꺾인 자리를 한 번 더 끊어 계단처럼 어긋난다.
	   리드 문장(<br><br> 뒤)도 본문과 한 덩어리가 된다 — 이미지/부제/본문 3단.
	   주의: <br> 를 지우면 앞뒤 텍스트가 붙는다. 소스에 줄바꿈이 있는 자리는
	   공백으로 접히지만 "있습니다.<br/>0.1.0..." 한 곳만 붙어 있어
	   index.htm 에서 그 <br/> 뒤에 줄바꿈을 넣었다(데스크톱은 줄머리 공백 → 무영향). */
	.monly_list li[class^="list"] p br {
		display: none !important;
	}
}


/* ============================================================================
 * 48) [6차] WHO WE ARE · OUR CHARACTER 타입 정렬 — 하드코딩 제거
 *
 *     점검 결과 두 섹션이 같은 역할에 서로 다른 크기를 쓰고 있었다.
 *
 *                    WHO WE ARE      OUR CHARACTER
 *       부제           15px (하드)      18px (--fs-title)
 *       본문           12px             14px (--fs-body)
 *       원 안 숫자      22px (하드)       —
 *
 *     둘은 나란히 붙은 2열 카드 섹션이고 열 폭도 169 / 175px 로 거의 같다.
 *     크기가 다를 근거가 없다 — 같은 역할은 같은 토큰을 본다.
 *
 *       부제  → --fs-title (18px)      카드 그룹 헤더
 *       본문  → --fs-small (13px)      170px 열에 맞는 값. 12px 은 캡션 하한이라
 *                                      여러 줄 본문에 쓰기엔 빡빡하고,
 *                                      14px 은 열당 11자로 줄이 너무 잘게 끊긴다.
 *       숫자  → --fs-metric (26px)     22px 은 부제 대비 1.47배로 주인공이 덜 섰다.
 *                                      26px 이면 2배 → 원 안이 초점이 된다.
 *
 *     이제 세 값 모두 1) 블록의 토큰 한 줄로 움직인다.
 * ========================================================================== */
@media screen and (max-width: 767px) {

	/* 원 안 숫자 — 인포그래픽의 주인공 */
	.mwork_list .pie_progress__number {
		font-size: var(--fs-metric) !important;
		font-weight: var(--fw-strong) !important;
		line-height: 1 !important;
	}

	/* 부제 — 두 섹션 동일 */
	.mwork_list .wlist strong,
	.monly_list li[class^="list"] strong,
	.monly_list li[class^="list"] strong.fr {
		font-size: var(--fs-title) !important;
		font-weight: var(--fw-strong) !important;
		line-height: var(--lh-title) !important;
	}

	/* 본문 — 두 섹션 동일 */
	.mwork .wlist .text,
	.mwork_list .wlist .text,
	.monly_list li[class^="list"] p {
		font-size: var(--fs-small) !important;
		font-weight: var(--fw-small) !important;
		line-height: var(--lh-body) !important;
	}
}


/* ============================================================================
 * 49) [6차] 섹션 상하 패딩 축소 (모바일)
 *
 *     style.css:140 `.content,.mfooter { padding:100px 0 }`.
 *     데스크톱 1440px 에서 100px 은 화면 높이의 12% 지만,
 *     390px 모바일에서는 위아래 합쳐 200px — 한 화면(844px)의 24% 가 빈다.
 *
 *     !important 를 쓰지 않는다.
 *     common.css 의 .pb0 / .pb60 이 !important 로 바닥 패딩을 따로 지정하는데
 *     (.monly 는 pb0 로 다음 섹션과 붙이는 게 의도),
 *     여기서 !important 를 쓰면 뒤에 오는 규칙이라 그 의도를 덮어 버린다.
 *     대신 `section.content` (0,1,1) 로 `.content` (0,1,0) 만 이기게 한다.
 *     -> 기본값은 줄이고, pb0/pb60 의 예외는 그대로 살아남는다.
 * ========================================================================== */
@media screen and (max-width: 767px) {
	section.content,
	footer.mfooter {          /* CONTACT US 는 <section> 이 아니라 <footer> 다 */
		padding-top: var(--sp-section);
		padding-bottom: var(--sp-section);
	}

	/* .footer_area 는 mfooter 안쪽 래퍼로 바닥에 100px 을 또 얹는다.
	   (0,2,0) 으로 style.css:333 `.footer_area` (0,1,0) 만 이긴다. */
	.footer_area.ma {
		padding-bottom: var(--sp-section);
	}
}


/* ============================================================================
 * 50) [6차] OUR CHARACTER 하단 여백 (모바일)
 *
 *     섹션에 .pb0 (common.css, !important) 가 붙어 있다. 데스크톱은 li 가
 *     280px 고정이고 텍스트가 그 안 위쪽에만 있어 아래에 저절로 여백이 남는다.
 *     47) 에서 2×2 격자로 바꾸며 li 높이가 내용에 맞게 줄자, 마지막 줄 글자가
 *     섹션 경계에 그대로 붙었다.
 *
 *     .pb0 는 건드리지 않는다 — !important 라 이기려면 뒤에서 덮어야 하는데
 *     그러면 이 유틸리티를 쓰는 다른 곳까지 흔든다.
 *     대신 안쪽 래퍼(.monly.ma)에 바닥 여백을 준다.
 * ========================================================================== */
@media screen and (max-width: 767px) {
	.monly.ma {
		padding-bottom: var(--sp-section);
	}
}


/* ============================================================================
 * 51) [6차] BRANCH — 1열 유지 · 육각형 안 정보 중앙 정렬 · 텍스트 크기만 교정
 *
 *  (1) 정보가 육각형 아래쪽에 몰려 있었다 (위 235px : 아래 30px).
 *      style.css:240 `.pimg0X { padding-top:180px }` 과
 *      style.css:244 `.wlist { margin:55px 0 30px }` 이 429×483 데스크톱 육각형
 *      기준값인데, 박스만 줄고 이 값들은 그대로 남았다.
 *      -> 고정 오프셋을 걷어내고 flex 로 가운데 정렬한다.
 *
 *  (2) 2열은 쓰지 않는다.
 *      칸이 좁으면 주소가 3~4줄로 늘어나 내용 높이가 육각형 비율을 넘어선다.
 *      배경을 늘려 맞추면(background-size:100% 100%) 도형이 세로로 찌그러지고,
 *      비율을 지키면(contain) 글자가 기울어진 변 밖으로 나간다. 둘 다 안 된다.
 *      -> 1열. aspect-ratio 로 박스를 도형 비율에 묶고 contain 으로 정확히 맞춘다.
 *
 *  (3) 위계는 원본 관계를 그대로 둔다 — 라벨(strong)이 작고, 값이 크다.
 *      크기만 우리 스케일로 옮기고 Light(300)만 걷어낸다.
 *        라벨(지점명·연락처·주소)  14px      → --fs-small    13px
 *        값(실장명·번호·주소)      18px/300  → --fs-subtitle 16px / 400
 *      어두운 초록 배경에서 300 은 획이 날아간다.
 *
 *     범위: max-width:767px 안에서만.
 * ========================================================================== */
@media screen and (max-width: 767px) {

	.mservice .mservice_list,
	.mservice_list {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.mservice .partner,
	.mservice_list .partner {
		width: 100% !important;
		max-width: 340px !important;
		height: auto !important;
		min-height: 0 !important;
		aspect-ratio: 429 / 483;       /* 박스를 육각형 비율에 묶는다 */
		margin: 0 auto 18px !important;
		float: none !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		background-size: contain !important;   /* 비율 그대로. 찌그러지지 않는다 */
		background-position: center !important;
		padding: 26px 34px !important;         /* 기울어진 변을 피하는 좌우 여백 */
		box-sizing: border-box !important;
	}

	/* 데스크톱 육각형(483px) 기준 오프셋 제거 + 로고 축소 */
	.mservice .partner .pimg01,
	.mservice .partner .pimg02 {
		width: 100% !important;
		padding-top: 40px !important;              /* 로고 자리만 */
		background-position: center top !important;
		background-size: 64px auto !important;
	}

	/* 값(실장명·전화번호·주소) — 원본 18px/300 */
	.mservice .wlist {
		margin: 10px 0 0 !important;
		font-size: var(--fs-subtitle) !important;
		font-weight: var(--fw-body) !important;    /* Light(300) 금지 */
		line-height: var(--lh-body) !important;
		color: #ffffff !important;
	}

	/* 라벨(지점명·연락처·주소) — 원본대로 값보다 작게 */
	.mservice .wlist strong {
		font-size: var(--fs-small) !important;
		font-weight: var(--fw-small) !important;
		color: #ffffff !important;
	}

	/* 주소는 공백 없는 긴 지명이 섞인다 */
	.mservice .wlist,
	.mservice .wlist a {
		overflow-wrap: anywhere !important;
	}
	.mservice .btn02 {
		font-size: var(--fs-small) !important;
		margin-top: 12px !important;
	}
}


/* ============================================================================
 * 52) [6차] REQUEST 이용절차(.step) — 2행 4열
 *
 *  왜 깨졌나
 *    아이콘 7개가 <li> 가 아니라 <ul> 하나에 스프라이트 띠로 깔려 있다.
 *      style.css:267  .mform .step ul { background:url(icon.png) 0 -48px }
 *      style.css:272  .mform .step li { width:125px; height:103px; float:left }
 *    ul 이 875px(=7×125) 일 때만 그림과 칸이 맞는 구조다.
 *    390px 에서는 ul 이 258px 로 줄어 li 가 2개씩 4행으로 흐르는데,
 *    배경은 ul 좌상단에 한 번만 그려지므로 첫 칸 말고는 아이콘이 없고,
 *    ul 은 height:103px 고정이라 3·4행이 박스 밖으로 튀어나가 아래 문구와 겹쳤다.
 *
 *  배치 — 라벨까지 8칸으로 보고 4열 2행
 *      [방문견적 이용절차][무료방문상담][사무실 상담][견적확인 및 계약]
 *      [디자인 미팅]     [공사시작]    [공사완료 및 촬영][사후관리]
 *    라벨(strong)은 ul 의 형제라 같은 격자에 못 들어간다.
 *    -> .step 을 격자로 만들고 ul 에 display:contents 를 줘서
 *       li 들이 조부모 격자의 직접 항목이 되게 한다.
 *
 *  아이콘 — 스프라이트를 0.68배로 줄여 쓴다
 *    390px 에서 한 열이 87px, 320px 에서는 69.5px 다. 원본 125px 칸은 못 들어간다.
 *    background-size 로 시트 전체를 0.68배(895→608.6px) 하고 좌표도 함께 줄인다.
 *    래스터라 확대는 뭉개지지만 축소는 괜찮다.
 *
 *    125px 칸의 좌우 끝에는 아이콘이 아니라 '연결 기호'(OR, ›)가 있다.
 *    가로로 이어 붙였을 때 칸과 칸 '사이'에 놓이라고 그린 것이라,
 *    칸을 통째로 잘라 격자에 세우면 조각난 기호가 양옆에 붙는다.
 *
 *    아이콘은 칸 정중앙에 있지 않다. 캔버스로 잉크 범위를 직접 스캔한 값:
 *      중심 x  68 · 191 · 317 · 442 · 567 · 691 · 815   (칸 중앙 대비 +2.5~+5.5)
 *      연결 기호 118~137 · 249~258 · 374~383 · 499~508 · 624~633 · 749~758
 *      세로 잉크 y 59~109 (51px)
 *    i*125+62.5 로 계산하면 s2 에서 'OR' 오른쪽 끝이 1.2px 물린다.
 *    -> 실측 중심을 쓰고 창은 91px(=62/0.68). 반폭 45.5px 이라
 *       모든 연결 기호에서 최소 4.5px 떨어진다.
 *
 *  구분선·화살표는 데스크톱 것을 그대로 쓴다
 *    데스크톱은 ul 의 border-left 로 라벨과 목록을 가르고,
 *    그 선 위에 icon_arrow2.png(8×15) 를 얹는다.
 *    격자에서는 선이 ul 이 아니라 라벨 칸의 오른쪽 변이므로
 *    strong 의 border-right 로 옮기고, 화살표는 ::after 로 선 위에 올린다.
 *    ::after 에 흰 배경을 깔아 선을 끊어야 데스크톱과 같은 모양이 된다.
 *
 *  범위: max-width:767px 안에서만. 데스크톱 1행 가로 흐름은 그대로.
 * ========================================================================== */
@media screen and (max-width: 767px) {

	.mform .step {
		display: grid !important;
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
		gap: 20px 6px !important;
		padding-left: 0 !important;
		text-align: center;
	}
	.mform .step.mb90 {
		margin-bottom: 40px !important;   /* common.css .mb90(90px, !important) 를
		                                     (0,2,0) 특정도로 이 요소에서만 이긴다 */
	}

	/* 라벨 = 첫 칸. 데스크톱의 세로 구분선을 이 칸의 오른쪽 변으로 옮긴다. */
	.mform .step strong {
		grid-column: 1 !important;
		grid-row: 1 !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		position: relative;
		width: auto !important;
		float: none !important;
		margin: 0 !important;
		padding: 0 10px 0 0 !important;
		border-right: 1px solid #828282;
		font-size: var(--fs-body) !important;
		font-weight: var(--fw-strong) !important;
		line-height: var(--lh-title) !important;
		text-align: center !important;
	}
	/* 데스크톱과 같은 화살표(icon_arrow2.png).
	   데스크톱 실측: 아이콘 8×15 이고 왼쪽 변이 세로선과 같은 x 에서 시작한다.
	   선을 끊지 않고 선에 붙어 오른쪽으로 뻗는 형태다. 그대로 맞춘다.
	   right:-8px + width:8px → 왼쪽 변이 padding box 오른쪽(= 선 왼쪽 변)에 닿는다. */
	.mform .step strong::after {
		content: "";
		position: absolute;
		right: -8px;
		top: 50%;
		margin-top: -7.5px;
		width: 8px;
		height: 15px;
		background: url("/_public/images/main/icon_arrow2.png") no-repeat center;
	}
	/* 원본의 절대배치 화살표는 데스크톱 좌표(top:45px/left:206px) 기준이라 접는다 */
	.mform .step .mform_icon {
		display: none !important;
	}

	/* ul 을 투명하게 만들어 li 가 .step 격자의 항목이 되게 한다 */
	.mform .step ul {
		display: contents !important;
		height: auto !important;
		border-left: 0 !important;
		background: none !important;
	}

	.mform .step li {
		width: auto !important;
		height: auto !important;
		float: none !important;
		display: block !important;
		margin: 0 !important;
		background: none !important;   /* 아이콘은 ::before 가 그린다 */
	}

	.mform .step li::before {
		content: "";
		display: block;
		width: 62px;                   /* 91 × 0.68 */
		height: 36px;                  /* 51 × 0.68 = 34.7, 여유 1.3 */
		margin: 0 auto 8px;
		background-image: url("/_public/images/main/icon.png");
		background-repeat: no-repeat;
		background-size: 608.6px auto; /* 895 × 0.68 */
	}
	/* x = -(실측중심 × 0.68 − 31),  y = -(59 × 0.68) */
	.mform .step li.s1::before { background-position:  -15.24px -40.12px; }
	.mform .step li.s2::before { background-position:  -98.88px -40.12px; }
	.mform .step li.s3::before { background-position: -184.56px -40.12px; }
	.mform .step li.s4::before { background-position: -269.56px -40.12px; }
	.mform .step li.s5::before { background-position: -354.56px -40.12px; }
	.mform .step li.s6::before { background-position: -438.88px -40.12px; }
	.mform .step li.s7::before { background-position:  -523.2px -40.12px; }

	.mform .step li span {
		display: block !important;
		margin-top: 0 !important;      /* ::before 가 아이콘 높이를 차지한다 */
		padding-left: 0 !important;    /* 원본의 10px 치우침 제거 */
		font-size: var(--fs-caption) !important;
		font-weight: var(--fw-small) !important;
		line-height: 1.35 !important;
		word-break: keep-all;
	}
}


/* ============================================================================
 * 53) [6차] REQUEST 폼 — 글자가 안 읽힌다 (대비)
 *
 *     base.css:11 의 전역 리셋이 color:#d6d6d6 이고, style.css:2 가 그걸
 *     #252525 로 되돌리는 요소 목록에 strong·span·label 이 빠져 있다.
 *     거기에 폼 자체가 "아직 입력 안 한 항목은 흐리게" 를 #bcbcbc 로 잡았다.
 *
 *     실측 대비 (흰 배경, WCAG AA 기준 4.5:1)
 *       안내문구 .text01   #d6d6d6  1.45:1
 *       미입력 질문 dt      #bcbcbc  1.90:1   ← 10문항 중 9개
 *       보조설명 .f12       #bcbcbc  1.90:1
 *       지점 선택 label     #d4d4d4  1.48:1
 *
 *     .on(입력 완료) 만 #252525 인데, .on 을 붙이는 JS 는 달력 onSelect 뿐이다.
 *     텍스트 입력에는 아무 핸들러가 없어 타이핑한 글자도 #bcbcbc 로 남는다.
 *     즉 "흐림"이 진행 표시가 아니라 기본 상태다 — 의도된 점진적 노출이 아니라
 *     읽을 수 없는 기본값이다.
 *
 *     처리: 흐린 느낌(위계)은 남기되 전부 AA 위로 올린다.
 *           입력한 글자는 상태와 무관하게 진하게 — 자기가 뭘 쳤는지는 보여야 한다.
 *
 *     범위: max-width:767px. 데스크톱도 같은 문제지만 이번 작업은 모바일이다.
 * ========================================================================== */
@media screen and (max-width: 767px) {

	/* 안내 문구 — 색은 데스크톱과 같은 #d6d6d6 로 맞춘다(요청).
	   다만 16px 은 데스크톱 23px 보다 획이 얇아 보이므로 굵기를 500 으로 올린다.
	   ※ #d6d6d6 은 흰 배경에서 1.45:1 로 WCAG AA(4.5:1) 를 크게 밑돈다.
	     데스크톱도 동일하다. 읽히게 하려면 #767676(4.5:1) 이 하한이다. */
	.mform_list .mfrom_text .text01 {
		font-size: var(--fs-subtitle) !important;
		font-weight: var(--fw-small) !important;   /* 400 → 500 */
		line-height: var(--lh-body) !important;
		color: #d6d6d6 !important;                 /* 데스크톱과 동일 */
	}

	/* 미입력 질문 — 흐리되 읽히게. .on 은 #252525 라 위계는 그대로 남는다. */
	.mform_list dt,
	.mform_list dd {
		color: #5F5F5F !important;              /* 6.9:1 */
		font-weight: var(--fw-strong) !important;
	}
	/* 입력 완료(.on) 는 진하게 — 위 규칙이 !important 라 이것도 !important 로
	   되살려야 한다. 안 그러면 "완료" 표시가 사라진다.
	   다만 크기는 키우지 않는다. style.css:285 가 15 → 16px 로 올려서
	   입력할 때마다 질문이 커졌다 작아지며 줄이 밀린다. 신호는 색·굵기로 충분하다. */
	.mform_list .on dt,
	.mform_list .on dd {
		color: #252525 !important;             /* 15.3:1 */
		font-weight: 600 !important;
		font-size: var(--fs-subtitle) !important;   /* 미입력 질문과 같은 크기 */
	}
	.mform_list dt {
		font-size: var(--fs-subtitle) !important;   /* 15px → 16px 로 통일 */
	}

	/* 보조설명 — 질문보다 한 단 흐리게 */
	.mform_list dt p.f12,
	.mform_list .on dt p {
		color: #757575 !important;              /* 4.6:1 */
		font-weight: var(--fw-small) !important;
	}

	/* 입력한 글자 — style.css:290 이 !important 로 #bcbcbc 를 박아 뒀다.
	   .on 이 아닌 칸(2·3·5번)은 타이핑해도 계속 흐렸다. */
	.mform_list .inupt_type,
	.mform_list .on dd .inupt_type {
		color: #252525 !important;
		font-size: var(--fs-form) !important;   /* iOS 자동 확대 방지 */
	}

	/* 지점 선택 버튼 — 미선택 상태 */
	.mform_list dd .flex-box .radio-type2 label {
		color: #6E6E6E !important;              /* 5.3:1 */
		font-size: var(--fs-small) !important;
	}
}


/* ============================================================================
 * 54) [6차] REQUEST 폼 — 간격 · 라디오 · 캘린더 · 개인정보 동의
 *
 *  (1) 입력창 기준선
 *      데스크톱은 dd 에 padding-left:15px 을 줘서 번호("1. ")를 뺀 질문 글자에
 *      입력창 왼쪽을 맞췄다. 폼 폭이 615px 로 고정이라 성립하는 방식이다.
 *      모바일은 폭이 거터로 정해지므로 그 15px 이 오른쪽만 좁히는 어긋남이 된다.
 *      -> dd·보조설명의 들여쓰기를 0 으로 두고 거터를 그대로 쓴다.
 *
 *  (2) 간격
 *      질문 → 입력창 18px, 항목 사이 40px. 데스크톱 615px 폼의 값이다.
 *      모바일은 한 항목이 세로로 더 길어 같은 값이 더 벌어져 보인다.
 *
 *  (3) 캘린더가 좁았던 진짜 이유
 *      jquery-ui.css `.ui-datepicker { padding:18px 91px }`.
 *      351px 중 182px 을 좌우 패딩이 먹어 달력에 167px 만 남았다(7칸×24px).
 *      화살표도 그 바깥(left:-40px)에 두고 top:90px 로 고정돼 있었다.
 *      -> 패딩을 줄이고 화살표를 헤더 안쪽 양 끝으로 옮긴다.
 *         표는 table-layout:fixed + 1/7 로 칸을 고르게 편다.
 *
 *  (4) 개인정보 동의 체크박스가 fr(오른쪽 흘림) 이었다 — 좌측 정렬로.
 *
 *  범위: max-width:767px 안에서만.
 * ========================================================================== */
@media screen and (max-width: 767px) {

	/* ── (1) 거터 기준 ─────────────────────────────────────────────── */
	.mform_list dd,
	.mform_list dt p.pl15,
	.mform_list dt p.f12 {
		padding-left: 0 !important;
	}
	.mform_list .inupt_type,
	.mform_list .on dd .inupt_type,
	.mform_list textarea {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	/* ── (2) 간격 ──────────────────────────────────────────────────── */
	.mform_list dt { margin-bottom: 10px !important; }   /* 18 → 10 */
	.mform_list dl { margin-bottom: 26px !important; }   /* 40 → 26 */

	/* ── 4번 라디오 (전체공사 / 부분공사) ──────────────────────────── */
	.mform_list dd .radio-group .radio-type1 + .radio-type1 {
		margin-left: 28px !important;                     /* 80 → 28 */
	}
	.mform_list dd .radio-group .radio-type1 label {
		font-size: var(--fs-subtitle) !important;         /* 16px */
		font-weight: var(--fw-strong) !important;         /* bold → 500 */
		padding-left: 30px !important;                    /* 40 → 30 */
		line-height: 22px !important;
		color: #5F5F5F !important;                        /* 미선택 #bcbcbc 는 1.90:1 */
	}
	/* 선택된 쪽은 원본대로 검정 (.on dd ... label { color:#000 }) */
	.mform_list dd .radio-group .radio-type1 input:checked + label {
		color: #252525 !important;
	}
	.mform_list dd .radio-group .radio-type1 label:before {
		width: 22px !important;                           /* 30 → 22 */
		height: 22px !important;
		border-width: 2px !important;
		top: 0 !important;
	}
	.mform_list dd .radio-group .radio-type1 label:after {
		width: 10px !important;                           /* 14 → 10 */
		height: 10px !important;
		top: 6px !important;
		left: 6px !important;
	}

	/* ── 7번 지점 선택 버튼 ────────────────────────────────────────── */
	.mform_list dd .flex-box .radio-type2 label {
		line-height: 40px !important;
	}

	/* ── 6·8번 캘린더 ──────────────────────────────────────────────── */
	.request_tab li {
		padding: 10px 6px !important;
		font-size: var(--fs-small) !important;
		color: #5F5F5F !important;
	}
	/* <strong> 은 style.css:2 의 색 지정 목록에 빠져 있어 base.css:11 의
	   전역 #d6d6d6(1.45:1)를 그대로 물려받는다. li 색을 따라가게 한다. */
	.request_tab li strong {
		font-weight: var(--fw-small) !important;
		font-size: var(--fs-small) !important;
		color: inherit !important;
	}

	.ui-datepicker {
		padding: 14px 10px !important;      /* 18px 91px — 좌우가 폭의 52% 였다 */
		box-sizing: border-box !important;
	}
	.ui-datepicker .ui-datepicker-header {
		padding: 0 38px !important;         /* 양 끝 화살표 자리 */
		min-height: 38px !important;
	}
	/* 화살표를 헤더 바깥(-40px)에서 안쪽 양 끝으로. 탭 영역도 넓힌다. */
	.ui-datepicker .ui-datepicker-prev,
	.ui-datepicker .ui-datepicker-next {
		width: 34px !important;
		height: 34px !important;
		top: 50% !important;
		margin-top: -17px !important;
		background-position: center !important;
	}
	.ui-datepicker .ui-datepicker-prev { left: 0 !important; right: auto !important; }
	.ui-datepicker .ui-datepicker-next { right: 0 !important; left: auto !important; }

	.ui-datepicker .ui-datepicker-title {
		margin-bottom: 10px !important;     /* 20 → 10 */
	}
	.ui-datepicker .ui-datepicker-title select {
		width: auto !important;
		max-width: 46% !important;
		font-size: var(--fs-form) !important;   /* iOS 확대 방지 */
		padding: 4px 2px !important;
		box-sizing: border-box !important;
	}

	/* 표를 폭에 고르게 편다 — 원본은 th/td 가 25px 고정이라 가운데로 뭉쳤다 */
	.ui-datepicker table { width: 100% !important; table-layout: fixed !important; }
	.ui-datepicker th,
	.ui-datepicker td {
		width: 14.28% !important;
		font-size: var(--fs-small) !important;
		padding: 0 !important;
	}
	.ui-datepicker th { color: #767676 !important; }   /* 요일 머리글 #d4d4d4 는 1.48:1 */

	/* 날짜 색 — 원본은 고를 수 있는 날짜까지 #d4d4d4(1.48:1) 라 거의 안 보인다.
	   고를 수 있는 날은 본문색으로, 지난 날짜만 흐리게 남긴다. */
	.ui-datepicker td a,
	.ui-datepicker td a.ui-state-default {
		color: #252525 !important;
	}
	.ui-datepicker td.ui-datepicker-unselectable span,
	.ui-datepicker td.ui-state-disabled span,
	.ui-datepicker .ui-datepicker-other-month span {
		color: #A0A0A0 !important;
	}
	/* 오늘/선택한 날짜는 어두운 원 위에 흰 글자다. 위 규칙(0,1,1)이
	   jquery-ui 의 .ui-state-active(0,1,0)를 이겨 버리므로 다시 올려 준다. */
	.mform_list .ui-datepicker td a.ui-state-active,
	.mform_list .ui-datepicker td .ui-state-active {
		color: #ffffff !important;
	}

	/* 연·월 선택 — jquery-ui.css 가 (0,2,1)+!important 로 #d4d4d4 를 박아 뒀다.
	   게다가 그 파일은 index.htm 에서 responsive.css '뒤에' 실린다.
	   순서로는 못 이기므로 특정도를 한 단 올린다(0,3,1). */
	.mform_list .ui-datepicker .ui-datepicker-title select {
		color: #252525 !important;
		font-weight: var(--fw-body) !important;
	}

	/* 지난 날짜 — 흐리게 두되 1.48:1 은 지나치다 */
	.mform_list .ui-datepicker td.ui-datepicker-unselectable,
	.mform_list .ui-datepicker td.ui-state-disabled {
		color: #A0A0A0 !important;
	}
	.ui-datepicker td span,
	.ui-datepicker td a {
		width: 100% !important;
		height: auto !important;
		display: block !important;
		padding: 9px 0 !important;          /* 22×22 → 세로 탭 영역 확보 */
		text-align: center !important;      /* 원본 right 정렬 */
		font-size: var(--fs-small) !important;
		box-sizing: border-box !important;
	}

	/* ── 10번 개인정보 ─────────────────────────────────────────────── */
	/* 약관 본문은 긴 글이라 한 단 내린다. readonly 라 포커스 확대 위험이 낮다. */
	.mform_list dd textarea[readonly].f12 {
		font-size: var(--fs-small) !important;
		line-height: var(--lh-body) !important;
	}
	/* 동의 체크박스 — 원본은 .fr(오른쪽 흘림) */
	.mform_list .agree,
	.mform_list .agree.fr {
		float: none !important;
		display: block !important;
		text-align: left !important;
		margin-top: 10px !important;
	}
	.mform_list .agree label {
		display: inline-flex !important;
		align-items: center !important;
		gap: 8px !important;
		font-size: var(--fs-small) !important;
		color: #5F5F5F !important;         /* 원본 #bcbcbc 는 1.90:1 */
	}
	.mform_list .agree input[type="checkbox"] {
		width: 18px !important;
		height: 18px !important;
		margin: 0 !important;
		flex: 0 0 auto !important;
	}
}


/* ============================================================================
 * 55) [6차] CONTACT US 푸터 — 정보를 지점 기준으로 다시 묶는다
 *
 *  왜 어긋났나
 *    푸터는 LOCATION / MAIL / TEL / FAX 4열 구조다(.list01~04).
 *    각 열의 N 번째 항목이 N 번째 지점을 가리키고, 열끼리 줄을 맞추려고
 *    MAIL·TEL 항목마다 <br/> 를 한두 개씩 끼워 넣어 높이를 맞춰 놨다.
 *    데스크톱에서 넷이 나란히 설 때만 성립하는 방식이라,
 *    모바일에서 세로로 쌓이면 주소 9개 → 메일 9개 → 전화 9개 순서가 되고
 *    <br/> 는 정렬 대신 빈 줄로만 남는다. 어느 번호가 어느 지점인지 알 수 없다.
 *
 *  왜 CSS 로 못 고치나
 *    세 열에 흩어진 데이터를 지점 단위로 다시 엮는 일이라 순서 재배치가 필요하다.
 *    CSS 로는 다른 부모에 있는 형제를 짝지을 수 없다.
 *    -> 규칙 L4(구조 자체가 다름): 모바일 전용 마크업을 따로 둔다.
 *       index.htm 의 <ul> 에 only-d 를 붙이고 .finfo_m(only-m) 을 새로 넣었다.
 *       데스크톱 4열은 손대지 않았다.
 *
 *  한 지점 = 한 덩어리, 라벨 열을 고정폭으로 세워 값을 맞춘다
 *      서울잠실점
 *      LOCATION  서울시 송파구 …
 *      HEAD      안헌민 실장
 *      TEL       010.2738.5820
 *      MAIL      yegacompany@naver.com
 *
 *  글꼴
 *    이 푸터의 값 텍스트는 Noto Sans KR 이다(style.css:2).
 *    라벨(.list_title)만 Nanum Gothic 으로 나오는데, 이건 의도가 아니라
 *    style.css:2 의 색·글꼴 지정 목록에 strong 이 빠져 base.css:11 의
 *    기본값이 남은 것이다. 그 우연을 따라 하지 않고 블록 전체를
 *    Noto Sans KR 로 맞춘다.
 *
 *  위계
 *    지점명만 크기로 세우고(본문급) 나머지 네 줄은 전부 캡션급 한 크기다.
 *    라벨과 값은 색으로만 나눈다 — 크기를 여러 단으로 쪼개면 9개 지점이
 *    반복될 때 화면이 시끄러워진다.
 *
 *  ※ 화명점 메일은 원본에서 href(yega_gg@naver.com)와 표기(yega0823@naver.com)가
 *    서로 다르다. 요청에 따라 원본 그대로 옮겼다.
 * ========================================================================== */
.finfo_m { display: none; }

@media screen and (max-width: 767px) {

	.finfo_m {
		display: block !important;
		width: 100%;
		text-align: left;
		box-sizing: border-box;
		/* strong 이 base.css 의 Nanum Gothic 을 물려받는 걸 막는다 */
		font-family: 'Noto Sans KR', sans-serif;
	}
	.finfo_m strong,
	.finfo_m address,
	.finfo_m a,
	.finfo_m span {
		font-family: inherit;
	}

	.finfo_m .fm_item {
		padding: 15px 0;
		border-bottom: 1px solid rgba(255, 255, 255, .12);
	}
	.finfo_m .fm_item:first-child { padding-top: 0; }

	/* 지점명 — 라벨 열에 선다. 유일하게 크기로 세우는 요소.
	   주소는 HEAD·TEL·MAIL 과 같은 값 열에 놓여 네 줄의 왼쪽 끝이 맞는다. */
	.finfo_m .fm_name {
		flex: 0 0 76px;            /* 라벨 열 폭 — "대구수성점" 5자 기준 */
		font-size: var(--fs-body);
		font-weight: var(--fw-strong);
		line-height: var(--lh-body);
		color: #ffffff;
		word-break: keep-all;
	}

	/* 나머지 세 줄 — 크기는 하나, 위계는 색으로만 */
	.finfo_m .fm_row {
		display: flex;
		align-items: center;   /* .tel-link(min-height:32px) 행도 라벨과 맞게 */
		gap: 10px;
		margin: 0 0 3px;
		font-size: var(--fs-caption);
		font-weight: var(--fw-small);
		line-height: var(--lh-body);
	}
	.finfo_m .fm_row:last-child { margin-bottom: 0; }
	.finfo_m .fm_row:first-child {
		margin-bottom: 7px;        /* 지점명 행 아래만 조금 더 */
		align-items: flex-start;   /* 주소가 2줄인 지점에서 지점명이 가운데로 내려가지 않게 */
	}

	/* 라벨 열 — 고정폭이라 값의 왼쪽 끝이 지점마다 같은 자리에 선다 */
	/* 라벨·값은 <span> 이라 style.css:2 가 14px 을 직접 박아 둔다.
	   부모(.fm_row)의 12px 이 상속되지 않으므로 여기서 다시 준다. */
	.finfo_m .fm_label {
		flex: 0 0 76px;            /* .fm_name 과 같은 폭이어야 값이 한 줄로 선다 */
		font-size: var(--fs-caption);
		color: #8C8C8C;            /* #6B6B6B 은 #252525 위에서 2.88:1 이었다 */
		letter-spacing: .02em;
	}
	.finfo_m .fm_val {
		flex: 1 1 auto;
		min-width: 0;
		font-size: var(--fs-caption);
		color: #D8D8D8;            /* 라벨과 색으로 벌린다 — 크기는 같다 */
		font-style: normal;
		overflow-wrap: anywhere;   /* 메일 주소는 공백이 없다 */
	}
	.finfo_m .fm_val a {
		color: inherit !important;
		text-decoration: none;
	}

	.finfo_m .fm_fax {
		border-bottom: 0;
		padding-top: 15px;
	}
}


/* ============================================================================
 * 56) [6차] REQUEST 후속 조정 — 라디오 · 캘린더 · 탭
 *
 *  (1) 4번 공사범위: 원 22 → 16px, 라벨 16 → 본문급(14px).
 *  (2) 캘린더
 *      - hover / 선택 날짜는 어두운 원 위 흰 글자다. 54) 의 날짜색 규칙(0,1,1)이
 *        jquery-ui 의 .ui-state-hover(0,1,0)를 이겨 검정으로 덮어 버렸다.
 *        모바일에 hover 는 드물지만 스타일러스·마우스·키보드 포커스에서 나온다.
 *      - 월 넘김 버튼과 연/월 드롭박스의 세로 중심을 맞춘다.
 *        원본은 버튼이 top:90px 고정, 드롭박스는 헤더 흐름이라 서로 어긋났다.
 *      - 드롭박스 숫자 16 → 본문급(14px).
 *        ※ iOS 는 16px 미만 폼 컨트롤에 포커스하면 확대한다. <select> 는 휠
 *          피커라 입력창만큼 문제되진 않지만, 확대가 보이면 이 값을 16 으로.
 *  (3) 6번 탭: 안내 문구와 선택한 날짜를 다른 줄로 나누고 크기를 한 단 내린다.
 * ========================================================================== */
@media screen and (max-width: 767px) {

	/* (1) 공사범위 라디오 */
	.mform_list dd .radio-group .radio-type1 label {
		font-size: var(--fs-body) !important;             /* 16 → 14 */
		padding-left: 24px !important;
		line-height: 16px !important;
	}
	.mform_list dd .radio-group .radio-type1 label:before {
		width: 16px !important;                           /* 22 → 16 */
		height: 16px !important;
		border-width: 2px !important;
		top: 0 !important;
	}
	.mform_list dd .radio-group .radio-type1 label:after {
		width: 6px !important;
		height: 6px !important;
		top: 5px !important;
		left: 5px !important;
	}

	/* (2) 캘린더 — hover·포커스도 흰 글자로 되돌린다 */
	.mform_list .ui-datepicker td a.ui-state-hover,
	.mform_list .ui-datepicker td .ui-state-hover,
	.mform_list .ui-datepicker td a.ui-state-focus,
	.mform_list .ui-datepicker td .ui-state-focus {
		color: #ffffff !important;
	}

	/* 헤더를 flex 로 묶어 버튼·드롭박스 세로 중심을 맞춘다 */
	.ui-datepicker .ui-datepicker-header {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		padding: 0 !important;
		min-height: 40px !important;
	}
	.ui-datepicker .ui-datepicker-prev,
	.ui-datepicker .ui-datepicker-next {
		position: static !important;   /* top:90px 고정 해제 */
		margin: 0 !important;
		flex: 0 0 34px !important;
		align-self: center !important;
	}
	/* DOM 순서가 prev → next → title 이라 그대로 두면 화살표 둘이 왼쪽에 붙는다.
	   원본은 absolute 라 순서가 상관없었다. flex 로 바꿨으니 order 로 세운다. */
	.ui-datepicker .ui-datepicker-prev  { order: 1 !important; }
	.ui-datepicker .ui-datepicker-title { order: 2 !important; }
	.ui-datepicker .ui-datepicker-next  { order: 3 !important; }

	.ui-datepicker .ui-datepicker-title {
		flex: 1 1 auto !important;
		margin: 0 !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 6px !important;
	}
	.mform_list .ui-datepicker .ui-datepicker-title select {
		font-size: var(--fs-body) !important;   /* 16 → 14 */
		margin: 0 !important;
	}
	.ui-datepicker table { margin-top: 8px !important; }

	/* (3) 6·8번 탭 — 안내 문구와 선택한 날짜를 줄 나눔 */
	.request_tab li {
		font-size: var(--fs-caption) !important;
		line-height: var(--lh-label) !important;
		word-break: keep-all;
	}
	.request_tab li strong,
	.request_tab li .onoff {
		display: block !important;
		width: 100% !important;
		font-size: var(--fs-caption) !important;
	}
	.request_tab li .onoff { margin-top: 3px !important; }
	.request_tab li .onoff span { font-size: var(--fs-small) !important; }
}


/* ============================================================================
 * 57) [6차] OUR PROJECT — 전폭 슬라이드 + 캡션 없는 사진 격자
 *
 *  구성
 *    [        슬라이드 (전폭)        ]   ← 사진 위 그라디언트 + 제목 + 점
 *    [ 사진 ][ 사진 ]                     ← 게시물 8개 전부, 캡션 없음
 *    [ 사진 ][ 사진 ]
 *
 *  슬라이드는 목록의 칸을 빼앗지 않는다.
 *    처음에는 첫 li 를 슬라이드로 썼는데 그러면 격자가 8개에서 7개로 줄었다.
 *    project-slide.js 가 <ul> 앞에 .op-slide 를 따로 만들어 8칸을 그대로 둔다.
 *
 *  그라디언트
 *    figcaption 은 카드 전체(inset:0)를 덮게 두고, 배경 그림만 하단 40% 에 깐다
 *    (background-size:100% 40% + position:bottom).
 *    캡션을 하단 40% 크기로 만들면 그 안의 <a> 도 40% 밖에 안 덮어
 *    사진 윗부분을 눌렀을 때 링크가 안 걸린다.
 *
 *  캡션 없는 카드의 접근성
 *    <img> 에 alt 가 없어서 링크 이름이 캡션 글자에서만 나온다.
 *    display:none 으로 지우면 사진 8장이 이름 없는 링크가 된다.
 *    -> 글자만 화면 밖으로 밀어내고(text-indent) 캡션 상자는 살려 둔다.
 *
 *  선택자에 .mourworks_list 를 앞세운 이유
 *    26) 이 `.mourworks figure.effect-zoe figcaption { position:static !important }`
 *    으로 캡션을 흐름으로 되돌린다(카드용). 슬라이드는 반대로 사진 위에 겹쳐야
 *    하는데 `.op-slide figcaption`(0,1,1) 은 그 규칙(0,2,2)에 진다.
 *    특이도를 올려야 오버레이가 선다. 안 그러면 캡션이 사진 아래로 밀린다.
 *
 *  범위: max-width:767px 안에서만. 데스크톱 4열 hover 오버레이는 그대로.
 * ========================================================================== */
.op-slide { display: none; }

@media screen and (max-width: 767px) {

	/* ── 슬라이드 ─────────────────────────────────────────────────── */
	.op-slide {
		display: block !important;
		width: 100%;
		margin: 0 0 12px;
	}
	.mourworks_list .op-slide figure.effect-zoe {
		position: relative !important;
		width: 100% !important;
		max-width: none !important;
		height: auto !important;
		max-height: none !important;
		margin: 0 !important;
		overflow: hidden !important;
		float: none !important;
	}
	.mourworks_list .op-slide figure.effect-zoe img {
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 16 / 10;
		object-fit: cover !important;
		display: block !important;
		max-width: none !important;
	}

	.mourworks_list .op-slide figure.effect-zoe figcaption {
		position: absolute !important;
		inset: 0 !important;
		height: auto !important;
		padding: 0 !important;
		background-color: transparent !important;
		background-image: linear-gradient(
			to top,
			rgba(0, 0, 0, .84) 0%,
			rgba(0, 0, 0, .52) 45%,
			rgba(0, 0, 0, 0)  100%) !important;
		background-repeat: no-repeat !important;
		background-position: left bottom !important;
		background-size: 100% 44% !important;   /* 하단 44% 에만 */
		transform: none !important;
		transition: none !important;
		pointer-events: none;                   /* 클릭은 안쪽 <a> 가 받는다 */
	}
	/* <a> 가 카드 전체를 덮는다 — 사진 어디를 눌러도 상세로 */
	.mourworks_list .op-slide figure.effect-zoe figcaption > a {
		position: absolute !important;
		inset: 0 !important;
		display: flex !important;
		flex-direction: column !important;
		justify-content: flex-end !important;
		align-items: flex-start !important;
		padding: 0 46px 16px 16px !important;   /* 오른쪽은 chevron 자리 */
		text-decoration: none !important;
		pointer-events: auto;
	}
	/* 우측 chevron — "누르면 상세로 간다"를 알리는 표시 */
	.mourworks_list .op-slide figure.effect-zoe figcaption > a::after {
		content: "" !important;
		position: absolute !important;
		right: 18px !important;
		bottom: 30px !important;
		width: 9px !important;
		height: 9px !important;
		border: 0 !important;
		border-top: 2px solid #ffffff !important;
		border-right: 2px solid #ffffff !important;
		transform: rotate(45deg);
		z-index: 2;
	}
	.mourworks_list .op-slide figure.effect-zoe .title_area {
		position: static !important;
		margin: 0 !important;
		width: 100%;
		text-align: left;
	}
	.mourworks_list .op-slide figure.effect-zoe .list_title {
		display: block !important;
		font-size: var(--fs-subtitle) !important;
		font-weight: var(--fw-strong) !important;
		line-height: 1.35 !important;
		color: #ffffff !important;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.mourworks_list .op-slide figure.effect-zoe .list_text {
		display: block !important;
		font-size: var(--fs-caption) !important;
		font-weight: var(--fw-small) !important;
		padding-top: 3px !important;
		color: #FCFABE !important;
	}

	/* ── 격자: 8칸 전부. 작품 목록과 같은 '탭하면 캡션이 올라오는' 카드 ──
	   1탭: 캡션이 아래에서 올라옴 / 2탭: 상세로 이동 (gallery-touch.js)
	   닫힘 상태에서는 chevron 도 숨긴다 — 75) 와 같은 규칙. */
	.mourworks_list.grid > ul > li figure.effect-zoe {
		overflow: hidden !important;      /* 캡션이 아래에 숨어 있다 */
		background: #1f2727;
	}
	.mourworks_list.grid > ul > li figure.effect-zoe figcaption {
		position: absolute !important;
		inset: 0 !important;
		width: 100% !important;
		height: 100% !important;
		padding: 0 !important;
		flex: none !important;
		background: rgba(60, 75, 75, .96) !important;
		color: #fff !important;
		transform: translateY(100%) !important;
		transition: transform .28s ease !important;
		overflow: hidden !important;
	}
	.mourworks_list.grid > ul > li figure.effect-zoe.is-open figcaption {
		transform: translateY(0) !important;
	}
	.mourworks_list.grid > ul > li figure.effect-zoe figcaption > a {
		position: absolute !important;
		inset: 0 !important;
		display: flex !important;
		flex-direction: column !important;
		justify-content: flex-start !important;
		padding: 14px 14px 40px !important;   /* 아래는 chevron 자리 */
		text-indent: 0 !important;
		white-space: normal !important;
		text-decoration: none !important;
		z-index: 1;
	}
	.mourworks_list.grid > ul > li figure.effect-zoe figcaption > a::after {
		content: none !important;
	}
	.mourworks_list.grid > ul > li figure.effect-zoe hr {
		display: block !important;
		position: static !important;
		width: 22px !important;
		margin: 0 0 8px !important;
		border: 0 !important;
		border-top: 2px solid #fff !important;
	}
	.mourworks_list.grid > ul > li figure.effect-zoe .title_area {
		position: static !important;
		margin: 0 !important;
	}
	.mourworks_list.grid > ul > li figure.effect-zoe .list_title {
		display: block !important;
		font-size: var(--fs-small) !important;
		font-weight: var(--fw-strong) !important;
		line-height: 1.4 !important;
		color: #fff !important;
		white-space: normal !important;
		overflow-wrap: anywhere !important;
		text-overflow: clip !important;
	}
	.mourworks_list.grid > ul > li figure.effect-zoe .list_text {
		display: block !important;
		font-size: var(--fs-caption) !important;
		font-weight: var(--fw-small) !important;
		padding-top: 2px !important;
		color: #FCFABE !important;
	}
	.mourworks_list.grid > ul > li figure.effect-zoe .description {
		display: none !important;
	}
	/* 좌하단 chevron — 열렸을 때만 */
	.mourworks_list.grid > ul > li figure.effect-zoe::after {
		content: none;
		position: absolute;
		left: 12px;
		bottom: 12px;
		width: 24px;
		height: 24px;
		border-radius: 50%;
		background: rgba(255, 255, 255, .18)
			url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 6l6 6-6 6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>")
			center / 14px 14px no-repeat;
		z-index: 2;
		pointer-events: none;
	}
	.mourworks_list.grid > ul > li figure.effect-zoe.is-open::after { content: ""; }
}


/* ============================================================================
 * 58) [6차] 공용 하단 바(본사 정보) — 배경이 내용보다 짧아 글자가 잘려 나갔다
 *
 *  증상: 390px 에서 TEL/FAX/MAIL 과 주소·저작권이 어두운 띠 밖으로 밀려나
 *        흰 배경 위 회색 글자가 됐다. 사실상 안 보인다.
 *
 *  원인: style.css:359 `.footer { height:90px; padding-top:30px }` — 높이 고정.
 *        데스크톱은 dl 이 한 줄(39px)이라 90px 안에 들어가지만,
 *        모바일은 dl 78px + 주소 36px + 저작권 49px = 163px 로 넘친다.
 *        배경색은 <footer> 상자(120px)에만 칠해지므로 그 아래는 맨 페이지다.
 *
 *  처리
 *    - height 를 auto 로 풀고 상하 여백을 다시 준다.
 *    - dl 은 <dt>TEL.</dt><dd>번호</dd> … 가 반복되는 구조다.
 *      grid 2열로 두면 라벨/값이 저절로 행마다 짝지어진다(55) 와 같은 방식).
 *      원본의 float:left + inline-block 조합은 좁은 폭에서 라벨과 값이
 *      다른 줄로 흩어진다(실측: 번호가 라벨보다 윗줄에 있었다).
 *    - 주소·저작권 #707070 은 #111 위에서 3.81:1 이라 AA 미달 → #8A8A8A(5.6:1).
 *
 *  범위: max-width:767px 안에서만.
 * ========================================================================== */
@media screen and (max-width: 767px) {

	.footer {
		height: auto !important;      /* 90px 고정이 잘라내던 원인 */
		min-height: 0 !important;
		padding: 28px 0 34px !important;
		text-align: left !important;
	}

	.footer .ftarea {
		width: 100% !important;
		padding: 0 16px !important;
		box-sizing: border-box;
	}

	/* <dt>라벨</dt><dd>값</dd> 반복 → 2열 격자가 그대로 표가 된다 */
	.footer .ftarea dl {
		display: grid !important;
		grid-template-columns: 46px 1fr !important;
		/* 33) 의 .tel-link 는 탭 영역 확보용으로 min-height:32px 이다.
		   그 행만 키가 커지므로 center 로 맞춰야 라벨과 값이 같은 줄에 앉는다. */
		align-items: center !important;
		gap: 5px 10px !important;
		width: 100% !important;
		margin: 0 0 12px !important;
		text-align: left !important;
	}
	.footer .ftarea dl dt,
	.footer .ftarea dl dd {
		display: block !important;
		float: none !important;       /* 원본 float:left 가 줄을 흩뜨린다 */
		width: auto !important;
		margin: 0 !important;
		font-size: var(--fs-caption) !important;
		line-height: var(--lh-body) !important;
	}
	.footer .ftarea dl dt {
		color: #E1E1E1 !important;
		font-weight: var(--fw-small) !important;
	}
	.footer .ftarea dl dd,
	.footer .ftarea dl dd a {
		color: #A8A8A8 !important;
		overflow-wrap: anywhere;
	}

	.footer .ftarea address {
		width: 100% !important;
		margin: 0 !important;
		font-size: var(--fs-caption) !important;
		font-weight: var(--fw-small) !important;
		line-height: var(--lh-body) !important;
		color: #8A8A8A !important;    /* #707070 은 #111 위에서 3.81:1 */
		word-break: keep-all;
		text-align: left !important;
	}

	.footer .copyright {
		padding: 14px 16px 0 !important;
		margin: 0 !important;
		font-size: var(--fs-caption) !important;
		color: #8A8A8A !important;
		text-align: left !important;
		word-break: keep-all;
	}
}


/* ============================================================================
 * 59) [6차] 지도 영역 — 위아래 검은 띠 사이에서 경계가 안 보인다
 *
 *     .map_area 는 CONTACT US(어두운 배경)와 공용 하단바(#111) 사이에 낀
 *     460px 블록이다. 지도가 뜨면 타일 때문에 저절로 구분되지만,
 *     안 뜨면 세 검은 덩어리가 이어져 어디가 지도 자리인지 알 수 없다.
 *     -> 프레임 색을 달리해 띠를 구분한다.
 *
 *     비어 있을 때(map_area--empty, map.js 가 붙인다)
 *       460px 빈칸은 모바일 화면의 절반이 넘는다. 자리를 남기되 높이를 줄이고
 *       점선 프레임으로 "여기가 지도 자리"임을 드러낸다.
 *       카카오 SDK 가 안 실리는 원인은 별개다 — 앱키 도메인 등록/만료 확인.
 *
 *     범위: max-width:767px 안에서만. 데스크톱 460px 지도는 그대로.
 * ========================================================================== */
@media screen and (max-width: 767px) {

	.map_area {
		border-top: 2px solid #3C4B4B;      /* 위아래 검정 띠와 구분되는 프레임 */
		border-bottom: 2px solid #3C4B4B;
		background-color: #1A1A1A;
		box-sizing: border-box !important;
	}

	/* 지도를 못 불러왔을 때 */
	.map_area.map_area--empty {
		height: 160px !important;           /* 460 → 160 */
		border: 2px dashed #4A5A5A;
		display: flex !important;
		align-items: center;
		justify-content: center;
	}
	.map_area.map_area--empty::after {
		content: "";
		width: 28px;
		height: 28px;
		border: 2px solid #4A5A5A;
		border-radius: 50% 50% 50% 0;
		transform: rotate(-45deg);          /* 지도 핀 모양 */
	}
}


/* ============================================================================
 * 60) [6차] GNB — 검색 버튼만 색이 다른 이유, 그리고 통일
 *
 *  왜 달랐나: 색을 정하는 방식이 서로 달랐다.
 *    로고    <img> + filter          (원본 PNG 가 #241A17)
 *    햄버거   CSS background-color   (#241A17)
 *    검색     PNG 파일 자체를 교체     ← 색이 자산에 박혀 있다
 *
 *    실측한 스프라이트 색
 *      search_icon.png   #4A4A4A   기본(투명 헤더)   ← 로고·햄버거는 #241A17
 *      search_icon2.png  #898989   navbar-shrink    ← 로고·햄버거는 #FFFFFF
 *      search_icon4.png  #FFFFFF   .sub(서브 헤더)
 *    상태가 바뀔 때마다 다른 파일을 물려야 해서 셋의 색이 어긋났다.
 *    검은 헤더에서 로고·햄버거는 흰데 검색만 #898989 로 뜬 게 이 때문이다.
 *
 *  처리: 검색 아이콘을 '그림'이 아니라 '마스크'로 쓴다.
 *    PNG 의 알파만 빌리고 색은 background-color 가 준다.
 *    -> 햄버거와 완전히 같은 방식이 되고, --gnb-ink 한 값이 둘을 함께 움직인다.
 *    상태 전환도 파일 교체가 아니라 토큰 값 하나만 바꾸면 된다.
 *
 *  마스크 미지원 브라우저: @supports 밖에 남겨 둔 규칙이 흰색 아이콘 파일을
 *    물려서 최소한 색은 맞춘다(스프라이트 교체 방식 그대로).
 * ========================================================================== */
@media screen and (max-width: 767px) {

	/* 상태별 잉크 — 로고 원본색과 같은 값에서 출발한다 */
	.header                { --gnb-ink: #241A17; }   /* 투명 헤더 */
	.header.navbar-shrink  { --gnb-ink: #ffffff; }   /* 스크롤 후 검은 헤더 */
	/* 서브 페이지 헤더는 사진 위에 앉는다. 원본도 검색 아이콘만 흰색으로
	   (search_icon4.png, :before #fff) 잡아 뒀는데 로고·햄버거는 어두운 채였다.
	   셋 다 흰색으로 맞춘다 — 사진 위에서 #241A17 은 읽히지 않는다.
	   (menu_topsub.php 의 <nav> 에 header--sub 를 붙였다) */
	.header--sub { --gnb-ink: #ffffff; }
	.header--sub .hgroup .logo img { filter: brightness(0) invert(1); }

	.yg-navtoggle span { background: var(--gnb-ink) !important; }

	/* 마스크 미지원 폴백 — 최소한 흰 상태끼리는 맞춘다 */
	.header.navbar-shrink .hgroup .search-button {
		background-image: url(/_public/images/main/search_icon4.png) !important;
	}
}

@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
	@media screen and (max-width: 767px) {
		.header .hgroup .search-button,
		.header .hgroup .search-button.sub,
		.header.navbar-shrink .hgroup .search-button {
			background-image: none !important;
			background-color: var(--gnb-ink) !important;
			-webkit-mask: url(/_public/images/main/search_icon.png) no-repeat center;
			mask: url(/_public/images/main/search_icon.png) no-repeat center;
			-webkit-mask-size: 19px 19px;
			mask-size: 19px 19px;
		}
	}
}


/* ============================================================================
 * 61) [6차] 회사소개 — 히어로 세로 중앙 · 대표 이미지 재배치 · DESIGNER 정리
 *
 * ── (1) 히어로 텍스트가 위로 치우쳤다
 *   .sub_visual 은 flex + align-items:center 라 이미 가운데 정렬처럼 보이지만,
 *   sub.css:8 의 `.visualbox { height:100% }` 가 남아 있어 상자가 히어로
 *   전체 높이를 채운다. 가운데 놓일 상자가 없는 셈이다.
 *   거기에 padding:80px 20px 0 이 얹혀 글자가 위에서 80px 지점에 앉았다.
 *   -> height 를 auto 로 풀고 위쪽 편중 패딩을 없앤다. 그래야 flex 가 센다.
 *
 * ── (2) 대표 이미지와 설명이 겹쳤다
 *   sub.css:41 `.yegacp_list { height:267px; background:cp01.png center }`
 *   사진이 '컨테이너 배경'이고 글은 그 위 좌우에 놓이는 데스크톱 3단 구성이다.
 *     .list01  width:430px float:left  (ul 은 margin-top:120px 로 사진 옆에 맞춤)
 *     .list02  margin-left:356px float:left
 *   390px 에서 내용은 542px 인데 상자는 267px 고정이라 사진 위로 다 쏟아졌다.
 *   -> 배경을 ::before 블록으로 꺼내 사진을 맨 위에 세우고,
 *      [사진 → 이름·직함 → 이력 → Leader Message] 순서로 쌓는다.
 *      사진은 267px 원본이라 그 이상 늘리지 않는다(래스터 확대 방지).
 *
 * ── (3) DESIGNER 카드
 *   .namebox 는 height:122px 인데 캐릭터 PNG 는 136px 이라 아래가 잘렸다.
 *   .nametxt 는 자식이 전부 float 이라 높이가 0 으로 무너져 있었다(실측 221×0).
 *   padding-left:145px 도 데스크톱 캐릭터 폭 기준이라 366px 화면에서
 *   글자 자리를 221px 만 남긴다.
 *   -> 캐릭터를 84px 로 줄이고, 이름줄을 flex 세로 배치로 바꾼다.
 *      전화·인스타는 아이콘(15×18 / 18×18)을 왼쪽에 붙인 한 줄씩.
 *
 *   범위: max-width:767px 안에서만.
 * ========================================================================== */
@media screen and (max-width: 767px) {

	/* ── (1) 히어로 ───────────────────────────────────────────────── */
	.sub_visual .visualbox {
		height: auto !important;      /* sub.css:8 의 height:100% 해제 — 이게 핵심 */
		padding: 0 20px !important;   /* 위쪽 80px 편중 제거 */
	}

	/* ── (2) 대표 이미지 ──────────────────────────────────────────── */
	.yegacp_list {
		height: auto !important;
		background: none !important;   /* 컨테이너 배경에서 꺼낸다 */
	}
	.yegacp_list::before {
		content: "";
		display: block;
		width: 100%;                   /* 거터까지 채운다 */
		aspect-ratio: 4 / 3;           /* 정사각(267×267)은 세로가 과하다 */
		margin: 0 0 22px;
		background: url("/_public/images/sub/cp01.png") center / cover no-repeat;
	}

	/* 370px 화면의 콘텐츠 폭(346px)을 상한으로 삼는다. 화면이 넓어져도
	   줄 길이는 그대로 두고 좌우 여백만 늘려 가운데에 세운다. */
	.yegacp_list .list01,
	.yegacp_list .list02 {
		width: 100% !important;
		max-width: 346px !important;
		float: none !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
	.yegacp_list .list02 { text-align: center !important; }

	/* 대표 소개는 좌우 두 칸으로 — 왼쪽 이름·직책·번호, 오른쪽 경력.
	   세로로만 쌓으면 네 줄짜리 경력이 이름과 같은 무게로 읽힌다. */
	.yegacp_list .list01 {
		display: grid !important;
		grid-template-columns: 108px 1fr !important;
		column-gap: 18px !important;
		align-items: start;
		text-align: left !important;
	}
	.yegacp_list .list01 strong {
		grid-column: 1; grid-row: 1;
		font-size: var(--fs-title) !important;
		font-weight: var(--fw-strong) !important;
		line-height: var(--lh-title) !important;
		text-align: left !important;
	}
	.yegacp_list .list01 span {
		grid-column: 1; grid-row: 2;
		font-size: var(--fs-small) !important;
		font-weight: var(--fw-small) !important;
		line-height: var(--lh-body) !important;
		margin-top: 3px !important;
		text-align: left !important;
	}
	/* 데스크톱에서 사진 옆에 맞추려고 준 120px 오프셋은 여기서 필요 없다 */
	.yegacp_list .list01 ul {
		grid-column: 2; grid-row: 1 / span 2;
		margin-top: 0 !important;
		padding-top: 0 !important;
		border-top: 0;
	}
	.yegacp_list .list01 li {
		text-align: left !important;
		font-size: var(--fs-small) !important;
		font-weight: var(--fw-small) !important;
		line-height: var(--lh-body) !important;
		margin-bottom: 0 !important;
		word-break: keep-all;
	}
	.yegacp_list .list02 {
		margin-top: 30px !important;
		padding-top: 24px !important;
		border-top: 1px solid rgba(255, 255, 255, .18);
	}
	.yegacp_list .list02 p {
		font-size: var(--fs-small) !important;
		font-weight: var(--fw-small) !important;
		line-height: var(--lh-body) !important;
		margin-bottom: 14px !important;
		word-break: keep-all;
	}
	.yegacp_list .list02 span {
		font-size: var(--fs-caption) !important;
		margin-top: 4px !important;
	}

	/* ── (3) DESIGNER 카드 ────────────────────────────────────────── */
	.philosophy .namebox {
		height: auto !important;
		min-height: 104px !important;     /* 122px 고정이 캐릭터를 잘랐다 */
		padding: 0 0 0 122px !important;  /* 원본 145px → 122px */
		background-size: 108px auto !important;   /* 인물 108×101 (원본 145×136) */
		background-position: left top !important;
		display: flex !important;
		flex-direction: column;
		justify-content: center;
	}
	.philosophy .namejob {
		padding-left: 0 !important;
		font-size: var(--fs-small) !important;
		font-weight: var(--fw-small) !important;
	}
	/* 자식이 전부 float 이라 높이가 0 이었다 — 세로 flex 로 세운다 */
	.philosophy .nametxt {
		display: flex !important;
		flex-direction: column;
		align-items: flex-start;
		gap: 5px;
		padding-left: 0 !important;
		margin-top: 3px !important;
	}
	.philosophy .nametxt strong {
		float: none !important;
		font-size: var(--fs-title) !important;
		line-height: var(--lh-title) !important;
		/* 최정원 카드만 <strong> 에 인라인 padding-top:8px 이 붙어 있어
		   '디자이너'와의 간격이 혼자 12px 이었다(다른 카드는 4px).
		   인라인 스타일이라 !important 로만 덮인다. */
		padding: 0 !important;
		letter-spacing: -0.01em !important;
	}
	.philosophy .nametxt .mobile,
	.philosophy .nametxt .instagram {
		float: none !important;
		height: auto !important;
		min-height: 20px;
		margin-left: 0 !important;
		padding: 0 0 0 24px !important;
		background-position: left center !important;
		background-size: 15px auto !important;
		font-size: var(--fs-small) !important;
		font-weight: var(--fw-small) !important;
		line-height: 20px !important;
	}
	.philosophy .nametxt .instagram { background-size: 16px auto !important; }

	/* 세로 20px 은 탭하기에 얕다. 33) 의 .tel-link 와 같은 32px 로 맞춘다
	   (새 숫자를 만들지 않고 이미 정한 값을 쓴다). 아이콘은 세로 중앙. */
	.philosophy .nametxt .mobile,
	.philosophy .nametxt .instagram {
		display: inline-flex !important;
		align-items: center !important;
		min-height: 32px !important;
		line-height: 1.4 !important;
	}
	.philosophy .nametxt { gap: 2px !important; }   /* 32px 로 커진 만큼 간격을 줄인다 */

	/* <span>·<strong> 은 style.css:2 의 색 지정 목록에 빠져 있어
	   base.css:11 의 전역 #d6d6d6(1.45:1)를 그대로 물려받는다.
	   .instagram 은 sub.css:118 이 #707070 을 줘서 멀쩡했고 전화번호만 남았다. */
	.philosophy .nametxt .mobile {
		color: #707070 !important;   /* 4.95:1 — .instagram 과 같은 값 */
	}

	/* 인용 블록 — 아이콘 자리 73px + 상단 38px 은 데스크톱 204px 상자 기준 */
	.philosophy .imgtxt {
		height: auto !important;
		background-position: center 22px !important;
		padding: 58px 16px 20px !important;
	}
	.philosophy .imgtxt strong {
		padding-top: 0 !important;
		font-size: var(--fs-subtitle) !important;
		line-height: 1.4 !important;
		color: #252525 !important;   /* 상동 — 인용문이 가장 진해야 한다 */
	}
	.philosophy .imgtxt p {
		font-size: var(--fs-small) !important;
		font-weight: var(--fw-small) !important;
		line-height: var(--lh-body) !important;
	}

	/* 작품 사진 — 502×247 원본. 상자 높이가 247px 고정이라 여백이 남았다 */
	.philosophy .imgarea,
	.philosophy .boxfirst .imgarea {
		width: 100% !important;
		height: auto !important;
	}
	.philosophy .imgarea img {
		width: 100% !important;
		height: auto !important;
		display: block;
	}
	.philosophy .firstlist,
	.philosophy .list {
		margin-bottom: 34px !important;
	}
}


/* ============================================================================
 * 62) [6차] 회사소개 디자이너 전화번호 — plain text → tel: 링크
 *
 *     33) 에서 사이트 전체 번호 21건을 tel: 로 바꿨는데 회사소개 디자이너
 *     12건이 빠져 있었다(<span class="mobile">). 지역 서비스업에서 전화가
 *     1순위 전환 경로라는 33) 의 근거가 여기에도 그대로 적용된다.
 *
 *     <span> → <a class="mobile tel-link"> 로 바꿨다. 스타일은 클래스로 잡혀
 *     있어 그대로 붙지만, 링크가 되면서 색이 브라우저 기본값으로 흐를 수 있다.
 *     데스크톱 모양이 변하지 않도록 원래 색(#707070, sub.css:118 의 .instagram
 *     과 같은 값)을 미디어쿼리 밖에서 못박는다.
 * ========================================================================== */
.philosophy .nametxt a.mobile,
.philosophy .nametxt a.mobile:link,
.philosophy .nametxt a.mobile:visited {
	color: #707070;
	text-decoration: none;
}
.philosophy .nametxt a.mobile:hover { color: #252525; }

/* 33) 의 .tel-link 는 "여기는 눌러서 전화가 걸린다"를 알리려고 밑줄을 두른다.
   그런데 이 카드는 전화·인스타가 아이콘으로 이미 구분되고 두 줄이 붙어 있어,
   밑줄이 둘 사이를 가르는 구분선처럼 읽힌다. 여기서만 뺀다. */
.philosophy .nametxt a.mobile { border-bottom: 0; }


/* ============================================================================
 * 63) [6차] 섹션 리드 문장 두 건 — AA 기준선에서 아슬하게 미달
 *
 *     .stext.green_font  #a8b4b4 on #3b4949 = 4.41:1   (기준 4.5)
 *     .mtext.gray_font   #898989 on #252525 = 4.38:1
 *
 *     둘 다 2% 남짓 부족하다. 색감을 유지한 채 명도만 한 눈금 올린다.
 *     전역 유틸리티(.green_font/.gray_font)는 다른 곳에서도 쓰이므로
 *     리드 문장 조합에만 걸어 파급을 막는다.
 *
 *     참고: 히어로 흰 글자(1.00:1 로 잡히는 것)는 측정 착시다. 배경이
 *     투명 조상을 타고 흰색으로 계산될 뿐, 실제 사진 위 픽셀로 재면 8.21:1 이다.
 * ========================================================================== */
@media screen and (max-width: 767px) {
	.stext.green_font  { color: #B4C0C0 !important; }
	.mtext.gray_font   { color: #949494 !important; }
}


/* ============================================================================
 * 64) [6차] DESIGNER 목록의 빈 공간 두 곳
 *
 *  (1) .linebox — 765px 짜리 빈 칸
 *      sub.css:141 `.philosophy .linebox { min-height:765px; float:left; width:590px }`
 *      데스크톱에서 첫 카드 옆에 세우는 칸인데, 안의 <span>(지점명 라인)이
 *      마크업에서 주석 처리돼 있어 그릴 내용이 없다.
 *      가로로 나란할 때는 눈에 안 띄지만 모바일에서 세로로 쌓이면
 *      765px 짜리 흰 공백이 그대로 남는다(실측: 첫 목록 1382px 중 765px).
 *      -> 모바일에서는 접는다. 내용이 생기면 이 규칙만 지우면 된다.
 *
 *  (2) .list min-height:595px
 *      2열 float 배치에서 카드 높이를 맞추려고 준 값이다.
 *      1열이 되면 맞출 상대가 없어 짧은 카드 아래에 빈칸만 만든다
 *      (실측: 카드 4장이 정확히 595px = 내용보다 큼).
 * ========================================================================== */
@media screen and (max-width: 767px) {
	.philosophy .linebox { display: none !important; }
	.philosophy .list,
	.philosophy .firstlist { min-height: 0 !important; }
}


/* ============================================================================
 * 65) [6차] tel: 밑줄이 숫자에서 11px 떨어져 있다
 *
 *     33) 은 밑줄을 border-bottom 으로 그렸다. 그 시점엔 링크 높이가 글자 높이라
 *     상자 바닥 = 글자 바로 아래였다.
 *     이후 같은 33) 이 탭 영역 확보로 min-height/line-height 를 32px 로 올리면서
 *     상자가 글자보다 15px 커졌고, 바닥에 붙은 선만 아래로 떨어져 나갔다.
 *     실측: 글자 잉크가 y15~23 인데 선은 y35 — 사이가 11px.
 *     번호와 선이 한 덩어리로 안 읽히고, 옆 줄과의 구분선처럼 보인다.
 *
 *     -> 상자 바닥이 아니라 '글자'에 붙이는 방식으로 바꾼다.
 *        text-decoration 은 글자를 따라가므로 상자 높이와 무관하다.
 *        text-underline-offset 으로 간격을 직접 정한다(11px → 3px).
 *        탭 영역 32px 은 그대로 남는다.
 *
 *     제외: 디자이너 카드(.philosophy .nametxt a.mobile)는 62) 에서 이미 뺐다.
 *           거기는 아이콘이 링크임을 알려 주고, 두 줄이 붙어 있어 선이 방해가 된다.
 *           그 규칙의 특이도(0,3,1)가 여기(0,1,0)보다 높아 자동으로 유지된다.
 * ========================================================================== */
@media screen and (max-width: 767px) {
	.tel-link,
	.finfo_m .fm_val a.tel-link {          /* .finfo_m .fm_val a 의 none 을 넘어선다 */
		border-bottom: 0 !important;
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 3px;
	}
}


/* ============================================================================
 * 66) [6차] DESIGNER 카드 마무리 — 간격 위계 · 인물 정렬 · 남는 아래 여백
 *
 * ── (1) 전화와 인스타 사이가 이름과의 사이보다 넓었다
 *   .nametxt 세 줄의 '보이는' 간격을 재면
 *     이름 → 전화    약 14.5px   (strong 24px 안 3px + gap 2 + 32px 안 9.5)
 *     전화 → 인스타  약 21px     (9.5 + 2 + 9.5)
 *   덩어리 안(연락처 둘)이 덩어리 사이(이름↔연락처)보다 벌어져 위계가 뒤집혔다.
 *   원인은 32px 탭 영역이다. 글자는 13px 인데 상자가 32px 이라 위아래로 9.5px 씩
 *   빈 공간이 생기고, 그게 두 줄 사이에서 두 번 겹친다.
 *   -> 연락처 줄을 26px 로 낮추고 붙인다. 대신 이름 아래에 5px 을 준다.
 *      26px 은 WCAG 2.5.8(AA) 의 24px 하한 위다. 33) 의 32px 은 번호만 덩그러니
 *      놓인 자리(BRANCH·CONTACT US)의 값이고, 여기는 아이콘이 폭을 함께 넓힌다.
 *
 * ── (2) 인물 사진 하단이 아래 카드에 안 닿았다
 *   배경을 left top 에 두면 인물(101px)이 끝난 뒤 .namebox 가 더 자란 만큼
 *   (110px, 울산은 118px) 빈틈이 남는다. 실측 9~17px.
 *   -> left bottom 으로 바꾼다. 상자가 얼마나 자라든 바닥이 맞는다.
 *
 * ── (3) 해운대·동래·명지·울산·대구수성 카드 아래에 100px 넘는 빈칸
 *   sub.css:122 `.philosophy .imgbox { height:456px }` 고정.
 *   기존 반응형은 .boxfirst(첫 카드)만 height:auto 로 풀어서
 *   나머지 카드는 456px 에 갇힌 채 사진 아래가 비었다(실측 102~145px).
 *   -> .imgbox 전체를 auto 로 푼다.
 *
 * ── (4) 지점 간 간격
 *   34px 이라 카드 안 요소 간격(.hgroup 아래 40px)보다 좁았다.
 *   덩어리 사이가 덩어리 안보다 넓어야 한다 -> 56px.
 * ========================================================================== */
@media screen and (max-width: 767px) {

	/* (1) 연락처 두 줄을 붙이고, 이름과는 벌린다 */
	.philosophy .nametxt { gap: 0 !important; }
	.philosophy .nametxt strong { margin-bottom: 5px !important; }
	.philosophy .nametxt .mobile,
	.philosophy .nametxt .instagram {
		min-height: 26px !important;   /* 32 → 26. AA 하한(24px) 위 */
	}

	/* (2) 인물 하단을 상자 바닥에 맞춘다 */
	.philosophy .namebox {
		background-position: left bottom !important;
	}

	/* (3) 456px 고정 해제 — 사진 아래 빈칸의 원인 */
	.philosophy .imgbox {
		height: auto !important;
	}

	/* (4) 지점 사이를 카드 안 간격보다 넓게 */
	.philosophy .firstlist,
	.philosophy .list {
		margin-bottom: 56px !important;
	}
}


/* ============================================================================
 * 67) [6차] <span>·<strong> 이 거의 안 보이는 회색으로 뜨는 문제 (뿌리)
 *
 *     base.css:10 의 리셋 목록에 span·strong 이 들어 있고 color:#d6d6d6 을 준다.
 *     style.css:2 가 같은 자리에서 색을 #252525 로 되돌리는데, 그 목록에는
 *     span·strong 이 빠져 있다. 그래서 이 둘만 #d6d6d6 인 채로 남는다.
 *     흰 배경에서 1.45:1 — 사실상 안 보인다.
 *
 *     지금까지 발견된 곳(전부 같은 원인이었다)
 *       시공현장 카테고리  strong.list_title  "바닥/벽/천장…"   19건
 *       WHO WE ARE       strong             "AGE/PASSION…"
 *       WHO WE ARE       span.pie_progress__number  원 안 숫자
 *       REQUEST 탭       .request_tab li strong      (55) 에서 개별 처리)
 *       회사소개 인용문     .imgtxt strong              (61) 에서 개별 처리)
 *       회사소개 전화       .nametxt .mobile            (61) 에서 개별 처리)
 *       푸터 라벨          .list_title                 (55) 에서 개별 처리)
 *
 *     개별로 잡아 온 것들을 여기서 한 번에 없앤다.
 *     color:#252525 를 박지 않고 inherit 로 두는 이유:
 *       어두운 배경 위의 span 은 부모가 이미 흰색이다. 고정색을 주면 그쪽이 깨진다.
 *       부모를 따라가게 하는 것이 원래 의도이자 안전한 기본값이다.
 *     자기 색을 가진 곳(.namejob #707070 등)은 특이도가 높아 그대로 유지된다.
 * ========================================================================== */
@media screen and (max-width: 767px) {
	span,
	strong {
		color: inherit;
	}
}


/* ============================================================================
 * 68) [6차] 전 페이지 훑기에서 남은 세 가지
 *
 *  (1) WHAT TYPE 카드 설명 #8A8785 on #F3EEEA = 3.10:1
 *      43) 에서 카드 배경을 밝은 베이지로 잡으면서 회색 본문이 묻혔다.
 *      색감(따뜻한 회색)은 두고 명도만 내린다.
 *
 *  (2) 메일 링크가 17~19px 높이
 *      .fm_val 안의 mailto 와 하단바 .gray_font2 는 인라인 <a> 라
 *      글자 높이 그대로다. 폭은 100px 이 넘지만 세로가 얕아 누르기 어렵다.
 *      같은 줄의 전화(.tel-link)는 32px 이라 행 높이도 서로 안 맞았다.
 *      -> 둘 다 26px 로 맞춘다. 66) 에서 디자이너 카드에 정한 값과 같고
 *         WCAG 2.5.8(AA) 하한 24px 위다. 덤으로 TEL/MAIL 행 높이가 같아진다.
 *
 *  (3) 로고 링크가 60×20
 *      <a> 가 인라인이라 안의 34px 이미지를 감싸지 못하고 줄 높이로 접혔다.
 *      헤더가 50px 이므로 44px 탭 영역을 넣을 자리가 있다.
 *
 *  위양성이라 손대지 않은 것
 *    button.search-button 19×19 : 41) 이 ::after 44×44 로 탭 영역을 이미 넓혔다.
 *    a.btn01 "무료감상"          : 배경이 rgba(255,255,255,.1) 이라 측정이
 *                                 흰색으로 계산할 뿐, 실제로는 어두운 섹션 위다.
 *    video 대체 문구             : 재생 가능한 브라우저에서는 렌더되지 않는다.
 *    폼 14px/13px               : 캘린더 드롭박스는 요청값, 약관 textarea 는 readonly.
 * ========================================================================== */
@media screen and (max-width: 767px) {

	/* (1) */
	.wt_lead { color: #6D6A68 !important; }

	/* (2) 메일·전화 링크 높이 통일 */
	.finfo_m .fm_val a,
	.footer .ftarea dd a {
		display: inline-flex !important;
		align-items: center !important;
		min-height: 26px !important;
	}

	/* (3) 로고 */
	.header .hgroup .logo a {
		display: inline-flex !important;
		align-items: center !important;
		min-height: 44px;
	}
}


/* ============================================================================
 * 69) [6차] 손대지 않았던 두 화면 — 시공현장 카테고리 · 게시판 목록 탭 영역
 *
 * ── (1) 시공현장 카테고리(ZOOM IN)
 *   sub.css:247 `#project .pjlist li { width:285px; height:282px; float:left }`
 *   데스크톱 4열 그리드의 고정 칸이다. 390px 에서도 285px 폭 그대로라
 *   컨테이너(358px) 안에서 73px 이 남고, 높이는 282px 에 갇힌다.
 *   .pjimg 는 min-height:190px 이라 사진이 없거나 비율이 다르면 빈칸이 남는다.
 *   -> 폭 100%, 높이 auto, 사진은 원본 비율(285×190 = 3:2)로 고정한다.
 *
 *   제목 링크는 <a> 가 인라인인데 안에 <p>(블록)를 담고 있어 높이가 20px 로
 *   접혔다. 블록으로 바꾸면 탭 영역이 제목 줄 전체가 된다.
 *
 *   ※ 썸네일이 로컬에서 깨지는 건 별개다. 경로가 _public/uploadFiles/ 인데
 *     .gitignore 가 그 폴더를 제외한다(대용량 자산). 운영에는 있다.
 *
 * ── (2) 게시판 목록의 제목 클릭 영역
 *   행은 60px 인데 onClick 이 걸린 .short 는 22px 뿐이다.
 *   즉 행의 3분의 1만 눌린다. 나머지를 눌러도 아무 일이 없다.
 *   .short 를 셀 높이만큼 펴서 행 전체가 눌리게 한다.
 *   board.css 의 nowrap+ellipsis 는 block 에서도 그대로 동작한다.
 * ========================================================================== */
@media screen and (max-width: 767px) {

	/* (1) 카테고리 카드 */
	#project .pjlist li {
		width: 100% !important;
		height: auto !important;
		float: none !important;
		margin: 0 0 36px !important;
	}
	#project .pjlist li > a:first-child {
		display: block !important;      /* 인라인이라 20px 로 접혔다 */
	}
	#project .pjlist li .list_title {
		padding: 18px 0 2px !important;
	}
	#project .pjlist .pjimg {
		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;       /* 190px 고정이 빈칸을 만들었다 */
		aspect-ratio: 285 / 190;        /* 원본 비율 */
		margin-top: 14px !important;
		display: block !important;
	}
	#project .pjlist .pjimg img {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover;
		display: block;
	}

	/* (2) 게시판 제목 — 셀 높이만큼 눌리게 */
	/* 제목은 44px 상자 안에서 세로 가운데, 작성일은 셀에 그대로 놓여 있었다.
	   둘 다 같은 높이 상자에 넣어 글자 중심을 맞추고, 행 높이를 줄인다. */
	.bbs_ltype tbody td {
		padding-top: 3px !important;
		padding-bottom: 3px !important;
		vertical-align: middle !important;
	}
	/* 제목 칸은 [제목 · 자물쇠/댓글 아이콘] 한 줄.
	   원래는 아이콘이 다음 줄로 떨어져 좋은소식만 행이 68px였다. */
	.bbs_ltype tbody td.subject {
		display: flex !important;
		align-items: center !important;
		gap: 6px;
	}
	.bbs_ltype tbody td.subject img { flex: none; margin: 0 !important; padding: 0 !important; }
	.bbs_ltype tbody td .short,
	.bbs_ltype tbody td .short > a {
		display: block !important;
		flex: 1 1 auto;
		min-width: 0;
		max-width: 100% !important;
		/* 터치 상자 44 → 38px. 행 53 → 45px 로 줄이면서
		   WCAG 2.5.8(AA 24px)은 여전히 넉넉하다.
		   세로 중앙은 flex 가 아니라 line-height 로 잡는다 —
		   flex 컨테이너 안에서는 text-overflow:ellipsis 가 죽는다. */
		line-height: 38px !important;
		min-height: 38px !important;
		height: auto !important;
	}
	/* 제목은 무조건 한 줄 — 두 줄로 감기면 행 높이가 들쭉날쭉해진다 */
	.bbs_ltype tbody td .short > a { padding: 0 !important; }
	.bbs_ltype tbody td .short,
	.bbs_ltype tbody td .short > a {
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
	}
	/* 작성일도 같은 높이 상자로 — 제목과 세로 중심이 맞는다 */
	.bbs_ltype tbody td:last-child {
		font-size: var(--fs-caption) !important;
		color: #8A8A8A !important;
		white-space: nowrap;
	}
}


/* ============================================================================
 * 70) [6차] OUR PROJECT 슬라이드 — 회전 표시(점 + 전환)
 *
 *     57) 의 슬라이드는 hover 가 없는 화면에서 캡션을 보여주려고 만든 자리다.
 *     한 게시물로 고정되면 나머지는 여전히 제목을 볼 수 없으므로
 *     project-slide.js 가 이 페이지에 뜬 게시물 전부를 4.5초 간격으로 돌린다.
 *
 *     점은 캡션(제목·평수) 바로 아래 가운데에 둔다.
 *     탭 영역은 점 자체(6px)가 아니라 버튼(24×26)이 받는다.
 *     캡션 링크가 style.css:175 에서 z-index:555 이므로 그 위로 올려야
 *     실제 탭이 점에 닿는다.
 *
 *     전환은 사진과 글자를 함께 잠깐 흐리게 했다가 되돌린다.
 *     .is-fading 의 260ms 는 JS 의 FADE 상수와 같은 값이어야 한다.
 * ========================================================================== */
@media screen and (max-width: 767px) {

	.mourworks_list .op-slide figure img,
	.mourworks_list .op-slide figure figcaption > a {
		transition: opacity .26s ease;
	}
	.mourworks_list .op-slide figure.is-fading img,
	.mourworks_list .op-slide figure.is-fading figcaption > a {
		opacity: .25;
	}

	/* 점은 가로 한 줄. 아래 선택자가 어긋나도 세로로 쌓이지 않게 기본을 깔아 둔다
	   (JS 가 캐시돼 점이 다른 자리에 붙는 경우를 대비한 안전장치). */
	.op-dots {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 0;
	}

	/* 이미지 안 상단 가운데. 제목·chevron 이 있는 아래쪽과 부딪히지 않는다. */
	.mourworks_list .op-slide .op-dots {
		position: absolute;
		left: 0;
		right: 0;
		top: 10px;
		bottom: auto;
		z-index: 600;             /* 캡션 링크(555) 위 */
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 0;
		pointer-events: auto;
	}
	.op-dot {
		-webkit-appearance: none;
		appearance: none;
		/* 20px 은 WCAG 2.5.8 의 24px 권고보다 좁다. 점 사이를 붙여 달라는
		   요청이고, 같은 게시물에 닿는 길이 둘 더 있어(자동 넘김·사진 탭)
		   이 컨트롤이 유일한 경로가 아니므로 감수한다. */
		width: 20px;              /* 점은 6px, 누르는 곳은 20×26 */
		height: 26px;
		padding: 0;
		border: 0;
		background: none;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.op-dot::before {
		content: "";
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background: rgba(255, 255, 255, .45);
		transition: background .2s ease, transform .2s ease;
	}
	.op-dot.is-on::before {
		background: #ffffff;
		transform: scale(1.25);
	}
	.op-dot:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
}

@media screen and (min-width: 768px) {
	.op-dots { display: none !important; }
}


/* ============================================================================
 * 71) [6차] 검색 레이어 — 데스크톱 1200px 기준 치수가 그대로 넘어와 있다
 *
 *     실측(390px)
 *       .layout   padding 30px 16px 150px  → 아래 150px 이 통째로 빈칸
 *       input     높이 100px, padding 0 125px 0 60px
 *                 → 358px 폭 중 185px 이 좌우 패딩. 글자 자리가 173px 뿐이다.
 *       button    right:65px, 32×32        → 입력창 오른쪽 끝에서 한참 안쪽
 *       .txt      18px
 *       .logo     왼쪽 정렬인데 나머지는 가운데 정렬 — 축이 둘이다
 *       close     absolute bottom:0        → 150px 패딩 위에 덩그러니 뜬다
 *
 *     -> 한 손으로 쓰는 상단 시트로 정리한다.
 *        로고·입력·안내·닫기를 하나의 가운데 축에 세우고, 높이를 내용에 맞춘다.
 *
 *     입력창 글자는 16px 을 유지한다. 그 아래로 내리면 iOS 가 포커스 때 화면을
 *     확대해 버린다(--fs-form 과 같은 이유).
 *
 *     close.png 는 X 가 아니라 '위로 접기' 화살표다(레이어가 slideUp 으로 닫힌다).
 *     의도된 그림이므로 크기만 줄이고 모양은 두었다.
 * ========================================================================== */
@media screen and (max-width: 767px) {

	.search-layer .search-wrap .layout {
		padding: 22px 16px 24px !important;   /* 아래 150px → 24px */
		text-align: center;
	}

	/* 로고 — 가운데 축으로 */
	.search-layer .search-wrap .logo {
		text-align: center;
		margin: 0 0 20px;
	}
	.search-layer .search-wrap .logo img {
		height: 42px;
		width: auto;
		display: inline-block;
	}

	/* 입력창 */
	.search-layer .search-wrap .input-wrap {
		margin-top: 0 !important;             /* 59px */
	}
	.search-layer .search-wrap .input-wrap input[type="text"] {
		height: 52px !important;              /* 100px */
		padding: 0 52px 0 18px !important;    /* 0 125px 0 60px */
		font-size: var(--fs-form) !important; /* 16px — iOS 확대 방지. 내리지 말 것 */
		border-radius: 26px !important;
	}
	/* 돋보기 — 입력창 오른쪽 끝으로 당기고 탭 영역을 44px 로 */
	.search-layer .search-wrap .input-wrap button {
		right: 4px !important;                /* 65px */
		width: 44px;
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		background: none;
		border: 0;
	}
	.search-layer .search-wrap .input-wrap button img {
		width: 22px;
		height: 22px;
	}

	/* 안내 문구 */
	.search-layer .search-wrap .txt {
		margin-top: 18px !important;          /* 40px */
		font-size: var(--fs-small) !important;
		line-height: var(--lh-body) !important;
		word-break: keep-all;
	}

	/* 닫기 — absolute 를 풀고 흐름 안 가운데로 */
	.search-layer .search-wrap .close-search {
		position: static !important;
		transform: none !important;
		display: block;
		margin: 22px auto 0 !important;
		padding: 0;
		background: none;
		border: 0;
		line-height: 0;
	}
	.search-layer .search-wrap .close-search img {
		width: 48px;                          /* 70px */
		height: 48px;
		margin: 0 auto;
	}
}


/* ============================================================================
 * 72) [6차] 회사소개 히어로 화살표가 엉뚱한 좌표로 내려간다 · 지도 아래 여백
 *
 * ── (1) 화살표 대상
 *   company.htm:37 의 앵커가 인라인 스타일로 고정돼 있다.
 *     <div id="features1-21" style="position:absolute; top:680px">
 *   데스크톱은 히어로가 750px 이라 680 이 '섹션 70px 위' = 고정 헤더를 피한 자리다.
 *   모바일은 히어로가 439px 이라 섹션이 439 에서 시작하는데 앵커는 그대로 680 —
 *   241px 을 지나쳐 본문 한가운데로 떨어진다.
 *   -> 섹션을 기준으로 삼는다. 섹션에 position:relative 를 주면 앵커의
 *      containing block 이 섹션이 되고, top:-60px 이 '섹션 60px 위'가 된다.
 *      60px 은 스크롤 후 헤더 높이다.
 *
 *   같은 이유로 다른 페이지의 앵커(섹션 자체)도 헤더에 가린다.
 *   scroll-margin-top 으로 한 번에 처리한다(앵커 이동은 순수 <a href="#..."> 다).
 *
 * ── (2) 지도와 하단바 사이가 떠 보인다
 *   지도 아래 2px 테두리 + 하단바 위 패딩 28px = 30px 이 빈 채로 이어진다.
 *   지도 타일이 밝아 경계가 이미 뚜렷하므로 테두리는 아래쪽만 뺀다.
 * ========================================================================== */
@media screen and (max-width: 767px) {

	/* (1) 회사소개 히어로 화살표 */
	.sub_content.green_bg { position: relative; }
	#features1-21[style] {
		top: -60px !important;   /* 인라인 top:680px 을 덮는다 */
	}
	/* 섹션 자체가 앵커인 페이지 — 고정 헤더에 가리지 않게 */
	#features1-21,
	#project,
	#section1,
	#request_sec {
		scroll-margin-top: 60px;
	}

	/* (2) 지도 → 하단바 */
	.map_area { border-bottom: 0; }
	.footer { padding-top: 20px !important; }   /* 28px */
}


/* ============================================================================
 * 73) [6차] 드로어 메뉴 — 항목을 헤딩급으로, 현재 페이지는 진하게
 *
 *     실측: 6개 항목 전부 21px/400 에 같은 색(#241A17). 현재 페이지(li.on)를
 *     구분하는 규칙이 없어 어디에 있는지 알 수 없었다.
 *     -> 크기·굵기를 헤딩처럼 올리고, 미선택은 연하게·선택은 진하게 나눈다.
 *        미선택 #767676 도 흰 배경에서 4.54:1 로 AA 를 넘긴다.
 * ========================================================================== */
@media screen and (max-width: 767px) {
	.header nav.menu > ul > li > a {
		font-size: var(--fs-nav) !important;
		font-weight: var(--fw-strong) !important;   /* 700 → 500 */
		line-height: var(--lh-title) !important;
		letter-spacing: -0.01em;
		color: #767676 !important;               /* 미선택 — 연하게 */
	}
	.header nav.menu > ul > li.on > a,
	.header nav.menu > ul > li > a.on {
		color: #241A17 !important;               /* 선택 — 진하게(로고색) */
	}
}


/* ============================================================================
 * 74) [6차] 작품 목록 히어로 — 다른 서브 페이지와 같은 높이, 채우기
 *
 *     작품 목록은 .sub_visual 이 아니라 메인과 같은 영상 히어로(#visual)다.
 *     40) 이 #mslide 에 한 처리가 여기엔 빠져 있어 750px(데스크톱) 그대로였고,
 *     영상은 object-fit:contain 에 인라인 top:-25px 이 남아 있었다.
 *     회사소개·시공현장·게시판의 .sub_visual 은 52svh(≈439px)다. 같은 값으로.
 * ========================================================================== */
@media screen and (max-width: 767px) {
	/* #visual-content 도 .carousel > div 라 :not 으로 뺀다 — 안 빼면 439px 로
	   커져 top:50% 기준점이 밀리고 텍스트가 히어로 밖으로 떨어진다. */
	#visual,
	#visual .carousel,
	#visual .carousel > div:not(#visual-content) {
		width: 100% !important;
		height: 52vh !important;          /* 폴백 */
		height: 52svh !important;
		min-height: 300px !important;
		max-height: none !important;
		overflow: hidden !important;
		position: relative;
	}
	#visual video {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
		object-position: center center !important;
		margin: 0 !important;
		display: block !important;
		/* 영상 파일(1280×720)에 위아래 22px 씩 검은 띠가 '구워져' 있다.
		   실제 그림은 676px(비율 1.893)뿐이라 object-fit:cover 로 세로를 채워도
		   그 띠까지 함께 확대돼 화면 위아래에 13px 씩 남는다(픽셀로 확인).
		   -> 그림만 컨테이너를 채우도록 720/676 = 1.065 배 키우고 가운데로 당긴다.
		      넘치는 띠는 #visual 의 overflow:hidden 이 잘라 낸다. */
		height: 106.5% !important;
		top: -3.25% !important;
		/* 재생 전 poster 도 같은 이유로 띠가 보이므로 배경으로 한 번 더 깐다.
		   pfm_main.jpg(1423×750)는 띠 없는 그림이라 cover 로 정확히 채워진다. */
		background: #252525 url("/_public/images/sub/pfm_main.jpg") center / cover no-repeat !important;
	}
	#visual #visual-content {
		position: absolute !important;
		top: 50% !important;
		left: 50% !important;
		transform: translate(-50%, -50%) !important;   /* style.css:377 의 X 축도 유지 */
		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		padding: 0 20px;
		box-sizing: border-box;
		overflow: visible !important;
	}
	#visual .carousel-content { width: 100% !important; }
	#visual .visual_text img { max-width: 100%; height: auto; }
	#visual .arrow_down {
		top: auto !important;
		bottom: 0 !important;
	}
}


/* ============================================================================
 * 75) [6차] MASTERPIECES 카드 — 2열 6행, 터치로 캡션 열기, chevron
 *
 *  왜 잘려 보였나
 *    filterizr 가 .filtr-item 을 position:absolute + translate3d 로 깐다.
 *    <ul> 은 높이 0 이고 .filtr-container 가 계산된 높이를 받는데, 그 계산이
 *    데스크톱 4열 기준이라 모바일 1열(12×420px)보다 훨씬 짧다(실측 1272px).
 *    카드가 컨테이너 밖으로 흘러 다음 섹션과 겹쳤다.
 *    -> 절대배치를 !important 로 무력화하고 <ul> 을 2열 grid 로 편다.
 *       필터(.pftab)는 filterizr 가 display 를 토글하므로 그대로 동작한다.
 *
 *  캡션
 *    데스크톱은 hover 로 캡션이 올라온다. 모바일은 hover 가 없으므로
 *    첫 탭에 캡션이 올라오고(gallery-touch.js 가 .is-open 토글),
 *    올라온 캡션(안의 <a> 가 전체를 덮음)을 다시 탭하면 상세로 간다.
 *    좌하단 chevron 은 "누를 수 있다"는 표시. pointer-events:none 이라
 *    탭은 아래 층(닫힘: 사진 → 열기 / 열림: <a> → 이동)으로 통과한다.
 *
 *  26)·[E] 가 .filtr-container 캡션을 흐름(static)으로 되돌려 두었다.
 *  여기서는 다시 오버레이로 써야 하므로 .mourworks_list 를 앞세워 특이도를 올린다.
 * ========================================================================== */
@media screen and (max-width: 767px) {

	.mourworks_list .filtr-container {
		height: auto !important;
		position: static !important;
		padding: 0 !important;
	}
	.mourworks_list .filtr-container > ul {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 12px !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		height: auto !important;
	}
	.mourworks_list .filtr-container .filtr-item {
		position: static !important;      /* filterizr 의 absolute */
		transform: none !important;       /* translate3d / scale */
		width: auto !important;
		height: auto !important;
		min-height: 0 !important;
		margin: 0 !important;
		float: none !important;
		display: block !important;
		overflow: visible !important;
	}
	.mourworks_list .filtr-container figure.effect-zoe {
		position: relative !important;
		width: 100% !important;
		max-width: none !important;
		height: auto !important;
		max-height: none !important;
		margin: 0 !important;
		float: none !important;
		overflow: hidden !important;      /* 캡션이 아래에 숨어 있다 */
		background: #1f2727;
	}
	.mourworks_list .filtr-container figure.effect-zoe img {
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 1 / 1;
		object-fit: cover !important;
		display: block !important;
		max-width: none !important;
		min-height: 0 !important;
	}

	/* 캡션 — 기본은 아래에 숨김, .is-open 이면 올라온다 */
	.mourworks_list .filtr-container figure.effect-zoe figcaption {
		position: absolute !important;
		inset: 0 !important;
		width: 100% !important;
		height: 100% !important;
		max-width: none !important;
		padding: 0 !important;
		background: rgba(60, 75, 75, .96) !important;
		color: #fff !important;
		transform: translateY(100%) !important;
		transition: transform .28s ease !important;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
	}
	.mourworks_list .filtr-container figure.effect-zoe.is-open figcaption {
		transform: translateY(0) !important;
	}
	/* 안의 <a> 가 캡션 전체를 덮는다 — 열린 상태에서 어디를 눌러도 이동 */
	.mourworks_list .filtr-container figure.effect-zoe figcaption > a {
		position: absolute !important;
		inset: 0 !important;
		display: flex !important;
		flex-direction: column !important;
		justify-content: flex-start !important;   /* 선·제목은 위에서부터 */
		width: 100% !important;
		height: 100% !important;
		padding: 14px 14px 40px !important;   /* 아래는 chevron 자리 */
		text-decoration: none !important;
		z-index: 1;
	}
	.mourworks_list .filtr-container figure.effect-zoe hr {
		position: static !important;
		width: 22px !important;
		margin: 0 0 8px !important;
		border: 0 !important;
		border-top: 2px solid #fff !important;
	}
	.mourworks_list .filtr-container figure.effect-zoe .title_area {
		position: static !important;
		margin: 0 !important;
	}
	.mourworks_list .filtr-container figure.effect-zoe .list_title {
		display: block !important;
		font-size: var(--fs-small) !important;
		font-weight: var(--fw-strong) !important;
		line-height: 1.4 !important;
		color: #fff !important;
		overflow-wrap: anywhere;
	}
	.mourworks_list .filtr-container figure.effect-zoe .list_text {
		display: block !important;
		font-size: var(--fs-caption) !important;
		font-weight: var(--fw-small) !important;
		padding-top: 2px !important;
		color: #FCFABE !important;
	}
	/* 설명은 177px 칸에 안 들어간다 */
	.mourworks_list .filtr-container figure.effect-zoe .description {
		display: none !important;
	}

	/* 좌하단 chevron — 캡션이 열렸을 때만 보인다(닫힌 사진에는 표시 없음).
	   어두운 원 위 흰 꺾쇠. 탭은 통과해 아래 <a> 가 받는다. */
	.mourworks_list .filtr-container figure.effect-zoe::after {
		content: none;
		position: absolute;
		left: 12px;
		bottom: 12px;
		width: 24px;
		height: 24px;
		border-radius: 50%;
		background: rgba(0, 0, 0, .45)
			url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 6l6 6-6 6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>")
			center / 14px 14px no-repeat;
		z-index: 2;
		pointer-events: none;
	}
	.mourworks_list .filtr-container figure.effect-zoe.is-open::after {
		content: "";
		background-color: rgba(255, 255, 255, .18);
	}
}


/* ============================================================================
 * 76) [6차] 드로어가 열리면 상단 바를 드로어 배경과 한 몸으로
 *
 *     드로어(nav.menu)는 흰 패널인데 상단 바는 스크롤 위치에 따라
 *     투명(히어로 위) 또는 #111(navbar-shrink) 이라, 열린 순간 로고·검색·
 *     햄버거 줄과 메뉴 패널이 두 덩어리로 갈린다.
 *     mobile-nav.js 가 열림 상태를 body.yg-nav-open 으로 남기므로
 *     그 동안만 상단 바를 흰 배경 + 어두운 잉크로 고정한다.
 *     .header.navbar-shrink(0,2,0) 보다 특이도가 높아 스크롤 상태와 무관하다.
 * ========================================================================== */
@media screen and (max-width: 767px) {
	body.yg-nav-open .header,
	body.yg-nav-open .header.navbar-shrink {
		background: #ffffff !important;
		--gnb-ink: #241A17;
	}
	body.yg-nav-open .header .hgroup .logo img,
	body.yg-nav-open .header.navbar-shrink .logo img,
	body.yg-nav-open .header--sub .hgroup .logo img {
		filter: none !important;
	}
	body.yg-nav-open .header .hgroup .search-button {
		background-color: var(--gnb-ink) !important;
	}
	body.yg-nav-open .header .yg-navtoggle span {
		background: var(--gnb-ink) !important;
	}
}


/* ============================================================================
 * 77) [6차] 작품 목록 탭(RESIDENCE / COMMERCIAL) — 글자가 아래로 치우쳤다
 *     sub.css 의 padding:10px 0 0 이 남아 align-items:center 를 밀어냈다
 *     (실측: 글자 위 14px / 아래 5px). 패딩을 걷어내면 flex 가 가운데 놓는다.
 * ========================================================================== */
@media screen and (max-width: 767px) {
	.pftab > ul > li > a { padding: 0 4px !important; }

	/* 4개짜리 탭(RESIDENCE 하위: ALL / 20-30PY / 40PY / 50PY-)
	   sub.css:166 `.pftab { width:520px; height:50px }` 는 2개 기준 고정값이다.
	   4개가 되면 한 칸이 72~90px 인데 글자는 17px 이라 "20-30PY" 가 넘친다.
	   칸 수에 맞춰 글자를 줄이고 사이를 6px 벌린다. */
	.pftab { width: 100% !important; height: auto !important; }
	.pftab > ul { gap: 6px !important; }
	.pftab > ul > li > a {
		font-size: var(--fs-small) !important;
		letter-spacing: -0.02em;
		white-space: nowrap;
	}
}
@media screen and (max-width: 359px) {
	.pftab > ul { gap: 4px !important; }
	.pftab > ul > li > a {
		font-size: var(--fs-caption) !important;
		padding: 0 2px !important;
	}
}


/* ============================================================================
 * 78) [6차] 페이지네이션 — 한 줄에, 작게, 촘촘하게 (전 게시판 공통)
 *
 *     실측(390px): 항목 40×40 + margin 0 10px + 사이의 &nbsp; 까지 더해
 *     항목당 ~60px. 시공현장 목록은 11개라 660px → 366px 컨테이너에서 5줄로 접혔다.
 *     29) 가 탭 영역 확보로 40px 을 준 게 원인인데, 페이지 번호는 폭이 좁고
 *     개수가 많아 그 값이 맞지 않는다.
 *     -> 28×28(AA 하한 24 위), 간격 2px, .page 를 flex 한 줄로.
 *        12개(시공현장) 기준 11×28 + 화살표 + 간격 ≈ 347px 로 366px 안에 든다.
 *        &nbsp; 는 .page 의 font-size:0 으로 지우고 자식에서 크기를 되살린다.
 *        그래도 넘치는 경우(페이지 창이 더 넓은 게시판)에 대비해 가로 스크롤을 허용한다.
 * ========================================================================== */
@media screen and (max-width: 767px) {
	.page_area { padding: 8px 0 0 !important; }
	.page_area .page {
		display: flex !important;
		flex-wrap: nowrap !important;
		justify-content: center !important;
		align-items: center !important;
		gap: 2px !important;
		font-size: 0 !important;            /* 항목 사이 &nbsp; 제거 */
		line-height: 0 !important;
		overflow-x: auto !important;        /* 만약을 위한 안전판 */
		-webkit-overflow-scrolling: touch;
		padding: 2px 0 !important;
	}
	.page_area .page a,
	.page_area .page span,
	.page_area .page strong,
	.page_area .page .s_num {
		flex: 0 0 auto !important;
		/* 12개(시공현장) + 화살표 2개가 366px 안에 들어야 한다.
		   26×12 + 18×2 + 3×13 = 387 → 화살표를 뺀 숫자만 26px 로 잡고
		   간격을 2px 로 줄이면 26×12 + 18×2 + 2×13 = 374... 26 도 빠듯해
		   실측 기준 24px 로 내린다(WCAG 2.5.8 AA 하한과 같음). */
		position: relative !important;
		min-width: 26px !important;
		width: 26px !important;
		height: 26px !important;          /* 가로=세로 — 정원 */
		min-height: 26px !important;
		line-height: 26px !important;
		margin: 0 !important;
		padding: 0 !important;
		font-size: var(--fs-small) !important;
		display: inline-block !important;
		text-align: center !important;
		box-sizing: border-box !important;
	}
	.page_area .page img.page_btn {
		flex: 0 0 auto !important;
		height: 14px !important;
		width: auto !important;
		margin: 0 2px !important;
		vertical-align: middle !important;
	}
	/* '다음' 은 <a class="page_btn"> 안에 <img> 가 든 구조라 위 규칙에 안 걸린다.
	   원본 크기 이미지가 28px 상자를 8px 넘겨 scrollWidth 를 늘렸다 → 상자 안에 가둔다. */
	.page_area .page a.page_btn {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		/* overflow:hidden 은 안쪽 img 를 가두려던 것이나, 그 img 는 아래에서
		   display:none 이 됐고 대신 ::after 44px 탭 영역까지 잘라내고 있었다. */
		overflow: visible !important;
	}
	.page_area .page a.page_btn img {
		height: 14px !important;
		width: auto !important;
		margin: 0 !important;
		padding: 0 !important;
		display: block !important;
	}
}

/* 320px 급에서는 12개가 359px 로 296px 컨테이너를 넘는다.
   24px(AA 하한) + 간격 1px 이면 11×24 + 화살표 ≈ 289px 로 들어간다. */
/* 320px 급: 12개 기준 24×12 + 16×2 + 2×13 = 346 으로 296 을 넘는다.
   숫자 칸을 21px 로 내리고 간격을 1px 로 붙인다.
   21px 은 AA 하한(24)보다 좁지만 세로 탭 영역이 37px 이고, 페이지 이동은 화살표로도 가능하고
   목록 하단의 보조 컨트롤이라 여기서만 감수한다. */
@media screen and (max-width: 359px) {
	.page_area .page { gap: 1px !important; }
	.page_area .page::before { margin: 0 3px !important; }
	.page_area .page a.page_btn { width: 14px !important; min-width: 14px !important; }
	.page_area .page a,
	.page_area .page span,
	.page_area .page strong,
	.page_area .page .s_num {
		min-width: 21px !important;
		width: 21px !important;
		height: 21px !important;          /* 정원 */
		min-height: 21px !important;
		line-height: 21px !important;
		font-size: var(--fs-caption) !important;
	}
	.page_area .page img.page_btn { margin: 0 1px !important; }
}


/* ============================================================================
 * 79) [6차] 드로어 — 헤더와 패널 사이 틈 · 스크롤 후 선택 항목이 흰 글자
 *
 * ── (1) 틈 10px
 *   맨 위(navbar-shrink 아님)에서 .header 는 50px 인데 그 안의
 *   .hgroup / .hbox 는 60px 이다. 76) 이 흰 배경을 .header 에만 칠했으므로
 *   50~60px 구간은 투명한 채로 남아 뒤 사진이 비친다.
 *   픽셀로 확인: 그 열 평균이 rgb(209,196,173) — 히어로 사진의 살구색이다.
 *   패널은 .hgroup 하단(60px)에 붙으므로 딱 10px 만큼 갈라져 보였다.
 *   (스크롤 후에는 .header 가 60px 이라 틈이 0 이어서 재현되지 않았다.)
 *   -> 높이를 건드리면 레이아웃이 흔들리므로, 안쪽 두 겹에도 같은 배경을 준다.
 *
 * ── (2) 선택 항목이 흰 글자
 *   style.css:85 `.header.navbar-shrink .hbox .menu li a.on { color:#fff !important }`
 *   = (0,4,3). 73) 의 `.header nav.menu > ul > li > a.on` 은 (0,3,4) 라
 *   클래스 수에서 밀려 진다. 검은 헤더용 규칙인데 드로어가 열리면 헤더가
 *   흰 배경이므로 흰 글자가 사라진다.
 *   -> body.yg-nav-open 을 앞세워 (0,6,3) 으로 올린다. 밑줄도 같이 어둡게.
 * ========================================================================== */
@media screen and (max-width: 767px) {

	/* (1) */
	body.yg-nav-open .header .hgroup,
	body.yg-nav-open .header .hgroup .hbox,
	body.yg-nav-open .header.navbar-shrink .hgroup,
	body.yg-nav-open .header.navbar-shrink .hgroup .hbox {
		background: #ffffff !important;
	}

	/* (2) */
	body.yg-nav-open .header.navbar-shrink .hbox .menu li a.on,
	body.yg-nav-open .header.navbar-shrink .hbox .menu li.on a,
	body.yg-nav-open .header .hgroup .menu li a.on,
	body.yg-nav-open .header .hgroup .menu li.on a {
		color: #241A17 !important;
		/* 구분선까지 진하게 하면 '선택' 신호가 글자와 선 둘로 갈려 위계가 흐려진다.
		   선은 항목을 나누는 격자일 뿐이므로 다른 줄과 같은 색으로 둔다. */
		border-bottom-color: #f0f0f0 !important;
	}
}


/* ============================================================================
 * 80) [6차] 페이지네이션 화살표를 chevron 으로 · 세로 중앙 정렬
 *
 *     원본은 icon_prev.png(9×22) / icon_next.png 를 쓰는데, 이전 버튼은
 *     <img class="page_btn">, 다음 버튼은 <a class="page_btn"><img> 로 구조가
 *     달라 크기·정렬이 따로 논다(실측: 이전 9×22 @2546, 숫자 28×28 @2543).
 *     게다가 padding:8px 0 0 이 남아 세로가 3px 어긋났다.
 *     -> 이미지를 숨기고 CSS chevron 을 그린다. 두 버튼이 같은 상자를 쓰므로
 *        번호 원과 높이·중심이 자동으로 맞는다.
 *
 *     번호 글자도 line-height 로만 세우면 폰트 메트릭 때문에 아래로 처진다
 *     (실측: 위 8px / 아래 5px). flex 중앙 정렬로 바꾼다.
 * ========================================================================== */
@media screen and (max-width: 767px) {

	/* 화살표 두 개가 각각 한 칸을 차지하므로 12개 기준 총폭이 366 을 넘긴다.
	   숫자 칸은 그대로 두고 화살표만 좁히고 간격을 3px 로 잡는다. */
	.page_area .page { gap: 2px !important; }

	/* 번호·현재 페이지 — 글자를 상자 정중앙으로 */
	.page_area .page a,
	.page_area .page span,
	.page_area .page strong,
	.page_area .page .s_num {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		line-height: 1 !important;              /* 세로 정렬은 flex 가 맡는다 */
	}

	/* 눌리는 범위를 세로로만 넓힌다. 가로는 12개가 한 줄에 들어가야 해서
	   더 못 늘리지만, 위아래는 남는 공간이라 원 크기를 그대로 두고 확장할 수 있다.
	   26px 원 → 실제 탭 영역 26×42px. */
	.page_area .page a::after {
		content: "";
		position: absolute;
		top: -8px;
		bottom: -8px;
		left: 0;
		right: 0;
	}

	/* 화살표 — 원본 이미지를 숨기고 chevron 을 그린다 */
	.page_area .page img.page_btn { display: none !important; }
	.page_area .page a.page_btn {
		position: relative !important;
		font-size: 0 !important;
		background: none !important;
		border: 0 !important;
		width: 18px !important;
		min-width: 18px !important;
	}
	.page_area .page a.page_btn img { display: none !important; }
	/* 화살표 — 테두리 두 개를 돌린 꺾쇠. 방향은 '위치'로 가른다.
	   1페이지: <img class="page_btn"> … <a class="page_btn">   (이전이 이미지)
	   2페이지: <a class="page_btn">  … <a class="page_btn">   (이전도 링크)
	   그래서 a.page_btn 만 보고 그리면 2페이지부터 이전 자리에도
	   오른쪽 꺾쇠가 찍힌다. :first-child / :last-child 로 방향을 나눈다. */
	.page_area .page a.page_btn::before {
		content: "";
		width: 7px;
		height: 7px;
		border-top: 2px solid #363636;
		border-right: 2px solid #363636;
	}
	/* 다음(>) — 마지막 자리 */
	.page_area .page > a.page_btn:last-child::before {
		transform: rotate(45deg);
		margin-left: -3px;                      /* 꺾쇠 무게중심 보정 */
	}
	/* 이전(<) — 첫 자리. 오른쪽을 180° 돌린 대칭(45+180=225=-135) */
	.page_area .page > a.page_btn:first-child::before {
		transform: rotate(-135deg);
		margin-right: -3px;
	}
	/* 1페이지에서는 이전이 <img> 라 ::before 를 붙일 요소가 없다.
	   그때만 .page 의 ::before 로 같은 꺾쇠를 세운다(비활성 자리 표시). */
	.page_area .page::before {
		content: "";
		order: -1;
		flex: 0 0 auto;
		box-sizing: content-box;
		width: 7px;
		height: 7px;
		border-top: 2px solid #b4b4b4;          /* 비활성 — 연하게 */
		border-right: 2px solid #b4b4b4;
		transform: rotate(-135deg);
		margin: 0 5px 0 4px;
	}
	.page_area .page:has(> a.page_btn:first-child)::before {
		content: none;                          /* 실제 이전 링크가 있으면 불필요 */
	}
}


/* ============================================================================
 * 81) [6차] 검색 레이어 — 닫기 버튼을 패널 아래 변에 붙인다
 *
 *     71) 이 .layout 에 아래 패딩 24px 을 줬는데, 닫기 버튼(위로 접기 화살표)은
 *     패널의 '변' 에 물려 있어야 접히는 방향이 읽힌다. 그 아래 여백을 없앤다.
 * ========================================================================== */
@media screen and (max-width: 767px) {
	.search-layer .search-wrap .layout { padding-bottom: 0 !important; }
	.search-layer .search-wrap .close-search { margin: 20px auto 0 !important; }
	.search-layer .search-wrap .close-search img { display: block; }
}


/* ============================================================================
 * 82) [6차] 뜯어보기(시공현장 카테고리) — 2열
 *
 *     69) 에서 데스크톱 4열 고정(285×282)을 풀어 1열로 폈는데, 카드가 19개라
 *     세로가 7,700px 이 된다. 사진 비율(3:2)은 그대로 두고 2열로 접는다.
 * ========================================================================== */
@media screen and (max-width: 767px) {
	#project .pjlist > ul {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 26px 12px !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	#project .pjlist li {
		width: auto !important;          /* 트랙에 맡긴다 */
		margin: 0 !important;
	}
	#project .pjlist li .list_title {
		font-size: var(--fs-small) !important;
		padding: 12px 0 1px !important;
	}
	#project .pjlist li .list_text {
		font-size: var(--fs-caption) !important;
	}
	#project .pjlist .pjimg { margin-top: 10px !important; }
}


/* ============================================================================
 * 83) [6차] 작품 상세 — GNB 가 안 보임 · Overview 가 스크롤을 따라다님
 *
 * ── (1) GNB 가 흰 배경에 흰 글자
 *   이 페이지는 menu_topsub.php 를 쓰므로 .header--sub 가 붙고, 60) 이 거기에
 *   --gnb-ink:#ffffff 를 준다. 그건 '히어로 사진 위에 얹히는 서브 헤더' 전제인데
 *   상세 페이지에는 .sub_visual 이 없어 배경이 흰색이다. 흰 위의 흰 글자가 됐다.
 *   -> 이 페이지에서만 흰 배경 + 어두운 잉크로 되돌린다.
 *
 * ── (2) Overview 가 따라다님
 *   sub.css:228 `.portfolio_view .pf_area { position: fixed }`.
 *   데스크톱은 사진이 왼쪽에 길게 흐르고 오른쪽 사양표가 따라붙는 2단 구성이라
 *   fixed 가 맞지만, 1단이 되면 사진 위에 계속 떠서 가린다.
 *   -> static 으로 되돌리고 [제목 → Overview → 사진] 순으로 세운다.
 *      마크업 순서는 사진(pf_content_left)이 먼저라 flex order 로 바꾼다.
 *
 * ── (3) 버튼
 *   42×42 는 한 줄에 셋이 들어가기엔 크다. 36px 로 줄인다.
 *   목록(=) 아이콘은 드로어 햄버거와 모양이 겹쳐 헷갈리므로
 *   2×2 네모(창 격자)로 바꾼다 — 스프라이트를 끄고 CSS 로 그린다.
 * ========================================================================== */
@media screen and (max-width: 767px) {

	/* (1) 이 페이지는 GNB 를 쓰지 않는다.
	   작품 하나를 보는 화면이고, 이동은 제목 위의 [목록][◀][▶] 이 맡는다.
	   헤더가 fixed 라 숨기면 상단 여백도 같이 줄여야 한다(아래 padding). */
	body:has(.portfolio_view) .header { display: none !important; }
	body:has(.portfolio_view) .mask,
	body:has(.portfolio_view) .search-layer { display: none !important; }

	/* (2) */
	.portfolio_view { padding: 28px 0 60px !important; min-height: 0 !important; }
	.portfolio_view .ma {
		display: flex !important;
		flex-direction: column !important;
	}
	.portfolio_view .pftitle          { order: 1; }
	.portfolio_view .pf_content_right { order: 2; }
	.portfolio_view .pf_content_left  { order: 3; }

	.portfolio_view .pf_area {
		position: static !important;     /* fixed — 사진 위를 따라다녔다 */
		width: 100% !important;
		margin: 0 0 32px !important;
	}
	.portfolio_view .pf_content_right { margin-top: 0 !important; }
	.portfolio_view .pf_area h3 {
		font-size: var(--fs-title) !important;
		margin-bottom: 12px !important;
		margin-top: 0 !important;
	}
	/* dt/dd 를 2열 격자로. sub.css 는 dt 40% / dd 60% float 인데
	   모바일 폭에서 dt 가 52px 로 눌려 "Design+Construction"(19자)이 칸을 넘친다.
	   -> 라벨 열은 내용에 맞추되(max-content) 폭의 절반을 넘지 않게 하고,
	      그보다 긴 라벨만 한 줄을 통째로 쓰고 값은 다음 줄로 내린다. */
	.portfolio_view .pf_area .ov_list dl {
		display: grid !important;
		grid-template-columns: minmax(0, max-content) minmax(0, 1fr) !important;
		column-gap: 14px !important;
		row-gap: 8px !important;
		align-items: baseline;
	}
	.portfolio_view .pf_area .ov_list dt,
	.portfolio_view .pf_area .ov_list dd {
		float: none !important;
		width: auto !important;
		margin: 0 !important;
	}
	.portfolio_view .pf_area .ov_list dt {
		grid-column: 1;
		max-width: 50vw;
		font-size: var(--fs-small) !important;
		font-weight: var(--fw-small) !important;
		color: #767676 !important;
		white-space: nowrap;
	}
	.portfolio_view .pf_area .ov_list dd {
		grid-column: 2;
		font-size: var(--fs-small) !important;
		color: #363636 !important;
		overflow-wrap: anywhere;
	}
	/* 라벨이 긴 항목(Design+Construction)만 한 줄 전체를 쓰고 값은 아래 줄로 */
	.portfolio_view .pf_area .ov_list dt:nth-last-of-type(1) {
		grid-column: 1 / -1;
		margin-top: 4px !important;
	}
	.portfolio_view .pf_area .ov_list dd:nth-last-of-type(1) {
		grid-column: 1 / -1;
	}

	/* (3) 제목 줄 — 버튼이 위, 제목이 아래.
	   마크업은 [제목][버튼] 순서라 flex order 로 뒤집는다(마크업 무수정). */
	.portfolio_view .pftitle {
		height: auto !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: flex-start !important;
		/* 버튼(이동 도구)과 제목은 다른 층이라 벌리고,
		   제목과 OVERVIEW 는 한 덩어리라 붙인다. */
		gap: 22px;                       /* 버튼 ↔ 제목 : 14 → 22 */
		padding-bottom: 10px !important; /* 16 → 10 */
		margin-bottom: 12px !important;  /* 24 → 12 */
	}
	.portfolio_view .pftitle .pf_btn  { order: 1; }
	.portfolio_view .pftitle .pf_text { order: 2; }

	.portfolio_view .pftitle .pf_text {
		float: none !important;
		/* 이 화면의 주 제목이다. 18px 은 작고 headline(41.9px)은 과하다.
		   §1 의 --fs-metric(26px)이 그 사이 한 단이라 그대로 쓴다. */
		font-size: var(--fs-metric) !important;
		font-weight: var(--fw-strong) !important;
		line-height: 1.3 !important;
		letter-spacing: -0.02em;
		width: 100%;
		word-break: keep-all;
	}
	.portfolio_view .pftitle .pf_btn {
		float: none !important;
		display: flex !important;
		width: 100% !important;          /* 좌·우 끝으로 갈라 놓기 위해 전폭 */
		gap: 6px;
		margin: 0 !important;
		padding: 0 !important;
	}
	/* 목록은 왼쪽, 이동(◀▶)은 오른쪽.
	   마크업은 [이전][다음][목록] 이라 order 로 세우고,
	   목록에 margin-right:auto 를 줘서 남는 폭을 전부 밀어낸다. */
	.portfolio_view .pftitle .pf_btn li { float: none !important; margin: 0 !important; }
	.portfolio_view .pftitle .pf_btn li:nth-child(3) {   /* 목록 — 왼쪽 */
		order: 1;
		margin-right: auto !important;
	}
	.portfolio_view .pftitle .pf_btn li:nth-child(1) { order: 2; }   /* 이전 */
	.portfolio_view .pftitle .pf_btn li:nth-child(2) { order: 3; }   /* 다음 */
	.portfolio_view .pftitle .pf_btn a {
		width: 36px !important;           /* 42 → 36 */
		height: 36px !important;
		float: none !important;
		/* icon_board2.png 는 130×41 안에 아이콘 3개가 44px 간격으로 들어 있다.
		   버튼이 42 → 36px 이 됐으니 '슬롯 간격' 기준으로 줄여야 창과 칸이 맞는다.
		   36/44 = 0.818 → 시트 130 × 0.818 = 106.4px, 간격 44 × 0.818 = 36px.
		   높이(42/44)로 잡으면 슬롯이 38.6px 이 돼 다음 버튼 오른쪽이 잘린다. */
		background-size: 106.4px auto !important;
	}
	.portfolio_view .pftitle .pf_btn a.pf_prev { background-position: 0 0 !important; }
	.portfolio_view .pftitle .pf_btn a.pf_next { background-position: -36px 0 !important; }

	/* 목록(=) → 2×2 네모. 햄버거와 헷갈리지 않게. */
	.portfolio_view .pftitle .pf_btn a.pf_list {
		background-image: none !important;
		background-color: #363636 !important;
		border-radius: 50%;
		position: relative;
	}
	.portfolio_view .pftitle .pf_btn a.pf_list::before,
	.portfolio_view .pftitle .pf_btn a.pf_list::after {
		content: "";
		position: absolute;
		left: 50%;
		width: 14px;
		height: 6px;
		margin-left: -7px;
		background:
			linear-gradient(#fff, #fff) left  center / 6px 6px no-repeat,
			linear-gradient(#fff, #fff) right center / 6px 6px no-repeat;
	}
	.portfolio_view .pftitle .pf_btn a.pf_list::before { top: 11px; }
	.portfolio_view .pftitle .pf_btn a.pf_list::after  { top: 19px; }
}


/* ============================================================================
 * 84) [6차] 게시판 검색 — 필터·입력·버튼을 한 줄로
 *
 *     원본은 select / input / a(검색) 셋이 인라인으로 흩어져 좁은 폭에서 접힌다.
 *     -> 한 상자에 붙여 [작성자 ▾][검색어........][🔍] 로 만든다.
 *        select 는 기본 화살표를 끄고 chevron 을 배경으로 그린다(아래 방향).
 *        검색 버튼은 돋보기만 남긴다 — 글자 '검색' 은 스크린리더용으로 남긴다.
 * ========================================================================== */
@media screen and (max-width: 767px) {
	.bbs_search {
		display: flex !important;
		align-items: stretch !important;
		width: 100% !important;
		max-width: 100% !important;
		border: 1px solid #d4d4d4;
		border-radius: 0;                /* 각지게 */
		overflow: hidden;
		background: #fff;
		box-sizing: border-box;
	}
	.bbs_search select[name="s_key"] {
		flex: 0 0 auto !important;
		width: 68px !important;          /* 84 → 68 */
		height: 40px !important;
		margin: 0 !important;
		padding: 0 18px 0 8px !important;
		border: 0 !important;            /* 구분선 없음 */
		border-radius: 0 !important;
		background: #fafafa
			url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 9l6 6 6-6' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>")
			no-repeat right 6px center / 13px 13px !important;
		-webkit-appearance: none !important;
		appearance: none !important;
		font-size: var(--fs-small) !important;
		color: #363636 !important;
		box-sizing: border-box !important;
	}
	.bbs_search input[name="s_value"] {
		flex: 1 1 auto !important;
		min-width: 0 !important;
		width: auto !important;
		height: 40px !important;
		margin: 0 !important;
		padding: 0 10px !important;
		border: 0 !important;
		border-radius: 0 !important;
		font-size: var(--fs-form) !important;   /* 16px — iOS 확대 방지 */
		box-sizing: border-box !important;
	}
	/* 검색 버튼 — 돋보기만 */
	.bbs_search .btn_point {
		flex: 0 0 auto !important;
		display: flex !important;
		margin: 0 !important;
		background: none !important;
	}
	.bbs_search .btn_point a {
		display: block !important;
		width: 44px !important;
		height: 40px !important;
		padding: 0 !important;
		margin: 0 !important;
		border: 0 !important;            /* 구분선 없음 */
		border-radius: 0 !important;
		background: #fafafa
			url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='11' cy='11' r='6.5' fill='none' stroke='%23363636' stroke-width='2'/><path d='M16 16l4.5 4.5' stroke='%23363636' stroke-width='2' stroke-linecap='round'/></svg>")
			no-repeat center / 19px 19px !important;
		font-size: 0 !important;                /* 글자는 숨기고 접근성 이름은 남긴다 */
		color: transparent !important;
		text-indent: 0 !important;
		cursor: pointer;
	}
}


/* ============================================================================
 * 85) [6차] 게시판 글 상세 — 표 · 목록 버튼 · 이전/다음
 *
 *     항목칸(th)이 100px 고정이라 좁은 폭에서 값이 밀린다 → 76px.
 *     목록 버튼은 text-align:right 라 오른쪽 끝에 붙어 있었다 → 가운데.
 *     이전/다음(.bbs_foot_list)은 dt/dd 가 인라인으로 흘러 줄이 엉켰다
 *     → 라벨 고정폭 + 제목 한 줄 말줄임으로 세운다.
 * ========================================================================== */
@media screen and (max-width: 767px) {
	.bbs_vtype col:first-child { width: 76px !important; }
	.bbs_vtype th {
		width: 76px !important;
		font-size: var(--fs-small) !important;
		padding: 10px 8px !important;
		word-break: keep-all;
	}
	.bbs_vtype td {
		font-size: var(--fs-small) !important;
		padding: 10px 8px !important;
	}

	/* 목록 버튼 — 가운데 */
	.btn_list { text-align: center !important; }
	.btn_list .btn_point { display: inline-block !important; margin: 0 auto !important; }
	.btn_list .btn_point a {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		min-width: 110px;
		min-height: 44px;
		box-sizing: border-box;
	}

	/* 이전/다음 */
	.bbs_foot_list {
		display: block !important;
		width: 100% !important;
		border-top: 1px solid #e5e5e5;
	}
	.bbs_foot_list dt,
	.bbs_foot_list dd {
		float: none !important;
		width: auto !important;
		margin: 0 !important;
	}
	.bbs_foot_list dt {
		display: block !important;
		padding: 12px 0 0 !important;
		font-size: var(--fs-caption) !important;
		font-weight: var(--fw-small) !important;
		color: #767676 !important;
	}
	.bbs_foot_list dd {
		display: block !important;
		padding: 2px 0 12px !important;
		border-bottom: 1px solid #f0f0f0;
	}
	.bbs_foot_list dd:last-child { border-bottom: 0; }
	.bbs_foot_list .short {
		display: block !important;
		max-width: 100% !important;
		min-height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;           /* board.css 의 들여쓰기 — 데이터와 축을 맞춘다 */
		text-indent: 0 !important;
		font-size: var(--fs-small) !important;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	/* [조회수 | 날짜] — 제목 아래 왼쪽에 붙인다.
	   원본은 오른쪽으로 밀려(실측 left 231px) 제목과 축이 어긋났다. */
	.bbs_foot_list .data {
		position: static !important;     /* board.css:65 의 absolute·right:10px 해제 */
		display: block !important;
		width: 100% !important;
		float: none !important;
		text-align: left !important;
		font-size: var(--fs-caption) !important;
		color: #8A8A8A !important;
		margin-top: 0 !important;
		padding-top: 0 !important;
		letter-spacing: -0.2px;
		word-spacing: -2px;              /* "2022. 11. 14" 의 벌어진 공백 */
	}
	.bbs_foot_list .data .kan {
		margin: 0 !important;
		padding: 0 3px !important;       /* 5+5 → 3+3 : 번호와 날짜를 붙인다 */
		color: #d0d0d0 !important;
	}
	/* '이전/현재' 아래 구분선 제거 — 라벨과 제목은 한 덩어리다 */
	.bbs_foot_list dt { border-bottom: 0 !important; }
	/* 여백 위계: 라벨↔제목(9px) > 제목↔[번호|날짜](5px) */
	.bbs_foot_list dd { padding-top: 7px !important; }
}


/* ============================================================================
 * 86) [6차] 작품 상세 OVERVIEW — 접었다 펼치기
 *
 *     사진을 보러 온 화면인데 사양표가 제목 바로 아래에서 자리를 크게 먹는다.
 *     h3 을 버튼으로 쓰고 우측에 chevron 을 둔다(overview-toggle.js).
 *       펼침(기본) : 아래 방향 ▼
 *       접힘        : 오른쪽 방향 ▶
 *     기본은 펼침이다 — 정보를 숨긴 채로 시작하지 않는다.
 *     데스크톱은 접지 않으므로 chevron 도 그리지 않는다.
 * ========================================================================== */
@media screen and (max-width: 767px) {
	.portfolio_view .pf_area h3 {
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;   /* chevron 을 우측 끝으로 */
		width: 100%;
		cursor: pointer;
		-webkit-user-select: none;
		user-select: none;
	}
	.portfolio_view .pf_area h3::after {
		content: "";
		flex: 0 0 auto;
		width: 8px;
		height: 8px;
		margin-right: 4px;
		border-top: 2px solid #767676;
		border-right: 2px solid #767676;
		transform: rotate(135deg);        /* 펼침 — 아래 ▼ */
		transform-origin: 50% 50%;
		transition: transform .2s ease;
	}
	.portfolio_view .pf_area.is-folded h3::after {
		transform: rotate(45deg);          /* 접힘 — 오른쪽 ▶ */
	}
	.portfolio_view .pf_area h3:focus-visible {
		outline: 2px solid #363636;
		outline-offset: 2px;
	}
	.portfolio_view .pf_area.is-folded .ov_list {
		display: none !important;
	}
}


/* ============================================================================
 * 87) [6차] REQUEST 이용절차 — 칸 사이에 연결 기호 되살리기
 *
 *     52) 에서 스프라이트를 li 로 쪼개며 칸 좌우의 연결 기호(OR, ›)를 잘라 냈다.
 *     그림이 조각나서였는데, 그 결과 7단계가 그냥 나열돼 순서가 안 읽힌다.
 *     -> 기호를 CSS 로 다시 그려 칸과 칸 '사이'에 넣는다.
 *        [이용절차]│[무료방문상담] or [사무실 상담] › [견적확인 및 계약]
 *        [디자인 미팅] › [공사시작] › [공사완료 및 촬영] › [사후관리]
 *
 *     격자가 4열이라 각 행의 1번째 칸(s4)에는 왼쪽 기호를 넣지 않는다
 *     — 줄 끝과 줄 머리 사이에는 화살표가 없어야 한다.
 * ========================================================================== */
@media screen and (max-width: 767px) {

	.mform .step li { position: relative; }

	/* 칸 왼쪽에 기호를 띄운다. gap 6px 의 한가운데. */
	.mform .step li::after {
		content: "›";
		position: absolute;
		left: -6px;
		top: 22px;                       /* 아이콘(36px) 세로 중앙 */
		width: 6px;
		text-align: center;
		font-size: 15px;
		line-height: 1;
		color: #9AA5A5;
		pointer-events: none;
	}
	/* s1 은 라벨 바로 옆(구분선이 대신함), s4 는 둘째 줄 머리 → 기호 없음 */
	.mform .step li.s1::after,
	.mform .step li.s4::after { content: none; }
	/* 무료방문상담 ↔ 사무실 상담 사이는 순서가 아니라 '선택' 이다 */
	.mform .step li.s2::after {
		content: "or";
		left: -11px;
		width: 16px;
		font-size: 11px;
		letter-spacing: -0.02em;
	}
	/* 기호가 들어갈 자리를 벌린다 */
	.mform .step ul { gap: 20px 12px !important; }
}


/* ============================================================================
 * 88) [6차] 검색결과 — 결과 수 문구와 정렬 셀렉트
 *
 *     style.css:132  .search .top-info { align-items: flex-end }
 *     style.css:135  .search .top-info select { width:200px; height:55px; font-size:16px }
 *
 *     390px 에서 문구는 두 줄로 감기고 셀렉트는 222×55 로 커져,
 *     둘의 세로 축이 어긋난 채 아래쪽에만 맞춰져 있었다.
 *     셀렉트를 줄이고 두 요소를 세로 가운데로 맞춘다.
 * ========================================================================== */
@media screen and (max-width: 767px) {

	.search .top-info {
		align-items: center !important;
		gap: 12px;
		margin-top: 28px !important;
	}
	.search .top-info p {
		font-size: var(--fs-small) !important;
		line-height: var(--lh-body) !important;
		color: #252525 !important;
		flex: 1 1 auto;
		min-width: 0;
	}
	.search .top-info p em { font-weight: var(--fw-headline) !important; }

	/* 폼 컨트롤이므로 글자는 16px 아래로 내리지 않는다 (iOS 확대 방지) */
	.search .top-info select {
		flex: 0 0 auto;
		width: auto !important;
		min-width: 108px;
		height: 40px !important;
		padding: 0 30px 0 12px !important;
		font-size: var(--fs-form) !important;
		border-color: #D4D4D4 !important;
		border-radius: 0 !important;
	}
}