:root {
  color-scheme: light;
  --paper: #fbf4e8;
  --ink: #302923;
  --muted: #72665d;
  --coral: #e6755d;
  --mustard: #e4ae48;
  --sage: #91aa7b;
  --line: #443a32;
  font-family: "Apple SD Gothic Neo", Pretendard, ui-sans-serif, system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: radial-gradient(circle at 12% 9%, rgba(230,117,93,.08) 0 2px, transparent 3px), radial-gradient(circle at 88% 42%, rgba(145,170,123,.08) 0 2px, transparent 3px), var(--paper); background-size: 37px 39px, 43px 41px, auto; }
a { color: inherit; text-decoration: none; }
.site-header { display: flex; align-items: center; justify-content: space-between; width: min(1180px, calc(100% - 48px)); height: 78px; margin: auto; border-bottom: 2px solid rgba(48,41,35,.15); }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 850; letter-spacing: -.03em; }
.brand svg { width: 31px; fill: none; stroke: var(--coral); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.header-download { padding: 9px 15px; border: 2px solid var(--line); border-radius: 999px; font-size: 13px; font-weight: 800; box-shadow: 3px 3px 0 var(--mustard); }
.header-download:hover { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--mustard); }
.hero { display: grid; justify-items: center; width: min(980px, calc(100% - 48px)); min-height: 700px; margin: auto; padding: 82px 0 76px; text-align: center; }
.hero-copy { position: relative; z-index: 1; max-width: 760px; }
.kicker { margin: 0 0 18px; color: var(--coral); font-size: 13px; font-weight: 900; letter-spacing: .11em; }
.hero h1, .download h2 { margin: 0; font-family: Georgia, "Nanum Myeongjo", serif; font-weight: 500; letter-spacing: -.065em; line-height: 1.1; }
.hero h1 { font-size: clamp(54px, 6vw, 88px); }
.hero h1 em { position: relative; color: var(--coral); font-style: normal; }
.hero h1 em::after { content: ""; position: absolute; left: 1%; right: -2%; bottom: -7px; height: 10px; border-top: 3px solid var(--mustard); border-radius: 50%; transform: rotate(-1deg); }
.lede { max-width: 580px; margin: 28px auto; color: var(--muted); font-size: 18px; line-height: 1.75; word-break: keep-all; }
.hero-actions { display: flex; align-items: center; justify-content: center; gap: 18px; }
.button { display: inline-flex; align-items: center; min-height: 51px; padding: 0 23px; border: 2px solid var(--line); border-radius: 12px 9px 11px 8px; font-size: 14px; font-weight: 850; }
.button.primary { color: #fffaf1; background: var(--coral); box-shadow: 5px 5px 0 var(--line); }
.button.primary:not(.disabled):hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--line); }
.button.disabled { pointer-events: none; opacity: .55; }
.availability { color: var(--muted); font-size: 12px; }
.hero-doodle { width: min(650px, 90vw); margin-top: 12px; }
.hero-doodle img { display: block; width: 100%; height: auto; }
.features { display: grid; grid-template-columns: repeat(3, 1fr); width: min(1080px, calc(100% - 48px)); margin: 0 auto 130px; border-top: 2px solid var(--line); border-bottom: 2px solid var(--line); }
.features article { position: relative; min-height: 270px; padding: 34px 34px 38px; }
.features article + article { border-left: 2px dashed rgba(48,41,35,.3); }
.features article > span { color: var(--coral); font-family: Georgia, serif; font-size: 13px; font-weight: 700; }
.mini-doodle { display: grid; place-items: center; width: 50px; height: 50px; margin: 28px 0 22px; border: 2px solid var(--line); border-radius: 47% 53% 43% 57%; color: var(--ink); background: var(--mustard); font-size: 25px; transform: rotate(-4deg); }
.features article:nth-child(2) .mini-doodle { background: #f2bcae; transform: rotate(5deg); }
.features article:nth-child(3) .mini-doodle { background: #bfd0ad; }
.features h2 { margin: 0 0 12px; font-family: Georgia, "Nanum Myeongjo", serif; font-size: 26px; font-weight: 600; }
.features p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.75; word-break: keep-all; }
.download { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(50px, 9vw, 130px); width: min(1080px, calc(100% - 48px)); margin: 0 auto 120px; padding: 70px clamp(28px, 6vw, 75px); border: 2px solid var(--line); border-radius: 28px 22px 31px 20px; background: #f4e5cf; box-shadow: 9px 10px 0 #dac7ab; }
.download-title { position: relative; }
.tape { position: absolute; top: -92px; left: 50%; width: 100px; height: 28px; background: rgba(228,174,72,.55); transform: translateX(-50%) rotate(-2deg); }
.download h2 { font-size: clamp(46px, 5vw, 68px); }
.download-title > p:last-child { max-width: 380px; color: var(--muted); line-height: 1.7; }
.download-list { display: grid; align-content: center; gap: 11px; }
.download-card { display: grid; grid-template-columns: 45px 1fr 25px; align-items: center; gap: 13px; min-height: 75px; padding: 12px 16px; border: 2px solid var(--line); border-radius: 13px 10px 14px 11px; background: #fffaf0; transition: 120ms ease; }
.download-card:not(.disabled):hover { transform: translate(2px, 2px) rotate(-.2deg); box-shadow: 3px 3px 0 var(--coral); }
.download-card.disabled { cursor: not-allowed; opacity: .5; }
.platform { display: grid; place-items: center; width: 41px; height: 41px; border-radius: 50%; color: #fff; background: var(--ink); font-weight: 900; }
.download-card strong, .download-card small { display: block; }
.download-card strong { margin-bottom: 4px; font-size: 15px; }
.download-card small, .release-note { color: var(--muted); font-size: 11px; }
.download-card b { color: var(--coral); font-size: 22px; }
.release-note { margin: 5px 2px 0; }
footer { display: flex; align-items: center; justify-content: space-between; width: min(1180px, calc(100% - 48px)); margin: auto; padding: 34px 0 45px; border-top: 2px solid rgba(48,41,35,.15); color: var(--muted); font-size: 12px; }
footer .brand { color: var(--ink); }
@media (max-width: 820px) { .hero { padding-top: 60px; } .features { grid-template-columns: 1fr; } .features article { min-height: 0; } .features article + article { border-top: 2px dashed rgba(48,41,35,.3); border-left: 0; } .download { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .site-header, .hero, .features, .download, footer { width: min(100% - 28px, 1180px); } .hero { min-height: auto; padding-top: 52px; } .hero h1 { font-size: 48px; } .lede { font-size: 16px; } .hero-actions { flex-direction: column; gap: 12px; } .features { margin-bottom: 85px; } .download { margin-bottom: 80px; padding: 55px 20px 30px; } .tape { top: -70px; } footer { align-items: flex-start; flex-direction: column; gap: 12px; } }