/* SILVERLOGS 공용 컴포넌트 스타일 (모달, 리셋 등) — 모든 도구 페이지가 공유 */
      :root {
        --bg-main: #0f172a;
        --bg-card: #1e293b;
        --bg-sub: #020617;
        --border-color: #334155;
        --border-focus: #38bdf8;
        --text-main: #f8fafc;
        --text-sub: #94a3b8;
        --primary: #6366f1;
        --primary-hover: #4f46e5;
        --accent: #38bdf8;
        --accent-bg: rgba(56, 189, 248, 0.12);
      }
      [data-theme="light"] {
        --bg-main: #f1f5f9;
        --bg-card: #ffffff;
        --bg-sub: #f8fafc;
        --border-color: #cbd5e1;
        --border-focus: #0284c7;
        --text-main: #0f172a;
        --text-sub: #475569;
        --primary: #6366f1;
        --primary-hover: #4f46e5;
        --accent: #0284c7;
        --accent-bg: rgba(2, 132, 199, 0.12);
      }
      /* ─────────────────────────────────────────────────────────────────
       🔌 범용 호환 레이어 (Universal Theme Compatibility Layer)
       color-picker.html / icon-generator.html / code-inspector.html 세 파일이
       각자 조금씩 다른 변수명으로 같은 개념(카드 배경·보더·흐린 텍스트 등)을 표현하고 있어서,
       여기서는 그 변수명들을 전부 별칭(alias)으로 걸어두고 클래스도 전부 정의해둡니다.
       → "어떠한 경우라도" 어느 도구에서 드래그해 온 박스든 이 스캐폴드 안에서 그대로 스타일이 유지됩니다.
       ───────────────────────────────────────────────────────────────── */
      :root {
        --card-bg: var(--bg-card);
        --card-border: var(--border-color);
        --inner-bg: var(--bg-sub);
        --input-bg: var(--bg-card);
        --input-border: var(--border-color);
        --text-muted: var(--text-sub);
        --body-bg: var(--bg-main);
      }
      .theme-card {
        background-color: var(--card-bg) !important;
        border-color: var(--card-border) !important;
      }
      .theme-inner {
        background-color: var(--inner-bg) !important;
        border-color: var(--card-border) !important;
      }
      .theme-input {
        background-color: var(--input-bg) !important;
        border-color: var(--input-border) !important;
        color: var(--text-main) !important;
      }
      .text-muted-custom {
        color: var(--text-muted) !important;
      }
      .text-sub-custom {
        color: var(--text-sub) !important;
      }
      .preset-chip {
        padding: 4px 10px;
        border-radius: 8px;
        font-size: 11px;
        font-weight: 600;
        cursor: pointer;
        border: 1px solid rgba(255, 255, 255, 0.1);
        transition: all 0.2s ease;
      }
      .preset-chip:hover {
        transform: translateY(-1px);
        border-color: #818cf8;
      }
      .icon-btn.active-icon {
        background-color: #4f46e5 !important;
        color: #fff !important;
      }
      .custom-scroll::-webkit-scrollbar {
        width: 6px;
        height: 6px;
      }
      .custom-scroll::-webkit-scrollbar-track {
        background: var(--inner-bg);
      }
      .custom-scroll::-webkit-scrollbar-thumb {
        background: var(--input-border);
        border-radius: 4px;
      }
      input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #818cf8;
        border: 2px solid #0f172a;
        cursor: pointer;
      }
      .canvas-wrapper {
        background-image:
          linear-gradient(45deg, #334155 25%, transparent 25%),
          linear-gradient(-45deg, #334155 25%, transparent 25%),
          linear-gradient(45deg, transparent 75%, #334155 75%),
          linear-gradient(-45deg, transparent 75%, #334155 75%);
        background-size: 20px 20px;
        background-position:
          0 0,
          0 10px,
          10px -10px,
          -10px 0px;
      }
      * {
        box-sizing: border-box;
      }
      body {
        margin: 0;
        padding: 0;
        background-color: var(--bg-main);
        color: var(--text-main);
        font-family:
          "Pretendard",
          system-ui,
          -apple-system,
          sans-serif;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        transition:
          background-color 0.25s,
          color 0.25s;
      }
      .app-container {
        max-width: 1200px;
        width: 100%;
        margin: 0 auto;
        padding: 24px;
        flex: 1;
        display: flex;
        flex-direction: column;
      }
      .glass-card {
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: 14px;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
      }
      .app-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 12px;
        padding: 0.9rem 1.4rem;
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: 12px;
        margin-bottom: 16px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
        position: relative;
      }
      .header-left,
      .header-right {
        display: flex;
        align-items: center;
        gap: 0.8rem;
      }
      .brand-link {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        text-decoration: none;
        color: var(--text-main);
        font-weight: 800;
        font-size: 1.1rem;
        letter-spacing: 0.05em;
      }
      .brand-logo-icon {
        color: var(--primary);
      }
      .header-divider {
        color: var(--border-color);
        font-weight: 300;
      }
      /* ↓↓↓ "타이틀(2번)"에 해당하는 부분 — 이 h1 / span 텍스트만 바꾸면 헤더 문구가 바뀝니다 */
      .tool-title {
        font-size: 1.05rem;
        font-weight: 700;
        color: var(--accent);
        margin: 0;
      }
      .tool-sub {
        font-size: 0.8rem;
        color: var(--text-sub);
      }
      .icon-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.5rem;
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        color: var(--text-main);
        cursor: pointer;
      }
      .icon-btn:hover {
        background: var(--border-color);
        color: var(--accent);
      }
      /* 🩹 color-picker.html / 이 도구 자신의 헤더와 동일한 "메가 메뉴"로 확장 */
      .tools-modal {
        display: none;
        position: absolute;
        top: 65px;
        right: 0;
        width: min(680px, 92vw);
        max-height: 76vh;
        overflow-y: auto;
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: 16px;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
        z-index: 100;
        padding: 18px 20px 22px;
      }
      .tools-modal.active {
        display: block;
      }
      .tools-mega-head {
        font-size: 0.62rem;
        font-weight: 800;
        letter-spacing: 0.2em;
        color: var(--accent);
        text-transform: uppercase;
        margin-bottom: 2px;
      }
      .tools-mega-title {
        font-size: 1.05rem;
        font-weight: 800;
        color: var(--text-main);
        margin: 0 0 14px;
      }
      .tools-menu-group + .tools-menu-group {
        margin-top: 16px;
      }
      .tools-menu-group-title {
        display: flex;
        align-items: center;
        gap: 7px;
        margin-bottom: 8px;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--text-sub);
      }
      .tools-menu-group-title .dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--accent);
        flex-shrink: 0;
      }
      .tools-menu-group-title[data-cat="dev"] .dot {
        background: #818cf8;
      }
      .tools-menu-group-title[data-cat="design"] .dot {
        background: #f59e0b;
      }
      .tools-menu-group-title[data-cat="text"] .dot {
        background: #38bdf8;
      }
      .tools-menu-group-title[data-cat="media"] .dot {
        background: #ec4899;
      }
      .tools-menu-group-title[data-cat="productivity"] .dot {
        background: #10b981;
      }
      .tools-menu-group-title[data-cat="moto"] .dot {
        background: #84cc16;
      }
      /* 하위 호환: tools.json에 아직 util로 남은 항목용 */
      .tools-menu-group-title[data-cat="util"] .dot {
        background: #fb7185;
      }
      .tools-menu-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
      }
      @media (max-width: 560px) {
        .tools-menu-grid {
          grid-template-columns: 1fr;
        }
      }
      .tools-menu-item {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 10px;
        border-radius: 12px;
        color: var(--text-main);
        text-decoration: none;
        border: 1px solid transparent;
        transition:
          background 0.15s ease,
          border-color 0.15s ease,
          transform 0.15s ease;
      }
      .tools-menu-item:hover {
        background: var(--accent-bg);
        border-color: var(--border-color);
        transform: translateY(-1px);
      }
      .tools-menu-item.is-current {
        background: var(--accent-bg);
        border-color: var(--accent);
      }
      .tools-menu-item-icon {
        flex-shrink: 0;
        width: 32px;
        height: 32px;
        border-radius: 9px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 15px;
        background: var(--accent-bg);
        border: 1px solid var(--border-color);
      }
      .tools-menu-grid[data-cat="dev"] .tools-menu-item-icon {
        background: rgba(129, 140, 248, 0.14);
        border-color: rgba(129, 140, 248, 0.3);
      }
      .tools-menu-grid[data-cat="design"] .tools-menu-item-icon {
        background: rgba(245, 158, 11, 0.14);
        border-color: rgba(245, 158, 11, 0.3);
      }
      .tools-menu-grid[data-cat="text"] .tools-menu-item-icon {
        background: rgba(56, 189, 248, 0.14);
        border-color: rgba(56, 189, 248, 0.3);
      }
      .tools-menu-grid[data-cat="media"] .tools-menu-item-icon {
        background: rgba(236, 72, 153, 0.14);
        border-color: rgba(236, 72, 153, 0.3);
      }
      .tools-menu-grid[data-cat="productivity"] .tools-menu-item-icon {
        background: rgba(16, 185, 129, 0.14);
        border-color: rgba(16, 185, 129, 0.3);
      }
      .tools-menu-grid[data-cat="moto"] .tools-menu-item-icon {
        background: rgba(132, 204, 22, 0.14);
        border-color: rgba(132, 204, 22, 0.3);
      }
      /* 하위 호환: tools.json에 아직 util로 남은 항목용 */
      .tools-menu-grid[data-cat="util"] .tools-menu-item-icon {
        background: rgba(251, 113, 133, 0.14);
        border-color: rgba(251, 113, 133, 0.3);
      }
      .tools-menu-item-body {
        min-width: 0;
        flex: 1;
      }
      .tools-menu-item-name {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 0.82rem;
        font-weight: 700;
      }
      .tools-menu-item-name span:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .tool-item-desc {
        display: block;
        margin-top: 1px;
        font-size: 0.68rem;
        font-weight: 500;
        color: var(--text-sub);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .tools-menu-more {
        display: inline-block;
        margin-top: 6px;
        font-size: 0.68rem;
        font-weight: 700;
        color: var(--accent);
        text-decoration: none;
      }
      .tools-menu-more:hover {
        text-decoration: underline;
      }
      .tools-menu-footer {
        margin-top: 16px;
        padding-top: 12px;
        border-top: 1px solid var(--border-color);
        text-align: center;
      }
      .tools-menu-footer a {
        font-size: 0.72rem;
        font-weight: 700;
        color: var(--accent);
        text-decoration: none;
      }
      .tools-menu-footer a:hover {
        text-decoration: underline;
      }
      .badge-new {
        font-size: 0.58rem;
        font-weight: 800;
        color: #fff;
        background: #10b981;
        padding: 1px 6px;
        border-radius: 999px;
        letter-spacing: 0.03em;
        flex-shrink: 0;
      }
      .badge-hot {
        font-size: 0.58rem;
        font-weight: 800;
        color: #fff;
        background: #ff6a3d;
        padding: 1px 6px;
        border-radius: 999px;
        letter-spacing: 0.03em;
        flex-shrink: 0;
      }
      .main-drop-zone {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 260px;
        padding: 32px;
        text-align: center;
        border: 2px dashed var(--border-color);
        border-radius: 14px;
        color: var(--text-sub);
        background: var(--bg-card);
      }
      .main-drop-zone i {
        font-size: 1.6rem;
        color: var(--accent);
      }
      .app-footer {
        margin-top: 28px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 20px;
        border-top: 1px solid var(--border-color);
        font-size: 0.82rem;
        color: var(--text-sub);
        flex-wrap: wrap;
        gap: 12px;
      }
      .footer-links {
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
      }
      .footer-links a {
        color: var(--text-sub);
        text-decoration: none;
      }
      .footer-links a:hover {
        color: var(--accent);
      }
      @media (max-width: 900px) {
        .tool-title,
        .tool-sub {
          display: none;
        }
        .app-footer {
          flex-direction: column;
          text-align: center;
        }
      }
      *,
      ::before,
      ::after {
        --tw-border-spacing-x: 0;
        --tw-border-spacing-y: 0;
        --tw-translate-x: 0;
        --tw-translate-y: 0;
        --tw-rotate: 0;
        --tw-skew-x: 0;
        --tw-skew-y: 0;
        --tw-scale-x: 1;
        --tw-scale-y: 1;
        --tw-pan-x: ;
        --tw-pan-y: ;
        --tw-pinch-zoom: ;
        --tw-scroll-snap-strictness: proximity;
        --tw-gradient-from-position: ;
        --tw-gradient-via-position: ;
        --tw-gradient-to-position: ;
        --tw-ordinal: ;
        --tw-slashed-zero: ;
        --tw-numeric-figure: ;
        --tw-numeric-spacing: ;
        --tw-numeric-fraction: ;
        --tw-ring-inset: ;
        --tw-ring-offset-width: 0px;
        --tw-ring-offset-color: #fff;
        --tw-ring-color: rgb(59 130 246 / 0.5);
        --tw-ring-offset-shadow: 0 0 #0000;
        --tw-ring-shadow: 0 0 #0000;
        --tw-shadow: 0 0 #0000;
        --tw-shadow-colored: 0 0 #0000;
        --tw-blur: ;
        --tw-brightness: ;
        --tw-contrast: ;
        --tw-grayscale: ;
        --tw-hue-rotate: ;
        --tw-invert: ;
        --tw-saturate: ;
        --tw-sepia: ;
        --tw-drop-shadow: ;
        --tw-backdrop-blur: ;
        --tw-backdrop-brightness: ;
        --tw-backdrop-contrast: ;
        --tw-backdrop-grayscale: ;
        --tw-backdrop-hue-rotate: ;
        --tw-backdrop-invert: ;
        --tw-backdrop-opacity: ;
        --tw-backdrop-saturate: ;
        --tw-backdrop-sepia: ;
        --tw-contain-size: ;
        --tw-contain-layout: ;
        --tw-contain-paint: ;
        --tw-contain-style: ;
      }
      ::backdrop {
        --tw-border-spacing-x: 0;
        --tw-border-spacing-y: 0;
        --tw-translate-x: 0;
        --tw-translate-y: 0;
        --tw-rotate: 0;
        --tw-skew-x: 0;
        --tw-skew-y: 0;
        --tw-scale-x: 1;
        --tw-scale-y: 1;
        --tw-pan-x: ;
        --tw-pan-y: ;
        --tw-pinch-zoom: ;
        --tw-scroll-snap-strictness: proximity;
        --tw-gradient-from-position: ;
        --tw-gradient-via-position: ;
        --tw-gradient-to-position: ;
        --tw-ordinal: ;
        --tw-slashed-zero: ;
        --tw-numeric-figure: ;
        --tw-numeric-spacing: ;
        --tw-numeric-fraction: ;
        --tw-ring-inset: ;
        --tw-ring-offset-width: 0px;
        --tw-ring-offset-color: #fff;
        --tw-ring-color: rgb(59 130 246 / 0.5);
        --tw-ring-offset-shadow: 0 0 #0000;
        --tw-ring-shadow: 0 0 #0000;
        --tw-shadow: 0 0 #0000;
        --tw-shadow-colored: 0 0 #0000;
        --tw-blur: ;
        --tw-brightness: ;
        --tw-contrast: ;
        --tw-grayscale: ;
        --tw-hue-rotate: ;
        --tw-invert: ;
        --tw-saturate: ;
        --tw-sepia: ;
        --tw-drop-shadow: ;
        --tw-backdrop-blur: ;
        --tw-backdrop-brightness: ;
        --tw-backdrop-contrast: ;
        --tw-backdrop-grayscale: ;
        --tw-backdrop-hue-rotate: ;
        --tw-backdrop-invert: ;
        --tw-backdrop-opacity: ;
        --tw-backdrop-saturate: ;
        --tw-backdrop-sepia: ;
        --tw-contain-size: ;
        --tw-contain-layout: ;
        --tw-contain-paint: ;
        --tw-contain-style: ;
      } /* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com */
      *,
      ::after,
      ::before {
        box-sizing: border-box;
        border-width: 0;
        border-style: solid;
        border-color: #e5e7eb;
      }
      ::after,
      ::before {
        --tw-content: "";
      }
      :host,
      html {
        line-height: 1.5;
        -webkit-text-size-adjust: 100%;
        -moz-tab-size: 4;
        tab-size: 4;
        font-family:
          ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
          "Segoe UI Symbol", "Noto Color Emoji";
        font-feature-settings: normal;
        font-variation-settings: normal;
        -webkit-tap-highlight-color: transparent;
      }
      body {
        margin: 0;
        line-height: inherit;
      }
      hr {
        height: 0;
        color: inherit;
        border-top-width: 1px;
      }
      abbr:where([title]) {
        -webkit-text-decoration: underline dotted;
        text-decoration: underline dotted;
      }
      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        font-size: inherit;
        font-weight: inherit;
      }
      a {
        color: inherit;
        text-decoration: inherit;
      }
      b,
      strong {
        font-weight: bolder;
      }
      code,
      kbd,
      pre,
      samp {
        font-family:
          ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
          monospace;
        font-feature-settings: normal;
        font-variation-settings: normal;
        font-size: 1em;
      }
      small {
        font-size: 80%;
      }
      sub,
      sup {
        font-size: 75%;
        line-height: 0;
        position: relative;
        vertical-align: baseline;
      }
      sub {
        bottom: -0.25em;
      }
      sup {
        top: -0.5em;
      }
      table {
        text-indent: 0;
        border-color: inherit;
        border-collapse: collapse;
      }
      button,
      input,
      optgroup,
      select,
      textarea {
        font-family: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        font-size: 100%;
        font-weight: inherit;
        line-height: inherit;
        letter-spacing: inherit;
        color: inherit;
        margin: 0;
        padding: 0;
      }
      button,
      select {
        text-transform: none;
      }
      button,
      input:where([type="button"]),
      input:where([type="reset"]),
      input:where([type="submit"]) {
        -webkit-appearance: button;
        background-color: transparent;
        background-image: none;
      }
      :-moz-focusring {
        outline: auto;
      }
      :-moz-ui-invalid {
        box-shadow: none;
      }
      progress {
        vertical-align: baseline;
      }
      ::-webkit-inner-spin-button,
      ::-webkit-outer-spin-button {
        height: auto;
      }
      [type="search"] {
        -webkit-appearance: textfield;
        outline-offset: -2px;
      }
      ::-webkit-search-decoration {
        -webkit-appearance: none;
      }
      ::-webkit-file-upload-button {
        -webkit-appearance: button;
        font: inherit;
      }
      summary {
        display: list-item;
      }
      blockquote,
      dd,
      dl,
      figure,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      hr,
      p,
      pre {
        margin: 0;
      }
      fieldset {
        margin: 0;
        padding: 0;
      }
      legend {
        padding: 0;
      }
      menu,
      ol,
      ul {
        list-style: none;
        margin: 0;
        padding: 0;
      }
      dialog {
        padding: 0;
      }
      textarea {
        resize: vertical;
      }
      input::placeholder,
      textarea::placeholder {
        opacity: 1;
        color: #9ca3af;
      }
      [role="button"],
      button {
        cursor: pointer;
      }
      :disabled {
        cursor: default;
      }
      audio,
      canvas,
      embed,
      iframe,
      img,
      object,
      svg,
      video {
        display: block;
        vertical-align: middle;
      }
      img,
      video {
        max-width: 100%;
        height: auto;
      }
      [hidden]:where(:not([hidden="until-found"])) {
        display: none;
      }

/* ─────────────────────────────────────────────────────────────
   공용 도구 메뉴 버튼 (#sl-btn-tools-menu)
   페이지마다 버튼 모양을 따로 만들지 않도록 여기서 한 번만 정의합니다.
   이미 자체 버튼 클래스(.icon-btn 등)를 쓰는 페이지는 그 스타일이 우선됩니다.
   ───────────────────────────────────────────────────────────── */
.sl-tools-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  font-size: 15px;
  line-height: 1;
  border-radius: 10px;
  cursor: pointer;
  background: var(--bg-card, #1e293b);
  color: var(--text-main, #f8fafc);
  border: 1px solid var(--border-color, #334155);
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.sl-tools-menu-btn:hover {
  background: var(--accent-bg, rgba(56, 189, 248, 0.12));
  border-color: var(--accent, #38bdf8);
  transform: translateY(-1px);
}
.sl-tools-menu-btn:focus-visible {
  outline: 2px solid var(--accent, #38bdf8);
  outline-offset: 2px;
}
/* 메뉴가 헤더 기준으로 떠야 하므로, 헤더에 위치 기준점이 없으면 잡아줍니다 */
header:has(#sl-tools-modal),
header:has(#sl-btn-tools-menu) {
  position: relative;
}