:root { --bg: #0f1115; --panel: #181b22; --panel-2: #1f232c; --border: #2a2f3a; --text: #e6e8ec; --muted: #9aa3b2; --up: #ff4d4f; /* 한국식: 상승=빨강 */ --down: #3b82f6; /* 한국식: 하락=파랑 */ --accent: #6366f1; --accent-2: #818cf8; color-scheme: dark; } /* 라이트 테마 — 일 때 변수만 오버라이드(전 컴포넌트 자동 적용) */ :root[data-theme="light"] { --bg: #f4f6f9; --panel: #ffffff; --panel-2: #eef1f6; --border: #d9dee7; --text: #1a1d24; --muted: #5c6573; --up: #e03131; /* 한국식 상승=빨강 (라이트 대비 보정) */ --down: #1c7ed6; /* 한국식 하락=파랑 (라이트 대비 보정) */ --accent: #4f46e5; --accent-2: #4f46e5; /* 링크 가독성 위해 라이트에선 진한 인디고 */ color-scheme: light; } /* 라이트 테마 가독성/입체감 보정 */ :root[data-theme="light"] .alert-success { color: #2b8a3e; } :root[data-theme="light"] .stat-card, :root[data-theme="light"] .trade-card, :root[data-theme="light"] .chart-box, :root[data-theme="light"] .detail, :root[data-theme="light"] .column-card, :root[data-theme="light"] .column-hero, :root[data-theme="light"] .column-detail, :root[data-theme="light"] .about-section, :root[data-theme="light"] .post-detail { box-shadow: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04); } /* 테마 전환 버튼 */ .theme-toggle { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 5px 9px; font-size: 14px; line-height: 1; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 5px; } .theme-toggle:hover { border-color: var(--accent); } * { box-sizing: border-box; } body { margin: 0; font-family: "Pretendard", -apple-system, "Segoe UI", "Malgun Gothic", sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; } a { color: var(--accent-2); text-decoration: none; } a:hover { text-decoration: underline; } /* Navbar */ .navbar { background: var(--panel); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10; } .nav-inner { max-width: 1080px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 20px; } .brand { font-size: 20px; font-weight: 800; color: var(--text); white-space: nowrap; } .nav-links { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; } /* 내비 항목(링크·버튼·폼·셀렉트) 높이/세로정렬 통일 */ .nav-links > * { display: inline-flex; align-items: center; } .nav-links form { margin: 0; display: inline-flex; align-items: center; } .nav-links a { color: var(--muted); font-size: 15px; line-height: 1.6; } .nav-links a:hover { color: var(--text); text-decoration: none; } .nav-user { color: var(--text); font-weight: 600; } .container { max-width: 1080px; margin: 0 auto; padding: 28px 20px 60px; } /* Hero */ .hero { padding: 24px 0 8px; } .hero h1 { font-size: 30px; margin: 0 0 6px; } .hero p { color: var(--muted); margin: 0; } /* Stats */ .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 24px 0; } .stat-card { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 6px; } .stat-label { color: var(--muted); font-size: 13px; } .stat-value { font-size: 24px; font-weight: 800; } .stat-card.up .stat-value { color: var(--up); } .stat-card.down .stat-value { color: var(--down); } .stat-sub { color: var(--muted); font-size: 13px; } .stats-grid.two { grid-template-columns: 1fr 1fr; } /* Today realized P&L hero card */ .today-card { margin: 24px 0 8px; padding: 22px 26px; border-radius: 18px; background: linear-gradient(135deg, rgba(34,197,94,0.12), rgba(34,197,94,0.04)); border: 1px solid rgba(34,197,94,0.35); display: flex; flex-direction: column; gap: 8px; box-shadow: 0 4px 18px rgba(34,197,94,0.10); } .today-card.down { background: linear-gradient(135deg, rgba(239,68,68,0.12), rgba(239,68,68,0.04)); border-color: rgba(239,68,68,0.35); box-shadow: 0 4px 18px rgba(239,68,68,0.10); } .today-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .today-label { color: var(--muted); font-size: 14px; font-weight: 600; } .today-count { font-size: 12px; color: var(--muted); background: var(--panel); border: 1px solid var(--border); padding: 3px 10px; border-radius: 999px; } .today-amount { font-size: 36px; font-weight: 900; letter-spacing: -0.5px; font-variant-numeric: tabular-nums; } .today-card.up .today-amount { color: var(--up); } .today-card.down .today-amount { color: var(--down); } @media (max-width: 600px) { .today-card { padding: 16px 18px; } .today-amount { font-size: 28px; } } /* Stat table (종목별 순위) */ .stat-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 15px; } .stat-table th, .stat-table td { padding: 11px 14px; border-bottom: 1px solid var(--border); text-align: left; } .stat-table th { color: var(--muted); font-size: 13px; font-weight: 600; } .stat-table td.num, .stat-table th.num { text-align: right; font-variant-numeric: tabular-nums; } .stat-table td.up { color: var(--up); } .stat-table td.down { color: var(--down); } .stat-table tbody tr:hover { background: var(--panel-2); } /* Charts */ .charts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0; } .chart-box { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 18px; } .chart-box h2 { font-size: 16px; margin: 0 0 14px; } /* Sections */ .section-head { display: flex; align-items: center; justify-content: space-between; margin: 28px 0 14px; } .section-head h1, .section-head h2 { margin: 0; } /* About page */ .about-page { max-width: 760px; } .about-section { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; margin: 14px 0; } .about-section h2 { margin: 0 0 8px; font-size: 18px; } .about-section p { margin: 0; color: var(--text); line-height: 1.7; } /* Trade cards */ .trade-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .trade-card { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 10px; color: var(--text); transition: border-color .15s, transform .15s; } .trade-card:hover { border-color: var(--accent); transform: translateY(-2px); text-decoration: none; } .tc-head { display: flex; justify-content: space-between; align-items: center; } .tc-name { font-weight: 700; font-size: 17px; } .tc-body { display: flex; flex-direction: column; gap: 2px; } .tc-profit { font-size: 20px; font-weight: 800; } .tc-profit.up { color: var(--up); } .tc-profit.down { color: var(--down); } .tc-meta { color: var(--muted); font-size: 13px; } .tc-foot { color: var(--muted); font-size: 13px; border-top: 1px solid var(--border); padding-top: 8px; } .badge { padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; } .badge.up { background: rgba(255,77,79,.15); color: var(--up); } .badge.down { background: rgba(59,130,246,.15); color: var(--down); } .badge.hold { background: rgba(154,163,178,.15); color: var(--muted); } /* Detail */ .detail { background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 28px; } .detail-head { display: flex; justify-content: space-between; align-items: flex-start; } .detail-head h1 { margin: 0; } .ticker { color: var(--muted); font-size: 16px; font-weight: 500; } .detail-meta { color: var(--muted); margin: 4px 0 0; } .big-badge { font-size: 22px; font-weight: 800; padding: 8px 16px; border-radius: 12px; } .big-badge.up { background: rgba(255,77,79,.15); color: var(--up); } .big-badge.down { background: rgba(59,130,246,.15); color: var(--down); } .big-badge.hold { background: rgba(154,163,178,.15); color: var(--muted); } .detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 24px 0; } .detail-grid > div { background: var(--panel-2); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; } .dg-label { color: var(--muted); font-size: 13px; } .dg-value { font-size: 18px; font-weight: 700; } .dg-value.up { color: var(--up); } .dg-value.down { color: var(--down); } .memo { margin-top: 8px; } .memo h3 { margin: 0 0 6px; } .memo p { color: var(--text); background: var(--panel-2); padding: 14px; border-radius: 10px; } .detail-actions { display: flex; gap: 10px; align-items: center; margin-top: 20px; } .like-btn { background: var(--panel-2); border: 1px solid var(--border); color: var(--text); padding: 8px 16px; border-radius: 999px; cursor: pointer; font-size: 15px; } .like-btn.liked { background: rgba(255,77,79,.15); border-color: var(--up); color: var(--up); } /* Comments */ .comments { margin-top: 28px; background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 24px; } .comments h3 { margin-top: 0; } .comment-form { display: flex; gap: 10px; margin-bottom: 18px; } .comment-form textarea { flex: 1; } .comment-list { list-style: none; padding: 0; margin: 0; } .comment-list li { border-top: 1px solid var(--border); padding: 14px 0; } .comment-meta { display: flex; gap: 10px; align-items: center; color: var(--muted); font-size: 13px; } .comment-meta strong { color: var(--text); } .comment-list p { margin: 6px 0; } /* Forms */ .form-wrap { max-width: 640px; margin: 0 auto; background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 28px; } .form-wrap.narrow { max-width: 420px; } .form-wrap.wide { max-width: 1100px; } .form-wrap.wide .styled-form textarea { min-height: 420px; } .form-wrap h1 { margin-top: 0; } .styled-form .form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; } .styled-form label { font-weight: 600; font-size: 14px; } .styled-form input, .styled-form textarea, .comment-form textarea { background: var(--panel-2); border: 1px solid var(--border); color: var(--text); padding: 10px 12px; border-radius: 10px; font-size: 15px; font-family: inherit; width: 100%; } .styled-form input:focus, .styled-form textarea:focus { outline: none; border-color: var(--accent); } .help { color: var(--muted); font-size: 12px; } .field-error { color: var(--up); font-size: 13px; } .form-actions { display: flex; gap: 10px; margin-top: 8px; } .form-foot { color: var(--muted); margin-top: 16px; text-align: center; } /* Social login */ .social-login { margin-top: 18px; } .social-divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; margin: 4px 0 14px; } .social-divider::before, .social-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); } .btn-google { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 11px 12px; border: 1px solid var(--border); border-radius: 10px; background: #fff; color: #1f1f1f; font-size: 15px; font-weight: 600; transition: border-color .15s, box-shadow .15s; } .btn-google:hover { border-color: var(--accent); box-shadow: 0 1px 6px rgba(0,0,0,.15); text-decoration: none; } /* YouTube 홍보 */ .youtube-promo { display: flex; align-items: center; gap: 16px; margin: 18px 0; padding: 16px 20px; border-radius: 14px; color: var(--text); background: linear-gradient(135deg, rgba(255,0,0,.12), rgba(255,0,0,.04)); border: 1px solid rgba(255,0,0,.35); transition: border-color .15s, transform .15s; } .youtube-promo:hover { border-color: #ff0000; transform: translateY(-2px); text-decoration: none; } .youtube-promo .yt-icon { flex: 0 0 auto; } .youtube-promo .yt-text { display: flex; flex-direction: column; gap: 2px; } .youtube-promo .yt-text strong { font-size: 16px; } .youtube-promo .yt-text small { color: var(--muted); font-size: 13px; } .btn-youtube { display: inline-block; margin-top: 12px; padding: 10px 18px; border-radius: 10px; background: #ff0000; color: #fff; font-weight: 600; font-size: 15px; } .btn-youtube:hover { background: #d90000; text-decoration: none; } .footer-yt { margin: 6px 0 0; } .footer-yt a { color: #ff4d4d; font-weight: 600; } /* allauth pages (social signup / connections / errors) — element 태그가 만드는 기본 HTML 스타일 */ .allauth-page h1 { margin-top: 0; } .allauth-page > p { color: var(--muted); line-height: 1.6; } .allauth-page form p { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; } .allauth-page form label { font-weight: 600; font-size: 14px; } .allauth-page input, .allauth-page select, .allauth-page textarea { background: var(--panel-2); border: 1px solid var(--border); color: var(--text); padding: 10px 12px; border-radius: 10px; font-size: 15px; font-family: inherit; width: 100%; } .allauth-page input:focus, .allauth-page select:focus, .allauth-page textarea:focus { outline: none; border-color: var(--accent); } .allauth-page button { display: inline-block; margin-top: 6px; padding: 10px 18px; border: none; border-radius: 10px; background: var(--accent); color: #fff; font-size: 15px; font-weight: 600; font-family: inherit; cursor: pointer; } .allauth-page a { color: var(--accent); } .allauth-page ul { color: var(--up); font-size: 13px; margin: 0 0 12px; padding-left: 18px; } /* Buttons */ .btn-primary, .btn-secondary, .btn-danger { display: inline-block; padding: 10px 18px; border-radius: 10px; font-weight: 600; cursor: pointer; border: none; font-size: 15px; font-family: inherit; } .btn-primary { background: var(--accent); color: #fff; } .btn-primary:hover { background: var(--accent-2); text-decoration: none; } .btn-secondary { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); } .btn-danger { background: rgba(255,77,79,.15); color: var(--up); border: 1px solid var(--up); } .btn-primary-sm { background: var(--accent); color: #fff; padding: 6px 14px; border-radius: 8px; } .btn-primary-sm:hover { text-decoration: none; } .link-btn { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 15px; font-family: inherit; padding: 0; } .link-btn:hover { color: var(--text); } .link-btn.small { font-size: 13px; } .inline-form { display: inline; } /* 게시판 */ .post-list { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 15px; } .post-list th, .post-list td { padding: 12px 14px; border-bottom: 1px solid var(--border); text-align: left; } .post-list th { color: var(--muted); font-size: 13px; font-weight: 600; } .post-list td.num, .post-list th.num { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .post-list td.post-title { width: 60%; } .post-list tbody tr:hover { background: var(--panel-2); } .cmt-count { color: var(--accent); font-size: 13px; font-weight: 700; margin-left: 4px; } .pagination { display: flex; justify-content: center; align-items: center; gap: 16px; margin: 22px 0; color: var(--muted); } .pagination a { padding: 4px 12px; border: 1px solid var(--border); border-radius: 8px; } .post-detail { background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 28px; } .post-meta { color: var(--muted); font-size: 14px; margin: 0 0 18px; border-bottom: 1px solid var(--border); padding-bottom: 14px; } .post-body { line-height: 1.7; min-height: 80px; white-space: normal; } /* 시장 태그 (코스피/나스닥 등) */ .market-tag { display: inline-block; padding: 1px 7px; border-radius: 6px; font-size: 11px; font-weight: 700; margin-right: 6px; vertical-align: middle; } .market-kospi, .market-kosdaq { background: rgba(255,77,79,.15); color: #ff7a7c; } /* 한국(₩) */ .market-nasdaq, .market-nyse { background: rgba(34,197,94,.15); color: #4ade80; } /* 미국($) */ /* AdSense 광고 영역 */ .ad-unit { margin: 24px 0; min-height: 90px; overflow: hidden; } /* 시장분석 칼럼 */ .mood-tag { display: inline-block; padding: 1px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; margin-right: 6px; vertical-align: middle; } .mood-tag.mood-bull { background: rgba(255,77,79,.18); color: var(--up); } .mood-tag.mood-bear { background: rgba(59,130,246,.18); color: var(--down); } .mood-tag.mood-flat { background: rgba(154,163,178,.18); color: var(--muted); } .column-hero { display: block; padding: 22px 26px; margin: 18px 0 22px; border-radius: 18px; background: var(--panel); border: 1px solid var(--border); color: var(--text); transition: border-color .15s, transform .15s; } .column-hero:hover { border-color: var(--accent); transform: translateY(-2px); text-decoration: none; } .column-hero.mood-bull { background: linear-gradient(135deg, rgba(255,77,79,.10), rgba(255,77,79,.02)); border-color: rgba(255,77,79,.35); } .column-hero.mood-bear { background: linear-gradient(135deg, rgba(59,130,246,.10), rgba(59,130,246,.02)); border-color: rgba(59,130,246,.35); } .column-hero.mood-flat { background: linear-gradient(135deg, rgba(154,163,178,.08), rgba(154,163,178,.02)); } .column-hero-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--muted); font-size: 13px; } .column-hero-meta .hero-date { margin-left: auto; } .column-hero h2 { margin: 10px 0 6px; font-size: 24px; } .column-hero p { margin: 0; color: var(--muted); line-height: 1.6; } .column-hero-foot { display: flex; gap: 16px; margin-top: 14px; color: var(--muted); font-size: 14px; flex-wrap: wrap; align-items: center; } .column-hero-foot strong.up { color: var(--up); } .column-hero-foot strong.down { color: var(--down); } .column-hero-foot .hero-author { margin-left: auto; } .hero-views { color: var(--muted); font-size: 13px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--border); } .views-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--border); color: var(--muted); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; } .column-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 18px 0; } .column-card { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border-radius: 14px; background: var(--panel); border: 1px solid var(--border); color: var(--text); transition: border-color .15s, transform .15s; } .column-card:hover { border-color: var(--accent); transform: translateY(-2px); text-decoration: none; } .column-card.mood-bull { border-left: 3px solid var(--up); } .column-card.mood-bear { border-left: 3px solid var(--down); } .column-card.mood-flat { border-left: 3px solid var(--muted); } .cc-head { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; flex-wrap: wrap; } .cc-head .cc-date { margin-left: auto; } .column-card h3 { margin: 0; font-size: 17px; line-height: 1.4; } .column-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; } .cc-foot { display: flex; justify-content: space-between; color: var(--muted); font-size: 13px; border-top: 1px solid var(--border); padding-top: 8px; margin-top: 4px; } .column-detail { background: var(--panel); border: 1px solid var(--border); border-radius: 18px; padding: 32px; } .column-detail.mood-bull { border-top: 4px solid var(--up); } .column-detail.mood-bear { border-top: 4px solid var(--down); } .column-detail.mood-flat { border-top: 4px solid var(--muted); } .column-detail-head { border-bottom: 1px solid var(--border); padding-bottom: 18px; margin-bottom: 22px; } .cdh-meta { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; flex-wrap: wrap; } .cdh-meta .cdh-date { margin-left: auto; font-weight: 600; color: var(--text); } .column-detail-head h1 { margin: 12px 0 8px; font-size: 28px; line-height: 1.3; } .cdh-summary { margin: 0; color: var(--text); font-size: 17px; line-height: 1.6; padding: 12px 16px; background: var(--panel-2); border-radius: 10px; border-left: 3px solid var(--accent); } .cdh-author { margin: 14px 0 0; color: var(--muted); font-size: 14px; } .index-snapshot { background: var(--panel-2); border-radius: 12px; padding: 16px 18px; margin-bottom: 22px; } .index-snapshot h3 { margin: 0 0 12px; font-size: 14px; color: var(--muted); font-weight: 600; } .index-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .idx { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: var(--panel); border-radius: 10px; } .idx-label { color: var(--muted); font-size: 12px; } .idx-value { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; } .idx-pct { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; } .idx-pct.up { color: var(--up); } .idx-pct.down { color: var(--down); } .column-body { line-height: 1.85; font-size: 16px; } .column-body p { margin: 0 0 16px; } /* 시장 태그(추가): 종합/S&P500 색상 */ .market-global { background: rgba(99,102,241,.15); color: var(--accent-2); } .market-sp500 { background: rgba(34,197,94,.15); color: #4ade80; } @media (max-width: 860px) { .column-list { grid-template-columns: 1fr; } .index-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .column-hero, .column-detail { padding: 18px 16px; } .column-hero h2 { font-size: 20px; } .column-detail-head h1 { font-size: 22px; } .column-body { font-size: 15px; } } /* Language switcher (네비 언어 토글) */ .lang-form { display: inline-flex; margin: 0; } .lang-form select { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 5px 8px; font-size: 13px; font-family: inherit; cursor: pointer; } .lang-form select:hover { border-color: var(--accent); } /* Date filter (매매기록 날짜별 보기) */ .date-filter { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; flex-wrap: wrap; } .date-filter label { color: var(--muted); font-size: 14px; font-weight: 600; } .date-filter select { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: 9px 14px; font-size: 15px; font-family: inherit; cursor: pointer; } .date-filter select:hover { border-color: var(--accent); } .filter-note { color: var(--muted); font-size: 14px; margin: 0 0 14px; } .profit-sum { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; margin: 0 0 16px; } .profit-sum .ps-label { color: var(--muted); font-size: 14px; font-weight: 600; } .profit-sum .ps-amount { font-size: 20px; font-weight: 800; } .profit-sum .ps-amount.up { color: var(--up); } .profit-sum .ps-amount.down { color: var(--down); } /* Misc */ .messages { margin-bottom: 18px; } .alert { padding: 12px 16px; border-radius: 10px; margin-bottom: 10px; } .alert-success { background: rgba(34,197,94,.15); color: #4ade80; } .alert-error { background: rgba(255,77,79,.15); color: var(--up); } .empty { color: var(--muted); } .footer { border-top: 1px solid var(--border); padding: 24px; text-align: center; color: var(--muted); font-size: 14px; } .footer-links { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; } .footer-links a { color: var(--muted); text-decoration: none; } .footer-links a:hover { color: var(--fg); text-decoration: underline; } .footer-sep { color: var(--border); } .footer-disclaimer { margin: 12px auto 0; max-width: 640px; font-size: 12px; line-height: 1.6; opacity: .8; } /* 정적 정보/법적 페이지 (소개·개인정보처리방침·이용약관·문의) */ .legal-page { max-width: 760px; margin: 0 auto; } .legal-meta { color: var(--muted); font-size: 13px; margin: 4px 0 0; } .legal-section { margin: 22px 0; line-height: 1.7; } .legal-section h2 { font-size: 18px; margin: 0 0 8px; } .legal-section p { color: var(--fg); margin: 0 0 10px; } .legal-section ul { margin: 8px 0 10px; padding-left: 20px; line-height: 1.7; } .legal-section li { margin: 4px 0; } .legal-section a { color: #4d8dff; } /* 데이터 페이지 상단 해설 (매매기록·통계) */ .page-intro { max-width: 820px; margin: 0 0 18px; padding: 12px 14px; background: var(--card, rgba(127,127,127,.08)); border: 1px solid var(--border); border-radius: 10px; color: var(--muted); font-size: 14px; line-height: 1.7; } .page-intro a { color: #4d8dff; } @media (max-width: 860px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } .charts { grid-template-columns: 1fr; } .trade-cards { grid-template-columns: 1fr; } .detail-grid { grid-template-columns: repeat(2, 1fr); } .stats-grid.two { grid-template-columns: 1fr; } } /* 모바일 (스마트폰) */ @media (max-width: 600px) { .nav-inner { flex-wrap: wrap; gap: 10px; padding: 12px 16px; } .nav-links { gap: 12px 14px; flex-wrap: wrap; font-size: 14px; } .nav-links a { font-size: 14px; } .container { padding: 18px 14px 48px; } .hero h1 { font-size: 24px; } .section-head { flex-wrap: wrap; gap: 8px; } .section-head h1 { font-size: 24px; } /* 카드/그리드 한 줄로 */ .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .detail-grid { grid-template-columns: 1fr 1fr; } .stat-card { padding: 14px; } .stat-value { font-size: 20px; } /* 표: 폰트·패딩 축소로 좁은 화면에 맞춤 */ .post-list, .stat-table { font-size: 13px; } .post-list th, .post-list td, .stat-table th, .stat-table td { padding: 8px 8px; } .post-list td.post-title { width: auto; } /* 컨테이너/폼 여백 축소 */ .detail, .post-detail, .form-wrap { padding: 18px 16px; } /* 필터 줄바꿈 */ .date-filter { gap: 8px; } .date-filter select, .lang-form select { font-size: 14px; } .guide-grid { grid-template-columns: 1fr; } } /* ===== 투자 학습 (Learn / Guides) ===== */ .guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin: 18px 0; } .guide-card { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 20px; display: flex; flex-direction: column; gap: 8px; color: var(--text); transition: border-color .15s, transform .15s; } .guide-card:hover { border-color: var(--accent); transform: translateY(-2px); text-decoration: none; } .guide-icon { font-size: 26px; line-height: 1; } .guide-card-title { margin: 2px 0 0; font-size: 17px; line-height: 1.4; } .guide-card-summary { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; flex: 1; } .guide-card-more { color: var(--accent-2); font-size: 14px; font-weight: 600; margin-top: 4px; } .guide-page .breadcrumb { margin-bottom: 8px; font-size: 14px; } .guide-page .breadcrumb a { color: var(--muted); } .guide-page .breadcrumb a:hover { color: var(--accent-2); } .guide-lead { color: var(--muted); font-size: 16px; line-height: 1.7; margin: 4px 0 20px; } .guide-section { margin: 20px 0; } .guide-section h2 { font-size: 19px; margin: 0 0 10px; } .guide-section p { line-height: 1.8; margin: 0 0 12px; color: var(--text); } .guide-section ul { line-height: 1.8; padding-left: 20px; margin: 0 0 12px; } .guide-section li { margin-bottom: 6px; } .guide-formula { background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 16px; font-size: 15px; color: var(--text); } .guide-note { font-size: 14px; color: var(--muted); border-left: 3px solid var(--border); padding: 4px 0 4px 14px; } .guide-sep { border: none; border-top: 1px solid var(--border); margin: 28px 0 18px; } .guide-related h2 { font-size: 17px; margin: 0 0 8px; } .guide-related ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; } .guide-related a { font-size: 15px; } .learn-disclaimer { color: var(--muted); font-size: 13px; line-height: 1.7; margin-top: 18px; } .glossary { margin: 0; } .glossary dt { font-weight: 700; margin-top: 16px; font-size: 16px; } .glossary dd { margin: 4px 0 0; color: var(--text); line-height: 1.75; } .glossary dd em { color: var(--muted); font-style: italic; } :root[data-theme="light"] .guide-card, :root[data-theme="light"] .guide-formula { background: var(--panel); }