/* SketchCookie ユーザーガイド v2 — 共通スタイル
   ブランド: ポピー（本体のテーマ色 #F0482E）。薄い色もポピー寄り（ピンク＝旧カーマインに見えないよう、黄みを少し足す・依頼 2026-10-14）・角丸なし（依頼 2026-10-12） */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* キーカラー（タブのモードで替わる・直子さん 10/19「ユーザーガイドも全部キーカラーに」）。値はクッキー型（ポピー）。
     モードのタブでは、本体（app.js の guideInk）がこの iframe の :root に、そのモードの色から作った値を入れる。色はここの変数だけを通す */
  --ui-ink:      240, 72, 46;    /* ① #F0482E */
  --ui-ink-br:   242, 96, 63;    /* 明るい #F2603F */
  --ui-ink-lt:   255, 230, 214;  /* うすい地（目次の選択中） #FFE6D6 */
  --ui-ink-tag:  255, 243, 236;  /* もっとうすい地（札・表の見出し） #FFF3EC */
  --ui-ink-note: 255, 247, 241;  /* メモの地 #FFF7F1 */
  --ui-ink-nbd:  247, 171, 140;  /* メモの枠 #F7AB8C */
  --ui-ink-acc:  224, 64, 31;    /* 見出しの字（少し濃い） #E0401F */
  --red:    rgb(var(--ui-ink));
  --red-br: rgb(var(--ui-ink-br));
  --red-lt: rgb(var(--ui-ink-lt));
  --ink:    #1a1a1a;
  --gray:   #6b6b6b;
  --line:   #e3ddd6;
  --bg:     #FAFAF7;
  --card:   #ffffff;
  --tag-bg: rgb(var(--ui-ink-tag));
  --accent: rgb(var(--ui-ink-acc));
  --note:   rgb(var(--ui-ink-note));
  --note-bd:rgb(var(--ui-ink-nbd));
  --tip-bd: var(--red);
  --blue:   #4DA3FF;
  --sidebar-w: 232px;
}

html { scroll-behavior: smooth; }
:root.modeSwitching *, :root.modeSwitching *::before, :root.modeSwitching *::after { transition: none !important; }   /* タブのモードを替える瞬間は色を一度に変える（本体の guideInk が付け外し・2026-10-19） */
body {
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink);
  background: var(--bg);
}

/* ===== レイアウト ===== */
.layout { display: flex; min-height: 100vh; }

/* ===== サイドバー ===== */
.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: #fff;
  border-right: 1px solid var(--line);
  padding: 24px 0 40px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.sb-brand {
  display: block;
  padding: 0 20px 16px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
  text-decoration: none;
}
.sb-brand img { height: 26px; display: block; }
.sb-brand .sb-sub {
  display: block; margin-top: 6px;
  font-size: 11px; letter-spacing: .08em; color: var(--gray);
}
.sb-group {
  font-size: 11px; font-weight: 700; letter-spacing: .12em;
  color: var(--accent);
  padding: 14px 20px 6px;
}
.sidebar a.sb-item {
  display: block;
  padding: 6px 20px;
  font-size: 13.5px;
  color: var(--ink);
  text-decoration: none;
  border-left: 3px solid transparent;
}
.sidebar a.sb-item:hover { background: var(--red-lt); }
.sidebar a.sb-item.on {
  border-left-color: var(--red);
  background: var(--red-lt);
  font-weight: 700;
  color: var(--red);
}
.sidebar span.sb-item.soon {
  display: block;
  padding: 6px 20px;
  font-size: 13.5px;
  color: #b9b2aa;
}
.sidebar span.sb-item.soon::after {
  content: "準備中";
  font-size: 10px;
  background: var(--tag-bg);
  color: var(--gray);
  border-radius: 8px;
  padding: 1px 7px;
  margin-left: 6px;
  vertical-align: 1px;
}

/* ===== 本文 ===== */
.main { flex: 1; min-width: 0; }
.page {
  max-width: 960px;
  margin: 0 auto;
  padding: 30px 40px 70px;
}

/* 見出し */
.lesson-tag {
  display: inline-block;
  font-size: 12px; font-weight: 700; letter-spacing: .1em;
  color: #fff; background: var(--red);
  border-radius: 20px;
  padding: 3px 14px;
  margin-bottom: 12px;
}
h1 { font-size: 27px; line-height: 1.4; margin-bottom: 10px; }
.lead { color: var(--gray); font-size: 15px; margin-bottom: 26px; }

h2 {
  font-size: 19px;
  margin: 34px 0 12px;
  padding: 8px 0 8px 14px;
  border-left: 5px solid var(--red);
  background: var(--red-lt);   /* 左の目次の選択中と同じ色（ぼかすとピンク＝カーマインに見えるので、ぼかさない・依頼 2026-10-14） */
  border-radius: 0 6px 6px 0;
}
h3 { font-size: 16px; margin: 26px 0 10px; color: var(--red); }
p { margin-bottom: 12px; }

/* このレッスンで作るもの（ゴールカード） */
.goal {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--card);
  border: 1.5px solid var(--red);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 8px;
}
.goal .g-icon { font-size: 30px; line-height: 1.2; }
.goal .g-title { font-weight: 700; color: var(--red); font-size: 14px; margin-bottom: 2px; }
.goal .g-meta { font-size: 12.5px; color: var(--gray); margin-top: 4px; }

/* 手順 */
ol.steps { counter-reset: st; list-style: none; margin: 14px 0 20px; }
ol.steps > li {
  counter-increment: st;
  position: relative;
  padding: 0 0 18px 46px;
  border-left: 2px solid var(--line);
  margin-left: 16px;
}
ol.steps > li:last-child { border-left-color: transparent; padding-bottom: 4px; }
ol.steps > li::before {
  content: counter(st);
  position: absolute;
  left: -17px; top: -2px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
ol.steps .st-title { font-weight: 700; margin-bottom: 4px; }

/* スクリーンショット */
figure.shot { margin: 12px 0 6px; }
figure.shot img {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 3px 14px rgba(26,26,26,.08);
  display: block;
}
figure.shot figcaption {
  font-size: 12px; color: var(--gray);
  margin-top: 6px; text-align: center;
}
figure.shot.narrow { max-width: 480px; margin-left: auto; margin-right: auto; }

/* キー・UI名 */
kbd {
  font-family: inherit;
  background: var(--tag-bg);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 1px 7px;
  font-size: 12.5px;
  white-space: nowrap;
}
.ui { font-weight: 700; }

/* 注意・コツ */
.note {
  background: var(--note);
  border: 1px solid var(--note-bd);
  border-radius: 10px;
  padding: 12px 16px;
  margin: 14px 0;
  font-size: 13.5px;
}
.note b:first-child { display: block; margin-bottom: 2px; }
.tip {
  background: var(--card);
  border: 1.5px solid var(--tip-bd);
  border-radius: 10px;
  padding: 12px 16px;
  margin: 14px 0;
  font-size: 13.5px;
}
.tip b:first-child { color: var(--red); display: block; margin-bottom: 2px; }

/* 表 */
table { border-collapse: collapse; width: 100%; margin: 12px 0 20px; font-size: 13.5px; background: var(--card); }
th, td { border: 1px solid var(--line); padding: 8px 12px; text-align: left; vertical-align: top; }
th { background: var(--tag-bg); font-size: 12.5px; }

/* レッスン間ナビ */
.lesson-nav {
  display: flex; justify-content: space-between; gap: 12px;
  margin-top: 56px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.lesson-nav a {
  flex: 1;
  display: block;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 16px;
  text-decoration: none;
  color: var(--ink);
  font-size: 13.5px;
}
.lesson-nav a:hover { border-color: var(--red); }
.lesson-nav .dir { display: block; font-size: 11px; color: var(--gray); }
.lesson-nav .nx { text-align: right; }
.lesson-nav .nx .dir::after { content: " →"; }
.lesson-nav .pv .dir::before { content: "← "; }

/* トップページのレッスンカード */
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0 30px; }
a.card {
  display: block;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
  text-decoration: none;
  color: var(--ink);
  transition: border-color .15s, transform .15s;
}
a.card:hover { border-color: var(--red); transform: translateY(-2px); }
a.card .c-no { font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--red); }
a.card .c-title { font-weight: 700; margin: 2px 0 4px; }
a.card .c-desc { font-size: 12.5px; color: var(--gray); line-height: 1.6; }
div.card.soon { opacity: .55; }
div.card.soon .c-title::after {
  content: "準備中";
  font-size: 10px; font-weight: 400;
  background: var(--tag-bg); color: var(--gray);
  border-radius: 8px; padding: 1px 7px; margin-left: 8px;
  vertical-align: 2px;
}
div.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; }
div.card .c-no { font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--red); }
div.card .c-title { font-weight: 700; margin: 2px 0 4px; }
div.card .c-desc { font-size: 12.5px; color: var(--gray); line-height: 1.6; }

/* モバイル・狭い画面 */
@media (max-width: 860px) {
  .layout { flex-direction: column; }
  .sidebar {
    width: 100%; flex: none; height: auto; position: static;
    border-right: none; border-bottom: 1px solid var(--line);
    padding: 10px 0 8px;
  }
  .sb-brand { padding: 0 16px 8px; margin-bottom: 6px; }
  .sb-nav { padding: 0 12px; }
  /* 見出しは帯にして1行ぜんぶ使い、その下に項目をまとめて並べる（依頼 2026-10-14） */
  .sb-nav > div { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 4px; margin-bottom: 8px; }
  .sb-group { flex: 0 0 100%; padding: 5px 10px; margin: 0 0 2px; background: var(--red-lt); white-space: normal; }
  .sidebar a.sb-item, .sidebar span.sb-item.soon {
    white-space: nowrap; border-left: none; border-radius: 16px;
    padding: 3px 11px; font-size: 12.5px; flex: 0 0 auto;
  }
  .sidebar a.sb-item.on { border-left: none; background: var(--red); color: #fff; }   /* 見出しの帯と見分ける */
  .page { padding: 20px 18px 60px; }
  .cards { grid-template-columns: 1fr; }
}

/* 角丸は使わない（依頼 2026-10-12）。ページ内の style 属性も含めて四角に */
*, *::before, *::after { border-radius: 0 !important; }

/* 手順の見出しは1行に置き、説明はその下に */
.steps .st-title { display: block; margin-bottom: 2px; }

/* 線のアイコン（絵文字は使わない・依頼 2026-10-12）。<i class="ic ic-名前"></i> で使う。色は文字色に合わせる */
.ic { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -0.18em; background: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
h2 .ic { color: var(--red); margin-right: 6px; }
.g-icon .ic { width: 30px; height: 30px; color: var(--red); vertical-align: middle; }
.tip b .ic, .note b .ic { margin-right: 4px; }
.ui .ic { width: 1em; height: 1em; margin-right: 2px; }
.ic-bulb { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22square%22%20stroke-linejoin%3D%22miter%22%3E%3Cpath%20d%3D%22M9%2018h6M10%2021h4%22/%3E%3Cpath%20d%3D%22M12%203a6%206%200%200%200-3.5%2010.9V16h7v-2.1A6%206%200%200%200%2012%203z%22/%3E%3C/svg%3E"); }
.ic-done { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22square%22%20stroke-linejoin%3D%22miter%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Cpath%20d%3D%22M8%2012.5l2.8%202.8L16.5%209%22/%3E%3C/svg%3E"); }
.ic-save { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22square%22%20stroke-linejoin%3D%22miter%22%3E%3Cpath%20d%3D%22M5%203h11l3%203v15H5z%22/%3E%3Cpath%20d%3D%22M8%203v5h7V3M8%2021v-7h8v7%22/%3E%3C/svg%3E"); }
.ic-download { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22square%22%20stroke-linejoin%3D%22miter%22%3E%3Cpath%20d%3D%22M12%204v11M7%2010.5l5%205%205-5M5%2020h14%22/%3E%3C/svg%3E"); }
.ic-checkbox { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22square%22%20stroke-linejoin%3D%22miter%22%3E%3Cpath%20d%3D%22M4%204h16v16H4z%22/%3E%3Cpath%20d%3D%22M8%2012l3%203%205-6%22/%3E%3C/svg%3E"); }
.ic-check { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22square%22%20stroke-linejoin%3D%22miter%22%3E%3Cpath%20d%3D%22M5%2012.5l4.5%204.5L19%207.5%22/%3E%3C/svg%3E"); }
.ic-message { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22square%22%20stroke-linejoin%3D%22miter%22%3E%3Cpath%20d%3D%22M4%205h16v11H10l-6%204z%22/%3E%3C/svg%3E"); }
.ic-book { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22square%22%20stroke-linejoin%3D%22miter%22%3E%3Cpath%20d%3D%22M12%206c-2-1.5-5-2-8-2v14c3%200%206%20.5%208%202%202-1.5%205-2%208-2V4c-3%200-6%20.5-8%202zM12%206v14%22/%3E%3C/svg%3E"); }
.ic-search { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22square%22%20stroke-linejoin%3D%22miter%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%226.5%22/%3E%3Cpath%20d%3D%22M16%2016l5%205%22/%3E%3C/svg%3E"); }
.ic-phone { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22square%22%20stroke-linejoin%3D%22miter%22%3E%3Cpath%20d%3D%22M7%202h10v20H7z%22/%3E%3Cpath%20d%3D%22M11%2018h2%22/%3E%3C/svg%3E"); }
.ic-zap { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22square%22%20stroke-linejoin%3D%22miter%22%3E%3Cpath%20d%3D%22M13%202L5%2013.5h6l-1%208.5%208-11.5h-6z%22/%3E%3C/svg%3E"); }
.ic-clipboard { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22square%22%20stroke-linejoin%3D%22miter%22%3E%3Cpath%20d%3D%22M9%203h6v3H9z%22/%3E%3Cpath%20d%3D%22M8%204.5H5V21h14V4.5h-3%22/%3E%3C/svg%3E"); }
.ic-pencil { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22square%22%20stroke-linejoin%3D%22miter%22%3E%3Cpath%20d%3D%22M4%2020l1-4.5L16%204.5l3.5%203.5L8.5%2019z%22/%3E%3Cpath%20d%3D%22M14%207l3%203%22/%3E%3C/svg%3E"); }
.ic-cookie { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22square%22%20stroke-linejoin%3D%22miter%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Cpath%20d%3D%22M9%209h.01M14%208h.01M15%2013h.01M10%2014h.01M12%2017h.01%22/%3E%3C/svg%3E"); }
.ic-star { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22square%22%20stroke-linejoin%3D%22miter%22%3E%3Cpath%20d%3D%22M12%203l2.7%205.6%206.1.8-4.5%204.2%201.1%206.1L12%2016.8l-5.4%202.9%201.1-6.1-4.5-4.2%206.1-.8z%22/%3E%3C/svg%3E"); }
.ic-stamp { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22square%22%20stroke-linejoin%3D%22miter%22%3E%3Cpath%20d%3D%22M9%203h6v5l3%204H6l3-4z%22/%3E%3Cpath%20d%3D%22M4%2012h16v5H4zM6%2021h12%22/%3E%3C/svg%3E"); }
.ic-flower { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22square%22%20stroke-linejoin%3D%22miter%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%222.2%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%226%22%20r%3D%223%22/%3E%3Ccircle%20cx%3D%2217.7%22%20cy%3D%2210.2%22%20r%3D%223%22/%3E%3Ccircle%20cx%3D%2215.5%22%20cy%3D%2217%22%20r%3D%223%22/%3E%3Ccircle%20cx%3D%228.5%22%20cy%3D%2217%22%20r%3D%223%22/%3E%3Ccircle%20cx%3D%226.3%22%20cy%3D%2210.2%22%20r%3D%223%22/%3E%3C/svg%3E"); }
.ic-image { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22square%22%20stroke-linejoin%3D%22miter%22%3E%3Cpath%20d%3D%22M3%205h18v14H3z%22/%3E%3Ccircle%20cx%3D%228.5%22%20cy%3D%2210%22%20r%3D%221.5%22/%3E%3Cpath%20d%3D%22M3%2017l5-5%204%204%203-3%206%206%22/%3E%3C/svg%3E"); }
.ic-border { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22square%22%20stroke-linejoin%3D%22miter%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%225%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%223.5%22%20r%3D%221.2%22/%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%226%22%20r%3D%221.2%22/%3E%3Ccircle%20cx%3D%2220.5%22%20cy%3D%2212%22%20r%3D%221.2%22/%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2218%22%20r%3D%221.2%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2220.5%22%20r%3D%221.2%22/%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2218%22%20r%3D%221.2%22/%3E%3Ccircle%20cx%3D%223.5%22%20cy%3D%2212%22%20r%3D%221.2%22/%3E%3Ccircle%20cx%3D%226%22%20cy%3D%226%22%20r%3D%221.2%22/%3E%3C/svg%3E"); }
.ic-wrench { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22square%22%20stroke-linejoin%3D%22miter%22%3E%3Cpath%20d%3D%22M14.5%206.5a4%204%200%200%200-5%205L3%2018l3%203%206.5-6.5a4%204%200%200%200%205-5l-2.6%202.6-2.4-.6-.6-2.4z%22/%3E%3C/svg%3E"); }
.ic-award { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22square%22%20stroke-linejoin%3D%22miter%22%3E%3Cpath%20d%3D%22M7%204h10v5a5%205%200%200%201-10%200z%22/%3E%3Cpath%20d%3D%22M7%206H4v2a3%203%200%200%200%203%203M17%206h3v2a3%203%200%200%201-3%203M12%2014v4M8%2021h8M10%2018h4%22/%3E%3C/svg%3E"); }
.ic-plus { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22square%22%20stroke-linejoin%3D%22miter%22%3E%3Cpath%20d%3D%22M12%205v14M5%2012h14%22/%3E%3C/svg%3E"); }
.ic-bug { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22square%22%20stroke-linejoin%3D%22miter%22%3E%3Cpath%20d%3D%22M8%209h8v6a4%204%200%200%201-8%200z%22/%3E%3Cpath%20d%3D%22M9.5%209V7.5a2.5%202.5%200%200%201%205%200V9M4%2012.5h4M16%2012.5h4M5%207.5l3%202M19%207.5l-3%202M5%2018.5l3-2M19%2018.5l-3-2%22/%3E%3C/svg%3E"); }
.ic-help { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22square%22%20stroke-linejoin%3D%22miter%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Cpath%20d%3D%22M9.5%209.5a2.5%202.5%200%201%201%203.5%202.3c-.6.3-1%20.9-1%201.7M12%2017h.01%22/%3E%3C/svg%3E"); }
.ic-camera { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22square%22%20stroke-linejoin%3D%22miter%22%3E%3Cpath%20d%3D%22M3%207h4l2-3h6l2%203h4v13H3z%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2213%22%20r%3D%224%22/%3E%3C/svg%3E"); }
.ic-eye { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22square%22%20stroke-linejoin%3D%22miter%22%3E%3Cpath%20d%3D%22M2%2012s3.6-7%2010-7%2010%207%2010%207-3.6%207-10%207S2%2012%202%2012z%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22/%3E%3C/svg%3E"); }
.ic-folder { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22square%22%20stroke-linejoin%3D%22miter%22%3E%3Cpath%20d%3D%22M3%205h7l2%203h9v12H3z%22/%3E%3C/svg%3E"); }
.ic-close { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22square%22%20stroke-linejoin%3D%22miter%22%3E%3Cpath%20d%3D%22M6%206l12%2012M18%206L6%2018%22/%3E%3C/svg%3E"); }

/* ツール辞典：アプリのツールボックスと同じアイコン（暗い四角の中に線の絵）（依頼 2026-10-12） */
.tool-ic { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-right: 8px; vertical-align: middle; background: #292a31; color: #eae6df; border: 1px solid #383941; }
.tool-ic svg { width: 19px; height: 19px; }

/* アドレス＋QRコード（依頼 2026-10-12） */
.qr-block { display: flex; align-items: center; gap: 18px; margin: 10px 0 16px; padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--red); }
.qr-block img { width: 132px; height: 132px; background: #fff; flex: 0 0 auto; }
.qr-label { font-weight: 700; color: var(--red); font-size: 13px; margin-bottom: 4px; }
.qr-url { font-size: 15px; font-weight: 700; color: var(--ink); word-break: break-all; }
@media (max-width: 520px) { .qr-block { flex-direction: column; align-items: flex-start; } }

/* 赤字の注意（ブラウザの違いなど・依頼 2026-10-13） */
.warn { margin: 16px 0; padding: 14px 18px; background: #FFF4EE; border: 1px solid #F0482E; border-left: 5px solid #F0482E; color: #C23A1C; font-size: 14.5px; line-height: 1.75; }   /* 注意＝危ないことを知らせる赤（キーカラーではない・どのモードでも赤）*/
.warn b { display: block; color: #E0401F; margin-bottom: 4px; font-size: 15px; }

/* QuickCookie の画面の番号に合わせた手順の見出し。アプリ（illust-convert.html の .stepTtl/.stepNo/.subHead/.subNo）と同じ見せ方：
   大きい番号＝赤い等幅の数字、小さい番号（01-1 など）＝赤い地に白の等幅 */
h3.qc-step { display: flex; align-items: center; gap: 14px; font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif; font-size: 21px; font-weight: 700; color: var(--ink); line-height: 1.3; margin: 40px 0 14px; padding-top: 14px; border-top: 1px solid var(--line); }
h3.qc-step .qc-no { flex: none; font: 700 36px/1 "IBM Plex Mono", ui-monospace, Menlo, monospace; color: var(--red); letter-spacing: .02em; }
p.qc-sub { display: flex; align-items: flex-start; gap: 10px; font-weight: 700; font-size: 15.5px; line-height: 1.4; margin: 22px 0 8px; }
p.qc-sub .qc-subno { flex: none; font: 700 12.5px/1 "IBM Plex Mono", ui-monospace, Menlo, monospace; color: #fff; background: var(--red); padding: 5px 7px; letter-spacing: .04em; margin-top: 1px; }

/* 役割の色（アプリの役割のボタンと同じ色・依頼 2026-10-17）：カッター＝ポピー・エンボス＝青・模様＝オークル・Ornament＝緑。
   枠はアプリと同じ色、字は白い紙の上で読めるように少し濃く */
.role { display: inline-block; font-weight: 700; padding: 0 7px; margin: 1px 1px; border: 1.5px solid; line-height: 1.6; white-space: nowrap; }
.role-cutter   { color: #D7361C; border-color: #F0482E; background: rgba(240, 72, 46, 0.08); }
.role-emboss   { color: #1E74C8; border-color: #4DA3FF; background: rgba(77, 163, 255, 0.10); }
.role-motif    { color: #9A6A14; border-color: #C8902E; background: rgba(200, 144, 46, 0.10); }
.role-ornament { color: #1F8A63; border-color: #3FB68B; background: rgba(63, 182, 139, 0.10); }
.role-dot { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: 0; }
.role-dot.role-cutter { background: #F0482E; } .role-dot.role-emboss { background: #4DA3FF; }
.role-dot.role-motif { background: #C8902E; } .role-dot.role-ornament { background: #3FB68B; }