@charset "utf-8";
/* =========================================================
   EROOM 반응형 보정 (PC 화면을 휴대폰·태블릿에서도 그대로 보이도록)
   - 기존 페이지 코드는 건드리지 않고, 이 파일에서만 화면 폭에 맞게 보정합니다.
   - PC(901px 이상)에서는 기존 모습 그대로입니다.
========================================================= */

/* 고도몰 기본 레이아웃의 고정 폭(1450px / 1200px) 해제 */
#wrap{min-width:0 !important;}
html,body{max-width:100%;}
body{overflow-x:hidden;}
@media (max-width:1240px){
  .sub_content,.content_info,.foot_list ul,.foot_cont,.foot_certify{width:auto !important;max-width:1200px;padding-left:20px;padding-right:20px;box-sizing:border-box;}
  #contents .sub_content{padding-left:0;padding-right:0;}
}

/* ---------------- 상단 : 모바일 메뉴 버튼 ---------------- */
.eroom-menu-btn{display:none;}
#eroomMobileNav{display:none;}

@media (max-width:900px){
  .eroom-header-inner{width:auto !important;padding:0 16px;height:64px !important;}
  .eroom-logo strong{font-size:24px !important;}
  .eroom-logo span{font-size:9px !important;margin-top:5px !important;}
  .eroom-header-right{gap:8px;}
  .eroom-consult-btn{min-width:0 !important;height:40px !important;padding:0 14px !important;font-size:13px !important;}
  .eroom-menu-btn{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin-left:6px;padding:0;border:0;background:none;cursor:pointer;}
  .eroom-menu-btn span,.eroom-menu-btn span:before,.eroom-menu-btn span:after{display:block;position:relative;width:22px;height:2px;background:#111;border-radius:2px;transition:.2s;}
  .eroom-menu-btn span:before,.eroom-menu-btn span:after{content:"";position:absolute;left:0;}
  .eroom-menu-btn span:before{top:-7px;}
  .eroom-menu-btn span:after{top:7px;}
  body.eroom-nav-open .eroom-menu-btn span{background:transparent;}
  body.eroom-nav-open .eroom-menu-btn span:before{top:0;transform:rotate(45deg);}
  body.eroom-nav-open .eroom-menu-btn span:after{top:0;transform:rotate(-45deg);}

  #eroomMobileNav{position:fixed;left:0;right:0;top:64px;bottom:0;z-index:100000;overflow-y:auto;background:#fff;border-top:1px solid #eee;padding:8px 20px 120px;font-family:'Noto Sans KR','Pretendard','Malgun Gothic',sans-serif;}
  body.eroom-nav-open #eroomMobileNav{display:block;}
  body.eroom-nav-open{overflow:hidden;}
  #eroomMobileNav .m-group{border-bottom:1px solid #eee;padding:6px 0;}
  #eroomMobileNav .m-group > a{display:block;padding:14px 0;font-size:18px;font-weight:600;color:#111;text-decoration:none;}
  #eroomMobileNav .m-sub{display:flex;flex-wrap:wrap;gap:8px;padding:0 0 14px;}
  #eroomMobileNav .m-sub a{padding:9px 14px;border-radius:20px;background:#f7f6f2;color:#333;font-size:14px;text-decoration:none;}
  #eroomMobileNav .m-call{display:block;margin-top:24px;padding:15px;border-radius:6px;background:#918980;color:#fff;text-align:center;font-size:16px;font-weight:600;text-decoration:none;}

  /* ---------------- 우측 퀵메뉴 -> 하단 고정 바 ---------------- */
  .eroom-quick-menu{top:auto !important;bottom:0 !important;left:0 !important;right:0 !important;width:100% !important;transform:none !important;display:flex;background:#fff;border-top:1px solid #ded8ce;box-shadow:0 -6px 18px rgba(0,0,0,.06);padding-bottom:env(safe-area-inset-bottom,0);}
  .eroom-quick-menu a{flex:1;width:auto !important;min-height:58px !important;margin:0 !important;padding:9px 4px 7px !important;border:0 !important;border-left:1px solid #eee !important;border-radius:0 !important;box-shadow:none !important;}
  .eroom-quick-menu a:first-child{border-left:0 !important;}
  .eroom-quick-menu a.eroom-quick-top{display:none !important;}
  .eroom-quick-menu .eroom-quick-icon{font-size:18px !important;margin-bottom:4px !important;}
  .eroom-quick-menu .eroom-quick-text{font-size:12px !important;}
  .eroom-quick-menu .eroom-quick-text br{display:none;}
  body{padding-bottom:calc(60px + env(safe-area-inset-bottom,0px));}

  /* ---------------- 하단 정보 ---------------- */
  .content_info{padding:30px 20px 10px !important;}
  .content_info > div{float:none !important;width:auto !important;margin:0 0 24px !important;}
  .content_info h3{margin-bottom:12px !important;}
  .foot_list ul{padding:0 !important;}
  .foot_list li{display:inline-block;margin:0 12px 8px 0;}
  .foot_cont{text-align:left !important;padding:24px 20px 0 !important;}
  .foot_cont .foot_info_list{height:auto !important;}
  .foot_cont .foot_info_list dl{display:block !important;background:none !important;padding-left:0 !important;}
  .foot_cont .foot_info_list dt,.foot_cont .foot_info_list dd{display:inline;}
  .foot_cont .foot_info address > *{display:block;}
  .foot_cont .foot_info address strong{background:none !important;}
  .foot_certify{padding:0 20px;}
}

/* ---------------- 페이지별 보정 ---------------- */
@media (max-width:1240px){
  .scroll_wrap{width:auto !important;}
}
@media (max-width:900px){
  /* 페이지마다 있는 오른쪽 세로 퀵메뉴: 휴대폰에서는 내용을 가려서 숨기고, 하단 고정 바(카톡·톡톡·전화)로 대신함 */
  .eroom-home-v1 .eh-quick,.eroom-about-premium .eap-quick,.eroom-fr-v12 .fr-quick,#erInteriorEstimateCompact .er-quick,
  .portfolio-quick,.eroom-product-premium .epp-quick,.eroom-service-premium .esp-quick,.ev21-side-quick{display:none !important;}
  /* 공지사항 표 */
  .er-doc table{width:100% !important;table-layout:auto;}
}

/* ---------------- 휴대폰 글자 줄바꿈 정리 ----------------
   한글이 단어 중간에서 잘려 한두 글자만 다음 줄로 떨어지지 않도록,
   큰 제목은 화면 폭에 맞춰 크기를 줄이고 줄 길이를 고르게 맞춤 */
@media (max-width:900px){
  body :is(h1,h2,h3,h4,h5,p,li,dt,dd,th,td,strong,em,span,a,label,button,small,div){
    word-break:keep-all;
    overflow-wrap:break-word;
  }
  body :is(h1,h2,h3){
    text-wrap:balance;
    max-width:100%;
  }
}

/* ---------------- 휴대폰 제목 크기 통일 ----------------
   페이지마다 제목 크기가 달라 휴대폰에서 한두 글자씩 밑으로 떨어지던 것을
   화면 폭에 맞는 크기로 맞춤 (PC 화면에는 영향 없음) */
@media (max-width:600px){
  body h1{font-size:clamp(25px,7.2vw,32px) !important;line-height:1.35 !important;letter-spacing:-.03em !important;}
  body h2{font-size:clamp(21px,5.9vw,27px) !important;line-height:1.4 !important;letter-spacing:-.03em !important;}
}

/* 상품 비교표 : 휴대폰에서는 첫 칸(구분)을 고정하고 좌우로 밀어서 보기 */
@media (max-width:900px){
  .eroom-product-premium .epp-compare-scroll{-webkit-overflow-scrolling:touch;position:relative;}
  .eroom-product-premium .epp-compare-table th:first-child,
  .eroom-product-premium .epp-compare-table td:first-child{position:sticky;left:0;z-index:2;width:96px !important;min-width:96px;}
  .eroom-product-premium .epp-compare-panel-head::after{content:"← 좌우로 밀어서 비교해 보세요";display:block;margin-top:6px;font-size:12px;color:#9a9087;}
}