:root {
  --ink: #172033;
  --muted: #5b6475;
  --surface: #ffffff;
  --page: #f6f8fc;
  --line: #dde3ee;
  --primary: #315efb;
  --primary-dark: #2046ce;
  --radius: 16px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--page);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.65;
}

a { color: inherit; }

.site-header, .container, .site-footer {
  width: min(100% - 32px, 960px);
  margin-inline: auto;
}

.site-header {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 28px 0;
}

.brand { color: var(--ink); font-size: 1.2rem; font-weight: 800; text-decoration: none; }
.site-header p { color: var(--muted); margin: 0; font-size: .9rem; }
.hero { padding: 64px 0 44px; }
.eyebrow { color: var(--primary); font-size: .8rem; font-weight: 800; letter-spacing: .12em; margin: 0; }
h1 { font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.25; letter-spacing: -.04em; margin: 8px 0 12px; }
h2 { font-size: 1.4rem; margin: 0 0 20px; }
.hero > p:last-child { color: var(--muted); font-size: 1.05rem; margin: 0; }

.category-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 34px; }
.category-nav a { background: var(--surface); border: 1px solid var(--line); border-radius: 999px; color: var(--ink); font-size: .88rem; font-weight: 700; padding: 8px 16px; text-decoration: none; transition: border-color .15s, color .15s; }
.category-nav a:hover { border-color: var(--primary); color: var(--primary); }
.tool-category { margin-bottom: 40px; scroll-margin-top: 16px; }
.tool-category h2 { border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.category-lead { color: var(--muted); font-size: .95rem; margin: -8px 0 18px; }
.lp-workflow { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; }
.lp-workflow-card { grid-template-columns: 40px 1fr auto; }
.lp-step {
  align-items: center; background: var(--primary); border-radius: 999px; color: #fff;
  display: flex; font-size: .95rem; font-weight: 800; height: 40px; justify-content: center; width: 40px;
}
.optional-tag {
  background: #eef1f7; border-radius: 999px; color: var(--muted); font-size: .72rem;
  font-weight: 700; margin-left: 6px; padding: 2px 8px; vertical-align: middle;
}
.lp-workflow-note { color: var(--muted); font-size: .88rem; margin: 14px 0 0; }
.lp-workflow-note a { color: var(--primary); font-weight: 700; text-decoration: none; }
.lp-workflow-note a:hover { text-decoration: underline; }
.tool-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.tool-card {
  align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  display: grid; gap: 14px; grid-template-columns: 48px 1fr auto; padding: 20px; text-decoration: none;
  transition: box-shadow .2s, transform .2s;
}
.tool-card:hover { box-shadow: 0 10px 30px #17203316; transform: translateY(-2px); }
.tool-card h3 { margin: 0; font-size: 1.05rem; }
.tool-card p { color: var(--muted); font-size: .9rem; margin: 3px 0 0; }
.tool-icon { align-items: center; background: #e9eeff; border-radius: 12px; color: var(--primary); display: flex; font-size: 1.3rem; font-weight: 800; height: 48px; justify-content: center; width: 48px; }
.card-arrow { color: var(--primary); font-size: 1.35rem; }

.tool-page { padding: 22px 0 64px; }
.back-link { color: var(--primary); font-size: .9rem; text-decoration: none; }
.tool-intro { margin: 38px 0 24px; }
.tool-intro h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.tool-intro p { color: var(--muted); margin: 0; }
.tool-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(18px, 4vw, 32px); }
label { display: block; font-weight: 700; margin-bottom: 8px; }
textarea, input[type="text"], input[type="date"], input[type="password"] { border: 1px solid #bfc8d8; border-radius: 10px; color: var(--ink); font: inherit; padding: 12px; width: 100%; }
input[type="color"] { border: 1px solid #bfc8d8; border-radius: 10px; cursor: pointer; height: 46px; padding: 3px; width: 52px; }
input[type="number"] { border: 1px solid #bfc8d8; border-radius: 10px; color: var(--ink); font: inherit; padding: 10px 12px; width: 100%; }
input[type="url"], select { border: 1px solid #bfc8d8; border-radius: 10px; color: var(--ink); font: inherit; padding: 10px 12px; }
input[type="url"] { padding: 12px; width: 100%; }
textarea:focus, input:focus { border-color: var(--primary); outline: 3px solid #315efb24; }
textarea { min-height: 220px; resize: vertical; }
.stats { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); margin-top: 20px; }
.stat { background: #f5f7fb; border-radius: 12px; padding: 14px; }
.stat dt { color: var(--muted); font-size: .8rem; }
.stat dd { font-size: 1.5rem; font-weight: 800; margin: 2px 0 0; }
.button-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.button-row[hidden] { display: none; }
button, .button { background: var(--primary); border: 0; border-radius: 9px; color: white; cursor: pointer; font: inherit; font-weight: 700; padding: 10px 16px; text-decoration: none; }
button:hover, .button:hover { background: var(--primary-dark); }
button.secondary { background: #e9edf5; color: var(--ink); }
button.secondary:hover { background: #dce2ed; }
.hint { color: var(--muted); font-size: .85rem; margin: 18px 0 0; }
.options { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 16px; }
.options label { font-size: .9rem; font-weight: 500; margin: 0; }
.qr-result { align-items: center; display: flex; flex-direction: column; gap: 16px; margin-top: 28px; min-height: 180px; }
.qr-result canvas, .qr-result img { border: 1px solid var(--line); border-radius: 8px; max-width: 100%; padding: 8px; }
.result-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-top: 24px; padding: clamp(18px, 4vw, 32px); }
.loading-panel { color: var(--muted); }
.error-panel { border-color: #efb6b6; color: #a61b1b; }
.result-panel h2 { font-size: 1.05rem; margin: 26px 0 12px; }
.result-panel h2:first-of-type { margin-top: 0; }
.result-url { color: var(--muted); font-size: .85rem; margin: 0 0 20px; overflow-wrap: anywhere; }
.result-url a { color: var(--primary); }
.og-preview { background: #f5f7fb; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.og-image { aspect-ratio: 1.91 / 1; background: #e6eaf2; display: block; object-fit: cover; width: 100%; }
.og-image-empty { align-items: center; color: var(--muted); display: flex; font-size: .9rem; justify-content: center; }
.og-preview-body { padding: 16px; }
.og-preview-body h3 { font-size: 1.1rem; margin: 2px 0 6px; overflow-wrap: anywhere; }
.og-preview-body p { color: var(--muted); font-size: .9rem; margin: 0; overflow-wrap: anywhere; }
.og-domain { font-size: .75rem !important; text-transform: uppercase; }
.meta-list { display: grid; gap: 10px; margin: 0; }
.meta-item { border-bottom: 1px solid var(--line); padding: 0 0 10px; }
.meta-item dt { color: var(--muted); font-size: .8rem; }
.meta-item dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.tool-note { color: var(--muted); font-size: .9rem; margin-top: 28px; }
.tool-note h2 { color: var(--ink); font-size: 1.05rem; margin-bottom: 8px; }
.tool-note ul { margin: 8px 0; padding-left: 1.3em; }
.tool-note p { margin: 10px 0 0; }
.tool-note a, .site-check-cta a { color: var(--primary); font-weight: 700; text-decoration: none; }
.tool-note a:hover, .site-check-cta a:hover { text-decoration: underline; }
.site-check-summary { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }
.site-check-summary div { background: #f5f7fb; border-radius: 10px; padding: 12px 14px; }
.site-check-summary span { color: var(--muted); display: block; font-size: .78rem; }
.site-check-summary strong { display: block; font-size: 1.5rem; line-height: 1.25; margin-top: 2px; }
.site-check-intro { color: var(--muted); font-size: .85rem; margin: 18px 0 0; }
.site-check-section { border-top: 1px solid var(--line); margin-top: 24px; padding-top: 22px; }
.site-check-section h2 { font-size: 1.05rem; margin: 0 0 10px; }
.site-check-list { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; }
.site-check-item { align-items: start; border: 1px solid var(--line); border-left-width: 4px; border-radius: 10px; display: flex; gap: 14px; justify-content: space-between; padding: 12px; }
.site-check-main { display: grid; gap: 2px; min-width: 0; }
.site-check-main strong { font-size: .9rem; }
.site-check-main span, .site-check-main small { overflow-wrap: anywhere; }
.site-check-main span { font-size: .88rem; }
.site-check-main small { color: var(--muted); font-size: .78rem; }
.site-check-badge { border-radius: 999px; flex: none; font-size: .75rem; font-weight: 700; padding: 3px 8px; }
.site-check-pass { border-left-color: #3aa661; }
.site-check-pass .site-check-badge { background: #e9f8ee; color: #146c2e; }
.site-check-notice { border-left-color: #d89d27; }
.site-check-notice .site-check-badge { background: #fff6dd; color: #80600f; }
.site-check-fail { border-left-color: #d55555; }
.site-check-fail .site-check-badge { background: #fff0f0; color: #ab2525; }
.site-check-cta { margin: 24px 0 0; }
.color-control { align-items: end; display: grid; gap: 14px; grid-template-columns: 1fr auto; }
.hex-input { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; text-transform: uppercase; }
.color-control .hint { margin: 6px 0 0; }
.color-picker { margin-bottom: 0; }
.section-heading { font-size: 1.05rem; margin: 28px 0 4px; }
.palette-grid { display: grid; gap: 10px; grid-template-columns: repeat(5, 1fr); margin-top: 16px; }
.swatch { border: 0; border-radius: 12px; cursor: pointer; min-height: 130px; padding: 14px 10px; text-align: left; transition: transform .15s, box-shadow .15s; }
.swatch:hover { box-shadow: 0 6px 18px #17203330; transform: translateY(-2px); }
.swatch-name, .swatch-code { display: block; }
.swatch-name { font-size: .76rem; opacity: .8; }
.swatch-code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .8rem; font-weight: 700; margin-top: 3px; }
.contrast-panel { margin-top: 24px; }
.section-heading-row { align-items: center; display: flex; gap: 12px; justify-content: space-between; }
.section-heading-row .section-heading { margin: 0; }
.contrast-ratio { background: #e9eeff; border-radius: 999px; color: var(--primary-dark); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .9rem; font-weight: 700; padding: 4px 10px; }
.contrast-controls { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); margin-top: 20px; }
.color-input-row { align-items: center; display: flex; gap: 8px; }
.contrast-preview { border: 1px solid var(--line); border-radius: 12px; margin-top: 20px; padding: 20px; }
.contrast-preview p { margin: 0; }
.contrast-preview p + p { font-size: .9rem; margin-top: 6px; }
.preview-large { font-size: 1.4rem; font-weight: 800; }
.contrast-results { display: grid; gap: 8px; list-style: none; margin: 18px 0 0; padding: 0; }
.contrast-results li { border-radius: 8px; font-size: .9rem; padding: 8px 10px; }
.contrast-results .pass { background: #e9f8ee; color: #146c2e; }
.contrast-results .fail { background: #fff0f0; color: #ab2525; }
.generator-tabs { display: flex; gap: 8px; margin-bottom: 16px; overflow-x: auto; padding-bottom: 2px; }
.generator-tabs button { background: #e9edf5; color: var(--ink); white-space: nowrap; }
.generator-tabs button[aria-selected="true"] { background: var(--primary); color: #fff; }
.generator-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(18px, 4vw, 32px); }
.generator-panel h2 { font-size: 1.15rem; }
.generator-layout { display: grid; gap: 28px; grid-template-columns: minmax(240px, .8fr) minmax(0, 1.2fr); }
.controls { display: grid; gap: 15px; align-content: start; }
.controls label { font-size: .9rem; }
.controls label > span { color: var(--primary); float: right; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.controls input[type="range"] { display: block; margin-top: 7px; width: 100%; }
.controls .inline-label { align-items: center; display: flex; gap: 12px; justify-content: space-between; }
.preview-area { align-items: center; background: #f5f7fb; border: 1px solid var(--line); border-radius: 12px; display: flex; justify-content: center; min-height: 250px; overflow: auto; padding: 24px; }
.shadow-preview, .gradient-preview, .clip-preview { align-items: center; background: #fff; border-radius: 12px; display: flex; font-weight: 800; height: 140px; justify-content: center; width: min(100%, 300px); }
.gradient-preview-area {
  background-color: #fff;
  background-image: linear-gradient(45deg, #e4e9f3 25%, transparent 25%), linear-gradient(-45deg, #e4e9f3 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e4e9f3 75%), linear-gradient(-45deg, transparent 75%, #e4e9f3 75%);
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
}
.gradient-preview { color: #fff; text-shadow: 0 1px 3px #0006; }
.grid-preview { align-items: stretch; display: grid; justify-content: stretch; }
.grid-preview span { align-items: center; background: #dbe4ff; border-radius: 8px; color: var(--primary-dark); display: flex; font-weight: 800; justify-content: center; min-height: 64px; }
.clip-preview { border-radius: 0; color: #fff; }
.code-output { align-items: center; background: #172033; border-radius: 12px; color: #eaf0ff; display: flex; gap: 14px; justify-content: space-between; margin-top: 24px; padding: 14px 16px; }
.code-output-stack { align-items: stretch; display: grid; gap: 12px; }
.code-output-row { align-items: center; display: flex; gap: 14px; justify-content: space-between; }
.code-output-row + .code-output-row { border-top: 1px solid #2c3a57; padding-top: 12px; }
.code-output code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .85rem; overflow-wrap: anywhere; white-space: pre-wrap; }
.copy-code { flex: 0 0 auto; }
.copy-usage-hint { margin-top: 12px; }
.copy-usage-hint a { color: var(--primary); font-weight: 700; text-decoration: none; }
.copy-usage-hint a:hover { text-decoration: underline; }
.copy-usage-hint code { background: #e9edf5; border-radius: 4px; font-size: .84em; padding: 1px 5px; }
.dummy-form { display: grid; gap: 14px; grid-template-columns: repeat(4, 1fr); margin-bottom: 18px; }
.dummy-form label { font-size: .9rem; }
.dummy-form input { margin-top: 7px; }
.dummy-image-preview { align-items: center; background: #f5f7fb; border: 1px solid var(--line); border-radius: 12px; display: flex; justify-content: center; margin: 22px 0; min-height: 180px; overflow: hidden; padding: 12px; }
.dummy-image-preview img { display: block; max-height: 360px; max-width: 100%; }
.copy-row { display: flex; gap: 10px; }
.copy-row input { min-width: 0; }
.copy-row button { flex: none; white-space: nowrap; }
.dummy-text-panel { margin-top: 24px; }
.text-options { display: flex; flex-wrap: wrap; gap: 14px; }
.text-options label { font-size: .9rem; }
.text-options select { display: block; margin-top: 7px; }
#dummy-text { margin-top: 20px; min-height: 180px; }
.estimate-notice { background: #e9eeff; border-radius: 10px; color: #2544ac; font-size: .9rem; margin: 0 0 20px; padding: 12px 14px; }
.client-mode-switch { align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; padding: 12px 14px; }
.client-mode-switch input { accent-color: var(--primary); height: 18px; margin: 0; width: 18px; }
.client-mode-switch span { color: var(--muted); font-size: .82rem; font-weight: 400; }
.estimate-section + .estimate-section { margin-top: 24px; }
.estimate-section h2 { font-size: 1.1rem; }
.estimate-table { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.estimate-head, .estimate-row { align-items: center; display: grid; gap: 10px; grid-template-columns: minmax(150px, 1.5fr) minmax(74px, .45fr) minmax(100px, .8fr) minmax(110px, .8fr); padding: 10px 12px; }
.estimate-head { background: #f5f7fb; color: var(--muted); font-size: .78rem; font-weight: 700; }
.estimate-row { border-top: 1px solid var(--line); font-size: .9rem; }
.estimate-row input { min-width: 0; padding: 8px; }
.estimate-row input[type="checkbox"] { accent-color: var(--primary); height: 18px; margin: 0; width: 18px; }
.option-disabled { color: var(--muted); }
.estimate-summary { background: var(--ink); border-radius: var(--radius); color: #fff; display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr); margin: 24px 0; padding: 22px; }
.estimate-summary span { color: #cbd4e8; display: block; font-size: .8rem; }
.estimate-summary strong { display: block; font-size: 1.35rem; margin-top: 3px; }
.client-output { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin: 24px 0; padding: clamp(18px, 4vw, 32px); }
.client-output h2 { font-size: 1.4rem; margin: 4px 0 20px; }
.client-output ul { border-block: 1px solid var(--line); list-style: none; margin: 0; padding: 0; }
.client-output li { border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; padding: 10px 0; }
.client-output li:last-child { border-bottom: 0; }
.client-output p { margin: 14px 0 0; }
.client-total { font-size: 1.05rem; }
.client-total strong { font-size: 1.4rem; margin-left: 8px; }
.client-note { color: var(--muted); font-size: .85rem; white-space: pre-line; }
body.client-mode .estimate-section, body.client-mode .estimate-notice { display: none; }
body.client-mode .estimate-notes > label, body.client-mode .estimate-notes > input, body.client-mode .estimate-notes > textarea { display: none; }
.estimate-notes label { font-size: .9rem; margin-top: 18px; }
.estimate-notes label:first-child { margin-top: 0; }
.estimate-notes textarea { min-height: 120px; }
.drop-zone { align-items: center; background: #f5f7fb; border: 2px dashed #b8c5df; border-radius: 14px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; justify-content: center; min-height: 190px; padding: 24px; text-align: center; transition: background .15s, border-color .15s; }
.drop-zone:hover, .drop-zone.is-dragging { background: #e9eeff; border-color: var(--primary); }
.drop-zone strong { font-size: 1.1rem; }
.drop-zone span, .drop-zone small { color: var(--muted); font-size: .9rem; font-weight: 400; }
.drop-zone input { height: 1px; opacity: 0; overflow: hidden; position: absolute; width: 1px; }
.image-settings { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); margin-top: 22px; }
.image-settings label { font-size: .9rem; }
.image-settings label > span { color: var(--primary); float: right; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.image-settings input[type="range"] { display: block; margin-top: 7px; width: 100%; }
.image-settings input[type="number"], .image-settings select { display: block; margin-top: 7px; width: 100%; }
.image-results { display: grid; gap: 14px; margin-top: 24px; }
.image-result-card { align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); display: grid; gap: 18px; grid-template-columns: 150px 1fr; overflow: hidden; padding: 14px; }
.image-result-card img { background: repeating-conic-gradient(#e5e9f1 0 25%, #fff 0 50%) 50% / 18px 18px; border-radius: 9px; display: block; height: 110px; object-fit: contain; width: 150px; }
.image-result-card h2 { font-size: 1rem; margin: 0; overflow-wrap: anywhere; }
.image-result-card p { color: var(--muted); font-size: .85rem; margin: 4px 0 12px; }
.processing-message, .image-error { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; margin: 0; padding: 14px; }
.image-error { border-color: #efb6b6; color: #a61b1b; }
.over-limit { color: #a61b1b !important; font-weight: 700; }
.pos-filter { display: flex; flex-wrap: wrap; gap: 16px; margin: 22px 0 6px; }
.pos-filter label { align-items: center; display: flex; font-size: .9rem; font-weight: 500; gap: 7px; margin: 0; }
.pos-filter input { accent-color: var(--primary); height: 17px; margin: 0; width: 17px; }
.word-cloud { align-content: center; align-items: baseline; background: #f5f7fb; border: 1px solid var(--line); border-radius: 12px; display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; min-height: 200px; padding: 26px 20px; }
.word-cloud span { font-weight: 700; line-height: 1.3; }
.visualization-frame { background: #fbfcff; border: 1px solid var(--line); border-radius: 12px; margin-top: 12px; overflow: hidden; }
.visualization-frame canvas { display: block; max-width: 100%; width: 100%; }
.ranking-table-wrap { max-height: 420px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; }
.ranking-table { border-collapse: collapse; font-size: .9rem; width: 100%; }
.ranking-table th, .ranking-table td { border-bottom: 1px solid var(--line); padding: 9px 12px; text-align: left; }
.ranking-table th { background: #f5f7fb; color: var(--muted); font-size: .78rem; position: sticky; top: 0; }
.ranking-table tr:last-child td { border-bottom: 0; }
.survey-selects { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 22px 0; }
.survey-selects label { font-size: .9rem; }
.survey-selects select { display: block; margin-top: 7px; width: 100%; }
.csv-options { margin-top: 16px; }
.csv-options label { font-size: .9rem; }
.csv-options select { display: block; margin-top: 7px; }
.survey-chart-frame { padding: 8px; }
.cross-table-wrap { border: 1px solid var(--line); border-radius: 10px; overflow: auto; }
.cross-table { border-collapse: collapse; font-size: .85rem; min-width: 100%; white-space: nowrap; }
.cross-table th, .cross-table td { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); padding: 9px 12px; text-align: center; }
.cross-table th { background: #f5f7fb; color: var(--muted); font-weight: 700; }
.cross-table tr:last-child th, .cross-table tr:last-child td { border-bottom: 0; }
.free-text-section { border-top: 1px solid var(--line); margin-top: 30px; padding-top: 24px; }
.survey-preview-section, .survey-filter-section { border-bottom: 1px solid var(--line); margin-bottom: 28px; padding-bottom: 26px; }
.survey-preview-section h2, .survey-filter-section h2 { font-size: 1.05rem; margin-bottom: 8px; }
.column-profile { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin: 16px 0; }
.column-profile-item { background: #f5f7fb; border-radius: 10px; padding: 12px; }
.column-profile-item strong, .column-profile-item span, .column-profile-item small { display: block; }
.column-profile-item strong { font-size: .9rem; overflow-wrap: anywhere; }
.column-profile-item span { color: var(--primary); font-size: .8rem; font-weight: 700; margin-top: 2px; }
.column-profile-item small { color: var(--muted); font-size: .75rem; margin-top: 4px; }
.csv-preview-wrap { border: 1px solid var(--line); border-radius: 10px; max-height: 300px; overflow: auto; }
.csv-preview { border-collapse: collapse; font-size: .82rem; min-width: 100%; white-space: nowrap; }
.csv-preview th, .csv-preview td { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); max-width: 240px; overflow: hidden; padding: 8px 10px; text-align: left; text-overflow: ellipsis; }
.csv-preview th { background: #f5f7fb; color: var(--muted); position: sticky; top: 0; }
.normalizer-layout { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.normalizer-layout textarea { min-height: 270px; }
.normalizer-options { border: 1px solid var(--line); border-radius: 12px; display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 22px; padding: 16px; }
.normalizer-options legend { font-size: .9rem; font-weight: 700; padding: 0 6px; }
.normalizer-options label { align-items: center; display: flex; font-size: .9rem; font-weight: 400; gap: 8px; margin: 0; }
.normalizer-options input { accent-color: var(--primary); height: 17px; margin: 0; width: 17px; }
.normalizer-result { margin-top: 24px; }
.invoice-form-panel h2 { font-size: 1.1rem; margin-top: 28px; }
.invoice-grid { display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 14px; }
.invoice-grid label, .invoice-form-panel > label { font-size: .85rem; }
.invoice-grid input, .invoice-grid select, .invoice-form-panel > label input, .invoice-form-panel > label textarea { display: block; margin-top: 6px; width: 100%; }
.invoice-form-panel textarea { min-height: 74px; }
.invoice-items-wrap { border: 1px solid var(--line); border-radius: 10px; overflow: auto; }
.invoice-items { border-collapse: collapse; min-width: 720px; width: 100%; }
.invoice-items th, .invoice-items td { border-bottom: 1px solid var(--line); padding: 8px; text-align: left; }
.invoice-items th { background: #f5f7fb; color: var(--muted); font-size: .78rem; }
.invoice-items input, .invoice-items select { min-width: 70px; padding: 8px; width: 100%; }
.invoice-items .item-name { min-width: 160px; }
.remove-item { font-size: 1.1rem; padding: 4px 9px; }
.invoice-preview { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); margin-top: 24px; padding: clamp(22px, 5vw, 48px); }
.invoice-preview-head { align-items: start; display: flex; justify-content: space-between; }
.invoice-preview-head h2 { font-size: 2rem; letter-spacing: .15em; margin: 0; }
.invoice-preview-head dl { display: grid; font-size: .85rem; gap: 3px; margin: 0; text-align: right; }
.invoice-preview-head dl div { display: flex; gap: 10px; justify-content: flex-end; }
.invoice-preview-head dt { color: var(--muted); }
.invoice-preview-head dd { margin: 0; }
.invoice-addresses { display: grid; gap: 24px; grid-template-columns: 1fr 1fr; margin: 46px 0 26px; }
.invoice-addresses p { margin: 4px 0; white-space: pre-line; }
.invoice-label { color: var(--muted); font-size: .8rem; }
.invoice-total { background: #f2f5ff; font-size: 1.05rem; margin: 0 0 24px; padding: 14px; text-align: right; }
.invoice-total strong { font-size: 1.5rem; margin-left: 14px; }
.invoice-total span { color: var(--muted); font-size: .8rem; margin-left: 6px; }
.invoice-preview-items { border-collapse: collapse; margin-top: 16px; width: 100%; }
.invoice-preview-items th, .invoice-preview-items td { border-bottom: 1px solid var(--line); padding: 10px 8px; text-align: right; }
.invoice-preview-items th:first-child, .invoice-preview-items td:first-child { text-align: left; }
.invoice-preview-items th { background: #f5f7fb; color: var(--muted); font-size: .8rem; }
.invoice-totals { margin: 18px 0 0 auto; max-width: 300px; }
.invoice-totals div { display: flex; justify-content: space-between; padding: 5px 0; }
.invoice-totals dd { margin: 0; }
.invoice-totals div:last-child { border-top: 2px solid var(--ink); font-size: 1.1rem; font-weight: 800; padding-top: 10px; }
.invoice-preview h3 { font-size: .95rem; margin: 28px 0 5px; }
.invoice-preview-notes, .invoice-preview p { white-space: pre-line; }
.form-message { border-radius: 10px; margin: 0 0 18px; padding: 12px 14px; }
.form-message.success { background: #e8f8ef; color: #17653d; }
.form-message.error { background: #fff0f0; color: #9b2424; }
.login-panel { margin-inline: auto; max-width: 440px; }
.login-panel h2 { font-size: 1.1rem; margin-top: 0; }
.login-panel form, .short-url-form { display: grid; gap: 14px; }
.login-panel input, .short-url-form input { display: block; margin-top: 6px; width: 100%; }
.section-heading { align-items: center; display: flex; justify-content: space-between; }
.section-heading h2 { font-size: 1.1rem; margin: 0; }
.short-link-list { margin-top: 24px; }
.short-link-table-wrap { border: 1px solid var(--line); border-radius: 10px; margin-top: 18px; overflow: auto; }
.short-link-table { border-collapse: collapse; font-size: .85rem; min-width: 860px; width: 100%; }
.short-link-table th, .short-link-table td { border-bottom: 1px solid var(--line); padding: 10px; text-align: left; vertical-align: top; }
.short-link-table th { background: #f5f7fb; color: var(--muted); font-size: .76rem; }
.short-link-table td:nth-child(3), .short-link-table td:nth-child(4) { white-space: nowrap; }
.short-link-table a { color: var(--primary); display: block; max-width: 300px; overflow-wrap: anywhere; }
.short-link-table small { color: var(--muted); display: block; margin-top: 4px; }
.copy-short-url { background: none; border: 0; color: var(--primary); font: inherit; max-width: 210px; overflow-wrap: anywhere; padding: 0; text-align: left; text-decoration: underline; }
.status-button { font-size: .76rem; padding: 7px 9px; white-space: nowrap; }
.status-button.active { background: #e9a13c; }
.empty-state { color: var(--muted); margin: 22px 0 0; }
.date-layout { display: grid; gap: 28px; }
.date-layout h2 { font-size: 1.1rem; margin-bottom: 12px; }
.inline-fields { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.inline-fields input { display: block; margin-top: 6px; }
.date-result { background: #f2f5ff; border-radius: 10px; margin: 16px 0 0; padding: 12px 14px; }
.date-result strong { font-size: 1.1rem; margin-left: 12px; }
.holiday-settings { background: #f5f7fb; border-radius: 12px; padding: 16px; }
.holiday-settings summary { align-items: center; cursor: pointer; display: flex; font-size: 1.05rem; font-weight: 700; justify-content: space-between; list-style: none; }
.holiday-settings summary::-webkit-details-marker { display: none; }
.holiday-settings-meta { align-items: center; display: flex; gap: 10px; }
.holiday-settings summary small { color: var(--muted); font-size: .75rem; font-weight: 400; }
.holiday-settings-toggle { color: var(--primary); font-size: .85rem; font-weight: 700; }
.holiday-settings-toggle::before { content: "＋ 開く"; }
.holiday-settings[open] .holiday-settings-toggle::before { content: "− 閉じる"; }
.holiday-settings[open] summary { margin-bottom: 12px; }
.holiday-settings-form { align-items: end; display: grid; gap: 14px; grid-template-columns: 1fr 1fr auto; margin-top: 16px; }
.holiday-settings-form input, .holiday-settings-form select { display: block; margin-top: 6px; width: 100%; }
.holiday-settings-form button { white-space: nowrap; }
.holiday-exception-list { display: grid; gap: 8px; list-style: none; margin: 16px 0; padding: 0; }
.holiday-exception-list li { align-items: center; background: #f5f7fb; border-radius: 9px; display: flex; font-size: .9rem; gap: 10px; justify-content: space-between; padding: 9px 10px; }
.holiday-exception-list button { flex: none; font-size: .82rem; padding: 5px 9px; }
.splitter-settings { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.splitter-details { border-top: 1px solid var(--line); margin-top: 22px; padding-top: 18px; }
.splitter-details summary { color: var(--primary); cursor: pointer; font-size: .9rem; font-weight: 700; }
.splitter-details label { display: block; font-size: .9rem; margin-top: 16px; max-width: 360px; }
.splitter-details input { display: block; margin-top: 6px; width: 100%; }
.splitter-details .hint { margin-bottom: 0; }
.splitter-merge-panel { margin-top: 24px; }
.splitter-merge-panel h2 { font-size: 1.1rem; }
.splitter-merge-controls { align-items: end; display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 18px; }
.splitter-merge-controls label { font-size: .85rem; }
.splitter-merge-controls input, .splitter-merge-controls select { display: block; margin-top: 6px; width: 100%; }
.splitter-merge-controls button { white-space: nowrap; }
.splitter-replace-option { align-items: flex-start; background: #f2f5ff; border-radius: 9px; display: flex; font-size: .88rem; gap: 9px; margin-top: 16px; padding: 11px 12px; }
.splitter-replace-option input { accent-color: var(--primary); flex: none; margin: 3px 0 0; }
.splitter-replace-option strong, .splitter-replace-option small { display: block; }
.splitter-replace-option small { color: var(--muted); line-height: 1.5; margin-top: 3px; }
.splitter-thumb-toolbar {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin-top: 24px;
}
.splitter-thumb-toolbar[hidden] { display: none; }
.splitter-thumb-toolbar label { font-size: .85rem; margin: 0; }
.splitter-thumb-toolbar select { display: block; margin-top: 6px; min-width: 220px; }
.splitter-thumb-toolbar .hint { margin: 0 0 2px; }
.splitter-results { margin-top: 14px; }
.splitter-result-card { align-items: stretch; grid-template-columns: 150px 1fr; }
.splitter-result-card img { align-self: center; }
.splitter-results[data-thumb-bg="light"] .splitter-result-card img {
  background: repeating-conic-gradient(#e5e9f1 0 25%, #fff 0 50%) 50% / 18px 18px;
}
.splitter-results[data-thumb-bg="dark"] .splitter-result-card img {
  background: repeating-conic-gradient(#4a5568 0 25%, #1f2937 0 50%) 50% / 18px 18px;
}
.splitter-results[data-thumb-bg="mid"] .splitter-result-card img {
  background: #6b7280;
}
.splitter-select { align-items: center; display: flex; font-size: .85rem; font-weight: 500; gap: 3px; margin: 0 0 12px; }
.splitter-select input { accent-color: var(--primary); }
.splitter-card-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.splitter-card-actions button { font-size: .85rem; padding: 7px 10px; }
.splitter-card-actions .button { font-size: .85rem; padding: 7px 10px; }
.converter-form { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.converter-form select, .converter-form input { display: block; margin-top: 6px; width: 100%; }
.converter-result { background: #f2f5ff; border-radius: 12px; margin-top: 24px; padding: 22px; text-align: center; }
.converter-result p { color: var(--muted); font-size: .9rem; margin: 0 0 4px; }
.converter-result strong { font-size: clamp(1.5rem, 5vw, 2.4rem); }
.converter-result span { font-size: 1rem; margin-left: 8px; }
.password-settings { display: grid; gap: 18px; grid-template-columns: 180px 1fr; }
.password-settings input[type="number"] { margin-top: 6px; }
.password-settings fieldset { border: 1px solid var(--line); border-radius: 10px; display: flex; flex-wrap: wrap; gap: 10px 18px; padding: 12px 16px; }
.password-settings legend { font-size: .9rem; font-weight: 700; padding: 0 4px; }
.password-settings fieldset label { font-size: .9rem; font-weight: 400; margin: 0; }
.password-settings fieldset input { accent-color: var(--primary); margin-right: 4px; }
.password-output { display: flex; gap: 10px; margin-top: 24px; }
.password-output input { background: #f5f7fb; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 1.05rem; letter-spacing: .04em; }
.password-output button { flex: none; }
.password-strength { align-items: baseline; display: flex; gap: 10px; margin-top: 14px; }
.password-strength span, .password-strength small { color: var(--muted); font-size: .85rem; }
.password-strength strong { color: var(--primary-dark); }
.estimate-notice { background: #fff6dd; border: 1px solid #efd69c; border-radius: 10px; color: #6d5319; font-size: .9rem; margin: 0 0 22px; padding: 12px 14px; }
.takehome-fields { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.takehome-fields input { display: block; margin-top: 6px; }
.care-option { font-size: .9rem; font-weight: 400; margin: 16px 0 0; }
.care-option input { accent-color: var(--primary); margin-right: 5px; }
.takehome-details { border-top: 1px solid var(--line); margin-top: 20px; padding-top: 18px; }
.takehome-details summary { cursor: pointer; font-size: .9rem; font-weight: 700; }
.takehome-details .takehome-fields { margin-top: 16px; }
.takehome-breakdown { display: grid; gap: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 26px 0 0; }
.takehome-breakdown div { border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; padding: 10px 6px; }
.takehome-breakdown dt { color: var(--muted); font-size: .88rem; }
.takehome-breakdown dd { font-weight: 700; margin: 0; }
.takehome-caution { margin-top: 24px; }
.takehome-caution h2 { font-size: 1.05rem; }
.takehome-caution ul { color: var(--muted); font-size: .9rem; margin-bottom: 0; padding-left: 1.3em; }
.csv-editor-section { border-bottom: 1px solid var(--line); margin-top: 28px; padding-bottom: 26px; }
.csv-editor-section h2 { font-size: 1.05rem; margin-bottom: 6px; }
.column-editor { display: grid; gap: 8px; margin-top: 16px; }
.column-editor-item { align-items: center; background: #f5f7fb; border-radius: 9px; display: flex; justify-content: space-between; padding: 9px 10px; }
.column-editor-item label { align-items: center; display: flex; font-size: .9rem; font-weight: 500; gap: 8px; margin: 0; overflow-wrap: anywhere; }
.column-editor-item input { accent-color: var(--primary); }
.column-editor-item div { display: flex; gap: 5px; }
.column-editor-item button { font-size: .9rem; padding: 4px 9px; }
.csv-filter { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 16px; }
.csv-filter select, .csv-filter input { display: block; margin-top: 6px; width: 100%; }
.lp-builder-editor { margin-top: 24px; }
.lp-builder-heading { align-items: center; display: flex; gap: 16px; justify-content: space-between; }
.lp-builder-heading h2 { font-size: 1.1rem; margin: 0 0 4px; }
.lp-builder-heading .hint { margin: 0; }
.lp-builder-fields { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(180px, 1fr)); margin-top: 22px; }
.lp-builder-fields input, .lp-builder-fields select { display: block; margin-top: 6px; width: 100%; }
.is-layout-hidden { display: none; }
.lp-seo-details { background: #f5f7fb; border: 1px solid #e3e8f3; border-radius: 10px; margin-top: 20px; padding: 13px 15px; }
.lp-seo-details summary { color: var(--primary); cursor: pointer; font-size: .92rem; font-weight: 700; }
.lp-seo-details .hint { margin: 12px 0 0; }
.lp-seo-fields { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 14px; }
.lp-seo-fields label { font-size: .85rem; }
.lp-seo-fields input, .lp-seo-fields select { display: block; margin-top: 5px; width: 100%; }
.lp-block-section, .lp-hotspot-editor, .lp-preview-section { border-top: 1px solid var(--line); margin-top: 28px; padding-top: 24px; }
.lp-block-section h2, .lp-hotspot-editor h2, .lp-preview-section h2 { font-size: 1.1rem; margin: 0 0 6px; }
.lp-block-list { display: grid; gap: 12px; margin-top: 18px; }
.lp-block-item { align-items: start; background: #f5f7fb; border: 1px solid #e3e8f3; border-radius: 12px; display: grid; gap: 14px; grid-template-columns: 100px 1fr; padding: 12px; }
.lp-block-item > img { background-image: linear-gradient(45deg, #e4e9f3 25%, transparent 25%), linear-gradient(-45deg, #e4e9f3 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e4e9f3 75%), linear-gradient(-45deg, transparent 75%, #e4e9f3 75%); background-position: 0 0, 0 8px, 8px -8px, -8px 0; background-size: 16px 16px; max-height: 100px; object-fit: contain; width: 100%; }
.lp-block-heading { display: flex; flex-wrap: wrap; gap: 6px 10px; justify-content: space-between; }
.lp-block-heading strong { font-size: .9rem; overflow-wrap: anywhere; }
.lp-block-heading small { color: var(--muted); }
.lp-block-controls { align-items: center; display: flex; gap: 7px; margin: 10px 0; }
.lp-block-controls button { font-size: .85rem; padding: 5px 9px; }
.lp-visible-toggle { font-size: .85rem; font-weight: 500; margin: 0 auto 0 0; }
.lp-visible-toggle input { accent-color: var(--primary); }
.lp-block-fields { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(140px, 1fr)); }
.lp-block-fields label { font-size: .78rem; }
.lp-block-fields input, .lp-block-fields select { display: block; font-size: .9rem; margin-top: 4px; width: 100%; }
.hotspot-workspace { background-image: linear-gradient(45deg, #e4e9f3 25%, transparent 25%), linear-gradient(-45deg, #e4e9f3 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e4e9f3 75%), linear-gradient(-45deg, transparent 75%, #e4e9f3 75%); background-position: 0 0, 0 8px, 8px -8px, -8px 0; background-size: 16px 16px; cursor: crosshair; margin-top: 18px; max-width: 900px; position: relative; touch-action: none; width: 100%; }
.hotspot-workspace > img { display: block; height: auto; pointer-events: none; user-select: none; width: 100%; }
.hotspot-region { align-items: center; background: rgb(37 99 235 / .18); border: 2px solid #2563eb; color: #173a96; display: flex; font-size: .8rem; font-weight: 700; justify-content: center; pointer-events: none; position: absolute; }
.hotspot-draft { background: rgb(22 163 74 / .18); border-color: #16a34a; }
.hotspot-list { display: grid; gap: 10px; margin-top: 18px; }
.hotspot-list-item { background: #f5f7fb; border: 1px solid #e3e8f3; border-radius: 10px; padding: 12px; }
.hotspot-list-item > strong { display: block; font-size: .84rem; margin-bottom: 10px; }
.hotspot-list-item button { font-size: .82rem; margin-top: 10px; padding: 6px 9px; }
.hotspot-fields { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hotspot-fields label { font-size: .8rem; }
.hotspot-fields input, .hotspot-fields select { display: block; margin-top: 4px; width: 100%; }
.lp-preview-count { background: #eef2ff; border-radius: 999px; color: var(--primary-dark); font-size: .8rem; font-weight: 700; padding: 6px 9px; white-space: nowrap; }
.lp-preview-frame { background: #e9edf4; border: 1px solid var(--line); border-radius: 12px; margin-top: 16px; max-height: 700px; overflow: auto; padding: 20px; }
.lp-preview { background: #fff; box-shadow: 0 5px 20px rgb(30 43 76 / .12); margin: 0 auto; max-width: 700px; min-height: 120px; overflow: hidden; }
.lp-preview-block { line-height: 0; text-align: center; }
.lp-image-wrap { line-height: 0; position: relative; }
.lp-image-wrap img { display: block; height: auto; max-width: 100%; width: 100%; }
.lp-image-wrap.align-left { margin-right: auto; }
.lp-image-wrap.align-center { margin-inline: auto; }
.lp-image-wrap.align-right { margin-left: auto; }
.lp-preview-hotspot { border: 1px dashed rgb(37 99 235 / .8); outline-offset: -1px; position: absolute; }
.lp-builder-note { margin-top: 24px; }
.lp-builder-note h2 { font-size: 1.05rem; }
.lp-builder-note ul { color: var(--muted); font-size: .9rem; margin-bottom: 0; padding-left: 1.3em; }
.lp-merge-files { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lp-merge-drop { min-height: 150px; }
.lp-merge-settings { border-top: 1px solid var(--line); margin-top: 22px; padding-top: 18px; }
.lp-merge-settings label { display: block; font-size: .9rem; max-width: 260px; }
.lp-merge-settings input { display: block; margin-top: 6px; width: 100%; }
.lp-merge-settings .hint { margin-bottom: 0; }
.lp-merge-status { background: #f5f7fb; border-radius: 8px; color: var(--muted); font-size: .88rem; margin: 10px 0 0; padding: 9px 11px; }
.lp-merge-status.is-valid { background: #edf9f0; color: #23673d; }
.lp-merge-status + .error-panel { margin-top: 14px; }
.lp-merge-note { margin-top: 24px; }
.lp-merge-note h2 { font-size: 1.05rem; }
.lp-merge-note ul { color: var(--muted); font-size: .9rem; margin-bottom: 0; padding-left: 1.3em; }
.lp-background-editor { margin-top: 24px; }
.background-block-list { border-top: 1px solid var(--line); display: grid; gap: 8px; margin-top: 20px; padding-top: 18px; }
.background-block-item { align-items: center; background: #f5f7fb; border: 1px solid #e3e8f3; border-radius: 9px; cursor: pointer; display: flex; gap: 10px; padding: 10px 12px; }
.background-block-item input { flex: 0 0 auto; }
.background-block-thumbnail { background: #fff; border: 1px solid #dce3ef; border-radius: 5px; height: 64px; object-fit: contain; width: 88px; }
.background-block-item span { display: grid; gap: 2px; min-width: 0; }
.background-block-item strong { font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.background-block-item small { color: var(--muted); font-size: .76rem; }
.background-section-list-wrap { border-top: 1px solid var(--line); margin-top: 26px; padding-top: 22px; }
.background-section-list-wrap h2 { font-size: 1.1rem; margin: 0 0 6px; }
.background-section-list { display: grid; gap: 12px; margin-top: 18px; }
.background-section-item { background: #f5f7fb; border: 1px solid #e3e8f3; border-radius: 10px; padding: 14px; }
.background-section-item > strong { display: block; font-size: .9rem; margin-bottom: 12px; }
.section-background-preview { margin: 0 0 14px; }
.section-background-preview figcaption { color: var(--muted); font-size: .78rem; margin-bottom: 6px; }
.section-background-preview-canvas { background-color: #fff; border: 1px solid #dce3ef; border-radius: 8px; line-height: 0; max-height: 320px; overflow: auto; }
.section-background-preview-canvas img { display: block; height: auto; max-width: 100%; }
.section-background-preview-canvas img.align-left { margin-right: auto; }
.section-background-preview-canvas img.align-center { margin-inline: auto; }
.section-background-preview-canvas img.align-right { margin-left: auto; }
.background-section-fields { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.section-background-preview-canvas.is-viewport-width {
  box-shadow: inset 0 0 0 1px #d7deea, 12px 0 0 #edf1f7, -12px 0 0 #edf1f7;
}
.background-section-fields label { font-size: .78rem; }
.background-section-fields input, .background-section-fields select { display: block; margin-top: 4px; width: 100%; }
.background-section-fields input[type="color"] { height: 37px; padding: 3px; }
.margin-share-controls { border-top: 1px solid #dfe5ef; margin-top: 16px; padding-top: 14px; }
.margin-share-controls > strong { display: block; font-size: .86rem; }
.margin-share-controls .hint { font-size: .78rem; margin: 4px 0 10px; }
.margin-share-presets { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.margin-share-presets button { margin: 0; }
.margin-share-boundary {
  background: #f7f9fc;
  border: 1px solid #e3e8f1;
  border-radius: 10px;
  margin-top: 12px;
  padding: 12px;
}
.margin-share-boundary-title { display: block; font-size: .82rem; }
.margin-share-summary {
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.55;
  margin: 6px 0 0;
}
.margin-share-field { display: block; font-size: .8rem; margin-top: 10px; }
.margin-share-field > strong { color: var(--primary); float: right; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.margin-share-field small { color: var(--muted); display: block; margin-top: 3px; }
.margin-share-field input { margin-top: 5px; width: 100%; }
.margin-share-rule { margin: 6px 0 0 !important; }
.margin-share-note { color: var(--muted); font-size: .8rem; margin: 12px 0 0; }
.gradient-tool-link { color: var(--muted); font-size: .82rem; margin: 12px 0 0; }
.gradient-tool-link a { font-weight: 700; }
.gradient-tool-link code { background: #e9edf5; border-radius: 4px; font-size: .84em; padding: 1px 5px; }
.background-section-item button { font-size: .82rem; margin-top: 12px; padding: 6px 9px; }
.lp-background-note { margin-top: 24px; }
.lp-background-note h2 { font-size: 1.05rem; }
.lp-background-note ul { color: var(--muted); font-size: .9rem; margin-bottom: 0; padding-left: 1.3em; }
.guide-page .tool-intro h1 { letter-spacing: -.03em; }
.guide-toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 34px; }
.guide-toc a { background: var(--surface); border: 1px solid var(--line); border-radius: 999px; color: var(--ink); font-size: .82rem; font-weight: 700; padding: 7px 12px; text-decoration: none; }
.guide-toc a:hover { border-color: var(--primary); color: var(--primary); }
.guide-body { display: grid; gap: 28px; }
.guide-section { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(18px, 4vw, 28px); scroll-margin-top: 16px; }
.guide-section h2 { font-size: 1.25rem; margin: 0 0 12px; }
.guide-section h3 { font-size: 1rem; margin: 0 0 8px; }
.guide-section p, .guide-section li { color: var(--muted); }
.guide-section ul, .guide-section ol { margin: 12px 0 0; padding-left: 1.3em; }
.guide-section a { color: var(--primary); font-weight: 700; text-decoration: none; }
.guide-section a:hover { text-decoration: underline; }
.guide-steps { display: grid; gap: 8px; }
.guide-figure { margin: 18px 0 0; }
.guide-figure img { background: #eef2f8; border: 1px solid var(--line); border-radius: 12px; display: block; max-width: 100%; width: 100%; }
.guide-figure figcaption { color: var(--muted); font-size: .82rem; margin-top: 8px; }
.guide-placeholder-box {
  align-items: flex-start; background: repeating-linear-gradient(-45deg, #f5f7fb, #f5f7fb 12px, #eef2f8 12px, #eef2f8 24px);
  border: 2px dashed #b7c3d8; border-radius: 12px; color: var(--ink); display: grid; gap: 6px; min-height: 180px; padding: 22px;
}
.guide-placeholder-box strong { font-size: 1rem; }
.guide-placeholder-box p { color: var(--muted); font-size: .88rem; margin: 0; }
.guide-placeholder-box code { background: #fff; border-radius: 4px; font-size: .84em; padding: 1px 5px; }
.guide-callout { background: #f5f7fb; border-radius: 12px; margin-top: 16px; padding: 14px 16px; }
.guide-callout strong { display: block; font-size: .9rem; margin-top: 10px; }
.guide-callout strong:first-child { margin-top: 0; }
.guide-callout p { margin: 4px 0 0; }
.guide-roles { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 16px; }
.guide-roles > div { background: #f5f7fb; border-radius: 12px; padding: 14px; }
.guide-cta .button,
.guide-section a.button {
  background: var(--primary);
  color: #fff;
  display: inline-block;
  text-decoration: none;
}
.guide-cta .button:hover,
.guide-section a.button:hover {
  background: var(--primary-dark);
  color: #fff;
  text-decoration: none;
}
.site-footer { color: var(--muted); padding: 40px 0 28px; text-align: center; }

@media (max-width: 520px) {
  .site-header { display: block; padding: 20px 0; }
  .site-header p { margin-top: 3px; }
  .hero { padding: 42px 0 32px; }
  .stats { grid-template-columns: 1fr; }
  .site-check-summary { grid-template-columns: 1fr; }
  .site-check-item { gap: 8px; }
  .palette-grid { grid-template-columns: repeat(2, 1fr); }
  .swatch { min-height: 100px; }
  .contrast-controls { grid-template-columns: 1fr; }
  .generator-layout { grid-template-columns: 1fr; }
  .preview-area { min-height: 200px; }
  .code-output, .code-output-row { align-items: stretch; flex-direction: column; }
  .dummy-form { grid-template-columns: repeat(2, 1fr); }
  .copy-row { align-items: stretch; flex-direction: column; }
  .estimate-head { display: none; }
  .estimate-row { align-items: start; grid-template-columns: 1fr 1fr; }
  .estimate-row > span:first-child { grid-column: 1 / -1; font-weight: 700; }
  .estimate-summary { grid-template-columns: 1fr; }
  .client-output li { display: block; }
  .image-settings { grid-template-columns: 1fr; }
  .image-result-card { grid-template-columns: 1fr; }
  .image-result-card img { height: auto; max-height: 220px; width: 100%; }
  .survey-selects { grid-template-columns: 1fr; }
  .normalizer-layout, .normalizer-options { grid-template-columns: 1fr; }
  .invoice-grid, .invoice-addresses { grid-template-columns: 1fr; }
  .invoice-preview-head { gap: 16px; }
  .invoice-preview-head h2 { font-size: 1.5rem; }
  .inline-fields, .holiday-settings-form, .splitter-settings, .splitter-merge-controls, .converter-form, .password-settings, .takehome-fields, .takehome-breakdown, .csv-filter, .lp-builder-fields, .lp-seo-fields, .lp-block-fields, .hotspot-fields, .lp-merge-files, .background-section-fields, .kuku-setup-grid, .kanji-setup-grid { grid-template-columns: 1fr; }
  .password-output { align-items: stretch; flex-direction: column; }
  .lp-builder-heading { align-items: stretch; flex-direction: column; }
  .lp-block-item { grid-template-columns: 76px 1fr; }
  .guide-roles { grid-template-columns: 1fr; }
}

.genko-options { align-items: end; }
.genko-custom { margin-top: 12px; }
.genko-custom label { min-width: 120px; }
.genko-board { display: grid; gap: 28px; margin: 28px 0 8px; }
.genko-sheet {
  background: #fffdf8;
  border: 2px solid #c45c5c;
  border-radius: 8px;
  padding: 12px 14px 16px;
}
.genko-sheet-label { color: #a14b4b; font-size: .8rem; font-weight: 700; margin: 0 0 8px; text-align: right; }
.genko-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  grid-template-rows: repeat(var(--rows), minmax(0, 1fr));
  width: 100%;
}
.genko-sheet.is-vertical .genko-grid { direction: rtl; grid-auto-flow: column; }
.genko-sheet.is-horizontal .genko-grid { direction: ltr; grid-auto-flow: row; }
.genko-cell {
  align-items: center;
  aspect-ratio: 1;
  background: #fff;
  border: 1px solid #f0b4b4;
  color: #1d2430;
  cursor: pointer;
  display: flex;
  font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: clamp(.7rem, 2.1vw, 1.05rem);
  justify-content: center;
  line-height: 1;
  overflow: hidden;
}
.genko-cell:hover { background: #fff4c2; }
.genko-cell.is-copied { background: #ffe7a3; }
.genko-cell.is-bookmark {
  background: #ffd24d;
  box-shadow: inset 0 0 0 2px #c79212;
}
.genko-sheet.is-vertical .genko-cell { text-orientation: upright; writing-mode: vertical-rl; }
.genko-cell.is-combined { gap: 0; }
.genko-punct { font-size: .62em; line-height: 1; }
.genko-sheet.is-horizontal .genko-punct { margin-left: -.08em; }
.genko-sheet.is-vertical .genko-punct { margin-top: -.12em; }

.kuku-dans, .kuku-mode {
  border: 1px solid var(--line);
  border-radius: 12px;
  margin: 0 0 18px;
  padding: 14px 16px 16px;
}
.kuku-dans legend, .kuku-mode legend {
  font-size: .9rem;
  font-weight: 700;
  padding: 0 4px;
}
.kuku-dan-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.kuku-dan {
  align-items: center;
  background: #f5f7fb;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  font-size: .95rem;
  font-weight: 700;
  gap: 8px;
  justify-content: center;
  margin: 0;
  min-height: 46px;
  padding: 8px 10px;
}
.kuku-dan.is-selected,
.kuku-dan:has(input:checked) {
  background: #e9eeff;
  border-color: #c5d0fb;
  color: var(--primary-dark);
}
.kuku-dan input { accent-color: var(--primary); margin: 0; }
.kuku-dan-actions { margin-top: 12px; }
.kuku-setup-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 18px;
}
.kuku-setup-grid label { margin: 0; }
.kuku-setup-grid select, .kuku-setup-grid input { display: block; margin-top: 6px; width: 100%; }
.kuku-mode-tabs { display: flex; gap: 8px; }
.kuku-mode-tabs button {
  background: #e9edf5;
  color: var(--ink);
  flex: 1;
  touch-action: manipulation;
}
.kuku-mode-tabs button:hover { background: #dce2ed; color: var(--ink); }
.kuku-mode-tabs button[aria-selected="true"],
.kuku-mode-tabs button[aria-selected="true"]:hover { background: var(--primary); color: #fff; }
.kuku-mode-tabs button[aria-selected="true"]:hover { background: var(--primary-dark); }
.kuku-mode .hint { margin-top: 12px; }
.kuku-timer-option {
  align-items: center;
  display: flex;
  font-weight: 500;
  gap: 8px;
  margin: 4px 0 16px;
}
.kuku-timer-option input { accent-color: var(--primary); height: 18px; margin: 0; width: 18px; }
.kuku-pool-count { color: var(--primary-dark); font-weight: 800; margin: 0 0 8px; }
.kuku-stats { margin-top: 0; }
.kuku-card,
.kuku-card:hover {
  background: #f5f7fb;
  border: 1px solid var(--line);
  border-radius: 16px;
  color: var(--ink);
  display: block;
  font: inherit;
  margin: 22px 0 0;
  padding: 28px 16px 22px;
  text-align: center;
  touch-action: manipulation;
  transition: background .15s, box-shadow .15s;
  width: 100%;
}
.kuku-card.is-clickable { cursor: pointer; }
.kuku-card.is-clickable:hover { box-shadow: 0 10px 24px #17203314; }
.kuku-card.is-revealed,
.kuku-card.is-revealed:hover { background: #eef3ff; color: var(--ink); }
.kuku-card.is-correct,
.kuku-card.is-correct:hover { background: #e9f8ee; color: var(--ink); }
.kuku-card.is-wrong,
.kuku-card.is-wrong:hover { background: #fff0f0; color: var(--ink); }
.kuku-prompt {
  font-size: clamp(2.2rem, 8vw, 3.8rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.15;
  margin: 0;
}
.kuku-answer {
  color: var(--muted);
  font-size: clamp(2.4rem, 9vw, 4.2rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.1;
  margin: 8px 0 0;
  min-height: 1.1em;
}
.kuku-answer.is-shown { color: var(--primary-dark); }
.kuku-feedback {
  color: var(--muted);
  font-size: .95rem;
  font-weight: 700;
  min-height: 1.4em;
  margin: 10px 0 0;
}
.kuku-card.is-correct .kuku-feedback { color: #146c2e; }
.kuku-card.is-wrong .kuku-feedback { color: #ab2525; }
.kuku-type-area { margin-top: 18px; }
.kuku-type-area input {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-align: center;
}
.kuku-keypad {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 12px;
}
.kuku-keypad button {
  min-height: 52px;
  touch-action: manipulation;
}
.kuku-result h2 { font-size: 1.6rem; margin: 0 0 8px; }
.kuku-result-lead { color: var(--muted); margin: 0 0 18px; }
.kuku-result .stats { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin-top: 0; }
.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.kanji-setup-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 18px;
}
.kanji-setup-grid label { margin: 0; }
.kanji-setup-grid select, .kanji-setup-grid input { display: block; margin-top: 6px; width: 100%; }
.kanji-card { min-height: 220px; }
.kanji-task {
  color: var(--muted);
  font-size: .95rem;
  font-weight: 700;
  margin: 0 0 16px;
}
.kanji-sentence {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  font-size: clamp(1.55rem, 5.4vw, 2.45rem);
  font-weight: 800;
  justify-content: center;
  line-height: 1.35;
  margin: 0;
  row-gap: 8px;
}
.kanji-text { letter-spacing: .02em; }
.kanji-target {
  align-items: center;
  display: inline-flex;
  flex-direction: column;
  margin: 0 .12em .1em;
  min-width: 1.35em;
}
.kanji-char {
  align-items: center;
  border: 3px solid #c5d0fb;
  border-radius: 12px;
  display: flex;
  font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: 1.15em;
  height: 1.55em;
  justify-content: center;
  min-width: 1.55em;
  padding: 0 .12em;
}
.kanji-char.is-blank {
  background: #fffef5;
  border-color: #e2c56a;
  color: #c7b36a;
}
.kanji-card.is-revealed .kanji-char {
  background: #eef3ff;
  border-color: var(--primary);
  color: var(--ink);
}
.kanji-reading {
  color: var(--muted);
  font-size: .45em;
  font-weight: 700;
  letter-spacing: .04em;
  margin-top: 6px;
}

@media print {
  .site-header, .site-footer, .back-link, .tool-intro, .estimate-notice, .client-mode-switch, .button-row, .hint, .genko-controls { display: none; }
  body { background: #fff; }
  .container { width: 100%; }
  .genko-sheet { break-after: page; box-shadow: none; }
  .genko-board { gap: 0; margin: 0; }
  .genko-cell, .genko-cell:hover, .genko-cell.is-copied, .genko-cell.is-bookmark { background: #fff; box-shadow: none; cursor: default; }
  .tool-panel, .estimate-summary { border: 1px solid #ccc; box-shadow: none; }
  .estimate-summary { background: #fff; color: #000; }
  .estimate-summary span { color: #555; }
  body.client-mode .estimate-summary, body.client-mode .estimate-section, body.client-mode .estimate-notes { display: none; }
  body.client-mode .client-output { display: block; }
  .invoice-form-panel, .invoice-preview + .site-footer { display: none; }
  .invoice-preview { border: 0; margin: 0; padding: 0; }
}