/* ─────────────────────────────────────────────────────    뉴스레이더 — 다크 콘솔 테마    레이더 관제 화면을 모티브로 한 어두운 배경 + 발광 액센트 구성.    마크업(클래스명)은 그대로 두고 스타일만 교체한다.    ───────────────────────────────────────────────────── */ :root {   /* 배경 층 */   --bg-0: #05070d;   --bg-1: #0a0f1a;   --surface: rgba(20, 27, 42, .72);   --surface-2: rgba(28, 37, 56, .66);   --surface-3: rgba(38, 49, 72, .55);    /* 선 */   --line: rgba(126, 155, 200, .16);   --line-2: rgba(126, 155, 200, .09);   --line-glow: rgba(94, 234, 255, .35);    /* 글자 */   --text: #e8eefb;   --text-2: #b3c1da;   --muted: #7c8ba6;    /* 액센트 */   --cyan: #4fe3ff;   --cyan-dim: rgba(79, 227, 255, .14);   --violet: #a78bfa;   --violet-dim: rgba(167, 139, 250, .14);   --mint: #34e2b0;   --mint-dim: rgba(52, 226, 176, .13);   --rose: #ff5c7a;   --rose-dim: rgba(255, 92, 122, .14);   --amber: #ffc44d;   --amber-dim: rgba(255, 196, 77, .14);    /* 의미 색 */   --accent: var(--cyan);   --alert: var(--rose);   --ok: var(--mint);   --warn: var(--amber);   /* 마크업에서 인라인으로 쓰는 범례 색 (해외/포스코/VC) */   --plum: var(--violet);   --teal: var(--mint);    --radius: 16px;   --radius-sm: 10px;   --shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 18px 44px rgba(0, 0, 0, .45);   --glow: 0 0 0 1px rgba(79, 227, 255, .22), 0 0 28px rgba(79, 227, 255, .16);    --sans: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR",           system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;   --mono: ui-monospace, SFMono-Regular, "JetBrains Mono", "Roboto Mono", Menlo, monospace; }  * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { color-scheme: dark; }  body {   min-height: 100vh;   background:     radial-gradient(1100px 620px at 12% -8%, rgba(79, 227, 255, .10), transparent 62%),     radial-gradient(900px 560px at 92% 4%, rgba(167, 139, 250, .11), transparent 60%),     radial-gradient(700px 520px at 60% 100%, rgba(52, 226, 176, .06), transparent 65%),     linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%);   background-attachment: fixed;   color: var(--text);   font-family: var(--sans);   font-size: 15px;   line-height: 1.58;   letter-spacing: -.005em;   -webkit-font-smoothing: antialiased;   text-rendering: optimizeLegibility; }  a { color: var(--cyan); text-decoration: none; transition: color .15s ease; } a:hover { color: #9defff; text-decoration: none; } h1, h2, h3 { margin: 0 0 .4em; line-height: 1.28; letter-spacing: -.022em; font-weight: 700; } h1 { font-size: 23px; } h2 { font-size: 17px; } h3 { font-size: 14.5px; } p { margin: 0 0 .8em; } small { color: var(--muted); } ::selection { background: rgba(79, 227, 255, .28); }  ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(126, 155, 200, .22); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: rgba(126, 155, 200, .38); background-clip: content-box; }  /* ------------------------------ 상단바 ------------------------------ */ .topbar {   position: sticky; top: 0; z-index: 40;   background: linear-gradient(180deg, rgba(10, 15, 26, .92), rgba(10, 15, 26, .72));   backdrop-filter: saturate(160%) blur(14px);   -webkit-backdrop-filter: saturate(160%) blur(14px);   border-bottom: 1px solid var(--line); } .topbar::after {   content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;   background: linear-gradient(90deg, transparent, rgba(79, 227, 255, .5), rgba(167, 139, 250, .4), transparent); } .topbar-inner {   max-width: 1320px; margin: 0 auto; padding: 12px 22px;   display: flex; align-items: center; gap: 22px; }  .brand { display: flex; align-items: center; gap: 11px; color: var(--text); } .brand:hover { color: var(--text); } .brand-mark {   width: 30px; height: 30px; border-radius: 50%; flex: none; position: relative;   border: 1.5px solid rgba(79, 227, 255, .55);   background:     radial-gradient(circle at 50% 50%, var(--cyan) 0 2.5px, transparent 3px),     conic-gradient(from 0deg, rgba(79, 227, 255, .42), transparent 32%);   box-shadow: 0 0 16px rgba(79, 227, 255, .35), inset 0 0 12px rgba(79, 227, 255, .18);   animation: sweep 3.6s linear infinite; } @keyframes sweep { to { transform: rotate(360deg); } } .brand-text { display: flex; flex-direction: column; line-height: 1.12; font-weight: 750; font-size: 16.5px; letter-spacing: -.02em; } .brand-text em {   font-style: normal; font-weight: 500; font-size: 10px; margin-top: 2px;   color: var(--muted); letter-spacing: .09em; text-transform: uppercase; }  .mainnav { display: flex; gap: 3px; flex-wrap: wrap; } .mainnav a {   position: relative; color: var(--text-2); padding: 8px 13px; border-radius: 10px;   font-size: 13.5px; font-weight: 550; white-space: nowrap; transition: all .16s ease; } .mainnav a:hover { color: var(--text); background: rgba(126, 155, 200, .10); } .mainnav a.on {   color: #041018; font-weight: 700;   background: linear-gradient(135deg, var(--cyan), #7cc8ff);   box-shadow: 0 4px 16px rgba(79, 227, 255, .32); }  .userbox { margin-left: auto; display: flex; align-items: center; gap: 12px; } .userchip {   display: flex; flex-direction: column; text-align: right; line-height: 1.25;   padding: 5px 12px; border-radius: 11px; border: 1px solid var(--line);   background: var(--surface-2); color: var(--text); transition: border-color .16s ease; } .userchip:hover { border-color: var(--line-glow); color: var(--text); } .userchip strong { font-size: 13px; font-weight: 650; } .userchip span { font-size: 10.5px; color: var(--muted); letter-spacing: .02em; }  .page { max-width: 1320px; margin: 0 auto; padding: 26px 22px 72px; } .foot { max-width: 1320px; margin: 0 auto; padding: 0 22px 36px; color: var(--muted); font-size: 11.5px; letter-spacing: .01em; }  /* ------------------------------ 카드 ------------------------------ */ .card {   background: var(--surface);   backdrop-filter: blur(16px) saturate(140%);   -webkit-backdrop-filter: blur(16px) saturate(140%);   border: 1px solid var(--line);   border-radius: var(--radius);   box-shadow: var(--shadow);   overflow: hidden; } .card + .card { margin-top: 16px; } .card-head {   padding: 15px 20px; border-bottom: 1px solid var(--line-2);   display: flex; align-items: center; gap: 12px; flex-wrap: wrap;   background: linear-gradient(180deg, rgba(255, 255, 255, .035), transparent); } .card-head h2 { margin: 0; } .card-head .spacer { margin-left: auto; } .card-body { padding: 18px 20px; }  /* ------------------------------ 버튼 ------------------------------ */ .btn {   display: inline-flex; align-items: center; justify-content: center; gap: 6px;   border: 1px solid transparent; border-radius: 11px;   background: linear-gradient(135deg, var(--cyan), #6db8ff);   color: #041018; padding: 9px 16px; font-size: 13.5px; font-weight: 700;   font-family: inherit; cursor: pointer; white-space: nowrap;   box-shadow: 0 6px 18px rgba(79, 227, 255, .26);   transition: transform .14s ease, box-shadow .18s ease, filter .18s ease; } .btn:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(79, 227, 255, .36); color: #041018; filter: brightness(1.04); } .btn:active { transform: translateY(0); } .btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; } .btn.ghost {   background: transparent; color: var(--text-2); border-color: var(--line); box-shadow: none; } .btn.ghost:hover { background: rgba(126, 155, 200, .12); color: var(--text); box-shadow: none; } .btn.neutral {   background: var(--surface-3); color: var(--text); border-color: var(--line); box-shadow: none; } .btn.neutral:hover { background: rgba(60, 76, 108, .7); color: var(--text); box-shadow: none; } .btn.danger {   background: linear-gradient(135deg, var(--rose), #ff8aa0); color: #2a0710;   box-shadow: 0 6px 18px rgba(255, 92, 122, .28); } .btn.danger:hover { color: #2a0710; box-shadow: 0 10px 26px rgba(255, 92, 122, .38); } .btn.sm { padding: 6px 11px; font-size: 12px; border-radius: 9px; } .btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }  /* ------------------------------ 입력 ------------------------------ */ input[type=text], input[type=email], input[type=password], input[type=number], input[type=search], select, textarea {   width: 100%; padding: 9px 12px;   border: 1px solid var(--line); border-radius: var(--radius-sm);   background: rgba(8, 13, 23, .6); color: var(--text);   font-family: inherit; font-size: 13.5px;   transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; } input::placeholder, textarea::placeholder { color: #5d6b84; } input:focus, select:focus, textarea:focus {   outline: none; border-color: rgba(79, 227, 255, .6);   box-shadow: 0 0 0 3px rgba(79, 227, 255, .14);   background: rgba(8, 13, 23, .85); } select option { background: #101725; color: var(--text); } label {   display: block; font-size: 10.5px; font-weight: 700; color: var(--muted);   margin-bottom: 5px; letter-spacing: .08em; text-transform: uppercase; } .field { margin-bottom: 14px; } .grid { display: grid; gap: 14px; } .grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .checkline { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-2); } .checkline input { width: auto; accent-color: var(--cyan); }  /* ------------------------------ 알림 배너 ------------------------------ */ .flash {   padding: 12px 15px; border-radius: var(--radius-sm); margin-bottom: 15px;   font-size: 13.5px; border: 1px solid; backdrop-filter: blur(8px); } .flash.ok { background: var(--mint-dim); border-color: rgba(52, 226, 176, .34); color: #7cf3ce; } .flash.bad { background: var(--rose-dim); border-color: rgba(255, 92, 122, .34); color: #ff9db0; }  /* ------------------------------ 태그·칩 ------------------------------ */ .tag {   display: inline-flex; align-items: center; gap: 4px;   font-size: 10.5px; font-weight: 700; letter-spacing: .04em;   padding: 3px 9px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; } .tag.global { background: var(--cyan-dim); color: #86e9ff; border-color: rgba(79, 227, 255, .3); } .tag.posco { background: var(--violet-dim); color: #c7b3ff; border-color: rgba(167, 139, 250, .3); } .tag.vc { background: var(--mint-dim); color: #6bf0c6; border-color: rgba(52, 226, 176, .3); } .tag.alert {   background: var(--rose-dim); color: #ff9db0; border-color: rgba(255, 92, 122, .38);   box-shadow: 0 0 14px rgba(255, 92, 122, .18); } .tag.mute { background: rgba(126, 155, 200, .10); color: var(--muted); border-color: var(--line); } .tag.ok { background: var(--mint-dim); color: #6bf0c6; border-color: rgba(52, 226, 176, .3); } .tag.warn { background: var(--amber-dim); color: #ffd483; border-color: rgba(255, 196, 77, .3); }  .chip {   font-size: 11px; font-weight: 550; border-radius: 7px; padding: 3px 8px;   background: rgba(126, 155, 200, .10); color: var(--text-2);   border: 1px solid var(--line-2); } .chip.hit { background: var(--amber-dim); color: #ffd483; border-color: rgba(255, 196, 77, .26); } .chip.ent { background: var(--violet-dim); color: #c7b3ff; border-color: rgba(167, 139, 250, .26); } .chip.firm { background: var(--mint-dim); color: #6bf0c6; border-color: rgba(52, 226, 176, .26); }  /* ------------------------------ 표 ------------------------------ */ table { width: 100%; border-collapse: collapse; font-size: 13px; } th, td { padding: 10px 12px; border-bottom: 1px solid var(--line-2); text-align: left; vertical-align: top; } th {   font-size: 10.5px; font-weight: 700; color: var(--muted);   letter-spacing: .08em; text-transform: uppercase;   background: rgba(10, 15, 26, .9); position: sticky; top: 0; backdrop-filter: blur(6px); } tbody tr { transition: background .12s ease; } tbody tr:hover td { background: rgba(126, 155, 200, .06); } .table-wrap { overflow-x: auto; } .nowrap { white-space: nowrap; }  /* ------------------------------ KPI ------------------------------ */ .kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; } .kpi {   position: relative; overflow: hidden;   background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);   padding: 16px 18px; box-shadow: var(--shadow);   backdrop-filter: blur(16px) saturate(140%);   -webkit-backdrop-filter: blur(16px) saturate(140%);   transition: transform .18s ease, border-color .18s ease; } .kpi:hover { transform: translateY(-2px); border-color: rgba(126, 155, 200, .3); } .kpi::before {   content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;   background: linear-gradient(90deg, var(--cyan), var(--violet));   opacity: .75; } .kpi .label { font-size: 10.5px; font-weight: 700; color: var(--muted); letter-spacing: .09em; text-transform: uppercase; } .kpi .value {   font-family: var(--mono); font-size: 30px; font-weight: 650; line-height: 1.15;   letter-spacing: -.03em; margin-top: 4px; font-variant-numeric: tabular-nums;   background: linear-gradient(135deg, #ffffff, #a8d8ff);   -webkit-background-clip: text; background-clip: text; color: transparent; } .kpi .sub { font-size: 11px; color: var(--muted); margin-top: 2px; } .kpi.alert::before { background: linear-gradient(90deg, var(--rose), var(--amber)); opacity: .9; } .kpi.alert .value { background: linear-gradient(135deg, #ffd0da, var(--rose)); -webkit-background-clip: text; background-clip: text; color: transparent; }  /* ------------------------------ 툴바·탭 ------------------------------ */ .toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .tabs {   display: inline-flex; padding: 4px; gap: 2px; border-radius: 12px;   background: rgba(8, 13, 23, .6); border: 1px solid var(--line); } .tabs button {   border: 0; background: transparent; padding: 7px 15px; border-radius: 9px; cursor: pointer;   font-family: inherit; font-size: 12.5px; font-weight: 650; color: var(--muted);   transition: all .15s ease; } .tabs button:hover { color: var(--text-2); } .tabs button.on {   color: #041018; background: linear-gradient(135deg, var(--cyan), #7cc8ff);   box-shadow: 0 3px 12px rgba(79, 227, 255, .3); } .toolbar .grow { flex: 1 1 220px; min-width: 180px; } .toolbar select { width: auto; min-width: 120px; max-width: 220px; } .toolbar .checkline { white-space: nowrap; }  /* ------------------------------ 뉴스 목록 ------------------------------ */ .newslist { display: flex; flex-direction: column; } .news {   position: relative;   display: grid; grid-template-columns: 62px 1fr auto; gap: 16px;   padding: 16px 20px; border-bottom: 1px solid var(--line-2); align-items: start;   transition: background .14s ease; } .news:last-child { border-bottom: 0; } .news:hover { background: rgba(126, 155, 200, .05); } .news.unread::before {   content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;   background: linear-gradient(180deg, transparent, rgba(79, 227, 255, .55), transparent); } .news.is-alert::before {   content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;   background: linear-gradient(180deg, transparent, var(--rose), transparent);   box-shadow: 0 0 16px rgba(255, 92, 122, .5); }  .news .score { text-align: center; padding-top: 1px; } .news .score b {   display: block; font-family: var(--mono); font-size: 21px; font-weight: 650;   letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--text); } .news .score .bar {   height: 3px; border-radius: 99px; background: rgba(126, 155, 200, .16);   overflow: hidden; margin-top: 5px; } .news .score .bar i {   display: block; height: 100%; border-radius: 99px;   background: linear-gradient(90deg, var(--cyan), #7cc8ff);   box-shadow: 0 0 10px rgba(79, 227, 255, .5); } .news.is-alert .score b { color: #ffb3c1; } .news.is-alert .score .bar i { background: linear-gradient(90deg, var(--rose), var(--amber)); box-shadow: 0 0 10px rgba(255, 92, 122, .55); }  .news .title { font-size: 15px; font-weight: 650; color: var(--text); line-height: 1.45; letter-spacing: -.015em; } .news .title:hover { color: var(--cyan); } .news.read .title { font-weight: 450; color: #8c9ab2; } .news .meta { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; font-size: 11.5px; color: var(--muted); margin-top: 6px; } .news .summary {   font-size: 12.5px; color: #9aa9c2; margin-top: 7px; line-height: 1.6;   display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .news .chips { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 9px; } .news .actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }  .iconbtn {   border: 1px solid var(--line); background: rgba(126, 155, 200, .06);   border-radius: 9px; padding: 5px 10px; font-size: 11.5px; font-weight: 550;   cursor: pointer; font-family: inherit; color: var(--muted); white-space: nowrap;   transition: all .15s ease; } .iconbtn:hover { border-color: rgba(79, 227, 255, .45); color: var(--cyan); background: var(--cyan-dim); } .iconbtn.on { background: var(--amber-dim); border-color: rgba(255, 196, 77, .45); color: #ffd483; }  .empty { padding: 64px 20px; text-align: center; color: var(--muted); font-size: 13.5px; } .pager { display: flex; gap: 10px; align-items: center; justify-content: center; padding: 18px; } .pager span { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }  /* ------------------------------ 추이 그래프 ------------------------------ */ .trend { display: flex; align-items: flex-end; gap: 5px; height: 96px; padding-top: 10px; } .trend .col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; min-width: 0; } .trend .col i { display: block; border-radius: 3px 3px 0 0; transition: filter .15s ease; } .trend .col:hover i { filter: brightness(1.35); } .trend .col i.global { background: linear-gradient(180deg, var(--cyan), rgba(79, 227, 255, .35)); } .trend .col i.posco { background: linear-gradient(180deg, var(--violet), rgba(167, 139, 250, .35)); } .trend .col i.vc { background: linear-gradient(180deg, var(--mint), rgba(52, 226, 176, .35)); } .trend .col span { font-size: 9px; color: #64728b; text-align: center; white-space: nowrap; overflow: hidden; } .legend { display: flex; gap: 14px; font-size: 11.5px; color: var(--muted); margin-top: 10px; } .legend b { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; }  .side { display: grid; grid-template-columns: 1fr 330px; gap: 16px; align-items: start; }  /* ------------------------------ 로그인 ------------------------------ */ .auth-wrap {   min-height: 100vh; display: grid; place-items: center; padding: 32px 16px;   background:     radial-gradient(900px 620px at 15% 10%, rgba(79, 227, 255, .16), transparent 60%),     radial-gradient(760px 560px at 85% 88%, rgba(167, 139, 250, .18), transparent 62%),     linear-gradient(165deg, #070c16 0%, #05070d 100%); } .auth-card {   width: 100%; max-width: 428px; padding: 34px 32px; border-radius: 22px;   background: rgba(18, 25, 40, .82);   backdrop-filter: blur(22px) saturate(150%);   -webkit-backdrop-filter: blur(22px) saturate(150%);   border: 1px solid var(--line);   box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 0 1px rgba(79, 227, 255, .08) inset; } .auth-card .logo { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; } .auth-card .logo b { font-size: 20px; font-weight: 750; letter-spacing: -.02em; } .auth-card .logo span { display: block; font-size: 11px; color: var(--muted); font-weight: 450; letter-spacing: .01em; } .auth-card .btn { width: 100%; margin-top: 8px; padding: 12px; font-size: 14px; } .auth-foot { margin-top: 18px; font-size: 12.5px; color: var(--muted); text-align: center; } .auth-note {   background: rgba(8, 13, 23, .5); border: 1px solid var(--line-2); border-radius: 12px;   padding: 11px 13px; font-size: 11.5px; color: var(--muted); margin-top: 16px; line-height: 1.6; }  /* ------------------------------ 모달 ------------------------------ */ .modal-backdrop {   position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px;   background: rgba(3, 6, 12, .74);   backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);   animation: fade .16s ease; } @keyframes fade { from { opacity: 0; } } .modal {   width: 100%; max-width: 680px; max-height: 86vh; overflow: auto; border-radius: 20px;   background: rgba(18, 25, 40, .95);   border: 1px solid var(--line);   box-shadow: 0 34px 90px rgba(0, 0, 0, .7);   animation: rise .2s cubic-bezier(.2, .8, .3, 1); } @keyframes rise { from { opacity: 0; transform: translateY(10px) scale(.985); } } .modal .modal-head { padding: 18px 22px; border-bottom: 1px solid var(--line-2); display: flex; gap: 12px; align-items: flex-start; } .modal .modal-body { padding: 18px 22px; } .modal .modal-foot { padding: 15px 22px; border-top: 1px solid var(--line-2); display: flex; gap: 8px; justify-content: flex-end; } .kv { display: grid; grid-template-columns: 104px 1fr; gap: 8px 14px; font-size: 13px; } .kv dt { color: var(--muted); font-weight: 650; font-size: 11.5px; letter-spacing: .03em; } .kv dd { margin: 0; color: var(--text-2); }  /* ------------------------------ 반응형 ------------------------------ */ @media (max-width: 1080px) {   .side { grid-template-columns: 1fr; }   .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }   .grid.c3, .grid.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) {   body { font-size: 14.5px; }   .page { padding: 18px 14px 56px; }   .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }   .kpi .value { font-size: 25px; }   .news { grid-template-columns: 50px 1fr; gap: 12px; padding: 14px; }   .news .actions { grid-column: 2; flex-direction: row; flex-wrap: wrap; }   .grid.c2, .grid.c3, .grid.c4 { grid-template-columns: 1fr; }   .topbar-inner { flex-wrap: wrap; gap: 10px; padding: 10px 14px; }   .userbox { margin-left: 0; }   .mainnav { order: 3; width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }   .card-head, .card-body { padding: 14px; } }  @media (prefers-reduced-motion: reduce) {   *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }   /* ── 눈부심 완화 오버레이 ────────────────────────────────────────────    네온 채도·발광(glow)·순백 대비를 낮춘 차분한 톤.    ------------------------------------------------------------------ */ :root {   --bg-0: #10141c;   --bg-1: #161b25;   --surface: rgba(31, 38, 50, .80);   --surface-2: rgba(40, 48, 63, .74);   --surface-3: rgba(52, 62, 80, .64);    --line: rgba(146, 163, 189, .15);   --line-2: rgba(146, 163, 189, .09);   --line-glow: rgba(146, 176, 205, .28);    --text: #d5dce7;   --text-2: #a6b1c2;   --muted: #7b8698;    --cyan: #83b4d4;   --cyan-dim: rgba(131, 180, 212, .12);   --violet: #a99ed3;   --violet-dim: rgba(169, 158, 211, .12);   --mint: #78bfa4;   --mint-dim: rgba(120, 191, 164, .11);   --rose: #d98d99;   --rose-dim: rgba(217, 141, 153, .12);   --amber: #d4b273;   --amber-dim: rgba(212, 178, 115, .12);    --shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 12px 30px rgba(0, 0, 0, .32); }  /* 배경 색번짐을 옅게 */ body {   background:     radial-gradient(1200px 680px at 12% -10%, rgba(131, 180, 212, .05), transparent 62%),     radial-gradient(900px 560px at 92% 4%, rgba(169, 158, 211, .045), transparent 60%),     linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%);   background-attachment: fixed; }  /* 발광 제거 */ .brand-mark { box-shadow: none; animation-duration: 9s; border-color: rgba(131, 180, 212, .4); } .topbar::after { background: linear-gradient(90deg, transparent, rgba(146, 163, 189, .25), transparent); } .btn { box-shadow: none; } .btn:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, .3); } .btn.danger, .btn.danger:hover { box-shadow: none; } .mainnav a.on, .tabs button.on { box-shadow: none; } .tag.alert { box-shadow: none; } .news.is-alert::before { box-shadow: none; } .news .score .bar i { box-shadow: none; } .news.unread::before { background: linear-gradient(180deg, transparent, rgba(131, 180, 212, .35), transparent); } input:focus, select:focus, textarea:focus {   border-color: rgba(131, 180, 212, .5);   box-shadow: 0 0 0 3px rgba(131, 180, 212, .10); }  /* 숫자 그라데이션 → 단색 (반짝임 제거) */ .kpi .value { background: none; color: var(--text); -webkit-text-fill-color: var(--text); } .kpi.alert .value { background: none; color: #e2a3ac; -webkit-text-fill-color: #e2a3ac; } .kpi::before { opacity: .45; } .kpi.alert::before { opacity: .55; }  /* 강조 버튼·탭을 평평하게 */ .btn { background: #7ea9c6; color: #0d1119; } .btn:hover { background: #8db6d1; color: #0d1119; } .btn.danger { background: #c98692; color: #1b0d10; } .mainnav a.on, .tabs button.on { background: #7ea9c6; color: #0d1119; } .news .score .bar i { background: #7ea9c6; } .news.is-alert .score .bar i { background: #c98692; } .news.is-alert .score b { color: #dda3ac; } 

/* ══════════════════════════════════════════════════════════════════
   형제 정렬 — 딜 레이더 언어를 파랑으로                    2026-08-28
   ──────────────────────────────────────────────────────────────────
   딜 레이더가 잡은 방향은 한 줄로 요약된다.
     "초록을 넓게 칠하지 않는다. 흰 바탕 · 굵은 검정 · 초록 한 점."
   같은 언어를 쓰되 색만 파랑으로 바꾼다. 나란히 놓으면 한 집안이고,
   열자마자 어느 쪽인지 안다.

   문법
     · 상자와 그림자를 지운다. 여백과 실선 한 줄로 나눈다.
     · 숫자는 크게 굵게, 라벨은 작게 넓은 자간으로.
     · 강조색은 하나. 나머지는 검정과 회색.
     · 분류색(포스코·VC)은 남긴다 — 장식이 아니라 데이터 구분이다.

   ★ 이 파일이 css_override 전부다.
     앞서 쓰던 다크 오버레이는 !important 를 146곳에 박아 두어, 뒤에 무엇을
     얹어도 눌러 버렸다. 색을 바꾸려면 그 위에 또 !important 를 146번 쌓아야
     한다. 그래서 걷어내고 새로 쓴다. 옛 파일은 저장소에 남아 있다
     (assets/css-override-2026-08-27-dark.css).
   ══════════════════════════════════════════════════════════════════ */

/* 상단바는 한 줄이다. 셋의 역할을 분명히 나눈다 —
   브랜드와 사용자 영역은 제 크기를 지키고, 가운데 메뉴만 줄었다 늘었다 한다.
   이걸 안 정해 두면 이름이 세로로 쪼개지고 메뉴 글자가 잘린다. */
.topbar-inner{ flex-wrap:nowrap; gap:16px; align-items:center; padding:13px 20px }
.brand{ flex:none }
.mainnav{
  flex:1 1 auto; min-width:0; gap:2px;
  flex-wrap:nowrap; white-space:nowrap; overflow-x:auto; scrollbar-width:none;
}
.mainnav::-webkit-scrollbar{ display:none }
.mainnav a{ white-space:nowrap; flex:none }
.userbox{ flex:none; gap:8px; margin-left:0 }
.userchip{
  flex-direction:row; align-items:baseline; gap:5px; white-space:nowrap; text-align:left;
}
/* 한글은 단어 중간에서 끊기면 읽기 어렵다. 소통방은 폭이 좁아 특히 그렇다. */
#nr-c-body *{ word-break:keep-all; overflow-wrap:anywhere }

:root{
  /* 바탕 */
  /* ★ 바탕(--page)과 표면(--wash)은 다른 색이다.
     딜 레이더가 옅은 초록 바탕 위에 흰 카드를 얹는 것과 같은 문법을 파랑으로 쓴다.
     한 토큰으로 묶어 두면 바탕을 칠하는 순간 카드까지 물든다 — 그래서 뗀다. */
  --page:#EAF1FA;
  --wash:#FFFFFF; --sunk:#F3F5F9; --edge:#E2E6EE;
  /* 글자 — 순검정은 쓰지 않는다. 흰 바탕 위에서 값싸 보이고 눈이 아프다.
     딜 레이더는 #000 을 쓰지만 거긴 큰 글씨가 적다. 여긴 목록이 빽빽하다. */
  --ink:#0E1116; --sub:#39404A; --dim:#6C7480; --faint:#98A0AC;
  /* 강조 — 딜 레이더의 초록 자리.
     그 초록은 진하지만 답답하지 않다. 같은 성격의 파랑을 쓴다.
     남색으로 내리면 무거워지고, 하늘색으로 올리면 가벼워진다. */
  --blue:#1668E3; --blue-deep:#0F51B5; --blue-wash:#EAF2FE;

  /* 기존 토큰을 위 값으로 다시 묶는다. 나머지 화면은 따라온다. */
  --bg-0:var(--wash); --bg-1:var(--wash);
  --surface:var(--wash); --surface-2:var(--sunk); --surface-3:#EDF1F7;
  --line:rgba(0,0,0,.09); --line-2:rgba(0,0,0,.055); --line-glow:rgba(11,87,196,.35);
  --text:var(--ink); --text-2:var(--sub); --muted:var(--dim);
  /* 쓰는 색은 넷뿐이다 — 파랑 · 보라 · 먹 · 빨강(알림 전용).
     분류 셋(국내외·포스코·VC)은 구분이 필요하니 파랑·보라·먹으로 나눈다.
     청록과 주황은 뺐다. 색이 늘수록 화면이 시끄러워진다. */
  --violet:#5B4BC4;         --violet-dim:#EEECFB;
  --slate:#3A4552;          --slate-dim:#EDEFF3;
  --rose:#D0342B;           --rose-dim:#FBEAE8;
  --cyan:var(--blue);       --cyan-dim:var(--blue-wash);
  --mint:var(--slate);      --mint-dim:var(--slate-dim);
  --amber:var(--dim);       --amber-dim:var(--sunk);
  --accent:var(--blue); --alert:var(--rose); --ok:var(--mint); --warn:var(--amber);
  --radius:20px; --radius-sm:12px;
  --shadow:none; --glow:none;
}

html{ color-scheme:light }
html,body{ background:var(--page)!important; color:var(--sub)!important }
body{ background-image:none!important; letter-spacing:-.006em }

/* ── 상단바 — 흰 바탕에 실선 하나. 색을 쓰지 않는다 ───────────────── */
.topbar{
  background:rgba(255,255,255,.92);
  border-bottom:1px solid var(--line); box-shadow:none;
}
.topbar::after{ display:none }
.brand,.brand:hover{ color:var(--ink) }
/* 마크 — 파란 원 안에서 레이더가 돈다.
   딜 레이더가 초록 원에 번개를 넣은 그 자리다. 이쪽은 이름이 레이더니
   스윕이 돌아야 한다. 원과 중심점은 고정이고 부채꼴만 회전한다.
   빛나게 하지는 않는다 — 상단에서 계속 반짝이면 본문을 못 읽는다. */
.brand-mark{
  position:relative; overflow:hidden;
  background:var(--blue)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.4' stroke-opacity='.7'/%3E%3Ccircle cx='12' cy='12' r='4.2' stroke-opacity='.45'/%3E%3Ccircle cx='12' cy='12' r='1.8' fill='%23ffffff' stroke='none'/%3E%3C/svg%3E")
    center / 17px 17px no-repeat;
  border:0; box-shadow:none; animation:none;
  width:26px; height:26px; border-radius:50%;
}
.brand-mark::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from 0deg, rgba(255,255,255,.85), rgba(255,255,255,0) 26%);
  animation:nrsweep 3.4s linear infinite;
}
@keyframes nrsweep{ to{ transform:rotate(360deg) } }
@media (prefers-reduced-motion: reduce){
  .brand-mark::after{ animation:none; opacity:.3 }
}
.brand-text{ color:var(--ink); font-weight:800; font-size:17px; letter-spacing:-.04em }
.brand-text em{ color:var(--dim); font-weight:500; font-size:11.5px; letter-spacing:-.01em; margin-top:2px }

/* 메뉴 — 눌린 것만 파란 알약. 나머지는 먹색 글씨. 회색으로 흐리면
   메뉴가 아니라 안내문처럼 보인다. */
.mainnav a{ color:var(--sub); font-weight:600; font-size:14px; border-radius:999px; padding:9px 16px }
.mainnav a:hover{ color:var(--ink); background:var(--sunk) }
.mainnav a.on{ background:var(--blue); color:#fff; box-shadow:none; font-weight:700 }

.userchip{ background:none; border:0; color:var(--dim); padding:0 }
.userchip:hover{ border:0; color:var(--ink) }
.userchip strong{ color:var(--ink); font-weight:700 }
.userchip span{ color:var(--faint) }

/* ── 숫자 — 반듯한 상자 ──────────────────────────────────────────────
   딜 레이더의 그룹 상자와 같은 처리다. 흰 면, 실선 한 겹, 모서리 12px.
   그림자·색띠·떠오르는 효과는 전부 뺀다.
   라벨은 맨 위, 숫자는 맨 아래에 붙인다. 라벨 길이가 제각각이라
   (「최근 24시간 감지」 vs 「VC 동향 (7일)」) 붙여 쓰면 숫자 높이가
   어긋난다. 다섯 숫자가 같은 선에 서야 가로로 훑을 때 걸리지 않는다. */
/* 「알림」은 뺀다. 물량 카드 넷 사이에 성격이 다른 숫자 하나가 끼어 있어
   무엇을 재는 값인지 읽히지 않았다. 필요해지면 이 두 줄만 지우면 돌아온다. */
.kpi.alert{ display:none }
.kpis{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:24px }

/* 한 칸은 딱 두 줄이다 — 무엇을 세는지, 몇 건인지. 그 이상은 군더더기다. */
.kpi .sub{ display:none }
.kpi{
  min-height:96px; display:flex; flex-direction:column; justify-content:space-between;
  background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:none;
  padding:14px 17px 15px; transform:none; overflow:hidden;
}
.kpi:hover{ transform:none; background:var(--sunk); border-color:var(--edge) }
.kpi::before{ display:none }
.kpi .label{
  color:var(--dim); font-size:12px; font-weight:700; letter-spacing:-.01em;
  line-height:1.35; text-transform:none;
}
.kpi .value{
  font-family:inherit; background:none; color:var(--ink); -webkit-text-fill-color:var(--ink);
  font-size:clamp(30px,2.8vw,44px); font-weight:800; letter-spacing:-.055em;
  margin:auto 0 0; line-height:.98;
}
.kpi.alert .value{ color:var(--rose); -webkit-text-fill-color:var(--rose) }

/* ── 블록 — 흰 면에 실선 한 겹 ────────────────────────────────────── */
.card{
  background:#fff; border:1px solid var(--line); border-radius:14px;
  box-shadow:none; overflow:hidden;
}
.card + .card{ margin-top:16px }
.card-head{
  background:none; border-bottom:1px solid var(--line-2);
  padding:14px 18px;
}
.card-body{ padding:16px 18px }
/* 제목 앞에 점 하나. 딜 레이더가 「● 현재 접속 현황」으로 쓰는 그 자리다.
   대문자 라벨보다 한글에 잘 맞고, 훑을 때 시작점이 분명해진다. */
.card-head h2, h2{
  font-size:13.5px; font-weight:700; letter-spacing:-.02em;
  color:var(--ink); text-transform:none;
  display:flex; align-items:center; gap:7px;
}
.card-head h2::before, h2::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--blue); flex:none;
}
h1{ color:var(--ink); font-weight:800; letter-spacing:-.045em }
h3{ color:var(--ink); font-weight:700; letter-spacing:-.02em }
.page{ max-width:1320px; padding:26px 22px 80px }
.foot{ color:var(--faint) }
a{ color:var(--blue) } a:hover{ color:var(--blue-deep) }

/* ── 버튼 — 알약. 주버튼은 자간을 넓게 ───────────────────────────── */
.btn{
  background:var(--blue); color:#fff; border:0; border-radius:999px;
  padding:11px 22px; font-size:12.5px; font-weight:700; letter-spacing:.08em;
  box-shadow:none; transform:none;
}
.btn:hover{ background:var(--blue-deep); color:#fff; box-shadow:none; transform:none; filter:none }
.btn.ghost{ background:transparent; color:var(--dim); border:1px solid var(--edge) }
.btn.ghost:hover{ background:var(--sunk); color:var(--ink) }
.btn.neutral{ background:transparent; color:var(--ink); border:1px solid var(--edge) }
.btn.neutral:hover{ background:var(--sunk); color:var(--ink); border-color:var(--ink) }
/* 삭제는 빨간 덩어리로 두지 않는다. 목록에 여러 개가 늘어서면 그것부터
   눈에 들어온다. 평소엔 조용히 두고 손을 올렸을 때만 붉어지게 한다. */
.btn.danger{ background:transparent; color:var(--rose); border:1px solid var(--rose-dim) }
.btn.danger:hover{ background:var(--rose); color:#fff; border-color:var(--rose) }

/* 기사 평가 줄 — 화면 코드가 색을 직접 박아 둔 자리라 여기서 덮는다. */
.nrfb span{ color:var(--faint)!important }
.nrfb button{ border-color:var(--edge)!important; color:var(--dim)!important }
.btn.sm{ padding:7px 14px; font-size:11.5px; letter-spacing:.05em }

.iconbtn{
  background:transparent; border:1px solid var(--edge); border-radius:999px;
  color:var(--dim); padding:5px 12px; font-size:11.5px; font-weight:600;
}
.iconbtn:hover{ border-color:var(--blue); color:var(--blue); background:var(--blue-wash) }
.iconbtn.on{ background:var(--blue-wash); border-color:var(--blue); color:var(--blue-deep) }

/* ── 입력 — 면만 회색으로 눌러준다 ───────────────────────────────── */
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=search],select,textarea{
  background:var(--sunk); border:1px solid transparent; border-radius:10px;
  color:var(--ink); font-size:13.5px; padding:10px 13px;
}
input::placeholder,textarea::placeholder{ color:var(--faint) }
input:focus,select:focus,textarea:focus{
  background:#fff; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-wash);
}
select option{ background:#fff; color:var(--ink) }
label{ color:var(--dim); letter-spacing:.08em }
.checkline{ color:var(--sub) }
.checkline input{ accent-color:var(--blue) }

.tabs{ background:var(--sunk); border:0; border-radius:999px; padding:3px }
.tabs button{ color:var(--dim); border-radius:999px; font-weight:650 }
.tabs button:hover{ color:var(--ink) }
.tabs button.on{ background:var(--blue); color:#fff; box-shadow:none }

/* ── 태그·칩 — 테두리를 지우고 옅은 면만 ─────────────────────────── */
.tag{ border:0; font-weight:700; letter-spacing:.03em }
.tag.global{ background:var(--blue-wash); color:var(--blue-deep) }
.tag.posco { background:var(--violet-dim); color:var(--violet) }
.tag.vc    { background:var(--mint-dim);   color:var(--mint) }
.tag.alert { background:var(--rose-dim);   color:var(--rose); box-shadow:none }
.tag.mute  { background:var(--sunk);       color:var(--dim) }
.tag.ok    { background:var(--mint-dim);   color:var(--mint) }
.tag.warn  { background:var(--amber-dim);  color:var(--amber) }
/* 칩은 알약. 딜 레이더의 그룹원 칩과 같은 모양이다. */
.chip{ background:var(--sunk); color:var(--sub); border:0; border-radius:999px; padding:3px 10px }
.chip.hit{ background:var(--amber-dim); color:var(--amber) }
.chip.ent{ background:var(--violet-dim); color:var(--violet) }
.chip.firm{ background:var(--mint-dim); color:var(--mint) }

/* ── 뉴스 목록 — 여기만 선을 남긴다 ──────────────────────────────────
   본문이 빽빽한 목록이라 상자를 전부 지우면 줄 구분이 흐려진다.
   딜 레이더의 결과 화면과 같은 처리다. */
.news{ border-bottom:1px solid var(--line-2); padding:16px 18px }
.news:hover{ background:var(--sunk) }
.news.unread::before{ background:var(--blue) }
.news.is-alert::before{ background:var(--rose); box-shadow:none }
.news .score b{ font-family:inherit; color:var(--ink); font-weight:800; letter-spacing:-.05em; font-size:22px }
.news .score .bar{ background:var(--edge) }
.news .score .bar i{ background:var(--blue); box-shadow:none }
.news.is-alert .score b{ color:var(--rose) }
.news.is-alert .score .bar i{ background:var(--rose) }
.news .title{ color:var(--ink); font-weight:700; letter-spacing:-.022em }
.news .title:hover{ color:var(--blue) }
.news.read .title{ color:var(--dim); font-weight:500 }
.news .meta{ color:var(--faint) }
.news .summary{ color:var(--sub) }
.empty{ color:var(--faint) }
.pager span{ color:var(--dim) }

/* 표 */
th{ background:var(--wash); color:var(--faint); letter-spacing:.1em }
tbody tr:hover td{ background:var(--sunk) }

/* 추이 그래프 — 분류색은 데이터라 남긴다. 그라데이션만 걷어낸다 */
.trend .col i.global{ background:var(--blue) }
.trend .col i.posco { background:var(--violet) }
.trend .col i.vc    { background:var(--mint) }
.trend .col span{ color:var(--faint) }
.legend{ color:var(--dim) }

.flash{ border-radius:12px; backdrop-filter:none; border:0 }
.flash.ok { background:var(--blue-wash); color:var(--blue-deep) }
.flash.bad{ background:var(--rose-dim); color:var(--rose) }

/* ── 로그인·가입 — 딜 레이더 카드와 같은 구성 ────────────────────── */
.auth-wrap{ background:var(--page); padding:24px }
.auth-card{
  background:#fff; border:1px solid var(--edge); border-radius:16px;
  box-shadow:none; max-width:412px; padding:36px 34px;
}
.auth-card .logo{ margin-bottom:20px }
.auth-card .logo b{ font-size:19px; font-weight:800; letter-spacing:-.05em; color:var(--ink) }
.auth-card .logo span{ color:var(--dim); font-size:12px; letter-spacing:0; text-transform:none }
.auth-card h1{ font-size:28px; font-weight:800; letter-spacing:-.05em; line-height:1.08 }
.auth-card .btn{ width:100%; margin-top:10px; padding:14px; font-size:13.5px; border-radius:12px }
.auth-card label{ font-size:12.5px; font-weight:600; color:var(--ink); letter-spacing:0; text-transform:none }
.auth-foot{ color:var(--dim); font-size:12.5px; margin-top:20px }
.auth-note{
  background:var(--sunk); border:0; border-radius:12px;
  color:var(--dim); font-size:11.5px; line-height:1.65; margin-top:16px;
}

/* 이메일 앞자리 + 붙박이 도메인.
   도메인은 고정이라 입력칸이 아니라 꼬리표다. 칸처럼 보이면 지우려 든다. */
.mailrow{
  display:flex; align-items:stretch; margin:0;
  border:1px solid transparent; border-radius:10px; overflow:hidden; background:var(--sunk);
}
.mailrow:focus-within{ background:#fff; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-wash) }
.mailrow input{ flex:1; min-width:0; margin:0; border:0; border-radius:0; background:none }
.mailrow input:focus{ outline:none; box-shadow:none; background:none }
.mailrow span{
  display:flex; align-items:center; padding:0 13px; white-space:nowrap;
  font-size:13px; color:var(--faint); background:rgba(0,0,0,.03);
  border-left:1px solid var(--edge);
}

/* 모달 */
.modal{ background:#fff; border:1px solid var(--edge); box-shadow:0 24px 60px rgba(0,0,0,.14) }
.modal-backdrop{ background:rgba(255,255,255,.72) }
.kv dt{ color:var(--faint); letter-spacing:.08em }
.kv dd{ color:var(--sub) }

/* ── 좌우 패널 — 본문과 같은 흰 면 위에 실선으로 나눈다 ─────────── */
#nr-left{
  background:#fff!important; border-right:1px solid var(--line)!important;
  box-shadow:none!important;
}
#nr-left>div:first-child{ background:#fff!important; border-bottom:1px solid var(--line)!important }
#nr-left>div:last-child{ background:#fff!important; border-top:1px solid var(--line)!important }
#nr-left h3,#nr-left b,#nr-left strong{ color:var(--ink)!important }
#nr-c-body{ background:#fff!important }
#nr-left [data-mid] div[style*="background:#1a2338"]{
  background:var(--sunk)!important; border-color:transparent!important; color:var(--ink)!important;
}
#nr-left [data-mid] div[style*="background:#3881f9"]{ background:var(--blue)!important; color:#fff!important }
#nr-c-in{ background:var(--sunk)!important; border-color:transparent!important; color:var(--ink)!important }
#nr-c-send{ background:var(--blue)!important; border-color:var(--blue)!important; color:#fff!important }
/* 패널 접기 손잡이 — 파랑을 여기까지 쓰면 강조가 흩어진다.
   기능은 있되 눈에 먼저 들어올 이유가 없는 것은 회색으로 둔다. */
.nrx-tab{
  background:var(--sunk)!important; color:var(--dim)!important;
  border:1px solid var(--line)!important;
}
.nrx-tab:hover{ background:var(--edge)!important; color:var(--ink)!important }
#nr-newver{ background:var(--ink)!important; border-color:transparent!important; color:#fff!important }

/* ── 다크 — 딜 레이더와 같은 자리에 같은 스위치를 둔다 ──────────── */
/* 다크는 아직 켜두지 않는다. 지금은 흰 바탕이 기본이다.
   data-theme="dark" 가 붙는 순간 아래가 살아난다. */
  :root[data-theme="dark"]{
    --page:#0A0C10; --wash:#101419; --sunk:#151A21; --edge:#232A34;
    --ink:#FFFFFF; --sub:#C6CDD6; --dim:#8A93A0; --faint:#646C78;
    --blue:#5AA0FF; --blue-deep:#3E84E6; --blue-wash:#0F1E30;
    --surface-3:#1B222B;
    --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.06);
    --violet:#A99ED3; --violet-dim:#1A1730;
    --mint:#5EC7AE;   --mint-dim:#0D2521;
    --rose:#FF7A63;   --rose-dim:#2B1310;
    --amber:#E3C75A;  --amber-dim:#241E0C;
  }
  :root[data-theme="dark"] .topbar{ background:rgba(10,12,16,.92) }
  :root[data-theme="dark"] .auth-card,
  :root[data-theme="dark"] .modal{ background:#101319 }
  :root[data-theme="dark"] .modal-backdrop{ background:rgba(0,0,0,.7) }
  :root[data-theme="dark"] .btn,
  :root[data-theme="dark"] .mainnav a.on,
  :root[data-theme="dark"] .tabs button.on{ color:#08101C }
  :root[data-theme="dark"] .mailrow span{ background:rgba(255,255,255,.04) }
  :root[data-theme="dark"] #nr-left,
  :root[data-theme="dark"] #nr-left>div:first-child,
  :root[data-theme="dark"] #nr-left>div:last-child,
  :root[data-theme="dark"] #nr-c-body{ background:#101319!important }
  :root[data-theme="dark"] #nr-newver{ background:#1B222B!important }

/* ══════════════════════════════════════════════════════════════════
   압축 패스 — 글자와 상자를 줄인다                          2026-08-30
   ──────────────────────────────────────────────────────────────────
   흰 바탕으로 바꾸면서 여백을 넉넉히 잡았더니 한 화면에 들어오는 기사가
   줄었다. 그룹장님들은 훑으러 오는 화면이다. 한 눈에 더 많이 보여야 한다.
   비율은 그대로 두고 눈금만 한 단계씩 내린다.
   ══════════════════════════════════════════════════════════════════ */

body{ font-size:13.5px }

/* ── 상단바 ─────────────────────────────────────────────────────────
   ★ 이름·아이콘은 화면 코드가 인라인으로 흰색을 박아 두었다.
     어두운 배경을 전제로 쓴 값이라, 흰 바탕에서는 글자가 사라진다.
     인라인은 CSS 로 이길 수 없으니 여기서만 !important 를 쓴다. */
/* 본문은 촘촘하게, 상단바는 여유 있게. 딜 레이더가 그렇다.
   머리를 같이 눌러 버리면 형제가 아니라 다른 물건이 된다. */
.topbar-inner{ padding:13px 20px; gap:16px }
/* 브랜드 뒤 세로선 — 딜 레이더가 이름과 메뉴를 나누는 그 선이다 */
.brand{ padding-right:18px; border-right:1px solid var(--line) }
.brand-text{ font-size:16.5px; white-space:nowrap }
.brand-text em{ font-size:11px; white-space:nowrap }
@media (max-width:1100px){ .brand{ border-right:0; padding-right:0 } .brand-text em{ display:none } }
.mainnav{ gap:3px }
.mainnav a{ font-size:13.5px; padding:8px 15px }
.userbox{ gap:9px }

/* 이름 — 인라인 흰색을 먹색으로 되돌린다 */
.userbox > a:not([title]){ color:var(--ink)!important; font-size:13.5px!important; font-weight:700!important }
.userbox > a:not([title]):hover{ color:var(--blue)!important }

/* 내 정보·로그아웃 — 딜 레이더는 아이콘이 아니라 글자 알약이다.
   마크업을 고치지 않고도 맞출 수 있다. 아이콘을 감추고 title 을 꺼내 쓴다.
   손이 없는 사람(스크린리더)에게는 원래 title 이 읽히던 자리라 손해도 없다. */
.userbox a[title], .userbox button[title]{
  width:auto!important; height:auto!important; border-radius:999px!important;
  padding:6px 14px!important; font-size:11.5px!important; font-weight:600!important;
  background:transparent!important; border:1px solid var(--edge)!important;
  color:var(--dim)!important; font-family:inherit!important;
}
.userbox a[title] svg, .userbox button[title] svg{ display:none!important }
.userbox a[title]::after, .userbox button[title]::after{ content:attr(title) }
.userbox a[title]:hover, .userbox button[title]:hover{
  color:var(--ink)!important; border-color:var(--ink)!important;
}

/* LIVE — 흰 바탕에서도 읽히게 낮추고, 점은 다시 뛰게 한다 */
.userbox > span[style*="4ade80"]{
  background:#E9F6EE!important; color:#0C7A3E!important;
  border-color:#C3E4CF!important; font-size:10.5px!important; padding:3px 9px!important;
}
.userbox > span[style*="4ade80"] > span{ background:#12A150!important }
@keyframes nrLive{
  0%,100%{ opacity:1; box-shadow:0 0 0 0 rgba(18,161,80,.45) }
  50%    { opacity:.35; box-shadow:0 0 0 4px rgba(18,161,80,0) }
}
.userbox > span[style*="4ade80"] > span{ animation:nrLive 1.5s ease-in-out infinite!important }
@media (prefers-reduced-motion: reduce){
  .userbox > span[style*="4ade80"] > span{ animation:none!important }
}

/* ── 숫자 칸 ─────────────────────────────────────────────────────── */
.kpis{ gap:8px; margin-bottom:16px }
.kpi{ min-height:66px; padding:10px 13px 11px; border-radius:10px }
.kpi .label{ font-size:11px; line-height:1.25 }
.kpi .value{ font-size:clamp(24px,1.9vw,30px); letter-spacing:-.045em }

/* ── 블록 ───────────────────────────────────────────────────────── */
.page{ padding:16px 16px 56px }
.card{ border-radius:11px }
.card + .card{ margin-top:12px }
.card-head{ padding:9px 13px }
.card-body{ padding:12px 13px }
.card-head h2, h2{ font-size:12.5px; gap:6px }
.card-head h2::before, h2::before{ width:5px; height:5px }
h1{ font-size:19px }
h3{ font-size:13px }
.grid{ gap:10px }
.side{ gap:12px }

/* ── 버튼·입력 ──────────────────────────────────────────────────── */
.btn{ padding:7px 15px; font-size:11.5px; letter-spacing:.05em }
.btn.sm{ padding:5px 11px; font-size:11px }
.iconbtn{ padding:3px 9px; font-size:10.5px }
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=search],select,textarea{ padding:6px 10px; font-size:12.5px; border-radius:9px }
.tabs button{ padding:5px 12px; font-size:12px }
.checkline{ font-size:12px }
label{ font-size:11px }
.toolbar{ gap:8px }

/* ── 기사 목록 ──────────────────────────────────────────────────── */
.news{ padding:11px 13px; gap:12px; grid-template-columns:44px 1fr auto }
.news .title{ font-size:13.5px; line-height:1.4 }
.news .meta{ font-size:11px; gap:7px; margin-top:4px }
.news .summary{ font-size:12px; margin-top:5px; line-height:1.5 }
.news .chips{ gap:4px; margin-top:6px }
.news .score b{ font-size:17px }
.news .score .bar{ height:2px; margin-top:4px }
.news .actions{ gap:4px }
.nrfb{ margin-top:6px!important; gap:4px!important }
.nrfb span{ font-size:9.5px!important }
.nrfb button{ padding:1px 8px!important; font-size:10px!important }
.tag{ font-size:10px; padding:2px 7px }
.chip{ font-size:10.5px; padding:2px 8px }
.pager{ padding:11px }
.pager span{ font-size:11.5px }
.empty{ padding:40px 16px; font-size:12.5px }

/* ── 곁가지 ─────────────────────────────────────────────────────── */
.kv{ grid-template-columns:88px 1fr; gap:6px 12px; font-size:12px }
.kv dt{ font-size:11px }
.trend{ height:74px }
.trend .col span{ font-size:8.5px }
.legend{ font-size:11px; gap:11px; margin-top:7px }
th, td{ padding:7px 9px; font-size:12.5px }
th{ font-size:11px }
.foot{ font-size:11px }

/* ── 우측 상단 「AI 뉴스 종합」은 스크롤바 없이 한 번에 보이게 ───────
   요약은 세 줄짜리 결론이다. 그걸 보려고 작은 칸 안에서 또 스크롤을
   굴리게 하면 요약이 아니다. 위 칸은 제 높이를 다 쓰고, 아래 대화창이
   남는 자리를 가져간다. 혹시 대담 전문을 펴서 넘치면 그때는 패널
   전체가 스크롤된다 — 칸 안의 작은 스크롤바보다 낫다.
   화면 코드가 인라인으로 잡아 둔 값이라 여기서 덮는다. */
#nr-brief{ flex:0 0 auto!important; overflow:visible!important }
#nr-brief-body{ flex:none!important; overflow:visible!important }
#nr-chat{ flex:1 1 auto!important; min-height:250px }
#nr-col{ overflow-y:auto!important }

/* ── 그룹장 소통방 — 한 줄에 들어가게 ────────────────────────────────
   패널이 290px 밖에 안 되는데 말풍선을 84% 로 묶어 두어서
   「류필재 리더님」 같은 짧은 호칭도 두 줄로 쪼개졌다.
   글자를 줄이고 풍선을 넓힌다. 한글은 단어 중간에서 끊지 않는다. */
#nr-c-body{ font-size:11.5px!important; padding:9px 11px!important }
#nr-c-body *{ word-break:keep-all!important; overflow-wrap:anywhere!important }
#nr-c-body [data-mid]{ margin:4px 0!important }
#nr-c-body [data-mid]>div{ width:100%!important }
#nr-c-body [data-mid] div[style*="border-radius"]{
  max-width:93%!important; font-size:11.5px!important; line-height:1.45!important;
  padding:5px 9px!important; border-radius:10px!important; letter-spacing:-.02em!important;
}
#nr-c-in{ font-size:11.5px!important; padding:6px 10px!important }
#nr-c-send{ font-size:11.5px!important; padding:6px 12px!important }


/* ── 표시 자리를 나눈다 ──────────────────────────────────────────────
   왼쪽 세로선 하나를 「안읽음(파랑)」과 「알림(빨강)」이 같이 쓰고 있었다.
   둘 다인 기사는 빨강이 파랑을 덮어 읽었는지가 사라졌다.
     · 세로선 = 안읽음        (파랑)
     · 점수 색 = 알림          (빨강)
   그리고 세로선을 가상 요소에서 진짜 요소로 바꿨다. 가상 요소에는
   설명 풍선을 달 수 없다. 기호를 만들었으면 뜻도 같이 줘야 한다. */
.news{ position:relative }
.news::before{ display:none!important }
.news .unreadmark{
  position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--blue); cursor:help;
}
.news .score{ cursor:help }
.news.is-alert{ box-shadow:none }
.news.is-alert .score b{ color:var(--rose) }
.news.is-alert .score .bar i{ background:var(--rose) }

/* ── 그룹장 소통방 — 옅은 노랑 ───────────────────────────────────────
   본문은 파랑, 소통방은 노랑. 같은 흰 바탕 위에서 두 영역이 색으로
   갈린다. 카카오톡을 오래 쓴 눈에는 노란 대화창이 익숙하기도 하다.
   진하게 칠하지 않는다 — 대화가 주인공이지 배경이 아니다. */
#nr-left{
  background:#FDFBF0!important;
  border-right:1px solid #E9E2C9!important;
}
#nr-left>div:first-child{
  background:#F8F3DF!important; border-bottom:1px solid #E9E2C9!important;
}
#nr-left>div:last-child{
  background:#F8F3DF!important; border-top:1px solid #E9E2C9!important;
}
#nr-left h3,#nr-left b,#nr-left strong{ color:#3D3410!important }
#nr-c-body{ background:transparent!important }

/* 받은 말풍선 — 흰 면에 옅은 테두리 */
#nr-left [data-mid] div[style*="background:#1a2338"]{
  background:#ffffff!important; border:1px solid #ECE5CE!important; color:#2A2612!important;
}
/* 내가 쓴 말풍선 — 카카오톡처럼 노랑. 글자는 먹색이라야 읽힌다 */
#nr-left [data-mid] div[style*="background:#3881f9"]{
  background:#FBE24E!important; color:#231F08!important; border-color:#F2D63A!important;
}
/* 답장 인용 줄 */
#nr-left [data-mid] div[style*="background:#eff4ff"],
#nr-left div[style*="background:#eff4ff"]{
  background:#F5EFD5!important; color:#5B4E17!important;
}
#nr-c-in{
  background:#ffffff!important; border:1px solid #E4DCBE!important; color:#2A2612!important;
}
#nr-c-in:focus{ border-color:#D9BE2B!important; box-shadow:0 0 0 3px rgba(217,190,43,.18)!important }
#nr-c-send{ background:#4A4008!important; border-color:#4A4008!important; color:#FFF!important }
#nr-c-send:hover{ background:#332C05!important }

/* ── 설명 말풍선 ─────────────────────────────────────────────────────
   브라우저가 그리는 title 네모는 1초쯤 기다려야 뜨고, 생김새를 손댈 수
   없고, 화면 나머지와 따로 논다. 우리가 그린다.
   커서의 물음표는 「여기 설명이 있다」는 표준 신호다. 남겨 둔다 —
   대 보라고 말해 주는 유일한 단서다. */
[data-tip]{ position:relative; cursor:help }
[data-tip]:hover::after{
  content:attr(data-tip);
  position:absolute; left:0; top:calc(100% + 7px); z-index:60;
  background:var(--ink); color:#fff;
  padding:8px 11px; border-radius:9px;
  font-size:11px; font-weight:500; line-height:1.55; letter-spacing:-.01em;
  white-space:pre-line; width:max-content; max-width:250px; text-align:left;
  box-shadow:0 8px 24px rgba(0,0,0,.22); pointer-events:none;
}
[data-tip]:hover::before{
  content:""; position:absolute; left:9px; top:calc(100% + 1px); z-index:61;
  border:6px solid transparent; border-bottom-color:var(--ink); pointer-events:none;
}
/* 말풍선이 상자 밖으로 나갈 수 있어야 한다 */
.card, .newslist, .news{ overflow:visible }
@media (prefers-reduced-motion: no-preference){
  [data-tip]:hover::after{ animation:nrTip .12s ease-out }
}
@keyframes nrTip{ from{ opacity:0; transform:translateY(-3px) } }

/* 첫 칸은 날짜·시각이라 44px 로는 안 들어간다 */
#kpi-updated{ font-size:clamp(19px,1.8vw,26px); letter-spacing:-.03em; font-variant-numeric:tabular-nums }

/* ── 에이전트가 남긴 판단 ────────────────────────────────────────────
   요약 아래 한 줄. 왼쪽에 파란 선을 세워 「사람이 쓴 요약」과 구분한다.
   기사 본문이 아니라 시스템이 붙인 말이라는 것이 한눈에 보여야 한다. */
.news .agentline{
  display:flex; gap:8px; flex-wrap:wrap; align-items:baseline;
  margin-top:6px; padding:5px 0 5px 9px;
  border-left:2px solid var(--blue);
  font-size:11.5px; line-height:1.5;
}
.news .agentline .why{ color:var(--sub); font-weight:600 }
.news .agentline .todo{
  color:var(--blue-deep); background:var(--blue-wash);
  border-radius:999px; padding:1px 9px; font-size:11px; font-weight:600;
  cursor:help;
}
.news .agentline .todo::before{ content:"확인 "; opacity:.65; font-weight:500 }
.news.read .agentline{ opacity:.55 }

/* ── 에이전트가 일하고 있다는 표시 ───────────────────────────────────
   상단바에 칩 하나. LIVE 왼쪽. 최근 3일 몇 건에 판단을 붙였는지 센다.
   한 시간 안에 일했으면 점이 뛴다 — 조용해지면 멈춘다.
   숫자가 오르는 걸 보는 것만으로 「돌고 있구나」가 전해진다. */
#nr-agent{
  display:inline-flex; align-items:center; gap:5px;
  border:1px solid var(--edge); border-radius:999px; padding:3px 10px;
  font-size:10.5px; font-weight:700; color:var(--dim);
  white-space:nowrap; font-variant-numeric:tabular-nums; cursor:help;
}
#nr-agent i{
  width:5px; height:5px; border-radius:50%; background:var(--faint);
  flex:none; display:inline-block;
}
#nr-agent.on{ color:var(--blue-deep); border-color:var(--blue-wash); background:var(--blue-wash) }
#nr-agent.on i{ background:var(--blue); animation:nrAgent 1.8s ease-in-out infinite }
@keyframes nrAgent{
  0%,100%{ opacity:1; box-shadow:0 0 0 0 rgba(22,104,227,.4) }
  50%    { opacity:.4; box-shadow:0 0 0 4px rgba(22,104,227,0) }
}
@media (prefers-reduced-motion: reduce){ #nr-agent.on i{ animation:none } }

/* 기사 줄의 판단 앞에 딱지. 시스템이 붙인 말이라는 걸 못 알아볼 수 없게. */
.news .agentline .why::before{
  content:"에이전트"; display:inline-block; margin-right:6px;
  font-size:9.5px; font-weight:800; letter-spacing:.02em;
  color:var(--blue); background:var(--blue-wash);
  border-radius:4px; padding:1px 5px; vertical-align:1px;
}

/* ── 주체 흐름 ───────────────────────────────────────────────────────
   기사는 사건을 말하고 이건 흐름을 말한다.
   시각을 왼쪽에 세워 시간이 흐르는 것이 눈으로 보이게 한다. */
.chip.clickable{ cursor:pointer }
.chip.clickable:hover{ background:var(--blue-wash); color:var(--blue-deep) }
.modal.entity{ max-width:520px }
.modal.entity .modal-head h2{ font-size:17px; letter-spacing:-.03em }
.eflow{ display:flex; flex-direction:column }
.erow{
  display:flex; gap:12px; align-items:baseline;
  padding:9px 0 9px 15px; border-left:2px solid var(--edge); position:relative;
}
.erow::before{
  content:""; position:absolute; left:-4px; top:15px;
  width:6px; height:6px; border-radius:50%; background:var(--edge);
}
.erow:last-child::before{ background:var(--blue) }
.erow b{
  flex:none; min-width:64px; font-size:11px; font-weight:800; color:var(--blue);
  letter-spacing:-.01em; font-variant-numeric:tabular-nums;
}
.erow span{ font-size:12.5px; color:var(--ink); line-height:1.5 }
.echeck{
  margin-top:14px; padding:10px 12px; border-radius:10px;
  background:var(--blue-wash); color:var(--blue-deep);
  font-size:12px; font-weight:600; line-height:1.5;
}
.echeck::before{ content:"확인 "; opacity:.6; font-weight:500 }
.esrc{ margin-top:10px; font-size:10.5px; color:var(--faint); font-variant-numeric:tabular-nums }

/* ── 감지 추이 날짜 ──────────────────────────────────────────────────
   칸마다 「08-17」을 넣으면 잘려서 「08-1..」이 된다. 열네 번 같은 달을
   쓰는 것도 낭비다. 달은 위에 한 번, 칸 아래에는 일자만.
   달이 바뀌는 첫 칸에만 「9/1」로 표시해 경계가 보이게 한다. */
.trend-month{
  font-size:10.5px; font-weight:700; color:var(--faint);
  letter-spacing:.02em; margin-bottom:2px;
}
.trend .col span{
  font-size:9.5px; color:var(--faint); text-align:center;
  font-variant-numeric:tabular-nums; letter-spacing:-.02em; cursor:help;
}
.trend .col span.first{ color:var(--blue); font-weight:800 }

/* ── 뉴스 업데이트 새로고침 ──────────────────────────────────────────
   시각이 적힌 자리에 둔다. 다른 데 있으면 뭘 새로 고치는지 알 수 없다.
   평소엔 흐리게, 칸에 손을 올리면 진해진다 — 있는 줄은 알되 시선을
   먼저 끌지는 않게. */
.kpi-upd .label{ display:flex; align-items:center; gap:6px }
#kpi-refresh{
  display:inline-flex; align-items:center; justify-content:center;
  width:19px; height:19px; padding:0; flex:none;
  border:1px solid var(--edge); border-radius:50%;
  background:transparent; color:var(--faint); cursor:pointer;
  transition:color .15s ease, border-color .15s ease;
}
#kpi-refresh svg{ width:11px; height:11px }
.kpi-upd:hover #kpi-refresh{ color:var(--dim); border-color:var(--dim) }
#kpi-refresh:hover{ color:var(--blue)!important; border-color:var(--blue)!important; background:var(--blue-wash) }
#kpi-refresh.spin{ color:var(--blue); border-color:var(--blue) }
#kpi-refresh.spin svg{ animation:nrSpin .9s linear infinite }
@keyframes nrSpin{ to{ transform:rotate(360deg) } }
@media (prefers-reduced-motion: reduce){ #kpi-refresh.spin svg{ animation:none } }

/* 새로고침을 시각 옆으로. 라벨 줄에 있으면 무엇을 새로 고치는지 애매하다. */
.kpi-upd .value-row{ display:flex; align-items:center; gap:9px; margin:auto 0 0 }
.kpi-upd .value-row .value{ margin:0 }
.kpi-upd .value.busy{ font-size:15px; color:var(--blue); letter-spacing:-.02em }

/* 말풍선이 숫자 칸 밖으로 나갈 수 있어야 한다 */
.kpi{ overflow:visible }

/* ── 오늘 확인할 것 ──────────────────────────────────────────────────
   에이전트가 기사에서 뽑아낸 할 일 목록. 아침에 한 번 보고 닫는 화면이다.
   목록 페이지를 새로 만들지 않고 떠 있는 층 하나로 끝낸다. */
#nr-checks{
  position:fixed; inset:0; z-index:10050; display:grid; place-items:center;
  padding:24px; background:rgba(14,17,22,.28);
}
#nr-checks .nrc-box{
  width:100%; max-width:560px; max-height:78vh; display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--edge); border-radius:14px;
  box-shadow:0 24px 60px rgba(0,0,0,.18); overflow:hidden;
}
#nr-checks .nrc-head{
  display:flex; align-items:center; gap:9px; flex:none;
  padding:14px 16px; border-bottom:1px solid var(--line-2);
}
#nr-checks .nrc-head b{ font-size:14px; font-weight:800; color:var(--ink); letter-spacing:-.02em }
#nr-checks .nrc-head span{ font-size:11px; color:var(--faint) }
#nr-checks .nrc-x{
  margin-left:auto; border:0; background:transparent; color:var(--faint);
  font-size:14px; cursor:pointer; padding:2px 4px; line-height:1;
}
#nr-checks .nrc-x:hover{ color:var(--ink) }
#nr-checks .nrc-body{ overflow:auto; padding:6px 16px 16px }
#nr-checks .nrc-item{ padding:12px 0; border-bottom:1px solid var(--line-2) }
#nr-checks .nrc-item:last-child{ border-bottom:0 }
#nr-checks .nrc-t{
  display:block; font-size:13px; font-weight:700; color:var(--ink);
  line-height:1.45; letter-spacing:-.02em; text-decoration:none;
}
#nr-checks .nrc-t:hover{ color:var(--blue) }
#nr-checks .nrc-c{
  margin-top:6px; padding:7px 10px; border-radius:9px;
  background:var(--blue-wash); color:var(--blue-deep);
  font-size:12px; font-weight:600; line-height:1.5;
}
#nr-checks .nrc-c::before{ content:"확인 "; opacity:.6; font-weight:500 }
#nr-checks .nrc-m{ margin-top:5px; font-size:10.5px; color:var(--faint) }
#nr-checks .nrc-empty{ padding:36px 0; text-align:center; color:var(--faint); font-size:12.5px }

/* 새로고침 말풍선이 칸 밖으로 잘렸다.
   버튼이 칸 오른쪽 끝에 있어 왼쪽으로 펴야 들어간다. 줄바꿈도 강제한다. */
#kpi-refresh[data-tip]:hover::after{
  left:auto; right:-4px; width:224px; max-width:224px; white-space:normal;
}
#kpi-refresh[data-tip]:hover::before{ left:auto; right:4px }

/* 말풍선이 화면 왼쪽 밖으로 잘렸다.
   버튼 기준으로 띄우니 칸 밖으로 나간다. 칸 기준으로 바꾸고 아래로 편다.
   버튼의 position 을 풀어야 ::after 가 칸을 기준으로 잡는다. */
.kpi-upd{ position:relative }
#kpi-refresh{ position:static }
#kpi-refresh[data-tip]:hover::after{
  left:0; right:auto; top:calc(100% + 6px);
  width:min(250px, 60vw); max-width:none; white-space:normal;
}
#kpi-refresh[data-tip]:hover::before{ left:16px; right:auto; top:100% }

/* ── 말풍선을 맨 앞으로 (2026-08-31) ───────────────────────────────
   설명이 「짤린다」고 보였던 진짜 이유는 잘림이 아니었다.
   버튼에 title 과 data-tip 이 둘 다 붙어 있어서, 브라우저가 그리는
   기본 풍선(「지금 수집」 넉 자)이 우리 말풍선 앞을 막고 있었다.
   title 은 페이지가 아니라 브라우저 창 위에 그려져 z-index 로 못 이긴다.
   → title 은 번들에서 뗐다(tools/patch-tip-front.pl).

   조상 요소를 전부 열어 확인한 결과 overflow 로 자르는 곳은 하나도 없었다.
   그래도 뜨는 층(고정 패널·스티키 상단바)에 가리지 않도록 못을 박아 둔다. */
[data-tip]:hover::after{ z-index:900!important }
[data-tip]:hover::before{ z-index:901!important }

/* 말풍선이 뜬 동안에는 그 칸 자체를 위로 올린다.
   그래야 뒤에 오는 형제(오른쪽 패널 등)가 위를 덮지 못한다. */
.kpi-upd:hover{ z-index:900 }

/* 한 줄 더 크게 — 설명은 읽으라고 있는 것이다 */
#kpi-refresh[data-tip]:hover::after{
  font-size:11.5px; line-height:1.6; padding:9px 12px;
  width:min(268px, 66vw);
}

/* ── 설정 안의 갈래 막대 (2026-08-31) ──────────────────────────────
   상단 메뉴가 일곱 개라 좁은 화면에서 밀렸다. 「수집 이력」과 「활동 기록」을
   설정 아래로 넣고, 설정 화면 안에서 갈래로 나눈다.
     [설정] [수집 이력] [활동 기록]
   .btn.on 은 이 막대 때문에 처음 생긴 상태다 — 지금 켜져 있는 갈래를 가리킨다. */
.subnav{
  display:flex; gap:6px; flex-wrap:wrap;
  margin:-4px 0 15px;
}
.subnav .btn{ text-decoration:none }
.btn.on{
  background:var(--blue); color:#fff; border:1px solid var(--blue);
}
.btn.on:hover{ background:var(--blue-deep); border-color:var(--blue-deep); color:#fff }

/* 소속 아래에 직책 (2026-08-31) — 딜 레이더와 같은 자리, 같은 강조.
   사장·상무·실장·그룹장·리더. 없는 사람은 아무것도 나오지 않는다. */
.utitle{ color:var(--blue); font-weight:700; font-size:11px; letter-spacing:-.01em }

/* AI 에이전트 모달의 칸 나눔 (2026-09-01) */
#nr-checks .nrc-sec{
  margin:14px 0 6px; padding-top:12px; border-top:1px solid var(--hair);
  font-size:11px; font-weight:800; letter-spacing:.02em; color:var(--blue);
}
#nr-checks .nrc-sec:first-child{ margin-top:2px; padding-top:0; border-top:0 }
#nr-checks .nrc-w{ margin-top:4px; font-size:11.5px; color:var(--sub); line-height:1.55 }