/* offerhouse — 사이트 전용 스타일. 색상·그림자 토큰은 tokens.css 에 있습니다. */
:root {
  --color-bg: #f9f7f2;
  --font-heading: "Pretendard Variable", Pretendard, sans-serif;
  --font-body: "Pretendard Variable", Pretendard, sans-serif;
  --font-heading-weight: 800;
  --gutter: clamp(20px, 4vw, 48px);
  --wash: saturate(0.6) contrast(0.85) brightness(1.1);
  --header-h: 78px;
}
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); word-break: keep-all; }
button, input, textarea { font-family: inherit; }
a { color: var(--color-accent-700); }
a:hover { color: var(--color-accent); }
[hidden] { display: none !important; }
body.no-wash { --wash: none; }
.wash { filter: var(--wash); }

@keyframes ohZoom { from { transform: scale(1); } to { transform: scale(1.12); } }

.wrap { max-width: 1440px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.kicker { font-size: 13px; letter-spacing: 0.12em; color: var(--color-accent-700); font-weight: 600; }
.h2 { margin: 0; font-weight: 800; font-size: clamp(32px, 4vw, 52px); line-height: 1.2; text-wrap: pretty; }

/* — header — */
.site-header { position: sticky; top: 0; z-index: 20; height: var(--header-h); box-sizing: border-box; }
.site-nav { display: flex; align-items: center; gap: 28px; padding-top: 18px; padding-bottom: 18px; }
.brand { font-size: 26px; color: var(--color-text); text-decoration: none; margin-right: auto; letter-spacing: -0.01em; }
.brand:hover { color: var(--color-text); }
.logo-img { display: block; height: var(--logo-h, 32px); width: auto; max-width: 220px; object-fit: contain; }
.footer-brand .logo-img { height: calc(var(--logo-h, 32px) * 1.15); }
@media (max-width: 560px) { .brand .logo-img { height: calc(var(--logo-h, 32px) * 0.85); max-width: 160px; } }
.nav-links { display: flex; gap: 26px; font-size: 15px; flex-wrap: wrap; }
.nav-links a { color: var(--color-text); text-decoration: none; }
.nav-links a:hover { color: var(--color-accent); }
.nav-links a[aria-current="page"] { color: var(--color-accent-700); font-weight: 700; }
.nav-cta { display: inline-flex; align-items: center; white-space: nowrap; flex: none; padding: 11px 22px; border-radius: 999px; background: var(--color-accent); color: var(--color-bg); text-decoration: none; font-size: 14px; font-weight: 600; }
.nav-cta:hover { background: var(--color-accent-600); color: var(--color-bg); }
@media (max-width: 560px) {
  .site-nav { gap: 14px; }
  .brand { font-size: 21px; }
  .nav-links { gap: 14px; font-size: 14px; }
  .nav-cta { padding: 9px 16px; font-size: 13px; }
}
@media (max-width: 420px) {
  :root { --header-h: 100px; }
  .site-nav { flex-wrap: wrap; row-gap: 8px; padding-top: 14px; padding-bottom: 14px; }
  .nav-links { order: 3; width: 100%; gap: 20px; }
}

/* — hero — */
.hero { margin-top: calc(-1 * var(--header-h)); position: relative; width: 100%; height: 100vh; min-height: 480px; overflow: hidden; background: var(--color-neutral-800); }
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s ease; z-index: 0; }
.slide.on { opacity: 1; z-index: 2; }
.slide.was { z-index: 1; }
.slide-media { position: absolute; inset: 0; }
.slide-media > div, .slide-media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background-size: cover; background-position: center; filter: var(--wash); }

/* — about — */
.about { padding-top: clamp(80px, 12vw, 160px); padding-bottom: clamp(80px, 12vw, 160px); }
.about-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(40px, 6vw, 96px); align-items: center; }
.about-copy { display: flex; flex-direction: column; gap: 24px; max-width: 560px; }
.about-copy > p { margin: 0; font-size: 17px; line-height: 1.85; color: var(--color-neutral-800); }
.points { margin-top: 12px; }
.point { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 20px 0; border-top: 1px solid var(--color-divider); }
.point:last-child { border-bottom: 1px solid var(--color-divider); }
.point-no { font-size: 20px; color: var(--color-accent); }
.point-title { font-weight: 700; font-size: 17px; margin-bottom: 4px; }
.point-body { color: var(--color-neutral-700); font-size: 15px; }
.about-visual { position: relative; aspect-ratio: 4/5; max-height: 720px; width: 100%; }
.arch { position: absolute; inset: 0; border-radius: 999px 999px 40px 40px; overflow: hidden; background: var(--color-surface); }
.arch img, .card-img img, .detail-hero img, .gallery-item img { width: 100%; height: 100%; object-fit: cover; filter: var(--wash); }
.badge { position: absolute; left: -28px; bottom: 48px; width: 132px; height: 132px; border-radius: 50%; background: var(--color-accent-2); color: #f9f4ed; display: grid; place-items: center; text-align: center; font-weight: 800; font-size: 16px; line-height: 1.35; box-shadow: var(--shadow-md); }
@media (max-width: 560px) { .badge { left: 12px; bottom: 24px; width: 108px; height: 108px; font-size: 14px; } }

/* — portfolio — */
.portfolio { padding-top: clamp(56px, 8vw, 112px); padding-bottom: clamp(80px, 12vw, 160px); }
.portfolio-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 40px; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; }
.pill { padding: 10px 20px; border-radius: 999px; border: 1px solid var(--color-divider); background: transparent; color: var(--color-text); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.pill.active { background: var(--color-text); color: var(--color-bg); border-color: var(--color-text); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 40px 28px; }
.card { display: flex; flex-direction: column; gap: 16px; color: var(--color-text); text-decoration: none; transition: transform .35s ease; }
.card:hover { transform: translateY(-6px); color: var(--color-text); }
.card-img { aspect-ratio: 4/3; border-radius: 28px; overflow: hidden; background: var(--color-surface); }
.card-info { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 0 4px; }
.card-text { display: flex; flex-direction: column; gap: 6px; }
.card-name { font-weight: 800; font-size: 21px; line-height: 1.3; }
.card-meta { font-size: 14px; color: var(--color-neutral-700); }
.tag { flex: none; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--color-accent-100); color: var(--color-accent-800); }
.tag.c-commercial { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag.c-remodel { background: var(--color-neutral-200); color: var(--color-neutral-800); }

/* — service — */
.service { min-height: calc(100vh - var(--header-h)); padding-top: clamp(80px, 10vw, 140px); padding-bottom: clamp(80px, 10vw, 140px); }
.service-head { display: flex; flex-direction: column; gap: 16px; margin-bottom: 56px; max-width: 640px; }
.services { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 24px; }
.svc { display: flex; flex-direction: column; gap: 18px; padding: 36px; border-radius: 36px; background: #fff; box-shadow: var(--shadow-sm); }
.svc-no { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; }
.svc h3 { margin: 0; font-weight: 800; font-size: 26px; }
.svc p { margin: 0; font-size: 16px; line-height: 1.75; color: var(--color-neutral-800); }
.svc-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: 8px; }
.svc-tags span { padding: 4px 12px; border-radius: 999px; font-size: 12px; }
.svc.t1 .svc-no { background: var(--color-accent-200); color: var(--color-accent-800); }
.svc.t1 .svc-tags span { background: var(--color-accent-100); color: var(--color-accent-800); }
.svc.t2 .svc-no { background: var(--color-accent-2-200); color: var(--color-accent-2-800); }
.svc.t2 .svc-tags span { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.svc.t3 .svc-no { background: var(--color-neutral-300); color: var(--color-neutral-900); }
.svc.t3 .svc-tags span { background: var(--color-neutral-100); color: var(--color-neutral-800); }

/* — contact — */
.contact { margin-top: calc(-1 * var(--header-h)); height: 100vh; }
.contact iframe { display: block; width: 100%; height: 100%; border: 0; background: var(--color-bg); }

/* — detail — */
.detail { padding-top: 24px; padding-bottom: clamp(80px, 10vw, 140px); }
.back { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--color-divider); background: transparent; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; color: var(--color-text); margin-bottom: 40px; text-decoration: none; }
.back:hover { background: var(--color-neutral-200); color: var(--color-text); }
.detail-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 32px 64px; align-items: end; margin-bottom: 48px; }
.detail-title { display: flex; flex-direction: column; gap: 18px; }
.detail-title .tag { align-self: flex-start; padding: 5px 14px; font-size: 13px; }
.detail-title h1 { margin: 0; font-weight: 800; font-size: clamp(36px, 5vw, 68px); line-height: 1.15; text-wrap: pretty; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 32px; font-size: 15px; }
.facts div { display: flex; flex-direction: column; gap: 4px; }
.facts dt { color: var(--color-neutral-600); font-size: 13px; }
.facts dd { margin: 0; font-weight: 600; }
.detail-hero { aspect-ratio: 16/8; border-radius: 40px; overflow: hidden; background: var(--color-surface); margin-bottom: clamp(48px, 7vw, 96px); }
@media (max-width: 560px) { .detail-hero { aspect-ratio: 4/3; border-radius: 28px; } }
.detail-story { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 32px 64px; margin-bottom: clamp(48px, 7vw, 96px); }
.detail-story h2 { margin: 0; font-weight: 800; font-size: clamp(26px, 3vw, 38px); line-height: 1.3; text-wrap: pretty; }
.detail-story p { margin: 0; font-size: 17px; line-height: 1.9; color: var(--color-neutral-800); max-width: 620px; white-space: pre-line; }
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 24px; }
.gallery-item { aspect-ratio: 4/5; border-radius: 32px; overflow: hidden; background: var(--color-surface); }
.next { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: clamp(56px, 8vw, 112px); padding: 32px 40px; border-radius: 999px; background: var(--color-surface); color: var(--color-text); text-decoration: none; }
.next:hover { background: var(--color-accent-200); color: var(--color-text); }
.next-text { display: flex; flex-direction: column; gap: 4px; }
.next-label { font-size: 13px; color: var(--color-neutral-700); }
.next-name { font-weight: 800; font-size: clamp(20px, 2.4vw, 30px); }
.next-arrow { width: 56px; height: 56px; flex: none; border-radius: 50%; background: var(--color-accent); color: #f9f4ed; display: grid; place-items: center; font-size: 22px; }
@media (max-width: 560px) { .next { padding: 22px 24px; } .next-arrow { width: 44px; height: 44px; } }

/* — footer — */
.site-footer { background: var(--color-neutral-900); color: var(--color-neutral-300); }
.footer-inner { padding-top: 56px; padding-bottom: 56px; display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; align-items: flex-end; }
.footer-brand { display: flex; flex-direction: column; gap: 12px; }
.footer-brand b { font-weight: 400; font-size: 30px; color: #f9f4ed; }
.footer-brand span { font-size: 14px; }
.footer-legal { font-size: 13px; line-height: 1.8; color: var(--color-neutral-400); }