/* 루트스테이 여정 다트 (rd-*) */
.rd-wrap,.rd-wrap *{box-sizing:border-box}
/* display 를 지정한 요소에도 hidden 속성이 먹히도록 강제한다 */
.rd-wrap [hidden]{display:none!important}
.rd-wrap{
  --rd-paper:#F7F5F0; --rd-line:#E4DCCF; --rd-line2:#D3C7B4;
  --rd-ink:#2F2A24; --rd-mute:#8A8072; --rd-terra:#D2691E; --rd-gold:#F5C451;
  max-width:900px;margin:0 auto;padding:26px 18px 70px;
}
.rd-head{text-align:center;margin-bottom:18px}
.rd-head h1{font-size:clamp(26px,4vw,38px);letter-spacing:-.04em;margin:0 0 8px}
.rd-head p{margin:0;color:#6B7280;font-size:15px}

.rd-modes{display:flex;gap:8px;justify-content:center;margin:18px 0 14px;flex-wrap:wrap}
.rd-btn{
  border:1.5px solid var(--rd-line2);background:#fff;color:var(--rd-ink);
  border-radius:999px;padding:11px 20px;font:inherit;font-size:14.5px;font-weight:700;cursor:pointer;
  transition:transform .16s,background .16s,border-color .16s;
}
.rd-btn:hover{border-color:var(--rd-ink)}
.rd-btn:active{transform:translateY(1px)}
.rd-btn:disabled{opacity:.5;cursor:not-allowed}
.rd-btn--primary{background:var(--rd-terra);border-color:var(--rd-terra);color:#fff}
.rd-btn--primary:hover{filter:brightness(1.07);border-color:var(--rd-terra)}
.rd-btn--gold{background:var(--rd-gold);border-color:var(--rd-gold);color:#3A2E00}

.rd-stage{
  position:relative;width:100%;height:min(66vh,560px);min-height:360px;
  border:1px solid var(--rd-line);border-radius:16px;overflow:hidden;background:#F3EFE7;
}
#rdCanvas{display:block;width:100%;height:100%;touch-action:none;outline:none}
#rdCanvas:focus-visible{box-shadow:inset 0 0 0 3px rgba(210,105,30,.55)}

.rd-hint{
  position:absolute;left:50%;top:14px;transform:translateX(-50%);
  background:rgba(255,255,255,.92);border:1px solid var(--rd-line);
  border-radius:999px;padding:7px 15px;font-size:13px;color:var(--rd-mute);
  pointer-events:none;white-space:nowrap;max-width:92%;overflow:hidden;text-overflow:ellipsis;
}
.rd-load{
  position:absolute;inset:0;display:grid;place-content:center;gap:12px;justify-items:center;
  background:rgba(247,245,240,.94);font-size:14.5px;color:var(--rd-mute);text-align:center;padding:20px;
}
.rd-load p{margin:0}

/* 결과 카드 */
.rd-result{
  margin-top:16px;background:#fff;border:1px solid var(--rd-line);border-radius:16px;
  padding:22px 22px 20px;text-align:center;opacity:0;transform:translateY(8px);
  transition:opacity .35s ease,transform .35s ease;
}
.rd-result.is-in{opacity:1;transform:none}
.rd-badge{
  display:inline-block;background:#FBEEE3;color:var(--rd-terra);
  font-size:12px;font-weight:800;letter-spacing:.1em;padding:6px 13px;border-radius:999px;
}
.rd-place{font-size:clamp(28px,5vw,40px);font-weight:800;letter-spacing:-.05em;margin:12px 0 4px}
.rd-region{font-size:15px;color:#6B7280;margin:0}
.rd-themes{margin:12px 0 0;font-size:14.5px;font-weight:700;color:var(--rd-terra)}
.rd-coord{margin:10px 0 0;font-size:12.5px;color:var(--rd-mute);font-variant-numeric:tabular-nums}
.rd-btns{display:flex;gap:9px;justify-content:center;margin-top:18px;flex-wrap:wrap}

.rd-src{margin-top:22px;text-align:center;font-size:12px;color:var(--rd-mute);line-height:1.7}

@media (max-width:600px){
  .rd-wrap{padding:20px 14px 60px}
  .rd-stage{height:min(62vh,470px)}
  .rd-btns .rd-btn{flex:1;min-width:130px}
}
@media (prefers-reduced-motion:reduce){
  .rd-result{transition:none}
  .rd-btn{transition:none}
}