/* ==========================================================================
   진세무회계 Jin Tax & Accounting Office — 브랜드 아이덴티티 케이스
   강디자인

   실측 대조 (2026-08-08)
   승인 SVG 둘을 1300px 로 렌더해 2단위 양자화·구역별 중앙값으로 쟀다.
   **이 마크는 색이 하나뿐이다** — 시그니춰·심볼 양쪽 모두 #3960AD 가 100% 다.

     --jin-blue       #3B60AD → **#3960AD**  실측값으로 맞춤 (Δ2 였다)
     --jin-blue-deep  #29477F   마크에 없는 색이다. 어두운 면을 위한 **파생값**임을 밝힌다
     --jin-ink        #242729   마크에 없는 색이다. 본문용 **파생값**임을 밝힌다
     --jin-paper      #F6F3EC → **#FFFFFF**

   ── 2026-08-11 정정. **승인 지면 자료를 찾았다.**
   `내용물16/진세무회계2/진세무2BSAS.pdf` 의 응용 06 메인사인 · 07 현판류.
   (그 PDF 는 앞 12지면과 응용 08 이후가 TARA YOGA 인 합본이다. 06·07 만 진세무회계다.)

     --jin-paper #FFFFFF  →  이제 **실측값이다.** 두 지면 네 모서리 60px 최빈이 순백 100%.
                             「색을 주장하지 않는 흰색」이 아니라 지면이 실제로 흰 것이다.

   ⚠ 그 PDF 는 **전부 CMYK** 다 — 채움 연산자 k 1,088개 · rg 0개.
   그래서 렌더에서 읽은 RGB 는 변환 산물이지 브랜드 색이 아니다. 화면색은 승인 SVG 가 기준이다.
   대신 **인쇄 지정값은 지면에서 직접 읽을 수 있다** —
     마크 파랑     C83.9 M66.3 Y0 K0   지면 파랑 화소의 91~96%
     보조 밝은 파랑 C66.7 M25.1 Y0 K0   층별표시 등 2%대
   귀속은 같은 렌더러(poppler 72dpi)에 색편을 통과시켜 확정했다 —
   C83.9/M66.3 → #415AB2 로, 지면 실측 최빈과 **정확히 같다.**
   (합본의 분홍 C8 M85 Y0 K0 → #DF299D 는 TARA 것이다. 페이지 분리로는 자원이 공유돼 못 가른다.)

   물성 — 괘선 대사면 (2026-08-08 추가)
   - 마크는 한 획 굵기의 선으로 그린 한자 眞 이고, 브랜드는 세무회계다.
     지면 #3960AD 위에 일정 간격 괘선을 그었다.
   - 착지 곡선 settle_pair 는 **스물다섯 물성 중 유일하게 짝으로 움직이며 합이 보존된다** —
     표본 501개에서 a + b = 1, 최대 오차 0.00e+00. 대사(對査)가 그런 일이다.
     한쪽만 움직여 끝나지 않고 두 값이 반대쪽에서 와서 정확히 만난다.
   - 모션 두 편을 1440×900 / 30fps / 300프레임 / 정확히 10.000초 규격으로 다시 만들었다.
     이전 파일은 둘 다 1280×720 / 210프레임 / 7.0초로 규격을 어기고 있었다.
   ========================================================================== */

:root {
  --jin-blue: #3960ad;       /* 승인 SVG 실측 100% */
  --jin-blue-deep: #29477f;  /* 파생값 — 마크에 없는 색 */
  --jin-paper: #ffffff;      /* 승인 지면 자료 없음 — 색을 주장하지 않는다 */
  --jin-ink: #242729;        /* 파생값 — 마크에 없는 색 */
}

body[data-jin-project='true'] .jin-video,
body[data-jin-project='true'] .jin-application > img,
body[data-jin-project='true'] .jin-wall > img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

body[data-jin-project='true'] .jin-scene {
  background: var(--jin-paper);
  color: var(--jin-ink);
  overflow: hidden;
  position: relative;
}

body[data-jin-project='true'] .jin-scene img { display: block; }

.jin-scene-head {
  display: flex;
  justify-content: space-between;
  left: clamp(22px, 4.1vw, 70px);
  position: absolute;
  right: clamp(22px, 4.1vw, 70px);
  top: clamp(20px, 3.7vw, 62px);
  z-index: 6;
}

.jin-scene-head span,
.jin-route-grid article > span,
.jin-color-panel span,
.jin-signature > span {
  font-size: clamp(11px, .75vw, 13px);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.jin-scene-head strong {
  font-size: clamp(18px, 2vw, 36px);
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: 1.08;
  text-align: right;
}

.jin-routes { padding: clamp(20px, 3.7vw, 64px); }
.jin-routes .jin-scene-head { left: 0; position: relative; right: 0; top: 0; }
.jin-route-grid {
  display: grid;
  gap: clamp(10px, 1.5vw, 24px);
  grid-template-columns: 1fr 1fr;
  margin-top: clamp(28px, 5vw, 80px);
}

.jin-route-grid article {
  border-top: 1px solid rgba(36,39,41,.22);
  display: grid;
  grid-template-columns: auto 1fr;
  padding-top: clamp(9px, 1vw, 16px);
}

.jin-route-grid img {
  background: #fff;
  grid-column: 1 / -1;
  height: clamp(92px, 10.4vw, 176px);
  margin-bottom: clamp(8px, 1vw, 15px);
  object-fit: contain;
  width: 100%;
}

.jin-route-grid article > span { color: var(--jin-blue); padding-top: .32em; }
.jin-route-grid h3 {
  font-size: clamp(18px, 1.9vw, 32px);
  font-weight: 400;
  justify-self: end;
  letter-spacing: -.04em;
  margin: 0;
}

.jin-reconcile { background: var(--jin-blue-deep) !important; color: #fff !important; }
.jin-ledger {
  height: clamp(190px, 25vw, 390px);
  left: 50%;
  position: absolute;
  top: 56%;
  transform: translate(-50%, -50%);
  width: clamp(270px, 52vw, 840px);
}

.jin-ledger::before {
  background: rgba(255,255,255,.2);
  content: '';
  left: 50%;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
}

.jin-ledger-row { height: 16.66%; position: relative; }
.jin-ledger-row i,
.jin-ledger-row b {
  animation: jinReconcile 4.4s cubic-bezier(.22,.78,.26,1) infinite;
  background: rgba(255,255,255,.76);
  height: 3px;
  position: absolute;
  top: 50%;
  width: var(--row-width, 31%);
}
.jin-ledger-row i { right: 52%; transform: translateX(-38%); }
.jin-ledger-row b { left: 52%; transform: translateX(38%); }
.jin-ledger-row:nth-child(2) { --row-width: 26%; }
.jin-ledger-row:nth-child(3) { --row-width: 34%; }
.jin-ledger-row:nth-child(4) { --row-width: 29%; }
.jin-ledger-row:nth-child(5) { --row-width: 33%; }
.jin-ledger-row:nth-child(6) { --row-width: 27%; }
.jin-ledger-row:nth-child(2) i, .jin-ledger-row:nth-child(2) b { animation-delay: .08s; }
.jin-ledger-row:nth-child(3) i, .jin-ledger-row:nth-child(3) b { animation-delay: .16s; }
.jin-ledger-row:nth-child(4) i, .jin-ledger-row:nth-child(4) b { animation-delay: .24s; }
.jin-ledger-row:nth-child(5) i, .jin-ledger-row:nth-child(5) b { animation-delay: .32s; }
.jin-ledger-row:nth-child(6) i, .jin-ledger-row:nth-child(6) b { animation-delay: .4s; }
.jin-ledger em {
  animation: jinVerify 4.4s ease infinite;
  background: #fff;
  bottom: -3%;
  height: 8px;
  left: 24%;
  position: absolute;
  right: 24%;
}
.jin-reconcile > p,
.jin-geometry > p {
  bottom: 6%;
  font-size: clamp(11px, .72vw, 12px);
  left: 0;
  letter-spacing: .16em;
  position: absolute;
  right: 0;
  text-align: center;
}

.jin-geometry-stage {
  height: clamp(220px, 31vw, 480px);
  left: 50%;
  position: absolute;
  top: 58%;
  transform: translate(-50%, -50%);
  width: clamp(220px, 31vw, 480px);
}
.jin-geometry-stage img { height: 72%; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); width: auto; z-index: 2; }
.jin-geometry-stage .axis-x,
.jin-geometry-stage .axis-y { background: rgba(59,96,173,.24); left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); }
.jin-geometry-stage .axis-x { height: 1px; width: 100%; }
.jin-geometry-stage .axis-y { height: 100%; width: 1px; }
.jin-geometry-stage::before,
.jin-geometry-stage::after { border: 1px solid rgba(59,96,173,.22); content: ''; inset: 14%; position: absolute; }
.jin-geometry-stage::after { inset: 29%; }
.jin-geometry-stage .measure { color: var(--jin-blue); font-size: 9px; letter-spacing: .12em; position: absolute; }
.jin-geometry-stage .measure-a { left: 8%; top: 48%; }
.jin-geometry-stage .measure-b { right: 8%; top: 48%; }

.jin-color { display: grid; grid-template-columns: 1fr 1fr; }
.jin-color-panel { display: flex; flex-direction: column; padding: clamp(16px, 2.4vw, 40px); position: relative; z-index: 4; }
.jin-color-panel.blue { background: var(--jin-blue); color: #fff; }
.jin-color-panel.paper { background: var(--jin-paper); color: var(--jin-ink); }
.jin-color-panel strong { font-size: clamp(20px, 2.5vw, 42px); font-weight: 400; letter-spacing: -.04em; line-height: 1; margin-top: auto; }
.jin-color-panel em { font-size: 10px; font-style: normal; letter-spacing: .12em; line-height: 1.55; margin-top: 14px; }
.jin-color > img { filter: brightness(0) invert(1); height: 45%; left: 25%; opacity: .2; position: absolute; top: 50%; transform: translate(-50%, -50%); width: auto; z-index: 1; }

.jin-application-shade { background: linear-gradient(180deg, rgba(20,24,30,.02), rgba(20,24,30,.18)); inset: 0; position: absolute; }
.jin-application > p,
.jin-wall > p { bottom: 6%; color: #fff; font-size: clamp(11px, .72vw, 12px); left: 6%; letter-spacing: .14em; position: absolute; }
.jin-wall > img { object-position: 50% 48%; }

.jin-signature { align-items: center; display: flex; flex-direction: column; justify-content: center; }
.jin-signature > span { margin-bottom: 6%; }
.jin-signature > img { max-height: 48%; max-width: 58%; width: auto; }
.jin-signature > p { bottom: 8%; font-size: clamp(9px, .8vw, 13px); letter-spacing: .16em; position: absolute; }

body[data-jin-project='true'] .case__study__info__left { display: grid; gap: var(--pd2); grid-column: 1 / 2; grid-template-columns: 1fr 1fr; }
body[data-jin-project='true'] .case__study__info__project__information { grid-column: 1 / -1; }
body[data-jin-project='true'] .case__study__info__right { display: flex; flex-flow: column; grid-column: 2 / -1; row-gap: var(--pd2); }
body[data-jin-project='true'] .case__study__info h2 { color: var(--color-gray50); margin-bottom: 8px; }
body[data-jin-project='true'] .case__study__info h2:not(:first-child) { margin-top: 32px; }
body[data-jin-project='true'] .case__study__info p:not(:last-child) { margin-bottom: 12px; }

@keyframes jinReconcile {
  0%, 9% { opacity: 0; }
  12% { opacity: 1; }
  38%, 63% { transform: translateX(0); }
  80%, 100% { opacity: 0; transform: translateX(0); }
}
@keyframes jinVerify { 0%, 42% { opacity: 0; transform: scaleX(.2); } 54%, 66% { opacity: 1; transform: scaleX(1); } 82%, 100% { opacity: 0; } }

/* 승인 지면 네 장 — 머리글을 흐름 안에 두고 아래를 2×2 로 나눈다
   (응용 06 메인사인 · 07 현판류 · 04 레터지 · 05 메모지) */
body[data-jin-project='true'] .jin-plates {
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 3.7vw, 62px) clamp(22px, 4.1vw, 70px) clamp(20px, 2.8vw, 46px);
}
.jin-plates .jin-scene-head { left: 0; position: relative; right: 0; top: 0; }
.jin-plates-grid {
  display: grid;
  flex: 1;
  gap: clamp(12px, 1.7vw, 30px);
  grid-template-columns: 1fr 1fr;
  margin-top: clamp(14px, 2vw, 34px);
  min-height: 0;
}
.jin-plates-grid figure {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, .8vw, 12px);
  margin: 0;
  min-height: 0;
}
.jin-plates-grid img {
  border: 1px solid rgba(36, 39, 41, .13);
  flex: 1;
  min-height: 0;
  object-fit: contain;
  width: 100%;
}
.jin-plates-grid figcaption {
  font-size: clamp(11px, .7vw, 12px);
  letter-spacing: .1em;
  opacity: .64;
}
.jin-plates > p {
  font-size: clamp(11px, .72vw, 12px);
  letter-spacing: .12em;
  margin-top: clamp(10px, 1.3vw, 20px);
  opacity: .64;
}
/* 서식류 두 장이 같은 규칙이라는 것을 설명하는 줄 — 위 한 줄보다 읽히게 둔다 */
.jin-plates > p.jin-plates-note {
  font-size: clamp(11px, .82vw, 14px);
  letter-spacing: .02em;
  line-height: 1.65;
  margin-top: clamp(6px, .8vw, 12px);
  max-width: 62ch;
  opacity: .72;
}
.jin-plates > p.jin-plates-note b { font-weight: 600; opacity: 1; }

@media (max-width: 1024px) {
  body[data-jin-project='true'] .case__study__info__left,
  body[data-jin-project='true'] .case__study__info__right { grid-column: 1 / -1; }
}

/* 케이스 칸은 창보다 좁다 — 두 칸으로 두면 1200px 창에서 지면이 339px 로 줄어 못 읽는다.
   한 장씩 쌓고 높이를 풀어 준다. flex:1 을 남기면 높이가 2px 로 무너진다 */
@media (max-width: 1280px) {
  body[data-jin-project='true'] .jin-plates { aspect-ratio: auto !important; }
  .jin-plates-grid { flex: none; gap: clamp(12px, 1.7vw, 22px); grid-template-columns: 1fr; }
  .jin-plates-grid img { flex: none; height: auto; }
}

@media (max-width: 656px) {
  body[data-jin-project='true'] .jin-routes { aspect-ratio: auto !important; min-height: 660px; }
  body[data-jin-project='true'] .jin-reconcile,
  body[data-jin-project='true'] .jin-geometry,
  body[data-jin-project='true'] .jin-signature { aspect-ratio: auto !important; min-height: 390px; }
  .jin-scene-head strong { max-width: 62%; }
  .jin-routes .jin-scene-head { display: block; }
  .jin-routes .jin-scene-head strong { display: block; font-size: 25px; margin-top: 18px; max-width: none; text-align: left; }
  .jin-route-grid { gap: 10px; margin-top: 28px; }
  .jin-route-grid article { grid-template-columns: auto minmax(0, 1fr); }
  .jin-route-grid img { height: 105px; }
  .jin-route-grid h3 { font-size: 13px; line-height: 1.12; text-align: right; }
  .jin-ledger { top: 60%; }
  .jin-color-panel { padding: 14px; }
  .jin-color-panel span { font-size: 7px; }
  .jin-color-panel strong { font-size: 18px; }
  .jin-color-panel em { font-size: 7px; }
  .jin-signature > img { max-width: 78%; }
  .jin-plates .jin-scene-head { display: block; }
  .jin-plates .jin-scene-head strong { display: block; font-size: 25px; margin-top: 18px; max-width: none; text-align: left; }
  body[data-jin-project='true'] .case__study__info__left { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .jin-ledger-row i, .jin-ledger-row b, .jin-ledger em { animation: none; opacity: .7; transform: translateX(0); }
}

/* 모션은 1440×900 이다. 껍데기의 .page__card 는 16/9 라 object-fit:cover 가 위아래를 각 45줄
   (높이의 10%) 잘라냈다. **모션이 든 카드에만** 영상 비율을 돌려준다 — 다른 카드는 건드리지 않는다. */
body[data-jin-project="true"] .page__card:has(> video) { aspect-ratio: 1440 / 900 !important; }  /* 카드에 style="aspect-ratio:16/9" 가 인라인으로 박혀 있어 !important 가 없으면 안 먹는다 */

/* === 그림 자리 예약 (CLS) — 자동 생성. 없으면 지연 로딩 때 아래가 밀린다 === */
img[src$="/jin-case-assets/route-open-frame-r2.jpg"],
img[src$="/jin-case-assets/route-shield-r2.jpg"],
img[src$="/jin-case-assets/route-double-r2.jpg"],
img[src$="/jin-case-assets/jin-sign-final-small.jpg"] { aspect-ratio: 3/2; }
img[src$="/jin-case-assets/jin-symbol-final.svg"] { aspect-ratio: 39/50; }
img[src$="/jin-case-assets/route-cube-r2.jpg"] { aspect-ratio: 4/3; }
img[src$="/jin-case-assets/jin-wall-final-r2.jpg"] { aspect-ratio: 2160/1556; }
img[src$="/jin-case-assets/jin-plate-sign.jpg"] { aspect-ratio: 7/5; }
img[src$="/jin-case-assets/jin-plate-nameplate.jpg"] { aspect-ratio: 1400/1037; }
img[src$="/jin-case-assets/jin-plate-letter.jpg"] { aspect-ratio: 280/191; }
img[src$="/jin-case-assets/jin-plate-memo.jpg"] { aspect-ratio: 5/3; }
img[src$="/jin-case-assets/jin-signature-final.svg"] { aspect-ratio: 157/150; }