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

    :root {
      --bg: #0d0b1a;
      --surface: #16132b;
      --surface2: #1e1a36;
      --accent: #7b2ff7;
      --accent2: #e0aaff;
      --text: #e2e8f0;
      --muted: #64748b;
      --border: #2a2350;
      --success: #34d399;
      --error: #f87171;
      --radius: 12px;
    }

    :root[data-theme="light"] {
      --bg: #f5f3ff;
      --surface: #ffffff;
      --surface2: #ede9fe;
      --accent: #7b2ff7;
      --accent2: #9333ea;
      --text: #1e1b4b;
      --muted: #6b7280;
      --border: #ddd6fe;
      --success: #059669;
      --error: #dc2626;
    }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: 'Pretendard', 'Noto Sans KR', system-ui, sans-serif;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }

    /* ── 헤더 ── */
    header {
      padding: 1.25rem 2rem;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .header-left {
      display: flex;
      align-items: center;
      gap: 0.6rem;
    }

    .header-right {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    header .logo {
      font-size: 1.4rem;
      font-weight: 700;
      background: linear-gradient(135deg, #7b2ff7, #c77dff, #f107a3);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    header .badge {
      font-size: 0.7rem;
      background: var(--surface2);
      color: var(--muted);
      padding: 2px 8px;
      border-radius: 20px;
      border: 1px solid var(--border);
    }

    footer {
      display: none;
    }

    .lang-dropdown-notice {
      font-size: 0.78rem;
      color: var(--muted);
      padding: 0.5rem 0.75rem 0.4rem;
      border-top: 1px solid var(--border);
      margin: 0.25rem 0 0;
      line-height: 1.5;
    }

    .lang-dropdown-notice a {
      color: var(--muted);
      text-decoration: underline;
    }

    .lang-dropdown-notice a:hover {
      color: var(--accent2);
    }

    main {
      flex: 1;
      max-width: 1400px;
      width: 100%;
      margin: 1.5rem auto;
      padding: 0 2rem 2rem;
    }

    /* ── 탭 (pill 스타일) ── */
    .tabs-wrap {
      display: flex;
      justify-content: center;
      margin-bottom: 1.25rem;
    }

    .tabs {
      display: inline-flex;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 99px;
      padding: 4px;
      gap: 2px;
    }

    .tab {
      padding: 0.6rem 1.6rem;
      border: none;
      background: none;
      color: var(--muted);
      cursor: pointer;
      font-size: 1rem;
      font-weight: 500;
      border-radius: 99px;
      transition: all 0.2s;
    }

    .tab.active {
      background: var(--surface2);
      color: var(--accent2);
    }

    .tab:not(.active):hover {
      color: var(--text);
    }

    .badge-experimental {
      display: inline-block;
      font-size: 0.6rem;
      font-weight: 600;
      letter-spacing: 0;
      padding: 1px 5px;
      border-radius: 4px;
      background: none;
      color: var(--muted);
      border: 1px solid var(--border);
      vertical-align: middle;
      position: relative;
      top: -3px;
      margin-left: 4px;
      line-height: 1.6;
    }

    .doc-experimental-note {
      font-size: 0.72rem;
      color: var(--muted);
      opacity: 0.55;
      line-height: 1.4;
      flex: 1;
      min-width: 0;
    }

    .panel { display: none; }
    .panel.active { display: block; }

    /* ── 공통 카드 (이미지/문서 탭용) ── */
    .card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 1.25rem;
      margin-bottom: 1rem;
    }

    .lang-row {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      margin-bottom: 1rem;
    }

    .lang-row label { font-size: 0.8rem; color: var(--muted); white-space: nowrap; }

    select, input[type="text"] {
      background: var(--surface2);
      border: 1px solid var(--border);
      color: var(--text);
      padding: 0.5rem 0.75rem;
      border-radius: 8px;
      font-size: 0.9rem;
      outline: none;
      transition: border-color 0.2s;
    }

    select:focus, input:focus { border-color: var(--accent); }

    .swap-btn {
      background: var(--surface);
      border: 1px solid var(--border);
      color: var(--muted);
      width: 34px;
      height: 34px;
      border-radius: 50%;
      cursor: pointer;
      font-size: 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
      flex-shrink: 0;
    }

    .swap-btn:hover { border-color: var(--accent); color: var(--accent2); }
    .swap-btn:disabled { opacity: 0.35; cursor: not-allowed; }
    .swap-btn:disabled:hover { border-color: var(--border); color: var(--text); }

    textarea {
      width: 100%;
      flex: 1;
      min-height: 260px;
      background: transparent;
      border: none;
      color: var(--text);
      padding: 1.25rem 1.75rem;
      font-size: 1.15rem;
      resize: none;
      outline: none;
      font-family: inherit;
      line-height: 1.65;
      overflow-y: auto;
    }

    #input-text {
      field-sizing: content;
      max-height: 600px;
    }

    #img-result {
      field-sizing: content;
      max-height: 600px;
    }

    textarea::placeholder { color: var(--muted); opacity: 0.45; }
    textarea[readonly] { color: var(--text); cursor: default; }

    .btn {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.6rem 1.4rem;
      border-radius: 8px;
      border: none;
      cursor: pointer;
      font-size: 0.9rem;
      font-weight: 600;
      transition: all 0.2s;
    }

    .btn-primary {
      background: linear-gradient(135deg, #7b2ff7, #f107a3);
      color: #fff;
    }

    .btn-primary:hover { opacity: 0.88; }
    .btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }

    .btn-secondary {
      background: var(--surface2);
      color: var(--text);
      border: 1px solid var(--border);
    }

    .btn-secondary:hover { border-color: var(--accent); }

    .actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      gap: 0.5rem;
      margin-top: 0.75rem;
    }

    .status {
      font-size: 0.8rem;
      padding: 0.3rem 0.75rem;
      border-radius: 6px;
      flex-shrink: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .status.loading { background: rgba(108,99,255,0.15); color: var(--accent2); }
    .status.success { background: rgba(52,211,153,0.1); color: var(--success); }
    .status.error { background: rgba(248,113,113,0.1); color: var(--error); }

    /* footer 내 인라인 status — 배경 없이 텍스트 색상만 */
    .status-inline {
      background: none !important;
      padding: 0 !important;
      border-radius: 0 !important;
      font-size: 0.82rem;
    }
    .status-inline.loading { color: var(--accent2); }
    .status-inline.success { color: var(--success); }
    .status-inline.error { color: var(--error); }

    @keyframes spin { to { transform: rotate(360deg); } }
    .spinner {
      display: inline-block;
      width: 12px; height: 12px;
      border: 2px solid currentColor;
      border-top-color: transparent;
      border-radius: 50%;
      animation: spin 0.7s linear infinite;
      vertical-align: middle;
      margin-right: 5px;
    }
    .btn:disabled { opacity: 0.5; cursor: not-allowed; }

    /* ── 번역 카드 (텍스트 탭 전용) ── */
    .translate-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      margin-bottom: 1rem;
      overflow: visible;
      position: relative;
      display: flex;
      flex-direction: column;
    }

    .translate-card-body {
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    /* ── 언어 헤더 (텍스트 탭) ── */
    .lang-header {
      display: flex;
      align-items: stretch;
      border-bottom: 1px solid var(--border);
      position: relative;
      z-index: 10;
    }

    .lang-header-side {
      display: flex;
      align-items: center;
      flex: 1;
      min-width: 0;
      position: relative;
    }

    .lang-header-side:first-child {
      border-right: 1px solid var(--border);
    }
    .lang-header-side.no-divider {
      border-right: none !important;
    }

    /* 스왑 버튼을 패널 분리선 중앙에 absolute 배치 */
    .lang-header-center {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 2;
    }

    /* 언어 선택 버튼 (커스텀 드롭다운 트리거) */
    .lang-btn {
      display: flex;
      align-items: center;
      gap: 0.4rem;
      padding: 1.1rem 1.75rem;
      background: none;
      border: none;
      font-size: 1.05rem;
      font-weight: 600;
      color: var(--text);
      cursor: pointer;
      transition: color 0.15s;
      white-space: nowrap;
      width: 100%;
    }

    .lang-btn:hover { color: var(--accent2); }
    .lang-btn.open { color: var(--accent2); }

    .lang-btn svg {
      flex-shrink: 0;
      transition: transform 0.2s;
    }

    .lang-btn.open svg { transform: rotate(180deg); }

    /* 언어 선택 드롭다운 패널 */
    .lang-dropdown {
      display: none;
      position: absolute;
      top: calc(100% + 1px);
      left: -1px;
      right: -1px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-top: none;
      border-radius: 0 0 var(--radius) var(--radius);
      z-index: 50;
      padding: 1rem 1.25rem 1.25rem;
      box-shadow: 0 8px 24px rgba(0,0,0,0.12);
      max-height: 60vh;
      overflow-y: auto;
    }

    .lang-dropdown.open { display: block; }

    .lang-dropdown-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0.1rem 0;
    }

    .lang-option {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.6rem 0.5rem;
      font-size: 0.95rem;
      color: var(--text);
      cursor: pointer;
      border-radius: 6px;
      transition: background 0.15s;
      background: none;
      border: none;
      text-align: left;
      width: 100%;
    }

    .lang-option:hover { background: var(--surface2); }

    .lang-option.selected {
      color: var(--accent2);
      font-weight: 600;
    }

    .lang-option .check-icon {
      width: 14px;
      flex-shrink: 0;
      opacity: 0;
    }

    .lang-option.selected .check-icon { opacity: 1; }

    .lang-option.disabled {
      opacity: 0.35;
      cursor: not-allowed;
      pointer-events: none;
    }

    .panels {
      display: flex;
      flex: 1;
    }

    .panel-divider {
      background: var(--border);
      width: 1px;
      flex-shrink: 0;
    }

    .panel-source,
    .panel-target {
      display: flex;
      flex-direction: column;
      flex: 1;
      min-width: 0;
      align-self: stretch;
    }

    .panel-target {
      overflow: hidden;
    }

    .panel-footer {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0 1rem;
      border-top: 1px solid var(--border);
      height: 52px;
      min-height: 52px;
      max-height: 52px;
      flex-shrink: 0;
      overflow: hidden;
      flex-wrap: nowrap;
    }

    .char-count {
      font-size: 0.78rem;
      color: var(--muted);
      flex-shrink: 0;
    }

    .char-count.over { color: var(--error); }


    .panel-footer .btn-translate {
      margin-left: auto;
    }

    .panel-footer .status-inline {
      font-size: 0.78rem;
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* ── 복사 버튼 ── */
    .copy-btn {
      background: none;
      border: 1px solid var(--border);
      color: var(--muted);
      width: 28px;
      height: 28px;
      padding: 0;
      border-radius: 6px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
      flex-shrink: 0;
    }

    .copy-btn:hover { border-color: var(--accent); color: var(--accent2); }

    /* ── 이미지 탭 ── */
    .drop-zone {
      border: 2px dashed var(--border);
      border-radius: 4px;
      padding: 2rem;
      text-align: center;
      cursor: pointer;
      transition: all 0.2s;
      background: var(--surface2);
      flex: 1;
      min-height: 260px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .drop-zone:hover, .drop-zone.drag-over {
      border-color: var(--accent);
      background: rgba(108,99,255,0.05);
    }

    .drop-zone .icon { font-size: 2.5rem; margin-bottom: 0.5rem; }
    .drop-icon { margin-bottom: 0.75rem; }
    .drop-icon svg { width: 48px; height: 48px; }
    .drop-zone p { color: var(--muted); font-size: 0.9rem; }
    .drop-zone input { display: none; }
    .drop-zone-actions { margin-top: 1.25rem; display: flex; gap: 0.5rem; justify-content: center; }

    .preview-wrap {
      display: none;
      flex: 1;
    }

    .preview-wrap.visible { display: flex; }

    .preview-wrap img {
      width: 100%;
      max-height: 300px;
      object-fit: contain;
      border-radius: 8px;
    }

    .img-remove-btn {
      position: absolute;
      top: 6px;
      right: 6px;
      width: 28px;
      height: 28px;
      border-radius: 6px;
      background: var(--surface2);
      border: 1px solid var(--border);
      color: var(--muted);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s, color 0.15s;
      z-index: 1;
    }
    .img-remove-btn:hover { background: var(--border); color: var(--text); }

    .text-clear-btn {
      position: absolute;
      top: 14px;
      right: 14px;
      width: 28px;
      height: 28px;
      border-radius: 6px;
      background: var(--surface2);
      border: 1px solid var(--border);
      color: var(--muted);
      cursor: pointer;
      display: none;
      align-items: center;
      justify-content: center;
      transition: background 0.15s, color 0.15s;
      z-index: 1;
    }
    .text-clear-btn:hover { background: var(--border); color: var(--text); }
    .text-clear-btn.visible { display: flex; }

    .text-copy-btn {
      position: absolute;
      top: 14px;
      right: 14px;
      width: 28px;
      height: 28px;
      border-radius: 6px;
      background: var(--surface2);
      border: 1px solid var(--border);
      color: var(--muted);
      cursor: pointer;
      display: none;
      align-items: center;
      justify-content: center;
      transition: background 0.15s, color 0.15s;
      z-index: 1;
    }
    .text-copy-btn:hover { background: var(--border); color: var(--text); }
    .text-copy-btn.visible { display: flex; }

    .tts-btn {
      position: absolute;
      top: 50px;
      right: 14px;
      width: 28px;
      height: 28px;
      border-radius: 6px;
      background: var(--surface2);
      border: 1px solid var(--border);
      color: var(--muted);
      cursor: pointer;
      display: none;
      align-items: center;
      justify-content: center;
      transition: background 0.15s, color 0.15s;
      z-index: 1;
    }
    .tts-btn:hover { background: var(--border); color: var(--text); }
    .tts-btn.visible { display: flex; }
    .tts-btn.playing { color: var(--accent); border-color: var(--accent); }


    .img-result-tabs {
      display: flex;
      gap: 0;
      border-bottom: 1px solid var(--border);
      padding: 0 1rem;
      flex-shrink: 0;
    }

    .img-result-tab {
      background: none;
      border: none;
      border-bottom: 2px solid transparent;
      color: var(--muted);
      font-size: 0.8rem;
      cursor: pointer;
      padding: 0.5rem 0.75rem;
      margin-bottom: -1px;
      transition: color 0.15s, border-color 0.15s;
    }

    .img-result-tab.active {
      color: var(--accent2);
      border-bottom-color: var(--accent2);
    }


    .img-result-preview, .text-result-preview {
      flex: 1;
      padding: 1.25rem 1.5rem;
      font-size: 0.95rem;
      line-height: 1.7;
      color: var(--text);
      overflow-y: auto;
      max-height: 600px;
    }

    .img-result-preview h1, .img-result-preview h2, .img-result-preview h3,
    .text-result-preview h1, .text-result-preview h2, .text-result-preview h3 {
      margin: 0.75rem 0 0.4rem;
      font-weight: 600;
    }

    .img-result-preview p, .text-result-preview p { margin: 0.4rem 0; }
    .img-result-preview ul, .img-result-preview ol,
    .text-result-preview ul, .text-result-preview ol { padding-left: 1.5rem; margin: 0.4rem 0; }
    .img-result-preview code, .text-result-preview code {
      background: var(--surface2);
      border-radius: 3px;
      padding: 0.1em 0.3em;
      font-size: 0.88em;
    }
    .img-result-preview pre, .text-result-preview pre {
      background: var(--surface2);
      border-radius: 6px;
      padding: 0.75rem 1rem;
      overflow-x: auto;
    }
    .img-result-preview pre code, .text-result-preview pre code { background: none; padding: 0; }
    .img-result-preview table, .text-result-preview table {
      border-collapse: collapse;
      width: 100%;
      margin: 0.75rem 0;
      font-size: 0.9em;
    }
    .img-result-preview th, .img-result-preview td,
    .text-result-preview th, .text-result-preview td {
      border: 1px solid var(--border);
      padding: 0.4rem 0.75rem;
      text-align: left;
    }
    .img-result-preview th, .text-result-preview th {
      background: var(--surface2);
      font-weight: 600;
    }
    .img-result-preview tr:nth-child(even) td, .text-result-preview tr:nth-child(even) td {
      background: var(--surface2);
    }

    /* ── 문서 탭 ── */

    .file-selected {
      display: none;
    }
    .file-selected.visible {
      display: flex;
      flex: 1;
      align-self: stretch;
      align-items: center;
      justify-content: center;
      padding: 1.25rem 1.5rem;
      position: relative;
    }
    .file-cover {
      position: relative;
      width: 230px;
      height: 300px;
      border-radius: 4px 14px 14px 4px;
      background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
      box-shadow: -6px 0 0 rgba(0,0,0,0.15), 8px 10px 28px rgba(0,0,0,0.28);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 1.5rem 1.25rem;
      gap: 0.75rem;
      overflow: hidden;
    }
    .file-cover::before {
      content: '';
      position: absolute;
      left: 0; top: 0; bottom: 0;
      width: 10px;
      background: rgba(0,0,0,0.18);
      border-radius: 4px 0 0 4px;
    }
    .file-cover .cover-ext {
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      color: rgba(255,255,255,0.85);
      text-transform: uppercase;
      background: rgba(0,0,0,0.22);
      padding: 3px 8px;
      border-radius: 4px;
    }
    .file-cover .cover-title {
      font-size: 0.82rem;
      font-weight: 600;
      color: #fff;
      text-align: center;
      word-break: break-all;
      line-height: 1.45;
      max-height: 11.6em;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 8;
      -webkit-box-orient: vertical;
    }
    .file-cover .cover-size {
      font-size: 0.68rem;
      color: rgba(255,255,255,0.55);
      margin-top: auto;
    }
    .file-selected .btn-remove {
      position: absolute;
      top: 6px;
      right: 6px;
      width: 28px;
      height: 28px;
      border-radius: 6px;
      background: var(--surface2);
      border: 1px solid var(--border);
      color: var(--muted);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s, color 0.15s;
      z-index: 1;
    }
    .file-selected .btn-remove:hover { background: var(--border); color: var(--text); }

    /* ── 가이드 버튼 / 테마 버튼 ── */
    .guide-btn,
    .theme-btn {
      background: var(--surface2);
      border: 1px solid var(--border);
      color: var(--muted);
      width: 32px;
      height: 32px;
      border-radius: 50%;
      cursor: pointer;
      font-size: 0.9rem;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
      flex-shrink: 0;
    }

    .guide-btn:hover,
    .theme-btn:hover { border-color: var(--accent); color: var(--accent2); }

    /* ── 오버레이 ── */
    .guide-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.45);
      z-index: 100;
    }

    .guide-overlay.open { display: block; }

    /* ── 사이드 패널 ── */
    .guide-panel {
      position: fixed;
      top: 0;
      right: 0;
      height: 100%;
      width: 480px;
      background: var(--surface);
      border-left: 1px solid var(--border);
      z-index: 101;
      display: flex;
      flex-direction: column;
      transform: translateX(100%);
      transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
      overflow: hidden;
    }

    .guide-panel.open { transform: translateX(0); }

    @media (max-width: 600px) {
      .guide-panel { width: 100vw; }
    }

    /* ── 모바일 반응형 (≤640px) ── */
    @media (max-width: 640px) {
      .guide-btn,
      .guide-overlay,
      .guide-panel { display: none !important; }
    }
    @media (max-width: 640px) {
      main {
        padding: 0 0.75rem 1.5rem;
        margin: 1rem auto;
      }


      /* 탭 바 전체 숨김 */
      .tabs-wrap {
        display: none;
      }

      /* 언어 헤더 — 스왑 버튼 absolute 해제, flex 인라인 배치 */
      .lang-header {
        position: static;
      }

      .lang-header-side:first-child {
        border-right: none;
      }

      .lang-header-center {
        position: static;
        transform: none;
        flex-shrink: 0;
        align-self: center;
      }

      .lang-btn {
        width: auto;
      }

      /* 텍스트 탭 — 입출력 세로 스택 */
      .panels {
        flex-direction: column;
      }

      .panel-divider {
        width: 100%;
        height: 1px;
      }

      textarea {
        min-height: 140px;
        font-size: 1rem;
        padding: 1rem 1.25rem;
      }

      /* 다운로드 버튼 숨김 */
      #text-download-btn {
        display: none !important;
      }

      /* 언어 드롭다운 — 전체 너비, 1열, 높이 제한 */
      .lang-dropdown {
        left: 0;
        right: 0;
        max-height: 45vh;
      }

      .lang-dropdown-grid {
        grid-template-columns: 1fr;
      }
    }

    .guide-panel-header {
      display: flex;
      align-items: center;
      padding: 1rem 1.25rem;
      border-bottom: 1px solid var(--border);
      gap: 0.5rem;
      flex-shrink: 0;
    }

    .guide-panel-header .guide-title {
      font-size: 0.95rem;
      font-weight: 600;
      color: var(--text);
    }

    .guide-close-btn {
      margin-left: auto;
      background: none;
      border: none;
      color: var(--muted);
      cursor: pointer;
      font-size: 1.2rem;
      line-height: 1;
      padding: 4px;
      border-radius: 4px;
      transition: color 0.2s;
    }

    .guide-close-btn:hover { color: var(--text); }

    /* 패널 내 탭 */
    .guide-tabs {
      display: flex;
      gap: 0.25rem;
      padding: 0.75rem 1.25rem 0;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }

    .guide-tab {
      padding: 0.45rem 0.9rem;
      border: none;
      background: none;
      color: var(--muted);
      cursor: pointer;
      font-size: 0.82rem;
      border-bottom: 2px solid transparent;
      transition: all 0.2s;
    }

    .guide-tab.active {
      color: var(--accent2);
      border-bottom-color: var(--accent2);
    }

    /* 패널 콘텐츠 영역 */
    .guide-body {
      flex: 1;
      overflow-y: auto;
      padding: 1.25rem;
    }

    .guide-section { display: none; }
    .guide-section.active { display: block; }

    .guide-section h3 {
      font-size: 0.8rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--accent2);
      margin: 1.25rem 0 0.5rem;
    }

    .guide-section h3:first-child { margin-top: 0; }

    .guide-section p {
      font-size: 0.85rem;
      color: var(--muted);
      line-height: 1.6;
      margin-bottom: 0.75rem;
    }

    /* 코드 블록 */
    .code-wrap {
      position: relative;
      margin-bottom: 1rem;
    }

    .code-wrap pre {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 0.85rem 1rem;
      font-size: 0.75rem;
      line-height: 1.55;
      overflow-x: auto;
      white-space: pre;
      color: var(--text);
      font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', ui-monospace, monospace;
    }

    .code-copy-btn {
      position: absolute;
      top: 6px;
      right: 6px;
      background: var(--surface);
      border: 1px solid var(--border);
      color: var(--muted);
      width: 26px;
      height: 26px;
      padding: 0;
      border-radius: 5px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
    }

    .code-copy-btn:hover { border-color: var(--accent); color: var(--accent2); }

    .guide-divider {
      border: none;
      border-top: 1px solid var(--border);
      margin: 1.25rem 0;
    }