/* 해솔담이앤씨 — 표준 견본. kit.css 의 기본 토큰이 곧 이 사이트의 얼굴이라 여기는 글꼴과 이 사이트 전용 부품만 둔다.
   Paperlogy(페이퍼로지) — SIL OFL 1.1 · 상업 사용·수정·재배포 가능(단독 판매 금지). 배포: 눈누 jsDelivr. */
@font-face { font-family: 'Paperlogy'; font-weight: 300; font-display: swap; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-3Light.woff2') format('woff2'); }
@font-face { font-family: 'Paperlogy'; font-weight: 400; font-display: swap; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2') format('woff2'); }
@font-face { font-family: 'Paperlogy'; font-weight: 500; font-display: swap; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-5Medium.woff2') format('woff2'); }
@font-face { font-family: 'Paperlogy'; font-weight: 600; font-display: swap; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-6SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Paperlogy'; font-weight: 700; font-display: swap; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2') format('woff2'); }
@font-face { font-family: 'Paperlogy'; font-weight: 800; font-display: swap; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-8ExtraBold.woff2') format('woff2'); }

:root {
  /* 사진 위 eyebrow — 밝은 사진(흰 사무실·하늘)에서도 AA 가 나오게 밝힌 살구색 + 아래 막을 왼쪽에서 짙게 */
  --c-accent-on-dark: #f5c4a1;
  --overlay-sv: linear-gradient(90deg, rgba(10, 10, 12, 0.7) 0%, rgba(10, 10, 12, 0.52) 50%, rgba(10, 10, 12, 0.3) 100%),
    linear-gradient(180deg, rgba(10, 10, 12, 0.25) 0%, rgba(10, 10, 12, 0) 45%, rgba(10, 10, 12, 0.35) 100%);
}

/* 첫 화면 — 차가운 건축 사진을 남색 막으로 눌러 제목을 세운다 */
.hero__media img { object-position: 60% 40%; }
/* 하위 지면 첫 화면 — 밝은 사진은 조금 눌러 둔다(글자 대비) */
.sv__media img { filter: brightness(0.84) saturate(0.9); }
.sv .eyebrow { text-shadow: 0 1px 14px rgba(0, 0, 0, 0.35); }

/* 사업 분야 전환 — 영문 단어가 사진 위로 넉넉히 겹치게(사진 약 78% 폭 · 단어는 오른쪽 끝에 맞춘다).
   키트 기본(1.25fr:1fr)에선 긴 단어 첫 글자만 사진 가장자리에 걸려 실수처럼 보였다.
   🔴 사진 위에 걸린 부분은 글자색을 사진 경계에서 갈라 칠한다(사진 위 = 흰색 · 바탕 위 = 키트 색).
      회색 #909090 을 그대로 두면 나무·하늘·건물 위에서 대비 1.4~2.4:1 로 단어가 묻혔다(2026-09-22 실측).
      ⚠️ mix-blend-mode: multiply 로 풀지 말 것 — 글자가 짙은 사진 속으로 사라진다(kit.css 주석).
   · 경계 = 사진 오른쪽 끝 = 전환기 폭의 3.6/4.6 지점. 글자 칸은 전환기 오른쪽 끝에 붙어 있으므로
     단어 상자 안에서는 `100% - 100cqw / 4.6` 이다(전환기를 container 로 둔다 · 칸 사이 gap 0 이 전제).
   · 첫 단어는 사진 위 칸에 통째로 올린다(사진 윗단 = 한 줄 높이) — 세로 경계까지 가르지 않기 위해서다.
   · 사진 오른쪽에 막을 깔아 흰 글자를 받친다(가장 밝은 픽셀에서도 3:1 이상 — 막이 58%에 닿는 74% 지점 뒤로만 글자가 얹힌다.
     861~1440 실측: 둘째~넷째 단어는 사진 폭의 76% 지점부터 걸린다). 단어가 길어지면 이 두 값을 다시 잴 것. */
@property --sw-photo { syntax: '<color>'; inherits: false; initial-value: rgba(255, 255, 255, 0.74); }
@property --sw-page { syntax: '<color>'; inherits: false; initial-value: #909090; }
@media (min-width: 861px) {
  .switcher { container-type: inline-size; grid-template-columns: minmax(0, 3.6fr) minmax(0, 1fr); align-items: start; }
  .switcher__media { aspect-ratio: 21 / 10; margin-top: calc(var(--fs-latin-xl) * 1.04); }
  .switcher__media::after {
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(90deg, rgba(14, 12, 16, 0) 58%, rgba(14, 12, 16, 0.4) 68%, rgba(14, 12, 16, 0.58) 74%, rgba(14, 12, 16, 0.62) 100%);
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(var(--fs-latin-xl) * 3.3), transparent calc(var(--fs-latin-xl) * 3.3 + 7rem));
    mask-image: linear-gradient(180deg, #000 0, #000 calc(var(--fs-latin-xl) * 3.3), transparent calc(var(--fs-latin-xl) * 3.3 + 7rem));
  }
  /* flex 로 세운다 — 아래 단어의 위아래 여백(글자 꼬리 자리)이 서로 겹쳐 접히지 않게(블록이면 음수 여백이 접혀 줄 간격이 바뀐다) */
  .switcher__words { align-self: start; display: flex; flex-direction: column; }
  .switcher__word + .switcher__word {
    padding-block: 0.2em; margin-block: -0.2em; /* background-clip:text 는 상자 밖 글자를 안 칠한다 — g 꼬리가 잘렸다 */
    --sw-photo: rgba(255, 255, 255, 0.74); --sw-page: #909090;
    color: transparent; -webkit-background-clip: text; background-clip: text;
    background-image: linear-gradient(90deg, var(--sw-photo) calc(100% - 100cqw / 4.6), var(--sw-page) calc(100% - 100cqw / 4.6));
    transition: --sw-photo 0.5s var(--ease), --sw-page 0.5s var(--ease);
  }
  .switcher__word + .switcher__word.is-on { --sw-photo: #fff; --sw-page: var(--c-deep); }
}
@media (min-width: 861px) and (forced-colors: active) {
  .switcher__word + .switcher__word { color: CanvasText; background: none; }
  .switcher__media::after { display: none; }
}
.fields__head .split__title { margin-top: 1rem; }
.fields__desc { display: grid; gap: 1.25rem; }
.fields__desc p { color: var(--c-body); }

/* 소식 미리보기 — 목록이 사진 없이도 서도록 굵기 대비로 */
.news-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.news-head .sec-head { margin-bottom: 0; }

/* 전폭 띠 — 밝게 켜진 창이 글 뒤로 지나가서 왼쪽 막을 조금 더 짙게 */
/* 세로 화면용 크롭을 <picture> 로 받는다 — picture 가 인라인이면 img 의 height:100% 가 풀린다 */
.band__media picture { display: block; height: 100%; }
.band::before { background: linear-gradient(90deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.5) 45%, rgba(0, 0, 0, 0.15) 100%); }
.band__lead { max-width: 30em; }

/* 전폭 띠의 주거 브랜드 — 한글 브랜드명 + 작은 영문 표기 */
.band__brand { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 0.25rem 1rem; }
.band__brand small { font-family: var(--f-latin); font-size: var(--fs-sm); font-weight: 500; letter-spacing: 0.24em; color: var(--c-on-dark-2); }

/* 사업 지면 두 칸의 설명 */
.split__desc { margin-top: 1.5rem; max-width: 30em; font-size: var(--fs-lead); color: var(--c-body); }

/* 사진 + 글 두 칸 */
.feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.feature--rev .feature__media { order: 2; }
.feature__media { margin: 0; aspect-ratio: 5 / 6; overflow: hidden; background: var(--c-line); }
.feature__media img { width: 100%; height: 100%; object-fit: cover; }
.feature__text .eyebrow { margin-bottom: 1.25rem; }
.feature__title { font-family: var(--f-display); font-size: clamp(1.875rem, 1.2rem + 1.9vw, 2.75rem); font-weight: var(--w-display); line-height: 1.22; margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }
.feature__p { font-size: var(--fs-lead); line-height: 1.9; color: var(--c-body); }
.feature__p + .feature__p { margin-top: 1rem; }
.feature__list { margin-top: 0.5rem; border-top: 1px solid var(--c-line-strong); }
.feature__list > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; padding: 1.125rem 0; border-bottom: 1px solid var(--c-line); }
.feature__list dt { font-weight: 700; color: var(--c-ink); }
.feature__list dd { color: var(--c-body); }
@media (max-width: 860px) {
  .feature { grid-template-columns: minmax(0, 1fr); }
  .feature__media { aspect-ratio: 4 / 3; }
  .feature--rev .feature__media { order: 0; }
  /* 바로 위가 전폭 사진 띠인 자리 — 사진을 글 뒤로 보내 사진 두 장이 붙지 않고 글이 두 사진 사이에 놓이게 한다 */
  .feature--media-last .feature__media, .feature--rev.feature--media-last .feature__media { order: 2; }
}

/* 전폭 사진 띠 */
.pband { position: relative; margin: 0; height: clamp(17.5rem, 42vw, 36rem); overflow: hidden; background: var(--c-dark); }
.pband img { width: 100%; height: 100%; object-fit: cover; }
/* 캡션 아래 막 — 글자 줄 높이에서 0.7 에 닿게. 0.62 로 끝나던 때 채용 절차 띠(밝은 하늘·콘크리트)에서
   글자 상자 안 배경 중앙값 대비 3.8:1 이었다(작은 글자 AA 4.5 미달 · 2026-09-22 실측). 0.7 로 올린 뒤 같은 방식으로 재면 가장 밝은 10% 도 4.5 이상. */
.pband__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 5rem 0 clamp(1.25rem, 3vw, 2.25rem); background: linear-gradient(180deg, rgba(8, 8, 10, 0) 0%, rgba(8, 8, 10, 0.4) 45%, rgba(8, 8, 10, 0.7) 78%, rgba(8, 8, 10, 0.74) 100%); color: #fff; font-size: var(--fs-sm); font-weight: 600; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); }
.pband__cap .wrap { display: block; }

/* 프로젝트 사진 모음 — 큰 사진 하나 + 작은 사진 둘 */
.mosaic { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: clamp(0.75rem, 1.4vw, 1.25rem); height: clamp(26rem, 44vw, 40rem); }
.mosaic__item { position: relative; margin: 0; overflow: hidden; background: var(--c-panel); }
.mosaic__item--lead { grid-row: 1 / 3; }
.mosaic__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.mosaic__item:hover img { transform: scale(1.04); }
.mosaic figcaption { position: absolute; left: 0; bottom: 0; width: 100%; padding: 2.5rem 1.25rem 1rem; color: #fff; font-weight: 700; font-size: var(--fs-sm); background: linear-gradient(transparent, rgba(0, 0, 0, 0.55)); }
@media (max-width: 640px) {
  .mosaic { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; height: auto; }
  .mosaic__item { aspect-ratio: 4 / 3; }
  .mosaic__item--lead { grid-row: auto; }
}

/* 사진 카드 */
.vcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 1.8vw, 1.5rem); }
.vcard__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-line); }
.vcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.vcard:hover .vcard__media img { transform: scale(1.04); }
.vcard__kicker { margin-top: 1.25rem; font-family: var(--f-latin); font-size: var(--fs-sm); font-weight: 700; color: var(--c-accent); }
.vcard__media + .vcard__title { margin-top: 1.25rem; }
.vcard__kicker + .vcard__title { margin-top: 0.25rem; }
.vcard__title { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.02em; }
.vcard__desc { margin-top: 0.5rem; font-size: var(--fs-sm); color: var(--c-mute); }
@media (max-width: 760px) { .vcards { grid-template-columns: minmax(0, 1fr); } }

/* 연혁 — 항목 제목을 표준 크기(1440 에서 약 32px/800)로, 오른쪽에 그해의 사진 */
.timeline__main { font-size: clamp(1.375rem, 1rem + 1.1vw, 2rem); line-height: 1.3; }
.timeline--img .timeline__row { grid-template-columns: minmax(7rem, 13rem) minmax(0, 1fr) clamp(9rem, 20vw, 16rem); }
.timeline__thumb { aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-panel); }
.timeline__thumb img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 640px) {
  .timeline--img .timeline__row { grid-template-columns: minmax(0, 1fr); }
  .timeline__thumb { aspect-ratio: 16 / 9; margin-top: 0.5rem; }
}

/* 뉴스 목록 — 맨 위 기사는 크게, 나머지는 줄 + 작은 사진 */
.lead-news { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; margin-bottom: clamp(3rem, 6vw, 5rem); }
.lead-news__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--c-panel); }
.lead-news__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.lead-news:hover .lead-news__media img { transform: scale(1.04); }
.lead-news__meta { display: flex; gap: 1rem; font-size: var(--fs-sm); color: var(--c-mute); margin-bottom: 1rem; }
.lead-news__meta b { color: var(--c-accent); font-family: var(--f-latin); }
.lead-news__title { font-size: var(--fs-h3); font-weight: 800; line-height: 1.35; }
.lead-news__sum { margin: 1rem 0 1.75rem; color: var(--c-body); }
.board--thumbs .board__row { grid-template-columns: 9rem minmax(0, 1fr) clamp(8rem, 14vw, 12rem); }
.board__thumb { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--c-panel); }
.board__thumb img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) {
  .lead-news { grid-template-columns: minmax(0, 1fr); }
  .board--thumbs .board__row { grid-template-columns: minmax(0, 1fr) 6.5rem; gap: 0.5rem 1rem; }
  .board--thumbs .board__date { grid-column: 1 / -1; }
}

/* 기사 아래 다른 소식 — 제목이 길어 카드 사진을 가로로 */
.pcards--wide .pcard__media { aspect-ratio: 3 / 2; }
.pcards--wide .pcard__title { line-height: 1.4; }

/* 약도 — 직접 그린 SVG. slice 로 채우므로 좁은 화면에서도 핀이 가운데 남는다 */
.map { position: relative; margin: 0; width: 100%; aspect-ratio: 1200 / 560; min-height: 22rem; overflow: hidden; background: #efebe5; border: 1px solid var(--c-line); }
.map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map__note { margin-top: 0.75rem; font-size: var(--fs-xs); color: var(--c-mute); }
.loc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(2.5rem, 6vw, 6rem); margin-top: clamp(3rem, 6vw, 5rem); }
.loc .eyebrow { margin-bottom: 1.25rem; }
.loc__dl { margin-top: 2rem; border-top: 1px solid var(--c-line-strong); }
.loc__dl > div { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--c-line); }
.loc__dl dt { font-weight: 700; color: var(--c-ink); }
.loc__dl dd { color: var(--c-body); }
.route { border-top: 1px solid var(--c-ink); counter-reset: none; }
.route__step { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 1.25rem; padding: clamp(1.5rem, 2.5vw, 2rem) 0; border-bottom: 1px solid var(--c-line); }
.route__step .ico { color: var(--c-deep); margin-top: 0.25rem; }
.route__no { font-family: var(--f-latin); font-size: var(--fs-sm); font-weight: 700; color: var(--c-accent); }
.route__title { margin-top: 0.25rem; font-size: var(--fs-h3); font-weight: 700; color: var(--c-ink); letter-spacing: -0.02em; line-height: 1.35; }
.route__desc { margin-top: 0.375rem; color: var(--c-mute); font-size: var(--fs-sm); }
@media (max-width: 860px) { .loc { grid-template-columns: minmax(0, 1fr); } }

/* 수상 목록 — 기록마다 그 일을 떠올리게 하는 사진을 위에 얹는다.
   글자 카드 여섯 장만 있던 때 390 에서 사진 없는 구간이 2,061px(약 2.5화면)이었다(2026-09-22 실측). */
.awards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.75rem, 1.4vw, 1.25rem); }
.award { display: flex; flex-direction: column; border: 1px solid var(--c-line); background: var(--c-bg); }
.award__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--c-panel); }
.award__media img { width: 100%; height: 100%; object-fit: cover; }
.award__body { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 2.25rem; padding: 1.75rem 2rem 2rem; }
.award__year { font-family: var(--f-latin); font-weight: var(--w-latin); font-size: 2.75rem; line-height: 1; color: var(--c-deep); }
.award__title { font-size: var(--fs-h4); font-weight: 700; color: var(--c-ink); }
.award__org { margin-top: 0.375rem; font-size: var(--fs-sm); color: var(--c-mute); }
@media (max-width: 960px) { .awards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .awards { grid-template-columns: minmax(0, 1fr); } .award__body { gap: 1.25rem; padding: 1.5rem 1.5rem 1.75rem; } }

/* 미션 문장 */
.mission { font-family: var(--f-display); font-size: clamp(1.625rem, 1.1rem + 2vw, 2.75rem); font-weight: 300; line-height: 1.5; letter-spacing: -0.02em; color: var(--c-ink); text-align: center; max-width: 24em; margin-inline: auto; }
.mission b { font-weight: 800; color: var(--c-deep); }