/* momlawsong.com 공통 상단바·푸터·하단 상담바 — 시안 E (site_chrome_e.py 가 넣는 마크업 전용, ec- 접두사로 페이지 CSS와 분리) */
.ec-hd,.ec-mnav,.ec-ft,.ec-quick,.ec-bar,.ec-mbar,.ec-toast{
  --ec-cream:#F4EFE4;--ec-green:#1F3A2E;--ec-green-d:#17302A;--ec-sage:#CFE1D5;--ec-kakao:#FEE500;--ec-pad:40px;
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif;
  letter-spacing:-.03em;-webkit-font-smoothing:antialiased;box-sizing:border-box;line-height:1.6;text-align:left}
.ec-hd *,.ec-mnav *,.ec-ft *,.ec-quick *,.ec-bar *,.ec-mbar *{box-sizing:border-box}
.ec-hd svg,.ec-mnav svg,.ec-quick svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ec-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ec-nw{white-space:nowrap}

/* 상단바: 하위 페이지는 흰 바탕으로 위에 붙고, 메인은 사진 위 투명 → 스크롤하면 흰 바탕 */
.ec-hd{position:sticky;top:0;z-index:60;margin:0;background:#fff;color:var(--ec-green);box-shadow:0 6px 24px rgba(31,58,46,.08);transition:background .3s,box-shadow .3s,color .3s}
.ec-hd--home{position:fixed;left:0;right:0;background:transparent;color:#fff;box-shadow:none}
.ec-hd--home.is-solid{background:#fff;color:var(--ec-green);box-shadow:0 6px 24px rgba(31,58,46,.08)}
.ec-in{display:flex;align-items:center;gap:20px;height:76px;padding:0 55px;transition:height .3s}
.ec-hd--home .ec-in{height:88px}
.ec-hd--home.is-solid .ec-in{height:76px}
.ec-logo{flex:none;display:block}
.ec-logo img{display:block;width:186px;height:auto}
.ec-logo .ec-lc{display:none}
.ec-hd--home:not(.is-solid) .ec-lc{display:block}
.ec-hd--home:not(.is-solid) .ec-lg{display:none}
.ec-nav{display:flex;margin:0 auto;font-size:max(16px,1.04vw);font-weight:500}  /* 로엘 실측: 1920=19.97px, 1600=16.64px, 1440 이하 16px */
.ec-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 clamp(12px,1.6vw,40px);color:inherit;text-decoration:none;white-space:nowrap;transition:opacity .2s}
.ec-nav a:hover{opacity:.7}
.ec-nav a[aria-current="page"]{font-weight:700;text-decoration:underline;text-underline-offset:8px;text-decoration-thickness:1px}
.ec-ic{display:flex;align-items:center;gap:14px}
.ec-tel{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;min-width:44px;font-size:17px;font-weight:700;color:inherit;text-decoration:none;white-space:nowrap}
.ec-tel svg{width:20px;height:20px}
.ec-menu{width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;background:none;color:inherit;cursor:pointer}
@media(max-width:1400px){.ec-tel span{display:none}}
@media(max-width:1250px){.ec-nav a{padding:0 10px}}
@media(max-width:1100px){.ec-nav{display:none}.ec-ic{margin-left:auto}.ec-in{padding:0 32px}}
@media(max-width:760px){.ec-in,.ec-hd--home .ec-in,.ec-hd--home.is-solid .ec-in{height:64px;padding:0 19px;gap:12px}.ec-logo img{width:140px}}

/* 전체 메뉴 */
.ec-mnav{position:fixed;inset:0;z-index:90;background:rgba(18,38,31,.98);color:var(--ec-cream);overflow:auto}
.ec-mnav[hidden]{display:none!important}
.ec-mnav-in{max-width:520px;margin:0 auto;padding:28px 28px 40px;display:flex;flex-direction:column;gap:28px}
.ec-x{align-self:flex-end;width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;background:none;color:inherit;cursor:pointer}
.ec-mnav img{width:150px;height:auto}
.ec-mnav nav{display:flex;flex-direction:column}
.ec-mnav nav a{font-size:22px;font-weight:700;padding:16px 0;border-bottom:1px solid rgba(244,239,228,.15);color:inherit;text-decoration:none}
.ec-cta{display:flex;flex-direction:column;gap:10px}
.ec-btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:56px;padding:0 28px;border-radius:6px;font-size:17px;font-weight:700;text-decoration:none;white-space:nowrap}
.ec-btn-kakao{background:var(--ec-kakao);color:var(--ec-green)}
.ec-btn-line{border:1px solid rgba(244,239,228,.6);color:var(--ec-cream)}

/* 푸터 */
.ec-ft{background:var(--ec-green-d);color:rgba(255,255,255,.62);padding:64px 0 70px;font-size:14px;line-height:1.9;margin:0}
.ec-ft-in{max-width:1680px;margin:0 auto;padding:0 var(--ec-pad)}
.ec-ft img{display:block;width:170px;height:auto;margin:0 0 22px}
.ec-ft p{margin:0;color:inherit;font-size:14px}
.ec-ft a{color:rgba(255,255,255,.85);text-decoration:none}
.ec-ft a:hover{text-decoration:underline}
.ec-ft .ec-links{margin-top:14px}
.ec-ft .ec-links a{display:inline-block;padding:12px 0}
.ec-ft .ec-note{margin-top:10px;max-width:920px;color:rgba(255,255,255,.5);font-size:13px;line-height:1.8}
.ec-ft .ec-made{margin-top:12px;font-size:13px;color:rgba(255,255,255,.45)}
@media(max-width:760px){.ec-ft{--ec-pad:20px;padding:48px 0 56px}.ec-ft img{width:140px}}

/* 우측 퀵바 (1500px 이상) */
.ec-quick{position:fixed;right:30px;top:440px;z-index:30;display:flex;flex-direction:column;align-items:center;gap:14px}
.ec-pill{width:80px;background:var(--ec-green-d);border-radius:40px;padding:18px 0;display:flex;flex-direction:column;gap:16px;color:#fff;box-shadow:0 6px 20px rgba(0,0,0,.18)}
.ec-pill a{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;font-weight:600;color:#fff;text-decoration:none}
.ec-pill a span{width:36px;height:36px;border-radius:50%;background:#fff;color:var(--ec-green);display:grid;place-items:center}
.ec-pill svg{width:20px;height:20px}
.ec-rec{width:80px;height:80px;border-radius:50%;color:var(--ec-green);display:grid;place-items:center;text-align:center;font-size:13px;font-weight:800;line-height:1.3;text-decoration:none;box-shadow:0 6px 20px rgba(0,0,0,.18);
  background:linear-gradient(120deg,#CFE1D5,#F4EFE4,#A9C0A6,#CFE1D5);}
@media(max-width:760px){.ec-quick{display:none}}   /* 모바일은 하단 전화·카톡 바 */

/* 하단 상담바 (761px 이상, 스크롤 300px 뒤 등장) */
.ec-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;height:84px;display:flex;margin:0;background:var(--ec-green-d);color:#fff;transform:translateY(100%);transition:transform .35s}
.ec-bar.is-show{transform:none}
.ec-bar-l{flex:none;display:flex;align-items:center;gap:40px;padding:0 70px 0 max(var(--ec-pad),calc(50% - 800px));background:var(--ec-green);clip-path:polygon(0 0,100% 0,calc(100% - 60px) 100%,0 100%)}
.ec-bar-tel,.ec-bar-kk{color:#fff;text-decoration:none;white-space:nowrap}
.ec-bar-tel small{display:block;font-size:14px;font-weight:400;opacity:.85}
.ec-bar-tel b{font-size:28px;font-weight:700;letter-spacing:-.01em}
.ec-bar-kk{display:flex;align-items:center;gap:10px;font-size:24px;font-weight:700}
.ec-bar-kk span{background:var(--ec-kakao);color:var(--ec-green);font-size:12px;font-weight:900;border-radius:50%;width:40px;height:40px;display:grid;place-items:center}
.ec-bar-r{margin-left:auto;display:flex;align-items:center;gap:10px;min-width:0;padding-right:max(var(--ec-pad),calc(50% - 800px))}
.ec-f{width:clamp(140px,12vw,220px);height:44px;border:0;border-radius:6px;background:#fff;color:var(--ec-green);padding:0 14px;font:inherit;font-size:14px;outline:none}
.ec-f:focus{box-shadow:0 0 0 3px var(--ec-sage)}
.ec-f-w{width:clamp(160px,15vw,280px)}
.ec-agree{flex:none;display:flex;align-items:center;gap:8px;min-height:44px;font-size:13px;line-height:1.3;margin:0 0 0 6px;cursor:pointer}
.ec-agree input{width:18px;height:18px;accent-color:var(--ec-sage)}
.ec-agree-more{flex:none;font-size:12px;color:rgba(255,255,255,.7);text-decoration:underline;margin-right:6px;min-height:44px;display:inline-flex;align-items:center}
.ec-go{flex:none;height:44px;padding:0 26px;border:0;border-radius:6px;background:var(--ec-sage);color:var(--ec-green);font:inherit;font-size:16px;font-weight:800;white-space:nowrap;cursor:pointer}
.ec-go[disabled]{opacity:.6;cursor:default}
@media(max-width:1400px){.ec-f-w{display:none}.ec-bar-tel b{font-size:24px}.ec-bar-kk{font-size:20px}}
@media(max-width:1250px){.ec-bar-l{gap:24px}}
@media(max-width:1100px){.ec-bar{--ec-pad:32px}.ec-bar-l{padding-right:50px}.ec-bar-tel b{font-size:22px}.ec-bar-kk{font-size:18px}.ec-f{width:130px}}

/* 모바일 하단 4칸 (760px 이하) */
.ec-mbar{display:none}
.ec-space{height:84px}
@media(max-width:760px){
  .ec-bar{display:none}
  .ec-space{height:56px}
  .ec-mbar{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:40;height:56px;margin:0;background:var(--ec-green);color:#fff;font-size:15px;font-weight:700;text-align:center}
  .ec-mbar a{display:flex;align-items:center;justify-content:center;height:100%;color:#fff;text-decoration:none;white-space:nowrap}
  .ec-mbar a+a{border-left:1px solid rgba(255,255,255,.35)}
  .ec-mbar a.ec-k{color:var(--ec-kakao)}
}

/* 접수 안내 */
.ec-toast{position:fixed;left:50%;bottom:110px;transform:translateX(-50%);z-index:95;width:max-content;max-width:calc(100% - 40px);background:var(--ec-green);color:#fff;padding:16px 24px;border-radius:10px;font-size:15px;line-height:1.6;box-shadow:0 6px 20px rgba(0,0,0,.18)}
.ec-toast[hidden]{display:none}
@media(max-width:760px){.ec-toast{bottom:76px}}

/* 상담 챗봇(chat.js) 위치: 하단바 위로. chat.js 가 나중에 넣는 #id 규칙보다 우선하도록 #sjh-chat 을 붙인다 */
#sjh-chat #sjh-launcher{bottom:108px}
#sjh-chat #sjh-panel{bottom:100px;height:min(620px,calc(100vh - 124px))}
@media(max-width:760px){
  /* 모바일: 글자 빼고 작은 원형 아이콘만 — 상담 버튼·FAQ 를 덜 가리게 */
  #sjh-chat #sjh-launcher{left:auto;right:12px;bottom:68px;width:48px;height:48px;padding:0;justify-content:center;gap:0;box-shadow:0 4px 14px rgba(0,0,0,.22)}
  #sjh-chat #sjh-launcher > span:last-child{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  #sjh-chat #sjh-launcher .sjh-ic{width:22px;height:22px}
  #sjh-chat #sjh-launcher .sjh-dot{top:0;left:0;width:10px;height:10px}
  #sjh-chat #sjh-launcher{transition:opacity .2s,transform .2s}
  #sjh-chat #sjh-launcher.ec-chat-off{opacity:0;transform:scale(.6);pointer-events:none}
  #sjh-chat #sjh-panel{left:8px;right:8px;bottom:64px;width:auto;max-width:none;height:min(76vh,600px)}
}

/* 강조색 통일 (home-e.css 와 같은 값) — 로엘처럼 강조 버튼·하단바·퀵 원형 버튼을 한 가지 초록으로 */
.ec-hd,.ec-mnav,.ec-quick,.ec-bar,.ec-mbar,.ec-toast{--ec-accent:#0A9F5C}
.ec-btn-kakao{background:var(--ec-accent);color:#fff}
.ec-btn-kakao::before{content:"";flex:none;width:20px;height:20px;border-radius:50%;background:#FEE500 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23191919' d='M12 5.5c-4 0-7.2 2.5-7.2 5.6 0 2 1.3 3.7 3.3 4.7l-.6 2.3c-.1.3.3.6.6.4l2.7-1.8c.4.1.8.1 1.2.1 4 0 7.2-2.5 7.2-5.7S16 5.5 12 5.5z'/%3E%3C/svg%3E") center/15px no-repeat}
.ec-bar-l{background:var(--ec-accent)}
.ec-go{background:var(--ec-accent);color:#fff}
.ec-go:hover{background:#088a4f}
.ec-rec{color:#fff;background:var(--ec-accent)}
.ec-agree input{accent-color:var(--ec-accent)}
.ec-f:focus{box-shadow:0 0 0 3px rgba(10,159,92,.45)}
@media(max-width:760px){
  .ec-mbar{background:var(--ec-accent)}
  .ec-mbar a.ec-k{color:#fff}
  .ec-mbar a+a{border-left-color:rgba(255,255,255,.4)}
}

/* 10/22 탁님: 카톡 버튼 앞 아이콘 제거 · 모바일 하단은 전화·카톡 2개만 */
.ec-btn-kakao::before{content:none!important;display:none!important}
@media(max-width:760px){
  .ec-mbar{grid-template-columns:repeat(2,1fr);font-size:16px}
}

/* 마우스 올림 효과: 움직임 없이 색만 .15s (메뉴 글자·빠른버튼 원이 강조색으로) */
@media (hover:hover) and (pointer:fine){
  .ec-nav a,.ec-mnav a,.ec-pill a span,.ec-rec,.ec-go,.ec-ft a{transition:color .15s ease-out,background-color .15s ease-out,filter .15s ease-out,box-shadow .15s ease-out}
  .ec-nav a:hover{opacity:1;color:var(--ec-accent)}
  .ec-mnav a:not(.ec-btn):hover{color:var(--ec-accent)}
  .ec-mnav .ec-btn-kakao:hover,.ec-rec:hover,.ec-go:hover{filter:brightness(1.1)}
  .ec-mnav .ec-btn-line:hover{box-shadow:inset 640px 0 0 0 var(--ec-accent);border-color:transparent;color:#fff}
  .ec-pill a:hover span{background:var(--ec-accent);color:#fff}
  .ec-ft a:hover{color:#fff}
}

/* ---- 떠 있는 버튼 정리 (10/22 탁님: 맥북에서 상담신청 잘림·챗봇 위치 어색) ----
   오른쪽 아래 한 줄: 빠른버튼 묶음 → 상담신청 → 챗봇. 위(440px)가 아니라 아래 기준으로 붙여 화면 높이와 상관없이 안 잘린다.
   기준선 = 하단 상담바(84px) 위 20px. 챗봇은 왼쪽 히어로 버튼 밑에서 이 줄 맨 아래로 옮기고, 상담신청과 같은 원형으로 맞춘다 */
@media(min-width:761px){
  .ec-quick{top:auto;bottom:190px}                       /* 104 + 챗봇 72 + 간격 14 */
  #sjh-chat #sjh-launcher{left:auto;right:34px;bottom:104px;width:72px;height:72px;padding:0;border-radius:50%;
    flex-direction:column;justify-content:center;gap:3px;font-size:12px;font-weight:700}
  #sjh-chat #sjh-launcher > span:last-child{font-size:0}
  #sjh-chat #sjh-launcher > span:last-child::after{content:"챗봇";font-size:12px}
  #sjh-chat #sjh-launcher .sjh-ic{width:24px;height:24px}
  #sjh-chat #sjh-launcher .sjh-dot{top:2px;left:4px}
  #sjh-chat #sjh-panel{left:auto;right:30px;bottom:104px}
}
/* 높이가 짧은 창(노트북 + 탭·북마크바, 윈도우 배율 150% 등): 빠른버튼 글자 빼고 줄이고, 더 짧으면 숨김(하단 상담바에 같은 기능) */
@media(min-width:761px) and (max-height:640px){
  .ec-pill{gap:10px;padding:12px 0}
  .ec-pill a{font-size:0;gap:0}
  .ec-rec{width:64px;height:64px;font-size:11px}
}
@media(min-width:761px) and (max-height:520px){.ec-quick{display:none}}
/* 챗봇 창은 상단바(88px) 아래에서 끝나게 */
@media(min-width:761px){#sjh-chat #sjh-panel{height:min(620px,calc(100vh - 200px))}}

/* 빠른버튼 묶음은 PC 전 화면에서 보인다(10/22 탁님). 옆 여백이 80px 묶음보다 좁은 1760px 미만에선
   작게 줄여 오른쪽 끝에 붙인다 — 본문 오른쪽 끝을 덜 가리게. 1100px 이하는 아이콘만 */
@media(min-width:761px) and (max-width:1759px){
  .ec-quick{right:10px;bottom:176px;gap:12px}            /* 104 + 챗봇 60 + 간격 12 */
  .ec-pill{width:64px;padding:14px 0;gap:12px}
  .ec-pill a{font-size:11px;gap:5px}
  .ec-pill a span{width:32px;height:32px}
  .ec-pill svg{width:18px;height:18px}
  .ec-rec{width:64px;height:64px;font-size:12px}
  #sjh-chat #sjh-launcher{right:12px;width:60px;height:60px}
  #sjh-chat #sjh-launcher > span:last-child::after{font-size:11px}
  #sjh-chat #sjh-panel{right:10px}
}
@media(min-width:761px) and (max-width:1100px){            /* 태블릿 가로: 아이콘만·더 작게(성공사례 화살표 가운데가 안 가리게) */
  .ec-quick{right:6px;bottom:168px}                        /* 104 + 챗봇 52 + 12 */
  .ec-pill{width:56px}
  .ec-pill a{font-size:0;gap:0}
  .ec-rec{width:56px;height:56px;font-size:11px}
  #sjh-chat #sjh-launcher{right:8px;width:52px;height:52px}
  #sjh-chat #sjh-launcher > span:last-child::after{content:none}
}
@media(min-width:761px) and (max-height:640px){.ec-pill a{font-size:0;gap:0}}
