* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family:var(--font-base);
  background:var(--bg); color:var(--text); min-height:100vh;
}

.st-main {
  max-width:720px; margin:0 auto;
  padding:calc(var(--hd-h) + 48px) 24px 48px;
  display:flex; flex-direction:column; gap:24px;
}

.st-hero { text-align:center; padding:8px 0 8px; }
.st-hero-title {
  font-size:28px; font-weight:800; color:var(--heading); letter-spacing:-.02em;
}
.st-hero-sub {
  margin-top:8px; font-size:14px; color:var(--dim);
}

.st-card {
  background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius-xl);
  padding:28px; box-shadow:var(--shadow-1);
}

/* ── Tabs ── */
.st-tabs {
  display:flex; gap:0; border:1px solid var(--border); border-radius:var(--radius-lg);
  overflow:hidden; margin-bottom:20px;
}
.st-tab {
  flex:1; padding:10px 16px; font-size:13px; font-weight:600; cursor:pointer;
  border:none; background:var(--bg2); color:var(--dim); font-family:inherit;
  border-right:1px solid var(--border); transition:all .15s;
}
.st-tab:last-child { border-right:none; }
.st-tab.active { background:var(--accent); color:#fff; }
.st-tab:hover:not(.active) { background:var(--bg3); }
.st-tab:focus-visible {
  outline:none; position:relative; z-index:1;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent);
}
.st-tab:active { transform: scale(.98); }

/* ── Fields ── */
.st-field { margin-bottom:16px; }
.st-field label {
  display:block; font-size:12px; font-weight:700;
  color:var(--dim); margin-bottom:6px;
  text-transform:uppercase; letter-spacing:.04em;
}
.st-input {
  width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:var(--radius-lg);
  font-size:15px; font-family:inherit; color:var(--text); background:var(--bg);
  transition:border-color .15s, box-shadow .15s;
}
.st-input:focus {
  outline:none; border-color:var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
.st-hint { font-size:12px; color:var(--dim); margin-top:6px; }

/* ── Theme chips ── */
.st-chip-row { display:flex; flex-wrap:wrap; gap:8px; }
.st-chip {
  padding:6px 14px; border:1px solid var(--border); border-radius:20px;
  font-size:12px; font-weight:600; color:var(--dim); background:var(--bg2);
  cursor:pointer; font-family:inherit; transition:all .15s;
}
.st-chip:hover { border-color:var(--accent); color:var(--text); }
.st-chip.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.st-chip:focus-visible {
  outline:none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}
.st-chip:active { transform: scale(.96); }

/* 테마 칩 풀 셔플 — 컨테이너 + 새로고침 버튼 가로 배치 */
.st-chips-pool-row { display:flex; align-items:flex-start; gap:8px; margin-top:8px; }
.st-chips-pool-row .st-chip-row { flex:1 1 auto; min-width:0; }
.st-chips-refresh {
  flex:0 0 auto; padding:6px 11px; border:1px solid var(--border); border-radius:20px;
  font-size:14px; line-height:1; color:var(--dim); background:var(--bg2);
  cursor:pointer; font-family:inherit; transition:all .2s;
}
.st-chips-refresh:hover { border-color:var(--accent); color:var(--accent); transform: rotate(180deg); }
/* 제목 재생성은 LLM 비동기 호출 — 진행 중 비활성. (테마 새로고침은 로컬이라 비활성 없음) */
.st-chips-refresh:disabled { opacity:.5; cursor:not-allowed; }
.st-chips-refresh:disabled:hover { border-color:var(--border); color:var(--dim); transform:none; }

/* LLM 추론 중 제목 추천 자리에 깔리는 skeleton — shimmer 펄스로 "생성 중" 신호. */
.st-chip-skeleton {
  pointer-events:none; color:transparent;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--bg2) 70%, var(--border)) 0%,
    color-mix(in srgb, var(--bg2) 50%, var(--accent) 25%) 50%,
    color-mix(in srgb, var(--bg2) 70%, var(--border)) 100%);
  background-size: 200% 100%;
  border-color: var(--border);
  animation: stChipShimmer 1.2s ease-in-out infinite;
}
@keyframes stChipShimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: -100% 50%; }
}

/* 제목 추천 LLM 호출 실패 시 chip 영역 아래에 노출되는 에러 박스. */
.st-title-chips-status {
  margin-top:8px; padding:10px 12px;
  border:1px solid color-mix(in srgb, var(--del-text) 50%, var(--border));
  border-radius:10px;
  background:color-mix(in srgb, var(--del-text) 8%, var(--bg2));
  color:var(--text);
  font-size:12px; line-height:1.5;
}
.st-title-chips-status[hidden] { display:none; }
.st-title-chips-status .st-status-head {
  font-weight:700; color:var(--del-text); margin-bottom:4px;
}
.st-title-chips-status .st-status-detail {
  color:var(--dim); font-size:11px; word-break:break-word;
}

/* ── Submit row (two CTAs) ── */
.st-submit-row {
  display:flex; gap:10px; margin-top:12px;
}
.st-submit {
  flex:1;
  padding:14px;
  border:none; border-radius:var(--radius-lg);
  font-size:15px; font-weight:700; cursor:pointer; font-family:inherit;
  transition:filter .15s, background .15s, color .15s;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.st-submit-quick {
  background:var(--accent); color:#fff;
}
.st-submit-quick:hover { filter:brightness(1.08); }
.st-submit-wizard {
  background:var(--bg3); color:var(--text);
  border:1px solid var(--border);
}
.st-submit-wizard:hover { background:var(--bg2); border-color:var(--accent); color:var(--accent); }
.st-submit:focus-visible {
  outline:none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}
.st-submit:active:not(:disabled) { transform: scale(.985); }
.st-submit:disabled { opacity:.5; cursor:not-allowed; filter:none; }
.st-submit-sub {
  font-size:11px; font-weight:500; opacity:.85; margin-top:2px;
}
.st-submit-stack { display:flex; flex-direction:column; align-items:center; line-height:1.25; }

/* ── Submit 확인 모달 (start-entry 가 dynamic mount) ── */
.st-confirm-overlay {
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  animation:stConfirmFadeIn .15s ease;
}
@keyframes stConfirmFadeIn { from { opacity:0; } to { opacity:1; } }
.st-confirm-dialog {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--radius-xl); padding:24px 28px;
  width:min(420px, 92vw); box-shadow:var(--shadow-3);
  display:flex; flex-direction:column; gap:18px;
  animation:stConfirmSlideUp .2s ease;
}
@keyframes stConfirmSlideUp {
  from { transform:translateY(12px); opacity:0; }
  to { transform:translateY(0); opacity:1; }
}
.st-confirm-mode {
  display:flex; align-items:center; gap:10px;
  font-size:13px; font-weight:600; color:var(--dim);
  text-transform:uppercase; letter-spacing:.06em;
  padding-bottom:14px; border-bottom:1px solid var(--border);
}
.st-confirm-mode-emoji { font-size:20px; }
.st-confirm-title {
  font-size:22px; font-weight:800; color:var(--heading);
  letter-spacing:-.01em; line-height:1.3;
  text-align:center; padding:4px 0;
}
.st-confirm-tags {
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
}
.st-confirm-tag {
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 12px; border-radius:20px;
  background:var(--bg3); border:1px solid var(--border);
  font-size:12px; color:var(--text);
}
.st-confirm-actions {
  display:flex; gap:10px; margin-top:4px;
}
.st-confirm-btn {
  flex:1; padding:12px; border-radius:var(--radius-lg);
  font-size:14px; font-weight:700; cursor:pointer;
  font-family:inherit; border:none;
  transition:filter .15s, background .15s;
}
.st-confirm-btn-cancel {
  background:var(--bg3); color:var(--text); border:1px solid var(--border);
}
.st-confirm-btn-cancel:hover { background:var(--bg); }
.st-confirm-btn-ok {
  background:var(--accent); color:#fff;
}
.st-confirm-btn-ok:hover { filter:brightness(1.08); }
.st-confirm-btn:focus-visible {
  outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* ── Footnote ── */
.st-footnote {
  text-align:center; font-size:12px; color:var(--dim);
}
.st-footnote a {
  color:var(--accent); text-decoration:none; font-weight:600;
}
.st-footnote a:hover { text-decoration:underline; }

@media (max-width: 560px) {
  .st-submit-row { flex-direction:column; }
}