/* ============================================================
   and&end — 서브 페이지 & 공통 추가 스타일
   (styles.css 뒤에 로드됩니다. 디자인 토큰은 styles.css :root 사용)
   ============================================================ */

/* 골드 앰퍼샌드 (콘텐츠 `&&` 토큰) — 본문 크기 글자라 대비가 높은 금색 */
.amp {
  color: var(--gold-text);
  font-family: var(--serif);
  font-style: italic;
  padding: 0 0.06em;
}

/* 스크롤 등장 */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 1s var(--ease),
    transform 1s var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   Header 추가 — 언어 전환 + 모바일 메뉴
   ============================================================ */
.header__right {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 28px);
}

.header__lang {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  border: 1px solid currentColor;
  padding: 6px 12px;
  border-radius: 999px;
  opacity: 0.95;
  transition:
    opacity 0.3s var(--ease),
    background 0.3s var(--ease),
    color 0.3s var(--ease);
}
.header__lang:hover {
  opacity: 1;
}
.header--solid .header__lang:hover {
  background: var(--ink);
  color: var(--paper);
}

/* 모바일 오버레이 메뉴 */
.navmenu {
  position: fixed;
  inset: 0;
  z-index: 60;
  /* 반투명 다크 글라스 — 뒤 콘텐츠가 은은하게 비침 (흰 글자 가독성 위해 다크 틴트 유지) */
  background: rgba(21, 19, 15, 0.72);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.4s var(--ease),
    visibility 0.4s var(--ease);
}
.navmenu.is-open {
  opacity: 1;
  visibility: visible;
}
.navmenu__close {
  position: absolute;
  top: 22px;
  right: clamp(20px, 5vw, 40px);
  background: none;
  border: none;
  color: #fff;
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
}
.navmenu__links {
  display: flex;
  flex-direction: column;
  gap: 22px;
  text-align: center;
}
.navmenu__link {
  font-family: var(--serif);
  font-size: clamp(30px, 8vw, 48px);
  color: #fff;
}
.navmenu__lang {
  margin-top: 20px;
  font-family: var(--sans);
  font-size: 15px;
  letter-spacing: 0.18em;
  color: #cfae67; /* 메뉴 유리는 밝은 페이지에서도 어두우므로 토큰 대신 값 */
}
body.nav-open {
  overflow: hidden;
}
/* ============================================================
   Story 공통 (제작과정 / 솔루션 / 문의 상단)
   ============================================================ */
.story__hero {
  position: relative;
  height: 78svh;
  min-height: 480px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: #fff;
}
.story__hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.story__hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 64px) clamp(56px, 9vh, 100px);
}
.story__eyebrow {
  font-size: 13px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.story__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(38px, 6.4vw, 90px);
  line-height: 1;
  margin: 14px 0 16px;
}
.story__subtitle {
  font-size: clamp(15px, 1.6vw, 20px);
  font-weight: 300;
  max-width: 40ch;
}

.story__intro {
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(72px, 14vh, 160px) clamp(20px, 5vw, 64px);
  text-align: center;
}
.story__intro p {
  font-family: var(--serif);
  font-size: clamp(24px, 3.4vw, 44px);
  line-height: 1.35;
  color: var(--ink);
}

/* 에디토리얼 이미지+텍스트 교차 블록 */
.editorial {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: clamp(32px, 5vw, 88px);
  max-width: 1440px;
  margin: 0 auto clamp(72px, 12vh, 140px);
  padding: 0 clamp(20px, 5vw, 64px);
}
.editorial--reversed .editorial__media {
  order: 2;
}
.editorial__media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--sand);
}
.editorial__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.editorial:hover .editorial__media img {
  transform: scale(1.05);
}
.editorial__eyebrow {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.editorial__heading {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(22px, 2.9vw, 42px);
  line-height: 1.08;
  margin: 14px 0 20px;
}
.editorial__text {
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: 300;
  color: var(--ink-soft);
  max-width: 42ch;
}

/* 단계 (numbered process) */
.steps {
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(40px, 6vh, 80px) clamp(20px, 5vw, 64px) clamp(60px, 10vh, 120px);
  border-top: 1px solid var(--line);
}
.steps__eyebrow {
  font-size: 13px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.steps__heading {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(26px, 4vw, 51px);
  line-height: 1.05;
  margin: 14px 0 clamp(40px, 6vh, 72px);
}
.steps__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 3vw, 48px);
  counter-reset: none;
}
.step {
  border-top: 1px solid var(--line-strong);
  padding-top: 20px;
}
.step__no {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--gold-text);
}
.step__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(16px, 1.5vw, 21px);
  margin: 12px 0 10px;
}
.step__body {
  font-size: 15px;
  font-weight: 300;
  color: var(--ink-soft);
}

/* 스크롤 타임라인 (main.js 15) — 스크롤에 따라 각 단계의 윗선이 금색으로 채워지고 단계가 밝아진다.
   JS 가 없거나 움직임 줄이기 설정이면 .steps--live 가 붙지 않아 원래 모습(검은 선) 그대로다. */
.steps--live .step {
  position: relative;
  border-top-color: var(--line);
  opacity: 0.38;
  transition: opacity 0.6s var(--ease);
}
.steps--live .step.is-active {
  opacity: 1;
}
.steps--live .step::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--gold);
  transform: scaleX(var(--fill, 0));
  transform-origin: left center;
}
.steps--live .step::after {
  content: '';
  position: absolute;
  top: -4px;
  left: calc(var(--fill, 0) * 100%);
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(161, 135, 78, 0.18);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.steps--live .step.is-current::after {
  opacity: 1;
}

/* 풀 인용문 */
.pullquote {
  max-width: 1000px;
  margin: 0 auto;
  padding: clamp(72px, 14vh, 160px) clamp(20px, 5vw, 64px);
  text-align: center;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(26px, 3.8vw, 52px);
  line-height: 1.3;
  color: var(--ink);
  quotes: '“' '”';
}
.pullquote::before {
  content: open-quote;
  color: var(--gold);
}
.pullquote::after {
  content: close-quote;
  color: var(--gold);
}

/* CTA 밴드 — 푸터처럼 늘 어둡다 */
.cta-band {
  background: #100e0b;
  color: #f3efe8;
  border-top: 1px solid rgba(243, 239, 232, 0.1);
  text-align: center;
  padding: clamp(88px, 16vh, 180px) clamp(20px, 5vw, 64px);
}
.cta-band__eyebrow {
  font-size: 13px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #bcb4a8;
}
.cta-band__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(26px, 4.4vw, 58px);
  line-height: 1.05;
  margin: 18px 0 40px;
}
.cta-band__btn {
  display: inline-block;
  padding: 16px 44px;
  border: 1px solid rgba(243, 239, 232, 0.7);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition:
    background 0.4s var(--ease),
    color 0.4s var(--ease);
}
.cta-band__btn:hover {
  background: #f3efe8;
  color: #15130f;
}

/* ============================================================
   Solutions
   ============================================================ */
.solutions {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 64px) clamp(40px, 8vh, 100px);
}
.solution {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: clamp(20px, 4vw, 64px);
  padding: clamp(36px, 5vh, 56px) 0;
  border-top: 1px solid var(--line);
}
.solution:last-child {
  border-bottom: 1px solid var(--line);
}
/* 이미지가 있는 카드 — 오른쪽에 분야 이미지, 마우스를 올리면 이미지가 밝아지며 다가온다 */
.solution--media {
  grid-template-columns: 120px 1fr minmax(220px, 360px);
  align-items: start;
}
.solution__media {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--sand);
}
.solution__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.86) saturate(0.9);
  transform: scale(1.02);
  transition:
    transform 1.2s var(--ease),
    filter 0.6s var(--ease);
}
.solution:hover .solution__media img {
  filter: none;
  transform: scale(1.08);
}
.solution__tags li {
  transition:
    color 0.4s var(--ease),
    border-color 0.4s var(--ease);
}
.solution:hover .solution__tags li {
  color: var(--ink);
  border-color: var(--gold);
}
.solution__no {
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 40px);
  color: var(--gold);
}
.solution__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(21px, 2.6vw, 35px);
  margin-bottom: 14px;
}
.solution__body {
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: 300;
  color: var(--ink-soft);
  max-width: 52ch;
}
.solution__tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.solution__tags li {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 16px;
}

/* ============================================================
   Contact
   ============================================================ */
.contact {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(64px, 12vh, 140px) clamp(20px, 5vw, 64px) clamp(80px, 14vh, 160px);
}
.contact__intro {
  font-family: var(--serif);
  font-size: clamp(20px, 2.4vw, 30px);
  line-height: 1.4;
  color: var(--ink);
  max-width: 40ch;
  margin-bottom: clamp(40px, 7vh, 80px);
}
.contact__grid {
  display: grid;
  grid-template-columns: 1.4fr 0.6fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.form__field {
  display: block;
  margin-bottom: 22px;
}
.form__field span {
  display: block;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 10px;
}
.form__field input,
.form__field textarea {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--line);
  background: transparent;
  padding: 10px 0;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
  transition: border-color 0.3s var(--ease);
}
.form__field input:focus,
.form__field textarea:focus {
  outline: none;
  border-bottom-color: var(--ink);
}
.form__field textarea {
  resize: vertical;
}
.form__submit {
  margin-top: 12px;
  padding: 16px 44px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background 0.3s var(--ease),
    color 0.3s var(--ease);
}
.form__submit:hover {
  background: transparent;
  color: var(--ink);
}
.form__submit:disabled {
  opacity: 0.5;
  cursor: default;
}
.form__status {
  margin-top: 18px;
  font-size: 14px;
  min-height: 1.2em;
}
.form__status.is-success {
  color: var(--gold);
}
.form__status.is-error {
  color: #e08d8d;
}

.contact__info {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.info__item {
  border-top: 1px solid var(--line);
  padding-top: 16px;
}
.info__label {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: 8px;
}
.info__item a,
.info__item p {
  font-size: 16px;
  color: var(--ink);
}
/* 장애 접수 칸의 설명 — 문의 주소와 구분되게 작게 */
.info__item .info__note {
  margin-top: 6px;
  font-size: 13px;
  color: var(--ink-soft);
}
/* 지도·길찾기, 주소 복사 (main.js 16) */
.info__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.info__item .info__action {
  padding: 8px 16px;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  text-decoration: none;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition:
    color 0.3s var(--ease),
    border-color 0.3s var(--ease);
}
.info__item .info__action:hover,
.info__item .info__action.is-done {
  color: var(--ink);
  border-color: var(--gold);
}
.info__item .info__action:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 860px) {
  .editorial,
  .editorial--reversed {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .editorial--reversed .editorial__media {
    order: 0;
  }
  .steps__list {
    grid-template-columns: 1fr 1fr;
  }
  .solution,
  .solution--media {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .solution__media {
    order: -1;
    margin-bottom: 8px;
  }
  .contact__grid {
    grid-template-columns: 1fr;
  }
  .form__row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

@media (max-width: 520px) {
  .steps__list {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   스토리 히어로 대비 보정 — 밝은 히어로 이미지 위 흰색 헤더 가독성
   (home 히어로는 그대로 두고 story__hero 에만 상단 스크림 강화)
   ============================================================ */
.story__hero .hero__scrim {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.15) 38%,
    rgba(0, 0, 0, 0.55) 100%
  );
}
/* ============================================================
   Guide (사용설명서) — 공통
   ============================================================ */
.guide {
  padding-top: var(--header-h);
  min-height: 100svh;
}

/* --- 허브 --- */
.guide--hub {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: clamp(20px, 5vw, 64px);
  padding-right: clamp(20px, 5vw, 64px);
}
.guide-hub__head {
  padding: clamp(48px, 9vh, 110px) 0 clamp(40px, 6vh, 72px);
  border-bottom: 1px solid var(--line);
}
.guide-hub__eyebrow {
  font-size: 13px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
}
.guide-hub__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(29px, 4.8vw, 61px);
  line-height: 1.04;
  margin: 14px 0 20px;
}
.guide-hub__intro {
  font-size: clamp(15px, 1.5vw, 19px);
  font-weight: 300;
  color: var(--ink-soft);
  max-width: 60ch;
}
.guide-cat {
  padding: clamp(44px, 7vh, 80px) 0;
  border-bottom: 1px solid var(--line);
}
.guide-cat__name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(21px, 2.4vw, 32px);
}
.guide-cat__summary {
  font-size: 15px;
  color: var(--ink-soft);
  margin-top: 6px;
  margin-bottom: clamp(24px, 4vh, 40px);
}
.guide-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
.guide-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 28px;
  border: 1px solid var(--line);
  background: #fff;
  transition:
    border-color 0.3s var(--ease),
    transform 0.3s var(--ease);
}
.guide-card:hover {
  border-color: var(--ink);
  transform: translateY(-3px);
}
.guide-card__client {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}
.guide-card__name {
  font-family: var(--serif);
  font-size: clamp(16px, 1.6vw, 21px);
  line-height: 1.2;
}
.guide-card__summary {
  font-size: 14px;
  font-weight: 300;
  color: var(--ink-soft);
  flex: 1;
}
.guide-card__go {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 6px;
}

/* --- 프로젝트 문서 (애플식 목차 + 본문) --- */
.guide__topbar {
  max-width: 1240px;
  margin: 0 auto;
  padding: 20px clamp(20px, 5vw, 64px) 0;
}
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-soft);
}
.breadcrumb a:hover {
  color: var(--ink);
  text-decoration: underline;
}
.breadcrumb span[aria-current] {
  color: var(--ink);
}

.guide__layout {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(24px, 4vh, 40px) clamp(20px, 5vw, 64px) clamp(80px, 14vh, 160px);
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.guide__sidebar {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.guide__toc-title {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 14px;
}
.guide__toc {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-left: 1px solid var(--line);
}
.guide__toc li a {
  display: block;
  padding-left: 16px;
  margin-left: -1px;
  border-left: 1px solid transparent;
  font-size: 14px;
  color: var(--ink-soft);
  transition:
    color 0.2s var(--ease),
    border-color 0.2s var(--ease);
}
.guide__toc li a:hover {
  color: var(--ink);
  border-left-color: var(--gold);
}
.guide__linkbox {
  border-top: 1px solid var(--line);
  padding-top: 18px;
}
.guide__linkbox-label {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}
.guide__copyrow {
  display: flex;
  gap: 8px;
}
.guide__url {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--line);
  background: var(--sand);
  padding: 8px 10px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-soft);
}
.guide__copy {
  border: 1px solid var(--ink);
  background: var(--ink);
  color: #fff;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.06em;
  padding: 8px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.2s var(--ease),
    color 0.2s var(--ease);
}
.guide__copy:hover {
  background: transparent;
  color: var(--ink);
}
.guide__copy.is-done {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
}

.guide__article {
  max-width: 760px;
}
.guide__eyebrow {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.guide__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(26px, 3.5vw, 45px);
  line-height: 1.06;
  margin: 12px 0 16px;
}
.guide__lead {
  font-size: clamp(16px, 1.5vw, 19px);
  font-weight: 300;
  color: var(--ink-soft);
}
.guide__updated {
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 14px;
  padding-bottom: clamp(28px, 4vh, 44px);
  border-bottom: 1px solid var(--line);
}
.guide__section {
  padding: clamp(36px, 6vh, 56px) 0;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: calc(var(--header-h) + 20px);
}
.guide__h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(19px, 2.2vw, 29px);
  margin-bottom: 20px;
}
.guide__h {
  font-size: 16px;
  font-weight: 600;
  margin: 26px 0 10px;
}
.guide__p {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.75;
  color: #2b2b2b;
  margin-bottom: 14px;
}
.guide__steps,
.guide__list {
  margin: 8px 0 18px;
  padding-left: 22px;
}
.guide__steps li,
.guide__list li {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.7;
  color: #2b2b2b;
  margin-bottom: 8px;
  padding-left: 6px;
}
.guide__steps li::marker {
  color: var(--gold);
  font-family: var(--serif);
}
.guide__list li::marker {
  color: var(--gold);
}
.guide__note {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-soft);
  background: var(--sand);
  border-left: 2px solid var(--gold);
  padding: 16px 20px;
  margin: 18px 0;
}

@media (max-width: 860px) {
  .guide__layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .guide__sidebar {
    position: static;
    top: auto;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--line);
  }
  .guide__toc {
    flex-flow: row wrap;
    gap: 8px 18px;
    border-left: none;
  }
  .guide__toc li a {
    padding-left: 0;
    border-left: none;
  }
  .guide__article {
    max-width: none;
  }
}

/* ============================================================
   Guide 접근 제어 — 키 잠금 게이트 + 고객사 검색
   ============================================================ */
/* 잠금: 게이트 표시, 콘텐츠 숨김 (JS 미실행 시 콘텐츠 미노출) */
.guide__gate {
  display: none;
}
.guide--locked .guide__gate {
  display: flex;
}
.guide--locked .guide__gated {
  display: none;
}
.guide--locked.is-unlocked .guide__gate {
  display: none;
}
.guide--locked.is-unlocked .guide__gated {
  display: block;
}

.guide__gate {
  min-height: calc(100svh - var(--header-h));
  align-items: center;
  justify-content: center;
  padding: 40px clamp(20px, 5vw, 64px);
}
.guide__gate-card {
  width: 100%;
  max-width: 440px;
  text-align: center;
  border: 1px solid var(--line);
  background: #fff;
  padding: clamp(32px, 5vw, 52px);
}
.guide__gate-eyebrow {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.guide__gate-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(21px, 2.4vw, 29px);
  margin: 12px 0 10px;
}
.guide__gate-note {
  font-size: 14px;
  font-weight: 300;
  color: var(--ink-soft);
  margin-bottom: 24px;
}
.guide__gate-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.guide__gate-input {
  flex: 1 1 160px;
  min-width: 0;
  border: 1px solid var(--line);
  background: var(--sand);
  padding: 12px 14px;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
}
.guide__gate-input:focus {
  outline: none;
  border-color: var(--ink);
}
.guide__gate-btn {
  flex: 1 1 100%;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: #fff;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.08em;
  padding: 12px 22px;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.2s var(--ease),
    color 0.2s var(--ease);
}
.guide__gate-btn:hover {
  background: transparent;
  color: var(--ink);
}
.guide__gate-error {
  min-height: 1.2em;
  margin-top: 12px;
  font-size: 13px;
  color: #b23b3b;
}
.guide__gate-back {
  display: inline-block;
  margin-top: 18px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
  padding-bottom: 3px;
}
.guide__gate-back:hover {
  color: var(--ink);
}

/* 고객사 검색 (허브) */
.guide--access {
  max-width: 720px;
  margin: 0 auto;
  padding-left: clamp(20px, 5vw, 64px);
  padding-right: clamp(20px, 5vw, 64px);
}
.guide--access .guide-hub__head {
  border-bottom: none;
  padding-bottom: clamp(24px, 4vh, 40px);
}
.guide-search__input {
  width: 100%;
  border: 1px solid var(--line);
  background: #fff;
  padding: 16px 18px;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
}
.guide-search__input:focus {
  outline: none;
  border-color: var(--ink);
}
.guide-search__results {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.guide-result {
  border: 1px solid var(--line);
  padding: 20px 22px;
}
.guide-result__company {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}
.guide-result__name {
  font-family: var(--serif);
  font-size: 20px;
  margin: 4px 0 14px;
}
.guide-result__form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.guide-result__form input {
  flex: 1 1 140px;
  min-width: 0;
  border: 1px solid var(--line);
  background: var(--sand);
  padding: 10px 12px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
}
.guide-result__form input:focus {
  outline: none;
  border-color: var(--ink);
}
.guide-result__form button {
  border: 1px solid var(--ink);
  background: var(--ink);
  color: #fff;
  font-family: var(--sans);
  font-size: 13px;
  padding: 10px 18px;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.2s var(--ease),
    color 0.2s var(--ease);
}
.guide-result__form button:hover {
  background: transparent;
  color: var(--ink);
}
.guide-result__error {
  min-height: 1.1em;
  margin-top: 8px;
  font-size: 12px;
  color: #b23b3b;
}
.guide-search__empty {
  margin-top: 12px;
  font-size: 14px;
  color: var(--ink-soft);
}
/* ============================================================
   Brand story (홈) — 이름의 의미: & (그리고) · ; (끝)
   ============================================================ */
.brand {
  /* 띠 + 모래빛 — 바탕 위에 얹는 투명한 층(경계 색이 어긋나지 않게) */
  background:
    radial-gradient(1100px 600px at 50% 32%, rgba(214, 196, 160, 0.14), transparent 65%),
    linear-gradient(180deg, transparent 0%, var(--band) 16%, var(--band) 84%, transparent 100%);
  padding: clamp(80px, 15vh, 200px) clamp(20px, 5vw, 64px);
}
.brand__inner {
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
}
.brand__eyebrow {
  font-size: 13px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.brand__heading {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(26px, 4.4vw, 53px);
  line-height: 1.04;
  margin: 14px 0 clamp(44px, 7vh, 80px);
}
/* & 오브제 이미지 — 스크롤 시차(main.js 14)로 천천히 움직인다 */
.brand__visual {
  margin: 0 auto clamp(44px, 7vh, 80px);
  overflow: hidden;
  aspect-ratio: 1800 / 764;
  background: var(--sand);
}
.brand__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate3d(0, var(--parallax, 0px), 0) scale(1.16);
}
.brand__marks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 5vw, 80px);
  max-width: 640px;
  margin: 0 auto clamp(44px, 7vh, 72px);
}
.brand__mark {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.brand__symbol {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(72px, 13vw, 150px);
  line-height: 1;
  color: var(--gold);
}
.brand__mark-label {
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 14px 0 8px;
}
.brand__mark-desc {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 26ch;
}
.brand__body {
  font-size: clamp(16px, 1.6vw, 20px);
  font-weight: 300;
  line-height: 1.75;
  color: var(--ink);
  max-width: 62ch;
  margin: 0 auto;
}
.brand__highlight {
  font-family: var(--serif);
  font-size: clamp(20px, 2.6vw, 32px);
  line-height: 1.3;
  color: var(--ink);
  margin-top: clamp(28px, 4vh, 48px);
}
.brand__tagline {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(24px, 3.2vw, 42px);
  margin-top: clamp(40px, 6vh, 72px);
}
.brand__semi {
  color: var(--gold);
}
.brand__solution {
  font-style: italic;
  font-weight: 400;
  color: var(--ink-soft);
}

@media (max-width: 520px) {
  .brand__marks {
    gap: 16px;
  }
  .brand__mark-desc {
    font-size: 13px;
  }
}

/* ============================================================
   CMS Control (홈) — 다수 모니터·PC·태블릿 중앙 제어 시각화
   실제 영상: content home.cms.video 에 /videos/cms.mp4 지정 시 자동 재생
   ============================================================ */
.cms {
  background:
    radial-gradient(800px 380px at 80% 50%, var(--glow), transparent 70%),
    linear-gradient(180deg, transparent 0%, var(--band) 16%, var(--band) 84%, transparent 100%);
  padding: clamp(80px, 14vh, 180px) clamp(20px, 5vw, 64px);
}
.cms__inner {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.cms__eyebrow {
  font-size: 13px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.cms__heading {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(24px, 3.5vw, 46px);
  line-height: 1.06;
  margin: 14px 0 22px;
}
.cms__body {
  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 44ch;
}
.cms__stats {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 3vw, 44px);
  margin-top: clamp(28px, 4vh, 44px);
}
.cms__stats li {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cms__stat-value {
  font-family: var(--serif);
  font-size: clamp(19px, 2vw, 28px);
  color: var(--gold-text);
}
.cms__stat-label {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

/* 미디어 패널 (영상 또는 시각화) */
.cms__media {
  position: relative;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--deep);
}
.cms__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
}

/* 시각화: 화면 벽(video wall) + CMS 태그 + LIVE 상태 */
.cms-viz {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(120% 100% at 50% 30%, #221e17 0%, #0f0e0b 72%);
}
.cms-viz__wall {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(8px, 1.2vw, 16px);
  width: 76%;
}
.device {
  aspect-ratio: 16 / 10;
  border-radius: 3px;
  background: #26221b;
  border: 1px solid rgba(243, 239, 232, 0.08);
  animation: cmsSync 4.2s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.22s);
}
@keyframes cmsSync {
  0%,
  100% {
    background: #26221b;
    box-shadow: none;
  }
  45% {
    background: linear-gradient(135deg, #b6975a, #6d5b32);
    box-shadow: 0 0 16px rgba(161, 135, 78, 0.5);
  }
  70% {
    background: linear-gradient(135deg, #b6975a, #6d5b32);
    box-shadow: 0 0 8px rgba(161, 135, 78, 0.3);
  }
}
.cms-viz__tag {
  position: absolute;
  top: 16px;
  left: 16px;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--gold);
  border: 1px solid rgba(161, 135, 78, 0.5);
  border-radius: 999px;
  padding: 5px 12px;
  background: rgba(0, 0, 0, 0.35);
}
.cms-viz__status {
  position: absolute;
  bottom: 16px;
  left: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}
.cms-viz__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px var(--gold);
  animation: cmsBlink 1.6s ease-in-out infinite;
}
@keyframes cmsBlink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

@media (max-width: 860px) {
  .cms__inner {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .device,
  .cms-viz__dot {
    animation: none;
  }
  .device {
    background: linear-gradient(135deg, #4a3f26, #26221b);
  }
}
/* ============================================================
   Work 카드 썸네일 — 작업 페이지 링크(호버 확대는 styles.css 유지)
   ============================================================ */
.work__media {
  display: block;
  width: 100%;
  color: inherit;
}
a.work__media {
  cursor: pointer;
}
.work__view {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(17, 17, 17, 0.5);
  color: #fff;
  font-size: 18px;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  backdrop-filter: blur(2px);
  transition:
    opacity 0.4s var(--ease),
    transform 0.4s var(--ease);
}
.work__media:hover .work__view,
.work__media:focus-visible .work__view {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
/* 모바일(호버 없음): 스크롤로 화면 중앙에 오면 호버 효과 재현 (JS가 .work--active 토글) */
.work--active .work__media img {
  transform: scale(var(--work-scale, 1.06));
}
.work--active .work__view {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* ============================================================
   Auto-play 데모 스택 (영상 / 이미지 시퀀스 루프 / 스크롤 연동)
   ============================================================ */
.seqdemos {
  padding: clamp(80px, 14vh, 180px) 0 clamp(60px, 10vh, 120px);
  border-top: 1px solid var(--line);
}
.seqdemos__intro {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 64px);
}
.seqdemos__eyebrow {
  font-size: 13px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.seqdemos__heading {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(26px, 4vw, 51px);
  line-height: 1.04;
  margin: 14px 0 16px;
}
.seqdemos__lead {
  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: 300;
  color: var(--ink-soft);
  max-width: 52ch;
}
.seqdemos__list {
  margin-top: clamp(32px, 5vh, 60px);
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 2vh, 20px);
}
.seqdemo__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 90vh;
  overflow: hidden;
  background: #111;
}
.seqdemo__media img,
.seqdemo__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 왼쪽 상단 오버레이 — 번호 + 방식 */
.seqdemo__tag {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px 10px 12px;
  background: rgba(17, 17, 17, 0.55);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  color: #fff;
}
.seqdemo__no {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--gold);
  color: #fff;
  font-family: var(--serif);
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.seqdemo__method {
  font-size: 13px;
  letter-spacing: 0.02em;
}

/* 태블릿(≤1024px): 4:3 (object-fit:cover 로 데스크톱 소스가 크롭되어 채워짐) */
@media (max-width: 1024px) {
  .seqdemo__media {
    aspect-ratio: 4 / 3;
  }
}
/* 폰(≤640px): 9:16 세로 */
@media (max-width: 640px) {
  .seqdemo__method {
    font-size: 12px;
  }
  .seqdemo__tag {
    top: 12px;
    left: 12px;
    padding: 8px 12px 8px 8px;
  }
  .seqdemo__media {
    aspect-ratio: 9 / 16;
  }
}

/* ============================================================
   QR 물품 랜딩 페이지 (/qr/)
   ============================================================ */
.qrland {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--header-h) + 48px) 20px 80px;
  background: var(--paper);
}
.qrland__inner {
  width: 100%;
  max-width: 520px;
  text-align: center;
}
.qrland__badge {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 999px;
  padding: 7px 16px;
  margin-bottom: 28px;
}
.qrland__badge .amp {
  color: var(--gold);
}
.qrland__card {
  background: var(--sand); /* 바탕 위에 밝기를 더하는 카드 */
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  text-align: left;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}
.qrland__media {
  aspect-ratio: 16 / 9;
  background: var(--deep);
  display: flex;
  align-items: center;
  justify-content: center;
}
.qrland__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.qrland__logo {
  font-family: var(--serif);
  font-size: clamp(34px, 8vw, 46px);
  color: #fff;
  letter-spacing: 0.01em;
}
.qrland__logo .amp {
  color: var(--gold);
}
.qrland__info {
  padding: clamp(24px, 5vw, 34px);
}
.qrland__name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(19px, 4vw, 26px);
  line-height: 1.2;
  margin-bottom: 12px;
}
.qrland__desc {
  color: var(--ink-soft);
  line-height: 1.75;
  font-size: 15px;
}
.qrland__code {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--gold);
}
.qrland__home {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 32px;
  padding: 16px 34px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 999px;
  font-size: 15px;
  transition:
    transform 0.2s var(--ease),
    opacity 0.2s var(--ease);
}
.qrland__home:hover {
  transform: translateY(-2px);
  opacity: 0.92;
}
.qrland__redirect {
  margin-top: 16px;
  font-size: 13px;
  color: var(--ink-soft);
  opacity: 0.75;
}
/* ============================================================
   마케팅 기본기 — 헤더 문의 버튼 · 첫 화면 서비스 한 줄 · 함께한 현장 · Why ·
   솔루션 관련 작업 · 작업별 페이지 · 개인정보처리방침 · 문의 폼 추가 항목 · 푸터 정보
   ============================================================ */

/* 헤더 문의 버튼 — 글자색 바탕에 바탕색 글자(어두운 페이지에선 밝은 버튼, 밝은 가이드에선 검정 버튼) */
.header__cta {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  text-shadow: none;
  white-space: nowrap;
  transition:
    background 0.3s var(--ease),
    color 0.3s var(--ease);
}
.header__cta:hover {
  background: var(--gold-text);
  color: var(--paper);
}
@media (max-width: 640px) {
  .header .header__cta {
    font-size: 11px;
    letter-spacing: 0.08em;
    padding: 11px 14px; /* 높이 36px 이상 */
  }
}

/* 첫 화면 — 버튼 두 개 */
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}
.hero__actions .hero__cta {
  margin-top: 0;
}
.hero__cta--solid {
  background: #f3efe8;
  color: #15130f;
  border-color: #f3efe8;
  animation-delay: 0.75s;
}
.hero__cta--solid:hover {
  background: transparent;
  color: #f3efe8;
}
/* 함께한 현장 — 숫자 띠 · 현장 카드(작업 페이지 링크) · 업종 한 줄. 로고가 없으면 이름을 글자로 */
.clients {
  background:
    radial-gradient(760px 340px at 50% 58%, var(--glow), transparent 72%),
    linear-gradient(180deg, transparent 0%, var(--band) 16%, var(--band) 84%, transparent 100%);
  padding: clamp(80px, 14vh, 160px) clamp(20px, 5vw, 64px);
  text-align: center;
}
.clients__inner {
  max-width: 1100px;
  margin: 0 auto;
}
.clients__eyebrow,
.why__eyebrow {
  font-size: 13px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.clients__heading {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(30px, 4.4vw, 56px);
  line-height: 1.1;
  margin: 16px 0 18px;
}
@media (max-width: 640px) {
  /* 휴대폰: 현장 이름 줄은 한 줄에 다 들어가게 작게 */
  .clients__heading-sub {
    display: block;
    margin-top: 6px;
    font-size: 0.62em;
    line-height: 1.3;
    color: var(--ink-soft);
  }
}
.clients__lead {
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: 300;
  color: var(--ink-soft);
  max-width: 46ch;
  margin: 0 auto;
}
.clients__stats {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(28px, 5vw, 80px);
  margin-top: clamp(36px, 6vh, 56px);
}
.clients__stats li {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.clients__stat-value {
  font-family: var(--serif);
  font-size: clamp(38px, 5vw, 66px);
  line-height: 1;
  color: var(--gold-text);
}
.clients__stat-label {
  font-size: 13px;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
}
.clients__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin-top: clamp(40px, 7vh, 64px);
}
.clients__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  height: 100%;
  min-height: 160px;
  padding: 30px 24px 26px;
  border: 1px solid var(--line);
  background: rgba(243, 239, 232, 0.02);
  transition:
    border-color 0.3s var(--ease),
    background-color 0.3s var(--ease),
    transform 0.4s var(--ease);
}
a.clients__card:hover {
  border-color: var(--gold);
  background: rgba(243, 239, 232, 0.05);
  transform: translateY(-2px);
}
.clients__name {
  font-family: var(--serif);
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.2;
}
.clients__card img {
  max-height: 48px;
  width: auto;
  filter: grayscale(1);
  opacity: 0.8;
}
.clients__note {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 28ch;
}
.clients__go {
  margin-top: auto;
  padding-top: 8px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.clients__industries {
  margin-top: 28px;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}

/* Why and&end — 세 가지 이유 */
.why {
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(88px, 15vh, 180px) clamp(20px, 5vw, 64px);
}
.why__intro {
  max-width: 760px;
  margin-bottom: clamp(48px, 8vh, 88px);
}
.why__heading {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(32px, 5vw, 68px);
  line-height: 1.05;
  margin-top: 16px;
}
.why__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 64px);
}
.why__item {
  border-top: 1px solid var(--line-strong);
  padding-top: 24px;
}
.why__no {
  font-family: var(--serif);
  font-size: clamp(24px, 2.4vw, 32px);
  color: var(--gold-text);
}
.why__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.2;
  margin: 12px 0 14px;
}
.why__body {
  max-width: 60ch;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--ink-soft);
}
@media (max-width: 860px) {
  .why__list {
    grid-template-columns: 1fr;
  }
}

/* 솔루션 — 관련 작업 */
.solution__related {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  margin-top: 18px;
  font-size: 14px;
}
.solution__related span {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.solution__related a {
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  transition: border-color 0.3s var(--ease);
}
.solution__related a:hover {
  border-bottom-color: var(--gold);
}

/* 작업별 페이지 */
.workpage__body {
  max-width: 1040px;
  margin: 0 auto;
  padding: clamp(36px, 6vh, 64px) clamp(20px, 5vw, 64px) clamp(80px, 14vh, 160px);
}
.workpage__back {
  display: inline-flex;
  gap: 8px;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  transition: color 0.3s var(--ease);
}
.workpage__back:hover {
  color: var(--ink);
}
.workpage__summary {
  margin: clamp(32px, 6vh, 56px) 0 clamp(40px, 7vh, 72px);
}
.workpage__desc {
  font-family: var(--serif);
  font-size: clamp(22px, 2.8vw, 36px);
  line-height: 1.4;
}
.workpage__blocks {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vw, 36px);
}
.workpage__media {
  background: #000;
  line-height: 0;
  overflow: hidden;
}
.workpage__media img,
.workpage__media video {
  display: block;
  width: 100%;
  height: auto;
}
/* preload="none" 이라 재생 전에는 영상 높이를 모른다 — 16:9 자리를 먼저 잡고, 비율이 다른 영상은 자르지 않고 검은 여백을 둔다 */
.workpage__media--video video {
  aspect-ratio: 16 / 9;
  object-fit: contain;
}
.workpage__text {
  font-size: clamp(16px, 1.5vw, 19px);
  font-weight: 300;
  line-height: 1.85;
  color: var(--ink-soft);
  max-width: 60ch;
}
.workpage__cta {
  text-align: center;
  margin: clamp(56px, 10vh, 110px) 0;
}
.workpage__ask {
  display: inline-block;
  padding: 18px 48px;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition:
    background 0.3s var(--ease),
    color 0.3s var(--ease);
}
.workpage__ask:hover {
  background: transparent;
  color: var(--ink);
}
.workpage__pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.workpage__pager-link {
  padding: 28px 24px 28px 0;
  font-family: var(--serif);
  font-size: clamp(18px, 2vw, 26px);
  line-height: 1.25;
  transition: color 0.3s var(--ease);
}
.workpage__pager-link span {
  display: block;
  margin-bottom: 6px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.workpage__pager-link--next {
  text-align: right;
  padding: 28px 0 28px 24px;
  border-left: 1px solid var(--line);
}
.workpage__pager-link:hover {
  color: var(--gold);
}

/* 개인정보처리방침 · 없는 주소(404) */
.doc {
  padding: calc(var(--header-h) + clamp(40px, 8vh, 96px)) clamp(20px, 5vw, 64px)
    clamp(80px, 14vh, 140px);
}
.doc__inner {
  max-width: 760px;
  margin: 0 auto;
}
.doc__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(34px, 5vw, 60px);
  line-height: 1.1;
}
.doc__updated {
  margin-top: 12px;
  font-size: 13px;
  color: var(--ink-soft);
}
.doc__intro {
  margin-top: 32px;
  font-size: 16px;
  line-height: 1.8;
}
.doc__links {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  list-style: none;
  padding: 0;
}
.doc__links a {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.3s var(--ease);
}
.doc__links a:hover,
.doc__links a:focus-visible {
  border-color: var(--gold);
}
.doc__section {
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.doc__section h2 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 14px;
}
.doc__section p,
.doc__section li {
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink-soft);
}
.doc__section p + p {
  margin-top: 10px;
}
.doc__section ul {
  margin-top: 10px;
  padding-left: 20px;
}
.doc__section li + li {
  margin-top: 6px;
}
.doc__section ul + p {
  margin-top: 14px;
}

/* 문의 폼 — 선택 목록 · 동의 · 숨은 입력칸 */
.form__field select {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 10px 24px 10px 0;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
  -webkit-appearance: none;
  appearance: none;
  background-color: transparent;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
    linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position:
    calc(100% - 10px) 55%,
    calc(100% - 5px) 55%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
  transition: border-color 0.3s var(--ease);
}
.form__field select:focus {
  outline: none;
  border-bottom-color: var(--ink);
}
.form__field input::placeholder {
  color: var(--ink-soft);
  opacity: 0.75;
}
/* 입력칸 초점 — 밑줄 색만 바뀌면 잘 안 보이므로 키보드 초점에는 2px 밑줄을 더한다 */
.form__field input:focus-visible,
.form__field select:focus-visible,
.form__field textarea:focus-visible {
  box-shadow: 0 1px 0 0 var(--ink);
}
.form__consent {
  margin: 8px 0 24px;
  padding: 18px 20px;
  background: var(--sand);
}
.form__check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  cursor: pointer;
}
.form__check input {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: var(--ink);
}
.form__consent-detail {
  margin-top: 8px;
  padding-left: 28px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--ink-soft);
}
.form__consent-detail a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* 푸터 — 주소 · 회사 정보 · 개인정보처리방침 */
.footer__info {
  font-size: 12px;
  line-height: 1.7;
  color: rgba(243, 239, 232, 0.6);
}
.footer__privacy {
  margin-right: 14px;
  font-weight: 700;
  color: #f3efe8;
}
.footer__privacy:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 한국어 문단은 낱말 중간에서 줄을 바꾸지 않는다 */
.story__title,
.workpage__pager-link,
.story__intro p,
.solution__body,
.clients__lead,
.why__title,
.why__body,
.workpage__desc,
.workpage__text,
.form__consent-detail,
.doc__inner {
  word-break: keep-all;
}
.form__consent-detail a {
  white-space: nowrap;
}

/* 휴대폰 — 첫 화면 버튼 두 개를 한 줄에. SCROLL 표시는 버튼과 겹치므로 숨긴다 */
@media (max-width: 520px) {
  .hero__scroll {
    display: none;
  }
  .workpage__ask {
    padding: 18px 24px;
    letter-spacing: 0.08em;
  }
  .hero__actions {
    gap: 10px;
  }
  .hero__actions .hero__cta {
    padding: 14px 20px;
    letter-spacing: 0.1em;
  }
}

/* 솔루션 카드의 생성 이미지 — 실제 현장 사진으로 오해하지 않게 '연출 이미지'라고 밝힌다 */
.solution__media {
  position: relative;
}
.solution__caption {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 3px 8px;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 3px;
}

/* 동의 요약 — 보유 기간은 눈에 띄게(개인정보 보호법 제22조 제2항) */
.form__consent-detail strong {
  font-weight: 700;
  color: var(--ink);
}

/* 작업 페이지 첫 화면 — 밝은 현장 사진 위에서도 흰 글자가 읽히게 아래쪽을 더 어둡게 */
.workpage .story__hero .hero__scrim {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.2) 35%,
    rgba(0, 0, 0, 0.72) 100%
  );
}
.workpage .story__eyebrow,
.workpage .story__title {
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}
/* ============================================================
   홈 — 하는 일 띠 · 대표 작업 · 작업 목록(/work/)
   (섹션 순서: 첫 화면 → 하는 일 → 함께한 현장 → 대표 작업 → 왜 → CMS → 이름 소개 → 푸터)
   ============================================================ */

/* 하는 일 — 세 줄 목록. 줄마다 솔루션 페이지의 해당 항목으로 간다 */
.services {
  padding: clamp(72px, 12vh, 150px) clamp(20px, 5vw, 64px);
  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--band) 18%,
    var(--band) 82%,
    transparent 100%
  );
}
.services__inner {
  max-width: 1440px;
  margin: 0 auto;
}
.services__eyebrow {
  font-size: 13px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.services__heading {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(26px, 4vw, 51px);
  line-height: 1.04;
  margin: 14px 0 clamp(28px, 5vh, 52px);
}
.services__list {
  list-style: none;
  border-top: 1px solid var(--line-strong);
}
.services__item {
  border-bottom: 1px solid var(--line);
}
.services__link {
  display: grid;
  grid-template-columns: 56px minmax(0, 0.9fr) minmax(0, 1.1fr) 40px;
  align-items: baseline;
  gap: clamp(16px, 3vw, 48px);
  padding: clamp(22px, 3.5vh, 36px) 0;
}
.services__no {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--gold-text);
}
.services__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(24px, 3vw, 42px);
  line-height: 1.1;
  transition: color 0.3s var(--ease);
}
.services__body {
  font-size: clamp(15px, 1.4vw, 17px);
  font-weight: 300;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 54ch;
}
.services__arrow {
  justify-self: end;
  font-size: 20px;
  color: var(--ink-soft);
  transition:
    transform 0.4s var(--ease),
    color 0.3s var(--ease);
}
.services__link:hover .services__title {
  color: var(--gold-text);
}
.services__link:hover .services__arrow {
  transform: translateX(6px);
  color: var(--ink);
}
.services__foot {
  margin-top: 28px;
}
.services__more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--ink);
}
.services__more span:last-child {
  transition: transform 0.4s var(--ease);
}
.services__more:hover span:last-child {
  transform: translateX(6px);
}
@media (max-width: 860px) {
  .services__link {
    grid-template-columns: 36px 1fr 24px;
    grid-template-areas:
      'no title arrow'
      'no body arrow';
    gap: 8px clamp(12px, 3vw, 20px);
  }
  .services__no {
    grid-area: no;
    font-size: 15px;
  }
  .services__title {
    grid-area: title;
  }
  .services__body {
    grid-area: body;
  }
  .services__arrow {
    grid-area: arrow;
    align-self: center;
  }
}

/* 대표 작업(홈) — 위에 금색 빛, 아래에 '작업 전체 보기' */
.stack--featured {
  background: radial-gradient(900px 420px at 50% 0%, var(--glow), transparent 70%);
}
.stack__all {
  margin-top: clamp(44px, 8vh, 80px);
  text-align: center;
}
.stack__all .hero__cta {
  margin-top: 0;
  animation: none;
  opacity: 1;
  border-color: rgba(243, 239, 232, 0.5);
}

/* 작업 목록 /work/ — 히어로가 없어 고정 헤더 아래에서 시작한다 */
.stack--page {
  padding-top: calc(var(--header-h) + clamp(40px, 8vh, 96px));
  background: radial-gradient(900px 420px at 50% 0%, var(--glow), transparent 70%);
}
.stack--page .stack__intro {
  border-top: 0;
  padding-top: 0;
}
/* ============================================================
   다섯 층 · 자주 묻는 질문(솔루션) · 맡은 일(작업 페이지) · 홈 CMS 실제 화면 · 연출 이미지 표시
   ============================================================ */

/* 솔루션 — 화면 하나를 이루는 다섯 층. 층마다 그 층을 맡은 작업으로 잇는다 */
.layers,
.faq {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 64px) clamp(56px, 10vh, 120px);
}
.faq {
  padding-top: clamp(40px, 8vh, 100px);
}
.layers__eyebrow,
.faq__eyebrow {
  font-size: 13px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.layers__heading,
.faq__heading {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(26px, 4vw, 51px);
  line-height: 1.08;
  margin: 14px 0 16px;
}
.layers__lead {
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 60ch;
}
.layers__list,
.faq__list {
  list-style: none;
  margin-top: clamp(24px, 4vh, 44px);
  border-top: 1px solid var(--line-strong);
}
.layer {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: clamp(12px, 2vw, 24px);
  padding: clamp(22px, 3.5vh, 34px) 0;
  border-bottom: 1px solid var(--line);
}
.layer__no {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--gold-text);
}
.layer__main {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  align-items: baseline;
  gap: 8px clamp(16px, 3vw, 48px);
}
.layer__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.15;
}
.layer__body {
  font-size: clamp(15px, 1.4vw, 17px);
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 56ch;
}
.layer__main .solution__related {
  grid-column: 2;
  margin-top: 4px;
}

/* 자주 묻는 질문 — 늘 펼쳐 둔다(검색·답변 엔진이 읽는 글과 화면이 같게) */
.faq__item {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 10px clamp(16px, 3vw, 48px);
  padding: clamp(20px, 3vh, 30px) 0;
  border-bottom: 1px solid var(--line);
}
.faq__q {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(18px, 1.9vw, 24px);
  line-height: 1.4;
}
.faq__body .solution__related {
  margin-top: 10px;
}
.faq__a {
  font-size: clamp(15px, 1.4vw, 17px);
  font-weight: 300;
  line-height: 1.75;
  color: var(--ink-soft);
}

/* 작업 페이지 — 요약(두 문장)과 맡은 일 */
.workpage__desc--lead {
  font-size: clamp(20px, 2.3vw, 30px);
  line-height: 1.5;
}
.workpage__facts {
  margin: 0 0 clamp(40px, 7vh, 72px);
  padding: clamp(20px, 3vh, 28px) 0;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line);
}
.workpage__facts-heading {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(18px, 1.8vw, 22px);
  margin-bottom: 14px;
}
.workpage__scope {
  display: grid;
  gap: 10px;
}
.workpage__scope-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
}
.workpage__scope dt {
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--gold-text);
}
.workpage__scope dd {
  margin: 0;
  font-size: clamp(15px, 1.4vw, 17px);
  font-weight: 300;
  line-height: 1.6;
}
.workpage__place {
  margin-top: 16px;
  font-size: 14px;
  color: var(--ink-soft);
}
.workpage__place-label {
  display: inline-block;
  min-width: 120px;
  margin-right: 16px;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--gold-text);
}

.layer__title,
.layer__body,
.faq__q,
.faq__a,
.workpage__scope dd,
.workpage__desc--lead {
  word-break: keep-all;
}

/* 홈 CMS — 실제 관리 화면 영상. 화면 글씨가 잘리지 않게 16:9 로 담는다 */
.cms__media:has(.cms__video) {
  aspect-ratio: 16 / 9;
}
.cms__media .cms__video {
  object-fit: contain;
  background: #000;
  cursor: pointer; /* 누르면 멈춤·재생(main.js 17) */
}
.cms__caption {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 5px 10px;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #f3efe8;
  background: rgba(16, 14, 11, 0.72);
  border-radius: 3px;
}

/* 제작 과정 — 생성 이미지 표시(솔루션 카드의 연출 이미지와 같은 모양) */
.editorial__media {
  position: relative;
}
.editorial__caption {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 3px 8px;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 3px;
}

@media (max-width: 760px) {
  .layer__main,
  .faq__item {
    grid-template-columns: minmax(0, 1fr);
  }
  .layer__main .solution__related {
    grid-column: auto;
  }
  .workpage__scope-row {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 12px;
  }
  .workpage__place-label {
    min-width: 88px;
    margin-right: 12px;
  }
}