/* =========================================================
   会場候補資料 — Web版スタイル
   画面（レスポンシブ）＋印刷。元のA4デザインをWeb向けに最適化。
   ========================================================= */
:root{
  --ink:#243140; --head:#1c2735; --brass:#9a7b4f; --navy:#233244;
  --A:#2f6f5e; --B:#b07a2b; --C:#8a6a6a; --hl:#9a3b3b;
  --line:#e4e8ed; --line2:#dfe3e8; --bg:#eef0f3; --card:#fff;
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  background:var(--bg); color:var(--ink);
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","YuGothic","Meiryo",system-ui,sans-serif;
  font-size:15px; line-height:1.72; letter-spacing:.1px; -webkit-font-smoothing:antialiased;
}
.serif{ font-family:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho","YuMincho",serif; }
b,strong{ color:var(--head); }

/* ---- sheet (paper) ---- */
.sheet{
  max-width:940px; margin:26px auto; background:var(--card);
  padding:48px 54px 40px; border-radius:5px;
  box-shadow:0 6px 30px rgba(30,40,55,.10);
}

/* ---- cover ---- */
.cover{ border-top:4px solid var(--navy); border-bottom:1px solid #c9cfd6; padding:18px 0 16px; margin-bottom:22px; }
.eyebrow{ font-size:11px; letter-spacing:3px; color:var(--brass); font-weight:700; }
.cover h1{ font-size:30px; color:var(--head); font-weight:900; line-height:1.3; margin:8px 0 6px; letter-spacing:.4px; }
.cover .sub{ font-size:15px; color:#3a4858; font-weight:500; }
.cover .meta{ font-size:11.5px; color:#6a7686; margin-top:10px; }
.lead{ font-size:14px; color:#37424f; margin:0 0 20px; }

/* ---- section heads ---- */
.sec{ margin:26px 0 12px; }
.sec .en{ font-size:11px; letter-spacing:2.5px; color:var(--brass); font-weight:700; }
.sec h2{ font-size:19px; color:var(--head); font-weight:800; margin-top:2px; border-bottom:2px solid var(--navy); padding-bottom:6px; }

/* ---- recommendation ---- */
.reco{ border:1px solid #c7d2cc; border-left:5px solid var(--A); background:#f3f7f5; border-radius:5px; padding:16px 18px; margin:0 0 22px; }
.reco .en{ font-size:11px; letter-spacing:2.5px; color:var(--A); font-weight:700; }
.reco h3{ font-size:17px; color:var(--head); font-weight:800; margin:2px 0 8px; }
.reco table{ width:100%; border-collapse:collapse; }
.reco td{ vertical-align:top; padding:6px 6px; font-size:13.5px; border-bottom:1px solid #e1e8e4; }
.reco td.tag{ width:23%; font-weight:800; color:var(--A); white-space:nowrap; }
.reco td.tag.warn{ color:var(--B); }
.reco .ops{ font-size:13px; color:#48535f; margin-top:8px; }

/* ---- key/value ---- */
table.kv{ width:100%; border-collapse:collapse; margin:6px 0 2px; }
table.kv td{ border-bottom:1px solid var(--line); padding:8px 10px; vertical-align:top; font-size:13.5px; }
table.kv td.k{ width:18%; color:var(--head); font-weight:700; background:#f6f7f9; white-space:nowrap; }

/* ---- notes / emphasis ---- */
.note{ font-size:12.5px; color:#6a7686; }
.hl{ color:var(--hl); font-weight:700; } .ok{ color:var(--A); font-weight:700; }

/* ---- gates ---- */
.gates{ display:flex; gap:12px; margin:10px 0; }
.gate{ flex:1; border:1px solid #d6dbe1; border-top:3px solid var(--navy); border-radius:4px; padding:12px 13px; background:#fbfbfc; }
.gate .n{ font-size:10.5px; letter-spacing:1.5px; color:var(--brass); font-weight:700; }
.gate .t{ font-size:14px; font-weight:800; color:var(--head); margin:3px 0 4px; }
.gate p{ font-size:12px; color:#48535f; line-height:1.55; }

/* ---- weights ---- */
.weights{ display:flex; gap:8px; margin:12px 0 2px; }
.wt{ flex:1; text-align:center; border:1px solid var(--line); border-radius:4px; padding:10px 4px; background:#f6f7f9; }
.wt .v{ font-size:26px; font-weight:900; color:var(--navy); line-height:1; }
.wt .l{ font-size:11px; color:#5b6775; margin-top:4px; }
.wt.lead-wt{ background:var(--navy); } .wt.lead-wt .v{ color:#fff; } .wt.lead-wt .l{ color:#cdd4dc; }

/* ---- cards ---- */
.card{ border:1px solid #d9dee3; border-radius:5px; padding:14px 16px 12px; margin:12px 0; }
.card.A{ border-left:5px solid var(--A); } .card.B{ border-left:5px solid var(--B); } .card.C{ border-left:5px solid var(--C); }
.card .top{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.card .name{ font-size:18px; font-weight:800; color:var(--head); }
.card .area{ font-size:12px; color:#6a7686; font-weight:600; }
.badge{ font-size:11px; font-weight:800; padding:2px 9px; border-radius:11px; color:#fff; white-space:nowrap; }
.badge.A{ background:var(--A); } .badge.B{ background:var(--B); } .badge.C{ background:var(--C); }
table.det{ width:100%; border-collapse:collapse; margin-top:8px; }
table.det td{ padding:4px 7px; vertical-align:top; border-bottom:1px solid #eef1f4; font-size:13px; }
table.det td.k{ width:15%; color:#5b6775; font-weight:700; white-space:nowrap; }
.src{ font-size:11.5px; color:#8a94a1; margin-top:6px; word-break:break-all; }

/* ---- grids (comparison / sim / phone) ---- */
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:8px 0; }
table.grid{ width:100%; min-width:660px; border-collapse:collapse; font-size:13px; }
table.grid th{ background:var(--navy); color:#fff; font-weight:700; padding:8px 6px; text-align:center; font-size:12.5px; }
table.grid td{ border:1px solid var(--line2); padding:7px 7px; text-align:center; }
table.grid td.l{ text-align:left; font-weight:700; color:var(--head); }
table.grid tr:nth-child(even) td{ background:#f7f8fa; }
.total{ font-weight:900; color:var(--navy); }
.mk{ font-weight:800; } .mk.cc{ color:var(--A); } .mk.oo{ color:#3a6a8a; } .mk.tt{ color:var(--B); }

/* ---- two-column panels ---- */
.twocol{ display:flex; gap:14px; }
.twocol > div{ flex:1; }
.panel{ border:1px solid var(--line2); border-radius:4px; padding:12px 14px; background:#fbfbfc; }
.panel h4{ font-size:14px; color:var(--navy); font-weight:800; margin-bottom:4px; }
.panel p{ font-size:12.5px; color:#48535f; }

/* ---- risk ---- */
.risk{ border:1px solid #e3cdb0; border-left:5px solid var(--B); background:#fbf6ee; border-radius:5px; padding:13px 16px; margin:10px 0; }
.risk h4{ font-size:14px; color:#8a5a16; font-weight:800; margin-bottom:4px; }
.risk table{ width:100%; border-collapse:collapse; margin-top:5px; }
.risk td{ padding:5px 7px; font-size:12.5px; border-bottom:1px solid #efe2cd; }
.risk td.k{ font-weight:700; color:var(--head); }

/* ---- checklist ---- */
.check{ border:1px solid #d6dbe1; border-radius:5px; padding:13px 16px; background:#fbfbfc; }
.check h4{ font-size:14px; color:var(--navy); font-weight:800; margin-bottom:6px; }
.check ul{ margin:0 0 0 18px; columns:2; column-gap:24px; }
.check li{ font-size:12.5px; color:#48535f; margin-bottom:5px; break-inside:avoid; }

/* ---- lists / footer ---- */
ul.tt{ margin:5px 0 0 18px; } ul.tt li{ font-size:12.5px; margin-bottom:4px; }
.foot{ margin-top:18px; border-top:1px solid #c9cfd6; padding-top:10px; font-size:11.5px; color:#7c8794; line-height:1.6; }

/* ---- toolbar / back-to-top (UI) ---- */
.toolbar{ position:sticky; top:0; z-index:20; background:rgba(35,50,68,.96); color:#fff; backdrop-filter:saturate(140%) blur(2px); }
.toolbar .in{ max-width:940px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:9px 18px; gap:12px; }
.toolbar .ttl{ font-size:12.5px; font-weight:700; letter-spacing:.4px; color:#e7ebf0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.toolbar button{ font:inherit; font-size:12.5px; font-weight:700; color:#233244; background:#fff; border:0; border-radius:6px; padding:7px 14px; cursor:pointer; white-space:nowrap; }
.toolbar button:hover{ background:#eef1f4; }
.toTop{ position:fixed; right:18px; bottom:18px; z-index:20; width:42px; height:42px; border:0; border-radius:50%; background:var(--navy); color:#fff; font-size:18px; cursor:pointer; opacity:0; pointer-events:none; transition:opacity .2s; box-shadow:0 3px 12px rgba(0,0,0,.25); }
.toTop.show{ opacity:1; pointer-events:auto; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:760px){
  body{ font-size:15px; }
  .sheet{ margin:0; padding:24px 16px 30px; border-radius:0; box-shadow:none; }
  .cover h1{ font-size:23px; }
  .sec h2{ font-size:17px; }
  .gates{ flex-direction:column; }
  .twocol{ flex-direction:column; }
  .weights{ flex-wrap:wrap; }
  .wt{ flex:1 1 30%; }
  .reco td.tag{ width:34%; }
  .check ul{ columns:1; }
  table.kv td.k, table.det td.k{ width:28%; }
}
@media (max-width:460px){
  .reco table, .reco tbody, .reco tr, .reco td{ display:block; width:auto; }
  .reco td.tag{ padding-bottom:0; border-bottom:0; }
  .reco td{ padding:3px 0; border-bottom:0; }
  .reco tr{ border-bottom:1px solid #e1e8e4; padding:6px 0; }
  .wt{ flex:1 1 45%; }
  .toolbar .ttl{ display:none; }
}

/* =========================================================
   PRINT  (A4)
   ========================================================= */
@media print{
  @page{ size:A4; margin:14mm 13mm 16mm; }
  body{ background:#fff; font-size:9.6px; }
  .sheet{ max-width:none; margin:0; padding:0; box-shadow:none; border-radius:0; }
  .toolbar, .toTop{ display:none !important; }
  .table-scroll{ overflow:visible; } table.grid{ min-width:0; }
  .card, .reco, .risk, .check, .gate, .panel{ break-inside:avoid; }
}