/* ===================================================== hellmode-theme.css โ€” ๐Ÿ”ฅ ํ—ฌ๋ชจ๋“œ ๋Œ€ํšŒ ์ „์šฉ ํ…Œ๋งˆ (v2.46.1) style.css(01~10 ์ฒด์ธ) ๋กœ๋“œ "์œ„์—" ์˜ค๋ฒ„๋ผ์ด๋“œ๋งŒ ์–น๋Š”๋‹ค. ์šด์˜์ž ๊ฒฐ์ •: ํ—ฌ๋ชจ๋“œ ๋””ํดํŠธ ๋ฐฐ๊ฒฝ ์Šคํ‚จ = ๋ฉ”์ธ ์‚ฌ์ดํŠธ ํ•˜์‚ฌ(NCO) ํ…Œ๋งˆ ๊ทธ๋Œ€๋กœ ์ ์šฉ. hellmode.html ๋กœ css/01-base.css ์˜ --map-* ๋ณ€์ˆ˜(๋ถ€์‚ฌ๊ด€ ์„ฑ ํŒ”๋ ˆํŠธ)๋ฅผ ์ƒ์‹œ ํ™œ์„ฑํ™”ํ•˜๊ณ , ์•„๋ž˜ --hell-* ๋Š” ์ „๋ถ€ ๊ทธ ๋ณ€์ˆ˜๋ฅผ ์ฐธ์กฐ โ€” ๋งˆ์ผ์Šคํ†ค/ํ† ๊ธ€ ์—†์Œ(ํ•ญ์ƒ ์ด ์Šคํ‚จ). ===================================================== */ :root { --hell-accent: var(--map-ring, #ff4d6d); --hell-accent-soft: rgba(255, 77, 109, 0.16); --hell-ember: var(--map-accent, #f85d7a); --hell-gold: #ffb02e; --hell-dead: #7a7f8c; } /* โ”€โ”€ ํŽ˜์ด์ง€ ๊ณจ๊ฒฉ: index ์™€ ๋™์ผ flex column (nav ์—†์ด ํ—ค๋”โ†’trading-area) โ”€โ”€ */ body.hellmode { height: 100vh; overflow: hidden; background: radial-gradient(1200px 300px at 50% -80px, rgba(255, 77, 109, 0.14), transparent 70%), var(--map-bg, #2e0e1a); } body.hellmode .trading-area { flex: 1; min-height: 0; } /* โ”€โ”€ ์ƒ๋‹จ ํ—ค๋” โ”€โ”€ */ .hell-header { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; padding: 8px 14px; border-bottom: 1px solid var(--hell-accent-soft); background: linear-gradient(180deg, rgba(255, 77, 109, 0.10), rgba(255, 77, 109, 0.02)); } .hell-title { font-size: 17px; font-weight: 800; letter-spacing: 0.04em; color: #fff; text-shadow: 0 0 8px rgba(255, 77, 109, 0.85), 0 0 22px rgba(255, 93, 143, 0.45); animation: hellGlow 2.2s ease-in-out infinite alternate; white-space: nowrap; } @keyframes hellGlow { from { text-shadow: 0 0 6px rgba(255, 77, 109, 0.7), 0 0 16px rgba(255, 93, 143, 0.3); } to { text-shadow: 0 0 12px rgba(255, 77, 109, 1), 0 0 30px rgba(255, 93, 143, 0.6); } } .hell-countdown { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 14px; color: var(--hell-ember); background: var(--hell-accent-soft); border: 1px solid rgba(255, 77, 109, 0.35); border-radius: 6px; padding: 3px 10px; white-space: nowrap; } .hell-mystat { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; font-size: 12px; overflow: hidden; white-space: nowrap; } .hell-mystat b { font-variant-numeric: tabular-nums; } .hell-back-link { flex: 0 0 auto; color: var(--text-muted, #8a8f9d); text-decoration: none; font-size: 12px; border: 1px solid var(--border, #2a2e39); border-radius: 6px; padding: 4px 10px; } .hell-back-link:hover { color: #fff; border-color: var(--hell-accent); } /* โ”€โ”€ ์šฐ์ธก ์‚ฌ์ด๋“œ (๋žญํ‚น ๋ณด๋“œ + ์น˜ํ‚จ ๋ฐฐ๋„ˆ) โ€” .trading-area ์˜ chat ๊ทธ๋ฆฌ๋“œ ์Šฌ๋กฏ ์žฌ์‚ฌ์šฉ โ”€โ”€ */ .hell-side { grid-area: chat; display: flex; flex-direction: column; min-height: 0; overflow: hidden; background: var(--bg-panel, #1c2030); border-left: 1px solid var(--border, #2a2e39); } .hell-chicken-banner { flex: 0 0 auto; margin: 10px; padding: 12px 12px; border-radius: 10px; background: linear-gradient(135deg, #3a1206 0%, #7a2410 45%, #b8451a 100%); border: 1px solid rgba(255, 154, 60, 0.5); box-shadow: inset 0 0 24px rgba(255, 77, 46, 0.25); text-align: center; } .hell-chicken-banner .hcb-emoji { font-size: 26px; display: block; margin-bottom: 4px; } .hell-chicken-banner .hcb-title { font-size: 14px; font-weight: 800; color: var(--hell-gold); } .hell-chicken-banner .hcb-sub { font-size: 11px; color: #f3d9c4; margin-top: 2px; } /* โ”€โ”€ ๋Œ€ํšŒ ๊ฐ€์ด๋“œ ์š”์•ฝ (์น˜ํ‚จ ๋ฐฐ๋„ˆ ์•„๋ž˜, ์ž…์žฅ ์˜ค๋ฒ„๋ ˆ์ด ๊ทœ์น™ ์š”์•ฝ๋ณธ) โ”€โ”€ */ .hell-guide { flex: 0 0 auto; margin: 0 10px 10px; padding: 10px 12px; border-radius: 8px; background: rgba(255, 77, 109, 0.06); border: 1px solid var(--hell-accent-soft); } .hell-guide .hg-title { font-size: 11px; font-weight: 800; color: var(--hell-ember); margin-bottom: 6px; } .hell-guide .hg-list { margin: 0; padding-left: 16px; list-style: disc; font-size: 11px; line-height: 1.55; color: #d8c7bd; } .hell-guide .hg-list b { color: #fff; } .hell-rank-head { flex: 0 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 4px 12px 6px; font-size: 12px; font-weight: 800; color: var(--hell-ember); border-bottom: 1px solid var(--border, #2a2e39); } .hell-rank-head .hrh-count { font-weight: 600; color: var(--text-muted, #8a8f9d); } .hell-rank-list { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 6px 10px; } .hell-rank-row { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 6px; font-size: 12px; line-height: 1.3; } .hell-rank-row .hr-rank { flex: 0 0 26px; font-weight: 800; color: var(--text-muted, #8a8f9d); font-variant-numeric: tabular-nums; } .hell-rank-row.top1 .hr-rank { color: var(--hell-gold); } .hell-rank-row .hr-nick { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hell-rank-row .hr-pnl { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-weight: 700; } .hell-rank-row.me { background: var(--hell-accent-soft); border: 1px solid rgba(255, 77, 109, 0.4); } .hell-rank-row.dead { opacity: 0.5; } .hell-rank-row.dead .hr-nick { text-decoration: line-through; } .hell-pnl-pos { color: var(--green, #0ecb81); } .hell-pnl-neg { color: var(--red, #f6465d); } /* โ”€โ”€ ๐Ÿ•ถ๏ธ ์•”์ „(ํŽ˜์ด์ฆˆ4) โ€” ์ข…๋ฐ˜ ์ˆœ์œ„ ์ฐจ๋‹จ ์•ˆ๋‚ด (v2.60.0 ์ •๋ณด๊ณต๊ฐœ ํŽ˜์ด์ฆˆ) โ”€โ”€ */ .hell-rank-blackout { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 28px 16px; text-align: center; font-size: 34px; color: var(--text-muted, #8a8f9d); } .hell-rank-blackout .hrb-msg { font-size: 13px; font-weight: 700; color: var(--hell-text, #e8eaed); } .hell-rank-blackout .hrb-alive { font-size: 13px; } .hell-rank-blackout .hrb-alive b { color: var(--hell-gold); font-variant-numeric: tabular-nums; } .hell-rank-blackout .hrb-sub { font-size: 11px; opacity: 0.75; } /* โ”€โ”€ ๋ ˆ๋ฒ„๋ฆฌ์ง€ ์Šฌ๋ผ์ด๋” (1~50) โ”€โ”€ */ .hell-lev-row { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; } .hell-lev-row .op-label { display: flex; justify-content: space-between; } .hell-lev-row #hell-lev-val { color: var(--hell-ember); font-weight: 800; } #hell-lev-range { width: 100%; accent-color: var(--hell-accent); cursor: pointer; } /* โ”€โ”€ ํƒˆ๋ฝ(๊ด€์ „) ๋ฐฐ๋„ˆ โ”€โ”€ */ .hell-dead-banner { position: fixed; top: 52px; left: 50%; transform: translateX(-50%); z-index: 400; background: rgba(20, 12, 12, 0.95); border: 1px solid var(--hell-accent); color: #ffd9d0; font-size: 13px; font-weight: 700; border-radius: 8px; padding: 8px 16px; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5); } .hell-dead-banner.hidden { display: none; } /* ์ฃผ๋ฌธ ํŒจ๋„ ๋น„ํ™œ์„ฑ (ํƒˆ๋ฝ/์ข…๋ฃŒ/๋ฏธ์ฐธ๊ฐ€) */ .order-panel.hell-disabled { position: relative; } .order-panel.hell-disabled::after { content: ''; position: absolute; inset: 0; background: rgba(10, 10, 14, 0.55); z-index: 10; cursor: not-allowed; } /* ๋งค์ˆ˜/๋งค๋„ ์ œ์ถœ ์ค‘ ์Šคํ”ผ๋„ˆ โ€” hellModeOrder ์ฝœ๋Ÿฌ๋ธ” ์™•๋ณต(์ˆ˜๋ฐฑms~1s) ๋™์•ˆ "๋ฉˆ์ถ˜ ๋Š๋‚Œ" ์™„ํ™” */ .trade-btn.hell-btn-loading { position: relative; opacity: 0.75; } .trade-btn.hell-btn-loading .btn-main, .trade-btn.hell-btn-loading .btn-sub { visibility: hidden; } .trade-btn.hell-btn-loading::after { content: ''; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: hell-btn-spin 0.6s linear infinite; } @media (prefers-reduced-motion: reduce) { .trade-btn.hell-btn-loading::after { animation: none; } } @keyframes hell-btn-spin { to { transform: rotate(360deg); } } /* โ”€โ”€ ํ’€์Šคํฌ๋ฆฐ ์˜ค๋ฒ„๋ ˆ์ด (๋ฏธ์ฐธ๊ฐ€/๋ฏธ๋กœ๊ทธ์ธ/์ข…๋ฃŒ/๋Œ€ํšŒ์—†์Œ) โ”€โ”€ */ .hell-overlay { position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center; background: rgba(8, 6, 10, 0.82); backdrop-filter: blur(3px); padding: 16px; } .hell-overlay.hidden { display: none; } /* v2.58.4 โ€” ์„ธ์…˜ ํ‚ฅ ์ž ๊ธˆ ์˜ค๋ฒ„๋ ˆ์ด๋Š” TP/SL ๋ชจ๋‹ฌ(.modal-overlay z100000) ์œ„์— ๋– ์•ผ ํ•จ (ํ•˜๋ถ€๋Š” JS ์—์„œ inert ์ฒ˜๋ฆฌ โ€” ์ด ๊ทœ์น™์€ z-index ์Šน๊ฒฉ๋งŒ ๋‹ด๋‹น) */ .hell-overlay.hell-kick-lock { z-index: 2147483000; } .hell-overlay-card { width: min(460px, 94vw); max-height: 86vh; overflow-y: auto; background: linear-gradient(180deg, #221016, #15141c 55%); border: 1px solid rgba(255, 77, 109, 0.45); border-radius: 14px; box-shadow: 0 0 40px rgba(255, 77, 109, 0.25); padding: 22px 20px; text-align: center; } .hell-overlay-card h2 { margin: 0 0 10px; font-size: 19px; color: #fff; text-shadow: 0 0 10px rgba(255, 77, 109, 0.8); } .hell-overlay-card .hoc-sub { font-size: 12px; color: var(--text-muted, #8a8f9d); margin-bottom: 14px; } .hell-rules { list-style: none; margin: 0 0 16px; padding: 0; text-align: left; font-size: 13px; line-height: 1.5; } .hell-rules li { padding: 6px 10px; border-bottom: 1px dashed rgba(255, 255, 255, 0.08); } .hell-rules li::before { content: '๐Ÿ”ฅ '; } .hell-join-btn { width: 100%; padding: 12px; font-size: 15px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #ff4d6d, #a3123f); border: none; border-radius: 10px; cursor: pointer; box-shadow: 0 0 16px rgba(255, 77, 109, 0.5); } .hell-join-btn:hover:not(:disabled) { filter: brightness(1.12); } .hell-join-btn:disabled { opacity: 0.55; cursor: wait; } .hell-overlay-link { display: inline-block; margin-top: 12px; color: var(--hell-ember); font-size: 12px; text-decoration: underline; } .hell-final-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 8px; } .hell-final-table th, .hell-final-table td { padding: 5px 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); text-align: left; } .hell-final-table th { color: var(--text-muted, #8a8f9d); font-weight: 600; } .hell-final-table td.num { text-align: right; font-variant-numeric: tabular-nums; } .hell-final-table tr.top1 td { color: var(--hell-gold); font-weight: 800; } /* โ”€โ”€ ํ† ์ŠคํŠธ โ”€โ”€ */ .hell-toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 600; background: rgba(18, 16, 22, 0.95); border: 1px solid var(--hell-accent); color: #fff; font-size: 13px; border-radius: 8px; padding: 9px 16px; max-width: 90vw; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5); transition: opacity 0.25s ease; } .hell-toast.hidden { display: none; } /* TP/SL ์ˆ˜์ • ๋ชจ๋‹ฌ ๋ถ„ํ•  ๋น„์œจ ์นฉ (์Šคํ‚ฌ ๊ฒŒ์ดํŠธ ์—†์Œ โ€” ์ƒ์‹œ ๋…ธ์ถœ) */ .hell-ratio-chips { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; } .hell-ratio-chip { font-size: 11px; padding: 3px 9px; border-radius: 5px; border: 1px solid var(--border, #2a2e39); background: var(--bg-input, #0e1118); color: var(--text-secondary, #9aa3b2); cursor: pointer; } .hell-ratio-chip.active { border-color: var(--hell-accent); color: #fff; background: var(--hell-accent-soft); } .hell-ratio-custom { width: 56px; font-size: 11px; padding: 3px 6px; border-radius: 5px; border: 1px solid var(--border, #2a2e39); background: var(--bg-input, #0e1118); color: var(--text-primary, #e4e7eb); } /* ํ•˜๋‹จ ํ…Œ์ด๋ธ” ์ž‘์—… ๋ฒ„ํŠผ */ .hell-act-btn { font-size: 11px; padding: 2px 8px; margin-right: 4px; border-radius: 4px; border: 1px solid var(--border, #2a2e39); background: var(--bg-input, #0e1118); color: var(--text-primary, #e4e7eb); cursor: pointer; } .hell-act-btn:hover { border-color: var(--hell-accent); color: var(--hell-ember); } .hell-ord-px { cursor: pointer; text-decoration: underline dotted; } .hell-ord-px:hover { color: var(--hell-ember); } /* โ”€โ”€ ๐Ÿ”ฎ AI ๊ฐ€๊ฒฉ ์˜ˆ์ธก ํŒจ๋„ (v2.52.0) โ€” ๋žญํ‚น ๋ฆฌ์ŠคํŠธ ์•„๋ž˜ ๊ณ ์ • ์Šฌ๋กฏ. ๋ฐ์Šคํฌํ†ฑ .hell-side ๋Š” ๊ณ ์ • ๋†’์ด flex column + .hell-rank-list{flex:1} ๋‚ด๋ถ€์Šคํฌ๋กค(v2.49.2 ์„ค๊ณ„) โ€” ์ด ํŒจ๋„์€ flex:0 0 auto ์ž์—ฐ ๋†’์ด๋งŒ ์ฐจ์ง€ (์ž์ฒด max-height ๊ธˆ์ง€, ๋‚ด๋ถ€์Šคํฌ๋กค ์นจ๋ฒ” ๊ธˆ์ง€). ๋ชจ๋ฐ”์ผ์€ ๊ธฐ์กด ๋ธ”๋ก์ด .hell-rank-list ๋งŒ flex:0 0 auto ๋กœ ํ’€๊ณ  ์ด ํŒจ๋„์€ ์›๋ž˜ ์ž์—ฐ ๋†’์ด๋ผ ์ถ”๊ฐ€ ๊ทœ์น™ ๋ถˆํ•„์š”. */ .hell-forecast { flex: 0 0 auto; border-top: 1px solid var(--border, #2a2e39); padding: 8px 12px 10px; } .hell-forecast .hf-head { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 800; color: var(--hell-ember); margin-bottom: 6px; } .hell-forecast .hf-tf { font-size: 10px; font-weight: 700; color: var(--text-muted, #8a8f9d); border: 1px solid var(--border, #2a2e39); border-radius: 4px; padding: 1px 6px; } .hell-forecast .hf-body { display: flex; flex-direction: column; gap: 6px; } .hell-forecast .hf-lead { font-size: 12px; font-weight: 700; line-height: 1.45; color: var(--text-primary, #eaecef); } .hell-forecast .hf-desc { font-size: 10.5px; line-height: 1.6; color: var(--text-secondary, #9aa3b2); } .hell-forecast .hf-msg { font-size: 11px; line-height: 1.5; color: var(--text-secondary, #9aa3b2); } .hell-forecast .hf-msg .hf-sub { font-size: 10px; color: var(--text-muted, #8a8f9d); } .hell-forecast .hf-msg.hf-error { color: var(--red, #f6465d); } .hell-forecast .hf-cta { width: 100%; padding: 7px 10px; font-size: 12px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #ff4d6d, #a3123f); border: none; border-radius: 8px; cursor: pointer; box-shadow: 0 0 10px rgba(255, 77, 109, 0.35); } .hell-forecast .hf-cta:hover:not(:disabled) { filter: brightness(1.12); } .hell-forecast .hf-cta:disabled { opacity: 0.55; cursor: wait; } .hell-forecast .hf-dir-row { display: flex; align-items: center; gap: 8px; font-size: 11px; } .hell-forecast .hf-dir { font-weight: 800; font-variant-numeric: tabular-nums; } .hell-forecast .hf-dir-up { color: var(--green, #0ecb81); } .hell-forecast .hf-dir-down { color: var(--red, #f6465d); } .hell-forecast .hf-dir-flat { color: var(--text-muted, #8a8f9d); } .hell-forecast .hf-stale-badge { font-size: 10px; font-weight: 700; color: var(--hell-dead); border: 1px solid var(--border, #2a2e39); border-radius: 4px; padding: 0 5px; } .hell-forecast .hf-count-wrap { margin-left: auto; font-size: 10px; color: var(--text-muted, #8a8f9d); white-space: nowrap; } .hell-forecast .hf-count-wrap b { color: var(--hell-ember); font-weight: 700; font-variant-numeric: tabular-nums; } .hell-forecast .hf-spark { display: block; width: 100%; height: 64px; } .hell-forecast .hf-spark .hf-band { fill: rgba(255, 154, 60, 0.14); stroke: none; } .hell-forecast .hf-spark .hf-mid { fill: none; stroke: var(--hell-ember); stroke-width: 1.5; } .hell-forecast .hf-spark .hf-mid.hf-dir-up { stroke: var(--green, #0ecb81); } .hell-forecast .hf-spark .hf-mid.hf-dir-down { stroke: var(--red, #f6465d); } .hell-forecast .hf-range { font-size: 11px; color: var(--text-secondary, #9aa3b2); font-variant-numeric: tabular-nums; } .hell-forecast .hf-notice { font-size: 10px; color: var(--hell-gold); } .hell-forecast .hf-note { margin-top: 6px; font-size: 9px; line-height: 1.4; color: var(--text-muted, #8a8f9d); opacity: 0.7; } /* โ”€โ”€ v2.53.0 โ€” ์˜ˆ์ธก/๊ฒฐ๊ณผ ์‹œ๊ฐ ๋ผ๋ฒจ + result ๋ทฐ(์ฑ„์  ๋ฑƒ์ง€ยท์‹ค์ธก ์˜ค๋ฒ„๋ ˆ์ดยท์ ์ค‘๋ฅ ). ํŒจ๋„ ์ž์ฒด max-height ๊ธˆ์ง€ ์œ ์ง€ โ€” .hell-rank-list{flex:1} ๋‚ด๋ถ€์Šคํฌ๋กค ๋ถˆ์นจ๋ฒ”(v2.49.2 ์„ค๊ณ„). */ .hell-forecast .hf-when { font-size: 10px; color: var(--text-muted, #8a8f9d); font-variant-numeric: tabular-nums; } .hell-forecast .hf-time-row { display: flex; justify-content: space-between; font-size: 9.5px; color: var(--text-muted, #8a8f9d); font-variant-numeric: tabular-nums; } /* ์‹ค์ธก์„  โ€” ์˜ˆ์ธก์„ (ember/green/red)ยท๋ฐด๋“œ ์Œ์˜๊ณผ ํ™•์‹คํžˆ ๊ตฌ๋ถ„๋˜๋Š” ๋ฐ์€ ํ†ค */ .hell-forecast .hf-spark .hf-actual { fill: none; stroke: var(--text-primary, #eaecef); stroke-width: 1.5; } .hell-forecast .hf-result-row { display: flex; gap: 6px; flex-wrap: wrap; } .hell-forecast .hf-result-badge { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 4px; border: 1px solid transparent; } .hell-forecast .hf-result-badge.hf-hit { color: var(--green, #0ecb81); border-color: rgba(14, 203, 129, 0.35); background: rgba(14, 203, 129, 0.10); } .hell-forecast .hf-result-badge.hf-miss { color: var(--red, #f6465d); border-color: rgba(246, 70, 93, 0.35); background: rgba(246, 70, 93, 0.10); } .hell-forecast .hf-stats-line { font-size: 10px; color: var(--text-muted, #8a8f9d); } /* ์‹ค์ธก ์žฌ์‹œ๋„ โ€” ํŒจ๋„ error ์ƒํƒœ(hf-cta ์žฌ์‹œ๋„)์™€ ๋ถ„๋ฆฌ๋œ ๋ณด์กฐ ๋ฒ„ํŠผ */ .hell-forecast .hf-retry { align-self: flex-start; font-size: 10px; padding: 3px 8px; border-radius: 4px; border: 1px solid var(--border, #2a2e39); background: var(--bg-input, #0e1118); color: var(--text-secondary, #9aa3b2); cursor: pointer; } .hell-forecast .hf-retry:hover { border-color: var(--hell-accent); color: var(--hell-ember); } /* โ”€โ”€ ๋ชจ๋ฐ”์ผ: ์„ธ๋กœ ์Šคํƒ (04-responsive .trading-area flex ์ „ํ™˜์— .hell-side ํŽธ์ž…) โ”€โ”€ */ @media (max-width: 768px) { body.hellmode { overflow-y: auto; height: auto; min-height: 100vh; } .hell-header { flex-wrap: wrap; gap: 8px; position: sticky; top: 0; z-index: 100; background: #17121a; } .hell-mystat { flex-basis: 100%; order: 5; } .hell-side { grid-area: unset !important; width: 100% !important; max-width: 100%; min-width: 0; border-left: none; border-top: 1px solid var(--border, #2a2e39); /* v2.49.0 โ€” .trading-area ๋Š” ๋ชจ๋ฐ”์ผ์—์„œ flex column(css/04-responsive.css:323)์ด๊ณ  css/05-chat.css:2283-2287 ๊ฐ€ ๋ฉ”์ธ ์ฑ„ํŒ…์šฉ์œผ๋กœ chart:1/order-panel:2/bottom-panel:3/chat-panel:4 ๋ฅผ ์ง€์ •ํ•˜๋Š”๋ฐ, .hell-side ๋Š” ์ด ๊ทœ์น™ ๋Œ€์ƒ์ด ์•„๋‹ˆ๋ผ ๊ธฐ๋ณธ๊ฐ’ order:0 ์ด๋ผ ์ฐจํŠธ๋ณด๋‹ค ๋จผ์ € ๋ Œ๋”๋ง ๋˜๊ณ  ์žˆ์—ˆ๋‹ค(์‹ค์ œ ๋ฒ„๊ทธ). order:5 ๋กœ ์ „๋ถ€ ๋’ค๋กœ ๋ณด๋‚ด "์ œ์ผ ์•„๋ž˜๋กœ ๋ฐฐ์น˜" ์š”๊ตฌ ์ถฉ์กฑ. */ order: 5; /* v2.49.2 โ€” ๋ฐ์Šคํฌํ†ฑ์€ .hell-side ๊ฐ€ ๊ทธ๋ฆฌ๋“œ ์‚ฌ์ด๋“œ๋ฐ”(๊ณ ์ • ๋†’์ด)๋ผ overflow:hidden+๋‚ด๋ถ€ ์Šคํฌ๋กค์ด ๋งž์ง€๋งŒ, ๋ชจ๋ฐ”์ผ์€ ํŽ˜์ด์ง€ ์ž์ฒด๊ฐ€ ์Šคํฌ๋กค(body.hellmode overflow-y:auto)๋˜๋ฏ€๋กœ max-height ๋กœ ๊ฐ€๋‘๋ฉด ๋žญํ‚น์ด 1~2๋ช…๋งŒ ๋ณด์ด๊ณ  ๋‚ด๋ถ€ ์Šคํฌ๋กค์ด ์ƒ๊ธด๋‹ค. ๋†’์ด ์ œ์•ฝ์„ ํ’€์–ด ์ฝ˜ํ…์ธ ๋งŒํผ ์ž์—ฐ์Šค๋Ÿฝ๊ฒŒ ๋Š˜์–ด๋‚˜๊ฒŒ(์ „์› ์Šคํฌ๋กค ์—†์ด ๋…ธ์ถœ). */ max-height: none; overflow: visible; } .hell-rank-list { flex: 0 0 auto; /* ๋ถ€๋ชจ๊ฐ€ ๋” ์ด์ƒ ๊ณ ์ • ๋†’์ด๊ฐ€ ์•„๋‹ˆ๋ผ flex:1 ๋ฌด์˜๋ฏธ โ€” ๋‚ด์šฉ ๋†’์ด ๊ทธ๋Œ€๋กœ */ overflow-y: visible; max-height: none; } } /* โ”€โ”€ ๐Ÿ”ด ์žฅ๊ณ  LIVE (ํž๋ง ๋ผ์ด๋ธŒ ์บ , v2.59.0) โ€” ์‚ฌ์ด๋“œ๋ฐ” ์ตœ์ƒ๋‹จ, .hell-side flex column ์˜ ์ฒซ ์ž์‹. flex:0 0 auto (๋žญํ‚น ๋ฆฌ์ŠคํŠธ flex:1 ๋‚ด๋ถ€์Šคํฌ๋กค ๋ถˆ์นจ๋ฒ” โ€” forecast ํŒจ๋„๊ณผ ๋™์ผ ๊ทœ์น™). ์ˆœ์ˆ˜ ํด๋ผ ์‹œ๊ฐ ์œ„์ ฏ (js/hellmode/hell-live.js). */ .hell-live { flex: 0 0 auto; margin: 0 10px 10px; /* ์œ„ ๊ฐ„๊ฒฉ์€ ์น˜ํ‚จ ๋ฐฐ๋„ˆ์˜ margin-bottom(10)์ด ๋‹ด๋‹น โ†’ ์น˜ํ‚จโ†”์žฅ๊ณ  = ์žฅ๊ณ โ†”๋žญํ‚น = 10px ๊ท ๋“ฑ */ border-radius: 10px; overflow: hidden; background: #0a0d14; border: 1px solid var(--hell-accent-soft); } .hlv-head { display: flex; align-items: center; gap: 6px; padding: 6px 8px 6px 10px; cursor: pointer; user-select: none; background: linear-gradient(180deg, rgba(255, 77, 109, 0.12), rgba(255, 77, 109, 0.03)); border-bottom: 1px solid var(--hell-accent-soft); } .hell-live.collapsed .hlv-head { border-bottom: none; } .hlv-live { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 900; letter-spacing: 0.06em; color: #ff5470; } .hlv-dot { width: 7px; height: 7px; border-radius: 50%; background: #ff3b3b; box-shadow: 0 0 6px #ff3b3b; animation: hlvPulse 1.4s ease-in-out infinite; } @keyframes hlvPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.7); } } .hlv-title { font-size: 12px; font-weight: 800; color: #fff; } .hlv-tod { font-size: 12px; margin-left: 1px; } .hlv-clock { margin-left: auto; font-size: 11px; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; color: var(--text-secondary, #9aa3b2); } .hlv-collapse { flex: 0 0 auto; width: 22px; height: 20px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; border: none; background: transparent; color: var(--text-muted, #8a8f9d); border-radius: 4px; cursor: pointer; } .hlv-collapse:hover { color: var(--hell-ember); background: rgba(255, 77, 109, 0.10); } .hlv-body { position: relative; } .hell-live.collapsed .hlv-body { display: none; } .hlv-stage { position: relative; height: 200px; background: #000; display: flex; align-items: center; justify-content: center; overflow: hidden; } #hlv-video { height: 100%; width: auto; max-width: 100%; display: block; } /* ๋‚ฎ๋ฐค ํ†ค ์˜ค๋ฒ„๋ ˆ์ด โ€” JS(applyTone)๊ฐ€ background ๊ฐฑ์‹  (์•ŒํŒŒ ์ƒ‰ ์›Œ์‹œ) */ .hlv-overlay { position: absolute; inset: 0; pointer-events: none; background: transparent; transition: background 0.8s ease; } /* ํƒญํ•˜์—ฌ ์žฌ์ƒ (๋ชจ๋ฐ”์ผ/๋ฐ์ดํ„ฐ์„ธ์ด๋ฒ„ โ€” .hlv-need-tap ์ผ ๋•Œ๋งŒ ๋…ธ์ถœ) */ .hlv-tap { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 12px; font-weight: 700; color: #fff; background: rgba(0, 0, 0, 0.45); cursor: pointer; } .hell-live.hlv-need-tap .hlv-tap { display: flex; } .hlv-tap .hlv-tap-ico { font-size: 26px; line-height: 1; } .hlv-shorts { display: block; padding: 6px 10px; font-size: 10.5px; font-weight: 700; text-align: center; color: var(--hell-gold); text-decoration: none; border-top: 1px solid var(--hell-accent-soft); } .hlv-shorts:hover { color: #fff; background: rgba(255, 176, 46, 0.08); } /* โ”€โ”€ ๋Œ€ํšŒ ๊ฐ€์ด๋“œ ์ ‘์ด์‹ (v2.59.0 โ€” ์šด์˜์ž ์š”์ฒญ, ๋ผ์ด๋ธŒ ์บ ๊ณผ ๊ฐ™์€ ์‚ฌ์ด๋“œ๋ฐ” ์ ‘์ด์‹ ํŒจํ„ด) โ”€โ”€ */ .hell-guide .hg-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; cursor: pointer; user-select: none; } .hell-guide .hg-head .hg-title { margin-bottom: 0; } .hg-collapse { flex: 0 0 auto; width: 20px; height: 18px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; border: none; background: transparent; color: var(--text-muted, #8a8f9d); border-radius: 4px; cursor: pointer; } .hg-collapse:hover { color: var(--hell-ember); background: rgba(255, 77, 109, 0.10); } .hell-guide.collapsed .hg-head { margin-bottom: 0; } .hell-guide.collapsed .hg-list { display: none; } /* ์ฃผ๋ฌธ ํŒจ๋„ ํ•˜๋‹จ ๋ฐฐ์น˜์šฉ โ€” ์‚ฌ์ด๋“œ๋ฐ” margin(0 10px 10px) ๋Œ€์‹  ํŒจ๋„ padding/gap ์— ๋งž์ถค */ .hell-guide.hg-inpanel { margin: 4px 0 0; flex: 0 0 auto; } @media (prefers-reduced-motion: reduce) { .hlv-dot { animation: none; } .hlv-overlay { transition: none; } } @media (max-width: 768px) { .hlv-stage { height: 260px; } }