/* hp-v2 E — Fonday master brand (A 「제품군」 structure, Oyster-order story, new effects).
   Colours: semantic palette contract in e-theme.css; product colours from products.js.
   Motion rules: transform/opacity only; scroll-linked values are CSS variables written once per frame by JS. */
:root{
  --ease:cubic-bezier(.2,.75,.2,1);--ease-io:cubic-bezier(.65,0,.35,1);
  --pad:clamp(96px,11vw,160px);
}
body{background:var(--bg);color:var(--ink)}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.wrap{width:min(1200px,calc(100% - 48px));margin:0 auto}
.eyebrow{font-size:13px;font-weight:720;letter-spacing:.06em;color:var(--muted)}
.h2{font-size:clamp(32px,4.5vw,62px);line-height:1.1;letter-spacing:-.058em;font-weight:790}
.h3{font-size:clamp(26px,2.8vw,38px);line-height:1.18;letter-spacing:-.05em;font-weight:780}
.lead{font-size:clamp(17px,1.5vw,20px);line-height:1.62;color:var(--muted);max-width:40em}
.sec-head{display:grid;gap:14px;margin-bottom:clamp(36px,4.6vw,64px);max-width:780px}
.sec-head.center{margin-inline:auto;text-align:center;justify-items:center}
.btn{min-height:52px;display:inline-flex;align-items:center;gap:8px;padding:0 24px;border-radius:var(--r-btn);background:var(--ink);color:var(--surface);font-size:16px;font-weight:700;white-space:nowrap;transition:transform .25s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn.ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}
.btn.inv{background:var(--ink);color:var(--surface)}
.btn.line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.tlink{min-height:52px;display:inline-flex;align-items:center;gap:6px;font-size:16px;font-weight:650;padding:0 4px}
.tlink span{transition:transform .25s}.tlink:hover span{transform:translateY(3px)}
.sim,.gen-tag{position:absolute;left:12px;bottom:12px;z-index:3}
svg use,svg path,svg rect,svg ellipse,svg circle{vector-effect:non-scaling-stroke}

/* ---------- 1. Hero ---------- */
.hero{--acc:var(--t-brand);position:relative;isolation:isolate;min-height:100svh;display:grid;align-items:center;padding:calc(var(--hp-navh) + 36px) 0 64px;overflow:hidden;color:var(--ink);
  background:var(--hero-bg)}
.hero[data-aud="pro"]{--acc:var(--t-pro)}.hero[data-aud="me"]{--acc:var(--t-me)}
.field{position:absolute;inset:0;width:100%;height:100%;z-index:-1;touch-action:pan-y}
.hero::after{content:'';position:absolute;inset:auto 0 0;height:22%;z-index:-1;background:linear-gradient(to bottom,transparent,var(--bg));pointer-events:none}
.hero::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,color-mix(in srgb,var(--bg) 70%,transparent) 0%,transparent 66%);pointer-events:none}
.hero-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,80px);align-items:center}
.hero-copy{position:relative;z-index:2;max-width:640px}
.tag{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:700;letter-spacing:.04em;color:var(--muted)}
.tag::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 22%,transparent)}
.h1{margin-top:18px;font-size:clamp(42px,5.7vw,84px);line-height:1.04;letter-spacing:-.066em;font-weight:820}
.h1 .ln{display:inline-block}
/* audience switch: label row with a moving underline, goal + one-line explanation below */
.aud{margin-top:clamp(28px,3.4vw,44px)}
.aud-picks{position:relative;display:flex;flex-wrap:wrap;gap:0 4px;border-bottom:1px solid var(--line)}
.aud-picks button{min-height:44px;padding:0 12px;font-size:15px;font-weight:650;color:var(--muted)}
.aud-picks button:first-child{padding-left:0}
.aud-picks button[aria-pressed="true"]{color:var(--ink)}
.aud-bar{position:absolute;left:0;bottom:-1px;height:2px;width:var(--bw,80px);transform:translateX(var(--bx,0));background:var(--line);transition:transform .5s var(--ease)}
.aud-bar::after{content:'';position:absolute;inset:0;background:var(--acc);transform-origin:left;transform:scaleX(var(--bt,1))}
.aud.auto .aud-bar::after{animation:aud-t var(--dur,7s) linear both}
.aud.auto.paused .aud-bar::after{animation-play-state:paused}
@keyframes aud-t{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.aud-lines{display:grid;margin-top:18px;min-height:5.4em}
.aud-line{grid-area:1/1;opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .6s var(--ease);visibility:hidden}
.aud-line.on{opacity:1;transform:none;visibility:visible}
.aud-line strong{display:block;font-size:clamp(21px,2.1vw,29px);line-height:1.3;letter-spacing:-.045em;font-weight:760}
.aud-line p{margin-top:8px;font-size:16px;line-height:1.6;color:var(--muted)}
.no-js .aud-line,.still .aud-line{position:static}
.aud-pause{margin-top:6px;min-height:44px;font-size:13px;font-weight:650;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.hero .actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:clamp(22px,2.6vw,32px)}
.hero .btn{background:var(--ink);color:var(--surface)}
.hero .btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.hero .tlink{color:var(--ink)}
/* emblem: Fonday at the centre, three products on the ring (links) */
.emblem{--E:min(500px,38vw);position:relative;z-index:2;width:var(--E);aspect-ratio:1;justify-self:center}
.dial{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.dial circle{fill:none}
.emblem .disc{fill:var(--emblem-disc);stroke:var(--emblem-line);stroke-width:.3}
.emblem .ticks{stroke:var(--emblem-ticks);stroke-width:2.2;stroke-dasharray:.35 4.41}
.emblem .hair{stroke:var(--emblem-line);stroke-width:.25}
.emblem .core{fill:var(--emblem-core);stroke:var(--emblem-line);stroke-width:.3}
.js .emblem .dial{animation:dial-in 1.2s var(--ease) .1s both,spin 140s linear 1.3s infinite}
.e-word{color:var(--emblem-ink);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:calc(var(--E)*.064);font-weight:850;letter-spacing:-.075em;line-height:1}
.e-item{--t:calc(var(--E)*.17);position:absolute;width:var(--t);margin:calc(var(--t)/-2) 0 0 calc(var(--t)/-2);display:grid;justify-items:center;border-radius:var(--r-card)}
.e-item b{width:var(--t);height:var(--t);border-radius:var(--r-card);background:var(--surface);display:grid;place-items:center;color:var(--c);box-shadow:0 18px 40px -16px var(--shadow-deep);transition:transform .4s var(--ease)}
.e-item svg{width:46%;height:46%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.e-item em{font-style:normal;position:absolute;top:calc(100% + 10px);font-size:clamp(12px,1vw,14px);font-weight:750;white-space:nowrap;color:var(--emblem-ink)}
.e-item.on b,.e-item:hover b{transform:translateY(-4px) scale(1.06);box-shadow:0 0 0 6px color-mix(in srgb,var(--acc) 28%,transparent),0 22px 44px -16px var(--shadow-deep)}
.e-item.on em,.e-item:hover em{color:var(--emblem-ink)}
.e1{left:50%;top:15%;--fx:0;--fy:calc(var(--E)*.35)}
.e2{left:80.3%;top:67.5%;--fx:calc(var(--E)*-.303);--fy:calc(var(--E)*-.175)}
.e3{left:19.7%;top:67.5%;--fx:calc(var(--E)*.303);--fy:calc(var(--E)*-.175)}
.js .emblem .e-word{color:var(--emblem-ink);animation:fade .8s ease .3s both}
.js .e-item{animation:settle 1.15s var(--ease) both}
.js .e1{animation-delay:.55s}.js .e2{animation-delay:.7s}.js .e3{animation-delay:.85s}
.js .hero .tag,.js .hero .aud,.js .hero .actions{animation:rise .9s var(--ease) both}
.js .hero .aud{animation-delay:.28s}.js .hero .actions{animation-delay:.4s}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes dial-in{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes settle{0%{opacity:0;transform:translate(var(--fx),var(--fy)) scale(.5)}35%{opacity:1}100%{opacity:1;transform:none}}

/* ---------- 2. Mission: the month fades while the words light up ---------- */
.mission{position:relative;height:250vh;background:var(--bg)}
.mission-in{position:sticky;top:var(--hp-navh);height:calc(100svh - var(--hp-navh));display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(36px,6vw,96px);align-items:center;align-content:center}
.still .mission{height:auto;padding:var(--pad) 0}.still .mission-in{position:static;height:auto}
.m-head{display:grid;gap:16px}
.month{--p:1;margin-top:clamp(18px,2.4vw,32px);display:grid;grid-template-columns:repeat(7,1fr);gap:8px;max-width:380px}
.month i{aspect-ratio:1;border-radius:var(--r-xs);background:var(--month-fill);opacity:clamp(.08,calc(1 - (var(--p) * 34 - var(--i)) / 5),1)}
.month i.today{opacity:1;background:var(--ink-1)}
@media(prefers-reduced-motion:reduce){.month i:not(.today){opacity:.08}}
.m-body{display:grid;gap:22px}
.m-body p{font-size:clamp(20px,2vw,28px);line-height:1.5;letter-spacing:-.04em;font-weight:650}
.m-body .m-lead{font-size:clamp(24px,2.6vw,36px);font-weight:760;line-height:1.38}
.mission .tlink{color:var(--ink);justify-self:start}