/* 캐릭터·제품 홍보 전시관 — 3D 제품 장면(겹: 뒤 글씨 · 캔버스 · 앞 글씨) */
.pm-prod{background:radial-gradient(120% 95% at 50% 42%,#F6FCF8 0%,#E3F3E8 55%,#CBE6D4 100%);overflow:hidden;cursor:grab;user-select:none;-webkit-user-select:none}
.pm-prod.drag{cursor:grabbing}
.pm-prod canvas,.pm-burst canvas,.pm-run canvas,.pm-sale canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.pp-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.pp-rows{position:absolute;left:0;top:50%;display:flex;flex-direction:column;transform:translateY(-50%)}
.pp-row{white-space:nowrap;font:400 var(--rs) "Black Han Sans",Pretendard,sans-serif;line-height:1.04;color:transparent;-webkit-text-stroke:2px #A9D2B6;will-change:transform,opacity}
.pp-row.solid{color:#B98A55;-webkit-text-stroke:0}
.pp-side{position:absolute;left:0;top:0;font:400 var(--ss) "Archivo Black",sans-serif;color:#2F7A3E;white-space:nowrap;letter-spacing:-.01em;will-change:transform,opacity}
.pp-title{position:absolute;left:0;right:0;top:var(--ty);text-align:center;color:#1F3D2E}
.pp-mk{display:inline-flex;align-items:center;gap:.4em;font:700 var(--ms) "Gowun Batang",serif;letter-spacing:.3em;will-change:transform,opacity}
.pp-mk svg{width:1.5em;height:1.5em}
.pp-title h3{font:700 var(--ts) "Gowun Batang",serif;letter-spacing:.06em;margin-top:.2em;line-height:1.2}
.pp-title h3 span{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .12em}
.pp-title h3 i{display:inline-block;font-style:normal;will-change:transform}
.pp-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pp-call{position:absolute;left:0;top:0;font-family:"Archivo Black","Black Han Sans",sans-serif;color:#1F3D2E;line-height:.95;will-change:transform,opacity;white-space:nowrap}
.pp-call b{display:block;font-weight:400;font-size:var(--cb);letter-spacing:-.02em}
.pp-call small{display:block;font:700 var(--cs) Pretendard,sans-serif;letter-spacing:.12em;margin-top:.45em;color:#8A6A44}
.pp-call.port{text-align:center}
.pp-tag{position:absolute;left:50%;bottom:var(--gb);transform:translateX(-50%);font:800 var(--gs) Pretendard,sans-serif;color:#F4F8EE;background:#1F3D2E;border-radius:99px;padding:.5em 1.2em;white-space:nowrap;will-change:transform,opacity}
.pp-tag b{color:#D7E36A}
.pp-hw{position:absolute;inset:0;pointer-events:none}
.pp-hint{position:absolute;right:14px;bottom:12px;font:700 12px Pretendard,sans-serif;color:#6f8f7a;opacity:.8}
.pp-hint.photo{text-align:right;color:#4f7360;opacity:.95}
.pp-hint small{display:block;font:600 11.5px Pretendard,sans-serif;margin-top:3px}

/* 새 앰플 출시 장면 */
.pm-burst{background:#1b0c14;overflow:hidden}
.pb-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.pb-tag{position:absolute;left:52%;right:6%;top:50%;transform:translateY(-50%);text-align:center;color:#6E2440;will-change:opacity}
.pm-burst.port .pb-tag{left:0;right:0;top:var(--tt);transform:none}
.pb-tag h3{font:700 var(--t1) "Gowun Batang",serif;letter-spacing:.04em;text-shadow:0 0 18px rgba(255,255,255,.9),0 0 3px rgba(255,255,255,.8)}
.pb-tag p{display:inline-block;font:800 var(--t2) Pretendard,sans-serif;letter-spacing:.18em;margin-top:.8em;padding:.55em 1.3em;border-radius:99px;color:#fff;background:rgba(122,46,72,.82)}
.pb-tag h3 span{display:inline-block;will-change:transform,opacity}
.pb-fade{position:absolute;inset:0;background:#1b0c14;opacity:0}

/* 준비 표시: 3D·그림·글꼴이 다 준비될 때까지 점 셋만 돌고(CSS라 무엇이 무겁든 끊기지 않음), 준비되면 장면이 0초부터 시작 (장면마다 첫 순간은 비어 있다가 스스로 나타남) */
.pm-load{position:absolute;left:50%;top:50%;z-index:60;display:flex;gap:10px;transform:translate(-50%,-50%);pointer-events:none;transition:opacity .4s}
.pm-load i{width:10px;height:10px;border-radius:50%;background:#2F5A40;animation:pmDot 1.1s ease-in-out infinite}
.pm-load.dark i{background:#FFC9D8}
.pm-load i:nth-child(2){animation-delay:.14s}
.pm-load i:nth-child(3){animation-delay:.28s}
@keyframes pmDot{0%,70%,100%{transform:translateY(0);opacity:.3}35%{transform:translateY(-9px);opacity:1}}
.pm-wait>:not(.pm-load):not(.mode-sw){visibility:hidden}
.pm-in>.pm-load{opacity:0}
.pm-fw .pm-txt{visibility:hidden}
.pm-fl .pm-txt{display:none}
@media (prefers-reduced-motion:reduce){.pm-load i{animation:none;opacity:.7}}

/* 사진 넣은 모습 전환 단추: 휴대폰에서 제품·문구를 가리지 않게 장면별로 옮긴다
   흐림 뒷배경(backdrop-filter)은 처음 그릴 때 GPU가 셰이더를 여러 개 굽느라 장면 여는 순간 한 번 멈춰서, 이 전시관에서는 진한 단색으로 대신한다 */
.lab-stage .mode-seg{backdrop-filter:none;background:rgba(10,14,30,.84)}
.pm-sale .mode-sw{top:calc(var(--awn, 0px) + 12px)} /* 가로 화면: 초록 차양 아래 */
@media (max-width:700px){
  .pm-burst .mode-sw{top:auto;bottom:10px}
  .pm-burst .mode-note{max-width:60vw;word-break:keep-all}
  .pm-prod .mode-sw{top:6px;left:8px;right:8px;flex-direction:row-reverse;justify-content:space-between;align-items:flex-start}
  .pm-prod .mode-note{max-width:50vw;text-align:left;font-size:10px;padding:3px 8px;word-break:keep-all}
  .pm-sale .mode-sw{top:auto;bottom:40px}
  .pp-hint.photo{left:8px;right:8px;bottom:5px;text-align:center;font-size:11px}
  .pp-hint.photo small{font-size:10px}
}