/* parts.css -- 共通UI部品 v1 (doc_id=82 部品・データ・連携規約 §1)
   色・フォント・角丸・影・余白の実値はここと skins/*.css だけに置く。
   テンプレ側(index.html / js/app.js)は var(--token) しか使わない。 */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--text);font-family:var(--font);
  font-size:var(--fs-2);line-height:1.7;
}
h1,h2,h3{font-weight:var(--fw-bold);margin:0 0 var(--sp-2)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.num{text-align:right;font-variant-numeric:tabular-nums}

/* 1. ボタン .btn */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface);
  color:var(--text);font:inherit;font-weight:var(--fw-bold);cursor:pointer;
  padding:var(--sp-2) var(--sp-4);text-decoration:none;line-height:1.4;
}
.btn:hover{filter:brightness(0.97)}
.btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.btn-primary{background:var(--primary);color:var(--on-primary);border-color:var(--primary);box-shadow:var(--sh-1)}
.btn-ghost{background:transparent;color:var(--text-sub);border-color:var(--border)}
.btn-danger{background:var(--danger);color:var(--on-primary);border-color:var(--danger)}
.btn[disabled]{opacity:.5;cursor:not-allowed;pointer-events:none}
.btn.is-loading{position:relative;color:transparent;pointer-events:none}
.btn.is-loading::after{
  content:"";position:absolute;width:1em;height:1em;border-radius:var(--r-pill);
  border:2px solid currentColor;border-top-color:transparent;color:var(--text);
  animation:btn-spin .7s linear infinite;
}
@keyframes btn-spin{to{transform:rotate(360deg)}}

/* 2. 入力 .field / .input */
.field{display:block;margin-bottom:var(--sp-3)}
.field>label{display:block;font-size:var(--fs-1);color:var(--text-sub);margin-bottom:var(--sp-1)}
.input,.select,textarea.input{
  display:block;width:100%;border:1px solid var(--border);border-radius:var(--r-sm);
  background:var(--surface);color:var(--text);font:inherit;padding:var(--sp-2) var(--sp-3);
}
textarea.input{resize:vertical;min-height:5em}
.input:focus,.select:focus{outline:2px solid var(--focus);outline-offset:1px;border-color:var(--primary)}
.input[disabled],.select[disabled],.input[readonly]{opacity:.6}
.field.is-invalid .input,.field.is-invalid .select{border-color:var(--danger)}
.field-msg{display:block;margin-top:var(--sp-1);font-size:var(--fs-1);color:var(--danger)}

/* 3. 選択 .select / .checkbox / .radio */
.select{appearance:auto}
.checkbox,.radio{display:inline-flex;align-items:center;gap:var(--sp-1);font-size:var(--fs-2);cursor:pointer}
.checkbox input,.radio input{accent-color:var(--primary)}

/* 4. 表 .table */
.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-md)}
.table{width:100%;border-collapse:collapse;font-size:var(--fs-2);min-width:40em}
.table th,.table td{padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--border);text-align:left;white-space:nowrap}
.table thead th{
  background:var(--surface);color:var(--text-sub);font-weight:var(--fw-bold);
  position:sticky;top:0;cursor:pointer;user-select:none;
}
.table.table-sticky thead th{top:0}
.table tbody tr:hover{background:color-mix(in srgb, var(--primary) 6%, var(--surface))}
.table th.is-sorted::after{content:" ▾";color:var(--text-sub)}
.table th.is-sorted.is-desc::after{content:" ▴"}

/* 5. カード .card */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(11em,1fr));gap:var(--sp-3)}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--sp-4);box-shadow:var(--sh-1)}
.card-k{display:block;font-size:var(--fs-1);color:var(--text-sub)}
.card-v{display:block;font-size:var(--fs-3);font-weight:var(--fw-bold);margin-top:var(--sp-1)}

/* 6. ナビ .nav */
.nav{display:flex;gap:var(--sp-1);overflow-x:auto;border-bottom:1px solid var(--border)}
.nav.nav-side{flex-direction:column;border-bottom:0;border-right:1px solid var(--border)}
.nav-item{
  flex:0 0 auto;padding:var(--sp-2) var(--sp-4);color:var(--text-sub);text-decoration:none;
  border:0;background:transparent;font:inherit;cursor:pointer;border-bottom:2px solid transparent;
}
.nav-item.on{color:var(--primary);border-bottom-color:var(--primary);font-weight:var(--fw-bold)}

/* 7. モーダル .modal */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:var(--sp-3);background:color-mix(in srgb, var(--text) 55%, transparent);z-index:50}
.modal.on{display:flex}
.modal-box{width:100%;max-width:32em;max-height:88vh;overflow:auto;background:var(--surface);border-radius:var(--r-md);box-shadow:var(--sh-2)}
.modal-head,.modal-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--border)}
.modal-foot{border-bottom:0;border-top:1px solid var(--border)}
.modal-body{padding:var(--sp-4)}

/* 8. トースト .toast */
.toast-wrap{position:fixed;right:var(--sp-3);bottom:var(--sp-3);display:flex;flex-direction:column;gap:var(--sp-2);z-index:60}
.toast{
  background:var(--surface);color:var(--text);border:1px solid var(--border);border-left-width:4px;
  border-radius:var(--r-sm);padding:var(--sp-3) var(--sp-4);box-shadow:var(--sh-2);
  display:flex;align-items:center;gap:var(--sp-3);min-width:14em;
}
.toast-ok{border-left-color:var(--ok)}
.toast-warn{border-left-color:var(--warn)}
.toast-danger{border-left-color:var(--danger)}
.toast button{background:transparent;border:0;color:var(--text-sub);cursor:pointer;font:inherit}

/* 9. 空状態 .empty */
.empty{text-align:center;padding:var(--sp-4);color:var(--text-sub)}
.empty-title{color:var(--text);font-weight:var(--fw-bold);margin-bottom:var(--sp-1)}
.empty-desc{margin-bottom:var(--sp-3)}

/* 補助: タグ・バー */
.tag{display:inline-block;padding:0 var(--sp-2);border-radius:var(--r-pill);font-size:var(--fs-1);border:1px solid var(--border);color:var(--text-sub)}
.tag-ok{color:var(--ok);border-color:var(--ok)}
.tag-warn{color:var(--warn);border-color:var(--warn)}
.tag-danger{color:var(--danger);border-color:var(--danger)}
.tag-mute{color:var(--text-sub)}
.bar{height:.5em;border-radius:var(--r-pill);background:var(--border);overflow:hidden}
.bar>span{display:block;height:100%;background:var(--primary)}

/* レイアウト補助(構造のみ・色フォント値は持たない) */
.app-header{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);background:var(--surface);border-bottom:1px solid var(--border)}
.app-title{font-size:var(--fs-3);font-weight:var(--fw-bold)}
.app-main{max-width:64em;margin:0 auto;padding:var(--sp-4)}
.toolbar{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;margin-bottom:var(--sp-3)}
.toolbar .input,.toolbar .select{width:auto;min-width:10em}
.grow{flex:1 1 auto}
.stack{display:flex;flex-direction:column;gap:var(--sp-3)}
.row{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.muted{color:var(--text-sub)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--sp-3)}
.form-grid .field.full{grid-column:1 / -1}
@media (max-width: 40em){.form-grid{grid-template-columns:1fr}.app-main{padding:var(--sp-3)}}