/* app/public/vendor/imweb/mirror-extra.css
 *
 * mirror.blade.php 레이아웃(P2) 전용 보강 CSS. load-order.json이 관리하는
 * 벤더 CSS 트리(css/) 바깥의 별도 정적 파일이다 — override.css처럼
 * vendor-imweb.mjs가 건드리지 않는다.
 *
 * 로드 순서: load-order.json 22개 → override.css → 이 파일(항상 마지막).
 *
 * 담는 내용:
 *  - 플로팅 CTA 2종 (원본 968x226 PNG를 대체하는 CSS 버튼)
 *  - 모바일 드로어 오픈 상태를 위한 최소 보강(원본 CSS의 .slide_open 규칙은
 *    유지하되, JS가 없어도 폭이 0인 컨테이너를 열 수 있도록 폭 지정)
 */

/* 헤더 배경 — 원본은 아임웹 빌더가 절대배치 .section_bg_color div로 배경색을
 * 준다(인라인 style="background-color:#fff"). 이 레이아웃은 그 래퍼를
 * 생략했으므로 헤더 자체에 배경을 지정해 아래 콘텐츠가 비치지 않게 한다. */
#doz_header_wrap {
	background: #fff;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
	position: relative;
	z-index: 500;
}

/* 결함 3 — 본문 배경. 원본(127.0.0.1:8110)은 헤더 아래 섹션에
 * background-color:rgba(0,62,81,0)(투명)과 별개로 절대배치
 * .section_bg 레이어에 옅은 회색조 텍스처 이미지를 깔아 grid 배경이
 * 흰색이 아니라 회색 면(실측 픽셀 rgb(240,240,240) 부근)으로 보인다.
 * 이 레이아웃(P2)은 그 절대배치 배경 레이어 자체를 이식하지 않았으므로
 * 지금까지 흰색이었다 — "배경 규칙 누락"이 결함 3의 원인이다.
 *
 * 이 프로젝트는 원본 그레이 계열을 그대로 복제하지 않고 브랜드
 * 치환표에 따라 cream(#FFF1EF)으로 바꾸기로 확정돼 있다
 * (resources/views/site/design-system.blade.php의 cream 토큰,
 * "구조는 원본 그대로 + 색만 교체" 원칙). body 배경에 적용해 헤더/푸터를
 * 제외한 모든 mirror 레이아웃 페이지의 콘텐츠 영역이 일관되게 cream이
 * 되도록 한다(개별 섹션이 자체 배경을 지정한 랜딩 페이지는 그 배경이
 * 그대로 위에 덮이므로 영향 없음). */
body.doz_sys {
	background: #FFF1EF;
}

#inline_header_mobile .inline-col-group-left {
	padding: 0 0 0 24px;
}

#inline_header_mobile .inline-col-group-right {
	padding: 0 16px 0 0;
}

/* 재검수 결함 3 — 모바일 드로어 트리거. 원본 마크업(mirror/www.morethan-inc.com/
 * index.html:5011-5014)도 아이콘 옆에 "MENU" 텍스트 <span class="text"> 를
 * 그대로 담고 있지만, 원본 CSS(#w20240409ce954c14b8aae .icon_type_menu a
 * span.text{display:none}, index.html:576-578)가 위젯 ID로 스코프해 그
 * 텍스트를 숨겨 아이콘만 보이게 한다. 이 레이아웃은 그 임의의 위젯 ID
 * 대신 안정적인 #mobile_menu_open_btn ID로 같은 효과를 낸다. */
#mobile_menu_open_btn .text {
	display: none;
}

/* 결함 1·2 — 데스크톱 헤더 정렬·높이·GNB 타이포. 원본 실측
 * (mirror/www.morethan-inc.com/index.html:424-477 부근, 섹션ID로 스코프된
 * 임베드 <style>과, 실제 브라우저 getComputedStyle 측정 병행):
 *  - .inline-inside: max-width 1400px, 좌우 padding 80px로 가운데 정렬된
 *    컨테이너를 만든다(원본은 #s20240409eb01f58aee762 .inline-inside 규칙).
 *  - .inline-col-group: 높이 82px(상하 padding 6px) — 헤더 행 자체의 높이.
 *  - GNB 위젯(#w202404095e8f93e588b5c 스코프 규칙): font-family
 *    Quicksand,SUITE,sans-serif; 개별 링크는 font-size 15px, padding 0 16px,
 *    height 70px, display table-cell, vertical-align middle로 세로 중앙
 *    정렬된다. 로고와 GNB 사이 30px 여백은 위 mirror.blade.php의 여백
 *    위젯(.inline_widget.padding, 원본과 동일하게 30x30) 하나로 재현했다. */
#inline_header_normal .inline-inside {
	max-width: 1400px;
	margin: 0 auto;
	padding-left: 80px;
	padding-right: 80px;
}

#inline_header_normal .inline-col-group {
	padding-top: 6px;
	padding-bottom: 6px;
	height: 82px;
}

#inline_header_normal .inline_widget.padding {
	width: 30px;
	height: 30px;
	min-width: 5px;
	min-height: 5px;
}

/* 원본은 GNB 위젯~링크까지 이어지는 중첩 table-cell로 세로 중앙 정렬을
 * 만든다. 과거에는 하위 메뉴가 있는 항목이 <button>이라 Chromium이
 * appearance:auto 폼 컨트롤의 display:table/table-cell을 inline-block으로
 * 강제 계산해(표준 동작) table-cell을 쓸 수 없었다. 재검수 결함 2 수정으로
 * 데스크톱 상위 항목이 다시 전부 <a>가 됐지만, flex 쪽이 이미 원본과 같은
 * 시각 결과(70px 행 높이, 세로 중앙, 좌우 16px)를 내고 검증도 끝났으므로
 * table-cell로 되돌리지 않고 그대로 유지한다. */
#inline_header_normal .nav.navbar-nav._inline_menu_container {
	height: 70px;
	display: inline-flex;
	align-items: center;
	font-family: Quicksand, SUITE, sans-serif;
}

#inline_header_normal .viewport-nav.desktop {
	display: flex;
	align-items: stretch;
	height: 70px;
}

#inline_header_normal .viewport-nav.desktop > li.dropdown {
	display: flex;
	align-items: stretch;
}

/* 재검수 결함 1 — 이전 주석의 "일반 항목도 700" 실측은 오측정이었다.
 * 원본 소스(mirror/www.morethan-inc.com/index.html:143-144, :169)를 다시
 * 확인하면 `.viewport-nav > li.dropdown > a { font-weight: inherit; }`
 * (일반 항목)과 `.viewport-nav > li.dropdown > a.active { font-weight: bold; }`
 * (활성 항목)이 분리돼 있고, 실제 브라우저 실측(127.0.0.1:8110)도 활성
 * 항목만 700이고 나머지 5개는 400이다. letter-spacing은 원본 소스가 빈 값
 * (`letter-spacing:px;`)이라 무효화돼 계산값이 "normal"이므로 여기서도
 * 별도 지정하지 않는다(브라우저 기본값에 맡긴다). */
#inline_header_normal .viewport-nav.desktop > li.dropdown > a {
	display: flex;
	align-items: center;
	height: 70px;
	padding: 0 16px;
	font-size: 15px;
	font-weight: 400;
	color: #333333;
	white-space: nowrap;
}

#inline_header_normal .viewport-nav.desktop > li.dropdown > a.active {
	font-weight: 700;
}

/* 재검수 결함 4 — GNB 드롭다운 서브메뉴(li.dropdown-submenu > a._fade_link,
 * 예: 포트폴리오 하위 "전체/콘텐츠IP/기업/..." 등) 글자색이 상위 항목과
 * 다르게 rgb(33,33,33)(#212121)로 나오는 문제.
 *
 * 원인: site.css의 `.dropdown-menu > li > a { color: #212121; }`(원본
 * 그대로, 색치환표 대상 아님)가 이 서브메뉴 링크에 적용된다. 원본
 * 사이트에서는 이 값이 아임웹 빌더가 페이지마다 통째로 찍어내는
 * 위젯 인스턴스 스코프 임베드 <style>(`#w202404... .dropdown-menu > li >
 * a { color: #232323; }`, 문서 내장 블록이라 P1 벤더링 대상 밖) 규칙에
 * 덮여 실제로는 #232323으로 보인다(playwright 실측,
 * 127.0.0.1:8110/Morethan). 이 미러 스택은 그 임베드 블록을 싣지 않으므로
 * site.css의 #212121이 그대로 노출됐다. 위 `> li.dropdown > a`(상위
 * 항목) 규칙과 마찬가지로 색치환표 #232323→#333333을 적용해 서브메뉴에도
 * 명시적으로 덮어쓴다. */
.viewport-nav.desktop .dropdown-menu > li > a {
	color: #333333;
}

/* 데스크톱 GNB 드롭다운 — 원본은 (아마도) 벤더링하지 않은 imweb 자체 JS가
 * hover/click 시 li에 ".open" 클래스를 붙여 .dropdown-menu(base: display:none,
 * vendor_blue_10.css)를 연다. 그 JS를 싣지 않으므로 데스크톱 포인터 환경에서
 * hover만으로 서브메뉴가 보이도록 최소 규칙을 추가한다. 마크업의
 * li.dropdown/.dropdown-menu/.dropdown-submenu 클래스는 원본 그대로다. */
.viewport-nav.desktop > li.dropdown:hover > .dropdown-menu,
.viewport-nav.desktop .dropdown-submenu:hover > .dropdown-menu {
	display: block;
}

/* 결함 6: 실제 <footer> 앞의 연락 밴드(고객센터/메일로 견적 묻기/빠른
 * 상담 신청). 원본 실측(mirror/www.morethan-inc.com/*.html의
 * #s20240905c3a09facdbfdf, 12그리드 기준 logo 2 · spacer 2 · 고객센터 2 ·
 * 메일 3 · 상담 3). 배경은 재색상화한 footer_band_bg(#B8463A 계열
 * 그라디언트) 이미지를 그대로 쓴다. flex로 재현하되 비율은 원본 그리드
 * 폭(2:2:3:3)에 맞춘다.
 *
 * P8 재검수(연락 배너 중복 노출) 수치 정합화: 이 배너가 랜딩 S8
 * cta-banner 섹션을 대체해 유일한 렌더 경로가 되면서, S8 렌더 CSS
 * (landing-extra.css .section--cta-banner 계열, playwright
 * getComputedStyle 실측값 기준)와 값이 어긋나 있던 걸 바로잡는다 —
 * 이전 값(padding 40px 0, 라벨 rgba(255,255,255,0.8), 값 18px bold,
 * 버튼 padding 0 24px/height 40px/radius 4px/bg #fff/14px)은 실측치가
 * 아니라 구현 당시의 근사값이었다. 아래 수치는 landing-extra.css
 * 헤더 주석(원본 실측: section padding 30px, 라벨/값 14px
 * rgb(255,255,255) lh 28px, 버튼 padding 6px 22px/radius 30px/height
 * 30px/bg rgb(245,245,245)→색치환 #FFF1EF/color rgb(35,35,35)→색치환
 * #333333/12px)와 동일하다. */
/* 상단 여백은 원본 실측치(30px)를 의도적으로 벗어난다 — 사용자 지시
   2026-08-13 "푸터가 상단에 너무 붙어있다. 푸터 안쪽에 위 방향
   padding-top 좀 필요해". 밴드는 푸터의 첫 층이라 바로 위 섹션(랜딩
   CTA 사진 등)과 맞닿는 지점이고, 원본의 30px로는 층이 시작된다는
   느낌이 나지 않는다.
   위아래는 대칭으로 둔다. 60/30으로 주던 때는 콘텐츠가 아래로 처지고
   위쪽 60px이 빈 그라디언트 면적으로만 보여, 여백을 늘렸는데 오히려
   허전해 보였다. */
.mm-footer-band {
	background-color: #6F2A23;
	background-size: cover;
	background-position: center;
	padding: 48px 0;
	color: #fff;
}

.mm-footer-band .inside {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 15px;
}

/* 메일 열 제거(2026-08-13) 후 밴드에는 로고와 상담 열만 남는다.
   이전에는 .mm-footer-band__col이 flex: 1 1 160px이라 남는 공간을
   열들이 나눠 먹었고, 열 하나가 화면의 40%(515px)를 차지하는데 내용은
   그 1/4도 안 돼 덩어리 사이가 휑하게 벌어졌다. 원본은 col-dz-2 /
   col-dz-3(12그리드의 16.7% / 25%)로 폭이 고정이라 이런 일이 없었다 —
   타 법인 번호라 옮기지 않은 고객센터 열이 빠지면서 비율 구조가
   무너진 것이다. 이제 열은 내용 폭만 차지하고, 로고와 상담 블록을
   양 끝으로 밀어 가로를 쓴다. */
.mm-footer-band__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px 32px;
}

/* 로고는 28px, 옆 열은 라벨+값 2줄이라 56px이다. align-items: center로
   중심선을 맞추면 로고가 두 줄 사이 빈 틈에 걸려 기준선이 사라진다.
   위를 맞추고, 라벨의 line-height(28px) 안에서 로고가 시각적으로
   가운데 오도록 미세 오프셋만 준다. */
.mm-footer-band__logo {
	flex: 0 0 auto;
	margin-right: 24px;
	padding-top: 2px;
}

.mm-footer-band__col {
	flex: 0 1 auto;
}

.mm-footer-band__label {
	margin: 0;
	font-size: 14px;
	line-height: 28px;
	font-weight: 400;
	color: #fff;
}

.mm-footer-band__value {
	display: block;
	margin: 0;
	font-size: 14px;
	line-height: 28px;
	font-weight: 400;
	color: #fff;
	text-decoration: none;
}

/* 결함(P8 재검수 발견): 전화번호 열은 <a class="mm-footer-band__value">라
 * .doz_sys a, .doz_sys a:hover { color:#000 }(custom.cm.css)와 특이도가
 * 같은 클래스 단독 선택자(0,0,1,0)로는 못 이긴다(선택자 자체
 * 특이도 0,0,1,1) — landing-extra.css의 a.cta-banner__button과 동일한
 * "요소+클래스" 패턴으로 특이도를 (0,0,1,1) 이상으로 올려야 한다. */
a.mm-footer-band__value {
	color: #fff;
}

a.mm-footer-band__value:hover {
	text-decoration: underline;
}

.mm-footer-band a.mm-footer-band__btn {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 30px;
	padding: 6px 22px;
	margin-top: 4px;
	border-radius: 30px;
	background-color: #FFF1EF;
	color: #333333;
	font-size: 12px;
	text-decoration: none;
	white-space: nowrap;
}

.mm-footer-band a.mm-footer-band__btn:hover {
	color: #333333;
	text-decoration: none;
	opacity: 0.9;
}

@media (max-width: 767px) {
	.mm-footer-band__inner {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* 푸터 — 원본은 .footer-wrap 아래 4개 table-cell 컬럼
 * (foot-custom/foot-main-nav/foot-foot-nav/foot-sociallink)이다. 이
 * 레이아웃을 만드는 CSS 규칙이 P1이 벤더링한 22개 CSS(<link>로 참조되는
 * 외부 파일들) 어디에도 없는 것은 맞다(site.css/site2.css/im_component.css/
 * custom.cm.css 전수 검색 결과 0건).
 *
 * 정정(재검수 결함 B): "P1이 파일을 빠뜨렸다"는 이전 서술은 사실이 아니다.
 * 실제 출처는 mirror/www.morethan-inc.com/index.html 안에 아임웹 페이지
 * 빌더가 페이지마다 통째로 찍어내는 **임베드 <style> 블록**이다(index.html
 * 기준 74~4076번째 줄, .footer-wrap 규칙은 그 안 약 3834번째 줄 —
 * `<link rel="stylesheet">`도 아니고 엘리먼트 `style=""` 속성도 아닌,
 * 문서 내부에 직접 박힌 CSS). P1의 벤더링 방식은 `<link>`로 참조되는
 * 외부 스타일시트만 수집하도록 설계돼 있어, 이런 문서 내장형 블록은
 * 애초에 벤더링 스코프 밖이다 — "빠뜨림"이 아니라 수집 방식 자체의
 * 구조적 한계다(다른 페이지에도 페이지당 4개씩, 총 72개/약 8.2MB 규모로
 * 존재 — 작업 보고의 임베드 <style> 조사 결과 참고, P5 랜딩 이관 시
 * 별도 추출 전략이 필요하다).
 *
 * 재재검수(폰트까지 원본과 동일해야 한다는 원칙 재확인): 이전 버전은
 * "display:table/table-cell"까지만 원본에서 옮기고, 배경색·패딩·폰트·
 * 컬럼 너비·모바일 배치는 새로 디자인했다("P2가 스스로 근사임을 인정"
 * — 작업 지시 참고). 원본 사이트(127.0.0.1:8110)에서 getComputedStyle()로
 * 재실측한 값을 그대로 옮긴다:
 *  - #doz_footer_wrap 배경 rgb(0,62,81) = #003e51 → 색 치환표에 따라
 *    #B8463A로 교체(구조·수치는 원본, 색만 교체 원칙).
 *  - section padding: 26px 0(데스크톱 ≥1200) / 20px 0(<1200) — 좌우 없음.
 *  - .inside: max-width 1400px, margin auto, 좌우 padding 0(≥992) /
 *    0 15px(≤991).
 *  - .footer-wrap: display:table, 4개 컬럼 모두 padding 0(칼럼 사이
 *    여백은 명시적 padding이 아니라 table-layout:auto가 콘텐츠 폭 차이로
 *    만드는 잔여 공간이다 — 그래서 폭을 고정하지 않는다).
 *  - 본문 전 요소(로고 태그라인·사업자정보·카피라이트·GNB·정책 링크)가
 *    예외 없이 font-size:12px; line-height:24px; color:#fff;
 *    font-family: Pretendard 체인으로 통일돼 있다(개별 크기/회색조를 준
 *    이전 버전이 원본과 달랐던 지점).
 *  - .footer-wrap은 max-width:1199px에서(즉 데스크톱 표 레이아웃이 아닌
 *    구간 전부) display:flex로 전환되고, 자식에 order가 매겨져
 *    "foot-main-nav(1) · foot-foot-nav(2)"가 한 줄에 나란히 오고,
 *    foot-custom(3, width 100%)이 그 아래 새 줄로, foot-sociallink(4)가
 *    맨 아래로 배치된다 — "모바일 2열 재배치"가 이것이다(이전 버전의
 *    1열 단순 스택은 이 order 재배치를 누락한 근사였다). ≤991에서
 *    .inside가 좌우 15px 패딩을 추가로 얻는다. */
/* 상하 여백은 원본 실측치(26px / 20px)를 의도적으로 벗어난다 —
   사용자 지시 2026-08-13 "푸터 배경색 안에 위쪽에 로고랑 메뉴들 딱
   붙지 않게".
   연락 배너(.mm-footer-band)를 제거하면서 이 요소가 푸터의 첫 층이
   됐다. 배너가 있던 동안에는 여기 상단 여백을 주면 배너 위쪽에 푸터
   배경색만 깔린 띠가 생겨 0으로 뒀는데, 배너가 없어진 지금은 그
   이유가 사라졌고 대신 로고·사업자정보·메뉴가 배경 상단에 그대로
   닿는다.
   하단도 함께 넉넉히 준다 — 전 페이지에 떠 있는 플로팅 CTA가 푸터
   맨 아래 메뉴 항목을 덮는 문제를 조금이나마 덜어준다. */
#doz_footer_wrap {
	background: #B8463A;
	color: #fff;
	padding: 56px 0 48px;
}

@media (max-width: 1199px) {
	#doz_footer_wrap {
		padding: 40px 0 36px;
	}
}

/* 좌우 패딩은 원본 실측치(≥992에서 0)를 의도적으로 벗어난다. 원본은
   컨테이너가 max-width 1400px이고 992~1399px 구간에서 좌우 패딩이 0이라,
   화면이 1400px보다 좁으면 로고·사업자정보·GNB가 뷰포트 가장자리에
   그대로 닿는다(노트북 폭에서 실제로 붙어 보인다 — 1280px에서 확인).
   더 넓은 화면에서는 컨테이너가 중앙 정렬되며 우연히 여백이 생겨
   문제가 드러나지 않았을 뿐이다.
   전 구간에 좌우 15px을 주되 모바일(≤991) 값과 동일하게 맞춰,
   1400px 이상에서는 컨테이너 중앙 정렬이 지배하므로 원본과 차이가
   없다. */
#doz_footer .inside {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 15px;
}

#doz_footer .footer-wrap {
	display: table;
	width: 100%;
	table-layout: auto;
}

#doz_footer .foot-custom,
#doz_footer .foot-main-nav,
#doz_footer .foot-foot-nav,
#doz_footer .foot-sociallink {
	display: table-cell;
	vertical-align: top;
}

/* ≤1199px: 원본 실측 결과 table 레이아웃이 아니라 flex + order로 전환된다
 * (섹션 5 참고). 폭은 고정하지 않고(원본도 명시적 width 없이 콘텐츠 폭에
 * 맡긴다) order만 재배치한다. */
@media (max-width: 1199px) {
	#doz_footer .footer-wrap {
		display: flex;
		flex-wrap: wrap;
	}

	#doz_footer .foot-custom,
	#doz_footer .foot-main-nav,
	#doz_footer .foot-foot-nav,
	#doz_footer .foot-sociallink {
		display: block;
	}

	#doz_footer .foot-main-nav {
		order: 1;
	}

	#doz_footer .foot-foot-nav {
		order: 2;
	}

	#doz_footer .foot-custom {
		order: 3;
		width: 100%;
	}

	#doz_footer .foot-sociallink {
		order: 4;
	}
}

#doz_footer .custom-text,
#doz_footer .foot-tagline,
#doz_footer .footer-company-info,
#doz_footer .footer-company-info__item,
#doz_footer .copryright-area,
#doz_footer .footer-all-nav li,
#doz_footer .footer-all-nav a,
#doz_footer .footer-inert-link {
	font-family: Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", "Nanum Gothic", "Noto Sans", sans-serif;
	font-size: 12px;
	font-weight: 400;
	line-height: 24px;
	color: #fff;
}

#doz_footer .custom-text {
	margin-bottom: 0;
}

#doz_footer .foot-tagline {
	margin: 0;
}

#doz_footer .footer-company-info {
	display: flex;
	flex-direction: column;
	margin: 15px 0;
}

#doz_footer .copryright-area {
	margin: 15px 0 0;
}

#doz_footer .footer-all-nav {
	list-style: none;
	margin: 0;
	padding: 0;
}

#doz_footer .footer-all-nav li {
	margin-bottom: 0;
}

#doz_footer .footer-all-nav a {
	text-decoration: none;
}

#doz_footer .footer-all-nav a:hover {
	text-decoration: underline;
}

#doz_footer .footer-inert-link {
	color: rgba(255, 255, 255, 0.5);
	cursor: default;
}

/* SNS — 원본은 원형 배지가 아니라 아임웹 아이콘 폰트(Plipop-Social-Icons,
 * ii.css — 이미 load-order.json에 벤더링돼 있다)를 그대로 쓴다. 배경
 * 없이 흰색 아이콘 44x29 블록이 나란히 놓인다(실측: .btn padding 0 12px,
 * text-align:center, 아이콘 font-size 20px). */
#doz_footer .foot-sociallink .btn-group {
	display: inline-flex;
	background: none;
	border-radius: 0;
}

/* 결함 6 재검수: 벤더 .btn 기본 규칙(site.css)이 background-color:#fff를
 * 깔아 흰 배경 위에 흰 아이콘이 겹쳐 보이지 않았다(아이콘 자체는 정상
 * 렌더 — content/font-family 모두 정상 적용됨을 getComputedStyle로
 * 확인). 원본처럼 배경 없이 아이콘만 보이도록 명시적으로 투명 처리한다. */
#doz_footer .foot-sociallink .btn {
	display: block;
	padding: 0 12px;
	text-align: center;
	color: #fff;
	text-decoration: none;
	background: none;
	border: 0;
}

#doz_footer .foot-sociallink .btn .ii {
	font-size: 20px;
}

#doz_footer .foot-sociallink .btn:hover {
	color: #FF6F61;
}

/* 플로팅 CTA — 결함 4 수정.
 * 원본 실측(mirror/www.morethan-inc.com/Morethan.html의 .floBanPc1/.floBanPc2,
 * .floBanMob1/.floBanMob2 인라인 <style>): PC는 floBanPc1(빠른 견적,
 * right:25%)이 floBanPc2(1분 만에 상담, right:52%)보다 화면 오른쪽에
 * 있다 — 즉 좌 "1분 만에 상담 받기" → 우 "빠른 견적 받기" 가로 배열.
 * 모바일은 floBanMob2(1분 만에 상담, bottom:18%)가 floBanMob1(빠른 견적,
 * bottom:10%)보다 위에 있다 — 즉 위 "1분 만에 상담 받기" → 아래
 * "빠른 견적 받기" 세로 배열. blade는 primary(빠른 견적)를 secondary(1분
 * 상담)보다 먼저 렌더링하므로, row-reverse/column-reverse로 DOM 순서를
 * 바꾸지 않고 시각 순서만 뒤집는다.
 * 두 원본 PNG(estimate/counseling 968x226)를 실측한 결과 배경 #d4ac67,
 * 텍스트 #003e51로 두 버튼이 완전히 동일한 스타일이었다 — 아웃라인
 * 버전은 존재하지 않는다. 색만 치환표대로 #FF6F61로 옮기고, 아래
 * .mm-floating-cta__btn 하나로 두 버튼을 동일하게 유지한다(--primary/
 * --secondary 구분 스타일을 만들지 않는다). */
.mm-floating-cta {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 2000;
	display: flex;
	flex-direction: column-reverse;
	align-items: flex-end;
	gap: 12px;
}

@media (min-width: 992px) {
	.mm-floating-cta {
		flex-direction: row-reverse;
		align-items: center;
	}
}

.mm-floating-cta__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 220px;
	height: 52px;
	padding: 0 20px;
	border-radius: 26px;
	background: #FF6F61;
	color: #333333;
	font-family: 'Pretendard Variable', Pretendard, -apple-system, sans-serif;
	font-weight: 700;
	font-size: 15px;
	text-align: center;
	text-decoration: none;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
	transition: transform 150ms ease, box-shadow 150ms ease;
}

.mm-floating-cta__btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
	color: #333333;
	text-decoration: none;
}

@media (max-width: 480px) {
	.mm-floating-cta {
		right: 16px;
		bottom: 16px;
		gap: 8px;
	}

	.mm-floating-cta__btn {
		width: 168px;
		height: 44px;
		font-size: 13px;
		border-radius: 22px;
	}
}

/* 모바일 드로어 — 원본 CSS(.slide_open .mobile_slide_menu)는 transform만
 * 다루고, 컨테이너 자체의 폭(기본 0, overflow:hidden)은 원래 imweb 자체
 * JS(MOBILE_SLIDE_MENU)가 인라인으로 넓혀준다. 이 레이아웃은 그 JS를 싣지
 * 않으므로 mobile-drawer.js가 같은 "slide_open" 클래스를 컨테이너에 붙일 때
 * 폭도 함께 확보해 원본과 동일한 열림 동작을 낸다. */
#mobile_slide_menu_wrap.slide_open {
	width: 100%;
}

/* 모바일 드로어 하위 메뉴 아코디언 — 원본은 imweb JS가 매기는 has_child/open
 * 클래스 + jQuery slideToggle(높이 애니메이션)에 의존하는데, 그 JS를 싣지
 * 않으므로 순수 CSS max-height 트랜지션 + mobile-drawer.js가 붙이는
 * "mm-open" 클래스로 동일한 접기/펼치기 동작을 재구현한다. 마크업 구조·
 * 원본 클래스명(depth-01/depth-02/toggle-btn 등)은 그대로 유지한다. */
.viewport-nav.mobile li.depth-01 > ul {
	max-height: 0;
	overflow: hidden;
	transition: max-height 200ms ease;
}

.viewport-nav.mobile li.depth-01.mm-open > ul {
	max-height: 1000px;
}

.viewport-nav.mobile .toggle-btn {
	position: absolute;
	top: 0;
	right: 0;
	width: 44px;
	height: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.viewport-nav.mobile .toggle-btn:after {
	content: "";
	width: 8px;
	height: 8px;
	border-right: 2px solid #7f7f7f;
	border-bottom: 2px solid #7f7f7f;
	transform: rotate(45deg);
	transition: transform 200ms ease;
}

.viewport-nav.mobile li.depth-01.mm-open > button .toggle-btn:after {
	transform: rotate(225deg);
}

/* .viewport-nav.mobile li.depth-01 > a(원본 vendored 규칙, site.css:2116 —
 * position:relative; padding:13px 50px 14px 20px; font-size:14px)와 정확히
 * 같은 값을 준다 — 안 그러면 <a>였던 리프 항목(제작가능 품목/Contact)만
 * 20px 들여쓰기가 붙고 <button>으로 바뀐 상위 항목은 들여쓰기가 없어져
 * 메뉴 항목마다 정렬이 어긋나 보인다(재검수 중 발견). */
.viewport-nav.mobile li.depth-01 > button {
	position: relative;
	outline: 0;
	border: none;
	margin: 0;
	padding: 13px 50px 14px 20px;
	font-size: 14px;
	line-height: 1;
	display: block;
	background: transparent;
	color: inherit;
	font-family: inherit;
	font-weight: inherit;
	cursor: pointer;
	text-align: left;
	width: 100%;
}

/* 결함 2 — 모바일 드로어 backdrop. 원본 CSS(site.css:1773)가 이미
 * background:#000; opacity:.6; position:fixed로 스타일을 정의하지만
 * 기본 표시/숨김 상태는 정의하지 않는다(원래 imweb JS가 열 때만 DOM에
 * 엘리먼트를 만들어 넣는 방식이라). mobile-drawer.js는 항상 backdrop을
 * DOM에 넣어 두므로, 여기서는 slide_open이 아닐 때 숨기기만 한다. */
.mobile_slide_menu_container .slide_menu_backdrop {
	display: none;
}

.mobile_slide_menu_container.slide_open .slide_menu_backdrop {
	display: block;
}

/* 포트폴리오 카드(.shop-item) — 원본은 위젯 ID 스코프
 * (#w202507223026b9b72a2b4 등, 페이지마다 다른 ID) 임베드 <style>로
 * 카드 타이포·간격을 준다(mirror/www.morethan-inc.com/index.html,
 * 233.html 실측). 위젯 ID는 재사용 불가능하므로 이 프로젝트의 안정적인
 * 카드 마크업(site.portfolio.partials.card, 클래스는 원본과 동일하게
 * .shop-item/.item-detail/.item-pay/.item-summary 그대로 이식)에
 * 안정적인 선택자로 재현한다.
 *
 * font-family·font-weight(h2: bold)는 이미 전역 규칙
 * (.doz_sys h1,h2,h3..{font-family:Georgia,Pretendard,...},
 * .doz_sys h1,h2,h3,h4{font-weight:bold}, custom.cm.css)이 공짜로
 * 주므로 여기서는 건드리지 않는다 — font-size만 원본이 22px인데
 * .doz_sys h2 전역 규칙(3.214em → 렌더 결과 14px)에 밀려 있던 것이
 * 결함의 원인이다(재검수 결함 1). */
.shop-item .item-pay > h2,
.shop-item .item-overlay h2 {
	font-size: 22px;
}

.shop-item .item-detail {
	text-align: left;
}

.shop-item .item-summary {
	text-align: left;
}

.shop-item .item-summary,
.shop-item .item-summary p,
.shop-item .item-summary span {
	font-size: 17px;
	color: rgba(0, 0, 0, 0.75);
}

/* 원본 위젯은 hover_image 타입(썸네일 위 어두운 오버레이가 뜨지 않고
 * 항상 숨겨져 있다 — #w202507223026b9b72a2b4 .hover_image .shop-item a
 * .item-overlay{display:none!important}, min-width:768px). 이 카드
 * 마크업은 항상 이 타입으로만 쓰이므로(호버 시에도 덮개가 뜨지 않는 게
 * 원본 동작) 무조건 숨긴다. */
.shop-item .item-overlay {
	display: none;
}

/* 그리드 gutter/열 수 — 원본 실측(사이트 전역 site2.css
 * .inside .thumb-item-4 .shop-item 폭 규칙 + 위젯 스코프 .thumb-row
 * margin/.shop-item padding, mirror/www.morethan-inc.com/index.html):
 *  - 폭 <768: 1열, thumb-row margin 0 -7.5px, shop-item padding 0 7.5px,
 *    margin-bottom 30px(카드 간 세로 간격)
 *  - 768~991: 2열, 위와 동일 패딩/세로간격
 *  - 992~1199: 2열, thumb-row margin 0 -12.5px, shop-item padding
 *    0 12.5px, margin-bottom 0
 *  - ≥1200: 4열, 위와 동일 12.5px 패딩
 * .portfolio-grid(site.portfolio.index)는 이 값을 그대로 grid
 * column-gap/row-gap(패딩 좌우 합산 15px·25px)으로 재현한다 — 실제 CSS는
 * resources/views/site/portfolio/index.blade.php의 인라인 <style>에
 * 있다(이 파일 소유 범위: site.portfolio.** 포함). */

/* 대표 이미지 미지정 카드의 자리표시.
 *
 * Media::urlFor()는 cover_image가 비면 null을 돌려준다. 그대로
 * src=""로 내보내면 브라우저가 빈 src를 현재 문서 URL로 해석해
 * 페이지 HTML을 이미지로 내려받고 깨진 아이콘을 띄운다(운영
 * /lineup에서 커버 미지정 제품 8건이 실제로 그 상태였다). 그래서
 * 뷰는 URL이 있을 때만 <img>를 내고, 없으면 이 요소로 대체한다.
 *
 * 카드 썸네일은 정사각(원본 실측 281x281)이고 .item-wrap이 자체
 * 높이를 갖지 않아 자식이 높이를 만든다 — <img>를 그냥 빼면
 * 래퍼가 0px로 접혀 그리드가 무너진다. 그래서 aspect-ratio로
 * 같은 정사각 박스를 직접 만든다.
 *
 * 색은 사이트 뉴트럴 톤(#F1EDEA) — 흰 여백으로 두면 카드가 깨진
 * 것처럼 보인다. site.portfolio.partials.card와 site.lineup.index가
 * 이 한 클래스를 공유한다. */
.mm-cover-placeholder {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	background: #F1EDEA;
}

/* 관리자 에디터(Toast UI)로 작성한 본문의 공통 제약.
 *
 * 본문 HTML은 운영자가 붙여 넣은 것이라 크기를 통제할 수 없다. 실제로
 * 제작 스토리 본문의 인라인 이미지가 원본 폭(1024px) 그대로 렌더돼
 * 375px 모바일에서 문서 전체에 가로 스크롤이 생겼다(검수 TC-16 지적).
 * 본문 컨테이너에 max-width를 줘도 이미지 같은 치환 요소는 자기 고유
 * 크기를 우선하므로 소용이 없다 — 요소 자체를 컨테이너에 가두어야 한다.
 *
 * 같은 이유로 넘칠 수 있는 나머지 요소도 함께 잡는다. 표와 코드 블록은
 * 줄바꿈으로 뭉갤 수 없는 콘텐츠라 자기 자신만 가로 스크롤되게 하고
 * (문서를 밀지 않는다), 긴 URL은 단어 중간에서 끊는다.
 *
 * 이 클래스는 사용자 입력 본문을 렌더하는 모든 공개 화면이 공유한다:
 * story/show, portfolio/show, press/show, faq/index, staging/page-body.
 * 새로 본문을 렌더하는 화면을 만들면 여기에 mm-rich-body를 붙일 것. */
.mm-rich-body img,
.mm-rich-body video,
.mm-rich-body iframe {
	max-width: 100%;
	height: auto;
}

.mm-rich-body table,
.mm-rich-body pre {
	max-width: 100%;
	overflow-x: auto;
}

.mm-rich-body a {
	word-break: break-word;
}