/* ── 배지 : 아이콘 자리 + 옅은 사선 무늬 ────────────────────────── */
.u-st{position:relative;display:inline-flex;align-items:center;gap:5px;
  background-image:repeating-linear-gradient(135deg,rgba(15,23,42,.045) 0 2px,transparent 2px 7px)}
/* 🚨 홈은 polish.php 가 «background» 단축으로 덮어 무늬가 지워진다(실측).
      같은 무게로 한 번 더 적는다 — 순서상 이 줄이 뒤라 이긴다. */
#ri-main .u-st{background-image:repeating-linear-gradient(135deg,rgba(15,23,42,.045) 0 2px,transparent 2px 7px)}
/* 🚨 아이콘 자리는 «그림이 있는 딱지»에만 만든다.
      처음엔 .u-st::before 로 한꺼번에 줬더니, 그림이 없는 딱지(접수예정·오늘의—)에서
      «가로세로 13px 단색 네모»가 글자 옆에 찍혔다(홈에서 24개 · 2026-09-24 실측).
      마스크가 없으면 배경색이 그대로 보이기 때문이다. 그래서 목록으로 좁힌다. */
.u-st--open::before,.u-st--closing::before,.u-st--cancelled::before,.u-st--extra::before,
.u-st--closed::before,.u-st--finished::before,.u-st--unknown::before,
.u-st--scheduled::before,.u-st--rot::before{content:"";width:13px;height:13px;flex:0 0 13px;
  background-color:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}
/* 접수중 — 달리는 사람 */
.u-st--open::before{-webkit-mask-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='14.5' cy='4.5' r='2'/%3E%3Cpath d='M6 21l3-6 3.5-2.5-1.5-5-4 2.3-2 3.2'/%3E%3Cpath d='M12 8l4.4-1.2 2.7 3.3 2.5.6'/%3E%3Cpath d='M13.6 13.4l2.6 3 .9 4.6'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='14.5' cy='4.5' r='2'/%3E%3Cpath d='M6 21l3-6 3.5-2.5-1.5-5-4 2.3-2 3.2'/%3E%3Cpath d='M12 8l4.4-1.2 2.7 3.3 2.5.6'/%3E%3Cpath d='M13.6 13.4l2.6 3 .9 4.6'/%3E%3C/svg%3E")}
/* 마감임박 · 취소 — 시계 */
.u-st--closing::before,.u-st--cancelled::before{-webkit-mask-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5.5l3.4 2'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5.5l3.4 2'/%3E%3C/svg%3E")}
/* 추가접수 — 더하기 */
.u-st--extra::before{-webkit-mask-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5.5v13M5.5 12h13'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5.5v13M5.5 12h13'/%3E%3C/svg%3E")}
/* 마감 · 종료 · 정보없음 — 잠금 */
.u-st--closed::before,.u-st--finished::before,.u-st--unknown::before{-webkit-mask-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10.5' width='14' height='9.5' rx='2'/%3E%3Cpath d='M8.5 10.5V8a3.5 3.5 0 0 1 7 0v2.5'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10.5' width='14' height='9.5' rx='2'/%3E%3Cpath d='M8.5 10.5V8a3.5 3.5 0 0 1 7 0v2.5'/%3E%3C/svg%3E")}
/* 접수예정 — 달력 (홈에만 21개 있다) */
.u-st--scheduled::before{-webkit-mask-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E")}
/* 「오늘의 —」 — 매일 바뀌는 자리라 별표 */
.u-st--rot::before{-webkit-mask-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.2l2.6 5.5 5.9.8-4.3 4.2 1.1 6-5.3-2.9-5.3 2.9 1.1-6L3.5 9.5l5.9-.8z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.2l2.6 5.5 5.9.8-4.3 4.2 1.1 6-5.3-2.9-5.3 2.9 1.1-6L3.5 9.5l5.9-.8z'/%3E%3C/svg%3E")}
/* 배지 안에 이미 아이콘(svg·i)이 들어 있으면 우리 것은 안 그린다 — 두 개가 되지 않게 */
.u-st:has(svg)::before,.u-st:has(i)::before{display:none}

/* ── ① 순차 등장 ────────────────────────────────────────────────
   기본은 «보임». html.ri-a-mo 가 붙었을 때만 숨긴다 —
   자바스크립트가 죽으면 글이 사라지는 사고를 막는다.
   🚨 켜는 클래스는 «ri-a-go» 다. 테마가 쓰는 is-in 과 이름이 겹치면 안 된다. */
/* 2026-09-24 사장님 : 「순차 액션이 넘 간단하고 안 보여. 강력한 순차 액션을 적용해」
   ⇒ 번역 사이트 fx.css 의 «실제 값»을 그대로 가져왔다. 눈대중으로 키우지 않았다.
        올라오는 거리  14px → 28px          (translate3d)
        시간           .5s  → 투명도 .75s · 이동 .9s   (둘을 따로 준다)
        곡선           하나 → 투명도 cubic-bezier(.2,.7,.2,1)
                             이동   cubic-bezier(.16,1,.3,1)  ← 끝에서 부드럽게 내려앉는다
        칸 간격        70ms → 120ms 뒤 시작해서 130ms 씩
   그리고 «옆으로 나란한 칸»은 옆에서 들어오게 했다 —
   위아래로만 움직이면 여러 칸이 같이 떠올라 하나처럼 보여서 눈에 안 띈다. */
html.ri-a-mo .ri-a-rv{opacity:0;
  transform:translate3d(var(--rvx,0px),28px,0);
  transition:opacity .75s cubic-bezier(.2,.7,.2,1) var(--d,0s),
             transform .9s cubic-bezier(.16,1,.3,1) var(--d,0s);
  will-change:opacity,transform}
html.ri-a-mo .ri-a-rv.ri-a-go{opacity:1;transform:none}
/* 폰에서는 옆 움직임을 줄인다 — 화면이 좁아 옆으로 나가면 잘려 보인다 */
@media (max-width:820px){
  html.ri-a-mo .ri-a-rv{transform:translate3d(0,22px,0)}
}
@media (prefers-reduced-motion:reduce){
  html.ri-a-mo .ri-a-rv{opacity:1 !important;transform:none !important;transition:none !important}
  .u-st,#ri-main .u-st{background-image:none}
}