/* 꾹(KKUK) 마케팅 사이트 공용 스타일 — 한글판·영문판·처리방침 4장이 함께 쓴다 (266차)
   234차에 index.html 안에 인라인으로 있던 것을 그대로 옮겼다. 영문판이 생기면서
   같은 382줄이 사본 둘이 되는 것을 막는 조치다. 아래 「266차 추가」 절만 새로 쓴 것이다. */

/* ── 토큰 ─────────────────────────────────────────────
   강조색·배경은 아트보드 6장(create_distinctive_app_store_set.mjs)의 값 그대로다. */
:root {
  --ink: #16161a;
  --muted: #55575e;
  --line: rgba(22, 22, 26, 0.1);
  --shadow: 0 26px 52px rgba(20, 18, 30, 0.16);
  --pad: clamp(20px, 5vw, 40px);
  --gutter: clamp(56px, 11vw, 132px);
  --plate: #ffffff;
  --plate-line: rgba(255, 255, 255, 0.9);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: #ffffff;
  color: var(--ink);
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.72;
  letter-spacing: -0.017em;
  overflow-x: hidden;
  word-break: keep-all;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

.wrap {
  width: min(100% - calc(var(--pad) * 2), 1120px);
  margin-inline: auto;
}

/* ── 헤더 ───────────────────────────────────────────── */
.top {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0 4px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  font-weight: 800;
}
.brand img { width: 34px; height: 34px; border-radius: 9px; }
.brand b { font-size: 21px; letter-spacing: -0.05em; }
.brand span {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: -0.02em;
}

.topnav { display: flex; align-items: center; gap: 24px; }
.topnav a {
  font-size: 15px;
  font-weight: 700;
  color: var(--muted);
  text-decoration: none;
}
.topnav a:hover { color: var(--ink); }

/* ── 공통 조판 ──────────────────────────────────────── */
.kicker {
  margin: 0 0 18px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.33em;
  color: var(--accent, var(--ink));
}

h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -0.055em; line-height: 1.18; }
h1 { font-size: clamp(34px, 7.6vw, 60px); }
h2 { font-size: clamp(29px, 5.6vw, 47px); }
h3 { font-size: 20px; letter-spacing: -0.04em; }

.rule { display: flex; align-items: center; gap: 9px; margin: 22px 0 0; }
.rule i {
  height: 7px;
  border-radius: 4px;
  background: var(--accent, var(--ink));
}
.rule i:nth-child(1) { width: 54px; }
.rule i:nth-child(2) { width: 15px; opacity: 0.55; }
.rule i:nth-child(3) { width: 15px; opacity: 0.25; }

.lede {
  margin: 22px 0 0;
  max-width: 30rem;
  color: var(--muted);
  font-size: clamp(16px, 2.1vw, 18px);
}

.sticker {
  display: inline-block;
  padding: 10px 21px;
  border-radius: 999px;
  background: var(--accent, var(--ink));
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.3;
  white-space: nowrap;
}
.stickers { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.stickers .sticker:nth-child(odd) { transform: rotate(-2.5deg); }
.stickers .sticker:nth-child(even) { transform: rotate(2deg); }

/* ── 화면 판 ────────────────────────────────────────── */
.shots { position: relative; width: 100%; }
.plate {
  margin: 0;
  padding: 3.4%;
  border-radius: 8%;
  background: var(--plate);
  border: 1px solid var(--plate-line);
  box-shadow: var(--shadow);
}
.plate img { width: 100%; border-radius: 5.6%; }

.shots.one { display: flex; justify-content: center; }
.shots.one .p1 { width: 100%; max-width: 340px; }

.shots.two { aspect-ratio: 100 / 172; }
.shots.two .p1 { position: absolute; top: 0; left: 0; width: 70%; }
.shots.two .p2 { position: absolute; bottom: 0; right: 0; width: 56%; }

/* 도장 자국 — 아트보드의 점선 궤적. 좁은 화면에서는 접는다 */
.trail { display: none; }
@media (min-width: 900px) {
  .trail {
    display: block;
    position: absolute;
    top: 4%;
    bottom: 4%;
    width: 34px;
    pointer-events: none;
  }
  .trail::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 15px;
    border-left: 3px dashed var(--trail-line, rgba(22, 22, 26, 0.14));
  }
  .trail i {
    position: absolute;
    left: 0;
    width: 17px;
    height: 17px;
    margin-left: 8px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 5px color-mix(in srgb, currentColor 24%, transparent);
  }
  .trail i:nth-child(1) { top: 0; }
  .trail i:nth-child(2) { top: 50%; }
  .trail i:nth-child(3) { bottom: 0; }
}

/* ── 히어로 ─────────────────────────────────────────── */
.hero {
  --accent: #ff746e;
  position: relative;
  overflow: hidden;
  background: #fff3ee;
  background-image: radial-gradient(circle at 5px 5px, rgba(255, 116, 110, 0.15) 3px, transparent 3px);
  background-size: 38px 38px;
}
.hero::after {
  content: "";
  position: absolute;
  top: -220px;
  right: -140px;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: rgba(255, 116, 110, 0.3);
  filter: blur(58px);
  pointer-events: none;
}
.hero .wrap { position: relative; z-index: 2; }

.hero-grid {
  display: grid;
  gap: clamp(38px, 6vw, 56px);
  align-items: center;
  padding: clamp(44px, 7vw, 76px) 0 clamp(56px, 9vw, 96px);
}
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1fr 0.86fr; }
}

.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 34px; }
.badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.badge svg { width: 19px; height: 19px; flex: none; }
.cta small { color: var(--muted); font-size: 13.5px; font-weight: 600; }

.hero .shots.one .p1 { max-width: 404px; }
.hero .plate { --plate: #fffcfa; }

/* ── 한눈에 ─────────────────────────────────────────── */
.glance { padding: clamp(52px, 8vw, 86px) 0; }
.glance ul {
  display: grid;
  gap: clamp(26px, 4vw, 34px);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 760px) {
  .glance ul { grid-template-columns: repeat(3, 1fr); }
}
.glance li { padding-top: 20px; border-top: 2px solid var(--line); }
.glance p { margin: 8px 0 0; color: var(--muted); font-size: 15.5px; }

/* ── 기능 절 ────────────────────────────────────────── */
.feature { position: relative; overflow: hidden; padding: var(--gutter) 0; }
.feature::after {
  content: "";
  position: absolute;
  top: -200px;
  right: -160px;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: var(--glow);
  filter: blur(58px);
  pointer-events: none;
}
.feature .wrap { position: relative; z-index: 2; }

.dots {
  background-image: radial-gradient(circle at 5px 5px, var(--pat) 3px, transparent 3px);
  background-size: 38px 38px;
}
.lines {
  background-image: repeating-linear-gradient(
    -45deg,
    var(--pat) 0 2px,
    transparent 2px 48px
  );
}

.feature-grid {
  display: grid;
  gap: clamp(40px, 6vw, 64px);
  align-items: center;
}
@media (min-width: 900px) {
  .feature-grid { grid-template-columns: 1fr 1fr; }
  .feature.flip .feature-grid > .copy { order: 2; }
}

/* background-color로 쓴다 — background 축약을 쓰면 .dots·.lines의 background-image를 지운다 */
.s-flow   { --accent: #3e86e8; --pat: rgba(62, 134, 232, 0.14); --glow: rgba(62, 134, 232, 0.22); background-color: #eaf3ff; }
.s-log    { --accent: #825bcb; --pat: rgba(130, 91, 203, 0.15); --glow: rgba(130, 91, 203, 0.2);  background-color: #f5edff; }
.s-growth { --accent: #27b566; --pat: rgba(39, 181, 102, 0.14); --glow: rgba(39, 181, 102, 0.2);  background-color: #eaf8f0; }
.s-widget { --accent: #e6a600; --pat: rgba(230, 166, 0, 0.2);   --glow: rgba(230, 166, 0, 0.24);  background-color: #fff2c9; }

.s-widget .sticker { color: #171717; }

/* 06 — 밤 화면. 잉크와 보조색을 뒤집는다 */
.s-night {
  --accent: #8ea5ff;
  --pat: rgba(142, 165, 255, 0.1);
  --glow: rgba(142, 165, 255, 0.2);
  --ink: #ffffff;
  --muted: #cbd2e6;
  --plate: #18233b;
  --plate-line: rgba(52, 68, 99, 0.9);
  --trail-line: rgba(142, 165, 255, 0.24);
  background-color: #0d1425;
  color: #fff;
}
.s-night .sticker { color: #101526; }
.s-night .sticker.mint { background: #62d5b4; }

/* ── 가격 ───────────────────────────────────────────── */
.pricing { padding: var(--gutter) 0; --accent: #16161a; }
.price-grid {
  display: grid;
  gap: clamp(34px, 5vw, 56px);
  align-items: start;
  margin-top: clamp(38px, 5vw, 54px);
}
@media (min-width: 980px) {
  .price-grid { grid-template-columns: 1fr 1fr 0.72fr; }
}

.card {
  padding: clamp(26px, 3.4vw, 34px);
  border: 2px solid var(--line);
  border-radius: 28px;
  background: #fff;
}
.card.pro { border-color: var(--ink); box-shadow: 0 20px 44px rgba(20, 18, 30, 0.1); }
.card .tag {
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(22, 22, 26, 0.07);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
}
.card.pro .tag { background: var(--ink); color: #fff; }
.card .price { margin: 6px 0 0; font-size: 15px; font-weight: 700; color: var(--muted); }
.card .price b { color: var(--ink); font-size: 27px; letter-spacing: -0.05em; }
.card ul { margin: 20px 0 0; padding: 0; list-style: none; }
.card li {
  position: relative;
  padding: 7px 0 7px 26px;
  font-size: 15.5px;
  border-top: 1px solid var(--line);
}
.card li:first-child { border-top: 0; }
.card li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 17px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--dot, #16161a);
}
.card.free { --dot: #9094a0; }
.card.pro { --dot: #3e9e7c; }
.card .note { margin: 18px 0 0; font-size: 13px; line-height: 1.65; color: var(--muted); }

.pricing .shots.one .p1 { max-width: 300px; }

/* ── 푸터 ───────────────────────────────────────────── */
footer { padding: clamp(48px, 7vw, 76px) 0 44px; border-top: 1px solid var(--line); }
.foot-grid { display: grid; gap: 28px; }
@media (min-width: 760px) {
  .foot-grid { grid-template-columns: 1fr auto; align-items: start; }
}
.foot-links { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.foot-links a { font-size: 15px; font-weight: 700; text-decoration: none; }
.foot-links a:hover { text-decoration: underline; }
.foot-meta { margin: 22px 0 0; font-size: 13.5px; color: var(--muted); }

/* ── 등장 연출 — 1회성 400ms (K-5) ──────────────────── */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal.in {
  opacity: 1;
  transform: none;
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 0.7, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal.in { opacity: 1; transform: none; transition: none; }
}


/* ══ 266차 추가 ══════════════════════════════════════════════
   언어 전환과 처리방침 문서 페이지. 위의 토큰·조판을 그대로 물려받는다. */

/* ── 가격 2단 — 페이월 캡처를 두지 않는 영문판용 ────── */
@media (min-width: 980px) {
  .price-grid.two { grid-template-columns: 1fr 1fr; }
}

/* ── 언어 전환 ──────────────────────────────────────── */
.topnav .lang {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: 0.02em;
}
.topnav .lang:hover { border-color: var(--ink); color: var(--ink); }

/* ── 문서 페이지 (처리방침) ─────────────────────────── */
.doc-head {
  padding: clamp(30px, 5vw, 46px) 0 clamp(34px, 5vw, 52px);
  border-bottom: 1px solid var(--line);
}
.doc-head .wrap { width: min(100% - calc(var(--pad) * 2), 720px); }
.doc-head h1 { margin-top: clamp(26px, 4vw, 38px); font-size: clamp(30px, 5.4vw, 46px); }
.doc-meta {
  margin: 20px 0 0;
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--muted);
}

.doc { padding: clamp(38px, 6vw, 60px) 0 clamp(52px, 8vw, 84px); }
.doc .wrap { width: min(100% - calc(var(--pad) * 2), 720px); }

.doc h2 {
  margin: clamp(38px, 5vw, 54px) 0 0;
  font-size: clamp(20px, 3vw, 25px);
  letter-spacing: -0.04em;
}
.doc h2:first-child { margin-top: 0; }
.doc h3 {
  margin: 30px 0 0;
  font-size: 17px;
  letter-spacing: -0.03em;
  color: var(--muted);
}
.doc p { margin: 15px 0 0; font-size: 16px; }
.doc ul { margin: 15px 0 0; padding: 0; list-style: none; }
.doc li {
  position: relative;
  margin-top: 9px;
  padding-left: 22px;
  font-size: 16px;
}
.doc li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 12px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(22, 22, 26, 0.32);
}
.doc a { font-weight: 700; text-underline-offset: 3px; }