/* 소개 페이지 전용 스타일.
 *
 * 왜 style.css를 안 쓰는가: 그 파일은 109KB인데다 캐시를 끄고(no-store) 내보내므로
 * 볼 때마다 통째로 다시 받는다. 앱을 쓰는 사람에겐 감당할 값이지만, 검색으로 들어와
 * 구경만 하고 나갈 사람에게까지 물릴 값은 아니다. 검색 순위는 휴대폰에서의 속도를
 * 보고 매겨지므로 이 페이지들은 가볍게 유지한다 — 이 파일에 앱 기능을 위한 규칙을
 * 끌어오지 말 것.
 *
 * 색·글꼴은 style.css의 :root 값을 그대로 옮겨 적었다. 앱과 따로 노는 인상을 주지
 * 않으려는 것이고, 저쪽 색을 바꾸면 여기도 같이 바꿔야 한다. 위쪽 띠의 짙은 남색도
 * 앱 머리글(.app-head)과 같은 값이다(2026-09-26 새 디자인에 맞춤).
 * 어둠 모드는 넣지 않았다 — style.css 쪽도 지금 꺼 둔 상태라 혼자 어두워지면
 * 앱으로 넘어갈 때 화면이 튄다. */

/* 앱과 같은 글꼴(Pretendard). 쓰인 글자만 조금씩 받아 오는 판이라 무겁지 않다.
   못 받아 오면 맑은 고딕으로 물러난다. */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
:root{
  color-scheme:light;
  --paper:#eef2f8; --card:#ffffff; --ink:#0f1b2d; --ink-soft:#5a6b82;
  /* line-soft만 앱(#eaf0f7)과 다르다 — 여기서는 구분선으로 쓰는데, 앱 값은 청회색 바탕과
     거의 같아 선이 안 보인다 */
  --line:#dbe3ee; --line-soft:#dbe3ee;
  --accent:#2563eb; --accent-soft:#e3ecfd;
  --head:#0f1b2d; --head-soft:#a9b8cc;
  --shadow:0 4px 16px rgba(15,40,90,.07);
  --font:"Pretendard Variable",Pretendard,"Segoe UI","Malgun Gothic",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;}
body{
  background:var(--paper); color:var(--ink); font-family:var(--font);
  line-height:1.7; -webkit-font-smoothing:antialiased;
  /* 한글은 낱말 안에서 줄을 바꾸면 안 된다. 이걸 안 걸면 '붙여'가 '붙 / 여'로
     잘려 읽기가 크게 나빠진다(브라우저 기본값이 글자 단위로 끊기 때문). */
  word-break:keep-all;
  /* 그래도 한 줄에 절대 안 들어가는 것(긴 영문 주소 등)은 끊어서 화면 밖으로
     밀지 않는다 — 좁은 화면에서 가로 스크롤이 생기는 것을 막는다. */
  overflow-wrap:break-word;
}
img{max-width:100%; height:auto;}
a{color:var(--accent);}

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

/* ── 위쪽 띠 (모든 소개 페이지 공통) ── */
.topbar{background:var(--head);}
/* height를 고정하면 안 된다. 좁은 화면에서 메뉴가 다음 줄로 넘어가는데,
   높이가 58px에 묶여 있으면 넘어간 줄이 잘려 앞쪽 항목이 통째로 안 보인다. */
.topbar .wrap{display:flex; align-items:center; gap:10px 16px; flex-wrap:wrap;
  min-height:58px; padding-top:10px; padding-bottom:10px;}
.topbar .home{
  font-weight:800; letter-spacing:.03em; text-transform:uppercase;
  color:#fff; text-decoration:none; font-size:17px; white-space:nowrap;
}
.topbar nav{margin-left:auto; display:flex; gap:14px; font-size:14px; flex-wrap:wrap;}
.topbar nav a{color:var(--head-soft); text-decoration:none;}
.topbar nav a:hover{color:#fff;}
/* 휴대폰에서는 메뉴를 이름 아래 한 줄로 내린다 */
@media (max-width:620px){
  .topbar nav{margin-left:0; width:100%; gap:8px 14px;}
}

/* ── 머리말 ── */
.hero{padding:44px 0 30px; border-bottom:1px solid var(--line-soft);}
.hero .kicker{
  display:inline-block; margin:0 0 12px; padding:3px 10px; border-radius:999px;
  background:var(--accent-soft); color:var(--accent); font-size:13px; font-weight:700;
}
.hero h1{
  font-size:clamp(25px,5.2vw,36px); line-height:1.3; margin:0 0 14px;
  letter-spacing:-.01em; text-wrap:balance;
}
.hero .lead{font-size:17px; color:var(--ink-soft); margin:0 0 22px;}
.cta{
  display:inline-block; background:var(--accent); color:#fff; text-decoration:none;
  padding:12px 22px; border-radius:8px; font-weight:700; box-shadow:var(--shadow);
}
.cta:hover{filter:brightness(1.12);}
.cta-note{font-size:13px; color:var(--ink-soft); margin:10px 0 0;}

/* ── 본문 ── */
main{padding:8px 0 10px;}
section{padding:30px 0; border-bottom:1px solid var(--line-soft);}
section:last-of-type{border-bottom:0;}
h2{font-size:clamp(20px,3.6vw,25px); line-height:1.35; margin:0 0 12px; letter-spacing:-.01em;}
h3{font-size:17px; margin:24px 0 6px;}
p{margin:0 0 14px;}
.muted{color:var(--ink-soft);}
.small{font-size:14px;}

ul.ticks{list-style:none; padding:0; margin:0 0 14px;}
ul.ticks li{padding:7px 0 7px 26px; position:relative; border-bottom:1px solid var(--line-soft);}
ul.ticks li:last-child{border-bottom:0;}
ul.ticks li::before{
  content:"—"; position:absolute; left:4px; color:var(--accent); font-weight:700;
}
ul.ticks b{display:block;}

/* 유형·단계처럼 짧은 낱말을 여러 개 늘어놓는 자리 */
.chips{display:flex; flex-wrap:wrap; gap:7px; margin:0 0 14px; padding:0; list-style:none;}
.chips li{
  border:1px solid var(--line); border-radius:8px; padding:5px 11px;
  font-size:14px; color:var(--ink-soft); background:var(--card);
}

.steps{counter-reset:s; list-style:none; padding:0; margin:0 0 14px;}
.steps li{counter-increment:s; position:relative; padding:0 0 16px 40px;}
.steps li::before{
  content:counter(s,decimal-leading-zero); position:absolute; left:0; top:1px;
  color:var(--accent); font-weight:800; font-size:14px;
}
.steps b{display:block;}

.card{
  border:none; border-radius:14px; padding:18px 20px;
  background:var(--card); box-shadow:var(--shadow); margin:0 0 14px;
}
.card h3{margin-top:0;}

/* 자주 묻는 질문 */
.qa{border-bottom:1px solid var(--line-soft); padding:16px 0;}
.qa:last-child{border-bottom:0;}
.qa h3{margin:0 0 6px; font-size:17px;}
.qa p:last-child{margin-bottom:0;}

/* ── 다른 소개 페이지로 건너가는 자리 ──
   검색 로봇이 새 페이지를 찾아가는 길이자, 사람에게도 다음 볼 것을 알려 주는 자리다.
   어느 페이지에서도 나머지 전부로 갈 수 있어야 해서 모든 페이지 아래에 같은 것을 둔다. */
.more{padding:30px 0; border-top:1px solid var(--line);}
.more h2{font-size:19px;}
.more ul{list-style:none; padding:0; margin:0; display:grid; gap:8px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.more a{
  display:block; border:1px solid transparent; border-radius:12px; padding:12px 14px;
  text-decoration:none; color:var(--ink); background:var(--card); box-shadow:var(--shadow);
}
.more a:hover{border-color:var(--accent);}
.more a b{display:block; color:var(--accent);}
.more a span{font-size:14px; color:var(--ink-soft);}

footer{padding:26px 0 50px; color:var(--ink-soft); font-size:14px;}
footer nav{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:10px;}
footer a{color:var(--ink-soft);}