/* ============================================================ COTRADING 홈 v6 — Signal Terminal (2026-07-11 리디자인) 콘셉트: 하나의 터미널, 4개의 프로세스 — 서비스별 색 채널 01 v2_stock #4ADE80 (green) 02 v2_webhook #7DD3FC (cyan) 03 v5_desktop #FACC15 (amber) 04 journal #C4B5FD (violet) red #F87171 = 하락/손실 전용. 다크 온리(회원님 지시). 전 규칙 .cth6 스코프 — bootstrap/base 와 충돌 방지. 폰트: IBM Plex Sans KR + IBM Plex Mono (index.html 에서 로드) ============================================================ */ .cth6{ --bg:#080C0A; --panel:#0E1410; --raise:#131B16; --tx:#DEE9E2; --tx2:#93A69A; --tx3:#5E7268; --tx4:#46564D; --ln:rgba(74,222,128,.13); --ln-strong:rgba(74,222,128,.28); --ln-neutral:rgba(222,233,226,.14); --g:#4ADE80; --c:#7DD3FC; --a:#FACC15; --v:#C4B5FD; --r:#F87171; --g-dim:rgba(74,222,128,.09); --c-dim:rgba(125,211,252,.09); --a-dim:rgba(250,204,21,.09); --v-dim:rgba(196,181,253,.09); --sans:'IBM Plex Sans KR','Pretendard',-apple-system,'Segoe UI','Malgun Gothic',sans-serif; --mono:'IBM Plex Mono','Cascadia Mono','Consolas','SF Mono',monospace; background:var(--bg); color:var(--tx); font:400 15px/1.7 var(--sans); -webkit-font-smoothing:antialiased; /* base 컨테이너(container-fluid px-lg-5 mt-4) 여백 상쇄 — 구 cosmotec_home.css 와 동일 공식 */ margin:-1.5rem -3rem 0; } @media (max-width:991.98px){ .cth6{margin:-1.5rem -.75rem 0} } .cth6 *,.cth6 *::before,.cth6 *::after{box-sizing:border-box} .cth6 a{color:inherit;text-decoration:none} .cth6 a:hover{text-decoration:none;color:inherit} .cth6 :focus-visible{outline:2px solid var(--g);outline-offset:2px;border-radius:4px} .cth6 .wrap{max-width:1180px;margin:0 auto;padding:0 32px} .cth6 .mono{font-family:var(--mono)} .cth6 .num{font-variant-numeric:tabular-nums} .cth6 h1,.cth6 h2,.cth6 h3,.cth6 h4,.cth6 p,.cth6 ul{margin:0;padding:0} .cth6 ul{list-style:none} .cth6 .up{color:var(--g)} .cth6 .dn{color:var(--r)} /* ---------- buttons ---------- */ .cth6 .btn-g{font:600 13.5px var(--sans);color:#0A0F0C !important;background:var(--g); padding:10px 18px;border-radius:5px;display:inline-block;transition:filter .15s} .cth6 .btn-g:hover{filter:brightness(1.1);color:#0A0F0C !important} .cth6 .btn-o{font:600 13.5px var(--sans);border:1px solid var(--ln-neutral); padding:10px 18px;border-radius:5px;display:inline-block;transition:border-color .15s} .cth6 .btn-o:hover{border-color:rgba(222,233,226,.4)} .cth6 .btn-lg{font-size:15px;padding:15px 26px;border-radius:6px} /* ---------- ticker ---------- */ .cth6 .ticker{background:#0B110D;border-bottom:1px solid var(--ln); overflow:hidden;white-space:nowrap} .cth6 .ticker-track{display:inline-flex;gap:44px;padding:9px 22px; font:500 11.5px var(--mono);color:var(--tx3);animation:cth6tick 46s linear infinite} @keyframes cth6tick{to{transform:translateX(-50%)}} /* ---------- hero ---------- */ .cth6 .hero{padding:76px 0 66px;background: radial-gradient(circle at 82% 12%, rgba(74,222,128,.07), transparent 52%), radial-gradient(circle at 8% 90%, rgba(125,211,252,.04), transparent 45%)} .cth6 .hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center} .cth6 .cmd{font:500 12.5px var(--mono);color:var(--g)} .cth6 .hero h1{margin:18px 0 20px;font:700 50px/1.16 var(--sans); letter-spacing:-.02em;text-wrap:balance;color:var(--tx)} .cth6 .hero h1 .ac{color:var(--g)} .cth6 .hero h1 .ac-v{color:var(--v)} /* AI 복기 = 저널 채널색(바이올렛) */ .cth6 .hero .lead{margin:0 0 28px;max-width:480px;font:400 16px/1.78 var(--sans); color:var(--tx2);text-wrap:pretty} .cth6 .hero .lead b{color:var(--tx);font-weight:600} .cth6 .hero-cta{display:flex;gap:12px;flex-wrap:wrap} .cth6 .stats{display:inline-flex;margin-top:30px;border:1px solid var(--ln); border-radius:8px;overflow:hidden} .cth6 .stats>div{padding:13px 24px} .cth6 .stats>div+div{border-left:1px solid var(--ln)} .cth6 .stats b{font:600 17px var(--mono);color:var(--g)} .cth6 .stats span{font:400 12px var(--sans);color:var(--tx3)} /* terminal */ .cth6 .term{background:var(--panel);border:1px solid var(--ln-strong);border-radius:10px; overflow:hidden;box-shadow:0 28px 70px rgba(0,0,0,.65)} .cth6 .term-bar{display:flex;align-items:center;justify-content:space-between; padding:11px 16px;border-bottom:1px solid var(--ln)} .cth6 .term-bar span{font:500 11.5px var(--mono);color:var(--tx3)} .cth6 .term-bar .auto{font:600 10px var(--mono);color:#0A0F0C;background:var(--g); border-radius:3px;padding:3px 8px} .cth6 .term-body{padding:17px 19px;font:400 12.5px/1.62 var(--mono); display:flex;flex-direction:column;gap:9px} .cth6 .tline{display:flex;gap:10px;align-items:baseline;opacity:0; animation:cth6tin .4s ease forwards} .cth6 .tline:nth-child(1){animation-delay:.05s}.cth6 .tline:nth-child(2){animation-delay:.22s} .cth6 .tline:nth-child(3){animation-delay:.39s}.cth6 .tline:nth-child(4){animation-delay:.56s} .cth6 .tline:nth-child(5){animation-delay:.73s}.cth6 .tline:nth-child(6){animation-delay:.9s} .cth6 .tline:nth-child(7){animation-delay:1.1s}.cth6 .tline:nth-child(8){animation-delay:1.3s} .cth6 .tline:nth-child(9){animation-delay:1.5s}.cth6 .tline:nth-child(10){animation-delay:1.7s} @keyframes cth6tin{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}} .cth6 .dot{width:7px;height:7px;border-radius:50%;flex:none;align-self:center} .cth6 .proc{width:172px;flex:none;color:var(--tx)} .cth6 .st-run{color:var(--g);width:74px;flex:none} .cth6 .st-rdy{color:var(--a);width:74px;flex:none} .cth6 .pdesc{color:var(--tx3)} .cth6 .tsep{border:0;border-top:1px solid var(--ln);margin:3px 0} .cth6 .ts{color:var(--tx4);flex:none} .cth6 .tag-fill{color:var(--g)}.cth6 .tag-close{color:var(--c)}.cth6 .tag-log{color:var(--tx3)} .cth6 .term-eq{border-top:1px solid var(--ln);padding:12px 16px 2px} .cth6 .term-eq .eq-head{display:flex;justify-content:space-between; font:500 10.5px var(--mono);color:var(--tx3);padding-bottom:8px} .cth6 .term-eq svg{display:block;width:100%;height:44px} .cth6 .term-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px; background:var(--ln);border-top:1px solid var(--ln)} .cth6 .term-stats>div{background:var(--panel);padding:13px 16px} .cth6 .term-stats .k{font:400 10.5px var(--mono);color:var(--tx3)} .cth6 .term-stats .n{font:600 19px var(--mono);color:var(--tx)} /* ---------- sections ---------- */ .cth6 section{padding:72px 0;border-top:1px solid var(--ln)} .cth6 .sec-head{display:flex;align-items:baseline;justify-content:space-between; gap:20px;flex-wrap:wrap;margin-bottom:34px} .cth6 .sec-head h2{font:700 30px/1.3 var(--sans);letter-spacing:-.01em; text-wrap:balance;color:var(--tx)} .cth6 .sec-head .sub{margin:8px 0 0;font:400 14.5px/1.7 var(--sans); color:var(--tx2);max-width:580px} .cth6 .sec-label{font:500 11.5px var(--mono);color:var(--g);letter-spacing:.06em} /* ---------- services ---------- */ .cth6 .svc{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--ln); border-radius:12px;overflow:hidden;background:var(--panel);margin-bottom:18px; transition:border-color .2s} .cth6 .svc:hover{border-color:var(--ln-strong)} .cth6 .svc-info{padding:34px 38px;display:flex;flex-direction:column;gap:13px} .cth6 .svc-tag{font:600 11px var(--mono);letter-spacing:.04em; display:flex;align-items:center;gap:8px;flex-wrap:wrap} .cth6 .plat{font:500 10px var(--mono);border-radius:3px;padding:2px 7px;margin-left:2px} .cth6 .svc h3{margin:2px 0 0;font:600 21px/1.35 var(--sans); letter-spacing:-.01em;color:var(--tx)} .cth6 .svc p{font:400 14.5px/1.75 var(--sans);color:var(--tx2);text-wrap:pretty} .cth6 .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px} .cth6 .chip{font:500 11.5px var(--mono);color:var(--tx2); border:1px solid var(--ln-neutral);border-radius:4px;padding:4px 9px} .cth6 .svc-cta{margin-top:auto;padding-top:14px;font:600 13.5px var(--sans);display:inline-block} .cth6 .svc-mock{background:var(--raise);border-left:1px solid var(--ln); padding:30px;display:flex;align-items:center} .cth6 .svc.flip .svc-mock{border-left:0;border-right:1px solid var(--ln);order:-1} .cth6 .mockbox{width:100%;background:var(--panel);border:1px solid var(--ln-neutral); border-radius:8px;overflow:hidden} .cth6 .mock-hd{display:flex;justify-content:space-between;padding:9px 14px; border-bottom:1px solid var(--ln-neutral);font:500 10.5px var(--mono);color:var(--tx3)} .cth6 .mock-bd{padding:13px 14px;font:400 12px/1.6 var(--mono); display:flex;flex-direction:column;gap:8px} .cth6 .mrow{display:flex;justify-content:space-between;gap:10px;align-items:baseline} .cth6 .mrow .sym{color:var(--tx);width:104px;flex:none} .cth6 .mrow .nm{color:var(--tx3);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cth6 .pill{font:600 9.5px var(--mono);border-radius:3px;padding:2px 7px;flex:none} .cth6 .flow{display:flex;flex-direction:column;gap:10px} .cth6 .fnode{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .cth6 .fnode .fb{border:1px solid var(--ln-neutral);border-radius:5px; padding:7px 11px;color:var(--tx)} .cth6 .farrow{color:var(--tx4);padding-left:14px} .cth6 .exlist{border-top:1px solid var(--ln-neutral);margin-top:4px;padding-top:9px; font:400 9.5px var(--mono);color:var(--tx4);letter-spacing:.02em} .cth6 .heat{display:flex;gap:4px} .cth6 .heat i{width:26px;height:26px;border-radius:4px;display:block} .cth6 .ai-note{border-left:2px solid var(--v);background:rgba(196,181,253,.07); border-radius:0 8px 8px 0;padding:9px 12px;color:var(--tx); font:400 12.5px/1.68 var(--sans)} .cth6 .ai-note b{color:var(--v);font:700 11px var(--mono);letter-spacing:.04em} /* ---------- tools (백테스트·DCA) ---------- */ .cth6 .tools-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:26px} .cth6 .tool-card{border:1px solid var(--ln);border-radius:12px;padding:28px 30px; display:flex;flex-direction:column;gap:11px;transition:border-color .2s} .cth6 .tool-card:hover{border-color:var(--ln-strong)} .cth6 .tool-card h4{font:600 17.5px/1.4 var(--sans);letter-spacing:-.01em;color:var(--tx)} .cth6 .tool-card p{font:400 14px/1.72 var(--sans);color:var(--tx2);text-wrap:pretty} /* ---------- why HL ---------- */ .cth6 .why{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center} .cth6 .why h2{font:700 28px/1.35 var(--sans);letter-spacing:-.01em;color:var(--tx); margin-bottom:16px;text-wrap:balance} .cth6 .why p{font:400 14.5px/1.8 var(--sans);color:var(--tx2);text-wrap:pretty} .cth6 .why p b{color:var(--tx);font-weight:600} .cth6 .why ul{display:flex;flex-direction:column;gap:9px;margin:18px 0 22px} .cth6 .why li{font:400 13.5px/1.6 var(--sans);color:var(--tx2); display:flex;gap:9px;align-items:baseline} .cth6 .why li::before{content:"✓";color:var(--g);font:600 12px var(--mono)} .cth6 .why li b{color:var(--tx)} /* ---------- coverage table ---------- */ .cth6 .tbl{border:1px solid var(--ln);border-radius:10px;overflow:hidden} .cth6 .tr{display:grid;grid-template-columns:1.15fr 1.5fr 1.1fr .55fr; padding:15px 24px;border-bottom:1px solid var(--ln); font:400 14px var(--sans);align-items:center;gap:14px} .cth6 .tr:last-child{border-bottom:0} .cth6 .tr.hd{background:var(--panel);font:500 11px var(--mono); color:var(--tx3);padding:12px 24px} .cth6 .tr .mkt{font-weight:600;color:var(--tx)} .cth6 .tr .as{color:var(--tx2);font-size:13.5px} .cth6 .svcref{display:flex;gap:6px;flex-wrap:wrap} .cth6 .sref{font:500 10.5px var(--mono);border-radius:3px;padding:2px 8px} .cth6 .status{text-align:right;font:600 11px var(--mono)} /* ---------- predictions ---------- */ .cth6 .pred-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px} .cth6 .pred-card{border:1px solid var(--ln);border-radius:12px;overflow:hidden; background:var(--panel);display:flex;flex-direction:column;transition:border-color .2s} .cth6 .pred-card:hover{border-color:var(--ln-strong)} .cth6 .pred-fr{position:relative;aspect-ratio:16/9;background:#0B110D; border-bottom:1px solid var(--ln)} .cth6 .pred-fr iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .cth6 .pred-body{padding:18px 24px 22px;display:flex;flex-direction:column;gap:8px} .cth6 .pred-chip{align-self:flex-start;font:500 10px var(--mono);color:var(--g); border:1px solid var(--ln-strong);border-radius:3px;padding:2px 7px} .cth6 .pred-body h4{font:600 18px var(--sans);letter-spacing:-.01em;color:var(--tx)} .cth6 .pred-body p{font:400 13.5px/1.68 var(--sans);color:var(--tx2)} .cth6 .pred-meta{font:500 11.5px var(--mono);color:var(--tx3);padding-top:4px} .cth6 .pred-meta:hover{color:var(--g)} .cth6 .pred-track{margin-top:18px;border:1px solid rgba(196,181,253,.25); border-radius:10px;background:rgba(196,181,253,.04);padding:15px 22px; display:flex;gap:12px;align-items:center;flex-wrap:wrap; font:400 13.5px var(--sans);color:var(--tx2)} /* ---------- pricing ---------- */ .cth6 .price-grid{display:grid;grid-template-columns:1fr 1.18fr 1fr;gap:16px;align-items:stretch} .cth6 .pcard{border:1px solid var(--ln);border-radius:12px;padding:30px; display:flex;flex-direction:column;gap:15px;background:var(--panel)} .cth6 .pcard.hot{border-color:var(--g); background:linear-gradient(180deg,rgba(74,222,128,.06),rgba(74,222,128,.02))} .cth6 .pcard .tier{font:500 12px var(--mono);color:var(--tx3)} .cth6 .pcard.hot .tier{color:var(--g)} .cth6 .pcard .amt{font:700 34px var(--mono);color:var(--tx)} .cth6 .pcard.hot .amt{color:var(--g)} .cth6 .pcard .amt small{font:500 14px var(--mono);color:var(--tx3)} .cth6 .pcard ul{display:flex;flex-direction:column;gap:8px; font:400 13.5px/1.5 var(--sans);color:var(--tx2)} .cth6 .pcard li::before{content:"✓ ";color:var(--g);font-family:var(--mono)} .cth6 .p-svcs{display:flex;gap:6px;flex-wrap:wrap;padding-top:2px} .cth6 .pcard .cta{margin-top:auto;text-align:center;padding:13px 0; border-radius:6px;font:600 13.5px var(--sans)} .cth6 .pay-note{margin-top:14px;font:400 12px var(--mono);color:var(--tx4);text-align:center} .cth6 .trust{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:var(--ln); border:1px solid var(--ln);border-radius:10px;overflow:hidden;margin-top:18px} .cth6 .trust>div{background:var(--panel);padding:15px 22px; font:400 13px/1.6 var(--sans);color:var(--tx2);display:flex;gap:9px;align-items:baseline} .cth6 .trust b{color:var(--g);font:600 12px var(--mono)} /* ---------- FAQ ---------- */ .cth6 .faq{display:flex;flex-direction:column;gap:10px;max-width:860px} .cth6 .faq details{border:1px solid var(--ln);border-radius:10px; background:var(--panel);overflow:hidden} .cth6 .faq details[open]{border-color:var(--ln-strong)} .cth6 .faq summary{cursor:pointer;list-style:none;padding:16px 22px; font:600 14.5px var(--sans);color:var(--tx);display:flex;gap:12px;align-items:baseline} .cth6 .faq summary::-webkit-details-marker{display:none} .cth6 .faq summary::before{content:">";font:600 12px var(--mono);color:var(--g); transition:transform .15s} .cth6 .faq details[open] summary::before{transform:rotate(90deg)} .cth6 .faq details p{padding:0 22px 18px 44px;font:400 13.5px/1.75 var(--sans);color:var(--tx2)} /* ---------- final CTA ---------- */ .cth6 .foot-cta{text-align:center;display:flex;flex-direction:column; gap:20px;align-items:center} .cth6 .foot-cta h2{font:700 34px/1.3 var(--sans);letter-spacing:-.01em; text-wrap:balance;color:var(--tx)} .cth6 .foot-cta .note{font:400 14px var(--sans);color:var(--tx2)} /* ============================================================ 홈 전용 네비 스킨 — 이 CSS 는 index.html 에서만 로드되므로 아래 전역 셀렉터는 홈페이지에서만 적용된다 (타 페이지 = 기존 블루). base.html 인라인