:root { --paper:#f5f5f0; --white:#fff; --ink:#202825; --muted:#64736b; --line:#d9e0d9; --green:#235c49; --soft:#e6efe6; --stage:#252c29; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:28px; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"Avenir Next","Apple SD Gothic Neo","Malgun Gothic",sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
button,summary,a { -webkit-tap-highlight-color:transparent; }
a:focus-visible,summary:focus-visible { outline:3px solid #94b9a2; outline-offset:5px; border-radius:3px; }
.skip { position:absolute; top:-100px; left:16px; z-index:10; padding:12px; background:var(--green); color:#fff; }
.skip:focus { top:12px; }
.wrap { width:min(1184px,calc(100% - 80px)); margin:0 auto; }
.site-header { border-bottom:1px solid var(--line); }
.header-row { min-height:92px; display:flex; align-items:center; gap:30px; }
.brand { display:inline-flex; align-items:center; gap:10px; text-decoration:none; white-space:nowrap; }
.brand-mark { width:30px; height:30px; color:var(--green); }
.brand-name { font-size:21px; letter-spacing:-.06em; font-weight:780; }
.brand small { margin:4px 0 0 3px; padding-left:11px; border-left:1px solid #b7c2b8; font-size:10px; font-weight:700; color:var(--muted); letter-spacing:.1em; }
.header-nav { margin-left:auto; display:flex; align-items:center; gap:25px; font-size:12px; }
.header-nav a { color:#52645a; text-decoration:none; }
.header-nav a:hover { color:var(--green); text-decoration:underline; text-underline-offset:5px; }
.language { display:flex; gap:5px; padding:3px; border:1px solid var(--line); border-radius:6px; }
.language a { min-width:30px; min-height:26px; display:grid; place-items:center; border-radius:3px; font-size:10px; font-weight:800; text-decoration:none; }
.language a[aria-current] { background:var(--soft); color:var(--green); }
.button { min-height:44px; padding:12px 20px; display:inline-flex; justify-content:center; align-items:center; gap:17px; border:1px solid var(--green); border-radius:7px; background:var(--green); color:white; text-decoration:none; font-size:13px; line-height:1.4; font-weight:700; transition:background .15s,transform .15s; }
.button:hover { background:#194b3b; }
.button:active { transform:translateY(1px); }
.button svg { width:17px; height:17px; flex:none; }
.button.secondary { background:transparent; color:var(--green); border-color:#a8bdac; }
.button.secondary:hover { background:var(--soft); }
.header-cta { padding:10px 14px; min-height:38px; font-size:11px; }
.eyebrow { font-size:10px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; line-height:1.65; color:#6b8071; }
.hero { padding:78px 0 65px; display:grid; grid-template-columns:.9fr 1.3fr; gap:47px; align-items:center; }
.hero h1 { margin:17px 0 23px; font-size:clamp(38px,4.7vw,62px); line-height:1.06; font-weight:650; letter-spacing:-.068em; }
.hero h1 span { display:block; }
.hero h1 span:last-child { color:var(--green); }
.hero p { color:var(--muted); font-size:15px; line-height:1.75; max-width:390px; margin:0 0 27px; }
.hero .no-account { margin:14px 0 0; font-size:11px; color:#6a7b70; }
.hero .formats { margin-top:26px; font-size:10px; letter-spacing:.08em; color:#7c8a80; }
.result { margin:0; position:relative; padding:11px; background:white; border:1px solid #cfd7cf; border-radius:9px; box-shadow:0 20px 48px #283d3020; }
.result-top { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 4px 12px; color:#77877c; font-size:9px; letter-spacing:.08em; }
.result-top span:first-child { font-weight:800; color:var(--green); }
.result img { width:100%; height:auto; display:block; border-radius:3px; }
.result figcaption { padding:12px 5px 3px; color:#69796e; font-size:10px; line-height:1.6; }
.principles { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; padding:24px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.principles strong { display:block; font-size:12px; font-weight:750; color:var(--green); margin-bottom:6px; }
.principles p { margin:0; color:var(--muted); font-size:11px; line-height:1.6; }
.section { padding:74px 0; }
.section-head { display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:32px; }
.section-head h2 { font-size:32px; line-height:1.15; font-weight:650; letter-spacing:-.045em; margin:12px 0 0; }
.steps { padding:0; list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:34px; margin:0; }
.step-number { font-size:11px; font-variant-numeric:tabular-nums; color:#779181; margin-bottom:19px; display:flex; align-items:center; gap:12px; }
.step-number::after { content:""; flex:1; height:1px; background:var(--line); }
.steps h3 { font-size:17px; font-weight:730; letter-spacing:-.025em; margin:0 0 11px; }
.steps p { font-size:13px; line-height:1.8; color:var(--muted); margin:0; }
.cases-section { padding-top:0; }
.use-cases { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); border-radius:7px; overflow:hidden; background:#fafbf7; }
.use-case { padding:27px 28px; border-right:1px solid var(--line); }
.use-case:last-child { border-right:0; }
.use-case .case-index { font-size:10px; color:#849287; }
.use-case h3 { font-size:16px; line-height:1.35; margin:17px 0 12px; letter-spacing:-.025em; font-weight:720; }
.use-case p { font-size:12px; line-height:1.8; color:var(--muted); margin:0; }
.local-note { margin-top:35px; padding:26px 29px; border-left:3px solid #628773; background:#eaf0e7; display:grid; grid-template-columns:.72fr 1.3fr; gap:35px; align-items:center; }
.local-note h3 { font-size:19px; line-height:1.35; letter-spacing:-.035em; font-weight:670; margin:0; color:var(--green); }
.local-note p { font-size:12px; line-height:1.8; color:#647667; margin:0; }
.pricing-section { border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#ecefe8; }
.price-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.price-card { display:flex; flex-direction:column; padding:31px 34px; background:#f9fbf7; border:1px solid #cfdacf; border-radius:8px; }
.price-card.paid { background:white; border-color:#8ba593; }
.price-card .price-label { font-size:10px; font-weight:750; color:#6a8272; letter-spacing:.09em; text-transform:uppercase; }
.price-card h3 { font-size:19px; font-weight:700; letter-spacing:-.035em; margin:11px 0 19px; }
.price { color:var(--green); font-size:47px; line-height:1; letter-spacing:-.06em; margin:0; font-weight:670; }
.price-period { margin:9px 0 24px; color:#687d6f; font-size:11px; }
.price-card ul { margin:0 0 26px; padding:0; list-style:none; flex:1; }
.price-card li { font-size:12px; color:#5e7366; line-height:1.75; padding:7px 0 7px 18px; position:relative; }
.price-card li::before { content:"✓"; position:absolute; left:0; color:var(--green); }
.price-card .button { align-self:start; }
.purchase-note { margin:22px 0 0; color:#6d7c71; font-size:11px; line-height:1.8; max-width:840px; }
.faq-section { display:grid; grid-template-columns:.8fr 1.35fr; gap:66px; align-items:start; }
.faq-section .section-head { margin:0; }
.faq { border-top:1px solid var(--line); }
.faq details { border-bottom:1px solid var(--line); }
.faq summary { padding:21px 31px 21px 0; list-style:none; cursor:pointer; position:relative; font-size:13px; line-height:1.6; font-weight:720; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; position:absolute; right:2px; top:20px; font-size:18px; font-weight:400; color:#567862; }
.faq details[open] summary::after { content:"−"; }
.faq p { margin:0; padding:0 30px 21px 0; font-size:12px; line-height:1.8; color:var(--muted); }
.final { background:var(--stage); color:#f0f4ed; border-radius:9px; padding:35px 38px; margin-bottom:66px; display:flex; align-items:center; justify-content:space-between; gap:30px; }
.final h2 { font-size:27px; font-weight:650; letter-spacing:-.04em; line-height:1.25; margin:0 0 10px; }
.final p { font-size:12px; color:#b1c1b4; margin:0; line-height:1.6; }
.final .button { background:#e3eee4; color:#214d39; border-color:#e3eee4; }
.final .button:hover { background:white; }
.site-footer { border-top:1px solid var(--line); }
.footer-row { min-height:115px; display:flex; justify-content:space-between; align-items:center; gap:30px; }
.footer-brand strong { font-size:15px; font-weight:740; letter-spacing:-.05em; }
.footer-brand p { font-size:10px; color:#7b8980; line-height:1.7; margin:6px 0 0; }
.footer-nav { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px 20px; font-size:11px; color:#64796a; }
.footer-nav a { text-decoration:none; min-height:26px; display:inline-flex; align-items:center; }
.footer-nav a:hover { text-decoration:underline; text-underline-offset:4px; }
.ko .hero h1 { font-size:clamp(36px,4.2vw,54px); line-height:1.16; letter-spacing:-.075em; }
.not-found { min-height:70vh; display:flex; flex-direction:column; align-items:start; justify-content:center; padding-top:50px; padding-bottom:50px; }
.not-found h1 { font-size:52px; margin:14px 0 20px; letter-spacing:-.065em; }
.not-found p { font-size:14px; color:var(--muted); line-height:1.8; max-width:540px; }
.not-found nav { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
@media (max-width:1050px) { .wrap { width:calc(100% - 56px); } .header-nav { gap:18px; } .header-nav .nav-faq { display:none; } .hero { gap:30px; padding-top:60px; } .hero h1 { font-size:48px; } .ko .hero h1 { font-size:42px; } .faq-section { gap:36px; } }
@media (max-width:760px) { .wrap { width:calc(100% - 40px); } .header-row { min-height:72px; gap:15px; } .header-nav { display:none; } .language { margin-left:auto; } .header-cta { display:none; } .hero { grid-template-columns:1fr; gap:37px; padding:48px 0 33px; } .hero-copy { max-width:500px; } .hero h1 { font-size:clamp(39px,8vw,55px); margin:15px 0 19px; } .ko .hero h1 { font-size:clamp(37px,8vw,49px); } .hero p { max-width:440px; font-size:14px; margin-bottom:23px; } .hero .formats { margin-top:18px; } .result { max-width:620px; } .principles { gap:17px; padding:20px 0; } .principles strong { font-size:11px; } .principles p { font-size:10px; } .section { padding:47px 0; } .section-head { margin-bottom:28px; } .section-head h2 { font-size:27px; max-width:420px; } .steps { grid-template-columns:1fr; gap:25px; } .step-number { margin-bottom:11px; } .steps h3 { font-size:16px; margin-bottom:7px; } .steps p { font-size:12px; } .cases-section { padding-top:0; } .use-cases { grid-template-columns:1fr; } .use-case { padding:22px; border-right:0; border-bottom:1px solid var(--line); } .use-case:last-child { border-bottom:0; } .use-case h3 { margin:9px 0; } .local-note { grid-template-columns:1fr; gap:13px; padding:24px; margin-top:23px; } .local-note h3 { font-size:18px; } .price-grid { grid-template-columns:1fr; gap:14px; } .price-card { padding:26px; } .price-card h3 { font-size:18px; } .faq-section { grid-template-columns:1fr; gap:29px; } .faq summary { padding-top:18px; padding-bottom:18px; font-size:12px; } .faq summary::after { top:17px; } .final { display:block; padding:29px 26px; margin-bottom:40px; } .final h2 { font-size:25px; } .final .button { margin-top:22px; } .footer-row { display:block; padding:25px 0; } .footer-nav { justify-content:flex-start; margin-top:18px; gap:8px 18px; } }
@media (max-width:380px) { .wrap { width:calc(100% - 32px); } .hero h1 { font-size:35px; } .ko .hero h1 { font-size:34px; } .principles { grid-template-columns:1fr; gap:15px; } .principles strong { margin-bottom:3px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .button { transition:none; } }