/* 포크폴리오 홈: 광고 영상을 스크롤로 펼친 페이지.
   색은 앱·광고와 같은 간장색 한 가지 + 크림색 바탕 (다크 모드에서도 밝게 유지) */
:root {
  --soy: #74492b;
  --soy-deep: #5a3720;
  --soy-soft: #f1e6da;
  --cream: #faf6ef;
  --paper: #fffdf8;
  --ink: #2b2622;
  --sub: #7a6f66;
  --line: #e8dfd3;
  --rule: #e9e1d4;
  --margin: #e8b4a8;
  --nav-h: 60px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "NanumSquareRound", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 17px;
  line-height: 1.7;
  word-break: keep-all;
  overflow-wrap: break-word;
  overflow-x: clip;
}
img, video { display: block; max-width: 100%; }
a { color: var(--soy); }
.gaegu, h1, .brand-name, .story h3 em, .send h2, .get h2, .sec-title { font-family: "Gaegu", "NanumSquareRound", sans-serif; font-weight: 700; }

/* ─── 위쪽 메뉴 ─── */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 max(16px, calc((100vw - 1160px) / 2));
  transition: background .3s, box-shadow .3s;
}
.nav.solid { background: rgba(250, 246, 239, .86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line); }
.brand { display: flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font-family: "Gaegu", sans-serif; font-weight: 700; font-size: 26px; transition: color .3s; }
.brand img { width: 32px; height: 32px; border-radius: 9px; }
.nav.solid .brand { color: var(--ink); }
.nav-links { display: flex; gap: 20px; align-items: center; font-size: 15px; }
.nav-links a { color: rgba(255, 255, 255, .9); text-decoration: none; transition: color .3s; }
.nav.solid .nav-links a { color: var(--sub); }
.nav-links .nav-cta, .nav.solid .nav-links .nav-cta { color: #fff; background: var(--soy); padding: 7px 16px; border-radius: 999px; font-weight: 800; }
@media (max-width: 560px) { .nav-links a:not(.nav-cta) { display: none; } }

/* ─── ① 오늘 저녁 뭐 해 먹지? ─── */
.hook { position: relative; height: 100vh; min-height: 560px; background: var(--soy-deep); }
.hook-stick { position: relative; height: 100%; overflow: hidden; }
.wall { position: absolute; inset: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 16px; transform: scale(calc(1 + var(--p, 0) * .08)); }
.wall-row { display: flex; gap: 16px; width: max-content; animation: slide 60s linear infinite; }
.wall-row.rev { animation-direction: reverse; animation-duration: 70s; }
.wall-row img { width: clamp(150px, 19vw, 260px); aspect-ratio: 1; object-fit: cover; border-radius: 28px; }
@keyframes slide { to { transform: translateX(-50%); } }
.hook-shade { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(58, 34, 18, .55), rgba(58, 34, 18, .82)); opacity: calc(.85 + var(--p, 0) * .15); }
.hook-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #fff; padding: 0 16px;
  transform: translateY(calc(var(--p, 0) * 80px)); opacity: calc(1 - var(--p, 0) * 1.2); }
.hook h1 { font-size: clamp(64px, 12vw, 168px); line-height: 1.02; margin: 0; letter-spacing: -.01em; text-shadow: 0 6px 40px rgba(0, 0, 0, .35); }
.hook-text p { font-size: clamp(17px, 2vw, 22px); margin: 22px 0 0; opacity: .92; }
.scroll-hint { position: absolute; left: 50%; bottom: 28px; width: 28px; height: 44px; margin-left: -14px; border: 2px solid rgba(255, 255, 255, .7); border-radius: 16px; opacity: calc(1 - var(--p, 0) * 4); }
.scroll-hint span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: #fff; animation: hint 1.6s ease-in-out infinite; }
@keyframes hint { 50% { transform: translateY(12px); opacity: .3; } }

/* ─── ② 브랜드 (광고의 공책 장면) ─── */
.brand-sec { padding: 120px 16px; background: var(--cream); }
.note-paper {
  max-width: 760px; margin: 0 auto; padding: 72px 24px 64px; text-align: center; border-radius: 36px;
  background:
    linear-gradient(90deg, transparent 54px, var(--margin) 54px, var(--margin) 56px, transparent 56px),
    repeating-linear-gradient(var(--paper) 0 39px, var(--rule) 39px 40px);
  box-shadow: 0 30px 80px rgba(90, 55, 32, .12), 0 0 0 1px var(--line);
}
.brand-icon { margin: 0 auto 14px; border-radius: 28px; box-shadow: 0 12px 30px rgba(90, 55, 32, .18); }
.brand-name { font-size: clamp(64px, 10vw, 112px); line-height: 1; margin: 8px 0 4px; color: var(--ink); }
.brand-sub { font-size: clamp(19px, 2.4vw, 24px); color: var(--soy); font-weight: 800; margin: 0 0 30px; }
.brand-free { font-size: 14px; color: var(--sub); margin: 16px 0 0; }

/* 스토어 버튼 */
.stores { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.store { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; min-width: 160px; padding: 11px 22px; border-radius: 16px; background: var(--ink); color: #fff; text-decoration: none; line-height: 1.25; text-align: center; }
.store small { font-size: 12px; opacity: .75; }
.store b { font-size: 20px; }
.store.soon { background: var(--soy-soft); color: var(--soy); cursor: default; }

/* ─── ③ 기능 5개 (차례대로) ─── */
.story { max-width: 1100px; margin: 0 auto; padding: 40px 24px 60px; }
.feat { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; padding: 56px 0; }
.feat.rev .feat-copy { order: 2; }
.no { display: inline-block; font-weight: 800; font-size: 15px; color: var(--soy); background: var(--soy-soft); padding: 3px 12px; border-radius: 999px; }
.feat h3 { font-size: clamp(26px, 3.2vw, 38px); line-height: 1.3; margin: 16px 0 14px; font-weight: 800; }
.feat h3 em { font-style: normal; font-size: 1.32em; color: var(--soy); background: linear-gradient(transparent 62%, rgba(116, 73, 43, .16) 62%); }
.feat-copy p { font-size: 18px; color: var(--sub); margin: 0; max-width: 28em; }
.feat-phone { display: flex; justify-content: center; }
.feat-phone.reveal { transition-delay: .1s; }
.phone { position: relative; width: min(300px, 70vw); aspect-ratio: 520 / 1130; border-radius: 44px; padding: 10px; background: #1d1714; box-shadow: 0 40px 90px rgba(60, 35, 15, .25), inset 0 0 0 2px #3a302a; }
.phone video { width: 100%; height: 100%; object-fit: cover; border-radius: 35px; background: #f6f2ec; }
@media (max-width: 820px) {
  .feat { grid-template-columns: 1fr; gap: 24px; padding: 40px 0; text-align: center; }
  .feat.rev .feat-copy { order: 0; }
  .feat-copy p { margin: 0 auto; font-size: 16px; }
  .phone { width: min(250px, 64vw); border-radius: 36px; padding: 8px; }
  .phone video { border-radius: 29px; }
}

/* ─── ④ 종이비행기 ─── */
.send { background: var(--soy); color: #fff; padding: 120px 16px; overflow: hidden; }
.send-in { max-width: 1060px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto; gap: 56px; align-items: center; }
.eyebrow { font-weight: 800; color: #f3d3b6; margin: 0 0 8px; }
.send h2 { font-size: clamp(48px, 6.4vw, 84px); line-height: 1.08; margin: 0 0 20px; }
.send-copy p:last-child { font-size: 19px; opacity: .88; max-width: 26em; }
.send-video video { width: min(340px, 70vw); aspect-ratio: 9 / 16; object-fit: cover; border-radius: 32px; box-shadow: 0 40px 90px rgba(0, 0, 0, .35); }
@media (max-width: 820px) { .send-in { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 36px; } .send-copy p:last-child { margin: 0 auto; } }

/* ─── ⑤ 글자가 차오르는 문장 ─── */
.fill { padding: 100px 0 120px; }
.fill-text { margin: 0 auto; max-width: 1060px; padding: 0 20px; display: flex; flex-direction: column; font-size: clamp(32px, 5.2vw, 68px); line-height: 1.32; font-weight: 800; letter-spacing: -.02em; }
.fill-text span { display: block; color: transparent; background: linear-gradient(90deg, var(--soy) var(--f, 0%), #d9cfc4 var(--f, 0%)); -webkit-background-clip: text; background-clip: text; }

/* "1초 만에 로그인." 강조 */
.fill-text span.big { font-family: "Gaegu", sans-serif; font-size: 1.55em; line-height: 1.15; margin: 4px 0 8px; }
.fill-text span.big { background: linear-gradient(90deg, var(--soy) var(--f, 0%), #d9cfc4 var(--f, 0%)); -webkit-background-clip: text; background-clip: text; }

/* ─── ⑥ 작은 기능 카드 ─── */
.more { max-width: 1160px; margin: 0 auto; padding: 40px 20px 100px; }
.sec-title { font-size: clamp(44px, 6vw, 72px); text-align: center; margin: 0 0 36px; line-height: 1.1; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mcard { background: var(--paper); border: 1px solid var(--line); border-radius: 28px; padding: 28px 26px; transition: transform .3s, box-shadow .3s; }
.mcard:hover { transform: translateY(-4px); box-shadow: 0 20px 50px rgba(90, 55, 32, .1); }
.mcard b { font-size: 20px; display: block; margin-bottom: 6px; }
.mcard p { margin: 0; color: var(--sub); }
@media (max-width: 900px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cards { grid-template-columns: 1fr; } }

/* ─── ⑦ 광고 영상 ─── */
.film { padding: 0 16px 100px; display: flex; justify-content: center; }
.film-btn { display: flex; align-items: center; gap: 18px; border: 0; cursor: pointer; font: inherit; color: var(--ink); text-align: left;
  padding: 18px 30px 18px 18px; border-radius: 999px; background: var(--paper); box-shadow: 0 16px 40px rgba(90, 55, 32, .12), 0 0 0 1px var(--line); }
.film-btn b { display: block; font-size: 19px; }
.film-btn small { color: var(--sub); font-size: 14px; }
.play { width: 56px; height: 56px; border-radius: 50%; background: var(--soy); position: relative; flex: none; }
.play::after { content: ""; position: absolute; left: 22px; top: 18px; border-left: 16px solid #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.modal { position: fixed; inset: 0; z-index: 100; background: rgba(20, 14, 10, .82); display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal-box { position: relative; width: min(1100px, 100%); }
.modal-box video { width: 100%; max-height: 86vh; border-radius: 18px; background: #000; }
.modal-x { position: absolute; right: -6px; top: -48px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #fff; font-size: 26px; line-height: 1; cursor: pointer; }

/* ─── ⑧ 받기 ─── */
.get { padding: 120px 16px; background: radial-gradient(ellipse at 50% 0%, #f3e3d1, var(--cream) 70%); }
.get-in { text-align: center; }
.get img { margin: 0 auto 18px; border-radius: 24px; box-shadow: 0 12px 30px rgba(90, 55, 32, .16); }
.get h2 { font-size: clamp(54px, 8vw, 104px); line-height: 1.04; margin: 0 0 30px; }

/* 자주 묻는 질문 */
.faq { max-width: 820px; margin: 0 auto; padding: 40px 20px 100px; }
.faq .sec-title { font-size: clamp(36px, 5vw, 56px); }
.faq details { background: var(--paper); border: 1px solid var(--line); border-radius: 20px; padding: 18px 22px; margin: 10px 0; }
.faq summary { cursor: pointer; font-weight: 800; }
.faq details p { margin: 10px 0 0; color: var(--sub); }

/* 아래 */
.foot { border-top: 1px solid var(--line); padding: 28px max(16px, calc((100vw - 1160px) / 2)) 48px; color: var(--sub); font-size: 14px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.foot a { color: var(--sub); }
.foot p { margin: 8px 0 0; }
.credit { font-size: 12px; opacity: .8; }

/* 나타나기 */
.reveal { opacity: 0; transform: translateY(36px); transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1); }
.reveal.in { opacity: 1; transform: none; }
.cards .reveal:nth-child(3n+2) { transition-delay: .08s; }
.cards .reveal:nth-child(3n) { transition-delay: .16s; }

/* 움직임 줄이기를 켠 사람: 멈춘 화면으로 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fill-text span { --f: 100% !important; }
  .wall-row, .scroll-hint span { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hook-text, .wall { transform: none; }
}