/* 짱깸뽀 — 소개 / 개인정보처리방침 공용 스타일 (기계 화면용 style.css와 분리) */
:root {
  --bg: #0b0a0d;
  --wood-1: #6b4529; --wood-2: #4a2d18; --wood-3: #3d2212;
  --enamel-1: #ff4a4f; --enamel-2: #e3262d; --enamel-3: #c21a21; --enamel-rim: #6e0b0f;
  --neon-pink: #ff2d75; --neon-pink-soft: #ff8aa6;
  --neon-yellow: #ffe84a; --neon-amber: #ffb43a;
  --ui-surface: #17131b; --ui-surface-2: #201a26; --ui-line: #34293d;
  --ui-text: #eadff0; --ui-text-dim: #8d8197;
  --display: "Black Han Sans", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --mono: "Share Tech Mono", ui-monospace, monospace;
  --body: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: dark; }
body {
  margin: 0; min-height: 100vh;
  background: radial-gradient(120% 60% at 50% 0%, #1a1220 0%, var(--bg) 60%) fixed, var(--bg);
  color: var(--ui-text); font-family: var(--body);
  font-size: 16px; line-height: 1.7; word-break: keep-all; overflow-wrap: break-word;
  padding: 0 max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
a { color: var(--neon-amber); text-underline-offset: 3px; text-decoration-color: rgba(255,180,58,.4); }
a:hover, a:focus-visible { color: var(--neon-yellow); text-decoration-color: currentColor; }
a:focus-visible { outline: 2px solid var(--neon-pink); outline-offset: 3px; border-radius: 2px; }

.topbar, .doc, .pfoot { max-width: 640px; margin-inline: auto; }
.topbar {
  padding-top: max(10px, env(safe-area-inset-top)); padding-bottom: 10px;
  border-bottom: 1px solid var(--ui-line); position: relative;
}
.topbar::after { /* 캐비닛 목재 느낌의 가는 선 */
  content: ""; position: absolute; left: 0; bottom: -1px; width: 56px; height: 3px;
  background: linear-gradient(90deg, var(--wood-1), var(--wood-3));
}
.topbar a {
  display: inline-block; padding: 8px 0; font-size: 14px; color: var(--ui-text-dim); text-decoration: none;
}
.topbar a:hover, .topbar a:focus-visible { color: var(--ui-text); }

.doc { padding-top: 36px; }
h1, h2 { font-family: var(--display); font-weight: 400; line-height: 1.3; margin: 0; }
h1 {
  font-size: 34px; letter-spacing: 2px; color: #fff;
  text-shadow: 0 0 6px var(--neon-pink-soft), 0 0 16px var(--neon-pink), 0 0 32px rgba(255,45,117,.6), 2px 2px 0 #5a0a22;
}
h1::after {
  content: ""; display: block; width: 64px; height: 4px; margin-top: 16px; border-radius: 2px;
  background: linear-gradient(90deg, var(--enamel-1), var(--enamel-3)); box-shadow: 0 0 0 1px var(--enamel-rim);
}
.lead { margin: 22px 0 0; font-size: 17px; color: var(--ui-text); }
.meta { margin: 6px 0 0; font-family: var(--mono); font-size: 13px; letter-spacing: 1px; color: var(--ui-text-dim); }

section { margin-top: 38px; }
h2 {
  display: flex; align-items: center; gap: 10px; font-size: 20px; color: #fff3d6; margin-bottom: 10px;
}
h2::before {
  content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--enamel-2); box-shadow: 0 0 0 2px var(--enamel-rim), 0 0 8px rgba(255,74,79,.7);
}
p { margin: 0 0 14px; color: #d9cde0; }
ul { margin: 0 0 14px; padding-left: 20px; color: #d9cde0; }
li { margin-bottom: 8px; padding-left: 2px; }
li::marker { color: var(--enamel-1); }
b { color: var(--ui-text); font-weight: 700; }
.steps { counter-reset: s; list-style: none; padding: 0; }
.steps li {
  counter-increment: s; position: relative; margin: 0 0 10px; padding: 12px 14px 12px 52px;
  background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: 10px;
}
.steps li::before {
  content: counter(s); position: absolute; left: 14px; top: 12px; width: 26px; height: 26px;
  display: grid; place-items: center; border-radius: 50%;
  font-family: var(--mono); font-size: 15px; line-height: 1; color: #fff;
  background: linear-gradient(170deg, var(--enamel-1), var(--enamel-3)); box-shadow: 0 0 0 2px var(--enamel-rim);
}
kbd {
  font-family: var(--mono); font-size: 13px; padding: 1px 7px; border-radius: 5px;
  color: var(--neon-yellow); background: var(--ui-surface-2); border: 1px solid var(--ui-line); border-bottom-width: 2px;
}

.pfoot { margin-top: 56px; padding-top: 18px; border-top: 1px solid var(--ui-line); text-align: center; }
.pfoot nav { display: flex; justify-content: center; align-items: center; gap: 2px; color: var(--ui-text-dim); font-size: 13px; }
.pfoot nav a { padding: 8px; color: var(--ui-text-dim); text-decoration: none; }
.pfoot nav a:hover, .pfoot nav a:focus-visible { color: var(--ui-text); text-decoration: underline; }
.pfoot nav a[aria-current] { color: var(--neon-amber); }
.pfoot p { margin: 4px 0 0; font-size: 12px; color: #6c6575; }

@media (min-width: 560px) {
  body { font-size: 17px; }
  h1 { font-size: 40px; }
  .doc { padding-top: 52px; }
}