/* JCS 0.0.31.155 · sculpted metal badge artwork */
.jcs-badge{
  display:inline-block;
  width:88px;
  height:88px;
  aspect-ratio:1;
  flex:0 0 auto;
  overflow:hidden;
  line-height:0;
  vertical-align:middle;
}
.jcs-badge-art{
  display:block;
  width:100%;
  height:100%;
  background-image:var(--jcs-badge-sheet);
  background-size:var(--jcs-badge-size,400% 200%);
  background-position:var(--jcs-badge-x) var(--jcs-badge-y);
  background-repeat:no-repeat;
  -webkit-clip-path:var(--jcs-badge-clip,none);
  clip-path:var(--jcs-badge-clip,none);
  pointer-events:none;
}
.badge-collection-intro{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px;background:linear-gradient(125deg,#160a21,#2a153e);color:#fff}
.badge-collection-intro span{font-size:10px;font-weight:900;letter-spacing:.14em;color:#753bbd}
.badge-collection-intro h2{margin:6px 0 4px}
.badge-collection-intro p{margin:0;color:#bad4ce;font-size:12px}
.badge-collection{display:grid;gap:22px}
.badge-tier-section{--tier:#b87333;--soft:#fbf3e9;border:1px solid #e1dce6;border-radius:24px;padding:22px;background:linear-gradient(145deg,#fff,var(--soft));overflow:hidden}
.badge-tier-section>header{display:flex;align-items:end;justify-content:space-between;border-bottom:1px solid #e2dde6;padding-bottom:14px;margin-bottom:16px}
.badge-tier-section>header span{font-size:11px;font-weight:950;color:var(--tier);letter-spacing:.08em}
.badge-tier-section>header h2{font-size:25px;margin:2px 0 0;letter-spacing:.08em}
.badge-tier-section>header>b{font-size:12px;color:var(--tier);background:#fff;border:1px solid #dce5e2;padding:7px 10px;border-radius:999px}
.badge-tier-silver{--tier:#7a8995;--soft:#f3f6f8}
.badge-tier-gold{--tier:#b6830e;--soft:#fff9e9}
.badge-tier-platinum{--tier:#753bbd;--soft:#f6eefd}
.badge-tier-black{--tier:#e4c675;background:linear-gradient(145deg,#15171e,#24242e);color:#fff}
.badge-tier-black>header{border-color:#3d3d4b}
.badge-tier-black>header>b{background:#101116;border-color:#51482f}
.badge-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.badge-collection-card{display:grid;grid-template-columns:minmax(72px,88px) minmax(0,1fr);gap:14px;align-items:center;padding:15px;border:1px solid #e3dfe7;border-radius:18px;background:#ffffffe8;min-height:138px}
.badge-collection-card>.jcs-badge{
  width:88px;
  height:88px;
}
.badge-collection-card.is-locked{filter:saturate(.45);opacity:.68}
.badge-collection-card.is-locked .jcs-badge-art{filter:grayscale(1)}
.badge-tier-black .badge-collection-card{background:#08090dbd;border-color:#3d3b48}
.badge-card-copy>span{font-size:9px;font-weight:900;letter-spacing:.1em;color:var(--tier)}
.badge-card-copy h3{font-size:16px;margin:4px 0}
.badge-card-copy p{font-size:11px;line-height:1.55;color:#61706b;margin:0}
.badge-tier-black .badge-card-copy p{color:#b7b5c2}
.badge-card-copy small{display:block;margin-top:6px;color:var(--tier);font-size:10px;font-weight:800}
.badge-card-state{grid-column:1/-1;display:flex;gap:6px;align-items:center;border-top:1px solid #e3dfe7;padding-top:9px}
.badge-card-state>b{margin-right:auto;font-size:10px;color:var(--tier)}
.badge-card-state button{border:1px solid #d5e2de;background:#fff;color:#30233c;border-radius:9px;padding:6px 9px;font-size:10px;font-weight:850}

.side-badge-showcase{display:grid;gap:10px}
.badge-showcase-main{display:grid;grid-template-columns:58px 1fr;gap:10px;align-items:center}
.side-badge-showcase .jcs-badge{
  width:48px;
  height:48px;
}
.badge-showcase-main b{font-size:13px}
.badge-showcase-main p{font-size:10px;line-height:1.45;color:#788680;margin:3px 0 0}
.badge-showcase-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.badge-showcase-slot{min-width:0;display:grid;place-items:center;text-align:center;padding:7px 3px;border:1px solid #e6e2ea;border-radius:12px;background:#faf8fb}
.badge-showcase-slot small{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:8px;line-height:12px;font-weight:800;color:#66756f}
.badge-showcase-slot.is-representative{border-color:#c4dfd6;background:#f4eef9}
.badge-showcase-empty{min-height:61px;color:#b5c1bd}
.badge-showcase-empty i{font-size:22px;font-style:normal}
.badge-showcase-four .jcs-badge{
  width:48px;
  height:48px;
}
.badge-showcase-secondary .jcs-badge{width:48px;height:48px}

.mypage-badge-summary{display:flex;align-items:center;gap:14px;border:1px solid #e2dce9;background:#f5f1fa;border-radius:18px;padding:14px;margin:18px 0}
.mypage-badge-summary .jcs-badge{
  width:56px;
  height:56px;
}
.mypage-badge-summary>div{flex:1}
.mypage-badge-summary p{font-size:11px;color:#6b7b75;margin:4px 0 0}
.mypage-badge-row .jcs-badge{
  width:44px;
  height:44px;
}
.admin-member-section{margin-top:28px}
.admin-member-list{display:grid;gap:10px}
.admin-member-row{border:1px solid #e4dfe8;border-radius:16px;background:#fff;overflow:hidden}
.admin-member-row>summary{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:center;padding:14px;cursor:pointer;list-style:none}
.admin-member-row>summary::-webkit-details-marker{display:none}
.admin-member-row>summary>strong{font-size:11px;color:#753bbd}
.admin-member-badges{padding:18px;border-top:1px solid #e6e2eb;background:#faf8fb}
.admin-member-badge-summary{display:flex;justify-content:space-between;margin-bottom:14px;font-size:11px}
.admin-member-badges fieldset{border:0;border-top:1px solid #e4dfe8;margin:12px 0 0;padding:12px 0 0}
.admin-member-badges legend{padding-right:9px;font-weight:900;font-size:12px}
.admin-member-badges fieldset>div{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.admin-badge-check>input{position:absolute;opacity:0}
.admin-badge-check>span{display:grid;grid-template-columns:36px 1fr;gap:1px 7px;align-items:center;border:1px solid #e4dfe8;background:#fff;border-radius:11px;padding:7px;cursor:pointer}
.admin-badge-check .jcs-badge{
  grid-row:1/3;
  width:36px;
  height:36px;
}
.admin-badge-check b{font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.admin-badge-check small{font-size:8px;color:#89958f}
.admin-badge-check>input:checked+span{border-color:#753bbd;background:#f2eaf9;box-shadow:inset 0 0 0 1px #753bbd}
.admin-badge-check.is-eligible>span{outline:1px dashed #c79d33}
.admin-member-badges>.primary-btn{margin-top:16px}

.author-representative-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  aspect-ratio:1;
  flex:0 0 24px;
  line-height:0;
  vertical-align:middle;
}
.author-representative-badge .jcs-badge{width:100%;height:100%}
.jc-comment .author-representative-badge{
  width:22px;
  height:22px;
  flex-basis:22px;
}

@media(max-width:900px){
  .badge-card-grid{grid-template-columns:1fr}
  .admin-member-badges fieldset>div{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .badge-tier-section{padding:15px}
  .badge-collection-card{grid-template-columns:72px minmax(0,1fr);padding:12px}
  .badge-collection-card>.jcs-badge{
    width:72px;
    height:72px;
  }
  .badge-collection-intro{align-items:flex-start;flex-direction:column}
  .admin-member-badges fieldset>div{grid-template-columns:1fr}
}