/* ── 준비 진행도 카드 · 단계 레일 (src/views/progress-card.js · public/js/progress-card.js) ── */
/* 카드: 검은 도시락 안 5칸. 끝난 칸 = 타마고 */
.pc-card{display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 14px;background:#2B2622;border:2px solid #4A3F37;border-radius:16px;box-shadow:0 3px 0 #15110F;color:#fff;text-decoration:none}
.pc-card:hover{background:#342D28}
.pc-card:focus-visible{outline:3px solid var(--tamago);outline-offset:3px}
.pc-cells{display:grid;grid-template-columns:repeat(4,18px);gap:3px;padding:4px;background:#8A231B;border-radius:7px;flex:none}
.pc-cells i{height:18px;border-radius:3px;background:#3B322C;transition:background .2s}
.pc-cells i.done{background:var(--tamago)}
.pc-text{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.pc-text b{font-size:14px;font-weight:800}
.pc-text small{font-size:12.5px;color:#D9CFC4;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-go{margin-left:auto;font-family:'Jua',sans-serif;font-size:16px;color:var(--tamago);white-space:nowrap;padding-left:6px}
.pc-card.is-complete .pc-cells{background:var(--wasabi)}
.pc-wide{flex-wrap:wrap;padding:12px 16px}
.pc-wide .pc-cells{grid-template-columns:repeat(4,22px)}
.pc-wide .pc-cells i{height:22px}
@media (max-width:359px){.pc-cells{grid-template-columns:repeat(4,14px);gap:2px}.pc-cells i{height:14px}.pc-card{gap:9px;padding:9px 10px}}

/* 단계 머리: 제목 + 회전초밥 레일 위 접시 5개 */
.pr-head{margin:6px 0 14px}
.pr-top{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap}
.pr-titles{flex:1;min-width:0}
.pr-title{margin:0}
.pr-sub{font-size:12.5px;color:var(--sumi-2);font-weight:600;margin-top:4px}
.pr-sub b{color:var(--sumi)}
.pr-right{display:flex;gap:8px;flex-wrap:wrap}
.pr-rail{list-style:none;position:relative;display:grid;grid-template-columns:repeat(4,1fr);margin:12px 0 0;padding:0}
.pr-rail:before{content:"";position:absolute;left:12.5%;right:12.5%;top:21px;height:10px;border-radius:999px;background:#D9DDE1;box-shadow:inset 0 -3px 0 #B9BFC5;z-index:0}
.pr-rail:after{content:"";position:absolute;left:12.5%;right:12.5%;top:31px;height:3px;background:var(--wood-2);border-radius:2px;z-index:0}
.pr-step{position:relative;z-index:1;text-align:center;min-width:0}
.pr-step a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:0 2px 4px;color:var(--sumi-2);text-decoration:none;min-height:44px;border-radius:12px}
.pr-step a:focus-visible{outline:3px solid var(--ai);outline-offset:2px}
.pr-plate{position:relative;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#F3EAD6;box-shadow:inset 0 0 0 6px rgba(255,255,255,.6),0 4px 0 rgba(0,0,0,.12);font-family:'Jua',sans-serif;font-size:20px;color:var(--sumi)}
.pr-plate em{font-style:normal}
.pr-plate svg.i{display:none;width:22px;height:22px;stroke-width:3}
.pr-step b{font-size:13px;font-weight:800;color:var(--sumi);line-height:1.25;word-break:keep-all}
.pr-step small{display:flex;flex-direction:column;font-size:11.5px;line-height:1.3;font-weight:600;color:var(--sumi-2)}
.pr-step [data-pr-state]:empty{display:none}
.pr-step.done .pr-plate{background:#fff;box-shadow:inset 0 0 0 6px #7DBF55,0 4px 0 rgba(0,0,0,.12);color:var(--wasabi)}
.pr-step.done .pr-plate em{display:none}
.pr-step.done .pr-plate svg.i{display:block}
.pr-step.done [data-pr-state]{color:var(--wasabi);font-weight:800}
.pr-step.next .pr-plate{background:#fff;outline:3px solid var(--shu);outline-offset:2px;box-shadow:inset 0 0 0 6px var(--shu-soft),0 4px 0 rgba(0,0,0,.12);color:var(--shu-dark)}
.pr-step.next [data-pr-state]{color:var(--shu-dark);font-weight:800}
.pr-step.cur a{background:rgba(255,253,248,.85);box-shadow:0 0 0 2px var(--line)}
.pr-step.cur b{color:var(--ai)}
@media (max-width:640px){
  .pr-rail:before{top:15px;height:8px}.pr-rail:after{top:23px;height:2px}
  .pr-plate{width:38px;height:38px;font-size:16px;box-shadow:inset 0 0 0 4px rgba(255,255,255,.6),0 3px 0 rgba(0,0,0,.12)}
  .pr-step.done .pr-plate{box-shadow:inset 0 0 0 4px #7DBF55,0 3px 0 rgba(0,0,0,.12)}
  .pr-step.next .pr-plate{box-shadow:inset 0 0 0 4px var(--shu-soft),0 3px 0 rgba(0,0,0,.12)}
  .pr-plate svg.i{width:18px;height:18px}
  .pr-step b{font-size:11.5px}
  .pr-hint{display:none}
  .pr-step small{font-size:10.5px}
}
@media (max-width:359px){.pr-plate{width:32px;height:32px;font-size:14px}.pr-step b{font-size:10.5px}.pr-rail:before{top:12px}.pr-rail:after{top:19px}}
.pr-title{color:var(--ai)}