/* ─────────────────────────────────────────────────────────────
   가리개 랜딩.

   이 페이지에는 스크립트가 없습니다. 외부 폰트도, 외부 이미지도,
   애널리틱스도 없습니다 — Caddy의 CSP가 script-src 'none' 으로
   막아 두었고, 그것이 이 사이트의 설계입니다. 앱이 "사진을 보내지
   않는다"고 말하는데 소개 페이지가 방문자를 추적하면 앞뒤가 맞지
   않습니다. 히어로의 가림 데모까지 전부 CSS로만 동작합니다.

   색은 출시된 앱 화면에서 그대로 가져왔습니다. 받은 앱과 소개
   페이지가 같은 물건으로 보여야 합니다.
   ───────────────────────────────────────────────────────────── */
:root {
  --paper:#F4F1EA; --ink:#16141A; --sub:#6E6A73;
  --accent:#E24E2B; --accent-text:#C2401F;
  --line:#E3DED3; --card:#FFFFFF;
  --ok:#176B4F; --ok-tint:#176B4F17;
  --mask:#2A2730;
  --shadow:0 1px 2px #16141A0A, 0 8px 24px #16141A0A;

  /* 본문은 시스템 한글 서체 — 앱과 같은 글자로 읽히게 합니다.
     mono 는 "기계가 읽는 값"에만 씁니다: 번호, 검증 방식, 신뢰도,
     EXIF 키, 용량, 가격. 이 앱이 다루는 대상이 곧 그것이기 때문입니다. */
  --sans:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Pretendard","Malgun Gothic",sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper:#16141A; --ink:#F4F1EA; --sub:#A09AA6;
    --accent:#E24E2B; --accent-text:#F4795E;
    --line:#37343C; --card:#242228;
    --ok:#52CC91; --ok-tint:#52CC9124;
    --mask:#C9C3CE;
    --shadow:0 1px 2px #0006, 0 8px 24px #0004;
  }
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); line-height:1.75;
  font-size:16px; letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
}
.wrap { max-width:880px; margin:0 auto; padding:0 22px; }
a { color:var(--accent-text); text-underline-offset:3px; }
:focus-visible { outline:2.5px solid var(--accent); outline-offset:3px; border-radius:4px; }

/* ── 타입 스케일 ── */
h1 { font-size:clamp(34px,7vw,56px); line-height:1.16; font-weight:800;
     letter-spacing:-.038em; margin:0 0 18px; }
h2 { font-size:clamp(23px,3.6vw,31px); line-height:1.3; font-weight:800;
     letter-spacing:-.028em; margin:0 0 12px; }
h3 { font-size:17px; font-weight:750; letter-spacing:-.02em; margin:0 0 5px; }
p { margin:0 0 14px; }
p:last-child { margin-bottom:0; }
strong { font-weight:750; }

/* 라벨은 한글이라 uppercase가 무효입니다. 자간도 한글에선 넓히면 읽기 나빠져
   래틴 대비 절반만 줍니다. */
.eyebrow { font-family:var(--mono); font-size:12px; font-weight:600;
  letter-spacing:.1em; color:var(--accent-text); margin:0 0 12px; }
.lead { font-size:clamp(17px,2.3vw,20px); line-height:1.62; color:var(--sub);
  letter-spacing:-.018em; max-width:42ch; }

section { padding:clamp(56px,9vw,88px) 0; border-top:1px solid var(--line); }
section > .wrap > .eyebrow { margin-bottom:10px; }
.sub { color:var(--sub); }
.small { font-size:14px; }

/* ── 브랜드 ── */
.top { display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:26px 0 0; }
.brand { display:flex; align-items:center; gap:11px; }
.brand b { font-size:19px; font-weight:800; letter-spacing:-.04em; }
/* 앱 아이콘과 같은 4×4 「ㄱ」. 격자를 바꾸면 앱 아이콘·앱 안 마크도 함께 바꿔야 합니다. */
.mark { display:grid; grid-template-columns:repeat(4,1fr); gap:2.5px;
  width:38px; height:38px; background:var(--ink); border-radius:10px; padding:4.5px; flex:none; }
.mark i { border-radius:1.5px; background:#ffffff1f; }
.mark i.on { background:var(--accent); }
.langlink { font-family:var(--mono); font-size:12.5px; letter-spacing:.06em;
  color:var(--sub); text-decoration:none; border:1px solid var(--line);
  padding:0 15px; border-radius:999px; white-space:nowrap;
  min-height:44px; display:inline-flex; align-items:center; }
.langlink:hover { color:var(--ink); border-color:var(--sub); }

/* ── 히어로 ── */
.hero { padding:clamp(40px,7vw,64px) 0 clamp(52px,8vw,76px); border-top:none; }
.hero .lead { margin:0 0 30px; }

.cta-row { display:flex; flex-wrap:wrap; align-items:center; gap:13px; }
.appstore { display:inline-flex; align-items:center; gap:9px;
  background:var(--ink); color:var(--paper); text-decoration:none;
  font-size:16px; font-weight:700; letter-spacing:-.02em;
  padding:14px 22px; border-radius:13px; box-shadow:var(--shadow); }
.appstore:hover { opacity:.86; }
.appstore svg { flex:none; }
.freeline { font-family:var(--mono); font-size:12.5px; color:var(--sub); letter-spacing:-.01em; }

.specs { display:flex; flex-wrap:wrap; gap:7px; margin:26px 0 0; padding:0; list-style:none; }
.specs li { font-family:var(--mono); font-size:12px; color:var(--sub);
  border:1px solid var(--line); border-radius:7px; padding:5px 10px; }

/* ── 시그니처: 가림 데모 (CSS 전용) ─────────────────────────────
   앱이 실제로 제공하는 세 가지 가림 방식을 그대로 전환합니다.
   가려진 자리에는 숫자가 아예 들어 있지 않습니다 — 투명하게 덮은
   글자라면 복사해서 읽을 수 있고, 그러면 "픽셀을 지운다"는 앱의
   주장과 페이지가 어긋납니다.                                  */
.demo { margin:40px 0 0; }
.mode-in { position:absolute; width:1px; height:1px; opacity:0;
  margin:0; overflow:hidden; clip-path:inset(50%); }
.modes { display:flex; gap:5px; background:var(--card); border:1px solid var(--line);
  border-radius:12px; padding:4px; margin:0 0 14px; width:max-content; max-width:100%; }
.modes label { font-size:14px; font-weight:650; letter-spacing:-.02em;
  color:var(--sub); padding:10px 17px; border-radius:9px; cursor:pointer;
  white-space:nowrap; min-height:44px; display:flex; align-items:center; }
.modes label:hover { color:var(--ink); }

.specimen { background:var(--card); border:1px solid var(--line);
  border-radius:16px; padding:20px; box-shadow:var(--shadow); }
.spec-label { font-family:var(--mono); font-size:12px; letter-spacing:.08em;
  color:var(--sub); margin:0 0 9px; }
.spec-row { display:flex; align-items:center; gap:3px; flex-wrap:wrap;
  font-family:var(--mono); font-size:clamp(19px,4.4vw,28px);
  font-weight:600; letter-spacing:.02em; }
.spec-row .keep { color:var(--ink); }

/* 가림 셀. 인라인 그리드라 숫자 자리를 그대로 차지합니다. */
/* 뒷자리 7글자 폭. 셀이 14개인 건 모자이크 한 칸이 한 글자가 아니기 때문입니다. */
.cells { display:inline-grid; grid-template-columns:repeat(14,1fr);
  gap:1.5px; width:7ch; vertical-align:middle;
  transition:filter .22s ease, gap .22s ease; }
.cells i { aspect-ratio:1/1.55; border-radius:1.5px; background:var(--mask); opacity:.9; }
.cells i:nth-child(2n)  { opacity:.62; }
.cells i:nth-child(3n)  { opacity:1; }
.cells i:nth-child(5n)  { opacity:.44; }
.cells i:nth-child(7n)  { opacity:.78; }
.cells i:nth-child(11n) { opacity:.55; }

#m-blur:checked  ~ .specimen .cells { filter:blur(6px); }
#m-solid:checked ~ .specimen .cells { gap:0; }
#m-solid:checked ~ .specimen .cells i { opacity:1; border-radius:0; }

#m-mosaic:checked ~ .modes label[for="m-mosaic"],
#m-blur:checked   ~ .modes label[for="m-blur"],
#m-solid:checked  ~ .modes label[for="m-solid"] {
  background:var(--ink); color:var(--paper); }
.mode-in:focus-visible ~ .modes label[for="m-mosaic"],
.mode-in:focus-visible ~ .modes label[for="m-blur"],
.mode-in:focus-visible ~ .modes label[for="m-solid"] { outline:none; }
#m-mosaic:focus-visible ~ .modes label[for="m-mosaic"],
#m-blur:focus-visible   ~ .modes label[for="m-blur"],
#m-solid:focus-visible  ~ .modes label[for="m-solid"] {
  outline:2.5px solid var(--accent); outline-offset:2px; }

.spec-foot { display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  margin:16px 0 0; padding:13px 0 0; border-top:1px solid var(--line); }
.badge { display:inline-flex; align-items:center; gap:6px;
  background:var(--ok-tint); color:var(--ok); font-family:var(--mono);
  font-size:12px; font-weight:600; padding:5px 10px; border-radius:7px; }
.spec-note { font-size:13px; color:var(--sub); margin:12px 0 0; }

@media (prefers-reduced-motion: no-preference) {
  .cells i { animation:settle .5s cubic-bezier(.2,.7,.3,1) backwards; }
  .cells i:nth-child(3n+1) { animation-delay:.04s; }
  .cells i:nth-child(3n+2) { animation-delay:.09s; }
  @keyframes settle { from { opacity:0; transform:scale(.6); } }
}

/* ── 카드 그리드 ── */
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:13px; margin:26px 0 0; }
/* 사용 사례는 넷이라 3열이 되면 한 장이 홀로 남습니다. 2×2로 묶습니다. */
.grid.pairs { grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); }
.card { background:var(--card); border:1px solid var(--line);
  border-radius:15px; padding:19px; }
.card p { font-size:14.5px; color:var(--sub); margin:0; }
.card .when { font-family:var(--mono); font-size:12px; letter-spacing:.08em;
  color:var(--accent-text); margin:0 0 7px; }

/* ── 감지 표 ── */
.table-scroll { overflow-x:auto; margin:26px 0 0;
  border:1px solid var(--line); border-radius:15px; background:var(--card); }
table { border-collapse:collapse; width:100%; min-width:560px; }
th, td { text-align:left; padding:13px 17px; border-bottom:1px solid var(--line);
  font-size:14.5px; vertical-align:top; }
tr:last-child td { border-bottom:none; }
th { font-family:var(--mono); font-size:12px; letter-spacing:.08em;
  color:var(--sub); font-weight:600; }
td.item { font-weight:700; white-space:nowrap; }
td.how { font-family:var(--mono); font-size:12.5px; color:var(--accent-text); white-space:nowrap; }
td.miss { color:var(--sub); font-size:13.5px; }

/* ── 단계 ── */
.steps { list-style:none; counter-reset:s; padding:0; margin:26px 0 0; }
.steps li { counter-increment:s; position:relative; padding:0 0 0 44px; margin:0 0 22px; }
.steps li:last-child { margin-bottom:0; }
.steps li::before { content:counter(s); position:absolute; left:0; top:1px;
  width:29px; height:29px; display:grid; place-items:center;
  background:var(--ink); color:var(--paper); border-radius:9px;
  font-family:var(--mono); font-size:13px; font-weight:600; }
.steps p { font-size:14.5px; color:var(--sub); margin:3px 0 0; }

/* ── 스크린샷 ── */
.shots { display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr));
  gap:16px; margin:32px 0 0; }
.shot img { width:100%; height:auto; display:block; border-radius:15px;
  border:1px solid var(--line); background:var(--card); }
.shot figcaption { font-size:12.5px; color:var(--sub); margin:9px 0 0; text-align:center; }

/* ── EXIF 목록 ── */
.exif { list-style:none; padding:17px 19px; margin:24px 0 0;
  background:var(--card); border:1px solid var(--line); border-radius:15px;
  font-family:var(--mono); font-size:13.5px; }
.exif li { display:flex; justify-content:space-between; gap:16px;
  padding:8px 0; border-bottom:1px solid var(--line); }
.exif li:last-child { border-bottom:none; }
.exif .k { color:var(--sub); }
.exif .v { text-decoration:line-through; text-decoration-thickness:1.5px;
  text-decoration-color:var(--accent); color:var(--sub); text-align:right; }
.exif .gone { color:var(--ok); text-decoration:none; font-weight:600; }

/* ── 강조 상자 ── */
.note { background:var(--card); border:1px solid var(--line);
  border-radius:15px; padding:19px 21px; margin:24px 0 0; font-size:15px; }
.note.accent { border-left:3px solid var(--accent); }

/* ── 가격 ── */
.plans { display:grid; grid-template-columns:repeat(auto-fit,minmax(235px,1fr));
  gap:13px; margin:26px 0 0; }
.plan { background:var(--card); border:1px solid var(--line);
  border-radius:15px; padding:21px; }
.plan.pro { border-color:var(--ink); }
.plan h3 { margin-bottom:9px; }
.price { font-family:var(--mono); font-size:25px; font-weight:600;
  letter-spacing:-.02em; margin:0 0 3px; }
.price span { font-size:13px; color:var(--sub); font-weight:400; }
.plan ul { list-style:none; padding:0; margin:14px 0 0; }
.plan li { font-size:14px; color:var(--sub); padding:0 0 0 18px;
  position:relative; margin:0 0 6px; }
.plan li::before { content:"·"; position:absolute; left:5px; color:var(--accent); font-weight:700; }
.trial { font-family:var(--mono); font-size:12px; color:var(--ok);
  background:var(--ok-tint); padding:4px 9px; border-radius:6px;
  display:inline-block; margin:11px 0 0; }

/* ── FAQ (details — 스크립트 없이 접힙니다) ── */
.faq { margin:26px 0 0; border:1px solid var(--line);
  border-radius:15px; background:var(--card); overflow:hidden; }
.faq details { border-bottom:1px solid var(--line); }
.faq details:last-child { border-bottom:none; }
.faq summary { cursor:pointer; padding:16px 19px; font-weight:700;
  font-size:15.5px; letter-spacing:-.02em; list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:14px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; font-family:var(--mono); font-size:19px;
  color:var(--accent-text); flex:none; line-height:1; }
.faq details[open] summary::after { content:"−"; }
.faq summary:hover { color:var(--accent-text); }
.faq .a { padding:0 19px 17px; font-size:14.5px; color:var(--sub); }

/* ── 푸터 ── */
footer { border-top:1px solid var(--line); padding:44px 0 60px; }
.foot-cta { display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:18px; margin:0 0 34px; }
.foot-cta h2 { margin:0; }
.foot-links { display:flex; flex-wrap:wrap; gap:18px; font-size:14px; }
.foot-note { font-size:12.5px; color:var(--sub); margin:20px 0 0; line-height:1.7; }

/* ── 2단 구성 ── */
.split { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(28px,5vw,48px); }
.split h2 { font-size:clamp(22px,3.2vw,28px); }
.aside { display:grid; grid-template-columns:minmax(0,1fr) minmax(240px,300px); gap:clamp(28px,5vw,44px); align-items:start; }

/* ── 어두운 패널 ── */
.panel { background:var(--ink); color:var(--paper); border-radius:20px;
  padding:clamp(30px,5.5vw,46px); }
.panel h2 { color:var(--paper); }
.panel .eyebrow { color:#F4795E; }
.panel p { color:#C9C3CE; max-width:56ch; }
.panel .grid { margin-top:26px; }
.panel .card { background:#F4F1EA0F; border-color:#F4F1EA24; }
.panel .card h3 { color:var(--paper); }
.panel .card p { color:#A09AA6; }
@media (prefers-color-scheme: dark) {
  .panel { background:#0E0D11; }
  .panel .card { background:#F4F1EA0A; border-color:#F4F1EA1A; }
}

/* 좁은 화면에서 감지 표는 행마다 카드로 쌓입니다 — 가로 스크롤 대신.
   마크업은 그대로 두고 표시만 바꿉니다(내용을 두 벌 두지 않기 위해). */
@media (max-width:640px) {
  .table-scroll { overflow-x:visible; }
  table { min-width:0; }
  thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  tr { display:block; padding:14px 17px; border-bottom:1px solid var(--line); }
  tr:last-child { border-bottom:none; }
  td { display:block; border:none; padding:0; }
  td.item { display:inline-block; margin-right:9px; }
  td.how { display:inline-block; }
  td.miss { margin-top:3px; }
  td.miss:empty { display:none; }
}