/* ── 리셋 & 기본 ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #0f0f13;
  --surface: #1a1a22;
  --surface2: #22222e;
  --border: #474760;  /* 카드·입력칸 테두리 (어두운 배경에서 잘 보이게) */
  --text: #e8e8f0;
  --text-muted: #888899;
  --up: #f04452;      /* 상승: 빨강 */
  --down: #3485fa;    /* 하락: 파랑 */
  --danger: #e84545;  /* 경고·삭제·LIVE (등락색과 별개) */
  --accent: #5b8cff;
  --hot: #ff8c42;
  --radius: 12px;
  --font: 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  color-scheme: dark;
}
/* 화이트 모드 (헤더의 🌙 다크 / ☀️ 화이트 버튼, theme.js) */
:root[data-theme="light"] {
  --bg: #f3f4f8;
  --surface: #ffffff;
  --surface2: #eef0f5;
  --border: #c8cbd8;
  --text: #1b1c24;
  --text-muted: #636677;
  --up: #e0303f;
  --down: #2667e0;
  --danger: #d93636;
  --accent: #3d6df0;
  --hot: #e8701f;
  color-scheme: light;
}
:root[data-theme="light"] .modal-overlay { background: rgba(20,22,35,.45); }
:root[data-theme="light"] .badge.nasdaq, :root[data-theme="light"] .badge.nyse, :root[data-theme="light"] .badge.amex { color: #18a058; }
:root[data-theme="light"] .fav-star.on, :root[data-theme="light"] .fav-star:hover { color: #e0a800; }
body { background: var(--bg); color: var(--text); font-family: var(--font); line-height: 1.5; min-height: 100vh; }
body.no-scroll { overflow: hidden; }
.container { max-width: 1240px; margin: 0 auto; padding: 0 16px; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; color: inherit; }
input, textarea, select { font-family: inherit; color: var(--text); background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; outline: none; transition: border 0.2s; }
input:focus, textarea:focus, select:focus { border-color: var(--accent); }
.hidden { display: none !important; }

/* ── 헤더 ────────────────────────────────────────── */
.site-header { background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; backdrop-filter: blur(8px); }
.header-inner { display: flex; align-items: center; gap: 16px; padding: 12px 16px; }
.logo { display: flex; align-items: center; gap: 8px; font-size: 1.32rem; font-weight: 700; white-space: nowrap; }
.logo-icon { font-size: 1.85rem; display: inline-flex; }
.main-nav { display: flex; gap: 4px; flex: 1; }
/* Home · 다크모드 버튼은 로그인 버튼과 같은 모양·크기 */
.main-nav a { padding: 7px 16px; border-radius: 20px; font-size: 0.88rem; font-weight: 600; line-height: 1.2; color: var(--text-muted); border: 1px solid var(--border); transition: all 0.2s; }
.main-nav a.active { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (hover: hover) { .main-nav a:hover { background: var(--accent); border-color: var(--accent); color: #fff; } }
.main-nav a, .theme-toggle { width: 76px; padding-left: 0; padding-right: 0; text-align: center; }  /* Home · Light/Dark 같은 폭 */
.main-nav { align-items: center; }
.theme-toggle { padding: 7px 16px; border-radius: 20px; font-size: 0.88rem; font-weight: 600; line-height: 1.2; color: var(--text-muted); border: 1px solid var(--border); white-space: nowrap; transition: all .2s; }
@media (hover: hover) { .theme-toggle:hover { color: var(--accent); border-color: var(--accent); } }
.header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.search-box { width: 220px; font-size: 0.88rem; -webkit-appearance: none; appearance: none; }
.search-box::-webkit-search-decoration { -webkit-appearance: none; }
.btn-login { background: var(--accent); color: #fff; padding: 7px 16px; border-radius: 20px; font-size: 0.88rem; font-weight: 600; line-height: 1.2; border: 1px solid var(--accent); transition: opacity 0.2s; }
.btn-login:hover { opacity: 0.85; }
.btn-signup { padding: 7px 14px; border-radius: 20px; font-size: 0.88rem; font-weight: 600; color: var(--accent); border: 1px solid var(--accent); white-space: nowrap; transition: all .2s; }
.btn-signup:hover { background: rgba(91,140,255,.12); }
.link-btn { color: var(--accent); text-decoration: underline; font-size: inherit; }
.write-member { font-size: 0.85rem; color: var(--text-muted); }
.write-member b { color: var(--text); }
.write-guest-label { align-self: center; font-size: 0.78rem; font-weight: 700; color: var(--text-muted); }
.member-badge { padding: 0 5px; border-radius: 4px; font-size: 0.66rem; font-weight: 700; background: rgba(91,140,255,.2); color: var(--accent); }
.member-badge.guest { background: rgba(160,160,180,.2); color: var(--text-muted); }
.member-badge.official { background: rgba(240,68,82,.15); color: var(--up); }
.member-badge.ai { background: rgba(124,92,255,.18); color: #8b6cff; }

/* ── 마켓 배너 ───────────────────────────────────── */
.market-banner { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px 12px; margin: 16px 0 14px; }
.market-banner.loading .idx-value::before { content: ""; display: inline-block; width: 70%; height: 1em; border-radius: 4px; background: var(--surface2); vertical-align: middle; }  /* 지수 받아오기 전 자리 표시 (HTML에 "-" 대신) */
/* 지수 카드: 이름 / 값 / 등락 세 줄 */
.index-card { min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 7px 14px; display: grid; grid-template-columns: 1fr; grid-template-areas: "name" "value" "change"; align-items: baseline; column-gap: 10px; row-gap: 1px; }
.idx-name { grid-area: name; font-size: 0.72rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.idx-value { grid-area: value; font-size: 1.05rem; font-weight: 700; white-space: nowrap; }
.idx-change { grid-area: change; text-align: left; font-size: 0.78rem; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.idx-change.up { color: var(--up); }
.idx-change.down { color: var(--down); }
.idx-status { font-weight: 500; text-transform: none; letter-spacing: 0; }
.idx-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── 탭 ──────────────────────────────────────────── */
/* 업종 탭: PC는 10개를 한 줄에 같은 크기로 (양끝은 아래 종목 카드 줄과 맞춤), 1060px 이하는 5개씩 두 줄 */
.tab-bar { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.tab-bar .tab { padding: 8px 2px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1180px) { .tab-bar .tab { font-size: 0.86rem; letter-spacing: -0.02em; } }
@media (max-width: 1060px) { .tab-bar { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; } .tab-bar .tab { font-size: 0.95rem; letter-spacing: 0; } }
.tab-note { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 16px; }
.tab { padding: 7px 18px; border-radius: 6px; font-size: 0.88rem; background: var(--surface); border: 1px solid var(--border); color: var(--text-muted); transition: all 0.2s; }
.tab:hover { border-color: var(--accent); color: var(--accent); }
.tab.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
/* 업종 탭: 종목명과 같은 크기·굵기, 직사각형 / 모바일은 한 줄 5개, 두 단어 탭은 두 줄 */
.tab-bar .tab { font-size: 0.95rem; font-weight: 700; }
.tab-bar .tab .tab-mo { display: none; }
@media (max-width: 600px) {
  .tab-bar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
  .tab-bar .tab { padding: 6px 2px; font-size: 0.85rem; text-align: center; line-height: 1.2; word-break: keep-all; letter-spacing: -0.02em; display: flex; align-items: center; justify-content: center; }
  .tab-bar .tab .tab-pc { display: none; }
  .tab-bar .tab .tab-mo { display: inline; }
}

/* ── 종목 카드 ───────────────────────────────────── */
/* 종목 그리드: 데스크톱 6열, 가로 4 : 세로 3 카드 */
.stock-list, .search-results { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.search-label, .search-results .empty-msg, .stock-list .empty-msg { grid-column: 1 / -1; }
.search-label { margin-bottom: 8px; color: var(--text-muted); font-size: 0.9rem; }
.stock-card { position: relative; aspect-ratio: 4 / 3; min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; display: flex; flex-direction: column; cursor: pointer; transition: all 0.2s; overflow: hidden; }
.stock-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 4px 20px rgba(91,140,255,.15); }
/* 업종 실시간 뉴스 · 업종 게시판 카드 (종목 카드와 같은 1칸) */
.sector-card { justify-content: center; align-items: center; text-align: center; gap: 6px; aspect-ratio: auto; }  /* 업종명이 길어 줄이 늘어도 잘리지 않게 (같은 줄 종목 카드 높이에 맞춰 늘어남) */
.sector-card.news { background: linear-gradient(160deg, rgba(91,140,255,.18), var(--surface) 70%); border-color: rgba(91,140,255,.45); }
.sector-card.market { background: linear-gradient(160deg, rgba(255,140,60,.16), var(--surface) 70%); border-color: rgba(255,140,60,.45); }
.sector-icon { font-size: 1.7rem; line-height: 1; }
.sector-label { font-weight: 700; font-size: 0.95rem; line-height: 1.35; word-break: keep-all; }
.sector-sub { font-size: 0.72rem; color: var(--text-muted); }
.sector-sub span { white-space: nowrap; }
.sector-card { container-type: inline-size; }
.sector-label span { white-space: nowrap; font-size: min(1em, 10.5cqi); }  /* 줄마다 한 줄 유지, 좁은 화면에선 글씨를 줄여 맞춤 */
.modal.sector-mode .modal-price-block,
.modal.sector-mode .modal-tabs .tab[data-tab="disclosure"] { display: none; }
/* 미국 종목: 분석 보고서·공시 탭 없음 */
.modal.us-mode .modal-tabs .tab[data-tab="research"],
.modal.us-mode .modal-tabs .tab[data-tab="disclosure"] { display: none; }
.news-item { display: block; padding: 9px 0; border-bottom: 1px solid var(--border); color: inherit; }
.news-item:last-child { border-bottom: none; }
.news-item:hover .news-item-title { color: var(--accent); }
.news-item-title { font-size: 0.86rem; font-weight: 600; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .15s; }
.news-item-meta { font-size: 0.7rem; color: var(--text-muted); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.news-stock { display: inline-block; padding: 0 5px; margin-right: 4px; border-radius: 4px; background: rgba(91,140,255,.15); color: var(--accent); font-weight: 600; }
.news-src { display: inline-block; width: 15px; height: 15px; line-height: 15px; text-align: center; margin-right: 4px; border-radius: 3px; font-size: 0.62rem; font-weight: 800; color: #fff; vertical-align: 1px; }
.news-src.naver { background: #03c75a; }
.news-src.google { background: #4285f4; }
/* 윗줄: 로고 + 주가·등락 */
.card-top { display: flex; align-items: center; gap: 8px; min-width: 0; padding-right: 18px; }
.card-quote { min-width: 0; line-height: 1.25; }
/* 오른쪽 위: 관심 종목 별표 */
.card-marks { position: absolute; top: 6px; right: 8px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.fav-star { font-size: 1.05rem; line-height: 1; color: var(--text-muted); padding: 2px; transition: transform .15s, color .15s; }
.fav-star:hover { transform: scale(1.2); color: #f5c518; }
.fav-star.on { color: #f5c518; }
.stock-avatar { position: relative; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; font-weight: 700; flex-shrink: 0; overflow: hidden; background: #fff; }
.stock-logo { width: 100%; height: 100%; object-fit: contain; display: block; }
.avatar-letter { display: none; }
.stock-avatar.no-logo { border-radius: 12px; }
.stock-avatar.no-logo .avatar-letter { display: block; }
.stock-avatar.no-logo.up { background: rgba(240,68,82,.15); color: var(--up); }
.stock-avatar.no-logo.down { background: rgba(52,133,250,.15); color: var(--down); }
.stock-meta { margin-top: 8px; min-width: 0; }
.stock-name { font-weight: 700; font-size: 1.05rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; }
.stock-sub { font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; white-space: nowrap; }
.badge { padding: 0 5px; border-radius: 4px; font-size: 0.66rem; font-weight: 700; }
.badge.kospi { background: rgba(91,140,255,.2); color: var(--accent); }
.badge.kosdaq { background: rgba(255,140,66,.2); color: var(--hot); }
.badge.nasdaq, .badge.nyse, .badge.amex { background: rgba(46,204,113,.18); color: #2ecc71; }
.badge.etf { background: rgba(160,160,180,.2); color: var(--text-muted); }
.card-bottom { margin-top: auto; }
.stock-price { font-size: 1rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.price-change { font-size: 0.8rem; font-weight: 600; white-space: nowrap; }
.stock-extra { font-size: 0.7rem; color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── 색상 유틸 ───────────────────────────────────── */
.up { color: var(--up); }
.down { color: var(--down); }

/* ── 모달 ────────────────────────────────────────── */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.65); z-index: 200; display: flex; align-items: flex-end; justify-content: center; backdrop-filter: blur(3px); }
.modal { position: relative; background: var(--surface); border-radius: var(--radius) var(--radius) 0 0; width: 100%; max-width: 720px; height: 85vh; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; animation: slideUp .25s ease; }
@keyframes slideUp { from { transform: translateY(60px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
/* 닫기 버튼: 글자와 테두리로 눈에 잘 띄게, 휴대폰에서도 누르기 쉬운 크기 */
.modal-close { flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 0 14px; border-radius: 20px; background: var(--surface2); border: 1px solid var(--border); color: var(--text); font-size: 0.88rem; font-weight: 700; line-height: 1; white-space: nowrap; transition: all .2s; }
.modal-close .x { font-size: 1rem; }
.modal-close:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.modal-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 20px 20px 0 20px; border-bottom: 1px solid var(--border); padding-bottom: 14px; }
.modal-header h2 { font-size: 1.3rem; }
.stock-code-badge { display: inline-block; margin-top: 4px; font-size: 0.78rem; color: var(--text-muted); border: 1px solid var(--border); border-radius: 6px; padding: 1px 7px; }
.modal-head-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.modal-price-block { text-align: right; }
.modal-price { font-size: 1.4rem; font-weight: 700; display: block; }
.modal-change { font-size: 1rem; font-weight: 600; }
.modal-tabs { display: flex; gap: 0; padding: 0 12px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; flex-shrink: 0; }
.modal-tabs::-webkit-scrollbar { display: none; }
.modal-tabs .tab { flex: 1 0 auto; white-space: nowrap; border-radius: 0; padding: 11px 12px; border: none; border-bottom: 2px solid transparent; background: none; color: var(--text-muted); }
.modal-tabs .tab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ── 글쓰기 박스 ─────────────────────────────────── */
#discussTab { overflow-y: auto; flex: 1; display: flex; flex-direction: column; }
.write-box { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.write-ids { display: flex; gap: 8px; flex-wrap: wrap; }
.write-ids input { width: 190px; max-width: 100%; }
.write-box textarea { resize: vertical; }
.write-footer { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }  /* 좁은 화면: 비회원 닉네임·비밀번호 줄 아래로 글자수·등록 */
#charCount { margin-left: auto; font-size: 0.78rem; color: var(--text-muted); }
.btn-submit { background: var(--accent); color: #fff; padding: 8px 20px; border-radius: 8px; font-weight: 600; font-size: 0.88rem; transition: opacity .2s; }
.btn-submit:hover { opacity: 0.85; }
.btn-submit.full-width { width: 100%; padding: 10px; }

/* ── 게시글 ──────────────────────────────────────── */
.post-list { flex: 1; overflow-y: auto; }
.post-item { padding: 10px 16px; border-bottom: 1px solid var(--border); }  /* 글 사이 여백 최소 */
.post-item:last-child { border-bottom: none; }
.post-header { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; flex-wrap: wrap; }
.post-nick { font-weight: 700; font-size: 0.88rem; }
.post-sentiment { font-size: 0.75rem; padding: 2px 8px; border-radius: 10px; }
.post-sentiment.up { background: rgba(240,68,82,.15); color: var(--up); }
.post-sentiment.down { background: rgba(52,133,250,.15); color: var(--down); }
.post-sentiment.neutral { background: var(--surface2); color: var(--text-muted); }
.post-time { font-size: 0.75rem; color: var(--text-muted); margin-left: auto; }
.vote-btns { display: inline-flex; gap: 4px; }
.btn-vote { font-size: 0.76rem; color: var(--text-muted); border: 1px solid var(--border); border-radius: 10px; padding: 0 6px; transition: all .2s; white-space: nowrap; }
/* 공감·비공감·팔로우 세 버튼은 같은 크기 (숫자가 커지면 그만큼만 늘어남) */
.btn-vote, .btn-follow { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-width: 66px; height: 24px; line-height: 1; }
.btn-vote b { font-weight: 700; margin-left: 2px; }
.btn-vote.up:hover, .btn-vote.up.on { background: rgba(240,68,82,.12); color: var(--up); border-color: var(--up); }
.btn-vote.down:hover, .btn-vote.down.on { background: rgba(52,133,250,.12); color: var(--down); border-color: var(--down); }
.post-body { font-size: 1rem; line-height: 1.5; color: var(--text); white-space: pre-wrap; word-break: break-word; }
.btn-more { margin-top: 2px; font-size: 0.8rem; font-weight: 600; color: var(--accent); }
.btn-more:hover { text-decoration: underline; }
.btn-follow { font-size: 0.76rem; font-weight: 600; color: var(--hot); border: 1px solid var(--hot); border-radius: 10px; padding: 0 6px; transition: all .2s; white-space: nowrap; }  /* 공감·비공감과 같은 크기, 주황 */
.btn-follow:hover { background: rgba(255,140,66,.15); }
.author-overlay { z-index: 300; }
.author-modal { max-width: 640px; height: 80vh; }
.author-modal .post-list { overflow-y: auto; }
.author-stock { font-weight: 700; font-size: 0.85rem; color: var(--accent); }
.author-stock:hover { text-decoration: underline; }
.btn-follow.following { background: var(--hot); color: #fff; }
.btn-follow-big { padding: 7px 16px; border-radius: 20px; font-size: 0.88rem; font-weight: 700; background: var(--hot); color: #fff; transition: opacity .2s; }
.btn-follow-big.following { background: none; color: var(--hot); border: 1px solid var(--hot); }
.btn-follow-big:hover { opacity: .85; }
.author-link:hover { color: var(--accent); text-decoration: underline; }
.follow-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 20px; border-bottom: 1px solid var(--border); }
.follow-chip { padding: 3px 12px; border-radius: 14px; font-size: 0.8rem; background: rgba(255,140,66,.15); color: var(--hot); font-weight: 600; }
.follow-chip:hover { background: rgba(255,140,66,.3); }
.btn-submit:disabled { opacity: .5; cursor: wait; }
.post-tools { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 0; }
.post-tools:not(:has(*)) { display: none; }  /* 버튼 없는 줄은 자리 차지 안 함 */
/* '더 보기'가 있으면 수정·삭제·신고를 같은 줄 오른쪽에 (한 줄 절약) */
.btn-more + .post-tools { margin-top: -22px; pointer-events: none; }
.btn-more + .post-tools > * { pointer-events: auto; }
.post-edited { font-size: 0.72rem; color: var(--text-muted); margin-right: auto; }
.btn-tool { font-size: 0.75rem; color: var(--text-muted); padding: 1px 8px; border-radius: 6px; }
.btn-tool:hover { color: var(--text); background: var(--surface2); }
.post-form { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.post-form textarea { width: 100%; resize: vertical; }
.post-form-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.post-form-row input { width: 140px; }
.post-form-row select { padding: 6px 10px; font-size: 0.85rem; }
.post-form-label { font-size: 0.8rem; color: var(--text-muted); margin-right: auto; }
.btn-cancel { padding: 8px 14px; border-radius: 8px; font-size: 0.88rem; color: var(--text-muted); border: 1px solid var(--border); }
.btn-cancel:hover { color: var(--text); }
.btn-danger { background: var(--danger); color: #fff; padding: 8px 18px; border-radius: 8px; font-weight: 600; font-size: 0.88rem; }
.btn-danger:hover { opacity: .85; }

/* ── 종목정보 탭 ─────────────────────────────────── */
/* 상세 탭 공통 (뉴스·종목정보·보고서·공시) */
.detail-panel { flex: 1; overflow-y: auto; padding: 4px 20px 16px; }
.panel-status { font-size: 0.75rem; color: var(--text-muted); padding: 10px 0 4px; }
.news-more { display: block; width: 100%; margin: 10px 0 0; padding: 9px 0; border-radius: 8px; border: 1px solid var(--border); color: var(--text-muted); font-size: 0.85rem; font-weight: 600; transition: all .2s; }
.news-more:hover { color: var(--accent); border-color: var(--accent); }
.panel-footer { font-size: 0.75rem; color: var(--text-muted); padding: 14px 0 4px; text-align: center; }
.panel-link { color: var(--accent); }
.panel-link:hover { text-decoration: underline; }
.feed-item { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border); color: inherit; }
.feed-item:hover .feed-title { color: var(--accent); }
.feed-main { flex: 1; min-width: 0; }
.feed-title { font-weight: 600; font-size: 0.93rem; line-height: 1.45; transition: color .15s; }
.feed-summary { font-size: 0.8rem; color: var(--text-muted); margin-top: 4px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.feed-meta { font-size: 0.74rem; color: var(--text-muted); margin-top: 6px; }
.feed-tag { display: inline-block; padding: 0 6px; border-radius: 4px; background: rgba(91,140,255,.15); color: var(--accent); font-weight: 600; margin-right: 4px; }
.feed-thumb { width: 88px; height: 60px; object-fit: cover; border-radius: 8px; flex-shrink: 0; background: var(--surface2); }
.info-sub { font-size: 0.75rem; color: var(--text-muted); font-weight: 400; }
.fin-row .info-val { padding-top: 6px; padding-bottom: 6px; }
.fin-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.fin-table th, .fin-table td { padding: 5px 6px; text-align: right; white-space: nowrap; }
.fin-table thead th { color: var(--text-muted); font-weight: 600; font-size: 0.76rem; border-bottom: 1px solid var(--border); }
.fin-table tbody th { text-align: left; color: var(--text-muted); font-weight: 500; }
.fin-table thead th:first-child { text-align: left; }
.info-table { width: 100%; border-collapse: collapse; }
.info-table tr { border-bottom: 1px solid var(--border); }
.info-table tr:last-child { border-bottom: none; }
.info-key { padding: 10px 8px; color: var(--text-muted); font-size: 0.88rem; width: 28%; vertical-align: top; }
.info-val { padding: 10px 8px; font-weight: 600; font-size: 0.9rem; }
.price-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.price-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.price-table th, .price-table td { padding: 8px 6px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.price-table thead th { color: var(--text-muted); font-weight: 600; font-size: 0.78rem; }
.price-table th:first-child { text-align: left; }
.price-table tbody th { color: var(--text-muted); font-weight: 500; }
.price-table td { font-weight: 600; }
.price-table td.muted { color: var(--text-muted); font-weight: 400; font-size: 0.76rem; }
.price-note { margin-top: 8px; line-height: 1.5; }
@media (max-width: 480px) { .price-table { font-size: 0.78rem; } .price-table th, .price-table td { padding: 7px 4px; } }

/* ── 로그인 드롭다운 ─────────────────────────────── */
.login-dropdown { position: fixed; top: 62px; right: 16px; z-index: 300; }
.login-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; gap: 10px; width: 260px; box-shadow: 0 8px 32px rgba(0,0,0,.4); }
.login-box h3 { font-size: 1rem; margin-bottom: 4px; }
/* 로그인·회원가입·회원 메뉴 오른쪽 위 닫기 */
.login-box { position: relative; }
.dropdown-close { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.95rem; color: var(--text-muted); border: 1px solid var(--border); background: var(--surface2); transition: all .2s; }
#memberTitle { padding-right: 36px; }
.btn-feed-menu { padding: 10px; border-radius: 8px; font-size: 0.88rem; font-weight: 600; color: var(--hot); border: 1px solid var(--hot); transition: background .2s; }
@media (hover: hover) {
  .dropdown-close:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
  .btn-feed-menu:hover { background: rgba(255,140,66,.15); }
}
.link-btn.follow-count { font-weight: 700; text-underline-offset: 2px; }
.login-box form { display: flex; flex-direction: column; gap: 10px; }
.login-note { font-size: 0.75rem; color: var(--text-muted); }

/* ── 기타 ────────────────────────────────────────── */
.empty-msg { color: var(--text-muted); font-size: 0.9rem; padding: 24px 0; text-align: center; }


/* ── 푸터 ────────────────────────────────────────── */
.site-footer { margin-top: 48px; border-top: 1px solid var(--border); padding: 24px 0; text-align: center; font-size: 0.8rem; color: var(--text-muted); line-height: 2; }

/* ── 반응형 ──────────────────────────────────────── */
/* 지수 카드: 값·등락 두 줄, 1000px 이하 글자 축소 → 880px 이하 3열 */
@media (max-width: 1000px) { .index-card { padding: 7px 10px; column-gap: 6px; } .idx-value { font-size: 0.95rem; } .idx-change { font-size: 0.72rem; } }
@media (max-width: 880px) { .market-banner { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.main-nav a, .btn-login, .btn-signup { white-space: nowrap; }
@media (max-width: 1000px) { .main-nav { flex: 0 0 auto; } }
@media (max-width: 1180px) { .stock-list, .search-results { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 960px) { .stock-list, .search-results { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) { .stock-list, .search-results { grid-template-columns: repeat(3, minmax(0, 1fr)); } .stock-name { font-size: 0.95rem; } }
@media (max-width: 480px) { .index-card { padding: 6px 8px; } .idx-value { font-size: 0.9rem; } .idx-change { font-size: 0.66rem; letter-spacing: -0.02em; } }
@media (max-width: 480px) { .stock-list, .search-results { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .stock-card { padding: 8px 10px; } .stock-avatar { width: 30px; height: 30px; } .stock-price { font-size: 0.92rem; } .price-change { font-size: 0.74rem; } .stock-meta { margin-top: 4px; } .stock-name { font-size: 0.93rem; line-height: 1.25; } .stock-sub, .stock-why, .stock-extra { margin-top: 1px; line-height: 1.3; } .sector-icon { font-size: 1.4rem; } .sector-label { font-size: 0.88rem; } .sector-card { gap: 4px; } }
@media (max-width: 600px) {
  .main-nav { flex: 1; justify-content: flex-start; gap: 4px; }
  .main-nav a, .theme-toggle { padding: 7px 0; width: 64px; font-size: 0.82rem; }
  .logo { font-size: 1.1rem; gap: 6px; }
  .logo-icon { font-size: 1.5rem; }
  .header-inner { flex-wrap: wrap; gap: 8px 10px; }
  .header-actions { width: 100%; }
  .search-box { flex: 1; width: auto; min-width: 0; }
  .btn-login, .btn-signup { padding: 7px 11px; font-size: 0.82rem; }
  .login-dropdown { top: 118px; left: 16px; right: 16px; }
  .login-box { width: auto; }
  .market-banner { gap: 8px; }
  .modal { max-height: 95vh; }
  .modal-close { min-height: 38px; padding: 0 13px; }
}
/* 아주 좁은 휴대폰(약 380px 이하): 제목이 커서 Home·Dark 버튼이 아랫줄로 밀리지 않게 */
@media (max-width: 380px) { .logo { font-size: 1.02rem; gap: 5px; } .logo-icon { font-size: 1.3rem; } }

/* ── 관리자 ──────────────────────────────────────── */
.admin-link { font-size: 0.75rem; color: var(--text-muted); text-decoration: none; }
.admin-form { display: flex; justify-content: center; gap: 8px; margin-top: 8px; }
.admin-form input { width: 180px; }
.btn-admin-del { font-size: 0.75rem; font-weight: 600; color: #fff; background: var(--danger); padding: 2px 8px; border-radius: 6px; }
.btn-admin-del:hover { opacity: .85; }
.admin-badge { display: none; position: fixed; right: 16px; bottom: 16px; z-index: 150; background: var(--danger); color: #fff; font-size: 0.8rem; font-weight: 700; padding: 8px 14px; border-radius: 20px; box-shadow: 0 4px 16px rgba(0,0,0,.4); }
.admin-badge button { color: #fff; text-decoration: underline; font-weight: 700; }
body.admin-mode .admin-badge { display: block; }


/* ── 게시판 관리: 운영정책 안내 · 신고 · 블라인드 ───── */
.write-policy { font-size: 0.72rem; color: var(--text-muted); line-height: 1.5; }
.write-policy a, .policy-page a { color: var(--accent); text-decoration: underline; }
.btn-report { color: var(--text-muted); }
.btn-report:hover { color: var(--danger); }
.btn-report-head { padding: 1px 4px; }  /* 닉네임 줄, 공감 왼쪽 */
.post-blind { color: var(--text-muted); font-style: italic; }
.report-count { font-size: 0.7rem; font-weight: 700; color: var(--danger); background: rgba(240,68,82,.12); padding: 0 6px; border-radius: 4px; }
.admin-tools { display: none; }
body.admin-mode .admin-tools { display: block; }

/* ── 하단 필수 페이지 링크 ───────────────────────── */
.policy-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 6px; }
.policy-links a { color: var(--text-muted); text-decoration: none; }
.policy-links a:hover { color: var(--accent); text-decoration: underline; }
.policy-links b { color: var(--text); }

/* ── 사이트 소개 · 약관 · 개인정보처리방침 · 연락처 페이지 ── */
a.logo { color: inherit; text-decoration: none; }
.page-nav { display: flex !important; }
.policy-page { max-width: 820px; padding-top: 28px; padding-bottom: 16px; line-height: 1.75; }
.policy-page h1 { font-size: 1.5rem; margin-bottom: 14px; }
.policy-page h2 { font-size: 1.08rem; margin: 26px 0 8px; }
.policy-page h3 { font-size: 0.95rem; margin: 14px 0 6px; }
.policy-page p, .policy-page li { font-size: 0.92rem; color: var(--text); }
.policy-page ul { padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.policy-lead { font-size: 1rem !important; }
.policy-meta { color: var(--text-muted) !important; font-size: 0.82rem !important; }
.policy-table { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 0.86rem; }
.policy-table th, .policy-table td { border: 1px solid var(--border); padding: 7px 10px; text-align: left; vertical-align: top; }
.policy-table th { background: var(--surface); }
.contact-form { display: flex; flex-direction: column; gap: 12px; margin: 18px 0; padding: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.contact-form label { display: flex; flex-direction: column; gap: 5px; font-size: 0.86rem; font-weight: 600; }
.contact-form .opt { font-weight: 400; color: var(--text-muted); font-size: 0.78rem; }
.contact-form select { padding: 8px 10px; }
.contact-form .btn-submit { align-self: flex-start; }
.contact-result { font-size: 0.86rem; color: var(--accent); }

/* ── 회원정보 ───────────────────────────────────── */
.profile-table .follow-chips { margin-top: 6px; }
.profile-section { padding: 16px 20px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.profile-section h3 { font-size: 0.92rem; }
.profile-section .post-form-row input { width: 170px; }

/* ── 홈 상단 제목 · 하단 전체 종목 링크 ─────────────── */
.hero { margin: 14px 0 0; }
.hero h1 { font-size: 1.05rem; font-weight: 800; }
.hero p { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; }
.seo-guide { margin-top: 36px; padding-top: 16px; border-top: 1px solid var(--border); }
.seo-guide h2 { font-size: 0.9rem; font-weight: 700; color: var(--text-muted); margin-bottom: 6px; }
.seo-guide p { font-size: 0.75rem; color: var(--text-muted); line-height: 1.6; margin-top: 4px; }
.sector-directory { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.sector-directory summary { cursor: pointer; font-size: 0.9rem; font-weight: 700; color: var(--text-muted); }
.sector-directory summary span { font-weight: 400; }
.sector-directory[open] summary { margin-bottom: 14px; color: var(--text); }
.dir-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 20px; }
.dir-sector h3 { font-size: 0.85rem; font-weight: 700; margin-bottom: 4px; }
.dir-sector h3 span { font-weight: 400; color: var(--text-muted); font-size: 0.75rem; }
.dir-sector ul { list-style: none; padding: 0; margin: 0; font-size: 0.75rem; line-height: 1.7; color: var(--text-muted); }
.dir-sector li { display: inline; }
.dir-sector li + li::before { content: " · "; }
.dir-sector a { color: var(--text-muted); text-decoration: none; }
.dir-sector a:hover { color: var(--accent); text-decoration: underline; }
@media (max-width: 760px) { .dir-grid { grid-template-columns: 1fr; } }

/* ── 종목 토론방 페이지 (/stock/{코드}) ─────────────── */
.stock-page { max-width: 880px; padding-top: 22px; padding-bottom: 12px; line-height: 1.7; }
.stock-page a { color: var(--accent); }
.breadcrumb { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 8px; }
.breadcrumb a { color: var(--text-muted); }
.stock-page h1 { font-size: 1.6rem; line-height: 1.3; }
.sp-sub { font-size: 0.82rem; color: var(--text-muted); margin-top: 4px; }
.sp-quote { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 14px 0 12px; }
.sp-price { font-size: 1.7rem; font-weight: 800; }
.sp-change { font-size: 1.05rem; font-weight: 700; }
.sp-time { font-size: 0.75rem; color: var(--text-muted); }
.stock-page .sp-cta { display: inline-block; color: #fff; text-decoration: none; padding: 10px 18px; }
.sp-disclaimer { margin: 12px 0 0; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface2); font-size: 0.8rem; color: var(--text-muted); }
.sp-intro { margin: 16px 0 4px; font-size: 0.9rem; color: var(--text-muted); }
.sp-section { margin-top: 26px; }
.sp-section h2 { font-size: 1.1rem; margin-bottom: 8px; }
.sp-section h2 span { font-size: 0.85rem; font-weight: 400; color: var(--text-muted); }
.sp-posts, .sp-news { list-style: none; padding: 0; margin: 0; }
.sp-posts li { padding: 10px 0; border-bottom: 1px solid var(--border); }
.sp-posts p { font-size: 0.9rem; white-space: pre-wrap; word-break: break-word; margin-top: 2px; }
.sp-post-head { font-size: 0.8rem; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.sp-post-head time { color: var(--text-muted); }
.sp-empty, .sp-note { font-size: 0.82rem; color: var(--text-muted); }
.sp-more { display: inline-block; margin-top: 8px; font-size: 0.86rem; font-weight: 600; }
.sp-info th { width: 34%; }
.sp-news li { padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 0.88rem; }
.sp-news li span { display: block; font-size: 0.74rem; color: var(--text-muted); }
.sp-news a { color: var(--text); text-decoration: none; }
.sp-news a:hover { color: var(--accent); }
.sp-peers { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.86rem; margin-bottom: 8px; }

/* 종목 카드(가로4:세로3): 윗줄(로고·주가) / 종목명·코드 / 시총·댓글 세 묶음을 카드 높이에 고르게 배치 (빈 공간이 한곳에 몰리지 않게) */
.stock-card:not(.sector-card) { justify-content: space-between; }
.stock-card:not(.sector-card) .stock-meta, .stock-card:not(.sector-card) .card-bottom { margin-top: 0; }
.stock-card:not(.sector-card) .stock-sub { margin-top: 3px; }

/* ── 조회수 ─────────────────────────────────────── */
.hero-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.site-stats { font-size: 0.74rem; color: var(--text-muted); white-space: nowrap; }
.site-stats b { color: var(--text); font-weight: 700; }
.post-views { font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; }

/* ── 종목·업종 토론 창: 전체 화면 (PC는 내용 폭 1000px로 가운데 정렬) ── */
#modal { width: 100%; max-width: none; height: 100vh; height: 100dvh; max-height: none; border-radius: 0; padding-inline: max(0px, calc((100vw - 1000px) / 2)); }
#modalOverlay { align-items: stretch; }
@media (max-width: 480px) { .write-ids { width: 100%; } .write-guest-label { width: 100%; } .write-ids input { flex: 1 1 120px; width: auto; min-width: 0; } }

/* 휴대폰 첫 화면: 주식 시장·업종 카드 + 종목 카드 2개(두 줄)가 한 번에 보이도록 위쪽 여백·크기를 조정
   주식 시장·업종 카드도 종목 카드와 같은 크기(4:3) — PC는 같은 줄 종목 카드에 맞춰 늘어나지만 휴대폰은 두 카드만 한 줄이라 작아졌음
   기본(갤럭시 울트라 등 세로 700px 이상)은 여유 있게, 세로가 짧은 폰(700px 미만, 아이폰 등)만 촘촘하게 */
@media (max-width: 480px) {
  .sector-card { aspect-ratio: 4 / 3; }
  .header-inner { padding: 9px 16px; gap: 8px 10px; }
  .login-dropdown { top: 112px; }
  .hero { margin-top: 12px; }
  .hero p { line-height: 1.45; margin-top: 3px; }
  .market-banner { margin: 12px 0 10px; gap: 7px; }
  .index-card { padding: 5px 9px; row-gap: 0; }
  .idx-name { font-size: 0.7rem; }
  .idx-value { font-size: 0.9rem; }
  .tab-bar { gap: 5px; margin-bottom: 12px; }
  .tab-bar .tab { padding: 5px 2px; font-size: 0.84rem; line-height: 1.2; }
  .tab-note { display: none; }  /* 업종 선정 기준 안내는 휴대폰에서 생략 (PC에서 표시) */
}
@media (max-width: 480px) and (max-height: 699px) {
  .header-inner { padding: 8px 16px; gap: 6px 10px; }
  .login-dropdown { top: 108px; }
  .hero { margin-top: 6px; }
  .hero p { line-height: 1.35; margin-top: 2px; }
  .market-banner { margin: 8px 0; gap: 6px; }
  .index-card { padding: 3px 8px; row-gap: 0; }
  .idx-name { font-size: 0.68rem; line-height: 1.3; }
  .idx-value { font-size: 0.88rem; line-height: 1.2; }
  .idx-change { line-height: 1.3; }
  .tab-bar { gap: 4px; margin-bottom: 8px; }
  .tab-bar .tab { padding: 3px 2px; font-size: 0.82rem; line-height: 1.15; }
}

/* ── 관리자: 화면 정보(사이트 통계) ── */
.stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 12px 0 4px; }
.stat-grid.small { grid-template-columns: repeat(5, minmax(0, 1fr)); padding-top: 4px; }
.stat-tile { background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; min-width: 0; }
.stat-label { font-size: 0.75rem; color: var(--text-muted); font-weight: 600; }
.stat-value { font-size: 1.35rem; font-weight: 800; margin-top: 2px; font-variant-numeric: tabular-nums; }
.stat-grid.small .stat-value { font-size: 1.05rem; }
.stat-sub { font-size: 0.7rem; color: var(--text-muted); margin-top: 1px; }
.stat-h { font-size: 0.9rem; font-weight: 700; margin: 18px 0 6px; }
.stat-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.stat-table th, .stat-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: right; }
.stat-table th { font-size: 0.75rem; color: var(--text-muted); font-weight: 600; }
.stat-table td:first-child, .stat-table th:first-child, .stat-table .stat-left { text-align: left; }
.stat-bar-cell { position: relative; }
.stat-bar { position: absolute; right: 0; top: 50%; transform: translateY(-50%); height: 60%; background: var(--accent); opacity: .18; border-radius: 3px; }
.stat-bar-cell span:last-child { position: relative; }
.stat-note { font-size: 0.72rem; color: var(--text-muted); margin: 14px 0 4px; line-height: 1.5; }
@media (max-width: 600px) { .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stat-grid.small { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stat-value { font-size: 1.15rem; } .stat-table th, .stat-table td { padding: 5px 4px; } }
.stat-wrap { padding: 0 20px 12px; }
@media (max-width: 600px) { .stat-wrap { padding: 0 14px 12px; } }

/* 운영자 칼럼 탭: 주식 시장 경제 게시판에서만 */
.modal:not(.market-mode) .modal-tabs .tab[data-tab="column"] { display: none; }

/* 운영자 칼럼: 제목 목록 · 본문 */
.col-list { display: flex; flex-direction: column; }
.col-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--border); text-align: left; width: 100%; }
.col-row:hover { background: var(--surface2); }
.col-title { font-weight: 700; font-size: 0.95rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col-meta { flex: 0 0 auto; font-size: 0.8rem; color: var(--text-muted); }
.col-article { padding: 14px 20px 18px; }
.col-back { margin-bottom: 10px; }
.col-article-title { font-size: 1.15rem; font-weight: 800; line-height: 1.4; margin-bottom: 8px; word-break: keep-all; }
.col-body { white-space: pre-wrap; line-height: 1.75; margin-top: 12px; }
#postTitle { font-weight: 700; }
.post-form #editTitle { width: 100%; margin-bottom: 8px; font-weight: 700; }
@media (max-width: 480px) { .col-row { padding: 12px 14px; flex-direction: column; align-items: flex-start; gap: 3px; } .col-title { white-space: normal; } .col-article { padding: 12px 14px 16px; } }
/* 칼럼 글 아래: 이전 글 · 목록으로 · 다음 글 */
.col-nav { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: stretch; margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--border); }
.col-nav-btn { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface2); text-align: left; }
.col-nav-btn.next { text-align: right; }
button.col-nav-btn:hover { border-color: var(--accent); }
.col-nav-btn.disabled { opacity: .45; }
.col-nav-label { font-size: 0.75rem; color: var(--text-muted); font-weight: 600; }
.col-nav-title { font-size: 0.9rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col-nav-list { padding: 0 16px; border-radius: 10px; background: var(--accent); color: #fff; font-weight: 700; font-size: 0.88rem; white-space: nowrap; }
@media (max-width: 480px) { .col-nav { grid-template-columns: 1fr 1fr; } .col-nav-list { grid-column: 1 / -1; grid-row: 2; padding: 10px; } .col-nav-title { font-size: 0.84rem; } }
.feed-col-title { font-weight: 800; font-size: 1rem; margin: 4px 0 6px; }
/* 정책 표: 칸이 많은 표(국외 이전)는 휴대폰에서 표 안에서만 옆으로 스크롤 */
@media (max-width: 600px) { .policy-table { display: block; max-width: 100%; overflow-x: auto; } .policy-table th, .policy-table td { min-width: 6.5em; overflow-wrap: anywhere; } }
/* 관리자 모드: 오른쪽 아래 '관리자 모드' 배지가 하단 관리자 버튼(신고된 글·문의 내역·화면 정보)을 가리지 않게 아래 여백
   배지는 토론·작성자 창(z-index 200·300)보다 아래라 창 내용도 가리지 않음 */
body.admin-mode .site-footer { padding-bottom: 76px; }
/* 운영자 칼럼 페이지 (/column, /column/{id}) */
.col-page h1 { margin-top: 6px; }
.col-page-body { margin-top: 18px; font-size: 1.02rem; line-height: 1.85; }
.col-page-body p { margin: 0 0 1.1em; }
.col-page-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--border); }
.col-page-list li { display: flex; justify-content: space-between; gap: 12px; padding: 11px 2px; border-bottom: 1px solid var(--border); }
.col-page-list li a { font-weight: 700; text-decoration: none; }
.col-page-list li span { flex: 0 0 auto; font-size: 0.8rem; color: var(--text-muted); }
.col-page-nav { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; margin-top: 22px; }
.col-page-nav > a, .col-page-nav > span { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface2); text-decoration: none; font-weight: 700; font-size: 0.9rem; min-width: 0; }
.col-page-nav > :last-child { text-align: right; }
.col-page-nav span span, .col-page-nav a span { font-size: 0.75rem; color: var(--text-muted); font-weight: 600; }
.col-page-nav .disabled { opacity: .45; }
.col-page-nav .col-page-list-link { justify-content: center; text-align: center; }
@media (max-width: 480px) { .col-page-nav { grid-template-columns: 1fr 1fr; } .col-page-nav .col-page-list-link { grid-column: 1 / -1; grid-row: 2; } .col-page-list li { flex-direction: column; gap: 2px; } }

/* 칼럼 목록 페이지 표시 (사이트 칼럼 탭 · /column 페이지 공통) */
.pager { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 6px; padding: 16px 12px 6px; }
.pager-btn, a.pager-btn { min-width: 36px; height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font-size: 0.9rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.pager-btn.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.pager-btn:disabled, .pager-btn.disabled { opacity: .35; cursor: default; pointer-events: none; }
.pager-gap { color: var(--text-muted); padding: 0 2px; }

/* 운영자 칼럼 본문 사진 */
.col-img { display: block; max-width: 100%; height: auto; margin: 12px auto; border-radius: 8px; }
.col-body .col-img { margin: 14px auto; }
.btn-col-img { margin-right: auto; }
.btn-col-img:disabled { opacity: .6; }
.stat-img .stat-grid.small { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 600px) { .stat-img .stat-grid.small { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.seo-guide a { color: var(--accent); }
/* 휴대폰: 로고 옆에 Home·블로그·Dark 세 버튼이 한 줄에 들어가게 버튼을 좁게 */
@media (max-width: 600px) {
  .header-inner { column-gap: 8px; }
  .main-nav a, .theme-toggle { width: 50px; padding: 6px 0; font-size: 0.76rem; letter-spacing: -0.02em; }
  .main-nav { gap: 4px; }
}
/* 389px 이하(갤럭시 울트라 384 등)는 50px 버튼이면 메뉴가 다음 줄로 밀림 → 44px */
@media (max-width: 389px) {
  .main-nav a, .theme-toggle { width: 44px; font-size: 0.72rem; }
  .main-nav { gap: 3px; }
}
.seo-guide a.guide-column-link { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
/* 하단 연락처 옆 운영자 칼럼: 굵게 · 파란색 · 밑줄 */
.policy-links a.footer-column-link, .policy-links a.footer-about-link { font-weight: 700; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
/* 시간외(장 마감 후·시작 전) 가격 표시 */
.session-tag { display: inline-block; margin-left: 4px; padding: 0 5px; border-radius: 4px; font-size: 0.68rem; font-weight: 700; color: var(--text-muted); background: var(--surface2); border: 1px solid var(--border); vertical-align: middle; }

/* 운영자 칼럼 보호: 글자 선택·길게 눌러 저장(아이폰)·사진 끌기 막기 (복사·오른쪽 버튼은 theme.js) */
.no-copy { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.no-copy img { -webkit-user-drag: none; user-drag: none; }
/* 헤더 '주식 강의'(4글자+공백)는 Home·Dark보다 길어 휴대폰에서는 글자 길이만큼 폭을 주고, 대신 Home·Dark를 좁혀 로고 옆 한 줄 유지 */
@media (max-width: 600px) {
  .main-nav a, .theme-toggle { width: 46px; }
  .main-nav a.nav-lecture { width: auto; padding-left: 6px; padding-right: 6px; letter-spacing: -0.04em; }
}
@media (max-width: 399px) {  /* 390(아이폰) 포함 */
  .main-nav a, .theme-toggle { width: 40px; }
  .main-nav a.nav-lecture { padding-left: 5px; padding-right: 5px; }
}
/* 헤더 '주식 강의': 빨간 바탕(로고 색) + 흰 글씨, 다크·라이트 공통 */
.main-nav a.nav-lecture { background: linear-gradient(135deg, #ff6a5c, #e02f4b); border-color: #e02f4b; color: #fff; font-weight: 700; }
@media (hover: hover) { .main-nav a.nav-lecture:hover { background: #e02f4b; border-color: #e02f4b; color: #fff; } }
/* 홈 화면 바로가기 버튼(📲): 휴대폰·태블릿(터치)만, PC에서는 숨김 */
.btn-a2hs { display: none; flex: none; width: 34px; height: 34px; border-radius: 50%; align-items: center; justify-content: center; font-size: 1.15rem; color: #fff; background: linear-gradient(135deg, #ff6a5c, #e02f4b); border: 1px solid #e02f4b; }
@media (max-width: 600px), (hover: none) and (pointer: coarse) { .btn-a2hs { display: inline-flex; } }
.a2hs-box { padding: 6px 4px 12px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.a2hs-icon { border-radius: 14px; box-shadow: 0 6px 18px rgba(224, 47, 75, .35); }
.a2hs-steps { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 10px; }
.a2hs-step { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface2); font-size: 0.92rem; line-height: 1.5; }
.a2hs-step > b { flex: none; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; font-size: 0.8rem; }
.a2hs-ico { display: inline-block; padding: 0 6px; border: 1px solid var(--border); border-radius: 6px; font-weight: 700; }
.a2hs-note { font-size: 0.92rem; line-height: 1.6; text-align: center; }
.a2hs-open { display: inline-block; padding: 10px 22px; }
/* 정책 페이지 제목 줄: 제목 + 오른쪽 '닫기'(운영자 칼럼 창 닫기 버튼과 같은 모양) */
.policy-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.policy-page .policy-head h1 { margin-bottom: 0; }

/* AI 운영자 실적 글 (토론글·종목 페이지 공용) */
.ai-headline { font-weight: 700; font-size: 1.02rem; margin: 2px 0 8px; line-height: 1.45; }
.ai-table-wrap { margin: 0 0 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ai-table-title { font-size: 0.82rem; font-weight: 700; margin-bottom: 4px; }
.ai-table-title span { font-weight: 400; color: var(--text-muted); margin-left: 4px; }
.ai-table { border-collapse: collapse; font-size: 0.82rem; white-space: nowrap; min-width: 100%; }
.ai-table th, .ai-table td { border: 1px solid var(--border); padding: 5px 8px; text-align: right; font-variant-numeric: tabular-nums; }
.ai-table thead th { background: var(--surface2); text-align: center; font-weight: 600; }
.ai-table tbody th { text-align: left; font-weight: 600; background: var(--surface); }
.ai-table td.up { color: var(--up); font-weight: 600; }
.ai-table td.down { color: var(--down); font-weight: 600; }
.ai-src { font-size: 0.76rem; color: var(--text-muted); margin-top: 8px; line-height: 1.5; }
.ai-src a { color: inherit; text-decoration: underline; }
.ai-detail > .btn-more { display: block; margin-top: 6px; }
/* 긴 토론글은 4줄까지만 (app.js postTextHtml · '더 보기'로 펼침) */
.post-body.clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
.ai-summary { font-size: 0.9rem; color: var(--text-muted); line-height: 1.5; }
.ai-detail { margin-top: 8px; }
.ai-detail .post-body { margin-top: 4px; }
/* 종목 페이지(서버 렌더링): 토론글 4줄, AI 글 표는 접어서 (내용은 HTML에 있어 검색엔진이 읽음) */
.sp-posts p.sp-clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
.sp-posts details.ai-more summary { cursor: pointer; font-size: 0.8rem; font-weight: 600; color: var(--accent); margin: 4px 0; }
.sp-posts details.ai-more[open] summary { margin-bottom: 8px; }
/* 휴대폰: 닉네임 줄이 한 줄을 넘지 않게 — 버튼 폭·간격을 줄이고, 긴 닉네임은 …으로 */
@media (max-width: 600px) {
  .post-header { flex-wrap: nowrap; gap: 4px; }
  .post-header > * { flex-shrink: 0; }
  .post-header .post-nick { flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .post-time, .post-views { font-size: 0.68rem; white-space: nowrap; }
  .vote-btns { gap: 3px; }
  .btn-vote, .btn-follow { min-width: 48px; height: 22px; padding: 0 4px; font-size: 0.68rem; letter-spacing: -0.04em; }
  .btn-vote b { margin-left: 1px; }
  .post-header .member-badge { font-size: 0.6rem; padding: 0 3px; }
  .btn-report-head { padding: 0 2px; font-size: 0.7rem; }
}