/* 문의 띠·압축 푸터 공통 스타일 (2026-10-19 생성). 정적 화면(cases.html)에 실제 적용된 규칙을 모아 React 화면에서도 같게.
   원본은 unified-contact.css·design-fidelity.css 등. 정적 화면은 원본을 그대로 쓰고, React 화면(SiteFooter)이 이 파일을 쓴다. */
body .unified-contact :is(.unified-contact-actions, .unified-contact-consult, .unified-contact-consult span){background: transparent !important;}
body .unified-contact{box-sizing: border-box; border-radius: 3px; color: rgb(73, 55, 44); font-family: "Pretendard Variable", Pretendard, "Malgun Gothic", sans-serif; text-align: center; scroll-margin-top: 130px; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 18px !important; width: calc(100% - 48px) !important; max-width: 1192px !important; margin: 32px auto 48px !important; padding: 30px 20px !important; background: rgb(255, 245, 236) !important; border-width: 1px 0px 0px !important; border-style: solid none none !important; border-color: rgb(212, 161, 131) currentcolor currentcolor !important; border-image: none !important;}
body .unified-contact .unified-contact-message{word-break: keep-all; margin: 0px !important; padding: 0px !important; border: 0px !important; background: transparent !important; font-size: 16px !important; font-weight: 500 !important; line-height: 1.7 !important; color: rgb(73, 55, 44) !important;}
body .unified-contact .unified-contact-actions{max-width: 100%; display: flex !important; flex-direction: row !important; justify-content: center !important; gap: 12px !important; margin: 0px !important;}
body .unified-contact .unified-contact-actions a{box-sizing: border-box; width: 161px; max-width: 100%; height: 36.4px; min-height: 36.4px; font-family: inherit; white-space: nowrap; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 6px 10px !important; border: 1px solid rgb(119, 80, 59) !important; border-radius: 0px !important; background: rgb(119, 80, 59) !important; color: rgb(255, 255, 255) !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1.4 !important; text-decoration: none !important; box-shadow: none !important;}
body .unified-contact .unified-contact-actions a::before,body .unified-contact .unified-contact-actions a::after{display: none !important;}
body .unified-contact-actions a{min-height: 44px !important; height: auto !important;}
body :is(.hero-entry .button.dark, .unified-contact-actions a[href="/estimate"]){background: var(--ui-brand) !important; color: rgb(255, 255, 255) !important; border-color: var(--ui-brand) !important;}
body .unified-contact-actions a{min-height: 48px; border-radius: 8px; font-size: 15px;}
body .unified-contact-actions a[href="/visit-estimate"]{border: 1px solid rgb(171, 98, 62); color: var(--ui-brand) !important; background: transparent !important;}
@media (min-width: 761px){html body .unified-contact .unified-contact-actions a{height: 52px !important; min-height: 52px !important; border-radius: 8px !important; font-size: 15px !important;}}
@media (min-width: 761px){html body .unified-contact .unified-contact-actions a[href="/visit-estimate"]{border: 1px solid rgb(240, 100, 43) !important; color: #cf3f00 !important;}}
@media (min-width: 761px){html body .company-footer .company-footer-inner{max-width: 1192px !important;}}
@media (min-width: 761px){html:root body .unified-contact{max-width: 1192px !important; width: calc(100% - 48px) !important; margin: 48px auto 64px !important; padding: 40px 24px !important; background: rgb(255, 248, 242) !important; border: 1px solid rgb(231, 216, 206) !important; border-radius: 12px !important;}}
@media (min-width: 761px){html:root body .unified-contact .unified-contact-message{color: rgb(39, 36, 34) !important; font-size: 17px !important; font-weight: 600 !important;}}
@media (min-width: 761px){html:root body .unified-contact .unified-contact-actions a{height: 52px !important; min-height: 52px !important; width: auto !important; min-width: 180px !important; padding: 0px 24px !important; border-radius: 8px !important; font-size: 15px !important; font-weight: 650 !important;}}
@media (min-width: 761px){html:root body .unified-contact .unified-contact-actions a[href="/estimate"]{background: #e8590c !important; border: 1px solid rgb(240, 100, 43) !important; color: rgb(255, 255, 255) !important;}}
@media (min-width: 761px){html:root body .unified-contact .unified-contact-actions a[href="/visit-estimate"]{background: rgb(255, 255, 255) !important; border: 1px solid rgb(240, 100, 43) !important; color: #cf3f00 !important;}}
html body .contact-info-row{display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 28px; margin: 28px auto 0px; padding-top: 24px; border-top: 1px solid rgb(240, 220, 205); max-width: 760px;}
html body .contact-info-row a{color: rgb(39, 36, 34); text-decoration: none !important;}
html body .contact-info-row .ci-phone{display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 0px 10px;}
html body .contact-info-row .ci-label{grid-column: 1; font-size: 13px; font-weight: 700; color: #cf3f00;}
html body .contact-info-row .ci-phone strong{grid-area: 1 / 2 / span 2; font-size: 28px; font-weight: 800; letter-spacing: -0.02em; color: rgb(39, 36, 34);}
html body .contact-info-row .ci-hours{grid-column: 1; font-size: 12px; color: rgb(102, 89, 79);}
html body .contact-info-row .ci-kakao{display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0px 16px; border-radius: 999px; background: rgb(254, 229, 0); font-size: 14px; font-weight: 700; color: rgb(25, 25, 25) !important;}
html body .contact-info-row .ci-sns{display: flex; gap: 6px;}
html body .contact-info-row .ci-sns a{display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0px 12px; border: 1px solid rgb(236, 220, 207); border-radius: 999px; background: rgb(255, 255, 255); font-size: 13px; font-weight: 600;}
html body .contact-info-row img{display: block; width: 22px; height: 22px; border-radius: 6px;}
html body .contact-info-row .sr-only{position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px);}
html body .contact-info-row,html body .contact-info-row .ci-phone,html body .contact-info-row .ci-phone *{padding-left: 0px; padding-right: 0px; background: transparent !important;}
html body .contact-info-row .ci-kakao{background: rgb(254, 229, 0) !important; padding: 0px 16px !important;}
html body .contact-info-row .ci-sns a{background: rgb(255, 255, 255) !important; padding: 0px 12px !important;}
html body .contact-info-row{grid-auto-rows: 52px; max-width: 760px; display: grid !important; grid-template-columns: minmax(220px, auto) repeat(2, minmax(160px, 200px)) !important; align-items: center !important; justify-content: center !important; gap: 12px !important;}
html body .contact-info-row .ci-sns{display: contents !important;}
html body .contact-info-row .ci-phone{grid-area: 1 / 1 / span 2; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; margin-right: 12px; border-right: 1px solid rgb(240, 220, 205); display: flex !important; padding-right: 28px !important;}
html body .contact-info-row .ci-label{font-weight: 700; color: #cf3f00; font-size: 14px !important;}
html body .contact-info-row .ci-phone strong{font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; font-size: 36px !important;}
html body .contact-info-row .ci-hours{font-size: 13px !important; color: rgb(102, 89, 79);}
html body .contact-info-row :is(.ci-kakao, .ci-sns a){align-items: center; justify-content: center; gap: 8px; height: 52px; min-height: 52px; box-sizing: border-box; white-space: nowrap; display: flex !important; padding: 0px 14px !important; border-radius: 12px !important; font-size: 15px !important; font-weight: 700 !important;}
html body .contact-info-row .ci-kakao{border: 1px solid rgb(242, 217, 0); background: rgb(254, 229, 0) !important; color: rgb(25, 25, 25) !important;}
html body .contact-info-row .ci-sns a{border: 1px solid rgb(236, 220, 207) !important; background: rgb(255, 255, 255) !important; color: rgb(39, 36, 34) !important;}
html body .contact-info-row :is(.ci-kakao, .ci-sns a) span{background: transparent !important; padding: 0px !important;}
@media (min-width: 761px){html body .unified-contact .unified-contact-actions{display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; width: min(680px, 100%) !important; max-width: 680px !important; margin-left: auto !important; margin-right: auto !important;}}
@media (min-width: 761px){html body .unified-contact .unified-contact-actions > a{width: auto !important; min-width: 0px !important;}}
@media (min-width: 761px){html body .unified-contact .contact-info-row{width: min(680px, 100%) !important; max-width: 680px !important; grid-template-columns: minmax(0px, 1fr) repeat(2, minmax(0px, 1fr)) !important; justify-content: stretch !important;}}
@media (min-width: 761px){html body .unified-contact .contact-info-row .ci-phone{margin-right: 0px; padding-right: 20px !important;}}
html body:has(.unified-contact) .company-footer .company-footer-contact :is(.company-footer-phone, .company-footer-phone + p){display: none !important;}
html body:has(.unified-contact) .company-footer section[aria-label="견적 신청 방법"],html body:has(.unified-contact) .company-footer section[aria-label="SNS 채널"]{display: none !important;}
@media (min-width: 761px){html body:has(.unified-contact) .company-footer .company-footer-inner{display: grid !important; grid-template-columns: minmax(0px, 1fr) auto !important; align-items: center !important; column-gap: 32px !important;}}
@media (min-width: 761px){html body:has(.unified-contact) .company-footer .company-footer-top{grid-column: 1; flex-wrap: wrap; display: flex !important; align-items: center !important; gap: 12px 40px !important; padding: 0px !important; margin: 0px !important;}}
@media (min-width: 761px){html body:has(.unified-contact) .company-footer .company-footer-top > section:not([aria-label="견적 신청 방법"]):not([aria-label="SNS 채널"]){display: flex !important; align-items: center !important; gap: 14px !important; margin: 0px !important; padding: 0px !important;}}
@media (min-width: 761px){html body:has(.unified-contact) .company-footer .company-footer-top > section > h2{margin: 0px !important; font-size: 13px !important; color: rgb(138, 127, 119) !important; font-weight: 600 !important;}}
@media (min-width: 761px){html body:has(.unified-contact) .company-footer .company-footer-top > section > h2::after{content: "";}}
@media (min-width: 761px){html body:has(.unified-contact) .company-footer .company-footer-top > section.company-footer-contact > h2{display: none !important;}}
@media (min-width: 761px){html body:has(.unified-contact) .company-footer .company-footer-top > section.company-footer-contact::before{content: "문의 메일"; font-size: 13px; font-weight: 600; color: rgb(138, 127, 119);}}
@media (min-width: 761px){html body:has(.unified-contact) .company-footer .company-footer-stores{display: flex !important; gap: 18px !important; margin: 0px !important;}}
@media (min-width: 761px){html body:has(.unified-contact) .company-footer .company-footer-stores a{min-height: 36px !important; margin: 0px !important;}}
@media (min-width: 761px){html body:has(.unified-contact) .company-footer .company-footer-careers{grid-area: 1 / 2; margin: 0px !important; padding: 0px !important; border: 0px !important;}}
@media (min-width: 761px){html body:has(.unified-contact) .company-footer .company-footer-bottom{grid-column: 1 / -1; margin-top: 20px !important; padding-top: 20px !important;}}
@media (max-width: 760px){body .unified-contact{width: calc(100% - 32px) !important; padding: 26px 12px !important; gap: 16px !important;}}
@media (max-width: 760px){body .unified-contact .unified-contact-message{font-size: 14px !important;}}
@media (max-width: 760px){body .unified-contact .unified-contact-actions{width: 100%; gap: 8px !important;}}
@media (max-width: 760px){body .unified-contact .unified-contact-actions a{width: 161px; flex: 0 1 161px; font-size: 12px !important;}}
@media (max-width: 760px){body section.unified-contact{margin-block: 20px 24px !important; padding-block: 20px !important;}}
@media (max-width: 760px){html body .contact-info-row{gap: 12px; justify-content: flex-start;}}
@media (max-width: 760px){html body .contact-info-row .ci-sns a span{display: none;}}
@media (max-width: 760px){html body .contact-info-row{grid-auto-rows: auto; max-width: none; grid-template-columns: 1fr 1fr !important;}}
@media (max-width: 760px){html body .contact-info-row .ci-phone{grid-area: auto / 1 / auto / -1; height: auto; margin: 0px 0px 4px; border-right: 0px; border-bottom: 1px solid rgb(240, 220, 205); padding: 0px 0px 12px !important;}}
@media (max-width: 760px){html body .contact-info-row .ci-sns a span{display: inline !important;}}

/* 푸터 정리 (2026-10-19): 윗줄(문의 메일·앱 다운로드·함께 일하기)과 구분선은 빼고, 앱 이용 안내·공지사항·고객센터는 맨 아래 줄로 */
html body:has(.unified-contact) .company-footer .company-footer-top,
html body:has(.unified-contact) .company-footer .company-footer-careers{display:none!important}
html body:has(.unified-contact) .company-footer .company-footer-bottom{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;grid-template-areas:"policies policies" "name name" "details details" "copy links"!important;align-items:center!important;row-gap:8px!important;margin-top:0!important;padding-top:0!important;border-top:0!important}
html body:has(.unified-contact) .company-footer .company-footer-policies{grid-area:policies!important;margin:0 0 6px!important}
html body:has(.unified-contact) .company-footer .company-footer-name{grid-area:name!important}
html body:has(.unified-contact) .company-footer .company-footer-details{grid-area:details!important}
html body:has(.unified-contact) .company-footer .company-footer-bottom > small{grid-area:copy!important;margin:8px 0 0!important}
html body:has(.unified-contact) .company-footer .company-footer-secondary{grid-area:links!important;justify-self:end!important;margin:8px 0 0!important;display:flex!important;gap:18px!important}
@media (max-width: 760px){
  html body:has(.unified-contact) .company-footer .company-footer-bottom{grid-template-columns:minmax(0,1fr)!important;grid-template-areas:"policies" "name" "details" "links" "copy"!important}
  html body:has(.unified-contact) .company-footer .company-footer-secondary{justify-self:start!important}
}

/* 푸터 (2026-10-19 수정): 첫 줄 = 왼쪽 이용약관·개인정보처리방침 / 오른쪽 앱 이용 안내·공지사항·고객센터·앱 다운로드 */
html body:has(.unified-contact) .company-footer .company-footer-bottom{grid-template-columns:minmax(0,1fr) auto auto!important;grid-template-areas:"policies links apps" "name name name" "details details details" "copy copy copy"!important;column-gap:28px!important}
html body:has(.unified-contact) .company-footer .company-footer-policies{margin:0!important}
html body:has(.unified-contact) .company-footer .company-footer-secondary{grid-area:links!important;justify-self:end!important;align-self:center!important;margin:0!important}
html body:has(.unified-contact) .company-footer .company-footer-apps{grid-area:apps!important;display:flex!important;gap:18px!important;align-self:center!important;margin:0!important}
html body .company-footer .company-footer-apps a{color:#393332;font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap}
html body .company-footer .company-footer-apps a span{color:#cf3f00}
html body:has(.unified-contact) .company-footer .company-footer-name{margin-top:14px!important}
@media (max-width: 760px){
  html body:has(.unified-contact) .company-footer .company-footer-bottom{grid-template-columns:minmax(0,1fr)!important;grid-template-areas:"policies" "links" "apps" "name" "details" "copy"!important}
  html body:has(.unified-contact) .company-footer .company-footer-secondary{justify-self:start!important}
}

/* 연락처 줄 2차 (2026-10-20 사용자: SNS 버튼 정돈) — 같은 모양의 브랜드 아이콘(32px 둥근 사각, assets/contact/),
   카카오톡 상담은 넓은 주 버튼 한 줄 + 새 창 화살표, 블로그·인스타그램·유튜브는 아래 같은 크기 세 칸. 노란 통 배경 없음 */
html body .contact-info-row,html body .unified-contact .contact-info-row,html body #faq-contact .contact-info-row{grid-template-columns:auto repeat(3,minmax(0,1fr))!important;grid-auto-rows:auto!important;align-items:stretch!important;gap:10px!important}
html body .contact-info-row .ci-phone{grid-column:1!important;grid-row:1 / span 2!important}
html body .contact-info-row .ci-kakao{grid-column:2 / -1!important;grid-row:1!important}
html body .contact-info-row :is(.ci-kakao,.ci-sns a){position:relative;display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:10px!important;height:auto!important;min-height:52px!important;padding:0 16px!important;border:1px solid #ecdccf!important;border-radius:14px!important;background:#fff!important;color:#272422!important;font-size:15px!important;font-weight:700!important;letter-spacing:-.01em;transition:border-color .15s,background-color .15s,color .15s}
html body .contact-info-row .ci-kakao{min-height:56px!important;font-size:16px!important}
html body .contact-info-row .ci-kakao::after,html body .contact-info-row .ci-sns a::after{content:"↗";margin-left:auto;color:#b3a497;font-size:14px;font-weight:600}
html body .contact-info-row .ci-sns a::after{display:none}
html body .contact-info-row :is(.ci-kakao,.ci-sns a) img{flex:none;width:28px!important;height:28px!important;border-radius:8px!important}
html body .contact-info-row .ci-kakao img{width:32px!important;height:32px!important;border-radius:9px!important}
html body .contact-info-row :is(.ci-kakao,.ci-sns a):hover{border-color:#e8590c!important;background:#fffaf6!important;color:#cf3f00!important}
html body .contact-info-row :is(.ci-kakao,.ci-sns a):hover::after{color:#cf3f00}
html body .contact-info-row :is(.ci-kakao,.ci-sns a):focus-visible{outline:2px solid #e8590c;outline-offset:2px}
@media (max-width: 760px){
  html body .contact-info-row,html body .unified-contact .contact-info-row,html body #faq-contact .contact-info-row{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  html body .contact-info-row .ci-phone{grid-column:1 / -1!important;grid-row:auto!important}
  html body .contact-info-row .ci-kakao{grid-column:1 / -1!important;grid-row:auto!important}
  html body .contact-info-row .ci-sns a{flex-direction:column!important;justify-content:center!important;gap:6px!important;min-height:76px!important;padding:10px 4px!important;font-size:13px!important}
}

/* 6장: 문의 띠 배치 변경 (2026-10-20 사용자) — 왼쪽 고객센터, 오른쪽 위에서부터 견적 버튼·문구·상담/SNS 네 칸 */
@media (min-width: 761px) {
  html body .unified-contact{display:grid!important;grid-template-columns:minmax(200px,240px) repeat(4,minmax(0,170px))!important;justify-content:center!important;align-items:center!important;column-gap:10px!important;row-gap:14px!important;text-align:left!important}
  html body .unified-contact > .unified-contact-actions{grid-column:2 / -1!important;grid-row:1!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;width:auto!important;max-width:none!important;margin:0!important}
  html body .unified-contact > .unified-contact-message{grid-column:2 / -1!important;grid-row:2!important;margin:4px 0 2px!important;color:#393332!important;font-size:16px!important;font-weight:600!important;line-height:1.6!important;text-align:left!important}
  html body .unified-contact .contact-info-row,html body .unified-contact .contact-info-row .ci-sns{display:contents!important}
  html body .unified-contact .contact-info-row .ci-phone{grid-column:1!important;grid-row:1 / 4!important;align-self:stretch!important;justify-content:center!important;margin:0 14px 0 0!important;padding:0 24px 0 0!important;border:0!important;border-right:1px solid #f0dccd!important}
  html body .unified-contact .contact-info-row .ci-kakao{grid-column:2!important;grid-row:3!important}
  html body .unified-contact .contact-info-row .ci-sns a:nth-child(1){grid-column:3!important;grid-row:3!important}
  html body .unified-contact .contact-info-row .ci-sns a:nth-child(2){grid-column:4!important;grid-row:3!important}
  html body .unified-contact .contact-info-row .ci-sns a:nth-child(3){grid-column:5!important;grid-row:3!important}
  html body .unified-contact .contact-info-row :is(.ci-kakao,.ci-sns a){min-height:48px!important;font-size:14px!important}
  html body .unified-contact .contact-info-row .ci-kakao{font-size:14px!important}
  html body .unified-contact .contact-info-row .ci-kakao img{width:28px!important;height:28px!important;border-radius:8px!important}
}
/* 2026-10-21 사용자: 문의 띠 위아래 여백 줄임(가운데 문구 크기는 원래대로, 2026-10-21 사용자) (정적 화면은 design-fidelity.css에 같은 규칙) */
@media (min-width: 761px) {
  html:root body .unified-contact.unified-contact{padding-top:32px!important;padding-bottom:32px!important;margin-top:40px!important;margin-bottom:48px!important}
}
/* 모바일 화면 끝 견적 신청 칸: 문구 + 사진견적·방문견적 두 버튼만 담백하게. 전화·카톡·SNS는 떠 있는 버튼과 바닥글에 있어 뺀다 (2026-10-21) */
@media (max-width: 760px){
  html body section.unified-contact.unified-contact{width:auto!important;margin:32px 20px 24px!important;padding:22px 16px!important;gap:14px!important;border:1px solid #ffe4d6!important;border-radius:16px!important;background:#fff9f5!important;box-shadow:none!important}
  html body section.unified-contact.unified-contact .unified-contact-message{margin:0!important;color:#393332!important;font-size:15px!important;font-weight:600!important;line-height:1.55!important;text-align:center}
  html body section.unified-contact.unified-contact .unified-contact-actions{display:grid!important;grid-template-columns:1fr 1fr;gap:10px!important;width:100%}
  html body section.unified-contact.unified-contact .unified-contact-actions a{width:auto!important;min-height:48px;display:flex!important;align-items:center;justify-content:center;border:1px solid #e8590c!important;border-radius:12px!important;background:#fff!important;color:#cf3f00!important;font-size:15px!important;font-weight:700!important}
  html body section.unified-contact.unified-contact .unified-contact-actions a[href$="estimate"]:not([href*="visit"]){background:#e8590c!important;color:#fff!important}
  html body section.unified-contact.unified-contact .contact-info-row,html body section.unified-contact.unified-contact .unified-contact-consult{display:none!important}
}
/* UI 점검(2026-10-21): 모바일 상단 ‘무료 견적’ 버튼은 보이는 크기 그대로, 누르는 범위 44px */
@media (max-width: 760px){ html body header :is(a,button):is([class*="headerEstimate"],.header-photo){position:relative} html body header :is(a,button):is([class*="headerEstimate"],.header-photo)::after{content:"";position:absolute;inset:-4px 0} }

/* 문의 칸 문구는 굵게 하지 않음 (2026-10-21 회사 요청) */
html:root body[class] section.unified-contact.unified-contact .unified-contact-message.unified-contact-message,html:root body section.unified-contact.unified-contact .unified-contact-message.unified-contact-message{font-weight:400!important}