/* ============================================================
   screen-ui.css — 수인환경개선(SUIN) 디자인 리프레시
   ------------------------------------------------------------
   규칙: 1rem=10px / 컨테이너 1200px 패딩 없음 / Noto Sans KR
        폰트 4단계 3.6·2.4·1.8·1.5rem / PC~480px 반응형
   포인트: 네이비 블루 #1e5aa0 (로고 실측) + 라이트 #3f83d4
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 62.5%; }
body { min-height:100vh; display:flex; flex-direction:column;
  font-family: "Noto Sans KR", sans-serif;
  font-size: 1.8rem;
  line-height: 1.6;
  color: #444;
  word-break: keep-all;
}
img { max-width: 100%; height: auto; vertical-align: top; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
strong { font-weight: 700; }

:root {
  --point: #1e5aa0;
  --point-light: #3f83d4;
  --tit: #1b1b1b;
  --txt: #444;
  --txt-sub: #6b7684;
  --line: #e5e8ec;
  --surface: #f5f7fa;
}

.sub-page { overflow: hidden; }
.sub-inner { width: 120rem; max-width: 100%; margin: 0 auto; }
.sub-section { padding: 2rem 0 12rem; }

/* 섹션 소제목 (리프레시: 포인트 라벨 + 큰 타이틀) */
.sec-label {
  display: inline-block;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--point-light);
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.sec-tit { font-size: 3.6rem; font-weight: 900; color: var(--tit); letter-spacing: -0.02em; line-height: 1.3; }
.sec-desc { margin-top: 1.6rem; font-size: 1.8rem; line-height: 1.8; color: var(--txt); }

.blind { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.sub-table-wrap { overflow-x: auto; }
.sub-table {
  width: 100%;
  min-width: 76rem;
  border-collapse: collapse;
  border-top: 2px solid var(--tit);
  font-size: 1.8rem;
}
.sub-table th, .sub-table td {
  padding: 1.4rem 2rem;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  text-align: left;
}
.sub-table th { background: var(--surface); font-weight: 700; color: var(--tit); }

@media (max-width: 1240px) { .sub-inner { padding: 0 3rem; } }
@media (max-width: 1024px) { .sub-section { padding: 2rem 0 9rem; } }
@media (max-width: 768px)  { .sec-tit { font-size: 3rem; } }
@media (max-width: 480px)  {
  html { font-size: 56.25%; }
  .sub-inner { padding: 0 2rem; }
  .sub-section { padding: 1rem 0 7rem; }
}

/* ============================================================
   인사말 (greeting)
   ============================================================ */
.gr-hero {
  display: flex;
  gap: 6rem;
  align-items: flex-start;
  margin-bottom: 6rem;
}
.gr-hero-body { flex: 1; }
.gr-hero-body .sec-tit em { font-style: normal; color: var(--point); }
.gr-collage {
  flex: 0 0 40rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}
.gr-collage img { width: 100%; height: 16rem; object-fit: cover; border-radius: 1.2rem; }
.gr-body p { font-size: 1.8rem; line-height: 1.9; color: var(--txt); }
.gr-body p + p { margin-top: 2.4rem; }
.gr-body strong { color: var(--point); }
.gr-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 3rem 0;
}
.gr-fields li {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.7rem 2rem;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--tit);
}
.gr-sign { margin-top: 4rem; text-align: right; font-size: 2.4rem; font-weight: 700; color: var(--tit); }
.gr-sign span { font-size: 1.5rem; font-weight: 400; color: var(--txt-sub); margin-right: 1.2rem; }

/* ============================================================
   사업영역 공통 (철거/폐기물/가정집)
   ============================================================ */
.biz-head { margin-bottom: 5rem; }
.biz-head .sec-desc strong { color: var(--point); }

/* 프로세스 스텝 타임라인 (철거 STEP 01~08) */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  counter-reset: step;
}
.steps-grid li {
  counter-increment: step;
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 1.6rem;
  padding: 2.6rem 2.4rem 2.4rem;
  box-shadow: 0 2px 10px rgba(20,40,80,0.05);
  transition: transform .2s, box-shadow .2s;
}
.steps-grid li:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(20,40,80,0.10); }
.steps-grid li::before {
  content: 'STEP 0' counter(step);
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--point-light);
  margin-bottom: 0.8rem;
}
.steps-grid li span { font-size: 1.8rem; font-weight: 700; color: var(--tit); line-height: 1.45; }
.steps-grid li::after {
  content: '›';
  position: absolute;
  right: -1.6rem;
  top: 50%;
  transform: translateY(-50%);
  color: #c3cbd6;
  font-size: 2.4rem;
}
.steps-grid li:nth-child(4n)::after, .steps-grid li:last-child::after { display: none; }

/* Before / After — 균일 카드(3:4) + fill: 사진(254×339≈3:4) 전체가 왜곡 거의 없이 영역에 맞춰짐 */
.ba-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; max-width: 72rem; margin: 0 auto; }
.ba-grid + .ba-grid { margin-top: 3rem; }
.ba-item { position: relative; border-radius: 1.6rem; overflow: hidden; }
.ba-item img { width: 100%; height: auto; aspect-ratio: 3/4; object-fit: fill; display: block; }
.ba-item figcaption {
  position: absolute;
  left: 1.6rem;
  top: 1.6rem;
  padding: 0.5rem 1.8rem;
  border-radius: 999px;
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  background: rgba(27,27,27,0.72);
}
.ba-item.after figcaption { background: var(--point); }

/* 카테고리 칩 (폐기물) */
.chip-grid { display: flex; flex-wrap: wrap; gap: 1.2rem; margin: 3rem 0 5rem; }
.chip-grid li {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 1.2rem;
  padding: 1.4rem 2.6rem;
  font-size: 1.8rem;
  font-weight: 500;
  color: var(--tit);
  box-shadow: 0 2px 8px rgba(20,40,80,0.04);
}
.chip-grid li::before { content: '✓'; color: var(--point-light); font-weight: 700; margin-right: 1rem; }

/* 현장 사진 그리드 — 균일 카드(13:15≈사진 두 비율 0.98/0.76의 중간값) + fill: 잘림 없이 살짝 눌러 맞춤 */
.photo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; max-width: 72rem; margin: 0 auto; }
.photo-grid img { width: 100%; height: auto; aspect-ratio: 13/15; object-fit: fill; border-radius: 1.6rem; display: block; }

/* 체크 불릿 (가정집) */
.check-list { margin: 3rem 0 5rem; }
.check-list li {
  position: relative;
  padding: 0 0 0 4.2rem;
  font-size: 1.8rem;
  line-height: 1.75;
  color: var(--txt);
}
.check-list li + li { margin-top: 1.8rem; }
.check-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0.2rem;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  background: var(--surface);
  color: var(--point);
  font-weight: 700;
  font-size: 1.5rem;
  text-align: center;
  line-height: 2.8rem;
}

/* ============================================================
   오시는길 (location)
   ============================================================ */
.lc-map { border-radius: 1.6rem; overflow: hidden; box-shadow: 0 4px 16px rgba(20,40,80,0.08); margin-bottom: 4rem; }
.lc-map img { width: 100%; display: block; }
.lc-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
.lc-card {
  background: var(--surface);
  border-radius: 1.6rem;
  padding: 3rem 3.4rem;
}
.lc-card h3 { font-size: 1.8rem; font-weight: 700; color: var(--point); margin-bottom: 1.4rem; }
.lc-card p, .lc-card li { font-size: 1.8rem; line-height: 1.9; color: var(--txt); }
.lc-tel { font-size: 3.6rem; font-weight: 900; color: var(--tit); letter-spacing: 0.01em; }

/* ============================================================
   작업현황 갤러리 (works)
   ============================================================ */
.works-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; align-items: start; }
.works-card {
  display: block;
  border-radius: 1.6rem;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 2px 10px rgba(20,40,80,0.05);
  transition: transform .2s, box-shadow .2s;
  text-decoration: none;
}
.works-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(20,40,80,0.12); }
/* 썸네일: 원본 이미지를 자연 비율 그대로 표시(카드에 억지로 맞춰 자르지 않음) */
.works-thumb { display: block; width: 100%; background: #eef1f4; font-size: 0; }
.works-thumb img { width: 100%; height: auto; display: block; }
.works-cap { display: block; padding: 1.6rem 2rem 1.8rem; font-size: 1.7rem; font-weight: 500; color: var(--tit); line-height: 1.45; }

/* 작업현황 상세보기 */
.works-view { max-width: 80rem; margin: 0 auto; }
.works-view-head { border-bottom: 2px solid var(--point); padding-bottom: 1.8rem; margin-bottom: 2.4rem; }
.works-view-title { font-size: 2.4rem; font-weight: 700; color: var(--tit); line-height: 1.4; }
.works-view-meta { margin-top: 1rem; font-size: 1.5rem; color: var(--txt-sub); }
.works-view-meta span + span { margin-left: 1.4rem; padding-left: 1.4rem; border-left: 1px solid var(--line); }
.works-view-body { text-align: center; padding: 1rem 0 3rem; }
.works-view-body img { max-width: 100%; height: auto; border-radius: 0.6rem; }
.works-view-empty { padding: 4rem 0; color: var(--txt-sub); }
.works-view-foot { text-align: center; margin-top: 1rem; }
.board-btn { display: inline-block; padding: 1.1rem 3.4rem; background: var(--point); color: #fff; font-size: 1.6rem; font-weight: 500; border-radius: 0.6rem; text-decoration: none; transition: background .15s; }
.board-btn:hover { background: var(--point-d, #12507f); }
.works-empty { text-align: center; padding: 6rem 0; color: var(--txt-sub); font-size: 1.8rem; }

/* ============================================================
   게시판 (견적/후기)
   ============================================================ */
.board-notice {
  background: var(--surface);
  border-left: 4px solid var(--point-light);
  border-radius: 0 1.2rem 1.2rem 0;
  padding: 2rem 2.6rem;
  font-size: 1.5rem;
  color: var(--txt-sub);
  margin-bottom: 3rem;
}
.board-table th { text-align: center; background: var(--surface); }
.board-table td { text-align: center; }
.board-table .col-num  { width: 10%; }
.board-table .col-name { width: 14%; }
.board-table .col-date { width: 15%; }
.board-table td.col-subject { text-align: left; }
.board-table td.col-subject a:hover { color: var(--point); }
.board-empty { padding: 8rem 0 !important; text-align: center !important; color: var(--txt-sub); }
.board-paging { margin-top: 3rem; text-align: center; }
.board-paging span {
  display: inline-block;
  min-width: 3.6rem;
  padding: 0.7rem 0;
  border: 1px solid var(--line);
  border-radius: 0.8rem;
  font-size: 1.5rem;
  color: var(--txt-sub);
}
.board-paging .on { color: #fff; background: var(--point); border-color: var(--point); font-weight: 700; }
.board-view { border-top: 2px solid var(--tit); }
.board-view-head { padding: 2.4rem 1rem; border-bottom: 1px solid var(--line); }
.board-view-title { font-size: 2.4rem; font-weight: 700; color: var(--tit); }
.board-view-meta { margin-top: 1rem; font-size: 1.5rem; color: var(--txt-sub); }
.board-view-meta span + span { margin-left: 1.4rem; padding-left: 1.4rem; border-left: 1px solid var(--line); }
.board-view-content { padding: 3.6rem 1rem; border-bottom: 1px solid var(--line); }
.board-view-content p { font-size: 1.8rem; line-height: 1.9; color: var(--txt); }
.board-view-foot { margin-top: 2.4rem; text-align: right; }
.board-btn {
  display: inline-block;
  background: var(--point);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 500;
  padding: 1rem 2.8rem;
  border-radius: 0.8rem;
}
.board-btn:hover { background: #174a86; }

/* ============================================================
   공통 CTA 밴드 (전화 상담)
   ============================================================ */
.cta-band {
  margin-top: 7rem;
  background: linear-gradient(120deg, var(--point) 0%, #2f74c4 60%, var(--point-light) 100%);
  border-radius: 2rem;
  padding: 4.6rem 5.4rem;
  display: flex;
  align-items: center;
  gap: 4rem;
  color: #fff;
}
.cta-band h3 { font-size: 2.4rem; font-weight: 700; line-height: 1.4; }
.cta-band p { margin-top: 0.6rem; font-size: 1.5rem; color: rgba(255,255,255,0.8); }
.cta-band .tel { margin-left: auto; text-align: right; }
.cta-band .tel span { display: block; font-size: 1.5rem; color: rgba(255,255,255,0.8); }
.cta-band .tel strong { font-size: 3.6rem; font-weight: 900; letter-spacing: 0.02em; }

@media (max-width: 960px) {
  .gr-hero { flex-direction: column; }
  .gr-collage { flex: none; width: 100%; }
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
  .steps-grid li:nth-child(2n)::after { display: none; }
  .works-grid { grid-template-columns: repeat(2, 1fr); }
  .lc-info-grid { grid-template-columns: 1fr; }
  .cta-band { flex-direction: column; text-align: center; }
  .cta-band .tel { margin: 0; text-align: center; }
}
@media (max-width: 600px) {
  .ba-grid, .photo-grid, .works-grid { grid-template-columns: 1fr; }
  .steps-grid { grid-template-columns: 1fr; }
  .steps-grid li::after { display: none; }
}

/* ============================================================
   index (메인) — 디자인 리프레시
   ============================================================ */
.main-inner { width: 120rem; max-width: 100%; margin: 0 auto; }
.main-hero {
  background: linear-gradient(135deg, #123c6e 0%, var(--point) 55%, #2f74c4 100%);
  color: #fff;
  padding: 9rem 0 10rem;
}
.main-hero-grid { display: flex; align-items: center; gap: 6rem; }
.main-hero-copy { flex: 1; }
.main-hero-copy .sec-label { color: #9cc4f0; }
.main-hero-copy h2 { font-size: 3.6rem; font-weight: 900; line-height: 1.35; letter-spacing: -0.02em; }
.main-hero-copy h2 em { font-style: normal; color: #8fc1ff; }
.main-hero-copy p { margin-top: 2rem; font-size: 1.8rem; line-height: 1.8; color: rgba(255,255,255,0.85); }
.main-hero-btns { margin-top: 3.6rem; display: flex; gap: 1.4rem; }
.main-hero-btns a {
  display: inline-block;
  padding: 1.4rem 3.2rem;
  border-radius: 999px;
  font-size: 1.8rem;
  font-weight: 700;
}
.main-hero-btns .primary { background: #fff; color: var(--point); }
.main-hero-btns .primary:hover { background: #e8f0fa; }
.main-hero-btns .ghost { border: 1px solid rgba(255,255,255,0.5); color: #fff; }
.main-hero-btns .ghost:hover { background: rgba(255,255,255,0.12); }
.main-hero-photos { flex: 0 0 42rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.main-hero-photos img {
  width: 100%; height: 17rem; object-fit: cover;
  border-radius: 1.6rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
.main-hero-photos img:nth-child(2) { margin-top: 2.4rem; }
.main-hero-photos img:nth-child(3) { margin-top: -2.4rem; }
.main-section { padding: 8rem 0; }
.main-section.alt { background: var(--surface); }
.main-sec-head { text-align: center; margin-bottom: 4.6rem; }
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; }
.svc-card {
  display: block;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 2rem;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(20,40,80,0.05);
  transition: transform .2s, box-shadow .2s;
}
.svc-card:hover { transform: translateY(-6px); box-shadow: 0 16px 34px rgba(20,40,80,0.13); }
.svc-card img { width: 100%; height: 22rem; object-fit: cover; }
.svc-card-body { padding: 2.6rem 2.8rem 3rem; }
.svc-card-body h3 { font-size: 2.4rem; font-weight: 700; color: var(--tit); }
.svc-card-body p { margin-top: 1rem; font-size: 1.5rem; line-height: 1.7; color: var(--txt-sub); }
.svc-card-body .more { display: inline-block; margin-top: 1.8rem; font-size: 1.5rem; font-weight: 700; color: var(--point); }
.main-works-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; }
.main-works-more { text-align: center; margin-top: 4rem; }
.main-works-more a {
  display: inline-block;
  border: 1px solid var(--point);
  color: var(--point);
  font-size: 1.8rem;
  font-weight: 700;
  padding: 1.3rem 4.6rem;
  border-radius: 999px;
}
.main-works-more a:hover { background: var(--point); color: #fff; }
.main-cta { padding: 0 0 9rem; }

@media (max-width: 1240px) { .main-inner { padding: 0 3rem; } }
@media (max-width: 960px) {
  .main-hero-grid { flex-direction: column; }
  .main-hero-photos { flex: none; width: 100%; }
  .svc-grid, .main-works-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .svc-grid, .main-works-grid { grid-template-columns: 1fr; }
  .main-hero-copy h2 { font-size: 3rem; }
}

/* 게시판 비밀글 표기 */
.board-table .secret { color: var(--txt-sub); }
.board-table .secret .cmt { font-style: normal; font-size: 1.5rem; color: var(--point-light); margin-left: 0.6rem; }

/* 메인 히어로 3S Vision 배지 */
.main-hero-3s { margin-top: 2.6rem; display: flex; gap: 1.2rem; flex-wrap: wrap; }
.main-hero-3s li {
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 1.2rem;
  padding: 1.2rem 1.8rem;
}
.main-hero-3s strong { display: block; font-size: 1.8rem; color: #8fc1ff; }
.main-hero-3s span { font-size: 1.5rem; color: rgba(255,255,255,0.75); }

/* ============================================================
   페이지 공통 인트로 (원본 공통 영역 리프레시)
   ============================================================ */
.page-intro {
  display: flex;
  align-items: center;
  gap: 4rem;
  background: linear-gradient(120deg, #f5f9ff 0%, #eef4fb 100%);
  border: 1px solid #e2ebf6;
  border-radius: 2rem;
  padding: 3rem 4rem;
  margin-bottom: 2rem;
}
.page-intro-body h2 { font-size: 2.4rem; font-weight: 700; color: #2e8b3d; letter-spacing: -0.01em; }
.page-intro-body p { margin-top: 1.2rem; font-size: 1.5rem; line-height: 1.8; color: var(--txt); }
.page-intro-body strong { color: var(--point); font-size: 1.8rem; }
.page-intro-city { margin-left: auto; flex: 0 0 auto; width: 15rem; mix-blend-mode: multiply; }
.culture-band {
  display: flex;
  align-items: center;
  gap: 4rem;
  background: linear-gradient(110deg, #57646e 0%, #7c93a8 55%, #a9bcC9 100%);
  border-radius: 2rem;
  padding: 2.4rem 4rem;
  margin-bottom: 5rem;
  color: #fff;
  overflow: hidden;
}
.culture-band h3 { font-size: 2.4rem; font-weight: 500; font-style: italic; letter-spacing: 0.01em; }
.culture-band p { margin-top: 0.8rem; font-size: 1.5rem; line-height: 1.7; color: rgba(255,255,255,0.85); }
.culture-band p strong { color: #fff; }
.culture-band-house { margin-left: auto; flex: 0 0 auto; width: 17rem; border-radius: 1.2rem; }

@media (max-width: 960px) {
  .page-intro, .culture-band { flex-direction: column; text-align: center; }
  .page-intro-city, .culture-band-house { margin: 0 auto; }
}

/* 오시는길 구글맵 iframe */
.lc-map iframe { display: block; width: 100%; height: 44rem; border: 0; }

.board-view-content img { max-width:100%; height:auto; }
.board-view-empty { text-align:center; color:#777; font-size:1.6rem; padding:4rem 0; }