/* =====================================================================
   MeData — public site design system (self-hosted, no CDN)
   Modern 2026 aesthetic: fluid type, CSS grid, glass, safe-area.
   Mobile-first; desktop enhancements at ≥768px.
   ===================================================================== */
:root {
  --ink:#16181d; --ink-2:#2a2d35;
  /* GTN-inspired warm red brand */
  --accent:#005ffe; --accent-2:#0049cc; --accent-soft:#e8f0ff;
  --bg:#ffffff; --bg-soft:#faf7f6; --bg-soft2:#f3eeed;
  --line:#ece8e7; --line-2:#e2dcdb;
  --text:#0b1f3a; --muted:#566174; --muted-2:#8b94a7;
  --ok:#0f9d58; --ok-soft:#e6f5ec; --ok-ink:#0c7a45;
  --warn:#c2780b; --warn-soft:#fdf3e2; --warn-ink:#9a5e06;
  --danger:#d33; --danger-soft:#fdecec; --danger-ink:#b3261e;

  --r-sm:10px; --r:14px; --r-lg:20px; --r-xl:28px; --pill:999px;
  --sh-1:0 1px 2px rgba(11,31,58,.06), 0 6px 18px rgba(11,31,58,.05);
  --sh-2:0 2px 6px rgba(11,31,58,.06), 0 18px 50px rgba(11,31,58,.10);
  --sh-soft:0 1px 3px rgba(11,31,58,.05);

  --maxw:1080px;
  --pad:clamp(1rem, 5vw, 2rem);
  --fs-h1:clamp(2.1rem, 1.2rem + 4.6vw, 3.9rem);
  --fs-h2:clamp(1.55rem, 1.1rem + 2.2vw, 2.6rem);
  --fs-h3:clamp(1.15rem, 1rem + .7vw, 1.4rem);
  --fs-lead:clamp(1.02rem, .96rem + .6vw, 1.28rem);

  --font:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter",
         "Hiragino Sans", "Noto Sans JP", "Segoe UI", Roboto, Arial, sans-serif;
  --mono:ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing:border-box; }
* { margin:0; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  font-family:var(--font); color:var(--text); background:var(--bg);
  font-size:16px; line-height:1.55; letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  -webkit-tap-highlight-color:transparent;
}
img, svg { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; background:none; border:0; }
/* interactive elements always show the hand cursor (anchors without href,
   data-go/data-sp clickables, etc.) — fixes the wrong cursor on PC. */
button, summary, a, [data-go], [data-sp], label, select, .btn, .tab, .sp-tab { cursor:pointer; }
input { cursor:text; }
input, select { font:inherit; color:inherit; }
:where(h1,h2,h3){ line-height:1.08; letter-spacing:-.025em; font-weight:800; }
.mono { font-family:var(--mono); }

/* ── layout ────────────────────────────────────────────── */
.wrap { width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.wrap-sm { max-width:560px; }
.wrap-md { max-width:720px; }
main { min-height:60vh; padding-bottom:calc(env(safe-area-inset-bottom) + 5rem); }
@media (min-width:768px){ main { padding-bottom:2.5rem; } }
[data-view]{ display:none; }
[data-view].active{ display:block; animation:fade .35s ease both; }
@keyframes fade { from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }
@keyframes rise { from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:none;} }
.rise{ animation:rise .55s cubic-bezier(.2,.7,.2,1) both; }
.d2{animation-delay:.07s}.d3{animation-delay:.14s}.d4{animation-delay:.21s}
@media (prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important;} }

/* ── header ────────────────────────────────────────────── */
.site-header {
  position:sticky; top:0; z-index:40;
  background:rgba(255,255,255,.78);
  backdrop-filter:saturate(180%) blur(16px); -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--line);
}
.site-header .bar { display:flex; align-items:center; gap:.75rem; height:60px; }
.brand { display:flex; align-items:center; gap:.55rem; font-weight:700; letter-spacing:-.02em; }
.brand .logo { width:34px; height:34px; border-radius:11px; background:var(--ink); color:#fff;
  display:grid; place-items:center; font-weight:800; }
.spacer { flex:1; }
.topnav { display:none; gap:.25rem; }
.topnav a { padding:.5rem .8rem; border-radius:10px; font-size:.94rem; font-weight:500; color:var(--muted); }
.topnav a:hover { color:var(--ink); background:var(--bg-soft); }
.lang { background:var(--bg-soft2); color:var(--ink); border-radius:10px; padding:.45rem .6rem;
  font-size:.9rem; font-weight:600; outline:none; border:1px solid transparent; }
.lang:focus { border-color:var(--accent); }
@media (min-width:768px){ .topnav{ display:flex; } }

/* ── buttons ───────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  border-radius:var(--r); padding:.85rem 1.25rem; font-weight:650; font-size:1rem;
  transition:transform .12s ease, background .2s ease, box-shadow .2s ease; white-space:nowrap; }
.btn:active { transform:scale(.985); }
.btn svg { width:1.15em; height:1.15em; }
.btn-primary { background:var(--accent); color:#fff; box-shadow:0 1px 2px rgba(0,95,254,.2), 0 8px 20px rgba(0,95,254,.18); }
.btn-primary:hover { background:var(--accent-2); }
.btn-light { background:#fff; color:var(--ink); box-shadow:var(--sh-1); }
.btn-dark { background:var(--ink); color:#fff; box-shadow:var(--sh-1); }
.btn-dark:hover { background:var(--ink-2); }
.btn-outline { background:#fff; color:var(--ink); box-shadow:inset 0 0 0 1px var(--line-2); }
.btn-outline:hover { background:var(--bg-soft); }
.btn-block { width:100%; }
.btn-sm { padding:.6rem .9rem; font-size:.9rem; }
.header-cta { display:none; }
@media (min-width:768px){ .header-cta{ display:inline-flex; } }

/* ── HERO (light, GTN-style) ───────────────────────────── */
.hero { position:relative; overflow:hidden; background:
    radial-gradient(120% 80% at 90% -20%, rgba(0,95,254,.10), transparent 55%),
    radial-gradient(90% 70% at -10% -10%, rgba(0,95,254,.06), transparent 50%),
    var(--bg); border-bottom:1px solid var(--line); }
.hero-inner { padding-block:clamp(2.6rem, 6vw, 5rem) clamp(4.5rem, 9vw, 7rem); display:grid; gap:2rem; align-items:center; }
@media (min-width:880px){ .hero-inner{ grid-template-columns:1.1fr .9fr; gap:3rem; } }
.pill { display:inline-flex; align-items:center; gap:.5rem; font-size:.82rem; font-weight:650; color:var(--accent-2);
  background:var(--accent-soft); border-radius:var(--pill); padding:.4rem .85rem; margin-bottom:1.1rem; }
.pill .dot { width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px rgba(0,95,254,.18); }
.hero h1 { font-size:var(--fs-h1); max-width:15ch; color:var(--ink); }
.hero h1 .hl { color:var(--accent); }
.hero .lead { font-size:var(--fs-lead); color:var(--muted); max-width:40ch; margin-top:1.1rem; }
.cta-row { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.9rem; }
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; max-width:34rem; margin-top:2.5rem; }
.stats .n { font-size:clamp(1.4rem,1rem+2vw,1.9rem); font-weight:800; color:var(--ink); }
.stats .l { font-size:.78rem; color:var(--muted-2); margin-top:.15rem; }
/* hero visual — brand mascot */
.hero-art { display:none; }
@media (min-width:880px){ .hero-art{ display:block; } }
.mascot { width:100%; max-width:480px; height:auto; margin-left:auto; display:block;
  filter:drop-shadow(0 20px 40px rgba(0,95,254,.15)); }
.simchip { background:linear-gradient(160deg,#fff, #faf7f6); border:1px solid var(--line);
  border-radius:var(--r-xl); box-shadow:var(--sh-2); padding:1.5rem; max-width:23rem; margin-left:auto; position:relative; }
.simchip .brandrow { display:flex; align-items:center; justify-content:space-between; }
.simchip .gold { width:46px; height:36px; border-radius:8px;
  background:linear-gradient(135deg,#e9c97a,#c9a14b); box-shadow:inset 0 0 0 2px rgba(255,255,255,.4); position:relative; }
.simchip .gold::before{ content:""; position:absolute; inset:8px 6px; border:1px solid rgba(255,255,255,.5); border-radius:3px; }
.simchip .num { font-family:var(--mono); letter-spacing:.12em; color:var(--muted); margin-top:1.2rem; font-size:.92rem; }
.simchip .big { font-size:1.6rem; font-weight:800; margin-top:.4rem; }
.simchip .tag { display:inline-block; margin-top:.8rem; font-size:.72rem; font-weight:700; color:var(--ok-ink);
  background:var(--ok-soft); padding:.25rem .6rem; border-radius:var(--pill); }

/* ── plans ─────────────────────────────────────────────── */
.plans { display:grid; gap:1rem; margin-top:2.5rem; }
@media (min-width:720px){ .plans{ grid-template-columns:repeat(3,1fr); } }
.plan { background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:1.4rem; box-shadow:var(--sh-1);
  display:flex; flex-direction:column; position:relative; }
.plan.feat { border-color:var(--accent); box-shadow:0 2px 6px rgba(0,95,254,.10), 0 18px 50px rgba(0,95,254,.12); }
.plan .ptag { position:absolute; top:-.7rem; left:1.4rem; background:var(--accent); color:#fff;
  font-size:.7rem; font-weight:700; padding:.25rem .6rem; border-radius:var(--pill); }
.plan .pname { font-weight:700; color:var(--muted); }
.plan .pdata { font-size:2rem; font-weight:800; margin-top:.2rem; }
.plan .pprice { color:var(--muted); margin-top:.1rem; font-size:.92rem; }
.plan .pprice b { color:var(--ink); font-size:1.05rem; }
.plan ul { list-style:none; display:grid; gap:.5rem; margin:1rem 0 1.25rem; font-size:.92rem; color:#3a4250; }
.plan li { display:flex; gap:.5rem; } .plan li .c { color:var(--ok); font-weight:700; }
.plan .btn { margin-top:auto; }

/* ── features (overlap hero) ───────────────────────────── */
.features { display:grid; grid-template-columns:1fr; gap:.85rem;
  margin-top:clamp(-3.5rem,-6vw,-2.5rem); position:relative; z-index:2; }
@media (min-width:560px){ .features{ grid-template-columns:1fr 1fr; } }
@media (min-width:980px){ .features{ grid-template-columns:repeat(4,1fr); } }
.feature { background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:1.25rem; box-shadow:var(--sh-2); }
.feature .ico { width:42px; height:42px; border-radius:12px; background:var(--accent-soft);
  color:var(--accent); display:grid; place-items:center; margin-bottom:.85rem; }
.feature .ico svg { width:22px; height:22px; }
.feature h3 { font-size:1.02rem; font-weight:700; }
.feature p { color:var(--muted); font-size:.92rem; margin-top:.3rem; }

/* ── sections ──────────────────────────────────────────── */
.section { padding-block:clamp(3.5rem, 8vw, 6rem); }
.section h2 { font-size:var(--fs-h2); }
.center { text-align:center; }
.kicker { color:var(--accent); font-weight:700; font-size:.9rem; letter-spacing:.01em; }

/* steps */
.steps { display:grid; grid-template-columns:1fr; gap:1.75rem; margin-top:2.5rem; }
@media (min-width:768px){ .steps{ grid-template-columns:repeat(3,1fr); } }
.step { text-align:center; }
.step .num { width:48px; height:48px; border-radius:16px; background:var(--ink); color:#fff;
  display:grid; place-items:center; font-weight:800; font-size:1.15rem; margin-inline:auto; }
.step h3 { font-size:1.05rem; margin-top:1rem; }
.step p { color:var(--muted); font-size:.92rem; margin-top:.3rem; }

/* payment band */
.payband { background:var(--bg-soft); border-block:1px solid var(--line); }
.payband-grid { display:grid; gap:1.5rem; align-items:center; padding-block:clamp(1.5rem,3.5vw,2.5rem); }
@media (min-width:820px){ .payband-grid{ grid-template-columns:1fr 1fr; gap:3rem; } }
.payband h2 { margin-top:.5rem; }
.payband p { color:var(--muted); margin-top:.75rem; max-width:40ch; }
.link-arrow { display:inline-flex; gap:.3rem; font-weight:700; color:var(--ink); margin-top:1.1rem; }
.pay-card { background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:1.5rem; box-shadow:var(--sh-2); max-width:24rem; margin-inline:auto; }
.pay-card .head { font-size:.86rem; color:var(--muted-2); }
.pay-card .codeghost { font-family:var(--mono); font-size:1.4rem; letter-spacing:.15em;
  background:var(--bg-soft); border-radius:var(--r); padding:.7rem; text-align:center; color:#c3ccda; margin-top:.75rem; }
.pay-card ul { list-style:none; margin-top:1rem; display:grid; gap:.5rem; font-size:.92rem; color:var(--muted); }
.pay-card li { display:flex; gap:.5rem; } .pay-card li .c { color:var(--ok); font-weight:700; }

/* end cta */
.endcta { padding-block:clamp(3.5rem,8vw,6rem); text-align:center; }
.endcta p { color:var(--muted); margin-top:.6rem; }

/* ── CHECK / auth ──────────────────────────────────────── */
.pagepad { padding-block:2rem; }
.lead-sub { color:var(--muted); margin-top:.35rem; margin-bottom:1.4rem; }
.card { background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-1); }
.auth-card { padding:1.35rem; display:grid; gap:1.1rem; }
.field label { display:block; font-size:.9rem; font-weight:600; margin-bottom:.4rem; }
.input { width:100%; border:1px solid var(--line-2); border-radius:var(--r); padding:.85rem 1rem;
  font-size:1rem; background:#fff; transition:border .15s, box-shadow .15s; }
.input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.code-input { font-family:var(--mono); font-size:1.6rem; letter-spacing:.55em; text-align:center; padding-inline:.5rem; }
.hint { font-size:.78rem; color:var(--muted-2); margin-top:.45rem; }
.err { color:var(--danger-ink); font-size:.9rem; text-align:center; }
.note-center { text-align:center; font-size:.78rem; color:var(--muted-2); margin-top:1.4rem; }

/* SIM card */
.results { display:grid; gap:1.25rem; }
.results .greet { font-size:1.15rem; font-weight:800; }
.simcard { background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-1); overflow:hidden; }
.sc-head { display:flex; align-items:center; gap:.6rem; padding:1.25rem 1.25rem .5rem; }
.sc-title { font-size:1.15rem; font-weight:800; line-height:1.15; }
.sc-title .vol { color:var(--muted-2); font-weight:500; font-size:1rem; }
.sc-phone { font-family:var(--mono); font-size:.78rem; color:var(--muted-2); margin-top:.15rem; }
.badge { font-size:.74rem; font-weight:700; padding:.28rem .65rem; border-radius:var(--pill); }
.badge-ok { background:var(--ok-soft); color:var(--ok-ink); }
.badge-bad { background:var(--danger-soft); color:var(--danger-ink); }
.bill { margin:0 1.25rem 1.1rem; border-radius:var(--r); border:1px solid; padding:1rem; }
.bill.ok { background:var(--ok-soft); border-color:#bfe6cd; }
.bill.warn { background:var(--warn-soft); border-color:#f3dca8; }
.bill.bad { background:var(--danger-soft); border-color:#f3c9c6; }
.bill-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.bill .lbl { font-size:.78rem; color:var(--muted); }
.bill .big { font-size:1.5rem; font-weight:800; margin-top:.1rem; }
.bill .amt { font-size:1.25rem; font-weight:800; text-align:right; }
.bill.ok .big{ color:var(--ok-ink);} .bill.warn .big{ color:var(--warn-ink);} .bill.bad .big{ color:var(--danger-ink);}
.bill .sub { font-size:.78rem; margin-top:.5rem; }
.bill.warn .sub,.bill.bad .sub{ color:var(--warn-ink); } .bill.ok .sub{ color:var(--ok-ink); }
.sc-sec { padding:0 1.25rem 1.1rem; }
.sc-sec .h { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted-2); margin-bottom:.4rem; }
.kv { display:flex; justify-content:space-between; gap:.8rem; padding:.45rem 0; border-bottom:1px solid var(--line); font-size:.92rem; }
.kv:last-child { border-bottom:0; }
.kv .k { color:var(--muted); } .kv .v { text-align:right; font-weight:600; word-break:break-all; }
.kv .v.mono { font-family:var(--mono); font-weight:500; }
.tbl { width:100%; border-collapse:collapse; font-size:.86rem; }
.tbl th { text-align:left; font-size:.72rem; font-weight:600; color:var(--muted-2); padding-bottom:.3rem; }
.tbl td { padding:.4rem 0; border-top:1px solid var(--line); }
.tbl .r { text-align:right; } .tbl .paid{ color:var(--ok-ink);} .tbl .unpaid{ color:var(--warn-ink);}
.hist { list-style:none; display:grid; gap:.25rem; font-size:.88rem; }
.hist li { display:flex; gap:.5rem; } .hist .t { color:var(--muted-2); white-space:nowrap; }
.sc-pay { background:var(--bg-soft); border-top:1px solid var(--line); padding:1.1rem 1.25rem; }
.sc-pay .h { font-weight:700; margin-bottom:.6rem; }
.codebox { display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  background:#fff; border:1px solid var(--line-2); border-radius:var(--r-sm); padding:.55rem .8rem; margin-bottom:.6rem; }
.codebox .c { font-family:var(--mono); font-size:1.1rem; letter-spacing:.06em; }
.linkacc { color:var(--accent); font-weight:600; font-size:.88rem; text-decoration:underline; }

/* ── GUIDE ─────────────────────────────────────────────── */
.steps-ol { list-style:none; display:grid; gap:1rem; }
.steps-ol li { display:flex; gap:.85rem; }
.steps-ol .n { flex:none; width:30px; height:30px; border-radius:50%; background:var(--ink); color:#fff;
  display:grid; place-items:center; font-weight:700; font-size:.9rem; }
.steps-ol .x { padding-top:.2rem; color:#3a4658; }
.faq { display:grid; gap:.55rem; margin-top:.5rem; }
.faq details { background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-soft); padding:1rem 1.1rem; }
.faq summary { font-weight:600; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary .pm { color:var(--muted-2); transition:transform .2s; }
.faq details[open] summary .pm { transform:rotate(45deg); }
.faq p { color:var(--muted); font-size:.92rem; margin-top:.6rem; }

/* ── CONTACT ───────────────────────────────────────────── */
.contact-list { display:grid; gap:.75rem; }
.contact-item { display:flex; align-items:center; gap:.85rem; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--sh-soft); padding:1rem; }
.contact-item .ci { width:42px; height:42px; border-radius:12px; display:grid; place-items:center; flex:none; }
.contact-item .ci.fb { background:rgba(24,119,242,.1); color:#1877f2; font-weight:800; }
.contact-item .ci.ck { background:var(--accent-soft); color:var(--accent); }
.contact-item .t1 { font-weight:700; display:block; }
.contact-item .t2 { font-size:.86rem; color:var(--muted); }

/* ── bottom tabbar (mobile) ────────────────────────────── */
.tabbar { position:fixed; inset:auto 0 0 0; z-index:40; background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(16px); -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom); }
.tabbar .row { display:grid; grid-template-columns:repeat(4,1fr); max-width:560px; margin-inline:auto; }
.tab { display:flex; flex-direction:column; align-items:center; gap:.2rem; padding:.55rem 0 .5rem;
  color:var(--muted-2); font-size:.69rem; font-weight:600; }
.tab .ti { width:48px; height:28px; border-radius:var(--pill); display:grid; place-items:center; transition:background .2s; }
.tab .ti svg { width:21px; height:21px; }
.tab.is-active { color:var(--ink-2); }
.tab.is-active .ti { background:var(--accent-soft); }
@media (min-width:768px){ .tabbar{ display:none; } }

.footer { text-align:center; font-size:.78rem; color:var(--muted-2); padding-block:2.5rem; }

/* ── Smartpit store guide (tabbed: FamilyMart / Lawson·MiniStop) ── */
.sp-tabs { display:flex; gap:.5rem; margin-bottom:1.1rem; }
.sp-tab { flex:1; text-align:center; padding:.7rem .5rem; border:1px solid var(--line-2);
  border-radius:var(--r); font-weight:650; color:var(--muted); background:#fff; transition:all .15s; }
.sp-tab.active { background:var(--accent); color:#fff; border-color:var(--accent); box-shadow:0 6px 16px rgba(0,95,254,.18); }
.sp-panel { display:none; }
.sp-panel.active { display:block; animation:fade .3s ease both; }
.video { position:relative; padding-top:56.25%; border-radius:var(--r); overflow:hidden;
  background:#000; margin-bottom:1.25rem; box-shadow:var(--sh-1); }
.video iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ── logo + MyPage account ─────────────────────────────── */
.logo-img { width:32px; height:32px; border-radius:9px; display:block; object-fit:cover; }
.mp-head { display:flex; align-items:center; gap:.85rem; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--sh-1); padding:1.1rem 1.2rem; margin-bottom:1.25rem; }
.mp-head .av { width:46px; height:46px; border-radius:14px; background:var(--accent-soft); color:var(--accent);
  display:grid; place-items:center; font-weight:800; font-size:1.2rem; flex:none; }
.mp-head .who { min-width:0; flex:1; }
.mp-head .hi { font-weight:800; font-size:1.1rem; }
.mp-head .em { color:var(--muted); font-size:.85rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mp-logout { color:var(--muted); font-size:.84rem; font-weight:600; border:1px solid var(--line-2); border-radius:var(--pill); padding:.35rem .8rem; }
.mp-logout:hover { color:var(--danger-ink); border-color:var(--danger); }
.mp-settings { background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-1); padding:1.2rem; margin-top:.25rem; }
.mp-settings .h { font-weight:700; margin-bottom:.85rem; }
.pin-form { display:grid; gap:.7rem; }
.pin-form .two { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
.pin-form input { width:100%; border:1px solid var(--line-2); border-radius:var(--r); padding:.7rem .85rem;
  font-family:var(--mono); font-size:1.1rem; letter-spacing:.3em; text-align:center; }
.pin-form input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.pin-msg { font-size:.85rem; text-align:center; }
.pin-msg.ok { color:var(--ok-ink); } .pin-msg.bad { color:var(--danger-ink); }

.sp-facts { display:flex; flex-wrap:wrap; gap:.5rem; margin:.25rem 0 1rem; }
.sp-facts span { font-size:.8rem; font-weight:600; color:var(--ink-2); background:var(--bg-soft2);
  border-radius:var(--pill); padding:.32rem .7rem; }
.sp-sub-OLD { display:flex; gap:.5rem; margin-bottom:1rem; }
.sp-mtab-OLD { flex:1; text-align:center; padding:.55rem .4rem; border:1px solid var(--line-2); border-radius:var(--r-sm);
  font-weight:600; font-size:.84rem; color:var(--muted); background:#fff; }
.sp-mtab.active { background:var(--ink); color:#fff; border-color:var(--ink); }

/* ── Mobile: drop boxed borders on the account page; separate blocks
   with faint full-width hairlines instead (cleaner, not cramped). ── */
@media (max-width:640px){
  [data-view="check"] .simcard,
  [data-view="check"] .auth-card,
  [data-view="check"] .mp-settings,
  [data-view="check"] .mp-head {
    border-left:0; border-right:0; border-top:0; border-radius:0; box-shadow:none;
    margin-inline:calc(-1 * var(--pad));
    border-bottom:1px solid var(--line);
  }
  [data-view="check"] .results { gap:0; }
  [data-view="check"] .mp-head { margin-bottom:0; }
  [data-view="check"] .simcard { padding-bottom:.4rem; }
}

/* =====================================================================
   GUIDE — full rebuild (big screenshots, clean, PC 2-col / mobile full)
   This block intentionally overrides earlier .sp-* rules.
   ===================================================================== */
.wrap-guide { max-width: 940px; }

.sp-tabs { display:flex; gap:.6rem; margin:.3rem 0 1.4rem; }
.sp-tab { flex:1; text-align:center; padding:.85rem .6rem; border:1px solid var(--line-2);
  border-radius:var(--r); font-weight:700; font-size:.98rem; color:var(--muted); background:#fff; transition:all .15s; }
.sp-tab.active { background:var(--accent); color:#fff; border-color:var(--accent);
  box-shadow:0 8px 22px rgba(0,95,254,.22); }
.sp-panel { display:none; }
.sp-panel.active { display:block; animation:fade .3s ease both; }

/* method sub-toggle (Loppi) */
.sp-sub { display:flex; gap:.5rem; margin-bottom:1.2rem; flex-wrap:wrap; }
.sp-mtab { flex:1; min-width:140px; text-align:center; padding:.7rem .6rem; border:1px solid var(--line-2);
  border-radius:var(--pill); font-weight:650; font-size:.9rem; color:var(--muted); background:#fff; }
.sp-mtab.active { background:var(--ink); color:#fff; border-color:var(--ink); }

/* step cards — big image on top, text below */
.sp-steps { list-style:none; display:grid; grid-template-columns:1fr; gap:1.1rem; padding:0; }
@media (min-width:680px){ .sp-steps{ grid-template-columns:1fr 1fr; gap:1.25rem; } }
.sp-steps li { display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-1); }
.sp-img { width:100%; height:auto; display:block; background:#f3f4f7; border:0; border-bottom:1px solid var(--line); border-radius:0; }
.sp-x { padding:.95rem 1.1rem 1.1rem; }
.sp-x .n { display:inline-block; font-size:.72rem; font-weight:800; letter-spacing:.04em;
  color:#fff; background:var(--accent); border-radius:var(--pill); padding:.2rem .65rem; margin-bottom:.5rem; }
.sp-x .tr { font-size:1rem; color:var(--ink); line-height:1.5; }
.sp-x .jp { font-size:.82rem; color:var(--muted-2); margin-top:.4rem; }

.sp-foot { margin-top:1.5rem; padding-top:1.1rem; border-top:1px solid var(--line); }
.sp-links { display:flex; flex-wrap:wrap; gap:1.2rem; margin-top:.5rem; }

/* mobile: edge-to-edge cards, no outer box squeezing content */
@media (max-width:640px){
  .wrap-guide.pagepad { padding-inline:var(--pad); }
  .sp-steps { gap:1rem; }
  .sp-steps li { border-radius:0; border-left:0; border-right:0; box-shadow:none;
    margin-inline:calc(-1 * var(--pad)); }
}

/* logged-in customer's Smartpit number shown inside the guide */
.sp-mycode { background:var(--accent-soft); border:1px solid #cfe0ff; border-radius:var(--r);
  padding:.9rem 1rem; margin-bottom:1.2rem; }
.sp-mycode .t { font-weight:700; color:var(--accent-2); font-size:.9rem; margin-bottom:.5rem; }
.sp-mycode .row { display:flex; align-items:center; gap:.7rem; padding:.35rem 0; }
.sp-mycode .lab { font-size:.82rem; color:var(--muted); flex:none; min-width:5.5rem; }
.sp-mycode .code { font-family:var(--mono); font-size:1.15rem; font-weight:700; letter-spacing:.05em; flex:1; word-break:break-all; }
.sp-mycode button { background:var(--accent); color:#fff; font-weight:700; font-size:.82rem; border-radius:var(--pill); padding:.3rem .8rem; flex:none; }

/* customer's Smartpit code injected inline at the number-entry step */
.sp-fill { margin-top:.65rem; background:var(--accent-soft); border:1px solid #cfe0ff;
  border-radius:var(--r-sm); padding:.55rem .65rem; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.sp-fill .fl { font-size:.72rem; font-weight:800; color:var(--accent-2); width:100%; }
.sp-fill .cc { font-family:var(--mono); font-weight:800; font-size:1.1rem; letter-spacing:.05em; color:var(--ink); word-break:break-all; }
.sp-fill button { background:var(--accent); color:#fff; font-weight:700; font-size:.78rem; border-radius:var(--pill); padding:.24rem .7rem; }

/* =====================================================================
   MyPage — multi-tier dashboard (PC: sticky account aside + SIM grid)
   ===================================================================== */
.wrap-mp { max-width: 1080px; }
.mp-grid { display:grid; grid-template-columns:1fr; gap:1.25rem; }
@media (min-width:900px){ .mp-grid{ grid-template-columns:300px 1fr; gap:1.75rem; align-items:start; } }

.mp-aside { display:grid; gap:1rem; }
@media (min-width:900px){ .mp-aside{ position:sticky; top:78px; } }
.mp-card-acc { background:linear-gradient(165deg,#0b1f3a,#15366b); color:#fff;
  border-radius:var(--r-lg); padding:1.4rem; text-align:center; box-shadow:var(--sh-2); }
.mp-card-acc .av { width:60px; height:60px; border-radius:20px; margin:0 auto .7rem;
  background:rgba(255,255,255,.16); display:grid; place-items:center; font-weight:800; font-size:1.5rem; }
.mp-card-acc .hi { font-weight:800; font-size:1.15rem; }
.mp-card-acc .em { color:rgba(255,255,255,.7); font-size:.84rem; margin-top:.15rem; word-break:break-all; }
.mp-card-acc .mp-logout { margin-top:1rem; color:#fff; background:rgba(255,255,255,.14);
  border:0; border-radius:var(--pill); padding:.45rem 1.1rem; font-size:.85rem; font-weight:650; }
.mp-card-acc .mp-logout:hover { background:rgba(255,255,255,.24); }
.mp-stats { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.mp-stats > div { background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:.9rem; text-align:center; box-shadow:var(--sh-soft); }
.mp-stats .sn { font-size:1.7rem; font-weight:800; line-height:1; }
.mp-stats .sl { font-size:.74rem; color:var(--muted); margin-top:.3rem; }
.mp-stats .ok .sn { color:var(--ok-ink); } .mp-stats .warn .sn { color:var(--warn-ink); }
.mp-card-set { background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:1.2rem; box-shadow:var(--sh-1); }
.mp-card-set .h { font-weight:700; margin-bottom:.4rem; }
.mp-card-set .hint { margin-bottom:.7rem; }

.mp-greet { font-size:1.3rem; font-weight:800; margin-bottom:1rem; }
/* SIM cards stay a single full-width column — wide enough to lay out the
   billing strip, info rows and payment table without cramped wrapping. */
.mp-sims { display:grid; grid-template-columns:1fr; gap:1.25rem; }

/* copy button feedback */
.copy-btn { background:var(--accent); color:#fff; font-weight:700; font-size:.8rem;
  border-radius:var(--pill); padding:.28rem .8rem; transition:background .15s, transform .1s; flex:none; }
.copy-btn:hover { background:var(--accent-2); }
.copy-btn.done { background:var(--ok); }
.codebox .copy-btn, .sp-fill .copy-btn, .sp-mycode .copy-btn { white-space:nowrap; }

/* mobile: account aside stacks; remove boxed squeeze handled earlier */
@media (max-width:640px){
  [data-view="check"] .mp-card-acc, [data-view="check"] .mp-card-set,
  [data-view="check"] .mp-stats > div { border-radius:var(--r-lg); }
  .mp-greet { font-size:1.15rem; }
}

/* customer's real Smartpit number injected into the entry step — plain */
.sp-code { background:var(--accent-soft); color:var(--accent-2); font-weight:700; font-family:var(--mono);
  font-size:.96em; letter-spacing:.03em; padding:.05em .4em; border-radius:5px; white-space:nowrap; }
.sp-copyrow { margin-top:.5rem; }
.copy-btn.mini { background:#fff; color:var(--accent); box-shadow:inset 0 0 0 1px var(--line-2);
  font-size:.74rem; font-weight:650; padding:.18rem .6rem; }
.copy-btn.mini:hover { background:var(--bg-soft); }
.copy-btn.mini.done { background:var(--ok); color:#fff; box-shadow:none; }

/* payment band image — plain, no frame/text */
.pay-img { width:100%; height:auto; display:block; margin-inline:auto; max-width:520px; }

/* =====================================================================
   SIM card — premium redesign (physical-card header + billing strip)
   ===================================================================== */
.simcard { border:1px solid var(--line); border-radius:var(--r-lg); background:#fff;
  box-shadow:var(--sh-1); overflow:hidden; }
/* card-style visual header */
.sc-visual { position:relative; padding:1.1rem 1.25rem 1.25rem; color:#fff; overflow:hidden;
  background:radial-gradient(120% 140% at 100% 0%, #2f6bff 0%, #15366b 55%, #0b1f3a 100%); }
.sc-visual.od { background:radial-gradient(120% 140% at 100% 0%, #ff5b5b 0%, #b3261e 60%, #6f1612 100%); }
.sc-visual::after { content:""; position:absolute; right:-30px; top:-30px; width:160px; height:160px;
  border-radius:50%; background:rgba(255,255,255,.08); }
.sc-vtop { display:flex; align-items:center; justify-content:space-between; }
.sc-chip { width:34px; height:26px; border-radius:6px; background:linear-gradient(135deg,#f5d98a,#caa24c);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45); }
.sc-vstatus { font-size:.72rem; font-weight:700; background:rgba(255,255,255,.18); backdrop-filter:blur(4px);
  padding:.25rem .7rem; border-radius:var(--pill); }
.sc-vplan { font-size:1.2rem; font-weight:800; margin-top:.9rem; display:flex; align-items:baseline; gap:.5rem; }
.sc-vplan small { font-weight:600; font-size:.85rem; color:rgba(255,255,255,.75); }
.sc-vnum { font-size:1.05rem; letter-spacing:.12em; margin-top:.35rem; color:rgba(255,255,255,.92); }
/* billing strip */
.sc-bill-l { flex:1; min-width:0; }
.sc-bill { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:nowrap;
  padding:1rem 1.25rem; border-bottom:1px solid var(--line); }
.sc-bill .lbl { font-size:.74rem; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; }
.sc-bill .big { font-size:1.35rem; font-weight:800; margin-top:.1rem; }
.sc-bill .sub { font-size:.78rem; color:var(--muted); margin-top:.2rem; }
.sc-bill.ok .big { color:var(--ok-ink); } .sc-bill.warn .big { color:var(--warn-ink); } .sc-bill.bad .big { color:var(--danger-ink); }
.sc-bill-r { text-align:right; flex:none; }
.sc-bill-r .amt { font-size:1.45rem; font-weight:800; }
.sc-bill-r .btn { margin-top:.5rem; }

/* MyPage — personal info card */
.mp-profile { background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-1); padding:1.1rem 1.25rem; margin-bottom:1.25rem; }
.mp-profile .h { font-weight:800; font-size:1.02rem; margin-bottom:.6rem; }
.mp-profile .kv { padding:.5rem 0; }