/* 申請書メーカー — 見た目は EDI に寄せず、まず読みやすさ優先 */

:root{
  --paper:#F2F1EC;
  --surface:#FFFFFF;
  --surface-2:#EDECE5;
  --ink:#1A1F24;
  --muted:#5C666F;
  --rule:#D8D7CE;
  --rule-strong:#B9B8AE;
  --accent:#0078C0;
  --accent-deep:#05496F;
  --accent-wash:#E6F2FA;
  --danger:#B4341F;
  --amber:#9A5A06;
  --f-body:"Noto Sans JP","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",Consolas,ui-monospace,monospace;
}

*{box-sizing:border-box}
html,body{height:100%}

/* ── PC専用 ──
   用紙を実寸で見ながら欄を置く画面なので、狭いと作業にならない。
   スマホ・小さいタブレットは案内だけ出して、中身を隠す。
   ★PCでウィンドウを狭めただけのときは案内を出さない(横スクロールで作業を続けられる)。 */
#too-narrow{display:none}

/* 未ログインの案内(中身は見せない) */
#login-gate{
  position:fixed; inset:0; z-index:10000;
  display:flex; align-items:center; justify-content:center;
  background:var(--paper); color:var(--ink);
  font-family:var(--f-body); text-align:center; padding:32px;
}
#login-gate > div{max-width:420px; line-height:1.9}
#login-gate p{margin:0 0 10px; font-size:13px; color:var(--muted)}
#login-gate .btn{text-decoration:none; display:inline-block; margin:0 4px}
html.embed #too-narrow{display:none !important}
html.embed body{min-width:0}

@media (max-width:820px){
  #too-narrow{
    display:flex; position:fixed; inset:0; z-index:9999;
    align-items:center; justify-content:center;
    background:var(--paper); color:var(--ink);
    font-family:var(--f-body); text-align:center; padding:32px;
  }
  #too-narrow > div{max-width:340px; line-height:1.9}
  .tn-title{font-size:18px; font-weight:700; margin:0 0 12px}
  #too-narrow p{margin:0 0 10px; font-size:13px; color:var(--muted)}
  .tn-note{font-size:11px !important}
  #topbar,#shell,#toast{display:none !important}
}

body{
  min-width:1000px;   /* 狭くしても中身は崩さず、横スクロールにする */
  margin:0;
  font-family:var(--f-body);
  font-size:13px;
  line-height:1.7;
  color:var(--ink);
  background:var(--paper);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

/* ── 上のバー ── */
#topbar{
  flex:0 0 auto;
  background:var(--surface);
  border-bottom:1px solid var(--rule);
  padding:10px 16px;
  display:flex;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
}
.brand{font-weight:700; font-size:15px; letter-spacing:.02em; white-space:nowrap}
.brand .ver{
  /* ★2026-09-01: <span> から <button> になった。ボタンの既定(フォント・背景・余白)を
     打ち消さないと、ヘッダの中でここだけ字が変わる。 */
  font:inherit;
  font-size:10px; font-weight:500; color:var(--muted);
  margin-left:8px; padding:2px 7px;
  border:1px solid var(--rule-strong); border-radius:2px;
  background:transparent; cursor:pointer; line-height:1.7;
}
.brand .ver:hover{border-color:var(--accent); color:var(--accent-deep)}
.brand .ver:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.tools{display:flex; align-items:center; gap:10px; flex-wrap:wrap; flex:1}
.spacer{flex:1}

.btn{
  font:inherit; font-size:12px;
  padding:6px 13px;
  border:1px solid var(--rule-strong);
  background:var(--surface);
  color:var(--ink);
  border-radius:2px;
  cursor:pointer;
  white-space:nowrap;
}
.btn:hover{border-color:var(--accent); color:var(--accent-deep)}
.btn:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.btn.primary{background:var(--accent); border-color:var(--accent); color:#fff; font-weight:700}
.btn.primary:hover{background:var(--accent-deep); color:#fff}
.btn.ghost{background:transparent}
.btn.danger{border-color:var(--danger); color:var(--danger)}
.btn.danger:hover{background:var(--danger); color:#fff}
.btn.file{display:inline-block}
.btn[disabled]{opacity:.45; cursor:not-allowed}

.seg{display:flex; border:1px solid var(--rule-strong); border-radius:2px; overflow:hidden}
.segbtn{
  font:inherit; font-size:12px;
  padding:6px 16px; border:none; background:var(--surface);
  color:var(--muted); cursor:pointer;
}
.segbtn.on{background:var(--accent); color:#fff; font-weight:700}
.segbtn:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}

.zoomer{display:flex; align-items:center; gap:4px}
.zoomer .btn{padding:4px 9px; font-size:14px; line-height:1; min-width:28px}

.pager{display:flex; align-items:center; gap:6px; font-variant-numeric:tabular-nums}
.pager .btn{padding:4px 10px; font-size:14px; line-height:1}
#page-label{font-size:12px; color:var(--muted); min-width:64px; text-align:center}

select,input[type=text],input[type=number]{
  font:inherit; font-size:12px;
  padding:5px 8px;
  border:1px solid var(--rule-strong);
  border-radius:2px;
  background:var(--surface);
  color:var(--ink);
  min-width:0;
}
select:focus,input:focus{outline:2px solid var(--accent); outline-offset:-1px}

/* ── 本体 ── */
#shell{flex:1; display:flex; min-height:0}

#stage{
  flex:1;
  overflow:auto;
  padding:24px;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  background:
    linear-gradient(var(--paper),var(--paper)) padding-box,
    repeating-linear-gradient(45deg,transparent 0 8px,rgba(0,0,0,.012) 8px 16px);
}
#empty{
  margin-top:12vh;
  max-width:420px;
  text-align:center;
  color:var(--muted);
}
.empty-title{font-size:16px; font-weight:700; color:var(--ink); margin:0 0 10px}
#empty p{margin:0 0 8px}

#paper{
  position:relative;
  box-shadow:0 1px 3px rgba(0,0,0,.14), 0 12px 40px rgba(0,0,0,.10);
  background:#fff;
  flex:0 0 auto;
}
#pdf-canvas{display:block}
#overlay{position:absolute; inset:0}
#overlay.placing{cursor:crosshair}

/* 見つけたチェック欄の候補。押すとそこに欄ができる。 */
.boxcand{
  position:absolute;
  border:1.5px dashed #6D4AA8;
  background:rgba(109,74,168,.12);
  cursor:pointer;
  z-index:4;
}
.boxcand:hover{background:rgba(109,74,168,.3); border-style:solid}
/* もうチェック欄が置いてある□。もう一度押すと消える。 */
.boxcand.has{border-color:var(--danger); border-style:solid; background:rgba(180,52,31,.10)}
.boxcand.has:hover{background:rgba(180,52,31,.28)}

/* ── 欄 ── */
.fld{
  position:absolute;
  border:1px solid rgba(0,120,192,.85);
  background:rgba(0,120,192,.07);
  cursor:move;
  overflow:hidden;
  display:flex;
  align-items:center;
  font-size:11px;
  color:var(--accent-deep);
  white-space:nowrap;
}
.fld.sel{
  border-color:var(--danger);
  background:rgba(180,52,31,.10);
  box-shadow:0 0 0 1px rgba(180,52,31,.35);
  z-index:5;
}
.fld .tag{
  position:absolute; top:-15px; left:-1px;
  font-size:9px; line-height:1.4;
  background:var(--accent); color:#fff;
  padding:0 5px; border-radius:2px 2px 0 0;
  pointer-events:none;
}
.fld.sel .tag{background:var(--danger)}
.fld .grip{
  position:absolute; right:-4px; bottom:-4px;
  width:9px; height:9px;
  background:var(--surface);
  border:1px solid var(--danger);
  cursor:nwse-resize;
}
.fld .val{
  padding:0 2px;
  width:100%;
  color:#101418;
  font-family:var(--f-body);
}
.fld .val.center{text-align:center}
.fld .val.right{text-align:right}
.fld .cells{display:flex; width:100%; height:100%; align-items:center}
.fld .c{
  display:flex; align-items:center; justify-content:center;
  color:#101418;
  flex:0 0 auto;
}
.fld .mark{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  color:#101418; font-weight:700;
}
/* 白で隠す欄 / 二重線で見え消しする欄。出力PDFと同じ見え方にする。 */
.fld.cover-box{background:#fff; border:1px dashed rgba(0,120,192,.5)}
#overlay.fill .fld.cover-box{background:#fff; border-color:transparent}
.fld.strike-box{background:transparent; border-color:transparent; position:absolute}
.fld.strike-box::before,.fld.strike-box::after{
  content:""; position:absolute; left:0; right:0; height:1px; background:#101418;
}
.fld.strike-box::before{top:calc(50% - 1.5px)}
.fld.strike-box::after{top:calc(50% + 1.5px)}

.fld.circle-on{
  border-radius:50%;
  border:1.6px solid #101418;
  background:transparent;
}

/* 入力モード: 紙の欄をそのまま押して打てる */
#overlay.fill .fld{cursor:text; border-color:rgba(0,120,192,.25); background:transparent}
#overlay.fill .fld:hover{background:rgba(0,120,192,.10); border-color:rgba(0,120,192,.6)}

/* 紙の上で直接打つときの入力欄 */
.inline-edit{
  position:absolute; z-index:20;
  box-shadow:0 2px 10px rgba(0,0,0,.22);
}
.inline-edit input{
  width:100%; height:100%;
  border:2px solid var(--accent);
  border-radius:2px;
  background:#fff; color:#101418;
  padding:0 4px;
  font-family:var(--f-body);
}
.inline-edit input:focus{outline:none}
.ie-tag{
  position:absolute; top:-16px; left:-2px;
  font-size:10px; line-height:1.5;
  background:var(--accent); color:#fff;
  padding:0 6px; border-radius:2px 2px 0 0;
  white-space:nowrap; pointer-events:none;
}
#overlay.fill .fld .tag,#overlay.fill .fld .grip{display:none}
#overlay.fill /* 白で隠す欄 / 二重線で見え消しする欄。出力PDFと同じ見え方にする。 */
.fld.cover-box{background:#fff; border:1px dashed rgba(0,120,192,.5)}
#overlay.fill .fld.cover-box{background:#fff; border-color:transparent}
.fld.strike-box{background:transparent; border-color:transparent; position:absolute}
.fld.strike-box::before,.fld.strike-box::after{
  content:""; position:absolute; left:0; right:0; height:1px; background:#101418;
}
.fld.strike-box::before{top:calc(50% - 1.5px)}
.fld.strike-box::after{top:calc(50% + 1.5px)}

.fld.circle-on{border-color:#101418}

/* ── 右パネル ── */
#panel{
  flex:0 0 322px;
  background:var(--surface);
  border-left:1px solid var(--rule);
  overflow-y:auto;
  padding:0 0 40px;
}
.block{padding:16px 18px; border-bottom:1px solid var(--rule)}
.block h2{
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); margin:0 0 12px; font-weight:700;
  display:flex; align-items:center; gap:8px;
}
.count{
  background:var(--surface-2); color:var(--muted);
  border-radius:9px; padding:0 7px; font-size:10px; letter-spacing:0;
}
.hint{color:var(--muted); font-size:12px; margin:0}
.hint.tiny{font-size:11px; margin-top:8px; line-height:1.6}

.banner{
  border:1px solid var(--accent);
  border-left:3px solid var(--accent);
  background:var(--accent-wash);
  color:var(--accent-deep);
  border-radius:2px;
  padding:9px 12px;
  margin-bottom:12px;
  font-size:12px;
  line-height:1.6;
}
.banner.warn{
  border-color:var(--amber);
  background:#F8F0E1;
  color:var(--amber);
}

.muni{display:flex; align-items:center; gap:7px; white-space:nowrap}
.muni > span{font-size:11px; color:var(--muted)}

.row{display:flex; align-items:center; gap:10px; margin-bottom:9px}
.row > span{flex:0 0 84px; font-size:12px; color:var(--muted)}
.row > select,.row > input{flex:1}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:9px}
.row4{display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-bottom:4px}
.row2 label,.row4 label{display:flex; flex-direction:column; gap:3px}
.row2 span,.row4 span{font-size:10.5px; color:var(--muted)}
.row4 input{padding:4px 5px; font-size:11px; font-variant-numeric:tabular-nums}

.btnrow{display:flex; gap:8px; margin-top:14px}
.btnrow .btn{flex:1}

#field-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px}
#field-list li{
  display:flex; align-items:center; gap:8px;
  padding:6px 8px;
  border:1px solid transparent;
  border-radius:2px;
  cursor:pointer;
  font-size:12px;
}
#field-list li:hover{background:var(--surface-2)}
#field-list li.on{background:var(--accent-wash); border-color:var(--accent)}
#field-list .pg{
  font-family:var(--f-mono); font-size:10px; color:var(--muted);
  border:1px solid var(--rule); border-radius:2px; padding:0 4px;
}
#field-list .kind{margin-left:auto; font-size:10px; color:var(--muted)}

#value-form label{display:block; margin-bottom:11px}
#value-form .lbl{
  display:flex; align-items:center; gap:6px;
  font-size:12px; margin-bottom:3px;
}
#value-form .src{
  font-size:9.5px; padding:0 5px; border-radius:2px;
  border:1px solid var(--rule-strong); color:var(--muted);
}
#value-form .src.edi{border-color:var(--accent); color:var(--accent-deep); background:var(--accent-wash)}
#value-form .src.fixed{border-color:var(--amber); color:var(--amber)}
#value-form .src.derived{border-color:#3F7A4B; color:#2F6139; background:#EDF5EE}
#value-form .src.license{border-color:#6D4AA8; color:#553A85; background:#F1ECF9}
#value-form input.ro{background:var(--surface-2); color:var(--muted); cursor:not-allowed}
/* 許認可マスタと違う値に直したもの。元が分かるように印を付ける。 */
#value-form input.edited{border-color:var(--amber); background:#FFFCF5}
#value-form input{width:100%}
#value-form .none{color:var(--muted); font-size:12px}

/* 複数選べるチェック。当てはまるものを全部押す。 */
.choices{display:flex; flex-wrap:wrap; gap:5px; padding-top:2px}
.chip-c{
  font:inherit; font-size:11.5px;
  padding:3px 10px;
  border:1px solid var(--rule-strong);
  background:var(--surface); color:var(--muted);
  border-radius:2px; cursor:pointer;
}
.chip-c:hover{border-color:var(--accent); color:var(--accent-deep)}
.chip-c.on{background:var(--accent); border-color:var(--accent); color:#fff; font-weight:700}
.chip-c.clr{border-style:dashed; color:var(--muted)}

/* ── 転記(オンライン申請へ写す) ── */
.copy-list{display:flex; flex-direction:column; gap:3px}
.copy-row{
  display:flex; align-items:center; gap:8px; width:100%;
  font:inherit; text-align:left;
  padding:6px 9px; border:1px solid var(--rule); border-radius:2px;
  background:var(--surface); cursor:pointer;
}
.copy-row:hover{border-color:var(--accent); background:var(--accent-wash)}
.copy-row .lb{flex:0 0 34%; font-size:11px; color:var(--muted); line-height:1.4}
.copy-row .vl{flex:1; font-size:12.5px; color:var(--ink); word-break:break-all; line-height:1.4}
.copy-row .ic{font-size:10px; color:var(--muted); white-space:nowrap}
.copy-row.done{border-color:#3F7A4B; background:#EDF5EE}
.copy-row.done .ic::after{content:"済"; color:#2F6139; font-weight:700}
.copy-row.done .ic{font-size:0}

/* ── 様式の管理 ── */
.cat-head{
  font-size:10.5px; font-weight:700; letter-spacing:.08em;
  color:var(--accent-deep); background:var(--accent-wash);
  border-left:3px solid var(--accent);
  padding:3px 8px; margin:10px 0 5px;
}
.cat-head:first-child{margin-top:0}
.form-row{border:1px solid var(--rule); border-radius:2px; padding:9px 11px; margin-bottom:7px; background:var(--surface)}
.form-row .top{display:flex; align-items:center; gap:7px; margin-bottom:3px}
.form-row .nm{font-size:12.5px; font-weight:700; flex:1; line-height:1.4}
.form-row .st{font-size:10px; font-weight:700; padding:1px 7px; border:1px solid var(--accent); color:var(--accent-deep); background:var(--accent-wash); border-radius:2px}
.form-row .meta{font-size:10.5px; color:var(--muted); line-height:1.7}
.form-row .acts{display:flex; gap:5px; margin-top:7px; flex-wrap:wrap}
.form-row .acts .btn{padding:3px 9px; font-size:11px}

/* ── 図面を綴じる ── */
.attach-list{display:flex; flex-direction:column; gap:3px}
.attach-row{
  display:flex; align-items:center; gap:8px;
  padding:5px 8px; border:1px solid var(--rule); border-radius:2px;
  background:var(--surface); font-size:12px; cursor:pointer;
}
.attach-row:hover{border-color:var(--accent)}
.attach-row input{width:auto; min-width:0}
.attach-row .nm{flex:1; word-break:break-all; line-height:1.4}
.attach-row .sz{font-size:10.5px; color:var(--muted); white-space:nowrap}

/* ── 申請の記録 ── */
.app-row{
  border:1px solid var(--rule); border-radius:2px;
  padding:9px 11px; margin-bottom:7px; background:var(--surface);
}
.app-row .top{display:flex; align-items:center; gap:7px; margin-bottom:4px}
.app-row .nm{font-size:12.5px; font-weight:700; flex:1; line-height:1.4}
.app-row .meta{font-size:10.5px; color:var(--muted); line-height:1.6}
.app-row .acts{display:flex; gap:5px; margin-top:7px; flex-wrap:wrap}
.app-row .acts .btn{padding:3px 9px; font-size:11px}
.app-row.now{border-color:var(--accent); background:var(--accent-wash)}
.st{
  font-size:10px; font-weight:700; padding:1px 7px; border-radius:2px;
  border:1px solid var(--rule-strong); color:var(--muted); white-space:nowrap;
}
.st.作成中{border-color:var(--rule-strong); color:var(--muted)}
.st.提出済{border-color:var(--accent); color:var(--accent-deep); background:var(--accent-wash)}
.st.受理{border-color:#3F7A4B; color:#2F6139; background:#EDF5EE}
.st.却下{border-color:var(--danger); color:var(--danger); background:#FBEEEC}

/* ── お知らせ ── */
#toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
  background:var(--ink); color:#fff;
  padding:9px 18px; border-radius:3px;
  font-size:12.5px; z-index:100;
  box-shadow:0 6px 24px rgba(0,0,0,.25);
  max-width:80vw;
}
#toast.err{background:var(--danger)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ── このアプリについて ──
   ヘッダのバッジ(旧「試作 v0.1」)から開く小窓。
   IPAフォントライセンス v1.0 の表記を出すのが本来の目的。 */
#about{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  background:rgba(26,31,36,.45); padding:24px;
}
/* ★★これが無いと開きっぱなしになる。
   hidden の display:none は**ブラウザ既定**の弱い指定なので、
   すぐ上の display:flex に負ける。#too-narrow は既定が display:none
   なので同じ問題が出ておらず、真似すると踏む。 */
#about[hidden]{display:none}
.about-card{
  background:var(--surface); color:var(--ink);
  border:1px solid var(--rule-strong); border-radius:3px;
  width:100%; max-width:640px; max-height:86vh; overflow-y:auto;
  padding:20px 24px; box-shadow:0 10px 40px rgba(0,0,0,.28);
}
.about-card h2{font-size:15px; margin:0 0 10px}
.about-card h3{font-size:12.5px; margin:18px 0 6px; color:var(--accent-deep)}
.ab-lead{margin:0 0 12px; font-size:12.5px; line-height:1.9}
.ab-dl{display:grid; grid-template-columns:max-content 1fr; gap:2px 14px; margin:0; font-size:12px}
.ab-dl dt{color:var(--muted); white-space:nowrap}
.ab-dl dd{margin:0; word-break:break-all}
.ab-font{
  margin:0 0 9px; padding:9px 12px; font-size:11.5px; line-height:1.85;
  background:var(--surface-2); border:1px solid var(--rule); border-radius:2px;
  word-break:break-word;
}
.ab-ul{margin:0 0 12px; padding-left:1.25em; font-size:11.5px; line-height:1.85; color:var(--muted)}
.ab-links{margin:0 0 10px; font-size:12px; display:flex; flex-wrap:wrap; gap:16px}
.ab-links a{color:var(--accent-deep)}
.ab-links a[hidden]{display:none}
.ab-fine{margin:0; font-size:10.5px; line-height:1.75; color:var(--muted)}
.ab-foot{display:flex; justify-content:flex-end; margin-top:16px}