/* assets/style.css — 시스템 폰트, 640px 단일 컬럼, keep-all (web-design-qa 준수) */
:root { --accent:#1d4ed8; --ink:#1a1a1a; --sub:#666; --line:#eee; --bg:#fff; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); line-height:1.65;
  font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  word-break:keep-all; overflow-wrap:break-word; min-height:100dvh; }
main, .site-header, .site-footer { max-width:640px; margin:0 auto; padding:0 16px; }
h1 { font-size:1.6rem; line-height:1.3; } h2 { font-size:1.2rem; line-height:1.3; margin-top:2rem; }
.site-header { display:flex; align-items:baseline; gap:8px; padding:14px 16px; border-bottom:1px solid var(--line); }
.site-header .logo { font-weight:700; color:var(--ink); text-decoration:none; font-size:1.05rem; }
.site-header .tag { color:var(--sub); font-size:.8rem; }
.hero-img { width:100%; max-width:340px; height:auto; display:block; border-radius:12px; margin:12px 0; }
.chips { display:flex; flex-wrap:wrap; gap:6px; padding:0; list-style:none; }
.chips li { border:1px solid var(--line); border-radius:999px; padding:2px 10px; font-size:.85rem; }
.chips li a { color:var(--ink); text-decoration:none; }
.video-list { list-style:none; padding:0; }
.video-list li { padding:10px 0; border-bottom:1px solid var(--line); font-size:.95rem; }
.card-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; padding:0; list-style:none; }
.card-grid img { width:100%; border-radius:10px; aspect-ratio:1; object-fit:cover; }
.card-grid a { color:var(--ink); text-decoration:none; font-size:.92rem; }
.cta { background:#eff6ff; border:1px solid #bfdbfe; border-radius:14px; padding:18px; margin:24px 0; }
.cta .feat { list-style:none; padding:0; } .cta .feat li { margin:6px 0; }
.cta-note { color:var(--sub); font-size:.8rem; text-align:center; margin:8px 0 0; }
.cta-btn { display:block; text-align:center; background:var(--accent); color:#fff; font-weight:700;
  border-radius:10px; padding:14px; text-decoration:none; margin-top:12px; }
.cta-btn:focus-visible { outline:3px solid #93c5fd; outline-offset:2px; }
.locked { color:var(--sub); } .locked .dot { border:1px dashed #ccc; border-radius:8px; padding:8px 12px; }
.site-footer { color:var(--sub); font-size:.85rem; padding:24px 16px 40px; border-top:1px solid var(--line); margin-top:40px; }
.stat { font-variant-numeric:tabular-nums; }
@media (max-width:420px){ .card-grid { grid-template-columns:repeat(2,1fr); } }
.more-link { text-align:right; font-size:.9rem; }
.more-link a { color:var(--accent); text-decoration:none; font-weight:600; }

/* 홈 상단 앱 장점 카드 */
.feature-cards { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; padding:0; list-style:none; margin:16px 0 0; }
.feature-cards li { background:#fafafa; border:1px solid var(--line); border-radius:12px; padding:14px; }
.feature-cards li span { font-size:1.4rem; }
.feature-cards h3 { font-size:1rem; line-height:1.3; margin:6px 0 4px; }
.feature-cards p { font-size:.9rem; color:var(--sub); margin:0; line-height:1.5; }
@media (max-width:480px){ .feature-cards { grid-template-columns:1fr; } }

/* 홈 요리 봇 대화 예시 */
.chat { display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.bubble { max-width:78%; padding:10px 14px; border-radius:16px; margin:0; font-size:.95rem; line-height:1.5; }
.bubble.user { align-self:flex-end; background:var(--accent); color:#fff; border-bottom-right-radius:4px; }
.bubble.bot { align-self:flex-start; background:#f2f2f2; color:var(--ink); border-bottom-left-radius:4px; }
.chat-caption { color:var(--sub); font-size:.85rem; margin-top:8px; }

/* 하단 플로팅 CTA (전 페이지 공통) */
body { padding-bottom:84px; }
.sticky-cta { position:fixed; left:0; right:0; bottom:0; z-index:20;
  background:rgba(255,255,255,.96); border-top:1px solid var(--line);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom)); transition:transform .2s; }
.sticky-cta .cta-btn { max-width:640px; margin:0 auto; display:block; }
.sticky-cta-hidden { transform:translateY(110%); }
@media (prefers-reduced-motion: reduce){ .sticky-cta { transition:none; } }

.section-caption { color:var(--sub); font-size:.9rem; margin:4px 0 10px; }
.breadcrumb { font-size:.85rem; color:var(--sub); margin:10px 0 0; }
.breadcrumb a { color:var(--sub); } .breadcrumb span { color:var(--ink); }
.stat-list { padding-left:20px; } .stat-list li { margin:6px 0; }
.section-caption strong { color:var(--ink); }

.chat-sub { font-size:1rem; margin:18px 0 8px; }
.bubble.user.photo { background:#e8edfb; color:var(--ink); font-style:italic; }
.chat-examples li { background:#f7f9ff; }