/* ═══════════════════════════════════════
   미래도파밀리에 모바일 스타일
   - 기존 CSS 위에 덮어씌움
═══════════════════════════════════════ */

/* 기존 스타일 리셋 */
body { font-family: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif !important; background: #fff !important; }
.header, .nav-container, .logo, .nav-menu, .nav-actions, .mobile-menu-toggle { display: none !important; }
.footer { display: none !important; }
#main-content { margin-top: 0 !important; padding: 0 !important; }
.section { padding: 0 !important; margin: 0 !important; }
.container { max-width: 100% !important; padding: 0 !important; margin: 0 !important; }

/* ── 헤더 ── */
.mf-hd {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: #000; height: 52px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px;
}
.mf-hd-logo { display: flex; align-items: center; gap: 6px; }
.mf-hd-bars { display: flex; gap: 3px; align-items: flex-end; }
.mf-hd-bars span { display: block; width: 4px; background: #1d6ce0; border-radius: 1px; }
.mf-hd-bars span:nth-child(1){height:10px;}
.mf-hd-bars span:nth-child(2){height:14px;}
.mf-hd-bars span:nth-child(3){height:18px;}
.mf-hd-bars span:nth-child(4){height:22px;}
.mf-hd-name { color: #fff; font-size: 13px; font-weight: 700; }
.mf-hd-tel {
  background: #1d6ce0; color: #fff; font-size: 12px; font-weight: 700;
  padding: 7px 14px; border-radius: 20px; text-decoration: none;
  display: flex; align-items: center; gap: 5px; white-space: nowrap;
}
/* 아이콘은 버튼 종류별로 본문에 직접 렌더링됨(📞/💬/✉️/📅/📄/🧭). 고정 전화아이콘 제거. */

/* ── 로딩 ── */
.initial-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; }

/* ── 히어로 ── */
.mf-hero {
  background: linear-gradient(180deg, #0a1a4e 0%, #0c399f 45%, #1d6ce0 100%);
  padding: 88px 20px 0; text-align: center; overflow: hidden;
}
.mf-hero-badge {
  display: inline-block; background: rgba(255,255,255,0.15); color: #ffd600;
  font-size: 11px; font-weight: 700; padding: 5px 14px; border-radius: 20px;
  letter-spacing: 0.1em; margin-bottom: 16px; border: 1px solid rgba(255,214,0,0.3);
}
.mf-hero-stars { color: #ffd600; font-size: 16px; letter-spacing: 6px; margin-bottom: 14px; }
.mf-hero-title {
  font-size: clamp(28px, 7vw, 44px); font-weight: 900; color: #fff;
  line-height: 1.2; margin-bottom: 12px;
}
.mf-hero-sub-box {
  display: inline-block; background: #ffd600; color: #0c399f;
  font-size: clamp(18px, 5vw, 28px); font-weight: 900;
  padding: 6px 20px; border-radius: 6px; margin-bottom: 20px;
}
.mf-hero-slider { width: 100%; margin-top: 16px; }
.mf-hero-slide { width: 100%; display: none; border-radius: 8px 8px 0 0; aspect-ratio: 16/10; max-height: 280px; object-fit: cover; background: rgba(0,0,0,.06); }
.mf-hero-slide.active { display: block; }
.mf-hero-disclaimer {
  font-size: 11px; color: rgba(255,255,255,0.55); text-align: center;
  padding: 10px 20px 14px; line-height: 1.4;
}

/* ── 히어로: 풀스크린 배경영상 모드 (mp4/webm 슬라이드 감지 시 자동 적용) ── */
.mf-hero.mf-hero--video {
  position: relative;
  height: 100vh; min-height: 480px; max-height: 900px;
  padding: 0; overflow: hidden;
  background: linear-gradient(180deg, #0a1a4e 0%, #0c399f 45%, #1d6ce0 100%); /* 영상 로딩 전 대체 배경 */
  display: flex; flex-direction: column;
}
.mf-hero.mf-hero--video .mf-hero-slider {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; z-index: 0;
}
.mf-hero.mf-hero--video .mf-hero-slide {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: 0; aspect-ratio: auto; max-height: none; object-fit: cover;
}
/* 유튜브 링크 모드: iframe은 object-fit이 안 통해서, 16:9 비율로 확대한 뒤 중앙을 잘라내는
   방식으로 배경영상처럼 화면을 꽉 채운다 (업계에서 흔히 쓰는 유튜브 풀스크린 배경 기법) */
.mf-hero.mf-hero--video .mf-hero-yt-wrap {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; z-index: 0; pointer-events: none;
}
.mf-hero.mf-hero--video .mf-hero-yt-wrap iframe {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 177.78vh; min-width: 100%;
  height: 56.25vw; min-height: 100%;
  border: 0; pointer-events: none;
}
.mf-hero.mf-hero--video .mf-hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  /* ▲가독성 개선: 텍스트가 위치하는 상단 구간을 더 어둡게, 영상이 잘 보이도록 하단/중간은 유지 */
  background: linear-gradient(180deg, rgba(0,0,0,.60) 0%, rgba(0,0,0,.34) 30%, rgba(0,0,0,.22) 55%, rgba(0,0,0,.62) 100%);
}
.mf-hero.mf-hero--video .mf-hero-content {
  position: relative; z-index: 2;
  /* ▲가독성 개선: 화면 정중앙(오버레이가 가장 옅은 구간)이 아닌, 오버레이가 짙은 상단부에 텍스트 배치 */
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: 100px 20px 24px;
}
.mf-hero.mf-hero--video .mf-hero-badge,
.mf-hero.mf-hero--video .mf-hero-stars,
.mf-hero.mf-hero--video .mf-hero-title,
.mf-hero.mf-hero--video .mf-hero-sub-box { margin-bottom: 14px; }
/* ▲가독성 개선: theme-lux는 badge/sub-box 배경을 투명 처리하는데, 실사 영상 위에서는
   글자만 남아 배경(특히 밝은 하늘/건물)에 묻혀 보임. 영상 모드에서는 테마와 무관하게
   불투명 배경을 되살려 어떤 영상 위에서도 항상 읽히도록 함(다른 히어로 모드는 영향 없음). */
.mf-hero.mf-hero--video .mf-hero-badge {
  background: rgba(0,0,0,0.45);
  border-color: rgba(255,214,0,0.5);
  color: #ffd600;
}
.mf-hero.mf-hero--video .mf-hero-stars { text-shadow: 0 2px 10px rgba(0,0,0,.7); }
.mf-hero.mf-hero--video .mf-hero-title { text-shadow: 0 2px 14px rgba(0,0,0,.7), 0 0 26px rgba(0,0,0,.45); }
.mf-hero.mf-hero--video .mf-hero-sub-box {
  background: #ffd600;
  color: #0c399f;
  box-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.mf-hero.mf-hero--video .mf-hero-disclaimer {
  position: relative; z-index: 2; color: rgba(255,255,255,0.65);
}
.mf-hero-svg-wrap {
  width: 100%; height: 200px;
  background: linear-gradient(to top, #0a1a4e, rgba(10,26,78,0.2) 70%, transparent);
  display: flex; align-items: flex-end; justify-content: center;
}

/* ── 공통 섹션 ── */
.mf-sec { padding: 36px 20px; }
.mf-sec-white { background: #fff; }
.mf-sec-dark { background: #0c399f; color: #fff; }
.mf-sec-alt { background: #f0f4ff; }
.mf-sec-tag {
  display: inline-block; background: #1d6ce0; color: #fff;
  font-size: 11px; font-weight: 700; padding: 4px 14px; border-radius: 12px; margin-bottom: 12px;
}
.mf-sec-h {
  font-size: clamp(20px, 5vw, 28px); font-weight: 900; line-height: 1.3; margin-bottom: 8px;
}
.mf-sec-h-dark { color: #0c399f; }
.mf-sec-sub { font-size: 13px; color: #666; line-height: 1.7; margin-bottom: 16px; }
/* aspect-ratio로 로딩 전 공간을 미리 확보 — 이미지가 늦게 뜨면서 아래 내용이 밀리는 레이아웃 밀림(CLS) 방지 (Core Web Vitals) */
.mf-full-img { display: block; width: 100%; height: auto; border-radius: 8px; margin-bottom: 12px; background: rgba(0,0,0,.04); }
.mf-map-img { cursor: pointer; }
.mf-feature-row { font-size: 13px; color: #333; padding: 8px 0; border-bottom: 1px solid #e0e8ff; }

/* ── 사업개요 테이블 ── */
.mf-ov-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 16px; }
.mf-ov-table th { background: #f0f4ff; color: #0c399f; font-weight: 700; padding: 10px 12px; text-align: left; border-bottom: 1px solid #e0e8ff; width: 90px; }
.mf-ov-table td { padding: 10px 12px; border-bottom: 1px solid #f0f4ff; color: #333; }

/* ── 브랜드 ── */
.mf-brand-card { background: #fff; border-radius: 8px; padding: 16px; margin-bottom: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.mf-brand-title { font-size: 16px; font-weight: 700; color: #0c399f; margin: 10px 0 6px; }
.mf-brand-desc { font-size: 13px; color: #555; line-height: 1.7; }

/* ── 입지 하이라이트 ── */
.mf-hl-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; margin-bottom: 16px; }
.mf-hl-card { background: #f0f4ff; border-radius: 8px; padding: 14px 8px; text-align: center; }
.mf-hl-icon { font-size: 26px; margin-bottom: 6px; }
.mf-hl-title { font-size: 12px; font-weight: 700; color: #0c399f; margin-bottom: 3px; }
.mf-hl-desc { font-size: 11px; color: #666; line-height: 1.4; }

/* ── 평면도 ── */
.mf-fl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mf-fl-card { border: 2px solid #e0e8ff; border-radius: 8px; overflow: hidden; }
.mf-fl-img-real { width: 100%; height: 130px; object-fit: cover; cursor: pointer; display: block; }
.mf-fl-img-ph { width: 100%; height: 130px; background: #f4f7ff; display: flex; align-items: center; justify-content: center; font-size: 36px; color: #c0ceff; }
.mf-fl-info { background: #1d6ce0; padding: 10px; text-align: center; }
.mf-fl-label { font-size: 15px; font-weight: 700; color: #fff; }
.mf-fl-area { font-size: 11px; color: rgba(255,255,255,0.8); margin-top: 2px; }
.mf-fl-units { font-size: 11px; color: rgba(255,255,255,0.6); }

/* ── 프리미엄 (포인트 목록) ── */
.mf-pt-eyebrow { font-size: 11px; color: rgba(255,255,255,0.5); letter-spacing: 0.15em; margin-bottom: 8px; font-style: italic; }
.mf-prem-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
.mf-prem-card { background: rgba(255,255,255,0.1); border-radius: 8px; padding: 16px; text-align: center; }
.mf-prem-icon { font-size: 28px; margin-bottom: 8px; }
.mf-prem-title { font-size: 13px; font-weight: 700; color: #ffd600; margin-bottom: 4px; }
.mf-prem-desc { font-size: 11px; color: rgba(255,255,255,0.75); line-height: 1.5; }
.mf-pt-list { list-style: none; margin-top: 8px; }
.mf-pt-item { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
.mf-pt-item:last-child { border-bottom: none; }
.mf-pt-circle { width: 52px; height: 52px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.25); display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; background: rgba(255,255,255,0.07); }
.mf-pt-badge { display: inline-block; background: #ffd600; color: #111; font-size: 10px; font-weight: 900; padding: 2px 9px; border-radius: 12px; margin-bottom: 4px; }
.mf-pt-text { font-size: 14px; font-weight: 700; color: #fff; }

/* ── 옵션 ── */
.mf-opt-card { background: #fff; border-radius: 8px; overflow: hidden; margin-bottom: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.mf-opt-name { font-size: 15px; font-weight: 700; color: #0c399f; padding: 12px 14px 4px; }
.mf-opt-desc { font-size: 13px; color: #555; padding: 0 14px 12px; line-height: 1.6; }

/* ── 편의시설 ── */
.mf-conv-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
.mf-conv-card { background: #fff; border-radius: 8px; padding: 14px 8px; text-align: center; box-shadow: 0 2px 6px rgba(0,0,0,0.05); }
.mf-conv-icon { font-size: 26px; margin-bottom: 6px; }
.mf-conv-name { font-size: 12px; font-weight: 700; color: #0c399f; margin-bottom: 3px; }
.mf-conv-desc { font-size: 10px; color: #666; line-height: 1.4; }

/* ── 커뮤니티 ── */
.mf-comm-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.mf-comm-card { background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.mf-comm-img { width: 100%; height: auto; display: block; border-radius: 8px; }
.mf-comm-title { font-size: 15px; font-weight: 700; color: #0c399f; padding: 12px 14px 4px; }
.mf-comm-desc { font-size: 13px; color: #555; padding: 0 14px 12px; line-height: 1.6; }

/* ── 보도자료 ── */
.mf-news-list { display: flex; flex-direction: column; gap: 10px; }
.mf-news-card { background: #fff; border: 1px solid #e0e8ff; border-radius: 8px; padding: 14px; }
.mf-news-img { width: 100%; height: auto; border-radius: 6px; margin-bottom: 10px; }
.mf-news-date { font-size: 11px; color: #888; margin-bottom: 4px; }
.mf-news-title { font-size: 14px; font-weight: 700; color: #0c399f; margin-bottom: 4px; }
.mf-news-src { font-size: 12px; color: #888; }
.mf-news-link { font-size: 12px; color: #1d6ce0; text-decoration: none; display: inline-block; margin-top: 6px; }

/* ── FAQ ── */
.mf-faq-list { }
.mf-faq-item { border-bottom: 1px solid #e0e8ff; cursor: pointer; }
.mf-faq-q { display: flex; align-items: flex-start; gap: 10px; padding: 16px 0; font-size: 14px; font-weight: 600; color: #0c399f; }
.mf-faq-qm { color: #1d6ce0; font-weight: 900; font-size: 16px; flex-shrink: 0; }
.mf-faq-arr { margin-left: auto; color: #1d6ce0; transition: transform 0.25s; flex-shrink: 0; }
.mf-faq-a { display: none; padding: 0 0 16px 26px; font-size: 13px; color: #555; line-height: 1.8; }
.mf-faq-am { color: #f39c12; font-weight: 900; margin-right: 6px; }
.mf-faq-item.active .mf-faq-arr { transform: rotate(180deg); }
.mf-faq-item.active .mf-faq-a { display: block; }

/* ── 폼 ── */
.mf-form-sec { background: #f0f4ff; }
.mf-form-banner { background: #1d6ce0; color: #fff; font-size: 15px; font-weight: 700; padding: 16px 20px; text-align: center; }
.mf-form-banner em { color: #ffd600; font-style: normal; }
.mf-form-box { background: #fff; padding: 24px 20px; }
.mf-f-label { display: block; font-size: 14px; font-weight: 700; color: #111; margin-bottom: 6px; margin-top: 16px; }
.mf-f-label:first-child { margin-top: 0; }
.mf-f-input { width: 100%; border: 1px solid #dde3f0; border-radius: 6px; padding: 12px 14px; font-size: 14px; color: #111; font-family: inherit; outline: none; background: #fff; }
.mf-f-input:focus { border-color: #1d6ce0; }
.mf-phone-row { display: grid; grid-template-columns: 80px auto 1fr auto 1fr; align-items: center; gap: 4px; }
.mf-ph-sep { text-align: center; color: #888; font-weight: 900; }
.mf-f-select { width: 100%; border: 1px solid #dde3f0; border-radius: 6px; padding: 11px 8px; font-size: 14px; font-family: inherit; background: #fff; outline: none; -webkit-appearance: none; }
.mf-f-agree { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: #555; margin: 18px 0 16px; line-height: 1.5; cursor: pointer; }
.mf-f-agree input { margin-top: 3px; accent-color: #1d6ce0; flex-shrink: 0; width: 16px; height: 16px; }
.mf-btn-submit { width: 100%; padding: 16px; background: #0c399f; color: #fff; border: none; border-radius: 6px; font-size: 18px; font-weight: 900; font-family: inherit; cursor: pointer; }
.mf-btn-submit:active { background: #1d6ce0; }

/* ── 푸터 ── */















/* ── 하단바 ── */

/* ══ mf-bottom-wrap (카운터+버튼 통합 고정 컨테이너) ══ */

.mf-float-l, .mf-float-r { position: fixed; bottom: 120px; z-index: 900; display: flex; flex-direction: column; gap: 10px; }
.mf-float-l { left: 14px; }
.mf-float-r { right: 14px; }
@keyframes mf-fl-border-spin { to { transform: rotate(360deg); } }
#mf-bottom-wrap {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 850;
    display: flex;
    flex-direction: column;
    box-shadow: 0 -3px 16px rgba(0,0,0,0.3);
}

/* 카운터 바 */
.mf-fixed-counter {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: #111111;
    color: #fff;
    padding: 9px 16px;
    width: 100%;
    background-size: 200% 100%;
}
.mf-fixed-counter .mf-counter-icon { font-size:15px; animation:counterPulse 2s ease-in-out infinite; }
.mf-fixed-counter .mf-counter-num  { color:#ffd700; font-size:16px; font-weight:900; margin:0 2px; }

/* 카운터 효과 5종 */
.mf-fixed-counter.counter-eff-shine {
    background-image: linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.06) 50%,rgba(255,255,255,0) 100%);
    background-size: 200% 100%;
    animation: ctShine 3s ease-in-out infinite;
}
@keyframes ctShine {
    0%,100% { background-position: -100% 0; }
    50%      { background-position: 100% 0; }
}
.mf-fixed-counter.counter-eff-pulse {
    animation: ctPulse 1.8s ease-in-out infinite;
}
@keyframes ctPulse {
    0%,100% { filter: brightness(1); }
    50%      { filter: brightness(1.3); }
}
.mf-fixed-counter.counter-eff-glow {
    animation: ctGlow 2s ease-in-out infinite;
}
@keyframes ctGlow {
    0%,100% { box-shadow: inset 0 0 0px rgba(255,255,255,0); }
    50%      { box-shadow: inset 0 0 20px rgba(255,255,255,0.2); }
}
.mf-fixed-counter.counter-eff-wave {
    background-image: linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 35%,rgba(255,255,255,0.12) 50%,rgba(255,255,255,0) 65%,rgba(255,255,255,0) 100%);
    background-size: 200% 100%;
    animation: ctWave 2.5s linear infinite;
}
@keyframes ctWave {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}
.mf-fixed-counter.counter-eff-stripe {
    background-image: repeating-linear-gradient(-45deg,rgba(255,255,255,0) 0px,rgba(255,255,255,0) 8px,rgba(255,255,255,0.06) 8px,rgba(255,255,255,0.06) 10px);
    background-size: 14px 14px;
    animation: ctStripe 1s linear infinite;
}
@keyframes ctStripe {
    from { background-position: 0 0; }
    to   { background-position: 14px 14px; }
}
.mf-fixed-counter.counter-eff-none { }

/* 버튼 그리드 */


/* body 여백 */
body { padding-bottom: 115px !important; }

/* 플로팅버튼 위로 */


/* footer 여백 */
/* 푸터: 흰 페이지에 녹아드는 '흘려보는' 구간 — 배경/글자 모두 흐리고 낮게 */
.mf-footer { background: #fafafb; color: #a6a9ae; padding: 12px 16px 120px; font-size: 10.5px; line-height: 1.55; border-top: 1px solid #eee; }
.mf-ft-row { display: none; }
.mf-ft-badge { background: #1d6ce0; border-radius: 12px; width: 68px; height: 68px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #fff; gap: 2px; flex-shrink: 0; text-align: center; line-height: 1.4; }
.mf-ft-ic { font-size: 20px; }
.mf-ft-name { font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 2px; }
.mf-ft-num { font-size: 26px; font-weight: 900; color: #fff; display: block; text-decoration: none; }
.mf-ft-info { color: #a6a9ae; }
.mf-ft-company { display: block; }
.mf-ft-copy { display: block; margin-top: 2px; font-size: 9.5px; color: #c0c2c6; letter-spacing: .1px; }
.mf-ft-notice { font-size:9px; color:#c0c2c6; line-height:1.6; margin-top:6px; padding-top:6px; border-top:1px solid #eee; }
.mf-ft-notice p { margin:1px 0; }

.mf-fl-tel, .mf-fl-int {
  width: 70px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; text-decoration: none; padding: 9px 4px; font-size: 10px; font-weight: 700;
  text-align: center; line-height: 1.3; position: relative; border-radius: 8px;
}
.mf-fl-tel { background: #1d6ce0; color: #fff; }
.mf-fl-badge { position: absolute; top: 3px; left: 3px; background: #fff; color: #1d6ce0; border-radius: 50%; width: 15px; height: 15px; font-size: 8px; font-weight: 900; display: flex; align-items: center; justify-content: center; }
.mf-fl-int { background: #333; color: #fff; }

/* ── 하단바 ── */




/* ── 스크롤 애니메이션 (기존 덮어쓰기) ── */
.section { opacity: 1 !important; transform: none !important; }
.fade-in { opacity: 1 !important; transform: none !important; }

/* ── GIF 3단 히어로 이어붙이기 (경계 완전 제거) ── */
.hero-gif-section {
  margin: 0 !important;
  /* 헤더 높이(52px)만큼 아래로 밀어서 GIF 안 잘리게 */
  padding: 52px 0 0 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
  display: block !important;
  overflow: hidden !important;
  background: #1d6ce0 !important; /* GIF 배경색과 동일하게 - 틈 없이 이어짐 */
}
.hero-gif-wrap {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
  display: block !important;
  width: 100% !important;
}
.hero-gif-img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  outline: none !important;
  vertical-align: bottom !important;
  /* 이미지 사이 1px 틈 완전 제거 */
  font-size: 0 !important;
  line-height: 0 !important;
  /* 안티앨리어싱으로 인한 경계 방지 */
  image-rendering: auto !important;
}
/* GIF 히어로 다음 섹션과의 간격도 제거 */
.hero-gif-section + * {
  margin-top: 0 !important;
}

/* ══════════════════════════════════════
   상담 카운터 바
══════════════════════════════════════ */
.mf-counter-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #111;
    color: #fff;
    padding: 12px 20px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
}
.mf-counter-icon {
    font-size: 16px;
    animation: counterPulse 2s ease-in-out infinite;
}
@keyframes counterPulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.2); }
}
.mf-counter-num {
    color: #ffd700;
    font-size: 17px;
    font-weight: 900;
    margin: 0 2px;
}

/* ══════════════════════════════════════
   하단 고정 버튼 바
══════════════════════════════════════ */
.mf-bottom-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
}
/* 좌측 버튼 - 오른쪽 경계선 */
.mf-bottom-btn-l {
    border-right: 1px solid rgba(255,255,255,0.15);
}

/* ══════════════════════════════════════
   하단 고정 바 (카운터 + 버튼) - 항상 따라다님
══════════════════════════════════════ */


.mf-fixed-btn:active { filter: brightness(0.82); }
.mf-fixed-btn-l { border-right: 1px solid rgba(255,255,255,0.2); }

/* 포인트 버튼(전환 CTA) 글자: 두껍게 + 살짝 벌려서 버튼 안에서 또렷하게 자리잡도록 (예전엔 음수 자간이라 글자가 뭉치고 버튼만 휑해 보였음) */
.mf-bb-text { font-size:14px; font-weight:900; letter-spacing:0.3px; }

/* ══ 효과 5종 - 모두 background에 직접 적용 ══ */

/* 1. 빗살무늬 - 배경에 직접 대각선 패턴 + 이동 */
.mf-fixed-btn.effect-stripe {
    background-image: repeating-linear-gradient(
        -45deg,
        rgba(255,255,255,0) 0px,
        rgba(255,255,255,0) 12px,
        rgba(255,255,255,0.15) 12px,
        rgba(255,255,255,0.15) 14px
    );
    background-size: 20px 20px;
    animation: stripeSlide 0.8s linear infinite;
}

    100% { background-position: 20px 20px; }
}

/* 2. 그라디언트 - 배경에서 빛이 좌우로 */
.mf-fixed-btn.effect-gradient {
    background-image: linear-gradient(
        90deg,
        rgba(0,0,0,0.12) 0%,
        rgba(255,255,255,0.2) 50%,
        rgba(0,0,0,0.12) 100%
    );
    background-size: 200% 100%;
    animation: gradientSlide 2s ease-in-out infinite;
}

    50%      { background-position: 100% 0; }
}

/* 3. 펄스 - 배경 밝기 변화 */
.mf-fixed-btn.effect-pulse {
    animation: btnPulse 1.4s ease-in-out infinite;
}

    50%      { filter: brightness(1.35); }
}

/* 4. 글로우 - 배경에서 빛이 퍼짐 */
.mf-fixed-btn.effect-glow {
    background-image: radial-gradient(
        ellipse at center,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0) 100%
    );
    animation: btnGlow 1.8s ease-in-out infinite;
}

    50%      { background-image: radial-gradient(ellipse at center, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 70%); }
}

/* 5. 웨이브 - 배경에서 밝은 줄기가 좌→우 통과 */
.mf-fixed-btn.effect-wave {
    background-image: linear-gradient(
        90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0) 40%,
        rgba(255,255,255,0.22) 50%,
        rgba(255,255,255,0) 60%,
        rgba(255,255,255,0) 100%
    );
    background-size: 200% 100%;
    animation: wavePass 2s linear infinite;
}

    100% { background-position: -200% 0; }
}

/* 6. 단색 */
.mf-fixed-btn.effect-none { }

/* 여백 */




/* 버튼 공통 */
.mf-bb-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 10px;
    height: 56px;
    text-decoration: none;
    font-weight: 900;
    font-size: 15px;
    color: #fff !important;
    position: relative;
    background-color: #111111;
    background-size: 17px 17px;
}
.mf-bb-btn:active { filter: brightness(0.82); }
.mf-bb-l { border-right: 1px solid rgba(255,255,255,0.2); }
.mf-bb-icon { font-size:18px; flex-shrink:0; }

/* ══ 버튼 효과 6종 ══ */
.mf-bb-btn.effect-stripe {
    background-image: repeating-linear-gradient(-45deg,rgba(255,255,255,0) 0px,rgba(255,255,255,0) 10px,rgba(255,255,255,0.18) 10px,rgba(255,255,255,0.18) 12px);
    background-size: 17px 17px;
    animation: bbStripe 0.7s linear infinite;
}
@keyframes bbStripe { from{background-position:0 0} to{background-position:17px 17px} }

.mf-bb-btn.effect-gradient {
    background-image: linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.22) 50%,rgba(255,255,255,0) 100%);
    background-size: 200% 100%;
    animation: bbGrad 2s ease-in-out infinite;
}
@keyframes bbGrad { 0%,100%{background-position:-100% 0} 50%{background-position:100% 0} }

.mf-bb-btn.effect-pulse { animation: bbPulse 1.4s ease-in-out infinite; }
@keyframes bbPulse { 0%,100%{filter:brightness(1)} 50%{filter:brightness(1.4)} }

.mf-bb-btn.effect-glow { animation: bbGlow 1.8s ease-in-out infinite; }
@keyframes bbGlow { 0%,100%{box-shadow:inset 0 0 0px rgba(255,255,255,0)} 50%{box-shadow:inset 0 0 30px rgba(255,255,255,0.35)} }

.mf-bb-btn.effect-wave {
    background-image: linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 35%,rgba(255,255,255,0.25) 50%,rgba(255,255,255,0) 65%,rgba(255,255,255,0) 100%);
    background-size: 200% 100%;
    animation: bbWave 2s linear infinite;
}
@keyframes bbWave { from{background-position:200% 0} to{background-position:-200% 0} }

.mf-bb-btn.effect-none {}

/* ════════ 프리미엄 효과 4종 (고급형) ════════
   조절 변수: --fx-speed(속도배율, 클수록 빠름) / --fx-glow(광택·글로우 강도) */
.mf-bb-btn.effect-royal, .mf-bb-btn.effect-shine,
.mf-bb-btn.effect-gold,  .mf-bb-btn.effect-glass {
    overflow: hidden;
    --fx-speed: 1;
    --fx-glow: 1;
}
.mf-bb-btn.effect-royal > *, .mf-bb-btn.effect-shine > *,
.mf-bb-btn.effect-gold > *,  .mf-bb-btn.effect-glass > * { position: relative; z-index: 2; }

/* ★ ROYAL — 올인원 프리미엄 (유리질 + 금빛 광택 스윕 + 골드 글로우 + 숨쉬기) */
.mf-bb-btn.effect-royal {
    box-shadow: inset 0 1px 0 rgba(255,235,180, calc(.5 * var(--fx-glow,1))),
                0 0 calc(18px * var(--fx-glow,1)) rgba(212,175,55, calc(.30 * var(--fx-glow,1))),
                0 6px 20px rgba(0,0,0,.26);
    animation: bbRoyalBreath calc(3.4s / var(--fx-speed,1)) ease-in-out infinite;
}
.mf-bb-btn.effect-royal::before {
    content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
    background:linear-gradient(180deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,.05) 45%, rgba(0,0,0,.12) 100%);
}
.mf-bb-btn.effect-royal::after {
    content:""; position:absolute; top:-60%; height:220%; width:40%; left:-45%; z-index:1;
    transform:skewX(-20deg); pointer-events:none;
    background:linear-gradient(90deg, rgba(255,242,205,0), rgba(255,246,220, calc(.62 * var(--fx-glow,1))) 50%, rgba(255,242,205,0));
    animation: bbRoyalSweep calc(3.4s / var(--fx-speed,1)) ease-in-out infinite;
}
@keyframes bbRoyalSweep { 0%{left:-45%} 52%{left:135%} 100%{left:135%} }
@keyframes bbRoyalBreath { 0%,100%{filter:brightness(1)} 50%{filter:brightness(1.1) saturate(1.08)} }

/* ① SHINE — 프리미엄 광택 (빛 한 줄기 스윕) */
.mf-bb-btn.effect-shine { box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 4px 16px rgba(0,0,0,.22); }
.mf-bb-btn.effect-shine::before {
    content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
    background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.03) 42%, rgba(0,0,0,.14));
}
.mf-bb-btn.effect-shine::after {
    content:""; position:absolute; top:-60%; height:220%; width:38%; left:-45%; z-index:1;
    transform:skewX(-20deg); pointer-events:none;
    background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255, calc(.6 * var(--fx-glow,1))) 50%, rgba(255,255,255,0));
    animation: bbShineSweep calc(3.2s / var(--fx-speed,1)) ease-in-out infinite;
}
@keyframes bbShineSweep { 0%{left:-45%} 55%{left:135%} 100%{left:135%} }

/* ② GOLD — 골드 샤인 (금빛 광택 흐름 + 골드 글로우) */
.mf-bb-btn.effect-gold {
    box-shadow: inset 0 1px 0 rgba(255,225,150, calc(.5 * var(--fx-glow,1))),
                0 0 calc(16px * var(--fx-glow,1)) rgba(212,175,55, calc(.4 * var(--fx-glow,1)));
}
.mf-bb-btn.effect-gold::before {
    content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
    background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,.12));
}
.mf-bb-btn.effect-gold::after {
    content:""; position:absolute; inset:0; pointer-events:none; z-index:1; mix-blend-mode:screen;
    background:linear-gradient(100deg, rgba(255,220,140,0) 38%, rgba(255,231,163, calc(.55 * var(--fx-glow,1))) 50%, rgba(255,220,140,0) 62%);
    background-size:250% 100%; animation: bbGoldFlow calc(3.4s / var(--fx-speed,1)) linear infinite;
}
@keyframes bbGoldFlow { from{background-position:170% 0} to{background-position:-70% 0} }

/* ③ GLASS — 글래스 글로우 (유리질 하이라이트 + 숨쉬기) */
.mf-bb-btn.effect-glass {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 22px rgba(0,0,0,.30);
    animation: bbGlassGlow calc(3s / var(--fx-speed,1)) ease-in-out infinite;
}
.mf-bb-btn.effect-glass::before {
    content:""; position:absolute; left:0; right:0; top:0; height:52%; pointer-events:none; z-index:1;
    background:linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0));
}
@keyframes bbGlassGlow { 0%,100%{filter:brightness(1)} 50%{filter:brightness(calc(1 + .13 * var(--fx-glow,1))) saturate(1.12)} }

/* ④ 버튼 텍스트 교차 애니메이션 */
@keyframes bbTextFlip {
    0%,40%  { opacity:1; transform:translateY(0); }
    45%,55% { opacity:0; transform:translateY(-6px); }
    60%,100%{ opacity:1; transform:translateY(0); }
}
.mf-bb-text-alt { display:inline-block; }

/* ① 카운터 scale 트랜지션 */
#mf-counter-bar { transition: transform 0.3s ease; }

/* ② 슬라이드업 트랜지션은 inline style로 설정됨 */

/* ⑤ 상단 알림 바 */
#mf-notice-bar {
    animation: noticeShine 3s ease-in-out infinite;
    background-size: 200% 100%;
}
@keyframes noticeShine {
    0%,100% { background-position: -100% 0; }
    50%      { background-position: 100% 0; }
}

/* ══ 상단 알림 바 텍스트 효과 5종 ══ */

/* 1. 좌→우 무한 흐르기 (marquee) */
#mf-notice-bar.effect-marquee {
    overflow: hidden;
    white-space: nowrap;
}
#mf-notice-bar.effect-marquee .nb-inner {
    display: inline-block;
    animation: nbMarquee 12s linear infinite;
}
@keyframes nbMarquee {
    0%   { transform: translateX(100vw); }
    100% { transform: translateX(-100%); }
}

/* 2. 좌우 반복 슬라이드 */
#mf-notice-bar.effect-slide .nb-inner {
    display: inline-block;
    animation: nbSlide 3s ease-in-out infinite;
}
@keyframes nbSlide {
    0%,100% { transform: translateX(-8px); }
    50%      { transform: translateX(8px);  }
}

/* 3. 깜빡임 (점멸) */
#mf-notice-bar.effect-blink .nb-inner {
    animation: nbBlink 1.2s ease-in-out infinite;
}
@keyframes nbBlink {
    0%,100% { opacity: 1; }
    50%      { opacity: 0.25; }
}

/* 4. 위아래 바운스 */
#mf-notice-bar.effect-bounce .nb-inner {
    display: inline-block;
    animation: nbBounce 1s ease-in-out infinite;
}
@keyframes nbBounce {
    0%,100% { transform: translateY(0);    }
    50%      { transform: translateY(-5px); }
}

/* 5. 크기 펄스 */
#mf-notice-bar.effect-pulse .nb-inner {
    display: inline-block;
    animation: nbPulse 1.5s ease-in-out infinite;
}
@keyframes nbPulse {
    0%,100% { transform: scale(1);    }
    50%      { transform: scale(1.06); }
}

/* 기본 (효과 없음) */
#mf-notice-bar.effect-none .nb-inner { }

/* ══ 섹션 중간 띠 배너 ══ */
.mf-mid-banner { position:relative; width:100%; }
.mf-mid-banner.effect-mid-marquee { overflow:hidden; white-space:nowrap; }
.mf-mid-banner.effect-mid-marquee .nb-inner { display:inline-block; animation:nbMarquee 12s linear infinite; }
.mf-mid-banner.effect-mid-slide   .nb-inner { display:inline-block; animation:nbSlide  3s ease-in-out infinite; }
.mf-mid-banner.effect-mid-blink   .nb-inner { animation:nbBlink  1.2s ease-in-out infinite; }
.mf-mid-banner.effect-mid-bounce  .nb-inner { display:inline-block; animation:nbBounce 1s ease-in-out infinite; }
.mf-mid-banner.effect-mid-pulse   .nb-inner { display:inline-block; animation:nbPulse  1.5s ease-in-out infinite; }
.mf-mid-banner.effect-mid-none    .nb-inner { }

/* ══════════ 자금 계획 계산기 ══════════ */
.mf-calc{max-width:520px;margin:0 auto;background:#fff;border:1px solid #e6ecf7;border-radius:16px;padding:22px 20px;box-shadow:0 8px 30px rgba(29,108,224,.08);}
.mf-calc-row{margin-bottom:14px;}
.mf-calc-row label{display:flex;justify-content:space-between;font-size:13px;font-weight:700;color:#33456b;margin-bottom:8px;}
.mf-calc select{width:100%;padding:12px;border:1.5px solid #d6e0f5;border-radius:10px;font-size:15px;font-weight:700;color:#1546a0;background:#f7faff;}
.mf-calc input[type=range]{width:100%;accent-color:#1d6ce0;}
.mf-calc-price{text-align:center;font-size:14px;color:#66748f;margin:6px 0 16px;}
.mf-calc-price b{display:block;font-size:26px;font-weight:900;color:#0c2f6b;margin-top:2px;}
.mf-calc-break{background:#f5f8ff;border-radius:12px;padding:14px 16px;margin-bottom:16px;}
.mf-calc-item{display:flex;justify-content:space-between;align-items:center;padding:7px 0;font-size:14px;}
.mf-calc-item span{color:#55637d;} .mf-calc-item em{font-style:normal;color:#9aa7bf;font-size:12px;}
.mf-calc-item b{font-size:15px;font-weight:700;color:#1a2a48;}
.mf-calc-sub{font-size:11.5px;color:#8b97ac;padding:2px 0 8px;border-bottom:1px dashed #dde5f2;margin-bottom:4px;}
.mf-calc-result{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px;}
.mf-calc-res-item{background:#eef4ff;border-radius:12px;padding:14px;text-align:center;}
.mf-calc-res-item span{display:block;font-size:12px;color:#5b6b88;margin-bottom:6px;}
.mf-calc-res-item b{font-size:17px;font-weight:900;color:#12336e;}
.mf-calc-res-hi{background:linear-gradient(135deg,#1d6ce0,#0a3fa0);}
.mf-calc-res-hi span{color:rgba(255,255,255,.85);} .mf-calc-res-hi b{color:#fff;}
.mf-calc-note{font-size:11px;color:#9aa7bf;text-align:center;margin-top:6px;line-height:1.5;}

/* ══════════ 잔여세대 현황판 ══════════ */
.mf-av-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;max-width:640px;margin:0 auto;}
.mf-av-card{border:1px solid #e6ecf7;border-radius:14px;padding:16px 14px;background:#fff;position:relative;overflow:hidden;}
.mf-av-card.is-hot{border-color:#f3c1c1;background:linear-gradient(180deg,#fff,#fff5f5);}
.mf-av-card.is-sold{opacity:.62;filter:grayscale(.4);}
.mf-av-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.mf-av-type{font-size:17px;font-weight:700;color:#1a2a48;}
.mf-av-badge{font-size:10px;font-weight:800;padding:3px 8px;border-radius:20px;background:#e8f0ff;color:#1d6ce0;}
.is-hot .mf-av-badge{background:#e74c3c;color:#fff;animation:avBlink 1.4s ease-in-out infinite;}
.is-sold .mf-av-badge{background:#9aa7bf;color:#fff;}
@keyframes avBlink{0%,100%{opacity:1}50%{opacity:.55}}
.mf-av-num{font-size:14px;color:#55637d;margin-bottom:8px;}
.mf-av-num b{font-size:22px;font-weight:900;color:#e74c3c;}
.is-ok .mf-av-num b{color:#1d6ce0;}
.mf-av-bar{height:7px;border-radius:6px;background:#eef1f6;overflow:hidden;margin-bottom:6px;}
.mf-av-bar i{display:block;height:100%;background:linear-gradient(90deg,#1d6ce0,#5a9bff);border-radius:6px;}
.is-hot .mf-av-bar i{background:linear-gradient(90deg,#e74c3c,#ff8a7a);}
.mf-av-sub{font-size:11px;color:#8b97ac;}

/* ══════════ 계약금 안심 위젯 (계약금 중심) ══════════ */
.mf-calc-focus{text-align:center;}
.mf-calc-focus .mf-calc-row{text-align:left;}
.mf-cf-label{font-size:14px;color:#5b6b88;margin-top:6px;font-weight:600;}
.mf-cf-amount{font-size:40px;font-weight:900;color:#0c2f6b;line-height:1.1;margin:6px 0 4px;letter-spacing:-1px;}
.mf-cf-rate{font-size:13px;color:#8b97ac;margin-bottom:18px;}
.mf-cf-chips{display:flex;flex-direction:column;gap:8px;margin-bottom:20px;}
.mf-cf-chip{display:flex;align-items:center;justify-content:center;gap:8px;background:#f5f8ff;border:1px solid #e3ecff;border-radius:10px;padding:11px 12px;font-size:13.5px;color:#40507a;font-weight:600;}
.mf-cf-chip i{font-style:normal;font-size:16px;}
.mf-cf-chip b{color:#1d6ce0;font-weight:800;}
.mf-cf-cta{display:block;background:linear-gradient(135deg,#1d6ce0,#0a3fa0);color:#fff;font-size:16px;font-weight:800;letter-spacing:.3px;text-decoration:none;padding:16px;border-radius:12px;box-shadow:0 6px 18px rgba(29,108,224,.28);margin-bottom:12px;transition:transform .15s;}
.mf-cf-cta:active{transform:scale(.98);}

/* ══════════ 간편 신청 모달 (상담/방문예약) ══════════ */
.qa-overlay{position:fixed;inset:0;background:rgba(10,20,45,.55);z-index:12000;display:none;align-items:center;justify-content:center;padding:20px;}
.qa-overlay.active{display:flex;}
.qa-box{background:#fff;width:100%;max-width:380px;border-radius:18px;padding:14px 20px 20px;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.3);animation:qaPop .22s ease;}
@keyframes qaPop{from{transform:translateY(16px) scale(.97);opacity:0}to{transform:none;opacity:1}}
/* 닫기 X — 상단 중앙, 은은하게 */
.qa-x{display:block;margin:0 auto 10px;width:34px;height:34px;border-radius:50%;border:none;background:#eef1f6;color:#aab3c6;font-size:14px;line-height:34px;text-align:center;padding:0;cursor:pointer;transition:background .15s,color .15s;}
.qa-x:hover{background:#e2e6ee;color:#7a88a6;}
.qa-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px;}
.qa-tab{padding:11px;border:1.5px solid #e0e8ff;background:#f7faff;border-radius:10px;font-size:13.5px;font-weight:700;color:#7a88a6;cursor:pointer;}
.qa-tab.active{background:#1d6ce0;border-color:#1d6ce0;color:#fff;box-shadow:0 4px 12px rgba(29,108,224,.28);}
.qa-title{font-size:19px;font-weight:900;color:#12336e;margin:2px 0 4px;}
.qa-desc{font-size:12.5px;color:#7a88a6;margin-bottom:16px;line-height:1.5;}
.qa-input{width:100%;padding:13px 14px;border:1.5px solid #d6e0f5;border-radius:10px;font-size:15px;margin-bottom:10px;box-sizing:border-box;color:#1a2a48;}
.qa-input::placeholder{color:#a7b0c2;}
.qa-input:focus{outline:none;border-color:#1d6ce0;}
.qa-consent{display:flex;align-items:center;gap:8px;font-size:12px;color:#8b97ac;margin:2px 0 14px;cursor:pointer;}
.qa-consent input{width:16px;height:16px;accent-color:#1d6ce0;}
.qa-submit{width:100%;padding:15px;background:linear-gradient(135deg,#1d6ce0,#0a3fa0);color:#fff;border:none;border-radius:12px;font-size:16px;font-weight:800;letter-spacing:.3px;cursor:pointer;box-shadow:0 6px 18px rgba(29,108,224,.3);}
.qa-submit:active{transform:scale(.98);}

/* ── 방문 예약 프리미엄 날짜·시간 선택기 (커스텀 캘린더 + 시간 칩) ── */
.mf-visit-picker{position:relative;margin-bottom:10px;}
.mf-visit-trigger{display:flex;align-items:center;gap:9px;width:100%;text-align:left;cursor:pointer;font-family:inherit;appearance:none;-webkit-appearance:none;transition:border-color .15s,box-shadow .15s;margin-bottom:0;}
.mf-visit-trigger .mf-vp-trigger-icon{font-size:15px;flex-shrink:0;}
.mf-visit-trigger .mf-vp-trigger-text{color:#9aa5ba;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mf-visit-trigger.mf-vp-has-value .mf-vp-trigger-text{color:#16213e;font-weight:800;}
.mf-visit-trigger.mf-vp-active{border-color:#1d6ce0 !important;box-shadow:0 0 0 3px rgba(29,108,224,.12);}
.mf-vp-panel{max-height:0;overflow:hidden;opacity:0;transition:max-height .32s cubic-bezier(.4,0,.2,1),opacity .25s ease,margin-top .32s;background:#fbfcff;border:1px solid #e4eaf7;border-radius:12px;}
.mf-vp-panel.mf-vp-open{max-height:640px;opacity:1;margin-top:10px;padding:14px;}
.mf-vp-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.mf-vp-cal-month{font-size:14px;font-weight:800;color:#16213e;}
.mf-vp-nav{width:28px;height:28px;border-radius:50%;border:1px solid #dde3f0;background:#fff;color:#1d6ce0;font-size:16px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;padding:0;}
.mf-vp-nav:disabled{opacity:.3;cursor:default;}
.mf-vp-nav:active:not(:disabled){background:#eef4ff;}
.mf-vp-weekdays{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:11px;font-weight:700;color:#96a1b8;margin-bottom:4px;}
.mf-vp-weekdays .mf-vp-wd-sun{color:#e0644c;}
.mf-vp-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}
.mf-vp-day{aspect-ratio:1;border:none;background:none;border-radius:50%;font-size:13px;font-weight:600;color:#2c3652;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s;padding:0;font-family:inherit;}
.mf-vp-day-empty{cursor:default;}
.mf-vp-day:not(.mf-vp-day-disabled):not(.mf-vp-day-empty):hover{background:#eef4ff;}
.mf-vp-day-disabled{color:#d3d8e4;cursor:not-allowed;}
.mf-vp-day-today{box-shadow:inset 0 0 0 1.5px #1d6ce0;}
.mf-vp-day-selected{background:linear-gradient(135deg,#1d6ce0,#0a3fa0) !important;color:#fff !important;box-shadow:0 4px 10px rgba(29,108,224,.35);}
.mf-vp-sun-note{font-size:10.5px;color:#b8c0d4;margin:6px 2px 0;}
.mf-vp-time-section{margin-top:14px;padding-top:12px;border-top:1px dashed #e0e6f2;opacity:.35;pointer-events:none;transition:opacity .25s;}
.mf-vp-time-section.mf-vp-time-active{opacity:1;pointer-events:auto;}
.mf-vp-time-label{font-size:12px;font-weight:700;color:#5c6a89;margin:0 0 8px;}
.mf-vp-time-wrap{display:flex;flex-wrap:wrap;gap:6px;}
.mf-vp-time-chip{padding:7px 12px;border:1.3px solid #dde3f0;border-radius:20px;background:#fff;font-size:12px;font-weight:700;color:#5c6a89;cursor:pointer;transition:all .15s;font-family:inherit;}
.mf-vp-time-chip:hover{border-color:#b7c8ef;}
.mf-vp-time-selected{background:linear-gradient(135deg,#1d6ce0,#0a3fa0);border-color:#1d6ce0;color:#fff;box-shadow:0 3px 8px rgba(29,108,224,.3);}
/* 관심고객 등록 폼의 "관심 항목" 칩 — 개수가 홀수/짝수 어느 쪽이든 한쪽으로 쏠려 보이지 않도록
   flex 대신 2열 그리드로 배치. 항목이 홀수 개일 때 마지막 하나만 남으면 그 한 줄을 가운데(전체 폭)로
   넓혀 어색하게 왼쪽에 붙어있지 않게 함. */
.mf-qa-cat-wrap{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;}
.mf-qa-cat-wrap .mf-vp-time-chip{width:100%;box-sizing:border-box;text-align:center;}
.mf-qa-cat-wrap .mf-vp-time-chip:last-child:nth-child(odd){grid-column:1 / -1;}
body.theme-lux .mf-vp-day-selected{background:linear-gradient(135deg,var(--lux-gold-hi),var(--lux-gold)) !important;color:#2a1e05 !important;}
body.theme-lux .mf-vp-time-selected{background:linear-gradient(135deg,var(--lux-gold-hi),var(--lux-gold));border-color:var(--lux-gold);color:#2a1e05;}
body.theme-lux .mf-vp-day-today{box-shadow:inset 0 0 0 1.5px var(--lux-gold);}
body.theme-lux .mf-visit-trigger.mf-vp-active{border-color:var(--lux-gold) !important;box-shadow:0 0 0 3px rgba(201,162,74,.16) !important;}
body.theme-lux .mf-vp-nav{color:var(--lux-gold);}

/* 오시는 길(모델하우스 위치) 모달 */
.dir-addr-box{background:#f4f7fc;border:1px solid #e3ebf7;border-radius:12px;padding:14px;margin-bottom:14px;text-align:center;}
.dir-place{font-size:15px;font-weight:800;color:#12336e;margin-bottom:4px;}
.dir-addr{font-size:14px;color:#42506a;line-height:1.5;margin-bottom:10px;}
.dir-copy{background:#fff;border:1.5px solid #1d6ce0;color:#1d6ce0;font-size:12.5px;font-weight:700;padding:7px 16px;border-radius:20px;cursor:pointer;}
.dir-copy:active{transform:scale(.97);}
.dir-maps{display:flex;flex-direction:column;gap:8px;margin-bottom:12px;}
.dir-map-btn{display:block;text-align:center;padding:13px;border-radius:11px;font-size:14.5px;font-weight:800;letter-spacing:.3px;text-decoration:none;color:#fff;}
.dir-naver{background:#03c75a;}
.dir-kakao{background:#ffe812;color:#3c1e1e;}
.dir-google{background:#4285f4;}
.dir-map-btn:active{transform:scale(.98);}
.dir-note{font-size:12.5px;color:#7a88a6;text-align:center;margin:2px 0 10px;line-height:1.5;}
.dir-empty{font-size:13px;color:#7a88a6;text-align:center;margin:6px 0 12px;line-height:1.6;}
.dir-tel{display:block;text-align:center;font-size:13px;color:#8a97ad;text-decoration:none;padding:8px;border-top:1px solid #eef1f6;}
.dir-reassure{font-size:12px;color:#1d6ce0;text-align:center;margin:12px 0 0;font-weight:600;}

/* ═══════════════════════════════════════════════
   ✦ 프리미엄 고급화 패스 (모션·골드 헤어라인·유리/금속 질감·디테일)
   - 색은 유지. JS 미동작/모션최소화 시 콘텐츠는 전부 정상 표시(SEO 안전).
   ═══════════════════════════════════════════════ */

/* ① 스크롤 등장 모션 — body.rv-on 이 있을 때만 숨김(=JS 켜졌을 때만). 요소별 계단식 fade-up */
body.rv-on .rv { opacity: 0; transform: translateY(36px); will-change: opacity, transform; }
body.rv-on .rv.rv-in {
  opacity: 1; transform: none;
  transition: opacity 1.05s cubic-bezier(.2,.7,.2,1), transform 1.05s cubic-bezier(.2,.7,.2,1);
}
@media (prefers-reduced-motion: reduce) {
  body.rv-on .rv { opacity: 1 !important; transform: none !important; }
}

/* ② 골드 헤어라인 — 금색은 '블록'이 아니라 얇은 '선'으로만 (섹션 제목 아래) */
.mf-sec-h { position: relative; padding-bottom: 14px; }
.mf-sec-h::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 42px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #b8862f 0%, #f3dd94 45%, #d9b56a 55%, #b8862f 100%);
}
.mf-sec-dark .mf-sec-h::after { background: linear-gradient(90deg, #e8c877 0%, #fff2cf 50%, #e8c877 100%); }

/* ③ 유리/금속 질감 — 납작한 2px 그림자 → 부드러운 다층 그림자 + 얇은 하이라인 테두리 */
.mf-brand-card, .mf-opt-card, .mf-comm-card, .mf-calc, .mf-av-card {
  box-shadow: 0 1px 2px rgba(16,42,110,.05), 0 10px 28px -10px rgba(16,42,110,.14) !important;
  border: 1px solid rgba(16,42,110,.06);
}

/* ③-1 모달·오버레이 프로스트 글래스(뒤 배경이 은은하게 흐려짐) */
.qa-overlay { backdrop-filter: blur(5px) saturate(1.08); -webkit-backdrop-filter: blur(5px) saturate(1.08); }

/* ④ 폼 포커스 글로우 (정성 들인 디테일) */
.mf-f-input:focus, .qa-input:focus, #site-address:focus {
  outline: none; border-color: #1d6ce0;
  box-shadow: 0 0 0 3px rgba(29,108,224,.15);
}

/* ⑤ 커스텀 스크롤바 (작지만 '마감'의 차이) */
@media (min-width: 700px) {
  ::-webkit-scrollbar { width: 10px; }
  ::-webkit-scrollbar-thumb { background: rgba(12,57,159,.35); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
  ::-webkit-scrollbar-thumb:hover { background: rgba(12,57,159,.55); background-clip: content-box; }
  ::-webkit-scrollbar-track { background: transparent; }
}

/* 확대 가능한 이미지 커서 표시 */
.mf-comm-img { cursor: pointer; }

/* ═══════════════════════════════════════════════════════════════
   ✦✦ 프리미엄 럭셔리 테마 — 딥네이비 + 샴페인골드 (body.theme-lux) ✦✦
   색·서체·여백·골드라인·유리질감을 한 세트로. 기능/구조는 그대로.
   ═══════════════════════════════════════════════════════════════ */
body.theme-lux{
  --lux-bg:#0a1a3a; --lux-bg2:#0d2149; --lux-bg3:#081634;
  --lux-ivory:#f3eee2; --lux-mut:#c3cad9;
  /* 골드 전반 상향(+약35%): 더 진하고 밝고 선명하게. gold-key = 핵심 포인트용 밝은 골드 */
  --lux-gold:#d4ad4e; --lux-gold-hi:#efcd78; --lux-gold-key:#f5cf6b; --lux-gold-deep:#a67f2b;
  --lux-line:rgba(212,173,78,.46); --lux-glass:rgba(255,255,255,.05); --lux-glassbrd:rgba(212,173,78,.42);
  /* 예전엔 여기가 'Noto Serif KR'(구글 폰트)이라 헤드라인/섹션 타이틀만 본문과 다른 서체로 보였음.
     "전 구간 하나의 세련된 폰트로 통일" 요청에 맞춰 본문과 동일한 Pretendard로 통일. */
  --serif:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Noto Sans KR',sans-serif;
  /* 헤더/푸터/대비 섹션(mf-sec-dark) 전용 — 배경 테마가 밝은 계열이어도 이 영역은 항상 어두운 '띠'라 글자는 항상 밝게 고정 */
  --lux-band-bg:rgba(6,15,34,.82); --lux-band-text:var(--lux-ivory); --lux-band-mut:var(--lux-mut);
  /* '유리질감' 카드 오버레이의 바탕색 — 어두운 테마=흰색 틴트, 밝은 테마=진한 틴트로 테마별 교체 */
  --lux-glass-tint:#ffffff;
}
body.theme-lux{ background:var(--lux-bg) !important; color:var(--lux-ivory); }

/* ═══ 배경 테마 4종 추가 (관리자 '테마 색상'에서 선택, data-theme-base) — 팔레트만 교체, 구조/기능은 100% 동일 ═══ */
body.theme-lux[data-theme-base="charcoal"]{
  --lux-bg:#1c1c1e; --lux-bg2:#242426; --lux-bg3:#151516;
  --lux-ivory:#eae7e2; --lux-mut:#a8a8ac;
  --lux-gold:#b8703c; --lux-gold-hi:#d99a66; --lux-gold-key:#e6b483; --lux-gold-deep:#8f5628;
  --lux-line:rgba(184,112,60,.4); --lux-glass:rgba(255,255,255,.05); --lux-glassbrd:rgba(184,112,60,.38);
  --lux-band-bg:rgba(12,12,13,.85); --lux-band-text:var(--lux-ivory); --lux-band-mut:var(--lux-mut);
  --lux-glass-tint:#ffffff;
}
body.theme-lux[data-theme-base="offblack"]{
  --lux-bg:#121212; --lux-bg2:#181818; --lux-bg3:#0c0c0c;
  --lux-ivory:#f0eee9; --lux-mut:#8f8f95;
  --lux-gold:#b9bdc4; --lux-gold-hi:#dcdfe3; --lux-gold-key:#ececee; --lux-gold-deep:#8d9096;
  --lux-line:rgba(185,189,196,.32); --lux-glass:rgba(255,255,255,.04); --lux-glassbrd:rgba(185,189,196,.26);
  --lux-band-bg:rgba(8,8,8,.88); --lux-band-text:var(--lux-ivory); --lux-band-mut:var(--lux-mut);
  --lux-glass-tint:#ffffff;
}
body.theme-lux[data-theme-base="burgundy"]{
  --lux-bg:#2a0f14; --lux-bg2:#37151f; --lux-bg3:#210b0f;
  --lux-ivory:#f2e5df; --lux-mut:#c2a19c;
  --lux-gold:#c9a227; --lux-gold-hi:#e8c766; --lux-gold-key:#f2d783; --lux-gold-deep:#9c7c1e;
  --lux-line:rgba(201,162,39,.4); --lux-glass:rgba(255,255,255,.05); --lux-glassbrd:rgba(201,162,39,.36);
  --lux-band-bg:rgba(19,7,10,.85); --lux-band-text:var(--lux-ivory); --lux-band-mut:var(--lux-mut);
  --lux-glass-tint:#ffffff;
}
/* 아이보리 테마만 유일하게 '밝은' 배경 — 본문 글자색은 어둡게 뒤집히지만,
   헤더·푸터·mf-sec-dark(대비 섹션)는 항상 딥그린 '띠'로 유지하고 그 안의 글자는 --lux-band-text로 밝게 고정 */
body.theme-lux[data-theme-base="ivory"]{
  --lux-bg:#f6f1e6; --lux-bg2:#efe5d1; --lux-bg3:#1c3829;
  --lux-ivory:#2b2b26; --lux-mut:#6f6a5c;
  --lux-gold:#b8934a; --lux-gold-hi:#8f6f2e; --lux-gold-key:#7a5c26; --lux-gold-deep:#a37d3e;
  --lux-line:rgba(184,147,74,.5); --lux-glass:rgba(28,56,41,.045); --lux-glassbrd:rgba(184,147,74,.45);
  --lux-band-bg:rgba(28,56,41,.94); --lux-band-text:#f3eee2; --lux-band-mut:rgba(243,238,226,.75);
  --lux-glass-tint:#1c3829;
}
/* 아이보리 테마의 어두운 '띠' 안(헤더 · 푸터 · 대비 섹션)은 본문의 뒤집힌 어두운 글자색을 쓰면 안 보이므로,
   그 영역 안에서만 --lux-ivory/--lux-mut 변수 자체를 밝은 값으로 재정의 — var()를 쓰는 모든 하위 요소가 자동으로 따라감 */
body.theme-lux[data-theme-base="ivory"] .mf-hd,
body.theme-lux[data-theme-base="ivory"] .mf-footer,
body.theme-lux[data-theme-base="ivory"] .mf-sec-dark{
  color:var(--lux-band-text);
  --lux-ivory:var(--lux-band-text);
  --lux-mut:var(--lux-band-mut);
  /* ▲가독성 수정(2026-07-30): --lux-gold-hi는 아이보리 테마의 '밝은 배경'용으로 일부러 어둡게(#8f6f2e)
     설계돼 있는데, 이 딥그린 '띠' 안에서는 그대로 어두운 글자가 되어 프리미엄 카드 제목 등이 묻혀 보였음.
     → 다른 테마의 gold-hi처럼 이 영역 안에서만 밝은 값으로 되돌림(사이트 전역에서 이미 쓰는 다크섹션 골드 색상과 동일). */
  --lux-gold-hi:#e8c877;
}

/* 헤더 */
body.theme-lux .mf-hd{ background:var(--lux-band-bg) !important; backdrop-filter:blur(8px); border-bottom:1px solid var(--lux-line); }
body.theme-lux .mf-hd-name{ font-family:var(--serif); color:var(--lux-ivory); letter-spacing:.5px; }
body.theme-lux .mf-hd-bars span{ background:var(--lux-gold); }
/* ▲버그수정: 배경/글자색은 관리자(header.btnBgColor/btnTextColor)에서 지정 가능 → !important 제거하여 인라인 색이 항상 반영되게 함 */
body.theme-lux .mf-hd-tel{ background:linear-gradient(135deg,var(--lux-gold-hi),var(--lux-gold)); color:#2a1e05; border-radius:20px; letter-spacing:.5px; }

/* 히어로 */
body.theme-lux .mf-hero{ background:radial-gradient(120% 80% at 50% -10%, color-mix(in srgb, var(--lux-gold) 16%, transparent), transparent 60%), linear-gradient(180deg,var(--lux-bg),var(--lux-bg2)) !important; }
body.theme-lux .mf-hero-badge{ background:transparent; color:var(--lux-gold); border:1px solid var(--lux-line); border-radius:2px; letter-spacing:3px; }
body.theme-lux .mf-hero-stars{ color:var(--lux-gold-hi); }
body.theme-lux .mf-hero-title{ font-family:var(--serif); color:var(--lux-ivory); font-weight:700; letter-spacing:.5px; }
body.theme-lux .mf-hero-sub-box{ background:transparent; color:var(--lux-gold-hi); font-weight:600; border-top:1px solid var(--lux-line); border-bottom:1px solid var(--lux-line); border-radius:0; padding:10px 18px; }
/* ▲가독성 수정(2026-07-30): 이 항목만 테마 색상 목록에서 빠져 있어, 어두운 히어로 배경 전용의
   반투명 흰 글자(기본 CSS)가 아이보리 테마의 밝은 히어로 배경 위에서 거의 안 보였음. */
body.theme-lux .mf-hero-disclaimer{ color:var(--lux-mut); }

/* 섹션 배경 — 흰/연블루 → 네이비 계열 */
body.theme-lux .mf-sec-white{ background:var(--lux-bg) !important; }
body.theme-lux .mf-sec-alt{ background:var(--lux-bg2) !important; }
body.theme-lux .mf-sec-dark{ background:var(--lux-bg3) !important; }

/* 라벨 태그 — 파란 알약 → 골드 아웃라인 */
body.theme-lux .mf-sec-tag{ background:transparent; color:var(--lux-gold-hi); border:1px solid var(--lux-line); border-radius:2px; letter-spacing:2.5px; font-weight:700; text-transform:uppercase; }
/* 제목 — 세리프 + 아이보리, 골드 헤어라인 유지 */
body.theme-lux .mf-sec-h{ font-family:var(--serif); color:var(--lux-ivory) !important; font-weight:600; }
body.theme-lux .mf-sec-h-dark{ color:var(--lux-ivory) !important; }
body.theme-lux .mf-sec-sub{ color:var(--lux-mut); }
body.theme-lux .mf-feature-row{ color:var(--lux-mut); border-bottom:1px solid rgba(244,239,227,.10); }

/* 사업개요 테이블 — 유리/골드 라벨 */
body.theme-lux .mf-ov-table th{ background:transparent; color:var(--lux-gold-hi); border-bottom:1px solid var(--lux-line); letter-spacing:1px; }
body.theme-lux .mf-ov-table td{ color:var(--lux-ivory); border-bottom:1px solid rgba(244,239,227,.10); }

/* 카드류 — 흰 박스 → 유리(글래스) + 골드 하이라인 */
body.theme-lux .mf-brand-card, body.theme-lux .mf-opt-card, body.theme-lux .mf-comm-card,
body.theme-lux .mf-conv-card, body.theme-lux .mf-hl-card, body.theme-lux .mf-calc,
body.theme-lux .mf-av-card{
  background:var(--lux-glass) !important; border:1px solid var(--lux-glassbrd) !important;
  box-shadow:0 14px 34px -14px rgba(0,0,0,.55) !important; backdrop-filter:blur(4px); border-radius:4px;
}
body.theme-lux .mf-brand-title, body.theme-lux .mf-hl-title, body.theme-lux .mf-prem-title{ color:var(--lux-gold-hi); }
body.theme-lux .mf-brand-desc, body.theme-lux .mf-hl-desc, body.theme-lux .mf-prem-desc, body.theme-lux .mf-conv-card{ color:var(--lux-mut); }
body.theme-lux .mf-hl-icon, body.theme-lux .mf-prem-icon{ filter:saturate(.85) brightness(1.05); }

/* 프리미엄(다크) 섹션 카드 */
body.theme-lux .mf-prem-card{ background:var(--lux-glass); border:1px solid var(--lux-glassbrd); border-radius:4px; }
body.theme-lux .mf-pt-eyebrow{ color:var(--lux-gold); font-style:normal; letter-spacing:.2em; }

/* 평면도 카드 */
body.theme-lux .mf-fl-card{ border:1px solid var(--lux-glassbrd); background:var(--lux-glass); }
body.theme-lux .mf-fl-info{ background:linear-gradient(135deg,var(--lux-gold-deep),var(--lux-gold)); }
body.theme-lux .mf-fl-label{ color:#241a04; }
body.theme-lux .mf-fl-area, body.theme-lux .mf-fl-units{ color:rgba(36,26,4,.7); }

/* 잔여세대 */
body.theme-lux .mf-av-num b{ color:var(--lux-gold-hi); }
body.theme-lux .mf-av-badge{ color:var(--lux-gold); border:1px solid var(--lux-line); background:transparent; }
body.theme-lux .mf-av-bar{ background:color-mix(in srgb, var(--lux-glass-tint) 10%, transparent); }
body.theme-lux .mf-av-bar i{ background:linear-gradient(90deg,var(--lux-gold-deep),var(--lux-gold-hi)); }
body.theme-lux .mf-av-type{ color:var(--lux-ivory); }
body.theme-lux .mf-av-sub{ color:var(--lux-mut); }

/* 계산기 */
body.theme-lux .mf-calc-focus,
body.theme-lux .mf-cf-amt, body.theme-lux .mf-calc b{ color:var(--lux-gold-hi) !important; }
body.theme-lux .mf-calc-note, body.theme-lux .mf-cf-label{ color:var(--lux-mut); }

/* 폼 — 어두운 유리 인풋 + 골드 포커스 */
body.theme-lux .mf-form-box{ background:var(--lux-glass); border:1px solid var(--lux-glassbrd); border-radius:6px; padding:18px; }
/* ▲가독성 수정(2026-07-30): --lux-gold 대신 --lux-gold-hi 사용 — 어두운 테마에선 더 밝아서 잘 보이고,
   아이보리 테마에선 --lux-gold-hi가 오히려 더 어둡게 설계되어 있어(밝은 배경용) 라벨이 배경에 묻히지 않음 */
body.theme-lux .mf-f-label{ color:var(--lux-gold-hi); letter-spacing:1px; }
body.theme-lux .mf-f-input{ background:color-mix(in srgb, var(--lux-glass-tint) 5%, transparent); border:1px solid var(--lux-line); color:var(--lux-ivory); }
/* 예시 텍스트(placeholder)는 실제 입력값과 뚜렷이 구분되게 더 옅게 — 진하면 이미 뭔가 써있는 것처럼 보임 */
body.theme-lux .mf-f-input::placeholder{ color:rgba(195,202,217,.4); }
body.theme-lux .mf-f-input:focus{ border-color:var(--lux-gold); box-shadow:0 0 0 3px rgba(201,162,74,.16); }
body.theme-lux .mf-f-agree{ color:var(--lux-mut); }
/* ▲가독성 수정(2026-07-30): 방문예약 날짜선택 트리거 문구에 테마 색상이 전혀 적용되지 않아
   (기본 CSS의 회색이 그대로 남아) 아이보리 테마의 밝은 배경 위에서 잘 안 보였음 */
body.theme-lux .mf-vp-trigger-text{ color:var(--lux-mut); }
body.theme-lux .mf-visit-trigger.mf-vp-has-value .mf-vp-trigger-text{ color:var(--lux-ivory); }
body.theme-lux .mf-btn-submit{ background:linear-gradient(135deg,var(--lux-gold-hi),var(--lux-gold)) !important; color:#2a1e05 !important; font-weight:700; letter-spacing:1px; border-radius:2px; box-shadow:0 10px 26px rgba(201,162,74,.28); }

/* FAQ */
body.theme-lux .mf-faq-item{ border-bottom:1px solid var(--lux-line); }
body.theme-lux .mf-faq-q{ color:var(--lux-ivory); }
body.theme-lux .mf-faq-a{ color:var(--lux-mut); }
body.theme-lux .mf-faq-arr{ color:var(--lux-gold-hi); }

/* 하단 고정바 + 플로팅 (밝은 파랑 → 네이비/골드) */
body.theme-lux .mf-bottom-bar{ background:rgba(6,15,34,.92); border-top:1px solid var(--lux-line); }
/* ▲버그수정: 배경색은 관리자(bottomBar.leftBtn/rightBtn.bgColor)에서 지정 가능 → !important 제거 (layoutComponents.js 인라인 스타일이 항상 우선하도록) */
body.theme-lux .mf-bb-l{ background:var(--lux-bg2); }
body.theme-lux .mf-bb-r{ background:linear-gradient(135deg,var(--lux-gold-deep),var(--lux-gold)); color:#241a04 !important; }
body.theme-lux .mf-bb-r .mf-bb-text, body.theme-lux .mf-bb-r .mf-bb-icon{ color:#241a04 !important; }
/* 플로팅 버튼 색·테두리는 관리자(data)에서 지정 → floatingButtons.js가 !important로 그려서 테마가 덮어쓰지 않음 */
body.theme-lux .mf-fl-badge{ background:#c0392b; }

/* 카운터바 */
body.theme-lux .mf-counter-bar, body.theme-lux #mf-counter-bar{ background:rgba(6,15,34,.92) !important; color:var(--lux-ivory) !important; border-top:1px solid var(--lux-line); }
body.theme-lux #mf-counter-bar b, body.theme-lux .mf-counter-bar b{ color:var(--lux-gold-hi) !important; }

/* 푸터 — 네이비 + 골드 헤어라인 */
body.theme-lux .mf-footer{ background:var(--lux-bg3) !important; color:var(--lux-mut) !important; border-top:1px solid var(--lux-line) !important; }
body.theme-lux .mf-ft-info, body.theme-lux .mf-ft-company, body.theme-lux .mf-ft-copy, body.theme-lux .mf-ft-notice{ color:var(--lux-mut) !important; }

/* 등장모션: 어두운 배경에서도 자연스럽게(동일) */

/* 상담 폼 섹션(.mf-form-sec) + 파란 띠 배너 → 네이비/골드 */
body.theme-lux .mf-form-sec{ background:var(--lux-bg) !important; }
body.theme-lux .mf-form-banner{ background:var(--lux-bg2); color:var(--lux-ivory); border-top:1px solid var(--lux-line); border-bottom:1px solid var(--lux-line); letter-spacing:.5px; }
body.theme-lux .mf-form-banner em{ color:var(--lux-gold-hi); }
/* 커뮤니티/보도자료 보조 제목 */
body.theme-lux .mf-comm-sub{ color:var(--lux-gold-hi); }
body.theme-lux .mf-comm-card, body.theme-lux .mf-news-card{ background:var(--lux-glass) !important; border:1px solid var(--lux-glassbrd) !important; }
/* 중간 띠 배너(관리자에서 추가하는 것)는 사용자가 색을 지정하므로 건드리지 않음 */

/* 셀렉트 인라인 background:#fff 덮어쓰기 + 개인정보 링크 골드 */
body.theme-lux select.mf-f-input, body.theme-lux .mf-f-input{ background:color-mix(in srgb, var(--lux-glass-tint) 5%, transparent) !important; color:var(--lux-ivory) !important; }
body.theme-lux .mf-f-agree a, body.theme-lux .privacy-link{ color:var(--lux-gold-hi) !important; }
body.theme-lux select.mf-f-input option{ background:var(--lux-bg2); color:var(--lux-ivory); }

/* 모달(상담/방문/자료/오시는길) — 흰 카드 유지, 파란 포인트 → 네이비/골드 */
body.theme-lux .qa-title{ color:#0d2149; font-family:var(--serif); }
body.theme-lux .qa-tab.active{ background:#0d2149; border-color:#0d2149; box-shadow:0 4px 12px rgba(13,33,73,.28); }
body.theme-lux .qa-submit{ background:linear-gradient(135deg,var(--lux-gold-hi),var(--lux-gold)); color:#2a1e05; box-shadow:0 8px 22px rgba(201,162,74,.30); }
body.theme-lux .qa-input:focus{ border-color:var(--lux-gold); box-shadow:0 0 0 3px rgba(201,162,74,.16); }
body.theme-lux .dir-copy{ border-color:var(--lux-gold); color:var(--lux-gold-deep); }

/* ═══ 색 위계 보정 2차: 골드 상향 + 핵심 포인트 확실히 튀게 ═══ */
/* 제목 골드 헤어라인 굵고 넓게 */
body.theme-lux .mf-sec-h::after{ width:56px; height:3px; }

/* ── 자금계산기 전면 재테마 (안쪽 요소가 다크에 묻혀있던 문제 해결) ── */
body.theme-lux .mf-calc-row label{ color:var(--lux-mut); }
body.theme-lux .mf-calc select{ background:color-mix(in srgb, var(--lux-glass-tint) 6%, transparent) !important; border:1px solid var(--lux-line) !important; color:var(--lux-gold-hi) !important; }
body.theme-lux .mf-calc select option{ background:var(--lux-bg2); color:var(--lux-ivory); }
body.theme-lux .mf-calc input[type=range]{ accent-color:var(--lux-gold); }
body.theme-lux .mf-calc-price{ color:var(--lux-mut); }
body.theme-lux .mf-calc-price b{ color:var(--lux-gold-hi); }
body.theme-lux .mf-calc-break{ background:color-mix(in srgb, var(--lux-glass-tint) 4%, transparent) !important; border:1px solid var(--lux-glassbrd); }
body.theme-lux .mf-calc-item span{ color:var(--lux-mut); }
body.theme-lux .mf-calc-item em{ color:var(--lux-mut); }
body.theme-lux .mf-calc-item b{ color:var(--lux-ivory); }
body.theme-lux .mf-calc-sub{ color:var(--lux-mut); border-bottom-color:color-mix(in srgb, var(--lux-glass-tint) 14%, transparent); }
body.theme-lux .mf-calc-res-item{ background:color-mix(in srgb, var(--lux-glass-tint) 4%, transparent) !important; border:1px solid var(--lux-glassbrd); }
body.theme-lux .mf-calc-res-item span{ color:var(--lux-mut); }
body.theme-lux .mf-calc-res-item b{ color:var(--lux-ivory); }
body.theme-lux .mf-calc-res-hi{ background:linear-gradient(135deg,var(--lux-gold),var(--lux-gold-deep)) !important; }
body.theme-lux .mf-calc-res-hi span{ color:rgba(36,26,4,.82) !important; }
body.theme-lux .mf-calc-res-hi b{ color:#241a04 !important; }
body.theme-lux .mf-calc-note{ color:var(--lux-mut); }
/* ★ 핵심 포인트: 계약금 금액 — 밝은 골드 + 광채로 확 튀게 */
body.theme-lux .mf-cf-amount{ color:var(--lux-gold-key) !important; text-shadow:0 0 26px rgba(245,207,107,.40); }
body.theme-lux .mf-cf-label{ color:var(--lux-mut); }
body.theme-lux .mf-cf-rate{ color:var(--lux-mut); }
body.theme-lux .mf-cf-chip{ background:color-mix(in srgb, var(--lux-glass-tint) 5%, transparent) !important; border:1px solid var(--lux-glassbrd) !important; color:var(--lux-ivory) !important; }
body.theme-lux .mf-cf-chip b{ color:var(--lux-gold-hi) !important; }
body.theme-lux .mf-cf-cta{ background:linear-gradient(135deg,var(--lux-gold-hi),var(--lux-gold)) !important; color:#2a1e05 !important; box-shadow:0 8px 24px rgba(212,173,78,.38) !important; }

/* ── 핵심 숫자 강조: 잔여 % 도 밝은 골드 + 광채 ── */
body.theme-lux .mf-av-num b{ color:var(--lux-gold-key) !important; text-shadow:0 0 18px rgba(245,207,107,.32); }

/* 카드 테두리/그림자 살짝 강화 (골드 상향 체감) */
body.theme-lux .mf-brand-card, body.theme-lux .mf-opt-card, body.theme-lux .mf-comm-card,
body.theme-lux .mf-conv-card, body.theme-lux .mf-hl-card, body.theme-lux .mf-calc,
body.theme-lux .mf-av-card{ border-width:1px; }

/* 알림바 — 골드 헤어라인으로 구분감(빨강 제거, 네이비+골드) */
body.theme-lux #mf-notice-bar{ border-top:1px solid rgba(212,173,78,.35); border-bottom:1px solid rgba(212,173,78,.35); }

/* ═══════════════════════════════════════════════════════════════
   ✦✦ 강조색(포인트) 시스템 — 관리자 '테마 색상'에서 선택 (data-accent) ✦✦
   배경/큰 면적은 네이비+골드 유지. 강조색은 '포인트(액션)' 요소에만.
   ═══════════════════════════════════════════════════════════════ */
/* 기본 강조색 = 골드 (accent 미지정 시)
   --lux-accent-hi        : 어두운 배경 위에 '밝은 글자색'으로 쓰는 용도 (알림바·배지 등) — 원래 밝은 값 유지
   --lux-accent-btn-hi    : CTA 버튼처럼 '이 색 자체가 배경'이 되는 그라데이션의 밝은 쪽 — 글자색(--lux-accent-ink)과의
                             대비를 WCAG AA(4.5:1) 이상으로 검증해 살짝 어둡게 보정한 값 (밝은 hi를 그대로 쓰면 흰 글자가 번져 보임) */
body.theme-lux{ --lux-accent:#d4ad4e; --lux-accent-hi:#f5cf6b; --lux-accent-btn-hi:#f5cf6b; --lux-accent-deep:#a67f2b; --lux-accent-ink:#2a1e05; }
body.theme-lux[data-accent="emerald"]{ --lux-accent:#1a9c6e; --lux-accent-hi:#24b485; --lux-accent-btn-hi:#1a815f; --lux-accent-deep:#0f7357; --lux-accent-ink:#ffffff; }
body.theme-lux[data-accent="burgundy"]{ --lux-accent:#8a2942; --lux-accent-hi:#a6324f; --lux-accent-btn-hi:#a6324f; --lux-accent-deep:#6e2233; --lux-accent-ink:#ffffff; }
body.theme-lux[data-accent="teal"]{ --lux-accent:#0e7a86; --lux-accent-hi:#159aa8; --lux-accent-btn-hi:#12818d; --lux-accent-deep:#0b5e68; --lux-accent-ink:#ffffff; }
body.theme-lux[data-accent="terracotta"]{ --lux-accent:#c05a34; --lux-accent-hi:#d46a3f; --lux-accent-btn-hi:#bb542a; --lux-accent-deep:#a34526; --lux-accent-ink:#ffffff; }
body.theme-lux[data-accent="gold"]{ --lux-accent:#d4ad4e; --lux-accent-hi:#f5cf6b; --lux-accent-btn-hi:#f5cf6b; --lux-accent-deep:#a67f2b; --lux-accent-ink:#2a1e05; }

/* ═══ 위계(hierarchy): 강조색은 '메인 행동'에만 꽉 채움 ═══ */
/* 주인공(솔리드 강조색): 실제 전환 CTA — 신청하기·방문예약·계산기 상담·팝업/슬라이드업 */
body.theme-lux .mf-btn-submit,
body.theme-lux .mf-cf-cta,
body.theme-lux .qa-submit,
body.theme-lux .mf-accent-cta{
  background:linear-gradient(135deg,var(--lux-accent-btn-hi),var(--lux-accent-deep)) !important;
  color:var(--lux-accent-ink) !important;
  box-shadow:0 8px 22px -6px rgba(0,0,0,.45) !important;
}
/* ▲버그수정: 하단바 오른쪽 버튼 배경은 관리자(bottomBar.rightBtn.bgColor)에서 지정 가능 → !important 제거하여 인라인 색이 항상 반영되게 함 */
body.theme-lux .mf-bb-r{
  background:linear-gradient(135deg,var(--lux-accent-btn-hi),var(--lux-accent-deep));
  color:var(--lux-accent-ink) !important;
  box-shadow:0 8px 22px -6px rgba(0,0,0,.45) !important;
}
/* ▲버그수정(2026-07-30): 이 규칙이 위쪽 body.theme-lux .mf-hd-tel 규칙(라운드 지정 없음)과 겹치면서
   테두리(border)만 !important로 덧씌워지고 border-radius는 옛 규칙의 값(2px)이 그대로 남아,
   실제 화면에서 "각지고 테두리선이 있는" 버튼으로 보이는 문제가 있었음(관리자 미리보기와 불일치).
   → 배경/글자색은 관리자(header.btnBgColor/btnTextColor) 인라인 값이 항상 이기도록 그대로 두고,
   테두리(고스트 스타일)는 제거하고 라운드 처리를 명시해 미리보기와 실제 화면을 일치시킴. */
body.theme-lux .mf-hd-tel{
  border:none !important;
  box-shadow:none !important;
  border-radius:20px !important;
}
body.theme-lux .mf-bb-r .mf-bb-text, body.theme-lux .mf-bb-r .mf-bb-icon{ color:var(--lux-accent-ink) !important; }
/* ▲버그수정: 흰 글자 고정이라 골드처럼 밝은/중간톤 강조색에서 글자가 배경에 묻혔음 → 강조색별 대비색(ink)로 교체 */
body.theme-lux .qa-tab.active{ background:var(--lux-accent-deep) !important; border-color:var(--lux-accent-deep) !important; color:var(--lux-accent-ink) !important; }
body.theme-lux .mf-accent-text{ color:var(--lux-accent-hi) !important; }
/* 알림바 → 초록 블록이 아니라 네이비 + 강조색 글자(조용한 강조, 초록 면적 줄임) */
/* ▲버그수정: 배경/글자색은 관리자(noticeBar.bgColor/textColor)에서 지정 가능 → !important 제거하여 인라인 색이 항상 반영되게 함 */
body.theme-lux #mf-notice-bar{ background:var(--lux-bg2); color:var(--lux-accent-hi); }
/* ▲버그수정: 위에서 부모(#mf-notice-bar)에 인라인으로 지정된 관리자 글자색이 자식(.nb-inner/b)까지 상속되도록,
   자식 전용 고정 색 규칙은 제거함 (기존엔 이 규칙이 상속을 가로막아 강조색 설정이 무시됐음) */
/* 상태 배지(마감임박 등)도 강조색 아웃라인으로 통일 */
body.theme-lux .mf-av-badge{ color:var(--lux-accent-hi) !important; border-color:color-mix(in srgb, var(--lux-accent) 55%, transparent) !important; }
/* 비테마 폴백(테마 꺼져도 버튼이 안 사라지도록) */
.mf-accent-cta{ background:#d4ad4e; color:#2a1e05; }

/* 헤더 로고+텍스트: 가로 정렬 확실히 (로고 왼쪽 → 프로젝트명 오른쪽) */
.mf-hd-logo{ flex-wrap:nowrap; }
.mf-hd-logo img{ flex-shrink:0; }
.mf-hd-name{ white-space:nowrap; }

/* 잔여세대 '마감임박' 긴박감 — 빨강 채움 + 펄스 애니메이션 (분양중과 확실히 구분) */
body.theme-lux .mf-av-card.is-hot .mf-av-badge{
  background:#e5442f !important; color:#fff !important; border-color:#e5442f !important;
  font-weight:800; animation:avHotPulse 1.15s ease-in-out infinite;
}
body.theme-lux .mf-av-card.is-hot{ border-color:rgba(229,68,47,.55) !important; }
body.theme-lux .mf-av-card.is-hot .mf-av-num b{ color:#ff7a5c !important; text-shadow:0 0 18px rgba(229,68,47,.45); }
/* ▲가독성 수정(2026-07-30): 밝은 코랄레드(#ff7a5c)는 어두운 배경 전용 — 아이보리 테마의 밝은 카드 배경
   위에서는 채도는 높아도 명도차가 작아 잘 안 보였음. 긴박감(빨강)은 유지하되 더 짙은 톤으로 보정. */
body.theme-lux[data-theme-base="ivory"] .mf-av-card.is-hot .mf-av-num b{ color:#c62828 !important; text-shadow:none; }
@keyframes avHotPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(229,68,47,.55); }
  50%{ box-shadow:0 0 0 7px rgba(229,68,47,0); }
}
/* 분양중은 차분하게(대비) */
body.theme-lux .mf-av-card.is-ok .mf-av-badge{ background:transparent !important; color:var(--lux-accent-hi) !important; border-color:color-mix(in srgb,var(--lux-accent) 50%,transparent) !important; animation:none; }

/* ══════════════════════════════════════════════════════════
   PC(넓은 화면) 대응 — 이 사이트는 모바일 폭 기준으로 설계돼 있어서,
   그대로 두면 PC에서 글씨·표·배너가 화면 끝까지 밋밋하게 늘어나 보임.
   → 분양 홈페이지 업계에서 흔히 쓰는 방식대로, 배경은 화면 전체를 채우되
   실제 내용(글자·표·이미지)만 중앙의 고정폭(560px) 안에 담기게 함.
   (모바일에서는 이 구간이 전혀 적용되지 않아 기존 화면 그대로 유지됨)
══════════════════════════════════════════════════════════ */
@media (min-width: 641px) {
  .mf-hd,
  .mf-hero,
  .hero-gif-section,
  .mf-sec,
  .mf-form-sec,
  #mf-slideup-banner {
    padding-left: max(20px, calc((100% - 560px) / 2)) !important;
    padding-right: max(20px, calc((100% - 560px) / 2)) !important;
    box-sizing: border-box;
  }
  /* 배경영상 히어로는 PC에서도 영상 자체는 화면 끝까지 꽉 채우고,
     타이틀/뱃지 등 텍스트만 중앙 560px 폭 안으로 제한 (다른 섹션과 통일감 유지) */
  .mf-hero.mf-hero--video {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .mf-hero.mf-hero--video .mf-hero-content {
    padding-left: max(20px, calc((100% - 560px) / 2));
    padding-right: max(20px, calc((100% - 560px) / 2));
    box-sizing: border-box;
  }
}

/* ============================================================
   [가독성 자동 보정 v2 · 2026-07] 테마(body.theme-lux[data-theme-base=ivory] 등)의
   규칙과 "같은 급 선택자 + 파일 최하단"으로 우선순위를 확보해, 어떤 테마에서도
   히어로 제목·상담 카운터가 절대 묻히지 않게 강제. (v1은 우선순위가 낮아 밀렸음)
   ============================================================ */
/* 히어로: 어떤 base 테마에서도 진한 네이비 배경 + 흰 제목 유지 */
body.theme-lux .mf-hero,
body.theme-lux .mf-hero:not(.mf-hero--video){
  background:radial-gradient(120% 80% at 50% -10%, rgba(212,173,78,.14), transparent 60%), linear-gradient(180deg,#0a1a4e 0%,#0c399f 48%,#123e86 100%) !important;
}
body.theme-lux .mf-hero .mf-hero-title{
  color:#ffffff !important;
  text-shadow:0 2px 12px rgba(0,0,0,.6), 0 1px 3px rgba(0,0,0,.6) !important;
}
body.theme-lux .mf-hero .mf-hero-badge{ background:rgba(255,255,255,.14) !important; color:#ffd600 !important; border:1px solid rgba(255,214,0,.4) !important; }
body.theme-lux .mf-hero .mf-hero-sub-box{ background:#ffd600 !important; color:#0c399f !important; border:none !important; }
body.theme-lux .mf-hero .mf-hero-stars{ color:#ffd600 !important; }

/* 상담 카운터 바: 어떤 테마에서도 어두운 배경 + 흰 글자 (테마 규칙보다 우선) */
body.theme-lux #mf-counter-bar,
body.theme-lux .mf-fixed-counter,
#mf-counter-bar, .mf-fixed-counter{
  background-color:#111111 !important;
  color:#ffffff !important;
  text-shadow:0 1px 2px rgba(0,0,0,.5) !important;
}
body.theme-lux #mf-counter-bar .mf-counter-num,
.mf-fixed-counter .mf-counter-num, .mf-counter-num{ color:#ffd700 !important; }

/* 입지환경 등 세로로 긴 이미지: 16:10 강제 크롭 해제 → 전체가 잘리지 않고 보이게 */
.mf-map-img{ aspect-ratio:auto !important; height:auto !important; max-height:none !important; object-fit:contain !important; }

/* 커뮤니티 이미지들 세로 간격 정리 (자연 비율로 바뀌며 여러 장이 붙을 때 보기 좋게) */
.mf-comm-imgs{ display:flex; flex-direction:column; gap:12px; }

/* 상단 헤더 로고(텍스트): 너무 크거나 묻히지 않게 — 밝은 글자 + 적정 크기 + 세리프 제거 */
.mf-hd-name,
body.theme-lux .mf-hd-name{
  font-family:inherit !important;
  font-size:15px !important;
  font-weight:800 !important;
  letter-spacing:0 !important;
  color:#f5efe2 !important;
  white-space:nowrap !important;
  text-shadow:0 1px 2px rgba(0,0,0,.35) !important;
}
/* 헤더 로고 이미지 업로드 시: 헤더 높이에 맞춰 자동 축소(너무 커지지 않게) */
.mf-hd-logo img{ max-height:34px !important; width:auto !important; object-fit:contain !important; }


/* ══════════════════════════════════════════════════════════════
   이벤트 기능 스타일 — 관리자 '이벤트' 탭을 켰을 때만 화면에 나타납니다.
   꺼져 있으면 아래 클래스를 쓰는 요소 자체가 생성되지 않으므로
   다른 현장에는 아무 영향이 없습니다.
   ══════════════════════════════════════════════════════════════ */

/* 앵커 이동을 부드럽게 (기존엔 뚝 끊기듯 점프했음) */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ── ① 잔여세대 아래 안내 블록 ── */
.mf-evt-sec { padding: 0 16px 34px; background: inherit; }
.mf-evt-card {
  max-width: 520px; margin: 0 auto; overflow: hidden;
  background: linear-gradient(160deg, #0d2149, #12234d);
  border: 1px solid rgba(212,173,78,.42); border-radius: 14px;
  box-shadow: 0 10px 30px rgba(6,16,40,.28);
}
.mf-evt-imgwrap { display: block; line-height: 0; }
.mf-evt-imgwrap img { width: 100%; height: auto; display: block; }
.mf-evt-body { padding: 20px 20px 22px; text-align: center; }
.mf-evt-name {
  margin: 0; font-size: 17px; font-weight: 900; color: #d4ad4e;
  letter-spacing: .2px; line-height: 1.45;
}
.mf-evt-benefit { margin: 9px 0 0; font-size: 14.5px; color: #fff; font-weight: 700; line-height: 1.6; }
.mf-evt-period  { margin: 7px 0 0; font-size: 12.5px; color: rgba(255,255,255,.72); line-height: 1.6; }
.mf-evt-cta {
  display: block; width: 100%; margin: 17px 0 0; padding: 15px 20px;
  background: #d4ad4e; color: #2a1e05; border: 0; border-radius: 9px;
  font-family: inherit; font-size: 15.5px; font-weight: 900; letter-spacing: .3px;
  cursor: pointer; transition: filter .15s, transform .12s;
}
.mf-evt-cta:hover  { filter: brightness(1.07); }
.mf-evt-cta:active { transform: translateY(1px); }
.mf-evt-note { margin: 12px 0 0; font-size: 11.5px; color: rgba(255,255,255,.6); line-height: 1.65; }
.mf-evt-note.in-form { color: #8b93a4; margin-top: 14px; text-align: center; }

/* ── ② 상담 폼 안 이벤트 참여 영역 ── */
.mf-evt-form {
  margin: 0 0 20px; border: 1.5px solid #e2e6ee; border-radius: 12px;
  overflow: hidden; background: #fbfcfe; transition: box-shadow .3s, border-color .3s;
}
.mf-evt-form.mf-evt-flash { border-color: #d4ad4e; box-shadow: 0 0 0 4px rgba(212,173,78,.22); }
.mf-evt-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 15px 16px; background: #0d2149; border: 0;
  font-family: inherit; text-align: left; cursor: pointer; color: #fff;
}
.mf-evt-toggle-txt { display: block; min-width: 0; }
.mf-evt-toggle-txt b { display: block; font-size: 14px; font-weight: 900; color: #d4ad4e; line-height: 1.45; }
.mf-evt-toggle-txt i { display: block; font-style: normal; font-size: 12.5px;
  color: rgba(255,255,255,.82); margin-top: 4px; line-height: 1.55; }
.mf-evt-arrow { flex: none; font-size: 15px; color: #d4ad4e; transition: transform .25s; }
.mf-evt-toggle.is-open .mf-evt-arrow { transform: rotate(180deg); }
.mf-evt-panel { padding: 16px 16px 18px; }
.mf-evt-q { margin: 0 0 11px; font-size: 13.5px; font-weight: 800; color: #23293a; }

.mf-evt-opt {
  display: flex; align-items: flex-start; gap: 11px; margin-bottom: 9px;
  padding: 13px 14px; background: #fff; border: 1.5px solid #e2e6ee;
  border-radius: 10px; cursor: pointer; transition: border-color .15s, background .15s;
}
.mf-evt-opt:hover { border-color: #c2cadb; }
.mf-evt-opt input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: #0d2149; }
.mf-evt-opt span   { display: block; min-width: 0; }
.mf-evt-opt span b { display: block; font-size: 14px; font-weight: 800; color: #23293a; line-height: 1.4; }
.mf-evt-opt span i { display: block; font-style: normal; font-size: 12px;
  color: #79808f; margin-top: 3px; line-height: 1.5; }
.mf-evt-opt:has(input:checked) { border-color: #0d2149; background: #f4f8ff; }

.mf-evt-fields {
  margin-top: 12px; padding: 4px 14px 15px;
  background: #fff; border: 1px solid #e6eaf2; border-radius: 10px;
}
.mf-evt-form .mf-f-label.mf-evt-sub { margin-top: 13px; }
.mf-evt-optional { color: #9aa1b0; font-weight: 500; font-size: 11.5px; margin-left: 3px; }
.mf-evt-help { margin: 7px 0 0; font-size: 11.5px; color: #79808f; line-height: 1.65; }

/* 데스크톱에서 카드가 과하게 넓어지지 않도록 */
@media (min-width: 768px) {
  .mf-evt-card { max-width: 560px; }
  .mf-evt-name { font-size: 19px; }
}

/* 뉴스 카드 본문 — content가 있을 때만 나타납니다(기존 현장은 영향 없음) */
.mf-news-body {
  margin: 10px 0 12px; font-size: 13.5px; line-height: 1.85; color: #4a5162;
  word-break: keep-all; text-align: left;
}