:root {
  --stackflow-bg: #f4f5f7;
  --stackflow-surface: #ffffff;
  --stackflow-text: #1a1d21;
  --stackflow-text-sub: #5b6470;
  --stackflow-accent: #3d5afe;
  --stackflow-border: #e2e5ea;
  --stackflow-mark: #8a93a2;
  --stackflow-shadow: rgba(26, 29, 33, 0.08);

  --stackflow-radius: 20px;
  --stackflow-gap: 18px;
  --stackflow-pad: clamp(28px, 6vw, 64px);
  --stackflow-inner-pad-y: clamp(36px, 8vw, 72px);
  --stackflow-maxw: 520px;
  --stackflow-minh: 100vh;
  --stackflow-mark-size: clamp(0.75rem, 2vw, 0.85rem);
  --stackflow-title-size: clamp(1.5rem, 5vw, 2.1rem);
  --stackflow-desc-size: clamp(0.95rem, 2.6vw, 1.05rem);
  --stackflow-note-size: clamp(0.78rem, 2vw, 0.85rem);
  --stackflow-track: 0.28em;
  --stackflow-track-note: 0.12em;
  --stackflow-note-pad-y: 10px;
  --stackflow-note-pad-x: 22px;
  --stackflow-pill: 999px;
  --stackflow-title-lh: 1.35;
  --stackflow-desc-lh: 1.7;
  --stackflow-shadow-y: 18px;
  --stackflow-shadow-blur: 50px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --stackflow-bg: #14161a;
    --stackflow-surface: #1d2026;
    --stackflow-text: #eef1f5;
    --stackflow-text-sub: #9aa4b2;
    --stackflow-accent: #7c8cff;
    --stackflow-border: #2a2f38;
    --stackflow-mark: #6b7482;
    --stackflow-shadow: rgba(0, 0, 0, 0.4);
  }
}

:root[data-theme="dark"] {
  --stackflow-bg: #14161a;
  --stackflow-surface: #1d2026;
  --stackflow-text: #eef1f5;
  --stackflow-text-sub: #9aa4b2;
  --stackflow-accent: #7c8cff;
  --stackflow-border: #2a2f38;
  --stackflow-mark: #6b7482;
  --stackflow-shadow: rgba(0, 0, 0, 0.4);
}

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

body {
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  background-color: var(--stackflow-bg);
  color: var(--stackflow-text);
  -webkit-font-smoothing: antialiased;
}

.stackflow-holding {
  width: 100%;
  min-height: var(--stackflow-minh);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--stackflow-pad);
}

.stackflow-holding-inner {
  width: min(var(--stackflow-maxw), 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--stackflow-gap);
  padding: var(--stackflow-inner-pad-y) var(--stackflow-pad);
  background-color: var(--stackflow-surface);
  border: 1px solid var(--stackflow-border);
  border-radius: var(--stackflow-radius);
  box-shadow: 0 var(--stackflow-shadow-y) var(--stackflow-shadow-blur) var(--stackflow-shadow);
}

.stackflow-holding-mark {
  font-size: var(--stackflow-mark-size);
  font-weight: 700;
  letter-spacing: var(--stackflow-track);
  color: var(--stackflow-mark);
}

.stackflow-holding-title {
  font-size: var(--stackflow-title-size);
  font-weight: 700;
  line-height: var(--stackflow-title-lh);
  color: var(--stackflow-text);
  word-break: keep-all;
}

.stackflow-holding-desc {
  font-size: var(--stackflow-desc-size);
  line-height: var(--stackflow-desc-lh);
  color: var(--stackflow-text-sub);
  word-break: keep-all;
}

.stackflow-holding-note {
  margin-top: var(--stackflow-gap);
  padding: var(--stackflow-note-pad-y) var(--stackflow-note-pad-x);
  font-size: var(--stackflow-note-size);
  font-weight: 600;
  letter-spacing: var(--stackflow-track-note);
  color: var(--stackflow-accent);
  border: 1px solid var(--stackflow-border);
  border-radius: var(--stackflow-pill);
}