/* Shared palette for all HanCutTool screens. Artwork and user-chosen colors are untouched. */
html[data-theme="light"] {
  color-scheme: light;
  --hct-bg: #f6f8fc;
  --hct-surface: #ffffff;
  --hct-surface-alt: #f0f4fb;
  --hct-text: #172033;
  --hct-muted: #65748a;
  --hct-border: #dfe5ee;
  --hct-accent: #2563eb;
  --hct-accent-hover: #1d4ed8;
  --hct-accent-soft: #eaf1ff;
  --hct-on-accent: #ffffff;
}
html[data-theme="dark"] {
  color-scheme: dark;
  --hct-bg: #0b1018;
  --hct-surface: #151b27;
  --hct-surface-alt: #1b2433;
  --hct-text: #f2f6fc;
  --hct-muted: #a9b4c5;
  --hct-border: #303a49;
  --hct-accent: #8ab7ff;
  --hct-accent-hover: #afd0ff;
  --hct-accent-soft: #17315f;
  --hct-on-accent: #0b1424;
}
html[data-theme] { background-color: var(--hct-bg); }
html[data-theme] :focus-visible { outline-color: var(--hct-accent); }

/* One compact, accessible theme control, mounted into each page's existing toolbar. */
.hct-theme-toggle {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid var(--hct-border);
  border-radius: 10px;
  background: var(--hct-surface);
  color: var(--hct-text);
  font: 600 12px/1.35 system-ui, "Noto Sans KR", sans-serif;
  white-space: nowrap;
  cursor: pointer;
}
.hct-theme-toggle:hover { border-color: var(--hct-accent); background: var(--hct-accent-soft); }
.hct-theme-toggle:focus-visible { outline: 2px solid var(--hct-accent); outline-offset: 3px; }
.hct-theme-toggle .hct-theme-icon { display: inline-flex; align-items: center; justify-content: center; width: 17px; font-size: 18px; line-height: 1; color: var(--hct-accent); }
.hct-header-actions { flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-left: auto; }
.hct-language-toggle { z-index: 2; display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 36px; padding: 6px 10px; border: 1px solid var(--hct-border); border-radius: 10px; background: var(--hct-surface); color: var(--hct-text); text-decoration: none; font: 600 12px/1.35 system-ui, 'Noto Sans KR', sans-serif; white-space: nowrap; }
.hct-language-toggle:hover { border-color: var(--hct-accent); color: var(--hct-accent); background: var(--hct-accent-soft); }
.hct-language-toggle:focus-visible { outline: 2px solid var(--hct-accent); outline-offset: 3px; }
html[data-hct-layout="editor"] .hc-stage-top .hct-header-actions .hct-language-toggle,
html[data-hct-layout="editor"] .hc-stage-top .hct-header-actions .hct-theme-toggle { min-height: 30px; }
html[data-hct-layout="home"] .hc-home-header > .hct-theme-toggle { margin-left: 0; }
html[data-hct-layout="editor"] .hc-stage-top > .hct-theme-toggle { margin-left: 0; min-height: 30px; }
html[data-hct-layout="legal"] .header-inner > .hct-theme-toggle { margin-left: 0; }

/* Global suite toolbar shared by PDF, QR, audio, GIF and files. */
html[data-theme] .hct-suite-nav {
  background: var(--hct-surface);
  border-color: var(--hct-border);
  color: var(--hct-text);
  gap: 12px;
}
html[data-theme] .hct-suite-nav .hct-suite-brand { color: var(--hct-accent); }
html[data-theme] .hct-suite-links { min-width: 0; overflow-x: auto; }
html[data-theme] .hct-suite-links a { color: var(--hct-muted); }
html[data-theme] .hct-suite-links a:hover,
html[data-theme] .hct-suite-links a[aria-current="page"] {
  background: var(--hct-accent-soft);
  color: var(--hct-accent);
}

/* Four task-oriented tools previously had separate pink/green/orange/blue palettes. */
html[data-hct-layout="tools"] {
  color: var(--hct-text);
  background: var(--hct-bg);
}
html[data-hct-layout="tools"] body {
  --accent: var(--hct-accent) !important;
  --soft: var(--hct-accent-soft) !important;
  --ink: var(--hct-text) !important;
  color: var(--hct-text);
  background: radial-gradient(circle at 82% 3%, var(--hct-accent-soft), transparent 36%), var(--hct-bg);
}
html[data-hct-layout="tools"] .menu,
html[data-hct-layout="tools"] .lead,
html[data-hct-layout="tools"] .subtle,
html[data-hct-layout="tools"] .status,
html[data-hct-layout="tools"] .tool-links,
html[data-hct-layout="tools"] .preview small,
html[data-hct-layout="tools"] .drop span,
html[data-hct-layout="tools"] .help-grid p,
html[data-hct-layout="tools"] .extra-faq details p { color: var(--hct-muted); }
html[data-hct-layout="tools"] .menu a:hover,
html[data-hct-layout="tools"] .tool-links a:hover { color: var(--hct-accent); }
html[data-hct-layout="tools"] .smallpill,
html[data-hct-layout="tools"] .workspace,
html[data-hct-layout="tools"] .help-grid article,
html[data-hct-layout="tools"] .extra-faq details,
html[data-hct-layout="tools"] .tab,
html[data-hct-layout="tools"] .btn,
html[data-hct-layout="tools"] .filelist {
  background: var(--hct-surface);
  color: var(--hct-text);
  border-color: var(--hct-border);
}
html[data-hct-layout="tools"] .smallpill { color: var(--hct-muted); }
html[data-hct-layout="tools"] .hero-icon {
  background: linear-gradient(145deg, var(--hct-surface), var(--hct-accent-soft));
  border-color: var(--hct-border);
}
html[data-hct-layout="tools"] .workspace-head,
html[data-hct-layout="tools"] .tool-links { border-color: var(--hct-border); }
html[data-hct-layout="tools"] .field label,
html[data-hct-layout="tools"] .field .fieldname { color: var(--hct-text); }
html[data-hct-layout="tools"] .field input:not([type=color]):not([type=range]):not([type=file]),
html[data-hct-layout="tools"] .field textarea,
html[data-hct-layout="tools"] .field select,
html[data-hct-layout="tools"] .field input[type=color] {
  background: var(--hct-surface);
  color: var(--hct-text);
  border-color: var(--hct-border);
}
html[data-hct-layout="tools"] .field input::placeholder,
html[data-hct-layout="tools"] .field textarea::placeholder { color: var(--hct-muted); }
html[data-hct-layout="tools"] .preview,
html[data-hct-layout="tools"] .drop,
html[data-hct-layout="tools"] .result,
html[data-hct-layout="tools"] .tabbar {
  background: var(--hct-surface-alt);
  color: var(--hct-text);
  border-color: var(--hct-border);
}
html[data-hct-layout="tools"] .drop:hover,
html[data-hct-layout="tools"] .drop.drag { background: var(--hct-accent-soft); border-color: var(--hct-accent); }
html[data-hct-layout="tools"] .tab.active,
html[data-hct-layout="tools"] .btn.primary {
  background: var(--hct-accent);
  border-color: var(--hct-accent);
  color: var(--hct-on-accent);
}
html[data-hct-layout="tools"] .btn:disabled { opacity: .5; }
html[data-hct-layout="tools"] .extra-faq summary { color: var(--hct-text); }
html[data-hct-layout="tools"] .extra-faq summary::after { color: var(--hct-accent); }
html[data-hct-layout="tools"] .filelist div { border-color: var(--hct-border); color: var(--hct-muted); }
html[data-hct-layout="tools"] .filelist b[style] { color: var(--hct-accent) !important; }
html[data-hct-layout="tools"] .result[style],
html[data-hct-layout="tools"] #controls div:has(> #wave) {
  background: var(--hct-surface-alt) !important;
  color: var(--hct-text) !important;
  border-color: var(--hct-border) !important;
}
html[data-hct-layout="tools"] #controls div[style] > b[style] { color: var(--hct-text) !important; }
html[data-hct-layout="tools"] input[type=range] { accent-color: var(--hct-accent); }
html[data-hct-layout="tools"][data-theme="light"] .status.error { color: #b42346; }
html[data-hct-layout="tools"][data-theme="dark"] .status.error { color: #ff9aa8; }

/* PDF conversion shares the same accent and surfaces while keeping its layout. */
html[data-hct-layout="pdf"] {
  --green: var(--hct-accent);
  --green-dark: var(--hct-accent-hover);
  --ink: var(--hct-text);
  --muted: var(--hct-muted);
  --border: var(--hct-border);
  --paper: var(--hct-bg);
  --soft: var(--hct-accent-soft);
}
html[data-hct-layout="pdf"] body { color: var(--hct-text); background: var(--hct-bg); }
html[data-hct-layout="pdf"] .workspace,
html[data-hct-layout="pdf"] .tab.active,
html[data-hct-layout="pdf"] .result-card,
html[data-hct-layout="pdf"] .image-card,
html[data-hct-layout="pdf"] .image-number,
html[data-hct-layout="pdf"] dialog {
  background: var(--hct-surface);
  color: var(--hct-text);
  border-color: var(--hct-border);
}
html[data-hct-layout="pdf"] .tabs,
html[data-hct-layout="pdf"] .dropzone,
html[data-hct-layout="pdf"] .preview-card,
html[data-hct-layout="pdf"] .image-thumb,
html[data-hct-layout="pdf"] .results,
html[data-hct-layout="pdf"] .status,
html[data-hct-layout="pdf"] .feature-icon {
  background: var(--hct-surface-alt);
  color: var(--hct-text);
  border-color: var(--hct-border);
}
html[data-hct-layout="pdf"] .dropzone:hover,
html[data-hct-layout="pdf"] .dropzone.dragging { background: var(--hct-accent-soft); border-color: var(--hct-accent); }
html[data-hct-layout="pdf"] .tab { color: var(--hct-muted); }
html[data-hct-layout="pdf"] .tab.active { color: var(--hct-accent); }
html[data-hct-layout="pdf"] .dropzone .upload-art svg { fill: var(--hct-surface); stroke: var(--hct-accent); }
html[data-hct-layout="pdf"] .upload-art b,
html[data-hct-layout="pdf"] .pdf-result .pdf-badge { background: var(--hct-accent-soft); color: var(--hct-accent); border-color: var(--hct-border); }
html[data-hct-layout="pdf"] .primary { color: var(--hct-on-accent); }
html[data-hct-layout="pdf"] .primary:hover:not(:disabled) { color: var(--hct-on-accent); }
html[data-hct-layout="pdf"] select,
html[data-hct-layout="pdf"] input[type=text],
html[data-hct-layout="pdf"] input[type=password] {
  background: var(--hct-surface);
  color: var(--hct-text);
  border-color: var(--hct-border);
}
html[data-hct-layout="pdf"] .result-card img { background: var(--hct-surface-alt); }
html[data-hct-layout="pdf"] .benefits p,
html[data-hct-layout="pdf"] footer p,
html[data-hct-layout="pdf"] .step-chip,
html[data-hct-layout="pdf"] .hint { color: var(--hct-muted); }
html[data-hct-layout="pdf"] .faq summary::after { color: var(--hct-accent); }
html[data-hct-layout="pdf"][data-theme="light"] .error { background: #fff0ef; color: #9b343e; }
html[data-hct-layout="pdf"][data-theme="dark"] .error { background: #44252e; color: #ffb8c2; }

@media (max-width: 1000px) {
  html[data-theme] .hct-suite-nav { flex-wrap: wrap; gap: 3px 12px; padding: 9px 16px 6px; }
  html[data-theme] .hct-suite-links { order: 3; flex: 1 0 100%; margin-left: 0; }
  .hct-theme-toggle .hct-theme-text { display: none; }
  .hct-theme-toggle { padding: 6px 9px; }
}
@media (max-width: 950px) {
  .hc-home-header .hc-home-nav > a:not(.hc-suite-trigger) { display: none; }
}
@media (max-width: 520px) {
  .hc-home-header .hc-home-menu { display: none; }
  .hc-home-header .hct-header-actions { gap: 4px; }
  .hc-home-header .hct-language-toggle { padding: 6px 8px; }
  .hc-home-header .hct-language-toggle span:first-child { display: none; }
  .header-inner .back { display: none; }
}
@media (max-width: 760px) {
  /* Keep the logo, primary links and theme control on one line on phones. */
  html[data-hct-layout="home"] .hc-home-header { gap: 9px; flex-wrap: nowrap; }
  html[data-hct-layout="home"] .hc-home-logo,
  html[data-hct-layout="home"] .hc-home-nav,
  html[data-hct-layout="home"] .hc-home-menu > button,
  html[data-hct-layout="home"] .hc-suite-trigger { white-space: nowrap; flex-shrink: 0; }
  html[data-hct-layout="home"] .hc-home-nav { gap: 10px; min-width: 0; }
  html[data-hct-layout="home"] .hc-home-header > .hct-theme-toggle { margin-left: auto; width: 36px; min-width: 36px; min-height: 36px; padding: 6px; }
  html[data-hct-layout="home"] .hct-theme-toggle .hct-theme-text { display: none; }
  html[data-hct-layout="editor"] .hc-stage-top > .hct-theme-toggle { min-height: 30px; padding: 4px 8px; }
  html[data-hct-layout="legal"] .header-inner { gap: 10px; flex-wrap: wrap; }
  html[data-hct-layout="legal"] .header-inner > .hct-theme-toggle { margin-left: auto; }
}
@media (max-width: 430px) {
  html[data-hct-layout="editor"] .hct-theme-toggle .hct-theme-text { display: none; }
  html[data-hct-layout="editor"] .hct-theme-toggle { min-width: 34px; }
}