/* スキルログ(/SkillLog/)専用。チャートは選択範囲を1画面に収め、下の記録パネルは
   浮いた操作ドックとして表示する。 */
:root{
  --skill-log-content-max:1040px;
  --skill-log-label-width:160px;
  --skill-log-count-width:54px;
  --skill-log-duty-bg:#E6E7EE;
  --skill-log-grid:rgba(91,95,126,.22);
  --skill-log-mew-bg:#FDE7EF;
  --skill-log-mew-border:#D990A9;
  --skill-log-critical-pink:#F04F8B;
  --skill-log-fingerflick-bg:#FFF7DC;
  --skill-log-fingerflick-border:#D2B03F;
  --skill-log-shard-bg:#EDE3FA;
  --skill-log-shard-border:#B493D3;
  --skill-log-csv-bg:#E4F5EA;
}
:root[data-theme="dark"]{
  --skill-log-duty-bg:#2B2B31;
  --skill-log-grid:rgba(236,236,240,.2);
  --skill-log-mew-bg:#3A2530;
  --skill-log-mew-border:#D98FA9;
  --skill-log-fingerflick-bg:#39331F;
  --skill-log-fingerflick-border:#D1B65A;
  --skill-log-shard-bg:#332A45;
  --skill-log-shard-border:#B79AD7;
  --skill-log-csv-bg:#1E3A28;
}
:root[data-theme="dark-blue"]{
  --skill-log-duty-bg:#1A3965;
  --skill-log-grid:rgba(234,242,255,.23);
  --skill-log-mew-bg:#3A2540;
  --skill-log-mew-border:#DD9BB4;
  --skill-log-fingerflick-bg:#4A3D1E;
  --skill-log-fingerflick-border:#D8B957;
  --skill-log-shard-bg:#342950;
  --skill-log-shard-border:#B9A0E1;
  --skill-log-csv-bg:#1D3A3C;
}
*{ box-sizing:border-box; }
html,body{
  margin:0;
  min-height:100%;
  background:var(--paper-dim);
  color:var(--ink);
  font-family:"Noto Sans JP",sans-serif;
}
.skill-log-header{
  position:relative;
  padding:20px 16px 13px;
  background:var(--header-bg);
  color:var(--on-dark);
}
.skill-log-header .app-version{
  position:absolute;
  top:8px;
  right:12px;
  color:var(--moon);
  opacity:.85;
  font-size:var(--fs-2xs);
  white-space:nowrap;
}
.skill-log-header .build-time{
  position:absolute;
  top:21px;
  right:12px;
  color:var(--moon);
  opacity:.6;
  font-size:var(--fs-2xs);
  white-space:nowrap;
}
.skill-log-header h1{
  margin:0;
  font-size:var(--fs-lg);
  font-weight:900;
  letter-spacing:.02em;
}
.skill-log-range-controls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px 12px;
  margin:0 0 var(--sp-3);
  padding:12px;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--paper);
  box-shadow:0 1px 3px rgba(27,34,69,.06);
}
.skill-log-scale-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  width:100%;
  min-width:0;
}
.skill-log-scale{
  display:inline-flex;
  gap:3px;
  padding:3px;
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  background:var(--paper-dim);
}
.skill-log-scale-title{
  display:inline-flex;
  align-items:center;
  padding:0 4px 0 3px;
  color:var(--ink-soft);
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}
.skill-log-scale-btn{
  min-width:44px;
  padding:5px 8px;
  border:0;
  border-radius:var(--radius-pill);
  background:transparent;
  color:var(--ink-soft);
  cursor:pointer;
  font:700 var(--fs-xs)/1.2 "Noto Sans JP",sans-serif;
}
.skill-log-scale-btn.active{
  background:var(--selected-bg);
  color:var(--selected-ink);
}
.skill-log-range-nav{
  display:flex;
  flex:1 1 auto;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  min-width:0;
}
.skill-log-range-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  flex:none;
  padding:0;
  border:1px solid var(--line);
  border-radius:50%;
  background:var(--paper-dim);
  color:var(--ink-soft);
  cursor:pointer;
}
.skill-log-range-btn:hover{ color:var(--navy); border-color:var(--navy); }
.skill-log-range-btn:active{ transform:scale(.96); }
.skill-log-range-btn svg{ width:18px; height:18px; }
.skill-log-range{
  min-width:0;
  overflow:hidden;
  color:var(--ink);
  font-size:var(--fs-xs);
  font-weight:800;
  line-height:1.35;
  text-overflow:ellipsis;
  text-align:center;
  white-space:nowrap;
}
.skill-log-daily-summary{
  flex:1 1 100%;
  min-width:0;
  padding-top:7px;
  border-top:1px solid var(--line);
  overflow-x:auto;
  scrollbar-width:thin;
}
.skill-log-daily-summary-table{ min-width:max-content; }
.skill-log-daily-summary-row{
  display:grid;
  grid-template-columns:var(--skill-log-daily-columns, 32px minmax(38px, 1fr));
  min-width:100%;
}
.skill-log-daily-summary-row + .skill-log-daily-summary-row{ border-top:1px solid var(--line); }
.skill-log-daily-summary-row span{
  min-width:38px;
  padding:3px 5px;
  color:var(--ink-soft);
  font-size:10px;
  font-weight:700;
  line-height:1.2;
  text-align:center;
  white-space:nowrap;
}
.skill-log-daily-summary-row span:first-child{
  min-width:32px;
  background:var(--paper-dim);
  color:var(--ink-soft);
  font-weight:800;
}
.skill-log-daily-summary-row.is-count span:not(:first-child){ color:var(--ink); font-variant-numeric:tabular-nums; }
/* 3日/1週間表示の「推移」行。日ごとの総発動回数を折れ線で見せる。 */
.skill-log-daily-summary-row.is-line{ align-items:stretch; }
.skill-log-daily-summary-row.is-line > span:first-child{ display:flex; align-items:center; justify-content:center; }
.skill-log-daily-line-cell{ grid-column:2 / -1; min-width:0; padding:3px 0 1px; }
.skill-log-daily-line-chart{ display:block; width:100%; height:64px; overflow:visible; }
.skill-log-daily-line-baseline{ stroke:var(--line); stroke-width:1; }
.skill-log-daily-line-path{ fill:none; stroke:#F04F8B; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.skill-log-daily-line-point{ fill:#F04F8B; stroke:#F04F8B; stroke-width:1.5; }
.skill-log-condition-section{
  margin-bottom:var(--sp-3);
}
.skill-log-condition-host > *:not([data-sim-cond-card]):not(.cmp-sim-banner):not(.overlay-modal){
  display:none;
}
.skill-log-condition-host > .cmp-sim-card[data-sim-cond-card]{ display:none; }
.skill-log-condition-host > .cmp-sim-banner{
  position:static;
  display:block;
  margin:0;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  box-shadow:0 1px 3px rgba(27,34,69,.06);
}
.skill-log-condition-host > .cmp-sim-banner .cmp-sim-banner-line{
  max-width:none;
  padding:8px 10px;
}

/* 個体選択の絞り込みは、シミュ／ボックスのチップ部品を再利用する。SkillLog は
   simulator.html のページ内スタイルを読まないため、ここで同じ基本形だけを補う。 */
.skill-log-member-board .filter-chips{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
}
.skill-log-member-board .filter-chip{
  font:inherit;
  font-size:var(--fs-xs);
  line-height:1.2;
  padding:4px 9px;
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  background:var(--paper);
  color:var(--ink-soft);
  cursor:pointer;
}
.skill-log-member-board .filter-chip:hover{ background:var(--paper-dim); }
.skill-log-member-board .filter-chip.active{
  background:var(--selected-bg);
  border-color:var(--selected-border);
  color:var(--selected-ink);
  font-weight:700;
}
.skill-log-member-board .filter-chip.ing-chip{
  display:inline-flex;
  align-items:center;
  gap:3px;
  padding:3px 7px 3px 5px;
}
.skill-log-member-board .filter-chip.ing-chip img{
  width:18px;
  height:18px;
  object-fit:contain;
  flex:none;
}
.skill-log-member-board .filter-chips.is-icon-row{
  flex-wrap:nowrap;
  overflow-x:auto;
  gap:3px;
  padding-bottom:3px;
  scrollbar-width:thin;
}
.skill-log-member-board .filter-chips.is-icon-row .filter-chip.ing-chip{
  flex:none;
  padding:2px;
  border-radius:50%;
  line-height:0;
}
.skill-log-member-board .filter-chips.is-icon-row .filter-chip.ing-chip img{
  width:20px;
  height:20px;
}
main{
  max-width:var(--skill-log-content-max);
  margin:0 auto;
  padding:var(--sp-3) var(--sp-3) calc(var(--app-nav-inset-bottom, 88px) + min(48vh, 390px) + 24px);
}
.skill-log-section{
  margin-bottom:var(--sp-3);
  padding:var(--sp-3);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--paper);
  box-shadow:0 1px 3px rgba(27,34,69,.06);
}
.skill-log-section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--sp-2);
}
.skill-log-section h2{
  margin:0;
  color:var(--ink);
  font-size:var(--fs-md);
  font-weight:800;
}
.skill-log-help{
  margin:3px 0 0;
  color:var(--ink-soft);
  font-size:var(--fs-2xs);
  line-height:1.55;
}
.skill-log-help{ margin:8px 0; }
.skill-log-legend{
  display:inline-flex;
  align-items:center;
  gap:4px;
  color:var(--ink-soft);
  font-size:var(--fs-2xs);
  font-weight:700;
  white-space:nowrap;
}
.skill-log-legend i{ display:inline-flex; align-items:center; justify-content:center; font-style:normal; }
.skill-log-legend .is-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--navy);
}
.skill-log-legend .is-star{
  margin-left:4px;
  color:var(--warning);
  font-size:1rem;
  line-height:.9;
}
.skill-log-chart-sort{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  margin:0 0 8px;
}
.skill-log-chart-option{
  display:flex;
  align-items:center;
  gap:6px;
}
.skill-log-chart-sort-label{
  color:var(--ink-soft);
  font-size:var(--fs-2xs);
  font-weight:800;
  white-space:nowrap;
}
.skill-log-chart-sort-buttons{
  display:inline-flex;
  gap:2px;
  padding:2px;
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  background:var(--paper-dim);
}
.skill-log-chart-sort-btn{
  min-height:25px;
  padding:3px 8px;
  border:0;
  border-radius:var(--radius-pill);
  background:transparent;
  color:var(--ink-soft);
  cursor:pointer;
  font:800 var(--fs-2xs)/1.2 "Noto Sans JP",sans-serif;
  white-space:nowrap;
}
.skill-log-chart-sort-btn.is-active{
  background:var(--selected-bg);
  color:var(--selected-ink);
}
.skill-log-chart-marker-size-btn{
  box-sizing:border-box;
  min-width:29px;
  min-height:25px;
  padding:3px 7px;
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  background:var(--paper);
  color:var(--ink-soft);
  cursor:pointer;
  font:800 var(--fs-2xs)/1.2 "Noto Sans JP",sans-serif;
  white-space:nowrap;
}
.skill-log-chart-marker-size-btn.is-active{
  padding:1px 5px;
  border:3px solid var(--selected-strong-border);
  background:var(--selected-soft-bg);
  color:var(--selected-soft-ink);
}
.skill-log-chart-sort-btn:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:1px; }
.skill-log-chart-marker-size-btn:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:1px; }
.skill-log-team-title{ display:flex; align-items:center; gap:7px; }
.skill-log-team-head-actions{
  display:flex;
  flex:1 1 auto;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  min-width:0;
}
.skill-log-otebo-summary{
  display:inline-flex;
  align-items:center;
  gap:2px;
  padding-bottom:2px;
  border-bottom:2px solid var(--warning, #D98A2B);
  color:var(--ink-soft);
  font-size:var(--fs-2xs);
  font-weight:800;
  white-space:nowrap;
}
.skill-log-otebo-summary svg{ color:var(--success, #2E9E5B); }
.skill-log-panel-settings-btn{
  display:inline-flex;
  align-items:center;
  gap:4px;
  min-height:27px;
  padding:3px 8px;
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  background:var(--paper-dim);
  color:var(--ink-soft);
  cursor:pointer;
  font:800 var(--fs-2xs)/1.2 "Noto Sans JP",sans-serif;
  white-space:nowrap;
}
.skill-log-panel-settings-btn svg{ flex:none; }
.skill-log-bulk-start,
.skill-log-bulk-cancel,
.skill-log-bulk-delete{
  min-height:27px;
  padding:3px 8px;
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  background:var(--paper);
  color:var(--ink-soft);
  cursor:pointer;
  font:800 var(--fs-2xs)/1.2 "Noto Sans JP",sans-serif;
  white-space:nowrap;
}
.skill-log-bulk-actions{ display:flex; gap:6px; }
.skill-log-chart-sort > .skill-log-bulk-start,
.skill-log-chart-sort > .skill-log-bulk-actions{ margin-left:auto; }
.skill-log-bulk-actions[hidden],
.skill-log-bulk-start[hidden]{ display:none; }
.skill-log-bulk-delete{
  border-color:var(--danger);
  background:var(--danger);
  color:#fff;
}
.skill-log-bulk-delete:disabled{
  border-color:var(--line);
  background:var(--paper-dim);
  color:var(--ink-soft);
  cursor:default;
}
.skill-log-bulk-start:hover,
.skill-log-bulk-cancel:hover{ color:var(--navy); border-color:var(--navy); }
.skill-log-bulk-delete:not(:disabled):hover{ filter:brightness(1.08); }
.skill-log-bulk-start:focus-visible,
.skill-log-bulk-cancel:focus-visible,
.skill-log-bulk-delete:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:1px; }
.skill-log-control-mode-toggle{
  display:inline-flex;
  gap:2px;
  padding:2px;
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  background:var(--paper-dim);
}
.skill-log-control-mode-btn{
  min-height:23px;
  padding:3px 7px;
  border:0;
  border-radius:var(--radius-pill);
  background:transparent;
  color:var(--ink-soft);
  cursor:pointer;
  font:800 var(--fs-2xs)/1.2 "Noto Sans JP",sans-serif;
  white-space:nowrap;
}
.skill-log-control-mode-btn.is-active{
  background:var(--selected-bg);
  color:var(--selected-ink);
}
.skill-log-control-mode-btn:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:1px; }

/* ---- ガントチャート ---- */
.skill-log-chart{
  min-height:100px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--paper-dim);
  overflow:hidden;
}
.skill-log-chart-scroll{
  position:relative;
  overflow:hidden;
  touch-action:pan-y;
  --skill-log-marker-size:10px;
  --skill-log-marker-offset:-5px;
}
.skill-log-chart-scroll.is-marker-size-small{
  --skill-log-marker-size:6px;
  --skill-log-marker-offset:-3px;
}
.skill-log-chart-scroll.is-marker-size-large{
  --skill-log-marker-size:14px;
  --skill-log-marker-offset:-7px;
}
.skill-log-axis-row,
.skill-log-chart-row{
  display:grid;
  grid-template-columns:var(--skill-log-label-width) var(--skill-log-count-width) minmax(0, 1fr);
  min-width:0;
  width:100%;
}
.skill-log-axis-row{
  position:sticky;
  top:0;
  z-index:3;
  min-height:31px;
  border-bottom:1px solid var(--line);
  background:var(--paper-dim);
}
.skill-log-axis-corner{
  position:sticky;
  left:0;
  z-index:4;
  display:flex;
  align-items:center;
  padding:4px 8px;
  border-right:1px solid var(--line);
  background:var(--paper-dim);
  color:var(--ink-soft);
  font-size:var(--fs-2xs);
  font-weight:700;
}
.skill-log-axis-count,
.skill-log-event-count{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  border-right:1px solid var(--line);
  background:var(--paper-dim);
  color:var(--ink-soft);
  font-size:var(--fs-2xs);
  font-weight:800;
  line-height:1.2;
  text-align:center;
  font-variant-numeric:tabular-nums;
}
.skill-log-axis-count{ flex-direction:column; }
.skill-log-chart-row .skill-log-event-count{ background:var(--paper); color:var(--ink); }
.skill-log-time-axis,
.skill-log-track{
  position:relative;
  min-width:0;
  background-color:var(--paper);
  background-image:linear-gradient(to right, var(--skill-log-grid) 1px, transparent 1px);
  background-size:var(--skill-log-tick-step) 100%;
}
.skill-log-now-overlay{
  position:absolute;
  inset:0;
  z-index:5;
  display:grid;
  grid-template-columns:var(--skill-log-label-width) var(--skill-log-count-width) minmax(0, 1fr);
  pointer-events:none;
}
.skill-log-now-line{
  position:relative;
  left:var(--skill-log-now-position);
  width:0;
  height:100%;
  border-left:2px solid var(--danger);
  opacity:.86;
}
.skill-log-now-line::before{
  content:'現在';
  position:absolute;
  top:3px;
  left:0;
  padding:2px 4px;
  border-radius:0 0 var(--radius-sm) var(--radius-sm);
  background:var(--danger);
  color:#fff;
  font-size:10px;
  font-weight:800;
  line-height:1.1;
  transform:translateX(-50%);
}
.skill-log-time-axis{ min-height:31px; }
.skill-log-axis-tick{
  position:absolute;
  top:4px;
  width:0;
  color:var(--ink-soft);
  font-size:var(--fs-2xs);
  font-weight:700;
  line-height:1.15;
  white-space:nowrap;
}
.skill-log-axis-tick > span{ display:block; transform:translateX(5px); }
.skill-log-axis-tick.is-last > span{ transform:translateX(-100%); padding-right:5px; }
.skill-log-chart-row{
  min-height:42px;
  border-bottom:1px solid var(--line);
}
.skill-log-chart-row:last-child{ border-bottom:0; }
.skill-log-member-label{
  position:sticky;
  left:0;
  z-index:4;
  display:flex;
  align-items:center;
  gap:5px;
  min-width:0;
  padding:3px 6px;
  border-right:1px solid var(--line);
  border-left:4px solid transparent;
  background:var(--paper);
}
.skill-log-member-label.is-active{ border-left-color:var(--skill-log-slot-color, var(--line)); }
.skill-log-member-label:hover{ background:var(--paper-dim); cursor:pointer; }
.skill-log-member-label:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:-2px; }
.skill-log-chart-row.is-bulk-selectable .skill-log-member-label{ cursor:pointer; }
.skill-log-chart-row.is-bulk-selected .skill-log-member-label{
  box-sizing:border-box;
  border:3px solid var(--selected-strong-border);
  border-left-width:4px;
  background:var(--selected-soft-bg);
  color:var(--selected-soft-ink);
}
.skill-log-chart-row.is-bulk-selected .skill-log-member-name,
.skill-log-chart-row.is-bulk-selected .skill-log-member-meta{ color:var(--selected-soft-ink); }
.skill-log-chart-row.is-bulk-selected .skill-log-event-count{ background:var(--selected-soft-bg); color:var(--selected-soft-ink); }
.skill-log-chart-row.is-bulk-selected .skill-log-track{ background-color:var(--selected-soft-bg); }
.skill-log-member-label img{
  width:28px;
  height:28px;
  flex:none;
  object-fit:contain;
}
.skill-log-member-virtual-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  flex:none;
  border-radius:50%;
  background:var(--paper-dim);
  color:var(--skill-log-slot-color, var(--ink-soft));
}
.skill-log-member-virtual-icon svg{ width:19px; height:19px; }
.skill-log-member-text{ min-width:0; }
.skill-log-member-name{
  overflow:hidden;
  color:var(--ink);
  font-size:11px;
  font-weight:800;
  line-height:1.25;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.skill-log-member-memo-icon{
  margin-left:2px;
  font-size:9px;
}
.skill-log-member-meta{
  margin-top:1px;
  overflow:hidden;
  color:var(--ink-soft);
  font-size:10px;
  line-height:1.2;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.skill-log-track{ min-height:41px; overflow:hidden; }
.skill-log-duty-bar{
  position:absolute;
  top:7px;
  bottom:7px;
  z-index:1;
  min-width:2px;
  border:0;
  border-radius:4px;
  background:var(--skill-log-slot-color, var(--skill-log-duty-bg));
  opacity:.24;
  cursor:pointer;
  font:inherit;
  padding:0;
}
.skill-log-duty-bar.is-virtual{
  opacity:.13;
}
.skill-log-duty-bar:hover{ opacity:.36; }
.skill-log-duty-bar.is-virtual:hover{ opacity:.24; }
.skill-log-duty-bar:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:1px; }
.skill-log-marker{
  position:absolute;
  top:50%;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
  width:var(--skill-log-marker-size);
  height:var(--skill-log-marker-size);
  margin:var(--skill-log-marker-offset) 0 0 var(--skill-log-marker-offset);
  padding:0;
  border:0;
  border-radius:50%;
  background:var(--navy);
  color:var(--paper);
  opacity:.5;
  cursor:pointer;
  font:800 var(--skill-log-marker-size)/1 sans-serif;
}
.skill-log-marker:hover{ transform:scale(1.12); }
.skill-log-marker:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; }
.skill-log-marker.is-critical{
  width:var(--skill-log-marker-size);
  height:var(--skill-log-marker-size);
  margin:var(--skill-log-marker-offset) 0 0 var(--skill-log-marker-offset);
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--warning);
  filter:none;
  font-size:var(--skill-log-marker-size);
}
.skill-log-marker.is-miss{ background:var(--ink-soft); opacity:.7; }
.skill-log-empty-chart{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:128px;
  padding:var(--sp-4);
  color:var(--ink-soft);
  font-size:var(--fs-sm);
  text-align:center;
}

/* ---- 発動通知カード ---- */
.skill-log-activation-toast{
  position:fixed;
  inset:0;
  z-index:120;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}
.skill-log-activation-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:min(68vw, 230px);
  min-height:218px;
  padding:16px 14px 12px;
  border:0;
  border-radius:var(--radius-lg);
  background:var(--skill-log-toast-color, var(--navy));
  color:var(--skill-log-toast-ink, #fff);
  box-shadow:0 10px 26px rgba(0,0,0,.24);
  opacity:0;
  pointer-events:auto;
  transform:translateY(55vh) scale(.92);
}
.skill-log-activation-card.is-visible{ animation:skill-log-toast-pop 2.05s ease-out forwards; }
.skill-log-activation-card strong{ font-size:var(--fs-md); font-weight:900; letter-spacing:.03em; }
.skill-log-toast-candy-note{ margin-top:3px; font-size:var(--fs-xs); font-weight:700; opacity:.9; }
.skill-log-activation-card img,
.skill-log-toast-virtual-icon{
  width:62px;
  height:62px;
  margin:13px 0 14px;
  object-fit:contain;
}
.skill-log-toast-virtual-icon{ display:flex; align-items:center; justify-content:center; }
.skill-log-toast-memo{
  width:100%;
  margin-bottom:8px;
  padding:6px 8px;
  border:1px solid rgba(255,255,255,.4);
  border-radius:var(--radius-sm);
  background:rgba(255,255,255,.15);
  color:inherit;
  font-family:inherit;
  font-size:13px;
}
.skill-log-toast-memo::placeholder{ color:rgba(255,255,255,.75); }
.skill-log-activation-actions{
  display:grid;
  width:100%;
  gap:5px;
}
.skill-log-activation-undo,
.skill-log-activation-time{
  min-height:34px;
  padding:5px 15px;
  border:1px solid currentColor;
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,.16);
  color:inherit;
  cursor:pointer;
  font:800 var(--fs-xs)/1.2 "Noto Sans JP",sans-serif;
}
.skill-log-activation-time{ background:rgba(255,255,255,.28); }
.skill-log-activation-undo:hover,
.skill-log-activation-time:hover{ background:rgba(255,255,255,.38); }
/* 操作パネル(画面下)の裏から飛び出し、中央で一時停止した後にふわっと消える。
   0-20%は勢いよく迫り上がるbackOut風、70-100%は穏やかなease-outでフェードする。 */
@keyframes skill-log-toast-pop{
  0%{ opacity:0; transform:translateY(55vh) scale(.92); animation-timing-function:cubic-bezier(.34,1.56,.64,1); }
  20%{ opacity:1; transform:translateY(0) scale(1); animation-timing-function:linear; }
  70%{ opacity:1; transform:translateY(0) scale(1); animation-timing-function:ease-out; }
  100%{ opacity:0; transform:translateY(-16px) scale(.97); }
}

/* 大成功確認で「大成功」を選んだ際、左右から紙吹雪が飛ぶ短い演出 */
.skill-log-confetti-layer{
  position:fixed;
  inset:0;
  z-index:210;
  overflow:hidden;
  pointer-events:none;
}
.skill-log-confetti-piece{
  position:absolute;
  top:45%;
  width:8px;
  height:14px;
  opacity:0;
  border-radius:2px;
  animation-name:skill-log-confetti-burst;
  animation-timing-function:ease-out;
  animation-fill-mode:forwards;
}
@keyframes skill-log-confetti-burst{
  0%{ opacity:1; transform:translate(0,0) rotate(0deg); }
  100%{ opacity:0; transform:translate(var(--confetti-x), var(--confetti-y)) rotate(var(--confetti-rotate)); }
}

/* ---- 操作パネル ---- */
.skill-log-control-section{
  position:fixed;
  left:calc(var(--app-nav-inset-left, 0px) + 12px);
  right:12px;
  bottom:calc(var(--app-nav-inset-bottom, 88px) + 8px);
  z-index:80;
  width:auto;
  max-width:var(--skill-log-content-max);
  max-height:min(45vh, 370px);
  margin:0 auto;
  /* 横方向の操作はチーム一覧だけに任せ、親の縦スクロールと競合させない。 */
  overflow-x:hidden;
  overflow-y:auto;
  padding:10px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--paper);
  box-shadow:0 12px 34px rgba(17,21,46,.24);
}
.skill-log-control-section .skill-log-section-head{ margin-bottom:7px; }
.skill-log-control-section .skill-log-help{ display:none; }
.skill-log-control-section .skill-log-team-tools{ justify-content:flex-end; }
.skill-log-control-section:not(.is-max) .skill-log-team-tools{ display:none; }
.skill-log-control-section:not(.is-max) .skill-log-panel-settings-btn{ display:none; }
/* 最小表示はスクリーンショット用。フロート表示の操作パネルをチーム見出しの行だけに縮め、
   チームカードの一覧は隠してチャートを広く見せる(表示切替トグルはこの行に残るので操作できる)。 */
.skill-log-control-section.is-min{ padding:5px 8px; }
.skill-log-control-section.is-min .skill-log-section-head{ margin-bottom:0; }
.skill-log-control-section.is-min .skill-log-team-tools,
.skill-log-control-section.is-min .skill-log-team-viewport{ display:none; }
.skill-log-condition-open{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  margin:0 0 7px;
  padding:4px 9px;
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  background:var(--paper-dim);
  color:var(--ink-soft);
  cursor:pointer;
  font:700 var(--fs-2xs)/1.2 "Noto Sans JP",sans-serif;
}
.skill-log-condition-open:hover{ color:var(--navy); border-color:var(--navy); }
.skill-log-team-tools{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:7px; }
.skill-log-team-tools .skill-log-condition-open{ margin:0; }
.skill-log-team-import{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:4px 9px;
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  background:var(--paper-dim);
  color:var(--ink-soft);
  cursor:pointer;
  font:700 var(--fs-2xs)/1.2 "Noto Sans JP",sans-serif;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.skill-log-team-import:hover{ color:var(--navy); border-color:var(--navy); }
.skill-log-team-viewport{
  width:100%;
  min-width:0;
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-x:contain;
  scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x;
}
.skill-log-team{
  /* 一列のグリッドで列幅を確定させ、6枚目以降を必ず横スクロール領域へ送る。 */
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:calc(19% - 4px);
  grid-template-rows:minmax(0, 1fr);
  justify-content:start;
  gap:5px;
  min-width:0;
  max-width:100%;
  width:100%;
  padding:1px 1px 8px;
  overflow:visible;
  scroll-snap-type:x proximity;
}
.skill-log-slot{
  display:flex;
  /* 5枚より少し細くして、次のカードが続くことを見せる。 */
  /* calc()の除算は一部ブラウザで無効になるため、互換性のある式にする。 */
  width:100%;
  flex-direction:column;
  min-width:0;
  min-height:204px;
  overflow:hidden;
  border:1px solid var(--skill-log-slot-color, var(--line));
  border-top-width:4px;
  border-radius:var(--radius-md);
  background:var(--paper-dim);
  scroll-snap-align:start;
}
.skill-log-slot.is-unassigned{ border-color:#9AA1AE; }
.skill-log-slot-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2px;
  min-height:31px;
  padding:5px 3px 4px;
  border-bottom:1px solid var(--line);
}
.skill-log-slot-head-actions{ display:flex; align-items:center; justify-content:flex-end; gap:2px; min-width:0; }
.skill-log-history-checkbox{
  flex:none;
  width:15px;
  height:15px;
  margin:0 1px 0 0;
  accent-color:var(--selected-strong-border);
  cursor:pointer;
}
.skill-log-slot-letter{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:22px;
  height:22px;
  border-radius:50%;
  background:var(--skill-log-slot-color, var(--navy));
  color:var(--skill-log-slot-ink, var(--paper));
  font-size:var(--fs-xs);
  font-weight:900;
}
.skill-log-slot-assign-btn{
  flex:none;
  padding:0;
  border:2px solid var(--skill-log-slot-color, var(--line));
  background:var(--paper);
  color:var(--skill-log-slot-color, var(--ink));
  box-shadow:0 2px 0 var(--skill-log-slot-color, var(--line)), 0 3px 8px rgba(0,0,0,.12);
  cursor:pointer;
  transition:background-color .15s ease, transform .1s ease, box-shadow .1s ease;
}
.skill-log-slot-assign-btn:hover{ background:var(--paper-dim); }
.skill-log-slot-assign-btn:active{ transform:translateY(1px); box-shadow:0 1px 0 var(--skill-log-slot-color, var(--line)); }
.skill-log-slot-assign-btn svg{ width:14px; height:14px; }
.skill-log-swap-btn{
  border:0;
  background:transparent;
  color:var(--info);
  cursor:pointer;
  font:700 10px/1.2 "Noto Sans JP",sans-serif;
  text-decoration:underline;
  white-space:nowrap;
}
.skill-log-add-slot{
  border-style:dashed;
  background:var(--paper);
}
.skill-log-add-slot-title{
  min-width:0;
  overflow:hidden;
  color:var(--ink-soft);
  font-size:10px;
  font-weight:800;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.skill-log-add-member-btn{
  min-height:24px;
  padding:3px 6px;
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  background:var(--paper);
  color:var(--info);
  cursor:pointer;
  font:800 10px/1.2 "Noto Sans JP",sans-serif;
  white-space:nowrap;
}
.skill-log-add-member-btn:hover{ border-color:var(--info); }
.skill-log-slot-body{
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:108px;
  padding:7px 5px;
  text-align:center;
}
.skill-log-slot-body img{
  width:48px;
  height:48px;
  object-fit:contain;
}
.skill-log-slot-virtual-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  border-radius:50%;
  background:var(--paper);
  color:var(--skill-log-slot-color, var(--ink-soft));
}
.skill-log-slot-virtual-icon svg{ width:30px; height:30px; }
.skill-log-slot-name{
  width:100%;
  margin-top:2px;
  overflow:hidden;
  color:var(--ink);
  font-size:var(--fs-xs);
  font-weight:800;
  line-height:1.28;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.skill-log-slot-rate{
  margin-top:3px;
  color:var(--ink-soft);
  font-size:var(--fs-2xs);
  font-variant-numeric:tabular-nums;
  line-height:1.25;
}
.skill-log-slot-rate strong{ color:var(--navy); font-size:var(--fs-xs); }
.skill-log-slot-empty{
  gap:7px;
  color:var(--ink-soft);
  font-size:var(--fs-2xs);
}
.skill-log-virtual-otebo{
  display:inline-flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:center;
  gap:3px;
  min-height:43px;
  padding:4px 5px;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--paper);
  color:var(--ink-soft);
  font:800 10px/1.2 "Noto Sans JP",sans-serif;
}
.skill-log-virtual-otebo > span:first-child{ text-align:center; }
.skill-log-otebo-choices{
  display:inline-flex;
  align-self:center;
  gap:2px;
  padding:2px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--paper-dim);
}
.skill-log-otebo-choices button{
  min-width:27px;
  min-height:19px;
  padding:2px 4px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:var(--ink-soft);
  cursor:pointer;
  font:800 9px/1 "Noto Sans JP",sans-serif;
}
.skill-log-otebo-choices button:hover{ background:var(--paper); }
.skill-log-otebo-choices button.is-selected{ background:var(--skill-log-slot-color, var(--navy)); color:var(--skill-log-slot-ink, #fff); }
.skill-log-slot-share{
  align-items:stretch;
  justify-content:flex-start;
  gap:4px;
  padding:4px;
  text-align:left;
}
.skill-log-slot-share .cmp-share-card{
  grid-row:auto;
  width:100%;
  min-width:0;
  grid-template-rows:repeat(9, auto);
  padding:4px;
  border:0;
  border-radius:7px;
}
.skill-log-slot-share .cmp-share-row{ gap:2px; }
.skill-log-slot-share .cmp-share-row.has-divider{ padding-top:2px; }
.skill-log-slot-share .cmp-share-row-face img{ width:34px; height:34px; }
.skill-log-slot-share .cmp-share-row-name{ font-size:9px; }
.skill-log-slot-share .cmp-share-row-ing img{ width:14px; height:14px; }
.skill-log-slot-share .cmp-share-ribbon{ width:16px; height:16px; flex:none; }
.skill-log-slot-share .cmp-share-ribbon img{ width:100%; height:100%; }
.skill-log-slot-share .cmp-share-subcell{ min-height:16px; }
.skill-log-slot-share .cmp-share-subcell .cmp-skill-icon{ width:11px; height:11px; }
.skill-log-slot-share .cmp-share-nature{ font-size:9px; }
.skill-log-slot-share .cmp-share-flag{ font-size:9px; }
.skill-log-slot-share .cmp-share-row-partySkill{ display:none; }
.skill-log-slot-share .cmp-share-row-head{ min-height:18px; }
.skill-log-slot-share .cmp-share-badge{ display:none; }
.skill-log-slot-share .cmp-share-lv{ font-size:9px; }
.skill-log-actions{
  display:grid;
  grid-template-columns:1fr;
  gap:4px;
  padding:5px;
  border-top:1px solid var(--line);
}
.skill-log-action-btn{
  min-height:60px;
  padding:4px 2px;
  border:2px solid transparent;
  border-radius:var(--radius-sm);
  cursor:pointer;
  font:800 var(--fs-2xs)/1.2 "Noto Sans JP",sans-serif;
  transition:background-color .15s ease, border-color .15s ease, transform .1s ease, box-shadow .1s ease;
}
.skill-log-action-btn.is-normal{
  border-color:var(--skill-log-slot-color, var(--line));
  background:var(--paper);
  color:var(--skill-log-slot-color, var(--navy));
  box-shadow:0 2px 0 var(--skill-log-slot-color, var(--line)), 0 3px 10px rgba(0,0,0,.14);
}
.skill-log-action-btn.is-miss{
  min-height:30px;
  border-color:var(--ink-soft);
  background:var(--paper);
  color:var(--ink-soft);
  box-shadow:0 2px 0 var(--ink-soft), 0 3px 10px rgba(0,0,0,.14);
}
.skill-log-action-btn:disabled{
  border-color:var(--line);
  background:var(--line);
  color:var(--ink-soft);
  opacity:.58;
  cursor:not-allowed;
  box-shadow:none;
}
.skill-log-action-btn:active:not(:disabled){ transform:translateY(1px); }
.skill-log-action-btn.is-miss:active:not(:disabled){ box-shadow:0 1px 0 var(--ink-soft); }
.skill-log-action-btn.is-normal:active:not(:disabled){ box-shadow:0 1px 0 var(--skill-log-slot-color, var(--line)); }
.skill-log-control-section.is-collapsed .skill-log-condition-open{ display:none; }
.skill-log-control-section.is-collapsed .skill-log-team-import{ display:none; }
/* 折りたたみ時は、左にアイコン、右にLvと名前を2段で置く。
   シェアカードの行にはgrid-rowがインライン指定されるため、ここでは!importantで
   省スペース用の2行レイアウトへ組み替える。 */
.skill-log-control-section.is-collapsed .skill-log-slot{ min-height:158px; }
.skill-log-control-section.is-collapsed .skill-log-slot-body{
  min-height:58px;
  padding:3px 4px;
}
.skill-log-control-section.is-collapsed .skill-log-slot-share{
  min-height:58px;
  gap:1px;
  padding:2px 3px;
}
.skill-log-control-section.is-collapsed .skill-log-slot-share .cmp-share-row:not(.cmp-share-row-head):not(.cmp-share-row-face):not(.cmp-share-row-name){ display:none; }
.skill-log-control-section.is-collapsed .skill-log-slot-share .cmp-share-card{
  display:grid;
  grid-template-columns:minmax(28px, 42px) minmax(0, 1fr);
  grid-template-rows:1fr 1fr;
  align-items:center;
  min-height:42px;
  padding:1px 2px;
  border:0;
  border-radius:0;
  background:transparent;
}
.skill-log-control-section.is-collapsed .skill-log-slot-share .cmp-share-row-head{
  grid-column:2;
  grid-row:1 !important;
  justify-content:flex-start;
  min-height:0;
}
.skill-log-control-section.is-collapsed .skill-log-slot-share .cmp-share-badge{ display:none; }
.skill-log-control-section.is-collapsed .skill-log-slot-share .cmp-share-lv{
  padding:1px 3px;
  font-size:9px;
}
.skill-log-control-section.is-collapsed .skill-log-slot-share .cmp-share-row-face{
  grid-column:1;
  grid-row:1 / span 2 !important;
  justify-content:center;
}
.skill-log-control-section.is-collapsed .skill-log-slot-share .cmp-share-row-face img{
  width:min(38px, 100%);
  height:auto;
  aspect-ratio:1;
}
.skill-log-control-section.is-collapsed .skill-log-slot-share .cmp-share-row-name{
  grid-column:2;
  grid-row:2 !important;
  align-items:flex-start;
  text-align:left;
}
.skill-log-control-section.is-collapsed .skill-log-slot-share .cmp-share-row-name .cmp-share-nick{
  width:100%;
  overflow:hidden;
  font-size:10px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.skill-log-control-section.is-collapsed .skill-log-slot-share .cmp-share-row-name .cmp-share-species{ display:none; }
.skill-log-control-section.is-collapsed .skill-log-slot-rate{
  margin-top:0;
  font-size:9px;
  line-height:1.1;
  white-space:nowrap;
}
.skill-log-control-section.is-collapsed .skill-log-slot-rate strong{ font-size:10px; }
.skill-log-control-section.is-collapsed .skill-log-actions{ gap:3px; padding:4px; }
.skill-log-control-section.is-collapsed .skill-log-action-btn.is-normal{ min-height:48px; }
.skill-log-control-section.is-collapsed .skill-log-action-btn.is-miss{ min-height:25px; }
.skill-log-control-section.is-collapsed .skill-log-slot-empty{
  flex-direction:row;
  justify-content:center;
  gap:4px;
}
.skill-log-control-section.is-collapsed .skill-log-add-slot-title,
.skill-log-control-section.is-collapsed .skill-log-add-member-btn{ display:none; }
.skill-log-control-section.is-collapsed .skill-log-slot-empty > span:not(.skill-log-slot-virtual-icon){ display:none; }
.skill-log-control-section.is-collapsed .skill-log-slot-virtual-icon{
  flex:none;
  width:34px;
  height:34px;
}
.skill-log-control-section.is-collapsed .skill-log-slot-virtual-icon svg{ width:22px; height:22px; }
.skill-log-control-section.is-collapsed .skill-log-virtual-otebo{
  min-height:34px;
  padding:3px 4px;
  font-size:9px;
}

/* ---- ポケモン選択 ---- */
.skill-log-member-modal .modal-card{ max-width:min(94vw, 640px); }
.skill-log-member-slot-choices{
  display:grid;
  grid-template-columns:repeat(6, minmax(0, 1fr));
  gap:7px;
  margin:0 0 10px;
}
.skill-log-member-slot-choice{
  box-sizing:border-box;
  min-height:38px;
  padding:7px 4px;
  border:1px solid var(--skill-log-member-choice-color, var(--line));
  border-radius:var(--radius-sm);
  background:var(--paper);
  color:var(--ink-soft);
  cursor:pointer;
  font:800 var(--fs-xs)/1.2 "Noto Sans JP",sans-serif;
}
.skill-log-member-slot-choice.is-selected{
  padding:5px 2px;
  border:3px solid var(--skill-log-member-choice-color, var(--selected-strong-border));
  background:color-mix(in srgb, var(--skill-log-member-choice-color, var(--selected-border)) 12%, var(--paper));
  color:var(--skill-log-member-choice-color, var(--selected-soft-ink));
}
.skill-log-member-slot-choice:focus-visible{
  outline:2px solid var(--focus-ring);
  outline-offset:1px;
}
.skill-log-panel-settings-modal .modal-card{ max-width:min(92vw, 430px); }
.skill-log-panel-settings-modal h2{
  margin:0;
  padding-right:30px;
  color:var(--ink);
  font-size:var(--fs-md);
}
.skill-log-panel-hide-options{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
  margin-top:14px;
}
.skill-log-panel-hide-option{
  box-sizing:border-box;
  min-height:44px;
  padding:9px 10px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--paper);
  color:var(--ink-soft);
  cursor:pointer;
  font:800 var(--fs-sm)/1.2 "Noto Sans JP",sans-serif;
}
.skill-log-panel-hide-option.is-selected{
  padding:7px 8px;
  border:3px solid var(--selected-strong-border);
  background:var(--selected-soft-bg);
  color:var(--selected-soft-ink);
}
.skill-log-panel-hide-option:focus-visible,
.skill-log-panel-settings-btn:focus-visible{
  outline:2px solid var(--focus-ring);
  outline-offset:1px;
}
.skill-log-sim-import-modal .modal-card{ max-width:min(98vw, 980px); }
.skill-log-sim-import-modal h2{
  margin:0;
  padding-right:30px;
  color:var(--ink);
  font-size:var(--fs-md);
}
.skill-log-sim-import-tabs{
  display:grid;
  gap:8px;
  max-height:min(62vh, 520px);
  overflow-y:auto;
  padding:1px;
}
.skill-log-sim-import-option{
  position:relative;
  min-width:0;
  border:1px solid var(--line);
  border-left:4px solid var(--skill-log-import-option-color, var(--line));
  border-radius:var(--radius-sm);
  background:var(--paper-dim);
  color:var(--ink);
}
.skill-log-sim-import-option.is-selected{
  border-width:2px;
  border-left-width:4px;
  border-color:var(--skill-log-import-option-color, var(--navy));
  background:var(--paper);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--skill-log-import-option-color, var(--navy)) 28%, transparent), 0 4px 12px rgba(0,0,0,.12);
}
.skill-log-sim-import-option-main{
  display:block;
  width:100%;
  min-width:0;
  padding:8px 42px 9px 9px;
  border:0;
  border-radius:inherit;
  background:transparent;
  color:inherit;
  cursor:pointer;
  font:inherit;
  text-align:left;
}
.skill-log-sim-import-option-main:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:-2px; }
.skill-log-sim-import-option-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0; }
.skill-log-sim-import-option-label{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--fs-xs); }
.skill-log-sim-import-option-selected{ display:inline-flex; align-items:center; gap:2px; flex:none; margin-left:auto; padding:2px 6px; border-radius:var(--radius-pill); background:var(--skill-log-import-option-color, var(--navy)); color:#fff; font-size:9px; font-weight:900; line-height:1.2; white-space:nowrap; }
.skill-log-sim-import-option-selected[hidden]{ display:none; }
.skill-log-sim-import-option-selected svg{ width:12px; height:12px; }
.skill-log-sim-import-option-count{ flex:none; color:var(--ink-soft); font-size:var(--fs-2xs); font-variant-numeric:tabular-nums; }
.skill-log-sim-import-option-pokemon-row{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:6px;
  min-width:0;
  margin-top:7px;
  overflow:visible;
  padding:1px 1px 3px;
}
.skill-log-sim-import-option-pokemon{
  display:flex;
  flex-direction:column;
  align-items:center;
  min-width:0;
  min-height:144px;
  overflow:hidden;
  border:2px solid var(--skill-log-import-option-slot-color, var(--line));
  border-top-width:4px;
  border-radius:9px;
  background:var(--paper);
  color:var(--ink);
}
.skill-log-sim-import-option-pokemon.is-empty{ justify-content:center; border-color:var(--line); border-style:dashed; color:var(--ink-soft); }
.skill-log-sim-import-option-destination{ align-self:stretch; overflow:hidden; padding:3px 2px 0; color:var(--ink-soft); font-size:9px; font-weight:800; line-height:1.2; text-align:center; text-overflow:ellipsis; white-space:nowrap; }
.skill-log-sim-import-option-pokemon-compact{ display:flex; flex:1 1 auto; flex-direction:column; align-items:center; width:100%; min-width:0; }
.skill-log-sim-import-option-pokemon img{ width:52px; height:52px; margin:4px auto 1px; object-fit:contain; }
.skill-log-sim-import-option-level{ margin-top:-2px; padding:1px 4px; border:1px solid var(--line); border-radius:5px; color:var(--ink-soft); font-size:9px; font-weight:800; line-height:1; }
.skill-log-sim-import-option-name{ width:100%; margin-top:3px; padding:0 4px; overflow:hidden; text-align:center; text-overflow:ellipsis; white-space:nowrap; font-size:10px; font-weight:800; line-height:1.25; }
.skill-log-sim-import-option-expected{ margin-top:3px; padding:3px 3px 0; border-top:1px solid var(--line); color:var(--ink-soft); font-size:9px; font-weight:700; line-height:1.2; text-align:center; white-space:nowrap; }
.skill-log-sim-import-option-ingredients{ display:flex; align-items:center; justify-content:center; gap:2px; min-height:20px; margin-top:auto; padding:3px 3px 5px; color:var(--ink-soft); font-size:10px; font-weight:800; }
.skill-log-sim-import-option-ingredients-label{ margin-right:1px; font-size:9px; font-weight:700; }
.skill-log-sim-import-option-ingredients img{ width:18px; height:18px; margin:0; object-fit:contain; }
.skill-log-sim-import-option-empty{ padding:12px 4px; font-size:var(--fs-xs); font-weight:800; }
.skill-log-sim-import-option-detail-toggle{
  position:absolute;
  top:7px;
  right:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  padding:0;
  border:1px solid var(--line);
  border-radius:50%;
  background:var(--paper);
  color:var(--ink-soft);
  cursor:pointer;
  box-shadow:0 1px 3px rgba(0,0,0,.12);
}
.skill-log-sim-import-option-detail-toggle:hover{ border-color:var(--navy); color:var(--navy); }
.skill-log-sim-import-option-detail-toggle svg{ width:16px; height:16px; }
.skill-log-sim-import-option-pokemon-details{
  display:none;
  align-self:stretch;
  width:100%;
  margin-top:4px;
  padding:3px 3px 0;
  border-top:1px solid var(--line);
  color:var(--ink);
}
.skill-log-sim-import-option.is-expanded .skill-log-sim-import-option-pokemon-compact{ display:none; }
.skill-log-sim-import-option.is-expanded .skill-log-sim-import-option-pokemon-details{ display:flex; flex-direction:column; gap:2px; }
.skill-log-sim-import-option-pokemon-details .skill-log-sim-import-option-detail-row{ display:flex; align-items:flex-start; gap:3px; min-width:0; font-size:8px; line-height:1.25; }
.skill-log-sim-import-option-pokemon-details .skill-log-sim-import-option-detail-label{ flex:none; color:var(--ink-soft); font-weight:800; }
.skill-log-sim-import-option-pokemon-details .skill-log-sim-import-option-detail-value{ min-width:0; color:var(--ink); font-weight:700; overflow-wrap:anywhere; }
.skill-log-sim-import-option-pokemon-details.is-share{ padding:3px; border-top:0; background:var(--paper); }
.skill-log-sim-import-option-pokemon-details.is-share .cmp-share-card img{ margin:0; }
.skill-log-sim-import-option-pokemon-details.is-share .cmp-share-card{
  width:100%;
  min-width:0;
  grid-template-rows:repeat(9, auto);
  padding:4px;
  border:0;
  border-radius:6px;
}
.skill-log-sim-import-option-pokemon-details.is-share .cmp-share-row{ gap:2px; }
.skill-log-sim-import-option-pokemon-details.is-share .cmp-share-row.has-divider{ padding-top:2px; }
.skill-log-sim-import-option-pokemon-details.is-share .cmp-share-row-face img{ width:38px; height:38px; margin:0 auto; }
.skill-log-sim-import-option-pokemon-details.is-share .cmp-share-row-name{ font-size:9px; }
.skill-log-sim-import-option-pokemon-details.is-share .cmp-share-row-ing img{ width:15px; height:15px; margin:0; }
.skill-log-sim-import-option-pokemon-details.is-share .cmp-share-subcell{ min-height:16px; }
.skill-log-sim-import-option-pokemon-details.is-share .cmp-share-subcell .cmp-skill-icon{ width:11px; height:11px; }
.skill-log-sim-import-option-pokemon-details.is-share .cmp-share-nature{ font-size:9px; }
.skill-log-sim-import-option-pokemon-details.is-share .cmp-share-flag{ font-size:8px; }
.skill-log-sim-import-option-pokemon-details.is-share .cmp-share-row-partySkill{ display:none; }
.skill-log-sim-import-option-pokemon-details.is-share .cmp-share-badge{ display:none; }
.skill-log-sim-import-option-pokemon-details.is-share .cmp-share-lv{ font-size:9px; }
.skill-log-sim-import-option-pokemon-metrics{ margin-top:2px; padding-top:2px; border-top:1px solid var(--line); color:var(--ink-soft); font-size:8px; font-weight:700; line-height:1.2; text-align:center; white-space:nowrap; }
@media (max-width:520px){
  .skill-log-member-slot-choices{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .skill-log-sim-import-option-main{ padding-right:38px; padding-left:6px; }
  .skill-log-sim-import-option-pokemon-row{ gap:3px; }
  .skill-log-sim-import-option-pokemon{ min-height:122px; }
  .skill-log-sim-import-option-pokemon img{ width:34px; height:34px; }
  .skill-log-sim-import-option-level{ font-size:8px; }
  .skill-log-sim-import-option-name{ padding:0 2px; font-size:9px; }
  .skill-log-sim-import-option-expected{ padding-right:0; padding-left:0; font-size:8px; }
  .skill-log-sim-import-option-ingredients{ gap:1px; padding-right:1px; padding-left:1px; }
  .skill-log-sim-import-option-ingredients-label{ display:none; }
  .skill-log-sim-import-option-ingredients img{ width:14px; height:14px; }
  .skill-log-sim-import-option-pokemon-details{ margin-top:3px; padding-right:1px; padding-left:1px; }
  .skill-log-sim-import-option-pokemon-details .skill-log-sim-import-option-detail-row{ display:block; font-size:7px; line-height:1.2; }
  .skill-log-sim-import-option-pokemon-details .skill-log-sim-import-option-detail-label,
  .skill-log-sim-import-option-pokemon-details .skill-log-sim-import-option-detail-value{ display:block; }
  .skill-log-sim-import-option-pokemon-details.is-share{ padding:1px; }
  .skill-log-sim-import-option-pokemon-details.is-share .cmp-share-row-face img{ width:32px; height:32px; margin:0 auto; }
  .skill-log-sim-import-option-pokemon-details.is-share .cmp-share-row-name{ font-size:8px; }
  .skill-log-sim-import-option-pokemon-details.is-share .cmp-share-row-ing img{ width:13px; height:13px; margin:0; }
  .skill-log-sim-import-option-pokemon-details.is-share .cmp-share-subcell{ min-height:14px; }
  .skill-log-sim-import-option-pokemon-details.is-share .cmp-share-subcell .cmp-skill-icon{ width:10px; height:10px; }
  .skill-log-sim-import-option-pokemon-details.is-share .cmp-share-nature{ font-size:8px; }
  .skill-log-sim-import-option-pokemon-details.is-share .cmp-share-lv{ font-size:8px; }
  .skill-log-sim-import-option-pokemon-metrics{ font-size:7px; white-space:normal; overflow-wrap:anywhere; }
}
.skill-log-slot-modal .modal-card{ max-width:min(92vw, 390px); }
.skill-log-slot-modal h2{
  margin:0;
  padding-right:30px;
  color:var(--ink);
  font-size:var(--fs-md);
}
.skill-log-slot-choices{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:7px;
}
.skill-log-slot-choice{
  min-height:44px;
  border:2px solid var(--skill-log-slot-color, var(--line));
  border-radius:var(--radius-sm);
  background:var(--paper);
  color:var(--skill-log-slot-color, var(--ink));
  cursor:pointer;
  font:900 var(--fs-sm)/1.2 "Noto Sans JP",sans-serif;
}
.skill-log-slot-choice.is-selected{
  background:var(--skill-log-slot-color, var(--navy));
  color:var(--skill-log-slot-ink, #fff);
}
/* 発動系モーダル共通のメモ欄(大成功確認・ゆびをふるスキル選択・ミュウのアメ対象・プロット編集)。 */
.skill-log-memo-label{
  display:block;
  margin:10px 0 4px;
  color:var(--ink-soft);
  font-size:var(--fs-2xs);
  font-weight:800;
}
.skill-log-memo-input{
  width:100%;
  padding:7px 8px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--paper);
  color:var(--ink);
  font-family:inherit;
  /* iOSはinputのfont-sizeが16px未満だとフォーカス時に自動でズームしてしまうため16px以上にする */
  font-size:16px;
  resize:vertical;
}
.skill-log-critical-confirm-modal .modal-card{ max-width:min(92vw, 380px); }
.skill-log-critical-confirm-modal h2{
  margin:0;
  padding-right:30px;
  color:var(--ink);
  font-size:var(--fs-md);
}
.skill-log-critical-confirm-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:14px;
}
.skill-log-critical-confirm-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  min-height:64px;
  padding:10px 12px;
  border-radius:var(--radius-sm);
  cursor:pointer;
  font-family:"Noto Sans JP",sans-serif;
}
.skill-log-critical-confirm-label{
  font-size:var(--fs-lg);
  font-weight:800;
  line-height:1.2;
}
.skill-log-critical-confirm-detail{
  font-size:var(--fs-xs);
  font-weight:600;
  line-height:1.3;
  opacity:.85;
  min-height:1.3em;
}
.skill-log-critical-confirm-btn.is-normal{
  border:1px solid var(--line);
  background:var(--paper-dim);
  color:var(--ink);
}
.skill-log-critical-confirm-btn.is-critical{
  border:1px solid var(--warning);
  background:var(--paper);
  color:var(--warning);
}
.skill-log-random-effect-modal .modal-card{ max-width:min(92vw, 390px); }
.skill-log-random-effect-modal h2{
  margin:0;
  padding-right:30px;
  color:var(--ink);
  font-size:var(--fs-md);
}
.skill-log-effect-value-input{ font-variant-numeric:tabular-nums; }
.skill-log-effect-note{
  margin:6px 0 0;
  color:var(--ink-soft);
  font-size:var(--fs-2xs);
  line-height:1.45;
}
.skill-log-skill-pick-modal .modal-card{ max-width:min(92vw, 420px); }
.skill-log-skill-pick-modal h2{
  margin:0;
  padding-right:30px;
  color:var(--ink);
  font-size:var(--fs-md);
}
.skill-log-skill-pick-choices{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:7px;
}
.skill-log-skill-pick-choice{
  min-height:40px;
  padding:4px 8px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--paper);
  color:var(--ink);
  cursor:pointer;
  font:800 var(--fs-2xs)/1.25 "Noto Sans JP",sans-serif;
}
.skill-log-skill-pick-choice:hover{ background:var(--paper-dim); }
.skill-log-stats-buttons{
  display:flex;
  flex:1 1 100%;
  gap:7px;
}
.skill-log-stats-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  flex:1;
  min-width:0;
  min-height:50px;
  padding:6px 4px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--paper);
  color:var(--ink);
  cursor:pointer;
  font:800 var(--fs-2xs)/1.15 "Noto Sans JP",sans-serif;
  text-align:center;
}
.skill-log-stats-btn:hover{ background:var(--paper-dim); }
.skill-log-stats-btn-icon-pair{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:2px;
  height:18px;
}
.skill-log-stats-btn-icon{
  flex:none;
  width:18px;
  height:18px;
  object-fit:contain;
}
.skill-log-stats-btn.is-mew{ background:var(--skill-log-mew-bg); }
.skill-log-stats-btn.is-mew:hover{ filter:brightness(.97); }
.skill-log-stats-btn.is-fingerflick{ background:var(--skill-log-fingerflick-bg); }
.skill-log-stats-btn.is-fingerflick:hover{ filter:brightness(.97); }
.skill-log-stats-btn.is-fingerflick .skill-log-stats-btn-icon{ color:var(--ink); }
.skill-log-stats-btn.is-shard{ background:var(--skill-log-shard-bg); }
.skill-log-stats-btn.is-shard:hover{ filter:brightness(.97); }
.skill-log-stats-btn.is-shard .skill-log-stats-btn-icon{ color:var(--ink); }
.skill-log-stats-btn.is-csv{ background:var(--skill-log-csv-bg); }
.skill-log-stats-btn.is-csv:hover{ filter:brightness(.97); }
.skill-log-stats-btn.is-csv .skill-log-stats-btn-icon{ color:var(--ink); }
.skill-log-csv-modal .modal-card{ max-width:min(92vw, 380px); }
.skill-log-csv-modal h2{
  margin:0;
  padding-right:30px;
  color:var(--ink);
  font-size:var(--fs-md);
}
.skill-log-csv-quick{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin:10px 0 12px;
}
.skill-log-csv-quick-btn{
  flex:1 1 calc(33.333% - 5px);
  min-width:64px;
  min-height:32px;
  padding:5px 8px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--paper-dim);
  color:var(--ink);
  cursor:pointer;
  font:800 var(--fs-2xs)/1.2 "Noto Sans JP",sans-serif;
}
.skill-log-csv-quick-btn:hover{ background:var(--paper); }
.skill-log-csv-range{
  display:flex;
  gap:10px;
}
.skill-log-csv-range-label{
  display:flex;
  flex:1;
  min-width:0;
  flex-direction:column;
  gap:4px;
  color:var(--ink-soft);
  font-size:var(--fs-2xs);
  font-weight:700;
}
.skill-log-csv-date{
  width:100%;
  padding:6px 7px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--paper);
  color:var(--ink);
  font-family:inherit;
  /* iOSはinputのfont-sizeが16px未満だとフォーカス時に自動でズームしてしまうため16px以上にする */
  font-size:16px;
}
.skill-log-csv-count{
  margin:10px 0 0;
  color:var(--ink-soft);
  font-size:var(--fs-2xs);
  font-weight:700;
}
/* ---- 料理を記録カード(スケール=1日のときだけ表示) ---- */
.skill-log-meal-card{
  margin-top:8px;
  padding-top:8px;
  border-top:1px solid var(--line);
}
.skill-log-meal-card-title{
  margin:0 0 6px;
  color:var(--ink-soft);
  font-size:var(--fs-2xs);
  font-weight:800;
}
.skill-log-meal-card-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.skill-log-meal-record-btn{
  flex:1 1 calc(33.333% - 5px);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  min-width:88px;
  min-height:34px;
  padding:5px 6px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--paper-dim);
  color:var(--ink);
  cursor:pointer;
  font:800 var(--fs-2xs)/1.2 "Noto Sans JP",sans-serif;
  white-space:nowrap;
}
.skill-log-meal-record-icon{ flex:none; }
.skill-log-meal-record-btn.is-recorded{ border-color:var(--success, #2E9E5B); background:var(--success, #2E9E5B); color:#fff; }
/* ---- ガントチャート上の料理縦線(「現在」線と同じ.skill-log-now-overlayを流用) ---- */
.skill-log-meal-overlay{ z-index:4; }
.skill-log-meal-track{ position:relative; width:100%; height:100%; }
.skill-log-meal-line{
  position:absolute;
  top:0;
  left:var(--skill-log-meal-position);
  width:0;
  height:100%;
  padding:0;
  border:0;
  border-left:2px dashed var(--meal-line-color, var(--info));
  background:none;
  opacity:.86;
  overflow:visible;
  cursor:pointer;
}
.skill-log-meal-line-icon{
  position:absolute;
  left:50%;
  width:17px;
  height:17px;
  padding:2px;
  border-radius:50%;
  background:var(--paper);
  color:var(--meal-line-color, var(--info));
  stroke-width:2.4;
  transform:translateX(-50%);
}
.skill-log-meal-line.is-success .skill-log-meal-line-icon{
  background:#F6CB5A;
  color:#D0453C;
}
.skill-log-meal-line.is-asa{ --meal-line-color:#E08A2B; }
.skill-log-meal-line.is-asa .skill-log-meal-line-icon{ top:3px; }
.skill-log-meal-line.is-hiru{ --meal-line-color:#2B8FE0; }
.skill-log-meal-line.is-hiru .skill-log-meal-line-icon{ top:20px; }
.skill-log-meal-line.is-yoru{ --meal-line-color:#6A4FD6; }
.skill-log-meal-line.is-yoru .skill-log-meal-line-icon{ top:37px; }
/* ---- 料理を記録モーダル ---- */
.skill-log-meal-modal .modal-card{ max-width:min(92vw, 420px); padding:20px; }
.skill-log-meal-modal h2{ margin:0; padding-right:30px; color:var(--ink); font-size:var(--fs-md); }
.skill-log-meal-date{ margin:3px 0 15px; }
.skill-log-meal-fields{
  display:flex;
  flex-direction:column;
  gap:11px;
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--line);
}
.skill-log-meal-field-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:0;
  color:var(--ink);
  font-size:var(--fs-sm);
  font-weight:700;
}
.skill-log-meal-field-label{
  flex:none;
  color:var(--ink);
}
.skill-log-meal-time-row .skill-log-meal-time-input{
  flex:0 1 61%;
  width:61%;
  min-width:0;
  box-sizing:border-box;
}
.skill-log-meal-recipe-btn{
  flex:1;
  min-width:0;
  min-height:34px;
  padding:5px 8px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--paper);
  color:var(--ink);
  cursor:pointer;
  font:700 var(--fs-xs)/1.2 "Noto Sans JP",sans-serif;
  overflow:hidden;
  text-align:right;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.skill-log-meal-recipe-btn.is-empty{ color:var(--ink-soft); }
.skill-log-meal-prob-field{
  display:inline-flex;
  align-items:center;
  gap:3px;
  color:var(--ink);
  font-size:var(--fs-xs);
  font-weight:700;
}
.skill-log-meal-prob-input{
  width:56px;
  min-height:32px;
  padding:4px 6px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--paper);
  color:var(--ink);
  font:700 var(--fs-xs)/1.2 "Noto Sans JP",sans-serif;
  text-align:right;
}
.skill-log-meal-success-btn{
  min-height:34px;
  padding:5px 12px;
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  background:var(--paper-dim);
  color:var(--ink-soft);
  cursor:pointer;
  font:800 var(--fs-xs)/1.2 "Noto Sans JP",sans-serif;
}
.skill-log-meal-success-btn.is-success{ background:#F6CB5A; border-color:#F6CB5A; color:#D0453C; }
.skill-log-meal-desc-icon{ flex:none; margin-right:4px; vertical-align:-4px; }
/* ---- レシピ選択サブモーダル ---- */
.skill-log-meal-recipe-modal .modal-card{ max-width:min(94vw, 480px); }
.skill-log-meal-recipe-modal h2{ margin:0; padding-right:30px; color:var(--ink); font-size:var(--fs-md); }
.skill-log-meal-recipe-columns{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:6px;
  margin-top:10px;
  max-height:60vh;
  overflow-y:auto;
}
.skill-log-meal-recipe-column{ min-width:0; display:flex; flex-direction:column; gap:5px; }
.skill-log-meal-recipe-column-head{
  position:sticky;
  top:0;
  padding:4px 2px;
  border-radius:6px;
  background:var(--paper-dim);
  color:var(--ink);
  font-size:var(--fs-2xs);
  font-weight:800;
  text-align:center;
}
.skill-log-meal-recipe-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  min-width:0;
  padding:5px 3px;
  border:1.5px solid var(--line);
  border-radius:7px;
  background:var(--paper);
  color:var(--ink);
  cursor:pointer;
  font:inherit;
  text-align:center;
}
.skill-log-meal-recipe-item:hover{ border-color:var(--navy); }
.skill-log-meal-recipe-item.is-selected{ border-color:var(--navy); background:var(--selected-bg); }
.skill-log-meal-recipe-item img{ width:28px; height:28px; border-radius:5px; flex:none; object-fit:cover; }
.skill-log-meal-recipe-item span{
  width:100%;
  overflow:hidden;
  font-size:9px;
  font-weight:700;
  line-height:1.25;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.skill-log-stats-modal .modal-card{ max-width:min(92vw, 420px); }
.skill-log-stats-modal h2{
  margin:0;
  padding-right:30px;
  color:var(--ink);
  font-size:var(--fs-md);
}
.skill-log-stats-scale{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:6px 10px;
  margin-top:8px;
}
.skill-log-stats-scale-buttons{
  display:inline-flex;
  gap:2px;
  padding:2px;
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  background:var(--paper-dim);
}
.skill-log-stats-scale-btn{
  min-height:25px;
  padding:3px 8px;
  border:0;
  border-radius:var(--radius-pill);
  background:transparent;
  color:var(--ink-soft);
  cursor:pointer;
  font:800 var(--fs-2xs)/1.2 "Noto Sans JP",sans-serif;
  white-space:nowrap;
}
.skill-log-stats-scale-btn.is-active{
  background:var(--selected-bg);
  color:var(--selected-ink);
}
.skill-log-stats-scale-btn:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:1px; }
.skill-log-stats-scale-nav{
  display:flex;
  align-items:center;
  gap:5px;
}
.skill-log-stats-scale-nav .skill-log-range-btn{
  width:26px;
  height:26px;
}
.skill-log-stats-scale-nav .skill-log-range-btn svg{ width:15px; height:15px; }
.skill-log-stats-scale-nav .skill-log-range{ font-size:var(--fs-2xs); }
.skill-log-stats-scale-nav .skill-log-range-btn:disabled{
  cursor:default;
  opacity:.4;
}
.skill-log-stats-tab-switch{
  display:flex;
  gap:3px;
  margin-top:10px;
  padding:3px;
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  background:var(--paper-dim);
}
.skill-log-stats-tab{
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  flex:1;
  min-width:0;
  min-height:30px;
  padding:5px 8px;
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  background:var(--paper);
  color:var(--ink-soft);
  cursor:pointer;
  font:800 var(--fs-xs)/1.2 "Noto Sans JP",sans-serif;
  white-space:nowrap;
}
.skill-log-stats-tab-icon{
  flex:none;
  width:16px;
  height:16px;
}
.skill-log-stats-tab-image{
  flex:none;
  width:16px;
  height:16px;
  border-radius:50%;
  object-fit:cover;
}
.skill-log-stats-tab.is-active{
  border:3px solid var(--selected-strong-border);
  background:var(--selected-soft-bg);
  color:var(--selected-soft-ink);
}
.skill-log-stats-tab[data-skill-log-stats-page-tab="fingerflick"].is-active{
  border-color:var(--skill-log-fingerflick-border);
  background:var(--skill-log-fingerflick-bg);
  color:var(--skill-log-fingerflick-border);
}
.skill-log-stats-tab[data-skill-log-stats-page-tab="shard"].is-active{
  border-color:var(--skill-log-shard-border);
  background:var(--skill-log-shard-bg);
  color:var(--skill-log-shard-border);
}
.skill-log-stats-tab[data-skill-log-stats-page-tab="mew"].is-active{
  border-color:var(--skill-log-mew-border);
  background:var(--skill-log-mew-bg);
  color:var(--skill-log-mew-border);
}
.skill-log-stats-tab:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:1px; }
.skill-log-stats-tab-hint{
  margin:5px 0 0;
  color:var(--ink-soft);
  font-size:var(--fs-2xs);
  font-weight:700;
  text-align:right;
}
.skill-log-stats-pager{
  display:flex;
  gap:10px;
  width:100%;
  min-width:0;
  margin-top:2px;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.skill-log-stats-pager::-webkit-scrollbar{ display:none; }
.skill-log-stats-page{
  flex:0 0 100%;
  min-width:0;
  padding:10px;
  border:2px solid var(--skill-log-fingerflick-border);
  border-radius:var(--radius-sm);
  background:var(--paper);
  scroll-snap-align:start;
  scroll-snap-stop:always;
}
.skill-log-stats-page[data-skill-log-stats-page="shard"]{ border-color:var(--skill-log-shard-border); }
.skill-log-stats-page[data-skill-log-stats-page="mew"]{ border-color:var(--skill-log-mew-border); }
.skill-log-stats-page[aria-hidden="true"]{ outline:none; }
.skill-log-stats-body{ margin-top:8px; }
.skill-log-mew-trend{
  margin:-2px 0 8px;
  padding:0 0 10px;
  border-bottom:1px solid var(--line);
}
.skill-log-mew-trend-head{
  display:flex;
  align-items:center;
  gap:5px;
  color:var(--ink);
}
.skill-log-mew-trend-head svg{ flex:none; color:var(--skill-log-mew-border); }
.skill-log-mew-trend-head h3{
  margin:0;
  font-size:var(--fs-xs);
  font-weight:900;
}
.skill-log-mew-trend-controls{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:6px 8px;
  margin:7px 0 5px;
}
.skill-log-mew-trend-range-buttons{
  display:inline-flex;
  gap:3px;
}
.skill-log-mew-trend-range-btn{
  box-sizing:border-box;
  min-height:27px;
  padding:3px 8px;
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  background:var(--paper);
  color:var(--ink-soft);
  cursor:pointer;
  font:700 var(--fs-2xs)/1.2 "Noto Sans JP",sans-serif;
  white-space:nowrap;
}
.skill-log-mew-trend-range-btn:hover{ background:var(--paper-dim); }
.skill-log-mew-trend-range-btn.is-active{
  padding:1px 6px;
  border:3px solid var(--selected-strong-border);
  background:var(--selected-soft-bg);
  color:var(--selected-soft-ink);
  font-weight:700;
}
.skill-log-mew-trend-range-btn:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:1px; }
.skill-log-mew-trend-range-nav{
  display:flex;
  align-items:center;
  gap:5px;
  min-width:0;
}
.skill-log-mew-trend-range-nav .skill-log-range-btn{
  width:26px;
  height:26px;
}
.skill-log-mew-trend-range-nav .skill-log-range-btn svg{ width:15px; height:15px; }
.skill-log-mew-trend-range-nav .skill-log-range{ font-size:var(--fs-2xs); }
.skill-log-mew-trend-range-nav .skill-log-range-btn:disabled{ cursor:default; opacity:.4; }
.skill-log-mew-trend-plot{
  display:grid;
  grid-template-columns:30px minmax(0,1fr);
  min-width:0;
}
.skill-log-mew-trend-y-axis{
  position:relative;
  height:142px;
  padding-right:5px;
  color:var(--ink-soft);
  font-size:8px;
  font-variant-numeric:tabular-nums;
  text-align:right;
}
.skill-log-mew-trend-y-axis span{
  position:absolute;
  right:5px;
  transform:translateY(-50%);
  white-space:nowrap;
}
.skill-log-mew-trend-y-axis span:first-child{ transform:none; }
.skill-log-mew-trend-y-axis span:last-child{ transform:translateY(-100%); }
.skill-log-mew-trend-chart-wrap{ min-width:0; }
.skill-log-mew-trend-chart{
  display:block;
  width:100%;
  height:142px;
  overflow:visible;
}
.skill-log-mew-trend-grid-line{ stroke:var(--line); stroke-width:1; }
.skill-log-mew-trend-line{
  fill:none;
  stroke:var(--skill-log-mew-border);
  stroke-width:2.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.skill-log-mew-trend-point{
  fill:var(--paper);
  stroke:var(--skill-log-mew-border);
  stroke-width:2;
}
.skill-log-mew-trend-axis{
  display:grid;
  grid-template-columns:var(--skill-log-mew-trend-columns);
  min-height:20px;
  border-top:1px solid var(--line);
}
.skill-log-mew-trend-axis span{
  min-width:0;
  padding:3px 1px 0;
  overflow:hidden;
  color:var(--ink-soft);
  font-size:8px;
  font-variant-numeric:tabular-nums;
  text-align:center;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.skill-log-shard-week-stats{
  margin-top:8px;
  padding:8px 0 0;
  border-top:1px solid var(--line);
}
.skill-log-shard-week-stats-head{
  display:flex;
  align-items:center;
  gap:5px;
  color:var(--ink);
}
.skill-log-shard-week-stats-head svg{ flex:none; color:var(--skill-log-shard-border); }
.skill-log-shard-week-stats-head h3{
  margin:0;
  font-size:var(--fs-xs);
  font-weight:900;
}
.skill-log-shard-week-stats-legend{
  display:flex;
  flex-wrap:wrap;
  gap:5px 8px;
  margin:5px 0 7px;
  color:var(--ink-soft);
  font-size:9px;
  line-height:1.3;
}
.skill-log-shard-week-stats-legend-item{ display:inline-flex; align-items:center; gap:3px; }
.skill-log-shard-week-stats-swatch{ width:9px; height:9px; border-radius:2px; }
.skill-log-shard-week-stats-swatch.is-shard{ background:#C9A227; }
.skill-log-shard-week-stats-swatch.is-skill-shard{ background:#8B5CF6; }
.skill-log-shard-week-stats-swatch.is-research-exp{ background:#5FA8DE; }
.skill-log-shard-week-stats-scroll{
  max-height:232px;
  overflow:auto;
  overscroll-behavior:contain;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--paper);
  -webkit-overflow-scrolling:touch;
}
.skill-log-shard-week-stats-board{
  --skill-log-shard-week-stats-label-w:78px;
  --skill-log-shard-week-stats-col-w:72px;
  --skill-log-shard-week-stats-cols:1;
  min-width:var(--skill-log-shard-week-stats-label-w);
  color:var(--ink);
}
.skill-log-shard-week-stats-empty{
  margin:0;
  padding:30px 14px;
  color:var(--ink-soft);
  font-size:var(--fs-2xs);
  text-align:center;
}
.skill-log-shard-week-stats-chart-row,
.skill-log-shard-week-stats-axis-row{
  display:grid;
  grid-template-columns:var(--skill-log-shard-week-stats-label-w) repeat(var(--skill-log-shard-week-stats-cols), var(--skill-log-shard-week-stats-col-w));
}
.skill-log-shard-week-stats-chart-row{ min-height:156px; border-top:1px solid var(--line); }
.skill-log-shard-week-stats-label{
  position:sticky;
  left:0;
  z-index:2;
  display:flex;
  align-items:center;
  padding:6px 7px;
  border-right:1px solid var(--line);
  background:var(--paper-dim);
  color:var(--ink-soft);
  font-size:9px;
  font-weight:800;
  line-height:1.3;
}
.skill-log-shard-week-stats-chart-row .skill-log-shard-week-stats-label{
  position:relative;
  align-items:flex-start;
  padding-top:10px;
}
.skill-log-shard-week-stats-plot{
  grid-column:2 / span var(--skill-log-shard-week-stats-cols);
  position:relative;
  min-height:156px;
  background-image:linear-gradient(to bottom, transparent calc(25% - .5px), var(--line) calc(25% - .5px), var(--line) calc(25% + .5px), transparent calc(25% + .5px));
  background-size:100% 25%;
  border-bottom:1px solid var(--line);
}
.skill-log-shard-week-stats-svg{ display:block; width:100%; height:156px; overflow:visible; }
.skill-log-shard-week-stats-line{ fill:none; stroke:var(--navy); stroke-width:2.3; stroke-linejoin:round; stroke-linecap:round; }
.skill-log-shard-week-stats-dot{ fill:var(--paper); stroke:var(--navy); stroke-width:2.3; }
.skill-log-shard-week-stats-bar-shard{ fill:#C9A227; fill-opacity:.62; stroke:var(--paper); stroke-width:.8; }
.skill-log-shard-week-stats-bar-skill-shard{ fill:#8B5CF6; fill-opacity:.68; stroke:var(--paper); stroke-width:.8; }
.skill-log-shard-week-stats-bar-exp{ fill:#5FA8DE; fill-opacity:.56; stroke:var(--paper); stroke-width:.8; }
.skill-log-shard-week-stats-bar-label{
  fill:var(--ink);
  font-size:7px;
  font-weight:800;
  font-variant-numeric:tabular-nums;
  paint-order:stroke fill;
  stroke:var(--paper);
  stroke-width:2px;
  stroke-linejoin:round;
  pointer-events:none;
}
.skill-log-shard-week-stats-y-tick{
  position:absolute;
  right:4px;
  color:var(--ink-soft);
  font-size:7px;
  font-variant-numeric:tabular-nums;
  transform:translateY(50%);
}
.skill-log-shard-week-stats-y-tick.is-top{ top:3px; transform:none; }
.skill-log-shard-week-stats-y-tick.is-bottom{ bottom:2px; transform:none; }
.skill-log-shard-week-stats-axis-row{ min-height:34px; border-bottom:1px solid var(--line); }
.skill-log-shard-week-stats-axis-row .skill-log-shard-week-stats-label{ z-index:3; }
.skill-log-shard-week-stats-week-head{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:3px 2px;
  border-right:1px solid var(--line);
  color:var(--ink-soft);
  font-size:8px;
  font-weight:800;
  line-height:1.15;
  text-align:center;
  white-space:pre-line;
  font-variant-numeric:tabular-nums;
}
.skill-log-stats-list{
  display:flex;
  flex-direction:column;
  gap:5px;
  max-height:50vh;
  overflow-y:auto;
}
.skill-log-stats-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:7px 10px;
  border-radius:var(--radius-sm);
  background:var(--paper-dim);
  color:var(--ink);
  font-size:var(--fs-xs);
  font-weight:700;
}
.skill-log-stats-row span:last-child{ color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.skill-log-stats-total{
  margin:8px 0 0;
  color:var(--ink-soft);
  font-size:var(--fs-2xs);
  font-weight:700;
  text-align:right;
}
.skill-log-stats-empty{
  margin:8px 0 0;
  color:var(--ink-soft);
  font-size:var(--fs-xs);
}
.skill-log-fingerflick-filter{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  margin:0 0 8px;
  padding:5px 0;
  color:var(--ink-soft);
  font-size:var(--fs-2xs);
  font-weight:800;
}
.skill-log-fingerflick-filter-toggle{
  box-sizing:border-box;
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  flex:none;
  width:58px;
  height:28px;
  padding:0 7px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--paper);
  color:var(--ink-soft);
  cursor:pointer;
  font:800 var(--fs-2xs)/1 "Noto Sans JP",sans-serif;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
.skill-log-fingerflick-filter-toggle[aria-checked="true"]{
  justify-content:flex-start;
  border:3px solid var(--selected-strong-border);
  background:var(--selected-soft-bg);
  color:var(--selected-soft-ink);
}
.skill-log-fingerflick-filter-toggle:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; }
.skill-log-fingerflick-filter-toggle-state{ position:relative; z-index:1; }
.skill-log-fingerflick-filter-toggle-thumb{
  position:absolute;
  top:3px;
  left:3px;
  width:20px;
  height:20px;
  border-radius:50%;
  background:var(--line-strong);
  box-shadow:0 1px 3px rgba(0,0,0,.25);
  transition:transform .15s ease,background-color .15s ease;
}
.skill-log-fingerflick-filter-toggle[aria-checked="true"] .skill-log-fingerflick-filter-toggle-thumb{
  background:var(--selected-strong-border);
  transform:translateX(28px);
}
.skill-log-shard-history{
  display:flex;
  flex-direction:column;
  gap:6px;
  max-height:46vh;
  overflow-y:auto;
}
.skill-log-shard-history-row{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:3px 8px;
  padding:7px 9px;
  border-radius:var(--radius-sm);
  background:var(--paper-dim);
}
.skill-log-shard-history-name{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
  color:var(--ink);
  font-size:var(--fs-xs);
  font-weight:800;
}
.skill-log-shard-history-icon{
  flex:none;
  width:28px;
  height:28px;
  object-fit:contain;
}
.skill-log-shard-history-icon.is-placeholder{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  border-radius:50%;
  background:var(--paper);
  color:var(--ink-soft);
  font-size:var(--fs-2xs);
  font-weight:900;
}
.skill-log-shard-history-name-text{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.skill-log-shard-history-amount{
  color:var(--ink);
  font-size:var(--fs-xs);
  font-weight:900;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.skill-log-fingerflick-history-skill{
  max-width:180px;
  overflow:hidden;
  color:var(--ink);
  font-size:var(--fs-xs);
  font-weight:900;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.skill-log-shard-history-time{
  color:var(--ink-soft);
  font-size:var(--fs-2xs);
  font-weight:700;
}
.skill-log-shard-history-note{
  color:var(--ink-soft);
  font-size:var(--fs-2xs);
  font-weight:700;
  text-align:right;
}
.skill-log-stats-section + .skill-log-stats-section{
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--line);
}
.skill-log-stats-subheading{
  margin-bottom:7px;
  color:var(--ink);
  font-size:11px;
  font-weight:800;
}

/* 発動内訳: 通常/大成功の100%積み上げ横棒 */
.skill-log-crit-bar-track{
  display:flex;
  gap:2px;
  height:16px;
  overflow:hidden;
  border-radius:8px;
  background:var(--paper-dim);
}
.skill-log-crit-bar-seg{ height:100%; }
.skill-log-crit-bar-seg.is-normal{ background:var(--ink-soft); }
.skill-log-crit-bar-seg.is-critical{ background:var(--skill-log-critical-pink); }
.skill-log-crit-bar-seg:first-child{ border-radius:8px 0 0 8px; }
.skill-log-crit-bar-seg:last-child{ border-radius:0 8px 8px 0; }
.skill-log-crit-bar-seg:only-child{ border-radius:8px; }
.skill-log-crit-bar-legend{
  display:flex;
  flex-wrap:wrap;
  gap:6px 14px;
  margin-top:7px;
  color:var(--ink-soft);
  font-size:var(--fs-2xs);
  font-weight:700;
}
.skill-log-crit-bar-legend span{ display:flex; align-items:center; gap:5px; }
.skill-log-crit-dot{
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:50%;
}
.skill-log-crit-dot.is-normal{ background:var(--ink-soft); }
.skill-log-crit-dot.is-critical{ background:var(--skill-log-critical-pink); }

/* 対象になった割合: ドーナツ円グラフ */
.skill-log-donut-wrap{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px;
}
.skill-log-donut-svg{ width:110px; height:110px; flex:none; }
.skill-log-donut-bg{ fill:none; stroke:var(--paper-dim); }
.skill-log-donut-seg{ fill:none; }
.skill-log-donut-center{
  fill:var(--ink);
  font-size:14px;
  font-weight:800;
  text-anchor:middle;
}
.skill-log-donut-legend{
  display:flex;
  flex:1 1 130px;
  flex-direction:column;
  gap:5px;
  min-width:0;
  color:var(--ink);
  font-size:var(--fs-2xs);
  font-weight:700;
}
.skill-log-donut-legend span{
  display:flex;
  align-items:center;
  gap:6px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.skill-log-donut-dot{
  width:9px;
  height:9px;
  flex:none;
  border-radius:50%;
}

/* アメの対象: 寝顔図鑑(.dfr-card)を参考にしたカード表示 */
.skill-log-mew-candy-card-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:7px;
  max-height:44vh;
  overflow-y:auto;
}
.skill-log-mew-candy-card{
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
  padding:7px 8px;
  border:2px solid var(--line);
  border-radius:8px;
  background:var(--paper);
}
.skill-log-mew-candy-card-icon-wrap{
  position:relative;
  flex:0 0 32px;
  width:32px;
  height:32px;
}
.skill-log-mew-candy-card-icon{ display:block; width:100%; height:100%; object-fit:contain; }
.skill-log-mew-candy-card-badge{
  position:absolute;
  top:-4px;
  right:-8px;
  min-width:18px;
  padding:1px 4px;
  border:1px solid rgba(150,105,0,.5);
  border-radius:999px;
  background:rgba(255,250,225,.94);
  color:#6B4C00;
  font-size:9px;
  font-weight:900;
  line-height:1.3;
  text-align:center;
  white-space:nowrap;
  box-shadow:0 1px 2px rgba(0,0,0,.18);
}
.skill-log-mew-candy-card-copy{ min-width:0; }
.skill-log-mew-candy-card-name{
  overflow:hidden;
  color:var(--ink);
  font-size:var(--fs-xs);
  font-weight:700;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.skill-log-mew-candy-card-sub{
  margin-top:1px;
  color:var(--ink-soft);
  font-size:10px;
  font-weight:700;
}
.skill-log-mew-candy-modal .modal-card{ max-width:min(92vw, 420px); }
.skill-log-mew-candy-modal h2{
  margin:0;
  padding-right:30px;
  color:var(--ink);
  font-size:var(--fs-md);
}
.skill-log-mew-candy-choices{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:7px;
  max-height:50vh;
  overflow-y:auto;
}
.skill-log-mew-candy-choice{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  min-height:64px;
  padding:6px 4px;
  border:2px solid var(--skill-log-slot-color, var(--line));
  border-radius:var(--radius-sm);
  background:var(--paper);
  cursor:pointer;
}
.skill-log-mew-candy-choice img{ width:30px; height:30px; object-fit:contain; }
.skill-log-mew-candy-choice span{
  overflow:hidden;
  max-width:100%;
  color:var(--ink);
  font-size:9.5px;
  font-weight:800;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.skill-log-mew-candy-add{
  min-height:64px;
  padding:6px 4px;
  border:2px dashed var(--line);
  border-radius:var(--radius-sm);
  background:var(--paper-dim);
  color:var(--ink-soft);
  cursor:pointer;
  font:800 var(--fs-2xs)/1.3 "Noto Sans JP",sans-serif;
}
.skill-log-member-modal h2{
  margin:0;
  padding-right:32px;
  color:var(--ink);
  font-size:var(--fs-md);
}
.skill-log-modal-desc{
  margin:5px 0 12px;
  color:var(--ink-soft);
  font-size:var(--fs-xs);
}
.skill-log-picker-note{
  margin:0 0 9px;
  color:var(--ink-soft);
  font-size:var(--fs-2xs);
  line-height:1.5;
}
.skill-log-member-board > .cmp-board{
  min-width:0;
  border-color:var(--skill-log-picker-color, var(--line));
}
.skill-log-member-board > .cmp-board.is-unassigned-picker .cmp-board-badge svg{ width:15px; height:15px; }
/* この画面では選択済み個体をチームに入れる操作だけに絞る。
   保存・呼び出しは個体ボード本来のものを残し、複製/枠移動/削除は隠す。 */
.skill-log-member-board .cmp-icon-btn[data-act="dup"],
.skill-log-member-board .cmp-board-head-right{ display:none; }
.skill-log-member-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:12px;
}
.skill-log-member-reset{
  margin-right:auto;
  border:1px solid var(--danger);
  background:var(--paper);
  color:var(--danger);
}
.skill-log-member-reset[hidden]{ display:none; }
.skill-log-member-actions button{
  min-height:36px;
  padding:6px 13px;
  border-radius:var(--radius-sm);
  cursor:pointer;
  font:800 var(--fs-xs)/1.2 "Noto Sans JP",sans-serif;
}
.skill-log-member-cancel{
  border:1px solid var(--line);
  background:var(--paper-dim);
  color:var(--ink-soft);
}
.skill-log-member-cancel.is-danger{ border-color:var(--danger); color:var(--danger); }
.skill-log-member-confirm{
  border:1px solid var(--skill-log-picker-color, var(--navy));
  background:var(--skill-log-picker-color, var(--navy));
  color:var(--skill-log-picker-ink, var(--paper));
}
.skill-log-member-confirm:disabled{ opacity:.45; cursor:default; }

/* ---- 行・プロットの編集 ---- */
.skill-log-edit-modal .modal-card{ max-width:min(92vw, 390px); }
.skill-log-edit-modal h2{
  margin:0;
  padding-right:30px;
  color:var(--ink);
  font-size:var(--fs-md);
}
.skill-log-row-history{
  margin:14px 0 12px;
  padding-top:11px;
  border-top:1px solid var(--line);
}
.skill-log-row-history h3{
  margin:0 0 8px;
  color:var(--ink);
  font-size:var(--fs-xs);
  font-weight:900;
}
.skill-log-row-history-table{
  overflow:hidden;
  border-top:1px solid var(--line);
}
.skill-log-row-history-header,
.skill-log-row-history-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 76px 70px;
  align-items:center;
  column-gap:8px;
  min-height:39px;
  border-bottom:1px solid var(--line);
  color:var(--ink);
  font-size:var(--fs-2xs);
}
.skill-log-row-history-header{
  min-height:32px;
  color:var(--ink-soft);
  font-weight:800;
}
.skill-log-row-history-header span:not(:first-child),
.skill-log-row-history-count,
.skill-log-row-history-average{ text-align:right; }
.skill-log-row-history-date{
  display:flex;
  align-items:center;
  min-width:0;
  gap:8px;
  white-space:nowrap;
}
.skill-log-row-history-marker{
  flex:none;
  color:var(--ink);
  font-size:12px;
  line-height:1;
}
.skill-log-row-history-count,
.skill-log-row-history-average{ font-variant-numeric:tabular-nums; }
.skill-log-row-history-empty{
  margin:10px 0 0;
  color:var(--ink-soft);
  font-size:var(--fs-2xs);
  text-align:center;
}
.skill-log-row-history-more{
  width:100%;
  min-height:34px;
  margin-top:9px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--paper-dim);
  color:var(--ink);
  cursor:pointer;
  font:800 var(--fs-2xs)/1.2 "Noto Sans JP",sans-serif;
}
.skill-log-row-history-more:hover{ border-color:var(--navy); }
.skill-log-edit-actions{ display:grid; gap:8px; margin-top:14px; }
.skill-log-edit-actions button{
  min-height:36px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--paper-dim);
  color:var(--ink);
  cursor:pointer;
  font:800 var(--fs-xs)/1.2 "Noto Sans JP",sans-serif;
}
.skill-log-edit-actions button.is-primary{ border-color:var(--navy); background:var(--navy); color:#fff; }
.skill-log-edit-actions button.is-danger{ border-color:var(--danger); color:var(--danger); }
.skill-log-edit-actions button:disabled{ cursor:default; opacity:.42; }
.skill-log-event-time-label{ display:block; margin:12px 0 4px; color:var(--ink-soft); font-size:var(--fs-2xs); font-weight:800; }
.skill-log-event-time{
  width:100%;
  min-height:38px;
  padding:6px 8px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--paper);
  color:var(--ink);
  font:700 var(--fs-xs)/1.2 "Noto Sans JP",sans-serif;
}
.skill-log-duty-time{
  margin:0;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--paper-dim);
  color:var(--ink);
  font-size:var(--fs-xs);
  font-weight:700;
  line-height:1.45;
  text-align:center;
}
.skill-log-row-duty-add{
  margin-top:12px;
  padding:9px 10px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--paper-dim);
}
.skill-log-row-duty-add-title{
  margin:0 0 6px;
  color:var(--ink-soft);
  font-size:var(--fs-2xs);
  font-weight:800;
}
.skill-log-row-duty-add-fields{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:10px;
}
.skill-log-row-duty-add-field{ flex:1; min-width:0; }
.skill-log-row-duty-add-field .skill-log-event-time-label{ margin:0 0 4px; }
.skill-log-row-duty-add-field .skill-log-event-time{
  display:block;
  box-sizing:border-box;
  width:100%;
  min-width:0;
  max-width:100%;
  min-height:44px;
  background:var(--paper);
  font-size:16px;
  text-align:left;
}
.skill-log-row-duty-add-field .skill-log-event-time::-webkit-date-and-time-value{
  min-height:1.2em;
  text-align:left;
}
.skill-log-row-duty-add-btn{
  width:100%;
  min-height:36px;
  margin-top:9px;
  border:1px solid var(--navy);
  border-radius:var(--radius-sm);
  background:var(--navy);
  color:#fff;
  cursor:pointer;
  font:800 var(--fs-xs)/1.2 "Noto Sans JP",sans-serif;
}
.skill-log-row-duty-add-btn:hover{ filter:brightness(1.08); }
.skill-log-event-save-note{
  margin:5px 0 0;
  color:var(--ink-soft);
  font-size:var(--fs-2xs);
  line-height:1.35;
}

@media (max-width:760px){
  :root{ --skill-log-label-width:142px; }
  main{ padding-right:8px; padding-left:8px; }
  .skill-log-section{ padding:10px; }
  .skill-log-range-controls{ padding:8px; }
  .skill-log-range-nav{ flex-basis:100%; justify-content:center; }
  .skill-log-control-section{
    left:8px;
    right:8px;
    bottom:calc(var(--app-nav-inset-bottom, 88px) + 6px);
    max-height:48vh;
    padding:8px;
  }
  .skill-log-slot{ min-height:184px; }
  .skill-log-slot-body{ min-height:88px; }
  .skill-log-slot-body img{ width:42px; height:42px; }
  .skill-log-slot-virtual-icon{ width:38px; height:38px; }
  .skill-log-slot-virtual-icon svg{ width:24px; height:24px; }
  .skill-log-action-btn{ min-height:60px; font-size:10px; }
  .skill-log-action-btn.is-miss{ min-height:30px; }
}
@media (max-width:390px){
  :root{ --skill-log-label-width:128px; }
  .skill-log-section-head{ gap:5px; }
  .skill-log-legend{ font-size:10px; }
  .skill-log-chart-sort-btn{ padding-right:6px; padding-left:6px; font-size:10px; }
  .skill-log-otebo-summary{ font-size:9px; }
  .skill-log-panel-settings-btn{ padding-right:6px; padding-left:6px; font-size:10px; }
  .skill-log-control-mode-btn{ padding-right:5px; padding-left:5px; font-size:9px; }
  .skill-log-slot{ min-height:176px; }
  .skill-log-slot-head{ padding-right:3px; padding-left:3px; }
  .skill-log-slot-letter{ min-width:20px; height:20px; font-size:10px; }
  .skill-log-swap-btn{ font-size:10px; }
  .skill-log-slot-body{ padding-right:2px; padding-left:2px; }
  .skill-log-slot-body img{ width:36px; height:36px; }
  .skill-log-slot-name{ font-size:10px; }
  .skill-log-slot-rate{ font-size:9px; }
}
html[data-layout="pc"]{
  --skill-log-content-max:1260px;
}

/* 日付行を展開して各回の発動時刻と内容を表示する。 */
.skill-log-row-history-day > summary{ cursor:pointer; list-style:none; }
.skill-log-row-history-day > summary::-webkit-details-marker{ display:none; }
.skill-log-row-history-day > summary:focus-visible{ outline:2px solid var(--navy); outline-offset:2px; }
.skill-log-row-history-day[open] .skill-log-row-history-marker{ transform:rotate(90deg); }
.skill-log-row-history-events{ margin:0; padding:8px 10px 12px; list-style:none; background:var(--paper-dim); border-bottom:1px solid var(--line); }
.skill-log-row-history-events li{ display:flex; gap:12px; padding:5px 0; font-size:12px; line-height:1.6; }
.skill-log-row-history-events time{ flex-shrink:0; font-variant-numeric:tabular-nums; }
.skill-log-row-history-events li > span{ min-width:0; overflow-wrap:anywhere; }