/* Salevery About archive: premium book-pull interaction (desktop) + mobile page-flip (appended). */
:root {
  --archive-leather: url("leather.png");
  --archive-paper: url("paper.png");
}

#about.about.fx,
#about .fx-content,
#about .about-grid {
  overflow: visible;
}

.salevery-archive {
  position: relative;
  width: min(100%, 840px);
  min-height: clamp(560px, 48vw, 700px);
  margin: 0 -38px 0 auto;
  padding: clamp(24px, 2.8vw, 38px) clamp(34px, 3.6vw, 56px) clamp(56px, 4vw, 74px);
  perspective: 1900px;
  transform-style: preserve-3d;
  isolation: isolate;
}

.salevery-archive::before,
.salevery-archive::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.salevery-archive::before {
  inset: 8% 2% 0;
  z-index: -2;
  background:
    radial-gradient(52% 38% at 54% 30%, rgba(252, 209, 126, .24), transparent 70%),
    radial-gradient(34% 18% at 77% 19%, rgba(255, 232, 180, .18), transparent 76%),
    radial-gradient(72% 60% at 50% 82%, rgba(0, 0, 0, .7), transparent 72%);
  filter: blur(24px);
}

.salevery-archive::after {
  left: 14%;
  right: 8%;
  bottom: 8%;
  z-index: -3;
  height: 64px;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .78), rgba(0, 0, 0, .34) 56%, transparent 82%);
  filter: blur(12px);
}

/* =====================================================================
   SALEVERY ABOUT — 데스크톱 3D 책장 v3 (참조 이미지 충실 재현)
   고급 호두나무 캐비닛 + 실사 가죽 양장본(모로코 그레인·라운드 스파인) +
   정교한 금박/음각/장식선. 무거운 드롭섀도 배제. 만년필 없음.
   구조 클래스 svq2-(모바일 CSS 불간섭), 데이터 훅(.archive-book--0X·
   .archive-num·.archive-spine-title·.archive-cover-*·.archive-cover-logo) 보존.
   ===================================================================== */
.salevery-archive { --wood: url("wood-walnut.jpg"); --wood-h: url("wood-walnut-h.jpg"); }

/* ---------- 호두나무 캐비닛 (가벼운 그림자) ---------- */
.svq2-cabinet {
  position: absolute; top: clamp(6px,1vw,14px); bottom: clamp(6px,1vw,14px);
  left: 50%; transform: translateX(-50%); width: min(96%, 596px);
  border-radius: 15px 15px 11px 11px; transform-style: preserve-3d;
  background-color: #4a3020;
  background-image:
    linear-gradient(180deg, rgba(255,236,196,.16), transparent 10%, transparent 88%, rgba(0,0,0,.34)),
    linear-gradient(90deg, rgba(0,0,0,.30), transparent 13%, transparent 87%, rgba(0,0,0,.32)),
    var(--wood);
  background-size: 100% 100%, 100% 100%, cover; background-blend-mode: overlay, multiply, normal;
  box-shadow: inset 0 2px 0 rgba(255,240,205,.24), inset 0 -12px 20px rgba(0,0,0,.34),
    inset 0 0 0 1px rgba(255,226,160,.09), 0 14px 32px -18px rgba(0,0,0,.5);
}
.svq2-cabinet::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: clamp(26px,4.4%,40px);
  border-radius: 14px 14px 4px 4px; z-index: 6;
  background-image:
    linear-gradient(180deg, rgba(255,243,210,.22) 0 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,233,190,.12), rgba(0,0,0,.3) 90%),
    var(--wood-h);
  background-size: 100% 100%, 100% 100%, cover; background-blend-mode: normal, overlay, normal;
  box-shadow: inset 0 1px 0 rgba(255,247,216,.26), inset 0 -2px 4px rgba(0,0,0,.38);
}

/* ---------- 개구부(움푹) — 적당한 깊이감 ---------- */
.svq2-recess {
  position: absolute; top: clamp(26px,4.4%,40px); left: clamp(16px,3.4%,26px); right: clamp(16px,3.4%,26px);
  bottom: clamp(60px,12%,84px); border-radius: 4px 4px 3px 3px; transform-style: preserve-3d;
  background-color: #1a0f07;
  background-image:
    radial-gradient(72% 36% at 50% 2%, rgba(238,190,116,.28), transparent 60%),
    linear-gradient(90deg, rgba(0,0,0,.6), rgba(0,0,0,.06) 15%, rgba(0,0,0,.06) 85%, rgba(0,0,0,.62)),
    linear-gradient(180deg, rgba(0,0,0,.52), rgba(0,0,0,.06) 18%, rgba(0,0,0,.14) 80%, rgba(0,0,0,.56)),
    var(--wood);
  background-size: 100% 100%, 100% 100%, 100% 100%, cover; background-blend-mode: screen, multiply, multiply, normal;
  box-shadow: inset 0 20px 38px -18px rgba(0,0,0,.8), inset 16px 0 34px -14px rgba(0,0,0,.55),
    inset -16px 0 34px -14px rgba(0,0,0,.58), inset 0 -16px 28px -16px rgba(0,0,0,.5),
    inset 0 0 0 1px rgba(0,0,0,.5);
}
.svq2-recess::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  background: radial-gradient(34% 22% at var(--archive-x,50%) var(--archive-y,26%), rgba(255,224,150,.14), transparent 72%);
  mix-blend-mode: screen; opacity: .55;
}

/* ---------- 브래스 선반 레일 ---------- */
.svq2-rail {
  position: absolute; left: 4%; right: 4%; bottom: -4px; height: clamp(8px,1.4%,12px);
  border-radius: 2px; z-index: 9;
  background: linear-gradient(180deg, #f6e6ad 0%, #dcb96e 22%, #b08e44 50%, #82632e 76%, #574019 100%);
  box-shadow: 0 3px 6px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,250,228,.85), inset 0 -1px 2px rgba(64,46,18,.6);
}
.svq2-rail::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45) 9%, transparent 19%, transparent 81%, rgba(255,255,255,.3) 91%, transparent);
  mix-blend-mode: screen; opacity: .6;
}

/* ---------- 하단 서랍 ---------- */
.svq2-drawer {
  position: absolute; left: clamp(8px,1.6%,14px); right: clamp(8px,1.6%,14px); bottom: clamp(8px,1.4%,14px);
  height: clamp(44px,9%,64px); border-radius: 3px 3px 10px 10px; z-index: 4;
  background-image:
    linear-gradient(180deg, rgba(255,236,196,.14), transparent 18%, transparent 72%, rgba(0,0,0,.32)),
    var(--wood-h);
  background-size: 100% 100%, cover; background-blend-mode: overlay, normal;
  box-shadow: inset 0 2px 0 rgba(255,242,206,.24), inset 0 -3px 6px rgba(0,0,0,.36), 0 6px 12px -6px rgba(0,0,0,.4);
}
.svq2-drawer::before {
  content: ""; position: absolute; left: 0; right: 0; top: -5px; height: 5px;
  background: linear-gradient(180deg, rgba(0,0,0,.42), rgba(255,236,196,.12));
}
.svq2-handle {
  position: absolute; left: 50%; top: 42%; transform: translateX(-50%); width: 30%; height: clamp(8px,16%,11px);
  border-radius: 6px;
  background: linear-gradient(180deg, #f6e8b0 0%, #d0a85e 30%, #98743a 70%, #66501f 100%);
  box-shadow: 0 2px 5px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,252,232,.8), inset 0 -1px 2px rgba(58,40,16,.6);
}

/* ---------- 책 줄 ---------- */
.svq2-row {
  position: absolute; left: clamp(20px,3.6%,30px); right: clamp(20px,3.6%,30px);
  top: clamp(22px,5%,38px); bottom: clamp(16px,3%,26px);
  display: flex; align-items: flex-end; justify-content: center; gap: clamp(2px,.5vw,5px);
  z-index: 10;
}
.salevery-archive.is-engaged .svq2-row { z-index: 20; }

/* ---------- 책(앵커) + 책별 변수 ---------- */
.archive-book {
  position: relative; flex: 0 0 auto; width: var(--thick); height: var(--h);
  perspective: 1500px;
  text-decoration: none; cursor: pointer; outline: none; color: #ecd28f;
}
.archive-book--01 { --thick:120px; --depth:334px; --h:452px; --leather:url("leather-01.jpg"); --base:#5a1a18; --low:#33100d; --shade:#180605; --warm:rgba(255,140,92,.26); --rim:rgba(255,190,116,.26); --pull-x:-28px; --commit-x:-40px; }
.archive-book--02 { --thick:124px; --depth:346px; --h:470px; --leather:url("leather-02.jpg"); --base:#16365c; --low:#0b2038; --shade:#040e1c; --warm:rgba(118,184,240,.24); --rim:rgba(186,220,255,.24); --pull-x:-38px; --commit-x:-52px; }
.archive-book--03 { --thick:120px; --depth:338px; --h:458px; --leather:url("leather-03.jpg"); --base:#1a4632; --low:#0c2a1b; --shade:#04120a; --warm:rgba(138,210,148,.22); --rim:rgba(200,240,172,.22); --pull-x:-50px; --commit-x:-66px; }
.archive-book--04 { --thick:124px; --depth:342px; --h:462px; --leather:url("leather-04.jpg"); --base:#92641f; --low:#583910; --shade:#281806; --warm:rgba(255,196,108,.26); --rim:rgba(255,222,146,.26); --pull-x:-62px; --commit-x:-80px; }

.svq2-book {
  position: absolute; inset: 0; transform-style: preserve-3d; transform: translateZ(0);
  transition: transform .85s cubic-bezier(.34,.1,.16,1);
  will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.archive-book:hover, .archive-book:focus-visible, .archive-book.is-open, .archive-book.is-committing { z-index: 90; }
.archive-book:hover .svq2-book, .archive-book:focus-visible .svq2-book, .archive-book.is-open .svq2-book {
  transform: translate3d(var(--pull-x,-40px), -8px, 122px) rotateY(-54deg) rotateX(1deg);
}
.archive-book.is-committing .svq2-book {
  transform: translate3d(var(--commit-x,-56px), -12px, 158px) rotateY(-58deg) rotateX(1.4deg);
  transition-duration: .62s;
}

/* ---------- 6면 ---------- */
.svq2-face {
  position: absolute; left: 50%; top: 50%; overflow: hidden;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.svq2-face--spine  { width: var(--thick); height: var(--h);     transform: translate(-50%,-50%) translateZ(calc(var(--depth)/2)); }
.svq2-face--fore   { width: var(--thick); height: var(--h);     transform: translate(-50%,-50%) rotateY(180deg) translateZ(calc(var(--depth)/2)); }
.svq2-face--cover  { width: var(--depth); height: var(--h);     transform: translate(-50%,-50%) rotateY(90deg)  translateZ(calc(var(--thick)/2)); }
.svq2-face--back   { width: var(--depth); height: var(--h);     transform: translate(-50%,-50%) rotateY(-90deg) translateZ(calc(var(--thick)/2)); }
.svq2-face--top    { width: var(--thick); height: var(--depth); transform: translate(-50%,-50%) rotateX(90deg)  translateZ(calc(var(--h)/2)); }
.svq2-face--bottom { width: var(--thick); height: var(--depth); transform: translate(-50%,-50%) rotateX(-90deg) translateZ(calc(var(--h)/2)); }

/* 책등 — 실사 가죽(연한 음영) */
.svq2-face--spine {
  border-radius: 3px 4px 4px 3px; background-color: var(--low);
  background-image:
    linear-gradient(90deg, rgba(0,0,0,.4), transparent 16%, transparent 84%, rgba(0,0,0,.42)),
    linear-gradient(180deg, rgba(255,242,206,.1), transparent 8%, transparent 91%, rgba(0,0,0,.26)),
    var(--leather);
  background-size: 100% 100%, 100% 100%, cover; background-position: center;
  background-blend-mode: multiply, overlay, normal;
  box-shadow: inset 0 1px 0 rgba(255,245,212,.24), inset 2px 0 3px -1px rgba(255,236,196,.18),
    inset -3px 0 6px -2px rgba(0,0,0,.42), -5px 6px 13px rgba(0,0,0,.42);
}
.svq2-face--spine::before { content:""; position:absolute; left:0; right:0; top:0; height:10px; border-radius:3px 3px 0 0;
  background: linear-gradient(180deg, rgba(255,240,200,.18), rgba(0,0,0,.4) 78%, rgba(0,0,0,.06)); }
.svq2-face--spine::after { content:""; position:absolute; left:0; right:0; bottom:0; height:12px;
  background: linear-gradient(0deg, rgba(0,0,0,.46), rgba(0,0,0,.1) 72%, transparent); }

/* 책등 장식 레이아웃 (참조와 동일 순서) */
.svq2-spine { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; padding: clamp(13px,3%,19px) 0 clamp(14px,3.2%,21px); }
.svq2-orn { flex: 0 0 auto; background: center/contain no-repeat; opacity: .96; }
.svq2-orn--top { width: 82%; height: 13px; background-image: url("ornament-top.png"); }
.svq2-orn--bot { width: 48%; height: 12px; background-image: url("ornament-bottom.png"); margin-top: clamp(6px,1.4%,10px); }
.archive-num { flex: 0 0 auto; margin: clamp(7px,1.6%,11px) 0 clamp(8px,1.9%,13px); font-family: var(--font-serif); font-size: clamp(20px,1.7vw,27px); font-weight: 700; letter-spacing: .08em; }
.svq2-bands { flex: 0 0 auto; width: 100%; height: clamp(22px,5%,30px); position: relative; background: center/86% auto no-repeat url("ornament-band.png"); }
.svq2-bands::before, .svq2-bands::after { content: ""; position: absolute; left: 5%; right: 5%; height: 4px; border-radius: 2px;
  background: linear-gradient(180deg, rgba(255,243,208,.3), rgba(0,0,0,.2) 55%, rgba(0,0,0,.4)); box-shadow: 0 1px 1px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,244,210,.28); }
.svq2-bands::before { top: 0; } .svq2-bands::after { bottom: 0; }
.svq2-title-wrap { flex: 1 1 auto; align-self: stretch; display: flex; align-items: center; justify-content: center; min-height: 0; padding: clamp(8px,1.8%,14px) 0; }
/* 책등 제목: 위→아래 읽기. vertical-rl 단독이면 위에서 아래로 읽힘(참조 책장 이미지와 동일). rotate(180deg)는 아래→위로 뒤집으므로 금지. */
.archive-spine-title { max-height: 100%; overflow: hidden; writing-mode: vertical-rl; text-orientation: mixed; font-family: var(--font-serif); font-size: clamp(22px,1.95vw,30px); font-weight: 700; line-height: 1; letter-spacing: .14em; white-space: nowrap; }
.archive-book--03 .archive-spine-title { font-size: clamp(18px,1.6vw,25px); letter-spacing: .07em; }
.svq2-rules { flex: 0 0 auto; width: 64%; height: 7px; position: relative; margin: clamp(7px,1.6%,11px) 0 clamp(6px,1.4%,10px); }
.svq2-rules::before, .svq2-rules::after { content: ""; position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(206,168,98,.9) 18%, rgba(244,224,152,.75) 50%, rgba(206,168,98,.9) 82%, transparent); }
.svq2-rules::before { top: 1px; } .svq2-rules::after { bottom: 1px; }
.svq2-brand { flex: 0 0 auto; font-family: var(--font-display); font-size: clamp(10px,.84vw,12px); font-weight: 700; letter-spacing: .34em; padding-left: .34em; }

/* 금박 + 음각(deboss) */
.svq2-gold { color: #c8a253; -webkit-text-stroke: .35px rgba(56,36,9,.5); text-shadow: 0 1px 0 rgba(255,238,190,.32), 0 -1px 1px rgba(22,12,2,.92), 0 -1px 0 rgba(40,24,5,.6), 0 2px 2px rgba(0,0,0,.4); -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; }
.archive-book--04 .svq2-gold { color: #d6b160; -webkit-text-stroke: .45px rgba(40,22,4,.66); text-shadow: 0 1px 0 rgba(255,240,194,.3), 0 -1px 1px rgba(14,7,1,.95), 1px 1px 2px rgba(0,0,0,.6); }

/* 앞표지(실사 가죽 + 금박 이중 프레임) */
.svq2-face--cover {
  border-radius: 2px 8px 8px 2px; background-color: var(--low);
  background-image:
    radial-gradient(60% 60% at 46% 36%, var(--warm), transparent 72%),
    linear-gradient(118deg, rgba(255,255,255,.06), transparent 28%, rgba(0,0,0,.3) 82%),
    linear-gradient(180deg, rgba(255,240,200,.06), transparent 10%, transparent 88%, rgba(0,0,0,.26)),
    var(--leather);
  background-size: 100% 100%, 100% 100%, 100% 100%, cover; background-blend-mode: soft-light, overlay, overlay, normal;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), inset 8px 0 12px -8px rgba(0,0,0,.42), inset 0 -8px 16px rgba(0,0,0,.4), 14px 14px 30px -6px rgba(0,0,0,.46);
}
.svq2-face--cover::before { content:""; position:absolute; inset:14px; border-radius:4px; pointer-events:none;
  box-shadow: inset 0 0 0 1px rgba(206,168,98,.6), inset 0 0 0 3px rgba(0,0,0,.24), inset 0 0 0 4px rgba(206,168,98,.16), inset 0 0 18px rgba(0,0,0,.26); }
.svq2-cover-inner { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: clamp(7px,1.5vw,13px); padding: clamp(40px,4.4vw,58px) clamp(30px,3.4vw,44px); text-align: center; }
.archive-cover-logo { width: clamp(64px,6.2vw,92px); max-width: 56%; height: auto; flex: 0 0 auto; filter: drop-shadow(0 1px 0 rgba(255,249,214,.36)) drop-shadow(1px 2px 1px rgba(42,24,6,.7)); }
.svq2-cover-mid { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.archive-cover-kicker { font-family: var(--font-display); font-size: clamp(7px,.62vw,10px); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; max-width: 100%; }
.archive-cover-title { font-family: var(--font-serif); font-size: clamp(22px,1.95vw,32px); font-weight: 700; line-height: 1.08; margin: 1px 0; word-break: keep-all; overflow-wrap: normal; max-width: 90%; }
/* 표지 부제목: 항상 한 줄. 가장 긴 'Operational Execution Excellence'가 표지 폭(최협 250px)에 한 줄로 들어가도록 상한 13px. nowrap으로 강제 줄바꿈 방지. clamp의 vw 항으로 반응형 유지. */
.archive-cover-sub { font-family: var(--font-latin); font-style: italic; font-size: clamp(11px,0.9vw,13px); font-weight: 600; max-width: 100%; white-space: nowrap; }
.svq2-cover-rule { width: 76px; height: 0; border-top: 1px solid rgba(206,168,98,.6); }
.archive-cover-foot { font-family: var(--font-display); font-size: clamp(9px,.72vw,11px); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }

/* 뒷표지 / 페이지 / 상·하 */
.svq2-face--back { border-radius:8px 2px 2px 8px; background-color:var(--low);
  background-image: linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.38)), var(--leather);
  background-size:100% 100%, cover; background-blend-mode: multiply, normal;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), inset -6px 0 12px -8px rgba(0,0,0,.5); }
.svq2-face--back::before { content:""; position:absolute; inset:15px; border-radius:4px; box-shadow: inset 0 0 0 1px rgba(206,168,98,.18); }
.svq2-face--fore { background-color:#e4cfa0;
  background-image: repeating-linear-gradient(0deg, rgba(74,46,18,.5) 0 1px, transparent 1px 3px),
    linear-gradient(90deg, rgba(60,36,14,.4), rgba(255,255,255,.3) 50%, rgba(80,50,20,.36)), var(--archive-paper);
  background-size:100% 100%,100% 100%,200px 200px; background-blend-mode: multiply, overlay, multiply;
  box-shadow: inset 0 0 14px rgba(0,0,0,.28); }
.svq2-face--top, .svq2-face--bottom { background-color:#e0cb98;
  background-image: repeating-linear-gradient(90deg, rgba(74,46,18,.42) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, rgba(255,250,232,.4), rgba(150,104,50,.42)), var(--archive-paper);
  background-size:100% 100%,100% 100%,180px 180px; background-blend-mode: multiply, normal, multiply; }
.svq2-face--top { box-shadow: inset 0 0 16px rgba(0,0,0,.3), inset 0 6px 8px rgba(255,248,224,.28); }
.svq2-face--bottom { filter: brightness(.8); }

/* 접지 그림자(가볍게) */
.svq2-shadow { position:absolute; left:50%; bottom:-10px; width:140%; height:24px; transform:translateX(-50%);
  background: radial-gradient(closest-side, rgba(0,0,0,.6), rgba(0,0,0,.24) 54%, transparent 82%);
  filter: blur(6px); opacity:.4; pointer-events:none; z-index:-1;
  transition: opacity .6s ease, width .85s cubic-bezier(.2,.8,.2,1); }
.archive-book:hover .svq2-shadow, .archive-book.is-open .svq2-shadow, .archive-book.is-committing .svq2-shadow { opacity:.6; width:200%; }


@media (prefers-reduced-motion: reduce) { .svq2-book, .svq2-shadow { transition: none; } }


@media (max-width: 980px) {
  .salevery-archive {
    width: min(100%, 700px);
    margin: 20px auto 0;
  }

  .archive-case {
    transform: none;
  }
}

/* Phone layout — also applied to ALL touch devices (phones + tablets) via
   (hover: none) so tablets render the exact same bookshelf as phones.
   The width is capped at 348px and centred, so the shelf is pixel-identical
   from ~436px up to any tablet width. Mouse/PC (hover) never matches either
   condition at normal widths, so the desktop bookshelf is untouched. */
@media (max-width: 760px), (hover: none) {
  .salevery-archive {
    width: min(calc(100vw - 56px), 360px);
    min-height: auto;
    aspect-ratio: 62 / 82;
    overflow-x: visible;
    overflow-y: visible;
    margin: 24px auto 0;
    padding: 0;
    perspective: 1300px;
  }

  .archive-case {
    width: auto;
    max-width: none;
    inset: 0;
    border-radius: 10px 10px 7px 7px;
  }

  .archive-case::before {
    height: clamp(28px, 6.2vw, 36px);
  }

  .archive-case::after {
    bottom: clamp(8px, 2vw, 11px);
    height: clamp(32px, 7.4vw, 42px);
  }

  .archive-cavity {
    inset: clamp(32px, 7vw, 42px) clamp(20px, 5vw, 30px) clamp(48px, 10vw, 60px);
  }

  .archive-row {
    left: clamp(18px, 4.8vw, 27px);
    right: clamp(2px, 0.6vw, 4px);
    top: clamp(36px, 8.5vw, 50px);
    bottom: clamp(28px, 6.4vw, 38px);
  }

  /* [모바일 책장] 맨 왼쪽 필러 1권 유지, 사이 필러 제거. 4권을 오른쪽 끝(100%)에 붙이고
     남는 공간은 책 두께(--w)로 채움. 높이 약간 변주. 움직임/클릭 없음. */
  .archive-row > :nth-child(1) {
    left: 0%;
    --w: 7%;
    --h: 72%;
    transform: rotate(-7deg) translate3d(-1px, 6px, 0) !important;
    transform-origin: 50% 100%;
  }
  .archive-row > :nth-child(2),
  .archive-row > :nth-child(4),
  .archive-row > :nth-child(5),
  .archive-row > :nth-child(7),
  .archive-row > :nth-child(8),
  .archive-row > :nth-child(10),
  .archive-row > :nth-child(11) { display: none; }
  /* 4권을 오른쪽 벽(100%)에 완전히 밀착, 더 두껍게(--w). */
  .archive-row > :nth-child(3)  { left: 6.5%;  --w: 23.3%; --h: 94%; }  /* 01 Sourcing */
  .archive-row > :nth-child(6)  { left: 30.1%; --w: 23.3%; --h: 97%; }  /* 02 Channels */
  .archive-row > :nth-child(9)  { left: 53.7%; --w: 23.3%; --h: 94%; }  /* 03 Operations */
  .archive-row > :nth-child(12) { left: 76.7%; --w: 23.3%; --h: 97%; }  /* 04 Growth */

  .archive-spine {
    padding: clamp(8px, 2.2vw, 13px) 0 clamp(10px, 2.8vw, 18px);
  }

  .archive-num {
    font-size: clamp(13px, 3.7vw, 18px);
  }

  .archive-spine-title {
    max-height: 84%;
    font-size: clamp(11px, 3vw, 15px);
    line-height: .94;
    letter-spacing: -0.01em;
  }

  .archive-book--03 .archive-spine-title {
    max-height: 88%;
    font-size: clamp(9.5px, 2.55vw, 13px);
    line-height: .9;
    letter-spacing: -0.03em;
  }

  .salevery-archive.is-engaged .archive-cavity {
    z-index: 44;
  }

  .salevery-archive.is-engaged .archive-row {
    z-index: 64;
  }

  .archive-book:hover,
  .archive-book:focus-visible,
  .archive-book:focus-within,
  .archive-book.is-open,
  .archive-book.is-committing {
    z-index: 180;
  }

  .archive-book--04 {
    --mobile-pull-x: -118px;
    --mobile-commit-x: -136px;
  }

  html[data-language-mode="machine"] .archive-spine-title {
    max-height: 84%;
    font-size: clamp(12px, 3.45vw, 17px);
  }

  html[data-language-mode="machine"] .archive-book--03 .archive-spine-title {
    max-height: 90%;
    font-size: clamp(10px, 2.86vw, 14px);
  }

  .archive-cover {
    width: clamp(190px, 56vw, 260px);
  }

  .archive-book--04 .archive-cover {
    width: clamp(168px, 47vw, 214px);
  }

  .archive-book:hover .archive-model,
  .archive-book:focus-visible .archive-model,
  .archive-book:focus-within .archive-model,
  .archive-book.is-open .archive-model {
    transform: translate3d(var(--mobile-pull-x, -34px), -20px, 188px) rotateY(-27deg) rotateX(1.2deg) rotateZ(-.6deg);
  }

  .archive-book.is-committing .archive-model {
    transition-duration: .55s;
    transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
    transform: translate3d(var(--mobile-commit-x, -48px), -30px, 226px) rotateY(-31deg) rotateX(1.2deg) rotateZ(-.8deg) scale(1.01);
  }
  .archive-cover,
  .archive-book--04 .archive-cover {
    width: clamp(214px, 61vw, 268px);
  }

  .archive-cover-inner {
    gap: clamp(7px, 1.9vw, 11px);
    padding: clamp(30px, 7.6vw, 42px) clamp(20px, 5vw, 30px) clamp(32px, 8.2vw, 44px);
  }

  .archive-cover-inner::after {
    inset: clamp(22px, 6.2vw, 34px) clamp(18px, 5vw, 28px);
  }

  .archive-cover-logo {
    width: clamp(78px, 20vw, 104px);
    margin-bottom: clamp(8px, 2.2vw, 12px);
  }

  .archive-cover-kicker,
  .archive-cover-foot,
  html[data-language-mode="machine"] .archive-cover-kicker,
  html[data-language-mode="machine"] .archive-cover-foot {
    max-width: 82%;
    font-size: clamp(7px, 1.95vw, 10px);
    line-height: 1.12;
    letter-spacing: .06em;
    white-space: normal;
  }

  .archive-cover-title,
  html[data-language-mode="machine"] .archive-cover-title {
    max-width: 84%;
    max-height: none;
    margin-top: clamp(4px, 1.1vw, 8px);
    font-size: clamp(20px, 6.15vw, 30px);
    line-height: 1.08;
    overflow: visible;
    word-break: keep-all;
    overflow-wrap: normal;
    hyphens: manual;
  }

  .archive-cover-sub,
  html[data-language-mode="machine"] .archive-cover-sub {
    max-width: 100%;
    max-height: none;
    margin-top: clamp(5px, 1.5vw, 9px);
    font-size: clamp(9px, 2.55vw, 13px);
    line-height: 1.16;
    white-space: nowrap;
    overflow: visible;
  }

  .archive-cover-rule {
    width: clamp(50px, 15vw, 72px);
    margin-top: clamp(6px, 1.6vw, 10px);
  }

  .archive-cover-foot {
    margin-top: clamp(8px, 2vw, 12px);
  }
}


/* =====================================================================
   MOBILE / TABLET — STATIC SHELF (no motion)
   ---------------------------------------------------------------------
   Touch only, via (hover: none), so mouse/PC is never affected. The shelf
   is shown as a still image: the periodic spine light-sweep is stopped and
   no hover/pull/flip transitions run. Tapping a spine follows its <a href>
   immediately (navigation is native — see salevery-archive.js).
   ===================================================================== */
@media (hover: none) {
  /* Stop the periodic spine sheen so the shelf is a still image. */
  #about.about-in .archive-book .archive-spine::after {
    animation: none !important;
    opacity: 0 !important;
  }
  /* Belt-and-braces: no motion on the book model / shadow / cover on touch. */
  .salevery-archive .archive-book .archive-model,
  .salevery-archive .archive-book::after,
  .salevery-archive .archive-cover {
    transition: none !important;
  }
}


/* =====================================================================
   MOBILE / TABLET PAGE-FLIP (touch devices only)
   ---------------------------------------------------------------------
   Everything below is scoped under `.salevery-archive--touch`, a class
   added by JS *only* when matchMedia('(hover: none)') matches. Desktop
   (hover-capable) pointers never receive the class, so none of these
   rules can ever apply on PC — desktop computed styles are byte-identical
   with or without this block. This also unifies phones AND tablets onto
   one touch-correct interaction, fixing the old "tablet stuck between
   desktop geometry + touch handlers" problem.
   ===================================================================== */

/* On touch, the book becomes a tap/drag target; let the page scroll
   vertically while JS owns horizontal drag (no scroll/gesture conflict). */
.salevery-archive--touch .archive-book {
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
.salevery-archive--touch .sv-stage,
.salevery-archive--touch .sv-scrim {
  touch-action: none;
}

/* The resting shelf keeps its existing closed look. We only neutralise the
   old hover/open transforms on touch so nothing competes with the flip
   stage (JS no longer adds is-open/is-committing on touch). */
.salevery-archive--touch .archive-book .archive-model {
  transition: transform .45s cubic-bezier(.22, 1, .36, 1), opacity .35s ease;
}

/* Dim + slightly recede the shelf while a book is open, to focus the flip. */
.salevery-archive--touch.is-engaged .archive-row {
  pointer-events: none;
}
.salevery-archive--touch.is-engaged .archive-book .archive-model,
.salevery-archive--touch.is-engaged .archive-filler {
  filter: brightness(.5) saturate(.92);
  opacity: .55;
  transition: opacity .4s ease, filter .4s ease;
}

/* Focus scrim behind the opened book. */
.sv-scrim {
  position: absolute;
  inset: 0;
  z-index: 120;
  background:
    radial-gradient(120% 90% at 50% 42%, rgba(28, 16, 8, .35), rgba(8, 4, 2, .82) 78%);
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease, visibility 0s linear .4s;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.salevery-archive--touch.is-engaged .sv-scrim {
  opacity: 1;
  visibility: visible;
  transition: opacity .4s ease;
}

/* ---- The flip stage: a centered two-page spread ---- */
.sv-stage {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  z-index: 130;
  width: min(64vw, 380px);
  height: calc(min(64vw, 380px) * 0.72);
  margin-inline: auto;
  /* Closed (--flip 0): only the cover (right page) shows, so shift the stage
     LEFT by a quarter-width to centre that single page. Open (--flip 1):
     shift 0 so the full two-page spread is centred. (% is of the stage's own
     width; a quarter-width == half a page.) Sized so nothing leaves the
     viewport at either extreme — verified across phone & tablet widths. */
  transform:
    translateY(-50%)
    translateX(calc((1 - var(--flip, 0)) * -25%))
    scale(calc(.86 + var(--enter, 0) * .14));
  transform-style: preserve-3d;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    transform .5s cubic-bezier(.22, 1, .36, 1),
    opacity .38s ease,
    visibility 0s linear .5s;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.salevery-archive--touch.is-engaged .sv-stage {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    transform .5s cubic-bezier(.22, 1, .36, 1),
    opacity .38s ease;
}
/* While dragging, the leaf must track the finger 1:1 with no easing lag. */
.salevery-archive--touch .sv-stage.is-dragging,
.salevery-archive--touch .sv-stage.is-dragging .sv-leaf {
  transition: none !important;
}

.sv-spread {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

/* Soft drop shadow under the open book. */
.sv-stage::after {
  content: "";
  position: absolute;
  left: 2%;
  right: 2%;
  bottom: -9%;
  height: 22%;
  /* Soft shadow via a feathered radial gradient instead of filter:blur — a blur
     on this animated 3D layer would re-render every frame and can shimmer on iOS. */
  background: radial-gradient(closest-side, rgba(0, 0, 0, .62), rgba(0, 0, 0, .26) 55%, transparent 82%);
  opacity: calc(.4 + var(--flip, 0) * .35);
  transform: translateZ(-4px);
  pointer-events: none;
}

/* A page (right = destination title page). */
.sv-page {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 50%;
  border-radius: 2px 7px 7px 2px;
  overflow: hidden;
  background-color: #efe2c4;
  background-image:
    linear-gradient(90deg, rgba(74, 47, 18, .26), transparent 18%),
    radial-gradient(120% 80% at 50% 0%, rgba(255, 246, 220, .5), transparent 60%),
    repeating-linear-gradient(0deg, rgba(96, 64, 28, .06) 0 2px, transparent 2px 5px),
    var(--archive-paper);
  background-size: 100% 100%, 100% 100%, 100% 100%, 300px 220px;
  background-blend-mode: multiply, screen, multiply, multiply;
  box-shadow:
    inset 7px 0 14px -6px rgba(74, 47, 18, .5),
    inset 0 0 0 1px rgba(120, 86, 42, .14);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.sv-page-inner {
  position: absolute;
  inset: 11% 9% 11% 13%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(6px, 2.4vw, 12px);
  text-align: left;
  color: #3a2410;
}
.sv-page-kicker {
  font-family: var(--font-display, sans-serif);
  font-size: clamp(8px, 2.7vw, 11px);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8a5a25;
}
.sv-page-rule {
  width: 38px;
  height: 2px;
  background: linear-gradient(90deg, #b8893f, rgba(184, 137, 63, 0));
  border-radius: 2px;
}
.sv-page-title {
  font-family: var(--font-serif, serif);
  font-size: clamp(19px, 6.4vw, 30px);
  font-weight: 900;
  line-height: 1.08;
  color: #2c1a0a;
  word-break: keep-all;
}
.sv-page-sub {
  font-family: var(--font-latin, serif);
  font-style: italic;
  font-size: clamp(10px, 3vw, 13px);
  line-height: 1.3;
  color: #6a4a26;
}
.sv-page-cta {
  margin-top: clamp(4px, 1.6vw, 9px);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: clamp(6px, 2vw, 9px) clamp(11px, 3.4vw, 16px);
  border-radius: 999px;
  background: linear-gradient(180deg, #3a2614, #20140a);
  color: #ffe2a0;
  font-family: var(--font-display, sans-serif);
  font-size: clamp(9px, 2.7vw, 12px);
  font-weight: 800;
  letter-spacing: .04em;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 236, 190, .25);
}
.sv-page-cta span:last-child {
  transition: transform .3s ease;
  transform: translateX(calc(var(--flip, 0) * 3px));
}

/* ---- The cover leaf (two faces, hinged at the centre spine) ---- */
.sv-leaf {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 50%;
  transform-origin: left center;
  transform-style: preserve-3d;
  /* 0 → cover lies over the right page; 1 → swung onto the left page. */
  transform: rotateY(calc(var(--flip, 0) * -176deg)) translateZ(.6px);
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.sv-leaf-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
/* Front = the leather cover (uses the book's own colour + texture vars). */
.sv-leaf-front {
  border-radius: 2px 8px 8px 2px;
  background-color: var(--base, #3a2414);
  background-image:
    radial-gradient(150px 220px at 44% 26%, rgba(255, 246, 205, .16), transparent 60%),
    radial-gradient(60% 70% at 48% 40%, var(--warm, rgba(255, 180, 110, .3)), transparent 72%),
    linear-gradient(120deg, rgba(255, 255, 255, .08), transparent 30%, rgba(0, 0, 0, .34) 80%),
    linear-gradient(180deg, var(--mid, #6a4527) 0%, var(--base, #3a2414) 46%, var(--low, #1a0d06) 100%),
    var(--archive-leather);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 230px 230px;
  background-position: center;
  background-blend-mode: screen, soft-light, normal, multiply, soft-light;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .1),
    inset 0 0 0 4px rgba(0, 0, 0, .18),
    inset 0 -10px 20px rgba(0, 0, 0, .46);
  /* No filter here: a filter on the rotating leaf face forces an extra offscreen
     render pass every composite on WebKit (the classic iOS shimmer). Colour is
     already carried by the gradients above. */
}
.sv-leaf-front::before {
  content: "";
  position: absolute;
  inset: clamp(8px, 3vw, 14px);
  border-radius: 4px;
  box-shadow:
    inset 0 0 0 1px rgba(246, 213, 132, .5),
    inset 0 0 0 3px rgba(0, 0, 0, .26),
    inset 0 0 16px rgba(0, 0, 0, .3);
  pointer-events: none;
}
.sv-leaf-front-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 2.2vw, 11px);
  padding: clamp(14px, 5vw, 24px);
  text-align: center;
}
.sv-leaf-logo {
  width: clamp(54px, 17vw, 80px);
  filter: drop-shadow(0 1px 1px rgba(40, 22, 5, .8));
}
.sv-leaf-title {
  font-family: var(--font-serif, serif);
  font-size: clamp(18px, 6vw, 28px);
  font-weight: 900;
  line-height: 1.06;
  color: #ffe8ac;
  word-break: keep-all;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .6), 0 -1px 0 rgba(255, 240, 180, .2);
}
.sv-leaf-foot {
  font-family: var(--font-display, sans-serif);
  font-size: clamp(8px, 2.4vw, 10px);
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #f0cf86;
}
/* Back = the inside cover / endpaper (paper). Pre-rotated 180° so it shows
   correctly once the leaf has swung onto the left page. */
.sv-leaf-back {
  transform: rotateY(180deg);
  border-radius: 8px 2px 2px 8px;
  background-color: #e7d6ad;
  background-image:
    linear-gradient(270deg, rgba(74, 47, 18, .3), transparent 20%),
    radial-gradient(120% 90% at 50% 30%, rgba(255, 248, 224, .55), transparent 66%),
    repeating-linear-gradient(0deg, rgba(96, 64, 28, .05) 0 2px, transparent 2px 5px),
    var(--archive-paper);
  background-size: 100% 100%, 100% 100%, 100% 100%, 300px 220px;
  background-blend-mode: multiply, screen, multiply, multiply;
  box-shadow: inset -7px 0 14px -6px rgba(74, 47, 18, .5);
}

/* Centre spine shadow joining the two pages. */
.sv-spine-shadow {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 14px;
  transform: translateX(-50%) translateZ(.2px);
  background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .42) 48%, rgba(0, 0, 0, 0));
  pointer-events: none;
}

/* will-change only while a flip is actually engaged; removed otherwise. */
.salevery-archive--touch.is-engaged .sv-stage,
.salevery-archive--touch.is-engaged .sv-leaf {
  will-change: transform;
}

/* Hint chip the first time, sits under the closed shelf. */
.sv-hint {
  position: absolute;
  left: 50%;
  bottom: -2px;
  transform: translateX(-50%);
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(20, 12, 6, .72);
  color: #f0cf86;
  font-family: var(--font-display, sans-serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
  pointer-events: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  opacity: .9;
  transition: opacity .3s ease;
}
.salevery-archive--touch.is-engaged .sv-hint {
  opacity: 0;
}

/* Reduced-motion: keep it instant + flat, no 3D sweep. */
@media (prefers-reduced-motion: reduce) {
  .salevery-archive--touch .sv-stage,
  .salevery-archive--touch .sv-leaf,
  .salevery-archive--touch .archive-model {
    transition: opacity .2s ease !important;
  }
  .salevery-archive--touch .sv-leaf {
    transform: rotateY(calc(var(--flip, 0) * -176deg));
  }
}


/* ===== About 영역 모바일 합성 안정화 (hover:none) · 시각 변화 없음 · PC 미적용 ===== */
@media (hover: none) {
  /* FX WebGL 캔버스를 독립 합성 레이어로 격리(스크롤 중 깜빡임 억제) */
  #about [data-fx-canvas] { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
  /* 정적 패럴랙스 레이어의 불필요 will-change 해제 */
  #about .about-stage, #about .about-layer { will-change: auto; }
}

/* ===== About 2단계 모바일 플리커 억제 (hover:none) · PC 미적용 ===== */
@media (hover: none) {
  /* 마우스 추종 글로우(screen 블렌드)는 터치에서 불필요 → 제거 */
  #about .about-layer--glow { display: none; }
}

/* ===== About 추가 안정화 (hover:none) · PC 미적용 ===== */
@media (hover: none) {
  /* 배경 별 반짝임(aboutTwinkle) 정지 */
  #about .about-sky, #about .about-sky::before, #about .about-sky::after { animation: none !important; }
  /* FX 비활성 시 정적 About 이미지 배경(평평한 그라데이션 대신 원래 이미지 유지) */
  #about.fx-fallback {
    background-image: linear-gradient(180deg, rgba(8,10,14,.62), rgba(6,8,10,.86)), url("salevery-about.jpg") !important;
    background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important;
  }
}


/* ===== About 책장 — 태블릿(터치) 확대 (hover:none + min-width:601px) · PC 미적용 ===== */
@media (hover: none) and (min-width: 601px) and (max-width: 1023.98px) {
  .salevery-archive { width: min(calc(100vw - 200px), 540px); margin-top: 40px; }
  .archive-num { font-size: 22px; }
  .archive-spine-title { font-size: 20px; }
  .archive-book--03 .archive-spine-title { font-size: 16px; }
}

/* ===== 터치: 책 '빠져나오는' 변형 완전 차단 (hover:none) · PC 미적용 =====
   탭 시 :hover/:focus/:focus-within(모바일 sticky hover 포함)으로 책이 튀어나와
   화면이 깨지던 문제 차단. 책은 항상 제자리(정지) 유지, 탭하면 링크로 바로 이동. */
@media (hover: none) {
  .archive-book:hover .archive-model,
  .archive-book:focus .archive-model,
  .archive-book:focus-visible .archive-model,
  .archive-book:focus-within .archive-model,
  .archive-book.is-open .archive-model,
  .archive-book.is-committing .archive-model {
    transform: none !important;
    transition: none !important;
  }
  .archive-book:hover .archive-cover,
  .archive-book:focus .archive-cover,
  .archive-book:focus-visible .archive-cover,
  .archive-book:focus-within .archive-cover,
  .archive-book.is-open .archive-cover,
  .archive-book.is-committing .archive-cover {
    opacity: 0 !important;
  }
  .archive-book:hover .archive-foreedge,
  .archive-book:focus-within .archive-foreedge,
  .archive-book.is-open .archive-foreedge { opacity: 0 !important; }
  .archive-book:hover::after,
  .archive-book:focus-within::after,
  .archive-book.is-open::after,
  .archive-book.is-committing::after { opacity: 0 !important; }
  .salevery-archive.is-engaged .archive-filler,
  .salevery-archive.is-engaged .archive-book .archive-model {
    filter: none !important;
    opacity: 1 !important;
  }
}


/* ===== [모바일 책장 = 정적 이미지] 깜빡임 원천 제거 (hover:none) · PC 미적용 =====
   라이브 3D/blend 책장 대신, 현재 모바일 책장 모습 그대로의 정적 이미지 + 책등 투명 링크.
   합성이 전혀 없어 어떤 기기에서도 깜빡임이 없음. PC(hover)는 기존 3D 책장 그대로.  ===== */
.m-shelf { display: none; }                 /* 데스크톱(hover): 숨김 — 3D .salevery-archive 사용 */
.m-shelf__img { display: block; width: 100%; height: auto; border-radius: 10px; }
.m-shelf__book {                             /* 책등 위 투명 탭 영역(인라인 left/top/width/height %로 정렬) */
  position: absolute; display: block; z-index: 2; border-radius: 4px;
  -webkit-tap-highlight-color: rgba(255,255,255,.08);
}
@media (max-width: 760px), (hover: none) {
  .salevery-archive { display: none; }       /* 터치/좁은 화면: 3D 책장 숨김 */
  .m-shelf {                                  /* 정적 책장 사진 + 투명 링크 표시 */
    display: block; position: relative;
    width: min(calc(100vw - 56px), 360px);
    margin: 24px auto 0;
  }
}

/* ===== [모바일 책장 라이트 점등] · hover:none(폰/태블릿) 전용 · PC/타 페이지 영향 0 =====
   스크롤로 책장이 화면에 들어오면(.is-lit) 상단 라이트가 형광등처럼 2~3회 깜빡이며 켜짐.
   처음엔 어둡게(brightness 낮춤) 시작. transform/opacity·1회성 애니메이션만 사용.
   광과민성 대비: prefers-reduced-motion에선 깜빡임 없이 부드럽게 1회 점등. */
@keyframes mShelfLightOn {
  0%   { filter: brightness(.26) saturate(.82) contrast(.97); }
  6%   { filter: brightness(.96) saturate(.97) contrast(1); }   /* 점멸 1 */
  10%  { filter: brightness(.29) saturate(.83) contrast(.97); }
  16%  { filter: brightness(1.07) saturate(1) contrast(1); }    /* 점멸 2 */
  21%  { filter: brightness(.33) saturate(.85) contrast(.98); }
  30%  { filter: brightness(.99) saturate(.99) contrast(1); }   /* 점멸 3 */
  37%  { filter: brightness(.48) saturate(.9) contrast(.98); }  /* 살짝 가라앉음 */
  56%  { filter: brightness(1.04) saturate(1) contrast(1); }
  100% { filter: brightness(1) saturate(1) contrast(1); }       /* 완전 점등 */
}
@keyframes mShelfGlowOn {
  0% { opacity: 0; } 6% { opacity: .72; } 10% { opacity: .07; }
  16% { opacity: .92; } 21% { opacity: .1; } 30% { opacity: .8; }
  37% { opacity: .3; } 56% { opacity: .92; } 100% { opacity: .85; }
}
@media (max-width: 760px), (hover: none) {
  /* 라이트 꺼짐: 책장 어둡게(투명영역은 그대로 투명). 켜질 때를 위한 트랜지션 대비 */
  .m-shelf__img { filter: brightness(.26) saturate(.82) contrast(.97); transition: filter .9s ease; }
  /* 상단 램프 글로우(점등 시 켜짐). 캐비닛 상단 중앙에 집중, 가장자리로 사라져 투명영역 침범 최소화 */
  .m-shelf::after {
    content: ""; position: absolute; inset: 0;
    z-index: 1; pointer-events: none; opacity: 0;
    background: radial-gradient(56% 30% at 50% 9%, rgba(255,229,178,.6), rgba(255,206,132,.2) 52%, transparent 78%);
    mix-blend-mode: screen; transition: opacity .9s ease;
    /* 라이트를 책장(캐비닛) 알파 모양으로 정확히 클립 → 투명 배경/페이지 침범 0 */
    -webkit-mask-image: url("salevery-shelf-mobile.webp"); mask-image: url("salevery-shelf-mobile.webp");
    -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  }
  /* 스크롤 진입 후 1초 지연 → 형광등 점멸 후 완전 점등. 지연 동안엔 어두운 상태(0% 키프레임) 유지(both) */
  .m-shelf.is-lit .m-shelf__img { animation: mShelfLightOn 1.5s cubic-bezier(.2,.7,.3,1) 1s both; }
  .m-shelf.is-lit::after { animation: mShelfGlowOn 1.5s linear 1s both; }
}
/* 광과민성/저모션: 깜빡임 없이 1초 지연 후 부드럽게 1회 점등 */
@media (prefers-reduced-motion: reduce) {
  .m-shelf__img { filter: brightness(.42) saturate(.9); transition: filter 1s ease 1s; }
  .m-shelf.is-lit .m-shelf__img { animation: none; filter: brightness(1) saturate(1); }
  .m-shelf.is-lit::after { animation: none; opacity: .85; transition: opacity 1s ease 1s; }
}

/* ===== [PC 3D 책장 라이트 점등] · 데스크톱(3D 책장 노출) 전용 · 모바일은 .m-shelf 사용 =====
   .salevery-archive는 perspective+preserve-3d라 직접 filter 시 3D가 깨짐 →
   비3D 래퍼(.archive-light-wrap)에 brightness 점멸 적용(헤드리스 검증: 3D 보존).
   점등 후 JS가 래퍼 filter를 제거 → 호버 회전 시 합성 부담/시머 0. 모바일선 래퍼 숨김(.m-shelf 사용). */
.archive-light-wrap { display: block; }
@media (max-width: 760px), (hover: none) { .archive-light-wrap { display: none; } }
@media (min-width: 761px) and (hover: hover) {
  .archive-light-wrap { filter: brightness(.26) saturate(.82) contrast(.97); }
  #about.about-in .archive-light-wrap { animation: mShelfLightOn 1.5s cubic-bezier(.2,.7,.3,1) 1s both; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 761px) and (hover: hover) {
  .archive-light-wrap { filter: brightness(.42) saturate(.9); transition: filter 1s ease 1s; }
  #about.about-in .archive-light-wrap { animation: none; filter: brightness(1) saturate(1); }
}