/* CDFP-P 想定問題演習 — forensic terminal (phosphor green on black CRT) */
:root{
  --bg:#040704;
  --panel:#070d08;
  --panel-2:#050a06;
  --line:#1c3a24;
  --line-bright:#2c5a38;
  --green:#3dff7c;
  --green-dim:#27b558;
  --ink:#c9e6cf;
  --dim:#61936e;
  --amber:#ffc857;
  --red:#ff6b5e;
  --glow:0 0 7px rgba(61,255,124,.45);
  --jp:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic UI",sans-serif;
  --mono:"SF Mono","Cascadia Mono","Consolas","Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic UI",monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px}
body{
  background:
    radial-gradient(1200px 600px at 50% -8%, rgba(35,80,45,.28) 0%, transparent 60%),
    var(--bg);
  color:var(--ink);
  font-family:var(--jp);
  line-height:1.8;
  min-height:100vh;
}
/* CRT scanlines + vignette */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:999;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px);
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:998;
  background:radial-gradient(ellipse at center, transparent 62%, rgba(0,0,0,.5) 100%);
}
#app{max-width:900px;margin:0 auto;
  padding:calc(22px + env(safe-area-inset-top)) 20px calc(80px + env(safe-area-inset-bottom))}
::selection{background:var(--green);color:#02150a}
body{-webkit-tap-highlight-color:transparent}
button{touch-action:manipulation}

/* ===== masthead: shell prompt ===== */
.masthead{border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:24px}
.prompt{font-family:var(--mono);font-size:.78rem;color:var(--dim);margin-bottom:8px;letter-spacing:.04em}
.prompt .user{color:var(--green-dim)}
.prompt .path{color:var(--amber)}
.prompt .cursor{color:var(--green);animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.titlebar{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:8px}
.masthead h1{font-family:var(--jp);font-weight:700;font-size:1.3rem;letter-spacing:.12em;color:#eaffee;text-shadow:var(--glow)}
.masthead h1 .en{font-size:.68rem;letter-spacing:.32em;color:var(--green);display:block;margin-bottom:3px;font-weight:400}
.masthead .date{font-family:var(--mono);font-size:.74rem;color:var(--dim);letter-spacing:.12em}

/* ===== panels with corner brackets ===== */
.card{
  background:linear-gradient(180deg, rgba(22,44,27,.22), rgba(5,10,6,.4)), var(--panel);
  border:1px solid var(--line);
  padding:22px 24px;margin-bottom:18px;position:relative;
}
.card::before,.card::after{content:"";position:absolute;width:14px;height:14px;pointer-events:none}
.card::before{top:-1px;left:-1px;border-top:2px solid var(--green);border-left:2px solid var(--green)}
.card::after{bottom:-1px;right:-1px;border-bottom:2px solid var(--green);border-right:2px solid var(--green)}
.card h2{font-family:var(--jp);font-weight:700;font-size:1.05rem;letter-spacing:.14em;margin-bottom:12px;color:#eaffee}
.card h2 .tag{font-size:.64rem;letter-spacing:.34em;color:var(--green);display:block;margin-bottom:2px;font-weight:400}
.card h2 .tag::before{content:"// "}
.muted{color:var(--dim);font-size:.86rem}
.small{font-size:.8rem}

/* mode cards */
.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:640px){.mode-grid{grid-template-columns:1fr}}
.mode-card{cursor:pointer;transition:border-color .12s, box-shadow .12s}
.mode-card:hover{border-color:var(--green-dim);box-shadow:0 0 18px rgba(61,255,124,.12), inset 0 0 24px rgba(61,255,124,.04)}
.mode-card .go{font-family:var(--mono);color:var(--green);font-size:.78rem;letter-spacing:.24em;margin-top:12px;display:block}
.mode-card:hover .go{text-shadow:var(--glow)}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.chip{font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;color:var(--dim);
  border:1px solid var(--line);padding:2px 10px;background:var(--panel-2)}
.chip b{color:var(--green);font-weight:400}
.chip.click{cursor:pointer;transition:all .1s;color:var(--ink)}
.chip.click:hover{border-color:var(--green);color:var(--green);box-shadow:0 0 8px rgba(61,255,124,.2)}
.topicgroup{margin-top:14px}
.topicgroup .gname{font-family:var(--jp);font-weight:700;font-size:.82rem;letter-spacing:.16em;color:var(--amber);margin-bottom:6px}
.topicgroup .gname::before{content:"▸ "}

/* ===== buttons ===== */
button{font-family:var(--jp);cursor:pointer}
.btn{background:var(--green);color:#03170b;border:1px solid var(--green);
  padding:10px 24px;font-size:.9rem;letter-spacing:.16em;font-weight:700;transition:all .1s}
.btn:hover{box-shadow:0 0 14px rgba(61,255,124,.45);filter:brightness(1.08)}
.btn:disabled{opacity:.3;cursor:not-allowed;box-shadow:none}
.btn.ghost{background:transparent;border:1px solid var(--line-bright);color:var(--dim);font-weight:400}
.btn.ghost:hover{border-color:var(--green-dim);color:var(--green);box-shadow:none}
.btn.danger{background:transparent;border:1px solid var(--red);color:var(--red);font-weight:400}
.btn.danger:hover{background:var(--red);color:#160404;box-shadow:0 0 12px rgba(255,107,94,.4)}
.btn.small{padding:5px 13px;font-size:.76rem}
.btnrow{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px;align-items:center}

/* ===== option pickers ===== */
.optrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:10px 0 4px}
.opt{border:1px solid var(--line);padding:12px 14px;background:var(--panel-2);
  cursor:pointer;text-align:center;transition:all .1s;font-family:var(--jp)}
.opt:hover{border-color:var(--green-dim)}
.opt.on{border-color:var(--green);background:rgba(61,255,124,.07);box-shadow:inset 0 0 16px rgba(61,255,124,.06)}
.opt .n{font-size:.68rem;color:var(--dim);display:block;margin-top:3px}
.opt.on .n{color:var(--green)}

/* checkbox list */
.catlist{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:8px;margin-top:8px}
.catitem{display:flex;align-items:center;gap:10px;border:1px solid var(--line);
  padding:9px 13px;background:var(--panel-2);cursor:pointer;font-size:.88rem;font-family:var(--jp);transition:border-color .1s}
.catitem:hover{border-color:var(--green-dim)}
.catitem.on{border-color:var(--line-bright)}
.catitem .box{width:15px;height:15px;border:1px solid var(--dim);flex:none;position:relative}
.catitem.on .box{background:var(--green);border-color:var(--green);box-shadow:0 0 6px rgba(61,255,124,.5)}
.catitem.on .box::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;
  border:solid #03170b;border-width:0 2px 2px 0;transform:rotate(42deg)}
.catitem .cnt{margin-left:auto;font-size:.7rem;color:var(--dim)}

/* ===== question view ===== */
.qmeta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.qnum{font-family:var(--mono);color:var(--amber);letter-spacing:.12em;font-size:.85rem}
.qcat{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;color:var(--green);
  border:1px solid rgba(61,255,124,.45);padding:1px 9px}
.qtext{font-size:1.02rem;margin-bottom:18px;color:#e2f5e6}

.choices{display:flex;flex-direction:column;gap:9px}
.choice{display:flex;gap:14px;align-items:flex-start;text-align:left;width:100%;
  background:var(--panel-2);border:1px solid var(--line);padding:11px 15px;
  color:var(--ink);font-size:.95rem;line-height:1.75;font-family:var(--jp);transition:all .1s}
.choice:hover:not(:disabled){border-color:var(--green-dim);background:rgba(61,255,124,.04)}
.choice .bub{flex:none;width:26px;height:26px;border:1px solid var(--dim);font-family:var(--mono);
  display:flex;align-items:center;justify-content:center;font-size:.78rem;color:var(--dim);margin-top:2px}
.choice.sel{border-color:var(--amber);background:rgba(255,200,87,.06)}
.choice.sel .bub{background:var(--amber);border-color:var(--amber);color:#1d1503}
.choice.hit{border-color:var(--green);background:rgba(61,255,124,.08);box-shadow:inset 0 0 18px rgba(61,255,124,.05)}
.choice.hit .bub{background:var(--green);border-color:var(--green);color:#03170b;box-shadow:0 0 8px rgba(61,255,124,.5)}
.choice.miss{border-color:var(--red);background:rgba(255,107,94,.07)}
.choice.miss .bub{background:var(--red);border-color:var(--red);color:#1c0503}
.choice:disabled{cursor:default}

.verdict{font-family:var(--mono);font-size:1.02rem;letter-spacing:.24em;margin:14px 0 4px;font-weight:700}
.verdict.ok{color:var(--green);text-shadow:var(--glow)}
.verdict.ng{color:var(--red);text-shadow:0 0 7px rgba(255,107,94,.45)}
.expl{border-top:1px dashed var(--line-bright);margin-top:14px;padding-top:13px;font-size:.9rem;color:#b7d6bd}
.expl .lbl{font-family:var(--mono);font-size:.64rem;letter-spacing:.34em;color:var(--green);display:block;margin-bottom:6px}
.expl .lbl::before{content:"// "}

/* practice session bar */
.sessbar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:16px;
  font-family:var(--mono);font-size:.78rem;color:var(--dim)}
.sessbar b{color:var(--ink);font-weight:400}
.sessbar .acc{color:var(--green)}

/* ===== exam ===== */
.exambar{position:sticky;top:0;z-index:5;background:rgba(4,7,4,.96);
  border-bottom:1px solid var(--line);margin:0 -20px 18px;
  padding:calc(10px + env(safe-area-inset-top)) 20px 10px;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.timer{font-family:var(--mono);font-size:1.3rem;letter-spacing:.08em;color:var(--green);text-shadow:var(--glow)}
.timer.warn{color:var(--red);text-shadow:0 0 7px rgba(255,107,94,.5)}
.exambar .info{font-family:var(--mono);font-size:.74rem;color:var(--dim)}
.exambar .spacer{flex:1}

/* mark sheet navigator */
.sheet{display:grid;grid-template-columns:repeat(auto-fill,minmax(34px,1fr));gap:5px;margin-bottom:14px}
.cell{position:relative;height:32px;border:1px solid var(--line);background:var(--panel-2);
  font-family:var(--mono);font-size:.66rem;color:var(--dim);
  display:flex;align-items:center;justify-content:center;transition:all .1s}
.cell:hover{border-color:var(--green-dim)}
.cell.done{background:rgba(61,255,124,.14);color:var(--green);border-color:rgba(61,255,124,.4)}
.cell.cur{border-color:var(--amber);color:var(--amber);box-shadow:0 0 0 1px var(--amber),0 0 8px rgba(255,200,87,.3)}
.cell.flag::after{content:"";position:absolute;top:2px;right:2px;width:6px;height:6px;background:var(--amber)}
.sheet-legend{font-family:var(--mono);font-size:.68rem;color:var(--dim);margin-bottom:14px;display:flex;gap:16px;flex-wrap:wrap}
.dotc{display:inline-block;width:9px;height:9px;margin-right:5px;vertical-align:middle}

.flagbtn{background:transparent;border:1px solid var(--line-bright);color:var(--dim);padding:5px 12px;font-size:.76rem}
.flagbtn:hover{border-color:var(--amber);color:var(--amber)}
.flagbtn.on{border-color:var(--amber);color:var(--amber);background:rgba(255,200,87,.07)}

/* ===== result ===== */
.scorebox{text-align:center;padding:34px 20px 26px}
.scorebox .big{font-family:var(--mono);font-size:3.6rem;letter-spacing:.04em;color:var(--green);line-height:1.1;text-shadow:0 0 16px rgba(61,255,124,.5)}
.scorebox .big small{font-size:1.4rem;color:var(--dim);text-shadow:none}
.scorebox .pct{font-family:var(--mono);color:var(--amber);margin-top:6px}
.scorebox .passnote{margin-top:10px;font-size:.84rem;color:var(--dim)}
table.brk{width:100%;border-collapse:collapse;font-size:.88rem;margin-top:6px;font-family:var(--mono)}
table.brk th,table.brk td{border-bottom:1px solid var(--line);padding:7px 10px;text-align:left}
table.brk th{color:var(--dim);font-weight:400;font-size:.7rem;letter-spacing:.14em}
table.brk td.num{text-align:right;color:#e2f5e6}
.review-item{border:1px solid var(--line);padding:16px 18px;margin-bottom:12px;background:var(--panel-2)}
.review-item .badge{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;padding:2px 8px;margin-right:10px;border:1px solid}
.badge.ok{border-color:rgba(61,255,124,.5);color:var(--green);background:rgba(61,255,124,.08)}
.badge.ng{border-color:rgba(255,107,94,.5);color:var(--red);background:rgba(255,107,94,.08)}
.badge.na{border-color:var(--line-bright);color:var(--dim);background:transparent}
.review-item .rq{margin:8px 0 8px;font-size:.92rem;color:#e2f5e6}
.review-item .ra{font-size:.86rem;color:#b7d6bd}
.review-item .ra b{color:var(--green);font-weight:400}
.review-item .ra .yours{color:var(--red)}
.filterrow{display:flex;gap:8px;margin:14px 0}

/* history */
table.hist{width:100%;border-collapse:collapse;font-size:.82rem;font-family:var(--mono)}
table.hist td,table.hist th{border-bottom:1px solid var(--line);padding:6px 8px;text-align:left}
table.hist th{color:var(--dim);font-weight:400;font-size:.68rem;letter-spacing:.14em}

/* modal */
.modal-veil{position:fixed;inset:0;background:rgba(1,3,1,.82);display:flex;align-items:center;justify-content:center;z-index:1000}
.modal{background:var(--panel);border:1px solid var(--line-bright);padding:26px 28px;max-width:440px;width:92%;position:relative;
  box-shadow:0 0 40px rgba(61,255,124,.12)}
.modal::before,.modal::after{content:"";position:absolute;width:14px;height:14px}
.modal::before{top:-1px;left:-1px;border-top:2px solid var(--green);border-left:2px solid var(--green)}
.modal::after{bottom:-1px;right:-1px;border-bottom:2px solid var(--green);border-right:2px solid var(--green)}
.modal p{margin-bottom:18px;font-size:.94rem}

footer.colophon{margin-top:44px;text-align:center;font-family:var(--mono);font-size:.64rem;
  letter-spacing:.22em;color:#3a5c43}
footer.colophon::before{content:"── "}
footer.colophon::after{content:" ──"}

/* ===== mobile (iPhone / narrow) ===== */
@media(max-width:540px){
  html{font-size:15px}
  #app{padding-left:14px;padding-right:14px}
  .prompt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.72rem}
  .masthead h1{font-size:1.06rem;letter-spacing:.08em}
  .masthead h1 .en{font-size:.58rem;letter-spacing:.22em}
  .masthead .date{display:none}
  .card{padding:16px 15px}
  .mode-grid{gap:12px}
  .btn{padding:12px 20px;letter-spacing:.1em}
  .btn.small{padding:8px 12px}
  .btnrow{gap:9px}
  .kbdhint{display:none}
  .choice{padding:12px 12px;gap:10px;font-size:.93rem;line-height:1.65}
  .choice .bub{width:24px;height:24px;font-size:.72rem}
  .qtext{font-size:.99rem}
  .chips{gap:6px}
  .chip.click{padding:6px 11px}
  .catitem{padding:11px 12px}
  .opt{padding:11px 10px}
  .exambar{margin:0 -14px 14px;padding-left:14px;padding-right:14px;gap:10px}
  .timer{font-size:1.05rem}
  .exambar .info{font-size:.68rem}
  .sheet{grid-template-columns:repeat(auto-fill,minmax(30px,1fr));gap:4px}
  .cell{height:30px;font-size:.62rem}
  .flagbtn{padding:6px 10px;font-size:.7rem}
  .scorebox{padding:24px 12px 18px}
  .scorebox .big{font-size:2.7rem}
  table.brk{font-size:.8rem}
  table.brk th,table.brk td{padding:6px 6px}
  table.hist{font-size:.72rem}
  .review-item{padding:13px 13px}
  .sessbar{gap:10px;font-size:.72rem}
  .topicgroup .gname{font-size:.8rem}
  footer.colophon{font-size:.54rem;letter-spacing:.14em}
}
/* touch feedback */
@media(hover:none){
  .choice:active:not(:disabled){border-color:var(--green-dim);background:rgba(61,255,124,.06)}
  .btn:active{filter:brightness(1.2)}
  .cell:active{border-color:var(--green-dim)}
}