/* ============================================================
   KIMCHI MOBILE — kimchi-editorial theme — design system
   'Editorial Pop + KIMO'. Anchor: KIMO Pink #F0356A · Ink #111 · Warm paper #FAF7F2.
   Auto-extracted from prototype/mix-*.html (exact-block dedup, no rule dropped).
   Regenerate: scripts/extract_proto_assets.py
   ============================================================ */

/* ============================================================
     KIMCHI MOBILE — "EDITORIAL POP" DESIGN SYSTEM (v.KIMO)
     The source-of-truth token + component sheet every page reuses.
     Anchor: KIMO Pink #F0356A · Ink #111 · Warm paper #FAF7F2.
     ONE accent (pink) + black + neutral. No rainbow. Readable first.
     ============================================================ */
  :root{
    /* ---- brand palette (anchored on KIMO) ---- */
    --pink:#F0356A;          /* KIMO Pink — brand anchor: borders, scribble, accents, theme-color */
    --pink-cta:#D81A56;      /* solid CTA fill — white text on it = 5.0:1 (WCAG AA, any size) */
    --pink-deep:#B81348;     /* pressed CTA pink */
    --pink-ink:#A8013C;      /* pink dark enough for small text on paper (AA) */
    --pink-soft:#FCE4EC;     /* pink wash for highlights / fills */
    --pink-line:#F7B6CC;     /* hairline pink */

    --ink:#111111;           /* structural ink + body text */
    --ink-2:#0A0A0A;         /* deepest ink (footer / hero ink panels) */
    --paper:#FAF7F2;         /* warm off-white base */
    --paper-2:#F2ECE2;       /* alternating band */
    --paper-3:#FFFFFF;       /* lightest — cards */
    --mute:#54514B;          /* muted body — AA on paper (≈8:1) */
    --mute-2:#7A766E;        /* lightest muted still AA on paper */
    --line:rgba(17,17,17,.13);   /* hairline on paper */
    --line-2:rgba(17,17,17,.08);
    --on-ink:#FAF7F2;        /* text on ink */
    --mute-on-ink:#C9C4BB;   /* muted on ink */
    --good:#0E7C55;          /* restrained "yes" green — AA on paper */
    --good-soft:#E1F2EA;
    --warn:#9A6B00;          /* restrained amber — AA on paper */

    --maxw:1180px;
    --pad:clamp(18px,4.2vw,46px);

    --f-head:"Archivo",system-ui,sans-serif;
    --f-xhead:"Archivo Expanded","Archivo",system-ui,sans-serif;
    --f-body:"Hanken Grotesk",system-ui,sans-serif;
    --f-mono:"Spline Sans Mono",ui-monospace,monospace;

    --radius:16px;
    --radius-sm:11px;
    --shadow:0 1px 2px rgba(17,17,17,.05), 0 8px 26px -12px rgba(17,17,17,.18);
    --shadow-lift:0 2px 4px rgba(17,17,17,.06), 0 18px 40px -16px rgba(240,53,106,.30);
    --ring:0 0 0 3px var(--ink);
  }

*{box-sizing:border-box;margin:0;padding:0}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
    font-family:var(--f-body);
    color:var(--ink);
    background:var(--paper);
    line-height:1.6;
    font-size:17.5px;             /* body ≥17px (가독성) */
    overflow-x:clip;              /* clip (not hidden): keeps position:sticky header working site-wide */
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    /* subtle paper grain — faint, never over copy */
    background-image:
      radial-gradient(rgba(17,17,17,.018) 1px, transparent 1px),
      radial-gradient(rgba(17,17,17,.012) 1px, transparent 1px);
    background-size:5px 5px, 9px 9px;
    background-position:0 0, 3px 4px;
  }

a{color:inherit;text-decoration:none}

img{max-width:100%;display:block}

::selection{background:var(--pink);color:#fff}

:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:3px}

.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

main{display:block}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.skip{position:absolute;left:-999px;top:0;z-index:200;background:var(--ink);color:#fff;padding:.7em 1.1em;border-radius:0 0 10px 0;font-family:var(--f-mono);font-size:.8rem}

.skip:focus{left:0}

/* ---------- TYPE SYSTEM (strong H1>H2>H3) ---------- */
  h1,h2,h3,h4{font-family:var(--f-xhead);font-weight:800;line-height:1.04;letter-spacing:-.02em;color:var(--ink)}

h1{font-size:clamp(2.4rem,5.8vw,4.2rem);line-height:.98;letter-spacing:-.035em}

h2{font-size:clamp(1.8rem,4.1vw,2.9rem);letter-spacing:-.025em}

h3{font-family:var(--f-head);font-weight:800;font-size:clamp(1.15rem,2.3vw,1.45rem);letter-spacing:-.02em;line-height:1.12}

h4{font-family:var(--f-head);font-weight:700;font-size:1.04rem;letter-spacing:-.01em}

p{color:var(--mute);max-width:64ch}

b,strong{font-weight:700;color:var(--ink)}

.lead{font-size:clamp(1.08rem,2vw,1.28rem);color:var(--ink);line-height:1.5;max-width:54ch}

.num{font-family:var(--f-mono);font-feature-settings:"tnum" 1;letter-spacing:-.02em}

/* editorial kicker — number + label on a baseline */
  .kicker{
    display:inline-flex;align-items:baseline;gap:.7ch;
    font-family:var(--f-mono);font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;
    color:var(--ink);font-weight:500;
  }

.kicker .idx{font-weight:700;color:var(--pink-ink);border-bottom:2px solid var(--pink);padding-bottom:1px}

.gloss{font-style:italic;color:var(--mute);font-weight:500}

/* Korean-term glossary inline */

  /* hand-drawn underline accent — used on ONE headline word only */
  .scribble{position:relative;display:inline-block;color:var(--pink-ink)}

.scribble::after{
    content:"";position:absolute;left:-2%;right:-2%;bottom:-.16em;height:.22em;
    background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'><path d='M2 9 C 40 3, 70 12, 100 6 S 170 3, 198 8' fill='none' stroke='%23F0356A' stroke-width='4' stroke-linecap='round'/></svg>") no-repeat;
    background-size:100% 100%;
  }

@media (prefers-reduced-motion:no-preference){
    .scribble::after{background-size:0 100%;transition:background-size .5s ease .2s}
    .scribble.in::after{background-size:100% 100%}
  }

/* ---------- SECTION HEADERS ---------- */
  .sec{padding:clamp(48px,7vw,82px) 0}

.sec-2{background:var(--paper-2)}

.sec-ink{background:var(--ink);color:var(--on-ink)}

.sec-ink h2,.sec-ink h3{color:var(--on-ink)}

.sec-ink p{color:var(--mute-on-ink)}

.sec-head{max-width:60ch;margin-bottom:clamp(26px,4vw,40px)}

.sec-head h2{margin:.45rem 0 .55rem}

.sec-head p{font-size:1.06rem}

.eyebrow{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--pink-ink);font-weight:600}

/* ---------- BUTTONS (ONE primary = pink) ---------- */
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:.55ch;
    font-family:var(--f-head);font-weight:700;font-size:1rem;letter-spacing:-.01em;
    padding:.86em 1.4em;border-radius:999px;border:0;cursor:pointer;
    transition:transform .18s cubic-bezier(.3,1.2,.5,1),box-shadow .18s,background .15s;
    text-align:center;line-height:1;white-space:nowrap;
  }

.btn .arr{transition:transform .18s}

.btn:hover .arr{transform:translateX(3px)}

.btn-primary{background:var(--pink-cta);color:#fff;box-shadow:var(--shadow-lift)}

.btn-primary:hover{background:var(--pink-deep);transform:translateY(-2px)}

.btn-primary:active{transform:translateY(0)}

.btn-ink{background:var(--ink);color:#fff;box-shadow:var(--shadow)}

.btn-ink:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}

.btn-line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}

.btn-line:hover{background:var(--ink);color:#fff}

.btn-soft{background:var(--pink-soft);color:var(--pink-ink);box-shadow:inset 0 0 0 1.5px var(--pink-line)}

.btn-soft:hover{background:#fff}

.btn-lg{font-size:1.08rem;padding:1em 1.7em}

.btn-sm{font-size:.88rem;padding:.6em 1em}

.btn-block{width:100%}

/* ---------- TRUST STRIP ---------- */
  .trust{display:flex;flex-wrap:wrap;gap:.55rem .5rem;align-items:stretch}

.trust .pill{
    display:inline-flex;align-items:center;gap:.55ch;
    background:var(--paper-3);border:1.5px solid var(--line);border-radius:999px;
    padding:.5em .95em;font-size:.92rem;font-weight:600;color:var(--ink);
  }

.trust .pill svg{width:17px;height:17px;color:var(--pink);flex:none}

.trust .pill .gloss{font-weight:500}

/* ---------- CARDS ---------- */
  .card{
    background:var(--paper-3);border:1.5px solid var(--line);border-radius:var(--radius);
    padding:1.5rem 1.4rem;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s;
    display:flex;flex-direction:column;
  }

.card.hover:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}

.card .ico{width:42px;height:42px;border-radius:11px;background:var(--pink-soft);display:grid;place-items:center;margin-bottom:.9rem}

.card .ico svg{width:22px;height:22px;color:var(--pink-ink)}

.card h3{margin-bottom:.4rem}

.card p{font-size:1rem;flex:1}

.badge-pop{
    position:absolute;top:-13px;left:50%;transform:translateX(-50%);
    background:var(--pink-cta);color:#fff;font-family:var(--f-mono);font-weight:700;
    font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;padding:.42em .85em;border-radius:999px;
    box-shadow:0 6px 16px -6px rgba(240,53,106,.6);white-space:nowrap;
  }

/* ---------- HEADER + UTILITY BAR ---------- */
  .util{background:var(--ink);color:var(--on-ink);font-size:.82rem}

.util .wrap{display:flex;align-items:center;justify-content:center;gap:.6ch;padding-top:.5em;padding-bottom:.5em;text-align:center;flex-wrap:wrap;font-family:var(--f-mono);letter-spacing:.02em}

.util svg{width:14px;height:14px;color:var(--pink);flex:none}

.util .open-chat{color:#fff;text-decoration:underline;text-underline-offset:2px;font-weight:600;background:none;border:0;cursor:pointer;font-family:inherit;font-size:inherit}

.util .sep{opacity:.4}

header.site{position:sticky;top:0;z-index:60;background:rgba(250,247,242,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1.5px solid var(--line);transition:box-shadow .2s}

header.site.scrolled{box-shadow:0 8px 24px -16px rgba(17,17,17,.4)}

.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:.7rem;padding-bottom:.7rem}

.brand{display:inline-flex;align-items:center;gap:.55ch}

.brand img{width:34px;height:34px}

.brand .wm{font-family:var(--f-xhead);font-weight:800;font-size:1.15rem;letter-spacing:-.02em;line-height:1}

.brand .wm .pink{color:var(--pink-ink)}

.nav-links{display:flex;align-items:center;gap:1.5rem}

.nav-links a{font-family:var(--f-head);font-weight:600;font-size:.96rem;color:var(--ink);padding:.2em 0;position:relative}

.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-3px;height:2px;background:var(--pink);transition:right .2s}

.nav-links a:hover::after{right:0}

.nav-cta{display:flex;align-items:center;gap:.6rem}

.menu-btn{display:none;background:none;border:1.5px solid var(--ink);border-radius:10px;width:42px;height:42px;cursor:pointer;align-items:center;justify-content:center}

.menu-btn svg{width:22px;height:22px}

/* ---------- HERO ---------- */
  .hero{position:relative;padding:clamp(34px,5vw,58px) 0 clamp(30px,4vw,48px);overflow:hidden}

.hero-grid{display:grid;grid-template-columns:1.18fr .82fr;gap:clamp(28px,4vw,52px);align-items:center}

.hero-tag{display:inline-flex;align-items:center;gap:.6ch;background:var(--pink-soft);color:var(--pink-ink);border:1.5px solid var(--pink-line);border-radius:999px;padding:.42em .9em;font-family:var(--f-mono);font-size:.74rem;font-weight:600;letter-spacing:.06em;margin-bottom:1.1rem}

.hero-tag .dot{width:8px;height:8px;border-radius:50%;background:var(--good)}

.hero h1{margin-bottom:1rem}

.hero .lead{margin-bottom:1.5rem}

.hero-cta{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;margin-bottom:1.4rem}

.hero-sub{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;font-size:.9rem;color:var(--mute);font-weight:500}

.hero-sub span{display:inline-flex;align-items:center;gap:.4ch}

.hero-sub svg{width:15px;height:15px;color:var(--good);flex:none}

.hero-art{position:relative}

.hero-photo{position:relative;border-radius:var(--radius);overflow:hidden;border:1.5px solid var(--line);box-shadow:var(--shadow-lift);aspect-ratio:4/5;background:var(--pink-soft)}

.hero-photo img.ph{width:100%;height:100%;object-fit:cover;filter:saturate(1.04) contrast(1.02)}

.hero-kimo{position:absolute;bottom:-18px;left:-22px;width:118px;height:118px;filter:drop-shadow(0 14px 24px rgba(240,53,106,.32));z-index:3}

.hero-bubble{position:absolute;bottom:30px;left:104px;background:var(--ink);color:#fff;font-family:var(--f-head);font-weight:600;font-size:.82rem;padding:.5em .85em;border-radius:12px 12px 12px 2px;box-shadow:var(--shadow);z-index:3;max-width:170px;line-height:1.35}

.hero-price-chip{position:absolute;top:16px;right:16px;background:var(--paper-3);border:1.5px solid var(--line);border-radius:12px;padding:.6em .85em;box-shadow:var(--shadow);z-index:3;text-align:center}

.hero-price-chip .lab{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);display:block}

.hero-price-chip .val{font-family:var(--f-xhead);font-weight:800;font-size:1.3rem;color:var(--pink-ink);line-height:1}

/* segment fork (3 cards, "Moving here" dominant) */
  .fork{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:clamp(26px,4vw,40px)}

.fork a{position:relative;display:flex;flex-direction:column;gap:.5rem;padding:1.35rem 1.25rem;border-radius:var(--radius);border:1.5px solid var(--line);background:var(--paper-3);box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s}

.fork a:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}

.fork a:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

.fork a .ix{font-family:var(--f-mono);font-size:.72rem;color:var(--mute-2);letter-spacing:.1em}

.fork a .ttl{font-family:var(--f-xhead);font-size:1.32rem;line-height:1.1}

.fork a p{font-size:.96rem;flex:1}

.fork a .go{font-family:var(--f-head);font-weight:700;font-size:.92rem;color:var(--pink-ink);display:inline-flex;align-items:center;gap:.4ch}

.fork a.dom{grid-column:span 1;background:var(--ink);border-color:var(--ink)}

.fork a.dom .ttl{color:#fff}

.fork a.dom p{color:var(--mute-on-ink)}

.fork a.dom .ix{color:var(--mute-on-ink)}

.fork a.dom .go{color:#fff}

.fork a.dom .tag{position:absolute;top:-11px;left:18px;background:var(--pink-cta);color:#fff;font-family:var(--f-mono);font-size:.64rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.35em .7em;border-radius:999px}

/* ---------- COMPARISON (honest) ---------- */
  .cmp{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}

.cmp .col{border-radius:var(--radius);padding:1.5rem 1.4rem;border:1.5px solid var(--line);background:var(--paper-3);box-shadow:var(--shadow)}

.cmp .col.real{border-color:var(--pink-line);background:linear-gradient(180deg,var(--pink-soft),var(--paper-3) 60%)}

.cmp .col h3{display:flex;align-items:center;gap:.55ch;margin-bottom:.3rem}

.cmp .col .who{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-bottom:1rem}

.cmp ul{list-style:none;display:flex;flex-direction:column;gap:.7rem}

.cmp li{display:flex;gap:.6ch;font-size:.99rem;color:var(--ink);align-items:flex-start;line-height:1.4}

.cmp li svg{width:18px;height:18px;flex:none;margin-top:2px}

.cmp li .yes{color:var(--good)}

.cmp li .no{color:var(--mute-2)}

.cmp li .x{color:var(--mute-2)}

/* ---------- PLAN SIZER (interactive) ---------- */
  .sizer{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(24px,3.5vw,44px);align-items:start}

.sizer-panel{background:var(--ink);color:var(--on-ink);border-radius:var(--radius);padding:clamp(1.4rem,3vw,2rem);box-shadow:var(--shadow-lift)}

.sizer-panel h3{color:#fff;margin-bottom:.3rem}

.sizer-panel .hint{color:var(--mute-on-ink);font-size:.95rem;margin-bottom:1.4rem}

.field{margin-bottom:1.3rem}

.field label{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--f-head);font-weight:600;font-size:.95rem;margin-bottom:.55rem;color:#fff}

.field label .v{font-family:var(--f-mono);color:#fff;background:rgba(255,255,255,.1);padding:.15em .55em;border-radius:7px;font-size:.88rem}

input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;background:rgba(255,255,255,.2);outline-offset:5px}

input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:var(--pink);border:3px solid #fff;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.4)}

input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--pink);border:3px solid #fff;cursor:pointer}

.seg{display:flex;gap:.4rem;flex-wrap:wrap}

.seg button{flex:1;min-width:84px;font-family:var(--f-head);font-weight:600;font-size:.9rem;padding:.6em .5em;border-radius:10px;border:1.5px solid rgba(255,255,255,.25);background:transparent;color:#fff;cursor:pointer;transition:background .15s}

.seg button[aria-pressed=true]{background:var(--pink-cta);border-color:var(--pink-cta)}

.seg button:focus-visible{outline:3px solid #fff;outline-offset:2px}

.sizer-result{background:var(--paper-3);border:1.5px solid var(--line);border-radius:var(--radius);padding:clamp(1.4rem,3vw,1.9rem);box-shadow:var(--shadow);position:relative;min-height:100%}

.sizer-result .head{display:flex;align-items:center;gap:.8rem;margin-bottom:1rem}

.sizer-result .head img{width:64px;height:64px;flex:none}

.sizer-result .rlab{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}

.sizer-result .rplan{font-family:var(--f-xhead);font-weight:800;font-size:1.5rem;line-height:1;margin-top:.15rem}

.sizer-result .est{display:flex;align-items:baseline;gap:.5ch;margin:.7rem 0 1rem}

.sizer-result .est .gb{font-family:var(--f-mono);font-weight:700;font-size:1.05rem;color:var(--ink)}

.sizer-result .est .price{font-family:var(--f-xhead);font-weight:800;font-size:2.1rem;color:var(--pink-ink);line-height:1}

.sizer-result .est .per{font-size:.85rem;color:var(--mute)}

.sizer-result .why{font-size:.95rem;color:var(--mute);margin-bottom:1.2rem;min-height:2.6em}

.sizer-result .why b{color:var(--ink)}

/* ---------- PRICE / PLAN CARDS (Good-Better-Best) ---------- */
  .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:1.6rem}

.plan{position:relative;background:var(--paper-3);border:1.5px solid var(--line);border-radius:var(--radius);padding:1.6rem 1.4rem;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}

.plan:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}

.plan.pop{border:2px solid var(--pink);box-shadow:var(--shadow-lift)}

.plan .tier{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}

.plan .pname{font-family:var(--f-xhead);font-weight:800;font-size:1.35rem;margin:.2rem 0 .15rem}

.plan .price{display:flex;align-items:baseline;gap:.3ch;margin:.5rem 0 .2rem}

.plan .price .cur{font-family:var(--f-head);font-weight:700;font-size:1.1rem;color:var(--ink)}

.plan .price .amt{font-family:var(--f-xhead);font-weight:800;font-size:2.5rem;color:var(--ink);line-height:1}

.plan.pop .price .amt{color:var(--pink-ink)}

.plan .meta{font-size:.9rem;color:var(--mute);margin-bottom:1rem}

.plan ul{list-style:none;display:flex;flex-direction:column;gap:.55rem;margin-bottom:1.3rem;flex:1}

.plan li{display:flex;gap:.55ch;font-size:.97rem;align-items:flex-start;line-height:1.4}

.plan li svg{width:17px;height:17px;color:var(--good);flex:none;margin-top:2px}

/* ---------- TIMELINE (mover, keep 010) ---------- */
  .timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;counter-reset:step}

.step{position:relative;padding:1.3rem 1.2rem;border-radius:var(--radius);background:var(--paper-3);border:1.5px solid var(--line);box-shadow:var(--shadow)}

.step .n{font-family:var(--f-xhead);font-weight:800;font-size:1.6rem;color:var(--pink-ink);line-height:1}

.step h4{margin:.5rem 0 .35rem}

.step p{font-size:.95rem}

/* ---------- SPLIT FEATURE (teacher / coverage etc.) ---------- */
  .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,52px);align-items:center}

.split .media{border-radius:var(--radius);overflow:hidden;border:1.5px solid var(--line);box-shadow:var(--shadow);aspect-ratio:5/4;background:var(--pink-soft);position:relative}

.split .media img{width:100%;height:100%;object-fit:cover}

.split .media .cap{position:absolute;left:12px;bottom:12px;background:rgba(17,17,17,.82);color:#fff;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.04em;padding:.4em .7em;border-radius:8px;backdrop-filter:blur(4px)}

.lanes{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}

/* ---------- COVERAGE STRIP ---------- */
  .cov{display:flex;flex-wrap:wrap;gap:.6rem}

.cov .c{display:inline-flex;align-items:center;gap:.5ch;background:var(--paper-3);border:1.5px solid var(--line);border-radius:999px;padding:.5em .95em;font-size:.92rem;font-weight:600}

.cov .c svg{width:16px;height:16px;color:var(--pink);flex:none}

/* ---------- REVIEWS (DEMO) ---------- */
  .demo-note{display:inline-flex;align-items:center;gap:.5ch;background:var(--warn);color:#fff;font-family:var(--f-mono);font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:.35em .75em;border-radius:999px}

.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}

.rev{background:var(--paper-3);border:1.5px solid var(--line);border-radius:var(--radius);padding:1.4rem 1.35rem;box-shadow:var(--shadow);display:flex;flex-direction:column}

.rev .q{font-size:1.02rem;color:var(--ink);line-height:1.5;flex:1;font-weight:500}

.rev .who{display:flex;align-items:center;gap:.6ch;margin-top:1rem;font-size:.88rem;color:var(--mute)}

.rev .who .av{width:30px;height:30px;border-radius:50%;background:var(--pink-soft);color:var(--pink-ink);display:grid;place-items:center;font-family:var(--f-head);font-weight:700;font-size:.85rem;flex:none}

.rev .tag{font-family:var(--f-mono);font-size:.62rem;color:var(--mute-2);letter-spacing:.06em;text-transform:uppercase;margin-bottom:.6rem}

/* ---------- DEVICE SELF-CHECK ---------- */
  .checker{background:var(--paper-3);border:1.5px solid var(--line);border-radius:var(--radius);padding:clamp(1.5rem,3vw,2rem);box-shadow:var(--shadow);max-width:760px}

.checker .row{display:flex;gap:.6rem;flex-wrap:wrap;margin:1rem 0}

.checker select{flex:1;min-width:200px;font-family:var(--f-body);font-size:1rem;padding:.75em .9em;border-radius:11px;border:1.5px solid var(--line);background:var(--paper);color:var(--ink)}

.checker .out{margin-top:.6rem;padding:1.1rem 1.2rem;border-radius:var(--radius-sm);font-size:1rem;display:none;align-items:flex-start;gap:.7ch;line-height:1.5}

.checker .out.show{display:flex}

.checker .out.ok{background:var(--good-soft);color:#0A5C40;border:1.5px solid #9FD9C2}

.checker .out.maybe{background:var(--pink-soft);color:var(--pink-ink);border:1.5px solid var(--pink-line)}

.checker .out svg{width:20px;height:20px;flex:none;margin-top:1px}

/* ---------- FAQ (answer-first) ---------- */
  .faq{max-width:820px}

.faq details{border-bottom:1.5px solid var(--line);padding:.3rem 0}

.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.1rem 0;font-family:var(--f-head);font-weight:700;font-size:1.1rem;color:var(--ink)}

.faq summary::-webkit-details-marker{display:none}

.faq summary .pm{width:28px;height:28px;flex:none;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;transition:transform .2s,background .2s}

.faq details[open] summary .pm{background:var(--pink);border-color:var(--pink);transform:rotate(45deg)}

.faq details[open] summary .pm svg{color:#fff}

.faq summary .pm svg{width:15px;height:15px;color:var(--ink)}

.faq .ans{padding:0 0 1.2rem;font-size:1.04rem;color:var(--mute);line-height:1.6}

.faq .ans p{margin-bottom:.7rem}

.faq .ans .first{color:var(--ink);font-weight:500}

/* ---------- FINAL CTA ---------- */
  .final{background:var(--ink);color:var(--on-ink);border-radius:clamp(20px,4vw,30px);padding:clamp(2.2rem,5vw,3.6rem);text-align:center;position:relative;overflow:hidden}

.final h2{color:#fff;max-width:18ch;margin:0 auto .8rem}

.final p{color:var(--mute-on-ink);max-width:50ch;margin:0 auto 1.6rem}

.final .ctas{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center}

.final-kimo{width:96px;height:96px;margin:0 auto 1rem;filter:drop-shadow(0 10px 22px rgba(240,53,106,.4))}

/* ---------- FOOTER ---------- */
  footer.site{background:var(--ink-2);color:var(--mute-on-ink);padding:clamp(40px,6vw,64px) 0 clamp(90px,8vw,40px)}

.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2rem}

footer.site .brand .wm{color:#fff}

footer.site .brand .wm .pink{color:var(--pink)}

footer.site h4{color:#fff;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;font-family:var(--f-mono);font-weight:600;margin-bottom:1rem}

footer.site ul{list-style:none;display:flex;flex-direction:column;gap:.6rem}

footer.site a{font-size:.95rem;color:var(--mute-on-ink)}

footer.site a:hover{color:#fff}

.foot-about{font-size:.95rem;line-height:1.6;margin:1rem 0;max-width:36ch}

.foot-legal{margin-top:2.4rem;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.12);display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;font-size:.84rem;color:var(--mute-on-ink)}

.foot-legal .legal-links{display:flex;gap:1.2rem;flex-wrap:wrap}

/* ---------- STICKY MOBILE CTA ---------- */
  .mobile-cta{position:fixed;left:0;right:0;bottom:0;z-index:55;background:rgba(250,247,242,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1.5px solid var(--line);padding:.6rem var(--pad);display:none;gap:.6rem;align-items:center;box-shadow:0 -8px 24px -16px rgba(17,17,17,.5)}

.mobile-cta .pr{flex:none}

.mobile-cta .pr .lab{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);display:block;line-height:1}

.mobile-cta .pr .val{font-family:var(--f-xhead);font-weight:800;font-size:1.1rem;color:var(--pink-ink);line-height:1.1}

.mobile-cta .btn{flex:1}

/* ---------- KIMO CHAT WIDGET ---------- */
  .chat-fab{position:fixed;right:22px;bottom:22px;z-index:58;width:62px;height:62px;border-radius:50%;background:var(--pink);border:0;cursor:pointer;box-shadow:0 10px 26px -8px rgba(240,53,106,.7);display:grid;place-items:center;transition:transform .2s,box-shadow .2s;padding:0}

.chat-fab img{width:46px;height:46px;border-radius:50%}

.chat-fab .ic.close{display:none;width:26px;height:26px;color:#fff}

.chat-fab:hover{transform:translateY(-3px) scale(1.04)}

.chat-fab:active{transform:translateY(0)}

.chat-fab.open img{display:none}

.chat-fab.open .ic.close{display:block}

.chat-fab .pulse{position:absolute;top:0;right:0;width:15px;height:15px;background:var(--good);border:2.5px solid var(--paper);border-radius:50%}

.chat-fab.open .pulse{display:none}

.chat-panel{position:fixed;right:22px;bottom:96px;z-index:59;width:min(360px,calc(100vw - 32px));background:var(--paper-3);border:1.5px solid var(--line);border-radius:18px;box-shadow:0 24px 60px -16px rgba(17,17,17,.4);display:none;flex-direction:column;overflow:hidden}

.chat-panel.open{display:flex}

@media (prefers-reduced-motion:no-preference){.chat-panel.open{animation:chatpop .24s cubic-bezier(.3,1.3,.5,1)}@keyframes chatpop{from{transform:translateY(14px) scale(.98);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}}

.chat-head{background:var(--pink-cta);color:#fff;padding:1rem 1.1rem;display:flex;align-items:center;gap:.75rem}

.chat-head img{width:42px;height:42px;border-radius:50%;border:2px solid #fff;background:#fff;flex:none}

.chat-head .ti{font-family:var(--f-xhead);font-weight:800;font-size:1.02rem;line-height:1}

.chat-head .st{font-family:var(--f-mono);font-size:.66rem;display:flex;align-items:center;gap:.4em;margin-top:.3em;opacity:.95}

.chat-head .st .dot{width:7px;height:7px;background:#7CFFB2;border-radius:50%}

.chat-body{padding:1.1rem;display:flex;flex-direction:column;gap:.65rem;max-height:300px;overflow-y:auto;background:var(--paper)}

.chat-msg{background:var(--paper-3);border:1.5px solid var(--line);border-radius:13px 13px 13px 3px;padding:.7rem .85rem;font-size:.95rem;color:var(--ink);line-height:1.45;max-width:90%}

.chat-msg.me{align-self:flex-end;background:var(--pink-soft);border-color:var(--pink-line);border-radius:13px 13px 3px 13px}

.chat-langrow{display:flex;flex-wrap:wrap;gap:.35rem;padding:.7rem 1.1rem;border-top:1.5px solid var(--line);background:var(--paper-2)}

.chat-langrow .lbtn{font-family:var(--f-mono);font-size:.72rem;border:1.5px solid var(--line);background:var(--paper-3);padding:.34em .65em;cursor:pointer;border-radius:8px;transition:background .12s,color .12s}

.chat-langrow .lbtn:hover,.chat-langrow .lbtn[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}

.chat-foot{padding:.8rem 1.1rem 1rem;border-top:1.5px solid var(--line);background:var(--paper-3)}

.chat-foot .note{font-family:var(--f-mono);font-size:.68rem;color:var(--mute);line-height:1.5;margin-bottom:.7rem}

.chat-foot .btn{width:100%}

/* ---------- CONCEPT RIBBON ---------- */
  .concept-ribbon{position:fixed;top:0;right:0;z-index:200;background:var(--ink);color:#fff;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;padding:.4em .8em;border-radius:0 0 0 10px;box-shadow:0 4px 12px -4px rgba(0,0,0,.4);pointer-events:none}

.concept-ribbon b{color:var(--pink)}

/* ---------- MARQUEE (thin editorial accent) ---------- */
  .marquee{overflow:hidden;border-top:1.5px solid var(--line);border-bottom:1.5px solid var(--line);background:var(--paper-3);padding:.6rem 0}

.marquee .track{display:flex;gap:2.5rem;white-space:nowrap;font-family:var(--f-mono);font-size:.82rem;letter-spacing:.04em;color:var(--ink);font-weight:500;width:max-content}

.marquee .track span{display:inline-flex;align-items:center;gap:.6ch}

.marquee .track svg{width:14px;height:14px;color:var(--pink);flex:none}

@media (prefers-reduced-motion:no-preference){.marquee .track{animation:scroll 32s linear infinite}@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}}

/* ---------- REVEAL ---------- */
  @media (prefers-reduced-motion:no-preference){
    .reveal{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}
    .reveal.in{opacity:1;transform:none}
  }

/* ---------- RESPONSIVE ---------- */
  @media (max-width:980px){
    .hero-grid{grid-template-columns:1fr;gap:2rem}
    .hero-art{max-width:380px}
    .sizer{grid-template-columns:1fr}
    .split{grid-template-columns:1fr}
    .foot-grid{grid-template-columns:1fr 1fr}
    .timeline{grid-template-columns:1fr 1fr}
    .nav-links{display:none}
    .menu-btn{display:flex}
    .nav-cta .btn-line{display:none}
  }

@media (max-width:760px){
    .nav-links{display:none}
    .menu-btn{display:flex}
    .nav-cta .btn-line{display:none}
    .fork{grid-template-columns:1fr}
    .cmp{grid-template-columns:1fr}
    .plans{grid-template-columns:1fr}
    .lanes{grid-template-columns:1fr}
    .reviews{grid-template-columns:1fr}
    .timeline{grid-template-columns:1fr}
    .mobile-cta{display:flex}
    .chat-fab{bottom:84px}
    .chat-panel{bottom:158px}
    body.menu-open{overflow:hidden}
  }

@media (max-width:760px){
    .nav-drawer{display:none;position:fixed;inset:0;top:0;z-index:70;background:var(--paper)}
    .nav-drawer.open{display:block}
    .nav-drawer .inner{padding:1.2rem var(--pad)}
    .nav-drawer .dh{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}
    .nav-drawer a{display:block;font-family:var(--f-xhead);font-weight:800;font-size:1.6rem;padding:.6rem 0;border-bottom:1.5px solid var(--line)}
    .nav-drawer .close{background:none;border:1.5px solid var(--ink);border-radius:10px;width:44px;height:44px;display:grid;place-items:center;cursor:pointer}
    .nav-drawer .close svg{width:22px;height:22px}
  }

/* ============================================================
     KIMCHI MOBILE — "EDITORIAL POP" DESIGN SYSTEM (v.KIMO)
     Shared token + component sheet, mirrored from the home page.
     Anchor: KIMO Pink #F0356A · Ink #111 · Warm paper #FAF7F2.
     ============================================================ */
  :root{
    --pink:#F0356A;
    --pink-cta:#D81A56;
    --pink-deep:#B81348;
    --pink-ink:#A8013C;
    --pink-soft:#FCE4EC;
    --pink-line:#F7B6CC;

    --ink:#111111;
    --ink-2:#0A0A0A;
    --paper:#FAF7F2;
    --paper-2:#F2ECE2;
    --paper-3:#FFFFFF;
    --mute:#54514B;
    --mute-2:#7A766E;
    --line:rgba(17,17,17,.13);
    --line-2:rgba(17,17,17,.08);
    --on-ink:#FAF7F2;
    --mute-on-ink:#C9C4BB;
    --good:#0E7C55;
    --good-soft:#E1F2EA;
    --warn:#9A6B00;

    --maxw:1180px;
    --pad:clamp(18px,4.2vw,46px);

    --f-head:"Archivo",system-ui,sans-serif;
    --f-xhead:"Archivo Expanded","Archivo",system-ui,sans-serif;
    --f-body:"Hanken Grotesk",system-ui,sans-serif;
    --f-mono:"Spline Sans Mono",ui-monospace,monospace;

    --radius:16px;
    --radius-sm:11px;
    --shadow:0 1px 2px rgba(17,17,17,.05), 0 8px 26px -12px rgba(17,17,17,.18);
    --shadow-lift:0 2px 4px rgba(17,17,17,.06), 0 18px 40px -16px rgba(240,53,106,.30);
    --ring:0 0 0 3px var(--ink);
  }

body{
    font-family:var(--f-body);
    color:var(--ink);
    background:var(--paper);
    line-height:1.6;
    font-size:17.5px;
    overflow-x:clip;              /* clip (not hidden): keeps position:sticky header working site-wide */
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    background-image:
      radial-gradient(rgba(17,17,17,.018) 1px, transparent 1px),
      radial-gradient(rgba(17,17,17,.012) 1px, transparent 1px);
    background-size:5px 5px, 9px 9px;
    background-position:0 0, 3px 4px;
  }

/* ---------- TYPE SYSTEM ---------- */
  h1,h2,h3,h4{font-family:var(--f-xhead);font-weight:800;line-height:1.04;letter-spacing:-.02em;color:var(--ink)}

h1{font-size:clamp(2.3rem,5.4vw,3.8rem);line-height:.99;letter-spacing:-.035em}

.kicker{display:inline-flex;align-items:baseline;gap:.7ch;font-family:var(--f-mono);font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink);font-weight:500}

.scribble{position:relative;display:inline-block;color:var(--pink-ink)}

.scribble::after{content:"";position:absolute;left:-2%;right:-2%;bottom:-.16em;height:.22em;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'><path d='M2 9 C 40 3, 70 12, 100 6 S 170 3, 198 8' fill='none' stroke='%23F0356A' stroke-width='4' stroke-linecap='round'/></svg>") no-repeat;background-size:100% 100%}

/* ---------- SECTION HEADERS ---------- */
  .sec{padding:clamp(46px,7vw,80px) 0}

.sec-head{max-width:62ch;margin-bottom:clamp(26px,4vw,40px)}

/* ---------- BUTTONS ---------- */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:.55ch;font-family:var(--f-head);font-weight:700;font-size:1rem;letter-spacing:-.01em;padding:.86em 1.4em;border-radius:999px;border:0;cursor:pointer;transition:transform .18s cubic-bezier(.3,1.2,.5,1),box-shadow .18s,background .15s;text-align:center;line-height:1;white-space:nowrap}

.trust .pill{display:inline-flex;align-items:center;gap:.55ch;background:var(--paper-3);border:1.5px solid var(--line);border-radius:999px;padding:.5em .95em;font-size:.92rem;font-weight:600;color:var(--ink)}

.nav-links a:hover::after,.nav-links a[aria-current=page]::after{right:0}

.nav-links a[aria-current=page]{color:var(--pink-ink)}

/* ---------- BREADCRUMB ---------- */
  .crumb{padding-top:clamp(16px,2.5vw,26px)}

.crumb ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:.5ch;font-family:var(--f-mono);font-size:.78rem;letter-spacing:.03em;color:var(--mute)}

.crumb a{color:var(--mute);text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--line)}

.crumb a:hover{color:var(--pink-ink)}

.crumb svg{width:13px;height:13px;color:var(--mute-2);flex:none}

.crumb [aria-current=page]{color:var(--ink);font-weight:600}

/* ---------- SHOP HERO ---------- */
  .shop-hero{padding:clamp(8px,2vw,18px) 0 clamp(24px,4vw,40px)}

.shop-hero .head{display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(24px,4vw,46px);align-items:end}

.shop-hero h1{margin:.6rem 0 .9rem}

.shop-hero .lead{margin-bottom:1.2rem}

.shop-hero .quicks{display:flex;flex-wrap:wrap;gap:.6rem 1rem;font-size:.92rem;color:var(--mute);font-weight:500}

.shop-hero .quicks span{display:inline-flex;align-items:center;gap:.4ch}

.shop-hero .quicks svg{width:15px;height:15px;color:var(--good);flex:none}

.shop-hero .companion{display:flex;align-items:flex-end;justify-content:flex-end;gap:.7rem}

.shop-hero .companion img{width:104px;height:104px;flex:none;filter:drop-shadow(0 12px 22px rgba(240,53,106,.28))}

.shop-hero .bubble{background:var(--ink);color:#fff;font-family:var(--f-head);font-weight:600;font-size:.84rem;padding:.6em .85em;border-radius:12px 12px 2px 12px;line-height:1.35;max-width:200px;box-shadow:var(--shadow)}

/* ---------- FILTER CHIPS ---------- */
  .filterbar{position:sticky;top:62px;z-index:40;background:rgba(250,247,242,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-top:1.5px solid var(--line);border-bottom:1.5px solid var(--line);padding:.75rem 0}

.filterbar .inner{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap}

.filterbar .flabel{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);flex:none}

.chips{display:flex;gap:.45rem;flex-wrap:wrap}

.chip{font-family:var(--f-head);font-weight:600;font-size:.92rem;padding:.5em 1.05em;border-radius:999px;border:1.5px solid var(--line);background:var(--paper-3);color:var(--ink);cursor:pointer;transition:background .14s,color .14s,border-color .14s,box-shadow .14s;display:inline-flex;align-items:center;gap:.45ch}

.chip:hover{border-color:var(--ink)}

.chip[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}

.chip.all[aria-pressed=true]{background:var(--pink-cta);border-color:var(--pink-cta)}

.chip:focus-visible{outline:3px solid var(--ink);outline-offset:2px}

.filter-count{font-family:var(--f-mono);font-size:.78rem;color:var(--mute);margin-left:auto;flex:none}

/* ---------- PRODUCT GRID ---------- */
  .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.15rem;margin-top:clamp(22px,3vw,32px)}

.prod{position:relative;background:var(--paper-3);border:1.5px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}

.prod:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}

.prod.pop{border:2px solid var(--pink);box-shadow:var(--shadow-lift)}

.prod.is-hidden{display:none}

.prod .media{position:relative;aspect-ratio:16/10;background:var(--pink-soft);overflow:hidden;border-bottom:1.5px solid var(--line)}

.prod .media img{width:100%;height:100%;object-fit:cover;filter:saturate(1.03) contrast(1.01)}

/* Top badge bar: type label (left) + Featured flag (right) share one flex row
   so they can NEVER overlap — they sit at opposite ends, with a gap, and the
   type label truncates before it would collide with the Featured pill. */
.prod .media .badge-row{position:absolute;top:11px;left:11px;right:11px;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem;pointer-events:none}

.prod .media .type{background:rgba(17,17,17,.84);color:#fff;font-family:var(--f-mono);font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;padding:.34em .65em;border-radius:8px;backdrop-filter:blur(4px);max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.prod .media .badge-pop{position:static;top:auto;left:auto;transform:none;flex:none;background:var(--pink-cta);color:#fff;font-family:var(--f-mono);font-weight:700;font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;padding:.36em .6em;border-radius:999px;box-shadow:0 6px 16px -6px rgba(240,53,106,.6);white-space:nowrap;display:inline-flex;align-items:center;gap:.3ch}

.prod .media .badge-pop .star{font-size:.85em;line-height:1}

.prod .body{padding:1.3rem 1.3rem 1.4rem;display:flex;flex-direction:column;flex:1}

.prod .tier{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}

.prod .pname{font-family:var(--f-xhead);font-weight:800;font-size:1.3rem;margin:.18rem 0 .15rem;line-height:1.04}

.prod .spec{font-size:.95rem;color:var(--mute);margin-bottom:.9rem}

.prod .spec strong{color:var(--ink)}

.prod .price{display:flex;align-items:baseline;gap:.3ch;margin:.2rem 0 .15rem}

.prod .price .cur{font-family:var(--f-head);font-weight:700;font-size:1.05rem;color:var(--ink)}

.prod .price .amt{font-family:var(--f-xhead);font-weight:800;font-size:2.2rem;color:var(--ink);line-height:1}

.prod.pop .price .amt{color:var(--pink-ink)}

.prod .price .unit{font-size:.85rem;color:var(--mute);font-family:var(--f-body);font-weight:500}

.prod .was{font-family:var(--f-mono);font-size:.85rem;color:var(--mute-2);margin-bottom:.55rem;min-height:1.2em}

.prod .was s{text-decoration:line-through}

.prod .was .note{color:var(--mute)}

.prod .was .save{color:var(--good);font-weight:700;margin-left:.4ch}

.prod ul{list-style:none;display:flex;flex-direction:column;gap:.5rem;margin:.85rem 0 1.2rem;flex:1}

.prod li{display:flex;gap:.55ch;font-size:.95rem;align-items:flex-start;line-height:1.4;color:var(--ink)}

.prod li svg{width:16px;height:16px;color:var(--good);flex:none;margin-top:3px}

.prod .cta-row{display:flex;flex-direction:column;gap:.5rem}

.prod .detail{font-family:var(--f-head);font-weight:600;font-size:.88rem;color:var(--pink-ink);text-align:center;text-decoration:underline;text-underline-offset:2px}

.prod .detail:hover{color:var(--pink-deep)}

.empty{display:none;text-align:center;padding:2.4rem 1rem;color:var(--mute)}

.empty.show{display:block}

.empty img{width:84px;height:84px;margin:0 auto .8rem;opacity:.95}

.empty b{color:var(--ink)}

/* ---------- HELP-ME-CHOOSE HELPER ---------- */
  .helper{display:grid;grid-template-columns:.42fr .58fr;gap:0;border-radius:var(--radius);overflow:hidden;border:1.5px solid var(--line);box-shadow:var(--shadow-lift);background:var(--paper-3)}

.helper .aside{background:var(--ink);color:var(--on-ink);padding:clamp(1.5rem,3vw,2.1rem);display:flex;flex-direction:column;justify-content:center}

.helper .aside img{width:84px;height:84px;margin-bottom:1rem;filter:drop-shadow(0 10px 20px rgba(240,53,106,.4))}

.helper .aside .k{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--pink);font-weight:600;margin-bottom:.5rem}

.helper .aside h3{color:#fff;margin-bottom:.5rem}

.helper .aside p{color:var(--mute-on-ink);font-size:.98rem}

.helper .panel{padding:clamp(1.5rem,3vw,2.1rem)}

.helper .q{font-family:var(--f-head);font-weight:700;font-size:1rem;margin-bottom:.7rem;color:var(--ink)}

.helper .opts{display:flex;flex-direction:column;gap:.55rem;margin-bottom:1.3rem}

.helper .opt{display:flex;align-items:center;gap:.7rem;text-align:left;font-family:var(--f-body);font-size:1rem;font-weight:500;color:var(--ink);padding:.85em 1em;border-radius:var(--radius-sm);border:1.5px solid var(--line);background:var(--paper);cursor:pointer;transition:border-color .14s,background .14s}

.helper .opt:hover{border-color:var(--ink)}

.helper .opt[aria-pressed=true]{border-color:var(--pink);background:var(--pink-soft)}

.helper .opt .dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--mute-2);flex:none;display:grid;place-items:center;transition:border-color .14s}

.helper .opt[aria-pressed=true] .dot{border-color:var(--pink-cta)}

.helper .opt[aria-pressed=true] .dot::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--pink-cta)}

.helper .opt:focus-visible{outline:3px solid var(--ink);outline-offset:2px}

.helper .result{background:var(--paper);border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:1.2rem 1.2rem;display:none}

.helper .result.show{display:block;border-color:var(--pink);box-shadow:0 0 0 3px var(--pink-soft);animation:ke-result-in .4s ease both}
@keyframes ke-result-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.helper .result .rlab{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}

.helper .result .rplan{font-family:var(--f-xhead);font-weight:800;font-size:1.45rem;line-height:1.05;margin:.2rem 0 .35rem}

.helper .result .rwhy{font-size:.96rem;color:var(--mute);margin-bottom:1rem}

.helper .result .rwhy b{color:var(--ink)}

/* ---------- FAQ ---------- */
  .faq{max-width:820px}

/* ---------- RESPONSIVE ---------- */
  @media (max-width:980px){
    .shop-hero .head{grid-template-columns:1fr;gap:1.4rem;align-items:start}
    .shop-hero .companion{justify-content:flex-start}
    .grid{grid-template-columns:repeat(2,1fr)}
    .helper{grid-template-columns:1fr}
    .foot-grid{grid-template-columns:1fr 1fr}
    .nav-links{display:none}
    .menu-btn{display:flex}
    .nav-cta .btn-line{display:none}
  }

@media (max-width:760px){
    .menu-btn{display:flex}
    .nav-cta .btn-line{display:none}
    .grid{grid-template-columns:1fr}
    .filterbar{top:60px}
    .filter-count{display:none}
    .mobile-cta{display:flex}
    .chat-fab{bottom:84px}
    .chat-panel{bottom:158px}
    body.menu-open{overflow:hidden}
    .nav-drawer{display:none;position:fixed;inset:0;top:0;z-index:70;background:var(--paper)}
    .nav-drawer.open{display:block}
    .nav-drawer .inner{padding:1.2rem var(--pad)}
    .nav-drawer .dh{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}
    .nav-drawer a{display:block;font-family:var(--f-xhead);font-weight:800;font-size:1.6rem;padding:.6rem 0;border-bottom:1.5px solid var(--line)}
    .nav-drawer .close{background:none;border:1.5px solid var(--ink);border-radius:10px;width:44px;height:44px;display:grid;place-items:center;cursor:pointer}
    .nav-drawer .close svg{width:22px;height:22px}
  }

/* ============================================================
     KIMCHI MOBILE — "EDITORIAL POP" DESIGN SYSTEM (v.KIMO)
     Shared source-of-truth token + component sheet (mirrors home).
     Anchor: KIMO Pink #F0356A · Ink #111 · Warm paper #FAF7F2.
     ONE accent (pink) + black + neutral. No rainbow. Readable first.
     ============================================================ */
  :root{
    --pink:#F0356A;
    --pink-cta:#D81A56;
    --pink-deep:#B81348;
    --pink-ink:#A8013C;
    --pink-soft:#FCE4EC;
    --pink-line:#F7B6CC;

    --ink:#111111;
    --ink-2:#0A0A0A;
    --paper:#FAF7F2;
    --paper-2:#F2ECE2;
    --paper-3:#FFFFFF;
    --mute:#54514B;
    --mute-2:#7A766E;
    --line:rgba(17,17,17,.13);
    --line-2:rgba(17,17,17,.08);
    --on-ink:#FAF7F2;
    --mute-on-ink:#C9C4BB;
    --good:#0E7C55;
    --good-soft:#E1F2EA;
    --warn:#9A6B00;

    --maxw:1180px;
    --pad:clamp(18px,4.2vw,46px);

    --f-head:"Archivo",system-ui,sans-serif;
    --f-xhead:"Archivo Expanded","Archivo",system-ui,sans-serif;
    --f-body:"Hanken Grotesk",system-ui,sans-serif;
    --f-mono:"Spline Sans Mono",ui-monospace,monospace;

    --radius:16px;
    --radius-sm:11px;
    --shadow:0 1px 2px rgba(17,17,17,.05), 0 8px 26px -12px rgba(17,17,17,.18);
    --shadow-lift:0 2px 4px rgba(17,17,17,.06), 0 18px 40px -16px rgba(240,53,106,.30);
    --ring:0 0 0 3px var(--ink);
  }

h1{font-size:clamp(2.1rem,4.6vw,3.3rem);line-height:1;letter-spacing:-.032em}

/* ---------- TRUST STRIP / PILLS ---------- */
  .trust{display:flex;flex-wrap:wrap;gap:.55rem .5rem;align-items:stretch}

/* ---------- CARDS ---------- */
  .card{background:var(--paper-3);border:1.5px solid var(--line);border-radius:var(--radius);padding:1.5rem 1.4rem;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column}

.badge-pop{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--pink-cta);color:#fff;font-family:var(--f-mono);font-weight:700;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;padding:.42em .85em;border-radius:999px;box-shadow:0 6px 16px -6px rgba(240,53,106,.6);white-space:nowrap}

/* ---------- BREADCRUMB ---------- */
  .crumb{padding-top:1.2rem;padding-bottom:.2rem}

.crumb ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:.5ch;font-family:var(--f-mono);font-size:.78rem;letter-spacing:.02em;color:var(--mute)}

.crumb a{color:var(--mute);text-decoration:none}

.crumb a:hover{color:var(--pink-ink);text-decoration:underline;text-underline-offset:2px}

.crumb li[aria-current]{color:var(--ink);font-weight:600}

.crumb .sep{color:var(--mute-2);opacity:.7}

/* ---------- PRODUCT HEADER (gallery + buy box) ---------- */
  .product{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(28px,4vw,56px);align-items:start;padding-top:clamp(20px,3vw,34px)}

/* gallery */
  .gallery{position:sticky;top:84px}

.gallery .main{position:relative;border-radius:var(--radius);overflow:hidden;border:1.5px solid var(--line);box-shadow:var(--shadow-lift);aspect-ratio:4/3;background:var(--pink-soft)}

.gallery .main img{width:100%;height:100%;object-fit:cover;filter:saturate(1.04) contrast(1.02);display:none}

.gallery .main img.active{display:block}

.gallery .gtag{position:absolute;top:14px;left:14px;background:var(--pink-cta);color:#fff;font-family:var(--f-mono);font-weight:700;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;padding:.4em .8em;border-radius:999px;box-shadow:0 6px 16px -6px rgba(240,53,106,.6);z-index:2}

.gallery .gcap{position:absolute;left:14px;bottom:14px;background:rgba(17,17,17,.82);color:#fff;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.04em;padding:.4em .7em;border-radius:8px;backdrop-filter:blur(4px);z-index:2}

.gallery .gkimo{position:absolute;right:-14px;bottom:-16px;width:92px;height:92px;filter:drop-shadow(0 12px 22px rgba(240,53,106,.32));z-index:3}

.thumbs{display:flex;gap:.6rem;margin-top:.8rem}

.thumbs button{flex:1;border:1.5px solid var(--line);background:var(--paper-3);border-radius:var(--radius-sm);overflow:hidden;cursor:pointer;padding:0;aspect-ratio:4/3;transition:border-color .15s,transform .15s}

.thumbs button img{width:100%;height:100%;object-fit:cover}

.thumbs button[aria-pressed=true]{border-color:var(--pink);box-shadow:0 0 0 2px var(--pink-soft)}

.thumbs button:hover{transform:translateY(-2px)}

.thumbs button.diagram{display:grid;place-items:center;background:var(--ink);color:#fff}

.thumbs button.diagram svg{width:30px;height:30px;color:#fff}

/* buy box */
  .buy{display:flex;flex-direction:column}

.buy .ptier{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--pink-ink);font-weight:600;display:inline-flex;align-items:center;gap:.5ch}

.buy h1{margin:.5rem 0 .4rem}

.buy .psub{font-size:1.05rem;color:var(--mute);max-width:46ch;margin-bottom:1rem}

.buy .prow{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;margin-bottom:.4rem}

.buy .pscore{display:inline-flex;align-items:center;gap:.5ch;font-size:.9rem;font-weight:600;color:var(--ink)}

.buy .pscore svg{width:16px;height:16px;color:var(--pink);flex:none}

.buy .pop-flag{display:inline-flex;align-items:center;gap:.45ch;background:var(--pink-soft);color:var(--pink-ink);border:1.5px solid var(--pink-line);border-radius:999px;padding:.3em .75em;font-family:var(--f-mono);font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}

.priceline{display:flex;align-items:baseline;gap:.55ch;margin:1.2rem 0 .2rem;flex-wrap:wrap}

.priceline .cur{font-family:var(--f-head);font-weight:700;font-size:1.3rem;color:var(--ink);align-self:flex-start;margin-top:.35rem}

.priceline .amt{font-family:var(--f-xhead);font-weight:800;font-size:clamp(2.8rem,7vw,3.6rem);color:var(--pink-ink);line-height:.9}

.priceline .unit{font-size:.95rem;color:var(--mute);font-weight:500}

.pricenote{font-size:.92rem;color:var(--mute);margin-bottom:1.3rem}

.pricenote b{color:var(--ink)}

/* variant selector */
  .variant{margin-bottom:1.2rem}

.variant .vlab{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--f-head);font-weight:700;font-size:.95rem;margin-bottom:.55rem;color:var(--ink);gap:.6rem;flex-wrap:wrap}

.variant .vlab .help{font-family:var(--f-body);font-weight:500;font-size:.82rem;color:var(--mute)}

.vseg{display:flex;gap:.55rem;flex-wrap:wrap}

.vseg button{flex:1;min-width:130px;text-align:left;font-family:var(--f-head);font-weight:600;font-size:.95rem;padding:.7em .85em;border-radius:12px;border:1.5px solid var(--line);background:var(--paper-3);color:var(--ink);cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s;position:relative;line-height:1.25}

.vseg button small{display:block;font-weight:500;font-size:.78rem;color:var(--mute);margin-top:.15rem}

.vseg button[aria-pressed=true]{border-color:var(--pink);background:var(--pink-soft);box-shadow:0 0 0 1.5px var(--pink)}

.vseg button[aria-pressed=true] small{color:var(--pink-ink)}

.vseg button:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

.vseg button .vprice{font-family:var(--f-mono);color:var(--pink-ink);font-weight:700}

/* qty */
  .qtyrow{display:flex;align-items:center;gap:.9rem;margin-bottom:1.3rem;flex-wrap:wrap}

.qty{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:12px;overflow:hidden;background:var(--paper-3)}

.qty button{width:46px;height:46px;border:0;background:transparent;cursor:pointer;font-size:1.3rem;color:var(--ink);display:grid;place-items:center;font-family:var(--f-head);line-height:1}

.qty button:hover{background:var(--pink-soft);color:var(--pink-ink)}

.qty input{width:46px;height:46px;border:0;border-left:1.5px solid var(--line);border-right:1.5px solid var(--line);text-align:center;font-family:var(--f-mono);font-weight:700;font-size:1.05rem;color:var(--ink);background:transparent}

.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

.qtyrow .qhint{font-size:.88rem;color:var(--mute)}

/* add to cart + success */
  .addrow{display:flex;flex-direction:column;gap:.6rem;margin-bottom:1.2rem}

.addrow .total{display:flex;justify-content:space-between;align-items:baseline;font-size:.95rem;color:var(--mute);padding:0 .2rem}

.addrow .total b{font-family:var(--f-xhead);font-weight:800;font-size:1.25rem;color:var(--ink)}

.cart-ok{display:none;align-items:center;gap:.8rem;background:var(--good-soft);border:1.5px solid #9FD9C2;border-radius:var(--radius);padding:.85rem 1rem;color:#0A5C40;margin-bottom:1.2rem}

.cart-ok.show{display:flex}

@media (prefers-reduced-motion:no-preference){.cart-ok.show{animation:okpop .28s cubic-bezier(.3,1.3,.5,1)}@keyframes okpop{from{transform:scale(.97);opacity:0}to{transform:scale(1);opacity:1}}}

.cart-ok img{width:46px;height:46px;flex:none}

.cart-ok .ctxt{font-size:.95rem;line-height:1.4;color:#0A5C40}

.cart-ok .ctxt b{color:#0A5C40}

.cart-ok a{color:#0A5C40;font-weight:700;text-decoration:underline;text-underline-offset:2px}

/* trust at CTA */
  .cta-trust{display:grid;grid-template-columns:1fr 1fr;gap:.55rem .8rem;padding:1rem 1.1rem;background:var(--paper-3);border:1.5px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:1.1rem}

.cta-trust .t{display:flex;align-items:flex-start;gap:.5ch;font-size:.9rem;font-weight:600;color:var(--ink);line-height:1.3}

.cta-trust .t svg{width:17px;height:17px;color:var(--good);flex:none;margin-top:2px}

.pay-row{display:flex;align-items:center;gap:.6ch;font-size:.85rem;color:var(--mute);font-family:var(--f-mono);letter-spacing:.02em}

.pay-row svg{width:16px;height:16px;color:var(--pink);flex:none}

.pay-row .open-chat{color:var(--pink-ink);font-weight:600;background:none;border:0;cursor:pointer;font-family:inherit;font-size:inherit;text-decoration:underline;text-underline-offset:2px}

/* ---------- BENEFIT BULLETS ---------- */
  .benefits{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}

.benefit{display:flex;gap:.8rem;align-items:flex-start;background:var(--paper-3);border:1.5px solid var(--line);border-radius:var(--radius);padding:1.15rem 1.2rem;box-shadow:var(--shadow)}

.benefit .bi{width:40px;height:40px;border-radius:11px;background:var(--pink-soft);display:grid;place-items:center;flex:none}

.benefit .bi svg{width:21px;height:21px;color:var(--pink-ink)}

.benefit h4{margin-bottom:.2rem}

.benefit p{font-size:.95rem;margin:0}

/* ---------- ACTIVATION STEPS ---------- */
  .timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}

.step{position:relative;padding:1.4rem 1.3rem;border-radius:var(--radius);background:var(--paper-3);border:1.5px solid var(--line);box-shadow:var(--shadow)}

.step .n{font-family:var(--f-xhead);font-weight:800;font-size:1.7rem;color:var(--pink-ink);line-height:1}

.step h4{margin:.55rem 0 .35rem}

.step .si{position:absolute;top:1.3rem;right:1.3rem;width:26px;height:26px;color:var(--pink);opacity:.45}

.step .si svg{width:26px;height:26px}

/* ---------- DEVICE NOTE ---------- */
  .devnote{display:flex;gap:1rem;align-items:flex-start;background:var(--paper-3);border:1.5px solid var(--line);border-left:4px solid var(--pink);border-radius:var(--radius);padding:1.3rem 1.4rem;box-shadow:var(--shadow);max-width:820px}

.devnote img{width:58px;height:58px;flex:none}

.devnote h3{margin-bottom:.3rem}

.devnote p{font-size:1rem;margin-bottom:.4rem}

.devnote .open-chat{color:var(--pink-ink);font-weight:700;background:none;border:0;cursor:pointer;font-family:inherit;font-size:inherit;text-decoration:underline;text-underline-offset:3px}

/* ---------- DEVICE SELF-CHECK ---------- */
  .checker{background:var(--paper-3);border:1.5px solid var(--line);border-radius:var(--radius);padding:clamp(1.4rem,3vw,1.8rem);box-shadow:var(--shadow);max-width:820px;margin-top:1.3rem}

.checker label{font-family:var(--f-head);font-weight:600}

.checker .row{display:flex;gap:.6rem;flex-wrap:wrap;margin:.9rem 0 0}

.checker .out{margin-top:.7rem;padding:1rem 1.1rem;border-radius:var(--radius-sm);font-size:.98rem;display:none;align-items:flex-start;gap:.7ch;line-height:1.5}

/* ---------- HONEST MINI-COMPARISON ---------- */
  .cmp{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}

/* ---------- RELATED ---------- */
  .related{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}

.relcard{position:relative;background:var(--paper-3);border:1.5px solid var(--line);border-radius:var(--radius);padding:1.5rem 1.4rem;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}

.relcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}

.relcard .tier{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}

.relcard .pname{font-family:var(--f-xhead);font-weight:800;font-size:1.3rem;margin:.2rem 0 .15rem}

.relcard .price{display:flex;align-items:baseline;gap:.3ch;margin:.4rem 0 .2rem}

.relcard .price .cur{font-family:var(--f-head);font-weight:700;font-size:1rem;color:var(--ink)}

.relcard .price .amt{font-family:var(--f-xhead);font-weight:800;font-size:2rem;color:var(--ink);line-height:1}

.relcard .meta{font-size:.9rem;color:var(--mute);margin-bottom:1.1rem;flex:1}

/* ---------- STICKY MOBILE CTA (add to cart) ---------- */
  .mobile-cta{position:fixed;left:0;right:0;bottom:0;z-index:55;background:rgba(250,247,242,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1.5px solid var(--line);padding:.6rem var(--pad);display:none;gap:.7rem;align-items:center;box-shadow:0 -8px 24px -16px rgba(17,17,17,.5)}

.mobile-cta .pr .lab{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);display:block;line-height:1}

.mobile-cta .pr .val{font-family:var(--f-xhead);font-weight:800;font-size:1.15rem;color:var(--pink-ink);line-height:1.1}

.mobile-cta .pr .val small{font-size:.6rem;color:var(--mute);font-family:var(--f-mono);font-weight:500}

/* ---------- MARQUEE ---------- */
  .marquee{overflow:hidden;border-top:1.5px solid var(--line);border-bottom:1.5px solid var(--line);background:var(--paper-3);padding:.6rem 0}

/* ---------- RESPONSIVE ---------- */
  @media (max-width:980px){
    .product{grid-template-columns:1fr;gap:2rem}
    .gallery{position:static;top:auto}
    .benefits{grid-template-columns:1fr 1fr}
    .timeline{grid-template-columns:1fr}
    .cmp{grid-template-columns:1fr}
    .foot-grid{grid-template-columns:1fr 1fr}
    .nav-links{display:none}
    .menu-btn{display:flex}
    .nav-cta .btn-line{display:none}
  }

@media (max-width:760px){
    .nav-links{display:none}
    .menu-btn{display:flex}
    .nav-cta .btn-line{display:none}
    .benefits{grid-template-columns:1fr}
    .cta-trust{grid-template-columns:1fr}
    .reviews{grid-template-columns:1fr}
    .related{grid-template-columns:1fr}
    .mobile-cta{display:flex}
    .chat-fab{bottom:84px}
    .chat-panel{bottom:158px}
    body.menu-open{overflow:hidden}
  }

/* ============================================================
     KIMCHI MOBILE — "EDITORIAL POP" DESIGN SYSTEM (v.KIMO)
     Blog index — mirrors the source-of-truth token + component sheet.
     Anchor: KIMO Pink #F0356A · Ink #111 · Warm paper #FAF7F2.
     ONE accent (pink) + black + neutral. No rainbow. Readable first.
     ============================================================ */
  :root{
    /* ---- brand palette (anchored on KIMO) ---- */
    --pink:#F0356A;          /* KIMO Pink — brand anchor: borders, scribble, accents, theme-color */
    --pink-cta:#D81A56;      /* solid CTA fill — white text on it = 5.0:1 (WCAG AA, any size) */
    --pink-deep:#B81348;     /* pressed CTA pink */
    --pink-ink:#A8013C;      /* pink dark enough for small text on paper (AA) */
    --pink-soft:#FCE4EC;     /* pink wash for highlights / fills */
    --pink-line:#F7B6CC;     /* hairline pink */

    --ink:#111111;           /* structural ink + body text */
    --ink-2:#0A0A0A;         /* deepest ink (footer / hero ink panels) */
    --paper:#FAF7F2;         /* warm off-white base */
    --paper-2:#F2ECE2;       /* alternating band */
    --paper-3:#FFFFFF;       /* lightest — cards */
    --mute:#54514B;          /* muted body — AA on paper (≈8:1) */
    --mute-2:#7A766E;        /* lightest muted still AA on paper */
    --line:rgba(17,17,17,.13);   /* hairline on paper */
    --line-2:rgba(17,17,17,.08);
    --on-ink:#FAF7F2;        /* text on ink */
    --mute-on-ink:#C9C4BB;   /* muted on ink */
    --good:#0E7C55;          /* restrained "yes" green — AA on paper */
    --good-soft:#E1F2EA;
    --warn:#9A6B00;          /* restrained amber — AA on paper */

    --maxw:1180px;
    --pad:clamp(18px,4.2vw,46px);

    --f-head:"Archivo",system-ui,sans-serif;
    --f-xhead:"Archivo Expanded","Archivo",system-ui,sans-serif;
    --f-body:"Hanken Grotesk",system-ui,sans-serif;
    --f-mono:"Spline Sans Mono",ui-monospace,monospace;

    --radius:16px;
    --radius-sm:11px;
    --shadow:0 1px 2px rgba(17,17,17,.05), 0 8px 26px -12px rgba(17,17,17,.18);
    --shadow-lift:0 2px 4px rgba(17,17,17,.06), 0 18px 40px -16px rgba(240,53,106,.30);
    --ring:0 0 0 3px var(--ink);
  }

/* ---------- BREADCRUMB ---------- */
  .crumbs{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.04em;color:var(--mute);display:flex;align-items:center;gap:.55ch;flex-wrap:wrap}

.crumbs a{color:var(--mute);text-decoration:underline;text-underline-offset:2px}

.crumbs a:hover{color:var(--ink)}

.crumbs .sep{color:var(--mute-2)}

.crumbs [aria-current=page]{color:var(--ink);font-weight:600}

/* ---------- BLOG HERO ---------- */
  .blog-hero{position:relative;padding:clamp(30px,4.5vw,52px) 0 clamp(8px,2vw,18px);overflow:hidden}

.blog-hero .top{display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}

.blog-hero h1{margin:.9rem 0 .9rem;max-width:16ch}

.blog-hero .lead{margin-bottom:1.3rem}

.blog-hero-kimo{display:flex;align-items:center;gap:.85rem;background:var(--paper-3);border:1.5px solid var(--line);border-radius:999px;padding:.5rem .9rem .5rem .55rem;box-shadow:var(--shadow);flex:none}

.blog-hero-kimo img{width:48px;height:48px;flex:none}

.blog-hero-kimo .t{font-family:var(--f-head);font-weight:600;font-size:.86rem;color:var(--ink);line-height:1.3;max-width:18ch}

.blog-hero-kimo .t b{color:var(--pink-ink)}

/* ---------- CATEGORY FILTER ---------- */
  .filter-bar{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:.4rem}

.filter-bar .flabel{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-right:.3rem}

.chip{
    font-family:var(--f-head);font-weight:600;font-size:.9rem;
    border:1.5px solid var(--line);background:var(--paper-3);color:var(--ink);
    padding:.5em 1em;border-radius:999px;cursor:pointer;transition:background .15s,color .15s,border-color .15s,transform .15s;
  }

.chip:hover{transform:translateY(-1px)}

.chip .c{font-family:var(--f-mono);font-size:.78em;opacity:.7;margin-left:.3ch}

.chip[aria-pressed=true] .c{opacity:.85}

/* ---------- FEATURED LEAD POST ---------- */
  .featured{
    display:grid;grid-template-columns:1.05fr .95fr;gap:0;
    background:var(--paper-3);border:1.5px solid var(--line);border-radius:var(--radius);
    overflow:hidden;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s;
  }

.featured:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}

.featured .media{position:relative;min-height:300px;background:var(--pink-soft)}

.featured .media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;filter:saturate(1.03) contrast(1.02)}

.featured .media .flag{position:absolute;top:14px;left:14px;background:var(--pink-cta);color:#fff;font-family:var(--f-mono);font-weight:700;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;padding:.42em .85em;border-radius:999px;box-shadow:0 6px 16px -6px rgba(240,53,106,.6)}

.featured .body{padding:clamp(1.5rem,3vw,2.3rem);display:flex;flex-direction:column}

.featured .meta{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem .8rem;margin-bottom:.9rem}

.featured h2{font-size:clamp(1.55rem,3vw,2.2rem);line-height:1.04;margin-bottom:.7rem}

.featured h2 a{color:var(--ink)}

.featured h2 a:hover{color:var(--pink-ink)}

.featured .excerpt{font-size:1.05rem;color:var(--mute);margin-bottom:1.4rem;max-width:50ch}

.featured .foot{margin-top:auto;display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}

/* shared meta atoms (tag · read-time · date · author) */
  .ptag{display:inline-flex;align-items:center;gap:.4ch;font-family:var(--f-head);font-weight:700;font-size:.74rem;letter-spacing:.02em;text-transform:uppercase;color:var(--pink-ink);background:var(--pink-soft);border:1px solid var(--pink-line);padding:.3em .65em;border-radius:999px}

.pmeta{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.02em;color:var(--mute);display:inline-flex;align-items:center;gap:.45ch}

.pmeta svg{width:13px;height:13px;color:var(--mute-2);flex:none}

.pdot{color:var(--mute-2)}

.byline{display:inline-flex;align-items:center;gap:.5ch;font-size:.84rem;color:var(--mute)}

.byline .av{width:26px;height:26px;border-radius:50%;background:var(--pink-soft);border:1.5px solid var(--pink-line);display:grid;place-items:center;flex:none}

.byline .av img{width:20px;height:20px}

.byline b{color:var(--ink);font-weight:600}

.readlink{font-family:var(--f-head);font-weight:700;font-size:.92rem;color:var(--pink-ink);display:inline-flex;align-items:center;gap:.4ch;margin-top:auto}

.readlink .arr{transition:transform .18s}

a:hover .readlink .arr{transform:translateX(3px)}

/* ---------- POST GRID ---------- */
  .post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;margin-top:clamp(22px,3.5vw,34px)}

.post{
    position:relative;display:flex;flex-direction:column;
    background:var(--paper-3);border:1.5px solid var(--line);border-radius:var(--radius);
    overflow:hidden;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s,opacity .25s;
  }

.post:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}

.post .thumb{position:relative;aspect-ratio:16/10;background:var(--pink-soft);overflow:hidden}

.post .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}

.post:hover .thumb img{transform:scale(1.04)}

.post .thumb .cat{position:absolute;top:11px;left:11px}

.post .body{padding:1.3rem 1.3rem 1.4rem;display:flex;flex-direction:column;flex:1}

.post .meta{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem .6rem;margin-bottom:.65rem}

.post h3{font-family:var(--f-xhead);font-weight:800;font-size:1.18rem;line-height:1.12;letter-spacing:-.02em;margin-bottom:.55rem}

.post h3 a{color:var(--ink)}

.post h3 a:hover{color:var(--pink-ink)}

.post .excerpt{font-size:.98rem;color:var(--mute);line-height:1.5;margin-bottom:1.1rem;flex:1}

.post .foot{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap}

.post.is-hidden{display:none}

.post .post-more{display:inline-flex;align-items:center;gap:.5ch;font-family:var(--f-head);font-weight:700;font-size:.92rem;color:var(--pink-ink)}
.post .post-more .arr{transition:transform .18s}
.post:hover .post-more .arr{transform:translateX(3px)}

/* single-article featured image */
.post-feat{margin:0 auto clamp(26px,4vw,40px)}
.post-feat img,.post-feat .post-feat-img{display:block;width:100%;aspect-ratio:2/1;object-fit:cover;border-radius:var(--radius);border:1.5px solid var(--line);box-shadow:var(--shadow-lift)}

.stretch::after{content:"";position:absolute;inset:0}

/* empty state (filter -> no match) */
  .empty{display:none;text-align:center;padding:clamp(34px,6vw,60px) 1rem;border:1.5px dashed var(--line);border-radius:var(--radius);background:var(--paper-3);margin-top:1.6rem}

.empty img{width:92px;height:92px;margin:0 auto .9rem;filter:drop-shadow(0 10px 20px rgba(240,53,106,.28))}

.empty h3{font-family:var(--f-xhead);font-size:1.3rem;margin-bottom:.4rem}

.empty p{margin:0 auto 1.2rem;max-width:42ch}

/* ---------- SOFT SHOP CTA (ink band) ----------
   Markup: .softcta > [ img.softcta-kimo | div(h2+p) | a.btn ]
   Mascot pinned left, copy takes the flexible centre, CTA pinned right,
   all vertically centred — a balanced horizontal band that fills the panel.
   Stacks centred on mobile. */
  .softcta{display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(14px,2.4vw,22px);background:var(--ink);color:var(--on-ink);border-radius:clamp(20px,4vw,28px);padding:clamp(2rem,4vw,3rem)}

.softcta .softcta-kimo{flex:none;width:clamp(76px,8vw,104px);height:auto;filter:drop-shadow(0 12px 24px rgba(240,53,106,.34))}

.softcta>div{max-width:56ch}

.softcta h2{color:#fff;max-width:26ch;margin:0 auto .5rem}

.softcta p{color:var(--mute-on-ink);max-width:54ch;margin:0 auto}

.softcta>.btn{flex:none;margin:0}

.softcta .ctas{display:flex;flex-wrap:wrap;gap:.7rem}

/* ---------- RESPONSIVE ---------- */
  @media (max-width:980px){
    .featured{grid-template-columns:1fr}
    .featured .media{min-height:230px;aspect-ratio:16/9}
    .post-grid{grid-template-columns:1fr 1fr}
    .softcta{flex-direction:column;text-align:center;gap:clamp(16px,3vw,24px)}
    .softcta>div{flex:0 0 auto}
    .softcta h2{max-width:none}
    .softcta p{max-width:46ch;margin-left:auto;margin-right:auto}
    .softcta>.btn{margin-left:0}
    .foot-grid{grid-template-columns:1fr 1fr}
    .nav-links{display:none}
    .menu-btn{display:flex}
    .nav-cta .btn-line{display:none}
  }

@media (max-width:760px){
    .nav-links{display:none}
    .menu-btn{display:flex}
    .nav-cta .btn-line{display:none}
    .post-grid{grid-template-columns:1fr}
    .blog-hero-kimo{display:none}
    .mobile-cta{display:flex}
    .chat-fab{bottom:84px}
    .chat-panel{bottom:158px}
    body.menu-open{overflow:hidden}
  }

/* ============================================================
     KIMCHI MOBILE — "EDITORIAL POP" DESIGN SYSTEM (v.KIMO)
     Mirrored from mix-home.html — same token + component sheet.
     Anchor: KIMO Pink #F0356A · Ink #111 · Warm paper #FAF7F2.
     ONE accent (pink) + black + neutral. Readable first.
     ============================================================ */
  :root{
    --pink:#F0356A;          /* KIMO Pink — brand anchor */
    --pink-cta:#D81A56;      /* solid CTA fill — white on it = AA */
    --pink-deep:#B81348;     /* pressed CTA pink */
    --pink-ink:#A8013C;      /* pink dark enough for small text on paper (AA) */
    --pink-soft:#FCE4EC;     /* pink wash */
    --pink-line:#F7B6CC;     /* hairline pink */

    --ink:#111111;
    --ink-2:#0A0A0A;
    --paper:#FAF7F2;
    --paper-2:#F2ECE2;
    --paper-3:#FFFFFF;
    --mute:#54514B;
    --mute-2:#7A766E;
    --line:rgba(17,17,17,.13);
    --line-2:rgba(17,17,17,.08);
    --on-ink:#FAF7F2;
    --mute-on-ink:#C9C4BB;
    --good:#0E7C55;
    --good-soft:#E1F2EA;
    --warn:#9A6B00;

    --maxw:1180px;
    --pad:clamp(18px,4.2vw,46px);

    --f-head:"Archivo",system-ui,sans-serif;
    --f-xhead:"Archivo Expanded","Archivo",system-ui,sans-serif;
    --f-body:"Hanken Grotesk",system-ui,sans-serif;
    --f-mono:"Spline Sans Mono",ui-monospace,monospace;

    --radius:16px;
    --radius-sm:11px;
    --shadow:0 1px 2px rgba(17,17,17,.05), 0 8px 26px -12px rgba(17,17,17,.18);
    --shadow-lift:0 2px 4px rgba(17,17,17,.06), 0 18px 40px -16px rgba(240,53,106,.30);
    --ring:0 0 0 3px var(--ink);
  }

h1{font-size:clamp(2.1rem,5vw,3.5rem);line-height:1;letter-spacing:-.03em}

h2{font-size:clamp(1.6rem,3.6vw,2.4rem);letter-spacing:-.025em}

h3{font-family:var(--f-head);font-weight:800;font-size:clamp(1.12rem,2.2vw,1.4rem);letter-spacing:-.02em;line-height:1.15}

p{color:var(--mute);max-width:68ch}

.lead{font-size:clamp(1.08rem,2vw,1.28rem);color:var(--ink);line-height:1.5;max-width:60ch}

/* Korean-term glossary inline */
  .eyebrow{display:inline-flex;align-items:center;gap:.6ch;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--pink-ink);font-weight:600}

.eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--good);flex:none}

/* hand-drawn underline accent — ONE headline phrase only */
  .scribble{position:relative;display:inline-block;color:var(--pink-ink)}

.scribble::after{
    content:"";position:absolute;left:-1%;right:-1%;bottom:-.12em;height:.2em;
    background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'><path d='M2 9 C 40 3, 70 12, 100 6 S 170 3, 198 8' fill='none' stroke='%23F0356A' stroke-width='4' stroke-linecap='round'/></svg>") no-repeat;
    background-size:100% 100%;
  }

/* ---------- BUTTONS (ONE primary = pink) ---------- */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:.55ch;font-family:var(--f-head);font-weight:700;font-size:1rem;letter-spacing:-.01em;padding:.86em 1.4em;border-radius:999px;border:0;cursor:pointer;transition:transform .18s cubic-bezier(.3,1.2,.5,1),box-shadow .18s,background .15s;text-align:center;line-height:1;white-space:nowrap}

/* ---------- HEADER + UTILITY BAR (mirrored) ---------- */
  .util{background:var(--ink);color:var(--on-ink);font-size:.82rem}

.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{right:0}

/* ---------- BREADCRUMB ---------- */
  .crumbs{border-bottom:1.5px solid var(--line);background:var(--paper)}

.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:.55ch;padding:.85rem 0;font-family:var(--f-mono);font-size:.78rem;letter-spacing:.02em;color:var(--mute)}

.crumbs a{color:var(--mute);transition:color .14s}

.crumbs a:hover{color:var(--pink-ink)}

.crumbs .sep{color:var(--pink);opacity:.6}

.crumbs [aria-current="page"]{color:var(--ink);font-weight:600}

/* ---------- ARTICLE HEADER ---------- */
  .post-head{padding:clamp(28px,4.5vw,52px) 0 clamp(18px,3vw,30px)}

.post-head .eyebrow{margin-bottom:1rem}

.post-head h1{max-width:18ch;margin-bottom:1.1rem}

.post-dek{font-size:clamp(1.08rem,2vw,1.28rem);color:var(--ink);line-height:1.5;max-width:58ch;margin-bottom:1.6rem}

.byline{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem .8rem;font-family:var(--f-mono);font-size:.82rem;color:var(--mute)}

.byline .who{display:inline-flex;align-items:center;gap:.6ch;color:var(--ink);font-weight:600}

.byline .av{width:34px;height:34px;border-radius:50%;background:var(--pink-soft);border:1.5px solid var(--pink-line);display:grid;place-items:center;flex:none}

.byline .av img{width:26px;height:26px}

.byline .b-sep{width:4px;height:4px;border-radius:50%;background:var(--pink);flex:none}

.byline time{font-feature-settings:"tnum" 1}

/* ---------- HERO IMAGE ---------- */
  .post-hero{margin:clamp(8px,2vw,18px) 0 clamp(26px,4vw,40px)}

.post-hero .frame{position:relative;border-radius:var(--radius);overflow:hidden;border:1.5px solid var(--line);box-shadow:var(--shadow-lift);aspect-ratio:2/1;background:var(--pink-soft)}

.post-hero img{width:100%;height:100%;object-fit:cover;filter:saturate(1.04) contrast(1.02)}

.post-hero .cap{position:absolute;left:12px;bottom:12px;background:rgba(17,17,17,.82);color:#fff;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.02em;padding:.4em .7em;border-radius:8px;backdrop-filter:blur(4px);max-width:80%}

.post-hero.media-fallback .frame{display:grid;place-items:center;aspect-ratio:2/1}

.post-hero.media-fallback .frame::after{content:"[ photo: a traveller checks her phone on a Seoul subway platform minutes after landing ]";font-family:var(--f-mono);font-size:.82rem;color:var(--pink-ink);padding:2rem;text-align:center;max-width:40ch}

/* ---------- ARTICLE BODY + TOC GRID ---------- */
  .article-shell{padding-bottom:clamp(36px,5vw,60px)}

.article-grid{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:clamp(28px,4vw,56px);align-items:start}

/* PROSE */
  .prose{max-width:none}

.prose>p{font-size:1.075rem;line-height:1.72;margin-bottom:1.25rem;color:var(--mute)}

.prose>p.lead{font-size:clamp(1.12rem,2vw,1.34rem);color:var(--ink);line-height:1.55;font-weight:500;margin-bottom:1.5rem;max-width:62ch}

.prose>p.muted{font-size:1rem;color:var(--mute-2)}

.prose strong,.prose b{color:var(--ink);font-weight:700}

.prose h2{display:flex;align-items:baseline;gap:.7ch;margin:clamp(2.4rem,4vw,3.2rem) 0 1rem;scroll-margin-top:96px}

.prose h2 .h-idx{font-family:var(--f-mono);font-size:.9rem;font-weight:700;color:var(--pink-ink);border-bottom:2px solid var(--pink);padding-bottom:1px;letter-spacing:.02em;flex:none;align-self:flex-start;line-height:1.6}

.prose h3{margin:1.6rem 0 .5rem}

.prose a.inl{color:var(--pink-ink);font-weight:600;border-bottom:2px solid var(--pink-line);transition:border-color .14s}

.prose a.inl:hover{border-color:var(--pink)}

/* content lists — the global *{padding:0} reset left .prose ul/ol with no indent,
   so disc/decimal markers were rendering OUTSIDE the column (overflowing left).
   Restore proper inset padding so bullets sit inside the content box. */
.prose ul,.prose ol{margin:0 0 1.3rem;padding-left:1.5em}
.prose li{font-size:1.06rem;line-height:1.7;color:var(--mute);margin-bottom:.5rem}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li::marker{color:var(--pink-ink)}
.prose li>strong,.prose li b{color:var(--ink)}
.prose li>p{margin:0 0 .45rem}
.prose ul ul,.prose ol ol,.prose ul ol,.prose ol ul{margin:.5rem 0 .6rem}
.prose>ul,.prose>ol{max-width:68ch}

/* answer-first callout (AEO) */
  .answer{background:var(--pink-soft);border:1.5px solid var(--pink-line);border-left:4px solid var(--pink-cta);border-radius:var(--radius-sm);padding:1.15rem 1.3rem;margin:1.4rem 0}

.answer .a-k{display:inline-block;font-family:var(--f-mono);font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--pink-ink);margin-bottom:.45rem}

.answer p{font-size:1.05rem;color:var(--ink);margin:0;max-width:62ch;line-height:1.6}

.answer p b{font-weight:700}

/* check lists */
  .checks{list-style:none;display:flex;flex-direction:column;gap:.7rem;margin:1.1rem 0 1.4rem}

.checks li{display:flex;gap:.7ch;font-size:1.04rem;line-height:1.55;color:var(--ink);align-items:flex-start}

.checks li .ic{flex:none;width:24px;height:24px;border-radius:50%;background:var(--good-soft);display:grid;place-items:center;margin-top:1px}

.checks li .ic svg{width:15px;height:15px;fill:none;stroke:var(--good);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

.checks li span:last-child{color:var(--mute)}

.checks li b{color:var(--ink)}

/* comparison table (honest) */
  .compare{margin:1.4rem 0;overflow-x:auto;border-radius:var(--radius);border:1.5px solid var(--line);box-shadow:var(--shadow)}

.ctable{width:100%;border-collapse:collapse;min-width:560px;background:var(--paper-3)}

.ctable th,.ctable td{text-align:left;padding:.95rem 1rem;border-bottom:1.5px solid var(--line);vertical-align:top}

.ctable thead th{font-family:var(--f-head);font-weight:800;font-size:.92rem;letter-spacing:-.01em;background:var(--paper-2);position:sticky;top:0}

.ctable thead .col-kimchi{color:var(--pink-ink);background:var(--pink-soft)}

.ctable .feat{font-size:.98rem;color:var(--ink);font-weight:600;max-width:30ch}

.ctable .col-kimchi,.ctable td.cellcol:nth-child(2){border-left:2px solid var(--pink-line)}

.ctable .cellcol{text-align:center;width:22%}

.ctable tr:last-child td{border-bottom:0}

.cell{display:inline-flex;align-items:center;gap:.45ch;font-size:.95rem;font-weight:600}

.cell .ic{width:18px;height:18px;flex:none}

.cell .ic svg{width:18px;height:18px;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* ---- guide/article data tables (.ke-data) + status badges (.kb) ---- */
.ke-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.7rem 0;border:1.5px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);background:var(--paper-3)}
.ke-data{width:100%;border-collapse:collapse;min-width:580px;background:transparent;font-size:.97rem;line-height:1.45}
.ke-data thead th{font-family:var(--f-head);font-weight:800;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);background:var(--paper-2);text-align:left;padding:.85rem 1.05rem;border-bottom:2.5px solid var(--ink);white-space:nowrap}
.ke-data td{padding:.82rem 1.05rem;border-bottom:1px solid var(--line-2);vertical-align:top;color:var(--ink)}
.ke-data tbody tr:nth-child(even){background:rgba(17,17,17,.025)}
.ke-data tbody tr:last-child td{border-bottom:0}
.ke-data td:first-child{font-weight:700;color:var(--ink)}
.ke-data td:last-child{color:var(--mute);font-size:.93rem}
.kb{display:inline-block;font-family:var(--f-head);font-weight:700;font-size:.8rem;line-height:1;padding:.36em .62em;border-radius:999px;white-space:nowrap;letter-spacing:.01em}
.kb-ok{background:var(--good-soft);color:var(--good)}
.kb-no{background:rgba(17,17,17,.07);color:var(--mute-2)}
.kb-cond{background:#FFF1D6;color:#9A6300}
@media(max-width:560px){.ke-data{font-size:.92rem}.ke-data thead th{padding:.7rem .8rem;font-size:.72rem}.ke-data td{padding:.68rem .8rem}}

.cell.yes{color:var(--good)}

.cell.yes .ic svg{stroke:var(--good)}

.cell.no{color:var(--mute-2)}

.cell.no .ic svg{stroke:var(--mute-2)}

.cap-note{font-size:1rem;color:var(--mute);background:var(--paper-2);border-radius:var(--radius-sm);padding:.9rem 1.1rem;margin:.6rem 0 1.4rem;max-width:64ch}

.cap-note b{color:var(--ink)}

/* pull-quote */
  .pull{position:relative;margin:2rem 0;padding:1.4rem 1.4rem 1.4rem 2rem;border-left:4px solid var(--pink);background:linear-gradient(180deg,var(--pink-soft),transparent 80%);border-radius:0 var(--radius) var(--radius) 0}

.pull .pq-mark{position:absolute;top:-.1em;left:.5rem;font-family:var(--f-xhead);font-size:3.2rem;color:var(--pink);line-height:1;opacity:.5}

.pull blockquote{font-family:var(--f-xhead);font-weight:700;font-size:clamp(1.25rem,2.6vw,1.7rem);line-height:1.25;letter-spacing:-.02em;color:var(--ink);max-width:24ch}

.pull blockquote .hl{color:var(--pink-ink)}

/* steps */
  .steps{display:flex;flex-direction:column;gap:.85rem;margin:1.3rem 0 1.6rem;counter-reset:st}

.step{display:flex;gap:1rem;padding:1.2rem 1.25rem;border-radius:var(--radius);background:var(--paper-3);border:1.5px solid var(--line);box-shadow:var(--shadow)}

.step .stnum{counter-increment:st;flex:none;width:40px;height:40px;border-radius:11px;background:var(--ink);color:#fff;display:grid;place-items:center;font-family:var(--f-xhead);font-weight:800;font-size:1.15rem}

.step .stnum::before{content:counter(st,decimal-leading-zero)}

.step .stbody h3{margin:.05rem 0 .35rem}

.step .stbody p{font-size:1rem;margin:0;color:var(--mute)}

.step .when{display:inline-block;margin-top:.6rem;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.04em;color:var(--pink-ink);background:var(--pink-soft);border:1px solid var(--pink-line);border-radius:999px;padding:.3em .7em}

/* contextual product CTA card (10GB eSIM) */
  .promo{display:grid;grid-template-columns:1.25fr .9fr;gap:clamp(20px,3vw,32px);align-items:center;background:var(--ink);color:var(--on-ink);border-radius:var(--radius);padding:clamp(1.5rem,3vw,2.1rem);margin:2.2rem 0;box-shadow:var(--shadow-lift);position:relative;overflow:hidden}

.promo::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(240,53,106,.35),transparent 70%);pointer-events:none}

.promo-l{position:relative;z-index:1}

.promo .pk{display:inline-block;font-family:var(--f-mono);font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--pink-cta);padding:.35em .75em;border-radius:999px;margin-bottom:.85rem}

.promo-l h3{color:#fff;font-family:var(--f-xhead);font-size:clamp(1.2rem,2.4vw,1.55rem);line-height:1.15;margin-bottom:.6rem;max-width:22ch}

.promo-l>p{color:var(--mute-on-ink);font-size:1.02rem;margin-bottom:1rem;max-width:46ch}

.promo-l ul{list-style:none;display:flex;flex-direction:column;gap:.5rem}

.promo-l li{display:flex;align-items:center;gap:.6ch;font-size:.98rem;color:var(--on-ink)}

.promo-l li .ic{width:20px;height:20px;flex:none;display:grid;place-items:center}

.promo-l li .ic svg{width:16px;height:16px;fill:none;stroke:#7CFFB2;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

.promo-r{position:relative;z-index:1;background:var(--paper-3);border-radius:var(--radius);padding:1.4rem 1.35rem;box-shadow:0 18px 40px -16px rgba(0,0,0,.5);text-align:center}

.promo-r .promo-kimo{width:58px;height:58px;margin:-2.4rem auto .3rem;filter:drop-shadow(0 8px 16px rgba(240,53,106,.4))}

.promo-r .pname{display:block;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}

.promo-r .pgb{display:block;font-family:var(--f-xhead);font-weight:900;font-size:3rem;color:var(--ink);line-height:1;margin:.15rem 0}

.promo-r .pgb .u{font-size:1.1rem;color:var(--mute)}

.promo-r .pprice{display:block;font-family:var(--f-xhead);font-weight:800;font-size:1.5rem;color:var(--pink-ink);margin-bottom:.9rem}

.promo-r .pprice small{display:block;font-family:var(--f-body);font-weight:500;font-size:.78rem;color:var(--mute);letter-spacing:0;margin-top:.2rem}

.promo-r .verify{font-family:var(--f-mono);font-size:.66rem;color:var(--mute-2);margin-top:.65rem;line-height:1.4}

/* glossary */
  .glossary{background:var(--paper-3);border:1.5px solid var(--line);border-radius:var(--radius);padding:clamp(1.3rem,3vw,1.7rem);margin:1.4rem 0;box-shadow:var(--shadow)}

.glossary h3{margin-bottom:.2rem}

.glossary .g-sub{font-size:.95rem;color:var(--mute);margin-bottom:1.1rem}

.glossary dl{display:grid;grid-template-columns:1fr;gap:1rem}

.glossary dt{font-family:var(--f-head);font-weight:700;font-size:1.04rem;color:var(--ink);margin-bottom:.2rem}

.glossary dt .ko{color:var(--pink-ink)}

.glossary dd{font-size:1rem;color:var(--mute);line-height:1.55;padding-bottom:.9rem;border-bottom:1.5px solid var(--line-2)}

.glossary dd:last-child{border-bottom:0;padding-bottom:0}

/* ---------- STICKY TOC ---------- */
  .toc{position:sticky;top:90px;background:var(--paper-3);border:1.5px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.3rem 1.2rem}

.toc h2{font-family:var(--f-mono);font-weight:600;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-bottom:.85rem}

.toc ol{list-style:none;counter-reset:toc;display:flex;flex-direction:column;gap:.1rem}

.toc li{counter-increment:toc}

.toc a{display:flex;gap:.6rem;align-items:baseline;padding:.45rem .45rem;border-radius:8px;font-family:var(--f-head);font-weight:600;font-size:.9rem;color:var(--mute);border-left:2.5px solid transparent;transition:color .14s,border-color .14s,background .14s}

.toc a::before{content:counter(toc,decimal-leading-zero);font-family:var(--f-mono);font-size:.72rem;color:var(--pink-ink);font-weight:700;flex:none}

.toc a:hover{color:var(--ink);background:var(--paper-2)}

.toc a.active{color:var(--ink);border-left-color:var(--pink);background:var(--pink-soft)}

.toc .toc-read{margin-top:1rem;padding-top:.9rem;border-top:1.5px solid var(--line);font-family:var(--f-mono);font-size:.72rem;color:var(--mute);line-height:1.4}

/* ---------- FAQ (answer-first) ---------- */
  .post-faq{background:var(--paper-2);padding:clamp(48px,7vw,82px) 0}

.faq-head{max-width:60ch;margin-bottom:clamp(22px,3.5vw,34px)}

.faq-head .kicker{margin-bottom:.6rem}

.faq-head h2{margin-bottom:.5rem}

.faq-head p{font-size:1.04rem}

.faq-list{max-width:820px}

.faq{border-bottom:1.5px solid var(--line);padding:.3rem 0}

.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.1rem 0;font-family:var(--f-head);font-weight:700;font-size:1.08rem;line-height:1.3;color:var(--ink)}

.faq summary .qx{width:28px;height:28px;flex:none;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;transition:transform .2s,background .2s,border-color .2s}

.faq summary .qx .ic svg{width:15px;height:15px;fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round}

.faq[open] summary .qx{background:var(--pink);border-color:var(--pink);transform:rotate(45deg)}

.faq[open] summary .qx .ic svg{stroke:#fff}

.faq .a{padding:0 0 1.2rem;max-width:64ch}

.faq .a p{font-size:1.04rem;color:var(--mute);line-height:1.62;margin-bottom:.6rem}

.faq .a p:last-child{margin-bottom:0}

.faq .a .ans-first{color:var(--ink);font-weight:500}

.faq .a b{color:var(--ink)}

/* ---------- RELATED POSTS ---------- */
  .related{padding:clamp(48px,7vw,76px) 0}

.r-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.6rem;margin-bottom:clamp(20px,3vw,30px)}

.r-head .r-sub{font-family:var(--f-mono);font-size:.8rem;letter-spacing:.04em;color:var(--mute)}

.r-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}

.r-card{display:flex;flex-direction:column;gap:.5rem;padding:1.4rem 1.35rem;border-radius:var(--radius);background:var(--paper-3);border:1.5px solid var(--line);box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s}

.r-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}

.r-card:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

.r-card .r-tag{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--pink-ink);font-weight:600}

.r-card h3{font-family:var(--f-head);font-weight:800;font-size:1.12rem;line-height:1.2;color:var(--ink)}

.r-card p{font-size:.97rem;flex:1;color:var(--mute)}

.r-card .go{font-family:var(--f-head);font-weight:700;font-size:.92rem;color:var(--pink-ink);display:inline-flex;align-items:center;gap:.4ch;margin-top:.2rem}

.r-card:hover .go{gap:.7ch}

/* ---------- FINAL CTA ---------- */
  .final{padding:clamp(48px,7vw,82px) 0}

.final .wrap{background:var(--ink);color:var(--on-ink);border-radius:clamp(20px,4vw,30px);padding:clamp(2.2rem,5vw,3.4rem);text-align:center;position:relative;overflow:hidden}

.final-kimo{width:90px;height:90px;margin:0 auto .9rem;filter:drop-shadow(0 10px 22px rgba(240,53,106,.4))}

.final .kicker{color:#fff;margin-bottom:.9rem;display:inline-flex}

.final .kicker .idx{color:#fff;border-color:#fff}

.final h2{color:#fff;max-width:16ch;margin:0 auto .8rem}

.final>.wrap>p{color:var(--mute-on-ink);max-width:52ch;margin:0 auto 1.6rem}

.final-cta{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin-bottom:1.5rem}

.final .btn-ink{background:var(--pink-cta)}

.final .btn-ink:hover{background:var(--pink-deep)}

.final .btn-line{color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.5)}

.final .btn-line:hover{background:#fff;color:var(--ink)}

.reassure{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 1.3rem;font-size:.86rem;color:var(--mute-on-ink);max-width:none;margin:0 auto}

.reassure span{display:inline-flex;align-items:center;gap:.45ch}

.reassure .ic svg{width:16px;height:16px;fill:none;stroke:var(--pink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- FOOTER (mirrored) ---------- */
  footer.site{background:var(--ink-2);color:var(--mute-on-ink);padding:clamp(40px,6vw,64px) 0 clamp(90px,8vw,40px)}

/* ---------- STICKY MOBILE CTA (mirrored) ---------- */
  .mobile-cta{position:fixed;left:0;right:0;bottom:0;z-index:55;background:rgba(250,247,242,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1.5px solid var(--line);padding:.6rem var(--pad);display:none;gap:.6rem;align-items:center;box-shadow:0 -8px 24px -16px rgba(17,17,17,.5)}

/* ---------- KIMO CHAT WIDGET (mirrored) ---------- */
  .chat-fab{position:fixed;right:22px;bottom:22px;z-index:58;width:62px;height:62px;border-radius:50%;background:var(--pink);border:0;cursor:pointer;box-shadow:0 10px 26px -8px rgba(240,53,106,.7);display:grid;place-items:center;transition:transform .2s,box-shadow .2s;padding:0}

/* ---------- MOBILE DRAWER ---------- */
  .nav-drawer{display:none}

/* ---------- RESPONSIVE ---------- */
  @media (max-width:980px){
    .article-grid{grid-template-columns:1fr;gap:1.6rem}
    .toc{position:static;top:auto;order:-1}
    .toc ol{display:grid;grid-template-columns:1fr 1fr;gap:.1rem}
    .promo{grid-template-columns:1fr;gap:1.4rem}
    .promo-r .promo-kimo{margin-top:0}
    .foot-grid{grid-template-columns:1fr 1fr}
    .r-grid{grid-template-columns:1fr 1fr}
    .nav-links{display:none}
    .menu-btn{display:flex}
    .nav-cta .btn-line{display:none}
  }

@media (max-width:760px){
    .menu-btn{display:flex}
    .nav-cta .btn-line{display:none}
    .toc ol{grid-template-columns:1fr}
    .r-grid{grid-template-columns:1fr}
    .mobile-cta{display:flex}
    .chat-fab{bottom:84px}
    .chat-panel{bottom:158px}
    body.menu-open{overflow:hidden}
    .nav-drawer{display:none;position:fixed;inset:0;top:0;z-index:70;background:var(--paper)}
    .nav-drawer.open{display:block}
    .nav-drawer .inner{padding:1.2rem var(--pad)}
    .nav-drawer .dh{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}
    .nav-drawer a{display:block;font-family:var(--f-xhead);font-weight:800;font-size:1.6rem;padding:.6rem 0;border-bottom:1.5px solid var(--line)}
    .nav-drawer .close{background:none;border:1.5px solid var(--ink);border-radius:10px;width:44px;height:44px;display:grid;place-items:center;cursor:pointer}
    .nav-drawer .close svg{width:22px;height:22px}
  }


/* ---- theme overrides (progressive enhancement) ---- */
html.no-js .reveal, html.no-js [data-scribble]{opacity:1 !important;transform:none !important;}
html.no-js .mobile-cta{display:none;}