/* 경주마 대시보드 — 다크 톤 기본 + 밝은 톤 토글. 프레임워크 없음. */ :root{ --bg:#0f1318; --bg2:#161c23; --bg3:#1d242d; --line:#2a323c; --fg:#dde3ea; --fg2:#96a3b3; --fg3:#6a7787; --hot:#ff5252; --warn:#f0a13a; --purple:#a97bff; --up:#ff5252; --dn:#4a9cf0; --ok:#3ecf8e; --sel:#243141; --accent:#4a9cf0; --chart-bg:#161c23; --chart-grid:#222a33; } body[data-theme="light"]{ --bg:#f4f5f7; --bg2:#ffffff; --bg3:#eef1f5; --line:#dde1e7; --fg:#1d2530; --fg2:#5b6675; --fg3:#8b95a3; --hot:#d33131; --warn:#c47a12; --purple:#7a45d8; --up:#d33131; --dn:#2273a8; --ok:#1d9a63; --sel:#fff3e0; --accent:#2563eb; --chart-bg:#ffffff; --chart-grid:#eceff3; } *{box-sizing:border-box} html,body{height:100%} body{ margin:0; background:var(--bg); color:var(--fg); font-family:"Malgun Gothic","맑은 고딕",system-ui,sans-serif; font-size:13px; } b{font-weight:700} .muted{color:var(--fg3)} .hot{color:var(--hot)} .unit,.tb-unit{color:var(--fg3); font-size:11px; margin-left:2px} /* ---------- 상단 바 ---------- */ .topbar{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; padding:8px 16px; background:var(--bg2); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50; } .tb-clock{display:flex; flex-direction:column; line-height:1.1} .tb-time{font-size:22px; font-weight:700; font-variant-numeric:tabular-nums} .tb-date{font-size:11px; color:var(--fg3)} .tb-item{display:flex; align-items:baseline; gap:6px; white-space:nowrap; min-width:0} .tb-item>b{overflow:hidden; text-overflow:ellipsis} .tb-label{font-size:11px; color:var(--fg3)} .tb-sub{font-size:11px; color:var(--fg3)} .tb-big{font-size:17px; color:var(--warn); font-variant-numeric:tabular-nums} .tb-grow{flex:1 1 200px; min-width:140px} .tb-right{display:flex; align-items:center; gap:8px; margin-left:auto} .dot{font-size:13px} .dot-on{color:var(--ok)} .dot-off{color:var(--fg3)} .badge{font-size:11px; padding:2px 8px; border-radius:999px; background:var(--bg3); color:var(--fg2); border:1px solid var(--line)} .badge-mock{background:#5a3a12; color:#ffd79a; border-color:#7a5520} body[data-theme="light"] .badge-mock{background:#fff3d6; color:#8a5a00; border-color:#e5c98a} .badge-bad{background:#5a1c1c; color:#ffb4b4; border-color:#7a2a2a} body[data-theme="light"] .badge-bad{background:#ffe2e2; color:#a11; border-color:#f0b7b7} .btn-ghost{background:transparent; color:var(--fg2); border:1px solid var(--line); border-radius:6px; padding:4px 10px; cursor:pointer; font-size:12px; font-family:inherit} .btn-ghost:hover{color:var(--fg); border-color:var(--fg3)} /* ---------- 탭 ---------- */ .tabs{display:flex; background:var(--bg3); border-bottom:1px solid var(--line)} .tab{ background:transparent; border:0; border-bottom:2px solid transparent; color:var(--fg2); padding:10px 22px; font-size:14px; cursor:pointer; font-family:inherit; } .tab:hover{color:var(--fg)} .tab.on{color:var(--fg); font-weight:700; border-bottom-color:var(--accent); background:var(--bg)} /* ---------- 페이지 ---------- */ .page{display:none} .page.on{display:block} .split{display:grid; grid-template-columns:620px 1fr; height:calc(100vh - var(--chrome, 83px)); min-height:480px} .pane-left{border-right:1px solid var(--line); display:flex; flex-direction:column; min-width:0; background:var(--bg2)} .pane-right{overflow:auto; padding:12px; min-width:0} .tablewrap{overflow:auto; flex:1} .reportwrap{padding:14px; max-width:1500px} /* ---------- 툴바 / 입력 ---------- */ .toolbar{padding:8px 10px; border-bottom:1px solid var(--line); background:var(--bg3)} .toolbar-col{display:flex; flex-direction:column; gap:7px} .toolbar-wide{display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:8px; margin-bottom:12px} .frow{display:flex; align-items:center; gap:6px} .frow-wrap{flex-wrap:wrap; margin-bottom:8px} .lbl{font-size:11px; color:var(--fg3); white-space:nowrap} .inp{background:var(--bg2); color:var(--fg); border:1px solid var(--line); border-radius:6px; padding:5px 8px; font-size:12px; font-family:inherit; min-width:0; flex:1} .inp-s{flex:0 0 120px} .inp-xs{flex:0 0 64px} .inp-sel{flex:0 0 auto} .ck{font-size:12px; color:var(--fg2); white-space:nowrap; display:flex; align-items:center; gap:4px} .btn{background:var(--bg3); color:var(--fg); border:1px solid var(--line); border-radius:6px; padding:5px 12px; font-size:12px; cursor:pointer; font-family:inherit} .btn:hover{border-color:var(--accent)} .btn:disabled{opacity:.4; cursor:default} .sortrow{display:flex; gap:4px; flex-wrap:wrap; margin-top:7px} .chip{background:var(--bg2); color:var(--fg2); border:1px solid var(--line); border-radius:999px; padding:3px 10px; font-size:11px; cursor:pointer; font-family:inherit} .chip:hover{color:var(--fg)} .chip.on{background:var(--accent); border-color:var(--accent); color:#fff} /* ---------- 표 ---------- */ .tbl{border-collapse:collapse; width:100%; font-size:12px} .tbl th{ position:sticky; top:0; z-index:2; background:var(--bg3); color:var(--fg2); text-align:left; padding:6px 7px; font-weight:600; border-bottom:1px solid var(--line); font-size:11px; } .tbl td{padding:6px 7px; border-bottom:1px solid var(--line); white-space:nowrap} .tbl tbody tr{cursor:pointer} .tbl tbody tr:hover td{background:var(--bg3)} .tbl tr.sel td{background:var(--sel)} .tbl tr.pumprow td{background:rgba(255,82,82,.10); border-left:0} .tbl tr.pumprow td:first-child{box-shadow:inset 3px 0 0 var(--hot)} .num{text-align:right; font-variant-numeric:tabular-nums} #liveTable th:last-child,#liveTable td:last-child{padding-right:12px} .tbl-plain td{white-space:normal} /* ---------- 패널 ---------- */ .panel{background:var(--bg2); border:1px solid var(--line); border-radius:8px; padding:12px; margin-bottom:12px} .panel h3{margin:0 0 9px; font-size:13px; color:var(--fg); font-weight:700} .h3sub{font-size:11px; color:var(--fg3); font-weight:400; margin-left:8px} .row2{display:grid; grid-template-columns:1fr 1fr; gap:12px} .sumline{cursor:pointer; font-size:13px; font-weight:700; color:var(--fg)} .md{white-space:pre-wrap; font-family:Consolas,monospace; font-size:12px; color:var(--fg2); margin:10px 0 0; line-height:1.6} /* ---------- 차트 ---------- */ .chartbox{height:230px; width:100%; background:var(--chart-bg); border-radius:6px} .chartbox-tall{height:300px} .nodata{ padding:22px 14px; text-align:center; color:var(--fg3); font-size:12px; line-height:1.8; background:var(--bg3); border:1px dashed var(--line); border-radius:6px; } .nodata b{color:var(--warn); display:block; margin-bottom:4px} /* ---------- 지문 타임라인 ---------- */ .tl{display:flex; gap:1px; height:30px} .tl span{flex:1 1 0; min-width:1px; background:var(--bg3); border-radius:2px; cursor:default} .tl span.c{background:var(--hot)} .tl span.w{background:var(--warn)} .tl span.p{background:var(--purple)} .tl-hint{margin-top:7px; font-size:11px; font-family:Consolas,monospace; min-height:16px} .lg{display:inline-block; width:9px; height:9px; border-radius:2px; margin:0 3px 0 8px; vertical-align:-1px} .lg-c{background:var(--hot)} .lg-w{background:var(--warn)} .lg-p{background:var(--purple)} /* ---------- 호가창 ---------- */ .ob{font-size:11px; font-variant-numeric:tabular-nums} .ob-row{display:grid; grid-template-columns:88px 1fr 74px; align-items:center; gap:6px; height:17px} .ob-bar{height:11px; border-radius:2px} .ob-ask .ob-bar{background:rgba(74,156,240,.55)} .ob-bid .ob-bar{background:rgba(255,82,82,.55)} .ob-ask .ob-p{color:var(--dn)} .ob-bid .ob-p{color:var(--up)} .ob-s{text-align:right; color:var(--fg2)} .ob-mid{border-top:1px solid var(--line); margin:4px 0; padding-top:4px; color:var(--fg3)} /* ---------- 로그 ---------- */ .loglist{font-size:12px; line-height:1.8; max-height:230px; overflow:auto} .logrow{display:flex; gap:8px; align-items:baseline; border-bottom:1px solid var(--line); padding:2px 0} .logrow:last-child{border-bottom:0} .logts{color:var(--fg3); font-family:Consolas,monospace; flex:0 0 62px} .logmk{color:var(--accent); cursor:pointer; flex:0 0 92px; text-decoration:underline dotted} .logkind{flex:0 0 92px; font-size:11px} .k-signature_changed{color:var(--hot)} .k-wall{color:var(--warn)} .k-pingpong{color:var(--purple)} .k-tv_spike{color:var(--ok)} .k-pump_0900{color:var(--hot); font-weight:700} .k-onchain_big{color:var(--accent)} /* ---------- 눈금 만들기 ---------- */ #cmpCanvas{width:100%; height:220px; display:block; background:var(--chart-bg); border-radius:6px} .frow-slider{margin-top:10px} .slider{flex:1; accent-color:var(--accent)} .thval{font-variant-numeric:tabular-nums; min-width:70px; text-align:right; color:var(--warn); font-size:15px} .thgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:10px} .thcard{background:var(--bg3); border:1px solid var(--line); border-radius:6px; padding:8px 10px} .thcard .k{font-size:11px; color:var(--fg3); display:block; margin-bottom:3px} .thcard .v{font-size:18px; font-variant-numeric:tabular-nums} /* ---------- 페이지네이션 ---------- */ .pager{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:7px 10px; border-top:1px solid var(--line); background:var(--bg3)} /* ---------- 반응형 (1280px 기준, 좁으면 세로) ---------- */ @media (max-width:1279px){ .split{grid-template-columns:1fr; height:auto} .pane-left{border-right:0; border-bottom:1px solid var(--line); max-height:52vh} .pane-right{overflow:visible} .row2{grid-template-columns:1fr} .thgrid{grid-template-columns:1fr 1fr} .topbar{gap:12px} } /* ---------- 내일 후보 탭 (P2) ---------- */ .rulebox{background:var(--bg3); border:1px solid var(--line); border-radius:6px; padding:9px 11px; margin-bottom:9px; line-height:1.6} .rulebox .rk{color:var(--fg3); font-size:11px; margin-right:6px} .rulebox .warnline{color:var(--warn); font-size:11.5px; display:block; margin-top:4px} .scoreline{font-size:12px; color:var(--fg2); margin:0 0 9px; line-height:1.6} .scoreline b{color:var(--fg)} .pdnote{font-size:11.5px; margin-top:8px; line-height:1.55} .src-rule{background:#243141; color:#9ec9ff; border:1px solid #35506e; border-radius:999px; padding:1px 7px; font-size:10.5px; white-space:nowrap} body[data-theme="light"] .src-rule{background:#e3edfb; color:#1a4f8a; border-color:#b9d3f0} .src-fill{background:var(--bg3); color:var(--fg3); border:1px solid var(--line); border-radius:999px; padding:1px 7px; font-size:10.5px; white-space:nowrap} .hit-y{color:var(--ok); font-weight:700} .hit-n{color:var(--fg3)} .reasoncell{font-size:11px; color:var(--fg2); line-height:1.5} .barwrap{display:flex; align-items:flex-end; gap:2px; height:110px; margin:12px 0 4px; background:var(--bg3); border:1px solid var(--line); border-radius:6px; padding:6px; overflow-x:auto} .barwrap .bar{flex:0 0 8px; min-height:1px; background:var(--fg3); border-radius:2px 2px 0 0} .barwrap .bar.on{background:var(--hot)} .barwrap .bar.zero{background:var(--line)} .panel-main{border-color:var(--accent)} .panel-main h3 .big{font-size:16px; color:var(--accent)} .barwrap .bar{cursor:default} /* ---------- 자료 상태 탭 (P9) ---------- */ .cvlg{display:inline-block; width:9px; height:9px; border-radius:2px; margin:0 3px 0 10px; vertical-align:middle} .cvlg.cv-filled{background:var(--ok)} .cvlg.cv-progress{background:var(--warn)} .cvlg.cv-fillable{background:var(--accent)} .cvlg.cv-impossible{background:var(--hot)} .cvline{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:6px} .cvbadge{display:inline-block; font-size:11px; font-weight:700; padding:2px 9px; border-radius:999px; border:1px solid var(--line); background:var(--bg3); color:var(--fg2); white-space:nowrap} .cvbadge.cv-filled{background:rgba(62,207,142,.16); color:var(--ok); border-color:var(--ok)} .cvbadge.cv-progress{background:rgba(240,161,58,.16); color:var(--warn); border-color:var(--warn)} .cvbadge.cv-fillable{background:rgba(74,156,240,.16); color:var(--accent); border-color:var(--accent)} .cvbadge.cv-impossible{background:rgba(255,82,82,.16); color:var(--hot); border-color:var(--hot)} .cvsub{font-size:11px; color:var(--fg3); line-height:1.55; margin-top:4px; white-space:normal} .cvname{font-weight:700} .cvsrc{font-size:11px; color:var(--fg3); display:inline-block; max-width:260px; white-space:normal} .cvbar{height:4px; background:var(--bg3); border:1px solid var(--line); border-radius:3px; margin-top:4px; overflow:hidden; min-width:90px} .cvbar i{display:block; height:100%; background:var(--warn)} .cvst{min-width:170px} .cvgaps summary, .cvwhy summary, .cvacts summary{cursor:pointer; font-size:11px; color:var(--fg2); padding:2px 0} .cvgaps summary:hover, .cvwhy summary:hover, .cvacts summary:hover{color:var(--fg)} .cvnote{font-size:11px; line-height:1.6; white-space:normal; max-width:360px; padding:6px 8px; border-radius:5px; margin-top:3px} .cvnote-bad{background:rgba(255,82,82,.10); border:1px solid var(--line); color:var(--fg2)} .cvnote-cmd{background:var(--bg3); border:1px solid var(--line); color:var(--fg2); font-family:Consolas,"D2Coding",monospace; word-break:break-all} .cvcmd{font-family:Consolas,"D2Coding",monospace; font-size:11px; color:var(--fg2); word-break:break-all} .cvrow td{vertical-align:top} .cvrow.cv-impossible td:first-child{box-shadow:inset 3px 0 0 var(--hot)} .cvrow.cv-progress td:first-child{box-shadow:inset 3px 0 0 var(--warn)} .cvrow.cv-filled td:first-child{box-shadow:inset 3px 0 0 var(--ok)} .cvrow.cv-fillable td:first-child{box-shadow:inset 3px 0 0 var(--accent)} #page-coverage .tbl td, #page-coverage .tbl th{white-space:normal} /* ---------- 일지 탭 (P10) ---------- */ .jrbar{gap:8px} .jrsearch{flex:1 1 240px; min-width:180px} .botlines{font-size:12px; line-height:1.9; color:var(--fg2); font-variant-numeric:tabular-nums} .botlines b{color:var(--fg)} .jrtop{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:12px; align-items:start} @media (max-width:1100px){.jrtop{grid-template-columns:minmax(0,1fr)}} .jrtop-side{position:sticky; top:8px} .jrh3b{margin:16px 0 9px !important; font-size:13px; font-weight:700} .jrlg{display:inline-block; width:9px; height:9px; border-radius:2px; margin:0 3px 0 10px; vertical-align:middle} .jrlg.jr-hit{background:var(--ok)} .jrlg.jr-miss{background:var(--fg3)} .jrlg.jr-lost{background:var(--hot)} .jrrow-hit td:first-child{box-shadow:inset 3px 0 0 var(--ok)} .jrrow-miss td:first-child{box-shadow:inset 3px 0 0 var(--fg3)} .jrrow-lost td:first-child{box-shadow:inset 3px 0 0 var(--hot)} .jrrow-none td:first-child{box-shadow:inset 3px 0 0 var(--line)} .jrtag{font-size:11px; padding:1px 7px; border-radius:999px; border:1px solid var(--line); background:var(--bg3); color:var(--fg2); white-space:nowrap} .jrtag.jr-hit{color:var(--ok); border-color:var(--ok); background:rgba(62,207,142,.14)} .jrtag.jr-miss{color:var(--fg3)} .jrtag.jr-lost{color:var(--hot); border-color:var(--hot); background:rgba(255,82,82,.14)} .jrwhy{background:var(--bg3); border:1px solid var(--line); border-radius:8px; padding:10px 12px; margin:10px 0} .jrwhy h4{margin:0 0 7px; font-size:12px} .jrnets{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:6px} .jrnet{font-size:11px; padding:2px 8px; border-radius:5px; border:1px solid var(--line); background:var(--bg2); color:var(--fg2); white-space:nowrap} .jrnet.on{color:var(--fg); border-color:var(--accent)} .jrnet.off{color:var(--fg3)} .jrtl{font-size:11px; line-height:1.75; color:var(--fg2); margin-top:6px} .jrtl div{white-space:normal} .jrtl .t{color:var(--fg3); font-variant-numeric:tabular-nums; margin-right:6px} .jrtl .k{color:var(--fg); font-weight:700; margin-right:6px} .jrcov{font-size:11px; color:var(--fg3); margin-top:6px; white-space:normal; line-height:1.6} .jrlink{font-size:11px; color:var(--accent); word-break:break-all} .jrnoteform{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:10px} .jrnotetext{flex:1 1 340px; min-width:200px} .jrnotes{font-size:12px; line-height:1.8} .jrnote{border-bottom:1px solid var(--line); padding:6px 0; display:flex; gap:8px; align-items:baseline; white-space:normal} .jrnote .ts{color:var(--fg3); font-size:11px; white-space:nowrap; font-variant-numeric:tabular-nums} .jrnote .au{color:var(--accent); font-size:11px; white-space:nowrap} #page-journal .tbl td, #page-journal .tbl th{white-space:normal} #page-journal .tbl td.nowrap{white-space:nowrap} /* ---------- U1: 열 머리 클릭 정렬 ---------- */ .tblbox{width:100%} .tbl th.sortable{cursor:pointer; user-select:none} .tbl th.sortable:hover{color:var(--fg); background:var(--sel)} .tbl th.sorted{color:var(--fg)} .tbl th .thlab{border-bottom:1px dotted var(--fg3)} .tbl th .tharrow{margin-left:4px; font-size:10px; color:var(--accent)} .sorthint{font-size:11px; margin-top:6px; line-height:1.5} #liveTableBox .tbl th{font-size:10.5px; line-height:1.35; padding:6px 5px} #liveTableBox .tbl td{padding:6px 5px} /* ---------- U1: 접기 상자 ---------- */ .foldbox{margin-top:10px; border-top:1px solid var(--line); padding-top:8px} .foldbox>summary, .foldpanel>summary{cursor:pointer; font-size:12px; color:var(--fg2); padding:2px 0} .foldbox>summary:hover, .foldpanel>summary:hover{color:var(--fg)} .foldpanel>summary{font-size:13px; font-weight:700; color:var(--fg)} .foldinner{margin-top:10px} /* ---------- U1: 첫 화면 "오늘" ---------- */ .todaybar{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:12px} @media (max-width:1100px){.todaybar{grid-template-columns:1fr 1fr}} .tcard{background:var(--bg2); border:1px solid var(--line); border-radius:8px; padding:10px 12px; min-width:0} .tcard .k{display:block; font-size:11px; color:var(--fg3); margin-bottom:3px} .tcard .v{display:block; font-size:18px; font-variant-numeric:tabular-nums; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .tcard .s{display:block; font-size:11px; color:var(--fg3); margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .tcard-big{border-color:var(--warn)} .tcard-big .v{color:var(--warn)} .okv{color:var(--ok)} .badv{color:var(--hot)} .warnv{color:var(--warn)} .bigline{font-size:13px; line-height:1.9} .bigrow{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; padding:3px 0} .bigrow .bl{flex:0 0 120px; color:var(--fg3); font-size:12px} .bigrow .bv{font-size:15px; font-variant-numeric:tabular-nums} .bigrow .bv.ok{color:var(--ok)} .bigrow .bv.bad{color:var(--hot)} .bigrow .bv.bad2{color:var(--fg2)} #tdLive10 .tbl td, #tdLive10 .tbl th{white-space:nowrap} /* 후보 표: 근거·보너스만 줄바꿈, 나머지는 한 줄 */ #pdA_cands .tbl td, #pdB_cands .tbl td, #pdA_cands .tbl th, #pdB_cands .tbl th{white-space:nowrap; vertical-align:top} #pdA_cands .reasoncell, #pdB_cands .reasoncell{white-space:normal; display:block; max-width:640px} /* 결과 추적 표: 숫자 칸은 오른쪽 정렬 · 근거 칸만 줄바꿈 */ #pdA_cands .tbl td:nth-child(n+6), #pdB_cands .tbl td:nth-child(n+6){text-align:right; font-variant-numeric:tabular-nums} #pdA_more .tbl td:last-child, #pdB_more .tbl td:last-child{width:99%} #pdA_track, #pdB_track{margin-bottom:8px} .viewbar{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:12px; background:var(--bg2); border:1px solid var(--line); border-radius:8px; padding:8px 12px} .viewbar .chip{font-size:12px; padding:4px 12px} .viewbar .muted{font-size:11.5px} .chartpanel{margin-top:10px} /* 1틱 함정 — 회색(판정 불가)으로 눈에 띄되 "좋음/나쁨" 색을 쓰지 않는다 */ .tickbadge{display:inline-block; margin-left:5px; font-size:10px; padding:0 6px; border-radius:999px; color:var(--fg2); border:1px solid var(--fg3); background:var(--bg3); white-space:nowrap} .tbl tr.tickrow td{opacity:.55} .tbl tr.tickrow td:first-child{box-shadow:inset 3px 0 0 var(--fg3)} .tickwarn{background:var(--bg3); border:1px solid var(--fg3); border-radius:6px; padding:7px 10px; margin-bottom:8px; font-size:12px; color:var(--fg)} .spikebadge{display:inline-block; margin-left:5px; font-size:10px; padding:0 5px; border-radius:999px; color:var(--warn); border:1px solid var(--warn); background:rgba(240,161,58,.14); white-space:nowrap} .gradetriple{font-size:10px; color:var(--fg2); line-height:1.35} .gradedat{font-size:11px; margin:6px 0} .statecell{display:inline-block} .statewhen{display:block; line-height:1.35} .cvwhy summary{white-space:nowrap} /* ---------- U1: "지금 상태" 카드 ---------- */ .btn-mini{font-size:11px; padding:2px 8px; margin-left:8px; vertical-align:middle} .nowcard{font-size:12.5px; line-height:1.7} .nowrow{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; padding:6px 0; border-bottom:1px solid var(--line)} .nowrow:last-of-type{border-bottom:0} .nowchip{flex:0 0 46px; text-align:center; font-size:11px; font-weight:700; padding:1px 0; border-radius:999px; border:1px solid var(--line); background:var(--bg3); color:var(--fg3)} .nowchip.now-on{color:var(--ok); border-color:var(--ok); background:rgba(62,207,142,.14)} .nowchip.now-off{color:var(--fg3)} .nowchip.now-unk{color:var(--warn); border-color:var(--warn); background:rgba(240,161,58,.14)} .nowname{flex:0 0 150px} .nowsmall{font-size:10.5px; line-height:1.4; margin-top:2px} .nowval{font-variant-numeric:tabular-nums} .nowbase,.nowpast{color:var(--fg3); font-size:11.5px} .nowhelp{margin-left:auto} .nowhelpbox{flex:1 1 100%; background:var(--bg3); border:1px solid var(--line); border-radius:6px; padding:7px 10px; margin:4px 0 2px; font-size:11.5px; line-height:1.65; color:var(--fg2)} .nowfoot{margin-top:9px; padding-top:8px; border-top:1px solid var(--line); font-size:12.5px} #onchainList .tbl td, #onchainList .tbl th{white-space:nowrap} #onchainSum{margin-bottom:8px} #page-coverage .cvsrc{max-width:180px} /* 색은 3가지 뜻만: 초록=좋음/맞음, 빨강=놓침/못함, 노랑=진행/주의 (채울 수 있음 = 아직 안 한 일 → 노랑으로 통일) */ .cvlg.cv-fillable{background:var(--warn)} .cvbadge.cv-fillable{background:rgba(240,161,58,.16); color:var(--warn); border-color:var(--warn)} .cvrow.cv-fillable td:first-child{box-shadow:inset 3px 0 0 var(--warn)} /* ====================================================================== FX4 (2026-09-23) 새 첫 화면 한 장 — 시안 docs/design/DASH_SIMPLE_MOCKUP_2026-09-23.html 옛 화면(상단 바·탭·탭 7개)은 지우지 않고 body.home-mode 일 때만 숨긴다. 색: 초록 = 이익/정상 · 빨강 = 손실/멈춤 · 노랑 = 주의 (시안 그대로) ====================================================================== */ body.home-mode .topbar, body.home-mode .tabs{display:none} .tab-home{color:var(--accent); font-weight:700} #page-home{ --h-up:#3ecf8e; --h-dn:#ff6b6b; --h-warn:#f0a13a; --h-warnbg:rgba(240,161,58,.14); --h-okbg:rgba(62,207,142,.12); --h-dnbg:rgba(255,107,107,.12); --h-buy:#3ecf8e; --h-sell:#ff922b; --h-hi:#9aa4b1; --h-line2:var(--accent); font-size:15px; line-height:1.6; color:var(--fg); } body[data-theme="light"] #page-home{ --h-up:#1b7f4b; --h-dn:#c0392b; --h-warn:#b7791f; --h-warnbg:#fdf3dc; --h-okbg:rgba(27,127,75,.10); --h-dnbg:rgba(192,57,43,.10); --h-buy:#1b7f4b; --h-sell:#d9480f; --h-hi:#888; --h-line2:#2563eb; } #page-home .hm{max-width:1040px; margin:0 auto; padding:12px 16px 40px} #page-home .hm-head{display:flex; align-items:center; gap:10px; margin:2px 0 10px} #page-home .hm-title{font-size:17px; white-space:nowrap} #page-home .hm-head .hm-btn2{white-space:nowrap; flex:0 0 auto} #page-home .hm-head .hm-mut{flex:1 1 auto; min-width:0} #page-home .hm-card{background:var(--bg2); border:1px solid var(--line); border-radius:12px; padding:14px; margin-bottom:14px; min-width:0} #page-home h2{font-size:16px; margin:0 0 8px; font-weight:700; line-height:1.45} #page-home .hm-h2s{font-size:12.5px; font-weight:400; color:var(--fg2); margin-left:4px} #page-home .hm-mut{color:var(--fg2); font-size:13px} #page-home .up{color:var(--h-up)} #page-home .dn{color:var(--h-dn)} #page-home .warn{color:var(--h-warn)} #page-home .hm-z{color:var(--fg2)} #page-home a{color:var(--accent)} /* 신호등 줄 */ #page-home .hm-top{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap} #page-home .hm-lightline{font-size:17px; min-width:0; flex:1 1 260px} #page-home .hm-light{width:16px; height:16px; border-radius:50%; display:inline-block; vertical-align:-2px; margin-right:8px; background:var(--fg3)} #page-home .hm-l-green{background:var(--h-up)} #page-home .hm-l-yel{background:var(--h-warn)} #page-home .hm-l-red{background:var(--h-dn)} #page-home .hm-l-wait{background:var(--fg3)} #page-home .hm-acts{display:flex; gap:6px; flex:0 0 auto} #page-home .hm-btn{border:1px solid var(--h-dn); color:var(--h-dn); background:none; border-radius:8px; padding:6px 14px; font-size:14px; cursor:pointer; font-family:inherit} #page-home .hm-btn2{border:1px solid var(--line); color:var(--fg); background:none; border-radius:8px; padding:6px 14px; font-size:14px; cursor:pointer; font-family:inherit} #page-home .hm-btn:disabled, #page-home .hm-btn2:disabled{opacity:.4; cursor:not-allowed} #page-home .hm-btn-s{padding:3px 10px; font-size:12.5px} #page-home .hm-issues{margin-top:6px} #page-home .hm-issue{font-size:13px; border-radius:8px; padding:6px 10px; margin-top:6px} #page-home .hm-issue.red{background:var(--h-dnbg); color:var(--h-dn)} #page-home .hm-issue.yel{background:var(--h-warnbg); color:var(--h-warn)} #page-home .hm-parts{margin-top:8px} #page-home .hm-actmsg{font-size:13px; color:var(--h-warn); margin-top:4px; white-space:pre-wrap; word-break:break-word} #page-home .hm-actmsg:empty{display:none} /* 숫자 셋 */ #page-home .hm-tiles{display:flex; gap:10px; margin-top:12px} #page-home .hm-tile{flex:1 1 0; min-width:0; background:var(--bg); border-radius:8px; padding:10px 8px; text-align:center} #page-home .hm-k{color:var(--fg2); font-size:13px} #page-home .hm-big{font-size:24px; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} #page-home .hm-s{color:var(--fg2); font-size:11.5px; line-height:1.4; margin-top:2px; word-break:keep-all} /* 후보 두 목록 — 넓으면 나란히, 폰이면 위아래 */ #page-home .hm-two{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px} #page-home .hm-dayban{background:var(--h-warnbg); color:var(--h-warn); border-radius:8px; padding:8px 12px; font-size:14px; margin-bottom:14px} #page-home .hm-dayban button{margin-left:8px} /* 표 */ #page-home .hm-sortnote{font-size:12px; color:var(--fg2); margin:-2px 0 6px} #page-home .hm-tblbox{width:100%; overflow-x:auto} #page-home .hm-tbl{width:100%; border-collapse:collapse; font-size:14px} #page-home .hm-tbl th{color:var(--fg2); font-weight:500; text-align:left; padding:5px 4px; font-size:12.5px; cursor:pointer; user-select:none; white-space:nowrap} #page-home .hm-tbl th.num, #page-home .hm-tbl td.num{text-align:right; font-variant-numeric:tabular-nums} #page-home .hm-tbl th.on{color:var(--fg)} #page-home .hm-tbl th .hm-ar{font-size:10px; margin-left:2px; color:var(--fg3)} #page-home .hm-tbl th.on .hm-ar{color:var(--accent)} #page-home .hm-tbl td{padding:6px 4px; border-top:1px solid var(--line); vertical-align:top} #page-home .hm-tbl th.num+th:not(.num), #page-home .hm-tbl td.num+td:not(.num){padding-left:12px} #page-home .hm-tbl tbody tr.hm-row{cursor:pointer} #page-home .hm-tbl tbody tr.hm-row:hover td{background:var(--bg3)} #page-home .hm-tbl tr.sel td{background:var(--bg)} #page-home .hm-tbl tr.hm-exp td{border-top:none; background:var(--bg); padding:4px 6px 10px} #page-home .hm-tbl .hm-kn{display:block; font-size:11px; color:var(--fg3); line-height:1.3} #page-home .hm-tbl .hm-sub{display:block; font-size:11.5px; color:var(--fg2); line-height:1.35} #page-home .hm-tbl .hm-tag{font-size:11px; border-radius:999px; padding:0 6px; border:1px solid var(--line); white-space:nowrap} #page-home .hm-tbl .hm-tag.ok{color:var(--h-up); border-color:var(--h-up)} #page-home .hm-tbl .hm-tag.no{color:var(--fg3)} #page-home .hm-tbl .hm-tag.warn{color:var(--h-warn); border-color:var(--h-warn)} #page-home .hm-empty{color:var(--fg2); font-size:13px; padding:10px 4px} #page-home .hm-foot{margin-top:6px; font-size:12px; line-height:1.55} /* 1분봉 작은 그림 */ #page-home .hm-spark svg{display:block; width:100%; max-width:100%; height:auto} #page-home .hm-sp-line{fill:none; stroke:var(--h-line2); stroke-width:1.6} #page-home .hm-sp-band{fill:var(--h-line2); fill-opacity:.2; stroke:none} #page-home .hm-sptitle{font-size:11.5px; color:var(--fg3); margin:2px 0 2px} /* FX4f % 축 그림 */ #page-home .hm-c-grid{stroke:var(--line); stroke-width:1} #page-home .hm-c-vgrid{stroke:var(--line); stroke-width:1; stroke-dasharray:2 3} #page-home .hm-c-ylab{fill:var(--fg3); font-size:10px} #page-home .hm-c-ylab0{fill:var(--fg2); font-weight:700} #page-home .hm-c-xlab{fill:var(--fg3); font-size:10px} #page-home .hm-c-zero{stroke:var(--fg2); stroke-width:1.6; stroke-dasharray:6 4} #page-home .hm-c-uparea{fill:var(--h-up); fill-opacity:.13; stroke:none} #page-home .hm-c-dnarea{fill:var(--h-dn); fill-opacity:.13; stroke:none} #page-home .hm-c-pick{stroke:var(--accent); stroke-width:1.4; stroke-dasharray:3 3} #page-home .hm-c-pickdot{fill:var(--accent); stroke:var(--bg2); stroke-width:2} #page-home .hm-c-enddot{fill:var(--fg2); stroke:var(--bg2); stroke-width:1.5} #page-home .hm-c-lab{font-size:11px; fill:var(--fg); paint-order:stroke; stroke:var(--bg2); stroke-width:3px; stroke-linejoin:round} #page-home .hm-c-lab0{fill:var(--fg2)} #page-home .hm-c-labpick{fill:var(--accent); font-weight:700} #page-home .hm-c-labhi{font-weight:700} #page-home .hm-c-labbuy{fill:var(--h-buy); font-weight:700} #page-home .hm-c-labsell{fill:var(--h-sell); font-weight:700} #page-home .hm-c-labend{fill:var(--fg2)} /* FX4h — 펼친 그림 닫기 ✕(보이는 건 작게, 누르는 자리 32px) · 시장 두 줄 · 좁은 폰에서 순위 열 숨김 */ #page-home .hm-tbl tr.hm-exp td{position:relative; padding-top:6px} #page-home .hm-xbtn{position:absolute; top:0; right:0; width:34px; height:34px; border:none; background:transparent; color:var(--fg2); font-size:14px; line-height:34px; text-align:center; cursor:pointer; border-radius:8px; z-index:2; padding:0} #page-home .hm-xbtn:hover{background:var(--bg3); color:var(--fg)} #page-home .hm-tbl tr.hm-exp .hm-zoombar, #page-home .hm-tbl tr.hm-exp .hm-sptitle{padding-right:36px} #page-home .hm-mklab{font-size:12.5px; color:var(--fg); margin-right:2px; white-space:nowrap} #page-home .hm-mkline + .hm-mkline{margin-top:3px} @media (max-width:480px){ #page-home .hm-col-rank{display:none} } #page-home .hm-tbl .hm-src9{color:var(--h-warn)} /* FX4g */ #page-home .hm-c-v9{stroke:var(--fg3); stroke-width:1.2; stroke-dasharray:4 3} #page-home .hm-c-xlab9{fill:var(--fg); font-weight:700} #page-home .hm-c-xlab0{fill:var(--accent); font-weight:700} #page-home .hm-c-hiline{stroke:var(--h-hi); stroke-width:1; stroke-dasharray:3 3} #page-home .hm-c-needle{stroke:var(--h-hi); stroke-width:4; stroke-linecap:round; opacity:.85} #page-home .hm-c-cdot{fill:var(--h-line2); stroke:var(--bg2); stroke-width:1.5} #page-home .hm-c-labc{fill:var(--h-line2)} #page-home .hm-tbl .hm-needle{color:var(--h-warn)} #page-home .hm-zoombar{display:flex; gap:6px; margin:2px 0 4px} #page-home .hm-zoombar .on{border-color:var(--accent); color:var(--accent); font-weight:700} #page-home .hm-sp-ref{stroke:var(--fg3); stroke-width:1; stroke-dasharray:4 3} #page-home .hm-sp-vl{stroke:var(--line); stroke-width:1} #page-home .hm-sp-ax{fill:var(--fg3); font-size:10px} #page-home .hm-sp-buy{fill:var(--h-buy)} #page-home .hm-sp-sell{fill:var(--h-sell)} #page-home .hm-sp-hi{fill:var(--h-hi)} #page-home .hm-lg{font-size:12px; color:var(--fg2); line-height:1.6; margin-top:2px} #page-home .hm-dot{display:inline-block; width:9px; height:9px; border-radius:50%; margin:0 3px 0 6px; vertical-align:0} #page-home .hm-dot.buy{background:var(--h-buy)} #page-home .hm-dot.sell{background:var(--h-sell)} #page-home .hm-dot.hi{background:var(--h-hi)} #page-home .hm-dash{display:inline-block; width:14px; border-top:1px dashed var(--fg3); margin:0 3px 0 6px; vertical-align:3px} /* 아침 흐름 */ #page-home .hm-steps{display:flex; gap:4px; flex-wrap:wrap; font-size:13px} #page-home .hm-step{flex:1 1 92px; min-width:92px; background:var(--bg); border-radius:8px; padding:6px 8px} #page-home .hm-step b{display:block; font-variant-numeric:tabular-nums} #page-home .hm-step .ok{color:var(--h-up)} #page-home .hm-step .bad{color:var(--h-dn)} #page-home .hm-step .warn{color:var(--h-warn)} #page-home .hm-step .wait{color:var(--fg2)} #page-home .hm-step .skip{color:var(--fg3)} #page-home .hm-flownote{font-size:13px; border-radius:8px; padding:6px 10px; margin-top:8px} #page-home .hm-flownote.red{background:var(--h-dnbg); color:var(--h-dn)} #page-home .hm-flownote.yel{background:var(--h-warnbg); color:var(--h-warn)} /* 달력 */ #page-home .hm-calnav{display:flex; align-items:center; gap:8px; margin-bottom:6px; font-size:14px} #page-home .hm-cal{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; font-size:13px; text-align:center} #page-home .hm-cal>div{background:var(--bg); border-radius:6px; padding:4px 0; min-height:42px; line-height:1.35} #page-home .hm-cal>div.h{background:none; color:var(--fg2); min-height:auto} #page-home .hm-cal>div.blank{background:none} #page-home .hm-cal>div.click{cursor:pointer} #page-home .hm-cal>div.click:hover{outline:1px solid var(--fg3)} #page-home .hm-cal>div.on{outline:2px solid var(--accent)} #page-home .hm-cal>div.today{box-shadow:inset 0 -2px 0 var(--accent)} #page-home .hm-cal>div.fut{color:var(--fg3)} #page-home .hm-cal b{font-size:12.5px} #page-home .hm-cal .hm-cs{font-size:11px; color:var(--fg3)} /* 보고서 */ #page-home .hm-docs{font-size:14px; line-height:2} #page-home .hm-docs a{margin-right:4px; overflow-wrap:anywhere} #page-home .hm-docs .sep{color:var(--fg3); margin-right:4px} #page-home .hm-docview{border:1px solid var(--accent); border-radius:8px; padding:8px; margin-top:8px} #page-home .hm-docvhead{display:flex; align-items:center; gap:8px; justify-content:space-between; margin-bottom:6px; font-size:14px} #page-home .hm-docbody{white-space:pre-wrap; word-break:break-word; margin:0; max-height:60vh; overflow:auto; font-family:Consolas,"Malgun Gothic",monospace; font-size:12px; line-height:1.6; color:var(--fg2); background:var(--bg); padding:8px; border-radius:6px} #page-home .hm-old{margin-top:10px} /* FX4b 시장 한눈에 · 거래대금 · 시장 비교 */ #page-home .hm-mkbig{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; font-size:15px} #page-home .hm-mkpart b{font-size:22px; font-variant-numeric:tabular-nums} #page-home .hm-mkbar{display:flex; height:10px; border-radius:5px; overflow:hidden; background:var(--bg); margin:8px 0} #page-home .hm-mkbar .seg{display:block; height:100%} #page-home .hm-mkbar .seg.up{background:var(--h-up)} #page-home .hm-mkbar .seg.down{background:var(--h-dn)} #page-home .hm-mkbar .seg.flat{background:var(--fg3)} #page-home .hm-mkline{display:flex; flex-wrap:wrap; gap:4px 14px; font-size:13.5px} #page-home .hm-mkchip{white-space:nowrap} #page-home .hm-vs{font-size:13px; background:var(--bg); border-radius:8px; padding:6px 10px; margin:0 0 8px; line-height:1.6} #page-home .hm-vs:empty{display:none} #page-home .hm-vs-wait{color:var(--fg2)} #page-home .hm-tbl .hm-kn2{display:block; font-size:11px; color:var(--fg3); line-height:1.3; overflow-wrap:anywhere} #page-home .hm-more{text-align:center; margin-top:8px} @media (max-width:860px){ #page-home .hm-two{grid-template-columns:minmax(0,1fr); gap:0} } @media (max-width:480px){ #page-home .hm{padding:10px 16px 32px} #page-home .hm-card{padding:12px 10px} #page-home .hm-lightline{font-size:15.5px} #page-home .hm-big{font-size:18px} #page-home .hm-tiles{gap:6px} #page-home .hm-tile{padding:8px 4px} #page-home .hm-tbl{font-size:13px} #page-home .hm-tbl th{font-size:11.5px; padding:5px 3px} #page-home .hm-tbl td{padding:6px 3px} #page-home .hm-tbl .hm-kn{display:none} #page-home #hmTv .hm-tbl{font-size:12px} #page-home .hm-mkpart b{font-size:19px} #page-home .hm-mkline{font-size:12.5px; gap:2px 10px} #page-home .hm-step{min-width:84px; flex-basis:84px} #page-home .hm-btn, #page-home .hm-btn2{padding:6px 10px} } /* ======== CP1 (2026-09-25) 매매 가능 금액 칸 — 초록 ● 매매 가능 · 노랑 ◐ 소액만 · 빨강 ○ 매매 불가 ======== */ #page-home .hm-tbl .hm-cap-main{display:block; white-space:nowrap; font-variant-numeric:tabular-nums} #page-home .hm-tbl .hm-cap-2{white-space:nowrap} #page-home .hm-tbl .hm-cap .hm-nw{white-space:nowrap} #page-home .hm-cap-sym{font-weight:700} #page-home .hm-cap-ok{color:var(--h-up)} #page-home .hm-cap-small{color:var(--h-warn)} #page-home .hm-cap-no{color:var(--h-dn)} #page-home .hm-capbox{margin:2px 0 10px; padding-right:36px; box-sizing:border-box; width:0; min-width:100%} /* 바깥 후보 표 폭 계산에 끼지 않게(넘치면 안쪽에서만 옆으로 밀림) */ #page-home .hm-captitle{font-size:13px; font-weight:700; margin-bottom:4px} #page-home .hm-tbl.hm-captbl{font-size:13px; width:auto; min-width:60%} #page-home .hm-tbl.hm-captbl th{cursor:default} /* 펼친 줄(tr.hm-exp td) 규칙이 안쪽 표까지 먹으므로 한 단계 더 좁혀 덮는다 */ #page-home .hm-tbl .hm-tbl.hm-captbl td, #page-home .hm-tbl .hm-tbl.hm-captbl th, #page-home .hm-tbl.hm-captbl td, #page-home .hm-tbl.hm-captbl th{padding:3px 6px; line-height:1.4; border-top:1px solid var(--line); background:none} #page-home .hm-tbl.hm-captbl thead th{border-top:none; vertical-align:bottom} #page-home .hm-capbox .hm-nw{white-space:nowrap} #page-home .hm-capk2{display:block; font-size:10.5px; color:var(--fg3); font-weight:400} #page-home .hm-tbl.hm-captbl td.hm-capk{color:var(--fg2)} #page-home .hm-tbl.hm-captbl td.num{white-space:nowrap} #page-home .hm-capnote{font-size:11.5px; color:var(--fg2); line-height:1.45; margin-top:4px} #page-home .hm-tbl .hm-cap-mini{display:none} @media (max-width:480px){ #page-home .hm-tbl .hm-capcol{display:none} #page-home .hm-tbl .hm-cap-mini{display:block; font-size:12px; line-height:1.3; white-space:nowrap} #page-home .hm-capbox{padding-right:28px} #page-home .hm-tbl.hm-captbl{font-size:12px} } /* ======== UL1 (2026-09-25) 업비트 바로가기 단추 "업비트 ↗" — 모든 화면 공통 ======== 진석: "종목 옆에 업비트 바로가기 버튼 하나 만들고, 업비트 원화마켓으로 바로 연결할 수 있게." 색 = 각 톤의 --accent(어두운 #4a9cf0 · 밝은 #2563eb) · 누르는 자리는 ::after 로만 넓힌다(보이는 크기·표 폭은 그대로) */ .ub-btn{display:inline-block; position:relative; margin-left:5px; padding:0 5px; border:1px solid var(--accent); border-radius:999px; color:var(--accent); background:transparent; font-size:10.5px; font-weight:400; line-height:15px; white-space:nowrap; text-decoration:none; vertical-align:1px; cursor:pointer; font-family:inherit; -webkit-tap-highlight-color:transparent} .ub-btn::after{content:''; position:absolute; left:-4px; right:-4px; top:-7px; bottom:-7px} .ub-btn .ub-lab{margin-right:3px} .ub-btn:visited, #page-home a.ub-btn{color:var(--accent)} .ub-btn:focus-visible, #page-home a.ub-btn:focus-visible{background:var(--accent); color:var(--bg2); outline:none} @media (hover:hover){ .ub-btn:hover, #page-home a.ub-btn:hover{background:var(--accent); color:var(--bg2)} } /* 첫 화면 표 — 폰(≤480px): · 9시·장중 후보 표 = 종목 글자 아래 한 줄에 "업비트 ↗"(그 칸은 매매 가능 금액 글자가 더 넓어 표 폭 그대로 — 실측) · 오늘 판·거래대금 표(ub-sm) = 폰에서 이미 최소 폭이라 "↗" 만, 종목 글자 옆(자리 없으면 아래로) */ @media (max-width:480px){ #page-home .hm-tbl .ub-btn{display:block; width:-webkit-max-content; width:max-content; margin:3px 0 1px} #page-home .hm-tbl .ub-btn.ub-sm{display:inline-block; width:auto; margin:0 0 0 4px; padding:0 5px; font-size:11px} #page-home .hm-tbl .ub-btn.ub-sm .ub-lab{display:none} } /* 옛 화면 표 칸(span.ub-cq) — 폰(≤480px)과 일지 후보 표(이름 칸이 원래 한두 글자 폭으로 눌려 있음)에서는 단추를 이름 아래 줄로 내리고 칸 폭 계산에서 뺀다(container-type:inline-size → 표 폭 그대로). 칸이 단추보다 좁으면 '업비트' 글자를 숨기고 ↗ 만(@container). 컨테이너 질의가 없는 옛 브라우저는 그냥 이름 아래 줄. */ @media (max-width:480px){ .tbl .ub-cq{display:block; container-type:inline-size; margin-top:2px} .tbl .ub-cq .ub-btn{margin-left:0} } #jrPicks .tbl .ub-cq{display:block; container-type:inline-size; margin-top:2px} #jrPicks .tbl .ub-cq .ub-btn{margin-left:0} @container (max-width:58px){ .ub-cq .ub-btn .ub-lab{display:none} } /* 옛 화면 오늘 탭 ①② 추적 표 — 칸 글자를 한 줄로 묶어 둔 표라 단추는 이름 아래 줄로(표 폭이 안 늘게, 실측: 폭·높이 그대로) */ #pdA_cands .tbl .ub-btn, #pdB_cands .tbl .ub-btn{display:block; width:-webkit-max-content; width:max-content; margin:2px 0 0} /* 펼친 그림 제목 줄(종목 이름 + 단추) — 오른쪽 ✕ 자리는 비워 둔다 */ #page-home .hm-exptitle{padding-right:40px; margin:0 0 4px; font-size:13.5px; line-height:1.6} #page-home .hm-exptitle-kn{color:var(--fg2); font-size:12.5px} #page-home .hm-tbl .hm-exptitle .ub-btn{display:inline-block; width:auto; margin:0 0 0 6px; vertical-align:1px} /* ======== TV1 (2026-09-26) 트레이딩뷰 차트 단추 "트뷰 ↗" — 업비트 단추 바로 옆 ======== 진석: "여기 지금 업비트 링크 있잖아 여기 트레이딩뷰 링크도 같이 넣어 거래소 업비트로" 단추 class = "ub-btn tv-btn" → 위 UL1 규칙(모양 · 폰 좁은 표: ub-sm 은 ↗ 만 · span.ub-cq 는 칸 폭 계산에서 빠지고 좁으면 ↗ 만 · 펼친 그림 제목 줄)을 그대로 받는다. 여기서는 ①색 ②두 단추 사이 간격·줄바꿈 ③누르는 자리 겹침 막기만 더한다. 색 = 각 톤의 --purple(어두운 #a97bff · 밝은 #7a45d8) — 업비트 단추 파랑(--accent)과 구별 [내 발명] */ .ub-btn.tv-btn{border-color:var(--purple); color:var(--purple)} .tv-btn:visited, #page-home a.tv-btn{color:var(--purple)} .tv-btn:focus-visible, #page-home a.tv-btn:focus-visible{background:var(--purple); color:var(--bg2); outline:none} @media (hover:hover){ .tv-btn:hover, #page-home a.tv-btn:hover{background:var(--purple); color:var(--bg2)} } /* 누르는 자리: 트뷰는 업비트 단추 쪽(왼쪽·위)으로 안 넓힌다 — 옆에 붙든 아래 줄로 내려가든 업비트 단추를 덮지 않게 */ .ub-btn.tv-btn::after{left:0; top:0} /* 두 단추 사이 간격·줄바꿈 — 칸이 두 단추보다 좁으면 트뷰가 아래 줄로 내려가고 칸 폭은 안 늘어난다. 겹(span.ub-cq · span.ub-pair)을 이름 아래 한 줄로 내리는 자리는 flex 줄바꿈 + gap (gap 은 같은 줄일 때만 생겨서, 아래 줄로 내려간 트뷰가 들여쓰기 없이 업비트 단추와 왼쪽이 맞는다) */ .ub-cq{white-space:normal} /* 넓은 화면 옛 표 칸(글자 안 꺾는 칸): 두 단추 사이에서만 줄바꿈 허용 */ @media (max-width:480px){ .tbl .ub-cq{display:flex; flex-wrap:wrap; gap:2px 4px} } #jrPicks .tbl .ub-cq{display:flex; flex-wrap:wrap; gap:2px 4px} /* 오늘 탭 ①② 추적 표: UL1 은 단추 하나를 이름 아래 줄(display:block)로 — 두 단추는 겹(span.ub-cq)째 그 줄에 */ #pdA_cands .tbl .ub-cq, #pdB_cands .tbl .ub-cq{display:flex; flex-wrap:wrap; gap:2px 4px; margin-top:2px} #pdA_cands .tbl .ub-cq .ub-btn, #pdB_cands .tbl .ub-cq .ub-btn{width:auto; margin:0} /* 한 줄 flex 목록(실시간 신호 로그 .logrow · 일지 메모 .jrnote): 두 단추를 겹(span.ub-pair-row)째 한 칸으로 — flex 줄은 안 꺾여서 트뷰를 따로 넣으면 줄의 최소 폭이 트뷰만큼 늘고 칸이 옆으로 밀린다(실측 +58.5px). 겹 안에서만 줄바꿈 → 겹의 최소 폭 = 업비트 단추 폭. 겹 왼쪽 5px = 업비트 단추가 원래 갖던 간격 */ .ub-pair.ub-pair-row{display:inline-flex; flex-wrap:wrap; gap:2px 4px; margin-left:5px} .ub-pair.ub-pair-row > .ub-btn{margin-left:0} /* 첫 화면 9시·장중 후보 표(폰): UL1 은 단추를 이름 아래 줄(display:block)로 — 두 단추를 겹(span.ub-pair)째 그 줄에 */ @media (max-width:480px){ #page-home .hm-tbl .ub-pair{display:flex; flex-wrap:wrap; gap:3px 4px; margin:3px 0 1px} #page-home .hm-tbl .ub-pair > .ub-btn{width:auto; margin:0} } /* 첫 화면 오늘 판·거래대금 표(small, 폰에선 ↗ 만): 두 ↗ 를 겹(span.ub-pair-sm)째 — 종목 글자 옆에 자리 없으면 둘이 같이 아래 줄로, 그 줄에도 둘이 안 들어가면 트뷰만 한 줄 더 아래로(칸 폭은 안 늘어남). 글자와의 간격 = 겹 앞 빈칸(app.js) */ #page-home .hm-tbl .ub-pair.ub-pair-sm{display:inline-flex; flex-wrap:wrap; gap:2px 4px; margin:0; vertical-align:1px} #page-home .hm-tbl .ub-pair.ub-pair-sm > .ub-btn{margin:0} /* ======== SC2 (2026-09-26) 「⚡ 지금 볼 코인」 탭 — 설계서 docs/design/SCREENER_v0.md 5절 ======== 색: 오름 빨강·내림 파랑(업비트와 같은 뜻) · 상태 초록=켜짐 · 회색=쉼 · 노랑=준비 중·연결 중 · 빨강=멈춤·끊김·오류 폰: 종목 칸을 왼쪽에 붙여 두고(표를 옆으로 밀어도 보임) 바로 옆 칸이 1분 오름 → 종목·업비트 단추·1분 오름이 한눈에 */ .tab-sc{color:var(--warn); font-weight:700} #page-screener .sc{max-width:1500px} #page-screener .sc-head{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px; margin:0 0 6px} #page-screener .sc-title{font-size:17px} #page-screener .sc-status{font-size:13px; font-weight:700; border-radius:999px; padding:1px 10px; border:1px solid var(--line)} #page-screener .sc-status.sc-ok{color:var(--ok); border-color:var(--ok)} #page-screener .sc-status.sc-wait{color:var(--fg2)} #page-screener .sc-status.sc-warn{color:var(--warn); border-color:var(--warn)} #page-screener .sc-status.sc-bad{color:var(--hot); border-color:var(--hot)} #page-screener .sc-age{font-size:12px; color:var(--fg2); font-variant-numeric:tabular-nums} #page-screener .sc-stale{background:rgba(255,82,82,.12); color:var(--hot); border:1px solid var(--hot); border-radius:8px; padding:7px 10px; margin:0 0 8px; font-size:13px; font-weight:700; line-height:1.5} #page-screener .sc-meta{font-size:11.5px; margin:0 0 4px} #page-screener .sc-intro{font-size:12px; color:var(--fg2); margin:0 0 10px; line-height:1.5} #page-screener .sc-list h3{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px; font-size:14px} #page-screener .sc-list h3 .h3sub{margin-left:0} #page-screener .sc-est{font-size:11px; font-weight:400; color:var(--warn); border:1px solid var(--warn); border-radius:999px; padding:0 7px} #page-screener .sc-lnote{font-size:12px; color:var(--fg2); margin:-2px 0 6px; line-height:1.5} #page-screener .sc-warnnote{color:var(--warn)} #page-screener .sc-tbl{overflow-x:auto; -webkit-overflow-scrolling:touch} #page-screener .sc-tbl .tbl{font-size:12.5px} #page-screener .sc-tbl .tbl tbody tr{cursor:default} #page-screener .sc-tbl .tbl th{white-space:nowrap} #page-screener .sc-empty{color:var(--fg2); font-size:13px; padding:10px 4px; border-top:1px solid var(--line)} #page-screener .sc-tbl .tbl td{vertical-align:top} #page-screener .sc-tbl .tbl th:first-child, #page-screener .sc-tbl .tbl td:first-child{position:sticky; left:0; z-index:1; background:var(--bg2)} #page-screener .sc-tbl .tbl th:first-child{z-index:3; background:var(--bg3)} #page-screener .sc-tbl .tbl tbody tr:hover td:first-child{background:var(--bg3)} #page-screener .sc-name b{font-size:13px} #page-screener .sc-kn{font-size:11px; color:var(--fg3); margin-left:4px} #page-screener .sc-sub{font-size:11px; color:var(--fg3)} #page-screener .sc-why{display:inline-block; white-space:normal; min-width:200px; max-width:420px; line-height:1.45} #page-screener .up{color:var(--up)} #page-screener .dn{color:var(--dn)} #page-screener .sc-cap{white-space:nowrap} #page-screener .sc-cap-ok{color:var(--ok)} #page-screener .sc-cap-small{color:var(--warn)} #page-screener .sc-cap-no{color:var(--hot)} #page-screener.sc-is-stale .sc-tbl{opacity:.45} #page-screener .sc-foot{font-size:11.5px; line-height:1.6; margin-top:4px} @media (max-width:480px){ #page-screener .sc{padding:10px} #page-screener .panel{padding:10px 8px} #page-screener .sc-tbl .tbl{font-size:12px} #page-screener .sc-tbl .tbl td, #page-screener .sc-tbl .tbl th{padding:5px} #page-screener .sc-kn{display:block; margin-left:0; max-width:84px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} #page-screener .sc-why{min-width:180px} } /* ======== TR1 (2026-09-26) 거래대금·대금 순위 칸 — 세 표 공통 ======== 진석: "뽑은 종목들 옆에 거래대금하고 거래대금 순위도 넣어야 돼 순위 소트로 조절 가능해야 되고 다 소트키! 소트키" · '—' = 받은 지 30초 넘음·파일 없음·지난 날 등 → 마우스를 올리면 까닭(물음표 커서) · 「⚡ 지금 볼 코인」: 두 칸은 오름 칸 바로 뒤(표는 원래 자기 칸 안에서 옆으로 미는 표 — 문서 폭은 그대로) · 첫 화면 9시·장중 후보: 카드가 좁다(09-26 실측 — 나란한 두 카드의 표 칸 467px(창 1280·1920 같음, 페이지 최대 1040px) · 폰 321px). TR1 전 표는 그 폭에 딱 맞았고, 두 칸을 넣으면 574·567px(폰 383px)로 넘쳐 '최고' 칸이 가려진다. → 표 칸(#hmA·#hmB) 폭 기준(컨테이너 질의): 600px 이상이면 두 칸, 그 밑이면 두 칸을 숨기고 종목 이름 아래 작은 줄 "대금 123억 · 12위" + 표 위 '대금 순위순' 정렬 단추(그 칸 머리를 누른 것과 같음) [내 발명 — 코디네이터 "좁을 때는 칸 대신 종목 이름 아래 작은 줄", "대신 정렬은 폰에서도"]. 컨테이너 질의를 모르는 옛 브라우저는 좁은 쪽(작은 줄+단추)으로 보인다 */ .tr-na{cursor:help} .tr-tv, .tr-rank{white-space:nowrap; font-variant-numeric:tabular-nums} #page-home #hmA, #page-home #hmB{container-type:inline-size} #page-home .hm-tbl .tr-col-tv, #page-home .hm-tbl .tr-col-rank{display:none} #page-home .hm-tbl .tr-mini{display:block; font-size:11.5px; color:var(--fg2); line-height:1.3; white-space:normal} #page-home .hm-tbl .tr-mini-a, #page-home .hm-tbl .tr-mini-b{white-space:nowrap} #page-home .tr-sortbtn{display:block; width:-webkit-max-content; width:max-content; margin:0 0 6px 0; padding:2px 10px; font-size:12px; line-height:1.5; color:var(--fg2); background:var(--bg3); border:1px solid var(--line); border-radius:999px; cursor:pointer; font-family:inherit} #page-home .tr-sortbtn.on{color:var(--accent); border-color:var(--accent)} @container (min-width:600px){ #page-home .hm-tbl .tr-col-tv, #page-home .hm-tbl .tr-col-rank{display:table-cell} #page-home .hm-tbl .tr-mini, #page-home .tr-sortbtn{display:none} } /* ======== JR2 (2026-09-26) 💼 내 보유 코인(첫 화면 맨 위) · 📒 매매 기록 탭 ======== 진석: "제일 상단에는 현재 내가 보유하고 있는 코인 보여주고, 진입가와 현재 수익률 정리하게 되면, 그것을 기록으로 남겨둘 탭을 따로 만들어" · 보유 표 = 표 칸(#hdBox) 폭 기준(컨테이너 질의 — TR1 과 같은 방식): 720px 이상이면 8칸 전부, 그 밑(폰·좁은 창)이면 종목·수익률·평가손익 3칸 + 종목 이름 아래 작은 줄(진입·지금·평가·수량·자동/직접) + 숨은 칸 정렬 단추 [내 발명]. 컨테이너 질의를 모르는 옛 브라우저는 좁은 쪽으로 보인다. · 매매 기록 표 = 표 상자 안에서만 옆으로 민다(문서 폭은 그대로 — ⚡ 탭과 같음). 상자가 700px 밑이면 종목 이름 아래에 수익률·손익 작은 줄 → 옆으로 안 밀어도 보인다 [내 발명] · 색: 첫 화면은 첫 화면 규칙(이익 초록·손실 빨강), 매매 기록 탭은 옛 화면·업비트 규칙(오름 빨강·내림 파랑) */ #page-home .hd-top{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:0 10px} #page-home .hd-top h2{margin-bottom:6px} #page-home .hd-line{font-size:14px; line-height:1.6; margin:0 0 6px; font-variant-numeric:tabular-nums} #page-home .hd-line b{white-space:nowrap} #page-home .hd-line .hm-issue{margin-top:4px} #page-home .hd-na{cursor:help} #page-home .hd-nw{white-space:nowrap} #page-home .hd-tag{font-size:11px; color:var(--fg2); border:1px solid var(--line); border-radius:999px; padding:0 6px; margin-left:4px; white-space:nowrap; font-weight:400} #page-home .hd-auto{color:var(--accent)} #page-home .hd-man{color:var(--fg)} #page-home .hd-mix{color:var(--h-warn)} #page-home #hdBox{container-type:inline-size} #page-home #hdBox .hm-tbl td.num{white-space:nowrap} /* "+99,378원" 이 숫자와 '원' 사이에서 꺾이지 않게(09-26 폰 375 실측) */ #page-home .hm-tbl .hd-x{display:none} #page-home .hm-tbl .hd-mini{display:block; font-size:11.5px; color:var(--fg2); line-height:1.35; white-space:normal; margin-top:1px} #page-home .hd-chips{display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; margin:0 0 6px; font-size:12px} #page-home .hd-chip{padding:2px 10px; font-size:12px; line-height:1.5; color:var(--fg2); background:var(--bg3); border:1px solid var(--line); border-radius:999px; cursor:pointer; font-family:inherit} #page-home .hd-chip.on{color:var(--accent); border-color:var(--accent)} @container (min-width:720px){ #page-home .hm-tbl .hd-x{display:table-cell} #page-home .hm-tbl .hd-mini, #page-home .hd-chips{display:none} } #page-trades .tj{max-width:1200px} #page-trades .tj-head{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px; margin:0 0 8px} #page-trades .tj-title{font-size:17px} #page-trades .tj-age{font-size:12px; color:var(--fg2); font-variant-numeric:tabular-nums} #page-trades .tj-err{background:rgba(255,82,82,.12); color:var(--hot); border:1px solid var(--hot); border-radius:8px; padding:7px 10px; margin:0 0 8px; font-size:13px; line-height:1.5} #page-trades .tj-hint{color:var(--warn); font-size:12px; line-height:1.5; margin:0 0 8px} #page-trades .tj-sum{font-size:16px; line-height:1.6; margin:0 0 8px; font-variant-numeric:tabular-nums} #page-trades .tj-sum b{white-space:nowrap} #page-trades .tj-bar{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 8px} #page-trades .tj-bar .chip{font-size:12px; padding:4px 12px} #page-trades .tj-tbl{overflow-x:auto; -webkit-overflow-scrolling:touch; container-type:inline-size} #page-trades .tj-tbl .tbl{font-size:12.5px} #page-trades .tj-tbl .tbl tbody tr{cursor:default} #page-trades .tj-tbl .tbl th{white-space:nowrap} #page-trades .tj-tbl .tbl td{vertical-align:top} #page-trades .tj-tbl .tbl td.num{white-space:nowrap} #page-trades .up{color:var(--up)} #page-trades .dn{color:var(--dn)} #page-trades .tj-na{cursor:help} #page-trades .tj-kn{display:block; font-size:11px; color:var(--fg3)} #page-trades .tj-mini{display:none; font-size:11.5px; line-height:1.35; margin-top:2px; white-space:nowrap} #page-trades .tj-method{font-size:11.5px; line-height:1.6; margin-top:8px} #page-trades .tj-foot{font-size:11.5px; line-height:1.6} @container (max-width:699px){ #page-trades .tj-mini{display:block} } @media (max-width:480px){ #page-trades .tj{padding:10px} #page-trades .panel{padding:10px 8px} #page-trades .tj-tbl .tbl{font-size:12px} #page-trades .tj-tbl .tbl td, #page-trades .tj-tbl .tbl th{padding:5px} #page-trades .tj-sum{font-size:15px} } /* ======== DUAL1 (2026-09-27) 첫 화면 후보 두 목록 [기존 | 100억 이상] ======== 진석: "…기존 것처럼 로직을 하는 거 하나 하고 그거 플러스 거래대금 반영한 거 하나 하고 두 개로 해." → 13:2x "자동매수는 기존." · 표 위 단추 줄(좁으면 줄바꿈 — 표 폭과 무관) · 켜진 쪽 = 파랑 · "자동 매수가 씀" 딱지 = 색인 bot [내 발명: 모양·자리] · 줄마다 "뽑을 때 N억"(100억 미만이면 노랑) · 두 목록에 다 있는 코인 = "양쪽" 딱지 */ #page-home .hm-var{display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; margin:0 0 6px} #page-home .hm-var-btn{display:inline-flex; align-items:center; gap:5px; padding:3px 11px; font-size:12.5px; line-height:1.5; color:var(--fg2); background:var(--bg3); border:1px solid var(--line); border-radius:999px; cursor:pointer; font-family:inherit} #page-home .hm-var-btn.on{color:var(--accent); border-color:var(--accent); font-weight:700} #page-home .hm-var-bot{font-size:10.5px; font-weight:400; color:var(--h-warn); border:1px solid var(--h-warn); border-radius:999px; padding:0 5px; white-space:nowrap} #page-home .hm-var-note{font-size:11.5px; color:var(--fg2); flex:1 1 100%; line-height:1.4} #page-home .hm-tbl .dl-both{display:inline-block; margin:2px 4px 1px 0; color:var(--accent); border-color:var(--accent)} #page-home .hm-tbl .dl-pick.warn{color:var(--h-warn)} @media (max-width:480px){ #page-home .hm-var-btn{padding:3px 9px} } /* ======== UI2A (2026-10-02) 화면 정리 — 진석 "쓸데없는 말·조잡한 것 싹 다 수정" ======== · 탭 줄: 첫 화면에서도 보인다(옛 상단 바만 숨김) · 「더 보기▾」 를 누르면 접어 둔 탭 4개(일지·실시간·조사실·자료 상태)가 같은 줄에 펼쳐진다 [내 발명] · 첫 화면 후보 표(폰): 링크는 작은 ↗ 한 줄 · 돈 숫자는 거래대금 하나 · 둘째 작은 줄(바늘·08:50 대비 등)은 폰에서 숨김(넓은 화면·마우스 올리기에는 그대로) · 자동 매수 탭: 위 칸(상태·안전 정지·예약 취소·손익·산 것 판 것) + 맨 아래 접힌 「개발용」 새 색·새 글꼴 없음(기존 변수만) */ body.home-mode .tabs{display:flex} .tab-more-btn{background:transparent; border:0; border-bottom:2px solid transparent; color:var(--fg3); padding:10px 16px; font-size:14px; cursor:pointer; font-family:inherit} .tab-more-btn:hover{color:var(--fg)} .tab-more-btn.on{color:var(--fg); font-weight:700} .tab-menu{display:contents} .tab-menu[hidden]{display:none} .tab-menu .tab{color:var(--fg3)} .tab-menu .tab.on{color:var(--fg)} .tab-home, .tab-sc{color:var(--fg2); font-weight:400} .tab.tab-home.on, .tab.tab-sc.on{color:var(--fg); font-weight:700} @media (max-width:560px){ .tab-more-btn{padding:9px 10px; font-size:13px} } /* 굵은 글씨 별표(**…**) 를 화면에서 굵게 바꾼 자리 */ b.md-b{font-weight:700} /* 첫 화면 — 판 손익 칸 작은 글씨 */ #page-home .hm-s .hm-src{color:var(--fg3)} #page-home .hm-tile .hm-big.hm-wait{color:var(--fg3)} /* 후보 표 펼친 줄 맨 위 한 줄(거래대금·매매 가능 금액을 다 적는 곳) */ #page-home .hm-expinfo{font-size:12.5px; color:var(--fg2); line-height:1.5; margin:0 0 6px; padding-right:36px} #page-home .hm-expinfo b{color:var(--fg)} /* 폰(≤480px): 후보 표의 둘째 작은 줄은 숨긴다(펼친 줄·넓은 화면에는 그대로) */ @media (max-width:480px){ #page-home .hm-tbl .hm-sub2{display:none} #page-home .hm-tbl .hm-cap-mini{display:none} /* 「100억↑」 딱지는 폰에서 숨김 — 같은 뜻이 바로 아래 '대금' 숫자와 표 위 「100억↑ n/10」, 펼친 줄에 있다 */ #page-home #hmA .hm-tbl .dl-both, #page-home #hmB .hm-tbl .dl-both{display:none} /* 작은 ↗ 두 개를 조금 더 작게 — 이름 옆 한 줄에 들어가게 */ #page-home .hm-tbl .ub-btn.ub-sm{padding:0 3px; font-size:10px; line-height:14px} #page-home .hm-tbl .ub-pair.ub-pair-sm{gap:2px 3px} } #page-home .hm-tbl .dl-both{font-size:10.5px} #page-home .hm-var .hm-var-note{flex:0 1 auto} /* 넓은 화면이라도 후보 표 칸이 좁으면(나란한 두 카드) 폰과 같이 — 단추는 화살표만, 「100억↑」 딱지는 표 위 숫자·펼친 줄로 */ @container (max-width:599px){ #page-home .hm-tbl .ub-btn.ub-sm .ub-lab{display:none} #page-home .hm-tbl .dl-both{display:none} } #page-home .hm-tbl td.hm-nowrap{white-space:nowrap} /* 바로가기 단추 화살표(그림) — 글자 ↗ 와 같은 자리·크기 */ .ub-btn svg.ub-ar{display:inline-block; width:8px; height:8px; vertical-align:0} /* 폰 폭(≤560px)에서 쪽 전체가 옆으로 밀리지 않게 — 실시간 탭 「호가창 흔적 시간표」의 칸(최소 1px + 간격 1px)이 폭을 넘던 것. 좁은 화면에서만 칸 사이 간격을 없애고 칸을 더 좁힐 수 있게 한다(칸 수·색은 그대로) */ @media (max-width:560px){ .tl{gap:0} .tl span{min-width:0; border-radius:0} /* 실시간 탭 두 칸 줄(.row2)·일지·조사실 — 한 칸 그리드가 안의 넓은 표만큼 늘어나 쪽이 밀리던 것: 칸은 화면 폭, 넓은 것은 칸 안에서만 옆으로 */ .row2, .split{grid-template-columns:minmax(0,1fr)} .row2 > .panel{overflow-x:auto; -webkit-overflow-scrolling:touch} .toolbar-wide{flex-wrap:wrap} } /* 옛 화면 표(매매 기록·자동 매수 위 칸)의 작은 단추 두 개 — 이름 옆 한 줄, 폰에서는 글자를 숨기고 화살표만 */ .tbl .ub-pair.ub-pair-sm{display:inline-flex; flex-wrap:nowrap; gap:3px; margin:0; vertical-align:1px} .tbl .ub-pair.ub-pair-sm > .ub-btn{margin:0} @media (max-width:480px){ .tbl .ub-btn.ub-sm .ub-lab{display:none} .tbl .ub-btn.ub-sm{padding:0 4px} #page-trades .tj-kn{display:none} } /* 자동 매수 탭 — 위 칸 */ #page-fire .fw-top .fwauto{margin-bottom:2px} #page-fire .fw-top-state{font-size:15px; font-weight:700; color:var(--fg)} #page-fire .fw-top-state.okv{color:var(--ok)} #page-fire .fw-top-state.warnv{color:var(--warn)} #page-fire .fw-top-state.badv{color:var(--hot)} #page-fire .fw-topmsg{margin-top:6px; white-space:pre-wrap; word-break:break-word; color:var(--warn)} #page-fire .fw-topmsg:empty{display:none} #page-fire .fw-dev > summary{font-weight:700; color:var(--fg2)} #page-fire .fw-dev .foldinner > .panel{margin-top:10px} #page-fire .fw-pnl3 .bigrow{flex-wrap:wrap} /* ======== UI3A (2026-10-02) 사람 눈 점검 6-2 — 진석 "싹 다 수정해" · 10-01 "직관적으로 · 이쁘게" (폰 375px) ======== 점검 목록 = reports/2026-10-02.md 6-2 · 진행 기록 docs/build/UI3A_PROGRESS.md · 새 글꼴 없음 · 색은 기존 변수 위주 */ /* 6-2-8 첫 화면 밖 탭 맨 위 = 한 줄 「● 정상 · 09:00까지 14시간 49분」(이상이 있을 때만 빨강 — app.js tbLinePaint). 옛 칸(시계·녹화·엔진 갱신·오늘 신호·오늘 급등·전 주기 적재·서버 연결됨)은 지우지 않고 숨김 — id 그대로 */ .topbar{flex-wrap:nowrap; gap:8px; padding:7px 12px} .topbar > .tb-clock, .topbar > .tb-item, .topbar #tbConn{display:none} .topbar .tb-right{margin-left:auto; flex:0 0 auto} .tb-line{flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:7px; font-size:13.5px; line-height:1.4; color:var(--fg2)} .tb-line .tb-dot{flex:0 0 auto; color:var(--ok); font-size:11px} .tb-line .tb-txt{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .tb-line.yel .tb-dot, .tb-line.yel .tb-txt{color:var(--warn)} .tb-line.red .tb-dot, .tb-line.red .tb-txt{color:var(--hot); font-weight:700} .topbar.tb-red{background:rgba(255,82,82,.12); border-bottom-color:var(--hot)} /* 6-2-10 탭 줄 = 한 줄 · 옆으로 밀어 보기(손가락) · 옆에 더 있으면 그쪽 끝을 흐리게(app.js tabsEdge — more-l/more-r) */ .tabs{flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none; overscroll-behavior-x:contain} .tabs::-webkit-scrollbar{display:none} .tabs .tab, .tabs .tab-more-btn{flex:0 0 auto; white-space:nowrap} .tabs.more-r{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent); mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent)} .tabs.more-l{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 32px),transparent); mask-image:linear-gradient(to left,#000 calc(100% - 32px),transparent)} .tabs.more-l.more-r{-webkit-mask-image:linear-gradient(to right,transparent,#000 32px,#000 calc(100% - 32px),transparent); mask-image:linear-gradient(to right,transparent,#000 32px,#000 calc(100% - 32px),transparent)} /* 6-2-3 자동 매수 탭 큰 글씨 — 꺼짐이 정상인 때(오늘 판 끝·판 진행 중·무장 전)는 고장처럼 안 보이게 차분한 파랑 + 둘째 줄 다음 판 */ #page-fire .fwstate-done{background:rgba(74,156,240,.16); color:var(--fg); box-shadow:inset 0 0 0 1px var(--accent)} #page-fire .fw-top-state .fw-next{display:block; font-size:12px; font-weight:400; color:var(--fg2); margin-top:2px} /* 6-2-9 거래 종료 공지 종목 — 이름 아래 작은 딱지 「⛔ 10-19 15:00 종료」 · 지난 것 「⛔ 종료됨」(회색) */ .ne-tag{display:block; width:-moz-fit-content; width:fit-content; margin-top:2px; font-size:10.5px; line-height:1.5; font-weight:700; color:var(--hot); border:1px solid var(--hot); border-radius:999px; padding:0 6px; white-space:nowrap; cursor:help} .ne-tag.ne-gone{color:var(--fg3); border-color:var(--line); font-weight:400} /* 6-2-5 오늘 탭 — 「보는 것」 줄(#pdViewBar)의 hidden 이 .viewbar{display:flex} 에 져서 누를 데 없는 단추가 늘 보이던 것 */ .viewbar[hidden]{display:none} /* 6-2-5·6 오늘 탭 위 카드 — 작은 글(대상 거래일·급등 수 뜻)이 '…' 로 잘리지 않게 줄을 바꾼다(넓은 화면 4칸에서도 잘렸다) · 폰(2칸)에서는 남은 시간 큰 글씨도 */ #page-today .todaybar .tcard .s{white-space:normal; word-break:keep-all; overflow-wrap:anywhere} @media (max-width:560px){ #page-today .todaybar .tcard .v{white-space:normal; word-break:keep-all} } /* ======== UXF-A (2026-10-02) 화면 쉬운 말·숫자 바로잡기 — reports/ux_audit_2026-10-02.md (첫 화면·탭) ======== 진석 "UI/UX 사용자 입장에서 쓸데없는 말들 복잡한 말들 있나 없나 싹 검수해" · 진행 기록 docs/build/UXFA_PROGRESS.md · 새 글꼴 없음 · 색은 기존 변수만 · 칸을 지우지 않고 폰(≤560px)에서만 숨기는 것이 대부분(넓은 화면은 그대로) */ /* 폰에서 숨기는 칸 — D-01 오늘 탭(순위·종목·결과·하루 최고만) · S-04 지금 볼 코인 · T-02 매매 기록 · H-20 오늘 판 · R-01 보고서 */ @media (max-width:560px){ #page-today .tbl .pd-x{display:none} #page-screener .tbl .sc-x{display:none} #page-trades .tbl .tj-x{display:none} #page-home .hm-tbl .hm-rx{display:none} #page-docs .tbl .rp-x, #page-docs .tbl .rpname{display:none} } /* T-03 매매 기록 「자동/직접」 칸 — 위 거르기 단추와 같아 늘 숨김(자동이 아닌 줄은 종목 옆 딱지) */ #page-trades .tbl .tj-src{display:none} .tj-tag{display:inline-block; margin-left:5px; padding:0 6px; border:1px solid var(--line); border-radius:999px; font-size:10.5px; line-height:15px; color:var(--fg2); font-weight:400; white-space:nowrap; vertical-align:1px; cursor:help} .tj-tag.tj-tag-led{border-color:var(--warn); color:var(--warn)} /* H-03 매매 기록 합계 아래 두 줄(자동 매수 합 = 첫 화면 누적인지 · 원장으로 센 줄 설명) */ #page-trades .tj-sum2-box:empty{display:none} #page-trades .tj-sum2{font-size:12.5px; line-height:1.6; margin-top:3px; color:var(--fg2)} #page-trades .tj-sum2 b{color:var(--fg)} #page-trades .tj-sum2 b.up{color:var(--up)} #page-trades .tj-sum2 b.dn{color:var(--dn)} /* 업비트·트뷰 단추를 종목 이름 옆 한 줄로(오늘 탭 ①② 표 · 폰 지금 볼 코인 표) — 예전엔 이름 아래 세로로 쌓여 한 종목이 3줄(D-01·S-04) */ #pdA_cands .tbl .ub-cq, #pdB_cands .tbl .ub-cq{display:inline-flex; flex-wrap:nowrap; gap:3px; margin:0 0 0 4px; vertical-align:1px; container-type:normal} #pdA_cands .tbl .ub-cq .ub-btn, #pdB_cands .tbl .ub-cq .ub-btn{display:inline-block; width:auto; margin:0; padding:0 4px} #pdA_cands .tbl .ub-cq .ub-lab, #pdB_cands .tbl .ub-cq .ub-lab{display:none} @media (max-width:560px){ #page-screener .tbl .ub-cq{display:inline-flex; flex-wrap:nowrap; gap:3px; margin:0 0 0 4px; vertical-align:1px; container-type:normal} #page-screener .tbl .ub-cq .ub-btn{display:inline-block; width:auto; margin:0; padding:0 4px} #page-screener .tbl .ub-cq .ub-lab{display:none} } /* D-01 줄을 누르면 그림 위에 숨긴 칸 숫자 한 줄 */ .pd-chartinfo{font-size:12px; line-height:1.6; margin:0 0 6px} .pd-chartinfo:empty{display:none} /* S-06 지금 볼 코인 — ●◐○ 풀이를 표 위 한 줄로 */ #page-screener .sc-legend{font-size:12px; margin:0 0 8px} /* H-06 첫 화면 위쪽 줄이기 — 시장 한눈에 「자세히」 접기 · 아침 흐름 한 줄(H-12) */ #page-home .hm-mkmore{margin-top:6px} #page-home .hm-mkmore > summary{cursor:pointer; font-size:12.5px; list-style:none} #page-home .hm-mkmore > summary::-webkit-details-marker{display:none} #page-home .hm-mkmore > summary::before{content:'▸ '} #page-home .hm-mkmore[open] > summary::before{content:'▾ '} #page-home .hm-mkmore .hm-mkline{margin-top:4px} #page-home .hm-steps.hm-steps-fold{display:none} #page-home .hm-flowsum{font-size:13.5px; line-height:1.7} #page-home .hm-flowsum b.ok{color:var(--ok)} #page-home .hm-flowsum .hm-btn2{margin-left:6px; vertical-align:1px} /* G-07 맨 위 한 줄 — 폰에서 글이 「…」 로 잘려 무엇이 멈췄는지 안 보이던 것 → 줄을 바꿔 다 보인다 */ @media (max-width:560px){ .tb-line .tb-txt{white-space:normal; overflow:visible; text-overflow:clip} } /* F-09 자동 매수 「오늘 판 끝」 — 테두리 상자가 단추처럼 보여 눌러 보게 됨 → 테두리 없이 초록 점 + 글자 */ #page-fire .fwstate.fwstate-done{background:none; box-shadow:none; padding:0; font-size:18px} #page-fire .fwstate.fwstate-done::before{content:'● '; color:var(--ok); font-size:13px; vertical-align:2px} /* H-24 탭 줄 — 폰 375px 에서 7개가 한 줄에 다 보이게(간격만 줄임 · 이름은 index.html) */ @media (max-width:560px){ .tabs .tab, .tabs .tab-more-btn{padding:9px 6px; font-size:12.5px} } /* R-05 보고서 원문 — 마크다운을 그림으로(제목·표·굵게·목록) · 원문 그대로 보기(md-raw)는 예전처럼 고정폭 */ .md-view{white-space:normal; font-family:inherit; font-size:13px; line-height:1.65; color:var(--fg)} .md-view.md-raw{white-space:pre-wrap; word-break:break-word; font-family:Consolas,"Malgun Gothic",monospace; font-size:12px; color:var(--fg2)} #page-docs .rpbody.md-view{white-space:normal} #page-docs .rpbody.md-view.md-raw{white-space:pre-wrap} .md-doc p{margin:0 0 8px} .md-doc .md-h{font-weight:700; color:var(--fg); margin:14px 0 6px; line-height:1.4} .md-doc .md-h:first-child{margin-top:2px} .md-doc .md-h1{font-size:17px} .md-doc .md-h2{font-size:15.5px} .md-doc .md-h3{font-size:14px} .md-doc .md-h4, .md-doc .md-h5, .md-doc .md-h6{font-size:13.5px} .md-doc .md-list{margin:0 0 8px; padding-left:20px} .md-doc .md-list li{margin:2px 0} .md-doc .md-list li.md-sub{margin-left:16px; list-style:circle} .md-doc .md-quote{border-left:3px solid var(--line); padding:2px 0 2px 10px; color:var(--fg2); margin:0 0 8px} .md-doc code{font-family:Consolas,monospace; font-size:12px; background:var(--bg3); border-radius:4px; padding:0 4px} .md-doc pre.md-code{white-space:pre-wrap; word-break:break-word; font-family:Consolas,monospace; font-size:12px; background:var(--bg3); border-radius:6px; padding:8px; margin:0 0 8px} .md-doc hr{border:0; border-top:1px solid var(--line); margin:12px 0} .md-doc s{color:var(--fg3)} .md-doc .md-tblbox{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 0 10px} .md-doc .md-tbl{border-collapse:collapse; font-size:12.5px; min-width:100%} .md-doc .md-tbl th, .md-doc .md-tbl td{border:1px solid var(--line); padding:4px 7px; text-align:left; vertical-align:top; white-space:normal; word-break:keep-all; overflow-wrap:anywhere} .md-doc .md-tbl th{background:var(--bg3); font-weight:700} .md-doc .md-link{text-decoration:underline dotted; cursor:help} #page-home .hm-docbody.md-view{white-space:normal; font-family:inherit; font-size:13px; color:var(--fg)} #page-home .hm-docbody.md-view.md-raw{white-space:pre-wrap; font-family:Consolas,"Malgun Gothic",monospace; font-size:12px; color:var(--fg2)} /* H-06 보유 코인 — 폰에서 이름 아래 작은 줄은 「진입 · 지금」만(평가·수량·자동/직접은 넓은 화면 · 손가락을 대면 전체) */ @media (max-width:560px){ #page-home .hd-mini .hd-m2, #page-home .hd-mini .hd-m3, #page-home .hd-mini .hd-m4{display:none} } /* D-15 첫 화면 후보 칸 → 오늘 탭 「자세히 →」 */ #page-home .hm-more-today{font-size:12px; font-weight:400; margin-left:6px; color:var(--accent); text-decoration:none; white-space:nowrap} /* 코디네이터 추가 — 가입 기능을 켰을 때 관리자 아닌 가입자(app.js uxViewerLoad → body.ux-limited): 관리자 전용 칸·탭·돈 단추 숨김 */ body.ux-limited #hdCard, body.ux-limited #hmTopCard, body.ux-limited #hmFlowCard, body.ux-limited #page-home .hm-admin-card, body.ux-limited .tabs .tab[data-tab="trades"], body.ux-limited .tabs .tab[data-tab="fire"], body.ux-limited .tabs .tab[data-tab="journal"], body.ux-limited #hmTj, body.ux-limited #hmSchedX, body.ux-limited #hmStop{display:none} /* ======== UXF-A3 (2026-10-03) 화면 쉬운 말 2차 — reports/ux_audit2_2026-10-03.md 중 이 파일 몫 · 진행 기록 docs/build/UXFA3_PROGRESS.md ======== 새 글꼴·새 색 없음(기존 변수만) */ /* H-06 폰 첫 화면 접기(코디네이터 02:2x) — 요약 줄·접기 단추는 폰(≤560px)에서만. 넓은 화면은 예전 그대로 다 펼침 */ .ux-foldsum, .ux-foldx, .ux-foldxrow{display:none} @media (max-width:560px){ #page-home .ux-foldsum{width:100%; margin:8px 0 0; padding:7px 10px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--fg); font:inherit; font-size:13px; line-height:1.45; text-align:left; cursor:pointer; align-items:center; gap:8px; justify-content:space-between} #page-home .ux-foldsum .ux-fs-t{flex:1 1 auto; min-width:0} #page-home .ux-foldsum .ux-fs-t.ux-fs-bad{color:var(--h-dn)} #page-home .ux-foldsum .ux-fs-a{flex:0 0 auto; color:var(--fg2); font-size:12px; white-space:nowrap} #page-home .ux-foldsum .ux-fs-p{white-space:nowrap} #hdCard.ux-folded .ux-foldsum, #hmTopCard.ux-folded .ux-foldsum{display:flex} #hdCard.ux-folded #hdLine, #hdCard.ux-folded #hdNote, #hdCard.ux-folded #hdBox, #hdCard.ux-folded .hm-more{display:none} #hmTopCard.ux-folded .hm-tiles{display:none} #hdCard:not(.ux-folded) .ux-foldx, #hmTopCard:not(.ux-folded) .ux-foldx{display:inline-block} #hmTopCard:not(.ux-folded) .ux-foldxrow{display:block; text-align:right; margin-top:6px} } /* R2-01 보고서 표 — 폰에서 칸이 좁아 「+2./04/%」「평/균」처럼 낱말·숫자가 글자 단위로 꺾이던 것: 낱말 안에서는 안 꺾는다 (칸이 모자라면 표 상자 .md-tblbox 안에서 옆으로 밀어 본다 — 화면 전체 가로 넘침은 없음) */ .md-doc .md-tbl th, .md-doc .md-tbl td{overflow-wrap:normal; word-break:keep-all} /* R2-02 열린 보고서 — 폰에서 높이 62vh 안쪽 스크롤 상자(바깥 화면 스크롤과 겹침) → 정리해 보이는 글은 높이 제한 없이 화면 스크롤 하나로 */ @media (max-width:560px){ #page-docs .rpbody.md-view:not(.md-raw){max-height:none; overflow-y:visible} } /* F2-04 자동 매수 탭 빈 표 머리글 「수익/률」「매도 이/유」 — 낱말 안에서 안 꺾기 */ #page-fire #acctOrders th{word-break:keep-all} /* D-01 오늘 탭 09:00 뒤 표(폰 4칸 390px / 상자 322px) — 결과 칸 작은 줄(고점 시각·잠정)은 줄을 바꿔 칸 폭을 줄이고, 종목 한글 이름은 폰에서 숨김(줄을 누르면 그림 제목에 나옴) */ @media (max-width:560px){ #page-today #pdA_cands .statewhen, #page-today #pdB_cands .statewhen{white-space:normal} #page-today .tbl .pd-kn{display:none} } /* H-11·H-27 첫 화면 후보 표 위 한 줄 풀이 — 「한 번에 최대」 풀이는 그 칸이 숨는 폰(≤480px)에서는 같이 숨김 */ #page-home .hm-sortnote .ux-legend{font-size:11.5px; color:var(--fg2); line-height:1.45} @media (max-width:480px){ #page-home .hm-sortnote .ux-caplegend{display:none} } /* F-02 자동 매수 탭 산 것·판 것 표 — 폰에서는 종목·손익·수익률·매도 이유 4칸(산 값·판 값·매도 시각은 넓은 화면) */ @media (max-width:560px){ #page-fire .tbl .fw-x{display:none} } /* F-05 자동 매수 탭 「고급」 — 폰에서는 열어도 단추와 한 줄 설명만(자동 모드 스위치 칸). 긴 개발 글·내 계좌 표·호가 지표표·사건 기록은 넓은 화면에서만 */ .ux-fwphone{display:none} @media (max-width:560px){ #page-fire .fw-dev .foldinner > :not(:first-child){display:none} #page-fire .fw-dev #fwNoOrder, #page-fire .fw-dev #fwProcSub, #page-fire .fw-dev #fwProcPre, #page-fire .fw-dev #fwRunOut, #page-fire .fw-dev #fwAutoNote, #page-fire .fw-dev .foldbox{display:none} #page-fire .fw-dev .ux-fwphone{display:block; margin:6px 0} } /* ======== UXD1 (2026-10-03) 첫 화면 다시 디자인 + 공통 모양(카드·단추·탭 줄·표 머리) ======== 진석(03:5x) "아직 조잡하다 더 다듬어라 사용자 입장에서 필요한 것들만 2d 3d 활용해서 디자인하고 배치해라" 목업 docs/design/UXD1_MOCKUP_2026-10-03.html · 진행 기록 docs/build/UXD1_PROGRESS.md 3D = 여러 겹 그림자 + 빛 받는 윗면 그라데이션 + 얇은 테두리 · 구슬(radial-gradient) · 눌리는 단추 — CSS·SVG 만(그림 라이브러리·바깥 주소 없음) 계속 도는 움직임 없음(누를 때 0.08초 눌림만 · 움직임 줄이기 설정이면 그것도 끔). 새 글꼴 없음. 다른 탭은 모양만 바꾼다(구조·글·칸 그대로). 밝은 화면(body[data-theme="light"])은 아래 깊이 값만 따로 */ :root{ --uxd-c1:#1b2331; --uxd-c2:#151b24; /* 카드 윗면(빛 받는 쪽) → 아랫면 */ --uxd-edge:rgba(255,255,255,.075); /* 얇은 테두리 */ --uxd-hi:rgba(255,255,255,.06); /* 윗변 빛 줄 */ --uxd-sh:0 1px 0 var(--uxd-hi) inset, 0 16px 28px -18px rgba(0,0,0,.95), 0 3px 8px -3px rgba(0,0,0,.55); --uxd-sh-s:0 1px 0 var(--uxd-hi) inset, 0 6px 14px -10px rgba(0,0,0,.9); --uxd-well:#0b0f15; --uxd-well-sh:inset 0 1px 3px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.03); /* 파인 자리(막대·고리 바닥·전환 줄) */ --uxd-b1:#242d3c; --uxd-b2:#19202b; /* 단추 윗면 → 아랫면 */ --uxd-bsh:0 6px 12px -8px rgba(0,0,0,.95), 0 1px 0 rgba(255,255,255,.07) inset; --uxd-bsh-on:inset 0 2px 5px rgba(0,0,0,.6); /* 눌렸을 때 */ --uxd-r1:#2d1a22; --uxd-r2:#1f1419; /* 안전 정지 단추 */ --uxd-sph1:#3a4660; --uxd-sph2:#141b28; --uxd-sph-e:#34405a; /* 아직 안 된 단계 구슬 */ --uxd-star1:#231d3d; --uxd-star2:#161729; --uxd-star-e:rgba(169,123,255,.38); /* ★ 칸 */ --uxd-drop:rgba(0,0,0,.5); } body[data-theme="light"]{ --uxd-c1:#ffffff; --uxd-c2:#f5f7fa; --uxd-edge:rgba(16,24,40,.10); --uxd-hi:rgba(255,255,255,.95); --uxd-sh:0 1px 0 var(--uxd-hi) inset, 0 14px 26px -18px rgba(16,24,40,.45), 0 2px 6px -2px rgba(16,24,40,.14); --uxd-sh-s:0 1px 0 var(--uxd-hi) inset, 0 6px 12px -9px rgba(16,24,40,.35); --uxd-well:#e5e9ef; --uxd-well-sh:inset 0 1px 3px rgba(16,24,40,.22); --uxd-b1:#ffffff; --uxd-b2:#edf1f6; --uxd-bsh:0 4px 10px -7px rgba(16,24,40,.45), 0 1px 0 #fff inset; --uxd-bsh-on:inset 0 2px 4px rgba(16,24,40,.25); --uxd-r1:#ffffff; --uxd-r2:#fcecec; --uxd-sph1:#ffffff; --uxd-sph2:#c6cfdb; --uxd-sph-e:#b5c0ce; --uxd-star1:#ffffff; --uxd-star2:#f4f0ff; --uxd-star-e:rgba(122,69,216,.30); --uxd-drop:rgba(16,24,40,.22); } /* ---- 공통: 카드 ---- */ .panel, .tcard{ background:linear-gradient(165deg, var(--uxd-c1), var(--uxd-c2) 62%); border:1px solid var(--uxd-edge); box-shadow:var(--uxd-sh); } .panel{border-radius:14px} .tcard{border-radius:12px; box-shadow:var(--uxd-sh-s)} .panel.panel-main{border-color:var(--accent)} .tcard.tcard-big{border-color:var(--warn)} .panel .panel{background:var(--uxd-c2); box-shadow:0 1px 0 var(--uxd-hi) inset; border-radius:12px} /* 카드 안 카드는 납작하게 */ /* ---- 공통: 단추(눌리는 느낌) ---- */ .btn, .chip{ background:linear-gradient(180deg, var(--uxd-b1), var(--uxd-b2)); border-color:var(--uxd-edge); box-shadow:var(--uxd-bsh); transition:transform .08s ease, box-shadow .08s ease; } .btn{border-radius:9px} .btn:active:not(:disabled), .chip:active{transform:translateY(1px); box-shadow:var(--uxd-bsh-on)} .chip.on{box-shadow:0 4px 10px -6px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.2)} /* ---- 공통: 탭 줄(알약 모양 · 고른 탭은 떠 있게) — index.html 머리