/* 仕事・学習・暮らし系ツール(旧 toolsite Stage16 由来)用の部品。
   すべて .s16app の中だけに効かせ、cresd 共通の base.css / site.css の見た目(色・枠・ボタン)に合わせています。 */
.s16app{--accent:var(--blue);--accent-h:var(--blue);--text:var(--ink);--soft:var(--bbg);--warn:var(--acc)}
.s16app .card{margin:0 0 18px}
.s16app .card:last-child{margin-bottom:0}
.s16app .card h2{margin:0 0 .8em;padding:0;border:0;font-size:1.05rem}
.s16app .card h3{margin:1.2em 0 .5em;font-size:.98rem}
/* フォーム */
.s16app label{display:block;margin:12px 0 5px;font-weight:700;font-size:.92rem}
.s16app label:first-child{margin-top:0}
.s16app .chk{display:flex;align-items:center;gap:8px;margin:8px 0;font-weight:400}
.s16app .chk input,.s16app input[type=checkbox],.s16app input[type=radio]{width:auto;flex:none;box-shadow:none}
.s16app input[type=range]{padding:0;box-shadow:none;background:none}
.s16app input[type=color]{height:42px;padding:3px;cursor:pointer}
.s16app textarea{min-height:140px;font:.88rem/1.6 ui-monospace,Menlo,Consolas,"BIZ UDGothic",monospace}
.s16app .row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;align-items:start}
.s16app .btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.s16app .btns button,.s16app .btns .btn{margin-top:0}
.s16app button:disabled{opacity:.5;cursor:not-allowed;filter:none}
.s16app button.ghost{background:var(--panel);color:var(--ink);border-color:var(--edge)}
.s16app .btn{display:inline-block;font-weight:700;padding:9px 18px;border:1px solid #b88a00;border-bottom-width:3px;border-radius:5px;background:var(--amber);color:#1e262d;text-decoration:none}
.s16app .btn:hover{filter:brightness(1.06)}
.s16app .mini{margin:0;padding:3px 9px;font-size:.82rem;border-bottom-width:2px}
.s16app td button,.s16app li button,.s16app .th button{margin-top:0}
/* 結果: 数値だけの結果は cresd の「計器の表示部」と同じ見た目にする */
.s16app .result{margin-top:14px;padding:14px 16px;border:1px solid var(--line);border-left:5px solid var(--amber);border-radius:6px;background:var(--field);overflow-wrap:anywhere}
.s16app .result:has(>.big,>.kv){background:var(--readout);border:1px solid var(--ro-line);border-bottom:3px solid #000;color:var(--ro-sub)}
.s16app .result .big{margin:0 0 6px;font-size:clamp(1.6rem,5vw,2.3rem);font-weight:800;line-height:1.25;font-variant-numeric:tabular-nums;word-break:break-all}
.s16app .result:has(>.big,>.kv) .big{color:var(--ro-ink)}
.s16app .kv{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px dashed var(--line);font-variant-numeric:tabular-nums}
.s16app .kv:last-child{border-bottom:0}
.s16app .kv span:first-child{color:var(--mute)}
.s16app .result:has(>.big,>.kv) .kv{border-bottom:0;border-top:1px solid var(--ro-line);color:#fff}
.s16app .result:has(>.big,>.kv) .kv span:first-child{color:var(--ro-sub)}
.s16app .result:has(>.big,>.kv) .kv .big{font-size:1.15rem;color:var(--ro-ink)}
.s16app .result:has(>.big,>.kv) .err,.s16app .result:has(>.big,>.kv) .ng{color:#ff9d94;background:none}
.s16app .result:has(>.big,>.kv) .ok{color:#7ee2a8;background:none}
.s16app .result:has(>.big,>.kv) .mid{color:#ffd45e;background:none}
.s16app .result:has(>.big,>.kv) .note,.s16app .result:has(>.big,>.kv) .warnbox{color:var(--ro-sub)}
.s16app .result:has(>.big,>.kv) table{color:#fff}
.s16app .result:has(>.big,>.kv) th{background:#0f161c;color:#fff}
.s16app .result:has(>.big,>.kv) th,.s16app .result:has(>.big,>.kv) td{border-color:var(--ro-line)}
.s16app .note{margin:10px 0 0;color:var(--mute);font-size:.88rem}
.s16app .err{min-height:0;margin:8px 0 0;font-weight:400;font-size:.9rem}
.s16app .warnbox{margin:8px 0 0;font-size:.88rem;color:var(--acc)}
.s16app .ok,.s16app .ng,.s16app .mid{border-radius:3px}
.s16app .ok{background:color-mix(in srgb,var(--ok) 22%,var(--panel))}
.s16app .ng{background:color-mix(in srgb,var(--bad) 22%,var(--panel))}
.s16app .mid{background:color-mix(in srgb,var(--amber) 38%,var(--panel))}
.s16app .pill{display:inline-block;padding:1px 10px;border:1px solid var(--line);border-radius:99px;background:var(--field);font-size:.8rem}
.s16app .timer,.s16app .draw{padding:14px 12px;border-radius:6px;background:var(--readout);border-bottom:3px solid #000;color:var(--ro-ink);text-align:center;font-weight:800;font-variant-numeric:tabular-nums}
.s16app .timer{margin:8px 0;font-size:clamp(2.6rem,13vw,4.2rem);line-height:1.2}
.s16app .draw{min-height:90px;font-size:clamp(1.5rem,6vw,2.1rem);word-break:break-all}
/* 表 */
.s16app table{font-size:.9rem}
/* 共通UIは表を display:block(横スクロール)にするが、枠(overflow付き)の中の表は通常の表として広げる */
.s16app .tblwrap table,.s16app .paper table,.s16app .sheetwrap table,.s16app .printarea table{display:table;max-width:none;overflow:visible}
.s16app table.t{max-height:none;margin:0;padding:0;overflow:visible;border:0;border-radius:0;background:none;font:inherit;font-size:.9rem;tab-size:initial;line-height:1.6}
.s16app table.t th,.s16app table.t td{vertical-align:top}
.s16app .tblwrap{max-height:60vh;overflow:auto;border:1px solid var(--line);border-radius:6px}
.s16app table.ed{min-width:100%;font-size:.85rem}
.s16app table.ed th,.s16app table.ed td{min-width:80px;padding:0;border:1px solid var(--line)}
.s16app table.ed th{position:sticky;top:0;z-index:1;padding:4px 6px;background:var(--field);white-space:nowrap;cursor:pointer}
.s16app table.ed td input,.s16app table.ed td select{width:100%;padding:4px 6px;border:0;border-radius:0;background:transparent;box-shadow:none;font:inherit}
.s16app table.ed td.rn{min-width:40px;padding:2px 6px;background:var(--field);color:var(--mute);text-align:center}
.s16app table.items{width:100%;border-collapse:collapse}
.s16app table.items td{padding:3px 3px 3px 0;border:0}
.s16app table.items input,.s16app table.items select{padding:6px}
.s16app .hm td{min-width:34px;padding:2px;font-size:.75rem;text-align:center}
/* ファイル読み込み */
.s16app .dz{position:relative;padding:28px 12px;border:2px dashed var(--edge);border-radius:6px;background:var(--field);color:var(--mute);text-align:center;cursor:pointer}
.s16app .dz.on{border-color:var(--amber);background:var(--accbg);color:var(--ink)}
.s16app .dz input{position:absolute;inset:0;width:100%;height:100%;padding:0;opacity:0;cursor:pointer}
.s16app .flist{margin:12px 0 0;padding:0;list-style:none}
.s16app .flist li{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--line);font-size:.9rem}
.s16app .flist .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.s16app .flist .meta{color:var(--mute);font-size:.78rem;white-space:nowrap}
.s16app .thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;margin-top:12px}
.s16app .th{position:relative;padding:6px;border:2px solid var(--line);border-radius:6px;background:var(--field);text-align:center;font-size:.78rem;cursor:pointer;user-select:none}
.s16app .th.sel{border-color:var(--amber);background:var(--accbg)}
.s16app .th.del{opacity:.35}
.s16app .th canvas,.s16app .th img{display:block;max-width:100%;height:auto;margin:0 auto 4px;background:#fff;transition:transform .15s}
.s16app .th .tb{display:flex;justify-content:center;gap:3px;margin-top:4px}
.s16app .th .tb button{padding:1px 6px;font-size:.78rem}
.s16app .prog{height:8px;margin-top:10px;border-radius:4px;background:var(--line);overflow:hidden}
.s16app .prog div{width:0;height:8px;background:var(--amber);transition:width .15s}
.s16app canvas{max-width:100%}
/* 棒グラフ(行) */
.s16app .bar{display:flex;align-items:center;gap:8px;margin:3px 0;font-size:.82rem}
.s16app .bar .l{width:30%;min-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.s16app .bar .b{min-width:1px;height:16px;border-radius:3px;background:var(--amber)}
.s16app .bar .v{color:var(--mute);white-space:nowrap}
.s16app ins{background:color-mix(in srgb,var(--ok) 25%,var(--panel));text-decoration:none}
.s16app del{background:color-mix(in srgb,var(--bad) 25%,var(--panel))}
/* 帳票・印刷物(紙の見た目は常に白地) */
.s16app .printarea{overflow-x:auto}
.s16app .sheetwrap{padding:28px 24px;border:1px solid var(--line);border-radius:6px;background:#fff;color:#111;overflow:auto}
.s16app #sheet{min-width:560px;background:#fff;color:#111;font-size:13px;line-height:1.6}
.s16app #sheet h2{flex:1;margin:0;padding:0;border:0;color:#111;font-size:24px;letter-spacing:.5em;text-align:center}
.s16app .sh-h{display:flex;align-items:flex-start;gap:8px;margin-bottom:12px;padding-bottom:6px;border-bottom:2px solid #111}
.s16app .sh-meta{font-size:12px;text-align:right;white-space:nowrap}
.s16app .sh-top{display:flex;justify-content:space-between;gap:16px;margin-bottom:12px}
.s16app .sh-to{flex:1}
.s16app .sh-toname{display:inline-block;min-width:60%;margin-bottom:6px;border-bottom:1px solid #111;font-size:18px}
.s16app .sh-from{width:42%;font-size:12px}
.s16app .sh-note{margin:4px 0;color:#444;font-size:12px}
.s16app .sh-note2{margin:8px 0 14px;font-size:13px}
.s16app .sh-amount{display:flex;align-items:baseline;gap:16px;margin:10px 0 14px;padding:6px 12px;border:2px solid #111}
.s16app .sh-amount b{margin-left:auto;font-size:24px}
.s16app .sh-t{width:100%;margin-bottom:8px;border-collapse:collapse}
.s16app .sh-t th,.s16app .sh-t td{padding:4px 8px;border:1px solid #888;color:#111}
.s16app .sh-t th{background:#eee}
.s16app .sh-t td.r{text-align:right}
.s16app .sh-s{min-width:55%;margin-left:auto;border-collapse:collapse}
.s16app .sh-s td{padding:3px 8px;border:1px solid #888;color:#111}
.s16app .sh-s td:last-child{text-align:right}
.s16app .sh-s tr.tt td{background:#eee;font-size:15px;font-weight:700}
.s16app .sh-box{margin-top:12px;padding:6px 10px;border:1px solid #888;font-size:12px}
.s16app .sh-stamp{width:90px;height:70px;margin-top:12px;padding-top:20px;border:1px dashed #888;color:#666;font-size:11px;text-align:center}
.s16app .paper{max-width:794px;margin:0 auto;padding:28px 30px;border:1px solid var(--line);border-radius:4px;background:#fff;color:#111;overflow-x:auto;font:13px/1.6 "Hiragino Mincho ProN","Noto Serif JP","Yu Mincho",serif}
.s16app .paper h2{margin:0 0 16px;padding:0;border:0;color:#111;font-size:24px;letter-spacing:.5em;text-align:center}
.s16app .paper table{width:100%;border-collapse:collapse}
.s16app .paper th,.s16app .paper td{padding:4px 6px;border:1px solid #333;color:#111}
.s16app .paper th{background:#eee;font-weight:600}
.s16app .paper td.r,.s16app .paper th.r{text-align:right}
.s16app .paper .meta2{display:flex;justify-content:space-between;gap:16px;margin-bottom:12px}
.s16app .paper .to{display:inline-block;min-width:240px;padding-bottom:2px;border-bottom:1px solid #111;font-size:16px}
.s16app .paper .tot{display:inline-block;margin:8px 0;padding:6px 12px;border:2px solid #111;font-size:18px;font-weight:700}
.s16app .paper .sm{color:#444;font-size:11px}
.s16app .paper pre{margin:4px 0;font:inherit;white-space:pre-wrap}
/* 印刷: 帳票・配布物だけを出す(ヘッダー・フッター・説明文・広告は出さない) */
@media print{
  body{background:#fff!important}
  .plate,footer,.ad,.nx-bar,.nx-skip,.noprint{display:none!important}
  main{max-width:none;padding:0}
  main>*:not(.s16app){display:none!important}
  .s16app:has(>.sheetwrap) .card{display:none!important}
  .s16app .sheetwrap{display:block!important;padding:0;border:0}
  .s16app #sheet{min-width:0}
  main>.s16app>*:not(.printarea):not(#app){display:none!important}
  .s16app #app>*:not(.printarea){display:none!important}
  .s16app .printarea{display:block!important}
  .s16app .paper{max-width:none;padding:0;border:0;border-radius:0}
  .pagebreak{page-break-after:always}
  @page{size:A4;margin:14mm}
}