/* ==========================================================
   컬쳐 팝업 U(you) 취미 로드멘트
   무빌드 정적 스타일 / 뉴트로 카세트 감성
   ========================================================== */

:root{
  --ink:#141210;
  --paper:#F2EDE0;
  --paper-2:#E7DFCC;
  --lime:#CCFF33;
  --tomato:#FF4A1C;
  --blue:#2C49FF;
  --lilac:#D9C4FF;
  --line:2.5px;
  --radius:18px;
  --shadow:6px 6px 0 var(--ink);
  --shadow-sm:4px 4px 0 var(--ink);
  --sans:"Pretendard Variable", Pretendard, -apple-system, system-ui, "Malgun Gothic", sans-serif;
  --display:"Archivo Black","Bebas Neue",var(--sans);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
html{-webkit-text-size-adjust:100%}

body{
  height:100dvh;
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:none;
  padding-bottom:env(safe-area-inset-bottom);
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  letter-spacing:-.015em;
  word-break:keep-all;
  overflow-wrap:break-word;
  display:flex;
  flex-direction:column;
  overflow-x:hidden;
  background-image:
    linear-gradient(var(--paper-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--paper-2) 1px, transparent 1px);
  background-size:32px 32px;
}

/* 종이 질감 */
.grain{
  position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.28;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

/* ---------- 상단바 ---------- */
.topbar{
  position:relative; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:14px clamp(14px,4vw,32px);
  border-bottom:var(--line) solid var(--ink);
  background:var(--paper);
}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:inherit}
.brand-mark{width:40px;height:24px;fill:none;stroke:var(--ink);stroke-width:2.2}
.brand-mark rect{fill:var(--lime)}
.brand-text{font-family:var(--display);font-size:17px;letter-spacing:.06em}
.side-tag{
  font-family:var(--display); font-size:12px; letter-spacing:.14em;
  padding:5px 11px; border:var(--line) solid var(--ink); border-radius:999px;
  background:var(--tomato); color:var(--paper);
}

/* ---------- 진행바 ---------- */
.progress{height:12px;border-bottom:var(--line) solid var(--ink);background:var(--paper-2);position:relative;z-index:20}
.progress-bar{height:100%;width:0;background:var(--lime);border-right:var(--line) solid var(--ink);transition:width .5s cubic-bezier(.2,.9,.2,1)}

/* ---------- 무대 ---------- */
.stage{
  flex:1 1 auto; min-height:0; position:relative; z-index:10;
  width:100%; max-width:860px; margin:0 auto;
  padding:clamp(18px,4vw,40px) clamp(16px,5vw,28px) clamp(18px,4vw,36px);
  overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
}
/* 질문 화면은 한 화면에 세로 가운데로 앉힌다 */
.screen{animation:pop .45s cubic-bezier(.2,.9,.2,1) both;min-height:100%;display:flex;flex-direction:column;justify-content:center}
/* 결과처럼 긴 화면만 위에서부터 쌓고 스크롤 */
.screen.long{justify-content:flex-start}
.screen.leaving{animation:drop .22s ease-in forwards}
@keyframes pop{from{opacity:0;transform:translateY(22px) scale(.985);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes drop{to{opacity:0;transform:translateY(-14px) scale(.99);filter:blur(4px)}}

/* ---------- 공통 조각 ---------- */
.kicker{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--display);font-size:11px;letter-spacing:.16em;
  padding:5px 12px;border:var(--line) solid var(--ink);border-radius:999px;
  background:var(--paper);box-shadow:var(--shadow-sm);
}
.kicker.lime{background:var(--lime)}
.kicker.blue{background:var(--blue);color:var(--paper)}

h1,h2,h3{margin:0;letter-spacing:-.035em;line-height:1.18}
.q-num{font-family:var(--display);font-size:clamp(46px,13vw,86px);line-height:.86;letter-spacing:-.02em;-webkit-text-stroke:2.5px var(--ink);color:transparent}
.q-title{font-size:clamp(23px,5.6vw,34px);font-weight:800;margin-top:14px}
.q-sub{margin:10px 0 0;font-size:15px;opacity:.7;font-weight:500}
.hint{font-size:13px;font-weight:700;opacity:.55;margin-top:6px}

/* ---------- 선택지 ---------- */
.options{display:grid;gap:12px;margin-top:26px}
.options.two{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}

.opt{
  position:relative;display:flex;align-items:flex-start;gap:13px;width:100%;
  text-align:left;font:inherit;color:inherit;cursor:pointer;
  padding:17px 18px;background:var(--paper);
  border:var(--line) solid var(--ink);border-radius:var(--radius);
  box-shadow:var(--shadow);
  transition:transform .14s ease, box-shadow .14s ease, background .14s ease;
}
@media (hover:hover){ .opt:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)} }
.opt:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.opt:focus-visible{outline:none;background:var(--lilac)}
.opt.on{background:var(--lime);transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.opt-mark{
  flex:0 0 auto;width:26px;height:26px;margin-top:1px;
  border:var(--line) solid var(--ink);border-radius:8px;background:var(--paper);
  display:grid;place-items:center;
}
.opt.on .opt-mark{background:var(--ink)}
.opt-mark svg{width:15px;height:15px;fill:none;stroke:var(--paper);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.4);transition:.16s}
.opt.on .opt-mark svg{opacity:1;transform:none}
.opt-body{min-width:0;display:block}
.opt-label{display:block;font-weight:800;font-size:17px;line-height:1.35}
.opt-desc{display:block;font-size:14px;opacity:.68;margin-top:5px;font-weight:500;line-height:1.5}
.opt-tag{
  position:absolute;top:-11px;right:14px;
  font-family:var(--display);font-size:10px;letter-spacing:.12em;
  padding:3px 8px;border:2px solid var(--ink);border-radius:999px;background:var(--tomato);color:var(--paper);
}

/* ---------- 버튼 ---------- */
.actions{display:flex;gap:10px;align-items:center;margin-top:28px;flex-wrap:wrap}
.btn{
  font:inherit;font-weight:800;cursor:pointer;color:var(--ink);
  padding:15px 26px;border:var(--line) solid var(--ink);border-radius:999px;
  background:var(--paper);box-shadow:var(--shadow);
  transition:transform .14s ease, box-shadow .14s ease, opacity .2s;
  display:inline-flex;align-items:center;gap:9px;
}
.btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){ .btn:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)} }
.btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.btn.primary{background:var(--tomato);color:var(--paper)}
.btn.lime{background:var(--lime)}
.btn.ghost{background:transparent;box-shadow:none;border-color:transparent;text-decoration:underline;text-underline-offset:5px;padding:12px 8px;opacity:.6}
.btn.ghost:active{opacity:1}
.btn[disabled]{opacity:.32;pointer-events:none}
.btn.big{padding:19px 34px;font-size:18px}

/* ---------- 커버 ---------- */
.cover{text-align:center;padding-top:clamp(4px,2vh,24px)}
.cover-title{
  font-family:var(--display);
  font-size:clamp(52px,17vw,132px);line-height:.82;letter-spacing:-.03em;margin:20px 0 0;
}
.cover-title .out{-webkit-text-stroke:3px var(--ink);color:transparent}
.cover-title .fill{color:var(--tomato);display:block}
.cover-kr{font-size:clamp(21px,5.4vw,30px);font-weight:900;margin-top:22px}
.cover-kr em{font-style:normal;background:var(--lime);padding:0 7px;border:var(--line) solid var(--ink);border-radius:8px;display:inline-block;transform:rotate(-1.5deg)}
.cover-desc{max-width:520px;margin:14px auto 0;font-size:15px;opacity:.6;font-weight:700;letter-spacing:.01em}
.cover-meta{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.chip{font-size:12.5px;font-weight:800;padding:6px 13px;border:2px solid var(--ink);border-radius:999px;background:var(--paper)}
.tape{
  display:inline-block;margin-top:34px;padding:9px 18px;background:var(--lilac);
  border:var(--line) solid var(--ink);transform:rotate(-2deg);font-weight:800;font-size:13.5px;
  box-shadow:var(--shadow-sm);
}

/* ---------- 이름 입력 ---------- */
.field{margin-top:26px}
.field label{display:block;font-weight:800;font-size:14px;margin-bottom:9px}
.field input{
  width:100%;font:inherit;font-weight:800;font-size:20px;color:inherit;
  padding:17px 20px;background:var(--paper);
  border:var(--line) solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow-sm);
}
.field input::placeholder{opacity:.32;font-weight:600}
.field input:focus{outline:none;background:var(--lime)}
.field.row{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.field.row input{font-size:16px;padding:15px 17px}

/* ---------- 결과 ---------- */
.result-card{
  position:relative;margin-top:22px;padding:clamp(22px,5vw,34px);
  background:var(--paper);border:var(--line) solid var(--ink);border-radius:26px;box-shadow:10px 10px 0 var(--ink);
}
.result-card::before{
  content:"";position:absolute;inset:9px;border:2px dashed var(--ink);border-radius:18px;opacity:.22;pointer-events:none;
}
.stamp{
  position:absolute;top:-22px;right:clamp(14px,5vw,30px);
  width:88px;height:88px;border-radius:50%;
  border:var(--line) solid var(--ink);background:var(--tomato);color:var(--paper);
  display:grid;place-items:center;text-align:center;transform:rotate(9deg);
  font-family:var(--display);font-size:11px;letter-spacing:.1em;line-height:1.3;
  box-shadow:var(--shadow-sm);
}
.result-code{font-family:var(--display);font-size:13px;letter-spacing:.18em;opacity:.55}
.result-name{font-size:clamp(30px,8vw,52px);font-weight:900;line-height:1.05;margin:8px 0 0;letter-spacing:-.045em}
.result-name mark{background:var(--lime);padding:0 6px;border-radius:6px}
.result-line{font-size:16.5px;font-weight:700;margin-top:14px}
.result-body{font-size:15px;opacity:.78;margin-top:12px;font-weight:500;line-height:1.65}

.rows{margin-top:26px;display:grid;gap:0;border:var(--line) solid var(--ink);border-radius:16px;overflow:hidden;background:var(--paper-2)}
.row{display:grid;grid-template-columns:104px 1fr;gap:12px;padding:14px 16px;border-bottom:2px solid var(--ink);background:var(--paper)}
.row:last-child{border-bottom:none}
.row dt{font-size:12.5px;font-weight:800;opacity:.5;letter-spacing:.02em}
.row dd{margin:0;font-size:15px;font-weight:700}

.booths{display:grid;gap:11px;margin-top:14px}
.booth{
  display:flex;gap:13px;align-items:flex-start;padding:15px 16px;
  border:var(--line) solid var(--ink);border-radius:14px;background:var(--paper);box-shadow:var(--shadow-sm);
}
.booth-no{font-family:var(--display);font-size:19px;line-height:1;opacity:.35;margin-top:2px}
.booth>span:last-child{display:block;min-width:0}
.booth-name{display:block;font-weight:800;font-size:16px;line-height:1.35}
.booth-desc{display:block;font-size:14px;opacity:.68;margin-top:5px;font-weight:500;line-height:1.5}

.sec-title{display:flex;align-items:center;gap:10px;margin-top:34px;font-size:14px;font-weight:900;letter-spacing:.02em}
.sec-title::after{content:"";flex:1;height:2px;background:var(--ink);opacity:.2}

/* ---------- 초대장 ---------- */
.invite{
  margin-top:30px;padding:clamp(20px,5vw,30px);
  border:var(--line) solid var(--ink);border-radius:22px;
  background:var(--blue);color:var(--paper);box-shadow:var(--shadow);
}
.invite h3{font-size:clamp(20px,5vw,26px);font-weight:900}
.invite p{font-size:14.5px;opacity:.85;margin:10px 0 0;font-weight:500}
/* 파란 카드 안의 입력칸: 각진 덩어리로 보이지 않게 알약 형태 + 검정 테두리 */
.invite .field.row{background:none;gap:10px;margin-top:18px}
.invite input{
  border:var(--line) solid var(--ink);border-radius:999px;
  background:#fff;color:var(--ink);box-shadow:none;
  font-weight:700;font-size:16px;
}
.invite input:focus{background:var(--lime)}
/* 파란 배경 위 흰 칸이라 안내 글자가 묻히기 쉬워 대비를 올린다 */
.invite input::placeholder{color:var(--ink);opacity:.5;font-weight:600}
.invite .field label{color:var(--paper)}
.invite .agree{display:flex;gap:9px;align-items:flex-start;margin-top:14px;font-size:13px;opacity:.85;cursor:pointer;font-weight:600;line-height:1.5}
.agree-sub{display:inline-block;opacity:.72;margin-left:4px}
@media (max-width:560px){ .agree-sub{display:block;margin:2px 0 0} }
.invite .agree input{width:19px;height:19px;flex:0 0 auto;margin:2px 0 0;padding:0;
  border-radius:5px;box-shadow:none;accent-color:var(--lime)}
.invite .btn.lime{box-shadow:4px 4px 0 rgba(0,0,0,.45)}

/* 빠진 곳 알리기 */
.shake{animation:shake .42s cubic-bezier(.36,.07,.19,.97)}
@keyframes shake{
  10%,90%{transform:translateX(-2px)}
  20%,80%{transform:translateX(4px)}
  30%,50%,70%{transform:translateX(-7px)}
  40%,60%{transform:translateX(7px)}
}
.done{text-align:center;padding:26px 10px}
.done .big-check{width:64px;height:64px;margin:0 auto 14px;border:var(--line) solid var(--paper);border-radius:50%;display:grid;place-items:center}
.done .big-check svg{width:30px;height:30px;fill:none;stroke:var(--paper);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 마퀴 ---------- */
.marquee{
  position:relative;z-index:15;overflow:hidden;flex:0 0 auto;
  padding-bottom:calc(9px + env(safe-area-inset-bottom));
  border-top:var(--line) solid var(--ink);border-bottom:var(--line) solid var(--ink);
  background:var(--lime);padding:9px 0;
}
.marquee-track{display:flex;gap:34px;white-space:nowrap;width:max-content;animation:slide 26s linear infinite}
.marquee span{font-family:var(--display);font-size:13px;letter-spacing:.14em}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- 태블릿 ---------- */
@media (max-width:760px){
  .options.two{grid-template-columns:1fr}
  .stage{padding-left:16px;padding-right:16px}
}

/* ---------- 모바일 ---------- */
@media (max-width:560px){
  :root{--line:2.2px;--shadow:4px 4px 0 var(--ink);--shadow-sm:3px 3px 0 var(--ink);--radius:15px}
  body{background-size:26px 26px}

  .topbar{padding:11px 15px}
  .brand-mark{width:34px;height:21px}
  .brand-text{font-size:15px}
  .side-tag{font-size:10px;padding:4px 9px;letter-spacing:.1em}
  .progress{height:9px}

  .stage{padding:20px 15px 30px}

  .q-num{font-size:clamp(40px,15vw,60px)}
  .q-title{font-size:22px;margin-top:10px;line-height:1.28}
  .q-sub{font-size:14px;margin-top:8px}
  .hint{font-size:12px}

  .options{gap:10px;margin-top:20px}
  .opt{padding:15px 15px;gap:11px;align-items:flex-start}
  .opt-mark{width:23px;height:23px;border-radius:7px}
  .opt-label{font-size:16px}
  .opt-desc{font-size:13.5px;line-height:1.5;margin-top:4px}
  .opt-tag{font-size:9px;padding:2px 7px;top:-10px;right:11px}

  /* 엄지로 누르기 쉽게: 주요 버튼은 한 줄 가득 */
  .actions{gap:9px;margin-top:22px}
  .btn{padding:15px 22px;min-height:52px;justify-content:center}
  .btn.primary,.btn.lime{flex:1 1 100%;order:-1}
  .btn.big{width:100%;padding:18px 24px;font-size:17px}
  .btn.ghost{flex:0 0 auto;padding:10px 6px;min-height:0}

  .cover{padding-top:2px}
  .cover .tape{display:none}          /* 하단 띠가 같은 역할을 하므로 모바일에선 생략 */
  .stage{padding:16px 15px 18px}
  .cover-title{font-size:clamp(46px,16vw,72px);margin-top:16px}
  .cover-title .out{-webkit-text-stroke-width:2.4px}
  .cover-kr{font-size:20px;margin-top:18px}
  .cover-desc{font-size:13.5px;margin-top:11px}
  .cover-meta{gap:6px;margin-top:20px}
  .chip{font-size:11.5px;padding:5px 11px}
  .tape{margin-top:26px;font-size:12.5px;padding:8px 14px}

  .field{margin-top:20px}
  .field input{font-size:17px;padding:15px 16px}   /* 16px 미만이면 iOS가 화면을 확대함 */
  .field.row{grid-template-columns:1fr}

  .result-card{padding:20px 17px;border-radius:20px;box-shadow:6px 6px 0 var(--ink);margin-top:18px}
  .result-card::before{inset:7px;border-radius:14px}
  .stamp{width:66px;height:66px;font-size:9px;top:-17px;right:12px}
  .result-name{font-size:30px}
  .result-line{font-size:15.5px}
  .result-body{font-size:14.5px}
  .rows{margin-top:20px}
  .row{grid-template-columns:1fr;gap:3px;padding:12px 14px}
  .row dt{font-size:11.5px}
  .row dd{font-size:14.5px}
  .sec-title{margin-top:26px;font-size:13px}
  .booth{padding:13px 14px;gap:11px}
  .booth-name{font-size:15px}
  .booth-desc{font-size:13.5px}

  .invite{padding:19px 17px;border-radius:18px;margin-top:24px}
  .invite h3{font-size:19px}
  .invite p{font-size:13.5px}
  .invite .agree{font-size:12.5px}

  .marquee{padding:7px 0}
  .marquee span{font-size:11px}
  .marquee-track{gap:24px}
}

/* 아주 좁은 화면 (SE 등) */
@media (max-width:360px){
  .q-title{font-size:20px}
  .cover-title{font-size:44px}
  .result-name{font-size:26px}
  .opt{padding:13px 13px}
}

/* 가로로 눕혔을 때 위아래 여백만 줄임 */
@media (max-height:520px) and (orientation:landscape){
  .stage{padding-top:14px;padding-bottom:20px}
  .cover{padding-top:0}
  .cover-title{font-size:52px}
  .q-num{font-size:40px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}
@media print{
  .topbar,.progress,.marquee,.actions,.invite,.foot,.grain{display:none !important}
  body{background:#fff}
}

/* ==========================================================
   3D 팝업 박스 (커서/CDN 없이 CSS 3D로만)
   상자가 열리고 안에서 U가 솟았다가 다시 닫히는 6초 루프
   ========================================================== */
.cover{position:relative}
.scene{
  position:absolute;right:-52px;top:-34px;width:300px;height:300px;z-index:6;
  perspective:760px;perspective-origin:50% 42%;
  display:grid;place-items:center;pointer-events:none;
  --mx:0;--my:0;
}
.scene>.drop{animation:dropIn 1.15s cubic-bezier(.2,1.25,.35,1) both;transform-style:preserve-3d}
.tilt{
  transform-style:preserve-3d;
  transform:rotateX(calc(-17deg + var(--my) * 9deg)) rotateY(calc(var(--mx) * 13deg));
  transition:transform .35s cubic-bezier(.2,.9,.2,1);
}
/* 시작 버튼에 손이 가면 상자가 반응한다 */
.scene.hot .rot{animation-duration:5s}
.scene.hot .flap,.scene.hot .riser{animation-duration:2.6s}
/* 시작을 누르면 상자가 화면 쪽으로 달려들며 사라진다 */
.scene.launch{animation:launch .42s cubic-bezier(.4,0,.9,.5) forwards}
@keyframes launch{to{transform:scale(2.6) translateY(40px);opacity:0}}
@keyframes dropIn{
  0%{transform:translateY(-62vh) scale(.72);opacity:0}
  45%{opacity:1}
  68%{transform:translateY(16px) scale(1.05)}
  84%{transform:translateY(-7px) scale(.985)}
  100%{transform:translateY(0) scale(1)}
}
.rot{transform-style:preserve-3d;animation:spin 15s linear infinite}
.box{
  position:relative;width:110px;height:110px;transform-style:preserve-3d;
  animation:bob 6s ease-in-out infinite;
}
.box .face{position:absolute;inset:0;border:2.5px solid var(--ink);background:var(--paper)}
.face.fr{transform:translateZ(55px);background:var(--tomato)}
.face.bk{transform:rotateY(180deg) translateZ(55px)}
.face.lf{transform:rotateY(-90deg) translateZ(55px);background:var(--paper-2)}
.face.rt{transform:rotateY(90deg) translateZ(55px);background:var(--paper-2)}
.face.bt{transform:rotateX(-90deg) translateZ(55px)}
/* 앞면의 카세트 구멍 두 개 */
.face.fr::before,.face.fr::after{
  content:"";position:absolute;top:50%;width:26px;height:26px;margin-top:-13px;
  border:2.5px solid var(--ink);border-radius:50%;background:var(--paper);
}
.face.fr::before{left:20px}
.face.fr::after{right:20px}

.floor{
  position:absolute;left:50%;top:50%;width:128px;height:128px;
  background:rgba(20,18,16,.16);border-radius:50%;filter:blur(4px);
  transform:translate(-50%,-50%) rotateX(90deg) translateZ(-58px);
}

/* 뚜껑 네 장 */
.lid{position:absolute;left:0;top:0;width:110px;height:110px;transform:rotateX(90deg) translateZ(55px);transform-style:preserve-3d}
.flap{position:absolute;background:var(--paper-2);border:2.5px solid var(--ink)}
.flap.n{width:110px;height:55px;left:0;top:0;transform-origin:50% 0;animation:flapN 6s .95s ease-in-out infinite}
.flap.s{width:110px;height:55px;left:0;top:55px;transform-origin:50% 100%;animation:flapS 6s .95s ease-in-out infinite}
.flap.w{width:55px;height:110px;left:0;top:0;transform-origin:0 50%;animation:flapW 6s .95s ease-in-out infinite}
.flap.e{width:55px;height:110px;left:55px;top:0;transform-origin:100% 50%;animation:flapE 6s .95s ease-in-out infinite}

/* 안에서 솟는 U 판 */
.riser{
  position:absolute;left:50%;top:50%;width:74px;height:74px;
  transform-style:preserve-3d;animation:rise 6s .95s cubic-bezier(.3,1.4,.4,1) infinite;
}
.ri{
  position:absolute;inset:0;display:grid;place-items:center;
  border:2.5px solid var(--ink);background:var(--lime);
  font-family:var(--display);font-size:42px;line-height:1;color:var(--ink);
}
.ri.b{transform:rotateY(90deg)}

@keyframes spin{to{transform:rotateY(360deg)}}
@keyframes bob{0%,100%{transform:translateY(2px)}50%{transform:translateY(-8px)}}
@keyframes flapN{0%,13%{transform:rotateX(0)}30%,74%{transform:rotateX(118deg)}90%,100%{transform:rotateX(0)}}
@keyframes flapS{0%,13%{transform:rotateX(0)}30%,74%{transform:rotateX(-118deg)}90%,100%{transform:rotateX(0)}}
@keyframes flapW{0%,13%{transform:rotateY(0)}30%,74%{transform:rotateY(-118deg)}90%,100%{transform:rotateY(0)}}
@keyframes flapE{0%,13%{transform:rotateY(0)}30%,74%{transform:rotateY(118deg)}90%,100%{transform:rotateY(0)}}
@keyframes rise{
  0%,16%{transform:translate(-50%,-50%) translateY(26px) rotateY(0deg) scale(.86)}
  38%   {transform:translate(-50%,-50%) translateY(-82px) rotateY(200deg) scale(1)}
  46%   {transform:translate(-50%,-50%) translateY(-66px) rotateY(240deg) scale(1)}
  72%   {transform:translate(-50%,-50%) translateY(-74px) rotateY(330deg) scale(1)}
  92%,100%{transform:translate(-50%,-50%) translateY(26px) rotateY(360deg) scale(.86)}
}

/* ---------- 등장 디테일 ---------- */
.opt{animation:optIn .42s cubic-bezier(.2,.9,.2,1) backwards}
.opt:nth-child(1){animation-delay:.04s}
.opt:nth-child(2){animation-delay:.10s}
.opt:nth-child(3){animation-delay:.16s}
.opt:nth-child(4){animation-delay:.22s}
.opt:nth-child(5){animation-delay:.28s}
@keyframes optIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.booth{animation:optIn .45s cubic-bezier(.2,.9,.2,1) backwards}
.booth:nth-child(1){animation-delay:.30s}
.booth:nth-child(2){animation-delay:.40s}
.booth:nth-child(3){animation-delay:.50s}

/* 체크가 찍히는 감각 */
.opt.on .opt-mark{animation:markPop .28s cubic-bezier(.3,1.6,.4,1)}
@keyframes markPop{0%{transform:scale(1)}45%{transform:scale(1.22)}100%{transform:scale(1)}}

/* 도장이 내리찍히듯 */
.stamp{animation:stampIn .55s .2s cubic-bezier(.3,1.5,.4,1) backwards}
@keyframes stampIn{
  0%{opacity:0;transform:rotate(-26deg) scale(2.4)}
  60%{opacity:1;transform:rotate(11deg) scale(.94)}
  100%{opacity:1;transform:rotate(9deg) scale(1)}
}

/* 진단서 카드가 포인터를 따라 살짝 기울어짐 (마우스 기기에서만) */
.result-card{transition:transform .25s ease}
@media (hover:hover){
  .result-card.tiltable{will-change:transform}
}
/* 터치 기기: 포인터가 없으니 스스로 기울어진다 */
.result-card.autotilt{animation:autoTilt 11s ease-in-out infinite;will-change:transform}
@keyframes autoTilt{
  0%,100%{transform:perspective(900px) rotateY(-3.4deg) rotateX(1.5deg)}
  27%    {transform:perspective(900px) rotateY(.4deg) rotateX(-1.9deg)}
  52%    {transform:perspective(900px) rotateY(3.4deg) rotateX(1.2deg)}
  78%    {transform:perspective(900px) rotateY(-.6deg) rotateX(-1.4deg)}
}

@media (max-width:560px){
  .scene{right:-56px;top:-26px;width:196px;height:196px;perspective:620px}
  .box{width:88px;height:88px}
  .face.fr{transform:translateZ(44px)}
  .face.bk{transform:rotateY(180deg) translateZ(44px)}
  .face.lf{transform:rotateY(-90deg) translateZ(44px)}
  .face.rt{transform:rotateY(90deg) translateZ(44px)}
  .face.bt{transform:rotateX(-90deg) translateZ(44px)}
  .face.fr::before,.face.fr::after{width:20px;height:20px;margin-top:-10px}
  .face.fr::before{left:15px}
  .face.fr::after{right:15px}
  .floor{width:104px;height:104px;transform:translate(-50%,-50%) rotateX(90deg) translateZ(-47px)}
  .lid{width:88px;height:88px;transform:rotateX(90deg) translateZ(44px)}
  .flap.n{width:88px;height:44px}
  .flap.s{width:88px;height:44px;top:44px}
  .flap.w{width:44px;height:88px}
  .flap.e{width:44px;height:88px;left:44px}
  .riser{width:60px;height:60px}
  .ri{font-size:34px}
  @keyframes rise{
    0%,16%{transform:translate(-50%,-50%) translateY(22px) rotateY(0deg) scale(.86)}
    38%   {transform:translate(-50%,-50%) translateY(-66px) rotateY(200deg) scale(1)}
    46%   {transform:translate(-50%,-50%) translateY(-54px) rotateY(240deg) scale(1)}
    72%   {transform:translate(-50%,-50%) translateY(-60px) rotateY(330deg) scale(1)}
    92%,100%{transform:translate(-50%,-50%) translateY(22px) rotateY(360deg) scale(.86)}
  }
}

/* ---------- 세로 여유가 없는 화면 ---------- */
@media (max-height:720px){
  .cover-title{font-size:clamp(40px,13vw,60px)}
  .cover-kr{font-size:19px;margin-top:14px}
  .cover-desc{font-size:13.8px;margin-top:11px;line-height:1.5}
  .cover-meta{margin-top:15px;gap:5px}
  .chip{font-size:11px;padding:4px 9px}
  .actions{margin-top:18px}
  .q-num{font-size:clamp(34px,11vw,46px)}
  .q-title{font-size:20.5px;margin-top:8px}
  .q-sub{font-size:13.5px;margin-top:6px}
  .options{margin-top:15px;gap:8px}
  .opt{padding:12px 13px}
  .opt-label{font-size:15.5px}
  .opt-desc{font-size:13px;margin-top:3px}
  .cover{padding-top:0}
}
@media (max-height:620px){
  .q-num{display:none}
  .cover{padding-top:0}
}

/* ==========================================================
   브릿지 : 시작을 누르면 화면 한가운데서 상자가 팡 터지고
   그 사이로 다음 화면이 열린다 (약 1초)
   ========================================================== */
#bridge{
  position:fixed;inset:0;z-index:50;
  display:grid;place-items:center;pointer-events:none;
}
#bridge::before{
  content:"";position:absolute;inset:0;background:var(--paper);
  animation:bFlash .95s ease-out forwards;
}
.scene.bridge{
  position:relative;right:auto;top:auto;width:auto;height:auto;
  perspective:800px;perspective-origin:50% 50%;
}
.bridge .box{animation:bIn .42s cubic-bezier(.2,1.5,.4,1) both}
.bridge .rot{animation:none;transform:rotateY(-18deg)}
.bridge .tilt{transform:rotateX(-12deg)}
.bridge .flap.n{animation:bFlapN .5s .34s cubic-bezier(.2,1.7,.4,1) forwards}
.bridge .flap.s{animation:bFlapS .5s .34s cubic-bezier(.2,1.7,.4,1) forwards}
.bridge .flap.w{animation:bFlapW .5s .34s cubic-bezier(.2,1.7,.4,1) forwards}
.bridge .flap.e{animation:bFlapE .5s .34s cubic-bezier(.2,1.7,.4,1) forwards}
.bridge .riser{animation:bRise .62s .36s cubic-bezier(.3,.9,.3,1) forwards}
.bridge .floor{opacity:0}

/* 터질 때 사방으로 튀는 조각과 확산되는 링 */
.burst{position:absolute;left:50%;top:50%;width:0;height:0}
.shard{
  position:absolute;left:0;top:0;width:15px;height:15px;
  border:2.5px solid var(--ink);background:var(--lime);
  transform:translate(-50%,-50%) scale(0);
  animation:bShard .72s .36s cubic-bezier(.15,.75,.3,1) forwards;
}
.shard:nth-child(2n){background:var(--tomato)}
.shard:nth-child(3n){background:var(--lilac);border-radius:50%}
.shard:nth-child(4n){background:var(--blue)}
.ring{
  position:absolute;left:50%;top:50%;width:120px;height:120px;margin:-60px 0 0 -60px;
  border:3px solid var(--ink);border-radius:50%;opacity:0;
  animation:bRing .6s .36s ease-out forwards;
}

@keyframes bFlash{0%{opacity:1}55%{opacity:.9}100%{opacity:0}}
@keyframes bIn{
  0%{transform:translateY(70px) scale(.25);opacity:0}
  50%{transform:translateY(0) scale(1.1);opacity:1}
  68%{transform:translateY(0) scale(.9)}
  100%{transform:translateY(0) scale(1)}
}
@keyframes bFlapN{to{transform:rotateX(134deg)}}
@keyframes bFlapS{to{transform:rotateX(-134deg)}}
@keyframes bFlapW{to{transform:rotateY(-134deg)}}
@keyframes bFlapE{to{transform:rotateY(134deg)}}
@keyframes bRise{
  0%{transform:translate(-50%,-50%) translateY(30px) rotateY(0deg) scale(.5);opacity:1}
  40%{transform:translate(-50%,-50%) translateY(-90px) rotateY(160deg) scale(1.15);opacity:1}
  100%{transform:translate(-50%,-50%) translateY(-150px) rotateY(300deg) scale(3.6);opacity:0}
}
@keyframes bShard{
  0%{transform:translate(-50%,-50%) rotate(var(--a)) translateX(0) rotate(0) scale(.3);opacity:0}
  18%{opacity:1}
  100%{transform:translate(-50%,-50%) rotate(var(--a)) translateX(var(--d)) rotate(var(--r)) scale(.55);opacity:0}
}
@keyframes bRing{
  0%{opacity:.85;transform:scale(.3)}
  100%{opacity:0;transform:scale(3.4)}
}

}