@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap');
/* ============================================================
   screen-ui.css — 동산도장(DSC) 메인/서브 공통 UI
   ------------------------------------------------------------
   작업 규칙
   - 1rem = 10px (html font-size 62.5%)
   - 컨테이너 1200px, 좌우 패딩 없음 (화면 좁을 때만 안전 여백)
   - 폰트 4단계 : 메인타이틀 3.6rem / 서브타이틀 2.4rem / 본문 1.8rem / 부가 1.5rem
   - 1.5rem 미만 폰트 사용 금지
   - 국문/영문 Noto Sans
   - PC → 모바일(480px) 반응형
   - 원본 dsc6201.com 디자인 톤 재현 (콘텐츠 이미지는 전부 HTML/CSS 하드코딩)
   ------------------------------------------------------------
   목차
   1. reset / base
   2. 공통 변수
   3. 공통 레이아웃
   4. 공통 서브 : 비주얼 배너 / 브레드크럼 / 섹션 헤더(옐로 사각) / 컬러 섹션타이틀
   5. 메인(index)
   6. 인사말 (greeting)
   7. 오시는길 (location)
   8. 방수 공사 (waterproof)
   9. 페인트 공사 (paint)
   10. 시공갤러리 (gallery)
   11. 공지사항 (notice) — 게시판 표
   12. 견적문의 (inquiry) — 폼
   13. 반응형
   ============================================================ */

/* ---------- 1. reset / base ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 62.5%; }                      /* 1rem = 10px */
body {
  font-family: "Noto Sans KR", "Noto Sans", sans-serif;
  font-size: 1.8rem;                            /* 본문 기본 */
  line-height: 1.7;
  color: #666;
  word-break: keep-all;
  -webkit-text-size-adjust: 100%;
}
img { max-width: 100%; height: auto; vertical-align: top; border: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
strong { font-weight: 700; }
em { font-style: normal; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; }
table { border-collapse: collapse; border-spacing: 0; width: 100%; }
input, select, textarea { font-family: inherit; font-size: 1.6rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---------- 2. 공통 변수 ---------- */
:root {
  --gold: #f5b400;        /* 섹션 헤더 사각 장식 */
  --gold-dk: #e59a00;
  --blue: #4a90d2;        /* 에폭시 방수 / 페인트 헤딩 */
  --pink: #e6197d;        /* 우레탄 방수 */
  --orange: #f5851f;      /* 외벽 방수 / 전화문의 */
  --green: #5aa02c;       /* 옥상 방수 */
  --teal: #4fb3a1;        /* 메인 카드 강조 대시 */
  --tit: #5c5c5c;         /* 원본 제목 회색 */
  --txt: #666;
  --txt-sub: #888;
  --line: #e3e3e3;
  --bg-soft: #f7f8fa;
  --bg-th: #f4f5f7;
}

/* ---------- 3. 공통 레이아웃 ---------- */
.dsc-inner {
  width: 1200px;
  max-width: 100%;
  margin: 0 auto;
}
.dsc-sec { padding: 7rem 0; }
.dsc-sec--soft { background: var(--bg-soft); }

/* 폰트 4단계 유틸 (전 페이지 공통) */
.dsc-tit    { font-size: 3.6rem; line-height: 1.35; font-weight: 700; color: var(--tit); }
.dsc-subtit { font-size: 2.4rem; line-height: 1.45; font-weight: 500; color: var(--tit); }
.dsc-txt    { font-size: 1.8rem; line-height: 1.9;  color: var(--txt); }
.dsc-small  { font-size: 1.5rem; line-height: 1.7;  color: var(--txt-sub); }

/* ---------- 4. 공통 서브 구성 ---------- */
/* 4-1. 서브 상단 비주얼 배너 (원본 컬러 페인트 스트립) */
.dsc-visual {
  width: 100%;
  height: 20rem;
  background: url('/resources/images/sub/sub_hero.jpg') center/cover no-repeat;
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.dsc-visual::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.32); }
.dsc-visual__title { position: relative; z-index: 1; color: #fff; font-size: 3.6rem; font-weight: 700; letter-spacing: .04em; }

/* 4-2. 브레드크럼 */
.dsc-crumb__in { display: flex; align-items: center; justify-content: flex-end; gap: .8rem; height: 5rem; font-size: 1.5rem; color: var(--txt-sub); border-bottom: 1px solid var(--line); }
.dsc-crumb__home { display: inline-flex; color: var(--gold-dk); }
.dsc-crumb__sep { color: #c4c4c4; }
.dsc-crumb__cur { color: var(--tit); font-weight: 500; }

/* 4-3. 섹션 헤더 (옐로 사각 장식 + 제목 + 라인) — 서브 상단 공통 */
.sub-head { display: flex; align-items: center; gap: 1.4rem; margin-bottom: 4rem; }
.sub-head__deco { display: grid; grid-template-columns: repeat(2, .9rem); grid-template-rows: repeat(2, .9rem); gap: .3rem; flex: none; }
.sub-head__deco i { display: block; width: .9rem; height: .9rem; background: var(--gold); }
.sub-head__deco i:nth-child(2) { background: var(--gold-dk); }
.sub-head__deco i:nth-child(3) { visibility: hidden; }
.sub-head__name { font-size: 3.6rem; font-weight: 700; color: var(--tit); white-space: nowrap; letter-spacing: -.01em; }
.sub-head__line { flex: 1; height: 1px; background: var(--line); }

/* 4-4. 컬러 섹션 타이틀 (가운데 정렬 + 컬러 대시) — 방수/페인트 공통 */
.sec-tit { text-align: center; }
.sec-tit__name { font-size: 2.4rem; font-weight: 700; color: var(--blue); }
.sec-tit__bar { display: block; width: 3.6rem; height: .3rem; background: var(--blue); margin: 1.4rem auto 0; }
.sec-tit--pink   .sec-tit__name, .sec-tit--pink   .sec-tit__bar { color: var(--pink);   background-color: var(--pink); }
.sec-tit--orange .sec-tit__name, .sec-tit--orange .sec-tit__bar { color: var(--orange); background-color: var(--orange); }
.sec-tit--green  .sec-tit__name, .sec-tit--green  .sec-tit__bar { color: var(--green);  background-color: var(--green); }
.sec-tit--pink   .sec-tit__name, .sec-tit--orange .sec-tit__name, .sec-tit--green .sec-tit__name { background: none; }

/* 4-5. 서브 탭 (배너 아래, 하위 메뉴 2개 이상) — acux_renewal 탭 디자인(.site-subnav) */
.dsc-tabwrap { width: 1200px; max-width: 100%; margin: 30px auto 0; }
.site-subnav { --point-color: #d0280b; border: 1px solid var(--line); border-right: none; margin: 0 0 .8rem; display: grid; }
.site-subnav__tab { display: flex; align-items: center; justify-content: center; text-align: center; height: 6.4rem; border-right: 1px solid var(--line); font-size: 1.6rem; font-weight: 500; text-decoration: none; background: #fff; color: var(--txt-sub); 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; }
.site-subnav--grid { border-bottom: none; }
.site-subnav--grid .site-subnav__tab { border-bottom: 1px solid var(--line); }
@media (max-width: 960px) {
  .dsc-tabwrap { padding: 0 1.6rem; }
  .site-subnav { grid-template-columns: repeat(2, 1fr) !important; }
  .site-subnav__tab { height: 5.2rem; font-size: 1.5rem; }
}
@media (max-width: 480px) {
  .site-subnav { grid-template-columns: repeat(2, 1fr) !important; }
}

/* 서브 콘텐츠 여백 (본문은 좌우 패딩으로 안쪽 여백 확보 — 원본과 동일) */
.dsc-content { padding: 6rem 0 8rem; }
.dsc-content .dsc-inner { padding-left: 5rem; padding-right: 5rem; }

/* ============================================================
   GNB 헤더 / 브레드크럼 (buddycos 기준 통일 — 고유 색상만 --pink 로 분리)
   ※ 이전엔 include/gnb-header.php 에 인라인이었음 → 여기로 이관
   ============================================================ */
#site-header, .site-nav-overlay, .site-breadcrumb {
  --container: 1200px;
  --pink: #d0280b;            /* ← 사이트 고유 색상 (동산도장 레드) */
  --ink: #1c1c1c;
  --text: #333333;
  --muted: #767676;
  --faint: #a5a5a5;
  --line: #e1e1e1;
  --bg-soft: #f7f7f8;
  --fs-body: 1.8rem;
  --fs-small: 1.5rem;
  --shadow-md: 0 .4rem 1.2rem rgba(0,0,0,.10), 0 .2rem .4rem rgba(0,0,0,.06);
  --shadow-lg: 0 1.2rem 2.8rem rgba(0,0,0,.14), 0 .4rem 1rem rgba(0,0,0,.07);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

.site-nav-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 90; }
.site-nav-overlay.is-open { display: block; }

#site-header { position: sticky; top: 0; z-index: 100; background: #fff; box-shadow: 0 .1rem 0 rgba(0,0,0,.08); }
.site-header__inner { position: relative; width: var(--container); max-width: 100%; margin: 0 auto; height: 8.4rem; display: flex; align-items: center; justify-content: center; }
.site-logo { position: absolute; left: 0; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; }
.site-logo img { height: 7.5rem; width: auto; }   /* ← 사이트 고유 로고 크기 */

.site-nav { display: flex; height: 8.4rem; list-style: none; margin: 0; padding: 0; }
.site-nav__item { display: flex; align-items: center; }
.site-nav__link { position: relative; display: flex; align-items: center; height: 8.4rem; padding: 0 2.8rem; font-size: var(--fs-body); font-weight: 500; color: var(--ink); letter-spacing: -.02em; white-space: nowrap; transition: color .15s; }
.site-nav__link:hover, .site-nav__link.is-active { font-weight: 700; color: var(--pink); }
.site-nav__link.is-active::after { content: ''; position: absolute; left: 2.8rem; right: 2.8rem; bottom: 2.4rem; height: .2rem; background: var(--pink); }

.site-dropdown { display: none; position: fixed; top: 8.4rem; left: 0; right: 0; background: #fff; box-shadow: var(--shadow-md); border-top: .2rem solid var(--pink); white-space: nowrap; z-index: 200; flex-wrap: wrap; }
.site-nav__item:hover .site-dropdown { display: flex; justify-content: center; align-items: stretch; }
.site-dropdown a { display: flex; align-items: center; justify-content: center; height: 5.6rem; padding: 0 2.8rem; font-size: var(--fs-small); color: var(--text); transition: color .15s, background .15s; }
.site-dropdown a:hover { color: var(--pink); background: var(--bg-soft); }
.site-dropdown a.is-active { color: var(--pink); font-weight: 700; }

.site-hamburger { display: none; flex-direction: column; justify-content: center; align-items: center; width: 4.4rem; height: 4.4rem; margin-left: auto; background: none; border: none; padding: .4rem; gap: .5rem; }
.site-hamburger__bar { display: block; width: 2.4rem; height: .2rem; background: var(--ink); border-radius: .2rem; transition: transform .3s var(--ease-out), opacity .2s, width .2s; transform-origin: center; }
.site-hamburger.is-open .site-hamburger__bar:nth-child(1) { transform: translateY(.7rem) 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(-.7rem) rotate(-45deg); }
.site-drawer-close { display: none; position: absolute; top: 1.4rem; right: 1.6rem; width: 3.6rem; height: 3.6rem; background: none; border: none; font-size: 2rem; color: var(--muted); line-height: 1; z-index: 1; }

.site-breadcrumb { border-bottom: .1rem solid var(--line); }
.site-breadcrumb__inner { width: var(--container); max-width: 100%; margin: 0 auto; padding: 1.4rem 0; display: flex; justify-content: flex-end; align-items: center; gap: .8rem; font-size: var(--fs-small); color: var(--muted); }
.site-breadcrumb__sep { color: var(--faint); }
.site-breadcrumb__current { color: var(--text); }

@media (max-width: 1240px) {
  .site-header__inner, .site-breadcrumb__inner { width: 100%; padding-left: 2rem; padding-right: 2rem; }
  .site-logo { left: 2rem; }
  .site-nav__link.is-active::after { left: 1.6rem; right: 1.6rem; }
}

@media (max-width: 960px) {
  .site-breadcrumb { display: none; }
  .site-header__inner { height: 6rem; justify-content: flex-start; }
  .site-logo { position: static; transform: none; }
  .site-logo img { height: 6rem; }   /* ← 사이트 고유 로고 크기(모바일) */
  .site-hamburger { display: flex; }
  .site-drawer-close { display: flex; align-items: center; justify-content: center; }
  #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(--line); }
  .site-nav__link { display: flex; justify-content: space-between; height: auto; padding: 1.6rem 2.4rem; font-size: var(--fs-body); 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(--pink); padding: 0; margin: 0 2.4rem .8rem; background: var(--bg-soft); 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; }
  .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: var(--fs-small); }
}

/* ---------- 5. 메인 (index) ---------- */
/* 5-1. 히어로 슬라이더 */
.main-hero { position: relative; overflow: hidden; }
.main-hero__viewport { position: relative; height: 48rem; }
.main-hero__slide { position: absolute; inset: 0; background-position: center; background-size: cover; background-repeat: no-repeat; opacity: 0; transition: opacity 1s ease; display: flex; align-items: center; }
.main-hero__slide.is-active { opacity: 1; }
.main-hero__slide::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15,28,48,.6) 0%, rgba(15,28,48,.25) 60%, rgba(15,28,48,.1) 100%); }
.main-hero__slide--1 { background-image: url('/resources/images/main/main_01.jpg'); }
.main-hero__slide--2 { background-image: url('/resources/images/main/main_02.jpg'); }
.main-hero__slide--3 { background-image: url('/resources/images/main/main_03.jpg'); }
.main-hero__caption { position: relative; z-index: 2; color: #fff; width: 1200px; max-width: 100%; margin: 0 auto; padding: 0 2rem; }
.main-hero__badge { display: inline-block; font-size: 1.5rem; letter-spacing: .3em; color: var(--gold); font-weight: 500; margin-bottom: 1.4rem; }
.main-hero__title { font-size: 3.6rem; font-weight: 700; line-height: 1.35; letter-spacing: -.01em; }
.main-hero__title em { color: var(--gold); }
.main-hero__text { font-size: 1.8rem; margin-top: 1.6rem; color: rgba(255,255,255,.9); }
.main-hero__arrow { position: absolute; top: 50%; margin-top: -2.25rem; z-index: 3; width: 3.5rem; height: 4.5rem; background-repeat: no-repeat; background-position: center; text-indent: -9999px; overflow: hidden; opacity: .85; transition: opacity .2s; }
.main-hero__arrow:hover { opacity: 1; }
.main-hero__arrow--prev { left: 2%; background-image: url('/resources/images/main/btn_arrow_left.png'); }
.main-hero__arrow--next { right: 2%; background-image: url('/resources/images/main/btn_arrow_right.png'); }
.main-hero__dots { position: absolute; left: 0; right: 0; bottom: 2.4rem; z-index: 3; display: flex; justify-content: center; gap: 1rem; }
.main-hero__dot { width: 1.2rem; height: 1.2rem; border-radius: 50%; background: rgba(255,255,255,.45); transition: all .2s; }
.main-hero__dot.is-active { background: var(--gold); width: 3.2rem; border-radius: 1rem; }

/* 5-2. 사업소개 카드 (사진 좌측 + 제목/부가 우측) — 원본 3분할 레이아웃 */
.main-svc { padding: 6rem 0 3rem; }
.main-svc--tight { padding-top: 0; padding-bottom: 6rem; }
.main-svc__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.main-card { display: block; border-radius: .4rem; overflow: hidden; transition: opacity .2s; }
.main-card:hover { opacity: .85; }
.main-card img { display: block; width: 100%; height: auto; }

/* 5-3. 하단 : 전화문의 + 공지사항 + 견적문의 (3분할) */
.main-bottom { display: grid; grid-template-columns: 1fr 2fr; gap: 2rem; align-items: stretch; }
/* 전화문의 오렌지 박스 */
.main-call { background: var(--orange); color: #fff; border-radius: .4rem; padding: 3.4rem 3rem; display: flex; flex-direction: column; justify-content: center; }
.main-call__head { display: flex; align-items: center; gap: 1.4rem; }
.main-call__ico { width: 4.6rem; height: 4.6rem; flex: none; }
.main-call__label { font-size: 2.4rem; font-weight: 700; }
.main-call__desc { font-size: 1.5rem; color: rgba(255,255,255,.92); margin-top: 1.4rem; line-height: 1.6; }
.main-call__num { font-size: 3.6rem; font-weight: 700; margin-top: 2rem; letter-spacing: -.01em; }
/* 게시판(공지사항/견적문의) */
.main-board { display: flex; flex-direction: column; }
.main-board__top { display: flex; align-items: center; justify-content: space-between; border-bottom: 2px solid var(--tit); padding-bottom: 1.4rem; }
.main-board__cat { font-size: 2.4rem; font-weight: 700; color: var(--tit); }
.main-board__more { font-size: 1.5rem; color: var(--txt-sub); }
.main-board__item { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; padding: 1.35rem .2rem; border-bottom: 1px solid var(--line); }
.main-board__link { font-size: 1.5rem; color: var(--txt); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.main-board__item:hover .main-board__link { color: var(--blue); }
.main-board__date { font-size: 1.5rem; color: var(--txt-sub); flex: none; }

/* ---------- 6. 인사말 (greeting) ---------- */
.greet { text-align: center; }
.greet__lead { font-size: 2.4rem; font-weight: 500; color: var(--tit); line-height: 1.5; margin-bottom: 4rem; }
.greet__lead em { color: var(--blue); font-weight: 700; }
.greet__photo { overflow: hidden; margin: 0 auto 4.5rem; max-width: 90rem; }
.greet__photo img { width: 100%; display: block; }
.greet__body p { font-size: 1.8rem; color: var(--txt); margin-bottom: 2rem; line-height: 1.9; }
.greet__thanks { font-size: 1.8rem; color: var(--tit); font-weight: 500; margin-top: 3rem; }
.greet__sign { margin-top: 1.2rem; font-size: 1.8rem; color: var(--tit); }
.greet__sign strong { font-size: 2.4rem; margin-left: 1rem; }

/* ---------- 7. 오시는길 (location) ---------- */
.loc__map { width: 100%; height: 46rem; border: 1px solid var(--line); border-radius: .6rem; overflow: hidden; }
.loc__map iframe { width: 100%; height: 100%; border: 0; display: block; }
.loc__info { margin-top: 3rem; border-top: 2px solid var(--tit); }
.loc__row { display: flex; align-items: flex-start; gap: 1.6rem; padding: 2rem .4rem; border-bottom: 1px solid var(--line); }
.loc__row__ico { width: 3.2rem; height: 3.2rem; color: var(--blue); flex: none; margin-top: .2rem; }
.loc__row__label { width: 10rem; flex: none; font-size: 1.8rem; font-weight: 700; color: var(--tit); }
.loc__row__value { font-size: 1.8rem; color: var(--txt); }

/* ---------- 8. 방수 공사 (waterproof) ---------- */
.wp-item { padding: 5.5rem 0; border-bottom: 1px dashed var(--line); }
.wp-item:last-child { border-bottom: 0; }
.wp-item__desc { text-align: center; font-size: 1.8rem; color: var(--txt); line-height: 1.9; margin: 3rem 0; }
.wp-box { display: flex; align-items: center; gap: 3rem; max-width: 82rem; margin: 0 auto; }
.wp-box__tag { flex: none; width: 13rem; height: 13rem; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; font-size: 1.8rem; font-weight: 700; }
.wp-box__body { flex: 1; }
.wp-list li { position: relative; padding-left: 1.6rem; font-size: 1.8rem; color: var(--txt); margin-bottom: .8rem; line-height: 1.7; }
.wp-list li::before { content: "-"; position: absolute; left: 0; color: var(--txt-sub); }
/* 섹션 컬러 → 태그 배경 */
.wp-item--blue   .wp-box__tag { background: var(--blue); }
.wp-item--pink   .wp-box__tag { background: var(--pink); }
.wp-item--orange .wp-box__tag { background: var(--orange); }
.wp-item--green  .wp-box__tag { background: var(--green); }

/* ---------- 9. 페인트 공사 (paint) ---------- */
.paint-item { padding: 4rem 0; border-bottom: 1px solid var(--line); }
.paint-item:last-child { border-bottom: 0; }
.paint-item__title { font-size: 2.4rem; font-weight: 700; color: var(--blue); display: flex; align-items: center; gap: 1.4rem; }
.paint-item__ico { width: 4.4rem; height: 4.4rem; color: var(--blue); flex: none; }
/* 아이콘(4.4rem) + gap(1.4rem) = 5.8rem 만큼 들여써서 제목 텍스트 시작점과 하위 텍스트 시작점을 맞춤 */
.paint-item__bar { width: 3.6rem; height: .3rem; background: var(--blue); margin: 1.4rem 0 1.8rem 5.8rem; }
.paint-item__desc { font-size: 1.8rem; color: var(--txt); line-height: 1.9; padding-left: 5.8rem; }

/* ---------- 10. 시공갤러리 (gallery) ---------- */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.6rem; }
.gallery-cell { display: flex; flex-direction: column; width: 100%; height: 28rem; text-align: left; border: 1px solid var(--line); border-radius: .6rem; overflow: hidden; background: #fff; cursor: pointer; transition: box-shadow .25s, transform .25s; }
.gallery-cell:hover { box-shadow: 0 1.2rem 2.6rem rgba(0,0,0,.12); transform: translateY(-4px); }
.gallery-cell__thumb { display: block; position: relative; flex: none; height: 22rem; overflow: hidden; background: var(--bg-soft); }
.gallery-cell__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.gallery-cell:hover .gallery-cell__thumb img { transform: scale(1.06); }
.gallery-cell__zoom { position: absolute; right: 1.2rem; bottom: 1.2rem; width: 3.6rem; height: 3.6rem; border-radius: 50%; background: rgba(47,109,179,.9); color: #fff; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .25s; }
.gallery-cell:hover .gallery-cell__zoom { opacity: 1; }
.gallery-cell__zoom svg { width: 1.9rem; height: 1.9rem; }
.gallery-cell__body { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 1rem 2rem; }
.gallery-cell__cat { display: block; font-size: 1.5rem; color: var(--blue); font-weight: 500; }
.gallery-cell__title { display: block; font-size: 1.8rem; font-weight: 500; color: var(--tit); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.gallery-empty { text-align: center; padding: 8rem 0; font-size: 1.8rem; color: var(--txt-sub); }

/* 10-1. 갤러리 모달(라이트박스) */
.gallery-modal { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 6rem 9rem; }
.gallery-modal.is-open { display: flex; }
.gallery-modal__overlay { position: absolute; inset: 0; background: rgba(17,20,24,.9); }
.gallery-modal__dialog { position: relative; z-index: 1; max-width: 88rem; width: 100%; display: flex; flex-direction: column; align-items: center; }
.gallery-modal__img { max-width: 100%; max-height: calc(100vh - 18rem); border-radius: .4rem; }
.gallery-modal__caption { margin-top: 2rem; text-align: center; }
.gallery-modal__title { display: block; font-size: 1.8rem; font-weight: 500; color: #fff; letter-spacing: .01em; }
/* 닫기 — 심플 X */
.gallery-modal__close { position: absolute; top: -4.4rem; right: 0; width: 3.6rem; height: 3.6rem; color: rgba(255,255,255,.85); font-size: 3rem; line-height: 1; display: flex; align-items: center; justify-content: center; transition: color .2s, transform .2s; }
.gallery-modal__close:hover { color: #fff; transform: rotate(90deg); }
/* 좌우 화살표 — index 배너와 동일한 이미지 */
.gallery-modal__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 3.5rem; height: 4.5rem; background-repeat: no-repeat; background-position: center; background-size: contain; text-indent: -9999px; overflow: hidden; opacity: .8; transition: opacity .2s; }
.gallery-modal__nav:hover { opacity: 1; }
.gallery-modal__nav--prev { left: -7rem; background-image: url('/resources/images/main/btn_arrow_left.png'); }
.gallery-modal__nav--next { right: -7rem; background-image: url('/resources/images/main/btn_arrow_right.png'); }

/* ---------- 11. 공지사항 (notice) — 게시판 표 ---------- */
.board-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.board-table { min-width: 72rem; }
.board-table th, .board-table td { padding: 1.8rem 1.2rem; font-size: 1.5rem; text-align: center; border-bottom: 1px solid var(--line); }
.board-table thead th { background: var(--bg-th); color: var(--tit); font-weight: 700; border-top: 2px solid var(--tit); }
.board-table tbody tr:hover { background: var(--bg-soft); }
.board-table .is-num { color: var(--txt-sub); font-size: 1.5rem; width: 8rem; }
.board-table .is-title { text-align: left; }
.board-table .is-title a { color: var(--txt); }
.board-table .is-title a:hover { color: var(--blue); text-decoration: underline; }
.board-table .is-date { color: var(--txt-sub); font-size: 1.5rem; width: 14rem; }
.board-table .is-hit { color: var(--txt-sub); font-size: 1.5rem; width: 8rem; }
.board-badge { display: inline-block; padding: .2rem 1rem; border-radius: .4rem; background: var(--orange); color: #fff; font-size: 1.5rem; font-weight: 500; }
.board-page { display: flex; justify-content: center; gap: .6rem; margin-top: 4rem; }
.board-page a, .board-page span { display: inline-flex; align-items: center; justify-content: center; min-width: 4rem; height: 4rem; padding: 0 1.2rem; border: 1px solid var(--line); border-radius: .4rem; font-size: 1.5rem; color: var(--txt-sub); }
.board-page a:hover { border-color: var(--blue); color: var(--blue); }
.board-page a.is-active { background: var(--blue); border-color: var(--blue); color: #fff; }
.board-page .is-disabled { color: #d2d2d2; cursor: default; }

/* 11-1. 공지사항 상세 (notice_view) */
.board-view { border-top: 2px solid var(--tit); }
.board-view__head { padding: 2.8rem 2rem; background: var(--bg-soft); border-bottom: 1px solid var(--line); }
.board-view__title { font-size: 2.4rem; font-weight: 700; color: var(--tit); }
.board-view__meta { display: flex; flex-wrap: wrap; gap: .8rem 2.6rem; margin-top: 1.4rem; }
.board-view__meta li { font-size: 1.5rem; color: var(--txt-sub); }
.board-view__meta-k { color: var(--tit); font-weight: 500; margin-right: .6rem; }
.board-view__files { padding: 1.8rem 2rem; border-bottom: 1px solid var(--line); }
.board-view__files-tit { font-size: 1.5rem; font-weight: 700; color: var(--tit); margin-bottom: 1rem; }
.board-view__files li { margin-top: .4rem; }
.board-view__files a { display: inline-flex; align-items: center; gap: .8rem; font-size: 1.5rem; color: var(--txt); }
.board-view__files a svg { color: var(--blue); flex: none; }
.board-view__files a:hover { color: var(--blue); }
.board-view__files-size { color: var(--txt-sub); }
.board-view__body { padding: 4rem 2rem; min-height: 18rem; border-bottom: 1px solid var(--line); }
.board-view__body p { font-size: 1.8rem; color: var(--txt); line-height: 1.9; margin-bottom: 2rem; }
.board-view__body p:last-child { margin-bottom: 0; }
.board-view__body img { max-width: 100%; height: auto; border-radius: .4rem; margin: 1rem 0; }
.board-view__img { text-align: center; }
.board-view__img img { border-radius: .4rem; margin-top: 1rem; }
.board-view__nav-row { display: flex; align-items: center; gap: 1.6rem; padding: 1.6rem 2rem; border-bottom: 1px solid var(--line); }
.board-view__nav-k { flex: none; width: 6rem; font-size: 1.5rem; color: var(--tit); font-weight: 500; }
.board-view__nav-link { font-size: 1.5rem; color: var(--txt); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-view__nav-link:hover { color: var(--blue); }
.board-view__nav-none { font-size: 1.5rem; color: var(--txt-sub); }
.board-view__foot { display: flex; justify-content: center; margin-top: 3.5rem; }
.link-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 14rem; height: 5rem; border-radius: .4rem; font-size: 1.6rem; font-weight: 500; transition: background .2s, color .2s; }
.board-view__list { background: var(--blue); color: #fff; }
.board-view__list:hover { background: #357abd; }

/* ---------- 12. 견적문의 (inquiry) — 폼 (ksaluminium 레퍼런스 디자인) ---------- */
.inquiry-lead { font-size: 1.8rem; color: var(--txt); text-align: center; margin-bottom: 3.5rem; line-height: 1.7; }
.inq-alert { padding: 1.6rem 2rem; border-radius: .6rem; font-size: 1.6rem; margin: 0 auto 2.4rem; max-width: 90rem; text-align: center; }
.inq-alert--ok { background: #eaf6ee; color: #227a43; border: 1px solid #b6e0c4; }
.inq-alert--err { background: #fdecec; color: #c0392b; border: 1px solid #f3c6c2; }

.inquiry-form { max-width: 90rem; margin: 0 auto; }
.inquiry-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.2rem 2.6rem; margin-bottom: 2.2rem; }
.inquiry-form__field { display: flex; flex-direction: column; }
.inquiry-form__field--full { grid-column: 1 / -1; }
.inquiry-form__label { font-size: 1.8rem; font-weight: 700; color: var(--tit); margin-bottom: .9rem; }
.inquiry-form__label .req { color: #d13b3b; }
.inquiry-form__input, .inquiry-form__textarea, .inquiry-form__select {
  width: 100%; font-family: inherit; font-size: 1.8rem; color: var(--txt);
  border: 1px solid #cfd6de; border-radius: .6rem; padding: 1.4rem 1.6rem; background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.inquiry-form__input, .inquiry-form__select { height: 5.4rem; }
.inquiry-form__select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  padding-right: 4.4rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1.5L7 7l6-5.5' stroke='%23767676' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.6rem center;
}
.inquiry-form__select::-ms-expand { display: none; }
.inquiry-form__textarea { resize: vertical; line-height: 1.7; min-height: 18rem; }
.inquiry-form__input:focus, .inquiry-form__textarea:focus, .inquiry-form__select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(74,144,210,.15); }
.inquiry-form__agree { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 2.6rem 0; font-size: 1.8rem; color: var(--txt); }
.inquiry-form__agree input { width: 2rem; height: 2rem; accent-color: var(--blue); flex-shrink: 0; }
.inquiry-form__agree b { color: var(--blue); }
.inquiry-form__submit { text-align: center; }
.inquiry-form__btn { display: inline-flex; align-items: center; justify-content: center; height: 5.4rem; padding: 0 4.6rem; font-size: 1.8rem; font-weight: 700; border-radius: .6rem; background: var(--blue); color: #fff; transition: background .15s; }
.inquiry-form__btn:hover { background: #357abd; }

/* ---------- 13. 반응형 ---------- */
@media (max-width: 1240px) {
  .dsc-inner { padding: 0 2rem; }
  .main-hero__caption { padding: 0 3rem; }
}
@media (max-width: 1024px) {
  .dsc-sec { padding: 6rem 0; }
  .main-hero__viewport { height: 42rem; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .dsc-tit, .main-head__title, .main-hero__title, .dsc-visual__title, .sub-head__name { font-size: 2.8rem; }
  .main-call__num { font-size: 2.8rem; }
  .dsc-visual { height: 14rem; }
  .main-hero__viewport { height: 34rem; }
  .sub-head { gap: 1rem; margin-bottom: 3rem; }
  .main-hero__arrow { transform: scale(.8); }
  .main-hero__caption { padding: 0 5rem; }   /* 화살표와 글 겹침 방지 */
  .dsc-content { padding: 4.5rem 0 6rem; }
  .dsc-content .dsc-inner { padding-left: 2rem; padding-right: 2rem; }
  .wp-box { flex-direction: column; align-items: stretch; gap: 1.4rem; }
  .wp-box__tag { width: 100%; height: auto; padding: 1.4rem 0; }
}
@media (max-width: 480px) {
  .dsc-inner { padding: 0 1.6rem; }
  .dsc-content .dsc-inner { padding-left: 1.6rem; padding-right: 1.6rem; }
  .dsc-sec { padding: 4rem 0; }
  .main-head { margin-bottom: 3rem; }
  .main-svc__grid { grid-template-columns: 1fr; gap: 2rem; }
  .main-bottom { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }
  .main-hero__viewport { height: 28rem; }
  .main-call { padding: 3.2rem 2.4rem; }
  .inquiry-form__grid { grid-template-columns: 1fr; gap: 0; }
  .inquiry-form__grid .inquiry-form__field { margin-bottom: 2.2rem; }
  .inquiry-form__btn { width: 100%; }
  .loc__row__label { width: 8rem; }
  .greet__lead { font-size: 2.2rem; }
  /* 공지사항 표: 가로 스크롤 대신 번호·제목만 노출 + 제목 말줄임 */
  .board-scroll { overflow-x: visible; }
  .board-table { min-width: 0; table-layout: fixed; }
  .board-table .is-date, .board-table .is-hit { display: none; }
  .board-table .is-num { width: 6rem; }
  .board-table .is-title { max-width: 0; }
  .board-table .is-title a { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* 갤러리 모달 — 모바일 컨트롤 위치 보정 */
@media (max-width: 900px) {
  .gallery-modal { padding: 5rem 1.6rem; }
  .gallery-modal__nav--prev { left: .4rem; }
  .gallery-modal__nav--next { right: .4rem; }
  .gallery-modal__close { top: -4rem; right: .4rem; }
  .gallery-modal__img { max-height: calc(100vh - 14rem); }
}