/* 앱과 같은 브라운 팔레트를 써서 랜딩 → 앱으로 넘어갈 때 이질감이 없게 함.
   외부 폰트를 쓰지 않는 이유: netlify.toml의 CSP가 font-src/style-src를 'self'로
   잠가둔 데다, 이 페이지는 QR·메신저 링크로 저연결 환경에서 열리는 경우가 많다. */
:root{
  --bg:#f6f3ec; --card:#ffffff; --ink:#2c2620; --sub:#6d6558;
  --heading:#3a2f1d; --accent:#8a6d3b; --accent-light:#f1e6d0;
  --line:#e6ddc9; --dark:#2c2620;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:"Pretendard","Apple SD Gothic Neo","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.65;
  -webkit-text-size-adjust:100%;
}
.wrap{max-width:900px; margin:0 auto; padding:0 20px;}
a{color:var(--accent);}

/* ---- 히어로 ---- */
.hero{background:var(--dark); color:#fff; padding:64px 0 72px;}
.hero h1{
  margin:0 0 14px; font-size:clamp(30px,6vw,46px); line-height:1.25;
  font-weight:800; letter-spacing:-0.5px;
}
.hero .lede{
  margin:0 0 30px; font-size:clamp(16px,2.4vw,19px); color:#d7cec1; max-width:34em;
}
.hero .native{font-size:14px; color:#c9a15f; margin:0 0 14px; font-weight:700; letter-spacing:1px;}
.cta-row{display:flex; flex-wrap:wrap; gap:12px; align-items:center;}
.btn{
  display:inline-block; padding:14px 26px; border-radius:10px;
  font-weight:700; font-size:16px; text-decoration:none;
}
.btn-primary{background:#c9a15f; color:#2c2620;}
.btn-ghost{border:1px solid #6a6155; color:#e8e1d6;}
.cta-note{font-size:13.5px; color:#a89e90; margin:14px 0 0;}

/* ---- 공통 섹션 ---- */
section{padding:56px 0;}
/* 연락처 섹션이 페이지의 마지막이다(푸터를 없앴다). 끝이 잘린 느낌이 나지 않게 아래를 넉넉히. */
section:last-of-type{padding-bottom:84px;}
section h2{
  font-size:clamp(22px,3.6vw,30px); color:var(--heading);
  margin:0 0 10px; letter-spacing:-0.3px;
}
.sub{color:var(--sub); margin:0 0 30px; max-width:40em; font-size:16px;}

/* ---- 세 가지 약속 ---- */
.promise-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px;}
.promise{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:24px;}
.promise h3{margin:0 0 8px; font-size:17px; color:var(--accent);}
.promise p{margin:0; font-size:14.5px; color:var(--sub);}

/* ---- 기능 ---- */
.feature{display:grid; grid-template-columns:1fr; gap:26px; align-items:center;}
@media (min-width:760px){ .feature{grid-template-columns:1fr 1fr; gap:44px;} .feature.flip>div:first-child{order:2;} }

/* ---- 앱 화면 묶음 ----
   한 섹션이 화면 2~3장을 함께 보여준다. 주 화면 한 장이 크고 보조 화면이 조금 작다.
   화면이 2장 이상인 섹션은 .feature(2열)를 쓰지 않고 .feature-wide로 폭 전체를 쓴다 —
   2열일 때 이미지 칸이 408px뿐이라 3장은 반드시 줄바꿈이 나고, 오른쪽에 세로로 늘어선다. */
.shots{display:flex; align-items:flex-start; justify-content:center; gap:18px; flex-wrap:wrap; margin-top:26px;}
.shot{
  display:block; width:100%; height:auto; border-radius:14px; border:1px solid var(--line);
  box-shadow:0 10px 30px rgba(60,50,30,.13); background:var(--card);
}
/* 폭을 px로 명시하는 이유: flex 항목의 기본 크기는 내용(이미지 원본 폭 390px)이라
   max-width만 걸면 의도한 것보다 자주 줄바꿈이 난다. */
.shot-item{width:300px; max-width:100%;}
.shot-item.sub{width:224px;}
.shot-cap{margin:7px 0 0; font-size:12.5px; color:var(--sub); text-align:center; line-height:1.45;}

.feature-wide .lead{max-width:640px;}

/* ---- 글만 있는 섹션(문제 제기, 기록이 기기에 남는 이유) ----
   이 페이지는 기능 목록이 아니라 "왜 필요한가"를 먼저 말한다. 그 대목은 이미지 없이
   글로만 가므로, 읽기 좋은 폭(65자 안팎)과 문단 간격을 따로 준다. */
.prose{max-width:62ch; margin-top:18px;}
.prose p{margin:0 0 15px; font-size:16px; line-height:1.75; color:var(--sub);}
.prose p:last-child{margin-bottom:0;}
.prose strong{color:var(--ink);}
.prose .prose-close{color:var(--ink); font-size:16.5px;}
.promise-ticks{margin-top:22px;}

/* ---- 앱이 묻는 네 가지 ----
   순서 자체가 방법이라 번호를 매긴다(장식이 아니라 정보). 앱이 화면에 실제로 띄우는
   질문은 인용부호를 붙여 앱의 말임을 드러낸다. */
.steps{list-style:none; margin:26px 0 0; padding:0; display:flex; flex-direction:column; gap:22px; max-width:64ch;}
.step-h{
  display:flex; align-items:center; gap:10px; margin:0 0 8px;
  font-size:17px; font-weight:600; color:var(--heading);
}
.step-n{
  flex-shrink:0; width:24px; height:24px; border-radius:50%;
  background:var(--accent); color:var(--card);
  font-size:13px; font-weight:700; line-height:24px; text-align:center;
}
.step-q{
  margin:0 0 8px; padding-left:14px; border-left:3px solid var(--line);
  font-size:15.5px; line-height:1.6; color:var(--accent);
}
.step-q::before{content:"\201C";}
.step-q::after{content:"\201D";}
.step-p{margin:0; font-size:15.5px; line-height:1.7; color:var(--sub);}
.step-end{margin-top:24px;}
.feature-wide .ticks-row{display:flex; flex-wrap:wrap; gap:2px 28px; margin-top:6px;}
.feature-wide .ticks-row li{padding-right:6px;}

@media (max-width:560px){
  /* 좁은 화면에서는 주 화면이 한 줄을 차지하고 보조 화면 둘이 그 아래 나란히 선다 */
  .shot-item{width:236px;}
  .shot-item.sub{width:152px;}
}
.feature h3{font-size:20px; color:var(--heading); margin:0 0 10px;}
.feature p{margin:0 0 12px; color:var(--sub); font-size:15.5px;}
ul.ticks{margin:0; padding:0; list-style:none;}
ul.ticks li{padding:5px 0 5px 24px; position:relative; font-size:15px;}
ul.ticks li::before{
  content:""; position:absolute; left:4px; top:13px;
  width:8px; height:8px; border-radius:50%; background:var(--accent);
}

/* ---- 언어 ---- */
.langs{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:20px;}
.lang{
  background:var(--accent-light); border:1px solid #e3d4b8; color:#4a3b22;
  border-radius:999px; padding:8px 16px; font-size:15px; font-weight:600;
}

/* ---- 어두운 강조 섹션 ---- */
.band{background:var(--dark); color:#e8e1d6;}
.band h2{color:#fff;}
.band .sub{color:#b6ac9d;}
.band .promise{background:#3a332c; border-color:#4c443b;}
.band .promise h3{color:#c9a15f;}
.band .promise p{color:#c2b8a9;}
/* .band는 어두운 섹션이라 밝은 배경 기준의 색 변수를 그대로 쓰면 글자가 배경에 묻는다.
   실제로 .prose를 여기 처음 넣었을 때 강조 문구와 맺음 문단이 --ink(거의 검정)로
   칠해져 대비 1.00:1, 즉 완전히 보이지 않는 채로 배포됐다. 이 섹션에 들어오는
   요소는 반드시 여기서 색을 다시 준다. */
.band .prose p{color:#c8bfb1;}
.band .prose strong{color:#e0c48a;}
.band .prose .prose-close{color:#f2ece1;}


/* ---- 언어 전환 줄 ----
   자동 리디렉션을 쓰지 않는 이유: 공유받은 링크가 사용자 브라우저 언어에 따라
   다른 페이지로 튕기면 "보내준 그 페이지"가 아니게 된다. 앱 자체도 자동 감지 없이
   저장된 설정만 쓰므로 명시적 URL + 눈에 보이는 전환 줄로 일관되게 둔다. */
.langbar{background:#231e19; font-size:13.5px;}
.langbar .wrap{display:flex; flex-wrap:wrap; gap:6px 16px; padding-top:11px; padding-bottom:11px;}
.langbar a{color:#a89e90; text-decoration:none;}
.langbar a:hover{color:#e8e1d6; text-decoration:underline;}
.langbar .lang-current{color:#c9a15f; font-weight:700;}

/* 밝은 섹션 사이의 옅은 구분면 */
.tinted{background:#fffdf9; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}

/* ---- 연락 CTA ----
   주소를 평문 mailto로 두면 수집 대상이 되지만, JS 난독화는 무JS 환경에서 링크를
   못 쓰게 만들면서 수집은 거의 못 막는다. 전용 별칭이라 심해지면 갈아엎으면 된다. */
.contact-row{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin:0;}
.contact-label{font-weight:700; color:var(--heading); font-size:16px;}
.btn-mail{background:var(--accent); color:#fff; padding:12px 22px; font-size:15.5px; word-break:break-all;}