/* ============================================================
   PLAYER CREATION (clean) — 리그 → 포지션 → 이름·능력치
   ============================================================ */
.create{padding-left:0;padding-right:0}

/* ---------- header ---------- */
.cr-head{
  flex:none;display:flex;flex-direction:column;gap:10px;
  padding:0 calc(var(--sar) + 16px) 12px calc(var(--sal) + 16px);
  border-bottom:1px solid var(--line);
}
.cr-headrow{display:flex;align-items:center;gap:12px}
.cr-back{
  width:38px;height:38px;flex:none;border-radius:var(--r-s);display:grid;place-items:center;
  background:transparent;border:1px solid var(--line);color:var(--txt-2);
}
.cr-back:active{background:var(--surface-2)}
.cr-back svg{width:17px;height:17px}
.cr-title{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.cr-title b{font-size:16px;font-weight:600;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr-title span{font-size:11px;color:var(--txt-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr-count{flex:none;font-size:12px;color:var(--txt-3);font-weight:600;letter-spacing:.04em}
.cr-count b{color:var(--txt);font-weight:700}

.cr-track{display:flex;gap:3px}
.cr-track i{flex:1;height:2px;border-radius:99px;background:var(--line);position:relative;overflow:hidden}
.cr-track i::after{
  content:"";position:absolute;inset:0;transform:scaleX(0);transform-origin:left;
  background:var(--line-2);transition:transform .25s var(--ease);
}
.cr-track i.done::after{transform:scaleX(1)}
.cr-track i.cur::after{transform:scaleX(1);background:var(--accent)}

/* ---------- body / footer ---------- */
.cr-body{flex:1;min-height:0;padding:16px calc(var(--sar) + 16px) 20px calc(var(--sal) + 16px)}
.step{display:flex;flex-direction:column;gap:18px;animation:stepIn .2s var(--ease) both}
@keyframes stepIn{from{opacity:0}to{opacity:1}}

.step-lead{display:flex;flex-direction:column;gap:5px}
.step-lead h2{font-size:19px;font-weight:700;letter-spacing:-.03em;line-height:1.3}
.step-lead h2 mark{background:none;color:var(--txt)}
.step-lead p{font-size:12.5px;color:var(--txt-3);line-height:1.5}

.cr-foot{
  flex:none;display:flex;gap:8px;align-items:center;
  padding:12px calc(var(--sar) + 16px) 2px calc(var(--sal) + 16px);
  border-top:1px solid var(--line);
}
.cr-foot .btn{flex:1}
.cr-foot .btn.prev{flex:0 0 52px;padding:0}

/* ---------- field ---------- */
.field{display:flex;flex-direction:column;gap:8px}
.field>label{font-size:11.5px;font-weight:600;color:var(--txt-3);letter-spacing:.02em}
.field>label .req{color:var(--accent);margin-left:3px}

.textbox{
  display:flex;align-items:center;gap:10px;height:50px;padding:0 12px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);
  transition:border-color .15s;
}
.textbox:focus-within{border-color:var(--accent-line)}
.textbox input{flex:1;min-width:0;background:none;border:0;font-size:15.5px;font-weight:600;letter-spacing:-.01em}
.textbox input::placeholder{color:var(--txt-3);font-weight:400}
.dice{
  width:32px;height:32px;flex:none;border-radius:var(--r-s);display:grid;place-items:center;
  background:var(--surface-2);border:1px solid var(--line-2);color:var(--txt-2);
}
.dice:active{color:var(--accent)}
.dice svg{width:16px;height:16px}

/* ---------- 국적 (3열 그리드) ---------- */
.nation-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.nat{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:16px 8px 14px;border-radius:var(--r-m);text-align:center;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-1);
  transition:border-color .15s,background .15s,transform .1s;
}
.nat:active{background:var(--surface-2);transform:scale(.97)}
.nat .flag{
  width:100%;max-width:62px;aspect-ratio:3/2;border-radius:5px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.1),0 2px 6px rgba(0,0,0,.4);
}
.nat .flag svg{width:100%;height:100%;display:block}
.nat b{font-size:13px;font-weight:700;letter-spacing:-.03em;line-height:1.2}
.nat-desc{font-size:10px;color:var(--txt-3);line-height:1.3}
.nat-check{
  position:absolute;top:7px;right:7px;width:18px;height:18px;border-radius:50%;
  display:grid;place-items:center;border:1px solid var(--line-2);color:transparent;
  transition:background .15s,border-color .15s,color .15s;
}
.nat-check svg{width:10px;height:10px;stroke-width:3.5}
.nat[aria-checked="true"]{border-color:var(--accent);background:var(--accent-soft)}
.nat[aria-checked="true"] b{color:var(--accent)}
.nat[aria-checked="true"] .nat-check{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

/* ---------- 포지션 ---------- */
.opt-grid{display:grid;gap:8px}
.opt-grid.c2{grid-template-columns:repeat(2,1fr)}
.opt-grid.c3{grid-template-columns:repeat(3,1fr)}
.opt{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:18px 10px;border-radius:var(--r-m);text-align:center;
  background:var(--surface);border:1px solid var(--line);
  transition:border-color .15s,background .15s;
}
.opt:active{background:var(--surface-2)}
.opt b{font-size:14.5px;font-weight:600;letter-spacing:-.02em}
.opt span{font-size:10.5px;color:var(--txt-3);line-height:1.35}
.opt em{
  font-style:normal;margin-top:8px;padding:4px 8px;border-radius:99px;
  font-size:10.5px;font-weight:600;color:var(--txt-3);background:var(--surface-2);
}
.opt[aria-checked="true"]{border-color:var(--accent);background:var(--accent-soft)}
.opt[aria-checked="true"] b{color:var(--accent)}
.opt[aria-checked="true"] em{color:var(--accent);background:rgba(62,207,142,.14)}

.pos-detail{
  display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:var(--r-m);
  background:var(--surface);border:1px solid var(--line);
}
.pos-detail .hd{display:flex;align-items:center;gap:9px}
.pos-detail .badge{
  min-width:40px;height:26px;padding:0 8px;border-radius:6px;display:grid;place-items:center;
  font-size:12px;font-weight:700;letter-spacing:.04em;
  background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent-line);
}
.pos-detail .hd b{font-size:14.5px;font-weight:600}
.pos-detail p{font-size:12px;color:var(--txt-2);line-height:1.55}
.keystats{display:flex;gap:6px;flex-wrap:wrap}

/* ---------- 능력치 굴리기 ---------- */
.roll-panel{
  display:flex;flex-direction:column;gap:12px;padding:14px;
  border-radius:var(--r-l);background:var(--surface);border:1px solid var(--line);
}
.roll-head{display:flex;align-items:center;gap:12px}
.roll-ovr{display:flex;flex-direction:column;gap:2px}
.roll-ovr span{font-size:9.5px;letter-spacing:.14em;color:var(--txt-3);font-weight:600}
.roll-ovr b{font-size:24px;font-weight:700;line-height:1}
.roll-total{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.roll-total span{font-size:9.5px;letter-spacing:.1em;color:var(--txt-3);font-weight:600}
.roll-total b{font-size:18px;font-weight:700;line-height:1;color:var(--txt-2)}

.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stat-grid .cell{display:flex;flex-direction:column;gap:4px;padding:9px 10px;border-radius:var(--r-s);background:var(--surface-2)}
.stat-grid .nm{font-size:10.5px;color:var(--txt-3)}
.stat-grid .vl{font-size:17px;font-weight:700;line-height:1}
.stat-grid .bar{height:3px;border-radius:99px;background:var(--line);overflow:hidden;margin-top:1px}
.stat-grid .bar i{display:block;height:100%;border-radius:99px;background:var(--accent);transition:width .2s var(--ease)}

.roll-foot{text-align:center;font-size:11.5px;color:var(--txt-3)}
.roll-foot b{color:var(--txt-2)}
.roll-btn{width:100%}

.radar-wrap{display:flex;flex-direction:column;align-items:center;padding:2px 0}
.radar-wrap canvas{width:min(52vw,210px);height:min(52vw,210px)}

.stars{display:flex;gap:4px;justify-content:center}
.stars svg{width:18px;height:18px;color:var(--line-2)}
.stars svg.on{color:var(--accent)}

.burst{position:fixed;inset:0;z-index:80;pointer-events:none}

/* ---------- 선수 카드 (인물 이미지 없음) ---------- */
.pcard{
  position:relative;width:min(84vw,300px);border-radius:var(--r-l);overflow:hidden;
  background:var(--surface);border:1px solid var(--line-2);color:var(--txt);
}
.pcard.rare-elite{border-color:var(--line-2)}
.pcard.rare-basic{border-color:var(--line)}
.pcard:not(.rare-elite):not(.rare-basic){border-color:var(--accent-line)}
.pcard-in{position:relative;display:flex;flex-direction:column;padding:16px 16px 14px;text-align:left}
.pcard-num{
  position:absolute;right:8px;bottom:-6px;pointer-events:none;
  font-size:104px;font-weight:800;line-height:1;letter-spacing:-.06em;
  color:rgba(255,255,255,.035);
}
.pcard-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.pcard-head .ovr{font-size:42px;font-weight:700;line-height:.9;letter-spacing:-.045em}
.pcard:not(.rare-elite):not(.rare-basic) .pcard-head .ovr{color:var(--accent)}
.pcard-tag{display:flex;flex-direction:column;align-items:flex-end;gap:7px}
.pcard-tag .pos{font-size:11.5px;font-weight:600;color:var(--txt-2)}
.pcard-tag .flag{width:28px;height:19px;border-radius:2px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.pcard-tag .flag svg{width:100%;height:100%;display:block}
.pcard-name{
  margin-top:14px;font-size:18px;font-weight:700;letter-spacing:-.03em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pcard-sub{
  margin-top:3px;padding-bottom:13px;border-bottom:1px solid var(--line);
  font-size:11.5px;color:var(--txt-3);
}
.pcard-stats{display:grid;grid-template-columns:1fr 1fr;gap:7px 14px;padding-top:13px}
.pcard-stats div{display:flex;align-items:baseline;gap:7px;font-size:10.5px;font-weight:600;letter-spacing:.04em}
.pcard-stats div b{font-size:15px;width:22px;font-weight:700}
.pcard-stats div span{color:var(--txt-3)}
.pcard-foot{display:flex;justify-content:flex-start;padding-top:14px}
.pcard-foot .stars svg{width:12px;height:12px}
.card-enter{animation:cardIn .25s var(--ease) both}
@keyframes cardIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}


/* ---------- responsive ---------- */
@media (min-width:560px){
  .cr-body,.cr-head,.cr-foot{padding-left:max(calc(var(--sal) + 16px),calc(50% - 250px));padding-right:max(calc(var(--sar) + 16px),calc(50% - 250px))}
  .radar-wrap canvas{width:230px;height:230px}
}
@media (orientation:landscape) and (max-height:520px){
  .step-lead h2{font-size:17px}
  .radar-wrap canvas{width:min(30vw,170px);height:min(30vw,170px)}
  .pcard{width:min(46vw,280px)}
}

/* ---------- 굴리기 연출 ---------- */
@keyframes bumpIn{0%{transform:scale(.94);opacity:.55}60%{transform:scale(1.03)}100%{transform:scale(1);opacity:1}}
.roll-head.bump,.stat-grid .cell.bump,.skill-row .skill-chip.bump{animation:bumpIn .26s var(--ease)}
.roll-btn{border-color:var(--accent-line);color:var(--accent);font-weight:700}
.roll-btn:active{background:var(--accent-soft)}