@charset "utf-8";
/* ==================================================================
 * MAXOD - 관리자 페이지로 만든 블록을 위한 공통 스타일
 *
 * [왜 필요한가]
 * 기존에는 제품마다 CSS 를 새로 써야 했습니다.
 *   .xspamist_visual1 { height:483px; background-image:url(...) }
 *   .curlive_content .sec1 { background-image:url(...) }
 * 이래서 제품을 추가하려면 개발자가 CSS 를 손대야 했습니다.
 *
 * 이제는 HTML 에 값만 실어 보내고(CSS 변수), 규칙은 여기 한 번만 둡니다.
 *   <div class="cms_visual" style="--bg:url(...); --h:483px">
 * 제품이 몇 개가 늘어나도 이 파일은 그대로입니다.
 *
 * 이 파일은 sub.css 다음에 불러옵니다. (기존 스타일을 덮어쓰지 않음)
 * ================================================================== */

/* ---------- 자동 줄바꿈 ----------
   기존에는 <br class="xt_hide"> 로 화면크기마다 줄바꿈을 손으로 넣었습니다.
   이제 관리자는 줄바꿈 없이 글만 쓰고, 아래 규칙이 알아서 처리합니다. */
.cms_block p,
.cms_block dd,
.cms_block .txt_area {
	word-break: keep-all;      /* 한국어 단어가 중간에서 잘리지 않음 */
	overflow-wrap: break-word; /* 아주 긴 영문/숫자는 강제로 줄바꿈 */
}
@supports (text-wrap: pretty) {
	.cms_block p,
	.cms_block dd { text-wrap: pretty; }   /* 마지막 줄에 한 단어만 남는 것 방지 */
}

/* 관리자가 Enter 로 넣은 줄바꿈은 PC 에서만 적용.
   좁은 화면에서는 무시하고 화면폭에 맞춰 자연스럽게 흐르게 합니다.

   [2026-09-01 감사] 예전에는 .cms_block 안에서만 적용했습니다.
   그런데 제품 목록 카드의 소개글도 같은 함수(text_body)가 만들어서
   pc_br 이 붙는데, 그 카드는 .cms_block 밖이라 휴대폰에서도
   줄바꿈이 그대로 남았습니다.
   pc_br · li 클래스는 관리자 글에서만 만들어지고 손으로 만든 페이지는
   쓰지 않으므로(전수 확인), 범위를 풀어도 기존 화면에 영향이 없습니다. */
@media (max-width: 766px) {
	br.pc_br { display: none; }
}

/* 불릿 항목 ( "- " 로 입력한 줄 ) */
.li { display: block; }
.li + .li { margin-top: .35em; }


/* ---------- 전면 비주얼 ---------- */
.cms_visual {
	background-repeat: no-repeat;
	background-size: cover;
	background-image: var(--bg);
	background-position: var(--pos, center center);
	height: var(--h, 520px);
}
.cms_visual .inner { transform: translateY(var(--shift, 0)); }

@media (max-width: 992px) {
	.cms_visual {
		height: var(--h-t, var(--h, 460px));
		background-position: var(--pos-t, var(--pos, center center));
	}
	.cms_visual .inner { transform: translateY(var(--shift-t, var(--shift, 0))); }
}
@media (max-width: 766px) {
	.cms_visual {
		height: var(--h-m, var(--h-t, var(--h, 380px)));
		background-image: var(--bg-m, var(--bg));
		background-position: var(--pos-m, center center);
	}
	.cms_visual .inner { transform: translateY(var(--shift-m, 0)); }
}


/* ---------- 섹션 배경 ---------- */
.cms_bg {
	background-repeat: no-repeat;
	background-size: cover;
	background-image: var(--bg);
	background-position: var(--pos, center center);
}
@media (max-width: 766px) {
	.cms_bg { background-image: var(--bg-m, var(--bg)); }
}


/* ---------- 4칸 배경 그리드 ---------- */
/* 기존 .pro_effect .col1 .img 처럼 칸마다 CSS 를 쓰지 않고,
   각 칸의 style 에 담긴 배경을 그대로 씁니다.

   [2026-09-01 감사에서 잡힌 문제 — 선택자 우선순위]
   sub.css 에 X-SPA MIST 전용 배경이 하드코딩돼 있습니다.
       .pro_effect .col1 .img { background-image: url(.../what_img_01.jpg) }
   이건 클래스 3개(0,3,0) 라서, 예전 규칙 '.pro_effect .cms_img'(0,2,0) 보다
   강했습니다. 그래서 관리자가 어떤 사진을 올려도 1~4번째 칸은 항상
   X-SPA MIST 사진이 나왔습니다.

   sub.css 를 고치면 기존 X-SPA MIST 페이지가 위험해지므로,
   여기서 클래스 4개(0,4,0) 로 올려 확실히 이기게 합니다.
   .cms_block 은 관리자가 발행한 블록에만 붙으므로 기존 페이지에는 영향이 없습니다. */
.cms_block .pro_effect .img.cms_img { background-image: var(--bg); }
@media (max-width: 766px) {
	.cms_block .pro_effect .img.cms_img { background-image: var(--bg-m, var(--bg)); }
}


/* ---------- PC / 모바일 전용 사진 ----------
   (기존 xm_hide / xm_show 와 같은 역할이지만 이름을 명확히 했습니다) */
.cms_pc { display: block; }
.cms_mo { display: none; }
@media (max-width: 766px) {
	.cms_pc { display: none; }
	.cms_mo { display: block; }
}
/* 모바일용 사진을 안 올렸으면 PC 사진을 그대로 씁니다 */
.cms_pc.only { display: block !important; }


/* ---------- 사진 자리 잡기 ---------- */
.cms_block img { max-width: 100%; height: auto; }
.cms_block .figure { display: inline-block; }


/* ---------- 제품 목록 카드 썸네일 ----------
   손으로 만든 제품 3개는 .thumb.pro1 처럼 CSS 로 배경을 지정합니다.
   관리자로 만든 제품은 파일이 정해져 있지 않으므로 style 로 넣습니다.
   비율·호버 동작은 sub.css 의 .product_link .thumb 규칙을 그대로 씁니다. */
.product_link .cms_thumb {
	background-repeat: no-repeat;
	background-position: center 0;
	background-size: 100% auto;
}