/* ============================================================
   common.css — クイックツール集 共通スタイル
   ============================================================ */

/* ── Variables ── */
:root {
  --bg:          #F8F9FA;
  --bg-white:    #FFFFFF;
  --ink:         #0D1117;
  --ink-mid:     #374151;
  --ink-light:   #6B7280;
  --ink-xlight:  #9CA3AF;
  --border:      #E5E7EB;
  --border-mid:  #D1D5DB;
  --card:        #FFFFFF;
  --blue:        #2563EB;
  --blue-light:  #EFF6FF;
  --blue-mid:    #DBEAFE;
  --blue-hover:  #1D4ED8;
  --accent:      #2563EB;
  --accent-muted:#DBEAFE;
  --rule:        #E5E7EB;
  --green:       #3A7D44;
  --green-bg:    #E8F5E9;
  --sans: 'Noto Sans JP', sans-serif;
  --mono: 'DM Mono', 'Courier New', monospace;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Base ── */
html { font-size: 16px; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── Header ── */
header {
  border-bottom: 1px solid var(--border);
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 100;
}

.logo {
  display: flex;
  align-items: baseline;
  gap: 10px;
  text-decoration: none;
}
.logo-ja {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.logo-en {
  font-size: 11px;
  font-weight: 400;
  color: var(--ink-xlight);
  letter-spacing: 0.1em;
}

.back-link {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-light);
  text-decoration: none;
  padding: 6px 14px;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}
.back-link:hover { background: var(--blue-light); color: var(--blue); }

/* ── Page Hero ── */
.page-hero {
  max-width: 1140px;
  width: 100%;
  margin: 0 auto;
  padding: 36px 40px 0;
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.page-hero h1 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.page-hero .subtitle {
  font-size: 12px;
  color: var(--ink-light);
  font-weight: 400;
  letter-spacing: 0.02em;
  border-left: 2px solid var(--blue);
  padding-left: 10px;
}

/* ── Main ── */
main {
  flex: 1;
  max-width: 1140px;
  width: 100%;
  margin: 0 auto;
  padding: 28px 40px 72px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ── Drop Zone ── */
.drop-zone {
  border: 1px dashed var(--border-mid);
  background: var(--card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 56px 40px;
  cursor: pointer;
  transition: all 0.2s;
  min-height: 200px;
}
.drop-zone:hover,
.drop-zone.drag-over {
  background: var(--blue-light);
  border-style: solid;
  border-color: var(--blue);
}
.drop-zone.drag-over { box-shadow: 0 0 0 3px var(--blue-mid); }
.drop-icon {
  font-size: 40px;
  margin-bottom: 14px;
  transition: transform 0.2s;
}
.drop-zone:hover .drop-icon,
.drop-zone.drag-over .drop-icon { transform: translateY(-4px); }
.drop-title {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
  color: var(--ink);
}
.drop-desc {
  font-size: 13px;
  color: var(--ink-light);
  font-weight: 400;
  text-align: center;
  line-height: 1.7;
}
.drop-hint {
  font-size: 11px;
  color: var(--ink-xlight);
  margin-top: 12px;
  letter-spacing: 0.08em;
}

/* ── Controls Bar ── */
.controls-bar {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border);
  background: var(--card);
  flex-wrap: wrap;
  border-radius: 8px;
  overflow: hidden;
}
.ctrl-section {
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 14px;
  border-right: 1px solid var(--border);
  flex-shrink: 0;
}
.ctrl-section:last-child { border-right: none; }
.ctrl-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--ink-xlight);
  text-transform: uppercase;
  white-space: nowrap;
}

/* ── Range Slider ── */
input[type="range"] {
  -webkit-appearance: none;
  height: 3px;
  background: var(--border);
  outline: none;
  cursor: pointer;
  border-radius: 2px;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  background: var(--blue);
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.15s, transform 0.1s;
  box-shadow: 0 1px 4px rgba(37,99,235,0.3);
}
input[type="range"]::-webkit-slider-thumb:hover {
  background: var(--blue-hover);
  transform: scale(1.1);
}


.cp:hover { transform: scale(1.15); border-color: var(--ink); }
.cp.active { border: 2px solid var(--blue); }

/* ── Mode/Style toggle buttons ── */
.mode-btns,
.type-btns,
.style-btns,
.fit-btns { display: flex; }
.mode-btn,
.type-btn,
.style-btn,
.fit-btn {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 7px 14px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--ink-light);
  cursor: pointer;
  transition: all 0.15s;
  margin-left: -1px;
  white-space: nowrap;
}
.mode-btn:first-child,
.type-btn:first-child,
.style-btn:first-child,
.fit-btn:first-child { margin-left: 0; border-radius: 6px 0 0 6px; }
.mode-btn:last-child,
.type-btn:last-child,
.style-btn:last-child,
.fit-btn:last-child { border-radius: 0 6px 6px 0; }
.mode-btn:hover:not(.active),
.type-btn:hover:not(.active),
.style-btn:hover:not(.active),
.fit-btn:hover:not(.active) { border-color: var(--blue); color: var(--blue); z-index: 1; }
.mode-btn.active,
.type-btn.active,
.style-btn.active,
.fit-btn.active { background: var(--blue); color: #fff; border-color: var(--blue); z-index: 1; }

/* ── Format buttons ── */
.fmt-row { display: flex; gap: 4px; }
.fmt-btn {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 6px 12px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--ink-light);
  cursor: pointer;
  transition: all 0.15s;
  border-radius: 5px;
}
.fmt-btn:hover { border-color: var(--blue); color: var(--blue); }
.fmt-btn.active { background: var(--blue); color: #fff; border-color: var(--blue); }

/* ── Preview panes ── */
.preview-area,
.workspace {
  display: grid;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.preview-area { grid-template-columns: 1fr 1fr; }

.pane {
  background: var(--card);
  display: flex;
  flex-direction: column;
}
.pane-header,
.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.pane-header-left,
.panel-header-left { display: flex; align-items: center; gap: 8px; }
.pane-title,
.panel-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--ink-light);
  text-transform: uppercase;
}
.pane-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  letter-spacing: 0.08em;
  border-radius: 4px;
}
.badge-orig  { background: #E8F0FE; color: #1D4ED8; }
.badge-blur  { background: #EDE8FF; color: #5B21B6; }
.badge-frame { background: #FEF3C7; color: #92400E; }
.badge-white { background: var(--bg); color: var(--ink-light); border: 1px solid var(--border); }
.badge-ig    { background: linear-gradient(45deg,#F58529,#DD2A7B); color: white; }

.live-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.15em;
  background: var(--green-bg);
  color: var(--green);
  padding: 2px 8px;
  border: 1px solid var(--green);
  border-radius: 3px;
}
.pane-meta,
.panel-meta { font-size: 11px; color: var(--ink-xlight); }

.pane-img-area,
.preview-img-area,
.preview-canvas-area {
  flex: 1;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: repeating-conic-gradient(#E8EAED 0% 25%, #F8F9FA 0% 50%) 0 0 / 16px 16px;
}
.pane-img-area img,
.pane-img-area canvas,
.preview-img-area canvas,
.preview-canvas-area canvas {
  max-width: 100%;
  max-height: 380px;
  object-fit: contain;
  display: block;
  box-shadow: 0 2px 16px rgba(0,0,0,0.10);
  border-radius: 2px;
}

.pane-footer,
.panel-footer {
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg);
}
.size-block { display: flex; align-items: baseline; gap: 6px; }
.size-label { font-size: 11px; color: var(--ink-xlight); }
.size-val   { font-size: 14px; font-weight: 600; color: var(--ink); }
.dims-info  { font-size: 11px; color: var(--ink-xlight); }

/* ── Saving / Result strip ── */
.saving-strip,
.result-strip,
.info-strip {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 10px;
  overflow: hidden;
}
.saving-big,
.result-big {
  padding: 18px 24px;
  background: var(--blue);
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  flex-shrink: 0;
}
.saving-big-label,
.result-big-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
}
.saving-big-num,
.result-big-num {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}
.saving-big-unit,
.result-big-unit { font-size: 10px; color: rgba(255,255,255,0.5); letter-spacing: 0.1em; }
.saving-details,
.result-details { display: flex; flex: 1; flex-wrap: wrap; }
.saving-item,
.result-item {
  flex: 1;
  padding: 14px 18px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-width: 100px;
}
.saving-item:last-child,
.result-item:last-child { border-right: none; }
.saving-key,
.result-key {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--ink-xlight);
  text-transform: uppercase;
}
.saving-val,
.result-val { font-size: 15px; font-weight: 600; color: var(--ink); }

/* Info strip */
.info-item {
  flex: 1;
  padding: 12px 16px;
  border-right: 1px solid var(--border);
}
.info-item:last-child { border-right: none; }
.info-key {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--ink-xlight);
  text-transform: uppercase;
  margin-bottom: 3px;
}
.info-val { font-size: 14px; font-weight: 600; color: var(--ink); }

/* ── Action bar / Buttons ── */
.action-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.apply-btn,
.convert-btn,
.compress-btn {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  background: var(--blue);
  color: #fff;
  border: none;
  height: 46px;
  padding: 0 28px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
}
.apply-btn:hover,
.convert-btn:hover,
.compress-btn:hover { background: var(--blue-hover); }
.apply-btn:active,
.convert-btn:active,
.compress-btn:active { transform: scale(0.98); }
.apply-btn:disabled,
.convert-btn:disabled,
.compress-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.apply-btn:disabled:hover,
.convert-btn:disabled:hover,
.compress-btn:disabled:hover { background: var(--blue); }

.download-btn {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  background: var(--green);
  color: white;
  border: none;
  height: 46px;
  padding: 0 24px;
  cursor: pointer;
  transition: opacity 0.15s;
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  border-radius: 8px;
}
.download-btn:hover { opacity: 0.88; }

.reset-btn {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-light);
  background: none;
  border: 1px solid var(--border);
  height: 46px;
  padding: 0 20px;
  cursor: pointer;
  transition: all 0.15s;
  border-radius: 8px;
}
.reset-btn:hover { border-color: var(--blue); color: var(--blue); }

/* ── Crop editor ── */
.crop-editor {
  border: 1px solid var(--border);
  background: var(--card);
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  overflow: hidden;
}
.crop-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.crop-editor-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--ink-light);
  text-transform: uppercase;
}
.crop-hint-text { font-size: 11px; color: var(--ink-xlight); }
.crop-canvas-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  min-height: 300px;
  background: repeating-conic-gradient(#E8EAED 0% 25%, #F8F9FA 0% 50%) 0 0 / 16px 16px;
  user-select: none;
  overflow: hidden;
}

/* ── Progress bar ── */
.progress-bar-wrap,
.progress-wrap {
  border: 1px solid var(--border);
  background: var(--card);
  padding: 16px 20px;
  border-radius: 8px;
}
.progress-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--ink-light);
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
}
.progress-track { height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
.progress-fill  { height: 100%; background: var(--blue); width: 0%; transition: width 0.2s ease; border-radius: 2px; }

/* ── Toggle switch ── */
.toggle-chk {
  appearance: none;
  width: 30px;
  height: 17px;
  background: var(--border);
  border-radius: 9px;
  cursor: pointer;
  position: relative;
  transition: background 0.2s;
  flex-shrink: 0;
}
.toggle-chk::after {
  content: '';
  position: absolute;
  width: 11px;
  height: 11px;
  background: white;
  border-radius: 50%;
  top: 3px;
  left: 3px;
  transition: left 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.toggle-chk:checked { background: var(--blue); }
.toggle-chk:checked::after { left: 16px; }

/* ── Footer ── */
footer {
  border-top: 1px solid var(--border);
  padding: 18px 40px;
  background: var(--bg-white);
}
.footer-inner {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer-text {
  font-size: 12px;
  color: var(--ink-xlight);
  font-weight: 400;
}
.footer-link {
  font-size: 13px;
  color: var(--ink-light);
  text-decoration: none;
  font-weight: 500;
}
.footer-link:hover {
  color: var(--blue);
}
.footer-inner.footer-inner-stacked {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
}
.footer-inner-stacked .footer-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  width: 100%;
}
.footer-inner-stacked .footer-copy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  width: 100%;
}
.footer-accent { color: var(--blue); }

/* ── Utilities ── */
.hidden { display: none !important; }

@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  display: none;
}
.is-applying .spinner,
.is-converting .spinner,
.is-compressing .spinner { display: block; }
.is-applying .btn-label,
.is-converting .btn-label,
.is-compressing .btn-label { display: none; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeUp 0.3s ease both; }

/* ── Responsive ── */
@media (max-width: 800px) {
  header { padding: 0 20px; }
  main   { padding: 20px 20px 56px; }
  .page-hero { padding: 28px 20px 0; }
  footer { padding: 14px 20px; }
  .footer-inner-stacked .footer-copy {
    flex-direction: column;
    align-items: flex-start;
  }
  .preview-area { grid-template-columns: 1fr; }
  .controls-bar { flex-direction: column; align-items: stretch; }
  .ctrl-section { border-right: none; border-bottom: 1px solid var(--border); padding: 12px 16px; }
  .ctrl-section:last-child { border-bottom: none; }
}

/* ── Notice / Tip ── */
.notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  border-left: 3px solid var(--blue);
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 18px;
}
.notice-icon {
  font-size: 15px;
  flex-shrink: 0;
  margin-top: 1px;
  line-height: 1.5;
}
.notice-text {
  font-size: 12.5px;
  color: var(--ink-mid);
  font-weight: 400;
  line-height: 1.75;
}
.notice-text strong {
  font-weight: 700;
  color: var(--ink);
}

/* ─────────────────────────────────────
   Unified tool UI rules
   Common design rules for newer tool pages
───────────────────────────────────── */
.tool-badge {
  display: none;
}

.workspace {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 20px;
  align-items: start;
}

.panel,
.canvas-panel,
.preview-panel {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 0;
  overflow: hidden;
}

.preview-area {
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-conic-gradient(#E8EAED 0% 25%, #F8F9FA 0% 50%) 0 0 / 16px 16px;
  padding: 20px;
  overflow: auto;
}

.preview-area canvas,
.preview-area img {
  max-width: 100%;
  max-height: 520px;
  display: block;
  object-fit: contain;
  box-shadow: none;
  border-radius: 0;
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--border);
  border-radius: 0;
  overflow: visible;
}

.sidebar-section {
  background: var(--card);
  padding: 14px 16px;
  border-bottom: none;
}

.sidebar-section:last-child {
  border-bottom: none;
}

.sidebar-title {
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.25em;
  color: var(--ink-light);
  text-transform: uppercase;
  margin-bottom: 12px;
}

.ctrl-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.ctrl-row:last-child {
  margin-bottom: 0;
}

.ctrl-label {
  min-width: 74px;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-light);
  text-transform: none;
  white-space: nowrap;
}

.text-input,
.number-input,
.select-input,
.textarea-input {
  width: 100%;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 300;
  padding: 8px 10px;
  border-radius: 0;
  outline: none;
  transition: border-color 0.15s;
}

.text-input,
.number-input,
.select-input {
  height: 36px;
}

.textarea-input {
  min-height: 120px;
  resize: vertical;
  line-height: 1.7;
}

.text-input:focus,
.number-input:focus,
.select-input:focus,
.textarea-input:focus {
  border-color: var(--blue);
  box-shadow: none;
}

.range-input {
  flex: 1;
  min-width: 120px;
}

.result-list {
  display: grid;
  gap: 8px;
}

.result-item {
  border: 1px solid var(--border);
  background: var(--bg);
  padding: 8px 10px;
  border-radius: 0;
  font-size: 12px;
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.action-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.sidebar .action-bar {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.apply-btn,
.convert-btn,
.compress-btn,
.download-btn,
.reset-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.sidebar .apply-btn,
.sidebar .download-btn,
.sidebar .reset-btn {
  width: 100%;
  height: 44px;
  min-height: 44px;
  border-radius: 0;
  justify-content: center;
  text-align: center;
}

.sidebar .apply-btn {
  font-size: 11px;
  letter-spacing: 0.15em;
}

.sidebar .download-btn,
.sidebar .reset-btn {
  font-size: 11px;
  letter-spacing: 0.12em;
}


@media (max-width: 1000px) {
  .workspace {
    grid-template-columns: 1fr;
  }
  .sidebar {
    order: -1;
  }
}



/* ── Readable form fields for text-heavy tools ── */
.readable-input,
.readable-textarea {
  width: 100%;
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 0;
  font-family: "Noto Sans JP", Consolas, "Courier New", monospace;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0;
  box-sizing: border-box;
}

.readable-input {
  min-height: 44px;
  padding: 10px 14px;
}

.readable-textarea {
  min-height: 132px;
  padding: 18px 20px;
  resize: vertical;
}

.readable-textarea.textarea-tall {
  min-height: 420px;
}

.readable-input::placeholder,
.readable-textarea::placeholder {
  color: var(--ink-light);
  font-weight: 400;
}

.readable-input:focus,
.readable-textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.08);
}

@media (max-width: 900px) {
  .readable-textarea.textarea-tall {
    min-height: 300px;
  }
}

/* Hidden native color input. Use .color-swatch and .color-hex as the visible UI. */
input[type="color"] {
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  position: absolute !important;
  pointer-events: none !important;
  padding: 0 !important;
  border: 0 !important;
}

/* ── Unified color picker UI ── */
.color-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.color-row:last-child {
  margin-bottom: 0;
}
.color-row-label {
  font-size: 10px;
  color: var(--ink-light);
  width: 52px;
  flex-shrink: 0;
}
.color-swatch {
  width: 42px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
  transition: box-shadow 0.15s;
}
.color-swatch:hover {
  box-shadow: 0 0 0 2px var(--blue);
}
.color-hex,
.color-hex-label {
  font-size: 12px;
  line-height: 32px;
  min-width: 72px;
  text-align: center;
  color: var(--ink);
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  font-weight: 500;
  text-transform: uppercase;
}

/* Editable hex fields shown next to color swatches. */
input.color-hex {
  width: 86px;
  height: 32px;
  min-width: 86px;
  padding: 0 7px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  color: var(--ink);
  cursor: text;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 32px;
  text-align: center;
  text-transform: uppercase;
  box-sizing: border-box;
}
input.color-hex:focus {
  outline: none;
  border-bottom-color: var(--blue);
  box-shadow: 0 1px 0 var(--blue);
}
input.color-hex.is-invalid {
  color: #b91c1c;
  border-bottom-color: #ef4444;
}

.color-presets {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.color-presets .cp,
.cp {
  width: 26px;
  height: 26px;
  border-radius: 5px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.12s;
  flex-shrink: 0;
}
.color-presets .cp:hover,
.cp:hover {
  transform: scale(1.08);
  border-color: var(--ink);
}


/* ── Unified tool description text size ── */
.notice.tool-description,
.tool-description {
  font-size: 12.5px !important;
  line-height: 1.75 !important;
  font-weight: 400 !important;
}
.notice.tool-description strong,
.tool-description strong {
  font-size: 12.5px !important;
  line-height: 1.75 !important;
}



/* ── English layout adjustment ── */
html[lang="en"] .page-hero,
html[lang="en"] .workspace,
html[lang="en"] .panel,
html[lang="en"] .sidebar,
html[lang="en"] .sidebar-section,
html[lang="en"] .tool-form,
html[lang="en"] .main-column,
html[lang="en"] .preview-area,
html[lang="en"] .output-box {
  min-width: 0;
}

html[lang="en"] .page-hero {
  align-items: flex-start;
  gap: 10px 14px;
}

html[lang="en"] .page-hero h1 {
  line-height: 1.25;
  letter-spacing: -0.035em;
  max-width: 100%;
}

html[lang="en"] .page-hero .subtitle {
  max-width: 100%;
  line-height: 1.55;
}

html[lang="en"] :where(
  .page-hero h1,
  .subtitle,
  .tool-description,
  .tool-note,
  .notice,
  .notice-text,
  .drop-title,
  .drop-desc,
  .drop-hint,
  .sidebar-title,
  .ctrl-label,
  .field-label,
  .color-row-label,
  .slider-row-label,
  .dim-row-label,
  .option-line,
  .checkbox-line,
  .toggle-label,
  .panel-label,
  .file-name,
  .file-meta,
  .result-item,
  .metric-label,
  .result-big-label,
  .saving-big-label,
  .preview-label,
  .preview-label-title,
  .preview-label-dims,
  .preview-label-fmt,
  .fmt-desc,
  .btn-label,
  .btn-label-sub
) {
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

html[lang="en"] :where(
  .ctrl-row,
  .color-row,
  .slider-row,
  .range-row,
  .dim-row,
  .offset-row,
  .angle-row,
  .alpha-row,
  .ch-row,
  .compact-row,
  .row-inline,
  .toggle-row,
  .lock-row,
  .preview-select-row,
  .custom-color-add-row,
  .custom-color-picker-row,
  .sheet-select-row
) {
  flex-wrap: wrap;
  align-items: flex-start;
  min-width: 0;
}

html[lang="en"] :where(
  .ctrl-label,
  .field-label,
  .color-row-label,
  .slider-row-label,
  .dim-row-label,
  .bg-label,
  .size-label,
  .color-label,
  .layout-label,
  .meta-field-label,
  .canvas-label,
  .offset-label,
  .rot-label,
  .hue-label-main,
  .hue-label-sub
) {
  white-space: normal;
  line-height: 1.35;
  min-width: 86px;
}

html[lang="en"] :where(
  .fmt-row,
  .mode-btns,
  .type-btns,
  .style-btns,
  .fit-btns,
  .flip-btns,
  .format-btns,
  .preset-btns,
  .output-size-btns,
  .toggle-btns,
  .rotate-btns,
  .button-grid,
  .option-grid,
  .action-row,
  .action-bar,
  .it-tabs,
  .ogp-tabs,
  .sidebar-tabs
) {
  flex-wrap: wrap;
}

html[lang="en"] :where(
  button,
  .fmt-btn,
  .mode-btn,
  .type-btn,
  .style-btn,
  .fit-btn,
  .flip-btn,
  .rot-btn,
  .aspect-btn,
  .bg-opt-btn,
  .corner-btn,
  .placement-btn,
  .preset-btn,
  .size-btn,
  .output-size-btn,
  .small-btn,
  .copy-btn,
  .copy-tool-btn,
  .copy-json-btn,
  .copy-value-btn,
  .apply-btn,
  .convert-btn,
  .compress-btn,
  .download-btn,
  .download-all-btn,
  .reset-btn,
  .upload-btn,
  .add-more-btn,
  .add-layer-btn,
  .custom-color-add-btn,
  .template-card,
  .sidebar-tab,
  .it-tab-btn,
  .ogp-tab-btn,
  .multi-align-btn,
  .fw-btn,
  .algo-btn,
  .toggle-btn
) {
  white-space: normal;
  line-height: 1.35;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: center;
}

html[lang="en"] :where(.fmt-btn, .mode-btn, .type-btn, .style-btn, .fit-btn, .flip-btn, .rot-btn, .preset-btn, .output-size-btn) {
  padding-left: 10px;
  padding-right: 10px;
}

html[lang="en"] :where(input, select, textarea) {
  max-width: 100%;
  min-width: 0;
}

html[lang="en"] .sidebar .apply-btn,
html[lang="en"] .sidebar .download-btn,
html[lang="en"] .sidebar .reset-btn,
html[lang="en"] .sidebar .convert-btn,
html[lang="en"] .sidebar .compress-btn {
  height: auto;
  min-height: 44px;
  padding-top: 9px;
  padding-bottom: 9px;
  letter-spacing: 0.08em;
}

html[lang="en"] .drop-formats {
  line-height: 1.45;
  overflow-wrap: anywhere;
}

html[lang="en"] .result-item {
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  html[lang="en"] .page-hero h1 {
    font-size: 23px;
  }

  html[lang="en"] :where(
    .ctrl-label,
    .field-label,
    .color-row-label,
    .slider-row-label,
    .dim-row-label,
    .bg-label,
    .size-label,
    .color-label,
    .layout-label,
    .meta-field-label,
    .canvas-label,
    .offset-label,
    .rot-label
  ) {
    min-width: 100%;
  }

  html[lang="en"] :where(.fmt-btn, .mode-btn, .type-btn, .style-btn, .fit-btn, .flip-btn, .rot-btn, .preset-btn) {
    flex: 1 1 auto;
  }
}

/* ============================================================
   Smartphone responsive safety net for all tool pages
   Applies to both Japanese and English pages.
   ============================================================ */
@media (max-width: 700px) {
  body {
    overflow-x: hidden;
  }

  header,
  footer {
    padding-left: 16px;
    padding-right: 16px;
  }

  main,
  .page-hero {
    width: 100%;
    max-width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }

  .page-hero {
    align-items: flex-start;
    gap: 8px 10px;
  }

  .page-hero h1 {
    max-width: 100%;
    font-size: 24px;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  .page-hero .subtitle,
  .subtitle {
    max-width: 100%;
    line-height: 1.55;
    overflow-wrap: anywhere;
  }

  img,
  canvas,
  svg,
  video {
    max-width: 100%;
    height: auto;
  }

  .workspace,
  .panel,
  .canvas-panel,
  .preview-panel,
  .main-column,
  .sidebar,
  .sidebar-section,
  .preview-area,
  .preview-wrapper,
  .compare-area,
  .drop-zone,
  .controls-bar,
  .options-bar,
  .info-strip,
  .saving-strip,
  .result-strip,
  .action-bar,
  .file-list {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .workspace {
    grid-template-columns: 1fr !important;
    align-items: stretch;
  }

  .sidebar {
    order: -1;
  }

  .drop-zone {
    padding: 36px 18px;
    min-height: 180px;
  }

  .drop-title,
  .drop-desc,
  .drop-hint,
  .notice-text,
  .tool-description {
    overflow-wrap: anywhere;
  }

  .controls-bar,
  .options-bar {
    flex-direction: column;
    align-items: stretch;
    overflow: visible;
  }

  .ctrl-section,
  .opt-section {
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 44px;
    padding: 12px 16px;
    border-right: none;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .ctrl-section:last-child,
  .opt-section:last-child {
    border-bottom: none;
  }

  .ctrl-label,
  .opt-label,
  .field-label,
  .color-row-label,
  .slider-row-label,
  .dim-row-label,
  .size-label,
  .layout-label,
  .bg-label {
    white-space: normal;
    line-height: 1.35;
  }

  .mode-btns,
  .type-btns,
  .style-btns,
  .fit-btns,
  .fmt-row,
  .format-btns,
  .preset-btns,
  .output-size-btns,
  .toggle-btns,
  .button-grid,
  .option-grid {
    flex-wrap: wrap;
    min-width: 0;
  }

  button,
  .mode-btn,
  .type-btn,
  .style-btn,
  .fit-btn,
  .fmt-btn,
  .preset-btn,
  .output-size-btn,
  .apply-btn,
  .convert-btn,
  .compress-btn,
  .download-btn,
  .download-all-btn,
  .reset-btn {
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    line-height: 1.35;
    text-align: center;
  }

  .preview-wrapper,
  .compare-area,
  .result-grid,
  .panes,
  .size-grid,
  .template-grid {
    grid-template-columns: 1fr !important;
  }

  .pane-header,
  .panel-header,
  .preview-header,
  .pane-footer,
  .panel-footer,
  .preview-footer {
    flex-wrap: wrap;
    gap: 8px;
  }

  .pane-img-area,
  .preview-img-area,
  .preview-canvas-area,
  .crop-canvas-wrap {
    min-height: 220px;
    padding: 14px;
    overflow: auto;
  }

  .info-strip,
  .saving-strip,
  .result-strip {
    flex-direction: column;
    overflow: visible;
  }

  .info-item,
  .saving-item,
  .result-item,
  .saving-detail-item,
  .result-detail-item {
    width: 100%;
    min-width: 0;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .info-item:last-child,
  .saving-item:last-child,
  .result-item:last-child,
  .saving-detail-item:last-child,
  .result-detail-item:last-child {
    border-bottom: none;
  }

  .saving-big,
  .result-big {
    width: 100%;
  }

  .saving-details,
  .result-details {
    width: 100%;
    flex-direction: column;
  }

  .action-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .action-bar .apply-btn,
  .action-bar .convert-btn,
  .action-bar .compress-btn,
  .action-bar .download-btn,
  .action-bar .download-all-btn,
  .action-bar .reset-btn {
    width: 100%;
    justify-content: center;
  }

  input,
  select,
  textarea {
    max-width: 100%;
    min-width: 0;
  }
}

@media (max-width: 420px) {
  main,
  .page-hero {
    padding-left: 12px;
    padding-right: 12px;
  }

  .page-hero h1 {
    font-size: 22px;
  }

  .drop-zone {
    padding-left: 14px;
    padding-right: 14px;
  }
}


/* ============================================================
   Page title/subtitle vertical alignment fix
   Applies to all tool pages.
   ============================================================ */
@media (min-width: 701px) {
  .page-hero,
  html[lang="en"] .page-hero {
    align-items: center;
  }

  .page-hero .subtitle {
    display: inline-flex;
    align-items: center;
    line-height: 1.45;
    margin-top: 0;
  }
}


/* SEO guide content START */
.tool-guide {
  margin-top: 56px;
  padding: 32px;
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(13, 17, 23, 0.04);
}
.tool-guide-section + .tool-guide-section { margin-top: 28px; }
.tool-guide-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  margin-top: 28px;
}
.tool-guide-grid .tool-guide-section + .tool-guide-section { margin-top: 0; }
.tool-guide-grid + .tool-guide-section { margin-top: 38px; }
.tool-guide h2 {
  margin: 0 0 12px;
  font-size: 18px;
  line-height: 1.45;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.tool-guide p,
.tool-guide li {
  font-size: 14px;
  line-height: 1.9;
  color: var(--ink-mid);
}
.tool-guide ol { padding-left: 1.35em; }
.tool-guide ol li + li { margin-top: 5px; }
.related-tool-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  list-style: none;
  padding: 0;
}
.related-tool-list a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg);
  color: var(--blue);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  text-decoration: none;
  transition: border-color .15s, background .15s, color .15s;
}
.related-tool-list a:hover {
  border-color: var(--blue);
  background: var(--blue-light);
  color: var(--blue-hover);
}
@media (max-width: 700px) {
  .tool-guide { margin-top: 40px; padding: 22px 18px; }
  .tool-guide-grid { grid-template-columns: 1fr; gap: 24px; }
  .related-tool-list { grid-template-columns: 1fr; }
}
/* Global related-tools spacing: keep a consistent gap after learning/FAQ content */
.tool-guide > nav.tool-guide-section {
  margin-top: 28px;
}

/* Illustration below the “What this tool does” introduction. */
.tool-guide-illustration {
  width: 100%;
  margin: 24px 0 0;
}
.tool-guide-illustration img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 12px;
}
@media (max-width: 700px) {
  .tool-guide-illustration { margin-top: 18px; }
  .tool-guide-illustration img { border-radius: 9px; }
}

/* SEO guide content END */


/* ── Header navigation / language switch ── */
.site-header .logo {
  flex-shrink: 0;
}
.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-left: auto;
  min-width: 0;
}
.global-nav {
  display: flex;
  align-items: center;
  gap: 2px;
}
.nav-link {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-mid);
  text-decoration: none;
  padding: 6px 16px;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}
.nav-link:hover {
  background: var(--blue-light);
  color: var(--blue);
}
.language-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, #60A5FA 0%, #2563EB 55%, #1D4ED8 100%);
  color: #FFFFFF;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.22);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.language-button:hover {
  color: #FFFFFF;
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow: 0 7px 16px rgba(37, 99, 235, 0.28);
}
.footer-language-button {
  min-height: 30px;
  padding: 6px 14px;
  font-size: 12px;
}
.menu-toggle {
  display: none;
  width: 42px;
  height: 42px;
  padding: 9px;
  border: 0;
  background: transparent;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  flex-shrink: 0;
}
.menu-toggle-line {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.menu-toggle.is-open .menu-toggle-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.menu-toggle.is-open .menu-toggle-line:nth-child(2) {
  opacity: 0;
}
.menu-toggle.is-open .menu-toggle-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 800px) {
  .site-header {
    position: sticky;
    padding-left: 20px;
    padding-right: 12px;
  }
  .site-header .logo-en {
    display: none;
  }
  .menu-toggle {
    display: inline-flex;
    margin-left: auto;
  }
  .header-actions {
    display: none;
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    right: 0;
    width: 100%;
    margin: 0;
    padding: 14px 20px 18px;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    background: rgba(255, 255, 255, 0.99);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 12px 24px rgba(13, 17, 23, 0.10);
    z-index: 110;
  }
  .header-actions.is-open {
    display: flex;
  }
  .global-nav {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    overflow: visible;
  }
  .nav-link,
  .back-link {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    font-size: 13px;
    text-align: left;
    border-radius: 6px;
  }
  .header-language-button {
    width: 100%;
    min-height: 42px;
    margin-top: 2px;
    border-radius: 8px;
    font-size: 13px;
  }
}


/* Search intent learning content START */
.search-intent-content {
  margin-top: 38px;
  padding-top: 4px;
}
.search-intent-content .search-intent-lead {
  margin-bottom: 24px;
  padding: 18px 20px;
  border-left: 4px solid var(--blue);
  border-radius: 8px;
  background: var(--blue-light);
}
.search-intent-content .search-intent-lead p { margin: 0; }
.search-intent-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.search-intent-card,
.search-faq-item {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
}
.search-intent-card h3,
.search-faq-item h3 {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
}
.search-intent-card p,
.search-faq-item p { margin: 0; }
.search-faq-list { display: grid; gap: 12px; margin-top: 14px; }
.search-intent-points { padding-left: 1.25em; margin-bottom: 0; }
.search-intent-points li + li { margin-top: 6px; }
@media (max-width: 700px) {
  .search-intent-grid { grid-template-columns: 1fr; }
  .search-intent-content { margin-top: 30px; }
  .search-intent-content .search-intent-lead { padding: 16px; }
}
/* Search intent learning content END */


/* ── PDF FAQ style: match Japanese image-compress FAQ ── */
.pdf-faq .pdf-faq-item {
  padding: 18px 0;
  border-top: 1px solid var(--border);
}
.pdf-faq .pdf-faq-item:last-child {
  border-bottom: 1px solid var(--border);
}
.pdf-faq .pdf-faq-item h3 {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
}
.pdf-faq .pdf-faq-item p {
  margin: 0;
}
/* PDF deep-content wrapper ends before related tools, so match the 28px
   spacing used by image-compress between consecutive tool-guide sections. */
.search-intent-content[data-search-content="pdf-deep-v2"] + nav.tool-guide-section {
  margin-top: 28px;
}

/* PDF deep learning content v4 */
.pdf-deep-content { margin-top: 38px; }
.pdf-deep-lead {
  margin-bottom: 28px;
  padding: 20px 22px;
  border-left: 4px solid var(--blue);
  border-radius: 8px;
  background: var(--blue-light);
}
.pdf-deep-lead p { margin: 0; }
.pdf-deep-section { margin-top: 34px; }
.pdf-deep-section:first-of-type { margin-top: 0; }
.pdf-deep-section > h2 { margin-bottom: 14px; }
.pdf-deep-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.pdf-deep-card {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
}
.pdf-deep-card h3 { margin: 0 0 8px; font-size: 15px; line-height: 1.55; color: var(--ink); }
.pdf-deep-card p { margin: 0; }
.pdf-deep-steps {
  margin: 16px 0 0;
  padding-left: 0;
  list-style: none;
  counter-reset: pdfstep;
}
.pdf-deep-steps li {
  position: relative;
  margin-top: 12px;
  padding: 15px 16px 15px 52px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  counter-increment: pdfstep;
}
.pdf-deep-steps li::before {
  content: counter(pdfstep);
  position: absolute;
  left: 16px;
  top: 14px;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.pdf-deep-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.pdf-deep-compare > div {
  padding: 18px;
  border-radius: 10px;
  background: var(--blue-light);
}
.pdf-deep-compare h3 { margin: 0 0 8px; font-size: 15px; }
.pdf-deep-compare p { margin: 0; }
.pdf-deep-note {
  margin-top: 16px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--blue);
  border-radius: 8px;
  background: var(--bg);
}
.pdf-deep-note p { margin: 0; }
.pdf-deep-checklist { margin: 14px 0 0; padding-left: 1.2em; }
.pdf-deep-checklist li + li { margin-top: 8px; }
.pdf-deep-faq .pdf-faq-item { padding: 18px 0; border-top: 1px solid var(--border); }
.pdf-deep-faq .pdf-faq-item:last-child { border-bottom: 1px solid var(--border); }
.pdf-deep-faq .pdf-faq-item h3 { margin: 0 0 8px; font-size: 15px; line-height: 1.5; color: var(--ink); }
.pdf-deep-faq .pdf-faq-item p { margin: 0; }
@media (max-width: 700px) {
  .pdf-deep-content { margin-top: 30px; }
  .pdf-deep-lead { padding: 16px; }
  .pdf-deep-card-grid, .pdf-deep-compare { grid-template-columns: 1fr; }
  .pdf-deep-section { margin-top: 30px; }
}
/* PDF deep learning content v4 END */


/* Robust spacing before related tools after expanded learning content */
.search-intent-content + nav.tool-guide-section,
.pdf-deep-content + nav.tool-guide-section,
[data-search-content] + nav.tool-guide-section {
  margin-top: 36px !important;
}

/* PDF related-tools spacing: related tools are now a true sibling of the deep content */
.pdf-deep-content + nav.tool-guide-section {
  margin-top: 32px !important;
}
/* PDF related-tools spacing END */


/* Inline cross-tool links in learning content */
.inline-tool-link {
  color: var(--blue);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.inline-tool-link:hover {
  color: var(--blue-hover);
}

/* Image compression-style FAQ: used by bulk compress / bulk resize */
.compression-style-faq .search-faq-list {
  display: block;
  margin-top: 0;
}
.compression-style-faq .search-faq-item {
  padding: 18px 0;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
}
.compression-style-faq .search-faq-item:last-child {
  border-bottom: 1px solid var(--border);
}
.compression-style-faq .search-faq-item h3 {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
}
.compression-style-faq .search-faq-item p {
  margin: 0;
}


/* ── Image format learning content (image-compress design) ── */
.image-format-learn { scroll-margin-top: 90px; }
.image-format-learn h3 { margin: 0 0 8px; font-size: 15px; line-height: 1.5; color: var(--ink); }
.image-format-learn a { color: var(--blue); font-weight: 500; text-underline-offset: 3px; }
.image-format-grid, .image-format-use-grid { display: grid; gap: 14px; margin-top: 16px; }
.image-format-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.image-format-use-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.image-format-card, .image-format-use-card { padding: 18px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); }
.image-format-card p, .image-format-use-card p { margin: 0; }
.image-format-tip { margin-top: 14px; padding: 14px 16px; border-left: 3px solid var(--blue); background: var(--blue-light); color: var(--ink-mid); font-size: 13px; line-height: 1.8; }
.image-format-steps, .image-format-check-list { margin: 12px 0 0; padding-left: 1.35em; }
.image-format-steps li + li, .image-format-check-list li + li { margin-top: 10px; }
.image-format-faq-item { padding: 18px 0; border-top: 1px solid var(--border); }
.image-format-faq-item:last-child { border-bottom: 1px solid var(--border); }
.image-format-faq-item p { margin: 0; }
@media (max-width: 800px) { .image-format-grid, .image-format-use-grid { grid-template-columns: 1fr; } }


/* Image processing deep content: match image-compress design */
.proc-learn { scroll-margin-top: 90px; }
.proc-learn h3 { margin: 0 0 8px; font-size: 15px; line-height: 1.5; color: var(--ink); }
.proc-learn a { color: var(--blue); font-weight: 500; text-underline-offset: 3px; }
.proc-grid { display: grid; gap: 14px; margin-top: 16px; }
.proc-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.proc-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.proc-card { padding: 18px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); }
.proc-card p { margin: 0; }
.proc-tip { margin-top: 14px; padding: 14px 16px; border-left: 3px solid var(--blue); background: var(--blue-light); color: var(--ink-mid); font-size: 13px; line-height: 1.8; }
.proc-steps, .proc-check-list { margin: 12px 0 0; padding-left: 1.35em; }
.proc-steps li + li, .proc-check-list li + li { margin-top: 10px; }
.proc-faq-item { padding: 18px 0; border-top: 1px solid var(--border); }
.proc-faq-item:last-child { border-bottom: 1px solid var(--border); }
.proc-faq-item p { margin: 0; }
@media (max-width: 800px) { .proc-grid.cols-3, .proc-grid.cols-2 { grid-template-columns: 1fr; } }
/* Image processing deep content END */



/* ── Shared learning content: image-compress design ── */
.compression-learn {
  scroll-margin-top: 90px;
}
.compression-learn h3 {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
}
.compression-learn a {
  color: var(--blue);
  font-weight: 500;
  text-underline-offset: 3px;
}
.compression-format-grid,
.compression-use-grid {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}
.compression-format-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.compression-use-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.compression-format-card,
.compression-use-card {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
}
.compression-format-card p,
.compression-use-card p {
  margin: 0;
}
.compression-tip {
  margin-top: 14px;
  padding: 14px 16px;
  border-left: 3px solid var(--blue);
  background: var(--blue-light);
  color: var(--ink-mid);
  font-size: 13px;
  line-height: 1.8;
}
.compression-steps,
.compression-check-list {
  margin: 12px 0 0;
  padding-left: 1.35em;
}
.compression-steps li + li,
.compression-check-list li + li {
  margin-top: 10px;
}
.compression-faq-item {
  padding: 18px 0;
  border-top: 1px solid var(--border);
}
.compression-faq-item:last-child {
  border-bottom: 1px solid var(--border);
}
.compression-faq-item p {
  margin: 0;
}
@media (max-width: 800px) {
  .compression-format-grid,
  .compression-use-grid {
    grid-template-columns: 1fr;
  }
}


/* Image resize: spacing between use-case block and deep content */
.resize-usecase-section {
  margin-bottom: 32px;
}
@media (max-width: 800px) {
  .resize-usecase-section {
    margin-bottom: 28px;
  }
}


/* HTMLタグ除去：設定チェックを縦並び */
.strip-options{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:12px;
}
.strip-options .small-switch{
  display:flex;
  align-items:center;
  width:100%;
  margin:0;
}


.strip-options .small-switch input[type="checkbox"]{
  margin-right:6px;
}


/* Rich guide rhythm: cards + blue note, aligned with image-compression content */
.visual-rich-content .visual-section-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:28px;
  margin-bottom:28px;
}
.visual-rich-content .visual-section-grid > .tool-guide-section{
  margin-top:0;
  padding:18px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--bg);
}
.visual-rich-content .visual-section-grid > .tool-guide-section h2{
  margin:0 0 8px;
  font-size:15px;
  line-height:1.5;
  color:var(--ink);
}
.visual-rich-content .visual-section-grid > .tool-guide-section h3{
  margin:0 0 8px;
  font-size:15px;
  line-height:1.5;
  color:var(--ink);
}
.visual-rich-content .visual-section-grid > .tool-guide-section p,
.visual-rich-content .visual-section-grid > .tool-guide-section li{
  font-size:14px;
  line-height:1.9;
  color:var(--ink-mid);
}
.visual-rich-content .visual-section-grid > .tool-guide-section p:last-child{
  margin-bottom:0;
}
.visual-rich-content .visual-note-host .compression-tip{
  margin-top:0;
}
@media (max-width:800px){
  .visual-rich-content .visual-section-grid{
    grid-template-columns:1fr;
    gap:12px;
    margin-top:24px;
    margin-bottom:24px;
  }
  .visual-rich-content .visual-section-grid > .tool-guide-section{
    padding:16px;
  }
}


/* Semantic card grouping: three parallel choices */
.visual-rich-content .visual-section-grid.visual-section-grid-3{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
@media (max-width:800px){
  .visual-rich-content .visual-section-grid.visual-section-grid-3{
    grid-template-columns:1fr;
  }
}