/* Daylight, Apple/Google restraint: white ground, one idea per screen, colour only where it means something.
   KoReach tokens: navy #0d1b34 · blue #4e73df · mint #35c6a1 */
:root{
  --white:#FFFFFF; --gray:#F5F5F7; --ink:#1D1D1F; --sub:#6E6E73; --line:#E5E5EA; --off:#C7C7CC;
  --navy:#0D1B34; --blue:#4E73DF; --mint:#1FA383; --mint-l:#35C6A1; --coral:#E8594A; --amber:#F2A93B;
  --font:Inter,"Noto Sans KR",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;word-break:keep-all;overflow-wrap:anywhere}
h1,h2,h3,p{margin:0}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}

.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(0,0,0,.06)}
.nav div{max-width:1024px;margin:0 auto;padding-inline:20px;height:52px;display:flex;align-items:center;justify-content:space-between}
.logo{font-weight:700;font-size:18px;letter-spacing:-.02em;color:var(--navy)}
.logo span{color:var(--blue)}.logo sup{color:var(--mint);font-size:9px;margin-left:2px}
.pill{display:inline-flex;align-items:center;justify-content:center;border-radius:980px;background:var(--blue);color:#fff;text-decoration:none;font-weight:500;font-size:14px;padding:7px 15px;border:0;font-family:inherit;cursor:pointer}
.pill.lg{font-size:17px;padding:13px 24px}
.more{color:var(--blue);text-decoration:none;font-size:17px}
.more::after{content:" ›";font-size:1.15em}

/* intro */
.intro{text-align:center;padding:88px 20px 24px;max-width:980px;margin:0 auto;min-height:78svh;display:flex;flex-direction:column;justify-content:center}
.eyebrow{font-size:17px;font-weight:600;color:var(--mint)}
.intro h1{margin-top:8px;font-size:clamp(40px,7.2vw,80px);line-height:1.06;letter-spacing:-.035em;font-weight:700}
.intro p{margin:18px auto 0;max-width:30ch;font-size:clamp(19px,2.4vw,24px);line-height:1.45;color:var(--sub);font-weight:500}
.intro .acts{margin-top:28px;display:flex;gap:24px;justify-content:center;align-items:center;flex-wrap:wrap}

.nav .links{display:flex;gap:22px;margin-left:auto;margin-right:18px}
.nav .links a{color:var(--ink);text-decoration:none;font-size:13.5px;opacity:.8}
.nav .links a:hover{opacity:1}
.fine2{font-size:12.5px;color:#8E8E93;text-align:center;margin-top:6px}
.learn{padding:112px 20px;max-width:880px;margin:0 auto;text-align:center}
.faq{margin-top:40px;text-align:left;display:flex;flex-direction:column}
.faq details{border-bottom:1px solid var(--line);padding:20px 4px}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px;font-size:clamp(18px,2.2vw,22px);font-weight:700;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--blue);font-weight:400;font-size:1.3em;line-height:1}
.faq details[open] summary::after{content:"−"}
.faq p{margin-top:10px;font-size:17px;color:var(--sub);line-height:1.6;max-width:60ch}
@media (max-width:760px){
 .nav .links{display:none}
}

/* Apple-style polish */
.intro .eyebrow,.learn .eyebrow{background:linear-gradient(90deg,#1FA383,#4E73DF);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sign{margin:40px auto 0;display:flex;flex-direction:column;align-items:center;gap:0}
.hs{width:min(460px,86vw);height:clamp(92px,13vw,128px);border-radius:26px;display:grid;place-items:center;font-size:clamp(30px,5vw,48px);font-weight:700;letter-spacing:-.03em;background:linear-gradient(180deg,#2BC49C,#1FA383);color:#fff;box-shadow:0 30px 60px -24px rgba(31,163,131,.55),inset 0 1px 0 rgba(255,255,255,.35);animation:sw 6s ease-in-out infinite}
@keyframes sw{0%,38%{background:linear-gradient(180deg,#2BC49C,#1FA383);color:#fff;box-shadow:0 30px 60px -24px rgba(31,163,131,.55),inset 0 1px 0 rgba(255,255,255,.35)}
 50%,88%{background:linear-gradient(180deg,#F5F5F7,#ECECF0);color:#C7C7CC;box-shadow:0 20px 40px -26px rgba(0,0,0,.18),inset 0 0 0 2px #E5E5EA}
 100%{background:linear-gradient(180deg,#2BC49C,#1FA383);color:#fff}}
.hs-ref{width:min(420px,78vw);height:34px;margin-top:6px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(31,163,131,.22),transparent 70%);animation:rf 6s ease-in-out infinite}
@keyframes rf{0%,38%{opacity:1}50%,88%{opacity:.15}100%{opacity:1}}
.hs-cap{margin-top:10px;font-size:14px;font-weight:600;color:var(--sub);display:flex;align-items:center;gap:8px}
.hs-cap .d{width:8px;height:8px;border-radius:50%;background:var(--coral);animation:rf 6s ease-in-out infinite reverse}
.pill{transition:transform .2s,box-shadow .2s}.pill:hover{transform:translateY(-1px);box-shadow:0 10px 24px -12px rgba(78,115,223,.6)}
.intro h1{background:linear-gradient(180deg,#1D1D1F 55%,#4A4A55);-webkit-background-clip:text;background-clip:text;color:transparent}

@media (max-width:760px){.s2 .tg2,.s2 .kn,.s2 .me2{font-size:10.5px;padding:2px 7px}}

@media (max-width:760px){.fix .rig{transform:scale(.96)}.fix .stage{height:clamp(620px,88vh,740px)}}
.check{padding:104px 20px;text-align:center;background:var(--gray)}
.check h2{font-weight:700}
.check p{margin:16px auto 0;max-width:36ch;font-size:clamp(17px,2vw,21px);color:var(--sub);line-height:1.45;font-weight:500}
.check form{margin:32px auto 0;max-width:560px;display:flex;gap:10px;flex-wrap:wrap}
.check label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.check input{flex:1 1 260px;min-width:0;height:54px;border-radius:14px;border:1px solid var(--off);padding:0 18px;font:inherit;font-size:17px;color:var(--ink)}
.check .fine{margin-top:14px;font-size:14px;color:var(--sub)}
.foot{border-top:1px solid var(--line);max-width:1024px;margin:0 auto;padding:20px;font-size:12px;color:#8E8E93;line-height:1.7}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:#fff;font-weight:500;padding:12px 18px;border-radius:14px;z-index:40;font-size:15px}

@media (max-width:760px){
  .intro{padding-top:56px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---- the shipped page: what the prototype left to the real site ---- */

/* The logo is a link here, and the language switch sits beside the menu. */
.nav .logo{text-decoration:none}
.lang{border:1px solid var(--line);background:#fff;color:var(--ink);font:inherit;font-size:13px;font-weight:600;border-radius:99px;padding:6px 12px;margin-left:auto;margin-right:12px;cursor:pointer;align-self:center}
.nav .links{margin-left:auto;margin-right:16px}
.nav .signin{color:var(--ink);text-decoration:none;font-size:13.5px;opacity:.8;margin-right:14px;white-space:nowrap}
.nav .signin:hover{opacity:1}

/* Hero: three lines in one place, one shown at a time. The heading never
   moves — only the two alternates and the supporting sentence rotate — so the
   page always has one stable title. */
.hz{margin-top:8px}
/* The three lines share one cell rather than one being in flow and the others
   floated over it. Absolute positioning fixed the height to the first line,
   and on a narrow English page the third line is four lines tall: it ran
   straight through the sentence underneath. A grid takes its height from the
   longest line, so nothing overlaps and nothing below it moves. */
.hz-titles{display:grid}
.hz h1,.hz .hz-t{grid-area:1/1;margin:0;font-size:clamp(40px,7.2vw,80px);line-height:1.06;letter-spacing:-.035em;font-weight:700;
  background:linear-gradient(180deg,#1D1D1F 55%,#4A4A55);-webkit-background-clip:text;background-clip:text;color:transparent;
  opacity:0;transition:opacity .3s ease}
/* The three sentences share one cell, so the two that are not showing take up
   no height. Stacked, they left a hole under the title the size of two
   paragraphs. */
.hz .hz-subs{display:grid;margin-top:18px}
.hz .hz-s{grid-area:1/1;margin:0 auto;max-width:32ch;font-size:clamp(19px,2.4vw,24px);line-height:1.45;color:var(--sub);font-weight:500;
  opacity:0;transition:opacity .3s ease}
.hz.hz0 h1{opacity:1}
.hz.hz1 h1,.hz.hz2 h1{opacity:0}
.hz.hz1 .hz-t[data-hz="1"],.hz.hz2 .hz-t[data-hz="2"]{opacity:1}
.hz.hz0 .hz-s[data-hz="0"],.hz.hz1 .hz-s[data-hz="1"],.hz.hz2 .hz-s[data-hz="2"]{opacity:1}
.hz-c{grid-area:1/1;opacity:0;transition:opacity .3s ease}
.hero-sign .hs-cap{display:grid;grid-template-columns:auto 1fr;align-items:center}
.hero-sign .hs-cap .d{grid-column:1}
.hero-sign .hs-cap span:not(.d){grid-column:2;grid-row:1}
.hz0~.hero-sign .hz-c[data-hz="0"],.hz1~.hero-sign .hz-c[data-hz="1"],.hz2~.hero-sign .hz-c[data-hz="2"]{opacity:1}
/* The sign follows the line: on, dark, then lit with the badge. */
.hs-badge{position:absolute;top:-12px;right:14px;font-style:normal;font-size:12px;font-weight:700;background:#1FA383;color:#fff;padding:3px 10px;border-radius:99px;opacity:0;transition:opacity .3s ease}
.hs{position:relative;animation:none}
.hz1~.hero-sign .hs{background:linear-gradient(180deg,#F5F5F7,#ECECF0);color:#C7C7CC;box-shadow:0 20px 40px -26px rgba(0,0,0,.18),inset 0 0 0 2px #E5E5EA}
.hz1~.hero-sign .hs-ref{opacity:.15}
.hz2~.hero-sign .hs-badge{opacity:1}
.hs,.hs-ref{transition:background .35s ease,color .35s ease,box-shadow .35s ease,opacity .35s ease}
.hs-ref{animation:none}
.hs-cap .d{animation:none;background:var(--coral)}
.hz2~.hero-sign .hs-cap .d,.hz0~.hero-sign .hs-cap .d{background:var(--mint)}
.hz1~.hero-sign .hs-cap .d{background:var(--coral)}
@media (max-width:520px){
  .hz h1,.hz .hz-t{font-size:32px}
  .hz .dk{display:none}
}

/* The free check asks for three things, and says which one is optional. */
.check form{display:grid;grid-template-columns:1fr;gap:10px;max-width:420px;text-align:left}
.check label{position:static;width:auto;height:auto;clip:auto;overflow:visible;font-size:13.5px;font-weight:600;color:var(--sub)}
.check input{flex:none;width:100%}
.check .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.check button{margin-top:6px;justify-self:start}
.form-status{margin:14px auto 0;max-width:42ch;font-size:15px;color:var(--sub);min-height:1.4em}

.platforms{margin-top:28px;font-size:14px;color:#8E8E93;text-align:center}

.foot{display:flex;flex-direction:column;gap:6px}
.foot-links{display:flex;gap:16px;flex-wrap:wrap;margin-top:6px}
.foot-links a{color:#8E8E93}

/* Reduced motion: every scene shows its finished state, nothing rotates. */
@media (prefers-reduced-motion:reduce){
  .hz .hz-t,.hz .hz-s,.hz-c{transition:none}
}

/* Pricing: three plans, calm, no motion. The middle one is the offer. */
.pricing{padding:112px 20px;text-align:center;max-width:1024px;margin:0 auto}
.pricing h2{margin-top:8px;font-weight:700}
.pricing .eyebrow{background:linear-gradient(90deg,#1FA383,#4E73DF);-webkit-background-clip:text;background-clip:text;color:transparent}
.pricing .lead{margin:16px auto 0;max-width:32ch;font-size:clamp(17px,2vw,21px);color:var(--sub);line-height:1.45;font-weight:500}
.plans{margin:44px auto 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;text-align:left;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;background:var(--gray);border-radius:24px;padding:28px 24px 24px}
.plan.best{background:#fff;box-shadow:inset 0 0 0 2px var(--blue),0 24px 48px -32px rgba(78,115,223,.55)}
.plan .badge{position:absolute;top:-12px;left:24px;background:var(--blue);color:#fff;font-size:12px;font-weight:700;border-radius:99px;padding:4px 12px}
.plan h3{font-size:20px;font-weight:700;letter-spacing:-.01em}
.plan .for{margin-top:6px;font-size:14.5px;color:var(--sub);line-height:1.45;min-height:2.9em}
.plan .amt{margin-top:18px;font-size:44px;font-weight:700;letter-spacing:-.03em;line-height:1}
.plan .amt small{font-size:15px;font-weight:500;color:var(--sub);letter-spacing:0;margin-left:3px}
.plan ul{list-style:none;margin:20px 0 24px;padding:0;display:grid;gap:10px;flex:1}
.plan li{position:relative;padding-left:26px;font-size:15px;line-height:1.45;color:var(--ink)}
.plan li::before{content:"";position:absolute;left:0;top:3px;width:16px;height:16px;border-radius:50%;background:var(--mint-l) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.2 4.7-4.8' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.plan .plan-go{width:100%;font-size:16px;padding:12px 18px}
.plan:not(.best) .plan-go{background:var(--ink)}
.pricing .founding{margin:28px auto 0;display:inline-block;background:#FFF6E5;color:#8A5A00;border-radius:99px;padding:9px 18px;font-size:14.5px;line-height:1.5}
.pricing .founding code{font-family:inherit;font-weight:700;background:#fff;border-radius:6px;padding:1px 7px;color:var(--ink)}
.pricing .promise{margin:18px auto 0;max-width:46ch;font-size:15px;line-height:1.65;color:var(--sub)}
.pricing .fine2{margin-top:10px;font-size:12.5px;color:#8E8E93}
@media (max-width:760px){
  .pricing{padding:88px 16px}
  .pricing h2{font-size:32px;line-height:1.15}
  .plans{grid-template-columns:1fr;gap:18px;max-width:440px}
  .plan .for{min-height:0}
  .pricing .founding{border-radius:16px}
}

/* ---- Typography pass (2026-09-21) ---------------------------------------
   One scale for the whole page, pitched at the sizes premium product sites use
   (Apple, Stripe, Linear: display ~48–56px, section heads ~40–44px, leads
   ~17–19px on desktop). Korean glyphs read larger than Latin at the same size,
   so the scale sits at the quieter end, with a little more line height and a
   little less negative tracking than the Latin-first values it replaces. */
:root{
  --fs-display:clamp(34px,4.6vw,56px);
  --fs-h2:clamp(28px,3.6vw,44px);
  --fs-h3:clamp(22px,2.6vw,32px);
  --fs-hero-sub:clamp(17px,1.7vw,20px);
  --fs-lead:clamp(16px,1.5vw,18px);
  --lh-display:1.14; --lh-head:1.18;
  --ls-display:-.028em; --ls-head:-.022em;
}
.intro h1,.hz h1,.hz .hz-t{font-size:var(--fs-display);line-height:var(--lh-display);letter-spacing:var(--ls-display)}
.intro p,.hz .hz-s{font-size:var(--fs-hero-sub);line-height:1.55}
.hs{font-size:clamp(28px,4.2vw,42px)}
.eyebrow{font-size:15px;letter-spacing:.01em}
.faq summary{font-size:clamp(16px,1.7vw,19px)}
.plan .amt{font-size:40px}
.pill.lg{font-size:16px;padding:12px 22px}
@media (max-width:520px){
  .intro h1,.hz h1,.hz .hz-t{font-size:30px}
}

/* ---- the page as it reads now (2026-09-22) -------------------------------
   Seven sections in the order a stranger needs them: what this is, how it
   works, why us, ask us, what it costs, why it matters, questions.

   Two things carry the rewrite. One is air: sections are further apart than
   they were, because most of what read as clutter was crowding. The other is
   that only one thing on a screen is coloured — the call — so the eye is not
   asked to choose between two blue buttons.

   No new colours. Everything here is a token from the top of this file. */
.band{padding-block:clamp(80px,11vw,140px)}
.band.grey{background:var(--gray)}
.band-in{max-width:1024px;margin:0 auto;padding-inline:20px}
.band h2{margin-top:10px;font-size:var(--fs-h2);line-height:var(--lh-head);letter-spacing:var(--ls-head);font-weight:700}
.band .lead{margin-top:14px;max-width:46ch;font-size:var(--fs-lead);line-height:1.6;color:var(--sub);font-weight:500}

/* 진행 방식. One fade as it arrives, then nothing moves again. */
.flow{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;position:relative}
.flow::before{content:"";position:absolute;top:26px;left:12%;right:12%;height:1px;background:var(--line)}
.flow .step{position:relative;text-align:center;opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .6s ease}
.flow .step.in{opacity:1;transform:none}
.flow .ico{width:52px;height:52px;border-radius:50%;background:var(--white);box-shadow:inset 0 0 0 1px var(--line);display:grid;place-items:center;margin:0 auto;position:relative;z-index:1}
.flow .ico svg{width:24px;height:24px;stroke:var(--navy);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.flow h3{margin-top:14px;font-size:17px;font-weight:700;letter-spacing:-.02em;display:flex;gap:6px;justify-content:center}
.flow h3 .n{color:var(--off)}
.flow p{margin-top:6px;font-size:14.5px;line-height:1.55;color:var(--sub)}
.flow .when{display:inline-block;margin-top:10px;font-size:12px;font-weight:700;color:var(--mint);background:rgba(31,163,131,.08);border-radius:99px;padding:3px 10px}

/* 차별점. Each card opens the method behind its number. */
.diffs{margin-top:40px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.diff{text-align:left;background:var(--white);border:1px solid var(--line);border-radius:18px;padding:22px;font-family:inherit;cursor:pointer}
.diff:hover{border-color:var(--off)}
.diff h3{font-size:17.5px;font-weight:700;letter-spacing:-.02em}
.diff p{margin-top:8px;font-size:14.5px;line-height:1.6;color:var(--sub)}
.diff .more{display:block;margin-top:12px;font-size:13.5px}
.stamp{margin-top:20px;font-size:12.5px;color:#8E8E93}

/* 진단 신청. One question per screen; nothing is typed until the last one. */
.ask{margin-top:36px;background:var(--gray);border-radius:24px;padding:clamp(22px,4vw,40px)}
.band.grey .ask{background:var(--white)}
.ask-head{display:flex;justify-content:space-between;align-items:center}
.ask .prog{font-size:13px;font-weight:700;color:var(--sub)}
.ask .bar{height:4px;background:var(--line);border-radius:99px;margin-top:12px;overflow:hidden}
.ask .bar i{display:block;height:100%;width:25%;background:var(--blue);border-radius:99px;transition:width .35s ease}
.ask .q{border:0;margin:26px 0 0;padding:0;min-inline-size:0}
.ask legend{padding:0;font-size:clamp(20px,2.6vw,26px);font-weight:700;letter-spacing:-.025em}
.ask .multi{margin-top:6px;font-size:14px;color:var(--sub)}
.ask .opts{margin-top:18px;display:grid;gap:10px}
.ask .opt{text-align:left;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:15px 18px;font-size:16px;font-family:inherit;color:var(--ink);cursor:pointer}
.band.grey .ask .opt{background:var(--gray)}
.ask .opt:hover{border-color:var(--off)}
.ask .opt[aria-pressed="true"]{border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}
.ask .opt b{font-weight:600}
.ask .opt small{display:block;margin-top:4px;color:var(--sub);font-size:13px}
.ask .other{margin-top:12px;display:grid;gap:6px;font-size:13.5px;font-weight:600;color:var(--sub)}
.ask .other input,.ask-fields input{font:inherit;padding:13px 15px;border:1px solid var(--line);border-radius:12px;background:var(--white);width:100%}
.ask-fields{margin-top:18px;display:grid;gap:8px}
.ask-fields label{font-size:13.5px;font-weight:600;color:var(--sub)}
.ask .tailor{margin-top:16px;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:14px 16px;font-size:14.5px;line-height:1.6}
.band.grey .ask .tailor{background:var(--gray)}
.ask .fine{margin-top:12px;font-size:12.5px;color:#8E8E93;line-height:1.6}
.ask .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.ask-foot{margin-top:22px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.ask-foot .more{background:0;border:0;font-family:inherit;cursor:pointer;padding:0;font-size:15px}
.ask-foot .more::after{content:""}
.ask-foot .more::before{content:"‹ "}

/* 가격: an info button per line, and the visitor's own arithmetic. */
.plan li{display:flex;align-items:flex-start;gap:8px;padding-left:26px}
.plan li>span:first-child{flex:1}
.plan .i{flex:none;width:20px;height:20px;border-radius:50%;border:1px solid var(--line);background:var(--white);color:var(--sub);font-size:12px;font-weight:700;line-height:1;font-family:inherit;cursor:pointer;padding:0}
.plan .i:hover,.plan .i:focus-visible{border-color:var(--blue);color:var(--blue)}
.plan .tip{margin:0 0 14px;background:var(--navy);color:#fff;font-size:13px;line-height:1.55;border-radius:12px;padding:12px 14px;text-align:left}
.plan .worth{margin:0 0 16px;font-size:13.5px;line-height:1.5;font-weight:600;color:var(--navy);min-height:1.5em}
.worth-ask{margin:36px auto 0;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;font-size:15px;font-weight:600}
.worth-ask .money{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line);border-radius:12px;padding:8px 12px;background:var(--white)}
.worth-ask input{font:inherit;border:0;width:6ch;text-align:right;background:transparent}
.worth-ask input:focus{outline:0}
.worth-ask .egg{font-size:12px;font-weight:700;color:var(--sub);background:var(--gray);border-radius:99px;padding:3px 9px}
.worth-caveat{margin:10px auto 0;font-size:12.5px;color:#8E8E93}
.cmp{margin:44px auto 0;border-collapse:collapse;width:100%;font-size:14.5px;text-align:center}
.cmp caption{font-size:13px;font-weight:700;color:var(--sub);text-align:left;padding-bottom:10px}
.cmp th,.cmp td{border-bottom:1px solid var(--line);padding:13px 10px}
.cmp thead th{font-size:13.5px;font-weight:700}
.cmp tbody th{text-align:left;font-weight:500;color:var(--sub)}

/* 기존 서사: three cards, the rest one tap away. */
.cards{margin-top:40px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.card{text-align:left;background:var(--white);border:1px solid var(--line);border-radius:18px;padding:24px;font-family:inherit;cursor:pointer}
.card:hover{border-color:var(--off)}
.card h3{font-size:19px;font-weight:700;line-height:1.35;letter-spacing:-.02em}
.card .more{display:block;margin-top:14px;font-size:14px}

/* One sheet for every "more" on the page. Esc closes it; the browser sees to that. */
#sheet{border:0;border-radius:20px;padding:0;max-width:560px;width:calc(100% - 32px);box-shadow:0 30px 60px -20px rgba(0,0,0,.35)}
#sheet::backdrop{background:rgba(13,27,52,.4)}
.sheet-in{padding:26px}
.sheet-in h3{font-size:20px;font-weight:700;letter-spacing:-.02em}
.sheet-in p{margin-top:10px;font-size:15.5px;line-height:1.65;color:var(--sub)}
.sheet-note{font-size:12.5px;color:#8E8E93}
.sheet-foot{margin-top:20px;display:flex;justify-content:flex-end}
.pill.ghost{background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}

@media (max-width:820px){
  .flow{grid-template-columns:1fr;gap:26px}
  .flow::before{top:0;bottom:0;left:26px;right:auto;width:1px;height:auto}
  .flow .step{display:grid;grid-template-columns:52px minmax(0,1fr);gap:16px;text-align:left;align-items:start}
  .flow h3{justify-content:flex-start;margin-top:0}
  .flow .step-body{display:grid;gap:6px}
  .flow p,.flow .when{margin-top:0}
  .flow .when{justify-self:start}
  .diffs,.cards{grid-template-columns:1fr}
  .cmp{font-size:13px}
  .cmp th,.cmp td{padding:10px 6px}
  .nav .links{display:none}
}
@media (prefers-reduced-motion:reduce){
  .flow .step{opacity:1;transform:none;transition:none}
  .ask .bar i{transition:none}
}

/* 가격 — 무엇이 포함되고 무엇이 아닌지, 돈을 내기 전에 다 보이게. */
.not-included{margin:28px auto 0;max-width:640px;text-align:left;border:1px solid var(--line);border-radius:16px;padding:14px 18px}
.not-included summary{cursor:pointer;font-weight:700;font-size:15px;list-style:none;display:flex;justify-content:space-between;gap:12px}
.not-included summary::-webkit-details-marker{display:none}
.not-included summary::after{content:"+";color:var(--off)}
.not-included[open] summary::after{content:"−"}
.not-included ul{margin:12px 0 0;padding-left:20px;display:grid;gap:6px;font-size:14.5px;color:var(--sub)}
.refund{margin:22px auto 0;max-width:640px;text-align:left;font-size:14.5px}
.refund h3{font-size:15px;font-weight:700}
.refund ul{margin:8px 0 0;padding-left:20px;display:grid;gap:6px;color:var(--sub);line-height:1.6}
.refund p{margin-top:8px}
.refund a{color:var(--blue)}
.fair-price{margin:18px auto 0;max-width:46ch;font-size:13.5px;color:var(--sub);line-height:1.6}
.after-pay{margin:44px auto 0;max-width:900px;text-align:left}
.after-pay h3{font-size:17px;font-weight:700;text-align:center}
.after-steps{margin:18px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;counter-reset:step}
.after-steps li{counter-increment:step;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:16px;font-size:14px;line-height:1.55}
.after-steps li::before{content:counter(step);display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--navy);color:#fff;font-size:12px;font-weight:700;margin-bottom:8px}
.after-steps b{display:block;font-size:15px;margin-bottom:4px}
.after-steps span{color:var(--sub)}
.price-faq{margin:36px auto 0;max-width:640px;text-align:left;border-top:1px solid var(--line)}
.price-faq details{border-bottom:1px solid var(--line)}
.price-faq summary{padding:14px 0;font-size:15px;font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px}
.price-faq summary::-webkit-details-marker{display:none}
.price-faq summary::after{content:"+";color:var(--off)}
.price-faq details[open] summary::after{content:"−"}
.price-faq p{padding-bottom:14px;font-size:14.5px;line-height:1.7;color:var(--sub)}
@media (max-width:820px){
  .after-steps{grid-template-columns:1fr}
  .cmp{display:block;overflow-x:auto}
}