/* 七五八庵 運用マニュアル — design-md/custom/shopify-admin-ja/DESIGN.md 準拠（GEONA運用マニュアルと同じ値） */

:root {
  --primary: #303030;
  --secondary: #616161;
  --link: #005bd3;
  --canvas: #f1f1f1;
  --surface: #ffffff;
  --surface-secondary: #f7f7f7;
  --border: #e3e3e3;
  --border-secondary: #ebebeb;
  --caution-surface: #fff8db;
  --caution-text: #4f4700;
  --info-surface: #eaf4ff;
  --info-text: #003a5a;
  --box: #d82c38;

  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;

  --s-xs: 4px;
  --s-sm: 8px;
  --s-md: 12px;
  --s-lg: 16px;
  --s-xl: 20px;
  --s-2xl: 24px;
  --s-3xl: 32px;

  --shadow-card:
    0 5px 5px -2.5px rgba(0,0,0,.03),
    0 3px 3px -1.5px rgba(0,0,0,.02),
    0 2px 2px -1px rgba(0,0,0,.02),
    0 1px 1px -.5px rgba(0,0,0,.03),
    0 .5px .5px rgba(0,0,0,.04),
    0 0 0 1px rgba(0,0,0,.06);

  --font: Inter, "Noto Sans JP", -apple-system, BlinkMacSystemFont,
          "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: var(--s-2xl) var(--s-lg) 64px;
  background: var(--canvas);
  color: var(--primary);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 450;
  line-height: 1.75;
}

.wrap { max-width: 720px; margin: 0 auto; }

h1 { font-size: 20px; font-weight: 600; line-height: 1.3; margin: 0 0 var(--s-sm); }
h2 { font-size: 18px; font-weight: 600; line-height: 1.35; margin: var(--s-3xl) 0 var(--s-md); }

.lead { color: var(--secondary); margin: 0 0 var(--s-2xl); }

p { margin: var(--s-sm) 0; }

/* ---- カード ---- */

.card {
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: var(--s-lg) var(--s-xl);
  margin-bottom: var(--s-lg);
}

.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }

/* ---- 目次 ---- */

.toc { list-style: none; margin: 0; padding: 0; }
.toc li + li { margin-top: var(--s-md); padding-top: var(--s-md); border-top: 1px solid var(--border-secondary); }
.toc a { color: var(--primary); text-decoration: none; font-weight: 550; }
.toc a:hover { color: var(--link); text-decoration: underline; }
.toc .desc { display: block; color: var(--secondary); font-weight: 450; font-size: 13px; line-height: 1.55; margin-top: 2px; }

/* ---- 手順 ---- */

ol.steps { counter-reset: step; list-style: none; margin: 0; padding: 0; }

ol.steps > li {
  counter-increment: step;
  position: relative;
  padding-left: 36px;
  margin-bottom: var(--s-xl);
}

ol.steps > li:last-child { margin-bottom: 0; }

ol.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 3px;
  width: 24px;
  height: 24px;
  border-radius: 9999px;
  background: var(--primary);
  color: #fff;
  font-size: 12px;
  font-weight: 550;
  line-height: 24px;
  text-align: center;
}

ol.steps > li > strong { font-weight: 600; }

ul { padding-left: 1.25em; margin: var(--s-sm) 0; }
li + li { margin-top: var(--s-xs); }

/* ---- UI要素の表現 ---- */

.ui {
  display: inline-block;
  background: var(--surface-secondary);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 0 5px;
  font-size: 13px;
  font-weight: 550;
  line-height: 1.6;
}

/* ---- コールアウト ---- */

.note { border-radius: var(--r-md); padding: var(--s-md) var(--s-lg); margin: var(--s-lg) 0; }
.note > :first-child { margin-top: 0; }
.note > :last-child { margin-bottom: 0; }
.note.info { background: var(--info-surface); color: var(--info-text); }
.note.caution { background: var(--caution-surface); color: var(--caution-text); }
.note .label { display: block; font-weight: 600; margin-bottom: var(--s-xs); }

/* ---- 表（返金額の早見表） ---- */

/* 2列・10行。スマホ幅でも横にはみ出さない */
table.amounts { border-collapse: collapse; margin: var(--s-md) 0; font-size: 14px; }

table.amounts th,
table.amounts td {
  padding: var(--s-xs) var(--s-lg);
  border-bottom: 1px solid var(--border);
  text-align: right;
  white-space: nowrap;
}

table.amounts th { font-weight: 550; color: var(--secondary); }
table.amounts th:first-child,
table.amounts td:first-child { padding-left: 0; }

/* ---- スクリーンショット ---- */

figure.shot { margin: var(--s-md) 0 var(--s-lg); }

/* 画像は等倍（1倍）で撮影している。SVGで切り出しと赤枠を重ね、width/height 属性の実寸を上限にして狭い画面では縮める */
figure.shot svg {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
}

figure.shot .box { fill: none; stroke: var(--box); stroke-width: 3; }

/* 手順の中に置いたときは、番号のぶんだけ左に寄せない */
ol.steps > li > figure.shot { margin-left: -36px; }

/* ---- 戻る・フッター ---- */

.back { display: inline-block; margin-bottom: var(--s-lg); color: var(--secondary); font-size: 13px; text-decoration: none; }
.back:hover { color: var(--link); }

.footer {
  margin-top: var(--s-3xl);
  padding-top: var(--s-lg);
  border-top: 1px solid var(--border);
  color: var(--secondary);
  font-size: 13px;
}