:root{ --bg:#F2F4F6;--surface:#FFFFFF;--surface-2:#F2F4F6;--line:#E5E8EB;--ink:#191F28;--muted:#5B6572; --accent:#2463DB;--accent-soft:#EAF1FE;--up:#C9252B;--up-soft:#FDECEC;--down:#2463DB;--down-soft:#EAF1FE; --btn:#2F6FEB;--btn-ink:#FFFFFF;--focus:#2F6FEB;--shadow:none; color-scheme:light; } @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){ --bg:#0F1215;--surface:#161B20;--surface-2:#1F252B;--line:#262D34;--ink:#E8ECEF;--muted:#8B96A1; --accent:#4D8DFF;--accent-soft:#132544;--up:#FF6B70;--up-soft:#3A1A1C;--down:#4D8DFF;--down-soft:#132544; --btn:#3F7FF5;--btn-ink:#FFFFFF;--focus:#4DA3FF;--shadow:none;color-scheme:dark;}} :root[data-theme="dark"]{ --bg:#0F1215;--surface:#161B20;--surface-2:#1F252B;--line:#262D34;--ink:#E8ECEF;--muted:#8B96A1; --accent:#4D8DFF;--accent-soft:#132544;--up:#FF6B70;--up-soft:#3A1A1C;--down:#4D8DFF;--down-soft:#132544; --btn:#3F7FF5;--btn-ink:#FFFFFF;--focus:#4DA3FF;--shadow:none;color-scheme:dark;} *{box-sizing:border-box} html,body{margin:0;background:var(--bg);color:var(--ink);font-family:'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;line-height:1.5;-webkit-text-size-adjust:100%} a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline} .num{font-variant-numeric:tabular-nums;letter-spacing:-.2px} :focus-visible{outline:2px solid var(--focus);outline-offset:2px} .wrap{max-width:1200px;margin:0 auto;padding:0 20px} header.top{border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:saturate(180%) blur(12px);position:sticky;top:0;z-index:5} header.top .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px} .logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;color:var(--ink)} .logo svg:not(.brandmark){stroke:var(--accent)} nav.main{display:flex;gap:24px;font-size:15px} nav.main a{color:var(--muted)}nav.main a.on{color:var(--ink);font-weight:600} .tools{display:flex;align-items:center;gap:10px} .iconbtn{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer} .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:14px;border:none;background:var(--btn);color:var(--btn-ink);font:600 16px/1 inherit;font-family:inherit;cursor:pointer;text-decoration:none} .btn:hover{text-decoration:none;opacity:.92} .btn.big{min-height:64px;font-size:18px;width:100%} .btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)} .btn.go{background:var(--accent);color:#fff} .pill-btn{border-radius:999px;min-height:40px;padding:0 18px} .navlink{color:var(--muted);font-size:15px;padding:0 6px} .btn.small{min-height:40px;padding:0 14px;font-size:14px;border-radius:10px} .card{background:var(--surface);border:1px solid transparent;border-radius:24px;padding:24px;box-shadow:var(--shadow)} .muted{color:var(--muted)}.up{color:var(--up)}.down{color:var(--down)} .pill{display:inline-block;font-size:13px;font-weight:600;padding:5px 12px;border-radius:999px} .pill.run{background:var(--up-soft);color:var(--up)}.pill.stop{background:var(--surface-2);color:var(--muted)} .pill.demo{background:var(--accent-soft);color:var(--accent)} .grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px} .s7{grid-column:span 7}.s5{grid-column:span 5}.s4{grid-column:span 4}.s8{grid-column:span 8}.s6{grid-column:span 6}.s12{grid-column:span 12} .stack{display:flex;flex-direction:column;gap:16px} .row{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .between{justify-content:space-between} h1,h2,h3{margin:0;letter-spacing:-.3px} h1{font-size:44px;line-height:1.15}h2{font-size:28px}h3{font-size:18px} .big-num{font-size:42px;font-weight:600;letter-spacing:-1px} label.field{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:14px} input[type=text],input[type=email],input[type=password]{height:48px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:0 14px;font:15px inherit;font-family:inherit} .seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} .seg label{border:1px solid var(--line);border-radius:14px;padding:14px;cursor:pointer;display:flex;flex-direction:column;gap:2px;background:var(--surface)} .seg input{position:absolute;opacity:0} .seg label:has(input:checked){border:2px solid var(--accent);background:var(--accent-soft);padding:13px} .seg b{font-size:16px} .alert{border-radius:14px;padding:12px 16px;font-size:14px;background:var(--accent-soft);color:var(--ink)} .alert.err{background:var(--down-soft);color:var(--down)} table.pos{width:100%;border-collapse:collapse;font-size:15px} table.pos th{font-size:13px;color:var(--muted);font-weight:500;text-align:left;padding:8px 0;border-bottom:1px solid var(--line)} table.pos td{padding:12px 0;border-bottom:1px solid var(--surface-2)} .bar{height:8px;width:120px;background:var(--surface-2);border-radius:4px;overflow:hidden;display:inline-block;vertical-align:middle} .bar i{display:block;height:8px;border-radius:4px} .metric{display:grid;grid-template-columns:84px 1fr;gap:12px;padding:10px 0;border-top:1px solid var(--surface-2)} .metric .v{font-size:22px;font-weight:600;color:var(--accent)} .metric b{font-size:14px}.metric p{margin:2px 0 0;font-size:13px;color:var(--muted)} .feed a.item{display:block;padding:14px 16px;border:1px solid var(--line);border-radius:14px;color:var(--ink);background:var(--surface)} .feed a.item:hover{text-decoration:none;border-color:var(--accent)} .dark-panel{background:#191F28;color:#F2F4F6;border-radius:20px;padding:24px} :root[data-theme="dark"] .dark-panel{background:var(--surface-2)} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dark-panel{background:var(--surface-2)}} .dark-panel .muted{color:#A7B0BC} footer{border-top:1px solid var(--line);margin-top:64px;padding:32px 0;color:var(--muted);font-size:13px} dialog{border:1px solid var(--line);border-radius:20px;background:var(--surface);color:var(--ink);padding:24px;max-width:420px;width:calc(100% - 32px)} dialog::backdrop{background:rgba(0,0,0,.45)} .hero{padding:72px 0 40px} .steps{counter-reset:s} .step{display:grid;grid-template-columns:40px 1fr;gap:14px;padding:12px 0;border-top:1px solid var(--surface-2)} .step .n{width:32px;height:32px;border-radius:16px;background:var(--btn);color:var(--btn-ink);display:flex;align-items:center;justify-content:center;font-weight:600} .tabs{display:flex;gap:8px;flex-wrap:wrap} .tabs button{min-height:40px;padding:0 16px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:600 14px inherit;font-family:inherit;cursor:pointer} .tabs button[aria-selected="true"]{background:var(--btn);color:var(--btn-ink);border-color:var(--btn)} .hide{display:none} svg.curve{width:100%;height:120px} .bottomnav{display:none} @media (max-width:900px){ .s7,.s5,.s4,.s8,.s6{grid-column:span 12} h1{font-size:32px}.big-num{font-size:34px} nav.main{display:none} .bottomnav{display:flex;position:fixed;bottom:0;left:0;right:0;background:var(--surface);border-top:1px solid var(--line);z-index:6} .bottomnav a{flex:1;text-align:center;padding:12px 0 16px;font-size:13px;color:var(--muted)} .bottomnav a.on{color:var(--ink);font-weight:700} body.app main{padding-bottom:80px} .seg{grid-template-columns:1fr} .hide-m{display:none} } /* ---------- landing (reference: large centered headlines, rounded cards, soft sections) ---------- */ .lp h1{font-size:64px;line-height:1.2;font-weight:800;letter-spacing:-1.5px} .lp h2{font-size:48px;line-height:1.25;font-weight:800;letter-spacing:-1px} .lp .sub{font-size:22px;color:var(--muted);font-weight:500;margin:0} .lp section{padding:120px 0} .lp .center{text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px} .lp-hero{background:#0B0E14;color:#fff;min-height:calc(100vh - 64px);display:flex;align-items:center;overflow:hidden;position:relative} .lp-hero .sub{color:#B0B8C1} .lp-hero .wrap{position:relative;z-index:2} .orbits{position:absolute;inset:0;z-index:1;pointer-events:none} .coin{position:absolute;width:150px;height:150px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:30px;color:rgba(255,255,255,.92); box-shadow:inset -10px -14px 28px rgba(0,0,0,.35),inset 10px 12px 26px rgba(255,255,255,.25),0 30px 60px rgba(0,0,0,.45);animation:float 7s ease-in-out infinite} .coin.btc{background:radial-gradient(circle at 30% 30%,#FFC76B,#F29B19 55%,#8A4B00);left:9%;top:58%} .coin.eth{background:radial-gradient(circle at 30% 30%,#B9C3FF,#6A76E8 55%,#2B2F7A);left:24%;top:30%;width:110px;height:110px;font-size:24px;animation-delay:-2s} .coin.sol{background:radial-gradient(circle at 30% 30%,#9CFFE0,#2FC7A0 50%,#5B2BB8);right:12%;top:52%;animation-delay:-4s} .coin.usdt{background:radial-gradient(circle at 30% 30%,#9EF0C9,#26A17B 55%,#0B4D39);right:25%;top:24%;width:96px;height:96px;font-size:20px;animation-delay:-1s} .coin.sig{background:radial-gradient(circle at 30% 30%,#8FB7FF,#2F6FEB 55%,#0E2E78);left:46%;top:74%;width:84px;height:84px;font-size:18px;animation-delay:-3s} @keyframes float{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-18px) rotate(6deg)}} @media (prefers-reduced-motion:reduce){.coin{animation:none}} .lp-hero .btn{border-radius:999px;min-height:56px;padding:0 30px;font-size:17px} .lp-hero .note{color:#8B95A1;font-size:13px;margin-top:40px} .prodcards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;width:100%;margin-top:40px} .pc{border-radius:28px;overflow:hidden;background:var(--surface-2);text-align:left;display:flex;flex-direction:column} .pc .art{height:220px;display:flex;align-items:center;justify-content:center} .pc .txt{padding:26px 26px 30px;display:flex;flex-direction:column;gap:10px} .pc h3{font-size:22px}.pc p{margin:0;color:var(--muted);font-size:15px;line-height:1.6} .pc.dark{background:#191F28;color:#fff}.pc.dark p{color:#B0B8C1} .pc.blue{background:#2F63CF;color:#fff}.pc.blue p{color:#E6EEFF} .pc.blue .art{background:#4E82EA}.pc.dark .art{background:#111820} .lp-soft{background:linear-gradient(180deg,#EAF2FF 0%,#F5F9FF 60%,var(--surface) 100%)} :root[data-theme="dark"] .lp-soft{background:linear-gradient(180deg,#0F1A2E 0%,#0F1215 100%)} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .lp-soft{background:linear-gradient(180deg,#0F1A2E 0%,#0F1215 100%)}} .lp-white{background:var(--surface)} .phone{width:320px;border-radius:40px;background:var(--surface);border:10px solid #191F28;box-shadow:0 40px 80px rgba(25,31,40,.18);padding:22px 18px;display:flex;flex-direction:column;gap:12px;text-align:left;margin-top:48px} .phone .mini{background:var(--surface-2);border-radius:16px;padding:14px} .feature{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center} .feature .tag{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-size:14px;font-weight:600;background:var(--surface)} .feature h2{font-size:40px;margin:18px 0} .feature p{font-size:19px;line-height:1.7;color:var(--muted);margin:0} .feature .vis{display:flex;justify-content:center} .shield{width:260px;height:260px} .lvl{border-radius:28px;background:var(--surface-2);padding:32px;display:flex;flex-direction:column;gap:10px;text-align:left} .lvl.on{background:#191F28;color:#fff}.lvl.on .muted{color:#B0B8C1} .lvl .pct{font-size:44px;font-weight:800;letter-spacing:-1px} .cta-band{background:#191F28;color:#fff;border-radius:32px;padding:64px;display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center} .cta-band .sub{color:#B0B8C1} @media (max-width:900px){ .lp h1{font-size:38px}.lp h2{font-size:30px}.lp .sub{font-size:17px} .lp section{padding:72px 0} .prodcards{grid-template-columns:1fr 1fr} .feature{grid-template-columns:1fr;gap:32px}.feature h2{font-size:28px}.feature p{font-size:16px} .coin{width:72px;height:72px;font-size:15px;opacity:.9}.coin.eth,.coin.usdt,.coin.sig{display:none} .coin.btc{left:6%;top:8%}.coin.sol{right:6%;top:auto;bottom:6%} .cta-band{padding:40px 24px} .phone{width:280px} } @media (max-width:560px){.prodcards{grid-template-columns:1fr}} /* v4: language menu, charts, leverage, billing */ .langsel{position:relative} .langsel summary{list-style:none;height:40px;padding:0 10px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-size:14px} .langsel summary::-webkit-details-marker{display:none} .langmenu{position:absolute;right:0;top:46px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:6px;display:flex;flex-direction:column;min-width:140px;z-index:50;box-shadow:0 8px 24px rgba(0,0,0,.12)} .langmenu a{padding:8px 10px;border-radius:8px;color:var(--ink);text-decoration:none;font-size:14px} .langmenu a:hover,.langmenu a.on{background:var(--accent-soft)} .bizinfo{font-size:12px;color:var(--muted)} .chartbox{position:relative;width:100%;height:460px;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--surface)} .chartbox iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .tabs.small button{padding:6px 14px;font-size:14px} .levrow{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px} .levrow label{border:1px solid var(--line);border-radius:12px;padding:10px 0;text-align:center;cursor:pointer;background:var(--surface);font-weight:700} .levrow input{position:absolute;opacity:0} .levrow label:has(input:checked){border:2px solid var(--accent);background:var(--accent-soft);padding:9px 0} .seg.ex{grid-template-columns:repeat(4,minmax(0,1fr))} .plan .price{font-size:26px;font-weight:800} .plan .per{font-size:13px} @media (max-width:720px){.chartbox{height:360px}.seg.ex{grid-template-columns:repeat(2,minmax(0,1fr))}.levrow{grid-template-columns:repeat(3,minmax(0,1fr))}} .s3{grid-column:span 3} #pricing .lvl{padding:24px} #pricing .lvl .pct{font-size:30px} @media (max-width:1000px){.s3{grid-column:span 6}} @media (max-width:720px){.s3{grid-column:span 12}} .sr{position:absolute;opacity:0;width:1px;height:1px} .badge{display:inline-block;font-size:12px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--accent-soft);color:var(--accent);vertical-align:middle} .lvl.on .badge{background:rgba(255,255,255,.16);color:#fff} .pricing[data-period="y"] .pm,.pricing[data-period="m"] .py{display:none} .pct small{font-size:15px;font-weight:600;opacity:.7;margin-left:2px} .plancard{gap:8px} label.plancard{cursor:pointer;border:2px solid transparent} label.plancard:has(input:checked){border-color:var(--accent)} .feat{margin:6px 0 4px;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:14px} .cmp td,.cmp th{text-align:center}.cmp td:first-child,.cmp th:first-child{text-align:left} .oscard .here-badge{display:none} .oscard.here{border:2px solid var(--accent)} .oscard.here .here-badge{display:inline-block;align-self:flex-start} .exlinks{display:flex;gap:8px;flex-wrap:wrap} .pricing .lvl .pct{font-size:32px;white-space:nowrap;letter-spacing:-.5px} @media (max-width:1100px){.pricing .lvl .pct{font-size:28px}} .pricing .lvl.s3 .pct{font-size:24px} .pricing .lvl .pct small{display:inline-block} @media (max-width:1300px){.pricing .lvl.s3 .pct{font-size:22px;white-space:normal}} /* v5: market + screener */ .tablink{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-weight:600;font-size:14px;text-decoration:none} .tablink.on{background:var(--btn);color:var(--btn-ink);border-color:var(--btn)} .fngbar{position:relative;height:8px;border-radius:99px;background:linear-gradient(90deg,var(--down),#9aa4b2 50%,var(--up))} .fngbar i{position:absolute;top:-4px;width:4px;height:16px;border-radius:2px;background:var(--ink);transform:translateX(-2px)} .spark svg{display:block;width:100%;height:28px} .moverow{padding:6px 0;border-top:1px solid var(--line)} .moverow:first-of-type{border-top:0} .newsrow{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line);color:var(--ink);text-decoration:none} .newsrow:hover span:first-child{text-decoration:underline} .presets{display:flex;gap:8px;flex-wrap:wrap} .chip{padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);text-decoration:none;font-size:14px;font-weight:600} .chip.on{background:var(--accent);border-color:var(--accent);color:#fff} .scr th[data-sort]{cursor:pointer;user-select:none;white-space:nowrap} .scr th[aria-sort="ascending"]::after{content:" ▲";font-size:10px} .scr th[aria-sort="descending"]::after{content:" ▼";font-size:10px} .scr .r{text-align:right} .scr td,.scr th{white-space:nowrap} @media (max-width:720px){.newsrow{flex-direction:column;gap:2px}} input[type=search]{min-height:44px;padding:0 14px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-size:15px} .gstep{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:28px;align-items:center} .gnum{width:36px;height:36px;border-radius:50%;background:var(--accent);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:800} .gimg{margin:0} .gimg img{width:100%;height:auto;display:block;border-radius:16px;box-shadow:0 8px 28px rgba(0,0,0,.08)} @media (max-width:720px){.gstep{grid-template-columns:1fr;gap:12px}} .slider{width:100%;accent-color:var(--accent);height:28px;cursor:pointer} .numinput{flex:1;min-width:0;min-height:40px;padding:0 12px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit} button.chip{cursor:pointer;font-family:inherit} .seg.ex{grid-template-columns:repeat(4,minmax(0,1fr))!important} .seg.ex label{padding:12px 6px;align-items:center;text-align:center} .chartbox{height:640px} @media (max-width:720px){.chartbox{height:440px}.seg.ex label{padding:10px 2px}.seg.ex b{font-size:13px}} .langmenu{max-height:70vh;overflow-y:auto} [dir="rtl"] .langmenu{right:auto;left:0} .pricing .lvl .pct{white-space:normal;overflow-wrap:anywhere} .pricing .lvl .pct small{white-space:nowrap} .seg.ex label{justify-content:center;min-height:52px} .seg.ex label:has(input:checked){padding:11px 5px} @media (max-width:720px){.seg.ex label:has(input:checked){padding:9px 1px}} /* v5.2: equal-height columns */ .grid.eq{align-items:stretch} .grid.eq > .stack{min-height:100%} .fill{flex:1 1 auto} .sigscroll{max-height:1180px;overflow-y:auto;display:flex;flex-direction:column;gap:16px;padding-right:4px} .gtoolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px} .gtoolbar .sep{width:1px;height:24px;background:var(--line);margin:0 4px} @media (max-width:720px){.sigscroll{max-height:none;overflow:visible}} /* v5.3: language picker as a horizontal sub-category bar under the header */ .langsel .langmenu{position:fixed;left:0;right:0;top:var(--hdr-h,65px);min-width:0;max-height:none;border-radius:0;border-left:0;border-right:0; flex-direction:row;flex-wrap:nowrap;gap:4px;overflow-x:auto;padding:8px max(16px,calc((100vw - 1160px)/2));box-shadow:0 6px 16px rgba(0,0,0,.08);scrollbar-width:thin} .langsel .langmenu a{white-space:nowrap;padding:8px 12px;border-radius:999px;flex:0 0 auto} .langsel .langmenu a.on{background:var(--accent);color:#fff} [dir="rtl"] .langsel .langmenu{left:0;right:0} .logo span,.navlink,.tools .btn{white-space:nowrap} @media (max-width:480px){.tools .pill-btn{display:none}header.top .wrap{gap:8px}.tools{gap:6px}} /* floating consult buttons (follow the scroll) */ .consult{position:fixed;right:20px;bottom:24px;z-index:40;display:flex;flex-direction:column;gap:10px;align-items:flex-end} .consult-btn{display:flex;align-items:center;gap:8px;height:52px;padding:0 18px 0 14px;border-radius:999px;font-weight:700;font-size:14px;text-decoration:none;box-shadow:0 8px 24px rgba(0,0,0,.18);transition:transform .15s} .consult-btn:hover{transform:translateY(-2px)} .consult-btn svg{width:24px;height:24px;fill:currentColor} .consult-btn.kakao{background:#FEE500;color:#191919} .consult-btn.tg{background:#229ED9;color:#fff} [dir="rtl"] .consult{right:auto;left:20px} @media (max-width:720px){.consult{right:12px;bottom:84px}.consult-btn{width:52px;padding:0;justify-content:center}.consult-btn span{display:none}} /* mobile bottom nav with icons (v5.4) */ @media (max-width:900px){ main{padding-bottom:calc(84px + env(safe-area-inset-bottom))} .bottomnav{padding:6px 6px calc(6px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 -6px 20px rgba(0,0,0,.06)} .bottomnav a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0 4px;font-size:11px;font-weight:600;border-radius:14px;min-width:0;-webkit-tap-highlight-color:transparent;transition:color .15s} .bottomnav a span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} .bottomnav svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;padding:3px 14px;box-sizing:content-box;border-radius:999px;transition:background .15s,transform .15s} .bottomnav a.on{color:var(--accent)} .bottomnav a.on svg{background:color-mix(in srgb,var(--accent) 16%,transparent);stroke-width:2.1} .bottomnav a:active svg{transform:scale(.9)} .bottomnav a.cta{color:var(--accent)} .bottomnav a.cta svg{background:var(--accent);stroke:#fff} .consult{bottom:calc(92px + env(safe-area-inset-bottom));right:12px} .consult-btn{width:52px;padding:0;justify-content:center}.consult-btn span{display:none} } /* guest tour */ .tour-hero{background:linear-gradient(135deg,var(--accent-soft),var(--surface))} .tour-lock{margin-top:auto;display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:12px;border-radius:12px;border:1px dashed var(--line);font-size:13px;color:var(--muted)} .tour-reg{padding:8px 0;border-bottom:1px solid var(--line)} .tour-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px} .tour-links a.card{display:flex;flex-direction:column;gap:4px;color:var(--ink);text-decoration:none;transition:transform .15s} .tour-links a.card:hover{transform:translateY(-2px)} .tour-links a.card span{font-size:13px} .tour-links.locked a.card{opacity:.8;border-style:dashed} .lp-hero .btn.lp-ghost{color:#fff;border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.08)}.lp-hero .btn.lp-ghost:hover{background:rgba(255,255,255,.16)} /* v5.4.2: language bar fits the screen — 2 rows of 11 on desktop, wraps to more rows on small screens (no side scroll) */ .langsel .langmenu{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:6px;overflow:visible;flex-wrap:wrap; padding:10px max(16px,calc((100vw - 1160px)/2))} .langsel .langmenu a{text-align:center;overflow:hidden;text-overflow:ellipsis;padding:7px 4px;font-size:13px} @media (max-width:1000px){.langsel .langmenu{grid-template-columns:repeat(auto-fill,minmax(88px,1fr));max-height:calc(100vh - var(--hdr-h,65px) - 90px);overflow-y:auto}} @media (min-width:1001px){.langsel .langmenu{grid-template-columns:repeat(11,auto);justify-content:space-between;column-gap:4px} .langsel .langmenu a{padding:7px 10px}} .langsel .langmenu a{text-overflow:clip;white-space:nowrap} @media (max-width:1000px){.langsel .langmenu a{white-space:normal;line-height:1.25}} /* admin filters */ .filterbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .filterbar input[type=search],.filterbar select{height:36px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);padding:0 10px;font:inherit;font-size:14px} .filterbar input[type=search]{min-width:220px;flex:1 1 220px} .btn.danger{color:var(--up);border-color:color-mix(in srgb,var(--up) 40%,var(--line))} .admin-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} @media (max-width:720px){.admin-form{grid-template-columns:1fr}} label.field select,label.field input[type=number],label.field input[type=datetime-local]{height:48px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:0 14px;font:15px inherit;font-family:inherit;color-scheme:light dark} .report-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px} @media (max-width:1100px){.report-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:560px){.report-grid{grid-template-columns:1fr}} /* stats */ .kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px} .kpi{display:flex;flex-direction:column;gap:2px}.kpi b{font-size:26px} .small{font-size:12px} svg.chart{width:100%;height:180px;display:block} svg.chart .axis{stroke:var(--line);stroke-width:1} svg.chart .mark{fill:var(--accent)} svg.chart .hit{fill:transparent} svg.chart .bar:hover .mark{fill:color-mix(in srgb,var(--accent) 75%,var(--ink))} svg.chart .bar:hover .hit{fill:color-mix(in srgb,var(--accent) 8%,transparent)} svg.chart .tick{fill:var(--muted);font-size:11px;text-anchor:middle} /* blog / posts */ .post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px} .post-card{display:flex;flex-direction:column;gap:6px;color:var(--ink);text-decoration:none;transition:transform .15s} .post-card:hover{transform:translateY(-2px)} .post-card h2,.post-card h3{margin:0;font-size:18px;line-height:1.35} .post-card p{margin:0;font-size:14px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .crumbs{font-size:13px;color:var(--muted)}.crumbs a{color:var(--muted)} .prose{font-size:17px;line-height:1.8;word-break:keep-all} .prose h2{font-size:24px;margin:36px 0 12px}.prose h3{font-size:19px;margin:28px 0 10px} .prose p{margin:0 0 16px}.prose ul,.prose ol{margin:0 0 16px;padding-left:22px}.prose li{margin:4px 0} .prose table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:15px;display:block;overflow-x:auto} .prose th,.prose td{border-bottom:1px solid var(--line);padding:8px 10px;text-align:left;white-space:nowrap} .prose th{color:var(--muted);font-weight:600} .prose blockquote{margin:0 0 16px;padding:10px 16px;border-left:4px solid var(--accent);background:var(--accent-soft);border-radius:8px} .prose code{background:var(--surface-2);padding:1px 6px;border-radius:6px;font-size:.9em} .prose hr{border:0;border-top:1px solid var(--line);margin:28px 0} details.faq summary{cursor:pointer;font-weight:700;list-style:none} details.faq summary::-webkit-details-marker{display:none} details.faq summary::after{content:'+';float:right;color:var(--muted)} details.faq[open] summary::after{content:'−'} details.faq p{margin:10px 0 0;color:var(--muted)} .list-row{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;flex-wrap:wrap} .list-row:last-child{border-bottom:0} .list-row b{flex:1 1 200px} a.list-row:hover{background:var(--surface-2)} .textarea{border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:12px 14px;font:15px inherit;font-family:inherit;resize:vertical} .msg-bubble{max-width:760px}.msg-bubble.from-admin{border-left:4px solid var(--accent)} .cta-card{background:linear-gradient(135deg,var(--accent-soft),var(--surface))} .chart.track{height:200px}.chart.track .line{stroke:var(--accent)} /* onboarding stepper */ .onboard{padding:14px 18px;gap:8px} .onboard ol{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none;counter-reset:s} .onboard li a{display:flex;align-items:center;gap:8px;color:var(--muted);text-decoration:none;font-size:14px;font-weight:600;padding:6px 0;position:relative} .onboard .dot{flex:0 0 26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);color:var(--muted);font-size:13px} .onboard li.done a{color:var(--ink)}.onboard li.done .dot{background:var(--accent-soft);color:var(--accent)} .onboard li.now a{color:var(--accent)}.onboard li.now .dot{background:var(--accent);color:#fff;box-shadow:0 0 0 4px var(--accent-soft)} @media (max-width:640px){.onboard ol{grid-template-columns:repeat(2,minmax(0,1fr))}} /* dashboard summary strip */ .sumstrip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px} .sumstrip .card{padding:14px 16px;gap:2px;display:flex;flex-direction:column} .sumstrip b{font-size:22px} .sumstrip .coins{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px} .coinchip{font-size:12px;font-weight:700;padding:2px 8px;border-radius:99px;background:var(--surface-2);color:var(--muted)} .coinchip.l{background:var(--up-soft);color:var(--up)}.coinchip.s{background:var(--down-soft);color:var(--down)} @media (max-width:900px){.sumstrip{grid-template-columns:repeat(2,minmax(0,1fr))}} .ext-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}@media (max-width:760px){.ext-steps{grid-template-columns:1fr}} .sim-controls{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:end} @media (max-width:760px){.sim-controls{grid-template-columns:1fr}} .simchart{position:relative} #simSvg{width:100%;height:300px;display:block} #simSvg .line{fill:none;stroke:var(--accent);stroke-width:2;vector-effect:non-scaling-stroke} #simSvg .area{fill:var(--accent-soft);opacity:.7} #simSvg .base{stroke:var(--muted);stroke-dasharray:4 4;stroke-width:1;vector-effect:non-scaling-stroke} #simSvg .cross{stroke:var(--muted);stroke-width:1;vector-effect:non-scaling-stroke} #simSvg .dot{fill:var(--accent);stroke:var(--surface);stroke-width:2} #simSvg .hide{display:none} .simtip{position:absolute;top:-6px;background:var(--ink);color:var(--surface);font-size:12px;padding:4px 8px;border-radius:8px;white-space:nowrap;pointer-events:none} @media (max-width:720px){div[style*="overflow-x:auto"]>table.pos th,div[style*="overflow-x:auto"]>table.pos td{white-space:nowrap;padding-right:12px}} /* ---- live numbers & motion (v6.2) ---- */ .lv{display:inline-flex;align-items:baseline;gap:3px;border-radius:6px;padding:0 2px;margin:0 -2px;transition:background-color .6s ease,color .3s} .lv.flat{color:var(--muted)} .lv .arr{font-style:normal;font-size:.62em;line-height:1;transform:translateY(-.08em);display:inline-block} .lv.up .arr::before{content:"▲"}.lv.down .arr::before{content:"▼"} .lv.up .arr{animation:nudge-up 1.8s ease-in-out infinite}.lv.down .arr{animation:nudge-down 1.8s ease-in-out infinite} @keyframes nudge-up{0%,100%{transform:translateY(-.08em)}50%{transform:translateY(-.32em)}} @keyframes nudge-down{0%,100%{transform:translateY(-.08em)}50%{transform:translateY(.16em)}} .fl-up{animation:fl-up 1.2s ease-out}.fl-down{animation:fl-down 1.2s ease-out} @keyframes fl-up{0%{background:var(--up-soft);box-shadow:0 0 0 3px var(--up-soft)}100%{background:transparent;box-shadow:0 0 0 0 transparent}} @keyframes fl-down{0%{background:var(--down-soft);box-shadow:0 0 0 3px var(--down-soft)}100%{background:transparent;box-shadow:0 0 0 0 transparent}} .sumstrip .sumv{font-size:22px;font-weight:700} .livedot{display:inline-block;width:7px;height:7px;border-radius:50%;background:currentColor;margin-right:5px;vertical-align:middle;position:relative} .livedot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid currentColor;opacity:0;animation:ping 1.6s cubic-bezier(0,0,.2,1) infinite} @keyframes ping{0%{transform:scale(.4);opacity:.8}100%{transform:scale(1.4);opacity:0}} .livetag{font-size:11px;font-weight:800;letter-spacing:.08em;color:#FF6B70} .countdown{font-size:.62em;font-weight:600;color:var(--accent);margin-left:4px;font-variant-numeric:tabular-nums} .sigcard{position:relative;border-left:4px solid var(--line);padding-left:14px;animation:slide-in .6s ease-out} .sigcard.l{border-left-color:var(--up)}.sigcard.s{border-left-color:var(--down)} .sigcard.fresh{background:linear-gradient(90deg,var(--accent-soft),transparent 70%);border-radius:0 12px 12px 0;padding:10px 12px 6px 14px} .newbadge{position:absolute;top:-10px;right:0;font-size:10px;font-weight:800;color:#fff;background:var(--up);padding:2px 8px 2px 6px;border-radius:99px;display:inline-flex;align-items:center} .newbadge .livedot{width:6px;height:6px;margin-right:4px} @keyframes slide-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .sigcard .metric{animation:slide-in .5s ease-out both} .sigcard .metric:nth-child(3){animation-delay:.08s}.sigcard .metric:nth-child(4){animation-delay:.16s}.sigcard .metric:nth-child(5){animation-delay:.24s} .mkt{display:flex;flex-direction:column;gap:2px} .mrow{display:grid;grid-template-columns:62px 1fr auto;grid-template-areas:"n s p" "v v v";align-items:center;gap:4px 10px;padding:8px 0;border-top:1px solid rgba(255,255,255,.08)} .mrow:first-child{border-top:0} .mname{grid-area:n;display:flex;flex-direction:column;line-height:1.15}.mname .muted{font-size:10px} .mspark{grid-area:s;width:100%;height:36px} .mprice{grid-area:p;display:flex;flex-direction:column;align-items:flex-end;line-height:1.2} .mprice .tp{font-size:17px;border-radius:6px;padding:0 4px;margin-right:-4px;transition:color .4s} .mprice .tp.tick-up{color:#FF6B70;animation:fl-dark-up .9s ease-out}.mprice .tp.tick-down{color:#6FA2FF;animation:fl-dark-down .9s ease-out} @keyframes fl-dark-up{0%{background:rgba(255,107,112,.28)}100%{background:transparent}} @keyframes fl-dark-down{0%{background:rgba(77,141,255,.28)}100%{background:transparent}} .dark-panel .lv.up{color:#FF6B70}.dark-panel .lv.down{color:#6FA2FF}.dark-panel .lv{font-size:13px} .mvol{grid-area:v;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;font-size:12px} .vbar{height:4px;border-radius:4px;background:rgba(255,255,255,.12);overflow:hidden} .vbar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#4D8DFF,#8FB6FF);animation:grow 1s ease-out both;transform-origin:left} .vbar i.hot{background:linear-gradient(90deg,#FFB020,#FF6B70)} @keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}} table.pos .bar i{transition:width .8s cubic-bezier(.2,.8,.2,1);animation:grow .9s ease-out both;transform-origin:left} .curvebox{position:relative;min-height:170px} .curvebox svg{display:block;width:100%;height:170px;overflow:visible} .curvebox .cline{fill:none;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round} .curvebox .draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:draw 1.4s cubic-bezier(.3,.7,.2,1) forwards} @keyframes draw{to{stroke-dashoffset:0}} .curvebox .carea{opacity:0;animation:fadein .9s .5s ease-out forwards} @keyframes fadein{to{opacity:1}} .curvebox .grid-l{stroke:var(--line);stroke-width:1;stroke-dasharray:3 4} .curvebox .tick{font-size:11px;fill:var(--muted)} .curvebox .enddot{animation:fadein .3s 1.3s forwards;opacity:0} .curvebox .endring{transform-box:fill-box;transform-origin:center;animation:ring 1.8s 1.4s ease-out infinite;opacity:0} @keyframes ring{0%{transform:scale(.5);opacity:.7}100%{transform:scale(2.6);opacity:0}} .curvebox .chead{display:flex;gap:10px;align-items:baseline;font-size:13px;margin-bottom:4px;color:var(--muted)} .curvebox .ctip{position:absolute;pointer-events:none;background:var(--ink);color:var(--surface);font-size:12px;padding:6px 8px;border-radius:8px;white-space:nowrap;transform:translate(-50%,-120%);opacity:0;transition:opacity .15s} .curvebox .xh{stroke:var(--muted);stroke-width:1;opacity:0} @media (prefers-reduced-motion:reduce){.lv .arr,.livedot::after,.curvebox .endring,.sigcard,.sigcard .metric,.vbar i,table.pos .bar i{animation:none!important}.curvebox .draw{stroke-dasharray:none;animation:none}.curvebox .carea,.curvebox .enddot{opacity:1;animation:none}} /* app-coming-soon banner + popup */ .appbar{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding:8px 44px 8px 16px;background:linear-gradient(90deg,#1B3A8A,#2463DB);color:#fff;font-size:13px;position:relative;text-align:center} .appbar a{color:#fff;text-decoration:underline;font-weight:700} .appbar .stores{display:inline-flex;gap:6px} .storebadge{display:inline-flex;align-items:center;gap:6px;background:#0B0F16;color:#fff;border-radius:8px;padding:4px 10px;font-size:12px;font-weight:700;line-height:1.1;border:1px solid rgba(255,255,255,.18)} .storebadge svg{width:14px;height:14px;fill:currentColor} .storebadge small{display:block;font-size:9px;font-weight:500;opacity:.75} .appbar .x{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:0;color:#fff;font-size:20px;cursor:pointer;width:32px;height:32px} #appsoon{border:0;border-radius:22px;padding:0;max-width:380px;width:calc(100% - 32px);background:var(--surface);color:var(--ink)} #appsoon::backdrop{background:rgba(10,14,20,.55)} #appsoon .hero{background:linear-gradient(135deg,#0F1A33,#2463DB);color:#fff;padding:28px 24px 22px;text-align:center} #appsoon .hero img{width:72px;height:72px;border-radius:18px;box-shadow:0 8px 24px rgba(0,0,0,.35)} #appsoon .hero h3{margin:14px 0 4px;font-size:22px} #appsoon .body{padding:20px 24px 24px;display:flex;flex-direction:column;gap:12px} #appsoon .stores{display:flex;gap:8px;justify-content:center} #appsoon .storebadge{padding:8px 12px;font-size:14px} #appsoon .soon{display:inline-block;font-size:11px;font-weight:800;background:#FFB020;color:#1A1200;padding:2px 8px;border-radius:99px;margin-top:6px} @media (max-width:720px){.appbar{font-size:12px;gap:6px;padding:6px 40px 6px 10px}.appbar .storebadge{padding:3px 7px;font-size:11px}.appbar .storebadge small{display:none}.appbar a{flex-basis:100%;font-size:11px}} .tline{display:block;margin-top:4px}.tline b{color:var(--ink)} .tlast{display:block;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tp-c{color:var(--up);font-weight:600}.sl-c{color:var(--down);font-weight:600} .posline{display:block;margin-top:4px;color:var(--muted)} .small{font-size:12px} .demofunds summary{display:flex;gap:12px;align-items:center;cursor:pointer;list-style:none} .demofunds summary::-webkit-details-marker{display:none} .demofunds summary::after{content:"▾";margin-left:auto;color:var(--muted);transition:transform .2s} .demofunds[open] summary::after{transform:rotate(180deg)} .demofunds .df-ic{font-size:26px} .demofunds[open]{border:2px solid var(--accent)} .dfsteps{counter-reset:df;list-style:none;padding:0;margin:14px 0;display:grid;gap:10px} .dfsteps li{counter-increment:df;display:grid;grid-template-columns:30px 1fr;column-gap:10px} .dfsteps li::before{content:counter(df);grid-row:span 2;width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center} .dfsteps p{margin:2px 0 0;font-size:13px} .alert.warn{background:#FFF4DB;color:#5A3B00} :root[data-theme="dark"] .alert.warn{background:#3A2C0C;color:#FFE0A3} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .alert.warn{background:#3A2C0C;color:#FFE0A3}} /* learn cards + start banner + /start hub */ .learn3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} @media (max-width:860px){.learn3{grid-template-columns:1fr}} .lcard{position:relative;display:flex;flex-direction:column;gap:8px;padding:26px 24px 22px;border-radius:22px;text-decoration:none;color:#fff;overflow:hidden;min-height:250px;transition:transform .2s,box-shadow .2s;box-shadow:0 10px 30px rgba(20,40,90,.15)} .lcard:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(20,40,90,.25);text-decoration:none} .lcard.c1{background:linear-gradient(140deg,#2463DB,#5B8DEF)} .lcard.c2{background:linear-gradient(140deg,#111827,#334155)} .lcard.c3{background:linear-gradient(140deg,#B42318,#E0383E)} .lcard::after{content:"";position:absolute;right:-40px;bottom:-40px;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,.08)} .lstep{font-size:11px;font-weight:800;letter-spacing:.12em;opacity:.8} .licon svg{width:40px;height:40px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .lcard h3{margin:4px 0 0;font-size:22px;color:#fff} .lcard p{margin:0;font-size:14px;opacity:.9;line-height:1.55} .lgo{margin-top:auto;font-weight:700;font-size:14px;background:rgba(255,255,255,.18);align-self:flex-start;padding:8px 14px;border-radius:99px} .startbanner{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:18px 22px;border-radius:18px;background:linear-gradient(90deg,#FFF4DB,#FFE7B3);color:#3D2A00;text-decoration:none;box-shadow:0 6px 20px rgba(160,110,0,.12);border:1px solid #F5D48A} .startbanner:hover{text-decoration:none;transform:translateY(-1px)} .sb-badge{display:inline-block;background:#FFB020;color:#1A1200;font-weight:800;font-size:12px;padding:4px 10px;border-radius:99px} .sb-text{display:flex;flex-direction:column;flex:1;min-width:200px}.sb-text b{font-size:17px}.sb-text span{font-size:13px;opacity:.8} .sb-go{font-weight:800;background:#1A1200;color:#FFE7B3;padding:9px 16px;border-radius:99px;font-size:14px} .start-hero{background:linear-gradient(135deg,#0F1A33,#2463DB);color:#fff;padding:64px 0 56px} .start-hero h1{color:#fff;margin:0}.start-hero .sub{color:#D6E2FF} .checklist{list-style:none;padding:0;margin:0;display:grid;gap:12px} .checklist li{display:flex;gap:12px;align-items:flex-start} .checklist .ck{flex:none;width:26px;height:26px;border-radius:50%;background:var(--up-soft);color:var(--up);font-weight:800;display:flex;align-items:center;justify-content:center} .checklist p{margin:2px 0 0;font-size:14px} .startcta{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:28px;border-radius:22px;background:var(--accent-soft)} .startcta h2{margin:0;font-size:22px}.startcta p{margin:4px 0 0;color:var(--muted)} nav.main a.hl{position:relative;color:var(--accent);font-weight:700} nav.main a.hl::after{content:"";position:absolute;top:-2px;right:-8px;width:6px;height:6px;border-radius:50%;background:#FFB020} .sumstrip .tline b,.sumstrip .tlast b,.sumstrip .posline b{font-size:inherit;font-weight:700} .sumstrip .tline b{font-size:14px} .cardpx{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:13px;padding:6px 10px;border-radius:10px;background:var(--surface-2)} .cardpx b{font-weight:700} /* ---- logo light sweep (v6.5) ---- */ .logo-mark{position:relative;display:inline-grid;place-items:center;overflow:hidden;border-radius:6px} .logo-mark::after{content:"";position:absolute;inset:-30%;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.85) 50%,transparent 60%);transform:translateX(-130%);animation:logo-mark-sweep 4.5s ease-in-out infinite 1s} .logo-text{position:relative;display:inline-block} .logo-text::after{content:attr(data-text);position:absolute;inset:0;pointer-events:none;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; background-image:linear-gradient(105deg,transparent 0%,transparent 40%,rgba(255,255,255,.95) 50%,transparent 60%,transparent 100%);background-size:260% 100%;background-repeat:no-repeat;background-position:180% 0; animation:logo-sweep 4.5s ease-in-out infinite 1.15s} :root[data-theme="light"] .logo-text::after,:root:not([data-theme]) .logo-text::after{background-image:linear-gradient(105deg,transparent 0%,transparent 40%,rgba(143,182,255,1) 47%,rgba(255,255,255,1) 50%,rgba(143,182,255,1) 53%,transparent 60%,transparent 100%)} @keyframes logo-sweep{0%{background-position:180% 0}30%,100%{background-position:-80% 0}} @keyframes logo-mark-sweep{0%{transform:translateX(-130%)}22%,100%{transform:translateX(130%)}} @media (prefers-reduced-motion:reduce){.logo-text::after,.logo-mark::after{animation:none;opacity:0}} .introvid{position:relative;max-width:1080px;width:100%;margin:0 auto;border-radius:22px;overflow:hidden;box-shadow:0 24px 60px rgba(15,26,51,.28);background:#070B16;aspect-ratio:16/9} .introvid video{display:block;width:100%;height:100%;object-fit:cover} .vidbtn{position:absolute;right:14px;bottom:14px;width:42px;height:42px;border-radius:50%;border:0;background:rgba(7,11,22,.6);color:#fff;font-size:14px;cursor:pointer} .vidbtn:focus-visible{outline:2px solid #fff} /* admin live + pnl */ .livetable td{vertical-align:middle;padding-right:14px} .stdot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;background:var(--line)} .st-online .stdot{background:#1FA463;box-shadow:0 0 0 4px rgba(31,164,99,.18);animation:ping-soft 1.6s infinite} .st-away .stdot{background:#FFB020}.st-idle .stdot{background:#8FA3C8} .st-off{opacity:.6} @keyframes ping-soft{0%,100%{box-shadow:0 0 0 2px rgba(31,164,99,.3)}50%{box-shadow:0 0 0 6px rgba(31,164,99,.05)}} .tabs a{text-decoration:none} .pnltable td,.pnltable th{padding-right:14px;white-space:nowrap} .pnltable .r{text-align:right} .spark.up{color:var(--up)}.spark.down{color:var(--down)}.spark svg{width:100%;height:100%} svg.pnlbars{width:100%;min-width:520px;height:auto} svg.pnlbars .axis{stroke:var(--line)} svg.pnlbars .lab{font-size:12px;fill:var(--ink)} svg.pnlbars .tick{font-size:11px;fill:var(--muted)} svg.pnlbars .val{font-size:12px;font-weight:700} svg.pnlbars .b.up{fill:var(--up)}svg.pnlbars .b.down{fill:var(--down)}svg.pnlbars .b.flat{fill:var(--line)} svg.pnlbars .val.up{fill:var(--up)}svg.pnlbars .val.down{fill:var(--down)}svg.pnlbars .val.flat{fill:var(--muted)} .start-hero .wrap{text-align:center;align-items:center} .btn.faqbtn{background:rgba(255,107,112,.1);color:#FF6B70;border:2px solid #FF6B70;font-weight:700} .btn.faqbtn:hover{background:#FF6B70;color:#fff;text-decoration:none} .tabs a{display:inline-flex;align-items:center;min-height:34px;padding:0 12px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-weight:600;font-size:13px} .tabs a.on{background:var(--btn);color:var(--btn-ink);border-color:var(--btn)} .tabs.small{display:inline-flex;gap:6px;flex-wrap:wrap} .pinnote{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:16px 20px;border-radius:16px;border:2px solid #FF6B70;background:color-mix(in srgb,#FF6B70 8%,var(--card,#fff));color:inherit;text-decoration:none} .pinnote:hover{box-shadow:0 6px 20px rgba(255,107,112,.18)} .pinnote .pin{flex:none;background:#E5484D;color:#fff;font-weight:700;font-size:13px;border-radius:99px;padding:4px 12px} .pinnote .pn-body{flex:1;min-width:220px;display:flex;flex-direction:column;gap:2px} .pinnote .pn-body b{font-size:17px}.pinnote .pn-go{font-weight:700;color:#E5484D} /* v6.6 performance "why" report */ .whykpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px} .whykpi>div{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:14px;background:var(--bg-soft,rgba(36,99,219,.05))} .whykpi b{font-size:22px} .whysum{padding:14px 18px;border-radius:14px;background:var(--accent-soft);line-height:1.65} .whysum ul{margin:6px 0 0;padding-left:18px}.whysum li{margin:3px 0} .whychart{overflow-x:auto}.whysvg{width:100%;height:auto;min-width:320px;display:block} .whysvg .zero{stroke:var(--line,#DCE3EF);stroke-dasharray:4 4}.whysvg .tick{font-size:11px;fill:var(--muted)} .whysvg .ln{fill:none;stroke-width:2.2}.whysvg .ln.up{stroke:var(--up)}.whysvg .ln.down{stroke:var(--down)}.whysvg .ln.flat{stroke:var(--muted)} .whysvg .area{stroke:none;opacity:.10}.whysvg .area.up{fill:var(--up)}.whysvg .area.down{fill:var(--down)}.whysvg .area.flat{fill:none} .whysvg .dot{stroke:var(--card,#fff);stroke-width:2}.whysvg .dot.up{fill:var(--up)}.whysvg .dot.down{fill:var(--down)} .whygrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px} .wbar{display:grid;grid-template-columns:minmax(90px,1.1fr) 1.4fr auto;align-items:center;gap:8px;font-size:14px} .wbar .wl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wbar .wl .muted{font-size:12px} .wtrack{position:relative;height:12px;border-radius:6px;background:var(--bg-soft,rgba(0,0,0,.04))} .wtrack::before{content:"";position:absolute;left:50%;top:-2px;bottom:-2px;width:1px;background:var(--line,#DCE3EF)} .wtrack i{position:absolute;left:50%;top:0;bottom:0;border-radius:0 6px 6px 0;min-width:2px} .wtrack i.neg{left:auto;right:50%;border-radius:6px 0 0 6px} .wtrack i.up{background:var(--up)}.wtrack i.down{background:var(--down)} .whytbl{width:100%;border-collapse:collapse;font-size:13.5px} .whytbl th,.whytbl td{padding:8px 10px;border-bottom:1px solid var(--line,#DCE3EF);text-align:left;white-space:nowrap} .whytbl th{font-weight:600;color:var(--muted);font-size:12.5px} .tablewrap{overflow-x:auto} .pinnote,.pinnote *{text-decoration:none!important} .wbar{grid-template-columns:minmax(120px,1.4fr) 1.2fr auto} /* v6.7 full-width intro video */ #video .introvid.full{max-width:none;width:100%;margin:20px 0 0;border-radius:0;box-shadow:none} /* v6.7 AI help chatbot */ .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .consult-btn.aibot{background:linear-gradient(135deg,#2463DB,#6E4BFF);color:#fff;border:0;font:inherit;font-weight:700;font-size:14px;cursor:pointer} .consult-btn.aibot:focus-visible{outline:3px solid #9DB9FF;outline-offset:2px} .helpbot{position:fixed;right:20px;bottom:24px;z-index:60;width:min(380px,calc(100vw - 24px));height:min(560px,calc(100vh - 110px));display:flex;flex-direction:column;background:var(--surface,#fff);color:var(--ink);border:1px solid var(--line,#DCE3EF);border-radius:20px;box-shadow:0 24px 60px rgba(15,26,51,.28);overflow:hidden} .helpbot .hb-head{display:flex;align-items:center;gap:10px;padding:14px 16px;background:linear-gradient(135deg,#2463DB,#6E4BFF);color:#fff} .helpbot .hb-head div{flex:1;display:flex;flex-direction:column;line-height:1.3}.helpbot .hb-head span{font-size:12px;opacity:.85} .hb-av{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.2);display:grid;place-items:center;font-weight:800;font-size:13px} .hb-x{background:none;border:0;color:#fff;font-size:26px;line-height:1;cursor:pointer;padding:2px 6px} .hb-log{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;font-size:14px} .hb-msg{max-width:86%;padding:10px 12px;border-radius:14px;line-height:1.55;white-space:pre-wrap;word-break:break-word} .hb-msg.bot{background:var(--accent-soft,#E6EDFA);align-self:flex-start;border-bottom-left-radius:4px} .hb-msg.me{background:var(--accent,#2463DB);color:#fff;align-self:flex-end;border-bottom-right-radius:4px} .hb-msg.wait{opacity:.7} .hb-msg a{color:inherit;text-decoration:underline} .hb-sugs{display:flex;flex-wrap:wrap;gap:6px} .hb-sugs button{font:inherit;font-size:12.5px;padding:6px 10px;border-radius:99px;border:1px solid var(--line,#DCE3EF);background:var(--surface,#fff);color:var(--accent,#2463DB);cursor:pointer} .hb-form{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--line,#DCE3EF)} .hb-form input{flex:1;min-width:0;font:inherit;padding:10px 12px;border-radius:12px;border:1px solid var(--line,#DCE3EF);background:var(--bg,#fff);color:var(--ink)} .hb-note{margin:0;padding:0 12px 10px;font-size:11px;color:var(--muted)} [dir="rtl"] .helpbot{right:auto;left:20px} @media (max-width:720px){.helpbot{right:12px;bottom:84px;height:min(520px,calc(100vh - 160px))}.consult-btn.aibot{width:52px;padding:0;justify-content:center}} .helpbot[hidden]{display:none!important} /* v6.8 premium probabilities */ nav.main a.prem{color:#B7791F;font-weight:700} nav.main a.prem.on{color:#975A16} .prem-badge{align-self:flex-start;font-size:11px;font-weight:800;letter-spacing:.12em;padding:3px 10px;border-radius:99px;background:linear-gradient(135deg,#F6C453,#D69E2E);color:#3B2A05} .ptable{width:100%;border-collapse:collapse;font-size:14px} .ptable th,.ptable td{padding:10px 8px;text-align:center;border-bottom:1px solid var(--line,#DCE3EF);white-space:nowrap} .ptable th{font-size:12.5px;color:var(--muted);font-weight:600} .ptable th small{display:block;font-weight:400;font-size:10.5px} .ptable td:first-child,.ptable th:first-child{text-align:left;padding-left:16px} .ptable td:first-child small{display:block;font-size:11.5px} .ptable td:first-child a{color:inherit;text-decoration:none} .ptable td.comb{background:var(--accent-soft)} .pcell{position:relative;display:inline-flex;flex-direction:column;align-items:center;min-width:54px;padding:4px 6px 7px;border-radius:10px;line-height:1.15} .pcell b{font-size:15px}.pcell small{font-size:10.5px;font-weight:600} .pcell i{position:absolute;left:6px;right:6px;bottom:3px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--up) var(--p,50%),var(--down) var(--p,50%))} .pcell.L{background:color-mix(in srgb,var(--up) 12%,transparent);color:var(--up)} .pcell.S{background:color-mix(in srgb,var(--down) 12%,transparent);color:var(--down)} .pcell.N{color:var(--muted)}.pcell.X{color:var(--muted)} .plegend .pcell{min-width:18px;height:14px;padding:0;vertical-align:middle} .pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px;align-items:start} .pdet summary{cursor:pointer;display:flex;gap:10px;align-items:center;flex-wrap:wrap} .ptf{display:flex;flex-direction:column;gap:6px;padding-top:8px;border-top:1px solid var(--line,#DCE3EF)} .pbar{display:flex;height:22px;border-radius:8px;overflow:hidden;font-size:11.5px;font-weight:700;color:#fff} .pbar span{display:flex;align-items:center;padding:0 8px;white-space:nowrap;overflow:hidden;min-width:0} .pbar .l{background:var(--up)}.pbar .s{background:var(--down);justify-content:flex-end} .rsn{display:flex;flex-wrap:wrap;gap:5px} .rs{font-size:11.5px;padding:2px 8px;border-radius:99px;background:var(--bg-soft,rgba(0,0,0,.05))} .rs.L{color:var(--up)}.rs.S{color:var(--down)}.rs.N{color:var(--muted)} .prem-lock{position:relative;overflow:hidden} .prem-blur{filter:blur(5px);opacity:.55;pointer-events:none;user-select:none} .prem-cta{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:20px;background:color-mix(in srgb,var(--surface,#fff) 55%,transparent)} .prem-cta p{max-width:52ch} /* v6.8 site collection */ .lk-tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center} .lk-tools input{flex:1 1 260px;min-width:0;font:inherit;padding:10px 14px;border-radius:12px;border:1px solid var(--line,#DCE3EF);background:var(--surface,#fff);color:var(--ink)} .lk-chip{font:inherit;font-size:13px;padding:6px 12px;border-radius:99px;border:1px solid var(--line,#DCE3EF);background:var(--surface,#fff);color:var(--ink);cursor:pointer} .lk-chip[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:700} .lk-cnt{margin-left:auto} .lk-cat{display:flex;flex-direction:column;gap:10px} .lk-cat h3{margin:6px 0 0;font-size:18px}.lk-cat h3 small{color:var(--muted);font-weight:400;font-size:13px;margin-left:6px} .lk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px} .lk{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:14px;background:var(--surface,#fff);border:1px solid var(--line,#DCE3EF);color:inherit;text-decoration:none;transition:border-color .15s,transform .15s} .lk:hover{border-color:var(--accent);transform:translateY(-1px)} .lk.must{border:2px solid #E5484D} .lk-ic{flex:none;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-weight:700;color:#fff} .lk-b{display:flex;flex-direction:column;gap:2px;min-width:0}.lk-b b{font-size:15px}.lk-b .muted{font-size:13px;line-height:1.45} .lk-tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:2px} .lk-tags em{font-style:normal;font-size:11px;padding:1px 7px;border-radius:99px;background:var(--accent-soft);color:var(--accent)} .lk-tags .t-must{background:#FDECEC;color:#E5484D}.lk-tags .t-kr{background:#E8F5EE;color:#1F7A4D}.lk-tags .t-gl{background:#EEF0F4;color:#4A5568} .lk[hidden],.lk-cat[hidden]{display:none!important} nav.main a{white-space:nowrap} @media (max-width:1320px) and (min-width:901px){nav.main{gap:12px}nav.main a{font-size:14px}} /* v6.8 new wordmark: 시그널 ─╱╲─● 노트 + SIGNAL·NOTE·LAB, live pulse */ .wm{display:inline-flex;flex-direction:column;align-items:stretch;gap:1px;line-height:1} .wm-row{display:inline-flex;align-items:center;gap:2px} .wm-row b{font-size:21px;font-weight:900;letter-spacing:-.04em;color:var(--ink)} .wm-pulse{width:40px;height:21px;overflow:visible;margin:0 1px} .wm-pulse path{stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round} .wm-pulse .base{stroke:#E5484D;opacity:.28} .wm-pulse .run{stroke:#E5484D;stroke-dasharray:38 62;stroke-dashoffset:100;animation:wm-run 1.8s cubic-bezier(.45,.05,.55,.95) infinite} .wm-pulse .dot{fill:#E5484D;animation:wm-beat 1.8s ease-out infinite} .wm-pulse .halo{fill:#E5484D;opacity:.22;transform-box:fill-box;transform-origin:center;animation:wm-halo 1.8s ease-out infinite} .wm-tag{font-size:7.5px;font-weight:800;letter-spacing:.42em;color:#E5484D;text-align:center;padding-left:.42em;white-space:nowrap} @keyframes wm-run{0%{stroke-dashoffset:100}70%,100%{stroke-dashoffset:-38}} @keyframes wm-beat{0%,62%{transform:none}72%{opacity:1}} @keyframes wm-halo{0%,60%{transform:scale(.6);opacity:.35}100%{transform:scale(1.7);opacity:0}} @media (prefers-reduced-motion:reduce){.wm-pulse .run{animation:none;stroke-dasharray:none;stroke-dashoffset:0}.wm-pulse .halo{animation:none}} .dark-panel .wm-row b,:root[data-theme="dark"] .wm-row b{color:#fff} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .wm-row b{color:#fff}} @media (max-width:480px){.wm-row b{font-size:18px}.wm-pulse{width:34px;height:18px}.wm-tag{font-size:6.5px}} /* v6.8 app bar highlight */ .ab-hl{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:14px} .ab-live{width:8px;height:8px;border-radius:50%;background:#FFD43B;box-shadow:0 0 0 0 rgba(255,212,59,.7);animation:ab-ping 1.6s ease-out infinite} .ab-txt{background:linear-gradient(90deg,#fff 0%,#fff 35%,#FFE066 50%,#fff 65%,#fff 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:ab-shine 3.2s linear infinite;text-shadow:0 0 18px rgba(255,224,102,.25)} @keyframes ab-ping{0%{box-shadow:0 0 0 0 rgba(255,212,59,.7)}80%,100%{box-shadow:0 0 0 9px rgba(255,212,59,0)}} @keyframes ab-shine{0%{background-position:100% 0}100%{background-position:-150% 0}} @media (prefers-reduced-motion:reduce){.ab-live,.ab-txt{animation:none}.ab-txt{color:#fff;background:none}} @media (max-width:720px){.ab-hl{font-size:12.5px}} /* v6.8 consult buttons: equal width */ @media (min-width:721px){.consult{align-items:stretch}.consult-btn{width:190px;justify-content:flex-start;box-sizing:border-box}} /* v6.8 stake (seed money in the market) */ .stakeline{display:block;margin-top:6px;padding-top:6px;border-top:1px dashed var(--line,#DCE3EF)} .stakebar{display:flex;flex-direction:column;gap:5px;max-width:520px} .sb-track{display:block;height:8px;border-radius:99px;background:var(--bg-soft,rgba(0,0,0,.06));overflow:hidden} .sb-track i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#F59E0B,#E5484D);min-width:2px} .stakeline b{font-size:13px!important;font-weight:700} .stakebar{max-width:380px} @media (min-width:721px){.consult-btn{width:auto;padding:0 18px 0 16px;justify-content:center}} /* v6.9 premium visual cards */ .pg-hero{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:12px} .pg-hero>div{display:flex;flex-direction:column;justify-content:center;gap:6px;padding:16px 18px;border-radius:16px;background:var(--surface,#fff);border:1px solid var(--line,#DCE3EF);min-height:96px;box-sizing:border-box} .pg-hero b{font-size:28px;line-height:1.1} .pg-count.up b{color:var(--up)}.pg-count.down b{color:var(--down)} .pg-split{display:flex;height:10px;border-radius:99px;overflow:hidden;background:var(--line,#DCE3EF)} .pg-split i{display:block;height:100%;animation:pg-grow .9s cubic-bezier(.2,.8,.2,1) both;transform-origin:left} .pg-split .l{background:var(--up)}.pg-split .s{background:var(--down);transform-origin:right} .pg-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;align-items:stretch} .pg-card{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:18px;background:var(--surface,#fff);border:1px solid var(--line,#DCE3EF);color:inherit;text-decoration:none;position:relative;overflow:hidden;box-sizing:border-box; animation:pg-in .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 25ms);transition:transform .15s,box-shadow .15s} .pg-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(15,26,51,.12)} .pg-card::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--line,#DCE3EF)} .pg-card.L::before{background:var(--up)}.pg-card.S::before{background:var(--down)} .pg-card.hot.L{box-shadow:0 0 0 1px color-mix(in srgb,var(--up) 45%,transparent);animation:pg-in .5s both,pg-hotL 2.4s ease-in-out infinite .6s} .pg-card.hot.S{box-shadow:0 0 0 1px color-mix(in srgb,var(--down) 45%,transparent);animation:pg-in .5s both,pg-hotS 2.4s ease-in-out infinite .6s} .pg-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;min-height:24px} .pg-coin{font-size:18px} .pg-g{position:relative;height:96px} .pg-gauge{width:100%;height:96px;display:block;overflow:visible} .pg-gauge path{fill:none;stroke-width:10;stroke-linecap:round} .pg-gauge .trk{stroke:var(--line,#DCE3EF)} .pg-gauge .arc{stroke-dasharray:var(--len) 100;animation:pg-arc 1s cubic-bezier(.2,.8,.2,1) both} .pg-gauge .arc.L{stroke:var(--up)}.pg-gauge .arc.S{stroke:var(--down)} .pg-gauge .ndl{transform-origin:60px 62px;transform:rotate(var(--deg));animation:pg-ndl 1.2s cubic-bezier(.3,1.5,.5,1) both} .pg-gauge .ndl line{stroke:var(--ink);stroke-width:2.5;stroke-linecap:round} .pg-gauge .ndl circle{fill:var(--ink)} .pg-gauge .tk{font-size:8px;fill:var(--muted)} .pg-big{position:absolute;left:0;right:0;bottom:-4px;display:flex;flex-direction:column;align-items:center;line-height:1} .pg-big b{font-size:26px;background:var(--surface,#fff);padding:0 6px;border-radius:8px} .pg-big b small{font-size:14px} .pg-big span{font-size:12px;font-weight:700;margin-top:3px} .pg-card.L .pg-big b,.pg-card.L .pg-big span{color:var(--up)}.pg-card.S .pg-big b,.pg-card.S .pg-big span{color:var(--down)} .pg-card.N .pg-big span{color:var(--muted)} .pg-bars{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;padding-top:4px} .pb{display:flex;flex-direction:column;align-items:center;gap:3px} .pb-col{position:relative;width:100%;height:44px;border-radius:6px;background:var(--bg-soft,rgba(0,0,0,.04))} .pb-col::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line,#DCE3EF)} .pb-col i{position:absolute;left:18%;right:18%;height:calc(var(--h) / 2);min-height:2px;border-radius:3px;animation:pg-bar .8s cubic-bezier(.2,.8,.2,1) both} .pb-col i.u{bottom:50%;background:var(--up);transform-origin:bottom} .pb-col i.d{top:50%;background:var(--down);transform-origin:top} .pb em{font-style:normal;font-size:10.5px;color:var(--muted);white-space:nowrap} .pg-why{display:flex;flex-wrap:wrap;gap:5px;min-height:48px;align-content:flex-start} .pg-why span{font-size:11.5px;font-weight:600;padding:3px 8px;border-radius:99px;white-space:nowrap} .pg-why .L{background:color-mix(in srgb,var(--up) 12%,transparent);color:var(--up)} .pg-why .S{background:color-mix(in srgb,var(--down) 12%,transparent);color:var(--down)} .pg-why .N{background:var(--bg-soft,rgba(0,0,0,.05));color:var(--muted)} .pg-foot{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:8px;border-top:1px solid var(--line,#DCE3EF)} .pg-more{color:var(--accent);font-weight:700} .pg-tablebox summary{cursor:pointer;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap} @keyframes pg-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} @keyframes pg-arc{from{stroke-dasharray:0 100}} @keyframes pg-ndl{from{transform:rotate(-90deg)}} @keyframes pg-bar{from{transform:scaleY(0)}} @keyframes pg-grow{from{transform:scaleX(0)}} @keyframes pg-hotL{50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--up) 18%,transparent)}} @keyframes pg-hotS{50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--down) 18%,transparent)}} @media (max-width:720px){.pg-hero{grid-template-columns:1fr 1fr 1fr}.pg-temp{grid-column:1/-1}.pg-hero>div{min-height:0}.pg-hero b{font-size:22px}.pg-cards{grid-template-columns:1fr}} @media (prefers-reduced-motion:reduce){.pg-card,.pg-gauge .arc,.pg-gauge .ndl,.pb-col i,.pg-split i{animation:none!important}} .pg-settled .pg-card:not(.hot),.pg-settled .pg-gauge .arc,.pg-settled .pg-gauge .ndl,.pg-settled .pb-col i,.pg-settled .pg-split i{animation:none} .pg-settled .pg-card.hot.L{animation:pg-hotL 2.4s ease-in-out infinite}.pg-settled .pg-card.hot.S{animation:pg-hotS 2.4s ease-in-out infinite} .pg-card,.pg-card *{text-decoration:none!important} .pg-g{height:auto;display:flex;flex-direction:column;align-items:center;gap:2px} .pg-gauge{height:78px;max-width:190px} .pg-big{position:static;flex-direction:row;align-items:baseline;gap:8px} .pg-big b{background:none;padding:0;font-size:28px} .pg-card.N .pg-gauge .arc{stroke:var(--muted)} .pg-card.hot{border-color:transparent} .pg-card.hot.L,.pg-card.hot.S{box-shadow:none} @keyframes pg-hotL{0%,100%{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--up) 35%,transparent)}50%{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--up) 70%,transparent),inset 0 0 22px color-mix(in srgb,var(--up) 12%,transparent)}} @keyframes pg-hotS{0%,100%{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--down) 35%,transparent)}50%{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--down) 70%,transparent),inset 0 0 22px color-mix(in srgb,var(--down) 12%,transparent)}} /* v6.9 landing illustrations in motion */ .fx-brk .bars rect{transform-box:fill-box;transform-origin:bottom;animation:fx-rise 2.8s cubic-bezier(.2,.8,.2,1) infinite} .fx-brk .bars rect:nth-child(2){animation-delay:.12s}.fx-brk .bars rect:nth-child(3){animation-delay:.24s}.fx-brk .bars rect:nth-child(4){animation-delay:.36s} .fx-brk .ln{stroke-dasharray:100;animation:fx-draw 2.8s ease-in-out infinite} .fx-brk .tip{transform-box:fill-box;transform-origin:center;animation:fx-pop 2.8s ease-in-out infinite} .fx-brk .ring{transform-box:fill-box;transform-origin:center;animation:fx-ring 2.8s ease-out infinite} .fx-trend .main{stroke-dasharray:100;animation:fx-draw 3.2s ease-in-out infinite} .fx-trend .sub{stroke-dasharray:100;animation:fx-draw 3.2s ease-in-out infinite .35s} .fx-trend .runner{filter:drop-shadow(0 0 6px #4D8DFF)} .fx-time .b1{animation:fx-float 4s ease-in-out infinite} .fx-time .b2{animation:fx-float 4s ease-in-out infinite -1.3s} .fx-time .b3{animation:fx-float 4s ease-in-out infinite -2.6s} .fx-time .orbit{transform-origin:45px 65px;animation:fx-spin 14s linear infinite} .fx-time .sat{transform-origin:45px 65px;animation:fx-spin 6s linear infinite} .fx-rest .zz{stroke-dasharray:100;animation:fx-zz 3.4s ease-in-out infinite} .fx-rest .pause{transform-box:fill-box;transform-origin:center;animation:fx-pausebeat 3.4s ease-in-out infinite} .fx-phone{animation:fx-hover 5s ease-in-out infinite;position:relative;overflow:hidden} .fx-phone::after{content:"";position:absolute;inset:-20% -60%;background:linear-gradient(110deg,transparent 42%,rgba(255,255,255,.55) 50%,transparent 58%);transform:translateX(-70%);animation:fx-shine 6s ease-in-out infinite 1s;pointer-events:none} .fx-phone .metric{animation:fx-slide .6s cubic-bezier(.2,.8,.2,1) both} .fx-phone .metric:nth-of-type(2){animation-delay:.15s}.fx-phone .metric:nth-of-type(3){animation-delay:.3s} .fx-phone .pill.run::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;margin-right:5px;vertical-align:middle;animation:fx-blink 1.2s ease-in-out infinite} .fx-lvl{transition:transform .25s,box-shadow .25s;position:relative;overflow:hidden} .fx-lvl:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(15,26,51,.14)} .fx-lvl .pct{display:inline-block;animation:fx-slide .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--d) * .12s)} .fx-lvl.on::before{content:"";position:absolute;inset:-2px;border-radius:inherit;padding:2px;background:conic-gradient(from var(--a,0deg),transparent 0 70%,#4D8DFF 85%,#9CC0FF 92%,transparent 100%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:fx-conic 4s linear infinite;pointer-events:none} @property --a{syntax:'';inherits:false;initial-value:0deg} .fx-cta{position:relative;overflow:hidden;isolation:isolate} .fx-cta .cta-glow{position:absolute;width:520px;height:520px;left:50%;top:50%;margin:-260px 0 0 -260px;border-radius:50%;background:radial-gradient(circle,rgba(47,111,235,.45),transparent 65%);z-index:-1;animation:fx-glow 6s ease-in-out infinite} .fx-cta .cta-line{position:absolute;inset:0;width:100%;height:100%;z-index:-1;opacity:.5} .fx-cta .cta-line path{fill:none;stroke:#E5484D;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:30 70;animation:fx-run 4s linear infinite} .fx-cta .btn{animation:fx-btn 2.4s ease-out infinite} @keyframes fx-rise{0%{transform:scaleY(.15)}35%,100%{transform:scaleY(1)}} @keyframes fx-draw{0%{stroke-dashoffset:100}45%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-100}} @keyframes fx-pop{0%,40%{transform:scale(0)}55%{transform:scale(1.25)}65%,100%{transform:scale(1)}} @keyframes fx-ring{0%,50%{transform:scale(1);opacity:.8}100%{transform:scale(2.4);opacity:0}} @keyframes fx-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}} @keyframes fx-spin{to{transform:rotate(360deg)}} @keyframes fx-zz{0%{stroke-dashoffset:100}40%{stroke-dashoffset:0}100%{stroke-dashoffset:0}} @keyframes fx-pausebeat{0%,40%{transform:scale(.85);opacity:.5}50%{transform:scale(1.08);opacity:1}58%,100%{transform:scale(1);opacity:1}} @keyframes fx-hover{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}} @keyframes fx-shine{0%,60%{transform:translateX(-70%)}100%{transform:translateX(70%)}} @keyframes fx-slide{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} @keyframes fx-blink{50%{opacity:.25}} @keyframes fx-conic{to{--a:360deg}} @keyframes fx-glow{0%,100%{transform:translateX(-35%) scale(.9)}50%{transform:translateX(35%) scale(1.1)}} @keyframes fx-run{to{stroke-dashoffset:-100}} @keyframes fx-btn{0%{box-shadow:0 0 0 0 rgba(47,111,235,.6)}80%,100%{box-shadow:0 0 0 16px rgba(47,111,235,0)}} @media (prefers-reduced-motion:reduce){[class*="fx-"],[class*="fx-"] *,[class*="fx-"]::before,[class*="fx-"]::after{animation:none!important}} /* v6.9 gold crown above 프리미엄전용관 */ nav.main a.prem{position:relative;background:linear-gradient(90deg,#B7791F,#E9B949,#B7791F);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:crown-text 3.5s linear infinite} nav.main a.prem::before{content:"";position:absolute;left:50%;top:-13px;width:18px;height:12px;margin-left:-9px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23FFE27A'/%3E%3Cstop offset='1' stop-color='%23D69E2E'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M2 5l5 4 5-7 5 7 5-4-2 10H4z' fill='url(%23g)' stroke='%23B7791F' stroke-width='1' stroke-linejoin='round'/%3E%3Ccircle cx='2' cy='5' r='1.6' fill='%23FFE27A'/%3E%3Ccircle cx='12' cy='2' r='1.6' fill='%23FFE27A'/%3E%3Ccircle cx='22' cy='5' r='1.6' fill='%23FFE27A'/%3E%3C/svg%3E") center/contain no-repeat; filter:drop-shadow(0 1px 2px rgba(214,158,46,.55));animation:crown-bob 2.6s ease-in-out infinite} nav.main a.prem::after{content:"";position:absolute;left:50%;top:-14px;width:4px;height:4px;margin-left:3px;border-radius:50%;background:#fff;box-shadow:0 0 6px 2px #FFE27A;opacity:0;animation:crown-glint 2.6s ease-in-out infinite} .bottomnav a[href="/app/premium"] svg{color:#D69E2E;filter:drop-shadow(0 0 3px rgba(233,185,73,.6));animation:crown-bob 2.6s ease-in-out infinite} .bottomnav a[href="/app/premium"]{color:#B7791F} @keyframes crown-bob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-2px) rotate(4deg)}} @keyframes crown-glint{0%,55%,100%{opacity:0;transform:scale(.4)}65%{opacity:1;transform:scale(1.2)}75%{opacity:0;transform:scale(.4)}} @keyframes crown-text{to{background-position:-200% 0}} @media (prefers-reduced-motion:reduce){nav.main a.prem,nav.main a.prem::before,nav.main a.prem::after,.bottomnav a[href="/app/premium"] svg{animation:none}} /* v6.9 favorites */ .pg-toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap} .seg-links{display:inline-flex;gap:4px;padding:3px;border-radius:99px;background:var(--surface,#fff);border:1px solid var(--line,#DCE3EF)} .seg-links a{padding:6px 14px;border-radius:99px;font-size:13px;font-weight:600;color:var(--muted);text-decoration:none;white-space:nowrap} .seg-links a.on{background:var(--accent);color:#fff} .pg-wrap{display:flex;flex-direction:column;gap:14px} .pg-sec{margin:6px 0 0;font-size:17px;display:flex;align-items:baseline;gap:6px} .pg-name{display:inline-flex;align-items:center;gap:6px} .pg-star{border:0;background:none;padding:0 2px;font-size:20px;line-height:1;cursor:pointer;color:var(--muted);transition:transform .15s} .pg-star:hover{transform:scale(1.2)}.pg-star.on{color:#E9B949;text-shadow:0 0 8px rgba(233,185,73,.5)} .pg-star:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px} .pg-card.fav{background:linear-gradient(180deg,color-mix(in srgb,#E9B949 7%,var(--surface,#fff)),var(--surface,#fff) 40%)} .favpanel{display:flex;flex-direction:column;gap:12px;margin-top:16px} .favgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px} .favitem{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;row-gap:6px;align-items:center;padding:10px 12px;border-radius:12px;border:1px solid var(--line,#DCE3EF);color:inherit;text-decoration:none} .favitem b{grid-row:1}.fv-num{grid-row:1;justify-self:end;font-weight:700;font-size:14px} .fv-bar{grid-column:1/-1;display:block;height:6px;border-radius:99px;background:var(--down);overflow:hidden} .fv-bar i{display:block;height:100%;background:var(--up)} .favitem.L .fv-num{color:var(--up)}.favitem.S .fv-num{color:var(--down)}.favitem.N .fv-num{color:var(--muted)} .stakeline{display:flex;flex-direction:column;gap:4px} .stakeline .sk-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px;white-space:nowrap} .stakeline .sk-row>span:last-child,.stakeline .sk-row>b{text-align:right} h1.h1-as-h2{font-size:28px;line-height:1.3} .demobar{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;padding:10px 16px;background:linear-gradient(90deg,#FFF4DB,#FFE9B8);color:#5A3B00;font-weight:600;font-size:14px;border-bottom:1px solid #F2D89B} .demobar .btn{background:#5A3B00;color:#fff;min-height:34px;padding:0 14px} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .demobar{background:linear-gradient(90deg,#3A2C0C,#4A3810);color:#FFE0A3;border-color:#5A4517}.demobar .btn{background:#FFE0A3;color:#3A2C0C}} :root[data-theme="dark"] .demobar{background:linear-gradient(90deg,#3A2C0C,#4A3810);color:#FFE0A3;border-color:#5A4517} .sigstat{display:grid;grid-template-columns:1fr 1fr;gap:10px} .sigstat>div{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:10px;background:var(--bg-soft,rgba(36,99,219,.05))} .sigstat b{font-size:18px} /* v7.1 glossary */ .gl-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap} .gl-tools input{flex:1 1 280px;min-width:0;font:inherit;padding:10px 14px;border-radius:12px;border:1px solid var(--line,#DCE3EF);background:var(--surface,#fff);color:var(--ink)} .gl-group h2{font-size:20px;margin:0 0 10px} .gl-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px;margin:0} .gl-item{padding:14px 16px;border-radius:14px;border:1px solid var(--line,#DCE3EF);background:var(--surface,#fff)} .gl-item dt{font-weight:700;font-size:16px;margin:0} .gl-item dt .muted{font-weight:400;font-size:13px} .gl-item dd{margin:4px 0 0;color:var(--muted);font-size:14px;line-height:1.55} .gl-item[hidden],.gl-group[hidden]{display:none!important} /* v7.4 simulator free start date */ .sim-controls input[type="date"]{font:inherit;padding:10px 12px;border-radius:12px;border:1px solid var(--line,#DCE3EF);background:var(--surface,#fff);color:var(--ink);width:100%;box-sizing:border-box} .simquick{display:flex;gap:6px;flex-wrap:wrap} .simquick button{font:inherit;font-size:12.5px;padding:5px 11px;border-radius:99px;border:1px solid var(--line,#DCE3EF);background:var(--surface,#fff);color:var(--muted);cursor:pointer} .simquick button.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:700} /* v7.5 premium peek banner */ .peekbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 18px;border-radius:14px; background:linear-gradient(90deg,color-mix(in srgb,#E9B949 22%,transparent),color-mix(in srgb,#2463DB 14%,transparent)); border:1px solid color-mix(in srgb,#E9B949 45%,transparent);font-size:14px} .peekbar b.num{margin-left:6px} #peekdlg{border:0;border-radius:22px;padding:0;max-width:440px;width:calc(100% - 32px);box-shadow:0 30px 80px rgba(15,26,51,.35);color:var(--ink);background:var(--surface,#fff)} #peekdlg::backdrop{background:rgba(10,16,30,.55);backdrop-filter:blur(3px)} #peekdlg .peek-hero{display:flex;flex-direction:column;align-items:center;gap:8px;padding:26px 24px 20px;text-align:center; background:linear-gradient(135deg,#1B3A8A,#2463DB);color:#fff} #peekdlg .peek-hero h3{margin:0;font-size:21px;color:#fff} #peekdlg .crownbig{font-size:38px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.35));animation:crown-bob 2.6s ease-in-out infinite} #peekdlg .peek-badge{font-size:13px;font-weight:800;padding:4px 12px;border-radius:99px;background:linear-gradient(135deg,#F6C453,#D69E2E);color:#3B2A05} #peekdlg .peek-body{display:flex;flex-direction:column;gap:10px;padding:20px 24px 24px;text-align:center} #peekdlg .peek-body p{margin:0;line-height:1.6} /* 휴대폰 본인인증 (가입) */ .pv{display:flex;flex-direction:column;gap:12px} .pv-row{display:flex;gap:8px;align-items:stretch} .pv-row input{flex:1;min-width:0} .pv-row .btn.sm{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center; min-width:112px;padding:0 14px;font-size:14px;white-space:nowrap} .btn:disabled,.btn[disabled]{opacity:.5;cursor:not-allowed;box-shadow:none} .pv-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px} .pv-timer{font-size:13px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums} .pv-msg{margin:0;font-size:13px} .pv-msg.ok{color:#16a34a} .pv-msg.err{color:#dc2626} .pv[data-ok="1"] .pv-row input{background:rgba(22,163,74,.08)} /* 신호 기록 — "카드에 나오는 말 뜻" 가로 한 줄 박스 */ .gloss{display:flex;flex-direction:column;gap:14px} .gloss-head{align-items:baseline} .glossrow{display:grid;grid-template-columns:repeat(5,1fr);gap:0} .gloss-i{padding:2px 18px;border-left:1px solid var(--line);word-break:keep-all;overflow-wrap:break-word} .gloss-i:first-child{padding-left:0;border-left:0} .gloss-i:last-child{padding-right:0} .gloss-i b{display:block;font-size:13.5px;margin:0 0 6px;letter-spacing:-.01em} .gloss-i p{margin:0;line-height:1.65;text-wrap:pretty} @media (max-width:1000px){ .glossrow{grid-template-columns:repeat(2,1fr);gap:16px 0} .gloss-i:nth-child(odd){padding-left:0;border-left:0} .gloss-i:nth-child(even){padding-right:0} } @media (max-width:560px){ .glossrow{grid-template-columns:1fr;gap:14px} .gloss-i{padding:0;border-left:0} } /* 카카오 로그인 버튼 */ .kakao-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:52px; background:#FEE500;color:#191600;border-radius:12px;font-weight:700;font-size:15px;text-decoration:none; border:1px solid rgba(0,0,0,.06);transition:filter .15s ease} .kakao-btn:hover{filter:brightness(.96)} .kakao-btn svg{flex:0 0 auto} .or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:13px} .or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)} /* 관리 — 회원 삭제 영역 */ .danger-zone{border:1px solid rgba(220,38,38,.35);background:rgba(220,38,38,.03)} .danger-zone h3{color:#b91c1c} .btn.danger{background:#dc2626;border-color:#dc2626;color:#fff} .btn.danger:hover{background:#b91c1c} /* 관리 목록 — 선택 삭제 */ .pos th.ck,.pos td.ck{width:34px;padding-left:4px;padding-right:0;text-align:center} .pos th.ck input,.pos td.ck input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer} .bulkbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-top:4px;border-top:1px solid var(--line)} .bulkbar [data-count]{margin-right:auto} .bulkbar .btn[disabled]{opacity:.45;cursor:not-allowed}