:root {
  --navy: #17355f;
  --navy-deep: #0b1d35;
  --navy-soft: #eaf0f7;
  --gold: #b18a45;
  --gold-soft: #f6f0e4;
  --ink: #171a1f;
  --muted: #667085;
  --line: #dde3ea;
  --paper: #fff;
  --ivory: #faf8f3;
  --radius: 18px;
  --shadow: 0 14px 42px rgba(16, 35, 61, .08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: #fff;
  font-family: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", Arial, sans-serif;
  line-height: 1.65;
}
h1, h2, h3 { word-break: keep-all; overflow-wrap: break-word; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input { font: inherit; }
.wrap { width: min(1160px, calc(100% - 40px)); margin: 0 auto; }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid rgba(15,35,61,.08);
  backdrop-filter: blur(14px);
}
.nav { min-height: 72px; display: flex; align-items: center; gap: 28px; }
.brand img { width: 132px; height: auto; }
.nav-links { display: flex; align-items: center; justify-content: center; gap: 26px; flex: 1; font-size: 14px; font-weight: 750; }
.nav-links .active { color: var(--navy); position: relative; }
.nav-links .active::after { content:""; position:absolute; left:0; right:0; bottom:-12px; height:2px; background:var(--gold); }
.call { background: var(--navy-deep); color:#fff; padding: 10px 17px; border-radius: 8px; font-weight: 800; font-size: 14px; }

.hero {
  color: #fff;
  background: radial-gradient(circle at 82% 20%, rgba(177,138,69,.26), transparent 31%), linear-gradient(135deg, #0b1d35, #17355f 72%, #214979);
  padding: 88px 0 82px;
  overflow: hidden;
}
.eyebrow { margin:0 0 12px; color: #d9bd83; font-size: 12px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.hero h1 { margin:0; max-width:800px; font-size: clamp(38px, 5vw, 64px); line-height:1.13; letter-spacing:-.045em; }
.hero p { max-width:720px; margin:22px 0 0; color:rgba(255,255,255,.78); font-size:18px; }
.hero-note { margin-top:28px; display:flex; flex-wrap:wrap; gap:10px; }
.hero-note span { border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.07); padding:7px 12px; border-radius:999px; font-size:13px; }

.intro { padding: 74px 0 26px; }
.section-head { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:26px; }
.section-head h2 { margin:0; font-size:clamp(28px,3.2vw,42px); line-height:1.25; letter-spacing:-.04em; }
.section-head p { max-width:570px; margin:0; color:var(--muted); }

.case-card {
  display:grid; grid-template-columns:1.2fr .8fr; overflow:hidden;
  border:1px solid var(--line); border-radius:22px; background:var(--paper); box-shadow:var(--shadow);
}
.case-list { display:grid; gap:30px; }
.case-card-media { position:relative; min-height:480px; background:#d8dde3; }
.case-card-media img { width:100%; height:100%; object-fit:cover; }
.case-card-media.case-media-story {
  display:grid;
  grid-template-rows:minmax(0,1fr) 128px;
  gap:4px;
  height:560px;
  min-height:0;
  padding:4px;
  background:var(--navy-deep);
}
.case-media-main { position:relative; min-height:0; overflow:hidden; }
.case-media-main > img { position:absolute; inset:0; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.case-card:hover .case-media-main > img { transform:scale(1.025); }
.case-media-caption {
  position:absolute; right:14px; bottom:14px; padding:6px 10px;
  border:1px solid rgba(255,255,255,.24); border-radius:999px;
  background:rgba(11,29,53,.84); color:#fff; font-size:11px; font-weight:850;
  backdrop-filter:blur(8px);
}
.case-media-strip { display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:4px; min-width:0; }
.case-media-strip figure { position:relative; min-width:0; margin:0; overflow:hidden; background:#d8dde3; }
.case-media-strip img { position:absolute; inset:0; transition:transform .45s ease, filter .45s ease; }
.case-media-strip figure:hover img { transform:scale(1.06); filter:saturate(1.08); }
.case-media-strip figcaption {
  position:absolute; inset:auto 6px 6px; padding:4px 6px; border-radius:5px;
  background:rgba(11,29,53,.78); color:#fff; font-size:10px; line-height:1.2;
  font-weight:800; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.badge { position:absolute; top:18px; left:18px; padding:8px 11px; border-radius:999px; background:rgba(10,27,48,.9); color:#fff; font-size:12px; font-weight:850; }
.case-card-body { padding:46px; display:flex; flex-direction:column; justify-content:center; }
.case-card-body .type { color:var(--gold); font-size:13px; font-weight:900; }
.case-card-body h3 { margin:12px 0 14px; font-size:32px; line-height:1.25; letter-spacing:-.04em; }
.case-card-body p { margin:0; color:var(--muted); }
.specs { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden; margin:28px 0; }
.specs div { background:#fff; padding:14px; }
.specs small { display:block; color:var(--muted); font-size:11px; }
.specs strong { display:block; color:var(--navy); font-size:16px; margin-top:2px; }
.primary-btn { display:inline-flex; justify-content:center; align-items:center; width:max-content; min-height:48px; padding:0 22px; border-radius:9px; background:var(--navy); color:#fff; font-weight:850; }
.disclaimer { margin:22px 0 80px; color:#7b8491; font-size:13px; }

.detail-hero { padding:72px 0 56px; background:var(--ivory); border-bottom:1px solid #eee8dc; }
.breadcrumbs { color:var(--muted); font-size:13px; margin-bottom:24px; }
.detail-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:46px; align-items:center; }
.detail-grid h1 { margin:8px 0 18px; font-size:clamp(36px,4.5vw,58px); line-height:1.14; letter-spacing:-.05em; }
.detail-grid .lead { color:#5f6773; font-size:17px; max-width:650px; }
.summary-card { background:#fff; border:1px solid #e4ded1; border-radius:18px; padding:25px; box-shadow:0 12px 30px rgba(56,46,28,.06); }
.summary-row { display:flex; justify-content:space-between; gap:20px; padding:10px 0; border-bottom:1px solid #eee; }
.summary-row:last-child { border:0; }
.summary-row span { color:var(--muted); }
.summary-row b { text-align:right; }
.summary-row.price { margin-top:8px; padding:18px; background:var(--navy); color:#fff; border-radius:12px; align-items:center; }
.summary-row.price span { color:rgba(255,255,255,.72); }
.summary-row.price b { font-size:25px; }

.journey { padding:80px 0; }
.journey-intro { max-width:740px; margin-bottom:42px; }
.journey-intro h2 { margin:0 0 14px; font-size:38px; letter-spacing:-.04em; }
.journey-intro p { margin:0; color:var(--muted); }
.step { display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:center; padding:48px 0; border-top:1px solid var(--line); }
.step:nth-child(even) .step-media { order:2; }
.step-media { position:relative; overflow:hidden; border-radius:var(--radius); background:#eef1f4; box-shadow:var(--shadow); }
.step-media img { width:100%; aspect-ratio:4/3; object-fit:cover; }
.step-media.contain img { object-fit:contain; background:#f1f3f5; }
.step-media.reference img { object-position:right center; }
.image-label { position:absolute; right:12px; bottom:12px; background:rgba(11,29,53,.88); color:#fff; padding:6px 9px; border-radius:7px; font-size:11px; font-weight:800; }
.media-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.media-gallery figure { position:relative; margin:0; overflow:hidden; border-radius:14px; background:#eef1f4; border:1px solid var(--line); }
.media-gallery img { width:100%; height:100%; min-height:220px; aspect-ratio:4/3; object-fit:cover; }
.media-gallery .contain img { object-fit:contain; background:#eef1f4; }
.media-gallery .wide { grid-column:1/-1; }
.media-gallery .wide img { aspect-ratio:16/9; }
.media-gallery figcaption { position:absolute; left:10px; bottom:10px; padding:5px 8px; border-radius:6px; background:rgba(11,29,53,.86); color:#fff; font-size:11px; font-weight:800; }
.step-num { color:var(--gold); font-size:13px; font-weight:900; letter-spacing:.1em; }
.step h3 { margin:9px 0 14px; font-size:31px; line-height:1.25; letter-spacing:-.035em; }
.step p { margin:0; color:var(--muted); }
.bullet { margin:19px 0 0; padding:0; list-style:none; display:grid; gap:8px; }
.bullet li { position:relative; padding-left:18px; color:#3d4652; font-size:14px; }
.bullet li::before { content:""; position:absolute; left:0; top:.68em; width:6px; height:6px; border-radius:50%; background:var(--gold); }

.case-photo-archive { padding:84px 0 96px; background:#f4f6f9; border-top:1px solid var(--line); }
.archive-intro { max-width:780px; margin-bottom:48px; }
.archive-intro h2 { margin:0 0 14px; color:var(--navy-deep); font-size:clamp(32px,4vw,48px); line-height:1.18; letter-spacing:-.045em; }
.archive-intro > p:last-child { margin:0; color:var(--muted); }
.archive-group + .archive-group { margin-top:62px; padding-top:58px; border-top:1px solid #d8dee7; }
.archive-group-head { display:grid; grid-template-columns:54px minmax(0,1fr); gap:18px; align-items:start; margin-bottom:24px; }
.archive-group-head > span { display:grid; place-items:center; width:54px; height:54px; border-radius:50%; background:var(--navy); color:#fff; font-weight:900; }
.archive-group-head h3 { margin:0 0 5px; color:var(--navy-deep); font-size:27px; letter-spacing:-.03em; }
.archive-group-head p { margin:0; max-width:760px; color:var(--muted); font-size:14px; }
.archive-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.archive-grid figure { position:relative; margin:0; overflow:hidden; min-width:0; border-radius:14px; background:#dfe4ea; box-shadow:0 8px 24px rgba(11,29,53,.08); }
.archive-grid figure.feature { grid-column:span 2; grid-row:span 2; }
.archive-grid img { width:100%; height:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .45s ease; }
.archive-grid figure.feature img { aspect-ratio:auto; min-height:100%; }
.archive-grid figure.contain img { object-fit:contain; background:#eef1f4; }
.archive-grid figure:hover img { transform:scale(1.025); }
.archive-grid figcaption { position:absolute; left:10px; bottom:10px; max-width:calc(100% - 20px); padding:6px 9px; border-radius:7px; background:rgba(11,29,53,.86); color:#fff; font-size:11px; font-weight:800; backdrop-filter:blur(6px); }

.compare { position:relative; aspect-ratio:16/9; overflow:hidden; border-radius:var(--radius); background:#ddd; box-shadow:var(--shadow); }
.compare img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.compare .after { clip-path:inset(0 0 0 50%); }
.compare-line { position:absolute; top:0; bottom:0; left:50%; width:3px; transform:translateX(-50%); background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.18); pointer-events:none; }
.compare-line::after { content:"↔"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:42px; height:42px; display:grid; place-items:center; border-radius:50%; background:#fff; color:var(--navy); font-weight:900; }
.compare input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:ew-resize; z-index:3; }
.compare-tags { position:absolute; inset:14px 14px auto; display:flex; justify-content:space-between; z-index:2; pointer-events:none; }
.compare-tags span { color:#fff; background:rgba(0,0,0,.58); border-radius:999px; padding:5px 9px; font-size:11px; font-weight:800; }

.estimate-section { padding:82px 0; background:var(--navy-deep); color:#fff; }
.estimate-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:55px; align-items:start; }
.estimate-copy h2 { margin:8px 0 16px; font-size:40px; line-height:1.18; letter-spacing:-.04em; }
.estimate-copy p { color:rgba(255,255,255,.68); }
.estimate-total { margin-top:28px; padding-top:24px; border-top:1px solid rgba(255,255,255,.18); }
.estimate-total small { color:#d9bd83; font-weight:800; }
.estimate-total strong { display:block; margin:4px 0; font-size:42px; letter-spacing:-.04em; }
.estimate-total span { color:rgba(255,255,255,.62); font-size:13px; }
.price-panel { background:#fff; color:var(--ink); border-radius:18px; padding:28px; }
.price-group + .price-group { border-top:1px solid var(--line); margin-top:19px; padding-top:19px; }
.price-group h3 { display:flex; justify-content:space-between; margin:0 0 12px; color:var(--navy); font-size:18px; }
.price-group ul { margin:0; padding:0; list-style:none; display:grid; gap:8px; color:#505966; }
.price-group li { display:flex; justify-content:space-between; gap:20px; }
.price-note { margin-top:20px; padding:15px; border-radius:10px; background:var(--gold-soft); color:#69552f; font-size:13px; }

.why { padding:80px 0; }
.why h2 { margin:0 0 26px; font-size:38px; letter-spacing:-.04em; }
.why-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.why-card { border:1px solid var(--line); border-radius:14px; padding:20px; }
.why-card b { color:var(--navy); }
.why-card p { margin:7px 0 0; color:var(--muted); font-size:13px; }

.cta { padding:72px 0; background:var(--ivory); text-align:center; }
.cta h2 { margin:0; font-size:36px; letter-spacing:-.04em; }
.cta p { color:var(--muted); margin:12px auto 24px; }
.cta-actions { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }
.secondary-btn { display:inline-flex; align-items:center; min-height:48px; padding:0 21px; border:1px solid var(--navy); color:var(--navy); border-radius:9px; font-weight:850; }

footer { padding:36px 0 44px; background:#0a1728; color:rgba(255,255,255,.65); font-size:13px; }
footer strong { color:#fff; font-size:17px; }

@media (max-width: 900px) {
  .nav-links { display:none; }
  .nav { min-height:64px; }
  .brand img { width:112px; }
  .call { margin-left:auto; }
  .hero { padding:64px 0; }
  .case-card, .detail-grid, .estimate-grid { grid-template-columns:1fr; }
  .case-card-media { min-height:380px; }
  .case-card-media.case-media-story { height:520px; grid-template-rows:minmax(0,1fr) 108px; }
  .case-card-body { padding:30px; }
  .step, .step:nth-child(even) { grid-template-columns:1fr; gap:26px; }
  .step:nth-child(even) .step-media { order:0; }
  .why-grid { grid-template-columns:1fr 1fr; }
  .archive-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 560px) {
  .wrap { width:min(100% - 28px, 1160px); }
  .hero { padding:48px 0; }
  .hero h1 { font-size:38px; }
  .hero p { font-size:15px; }
  .intro, .journey, .why { padding-top:54px; }
  .section-head { align-items:start; flex-direction:column; }
  .case-card-media { min-height:260px; }
  .case-card-media.case-media-story { height:420px; min-height:0; grid-template-rows:minmax(0,1fr) 92px; }
  .case-media-strip figcaption { inset:auto 3px 3px; padding:3px 4px; font-size:9px; }
  .case-media-caption { right:9px; bottom:9px; }
  .case-card-body { padding:24px 20px; }
  .case-card-body h3 { font-size:26px; }
  .detail-hero { padding:44px 0 36px; }
  .detail-grid h1 { font-size:32px; }
  .summary-card { padding:18px; }
  .summary-row.price b { font-size:21px; }
  .journey-intro h2, .why h2, .estimate-copy h2, .cta h2 { font-size:28px; }
  .step { padding:34px 0; }
  .step h3 { font-size:24px; }
  .step-media img { aspect-ratio:4/3; }
  .media-gallery { grid-template-columns:1fr; }
  .media-gallery .wide { grid-column:auto; }
  .media-gallery img, .media-gallery .wide img { min-height:0; aspect-ratio:4/3; }
  .compare { aspect-ratio:4/3; }
  .estimate-section { padding:58px 0; }
  .estimate-total strong { font-size:35px; }
  .price-panel { padding:20px; }
  .why-grid { grid-template-columns:1fr; }
  .case-photo-archive { padding:58px 0 66px; }
  .archive-intro { margin-bottom:36px; }
  .archive-group + .archive-group { margin-top:44px; padding-top:40px; }
  .archive-group-head { grid-template-columns:42px minmax(0,1fr); gap:12px; }
  .archive-group-head > span { width:42px; height:42px; font-size:13px; }
  .archive-group-head h3 { font-size:23px; }
  .archive-grid { grid-template-columns:1fr; gap:10px; }
  .archive-grid figure.feature { grid-column:auto; grid-row:auto; }
  .archive-grid figure.feature img { aspect-ratio:4/3; }
}


/* ==========================================================================
   2026-09 헤더 통일 — 나머지 페이지와 같은 머리글
   이 페이지는 자체 CSS로 만들어져 머리글이 혼자 달랐다.
   (높이 72px / 로고 132px / 남색 버튼 → 다른 페이지는 132px · 78px · 금색)
   그래서 메뉴를 옮겨 다닐 때마다 로고 크기와 머리글 높이가 튀었다.
   style.css 의 확정판과 같은 값으로 맞춘다.
   ========================================================================== */
.site-header {
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid rgba(21, 21, 21, .08);
  box-shadow: 0 10px 30px rgba(28, 25, 19, .06);
  backdrop-filter: blur(14px);
}
.site-header .nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 32px);
  height: 132px;
  min-height: 132px;
}
.site-header .brand { flex: 0 0 auto; display: flex; align-items: center; }
.site-header .brand img {
  width: auto;
  height: 78px;
  max-height: 78px;
  object-fit: contain;
  object-position: left center;
}
.site-header .nav-links {
  flex: 0 1 auto;
  margin-left: auto;
  justify-content: flex-end;
  gap: clamp(15px, 2.1vw, 34px);
  font-size: 16px;
  font-weight: 1000;
  color: #5c554a;
  white-space: nowrap;
}
.site-header .nav-links a { color: #5c554a; }
.site-header .nav-links .active { color: #8a6d38; }
.site-header .nav-links .active::after { background: #b8965a; bottom: -10px; }
.site-header .call {
  flex: 0 0 auto;
  background: #b8965a;
  border: 1px solid #b8965a;
  color: #fff;
  padding: 11px 18px;
  border-radius: 10px;
  font-size: 15px;
}

/* 좁아지면 전화 버튼만 접는다 — 다른 페이지와 같은 지점(1080px) */
@media (max-width: 1079px) {
  .site-header .call { display: none; }
  .site-header .nav-links { font-size: 15px; }
}

/* 휴대폰 — 메뉴를 감추지 않는다.
   예전에는 900px 아래에서 메뉴가 통째로 사라져 눌러 볼 방법이 없었다.
   가로로 밀어 보는 띠로 바꿔 어느 화면에서든 메뉴가 남아 있게 한다. */
@media (max-width: 900px) {
  .site-header .nav { height: auto; min-height: 0; flex-wrap: wrap; padding: 10px 0 8px; }
  .site-header .brand { flex: 0 0 auto; }
  .site-header .brand img { height: 44px; max-height: 44px; }
  .site-header .call { display: inline-block; margin-left: auto; padding: 9px 13px; font-size: 13px; }
  .site-header .nav-links {
    display: flex;
    order: 3;
    flex: 1 0 100%;
    margin: 6px 0 0;
    justify-content: flex-start;
    gap: 16px;
    font-size: 13.5px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .site-header .nav-links::-webkit-scrollbar { display: none; }
  .site-header .nav-links .active::after { bottom: -4px; }
}

/* 머리글 안쪽 폭도 다른 페이지와 같게(1180px). 본문 폭(1160px)은 그대로 둔다.
   이 10px 차이 때문에 페이지를 옮길 때 로고가 좌우로 미세하게 움직였다. */
.site-header .wrap { width: min(1180px, calc(100% - 40px)); }


/* ==========================================================================
   2026-09 상단 배너 통일 — 다른 페이지와 같은 금속 문양·같은 크기
   이 페이지만 남색 배너라 메뉴를 옮겨 다닐 때 결이 끊겼다.
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  /* 바탕 — 금속에 조명이 비스듬히 떨어진 느낌 + 헤어라인 결 + 사선 철판 */
  background:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.030) 0 1px, rgba(255,255,255,0) 1px 3px),
    repeating-linear-gradient(115deg,
      rgba(255,255,255,.050) 0 2px,
      rgba(255,255,255,0) 2px 26px,
      rgba(0,0,0,.18) 26px 28px,
      rgba(255,255,255,0) 28px 52px),
    radial-gradient(120% 90% at 18% 6%, rgba(230,184,119,.17), rgba(230,184,119,0) 58%),
    linear-gradient(118deg, #16120d 0%, #2c2519 46%, #14110c 100%);
  background-size: 3px 100%, 104px 104px, 100% 100%, 100% 100%;
  animation: metalPlate 30s linear infinite;
}
/* 도는 문양 — 원 · 팔각 · 사각.
   화면보다 크게 잡아 돌려야 모서리에 빈 곳이 생기지 않는다. */
.hero::before {
  content: "";
  position: absolute;
  left: -55%; right: -55%; top: -55%; bottom: -55%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cg fill='none' stroke='%23e6b877' stroke-opacity='.26' stroke-width='1.5'%3E%3Ccircle cx='38' cy='38' r='21'/%3E%3Crect x='92' y='17' width='42' height='42'/%3E%3Cpolygon points='29.3,92 46.7,92 59,104.3 59,121.7 46.7,134 29.3,134 17,121.7 17,104.3'/%3E%3Ccircle cx='113' cy='113' r='14'/%3E%3Ccircle cx='75' cy='75' r='5'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 150px 150px;
  /* 돌리지 않는다 — 실제로 튀는 도형은 hero-shapes.js 가 띄운다.
     이 층은 배경 결로만 남긴다(자바스크립트가 막혀도 배너가 허전하지 않게). */
  opacity: .30;
}
/* 반대로 도는 작은 층 — 두 층이 엇갈리며 깊이가 생긴다 */
.hero::after {
  content: "";
  position: absolute;
  left: -55%; right: -55%; top: -55%; bottom: -55%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.10' stroke-width='1.1'%3E%3Ccircle cx='38' cy='38' r='21'/%3E%3Crect x='92' y='17' width='42' height='42'/%3E%3Cpolygon points='29.3,92 46.7,92 59,104.3 59,121.7 46.7,134 29.3,134 17,121.7 17,104.3'/%3E%3Ccircle cx='113' cy='113' r='14'/%3E%3Ccircle cx='75' cy='75' r='5'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 96px 96px;
  opacity: .5;
  /* 예전 ::after 는 흐릿한 빛줄기였다. 그 값들이 남아 도형을 뭉개지 않게 되돌린다. */
  width: auto; height: auto;
  filter: none;
  display: none;   /* 반대로 도는 층은 쓰지 않는다 */
}
.hero > * { position: relative; z-index: 1; }

/* 배너 높이 고정 — 다른 페이지와 눈에 보이는 크기를 같게.
   이 페이지 머리글은 자리를 차지하므로(sticky) 610 이 아니라 478 로 잡는다.
   안쪽 글 자리는 366px 로 메인 페이지와 똑같다. */
.hero {
  height: 478px;
  min-height: 0;
  max-height: 478px;
  display: flex;
  align-items: center;
  padding: 56px 0;
  box-sizing: border-box;
}
.hero > .wrap { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 0; }
.hero .eyebrow { color: #e6b877; }
.hero p { color: rgba(255,255,255,.80); }
.hero-note span { border-color: rgba(230,184,119,.34); background: rgba(230,184,119,.10); }

@keyframes metalPlate {
  from { background-position: 0 0,      0 0,     0 0, 0 0; }
  to   { background-position: 0 0,  104px 104px, 0 0, 0 0; }
}
@keyframes shapeSpin      { from { transform: rotate(0deg);   } to { transform: rotate(360deg);  } }
@keyframes shapeSpinBack  { from { transform: rotate(360deg); } to { transform: rotate(0deg);    } }

@media (max-width: 900px) {
  .hero { height: 330px; max-height: 330px; padding: 33px 0; }
  .hero > .wrap { padding: 0; }
  .hero::before { background-size: 108px 108px; }
  .hero::after  { background-size: 72px 72px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero, .hero::before, .hero::after { animation: none; }
}


/* ==========================================================================
   2026-09 견적사례 목록 — 바둑판식 배열
   가로형 카드(사진 좌 · 글 우)가 한 줄에 하나씩 길게 쌓여 있었다.
   PC 3열 · 태블릿 2열 · 휴대폰 1열로, 카드는 사진 위 · 글 아래.
   사진 높이를 고정하고 제목·설명 줄 수를 묶어 한 줄의 카드 높이를 맞춘다.
   ========================================================================== */
.case-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.case-card {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
}
.case-card-media.case-media-story {
  height: 320px;
  grid-template-rows: minmax(0, 1fr) 68px;
  gap: 3px;
  padding: 3px;
}
.case-media-strip { gap: 3px; }
.case-media-strip figcaption { inset: auto 3px 3px; padding: 2px 4px; font-size: 9px; }
.case-media-caption { right: 9px; bottom: 9px; padding: 4px 8px; font-size: 10px; }
.badge { top: 10px; left: 10px; padding: 5px 9px; font-size: 10.5px; }

.case-card-body {
  flex: 1 1 auto;
  justify-content: flex-start;
  padding: 20px 20px 22px;
}
.case-card-body .type {
  font-size: 11.5px;
  line-height: 1.45;
}
.case-card-body h3 {
  margin: 8px 0 8px;
  font-size: 19px;
  line-height: 1.35;
  letter-spacing: -.03em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.case-card-body p {
  font-size: 13.5px;
  line-height: 1.65;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.case-card-body .specs { margin: 16px 0 16px; }
.case-card-body .specs div { padding: 10px 12px; }
.case-card-body .specs strong { font-size: 13.5px; line-height: 1.4; }
.case-card-body .primary-btn {
  margin-top: auto;              /* 버튼을 카드 맨 아래로 — 한 줄의 버튼 높이가 맞는다 */
  width: 100%;
  min-height: 44px;
  font-size: 14px;
}

/* 태블릿 — 2열 */
@media (max-width: 1099px) {
  .case-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}

/* 휴대폰 — 1열 */
@media (max-width: 640px) {
  .case-list { grid-template-columns: 1fr; gap: 16px; }
  .case-card-media.case-media-story { height: 300px; grid-template-rows: minmax(0, 1fr) 64px; }
  .case-card-body { padding: 18px 16px 20px; }
  .case-card-body h3 { font-size: 20px; }
}