/* 섹션별 배치 — 섹션 주석으로 구획한다 */

/* header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  background: var(--ink);
  border-bottom: 1px solid var(--ink-line);
}
.site-header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.site-header__brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; }
.site-header .logo-mark { --shape: 14px; flex: none; }
.site-header .wordmark { font-size: 16px; white-space: nowrap; }
.site-header__toggle {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--cream);
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 700;
  cursor: pointer;
}
.site-nav { display: none; }
.site-nav__list a { text-decoration: none; font-size: var(--fs-small); font-weight: 700; }
.site-nav__list a:hover { color: var(--lime); }
/* 1200 미만: 접힌 메뉴. 열린 상태(html.nav-open)는 헤더 아래 전체 화면 */
.nav-open .site-nav {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 32px var(--gutter);
  background: var(--ink);
  overflow-y: auto;
}
.nav-open .site-nav__list { display: flex; flex-direction: column; gap: 4px; }
.nav-open .site-nav__list a { display: block; padding: 10px 0; font-size: var(--fs-h3); }
.nav-open .site-nav__cta { align-self: flex-start; }
@media (min-width: 1200px) {
  .site-header__toggle { display: none; }
  .site-nav, .nav-open .site-nav {
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 32px;
    padding: 0;
    background: none;
    overflow: visible;
  }
  .site-nav__list, .nav-open .site-nav__list { display: flex; flex-direction: row; gap: 28px; }
  .nav-open .site-nav__list a { display: inline; padding: 0; font-size: var(--fs-small); }
}

/* hero — 로고만(10-18 준 이미지 기준). 매끈한 입체 도형 셋이 징검다리로 로고를 만든 뒤 바닥선 아래로 꺼지고,
   같은 자리에서 글자 로고가 올라온다(10-18 준: 비교 페이지 6번). 움직임은 motion.css M1.
   끝 모습 = 글자만: 도형 줄은 여기서 숨기고(동작 줄이기 켜짐도 이 모습), 움직임이 켜졌을 때만 M1이 보였다 감춘다.
   도형 줄과 글자는 같은 칸에 겹치고 바닥선을 맞춘다. --s = 도형 한 변. 준 이미지 1440 실측 = 도형 77px · 간격 18px · 글자 폭 458px.
   768 이상 = clamp(48px, 5.35vw, 96px), 768 미만 = 내용 폭 ÷ 7(48px 이하). 간격 = 0.25s, 글자 = 0.62s(준 이미지 글자 폭 458px에 맞춤, 자간 0.31em 유지) */
#hero {
  --s: min(calc((100vw - 2 * var(--gutter)) / 7), 48px);
  display: grid;
  place-items: center;
  align-content: center;
  min-height: calc(100svh - var(--header-h));
  padding-block: 0;
}
@media (min-width: 768px) {
  #hero { --s: clamp(48px, 5.35vw, 96px); }
}
.dots, .hero__word { grid-area: 1 / 1; align-self: end; }
.dots { display: flex; gap: calc(var(--s) * .25); visibility: hidden; }
.dot { position: relative; width: var(--s); height: var(--s); }
.dot--square { z-index: 3; }
.dot--rounded { z-index: 2; }
.dot--circle { z-index: 1; }
.dot__hop { display: block; width: 100%; height: 100%; }
/* 왼쪽 위에서 빛을 받는 입체: 밝은 쪽(흰색 섞음) → 로고 색 → 그늘(먹 섞음) */
.dot__body {
  display: block;
  transform-origin: 50% 100%;
  width: 100%;
  height: 100%;
  background: radial-gradient(120% 120% at 30% 22%, color-mix(in srgb, var(--cream), #fff 60%) 0%, var(--cream) 42%, color-mix(in srgb, var(--cream), #000 22%) 100%);
  /* 베개처럼 부푼 느낌: 아래 가장자리 그늘 + 위 가장자리 빛 */
  box-shadow: inset 0 calc(var(--s) * -.1) calc(var(--s) * .18) rgb(0 0 0 / .28), inset 0 calc(var(--s) * .06) calc(var(--s) * .12) rgb(255 255 255 / .45);
}
.dot--rounded .dot__body { border-radius: 28%; }
.dot--circle .dot__body {
  border-radius: 50%;
  background: radial-gradient(120% 120% at 30% 22%, color-mix(in srgb, var(--lime), #fff 50%) 0%, var(--lime) 42%, color-mix(in srgb, var(--lime), #000 25%) 100%);
}
/* 글자 로고 — 자간(0.31em)이 마지막 글자 뒤에도 붙어 오른쪽으로 쏠리므로 그만큼 오른쪽 여백을 당겨 가운데를 맞춘다 */
.hero__word { margin-right: calc(var(--ls-wordmark) * -1); font-size: calc(var(--s) * .62); line-height: 1.2; white-space: nowrap; }

/* marquee — 맺음과 소개 사이 키워드 띠. 스크롤에 따라 두 줄이 반대로 흐른다(--shift·--span은 motion.js가 줌, 없으면 정지) */
.marquee {
  overflow: hidden;
  padding-block: clamp(40px, 6vw, 88px);
  border-top: 1px solid var(--ink-line);
  background: var(--ink);
  color: var(--cream);
}
.marquee__row {
  display: flex;
  align-items: center;
  gap: 0.5em;
  width: max-content;
  white-space: nowrap;
  font-size: clamp(40px, 7vw, 112px);
  font-weight: 700;
  line-height: 1.1;
}
.marquee__row--en {
  font-family: 'Montserrat', 'Noto Sans KR', sans-serif;
  letter-spacing: var(--ls-en);
  transform: translateX(calc(var(--shift, 0px) * -1));
}
.marquee__row--ko {
  margin-top: 0.15em;
  color: var(--lime);
  transform: translateX(calc(var(--shift, 0px) - var(--span, 0px)));
}
.marquee__shape { flex: none; width: 0.5em; height: 0.5em; background: var(--cream); }
.marquee__shape--rounded { border-radius: 28%; }
.marquee__shape--circle { border-radius: 50%; background: var(--lime); }
.marquee__dot { flex: none; width: 0.18em; height: 0.18em; border-radius: 50%; background: currentColor; }

/* about */
.about__title { margin-top: clamp(16px, 2vw, 24px); }
.about__sub { margin-top: 16px; color: var(--muted-ink); }
.about__cards { display: grid; grid-template-columns: 1fr; gap: clamp(16px, 1.8vw, 24px); margin-top: clamp(32px, 3.4vw, 48px); }
@media (min-width: 768px) {
  .about__cards { grid-template-columns: repeat(3, 1fr); }
}
.about__card { padding: clamp(24px, 2.6vw, 40px); }
.about__shape { display: block; width: 48px; height: 48px; background: var(--cream); }
.about__shape--rounded { border-radius: 28%; }
.about__shape--circle { border-radius: 50%; background: var(--lime); }
.about__en { margin-top: 24px; color: var(--lime); }
.about__card .t-h3 { margin-top: 16px; }
.about__text { margin-top: 16px; color: var(--muted-ink); }
.about__closing { margin-top: clamp(32px, 3.4vw, 48px); color: var(--cream); }
.about__accent { color: var(--lime); }
/* services — 3~5번(기본 구성 · 공통 기능 · 연동) 내용을 카드 3장으로 압축. 도형은 로고처럼 사각 → 둥근 사각 → 원.
   768 이상 · 높이 700 이상이면 카드가 차례로 겹쳐 쌓인다(sticky — 카드가 화면보다 크면 아래가 가려지므로 높이 조건) */
.services__layout { display: grid; gap: clamp(32px, 4vw, 56px); }
.services__title { margin-top: clamp(16px, 2vw, 24px); }
.services__muted { color: var(--muted-3); }
.services__list { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }
.service {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(24px, 3vw, 40px);
  border-radius: var(--radius-card);
}
.service--square { background: var(--ink); color: var(--cream); }
.service--rounded { background: var(--paper-card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--paper-line); }
.service--circle { background: var(--lime); color: var(--ink); }
.service__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.service__label { font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.035em; }
.service__num { margin-right: 6px; font-family: 'Montserrat', 'Noto Sans KR', sans-serif; }
.service__shape { flex: none; width: clamp(32px, 3vw, 44px); height: clamp(32px, 3vw, 44px); background: var(--ink); }
.service--square .service__shape { background: var(--cream); }
.service--rounded .service__shape { border-radius: 28%; }
.service--circle .service__shape { border-radius: 50%; }
.service__title { margin-top: clamp(4px, 1.6vw, 24px); font-size: clamp(22px, 2.4vw, 34px); font-weight: 700; line-height: 1.3; letter-spacing: var(--ls-h2); }
.service__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.service__tags li { padding: 6px 14px; border: 1px solid var(--paper-line); border-radius: var(--radius-pill); font-size: var(--fs-small); }
.service--square .service__tags li { border-color: var(--ink-line); background: var(--ink-card); }
.service--circle .service__tags li { border-color: var(--ink); }
.service__note { font-size: var(--fs-small); }
@media (min-width: 768px) and (min-height: 700px) {
  .service { position: sticky; top: calc(var(--header-h) + 24px); min-height: 300px; }
  .service--rounded { top: calc(var(--header-h) + 48px); }
  .service--circle { top: calc(var(--header-h) + 72px); }
}
@media (min-width: 1200px) {
  .services__layout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; gap: 64px; }
  .services__head { position: sticky; top: calc(var(--header-h) + 48px); }
}

/* 섹션 머리(라벨 + 제목) — process·contact 공용 */
.section-head__title { margin-top: clamp(16px, 2vw, 24px); }

/* process */
.process__flow { display: grid; grid-template-columns: 2px minmax(0, 1fr); gap: 16px; margin-top: clamp(32px, 3vw, 40px); }
/* 진행 막대: 요소 자체가 바탕(--paper-line), ::before가 채움. T7 모션이 --progress(0~1)를 이 요소에 준다 */
.process__bar { position: relative; background: var(--paper-line); }
.process__bar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: scaleY(var(--progress, 1));
  transform-origin: top;
}
.process__steps { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(12px, 1vw, 16px); }
@media (min-width: 768px) {
  .process__flow { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .process__bar { height: 2px; }
  .process__bar::before { transform: scaleX(var(--progress, 1)); transform-origin: left; }
  .process__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .process__steps { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.step { padding: clamp(18px, 1.6vw, 24px); }
.step__num { font-family: 'Montserrat', 'Noto Sans KR', sans-serif; font-size: var(--fs-h3); font-weight: 700; line-height: 1.3; }
.step__title { margin-top: 8px; font-size: var(--fs-body); font-weight: 700; line-height: 1.4; }
.step__text { margin-top: 8px; font-size: var(--fs-small); color: var(--muted-paper); }
.step--last .step__text { color: var(--ink); }
.process__after {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 28px;
  margin-top: clamp(20px, 2vw, 32px);
  padding: clamp(20px, 2vw, 28px) clamp(20px, 2.4vw, 40px);
  border-radius: var(--radius-card);
  background: var(--ink);
  color: var(--cream);
}
.process__after-label { font-size: var(--fs-small); font-weight: 700; color: var(--lime); }

/* closing — 바탕은 먹, 라임 면(.closing__fill)이 clip-path 원으로 덮는다. 기본 --clip 75% = 섹션 전체 */
#closing { position: relative; overflow: hidden; background: var(--ink); padding-block: clamp(96px, 14vw, 200px); }
.closing__fill {
  position: absolute;
  inset: 0;
  background: var(--lime);
  clip-path: circle(var(--clip, 75%) at 50% 50%);
}
.closing__inner { position: relative; }
.closing__logo { --shape: clamp(36px, 3vw, 56px); }
.closing__title { margin-top: clamp(28px, 3vw, 48px); }
.closing__sub { margin-top: clamp(24px, 3vw, 48px); font-size: var(--fs-h3); line-height: 1.5; }
/* 1200 미만 + JS 꺼짐: 토글이 동작하지 않으므로 숨기고 메뉴 링크를 헤더 안에 펼친다 */
@media (width < 1200px) {
  html:not(.js) .site-header { position: static; height: auto; }
  html:not(.js) .site-header__inner { flex-wrap: wrap; gap: 12px 24px; padding-block: 16px; }
  html:not(.js) .site-header__toggle { display: none; }
  html:not(.js) .site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; width: 100%; }
  html:not(.js) .site-nav__list { display: flex; flex-wrap: wrap; gap: 4px 20px; }
  html:not(.js) .site-nav__list a { display: inline-block; padding: 8px 0; }
}

/* 떠 있는 견적 문의(아임웹·식스샵 같은 SaaS 공통 형식) — 히어로를 지나고 문의 섹션 전까지만 보인다(.is-shown은 ui.js). JS 없으면 숨김 */
.float-cta {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 40;
  box-shadow: 0 0 0 2px var(--ink), 0 8px 24px rgba(18, 18, 17, 0.25); /* 라임 면(맺음 · 연동 카드) 위에서도 윤곽이 보이게 먹 테 */
}
.float-cta:not(.is-shown) { visibility: hidden; opacity: 0; transform: translateY(12px); }
/* 어느 섹션 위에 떠도 보이게: 먹 링 + 크림 테 */
.float-cta:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 7px var(--cream); }

/* contact */
#contact { color-scheme: dark; }
.contact__sub { margin-top: 16px; color: var(--muted-ink); }
.contact__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(40px, 5vw, 64px);
  margin-top: clamp(32px, 4vw, 56px);
}
.contact__cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-content: start; }
@media (min-width: 768px) {
  .contact__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .contact__body { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px; }
  .contact__form { grid-column: 1 / span 7; }
  .contact__cards { grid-column: 8 / -1; grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 견적 문의 폼 — 빨강 등 새 색 없이 크림 테두리·문구로 오류 표시 */
.inquiry { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media (min-width: 768px) {
  .inquiry { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .field--wide { grid-column: 1 / -1; }
}
.field { min-width: 0; margin: 0; padding: 0; border: 0; }
.field__label { display: block; margin-bottom: 8px; padding: 0; font-size: var(--fs-small); font-weight: 700; }
.field__label > span[aria-hidden], .check span[aria-hidden] { margin-left: 2px; color: var(--lime); }
.field__input {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 11px 15px;
  border: 1px solid var(--muted-ink-2);
  border-radius: 12px;
  background: var(--ink-card);
  color: var(--cream);
  font: inherit;
}
textarea.field__input { resize: vertical; min-height: 128px; }
.field__input[aria-invalid="true"] { border: 2px solid var(--cream); padding: 10px 14px; }
.field__checks { display: flex; flex-wrap: wrap; gap: 0 24px; }
.check { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--lime); }
.check input[aria-invalid="true"] { outline: 2px solid var(--cream); outline-offset: 2px; }
.check--consent { font-weight: 700; }
.inquiry__note { color: var(--muted-ink); font-size: var(--fs-small); }
.field-error { color: var(--cream); font-size: var(--fs-small); font-weight: 700; }
.field-error:not(:empty) { margin-top: 6px; }
.inquiry__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 8px; }
.inquiry__status { flex-basis: 100%; color: var(--cream); font-size: var(--fs-small); font-weight: 700; }
.inquiry__status:empty { display: none; }
/* 스팸 방지 숨은 칸 — 화면 밖으로(display:none이면 일부 봇이 건너뛴다) */
.inquiry__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.inquiry-done {
  padding: clamp(28px, 3vw, 48px);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-card);
  background: var(--ink-card);
}
.inquiry-done__title { margin-top: 24px; }
.inquiry-done__text { margin-top: 12px; color: var(--muted-ink); }
.inquiry-done__reset { margin-top: 28px; }

/* 명함 — 비율 266.25:150, 글자는 카드 폭(cqi)에 비례.
   앞면 버튼·«앞면 보기» 버튼으로만 뒤집는다(카드 전체 클릭 아님). 안 보이는 면은 JS가 inert. */
.bizcard { container-type: inline-size; perspective: 1600px; }
.bizcard__inner { position: relative; aspect-ratio: 266.25 / 150; }
.bizcard__front, .bizcard__back {
  position: absolute;
  inset: 0;
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-card);
  background: var(--ink-card);
  color: var(--cream);
}
.bizcard__front {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4cqi;
  padding: 0;
  font: inherit;
  cursor: pointer;
}
.bizcard__front .logo-mark { --shape: 6cqi; }
.bizcard__stack, .site-footer__stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'Montserrat', 'Noto Sans KR', sans-serif;
  font-weight: 700;
  letter-spacing: var(--ls-wordmark);
  line-height: 1.15;
  /* 넓은 자간의 끝 여백만큼 밀어 가운데를 맞춘다 */
  padding-left: var(--ls-wordmark);
}
.bizcard__stack { font-size: clamp(14px, 5.4cqi, 28px); }
.bizcard__back {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 7cqi 6.5cqi 6cqi;
  font-size: clamp(11px, 3.2cqi, 15px);
  line-height: 1.5;
}
.bizcard__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bizcard__word { font-size: clamp(12px, 4.2cqi, 20px); white-space: nowrap; }
.bizcard__top .logo-mark { --shape: 3.6cqi; flex: none; }
.bizcard__info { display: flex; flex-direction: column; align-items: flex-end; gap: 0.5cqi; text-align: right; min-width: 0; }
.bizcard__head { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-bottom: 1.2cqi; }
.bizcard__name { letter-spacing: 0.2em; }
.bizcard__role { color: var(--muted-ink); }
.bizcard__person { font-size: 1.3em; font-weight: 700; }
.bizcard__addr { color: var(--muted-ink); }
.bizcard__info a { text-decoration: underline; text-decoration-color: var(--muted-ink-2); text-underline-offset: 3px; }
.bizcard__info a:hover { color: var(--lime); }
.bizcard__flip-back {
  min-height: 28px;
  padding: 2px 12px;
  border: 1px solid var(--muted-ink-2);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--cream);
  font: inherit;
  font-size: 0.9em;
  white-space: nowrap;
  cursor: pointer;
}
/* JS 켜짐: 안 보이는 면을 숨긴다 */
.js .bizcard:not(.is-flipped) .bizcard__back,
.js .bizcard.is-flipped .bizcard__front { visibility: hidden; }
/* JS 꺼짐: 앞면 버튼(뒤집기 불가)을 숨기고 뒷면만 */
html:not(.js) .bizcard__front,
html:not(.js) .bizcard__flip-back { display: none; }
/* 회전 전환은 동작 줄이기를 끄지 않은 경우에만 */
@media (prefers-reduced-motion: no-preference) {
  .js .bizcard__inner { transform-style: preserve-3d; transition: transform var(--dur-base) var(--ease-out); }
  .js .bizcard.is-flipped .bizcard__inner { transform: rotateY(180deg); }
  .js .bizcard__front, .js .bizcard__back { backface-visibility: hidden; }
  .js .bizcard__back { transform: rotateY(180deg); }
  .js .bizcard:not(.is-flipped) .bizcard__back,
  .js .bizcard.is-flipped .bizcard__front { visibility: visible; }
}

/* footer */
.site-footer {
  padding-block: clamp(48px, 6vw, 80px);
  border-top: 1px solid var(--ink-line);
  background: var(--ink);
  color: var(--cream);
}
.site-footer__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
.site-footer__logo { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.site-footer__logo .logo-mark { --shape: 22px; }
.site-footer__stack { font-size: 15px; }
.site-footer__name { font-family: 'Montserrat', 'Noto Sans KR', sans-serif; font-weight: 700; letter-spacing: var(--ls-en); }
.site-footer__contact { margin-top: 12px; font-style: normal; font-size: var(--fs-small); color: var(--muted-ink); line-height: 1.8; }
.site-footer__contact a { color: var(--cream); text-decoration: none; }
.site-footer__contact a:hover { color: var(--lime); text-decoration: underline; }
.site-footer__copy { font-size: var(--fs-small); color: var(--muted-ink-2); }
@media (min-width: 1200px) {
  .site-footer__inner { flex-direction: row; align-items: flex-end; gap: 64px; }
  .site-footer__copy { margin-left: auto; }
}