@charset "utf-8";

/* ============================================================
   태성기초산업(주) — screen-ui.css
   ------------------------------------------------------------
   작성 규칙
   · 1rem = 10px (html font-size 62.5%)
   · 폰트: Noto Sans / Noto Sans KR
   · 폰트 크기 4단계 고정
       메인 타이틀 3.6rem / 서브 타이틀 2.4rem / 본문 1.8rem / 부가 1.5rem
   · 페이지 폭 1200px (좌우 패딩 없음), 480px 까지 반응형
   · 공통 클래스 = .ts-* / 페이지 특수 클래스 = .ts-{page}-*
   · 아래 순서 = [공통] → 페이지 노출 순서(index → 회사소개 → 사업영역 → 요금안내 → 작업현황 → 고객센터)
   ============================================================ */

@import url('/resources/css/default/normalize.css');

/* ========== 변수 ========== */
:root {
  --ts-orange:      #f47920;   /* 메인 포인트 */
  --ts-orange-2:    #ff8c3b;   /* 밝은 포인트 (그라데이션) */
  --ts-orange-dark: #e2660f;
  --ts-dark:        #333333;   /* 본문 텍스트 */
  --ts-heading:     #222222;   /* 제목 */
  --ts-gray:        #777777;   /* 보조 텍스트 */
  --ts-line:        #e5e5e5;   /* 구분선 */
  --ts-bg-soft:     #f7f7f7;   /* 옅은 배경 */
  --ts-navy:        #2b2b2b;   /* 다크 섹션 */

  --ts-fs-title:    3.6rem;    /* 메인 타이틀 */
  --ts-fs-sub:      2.4rem;    /* 서브 타이틀 */
  --ts-fs-body:     1.8rem;    /* 본문 */
  --ts-fs-small:    1.5rem;    /* 부가 문구 */

  --ts-width:       1200px;
}

/* ========== 기본 설정 ========== */
* { box-sizing: border-box; }

html { font-size: 62.5%; }            /* 1rem = 10px */

body {
  margin: 0;
  font-family: 'Noto Sans KR', 'Noto Sans', sans-serif;
  font-size: var(--ts-fs-body);
  font-weight: 400;
  line-height: 1.6;
  color: var(--ts-dark);
  letter-spacing: -0.02em;
  word-break: keep-all;
  background: #fff;
  -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; height: auto; vertical-align: top; border: 0; }
a { color: inherit; text-decoration: none; }
ul, ol, li { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }
table { border-collapse: collapse; border-spacing: 0; }

/* ========== 레이아웃 컨테이너 ========== */
/* 1200px 고정, 좌우 패딩 없음. 1200 이하에서는 100% */
.ts-container {
  width: var(--ts-width);
  margin: 0 auto;
}
@media (max-width: 1200px) {
  .ts-container { width: 100%; }
}

/* 페이지 메인 래퍼 (헤더/푸터 제외, 메인 영역만) */
.ts-main { width: 100%; overflow: hidden; }

/* 서브페이지 콘텐츠 세로 여백 */
.ts-page { padding: 70px 0 90px; }
@media (max-width: 768px) { .ts-page { padding: 40px 0 50px; } }

/* 좌우 안전 여백(모바일에서 텍스트가 화면 끝에 붙지 않도록 내부 블록에 적용) */
.ts-inset { padding-left: 0; padding-right: 0; }
@media (max-width: 1240px) { .ts-inset { padding-left: 20px; padding-right: 20px; } }

/* ========== 타이포 유틸 ========== */
.ts-t-title { font-size: var(--ts-fs-title); }
.ts-t-sub   { font-size: var(--ts-fs-sub); }
.ts-t-body  { font-size: var(--ts-fs-body); }
.ts-t-small { font-size: var(--ts-fs-small); }
.ts-point   { color: var(--ts-orange); }
.ts-strong  { font-weight: 700; }

/* ========== 공통 : 섹션 헤더 (아이콘 + 타이틀 + 설명) ========== */
.ts-sechead { text-align: center; margin-bottom: 46px; }
.ts-sechead__icon {
  display: block;
  width: 8.4rem; height: 8.4rem;
  margin: 0 auto;
  color: var(--ts-heading);
}
.ts-sechead__icon svg { width: 100%; height: 100%; display: block; }
.ts-sechead__title {
  font-size: var(--ts-fs-title);
  font-weight: 700;
  color: var(--ts-heading);
  line-height: 1.3;
}
.ts-sechead__title small { font-size: var(--ts-fs-body); font-weight: 400; color: var(--ts-gray); }
.ts-sechead__desc {
  margin-top: 1.6rem;
  font-size: var(--ts-fs-body);
  color: var(--ts-gray);
  line-height: 1.7;
}
@media (max-width: 480px) {
  .ts-sechead__title { font-size: var(--ts-fs-sub); }
  .ts-sechead__desc  { font-size: var(--ts-fs-small); }
}

/* ========== 공통 : [현장사진] 등 소제목 라벨 ========== */
.ts-label {
  text-align: center;
  font-size: var(--ts-fs-sub);
  font-weight: 500;
  color: var(--ts-heading);
  margin: 70px 0 30px;
}
.ts-label::before { content: "[ "; color: var(--ts-gray); }
.ts-label::after  { content: " ]"; color: var(--ts-gray); }

/* 카드 아이콘 (배지 공용) */
.ts-cardico { width: 2.2rem; height: 1.5rem; flex: 0 0 auto; vertical-align: middle; }

/* ========== 공통 : 4패널 특징 배너 (신뢰 포인트) — 1200px 폭 ========== */
.ts-features { width: 1200px; max-width: 100%; margin: 0 auto; }
.ts-feature + .ts-feature { margin-top: 16px; }   /* 패널 사이 간격 */
.ts-feature {
  position: relative;
  min-height: 40rem;              /* 4개 패널 동일 높이 (콘텐츠가 모두 안에 들어가도록) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: #fff;
  background-size: cover;
  background-position: center;
}
.ts-feature__inner {
  position: relative;
  width: 100%;
  max-width: 88rem;
  margin: 0 auto;
  padding: 4.5rem 5rem;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  text-align: center;
}
.ts-feature__title {
  font-size: var(--ts-fs-title);
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 1.8rem;
  text-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.ts-feature__title .ts-point { color: var(--ts-orange-2); }
.ts-feature__title .ts-quote { color: #ffd400; }
.ts-feature__desc {
  font-size: var(--ts-fs-body);
  line-height: 1.9;
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
}
.ts-feature__badge {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  margin-top: 2.2rem;
  font-size: var(--ts-fs-small);
  color: #35d0e0;
  border: 1px solid rgba(53,208,224,.6);
  border-radius: 3px;
  padding: .6rem 1.4rem;
}
@media (max-width: 1200px) { .ts-feature__inner { width: 100%; } }
@media (max-width: 480px) {
  .ts-feature { min-height: 28rem; }
  .ts-feature__inner { padding: 3rem 2rem; }
  .ts-feature__title { font-size: var(--ts-fs-sub); }
  .ts-feature__desc  { font-size: var(--ts-fs-small); }
}

/* ========== 공통 : 하단 전화 CTA 배너 — 1200px 폭 ========== */
.ts-callcta {
  display: block;
  width: 1200px; max-width: 100%; margin: 40px auto 0;   /* 위 마진 */
  background: linear-gradient(90deg, var(--ts-orange), var(--ts-orange-2));
  text-align: center;
  padding: 1rem 20px;                                    /* 높이 축소 */
  color: #fff;
}
.ts-callcta__label { font-size: var(--ts-fs-small); color: rgba(255,255,255,.85); margin-right: 1.2rem; }
.ts-callcta__tel {
  font-size: var(--ts-fs-title);
  font-weight: 700;
  letter-spacing: .02em;
  vertical-align: middle;
}
.ts-callcta__tel svg { width: 3rem; height: 3rem; vertical-align: -.4rem; margin-right: 1rem; fill: #fff; }
@media (max-width: 480px) {
  .ts-callcta__tel { font-size: var(--ts-fs-sub); display: block; margin-top: .8rem; }
  .ts-callcta__label { margin-right: 0; }
}

/* ========== 공통 : 반응형 표 (가로 스크롤) ========== */
.ts-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ts-table {
  width: 100%;
  min-width: 600px;
  font-size: var(--ts-fs-body);
  text-align: center;
}
.ts-table { border: 1px solid var(--ts-line); }
.ts-table th, .ts-table td {
  border: 1px solid var(--ts-line);
  padding: 1.6rem 1rem;
}
.ts-table thead th {
  background: var(--ts-orange);
  color: #fff;
  font-weight: 500;
  border-color: rgba(255,255,255,.45);   /* 헤더 구분선 (흰색 계열) */
}
.ts-table tbody th { background: var(--ts-bg-soft); font-weight: 500; }

/* ========== 공통 : 4패널 특징 배너 배경 ========== */
.ts-feature--1 { background-image: url('/resources/images/main/banner02.png'); }  /* 카드결제 */
.ts-feature--2 { background-image: url('/resources/images/main/banner01.png'); }  /* 성실·정직 */
.ts-feature--3 { background-image: url('/resources/images/sub/banner04.png'); }   /* NO.1 */
.ts-feature--4 { background-image: url('/resources/images/main/banner03.png'); }  /* 20년 노하우 */

/* ============================================================
   [1] index.php (홈)
   ============================================================ */
/* ---------- 메인 비주얼 슬라이더 (홈 상단 배너) ---------- */
.ts-hero { position: relative; width: 100%; overflow: hidden; }
.ts-hero__track { display: flex; transition: transform .6s ease; }
.ts-hero__slide {
  position: relative; flex: 0 0 100%; min-height: 56rem;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 40px 20px;
  color: #fff; background-size: cover; background-position: center;
}
.ts-hero__inner {
  position: relative; width: 100%; max-width: 88rem; margin: 0 auto;
  padding: 5rem; background: rgba(0,0,0,.5); border-radius: 4px;
}
.ts-hero__title { font-size: var(--ts-fs-title); font-weight: 700; line-height: 1.4; margin-bottom: 2rem; text-shadow: 0 2px 10px rgba(0,0,0,.55); }
.ts-hero__title .ts-point { color: var(--ts-orange-2); }
.ts-hero__desc { font-size: var(--ts-fs-body); line-height: 1.9; text-shadow: 0 1px 8px rgba(0,0,0,.6); margin-bottom: 3rem; }
.ts-hero__tel {
  display: inline-flex; align-items: center; gap: 1rem;
  background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.55); border-radius: 40px;
  padding: 1.3rem 3.6rem; font-size: var(--ts-fs-title); font-weight: 700; color: #fff;
}
.ts-hero__tel svg { width: 3rem; height: 3rem; fill: #fff; }
.ts-hero__badge {
  display: block; margin-top: 2.4rem; font-size: var(--ts-fs-small); color: #35d0e0;
}
.ts-hero__badge span { display: inline-flex; align-items: center; gap: .6rem; border: 1px solid rgba(53,208,224,.6); border-radius: 3px; padding: .6rem 1.4rem; }
.ts-hero__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 5rem; height: 5rem; border: 0; background: transparent; color: #fff;
  line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.5));
}
.ts-hero__arrow svg { width: 3.4rem; height: 3.4rem; }
.ts-hero__arrow:hover { opacity: .75; }
.ts-hero__arrow--prev { left: 30px; }
.ts-hero__arrow--next { right: 30px; }
.ts-hero__dots { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 5; display: flex; gap: 1rem; }
.ts-hero__dot { width: 1.2rem; height: 1.2rem; border-radius: 50%; border: 0; padding: 0; background: rgba(255,255,255,.5); cursor: pointer; }
.ts-hero__dot.is-active { background: var(--ts-orange); }
@media (max-width: 480px) {
  .ts-hero__slide { min-height: 44rem; }
  .ts-hero__inner { padding: 3rem 2rem; }
  .ts-hero__title { font-size: var(--ts-fs-sub); }
  .ts-hero__desc { font-size: var(--ts-fs-small); }
  .ts-hero__tel { font-size: var(--ts-fs-sub); padding: 1.1rem 2.6rem; }
  .ts-hero__arrow { width: 4rem; height: 4rem; }
}
/* 슬라이드1 전용 : 초록 전화문의 버튼 + 안내문구 */
.ts-hero__green {
  display: inline-flex; align-items: center; gap: .6rem;
  background: #2e9e3f; color: #fff; font-size: var(--ts-fs-sub); font-weight: 700;
  padding: 1rem 2.6rem; border-radius: 4px; margin-bottom: 1.8rem;
}
.ts-hero__green svg { width: 2.4rem; height: 2.4rem; fill: var(--ts-orange-2); }
.ts-hero__green .ts-point { color: var(--ts-orange-2); margin-right: .4rem; }
.ts-hero__note { font-size: var(--ts-fs-body); margin-bottom: 2.4rem; }
/* 슬라이더 슬라이드 배경 (홈 전용) */
.ts-hero__slide--b1 { background-image: url('/resources/images/main/banner01.png'); }  /* 작업자 */
.ts-hero__slide--b2 { background-image: url('/resources/images/main/banner02.png'); }  /* 카드결제 */
.ts-hero__slide--b3 { background-image: url('/resources/images/main/banner03.png'); }  /* 작업 현장 */
/* ---------- //메인 비주얼 슬라이더 ---------- */

/* 회사소개 (흰 배경 + 좌 사진 + 우 인용구 + 장식 프레임) */
.ts-company { background: #fff; padding: 90px 0 80px; }
.ts-company__grid {
  position: relative;
  display: grid; grid-template-columns: 1.5fr 1fr; align-items: start; gap: 0;
}
/* 좌측 사진 박스 (블루 틴트) — 좌측 화면 끝까지 확장, 인용구 프레임보다 위에 */
.ts-company__photo {
  position: relative; z-index: 2; min-height: 50rem;
  margin-left: min(0px, calc((1200px - 100vw) / 2));   /* 데스크탑에서 좌측 뷰포트 끝까지 */
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: #fff; border: 1px solid #dcdcdc;              /* 우측 박스와 동일한 테두리 두께 */
  background: url('/resources/images/main/company01.png') center/cover no-repeat;
}
.ts-company__photo::before { content: ""; position: absolute; inset: 0; background: rgba(30,74,112,.7); }
/* 빗금 장식 */
.ts-company__hatch { position: absolute; z-index: 2; background: repeating-linear-gradient(-45deg, #d2d2d2 0 1px, transparent 1px 6px); }
.ts-company__hatch--bottom { left: 0; bottom: -1.6rem; width: calc(100% + 1.6rem); height: 1.6rem; }
.ts-company__hatch--right  { top: 0; right: -1.6rem; width: 1.6rem; height: 100%; }
.ts-company__inner { position: relative; z-index: 3; padding: 30px; }
.ts-company__tick { display: block; width: 2px; height: 22px; background: #fff; margin: 0 auto 1.6rem; transform: rotate(26deg); opacity: .9; }
.ts-company__label { display: block; font-size: var(--ts-fs-sub); font-weight: 700; margin-bottom: 2.8rem; }
.ts-company__desc { font-size: var(--ts-fs-body); line-height: 1.9; color: rgba(255,255,255,.9); margin-bottom: 3.2rem; }
.ts-company__more {
  display: inline-flex; align-items: center; gap: 1.6rem;
  font-size: var(--ts-fs-small); letter-spacing: .35em; color: #fff;
  padding-bottom: .6rem; border-bottom: 1px solid rgba(255,255,255,.55);
}
.ts-company__more svg { width: 3.4rem; height: 1rem; }
/* 우측 인용구 (회색 테두리 박스) — 사진 뒤로 겹치고 살짝 내려서 우측 끝까지 확장 */
.ts-company__quote {
  position: relative; z-index: 1; color: #666;
  margin-top: 7rem;                                     /* 살짝 아래로 */
  margin-left: -19rem;                                  /* 사진 뒤로 깊게 겹침 */
  margin-right: min(0px, calc((1200px - 100vw) / 2));   /* 우측 뷰포트 끝까지 */
  min-height: 50rem;                                    /* 좌측 이미지와 동일한 높이 */
  border: 10px solid #dcdcdc;
  display: flex; align-items: center; justify-content: center;
}
.ts-company__quote-in { width: fit-content; margin: 0 auto; }
.ts-company__qline { display: flex; justify-content: space-between; font-size: var(--ts-fs-title); font-weight: 400; line-height: 1.6; }
.ts-company__qlast { font-size: var(--ts-fs-title); font-weight: 400; line-height: 1.6; letter-spacing: .1em; white-space: nowrap; }
.ts-company__qmark { display: block; font-size: var(--ts-fs-title); font-weight: 700; color: #9a9a9a; line-height: 1; }
.ts-company__qmark--open { text-align: left; margin-bottom: .6rem; }
.ts-company__qmark--close { text-align: right; margin-top: .6rem; }
@media (max-width: 900px) {
  .ts-company__grid { grid-template-columns: 1fr; gap: 40px; }
  .ts-company__photo { margin-left: 0; }
  .ts-company__quote { margin: 0; min-height: auto; padding: 4rem 2rem; }
}
@media (max-width: 480px) {
  .ts-company { padding: 50px 0; }
  .ts-company__quote p { font-size: var(--ts-fs-sub); letter-spacing: .3em; }
}

/* 홈 섹션 공통 타이틀 */
.ts-home-sect { padding: 80px 0; }
.ts-home-sect__title {
  text-align: center; font-size: var(--ts-fs-title); font-weight: 700; color: var(--ts-heading);
  margin-bottom: 40px;
}
.ts-home-sect__title::before { content: ""; display: block; width: 2px; height: 22px; background: var(--ts-heading); margin: 0 auto 1.8rem; transform: rotate(26deg); }
@media (max-width: 768px) { .ts-home-sect { padding: 50px 0; } .ts-home-sect__title { font-size: var(--ts-fs-sub); } }

/* 작업현황 미리보기 그리드 */
.ts-workgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; align-items: start; margin-bottom: 40px;}
.ts-work-card { display: block; position: relative; overflow: hidden; border-radius: 4px; }
.ts-work-card:nth-child(even) { margin-top: 40px; }   /* 지그재그 (2·4번째 아래로) */
.ts-work-card__thumb { position: relative; padding-top: 92%; overflow: hidden; }
.ts-work-card__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s, filter .3s; }
.ts-work-card:hover .ts-work-card__thumb img { transform: scale(1.06); filter: brightness(0.55); }
.ts-work-card__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(transparent, rgba(0,0,0,.8));
  color: #fff; font-size: var(--ts-fs-small); line-height: 1.4;
  padding: 26px 12px 12px; opacity: 0; transition: opacity .3s;
}
.ts-work-card:hover .ts-work-card__cap { opacity: 1; }
@media (max-width: 768px) {
  .ts-workgrid { grid-template-columns: repeat(2, 1fr); }
  .ts-work-card:nth-child(even) { margin-top: 0; }   /* 모바일에서는 지그재그 해제 */
}

/* 사업영역 서비스 카드 */
.ts-svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ts-svc-card {
  position: relative; min-height: 34rem; display: flex; align-items: flex-start; justify-content: center;
  text-align: center; color: #fff; overflow: hidden; border-radius: 4px;
  background-size: cover; background-position: center;
}
.ts-svc-card::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.5); transition: background .3s; }
.ts-svc-card:hover::before { background: rgba(0,0,0,.35); }
.ts-svc-card__inner { position: relative; width: 100%; padding: 7rem 30px 4rem; }
.ts-svc-card__icon { width: 5rem; height: 5rem; margin: 0 auto 2.6rem; }
.ts-svc-card__icon svg { width: 100%; height: 100%; fill: none; stroke: #fff; }
.ts-svc-card__title { font-size: var(--ts-fs-sub); font-weight: 700; margin-bottom: 1.4rem; }
.ts-svc-card__desc { font-size: var(--ts-fs-small); line-height: 1.7; color: rgba(255,255,255,.9); }
.ts-svc-card--demo  { background-image: url('/resources/images/main/business01.png'); }  /* 철거 */
.ts-svc-card--waste { background-image: url('/resources/images/main/business02.png'); }  /* 폐기물 */
.ts-svc-card--house { background-image: url('/resources/images/main/business03.png'); }  /* 가정집 */
@media (max-width: 768px) { .ts-svc-grid { grid-template-columns: 1fr; } }

/* 홈 고객센터 CTA (배경 이미지 + 문구 + 견적문의 버튼) */
.ts-home-cs {
  position: relative;
  background: url('/resources/images/main/bottom01.png') center/cover no-repeat;
  color: #fff; text-align: center; padding: 70px 20px;
}
.ts-home-cs::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.66); }
.ts-home-cs > * { position: relative; z-index: 1; }
.ts-home-cs__tick { display: block; width: 2px; height: 20px; background: #fff; margin: 0 auto 1.2rem; transform: rotate(26deg); opacity: .9; }
.ts-home-cs__label { display: block; font-size: var(--ts-fs-sub); font-weight: 700; margin-bottom: 1.6rem; }
.ts-home-cs__desc { font-size: var(--ts-fs-body); color: rgba(255,255,255,.85); margin-bottom: 1.4rem; }
.ts-home-cs__tel { display: block; font-size: var(--ts-fs-title); font-weight: 700; color: var(--ts-orange-2); letter-spacing: .02em; margin-bottom: 2.8rem; }
.ts-home-cs__btns { display: flex; justify-content: center; gap: 1.4rem; }
.ts-home-cs__btn { display: inline-block; font-size: var(--ts-fs-small); color: #fff; border: 1px solid rgba(255,255,255,.6); border-radius: 40px; padding: 1.2rem 4.4rem; }
.ts-home-cs__btn:hover { background: rgba(255,255,255,.14); }
@media (max-width: 480px) { .ts-home-cs__tel { font-size: var(--ts-fs-sub); } }

/* ============================================================
   [2] 회사소개 : greeting.php (인사말)
   ============================================================ */
.ts-greet { position: relative; margin-bottom: 70px; }
/* 좌측 사진 : 크기 축소 후 오렌지 박스 위로 겹침 */
.ts-greet > .ts-greet__photo {
  position: absolute; z-index: 2; top: 0; left: 0; width: 50%;
}
.ts-greet > .ts-greet__photo img { width: 100%; display: block; }
/* 사진 하단 빗금 (모서리까지 연장) */
.ts-greet > .ts-greet__photo::after {
  content: ""; position: absolute; z-index: 3;
  left: 0; bottom: -16px; width: calc(100% + 16px); height: 16px;
  background: repeating-linear-gradient(-45deg, #cfcfcf 0 1px, transparent 1px 6px);
}
/* 사진 우측 빗금 */
.ts-greet > .ts-greet__photo::before {
  content: ""; position: absolute; z-index: 3;
  top: 0; right: -16px; width: 16px; height: 100%;
  background: repeating-linear-gradient(-45deg, #cfcfcf 0 1px, transparent 1px 6px);
}
/* 오렌지 박스 : 사진이 위로 겹치도록 아래로 내림 */
.ts-greet__grid {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center;
  border: 3px solid var(--ts-orange);
  margin-top: 48px; padding: 35px 44px;
  top: 40px; left: 40px; z-index: 10;
  width: calc(100% - 40px);   /* left:40px 만큼 폭을 줄여 우측이 1200px 안에 머물게 */
}
.ts-greet__grid > .ts-greet__photo { align-self: stretch; }  /* 빈 좌측 셀(자리 확보) */
.ts-greet__text h3 { font-size: var(--ts-fs-sub); color: var(--ts-heading); line-height: 1.5; margin-bottom: 2.2rem; }
.ts-greet__text p { font-size: var(--ts-fs-small); line-height: 1.9; color: var(--ts-dark); margin-bottom: 1.4rem; }
.ts-greet__text p.is-thanks { color: var(--ts-gray); }
@media (max-width: 768px) {
  .ts-greet > .ts-greet__photo { position: static; width: 100%; margin: 0 auto; }
  .ts-greet > .ts-greet__photo::after,
  .ts-greet > .ts-greet__photo::before { display: none; }   /* 상단 이미지 빗금 제거 */
  .ts-greet__grid {
    grid-template-columns: 1fr; gap: 0;
    margin-top: 16px; padding: 24px;
    top: 0; left: 0; width: 100%;      /* 오프셋 해제 → 가운데 정렬 */
    text-align: left;
  }
  .ts-greet__grid > .ts-greet__photo { display: none; }
}

/* 주 사업분야 */
.ts-bizarea__title { text-align: center; font-size: var(--ts-fs-title); font-weight: 700; color: var(--ts-heading); margin-bottom: 40px; }
.ts-bizarea__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.ts-bizcard { position: relative; overflow: hidden; }
.ts-bizcard__thumb { position: relative; aspect-ratio: 292 / 206; }
.ts-bizcard__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ts-bizcard__name {
  position: absolute; left: 0; right: 0; bottom: 0; text-align: center;
  background: rgba(0,0,0,.55); color: #fff; font-size: var(--ts-fs-body); padding: 1rem;
}
.ts-bizcard--lead {
  background: var(--ts-orange); color: #fff; display: flex; flex-direction: column; justify-content: center;
  padding: 24px;
}
.ts-bizcard--lead .ts-bizcard__icon { width: 4rem; height: 4rem; margin-bottom: 1.4rem; }
.ts-bizcard--lead .ts-bizcard__icon svg { width: 100%; height: 100%; fill: none; stroke: #fff; }
.ts-bizcard--lead p { font-size: var(--ts-fs-small); line-height: 1.7; }
@media (max-width: 768px) { .ts-bizarea__grid { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   [2] 회사소개 : location.php (오시는길)
   ============================================================ */
.ts-map { width: 100%; border: 1px solid var(--ts-line); }
.ts-map img { width: 100%; display: block; }
.ts-map iframe { width: 100%; height: 450px; display: block; border: 0; }
@media (max-width: 480px) { .ts-map iframe { height: 320px; } }
.ts-addr { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 20px; }
.ts-addr__item {
  display: flex; align-items: center; gap: 1.4rem;
  border: 1px solid var(--ts-line); padding: 2rem 2.4rem; font-size: var(--ts-fs-body);
}
.ts-addr__icon { width: 3.4rem; height: 3.4rem; flex: 0 0 auto; color: var(--ts-orange); }
.ts-addr__icon svg { width: 100%; height: 100%; }
.ts-addr__label { font-weight: 700; color: var(--ts-heading); margin-right: .6rem; }
@media (max-width: 768px) { .ts-addr { grid-template-columns: 1fr; } }

/* ============================================================
   [3] 사업영역 : demolition.php (철거) — 프로세스 STEP
   ============================================================ */
.ts-process { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.ts-step { border: 1px solid var(--ts-line); background: #fff; overflow: hidden; }
.ts-step__thumb { position: relative; aspect-ratio: 362 / 240; }  /* 8개 이미지 동일 크기(크롭 비율 고정) */
.ts-step__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ts-step__no {
  position: absolute; left: 0; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  min-width: 9.4rem; height: 4.2rem; padding: 0 1.4rem;   /* 이미지에 잘려 들어간 배지를 완전히 덮음 */
  background: var(--ts-orange); color: #fff;
  font-size: var(--ts-fs-small); font-weight: 700; letter-spacing: .05em;
}
.ts-step__foot { align-items: center; padding: 1.8rem; text-align: center; }
.ts-step__label { font-size: var(--ts-fs-body); color: var(--ts-heading); font-weight: 500; }
@media (max-width: 768px) { .ts-process { grid-template-columns: 1fr; } }

/* 공통 : 현장사진 갤러리 그리드 */
.ts-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.ts-gallery__cell { position: relative; padding-top: 100%; overflow: hidden; }
.ts-gallery__cell img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.ts-gallery__cell:hover img { transform: scale(1.06); }
@media (max-width: 480px) { .ts-gallery { grid-template-columns: repeat(2, 1fr); } }
/* 철거 현장사진 : 전체 1080x710 (4x2, gap 12px → 셀 261x349) */
.ts-gallery--field { width: 1080px; max-width: 100%; margin: 0 auto; }
.ts-gallery--field .ts-gallery__cell { padding-top: 0; aspect-ratio: 261 / 349; }
/* 폐기물 현장사진 : 전체 1080x350 (4x1, gap 12px → 셀 261x350) */
.ts-gallery--field-w { width: 1080px; max-width: 100%; margin: 0 auto; }
.ts-gallery--field-w .ts-gallery__cell { padding-top: 0; aspect-ratio: 261 / 350; }

/* ============================================================
   [3] 사업영역 : waste.php (폐기물) — 분류 그리드
   ============================================================ */
.ts-catgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.ts-catcard { position: relative; overflow: hidden; }
.ts-catcard__thumb { position: relative; padding-top: 100%; }
.ts-catcard__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ts-catcard__name {
  position: absolute; left: 0; right: 0; bottom: 0; text-align: center;
  background: rgba(0,0,0,.6); color: #fff; font-size: var(--ts-fs-body); padding: 1rem .4rem; letter-spacing: .1em;
}
@media (max-width: 768px) { .ts-catgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .ts-catgrid { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   [3] 사업영역 : house.php (가정집) — 지그재그
   ============================================================ */
/* 원본처럼 이미지끼리 모서리가 닿는 지그재그 (셀 사이 여백 0) */
.ts-zigzag__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.ts-zigzag__row:nth-child(even) .ts-zigzag__photo { order: 2; }
.ts-zigzag__photo { line-height: 0; }
.ts-zigzag__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ts-zigzag__text {
  align-self: center; max-width: 44rem;
  padding: 2rem 4rem;
  font-size: var(--ts-fs-body); line-height: 1.9; color: var(--ts-dark);
}
/* 텍스트를 가운데(이미지 경계) 쪽으로 붙임 */
.ts-zigzag__row:nth-child(odd)  .ts-zigzag__text { justify-self: start; text-align: start; }  /* 우측 셀 → 좌측(가운데)에 */
.ts-zigzag__row:nth-child(even) .ts-zigzag__text { justify-self: end; text-align: end; }    /* 좌측 셀 → 우측(가운데)에 */
@media (max-width: 768px) {
  .ts-zigzag__row { grid-template-columns: 1fr; }
  .ts-zigzag__row:nth-child(even) .ts-zigzag__photo { order: 0; }
  .ts-zigzag__text { max-width: none; justify-self: stretch; padding: 2.4rem 0.5rem; }
  .ts-zigzag__row:nth-child(odd)  .ts-zigzag__text { justify-self: start; text-align: start; } 
  .ts-zigzag__row:nth-child(even) .ts-zigzag__text { justify-self: start; text-align: start; }
}

/* 가정집 현장사진 : Before / After (마우스 오버 전환) */
.ts-beforeafter {
  display: flex; width: 875px; max-width: 100%; margin: 50px auto 0;
  height: 310px; border: 1px solid var(--ts-line); overflow: hidden;
}
.ts-ba__label {
  flex-grow: 161; flex-basis: 0; min-width: 0;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; padding: 2rem 1rem; background: #fff; position: relative;
}
.ts-ba__title { font-size: var(--ts-fs-sub); font-weight: 700; color: var(--ts-heading); margin-bottom: 1.4rem; }
.ts-ba__desc  { font-size: var(--ts-fs-body); line-height: 1.6; color: var(--ts-gray); }
.ts-ba__hint  { position: absolute; left: 0; right: 0; bottom: 0; font-size: var(--ts-fs-small); color: var(--ts-gray); background: var(--ts-bg-soft); padding: 1rem 0; }
.ts-ba__item { flex: 1 1 0; min-width: 0; position: relative; }   /* 3장 균등 폭(기존 인라인 flex-grow 대체) */
.ts-ba__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ts-ba__after { opacity: 0; transition: opacity .35s ease; }
.ts-ba__item:hover .ts-ba__after { opacity: 1; }
@media (max-width: 768px) {
  .ts-beforeafter { flex-wrap: wrap; height: auto; }
  .ts-ba__label { flex: 1 1 100%; padding: 2.4rem 1rem 4.6rem; }
  /* 3장을 균등하게 한 줄 배치(늘어남 방지, aspect-ratio 계산 위해 % basis 유지) */
  .ts-ba__item { flex: 1 1 33.333% !important; max-width: 33.333%; aspect-ratio: 236 / 309; }
}

/* ============================================================
   [4] 요금안내 : pricing.php
   ============================================================ */
/* 탭 */
.ts-tabs { display: flex; border-bottom: 2px solid var(--ts-orange); margin-bottom: 50px; }
.ts-tab {
  flex: 1; background: #fafafa; border: 1px solid var(--ts-line); border-bottom: 0;
  margin-left: -1px; font-family: inherit; font-size: var(--ts-fs-body); font-weight: 500;
  color: var(--ts-gray); padding: 1.8rem 1rem; cursor: pointer; transition: color .2s;
}
.ts-tab:first-child { margin-left: 0; }
.ts-tab.is-active {
  position: relative; background: #fff; color: var(--ts-orange); font-weight: 700;
  border-top: 2px solid var(--ts-orange);
}
.ts-tab.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: #fff; }
.ts-tab-panel { display: none; }
.ts-tab-panel.is-active { display: block; }
@media (max-width: 768px) {
  .ts-tabs { flex-wrap: wrap; }
  .ts-tab { flex: 1 0 100%; margin-left: 0; border: 1px solid var(--ts-line); border-bottom: 0; }
}
.ts-price-block { margin-bottom: 20px; }
.ts-price-block__title { font-size: var(--ts-fs-sub); font-weight: 700; color: var(--ts-heading); margin-bottom: 20px; padding-left: 1.4rem; border-left: 4px solid var(--ts-orange); }
.ts-price-block__top { display: grid; grid-template-columns: 42% 1fr; gap: 26px; align-items: stretch; margin-bottom: 26px; }
.ts-price-block__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ts-price-block__info { display: flex; flex-direction: column; min-width: 0; }   /* 표가 컬럼을 넘겨 페이지를 밀지 않도록 */
.ts-price-block__info h4 { font-size: var(--ts-fs-body); font-weight: 700; color: var(--ts-heading); margin-bottom: 1.2rem; }
.ts-price-ask { background: var(--ts-bg-soft); text-align: center; padding: 2.6rem; margin-top: 1.4rem; }
.ts-price-ask p { font-size: var(--ts-fs-sub); font-weight: 500; color: var(--ts-heading); margin-bottom: 1.4rem; }
.ts-price-ask__tel { display: inline-block; background: var(--ts-orange); color: #fff; font-size: var(--ts-fs-sub); font-weight: 700; border-radius: 40px; padding: 1.2rem 3.4rem; }
.ts-notice-title { font-size: var(--ts-fs-body); font-weight: 700; color: var(--ts-heading); margin-bottom: 1.6rem; }
.ts-notice-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ts-notice-cards--4 { grid-template-columns: repeat(4, 1fr); }
.ts-notice-card { border: 1px solid var(--ts-line); padding: 2rem 2.4rem 2.4rem; min-height: 14rem; }
.ts-notice-card__no { display: block; text-align: right; font-size: var(--ts-fs-title); font-weight: 700; color: #e2e2e2; line-height: 1; margin-bottom: 1rem; }
.ts-notice-card p { font-size: var(--ts-fs-small); line-height: 1.7; word-break: normal; }
.ts-notice-card .ts-point { color: var(--ts-orange); }
@media (max-width: 768px) {
  .ts-price-block__top { grid-template-columns: 1fr; }
  .ts-notice-cards, .ts-notice-cards--4 { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .ts-price-ask { padding: 2rem 1.4rem; }
  .ts-price-ask p { font-size: var(--ts-fs-body); }
  .ts-price-ask__tel { font-size: var(--ts-fs-body); padding: 1.1rem 2.6rem; max-width: 100%; }
}

/* ============================================================
   [5] 작업현황 : work.php
   ============================================================ */
.ts-notice-bar { background: var(--ts-bg-soft); border: 1px solid var(--ts-line); font-size: var(--ts-fs-small); color: var(--ts-gray); padding: 1.4rem 2rem; margin-bottom: 30px; }
.ts-count { font-size: var(--ts-fs-body); color: var(--ts-heading); margin-bottom: 18px; }
.ts-count strong { color: var(--ts-orange); }
.ts-gallgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ts-gallcard { border: 1px solid var(--ts-line); overflow: hidden; display: block; }
.ts-gallcard__thumb { position: relative; padding-top: 88%; overflow: hidden; }
.ts-gallcard__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.ts-gallcard:hover .ts-gallcard__thumb img { transform: scale(1.06); }
.ts-gallcard__title {
  font-size: var(--ts-fs-small); line-height: 1.5; color: var(--ts-dark); padding: 1.6rem;
}
.ts-gallcard__title span {
  display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; overflow: hidden; white-space: normal;
  text-overflow: ellipsis;
}
@media (max-width: 768px) { .ts-gallgrid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
.ts-count__page { color: var(--ts-gray); font-size: var(--ts-fs-small); font-weight: 400; }
/* 페이지네이션 */
.ts-pager { display: flex; justify-content: center; align-items: center; gap: .6rem; margin-top: 40px; }
.ts-pager__num, .ts-pager__arrow {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 4rem; height: 4rem; padding: 0 .8rem;
  border: 1px solid var(--ts-line); font-size: var(--ts-fs-small); color: var(--ts-dark);
}
.ts-pager__num:hover, .ts-pager__arrow:hover { border-color: var(--ts-orange); color: var(--ts-orange); }
.ts-pager__num.is-active { background: var(--ts-orange); border-color: var(--ts-orange); color: #fff; font-weight: 700; }
.ts-pager__arrow.is-disabled { color: #ccc; pointer-events: none; }

/* 작업현황 상세보기 (게시판 view) */
.ts-view { border-top: 2px solid var(--ts-heading); }
.ts-view__head { padding: 2.6rem 2rem; border-bottom: 1px solid var(--ts-line); background: var(--ts-bg-soft); }
.ts-view__title { font-size: var(--ts-fs-sub); font-weight: 700; color: var(--ts-heading); line-height: 1.4; margin-bottom: 1.6rem; }
.ts-view__meta { display: flex; flex-wrap: wrap; gap: 2.4rem; font-size: var(--ts-fs-small); color: var(--ts-gray); }
.ts-view__meta-k { color: var(--ts-heading); font-weight: 500; margin-right: .8rem; }
.ts-view__body { padding: 4rem 2rem; border-bottom: 1px solid var(--ts-line); min-height: 20rem; }
.ts-view__figure { text-align: center; margin-bottom: 3rem; }
.ts-view__figure img { max-width: 100%; }
.ts-view__body img { max-width: 100%; height: auto; }
.ts-view__body p { margin: 0 0 1.4rem; text-align: center; }
.ts-view__text { font-size: var(--ts-fs-body); line-height: 1.9; color: var(--ts-dark); }
.ts-view__nav { border-bottom: 1px solid var(--ts-line); }
.ts-view__nav-row { display: flex; align-items: center; gap: 2rem; padding: 1.6rem 2rem; font-size: var(--ts-fs-body); }
.ts-view__nav-row + .ts-view__nav-row { border-top: 1px dashed var(--ts-line); }
.ts-view__nav-k { flex: 0 0 8rem; color: var(--ts-heading); font-weight: 500; }
.ts-view__nav-link { color: var(--ts-dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-view__nav-link:hover { color: var(--ts-orange); text-decoration: underline; }
.ts-view__nav-none { color: var(--ts-gray); }
.ts-view__foot { display: flex; justify-content: center; margin-top: 3rem; }
.ts-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 12rem; padding: 1.3rem 3rem; text-align: center;
  font-size: var(--ts-fs-body); font-weight: 500; border-radius: 3px;
}
.ts-btn--list { background: var(--ts-heading); color: #fff; }
.ts-btn--list:hover { background: #000; }
@media (max-width: 480px) {
  .ts-view__nav-k { flex-basis: 6rem; }
  .ts-view__body { padding: 3rem 0; }
  .ts-view__head { padding: 2rem 0; background: none; }
}

/* ============================================================
   [6] 고객센터 : inquiry.php / review.php (게시판)
   ============================================================ */
.ts-board__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 12px; }
.ts-board__list { width: 100%; min-width: 720px; font-size: var(--ts-fs-body); }
.ts-board__list th, .ts-board__list td { padding: 1.6rem 1rem; border-bottom: 1px solid var(--ts-line); text-align: center; }
.ts-board__list thead th { border-top: 2px solid var(--ts-heading); background: var(--ts-bg-soft); font-weight: 500; }
.ts-board__list .is-subject { text-align: left; }
.ts-board__list .is-subject a:hover { color: var(--ts-orange); }
.ts-board__list .is-notice { background: #fff7f1; font-weight: 500; }
.ts-badge { display: inline-block; font-size: var(--ts-fs-small); border-radius: 3px; padding: .3rem 1rem; }
.ts-badge--ing { background: var(--ts-orange); color: #fff; }
.ts-badge--wait { background: #eee; color: var(--ts-gray); }
.ts-board__empty { text-align: center; padding: 8rem 2rem; color: var(--ts-gray); font-size: var(--ts-fs-body); border-bottom: 1px solid var(--ts-line); }
.ts-board__foot { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; flex-wrap: wrap; gap: 16px; }
.ts-search { display: flex; gap: 8px; }
.ts-search select, .ts-search input { font-size: var(--ts-fs-small); border: 1px solid var(--ts-line); padding: 1rem 1.2rem; font-family: inherit; }
.ts-btn { display: inline-block; font-size: var(--ts-fs-small); font-weight: 500; padding: 1.1rem 2.4rem; border-radius: 3px; cursor: pointer; border: 0; }
.ts-btn--primary { background: var(--ts-orange); color: #fff; }
.ts-btn--line { background: #fff; border: 1px solid #ccc; color: var(--ts-dark); }

/* 온라인 문의 폼 */
.ts-form { border-top: 2px solid var(--ts-heading); }
.ts-form__row { display: grid; grid-template-columns: 16rem 1fr; border-bottom: 1px solid var(--ts-line); }
.ts-form__row th { background: var(--ts-bg-soft); text-align: left; padding: 1.8rem 2rem; font-size: var(--ts-fs-body); font-weight: 500; display: flex; align-items: center; }
.ts-form__row td { padding: 1.4rem 2rem; }
.ts-form__row input, .ts-form__row textarea { width: 100%; border: 1px solid var(--ts-line); padding: 1.2rem 1.4rem; font-size: var(--ts-fs-body); font-family: inherit; }
.ts-form__row textarea { min-height: 18rem; resize: vertical; }
.ts-form__actions { text-align: center; margin-top: 30px; }
@media (max-width: 768px) {
  .ts-form__row { grid-template-columns: 1fr; }
  .ts-form__row th { padding: 1.2rem 1.4rem; }
}

.ts-home-sect--soft { background: var(--ts-bg-soft); }

/* ---------- 견적문의 폼 (lead / label / field / agree / submit) ---------- */
.ts-form__msg { text-align: center; font-size: var(--ts-fs-body); padding: 1.6rem 2rem; margin-bottom: 24px; border-radius: 4px; }
.ts-form__msg--ok { background: #eef7ee; border: 1px solid #bcdcbc; color: #2f7d32; }
.ts-form__msg--err { background: #fdeeee; border: 1px solid #e6bcbc; color: #c0392b; }
.ts-form__lead { text-align: center; margin-bottom: 40px; }
.ts-form__lead h3 { font-size: var(--ts-fs-sub); font-weight: 700; color: var(--ts-heading); margin-bottom: 1rem; }
.ts-form__lead p { font-size: var(--ts-fs-body); color: var(--ts-gray); }
.ts-form__label { background: var(--ts-bg-soft); padding: 1.8rem 2rem; font-size: var(--ts-fs-body); font-weight: 500; color: var(--ts-heading); display: flex; align-items: center; }
.ts-form__field { padding: 1.4rem 2rem; }
.ts-form select { width: 100%; border: 1px solid var(--ts-line); padding: 1.2rem 1.4rem; font-size: var(--ts-fs-body); font-family: inherit; background: #fff; color: var(--ts-dark); }
.ts-form .req { color: var(--ts-orange); margin-left: .4rem; }
.ts-agree { display: flex; align-items: center; justify-content: center; gap: .8rem; margin-top: 26px; font-size: var(--ts-fs-small); color: var(--ts-dark); }
.ts-agree input { width: 1.6rem; height: 1.6rem; }
.ts-submit { display: inline-flex; align-items: center; gap: .8rem; background: var(--ts-orange); color: #fff; border: 0; font-size: var(--ts-fs-body); font-weight: 500; padding: 1.4rem 4rem; border-radius: 3px; cursor: pointer; }
.ts-submit svg { width: 2.2rem; height: 2.2rem; }

/* ============================================================
   견적문의 폼 (inquiry.php) — 2단 그리드 카드형
   ============================================================ */
.ts-inqform__lead { font-size: var(--ts-fs-body); color: var(--ts-gray); text-align: center; margin-bottom: 1.2rem; line-height: 1.7; }
.ts-inqform__msg { max-width: 900px; margin: 0 auto 2rem; text-align: center; font-size: var(--ts-fs-body); font-weight: 700; border-radius: 6px; padding: 1.4rem; }
.ts-inqform__msg--ok  { color: #2f7d32; background: #eef7ee; border: 1px solid #bcdcbc; }
.ts-inqform__msg--err { color: #c0392b; background: #fdecec; border: 1px solid #f3c4c4; }
.ts-inqform { max-width: 900px; margin: 30px auto 0; }
.ts-inqform__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 26px; margin-bottom: 22px; }
.ts-inqform__field { display: flex; flex-direction: column; margin-bottom: 22px; }
.ts-inqform__grid .ts-inqform__field { margin-bottom: 0; }
.ts-inqform__label { font-size: var(--ts-fs-body); font-weight: 700; color: var(--ts-heading); margin-bottom: .9rem; }
.ts-inqform__label .req { color: #e2660f; }
/* .ts-inqform 스코프로 specificity 확보 (normalize.css 의 input[type=text]{border:0} 우선순위 이김) */
.ts-inqform .ts-inqform__input,
.ts-inqform .ts-inqform__select,
.ts-inqform .ts-inqform__textarea {
  display: block; width: 100%; font-family: inherit; font-size: var(--ts-fs-body); color: var(--ts-dark);
  border: 1px solid #cfcfcf; border-radius: 6px; padding: 1.4rem 1.6rem; background: #fff;
  cursor: text; appearance: none; -webkit-appearance: none;
  transition: border-color .15s, box-shadow .15s;
}
.ts-inqform .ts-inqform__input, .ts-inqform .ts-inqform__select { height: 5.4rem; }
.ts-inqform .ts-inqform__select {
  padding: 0 4.4rem 0 1.6rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23555555' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.6rem center;
  background-size: 1.4rem;
}
.ts-inqform .ts-inqform__textarea { resize: vertical; line-height: 1.7; min-height: 16rem; }
.ts-inqform .ts-inqform__input::placeholder,
.ts-inqform .ts-inqform__textarea::placeholder { color: #a8a8a8; }
.ts-inqform .ts-inqform__input:focus,
.ts-inqform .ts-inqform__select:focus,
.ts-inqform .ts-inqform__textarea:focus {
  outline: none; border-color: var(--ts-orange); box-shadow: 0 0 0 3px rgba(244,121,32,.15);
}
.ts-inqform__agree { display: flex; align-items: center; gap: 1rem; margin: .6rem 0 2.6rem; font-size: var(--ts-fs-body); color: var(--ts-dark); }
.ts-inqform .ts-inqform__agree input[type="checkbox"] {
  width: 2rem; height: 2rem; flex-shrink: 0; cursor: pointer;
  appearance: auto; -webkit-appearance: auto; -moz-appearance: auto;   /* normalize 의 appearance:none 해제 → 기본 체크박스 복원 */
  background: none; accent-color: var(--ts-orange);
}
.ts-inqform__agree b { color: var(--ts-orange); }
.ts-inqform__submit { text-align: center; }
.ts-inqform__btn { display: inline-flex; align-items: center; justify-content: center; min-width: 22rem; height: 5.2rem; font-size: var(--ts-fs-body); font-weight: 700; }
@media (max-width: 768px) {
  .ts-inqform__grid { grid-template-columns: 1fr; gap: 0; }
  .ts-inqform__grid .ts-inqform__field { margin-bottom: 22px; }
  .ts-inqform__btn { width: 100%; }
}

/* ============================================================
   [공통] 우측 고정 Call Center 퀵 패널 (스크롤 고정)
   ============================================================ */
.ts-quick {
  position: fixed; top: 26%; right: 18px; z-index: 90;
  width: 16.5rem; text-align: center;
  box-shadow: 0 6px 20px rgba(0,0,0,.15); border-radius: 6px;
}
.ts-quick__head {
  background: var(--ts-navy); color: #fff;
  font-size: var(--ts-fs-small); font-weight: 700; letter-spacing: .02em;
  padding: 1.1rem; border-radius: 6px 6px 0 0;
}
.ts-quick__body { background: #fff; border: 1px solid var(--ts-line); border-top: 0; padding: 1.8rem 1rem; }
.ts-quick__icon { display: block; width: 3.6rem; height: 3.6rem; margin: 0 auto 1rem; color: var(--ts-orange); }
.ts-quick__icon svg { width: 100%; height: 100%; }
.ts-quick__label { font-size: var(--ts-fs-small); font-weight: 700; color: var(--ts-heading); }
.ts-quick__desc { font-size: var(--ts-fs-small); color: var(--ts-gray); line-height: 1.5; margin: .8rem 0 1.2rem; word-break: keep-all; }
.ts-quick__tel { display: block; font-size: var(--ts-fs-body); font-weight: 700; color: var(--ts-orange); line-height: 1.3; white-space: nowrap; letter-spacing: -0.02em; }
.ts-quick__top {
  display: block; width: 100%; border: 1px solid var(--ts-line); border-top: 0;
  background: var(--ts-bg-soft); color: var(--ts-dark);
  font-size: var(--ts-fs-small); font-family: inherit; padding: 1.1rem; cursor: pointer;
}
.ts-quick__top:hover { background: #efefef; }
.ts-quick__blog {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  background: #00c73c; color: #fff; font-size: var(--ts-fs-small); font-weight: 500;
  padding: 1.3rem 1rem; border-radius: 0 0 6px 6px;
}
.ts-quick__blog:hover { background: #02b537; }
.ts-quick__blog-ico { width: 1.8rem; height: 1.8rem; display: inline-flex; }
.ts-quick__blog-ico svg { width: 100%; height: 100%; }
@media (max-width: 1400px) { .ts-quick { right: 8px; } }
@media (max-width: 1024px) { .ts-quick { display: none; } }   /* 태블릿·모바일에서는 숨김 */


/* ############################################################
   공통 컴포넌트 스타일 (헤더/탭메뉴/푸터) — 컴포넌트 파일에서 통합 이관
   ############################################################ */

/* ============================================================
   [이관] GNB 헤더 (gnb-header.php 에서 이관)
   ============================================================ */
/* ============================================================
   GNB 헤더 전용 CSS (이 파일에서만 관리 — 외부 css 파일에 중복 없음)
   ============================================================ */

/* 단독 이식용 변수 정의 (사이트 :root 와 동일 값, 헤더 요소에만 적용) */
#site-header, .site-nav-overlay, .site-breadcrumb {
  --container-xl: 1200px;
  --point-color: #f47920;
  --ink-dark: #3d3d3d;
  --text-strong: #161616;
  --text-body: #3d3d3d;
  --text-muted: #808080;
  --text-faint: #a8a8a8;
  --border-subtle: #e4e4e4;
  --surface-subtle: #f7f7f7;
  --surface-topbar: #f4f4f4;
  --shadow-md: 0 4px 12px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-lg: 0 12px 28px rgba(0,0,0,0.14), 0 4px 10px rgba(0,0,0,0.07);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── 헤더 골격 ─────────────────────────────────────────────── */
#site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,0.08);
}

/* 유틸리티 바 (마크업 주석 처리 상태 — 재활성 시 그대로 사용) */
.site-topbar { background: var(--surface-topbar); border-bottom: 1px solid var(--border-subtle); }
.site-topbar__inner {
  max-width: var(--container-xl);
  margin: 0 auto; padding: 0 20px; height: 34px;
  display: flex; align-items: center; justify-content: flex-end; gap: 18px;
}
.site-topbar a { font-size: 12px; color: var(--text-muted); text-decoration: none; }
.site-topbar a.site-topbar__en {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  color: #fff; background: var(--ink-dark); padding: 5px 12px; border-radius: 2px;
}

/* 메인 헤더 행 — 로고 좌측 고정 + 메뉴 가운데 정렬 */
.site-header__inner {
  position: relative;
  max-width: none;            /* 헤더는 전체 폭 (로고 좌측 끝 + 메뉴 전체 폭 가운데) */
  margin: 0 auto;
  padding: 0 40px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 로고 — 좌측 끝 고정(레이아웃에서 빠져 메뉴 중앙정렬에 영향 없음) */
.site-logo {
  position: absolute;
  left: 40px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}
.site-logo img { height: 44px; width: auto; }
.site-logo__text { display: inline-flex; align-items: baseline; gap: 3px; font-weight: 800; font-size: 24px; letter-spacing: -0.02em; color: var(--text-strong); }
.site-logo__text b { color: var(--point-color); }
.site-logo__text small { font-size: 15px; font-weight: 600; color: var(--text-muted); }

/* ── GNB (1차 메뉴) ────────────────────────────────────────── */
#siteNav { flex: 1; }   /* 로고 옆 남는 공간을 채워 메뉴를 그 안에서 가운데 정렬 */
.site-nav {
  display: flex;
  justify-content: center;   /* 로고 우측 영역 기준 가운데 정렬 */
  height: 84px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav__item {
  /* position 지정 없음: 뎁스바가 뷰포트 기준(fixed)으로 뜨도록 */
  display: flex;
  align-items: center;
}
.site-nav__link {
  position: relative;
  display: flex;
  align-items: center;
  height: 84px;
  padding: 0 26px;
  font-weight: 500;
  font-size: 17px;
  color: var(--text-strong);
  text-decoration: none;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: color .15s;
}
.site-nav__link:hover,
.site-nav__link.is-active { font-weight: 700; color: var(--point-color); }
.site-nav__link.is-active::after {
  content: '';
  position: absolute;
  left: 26px; right: 26px; bottom: 26px;
  height: 2px;
  background: var(--point-color);
}

/* ── 뎁스 메뉴 (2차) — 헤더 아래 전체 폭 가로 바 ──────────────
   position: fixed 로 뷰포트 좌우 끝까지 확장.
   (.site-header__inner 가 relative + max-width 컨테이너라 absolute 는 컨테이너 폭까지만 늘어남)
   헤더가 sticky top:0 → top: 84px(헤더 높이) 바로 아래 밀착. 헤더 높이 변경 시 함께 수정 */
.site-dropdown {
  display: none;
  position: fixed;
  top: 84px;
  left: 0;
  right: 0;
  background: #fff;
  box-shadow: var(--shadow-md);
  border-top: 2px solid var(--point-color);
  padding: 0;
  white-space: nowrap;
  z-index: 200;
}
.site-nav__item:hover .site-dropdown {
  display: flex;
  justify-content: center; /* 2차 메뉴 가운데 정렬 */
  align-items: stretch;
}
.site-dropdown a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 38px; /* 항목 간 간격 */
  font-size: 15px;
  color: var(--text-body);
  text-decoration: none;
  transition: color .15s, background .15s;
}
.site-dropdown a:hover { color: var(--point-color); background: var(--surface-subtle); }

/* ── 브레드크럼 (HOME › 1차 › 2차) ────────────────────────── */
.site-breadcrumb { border-bottom: 1px solid var(--border-subtle); }
.site-breadcrumb__inner {
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--text-muted);
}
.site-breadcrumb__sep { color: var(--text-faint); }
.site-breadcrumb__current { color: var(--text-body); }

/* ── 햄버거 버튼 (데스크탑 숨김) ───────────────────────────── */
.site-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 44px; height: 44px;
  margin-left: auto;
  background: none; border: none;
  cursor: pointer;
  padding: 4px; gap: 5px;
  flex-shrink: 0;
}
.site-hamburger__bar {
  display: block;
  width: 24px; height: 2px;
  background: var(--text-strong);
  border-radius: 2px;
  transition: transform .3s var(--ease-out), opacity .2s, width .2s;
  transform-origin: center;
}
/* 열림 상태 X 애니메이션 */
.site-hamburger.is-open .site-hamburger__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-hamburger.is-open .site-hamburger__bar:nth-child(2) { opacity: 0; width: 0; }
.site-hamburger.is-open .site-hamburger__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── 모바일 오버레이 (드로어 열릴 때 배경 dim) ─────────────── */
.site-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 90;
}
.site-nav-overlay.is-open { display: block; }

/* ── 드로어 닫기 버튼 ──────────────────────────────────────── */
.site-drawer-close {
  display: none;
  position: absolute;
  top: 14px; right: 16px;
  width: 36px; height: 36px;
  background: none; border: none;
  font-size: 20px;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
  z-index: 1;
}

/* ============================================================
   모바일 (≤960px) — 사이드 드로어 + 아코디언
   ============================================================ */
@media (max-width: 960px) {
  .site-topbar { display: none; }
  .site-breadcrumb { display: none; } /* 모바일에서는 브레드크럼 숨김 */
  .site-header__inner { height: 60px; justify-content: flex-start; }
  .site-logo { position: static; transform: none; }
  .site-logo img { height: 32px; }
  .site-hamburger { display: flex; }
  .site-drawer-close { display: flex; align-items: center; justify-content: center; }

  /* 사이드 드로어 (buddycos 기준 통일 — 색상만 사이트 고유값 유지) */
  #siteNav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 28rem;
    height: 100vh;
    background: #fff;
    box-shadow: var(--shadow-lg);
    z-index: 110;
    overflow-y: auto;
    transition: right .3s var(--ease-out);
  }
  #siteNav.is-open { right: 0; }

  .site-nav { flex-direction: column; height: auto; padding: 2rem 0 4rem; }
  /* 드로어 상단 닫기 버튼 공간 */
  .site-nav::before { content: ''; display: block; height: 6rem; }

  .site-nav__item { display: block; border-bottom: .1rem solid var(--border-subtle); }
  .site-nav__link { display: flex; justify-content: space-between; height: auto; padding: 1.6rem 2.4rem; font-size: 1.8rem; font-weight: 600; }
  .site-nav__link::after { display: none !important; }

  /* 뎁스 메뉴 → 아코디언 */
  .site-dropdown {
    display: block;
    position: static;
    box-shadow: none;
    border-top: none;
    border-left: .3rem solid var(--point-color);
    padding: 0;
    margin: 0 2.4rem .8rem;
    background: var(--surface-subtle);
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s var(--ease-out), padding .2s;
  }
  .site-nav__item.is-open .site-dropdown { max-height: 60rem; padding: .8rem 0; }
  /* hover 트리거 제거 */
  .site-nav__item:hover .site-dropdown { display: block; max-height: 0; padding: 0; }
  .site-nav__item.is-open:hover .site-dropdown { max-height: 60rem; padding: .8rem 0; }
  .site-dropdown a { display: block; height: auto; padding: 1rem 2rem; font-size: 1.5rem; }
}

/* ============================================================
   [이관] 서브페이지 탭메뉴 (tab-menu.php 에서 이관)
   ============================================================ */
/* ============================================================
   서브페이지 탭메뉴 전용 CSS (tab-menu.php 에서만 관리)
   ============================================================ */

/* 단독 이식용 변수 (사이트 :root 와 동일 값, 서브페이지 영역에만 적용) */
.site-subpage {
  --container-xl: 1200px;
  --point-color: #d0280b;
  --text-strong: #161616;
  --text-muted: #808080;
  --border-subtle: #e4e4e4;
}

/* ── 서브페이지 셸 ─────────────────────────────────────────── */
.site-subpage { background: #fff; }

/* 페이지 타이틀 */
.site-subpage__title {
  max-width: var(--container-xl);
  margin: 0 auto;
}
.site-subpage__title h1 {
  text-align: center;
  font-size: 38px;
  font-weight: 800;
  color: var(--text-strong);
  letter-spacing: -0.02em;
  margin: 56px 0 40px;
}

/* ── 탭메뉴 ────────────────────────────────────────────────
   열 개수는 menu-config.php 의 cols(기본: 탭 개수)로 inline style 지정.
   모바일 2열 축소는 아래 @media 의 !important 가 inline 을 덮어씀 */
.site-subnav {
  border: 1px solid var(--border-subtle);
  border-right: none;
  margin: 0 0 8px;
  display: grid;
}
.site-subnav__tab {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 64px;
  border-right: 1px solid var(--border-subtle);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  background: #fff;
  color: var(--text-muted);
  transition: all .15s;
}
.site-subnav__tab:hover { color: var(--point-color); }
.site-subnav__tab.is-active {
  font-weight: 700;
  background: var(--point-color);
  color: #fff;
}
/* 탭이 여러 줄(grid=true)일 때 줄 사이 구분선 */
.site-subnav--grid { border-bottom: none; }
.site-subnav--grid .site-subnav__tab { border-bottom: 1px solid var(--border-subtle); }

/* GNB 하위 탭바 (breadcrumb 아래 · 하위메뉴 2개 이상일 때만) — 1200px 컨테이너, flex 등분 */
.site-subnav-wrap { max-width: 1200px; margin: 30px auto 0; }
@media (max-width: 1240px) { .site-subnav-wrap { padding: 0 20px; } }
.site-subnav-wrap .site-subnav {
  --point-color: #f47920; --border-subtle: #e4e4e4; --text-muted: #808080;
  display: flex; margin: 0;
}
.site-subnav-wrap .site-subnav__tab { flex: 1 1 0; }
/* 모바일에서도 탭바 유지 (여백/높이 축소) */
@media (max-width: 960px) {
  .site-subnav-wrap .site-subnav__tab { height: 4.8rem; font-size: 1.4rem; }
}

/* ── 콘텐츠 영역 ───────────────────────────────────────────── */
.site-content { min-height: 200px; padding-top: 40px; }

/* ── 반응형 ────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .site-subnav {
    grid-template-columns: repeat(2, 1fr) !important;
    margin: 0 0 8px;
  }
  .site-subnav__tab { height: 52px; font-size: 14px; }
  .site-subpage__title { padding: 0 16px; }
  .site-subpage__title h1 { font-size: 26px; margin: 36px 0 24px; }
}
@media (max-width: 480px) {
  .site-subnav { grid-template-columns: repeat(2, 1fr) !important; }
  .site-subpage__title h1 { font-size: 22px; }
  .site-content { padding-top: 28px; }
}

/* ============================================================
   [이관] 공통 푸터 + 모달 (footer.php 에서 이관)
   ============================================================ */
/* ============================================================
   푸터 전용 CSS (footer.php 에서만 관리)
   ============================================================ */

/* 단독 이식용 변수 (사이트 :root 와 동일 값) */
#site-footer, .site-modal {
  --container-xl: 1200px;
}

/* ── 푸터 ──────────────────────────────────────────────────── */
#site-footer {
  background: #161616;
  color: rgba(255,255,255,0.62);
  margin-top: auto; /* body 가 flex column 일 때 푸터를 항상 하단으로 (sticky footer) */
}
.site-footer__inner {
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: 30px 20px;
  display: flex;
  align-items: flex-start;
  gap: 40px;
}
.site-footer__logo {
  filter: grayscale(1) brightness(1.5);
  opacity: 0.55;
  flex-shrink: 0;
  padding-top: 4px;
}
.site-footer__logo img { height: 40px; width: auto; }
.site-footer__info {
  font-size: 14.5px;
  line-height: 1.95;
  color: rgba(255,255,255,0.55);
}
.site-footer__company {
  color: rgba(255,255,255,0.85);
  font-weight: 700;
  margin-bottom: 2px;
}
.site-footer__copy { margin-top: 4px; color: rgba(255,255,255,0.4); }
.site-footer__bottom { border-top: 1px solid rgba(255,255,255,0.08); }
.site-footer__links {
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  gap: 22px;
  font-size: 14px;
  color: rgba(255,255,255,0.4);
}
.site-footer__links a {
  color: inherit;
  text-decoration: none;
  transition: color .15s;
}
.site-footer__links a:hover { color: rgba(255,255,255,0.7); }

/* ── 공통 모달 (이용약관 / 개인정보취급방침 / 이메일수집거부) ── */
.site-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
}
.site-modal.is-open { display: block; }
.site-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}
.site-modal__dialog {
  position: relative;
  width: calc(100% - 32px);
  max-width: 760px;
  max-height: calc(100vh - 80px);
  margin: 40px auto;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
.site-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid #e5e5e5;
}
.site-modal__title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #222;
}
.site-modal__close {
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  font-size: 28px;
  line-height: 1;
  color: #888;
  cursor: pointer;
}
.site-modal__close:hover { color: #222; }
.site-modal__body {
  padding: 24px 28px 32px;
  overflow-y: auto;
  color: #444;
  line-height: 1.7;
  word-break: keep-all;
}
.site-modal__body p { margin: 0 0 6px; font-size: 14px; }

/* 약관 본문 소제목 */
.site-terms__chapter {
  margin: 28px 0 16px;
  font-size: 17px;
  font-weight: 700;
  color: #222;
  text-align: center;
}
.site-terms__chapter:first-child { margin-top: 0; }
.site-terms__article {
  margin: 20px 0 8px;
  font-size: 15px;
  font-weight: 700;
  color: #222;
}

/* ── 반응형 ────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .site-footer__inner { flex-direction: column; gap: 16px; padding: 24px 20px; }
  .site-footer__links { flex-wrap: wrap; gap: 12px; }
}
@media (max-width: 768px) {
  .site-modal__dialog { margin: 20px auto; max-height: calc(100vh - 40px); }
  .site-modal__head { padding: 16px 18px; }
  .site-modal__title { font-size: 18px; }
  .site-modal__body { padding: 18px 18px 24px; }
}
@media (max-width: 600px) {
  .site-footer__inner { padding: 24px 18px; gap: 14px; }
  .site-footer__info { font-size: 13px; line-height: 1.85; word-break: keep-all; }
  .site-footer__copy { font-size: 12px; margin-top: 8px; }
  .site-footer__links { flex-wrap: wrap; gap: 10px 16px; padding: 12px 18px; font-size: 13px; }
  .site-footer__logo img { height: 26px; }
}
@media (max-width: 380px) {
  .site-footer__info { font-size: 12px; }
}