@charset "UTF-8";
/* CSS 6-file standardization: general company and service subpages */

/* ===== sub.css: general company and service subpages ===== */
/* =========================================================
   3. KOJUNGJA CLEAN MEMBERS - SUBPAGES STYLES (sub.css)
   ========================================================= */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 18px 36px;
  font-size: 1rem;
  font-weight: 950;
  line-height: 1.2;
  transition: transform var(--ease), background var(--ease), border-color var(--ease), color var(--ease), box-shadow var(--ease);
}

.button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.4;
}

.button:hover {
  transform: translateY(-2px);
}

.button--primary {
  background: linear-gradient(135deg, var(--color-green), var(--color-primary-dark));
  color: var(--color-white);
  box-shadow: 0 16px 28px rgba(0, 59, 232, 0.19), 0 6px 16px rgba(5, 117, 77, 0.13);
}

.button--primary:hover {
  background: linear-gradient(135deg, var(--color-green-dark), var(--color-primary-deep));
  box-shadow: 0 18px 32px rgba(0, 59, 232, 0.24), 0 8px 18px rgba(5, 117, 77, 0.16);
}

.button--ghost {
  border-color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.13);
  color: var(--color-white);
  backdrop-filter: blur(8px);
}

.button--ghost:hover {
  border-color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.24);
}





































@media (max-width: 1080px) {


}













/* Q 마커 제거 */


/* 우측 둥근 + 토글 버튼 */


/* 오픈 시 45도 회전하여 X 모양으로 마이크로 애니메이션 연출 */




/* FAQ 모바일 반응형 처리 */
@media (max-width: 768px) {









}

/* 푸터 영역 어두운 검정색 리디자인 */



/* 좌측 정보 영역 */















/* 지사 주소 스타일 */












/* 우측 고객센터 및 SNS 영역 */



















/* 개별 SNS 오버 컬러 */





/* Brand Promise (실시간 예약 현황판 리뉴얼) */








/* 라이브 펄스 민트/시안 칼라로 세팅 */











.promise-ticker-item .location {
  font-weight: 800;
  color: #00d0aa; /* 딥그린 포인트 */
}

.promise-ticker-item .customer {
  font-weight: 700;
  color: #ffffff;
}







.promise-ticker-item .time {
  font-size: 0.84rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  /* margin-left: auto 제거하여 가운데로 오게 함 */
}

/* 우측 [견적문의 하기] 버튼 스타일 */






/* 태블릿 및 모바일 브레이크포인트 보정 */
@media (max-width: 900px) {

}

@media (max-width: 640px) {
  /* 모바일 가로폭 확보를 위해 텍스트 숨김, 라이브 펄스 아이콘만 남김 */




}

@media (max-width: 480px) {




}

/* Service Pillars (3단 서비스 카드) */
.service-pillars {
  background: var(--color-panel);
  padding-block: 130px;
}

@media (max-width: 1080px) {
  .service-pillars {
    padding-block: 68px;
  }
}

@media (max-width: 768px) {
  .service-pillars {
    padding-block: 44px;
  }
}







.service-pillars__footer .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 36px;
  border-radius: var(--radius-pill);
  font-weight: var(--font-bold);
  box-shadow: 0 10px 24px rgba(0, 62, 165, 0.16);
  transition: all var(--ease);
}

.service-pillars__footer .button:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(0, 62, 165, 0.24);
}





















/* 동그란 화살표 버튼 */




/* Before & After 비교 갤러리 공통 스타일 */














/* Step-by-Step Process */








/* Customer Reviews */


/* 무한 루프 리뷰 마키 티커 (Infinite Marquee Ticker) */


/* 좌우 흐릿한 페이드 아웃 효과 */












/* 리뷰 개별 카드 디자인 */




















/* 마키 애니메이션 */

/* FAQ & Quick Lead Form */






























/* Mobile Floating CTA Bar */














/* Section Head Eyebrow */


/* 전문가 프로필 소개 섹션 */


.brand-experts .container {
  max-width: 1304px;
}

.brand-experts .section-head {
  max-width: 940px;
  margin-inline: auto;
  margin-bottom: 0;
  text-align: center;
}









.brand-experts .section-head h2 {
  margin-top: 20px;
  font-size: clamp(2.75rem, 4.25vw, 3.35rem);
  font-weight: var(--font-heavy);
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

.brand-experts .section-head p {
  margin-top: 20px;
  font-size: 1.18rem;
  line-height: 1.55;
}























/* 신규 태그 리스트 스타일 */






/* Construction Gallery */


.construction-gallery .container {
  max-width: 1304px;
}

.construction-gallery .section-head {
  max-width: 860px;
  margin-inline: auto;
  text-align: center;
}

.construction-gallery .section-head h2 {
  margin-top: 16px;
  color: #111827;
  font-size: var(--type-section-title-size);
  font-weight: var(--font-heavy);
  line-height: var(--type-heading-line-height);
}

.construction-gallery .section-head p {
  margin-top: 18px;
  color: #4b5563;
  font-size: var(--type-section-description-size);
  font-weight: 600;
  line-height: 1.7;
}









.gallery-ticker-track {
  display: flex;
  width: max-content;
  animation: galleryHorizontalTicker 40s linear infinite;
  will-change: transform;
}

.gallery-ticker-wrap:hover .gallery-ticker-track,
.gallery-ticker-wrap:focus-within .gallery-ticker-track {
  animation-play-state: paused;
}

.gallery-ticker-group {
  display: flex;
  gap: 24px;
  padding-inline-end: 24px;
}

.gallery-post-card {
  flex: 0 0 344px;
  width: 344px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 24px;
  box-shadow: 0 14px 34px rgba(12, 42, 62, 0.07);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.gallery-post-card:hover {
  transform: translateY(-6px);
  border-color: rgba(0, 62, 165, 0.28);
  box-shadow: 0 20px 44px rgba(12, 42, 62, 0.12);
}

.gallery-post-card a {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}

.gallery-post-card__image {
  display: block;
  height: 214px;
  overflow: hidden;
  background: #e8f3ef;
}

.gallery-post-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.gallery-post-card:hover .gallery-post-card__image img {
  transform: scale(1.05);
}

.gallery-post-card__category {
  width: fit-content;
  margin-bottom: 14px;
  padding: 6px 11px;
  border-radius: 999px;
  background: #edf3ff;
  color: #0056e0;
  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1;
}

.gallery-post-card__title {
  display: block;
  min-height: 56px;
  color: #111827;
  font-size: 1.18rem;
  font-weight: 900;
  line-height: 1.42;
  word-break: keep-all;
}

.gallery-post-card--compact .gallery-post-card__title {
  min-height: 0;
  font-weight: 700;
  text-align: center;
}






@media (max-width: 760px) {


  .construction-gallery .section-head {
    text-align: left;
  }

  .construction-gallery .section-head h2 {
    font-size: 2.05rem;
    line-height: 1.22;
  }

  .construction-gallery .section-head p {
    font-size: 0.96rem;
  }





  .gallery-ticker-track {
    animation-duration: 34s;
  }

  .gallery-ticker-group {
    gap: 16px;
    padding-inline-end: 16px;
  }

  .gallery-post-card {
    flex-basis: 286px;
    width: 286px;
    border-radius: 20px;
  }

  .gallery-post-card__image {
    height: 172px;
  }

  .gallery-post-card__title {
    min-height: 52px;
    font-size: 1.03rem;
  }
}

/* 콜백 요청 섹션 (레퍼런스 이미지 기반) */




/* 좌측 정보 컬럼 */


































/* 우측 입력 폼 컬럼 */
























/* 전화 요청 버튼 (레퍼런스 녹색 버튼) */








/* ==========================================================================
   Floating Quick Menu Section (5 Items: Phone, SMS, Kakao, Blog, Quote)
   ========================================================================== */





/* Individual Button Colors & Backgrounds */
/* Phone: Sky Blue */

/* SMS: Middle Blue */

/* KakaoTalk: Kakao Brand Yellow */

/* Naver Blog: Naver Brand Green */

/* Quote: Theme Primary Blue */

/* Top Button: Circular style matches rectangular block style now */

/* Responsive Styling for Mobile Devices */
@media (max-width: 1024px) {




  /* 모바일에서 토글 버튼은 사용하지 않고 숨김 */


  /* 모바일에서도 메뉴 리스트가 항상 보이도록 설정 */




  /* 텍스트는 숨기고 둥근 형태가 아닌 사각형 형태로 변경 */









  /* 탑 버튼도 일관성 있게 조절 및 얇은 경계선 추가 */

}

@media (max-width: 760px) {

}

/* =========================================
   Experts Marquee Ticker (전문가 무한 롤링 티커)
   ========================================= */


/* 좌우 흐릿한 페이드 아웃 효과 */














/* 전문가 카드 순환 컬러 테마 */






/* 마키 애니메이션 */

/* Responsive Overrides for Service Pillars Cards */
@media (max-width: 768px) {





}

/* ==========================================================================
   Common Footer Inquiry CTA Banner (For Subpages)
   ========================================================================== */
.footer-inquiry {
  width: 100%;
  height: 560px;
  color: #fff;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(0, 15, 40, .9), rgba(0, 34, 84, .5)),
    #151515 url("../images/common/consultation-cta-background.webp") center / cover no-repeat;
}

.footer-inquiry {
  padding: 0 !important;
}





.footer-inquiry h2 {
  font-size: var(--type-section-title-large, 42px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.04em;
}

.footer-inquiry h2 em {
  color: var(--red, #0056e0);
  font-style: normal;
}



















@media (max-width: 768px) {
  .footer-inquiry {
    width: 100%;
    min-height: 0;
    height: auto;
    background:
      linear-gradient(180deg, rgba(0, 15, 40, .12), rgba(0, 28, 70, .5)) 62% top / 100% 260px no-repeat,
      url("../images/common/consultation-cta-background.webp") 62% top / auto 260px no-repeat,
      #07182e;
  }



  .footer-inquiry h2 {
    font-size: var(--type-section-title, 28px);
    line-height: 1.35;
  }












}


.hero::before {
  display: none;
}

/* 슬라이드 개별 셋업 */




















.hero h1,
.hero h2 {
  color: var(--color-white, #ffffff);
  font-size: var(--type-hero-title-size);
  font-weight: var(--font-heavy);
  line-height: 1.15;
  letter-spacing: 0;
  margin: 0;
  text-shadow: 0 3px 22px rgba(0, 0, 0, 0.42);
}

.hero h1 span,
.hero h2 span {
  display: block;
  white-space: nowrap;
  word-break: keep-all;
}





.hero__actions .button {
  border: none !important;
  outline: none !important;
}

/* =================================================================
   회사소개: Cafe24 원본 콘텐츠 재구성
   ================================================================= */
.page-hero--about .page-hero__inner {
  max-width: 1100px;
}

.page-hero--about .page-hero__title {
  max-width: 980px;
  margin-bottom: 14px;
  font-size: clamp(2.65rem, 4vw, var(--type-hero-title-size));
  font-weight: var(--font-heavy);
  line-height: 1.15;
  letter-spacing: -0.025em;
  word-break: keep-all;
}

.page-hero--about .page-hero__text {
  max-width: 720px;
  font-size: var(--type-section-description-size);
  font-weight: var(--font-medium);
  line-height: 1.6;
  letter-spacing: -0.01em;
}

.page-hero--about .page-hero__text strong {
  color: #57b9ff;
}





.page-about-source .about-source-heading {
  margin-bottom: 42px;
  text-align: center;
}

.page-about-source .about-source-heading .section-header__eyebrow {
  margin-bottom: 8px;
  font-size: var(--type-caption-size);
  font-weight: var(--font-bold);
  line-height: 1.35;
  letter-spacing: 0.04em;
}

.page-about-source .about-source-heading .section-header__title {
  margin-bottom: 14px;
  font-size: var(--type-section-title-size);
  font-weight: var(--font-heavy);
  line-height: var(--type-heading-line-height);
  letter-spacing: -0.025em;
  word-break: keep-all;
}

.page-about-source .about-source-heading .section-header__text {
  max-width: 640px;
  font-size: var(--type-section-description-size);
  font-weight: var(--font-regular);
  line-height: 1.65;
  letter-spacing: -0.01em;
  word-break: keep-all;
}

.page-about-source .section-header__title em {
  color: var(--color-primary, #003ea5);
  font-style: normal;
}









.about-source-message__body p {
  margin: 0 0 22px;
}

.about-source-message__signature {
  margin: 38px 0 0;
  font-size: 1.125rem;
  font-weight: var(--font-regular);
  line-height: 1.6;
  letter-spacing: 0.08em;
}

.about-source-message__signature strong {
  margin-right: 14px;
  letter-spacing: -0.02em;
}

.about-source-services {
  background: #f6f9fc;
}

.about-source-services__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.about-source-service-card {
  overflow: hidden;
  padding: 0 0 34px;
  border: 1px solid #e4ebf2;
  border-radius: 16px;
  background: #fff;
  text-align: center;
  box-shadow: 0 12px 30px rgba(12, 52, 91, 0.07);
}

.about-source-service-card img {
  display: block;
  width: 100%;
  aspect-ratio: 305 / 280;
  object-fit: cover;
}

.page-about-source .about-source-service-card h3 {
  margin: 28px 20px 10px;
  color: var(--color-text-dark, #13211d);
  font-size: 1.25rem;
  font-weight: var(--font-bold);
  line-height: 1.4;
  letter-spacing: -0.02em;
  word-break: keep-all;
}

.page-about-source .about-source-service-card p {
  margin: 0 20px;
  color: var(--color-text-muted, #5c6b65);
  font-size: var(--type-body);
  font-weight: var(--font-regular);
  line-height: var(--type-body-line-height);
  letter-spacing: -0.01em;
  word-break: keep-all;
}























.about-source-location__item .material-symbols-outlined {
  color: var(--color-primary, #003ea5);
  font-size: 22px;
}









.about-source-location__actions .button {
  font-size: var(--type-button-size);
  font-weight: var(--font-bold);
  line-height: 1.25;
  letter-spacing: 0;
  white-space: nowrap;
}

@media (max-width: 1024px) {
  .page-hero--about .page-hero__title {
    max-width: 820px;
    font-size: clamp(2.2rem, 4.15vw, 2.65rem);
    line-height: 1.18;
  }

  .page-about-source .about-source-heading .section-header__title {
    font-size: clamp(1.875rem, 3.32vw, 2.125rem) !important;
  }


}

@media (max-width: 900px) {


  .about-source-services__grid {
    gap: 16px;
  }


}

@media (max-width: 768px) {
  .page-hero--about .page-hero__title {
    max-width: 640px;
    margin-bottom: 12px;
    font-size: clamp(2rem, 8.15vw, 2.2rem);
    line-height: 1.2;
  }

  .page-hero--about .page-hero__text {
    font-size: 1rem;
    line-height: 1.55;
  }

  .page-about-source .about-source-heading .section-header__eyebrow {
    margin-bottom: 7px;
    font-size: 0.8rem;
    letter-spacing: 0.035em;
  }

  .page-about-source .about-source-heading .section-header__title {
    margin-bottom: 12px;
    font-size: clamp(1.75rem, 6.5vw, 1.875rem) !important;
    line-height: 1.28;
  }

  .page-about-source .about-source-heading .section-header__text {
    max-width: 34rem;
    padding-inline: 0;
    font-size: 1rem;
    line-height: 1.65;
  }



  .page-about-source .about-source-heading {
    margin-bottom: 28px;
  }









  .about-source-message__body br {
    display: none;
  }

  .about-source-services__grid,
  .about-source-certificates__grid {
    grid-template-columns: 1fr;
  }



  .page-about-source .about-source-service-card h3 {
    margin-top: 24px;
    font-size: 1.2rem;
    line-height: 1.4;
  }

  .page-about-source .about-source-service-card p {
    font-size: 1rem;
    line-height: 1.7;
  }













  .about-source-location__actions .button {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: 10px;
  }
}

@media (max-width: 430px) {
  .page-hero--about .page-hero__title {
    max-width: 360px;
    line-height: 1.22;
  }


}

.hero__actions .button:focus-visible {
  outline: 3px solid #ffffff !important;
  outline-offset: 4px;
  box-shadow: 0 0 0 7px rgba(0, 62, 165, 0.72);
}

.button.button--hero-primary {
  background: #000000;
  border: none;
  color: #ffffff;
  border-radius: var(--radius-pill);
  padding: 18px 38px;
  font-size: 1rem;
  font-weight: var(--font-bold);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
  transition: all var(--ease);
}

.button.button--hero-primary:hover {
  background: #151515;
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.32);
}

.button.button--hero-outline {
  background: #ffffff;
  border: none;
  color: #111111;
  border-radius: var(--radius-pill);
  padding: 18px 38px;
  font-size: 1rem;
  font-weight: var(--font-bold);
  backdrop-filter: none;
  transition: all var(--ease);
}

.button.button--hero-outline:hover {
  background: #f4f4f4;
  color: #000000;
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18);
}

/* 슬라이더 컨트롤러 및 인디케이터 */


















/* 텍스트 요소별 상승 페이드인 모션 (Micro-interactions) */










@media (max-width: 1080px) {


  .hero h1,
  .hero h2 {
    font-size: 3rem;
  }

}

@media (max-width: 760px) {








  .hero h1,
  .hero h2 {
    font-size: 2.12rem;
    line-height: 1.2;
  }
  .hero h1 span,
  .hero h2 span {
    white-space: normal;
  }




}









/* 좌측 영역: Before/After 드래그 비교 슬라이더 (오른쪽 높이 동기화) */


.before-after-slider {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 480px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-line);
  box-shadow: var(--shadow-card);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  background: #f1f5f9;
}

.before-after-slider__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

.before-after-slider__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* Clip-path로 가려지는 BEFORE 이미지 */
.before-after-slider__image:nth-child(1) {
  z-index: 2;
}

/* 배경에 깔리는 AFTER 이미지 */
.before-after-slider__image:nth-child(2) {
  z-index: 1;
}

.before-after-slider__handle {
  position: absolute;
  top: 0;
  height: 100%;
  width: 44px;
  background: transparent;
  z-index: 3;
  cursor: ew-resize;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.before-after-slider__handle::before {
  content: "";
  position: absolute;
  inset-block: 0;
  width: 2px;
  background: var(--color-white);
}

.before-after-slider__handle::after {
  content: "< >";
  position: absolute;
  width: 44px;
  height: 44px;
  background: var(--color-white);
  color: #111111;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.05em;
  font-family: inherit;
  transition: background-color 0.3s, transform 0.2s;
}

.before-after-slider__handle:hover::after {
  background: #f8f9fa;
  transform: scale(1.05);
}

/* 우측 영역: 서비스 전환 탭 및 설명 텍스트, 체크리스트 */












.before-after-slider__handle:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 3px;
  box-shadow: 0 0 0 7px rgba(0, 62, 165, 0.72);
}

















@media (max-width: 1080px) {


}

@media (max-width: 600px) {



}

/* 공간별 작업 기준 타이틀 섹션 */


/* 공간별 작업 기준 인터랙티브 섹션 (레퍼런스 이미지 기반 풀스크린 비주얼 리디자인) */


/* 카드 갯수/선택에 따라 이미지가 바뀌는 인터랙션 배경 */






/* 2x4 현장 이미지 콜라주 그리드 - 경계선 없이 가득 채우고 살짝 화면을 벗어나도록 확장 */


































/* 레퍼런스 스타일의 오버랩 본문 카드 - 화면 정중앙 글래스모피즘 */








/* 카드 상단 아이콘 랩 */






/* 카드 상단 뱃지 */






/* 카드 푸터 영역 (링크 및 이전/다음 버튼) */












/* 이전/다음 원형 이동 버튼 */
















/* 글래스모피즘 세로형 탭 */














/* Step-by-Step 안심 프로세스 리디자인 */






.process-header .section-head {
  margin-bottom: 0;
}











/* 4열 카드 그리드 */


/* 개별 카드 기본 상태 (흰색 배경) */


/* 카드 내 상단 아이콘 구역 */


/* 불규칙한 하늘색 셰이프 배경 (Blob) */






/* 콘텐츠 영역 */








/* 액션 영역 & 버튼 */






/* --- 액티브 상태 카드 디자인 (레퍼런스 2번째 파란 카드 스타일 적용) & 호버 디자인 --- */
















/* 유기적 Blob 애니메이션 효과 */









.review-block .section-head {
  align-self: start;
  padding-top: 18px;
}

.review-block .section-head h2 {
  max-width: 360px;
}

.review-block .section-head p {
  max-width: 300px;
}









































































































































.safezone-cta .button {
  margin-top: 22px;
}









/* Brand Stats Section */










/* 세로 구분선 (마지막 아이템 제외) */








/* 반응형 처리 (모바일/태블릿) */
@media (max-width: 900px) {







}

@media (max-width: 480px) {







}

/* =================================================================
   오시는길 (Location) 페이지 전용 스타일
   ================================================================= */


.subpage-title-area .section-header,
.location-title-area .section-header {
  text-align: center;
  margin-bottom: 0;
}



















.location-info__title {
  font-size: 28px;
  font-weight: 700;
  color: var(--color-ink);
  line-height: 1.3;
}



































@media (max-width: 1024px) {


}

@media (max-width: 768px) {

  .subpage-title-area .section-header,
  .location-title-area .section-header {
    margin-bottom: 0;
  }







  .location-info__title {
    font-size: 22px;
    line-height: 1.3;
    margin-bottom: 0;
  }












}

/* =================================================================
   회사소개(About) 3대 핵심 가치 그리드 3열 및 반응형 스타일
   ================================================================= */
.about-values__grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 50px;
}

.about-values__grid .service-targets__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.about-values__grid .service-targets__card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: var(--radius-sm, 8px);
  margin-bottom: 20px;
}

.about-values__grid .service-targets__title {
  font-size: 1.25rem;
  margin-bottom: 10px;
  font-weight: 700;
}

.about-values__grid .service-targets__text {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  text-align: left;
}

@media (max-width: 1024px) {
  .about-values__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

@media (max-width: 768px) {
  .about-values__grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

.site-main.page-home {
  padding-top: 0 !important;
}

/* =================================================================
   회사소개(About) 브랜드 CI 섹션 스타일
   ================================================================= */


.brand-ci-section .container {
  max-width: 1000px;
  margin: 0 auto;
}

.brand-ci-section .section-header {
  text-align: center;
  margin-bottom: 50px;
}



















@media (max-width: 760px) {


  .brand-ci-section .section-header {
    margin-bottom: 30px;
  }










}

/* =================================================================
   인증서 페이지 (Certificates) 전용 스타일
   ================================================================= */
.certificates-gallery {
  padding-block: 80px; /* 데스크탑 72~96px */
}

.certificates-gallery .section-header {
  text-align: center;
  margin-bottom: 50px;
}

.certificates-gallery .cert-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px; /* 데스크탑 16~20px */
  margin-top: 50px;
}

.cert-card {
  background-color: #ffffff;
  padding: 24px; /* 데스크탑 20~28px */
  border-radius: var(--radius-lg, 16px); /* 더 세련된 둥근 모서리 */
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.04));
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
  border: 1px solid var(--color-line, rgba(19, 33, 29, 0.12)) !important;
  color: inherit;
  text-decoration: none;
}

.cert-card:hover {
  transform: translateY(-8px);
  border-color: var(--color-primary) !important;
}

.cert-img-wrap {
  width: 100%;
  height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: #f8fafc;
  border-radius: var(--radius-sm, 8px);
  margin-bottom: 20px;
  border: 1px solid #e2e8f0;
}

.cert-img-wrap img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  padding: 10px;
}

.cert-card h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 5px;
}

.certificates-gallery .cert-grid--verified {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1080px;
  margin-top: 0;
  margin-inline: auto;
}

.cert-grid--verified .cert-img-wrap {
  height: auto;
  aspect-ratio: 700 / 1015;
}

.cert-grid--verified .cert-img-wrap img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  padding: 0;
  object-fit: cover;
}





.cert-card span {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

@media (max-width: 1024px) {
  .certificates-gallery .cert-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

@media (max-width: 760px) {
  .certificates-gallery {
    padding-block: 45px; /* 모바일 34~50px */
  }

  .certificates-gallery .section-header {
    margin-bottom: 30px;
  }

  .certificates-gallery .cert-grid {
    grid-template-columns: 1fr;
    gap: 12px; /* 모바일 10~14px */
    margin-top: 30px !important;
  }

  .cert-card {
    padding: 16px 12px; /* 모바일 2열에 적합하도록 패딩 조절 */
  }

  .cert-img-wrap {
    height: auto;
    margin-bottom: 12px;
  }

  .certificates-gallery .cert-grid--verified {
    max-width: 420px;
  }
}

/* ==========================================================================
   Story Vertical Stacking Cards Layout
   ========================================================================== */


















/* Background image mappings */






/* Responsive adjustments for vertical stories */
@media (max-width: 768px) {









}

/* ==========================================================================
   /* ==========================================================================
   Brand Partner Logo Horizontal Ticker Styles
   ========================================================================== */




/* Gradient shadow overlay left and right */





















@media (max-width: 768px) {





}

/* ==========================================================================
   Why Unhae Clean (Special Reasons Section) Cards Layout
   ========================================================================== */









.special-card:hover .special-card__img img {
  transform: scale(1.06);
}







/* Responsive adjustments for special reasons */
@media (max-width: 1024px) {

}

@media (max-width: 600px) {






}

/* =================================================================
   회사명 서브페이지 전용 스타일 시트
   파일명: /assets/css/contents.css
   ================================================================= */

/* =========================================
   1. 서브페이지 공통 Hero (Page Top)
   ========================================= */
.page-hero {
    position: relative;
    width: 100%;
    height: 400px;
    background: #101827;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    isolation: isolate;
    --page-hero-image: url("../images/main/home-hero-background.webp");
}

.page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.65) 100%), var(--page-hero-image);
    background-position: center;
    background-size: cover;
    z-index: -2;
}

.page-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 36%;
    background: linear-gradient(180deg, rgba(16, 24, 39, 0) 0%, rgba(16, 24, 39, 0.35) 100%);
    z-index: -1;
}



.page-hero--office {
    --page-hero-image: url("../images/page/page_hero/page-hero-office.webp");
    background-position: center;
}

.page-hero--store {
    --page-hero-image: url("../images/page/page_hero/page-hero-store.webp");
    background-position: center;
}

.page-hero--government {
    --page-hero-image: url("../images/page/page_hero/page-hero-government.webp");
    background-position: center;
}

.page-hero--school {
    --page-hero-image: url("../images/page/page_hero/page-hero-school.webp");
    background-position: center;
}

.page-hero--regular {
    --page-hero-image: url("../images/page/page_hero/page-hero-regular.webp");
    background-position: center;
}

.page-hero--grout {
    --page-hero-image: url("../images/page/page_hero/page-hero-grout.webp");
    background-position: center;
}

.page-hero--about,
.page-hero--company {
    --page-hero-image: url("../images/page/hero-company.webp");
    background-position: center;
}

.page-hero--building {
    --page-hero-image: url("../images/page/page_hero/page-hero-building.webp");
    background-position: center;
}

.page-hero--outerwall {
    --page-hero-image: url("../images/page/page_hero/page-hero-outerwall.webp");
    background-position: center;
}

.page-hero--facility {
    --page-hero-image: url("../images/page/page_hero/page-hero-facility.webp");
    background-position: center;
}

.page-hero--home {
    --page-hero-image: url("../images/page/page_hero/page-hero-home.webp");
    background-position: center;
}

.page-hero--move {
    --page-hero-image: url("../images/page/page_hero/page-hero-move.webp");
    background-position: center;
}

.page-hero--tile {
    --page-hero-image: url("../images/page/page_hero/page-hero-tile.webp");
    background-position: center;
}

.page-hero--polishing {
    --page-hero-image: url("../images/page/page_hero/page-hero-polishing.webp");
    background-position: center;
}

.page-hero--coating {
    --page-hero-image: url("../images/page/page_hero/page-hero-coating.webp");
    background-position: center;
}



.page-hero--bereavement {
    --page-hero-image: url("../images/page/page_hero/page-hero-bereavement.webp");
    background-position: center;
}

.page-hero--trash {
    --page-hero-image: url("../images/page/page_hero/page-hero-trash.webp");
    background-position: center;
}

.page-hero--waste {
    --page-hero-image: url("../images/page/page_hero/page-hero-waste.webp");
    background-position: center;
}

.page-hero--demolition {
    --page-hero-image: url("../images/page/page_hero/page-hero-demolition.webp");
    background-position: center;
}

.page-hero--disinfection {
    --page-hero-image: url("../images/page/page_hero/page-hero-disinfection.webp");
    background-position: center;
}





.page-hero--privacy {
    --page-hero-image: url("/assets/images/main/implant-statistics-background.webp");
    background-position: center;
}

.page-hero--support {
    --page-hero-image: url("../images/page/page_hero/page-hero-support.webp");
    background-position: center;
}

.page-hero--gallery {
    --page-hero-image: url("../images/page/page_hero/page-hero-gallery.webp");
    background-position: center;
}

.page-hero--gallery-detail {
    --page-hero-image: url("../images/page/page_hero/page-hero-gallery-detail.webp");
    background-position: center;
}

.page-hero--faq {
    --page-hero-image: url("../images/page/page_hero/page-hero-faq.webp");
    background-position: center;
}

.page-hero--contact {
    --page-hero-image: url("../images/page/page_hero/page-hero-contact.webp");
    background-position: center;
}

.page-hero--aircon {
    --page-hero-image: url("../images/page/page_hero/page-hero-aircon.webp");
    background-position: center;
}

.page-hero--sysaircon {
    --page-hero-image: url("../images/page/page_hero/page-hero-sysaircon.webp");
}

.page-hero--hood {
    --page-hero-image: url("../images/page/page_hero/page-hero-hood.webp");
    background-position: center;
}

.page-hero__inner {
    position: relative;
    top: 32px;
    color: var(--color-white);
    padding: 0 24px;
    width: 100%;
    max-width: var(--container);
}



.page-hero__title {
    font-size: 44px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0;
    margin-bottom: 12px;
    line-height: 1.2;
}

.page-hero__text {
    font-size: 18px;
    font-weight: 500;
    opacity: 0.92;
    word-break: keep-all;
    line-height: 1.6;
}

.page-hero__text span {
    color: var(--color-primary);
    font-weight: 700;
}

@media (max-width: 1024px) {
    .page-hero {
        height: 320px;
    }
    .page-hero__inner {
        top: 28px;
    }
    .page-hero__title {
        font-size: 32px;
    }
    .page-hero__text {
        font-size: 16px;
    }
}

@media (max-width: 768px) {
    .page-hero {
        height: 260px;
    }
    .page-hero__inner {
        top: 24px;
    }

    .page-hero__title {
        font-size: 26px;
    }
    .page-hero__text {
        font-size: 14px;
        line-height: 1.4;
    }
}

/* =========================================
   2. 회사소개 페이지 (.page-about)
   ========================================= */






.about-intro__media img,
.service-overview__media img,
.service-features__media img,
.service-steps__card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}













.about-proof-list .material-symbols-outlined {
    flex: 0 0 auto;
    color: var(--color-primary);
    font-size: 22px;
}





































.about-company__head .section-header__eyebrow,
.about-company__head .section-header__title {
    color: var(--color-white);
}















@media (max-width: 1024px) {











}

@media (max-width: 768px) {





}

/* =========================================
   3. 서비스 상세 페이지 공통 레이아웃
   ========================================= */

.about-intro__eyebrow,
.service-overview__eyebrow,
.section-header__eyebrow {
    display: inline-block;
    color: var(--color-primary);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0;
    margin-bottom: 10px;
    text-transform: uppercase;
    line-height: 1.3;
}

.about-intro__title,
.service-overview__title {
    font-size: 38px;
    font-weight: 800;
    color: #000000;
    line-height: 1.28;
}

.about-intro__title,
.service-overview__title {
    margin-bottom: 12px;
}

@media (max-width: 1024px) {
    .about-intro__title,
    .service-overview__title {
        font-size: 30px !important;
    }
}

@media (max-width: 768px) {
    .about-intro__title,
    .service-overview__title {
        font-size: 26px !important;
    }
    .section-header__text {
        padding: 0 20px;
        word-break: keep-all;
    }
}


/* 서비스 개요 (Overview) */
.service-overview {
    margin-bottom: 0;
    position: relative;
}

.service-overview__inner {
    display: flex;
    align-items: stretch;
    gap: 80px;
}

.service-overview__content {
    flex: 1.2;
}

.service-overview__text {
    font-size: 17px;
    color: var(--color-text-body);
    line-height: 1.55;
    margin-bottom: 30px;
}

/* 3대 핵심 가치 배지 */






.service-overview__media {
    flex: 1;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lift);
    border: 1px solid var(--color-border);
    background: var(--color-panel);
    position: relative;
}

.service-overview__media::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--radius-lg);
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.03);
    pointer-events: none;
}

@media (max-width: 1024px) {
    .service-overview__inner {
        flex-direction: column;
        gap: 40px;
    }
    .service-overview__title {
        font-size: 30px;
    }
    .service-overview__text {
        font-size: 16px;
    }


}

/* 추천 타겟 체크리스트 (Target Recommendation) */
.service-targets {
    background: var(--color-bg-light);
    margin-bottom: 0;
    position: relative;
}

.service-targets__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 50px;
}

.service-targets__card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 40px 28px;
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 62, 165, 0.08);
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}

.service-targets__card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 62, 165, 0.1);
    border-color: var(--color-primary);
    background: var(--color-white);
}

.service-targets__card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
}

.service-targets__icon {
    font-size: 32px;
    color: var(--color-primary);
    background: var(--color-primary-soft);
    width: 54px;
    height: 54px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s, color 0.3s;
}

.service-targets__card:hover .service-targets__icon {
    background: var(--color-primary);
    color: var(--color-white);
}



.service-targets__card:hover .service-targets__badge {
    background: var(--color-primary-dark);
    color: var(--color-white);
}

.service-targets__title {
    font-size: 20px;
    font-weight: 800;
    color: var(--color-primary-dark);
    margin-bottom: 12px;
    line-height: 1.42;
}

.service-targets__text {
    font-size: 15px;
    color: var(--color-text-body);
    line-height: 1.55;
    margin-bottom: 24px;
    flex-grow: 1;
}



.service-targets__card:hover .service-targets__arrow {
    transform: translateX(6px);
    opacity: 1;
}

@media (max-width: 1200px) {
    .service-targets__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .service-targets__grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .service-targets__card {
        padding: 30px 20px;
    }
}

/* 서비스 과정 및 기법 (Technology / Process Grid) */
.service-steps {
    margin-bottom: 0;
    position: relative;
}

.service-steps__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 30px;
    margin-top: 50px;
}

.service-steps__card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-card);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
    display: flex;
    flex-direction: column;
}

.service-steps__card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lift);
}

.service-steps__card-media {
    aspect-ratio: 16 / 10;
    height: auto;
    overflow: hidden;
    background: var(--color-panel);
}

.service-steps__card-media img {
    transition: transform 0.5s ease;
}

.service-steps__card:hover .service-steps__card-media img {
    transform: scale(1.05);
}

.service-steps__card-number {
    font-size: 12px;
    font-weight: 850;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
    display: inline-block;
    width: fit-content;
    line-height: 1.3;
}

.service-steps__card-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--color-primary-dark);
    margin-bottom: 12px;
    line-height: 1.28;
}

.service-steps__card-text {
    font-size: 14.5px;
    color: var(--color-text-body);
    line-height: 1.55;
}

@media (max-width: 1024px) {
    .service-steps__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px 20px;
    }
}

@media (max-width: 768px) {
    .service-steps__grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 16px;
        margin-top: 30px;
        padding-bottom: 16px;
        -webkit-overflow-scrolling: touch;
        scroll-padding-left: 20px;
        padding-inline: 20px;
        margin-inline: -20px;
    }

    .service-steps__card {
        flex-shrink: 0;
        width: 80%;
        scroll-snap-align: start;
        box-shadow: 0 4px 16px rgba(0,0,0,0.05);
    }

    .service-steps__card-media {
        aspect-ratio: 16 / 9;
    }
}

/* Before/After 이미지 슬라이더 (.service-gallery) */
.service-gallery {
    padding: 100px 0;
    background: var(--color-white);
    margin-bottom: 0;
}

.service-gallery__inner {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 60px;
    align-items: center;
    max-width: var(--container);
    margin: 50px auto 0 auto;
}

.service-gallery__info-panel {
    display: flex;
    flex-direction: column;
}

.service-gallery__info-panel .section-header {
    text-align: left !important;
}

.service-gallery__info-panel .section-header__title {
    margin-bottom: 16px;
}

.service-gallery__info-panel .section-header__text {
    margin: 0;
    font-size: 16px;
    line-height: 1.7;
}

.before-after-slider-wrap {
    width: 100%;
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lift);
    border: 1px solid var(--color-border);
}

.before-after-slider {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    background: var(--color-panel);
}

.before-after-slider .before-after-slider__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}

.before-after-slider .before-after-slider__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    -webkit-user-drag: none;
    pointer-events: none;
}

.before-after-slider .before-after-slider__image:nth-child(1) {
    z-index: 2;
}

.before-after-slider .before-after-slider__image:nth-child(2) {
    z-index: 1;
}

.before-after-slider .before-after-slider__handle {
    position: absolute;
    top: 0;
    height: 100%;
    width: 2px;
    background: var(--color-white);
    z-index: 3;
    cursor: ew-resize;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.before-after-slider .before-after-slider__handle::after {
    content: "< >";
    position: absolute;
    width: 44px;
    height: 44px;
    background: var(--color-white);
    color: #111111;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.05em;
    font-family: inherit;
    transition: background-color 0.3s, transform 0.2s;
}

.before-after-slider .before-after-slider__handle:hover::after {
    background: #f8f9fa;
    transform: scale(1.05);
}

/* 이미지 배지 스타일 (이전/이후 미니멀 라운드 필 뱃지 이관) */
.finder-slider-label {
    position: absolute;
    top: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 14px;
    border-radius: 30px;
    pointer-events: none;
    z-index: 10;
    white-space: nowrap;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.finder-slider-label::before {
    display: none;
}

.finder-slider-label--before {
    left: 20px;
    background: rgba(0, 0, 0, 0.6);
    color: #ffffff;
}

.finder-slider-label--after {
    right: 20px;
    background: rgba(255, 255, 255, 0.85);
    color: #111111;
}

@media (max-width: 1024px) {
    .service-gallery__inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .service-gallery__info-panel .section-header {
        text-align: center !important;
    }
    .service-gallery__info-panel .section-header__text {
        margin: 0 auto;
    }
}
@media (max-width: 768px) {
    .service-gallery {
        padding: 60px 0;
    }
    .before-after-slider {
        aspect-ratio: 4 / 3;
    }
}

/* 핵심 기술 특장점 (.service-features) */
.service-features {
    margin-bottom: 0;
    position: relative;
}



.service-features--dark .section-header__title {
    color: var(--color-white) !important;
}

.service-features--dark .section-header__text {
    color: rgba(255, 255, 255, 0.7) !important;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 50px;
}

.features-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

.features-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lift);
}

.features-card__media {
    width: 40%;
    min-width: 160px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.features-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.features-card:hover .features-card__media img {
    transform: scale(1.08);
}

.features-card__body {
    flex: 1;
    padding: 24px clamp(18px, 2vw, 28px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.features-card__number {
    font-size: 13px;
    font-weight: 800;
    color: var(--color-primary);
    background: var(--color-primary-soft);
    padding: 4px 10px;
    border-radius: 4px;
    width: fit-content;
    margin-bottom: 10px;
    line-height: 1.3;
}

.features-card__title {
    font-size: 18.5px;
    font-weight: 800;
    color: var(--color-primary-dark);
    margin-bottom: 10px;
    line-height: 1.3;
}

.features-card__text {
    font-size: 14px;
    color: var(--color-text-body);
    line-height: 1.55;
}

/* 다크 테마 카드 스타일 */
.service-features--dark .features-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.service-features--dark .features-card__title {
    color: var(--color-white);
}

.service-features--dark .features-card__text {
    color: rgba(255, 255, 255, 0.8);
}

.service-features--dark .features-card__number {
    color: var(--color-accent);
    background: rgba(247, 192, 74, 0.15);
}

@media (max-width: 992px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }
}

@media (max-width: 768px) {
    .features-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 36px;
    }
    .features-card {
        flex-direction: column;
    }
    .features-card__media {
        width: 100%;
        aspect-ratio: 16 / 9;
    }
}

/* 자주 묻는 질문 (.service-faq) - 단독 섹션 구성 */






















@media (max-width: 1024px) {

}

/* 하단 문의 CTA 배너 */
.service-cta {
    position: relative;
    padding: 80px 0; /* 여백 80px 규격화 */
    color: var(--color-white);
    margin-bottom: 0 !important;
    text-align: center; /* 텍스트 가운데 정렬 */
    background-color: var(--color-primary-deep);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

/* 어두운 오버레이 */
.service-cta-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.65); /* 가독성을 위한 검은색 65% 오버레이 */
    z-index: 1;
}

.service-cta__container {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column; /* 세로 일렬 배치 */
    align-items: center; /* 가로 가운데 정렬 */
    justify-content: center;
    gap: 28px; /* 간격 균형있게 */
}

.service-cta__content {
    width: 100%;
    max-width: 800px;
}

.service-cta__title {
    font-size: clamp(1.8rem, 2.5vw, 2.2rem);
    font-weight: var(--font-heavy);
    margin-bottom: 12px;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: var(--color-white) !important;
}

.service-cta__text {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.85) !important;
    margin-bottom: 0;
    line-height: 1.6;
}

/* 전화번호 영역 추가 */
.service-cta__phone {
    font-size: clamp(1.2rem, 1.8vw, 1.5rem);
    font-weight: var(--font-bold);
    color: #3fab4a !important; /* 초록색(#3fab4a)으로 변경 */
    margin-top: 18px;
    margin-bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.service-cta__phone a {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px; /* 아이콘과 텍스트 간격 */
}

.service-cta__phone a i {
    font-size: 1.15em;
    opacity: 0.9;
}

.service-cta__phone a:hover {
    opacity: 0.8;
}

.service-cta__phone span {
    color: rgba(255, 255, 255, 0.35);
    font-weight: 400;
}

.service-cta__actions {
    display: flex;
    flex-direction: row; /* 버튼 가로 나란히 배치 */
    justify-content: center;
    gap: 16px;
    width: 100%;
}

.button.button--subpage-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 36px;
    border-radius: 8px;
    font-size: 16.5px;
    font-weight: 700;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    border: none;
    cursor: pointer;
    min-width: 240px;
}

.button.button--subpage-cta.button--primary {
    background: #3fab4a; /* 초록색(#3fab4a)으로 변경 */
    color: var(--color-white, #ffffff);
    border: 1px solid transparent;
    box-shadow: none !important; /* 그림자 완전 제거 */
}

.button.button--subpage-cta.button--primary:hover {
    background: transparent;
    color: var(--color-white);
    border-color: #3fab4a; /* 초록색 테두리로 전환 */
    transform: translateY(-3px);
    box-shadow: none !important; /* 그림자 제거 */
}

.button.button--subpage-cta.button--outline {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.6);
    color: var(--color-white);
}

.button.button--subpage-cta.button--outline:hover {
    border-color: var(--color-white);
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-3px);
    box-shadow: none !important; /* 그림자 제거 */
}

/* 카카오톡 노란색 버튼 스타일 */
.button.button--subpage-cta.button--kakao {
    background: #fee500;
    color: #191919;
    border: 1px solid transparent;
}

.button.button--subpage-cta.button--kakao:hover {
    background: #f7e314;
    color: #000000;
    transform: translateY(-3px);
    box-shadow: none !important; /* 그림자 제거 */
}

.button.button--subpage-cta.button--kakao i {
    margin-right: 8px;
    font-size: 1.25em;
    vertical-align: middle;
}

@media (max-width: 1024px) {
    .service-cta__container {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }
    .service-cta {
        padding: 80px 24px;
    }
    .service-cta__title {
        font-size: 26px;
    }
    .service-cta__text {
        font-size: 15px;
    }
    .service-cta__actions {
        width: 100%;
        align-items: center;
    }
}

@media (max-width: 768px) {
    .service-cta {
        padding: 60px 20px;
    }
    .button.button--subpage-cta {
        width: 100%;
        min-width: unset;
    }
}

/* =================================================================
   회사명 줄눈시공 탭 및 인터랙션 관련 스타일
   (service-bereavement.html 인라인 스타일 이관 및 중복 최적화)
   ================================================================= */
.eco-tabs-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 30px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}
.eco-tab-btn {
    background: var(--color-white);
    border: 1px solid var(--color-line);
    color: var(--color-muted);
    padding: 12px 26px;
    font-size: 15px;
    font-weight: 700;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.eco-tab-btn:hover {
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
    border-color: var(--color-primary);
    transform: translateY(-2px);
}
.eco-tab-btn.active {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
    box-shadow: 0 8px 16px rgba(0, 62, 165, 0.18);
}

/* 비포/애프터 갤러리 내 세로 배치 탭 대응 */
.service-gallery__info-panel .eco-tabs-container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    margin-top: 30px;
    gap: 8px;
}
.service-gallery__info-panel .eco-tab-btn {
    text-align: left;
    padding: 14px 24px;
    border-radius: 10px;
    width: 100%;
    max-width: 280px;
}

/* 반응형 그리드 보완 (PC) */
@media (min-width: 1025px) {
    .service-targets__grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

.scope-detail-panel {
    display: none;
    background: var(--color-white);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--color-line);
    box-shadow: var(--shadow-card);
    animation: fadeSlideIn 0.35s ease-out;
}
.scope-detail-panel.active {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 0;
    padding: 0;
}
.scope-img-wrap {
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 4 / 3;
}
.scope-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.scope-img-wrap:hover img {
    transform: scale(1.08);
}

/* 반응형 미디어 쿼리 통합 및 최적화 */
@media (max-width: 1024px) {
    .service-gallery__info-panel {
        min-width: 0;
    }
    .service-gallery__info-panel .eco-tabs-container {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        flex-direction: row;
        justify-content: flex-start;
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 8px;
        margin-top: 20px;
        margin-bottom: 24px;
        -webkit-overflow-scrolling: touch;
        gap: 8px;
        flex-wrap: nowrap;
    }
    .service-gallery__info-panel .eco-tab-btn {
        padding: 8px 18px;
        font-size: 13px;
        flex-shrink: 0;
        width: auto;
        text-align: center;
    }
    .scope-detail-panel.active {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .eco-tabs-container {
        justify-content: flex-start !important;
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 8px;
        margin-top: 20px;
        margin-bottom: 24px;
        -webkit-overflow-scrolling: touch;
        gap: 8px;
        flex-wrap: nowrap;
    }
    .eco-tab-btn {
        padding: 8px 18px;
        font-size: 13px;
        flex-shrink: 0;
    }
    .scope-detail-panel.active {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, 1fr);
    }
}


/* =================================================================
   회사명 회사소개 리뉴얼 페이지
   파일: /pages/about.html
   ================================================================= */


















































































.cb-vision__list .material-symbols-outlined {
    grid-row: span 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    color: var(--cb-green);
    background: rgba(21, 143, 105, 0.1);
    font-size: 30px;
}









































.cb-values__items .material-symbols-outlined {
    color: #62c495;
    font-size: 42px;
    margin-bottom: 28px;
}













































@media (max-width: 1180px) {















}

@media (max-width: 768px) {




































    .cb-vision__list .material-symbols-outlined {
        width: 46px;
        height: 46px;
        font-size: 26px;
    }






















}

/* =================================================================
   회사명 서브페이지 카테고리 탭 (section-tabs)
   ================================================================= */
.section-tabs {
  background-color: #f7f9f8;
  border-bottom: 1px solid rgba(0, 62, 165, 0.15);
  padding-block: 0;
  text-align: center;
}

.section-tabs__inner {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: var(--container, 1200px);
  box-sizing: border-box;
  margin-inline: auto;
  padding-inline: var(--page-gutter, 20px);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
}

.section-tabs__inner::-webkit-scrollbar {
  display: none; /* Safari and Chrome */
}

.section-tabs__link {
  display: inline-block;
  flex: 0 0 auto;
  padding: 16px 24px;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--color-ink-light, #5c6b65);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: color var(--ease), border-color var(--ease);
  white-space: nowrap;
}

.section-tabs__link:hover {
  color: var(--color-primary, #003ea5);
}

.section-tabs__link.is-active {
  color: var(--color-primary, #003ea5);
  border-bottom-color: var(--color-primary, #003ea5);
}

@media (max-width: 768px) {
  .section-tabs__inner {
    justify-content: flex-start;
  }
  .section-tabs__link {
    padding: 12px 16px;
    font-size: 0.95rem;
  }
}

/* =================================================================
   서브페이지 일관된 UI/UX 레이아웃 규격화 (데스크톱)
   ================================================================= */
/* 2. 타이틀 및 본문 텍스트 밀도 조절 (글꼴 가독성 확보) */
.section-header__text {
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--color-muted, #61716c);
  max-width: 720px;
  margin-inline: auto;
}

.service-overview p,
.service-targets p,
.service-features p,
.service-steps p {
  line-height: 1.55 !important; /* 일관성 있는 본문/설명문 줄간격 적용 */
  letter-spacing: -0.01em;
}

/* 3. 카드형 그리드 간격 일원화 (gap: 20px) */
.service-targets__grid,
.features-grid,
.service-steps__grid {
  display: grid;
  gap: 20px !important;
  margin-top: 45px;
}

/* 4. 카드 컴포넌트 내부 여백 및 그림자 표준화 */
.service-targets__card,
.features-card,
.service-steps__card {
  border-radius: var(--radius-lg, 16px) !important;
  border: 1px solid var(--color-line, rgba(19, 33, 29, 0.12)) !important;
  box-shadow: var(--shadow-card, 0 8px 24px rgba(19, 33, 29, 0.04)) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  background: var(--color-white, #fff);
  overflow: hidden;
}

.service-targets__card {
  padding: 28px 24px !important;
}

.service-targets__card:hover,
.features-card:hover,
.service-steps__card:hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--shadow-lift, 0 14px 34px rgba(19, 33, 29, 0.08)) !important;
}

/* =================================================================
   서브페이지 일관된 UI/UX 레이아웃 규격화 (모바일 반응형)
   ================================================================= */
@media (max-width: 760px) {
  /* 2. 타이틀 및 본문 텍스트 모바일 크기 최적화 */
  .section-header__eyebrow,
  .service-overview__eyebrow {
    line-height: 1.3 !important;
    margin-bottom: 8px !important;
  }

  .section-header__title,
  .service-overview__title {
    font-size: 1.68rem !important;
    line-height: 1.32 !important;
    margin-bottom: 10px !important;
  }

  .section-header__text,
  .service-overview__text {
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
  }

  /* 3. 모바일 카드 그리드 gap 일원화 및 단일 열 배치 */
  .service-targets__grid,
  .features-grid,
  .service-steps__grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin-top: 30px !important;
  }

  .service-steps__grid {
    margin-inline: 0 !important;
    padding-inline: 0 !important;
  }

  .service-steps__card {
    width: 100% !important;
  }

  /* 4. 카드 내부 패딩 모바일 맞춤 축소 및 타이포그래피 오버라이드 */
  .service-targets__card {
    padding: 20px 16px !important;
  }

  .service-targets__title,
  .features-card__title,
  .service-steps__card-title {
    line-height: 1.32 !important;
    margin-bottom: 10px !important;
  }

  .service-targets__text,
  .features-card__text,
  .service-steps__card-text {
    line-height: 1.5 !important;
  }

  .features-card__number,
  .service-steps__card-number {
    line-height: 1.3 !important;
    margin-bottom: 8px !important;
  }

  /* 하단 CTA 모바일 오버라이드 */
  .service-cta__title {
    line-height: 1.32 !important;
    margin-bottom: 10px !important;
  }
  .service-cta__text {
    line-height: 1.5 !important;
  }

  /* 5. 비포/애프터 드래그 핸들 모바일 핑거 탭 사이즈 강화 */
  .before-after-slider .before-after-slider__handle::after {
    width: 38px !important;
    height: 38px !important;
    font-size: 11px !important;
  }

  /* 6. 모바일 플로팅 퀵메뉴와의 본문/게시판 요소 겹침 방지 */
  .service-overview p,
.service-targets p,
.service-features p,
.service-steps p {
    line-height: 1.5 !important;
  }

}

/* =================================================================
   인증서 페이지 전용 레이아웃 오버라이드 및 단독 이미지 스타일
   ================================================================= */




/* =========================================================
   Template Inline & Placeholder Helper Classes
   ========================================================= */

/* Template Placeholder Helpers */
.template-cert-placeholder { display: flex; flex-direction: column; justify-content: stretch; height: 100%; min-height: 280px; }
.template-cert-placeholder .cert-img-wrap { display: grid; min-height: 250px; place-items: center; background: #f8fafc; border-radius: 12px; }
.template-map-placeholder { display: grid; min-height: 360px; place-items: center; padding: 24px; background: #f8fafc; border-radius: 16px; text-align: center; }




































@media (max-width: 1240px) {





}

@media (max-width: 1080px) {


















  /* 모바일 네비게이션 헤더 */




















  /* 모바일 네비게이션 본문 */




































  /* 모바일 네비게이션 푸터 */
























































  .site-nav__contact-btn {
    flex: 1;
    display: flex;
    flex-direction: row; /* 좌우 배치 */
    align-items: center;
    justify-content: center; /* 박스 내에서 정중앙(가운데) 정렬 */
    border-radius: 10px; /* 단독 카드 반경 */
    padding: 12px 10px; /* 좌우 균등 패딩 조율 */
    color: var(--color-white, #ffffff) !important;
    text-decoration: none;
    gap: 10px; /* 아이콘과 텍스트 영역의 간격 */
    transition: background 0.2s ease, transform 0.1s ease;
  }

  /* 1번째 카드 (대표전화): #17883b */
  .site-nav__contact-btn:nth-child(1) {
    background: #17883b;
  }

  .site-nav__contact-btn:nth-child(1):active {
    background: #11682c; /* 터치 시 짙은 그린 반전 */
  }

  /* 2번째 카드 (모바일): #36a74a */
  .site-nav__contact-btn:nth-child(2) {
    background: #36a74a;
  }

  .site-nav__contact-btn:nth-child(2):active {
    background: #2b8c3d; /* 터치 시 짙은 연두초록 반전 */
  }

  .site-nav__contact-btn i {
    font-size: 1.4rem;
    color: #ffffff; /* 짙은 배경 위 명시성을 위해 흰색 아이콘으로 변경 */
    flex-shrink: 0;
  }




















  .review-block .section-head {
    padding-top: 0;
  }

  .review-block .section-head p {
    max-width: 520px;
  }
















}

@media (max-width: 760px) {









  .hero h1,
  .hero h2 {
    font-size: 2.98rem;
    line-height: 1.04;
  }





  .button {
    width: 100%;
    min-height: 44px;
  }








































































}

@media (max-width: 420px) {


  .hero h1,
  .hero h2 {
    font-size: 2.16rem;
  }












}

/* 신규 프리미엄 컴포넌트 반응형 대응 */
@media (max-width: 1080px) {



}

@media (max-width: 760px) {




  .brand-promise__grid,
  .service-pillars,
  .customer-reviews,
  .faq-consult {
    padding-block: 60px;
  }

  /* About Section Top Model Image Banner inside .section */


  .about-model-wrap {
    max-width: 100%;
    width: 100%;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(9, 36, 57, 0.08);
  }
  .about-model-wrap img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
  }







  /* 전문가 소개 섹션 모바일 대응 */






















  /* 콜백 요청 섹션 모바일 대응 */


















  /* 공간별 작업 기준 모바일 대응 */






}

@media (max-width: 600px) {

}

/* ==========================================================================
   GNB Layout Bug Fixes
   ========================================================================== */
/* 데스크톱 해상도에서 모바일 전용 네비게이션 요소 강제 숨김 (GNB 솟구침 해결) */
@media (min-width: 1081px) {
  .site-nav__header,
  .site-nav__footer,

}

/* 모바일 GNB 오버레이 열렸을 때 퀵메뉴 레이어 간섭 방지 */


/* Corporate Company Subpage Specific Styles */

.dark .eyebrow {
  color: #9fc2df;
}
.eyebrow::before {
  content: "";
  width: 24px;
  height: 2px;
  background: currentColor;
}

.display {
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1.15;
  letter-spacing: -0.04em;
  font-weight: 800;
  margin: 0;
}
.section-title {
  font-size: clamp(26px, 3.5vw, 44px);
  line-height: 1.2;
  letter-spacing: -0.03em;
  font-weight: 800;
  margin: 0;
}
.lead {
  margin-top: 20px;
  color: var(--ds-muted);
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.65;
}
.dark .lead {
  color: rgba(255, 255, 255, 0.8);
}
.copy {
  color: var(--ds-muted);
  font-size: 15px;
  line-height: 1.7;
}
.dark .copy {
  color: rgba(255, 255, 255, 0.7);
}


/* Subhero */










/* Split Intro with Model Image (Grid-2 Layout) */
.split-intro-with-model {
  align-items: center;
  gap: clamp(36px, 5vw, 84px);
}
.split-intro-with-model .about-model-wrap {
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 16px 44px rgba(17, 30, 43, 0.1);
}
.split-intro-with-model .about-model-wrap img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Certificate Cards Layout */
.cert-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 36px);
}
@media (max-width: 991px) {
  .cert-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .cert-grid {
    grid-template-columns: 1fr;
  }
}
.cert-card {
  background: var(--color-white, #fff);
  border: 1px solid rgba(16, 24, 32, 0.09);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(17, 30, 43, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.cert-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(17, 30, 43, 0.12);
}
.cert-card__media {
  width: 100%;
  aspect-ratio: 4/5;
  background: #f4f7f9;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.cert-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 6px;
}
.cert-card__body {
  padding: 24px 20px;
}
.cert-card__tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: #0b3977;
  background: rgba(11, 57, 119, 0.08);
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: 10px;
}
.cert-card__title {
  font-size: 19px;
  font-weight: 750;
  color: #101820;
  margin-bottom: 6px;
}
.cert-card__desc {
  font-size: 14px;
  color: #61707f;
  line-height: 1.5;
  margin: 0;
}
.about-model-wrap img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Location Company Section & Navigation Buttons */
.location-company-grid {
  align-items: center;
  gap: clamp(32px, 5vw, 64px);
}
.location-company-info {
  background: #fff;
  padding: clamp(28px, 4vw, 42px);
  border-radius: 18px;
  border: 1px solid rgba(16, 24, 32, 0.08);
  box-shadow: 0 12px 36px rgba(17, 30, 43, 0.06);
}
.location-company-info .info-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #0b3977;
  background: rgba(11, 57, 119, 0.08);
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: 12px;
}
.location-company-info .info-company-name {
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 760;
  color: #101820;
  margin-bottom: 10px;
}
.location-company-info .info-company-address {
  font-size: 15px;
  color: #4a5868;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  line-height: 1.5;
}
.location-company-info .info-company-address svg {
  width: 18px;
  height: 18px;
  color: #0b3977;
  flex-shrink: 0;
}
.info-contact-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px dashed rgba(16, 24, 32, 0.12);
  margin-bottom: 28px;
}
.info-contact-list .company-contact-item {
  display: flex;
  align-items: center;
  font-size: 15px;
}
.info-contact-list .label {
  width: 100px;
  color: #61707f;
  font-weight: 600;
  flex-shrink: 0;
}
.info-contact-list .val {
  color: #101820;
  font-weight: 600;
}
.info-contact-list .val--phone {
  color: #0b3977;
  font-weight: 800;
}

/* Nav Buttons Group (Naver & Kakao Navi) */
.nav-buttons-group {
  display: flex;
  gap: 12px;
}
@media (max-width: 576px) {
  .nav-buttons-group {
    flex-direction: column;
  }
}
.btn-nav {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 18px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-nav svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.btn-nav--naver {
  background: #03cf5d;
  color: #fff;
  box-shadow: 0 4px 14px rgba(3, 207, 93, 0.25);
}
.btn-nav--naver:hover {
  background: #02b651;
  transform: translateY(-2px);
  color: #fff;
}
.btn-nav--kakao {
  background: #fee500;
  color: #191919;
  box-shadow: 0 4px 14px rgba(254, 229, 0, 0.35);
}
.btn-nav--kakao:hover {
  background: #fada00;
  transform: translateY(-2px);
  color: #191919;
}

/* Map Image Box with Pin */
.location-company-map {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(17, 30, 43, 0.1);
  aspect-ratio: 4/3;
  min-height: 340px;
}
.location-company-map iframe,
.location-company-map img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  display: block;
}

@media (max-width: 768px) {
  .location-company-map {
    width: 100%;
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .location-company-info .company-contact-item .val {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}





/* CTA Phone Boxes (exact design from index.html) */
.legacy-service-phone-boxes {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 0;
}
.legacy-service-phone-card {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  width: 290px;
  height: 84px;
  padding: 0 22px;
  background: #fff;
  border: 2px solid #e2e8f0;
  border-radius: 14px;
  text-decoration: none;
  color: #222;
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  box-sizing: border-box;
}
.legacy-service-phone-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0,0,0,.15);
}
.legacy-service-phone-card.main-phone {
  background: #0b3977 !important;
  color: #fff !important;
  border-color: #0b3977 !important;
}
.legacy-service-phone-card.main-phone small {
  color: rgba(255,255,255,.9) !important;
}
.legacy-service-phone-card.main-phone strong {
  color: #fff !important;
}
.legacy-service-phone-card.main-phone .cta-phone-icon {
  background: rgba(255,255,255,.2) !important;
  color: #fff !important;
}
.legacy-service-phone-card.sub-phone {
  border-color: #3fb131 !important;
  background: #ffffff !important;
}
.legacy-service-phone-card.sub-phone .cta-phone-icon {
  background: rgba(63,177,49,.12) !important;
  color: #3fb131 !important;
}
.legacy-service-phone-card.sub-phone strong {
  color: #1e293b !important;
}
.legacy-service-phone-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #f1f5f9;
  color: #0b3977;
  flex-shrink: 0;
}
.legacy-service-phone-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}
.legacy-service-phone-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}
.legacy-service-phone-text small {
  font-size: 13px;
  color: #64748b;
  font-weight: 700;
  margin-bottom: 1px;
  letter-spacing: -.01em;
}
.legacy-service-phone-text strong {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.2;
}

@media (max-width: 767px) {
  .legacy-service-phone-boxes {
    gap: 10px;
  }

  .legacy-service-phone-card {
    width: 280px;
    max-width: 100%;
    height: 76px;
    gap: 14px;
    padding: 0 18px;
  }

  .legacy-service-phone-icon {
    width: 42px;
    height: 42px;
  }

  .legacy-service-phone-icon svg {
    width: 20px;
    height: 20px;
  }

  .legacy-service-phone-text small {
    font-size: 12px;
  }

  .legacy-service-phone-text strong {
    font-size: 20px;
  }
}

/* =========================================================
   Corporate Company Design System Styles (design-system.css integration)
   ========================================================= */
.company-section {
  position: relative;
}

.company-section--soft {
  background: var(--ds-soft, #f4f7f9);
}

.company-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--color-primary-dark, #2d6ea3);
  margin-bottom: 22px;
}
.company-eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: currentColor;
}

.company-section__title {
  font-size: clamp(30px, 4vw, 56px);
  line-height: 1.13;
  letter-spacing: -0.045em;
  font-weight: 760;
  color: var(--color-ink, #101820);
}

.company-lead {
  margin-top: 24px;
  color: var(--color-muted, #61707f);
  max-width: 760px;
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: 1.65;
  letter-spacing: -0.018em;
}

.company-copy {
  color: var(--color-muted, #61707f);
  max-width: 760px;
  font-size: 16px;
  line-height: 1.7;
}

.company-grid--2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 6vw, 92px);
  align-items: center;
}

.company-grid--4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.company-grid--3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 40px);
}

.company-aside {
  font-size: 14px;
  color: var(--color-muted, #61707f);
  border-top: 1px solid var(--color-line, #dbe2e8);
  border-left: none;
  padding-top: 18px;
  padding-left: 0;
  margin-top: 34px;
  font-weight: 600;
}

/* Value Cards */
.company-value-card {
  padding: 34px 28px;
  border-top: 2px solid var(--color-ink, #101820);
  background: var(--color-white, #fff);
  border-radius: 0;
  box-shadow: none;
  min-height: 220px;
}
.company-value-card__number {
  font-size: 12px;
  font-weight: 800;
  color: var(--color-muted, #61707f);
  margin-bottom: 50px;
}
.company-value-card h3 {
  font-size: clamp(21px, 2vw, 30px);
  letter-spacing: -0.03em;
  margin-bottom: 14px;
  font-weight: 760;
  color: var(--color-ink, #101820);
}
.company-value-card p {
  color: var(--color-muted, #61707f);
  font-size: 15px;
  line-height: 1.65;
  margin: 0;
}

/* Media Gallery Aspect Ratio (4/5 portrait with implant-stat background overlay style) */
.company-media {
  overflow: hidden;
  background: #dfe6ea;
  border-radius: 18px;
  box-shadow: 0 18px 48px rgba(17,30,43,0.11);
  position: relative;
}
.company-media.portrait {
  aspect-ratio: 4/5;
  box-shadow: 0 18px 48px rgba(17, 30, 43, 0.15);
  background: none !important;
}
.company-media.portrait img {
  opacity: 1;
  pointer-events: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.company-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Dark Operating System Section */
.company-section--dark {
  background: #0d1a27;
  color: #fff;
}
.company-section--dark .company-section__title {
  color: #fff;
}
.company-process-list {
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: 0;
}
.company-process-list li {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.company-process-list li::before {
  counter-increment: step;
  content: "0" counter(step);
  font-weight: 800;
  font-size: 20px;
  color: #2d6ea3;
}
.company-process-list h3 {
  font-size: 21px;
  margin: 0 0 8px 0;
  color: #fff;
  font-weight: 750;
}
.company-process-list p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 15px;
  margin: 0;
  line-height: 1.65;
}

/* Band Image */
.company-band-image {
  height: clamp(320px, 48vw, 690px);
  position: relative;
  overflow: hidden;
}
.company-band-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}
.company-band-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(9, 20, 30, 0.56), transparent 58%);
}
.company-band-image .overlay-copy {
  position: absolute;
  left: clamp(20px, 4vw, 56px);
  bottom: clamp(20px, 4vw, 56px);
  max-width: 620px;
  color: #fff;
}
.company-band-image .overlay-copy .section-title {
  color: #fff;
  font-size: clamp(30px, 4vw, 56px);
}

/* CTA Section with Overlay Background */
.company-cta {
  padding: clamp(70px, 9vw, 120px) 0;
  background: linear-gradient(90deg, rgba(7, 38, 82, 0.88) 0%, rgba(7, 38, 82, 0.65) 60%, rgba(7, 38, 82, 0.4) 100%), url("../images/main/implant-statistics-background.webp") center/cover no-repeat !important;
  position: relative;
  overflow: hidden;
  color: #fff;
}
.company-cta .inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}
.company-cta h2 {
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1.12;
  letter-spacing: -0.05em;
  max-width: 760px;
  color: #fff;
}
.company-cta p {
  margin-top: 18px;
  color: rgba(255, 255, 255, 0.74);
  max-width: 640px;
  font-size: 16px;
}
.company-cta .btn {
  background: #fff;
  color: var(--color-primary, #0b3977);
  border-color: #fff;
  white-space: nowrap;
  min-height: 52px;
  padding: 0 28px;
  border-radius: 999px;
  font-weight: 760;
  font-size: 15px;
}

/* Responsive Media Queries matching design-system.css */
@media (max-width: 920px) {
  .company-grid--2 {
    grid-template-columns: 1fr;
  }
  .company-grid--4 {
    grid-template-columns: 1fr 1fr;
  }
  .company-grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
  .company-cta .inner {
    align-items: flex-start;
    flex-direction: column;
  }
}
@media (max-width: 600px) {
  .company-grid--4 {
    grid-template-columns: 1fr;
  }
  .company-grid--3 {
    grid-template-columns: 1fr;
  }
  .company-value-card {
    padding: 28px 0;
  }
  .company-value-card__number {
    margin-bottom: 28px;
  }
  .company-cta .btn {
    width: 100%;
  }
}
.btn:hover {
  background: #082956;
  transform: translateY(-2px);
}
.btn svg {
  width: 16px;
  height: 16px;
}

/* CTA Section */
.cta {
  padding: clamp(50px, 7vw, 90px) 0;
  background: #0b3977;
  color: #fff;
}

/* [공통 인클루드] 문의 */
#contact.cta {
  background:
    linear-gradient(90deg, rgba(5, 35, 80, 0.78), rgba(5, 35, 80, 0.42)),
    url("/assets/images/main/implant-statistics-background.webp") center / cover no-repeat;
}

.cta .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
.cta h2 {
  font-size: clamp(24px, 3.5vw, 42px);
  line-height: 1.2;
  margin: 0;
}
.cta p {
  margin: 12px 0 0 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 15px;
}
.cta .btn {
  background: #fff;
  color: #0b3977;
  white-space: nowrap;
}
.cta .btn:hover {
  background: #f0f4f8;
}

/* Utility Helpers extracted from Inline Styles */







@media (max-width: 900px) {

  .cta .inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 600px) {


}

.about-page .page-hero {
  background-image: linear-gradient(180deg, rgba(0, 12, 27, .42) 0%, rgba(0, 18, 45, .78) 100%), url("../images/main/home-hero-background.webp");
  background-position: center;
  background-size: cover;
}

.about-page .page-hero::before {
  display: none;
}

.about-page .page-hero__title,
.about-page .page-hero__text,
.about-page .page-hero__text span {
  color: #fff;
  text-shadow: 0 3px 22px rgba(0, 0, 0, .42);
}

.about-page .page-hero__text span {
  color: #fff !important;
}

.about-page .page-hero__text {
  max-width: 760px;
}

































@media (max-width: 768px) {









}

/*
 * Template-specific page presentation.
 * Kept separate from the shared design system so public HTML stays free of
 * inline styles and each template can be maintained without markup overrides.
 */

/*
 * Generic templates use the shared fixed header. Keep their hero directly
 * beneath that header and prevent the legacy body-level `.page-about` rule in
 * contents.css from adding an unintended 100px page offset.
 */
body.page-about,
body.page-certificates,
body.page-location,
body.page-privacy,
body.page-service-template {
  padding: 0;
}

body.page-about .site-main,
body.page-certificates .site-main,
body.page-location .site-main,
body.page-privacy .site-main,
body.page-service-template .site-main {
  padding-top: 0;
}













































/* The home template uses process cards instead of the legacy stats layout. */
.template-home .reason {
  min-height: 0;
}













.page-about .page-hero--support,
.page-certificates .page-hero--support,
.page-location .page-hero--support,
.page-privacy .page-hero--support {
  background:
    linear-gradient(115deg, rgba(0, 31, 84, 0.92), rgba(0, 86, 224, 0.62)),
    url("../images/common/placeholder.svg") center / cover;
}















































.template-faq {
  padding: 72px 0 112px;
}

.template-faq__intro {
  max-width: 720px;
  margin: 0 auto 38px;
  text-align: center;
}

.template-faq details {
  max-width: 920px;
  margin: 0 auto 12px;
  border: 1px solid #e2e9e5;
  border-radius: 14px;
  background: #fff;
}

.template-faq summary {
  padding: 22px 24px;
  cursor: pointer;
  font-weight: 700;
}

.template-faq p {
  margin: 0;
  padding: 0 24px 22px;
  color: #55605a;
  line-height: 1.75;
}





































.template-policy .notice {
  padding: 20px;
  border-radius: 12px;
  background: #edf3fc;
  color: #29456d;
}

/* Google Material Symbols Outlined Font Definition & Icons Styling */
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined' !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: 26px !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  display: inline-block !important;
  white-space: nowrap !important;
  word-wrap: normal !important;
  direction: ltr !important;
  -webkit-font-smoothing: antialiased !important;
}

.service-targets__icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 12px !important;
  background: #eef5fc !important;
  color: #0b3977 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 16px !important;
  flex-shrink: 0 !important;
  box-shadow: 0 4px 12px rgba(11, 57, 119, 0.08) !important;
}

.features-card__title {
  word-break: keep-all !important;
  overflow-wrap: break-word !important;
}

.features-card__text {
  word-break: keep-all !important;
  overflow-wrap: break-word !important;
  margin-bottom: 0 !important;
}

@media (max-width: 860px) {



}

@media (max-width: 760px) {





}

@media (max-width: 560px) {

}

/* Service Target Banner Images Styling */
.target-banner-img:hover img {
  transform: scale(1.05);
}
@media (max-width: 768px) {
  .service-target-banners {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin-top: 24px !important;
  }
}

/* =========================================================
   Unified Corporate Design System Overrides (company.html Standards)
   ========================================================= */
/* 1. Global Section Padding & Margins: common.css owns outer section geometry. */

/* 2. Unified Eyebrows (Category Labels) */
.company-eyebrow,
.section-header__eyebrow,
.eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: #2d6ea3 !important;
  margin-bottom: 16px !important;
}

/* 3. Unified Section Titles */
.company-section__title,
.section-header__title,
.section-title {
  font-size: clamp(26px, 3.8vw, 52px) !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  color: #101820 !important;
  margin-top: 0 !important;
  margin-bottom: 16px !important;
}

/* 4. Dark Theme Section Overrides */
.company-section--dark .company-section__title,
.section.dark .section-header__title,
.service-features--dark .section-header__title {
  color: #ffffff !important;
}
.company-section--dark .company-eyebrow,
.section.dark .section-header__eyebrow,
.service-features--dark .section-header__eyebrow {
  color: #9fc2df !important;
}

/* 5. Unified Section Headers Container */
.section-header {
  margin-bottom: clamp(28px, 3vw, 40px) !important;
  text-align: left !important;
}

/* 6. Unified Card Titles & Paragraph Spacing */
.features-card__title,
.service-steps__card-title {
  font-size: clamp(18px, 1.6vw, 22px) !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  color: #101820 !important;
  margin-top: 12px !important;
  margin-bottom: 10px !important;
}

.features-card__text,
.service-steps__card-text {
  font-size: 14.5px !important;
  line-height: 1.65 !important;
  color: #475569 !important;
}

/* 7. Unified Grid Gaps & Padding */
.features-grid {
  gap: clamp(20px, 3vw, 32px) !important;
  margin-top: clamp(36px, 4vw, 56px) !important;
}

.service-steps__grid {
  gap: clamp(16px, 2vw, 24px) !important;
  margin-top: clamp(32px, 4vw, 48px) !important;
}

/* Service Overview Text & Media Alignment Fix (Unified 5:5 Grid & Compact Spacing) */
.service-overview {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.service-overview__inner {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  align-items: center !important;
  gap: clamp(30px, 4vw, 64px) !important;
}

.service-overview__content {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  width: 100% !important;
}

.service-overview__title {
  font-size: clamp(28px, 3.5vw, 44px) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
  color: #101820 !important;
  margin-top: 0 !important;
  margin-bottom: 20px !important;
}

.service-overview__text {
  font-size: 16px !important;
  line-height: 1.68 !important;
  color: #475569 !important;
  margin-bottom: 0 !important;
}

.service-overview__media {
  width: 100% !important;
  height: 100% !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: 0 16px 40px rgba(11, 57, 119, 0.1) !important;
  border: 1px solid #e2e8f0 !important;
  aspect-ratio: 4 / 3 !important;
  max-height: 440px !important;
}

.service-overview__media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

@media (max-width: 992px) {
  .service-overview__inner {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .service-overview__media {
    aspect-ratio: 16 / 9 !important;
    max-height: 360px !important;
  }
}


/* Features Card Full Height Body Fix */
.features-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  align-items: stretch !important;
  gap: clamp(20px, 2.5vw, 32px) !important;
}

.features-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  background: #ffffff !important;
  border-radius: 18px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 8px 24px rgba(11, 57, 119, 0.06) !important;
  overflow: hidden !important;
  height: 100% !important;
}

.features-card__media {
  width: 40% !important;
  min-width: 140px !important;
  align-self: stretch !important;
  flex-shrink: 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

.features-card__media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.features-card__body {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  align-self: stretch !important;
  height: 100% !important;
  padding: clamp(20px, 2.2vw, 28px) clamp(22px, 2.5vw, 32px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
}


/* Features Card Zero Gap & Seamless Text Box Fix */
.features-grid .features-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 0 !important;
  margin: 0 !important;
  background: #ffffff !important;
  border-radius: 18px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 8px 24px rgba(11, 57, 119, 0.06) !important;
  overflow: hidden !important;
}

.features-grid .features-card__media {
  width: 40% !important;
  min-width: 140px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  align-self: stretch !important;
  flex-shrink: 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

.features-grid .features-card__media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.features-grid .features-card__body {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  border: none !important;
  outline: none !important;
  align-self: stretch !important;
  height: 100% !important;
  padding: clamp(20px, 2.2vw, 28px) clamp(22px, 2.5vw, 32px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
}


/* CTA Section Title White Text Override */
.cta .section-title,
section.cta .section-title,
.cta h2,
section#contact.cta .section-title {
  color: #ffffff !important;
}


/* Features Grid & Card Mobile Responsive Fix (768px & below) */
@media (max-width: 768px) {
  .features-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .features-grid .features-card,
  .features-card {
    flex-direction: column !important;
    align-items: stretch !important;
    min-height: auto !important;
    height: auto !important;
  }

  .features-grid .features-card__media,
  .features-card__media {
    width: 100% !important;
    min-width: 100% !important;
    height: 190px !important;
    max-height: 200px !important;
    flex-shrink: 0 !important;
  }

  .features-grid .features-card__media img,
  .features-card__media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .features-grid .features-card__body,
  .features-card__body {
    width: 100% !important;
    padding: 20px 20px 22px !important;
    box-sizing: border-box !important;
  }
}

/* HTML 인라인 <style> 외부화: pages/company.html */
/* company sections must grow with their responsive content */
        .company-section {
            --company-quick-clearance: clamp(64px, 8vw, 120px);
        }

        .company-section {
            height: auto;
            min-height: 0;
        }

        /* keep readable content clear of the fixed quick menu */
        .company-section__title,
        .company-lead,
        .company-copy,
        .company-aside,
        .company-value-card,
        .cert-card__body,
        .company-process-list li > div,
        .location-company-info,
        .company-cta .inner > :first-child {
            padding-inline-end: var(--company-quick-clearance);
        }

        .company-cta .inner > :last-child {
            margin-inline-end: var(--company-quick-clearance);
        }

        .company-contact-item:has(a[href^="mailto:"]) {
            flex-wrap: wrap;
            row-gap: 4px;
        }

        .company-contact-item:has(a[href^="mailto:"]) .label,
        .company-contact-item:has(a[href^="mailto:"]) .val {
            flex: 0 0 100%;
        }

        .site-footer .footer-info {
            padding-inline-end: var(--company-quick-clearance);
        }

/* 서비스 대상 섹션 공통 스타일 */
html body .service-target-banners {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 32px; margin-bottom: 40px;
}

html body .target-banner-img {
  border-radius: 16px; overflow: hidden; box-shadow: 0 10px 28px rgba(11, 57, 119, 0.08); aspect-ratio: 16/9;
}

html body .target-banner-img img {
  width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease;
}

html body .service-steps__card-body {
  padding: 24px 20px;
}

html body .service-steps__card-number {
  display: inline-block; width: fit-content; color: #0b3977; background: #eef5fc; padding: 3px 10px; border-radius: 20px; font-weight: 800; font-size: 12px; letter-spacing: 0.04em;
}

/* 회사 소개 페이지의 섹션별 여백 */
html body #greeting .company-lead {
  margin-top: 16px
}

html body #greeting .company-copy {
  margin-top: 22px
}

html body #greeting .company-aside {
  margin-top: 30px
}

html body #principles .company-grid--4,
html body .cert-grid,
html body .location-company-grid {
  margin-top: 48px
}

html body #certificates .company-lead,
html body #location .company-lead {
  margin-top: 12px
}

html body .location-company-map iframe {
  border:0;
}

/* =========================================================
   Homepage visual language integration
   ========================================================= */
/* Keep every page's structure and content, while sharing the homepage's
   content width, blue accent, and Gmarket heading hierarchy. */
body[data-cleaning-page-template="true"] {
  --page-home-blue: #0038b3;
  --page-home-blue-dark: #002778;
  --page-home-ink: #202020;
  color: var(--page-home-ink);
  font-family: "Pretendard", "Noto Sans KR", Arial, sans-serif;
}

body[data-cleaning-page-template="true"] .site-main .container {
  width: min(1300px, calc(100% - 80px));
  max-width: none;
}

body[data-cleaning-page-template="true"] .page-hero__title,
body[data-cleaning-page-template="true"] .service-overview__title,
body[data-cleaning-page-template="true"] .section-header__title,
body[data-cleaning-page-template="true"] .company-section__title {
  font-family: "Gmarket Sans", "Noto Sans KR", sans-serif;
}

body[data-cleaning-page-template="true"] .service-overview__eyebrow,
body[data-cleaning-page-template="true"] .section-header__eyebrow,
body[data-cleaning-page-template="true"] .company-eyebrow {
  color: var(--page-home-blue) !important;
  font-size: 13px !important;
  letter-spacing: 0.12em !important;
}

body[data-cleaning-page-template="true"] .company-eyebrow::before {
  background: var(--page-home-blue) !important;
}

body[data-cleaning-page-template="true"] .service-features--dark .section-header__eyebrow,
body[data-cleaning-page-template="true"] .section.dark .section-header__eyebrow,
body[data-cleaning-page-template="true"] .company-section--dark .company-eyebrow {
  color: #a9c7ff !important;
}

body[data-cleaning-page-template="true"] .button--primary {
  background: var(--page-home-blue);
  box-shadow: 0 12px 26px rgba(0, 56, 179, 0.18);
}

body[data-cleaning-page-template="true"] .button--primary:hover {
  background: var(--page-home-blue-dark);
  box-shadow: 0 16px 30px rgba(0, 39, 120, 0.22);
}

@media (max-width: 1280px) {
  body[data-cleaning-page-template="true"] .site-main .container {
    width: min(1120px, calc(100% - 64px));
  }
}

@media (max-width: 720px) {
  body[data-cleaning-page-template="true"] .site-main .container {
    width: calc(100% - 40px);
  }
}