/* SafeFile JP landing pages — shared styles.
 *
 * Same tokens, font and header as /safe/ (public/safe/index.html). They are
 * repeated here rather than imported because /safe/ keeps its CSS inline in a
 * single file; duplicating the four token values is cheaper than splitting that
 * file, but it means these two lists must be changed together.
 *
 * Mobile first: 16px side gutters, single column, no layout that needs a
 * horizontal scroll. Tables scroll inside their own box instead.
 *
 * No third-party request of any kind beyond the Google font that /safe/ already
 * loads: no ad script, no analytics tag, no pixel. Measurement goes to our own
 * /api/safe_events (see jp.js).
 */
:root{
  --paper:#F7F5EF; --card:#FFFFFF; --ink:#17140F; --sub:#6B655A;
  --line:#E6E1D4; --marker:#FFE066; --marker-soft:#FFF3BF;
  --ok:#2F7D5B; --ok-bg:#E4F1EA; --no:#B3402A; --no-bg:#F7E4DF;
  --radius:14px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'IBM Plex Sans KR',-apple-system,'Hiragino Kaku Gothic ProN','Noto Sans JP','Yu Gothic',sans-serif;background:var(--paper);color:var(--ink);line-height:1.75}
.mono{font-family:'IBM Plex Mono',monospace}
.wrap{max-width:760px;margin:0 auto;padding:0 16px}

/* ── Header (mirrors /safe/) ── */
header{border-bottom:1px solid var(--line);background:var(--paper);position:sticky;top:0;z-index:50;padding-top:env(safe-area-inset-top)}
.nav{display:flex;align-items:center;justify-content:space-between;height:56px;gap:10px;max-width:760px;margin:0 auto;padding:0 16px}
.logo{display:flex;align-items:center;gap:8px;min-width:0}
.logo-brand{font-weight:700;font-size:18px;letter-spacing:-.02em;display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);min-height:44px}
.logo .bar{display:inline-block;width:24px;height:12px;background:var(--ink);border-radius:3px;flex-shrink:0}
.logo .brand-sep{width:1px;height:18px;background:var(--line);flex-shrink:0}
.logo-slim{font-weight:700;font-size:18px;letter-spacing:-.02em;color:var(--ink);text-decoration:none;white-space:nowrap;display:flex;align-items:center;min-height:44px}
.nav .links{display:flex;gap:12px;font-size:13px;color:var(--sub);align-items:center;flex-shrink:0}
.nav .links a{color:var(--sub);text-decoration:none}
.badge-free{font-size:11px;background:var(--marker);padding:3px 8px;border-radius:20px;font-weight:500;white-space:nowrap}
@media(max-width:480px){.badge-free{display:none}}

/* ── Hero ── */
.hero{padding:40px 0 24px}
.hero h1{font-size:clamp(23px,5.6vw,34px);font-weight:700;letter-spacing:-.02em;line-height:1.45}
.lead{margin-top:16px;font-size:15.5px;color:var(--ink)}
.cta-row{margin-top:22px;display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--ink);background:var(--ink);color:#fff;font-family:inherit;font-size:15px;font-weight:500;padding:12px 20px;border-radius:9px;cursor:pointer;text-decoration:none;min-height:46px;transition:.15s}
.btn:hover{opacity:.85}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--marker-soft);opacity:1}

/* ── Sections ── */
section.blk{padding:26px 0;border-top:1px solid var(--line)}
section.blk h2{font-size:19px;font-weight:700;letter-spacing:-.01em;margin-bottom:14px}
section.blk h3{font-size:16px;font-weight:700;margin:18px 0 8px}
section.blk p{font-size:15px}
section.blk p + p{margin-top:10px}
ul.plain,ol.plain{margin:10px 0 0 20px;font-size:15px}
ul.plain li,ol.plain li{margin-bottom:8px}
.note{margin-top:12px;font-size:13.5px;color:var(--sub)}

/* ── Tables: scroll inside their own box, never the page ── */
.tbl{margin-top:12px;overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--card)}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:14px}
th,td{text-align:left;padding:11px 13px;border-bottom:1px solid var(--line);vertical-align:top}
thead th{background:var(--marker-soft);font-weight:700;white-space:nowrap}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:none}

/* ── Cards ── */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;margin-top:14px}
.card h3{margin-top:0}
.price{font-size:20px;font-weight:700;margin-bottom:10px}
.pilot{background:var(--marker-soft);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;margin-top:18px}
.pilot strong{font-weight:700}

/* ── FAQ ── */
.faq dt{font-weight:700;font-size:15px;margin-top:16px}
.faq dd{margin-top:6px;font-size:15px;color:var(--ink)}

/* ── Pilot form ── */
form.pf{margin-top:16px;display:grid;gap:14px}
form.pf label{display:block;font-size:14px;font-weight:500}
form.pf .req::after{content:" *";color:var(--no)}
form.pf input[type=text],form.pf input[type=email],form.pf select{
  width:100%;margin-top:6px;border:1px solid var(--line);border-radius:9px;background:var(--card);
  font-family:inherit;font-size:15px;padding:11px 12px;min-height:46px;color:var(--ink)}
form.pf input:focus-visible,form.pf select:focus-visible,.btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
form.pf .consent{font-size:13px;color:var(--sub)}
/* Honeypot. A human never sees this field, so anything in it is a bot.
   Kept out of view without `display:none` or `hidden`, which the cheaper
   scripts know to skip. */
form.pf .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.pf-msg{display:none;border-radius:9px;padding:12px 14px;font-size:14px;line-height:1.7}
.pf-msg.ok{display:block;background:var(--ok-bg);color:var(--ok);border:1px solid var(--ok)}
.pf-msg.err{display:block;background:var(--no-bg);color:var(--no);border:1px solid var(--no)}

/* ── EN parallel block (collapsed by default) ── */
details.en{margin-top:26px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);padding:14px 18px}
details.en summary{cursor:pointer;font-weight:700;font-size:15px;min-height:30px}
details.en .en-body{margin-top:12px;font-size:14.5px}
details.en .en-body p + p{margin-top:10px}

footer{border-top:1px solid var(--line);margin-top:34px;padding:22px 0 40px;font-size:13px;color:var(--sub)}
footer a{color:var(--sub)}
footer .fl{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:10px}