/* =====================================================
   サクサクツールズ / SAKUSAKU Tools — style.css
   コンセプト: パステル / 柔らかい / デザイナー仕上げ

   ★ ツールごとのテーマは body[data-tool="<name>"] で
     CSS 変数を上書きするだけで切り替え可能。
     新ツール追加時は「11. ツールテーマ」セクションに
     1 ブロック追記するだけで OK。
   ===================================================== */


/* 1. リセット ----------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html, body, h1, h2, h3, h4, p, ul, ol, li, figure, fieldset, legend, button, input, select, textarea {
  margin: 0;
  padding: 0;
}

ul, ol { list-style: none; }

a { color: inherit; text-decoration: none; }

button {
  background: none;
  border: 0;
  font: inherit;
  cursor: pointer;
  color: inherit;
}

img { max-width: 100%; height: auto; display: block; }

fieldset { border: 0; }


/* 2. :root 変数（サイトデフォルトテーマ） ------------- */
:root {
  /* base color */
  --color-bg:           #fdf8f3;   /* warm cream */
  --color-surface:      #ffffff;
  --color-text:         #4a4458;   /* warm dark purple */
  --color-muted:        #8a8294;
  --color-border:       #ece5dc;
  --color-border-soft:  #f3eee6;

  /* accent — site default: lavender
     ツールごとに body[data-tool] で上書き */
  --color-accent:        #b8a8e8;
  --color-accent-hover:  #a294dc;
  --color-accent-rgb:    184, 168, 232;
  --color-accent-bg:     #efeafd;
  --color-accent-soft:   rgba(var(--color-accent-rgb), .18);

  /* tool gradient（出力欄・パスワード行・カスタム入力欄背景） */
  --tool-grad-from:      #efeafd;   /* pale lavender */
  --tool-grad-to:        #fff0eb;   /* pale peach */

  /* font weight */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  /* radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* spacing */
  --gap-xs: 8px;
  --gap-sm: 12px;
  --gap-md: 20px;
  --gap-lg: 32px;
  --gap-xl: 56px;

  /* shadow（アクセント色に連動） */
  --shadow-sm:     0 1px 2px rgba(74, 68, 88, .04);
  --shadow-md:     0 6px 20px rgba(74, 68, 88, .06);
  --shadow-card:   0 8px 28px rgba(var(--color-accent-rgb), .14);
  --shadow-accent: 0 8px 22px rgba(var(--color-accent-rgb), .35);
}


/* 3. ツールテーマ（ツールごとの色上書き） ------------- */
/* password: アイコン (mint → lavender) に合わせて mint 基調 */
body[data-tool="password"] {
  --color-accent:       #6cb89a;
  --color-accent-hover: #4f9c80;
  --color-accent-rgb:   108, 184, 154;
  --color-accent-bg:    #e9f6f0;
  --tool-grad-from:     #e9f6f0;   /* pale mint */
  --tool-grad-to:       #efeafd;   /* pale lavender */
}

/* json: gold → peach（黄寄りで暖色系から距離を取る） */
body[data-tool="json"] {
  --color-accent:       #d8b830;
  --color-accent-hover: #b89c20;
  --color-accent-rgb:   216, 184, 48;
  --color-accent-bg:    #fdf6dc;
  --tool-grad-from:     #fdf6dc;   /* pale gold */
  --tool-grad-to:       #fff0eb;   /* pale peach */
}

/* urlcodec: indigo → lavender（青→紫寄りで cyan 系と差別化） */
body[data-tool="urlcodec"] {
  --color-accent:       #6878d8;
  --color-accent-hover: #4d5cb8;
  --color-accent-rgb:   104, 120, 216;
  --color-accent-bg:    #ebeefb;
  --tool-grad-from:     #ebeefb;   /* pale indigo */
  --tool-grad-to:       #efeafd;   /* pale lavender */
}

/* lorem: orchid → peach（紫寄りで coral / pink との混同を避ける） */
body[data-tool="lorem"] {
  --color-accent:       #c878c8;
  --color-accent-hover: #ac5cac;
  --color-accent-rgb:   200, 120, 200;
  --color-accent-bg:    #f6e6f6;
  --tool-grad-from:     #f6e6f6;   /* pale orchid */
  --tool-grad-to:       #fff0eb;   /* pale peach */
}

/* placeholder: coral → amber */
body[data-tool="placeholder"] {
  --color-accent:       #e07060;
  --color-accent-hover: #c45848;
  --color-accent-rgb:   224, 112, 96;
  --color-accent-bg:    #fceae5;
  --tool-grad-from:     #fceae5;   /* pale coral */
  --tool-grad-to:       #fdf2dc;   /* pale amber */
}

/* pdfthumb: crimson red → lavender（PDF=赤の慣習に寄せる） */
body[data-tool="pdfthumb"] {
  --color-accent:       #c84050;
  --color-accent-hover: #a82d3d;
  --color-accent-rgb:   200, 64, 80;
  --color-accent-bg:    #fce5e8;
  --tool-grad-from:     #fce5e8;   /* pale red */
  --tool-grad-to:       #efeafd;   /* pale lavender */
}

/* wysiwyg: cyan → lavender */
body[data-tool="wysiwyg"] {
  --color-accent:       #4ab4c8;
  --color-accent-hover: #2e96aa;
  --color-accent-rgb:   74, 180, 200;
  --color-accent-bg:    #e0f3f7;
  --tool-grad-from:     #e0f3f7;   /* pale cyan */
  --tool-grad-to:       #efeafd;   /* pale lavender */
}

/* counter: lime green */
body[data-tool="counter"] {
  --color-accent:       #a0c850;
  --color-accent-hover: #88ad34;
  --color-accent-rgb:   160, 200, 80;
  --color-accent-bg:    #f2f8e0;
  --tool-grad-from:     #f2f8e0;
  --tool-grad-to:       #fff0eb;
}

/* toPng: light teal */
body[data-tool="toPng"] {
  --color-accent:       #4cb4c0;
  --color-accent-hover: #309aa7;
  --color-accent-rgb:   76, 180, 192;
  --color-accent-bg:    #e0f3f5;
  --tool-grad-from:     #e0f3f5;
  --tool-grad-to:       #efeafd;
}

/* toJpg: warm orange */
body[data-tool="toJpg"] {
  --color-accent:       #d8884a;
  --color-accent-hover: #b86d2f;
  --color-accent-rgb:   216, 136, 74;
  --color-accent-bg:    #fce8d8;
  --tool-grad-from:     #fce8d8;
  --tool-grad-to:       #fff0eb;
}

/* toWebp: violet */
body[data-tool="toWebp"] {
  --color-accent:       #8a72d0;
  --color-accent-hover: #6e58ad;
  --color-accent-rgb:   138, 114, 208;
  --color-accent-bg:    #ece6fa;
  --tool-grad-from:     #ece6fa;
  --tool-grad-to:       #efeafd;
}

/* contrast: slate blue */
body[data-tool="contrast"] {
  --color-accent:       #6a8aa8;
  --color-accent-hover: #4f6e8c;
  --color-accent-rgb:   106, 138, 168;
  --color-accent-bg:    #e8eef3;
  --tool-grad-from:     #e8eef3;
  --tool-grad-to:       #efeafd;
}

/* base64: forest green */
body[data-tool="base64"] {
  --color-accent:       #6cb05c;
  --color-accent-hover: #4f9440;
  --color-accent-rgb:   108, 176, 92;
  --color-accent-bg:    #e8f4e0;
  --tool-grad-from:     #e8f4e0;
  --tool-grad-to:       #efeafd;
}

/* qr: dark slate */
body[data-tool="qr"] {
  --color-accent:       #4a5870;
  --color-accent-hover: #2f3c50;
  --color-accent-rgb:   74, 88, 112;
  --color-accent-bg:    #e0e3eb;
  --tool-grad-from:     #e0e3eb;
  --tool-grad-to:       #efeafd;
}

/* cssfilter: light blue (200°) */
body[data-tool="cssfilter"] {
  --color-accent:       #5ab0e0;
  --color-accent-hover: #3994c4;
  --color-accent-rgb:   90, 176, 224;
  --color-accent-bg:    #e0f1fa;
  --tool-grad-from:     #e0f1fa;
  --tool-grad-to:       #efeafd;
}

/* compress: peach */
body[data-tool="compress"] {
  --color-accent:       #e09060;
  --color-accent-hover: #c47540;
  --color-accent-rgb:   224, 144, 96;
  --color-accent-bg:    #fbe7d8;
  --tool-grad-from:     #fbe7d8;
  --tool-grad-to:       #efeafd;
}

/* resize: sky blue */
body[data-tool="resize"] {
  --color-accent:       #5a98d8;
  --color-accent-hover: #3a7cb8;
  --color-accent-rgb:   90, 152, 216;
  --color-accent-bg:    #e0ecf8;
  --tool-grad-from:     #e0ecf8;
  --tool-grad-to:       #efeafd;
}

/* regex: magenta */
body[data-tool="regex"] {
  --color-accent:       #d8589a;
  --color-accent-hover: #b03c7e;
  --color-accent-rgb:   216, 88, 154;
  --color-accent-bg:    #fbe1ee;
  --tool-grad-from:     #fbe1ee;
  --tool-grad-to:       #efeafd;
}

/* timestamp: teal-mint */
body[data-tool="timestamp"] {
  --color-accent:       #4cb89c;
  --color-accent-hover: #2e9a7e;
  --color-accent-rgb:   76, 184, 156;
  --color-accent-bg:    #e0f4ec;
  --tool-grad-from:     #e0f4ec;
  --tool-grad-to:       #efeafd;
}

/* colorcode: rainbow→pink */
body[data-tool="colorcode"] {
  --color-accent:       #d878b8;
  --color-accent-hover: #b85a98;
  --color-accent-rgb:   216, 120, 184;
  --color-accent-bg:    #f9e4f1;
  --tool-grad-from:     #f9e4f1;
  --tool-grad-to:       #fdf2dc;
}

/* diff: red↔green */
body[data-tool="diff"] {
  --color-accent:       #8aa860;
  --color-accent-hover: #708e44;
  --color-accent-rgb:   138, 168, 96;
  --color-accent-bg:    #eef4dd;
  --tool-grad-from:     #eef4dd;
  --tool-grad-to:       #fce5e5;
}

/* svgcolor: amber */
body[data-tool="svgcolor"] {
  --color-accent:       #d8a040;
  --color-accent-hover: #b88224;
  --color-accent-rgb:   216, 160, 64;
  --color-accent-bg:    #fbedd2;
  --tool-grad-from:     #fbedd2;
  --tool-grad-to:       #efeafd;
}

/* ytthumb: red-coral */
body[data-tool="ytthumb"] {
  --color-accent:       #e05858;
  --color-accent-hover: #b83c3c;
  --color-accent-rgb:   224, 88, 88;
  --color-accent-bg:    #fbe0e0;
  --tool-grad-from:     #fbe0e0;
  --tool-grad-to:       #fdf2dc;
}


/* 4. タイポグラフィ ----------------------------------- */
html { font-size: 16px; }

body {
  font-family: 'Noto Sans JP', system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: var(--fw-regular);
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg);
  background-image:
    radial-gradient(circle at 0% 0%, rgba(var(--color-accent-rgb), .10), transparent 40%),
    radial-gradient(circle at 100% 100%, rgba(255, 184, 163, .08), transparent 45%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, input, button, select, label, span {
  vertical-align: middle;
}

h1 { font-size: 1.875rem; font-weight: var(--fw-bold); line-height: 1.6; letter-spacing: .01em; }
h2 { font-size: 1.5rem;   font-weight: var(--fw-bold); line-height: 1.6; }
h3 { font-size: 1.25rem;  font-weight: var(--fw-bold); line-height: 1.6; }

p { line-height: 1.6; }

a { transition: color .2s ease; }
a:hover { color: var(--color-accent-hover); }


/* 5. レイアウト --------------------------------------- */
.ly_container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 var(--gap-md);
}

.bl_header {
  background: rgba(255, 255, 255, .7);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--color-border-soft);
  position: sticky;
  top: 0;
  z-index: 100;
}

.bl_header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-md);
  height: 68px;
}

.bl_header__logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: var(--fw-bold);
  font-size: 1.125rem;
  flex: 0 0 auto;
  color: var(--color-text);
}

.bl_header__logo:hover { color: var(--color-text); }
.bl_header__logo img { width: 32px; height: 32px; }

.bl_header__nav {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  flex: 0 0 auto;
}

.bl_langSwitch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-weight: var(--fw-medium);
  font-size: .875rem;
  letter-spacing: .05em;
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}

.bl_langSwitch:hover {
  background: var(--color-accent-bg);
  border-color: var(--color-accent);
  color: var(--color-accent-hover);
}

/* ランチャーボタン（9 ドットのグリッドアイコン） */
.bl_launcherBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}

.bl_launcherBtn:hover {
  background: var(--color-accent-bg);
  border-color: var(--color-accent);
}

.bl_launcherBtn[aria-expanded="true"] {
  background: var(--color-accent-bg);
  border-color: var(--color-accent);
}

.bl_launcherBtn__grid {
  display: grid;
  grid-template-columns: repeat(3, 4px);
  grid-template-rows: repeat(3, 4px);
  gap: 3px;
}

.bl_launcherBtn__grid > span {
  width: 4px;
  height: 4px;
  border-radius: 1px;
  background: var(--color-text);
  transition: background-color .2s ease;
}

.bl_launcherBtn:hover .bl_launcherBtn__grid > span,
.bl_launcherBtn[aria-expanded="true"] .bl_launcherBtn__grid > span {
  background: var(--color-accent-hover);
}

/* ランチャー（アプリドロワー風） */
.bl_launcher {
  position: fixed;
  inset: 0;
  z-index: 100;
}

.bl_launcher__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(74, 68, 88, .35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .2s ease;
}

.bl_launcher__panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% + 8px)) scale(.96);
  width: min(720px, calc(100vw - 24px));
  max-height: calc(100vh - 48px);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(74, 68, 88, .18);
  opacity: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: opacity .2s ease, transform .2s ease;
  transform-origin: center center;
}

.bl_launcher.is_open .bl_launcher__backdrop {
  opacity: 1;
}

.bl_launcher.is_open .bl_launcher__panel {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.bl_launcher__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-border-soft);
}

.bl_launcher__title {
  font-weight: var(--fw-bold);
  font-size: .95rem;
  letter-spacing: .02em;
}

.bl_launcher__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  color: var(--color-muted);
  transition: background-color .15s ease, color .15s ease;
}

.bl_launcher__close:hover {
  background: var(--color-accent-bg);
  color: var(--color-accent-hover);
}

.bl_launcher__body {
  padding: 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  gap: 12px;
}

.bl_launcher__group {
  background: linear-gradient(135deg, var(--tool-grad-from), var(--tool-grad-to));
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  padding: 12px 14px 14px;
  box-shadow: var(--shadow-sm);
  flex: 1 1 auto;
}

.bl_launcher__groupTitle {
  font-size: .75rem;
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
  color: var(--color-muted);
  text-transform: uppercase;
  margin: 0 0 8px 4px;
}

.bl_launcher__grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), 88px);
  justify-content: center;
  gap: 4px;
}

.bl_launcherTile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 6px;
  border-radius: var(--radius-md);
  text-align: center;
  transition: background-color .15s ease, transform .15s ease;
}

.bl_launcherTile:hover {
  background: var(--color-accent-bg);
}

.bl_launcherTile:active {
  transform: scale(.95);
}

.bl_launcherTile.is_current {
  background: var(--color-accent-soft);
}

.bl_launcherTile__iconWrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: var(--color-surface);
  border-radius: 16px;
  box-shadow: 0 2px 6px rgba(74, 68, 88, .08);
}

.bl_launcherTile__icon {
  width: 40px;
  height: 40px;
}

.bl_launcherTile__title {
  font-size: .78rem;
  font-weight: var(--fw-medium);
  line-height: 1.3;
  color: var(--color-text);
  word-break: break-word;
}

@media (max-width: 600px) {
  .bl_launcher__panel {
    width: calc(100vw - 32px);
    max-height: calc(100vh - 48px);
  }
  .bl_launcher__group {
    flex: 1 1 100%;
  }
}

main { padding: var(--gap-xl) 0; }

.bl_footer {
  border-top: 1px solid var(--color-border-soft);
  padding: var(--gap-lg) 0;
  color: var(--color-muted);
  font-size: .875rem;
  text-align: center;
}

.bl_footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-md);
  flex-wrap: wrap;
}

.bl_footer__right {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
}

.bl_footer__nav {
  margin-bottom: 0;
}

.bl_footer__link {
  color: inherit;
  text-decoration: none;
}

.bl_footer__link:hover {
  text-decoration: underline;
}

/* xrea 広告は実寸 468x60。表示は 300x39 に縮小 */
.bl_xreaBnrBox {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  flex: 0 0 auto;
}

.bl_xreaBnrBox__label {
  font-size: .65rem;
  letter-spacing: .08em;
  color: var(--color-muted);
  background: var(--color-border-soft);
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  line-height: 1.4;
}

.bl_xreaBnrWrap {
  width: 300px;
  height: 39px;
  overflow: hidden;
  opacity: .9;
  filter: saturate(.7);
  transition: opacity .2s ease, filter .2s ease;
}

.bl_xreaBnrWrap:hover {
  opacity: 1;
  filter: none;
}

.bl_xreaBnr {
  display: block;
  width: 468px;
  height: 60px;
  border: 0;
  background: transparent;
  transform: scale(0.641);
  transform-origin: top left;
}

@media (max-width: 600px) {
  .bl_footer__inner { justify-content: center; }
  .bl_footer__right { align-items: center; text-align: center; order: 1; }
  .bl_xreaBnrBox { align-items: center; order: 2; margin-top: 12px; }
}


/* 6. ツール一覧 セクション --------------------------- */
.bl_section {
  margin-bottom: var(--gap-xl);
}

.bl_section:last-child {
  margin-bottom: 0;
}

.bl_section__title {
  font-size: 1.25rem;
  font-weight: var(--fw-bold);
  letter-spacing: .02em;
  margin-bottom: 4px;
}

.bl_section__lead {
  font-size: .85rem;
  color: var(--color-muted);
  margin-bottom: var(--gap-md);
}


/* 6b. ツール一覧（カードグリッド） -------------------- */
.bl_toolList {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--gap-md);
}

.bl_toolCard {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: var(--gap-sm);
  align-items: flex-start;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--gap-md);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.bl_toolCard:hover {
  transform: translateY(-3px);
  border-color: var(--color-accent);
  box-shadow: var(--shadow-card);
  color: inherit;
}

/* 一覧カードはツールごとに data-tool を付与してテーマ色でホバー */
.bl_toolCard[data-tool="password"]    { --color-accent: #6cb89a; --color-accent-rgb: 108, 184, 154; }
.bl_toolCard[data-tool="json"]        { --color-accent: #d8b830; --color-accent-rgb: 216, 184, 48; }
.bl_toolCard[data-tool="urlcodec"]    { --color-accent: #6878d8; --color-accent-rgb: 104, 120, 216; }
.bl_toolCard[data-tool="lorem"]       { --color-accent: #c878c8; --color-accent-rgb: 200, 120, 200; }
.bl_toolCard[data-tool="placeholder"] { --color-accent: #e07060; --color-accent-rgb: 224, 112, 96; }
.bl_toolCard[data-tool="pdfthumb"]    { --color-accent: #c84050; --color-accent-rgb: 200, 64, 80; }
.bl_toolCard[data-tool="wysiwyg"]     { --color-accent: #4ab4c8; --color-accent-rgb: 74, 180, 200; }
.bl_toolCard[data-tool="counter"]     { --color-accent: #a0c850; --color-accent-rgb: 160, 200, 80; }
.bl_toolCard[data-tool="toPng"]       { --color-accent: #4cb4c0; --color-accent-rgb: 76, 180, 192; }
.bl_toolCard[data-tool="toJpg"]       { --color-accent: #d8884a; --color-accent-rgb: 216, 136, 74; }
.bl_toolCard[data-tool="toWebp"]      { --color-accent: #8a72d0; --color-accent-rgb: 138, 114, 208; }
.bl_toolCard[data-tool="contrast"]    { --color-accent: #6a8aa8; --color-accent-rgb: 106, 138, 168; }
.bl_toolCard[data-tool="base64"]      { --color-accent: #6cb05c; --color-accent-rgb: 108, 176, 92; }
.bl_toolCard[data-tool="qr"]          { --color-accent: #4a5870; --color-accent-rgb: 74, 88, 112; }
.bl_toolCard[data-tool="cssfilter"]   { --color-accent: #5ab0e0; --color-accent-rgb: 90, 176, 224; }
.bl_toolCard[data-tool="compress"]    { --color-accent: #e09060; --color-accent-rgb: 224, 144, 96; }
.bl_toolCard[data-tool="resize"]      { --color-accent: #5a98d8; --color-accent-rgb: 90, 152, 216; }
.bl_toolCard[data-tool="regex"]       { --color-accent: #d8589a; --color-accent-rgb: 216, 88, 154; }
.bl_toolCard[data-tool="timestamp"]   { --color-accent: #4cb89c; --color-accent-rgb: 76, 184, 156; }
.bl_toolCard[data-tool="colorcode"]   { --color-accent: #d878b8; --color-accent-rgb: 216, 120, 184; }
.bl_toolCard[data-tool="diff"]        { --color-accent: #8aa860; --color-accent-rgb: 138, 168, 96; }
.bl_toolCard[data-tool="svgcolor"]    { --color-accent: #d8a040; --color-accent-rgb: 216, 160, 64; }
.bl_toolCard[data-tool="ytthumb"]     { --color-accent: #e05858; --color-accent-rgb: 224, 88, 88; }

.bl_toolCard__icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: block;
}

.bl_toolCard__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bl_toolCard__title {
  font-size: 1.125rem;
  font-weight: var(--fw-bold);
  margin-bottom: 0;
}

.bl_toolCard__desc {
  color: var(--color-muted);
  font-size: .9rem;
}


/* 7. ページヘッド ------------------------------------- */
.bl_pageHead {
  margin-bottom: var(--gap-lg);
  text-align: center;
}

.bl_pageHead__heading {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: var(--gap-xs);
}

.bl_pageHead__icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  flex: 0 0 auto;
  display: block;
  box-shadow: 0 6px 16px rgba(var(--color-accent-rgb), .25);
}

.bl_pageHead__title { margin: 0; }

.bl_pageHead__lead { color: var(--color-muted); }


/* 8. ツール画面（汎用 .bl_tool） ---------------------- */
.bl_tool {
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--gap-lg);
  box-shadow: var(--shadow-card);
}

.bl_tool__field { display: flex; flex-direction: column; gap: 8px; }

.bl_tool__opts {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bl_tool__opts > legend,
.bl_tool__field > label {
  font-weight: var(--fw-medium);
  font-size: .9rem;
  color: var(--color-muted);
  letter-spacing: .02em;
}

.bl_tool__opts > legend {
  margin-bottom: 10px;
}

.bl_tool__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm);
}

/* 左に設定、右にプレビューの2カラム構成 */
.bl_tool--split {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: var(--gap-lg);
  align-items: start;
}

.bl_tool--split .bl_tool__col {
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
  min-width: 0;
}

.bl_tool--split .bl_tool__col--preview {
  position: sticky;
  top: 88px;
  align-self: start;
}

@media (max-width: 768px) {
  .bl_tool--split { grid-template-columns: 1fr; }
  .bl_tool--split .bl_tool__col--preview { position: static; }
}


/* 9. フォーム要素（input） ---------------------------- */
.el_input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  padding: 12px 16px;
  font: inherit;
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: box-shadow .2s ease, border-color .2s ease;
}

.el_input:hover { border-color: #d8cfc3; }

.el_input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: inset 0 0 0 2px var(--color-accent-soft);
}

.el_input::placeholder { color: #b8aea0; }


/* 9b. テキストエリア ---------------------------------- */
.el_textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  min-height: 160px;
  padding: 14px 16px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  resize: vertical;
  transition: box-shadow .2s ease, border-color .2s ease;
}

.el_textarea:hover { border-color: #d8cfc3; }

.el_textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: inset 0 0 0 2px var(--color-accent-soft);
}

.el_textarea::placeholder { color: #b8aea0; }


/* 9b2. サイズ入力（数値2つを×で並べる） -------------- */
.bl_sizeInputs {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bl_sizeInputs__input {
  width: 120px;
  flex: 0 0 auto;
}

.bl_sizeInputs__sep {
  color: var(--color-muted);
  font-weight: var(--fw-medium);
  font-size: 1.125rem;
}


/* 9c. カラーピッカー ---------------------------------- */
.el_color {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.el_color__swatch {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  cursor: pointer;
  transition: border-color .2s ease, transform .2s ease;
  overflow: hidden;
}

.el_color__swatch::-webkit-color-swatch-wrapper { padding: 0; }
.el_color__swatch::-webkit-color-swatch { border: none; border-radius: 50%; }
.el_color__swatch::-moz-color-swatch { border: none; border-radius: 50%; }

.el_color__swatch:hover {
  border-color: var(--color-accent);
  transform: scale(1.05);
}

.el_color__value {
  font-family: ui-monospace, monospace;
  font-size: .85rem;
  color: var(--color-muted);
  letter-spacing: .04em;
}

.el_color__input {
  font-family: ui-monospace, monospace;
  font-size: .9rem;
  padding: 6px 10px;
  width: 110px;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: .05em;
  transition: box-shadow .2s ease, border-color .2s ease;
}

.el_color__input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: inset 0 0 0 2px var(--color-accent-soft);
}


/* 10. チップラジオ / チップグループ ------------------- */
.bl_chipGroup {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.el_chip {
  display: inline-block;
  position: relative;
  cursor: pointer;
  user-select: none;
}

.el_chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.el_chip__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  padding: 8px 18px;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-weight: var(--fw-medium);
  font-size: .9rem;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

.el_chip:hover .el_chip__label {
  border-color: var(--color-accent);
  color: var(--color-accent-hover);
}

.el_chip input:checked + .el_chip__label {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
  box-shadow: 0 4px 12px rgba(var(--color-accent-rgb), .35);
}

.el_chip input:active + .el_chip__label { transform: scale(.96); }

.el_chip input:focus-visible + .el_chip__label {
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}


/* 11. チェックボックス -------------------------------- */
.el_checkbox {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  position: relative;
  cursor: pointer;
  user-select: none;
  font-weight: var(--fw-medium);
  font-size: .9rem;
}

.el_checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.el_checkbox__box {
  position: relative;
  display: inline-block;
  width: 22px;
  height: 22px;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: 7px;
  transition: background-color .2s ease, border-color .2s ease;
  flex: 0 0 auto;
}

.el_checkbox__box::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translate(-50%, -65%) rotate(-45deg) scale(0);
  transition: transform .18s cubic-bezier(.4, 0, .2, 1);
}

.el_checkbox:hover .el_checkbox__box { border-color: var(--color-accent); }

.el_checkbox input:checked + .el_checkbox__box {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  box-shadow: 0 3px 10px rgba(var(--color-accent-rgb), .35);
}

.el_checkbox input:checked + .el_checkbox__box::after {
  transform: translate(-50%, -65%) rotate(-45deg) scale(1);
}

.el_checkbox input:focus-visible + .el_checkbox__box {
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}


/* 12. 文字数カスタム入力欄 ---------------------------- */
.bl_lengthCustom {
  display: none;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gap-sm);
  margin-top: 4px;
  padding: 12px 14px;
  background: var(--tool-grad-from);
  border-radius: var(--radius-md);
  animation: lengthCustomIn .25s ease both;
}

.bl_lengthCustom.is_show { display: flex; }

.bl_lengthCustom__label {
  font-size: .875rem;
  color: var(--color-muted);
  font-weight: var(--fw-medium);
  flex: 0 0 auto;
}

.bl_lengthCustom__input {
  width: 100px;
  flex: 0 0 auto;
}

@keyframes lengthCustomIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* 13. ボタン ------------------------------------------ */
.el_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-xs);
  padding: 13px 28px;
  background-color: var(--color-accent);
  color: #fff;
  font-weight: var(--fw-bold);
  border-radius: var(--radius-pill);
  transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
  white-space: nowrap;
  letter-spacing: .03em;
}

.el_btn:hover {
  transform: translateY(-2px);
  background-color: var(--color-accent-hover);
  box-shadow: var(--shadow-accent);
  color: #fff;
}

.el_btn:active { transform: translateY(0); box-shadow: none; }

.el_btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--color-accent-soft), var(--shadow-accent);
}

.el_btn--ghost {
  background-color: var(--color-surface);
  color: var(--color-accent-hover);
  border: 1.5px solid var(--color-accent);
}

.el_btn--ghost:hover {
  background-color: var(--color-accent);
  color: #fff;
}


/* 14. 出力欄（単一） ---------------------------------- */
.bl_tool__output {
  display: block;
  padding: 18px 20px;
  min-height: 60px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 1.0625rem;
  word-break: break-all;
  background: linear-gradient(135deg, var(--tool-grad-from) 0%, var(--tool-grad-to) 100%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  letter-spacing: .02em;
}

.bl_tool__output:empty::before {
  content: attr(data-placeholder);
  color: var(--color-muted);
  font-family: 'Noto Sans JP', sans-serif;
  font-size: .9rem;
  letter-spacing: 0;
}


/* 15. パスワードリスト（複数生成結果） ---------------- */
.bl_pwList {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

@media (max-width: 600px) {
  .bl_pwList { grid-template-columns: 1fr; }
}

.bl_pwItem {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  padding: 10px 14px 10px 18px;
  background: linear-gradient(135deg, var(--tool-grad-from) 0%, var(--tool-grad-to) 100%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color .2s ease, box-shadow .2s ease;
}

.bl_pwItem:hover {
  border-color: var(--color-accent);
  box-shadow: 0 4px 14px rgba(var(--color-accent-rgb), .15);
}

.bl_pwItem__text {
  flex: 1 1 auto;
  min-width: 0;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 1rem;
  letter-spacing: .03em;
  word-break: break-all;
  color: var(--color-text);
}

.el_btn--mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 6px 14px;
  background: var(--color-surface);
  color: var(--color-accent-hover);
  border: 1.5px solid var(--color-accent);
  border-radius: var(--radius-pill);
  font-weight: var(--fw-medium);
  font-size: .8rem;
  letter-spacing: .04em;
  transition: background-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
  white-space: nowrap;
}

.el_btn--mini:hover {
  background: var(--color-accent);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(var(--color-accent-rgb), .35);
}

.el_btn--mini:active { transform: translateY(0); box-shadow: none; }

.el_btn--mini:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}

.el_btn--mini.is_active {
  background: var(--color-accent);
  color: #fff;
  box-shadow: 0 4px 12px rgba(var(--color-accent-rgb), .35);
}

.el_btn--mini.is_active:hover {
  background: var(--color-accent-hover);
  color: #fff;
}


/* 15b. コードブロック（整形結果・出力テキスト） ----- */
.bl_codeBlock {
  display: block;
  padding: 18px 20px;
  background: linear-gradient(135deg, var(--tool-grad-from) 0%, var(--tool-grad-to) 100%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: .9rem;
  line-height: 1.7;
  color: var(--color-text);
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 480px;
  overflow: auto;
  margin: 0;
}

.bl_codeBlock:empty::before {
  content: attr(data-placeholder);
  color: var(--color-muted);
  font-family: 'Noto Sans JP', sans-serif;
  font-size: .9rem;
}

/* シンタックスハイライト（JSON 用） */
.tk_string { color: #6c8c5c; }
.tk_number { color: #c47a5a; }
.tk_bool   { color: #7a8cc4; }
.tk_null   { color: #a09cb0; }
.tk_key    { color: #6e60a0; font-weight: var(--fw-medium); }


/* regex / 一般のマッチハイライト */
.bl_codeBlock mark {
  background: var(--color-accent-soft);
  color: var(--color-text);
  border-radius: 3px;
  padding: 1px 2px;
}

/* diff: 入力 2 カラム */
.bl_diffInputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-md);
}
@media (max-width: 768px) {
  .bl_diffInputs { grid-template-columns: 1fr; }
}

/* SVG プレビューサムネ（imgCard 内）
   元の SVG に width/height が無いと画像として読み込んだときに 0 で描画される
   ことがあるため、サムネ枠側に固定高さを与える */
.bl_svgThumb {
  display: block;
  width: 100%;
  height: 120px;
  object-fit: contain;
  padding: 8px;
  background: #fff;
}

/* form-mailer 埋め込み */
.formmailer-embed {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.formmailer-embed iframe {
  display: block;
  border-radius: var(--radius-lg);
}

/* カラーピッカー + HEX 入力の横並び */
.bl_colorRow {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.bl_colorRow__picker {
  width: 60px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: none;
  cursor: pointer;
  flex: 0 0 auto;
}
.bl_colorRow__hex {
  width: 140px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  text-transform: uppercase;
}

/* 共通ファイル選択フィールド */
.bl_fileField {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.bl_fileField__btn {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.bl_fileField__btn::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9l-6-6zm0 1.5L19.5 10H15a1 1 0 0 1-1-1V4.5z"/></svg>') center/contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9l-6-6zm0 1.5L19.5 10H15a1 1 0 0 1-1-1V4.5z"/></svg>') center/contain no-repeat;
}
.bl_fileField__name {
  color: var(--color-muted);
  font-size: .85rem;
  word-break: break-all;
}

.bl_diffHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}
.bl_diffNav {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.bl_diffSummary {
  display: inline-flex;
  gap: 12px;
  font-size: .85rem;
}
.bl_diffSummary__add { color: #3d7a5c; font-weight: var(--fw-medium); }
.bl_diffSummary__del { color: #a83a4a; font-weight: var(--fw-medium); }
.bl_diffSummary__pos { color: var(--color-muted); }
.bl_diffSummary__nodiff { color: var(--color-muted); font-style: italic; }

.bl_diffOutput {
  display: block;
  padding: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: .85rem;
  overflow: auto;
  max-height: 520px;
  margin: 0;
}
.bl_diffOutput:empty::before {
  display: block;
  content: attr(data-placeholder);
  color: var(--color-muted);
  font-family: 'Noto Sans JP', sans-serif;
  font-size: .9rem;
  padding: 14px 16px;
}
.bl_diffRow {
  display: grid;
  grid-template-columns: 44px 44px 24px 1fr;
  align-items: stretch;
  line-height: 1.4;
  white-space: pre;
  border-bottom: 1px solid var(--color-border-soft);
}
.bl_diffRow:last-child { border-bottom: 0; }
.bl_diffRow__num {
  text-align: right;
  padding: 2px 8px;
  color: var(--color-muted);
  background: var(--color-bg);
  font-size: .75rem;
  user-select: none;
  border-right: 1px solid var(--color-border-soft);
}
.bl_diffRow__sign {
  text-align: center;
  padding: 2px 0;
  font-weight: var(--fw-bold);
  user-select: none;
}
.bl_diffRow__text {
  padding: 2px 10px;
  overflow-x: auto;
}
.bl_diffRow.is_add { background: rgba(108, 184, 154, .14); }
.bl_diffRow.is_add .bl_diffRow__sign { color: #3d7a5c; }
.bl_diffRow.is_del { background: rgba(216, 87, 106, .12); }
.bl_diffRow.is_del .bl_diffRow__sign { color: #a83a4a; }
.bl_diffRow.is_focused {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

/* ytthumb: サムネ一覧 */
.bl_ytList {
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
  margin-top: var(--gap-md);
}
.bl_ytItem {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--gap-md);
  align-items: center;
  padding: 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.bl_ytItem__thumb {
  width: 160px;
  height: 90px;
  object-fit: cover;
  background: var(--color-border-soft);
  border-radius: var(--radius-sm);
}
.bl_ytItem__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.bl_ytItem__label {
  font-weight: var(--fw-medium);
  font-size: .9rem;
}
.bl_ytItem__url {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: .8rem;
}
.bl_ytItem__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
@media (max-width: 600px) {
  .bl_ytItem {
    grid-template-columns: 1fr;
  }
  .bl_ytItem__thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
}
.tk_punct  { color: var(--color-muted); }


/* 15c. エラー表示 ------------------------------------- */
.bl_errorMsg {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(255, 140, 110, .12);
  border: 1px solid rgba(255, 140, 110, .35);
  border-radius: var(--radius-md);
  color: #b85540;
  font-size: .9rem;
  font-weight: var(--fw-medium);
  line-height: 1.6;
}

.bl_errorMsg::before {
  content: "!";
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #d68070;
  color: #fff;
  border-radius: 50%;
  font-weight: var(--fw-bold);
  font-size: .8rem;
}


/* 15d. 画像プレビュー --------------------------------- */
.bl_imgPreview {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gap-md);
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  min-height: 200px;
  overflow: auto;
}

.bl_imgPreview img,
.bl_imgPreview canvas {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(74, 68, 88, .12);
}


/* 15e. ドロップゾーン --------------------------------- */
.el_dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 56px 20px;
  background: var(--color-surface);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  text-align: center;
  transition: background-color .2s ease, border-color .2s ease;
}

.el_dropzone:hover {
  border-color: var(--color-accent);
  background: var(--color-accent-bg);
}

.el_dropzone.is_dragover {
  border-color: var(--color-accent);
  background: var(--color-accent-bg);
  border-style: solid;
}

.el_dropzone__heading {
  font-weight: var(--fw-medium);
  color: var(--color-text);
}

.el_dropzone__hint {
  color: var(--color-muted);
  font-size: .85rem;
}


/* 15f. プログレスバー --------------------------------- */
.el_progressBar {
  display: block;
  width: 100%;
  height: 8px;
  background: var(--color-border-soft);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.el_progressBar__bar {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--color-accent);
  border-radius: inherit;
  transition: width .4s ease, background-color .3s ease, box-shadow .3s ease;
}

.el_progressBar__bar.is_done {
  background: #6cb89a;
  box-shadow: 0 0 10px rgba(108, 184, 154, .4);
}


/* 15g. バッジ ----------------------------------------- */
.el_badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  font-size: .68rem;
  font-weight: var(--fw-bold);
  letter-spacing: .03em;
  color: #fff;
  background: var(--color-muted);
  border-radius: var(--radius-pill);
  min-width: 72px;
  text-align: center;
}

.el_badge--ok  { background: #4a90d4; }
.el_badge--bad { background: #d8576a; }


/* 15h. PDF サムネリスト ------------------------------- */
.bl_pdfActions {
  display: flex;
  align-items: center;
  gap: var(--gap-md);
  padding: var(--gap-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.bl_pdfActions__progress { flex: 1 1 auto; min-width: 0; }

@media (max-width: 600px) {
  .bl_pdfActions { flex-direction: column; align-items: stretch; }
}

.bl_pdfList {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--gap-md);
}

.bl_pdfCard {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: var(--gap-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: box-shadow .2s ease, border-color .2s ease;
}

.bl_pdfCard:hover {
  box-shadow: var(--shadow-md);
}

.bl_pdfCard.is_warning {
  background: #ffe7ee;
  border-color: #f9c2cf;
}

.bl_pdfCard__img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
  background: #f8f8f8;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(74, 68, 88, .08);
}

.bl_pdfCard__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

.bl_pdfCard__meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--color-border);
  padding-top: 10px;
  flex: 1 1 auto;
  font-size: .75rem;
}

.bl_pdfCard__metaItem {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bl_pdfCard__metaLabel {
  font-size: .65rem;
  color: var(--color-muted);
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
}

.bl_pdfCard__metaValue {
  color: var(--color-text);
  word-break: break-all;
  line-height: 1.5;
  font-weight: var(--fw-medium);
}

.bl_pdfCard__size {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: .75rem;
  text-align: center;
  color: var(--color-accent-hover);
  font-weight: var(--fw-bold);
}

.bl_pdfCard__saveBtn {
  display: block;
  width: 100%;
  padding: 9px 12px;
  margin-top: auto;
  background: var(--color-text);
  color: #fff;
  border-radius: var(--radius-pill);
  font-weight: var(--fw-bold);
  font-size: .8rem;
  letter-spacing: .04em;
  text-align: center;
  transition: background-color .2s ease, transform .2s ease;
}

.bl_pdfCard__saveBtn:hover {
  background: #1a1424;
  transform: translateY(-1px);
}


/* 15i. contentEditable 入力（WYSIWYG ツール） --------- */
.el_contentEditable {
  display: block;
  width: 100%;
  min-height: 200px;
  padding: 14px 16px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow-y: auto;
  transition: box-shadow .2s ease, border-color .2s ease;
}

.el_contentEditable:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: inset 0 0 0 2px var(--color-accent-soft);
}

.el_contentEditable:empty::before {
  content: attr(data-placeholder);
  color: #b8aea0;
  font-family: 'Noto Sans JP', sans-serif;
}


/* 15j. Prism.js HTML ハイライト（自前パステルトーン） - */
.bl_codeBlock pre[class*="language-"],
.bl_codeBlock code[class*="language-"] {
  background: transparent;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: var(--color-text);
  text-shadow: none;
}

.bl_codeBlock .token.tag,
.bl_codeBlock .token.tag .token.punctuation { color: #6e60a0; font-weight: var(--fw-medium); }
.bl_codeBlock .token.attr-name              { color: #c47a5a; }
.bl_codeBlock .token.attr-value,
.bl_codeBlock .token.attr-value .token.punctuation { color: #6c8c5c; }
.bl_codeBlock .token.string                 { color: #6c8c5c; }
.bl_codeBlock .token.comment                { color: #a09cb0; font-style: italic; }
.bl_codeBlock .token.punctuation            { color: var(--color-muted); }
.bl_codeBlock .token.doctype                { color: #7a8cc4; }


/* 15k. WYSIWYG プレビュー ----------------------------- */
.bl_wysiwygPreview {
  display: block;
  padding: 18px 20px;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  min-height: 80px;
  overflow: auto;
  font-family: 'Noto Sans JP', sans-serif;
  color: var(--color-text);
  line-height: 1.6;
}

.bl_wysiwygPreview:empty::before {
  content: attr(data-placeholder);
  color: var(--color-muted);
  font-size: .9rem;
}

.bl_wysiwygPreview table {
  border-collapse: collapse;
}

.bl_wysiwygPreview th,
.bl_wysiwygPreview td {
  border: 1px solid var(--color-border);
  padding: 6px 10px;
}


/* 15l. 用途説明ノート（こんなときに使えます） -------- */
.bl_useNote {
  background: var(--tool-grad-from);
  border: 1px dashed var(--color-accent);
  border-radius: var(--radius-md);
  padding: var(--gap-md);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bl_useNote__title {
  font-weight: var(--fw-bold);
  font-size: .95rem;
  color: var(--color-accent-hover);
  margin: 0;
}

.bl_useNote__list {
  margin: 0;
  padding-left: 18px;
  font-size: .9rem;
  line-height: 1.7;
  color: var(--color-text);
}

.bl_useNote__list li { list-style: disc; margin-bottom: 4px; }
.bl_useNote__list li:last-child { margin-bottom: 0; }


/* 15m. 文字数カウンター ------------------------------- */
.bl_countGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

.bl_countCard {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  background: linear-gradient(135deg, var(--tool-grad-from) 0%, var(--tool-grad-to) 100%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.bl_countCard__label {
  font-size: .72rem;
  color: var(--color-muted);
  font-weight: var(--fw-medium);
  letter-spacing: .03em;
}

.bl_countCard__value {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 1.6rem;
  font-weight: var(--fw-bold);
  color: var(--color-accent-hover);
  line-height: 1.2;
}

.bl_countCard__limit {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .7rem;
  color: var(--color-muted);
}

.bl_countCard__bar {
  flex: 1 1 auto;
  height: 4px;
  background: var(--color-border-soft);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.bl_countCard__bar > span {
  display: block;
  height: 100%;
  background: var(--color-accent);
  border-radius: inherit;
  transition: width .25s ease, background-color .25s ease;
}

.bl_countCard__bar > span.is_over {
  background: #d8576a;
}


/* 15n. コントラスト判定 ------------------------------- */
.bl_contrastDemo {
  padding: 32px 24px;
  border-radius: var(--radius-md);
  text-align: center;
  font-weight: var(--fw-medium);
  border: 1px solid var(--color-border);
}

.bl_contrastDemo__heading {
  font-size: 1.5rem;
  font-weight: var(--fw-bold);
  margin-bottom: 8px;
}

.bl_contrastResult {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: var(--gap-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.bl_contrastResult__ratio {
  text-align: center;
  font-family: ui-monospace, monospace;
  font-size: 2.2rem;
  font-weight: var(--fw-bold);
  color: var(--color-accent-hover);
}

.bl_contrastResult__grades {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.bl_contrastGrade {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 10px 12px;
  background: var(--tool-grad-from);
  border-radius: var(--radius-md);
  font-size: .8rem;
  font-weight: var(--fw-medium);
}

.bl_contrastGrade__label { color: var(--color-muted); }


/* 15o. QR コード ------------------------------------- */
.bl_qrPreview {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gap-md);
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  min-height: 220px;
}

.bl_qrPreview img,
.bl_qrPreview canvas {
  display: block;
  max-width: 100%;
  height: auto;
}


/* 15p. 画像変換（複数結果） -------------------------- */
.bl_imgList {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--gap-md);
}

.bl_imgCard {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: var(--gap-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.bl_imgCard__thumb {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 4px;
}

.bl_imgCard__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: .75rem;
}

.bl_imgCard__name {
  color: var(--color-text);
  word-break: break-all;
  font-weight: var(--fw-medium);
}

.bl_imgCard__size {
  font-family: ui-monospace, monospace;
  color: var(--color-muted);
}




/* 15r. CSS Filter プレビュー -------------------------- */
.bl_filterPreview {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 16px;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.bl_filterPreview__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: #fafafa;
  border-radius: var(--radius-md);
}

.bl_filterPreview__label {
  font-size: .7rem;
  color: var(--color-muted);
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.bl_filterPreview__img {
  width: 80px;
  height: 80px;
  display: block;
}

.bl_filterPreview__swatch {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}


/* 16. トースト ---------------------------------------- */
.el_toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translate(-50%, 16px);
  opacity: 0;
  background: rgba(74, 68, 88, .94);
  color: #fff;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  font-weight: var(--fw-medium);
  font-size: .9rem;
  letter-spacing: .03em;
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
  z-index: 9999;
  box-shadow: 0 10px 30px rgba(74, 68, 88, .25);
}

.el_toast.is_show {
  opacity: 1;
  transform: translate(-50%, 0);
}