/* ARCHE v2 — 동글 인터랙티브 디자인 시스템 (2026-10-03)
   색: 보라빛 블루 하나(--b) + 잉크. 반경 두 가지(알약 999px, 면 28px). 그림자는 크고 연하게.
   모션은 arche.js 스프링 엔진(중단 가능, 속도 인계)이 담당 — CSS transition으로 위치를 움직이지 않는다. */
:root{
  --b:#5b54f0;--b-d:#4740d8;--b-dd:#2f29a3;--b-l:#d9d7ff;--b-ll:#efeeff;--b-lll:#f7f7ff;
  --ink:#201f36;--ink-2:#5d5c76;--ink-3:#9796ad;--line:#ececf3;--soft:#f3f3f8;--bg:#f6f6fa;--card:#fff;
  --ok:#11a683;--ok-l:#dcf6ee;--warn:#e8730c;--warn-l:#ffeedd;--red:#e5484d;--red-l:#ffe5e6;
  --sh:0 1px 3px rgba(32,31,54,.04),0 22px 56px -26px rgba(32,31,54,.24);
  --sh-lg:0 2px 8px rgba(32,31,54,.05),0 40px 90px -30px rgba(32,31,54,.35);
  --r:28px;--r-s:18px;
  --top:68px;
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;background:var(--bg)}
body{font-family:Pretendard,"Pretendard Variable",system-ui,-apple-system,sans-serif;color:var(--ink);font-size:16px;line-height:1.6;letter-spacing:-.012em;-webkit-font-smoothing:antialiased;word-break:keep-all;overflow-wrap:break-word}
h1,h2,h3,h4{margin:0;letter-spacing:-.035em;line-height:1.2}
p{margin:0}
a{color:inherit}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0;-webkit-tap-highlight-color:transparent}
input,select,textarea{font:inherit;color:inherit;font-size:16px}
:focus-visible{outline:3px solid var(--b-l);outline-offset:2px;border-radius:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}
svg.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
svg.duo{width:28px;height:28px;flex:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}

/* ---------- top bar ---------- */
.top{position:sticky;top:0;z-index:40;height:var(--top);display:flex;align-items:center;gap:16px;padding:0 24px;background:rgba(246,246,250,.86);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);will-change:transform}
.top.lift{box-shadow:0 1px 0 var(--line)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;font-size:17px;letter-spacing:-.03em;white-space:nowrap}
.brand small{display:block;font-size:12px;font-weight:600;color:var(--ink-3);letter-spacing:0;line-height:1}
.brand .mk{width:34px;height:34px;flex:none}
.tabs{position:relative;display:flex;gap:2px;padding:4px;border-radius:999px;background:#fff;box-shadow:var(--sh);margin:0 auto}
.tabs .ind{position:absolute;left:0;top:0;border-radius:999px;background:var(--b-ll);pointer-events:none;will-change:transform,width}
.tabs a{position:relative;z-index:1;display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 16px;border-radius:999px;text-decoration:none;font-size:15px;font-weight:600;color:var(--ink-2);white-space:nowrap}
.tabs a[aria-current=page]{color:var(--b-dd);font-weight:750}
.tabs a svg.duo{width:22px;height:22px}
.acts{display:flex;align-items:center;gap:8px}
.lang{position:relative;display:flex;padding:3px;border-radius:999px;background:var(--soft)}
.lang .ind{position:absolute;left:0;top:0;border-radius:999px;background:#fff;box-shadow:0 2px 8px rgba(32,31,54,.1);pointer-events:none}
.lang button{position:relative;z-index:1;height:34px;min-width:42px;padding:0 10px;border-radius:999px;font-size:14px;font-weight:700;color:var(--ink-3)}
.lang button[aria-pressed=true]{color:var(--ink)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;border-radius:999px;font-size:16px;font-weight:700;white-space:nowrap;text-decoration:none;will-change:transform;user-select:none}
.btn.pri{background:var(--b);color:#fff;box-shadow:0 10px 24px -12px rgba(91,84,240,.7)}
.btn.pri:hover{background:var(--b-d)}
.btn.soft{background:var(--b-ll);color:var(--b-dd)}
.btn.soft:hover{background:var(--b-l)}
.btn.gray{background:var(--soft);color:var(--ink)}
.btn.gray:hover{background:#ebebf2}
.btn.ghost{color:var(--ink-2)}
.btn.ghost:hover{background:var(--soft)}
.btn.sm{height:40px;padding:0 16px;font-size:15px}
.btn.lg{height:58px;padding:0 28px;font-size:18px}
.btn.icon{width:44px;padding:0}
.btn[disabled]{opacity:.45;pointer-events:none}
.chip{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 15px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line);font-size:15px;font-weight:600;color:var(--ink-2);white-space:nowrap;will-change:transform}
.chip:hover{box-shadow:inset 0 0 0 1.5px var(--b-l);color:var(--ink)}
.chip[aria-pressed=true]{background:var(--b);color:#fff;box-shadow:none}
.chip .n{font-size:13px;font-weight:700;opacity:.7}
.chip svg.i{width:16px;height:16px}

/* ---------- surfaces ---------- */
.card{background:var(--card);border-radius:var(--r);box-shadow:var(--sh)}
.pad{padding:28px}
.tag{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 11px;border-radius:999px;font-size:13px;font-weight:700;background:var(--soft);color:var(--ink-2);white-space:nowrap}
.tag.b{background:var(--b-ll);color:var(--b-dd)}
.tag.ok{background:var(--ok-l);color:#08795f}
.tag.warn{background:var(--warn-l);color:#a24f00}
.tag.red{background:var(--red-l);color:#b4232a}
.tag svg.duo{width:18px;height:18px;margin-left:-4px}
.muted{color:var(--ink-2)}
.faint{color:var(--ink-3)}
.eyebrow{font-size:15px;font-weight:700;color:var(--b-d)}

/* segmented control with sliding blob */
.seg{position:relative;display:inline-flex;padding:4px;border-radius:999px;background:var(--soft)}
.seg .ind{position:absolute;left:0;top:0;border-radius:999px;background:#fff;box-shadow:0 2px 10px rgba(32,31,54,.1);pointer-events:none;will-change:transform,width}
.seg button{position:relative;z-index:1;height:40px;padding:0 18px;border-radius:999px;font-size:15px;font-weight:650;color:var(--ink-2);white-space:nowrap}
.seg button[aria-pressed=true]{color:var(--ink);font-weight:750}

/* inputs */
.field{display:flex;align-items:center;gap:10px;height:52px;padding:0 18px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line)}
.field:focus-within{box-shadow:inset 0 0 0 2px var(--b)}
.field input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:16px}
.field input::placeholder{color:var(--ink-3)}
.field svg.i{color:var(--ink-3)}
textarea.area{width:100%;border:0;border-radius:20px;background:var(--soft);padding:14px 16px;resize:vertical;min-height:84px;outline:0}
textarea.area:focus{box-shadow:inset 0 0 0 2px var(--b);background:#fff}
.check{display:flex;gap:10px;align-items:flex-start;font-size:15px;cursor:pointer}
.check input{width:22px;height:22px;accent-color:var(--b);margin:1px 0 0;flex:none}

/* rolling number */
.roll{display:inline-flex;align-items:flex-start;vertical-align:-.05em;height:1.2em;line-height:1.2em;overflow:hidden;font-variant-numeric:tabular-nums}
.roll .rc{display:block;height:1.2em;overflow:clip;margin:0!important;padding:0!important}
.roll .rs{display:block;will-change:transform}
.roll .rs i{display:block;font-style:normal;height:1.2em;line-height:1.2em;text-align:center}

/* expand panel */
.panel{overflow:hidden}

/* ---------- sheet / dialog ---------- */
.scrim{position:fixed;inset:0;z-index:80;background:rgba(32,31,54,.32);opacity:0;will-change:opacity}
.sheet{position:fixed;z-index:81;left:50%;top:50%;width:min(560px,calc(100vw - 32px));max-height:min(86vh,860px);display:flex;flex-direction:column;background:#fff;border-radius:32px;box-shadow:var(--sh-lg);will-change:transform,opacity;outline:0}
.sheet.wide{width:min(820px,calc(100vw - 32px))}
.sheet .sh-h{display:flex;align-items:flex-start;gap:12px;padding:26px 26px 6px}
.sheet .sh-h h2{font-size:24px;flex:1}
.sheet .sh-h p{font-size:15px;color:var(--ink-2);margin-top:6px}
.sheet .sh-b{padding:14px 26px 8px;overflow-y:auto;overscroll-behavior:contain;flex:1;min-height:0}
.sheet .sh-f{display:flex;gap:10px;padding:14px 26px calc(22px + var(--safe-b));justify-content:flex-end}
.sheet .grab{display:none}
.x{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--ink-2);background:var(--soft);flex:none}
.x:hover{background:#ebebf2}

/* ---------- toast ---------- */
.toast{width:max-content;position:fixed;left:50%;bottom:calc(24px + var(--safe-b));z-index:95;display:flex;align-items:center;gap:14px;padding:10px 10px 10px 20px;border-radius:999px;background:var(--ink);color:#fff;font-size:15px;font-weight:600;box-shadow:var(--sh-lg);will-change:transform,opacity;max-width:calc(100vw - 32px)}
.toast svg.duo{width:24px;height:24px}
.toast{pointer-events:none}.toast button{pointer-events:auto;height:36px;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.14);color:#fff;font-weight:700;font-size:14px}

/* ---------- coach (first visit tour) ---------- */
.ring{position:fixed;z-index:70;border-radius:24px;box-shadow:0 0 0 3px var(--b),0 0 0 9px rgba(91,84,240,.18);pointer-events:none;opacity:0;will-change:transform,width,height,opacity}
.coach{position:fixed;z-index:71;width:min(380px,calc(100vw - 24px));background:#fff;border-radius:28px;box-shadow:var(--sh-lg);padding:20px 20px 16px;will-change:transform,opacity}
.coach .ct{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700;color:var(--ink-3)}
.coach .ct .dots{display:flex;gap:5px;margin-right:auto}
.coach .ct .dots i{width:7px;height:7px;border-radius:9px;background:var(--line);transition:width .25s,background .25s}
.coach .ct .dots i.on{width:20px;background:var(--b)}
.coach h3{font-size:20px;margin:10px 0 6px}
.coach p{font-size:15px;color:var(--ink-2)}
.coach .cf{display:flex;gap:8px;margin-top:14px;justify-content:flex-end}
.coach .skip{height:44px;padding:0 12px;color:var(--ink-3);font-weight:600;font-size:14px}

/* ---------- mascot ---------- */
.eye{transform-box:fill-box;transform-origin:center;animation:blink 4.8s infinite}
@keyframes blink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}

/* ---------- footer ---------- */
.foot{margin-top:80px;padding:40px 0 calc(40px + var(--safe-b));font-size:14px;color:var(--ink-3)}
.foot .fl{display:flex;flex-wrap:wrap;gap:6px 18px;margin-bottom:16px}
.foot .fl button,.foot .fl a{font-size:14px;font-weight:650;color:var(--ink-2);text-decoration:none;padding:8px 0}
.foot .fl button:hover,.foot .fl a:hover{color:var(--ink)}
.foot p{line-height:1.8}

/* ---------- skeleton ---------- */
.skel{background:var(--soft);border-radius:18px;position:relative;overflow:hidden}
.skel::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);animation:shim 1.1s infinite;transform:translateX(-100%)}
@keyframes shim{to{transform:translateX(100%)}}

/* ---------- mobile ---------- */
.mnav{display:none}
@media (max-width:860px){
  :root{--top:60px}
  .top{padding:0 14px;gap:10px}
  .top .tabs{display:none}
  .brand{font-size:16px}
  .brand small{display:none}
  .brand{min-height:44px}
  .lang button{height:40px;min-width:46px}
  .wrap{padding:0 18px}
  .pad{padding:22px}
  .mnav{display:flex;position:fixed;left:12px;right:12px;bottom:calc(10px + var(--safe-b));z-index:45;padding:6px;border-radius:999px;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--sh-lg);will-change:transform}
  .mnav .ind{position:absolute;left:0;top:0;border-radius:999px;background:var(--b-ll);pointer-events:none}
  .mnav a{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;height:54px;border-radius:999px;text-decoration:none;font-size:12px;font-weight:700;color:var(--ink-3)}
  .mnav a svg.duo{width:24px;height:24px}
  .mnav a[aria-current=page]{color:var(--b-dd)}
  body{padding-bottom:calc(84px + var(--safe-b))}
  .sheet{left:0;right:0;top:auto;bottom:0;width:100%!important;max-height:calc(100dvh - 40px);border-radius:30px 30px 0 0}
  .sheet .grab{display:block;width:40px;height:5px;border-radius:9px;background:var(--line);margin:10px auto 0;flex:none}
  .sheet .sh-h{padding:14px 20px 4px}
  .sheet .sh-h h2{font-size:22px}
  .sheet .sh-b{padding:12px 20px 6px}
  .sheet .sh-f{padding:12px 20px calc(16px + var(--safe-b))}
  .sheet .sh-f .btn{flex:1}
  .toast{bottom:calc(94px + var(--safe-b));border-radius:24px}
  .coach{left:12px!important;right:12px;width:auto;bottom:calc(92px + var(--safe-b))!important;top:auto!important;max-height:40dvh;overflow:auto;padding:16px 18px 12px}
  .coach h3{font-size:18px}
}
@media (prefers-reduced-motion:reduce){.eye{animation:none}.skel::after{animation:none}}

/* 4개 사이트를 오갈 때 상단 탭이 좌우로 밀리지 않도록, 넓은 화면에서는 헤더 정중앙에 고정 */
@media (min-width:1280px){
  .top > nav.tabs, header nav.tabs.site-tabs{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0}
}
/* 탭 폭이 사이트·현재 탭에 따라 달라지지 않도록 모양을 고정(현재 탭은 굵기 대신 색으로 구분) */
.top > nav.tabs a, header nav.tabs.site-tabs a{height:40px!important;padding:0 16px!important;font-size:15px!important;font-weight:650!important;gap:7px!important;letter-spacing:-.012em!important}
.top > nav.tabs a svg.duo, header nav.tabs.site-tabs a svg.duo{width:22px!important;height:22px!important}
.top > nav.tabs, header nav.tabs.site-tabs{padding:4px!important;gap:2px!important}
/* 영어에서는 4개 사이트 상단 탭 모두 같은 짧은 이름(Home/Funding/Tracker/Proof) — 폭이 같아야 위치가 안 변한다 */
html[lang="en"] .top > nav.tabs a > span, html[lang="en"] header nav.tabs.site-tabs a > span{display:none!important}
html[lang="en"] .top > nav.tabs a::after, html[lang="en"] header nav.tabs.site-tabs a::after{content:attr(data-en-short);white-space:nowrap}
.top .acts{margin-left:auto}