/* ===== Design Tokens =====
   컬러 컨셉 "현장의 실제 색" — Pine(짙은 소나무 그린)=브랜드 구조, Sky(현장의 쾌청한 하늘)=정보 강조.
   행동유도 색은 오렌지·러스트 계열을 완전히 배제하고, 위험목·안전사고 카피와 어울리는
   채도 높은 레드(경고·긴급 신호)로 정한다. AI스러운 주황 그라디언트와 확실히 구분된다. */
:root{
  --paper:#F5F8F7;
  --paper-2:#E7EEEA;
  --ink:#152018;
  --ink-soft:#4C5A51;
  --pine:#234A2C;
  --pine-deep:#122318;
  --pine-tint:#E1EBE3;
  --sky:#1C7FB4;
  --sky-deep:#125C87;
  --sky-tint:#DDF0F8;
  --amber:#C0392B;
  --amber-deep:#96281B;
  --line:rgba(18,35,24,.14);
  --line-soft:rgba(18,35,24,.08);
  --shadow-1:0 1px 2px rgba(18,35,24,.08);

  --space-1:.4rem;
  --space-2:.8rem;
  --space-3:1.2rem;
  --space-4:1.6rem;
  --space-5:2.4rem;
  --space-6:3.6rem;
  --space-7:5.6rem;
  --space-8:8rem;

  --radius-s:0;
  --radius-m:0;

  --max:1220px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif;
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  word-break:keep-all;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,p,figure{margin:0}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
ul{margin:0;padding:0;list-style:none}
button{font:inherit}

.container{max-width:var(--max);margin-inline:auto;padding-inline:var(--space-4)}

/* ===== Typography scale ===== */
.h1{font-size:clamp(2.1rem,1.5rem + 2.6vw,3.6rem);font-weight:800;letter-spacing:-.02em;line-height:1.14;color:var(--pine-deep)}
.h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,2.2rem);font-weight:800;letter-spacing:-.01em;line-height:1.28;color:var(--pine-deep)}
.h3{font-size:1.15rem;font-weight:700;line-height:1.4}
.eyebrow{
  display:inline-flex;align-items:center;gap:.5em;
  font-size:.8rem;font-weight:700;letter-spacing:.06em;color:var(--sky-deep);
}
.lede{font-size:1.14rem;color:var(--ink-soft);line-height:1.75}
.answer{font-size:1.2rem;line-height:1.8;color:var(--ink)}

/* ===== Reveal (variety, not one animation) =====
   JS 실행 전/실패 시에는 항상 보이는 상태가 기본값이다.
   main.js가 실제로 실행됐을 때만 html.js-ready가 붙어 아래 규칙이 적용되고,
   IntersectionObserver + 1.5s 타임아웃 안전장치로 콘텐츠가 영구히 숨겨지지 않는다. */
.js-ready [data-reveal]{opacity:0;transition:opacity .6s cubic-bezier(.16,.8,.3,1),transform .6s cubic-bezier(.16,.8,.3,1)}
.js-ready [data-reveal="fade-up"]{transform:translateY(18px)}
.js-ready [data-reveal="fade-in"]{transform:none}
.js-ready [data-reveal="scale-in"]{transform:scale(.94)}
.js-ready [data-reveal="slide-left"]{transform:translateX(30px)}
.js-ready [data-reveal="slide-right"]{transform:translateX(-30px)}
.js-ready [data-reveal].is-in{opacity:1;transform:none}

/* ===== Header =====
   기본은 투명 상태로 히어로 위에 겹쳐 보이고, 스크롤하면 배경이 채워져
   콘텐츠와 확연히 구분된다(요청: "겹치기 허용 → 스크롤 내리면 구분 가능"). */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:40;
  background:transparent;border-bottom:1px solid transparent;
  transition:background-color .25s ease,border-color .25s ease,box-shadow .25s ease,backdrop-filter .25s ease;
}
.site-header.is-scrolled{
  background:rgba(247,245,239,.94);
  backdrop-filter:blur(8px);
  border-bottom-color:var(--line-soft);
  box-shadow:0 2px 14px rgba(20,30,20,.06);
}
.site-header .bar{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-3);
  min-height:74px;
  padding-block:var(--space-2);
}
.logo-block{display:flex;flex-direction:row;align-items:center;gap:.6em;text-decoration:none;line-height:1.1}
.logo-mark{width:30px;height:30px;flex:none;color:var(--pine-deep);transition:color .25s ease}
.logo-text{display:flex;flex-direction:column;gap:.2em}
.logo-name{font-weight:800;font-size:1.15rem;letter-spacing:-.01em;color:var(--pine-deep);transition:color .25s ease}
.logo-h1{
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);transition:color .25s ease;
}
/* 메인페이지는 히어로가 사진·짙은 패널로 헤더 뒤에서 계속 바뀌므로,
   스크롤 전(투명 상태)에는 헤더 글자를 흰색+그림자로 고정해 항상 읽히게 한다. */
body.hero-dark .site-header:not(.is-scrolled) .logo-mark{color:#fff;filter:drop-shadow(0 1px 4px rgba(0,0,0,.45))}
body.hero-dark .site-header:not(.is-scrolled) .logo-name{color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.45)}
body.hero-dark .site-header:not(.is-scrolled) .logo-h1{color:rgba(255,255,255,.86);text-shadow:0 1px 6px rgba(0,0,0,.45)}
.header-cta{
  display:inline-flex;align-items:center;gap:.5em;
  background:var(--amber);color:#fff;
  padding:.7em 1.5em;border-radius:0;
  font-weight:700;font-size:.96rem;text-decoration:none;
  white-space:nowrap;
}
.header-cta:hover{background:var(--amber-deep)}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  padding:.95em 1.7em;border-radius:0;
  font-weight:700;font-size:1rem;text-decoration:none;
  border:1px solid transparent;
}
.btn-amber{background:var(--amber);color:#fff}
.btn-amber:hover{background:var(--amber-deep)}
.btn-outline{border-color:rgba(255,255,255,.55);color:inherit}
.btn-outline-dark{border-color:var(--line);color:var(--pine-deep)}

/* ===== Split Hero ===== */
.hero{padding-top:calc(74px + var(--space-6));padding-bottom:var(--space-7)}
.hero--tint{background:var(--pine-tint);border-bottom:1px solid var(--line)}
.hero-grid{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:var(--space-6);align-items:center;
}
.hero-media{
  border-radius:var(--radius-m);overflow:hidden;
  box-shadow:var(--shadow-1);
  aspect-ratio:3/2;
}
.hero-media img{width:100%;height:100%;object-fit:cover}

.hero-copy .eyebrow{margin-bottom:var(--space-3)}
.hero-copy .h1{margin-bottom:var(--space-4)}
.hero-copy .answer{margin-bottom:var(--space-5)}
.hero-actions{display:flex;gap:var(--space-3);flex-wrap:wrap}

/* ===== 메인페이지 히어로 모자이크 — 사진이 압도적으로 보이도록 4칸 중 1칸만 텍스트, 3칸은 사진.
   화면 전체 폭으로 브레이크아웃(풀블리드)하고, 텍스트 칸 위치는 매 로드마다 랜덤(베리에이션). ===== */
.hero-mosaic{
  width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;
  gap:5px;background:var(--ink);
  height:min(80vh,720px);min-height:480px;
}
.hero-mosaic-photo{margin:0;overflow:hidden;position:relative;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.hero-mosaic-photo img{width:100%;height:100%;object-fit:cover;display:block}
.hero-mosaic-text{
  background:var(--pine-deep);color:#fff;
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(74px + var(--space-5)) var(--space-6) var(--space-5);
}
.hero-mosaic-text .eyebrow{color:var(--sky-tint)}
.hero-mosaic-text .h1{color:#fff;margin-bottom:0}
.hero-tagline{font-size:1.2rem;color:rgba(255,255,255,.86);margin:var(--space-3) 0 var(--space-5);line-height:1.6}

.hero-mosaic--tl .hero-mosaic-text{grid-column:1;grid-row:1}
.hero-mosaic--tl .hero-mosaic-photo:nth-of-type(1){grid-column:2;grid-row:1}
.hero-mosaic--tl .hero-mosaic-photo:nth-of-type(2){grid-column:1;grid-row:2}
.hero-mosaic--tl .hero-mosaic-photo:nth-of-type(3){grid-column:2;grid-row:2}
.hero-mosaic--tr .hero-mosaic-text{grid-column:2;grid-row:1}
.hero-mosaic--tr .hero-mosaic-photo:nth-of-type(1){grid-column:1;grid-row:1}
.hero-mosaic--tr .hero-mosaic-photo:nth-of-type(2){grid-column:1;grid-row:2}
.hero-mosaic--tr .hero-mosaic-photo:nth-of-type(3){grid-column:2;grid-row:2}
.hero-mosaic--bl .hero-mosaic-text{grid-column:1;grid-row:2}
.hero-mosaic--bl .hero-mosaic-photo:nth-of-type(1){grid-column:1;grid-row:1}
.hero-mosaic--bl .hero-mosaic-photo:nth-of-type(2){grid-column:2;grid-row:1}
.hero-mosaic--bl .hero-mosaic-photo:nth-of-type(3){grid-column:2;grid-row:2}
.hero-mosaic--br .hero-mosaic-text{grid-column:2;grid-row:2}
.hero-mosaic--br .hero-mosaic-photo:nth-of-type(1){grid-column:1;grid-row:1}
.hero-mosaic--br .hero-mosaic-photo:nth-of-type(2){grid-column:2;grid-row:1}
.hero-mosaic--br .hero-mosaic-photo:nth-of-type(3){grid-column:1;grid-row:2}

/* ===== Section shells ===== */
.section{padding-block:var(--space-7)}
.section-tight{padding-block:var(--space-6)}
.section-alt{background:var(--pine-tint)}
.section-sky{background:var(--sky-tint)}
.section-head{max-width:640px;margin-bottom:var(--space-6)}
.section-head .eyebrow{margin-bottom:var(--space-3)}

/* ===== Alternating 50-50 rows (service understanding) ===== */
.service-row{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6);
  align-items:center;padding-block:var(--space-6);
}
.service-row:not(:last-child){border-bottom:1px solid var(--line)}
.service-row.reverse .service-media{order:2}
.service-media{border-radius:var(--radius-m);overflow:hidden;aspect-ratio:3/2}
.service-media img{width:100%;height:100%;object-fit:cover}
.service-copy .h3{color:var(--pine-deep);margin-bottom:var(--space-2)}
.service-copy p{color:var(--ink-soft)}
.service-tag{
  display:inline-block;font-size:.78rem;font-weight:700;color:var(--amber-deep);
  margin-bottom:var(--space-2);letter-spacing:.02em;
}

/* ===== 3x2 서비스 카드 그리드 (서비스 · 시공사례 카드형 섹션 공통) ===== */
.service-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);
}
.service-card{
  display:block;text-decoration:none;position:relative;
  border-radius:var(--radius-m);overflow:hidden;background:var(--pine-deep);
  aspect-ratio:4/3;
}
.service-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.service-card:hover img{transform:scale(1.05)}
.service-card-cap{
  position:absolute;left:0;right:0;bottom:0;padding:var(--space-4);
  background:linear-gradient(to top,rgba(10,14,10,.85),transparent 70%);
  color:#fff;
}
.service-card-cap b{display:block;font-size:1.02rem;font-weight:700;margin-bottom:.2em}
.service-card-cap span{font-size:.82rem;opacity:.9}
.service-card--cta{
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--space-3);
  background:var(--amber);color:#fff;padding:var(--space-5);
}
.service-card--cta b{font-size:1.15rem;font-weight:800;line-height:1.4}
.service-card--cta span{font-size:.88rem;opacity:.92}
.service-card--cta .sc-arrow{
  margin-top:auto;font-weight:700;display:inline-flex;align-items:center;gap:.4em;
}

/* ===== Editorial portfolio 벤토 그리드 — 항상 6열 x 최대 3행, 고아 카드 없이 꽉 채운다 ===== */
.portfolio-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  grid-auto-rows:220px;
  gap:var(--space-3);
}
.portfolio-item{
  position:relative;border-radius:var(--radius-s);overflow:hidden;
  background:var(--pine-deep);
}
.portfolio-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.portfolio-item:hover img{transform:scale(1.05)}
.portfolio-cap{
  position:absolute;left:0;right:0;bottom:0;padding:var(--space-3);
  background:linear-gradient(to top,rgba(10,14,10,.82),transparent);
  color:#fff;
}
.portfolio-cap b{display:block;font-size:.98rem;font-weight:700}
.portfolio-cap span{font-size:.76rem;opacity:.85}
/* 1행: 큰 카드 2개(3+3=6칸) · 2행·3행: 3개씩(2+2+2=6칸) — 매 행이 6칸을 정확히 채운다 */
.pf-1,.pf-2{grid-column:span 3}
.pf-3,.pf-4,.pf-5,.pf-6,.pf-7,.pf-8{grid-column:span 2}

/* ===== Process (5단계 고정, 사진 근거 + 순차 리빌) — PC는 이미지 작게 옆으로, 모바일은 위아래로 ===== */
.process-list{display:flex;flex-direction:column;gap:var(--space-6)}
.process-step{
  display:grid;grid-template-columns:56px 1fr;gap:var(--space-4);
  align-items:start;
}
.process-num{
  width:56px;height:56px;border-radius:0;
  background:var(--pine-deep);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:1.15rem;
}
.process-card{
  background:#fff;border-radius:var(--radius-m);overflow:hidden;
  box-shadow:var(--shadow-1);transition:transform .3s ease,box-shadow .3s ease;
  display:grid;grid-template-columns:220px 1fr;align-items:stretch;
}
.process-card:hover{transform:translateY(-5px);box-shadow:0 16px 30px rgba(18,35,24,.14)}
.process-media{width:100%;height:100%;min-height:150px}
.process-media img{width:100%;height:100%;object-fit:cover;display:block}
.process-copy{padding:var(--space-4) var(--space-5)}
.process-copy h3{color:var(--pine-deep);margin-bottom:.4em;font-size:1.2rem}
.process-copy p{color:var(--ink-soft)}

/* ===== FAQ ===== */
.faq{max-width:760px}
.faq details{
  border-bottom:1px solid var(--line);padding-block:var(--space-3);
}
.faq summary{
  cursor:pointer;font-weight:700;font-size:1.04rem;color:var(--pine-deep);
  list-style:none;display:flex;justify-content:space-between;gap:var(--space-3);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-weight:400;color:var(--amber-deep);font-size:1.3rem;line-height:1}
.faq details[open] summary::after{content:'–'}
.faq .faq-a{padding-top:var(--space-2);color:var(--ink-soft)}

/* ===== CTA band ===== */
.cta-band{
  position:relative;overflow:hidden;
  background:var(--pine-deep);color:#fff;
  border-radius:var(--radius-m);
  padding:var(--space-6) var(--space-6);
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);
  flex-wrap:wrap;
}
.cta-band h2{color:#fff}
.cta-band p{color:rgba(255,255,255,.78);margin-top:var(--space-2)}
.cta-actions{display:flex;gap:var(--space-3);flex-wrap:wrap}
.cta-band--photo{
  background-image:var(--cta-bg);background-size:cover;background-position:center;
}
.cta-band--photo::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(115deg,rgba(20,32,22,.94) 15%,rgba(20,32,22,.62) 60%,rgba(20,32,22,.4));
}
.cta-band--photo>*{position:relative;z-index:1}

/* ===== 세부페이지 스택 블록 — 이미지가 항상 섹션 최상단, 텍스트는 그 아래 ===== */
.stack-block{margin-bottom:var(--space-6)}
.stack-media{width:100%;aspect-ratio:16/9;border-radius:var(--radius-m);overflow:hidden;box-shadow:var(--shadow-1);margin-bottom:var(--space-4)}
.stack-media img{width:100%;height:100%;object-fit:cover}
.stack-copy{max-width:760px}
.tag-list{display:flex;flex-wrap:wrap;gap:.6em;margin-top:var(--space-3)}
.tag-chip{background:var(--sky-tint);color:var(--sky-deep);font-size:.82rem;font-weight:600;padding:.5em 1em;border-radius:0}

/* ===== 상담 페이지 정보+폼 2단 ===== */
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:var(--space-6)}

/* ===== 상담 페이지 전화·문자 블록 (전화번호가 노출되는 유일한 곳) ===== */
.call-block{
  background:var(--sky-tint);border-radius:var(--radius-m);
  padding:var(--space-6);text-align:center;
}
.call-label{display:block;font-size:.82rem;font-weight:700;color:var(--sky-deep);letter-spacing:.02em;margin-bottom:var(--space-3)}
.call-number{
  font-size:clamp(1.9rem,1rem + 5vw,4.2rem);font-weight:800;letter-spacing:-.02em;
  color:var(--pine-deep);margin-bottom:var(--space-5);
}
.call-actions{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);max-width:560px;margin-inline:auto}
.call-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3em;
  padding:var(--space-4);border-radius:var(--radius-m);text-decoration:none;
  min-height:96px;
}
.call-btn b{font-size:1.15rem;font-weight:800}
.call-btn span{font-size:.84rem}
.call-btn--phone{background:var(--amber);color:#fff}
.call-btn--phone:hover{background:var(--amber-deep)}
.call-btn--phone span{opacity:.9}
.call-btn--sms{background:#fff;border:2px solid var(--pine-deep);color:var(--pine-deep)}
.call-btn--sms:hover{background:var(--pine-deep);color:#fff}
.call-btn--sms span{opacity:.75}

/* ===== 차별화 카드 — 라인드로잉 아이콘이 스크롤 시 그려지는 애니메이션 ===== */
.diff-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}
.diff-card{
  background:#fff;border-radius:var(--radius-m);padding:var(--space-5);
  box-shadow:var(--shadow-1);transition:transform .3s ease,box-shadow .3s ease;
}
.diff-card:hover{transform:translateY(-6px);box-shadow:0 14px 28px rgba(18,35,24,.12)}
.diff-icon{
  width:56px;height:56px;margin-bottom:var(--space-4);
  color:var(--pine-deep);
}
.diff-icon svg{width:100%;height:100%}
.diff-icon svg path,.diff-icon svg circle{
  fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:220;stroke-dashoffset:220;transition:stroke-dashoffset 1.1s ease;
}
.js-ready [data-reveal].is-in .diff-icon svg path,
.js-ready [data-reveal].is-in .diff-icon svg circle{stroke-dashoffset:0}
.diff-card h3{color:var(--pine-deep);margin-bottom:.4em}
.diff-card p{color:var(--ink-soft);font-size:.94rem}

/* ===== 전후 비교 — 실제 같은 현장 연속 촬영본을 나란히 바로 보여준다 ===== */
.compare{max-width:920px;margin:0 auto var(--space-7)}
.compare-pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
.compare-panel{
  position:relative;margin:0;aspect-ratio:4/3;border-radius:var(--radius-m);overflow:hidden;
  box-shadow:var(--shadow-1);
}
.compare-panel img{width:100%;height:100%;object-fit:cover;display:block}
.compare-tag{
  position:absolute;top:var(--space-3);left:var(--space-3);padding:.4em .9em;border-radius:0;
  font-size:.78rem;font-weight:700;color:#fff;background:rgba(18,35,24,.72);backdrop-filter:blur(4px);
}
.compare-caption{text-align:center;margin-top:var(--space-3);font-size:.9rem;color:var(--ink-soft)}

/* ===== 프로세스 연결선 — 스크롤하면 실제로 그려지며 단계를 잇는다 ===== */
.process-list{position:relative}
.process-list::before{
  content:'';position:absolute;left:27px;top:28px;bottom:28px;width:2px;background:var(--line);
}
.process-list::after{
  content:'';position:absolute;left:27px;top:28px;width:2px;background:var(--amber);height:0;
  transition:height 1.6s ease;
}
.js-ready .process-list.is-drawn::after{height:calc(100% - 56px)}
.process-num{position:relative;z-index:1}

/* ===== 출동 지역 ===== */
.service-area{
  display:flex;align-items:center;gap:var(--space-5);flex-wrap:wrap;
  background:#fff;border-radius:var(--radius-m);padding:var(--space-5);box-shadow:var(--shadow-1);
}
.service-area-pin{
  width:64px;height:64px;flex:none;color:var(--amber-deep);
}
.service-area-pin svg{width:100%;height:100%}
.service-area-pin svg path{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.service-area p{color:var(--ink-soft)}
.service-area b{color:var(--pine-deep)}

/* ===== 미니 갤러리 (조경수정지전정 등 결과물 위주 페이지에서 사용) ===== */
.mini-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-3)}
.mini-gallery figure{margin:0;position:relative;aspect-ratio:4/3;overflow:hidden;box-shadow:var(--shadow-1)}
.mini-gallery img{width:100%;height:100%;object-fit:cover;display:block}
.mini-gallery figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:var(--space-2) var(--space-3);
  background:linear-gradient(to top,rgba(10,14,10,.75),transparent);
  color:#fff;font-size:.8rem;font-weight:600;
}

/* ===== Related links ===== */
.related-list{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-4)}
.related-card{
  display:block;text-decoration:none;border:1px solid var(--line);
  border-radius:var(--radius-m);padding:var(--space-4);
  background:#fff;
}
.related-card b{display:block;color:var(--pine-deep);margin-bottom:.3em}
.related-card span{font-size:.88rem;color:var(--ink-soft)}

/* ===== Footer ===== */
.site-footer{background:var(--pine-deep);color:rgba(255,255,255,.72);padding-block:var(--space-6) var(--space-5)}
.footer-grid{display:grid;grid-template-columns:1.1fr .7fr 1.4fr;gap:var(--space-6)}
.footer-brand b{color:#fff;font-size:1.1rem}
.footer-brand p{margin-top:var(--space-3);font-size:.88rem;line-height:1.9}
.footer-col-label{display:block;font-size:.78rem;font-weight:700;letter-spacing:.08em;color:rgba(255,255,255,.45);margin-bottom:var(--space-2)}
.footer-nav a{display:block;text-decoration:none;color:rgba(255,255,255,.72);padding-block:.3em;font-size:.92rem}
.footer-nav a:hover{color:#fff}
/* 대표서비스: 세로 스택이 아니라 옆으로(가로) 나열 */
.footer-services-row{display:flex;flex-wrap:wrap;column-gap:1em;row-gap:.6em}
.footer-services-row a{text-decoration:none;color:rgba(255,255,255,.72);font-size:.92rem;white-space:nowrap}
.footer-services-row a:hover{color:#fff}
.footer-bottom{
  margin-top:var(--space-6);padding-top:var(--space-4);
  border-top:1px solid rgba(255,255,255,.14);
  font-size:.8rem;color:rgba(255,255,255,.5);
}


/* ===== Responsive ===== */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr}
  .hero-media{order:-1;aspect-ratio:16/10}
  .hero-mosaic{height:min(64vh,560px);min-height:420px}
  .service-row{grid-template-columns:1fr}
  .service-row.reverse .service-media{order:0}
  .service-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
}
@media (max-width:768px){
  .site-header .bar{min-height:64px}
  .hero{padding-top:calc(64px + var(--space-5))}
  .diff-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .mini-gallery{grid-template-columns:repeat(2,1fr)}
  .footer-services-row{flex-direction:column;align-items:flex-start;row-gap:.5em}
  .process-card{grid-template-columns:1fr}
  .process-media{aspect-ratio:16/9;min-height:0}
  .compare-pair{grid-template-columns:1fr}
  .service-area{flex-direction:column;text-align:center}
  .logo-mark{width:24px;height:24px}
  .logo-name{font-size:1.02rem}
  .logo-h1{font-size:.62rem;letter-spacing:.1em}
  .header-cta{padding:.6em 1.2em;font-size:.88rem}
  .service-grid{grid-template-columns:1fr}
  .portfolio-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:180px}
  .pf-1,.pf-2,.pf-3,.pf-4,.pf-5,.pf-6,.pf-7,.pf-8{grid-column:span 2}
  .related-list{grid-template-columns:1fr}
  .cta-band{flex-direction:column;align-items:flex-start}
  .process-step{grid-template-columns:44px 1fr}
  .process-num{width:44px;height:44px;font-size:1rem}
  .process-list::before,.process-list::after{left:21px}
  .call-actions{grid-template-columns:1fr;max-width:360px}
  .call-btn{flex-direction:row;justify-content:center;gap:.6em;min-height:auto;padding:var(--space-3) var(--space-4)}
  .call-block{padding:var(--space-5) var(--space-3)}
  .hero-mosaic{grid-template-columns:1fr;grid-template-rows:auto;height:auto;gap:3px}
  .hero-mosaic-text{grid-column:1!important;grid-row:auto!important;order:-1;padding:calc(64px + var(--space-4)) var(--space-4) var(--space-4)}
  .hero-mosaic-photo{grid-column:1!important;grid-row:auto!important;aspect-ratio:4/3}
}
@media (max-width:430px){
  body{font-size:16px}
  .container{padding-inline:var(--space-3)}
  .footer-grid{grid-template-columns:1fr}
}