/* ────────────────────────────────────────────────────────────
   우리아이 한글떼기 — GitHub Pages 공통 스타일
   index.html / support.html / privacy.html 이 함께 사용한다.
   ──────────────────────────────────────────────────────────── */

:root{
  --sky:#3ba3dc; --sky-d:#1c74ad; --sky-l:#7fcbf0;
  --ink:#123b55; --sub:#5d7e93; --line:#dceaf3;
  --card:#ffffff; --paper:#f2f9fd;
  --red:#e8574c; --orange:#f5a623; --yellow:#f7d94c;
  --green:#7ac943; --blue:#2e9bdf; --purple:#9b59d0;
  --radius:18px;
  color-scheme:light;
}

*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo",
              "Malgun Gothic","Noto Sans KR",Roboto,sans-serif;
  line-height:1.7; -webkit-font-smoothing:antialiased;
  word-break:keep-all;
}
a{color:var(--sky-d); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
.wrap{max-width:900px; margin:0 auto; padding:0 20px}
.narrow{max-width:720px}

/* ── 언어 전환 ── */
html[data-lang="ko"] [lang="en"]{display:none}
html[data-lang="en"] [lang="ko"]{display:none}
#langBtn{
  position:fixed; top:14px; right:14px; z-index:50;
  background:rgba(255,255,255,.92); border:1px solid var(--line);
  color:var(--ink); font:600 13px/1 inherit; font-family:inherit;
  padding:9px 14px; border-radius:999px; cursor:pointer;
  box-shadow:0 3px 12px rgba(18,59,85,.12); backdrop-filter:blur(6px);
}
#langBtn:hover{background:#fff; border-color:var(--sky-l)}

/* ── 페이지 상단 ── */
.top{
  background:linear-gradient(180deg,var(--sky) 0%,var(--sky-l) 100%);
  color:#fff; text-align:center; padding:52px 0 44px;
  border-bottom:6px solid #fff;
}
.top .badge{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.45);
  padding:5px 14px; border-radius:999px; font-size:13px; font-weight:700;
}
.top h1{
  font-size:clamp(27px,5.4vw,42px); font-weight:800; letter-spacing:-.5px;
  margin:16px 0 8px; text-shadow:0 2px 0 rgba(28,116,173,.35);
}
.top p{font-size:clamp(15px,2.6vw,17px); color:rgba(255,255,255,.94); max-width:560px; margin:0 auto}
.top .home{display:inline-block; color:#fff; font-size:14px; opacity:.9}
.top .icon{
  width:104px; height:104px; border-radius:24px; display:block; margin:0 auto;
  box-shadow:0 10px 26px rgba(18,59,85,.28);
}

/* ── 섹션 ── */
section{padding:52px 0}
.eyebrow{
  color:var(--sky-d); font-weight:800; font-size:12.5px; letter-spacing:1.6px;
  text-transform:uppercase; text-align:center;
}
h2{font-size:clamp(21px,3.8vw,29px); font-weight:800; text-align:center; margin:8px 0 12px; letter-spacing:-.3px}
.lead{color:var(--sub); text-align:center; max-width:600px; margin:0 auto 32px; font-size:15.5px}

/* ── 카드 그리드 ── */
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px}
.feat{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px 22px; box-shadow:0 4px 14px rgba(18,59,85,.05);
}
.feat .ic{font-size:30px; line-height:1; margin-bottom:12px; display:block}
.feat h3{font-size:16.5px; font-weight:800; margin-bottom:6px}
.feat p{color:var(--sub); font-size:14.5px}

/* ── 폰 목업 ── */
.phone{
  width:262px; margin:0 auto; padding:11px; background:#20465e;
  border-radius:34px; box-shadow:0 16px 40px rgba(18,59,85,.3);
}
.phone img{display:block; width:100%; border-radius:24px; background:var(--sky)}
.phone figcaption, .shotcap{color:var(--sub); font-size:13.5px; text-align:center; margin-top:12px}

/* ── 낱말카드 미리보기 ── */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
@media (max-width:560px){ .cards{grid-template-columns:repeat(2,1fr)} }
.wcard{
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  overflow:hidden; text-align:center; box-shadow:0 4px 14px rgba(18,59,85,.05);
}
.wcard img{display:block; width:100%; aspect-ratio:3/2; object-fit:contain; background:#fff; padding:8px}
.wcard b{display:block; font-size:19px; font-weight:800; padding:9px 6px 4px}
.wcard span{display:block; color:var(--sub); font-size:12px; padding-bottom:11px}

/* ── 단계 목록 ── */
.steps{max-width:660px; margin:0 auto; display:flex; flex-direction:column; gap:12px}
.step{
  display:flex; gap:16px; align-items:flex-start;
  background:var(--card); border:1px solid var(--line); border-radius:16px; padding:18px 20px;
}
.step .no{
  flex:0 0 auto; width:40px; height:40px; border-radius:12px; color:#fff;
  font-weight:800; font-size:17px; display:flex; align-items:center; justify-content:center;
}
.step:nth-child(1) .no{background:var(--red)}
.step:nth-child(2) .no{background:var(--orange)}
.step:nth-child(3) .no{background:var(--green)}
.step:nth-child(4) .no{background:var(--blue)}
.step:nth-child(5) .no{background:var(--purple)}
.step h3{font-size:16px; font-weight:800; margin-bottom:2px}
.step p{color:var(--sub); font-size:14.5px}
.step .ex{color:var(--ink); font-weight:600}

/* ── 좌우 배치(그림 + 설명) ── */
.split{display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:center; max-width:800px; margin:0 auto}
.split p{color:var(--sub); font-size:15.5px; margin-bottom:12px}
.split h3{font-size:clamp(19px,3vw,24px); font-weight:800; margin-bottom:12px}
@media (max-width:680px){ .split{grid-template-columns:1fr; gap:24px} }

/* ── 스토어 버튼 ── */
.dl{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:26px}
.btn{
  display:inline-flex; align-items:center; gap:9px; font-weight:700; font-size:15px;
  color:#fff; padding:14px 24px; border-radius:14px; position:relative;
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn:hover{transform:translateY(-2px); text-decoration:none}
.btn.and{background:#2a8f47; box-shadow:0 8px 20px rgba(42,143,71,.3)}
.btn.ios{background:#1b2733; box-shadow:0 8px 20px rgba(27,39,51,.3)}
.btn .rec{
  position:absolute; top:-9px; right:-8px; background:var(--yellow); color:#5a4400;
  font-size:10px; font-weight:800; padding:2px 8px; border-radius:999px;
  box-shadow:0 2px 8px rgba(18,59,85,.25);
}

/* ── 안내 상자 ── */
.note{
  background:var(--card); border:1px solid var(--line); border-left:5px solid var(--sky);
  border-radius:14px; padding:18px 20px; margin:18px 0;
}
.note p{color:var(--sub); font-size:14.5px}
.note strong{color:var(--ink)}

/* ── FAQ ── */
.faq{max-width:700px; margin:0 auto}
details{
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:0 20px; margin-bottom:10px;
}
summary{
  cursor:pointer; padding:16px 0; font-weight:700; font-size:15.5px; list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:12px;
}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; color:var(--sky); font-size:22px; font-weight:400; flex:0 0 auto}
details[open] summary::after{content:"\2212"}
details .body{padding:0 0 18px}
details p{color:var(--sub); font-size:14.5px}
details p + p{margin-top:8px}
details ol, details ul{margin:8px 0 0 2px; padding-left:20px}
details li{color:var(--sub); font-size:14.5px; margin:4px 0}

/* ── 문의 상자 ── */
.contact{
  max-width:700px; margin:30px auto 0; text-align:center;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:30px 24px;
}
.contact h3{font-size:18px; font-weight:800; margin-bottom:6px}
.contact p{color:var(--sub); font-size:14.5px; margin-bottom:16px}
.mail{
  display:inline-block; background:var(--sky); color:#fff; font-weight:700;
  padding:12px 22px; border-radius:12px;
}
.mail:hover{background:var(--sky-d); text-decoration:none}

/* ── 본문(약관) ── */
.doc h2{
  text-align:left; font-size:19px; margin:34px 0 6px;
  padding-top:20px; border-top:1px solid var(--line);
}
.doc h2:first-of-type{border-top:0; padding-top:0; margin-top:14px}
.doc p{color:var(--sub); font-size:15px; margin:10px 0}
.doc ul{margin:10px 0 10px 2px; padding-left:20px}
.doc li{color:var(--sub); font-size:15px; margin:6px 0}
.doc strong{color:var(--ink)}
.doc .intro{color:var(--ink); font-size:15.5px}
.eff{color:var(--sub); font-size:13.5px}

/* ── 푸터 ── */
footer{border-top:1px solid var(--line); margin-top:20px; padding:28px 0 52px; text-align:center}
footer .links{display:flex; gap:18px; justify-content:center; flex-wrap:wrap; margin-bottom:12px}
footer .links a{color:var(--sub); font-size:13.5px}
footer .cp{color:#8ba3b3; font-size:12.5px}