:root{font-family:system-ui,"Noto Sans JP",sans-serif;color:#162637;background:#f1f5f9;font-size:18px}*{box-sizing:border-box}body{margin:0}header{background:#163b60;color:white;padding:1.5rem max(1rem,calc((100vw - 850px)/2))}header p{margin:0 0 .5rem}h1{font-size:1.65rem;margin:0}h2{font-size:1.4rem;margin-top:0}h3{font-size:1.1rem}main{max-width:900px;padding:1rem;margin:auto}footer{max-width:900px;margin:auto;padding:1rem;color:#526071}.note{border-left:5px solid #527a9e;padding:1rem;background:#e1eaf3;line-height:1.7}section,.card{background:white;border:1px solid #c5d1dd;border-radius:12px;padding:1.3rem;margin:1rem 0}label{display:block;font-weight:650;margin:1rem 0 .4rem}input{font:inherit;width:100%;padding:.8rem;border:1px solid #77899a;border-radius:8px}button{font:inherit;font-weight:650;min-height:54px;padding:.7rem 1.1rem;border-radius:8px;border:1px solid #204c75;background:#204c75;color:white;cursor:pointer;margin:.35rem .3rem .35rem 0}button:disabled{opacity:.5;cursor:wait}.secondary{background:#fff;color:#204c75}.danger{background:#fff;color:#9d2323;border-color:#a53333}.actions{display:flex;flex-wrap:wrap;gap:.3rem}.primary{width:100%;margin-top:1rem}.help{color:#526071;line-height:1.7;font-size:.94rem}#status{color:#8b2424;white-space:pre-wrap}dl{display:grid;grid-template-columns:7rem 1fr;gap:.8rem}dt{font-weight:700}dd{margin:0;overflow-wrap:anywhere}.credential{font-family:ui-monospace,monospace;font-size:1.25rem;letter-spacing:.06em;overflow-wrap:anywhere;user-select:all}.issuance{border:3px solid #204c75}.badge{display:inline-block;background:#e1eaf3;padding:.25rem .65rem;border-radius:5px}.muted{color:#526071}.member{border-top:1px solid #d9e1e8;padding:1rem 0}.member:first-of-type{border:0}.member p{margin:.6rem 0}input[type=checkbox]{width:auto;min-height:24px;margin-right:.5rem}input:focus,button:focus-visible{outline:3px solid #dc9600;outline-offset:3px}@media(max-width:560px){dl{grid-template-columns:1fr;gap:.3rem}dd{margin-bottom:.7rem}.actions button{width:100%}section,.card{padding:1rem}}
.card-pair{display:flex;flex-wrap:wrap;gap:6mm;justify-content:center}.side-label{text-align:center;color:#526071}.member-card{width:90mm;height:55mm;flex-shrink:0;border:.25mm solid #53687b;border-radius:3mm;overflow:hidden;position:relative;background:white;color:#142e47}.card-front{display:flex;flex-direction:column;justify-content:space-between;text-align:center;padding:5mm 3mm;background:#edf2f7}.card-front>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.card-front>img[hidden]{display:none}.front-title,.front-name{position:relative;background:#ffffffeb;border-radius:2mm;padding:2mm;line-height:1.35}.front-title{font-size:13pt;font-weight:750}.front-name{overflow-wrap:anywhere;font-weight:700}.front-name span{display:block;font-size:9pt;font-weight:400;margin-top:1mm}.card-back{padding:3mm}.back-heading{font-size:12pt;font-weight:700}.back-content{display:flex;gap:3mm;align-items:center;margin-top:1mm}.login-qr{width:29mm;height:29mm;display:block}.card-login{font-size:9pt;line-height:1.3}.card-login strong{display:block;font:700 15pt ui-monospace,monospace;white-space:nowrap;margin:0 0 1.5mm}.card-instruction{font-size:8pt;margin-top:1mm}.card-private{font-size:7pt;margin-top:1mm;color:#405164}.card-controls .help{max-width:44rem}#card-message{color:#8b2424}.card-side{max-width:100%;overflow-x:auto}

select{font:inherit;width:100%;min-height:54px;padding:.6rem;border:1px solid #77899a;border-radius:8px}summary{cursor:pointer;padding:1rem 0;font-weight:650}
.card-pair{--card-front-left:14.6mm;--card-back-left:104.6mm;--card-top:8.3mm}
@page{size:A4 portrait;margin:0}
@media print{html,body{margin:0;padding:0;background:white}header,.note,footer,#status,section:not(.issuance),.card-controls,.side-label{display:none!important}main{padding:0;max-width:none;margin:0}.issuance{border:0;padding:0;margin:0}.card-pair{display:block;margin:0;padding:0}.card-side{position:relative;width:210mm;height:296mm;overflow:hidden;max-width:none;break-after:page}.card-side:last-child{break-after:auto}.member-card{position:absolute;top:var(--card-top);left:var(--card-front-left);border:0;border-radius:0;print-color-adjust:exact;-webkit-print-color-adjust:exact}.card-side:last-child .member-card{left:var(--card-back-left)}.card-pair[data-print-side="front"] .card-side:last-child,.card-pair[data-print-side="back"] .card-side:first-child{display:none}.card-pair[data-print-side="front"] .card-side:first-child{break-after:auto}}

/* Background artwork is separate from credential overlays and print geometry. */
.card-back>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}.card-back>img[hidden]{display:none}.card-back>div{position:relative}.card-back .login-qr{background:#fff;flex-shrink:0}

/* Fixed 90 x 55mm back layout. Background swaps do not move personal fields. */
.card-back-candidate{padding:0;color:#000}
.card-back-candidate>img{object-fit:fill}
.card-back-candidate .back-content{position:absolute;inset:0;margin:0;display:block}
.card-back-candidate .login-qr{position:absolute;left:4mm;top:25mm;width:23mm;height:23mm;background:#fff}
.card-back-candidate .card-login{position:absolute;left:33.5mm;top:32mm;font-size:6.5pt;line-height:1.15}
.card-back-candidate .card-login strong{font-size:12pt;line-height:1.1;margin:.4mm 0 1mm}
.card-back-candidate .card-url{position:absolute;left:3.8mm;top:50.5mm;width:44mm;font-size:4.8pt;line-height:1.1;overflow-wrap:anywhere;color:#000}
.card-back-candidate .card-instruction{position:absolute;left:51mm;top:50.5mm;width:36mm;font-size:5.2pt;line-height:1.15;margin:0;color:#000}

/* Front candidate: keep the original art and overlay only the member name. */
.card-front-candidate{padding:0;background:#fff}
.card-front-candidate>img{object-fit:fill}
.card-front-candidate .front-name{position:absolute;left:12mm;top:25mm;width:28mm;height:9mm;display:flex;align-items:center;justify-content:center;padding:0;background:transparent;border-radius:0;color:#111;line-height:1.2;font-family:"Yu Mincho","Hiragino Mincho ProN","Noto Serif CJK JP",serif;overflow-wrap:anywhere}

/* Personal name is on the back, separate from the replaceable artwork. */
.card-back-candidate .back-name{position:absolute;left:33.5mm;top:25mm;width:52mm;height:6mm;display:flex;align-items:center;font-weight:700;line-height:1.1;overflow-wrap:anywhere;color:#000}