/*
Theme Name: Ecomoditech
Theme URI: https://ecomoditech.co.kr/
Author: Ecomoditech
Author URI: https://ecomoditech.co.kr/
Description: 에코모디텍 공식 워드프레스 본테마. 베르누이 원리 기반 비접촉 에어형 우산 빗물 제거기 브랜드 사이트. B2G·B2B 도입처를 위한 6개 메뉴(홈/제품/도입효과/사례·신뢰/도입안내/문의) 구조. 모바일 최적화 + 한글 어절 단위 줄바꿈 + 듀얼 CTA(도입문의·카탈로그) 적용. 활성화 시 페이지/메뉴/고유주소 자동 설정 + 도입 문의 CPT 자동 등록.
Version: 1.2.1
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ecomoditech
Tags: business, custom-menu, custom-logo, featured-images, responsive
*/

/* ======================================================================
   디자인 토큰 — 브랜드 컬러: 틸 #05BABD (딥 #07767A)
   ====================================================================== */
:root{
  --teal:#05BABD; --teal-deep:#07767A; --teal-soft:#D9F2F2; --teal-soft2:#EFFAFA;
  --ink:#111; --grey:#5A5A5A; --line:#BFE3E3; --white:#fff;
  --max:1180px; --radius:14px; --shadow:0 10px 30px rgba(5,186,189,.12);
}

/* ======================================================================
   리셋 + 한글 줄바꿈 (필수 규칙)
   ====================================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:"Pretendard","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  color:var(--ink);background:var(--white);line-height:1.65;
  -webkit-font-smoothing:antialiased;
  word-break:keep-all;       /* 한글 어절 단위 줄바꿈 */
  overflow-wrap:break-word;  /* 긴 영문 단어 강제 줄바꿈 */
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;border:none;background:none}

/* iOS 자동 줌인 방지 — 폼 입력 폰트는 반드시 16px 이상 */
input,select,textarea,button{font-size:16px}

/* ======================================================================
   레이아웃
   ====================================================================== */
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.center{text-align:center}
section{padding:88px 0}
.eyebrow{display:inline-block;background:var(--teal-soft);color:var(--teal-deep);
  font-size:.82rem;font-weight:700;padding:6px 14px;border-radius:999px;margin-bottom:14px}
h2.title{font-size:clamp(1.6rem,3.4vw,2.4rem);font-weight:800;line-height:1.25;letter-spacing:-.02em}
.lead{margin-top:14px;color:var(--grey);max-width:760px;margin-left:auto;margin-right:auto}

/* ======================================================================
   버튼
   ====================================================================== */
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:999px;
  font-weight:700;font-size:.95rem;transition:.2s;line-height:1}
.btn-primary{background:var(--teal);color:#fff}
.btn-primary:hover{background:var(--teal-deep);transform:translateY(-1px)}
.btn-ghost{background:#fff;color:var(--teal-deep);border:1.5px solid var(--teal)}
.btn-ghost:hover{background:var(--teal-soft)}

/* ======================================================================
   헤더 (공통)
   ====================================================================== */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--teal-soft)}
header .wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 24px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.15rem;color:var(--ink)}
.logo svg{width:30px;height:30px}
.menu{display:flex;list-style:none;gap:28px;align-items:center}
.menu a{font-weight:600;color:var(--ink);padding:6px 0;position:relative}
.menu a:hover,.menu a.active{color:var(--teal-deep)}
.menu a.active:after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--teal)}
.nav-cta{display:flex;align-items:center;gap:12px}
.nav-cta .btn{padding:10px 20px;font-size:.92rem}
.hamburger{display:none;width:40px;height:40px;flex-direction:column;justify-content:center;
  align-items:center;gap:5px;padding:0}
.hamburger span{display:block;width:22px;height:2px;background:var(--ink);transition:.2s}

/* ======================================================================
   푸터
   ====================================================================== */
footer{background:#0F1A1B;color:rgba(255,255,255,.78);padding:48px 0 30px;margin-top:0}
footer .wrap{display:grid;grid-template-columns:1.4fr 1fr;gap:40px}
footer .ftr-logo{display:flex;align-items:center;gap:10px;font-weight:800;color:#fff;font-size:1.1rem;margin-bottom:14px}
footer .ftr-menu{display:flex;flex-wrap:wrap;gap:18px;justify-content:flex-end}
footer .ftr-menu a{color:rgba(255,255,255,.78);font-size:.92rem}
footer .ftr-menu a:hover{color:#fff}
footer .legal{margin-top:30px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);
  font-size:.85rem;color:rgba(255,255,255,.55);grid-column:1/-1}

/* ======================================================================
   모바일 sticky CTA (공통)
   ====================================================================== */
.mcta{display:none;position:fixed;bottom:0;left:0;right:0;z-index:60;gap:10px;
  padding:12px 16px;background:#fff;border-top:1px solid var(--teal-soft);
  box-shadow:0 -4px 20px rgba(0,0,0,.08)}
.mcta .btn{flex:1;justify-content:center;padding:13px}

/* ======================================================================
   모바일 반응형
   ====================================================================== */
@media(max-width:860px){
  section{padding:60px 0}
  .wrap{padding:0 20px}
  .menu,.nav-cta .btn-ghost{display:none}
  .hamburger{display:flex}
  .menu.open{display:flex;position:absolute;top:72px;left:0;right:0;flex-direction:column;
    background:#fff;padding:18px 24px;gap:16px;border-bottom:1px solid var(--teal-soft);box-shadow:var(--shadow)}
  .mcta{display:flex}
  body{padding-bottom:74px}        /* fixed CTA 만큼 콘텐츠 padding */
  footer .wrap{grid-template-columns:1fr}
  footer .ftr-menu{justify-content:flex-start}
  /* 비교표 가로 스크롤 대응 */
  .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* 폼 필드 모바일 가독성 */
  form input,form select,form textarea{padding:14px 16px;font-size:16px}
}
@media(max-width:480px){
  section{padding:48px 0}
  .wrap{padding:0 16px}
  .btn{padding:12px 18px;font-size:.9rem}
}