/* 市民記録局の操作画面と、PNG化する固定寸法カードの意匠・レスポンシブ表示を担う。 */

:root { --archive-gold:#c9a84c; --archive-ink:#101014; --archive-paper:#e8dfca; }
body { background:#08080b; }
.mysoldier-page { max-width:1440px; padding-bottom:90px; }
/* Author display rules below must never override the controller's hidden state. */
.mysoldier-page [hidden] { display:none !important; }
.archive-hero { position:relative; padding:72px 24px 46px; text-align:center; overflow:hidden; }
.archive-hero::before { content:""; position:absolute; inset:-130px 0 auto 50%; width:560px; height:360px; transform:translateX(-50%); background:radial-gradient(ellipse,rgba(201,168,76,.16),transparent 68%); pointer-events:none; }
.archive-hero__eyebrow,.result-heading span { color:var(--archive-gold); font:700 10px 'Noto Sans JP',sans-serif; letter-spacing:.34em; }
.archive-hero h1 { margin:13px 0 12px; color:#f4efe3; font:900 clamp(2rem,5vw,4.3rem)/1.1 'Noto Serif JP',serif; letter-spacing:.08em; text-shadow:0 6px 40px #000; }
.archive-hero p { margin:0 auto; max-width:650px; color:#97938b; font:500 .78rem/2 'Noto Sans JP',sans-serif; }
.archive-hero__rule { display:flex; align-items:center; gap:20px; margin:32px auto 0; max-width:780px; color:#6c6248; font:700 8px 'Noto Sans JP'; letter-spacing:.24em; }
.archive-hero__rule::before,.archive-hero__rule::after { content:""; flex:1; height:1px; background:linear-gradient(90deg,transparent,#6c5931); }
.archive-hero__rule::after { transform:scaleX(-1); }
.archive-gate { display:flex; align-items:center; gap:20px; max-width:920px; margin:0 auto; padding:22px 26px; border:1px solid #3e3521; background:linear-gradient(110deg,#121113,#0b0b0e); box-shadow:0 20px 60px #0008; }
.archive-gate__number { color:#332d20; font:900 48px/1 'Noto Serif JP'; }
.archive-gate div { flex:1; display:grid; gap:5px; }
.archive-gate b { color:#e9e2d2; font:700 15px 'Noto Serif JP'; }
.archive-gate small,.archive-note { color:#716e68; font:500 10px/1.7 'Noto Sans JP'; }
.archive-workspace { display:grid; grid-template-columns:minmax(320px,.9fr) minmax(440px,1.1fr); gap:18px; margin-top:20px; }
.archive-panel { position:relative; min-width:0; border:1px solid #28251f; background:linear-gradient(145deg,#111115,#0c0c10 60%); padding:25px; box-shadow:0 16px 50px #0006; }
.archive-panel::after { content:""; position:absolute; inset:7px; border:1px solid #ffffff05; pointer-events:none; }
.archive-panel__head,.result-heading { position:relative; z-index:1; display:flex; justify-content:space-between; align-items:center; gap:14px; border-bottom:1px solid #2c2922; padding-bottom:16px; }
.archive-panel__head span { color:#8e773d; font:900 9px 'Noto Sans JP'; letter-spacing:.26em; }
.archive-panel h2,.result-heading h2 { margin:4px 0 0; color:#e8e2d4; font:700 21px 'Noto Serif JP'; letter-spacing:.1em; }
.archive-refresh { position:relative; z-index:2; width:38px; height:38px; border:1px solid #3f3827; background:#0b0b0e; color:#a78d4a; cursor:pointer; font-size:18px; }
.soldier-roster { position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; max-height:510px; padding:6px 4px 6px 0; overflow:auto; scrollbar-color:#5d4d2a #111; }
.soldier-option { position:relative; min-width:0; border:1px solid #27251f; background:#0b0b0e; padding:0; cursor:pointer; overflow:hidden; text-align:left; transition:.18s ease; }
.soldier-option:hover { transform:translateY(-2px); border-color:#6f5a2d; }
.soldier-option.is-selected { border-color:var(--archive-gold); box-shadow:0 0 0 1px #c9a84c55,0 12px 30px #0009; }
.soldier-option img { display:block; width:100%; aspect-ratio:1; object-fit:cover; background:#17171b; }
.soldier-option div { padding:8px; }
.soldier-option b,.soldier-option small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.soldier-option b { color:#ddd6c5; font:700 10px 'Noto Serif JP'; }
.soldier-option small { margin-top:3px; color:#77736a; font:700 8px 'Noto Sans JP'; letter-spacing:.08em; }
.roster-empty { grid-column:1/-1; padding:50px 20px; border:1px dashed #302b21; color:#77736a; text-align:center; font:500 11px/2 'Noto Sans JP'; }
.mode-tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:20px; }
.mode-tab { display:grid; grid-template-columns:36px 1fr; grid-template-rows:auto auto; align-items:center; column-gap:10px; border:1px solid #302d26; background:#0a0a0d; padding:16px; color:#88847b; cursor:pointer; text-align:left; }
.mode-tab>span { grid-row:1/3; color:#4e4531; font:900 29px 'Noto Serif JP'; }
.mode-tab b { color:#bdb7aa; font:700 14px 'Noto Serif JP'; }
.mode-tab small { margin-top:4px; font:500 9px 'Noto Sans JP'; }
.mode-tab.is-active { border-color:#8e7339; background:linear-gradient(135deg,#18150f,#0d0c0d); box-shadow:inset 0 2px #c9a84c; }
.mode-tab.is-active>span,.mode-tab.is-active b { color:var(--archive-gold); }
.season-section { margin-top:18px; }
.season-heading { display:flex; justify-content:space-between; gap:12px; margin-bottom:8px; color:#b8b1a3; font:700 10px 'Noto Sans JP'; }
.season-heading small { color:#69665f; font-size:8px; }
.season-list { display:grid; gap:6px; max-height:190px; overflow:auto; }
.season-option { display:grid; grid-template-columns:42px 1fr auto; align-items:center; gap:12px; border:1px solid #292720; background:#0a0a0d; padding:10px 12px; color:#9d988e; cursor:pointer; text-align:left; }
.season-option>span { color:#665938; font:900 18px 'Noto Serif JP'; }
.season-option b,.season-option small { display:block; font-family:'Noto Sans JP'; }
.season-option b { color:#c8c1b1; font-size:10px; }.season-option small { margin-top:2px; color:#6f6b63; font-size:8px; }
.season-option em { color:#8b7440; font:700 8px 'Noto Sans JP'; font-style:normal; }
.season-option.is-selected { border-color:#9a7d3b; background:#17140e; }
.season-option:disabled { opacity:.43; cursor:not-allowed; filter:grayscale(.7); }
.create-block { margin-top:22px; border-top:1px solid #29261f; padding-top:18px; }
.selection-summary { min-height:31px; margin-bottom:10px; color:#8b877e; font:500 10px/1.7 'Noto Sans JP'; }
.sex-section { margin:0 0 12px; border:1px solid #302d26; padding:12px; color:#8b877e; }
.sex-section legend { padding:0 6px; font:700 9px 'Noto Sans JP'; letter-spacing:.06em; }
.sex-toggle { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.sex-toggle button { border:1px solid #463d2a; background:#0a0a0d; color:#9b9588; padding:10px; cursor:pointer; font:700 12px 'Noto Serif JP'; }
.sex-toggle button.is-selected { border-color:#c9a84c; background:#201a0e; color:#d8b85c; box-shadow:inset 0 0 0 1px #c9a84c55; }
.sex-toggle button:disabled { cursor:not-allowed; opacity:.65; }
.sex-section small { display:block; min-height:1.4em; margin-top:7px; font:500 9px 'Noto Sans JP'; color:#756e61; }
.record-button { display:flex; align-items:center; justify-content:center; gap:13px; width:100%; min-height:72px; border:1px solid #aa8c44; background:linear-gradient(135deg,#c8a64e,#8f6e29); color:#111015; cursor:pointer; box-shadow:0 12px 38px #0008; }
.record-button:disabled { filter:grayscale(1); opacity:.35; cursor:not-allowed; }
.record-button__seal { display:grid; place-items:center; width:39px; height:39px; border:2px solid #5a3b1f; font:900 21px 'Noto Serif JP'; }
.record-button b,.record-button small { display:block; text-align:left; }.record-button b { font:900 16px 'Noto Serif JP'; letter-spacing:.12em; }.record-button small { margin-top:3px; font:700 8px 'Noto Sans JP'; letter-spacing:.12em; }
.record-status { min-height:20px; margin:10px 0 0; color:#847f75; font:500 10px/1.8 'Noto Sans JP'; }.record-status.is-error { color:#d88980; }.record-status.is-ok { color:#ac9558; }
.record-result,.service-history { margin-top:26px; border:1px solid #2b2821; background:#0c0c10; padding:18px; }
.record-close { border:1px solid #4b402a; background:#0a0a0d; color:#c9a84c; width:36px; height:36px; cursor:pointer; font-size:20px; }
.record-result.is-popup { position:fixed; inset:3vh 3vw; z-index:1200; margin:0; overflow:auto; box-shadow:0 0 0 100vmax #000c; }
.citizen-registry-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:10px; margin-top:14px; }
.citizen-registry-item { border:1px solid #302b21; background:#0a0a0d; padding:0; overflow:hidden; cursor:pointer; text-align:left; }
.citizen-registry-item:hover { border-color:#9a7d3b; transform:translateY(-2px); }
.citizen-registry-item img { display:block; width:100%; aspect-ratio:1; object-fit:cover; background:#17171b; }
.citizen-registry-item b,.citizen-registry-item small { display:block; margin:0 8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.citizen-registry-item b { margin-top:8px; color:#c8c1b1; font:700 10px 'Noto Serif JP'; }
.citizen-registry-item small { margin-bottom:8px; color:#746f65; font:500 8px 'Noto Sans JP'; }
.format-switch { display:flex; gap:5px; }.format-switch button { border:1px solid #373229; background:#0a0a0d; color:#77736a; padding:8px 12px; cursor:pointer; font:700 9px 'Noto Sans JP'; }.format-switch button.is-active { border-color:#9b7e3d; color:#c9a84c; }
.card-preview-frame { display:grid; place-items:start center; min-height:420px; margin-top:14px; padding:20px; overflow:auto; background:radial-gradient(circle at 50% 10%,#292318,#08080b 63%); }
.card-preview-scaler { transform-origin:top left; }.record-actions { display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin-top:14px; }

.citizen-card { --paper:#e5dcc8; --family:#c9a84c; box-sizing:border-box; display:flex; flex-direction:column; overflow:hidden; color:#181512; border:1px solid #725f39; background-color:var(--paper); background-image:linear-gradient(90deg,rgba(91,66,28,.035) 1px,transparent 1px),linear-gradient(rgba(91,66,28,.03) 1px,transparent 1px); background-size:5px 5px; box-shadow:0 24px 80px #000b; font-family:'Noto Serif JP','Yu Mincho',serif; }
.citizen-card[data-mode="B"] { --paper:#dfd0af; }
.citizen-card[data-mode="C"] { --paper:#e2d7bf; }
.citizen-card[data-format="portrait"] { width:1080px; height:1350px; padding:48px 54px 36px; }
.citizen-card[data-format="x"] { width:1200px; height:675px; padding:28px 38px 24px; }
.citizen-card__header { display:flex; justify-content:space-between; align-items:end; border-top:5px solid #1b1813; border-bottom:2px solid #1b1813; padding:15px 4px 18px; }
.citizen-card__header span { color:#795e25; font:900 13px 'Noto Sans JP'; letter-spacing:.28em; }.citizen-card__header h3 { margin:7px 0 0; font:900 40px/1 'Noto Serif JP'; letter-spacing:.13em; }
.record-number { text-align:right; }.record-number small,.record-number b { display:block; }.record-number small { color:#806c45; font:900 10px 'Noto Sans JP'; letter-spacing:.28em; }.record-number b { margin-top:5px; font:900 25px 'Noto Serif JP'; }
.citizen-card__body { display:grid; flex:1; min-height:0; }.citizen-card[data-format="portrait"] .citizen-card__body { grid-template-rows:350px minmax(0,1fr); gap:24px; padding:25px 0 18px; }.citizen-card[data-format="x"] .citizen-card__body { grid-template-columns:470px minmax(0,1fr); gap:32px; padding:20px 0 14px; }
.citizen-card[data-mode="C"][data-format="portrait"] .citizen-card__body { grid-template-rows:440px minmax(0,1fr); gap:18px; }
.citizen-card[data-mode="C"] .record-fields>div { padding:7px 0; }
.citizen-card[data-mode="C"] .record-fields dt { font-size:9px; }
.citizen-card[data-mode="C"] .record-fields dd { font-size:12px; }
.citizen-profile { display:grid; grid-template-columns:310px minmax(0,1fr); gap:27px; min-width:0; }.citizen-card[data-format="x"] .citizen-profile { grid-template-columns:235px minmax(0,1fr); gap:20px; }
.portrait-wrap { position:relative; align-self:start; aspect-ratio:1; border:4px double #705c34; padding:9px; background:#171512; overflow:hidden; }.portrait-wrap img { display:block; width:100%; height:100%; object-fit:cover; background:#24221d; }
.record-fields { margin:0; border-top:2px solid #594a30; }.record-fields>div { display:grid; grid-template-columns:72px minmax(0,1fr); gap:12px; border-bottom:1px solid #9d8d6d; padding:12px 0; }.record-fields dt { color:#775f2e; font:900 11px 'Noto Sans JP'; letter-spacing:.14em; }.record-fields dd { margin:0; min-width:0; font:700 16px/1.35 'Noto Serif JP'; overflow-wrap:anywhere; }.record-fields #card-title-row dd { color:#7d1f17; font:900 12px 'Noto Sans JP'; letter-spacing:.06em; }
.citizen-card[data-format="x"] .record-fields>div { grid-template-columns:58px minmax(0,1fr); gap:8px; padding:7px 0; }.citizen-card[data-format="x"] .record-fields dt { font-size:9px; }.citizen-card[data-format="x"] .record-fields dd { font-size:12px; }
.citizen-story { position:relative; display:flex; flex-direction:column; min-height:0; border:1px solid #8f7b55; padding:23px 29px 19px; background:#ffffff22; }.citizen-card[data-format="x"] .citizen-story { padding:15px 22px 12px; }
.story-ornament { display:flex; align-items:center; gap:12px; color:#836b3d; }.story-ornament span { flex:1; height:1px; background:#9f8c66; }.story-ornament i { font:900 9px 'Noto Sans JP'; font-style:normal; letter-spacing:.22em; }
.citizen-story h4 { margin:15px 0 13px; text-align:center; font:900 32px/1.35 'Noto Serif JP'; letter-spacing:.08em; }.citizen-card[data-format="x"] .citizen-story h4 { margin:8px 0; font-size:24px; }
.citizen-story p { flex:1; min-height:0; margin:0; overflow:hidden; font:500 25px/1.78 'Noto Serif JP'; letter-spacing:.025em; text-align:justify; white-space:pre-wrap; }.citizen-card[data-format="x"] .citizen-story p { font-size:17px; line-height:1.62; }
.citizen-seal { position:absolute; right:24px; bottom:18px; display:grid; place-items:center; width:90px; height:90px; border:5px double #9d2d23; color:#9d2d23; background:#e5dcc8cc; transform:rotate(-7deg); font:900 18px/1.1 'Noto Serif JP'; letter-spacing:.08em; writing-mode:vertical-rl; opacity:.88; }.citizen-card[data-format="x"] .citizen-seal { right:16px; bottom:10px; width:62px; height:62px; border-width:3px; font-size:13px; }
.citizen-card__footer { display:flex; justify-content:space-between; align-items:end; gap:20px; border-top:2px solid #1b1813; padding-top:13px; }.citizen-card__footer p { margin:0; max-width:75%; font:700 10px/1.5 'Noto Sans JP'; }.citizen-card__footer b { color:#745d30; font:900 10px 'Noto Sans JP'; letter-spacing:.17em; }
.citizen-card[data-format="x"] .citizen-card__header { padding:8px 2px 11px; }.citizen-card[data-format="x"] .citizen-card__header h3 { font-size:27px; }.citizen-card[data-format="x"] .citizen-card__header span { font-size:9px; }.citizen-card[data-format="x"] .record-number b { font-size:18px; }.citizen-card[data-format="x"] .citizen-card__footer { padding-top:7px; }.citizen-card[data-format="x"] .citizen-card__footer p,.citizen-card[data-format="x"] .citizen-card__footer b { font-size:8px; }
.history-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:14px; }.history-card { position:relative; border:1px solid #332e24; background:linear-gradient(145deg,#15120d,#0b0b0e); padding:18px; color:#bdb6a7; cursor:pointer; text-align:left; }.history-card:hover { border-color:#866d38; }.history-card span { color:#8f763d; font:900 9px 'Noto Sans JP'; letter-spacing:.18em; }.history-card b { display:block; margin:8px 0; color:#e0d7c3; font:700 15px 'Noto Serif JP'; }.history-card small { color:#746f65; font:500 9px 'Noto Sans JP'; }
.history-card--medal { cursor:default; border-color:#b7c5ca66; background:radial-gradient(circle at 90% 10%,#dce6ea20,transparent 32%),linear-gradient(145deg,#172027,#080a0d); }.history-card--medal::after { content:'✦'; position:absolute; right:16px; top:13px; color:#dce6ea; font-size:22px; }.history-card--medal span { color:#b9c8cd; }.history-card--medal b { color:#f0f5f6; }

@media (max-width:900px) { .archive-workspace { grid-template-columns:1fr; }.soldier-roster { grid-template-columns:repeat(4,minmax(0,1fr)); max-height:360px; }.history-list { grid-template-columns:1fr 1fr; } }
@media (max-width:620px) { .mysoldier-page { padding-left:12px; padding-right:12px; }.archive-hero { padding:48px 6px 32px; }.archive-hero h1 { letter-spacing:.03em; }.archive-gate { align-items:stretch; flex-direction:column; }.archive-gate__number { display:none; }.archive-panel { padding:17px; }.soldier-roster { grid-template-columns:repeat(3,minmax(0,1fr)); }.mode-tabs { grid-template-columns:1fr; }.season-heading,.result-heading { align-items:flex-start; flex-direction:column; }.format-switch { width:100%; }.format-switch button { flex:1; }.card-preview-frame { min-height:290px; padding:8px; }.record-actions { align-items:stretch; flex-direction:column; }.history-list { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { .soldier-option { transition:none; }.soldier-option:hover { transform:none; } }