:root { --blue:#1644c8; --coral:#fa644e; --yellow:#f8bb35; --ink:#14201d; --paper:#fffefa; --green:#2a8a63; --line:#d8ded9; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"Noto Sans KR",sans-serif; }
a { color:inherit; text-decoration:none; }
.skip-link { position:absolute; left:-999px; }
.skip-link:focus { left:1rem; top:1rem; background:#fff; padding:.75rem; z-index:10; }
.site-header { height:86px; max-width:1320px; margin:auto; padding:0 34px; display:flex; align-items:center; justify-content:space-between; }
.brand { color:var(--blue); font-weight:800; letter-spacing:-.07em; font-size:1.65rem; }
nav { display:flex; gap:34px; font-size:.9rem; font-weight:600; }
nav a:hover, footer a:hover { color:var(--blue); }
.hero { max-width:1320px; min-height:680px; margin:auto; padding:78px 34px 96px; display:grid; grid-template-columns:.88fr 1.12fr; gap:44px; align-items:center; overflow:hidden; }
.hero-copy h1 { color:var(--blue); margin:0; font-size:clamp(3.7rem,6.4vw,6.3rem); line-height:.99; letter-spacing:-.105em; font-weight:800; }
.hero-copy h1 span { color:var(--coral); }
.hero-copy p { max-width:430px; font-family:"Gowun Dodum",sans-serif; font-size:1.15rem; line-height:1.95; margin:36px 0; }
.button { display:inline-flex; gap:24px; align-items:center; background:var(--blue); color:#fff; padding:18px 22px; font-size:1.05rem; font-weight:700; box-shadow:8px 8px 0 #0d2b7c; transition:transform .2s ease, box-shadow .2s ease; }
.button:hover { transform:translate(3px,3px); box-shadow:5px 5px 0 #0d2b7c; }
.button span { font-size:1.4rem; }
.hero-collage { position:relative; min-height:510px; }
.paper-shape { position:absolute; filter:drop-shadow(8px 11px 12px rgba(13,31,25,.13)); }
.paper-blue { width:240px; height:150px; background:#2563d8; border-radius:140px 20px 50px 20px; transform:rotate(17deg); top:5px; left:4%; }
.paper-coral { width:150px; height:155px; background:var(--coral); transform:rotate(12deg); top:3px; right:3%; clip-path:polygon(0 0,100% 12%,89% 100%,0 86%); }
.paper-yellow { width:210px; height:120px; background:var(--yellow); clip-path:polygon(0 50%,60% 0,100% 55%,55% 100%); bottom:0; left:8%; }
.mini-app { position:absolute; width:142px; aspect-ratio:1/1.22; overflow:hidden; background:#eee; box-shadow:8px 10px 0 rgba(25,42,35,.17); display:grid; place-items:center; font-size:4rem; font-weight:800; }
.mini-app img { width:100%; height:100%; object-fit:cover; }
.hangul { background:#ffc637; color:#8c35ba; top:155px; left:5%; transform:rotate(-4deg); }
.fox { top:150px; left:34%; transform:rotate(1deg); }
.camera { top:150px; right:7%; transform:rotate(4deg); background:#bce3f4; color:#1644c8; }
.camera span, .art-camera { position:relative; font-size:0; }
.camera span::before, .art-camera::before { content:""; display:block; width:76px; height:54px; border:9px solid currentColor; border-radius:10px; box-shadow:inset 0 0 0 9px #bce3f4; }
.camera span::after, .art-camera::after { content:""; position:absolute; width:22px; height:22px; border:7px solid currentColor; border-radius:50%; left:27px; top:16px; }
.app-index { background:#fff; padding:112px max(34px,calc((100vw - 1252px)/2)); }
.section-heading { max-width:420px; margin-bottom:64px; }
h2 { margin:0; font-size:clamp(2.25rem,4vw,4.5rem); line-height:1.1; letter-spacing:-.075em; }
.section-heading p, .about > p { font-family:"Gowun Dodum",sans-serif; line-height:1.8; font-size:1.05rem; }
.app-list { display:grid; grid-template-columns:repeat(12,1fr); gap:28px; align-items:stretch; }
.app-feature { min-height:360px; display:flex; flex-direction:column; overflow:hidden; }
.app-feature { grid-column:span 4; }
.app-art { height:210px; display:grid; place-items:center; overflow:hidden; }
.app-art img { width:100%; height:100%; object-fit:cover; }
.app-hangul .app-art { background:#f5c331; }.app-jigsaw .app-art { background:#447d57; }.app-camera .app-art { background:#a4d8ea; }
.art-camera { color:#1644c8; }
.app-detail { padding:21px 0; }.app-detail h3 { font-size:1.62rem; margin:4px 0 9px; letter-spacing:-.065em; }.app-detail p { margin:0; line-height:1.65; }.type { color:var(--blue); font-size:.76rem; font-weight:800; }.app-detail span { display:inline-block; margin-top:16px; color:#53615b; font-size:.8rem; border-bottom:1px solid currentColor; }
.about { background:var(--blue); color:#fff; padding:104px max(34px,calc((100vw - 1252px)/2)); display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:end; }.about .type { color:#b9ccff; }.about > p { max-width:470px; font-size:1.25rem; }
footer { max-width:1320px; margin:auto; padding:74px 34px 42px; display:grid; grid-template-columns:2fr 1fr 1fr; gap:48px; } footer p { line-height:1.75; max-width:300px; } footer h2 { font-size:1rem; letter-spacing:-.04em; margin-bottom:18px; } footer a { display:block; margin:9px 0; }
@media (max-width:760px) { .site-header { height:70px; padding:0 20px; }.brand { font-size:1.35rem; } nav { gap:16px; font-size:.75rem; } nav a:nth-child(2){display:none}.hero { padding:50px 22px 70px; grid-template-columns:1fr; gap:38px; min-height:0; }.hero-copy h1 { font-size:3.6rem; }.hero-copy p { font-size:1rem; margin:28px 0; }.hero-collage { min-height:410px; }.mini-app { width:104px; }.paper-blue { width:175px; }.paper-coral { width:110px; height:125px; }.app-index { padding:76px 22px; }.app-list { display:block; }.app-feature { min-height:0; margin-bottom:48px; }.app-art { height:255px; }.about { padding:76px 22px; grid-template-columns:1fr; gap:32px; }.about > p { margin:0; } footer { padding:58px 22px 32px; grid-template-columns:1fr; gap:24px; } }