/* 스킨-B — 고정된 좌우 틀 사이로 사진만 흐른다.
   aireaire.studio 의 틀, Canva 시안의 내용.

   `main.css` 위에 얹는 한 겹이다. 여기 없는 것은 전부 스킨-A 의 값을 그대로 쓴다 —
   그래서 문의 폼처럼 손대지 않은 화면도 같이 옷을 갈아입는다.

   임계값은 이 위쪽에 모아 둔다. 실사용하며 튜닝할 값들이다. */

/* 시안이 쓰는 글꼴. 저장소에 담아 두고 외부 CDN 을 부르지 않는다 — 첫 화면에
   걸리는 글꼴이라 남의 서버가 느린 날 우리 첫인상이 같이 느려진다.
   **스킨-B 의 틀에서만 쓴다.** 본문 글꼴은 그대로 Pretendard 다. */
/* 시안이 Canva 에서 쓴 글꼴이 Cinzel 이다. **가변 글꼴이라 한 파일에 400~700 이
   다 들어 있다** — EB Garamond 는 굵기마다 파일이 따로였고 그래서 중간 굵기를
   못 만들었다. 여기서는 브라우저가 사이 굵기를 만들어 준다. */
@font-face {
  font-family: "Cinzel Local";
  src: url("../fonts/cinzel.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

.skin-b {
  --b-ground: #fff;     /* 시안의 바탕이 순백이다 (Canva 페이지 배경 rgb(255,255,255)) */
  --b-ink: #000;        /* 시안의 글자도 순검정이다 */
  --b-soft: #8a8a8a;
  --b-faint: #d8d8d8;

  --b-gutter: clamp(1.4rem, 5vw, 4.5rem);
  --b-rail: clamp(9rem, 17vw, 15rem);   /* 좌우 틀이 차지하는 폭 */

  /* 시안(1405×768 페이지)에서 직접 잰 값이다. 전에는 "화면에서 작게 읽힌다"고
     한 단계 키워 뒀는데, 시안과 같게 하는 것이 요구라 잰 값으로 되돌린다.
     글자 크기를 페이지 **가로 폭** 기준으로 잡는다 — 자리도 가로 폭 기준이라
     같이 움직여야 창이 커져도 시안과 같은 화면이 된다.
     창이 좁아져도 읽히는 크기 아래로는 안 내려간다. */
  --b-serif: "Cinzel Local", Georgia, "Times New Roman", serif;
  --b-name: clamp(1.15rem, 1.898vw, 2.1rem);  /* MAEY, 시안 26.7px / 1405 */
  --b-line: clamp(0.92rem, 1.329vw, 1.5rem);  /* 이름 아래 한 줄, 시안 18.7px */
  --b-nav:  clamp(1rem, 1.518vw, 1.7rem);     /* 목차 3줄, 시안 21.3px */

  /* 모션은 느리다. 사진을 보러 온 화면이라 움직임이 먼저 눈에 띄면 안 되고,
     느린 것이 급한 것보다 비싸 보인다. 한 곳에서 조절한다. */
  --b-ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* 마우스에 반응하는 것. **들어오는 것보다 훨씬 빠르다.**
     사람이 보고 있는 동안은 느려도 되지만, 사람이 한 행동에 대한 답은 빨라야 한다 —
     1.1초로 뒀더니 우아한 것이 아니라 안 눌리는 것으로 읽혔다. */
  --b-slow: 350ms;
  --b-enter: 2600ms;   /* 이름이 들어오는 것 */
  /* **목차는 이름이 다 선 다음, 사이를 두지 않고 이어서 나온다.**
     둘이 겹쳐 들어오면 어느 쪽을 봐야 하는지 정해지지 않은 채로 화면이 흔들리고,
     사이가 뜨면 화면이 멈춘 것으로 읽힌다.

     **여기서 기다리는 것은 애니메이션의 길이가 아니라 눈에 끝나 보이는 시각이다.**
     `--b-ease` 는 앞이 급하고 뒤가 긴 곡선이라, 2.6초짜리라도 1.4초면 98% 가
     끝나 있다. 그 길이를 다 기다렸더니 뒤의 1.2초가 통째로 빈 시간이 되어
     목차가 한참 뒤에 따로 나오는 것처럼 보였다 — 재보고 알았다.
     0.542 가 그 98% 지점이다. `--b-enter` 를 고치면 이 값도 같이 움직인다. */
  --b-nav-after: calc(var(--b-enter) * 0.542);
  --b-nav-in: 1900ms;
  --b-nav-step: 260ms;  /* 세 줄이 차례로 서는 간격 */
  /* 목차가 시작하는 색. 검정에서 시작하면 '들어온다'가 아니라 '켜진다'로 읽힌다. */
  --b-nav-start: #c9c9c9;

  background: var(--b-ground);
  color: var(--b-ink);
}

/* 스킨-B 는 글자가 적다. 그만큼 하나하나가 크게 읽히므로 자간을 조인다. */
.skin-b,
.skin-b .site-header,
.skin-b .site-footer {
  letter-spacing: -0.01em;
}

/* 틀의 글자는 시안과 같은 세리프로 간다. 본문(문의 폼 등)은 건드리지 않는다. */
.bframe { font-family: var(--b-serif); }

/* 상단 오른쪽 문의 링크는 숨긴다. 목차의 Kontakt 가 같은 곳으로 가므로
   같은 화면에서 같은 행동을 두 번 권하는 것이 된다. */
.skin-b .header-inquiry { display: none; }

/* 언어 토글과 저작권 줄을 화면에서 뺀다. 시안에 둘 다 없다.
   **마크업에서 지우지 않는다** — 스킨-A 는 그대로 쓰고, `hreflang` 과 `/en` 주소는
   손대지 않았으므로 영문 페이지는 그대로 살아 있다. 다만 스킨-B 에서는 화면에
   언어를 바꿀 손잡이가 없어진다. */
.skin-b .lang-toggle,
.skin-b .site-footer { display: none; }

/* 왼쪽 위 표식은 물러선다. 이름은 틀의 왼쪽 아래가 말하고, 이것은 홈으로 가는
   손잡이일 뿐이라 목차와 같은 농도로 서면 넷째 항목처럼 읽힌다.
   `currentColor` 로 그린 SVG 라 색 하나로 같이 옅어진다. */
.skin-b .wordmark { color: #c9c9c9; transition: color var(--b-slow) var(--b-ease); }
.skin-b .wordmark:hover,
.skin-b .wordmark:focus-visible { color: var(--b-ink); }

/* **움직이는 것은 사진뿐이다.** 헤더는 제자리에 못 박는다 — 좌우 틀만 고정하고
   위가 흘러가면 화면의 절반은 서 있고 절반은 지나가서, 고정이 의도가 아니라
   덜 만든 것처럼 보인다. */
.skin-b .site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  background: transparent;
  border: 0;
}

/* 헤더 왼쪽은 **표식만** 선다. 이름은 틀의 왼쪽이 이미 말하고 있어서, 글줄을 같이
   두면 같은 화면에서 이름을 두 번 읽게 된다. 홈에서도 뺐다 넣었다 하지 않는다 —
   좌우가 고정된 화면에서 그 한 칸만 페이지마다 달라지면 깜빡이는 것처럼 보인다. */
.skin-b .wordmark-lines { display: none; }

/* --- 틀 ------------------------------------------------------------------ */
/* 좌우가 화면에 붙어 있고 사진이 그 사이로 지나간다. 스크롤해도 이름과 목차는
   제자리에 있으므로 어느 페이지에서도 길을 잃지 않는다. */

/* 틀은 화면 전체를 덮되 글자만 잡는다. 그 사이 빈 곳으로는 사진을 눌러야 하므로
   통과시킨다. 자리는 시안(maeydemo.my.canva.site) 화면에서 직접 재서 옮겼다 —
   1456×818 기준 값을 비율로 바꾼 것이라 창 크기가 달라도 같은 자리에 선다. */
.bframe {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.bframe__mark,
.bframe__index { position: absolute; pointer-events: auto; }

/* 이름은 왼쪽 아래. 시안(1405×768)에서 아래 줄의 왼끝이 9.87%,
   그 줄의 밑선이 페이지 바닥에서 6.06% 자리다. */
.bframe__mark {
  left: 9.87%;
  bottom: 6.06vh;
  display: grid;
  gap: 0;
  line-height: 1.355;
  color: var(--b-ink);
  white-space: nowrap;
}

/* 아래 줄보다 한 칸 들여 선다. 시안에서 MAEY 의 왼끝이 11.83%,
   아래 줄보다 1.96% 안쪽이다 — 27.5px, 이 글자 크기의 1.03배. */
.bframe__mark strong {
  margin-left: 1.03em;
  font-weight: 400;
  font-size: var(--b-name);
  letter-spacing: 0;
}

.bframe__mark span {
  font-size: var(--b-line);
  letter-spacing: 0;
  color: var(--b-ink);
}

/* 목차는 오른쪽 위. 세 줄이 오른끝을 서로 어긋나게 맞춰 계단을 만든다.
   시안에서 첫 줄의 윗선이 페이지 높이의 22.65% 자리이고, 세 줄은 사이를 벌리지
   않고 붙어 내려간다 — 줄 간격이 곧 글자 상자 높이(1.355배)다. */
.bframe__index {
  right: 7.44%;
  top: 22.65vh;
  display: grid;
  gap: 0;
  line-height: 1.355;
  text-align: right;
  font-size: var(--b-nav);
  letter-spacing: 0;
  white-space: nowrap;
}

/* 두 벌(보통·굵게)을 같은 자리에 겹쳐 두고 **서로 교대시킨다.** 보통 굵기가
   물러나는 만큼 굵은 것이 올라온다.

   Cinzel 은 가변 글꼴이라 굵기를 그냥 바꿔도 되지만, 그러면 마우스를 올릴 때마다
   글자가 넓어지며 목차가 좌우로 흔들린다. 두 사본 모두 흐름 밖(절대 배치)이라
   굵어져도 상자가 안 넓어지고, 오른끝을 붙잡고 있으므로 왼쪽으로만 자란다.

   글자 자체는 투명하게 두고 자리만 잡게 한다. 눈에 보이는 것은 두 사본이고,
   실제 글자는 화면 낭독기와 글자 선택을 위해 그대로 있다. */
.bframe__index a {
  position: relative;
  text-decoration: none;
  color: transparent;
}

.bframe__index a::before,
.bframe__index a::after {
  content: attr(data-label);
  position: absolute;
  top: 0;
  right: 0;                /* 오른끝을 붙잡는다. 굵어지며 넓어지는 만큼 왼쪽으로 자란다 */
  white-space: nowrap;
  color: var(--b-ink);
  transition: opacity var(--b-slow) var(--b-ease);
  pointer-events: none;
}

.bframe__index a::before { font-weight: 400; opacity: 1; }
.bframe__index a::after  { font-weight: 700; opacity: 0; }

/* 지금 페이지 표시는 기기와 무관하다. 마우스 반응만 마우스가 있는 기기로 한정한다 —
   터치에서는 탭이 hover 를 켜고 그 상태가 손을 뗀 뒤에도 남는다. */
.bframe__index a:focus-visible::before,
.bframe__index a[aria-current="page"]::before { opacity: 0; }

.bframe__index a:focus-visible::after,
.bframe__index a[aria-current="page"]::after { opacity: 1; }

@media (hover: hover) and (pointer: fine) {
  .bframe__index a:hover::before { opacity: 0; }
  .bframe__index a:hover::after { opacity: 1; }
}

/* 계단은 `margin` 으로 만들지 않는다. 이 상자는 내용 폭으로 잡히므로 여백을 주면
   글자가 왼쪽으로 넘칠 뿐 오른끝이 움직이지 않는다 — 실제로 그렇게 나왔다.
   자리를 옮기는 것이 목적이니 옮기는 속성을 쓴다. 창 폭에 비례해야 어느 크기에서도
   같은 계단이 되므로 `vw` 로 잡는다 (시안 1456px 기준 110 · 159px). */
.bframe__index a:nth-child(1) { position: relative; right: 7.36vw; }
.bframe__index a:nth-child(2) { position: relative; right: 10.83vw; }

/* 폭을 따로 잡아 둘 필요가 없다. 두 사본이 모두 흐름 밖(절대 배치)이라 굵어져도
   상자가 넓어지지 않고, 오른끝을 붙잡고 있으므로 왼쪽으로만 자란다. */



/* --- 사진 ---------------------------------------------------------------- */
/* 판마다 자기 자리·크기·앞 판과의 간격을 갖는다 (`app/skins.py` 의 PLACEMENTS).
   **간격이 음수인 판은 앞 판이 끝나기 전에 시작한다** — 그래서 한 화면에 두 장이
   나란히 선다. 한 줄로 내려가는 열로는 만들 수 없는 것이다.

   셋 다 화면 가로 폭 기준이다. 판의 높이가 폭에서 나오므로, 간격만 세로 기준으로
   재면 창 모양이 바뀔 때 사진은 그대로인데 사이만 벌어진다. */

/* **좌우 여백을 두지 않는다.** 판의 `x` 와 `w` 는 시안에서 페이지 **전체 폭** 기준으로
   잰 값인데, 여기에 여백이 있으면 그 안쪽 폭이 기준이 되어 사진이 조금씩 안으로
   밀리고 좁아진다 — 재보니 24.7% 로 적은 판이 22.0% 로 나왔다.
   좁은 화면에서는 아래 규칙이 여백을 다시 넣는다. */
.bstream {
  position: relative;
  z-index: 1;
  /* 첫 사진 위와 마지막 사진 아래도 시안에서 잰 값이다 (페이지 위에서 100px,
     아래로 137px, 페이지 폭 1268 기준). 세로 여백을 %로 주면 가로 폭에 대해
     풀리므로 사진과 같은 비율로 함께 자란다. */
  padding: 7.89% 0 10.8%;
}

.bplate {
  margin: 0;
  width: calc(var(--w, 22) * 1%);
  margin-inline: calc(var(--x, 39) * 1%) 0;
  /* **세로 여백인데 단위가 %다.** CSS 는 세로 여백의 %도 containing block 의
     **가로 폭**으로 푼다. 보통은 함정으로 불리는 성질인데 여기서는 정확히 그것이
     필요하다 — 판의 높이가 폭에서 나오므로 간격도 폭을 따라야 한다.
     `vw` 로 두면 스크롤바 폭만큼 어긋난다 (x·w 는 칸 기준, vw 는 창 기준). */
  margin-top: calc(var(--gap, 6) * 1%);
}

/* 첫 판의 간격은 쓰지 않는다. 위쪽 여백은 `.bstream` 이 잡는다. */
.bstream .bplate:first-child { margin-top: 0; }

.bplate img {
  display: block;
  width: 100%;
  height: auto;
  background: rgba(28, 28, 28, 0.04);
}

/* 아직 안 채운 자리. 빈 칸이 아니라 **무엇을 넣어야 하는지 말하는 칸**이다.
   파일을 `static/skins/b/photos/` 에 넣으면 그 자리가 사진으로 바뀐다. */
.bplate.is-empty {
  aspect-ratio: 3 / 4;
  display: grid;
  place-content: center;
  border: 1px dashed var(--b-faint);
  background: rgba(28, 28, 28, 0.015);
}

.bplate__name {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--b-soft);
  word-break: break-all;
  padding: 0 0.8em;
  text-align: center;
}

/* --- das Produkt 목차 ---------------------------------------------------- */

.bindex {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: clamp(2rem, 6vh, 4rem);
  padding: 6rem var(--b-gutter);
}

/* 가운데 제목은 화면에서 뺀다. 오른쪽 목차가 지금 어느 화면인지 이미 굵게
   말하고 있어서, 같은 말을 가운데에 한 번 더 두면 사진이 설 자리만 줄어든다.

   **마크업에서 지우지는 않는다.** 지우면 이 페이지에 제목이 하나도 없게 되고,
   스크린리더와 검색엔진은 무엇에 관한 화면인지 알 방법을 잃는다. 눈에만 안 보인다. */
.bindex__head,
.bbook__head {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.bindex__list { display: grid; gap: clamp(0.7rem, 2vh, 1.3rem); }

.bindex__list a {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.1em;
  align-items: baseline;
  text-decoration: none;
  color: var(--b-soft);
  transition: color 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.bindex__list b {
  font-size: clamp(1.9rem, 4.5vw, 3.4rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--b-faint);
}

.bindex__list em { font-style: normal; }

.bindex__list a:focus-visible,
.bindex__list a:focus-visible b { color: var(--b-ink); }

@media (hover: hover) and (pointer: fine) {
  .bindex__list a:hover,
  .bindex__list a:hover b { color: var(--b-ink); }
}

/* --- 종목 상세 ------------------------------------------------------------ */
/* 왼쪽에 글, 오른쪽에 사진이 나란히 선다 (시안 Canva page-3·4·5).
   오른쪽 끝 4분의 1은 비워 둔다 — 고정 목차가 서는 자리다.

   처음에는 글을 두 화면 고정으로 세우고 그 뒤에 사진을 흘렸다. 시안은 그렇지 않다:
   무엇을 주는지와 얼마인지가 한 흐름에 있어서 값을 보려고 스크롤을 두 번 하지 않는다. */

.bdetail {
  position: relative;
  z-index: 1;
  display: grid;
  /* 사진 칸은 시안에서 재서 옮겼다 — page-3 에서 460/1770, page-5 에서 450/1870,
     둘 다 뷰포트의 4분의 1이다. 왼끝은 48% 자리에 그대로 서고 오른쪽만 줄어든다.
     33% 로 뒀을 때는 사진이 글보다 무거워서 값을 읽기 전에 사진부터 봤다. */
  grid-template-columns: 42% 25%;
  gap: 0 3%;
  align-items: start;
  padding: clamp(5rem, 12vh, 9rem) 0 clamp(8rem, 20vh, 14rem) 3%;
}

/* 글은 자기 칸 안에서 가운데로 모인다. 왼끝을 맞추면 줄 길이가 제각각인 것이
   그대로 드러나서, 값을 말하는 화면이 서식 없는 목록처럼 보인다. */
.bdetail__copy {
  text-align: center;
  display: grid;
  gap: clamp(1.6rem, 4vh, 2.8rem);
}

.bdetail__title {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.6em;
  margin: 0;
  font-weight: 400;
}

/* 번호가 이 화면에서 가장 큰 글자다. 이름은 그 옆에 작게 붙어 무엇인지만 말한다. */
.bdetail__title b {
  font-size: clamp(2.6rem, 5.4vw, 4.4rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1;
}

.bdetail__title em {
  font-style: normal;
  font-size: clamp(0.95rem, 1.25vw, 1.15rem);
  color: var(--b-ink);
}

.bdetail__lede { display: grid; gap: 0.9em; }

.bdetail__lede p {
  margin: 0;
  font-size: clamp(1.1rem, 1.6vw, 1.5rem);
  line-height: 1.4;
}

.bdetail__body {
  display: grid;
  gap: 1.9em;
  font-size: clamp(0.9rem, 1.15vw, 1.05rem);
  line-height: 1.65;
}

.bdetail__body p { margin: 0; }
.bdetail__body b { font-weight: 400; }
.bdetail__body span,
.bdetail__body .is-quiet { display: block; }

.bdetail__body dl {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.4em 2em;
  margin: 0;
  text-align: left;
}
.bdetail__body dd { margin: 0; }

.bdetail__price {
  margin: clamp(1.5rem, 5vh, 3.5rem) 0 0;
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  letter-spacing: 0.01em;
}

.bdetail__price small {
  display: block;
  margin-top: 0.9em;
  font-size: clamp(0.85rem, 1.05vw, 0.98rem);
  letter-spacing: 0;
}

/* 사진은 글과 나란히 내려간다. 흩뿌리지 않는다 — 두 칸으로 세우는 화면이다. */
.bdetail__photos {
  display: grid;
  gap: clamp(4rem, 11vh, 9rem);
}

.bdetail__photos .bplate {
  margin: 0;
  width: 100%;
}

/* 첫 장은 위에서 잘려 들어온다. 시안에서 그 자리가 화면 위로 걸쳐 있다. */
.bdetail__photos .bplate:first-child { margin-top: clamp(-6rem, -9vh, -3rem); }

/* 002 의 "장소 및 시간 별도 문의" 처럼 오른쪽에 따로 서는 한 줄. */
.bdetail__aside {
  grid-column: 2;
  justify-self: end;
  margin-top: clamp(2rem, 6vh, 4rem);
  font-size: clamp(0.85rem, 1.05vw, 0.98rem);
  text-align: right;
}
.bdetail__aside p { margin: 0; }

@media (max-width: 860px) {
  .bdetail {
    grid-template-columns: 1fr;
    gap: clamp(3rem, 9vh, 6rem);
    padding-inline: var(--b-gutter);
  }
  .bdetail__photos .bplate:first-child { margin-top: 0; }
  .bdetail__aside { grid-column: 1; justify-self: center; text-align: center; }
}

/* --- das Fotobuch -------------------------------------------------------- */

.bbook {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  display: grid;
  align-content: center;
  gap: clamp(2rem, 6vh, 3.5rem);
  padding: 7rem var(--b-gutter);
  justify-items: center;
}

.bspread {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  /* 다섯 장이 붙어 있으면 한 장의 긴 띠로 읽힌다. 사이를 벌려 **다섯 장**으로
     보이게 한다. */
  gap: clamp(1.4rem, 3vw, 3rem);
  width: 100%;
  max-width: 82rem;
  align-items: center;
}

/* 크기가 같으면 필름 띠가 된다. 레퍼런스(aireaire.studio/studio)는 한 줄 안에서
   폭이 제각각이고 세로도 조금씩 어긋나 있다 — 재보면 80·142·156·164·133 이고
   y 가 141~187 로 흩어져 있다. 그 어긋남이 '늘어놓은 것'과 '놓아둔 것'을 가른다.

   가운데가 가장 크고 양 끝으로 갈수록 작아진다. 펼침면의 주인공이 가운데다. */
.bspread .bplate {
  margin: 0;
  width: 100%;
  justify-self: center;
}

.bspread .bplate:nth-child(1) { width: 62%; transform: translateY(2.4rem); }
.bspread .bplate:nth-child(2) { width: 88%; transform: translateY(-0.9rem); }
.bspread .bplate:nth-child(3) { width: 100%; }
.bspread .bplate:nth-child(4) { width: 84%; transform: translateY(1.3rem); }
.bspread .bplate:nth-child(5) { width: 58%; transform: translateY(-1.8rem); }

.bspread .bplate img { aspect-ratio: 3 / 4; object-fit: cover; }

/* 양 끝은 물러나고 가운데가 앞에 온다. */
.bspread .bplate:first-child,
.bspread .bplate:last-child { opacity: 0.32; }
.bspread .bplate:nth-child(2),
.bspread .bplate:nth-child(4) { opacity: 0.72; }

@media (prefers-reduced-motion: no-preference) {
  .bspread .bplate { transition: opacity var(--b-slow) var(--b-ease); }
}

@media (hover: hover) and (pointer: fine) {
  .bspread:hover .bplate { opacity: 1; }
}

/* --- Kontakt ------------------------------------------------------------- */
/* 사진 한 장과 연락처 세 줄. 가운데로 모은다 — 고를 것이 셋뿐이라 늘어놓을 이유가 없다. */

.bkontakt {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: clamp(2rem, 5vh, 3.2rem);
  padding: clamp(6rem, 14vh, 10rem) var(--b-rail);
}

.bkontakt .bplate {
  margin: 0;
  width: clamp(15rem, 26vw, 24rem);
}

.bkontakt .bplate img { aspect-ratio: 3 / 4; object-fit: cover; }

.bkontakt__links {
  display: grid;
  gap: 0.5em;
  text-align: center;
  font-size: var(--b-nav);
  font-variant: small-caps;
  letter-spacing: 0.02em;
}

.bkontakt__links p { margin: 0; }

/* 누를 수 있다는 것은 밑줄이 아니라 **반응**으로 말한다. 밑줄은 세리프 소문자
   대문자 조판의 밑선을 끊어 이 화면의 결을 깬다. */
.bkontakt__links a {
  text-decoration: none;
  color: var(--b-ink);
  opacity: 0.72;
  transition: opacity var(--b-slow) var(--b-ease);
}

.bkontakt__links a:focus-visible { opacity: 1; }

@media (hover: hover) and (pointer: fine) {
  .bkontakt__links a:hover { opacity: 1; }
}

@media (max-width: 860px) {
  .bkontakt { padding-inline: var(--b-gutter); }
  .bkontakt .bplate { width: min(70vw, 20rem); }
}

/* --- 좁은 화면 ----------------------------------------------------------- */
/* 고정 틀은 폭이 있어야 성립한다. 폰에서 같은 값을 쓰면 좌우 틀이 사진을 덮고,
   흩뿌린 판은 양쪽으로 흘러넘친다. 틀을 풀고 한 줄로 돌아온다. */

@media (max-width: 860px) {
  /* **틀만 풀고 안의 글자를 안 풀었던 것이 폰이 깨진 원인이다.** 이름과 목차가
     `absolute` 인 채로 남아 문서 기준으로 떠버렸다 — 목차는 화면 밖(x 1039)에
     있었고 이름은 사진 밑에 깔렸다. 재보고 알았다. 여기서는 전부 흐름으로 되돌린다. */
  .bframe {
    position: static;
    display: grid;
    gap: 1.1rem;
    padding: 4.2rem var(--b-gutter) 0;
    pointer-events: auto;
  }

  .bframe__mark,
  .bframe__index {
    position: static;
    text-align: left;
  }

  .bframe__mark { margin-left: 0; }
  .bframe__mark strong { margin-left: 0; }

  /* 계단은 폭이 있어야 성립한다. 폰에서는 그냥 왼끝을 맞춘 세 줄이다. */
  .bframe__index a:nth-child(1),
  .bframe__index a:nth-child(2) { right: 0; }

  /* 굵기 사본도 왼끝에 붙인다. 오른끝 기준인 채로 두면 글자가 오른쪽 끝에 선다. */
  .bframe__index a::before,
  .bframe__index a::after { right: auto; left: 0; }

  /* 흩뿌리기를 그만두므로 좌우 여백을 되돌린다. 사진이 화면 끝에 붙으면 안 된다. */
  .bstream { padding-inline: var(--b-gutter); }

  /* 폰에서는 흩뿌리지 않고 한 줄로 내려간다. 겹쳐 세우는 간격도 함께 푼다 —
     폭이 없으면 두 장이 나란히 설 자리가 없고, 음수 간격은 사진을 포개기만 한다. */
  .bplate {
    width: 100%;
    margin-inline: auto;
    margin-top: clamp(3rem, 12vw, 6rem);
    max-width: 34rem;
  }

  /* 다섯이 한 줄에 서면 읽을 수 없는 크기가 된다. 옆으로 넘기는 띠로 바꾼다. */
  .bspread {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 58vw;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .bspread::-webkit-scrollbar { display: none; }
  /* 옆으로 넘기는 띠에서는 크기 변주와 세로 어긋남을 푼다. 한 장씩 보는
     화면이라 어긋나 있으면 잘못 놓인 것으로 보인다. */
  .bspread .bplate {
    scroll-snap-align: center;
    width: 100%;
    transform: none;
  }
}


/* --- 모션 ---------------------------------------------------------------- */
/* 두 가지만 움직인다. 더 넣지 않는다 — 사진을 보러 온 화면에서 움직이는 것이
   늘어나면 사진이 아니라 움직임을 보게 된다.

     글자   틀이 자리를 잡는 순서를 보여준다. 왼쪽에서 제자리로 한 번.
     사진   "이 사진이 지금 도착했다"를 말한다. 작게 들어와 제 크기가 된다.

   `transform` 과 `opacity` 만 건드린다. 그 둘만이 레이아웃을 다시 계산하지 않는다.
   움직임을 원하지 않는다고 말한 사람에게는 아무것도 움직이지 않는다. */

@media (prefers-reduced-motion: no-preference) {

  /* 글자 — 왼쪽에서 들어와 제자리에 선다. 한 번뿐이고 반복하지 않는다. */
  @keyframes b-slide-in {
    from { opacity: 0; transform: translateX(-2.2rem); }
    to   { opacity: 1; transform: none; }
  }

  /* 목차는 옅은 회색에서 검정으로 짙어지며 들어온다. 검정에서 시작하면 글자가
     '들어온다'가 아니라 '켜진다'로 읽힌다. 색은 사본이 들고 있으므로 사본을
     칠한다 — `a` 자신은 투명한 자리표시자다. */
  @keyframes b-nav-ink {
    from { color: var(--b-nav-start); }
    to   { color: var(--b-ink); }
  }

  .bframe__mark {
    animation: b-slide-in var(--b-enter) var(--b-ease) both;
  }

  /* **이름이 다 선 다음에 목차가 나온다.** 시작점이 `--b-enter` 라 이름의 길이를
     고치면 목차도 그만큼 뒤로 밀린다 — 두 값을 따로 맞출 일이 없다.
     세 줄은 한 몸처럼 들어오지 않고 차례로 서서 계단을 눈으로 따라가게 한다. */
  .bframe__index a {
    animation: b-slide-in var(--b-nav-in) var(--b-ease) both;
    animation-delay: calc(var(--b-nav-after) + var(--i) * var(--b-nav-step));
  }

  .bframe__index a::before {
    animation: b-nav-ink var(--b-nav-in) var(--b-ease) both;
    animation-delay: calc(var(--b-nav-after) + var(--i) * var(--b-nav-step));
  }

  .bframe__index a:nth-child(1) { --i: 0; }
  .bframe__index a:nth-child(2) { --i: 1; }
  .bframe__index a:nth-child(3) { --i: 2; }

  /* 사진 — 화면에 들어오면 작게 시작해 제 크기가 된다.

     **작아지는 상태는 자바스크립트가 붙인다** (`b-grow`). CSS 에 처음부터 적어 두면
     스크립트가 막힌 방문자에게 사진이 작고 흐린 채로 남는다. 붙지 않으면 아래
     규칙들은 아무것도 고르지 못하고, 사진은 그냥 제 크기로 보인다.

     CSS 의 스크롤 구동 애니메이션으로 먼저 만들었는데 타임라인이 활성화되지 않았고
     (사파리도 아직 안 받친다), 그래서 어디서나 도는 쪽으로 바꿨다. */
  /* **판이 아니라 그 안의 그림을 키운다.** 판에 걸면 판이 이미 쓰고 있는 값을
     덮어써서 그 화면의 구성이 사라진다 — das Fotobuch 는 양 끝 판이 물러나 있는
     것(opacity 0.32 · 0.72)과 세로로 어긋난 것(translateY)이 곧 구성인데,
     판을 1.0 으로 올리고 scale 로 덮으면 둘 다 지워진다. 그래서 그 화면만
     모션에서 빼 두었었다.

     안쪽에 걸면 겹쳐진다: 판의 0.32 에 그림의 0.25 가 곱해지고, 판의 translateY
     위에서 그림만 커진다. 빼야 할 화면이 없어진다. */
  /* **작은 상태에는 전환을 걸지 않는다.** 여기에 `transition` 을 두면 작아지는
     것 자체가 2.6초짜리 전환이 되어, 30ms 뒤에 `is-in` 이 붙는 판은 작아지기도
     전에 되돌아온다 — 재보니 시작값이 0.25 가 아니라 0.97 이었다.
     시작 자리는 즉시 잡고, 전환은 돌아오는 쪽이 갖는다. */
  .bplate.b-grow img,
  .bplate.b-grow .bplate__name {
    opacity: 0.25;
    transform: scale(0.78);
    transform-origin: center 65%;
  }

  .bplate.b-grow.is-in img,
  .bplate.b-grow.is-in .bplate__name {
    opacity: 1;
    transform: none;
    transition: opacity var(--b-enter) var(--b-ease),
                transform var(--b-enter) var(--b-ease);
  }
}