:root { 
  --w-type: 80px;
  --w-m:   65px;
  --w-x:   20px;
  --w-t:   40px;
  --w-set: 40px;
  --w-cycle: 60px;
  --w-style: 90px;
  --w-desc: 300px;
  --w-tt:  70px;
  --w-td:  70px;
  --w-system: 50px;
  --w-actions: 60px;

  --row-padding:0px;
  --input-height:38px;
  --input-padding:4px;
  --font-size:15px;

  --total-font-size: 20px;
  --total-row-padding: 10px;
  --total-line-height: 1.4;
  

  --bd:#d0d7de; --bg:#fff; --muted:#6b7280; }

body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans JP", sans-serif;
  margin: 16px;
  background: #fafafa;
}

.howto{
  background:#f6fbfc;
  border: 1px solid #decff2;
  padding: 8px 16px;
  margin-bottom:12px;
  border-radius:8px;
}
.howto h2{
  font-size:18px;
  margin:0 0 4px 0;
}
.howto ol{
  padding-left :18px;
  font-size: 16px;
  margin: 0;
}

.howto ol li{
  margin-bottom: 2px;
}
.howto .note{
  font-size:14px;
  color:#555;
  margin-top:4px;
}

.wrap {
  max-width: 1100px;
  margin: 0 auto;
  background: var(--bg);
  border: 1px solid var(--bd);
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 1px 10px rgba(0,0,0,.04);
}

header {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:end;
  justify-content:space-between;
  margin-bottom: 12px;
}

.left {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:end;
}

label {
  display:block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 4px;
}

input, button { font: inherit; }

input[type="text"], input[type="date"]{
  border:1px solid var(--bd);
  border-radius: 10px;
  padding: 8px 10px;
  background:#fff;
}

input.small { width: 78px; }
input.cycle { width: 92px; }
input.desc { width: 100%; }
.title { width: 320px; }

button{
  border:1px solid var(--bd);
  background:#fff;
  border-radius: 10px;
  padding: 8px 10px;
  cursor:pointer;
}

button:hover{ background:#f5f5f5; }

.tools{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}

.badge {
  display:inline-block;
  padding: 3px 8px;
  border:1px solid var(--bd);
  border-radius: 999px;
  font-size: 12px;
  background:#fff;
}

/* ✅ 枠からはみ出ない（横スクロール） */
.tableWrap{
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  border-radius: 12px;
}

/* table */
table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
}

th, td {
  border:1px solid var(--bd);
  padding: 6px;
  vertical-align: middle;
  padding-top: var(--row-padding);
  padding-bottom: var(--row-padding);
  font-size: var(--font-size);

}

th {
  background:#f3f4f6;
  font-size: 15px;
  text-align:center;
}

td { background:#fff; }

td.center { text-align:center; }
td.right { text-align:right; }

.xcol {
  width: 18px;
  text-align:center;
  color: var(--muted);
  background:#fbfbfb;
}

.type { width: 120px; }
.style { width: 70px; }
.system { width: 120px;}
.tot { width: 90px; background:#fbfbfb; }


.rowActions {
  font-size: 10px;
  width: 70px;
  text-align:center;
  background:#fbfbfb;
}

tfoot td {
  font-weight: 700;
  background:#f9fafb;
  font-size: var(--total-font-size);
  font-weight: 700;
  padding-top:var(--total-row-padding);
  line-height:var(--total-line-height);
  background: #f9fafb;
}

/* 表の下に独立した total バー */
.totalBar{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;

  padding: 10px 14px;
  border-top: 1px solid #cfd8e3;
  background: #f6f8fb;

  /* 角丸で「別枠」感 */
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
}

.totalLabel{
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.5px;
}

.totalBox{
  background: #fff;
  border: 2px solid #cfd8e3;
  border-radius: 10px;
  padding: 6px 14px;
  min-width: 90px;
  text-align: center;
  font-weight: 800;
  font-size: 16px;
  white-space: nowrap;
}


/* ✅ inputがセルからはみ出さない */
td input{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  height: var(--input-height);
  padding-top: var(--input-padding);
  padding-bottom: var(--input-padding);
  line-height: 1.2;
}

.hint {
  color: var(--muted);
  font-size: 12px;
  margin-top: 8px;
}

.td.tot{
  line-height:var(--input-height);
}

/* ===== 列幅をCSS変数に連動（ここを追加）===== */
th.type { width: var(--w-type); }
.xcol  { width: var(--w-x); }

/* 列の順番に合わせて幅を指定（ヘッダー基準） */
th:nth-child(2)  { width: var(--w-m); }     /* m */
th:nth-child(4)  { width: var(--w-t); }     /* t */
th:nth-child(6)  { width: var(--w-set); }   /* set */
th:nth-child(7)  { width: var(--w-cycle); } /* cycle */
th:nth-child(8)  { width: var(--w-style); } /* style */
th:nth-child(9)  { width: var(--w-desc); }  /* set description */
th:nth-child(10) { width: var(--w-tt); }    /* total time */
th:nth-child(11) { width: var(--w-td); }    /* total distance */
th:nth-child(12) { width: var(--w-system); }/* system */
th:nth-child(13) { width: var(--w-actions);}/* 操作 */

/* ✅ 幅指定を効かせるための安定化（重要） */
table { table-layout: fixed; }
th, td { overflow: hidden; }
td input { width: 100%; box-sizing: border-box; }

@media print{
   @page{size:A4 landscape;margin:5mm;}
   body{ zoom: 0.85;}

  th.rowActions,
  td.rowActions {
    display: none !important;
  }
  .tableWrap{
    overflow: visible!important;
    border-radius: 0 !important;
  }
   table {
    min-width: 0 !important;
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 13px !important;
  }
  th{ font-size: 13px !important;}
  td{ font-size: 13px !important;}


  th, td { padding: 0px 3px !important;}
  input  {
    border: none !important;
    background: transparent !important;
    font-size: 13px !important;
    padding: 0px 2px !important;
    height: 18px !important;          /* 入力欄の縦を固定で圧縮 */
  }
  tr { page-break-inside: avoid; }

  input[data-k="system"]:placeholder-shown{
    visibility: hidden!important;
  }
  input[data-k="system"]::placeholder{
    color: transparent !important;
  }

   #title:placeholder-shown{
    visibility: hidden!important;
  }
  #title:placeholder{
    color: transparent !important;
  }

  .no-print,
  .hint {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  #grandTime,#grandDist{
    background-color: #aaadb5 !important;
    font-weight: 800 !important;
  }
   * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .howto{
    display: none !important;
  }
 
 
}