/* static/css/pages/home.css — 홈 화면(index.html) 전용 스타일.
   히어로·기능 그리드·프로모 밴드·트렌딩 섹션.

   이 페이지가 로드하는 층: tokens + shell + app + 이 파일.
   공유 컴포넌트를 여기에 넣지 말 것 — 두 페이지 이상이 쓰게 되는 순간 그 층으로 올린다. */

/* ---- 홈 전용 스타일(히어로·스텝·프로모 밴드) ---- */
.hero{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,64px);align-items:center;
  max-width:1180px;margin:0 auto;padding:clamp(40px,7vw,84px) clamp(20px,5vw,56px) 24px}
/* 히어로 배경 도트 텍스처 — 모노크롬 유지, 가장자리로 갈수록 사라지게 마스킹(장식 전용). */
.hero::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;
  background-image:radial-gradient(var(--line) 1px,transparent 1.5px);background-size:24px 24px;
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 62% 40%,#000 0%,transparent 68%);
  mask-image:radial-gradient(ellipse 70% 80% at 62% 40%,#000 0%,transparent 68%)}
/* word-break:keep-all — 한국어 카피가 어절 중간("드롭하세/요")이 아니라 어절 단위로 줄바꿈된다. */
.hero-title{font-weight:700;font-size:var(--heroSize);line-height:1.16;letter-spacing:normal;margin:18px 0 0;font-feature-settings:"ss01";word-break:keep-all}
.hero-title .it{font-style:normal;color:inherit}
.hero-desc{font:400 18px/1.55 var(--font);color:var(--muted);max-width:440px;margin:22px 0 0;text-wrap:pretty;word-break:keep-all}
.hero-cta{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
.stats{display:flex;gap:28px;margin-top:36px;font:500 13px/1.3 var(--font);color:var(--muted)}
/* 통계 숫자는 /api/stats 가 오면 0 에서 실제 값까지 카운트업한다(아래 countStats).
   tabular-nums 없이는 프레임마다 글자폭이 달라져 옆 구분선까지 흔들린다.
   transform 을 받으려면 inline 이 아니어야 해 inline-block. */
.stats .num{color:var(--ink);font-size:20px;font-weight:700;font-variant-numeric:tabular-nums;display:inline-block}
/* 카운트가 멈추는 순간 한 번 튕겨 "값이 확정됐다"를 알린다(장식 전용). */
@keyframes dh-stat-pop{0%{transform:scale(1)}40%{transform:scale(1.16)}100%{transform:scale(1)}}
.stats .num.pop{animation:dh-stat-pop .44s cubic-bezier(.34,1.4,.64,1)}
@media(prefers-reduced-motion:reduce){.stats .num.pop{animation:none}}
.stats .sep{width:1px;background:var(--line)}
.drop{cursor:pointer;border:2px dashed var(--line);border-radius:16px;background:var(--panel);
  padding:clamp(32px,4vw,52px) 28px;text-align:center;transition:border-color .18s,background .18s;box-shadow:var(--shadow)}
.drop:hover{border-color:var(--accent);background:var(--accentSoft)}
.drop-ico{width:58px;height:58px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent);color:var(--accentInk);font:300 28px/1 var(--font);transition:transform .18s}
.drop:hover .drop-ico{transform:translateY(-3px)}
.drop-title{font:600 17px/1.4 var(--font);color:var(--ink)}
.drop-sub{font:400 13px/1.5 var(--font);color:var(--muted);margin-top:5px}
.drop-paste{margin-top:18px;background:none;border:0;cursor:pointer;font:500 13px/1 var(--font);color:var(--accent);transition:opacity .15s;text-decoration:none;display:inline-block}
.drop-paste:hover{opacity:.6}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1180px;margin:0 auto;padding:36px clamp(20px,5vw,56px) 8px}
.step{display:flex;gap:14px;align-items:flex-start}
.step .n{font:700 20px/1 var(--font);letter-spacing:normal;color:var(--accent)}
.step .t{font:600 15px/1.3 var(--font)}
.step .d{font:400 13px/1.5 var(--font);color:var(--muted)}
/* 기능 소개 그리드 — 각 카드가 도움말 앵커/MCP 가이드로 링크된다. 갤러리 .card(app.css,
   고정폭·호버 점프)와 충돌하지 않도록 .feature 로 명명. */
.features{max-width:1180px;margin:0 auto;padding:44px clamp(20px,5vw,56px) 8px}
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px}
.feature{display:block;text-decoration:none;border:1px solid var(--line);border-radius:16px;
  padding:22px;background:var(--panel);transition:border-color .15s,transform .15s,box-shadow .15s}
.feature:hover{border-color:var(--lineStrong);transform:translateY(-2px);box-shadow:var(--shadow)}
.feature .fi{font-size:22px;line-height:1}
.feature .ft{font:600 15.5px/1.35 var(--font);color:var(--ink);margin-top:12px;word-break:keep-all}
.feature .fd{font:400 13.5px/1.6 var(--font);color:var(--muted);margin-top:7px;text-wrap:pretty;word-break:keep-all}
@media(max-width:1000px){.features-grid{grid-template-columns:repeat(2,1fr)}}
.promo{background:#000;color:#fff;border-radius:16px;
  padding:clamp(34px,5vw,52px) clamp(28px,5vw,52px);
  display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.promo .ptitle{font:700 clamp(26px,3.2vw,34px)/1.18 var(--font);letter-spacing:normal;font-feature-settings:"ss01";margin:0;max-width:640px;word-break:keep-all}
.promo .pdesc{font:400 16px/1.5 var(--font);color:rgba(255,255,255,.66);margin:10px 0 0;max-width:540px;word-break:keep-all}
/* 프로모 밴드는 라이트에서 블랙 대비로 읽히는 요소 — 다크에선 배경과 같은 검정이라 사라지므로
   한 단계 밝은 패널로 바꾼다(흰 글자·흰 버튼은 그대로 유효). */
:root[data-theme="dark"] .promo{background:var(--panel2)}
@media(max-width:760px){.hero,.steps,.features-grid{grid-template-columns:1fr}.promo{flex-direction:column;align-items:flex-start}}