/* etm-widget — 재사용 가능한 HWP→마크다운 변환기 위젯
 * 콘텐츠 페이지 어디서든 <div data-etm-widget></div> 에 마운트한다.
 * 색 토큰은 :root 에 두어 페이지와 공유한다. */
:root {
  --bg: #0f1115; --panel: #171a21; --panel2: #1d2129; --line: #2a2f3a;
  --fg: #e6e9ef; --muted: #9aa3b2; --accent: #6d5dfc; --accent2: #00c2a8;
  --danger: #ff6b6b;
  /* 인터랙션 모션 토큰 — 페이지·위젯 공유(전역 a/카드/버튼/드롭존 전환에 사용). */
  --t-fast: 120ms; --t-base: 180ms; --ease: cubic-bezier(.2, .6, .2, 1);
}

.etm { color: var(--fg); }
.etm * { box-sizing: border-box; }

.etm .drop {
  border: 2px dashed var(--line); border-radius: 14px; padding: 40px 24px;
  text-align: center; transition: .15s; cursor: pointer; background: var(--panel);
}
.etm .drop.hover,
.etm .drop:hover { border-color: var(--accent); background: var(--panel2); }
.etm .drop h2 { margin: 0 0 6px; font-size: 18px; font-weight: 600; }
.etm .drop p { margin: 4px 0; color: var(--muted); font-size: 14px; }
.etm .iconrow { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 14px; }
.etm .ficon { display: block; filter: drop-shadow(0 4px 10px rgba(0,0,0,.35)); }
.etm .ficon.md { color: var(--fg); }
.etm .arrow2 { font-size: 26px; color: var(--accent); font-weight: 700; }

.etm .controls { display: flex; gap: 12px; align-items: center; margin: 18px 0; flex-wrap: wrap; }
.etm .controls label { color: var(--muted); font-size: 13px; }
.etm select, .etm button {
  background: var(--panel2); color: var(--fg); border: 1px solid var(--line);
  border-radius: 9px; padding: 9px 14px; font-size: 14px; cursor: pointer;
  font-family: inherit;
}
.etm button.primary { background: var(--accent); border-color: var(--accent); font-weight: 600; }
.etm button:disabled { opacity: .45; cursor: not-allowed; }

/* 버튼 인터랙션: hover 밝아짐 + 누르면 살짝 들어감(지금은 무반응이라 추가). */
.etm button {
  transition: border-color var(--t-fast) var(--ease), filter var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.etm button:not(:disabled):hover { border-color: var(--accent); filter: brightness(1.12); }
.etm button:not(:disabled):active { transform: translateY(1px) scale(.99); }

/* 위젯 키보드 포커스 링. */
.etm a:focus-visible, .etm button:focus-visible, .etm select:focus-visible,
.etm .drop:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* 모션 민감 사용자: 위젯 전환·이동 비활성. */
@media (prefers-reduced-motion: reduce) {
  .etm .drop, .etm button { transition: none; }
  .etm button:not(:disabled):active { transform: none; }
}

.etm .status { font-size: 13px; color: var(--muted); min-height: 20px; }
.etm .status.err { color: var(--danger); }
.etm .status.ok { color: var(--accent2); }

.etm .panes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 14px; }
@media (max-width: 820px) { .etm .panes { grid-template-columns: 1fr; } }
.etm .pane { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.etm .pane .head {
  padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 13px;
  color: var(--muted); display: flex; justify-content: space-between; align-items: center;
}
.etm .pane-actions { display: flex; gap: 8px; }
.etm .pane .head button { padding: 4px 10px; font-size: 12px; }
.etm .pane .body { padding: 16px; max-height: 70vh; overflow: auto; }

.etm .preview { color: var(--fg); font-size: 14px; }
.etm .preview table { border-collapse: collapse; margin: 12px 0; font-size: 13px; }
.etm .preview td, .etm .preview th { border: 1px solid var(--line); padding: 5px 9px; vertical-align: top; }
.etm .preview img { max-width: 100%; height: auto; border-radius: 6px; margin: 6px 0; }
.etm .preview h1, .etm .preview h2, .etm .preview h3 { letter-spacing: -0.01em; }

.etm .raw { white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; color: var(--muted); }

.etm .badge { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--panel2); border: 1px solid var(--line); color: var(--muted); }
.etm .hidden { display: none; }
.etm .privacy-note { color: var(--muted); font-size: 12px; margin-top: 14px; text-align: center; }