/* v5.93 새 푸터 (참고: kommakomma.is 푸터 구성 + Osmo "Footer Parallax Effect").
   Paper 면 하나. 위에 CTA, 그 아래 4열(연락·메뉴·위치·정보), 맨 아래 화면 폭을 꽉 채우는 BLASSONG 워드마크(Ink, 세리프).
   패럴랙스: main.js setupFooter가 스크롤 진행률로 .pl-footer__inner를 translateY(-25%→0), .pl-footer__shade(Ink 단색 면)를 opacity .5→0으로 바꾼다.
   색은 팔레트만(그레이디언트·그림자 없음). 이전 푸터(파노라마 사진 포함)는 design-archive/footer-2026-10/. */

.pl-footer {
  --foot-gutter: var(--page-gutter);
  --foot-rule: color-mix(in srgb, var(--color-ink) 18%, transparent);
  position: relative;
  margin-top: -1px;
  overflow: hidden;
  background: var(--color-paper);
  color: var(--color-ink);
}

.pl-footer a:focus-visible,
.pl-footer button:focus-visible {
  outline-color: var(--color-ink);
}

/* 패럴랙스로 움직이는 안쪽. 맨 아래 여백은 하단 고정 바(언어·서울 시간)에 워드마크가 가리지 않게 그 높이만큼 둔다. */
.pl-footer__inner {
  display: flex;
  flex-direction: column;
  padding: clamp(3.5rem, 6vw, 5.5rem) var(--foot-gutter) calc(var(--utility-bar-height, 3.25rem) + 0.75rem);
  will-change: transform;
}

/* Osmo처럼 푸터 위를 덮는 Ink 단색 면(그레이디언트 아님). 기본은 투명 — 스크립트가 없거나 동작 줄이기이면 덮지 않는다. */
.pl-footer__shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--color-ink);
  opacity: 0;
  pointer-events: none;
}

/* ---- CTA ---- */
.pl-footer__talk {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 3rem;
  flex-wrap: wrap;
  margin-bottom: clamp(2.5rem, 4.5vw, 4rem);
}

.pl-footer__claim {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, calc(1rem + 2vw), 3rem);
  font-weight: 200;
  letter-spacing: -0.025em;
  line-height: 1.12;
  word-break: keep-all;
}

.pl-footer__claim span,
.pl-footer__claim em {
  display: block;
}

.pl-footer__claim em {
  font-style: italic;
  font-weight: 200;
}

html[lang="ko"] .pl-footer__claim {
  letter-spacing: -0.028em;
}

.pl-footer__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.5rem;
  border: 1px solid var(--color-ink);
  border-radius: 999px;
  background: transparent;
  color: var(--color-ink);
  cursor: pointer;
  font-family: var(--font-pretendard);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.pl-footer__cta-arrow {
  display: inline-flex;
  width: 11px;
  height: 11px;
}

.pl-footer__cta-arrow svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

@media (hover: hover) and (pointer: fine) {
  .pl-footer__cta:hover {
    background: var(--color-ink);
    color: var(--color-paper);
  }
}

.pl-footer__cta:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 3px;
}

/* ---- 4열 ----
   화면에 들어오면 JS가 .site-foot에 is-visible을 붙이고(.reveal 관찰자 공용), 글자는 줄 마스크에서 올라온다. */
.site-foot {
  --foot-gap: clamp(1.5rem, 3vw, 3rem);
  color: var(--color-ink);
}

.site-foot__grid {
  display: grid;
  gap: 2.75rem var(--foot-gap);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-top: clamp(1.5rem, 2.4vw, 2.25rem);
  border-top: 1px solid var(--foot-rule);
}

.site-foot__cell {
  --d: calc(var(--i, 0) * 70ms);
  display: flex;
  min-width: 0;
  gap: 1.5rem;
  flex-direction: column;
  word-break: keep-all;
}

/* 작은 라벨(참고 사이트의 회색 대문자). 잉크 70% — 밝은 면에서 읽히는 대비를 유지한다. */
.site-foot__label {
  margin: 0;
  color: color-mix(in srgb, var(--color-ink) 70%, transparent);
  font-family: var(--font-pretendard);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-transform: uppercase;
}

.site-foot__stack {
  display: flex;
  gap: 1rem;
  flex-direction: column;
}

/* 칸(flex column) 안에서 링크·복사 버튼이 칸 폭으로 늘어나지 않게 — click to copy가 이메일 글자 위 가운데에 오도록 */
.site-foot .roll-link {
  align-self: flex-start;
}

.site-foot__links {
  display: flex;
  margin: 0;
  padding: 0;
  gap: 0.4rem;
  flex-direction: column;
  list-style: none;
}

/* 메뉴 링크는 roll-link(이메일·인스타그램)와 같은 글자 크기·굵기로 맞춘다. */
.site-foot__link,
.site-foot__legal-link {
  display: block;
  width: max-content;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-family: var(--font-pretendard);
  font-size: clamp(1.125rem, calc(1.085rem + 0.165vw), 1.25rem);
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.site-foot__link:hover,
.site-foot__link:focus-visible,
.site-foot__legal-link:hover,
.site-foot__legal-link:focus-visible {
  color: var(--color-dusty);
}

.site-foot__legal-link {
  font-size: 0.875rem;
  font-weight: 400;
}

.site-foot__legal-link .foot-line__in {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-foot__address,
.site-foot__time,
.site-foot__copyright {
  margin: 0;
  font-family: var(--font-pretendard);
  font-size: 0.9375rem;
  font-style: normal;
  line-height: 1.6;
}

.site-foot__copyright {
  font-size: 0.875rem;
}

/* 어드민에서 넣은 줄바꿈을 그대로 보인다. */
.site-foot__address {
  white-space: pre-line;
}

.site-foot__address[hidden] {
  display: none;
}

.site-foot__time time {
  font-variant-numeric: tabular-nums;
}

/* 줄 마스크: 글자 줄을 overflow hidden 안에 두고 아래(112%)에서 올린다. 칸 --i × 70ms, 목록 항목 --k × 50ms 지연. */
.foot-line {
  display: block;
  margin-bottom: -0.1em;
  padding-bottom: 0.1em;
  overflow: hidden;
}

.foot-line__in {
  display: block;
}

.js .site-foot .foot-line__in {
  transform: translateY(112%);
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 70ms + var(--k, 0) * 50ms);
}

.js .site-foot.is-visible .foot-line__in {
  transform: none;
}

/* 이메일·인스타그램(roll-link)의 글자별 진입: 메뉴와 같다. 1s cubic-bezier(.16,1,.3,1), 글자 순번 × 25ms, 140%에서 올라온다. (v5.92까지의 규칙 그대로) */
.js .site-foot .roll-char__in {
  transform: translateY(var(--rise, 140%));
}

.js .site-foot.is-visible .roll-char__in {
  transform: none;
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--d, 0s) + var(--c) * 25ms);
}

/* "click to copy" 작은 문구는 이메일 글자가 올라오기 시작한 뒤 따라 올라온다(translate는 복사 전환의 transform과 따로 움직인다). */
.js .site-foot .roll-link__copy-label {
  translate: 0 120%;
  transition: transform 0.45s var(--ease-premium), opacity 0.45s var(--ease-premium), translate 1s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--d, 0s) + 0.2s);
}

.js .site-foot.is-visible .roll-link__copy-label {
  translate: none;
}

/* ---- 워드마크 ----
   main.js가 --wm-size(px)와 잉크 경계 보정값(--wm-left·--wm-top·--wm-h, em 비율)을 넣어 글자 잉크의 왼쪽·오른쪽 끝이 좌우 여백(--foot-gutter)에 정확히 닿게 한다.
   아래 기본값은 스크립트 전 근사값(vw)이다. */
.pl-footer__wordmark {
  --wm-size: 21.4vw;
  --wm-left: -0.03;
  --wm-top: -0.17;
  --wm-h: 0.7;
  height: calc(var(--wm-size) * var(--wm-h));
  margin-top: clamp(2.5rem, 5vw, 5rem);
  color: var(--color-ink);
}

.pl-footer__wordmark-text {
  display: block;
  margin-top: calc(var(--wm-size) * var(--wm-top));
  margin-left: calc(var(--wm-size) * var(--wm-left));
  font-family: var(--font-serif);
  font-size: var(--wm-size);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1;
  white-space: nowrap;
  /* 글자 상자(line-height 1)는 잉크보다 위로 삐져나와 위쪽 링크를 덮을 수 있다 — 장식이므로 클릭을 통과시킨다. */
  pointer-events: none;
  user-select: none;
}

/* ---- 반응형 ---- */
@media (max-width: 1024px) {
  .site-foot__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .pl-footer__inner {
    padding-top: 3.5rem;
  }

  .site-foot__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
  }

  .pl-footer__cta {
    padding: 0.85rem 1.25rem;
  }
}

/* v5.95 PC 연락 칸: "클릭해서 복사"를 이메일 위 왼쪽 정렬로 흐름에 두어 다른 칸의 첫 줄과 위 높이를 맞추고,
   오른쪽에 아래 화살표(↓ = 아래 이메일을 누르면 복사). 이메일과 인스타그램 사이 간격을 넓힌다. */
@media (min-width: 1025px) {
  .site-foot__contact .site-foot__stack {
    gap: 2.75rem;
  }

  .site-foot__contact .roll-link--copy {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.7rem;
  }

  .site-foot__contact .roll-link__copy-state {
    position: static;
    display: inline-grid;
    grid-template-columns: auto auto;
    column-gap: 0.4em;
    align-items: center;
    justify-items: start;
    text-align: left;
    transform: none;
  }

  .site-foot__contact .roll-link__copy-label {
    grid-column: 1;
    grid-row: 1;
  }

  .site-foot__contact .roll-link__copy-state::after {
    grid-column: 2;
    grid-row: 1;
    content: "↓";
    font-weight: 400;
  }
}

/* v5.99 모바일·태블릿 연락 칸: "클릭해서 복사"(이메일 바로 위 작은 문구)를 왼쪽 정렬, 문구–이메일 간격(3px)은 그대로,
   문구 위(CONTACT 라벨과의 사이)를 더 띄우고, 이메일–인스타그램 사이와 인스타그램 아래를 더 띄운다. */
@media (max-width: 1024px) {
  .site-foot__contact .site-foot__stack {
    gap: 2.25rem;
    padding-bottom: 0.75rem;
  }

  .site-foot__contact .roll-link--copy {
    margin-top: 1.35rem;
  }

  .site-foot__contact .roll-link__copy-state {
    left: 0;
    justify-items: start;
    text-align: left;
    transform: none;
  }
}