/* ============================================================
   모바일/반응형 오버레이 (추가) — 2026-09-19
   기존 데스크톱(1200px 고정, 절대좌표 AWD 빌더) 레이아웃은 그대로 두고,
   1024px 이하 화면에서만 별도의 유동형(fluid) 모바일 뷰를 노출한다.
   절대좌표 요소들은 DOM 순서가 화면상 시각 순서와 달라 그대로 흘려보내면
   내용이 뒤섞이므로, 데스크톱 캔버스(#awdDisplayBG,#awdDisplayMain)는
   모바일 폭에서 숨기고 실제 문구를 그대로 옮긴 모바일 전용 블록을 노출한다.
   (overflow-x:hidden 으로 잘린 내용을 숨기는 방식이 아니라, 레이아웃 자체를
   유동형으로 바꾸는 방식)
   ============================================================ */

:root{
  --brand-sage:#67836B;
  --brand-green:#365847;
  --brand-ivory:#FAF8F2;
}

html, body{ max-width:100%; }

/* ---------------- 상단 내비게이션(모든 내부 링크 보존, 색상만 정돈) ---------------- */
.siteTopNav{
  background:var(--brand-green);
  font-family:'NanumSquare','Nanum Gothic',sans-serif;
  position:relative;
  z-index:1000;
}
.siteTopNav .siteTopNav_inner{
  max-width:1200px;
  margin:0 auto;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  padding:10px 16px;
  gap:6px 16px;
  box-sizing:border-box;
}
.siteTopNav .brandName{
  color:var(--brand-ivory);
  font-weight:700;
  font-size:15px;
  margin-right:auto;
  white-space:nowrap;
}
.siteTopNav .navLinks{ display:flex; flex-wrap:wrap; gap:4px 16px; }
.siteTopNav a{
  color:var(--brand-ivory);
  font-size:13px;
  opacity:.92;
  padding:6px 2px;
  text-decoration:none;
}
.siteTopNav a:hover{ opacity:1; text-decoration:underline;}
.siteTopNav .telBtn{
  background:var(--brand-sage);
  color:#fff !important;
  border-radius:20px;
  padding:6px 14px !important;
  font-weight:700;
  opacity:1 !important;
  white-space:nowrap;
}
.mNavToggle{
  display:none;
  background:transparent;
  border:1px solid rgba(255,255,255,.6);
  color:var(--brand-ivory);
  border-radius:6px;
  padding:6px 10px;
  font-size:13px;
  line-height:1;
  cursor:pointer;
}

/* 모바일 전용 블록: 기본 숨김, 1024px 이하에서만 노출 */
.mOnly{ display:none; }

@media (max-width:1024px){
  /* 1) 최우선: 데스크톱 절대좌표 캔버스를 숨겨 가로 잘림을 원천 차단 */
  #awdDisplayBG,
  #awdDisplayMain{ display:none !important; }

  .mOnly{ display:block; }

  .mNavToggle{ display:inline-flex; align-items:center; gap:6px; }
  .siteTopNav .navLinks{
    flex-basis:100%;
    display:none;
    flex-direction:column;
    gap:2px;
    padding-top:8px;
    border-top:1px solid rgba(255,255,255,.25);
    margin-top:2px;
  }
  .siteTopNav .navLinks.open{ display:flex; }
  .siteTopNav .navLinks a{ padding:10px 4px; font-size:15px; }

  /* 서브페이지 좌측 고정폭(260px) 메뉴는 좁은 화면에서 상단 내비게이션으로 대체 */
  .awd_leftMenu_Wrap{ display:none !important; }
}

@media (min-width:1025px){
  .mNavToggle{ display:none; }
  .siteTopNav .navLinks{ display:flex !important; }
}

/* ---------------- 히어로 배너 ---------------- */
.mHero{
  background:linear-gradient(135deg, var(--brand-green), var(--brand-sage));
  color:#fff;
  padding:26px 20px 22px;
  text-align:center;
  box-sizing:border-box;
}
.mHero .mHero-eyebrow{ font-size:13px; opacity:.9; margin:0 0 6px; letter-spacing:.5px;}
.mHero h1{ font-size:clamp(22px,7vw,30px); line-height:1.35; margin:0 0 10px; font-weight:800;}
.mHero .mHero-desc{ font-size:14px; line-height:1.6; opacity:.95; margin:0 0 16px;}
.mHero .mHero-actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap;}
.mHero .mHero-actions a{
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 18px; border-radius:24px; font-size:14px; font-weight:700;
  text-decoration:none;
}
.mHero .btn-call{ background:#fff; color:var(--brand-green);}
.mHero .btn-outline{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.8);}
@media (min-width:769px) and (max-width:1024px){ .mHero{ max-height:440px; padding:36px 32px;} }
@media (max-width:768px){ .mHero{ max-height:300px; } }

/* ---------------- 공통 섹션/카드 ---------------- */
.mSection{ padding:22px 16px; background:var(--brand-ivory); box-sizing:border-box;}
.mSection + .mSection{ border-top:1px solid #ece7db; }
.mSection h2{ font-size:19px; color:var(--brand-green); margin:0 0 14px; font-weight:800;}
.mCardGrid{ display:grid; grid-template-columns:1fr; gap:10px;}
@media (min-width:480px){ .mCardGrid{ grid-template-columns:1fr 1fr;} }
.mCard{
  background:#fff; border:1px solid #e5e1d3; border-radius:10px;
  padding:14px; display:block; text-decoration:none;
}
.mCard b{ display:block; color:var(--brand-green); font-size:15px; margin-bottom:4px;}
.mCard span{ font-size:13px; color:#555;}

.mBadge{ display:flex; gap:12px; align-items:center; background:#fff; border:1px solid #e5e1d3; border-radius:10px; padding:12px; }
.mBadge img{ width:96px; height:auto; border-radius:6px; flex:0 0 auto;}
.mBadge p{ margin:0; font-size:13px; color:#444; line-height:1.6;}
.mBadge p b{ display:block; color:var(--brand-green); font-size:14px;}

.mGallery{ display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.mGallery figure{ margin:0; }
.mGallery img{ width:100%; height:auto; border-radius:8px; display:block;}
.mGallery figcaption{ font-size:12px; color:#555; margin-top:4px;}

.mList{ list-style:none; margin:0; padding:0;}
.mListItem{ display:flex; justify-content:space-between; gap:10px; padding:12px 0; border-bottom:1px solid #ece7db; font-size:14px;}
.mListItem a{ color:#333; text-decoration:none; }
.mListItem span{ color:#888; font-size:12px; white-space:nowrap;}
.mEmptyNotice{ font-size:13px; color:#888; padding:10px 0; text-align:center;}

.mMoreLink{ display:inline-block; margin-top:12px; font-size:13px; color:var(--brand-green); font-weight:700; text-decoration:none;}

/* ---------------- 푸터 ---------------- */
.mFooter{ background:#2b2b2b; color:#a1a1a1; text-align:center; padding:22px 16px; font-size:13px; line-height:1.9; box-sizing:border-box;}
.mFooter a{ color:#c9c9c9; text-decoration:none;}
.mFooter .mFooter-links a{ margin:0 6px; }
.mFooter .mFooter-credit{ font-size:12px; color:#7a7a7a; margin-top:6px; display:block;}