/* BRANNEW 리뉴얼 시안 — 은회색 모노크롬 (레퍼런스: FS 60P / CHANEL J12 / NOMOS 실측) */
@font-face { font-family: "Michroma"; src: url(../fonts/michroma.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Pretendard"; src: url(../fonts/pretendard-400.woff2?v=33) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Pretendard"; src: url(../fonts/pretendard-600.woff2?v=33) format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --u: 1px;   /* 33판: 1440 기준 1px. 1024~1439 는 화면 폭 비율로 줄인다(아래·각 쪽 머리 스크립트) */
  --bg: #ebebeb; --bg-2: #e0e0e0; --bg-3: #f4f4f4; --glow: #a3a3a3; --glow-2: #d6d6d6;
  --fg: #0b0b0b; --fg-2: #3b3b3b; --muted: #767676; --line: rgba(11, 11, 11, 0.14); --line-2: rgba(11, 11, 11, 0.32);
  --ink: #0e0e0e; --on-ink: #ededed; --on-ink-2: #9b9b9b; --ink-line: rgba(237, 237, 237, 0.18);
  --err: #b3261e; --ok: #1e6b3a;
  --f-disp: "Michroma", "Pretendard", sans-serif;
  --f-ko: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --fs-12: calc(12 * var(--u)); --fs-14: calc(14 * var(--u)); --fs-16: calc(16 * var(--u)); --fs-18: calc(18 * var(--u)); --fs-20: calc(20 * var(--u)); --fs-24: calc(24 * var(--u)); --fs-28: calc(28 * var(--u)); --fs-32: calc(32 * var(--u)); --fs-40: calc(40 * var(--u));
  --fs-48: calc(48 * var(--u)); --fs-56: calc(56 * var(--u)); --fs-64: calc(64 * var(--u)); --fs-96: calc(96 * var(--u));
  --sp-4: calc(4 * var(--u)); --sp-8: calc(8 * var(--u)); --sp-12: calc(12 * var(--u)); --sp-16: calc(16 * var(--u)); --sp-20: calc(20 * var(--u)); --sp-24: calc(24 * var(--u)); --sp-32: calc(32 * var(--u)); --sp-40: calc(40 * var(--u)); --sp-48: calc(48 * var(--u)); --sp-64: calc(64 * var(--u));
  --gut: calc(40 * var(--u)); --head: calc(64 * var(--u));
  --z-stage: 1; --z-labels: 3; --z-mbar: 15; --z-head: 20; --z-drawer: 30; --z-loader: 50; --z-toast: 60;
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
}
/* 33판(PSPD): PC 짜임은 1440 하나 — 1024~1439 는 1440 화면을 비율로 줄여 보여 준다. JS 가 없을 때의 대비값(스크롤바 폭 포함) */
@media (min-width: 1024px) and (max-width: 1439px) { :root { --u: calc(100vw / 1440); } }
@media (max-width: 1023px) { :root { --gut: calc(20 * var(--u)); --head: calc(56 * var(--u)); } }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--f-ko); font-size: var(--fs-16); line-height: 1.6; color: var(--fg); letter-spacing: -0.005em;
  background-color: var(--bg); word-break: keep-all; overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
.bg-glow { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(55% 65% at 80% 16%, var(--glow) 0%, rgba(163, 163, 163, 0) 70%),
    radial-gradient(45% 55% at 12% 88%, var(--glow-2) 0%, rgba(214, 214, 214, 0) 70%),
    var(--bg); }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--fg); outline-offset: calc(4 * var(--u)); }
.on-ink :focus-visible, .ink :focus-visible { outline-color: var(--on-ink); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.disp { font-family: var(--f-disp); font-weight: 400; letter-spacing: 0; line-height: 1; }
.wrap { padding-left: var(--gut); padding-right: var(--gut); }

/* ---------- 머리 ---------- */
.head { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-head); height: var(--head);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 var(--gut);
  transition: color .3s, background-color .3s; }
.head.scrolled { background-color: rgba(235, 235, 235, 0.78); backdrop-filter: blur(calc(12 * var(--u))); -webkit-backdrop-filter: blur(calc(12 * var(--u))); }
.head.on-ink { color: var(--on-ink); }
.head.on-ink.scrolled { background-color: rgba(14, 14, 14, 0.7); }
.head nav { display: flex; gap: var(--sp-24); font-size: var(--fs-14); }
.head nav a { position: relative; padding: var(--sp-8) 0; }
.head nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: var(--sp-4); height: 1px; background: currentColor; transition: right .3s var(--ease); }
.head nav a:hover::after, .head nav a[aria-current="page"]::after { right: 0; }
.logo { font-family: var(--f-disp); font-size: var(--fs-18); justify-self: center; display: flex; align-items: center; gap: var(--sp-8); }
.logo svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
.util { justify-self: end; display: flex; gap: var(--sp-20); align-items: center; font-size: var(--fs-14); }
.util button { background: none; border: 0; cursor: pointer; display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-8) 0; }
.util svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
.menu-btn { display: none !important; background: none; border: 0; width: calc(40 * var(--u)); height: calc(40 * var(--u)); align-items: center; justify-content: flex-start; cursor: pointer; padding: 0; }
.menu-btn svg { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
@media (max-width: 1023px) {
  .head nav, .util .t { display: none; }
  .head { grid-template-columns: auto 1fr auto; }
  .logo { justify-self: start; order: 0; }
  .menu-btn { display: flex !important; }
}
.drawer { position: fixed; inset: 0; z-index: var(--z-drawer); background: var(--ink); color: var(--on-ink); padding: var(--sp-20) var(--gut) var(--sp-40);
  display: flex; flex-direction: column; transform: translateY(-100%); transition: transform .5s var(--ease); visibility: hidden; }
.drawer.open { transform: none; visibility: visible; }
.drawer .top { display: flex; justify-content: space-between; align-items: center; height: var(--sp-24); }
.drawer .top button { background: none; border: 0; color: inherit; cursor: pointer; padding: var(--sp-8); font-size: var(--fs-14); }
.drawer nav { margin-top: var(--sp-48); display: flex; flex-direction: column; }
.drawer nav a { font-size: var(--fs-32); font-weight: 600; padding: var(--sp-12) 0; border-bottom: 1px solid var(--ink-line); letter-spacing: -0.015em; }
.drawer .meta { margin-top: auto; color: var(--on-ink-2); font-size: var(--fs-14); }

/* ---------- 버튼 ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-12); height: calc(56 * var(--u)); padding: 0 var(--sp-32);
  font-size: var(--fs-16); font-weight: 600; border: 1px solid var(--fg); background: var(--fg); color: var(--bg-3); cursor: pointer;
  transition: background-color .25s, color .25s, transform .25s var(--ease); }
.btn:hover { background: transparent; color: var(--fg); }
.btn:active { transform: scale(0.98); }
.btn.line { background: transparent; color: var(--fg); }
.btn.line:hover { background: var(--fg); color: var(--bg-3); }
.btn[disabled], .btn.loading { opacity: .45; pointer-events: none; }
.btn .arr { transition: transform .3s var(--ease); }
.btn:hover .arr { transform: translateX(var(--sp-4)); }
.ink .btn { background: var(--on-ink); color: var(--ink); border-color: var(--on-ink); }
.ink .btn:hover { background: transparent; color: var(--on-ink); }
.ink .btn.line { background: transparent; color: var(--on-ink); }
.ink .btn.line:hover { background: var(--on-ink); color: var(--ink); }
.tlink { display: inline-flex; gap: var(--sp-8); align-items: center; font-size: var(--fs-14); font-weight: 600; border-bottom: 1px solid currentColor; padding-bottom: var(--sp-4); }

/* ---------- 로더 ---------- */
.loader { position: fixed; inset: 0; z-index: var(--z-loader); display: grid; place-items: center; background: var(--bg); transition: opacity .8s var(--ease), visibility .8s; }
.loader.done { opacity: 0; visibility: hidden; }
.loader svg { width: min(60vmin, calc(480 * var(--u))); height: min(60vmin, calc(480 * var(--u))); }
.loader circle { fill: none; stroke: var(--line); stroke-width: 1; }
.loader circle.p { stroke: var(--fg); stroke-dasharray: 1; stroke-dashoffset: 1; transform: rotate(-90deg); transform-origin: center; transition: stroke-dashoffset .4s; }
.loader .t { position: absolute; font-size: var(--fs-12); color: var(--muted); }

/* ---------- 3D 무대 ---------- */
/* 사진 무대: 장면마다 같은 자리에서 한 장씩 바뀐다. 무대 전체를 multiply 로 깔아 사진 칸의 흰/연회색이 바탕에 녹는다 */
.stage { position: fixed; inset: 0; z-index: var(--z-stage); pointer-events: none; transition: opacity .6s; mix-blend-mode: multiply; --x: 0; }
.stage.off { opacity: 0; }
.stage .pic { position: absolute; left: 50%; top: 50%; width: min(62vh, 40vw); opacity: 0; transform: translate(calc(-50% + var(--x) * 24vw), -50%) scale(0.96); transition: opacity .9s var(--ease), transform 1.2s var(--ease); }
.stage .pic.wide { width: min(84vh, 52vw); -webkit-mask-image: linear-gradient(180deg, #000 76%, transparent 100%); mask-image: linear-gradient(180deg, #000 76%, transparent 100%); } /* 사진 칸 아래에서 잘린 밴드를 흐리게 지운다 */
.stage .pic.on { opacity: 1; transform: translate(calc(-50% + var(--x) * 24vw), -50%) scale(1); }
@media (max-width: 1023px) { .stage .pic { top: 36%; width: 78vw; transform: translate(-50%, -50%) scale(0.96); } .stage .pic.wide { width: 92vw; } .stage .pic.on { transform: translate(-50%, -50%) scale(1); } }
.giant { position: absolute; z-index: 0; font-family: var(--f-disp); line-height: .9; white-space: nowrap; pointer-events: none; color: var(--fg); }
.layer { position: relative; z-index: 2; }

.hero { min-height: 100vh; min-height: 100svh; position: relative; overflow: hidden; }
.hero .giant { left: 50%; top: 50%; transform: translate(-50%, -54%); font-size: 12vw; }
.hero .layer { position: absolute; left: var(--gut); right: var(--gut); bottom: var(--sp-40); display: grid; grid-template-columns: 1fr auto; align-items: end; gap: var(--sp-32); }
.hero .since { font-family: var(--f-disp); font-size: var(--fs-14); display: inline-flex; gap: var(--sp-12); align-items: center; }
.hero .since::before { content: ""; width: var(--sp-40); height: 1px; background: currentColor; }
.hero h1 { font-size: var(--fs-48); line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; margin: var(--sp-16) 0 var(--sp-16); }
.hero p { color: var(--fg-2); max-width: 26em; }
.hero .acts { display: flex; gap: var(--sp-12); margin-top: var(--sp-32); flex-wrap: wrap; }
@media (max-width: 1023px) {
  .hero .giant { top: 30%; font-size: 11.6vw; }
  .hero .layer { grid-template-columns: 1fr; bottom: var(--sp-24); }
  .hero h1 { font-size: var(--fs-32); }
  .hero .acts .btn { flex: 1; padding: 0 var(--sp-12); font-size: var(--fs-14); white-space: nowrap; gap: var(--sp-8); }
}

/* 이야기 단계 */
.step { min-height: 130vh; position: relative; display: flex; align-items: center; overflow-x: clip; }
main, .foot { overflow-x: clip; }
.step .giant { top: 50%; transform: translateY(-50%); font-size: 13vw; left: var(--gut); }
.step .giant.num { font-size: 15vw; }
.step .giant.g-eng { font-size: 8.5vw; left: var(--gut); right: auto; }
.step .giant.l { left: var(--gut); }
.panel { width: min(34%, calc(440 * var(--u))); }
.panel.r { margin-left: auto; }
.panel .no { font-family: var(--f-disp); font-size: var(--fs-12); color: var(--muted); display: block; margin-bottom: var(--sp-24); }
.panel h2 { font-size: var(--fs-40); line-height: 1.25; font-weight: 600; letter-spacing: -0.02em; margin-bottom: var(--sp-20); }
.panel p { color: var(--fg-2); }
.panel .tlink { margin-top: var(--sp-32); }
.panel .model { font-family: var(--f-disp); font-size: var(--fs-64); line-height: 1; margin-bottom: var(--sp-20); }
.panel .price { font-size: var(--fs-24); font-weight: 600; margin: var(--sp-20) 0 var(--sp-32); }
.reveal > * { opacity: 0; transform: translateY(var(--sp-24)); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in > * { opacity: 1; transform: none; }
.reveal.in > *:nth-child(2) { transition-delay: .08s; } .reveal.in > *:nth-child(3) { transition-delay: .16s; }
.reveal.in > *:nth-child(4) { transition-delay: .24s; } .reveal.in > *:nth-child(5) { transition-delay: .32s; }
@media (max-width: 1023px) {
  .step { align-items: flex-end; padding-bottom: 12vh; }
  .panel, .panel.r { width: 100%; margin: 0; background: rgba(235, 235, 235, 0.86); backdrop-filter: blur(calc(8 * var(--u))); -webkit-backdrop-filter: blur(calc(8 * var(--u))); padding: var(--sp-24); }
  .panel h2 { font-size: var(--fs-24); }
  .panel .model { font-size: var(--fs-40); }
  .step .giant { top: 22%; font-size: 12vw; } .step .giant.num { font-size: 23vw; } .step .giant.g-eng { font-size: 12vw; }
}

/* ---------- 컬렉션 ---------- */
.sec { position: relative; z-index: 2; padding-top: var(--sp-64); padding-bottom: var(--sp-64); }
.sec-head { display: flex; justify-content: space-between; align-items: end; gap: var(--sp-24); margin-bottom: var(--sp-40); }
.sec-head h2 { font-size: var(--fs-40); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }
.sec-head .disp { font-size: var(--fs-14); color: var(--muted); display: block; margin-bottom: var(--sp-16); }
.colls { display: grid; grid-template-columns: 7fr 5fr; gap: var(--sp-20); }
.coll { position: relative; background: var(--bg-2); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--sp-32); height: clamp(calc(420 * var(--u)), 40vw, calc(600 * var(--u))); }
.coll .frame { position: absolute; top: var(--sp-32); right: var(--sp-32); bottom: calc(104 * var(--u)); left: var(--sp-32); } /* 틀에 transform 을 두면 multiply 가 막혀 흰 네모가 남는다 */
.coll .frame .ph { transition: transform 1.2s var(--ease); }
.coll .frame .ph.crop { inset: 0 auto; left: 50%; width: auto; height: 100%; aspect-ratio: 1/1; transform: translateX(-50%); }
.coll:hover .frame .ph { transform: scale(1.04); }
.coll:hover .frame .ph.crop { transform: translateX(-50%) scale(1.04); }
.coll .bot { position: relative; display: flex; justify-content: space-between; align-items: end; gap: var(--sp-16); border-top: 1px solid var(--line); padding-top: var(--sp-16); }
.coll h3 { font-size: var(--fs-24); font-weight: 600; letter-spacing: -0.015em; display: flex; align-items: baseline; gap: var(--sp-12); }
.coll h3 .n { font-family: var(--f-disp); font-weight: 400; font-size: var(--fs-14); color: var(--muted); letter-spacing: 0; }
.coll p { color: var(--fg-2); font-size: var(--fs-14); }
@media (max-width: 1023px) { .colls { grid-template-columns: 1fr; } .coll { height: calc(400 * var(--u)); padding: var(--sp-24); } .coll .frame { top: var(--sp-24); right: var(--sp-24); left: var(--sp-24); bottom: calc(96 * var(--u)); } .coll h3 { font-size: var(--fs-20); } }

/* 베스트 — 가로 띠 */
.best { overflow: hidden; }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(calc(280 * var(--u)), 24vw); gap: var(--sp-20); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut); padding-bottom: var(--sp-24); scrollbar-width: thin; }
.rail::-webkit-scrollbar { height: 2px; } .rail::-webkit-scrollbar-thumb { background: var(--fg); }
.pcard { scroll-snap-align: start; display: block; }
.pcard .im { aspect-ratio: 1/1; background: var(--bg-2); position: relative; overflow: hidden; }
/* 사진 한 장: 통사진은 여백을 두고 담고, 잘라 쓴 칸은 꽉 채운다(칸 배경 = 흰/연회색 → multiply 로 카드 바탕에 녹음) */
.ph { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; mix-blend-mode: multiply; transition: opacity .6s, transform 1s var(--ease); }
.ph.crop { inset: 7%; width: 86%; height: 86%; overflow: hidden; display: block; } /* 칸 가장자리(흰색)는 multiply 로 카드 바탕에 녹아 경계가 안 보인다 */
.ph.crop img { position: absolute; max-width: none; display: block; }
.ph.lift img { filter: brightness(1.07); }
.cr { display: block; position: relative; overflow: hidden; }
.stage .pic.cr, .eng .face .cr { position: absolute; }
.cr.lift img { filter: brightness(1.07); }
.pcard .im .ph + .ph { opacity: 0; }
.pcard:hover .im .ph:first-child { transform: scale(1.05); }
.pcard:hover .im.dual .ph:first-child { opacity: 0; }
.pcard:hover .im .ph + .ph { opacity: 1; }
.pcard .meta { padding-top: var(--sp-16); display: grid; grid-template-columns: 1fr auto; gap: var(--sp-4) var(--sp-16); }
.pcard .m { font-family: var(--f-disp); font-size: var(--fs-14); }
.pcard .s { grid-column: 1 / -1; font-size: var(--fs-14); color: var(--muted); }
.pcard .pr { font-weight: 600; font-size: var(--fs-16); }
@media (max-width: 1023px) { .rail { grid-auto-columns: 76vw; } .grid .pcard .meta { grid-template-columns: 1fr; gap: var(--sp-4); } .grid .pcard .m { font-size: var(--fs-12); overflow-wrap: anywhere; } }

/* ---------- 맞춤제작 (검정) ---------- */
.ink { background: var(--ink); color: var(--on-ink); position: relative; z-index: 2; }
.custom-band { min-height: 100vh; padding-top: var(--sp-64); padding-bottom: var(--sp-64); display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; }
.custom-band .giant { position: relative; color: var(--on-ink); font-size: 8.5vw; line-height: 1; }
.custom-band .mid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--sp-40); align-items: end; padding: var(--sp-64) 0; }
.custom-band blockquote { font-size: var(--fs-40); line-height: 1.35; font-weight: 600; letter-spacing: -0.02em; }
.custom-band .mid p { color: var(--on-ink-2); margin-top: var(--sp-20); }
.who { list-style: none; border-top: 1px solid var(--ink-line); }
.who li { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-20) 0; border-bottom: 1px solid var(--ink-line); font-size: var(--fs-24); font-weight: 600; transition: padding .4s var(--ease); }
.who li:hover { padding-left: var(--sp-16); }
.who li span { font-family: var(--f-disp); font-size: var(--fs-12); font-weight: 400; color: var(--on-ink-2); }
.custom-band .acts { display: flex; gap: var(--sp-12); flex-wrap: wrap; align-items: center; justify-content: space-between; }
.custom-band .acts small { color: var(--on-ink-2); font-size: var(--fs-14); }
@media (max-width: 1023px) {
  .custom-band .giant { font-size: 7.8vw; }
  .custom-band .mid { grid-template-columns: 1fr; padding: var(--sp-40) 0; }
  .custom-band blockquote { font-size: var(--fs-24); }
  .who li { font-size: var(--fs-20); }
}

/* 방문·안내 */
.visit { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.visit > div { padding: var(--sp-32) var(--sp-32) var(--sp-40) 0; }
.visit > div + div { padding-left: var(--sp-32); border-left: 1px solid var(--line); }
.visit h3 { font-size: var(--fs-14); color: var(--muted); font-weight: 400; margin-bottom: var(--sp-16); }
.visit p { font-size: var(--fs-18); line-height: 1.6; }
.visit p + p { margin-top: var(--sp-12); }
.visit small { display: block; font-size: var(--fs-14); color: var(--muted); }
@media (max-width: 1023px) { .visit { grid-template-columns: 1fr; } .visit > div, .visit > div + div { padding: var(--sp-24) 0; border-left: 0; border-top: 1px solid var(--line); } .visit > div:first-child { border-top: 0; } }

/* ---------- 꼬리말 ---------- */
.foot { position: relative; z-index: 2; background: var(--ink); color: var(--on-ink-2); padding: var(--sp-64) var(--gut) var(--sp-32); font-size: var(--fs-12); line-height: 1.8; }
.foot .big { font-family: var(--f-disp); color: var(--on-ink); font-size: 11.6vw; line-height: 1; margin-bottom: var(--sp-48); }
.foot .cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--sp-32); border-top: 1px solid var(--ink-line); padding-top: var(--sp-24); }
.foot a:hover { color: var(--on-ink); }
.foot .links { display: flex; flex-direction: column; gap: var(--sp-4); }
.foot .copy { margin-top: var(--sp-40); }
@media (max-width: 1023px) { .foot .cols { grid-template-columns: 1fr; } .foot .big { font-size: 11.6vw; } }

/* ---------- 목록 ---------- */
.page { padding-top: calc(var(--head) + var(--sp-48)); position: relative; z-index: 2; }
.ptitle { display: flex; align-items: end; justify-content: space-between; gap: var(--sp-24); padding-bottom: var(--sp-40); }
.ptitle h1 { font-family: var(--f-disp); font-weight: 400; font-size: 9vw; line-height: .9; }
.ptitle h1 sup { font-size: var(--fs-18); vertical-align: top; margin-left: var(--sp-8); }
.ptitle p { color: var(--fg-2); max-width: 22em; text-align: right; }
.bar { position: sticky; top: var(--head); z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-16);
  border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line); background: rgba(235, 235, 235, 0.9); backdrop-filter: blur(calc(10 * var(--u))); -webkit-backdrop-filter: blur(calc(10 * var(--u))); }
.tabs { display: flex; gap: var(--sp-4); overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
.sort { flex: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { background: none; border: 0; padding: var(--sp-16) var(--sp-12); cursor: pointer; font-size: var(--fs-14); color: var(--muted); white-space: nowrap; position: relative; }
.tabs button span { font-family: var(--f-disp); font-size: var(--fs-12); margin-left: var(--sp-4); }
.tabs button[aria-selected="true"] { color: var(--fg); font-weight: 600; }
.tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: var(--sp-12); right: var(--sp-12); bottom: -1px; height: 2px; background: var(--fg); }
.tabs button:hover { color: var(--fg); }
.sort { display: flex; align-items: center; gap: var(--sp-8); font-size: var(--fs-14); }
.sort select { appearance: none; border: 0; background: transparent; padding: var(--sp-8) var(--sp-20) var(--sp-8) var(--sp-4); cursor: pointer; font-weight: 600;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right calc(8 * var(--u)) center, right calc(4 * var(--u)) center; background-size: calc(4 * var(--u)) calc(4 * var(--u)); background-repeat: no-repeat; }
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-48) var(--sp-20); padding: var(--sp-40) 0 var(--sp-64); }
.empty { padding: var(--sp-64) 0; text-align: center; color: var(--muted); }
@media (max-width: 1023px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-32) var(--sp-12); } }
@media (max-width: 1023px) { .ptitle { flex-direction: column; align-items: start; } .ptitle h1 { font-size: 11vw; } .ptitle p { text-align: left; } .sort .t { display: none; } }

/* ---------- 상세 ---------- */
.crumb { font-size: var(--fs-12); color: var(--muted); display: flex; gap: var(--sp-8); margin-bottom: var(--sp-24); }
.crumb a:hover { color: var(--fg); }
.pd { display: grid; grid-template-columns: 7fr 5fr; gap: var(--sp-64); align-items: start; padding-bottom: var(--sp-64); }
.gal { display: grid; gap: var(--sp-12); }
.gal figure { background: var(--bg-2); aspect-ratio: 1/1; position: relative; overflow: hidden; cursor: zoom-in; }
.gal figure .ph { transition: transform .8s var(--ease); }
.gal figure.zoom { cursor: zoom-out; } .gal figure.zoom .ph { transform: scale(1.7); }
.info { position: sticky; top: calc(var(--head) + var(--sp-24)); }
.info h1 { font-family: var(--f-disp); font-weight: 400; font-size: var(--fs-40); line-height: 1.1; }
.info .sum { color: var(--fg-2); margin: var(--sp-12) 0 var(--sp-24); }
.info .price { font-size: var(--fs-32); font-weight: 600; letter-spacing: -0.015em; }
.rows { margin: var(--sp-32) 0; border-top: 1px solid var(--line-2); }
.rows > div { display: grid; grid-template-columns: calc(96 * var(--u)) 1fr; gap: var(--sp-16); padding: var(--sp-16) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-14); align-items: center; }
.rows dt { color: var(--muted); }
.qty { display: inline-flex; border: 1px solid var(--line-2); }
.qty button { width: calc(40 * var(--u)); height: calc(40 * var(--u)); background: none; border: 0; cursor: pointer; font-size: var(--fs-18); }
.qty button:hover { background: var(--bg-2); }
.qty button[disabled] { opacity: .3; cursor: default; background: none; }
.qty output { width: calc(48 * var(--u)); display: grid; place-items: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--sp-20); }
.total b { font-size: var(--fs-24); font-variant-numeric: tabular-nums; }
.buy { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
.bulk { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-16); margin-top: var(--sp-20); padding: var(--sp-20); background: var(--bg-3); font-size: var(--fs-14); }
.bulk b { display: block; font-size: var(--fs-16); }
.acc { margin-top: var(--sp-32); border-top: 1px solid var(--line-2); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; padding: var(--sp-16) 0; font-weight: 600; font-size: var(--fs-14); }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; font-family: var(--f-disp); transition: transform .3s; }
.acc details[open] summary::after { transform: rotate(45deg); }
.acc .body { padding-bottom: var(--sp-20); font-size: var(--fs-14); color: var(--fg-2); }
.acc .body li { margin-left: var(--sp-16); }
@media (max-width: 1023px) { .pd { grid-template-columns: 1fr; gap: var(--sp-32); } .info { position: static; } .gal { grid-auto-flow: column; grid-auto-columns: 86%; overflow-x: auto; scroll-snap-type: x mandatory; } .gal figure { scroll-snap-align: start; } }
.mbar { display: none; }
@media (max-width: 1023px) {
  .mbar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-mbar); padding: var(--sp-12) var(--gut); background: rgba(235, 235, 235, 0.94); border-top: 1px solid var(--line); backdrop-filter: blur(calc(10 * var(--u))); -webkit-backdrop-filter: blur(calc(10 * var(--u))); transform: translateY(100%); transition: transform .4s var(--ease); }
  .mbar.show { transform: none; }
  .mbar .btn { height: calc(48 * var(--u)); padding: 0 var(--sp-12); }
  body.pd-page { padding-bottom: calc(var(--sp-64) + var(--sp-8)); }
}

/* ---------- 맞춤제작 쪽 ---------- */
.c-hero { min-height: 100vh; display: grid; grid-template-columns: 5fr 7fr; gap: var(--sp-40); align-items: center; padding-top: var(--head); }
.c-hero .disp.k { font-size: var(--fs-14); color: var(--muted); display: block; margin-bottom: var(--sp-24); }
.c-hero h1 { font-size: var(--fs-64); line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; }
.c-hero h1 em { font-style: normal; font-family: var(--f-disp); font-weight: 400; letter-spacing: 0; display: block; font-size: var(--fs-56); margin-top: var(--sp-8); }
.c-hero p { color: var(--fg-2); margin: var(--sp-24) 0 var(--sp-32); max-width: 28em; }
.eng { position: relative; height: min(78vh, calc(720 * var(--u))); background: var(--bg-2); }
.eng .face { position: absolute; inset: var(--sp-32) var(--sp-32) calc(160 * var(--u)); display: grid; place-items: center; }
.eng .face[hidden] { display: none; }
.eng .back { width: min(100%, 100vh - calc(400 * var(--u))); height: auto; filter: drop-shadow(0 calc(24 * var(--u)) calc(40 * var(--u)) rgba(0, 0, 0, 0.18)); }
.eng .back .ring { font: 600 calc(28 * var(--u)) "Helvetica Neue", Arial, sans-serif; fill: #6f7378; letter-spacing: 0.02em; }
.eng .back .ln { stroke: #8a8e93; stroke-width: 2; }
.eng .back .emb { stroke: #6f7378; }
.eng .back .l1, .eng .back .l2 { font-family: var(--f-ko); font-weight: 600; text-anchor: middle; fill: #5d6166; paint-order: stroke; stroke: rgba(255, 255, 255, 0.75); stroke-width: 1px; }
.eng .back .l1 { font-size: calc(40 * var(--u)); } .eng .back .l2 { font-size: calc(32 * var(--u)); }
.eng .face .pic-front { position: relative; display: block; width: min(100%, 100vh - calc(400 * var(--u))); mix-blend-mode: multiply; }
.eng .ctl { position: absolute; left: var(--sp-20); right: var(--sp-20); bottom: var(--sp-20); display: grid; grid-template-columns: 1fr auto; gap: var(--sp-12); align-items: end; }
.eng label { font-size: var(--fs-12); color: var(--muted); display: block; margin-bottom: var(--sp-8); }
.eng .ins { display: grid; gap: var(--sp-8); }
.eng input { width: 100%; height: calc(48 * var(--u)); border: 1px solid var(--line-2); background: rgba(244, 244, 244, 0.9); padding: 0 var(--sp-16); }
.seg { display: inline-flex; border: 1px solid var(--line-2); background: rgba(244, 244, 244, 0.9); }
.seg button { height: calc(48 * var(--u)); padding: 0 var(--sp-16); border: 0; background: none; cursor: pointer; font-size: var(--fs-14); }
.seg button[aria-pressed="true"] { background: var(--fg); color: var(--bg-3); }
.eng .poster { position: absolute; inset: 15%; width: 70%; height: 70%; object-fit: contain; mix-blend-mode: multiply; }
@media (max-width: 1023px) { .c-hero { grid-template-columns: 1fr; padding-top: calc(var(--head) + var(--sp-32)); min-height: 0; } .c-hero h1 { font-size: var(--fs-40); } .c-hero h1 em { font-size: var(--fs-32); } .eng { height: 72vh; } .eng .ctl { grid-template-columns: 1fr; } }

.steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink-line); }
.steps li { padding: var(--sp-24) var(--sp-24) var(--sp-40) 0; position: relative; }
.steps li + li { padding-left: var(--sp-24); border-left: 1px solid var(--ink-line); }
.steps .n { font-family: var(--f-disp); font-size: var(--fs-48); display: block; margin-bottom: var(--sp-48); color: var(--on-ink); }
.steps h3 { font-size: var(--fs-20); font-weight: 600; margin-bottom: var(--sp-8); }
.steps p { color: var(--on-ink-2); font-size: var(--fs-14); }
@media (max-width: 1023px) { .steps { grid-template-columns: 1fr; } .steps li, .steps li + li { padding: var(--sp-20) 0; border-left: 0; border-bottom: 1px solid var(--ink-line); display: grid; grid-template-columns: calc(72 * var(--u)) 1fr; } .steps .n { font-size: var(--fs-24); margin: 0; grid-row: span 2; } }

.form { display: grid; grid-template-columns: 4fr 8fr; gap: var(--sp-64); }
.form .side h2 { font-size: var(--fs-40); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }
.form .side p { color: var(--fg-2); margin-top: var(--sp-16); }
.form .side .call { margin-top: var(--sp-40); border-top: 1px solid var(--line-2); padding-top: var(--sp-20); font-size: var(--fs-14); color: var(--muted); }
.form .side .call b { display: block; font-family: var(--f-disp); font-weight: 400; font-size: var(--fs-24); color: var(--fg); margin-top: var(--sp-8); }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-24) var(--sp-20); }
.f { display: flex; flex-direction: column; gap: var(--sp-8); }
.f.full { grid-column: 1 / -1; }
.f label, .f .lb { font-size: var(--fs-14); font-weight: 600; }
.f label i, .f .lb i { font-style: normal; color: var(--muted); font-weight: 400; margin-left: var(--sp-4); }
.f input, .f select, .f textarea { width: 100%; border: 0; border-bottom: 1px solid var(--line-2); background: transparent; padding: var(--sp-12) 0; font-size: var(--fs-16); border-radius: 0; transition: border-color .2s; }
.f textarea { min-height: calc(120 * var(--u)); resize: vertical; }
.f input:hover, .f select:hover, .f textarea:hover { border-bottom-color: var(--fg); }
.f input:focus, .f select:focus, .f textarea:focus { outline: none; border-bottom: 2px solid var(--fg); }
.f input::placeholder, .f textarea::placeholder { color: var(--muted); }
.f .err { color: var(--err); font-size: var(--fs-12); min-height: calc(18 * var(--u)); }
.f.bad input, .f.bad select, .f.bad textarea { border-bottom-color: var(--err); }
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-8); }
.chips label { font-weight: 400; cursor: pointer; }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips span { display: inline-flex; height: calc(40 * var(--u)); align-items: center; padding: 0 var(--sp-16); border: 1px solid var(--line-2); font-size: var(--fs-14); transition: background-color .2s, color .2s; }
.chips input:checked + span { background: var(--fg); color: var(--bg-3); border-color: var(--fg); }
.chips input:focus-visible + span { outline: 2px solid var(--fg); outline-offset: 2px; }
.file { display: flex; align-items: center; gap: var(--sp-12); border-bottom: 1px solid var(--line-2); padding: var(--sp-12) 0; font-size: var(--fs-14); color: var(--muted); }
.file input { position: absolute; opacity: 0; width: 1px; }
.file .pick { border: 1px solid var(--line-2); padding: var(--sp-8) var(--sp-12); color: var(--fg); cursor: pointer; }
.agree { display: flex; gap: var(--sp-12); align-items: flex-start; font-size: var(--fs-14); color: var(--fg-2); cursor: pointer; }
.agree input { width: calc(20 * var(--u)); height: calc(20 * var(--u)); accent-color: var(--fg); margin-top: 2px; flex: none; }
.submit { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-20); border-top: 1px solid var(--line-2); padding-top: var(--sp-24); }
.done { grid-column: 1 / -1; padding: var(--sp-40); background: var(--bg-3); }
.done h3 { font-size: var(--fs-24); font-weight: 600; margin-bottom: var(--sp-8); }
.done p { color: var(--fg-2); }
@media (max-width: 1023px) { .form { grid-template-columns: 1fr; gap: var(--sp-32); } .fields { grid-template-columns: 1fr; } .submit { flex-direction: column; align-items: stretch; } }

.toast { position: fixed; left: 50%; bottom: var(--sp-32); z-index: var(--z-toast); transform: translate(-50%, var(--sp-24)); background: var(--fg); color: var(--bg-3); padding: var(--sp-12) var(--sp-20); font-size: var(--fs-14); opacity: 0; transition: opacity .3s, transform .3s var(--ease); pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .reveal > * { opacity: 1; transform: none; }
}

.sec-head .lead { color: var(--fg-2); margin-top: var(--sp-16); max-width: 32em; }
h2.disp.en { font-family: var(--f-disp); font-weight: 400; letter-spacing: 0; line-height: 1.1; }
.fine { font-size: var(--fs-12); color: var(--muted); margin: calc(var(--sp-8) * -1) 0 var(--sp-20); }
.buy2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); margin-top: var(--sp-8); }
.buy2 .btn { height: calc(48 * var(--u)); font-size: var(--fs-14); }
.foot .slogan { font-size: var(--fs-14); color: var(--on-ink-2); margin: calc(var(--sp-32) * -1) 0 var(--sp-48); }
.acc .body p + p, .acc .body p + ul, .acc .body ul + p { margin-top: var(--sp-8); }
.sec-head h2.disp.en { font-size: var(--fs-40); color: inherit; margin-bottom: 0; }
.sec-head .tlink { flex: none; white-space: nowrap; }
@media (max-width: 1023px) { .sec-head h2.disp.en { font-size: var(--fs-28); } }

/* CHECK POINT — 상세페이지 원문 6개 */
.cps { list-style: none; display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid var(--line-2); }
.cps li { padding: var(--sp-24) var(--sp-16) var(--sp-32) 0; display: flex; flex-direction: column; gap: var(--sp-24); }
.cps li + li { padding-left: var(--sp-16); border-left: 1px solid var(--line); }
.cps .n { font-family: var(--f-disp); font-size: var(--fs-12); color: var(--muted); }
.cps b { font-size: var(--fs-18); font-weight: 600; letter-spacing: -0.01em; }
@media (max-width: 1023px) { .cps { grid-template-columns: repeat(3, 1fr); } .cps li:nth-child(4) { padding-left: 0; border-left: 0; } .cps li:nth-child(n+4) { border-top: 1px solid var(--line); } }
@media (max-width: 1023px) { .cps { grid-template-columns: repeat(2, 1fr); } .cps li:nth-child(4) { padding-left: var(--sp-16); border-left: 1px solid var(--line); } .cps li:nth-child(odd) { padding-left: 0; border-left: 0; } .cps li:nth-child(n+3) { border-top: 1px solid var(--line); } .cps b { font-size: var(--fs-16); } }

/* 이벤트 */
.evs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-20); }
.ev { background: var(--bg-3); padding: var(--sp-32); display: flex; flex-direction: column; gap: var(--sp-12); }
.ev .k { font-family: var(--f-disp); font-size: var(--fs-12); color: var(--muted); }
.ev h3 { font-size: var(--fs-24); font-weight: 600; letter-spacing: -0.015em; margin-top: var(--sp-24); }
.ev p { color: var(--fg-2); }
.ev .tlink { align-self: flex-start; margin-top: var(--sp-24); }
@media (max-width: 1023px) { .evs { grid-template-columns: 1fr; } .ev { padding: var(--sp-24); } .ev h3 { font-size: var(--fs-20); margin-top: var(--sp-12); } }

/* 상세: 주의사항 목록 */
.acc .body ol { margin-left: var(--sp-16); }
.acc .body ol li + li { margin-top: var(--sp-4); }

/* 36판(PSPD): 사이트 전체 글자 위 깜빡이는 입력 커서(캐럿) 없앰 — 입력칸만 보이게 */
html { caret-color: transparent; }
input, textarea, select, [contenteditable="true"] { caret-color: auto; }