.card { --ink: #161b27; --paper: #efece3; --muted: #4c5364; --line: #cdc9bc; --navy: #121824; --mark-alpha: 68%;
  background-color: var(--navy);
  background-image: linear-gradient(#ffffff0a 1px, transparent 1px), linear-gradient(90deg, #ffffff0a 1px, transparent 1px);
  background-size: 48px 48px;
  padding: 30px 32px 40px; display: grid; grid-template-columns: 456px 1fr; gap: 16px; color: var(--ink); font-family: 'Paperlogy', 'M PLUS 2'; font-weight: 500; --ring-radius: 0; }
.card[data-lang="ja"] .role { grid-template-columns: 158px 1fr; }
.card[data-lang="ja"] .role h4 { font-size: 18px; white-space: nowrap; }
.card[data-lang="ja"] .role .chip { height: 44px; min-width: 66px; padding: 0 7px; font-size: 19px; }
.card[data-lang="ja"] .rk-name { font-size: 17px; }
.card[data-lang="en"] .time-row .chip { min-width: 62px; padding: 0 8px; font-size: 21px; }
.card[data-lang="en"] .time-row { grid-template-columns: 112px 1fr; }
.card[data-lang="en"] .role { grid-template-columns: 132px 1fr; }
.card[data-lang="en"] .role h4 { height: 44px; font-size: 19px; }
.card[data-lang="en"] .role .chip { height: 44px; min-width: 72px; padding: 0 8px; font-size: 20px; }
.cut { --c: 20px; clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.p { background: var(--paper); padding: 16px 24px 18px; }
.p h3 { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; font-weight: 400; }
.p h3 b { font-weight: 900; font-size: 29px; letter-spacing: .01em; line-height: 1; }
.p h3 i { font-style: normal; font-weight: 700; font-size: 19px; color: var(--muted); }

.left { display: grid; grid-template-rows: 1fr auto auto; gap: 12px; min-height: 0; }
.file { position: relative; background: #1f2838; color: #e8e6dd; overflow: hidden;
  background-image: repeating-linear-gradient(135deg, #ffffff07 0 14px, transparent 14px 28px); }
.file-stripe { position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: var(--accent); }
.file-top { position: absolute; z-index: 2; left: 0; right: 0; top: 0; padding: 18px 22px 26px 30px; display: flex; justify-content: space-between; font-weight: 800; font-size: 21px; letter-spacing: .06em; pointer-events: none; }
.file-top span:last-child { color: #aeb7c8; font-weight: 700; font-size: 18px; }
.hero-slot { position: absolute; left: 8px; right: 4px; top: 48px; bottom: 0; }
.hero-slot.is-upload { left: 0; right: 0; top: 0; }
.file:has(.is-upload) .file-top { background: linear-gradient(#121824d9, #12182400); }
.name-box label { display: block; font-weight: 800; font-size: 18px; letter-spacing: .03em; color: var(--muted); }
.name-box input[data-field="nick"] { font-weight: 900; height: 80px; letter-spacing: -.01em; color: var(--ink); }
.name-box input[data-field="ign"] { font-weight: 700; height: 40px; color: var(--ink); }
.name-box label:nth-of-type(2) { margin-top: 4px; }
.memo { font-weight: 700; font-size: 25px; line-height: 1.35; min-height: 68px; max-height: 88px; outline: 0; }

.right { display: grid; grid-template-rows: 54px auto 1fr auto; gap: 12px; min-height: 0; }
.head { display: flex; align-items: center; justify-content: space-between; color: #eae7dc; }
.head h1 { font-weight: 800; font-size: 34px; line-height: 1; letter-spacing: .01em; }
.head h1 em { font-style: normal; color: var(--accent); margin-left: 12px; }
.hud { display: flex; align-items: center; gap: 18px; font-weight: 700; font-size: 17px; color: #aeb7c8; letter-spacing: .05em; text-align: right; line-height: 1.25; }
.barcode { width: 168px; height: 42px; background: repeating-linear-gradient(90deg, #eae7dc 0 3px, transparent 3px 6px, #eae7dc 6px 7px, transparent 7px 12px, #eae7dc 12px 17px, transparent 17px 20px); }

.ranks { display: flex; justify-content: space-between; }
.rank { width: 122px; gap: 9px; }
.rk-wrap { width: 78px; height: 78px; }
.rk-name { font-weight: 500; font-size: 21px; white-space: nowrap; color: var(--muted); }
.rank.on .rk-name { font-weight: 800; color: var(--ink); }

.mid { display: grid; grid-template-columns: 836px 1fr; gap: 12px; min-height: 0; }
.agents-p { display: flex; flex-direction: column; }
.agents { flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; }
.role { display: grid; grid-template-columns: 104px 1fr; gap: 10px; align-items: start; }
.role h4 { display: flex; align-items: center; gap: 8px; height: 52px; font-weight: 800; font-size: 22px; color: var(--ink); }
.role h4 .role-icon { width: 17px; height: 17px; color: var(--muted); }
.chip { height: 46px; min-width: 84px; padding: 0 10px; border: 1.5px solid var(--line); font-weight: 500; font-size: 23px; color: var(--muted); }
.chip.on { border-color: transparent; font-weight: 800; color: var(--ink); }
.role .chip { height: 52px; }

.spec { display: grid; grid-template-rows: repeat(5, 1fr); padding-top: 6px; padding-bottom: 6px; }
.spec > div { display: grid; grid-template-columns: 148px 1fr; align-items: center; border-top: 1.5px solid var(--line); }
.spec > div:first-child { border-top: 0; }
.spec h3 { display: block; margin: 0; }
.spec h3 i { display: block; margin-top: 3px; font-size: 18px; }
.spec h3 b { font-size: 25px; }

.low { display: grid; grid-template-columns: 556px 1fr; gap: 12px; }
.time-row { display: grid; grid-template-columns: 72px 1fr; align-items: center; }
.time-row + .time-row { margin-top: 8px; }
.time-row strong { font-weight: 800; font-size: 21px; }
.credit { right: 34px; bottom: 11px; font-size: 16px; font-weight: 700; color: #b9c1d0; letter-spacing: .02em; }