/* v7 fixes (대표 2026-10-11): step numbers readable, chip spacing, Esthetic card screen, FSE proofs, pilot section. */

/* ---------- How: the four step marks sat at top/bottom of the dial, under the phone. Rotate the dial 45°
   so the marks land on the diagonals (clear of the device), and make them larger. ---------- */
.ring svg{transform:rotate(-45deg)}
#how .ring .rm{width:46px;height:46px;margin:-23px 0 0 -23px;font-size:15px;font-weight:800;box-shadow:0 0 0 1.5px var(--line),0 6px 14px -8px var(--shadow)}
@media(max-width:899px){#how .ring .rm{display:grid;width:34px;height:34px;margin:-17px 0 0 -17px;font-size:12px}}

/* the demo chip under the phone had ~1px of air; give it room and a readable size */
#how .chips{bottom:-46px;left:50%;transform:translateX(-50%);max-width:none;height:26px}
#how .live .chip{left:50%;top:auto;width:max-content;height:auto;transform:translateX(-50%);font-size:12px;line-height:1.4;padding:4px 10px;border-radius:6px;white-space:nowrap}
#how .live .chip::before{content:none}  /* the tech demo's .chip pill rule leaked onto this label */

/* ---------- Products: Esthetic tablet was 260×141 and its chip covered the screen ---------- */
#products .c-vis{height:270px}
#products .c-vis .sim{top:10px;bottom:auto;left:12px}
.c-dev.dev-tab{width:min(calc(100% - 28px),420px);height:212px;border-radius:12px 12px 0 0}
.c-dev.dev-phone{width:156px;height:280px}
.ly .gen-tag,.shot-figure .gen-tag,.c-dev .gen-tag{font-size:11px}
@media(max-width:899px){#products .c-vis{height:250px}.c-dev.dev-tab{height:190px}.c-dev.dev-phone{width:136px;height:244px}}

/* ---------- Tech: FSE lead and the three new proofs ---------- */
.tech .lead b{color:var(--t-head);font-weight:750}
.tech .lead.fse-why{font-size:16px;line-height:1.65;max-width:620px}
.proofs{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1099px) and (min-width:900px){.proofs{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* 대표 2026-10-15: below 900px the three proofs stack again (e-end.css rule was overridden by the 3-column line above; on a 375px phone each card was ~65px wide). */
@media(max-width:899px){.proofs{grid-template-columns:1fr}}
.demo.d-gate,.demo.d-honest,.demo.d-model{display:grid;place-items:center}
/* gate: face guide, a passing shadow, three checks that tick in turn */
.d-gate .oval{position:absolute;left:50%;top:50%;width:92px;height:118px;transform:translate(-50%,-56%);border:2px dashed color-mix(in srgb,var(--p-brand) 55%,transparent);border-radius:50%}
.d-gate .shade{position:absolute;left:50%;top:50%;width:92px;height:118px;transform:translate(-50%,-56%);border-radius:50%;
  background:linear-gradient(90deg,rgba(32,26,25,.28),rgba(32,26,25,0) 60%);animation:shade 6s ease-in-out infinite}
.d-gate .g{position:absolute;bottom:18px;font-size:13px;font-weight:700;color:var(--ink-2);background:var(--surface);border:1px solid var(--hair);border-radius:999px;padding:4px 10px 4px 8px;display:flex;gap:5px;align-items:center}
.d-gate .g::before{content:'';width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line);background:var(--surface)}
.d-gate .g1{left:calc(50% - 128px)}.d-gate .g2{left:calc(50% - 38px)}.d-gate .g3{left:calc(50% + 52px)}
.d-gate .g::before{animation:tick 6s steps(1) infinite}
.d-gate .g2::before{animation-delay:.5s}.d-gate .g3::before{animation-delay:1s}
@keyframes shade{0%,30%{opacity:1}45%,100%{opacity:0}}
@keyframes tick{0%,40%{background:var(--surface)}50%,100%{background:var(--p-brand);box-shadow:inset 0 0 0 4px var(--surface),0 0 0 1.5px var(--p-brand)}}
/* honest: one score, one 3-step reference, one "hard to check" */
.d-honest{align-content:center;gap:8px;padding:18px}
.d-honest .row{width:min(250px,100%);display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;background:var(--surface);border:1px solid var(--hair);font-size:14px}
.d-honest .row b{font-weight:700;color:var(--ink-1);width:34px}
.d-honest .num{margin-left:auto;font-size:18px;font-weight:800;color:var(--ink-1);font-variant-numeric:tabular-nums}
.d-honest .band{display:flex;gap:3px;margin-left:auto}.d-honest .band i{width:22px;height:8px;border-radius:3px;background:var(--p-brand)}.d-honest .band i.off{background:var(--line)}
.d-honest em{font-style:normal;font-size:12px;font-weight:700;color:var(--t-aux);background:rgba(32,26,25,.06);padding:2px 6px;border-radius:4px}
.d-honest .row.dim{color:var(--t-aux)}.d-honest .hard{margin-left:auto;font-size:13px;font-weight:650;color:var(--t-aux)}
/* model: three steps and two checks */
.d-model{grid-template-columns:auto auto auto auto auto;align-content:center;column-gap:6px;row-gap:12px;padding:14px}
.d-model .m{font-size:12px;font-weight:700;line-height:1.3;text-align:center;padding:8px 8px;border-radius:8px;background:var(--surface);border:1px solid var(--hair);color:var(--ink-2);max-width:96px}
.d-model .m3{background:var(--p-brand);color:#fff;border-color:transparent;font-size:15px;font-weight:800;padding:10px 12px}
.d-model .ar{width:14px;height:2px;background:var(--ink-3);position:relative}.d-model .ar::after{content:'';position:absolute;right:-1px;top:-3px;border:4px solid transparent;border-left-color:var(--ink-3);border-right:0}
.d-model .ok{grid-column:1 / -1;justify-self:center;font-size:12px;font-weight:650;color:var(--ink-2);display:flex;gap:6px;align-items:center}
.d-model .ok::before{content:'';width:12px;height:12px;border-radius:50%;background:var(--p-brand);box-shadow:inset 0 0 0 3px var(--surface),0 0 0 1.5px var(--p-brand)}
.d-model .ok1{margin-top:4px}.d-model .ok2{margin-top:-6px}
@media(prefers-reduced-motion:reduce){.d-gate .shade,.d-gate .g::before{animation:none}.d-gate .shade{opacity:0}.d-gate .g::before{background:var(--p-brand);box-shadow:inset 0 0 0 4px var(--surface),0 0 0 1.5px var(--p-brand)}}

/* ---------- Pilot: its own section (was the "첫 파트너" block inside tech) ---------- */
.pilot{padding:var(--pad) 0}
.pilot .partner{margin-top:0;padding-top:0;border-top:0}
.pilot .pt-head .h2{margin:0}
.slots.steps3 li{opacity:1;transform:none;min-height:0;border:1px solid var(--hair);background:var(--surface);align-content:start;gap:8px;padding:20px 18px 22px}
.slots.steps3 li h3{font-size:17px;line-height:1.35;letter-spacing:-.03em;font-weight:760;color:var(--t-head);margin-top:6px}
.slots.steps3 li p{font-size:14.5px;line-height:1.55;font-weight:500;color:var(--t-body)}
.slots.steps3 span{font-size:14px}
@media(max-width:899px){.slots.steps3 li{min-height:0}}

/* ---------- Intro film (V1): section after mission + hero button + dialog ---------- */
.film{padding:clamp(72px,8vw,120px) 0 clamp(56px,6vw,96px);background:var(--paper)}
.film .sec-head{margin-bottom:clamp(24px,3vw,40px)}
.film-box{margin:0 auto;max-width:1040px}
.film-v{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:var(--r-room);background:#F3E6E8;box-shadow:0 30px 60px -36px rgba(32,26,25,.45)}
.film-note{margin-top:14px;text-align:center;font-size:13px;font-weight:500;color:var(--t-aux)}
.film-open{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 4px;border:0;background:transparent;font:inherit;font-size:16px;font-weight:650;color:var(--ink-1);cursor:pointer}
.film-open .pl{width:32px;height:32px;border-radius:50%;background:var(--co-btn);position:relative;flex:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--co) 18%,transparent)}
.film-open .pl::after{content:'';position:absolute;left:12px;top:9px;border:7px solid transparent;border-left:11px solid #fff;border-right:0}
.film-open:hover .pl{background:var(--co-hover)}
.film-open:focus-visible{outline:2px solid var(--co);outline-offset:3px;border-radius:var(--r-btn)}
.film-dlg{width:min(1120px,calc(100vw - 32px));max-width:none;padding:0;border:0;border-radius:20px;background:#000;overflow:visible}
.film-dlg::backdrop{background:rgba(32,26,25,.72)}
.film-dlg video{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:20px}
.film-x{position:absolute;right:-6px;top:-52px;width:44px;height:44px;border-radius:50%;border:0;background:#fff;color:var(--ink-1);font-size:26px;line-height:1;cursor:pointer}
.film-x:focus-visible{outline:2px solid var(--co);outline-offset:3px}
@media(max-width:560px){.film-x{right:0;top:-50px}.film-v{border-radius:16px}}
/* ---------- How: the first screen of each step was transparent at the start of the step (--p from 0), so the phone
   opened blank. A step's first frame (--i:0) is shown at once; later frames keep their fade/rise. ---------- */
.ly.fr[style^="--i:0;"]{--p:1}
/* ---------- Hero background (v7 final: H1 light ring + H2 sheen, e-hero.js) — replaces the v6 contour map + lens ---------- */
/* H1: light fills the emblem's tick ring once every 9 s, a bright point leads it */
.hf-ring .arc{fill:none;stroke:var(--co);stroke-width:1.1;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;
  transform:rotate(-90deg);transform-origin:50px 50px;animation:hfArc 9s cubic-bezier(.45,.05,.35,1) infinite}
.hf-ring .glow{fill:#fff;stroke:var(--co);stroke-width:.8;filter:drop-shadow(0 0 1.6px rgba(214,58,110,.9));
  transform-origin:50px 50px;animation:hfDot 9s cubic-bezier(.45,.05,.35,1) infinite}
@keyframes hfArc{0%{stroke-dashoffset:1;opacity:.9}78%{stroke-dashoffset:0;opacity:.9}100%{stroke-dashoffset:0;opacity:0}}
@keyframes hfDot{0%{transform:rotate(0deg);opacity:1}78%{transform:rotate(360deg);opacity:1}100%{transform:rotate(360deg);opacity:0}}
/* H2: a soft sheen crosses the hero diagonally, then rests */
.hf-sheen{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 36%,rgba(255,255,255,.2) 43%,rgba(255,255,255,.72) 48.5%,rgba(255,244,248,.62) 52%,rgba(255,255,255,.16) 57%,transparent 64%) no-repeat;
  background-size:260% 100%;background-position:160% 0;animation:hfSheen 8s ease-in-out infinite}
@keyframes hfSheen{0%{background-position:160% 0}45%{background-position:-60% 0}100%{background-position:-60% 0}}
@media(prefers-reduced-motion:reduce){.hf-ring .arc{animation:none;stroke-dashoffset:0;opacity:.6}.hf-ring .glow{animation:none;opacity:0}.hf-sheen{animation:none;display:none}}
/* ---------- Hero copy v8 (2026-10-12): company line + the three products (Brand first), reader switch hidden ---------- */
.hero .tag{font-size:clamp(15px,1.1vw,17px);color:var(--ink-1)}
.hero .h1{font-size:clamp(29px,3.6vw,56px);line-height:1.14;letter-spacing:-.05em}
.hero-prods{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px;max-width:600px}
.hero-prods li{display:grid;grid-template-columns:150px 1fr;gap:4px 16px;align-items:baseline;padding:12px 16px;border:1px solid var(--hair);border-radius:16px;background:rgba(255,255,255,.66)}
.hero-prods li.on{border-color:color-mix(in srgb,var(--acc) 40%,var(--hair));background:rgba(255,255,255,.85)}
.hero-prods b{font-size:15px;font-weight:800;color:var(--ink-1)}
.hero-prods b small{display:block;font-size:12px;font-weight:600;color:var(--t-aux);margin-top:2px}
.hero-prods span{font-size:15px;line-height:1.55;color:var(--t-body);font-weight:550}
@media(max-width:600px){.hero-prods{gap:8px;margin-top:18px}.hero-prods li{grid-template-columns:1fr;gap:2px;padding:10px 14px}.hero-prods b small{display:inline;margin:0 0 0 6px}.hero-prods span{font-size:14px;line-height:1.5}}
.hero-note{font-size:13px;color:var(--t-aux);margin:10px 0 0}
.js .hero .hero-prods,.js .hero .hero-note{animation:rise .9s var(--ease) both;animation-delay:.2s}