/* ==========================================================================
   표쌤코딩 제품 카달로그 — 책 넘기기 뷰어
   v1.0 (2026-09-21)
   의존성 없음. scripts/brochure.js 와 한 쌍으로 동작.
   ========================================================================== */

.bk-root{
  --bk-blue:#1D5FD0;
  --bk-blue-dark:#164BA6;
  --bk-yellow:#FFD400;
  --bk-ink:#161d29;
  --bk-page-ratio:0.6945;      /* 832 / 1198 */
  --bk-page-w:320px;
  --bk-page-h:461px;
  --bk-flip:620ms;

  position:fixed; inset:0; z-index:9999;
  display:none;
  background:rgba(10,16,30,.90);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  color:#fff;
  font-family:'Pretendard Variable',Pretendard,'Noto Sans KR',system-ui,sans-serif;
  opacity:0; transition:opacity .25s ease;
}
.bk-root.is-open{ display:flex; flex-direction:column; }
.bk-root.is-visible{ opacity:1; }
body.bk-locked{ overflow:hidden; }

/* ── 헤더 ─────────────────────────────────────────────── */
.bk-head{
  flex:0 0 auto; display:flex; align-items:center; gap:14px;
  padding:14px 18px; border-bottom:1px solid rgba(255,255,255,.12);
}
.bk-title{ display:flex; align-items:center; gap:10px; min-width:0; }
.bk-logo{
  width:30px; height:30px; flex:0 0 auto; border-radius:8px;
  display:grid; place-items:center; font-weight:900; font-size:15px;
  background:var(--bk-yellow); color:var(--bk-ink);
}
.bk-title strong{ font-size:16px; font-weight:800; letter-spacing:-.01em; }
.bk-title small{ display:block; font-size:11px; opacity:.6; font-weight:500; letter-spacing:.04em; }
.bk-head-spacer{ flex:1 1 auto; }

.bk-iconbtn{
  appearance:none; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.07);
  color:#fff; width:38px; height:38px; border-radius:10px; cursor:pointer;
  display:grid; place-items:center; font-size:15px; line-height:1;
  transition:background .15s ease, border-color .15s ease, transform .15s ease;
}
.bk-iconbtn:hover{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.38); }
.bk-iconbtn:active{ transform:scale(.94); }
.bk-iconbtn.is-on{ background:var(--bk-yellow); border-color:var(--bk-yellow); color:var(--bk-ink); }
.bk-iconbtn svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* ── 무대 ─────────────────────────────────────────────── */
.bk-stage{
  flex:1 1 auto; position:relative; min-height:0;
  display:grid; place-items:center; padding:18px 12px;
}
.bk-book{
  position:relative;
  width:calc(var(--bk-page-w) * 2);
  height:var(--bk-page-h);
  perspective:2600px;
  transition:transform .35s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}
.bk-book::after{   /* 책 그림자 */
  content:''; position:absolute; left:6%; right:6%; bottom:-22px; height:26px;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.55), transparent 72%);
  filter:blur(6px); pointer-events:none;
}

/* 낱장(leaf) = 앞/뒤 두 페이지 */
.bk-leaf{
  position:absolute; top:0; left:50%;
  width:var(--bk-page-w); height:var(--bk-page-h);
  transform-origin:left center;
  transform-style:preserve-3d;
  transition:transform var(--bk-flip) cubic-bezier(.45,.05,.3,1);
  will-change:transform;
}
.bk-leaf.is-flipped{ transform:rotateY(-180deg); }
.bk-face{
  position:absolute; inset:0;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  background:#fff; overflow:hidden;
  box-shadow:0 2px 16px rgba(0,0,0,.28);
}
.bk-face img{ width:100%; height:100%; display:block; object-fit:contain; background:#fff; }
.bk-face--back{ transform:rotateY(180deg); }

/* 접힘선 그라데이션 (책등 쪽 음영) */
.bk-face--front::before,
.bk-face--back::before{
  content:''; position:absolute; top:0; bottom:0; width:34px; pointer-events:none; z-index:2;
}
.bk-face--front::before{ left:0;  background:linear-gradient(to right, rgba(0,0,0,.20), transparent); }
.bk-face--back::before{  right:0; background:linear-gradient(to left,  rgba(0,0,0,.20), transparent); }

/* 페이지 번호 */
.bk-pagenum{
  position:absolute; bottom:6px; z-index:3;
  font-size:10px; letter-spacing:.06em; color:rgba(22,29,41,.38);
  background:rgba(255,255,255,.75); padding:1px 7px; border-radius:99px;
}
.bk-face--front .bk-pagenum{ right:10px; }
.bk-face--back  .bk-pagenum{ left:10px; }

/* 좌/우 클릭 영역 */
.bk-hit{
  position:absolute; top:0; height:100%; width:50%; z-index:60;
  background:none; border:0; padding:0; cursor:pointer; outline:none;
}
.bk-hit--prev{ left:0;  cursor:w-resize; }
.bk-hit--next{ right:0; cursor:e-resize; }
.bk-hit:disabled{ cursor:default; }

/* ── 하단 컨트롤 ──────────────────────────────────────── */
.bk-foot{
  flex:0 0 auto; display:flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 18px calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid rgba(255,255,255,.12);
}
.bk-navbtn{
  appearance:none; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.07);
  color:#fff; height:40px; padding:0 16px; border-radius:99px; cursor:pointer;
  font-size:13px; font-weight:700; display:inline-flex; align-items:center; gap:7px;
  transition:background .15s ease, opacity .15s ease;
}
.bk-navbtn:hover:not(:disabled){ background:rgba(255,255,255,.17); }
.bk-navbtn:disabled{ opacity:.3; cursor:default; }
.bk-navbtn{ white-space:nowrap; }
.bk-navbtn svg{
  width:16px; height:16px; flex:0 0 auto;
  fill:none; stroke:currentColor; stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round;
}
.bk-counter{
  min-width:92px; text-align:center; font-size:13px; font-weight:700;
  font-variant-numeric:tabular-nums; letter-spacing:.02em;
}
.bk-counter b{ color:var(--bk-yellow); }

/* ── 썸네일 ───────────────────────────────────────────── */
.bk-thumbs{
  flex:0 0 auto; display:none; gap:8px; overflow-x:auto; overscroll-behavior-x:contain;
  padding:10px 16px 14px; border-top:1px solid rgba(255,255,255,.12);
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.3) transparent;
}
.bk-thumbs.is-open{ display:flex; }
.bk-thumbs::-webkit-scrollbar{ height:6px; }
.bk-thumbs::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.28); border-radius:99px; }
.bk-thumb{
  flex:0 0 auto; width:54px; padding:0; border:2px solid transparent; border-radius:6px;
  background:none; cursor:pointer; overflow:hidden; line-height:0; opacity:.55;
  transition:opacity .15s ease, border-color .15s ease;
}
.bk-thumb img{ width:100%; display:block; background:#fff; }
.bk-thumb:hover{ opacity:.9; }
.bk-thumb.is-active{ opacity:1; border-color:var(--bk-yellow); }

/* ── 모바일: 한 장씩 ──────────────────────────────────── */
.bk-root.is-single .bk-book{ width:var(--bk-page-w); }
.bk-root.is-single .bk-leaf{ left:0; transform-origin:center center; }
.bk-root.is-single .bk-face--front::before,
.bk-root.is-single .bk-face--back::before{ display:none; }

@media (max-width:640px){
  .bk-head{ padding:10px 12px; gap:10px; }
  .bk-title small{ display:none; }
  .bk-iconbtn{ width:36px; height:36px; }
  .bk-stage{ padding:12px 8px; }
  .bk-navbtn span{ display:none; }
  .bk-navbtn{ padding:0; width:46px; justify-content:center; }
  .bk-navbtn svg{ width:18px; height:18px; }
}

@media (prefers-reduced-motion:reduce){
  .bk-leaf{ transition-duration:1ms; }
  .bk-root{ transition-duration:1ms; }
}

/* ── 한 장씩 보기(모바일) 트랙 ───────────────────────── */
.bk-single{
  display:none; position:relative; overflow:hidden;
  width:var(--bk-page-w); height:var(--bk-page-h);
  background:#fff; box-shadow:0 10px 34px rgba(0,0,0,.42);
}
.bk-single-track{
  display:flex; height:100%; width:100%;
  transition:transform 380ms cubic-bezier(.4,0,.2,1);
  will-change:transform;
}
.bk-slide{ flex:0 0 100%; height:100%; background:#fff; }
.bk-slide img{ width:100%; height:100%; display:block; object-fit:contain; }

.bk-root.is-single .bk-single{ display:block; }
.bk-root.is-single .bk-book{ display:none; }
.bk-root:not(.is-single) .bk-single{ display:none; }

/* 전체화면일 때 배경 채우기 */
.bk-root:fullscreen{ background:#0a101e; }

/* ── 상단 메뉴 "제품 카달로그" 알약 ──────────────────── */
.nav-right-menu .nav-pill-catalog{
  background:#FFD400 !important; color:#161d29 !important;
  border-radius:4px !important; margin-left:8px !important;
  font-weight:800 !important; padding:9px 17px !important;
  border-color:transparent !important; box-shadow:none !important;
}
.nav-right-menu .nav-pill-catalog:hover{ background:#F0C800 !important; color:#161d29 !important; filter:none !important; }