/* career-card.css — 保存カードの画面（career.html の ?view=card）。.crc-* だけ。
 *
 * ・色は pv-tokens.css のトークンだけ。ここに色の値を直書きしない
 *   （絵の中の色 ── カラフル／黒×金 ── は career-card.js の「絵の定数」に在る。ここには無い）。
 * ・動かすのは transform と opacity だけ。字は 12px 以上・押す場所は 44px 以上。
 * ・見本はそのまま保存される絵（<canvas>）。ここで大きさを縮めて見せているだけ。
 */
.crc{display:grid;gap:20px;margin-top:12px}

/* 見本を置く面（base → elevated → floating の3段。絵がいちばん手前）。 */
.crc-stage{display:flex;justify-content:center;padding:16px;border-radius:var(--pv-r-lg);
  border:1px solid var(--pv-line);
  background:
    radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--pv-accent) 10%, transparent) 0%, transparent 60%),
    radial-gradient(90% 80% at 100% 100%, color-mix(in srgb, var(--pv-gold) 12%, transparent) 0%, transparent 62%),
    var(--pv-surface-soft)}
.crc-canvas{display:block;width:100%;max-width:400px;height:auto;aspect-ratio:4/5;border-radius:14px;
  background:var(--pv-navy);
  box-shadow:0 1px 2px color-mix(in srgb, var(--pv-navy) 18%, transparent),
             0 14px 28px -14px color-mix(in srgb, var(--pv-navy) 46%, transparent),
             0 36px 60px -34px color-mix(in srgb, var(--pv-navy) 52%, transparent)}

/* 選ぶ所。 */
.crc-panel{display:grid;gap:18px;align-content:start;min-width:0}
.crc-f{min-width:0;margin:0;padding:0;border:0}
.crc-l{display:block;margin:0 0 8px;padding:0;color:var(--pv-ink-2);font-size:13px;font-weight:700;line-height:1.5}
.crc-cos{display:grid;gap:14px;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr))}

.crc-seg{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:4px;border-radius:999px;
  border:1px solid var(--pv-line);background:var(--pv-surface-soft)}
.crc-opt{min-height:44px;padding:0 14px;border:0;border-radius:999px;background:transparent;
  color:var(--pv-ink-2);font:inherit;font-size:14px;font-weight:700;line-height:1.3;cursor:pointer;
  transition:transform .22s var(--pv-ease), opacity .22s var(--pv-ease)}
.crc-opt[aria-pressed="true"]{background:var(--pv-accent-dark);color:var(--cr-on);
  box-shadow:0 1px 2px color-mix(in srgb, var(--pv-navy) 14%, transparent),
             0 8px 16px -10px color-mix(in srgb, var(--pv-accent-dark) 80%, transparent)}
.crc-opt:active{transform:scale(.97)}
.cr .crc-opt:focus-visible{border-radius:999px}

.crc-sel{display:block;width:100%;min-height:48px;padding:0 14px;border:1px solid var(--pv-line);
  border-radius:var(--pv-r-sm);background:var(--pv-surface);color:var(--pv-ink);
  font:inherit;font-size:16px;font-weight:600;cursor:pointer;
  transition:opacity .22s var(--pv-ease)}
.crc-sel:focus-visible{outline:2px solid var(--pv-accent);outline-offset:2px}
.crc-sel:active{opacity:.7}

/* 写真を選ぶ。選ばれている1枚に輪を付ける。 */
.crc-ph{display:flex;flex-wrap:wrap;gap:12px;padding:5px}
.crc-th{position:relative;flex:none;width:108px;height:72px;padding:0;border:0;overflow:hidden;
  border-radius:var(--pv-r-sm);background:var(--pv-surface-soft);cursor:pointer;opacity:.74;
  transition:transform .22s var(--pv-ease), opacity .22s var(--pv-ease)}
.crc-th img{display:block;width:100%;height:100%;object-fit:cover}
.crc-th[aria-pressed="true"]{opacity:1;
  box-shadow:0 0 0 3px var(--pv-bg), 0 0 0 5px var(--pv-accent),
             0 12px 20px -12px color-mix(in srgb, var(--pv-navy) 50%, transparent)}
.crc-th:active{transform:scale(.96)}
.cr .crc-th:focus-visible{border-radius:var(--pv-r-sm);outline-offset:6px}

.crc-act{display:flex;flex-wrap:wrap;gap:10px}
.crc-btn{flex:1 1 160px;display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 22px;
  border:0;border-radius:999px;background:var(--pv-accent-dark);color:var(--cr-on);
  font:inherit;font-size:15px;font-weight:700;white-space:nowrap;cursor:pointer;
  box-shadow:0 1px 2px color-mix(in srgb, var(--pv-navy) 14%, transparent),
             0 10px 20px -12px color-mix(in srgb, var(--pv-accent-dark) 80%, transparent);
  transition:transform .22s var(--pv-ease), opacity .22s var(--pv-ease)}
.crc-btn.is-ghost{background:var(--pv-surface);color:var(--pv-ink);border:1px solid var(--pv-line);
  box-shadow:0 1px 2px color-mix(in srgb, var(--pv-navy) 8%, transparent)}
.crc-btn:active{transform:scale(.97)}
.cr .crc-btn:focus-visible{border-radius:999px}

@media (hover:hover){
  .crc-opt:hover{opacity:.82}
  .crc-opt[aria-pressed="true"]:hover{opacity:1;transform:translateY(-1px)}
  .crc-sel:hover{opacity:.86}
  .crc-th:hover{opacity:1;transform:translateY(-2px)}
  .crc-btn:hover{transform:translateY(-1px)}
}

/* 広い画面: 見本を左・選ぶ所を右に並べる。 */
@media (min-width:1180px){
  .crc{grid-template-columns:minmax(0, 432px) minmax(0, 1fr);gap:28px;align-items:start}
}
@media (prefers-reduced-motion:reduce){
  .crc-opt,.crc-sel,.crc-th,.crc-btn{transition:none}
}