/* ═══════════════════════════════════════════════════════
   시그널 데스크 — 한국 시장 학습 커뮤니티 랜딩
   팔레트: 페리윙클 안개 · 아이리스 · 잉크 · 상승 적 / 하락 청
   서체: Gowun Batang(제목) · IBM Plex Sans KR(본문) · JetBrains Mono(수치)
   ═══════════════════════════════════════════════════════ */

:root{
  --mist:#ECEDF8;
  --mist-2:#E3E5F5;
  --chalk:#FBFBFE;
  --veil:#F5F5FC;
  --ink:#14162B;
  --ink-2:#565C7B;
  --ink-3:#868BA5;
  --line:#DEDFEF;
  --line-2:#CACDE6;

  --iris:#4A44D6;
  --iris-2:#7B74F0;
  --iris-3:#B9B5FA;
  --iris-ink:#241F86;

  --up:#E23D4F;
  --down:#2F73E8;

  --sans:'IBM Plex Sans KR', system-ui, -apple-system, sans-serif;
  --serif:'Gowun Batang', 'IBM Plex Sans KR', serif;
  --mono:'JetBrains Mono', ui-monospace, monospace;

  --r-s:12px;
  --r-m:20px;
  --r-l:30px;

  --shadow-s:0 2px 10px rgba(36,31,134,.06);
  --shadow-m:0 14px 40px -18px rgba(36,31,134,.28), 0 2px 8px rgba(36,31,134,.05);
  --shadow-l:0 34px 80px -34px rgba(36,31,134,.42);

  --gut:24px;
  --dock:96px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  padding-bottom:var(--dock);
  font-family:var(--sans);
  font-weight:400;
  font-size:16px;
  line-height:1.72;
  color:var(--ink);
  background:var(--mist);
  background-image:
    radial-gradient(900px 520px at 85% -8%, rgba(123,116,240,.20), transparent 62%),
    radial-gradient(760px 480px at 4% 22%, rgba(226,61,79,.07), transparent 60%),
    radial-gradient(900px 700px at 50% 108%, rgba(123,116,240,.16), transparent 62%);
  background-attachment:fixed;
  overflow-x:hidden;
}

body.is-locked{overflow:hidden}

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

button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}

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

/* ── 공통 조판 ───────────────────────────── */

.page{width:100%;max-width:1180px;margin:0 auto;padding:0 var(--gut)}

.eyebrow{
  margin:0 0 14px;
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--iris);
}
.eyebrow--ko{font-family:var(--sans);letter-spacing:.18em;font-weight:600}

.h2{
  margin:0 0 18px;
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(26px,4.2vw,40px);
  line-height:1.34;
  letter-spacing:-.015em;
  color:var(--ink);
}

.lede{margin:0 0 26px;color:var(--ink-2);font-size:16px;line-height:1.85;max-width:44ch}

.sec__head{max-width:640px;margin:0 auto 46px;text-align:center}
.sec__head .lede{margin-inline:auto}

/* ── 버튼 ────────────────────────────────── */

.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:15px 26px;
  border-radius:999px;
  font-size:15px;
  font-weight:600;
  letter-spacing:-.01em;
  text-decoration:none;
  transition:transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s ease, background .2s ease, color .2s ease;
  overflow:hidden;
}
.btn i{font-size:.86em;transition:transform .25s ease}
.btn:hover i{transform:translateX(3px)}
.btn:active{transform:translateY(1px) scale(.99)}

.btn--solid{
  color:#fff;
  background:linear-gradient(112deg,var(--iris-ink),var(--iris) 46%,var(--iris-2));
  box-shadow:0 12px 26px -12px rgba(36,31,134,.72);
}
.btn--solid::after{
  content:"";
  position:absolute;
  inset:0 auto 0 -60%;
  width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-18deg);
  animation:sheen 4.6s ease-in-out infinite;
}
.btn--solid:hover{box-shadow:0 18px 34px -12px rgba(36,31,134,.62);transform:translateY(-2px)}

.btn--line{
  color:var(--iris-ink);
  background:var(--chalk);
  border:1px solid var(--line-2);
  box-shadow:var(--shadow-s);
}
.btn--line:hover{border-color:var(--iris-3);transform:translateY(-2px)}

.btn--full{width:100%}
.btn--big{padding:19px 40px;font-size:17px}

@keyframes sheen{
  0%,62%{left:-60%}
  92%,100%{left:130%}
}

/* ── 브랜드 ─────────────────────────────── */

.brand{display:inline-flex;align-items:center;gap:10px}
.brand__mark{
  display:grid;
  place-items:center;
  width:30px;height:30px;
  border-radius:9px;
  color:#fff;
  font-size:13px;
  background:linear-gradient(140deg,var(--iris-ink),var(--iris-2));
  box-shadow:0 6px 14px -6px rgba(36,31,134,.8);
}
.brand__name{font-family:var(--serif);font-weight:700;font-size:17px;letter-spacing:-.01em}

/* ── 등장 모션 ───────────────────────────── */

.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.3,1)}
.reveal.is-in{opacity:1;transform:none}

/* ═══ 1 · 히어로 ═════════════════════════ */

.hero{padding:64px 0 26px}
.hero__head{max-width:760px}

.hero__title{
  margin:0 0 20px;
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(36px,7vw,68px);
  line-height:1.2;
  letter-spacing:-.03em;
}
.hero__title em{
  position:relative;
  font-style:normal;
  color:var(--iris-ink);
  white-space:nowrap;
}
.hero__title em::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:.1em;
  height:.34em;
  border-radius:2px;
  background:linear-gradient(90deg,rgba(123,116,240,.34),rgba(226,61,79,.22));
  transform:scaleX(0);
  transform-origin:left;
  animation:underline 1.1s .5s cubic-bezier(.2,.8,.3,1) forwards;
  z-index:-1;
}
@keyframes underline{to{transform:scaleX(1)}}

.hero__lede{margin:0 0 42px;max-width:46ch;font-size:17px;line-height:1.85;color:var(--ink-2)}
.hero .reveal:nth-child(1){transition-delay:.05s}
.hero .reveal:nth-child(2){transition-delay:.14s}
.hero .reveal:nth-child(3){transition-delay:.23s}

/* 데스크 2칸 */
.desk{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,330px);
  gap:18px;
  align-items:stretch;
}
.desk__cell{border-radius:var(--r-l);min-width:0}
.desk .reveal:nth-child(1){transition-delay:.1s}
.desk .reveal:nth-child(2){transition-delay:.2s}

.dot{
  width:7px;height:7px;border-radius:50%;
  background:currentColor;
  box-shadow:0 0 0 0 currentColor;
  animation:ping 2s ease-out infinite;
}
@keyframes ping{
  0%{box-shadow:0 0 0 0 rgba(226,61,79,.5)}
  70%,100%{box-shadow:0 0 0 9px rgba(226,61,79,0)}
}
/* 그림 무대 */
.stage{
  position:relative;
  display:grid;
  place-items:center;
  padding:26px;
  min-height:400px;
  border-radius:var(--r-l);
  background:linear-gradient(168deg,rgba(255,255,255,.9),rgba(233,233,250,.55));
  border:1px solid rgba(255,255,255,.9);
  box-shadow:var(--shadow-m);
  overflow:hidden;
  isolation:isolate;
}
.stage__glow{
  position:absolute;
  width:78%;aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle,rgba(123,116,240,.34),transparent 66%);
  filter:blur(14px);
  animation:breathe 7s ease-in-out infinite;
}
.stage__grid{
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(123,116,240,.10) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(123,116,240,.10) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000,transparent 72%);
  mask-image:radial-gradient(circle at 50% 50%,#000,transparent 72%);
}
.stage__ring{
  position:absolute;
  border-radius:50%;
  border:1px dashed rgba(74,68,214,.28);
}
.stage__ring--a{width:74%;aspect-ratio:1;animation:spin 34s linear infinite}
.stage__ring--b{width:96%;aspect-ratio:1;border-style:solid;border-color:rgba(74,68,214,.13);animation:spin 52s linear reverse infinite}

.stage__art{
  position:relative;
  z-index:2;
  width:82%;
  max-width:400px;
  filter:drop-shadow(0 26px 36px rgba(36,31,134,.26));
  animation:float 6.5s ease-in-out infinite;
}

@keyframes breathe{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.09);opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-13px) rotate(-1.1deg)}}

.chip{
  position:absolute;
  z-index:3;
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 13px;
  border-radius:999px;
  font-size:12px;font-weight:600;
  color:var(--iris-ink);
  background:rgba(255,255,255,.94);
  border:1px solid var(--line);
  box-shadow:var(--shadow-s);
  white-space:nowrap;
  animation:float 7.5s ease-in-out infinite;
}
.chip i{color:var(--iris);font-size:11px}
.chip--b{bottom:14%;right:3%;animation-delay:1.5s}
.chip--c{bottom:5%;left:6%;animation-delay:.9s}

/* 실시간 시세 칩 */
.chip--quote{
  top:8%;left:3%;
  gap:9px;
  padding:9px 15px;
  animation-delay:.4s;
  box-shadow:var(--shadow-m);
  transition:border-color .45s ease, box-shadow .45s ease;
}
.chip--quote .dot{color:var(--up);width:6px;height:6px}
.chip__n{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--ink-3)}
.chip__v{
  font-family:var(--mono);font-weight:700;font-size:14px;
  color:var(--ink);letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
}
.chip__d{font-family:var(--mono);font-size:12px;font-weight:700}
.chip__d.is-up{color:var(--up)}
.chip__d.is-down{color:var(--down)}
.chip--quote.is-flash{
  border-color:var(--iris-3);
  box-shadow:0 0 0 3px rgba(123,116,240,.16), var(--shadow-m);
}

/* 행동 카드 */
.act{
  padding:24px;
  background:linear-gradient(170deg,#1B1746,#2B2596 62%,#3E37BE);
  color:#fff;
  box-shadow:var(--shadow-l);
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
}
.act::before{
  content:"";
  position:absolute;
  top:-40%;right:-30%;
  width:280px;height:280px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(185,181,250,.42),transparent 68%);
}
.act__kicker{
  position:relative;margin:0 0 8px;
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--iris-3);
}
.act__title{
  position:relative;
  margin:0 0 18px;
  font-family:var(--serif);font-weight:700;font-size:23px;line-height:1.4;letter-spacing:-.01em;
}
.act__list{position:relative;list-style:none;margin:0 0 22px;padding:0;display:grid;gap:10px}
.act__list li{display:flex;align-items:flex-start;gap:9px;font-size:14px;color:rgba(255,255,255,.9)}
.act__list i{margin-top:5px;font-size:10px;color:#9E98FF}
.act .btn--solid{
  background:#fff;color:var(--iris-ink);
  box-shadow:0 12px 26px -14px rgba(0,0,0,.6);
  margin-top:auto;
}
.act .btn--solid::after{background:linear-gradient(100deg,transparent,rgba(74,68,214,.18),transparent)}
.act__note{
  position:relative;
  margin:13px 0 0;text-align:center;
  font-size:11.5px;color:rgba(255,255,255,.62);
}
.act__note i{margin-right:5px;font-size:10px}

/* ═══ 2 · 도구 넷 ════════════════════════ */

.tools{padding:96px 0 20px}

.tool-grid{
  list-style:none;margin:0;padding:0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
.tool{
  padding:26px 22px 28px;
  border-radius:var(--r-m);
  background:var(--chalk);
  border:1px solid var(--line);
  box-shadow:var(--shadow-s);
  transition:transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s ease, border-color .3s ease;
}
.tool:nth-child(even){transform:translateY(26px)}
.tool:nth-child(1){transition-delay:.05s}
.tool:nth-child(2){transition-delay:.13s}
.tool:nth-child(3){transition-delay:.21s}
.tool:nth-child(4){transition-delay:.29s}
.tool:hover{box-shadow:var(--shadow-m);border-color:var(--iris-3)}
.tool:nth-child(odd):hover{transform:translateY(-6px)}
.tool:nth-child(even):hover{transform:translateY(20px)}

.tool__ico{
  display:grid;place-items:center;
  width:46px;height:46px;margin-bottom:18px;
  border-radius:14px;
  font-size:17px;color:var(--iris);
  background:linear-gradient(150deg,#EDECFE,#DCDAFB);
  border:1px solid #D5D2FA;
}
.tool__h{margin:0 0 9px;font-family:var(--serif);font-weight:700;font-size:19px;letter-spacing:-.01em}
.tool__p{margin:0;font-size:14px;line-height:1.78;color:var(--ink-2)}

/* ═══ 3·4 · 좌우 분할 ════════════════════ */

.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:center;
  padding:104px 0 0;
}
.split--flip .split__art{order:2}
.split--flip .split__txt{order:1}

.split__art{
  position:relative;
  display:grid;
  place-items:center;
  min-height:380px;
  isolation:isolate;
}
.split__art img{
  position:relative;z-index:2;
  width:86%;
  filter:drop-shadow(0 30px 40px rgba(36,31,134,.24));
  animation:float 8s ease-in-out infinite;
}
.split__txt .reveal:nth-child(1){transition-delay:.05s}
.split__txt .reveal:nth-child(2){transition-delay:.12s}
.split__txt .reveal:nth-child(3){transition-delay:.19s}
.split__txt .reveal:nth-child(4){transition-delay:.26s}
.split__txt .reveal:nth-child(5){transition-delay:.33s}

.halo{
  position:absolute;
  width:82%;aspect-ratio:1;
  border-radius:50%;
  filter:blur(18px);
  animation:breathe 8s ease-in-out infinite;
}
.halo--live{background:radial-gradient(circle,rgba(123,116,240,.34),transparent 65%)}
.halo--alert{background:radial-gradient(circle,rgba(226,61,79,.16),rgba(123,116,240,.28) 42%,transparent 66%)}
.halo--arc{background:radial-gradient(circle,rgba(123,116,240,.3),transparent 66%)}

.wave{
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(74,68,214,.3);
  width:38%;aspect-ratio:1;
  animation:ripple 4.4s ease-out infinite;
}
.wave--2{animation-delay:1.45s}
.wave--3{animation-delay:2.9s}
@keyframes ripple{
  0%{transform:scale(.6);opacity:0}
  16%{opacity:.85}
  100%{transform:scale(2.5);opacity:0}
}

.pulse{
  position:absolute;
  width:56%;aspect-ratio:1;
  border-radius:50%;
  border:1px dashed rgba(226,61,79,.34);
  animation:spin 26s linear infinite;
}

.badge{
  position:absolute;
  z-index:3;
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 15px;
  border-radius:999px;
  font-size:12px;font-weight:600;
  background:rgba(255,255,255,.95);
  border:1px solid var(--line);
  box-shadow:var(--shadow-m);
  white-space:nowrap;
}
.badge--live{top:6%;left:0;color:var(--up)}
.badge--fast{bottom:10%;left:2%;color:var(--iris-ink)}
.badge--fast i{color:var(--iris)}
.badge--pdf{bottom:8%;right:2%;color:var(--iris-ink)}
.badge--pdf i{color:var(--up)}

.spec{margin:0 0 28px;padding:0;border-top:1px solid var(--line-2)}
.spec__row{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:13px 0;border-bottom:1px solid var(--line-2);
}
.spec__row dt{font-size:13px;color:var(--ink-3);letter-spacing:.02em}
.spec__row dd{margin:0;font-size:14px;color:var(--ink-2);text-align:right}
.spec__row b{font-family:var(--mono);font-weight:700;color:var(--ink)}

.feed{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:8px}
.feed__row{
  display:grid;
  grid-template-columns:auto auto 1fr;
  align-items:center;
  gap:12px;
  padding:12px 16px;
  border-radius:14px;
  background:var(--chalk);
  border:1px solid var(--line);
  font-size:13.5px;
  box-shadow:var(--shadow-s);
  animation:slidein .6s backwards;
}
.feed__row:nth-child(1){animation-delay:.1s}
.feed__row:nth-child(2){animation-delay:.25s}
.feed__row:nth-child(3){animation-delay:.4s}
@keyframes slidein{from{opacity:0;transform:translateX(-14px)}}
.feed__t{font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.feed__b{font-size:12px}
.feed__b.is-up{color:var(--up)}
.feed__b.is-down{color:var(--down)}
.feed__x{color:var(--ink-2)}

/* ═══ 5 · 아카이브 ═══════════════════════ */

.arc{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:center;
  padding:112px 0 0;
}
.arc__head .reveal:nth-child(2){transition-delay:.1s}
.arc__head .reveal:nth-child(3){transition-delay:.18s}
.arc__head .reveal:nth-child(4){transition-delay:.26s}

.arc__art{position:relative;display:grid;place-items:center;min-height:400px;isolation:isolate}
.arc__art img{
  position:relative;z-index:2;
  width:80%;
  filter:drop-shadow(0 34px 44px rgba(36,31,134,.26));
  animation:float 9s ease-in-out infinite;
}
.arc__num{
  position:absolute;
  z-index:1;
  top:2%;left:0;
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(120px,17vw,206px);
  line-height:1;
  letter-spacing:-.06em;
  color:transparent;
  -webkit-text-stroke:1.4px rgba(74,68,214,.30);
}

/* ═══ 6 · 숫자 ═══════════════════════════ */

.proof{padding:112px 0 0}
.proof__list{
  list-style:none;margin:0;padding:34px 18px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
  border-radius:var(--r-l);
  background:var(--chalk);
  border:1px solid var(--line);
  box-shadow:var(--shadow-m);
}
.proof__i{text-align:center;border-right:1px solid var(--line)}
.proof__i:last-child{border-right:0}
.proof__i:nth-child(2){transition-delay:.08s}
.proof__i:nth-child(3){transition-delay:.16s}
.proof__i:nth-child(4){transition-delay:.24s}
.proof__i b{
  display:block;
  font-family:var(--mono);font-weight:700;
  font-size:clamp(26px,3.6vw,34px);
  letter-spacing:-.02em;
  color:var(--iris-ink);
  font-variant-numeric:tabular-nums;
}
.proof__i span{display:block;margin-top:4px;font-size:12.5px;color:var(--ink-2)}

/* ═══ 7 · 마지막 ═════════════════════════ */

.last{padding:112px 0 0}
.last__in{
  position:relative;
  overflow:hidden;
  padding:62px 34px 66px;
  border-radius:var(--r-l);
  text-align:center;
  background:linear-gradient(150deg,#1B1746,#2B2596 58%,#4A44D6);
  color:#fff;
  box-shadow:var(--shadow-l);
}
.last__in::before,.last__in::after{
  content:"";position:absolute;border-radius:50%;
}
.last__in::before{
  width:340px;height:340px;top:-160px;left:-90px;
  background:radial-gradient(circle,rgba(185,181,250,.34),transparent 68%);
  animation:breathe 9s ease-in-out infinite;
}
.last__in::after{
  width:300px;height:300px;bottom:-150px;right:-70px;
  background:radial-gradient(circle,rgba(226,61,79,.26),transparent 68%);
  animation:breathe 11s ease-in-out infinite reverse;
}
.last__in .eyebrow{position:relative;color:var(--iris-3)}
.last__h{
  position:relative;
  margin:0 0 14px;
  font-family:var(--serif);font-weight:700;
  font-size:clamp(28px,4.8vw,44px);line-height:1.32;letter-spacing:-.02em;
}
.last__p{position:relative;margin:0 0 30px;color:rgba(255,255,255,.76);font-size:15px}
.last .btn--solid{
  position:relative;
  background:#fff;color:var(--iris-ink);
  box-shadow:0 16px 34px -16px rgba(0,0,0,.66);
}
.last .btn--solid::after{background:linear-gradient(100deg,transparent,rgba(74,68,214,.2),transparent)}

/* ═══ 푸터 ═══════════════════════════════ */

.foot{
  margin-top:104px;
  padding:44px 0 40px;
  border-top:1px solid var(--line-2);
  text-align:center;
}
.brand--foot{margin-bottom:18px}
.foot__nav{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;margin-bottom:20px}
.foot__nav button{
  position:relative;
  font-size:13.5px;color:var(--ink-2);
  padding:2px 0;
  transition:color .2s ease;
}
.foot__nav button::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--iris);transform:scaleX(0);transform-origin:right;
  transition:transform .28s cubic-bezier(.2,.8,.3,1);
}
.foot__nav button:hover{color:var(--iris-ink)}
.foot__nav button:hover::after{transform:scaleX(1);transform-origin:left}

.foot__note{max-width:60ch;margin:0 auto 14px;font-size:12px;line-height:1.8;color:var(--ink-3)}
.foot__copy{margin:0;font-family:var(--mono);font-size:11px;color:var(--ink-3)}

/* ═══ 하단 고정 CTA ══════════════════════ */

.dock{
  position:fixed;
  left:50%;
  bottom:calc(18px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  z-index:60;
  width:min(440px,calc(100vw - 32px));
  display:flex;flex-direction:column;align-items:center;gap:4px;
}
.dock__cue{
  display:block;
  font-size:26px;line-height:1;
  color:var(--iris);
  transform-origin:50% 0;
  filter:drop-shadow(0 5px 10px rgba(36,31,134,.34));
  animation:dockPoke 1.9s cubic-bezier(.34,1.56,.64,1) infinite;
}
@keyframes dockPoke{
  0%   {transform:translateY(-9px) scale(1)}
  14%  {transform:translateY(4px)  scale(1.1,.9)}
  26%  {transform:translateY(-9px) scale(1)}
  40%  {transform:translateY(4px)  scale(1.1,.9)}
  52%  {transform:translateY(-9px) scale(1)}
  100% {transform:translateY(-9px) scale(1)}
}
.dock__btn{
  position:relative;
  overflow:hidden;
  width:100%;
  display:flex;align-items:center;justify-content:center;gap:11px;
  padding:17px 26px;
  border-radius:999px;
  font-size:16px;font-weight:700;letter-spacing:-.01em;
  color:#fff;
  background:linear-gradient(112deg,var(--iris-ink),var(--iris) 48%,var(--iris-2));
  box-shadow:0 18px 40px -14px rgba(36,31,134,.74), 0 0 0 5px rgba(236,237,248,.7);
  transition:transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s ease;
}
.dock__btn:hover{transform:translateY(-2px);box-shadow:0 24px 48px -14px rgba(36,31,134,.68), 0 0 0 5px rgba(236,237,248,.75)}
.dock__btn:active{transform:translateY(1px)}
.dock__btn i{font-size:.84em;transition:transform .25s ease}
.dock__btn:hover i{transform:translateX(3px)}
.dock__pulse{
  position:absolute;inset:0 auto 0 -60%;
  width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);
  transform:skewX(-18deg);
  animation:sheen 3.8s ease-in-out infinite;
}
.dock__txt{position:relative}

/* ═══ 弹窗 공통 ══════════════════════════ */

.sheet{position:fixed;inset:0;z-index:90;display:none}
.sheet.is-open{display:block}
.sheet__scrim{
  position:absolute;inset:0;
  background:rgba(20,22,43,.5);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  animation:fadein .3s ease;
}
@keyframes fadein{from{opacity:0}}

.sheet__panel{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:min(520px,calc(100vw - 28px));
  max-height:min(88vh,760px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:34px 28px 28px;
  border-radius:26px;
  background:var(--chalk);
  border:1px solid var(--line);
  box-shadow:0 40px 90px -30px rgba(20,22,43,.6);
  animation:pop .42s cubic-bezier(.2,.9,.3,1);
}
@keyframes pop{from{opacity:0;transform:translate(-50%,calc(-50% + 26px)) scale(.97)}}

.sheet__x{
  position:absolute;top:14px;right:14px;
  width:34px;height:34px;
  display:grid;place-items:center;
  border-radius:50%;
  color:var(--ink-3);
  background:var(--veil);
  transition:background .2s ease,color .2s ease,transform .2s ease;
}
.sheet__x:hover{background:var(--mist-2);color:var(--ink);transform:rotate(90deg)}

.sheet__head{margin-bottom:24px}
.sheet__step{
  margin:0 0 8px;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--iris);
}
.sheet__sep{color:var(--ink-3)}
.sheet__title{
  margin:0;
  font-family:var(--serif);font-weight:700;
  font-size:23px;letter-spacing:-.015em;line-height:1.4;
}

.prog{margin-top:16px;height:4px;border-radius:99px;background:var(--mist-2);overflow:hidden}
.prog__bar{
  display:block;height:100%;width:0;
  border-radius:99px;
  background:linear-gradient(90deg,var(--iris-ink),var(--iris-2));
  transition:width .5s cubic-bezier(.2,.8,.3,1);
}

/* 설문 */
.quiz__stage{position:relative}
.q{display:none;border:0;margin:0;padding:0}
.q.is-active{display:block;animation:qin .42s cubic-bezier(.2,.8,.3,1)}
@keyframes qin{from{opacity:0;transform:translateX(22px)}}

.q__ask{
  padding:0;margin:0 0 16px;
  font-size:16.5px;font-weight:600;line-height:1.6;letter-spacing:-.01em;
}

.opt{
  position:relative;
  display:flex;align-items:center;gap:13px;
  padding:15px 17px;
  margin-bottom:10px;
  border-radius:16px;
  background:var(--veil);
  border:1.5px solid var(--line);
  cursor:pointer;
  transition:border-color .2s ease, background .2s ease, transform .2s cubic-bezier(.2,.8,.3,1);
  animation:optin .45s backwards;
  animation-delay:calc(var(--i) * .07s + .08s);
}
@keyframes optin{from{opacity:0;transform:translateY(12px)}}
.opt:hover{border-color:var(--iris-3);background:#fff;transform:translateX(3px)}
.opt input{position:absolute;opacity:0;width:0;height:0}

.opt__box{
  flex:none;
  display:grid;place-items:center;
  width:24px;height:24px;
  border-radius:50%;
  border:1.5px solid var(--line-2);
  background:#fff;
  color:#fff;font-size:11px;
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.opt__box i{transform:scale(0);transition:transform .25s cubic-bezier(.2,1.5,.4,1)}
.opt__label{font-size:15px;font-weight:500}

.opt input:checked ~ .opt__box{background:var(--iris);border-color:var(--iris);transform:scale(1.06)}
.opt input:checked ~ .opt__box i{transform:scale(1)}
.opt:has(input:checked){border-color:var(--iris);background:#fff;box-shadow:0 8px 20px -12px rgba(74,68,214,.7)}
.opt input:focus-visible ~ .opt__box{outline:2px solid var(--iris);outline-offset:3px}

.quiz__foot{margin-top:22px}
.quiz__hint{
  margin:0;text-align:center;
  font-size:12.5px;color:var(--ink-3);
}
.quiz__go{animation:goin .5s cubic-bezier(.2,.9,.3,1)}
@keyframes goin{from{opacity:0;transform:translateY(16px) scale(.97)}}
.quiz__note{margin:12px 0 0;text-align:center;font-size:11.5px;line-height:1.7;color:var(--ink-3)}

.linkish{
  color:var(--iris);
  text-decoration:underline;
  text-underline-offset:2px;
  font-size:inherit;
  padding:0;
}

.quiz.is-nudge{animation:shake .4s}
@keyframes shake{
  20%{transform:translateX(-7px)}
  50%{transform:translateX(6px)}
  80%{transform:translateX(-3px)}
}

/* 감사 */
.thanks{text-align:center;padding:8px 0 4px;animation:goin .5s cubic-bezier(.2,.9,.3,1)}
.thanks__ico{
  display:grid;place-items:center;
  width:60px;height:60px;margin:0 auto 20px;
  border-radius:50%;
  font-size:22px;color:#fff;
  background:linear-gradient(140deg,var(--iris-ink),var(--iris-2));
  box-shadow:0 14px 30px -14px rgba(36,31,134,.9);
  animation:popin .5s .1s cubic-bezier(.2,1.5,.4,1) backwards;
}
@keyframes popin{from{transform:scale(0)}}
.thanks__title{margin:0 0 10px;font-family:var(--serif);font-weight:700;font-size:22px}
.thanks__txt{margin:0 0 26px;font-size:14px;line-height:1.8;color:var(--ink-2)}

/* 약관 본문 */
.doc{
  max-height:52vh;
  overflow-y:auto;
  margin:18px 0 22px;
  padding-right:8px;
  font-size:13.5px;
  line-height:1.9;
  color:var(--ink-2);
}
.doc h3{
  margin:20px 0 8px;
  font-family:var(--sans);font-size:14px;font-weight:600;color:var(--ink);
}
.doc h3:first-child{margin-top:0}
.doc p{margin:0 0 10px}
.doc ul{margin:0 0 12px;padding-left:18px}
.doc li{margin-bottom:5px}
.doc::-webkit-scrollbar{width:5px}
.doc::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px}

/* ═══ 반응형 ═════════════════════════════ */

@media (max-width:1020px){
  .desk{grid-template-columns:1fr;gap:16px}
  .stage{min-height:340px}
  .tool-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:860px){
  :root{--gut:20px;--dock:88px}
  .hero{padding:34px 0 14px}
  .hero__lede{margin-bottom:28px}
  .stage{min-height:300px;padding:18px}
  .split,.arc{grid-template-columns:1fr;gap:30px;padding-top:76px}
  .split--flip .split__art,.split--flip .split__txt{order:0}
  .split__art,.arc__art{min-height:280px}
  .arc__art{order:-1}
  .tools{padding-top:76px}
  .proof,.last{padding-top:76px}
  .lede{max-width:none}
}

/* ── 모바일 압축 ─────────────────────────── */
@media (max-width:620px){
  :root{--gut:16px;--dock:84px;--r-l:22px;--r-m:16px}

  /* 히어로 */
  .hero{padding:22px 0 10px}
  .hero__title{font-size:clamp(28px,8.4vw,36px);line-height:1.24;margin-bottom:12px}
  .hero__lede{font-size:14.5px;line-height:1.72;margin-bottom:20px}
  .eyebrow{margin-bottom:9px;font-size:10px}
  .desk{gap:12px}
  .stage{min-height:238px;padding:10px}
  .stage__art{width:74%;max-width:250px}
  .chip{padding:6px 10px;font-size:10.5px;gap:5px}
  .chip--quote{padding:6px 11px;gap:6px;top:2%;left:0}
  .chip__n{font-size:9px}
  .chip__v{font-size:12px}
  .chip__d{font-size:10.5px}
  .chip--b{bottom:11%;right:-1%}
  .chip--c{bottom:1%;left:1%}

  .act{padding:20px 18px}
  .act__title{font-size:20px;margin-bottom:14px}
  .act__list{gap:7px;margin-bottom:18px}
  .act__list li{font-size:13.5px;line-height:1.6}
  .act__note{font-size:11px}

  /* 본문 */
  .h2{font-size:clamp(22px,6.2vw,28px);line-height:1.38;margin-bottom:14px}
  .lede{font-size:14.5px;line-height:1.76;margin-bottom:22px}
  .sec__head{margin-bottom:30px}
  .btn{padding:14px 22px;font-size:14.5px}
  .btn--big{padding:16px 28px;font-size:15.5px}

  /* 한 줄에 둘씩 */
  .act__list{grid-template-columns:1fr 1fr;gap:8px 12px}
  .act__list li:last-child:nth-child(odd){grid-column:1 / -1}

  .tools{padding-top:60px}
  .tool-grid{grid-template-columns:1fr 1fr;gap:10px}
  .tool{padding:18px 15px 20px}
  .tool:nth-child(even){transform:none}
  .tool:nth-child(even):hover{transform:translateY(-6px)}
  .tool__ico{width:36px;height:36px;margin-bottom:12px;font-size:14px;border-radius:11px}
  .tool__h{font-size:15.5px;margin-bottom:7px;letter-spacing:-.02em}
  .tool__p{font-size:12.5px;line-height:1.68}

  .split,.arc{padding-top:60px;gap:22px}
  .split__art,.arc__art{min-height:230px}
  .split__art img{width:80%}
  .arc__art img{width:74%}
  .arc__num{font-size:104px;top:0}
  .badge{padding:7px 12px;font-size:11px}
  .spec__row{padding:11px 0}
  .spec__row dd{font-size:13.5px}
  .feed__row{padding:10px 13px;font-size:12.5px;gap:9px}

  .proof{padding-top:60px}
  .proof__list{grid-template-columns:repeat(2,1fr);gap:22px 8px;padding:24px 10px}
  .proof__i:nth-child(2){border-right:0}
  .proof__i:nth-child(-n+2){padding-bottom:20px;border-bottom:1px solid var(--line)}
  .proof__i span{font-size:11.5px}

  .last{padding-top:60px}
  .last__in{padding:40px 18px 44px}
  .last__p{font-size:14px;margin-bottom:24px}

  .foot{margin-top:64px;padding:32px 0 30px}
  .foot__nav{gap:8px 16px;margin-bottom:16px}
  .foot__nav button{font-size:12.5px}
  .foot__note{font-size:11.5px}

  /* 弹窗 */
  .sheet__panel{padding:28px 18px 22px;border-radius:20px}
  .sheet__title{font-size:20px}
  .q__ask{font-size:15.5px;margin-bottom:13px}
  .opts{display:grid;grid-template-columns:1fr 1fr;gap:9px}
  .opts .opt:last-child:nth-child(odd){grid-column:1 / -1}
  .opt{padding:12px 13px;margin-bottom:0;border-radius:14px;gap:10px}
  .opt:hover{transform:none}
  .opt__box{width:21px;height:21px;font-size:10px}
  .opt__label{font-size:13.5px;line-height:1.45}
  .dock__btn{padding:15px 22px;font-size:15px}
  .dock__cue{font-size:23px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{opacity:1;transform:none}
}