/* 줍줍 소개 페이지. 먹·한지·주홍 하나. 얼굴 서체는 Cormorant Garamond(영어)·본명조 가늘게(한국어), 본문은 시스템 서체 */
:root {
  --bg:#F6F2EA; --bg2:#EDE7DB; --ink:#1F1D1A; --sub:#4A443C; --faint:#6B645A; --rule:rgba(31,29,26,.12);
  --seal:#C4553A; --sealText:#B04A31; --card:#FBF8F2;
  --face:"Cormorant Garamond", "Noto Serif KR", Georgia, serif;
  --sans:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  --shadow:0 40px 90px -40px rgba(60,45,20,.45);
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#1A1816; --bg2:#22201D; --ink:#E9E3D6; --sub:#CFC7B9; --faint:#9C9488; --rule:rgba(228,221,207,.12);
    --seal:#D0644A; --sealText:#E9876E; --card:#22201D; --shadow:0 40px 90px -40px rgba(0,0,0,.85); }
}
body.ko { --face:"Noto Serif KR", serif; --sans:"Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", system-ui, sans-serif; word-break:keep-all; }

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
.wrap { max-width:1080px; margin:0 auto; padding:0 24px; }
kbd { font-family:var(--sans); font-weight:500; font-size:.8em; display:inline-flex; align-items:center; justify-content:center; min-width:1.75em; height:1.75em;
  padding:0 .35em; margin:0 .08em; border-radius:.35em; background:var(--card); border:1px solid var(--rule); box-shadow:0 1.5px 0 var(--rule); vertical-align:.1em; color:var(--ink); }

/* 위 막대 */
nav { position:sticky; top:0; z-index:50; backdrop-filter:saturate(1.3) blur(14px); -webkit-backdrop-filter:saturate(1.3) blur(14px);
  background:color-mix(in srgb, var(--bg) 82%, transparent); border-bottom:1px solid transparent; transition:border-color .2s; }
nav.scrolled { border-bottom-color:var(--rule); }
nav .wrap { height:60px; display:flex; align-items:center; gap:26px; }
.brand { display:flex; align-items:center; gap:10px; }
.brand img { border-radius:6px; box-shadow:0 0 0 1px var(--rule), 0 1px 3px rgba(0,0,0,.08); }
.brand span { font-family:var(--face); font-size:22px; font-weight:500; letter-spacing:.005em; }
body.ko .brand span { font-size:18px; font-weight:400; letter-spacing:.06em; }
nav .links { display:flex; gap:22px; margin-left:auto; font-size:14px; color:var(--faint); }
nav .links a:hover { color:var(--ink); }
.btn { display:inline-flex; align-items:center; gap:8px; height:46px; padding:0 22px; border-radius:999px; background:var(--ink); color:var(--bg);
  font-size:15px; font-weight:600; white-space:nowrap; transition:transform .15s, box-shadow .15s; }
.btn:hover { transform:translateY(-1px); box-shadow:0 10px 24px -10px rgba(0,0,0,.4); }
.btn.sm { height:34px; padding:0 15px; font-size:13.5px; }
.btn.ghost { background:transparent; color:var(--ink); border:1px solid var(--rule); }
.btn svg { width:16px; height:16px; }

/* 첫 화면 */
.hero { padding:96px 0 0; text-align:center; }
.kicker { font-size:13.5px; color:var(--faint); letter-spacing:.02em; margin:0; }
h1 { font-family:var(--face); font-weight:500; font-size:clamp(50px, 8.4vw, 98px); line-height:1.0; letter-spacing:-.015em; margin:22px 0 26px; }
body.ko h1 { font-weight:300; font-size:clamp(42px, 7vw, 80px); line-height:1.18; letter-spacing:.01em; }
.lede { font-size:clamp(17px, 2vw, 19.5px); line-height:1.65; color:var(--sub); max-width:600px; margin:0 auto; }
.ctas { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:34px; }
.meta { font-size:13px; color:var(--faint); margin:14px 0 0; }
.first { max-width:520px; margin:8px auto 0; font-size:13px; color:var(--faint); }
.first summary { cursor:pointer; list-style:none; display:inline; text-decoration:underline; text-decoration-color:var(--rule); text-underline-offset:3px; }
.first summary::-webkit-details-marker { display:none; }
.first p { line-height:1.6; margin:8px 0 0; color:var(--sub); }
.stage { margin:58px auto 0; max-width:1032px; }
.demo { display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; border-radius:16px; background:var(--bg2);
  box-shadow:var(--shadow), 0 0 0 1px var(--rule); }

/* 기능 셋 */
main { padding-bottom:20px; }
.feature { display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:60px; align-items:center; padding-top:140px; }
.feature.flip { grid-template-columns:minmax(0,7fr) minmax(0,4fr); }
.feature.flip .copy { order:2; }
.feature .demo { border-radius:12px; }
.num { font-family:var(--face); font-size:15px; color:var(--seal); letter-spacing:.04em; }
body.ko .num { font-family:"Cormorant Garamond", serif; }
h2 { font-family:var(--face); font-weight:500; font-size:clamp(34px, 4.4vw, 50px); line-height:1.08; letter-spacing:-.01em; margin:10px 0 16px; }
body.ko h2 { font-weight:300; font-size:clamp(28px, 3.6vw, 40px); line-height:1.3; letter-spacing:.01em; }
.copy p, .privacy p { font-size:17px; line-height:1.7; color:var(--sub); margin:0; }

/* 작은 것들 */
.small { padding-top:150px; }
.small h2 { margin-bottom:34px; }
.grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:0; border-top:1px solid var(--rule); }
.cell { padding:22px 22px 4px 0; }
.cell + .cell { padding-left:22px; border-left:1px solid var(--rule); }
.cell h3 { font-size:15.5px; font-weight:600; margin:0 0 6px; letter-spacing:-.005em; }
.cell p { font-size:14.5px; line-height:1.6; color:var(--faint); margin:0; }

/* 개인정보 */
.privacy { margin-top:150px; padding:64px 0 0; border-top:1px solid var(--rule); display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:60px; align-items:start; }
.privacy h2 { margin:0; }
.privacy a { color:var(--sealText); white-space:nowrap; }
.privacy a:hover { text-decoration:underline; text-underline-offset:3px; }

/* 끝: 사전 한 쪽 */
.final { text-align:center; padding:170px 0 120px; }
.word { display:flex; align-items:baseline; justify-content:center; gap:16px; }
.word .w { font-family:"Noto Serif KR", serif; font-weight:300; font-size:clamp(64px, 9vw, 104px); letter-spacing:.08em; line-height:1; }
.word .r { font-family:var(--face); font-size:20px; color:var(--faint); }
body.ko .word .r { font-family:var(--sans); font-size:15px; }
.def { font-family:var(--face); font-size:clamp(20px, 2.4vw, 26px); color:var(--sub); margin:18px 0 38px; }
body.ko .def { font-size:clamp(18px, 2vw, 21px); font-weight:300; letter-spacing:.02em; }

footer { border-top:1px solid var(--rule); padding:28px 0 44px; font-size:13px; color:var(--faint); }
footer .wrap { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
footer a { text-decoration:underline; text-decoration-color:var(--rule); text-underline-offset:3px; }
footer a:hover { color:var(--ink); }

/* 나타나기 */
.reveal { opacity:0; transform:translateY(18px); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity:1; transform:none; }
.hero .reveal:nth-child(2) { transition-delay:.05s; } .hero .reveal:nth-child(3) { transition-delay:.1s; } .hero .reveal:nth-child(4) { transition-delay:.15s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity:1; transform:none; transition:none; } .btn { transition:none; } }

@media (max-width: 860px) {
  nav .links { display:none; } nav .btn { margin-left:auto; }
  .hero { padding-top:64px; }
  .feature, .feature.flip { grid-template-columns:1fr; gap:26px; padding-top:96px; }
  .feature.flip .copy { order:0; }
  .grid { grid-template-columns:1fr 1fr; }
  .cell:nth-child(3) { border-left:0; padding-left:0; }
  .cell { border-bottom:1px solid var(--rule); padding-bottom:18px; }
  .privacy { grid-template-columns:1fr; gap:22px; margin-top:110px; }
  .small { padding-top:110px; }
  .final { padding:120px 0 90px; }
}
@media (max-width: 520px) {
  .grid { grid-template-columns:1fr; }
  .cell + .cell { border-left:0; padding-left:0; }
}