:root{
  --ink:#111;--paper:#fff;--muted:#555;--line:#e5e5e5;--soft:#f4f4f4;
  --wrap:1040px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--paper);color:var(--ink);
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,
    "Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  line-height:1.65;-webkit-font-smoothing:antialiased;word-break:keep-all;overflow-wrap:anywhere;
}
a{color:inherit}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.dark :focus-visible{outline-color:var(--paper)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

/* language hint bar (shown by JS only) */
.langbar{display:none;background:var(--soft);border-bottom:1px solid var(--line);font-size:.9rem}
.langbar.on{display:block}
.langbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:10px;padding-bottom:10px}
.langbar a{font-weight:700}
.langbar button{background:none;border:0;font:inherit;color:var(--muted);cursor:pointer;padding:4px 0}

/* header */
header.top{border-top:8px solid var(--ink);padding:24px 0}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px}
.wordmark{font-weight:900;font-size:1.25rem;letter-spacing:-.02em;text-decoration:none}
nav.main{display:flex;gap:22px;font-size:.95rem}
nav.main a{text-decoration:none;color:var(--muted)}
nav.main a:hover{color:var(--ink)}
nav.main a.lang{color:var(--ink);font-weight:700;border:1px solid var(--ink);padding:2px 10px;line-height:1.5}
@media (max-width:720px){nav.main a:not(.lang){display:none}}

/* hero */
.hero{padding:88px 24px 96px}
.hero h1{font-weight:900;font-size:clamp(3.2rem,10vw,7rem);letter-spacing:-.045em;line-height:1}
.hero .lead{max-width:620px;margin-top:32px;font-size:1.2rem;line-height:1.6}
.hero .for{margin-top:14px;font-size:1rem;color:var(--muted)}
.hero .status{margin-top:36px;font-size:.95rem;color:var(--muted);max-width:620px}
.cta{display:inline-block;margin-top:20px;background:var(--ink);color:var(--paper);
  text-decoration:none;font-weight:700;padding:15px 28px;font-size:1rem}
.cta:hover{opacity:.85}
.cta.ghost{background:transparent;color:var(--ink);border:1px solid var(--ink);margin-left:8px}

/* sections */
section.block{padding:88px 0;border-top:1px solid var(--line)}
section.block h2{font-weight:900;font-size:clamp(2rem,5vw,3.25rem);letter-spacing:-.035em;line-height:1.08;max-width:760px}
section.block .intro{max-width:620px;margin-top:22px;font-size:1.1rem}
.points{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:36px 40px;margin-top:56px}
.points h3{font-size:1.05rem;font-weight:800;letter-spacing:-.01em;margin-bottom:8px}
.points p{font-size:.95rem;color:var(--muted)}

/* dark problem section */
section.dark{background:var(--ink);color:var(--paper);border-top:0}
section.dark .intro,section.dark .points p{color:#bdbdbd}
.clocks{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:64px;padding-top:32px;border-top:1px solid #333}
.clocks div{min-width:0}
.clocks .city{font-size:.85rem;letter-spacing:.02em;color:#9a9a9a}
.clocks .time{font-weight:900;font-size:clamp(2.4rem,7vw,5rem);letter-spacing:-.05em;line-height:1;margin-top:6px;font-variant-numeric:tabular-nums}
.clocks .seoul .city{color:var(--paper)}
.clocks .seoul .time{text-decoration:underline;text-decoration-thickness:.08em;text-underline-offset:.12em}
.clocks .note{grid-column:1/-1;font-size:.9rem;color:#9a9a9a;margin-top:8px}
@media (max-width:720px){.clocks{grid-template-columns:repeat(2,1fr);gap:28px 16px}}

/* product: two columns */
.two{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start;margin-top:48px}
@media (max-width:860px){.two{grid-template-columns:1fr}}
.two .points{margin-top:0;grid-template-columns:1fr 1fr;gap:28px 32px}
@media (max-width:480px){.two .points{grid-template-columns:1fr}}

/* chat mock */
.chat{border:1px solid var(--line);padding:22px 20px 18px;max-width:520px}
.chat .ch{font-size:.8rem;color:var(--muted);margin-bottom:16px;display:flex;justify-content:space-between}
.msg{max-width:88%;padding:11px 14px;font-size:.93rem;line-height:1.5;margin-top:10px}
.msg .who{display:block;font-size:.75rem;margin-top:6px;opacity:.65}
.msg.in{background:var(--soft);margin-right:auto}
.msg.out{background:var(--ink);color:var(--paper);margin-left:auto}
.chat .after{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);font-size:.9rem;color:var(--muted)}

/* approval card mock */
.card{border:1px solid var(--ink);padding:20px;max-width:520px}
.card .tag{font-size:.8rem;font-weight:700;margin-bottom:12px}
.card .sum{font-size:.9rem;color:var(--muted)}
.card blockquote{margin:14px 0;padding:12px 14px;background:var(--soft);font-size:.93rem}
.card .btns{display:flex;flex-wrap:wrap;gap:8px}
.card .btns span{font-size:.85rem;padding:8px 14px;border:1px solid var(--ink)}
.card .btns span.p{background:var(--ink);color:var(--paper)}
.card .foot{margin-top:14px;font-size:.85rem;color:var(--muted)}

/* onboarding steps */
.steps{counter-reset:s;margin-top:48px;display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--ink)}
.steps li{list-style:none;counter-increment:s;padding:24px 28px 32px 0;border-bottom:1px solid var(--line)}
.steps li::before{content:counter(s,decimal-leading-zero);display:block;font-weight:900;font-size:2rem;letter-spacing:-.04em;line-height:1;margin-bottom:14px}
.steps h3{font-size:1.05rem;font-weight:800;margin-bottom:6px}
.steps p{font-size:.93rem;color:var(--muted)}
@media (max-width:860px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}
.steps.three{grid-template-columns:repeat(3,1fr)}
.steps.three li{padding:28px 32px 36px 0}
.steps.three li::before{font-size:2.6rem}
.steps.three h3{font-size:1.15rem}
@media (max-width:860px){.steps.three{grid-template-columns:1fr}}
.steps-note{margin-top:28px;font-size:1rem;max-width:620px}

/* faq */
.faq{margin-top:40px;border-top:1px solid var(--ink);max-width:820px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:18px 40px 18px 0;font-weight:700;font-size:1.05rem;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:14px;font-weight:400;font-size:1.5rem;line-height:1}
.faq details[open] summary::after{content:"−"}
.faq .a{padding:0 0 22px;font-size:.97rem;color:#333;max-width:700px}
.faq .a p+p{margin-top:8px}

/* contact */
.contact .mail{display:inline-block;margin-top:28px;font-weight:900;font-size:clamp(1.6rem,4.5vw,3rem);letter-spacing:-.03em;text-decoration:none;border-bottom:4px solid var(--ink)}
.contact .alt{margin-top:24px;color:var(--muted);font-size:.95rem}

/* footer */
footer.site{background:var(--ink);color:#bbb;padding:48px 0 40px;font-size:.85rem;line-height:1.9}
footer.site .co{color:#fff;font-weight:800;font-size:1rem;margin-bottom:10px}
footer.site a{color:#fff}
footer.site .links{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px 20px}
footer.site .links a{text-decoration:none;border-bottom:1px solid #555}