/* 안내 페이지 공용 스타일.
   홈페이지(index.html)의 색·모양 토큰을 그대로 가져왔다. 홈페이지는 건드리지 않는다.
   글 위주의 페이지라 홈보다 훨씬 단순하게 간다. */

:root{
  color-scheme: only light;
  --bg:#F5F7FB;
  --surface:#FFFFFF;
  --surface-2:#EEF2F8;
  --ink:#0B1220;
  --ink-2:#1E2A3B;
  --muted:#5C6B82;
  --muted-2:#8794A8;
  --line:#E4E9F2;
  --brand:#D62E63;
  --brand-ink:#8E1540;
  --brand-soft:#FFECF2;
  --accent:#FF7A1A;
  --ok:#10B981;
  --radius-lg:28px;
  --radius-md:18px;
  --radius-sm:12px;
  --shadow-sm:0 1px 2px rgba(11,18,32,.04), 0 4px 12px rgba(11,18,32,.04);
  --shadow-md:0 10px 30px rgba(11,18,32,.08), 0 2px 8px rgba(11,18,32,.04);
  --f-sans:"Pretendard Variable", Pretendard, -apple-system, system-ui, sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-sans);
  font-size:17px;
  line-height:1.75;
  letter-spacing:-0.01em;
  word-break:keep-all;      /* 한글이 단어 중간에서 끊기지 않게 */
}
img{max-width:100%;height:auto}

.wrap{max-width:760px;margin:0 auto;padding:0 20px}

/* 상단 바 — 홈으로 돌아갈 길을 항상 열어 둔다 */
.top{
  position:sticky;top:0;z-index:10;
  background:rgba(255,255,255,.88);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.top .wrap{display:flex;align-items:center;gap:12px;height:58px}
.top a.home{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);font-weight:800}
.top a.home img{width:26px;height:26px;border-radius:7px}
.top .sp{flex:1}
.top a.cta{
  text-decoration:none;font-weight:700;font-size:14px;
  color:#fff;background:var(--brand);
  padding:9px 15px;border-radius:999px;white-space:nowrap;
}

/* 빵부스러기 — 검색엔진에도 사람에도 현재 위치를 알려준다 */
.crumb{font-size:13.5px;color:var(--muted-2);margin:22px 0 0}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{text-decoration:underline}

main{padding-bottom:64px}
h1{
  font-size:clamp(28px,5.4vw,38px);
  line-height:1.28;letter-spacing:-0.03em;font-weight:800;
  margin:14px 0 10px;
}
.lead{font-size:18px;color:var(--ink-2);margin:0 0 30px}
h2{
  font-size:clamp(21px,3.4vw,25px);
  line-height:1.4;letter-spacing:-0.025em;font-weight:800;
  margin:44px 0 12px;padding-top:6px;
}
h3{font-size:18px;font-weight:700;margin:26px 0 8px;letter-spacing:-0.02em}
p{margin:0 0 15px}
a{color:var(--brand-ink)}
strong{font-weight:700}

/* 단계 목록 */
ol.steps{counter-reset:s;list-style:none;padding:0;margin:0}
ol.steps > li{
  counter-increment:s;position:relative;
  padding:0 0 0 46px;margin:0 0 22px;
}
ol.steps > li::before{
  content:counter(s);
  position:absolute;left:0;top:1px;
  width:30px;height:30px;border-radius:50%;
  background:var(--brand);color:#fff;
  font-weight:800;font-size:15px;
  display:flex;align-items:center;justify-content:center;
}
ol.steps b{display:block;font-size:17.5px;margin-bottom:3px}
ol.steps span{color:var(--muted);font-size:16px}

/* 카드 */
.card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-md);padding:20px 22px;
  box-shadow:var(--shadow-sm);margin:0 0 14px;
}
.card p:last-child{margin-bottom:0}

/* 짚고 넘어갈 것 */
.note{
  background:var(--brand-soft);border:1px solid #FBD5E2;
  border-radius:var(--radius-md);padding:18px 20px;margin:24px 0;
}
.note b{color:var(--brand-ink)}
.note p:last-child{margin-bottom:0}

/* 문답 */
.qa{border-top:1px solid var(--line);padding:22px 0}
.qa:last-of-type{border-bottom:1px solid var(--line)}
.qa h2{font-size:19px;margin:0 0 8px;padding:0;line-height:1.5}
.qa p{color:var(--muted);margin:0 0 10px;font-size:16.5px}
.qa p:last-child{margin-bottom:0}

/* 다른 글로 가는 목록 */
.links{list-style:none;padding:0;margin:0}
.links li{margin:0 0 10px}
.links a{
  display:block;text-decoration:none;color:inherit;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-md);padding:17px 20px;
  box-shadow:var(--shadow-sm);
  transition:transform .15s ease, box-shadow .15s ease;
}
.links a:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.links b{display:block;font-size:17.5px;letter-spacing:-0.02em}
.links span{color:var(--muted);font-size:15.5px}

/* 내려받기 단추 */
.get{margin:40px 0 0;text-align:center}
.get a{
  display:inline-block;text-decoration:none;
  background:var(--brand);color:#fff;font-weight:800;font-size:17px;
  padding:15px 30px;border-radius:999px;box-shadow:var(--shadow-md);
}
.get p{color:var(--muted);font-size:14.5px;margin:12px 0 0}

footer{
  border-top:1px solid var(--line);
  padding:26px 0 40px;color:var(--muted-2);font-size:14px;
}
footer a{color:var(--muted);text-decoration:none}
footer a:hover{text-decoration:underline}

@media (max-width:560px){
  body{font-size:16.5px}
  .top a.home span{display:none}   /* 좁으면 글자 빼고 아이콘만 */
}