/* 원티드 DS 로 갈아끼운다. 아래 규칙들이 쓰는 이름은 그대로 두고 값만 바꾼다.
     (tokens.css 가 Semantic 토큰을 정의한다) */
  :root{
    --bg:var(--bg-normal);
    --bg-2:var(--bg-elevated);
    --paper:var(--label-normal);
    --ink:var(--static-black);
    --accent:var(--primary-normal);   /* 선택·강조 */
    --danger:var(--status-negative);  /* 통화 종료 */
    --live:var(--status-positive);
    --dim:var(--label-alt);
  }
  *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
  body{
    background:var(--bg);color:var(--paper);
    font-family:var(--body);
    font-size:15px;line-height:22px;letter-spacing:0.0096em;
    min-height:100vh;overflow-x:hidden;
  }
  .wrap{max-width:420px;margin:0 auto;padding:0 20px calc(28px + env(safe-area-inset-bottom))}

  .screen{display:none;animation:in .34s cubic-bezier(.2,.8,.3,1)}
  .screen.on{display:block}
  @keyframes in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

  header{padding:22px 0 16px;display:flex;align-items:center;gap:10px}
  .back{
    width:32px;height:32px;border-radius:var(--r);border:1px solid rgba(232,214,187,.2);
    background:none;color:var(--paper);font-size:16px;cursor:pointer;flex:none;
  }
  .kicker{font-family:var(--brand);font-weight:700;
    font-size:11px;line-height:14px;letter-spacing:0.0311em;color:var(--label-alt);
    text-transform:uppercase}

  /* ── 프로필 ── */
  .hero{
    border-radius:var(--r);overflow:hidden;position:relative;
    background:linear-gradient(150deg,#c9a97f,#a8825a 55%,#8d6a48);
    aspect-ratio:63/70;display:flex;align-items:center;justify-content:center;
    animation:pop .5s cubic-bezier(.2,1.1,.35,1) both;
    /* 실물 카드 비율(63:70)은 지키고, 높이만 뷰포트에 묶는다.
       작은 폰에서 "통화 걸기"가 접힘 아래로 내려가면 전시가 성립하지 않는다. */
    width:min(100%, calc(46svh * 63 / 70));
    min-height:196px;margin-inline:auto;
  }
  @keyframes pop{from{opacity:0;transform:scale(.9) rotate(-2deg)}to{opacity:1;transform:none}}
  .ph{text-align:center;color:rgba(255,255,255,.6);font-size:12px;font-weight:700;letter-spacing:1px;line-height:2}
  .ph b{display:block;font-size:16px;letter-spacing:2px}
  .badge{
    position:absolute;top:12px;left:12px;background:var(--ink);color:var(--paper);
    font-size:11px;font-weight:900;padding:5px 9px;border-radius:var(--r);letter-spacing:.5px;
  }
  .serial{
    position:absolute;bottom:10px;right:10px;font-size:10px;font-weight:800;letter-spacing:1px;
    color:#fff;background:rgba(0,0,0,.46);padding:4px 8px;border-radius:var(--r);
    backdrop-filter:blur(3px);
  }

  h1{font-family:var(--brand);font-weight:700;
     font-size:28px;line-height:38px;letter-spacing:-0.0236em;margin:16px 0 4px}
  .tags{font-size:13px;color:var(--dim);font-weight:700}
  .hero .face{width:100%;height:100%;object-fit:cover}
  .status.wait{color:#e0a93c}
  .status.wait .dot{background:#e0a93c}
  .status{
    display:inline-flex;align-items:center;gap:6px;margin-top:14px;
    font-size:12px;font-weight:800;color:var(--live);
  }
  .dot{width:7px;height:7px;border-radius:50%;background:var(--live);animation:pulse 1.6s infinite}
  @keyframes pulse{50%{opacity:.35}}

  .joinbar{
    display:flex;align-items:center;gap:12px;margin-bottom:16px;
    background:rgba(62,207,142,.1);border:1px solid rgba(62,207,142,.3);
    border-radius:var(--r);padding:13px 15px;
  }
  .joinbar b{display:block;font-size:14px;font-weight:800;color:var(--live)}
  .joinbar small{font-size:12px;color:var(--dim);font-weight:600}
  .joinbar button{
    margin-left:auto;padding:9px 14px;border-radius:var(--r);border:none;cursor:pointer;
    background:var(--live);color:#0d2a1c;font-size:13px;font-weight:800;font-family:inherit;
  }
  .actions{display:flex;flex-direction:column;gap:10px;margin-top:24px}
  .act{
    display:flex;align-items:center;gap:14px;width:100%;
    background:var(--bg-2);border:1px solid rgba(232,214,187,.11);
    border-radius:var(--r);padding:17px 16px;cursor:pointer;
    color:var(--paper);text-align:left;font-family:inherit;
    transition:transform .12s,border-color .12s;
  }
  .act:active{transform:scale(.985);border-color:rgba(232,214,187,.3)}
  .act.primary{background:var(--paper);color:var(--ink);border-color:transparent}
  .act.primary small{color:rgba(43,29,20,.62)}
  .act .ico{flex:none;width:26px;height:26px;display:grid;place-items:center}
  .act .ico svg{width:23px;height:23px}
  .act b{display:block;font-size:15px;font-weight:800;margin-bottom:3px}
  .act small{font-size:12px;color:var(--dim);font-weight:600}
  .act .arrow{margin-left:auto;width:16px;height:16px;opacity:.55;flex:none}

  .ghost{
    margin-top:22px;width:100%;padding:15px;border-radius:var(--r);
    background:none;border:1px dashed rgba(232,214,187,.28);
    color:var(--dim);font-size:13px;font-weight:700;font-family:inherit;cursor:pointer;
  }

  /* ── 통화 화면 ── */
  .call{
    position:fixed;inset:0;max-width:420px;margin:0 auto;
    background:#0d0a07;display:none;flex-direction:column;
    animation:in .3s ease;z-index:10;
  }
  .call.on{display:flex}
  .call-top{
    padding:calc(18px + env(safe-area-inset-top)) 20px 12px;
    display:flex;align-items:center;gap:9px;z-index:3;
  }
  .rec{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:800;color:var(--live)}
  .timer{margin-left:auto;font-size:12px;font-weight:700;color:var(--dim);font-variant-numeric:tabular-nums}

  .stage{flex:1;position:relative;overflow:hidden;display:flex;flex-direction:column}
  .feed{
    flex:1;margin:0 16px;border-radius:var(--r);position:relative;overflow:hidden;
    background:linear-gradient(150deg,#c9a97f,#a8825a 55%,#8d6a48);
    display:flex;align-items:center;justify-content:center;
  }
  /* 아이돌이 말하는 동안 화면이 살짝 반응 */
  .feed video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none;z-index:1}
  .feed .ph{position:relative;z-index:2}
  .feed.talking{animation:talk 1.8s ease-in-out infinite}
  @keyframes talk{50%{filter:brightness(1.08)}}

  .self video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
              display:none;border-radius:var(--r);transform:scaleX(-1)}
  .self span{position:relative;z-index:2}
  .self.on span{display:none}
  .self{position:relative;overflow:hidden;
    position:absolute;bottom:14px;right:14px;width:74px;aspect-ratio:3/4;
    border-radius:var(--r);background:#2a2119;border:1px solid rgba(255,255,255,.14);
    display:flex;align-items:center;justify-content:center;
    font-size:10px;font-weight:700;color:rgba(255,255,255,.45);
  }
  .caption{
    padding:18px 24px 8px;text-align:center;min-height:74px;
    font-size:15px;font-weight:700;line-height:1.6;
  }
  .caption em{font-style:normal;color:var(--dim);font-weight:600;font-size:13px}

  .call-bar{
    padding:10px 20px calc(24px + env(safe-area-inset-bottom));
    display:flex;gap:10px;align-items:center;justify-content:center;
  }
  .cbtn{
    flex:1;padding:14px 8px;border-radius:var(--r);border:none;cursor:pointer;
    background:var(--bg-2);color:var(--paper);font-family:inherit;
    font-size:12px;font-weight:800;display:flex;flex-direction:column;align-items:center;gap:5px;
  }
  .cbtn svg{width:21px;height:21px}
  .cbtn.end{background:var(--accent);color:#fff;flex:none;width:64px}
  .cbtn:active{transform:scale(.96)}

  .opts{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:18px}
  .opt{
    padding:15px 12px;border-radius:var(--r);cursor:pointer;font-family:inherit;
    background:rgba(232,214,187,.07);border:1.5px solid transparent;
    color:var(--paper);font-size:14px;font-weight:700;text-align:center;
  }
  .opt.sel{border-color:var(--accent);background:rgba(255,214,10,.12)}
  .cta{
    width:100%;padding:16px;border-radius:var(--r);border:none;cursor:pointer;
    background:var(--paper);color:var(--ink);font-size:15px;font-weight:900;font-family:inherit;
  }
  .cta:disabled{opacity:.3}

  /* ── 멀티콜 ── */
  .seats{display:flex;flex-direction:column;gap:10px;margin:10px 0 22px}
  .seat{
    display:flex;align-items:center;gap:13px;padding:13px 14px;
    border-radius:var(--r);background:var(--bg-2);border:1px solid rgba(232,214,187,.1);
  }
  .seat.empty{background:none;border:1.5px dashed rgba(232,214,187,.22);cursor:pointer}
  .thumb{
    width:42px;height:52px;border-radius:var(--r);flex:none;
    background:linear-gradient(150deg,#c9a97f,#8d6a48);
    display:flex;align-items:center;justify-content:center;font-size:9px;color:rgba(255,255,255,.55);font-weight:700;
  }
  .thumb.me{background:#2a2119;color:var(--dim)}
  .seat b{display:block;font-size:14.5px;font-weight:800;margin-bottom:3px}
  .seat small{font-size:12px;color:var(--dim);font-weight:600}
  .seat .tail{margin-left:auto;font-size:11px;font-weight:800;color:var(--dim)}
  .seat .tail.wait{color:#e0a93c}
  .seat .tail.ok{color:var(--live)}

  .note{
    font-size:12.5px;color:var(--dim);line-height:1.8;font-weight:600;
    background:var(--bg-2);border-radius:var(--r);padding:14px 15px;margin-bottom:20px;
  }
  .note b{color:var(--paper)}

  /* 스캔 대기 */
  .scanbox{
    aspect-ratio:1;border-radius:var(--r);margin:14px 0 20px;
    border:2px dashed rgba(232,214,187,.28);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
    background:rgba(232,214,187,.03);
  }
  .scanbox{position:relative;overflow:hidden}
  .scanbox video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}
  .scanbox .big{width:52px;height:52px;opacity:.75;animation:pulse 1.8s infinite}
  .scanbox p{font-size:13.5px;color:var(--dim);font-weight:700;text-align:center;line-height:1.8}

  /* 멀티 통화 그리드 */
  .grid{
    flex:1;margin:0 16px;display:grid;gap:8px;
    grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;
  }
  .cell{
    border-radius:var(--r);position:relative;overflow:hidden;
    background:linear-gradient(150deg,#c9a97f,#8d6a48);
    display:flex;align-items:center;justify-content:center;
    font-size:11px;font-weight:700;color:rgba(255,255,255,.6);
  }
  .cell.person{background:#2a2119;color:var(--dim)}
  .cell video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}
  .cell.person video{transform:scaleX(-1)}
  .cell.turn{outline:2px solid var(--live);outline-offset:-2px}
  .cell .who{z-index:2}
  .cell .who{
    position:absolute;bottom:8px;left:8px;font-size:10.5px;font-weight:800;
    color:#fff;background:rgba(0,0,0,.42);padding:3px 7px;border-radius:var(--r);
  }

  .loading{text-align:center;padding:70px 0}
  .spin{
    width:44px;height:44px;margin:0 auto 22px;border-radius:50%;
    border:3px solid rgba(232,214,187,.15);border-top-color:var(--accent);
    animation:spin .8s linear infinite;
  }
  @keyframes spin{to{transform:rotate(360deg)}}
  .loading p{font-size:14px;color:var(--dim);font-weight:700}

  /* ── 접근성 ── */
  /* 전시장 태블릿은 키보드/스위치로도 조작된다. 링은 보이되 탭할 때는 안 뜬다. */
  :where(button,[tabindex]):focus-visible{
    outline:2px solid var(--live);outline-offset:3px;border-radius:var(--r);
  }
  .sr{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip-path:inset(50%);white-space:nowrap;
  }
  /* 전정 감각 문제가 있는 관람객에게 카드 튀어오름·펄스는 불쾌할 수 있다 */
  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{
      animation-duration:.01ms !important;animation-iteration-count:1 !important;
      transition-duration:.01ms !important;
    }
    .screen,.hero{animation:none}
  }

  /* 로비에서 alert() 대신 쓰는 인라인 안내 */
  .hint{
    margin:0 0 12px;padding:12px 14px;border-radius:var(--r);
    background:rgba(216,69,47,.14);border:1px solid rgba(216,69,47,.42);
    color:var(--paper);font-size:13px;font-weight:700;line-height:1.6;
  }
  .hint[hidden]{display:none}

  .joinbar .joinico{flex:none;width:26px;height:26px;display:grid;place-items:center;color:var(--live)}
  .joinbar .joinico svg{width:22px;height:22px}
  .ghost svg{width:15px;height:15px;vertical-align:-2px;margin-right:4px}
  .thumb.me svg{width:17px;height:17px}
  .back svg{width:15px;height:15px}
  .scanbox .big svg{width:100%;height:100%}

  /* ── 카드 만들기 ── */
  .steps{display:flex;gap:6px;margin:0 0 18px}
  .steps i{
    flex:1;height:3px;border-radius:2px;background:rgba(232,214,187,.16);
    font-style:normal;transition:background .25s;
  }
  .steps i.on{background:var(--paper)}
  .q{font-size:20px;font-weight:800;letter-spacing:-.4px;margin-bottom:4px}
  .qsub{font-size:13px;color:var(--dim);font-weight:600;margin-bottom:18px}

  /* 성별 — 두 칸짜리 세그먼티드 */
  .seg{display:flex;gap:6px;background:rgba(232,214,187,.07);border-radius:var(--r);padding:5px;margin-bottom:22px}
  .seg button{
    flex:1;padding:11px;border-radius:var(--r);border:none;cursor:pointer;font-family:inherit;
    background:none;color:var(--dim);font-size:14px;font-weight:800;
  }
  .seg button.sel{background:var(--paper);color:var(--ink)}

  /* 등급 — 설명이 붙어야 고를 수 있다 */
  .grades{display:flex;flex-direction:column;gap:10px;margin-bottom:22px}
  .grade{
    text-align:left;padding:16px;border-radius:var(--r);cursor:pointer;font-family:inherit;
    background:var(--bg-2);border:1.5px solid rgba(232,214,187,.11);color:var(--paper);
  }
  .grade.sel{border-color:var(--accent);background:rgba(255,214,10,.10)}
  .grade b{display:block;font-size:15.5px;font-weight:800;margin-bottom:4px}
  .grade small{display:block;font-size:12.5px;color:var(--dim);font-weight:600;line-height:1.65}

  /* 얼굴상 · 종족 — 라벨 + 보조설명 */
  .opt.two{display:flex;flex-direction:column;gap:3px;padding:14px 10px;line-height:1.35}
  .opt.two b{font-size:14px;font-weight:800}
  .opt.two small{font-size:11px;color:var(--dim);font-weight:600}
  .opt.two.sel small{color:rgba(232,214,187,.8)}

  .field{margin-bottom:18px}
  .field label{display:block;font-size:12.5px;font-weight:800;color:var(--dim);margin-bottom:8px}
  .field input{
    width:100%;padding:15px 14px;border-radius:var(--r);font-family:inherit;
    background:rgba(232,214,187,.07);border:1.5px solid rgba(232,214,187,.14);
    color:var(--paper);font-size:16px;font-weight:700;  /* 16px 미만이면 iOS 가 화면을 확대한다 */
  }
  .field input::placeholder{color:rgba(232,214,187,.32);font-weight:600}
  .field input:focus{outline:none;border-color:var(--paper)}

  /* 확인 단계 — 생성기에 넘어갈 값을 그대로 보여준다 */
  .review{background:var(--bg-2);border-radius:var(--r);padding:6px 15px;margin-bottom:14px}
  .review div{
    display:flex;gap:12px;padding:11px 0;font-size:13.5px;font-weight:700;
    border-bottom:1px solid rgba(232,214,187,.08);
  }
  .review div:last-child{border-bottom:none}
  .review span{color:var(--dim);font-weight:700;flex:none;width:76px}
  .review b{font-weight:800}

  .caution{
    display:flex;gap:9px;font-size:12.5px;line-height:1.65;font-weight:700;color:#e0a93c;
    background:rgba(224,169,60,.1);border:1px solid rgba(224,169,60,.3);
    border-radius:var(--r);padding:12px 14px;margin-bottom:14px;
  }
  .caution[hidden]{display:none}

  .field textarea{
    width:100%;padding:14px;border-radius:var(--r);font-family:var(--body);
    background:var(--fill-alt);border:1px solid var(--line-normal);
    color:var(--label-normal);font-size:16px;line-height:26px;letter-spacing:0.0057em;
    resize:none;
  }
  .field textarea:focus{outline:none;border-color:var(--label-normal)}
  .field textarea::placeholder{color:var(--label-assistive)}
  .presets{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
  .presets button{
    font-family:var(--brand);font-size:14px;line-height:20px;font-weight:700;padding:8px 14px;border-radius:999px;
    background:var(--fill-alt);border:1px solid var(--line-normal);color:var(--label-normal);cursor:pointer;
  }
  .presets button.on{background:var(--primary-normal);border-color:var(--primary-normal);color:#0d0d0d}
  .presets button.more{background:none;border-style:dashed;color:var(--label-alt)}
  .ctxline{
    margin-top:6px;text-align:right;font-family:var(--brand);
    font-size:12px;line-height:16px;letter-spacing:0.0252em;color:var(--label-alt);
  }

  /* ── 통화 직후 한 문항 ── */
  .survey{position:fixed;inset:0;z-index:20;display:none}
  .survey.on{display:block}
  .survey .dim{position:absolute;inset:0;background:var(--dimmer)}
  .survey .sheet{
    position:absolute;left:50%;bottom:0;transform:translateX(-50%);
    width:100%;max-width:420px;background:var(--bg-elevated);
    border:1px solid var(--line-solid);border-bottom:none;
    border-radius:var(--r-sheet) var(--r-sheet) 0 0;
    padding:10px 20px calc(env(safe-area-inset-bottom) + 24px);
    animation:sheetUp .3s cubic-bezier(.2,.8,.3,1) both;
  }
  @keyframes sheetUp{from{transform:translate(-50%,100%)}to{transform:translate(-50%,0)}}
  .survey .grab{width:36px;height:4px;border-radius:2px;background:var(--interaction-inactive);margin:0 auto 18px}
  .survey .sq{
    font-family:var(--brand);font-weight:700;
    font-size:17px;line-height:24px;margin-bottom:4px;color:var(--label-normal);
  }
  .survey .sn{
    font-family:var(--brand);font-size:12px;line-height:16px;letter-spacing:0.0252em;
    color:var(--label-alt);margin-bottom:18px;
  }
  .scale{display:flex;gap:6px;margin-bottom:10px}
  .scale button{
    flex:1;padding:14px 0;border-radius:var(--r);cursor:pointer;font-family:var(--brand);
    background:var(--fill-alt);border:1px solid var(--line-normal);
    color:var(--label-neutral);font-size:15px;font-weight:700;
  }
  .scale button:hover{opacity:.7}
  .scale button.sel{background:var(--primary-normal);border-color:var(--primary-normal);color:var(--static-black)}
  .ends{
    display:flex;justify-content:space-between;margin-bottom:18px;
    font-family:var(--brand);font-size:12px;line-height:16px;letter-spacing:0.0252em;
    color:var(--label-alt);
  }

  /* 작은 폰(SE 등)에서는 수직 여백을 조여 두 액션을 모두 첫 화면에 남긴다 */
  @media (max-height:700px){
    header{padding:16px 0 10px}
    h1{font-size:31px;margin:12px 0 4px}
    .status{margin-top:10px}
    .actions{margin-top:16px;gap:8px}
    .act{padding:14px 16px}
    .ghost{margin-top:16px;padding:13px}
  }

  /* 꾸미기 — 버추얼 카드만 */
  .cust-stage{position:relative;aspect-ratio:1;border-radius:var(--r);background:var(--bg-2);
         overflow:hidden;margin-bottom:18px;display:grid;place-items:center}
  .sw{display:flex;gap:9px;flex-wrap:wrap}
  .sw button{width:36px;height:36px;border-radius:50%;border:2px solid rgba(232,214,187,.18);
             padding:0;cursor:pointer;position:relative}
  .sw button.sel{border-color:var(--paper);box-shadow:0 0 0 2px var(--bg) inset}
  .sw button.orig{background:transparent}
  .sw button.orig::after{content:"";position:absolute;inset:6px;border-top:2px solid var(--dim);
                         transform:rotate(-45deg) translateY(6px)}
  .sw input[type=color]{position:absolute;inset:0;opacity:0;cursor:pointer}
  .sw button.pick{background:conic-gradient(#f66,#fc6,#6f9,#6cf,#c6f,#f66)}
  /* 만들기 — 생성 결과. 라벨(40×60mm)과 같은 2:3. 버튼이 첫 화면에 남게 높이를 묶는다 */
  .gen-stage{position:relative;aspect-ratio:2/3;width:min(100%,calc(56vh * 2 / 3));margin:0 auto 16px;
             border-radius:var(--r);background:var(--bg-2);overflow:hidden;display:grid;place-items:center}
  .gen-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
  .gen-stage .loading{padding:0}
  .gen-stage .loading[hidden]{display:none}
  .opt.hair{display:flex;align-items:center;justify-content:center;gap:7px;padding:12px 8px}
  .opt.hair i{width:16px;height:16px;border-radius:50%;flex:none;box-shadow:0 0 0 1px rgba(232,214,187,.25)}

  /* 만들기 — 발급 뒤 다음 갈 곳 */
  .after{display:flex;flex-direction:column;gap:10px;margin-top:12px}
  a.act{text-decoration:none}
  .kicker.home{margin-left:auto;text-decoration:none}

  /* ── 걸려오는 전화 (ring.js) ── */
  .ring{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;justify-content:space-between;
        background:#0b0b0c;color:#fff;animation:in .3s ease;
        padding:calc(64px + env(safe-area-inset-top)) 24px calc(56px + env(safe-area-inset-bottom))}
  .ring-bg{position:absolute;inset:-40px;background-size:cover;background-position:center 20%;
           filter:blur(28px) brightness(.45) saturate(1.2);transform:scale(1.1)}
  .ring-top,.ring-acts{position:relative}
  .ring-top{text-align:center}
  .ring-app{display:inline-flex;align-items:center;gap:6px;font-family:var(--brand);font-weight:500;
            font-size:13px;letter-spacing:.06em;color:rgba(255,255,255,.75)}
  .ring-app i{width:7px;height:7px;border-radius:50%;background:var(--primary-normal);display:block}
  .ring-face{width:132px;height:132px;margin:36px auto 22px;border-radius:50%;overflow:hidden;
             background:#2a2b2e;box-shadow:0 0 0 0 rgba(255,214,10,.5);animation:ringPulse 1.6s ease-out infinite}
  .ring-face img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
  @keyframes ringPulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.35)}100%{box-shadow:0 0 0 34px rgba(255,255,255,0)}}
  .ring-name{font-family:var(--brand);font-weight:700;font-size:36px;line-height:46px;letter-spacing:-.02em}
  .ring-sub{font-size:16px;color:rgba(255,255,255,.7);margin-top:6px}
  .ring-acts{display:flex;justify-content:space-around;max-width:360px;width:100%;margin:0 auto}
  .ring-btn{display:flex;flex-direction:column;align-items:center;gap:10px;background:none;border:none;
            color:#fff;font-family:var(--body);font-size:14px;cursor:pointer}
  .ring-btn span{width:72px;height:72px;border-radius:50%;display:grid;place-items:center}
  .ring-btn svg{width:32px;height:32px}
  .ring-btn.no span{background:#ff4b4b}
  .ring-btn.yes span{background:#22c55e;animation:ringShake 1.1s ease-in-out infinite}
  @keyframes ringShake{0%,60%,100%{transform:none}70%{transform:rotate(-12deg)}80%{transform:rotate(12deg)}90%{transform:rotate(-8deg)}}

  /* 다른 페이지에서 받기를 누르고 넘어왔는데 브라우저가 소리를 막았을 때 */
  .tap-answer{position:fixed;inset:0;z-index:50;background:#0b0b0c;color:#fff;display:flex;flex-direction:column;
              align-items:center;justify-content:center;gap:18px;text-align:center;padding:24px;border:none;
              font-family:var(--body);cursor:pointer;width:100%}
  .tap-answer b{font-family:var(--brand);font-size:26px;line-height:34px}
  .tap-answer span{font-size:15px;color:rgba(255,255,255,.7)}

  /* 음성 통화 — 영상이 없으면 카드 사진을 깔아 누구와 통화 중인지 보이게 한다.
     Simli 영상 · VRM 캔버스는 이 위를 덮는다 */
  .feed.has-photo{background:var(--photo) center 20%/cover no-repeat}
  .feed.has-photo::before{content:"";position:absolute;inset:0;
    background:linear-gradient(to bottom,rgba(0,0,0,.05) 50%,rgba(0,0,0,.55));z-index:0}
  .feed.has-photo .ph{align-self:flex-end;margin-bottom:22px;color:rgba(255,255,255,.85)}

  /* ── 음성 통화 — 전화 앱처럼 (c-solo.voice) ── */
  .vcall{display:none}
  .call.voice{max-width:none;background:#0b0b0c}
  .call.voice .call-top,.call.voice .stage,.call.voice .call-bar{display:none}
  .call.voice .vcall{display:flex;flex-direction:column;justify-content:space-between;flex:1;position:relative;overflow:hidden;
    padding:calc(64px + env(safe-area-inset-top)) 24px calc(52px + env(safe-area-inset-bottom));color:#fff}
  .vcall-bg{position:absolute;inset:-40px;background-size:cover;background-position:center 20%;
            filter:blur(28px) brightness(.4) saturate(1.2);transform:scale(1.1)}
  .vcall-top,.vcall-acts{position:relative}
  .vcall-top{text-align:center}
  .vcall-app{display:inline-flex;align-items:center;gap:6px;font-family:var(--brand);font-weight:500;
             font-size:13px;letter-spacing:.06em;color:rgba(255,255,255,.75)}
  .vcall-app i{width:7px;height:7px;border-radius:50%;background:var(--primary-normal);display:block;animation:pulse 1.6s infinite}
  /* 통화 중 움직이는 그림 — 사진 둘레로 번지는 물결. 아이돌이 말할 때 빨라지고 진해진다 */
  .vcall-face{position:relative;width:148px;height:148px;margin:40px auto 24px}
  .vcall-face img{position:relative;z-index:1;width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:50% 18%;
                  background:#2a2b2e;box-shadow:0 10px 40px rgba(0,0,0,.4)}
  .vcall-face .wave{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,255,255,.35);
                    animation:vwave 3s ease-out infinite;opacity:0}
  .vcall-face .w2{animation-delay:1s}.vcall-face .w3{animation-delay:2s}
  @keyframes vwave{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.7);opacity:0}}
  .vcall.talking .vcall-face .wave{border-color:var(--primary-normal);animation-duration:1.4s}
  .vcall-name{font-family:var(--brand);font-weight:700;font-size:34px;line-height:44px;letter-spacing:-.02em}
  .vcall-time{font-size:16px;color:rgba(255,255,255,.7);margin-top:6px;font-variant-numeric:tabular-nums}
  /* 음성 파형 — 말할 때만 춤춘다 */
  .eq{display:flex;justify-content:center;align-items:center;gap:4px;height:28px;margin-top:22px}
  .eq i{width:4px;height:4px;border-radius:2px;background:rgba(255,255,255,.4);transition:background .2s}
  .vcall.talking .eq i{background:var(--primary-normal);animation:eq .9s ease-in-out infinite}
  .vcall.talking .eq i:nth-child(2){animation-delay:.1s}.vcall.talking .eq i:nth-child(3){animation-delay:.25s}
  .vcall.talking .eq i:nth-child(4){animation-delay:.05s}.vcall.talking .eq i:nth-child(5){animation-delay:.3s}
  .vcall.talking .eq i:nth-child(6){animation-delay:.15s}.vcall.talking .eq i:nth-child(7){animation-delay:.2s}
  @keyframes eq{0%,100%{height:4px}50%{height:26px}}
  .vcall-acts{display:flex;justify-content:space-around;max-width:360px;width:100%;margin:0 auto}
  .vbtn{display:flex;flex-direction:column;align-items:center;gap:10px;background:none;border:none;color:#fff;
        font-family:var(--body);font-size:13px;cursor:pointer}
  .vbtn span{width:68px;height:68px;border-radius:50%;display:grid;place-items:center;
             background:rgba(255,255,255,.16);backdrop-filter:blur(8px);transition:background .15s,color .15s}
  .vbtn svg{width:28px;height:28px}
  .vbtn.on span{background:#fff;color:#111}
  .vbtn.end span{background:#ff4b4b;color:#fff}
  .vbtn:active span{transform:scale(.94)}

  /* 시연 모드 */
  body.demo .no-demo{display:none}
  .demo-only{display:none}
  body.demo .demo-only{display:flex}
  body.demo .joinbar{display:none !important}
  /* 아이패드에서 카드 화면이 너무 좁지 않게 */
  @media (min-width:700px){ body.demo .wrap{max-width:540px} }

  /* 표정 세트가 있는 아이돌 — 사진을 크게, 표정은 겹친 사진 사이로 부드럽게 바뀐다 */
  .vcall.expr .vcall-top{display:flex;flex-direction:column;align-items:center;flex:1;min-height:0}
  .vcall-portrait{position:relative;flex:1;min-height:0;width:100%;max-width:min(520px,calc((100svh - 330px) * 2 / 3));
    margin:22px auto 18px;border-radius:24px;overflow:hidden;background:#1b1c1e;
    box-shadow:0 20px 60px rgba(0,0,0,.5);transition:box-shadow .3s,transform .3s}
  .vcall-portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 18%;
    opacity:0;transition:opacity .35s ease}
  .vcall-portrait img.on{opacity:1}
  .vcall.expr.talking .vcall-portrait{box-shadow:0 0 0 3px var(--primary-normal),0 20px 60px rgba(0,0,0,.5);
    animation:speakBob 1.2s ease-in-out infinite}
  @keyframes speakBob{50%{transform:translateY(-3px) scale(1.006)}}
  .vcall.expr .vcall-name{font-size:30px;line-height:38px}
  .vcall.expr .eq{margin-top:12px}
  .call.voice .vcall.expr{padding-top:calc(28px + env(safe-area-inset-top));padding-bottom:calc(32px + env(safe-area-inset-bottom))}

  /* 만들기 — 종류를 예시 사진으로 고른다 */
  .kinds{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:22px}
  .grade.kind{padding:8px 8px 14px;display:flex;flex-direction:column;text-align:center}
  .grade.kind .ex{display:block;aspect-ratio:3/4;border-radius:var(--r);overflow:hidden;margin-bottom:12px;background:var(--bg-elevated-alt)}
  .grade.kind .ex img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;display:block;transition:transform .25s}
  .grade.kind.sel .ex img{transform:scale(1.04)}
  .grade.kind.sel{box-shadow:0 0 0 1px var(--accent)}

  /* ── 주요 버튼(다음 · 사진 만들기 · 카드 만들기 · 인쇄) — 옐로우 → 핑크 → 보라 그라데이션 ──
     2026-10-07 시안: 흰 굵은 글씨 + 반짝이(네 갈래 별) */
  .cta{
    position:relative;display:flex;align-items:center;justify-content:center;gap:14px;
    min-height:64px;padding:16px 24px;border-radius:18px;border:none;
    background:linear-gradient(90deg,#d9d453 0%,#e3709a 30%,#e63bc0 55%,#b43bd8 78%,#8b3be6 100%);
    color:#fff;font-family:var(--brand);font-weight:700;font-size:20px;letter-spacing:-.01em;
    box-shadow:0 10px 30px rgba(230,59,192,.25);transition:transform .12s,filter .15s;
  }
  .cta::after{
    content:"";width:22px;height:22px;flex:none;background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.8 6.5 5.5 11.2 12 12-6.5.8-11.2 5.5-12 12-.8-6.5-5.5-11.2-12-12C6.5 11.2 11.2 6.5 12 0Z'/%3E%3C/svg%3E") center/contain no-repeat;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.8 6.5 5.5 11.2 12 12-6.5.8-11.2 5.5-12 12-.8-6.5-5.5-11.2-12-12C6.5 11.2 11.2 6.5 12 0Z'/%3E%3C/svg%3E") center/contain no-repeat;
  }
  .cta:hover{filter:brightness(1.06)}
  .cta:active{transform:scale(.985)}
  .cta:disabled{opacity:.35;box-shadow:none}

  /* 통화 중 내 얼굴 — 음성 통화 화면에서는 오른쪽 위 작은 창 */
  .vcall .self{position:absolute;top:calc(20px + env(safe-area-inset-top));right:20px;bottom:auto;z-index:3;
    width:112px;border-radius:14px;border:2px solid rgba(255,255,255,.25);background:#222;
    box-shadow:0 8px 24px rgba(0,0,0,.45);overflow:hidden}
  .vcall .self video{border-radius:0}
  @media (min-width:700px){ .vcall .self{width:150px} }

  /* 자막 — 아이돌이 하는 말. 최근 세 줄만 보이게 아래부터 자른다 */
  .vsub{margin:14px auto 0;max-width:560px;min-height:0;padding:0 8px;
    font-size:19px;line-height:28px;font-weight:600;color:#fff;text-align:center;word-break:keep-all;
    text-shadow:0 1px 8px rgba(0,0,0,.6);
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
    opacity:0;transition:opacity .2s}
  .vsub.on{opacity:1;background:rgba(0,0,0,.35);border-radius:12px;padding:10px 16px}
  @media (min-width:700px){ .vsub{font-size:22px;line-height:32px} }
  .vcall-acts{margin-top:16px}

  /* ══ 2026-10-07 버튼 · 칸 통일 ══
     모든 누르는 것은 같은 모서리(14px) · 같은 높이 계열(주요 52px). 그라데이션은 주요 버튼만. */
  :root{ --rb:14px; }
  .cta{min-height:52px;padding:13px 20px;border-radius:var(--rb);font-size:17px;gap:10px;
       box-shadow:0 6px 18px rgba(230,59,192,.18)}
  .cta::after{width:16px;height:16px}
  .ghost,.act,.grade,.gen-stage,.review,.note,.field input,.field textarea,.cust-stage,.hint,.caution{border-radius:var(--rb)}
  .ghost{min-height:52px;padding:13px 20px;font-size:15px;margin-top:10px}
  .act{padding:15px 16px}
  .opt{border-radius:12px;min-height:52px}
  .seg{border-radius:var(--rb);padding:4px}
  .seg button{border-radius:10px;min-height:44px}
  .back{border-radius:12px;width:36px;height:36px}
  .grade.kind .ex{border-radius:10px}

  /* ══ 단계 — 번호 동그라미 + 이름, 지난 단계는 체크 ══ */
  ol.steps{list-style:none;display:flex;gap:0;margin:2px 0 22px;padding:0;counter-reset:st}
  ol.steps li{flex:1;position:relative;counter-increment:st;display:flex;flex-direction:column;align-items:center;gap:7px;
    font-size:12px;line-height:16px;font-weight:700;color:var(--label-assistive);text-align:center;word-break:keep-all}
  ol.steps li::before{content:counter(st);width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
    font:700 14px var(--brand);background:var(--fill-alt);border:1.5px solid var(--line-normal);color:var(--label-alt);
    position:relative;z-index:1;transition:all .25s}
  /* 동그라미 사이 선 */
  ol.steps li:not(:last-child)::after{content:"";position:absolute;top:15px;left:calc(50% + 19px);right:calc(-50% + 19px);
    height:2px;border-radius:1px;background:var(--line-normal)}
  /* 지난 단계 */
  ol.steps.s2 li:nth-child(-n+1),ol.steps.s3 li:nth-child(-n+2),ol.steps.s4 li:nth-child(-n+3){color:var(--label-neutral)}
  ol.steps.s2 li:nth-child(-n+1)::before,ol.steps.s3 li:nth-child(-n+2)::before,ol.steps.s4 li:nth-child(-n+3)::before{
    content:"✓";background:var(--label-normal);border-color:var(--label-normal);color:#000}
  ol.steps.s2 li:nth-child(-n+1)::after,ol.steps.s3 li:nth-child(-n+2)::after,ol.steps.s4 li:nth-child(-n+3)::after{
    background:linear-gradient(90deg,#d9d453,#e63bc0)}
  /* 지금 단계 */
  ol.steps.s1 li:nth-child(1),ol.steps.s2 li:nth-child(2),ol.steps.s3 li:nth-child(3),ol.steps.s4 li:nth-child(4){color:var(--label-strong)}
  ol.steps.s1 li:nth-child(1)::before,ol.steps.s2 li:nth-child(2)::before,ol.steps.s3 li:nth-child(3)::before,ol.steps.s4 li:nth-child(4)::before{
    background:linear-gradient(135deg,#d9d453,#e63bc0 60%,#8b3be6);border-color:transparent;color:#fff;
    box-shadow:0 0 0 4px rgba(230,59,192,.18)}

  /* ══ 이름 — 미리 넣은 이름 끝에 깜빡이는 커서, 옆에 다시 뽑기 ══ */
  .namebox{position:relative}
  .namebox input{padding-right:52px;font-size:20px !important;font-family:var(--brand) !important}
  .fake-caret{position:absolute;top:50%;width:2px;height:24px;margin-top:-12px;background:var(--primary-normal);
    border-radius:1px;animation:blink 1s steps(1) infinite;pointer-events:none}
  .fake-caret[hidden]{display:none}
  @keyframes blink{50%{opacity:0}}
  .reroll{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:10px;
    border:none;background:var(--fill-normal);color:var(--label-normal);display:grid;place-items:center;cursor:pointer}
  .reroll svg{width:18px;height:18px}

  /* 목소리 — 누르면 들려준다 */
  .opt.two small.play{color:var(--primary-normal);font-weight:700}

  /* 종류 고르기 유도 — 아직 안 골랐으면 실물 → 버추얼 차례로 흰 테두리가 깜빡인다. 고르면 멈춘다 */
  #kinds:not(.chosen) .grade.kind{animation:kindHint 2.4s ease-in-out infinite}
  #kinds:not(.chosen) .grade.kind:nth-child(2){animation-delay:1.2s}
  @keyframes kindHint{
    0%,45%,100%{border-color:rgba(232,214,187,.11);box-shadow:none}
    15%,30%{border-color:rgba(255,255,255,.9);box-shadow:0 0 0 3px rgba(255,255,255,.14)}
  }
  @media (prefers-reduced-motion:reduce){ #kinds:not(.chosen) .grade.kind{animation:none} }