/* 모듈 상세 — 워드프레스 원본(register_sft_module_detail.php)에서 그대로.
   2026-09-25. md- 접두어. 생산라인 상세(pld-)와 짝이다. */
		/* =========================================================================
		   화이트 카탈로그 스타일(2026-08-29) — shifthings.com/line_library의
		   module_equipment_sections 실제 CSS를 그대로 참고해 색상·수치까지
		   맞췄다("css야.. 참고해"). 필드명/구조는 우리 데이터 모델에 맞게
		   새로 작성했지만, 색상·여백·카드 크기·"+" 버튼은 원본 값 그대로다.
		   ========================================================================= */
		html{font-size:16px !important;}
		/* 2026-09-25 — 장비·생산라인과 같은 함정. body 의 overflow-x:hidden 이
		   그 안의 position:sticky 를 죽인다(CE 는 body 가 곧 스크롤 컨테이너). */
		body.md-body{background:#fff !important;}
		:root{--md-bg:#fff;--md-surface:#F7F8FA;--md-surface-2:#F4F5F7;--md-border:#E5E7EB;--md-border-soft:#EEF0F3;--md-text:#111827;--md-text-dim:#4B5563;--md-text-faint:#6B7280;--md-accent:#049AA0;--md-accent-rgb:4,154,160;--md-on-accent:#fff;--md-font-body:"IBM Plex Sans KR","Apple SD Gothic Neo",sans-serif;--md-font-mono:"IBM Plex Mono",monospace;}
		.md-page{background:var(--md-bg);color:var(--md-text);font-family:var(--md-font-body);line-height:1.6;-webkit-font-smoothing:antialiased;width:100%;max-width:100%;position:relative;}
		.md-page *{box-sizing:border-box;}
		.md-page a{color:inherit;text-decoration:none !important;}
		.md-wrap{max-width:1400px;margin:0 auto;padding:2.4rem 2rem 0;}
		.md-crumb{display:flex;align-items:center;gap:.55rem;margin-bottom:1.4rem;}
		.md-back{display:inline-flex;align-items:center;gap:.4rem;font-size:.86rem;color:var(--md-text-faint);}
		.md-hero-badge{position:absolute;top:16px;left:16px;z-index:2;font-family:var(--md-font-mono);font-size:.78rem;font-weight:700;color:#fff;background:var(--md-text);padding:.32rem .8rem;border-radius:999px;letter-spacing:.02em;}
		/* ---- 히어로 — 왼쪽 모듈명+대표사진 / 오른쪽 4행 정보 리스트
		   (2026-08-29, "왼쪽에는 모듈명과 사진.. 오른쪽에는 구성설명
		   도입포인트 추천대상 구축비용"). 4행은 항상 고정 노출한다
		   ("없으면 출력안하더라도.. 디자인상태는 유지해야해") — 데이터가
		   없는 행도 라벨은 그대로 두고 안내문구로만 채운다. */
		.md-hero{display:grid;grid-template-columns:1fr 1.2fr;gap:4.2rem;align-items:start;padding:1rem 0 2.4rem;border-bottom:1px solid var(--md-border-soft);margin-bottom:0;}
		@media (max-width:860px){.md-hero{grid-template-columns:1fr;gap:2rem;}}
		.md-hero-media{width:100%;display:flex;flex-direction:column;gap:1rem;}
		.md-hero-line-label{font-size:clamp(1.7rem,2.6vw,2.2rem);font-weight:600;color:var(--md-text-dim);letter-spacing:-.02em;text-wrap:balance;}
		.md-hero-image{width:100%;aspect-ratio:4/3;position:relative;display:flex;align-items:center;justify-content:center;}
		.md-hero-image img{width:100%;height:100%;object-fit:contain;display:block;transition:filter .25s ease;}
		.md-hero-image img:hover{filter:drop-shadow(0 0 28px rgba(var(--md-accent-rgb),.35));}
		.md-hero-image svg{width:36%;height:36%;color:var(--md-text-faint);}
		.md-title-row{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;margin-bottom:1.4rem;}
		.md-hero h1{font-size:clamp(1.7rem,2.6vw,2.2rem);font-weight:900;letter-spacing:-.03em;margin:0;text-wrap:balance;}
		.md-buy-btn{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;padding:.7rem 1.5rem;background:#0071E3;color:#fff !important;font-size:.98rem;font-weight:700;border-radius:999px;transition:background .15s ease;}
		.md-buy-btn:hover{background:#0059B3;}
		.md-cta-link{display:flex;width:fit-content;margin-left:auto;align-items:center;gap:.4rem;margin-top:1.4rem;font-size:1.1rem;font-weight:700;color:#0071E3 !important;text-decoration:underline !important;text-underline-offset:3px;}
		.md-cta-link svg{width:17px;height:17px;transition:transform .15s ease;}
		.md-cta-link:hover{color:#0059B3 !important;}
		.md-cta-link:hover svg{transform:translateX(3px);}
		.md-info-list{display:flex;flex-direction:column;}
		.md-info-row{display:grid;grid-template-columns:28px 1fr;gap:1.5rem;align-items:start;padding:1.25rem 0;border-top:1.5px solid var(--md-border);}
		.md-info-row:first-child{border-top:none;}
		.md-info-icon{width:24px;height:24px;color:var(--md-text-faint);flex-shrink:0;margin-top:.2rem;}
		.md-info-icon svg{width:100%;height:100%;}
		.md-info-label{font-size:1rem;font-weight:700;color:var(--md-text-faint);margin-bottom:.32rem;}
		.md-info-value{font-size:1.2rem;font-weight:700;color:var(--md-text);line-height:1.5;}
		.md-info-value.is-accent{font-family:var(--md-font-mono);font-size:1.24rem;font-weight:700;color:#0071E3;}
		.md-info-value.is-empty{color:var(--md-text-faint);}
		.md-info-tags{display:flex;flex-wrap:wrap;gap:.4rem;}
		.md-info-tag{font-size:.82rem;font-weight:700;padding:.3rem .72rem;background:var(--md-surface);border:1px solid var(--md-border);border-radius:999px;color:var(--md-text-dim);}
		.md-empty-note{font-size:.86rem;color:var(--md-text-faint);padding:0 2rem;}

		/* ---- 섹션 공통 ---- */
		.md-section{width:100%;background:#fff;}
		.md-section.is-main{padding:70px 0 60px;}
		.md-section.is-required,
		.md-section.is-optional{padding:60px 0;}
		.md-section.is-optional{border-top:1px solid var(--md-border);}
		/* 2026-09-27 — 머리말을 **카드가 시작하는 자리**에 맞춘다(사장님 "헤더가
		   안맞아. 헤더를 오른쪽 이미지 시작점으로 맞춰줘"). 전에는 머리말이
		   1400px 가운데 정렬인데 카드는 왼쪽 300px 에서 시작해 기준이 서로 달랐다.
		   아래 .md-eq-scroll 의 padding-left 와 같은 값을 쓴다 — 한쪽을 고치면
		   다른 쪽도 같이 고쳐야 한다. */
		.md-section-head{width:100%;margin:0 0 24px;padding:0 40px 0 300px;}
		.md-section.is-main .md-section-head{display:none !important;}
		.md-kicker{margin:0 0 8px;color:var(--md-accent);font-size:.86rem;font-weight:900;line-height:1;letter-spacing:.04em;text-transform:uppercase;}
		.md-section-head h2{margin:0;color:var(--md-text);font-size:1.9rem;font-weight:900;line-height:1.12;letter-spacing:-.03em;}

		/* ---- 대표장비 — 전체폭 이미지 밴드 + 아래 텍스트 ---- */
		.md-eq-main-wrap{width:100%;max-width:1400px;margin:0 auto;padding:0 2rem;}
		.md-eq-card.is-main{width:100%;display:flex;flex-direction:column;background:transparent;}
		.md-eq-card.is-main .md-eq-card-thumb{position:relative;width:100%;height:430px;aspect-ratio:auto;background:var(--md-surface-2);border:1px solid var(--md-border);border-radius:28px;}
		.md-eq-card.is-main .md-eq-card-thumb img{padding:42px;max-height:390px;}
		.md-eq-card.is-main .md-eq-card-body{padding:28px 6px 0;max-width:860px;}
		.md-eq-card.is-main .md-eq-card-title{font-size:2.1rem;font-weight:900;letter-spacing:-.03em;}
		.md-eq-card.is-main .md-eq-card-desc{font-size:1.1rem;-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden;}
		.md-eq-card.is-main .md-more{width:64px;height:64px;top:-96px;right:26px;}
		.md-eq-card.is-main .md-more::after{font-size:28px;}

		/* ---- 필수/옵션 — 가로스크롤 카드(사진 위 + 설명 아래) ---- */
		.md-eq-scroll{width:100%;display:flex;gap:28px;overflow-x:auto;overflow-y:hidden;padding:4px 40px 24px 300px;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;}
		/* 가로 스크롤바는 감춘다(사장님 "밑에 가로스크롤 가이드를 없애줘").
		   나머지 화면의 가로 스크롤 줄과 같은 규칙이다 — 줄 밑에 회색 막대가
		   깔리면 카드가 아니라 막대가 먼저 눈에 든다. */
		.md-eq-scroll{scrollbar-width:none;-ms-overflow-style:none;}
		.md-eq-scroll::-webkit-scrollbar{display:none;width:0;height:0;}
		@media (max-width:1440px){.md-eq-scroll{padding-left:2rem;}.md-eq-main-wrap{max-width:100%;}.md-section-head{padding-left:2rem;}}

		.md-eq-card{position:relative;flex:0 0 380px;background:transparent;text-align:left;}
		.md-eq-card-thumb{position:relative;width:100%;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;background:var(--md-surface);border:1px solid var(--md-border-soft);border-radius:18px;overflow:hidden;transition:.25s ease;}
		.md-eq-card-thumb img{width:100%;height:100%;object-fit:contain;object-position:center;display:block;padding:34px;}
		.md-eq-card-thumb svg{width:34%;height:34%;color:var(--md-text-faint);}
		.md-eq-card:hover .md-eq-card-thumb{background:#F3F4F6;border-color:#DDE3EA;transform:translateY(-3px);}
		.md-eq-card-body{position:relative;padding:18px 4px 0;}
		.md-eq-card-title{margin:0 0 8px;color:var(--md-text);font-size:1.34rem;font-weight:900;line-height:1.25;letter-spacing:-.025em;}
		.md-eq-card-desc{margin:0;max-width:340px;color:var(--md-text-dim);font-size:.94rem;font-weight:500;line-height:1.6;letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}

		/* ---- "+" 버튼 — 이미지 우하단에 걸치도록 body에서 위로 당김 ---- */
		.md-more{position:absolute;top:-78px;right:22px;width:52px;height:52px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#fff;border:1px solid var(--md-border);color:transparent;box-shadow:0 8px 20px rgba(15,23,42,.10);transition:.2s ease;}
		.md-more::after{content:"+";color:var(--md-text);font-size:24px;font-weight:700;line-height:1;}
		.md-eq-card:hover .md-more{background:var(--md-text);border-color:var(--md-text);}
		.md-eq-card:hover .md-more::after{color:#fff;}

		@media (max-width:767px){
			.md-eq-card.is-main .md-eq-card-thumb{height:300px;border-radius:22px;}
			.md-eq-card.is-main .md-eq-card-thumb img{padding:26px;max-height:280px;}
			.md-eq-card.is-main .md-eq-card-title{font-size:1.6rem;}
			.md-section-head h2{font-size:1.5rem;}
			.md-eq-card{flex-basis:280px;}
		}