/* 적바림 3D 시안 전용 스타일 (style.css 위에 덧씌워요) */

::selection { background: var(--accent-soft); color: var(--ink); }

/* 모눈종이를 화면에 고정해요: 3D 물건이 종이 위에 놓인 채로 보이게 */
body { background-image: none; }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--bg);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* ① 첫 화면: 메모가 홈페이지로 */
.d3-hero { position: relative; overflow-x: clip; } /* 번진 캔버스가 가로 스크롤을 만들지 않게 */
.d3-hero-grid { display: grid; }
.d3-step { position: relative; z-index: 2; }

.d3-intro { container-type: inline-size; padding-block: 24px 28px; }
.d3-hero h1 { font-family: var(--font-title); font-size: clamp(34px, 11.4cqi, 66px); font-weight: 400; line-height: 1.22; letter-spacing: -0.02em; -webkit-text-stroke: 0.025em currentColor; }
.d3-hero h1 .pen-under { white-space: nowrap; }
.d3-hint { display: none; align-items: center; gap: 6px; margin-top: 40px; color: var(--accent-text); font-family: var(--font-hand); font-size: 25px; line-height: 1.1; transform: rotate(-1.5deg); transform-origin: left; }
.d3-hero .hero-sub strong { white-space: nowrap; } /* 주황 강조(오직 사장님 명의, 관리비는 오직 0원)는 한 덩어리로 */
.d3-hint svg { width: 22px; height: 30px; flex: none; fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.d3-end .hero-facts { margin-top: 8px; }
/* 휴대폰 첫 화면: 버튼 두 개는 글꼴이 늦게 와도 늘 한 줄 두 칸 (두 줄로 나뉘었다 합쳐지면 아래 그림이 튀어요).
   가격·환불·수정 세 줄 중 가격만 보이고, 세 줄 모두는 이야기 끝(.d3-end)에서 보여요 */
@media (max-width: 899px) {
  .d3-hero .hero-cta { display: grid; grid-template-columns: 1fr 1fr; }
  .d3-hero .hero-cta .jb-btn { padding: 0 8px; white-space: nowrap; }
  .d3-intro .hero-facts { margin-top: 18px; }
  .d3-intro .hero-facts > li + li { display: none; }
}
@media (max-width: 359px) { .d3-hero .hero-cta { grid-template-columns: 1fr; } }

.d3-stage { position: sticky; top: 64px; z-index: 1; height: calc(100svh - 64px - 76px); }
/* 캔버스는 무대 칸 밖으로 번져요: 물건이 칸 끝에서 잘리지 않고 화면 끝으로 나가게 (휴대폰은 화면 양끝까지) */
.d3-canvas, .d3-poster { position: absolute; top: 0; left: -16px; width: calc(100% + 32px); height: 100%; }
.d3-canvas { display: block; opacity: 0; transition: opacity 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.d3-poster { max-width: none; object-fit: contain; object-position: 50% 0; transition: opacity 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); } /* img의 max-width: 100%를 풀어야 번진 칸만큼 커져요 */
.d3-hero.is-ready .d3-canvas { opacity: 1; }
.d3-hero.is-ready .d3-poster { opacity: 0; visibility: hidden; transition: opacity 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s 0.6s; }
.d3-hero.is-fallback .d3-canvas { display: none; }
/* 샘플 화면이 켜졌을 때만 */
.d3-stage-note { position: absolute; top: 6px; right: 0; opacity: 0; transition: opacity 0.4s; }
.d3-hero.is-lit .d3-stage-note { opacity: 1; }

/* 단계 설명: 휴대폰에서는 종이 카드가 장면 아래 절반을 지나가요 */
.d3-step:not(.d3-intro) { min-height: 88svh; padding-bottom: 24px; } /* 다음 카드가 올 때 앞 카드는 화면 위로 빠져요 */
.d3-step[data-step="3"] { min-height: 0; } /* 마지막 카드 뒤에 빈 화면이 남지 않게 */
.d3-card { padding: 20px 20px 22px; border-radius: var(--radius-memo); background: var(--paper); box-shadow: var(--shadow-sm); }
.d3-step-t { font-family: var(--font-title); font-size: clamp(26px, 7vw, 38px); font-weight: 400; line-height: 1.25; letter-spacing: -0.02em; -webkit-text-stroke: 0.025em currentColor; text-wrap: balance; }
.d3-card p { max-width: 30em; margin-top: 12px; color: var(--muted); font-size: 17px; font-weight: 600; line-height: 1.62; letter-spacing: -0.02em; }
.d3-card .jb-btn { margin-top: 22px; }

@media (min-width: 900px) {
  .d3-hero-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 40px; }
  .d3-intro { grid-column: 1; grid-row: 1; display: grid; align-content: center; min-height: calc(100svh - 76px); padding-block: 40px; }
  .d3-hint { display: flex; }
  .d3-end { display: none; }
  .d3-step[data-step="1"] { grid-row: 2; }
  .d3-step[data-step="2"] { grid-row: 3; }
  .d3-step[data-step="3"] { grid-row: 4; }
  .d3-step:not(.d3-intro) { grid-column: 1; display: grid; align-content: center; min-height: 92svh; padding-bottom: 0; }
  .d3-stage { grid-column: 2; grid-row: 1 / span 4; align-self: start; top: 76px; height: calc(100svh - 76px); }
  /* 왼쪽은 글 칸과의 틈까지 (끝은 흐리게), 오른쪽은 화면 끝까지 */
  .d3-canvas, .d3-poster { left: -40px; width: calc(100% + 40px + max(16px, (100vw - var(--wrap-max)) / 2)); -webkit-mask-image: linear-gradient(to right, transparent, #000 72px); mask-image: linear-gradient(to right, transparent, #000 72px); }
  .d3-poster { object-position: 0 50%; }
  .d3-stage-note { top: auto; bottom: 18px; }
  .d3-card { padding: 0; background: none; box-shadow: none; }
  .d3-step-t { font-size: clamp(30px, 3vw, 40px); }
  .d3-card p { font-size: 18px; }
}

/* ③ 샘플 겹쳐 보기 (Readymag의 겹친 사이트 더미처럼)
   브라우저 창 여섯 장이 뒤로 기대어 겹쳐 있고, 내리면 앞 장이 넘어가고 다음 장이 일어서요.
   자리와 기울기는 stack.js가 스크롤마다 정해요. 움직임 줄이기 설정이면 아래 평범한 목록이 그대로 보여요. */
@property --lift { syntax: "<length>"; inherits: false; initial-value: 0px; }

.st { overflow-x: clip; } /* 넘어가는 장이 가로 스크롤을 만들지 않게 */
.st-stage, .st-bar { display: none; }
.st.is-3d { padding-bottom: 0; }
.st.is-3d .samples { display: none; }
.st-head .samples-note { max-width: 36em; margin-top: var(--space-3); } /* 가상 업체 안내는 제목 설명 바로 아래: 샘플을 넘기기 전에 읽혀요 */

/* 손가락으로 넘길 때만 장마다 멈춰 서요 (마우스 휠은 그대로). 자리 표시는 stack.js가 트랙 안에 놓아요 */
.st.is-3d .st-track { position: relative; }
.st-snap { position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none; scroll-snap-align: start; }
@media (pointer: coarse) { html:has(.st.is-3d) { scroll-snap-type: y proximity; } }

/* 핀: 휴대폰은 제목이 위로 빠지고 장과 설명만 화면에 남아요 (--st-head-h는 stack.js가 재요) */
.st.is-3d .st-pin { position: sticky; top: calc(65px - var(--st-head-h, 0px)); height: calc(100svh - 65px - 76px + var(--st-head-h, 0px)); }
.st.is-3d .st-grid { display: flex; flex-direction: column; height: 100%; }
.st.is-3d .st-head { flex: none; margin-bottom: 0; }
.st-head .lead { text-wrap: balance; }
.st-visual { display: contents; }
.st.is-3d .st-visual { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
.st-pick { display: none; }
.st.is-3d .st-pick { display: flex; flex: none; flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px var(--space-4); padding: 0 16px; scrollbar-width: none; }
.st.is-3d .st-pick::-webkit-scrollbar { display: none; }
.st-pick .d3-chip { flex: none; }
.st.is-3d .st-stage { position: relative; display: block; flex: 1 1 auto; min-height: 0; perspective: var(--st-persp, 1800px); perspective-origin: 50% var(--st-eye, -40%); touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.st.is-3d .st-stage::after { content: ""; position: absolute; bottom: calc(var(--st-floor, 16px) - 7px); left: 50%; z-index: 0; width: calc(var(--st-w, 600px) * 0.84); height: 14px; translate: -50% 0; border-radius: 50%; background: rgba(18, 20, 23, 0.22); filter: blur(8px); opacity: var(--touch, 1); pointer-events: none; } /* 앞 장이 종이에 닿은 자리: 닿은 곳만 짙은 그림자 */
.st.is-3d .st-bar { display: flex; flex: none; flex-direction: column; gap: var(--space-4); padding-bottom: var(--space-3); }

.st-sheet { position: absolute; bottom: var(--st-floor, 16px); left: 50%; width: var(--st-w, 600px); margin-left: calc(var(--st-w, 600px) / -2); transform-origin: 50% 100%; will-change: transform, opacity; cursor: pointer; transition: --lift 0.25s cubic-bezier(0.2, 0.7, 0.2, 1); }
.st-sheet.is-front { cursor: zoom-in; }
.st-sheet.is-front:hover { --lift: 14px; }
.st-win { position: relative; }
.st-win img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 750; }
.st-win::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--bg); opacity: var(--fog, 0); pointer-events: none; } /* 멀수록 종이 바탕에 묻혀요 */
.st-tab { position: absolute; bottom: 100%; left: calc(3% + var(--f, 0) * 94%); translate: calc(var(--f, 0) * -100%) 0; padding: 6px 12px 2px; border-radius: 8px 8px 0 0; background: var(--browser-bar); color: var(--ink); font: 400 16px/1.2 var(--font-hand); white-space: nowrap; opacity: var(--tab-o, 1); }
.st-sheet.is-front .st-tab { background: var(--paper); color: var(--accent-text); } /* 앞 장 이름표는 고른 탭처럼 흰 바탕 (주황 글씨 대비 5.2:1) */

/* 설명 여섯 개를 한자리에 겹쳐 두고 고른 것만 보여요 (자리는 가장 긴 설명만큼) */
.st-cap { display: grid; }
.st-cap-item { grid-area: 1 / 1; visibility: hidden; opacity: 0; transition: opacity 0.2s, visibility 0s 0.2s; }
.st-cap-item.is-on { visibility: visible; opacity: 1; transition: opacity 0.3s 0.05s; }
/* 글씨는 홈페이지 샘플 카드와 같은 말투: 제목은 주황 제목 글꼴(굵기 하나), 그 아래 업종·쪽수는 회색 손글씨 */
.st-cap h3 { color: var(--accent); font-family: var(--font-title); font-size: 24px; font-weight: 400; letter-spacing: -0.03em; line-height: 1.4; text-wrap: balance; }
.st-cap p { max-width: 36em; margin-top: 8px; color: var(--muted); font-size: 16px; font-weight: 600; line-height: 1.6; }
.st-cap .sample-tag { margin-top: 4px; color: var(--muted); font-size: 17px; font-weight: 400; line-height: 1.3; }
@media (max-width: 899px) and (max-height: 760px) {
  .st-cap .sample-tag + p { display: none; } /* 키가 작은 휴대폰은 장이 너무 작아지지 않게 긴 설명을 빼요 (화면 더 보기에 다 있어요) */
}

.d3-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.d3-chip { min-height: 44px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); color: var(--muted); font: 700 15px/1 var(--font-sans); letter-spacing: -0.02em; cursor: pointer; transition: background-color 0.18s, border-color 0.18s, color 0.18s; }
.d3-chip:hover { border-color: var(--ink); color: var(--ink); }
.d3-chip[aria-pressed="true"] { border-color: var(--ink); background: var(--paper) var(--pen-under) no-repeat 50% calc(100% - 6px) / calc(100% - 26px) 7px; color: var(--ink); } /* 고른 이름표는 주황 펜 밑줄 */

@media (min-width: 900px) {
  /* 첫 화면과 같은 5:7 축: 왼쪽에 제목·설명·이름표, 오른쪽에 겹친 장 */
  .st.is-3d { padding-top: 0; } /* 핀 안에서 가운데 정렬이라 위 여백은 핀이 이미 가져요 */
  .st.is-3d .st-pin { top: 77px; height: calc(100svh - 77px); }
  .st.is-3d .st-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: 1fr auto auto 1fr; column-gap: 40px; }
  .st.is-3d .st-head { grid-column: 1; grid-row: 2; }
  .st.is-3d .st-bar { grid-column: 1; grid-row: 3; margin-top: var(--space-7); padding-bottom: 0; }
  .st.is-3d .st-visual { grid-column: 2; grid-row: 1 / -1; height: 100%; }
  .st.is-3d .st-pick { justify-content: center; margin: 0 0 var(--space-6); padding: 0; overflow: visible; }
}

@media (prefers-reduced-motion: reduce) {
  .d3-canvas, .d3-poster, .d3-stage-note { transition: none; }
}
.nobr { white-space: nowrap; } /* 한 덩어리로 읽혀야 하는 말 (D-day를) */