/* =========================================================
   components.css — 画面をまたいで出る部品
   立体の作り方は1つに統一する：
     ぼかさないオフセット影で「厚み」を作り、:active で厚みぶん沈める。
     border-bottom で厚みを作るとレイアウトがずれるので使わない。
   ========================================================= */

/* ── 押せるボタン（厚みがある）───────────────────────── */
.btn{
  --btn-bg: var(--white);
  --btn-edge: var(--edge);
  --btn-fg: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: var(--tap);
  padding: 12px 18px;
  border: 0;
  border-radius: var(--r-btn);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--fs-body);
  font-weight: 700;
  letter-spacing: .01em;
  text-decoration: none;      /* a.btn の既定の下線を消す */
  cursor: pointer;
  box-shadow: 0 var(--depth) 0 var(--btn-edge);
  transition: transform 70ms var(--ease), box-shadow 70ms var(--ease);
}
.btn:active{
  transform: translateY(var(--depth));
  box-shadow: 0 0 0 var(--btn-edge);
}
.btn:focus-visible{ outline: 3px solid var(--accent-deep); outline-offset: 3px; }
.btn[disabled]{ opacity: .45; box-shadow: 0 var(--depth) 0 var(--btn-edge); }

.btn--accent{ --btn-bg: var(--on-accent); --btn-edge: var(--edge-accent); --btn-fg: var(--white); }
.btn--ink{    --btn-bg: var(--ink);    --btn-edge: var(--edge-ink);    --btn-fg: var(--paper); }
.btn--quiet{  --btn-bg: var(--paper-2); --btn-edge: var(--paper-3); }
.btn--sm{ min-height: var(--tap); padding: 10px 16px; font-size: var(--fs-sm); --depth: 3px; }

/* ── カード ───────────────────────────────────── */
.card{
  background: var(--white);
  border-radius: var(--r-card);
  padding: 16px;
  box-shadow: var(--lift);
}
.card + .card{ margin-top: 12px; }
.card--flat{ background: var(--paper-2); box-shadow: none; }

.sec{ margin-top: 22px; }
.sec:first-child{ margin-top: 4px; }
.sec > h2{
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.45;
  margin-bottom: 4px;
}
.sec > .lead{
  font-size: var(--fs-sm);
  color: var(--ink-2);
  line-height: 1.7;
  margin-bottom: 12px;
}

.eyebrow{
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--accent-deep);
  margin-bottom: 6px;
}

/* ── 主役の数字（ポイント）───────────────────────── */
.hero-pt{
  position: relative;
  border-radius: var(--r-card);
  padding: 20px 18px 18px;
  color: var(--white);
  background:
    radial-gradient(120% 90% at 80% 0%, #8A6849 0%, transparent 55%),
    linear-gradient(160deg, var(--on-accent) 0%, #5F4632 100%);
  box-shadow: 0 var(--depth) 0 var(--edge-accent), var(--lift-2);
  overflow: hidden;
}
.hero-pt .cap{
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .08em;
}
.hero-pt .big{
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 2px;
}
.hero-pt .big b{
  font-family: var(--ff-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-hero);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.02em;
}
.hero-pt .big span{ font-size: var(--fs-sm); font-weight: 700; }
.hero-pt .sub{
  margin-top: 8px;
  font-size: var(--fs-sm);
  line-height: 1.6;
}

/* 3つ並びの小さい数字 */
.stat3{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.stat3 > div{
  background: rgba(255, 255, 255, .16);
  border-radius: 12px;
  padding: 9px 8px;
  text-align: center;
}
.stat3 b{
  display: block;
  font-family: var(--ff-num);
  font-variant-numeric: tabular-nums;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
}
.stat3 span{ font-size: 11px; }

/* 週の点（今週どの曜日に上げたか） */
.week{ display: flex; gap: 6px; margin-top: 10px; }
.week i{
  flex: 1 1 0;
  height: 30px;
  border-radius: 9px;
  background: var(--paper-2);
  display: grid; place-items: center;
  font-size: 11px;
  font-style: normal;
  color: var(--ink-3);
}
.week i.on{
  background: var(--on-accent);
  color: var(--white);
  font-weight: 700;
  box-shadow: 0 2px 0 var(--edge-accent);
}
.week i.today{ outline: 2px solid var(--accent-deep); outline-offset: 1px; }

/* ── 進み具合のバー ───────────────────────────── */
.bar{
  height: 10px;
  border-radius: var(--r-chip);
  background: var(--paper-3);
  overflow: hidden;
}
.bar > i{
  display: block;
  height: 100%;
  border-radius: var(--r-chip);
  background: linear-gradient(90deg, var(--rose), var(--accent));
}
.bar-row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
  font-size: var(--fs-sm);
}
.bar-row b{ font-family: var(--ff-num); font-variant-numeric: tabular-nums; font-weight: 800; }

/* ── 表（ポイントの決め方など）──────────────────── */
.tbl{ width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.tbl th, .tbl td{
  padding: 9px 4px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.tbl th{ font-weight: 700; color: var(--ink-2); font-size: var(--fs-label); letter-spacing: .04em; }
.tbl td.n, .tbl th.n{
  text-align: right;
  font-family: var(--ff-num);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tbl tr:last-child td{ border-bottom: 0; }
.tbl tfoot td{ font-weight: 800; border-top: 2px solid var(--ink); border-bottom: 0; }

/* ── ラベル ───────────────────────────────────── */
.chip{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--r-chip);
  background: var(--paper-2);
  color: var(--ink-2);
  font-size: var(--fs-label);
  font-weight: 700;
  line-height: 1.5;
}
.chip--on{ background: #E4EEE4; color: #3E6B45; }
.chip--wait{ background: #F4EAD9; color: #86612B; }
.chip--accent{ background: var(--on-accent); color: var(--white); }

.note{
  font-size: var(--fs-label);
  color: var(--ink-3);
  line-height: 1.7;
  margin-top: 8px;
}

/* ── 空の状態 ─────────────────────────────────── */
.empty{
  text-align: center;
  padding: 26px 16px;
  color: var(--ink-3);
  font-size: var(--fs-sm);
  line-height: 1.8;
}