/* [웹 시제품 2026-09-17] 데스크톱 Jitus 과 같은 색을 씁니다. (app.py 의 Palette 값을 그대로 옮긴 것입니다 - 톤이 달라 보이면 시제품 평가가 흐려지므로 일부러 똑같이 맞췄습니다) */ :root{ --bg:#0B0E14; --panel:#141822; --panel-alt:#181D29; --border:#232936; --text:#e8eaf0; --dim:#8A92A6; --accent:#00E5FF; --accent-soft:#0C2A30; --warn:#FFB800; --pos:#37d67a; --neg:#ff5470; --hoverbg:rgba(255,255,255,.045); --kr:#ff5470; --us:#FFD54A; --jp:#37d67a; /* [2026-09-18 · 묶음 B] 색 규칙 한 곳에 모음. "지금은 다 흰색이야 · 각각 써줘" 라는 지적에 맞춰 시장·시간대· 조건에 각각 제 색을 줍니다. 세 갈래가 한 줄에 나란히 서므로 **갈래끼리는 색 계열을 겹치지 않게** 잡았습니다. 시장 = 서로 다른 일곱 색 (한 눈에 어느 장인지) 시간대 = 파랑 한 계열의 밝기 셋 (길수록 밝게 - 순서가 보이게) 조건 = 딱지(배경 옅게 깔린 알약)라 글자색과 안 헷갈립니다 [고친 것] 코스닥과 S&P500 이 **둘 다 #FFB800 이었습니다.** "코스피, 니케이, S&P 각각 써달라"는 지적이 바로 이것이었습니다. 코스닥을 주황으로 옮기고 S&P 를 조금 더 밝은 노랑으로 띄웠습니다. */ --mk-kospi:#FF5470; --mk-kosdaq:#FF9F6B; --mk-nikkei:#37D67A; --mk-sp:#FFD54A; --mk-fut:#00E5FF; --mk-com:#C792EA; --mk-crypto:#FF8AD8; --tf-d:#5C7CFA; --tf-w:#91A7FF; --tf-m:#C7D2FE; --menu:#161B28; } /* ── [2026-09-20 사장님 지적] 화이트 모드 ────────────────────────── 설정에 '다크 / 화이트' 고르는 칸이 **예전부터 있었는데 아무 일도 안 하고 있었습니다.** 값은 settings.json 에 저장되는데 읽는 곳이 한 군데도 없었습니다(화면·차트 어디에도). 위 :root 의 색 이름을 그대로 쓰고 **값만** 갈아 끼웁니다. 화면 코드는 전부 var(--…) 로 쓰고 있어서(332군데) 여기 한 벌이면 같이 따라옵니다. 가 붙으면 켜집니다(web/theme.js). 차트 안쪽(캔들 바탕·눈금 글자)은 CSS 가 아니라 캔버스라 JS 가 이 값들을 읽어 넘깁니다 - 그래서 여기 있는 이름을 바꾸면 안 됩니다. */ :root[data-theme="light"]{ --bg:#F4F6FA; --panel:#FFFFFF; --panel-alt:#F7F9FC; --border:#D8DEE9; --text:#1B2230; --dim:#5D6880; --accent:#0077A8; --accent-soft:#DFF3F9; --warn:#B06E00; --pos:#1E9E5A; --neg:#D6304B; --hoverbg:rgba(0,0,0,.045); --kr:#D6304B; --us:#B08600; --jp:#1E9E5A; --mk-kospi:#D6304B; --mk-kosdaq:#C75A1E; --mk-nikkei:#1E9E5A; --mk-sp:#B08600; --mk-fut:#0077A8; --mk-com:#7B4BC0; --mk-crypto:#C23A96; --tf-d:#3B5BDB; --tf-w:#5C7CFA; --tf-m:#748FFC; --menu:#FFFFFF; } /* 화이트 모드에서 어두운 바탕을 쓰던 몇 군데. 박아 둔 색이라 따로 풉니다. */ :root[data-theme="light"] .ckchip, :root[data-theme="light"] .ckact, :root[data-theme="light"] .qb-b, :root[data-theme="light"] .ckseg-b{background:#FFFFFF; color:#1B2230} :root[data-theme="light"] .cktip, :root[data-theme="light"] .cknote, :root[data-theme="light"] .chart-tip, :root[data-theme="light"] .quad-tip{background:#FFFFFF; color:#1B2230; border-color:#D8DEE9; box-shadow:0 4px 14px rgba(20,30,50,.14)} :root[data-theme="light"] .ckhow b{background:#EEF2F8; color:#1B2230} /* [2026-09-20] 실시간 아님 고지 - 화이트 모드에서는 글자를 어둡게. 어두운 바탕에 맞춰 흰 글자로 박아 둔 자리라(.ckstale b) 여기서 풉니다. */ :root[data-theme="light"] .ckstale{color:#8A6D08; background:rgba(255,176,32,.14)} :root[data-theme="light"] .ckstale b{color:#1B2230} *{box-sizing:border-box} html,/* ══ [2026-09-20 사장님 지적] 한글이 단어 한가운데에서 끊기던 것 ══════ "글자의 배열이 그 줄에 공간이 있는대도 내려서 줄쓰기가 된 부분이 있어" 브라우저는 한글을 **음절 하나하나**를 끊을 수 있는 자리로 봅니다. 그래서 '아이패드' 가 '아이패 / 드' 로, '한판' 이 '한 / 판' 으로, '프로그램이' 가 '프로그램 / 이' 로 갈렸습니다 - 앞 줄에 자리가 남아 보이는데 한 글자만 내려간 그 모양입니다. `word-break:keep-all` 은 **띄어쓰기에서만** 줄을 바꿉니다(한글 조판의 기본입니다). 대신 종목 코드처럼 띄어쓰기 없는 긴 글자가 칸을 넘지 않도록 `overflow-wrap:break-word` 를 같이 둡니다. */ body{margin:0;height:100%; word-break:keep-all; overflow-wrap:break-word} body{ background:var(--bg); color:var(--text); font-family:"Malgun Gothic","맑은 고딕",system-ui,-apple-system,sans-serif; font-size:13px; display:flex; flex-direction:column; } /* ── 상단 ───────────────────────────────────────────── */ .topbar{ display:flex; align-items:center; justify-content:space-between; background:var(--menu); border-bottom:1px solid var(--border); padding:10px 16px; flex:0 0 auto; } /* [2026-09-20 사장님 결정 · B안] 머리줄 왼쪽 — 상표 + 지금 화면 이름. ◉ 글자 대신 **점 하나**를 그립니다(글꼴마다 ◉ 크기가 들쭉날쭉합니다). */ .brand{display:flex; align-items:center; gap:9px} .logo{width:9px; height:9px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); flex:0 0 auto} .wordmark{font-size:13.5px; font-weight:800; letter-spacing:.16em; color:var(--text); white-space:nowrap} .brandbar{width:1px; height:15px; background:var(--border); flex:0 0 auto} .title{font-size:13.5px; font-weight:600; color:var(--dim); white-space:nowrap} .sub{font-size:12px; color:var(--dim)} .tools{display:flex; align-items:center; gap:10px} .stamp{font-size:12px; color:var(--dim)} .btn{ background:var(--panel-alt); color:var(--text); border:1px solid var(--border); border-radius:7px; padding:6px 14px; font-weight:700; font-size:12px; cursor:pointer; font-family:inherit; } .btn:hover{border-color:var(--accent); color:var(--accent)} /* [2026-09-18] 되돌릴 수 없는 단추(관심종목 전체 삭제 등). 평소에는 조용히 있다가 마우스를 올리면 빨갛게 바뀝니다 - 실수로 누르는 것을 막되 화면이 시끄러워지지는 않게. */ .btn.danger{color:var(--dim); border-color:var(--border)} .btn.danger:hover{color:var(--neg); border-color:var(--neg); background:color-mix(in srgb, var(--neg) 12%, transparent)} .btn:active{background:var(--accent-soft)} .btn[disabled]{opacity:.5; cursor:default} /* [2026-09-17 수정] 전에는 차트 높이를 화면 높이의 몇 %로 못박아 뒀는데, 창이 작거나 칩이 두 줄로 넘어가면 아래 ③④가 잘리고 스크롤이 생겼습니다 (사용자 화면에서 확인). → 위쪽(카드·글로벌)은 제 높이대로 두고, **차트 네 칸이 남는 공간을 나눠 갖도록** 바꿉니다. 창을 줄이면 차트가 같이 줄어들 뿐 잘리지 않습니다. 데스크톱과 같은 동작입니다. */ /* [2026-09-18] 여백을 조금씩 줄였습니다(스크롤 없애기). 한 곳을 크게 줄이면 그 칸만 답답해 보이므로 여러 곳에서 2~3px 씩 나눠 가져왔습니다. 이 규칙들은 모든 화면에 함께 걸립니다 - 설정· 차익거래 화면의 스크롤도 같은 이유로 생기기 때문입니다. */ .wrap{flex:1 1 auto; overflow:auto; padding:7px 14px 5px; display:flex; flex-direction:column; min-height:0} /* ── 3국 카드 ───────────────────────────────────────── */ .cards{display:grid; grid-template-columns:repeat(3,1fr); gap:9px} .card{ background:var(--panel); border:1px solid var(--border); border-left:4px solid var(--dim); border-radius:10px; padding:9px 11px; } .card .flag{font-size:11px; color:var(--dim); font-weight:700; letter-spacing:.4px} .card .name{font-size:13px; font-weight:700; margin-left:6px} .card .row1{display:flex; align-items:center; justify-content:space-between; margin-top:6px} .card .score{font-size:23px; font-weight:800} .card .lv{font-size:14px; font-weight:800; margin-right:8px} .card .chg{font-size:12px; font-weight:700; margin-left:6px} .card .idx{text-align:right; font-size:12px; color:var(--dim); line-height:1.5} .card .idx b{color:var(--text); font-size:15px} .bar{height:6px; background:var(--panel-alt); border-radius:4px; margin:9px 0 7px; overflow:hidden} .bar > i{display:block; height:100%; border-radius:4px} .card .note{font-size:12px; color:var(--dim)} .up{color:var(--pos)} .down{color:var(--neg)} .flat{color:var(--dim)} /* ── 패널 공통 ──────────────────────────────────────── */ .panel{ background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:7px 11px; margin-top:7px; } .panel-head{font-size:12px; font-weight:800; margin-bottom:4px} /* [2026-09-18] 홈 칸(빠른 검색 + 바로가기)을 **한 줄로** 폅니다. 원래 제목·검색줄·바로가기줄이 세 줄로 쌓여 108px 를 쓰고 있었는데, 1480px 넓이에서는 셋이 한 줄에 다 들어갑니다. 46px 로 줄면서 62px 가 차트 쪽으로 넘어갔습니다. 아무것도 빼지 않았습니다. 검색 결과(#home-hits)만 그 아래로 내려옵니다. */ #home-panel{display:flex; align-items:center; gap:10px; flex-wrap:wrap} #home-panel > .panel-head{margin:0; flex:0 0 auto} #home-panel > .scanrow{margin:0} #home-hits{flex:1 1 100%} .dim{color:var(--dim); font-weight:400} /* ── 글로벌 6칸 ─────────────────────────────────────── */ .macro{display:grid; grid-template-columns:repeat(6,1fr); gap:8px} .mbox{background:var(--panel-alt); border:1px solid var(--border); border-radius:8px; padding:7px 10px} .mbox .k{font-size:11px; color:var(--dim)} .mbox .v{font-size:17px; font-weight:800; margin-top:3px} .mbox .s{font-size:11px; color:var(--dim); margin-top:2px} /* ── 카드 안: 한 줄 해석 · 점수 변동 원인 · 칩 ────────── */ .card .act{font-size:12px; font-weight:700; margin-top:8px} .card .why{font-size:11px; color:var(--dim); margin-top:3px} .card .why b{font-weight:700} /* 칩 - 데스크톱과 같은 알약 모양. 색: 초록=우호(70점↑) · 노랑=중립(40~70) · 빨강=비우호(40점↓) */ .chips{display:flex; flex-wrap:wrap; gap:4px; margin-top:8px} /* [2026-09-17] 창이 좁으면 칩 여섯 개가 두 줄로 넘어가 카드가 길어지고, 그만큼 아래 차트를 밀어냅니다. 데스크톱처럼 한 줄에 들어가게 조였습니다. */ .chip{ border-radius:9px; padding:2px 7px; font-size:11px; font-weight:700; font-family:Consolas,"D2Coding","맑은 고딕",monospace; white-space:nowrap; } /* ── 차트 ───────────────────────────────────────────── */ /* [2026-09-17] 차트가 네 개(2×2)가 되었으므로, 데스크톱처럼 스크롤 없이 한 화면에 들어오도록 높이를 줄였습니다. --chart-h 한 곳만 고치면 ④ 종합점수 막대 높이도 같이 따라갑니다. */ /* 차트가 아주 납작해지면 읽을 수 없으니 최소 높이만 정해 둡니다. 이보다 창이 작아지면 그때는 스크롤이 생깁니다(잘리지는 않습니다). */ /* [2026-09-18] 132px → 102px. 1480x940(최대화한 창)에서 시장 레이더에 스크롤이 생긴다는 지적을 받아, 실제 화면에서 넘치는 픽셀을 재 가며 맞춘 값입니다. 재 본 값: 손대기 전 91px 넘침 → 여백을 줄여 34px → 홈 칸을 한 줄로 합쳐 3px → 이 값에서 0px. 차트가 짧아 보이지만 오히려 **커졌습니다** - 넘치던 것이 사라지면서 ① ② ③ ④ 네 칸이 259px 를 나눠 쓰던 것이 376px 를 나눠 쓰게 됐습니다. */ :root{--chart-min:102px} .charts{flex:1 1 auto; min-height:0; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:9px} .charts > .panel{margin-top:0} .tip{cursor:help} .chart-panel{display:flex; flex-direction:column; min-height:0} .legend{font-size:11px; margin-bottom:2px; user-select:none} .legend span{margin-right:12px; cursor:pointer} .legend span.off{opacity:.35; text-decoration:line-through} .chart{flex:1 1 auto; min-height:var(--chart-min)} .readout{font-size:11px; color:var(--dim); margin-top:3px; min-height:14px; font-variant-numeric:tabular-nums} .readout b{color:var(--text)} /* ── ④ 국가별 종합점수 ──────────────────────────────── */ /* [2026-09-17] 높이를 전부 %로 잡습니다. 처음에는 JS가 픽셀을 재서 그렸는데, 옆 칸(③ 환율)이 더 커지면 이 칸도 같이 늘어나는 바람에 잰 값이 이미 틀린 값이 되어 막대가 아래로 삐져나왔습니다. %로 두면 창 크기가 바뀌어도 다시 그릴 필요가 없습니다. */ .scorebars{flex:1 1 auto; display:flex; flex-direction:column; min-height:var(--chart-min)} .sb-plot{flex:1 1 auto; position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:26px; padding:0 12px 0 28px} /* 왼쪽은 70·40 눈금 글자 자리 */ .sb-guide{position:absolute; left:0; right:0; border-top:1px dashed #3a4354; font-size:10px; color:var(--dim); padding-left:2px; line-height:1.4; z-index:2; pointer-events:none} /* 막대 위로 보이게 */ .sb{position:relative} .sb .bar2{position:absolute; left:0; right:0; bottom:0; border-radius:5px 5px 0 0} .sb .v{position:absolute; left:0; right:0; text-align:center; font-size:13px; font-weight:800} .sb-names{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; padding:7px 12px 0 28px; font-size:12px; color:var(--dim); text-align:center} /* ── 덮개(로딩) ─────────────────────────────────────── */ .veil{ position:fixed; inset:0; background:rgba(11,14,20,.82); display:none; align-items:center; justify-content:center; z-index:50; } .veil.on{display:flex} .veil-box{text-align:center} .veil-sub{font-size:12px; color:var(--dim); margin-top:6px} .spinner{ width:34px; height:34px; margin:0 auto 12px; border-radius:50%; border:3px solid var(--border); border-top-color:var(--accent); animation:spin .9s linear infinite; } @keyframes spin{to{transform:rotate(360deg)}} /* ── 바닥 ───────────────────────────────────────────── */ .foot{ flex:0 0 auto; display:flex; justify-content:space-between; gap:12px; border-top:1px solid var(--border); padding:5px 14px; font-size:11px; color:var(--dim); } /* 출처가 길어 두 줄로 깔리면 차트 자리를 잡아먹습니다. 한 줄로 자르고, 마우스를 올리면 전체가 말풍선으로 보입니다. */ #sources{flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:help} .foot > .dim{flex:0 0 auto; white-space:nowrap} /* [2026-09-19] 상태줄 단추(결제 안내 · 지원 환경·사양 · 내 이용 내역)가 **세로로 찌그러졌습니다.** `#sources` 가 flex:1 로 자리를 다 가져가는데 단추에는 "줄지 말라"는 규칙이 없어서, 글자가 한 자씩 세로로 쌓였습니다. 위 `.dim` 에만 있던 규칙을 단추에도 똑같이 줍니다. */ .foot > .btn{flex:0 0 auto; white-space:nowrap} @media (max-width:1100px){ .charts{grid-template-columns:1fr} .macro{grid-template-columns:repeat(3,1fr)} .cards{grid-template-columns:1fr} } /* ═══════════════════════════════════════════════════════════════ [조건 조합 2026-09-17 · 인계문서 6장 A-1] 여기부터는 '더하기만' 했습니다. 위의 규칙은 한 줄도 고치지 않았으므로 홈 시장 레이더 화면은 그대로입니다. ═══════════════════════════════════════════════════════════════ */ .hidden{display:none !important} /* 상단 화면 전환 */ /* [2026-09-19] 메뉴가 12개로 늘면서(내 이용 내역 · 이용 안내가 들어옴) 좁은 화면에서 글자가 "시장 레이 / 더" 처럼 한가운데서 쪼개졌습니다. ① 단추 안에서는 줄을 바꾸지 않게 하고(white-space:nowrap), ② 자리가 모자라면 단추 사이 간격과 좌우 여백부터 줄이고, ③ 그래도 모자라면 메뉴 줄 안에서만 가로로 밀어 봅니다. 화면 전체가 옆으로 밀리지 않게 min-width:0 을 함께 둡니다. */ .nav{display:flex; flex-wrap:wrap; justify-content:flex-end; gap:4px; min-width:0} .navbtn, .navlink{white-space:nowrap; flex:0 0 auto} /* 자리가 모자라면 글자와 여백부터 줄이고, 그래도 모자라면 단추 **통째로** 아랫줄로 넘깁니다. 가로로 숨겨 버리면 못 찾는 메뉴가 생깁니다. */ @media (max-width:1560px){ .navbtn, .navlink{padding:6px 9px; font-size:11px} .sub{display:none} /* 부제를 접어 메뉴 자리를 넓힙니다 */ } @media (max-width:1180px){ .navbtn, .navlink{padding:5px 7px; font-size:10px} } /* ══ [2026-09-20 사장님 결정 · B안 · 은은한 알약형] ════════════════ "이모티콘을 없애주고 메뉴의 ui를 고급스럽고 직관적이게" 모양(알약)은 그대로 두고 **색만 낮춥니다.** 예전에는 지금 보는 화면이 통짜 하늘색 상자였습니다 - 메뉴가 열한 개라 그 한 칸이 화면에서 제일 센 색이 되어 버렸습니다. 이제 옅은 하늘색 바탕에 하늘색 글자입니다. 마우스를 올리면 아주 옅은 흰 바탕이 깔립니다(글자색만 바뀌던 것보다 '누를 수 있는 칸' 이라는 게 잘 보입니다). ══════════════════════════════════════════════════════════════════ */ .navbtn{ background:transparent; color:var(--dim); border:1px solid transparent; border-radius:8px; padding:7px 13px; font-weight:600; font-size:13px; cursor:pointer; font-family:inherit; } .navbtn:hover{color:var(--text); background:var(--hoverbg)} .navbtn.on{ color:var(--accent); background:var(--accent-soft); border-color:var(--accent); font-weight:700; } /* 조건 묶음 */ .condgroups{display:flex; flex-wrap:wrap; gap:8px 14px; margin-bottom:4px} .condgroup{ border:1px solid var(--border); border-radius:8px; padding:7px 10px 8px; background:var(--panel-alt); } .condgroup-head{font-size:11px; font-weight:800; color:var(--dim); margin-bottom:5px} .cond{display:flex; align-items:center; gap:6px; padding:2px 0; cursor:pointer} .cond input{accent-color:var(--accent); cursor:pointer} .cond span{font-size:12px} .cond:hover span{color:var(--accent)} /* 결합 방식 · 검색 대상 (데스크톱의 세그먼트 바와 같은 모양) */ .scanrow{display:flex; align-items:center; gap:10px; margin-top:8px; flex-wrap:wrap} .rowlabel{font-size:12px; font-weight:700; color:var(--dim); min-width:58px} .seg{display:flex; flex-wrap:wrap; gap:5px} .segbtn{ font-size:12px; font-weight:600; color:var(--dim); background:var(--panel); border:1px solid var(--border); border-radius:4px; padding:4px 10px; cursor:pointer; font-family:inherit; } .segbtn:hover{color:var(--accent); border-color:var(--accent)} /* [2026-09-17 고침 · 사용자 지적] "조건 스캔 시작이 검색대상 체크와 색이 같아서 찾기 힘듬". 실제로 `.segbtn.on` 과 `.btn.primary` 가 **둘 다** `background:var(--accent)` 였습니다. 시장 단추는 기본이 전부 켜짐이라 그 줄 전체가 청록 덩어리가 되고, 그 안에서 시작 단추를 찾아야 했습니다. → 고른 상태(state)는 '옅게 칠하고 글자를 강조색으로', 실행(action)은 '꽉 채우기'로 **종류를 갈랐습니다.** 밝기가 아니라 형태 차이입니다. */ .segbtn.on{ color:var(--accent); background:var(--accent-soft); border-color:var(--accent); font-weight:700; } .btn.primary{background:var(--accent); color:var(--bg); border-color:var(--accent)} .btn.primary:hover{opacity:.9; color:var(--bg)} .btn.primary[disabled]{opacity:.45} /* 실행 단추는 한 급 크게. 크기까지 달라야 눈이 먼저 갑니다. */ /* [2026-09-18] 검색 대상 체크와 색이 같아 안 보인다는 지적. 체크 줄은 하늘색 계열이라, 시작 단추는 **초록 채움**으로 띄웁니다. */ #scan-btn{padding:8px 22px; font-size:13px; letter-spacing:-.2px; color:#07110B; background:var(--pos); border-color:var(--pos); font-weight:800; box-shadow:0 0 0 3px rgba(55,214,122,.18)} #scan-btn:hover{color:#07110B; background:#4BE58C; border-color:#4BE58C; box-shadow:0 0 0 4px rgba(55,214,122,.30)} #scan-btn:disabled{color:var(--dim); background:var(--panel-alt); border-color:var(--border); box-shadow:none} /* 진행률 — 수신 단계는 강조색, 확인 단계는 노란색으로 구분 */ .bar-fill{height:100%; width:0%; border-radius:4px; background:var(--accent); transition:width .25s ease} .bar-fill.match{background:var(--warn)} .warn{font-size:12px; color:var(--warn); padding:4px 2px} /* 결과표 */ .tablewrap{overflow:auto; max-height:calc(100vh - 430px); min-height:140px} .rtable{width:100%; border-collapse:collapse; font-size:12px} .rtable th{ position:sticky; top:0; z-index:1; text-align:left; cursor:pointer; background:var(--panel-alt); color:var(--dim); font-weight:700; padding:7px 9px; border-bottom:1px solid var(--border); white-space:nowrap; } .rtable th:hover{color:var(--accent)} .rtable th.asc::after{content:' ▲'; font-size:9px} .rtable th.desc::after{content:' ▼'; font-size:9px} .rtable td{padding:6px 9px; border-bottom:1px solid var(--border); vertical-align:top} .rtable tbody tr:hover{background:var(--panel-alt)} .rtable td.nm{font-weight:700; max-width:190px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .rtable td.mono{font-family:Consolas,monospace; color:var(--dim)} .tag{ display:inline-block; font-size:11px; font-weight:700; color:var(--accent); background:var(--accent-soft); border:1px solid var(--accent); border-radius:9px; padding:1px 8px; margin:1px 2px 1px 0; white-space:nowrap; } /* 시장 색 — 데스크톱 market_color() 와 같은 구분 */ .m-kospi{color:var(--mk-kospi)} .m-kosdaq{color:var(--mk-kosdaq)} .m-jp{color:var(--mk-nikkei)} .m-us{color:var(--mk-sp)} /* [2026-09-17 고침 · 사용자 지적] "시장은 색을 각각 쓰는데" - 선물·원자재 ·가상화폐 셋이 같은 강조색이라 구분이 안 됐습니다. 각자 색을 줍니다. 색만으로 읽게 하지 않도록 표에는 시장 이름이 그대로 적혀 있습니다. */ .m-fut{color:var(--mk-fut)} .m-com{color:var(--mk-com)} .m-crypto{color:var(--mk-crypto)} /* 시간대 — 월봉이 가장 밝습니다(긴 봉일수록 밝게). */ .t-D{color:var(--tf-d)} .t-W{color:var(--tf-w)} .t-M{color:var(--tf-m)} /* 조건 딱지 — 조건마다 제 색. `--ck` 하나만 바꾸면 글자·테두리·배경이 같이 따라갑니다. 키는 에이전트가 주는 matched_keys 그대로입니다. */ .tag[data-k]{ color:var(--ck); border-color:var(--ck); background:color-mix(in srgb, var(--ck) 15%, transparent); } .tag.k-double_bottom{--ck:#FF7AA2} .tag.k-ma_touch{--ck:#00E5FF} .tag.k-macd_divergence{--ck:#FFB800} .tag.k-prev_high_support{--ck:#37D67A} .tag.k-trendline{--ck:#C792EA} .tag.k-trendline_touch{--ck:#C792EA} .tag.k-ma_convergence{--ck:#FF9F6B} .tag.k-macd_zero_pullback{--ck:#7FDBDA} /* 요약 칸 — 숫자와 핵심어만 살짝 살립니다. 문구 자체는 데스크톱 함수가 낸 것 그대로 둡니다(웹에서 다시 쓰면 언젠가 어긋납니다). */ .sum b{color:var(--text); font-weight:700} .empty{padding:22px 4px; color:var(--dim); text-align:center; font-size:12px} /* [보완 2026-09-17] 상충으로 못 고르는 조건 — 데스크톱의 회색 처리와 같은 뜻 */ .cond.off{opacity:.38} .cond.off span{color:var(--dim)} .cond.off:hover span{color:var(--dim)} .cond input:disabled{cursor:not-allowed} /* [버그 수정 2026-09-17] 조건 줄을 데스크톱과 같이 '한 줄'로 바꿨습니다. (묶음 상자로 나눠 그렸던 것은 이 화면의 구성이 아니었습니다) */ .condgroups{display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px; padding:2px 2px 4px; margin-bottom:0} .condgroups .cond{padding:2px 0} /* [보완 2026-09-17] 시장별 결과 줄 — 데스크톱 결과 줄과 같은 자리·같은 톤 */ .msummary{font-size:12px; color:var(--dim); padding:4px 2px; line-height:1.6} /* ══ [2026-09-20 사장님 지시] 상관연구 — 국면분석 좌 · 차트 우 ══════ 국면 분석의 막대를 끌면서 차트가 어떻게 바뀌는지 **같이 보이게** 나란히 둡니다. 국면 분석은 값 읽는 칸이라 좁아도 되고, 차트는 넓을수록 좋습니다. 그래서 고정폭(왼쪽) + 나머지 전부(오른쪽). 목업의 차례(왼쪽 국면분석 · 오른쪽 차트)를 그대로 옮겼습니다. */ .corrsplit{display:grid; grid-template-columns:420px minmax(0,1fr); gap:12px; align-items:start} .corrsplit > .panel{margin:0} /* 국면 분석이 아직 안 나왔을 때(hidden)는 차트가 전체를 씁니다 - 빈 칸을 420px 남겨 두면 차트만 쪼그라들어 보입니다. */ .corrsplit:has(> #c-regime.hidden){grid-template-columns:minmax(0,1fr)} /* 좁은 화면에서는 다시 세로로. 나란히 두려다 둘 다 못 보게 되면 나눈 뜻이 없습니다. */ @media (max-width:1400px){ .corrsplit{grid-template-columns:minmax(0,1fr)} } /* 왼쪽 칸에서는 이퀄라이저 두 장을 **위아래로** 쌓습니다 - 가로로 두면 420px 안에서 글자가 눌립니다(`.eqwrap` 은 flex 입니다). */ .corrregime .eqwrap{flex-direction:column} .corrregime .eqcard{min-width:0} .corrregime .scanrow{flex-wrap:wrap} /* 제목 줄의 긴 설명은 이 폭에서 접어 둡니다 - 칸 절반을 설명이 차지하면 정작 볼 숫자가 아래로 밀립니다. */ .corrregime .panel-head .dim:nth-of-type(2){display:none} /* [A-2 2026-09-17] 결과 행을 눌렀을 때 나오는 차트 패널 */ .rtable tbody tr{cursor:pointer} .rtable tbody tr.sel{background:var(--accent-soft); outline:1px solid var(--accent)} .chart-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap} .chart-x{margin-left:auto; padding:3px 10px} .condbadges{display:flex; gap:4px; flex-wrap:wrap} .bigchart{height:460px; min-height:300px; width:100%} .chartnote{font-size:12px; padding:6px 2px 0; line-height:1.6} .chartnote b{color:var(--text)} /* 레이더 화면의 .legend 는 건드리지 않습니다 - 이 차트 것만 */ #chart-legend span{cursor:default; margin-right:12px; font-size:12px; font-weight:700} /* ── [페어검색 2026-09-17 · 인계문서 6장 A-3] ────────────────── 기존 규칙은 하나도 고치지 않았습니다. 아래는 전부 추가입니다. (.panel .btn .rtable .cond 등은 조건조합 화면 것을 그대로 씁니다) */ .pairpick{row-gap:8px} .rowlabel.acc{color:var(--neg)} /* A - 데스크톱 Palette.ACCENT 자리 */ .rowlabel.warnc{color:var(--warn)} /* B - 데스크톱 Palette.WARN */ .sel{ background:var(--panel-alt); color:var(--text); border:1px solid var(--border); border-radius:7px; padding:6px 10px; font-size:12px; font-family:inherit; min-width:130px; } .sel:focus{outline:none; border-color:var(--accent)} .sel.wide{min-width:210px} .pairmsg{padding:4px 2px; line-height:1.6} .pairtable{max-height:calc(100vh - 470px)} .rtable td.num{text-align:right; font-variant-numeric:tabular-nums} .t-pos{color:var(--pos)} .t-neg{color:var(--neg)} .t-warn{color:var(--warn)} .t-dim{color:var(--dim)} .panel-sub{font-size:11px; font-weight:700; color:var(--dim); padding:8px 2px 4px} /* [2026-09-21 사장님 지시] "페어연구에서 시뮬레이션 계산 내역에 스크롤이 생겨.. 위에 차트를 조금 줄여서 스크롤이 안생기도록 해줘" 가격 340 + 오실레이터 190 = 530px 이라, 아래 매매 시뮬레이션 표가 화면 밖으로 밀려 칸 안에서 또 스크롤이 생겼습니다. 둘을 합쳐 120px 줄입니다 — 차트는 세로가 조금 줄어도 모양을 읽는 데 지장이 없지만, 표는 줄이 잘리면 값을 못 읽습니다. */ .pairchart{height:270px; min-height:190px; width:100%} .pairchart.small{height:140px; min-height:110px} #p-legend span{margin-right:14px; font-size:12px; font-weight:700} .guides{display:flex; align-items:center; gap:10px; margin-left:14px} .gchk{display:flex; align-items:center; gap:5px; cursor:pointer; font-size:11px; color:var(--dim)} .gchk:hover span{color:var(--accent)} .gchk input{accent-color:var(--accent); cursor:pointer} /* 작은 대화상자 - 데스크톱 QDialog 자리 */ .modal{ position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; z-index:50; } .modal-box{ background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:18px 20px; min-width:420px; max-width:640px; max-height:80vh; overflow:auto; } .modal-head{font-size:15px; font-weight:800; margin-bottom:6px} .modal-sub{font-size:12px; color:var(--dim); line-height:1.6; margin-bottom:8px} .modal-warn{font-size:11px; color:var(--warn); margin-bottom:6px} .clist{margin:8px 0; display:flex; flex-direction:column; gap:5px} .crow{ display:flex; align-items:center; gap:10px; padding:5px 8px; background:var(--panel-alt); border:1px solid var(--border); border-radius:7px; font-size:12px; } .crow .mono{font-family:Consolas,monospace; flex:1 1 auto} .btn.small{padding:3px 10px; font-size:11px} /* ── [지표 상관 검색 2026-09-17 · A-3b] 전부 추가입니다 ───────── */ .rowlabel.sa{color:#4dd2ff} .rowlabel.sb{color:#ffd166} .rowlabel.sc{color:#ff6b9d} .sel.narrow{min-width:92px; max-width:110px} .sel.ro{color:var(--dim); background:var(--panel)} .btn.xbtn{padding:4px 9px; font-size:11px} .btn.xbtn:hover{color:var(--neg); border-color:var(--neg)} /* [2026-09-20] 찾기창을 여는 단추. `.xbtn` 은 원래 ✕(지우기)용이라 올리면 빨강이 됩니다 - 고르는 단추에는 맞지 않아 색을 되돌립니다. 고른 것이 글자로 들어가므로 폭은 내용에 맞춥니다. */ .btn.pickbtn{padding:5px 12px; font-size:12px; max-width:none} .btn.pickbtn:hover{color:var(--accent); border-color:var(--accent)} .btn.pickbtn.set{color:var(--text); border-color:var(--accent)} .corrbar{ font-size:13px; color:var(--text); background:var(--panel-alt); border:1px solid var(--border); border-radius:8px; padding:8px 12px; margin-bottom:8px; line-height:1.7; } .pairchart.tall{height:430px; min-height:260px} #c-legend span{margin-right:14px; font-size:12px; font-weight:700} .rgout{font-size:12px; line-height:1.9; padding:8px 2px 2px} .rgout b{color:var(--text)} /* [2026-09-18 · 6-5] 자동 스캔이 찾아 준 한 줄 */ .rgbest{border:1px solid var(--pos); border-radius:8px; padding:6px 10px; margin:2px 0 7px; background:color-mix(in srgb, var(--pos) 12%, transparent); color:var(--text)} .t-warn{color:var(--warn)} /* 국면 분석 설명줄의 위/아래 색칠 표시 - app.py GUIDE_FILL_COLORS 와 같은 색 */ .sw{font-weight:900} .sw.above{color:#ff5470} .sw.below{color:#4d8bff} /* ── 라이선스 (2026-09-17 · 인계문서 6장 D) ───────────────── 데스크톱 LicenseActivationDialog 의 색·간격을 그대로 옮겼습니다 (Palette.PANEL / BORDER / ACCENT_SOFT → 여기서는 같은 뜻의 변수). */ /* [2026-09-22] 높이가 20px 이었습니다. 이 제품은 아이패드(가로)도 쓰실 수 있다고 홈에 적어 두었는데, 손가락으로 누르기엔 너무 낮습니다. 위아래 여백만 2px 씩 늘려 24px 로 만듭니다 - 글자 크기는 그대로라 윗줄 배치가 흔들리지 않습니다. */ /* [2026-09-22] 10.5px 글씨를 11px 로 올렸습니다(.mbox .cg · .ptxt · .hbadge). 반 픽셀 차이지만 등급 딱지처럼 짧고 굵은 글자는 10.5px 에서 뭉개져 보입니다. 자리는 그대로입니다. */ .licbtn{ background:transparent; color:var(--dim); border:1px solid transparent; border-radius:6px; padding:3px 7px; font-size:11px; font-weight:700; cursor:pointer; } .licbtn:hover{border-color:var(--border); color:var(--text)} .licbtn.bad{color:var(--neg)} /* [2026-09-18] 머리줄로 올라온 라이선스 표시. 바닥에 있을 때는 11px 흐린 글자라 눈에 안 들어왔습니다. 여기서는 새로고침 단추와 나란히 서므로 같은 크기·같은 모양으로 맞추고, 남은 날수에 따라 색만 달라지게 합니다(문구는 에이전트가 줍니다). */ .licbtn.top{ /* [2026-09-22 검사에서 잡힘] 높이가 20px 이라 손가락으로 누르기에 낮았습니다(태블릿에서 씁니다). 글씨·여백은 그대로 두고 최소 높이만 24px 로 잡습니다 - 생김새는 안 바뀝니다. */ min-height:24px; font-size:11.5px; font-weight:700; padding:6px 12px; border-radius:999px; color:var(--pos); border-color:rgba(55,214,122,.38); background:rgba(55,214,122,.10); display:inline-flex; align-items:center; gap:6px; } /* [2026-09-20 사장님 지시 · B안] 자물쇠 이모티콘 대신 **점 하나**. 색이 곧 상태입니다 - 초록(넉넉) · 주황(30일 이하) · 빨강(7일 이하·만료). 점은 글자 앞에 CSS 로 붙이므로 문구(에이전트가 줍니다)는 안 건드립니다. */ .licbtn.top::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; flex:0 0 auto; } .licbtn.top:hover{border-color:var(--accent); color:var(--accent)} /* 30일 이하 = 주황, 7일 이하·만료 = 빨강. 색만 바뀌고 말을 걸지는 않습니다 - 갱신 안내 띠는 7일 전부터라는 결정(license.js NOTICE_DAYS)을 그대로 둡니다. */ .licbtn.top.soon{ color:var(--warn); border-color:var(--warn); background:rgba(255,184,0,.10); } .licbtn.top.bad{ color:var(--neg); border-color:var(--neg); background:rgba(255,84,112,.10); } .licnotice{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:var(--accent-soft); border-bottom:1px solid var(--warn); color:var(--text); font-size:12px; padding:7px 16px; } .licnotice .btn{padding:3px 9px; font-size:11px} .licnotice-t{flex:1 1 auto; min-width:200px} /* 만료 10일 이하 - 미리 알림과 눈에 띄게 달라야 합니다. 색만으로 구분하지 않도록 문구 앞의 아이콘도 🔔 → ⏰ 로 바뀝니다. */ .licnotice.urgent{ background:color-mix(in srgb, var(--warn) 18%, transparent); border-bottom:2px solid var(--warn); font-weight:600; } .licnotice .btn.primary{ background:var(--accent); border-color:var(--accent); color:#fff; font-weight:700; } .licbox{ width:min(680px, 92vw); max-height:92vh; overflow:auto; text-align:left; background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:18px 20px; } .lichead{font-size:13px; font-weight:700; line-height:1.5; margin-bottom:12px} .liccontact{ background:var(--accent-soft); border:1px solid var(--accent); border-radius:6px; padding:9px 12px; font-size:12px; margin-bottom:12px; } .liclabel{font-size:12px; color:var(--dim); margin:10px 0 5px} .licrow{display:flex; gap:8px; align-items:center; margin-top:6px} .licrow.end{justify-content:flex-end; margin-top:12px} .licin{ flex:1 1 auto; background:var(--panel-alt); color:var(--text); border:1px solid var(--border); border-radius:6px; padding:8px 10px; font-family:monospace; font-size:12px; } .licin.code{color:var(--accent); font-weight:700; letter-spacing:.5px} .lickey{ width:100%; height:88px; resize:vertical; box-sizing:border-box; background:var(--panel-alt); color:var(--text); border:1px solid var(--border); border-radius:6px; padding:8px 10px; font-family:monospace; font-size:12px; } .licmsg{min-height:17px; font-size:12px; margin-top:8px; color:var(--dim)} .licmsg.ok{color:var(--pos)} .licmsg.bad{color:var(--neg)} /* [A-4 2026-09-17] 추천 종목·퀀트 투자 결과표의 칸 색. 데스크톱 render_ai_reco_table / render_quant_table 이 쓰는 Palette 색과 같은 값입니다(충족조건 4/4 = 강조색 + 굵게, 미달 = 경고색 / 손절가는 푸른 계열 DOWN_BLUE). 기존 규칙은 하나도 안 고치고 뒤에 더했습니다. */ .rtable td.cond-full{color:var(--accent); font-weight:700} .rtable td.cond-part{color:var(--warn); font-weight:700} .rtable td.warnc{color:var(--warn)} /* [2026-09-20 사장님 지시] 관심종목 표의 **수익률 칸**은 누르면 관심종목 차트가 열립니다. 누를 수 있다는 것이 보여야 눌러 보십니다 — 점선 밑줄과 손가락 커서를 답니다(색은 빨강·초록 그대로). */ .rtable td.wcgo{cursor:pointer; text-decoration:underline; text-decoration-style:dotted; text-underline-offset:3px; text-decoration-color:var(--border)} .rtable td.wcgo:hover{text-decoration-color:currentColor; background:var(--accent-soft)} /* [2026-09-20 사장님 지시] 퀀트 표의 값 열에 **높낮이 색**. "높은 점수는 붉은색 - 낮은 점수는 푸른색 (중간에는 각 색의 중간 색) 나머지 rs의 값, 모멘텀의 값, fip 연속성의 값, 변동성, 거래량비" 같은 열 안에서 그 값이 몇 번째인지(순위)로 11 단계 중 하나를 고릅니다. 순위로 고르는 까닭 - 한 종목만 유별나게 크면(예: 거래량비 20배) 값 그대로 나누었을 때 나머지가 전부 같은 푸른색으로 뭉개집니다. 값을 바꾸는 것이 아니라 **글자색만** 입힙니다(판정 로직과 무관). 밝은 바탕에서도 읽히도록 아래에 밝은 화면용을 따로 둡니다. */ .rtable td.heat0{color:#3EA6FF;font-weight:600} .rtable td.heat1{color:#519EF1;font-weight:600} .rtable td.heat2{color:#6596E2;font-weight:600} .rtable td.heat3{color:#788DD4;font-weight:600} .rtable td.heat4{color:#8B85C6;font-weight:600} .rtable td.heat5{color:#9E7DB8;font-weight:600} .rtable td.heat6{color:#B275A9;font-weight:600} .rtable td.heat7{color:#C56D9B;font-weight:600} .rtable td.heat8{color:#D8648D;font-weight:600} .rtable td.heat9{color:#EC5C7E;font-weight:600} .rtable td.heat10{color:#FF5470;font-weight:600} /* 밝은 화면용 - 같은 순서로 푸름 -> 붉음 */ :root[data-theme="light"] .rtable td.heat0{color:#0F6FC9} :root[data-theme="light"] .rtable td.heat1{color:#2369BC} :root[data-theme="light"] .rtable td.heat2{color:#3762B0} :root[data-theme="light"] .rtable td.heat3{color:#4B5CA3} :root[data-theme="light"] .rtable td.heat4{color:#5F5697} :root[data-theme="light"] .rtable td.heat5{color:#72508A} :root[data-theme="light"] .rtable td.heat6{color:#86497D} :root[data-theme="light"] .rtable td.heat7{color:#9A4371} :root[data-theme="light"] .rtable td.heat8{color:#AE3D64} :root[data-theme="light"] .rtable td.heat9{color:#C23658} :root[data-theme="light"] .rtable td.heat10{color:#D6304B} .rtable td.blue{color:#4dabf7} /* [A-5 2026-09-17] 설정 화면. 기존 규칙은 안 건드리고 뒤에 더했습니다. */ .setbox{display:flex; flex-direction:column; gap:8px; padding:4px 0} .setbox.adv{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:6px 14px} .setrow{display:flex; align-items:center; gap:10px; flex-wrap:wrap} .setname{flex:0 0 190px; font-size:13px; font-weight:600} .setname.sm{flex:0 0 220px; font-size:11px; font-weight:400; color:var(--dim)} .diffbar{flex:0 0 240px; accent-color:var(--accent); cursor:pointer} .setlv{flex:0 0 72px; font-size:12px; font-weight:700; color:var(--accent)} .setvals{font-size:11px} .setin{ font-family:inherit; font-size:12px; color:var(--text); background:var(--panel); border:1px solid var(--border); border-radius:4px; padding:3px 8px; width:96px; } .setin.wide{width:200px} .setin:focus{outline:none; border-color:var(--accent)} .setcol{width:44px; height:24px; background:none; border:1px solid var(--border); border-radius:4px; padding:0; cursor:pointer} /* [A-6/A-7 2026-09-17] 관심종목 · 개발자 문의. .navlink 는 '개발자 문의' 단추입니다 - 화면 전환이 아니라 덮개라서 class 를 navbtn 으로 주지 않았고(index.html 주석 참고), 생김새만 .navbtn 과 똑같이 맞춥니다. */ /* [2026-09-20 · B안] [내 계정] 은 오른쪽 도구 줄로 갔습니다. 화면 전환이 아니라 창을 여는 단추라, 메뉴 단추와 같은 모양이면 어디까지가 메뉴인지 헷갈립니다. 테두리를 줘서 도구로 보이게 합니다. */ .navlink{ background:transparent; color:var(--dim); border:1px solid var(--border); border-radius:8px; padding:6px 13px; font-weight:600; font-size:12px; cursor:pointer; font-family:inherit; white-space:nowrap; } .navlink:hover{color:var(--accent); border-color:var(--accent)} .btn.wsmall{padding:2px 8px; font-size:11px} /* [A-9 2026-09-17] 조건 조합 자동 모드. 기존 규칙은 안 건드렸습니다. */ .modes{display:grid; grid-template-columns:1fr 1fr; gap:10px} .modecard{ display:flex; flex-direction:column; align-items:flex-start; gap:3px; text-align:left; padding:10px 14px; cursor:pointer; font-family:inherit; background:var(--panel); color:var(--text); border:1px solid var(--border); border-radius:8px; font-size:13px; } .modecard:hover{border-color:var(--accent)} .modecard.on{border-color:var(--accent); background:var(--accent-soft)} .modecard b{font-size:13px} .steps{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:8px 0} .step{font-size:12px; color:var(--dim)} .step b{color:var(--text); margin-right:6px} .auto3{display:grid; grid-template-columns:200px 300px 1fr; gap:12px} .autocol{min-width:0} .autocol-head{font-size:12px; font-weight:700; color:var(--dim); margin-bottom:6px} .autolist{max-height:420px; overflow:auto; display:flex; flex-direction:column; gap:4px} .autocol.wide .autolist{display:block} .sizebtn,.combobtn{ display:flex; justify-content:space-between; align-items:center; gap:8px; width:100%; text-align:left; padding:7px 10px; cursor:pointer; font-family:inherit; font-size:12px; color:var(--text); background:var(--panel); border:1px solid var(--border); border-radius:6px; } .sizebtn:hover,.combobtn:hover{border-color:var(--accent)} .sizebtn.on,.combobtn.on{border-color:var(--accent); background:var(--accent-soft)} .combobtn.zero{color:var(--dim)} .combobtn span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap} /* [A-10 2026-09-17] 홈 빠른 검색 결과 */ .hits{max-height:220px; overflow:auto; display:flex; flex-direction:column; gap:2px; border:1px solid var(--border); border-radius:6px; padding:6px; margin:6px 0} .hit{display:flex; gap:12px; align-items:baseline; padding:3px 6px; font-size:12px} .hit:hover{background:var(--accent-soft)} .hit b{min-width:150px} /* ══════════════════════════════════════════════════════════════ [2026-09-17] 시장 레이더 보완 + 조건 안내 ══════════════════════════════════════════════════════════════ */ .mbox.clickable, .card.clickable, .chip.clickable{cursor:pointer} .mbox.clickable:hover{border-color:var(--accent)} .card.clickable:hover{background:var(--panel-alt)} .chip.clickable:hover{filter:brightness(1.35)} .mbox.clickable:focus-visible, .card.clickable:focus-visible, .chip.clickable:focus-visible{outline:2px solid var(--accent); outline-offset:2px} .mbox .spark{display:block; width:100%; height:26px; margin:4px 0 2px; opacity:.85} .mbox .chgs{display:flex; gap:8px; flex-wrap:wrap; margin:2px 0 3px} .mbox .cg{font-size:11px; white-space:nowrap} .mbox .cg .lb{color:var(--dim); margin-right:2px} .mbox .cg.up{color:var(--pos)} .mbox .cg.down{color:var(--neg)} .mbox .cg.flat{color:var(--dim)} .mbox .s .q, .card .score .q{color:var(--dim); font-size:9px; margin-left:3px; vertical-align:super; cursor:help} .rebase{font-size:11px; color:var(--dim); padding:3px 2px 0; user-select:none} .rebase.on{color:var(--accent); cursor:pointer} .rebase.on:hover{text-decoration:underline} .chart-tip{ position:absolute; z-index:5; pointer-events:none; background:rgba(11,14,20,.94); border:1px solid var(--border); border-radius:6px; padding:6px 9px; font-size:11.5px; line-height:1.55; white-space:nowrap; box-shadow:0 6px 18px rgba(0,0,0,.45); } .chart-tip .t{color:var(--accent); font-weight:700; margin-bottom:2px} .chart-tip.hidden{display:none} .rdbox{ width:min(1020px, 94vw); max-height:92vh; overflow:auto; text-align:left; background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:16px 18px; } .rdhead{display:flex; align-items:flex-start; justify-content:space-between; gap:14px} .rdtitle{font-size:15px; font-weight:700} .rdsub{font-size:11.5px; color:var(--dim); margin-top:2px} .rdbody{margin-top:12px} .chart.tall{height:min(58vh, 460px)} .rd-msg{padding:28px 6px; color:var(--dim); font-size:13px; text-align:center} /* ═══════════════════════════════════════════════════════════════ [2026-09-18] 화면 배치 (묶음 C) 세로로 길게 늘어놓아 스크롤이 생기던 화면들을 좌우 두 칸으로 폅니다. **HTML 은 거의 안 건드렸습니다** - 차익거래·페어검색은 CSS 만으로 자리를 바꿉니다. 손잡이 id 가 그대로라 js 는 손댈 것이 없습니다. ═══════════════════════════════════════════════════════════════ */ /* ── 통계적 차익거래 · 페어검색 : 좌(조건+표) / 우(차트) ────── 차트 칸이 닫혀 있을 때는 한 칸으로 두고(표가 넓게 보이는 게 낫습니다), 차트가 열리면 두 칸으로 갈라집니다. `:has()` 로 여닫힘을 봅니다 - js 에서 클래스를 붙여 주지 않아도 되도록. */ #arbmain, #pairmain{ display:grid; gap:9px; align-content:start; grid-template-columns:1fr; } #arbmain > .panel, #pairmain > .panel{margin-top:0; min-width:0} #arbmain:has(#arb-chart:not(.hidden)), #pairmain:has(#p-chartpanel:not(.hidden)){ grid-template-columns:minmax(380px, 0.85fr) minmax(0, 1.15fr); align-content:stretch; } /* 왼쪽 위 = 조건줄, 왼쪽 아래 = 표, 오른쪽 = 차트(두 줄 높이) */ #arbmain:has(#arb-chart:not(.hidden)) > .panel:nth-of-type(1), #pairmain:has(#p-chartpanel:not(.hidden)) > .panel:nth-of-type(1){ grid-column:1; grid-row:1; } #arbmain:has(#arb-chart:not(.hidden)) > .panel:nth-of-type(2), #pairmain:has(#p-chartpanel:not(.hidden)) > .panel:nth-of-type(2){ grid-column:1; grid-row:2; min-height:0; display:flex; flex-direction:column; } #arbmain > #arb-chart, #pairmain > #p-chartpanel{ grid-column:2; grid-row:1 / span 2; min-height:0; display:flex; flex-direction:column; overflow:auto; } /* 왼쪽 표는 제 칸 안에서 스크롤합니다(화면 전체가 밀리지 않게). */ #arbmain .tablewrap, #pairmain .tablewrap{min-height:0; overflow:auto} /* ── 지표 상관 검색 : A·B·C 를 가로 세 칸으로 ──────────────── */ /* [2026-09-21 사장님 지시] A·B·C **옆**에 기간·분석을 둡니다. 기간 칸은 고르는 칸보다 좁아도 되므로 마지막 칸만 좁게 잡습니다. */ /* [2026-09-21 사장님 지적] "조건 a,b,c,기간, 분석의 내용이 서로 너무 멀리 벌어져 있어... 조금씩 좌측에 몰아주고 배열을 이쁘게 만들어줘" 까닭: 칸을 `1fr` 로 잡아 **화면 너비를 넷이 나눠 가졌습니다.** 와이드 화면에서는 칸 하나가 340px 가 되는데 안에 든 것은 [A] [🔍 A 고르기] [✕] 뿐이라, 사이가 휑하게 벌어졌습니다. 고친 것: 칸 너비를 **내용에 맞춰** 잡고(최대 300px) 남는 자리는 오른쪽에 그대로 둡니다(`justify-content:start`). 그러면 넷이 왼쪽에 모여 붙습니다. 종목을 고르면 이름 칸이 생기는데, 그때도 300px 를 넘지 않습니다. */ .pickgrid{display:grid; grid-template-columns:repeat(4, max-content); justify-content:start; gap:8px 14px; align-items:center} .pickgrid .runcell{justify-content:flex-start} /* 칸 안에서도 벌어지지 않게 — 이름표(A·B·C·기간)의 최소 너비를 풉니다. 원래 58px 이라 글자 한 자짜리 이름표 뒤가 휑했습니다. */ .pickgrid .rowlabel{min-width:0} .pickgrid > .pairpick{gap:7px} /* 기간 고르는 칸은 내용만큼만 — 늘리면 또 벌어집니다. */ .pickgrid .runcell .sel{flex:0 0 auto; width:auto; min-width:118px} /* 고른 것은 🔍 단추가 **그대로 보여 줍니다**(corr.js paintPick). 이름이 길면 단추가 늘어나 옆 칸을 밀어내므로 너비를 못박고 꼬리를 … 로 자릅니다. 전체 이름은 말풍선(title)에 그대로 있습니다. */ .pickgrid .pickbtn{max-width:208px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:inline-block} .pickgrid .sel.wide{flex:0 0 186px; width:186px; min-width:0} .pickgrid > .pairpick{margin:0; min-width:0; flex-wrap:nowrap} .pickgrid .sel{min-width:0} @media (max-width:1180px){ .pickgrid{grid-template-columns:repeat(2, max-content)} } @media (max-width:760px){ .pickgrid{grid-template-columns:1fr} } /* ── 설정 : 두 칸으로 펴서 한 화면에 담습니다 ───────────────── 세로로 여섯 칸을 쌓아 324px 가 넘쳤습니다. 왼쪽에 제일 긴 칸 (조건별 난이도)을, 오른쪽에 짧은 셋(이평선·MACD·테마)을 두면 높이가 맞아떨어집니다. '고급'은 항목이 계속 늘어날 자리라 제 칸 안에서만 스크롤하게 두었습니다 - 화면 전체가 밀리지 않게. */ #setmain{display:grid; grid-template-columns:1.15fr 1fr; gap:9px; align-content:start} #setmain > .panel{margin-top:0; min-width:0} /* [2026-09-19 고침] 자리를 **칸 이름**으로 잡습니다. 전에는 `:nth-of-type(2)`~`(6)` 으로 '몇 번째 칸'인지만 보고 있었는데, 9월 19일에 [서버 수집 상태] 칸을 두 번째로 끼워 넣으면서 번호가 전부 한 칸씩 밀렸습니다. 그 바람에 이평선·MACD·테마가 엉뚱한 줄로 가고 왼쪽 칸이 통째로 비어 "이평선 내용이 안 나오는" 것처럼 보였습니다. 이제 칸이 늘거나 줄어도 자리가 흔들리지 않습니다. 줄 번호도 적지 않습니다 - [서버 수집 상태]가 숨으면(고객 화면) 줄이 하나 줄어들기 때문에, 브라우저가 알아서 채우게 둡니다. */ #setmain > #set-p-bar, #setmain > #ops-panel, #setmain > #set-p-adv{grid-column:1 / -1} #setmain > #set-p-adv{min-height:0} #setmain > #set-p-diff{grid-column:1; grid-row:span 3} #setmain > #set-p-ma, #setmain > #set-p-macd, #setmain > #set-p-theme{grid-column:2} /* '고급'은 항목이 계속 늘어날 자리라 제 칸 안에서만 스크롤합니다. 150px 은 너무 얕아서 두세 줄 보고 나면 전부 스크롤이었습니다 (사장님: "통으로 안 나와"). 화면 높이에 맞춰 늘립니다. */ #set-adv{max-height:min(48vh, 420px); overflow:auto} @media (max-width:1180px){ #setmain{grid-template-columns:1fr} #setmain > .panel{grid-column:1; grid-row:auto} } /* ── 설정 : 저장 줄을 위에 붙여 둡니다 ─────────────────────── */ .setbar{ position:sticky; top:0; z-index:5; margin-top:0; background:var(--panel); border-color:var(--accent-soft); } .setbar .scanrow{align-items:center} .setpath{margin-left:auto; font-size:11px; opacity:.75} /* [2026-09-18 · 2-8] 조건조합 차트를 팝업으로. 예전에는 결과표 아래에 펼쳐져서, 표를 보려면 차트를 닫아야 하고 차트를 보려면 표가 밀렸습니다. 이제 화면 가운데에 크게 뜹니다. */ #scveil .panel{ width:min(1240px, 96vw); height:min(860px, 92vh); margin:0; display:flex; flex-direction:column; min-height:0; } /* [2026-09-18 · A-2] 차트 조작 막대(chartkit.js)는 높이만큼만 차지하고, 남는 세로는 전부 차트가 씁니다. */ #scveil #chart-ctl{flex:0 0 auto} #scveil #chart-box{flex:1 1 auto; min-height:0; height:auto} #scveil #chart-note{flex:0 0 auto; max-height:22vh; overflow:auto} #scveil .panel.hidden{display:none} /* [2026-09-18 · 7-5] 설정 저장 확인 덮개 */ .setconfirm{width:min(680px,94vw)} .setcfoot{display:flex; align-items:center; gap:10px; padding:10px 2px 2px; border-top:1px solid var(--border); margin-top:8px} .setcchk{margin-right:auto} .setctab{width:100%; border-collapse:collapse; font-size:12px} .setctab th,.setctab td{padding:5px 8px; border-bottom:1px solid var(--border); text-align:left; vertical-align:top} .setctab th{color:var(--dim); font-weight:700; font-size:11px} .setctab .was{color:var(--dim)} .setctab .now{color:var(--accent); font-weight:700} .setcwhy{margin-top:10px; font-size:12px; color:var(--dim); line-height:1.65} .setcwhy b{color:var(--text)} .setcwarn{ margin-top:10px; font-size:12px; color:var(--warn); line-height:1.65; background:color-mix(in srgb, var(--warn) 12%, transparent); border:1px solid var(--warn); border-radius:8px; padding:8px 10px; } /* 양립할 수 없는 조건 안내 */ .cond.off{cursor:not-allowed} .cond.off span::after{content:" ⊘"; color:var(--dim); font-size:10px} .condnote{ flex:1 1 100%; font-size:11.5px; color:var(--warn); background:color-mix(in srgb, var(--warn) 12%, transparent); border:1px solid color-mix(in srgb, var(--warn) 38%, transparent); border-radius:5px; padding:5px 9px; margin-top:2px; } .condnote.hidden{display:none} .cpbox{ width:min(460px, 92vw); text-align:left; background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:18px 20px; } .cpbox h4{margin:0 0 10px; font-size:14px} .cpbox p{margin:0 0 10px; font-size:12.5px; color:var(--dim); line-height:1.65} .cpbox b{color:var(--text)} .cprow{display:flex; gap:8px; justify-content:flex-end; margin-top:14px} /* ══════════════════════════════════════════════════════════════ [2026-09-18 · A-3 · 1-4 / 6-3] 큰 차트의 계열별 기능 칸 사용자 그림 1_3.jpg 의 모양 그대로 - 계열마다 한 줄(세로)에 표시 제외 · 중간선 · 추세선 · 음영 네 칸. ══════════════════════════════════════════════════════════════ */ .serctl{display:flex; gap:10px; flex-wrap:wrap; padding:4px 0 8px} .sercol{border:1px solid var(--border); border-radius:9px; padding:7px 10px; min-width:150px; background:rgba(255,255,255,.015)} .serhd{font-weight:700; font-size:12px; margin-bottom:5px} .serhd span{color:var(--text)} .serck{display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--dim); cursor:pointer; padding:1.5px 0} .serck:hover{color:var(--text)} .serck input{accent-color:var(--accent); cursor:pointer; margin:0} /* [2026-09-20] 기준선이 없어서 못 켜는 음영 칸. 감추지 않고 흐리게 잠급니다 - 없어지면 "기능이 사라졌나" 싶습니다. */ .serck.off{opacity:.42; cursor:not-allowed} .serck.off:hover{color:var(--dim)} .serck.off input{cursor:not-allowed} #rd-base{margin-top:6px} /* [A-3 · 1-4] ①②③④ 칸은 더블클릭하면 큰 차트가 뜹니다 */ .chart-panel .chart{cursor:zoom-in} /* ══════════════════════════════════════════════════════════════ [2026-09-18 · A-4 · 6-4 / 6-5] 이퀄라이저 국면분석 사용자 그림 6_4.jpg 의 모양 — 왼쪽에 기준 지표의 세 숫자, 오른쪽에 비교 지표의 세로 막대(지정선). ══════════════════════════════════════════════════════════════ */ .eqwrap{display:flex; gap:12px; align-items:stretch; padding:8px 0 4px; flex-wrap:wrap} .eqcard{border:1px solid var(--border); border-radius:11px; padding:10px 13px; background:rgba(255,255,255,.015); min-width:210px} .eqcard-r{flex:1 1 320px} .eqttl{display:inline-block; font-size:11px; font-weight:700; color:#0B0E14; background:#F3D9D2; border-radius:5px; padding:1px 8px; margin-bottom:7px} .eqname{font-size:14px; font-weight:700; color:var(--text); background:rgba(0,229,255,.12); border-radius:6px; padding:4px 9px; display:inline-block; margin-bottom:9px} .eqnum{display:flex; align-items:center; gap:9px; margin:5px 0; font-size:12px; color:var(--dim)} .eqnum span{border:1px solid var(--border); border-radius:5px; padding:2px 8px; min-width:66px; text-align:center} .eqnum b{font-size:14px; color:var(--warn); min-width:54px} .eqbody{display:flex; gap:14px; align-items:stretch} .eqlegend{font-size:11px; color:var(--dim); display:flex; flex-direction:column; gap:5px; justify-content:center} .eqlegend .sw.med{color:#37d67a} .eqlegend .sw.trd{color:#8bd6a8} .eqbar{position:relative; width:52px; height:132px; flex:0 0 auto; border:1px solid var(--border); border-radius:7px; background:#0B0E14; cursor:ns-resize; outline:none} .eqbar:focus{border-color:var(--accent)} .eqfill{position:absolute; left:18px; right:18px; top:6px; bottom:6px; background:linear-gradient(#ff9e64, #e06a3a); border-radius:3px} .eqmark{position:absolute; left:0; right:0; height:0; border-top:1px solid #37d67a} .eqmark.trd{border-top-style:dashed; border-top-color:#8bd6a8} .eqhit{position:absolute; left:0; right:0; top:6px; bottom:6px; border-radius:6px; pointer-events:none; opacity:.55} .eqknob{position:absolute; left:-3px; right:-3px; height:9px; margin-top:-4.5px; background:#1E4F63; border:1px solid var(--accent); border-radius:3px} .eqknob span{position:absolute; left:calc(100% + 7px); top:-4px; font-size:11px; font-weight:700; color:var(--accent); white-space:nowrap} .eqbar .eqmark{pointer-events:none} /* ══════════════════════════════════════════════════════════════ [2026-09-18] 홈 화면 + 면책 문구 ══════════════════════════════════════════════════════════════ */ /* ── [2026-09-20] 홈 화면 새 조판 ───────────────────────────── 사장님이 주신 목업(고객 사이트)의 짜임을 프로그램 안 홈에 옮겼습니다. · 눈썹(작은 대문자 라벨 + 가로줄) → 큰 제목 → 설명 · 숫자 띠 4칸 · 기능 칸 · 자료 흐름 · 레이더 3칸 · 문답 색은 이미 있는 팔레트를 그대로 씁니다(목업도 같은 값이었습니다). **바로가기 단추는 넣지 않습니다** - 09-19 지시("화면 바로가기 기능은 없애줘")를 그대로 지킵니다. */ /* [2026-09-20 사장님 지적] "홈 화면이 와이드로 변경되지 않음" 1080px 로 묶여 있어서 1920 화면에서 좌우가 420px 씩 비었습니다(실측). 시장 레이더는 `.wrap` 만 써서 꽉 차는데 홈만 가운데에 갇혀 있었습니다. 속 짜임(히어로 2열 · 기능 3×3 · 레이더 2열 · 문답 2열)은 이미 넓은 화면을 받게 되어 있어서, **폭을 푸는 것만으로** 목업대로 펴집니다. 아주 넓은 화면에서 끝없이 늘어나지는 않게 상한만 둡니다 - 글줄은 아래 .hlede/.htiny 에서 따로 잡습니다. */ /* [2026-09-20 사장님 지적] "화이드 화면도 아니야" 1080 → 1720px 로 넓혔는데도 1920 화면에서 좌우가 100px 씩 남았습니다. 상한을 없애고 **화면을 다 쓰게** 합니다 - 시장 레이더와 같은 모양이 됩니다. 글줄이 길어지는 문제는 아래 .hlede/.htiny 의 64ch 가 이미 잡고 있으므로, 칸과 표만 넓어집니다. */ #homemain{max-width:none; margin:0} .hsec{padding:26px 24px} .heyebrow{display:flex; align-items:center; gap:10px; margin:0 0 12px; font-size:11px; font-weight:700; letter-spacing:.14em; color:var(--accent)} .heyebrow::after{content:""; flex:1 1 auto; height:1px; background:var(--border)} .hsec h1{margin:0; font-size:clamp(24px,3.6vw,38px); line-height:1.2; font-weight:800; letter-spacing:-.02em; color:var(--text)} .hsec h2{margin:0 0 10px; font-size:clamp(18px,2.2vw,24px); line-height:1.32; font-weight:700; letter-spacing:-.02em; color:var(--text)} .hlede{font-size:14.5px; color:var(--dim); line-height:1.75; margin:14px 0 0; max-width:62ch} .hlede b{color:var(--text); font-weight:700} .htiny{font-size:12px; color:var(--dim); margin:14px 0 0} .htiny b{color:var(--text)} /* [2026-09-20] 홈 폭을 푼 뒤 **글줄만** 잡습니다. 칸(카드·그리드)은 폭을 다 쓰되, 문장이 한 줄에 120자씩 늘어지면 눈이 줄을 놓칩니다. */ .hsec .hlede, .hsec .htiny, .hsec .hstale{max-width:64ch} /* [2026-09-20 사장님 지시] 홈의 신청 단추 두 개. 처음 오신 손님이 제일 먼저 보는 자리라 크게 둡니다. 좁은 화면에서는 세로로 쌓입니다(단추가 잘려서 못 누르면 안 되니까요). */ .hcta{display:flex; flex-wrap:wrap; gap:10px; margin:20px 0 0} .hcta button{font-family:inherit; font-size:14px; font-weight:700; padding:12px 20px; border-radius:10px; cursor:pointer; border:1px solid var(--line); background:var(--panel2,#151b28); color:var(--text)} .hcta button:hover{border-color:var(--accent)} .hcta button.go{background:var(--accent); border-color:var(--accent); color:#0B0E14} .hcta button.go:hover{filter:brightness(1.08)} .hcta .hctanote{flex-basis:100%; font-size:11.5px; color:var(--dim); margin:2px 0 0} /* [2026-09-22] 기기 묶음 안내. 손님이 키를 넣기 직전에 꼭 읽으셔야 할 말이라 hctanote 보다 한 단계 더 눈에 띄게 하되, 겁주지 않게 테두리만 왼쪽에 둡니다(hstale 과 같은 결). */ .hcta .hctadev{flex-basis:100%; font-size:11.5px; color:var(--dim); line-height:1.65; margin:8px 0 0; padding:8px 11px; border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:8px; background:transparent} .hcta .hctadev b{color:var(--text); font-weight:700} /* 실시간이 아니라는 고지. 눈에 띄되 광고처럼 보이지 않게 테두리만. */ .hstale{font-size:12px; color:var(--dim); line-height:1.7; margin:18px 0 0; padding:10px 12px; border:1px solid var(--line); border-left:3px solid #FFB020; border-radius:8px; background:transparent} .hstale b{color:var(--text)} /* 히어로 - 왼쪽 글, 오른쪽 실제 화면 그림 */ .hgrid{display:grid; grid-template-columns:1fr; gap:22px} @media(min-width:900px){.hgrid{grid-template-columns:1.02fr .98fr; gap:28px; align-items:center}} /* [2026-09-21 사장님 지시] 손으로 그린 '이런 게 나옵니다' 예시 카드 (.hscan / .hrow / .htag …)를 걷어냈습니다. 그 자리에는 사장님이 올려 주신 **실제 화면 그림**(.hshot)이 들어갑니다 — 지어낸 화면을 보여 드리지 않는 편이 맞습니다. */ /* 숫자 띠 */ .hstats{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:9px; overflow:hidden; margin:0} @media(min-width:760px){.hstats{grid-template-columns:repeat(4,1fr)}} .hstat{background:var(--panel); padding:17px 18px} .hstat b{display:block; font-size:24px; font-weight:700; letter-spacing:-.02em} .hstat span{font-size:12px; color:var(--dim)} /* 기능 칸 */ .hlist{margin:12px 0 0; padding-left:18px; font-size:13.5px; color:var(--dim); line-height:1.85} .hlist li{margin:3px 0} .hlist b{color:var(--text); font-weight:600} /* 자료 흐름 */ .hflow{display:grid; gap:10px; margin-top:16px} @media(min-width:780px){.hflow{grid-template-columns:1fr auto 1fr auto 1fr; align-items:center}} .hnode{background:var(--panel-alt); border:1px solid var(--border); border-radius:8px; padding:15px 16px; text-align:center} .hnode.me{border-color:var(--accent); background:linear-gradient(180deg,var(--accent-soft),var(--panel-alt))} .hnode b{display:block; font-size:14px; margin-bottom:3px} .hnode span{font-size:12px; color:var(--dim)} .harrow{color:var(--dim); text-align:center; font-size:15px} .hcut{margin-top:14px; padding:12px 15px; border-radius:7px; background:var(--panel-alt); border:1px solid var(--border); border-left:3px solid var(--pos); font-size:13px; color:var(--dim)} /* [2026-09-20] 좋은 점 옆에 붙는 **제한** 한 줄. 좋은 점과 같은 크기로 적으면 안 읽히고, 너무 작게 적으면 숨긴 것처럼 보입니다. */ .hcutnote{display:block; margin-top:7px; padding-top:7px; border-top:1px dashed var(--border); font-size:12.5px; color:var(--dim)} .hcutnote b{color:var(--warn)} .hcut b{color:var(--text); font-weight:700} /* 레이더 3칸 */ .hradar{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:16px} .hmkt{background:var(--panel-alt); border:1px solid var(--border); border-radius:8px; padding:15px 16px} .hmkt .t{font-size:11px; color:var(--dim); letter-spacing:.1em} .hmkt .v{font-size:27px; font-weight:700; margin:4px 0 8px; letter-spacing:-.02em; color:var(--dim); white-space:nowrap} /* [2026-09-20] 지수는 자릿수가 길어(65,019) 27px 그대로면 좁은 화면에서 줄이 바뀝니다. 변화율은 곁에 작게 붙습니다. */ .hmkt .v b{font-size:24px} .hmkt .g{height:3px; background:var(--border); border-radius:2px; overflow:hidden} .hmkt .g i{display:block; height:100%; width:0; background:var(--dim)} /* 문답 */ .hqa{margin-top:6px; border-top:1px solid var(--border)} .hqa details{border-bottom:1px solid var(--border)} .hqa summary{padding:13px 2px; cursor:pointer; font-weight:600; font-size:14px; list-style:none; display:flex; gap:11px; align-items:center; color:var(--text)} .hqa summary::-webkit-details-marker{display:none} .hqa summary::before{content:"+"; color:var(--accent); font-size:15px; font-weight:700} .hqa details[open] summary::before{content:"−"} .hqa p{padding:0 2px 15px 24px; font-size:13.5px; color:var(--dim); margin:0; line-height:1.8} .hqa p b{color:var(--text)} .homehero{padding:18px 20px 16px} .hh-t{font-size:22px; font-weight:800; letter-spacing:-.01em; color:var(--text); margin-bottom:3px} .hh-s{font-size:13px; color:var(--dim); margin-bottom:13px} .hh-s b{color:var(--text)} .hh-find{margin:0} .hh-tip{font-size:11.5px; margin-top:9px} .hh-tip b{color:var(--text)} .homegrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:9px; padding:4px 0 2px} .homecard{display:flex; flex-direction:column; gap:3px; text-align:left; background:var(--panel-alt); border:1px solid var(--border); border-radius:10px; padding:11px 13px; cursor:pointer; font-family:inherit; color:var(--dim); font-size:11.5px; line-height:1.55} .homecard b{color:var(--text); font-size:13.5px; font-weight:700} .homecard:hover{border-color:var(--accent); background:var(--accent-soft)} .homecard:hover b{color:var(--accent)} .homecard:focus-visible{outline:2px solid var(--accent); outline-offset:1px} .homelock{font-size:12px; padding:8px 2px 0} .homelock b{color:var(--warn)} .homesteps{margin:4px 0 2px; padding-left:22px; font-size:12.5px; color:var(--dim); line-height:1.9} .homesteps li{margin:2px 0} .homesteps b{color:var(--text)} /* 면책 문구 — 모든 화면 아래에 늘 보입니다. 지우지 마세요(인계문서 참고). */ .disclaim{border-top:1px solid var(--border); background:color-mix(in srgb, var(--warn) 7%, transparent); color:var(--dim); font-size:11.5px; line-height:1.7; padding:9px 16px; margin-top:auto} .disclaim b{color:var(--text)} /* [2단계 2026-09-19] 서버 수집 상태 화면(ops.js). 설정 화면 안에 들어가므로 .setbox 의 기본 여백을 그대로 씁니다. */ .opsrow{display:flex; gap:12px; align-items:flex-start; padding:7px 0; border-bottom:1px solid var(--border)} .opsrow:last-child{border-bottom:none} .opskey{flex:0 0 110px; color:var(--dim); font-size:12.5px; padding-top:1px} .opsval{flex:1; font-size:13px; line-height:1.6; min-width:0} .opsbar{display:inline-block; width:120px; height:8px; border-radius:4px; background:var(--border); overflow:hidden; vertical-align:middle; margin-right:6px} .opsbar i{display:block; height:100%; border-radius:4px} .opstab{border-collapse:collapse; width:100%; max-width:520px; font-size:12.5px} .opstab th{text-align:left; color:var(--dim); font-weight:600; padding:3px 10px 3px 0; border-bottom:1px solid var(--border)} .opstab td{padding:3px 10px 3px 0; border-bottom:1px solid var(--border)} .opstab tr:last-child td{border-bottom:none} .opstodo{margin:4px 0 0; padding-left:18px} .opstodo li{margin:2px 0; font-size:12px; line-height:1.5} /* [접수함 2026-09-19] 라이선스 창의 신청 내용 칸. 기존 .licrow / .licin 을 그대로 쓰고, 여기서는 요금 단추와 동의 체크만 더합니다(기존 모양을 건드리지 않기 위해서입니다). */ .licplan { background: var(--panel, #141822); color: var(--text, #e8eaf0); border: 1px solid var(--border, #232936); border-radius: 8px; padding: 8px 12px; font-size: 13px; font-weight: 700; cursor: pointer; } .licplan:hover { border-color: var(--accent, #00E5FF); color: var(--accent, #00E5FF); } .licplan.on { background: rgba(0,229,255,0.12); border-color: var(--accent, #00E5FF); color: var(--accent, #00E5FF); } .licagree { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: var(--text-dim, #8A92A6); margin: 10px 0 4px; line-height: 1.5; cursor: pointer; } .licagree input { margin-top: 2px; } /* [2026-09-19] 신청 화면의 결제 전 고지. 전자상거래법 제17조 제6항은 청약철회 제한 사실을 "소비자가 쉽게 알 수 있는 곳에 명확하게 표시" 하도록 요구합니다 — 따로 눌러야 보이는 곳이 아니라 **결제 버튼 옆** 이어야 합니다. 지우지 마세요. */ .licnotice { margin-top: 12px; padding: 10px 13px; font-size: 12px; line-height: 1.6; color: var(--text, #e8eaf0); background: rgba(255,184,0,0.08); border: 1px solid var(--warn, #FFB800); border-radius: 8px; } .licnotice b { color: var(--warn, #FFB800); } .licnotice ul { margin: 6px 0 0; padding-left: 18px; } .licnotice li { margin: 3px 0; } /* [2026-09-19] 신청 화면의 '사용할 PC' 고지. 바로 위 결제 고지(주황 = 법정 고지)와 **색·테두리가 달라야** 합니다. 둘 다 주황이면 고객 눈에는 한 덩어리로 보여서 읽지 않고 넘깁니다. 또 이 상자 안에는 목록과 단추 줄이 들어가므로, 띠(.licnotice 의 display:flex)를 물려받으면 줄이 헝클어집니다 — block 으로 되돌립니다. */ .licnotice.pc { display: block; background: rgba(0,229,255,0.07); border-color: var(--accent, #00E5FF); } .licnotice.pc b { color: var(--accent, #00E5FF); } .licnotice.pc .licrow { margin: 0; align-items: center; } #ord-sysline { font-size: 11.5px; flex: 1 1 auto; } /* [2026-09-19] 체험 신청 안내. 결제 고지(주황) · 사용 PC 고지(청록)와 또 달라야 해서 초록입니다 — 세 상자가 같은 색이면 한 덩어리로 보여서 아무도 안 읽습니다. 이 상자 안에도 목록이 들어가므로 띠(display:flex)를 물려받지 않게 block 으로 되돌립니다. */ .licnotice.trial { display: block; background: rgba(55,214,122,0.08); border-color: #37d67a; } .licnotice.trial b { color: #37d67a; } .licnotice.trial .licmsg { margin-top: 8px; } /* [2026-09-20] 신청 칸의 '자세히 보기'. 고지는 그대로 두되 기본은 접어서 스크롤을 없앱니다(사장님 지적 12번). */ .licmore{margin-top:8px} .licmore>summary{cursor:pointer; font-size:11.5px; color:var(--accent); list-style:none; padding:3px 0; user-select:none} .licmore>summary::-webkit-details-marker{display:none} .licmore>summary::before{content:"＋ "; font-weight:700} .licmore[open]>summary::before{content:"－ "} .licmore ul{margin-top:4px} /* 신청 칸이 열려 있는 동안 접히는 줄들(위 index.html 주석 참고). */ .licbox.ordering .ordhide{display:none !important} /* 결제 안내의 강조 문단 — PC 변경을 신중히 정하도록 하는 안내. */ .paywarn { margin-top: 10px; padding: 10px 13px; font-size: 12px; line-height: 1.7; color: var(--text, #e8eaf0); background: rgba(255,184,0,0.08); border: 1px solid var(--warn, #FFB800); border-radius: 8px; } .paywarn b { color: var(--warn, #FFB800); } /* ── [2026-09-20] OBV·MACD 사분면 (가점식 점수 자리) ────────── 나라별 작은 칸 세 개. 칸끼리 축 눈금이 다르므로 일부러 따로 둡니다. */ /* [2026-09-20] ④ 칸은 다른 차트 칸들과 높이를 나눠 쓰는 자리라, 내용이 넘치면 아래 설명 줄이 띠에 가려집니다. 실제로 그랬습니다. 그래서 그리드가 남는 높이를 채우고, 캔버스가 그 안에서 줄어들게 합니다(고정 190px 이면 좁은 칸에서 넘칩니다). */ #quad-panel{overflow:hidden} .quad-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; flex:1 1 auto; min-height:0} @media (max-width: 900px){ .quad-grid{grid-template-columns:1fr} } .quad-cell{background:var(--panel-alt); border:1px solid var(--border); border-radius:10px; padding:8px 9px 6px; display:flex; flex-direction:column; min-height:0; overflow:hidden} .quad-cell .qtitle{font-size:12px; font-weight:700; color:var(--text); display:flex; align-items:center; gap:6px; margin-bottom:2px; flex:0 0 auto} .quad-cell .qdot{width:9px; height:9px; border-radius:50%; flex:0 0 auto} .quad-cell .qnow{font-size:12px; color:var(--dim); margin:1px 0 6px; flex:0 0 auto} .quad-cell .qnow b{color:var(--text)} .quad-cell canvas{display:block; width:100%; flex:1 1 auto; min-height:110px; cursor:crosshair} .quad-cell .qwhy{font-size:12px; color:var(--dim); padding:26px 4px; text-align:center; line-height:1.6} /* [2026-09-20] 카드 안 지수 미니 차트. 점수를 걷어낸 자리입니다. */ .card .cardspark{margin:6px 0 2px} .card .cardspark .spark{display:block; width:100%; height:38px; opacity:.9} #quad-note{flex:0 0 auto} /* [2026-09-20] 상세 창에서 지표를 여러 개 겹쳐 볼 때의 이름표 */ .rd-chips{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:6px} .rd-chip{display:inline-flex; align-items:center; gap:6px; cursor:pointer; font-size:12px; color:var(--text); background:var(--panel-alt); border:1px solid var(--border); border-radius:999px; padding:3px 10px} .rd-chip i{width:9px; height:9px; border-radius:50%; display:inline-block} .rd-chip b{color:var(--dim); font-weight:700} .rd-chip:hover b{color:#ff5470} /* [2026-09-20] 통계표 항목 고르기 */ .rd-choose{display:flex; flex-wrap:wrap; gap:7px; padding:6px 0; max-height:min(60vh,460px); overflow:auto} .rd-choose button{background:var(--panel-alt); border:1px solid var(--border); color:var(--text); border-radius:8px; padding:6px 12px; font-size:12px; cursor:pointer; font-family:inherit} .rd-choose button:hover{border-color:var(--accent); color:var(--accent)} /* [2026-09-20] 큰 창에서 세 나라를 한 칸에 겹쳐 보기 */ .qb-legend{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:6px} .qb-leg{display:inline-flex; align-items:center; gap:6px; cursor:pointer; font-size:12px; color:var(--text); user-select:none} .qb-leg i{width:10px; height:10px; border-radius:50%; display:inline-block} .qb-leg.off{opacity:.35; text-decoration:line-through} .qb-wrap{height:min(62vh, 520px); min-height:260px} .qb-wrap canvas{display:block; width:100%; height:100%; cursor:crosshair} .quad-tip{position:fixed; z-index:60; pointer-events:none; background:var(--panel); border:1px solid var(--border); border-radius:8px; padding:6px 9px; font-size:12px; color:var(--text); line-height:1.5; box-shadow:0 6px 20px rgba(0,0,0,.45); white-space:nowrap} /* [2026-09-20] 차트 기간 고르기 줄. 차트 바로 위에 붙습니다. 좁은 화면에서는 줄이 바뀝니다 - 단추가 아홉 개라 한 줄에 안 들어가는 폭이 있습니다. */ .rngbar{display:flex; align-items:center; gap:4px; flex-wrap:wrap; margin:0 0 6px} .rngbar .rl{font-size:11px; color:var(--dim); letter-spacing:.08em; margin-right:4px} .rngbar button{background:transparent; border:1px solid var(--border); color:var(--dim); border-radius:6px; padding:3px 9px; font-size:11.5px; cursor:pointer; font-family:inherit; line-height:1.5} .rngbar button:hover{border-color:var(--accent); color:var(--text)} .rngbar button.on{color:var(--accent); border-color:var(--accent); background:color-mix(in srgb, var(--accent) 14%, transparent); font-weight:700} /* [2026-09-20] 사분면 재생 조종간. 자취를 한 칸씩 넘기거나 틀어 봅니다. */ .qb-ctl{display:flex; align-items:center; gap:5px; flex-wrap:wrap; padding:8px 2px 2px} .qb-ctl .qb-lb{font-size:11px; color:var(--dim); letter-spacing:.08em} .qb-ctl .qb-lb.sp{margin-left:8px} .qb-b{background:var(--panel-alt); border:1px solid var(--border); color:var(--text); border-radius:6px; padding:3px 9px; font-size:11.5px; cursor:pointer; font-family:inherit; line-height:1.6; min-width:28px} .qb-b:hover{border-color:var(--accent); color:var(--accent)} .qb-b.on{color:var(--accent); border-color:var(--accent); background:color-mix(in srgb, var(--accent) 14%, transparent); font-weight:700} .qb-b.wide{min-width:66px} .qb-rng{flex:1 1 140px; min-width:110px; accent-color:var(--accent); height:18px} /* ── [2026-09-20] 홈을 와이드로 폅니다 ────────────────────────── 지금까지 홈은 **폭을 다 쓰는 칸 여덟 개가 위아래로** 쌓여 있어, 넓은 화면에서는 양옆이 비고 아래로만 길어졌습니다. 칸마다 2~3열로 폅니다. 좁은 화면(태블릿·노트북)에서는 그대로 한 줄로 돌아갑니다. */ /* 기능 3 × 3 — 아홉 개 메뉴 */ .hfeat{display:grid; grid-template-columns:1fr; gap:1px; margin-top:14px; background:var(--border); border:1px solid var(--border); border-radius:10px; overflow:hidden} @media(min-width:720px){.hfeat{grid-template-columns:repeat(2,1fr)}} @media(min-width:1120px){.hfeat{grid-template-columns:repeat(3,1fr)}} .hf{background:var(--panel); padding:16px 17px 15px; position:relative} .hf .hfn{position:absolute; top:14px; right:15px; font-size:11px; color:var(--border); font-weight:700; letter-spacing:.06em} .hf b{display:block; font-size:14px; color:var(--text); margin-bottom:6px} .hf p{margin:0; font-size:12.5px; color:var(--dim); line-height:1.75} .hf p b{display:inline; font-size:inherit; color:var(--text)} /* 시장 레이더 소개 — 설명 : 그림 두 열 */ .hrgrid{display:grid; grid-template-columns:1fr; gap:20px; margin-top:4px} @media(min-width:980px){.hrgrid{grid-template-columns:.82fr 1.18fr; gap:26px; align-items:start}} /* 사분면이 말하는 세 가지 */ /* ── [2026-09-21 사장님 지시] 홈에 쓰는 **실제 화면 그림** ───────── "홈 화면에 쓸 이미지를 몇개 올렸어 / 기존 홈화면 이미지를 대체해주고 / 적당히 재배치 해줘" 손으로 그린 가짜 예시 카드를 걷어내고 진짜 화면을 넣었습니다. 그림은 어두운 화면을 찍은 것이라 밝은 모드에서 뜨면 혼자 캄캄해 보입니다. 그래서 테두리를 둘러 '화면 그림' 임이 드러나게 합니다. */ .hshot{margin:0; display:flex; flex-direction:column; gap:9px} .hshot img{display:block; width:100%; height:auto; border-radius:11px; border:1px solid var(--border); background:#0B0E14; box-shadow:0 10px 30px rgba(0,0,0,.35)} .hshot figcaption{font-size:12px; line-height:1.7; color:var(--dim)} .hshot figcaption b{color:var(--text)} .hshotx{display:block; margin-top:3px; font-size:11px; color:var(--dim); opacity:.8} .hshot.wide img{max-height:none} /* 아래 두 장은 나란히 — 좁아지면 한 줄로 내려갑니다. */ .hshot2{display:grid; grid-template-columns:1.22fr 1fr; gap:16px; margin-top:16px; align-items:start} @media (max-width:980px){ .hshot2{grid-template-columns:1fr} } .hquad{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:12px} .hq{background:var(--panel-alt); border:1px solid var(--border); border-radius:8px; padding:11px 12px} .hq span{display:block; font-size:12px; color:var(--text); font-weight:600; margin-bottom:7px} .hq i{display:block; height:3px; border-radius:2px} .hq i.up{background:#37d67a} .hq i.mid{background:#FFB800} .hq i.dn{background:#ff5470} /* 자주 묻는 것 — 두 열 */ @media(min-width:1000px){ .hqa{columns:2; column-gap:26px} .hqa details{break-inside:avoid; -webkit-column-break-inside:avoid} } /* 사업자 정보 */ .hfoot{border-top:1px solid var(--border); margin-top:4px; padding:18px 24px 22px} /* [2026-09-21 사장님 지시] 문의 창구를 카카오톡으로. 대표자 성명·전화번호는 전자상거래법 제10조 필수 표시라 못 뺍니다. 대신 **눈에 들어오는 자리**를 카카오톡에 주고, 법정 표시는 그 아래 작은 글씨로 그대로 둡니다. */ /* [2026-09-22 사장님 결정 "일단 카카오톡 안내만 크게"] 대표자 성명·전화번호는 법정 필수 표시라 못 뺍니다. 그래서 **눈이 가는 무게**를 카카오톡 쪽으로 더 옮깁니다 — 칸을 넓히고 테두리에 색을 주고 제목을 키웁니다. 아래 법정 표시 줄은 그대로입니다. */ .hfask{display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; padding:20px 22px; margin-bottom:18px; border-radius:12px; background:var(--panel-alt); border:1px solid var(--accent); box-shadow:inset 0 0 0 1px rgba(255,255,255,.02)} .hfaskT{font-size:18px; font-weight:800; color:var(--text); letter-spacing:-.01em} .hfaskS{font-size:12.5px; color:var(--dim); line-height:1.75; flex:1 1 240px; min-width:0} /* 법정 표시 줄 — 의무라 남기되, 위 칸보다 눈에 덜 들어오게 둡니다. */ .hfbnote{margin:0 0 7px; font-size:11px; color:var(--dim); opacity:.8} .hfb{display:flex; flex-wrap:wrap; gap:6px 20px; font-size:11.5px; color:var(--dim); line-height:1.9} .hfb i{font-style:normal; color:var(--border); margin-right:5px} .hfb .miss{font-style:normal; color:#ff5470; font-weight:700} .hfnote{margin:11px 0 0; font-size:11.5px; color:var(--dim); line-height:1.8; max-width:78ch} .hfnote b{color:var(--text)} /* [2026-09-20] 거시 6칸의 백분위 막대. '점수 N' 이 있던 자리입니다. 좋고 나쁨이 아니라 **위치**만 말합니다. */ .pctl{margin-top:7px} .pbar{position:relative; height:4px; border-radius:2px; background:linear-gradient(90deg,#4dabf7 0%,#232936 50%,#ff5470 100%); opacity:.55} .pbar i{position:absolute; top:-3px; width:2px; height:10px; border-radius:1px; background:var(--text); transform:translateX(-1px)} .ptxt{margin-top:5px; font-size:11px; color:var(--dim); letter-spacing:.02em} .mbox .s.dim{color:var(--border)} /* [2026-09-20] 머리줄 메뉴 묶음 — 구분선 · 묶음 이름 · 잠금 줄. 단추 자체는 그대로이고 사이에 표시만 들어갑니다. */ /* [2026-09-20 사장님 지적] "홈 화면 메뉴가 다 안보임 - 뭔가 꼬인 것 같음" 겹치거나 감춰진 것이 아니었습니다(1920 에서 실측 - 단추 18개가 한 줄에 x=424~1612 로 겹침 없이 들어갑니다). **묶음 이름 색이 `--border`** 라 바탕과 거의 같아서, 묶음 이름만 안 보이고 단추 사이가 휑해 보인 것입니다. 읽히는 색으로 올립니다 - 단추(--dim)보다는 여전히 한 단계 여립니다. 묶음 이름이 단추보다 튀면 안 되니까요. */ /* [2026-09-20 사장님 지적] "시장보기? 종목찾기? 이상한 메뉴가 보여" 묶음 이름을 읽히게 색을 올렸더니(같은 날 아침) 이번에는 **메뉴 단추로 보였습니다.** 실제로 누를 수 없는 글자가 단추 줄에 섞여 있으니 그렇게 읽히는 것이 당연합니다. 묶음을 나누는 일은 **구분선**이 이미 하고 있으므로 이름은 아예 뺍니다. 자리는 남기지 않습니다. */ .navgrp{display:none} .navsep{width:1px; align-self:stretch; margin:3px 5px; background:var(--border)} .navlock{background:transparent; border:1px dashed var(--border); color:var(--dim); border-radius:999px; padding:5px 11px; font-size:11.5px; font-weight:600; cursor:pointer; font-family:inherit; margin-left:6px; white-space:nowrap} /* [2026-09-20 · B안] 아이콘이 붙는 단추. 글자와 그림의 세로를 맞춥니다. */ .btn.ico{display:inline-flex; align-items:center; gap:6px} .navlock:hover{border-color:var(--accent); color:var(--accent); border-style:solid} /* 묶음 이름은 늘 감춥니다(위 주석). 좁은 화면에서는 구분선 여백만 줄입니다. */ @media (max-width:1560px){ .navsep{margin:3px 3px} } /* ── [2026-09-21 사장님 지시] 신청 동의 팝업 ───────────────────── * "체크없이 신청하기 누르면 팝업으로 어디 체크가 빠졌다고 만들어줘" * 신청 칸(#lic-order) 안에 덮개로 뜹니다 — 화면 전체를 덮지 않는 것은 * 뒤에 있는 체크 항목이 보여야 어디를 눌러야 할지 알기 때문입니다. */ .ordpop { /* [2026-09-21 고침] absolute 였습니다. 신청 칸이 '내 계정' 탭 안으로 옮겨 가면서 칸이 화면보다 길어졌고, 스크롤이 내려가 있으면 팝업이 보이는 데가 아닌 **칸의 한가운데**에 떠서 아무 일도 안 일어난 것처럼 보였습니다. 화면 기준(fixed)으로 바꿉니다. */ position: fixed; inset: 0; z-index: 9400; background: rgba(4, 8, 10, .74); display: flex; align-items: center; justify-content: center; padding: 24px; } .ordpopbox { width: min(400px, 100%); box-sizing: border-box; background: var(--panel, #111C21); border: 1px solid var(--line, #2A4048); border-radius: 13px; padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; } .ordpoptitle { font-size: 15px; font-weight: 600; color: var(--neg, #ff5470); } .ordpoptxt { font-size: 13px; color: var(--fg, #C6D6DC); } .ordpoplist { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.8; } .ordpoplist li { color: var(--fg, #E6EDF0); } /* 팝업이 신청 칸 안에 뜨도록 기준점을 줍니다. */ #lic-order { position: relative; } /* ── [2026-09-21 사장님 지시] 신청 칸을 목업대로 ──────────────────── * "직관적으로 보여지게 해줘 (목업처럼)" · "모든 화면 구성을 위에서 * 아래로 좌에서 우로" · "중요내용은 붉은색의 큰 글씨체로" * 근거 목업: Apply.dc.html / Trial.dc.html * * 규칙 세 가지만 지킵니다. * 1) 한 단계 = 한 덩어리. 번호(①②③④)가 왼쪽 위에 먼저 옵니다. * 2) 입력 칸에는 이름표가 칸 **위에** 붙습니다(글자를 넣어도 안 사라짐). * 3) 꼭 읽어야 하는 말은 붉은 큰 글씨(.ordred) 한 가지로만 씁니다 — * 여러 색으로 강조하면 어느 것도 강조가 아닙니다. */ .ordtitle{font-size:17px; font-weight:700; color:var(--text,#E6EAF2); margin:2px 0 4px} .ordstep{margin-top:14px} .ordno{font-size:12px; font-weight:700; color:var(--accent,#00E5FF); letter-spacing:.02em; margin-bottom:7px} .ordtiers,.ordterms{display:flex; flex-wrap:wrap; gap:9px} .ordtiers .licplan{flex:1 1 180px; text-align:left; padding:13px 14px} .ordterms .licplan{flex:1 1 110px; text-align:center; padding:11px 9px} .licplan .pt{display:block; font-size:15px; font-weight:700} .licplan .pd{display:block; font-size:11.5px; font-weight:400; line-height:1.6; color:var(--dim,#8A92A6); margin-top:5px} /* [2026-09-21 사장님 지시] "금액은 좀 큰글씨체로 만들어줘" 금액이 결정의 알맹이인데 설명 글자와 크기가 비슷했습니다. */ .licplan .pm{display:block; font-size:15px; font-weight:700; margin-top:8px; color:var(--text,#E6EAF2)} .licplan .pnum{display:block; font-size:21px; font-weight:700; margin-top:6px; letter-spacing:-.01em} .licplan .pnum i{font-style:normal; font-size:13px; font-weight:600; margin-left:2px; color:var(--dim,#8A92A6)} .licplan.on .pnum i{color:inherit} .licplan .psave{display:block; font-size:11px; font-weight:700; margin-top:4px; color:var(--pos,#37d67a)} /* 고른 내용과 금액 — 한 상자에 모읍니다(목업의 요약 띠). */ .ordsum{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:13px; padding:12px 15px; border-radius:10px; background:rgba(0,229,255,.07); border:1px solid var(--accent,#00E5FF)} .ordsumT{font-size:14px; font-weight:700; color:var(--text,#E6EAF2)} .ordsumS{margin-top:3px !important; min-height:0 !important; font-size:11.5px} /* 결제 금액 — 이 화면에서 제일 큰 글씨입니다(사장님 지시). */ .ordsumR{font-size:32px; font-weight:700; color:var(--accent,#00E5FF); white-space:nowrap; letter-spacing:-.015em; line-height:1.15} .ordwhat{margin-top:11px; padding:12px 15px; border-radius:10px; background:var(--panel2,#181D29); border:1px solid var(--border,#232936); font-size:12px; line-height:1.75; color:var(--text,#C8CFDD)} .ordwhat b{color:var(--accent,#00E5FF)} .ordwhat .dim{display:block; margin-top:6px; font-size:11px} /* ③ 신청자 — 이름표가 칸 위에. 좁아지면 아래로 접힙니다. */ .ordfields{display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(170px,1fr))} .ordfield label{display:block; font-size:11px; color:var(--dim,#8A92A6); margin-bottom:5px} .ordfield .licin{width:100%; box-sizing:border-box} .ordhint{margin-top:8px; font-size:11.5px; color:var(--dim,#8A92A6); line-height:1.7} /* ④ 동의 — 한 줄에 하나씩, 네모 안에. 체크하면 테두리가 살아납니다. */ .ordmust{font-size:12.5px; line-height:1.7; color:var(--neg,#ff5470); margin-bottom:8px} .ordmust b{color:var(--neg,#ff5470); font-size:13.5px} .licagree{border:1px solid var(--border,#232936); border-radius:9px; padding:11px 13px; margin:0 0 8px; background:var(--panel2,#181D29)} .licagree:has(input:checked){border-color:var(--accent,#00E5FF)} .licagree input{width:17px; height:17px; accent-color:var(--accent,#00E5FF); flex:0 0 auto} .licagree span{font-size:12px; line-height:1.7; color:var(--text,#C8CFDD)} /* 꼭 읽어야 하는 말 — 사장님 지시로 **붉은 큰 글씨**입니다. */ .ordred{color:var(--neg,#ff5470); font-size:13.5px; font-weight:700} .ordreq{color:var(--neg,#ff5470); font-weight:700} /* 맨 아래 — 왼쪽에 안내 한 줄, 오른쪽에 [신청하기] 하나. */ .ordfoot{display:flex; align-items:center; gap:11px; margin-top:14px} .ordfoothint{flex:1 1 auto; font-size:11.5px; line-height:1.7; color:var(--dim,#8A92A6)} .btn.ordbig{font-size:14px; font-weight:700; padding:12px 26px; min-height:44px} .ordsys{display:flex; align-items:center; gap:8px; margin-top:10px; padding-top:9px; border-top:1px solid var(--border,#232936)} .btn.ordlink{padding:3px 9px; font-size:11px; flex:0 0 auto} /* '구독신청 및 이용안내' 탭 안에 들어갔을 때. 창이 좁으므로 여백을 줄입니다. */ #gdbody #lic-order{display:block} #gdbody #lic-order .ordtitle{display:none} /* 탭 이름이 이미 제목입니다 */ /* 신청이 끝난 뒤 — 신청서는 접고 결과만 크게 보여 줍니다. */ .orddone{display:none} #lic-order.done>.ordstep, #lic-order.done>.ordsum, #lic-order.done>.ordwhat, #lic-order.done>.ordfoot, #lic-order.done>.ordsys, #lic-order.done>#ord-msg{display:none !important} #lic-order.done>.orddone{display:block} .orddone .dt{font-size:16px; font-weight:700; color:var(--pos,#37d67a)} .orddone .ds{margin-top:6px; font-size:12px; line-height:1.75; color:var(--text,#C8CFDD)} .orddone .dcode{margin-top:13px; padding:13px 15px; border-radius:10px; background:rgba(0,229,255,.07); border:1px solid var(--accent,#00E5FF)} .orddone .dcode .k{font-size:11px; color:var(--dim,#8A92A6)} /* [2026-09-21 사장님 지적] 복사 단추를 **코드 바로 옆**에 둡니다. "가입코드 바로 옆에 코드복사를 넣어줘..(찾기가 힘들었어)" */ .orddone .dcoderow{margin-top:5px; display:flex; align-items:center; gap:12px; flex-wrap:wrap} .orddone .dcode .v{margin:0; font-size:19px; font-weight:700; letter-spacing:.06em; color:var(--accent,#00E5FF); word-break:break-all} .orddone .dcode .dcopy{flex:0 0 auto; min-height:34px; padding:6px 13px; font-size:12px; white-space:nowrap} .orddone ol{margin:12px 0 0 20px; padding:0; font-size:12.5px; line-height:1.9; color:var(--text,#C8CFDD)} .orddone ol b{color:var(--accent,#00E5FF)} /* [2026-09-21 사장님 지시] "판매자에게 문의해주세요 라고 하면 바로 옆에 판매자에게 연결 할 카카오톡 URL이라도 보여 줘야지" — 안내문 옆에 늘 함께 가는 단추입니다. 노란 카카오 색이라 글 속에서 바로 보입니다. */ .kakaobtn{display:inline-flex; align-items:center; gap:5px; background:#FEE500; color:#181600 !important; border:none; border-radius:7px; padding:6px 13px; font-size:12px; font-weight:700; cursor:pointer; font-family:inherit; text-decoration:none; vertical-align:middle; margin-left:6px} .kakaobtn:hover{filter:brightness(1.07)} .kakaobtn.big{padding:11px 20px; font-size:13.5px; margin-left:0} /* 동의 팝업의 [확인] 줄, 키 칸의 [인증하기] 줄. `.licrow.end` 를 쓰면 pay.js 들이 자기 단추를 끼워 넣습니다(위 주석). */ .ordpopfoot{display:flex; justify-content:flex-end; gap:8px; margin-top:12px} /* 탭 안에서는 탭 이름과 세 줄 안내가 이미 제목이라 이름표를 접습니다. */ #gdbody #lic-keywrap>.liclabel{display:none} /* 스캔 경고 안의 '왜 실패했는지' 줄 (사장님 지적 4번). 이름만 적혀 있어서 무엇을 고쳐야 할지 알 수 없던 자리입니다. */ .warnwhy{margin:7px 0 0 18px; padding:0; font-size:11.5px; line-height:1.7} .warnwhy li{margin:2px 0} .warnwhy b{color:var(--warn,#FFB800)} /* [2026-09-21 사장님 지시] 관심종목 수익률 칸의 '누를 수 있다' 표시. 밑줄만으로는 안 보인다는 지적이라 작은 막대 차트 그림을 덧붙입니다. */ .rtable td.wcgo .wcico{margin-left:6px; vertical-align:-1px; opacity:.55; fill:currentColor} .rtable td.wcgo:hover .wcico{opacity:1} /* ══ [2026-09-21 사장님 지시 · 목업 승인] 홈 화면 ═══════════════ * "후킹할 수 있는 메세지를 만들고 화면 구성을 새로 만들어줘 / * 고급스러운 ui로 / 지금 화면 구성은 중간에 여백이 있고, * 구성에 성의가 없어 보여" * * 제목의 숫자 대비(1,091장 → 6장)가 이 화면의 중심입니다. 지워진 * 숫자와 살아난 숫자가 한눈에 갈려야 후킹이 됩니다. */ .hcross{color:var(--dim); text-decoration:line-through; text-decoration-thickness:3px; text-decoration-color:#3a4150} .hhit{color:var(--accent)} /* 인용처럼 들여쓴 한 줄 — '신호는 드리지 않습니다' 가 제품의 성격을 정하는 문장이라, 설명문에 섞이지 않게 세로선을 답니다. */ .hquote{margin:16px 0 0; padding-left:15px; border-left:3px solid var(--border); font-size:14px; line-height:1.8; color:var(--dim)} .hquote b{color:var(--text)} /* 실시간 아님 고지 — 히어로 안에서 꺼내 가로 한 줄로. */ .hstaleband{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:14px 0 0; padding:13px 18px; border-radius:10px; border:1px solid var(--warn); background:rgba(255,184,0,.06)} /* 세 걸음 */ .hstep{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:16px} .hs{border:1px solid var(--border); border-radius:13px; background:var(--panel2); padding:20px 22px} .hsn{display:block; font-size:28px; font-weight:800; color:#1f2a36; line-height:1} /* 바로 아래 만 제목입니다. 자손 전체에 걸면 설명문 안의 까지 줄이 바뀌어 '64가지 조합' 이 새 줄에 큰 글씨로 튀어나옵니다. */ .hs > b{display:block; margin-top:9px; font-size:15.5px} .hs p{margin:8px 0 0; font-size:13px; line-height:1.8; color:var(--dim)} @media (max-width:980px){ .hstep{grid-template-columns:1fr} } /* 아홉 개 화면의 등급 딱지 */ .hbadge{display:inline-block; margin-left:7px; font-size:11px; font-weight:700; vertical-align:2px; border-radius:4px; padding:2px 6px; color:var(--accent); border:1px solid var(--accent-line,#1d4550)} .hbadge.m{color:var(--warn); border-color:#4a3a10} .hsub{margin-left:10px; font-size:13px; font-weight:400; color:var(--dim)} /* ═══════════════════════════════════════════════════════════════ [2026-09-21 사장님 지적 11~14] "화면 아래 공간이 많은데... 리스트가 더 내려 올 수 있어" 까닭: 목록 상자의 높이를 **고정 숫자**로 잡아 두었습니다. · .tablewrap → max-height: calc(100vh - 430px) ← 430 이 마법 숫자 · .autolist → max-height: 420px ← 아예 고정 위쪽 조건줄의 높이는 화면마다 다른데 430 하나로 빼고 있었으니, 조건줄이 짧은 화면에서는 아래가 그만큼 남고 긴 화면에서는 모자랐습니다. 고침: 창 높이를 계산하지 않고 **남는 높이를 목록이 가져가게** 합니다. body(세로 flex) → .wrap(세로 flex) → 결과 칸(.fillrest) → 목록. .fillrest 가 붙은 결과 칸만 늘어나고 위쪽 조건줄은 제 높이 그대로라, 창을 줄이면 목록만 줄어들 뿐 잘리지 않습니다. `.hidden` 은 `display:none !important` 라서 감춰진 칸에는 안 걸립니다 (자동/수동 전환처럼 여닫는 칸이 있어서 확인했습니다). ═══════════════════════════════════════════════════════════════ */ .panel.fillrest{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; } .panel.fillrest > .tablewrap{ flex:1 1 auto; min-height:140px; max-height:none; } /* 조건 조합 '자동' 결과는 세 칸(크기 → 조합 → 종목)이 나란히 있습니다. 세 칸 모두 같은 높이로 늘어나야 아래가 비지 않습니다. */ .panel.fillrest > .auto3{ flex:1 1 auto; min-height:0; } .panel.fillrest .autocol{ display:flex; flex-direction:column; min-height:0; } .panel.fillrest .autolist{ flex:1 1 auto; min-height:120px; max-height:none; } /* 종목페어·페어연구는 격자(grid)라 위 규칙이 안 통합니다. 차트가 **닫혀** 있을 때(한 칸)만 표 줄이 남는 높이를 가져가게 합니다. 차트가 열리면 861행 위쪽의 기존 두 칸 규칙이 그대로 일합니다. */ #arbmain:not(:has(#arb-chart:not(.hidden))), #pairmain:not(:has(#p-chartpanel:not(.hidden))){ align-content:stretch; grid-template-rows:auto 1fr; } #arbmain > .panel:nth-of-type(2), #pairmain > .panel:nth-of-type(2){ min-height:0; display:flex; flex-direction:column; } #arbmain > .panel:nth-of-type(2) > .tablewrap, #pairmain > .panel:nth-of-type(2) > .tablewrap{ flex:1 1 auto; min-height:140px; max-height:none; } /* [2026-09-21 사장님 지적 11] "해석의 길이가 길어서 두줄로 나오는 문제 / 종목명을 좀 줄이고 / 해석의 내용도 좀 줄여서" 글자는 에이전트에서 짧게 만들고(agent/pairs.py `_read_short`), 그래도 긴 이름은 여기서 한 줄로 자릅니다. 잘린 글은 마우스를 올리면 전부 보입니다(title) - 뜻이 사라지지 않습니다. */ /* 여덟 칸이 **차트 옆 좁은 자리**에 다 들어가야 합니다. 그대로 두면 표가 780px 로 벌어져 640px 칸을 뚫고, 마지막 '해석' 칸이 화면 밖으로 밀려났습니다(실제로 재어 봤습니다). 칸 너비를 비율로 못 박아 **가로 스크롤 없이** 여덟 칸이 다 보이게 합니다. */ .pairtable .rtable{table-layout:fixed} .pairtable .rtable th, .pairtable .rtable td{padding:6px 6px} /* 머리글은 칸보다 길면 **두 줄로 접습니다**(글자를 줄이지 않습니다). 한 줄로 두면 '스프레드 Z' 가 옆 칸 '공적분 t' 를 덮어씁니다. */ .pairtable .rtable th{white-space:normal; line-height:1.25} .pairtable .rtable th:nth-child(1), .pairtable .rtable td:nth-child(1){width:18%} .pairtable .rtable th:nth-child(n+2):nth-child(-n+7), .pairtable .rtable td:nth-child(n+2):nth-child(-n+7){width:9.5%} .pairtable .rtable th:nth-child(8), .pairtable .rtable td:nth-child(8){width:25%} /* 잘린 글은 마우스를 올리면 전부 보입니다(title). */ .pairtable td.nm, .pairtable td.read{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }