:root {
  --ink: #0e1116;
  --panel: #161b22;
  --panel-2: #1c232d;
  --line: #2a323d;
  --text: #e6e1d6;
  --muted: #8a93a0;
  --amber: #e8a33d;
  --amber-dim: #b07d2a;
  --up: #4ec9a3;
  --down: #e06a6a;
  --price-up: #ff6262;    /* 상승 — 빨강 (네이버 관례) */
  --price-down: #6b9bff;  /* 하락 — 파랑 */
  --radius: 6px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background:
    radial-gradient(900px 500px at 80% -10%, rgba(232,163,61,.06), transparent 60%),
    var(--ink);
  color: var(--text);
  font-family: "IBM Plex Sans KR", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.mono, .num { font-family: "IBM Plex Mono", ui-monospace, monospace; }

a { color: var(--amber); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- layout ---- */
.shell { max-width: 1080px; margin: 0 auto; padding: 0 20px 80px; }

/* [ALIGN] 테두리·blur는 화면 전체를 가로지르고, 안쪽 내용만 .shell과 같은 폭으로 묶는다.
   예전엔 헤더 자체가 flex라 로고·메뉴가 화면 양 끝에 붙어 본문(1080px 중앙)과
   세로줄이 어긋나 있었다. 좌우 패딩(20px)도 .shell과 같은 값을 써야 정확히 맞는다. */
header.topbar {
  border-bottom: 1px solid var(--line);
  margin-bottom: 28px;
  position: sticky; top: 0; z-index: 10;
  background: rgba(14,17,22,.85); backdrop-filter: blur(8px);
}
/* [ALIGN] 로고는 최상단 왼쪽, 메뉴는 그 아래 오른쪽 — PC·모바일 동일 구조.
   예전엔 데스크톱만 한 행(양끝 정렬)이고 모바일은 아래 행 왼쪽 정렬이라 배치가 달랐다. */
.topbar-inner {
  max-width: 1080px; margin: 0 auto; padding: 14px 20px 12px;
  display: flex; flex-direction: column; gap: 8px;
}
nav.main { align-self: flex-end; }
.brand {
  font-family: "IBM Plex Mono", monospace; font-weight: 600; letter-spacing: .04em;
  font-size: 15px; color: var(--text);
  /* [BRAND] 하단(=기준선) 정렬. center로 맞추면 '삼각형+MB' 덩어리 전체의 중앙을
     텍스트 한 줄 중앙에 맞추게 되어, 삼각형 높이만큼 MB가 아래로 밀린다.
     로고와 옆 글자는 같은 줄에 쓰인 글자로 읽혀야 하므로 기준선이 맞아야 하고,
     삼각형은 그 위로 솟는 장식이라 정렬에 관여하지 않아야 한다.
     line-height를 양쪽 다 1로 눌러 두 상자의 밑변이 곧 기준선 근처가 되게 한다
     (baseline 정렬은 세로 flex 아이템에서 브라우저별 해석이 갈린다). */
  display: inline-flex; align-items: flex-end; gap: .6em; line-height: 1;
  /* [BRAND-DROP] 위 정렬은 '상자 밑변'을 맞춘 것이고, 눈은 '글자 밑변'을 본다.
     MB는 IBM Plex Sans KR인데 '마이 브리핑'은 IBM Plex Mono에 한글이 없어
     OS 기본 한글꼴로 폴백된다. 두 글꼴의 descent가 달라 상자 밑변을 맞추면
     MB 밑변이 한글 밑변보다 위에 남는다 — 로고가 떠 보이던 원인이다.
     화면 실측(브라우저 확대 캡처 기준): MB 밑변이 ㅁ·ㅇ·ㄹ·ㅡ 밑변보다
     약 0.05em 높았다. 그만큼만 마크 전체를 내린다.
     글꼴 폴백은 OS마다 다르므로 상수가 아니라 손잡이로 둔다 —
     로고가 아직 높으면 값을 키우고, 내려앉아 보이면 줄인다.
       0      예전 상태(상자 밑변 정렬)
       .05em  현재 — 한글 몸통(ㅁ·ㅇ·ㅡ) 밑변에 맞춤
       .12em  ㅏ·ㅣ 세로획 끝까지 맞춤 (대개 너무 낮다)
     레이아웃이 아니라 그리기만 옮기므로(relative) 헤더 높이는 그대로다. */
  --brand-drop: .05em;
}
/* [BRAND] 로고 마크 = 아이콘(static/icons)과 같은 묶음: 직각삼각형 위 / MB 아래.
   예전엔 유니코드 ◢(직각이 오른쪽 아래)만 썼는데, 아이콘은 방향이 반대인 데다
   MB 워드마크가 함께 있어 같은 브랜드로 보이지 않았다.
   비율은 icon-512.png 실측값이다 — 삼각형 72px, 간격 24px, MB 글자높이 157px.
   → 글자높이 대비 0.459 / 0.153. cap-height를 0.70em로 보고 em으로 환산했다.
   글리프는 폰트 의존이라 삼각형만 SVG로 고정한다. */
.brand-mark { display: inline-flex; flex-direction: column; align-items: flex-start;
  line-height: 1; color: var(--amber); font-size: 1.1em;
  /* [BRAND-DROP] 삼각형까지 같이 내려가야 덩어리가 유지된다. em이라 로그인(18px)·
     가입(22px) 화면처럼 .brand 글자 크기가 달라도 비율이 따라간다. */
  position: relative; top: var(--brand-drop, 0); }
.brand-mark svg { width: .32em; height: .32em; fill: currentColor; margin-bottom: .11em; }
.brand-mb { font-family: "IBM Plex Sans KR", system-ui, sans-serif;
  font-weight: 700; letter-spacing: -.01em; line-height: 1; }
.brand b { color: var(--amber); }
nav.main a {
  color: var(--muted); margin-left: 20px; font-size: 14px;
  font-family: "IBM Plex Mono", monospace;
}
nav.main a:hover, nav.main a.active { color: var(--text); text-decoration: none; }

h1 { font-size: 24px; font-weight: 600; letter-spacing: -.01em; margin: 0 0 4px; }
/* [IA-NAV] 메뉴 설명을 여기로 옮겼다. 제목의 일부가 아니라 주석이므로
   굵기·크기·색을 확실히 낮춰 제목과 경쟁하지 않게 한다. */
.page-note { font-family: "IBM Plex Mono", monospace; font-size: 12.5px; font-weight: 400;
             color: var(--muted); letter-spacing: 0; margin-left: 8px; white-space: nowrap; }
h2 { font-size: 14px; text-transform: uppercase; letter-spacing: .14em; color: var(--amber-dim);
     font-family: "IBM Plex Mono", monospace; font-weight: 600; margin: 28px 0 12px; }
.sub { color: var(--muted); font-size: 14px; margin: 0 0 22px; }

/* ---- panels ---- */
.panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px; margin-bottom: 16px;
}
.grid { display: grid; gap: 16px; }
.grid.cols-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 720px) { .grid.cols-2 { grid-template-columns: 1fr; } }

/* ---- list rows ---- */
.row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 0; border-bottom: 1px dashed var(--line); gap: 10px;
}
.row > :first-child { min-width: 0; }       /* 텍스트는 줄어들고 줄바꿈 */
.row > :last-child { flex-shrink: 0; }       /* 버튼/액션 영역은 안 줄어듦 */
.row:last-child { border-bottom: none; }
.row .meta { color: var(--muted); font-size: 13px; font-family: "IBM Plex Mono", monospace; }
.tag {
  font-family: "IBM Plex Mono", monospace; font-size: 11px; padding: 2px 7px;
  border: 1px solid var(--line); border-radius: 4px; color: var(--muted);
}
.tag.etf { color: var(--amber); border-color: var(--amber-dim); }
.empty { color: var(--muted); font-size: 14px; padding: 8px 0; }

/* ---- buttons / forms ---- */
button, .btn {
  font-family: "IBM Plex Mono", monospace; font-size: 13px; cursor: pointer;
  background: var(--panel-2); color: var(--text); white-space: nowrap;
  border: 1px solid var(--line); border-radius: 5px; padding: 8px 14px;
}
button:hover, .btn:hover { border-color: var(--amber-dim); }
.btn-primary { background: var(--amber); color: #1a1206; border-color: var(--amber); font-weight: 600; }
.btn-primary:hover { background: #f0af50; }
.btn-hybrid { background: rgba(240,175,80,0.12); border-color: var(--amber); color: var(--amber); font-weight: 600; }
.btn-hybrid:hover { background: rgba(240,175,80,0.22); border-color: var(--amber); }
.btn-sm { padding: 4px 9px; font-size: 12px; }
.btn-danger { color: var(--down); }

input, select, textarea {
  font-family: inherit; font-size: 14px; background: var(--ink); color: var(--text);
  border: 1px solid var(--line); border-radius: 5px; padding: 9px 11px; width: 100%;
}
textarea { font-family: "IBM Plex Mono", monospace; font-size: 13px; line-height: 1.5; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--amber-dim); }
label { display: block; font-size: 12px; color: var(--muted); margin: 0 0 5px;
        font-family: "IBM Plex Mono", monospace; letter-spacing: .03em; }
.field { margin-bottom: 12px; }
.form-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.form-row .field { flex: 1; min-width: 120px; margin-bottom: 0; }

/* ---- status ---- */
.status { font-family: "IBM Plex Mono", monospace; font-size: 12px; padding: 2px 8px; border-radius: 4px; }
.status.ok { color: var(--up); border: 1px solid rgba(78,201,163,.3); }
.status.partial { color: var(--amber); border: 1px solid var(--amber-dim); }
.status.error { color: var(--down); border: 1px solid rgba(224,106,106,.4); }

.flash { background: var(--panel-2); border-left: 3px solid var(--amber); padding: 10px 14px;
         border-radius: 4px; margin-bottom: 16px; font-size: 14px; }

/* ---- prompt box ---- */
.prompt-box {
  background: var(--ink); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; max-height: 360px; overflow: auto; white-space: pre-wrap;
  font-family: "IBM Plex Mono", monospace; font-size: 12.5px; line-height: 1.55; color: #cfd6df;
}
.briefing-body { line-height: 1.7; word-break: keep-all; overflow-wrap: break-word; }
/* [MOBILE-READ] 주식/부동산 탭 — manage.html의 .tabs 컴포넌트를 브리핑 본문에 재사용 */
.brief-tabs { position: sticky; top: 0; z-index: 5; background: var(--panel); padding-top: 2px; }
/* [MOBILE-READ] 교차검증 패널 접기 */
.cc-fold > summary { cursor: pointer; list-style: none; color: var(--amber-dim);
  font-size: 14px; text-transform: uppercase; letter-spacing: .14em; padding: 2px 0; }
.cc-fold > summary::-webkit-details-marker { display: none; }
.cc-fold > summary::after { content: ' ▾'; }
.cc-fold[open] > summary::after { content: ' ▴'; }
.briefing-body p { margin: 8px 0; }
.briefing-body h1, .briefing-body h2, .briefing-body h3, .briefing-body h4 {
  text-transform: none; letter-spacing: 0; color: var(--text);
}
.briefing-body h1 { font-size: 19px; margin: 18px 0 8px; }
.briefing-body h2 { font-size: 17px; margin: 18px 0 8px; }
.briefing-body h3 { font-size: 15px; margin: 16px 0 6px; color: var(--amber-dim); }
.briefing-body h4 { font-size: 14px; margin: 14px 0 6px; color: var(--amber-dim); }
.briefing-body ul, .briefing-body ol { margin: 8px 0; padding-left: 20px; }
.briefing-body li { margin: 3px 0; }
.briefing-body strong { color: var(--text); font-weight: 600; }
.briefing-body a { color: var(--amber); }
.briefing-body code { font-family: "IBM Plex Mono", monospace; font-size: 0.92em; }

/* ---- briefing detail: 본문 + 교차검증 ---- */
/* [IA-TODAY] `1fr / 380px` 2단 그리드는 제거했다. 상세가 유일한 읽기 화면이던 시절의
   배치라, '오늘'이 본문을 전체 폭으로 싣기 시작하면서 같은 브리핑이 두 화면에서
   다르게 읽혔다(데스크톱에서 본문이 60%만 받아 종목 표가 심하게 접힘).
   [MOBILE-READ] grid/flex 아이템의 기본값 min-width:auto는 '내용의 최소 폭' 밑으로
   줄어들지 않는다. 표처럼 최소 폭이 큰 자식이 있으면 트랙이 늘어나 화면을 넘긴다. */
.briefing-main { min-width: 0; max-width: 100%; }
.briefing-body, .brief-sec, .tbl-scroll { min-width: 0; max-width: 100%; }
.cc-title { font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--amber-dim);
            text-transform: uppercase; letter-spacing: .1em; margin: 16px 0 6px; }
.cc-title:first-of-type { margin-top: 0; }
/* [CC-STACK] 세로로 한 글자씩 흐르던 원인.
   한글은 음절 사이에서 줄바꿈이 허용되므로 셀의 min-content가 사실상 '한 글자'다.
   table-layout:auto는 남는 폭을 열의 max-content 비율로 나누는데, 한쪽에 긴 공시
   제목이 있으면 반대쪽 열이 그 최소값(=한 글자)까지 눌린다. `word-break`류로는
   못 막는다 — 그 속성들은 폭 계산이 아니라 이미 정해진 폭 안의 줄바꿈만 바꾼다.
   해결은 열이 서로 폭을 다투지 않게 하는 것. 380px 사이드바에서 2~4열 표는
   협상이 성립하지 않으므로 표를 버리고 flex 행으로 간다.
   (px/em으로 열 폭을 못박는 방법도 있지만 폰트 자폭 추정에 기대게 된다.
    flex는 숫자가 필요한 만큼만 가져가고 남는 폭은 전부 이름이 받는다 — 추정 없음.) */
.cc-list { display: flex; flex-direction: column; gap: 7px; }
/* ★ [hidden]은 전역으로 한 번만 막는다.
   클래스에 display를 지정하면 브라우저 기본 [hidden]{display:none}을 이겨서
   hidden 속성이 무시된다. 이 프로젝트에서 세 번 걸렸다 —
     .run-banner(display:flex) → 배너가 안 꺼짐
     .cc-list(display:flex)    → 탭 전환이 안 먹음
     .cc-deals(display:grid)   → 위를 고쳤는데도 실거래가만 남음
   클래스를 하나씩 막는 방식이 문제였다. 요소가 늘어날 때마다 같은 함정에 빠진다.
   여기서 전역으로 끝내고, 개별 규칙은 두지 않는다. */
[hidden] { display: none !important; }
.cc-item { border-bottom: 1px solid var(--line); padding-bottom: 7px; }
.cc-item:last-child { border-bottom: none; padding-bottom: 0; }
.cc-item-t { font-size: 12.5px; line-height: 1.5; color: var(--text); }
.cc-item-m { font-family: "IBM Plex Mono", monospace; font-size: 11.5px;
             color: var(--muted); line-height: 1.5; margin-top: 2px; }
.cc-who { font-family: "IBM Plex Mono", monospace; font-size: 11px;
          color: var(--amber-dim); margin-right: 5px; white-space: nowrap; }

/* 시세 행: 이름은 남는 폭을 받고 줄바꿈, 숫자는 줄지 않는다.
   min-width는 '보통은 세로로 맞춰 보이게' 하는 정렬용일 뿐이고,
   더 긴 값이 오면 flex-shrink:0이라 눌리지 않고 늘어난다(잘림·겹침 없음). */
.cc-q { display: flex; align-items: baseline; gap: 8px;
        padding: 5px 0; border-bottom: 1px solid var(--line);
        font-family: "IBM Plex Mono", monospace; font-size: 12px; }
.cc-q:last-child { border-bottom: none; }
.cc-q-name { flex: 1 1 auto; min-width: 0; color: var(--text); }
.cc-q-price, .cc-q-pct { flex: 0 0 auto; text-align: right; color: var(--muted); white-space: nowrap; }
.cc-q-price { min-width: 5.4em; }
.cc-q-pct { min-width: 4.6em; }
/* 가격 방향 색 — 네이버 증권 관례(상승=빨강, 하락=파랑). 국내·해외 모두 동일 적용.
   (--up/--down은 좋음/위험 의미색으로 버튼·상태에 쓰이므로 가격용 변수를 분리) */
.cc-q .up { color: var(--price-up); }
.cc-q .down { color: var(--price-down); }
/* 가격 방향 색 — 네이버 증권 관례(상승=빨강, 하락=파랑). 국내·해외 모두 동일 적용.
   (--up/--down은 좋음/위험 의미색으로 버튼·상태에 쓰이므로 가격용 변수를 분리) */
/* 브리핑 본문 내 등락률 토큰(+x.xx% / -x.xx%) 자동 색칠용 */
/* [WATCH-FIRST] 관전 포인트 블록 간격.
   제목 아래 한 줄 → 항목 사이 한 줄 → 본문 시작 전 두 줄. */
.briefing-body .watch-head { margin-bottom: 14px; }
.briefing-body .watch-item { margin-bottom: 14px; }
.briefing-body ol.watch-item > li,
.briefing-body ul.watch-item > li { margin-bottom: 14px; }
.briefing-body ol.watch-item > li:last-child,
.briefing-body ul.watch-item > li:last-child { margin-bottom: 0; }
.briefing-body .body-start { margin-top: 44px; }
/* 탭이 본문 제목을 대신하므로 섹션 첫 요소의 윗여백은 없앤다 */
.briefing-body .brief-sec > *:first-child { margin-top: 0; }

/* [MOBILE-CARD] 종목 표의 모바일 대체 뷰.
   데스크톱은 표(비교가 쉬움), 모바일은 카드(가로 스크롤 없음)로 갈라 쓴다.
   두 DOM을 모두 만들어 두고 미디어쿼리로 전환한다(리사이즈 리스너 불필요). */
.briefing-body .stock-cards { display: none; margin: 10px 0; }
.briefing-body .scard { background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 11px 13px; margin-bottom: 9px; }
.briefing-body .scard-top { display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; margin-bottom: 9px; }
.briefing-body .scard-name { font-size: 15px; font-weight: 600; color: var(--text);
  word-break: normal; overflow-wrap: anywhere; }
.briefing-body .scard-price { font-size: 15px; font-weight: 600; white-space: nowrap; text-align: right; }
.briefing-body .scard-rows { display: grid; grid-template-columns: 3.4em minmax(0, 1fr);
  gap: 5px 10px; font-size: 13.5px; line-height: 1.55; }
.briefing-body .scard-k { color: var(--muted); }
.briefing-body .scard-v { color: var(--text); word-break: keep-all; overflow-wrap: break-word; }
.briefing-body .scard-none { font-size: 13px; color: var(--muted); }
.briefing-body .scard-badge { display: inline-block; background: rgba(232,163,61,0.14);
  color: var(--amber); font-size: 12px; padding: 1px 7px; border-radius: 5px; white-space: nowrap; }
.briefing-body .pu { color: var(--price-up); }
.briefing-body .pd { color: var(--price-down); }
/* AI 본문 내 마크다운 표 */
/* [MOBILE-READ] 표는 자기 안에서만 가로 스크롤. 이걸 안 하면 표의 최소 폭이
   페이지 전체를 늘려 본문 문단까지 화면 밖으로 밀린다. (JS가 표를 이 div로 감싼다) */
.briefing-body .tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 10px 0; }
.briefing-body .tbl-scroll table { margin: 0; }
.briefing-body table { width: 100%; border-collapse: collapse; font-size: 12.5px; margin: 10px 0; table-layout: auto; }
.briefing-body th, .briefing-body td { padding: 6px 8px; border: 1px solid var(--line); text-align: left; vertical-align: top; word-break: keep-all; }
.briefing-body th { background: rgba(240,175,80,0.08); color: var(--amber); font-weight: 600; white-space: nowrap; }
.briefing-body td:last-child { word-break: break-word; }
.briefing-body tbody tr:nth-child(even) { background: rgba(255,255,255,0.02); }

/* ---- [IA-TODAY] 오늘 화면 ---- */
/* 상태 스트립: "자동이 잘 돌고 있나"에 한 줄로 답한다. 패널이 아니라 얇은 띠로 둬
   최신 브리핑이 첫 화면 위쪽을 차지하게 한다. */
.statusbar {
  display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: center;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel-2); padding: 9px 14px; margin-bottom: 16px;
  font-family: "IBM Plex Mono", monospace; font-size: 12.5px; color: var(--text);
}
.statusbar .sb-item { display: flex; align-items: center; gap: 6px; }
.statusbar .sb-k { color: var(--muted); }
.statusbar .sb-sep { color: var(--line); }
.statusbar .sb-none { color: var(--muted); }
.statusbar .status { padding: 1px 6px; }
/* [MK-SCOPE] 상태 스트립 오른쪽 끝 액션(직접 만들기). margin-left:auto로 밀어
   상태 표시들과 시각적으로 갈라놓는다. 좁은 화면에서 스트립이 줄바꿈되면
   auto가 무력해지므로, 그때는 한 줄을 통째로 쓰고 오른쪽 정렬만 유지한다. */
.statusbar .sb-action { margin-left: auto; flex-shrink: 0; }
@media (max-width: 560px) {
  .statusbar .sb-action { margin-left: 0; width: 100%; }
}

.today-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; padding-bottom: 12px; margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.today-head > span:first-child { min-width: 0; }
.today-head > a { flex-shrink: 0; }
.today-title { font-size: 16px; font-weight: 600; color: var(--text); margin-top: 3px; }

/* 헤더 오른쪽 액션. 직접 만들기(수동 수집)는 자동 실패 시의 폴백이라 여기 둔다. */
.head-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* 수동 수집 다이얼로그.
   예전엔 헤더 안의 absolute 팝오버였는데 모바일에서 보이지 않았다 — 부모의 폭·
   스택 컨텍스트에 얽히기 때문이다. fixed 오버레이는 부모와 무관하게 뷰포트 기준으로
   놓이므로 두 환경에서 같은 자리에 뜬다(확인 모달과 같은 방식). */
.mk-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.72);
  display: flex; align-items: center; justify-content: center; padding: 20px; }
.mk-box { width: 100%; max-width: 420px; max-height: 88vh; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 22px; box-shadow: 0 16px 48px rgba(0,0,0,.55); }
.mk-box h2 { text-transform: none; letter-spacing: 0; font-size: 18px;
  font-family: inherit; color: var(--text); }
/* 모드 선택이 이 화면의 전부다. 각 모드를 '제목 + 한 줄 설명'의 큰 버튼 하나로 만든다.
   예전엔 힌트 세 줄 아래 작은 버튼 두 개라 무엇을 고르는 화면인지 읽히지 않았다. */
.mk-opt { display: block; width: 100%; text-align: left; margin-bottom: 10px;
  padding: 13px 15px; border-radius: 10px; white-space: normal;
  background: var(--panel-2); border: 1px solid var(--line); cursor: pointer; }
.mk-opt:last-child { margin-bottom: 0; }
.mk-opt:hover { border-color: var(--amber); background: rgba(240,175,80,.08); }
.mk-opt-t { display: block; font-size: 15px; font-weight: 600; color: var(--amber);
  font-family: inherit; margin-bottom: 3px; }
.mk-opt-d { display: block; font-size: 13px; line-height: 1.55; color: var(--muted);
  font-family: "IBM Plex Sans KR", system-ui, sans-serif; }
.mk-opt-alt .mk-opt-t { color: var(--text); }
/* 제목 옆 한 마디 — 두 모드의 차이를 한눈에 가르는 자리 */
.mk-opt-k { font-family: "IBM Plex Mono", monospace; font-size: 12px; font-weight: 400;
  color: var(--muted); margin-left: 6px; }

/* ---- [IA-RECORD] 기록 목록 ---- */
/* 행 전체가 링크다 — 폰에서 '열기' 버튼만 탭 대상이면 표적이 너무 작았다 */
.rec-row { display: flex; align-items: center; gap: 10px;
  padding: 10px 0; border-bottom: 1px dashed var(--line); }
.rec-row:last-child { border-bottom: none; }
.rec-main { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px;
  flex: 1; min-width: 0; color: var(--text); }
.rec-main:hover { text-decoration: none; }
.rec-main:hover .rec-title { color: var(--amber); }
.rec-when { display: flex; align-items: baseline; gap: 7px; flex-shrink: 0;
  font-family: "IBM Plex Mono", monospace; font-size: 13px; color: var(--muted); }
.rec-seg { color: var(--text); }
.rec-title { flex: 1 1 12em; min-width: 0; font-weight: 600; word-break: keep-all; overflow-wrap: break-word; }
.rec-meta { flex-shrink: 0; color: var(--muted); font-size: 12px;
  font-family: "IBM Plex Mono", monospace; }
.rec-act { flex-shrink: 0; }
.rec-row.pending .rec-title { font-weight: 400; }
/* [RECORD-PURGE] 목록 패널 바깥, 오른쪽 끝. 행마다 있는 개별 삭제 버튼과 세로로
   겹치지 않게 두어 오조작을 줄인다. 위 여백을 넉넉히 잡아 목록의 연장이 아니라
   별도 동작으로 읽히게 한다. */
.rec-purge { display: flex; align-items: center; justify-content: flex-end;
  gap: 10px; margin-top: 22px; }

/* 전체 폭에 놓이는 교차검증('오늘' 화면). 380px 사이드바와 달리 가로가 남으므로
   목록을 그리드로 흘려 세로 길이를 줄인다. auto-fill이라 좁아지면 알아서 1열이 된다. */
.cc-wide .cc-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
                    gap: 7px 26px; align-content: start; }

/* ---- login ---- */
.login-wrap { min-height: 80vh; display: flex; align-items: center; justify-content: center; }
.login-card { width: 340px; }
.login-card .brand { display: flex; justify-content: center; font-size: 18px; margin-bottom: 22px; }

.hint { color: var(--muted); font-size: 12px; font-family: "IBM Plex Mono", monospace; }

/* 탭 */
.tabs { display: flex; gap: 6px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.tab-btn { background: none; border: none; color: var(--muted); font-size: 14px; font-weight: 600;
           padding: 8px 14px; cursor: pointer; border-bottom: 2px solid transparent; }
.tab-btn.active { color: var(--text); border-bottom-color: var(--amber); }

/* 종목명 자동완성 */
.ac-box { position: absolute; top: 100%; left: 0; right: 0; z-index: 30; margin-top: 2px;
          background: var(--panel, #14161c); border: 1px solid var(--line); border-radius: 8px;
          max-height: 240px; overflow-y: auto; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.ac-item { display: flex; justify-content: space-between; align-items: center; gap: 10px;
           padding: 8px 12px; cursor: pointer; font-size: 13px; }
.ac-item:hover { background: rgba(255,255,255,.06); }

/* 링크형 버튼 (브리핑 삭제) */
.linklike { background: none; border: none; padding: 0; font: inherit; cursor: pointer; }
.btn-danger-text { color: var(--down, #e5534b); }

/* 수집 진행 화면 */
.spinner { width: 38px; height: 38px; margin: 0 auto; border: 3px solid var(--line);
           border-top-color: var(--amber); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.progress-track { margin: 16px auto 0; max-width: 360px; height: 8px; background: var(--line);
                  border-radius: 999px; overflow: hidden; }
.progress-bar { height: 100%; width: 0%; background: var(--amber);
                border-radius: 999px; transition: width 0.4s ease; }

/* ---- 모바일 ---- */
@media (max-width: 640px) {
  /* [MOBILE-READ] 본문 가독성. 이전엔 모바일에서 15px→14px로 '줄이고' 있었다.
     작은 화면일수록 본문은 키워야 한다. UI 라벨(14px)과 읽는 글(16.5px)을 분리한다. */
  body { font-size: 15px; }
  .briefing-body { font-size: 16.5px; line-height: 1.85; }
  /* [MOBILE-READ] 양쪽 정렬. keep-all은 어절을 안 깨서 줄바꿈 지점이 줄고,
     그 상태로 양끝을 맞추면 남은 공백이 과하게 벌어진다. 문단에 한해 일반 줄바꿈으로
     되돌려 끊을 곳을 늘린다(표·카드는 keep-all 유지). */
  .briefing-body p { margin: 0 0 16px; text-align: justify;
                     word-break: normal; overflow-wrap: break-word; }
  .briefing-body h1 { font-size: 20px; }
  .briefing-body h2 { font-size: 18px; }
  .briefing-body h3 { font-size: 16.5px; }
  /* [MOBILE-READ] 본문 폭 확보. 음수 마진은 grid 폭 계산을 흔들어 제거하고
     .shell(14→10px) + .panel(14→12px)로 좌우 여백만 줄인다. */
  .briefing-main { padding: 12px 12px 18px; }
  /* [MOBILE-CARD] 모바일에서는 카드로 갈아끼운다 */
  .briefing-body .stock-cards { display: block; }
  .briefing-body .tbl-scroll.has-cards { display: none; }
  .briefing-body table { font-size: 13px; min-width: 460px; }
  /* 헤더도 줄바꿈 허용 (nowrap이면 헤더 길이가 열 폭을 결정해버린다) */
  .briefing-body th { white-space: normal; }
  /* 종목 열: keep-all 때문에 '한화에어로스페이스'가 한 줄로 펴지며 폭을 독차지했다.
     이 열만 일반 줄바꿈으로 되돌려 두 줄로 접히게 한다. */
  .briefing-body td:first-child, .briefing-body th:first-child {
    width: 5.2em; word-break: normal; overflow-wrap: anywhere;
  }
  /* 공시·신호 열에 최소 폭 확보 */
  .briefing-body td:last-child, .briefing-body th:last-child { min-width: 10em; }
  .briefing-body th, .briefing-body td { padding: 7px 6px; }
  .shell { padding: 0 10px 64px; }
  header.topbar { position: static; margin-bottom: 18px; }
  /* [ALIGN] 좌우 패딩을 .shell(10px)과 맞춘다 — 로고와 본문 제목이 같은 세로줄에 선다.
     구조(로고 위 / 메뉴 아래 오른쪽)는 데스크톱과 동일하다. */
  .topbar-inner { padding: 12px 10px 10px; }
  /* [IA-NAV] 라벨 4개뿐이라 한 줄에 들어간다(설명은 제목 옆으로 옮겼다).
     넘칠 때를 대비해 가로 스크롤은 남겨두되 스크롤바는 감춘다. */
  nav.main { display: flex; flex-wrap: nowrap; gap: 0 18px;
             justify-content: flex-end; max-width: 100%;
             overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  nav.main::-webkit-scrollbar { display: none; }
  nav.main a { margin-left: 0; font-size: 14px; white-space: nowrap; padding: 2px 0; }
  /* 제목 옆 라벨은 좁은 화면에서 제목 아랫줄로 내린다 */
  .page-note { display: block; margin-left: 0; margin-top: 2px; font-size: 12px; }
  h1 { font-size: 20px; }
  .panel { padding: 14px; }
  .form-row { gap: 8px; }
  .form-row .field { min-width: 100%; }      /* 좁은 화면에선 입력칸을 한 줄씩 */
  .prompt-box { font-size: 12px; max-height: 300px; }
  /* [CC-STACK] 교차검증은 폰에서 본문 아래 전체 폭으로 펼쳐진다 — 조금 더 줄인다 */
  .cc-q, .cc-item-t { font-size: 12px; }
  .cc-item-m { font-size: 11px; }
  /* [IA-TODAY] 좁은 화면에선 상태 항목을 세로로. 가로로 두면 '다음 자동'이 잘린다 */
  .statusbar { flex-direction: column; align-items: flex-start; gap: 5px; }
  /* [IA-RECORD] 제목이 날짜 줄 아래로 내려가게 — 한 줄에 다 넣으면 제목이 몇 글자만 보인다 */
  .rec-title { flex-basis: 100%; }
  .rec-meta { flex-basis: 100%; }
  .today-head { flex-wrap: wrap; }
}

/* 공용 확인 모달 */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.modal-box {
  background: var(--panel, #14161c); border: 1px solid var(--line);
  border-radius: 12px; padding: 22px; max-width: 380px; width: 100%;
  box-shadow: 0 16px 48px rgba(0,0,0,.5);
}
.modal-msg { font-size: 15px; line-height: 1.55; color: var(--text); margin-bottom: 18px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; }
.modal-actions .btn-primary { background: var(--down, #e5534b); border-color: var(--down, #e5534b); color: #fff; }
.modal-actions .btn-primary:hover { background: #f06a62; }

/* 부동산 섹션 제목 앞 여백 (JS가 '부동산' 제목에 클래스 부여) */
.briefing-body .section-realestate { margin-top: 48px; }

/* [SCOPE-SETTING] 수집 범위 표 — 4열(라벨+3범위) × 5행(머리글+세그먼트 4). */
.scope-grid { display: grid; grid-template-columns: 1fr repeat(3, 64px);
  gap: 6px 4px; align-items: center; }
.scope-grid .scope-h { color: var(--muted); font-size: 12px; text-align: center;
  font-family: "IBM Plex Mono", monospace; }
.scope-grid .scope-h:first-child { text-align: left; }
.scope-grid .scope-r { font-size: 14px; }
.scope-grid .scope-c { display: flex; justify-content: center; cursor: pointer; }
.scope-grid input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--amber); }
@media (max-width: 480px) {
  .scope-grid { grid-template-columns: 1fr repeat(3, 48px); }
  .scope-grid .scope-r .hint { display: none; }   /* 좁으면 설명은 접는다 */
}

/* [SCOPE-SETTING] 수동 다이얼로그의 이번-실행 범위 선택. 모드 버튼 위 한 줄. */
.mk-scope { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 0 0 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.mk-scope-c { display: inline-flex; align-items: center; gap: 5px;
  font-size: 14px; cursor: pointer; }
.mk-scope input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--amber); }

/* [RUN-BANNER] 전 화면 공통 수집 진행 배너. 본문 위 한 줄, 스크롤과 함께 흐른다
   (고정하면 좁은 화면에서 본문을 계속 가린다 — 수집은 2분이면 끝난다). */
.run-banner { display: flex; align-items: center; gap: 10px;
  background: var(--panel-2); border: 1px solid var(--line); border-left: 3px solid var(--amber);
  border-radius: 6px; padding: 9px 12px; margin: 0 0 16px; font-size: 13px; }
.run-banner .run-dot { width: 8px; height: 8px; border-radius: 50%;
  background: var(--amber); flex: 0 0 auto; animation: run-pulse 1.4s ease-in-out infinite; }
.run-banner.done .run-dot { animation: none; background: var(--ok, #4ad07a); }
.run-banner .run-track { flex: 1 1 auto; height: 4px; min-width: 60px;
  background: var(--line); border-radius: 2px; overflow: hidden; }
.run-banner .run-bar { height: 100%; width: 0; background: var(--amber);
  transition: width .4s ease; }
.run-banner .run-link { flex: 0 0 auto; color: var(--amber); white-space: nowrap; }
@keyframes run-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .25 } }
@media (prefers-reduced-motion: reduce) {
  .run-banner .run-dot { animation: none; }
  .run-banner .run-bar { transition: none; }
}

/* [AUTOLINK] 본문에 맨 URL로 남은 출처를 도메인 배지로 보여준다.
   Google 뉴스 URL은 수백 자짜리 base64라 그대로 두면 문단을 잡아먹는다. */
.brief-body .src-link, .src-link {
  display: inline-block; max-width: 100%; vertical-align: baseline;
  font-family: "IBM Plex Mono", monospace; font-size: 0.86em;
  color: var(--amber); text-decoration: none;
  border-bottom: 1px dotted var(--amber-dim); word-break: break-all; }
.src-link:hover { border-bottom-style: solid; }

/* [BULK-SAVE] 종목 블록 = 왼쪽(이름줄+입력줄) + 오른쪽(액션).
   액션을 블록 전체의 세로 중앙에 두려고 align-items:center를 쓴다.
   이름줄에만 맞추면 아래 입력줄이 버튼 없이 비어 보여 두 줄이 따로 논다. */
.asset-blk { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.asset-blk:last-of-type { border-bottom: none; }
.asset-blk .ab-body { flex: 1 1 auto; min-width: 0; }
.asset-blk .ab-name { overflow-wrap: anywhere; }
.asset-blk .ab-act { display: flex; gap: 6px; flex-shrink: 0; }
/* 입력줄은 이름줄에 딸린 것으로 읽히도록 들여쓴다. */
.asset-in { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 6px 0 0 10px; padding-left: 10px; border-left: 2px solid var(--line); }
.asset-in label { display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--muted); }
.asset-in input { width: 96px; padding: 4px 7px; font-size: 13px;
  font-family: "IBM Plex Mono", monospace; text-align: right; }
.asset-in .ab-cur { font-size: 12px; color: var(--muted); }

/* [BULK-SAVE] 패널 제목줄 오른쪽 끝에 저장 버튼. 목록 맨 아래에 두면
   12종목을 지나 스크롤해야 닿는다. */
.panel-head { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 6px; }
.panel-head h2 { margin: 0; }

@media (max-width: 480px) { .asset-in input { width: 82px; } }


/* [SETTINGS-TABS] 하위 탭은 바깥 탭과 다른 모양으로. 같은 밑줄 방식이면
   어느 쪽이 상위인지 알 수 없어 두 줄이 그냥 나란한 탭처럼 보인다.
   바깥=밑줄, 안쪽=알약 버튼으로 갈라 계층을 눈으로 구분한다. */
.tabs-sub { display: flex; gap: 6px; margin: 4px 0 16px; border-bottom: none;
  padding-left: 2px; }
.tabs-sub .tab-btn2 { cursor: pointer; padding: 4px 12px; font-size: 12.5px;
  font-family: inherit; color: var(--muted); background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 999px; }
.tabs-sub .tab-btn2:hover { color: var(--text); }
.tabs-sub .tab-btn2.active { color: #1a1a1a; background: var(--amber);
  border-color: var(--amber); font-weight: 600; }

/* [STATS] 성과 요약 */
.stat-row { display: flex; gap: 28px; flex-wrap: wrap; }
.stat-big { display: flex; flex-direction: column; gap: 3px; }
.stat-big .stat-k { font-size: 12px; color: var(--muted); }
.stat-big .stat-v { font-size: 20px; font-weight: 600; }

}

/* [PNL-ROW] 종목별 손익 = 두 줄. 4열 그리드로 한 줄에 넣었더니 800px 폭에서
   열이 뭉개져 세 줄로 접혔고, 비중 막대가 전부 100%로 차 31%와 1%가 같아 보였다.
   원인은 유동 열(1.6fr/1.3fr)과 막대의 flex:1 1 auto였다. */
/* [PNL-ROW] 비중 막대가 블록의 바닥이자 구분선이다 — 아래 종목 것으로 오해되지 않는다. */
.pnl-blk { padding: 12px 0 0; }
/* [PNL-ALIGN] 두 줄 모두 같은 2열 그리드를 쓴다. flex + space-between으로 두면
   오른쪽 항목의 폭이 내용에 따라 달라져 위아래 줄의 세로가 어긋난다
   (2026-08-21 실측: 손익 금액과 비중이 서로 다른 위치에 떨어졌다). */
.pnl-top, .pnl-sub { display: grid; align-items: baseline; gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto; }
.pnl-top > :last-child, .pnl-sub > :last-child { text-align: right; }
.pnl-sub { margin-top: 3px; }
.pnl-blk .p-name { font-size: 14px; min-width: 0; overflow-wrap: anywhere; }
.pnl-blk .p-pnl { font-size: 14px; font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.pnl-blk .p-price { font-size: 12px; color: var(--muted); white-space: nowrap; }
.pnl-blk .p-meta { font-size: 12px; white-space: nowrap; }
.pnl-blk .p-meta .hint { margin-left: 10px; font-size: 11px; }
/* 전체 폭 막대. 모든 종목이 같은 폭을 기준으로 하므로 눈으로 바로 비교된다. */
.pnl-blk .p-bar { display: block; margin-top: 10px; height: 3px; border-radius: 2px;
  background: var(--line); overflow: hidden; }
.pnl-blk .p-bar i { display: block; height: 100%; border-radius: 2px;
  background: var(--amber); }
@media (max-width: 520px) {
  /* 좁으면 190px 고정 열이 이름을 짓눌러 종목명이 두 줄로 접힌다. 열 폭을 줄인다. */
  .pnl-blk .p-price { font-size: 11.5px; }
  .pnl-blk .p-meta { font-size: 11.5px; }
}

/* [DIV-STATS] 배당 목록. 지급일 · 종목 · 주당 · 금액 4열. */
.div-list { margin-top: 14px; }
.div-row { display: grid; align-items: baseline; gap: 10px;
  grid-template-columns: 130px minmax(0,1fr) 110px minmax(0,150px);
  padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: 13px; }
.div-row:last-child { border-bottom: none; }
/* 아직 안 받은 건은 왼쪽 선으로 구분한다 — 기준일과 지급일이 한 달 넘게 벌어져
   '들어온 돈'과 '들어올 돈'이 섞이면 합계를 오해한다. */
.div-row.upcoming { border-left: 2px solid var(--amber); padding-left: 8px; }
.div-row .d-when b { font-family: "IBM Plex Mono", monospace; font-size: 12px; }
.div-row .d-when .hint { display: block; font-size: 10.5px; }
.div-row .d-name { overflow-wrap: anywhere; }
.div-row .d-per, .div-row .d-amt { text-align: right; white-space: nowrap; }
@media (max-width: 620px) {
  .div-row { grid-template-columns: minmax(0,1fr) auto; row-gap: 2px; }
  .div-row .d-when { grid-column: 1; }
  .div-row .d-name { grid-column: 1; }
  .div-row .d-per { grid-column: 2; grid-row: 1; }
  .div-row .d-amt { grid-column: 2; grid-row: 2; }
}
/* [DIV-YIELD] 수익률 기준 토글. 세 값을 모두 렌더해 두고 패널의 data-yield-mode가
   하나만 노출한다 — 상태가 DOM 속성 하나뿐이라 JS가 최소로 남는다.
   라벨은 수치와 한 span에 있어 토글과 무관하게 항상 함께 보인다. */
.yield-head { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.yield-head h2 { margin: 0; }
.d-per .y-wrap { display: block; font-size: 10.5px; }
[data-yield-mode] .y-market, [data-yield-mode] .y-current,
[data-yield-mode] .y-cost { display: none; }
[data-yield-mode="market"] .y-market { display: inline; }
[data-yield-mode="current"] .y-current { display: inline; }
[data-yield-mode="cost"] .y-cost { display: inline; }

/* [ASSET-DETAIL] 종목 상세 차트. 외부 라이브러리 없이 서버에서 좌표를 계산한다. */
/* [CHART-HOVER] height를 고정하면 viewBox 비율과 어긋나 좌우에 여백이 생기고,
   그만큼 x 좌표 변환(픽셀 = viewBoxX / 720 × 실제폭)이 틀어진다.
   거래량 유무로 viewBox 높이가 달라지므로 auto가 맞다. */
.chart { width: 100%; height: auto; display: block; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .axis { fill: var(--muted); font-size: 10px;
  font-family: "IBM Plex Mono", monospace; }
.chart .line-pf { fill: none; stroke: var(--amber); stroke-width: 2;
  stroke-linejoin: round; stroke-linecap: round; }
/* 평단가 기준선 — 지금 가격이 그 위인지 아래인지가 한눈에 들어온다. */
.chart .avg-line { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 5 4; }
.chart .avg-label { font-size: 9px; }
/* 공시·브리핑이 있던 날. 브리핑이 있으면 채워서 눌러볼 값이 있다고 알린다. */
.chart .mark { fill: var(--panel); stroke: var(--amber); stroke-width: 1.5; }
.chart .mark.has-brief { fill: var(--amber); }
.chart-head { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
/* [ASSET-RANGE] 기간 버튼이 8개다(1주~전체). 좁은 화면에서 한 줄에 안 들어가면
   넘치는 대신 줄바꿈한다 — flex 기본값 nowrap이면 버튼이 찌그러지거나 잘린다. */
.seg-btns { display: flex; gap: 4px; flex-wrap: wrap; }
.seg-btns .seg { padding: 4px 11px; font-size: 12.5px; border-radius: 999px;
  color: var(--muted); border: 1px solid var(--line); background: var(--panel-2);
  text-decoration: none; }
.seg-btns .seg.on { color: var(--text); border-color: var(--amber); }
/* [ASSET-RANGE] 폰에서는 8개가 한 줄에 안 들어간다. 줄바꿈에 맡기면 들어가는
   만큼만 채우고 넘겨서 6/2로 갈리고, 둘째 줄이 허전하다. 한 줄에 밀어 넣으려면
   글자와 여백을 크게 줄여야 하는데 그러면 탭 영역이 작아진다.
   4열 격자로 고정해 4/4로 나눈다 — 버튼 폭이 모두 같아지고 탭 목표도 일정하다. */
@media (max-width: 560px) {
  .seg-btns { display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 6px; width: 100%; }
  .seg-btns .seg { text-align: center; padding: 6px 4px; }
}
.chart-legend { display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.chart-legend .sw { display: inline-block; width: 14px; height: 3px;
  margin-right: 6px; vertical-align: middle; border-radius: 2px; }
.chart-legend .sw-pf { background: var(--amber); }
.chart-legend .sw-avg { background: var(--muted); }
.chart-legend .mk { display: inline-block; width: 8px; height: 8px; margin-right: 6px;
  border-radius: 50%; background: var(--amber); vertical-align: middle; }

/* [ASSET-DETAIL] 그날 무슨 일이 있었나 — 차트 표식과 같은 날짜를 목록으로. */
.mark-row { display: grid; align-items: center; gap: 10px;
  grid-template-columns: 100px minmax(0,1fr) auto;
  padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: 13px; }
.mark-row:last-child { border-bottom: none; }
.mark-row .m-date { font-size: 12px; color: var(--muted); }
.mark-row .m-body .tag { margin-right: 4px; }
@media (max-width: 560px) {
  .mark-row { grid-template-columns: minmax(0,1fr) auto; }
  .mark-row .m-date { grid-column: 1 / -1; }
}
/* [LINK-VISIBLE] 눌러보기 전까지 알 수 없는 링크는 없는 것과 같다.
   점선 밑줄이 --line 색이라 배경과 구분되지 않았다. 앰버 계열로 통일하고
   호버에 화살표를 붙여 '이동한다'는 걸 분명히 한다. */
a.tolink { color: var(--text); text-decoration: none;
  border-bottom: 1px solid var(--amber-dim); }
a.tolink:hover { color: var(--amber); border-bottom-color: var(--amber); }
a.tolink::after { content: " ›"; color: var(--amber-dim); font-weight: 400; }
a.tolink:hover::after { color: var(--amber); }

/* [DIV-MARK] 표식 색 구분. 공시(주황 테두리) vs 배당(초록) vs 둘 다.
   배당주는 기준일이 주가 흐름의 일부다 — 배당락으로 다음 거래일에 갭이 생긴다. */
.chart .mark.k-div { stroke: var(--up); }
.chart .mark.k-both { stroke: var(--up); stroke-width: 2.5; }
.chart .mark.k-div.has-brief, .chart .mark.k-both.has-brief { fill: var(--up); }
/* [MARK-HOVER] 목록 행에 마우스를 올렸을 때 커지는 표식. */
.chart .mark { transition: r .12s ease, stroke-width .12s ease; }
.chart .mark.on { r: 7; stroke-width: 3; }
.chart-legend .mk-disc { background: var(--amber); }
.chart-legend .mk-div { background: var(--up); }

/* [ASSET-DETAIL] 공시 태그를 눌러 DART 원문으로. 새 탭이라 보던 자리를 잃지 않는다.
   링크와 비링크가 섞여 있으므로 색으로 구분한다 — 눌러보기 전에 알 수 있어야 한다. */
.tag.tag-link { color: var(--amber); border-color: var(--amber-dim);
  text-decoration: none; }
.tag.tag-link:hover { background: var(--amber-dim); color: var(--text); }
.tag.tag-link::after { content: " ↗"; font-size: .85em; opacity: .7; }
.tag.tag-div { color: var(--up); border-color: rgba(78,201,163,.35); }
.mark-row { cursor: default; }
.mark-row:hover { background: var(--panel-2); }

/* [X-AXIS] 세로 안내선은 격자보다 흐리게 — 값 읽기를 방해하면 안 된다. */
.chart .xtick { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 5; opacity: .5; }
/* [VOLUME] 거래량 막대. 가격선보다 뒤로 물러나 보이도록 낮은 대비로. */
.chart .vbar { fill: var(--amber); opacity: .35; }
.chart .vbar:hover { opacity: .7; }

/* [CHART-HOVER] 마우스가 있는 날짜의 값 표시. */
.chart-wrap { position: relative; }
.chart .hzone { fill: transparent; }        /* 보이지 않는 히트존 */
.chart .hline { stroke: var(--amber); stroke-width: 1; stroke-dasharray: 3 3; opacity: .6; }
.chart .hdot { fill: var(--amber); stroke: var(--panel); stroke-width: 2; }
.hover-box { position: absolute; top: 0; pointer-events: none;
  background: var(--panel-2); border: 1px solid var(--amber-dim); border-radius: 6px;
  padding: 4px 9px; font-size: 12px; white-space: nowrap;
  font-family: "IBM Plex Mono", monospace; }
.hover-box span { color: var(--muted); }


/* [IA-HOME] 홈 요약 카드. /가 브리핑 전문이던 것을 /briefing으로 옮기고
   '오늘 어떤가'를 스크롤 없이 보여주는 화면을 앞에 뒀다. */
.home-brief .hb-head, .panel > .hb-head { display: flex; align-items: flex-start;
  justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.hb-title { font-size: 15px; font-weight: 600; color: var(--text); }
.hb-wps { list-style: none; margin: 0; padding: 0; }
.hb-wps li { display: flex; gap: 8px; align-items: baseline; padding: 7px 0;
  border-top: 1px solid var(--line); font-size: 13.5px; line-height: 1.55; }
.hb-wps li:first-child { border-top: 0; }
.hb-sect { flex: 0 0 auto; font-size: 11.5px; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; }
.hb-pl { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-size: 18px; font-weight: 600; }
.hb-pl .up { color: var(--price-up); font-size: 14px; }
.hb-pl .down { color: var(--price-down); font-size: 14px; }
/* [KR-WRAP] 한국어는 표 칸에서 음절 단위로 끊겨 word-break가 안 먹는다 — flex 행. */
.mv-row { display: flex; align-items: baseline; gap: 10px; padding: 8px 0;
  border-top: 1px solid var(--line); text-decoration: none; color: var(--text);
  font-size: 13.5px; }
.mv-row:first-of-type { border-top: 0; }
.mv-row .mv-name { flex: 1 1 auto; min-width: 0; }
.mv-row .up { color: var(--price-up); }
.mv-row .down { color: var(--price-down); }


/* [ANN-DIV] 연간 배당 이력. 연도로 묶어 그 해 합계를 머리에 둔다 —
   종목이 12개면 평평한 목록에서는 어느 해 것인지 눈으로 못 가른다. */
.ann-year { margin-top: 14px; }
.ann-year:first-of-type { margin-top: 8px; }
.ann-head { display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; padding-bottom: 6px; border-bottom: 1px solid var(--line);
  font-size: 13.5px; font-weight: 600; }
.ann-head .ann-y { color: var(--amber); }