/* [웹 시제품 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} .pairchart{height:340px; min-height:220px; width:100%} .pairchart.small{height:190px; min-height:130px} #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 → 여기서는 같은 뜻의 변수). */ .licbtn{ background:transparent; color:var(--dim); border:1px solid transparent; border-radius:6px; padding:1px 6px; 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{ 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:10.5px; 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 를 가로 세 칸으로 ──────────────── */ .pickgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px} .pickgrid > .pairpick{margin:0; min-width:0; flex-wrap:nowrap} .pickgrid .sel{min-width:0} .pickgrid .sel.wide{flex:1 1 auto; width:auto; min-width:0} @media (max-width:1180px){ .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} /* 실시간이 아니라는 고지. 눈에 띄되 광고처럼 보이지 않게 테두리만. */ .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}} .hscan{background:var(--panel-alt); border:1px solid var(--border); border-radius:9px; overflow:hidden} .hscan-bar{display:flex; align-items:center; gap:8px; padding:8px 12px; background:var(--menu); border-bottom:1px solid var(--border); font-size:11px; color:var(--dim)} .hdot{width:8px; height:8px; border-radius:50%; background:var(--pos); box-shadow:0 0 0 3px rgba(55,214,122,.14); flex:0 0 auto} .hscan-meter{padding:11px 13px; border-bottom:1px solid var(--border)} .hmeter-top{display:flex; justify-content:space-between; align-items:baseline; font-size:11.5px; color:var(--dim)} .hmeter-top b{color:var(--text); font-size:15px; font-weight:700} .hbar{height:3px; background:var(--border); border-radius:2px; margin-top:8px; overflow:hidden} .hbar i{display:block; height:100%; width:.55%; background:var(--accent)} .hrow{display:grid; grid-template-columns:auto 1fr auto; gap:11px; align-items:center; padding:8px 13px; border-bottom:1px solid var(--border)} .hrow:last-child{border-bottom:0} .hcode{font-size:11.5px; color:var(--dim)} .hnm{font-size:13px; font-weight:600} .htags{display:flex; gap:5px; flex-wrap:wrap; margin-top:3px} .htag{font-size:10px; padding:2px 7px; border-radius:3px; background:var(--accent-soft); color:var(--accent); border:1px solid #13414A} .htag.w{background:#2A2208; color:var(--warn); border-color:#4A3C0C} .hpct{font-size:12.5px; font-weight:700; color:var(--pos)} .hpct.d{color:var(--neg)} .hscan-foot{padding:8px 13px; font-size:10.5px; color:var(--dim); background:var(--menu); border-top:1px solid var(--border)} /* 숫자 띠 */ .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}} /* 사분면이 말하는 세 가지 */ .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} .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:10.5px; 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)} .orddone .dcode .v{margin-top:5px; font-size:19px; font-weight:700; letter-spacing:.06em; color:var(--accent,#00E5FF); word-break:break-all} .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)}