@charset "utf-8";

/* =========================
   Design Tokens (CSS vars)
   /mini/style.css 
========================= */
:root {
  --mini-bg:#fff;
  --mini-surface:#fff;
  --mini-border:#e5e7eb;
  --mini-shadow:0 3px 10px rgba(0,0,0,.04);

  --mini-text:#111827;
  --mini-muted:#475569;
  --mini-muted-2:#6b7280;

  --mini-link:#2563eb;
  --mini-link-strong:#1d4ed8;

  --mini-primary:#2563eb;
  --mini-primary-strong:#1d4ed8;

  --mini-gray-300:#d1d5db;
  --mini-gray-200:#e5e7eb;
}

/* =========================
   Global Mini Shell Layout
========================= */
.mini-shell {
  width:100%;
  max-width:none;
  margin:20px 0;
  padding:0;
  box-sizing:border-box;
}
.mini-header {
  display:flex;
  align-items:flex-start;
  gap:24px;
}
.mini-sub { color:#64748b; margin-bottom:8px; }
.mini-intro { color:#475569; }

/* =========================
   mini-actions 기본 레이아웃만 공통
   (버튼 디자인은 테마에서 구현)
========================= */
.mini-actions {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:20px;
}
.mini-action-wrap {
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin:15px 0 20px;
  flex-wrap:wrap;
}

/* =========================
   Settings Form (공통)
========================= */
.mini-settings-wrap {
  width:100%;
  max-width:none;
  margin:20px 0;
  background:var(--mini-bg);
  border:1px solid var(--mini-border);
  border-radius:12px;
  padding:24px;
  box-shadow:var(--mini-shadow);
}
.mini-settings-wrap h2 {
  font-size:20px;
  font-weight:700;
  margin-bottom:22px;
  display:flex;
  align-items:baseline;
  gap:8px;
}
.mini-settings-form {
  display:grid;
  gap:16px;
}
.mini-form-row, .form-row {
  display:grid;
  gap:8px;
}
.mini-settings-form label {
  font-size:13px;
  color:#374151;
  font-weight:600;
}

/* 기본 input / textarea */
.mini-settings-form input[type="text"],
.mini-settings-form textarea {
  width:100%;
  border:1px solid #d1d5db;
  border-radius:10px;
  padding:10px 12px;
  font-size:14px;
  background:#f9fafb;
  transition:border-color .15s, background .15s, box-shadow .15s;
}
.mini-settings-form textarea { min-height:120px; }

/* focus */
.mini-settings-form :is(input[type="text"],textarea):focus {
  outline:none;
  background:#fff;
  border-color:#60a5fa;
  box-shadow:0 0 0 3px rgba(37,99,235,.15);
}

/* select (공통) */
.mini-settings-form select,
.mini-create select {
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:44px;
  padding:0 44px 0 12px;
  border:1px solid #d1d5db;
  border-radius:10px;
  background:#fff
    url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%2364748b' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat right 12px center;
  font-size:14px;
  color:#111827;
  transition:border-color .15s, box-shadow .15s, background-color .15s;
}
.mini-settings-form select:hover,
.mini-create select:hover {
  border-color:#c3d0ea;
}
.mini-settings-form select:focus,
.mini-create select:focus {
  border-color:#60a5fa;
  box-shadow:0 0 0 3px rgba(37,99,235,.15);
}
.mini-settings-form select:disabled {
  background:#f3f4f6;
  color:#9ca3af;
}

/* hint */
.mini-hint {
  background:#f1f5f9;
  border:1px dashed #cbd5e1;
  border-radius:10px;
  padding:10px 12px;
  font-size:12px;
  color:#64748b;
}
.mini-hint--warn {
  background:#fef2f2;
  border-color:#fecaca;
  color:#b91c1c;
}
.mini-hint--ok {
  background:#ecfdf5;
  border-color:#a7f3d0;
  color:#065f46;
}

/* =========================
   Mini Error (공통 오류 화면)
========================= */
.mini-error {
    max-width: 720px;
    margin: 60px auto;
    padding: 32px 28px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 3px 10px rgba(0,0,0,.05);
    text-align: center;
}

.mini-error h2 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #111;
}

.mini-error .mini-error-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 10px 22px;
    font-size: 16px;
    font-weight: 600;

    background: #2563eb;
    border: 1px solid #1d4ed8;
    color: #fff;
    border-radius: 8px;

    transition: background .18s ease;
    cursor: pointer;
    text-decoration: none;
}

.mini-error .mini-error-btn:hover {
    background: #1d4ed8;
}

/* =========================
   Pretty URL Modal (공통)
========================= */
#prettyGuideModal {
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.4);
  z-index:9999;
}
#prettyGuideModal .modal-content {
  background:#fff;
  border-radius:10px;
  max-width:720px;
  width:90%;
  padding:24px 28px;
  box-shadow:0 3px 10px rgba(0,0,0,.15);
  position:relative;
}
#prettyGuideModal h3 { font-size:18px; font-weight:600; }
#prettyGuideModal h4 {
  font-size:15px;
  font-weight:600;
  color:#2563eb;
  margin:14px 0 6px;
}
#prettyGuideModal pre {
  background:#f8fafc;
  padding:12px;
  border-radius:6px;
  border:1px solid #e5e7eb;
  font-size:13px;
  line-height:1.5;
  overflow-x:auto;
}
#prettyGuideModal .copy-btn {
  margin-top:6px;
  background:#e0e7ff;
  color:#1e3a8a;
  border:1px solid #c7d2fe;
  border-radius:4px;
  padding:4px 10px;
  font-size:12px;
  cursor:pointer;
}
#prettyGuideModal .copy-btn:hover {
  background:#c7d2fe;
}

/* Close button */
#btnCloseGuide {
  background:#374151;
  color:#fff;
  border-radius:5px;
  border:none;
  padding:7px 16px;
  cursor:pointer;
}
#btnCloseGuide:hover { background:#111827; }

/* =========================
   Guide Page (공통)
========================= */
.mini-guide {
  max-width:860px;
  margin:40px auto 48px;
  text-align:center;
  background:var(--mini-bg);
  border:1px solid var(--mini-border);
  border-radius:14px;
  padding:32px 28px;
  box-shadow:var(--mini-shadow);
}
.mini-guide h2 { font-size:26px; font-weight:700; margin-bottom:12px; }
.mini-guide p.lead { font-size:16px; color:var(--mini-muted); }

.mini-guide .mini-search {
  margin-top:14px;
  display:flex;
  justify-content:center;
  gap:8px;
}
.mini-guide .mini-input {
  width:260px;
  height:42px;
  padding:0 12px;
  border:1px solid var(--mini-gray-300);
  border-radius:10px;
  font-size:15px;
  transition:box-shadow .15s, border-color .15s;
}
.mini-guide .mini-input:focus {
  border-color:var(--mini-primary);
  box-shadow:0 0 0 3px rgba(59,130,246,.15);
}
.mini-guide .mini-btn {
  height:42px;
  padding:0 18px;
  background:var(--mini-primary);
  color:#fff;
  border-radius:10px;
  font-weight:600;
  border:1px solid var(--mini-primary-strong);
}
.mini-guide .hint {
  margin-top:12px;
  font-size:13px;
  color:var(--mini-muted-2);
}

/* =========================
   Create Page (공통)
========================= */
.mini-create {
  max-width:600px;
  margin:40px auto;
  padding:30px;
  background:#fff;
  border:1px solid #e5e5e5;
  border-radius:12px;
  box-shadow:0 3px 10px rgba(0,0,0,.05);
}
.mini-create h2 {
  font-size:1.6rem;
  font-weight:700;
  text-align:center;
  padding-bottom:10px;
  margin-bottom:25px;
  border-bottom:2px solid #444;
}
.mini-create form { display:flex; flex-direction:column; gap:20px; }
.mini-create label { font-weight:600; color:#444; }

/* ========== Dark mode ========= */
@media (prefers-color-scheme: dark) {
  :root {
    --mini-bg:#0b0f14;
    --mini-surface:#0f141a;
    --mini-border:#1f2937;
    --mini-text:#e5e7eb;
    --mini-muted:#9aa3af;
  }
  .mini-create,
  .mini-guide,
  .mini-settings-wrap {
    background:var(--mini-surface);
    border-color:var(--mini-border);
  }
}