/* HanjiMap marketing site — single committed light theme.
   Palette: app blue on cool near-white; the pin red appears only as data dots. */
:root {
  --bg:#f7f8fb; --card:#ffffff; --ink:#151920; --muted:#59616e;
  --accent:#0a6cf5; --accent-soft:#e9f1fe; --line:#e4e7ec; --red:#e8474b;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--ink); line-height:1.6;
  font-family:"IBM Plex Sans KR",-apple-system,"Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif; }
img { max-width:100%; }
a { color:var(--accent); text-decoration:none; }
.wrap { max-width:1040px; margin:0 auto; padding:0 20px; }

header { position:sticky; top:0; background:rgba(247,248,251,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line); z-index:10; }
.nav { display:flex; align-items:center; gap:16px; padding:12px 0; }
.brand { display:flex; align-items:center; gap:10px; font-weight:700; font-size:17px; color:var(--ink); }
.brand img { width:28px; height:28px; border-radius:7px; }
.nav .spacer { flex:1; }
.nav a.plain { color:var(--muted); font-size:14px; }
.lang { font-size:13px; font-weight:600; border:1px solid var(--line); border-radius:99px;
  padding:5px 12px; background:var(--card); color:var(--ink); }

.hero { display:grid; grid-template-columns:1.1fr .9fr; gap:36px; align-items:center; padding:56px 0 40px; }
.hero h1 { font-size:clamp(30px,4.6vw,44px); font-weight:700; line-height:1.25; margin:0 0 14px;
  letter-spacing:-.02em; text-wrap:balance; }
.hero h1 em { font-style:normal; color:var(--accent); }
.hero .sub { color:var(--muted); font-size:17px; margin:0 0 24px; max-width:44ch; }
.badges { display:flex; gap:10px; flex-wrap:wrap; }
.badge { display:inline-flex; align-items:center; gap:8px; border-radius:12px; padding:11px 18px;
  font-size:14.5px; font-weight:600; }
.badge--soon { background:var(--ink); color:#fff; opacity:.55; cursor:default; }
.badge--soon small { font-weight:400; opacity:.8; }
.phone { justify-self:center; }
.phone img { width:min(300px,72vw); border-radius:32px; border:1px solid var(--line);
  box-shadow:0 24px 60px rgba(21,25,32,.16); display:block; }

.stats { display:flex; gap:0; border:1px solid var(--line); border-radius:16px; background:var(--card);
  margin:8px 0 56px; overflow:hidden; }
.stat { flex:1; text-align:center; padding:18px 8px; }
.stat + .stat { border-left:1px solid var(--line); }
.stat b { display:block; font-size:clamp(18px,2.6vw,26px); font-weight:700;
  font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.stat span { font-size:13px; color:var(--muted); }

.feature { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; padding:36px 0; }
.feature:nth-of-type(even) .phone { order:-1; }
.kicker { font-size:12.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent); margin:0 0 6px; }
.feature h2 { font-size:clamp(22px,3vw,30px); font-weight:700; margin:0 0 10px; letter-spacing:-.015em; text-wrap:balance; }
.feature p { color:var(--muted); margin:0 0 14px; max-width:48ch; }
.feature ul { margin:0; padding:0; list-style:none; }
.feature li { padding-left:22px; position:relative; margin:7px 0; font-size:15px; }
.feature li::before { content:""; position:absolute; left:0; top:.55em; width:8px; height:8px;
  border-radius:99px; background:var(--accent); }
.feature li.dot-red::before { background:var(--red); }

.owner { background:var(--card); border:1px solid var(--line); border-radius:20px;
  padding:36px; margin:40px 0 64px; display:grid; grid-template-columns:1.3fr .7fr; gap:28px; align-items:center; }
.owner h2 { font-size:clamp(21px,2.8vw,28px); margin:0 0 10px; letter-spacing:-.015em; }
.owner p { color:var(--muted); margin:0 0 16px; max-width:52ch; }
.cta { display:inline-block; background:var(--accent); color:#fff; font-weight:600;
  border-radius:12px; padding:12px 22px; font-size:15px; }
.cta:hover { filter:brightness(1.08); }
.owner .perks { margin:0; padding:0; list-style:none; font-size:14.5px; }
.owner .perks li { padding-left:24px; position:relative; margin:8px 0; }
.owner .perks li::before { content:"✓"; position:absolute; left:0; color:var(--accent); font-weight:700; }

footer { border-top:1px solid var(--line); padding:28px 0 44px; color:var(--muted); font-size:13.5px; }
footer .cols { display:flex; gap:24px; flex-wrap:wrap; justify-content:space-between; }
footer a { color:var(--muted); }
footer a:hover { color:var(--accent); }

@media (max-width:760px) {
  .hero { grid-template-columns:1fr; padding-top:36px; text-align:center; }
  .hero .sub { margin-inline:auto; }
  .badges { justify-content:center; }
  .feature { grid-template-columns:1fr; text-align:center; }
  .feature:nth-of-type(even) .phone { order:0; }
  .feature p, .feature ul { text-align:left; }
  .feature li { margin-inline:auto; }
  .owner { grid-template-columns:1fr; padding:26px; }
  .stats { flex-wrap:wrap; }
  .stat { flex-basis:50%; }
  .stat:nth-child(3) { border-left:none; border-top:1px solid var(--line); }
  .stat:nth-child(4) { border-top:1px solid var(--line); }
}
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
@media (prefers-reduced-motion:no-preference) {
  .phone img { transition:transform .35s ease; }
  .phone:hover img { transform:translateY(-4px); }
}

/* Long-form pages (privacy, support): one readable column inside the site shell. */
.doc { max-width:760px; padding:40px 0 24px; }
.doc h1 { font-size:clamp(26px,3.6vw,34px); font-weight:700; letter-spacing:-.02em; margin:0 0 10px; }
.doc h2 { font-size:19px; font-weight:700; margin:34px 0 10px; }
.doc p, .doc li { color:var(--ink); }
.doc .meta { color:var(--muted); font-size:14px; margin:0 0 26px; }
.doc ul { padding-left:20px; }
.doc li { margin:6px 0; }
.doc table { width:100%; border-collapse:collapse; margin:14px 0 8px; font-size:14.5px; background:var(--card);
  border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.doc th, .doc td { text-align:left; vertical-align:top; padding:11px 13px; border-bottom:1px solid var(--line); }
.doc th { background:var(--accent-soft); font-weight:600; white-space:nowrap; }
.doc tr:last-child td { border-bottom:0; }
.doc .other-lang { display:inline-block; margin-top:8px; font-size:14px; }
@media (max-width:760px) {
  .doc table, .doc thead, .doc tbody, .doc tr, .doc th, .doc td { display:block; }
  .doc th { white-space:normal; }
  .doc td { border-bottom:0; padding-bottom:0; }
  .doc td:last-child { padding-bottom:11px; border-bottom:1px solid var(--line); }
}

/* Contact form — replaces the mailto: links so the address is never in the HTML. */
.contact { background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:26px 26px 28px; margin:8px 0 44px; }
.contact h2 { margin:0 0 6px; font-size:22px; letter-spacing:-.01em; }
.contact .sub { color:var(--muted); margin:0 0 20px; font-size:15px; max-width:60ch; }
.contact-grid { display:grid; grid-template-columns:1.25fr .75fr; gap:34px; align-items:start; }
.contact .row { display:flex; gap:14px; flex-wrap:wrap; }
.contact .row > * { flex:1 1 200px; }
.contact label { display:block; font-size:13px; font-weight:600; color:var(--muted);
  margin:14px 0 6px; letter-spacing:.01em; }
.contact .row label:first-child, .contact-grid > form > label:first-of-type { margin-top:0; }
.contact input, .contact select, .contact textarea {
  width:100%; padding:12px 13px; font:inherit; font-size:15px; color:var(--ink);
  background:var(--bg); border:1px solid var(--line); border-radius:10px;
  transition:border-color .15s, box-shadow .15s; }
.contact textarea { min-height:132px; resize:vertical; }
.contact input:hover, .contact select:hover, .contact textarea:hover { border-color:#cfd4dc; }
.contact input:focus, .contact select:focus, .contact textarea:focus {
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.contact button { margin-top:20px; border:0; border-radius:12px; padding:13px 26px; font:inherit;
  font-size:15px; font-weight:600; color:#fff; background:var(--accent); cursor:pointer;
  transition:filter .15s; }
.contact button:hover { filter:brightness(1.07); }
.contact button[disabled] { opacity:.55; cursor:default; filter:none; }
.contact .note { margin-top:14px; font-size:14px; min-height:1.4em; }
.contact .note[data-state="ok"] { color:#0a7a3d; }
.contact .note[data-state="error"] { color:var(--red); }
/* Honeypot: off-screen rather than display:none, which some bots skip. */
.contact .hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.contact-aside { background:var(--bg); border:1px solid var(--line); border-radius:14px; padding:20px 22px; }
.contact-aside h3 { margin:0 0 12px; font-size:15px; font-weight:700; }
.contact-aside ul { margin:0; padding-left:18px; color:var(--ink); font-size:14.5px; }
.contact-aside li { margin:7px 0; }
.contact-aside .note-small { margin:16px 0 0; padding-top:14px; border-top:1px solid var(--line);
  color:var(--muted); font-size:13.5px; line-height:1.55; }

@media (max-width:760px) {
  .contact { padding:20px; }
  .contact-grid { grid-template-columns:1fr; gap:22px; }
}