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

    :root {
      --bg:       #0d1117;
      --surface:  #161b22;
      --surface2: #1c2128;
      --border:   #30363d;
      --text:     #e6edf3;
      --dim:      #8b949e;
      --accent:   #388bfd;
      --accent2:  #1f6feb;
      --success:  #3fb950;
      --warn:     #d29922;
      --danger:   #f85149;
      --sidebar-w: 220px;
    }

    body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
           background: var(--bg); color: var(--text); height: 100vh; display: flex; flex-direction: column; }

    /* 가로 스크롤 금지. overflow-x:hidden 은 스크롤 컨테이너를 만들어 position:sticky 를 깨뜨리므로 clip 을 쓴다. */
    html, body {
      width: 100%;
      max-width: 100%;
      overflow-x: clip;
    }
    #app, #app-body, #main, #content, .panel {
      min-width: 0;
      max-width: 100%;
    }
    img, video, canvas, iframe, svg {
      max-width: 100%;
    }

    html {
      scrollbar-width: thin;
      scrollbar-color: #2a313a #11161d;
    }
    * {
      scrollbar-width: thin;
      scrollbar-color: #2a313a #11161d;
    }
    *::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }
    *::-webkit-scrollbar-track {
      background: #11161d;
    }
    *::-webkit-scrollbar-thumb {
      background: #2a313a;
      border-radius: 999px;
      border: 2px solid #11161d;
    }
    *::-webkit-scrollbar-thumb:hover {
      background: #39424d;
    }
    *::-webkit-scrollbar-corner {
      background: #11161d;
    }
    .monaco-scrollable-element > .scrollbar > .slider {
      background: rgba(58, 67, 78, 0.72) !important;
      border-radius: 999px;
    }
    .monaco-scrollable-element > .scrollbar > .slider:hover {
      background: rgba(82, 94, 108, 0.88) !important;
    }

    /* Login overlay */
    #login-overlay {
      position: fixed; inset: 0; background: var(--bg);
      display: flex; align-items: center; justify-content: center; z-index: 999;
    }
    #login-overlay.hidden { display: none; }
    .login-box {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 10px; padding: 40px 48px; width: min(360px, calc(100vw - 32px));
    }
    .login-box h2 { font-size: 20px; margin-bottom: 24px; color: var(--text); }
    .login-box input {
      width: 100%; padding: 10px 12px; background: var(--bg);
      border: 1px solid var(--border); border-radius: 6px;
      color: var(--text); font-size: 14px; margin-bottom: 12px; outline: none;
    }
    .login-box input:focus { border-color: var(--accent); }
    .login-box button {
      width: 100%; padding: 10px; background: var(--accent2);
      border: none; border-radius: 6px; color: #fff; font-size: 14px;
      cursor: pointer; font-weight: 600;
    }
    .login-box button:hover { background: var(--accent); }
    #login-error { color: var(--danger); font-size: 13px; margin-top: 8px; min-height: 20px; }

    /* App shell */
    #app { display: flex; flex: 1; overflow: hidden; }
    #app.hidden { display: none; }

    /* Sidebar */
    #sidebar {
      width: var(--sidebar-w); background: var(--surface); border-right: 1px solid var(--border);
      display: flex; flex-direction: column; flex-shrink: 0;
    }
    #sidebar .logo { padding: 18px 20px; font-size: 16px; font-weight: 700;
                     border-bottom: 1px solid var(--border); color: var(--accent); }
    #sidebar .logo span { color: var(--dim); font-weight: 400; font-size: 12px; display: block; }
    #sidebar nav { flex: 1; overflow-y: auto; padding: 8px 0; }
    .nav-section { padding: 16px 16px 4px; font-size: 11px; font-weight: 600;
                   color: var(--dim); letter-spacing: 0.06em; text-transform: uppercase; }
    .nav-item {
      display: flex; align-items: center; gap: 8px;
      padding: 8px 16px; font-size: 13px; cursor: pointer;
      border-radius: 6px; margin: 1px 8px; color: var(--dim);
      transition: background 0.1s, color 0.1s;
    }
    .nav-item:hover { background: var(--surface2); color: var(--text); }
    .nav-item.active { background: rgba(56,139,253,0.15); color: var(--accent); }
    .nav-item .icon { font-size: 15px; width: 18px; text-align: center; }
    #sidebar .footer { padding: 12px 16px; border-top: 1px solid var(--border); }
    .btn-logout {
      width: 100%; padding: 8px; background: transparent; border: 1px solid var(--border);
      border-radius: 6px; color: var(--dim); font-size: 13px; cursor: pointer;
    }
    .btn-logout:hover { border-color: var(--danger); color: var(--danger); }

    /* Main content */
    #main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
    #topbar {
      padding: 14px 24px; border-bottom: 1px solid var(--border);
      display: flex; align-items: center; justify-content: space-between;
      background: var(--surface); flex-shrink: 0;
    }
    #topbar h1 { font-size: 16px; font-weight: 600; }
    #topbar .status-msg { font-size: 13px; padding: 4px 12px; border-radius: 6px; }
    #topbar .status-msg.ok     { background: rgba(63,185,80,0.15); color: var(--success); }
    #topbar .status-msg.error  { background: rgba(248,81,73,0.15);  color: var(--danger); }
    #topbar .status-msg.info   { background: rgba(56,139,253,0.12); color: var(--accent); }
    #content { flex: 1; overflow: auto; padding: 24px; }

    /* Panels */
    .panel { display: none; }
    .panel.active { display: block; }

    .help-frame {
      display: block;
      width: 100%;
      height: calc(100vh - 120px);
      min-height: 420px;
      border: 0;
      border-radius: 8px;
      background: #0f1216;
    }

    /* DSL panel */
    .dsl-layout { display: flex; gap: 18px; height: calc(100vh - 160px); align-items: stretch; }
    .dsl-keys {
      width: 236px; flex-shrink: 0; background: var(--surface);
      border: 1px solid var(--border); border-radius: 12px; overflow-y: auto;
      box-shadow: 0 10px 24px rgba(0,0,0,0.16);
    }
    .dsl-keys .key-item {
      padding: 11px 14px; font-size: 13px; cursor: pointer;
      border-bottom: 1px solid var(--border); color: var(--dim);
      transition: background 0.1s, color 0.1s;
      line-height: 1.45;
    }
    .dsl-keys .key-item:hover { background: var(--surface2); color: var(--text); }
    .dsl-keys .key-item.active { background: rgba(56,139,253,0.14); color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
    .dsl-editor-wrap {
      flex: 1; display: flex; flex-direction: column; gap: 0;
      min-width: 0;
    }
    .dsl-workspace {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
    }
    .dsl-json-wrap {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .dsl-json-wrap.hidden { display: none; }
    .dsl-json-note {
      font-size: 12px;
      color: var(--dim);
      line-height: 1.5;
      padding: 10px 12px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--surface);
    }
    #monaco-container {
      flex: 1; border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
      box-shadow: 0 10px 24px rgba(0,0,0,0.14);
    }
    .dsl-form-container {
      flex: 1;
      min-height: 0;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: var(--surface);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      box-shadow: 0 10px 24px rgba(0,0,0,0.16);
    }
    .dsl-form-container.hidden { display: none; }
    .dsl-form-toolbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 14px;
      padding: 12px 16px;
      border-bottom: 1px solid var(--border);
      background: var(--surface2);
    }
    .dsl-form-toolbar-title {
      font-size: 14px;
      font-weight: 600;
      color: var(--text);
    }
    .dsl-form-toolbar-subtitle {
      margin-top: 5px;
      font-size: 12px;
      color: var(--dim);
      line-height: 1.5;
    }
    .dsl-form-toolbar-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
      margin-left: auto;
    }
    .dsl-form-split {
      flex: 1;
      min-height: 0;
      display: grid;
      grid-template-columns: 280px minmax(0, 1fr);
    }
    .dsl-form-list {
      border-right: 1px solid var(--border);
      background: rgba(0, 0, 0, 0.08);
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      position: sticky;
      top: 0;
      align-self: start;
      height: 100%;
    }
    .dsl-form-list-item {
      padding: 12px 14px;
      border-bottom: 1px solid var(--border);
      cursor: pointer;
      display: grid;
      gap: 5px;
      min-height: 62px;
      align-content: center;
    }
    .dsl-form-list-item:hover { background: rgba(56,139,253,0.08); }
    .dsl-form-list-item.active {
      background: rgba(56,139,253,0.14);
      box-shadow: inset 3px 0 0 var(--accent);
    }
    .dsl-form-list-title {
      font-size: 13px;
      color: var(--text);
      font-weight: 600;
      line-height: 1.35;
    }
    .dsl-form-list-meta {
      font-size: 11px;
      color: var(--dim);
      line-height: 1.45;
    }
    .dsl-form-detail {
      overflow-y: auto;
      padding: 18px;
      display: grid;
      gap: 18px;
      align-content: start;
    }
    .dsl-form-detail.is-singleton {
      flex: 1;
      min-height: 0;
    }
    .dsl-multi-select {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 10px;
    }
    .dsl-multi-option {
      display: flex;
      align-items: center;
      gap: 9px;
      min-height: 42px;
      padding: 10px 12px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.02);
      cursor: pointer;
      transition: border-color 0.12s, background 0.12s;
    }
    .dsl-multi-option:hover {
      border-color: var(--accent);
      background: rgba(56, 139, 253, 0.08);
    }
    .dsl-multi-option input {
      width: 16px !important;
      height: 16px;
      margin: 0;
      accent-color: var(--accent);
      flex-shrink: 0;
      padding: 0;
      border: 0;
      background: transparent;
    }
    .dsl-multi-option span {
      font-size: 13px;
      color: var(--text);
      line-height: 1.35;
      min-width: 0;
      white-space: normal;
      overflow-wrap: anywhere;
    }
    .dsl-multi-option.is-selected {
      border-color: var(--accent);
      background: rgba(56, 139, 253, 0.12);
    }
    .dsl-multi-empty {
      padding: 11px 13px;
      border: 1px dashed var(--border);
      border-radius: 10px;
      color: var(--dim);
      font-size: 12px;
      line-height: 1.5;
    }
    .dsl-form-empty {
      padding: 20px;
      font-size: 13px;
      color: var(--dim);
      line-height: 1.55;
    }
    .dsl-form-section {
      display: grid;
      gap: 12px;
      padding: 16px;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: var(--bg);
    }
    .dsl-form-section-title {
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--dim);
    }
    /* 특정 항목 하나가 아니라 전체(예: 퀘스트 게시판)에 적용되는 전역 설정 섹션 — 눈에 띄게 구분한다. */
    .dsl-form-section-global {
      border: 1.5px solid #d9a441;
      background: rgba(217, 164, 65, 0.08);
    }
    .dsl-form-section-global .dsl-form-section-title {
      color: #d9a441;
      text-transform: none;
      letter-spacing: 0;
      font-weight: 700;
      font-size: 13px;
    }
    .dsl-section-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
    }
    .dsl-section-toggle {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 10px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,0.03);
      color: var(--dim);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.02em;
      cursor: pointer;
    }
    .dsl-section-toggle:hover {
      border-color: var(--accent);
      color: var(--accent);
    }
    .dsl-section-toggle.is-active {
      border-color: var(--accent);
      color: var(--accent);
      background: rgba(56, 139, 253, 0.12);
    }
    .dsl-chip-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .dsl-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 10px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,0.04);
      font-size: 11px;
      color: var(--text);
      line-height: 1.3;
    }
    .dsl-chip-label {
      color: var(--dim);
      text-transform: uppercase;
      letter-spacing: 0.04em;
      font-size: 10px;
      font-weight: 700;
    }
    .dsl-chip-value {
      color: var(--text);
      font-weight: 600;
    }
    .dsl-chip.accent {
      border-color: rgba(56, 139, 253, 0.36);
      background: rgba(56, 139, 253, 0.12);
    }
    .dsl-collapsible-hidden {
      display: none;
    }
    .dsl-form-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px 16px;
    }
    .dsl-field {
      display: grid;
      gap: 8px;
      min-width: 0;
    }
    .dsl-field.span-2 { grid-column: 1 / -1; }
    .dsl-grid-span-2 {
      grid-column: 1 / -1;
      min-width: 0;
    }
    .dsl-field-label {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      min-width: 0;
      font-size: 12px;
      color: var(--dim);
      line-height: 1.45;
    }
    .dsl-field-title {
      color: var(--text);
      font-weight: 600;
    }
    .dsl-tooltip-trigger {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
      border-radius: 999px;
      border: 1px solid rgba(139, 148, 158, 0.45);
      background: rgba(255,255,255,0.04);
      color: var(--dim);
      font-size: 11px;
      font-weight: 700;
      cursor: help;
      flex-shrink: 0;
    }
    .dsl-tooltip-trigger:hover,
    .dsl-tooltip-trigger:focus-visible {
      border-color: var(--accent);
      color: var(--accent);
      outline: none;
    }
    .dsl-floating-tooltip {
      position: fixed;
      left: 0;
      top: 0;
      max-width: min(320px, calc(100vw - 24px));
      padding: 10px 12px;
      border-radius: 10px;
      border: 1px solid var(--border);
      background: #111823;
      color: var(--text);
      font-size: 12px;
      line-height: 1.55;
      box-shadow: 0 16px 36px rgba(0,0,0,0.35);
      opacity: 0;
      pointer-events: none;
      visibility: hidden;
      transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s ease;
      transform: translateY(4px);
      z-index: 2000;
      white-space: normal;
      text-align: left;
    }
    .dsl-floating-tooltip.is-visible {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
    .dsl-field input,
    .dsl-field textarea,
    .dsl-field select {
      width: 100%;
      min-height: 42px;
      padding: 10px 12px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--surface);
      color: var(--text);
      font-size: 13px;
      line-height: 1.45;
      outline: none;
    }
    .dsl-field textarea {
      min-height: 110px;
      resize: vertical;
    }
    .dsl-field-note {
      font-size: 11px;
      color: var(--dim);
      line-height: 1.5;
      margin-top: 2px;
    }
    .dsl-select-with-note {
      display: grid;
      gap: 8px;
    }
    /* 값 자체는 유효하지만 "이대로 두면 의도와 다르게 동작한다"를 알리는 줄(미등록 preset 등). */
    .dsl-field-warning {
      font-size: 11px;
      line-height: 1.5;
      margin-top: 4px;
      padding: 6px 9px;
      border-radius: 8px;
      color: #8a4b00;
      background: rgba(255, 176, 32, 0.14);
      border: 1px solid rgba(255, 176, 32, 0.45);
    }
    .dsl-color-input-wrap {
      display: flex;
      gap: 8px;
      align-items: center;
    }
    .dsl-color-picker {
      width: 52px !important;
      min-width: 52px;
      padding: 4px !important;
      cursor: pointer;
    }
    .dsl-inline-btn {
      min-height: 42px;
      padding: 0 10px;
      flex-shrink: 0;
    }
    .dsl-readonly-note {
      min-height: 42px;
      padding: 10px 12px;
      border: 1px dashed var(--border);
      border-radius: 10px;
      background: rgba(255,255,255,0.02);
      color: var(--dim);
      font-size: 12px;
      line-height: 1.55;
      display: flex;
      align-items: center;
    }
    .dsl-field input:focus,
    .dsl-field textarea:focus,
    .dsl-field select:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(56,139,253,0.14);
    }
    .dsl-array-card {
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 12px;
      background: var(--surface);
      display: grid;
      gap: 12px;
    }
    .dsl-array-card-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 10px;
    }
    .dsl-array-card-title {
      font-size: 13px;
      color: var(--text);
      font-weight: 600;
      line-height: 1.4;
    }
    .dsl-array-card-meta {
      margin-top: 4px;
      font-size: 11px;
      color: var(--dim);
      line-height: 1.45;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }
    .dsl-array-card-actions {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    .dsl-step-adder {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .dsl-array-card-grid {
      display: grid;
      gap: 12px;
    }
    .dsl-choice-option-card .dsl-array-card-head > :first-child {
      min-width: 0;
      flex: 1;
    }
    .dsl-choice-option-fields {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px 16px;
      min-width: 0;
    }
    .dsl-choice-option-fields .dsl-field {
      min-width: 0;
    }
    .dsl-choice-option-fields .dsl-field input,
    .dsl-choice-option-fields .dsl-field select,
    .dsl-choice-option-fields .dsl-field textarea {
      width: 100%;
      min-width: 0;
    }
    .dsl-stat-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px 14px;
    }
    .monster-profile-layout {
      display: grid;
      grid-template-columns: minmax(260px, 0.92fr) minmax(320px, 1.08fr);
      gap: 18px;
      align-items: start;
    }
    .monster-profile-panel {
      display: grid;
      gap: 14px;
      min-width: 0;
    }
    .dsl-readonly-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 8px;
      border-radius: 999px;
      border: 1px solid var(--border);
      font-size: 11px;
      color: var(--dim);
      background: rgba(255,255,255,0.02);
    }
    .dsl-notices {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .dsl-notices.hidden { display: none; }
    .dsl-notice {
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 12px 14px;
      background: rgba(255,255,255,0.02);
      display: grid;
      gap: 7px;
    }
    .dsl-notice-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
    }
    .dsl-notice-label {
      font-size: 12px;
      font-weight: 600;
      color: var(--text);
    }
    .dsl-notice-badge {
      font-size: 11px;
      border-radius: 999px;
      padding: 2px 8px;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .dsl-notice.error .dsl-notice-badge {
      background: rgba(248,81,73,0.14);
      color: var(--danger);
      border: 1px solid rgba(248,81,73,0.25);
    }
    .dsl-notice.warn .dsl-notice-badge {
      background: rgba(210,153,34,0.14);
      color: var(--warn);
      border: 1px solid rgba(210,153,34,0.25);
    }
    .dsl-notice.info .dsl-notice-badge {
      background: rgba(56,139,253,0.12);
      color: var(--accent);
      border: 1px solid rgba(56,139,253,0.28);
    }
    .dsl-notice-text {
      font-size: 12px;
      line-height: 1.55;
      color: var(--text);
    }
    .dsl-notice-path {
      font-size: 11px;
      color: var(--dim);
      word-break: break-all;
    }
    .dsl-notice-path.link {
      cursor: pointer;
      text-decoration: underline;
      text-decoration-style: dotted;
      text-underline-offset: 2px;
    }
    .dsl-notice-path.link:hover {
      color: var(--accent);
    }
    .dsl-notices-empty {
      padding: 12px 14px;
      border: 1px dashed var(--border);
      border-radius: 12px;
      font-size: 12px;
      color: var(--dim);
      line-height: 1.6;
    }

    /* Accounts panel */
    .accounts-toolbar { display: flex; gap: 8px; margin-bottom: 16px; align-items: center; flex-wrap: wrap; }
    .accounts-toolbar input {
      padding: 8px 12px; background: var(--surface); border: 1px solid var(--border);
      border-radius: 6px; color: var(--text); font-size: 13px; width: 260px; max-width: 100%; flex: 1 1 260px; outline: none;
    }
    .accounts-toolbar input:focus { border-color: var(--accent); }
    .accounts-count { font-size: 13px; color: var(--dim); }
    .table-scroll {
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    .accounts-table-wrap {
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--surface);
    }
    .accounts-table { min-width: 520px; }
    table { width: 100%; border-collapse: collapse; font-size: 13px; }
    thead th {
      text-align: left; padding: 10px 14px; font-size: 11px; font-weight: 600;
      color: var(--dim); text-transform: uppercase; letter-spacing: 0.05em;
      border-bottom: 1px solid var(--border);
    }
    tbody tr { border-bottom: 1px solid var(--border); }
    tbody tr:hover { background: var(--surface2); }
    tbody td { padding: 10px 14px; color: var(--text); }
    tbody td.mono { font-family: monospace; font-size: 12px; color: var(--dim); }
    .btn-del {
      padding: 4px 10px; background: transparent; border: 1px solid var(--danger);
      border-radius: 4px; color: var(--danger); font-size: 12px; cursor: pointer;
    }
    .btn-del:hover { background: rgba(248,81,73,0.1); }

    /* button 이다 — <a href="#"> 였을 때는 inlineBridge 가 onclick 의 `return false` 를 못 살려서
       목록을 누를 때마다 기본동작(#)으로 페이지가 맨 위로 튀었다. */
    .acct-name-link {
      background: none; border: none; padding: 0; font: inherit; text-align: left;
      color: var(--accent); text-decoration: none; font-weight: 600; cursor: pointer;
    }
    .acct-name-link:hover { text-decoration: underline; }

    /* 탈퇴 유예 중 = 이 계정은 지금 **접속이 막혀 있다**. 이름 옆에 눈에 띄게 붙여
       "왜 못 들어가느냐"는 문의에 바로 답할 수 있게 한다. */
    .acct-pending-del {
      display: inline-block; margin-right: 6px; padding: 1px 6px;
      border: 1px solid var(--danger); border-radius: 4px;
      color: var(--danger); font-size: 11px; white-space: nowrap;
    }

    /* 모달이 떠 있는 동안 뒤 화면 잠금 — setAdminModalOpen() 이 클래스를 붙인다.
       overflow 잠금이 없으면 모달을 끝까지 굴렸을 때 스크롤이 뒤 문서로 새어 목록이 밀린다. */
    html.admin-modal-open, body.admin-modal-open { overflow: hidden !important; }
    /* inert 미지원 브라우저 폴백 — 뒤 화면이 포인터 입력을 못 받게 한다. */
    #app[aria-hidden="true"] { pointer-events: none; }

    /* Account detail overlay */
    .acct-detail-overlay {
      display: none; position: fixed; inset: 0; z-index: 2000;
      background: rgba(1,4,9,0.72); align-items: flex-start; justify-content: center;
      padding: 40px 16px; overflow-y: auto;
      /* 오버레이 끝까지 굴려도 스크롤이 뒤 문서로 넘어가지 않는다. */
      overscroll-behavior: contain;
    }
    .acct-detail-card {
      width: 100%; max-width: 560px; background: var(--surface); border: 1px solid var(--border);
      border-radius: 12px; padding: 20px 22px; box-shadow: 0 18px 60px rgba(0,0,0,0.55);
    }
    .acct-detail-loading { color: var(--dim); text-align: center; padding: 28px 0; }
    .acct-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .acct-detail-title { font-size: 18px; color: var(--text); }
    .acct-detail-title b { color: #f2d58b; }
    .acct-detail-x {
      background: transparent; border: 1px solid var(--border); border-radius: 6px; color: var(--dim);
      width: 30px; height: 30px; cursor: pointer; font-size: 14px; flex: none;
    }
    .acct-detail-x:hover { color: var(--text); border-color: var(--dim); }
    .acct-detail-sub { color: var(--dim); font-size: 13px; margin-top: 4px; }
    .acct-detail-section { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 14px; }
    .acct-detail-h { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); margin-bottom: 10px; }
    .acct-detail-muted { color: var(--dim); }
    .acct-detail-kv { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--text); padding: 3px 0; }
    .acct-detail-kv > span:first-child { color: var(--dim); }

    .acct-house-line { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
    .acct-house-name { font-size: 15px; color: #f2d58b; font-weight: 600; }
    .acct-badge { font-size: 11px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border); }
    .badge-normal { color: var(--dim); }
    .badge-hero { color: #ffd76a; border-color: #7a5c14; background: rgba(255,215,106,0.10); }
    .badge-hero-hidden { color: #d29922; border-color: #6b5417; background: rgba(210,153,34,0.08); }

    .acct-blood-list { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
    .acct-blood-row { display: flex; align-items: center; gap: 10px; }
    .acct-blood-name { width: 130px; flex: none; font-size: 13px; color: var(--text); }
    .acct-blood-bar { flex: 1; height: 8px; background: var(--surface2); border-radius: 999px; overflow: hidden; }
    .acct-blood-fill { height: 100%; background: linear-gradient(90deg, #b5892e, #f2d58b); border-radius: 999px; }
    .acct-blood-pct { width: 44px; flex: none; text-align: right; font-size: 12px; color: var(--dim); }

    .acct-job-list { display: flex; flex-wrap: wrap; gap: 8px; }
    .acct-job-chip { font-size: 13px; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--border); color: var(--text); background: var(--surface2); }
    .acct-job-chip.acct-job-active { border-color: var(--accent2); color: #cfe3ff; }
    .acct-job-chip b { color: var(--dim); font-weight: 600; }

    .acct-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .acct-stat { display: flex; justify-content: space-between; background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; }
    .acct-stat-label { color: var(--dim); font-size: 13px; }
    .acct-stat-val { color: var(--text); font-size: 14px; }

    .acct-equip-list { display: flex; flex-direction: column; gap: 6px; }
    .acct-equip-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 5px 0; border-bottom: 1px dashed rgba(48,54,61,0.5); }
    .acct-equip-row:last-child { border-bottom: none; }
    .acct-equip-slot { color: var(--dim); }
    .acct-equip-item { color: var(--text); text-align: right; }

    .acct-detail-foot { display: flex; gap: 24px; font-size: 13px; color: var(--dim); }
    .acct-detail-foot b { color: var(--text); }

    /* Account detail — 편집 폼 */
    .acct-detail-actions { display: flex; align-items: center; gap: 8px; flex: none; }
    .acct-detail-footer-actions { justify-content: flex-end; }
    .acct-edit-btn { padding: 5px 12px; }
    .acct-hint { font-size: 12px; margin-top: 8px; line-height: 1.5; }

    .acct-input {
      background: var(--surface2); border: 1px solid var(--border); border-radius: 6px;
      color: var(--text); font-size: 13px; padding: 6px 8px; min-width: 0; width: 100%;
    }
    .acct-input:focus { outline: none; border-color: var(--accent); }
    .acct-input-sm { width: 78px; flex: none; }

    .acct-field-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
    .acct-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
    .acct-field > span { font-size: 12px; color: var(--dim); }
    .acct-field-wide { margin-bottom: 10px; }
    .acct-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); margin: 8px 0; cursor: pointer; }

    .acct-job-edit-list, .acct-blood-edit-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
    .acct-job-edit-row, .acct-blood-edit-row { display: flex; align-items: center; gap: 8px; }
    .acct-job-edit-name { flex: 1; min-width: 0; font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .acct-blood-edit-row .acct-input:first-child { flex: 1; }
    .acct-add-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
    .acct-add-row .acct-input { flex: 1; }
    .acct-add-row .btn { flex: none; }
    .acct-replay-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
    .acct-replay-row .acct-input { flex: 1; }
    .acct-replay-row .btn { flex: none; }

    .acct-list-block { margin-top: 14px; border-top: 1px dashed rgba(48,54,61,0.6); padding-top: 10px; }
    .acct-list-head { font-size: 12px; color: var(--text); margin-bottom: 8px; }
    .acct-chip-list { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; }
    .acct-chip {
      display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
      background: var(--surface2); border: 1px solid var(--border); border-radius: 999px;
      padding: 3px 4px 3px 10px; color: var(--text);
    }
    .acct-chip em { font-style: normal; color: var(--dim); font-size: 11px; }
    .acct-chip-x {
      background: transparent; border: none; color: var(--dim); cursor: pointer;
      font-size: 11px; line-height: 1; padding: 3px 5px; border-radius: 999px;
    }
    .acct-chip-x:hover { color: var(--danger); background: rgba(248,81,73,0.12); }

    /* Backup panel */
    .backup-layout { display: grid; gap: 12px; max-width: 980px; }
    .backup-box {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 16px;
    }
    .backup-title { font-size: 14px; color: var(--text); margin-bottom: 8px; }
    .backup-desc { font-size: 12px; color: var(--dim); margin-bottom: 10px; }
    #backup-json {
      width: 100%;
      min-height: 260px;
      resize: vertical;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 6px;
      color: var(--text);
      padding: 10px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 12px;
      line-height: 1.4;
    }
    .backup-file-row,
    .backup-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }
    .backup-file-row {
      margin-bottom: 10px;
    }
    .backup-actions {
      margin-top: 10px;
    }

    /* Buttons */
    .btn {
      padding: 7px 16px; border-radius: 6px; font-size: 13px; cursor: pointer;
      border: none; font-weight: 500; transition: background 0.15s;
    }
    .btn-primary { background: var(--accent2); color: #fff; }
    .btn-primary:hover { background: var(--accent); }
    .btn-secondary { background: var(--surface2); border: 1px solid var(--border); color: var(--text); }
    .btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
    .btn-warn { background: transparent; border: 1px solid var(--warn); color: var(--warn); }
    .btn-warn:hover { background: rgba(210,153,34,0.1); }

    /* Assets panel */
    .asset-layout {
      display: grid;
      grid-template-columns: 320px minmax(0, 1fr);
      gap: 16px;
      min-height: 520px;
    }
    .assets-stack {
      display: grid;
      gap: 16px;
    }
    .asset-sidebar-card,
    .asset-detail-card,
    .music-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 10px;
      overflow: hidden;
    }
    .asset-toolbar {
      display: grid;
      gap: 8px;
      padding: 14px;
      border-bottom: 1px solid var(--border);
    }
    .asset-toolbar input,
    .asset-toolbar select {
      width: 100%;
      padding: 8px 10px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 6px;
      color: var(--text);
      font-size: 13px;
      outline: none;
    }
    .asset-list {
      max-height: calc(100vh - 340px);
      overflow-y: auto;
      padding: 10px;
      display: grid;
      gap: 8px;
    }
    .asset-list-item {
      padding: 12px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--bg);
      cursor: pointer;
      transition: border-color 0.12s, background 0.12s;
    }
    .asset-list-item:hover {
      border-color: var(--accent);
      background: var(--surface2);
    }
    .asset-list-item.active {
      border-color: var(--accent);
      background: rgba(56,139,253,0.12);
    }
    .asset-list-name { font-size: 13px; font-weight: 600; color: var(--text); }
    .asset-list-meta { margin-top: 4px; font-size: 12px; color: var(--dim); }
    .asset-badge {
      display: inline-flex;
      align-items: center;
      padding: 2px 8px;
      border-radius: 999px;
      border: 1px solid var(--border);
      font-size: 11px;
      color: var(--dim);
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .asset-detail-header {
      padding: 16px 18px;
      border-bottom: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: flex-start;
    }
    .asset-detail-header h3 {
      font-size: 18px;
      margin-bottom: 4px;
    }
    .asset-detail-header p {
      font-size: 13px;
      color: var(--dim);
      line-height: 1.5;
    }
    .asset-detail-body {
      padding: 18px;
    }
    .asset-slot-grid {
      display: grid;
      gap: 12px;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
    .asset-slot-card {
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--bg);
      padding: 12px;
      /* 파일 선택기의 **고유 폭**(≈340px)이 카드를 밀어내지 않게 한다. */
      min-width: 0;
    }
    /* 파일 선택 + 업로드 버튼 묶음.
       ⚠️`display:grid` 만 주면 암시적 열이 `auto`(=max(min-content,…))로 잡혀 **파일 입력의 고유 폭**만큼
          벌어진다 → 좁은 화면(390px)에서 카드를 삐져나가고 페이지가 가로로 넘쳤다(실측: scrollWidth 400).
          `minmax(0, 1fr)` 로 열을 묶고 입력에 max-width 를 줘야 안 넘친다. */
    .asset-slot-actions {
      display: grid;
      gap: 8px;
      grid-template-columns: minmax(0, 1fr);
    }
    .asset-slot-actions input[type="file"] {
      max-width: 100%;
    }
    .asset-slot-title {
      font-size: 13px;
      font-weight: 600;
      margin-bottom: 4px;
    }
    .asset-slot-desc {
      font-size: 12px;
      color: var(--dim);
      margin-bottom: 10px;
      min-height: 32px;
    }
    .asset-slot-url {
      font-size: 11px;
      color: var(--dim);
      word-break: break-all;
      margin-top: 8px;
      min-height: 30px;
    }
    .asset-detail-empty {
      padding: 40px 24px;
      color: var(--dim);
      font-size: 14px;
      text-align: center;
    }
    .music-card-header {
      padding: 16px 18px;
      border-bottom: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
    }
    .music-card-header h3 {
      font-size: 18px;
      margin-bottom: 4px;
    }
    .music-card-header p {
      color: var(--dim);
      font-size: 13px;
    }
    .music-upload-body {
      padding: 16px 18px;
      display: grid;
      gap: 10px;
    }
    .music-upload-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
    }
    .music-upload-grid input {
      width: 100%;
      padding: 8px 10px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 6px;
      color: var(--text);
      font-size: 13px;
      outline: none;
    }
    .music-layout {
      display: grid;
      grid-template-columns: 320px minmax(0, 1fr);
      gap: 16px;
    }
    .music-track-list {
      padding: 12px;
      display: grid;
      gap: 8px;
      max-height: 420px;
      overflow-y: auto;
    }
    .music-toolbar {
      padding: 12px 18px 0;
    }
    .music-toolbar input {
      width: 100%;
      padding: 8px 10px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 6px;
      color: var(--text);
      font-size: 13px;
      outline: none;
    }
    .music-track-item {
      padding: 12px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--bg);
      display: grid;
      gap: 4px;
    }
    .music-track-title {
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
    }
    .music-track-meta {
      font-size: 12px;
      color: var(--dim);
      word-break: break-all;
    }
    .music-track-usage {
      margin-top: 4px;
      font-size: 11px;
      color: var(--accent);
    }
    .music-bindings-body {
      padding: 16px 18px;
      display: grid;
      gap: 18px;
    }
    .music-binding-section {
      display: grid;
      gap: 10px;
    }
    .music-binding-section h4 {
      font-size: 14px;
    }
    .music-binding-grid {
      display: grid;
      gap: 10px;
    }
    .music-binding-row {
      display: grid;
      grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
      gap: 10px;
      align-items: center;
      padding: 10px 12px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--bg);
    }
    .music-binding-label {
      display: grid;
      gap: 4px;
    }
    .music-binding-label strong {
      font-size: 13px;
      color: var(--text);
    }
    .music-binding-label span {
      font-size: 12px;
      color: var(--dim);
    }
    .music-binding-row select {
      width: 100%;
      padding: 8px 10px;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 6px;
      color: var(--text);
      font-size: 13px;
      outline: none;
    }
    .battle-preview-layout {
      display: grid;
      grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
      gap: 18px;
      min-height: calc(100vh - 162px);
    }
    .battle-preview-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      box-shadow: var(--shadow);
    }
    .battle-preview-sidebar {
      display: grid;
      gap: 18px;
      align-content: start;
    }
    .battle-preview-card-header {
      padding: 18px 18px 12px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }
    .battle-preview-card-header h3 {
      font-size: 18px;
      margin-bottom: 6px;
    }
    .battle-preview-card-header p {
      font-size: 13px;
      color: var(--dim);
      line-height: 1.5;
    }
    .battle-preview-controls {
      padding: 16px 18px 18px;
      display: grid;
      gap: 14px;
    }
    .battle-preview-note {
      padding: 12px 14px;
      border-radius: 10px;
      border: 1px solid var(--border);
      background: var(--bg);
      color: var(--dim);
      font-size: 12px;
      line-height: 1.5;
    }
    .battle-preview-field {
      display: grid;
      gap: 6px;
    }
    .battle-preview-field label {
      font-size: 12px;
      color: var(--dim);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .battle-preview-field select,
    .battle-preview-field input {
      width: 100%;
      padding: 10px 12px;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text);
      font-size: 13px;
      outline: none;
    }
    .battle-preview-field select:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }
    .battle-preview-actions {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }
    .battle-preview-stage {
      min-height: calc(100vh - 162px);
      display: grid;
    }
    .battle-preview-frame-wrap {
      position: relative;
      height: 100%;
      min-height: calc(100vh - 162px);
      border-radius: 12px;
      overflow: hidden;
      background:
        radial-gradient(circle at top, rgba(90, 119, 173, 0.24), transparent 42%),
        linear-gradient(180deg, #111722 0%, #0b1018 100%);
    }
    .battle-preview-frame {
      width: 100%;
      height: 100%;
      min-height: calc(100vh - 162px);
      border: 0;
      background: #0b1018;
    }
    .effect-inline-preview-card {
      margin-top: 12px;
      border: 1px solid var(--border);
      border-radius: 12px;
      overflow: hidden;
      background: rgba(255,255,255,0.02);
    }
    .effect-inline-preview-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 12px 14px;
      border-bottom: 1px solid var(--border);
      background: rgba(255,255,255,0.02);
    }
    .effect-inline-preview-title {
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
    }
    .effect-inline-preview-frame-wrap {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      min-height: 320px;
      background:
        radial-gradient(circle at top, rgba(90, 119, 173, 0.24), transparent 42%),
        linear-gradient(180deg, #111722 0%, #0b1018 100%);
    }
    .effect-inline-preview-frame {
      width: 100%;
      height: 100%;
      border: 0;
      background: #0b1018;
      display: block;
    }
    .battle-preview-empty {
      padding: 28px;
      color: var(--dim);
      font-size: 14px;
      text-align: center;
    }

    @media (max-width: 980px) {
      #app,
      #main,
      #content,
      .dsl-form-container,
      .dsl-form-detail {
        overflow: visible;
      }
      #app.is-dsl-panel #content {
        overflow: visible;
      }
      #panel-dsl,
      #panel-dsl .dsl-layout,
      #panel-dsl .dsl-editor-wrap,
      #panel-dsl .dsl-workspace,
      #panel-dsl .dsl-form-container {
        height: auto;
      }
      .asset-layout {
        grid-template-columns: 1fr;
      }
      .music-layout,
      .music-upload-grid,
      .music-binding-row {
        grid-template-columns: 1fr;
      }
      .asset-list {
        max-height: none;
      }
      .dsl-layout {
        flex-direction: column;
        height: auto;
      }
      .dsl-keys {
        width: 100%;
        max-height: 220px;
      }
      .dsl-form-split {
        display: flex;
        flex-direction: column;
        gap: 12px;
        overflow: visible;
      }
      /* 목록은 가로 폭이 남는 만큼 여러 개가 한 줄에 들어가고, 넘치면 다음 줄로 감싼다(그리드형). */
      .dsl-form-list {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
        padding: 12px;
        max-height: 62vh;
        overflow-y: auto;
        overscroll-behavior: contain;
        border-right: none;
        border-bottom: 1px solid var(--border);
        position: static;
        height: auto;
        align-items: stretch;
      }
      .dsl-form-list-item {
        min-width: 0;
        max-width: none;
        min-height: auto;
        padding: 11px 12px;
        border: 1px solid var(--border);
        border-radius: 10px;
        border-bottom: 1px solid var(--border);
        /* 최소 160px 확보 + 남는 폭 분배 → 화면이 넓으면 한 줄에 2~4개가 들어간다. */
        flex: 1 1 160px;
      }
      .dsl-form-list-item.active {
        box-shadow: inset 0 -2px 0 var(--accent);
      }
      .dsl-form-detail {
        overflow: visible;
        padding: 14px;
        gap: 14px;
      }
      .dsl-form-toolbar {
        padding: 10px 12px;
      }
      .dsl-form-toolbar-actions {
        width: 100%;
        justify-content: flex-start;
      }
      .dsl-form-grid,
      .dsl-stat-grid,
      .monster-profile-layout {
        grid-template-columns: 1fr;
      }
      .dsl-choice-option-fields {
        grid-template-columns: 1fr;
      }
      .battle-preview-layout,
      .battle-preview-actions {
        grid-template-columns: 1fr;
      }
      .battle-preview-layout,
      .battle-preview-stage,
      .battle-preview-frame-wrap,
      .battle-preview-frame {
        min-height: auto;
      }
      .dsl-multi-select {
        grid-template-columns: 1fr;
      }
      #monaco-container {
        min-height: 520px;
      }
    }

    /* 모바일 본문 최적화. shell.css 의 모바일 셸 브레이크포인트와 동일하게 유지할 것. */
    @media (max-width: 860px) {
      /* iOS 는 16px 미만 입력에 포커스하면 자동 확대되고, 그 순간 페이지가 가로로 밀린다. */
      input, select, textarea,
      .dsl-field input, .dsl-field select, .dsl-field textarea,
      .accounts-toolbar input,
      .asset-toolbar input, .asset-toolbar select,
      .music-toolbar input, .music-upload-grid input, .music-binding-row select,
      .battle-preview-field input, .battle-preview-field select,
      .login-box input, #backup-json {
        font-size: 16px;
      }
      .dsl-field input, .dsl-field select, .dsl-field textarea,
      .accounts-toolbar input {
        min-height: 44px;
      }
      .dsl-field textarea { min-height: 120px; }
      .dsl-color-picker { min-height: 44px; }

      /* 고급 JSON(Monaco) 편집기: flex:1 만으론 모바일에서 부모 높이가 0이라 거의 안 보인다.
         화면 높이 기준으로 최소 높이를 직접 준다. */
      #panel-dsl .dsl-json-wrap { min-height: 70vh; }
      #panel-dsl #monaco-container { min-height: 62vh; }

      /* 터치 타겟 확보 */
      .btn, .btn-del, .dsl-section-toggle, .acct-detail-x {
        min-height: 40px;
      }
      .dsl-form-list-item, .asset-list-item, .music-track-item {
        min-height: 48px;
      }

      /* 긴 id·경로·URL 이 컨테이너를 밀어내지 않도록 */
      .dsl-form-list-title, .dsl-form-list-meta,
      .dsl-form-toolbar-title, .dsl-form-toolbar-subtitle,
      .dsl-field-label, .dsl-field-note, .dsl-readonly-note,
      .dsl-chip, .dsl-notice-text, .dsl-notice-path,
      .asset-list-name, .asset-list-meta, .asset-slot-url,
      .music-track-title, .music-track-meta,
      .acct-detail-kv, .acct-equip-row, .acct-job-chip,
      .backup-title, .backup-desc {
        overflow-wrap: anywhere;
        word-break: break-word;
      }

      /* 표는 페이지가 아니라 자기 래퍼 안에서만 가로 스크롤한다. */
      .table-scroll {
        max-width: 100%;
        overflow-x: auto;
      }

      .dsl-form-toolbar {
        flex-wrap: wrap;
      }
      .dsl-form-toolbar-actions {
        width: 100%;
        justify-content: flex-start;
        margin-left: 0;
      }
      .dsl-form-toolbar-actions .btn {
        flex: 1 1 0;
        min-width: 0;
        white-space: nowrap;
      }

      .help-frame {
        height: calc(100dvh - 190px);
        min-height: 60vh;
      }
    }

    @media (max-width: 640px) {
      .login-box {
        padding: 28px 20px;
      }
      body {
        height: auto;
      }
      .dsl-form-list {
        padding: 10px 12px;
      }
      .dsl-form-list-item {
        flex-basis: 100%;
        padding: 10px 11px;
      }
      .dsl-form-list-meta {
        display: none;
      }
      .dsl-form-detail {
        padding: 12px;
      }
      .dsl-form-section {
        padding: 14px;
      }
      #monaco-container {
        min-height: 62vh;
      }
      .accounts-toolbar {
        align-items: stretch;
      }
      .accounts-toolbar .btn,
      .backup-actions .btn,
      .backup-file-row input[type="file"] {
        width: 100%;
      }
      .accounts-count {
        width: 100%;
      }
      .accounts-table {
        display: block;
        min-width: 0;
      }
      .accounts-table thead {
        display: none;
      }
      .accounts-table tbody,
      .accounts-table tbody tr,
      .accounts-table tbody td {
        display: block;
        width: 100%;
      }
      .accounts-table tbody {
        display: grid;
        gap: 12px;
        padding: 12px;
      }
      .accounts-table tbody tr {
        display: grid;
        gap: 10px;
        padding: 12px;
        border-bottom: none;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--bg);
      }
      .accounts-table tbody td {
        display: grid;
        grid-template-columns: minmax(88px, 108px) minmax(0, 1fr);
        gap: 10px;
        padding: 0;
        align-items: start;
      }
      .accounts-table tbody td::before {
        content: attr(data-label);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--dim);
      }
      .accounts-table tbody td[data-label="Actions"] {
        grid-template-columns: 1fr;
      }
      .accounts-table tbody td[data-label="Actions"]::before {
        display: none;
      }
      .accounts-table tbody td[data-label="Actions"] .btn-del {
        width: 100%;
      }
      .backup-box,
      .battle-preview-card,
      .asset-detail-body,
      .music-bindings-body,
      .music-upload-body {
        padding-left: 14px;
        padding-right: 14px;
      }
      .battle-preview-frame-wrap,
      .battle-preview-frame {
        min-height: 360px;
      }
      .effect-inline-preview-frame-wrap {
        min-height: 220px;
      }

      /* 고정 폭 그리드를 모바일 폭에 맞춰 접는다(가로 밀림의 남은 원인들). */
      .acct-stat-grid,
      .acct-field-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .acct-job-edit-row,
      .acct-blood-edit-row {
        flex-wrap: wrap;
      }
      .acct-job-edit-name {
        flex: 1 0 100%;
      }
      .acct-input-sm {
        width: 68px;
      }
      .asset-slot-grid {
        grid-template-columns: minmax(0, 1fr);
      }
      .acct-detail-overlay {
        padding: 16px 12px calc(24px + env(safe-area-inset-bottom));
      }
      .acct-detail-card {
        padding: 16px 14px;
      }
      .acct-detail-foot {
        flex-wrap: wrap;
        gap: 8px 16px;
      }
      .acct-blood-name {
        width: 96px;
        font-size: 12px;
      }
      .acct-detail-kv,
      .acct-equip-row {
        gap: 8px;
      }
      .acct-detail-kv > span,
      .acct-equip-row > span {
        min-width: 0;
      }
      .monster-profile-layout,
      .dsl-choice-option-fields,
      .dsl-form-grid,
      .dsl-stat-grid {
        grid-template-columns: minmax(0, 1fr);
      }
      .dsl-multi-select {
        grid-template-columns: minmax(0, 1fr);
      }
      .backup-file-row input[type="file"] {
        max-width: 100%;
      }
      .help-frame {
        height: calc(100dvh - 210px);
      }
    }

    /* Empty / loading states */
    .empty-msg { color: var(--dim); font-size: 14px; padding: 40px 0; text-align: center; }
  

    /* 스킬 선택창 — 선택칩 + 분류탭 + 후보목록. 후보가 236개라 접힘 하나로는 못 고른다. */
    .dsl-skill-picker { display: flex; flex-direction: column; gap: 8px; }
    .dsl-skill-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 26px; align-items: center; }
    .dsl-skill-chip {
      display: inline-flex; align-items: stretch; border: 1px solid var(--border); border-radius: 999px;
      background: rgba(255,255,255,0.04); overflow: hidden;
    }
    .dsl-skill-chip.is-missing { border-color: #7a2b34; background: rgba(224,87,107,0.12); }
    .dsl-skill-chip-name {
      background: transparent; border: 0; color: var(--text); cursor: pointer;
      padding: 4px 10px; font-size: 12px; display: inline-flex; align-items: center; gap: 6px;
    }
    .dsl-skill-chip-name i { color: var(--dim); font-style: normal; font-size: 11px; }
    .dsl-skill-chip-name:hover { color: #f2d58b; }
    .dsl-skill-chip-x {
      background: transparent; border: 0; border-left: 1px solid var(--border); color: var(--dim);
      cursor: pointer; padding: 0 8px; font-size: 13px;
    }
    .dsl-skill-chip-x:hover { color: #ff9aa6; background: rgba(224,87,107,0.14); }
    .dsl-skill-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
    .dsl-skill-tab {
      background: transparent; border: 1px solid var(--border); border-radius: 6px; color: var(--dim);
      cursor: pointer; padding: 4px 10px; font-size: 12px;
    }
    .dsl-skill-tab:hover { color: var(--text); }
    .dsl-skill-tab.is-active { color: #0e1520; background: #f2d58b; border-color: #f2d58b; }

    /* 목록 필터 바 — 목록+상세 분할 화면 바로 위 한 줄(분류 탭 + 검색).
       분류를 메뉴로 가르지 않고 여기서 거른다(스킬 선택창과 같은 탭 스타일 재사용). */
    .dsl-list-filter {
      display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
      padding: 8px 0 10px; border-bottom: 1px solid var(--border); margin-bottom: 10px;
    }
    .dsl-list-filter .dsl-skill-tabs { flex: 1 1 auto; }
    .dsl-list-filter-search {
      flex: 0 1 240px; min-width: 140px; background: var(--panel-2, rgba(255,255,255,0.04));
      border: 1px solid var(--border); border-radius: 6px; color: var(--text);
      padding: 5px 10px; font-size: 12px;
    }
    @media (max-width: 860px) {
      .dsl-list-filter-search { flex: 1 1 100%; }
    }

    /* 디버프 메카닉 블록 — 켠 것만 하위 설정이 들여쓰기로 펼쳐진다. */
    .dsl-mech-block { border-top: 1px solid var(--border); padding: 8px 0; }
    .dsl-mech-block:first-of-type { border-top: 0; }
    .dsl-mech-block.is-on { background: rgba(242,213,139,0.04); border-radius: 8px; padding: 8px 10px; }
    .dsl-mech-body {
      margin: 6px 0 2px 16px; padding-left: 12px; border-left: 2px solid rgba(242,213,139,0.35);
    }