@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700&family=Zen+Old+Mincho:wght@500;600&display=swap');

/* === デザイントークン(CSS変数) ===
   Laravel移行時: このファイルを resources/css/tayasu.css にそのまま配置し、
   app.css で @import するだけ。クラス名・変数名は不変。 */
:root{
  --c-cream:#FBF8F3;   /* ページ背景 */
  --c-sand:#F1EBDF;    /* 面・hover */
  --c-card:#FFFFFF;    /* カード */
  --c-ink:#36302A;     /* 本文 */
  --c-muted:#736B5C;   /* 補助テキスト(コントラスト確保) */
  --c-sage:#7C8A6A;    /* アクセント */
  --c-sage-d:#5E6B4F;  /* 濃いアクセント・見出し */
  --c-sage-bg:#EEF1E8; /* アクセント淡背景 */
  --c-line:#E6DECF;    /* 罫線 */
  --c-clay:#B98D6F;
  --c-danger:#B6553F;
  --c-ok:#6E8A5E;
  --font-sans:'Zen Kaku Gothic New',system-ui,sans-serif;
  --font-serif:'Zen Old Mincho',serif;
}
body{font-family:var(--font-sans);font-weight:400;color:var(--c-ink);-webkit-font-smoothing:auto;letter-spacing:.01em;}
.font-serif-jp{font-family:var(--font-serif);font-weight:500;}

/* === コンポーネントクラス ===
   Laravel移行時: @layer components で @apply 化、または Blade component 化 */
.btn{display:inline-flex;align-items:center;gap:.45rem;font-size:13px;padding:.5rem .95rem;border-radius:.6rem;border:1px solid var(--c-sage);color:var(--c-sage-d);background:#fff;cursor:pointer;transition:.15s;white-space:nowrap;}
.btn:hover{background:var(--c-sage-bg);}
.btn-primary{background:var(--c-sage);color:#fff;border-color:var(--c-sage);}
.btn-primary:hover{background:var(--c-sage-d);}
.btn-ghost{border-color:transparent;color:var(--c-muted);}
.btn-ghost:hover{background:var(--c-sand);}
.btn-danger{border-color:var(--c-danger);color:var(--c-danger);}
.btn-danger:hover{background:#F6ECE8;}
.card{background:var(--c-card);border:1px solid var(--c-line);border-radius:.9rem;}
.input,.select,.textarea{width:100%;font-size:14px;padding:.5rem .7rem;border:1px solid var(--c-line);border-radius:.6rem;background:#fff;color:var(--c-ink);font-family:inherit;}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--c-sage);box-shadow:0 0 0 3px var(--c-sage-bg);}
.label{font-size:12.5px;color:var(--c-muted);margin-bottom:.35rem;display:block;}
.badge{font-size:11px;padding:2px 9px;border-radius:999px;display:inline-block;}
.badge-sage{background:var(--c-sage-bg);color:var(--c-sage-d);}
.badge-sand{background:var(--c-sand);color:var(--c-muted);}
.badge-ok{background:#E6EFDE;color:#4F6B3E;}
.badge-warn{background:#F6EEDC;color:#8A6B2E;}
.chip{font-size:12.5px;padding:5px 14px;border-radius:999px;border:1px solid var(--c-line);color:var(--c-muted);background:#fff;cursor:pointer;transition:.12s;}
.chip-on{background:var(--c-sage);color:#fff;border-color:var(--c-sage);}
.tab{font-size:13.5px;padding:.6rem .2rem;margin-right:1.4rem;color:var(--c-muted);border-bottom:2px solid transparent;cursor:pointer;}
.tab-on{color:var(--c-sage-d);border-bottom-color:var(--c-sage);}
.th{font-size:12px;color:var(--c-muted);font-weight:400;text-align:left;padding:.7rem 1rem;}
.td{font-size:13.5px;padding:.85rem 1rem;border-top:1px solid var(--c-line);}

[x-cloak]{display:none!important;}

/* レスポンシブ: 横長テーブルはモバイルで横スクロール
   Laravel移行時もそのまま有効。table.w-full を共通の作法とする。 */
@media (max-width:768px){
  table.w-full{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;}
}

@media print{
  .no-print{display:none!important;}
  body{background:#fff;}
  .card{border-color:#ccc;}
}