/* 이테크 디자인 개편 (2026-10): 흰 바탕, 큰 글씨, 둥근 파스텔 카드, 알약 버튼
   - 기존 CSS는 건드리지 않고 이 파일이 위에 덮어쓴다. 되돌리려면 include/Site_Meta_List.php 의 redesign.css 줄만 지우면 된다.
   - 모든 규칙 앞에 "html body"를 붙여 CSS 로드 순서와 상관없이 이 파일이 우선하게 했다. */

html body { background: #fff; color: #111; letter-spacing: -0.01em; }

/* 머리말: 흰 바탕 + 검정 글자 + 얇은 선 */
/* 주의: #hd 에 backdrop-filter 를 쓰면 안에 있는 휴대폰 메뉴(position:fixed)가 화면 전체가 아니라 머리말 크기로 갇힌다 */
html body #hd { background: rgba(255,255,255,.97); border-bottom: 1px solid #eceff2; }
html body .hd-content a { color: #111; font-weight: 600; }

/* 페이지 상단 배경: 관리자에서 올린 사진을 그대로 보여 주고, 글자가 보이도록 아주 연한 어두운 막만 씌움 */
html body .page-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.28)); z-index: 0; pointer-events: none; }
html body .page-hero h2 { font-weight: 700; letter-spacing: -0.03em; text-shadow: 0 2px 18px rgba(0,0,0,.28); z-index: 1; }
html body .page-hero-remote { background: rgba(255,255,255,.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 999px; z-index: 1; }
html body .page-hero-remote a,
html body .page-hero-remote span,
html body .page-hero-remote .page_toggle_link { color: #222; }
html body .page-hero-remote svg path { fill: #222; }
html body .gnb-pc-box-line { background: #c9d0d7; }

/* 분류 탭: 알약 모양, 선택된 탭은 검정 */
html body .lnb-box { gap: 10px; height: 104px; }
html body .lnb-item { padding: 10px 24px; border-radius: 999px; background: #f2f4f7; color: #444; font-weight: 600; white-space: nowrap; }
html body .lnb-item:hover { background: #e6eaef; opacity: 1; }
html body .lnb-item.active { background: #111; color: #fff; }

/* 제품 카드: 파스텔 4색, 큰 둥근 모서리, 흰 이미지 판 */
html body .product-list { gap: 1.6rem; }
html body .product-list-item { background: #f7f7f7; border-radius: 28px; padding: 2rem 2rem 2.2rem; width: 100%; max-width: 26rem; transition: transform .25s, box-shadow .25s; }
html body .product-list-item:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(20,30,60,.10); }
html body .product-list-item:nth-child(4n+1) { background: #eaf2fc; }
html body .product-list-item:nth-child(4n+2) { background: #ebf6e5; }
html body .product-list-item:nth-child(4n+3) { background: #f2ecfb; }
html body .product-list-item:nth-child(4n+4) { background: #fdeee5; }
html body .product-item-image { border: 0; border-radius: 20px; background: #fff; }
html body .product-item-image img { object-fit: contain; padding: 12px; box-sizing: border-box; }
html body .product-item-type { font-size: 1.1rem; color: #111; }
html body .product-item-usage { color: #555; font-size: .95rem; }
html body .product-item-title { font-size: 1.45rem; font-weight: 700; }

/* 버튼: 알약 모양. 주 버튼은 검정, 보조 버튼은 흰색 */
html body .common-btn-primary,
html body .common-btn-secondary { border-radius: 999px; padding: .65rem 1.4rem; font-weight: 600; white-space: nowrap; }
html body .common-btn-secondary { background: #111; color: #fff; border-color: #111; }
html body .common-btn-secondary:hover { background: #333; border-color: #333; }
html body .common-btn-primary { background: #fff; color: #111; border-color: #c9c9c9; }
html body .common-btn-primary:hover { background: #f2f4f7; color: #111; border-color: #aaa; }

/* 회사소개 카드 */
html body .about-card { border-radius: 28px; }
html body .company_info { border-radius: 28px; }
html body .sec-title h4 { font-weight: 700; letter-spacing: -0.03em; }
html body .co-overview th { background: #f4f6f9; }

/* 문의 폼·개인정보 동의 */
html body .form-box { border-radius: 28px; background: #f4f6f9; }
html body .km-privacy-integrated-box { border-radius: 28px; }

/* 하단 */
/* 꼬리말은 흰 글자·흰 로고라서 어두운 바탕을 유지한다 */
/* 꼬리말은 흰 글자·흰 로고라서 어두운 바탕을 유지한다 */
html body #ft { background: #111; }
html body .ft-card { border-radius: 24px; }

/* 제품 상세 */
html body .detail-text-box,
html body .spec-image-box { border-radius: 20px; }

/* 휴대폰 */
@media screen and (max-width: 768px) {
	html body .page-hero h2 { white-space: nowrap; }
	html body .lnb-box { gap: 8px; height: 84px; }
	html body .lnb-item { padding: 9px 18px; }
	html body .product-list { gap: 1.2rem; }
	html body .product-list-item { border-radius: 26px; padding: 1.6rem 1.4rem 1.8rem; }
	html body .common-btn-primary,
	html body .common-btn-secondary { padding: .6rem 1.1rem; }
}

/* 제품문의·견적요청 폼: 입력 칸이 회색 상자 오른쪽으로 삐져나오지 않게 */
html body .form-section { width: 100%; }
html body .form-section div { width: auto; flex: 1 1 auto; min-width: 0; max-width: 40rem; }