/* 상점 C안(원장, mockups/shop-3.html). 등급 색은 아이템 창(equip.css)과 같은 확정 6단계 */
.shp{display:grid;grid-template-columns:150px minmax(0,1fr);padding:0}
.shp .g-일반{--gc:#f2eee6} .shp .g-희귀{--gc:#4f8cff} .shp .g-영웅{--gc:#a98bff} .shp .g-고유{--gc:#ff5fa2} .shp .g-전설{--gc:#e0b85e} .shp .g-유물{--gc:#9cc1ff}
.shp .gr{font-size:var(--fs-xs);color:var(--gc,var(--faint));white-space:nowrap}
.shp .gp{color:var(--gold);font-family:'Rajdhani',var(--mono);font-weight:700;letter-spacing:.03em;white-space:nowrap}
.shp .ico{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.shp .chip{display:inline-flex;align-items:center;gap:4px;font:var(--fs-xs) var(--mono);padding:0 7px;line-height:20px;border:1px solid var(--line);color:var(--sub);white-space:nowrap}
.shp .chip b{color:var(--fg);font-weight:500}
.shp .lim{font:600 10px var(--mono);letter-spacing:.1em;color:var(--warn);border:1px solid rgba(255,159,95,.45);padding:0 6px;line-height:18px;white-space:nowrap}
.shp .meter{height:4px;background:var(--track);position:relative;overflow:hidden}
.shp .meter i{position:absolute;inset:0 auto 0 0;background:var(--warn);transition:width .3s}
.shp .empty{padding:28px 16px;text-align:center;color:var(--faint);font-size:var(--fs-md);border:1px dashed var(--line)}
/* 세로 탭 레일 */
.shp .rail{display:flex;flex-direction:column;border-right:1px solid var(--line);padding:12px 0}
.shp .rail button{display:flex;align-items:center;gap:10px;padding:12px 16px;background:none;border:0;border-left:2px solid transparent;text-align:left;color:var(--sub);cursor:pointer}
.shp .rail button:hover{color:var(--fg)}
.shp .rail button[aria-selected=true]{border-left-color:var(--accent);background:linear-gradient(90deg,var(--accent-soft),transparent);color:var(--fg);font-weight:600}
.shp .rail button[aria-selected=true] .ico{color:var(--accent)}
.shp .rail small{margin-left:auto;font:var(--fs-xs) var(--mono);color:var(--faint)}
.shp .purse{margin-top:auto;padding:16px;display:flex;flex-direction:column;gap:4px;border-top:1px solid var(--line);font-size:var(--fs-sm);color:var(--sub)}
.shp .purse .gp{font-size:20px;line-height:1}
/* 본문 */
.shp .pane{padding:18px 20px;display:flex;flex-direction:column;gap:18px;min-width:0}
.shp .lbl{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 8px;font:500 var(--fs-xs) var(--mono);letter-spacing:.12em;color:var(--faint);margin-bottom:8px}
.shp .lbl span{letter-spacing:0;font-family:var(--font)}
.shp .drop{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px}
.shp .dc{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;padding:12px 14px;border:1px solid rgba(255,159,95,.3);background:linear-gradient(135deg,rgba(255,159,95,.07),transparent 60%)}
.shp .dc h4{font:600 var(--fs-lg) var(--serif);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.shp .dc .s{font-size:var(--fs-xs);color:var(--faint)}
.shp .dc .s b{color:var(--sub);font-weight:500}
.shp .dc .meter{grid-column:1/-1}
.shp .dc .m{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 8px;font-size:var(--fs-xs);color:var(--sub);margin-top:-4px}
.shp .dc .r{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.shp .dc .r .gp{font-size:18px;line-height:1}
.shp table{width:100%;border-collapse:collapse;font-size:var(--fs-md)}
.shp th{font:500 var(--fs-xs) var(--mono);letter-spacing:.08em;color:var(--faint);text-align:left;padding:6px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.shp td{padding:10px;border-bottom:1px solid rgba(41,53,76,.6);vertical-align:middle}
.shp tr:hover td{background:rgba(156,193,255,.04)}
.shp td.nm b{display:block;font-weight:600}
.shp .num{text-align:right;font-family:var(--mono);white-space:nowrap}
.shp td .gp{font-size:16px}
.shp td:last-child{text-align:right;width:1%}
.shp .btn{white-space:nowrap}
.shp .gd{display:inline-block;width:6px;height:6px;background:var(--gc);margin-right:6px;vertical-align:middle}
@media (max-width:640px){
  .shp{grid-template-columns:1fr}
  .shp .rail{flex-direction:row;border-right:0;border-bottom:1px solid var(--line);padding:0;overflow-x:auto}
  .shp .rail button{border-left:0;border-bottom:2px solid transparent;padding:12px 14px;flex:1;justify-content:center}
  .shp .rail button[aria-selected=true]{border-bottom-color:var(--accent);background:var(--accent-soft)}
  .shp .rail small{margin-left:0}
  .shp .purse{display:none}
  .shp .pane{padding:14px}
}
@media (prefers-reduced-motion:reduce){.shp .meter i{transition:none}}