/* 모바일·PC 섹션 라디얼 메뉴 — 계산기 공통 (docs/section-radial-menu.md)

   모바일은 radial-lab의 base.css + v3.css(③ 두 겹 호), PC는
   radial-pc-lab의 글래스 플레어 채택안을 한 벌로 합친 것이다.
   생김새를 다시 견줄 때는 실험실에서 본다 — `radial-lab/README.md`.

   두 층으로 나뉘어 있다.
     ① 좌표계  — 각도(--a0/--a1)·반지름(--r/--rb)·크기(--sz)와 여닫이 전이
     ② 생김새  — 반투명 유리면, 두 겹 호의 각도, 안내 풍선
*/

/* ── ① 좌표계 ─────────────────────────────────────────────────────────── */
.rq{
  position:fixed;
  right:var(--rq-right, 14px);
  bottom:var(--rq-bottom, calc(118px + env(safe-area-inset-bottom)));
  z-index:58;                       /* 사이트 헤더(60) 아래, 하단 총액 바(50) 위 */
  width:var(--fab, 56px);
  height:var(--fab, 56px);
  font-family:inherit;
  /* 기본 지오메트리 — 각 시안이 덮어쓴다 */
  --a0:-6deg; --a1:-96deg; --r:150px; --sz:52px;
  --ink:#1c2330; --line:rgba(28,35,48,.14); --accent:#2b57d4;
  --open:0;                         /* 자기 좌표계를 쓰는 시안(v1·v4)이 여닫이를 읽는 스위치 */
}
.rq.is-open{--open:1}
.rq[hidden]{display:none}

/* 열려 있는 동안 화면을 덮는 투명 차단막 —
   항목 사이 빈 곳을 눌러 밑의 광고를 잘못 누르는 일을 막는다. */
.rq-shield{position:fixed; inset:0; z-index:-1; opacity:0; pointer-events:none;
  background:transparent; transition:opacity .18s ease;}
.rq.is-open .rq-shield{opacity:1; pointer-events:auto;}

/* 원점 = FAB 중심 */
.rq-arc{position:absolute; left:50%; top:50%; width:0; height:0;}

.rq-slot{
  position:absolute; left:0; top:0; width:0; height:0;
  --i:0; --d:0;                     /* --i = 자기 줄 안 순번 · --d = 전체 순번(펼침 지연) */
  --r0: 0px;
  transform: rotate(var(--a)) translateX(calc(-1 * var(--r0))) rotate(calc(-1 * var(--a)));
  transition: transform .34s cubic-bezier(.2,.86,.3,1.08);
  transition-delay: calc(var(--d) * 16ms);
}
.rq.is-open .rq-slot{--r0: var(--r);}

.rq-item{
  position:absolute;
  right:calc(var(--sz) / -2);
  top:calc(var(--sz) / -2);
  width:var(--sz); height:var(--sz);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  padding:0; margin:0; border:0; border-radius:50%;
  background:#fff; color:var(--ink);
  font:600 13px/1.15 inherit; letter-spacing:-.03em; white-space:nowrap;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  opacity:0; transform:scale(.5); pointer-events:none;
  transition:opacity .2s ease, transform .26s cubic-bezier(.2,.86,.3,1.08), background .15s, color .15s;
  transition-delay: calc(var(--d) * 16ms);
}
.rq.is-open .rq-item{opacity:1; transform:none; pointer-events:auto;}
.rq-item:active{transform:scale(.94)}

.rq-ico{display:flex; align-items:center; justify-content:center}
.rq-svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round; display:block}
.rq-dot{fill:currentColor; stroke:none}
.rq-lbl{font-size:13px; font-weight:700}
.rq-full{display:none; font-size:13.5px; font-weight:700}   /* 알약·판 시안에서만 켠다 */

/* 여는 단추 */
.rq-fab{
  position:absolute; inset:0; width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  padding:0; border:1px solid var(--line); border-radius:50%;
  background:#fff; color:var(--ink); cursor:pointer;
  box-shadow:0 6px 20px rgba(16,17,20,.18);
  -webkit-tap-highlight-color:transparent;
  transition:transform .26s cubic-bezier(.2,.86,.3,1.08), background .2s, color .2s;
}
.rq-fab .rq-svg{width:24px; height:24px}
.rq-fab-ico, .rq-fab-x{position:absolute; display:flex; transition:opacity .18s ease, transform .26s ease}
.rq-fab-x{opacity:0; transform:rotate(-90deg) scale(.7)}
.rq.is-open .rq-fab-ico{opacity:0; transform:rotate(90deg) scale(.7)}
.rq.is-open .rq-fab-x{opacity:1; transform:none}
.rq-ring{position:absolute; inset:-4px; border-radius:50%; pointer-events:none}
.rq-hub{position:absolute; display:none}

/* 처음 들어온 사람에게 한 번 뜨는 안내 풍선.
   여는 단추 **왼쪽**에 서고 꼬리로 단추를 가리킨다. 읽으라고 띄우는 것이라
   면은 반투명으로 하지 않는다(메뉴와 달리 뒤가 비치면 안 읽힌다). */
.rq-hint{
  position:absolute; right:calc(100% + 12px); top:50%;
  transform:translate(6px, -50%) scale(.96);
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  margin:0; padding:9px 13px; border:1px solid #e2e3e7; border-radius:10px;
  background:#fff; color:#43454c; cursor:pointer;
  font:700 13px/1.4 inherit; letter-spacing:-.03em;
  box-shadow:0 8px 22px rgba(16,17,20,.14);
  opacity:0; transition:opacity .2s ease, transform .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.rq-hint.on{opacity:1; transform:translate(0, -50%)}
.rq-hint b{
  padding:1px 6px; border:1px solid #f3b6b6; border-radius:6px;
  color:#e0392f; font-size:10.5px; font-weight:800; letter-spacing:.06em;
}
.rq-hint::after{
  content:""; position:absolute; right:-5.5px; top:50%; width:9px; height:9px;
  margin-top:-4.5px; background:#fff;
  border-right:1px solid #e2e3e7; border-top:1px solid #e2e3e7;
  border-radius:0 2px 0 0; transform:rotate(45deg);
}
.rq.is-open .rq-hint{display:none}

/* 오른쪽 아래 단추 둘(HOT · 맨 위로)을 흡수한다 — 메뉴의 「인기」·「맨 위」
   항목이 같은 일을 하고, 화면 밖에 떠 있는 단추는 하나면 된다(2026-09-01). */
body.rq-on #choice-stats-fab, body.rq-on .totop{display:none !important}

@media (prefers-reduced-motion:reduce){
  .rq-slot, .rq-item, .rq-fab, .rq-fab-ico, .rq-shield{transition:none !important}
}

/* ── ② 생김새 — 두 겹 호(③안) ────────────────────────────────────────── */
.rq{
  --a0:8deg;  --a1:80deg;  --r:168px;    /* 안쪽 호 — 줄당 4~5개 */
  --b0:10deg; --b1:86deg;  --rb:240px;   /* 바깥 호 — 같은 수 */
  --sz:48px; --fab:54px;
  /* 「맨 위로」(.totop)를 흡수하고 **그 자리**에 선다 — 메뉴 안의 「맨 위」가
     같은 일을 하므로 화면 밖에 단추를 두 개 띄우지 않는다(2026-09-01). */
  --rq-right:12px;
  --rq-bottom: calc(120px + env(safe-area-inset-bottom));
}

/* 각도는 **호마다 따로** 센다. 항목 전체를 한 호에 펴는 식으로 계산하면 두 호가
   모두 쪼그라들어 원이 겹친다. 안쪽은 --n1개, 바깥은 --n2개이고 --i는 자기 줄
   안에서의 순번이다(radial.js가 박는다). max(1, …)는 0 나눗셈을 막는다.
   줄을 nth-child로 가르지 않는 이유 — 줄당 개수가 4·5로 갈리므로 규칙을 두 벌
   쓰게 된다. 어느 줄인지는 JS가 이미 알고 있으니 `.rq-out`으로 못을 박는다. */
.rq-slot{
  --a: calc(var(--a0) + (var(--a1) - var(--a0)) / max(1, var(--n1) - 1) * var(--i));
}
.rq-slot.rq-out{
  --a: calc(var(--b0) + (var(--b1) - var(--b0)) / max(1, var(--n2) - 1) * var(--i));
}
.rq.is-open .rq-slot.rq-out{--r0: var(--rb);}

/* 「맨 위로」와 같은 결 — 반투명 유리면. 뒤 글자가 비쳐도 읽히도록
   흐림(blur)을 세게 주고 글자는 진하게 남긴다. */
.rq-item{
  gap:1px; padding:0 3px;
  background:rgba(255,255,255,.62); color:#1c2330;
  border:1px solid rgba(28,35,48,.12);
  -webkit-backdrop-filter:blur(10px) saturate(1.1);
  backdrop-filter:blur(10px) saturate(1.1);
  box-shadow:0 4px 14px rgba(16,17,20,.12);
}
.rq-item .rq-lbl{
  display:block; white-space:normal; width:42px; text-align:center;
  font-size:13px; line-height:1.04; letter-spacing:-.06em;
}
.rq-svg{width:18px; height:18px}

.rq-item.is-cur{background:rgba(232,239,255,.80); color:#1b3fa8; border-color:rgba(43,87,212,.85)}
.rq-item.is-cur .rq-svg{stroke-width:2}
.rq-item:active{background:rgba(255,255,255,.88)}

/* 여는 단추도 「맨 위로」와 같은 반투명 유리면. 평소에는 옅게 물러나 있다가
   열면 또렷해진다(.totop의 opacity .55 → 1과 같은 규칙). */
.rq-fab{
  background:rgba(255,255,255,.55); color:#1c2330;
  border-color:rgba(28,35,48,.14); opacity:.62;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:0 2px 10px rgba(0,0,0,.12);
}
.rq-fab:hover, .rq-fab:focus-visible{opacity:1}
.rq.is-open .rq-fab{background:rgba(255,255,255,.88); opacity:1}
.rq.is-open .rq-shield{background:rgba(12,16,24,.22)}   /* 반투명 유리 항목이 본문 위에서 읽히는 농도 */

/* ── ③ PC 홀드·드래그 메뉴 — 글래스 플레어 채택안 (2026-09-03) ─────── */
/* PC 홀드·드래그 라디얼 메뉴 — 공통 좌표계와 입력 상태 */
@property --rq-pc-turn{
  syntax:"<angle>";
  inherits:false;
  initial-value:0deg;
}
.rq-pc{
  position:fixed;
  right:220px;
  bottom:210px;
  z-index:59;
  width:64px;
  height:64px;
  --rq-radius:142px;
  --rq-size-w:104px;
  --rq-size-h:48px;
  --rq-accent:#315be8;
  --rq-hold:360ms;
  font-family:"SUIT Variable",SUIT,system-ui,-apple-system,sans-serif;
}
.rq-pc[hidden]{display:none!important}
.rq-pc-shield{
  position:fixed;
  inset:0;
  z-index:-2;
  background:rgba(10,16,30,0);
  pointer-events:none;
  transition:background .2s ease;
}
.rq-pc.is-open .rq-pc-shield{pointer-events:auto}
.rq-pc-disc{
  position:absolute;
  left:50%;
  top:50%;
  z-index:-1;
  width:310px;
  height:310px;
  border-radius:50%;
  opacity:0;
  transform:translate(-50%,-50%) scale(.72);
  pointer-events:none;
  transition:opacity .2s ease,transform .3s cubic-bezier(.2,.85,.3,1.08);
}
.rq-pc.is-open .rq-pc-disc{opacity:1;transform:translate(-50%,-50%) scale(1)}
.rq-pc-arc{position:absolute;left:50%;top:50%;width:0;height:0}
.rq-pc-slot{
  position:absolute;
  left:0;
  top:0;
  width:0;
  height:0;
  transform:rotate(var(--angle)) translateX(0) rotate(calc(-1 * var(--angle)));
  transition:transform .34s cubic-bezier(.2,.84,.3,1.1);
  transition-delay:calc(var(--i) * 14ms);
}
.rq-pc.is-open .rq-pc-slot{
  transform:rotate(var(--angle)) translateX(var(--rq-radius)) rotate(calc(-1 * var(--angle)));
}
.rq-pc-item{
  position:absolute;
  left:calc(var(--rq-size-w) / -2);
  top:calc(var(--rq-size-h) / -2);
  width:var(--rq-size-w);
  height:var(--rq-size-h);
  margin:0;
  padding:0 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:0;
  border-radius:999px;
  color:#202838;
  cursor:pointer;
  opacity:0;
  transform:scale(.58);
  pointer-events:none;
  white-space:nowrap;
  font:750 13px/1 inherit;
  letter-spacing:-.04em;
  transition:opacity .16s ease,transform .24s cubic-bezier(.2,.85,.3,1.08),background .14s,color .14s,border-color .14s,box-shadow .14s;
  transition-delay:calc(var(--i) * 14ms);
}
.rq-pc.is-open .rq-pc-item{opacity:1;transform:scale(1);pointer-events:auto}
.rq-pc-item.is-picked{transform:scale(1.09)}
.rq-pc-ico{display:flex;align-items:center;justify-content:center;flex:none}
.rq-pc-svg{
  width:20px;
  height:20px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.rq-pc-dot{fill:currentColor;stroke:none}
.rq-pc-fab{
  position:absolute;
  inset:0;
  width:64px;
  height:64px;
  padding:0;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(26,35,52,.18);
  background:#fff;
  color:#1f2b43;
  cursor:grab;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  box-shadow:0 10px 30px rgba(20,28,45,.2);
  transition:transform .18s ease,background .18s,color .18s,box-shadow .18s;
}
.rq-pc-fab:active{cursor:grabbing}
.rq-pc.is-holding .rq-pc-fab{transform:scale(.94)}
.rq-pc.is-moving .rq-pc-fab{cursor:grabbing;transform:scale(1.04);box-shadow:0 14px 38px rgba(20,28,45,.28)}
.rq-pc.is-open .rq-pc-fab{background:var(--rq-accent);color:#fff;box-shadow:0 12px 34px color-mix(in srgb,var(--rq-accent) 36%,transparent)}
.rq-pc-fab .rq-pc-svg{width:27px;height:27px;stroke-width:2.1}
.rq-pc-fab-menu,.rq-pc-fab-x{position:absolute;display:flex;transition:opacity .16s,transform .22s}
.rq-pc-fab-x{opacity:0;transform:rotate(-80deg) scale(.7)}
.rq-pc.is-open .rq-pc-fab-menu{opacity:0;transform:rotate(80deg) scale(.7)}
.rq-pc.is-open .rq-pc-fab-x{opacity:1;transform:none}
.rq-pc-hold-ring{
  position:absolute;
  inset:-7px;
  border-radius:50%;
  pointer-events:none;
  --rq-pc-turn:0deg;
  background:conic-gradient(var(--rq-accent) var(--rq-pc-turn),transparent 0);
  -webkit-mask:radial-gradient(closest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));
  mask:radial-gradient(closest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));
  opacity:0;
}
.rq-pc.is-holding:not(.is-open) .rq-pc-hold-ring{
  opacity:1;
  animation:rq-pc-hold var(--rq-hold) linear forwards;
}
@keyframes rq-pc-hold{to{--rq-pc-turn:360deg}}
.rq-pc-hint{
  position:absolute;
  left:calc(100% + 15px);
  top:50%;
  width:max-content;
  max-width:310px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:11px 14px 11px 12px;
  border:1px solid rgba(139,92,246,.28);
  border-radius:12px;
  background:rgba(255,255,255,.96);
  color:#302946;
  box-shadow:0 12px 34px rgba(42,28,78,.18);
  transform:translate(8px,-50%) scale(.97);
  opacity:0;
  pointer-events:none;
  font:650 13px/1.45 inherit;
  letter-spacing:-.035em;
  transition:opacity .2s ease,transform .2s ease;
}
.rq-pc-hint::before{
  content:"";
  position:absolute;
  left:-6px;
  top:50%;
  width:10px;
  height:10px;
  border-left:1px solid rgba(139,92,246,.28);
  border-bottom:1px solid rgba(139,92,246,.28);
  background:#fff;
  transform:translateY(-50%) rotate(45deg);
}
.rq-pc-hint b{
  flex:none;
  padding:2px 6px;
  border-radius:6px;
  background:transparent;
  color:#e32626;
  border:1px solid #ffcaca;
  font-size:10px;
  letter-spacing:.06em;
}
.rq-pc-hint.is-visible{opacity:1;pointer-events:auto;transform:translate(0,-50%) scale(1)}
.rq-pc.hint-left .rq-pc-hint{left:auto;right:calc(100% + 15px);transform:translate(-8px,-50%) scale(.97)}
.rq-pc.hint-left .rq-pc-hint.is-visible{transform:translate(0,-50%) scale(1)}
.rq-pc.hint-left .rq-pc-hint::before{
  left:auto;
  right:-6px;
  border-left:0;
  border-bottom:0;
  border-right:1px solid rgba(139,92,246,.28);
  border-top:1px solid rgba(139,92,246,.28);
}
.rq-pc.is-open .rq-pc-hint,.rq-pc.is-moving .rq-pc-hint{display:none}
.rq-pc-trail{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none;opacity:0}
.rq-pc.is-marking .rq-pc-trail{opacity:1}
.rq-pc-trail::before{
  content:"";
  position:absolute;
  left:0;
  top:-1px;
  width:var(--trail-r,0px);
  height:2px;
  transform-origin:left center;
  transform:rotate(var(--trail-a,0deg));
}
body.rq-pc-on #choice-stats-fab,body.rq-pc-on .totop{display:none!important}
@media (max-width:980px){.rq-pc{display:none!important}}
@media (prefers-reduced-motion:reduce){
  .rq-pc-slot,.rq-pc-item,.rq-pc-disc,.rq-pc-fab,.rq-pc-hint{transition:none!important}
  .rq-pc.is-holding:not(.is-open) .rq-pc-hold-ring{animation:none}
}
/* ③ 글래스 플레어 — 채택안. 기본 위치는 데스크톱 왼쪽의 빈 여백이다. */
.rq-pc{
  left:max(190px,calc((100vw - 1180px) / 2 - 186px));
  top:calc(50% - 27px);
  right:auto;
  bottom:auto;
  width:54px;
  height:54px;
  --rq-radius:158px;
  --rq-size-w:108px;
  --rq-size-h:50px;
  --rq-accent:#8b5cf6;
}
.rq-pc.is-open .rq-pc-shield{background:rgba(16,13,32,.32);backdrop-filter:blur(5px) saturate(1.08)}
.rq-pc-disc{
  width:320px;
  height:320px;
  background:
    radial-gradient(circle at 50% 50%,rgba(255,255,255,.16) 0 21%,transparent 22%),
    conic-gradient(from 0deg,rgba(82,196,255,.13),rgba(139,92,246,.18),rgba(255,92,151,.14),rgba(255,188,72,.14),rgba(82,196,255,.13));
  border:1px solid rgba(255,255,255,.32);
  box-shadow:0 20px 70px rgba(24,15,52,.28),inset 0 0 60px rgba(255,255,255,.12);
  backdrop-filter:blur(14px) saturate(1.2);
}
.rq-pc-item{
  --chip:#8b5cf6;
  color:#1d1831;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 9px 28px rgba(39,25,77,.17),inset 0 1px rgba(255,255,255,.7);
  backdrop-filter:blur(12px) saturate(1.15);
}
.rq-pc-slot:nth-child(1) .rq-pc-item,.rq-pc-slot:nth-child(5) .rq-pc-item{--chip:#3aa9f5}
.rq-pc-slot:nth-child(2) .rq-pc-item,.rq-pc-slot:nth-child(6) .rq-pc-item{--chip:#8b5cf6}
.rq-pc-slot:nth-child(3) .rq-pc-item,.rq-pc-slot:nth-child(7) .rq-pc-item{--chip:#ef5da8}
.rq-pc-slot:nth-child(4) .rq-pc-item,.rq-pc-slot:nth-child(8) .rq-pc-item{--chip:#ec9b32}
.rq-pc-item::before{
  content:"";
  width:7px;
  height:7px;
  flex:none;
  border-radius:50%;
  background:var(--chip);
  box-shadow:0 0 10px var(--chip);
}
.rq-pc-item:hover,.rq-pc-item:focus-visible,.rq-pc-item.is-picked{
  color:#fff;
  background:color-mix(in srgb,var(--chip) 88%,#261b43);
  border-color:rgba(255,255,255,.58);
  box-shadow:0 11px 30px color-mix(in srgb,var(--chip) 42%,transparent),inset 0 1px rgba(255,255,255,.28);
  outline:none;
}
.rq-pc-item.is-current:not(.is-picked){box-shadow:0 0 0 2px var(--chip),0 9px 28px rgba(39,25,77,.17)}
.rq-pc-fab{
  width:54px;
  height:54px;
  background:rgba(255,255,255,.92);
  color:#6f747c;
  border-color:#e3e4e8;
  box-shadow:0 6px 18px rgba(16,17,20,.12);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}
.rq-pc-fab .rq-pc-svg{width:24px;height:24px;stroke-width:1.7}
.rq-pc.is-open .rq-pc-fab{
  background:rgba(255,255,255,.96);
  color:#1c2330;
  box-shadow:0 8px 24px rgba(16,17,20,.16);
}
.rq-pc-trail::before{height:3px;top:-1.5px;background:linear-gradient(90deg,rgba(139,92,246,.08),#b692ff);box-shadow:0 0 12px #8b5cf6}