/* ============================================================
   iBOD 레트로 테마 — 사용자 화면 (index.html, journal.html)

   바탕은 원래 쓰던 푸른색·검정 그대로다. 그게 제일 잘 읽힌다.
   이 파일은 그 위에 90년대 느낌만 얹는다. 색을 갈아엎지 않는다.

   얹는 것
   - 갈무리 비트맵 글꼴을 고유 크기(14px / 11px)로. 늘리면 흐려진다.
   - 각진 모서리. 둥근 모서리와 알약 버튼을 걷어낸다.
   - Win98 입체 테두리. 다만 세이지 회색이 아니라 어두운 남색 톤으로.
   - 남색 그라데이션 제목표시줄.
   - 강조는 주황(앰버). 어두운 바탕에서 가장 또렷하다.

   안 하는 것
   - 주사선. Win98 에는 없었고 작은 글자를 갉아먹는다.
   - 카드 왼쪽 세로 색줄. 허술해 보인다. 안 읽음은 주황 점으로만 표시한다.
   - 가짜 볼드. 갈무리에 굵은 굵기가 없어 획이 뭉갠다.

   이 파일 링크만 빼면 원래 모습으로 돌아간다.
   ============================================================ */

/* ============================================================
   낮 / 밤 두 벌.

   짜임·글꼴·테두리는 완전히 같고 색만 갈린다.
   그래서 아래 규칙들은 전부 변수만 읽는다. 색을 직접 박은 곳이 없어야
   한쪽을 고칠 때 다른 쪽이 조용히 어긋나는 일이 안 생긴다.

   기본은 밤(어두운 남색). 낮은 body[data-theme="day"] 로 바뀐다.
   낮은 관리자 화면(retro-w98.css)과 같은 세이지 민트다.
   ============================================================ */

/* ---------- 밤 (기본) ---------- */
:root {
  --r-shell:     #171c24;   /* 앱 바깥 */
  --r-screen:    #070b12;   /* 피드 안쪽. 움푹 들어간 화면 */
  --r-panel:     #121a2a;   /* 툴바 · 사이드바 */
  --r-card:      #131c2e;   /* 카드 */
  --r-card-hi:   #2c3d5c;   /* 카드 밝은 모서리 */
  --r-card-lo:   #05080e;   /* 카드 어두운 모서리 */

  --r-btn:       #1e2a3f;
  --r-btn-hi:    #3d5273;
  --r-btn-lo:    #05080e;
  --r-btn-text:  #cfdaea;
  --r-hover:     #26344c;
  --r-press:     #0d1526;

  --r-text:      #eef2f8;   /* 카드 위에서 약 15:1 */
  --r-meta:      #8b9cb5;
  --r-meta-dim:  #6f7f96;   /* 읽은 글의 머리줄 */
  --r-faint:     #61718b;   /* 입력창 안내문 · 0건 표시 */
  --r-icon:      #7f8fa8;   /* 카드 위 작은 아이콘 */
  --r-dim:       #9fb0c8;   /* 브리핑 목록의 읽은 줄 */
  --r-lede:      #c3cfe0;   /* 저널 요약 */
  --r-link:      #7fb0ff;
  --r-line:      #22304a;
  --r-input:     #060a11;
  --r-sun:       #ff7b7b;   /* 일요일 · 삭제 */

  --r-amber:     #ffb000;   /* 강조. 어두운 면에서 가장 또렷하다 */
  --r-title1:    #000080;
  --r-title2:    #1084d0;
  --r-title-text: #ffffff;
  --r-title-sub:  #cfe0f5;

  --r-overlay:        rgba(3, 5, 9, .78);
  --r-overlay-strong: rgba(3, 5, 9, .88);

  /* 앱 머리줄. 밤에는 Win98 제목표시줄처럼 남색 그라데이션 */
  --r-head-bg:   linear-gradient(90deg, #000080, #1084d0);
  --r-head-text: #ffffff;
  --r-head-sub:  #cfe0f5;
  --r-head-line: #05080e;
  --r-strong:    #ffb000;   /* b·strong 강조 */
  --r-press-text: var(--r-amber);

  /* 시세 차트 — 오르면 빨강, 내리면 파랑 (국내 관행) */
  --r-up:     #f43f5e;
  --r-up-bg:  rgba(244, 63, 94, .12);
  --r-down:   #3b82f6;
  --r-down-bg: rgba(59, 130, 246, .12);
  --r-grid:    rgba(124, 152, 196, .10);   /* 차트 눈금. 있는 듯 없는 듯 */
}

/* ---------- 낮 ----------
   관리자 화면(retro-w98.css)에서 실제로 쓰는 값을 그대로 옮겼다. 짐작이 아니라 측정값이다.
     바탕화면 #5f7a68 · 모든 판 #c6d2c6 · 밝은 모서리 #eef4ee
     어두운 모서리 #000000 (순검정) · 입력칸 #f4f8f4 · 글자 #000000
   핵심은 모서리가 순검정이라는 점이다. 이게 Win98 특유의 또렷한 맛을 낸다.
   예전에는 부드러운 회녹색(#4a5a4d)을 써서 흐리멍덩했다.
   카드도 판과 같은 세이지다. 색이 아니라 입체 테두리로 구분한다. */
body[data-theme="day"] {
  --r-shell:     #5f7a68;   /* 바깥 바탕화면 */
  --r-screen:    #c6d2c6;   /* 판 — 카드가 놓이는 자리 */
  --r-panel:     #c6d2c6;   /* 툴바 · 사이드바 · 단추 */
  --r-card:      #f8faf8;   /* 읽는 면은 흰색. CMS 의 통계 카드·입력칸이 흰 것과 같다 */
  --r-card-hi:   #ffffff;
  --r-card-lo:   #000000;   /* 순검정 모서리 — Win98 특유의 또렷함 */

  --r-btn:       #c6d2c6;
  --r-btn-hi:    #eef4ee;
  --r-btn-lo:    #000000;
  --r-btn-text:  #000000;
  --r-hover:     #d6e0d6;
  --r-press:      #000080;   /* 눌린 탭은 남색 바탕 */
  --r-press-text: #ffffff;

  --r-text:      #000000;
  --r-meta:      #404040;
  --r-meta-dim:  #5e6b60;
  --r-faint:     #5e6b60;
  --r-icon:      #303a32;
  --r-dim:       #404040;
  --r-lede:      #101510;
  --r-link:      #000080;
  --r-line:      #879589;
  --r-input:     #f4f8f4;
  --r-sun:       #c00000;   /* 삭제·일요일. 진한 밤갈색 대신 그냥 빨강 */

  /* 밤에는 호박색(amber)이 가장 또렷하지만, 밝은 세이지 판 위에서는
     그걸 진하게 내린 갈색(#8a4a00)이 된다. 강조도 경고도 아닌 어중간 붉은끔이라
     보기만 탁하다. 낮에는 검정으로 간다. 관리자 화면도 강조는 검정이다. */
  --r-amber:     #000000;
  --r-title-text: #ffffff;
  --r-title-sub:  #dbe7f7;

  --r-overlay:        rgba(48, 60, 50, .62);
  --r-overlay-strong: rgba(28, 36, 30, .82);

  /* 낮에는 남색 띠가 혼자 튄다. 관리자 화면처럼 세이지 판으로 둔다.
     남색 제목표시줄은 대화상자(브리핑·내 정보)에만 남긴다. */
  --r-head-bg:   #c6d2c6;
  --r-head-text: #000000;
  --r-head-sub:  #404040;
  --r-head-line: #000000;
  --r-strong:    #000080;   /* 관리자 화면과 같은 남색 강조 */

  --r-up:      #c62828;
  --r-up-bg:   rgba(198, 40, 40, .14);
  --r-down:    #1546a0;
  --r-down-bg: rgba(21, 70, 160, .14);
  --r-grid:    rgba(0, 0, 0, .09);
}

/* ---------- 글꼴: 관리자 화면(CMS)과 똑같이 ----------
   CMS 는 Galmuri11 을 고유 크기(11px)보다 키워서 쓴다 — 본문 16px, 제목 19px,
   단추 13px, 라벨 12px. 비트맵을 확대하면 획이 굵어져서 굵은 글꼴처럼 보인다.
   갈무리에는 진짜 굵은 굵기가 없으니, CMS 의 그 묵직한 느낌은 여기서 나온다.

   공개 화면은 그동안 Galmuri14 를 고유 크기 14px 로 써서 획이 가늘었다.
   선명하긴 해도 CMS 옆에 두면 힘이 없어 보인다. 크기와 글꼴을 CMS 에 맞춘다. */
body, button, input, textarea, select {
  font-family: 'Galmuri11', 'DungGeunMo', monospace !important;
  font-size: 16px;
  letter-spacing: 0;
  -webkit-font-smoothing: none !important;
}

/* 곁다리 정보 — CMS 의 라벨과 같은 12px */
.feed-time, .ticker-label, .journal-read, .connection-status,
.it-meta, .a-meta, .watch-hint, .watch-count, .ibod-login-status,
.counter, .hint, .upload-badge, .legal-footer, .motto,
.market-time, .brief-label, .brief-kind, .card-tag,
.unread-badge, .level-badge, .brief-source, .company-bar {
  font-family: 'Galmuri11', monospace !important;
  font-size: 12px !important;
}

/* 단추 — CMS 와 같은 13px */
.tab-btn, .toolbar-btn, .reaction-btn, .ibod-cal-tab,
.ibod-login-buttons button, .article-link, .journal-write-link {
  font-size: 13px !important;
}

/* 숫자는 자리가 흔들리면 안 된다 */
.ticker-text, .ibod-cal-time, .ibod-cal-vals, .ibod-cal-date-h, .feed-time,
#kospi-price, #kosdaq-price, #kospi-change, #kosdaq-change,
#nasdaq-price, #nasdaq-change, #sp500-price, #sp500-change,
#dow-price, #dow-change {
  font-family: 'GalmuriMono11', monospace !important;
}

/* 갈무리에 굵은 굵기가 없다. 억지로 두껍게 그리면 획이 뭉갠다 */
body, body *, button, input, textarea, select,
h1, h2, h3, h4, b, strong {
  font-weight: 400 !important;
}
b, strong { color: var(--r-strong) !important; }

/* ---------- 각진 모서리 ---------- */
*, *::before, *::after {
  border-radius: 0 !important;
  text-shadow: none !important;
}

/* !important 끼리는 여전히 선택자 우선순위로 겨룬다.
   그래서 위의 * 규칙만으로는 .reaction-btn 같은 클래스 규칙을 못 이긴다.
   알약 모양을 박아 둔 곳들만 따로, 더 좁은 선택자로 한 번 더 눌러 준다. */
body .reaction-btn,
body .ibod-login-buttons button,
body .ibod-font-tools button,
body .ibod-my-post-item .st,
body .tab-btn, body .toolbar-btn, body .card-tag,
body .feed-card, body .market-card, body .brief-window,
body .company-bar button, body .watch-chip, body .level-badge,
body .search-wrap input, body .journal-write-link, body .article-link {
  border-radius: 0 !important;
}

/* ---------- 틀과 화면 ----------
   바깥은 케이스, 피드 안쪽은 움푹 들어간 화면. 단말기가 실제로 이런 짜임이었다. */
body { background: var(--r-shell) !important; color: var(--r-text) !important; }

.sidebar-feed, .main-dashboard, .tabs, .tabs-nav {
  background: var(--r-panel) !important;
}

.feed-area, .tab-content-area, .mobile-panel {
  background: var(--r-screen) !important;
  border: 2px solid !important;
  border-color: var(--r-card-lo) var(--r-card-hi) var(--r-card-hi) var(--r-card-lo) !important;
}
.tab-content-area, .mobile-panel { padding: 8px !important; }

/* ---------- 앱 머리줄 ----------
   밤에는 Win98 제목표시줄(남색), 낮에는 관리자 화면과 같은 세이지 판.
   낮에 남색 띠만 남기면 그 줄 하나가 화면에서 혼자 튄다. */
.feed-header, .top-bar, body > .wrap > header {
  background: var(--r-head-bg) !important;
  color: var(--r-head-text) !important;
  border: 0 !important;
  border-bottom: 2px solid var(--r-head-line) !important;
  padding: 7px 10px !important;
  box-shadow: none !important;
}
.motto, body > .wrap > header .tagline { color: var(--r-head-sub) !important; }

/* 이미지 뷰어 머리줄은 어두운 덮개 위에 뜬다. 낮에도 남색 그대로 둔다. */
.viewer-header {
  background: linear-gradient(90deg, var(--r-title1), var(--r-title2)) !important;
  color: var(--r-title-text) !important;
  border: 0 !important;
  padding: 7px 10px !important;
  box-shadow: none !important;
}

/* ---------- 카드 ----------
   왼쪽 세로 색줄은 쓰지 않는다. 입체 테두리만으로 충분하다. */
.feed-card {
  background: var(--r-card) !important;
  color: var(--r-text) !important;
  border: 2px solid !important;
  border-color: var(--r-card-hi) var(--r-card-lo) var(--r-card-lo) var(--r-card-hi) !important;
  border-left-width: 2px !important;
  box-shadow: none !important;
  margin-bottom: 9px !important;
  padding: 11px !important;
}

/* 본문 — 여기가 제일 많이 읽히는 곳이다 */
.feed-text, .article-original-body {
  font-family: 'Galmuri11', monospace !important;
  /* 크기는 A- / A / A+ 단추가 정한다. 여기서 고정하면 그 단추가 먹통이 된다.
     기본값 14px 는 Galmuri14 의 고유 크기라 가장 선명하다. */
  font-size: var(--ibod-feed-font-size, 17px) !important;
  line-height: 1.62 !important;
  color: var(--r-text) !important;
  margin: 0 !important;
}
.feed-text + .feed-text { margin-top: 10px !important; }

/* 새로고침 단추.
   기호 하나뿐이라 좁게 두되, 글자 크기는 옆 단추들보다 키운다.
   같은 12px 로 두면 '모두 읽음' 같은 글자 옆에서 점 하나처럼 묻힌다. */
/* 새로고침은 일반적인 화살표 표기를 쓰되, 버튼 한가운데에 고정한다. */
#ibod-refresh {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  padding: 0 !important;
}
#ibod-refresh span {
  display: block !important;
  font-family: Arial, sans-serif !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  transform: none;
}

/* 긴 글 접기.
   높이를 px 로 잡으면 글자를 키운 사람에게는 서너 줄만 보인다.
   줄 수로 잡아야 누구에게나 열 줄이다. */
.feed-text-body.is-folded {
  max-height: calc(1.65em * 10);
  overflow: hidden;
}
/* 긴 글의 '더보기'.
   네모 단추가 아니라 글줄이다. 글 바로 밑에 한 줄로 붙어 있어야
   이어지는 글의 일부로 읽힌다. 네모를 두르면 거기서 글이 끝난 것처럼 보인다.
   (.feed-more 는 목록 맨 밑 '다음 60건' 단추가 이미 쓰고 있어 이름을 달리했다.) */
.text-more {
  display: inline-block !important;
  width: auto !important;
  margin: 6px 0 0 !important;
  padding: 2px 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #2f8bff !important;
  font-family: inherit !important;
  font-size: calc(var(--ibod-feed-font-size, 15px) - 1px) !important;
  font-weight: 700 !important;
  text-align: left !important;
  cursor: pointer;
}
.text-more:active { opacity: .6; }
body[data-theme="day"] .text-more { color: #0000ee !important; }

.feed-time {
  display: block !important;
  color: var(--r-meta) !important;
  margin-bottom: 7px !important;
  line-height: 1.4 !important;
  padding-right: 78px !important;   /* 오른쪽 위 단추 자리 */
}
.feed-time span { color: var(--r-link) !important; }

/* ---------- 읽음 표시 ----------
   예전에는 읽은 카드 전체에 opacity 를 걸었다. 그러면 본문 글자까지 흐려져서
   읽은 글은 아예 안 읽히는 상태가 됐다. 본문 색은 건드리지 않는다.
   안 읽은 글만 시각 앞에 주황 점을 찍는다. */
.feed-card.is-read { opacity: 1 !important; }
.feed-card.is-read .feed-time { color: var(--r-meta-dim) !important; }

/* 읽음·안 읽음을 점 하나로.
   예전에는 안 읽은 것에만 점을 찍었는데, 점이 없는 것이 ‘읽음’ 인지
   그냥 원래 그런 건지 구분이 안 됐다. 이제 둘 다 찍는다 —
   안 읽은 것은 주황, 읽은 것은 희미한 회색. 자리가 같으니 훑으면 바로 보인다. */
/* 주황이 보이면 안 읽은 것, 안 보이면 읽은 것. 둘 중 하나뿐이다.
   예전에는 읽은 글에도 회색 점을 찍어 두 점을 견줘야 했고, 작은 점이라 잘 안 보였다.
   이제 안 읽은 글만 왼쪽 띠와 점이 주황으로 선다.
   낮 화면의 --r-amber 는 검정이라 쓰지 않고 주황을 직접 박는다. */
.feed-time::before {
  content: '● ';
  color: transparent;
}
.feed-card:not(.is-read) .feed-time::before {
  color: #ff9f0a !important;
}


/* 여기까지 읽었다는 금.
   안 읽은 것과 읽은 것의 경계에 한 줄 그어 둔다.
   오랜만에 들어왔을 때 어디까지 봤는지를 한눈에 알게 한다. */
.read-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 12px;
  color: var(--r-amber);
  font-family: 'Galmuri11', monospace;
  font-size: 11px;
  white-space: nowrap;
}
.read-line::before,
.read-line::after {
  content: '';
  flex: 1 1 auto;
  border-top: 1px dashed var(--r-amber);
  opacity: .55;
}

/* ---------- 버튼 전반: Win98 입체, 어두운 남색 ---------- */
.tab-btn, .ibod-login-buttons button, .reaction-btn, .pdf-btn,
.journal-write-link, .ibod-font-tools button, .ibod-cal-tab,
.toolbar-btn, .ibod-cal-month-nav button, .watch-chip button,
.push-toggle, .ibod-push-banner-actions button, .back, .article-link,
.company-bar button, .brief-title button, .card-tag, .ibod-to-top {
  background: var(--r-btn) !important;
  color: var(--r-btn-text) !important;
  border: 2px solid !important;
  border-color: var(--r-btn-hi) var(--r-btn-lo) var(--r-btn-lo) var(--r-btn-hi) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transform: none !important;
  transition: none !important;
}

.tab-btn:active, .ibod-login-buttons button:active, .reaction-btn:active,
.journal-write-link:active, .ibod-cal-tab:active, .toolbar-btn:active,
.push-toggle:active, .card-tag:active, .ibod-font-tools button:active {
  border-color: var(--r-btn-lo) var(--r-btn-hi) var(--r-btn-hi) var(--r-btn-lo) !important;
  transform: none !important;
}

.reaction-btn:hover, .tab-btn:hover, .toolbar-btn:hover {
  background: var(--r-hover) !important;
  transform: none !important;
}

/* 눌린 상태(현재 탭 · 켜진 토글)는 안으로 들어간 모양 + 주황 글자 */
.tab-btn.active, .ibod-cal-tab.active, .ibod-cal-tab.on,
/* 켜져 있는 단추는 눌린 것처럼 파이고 주황으로 밝힌다.
   파이기만 하면 어두운 판에서 눌린 건지 그냥 어두운 건지 구별이 안 간다.

   --r-amber 를 쓰지 않는다. 낮에는 그 값이 검정이라(붉은끼를 뺐다)
   남색으로 파인 바탕 위에서 글씨가 사라진다. 눌린 바탕은 밤이든 낮이든
   어두우므로 주황 하나를 그대로 박는다. */
.toolbar-btn[data-on="1"], .push-toggle[data-state="on"] {
  background: var(--r-press) !important;
  color: #ffb000 !important;
  border-color: var(--r-btn-lo) var(--r-btn-hi) var(--r-btn-hi) var(--r-btn-lo) !important;
}
.push-toggle[data-state="off"] { color: var(--r-meta) !important; }

/* ---------- 반응 단추 ----------
   알약 모양에 글씨가 커서 본문 두 줄만큼 자리를 먹고 있었다. */
.reaction-row {
  gap: 5px !important;
  margin-top: 8px !important;
  padding-top: 7px !important;
  border-top: 1px solid var(--r-line) !important;
}
.reaction-btn {
  padding: 5px 8px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  min-width: 0 !important;
  min-height: 0 !important;
}
.reaction-btn.pending { opacity: .55 !important; }

/* ---------- 검색창 · 입력 ---------- */
.search-wrap { background: var(--r-panel) !important; border: 0 !important; padding: 7px !important; }
.search-wrap input, input[type="text"], input[type="search"], textarea, select {
  background: var(--r-input) !important;
  color: var(--r-text) !important;
  border: 2px solid !important;
  border-color: var(--r-card-lo) var(--r-card-hi) var(--r-card-hi) var(--r-card-lo) !important;
  padding: 7px 9px !important;
}
::placeholder { color: var(--r-faint) !important; }

/* ---------- 툴바 ---------- */
.feed-toolbar {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 6px 7px !important;
  background: var(--r-panel) !important;
  border-bottom: 2px solid var(--r-btn-lo) !important;
}
.toolbar-btn { padding: 4px 8px !important; cursor: pointer; white-space: nowrap; }
.unread-badge { color: var(--r-amber) !important; margin-right: auto !important; }
.unread-badge[data-zero="1"] { color: var(--r-faint) !important; }

/* 내 키워드 새 소식 — 하단 탭을 더 늘리지 않고 내 정보에서 여는 개인화 화면 */
.keyword-feed-card { max-width: 620px !important; }
.keyword-feed-sub { color: var(--r-faint); font-size: 12px; line-height: 1.55; margin: 10px 0; }
.keyword-feed-chips { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:10px; }
.keyword-feed-chips span, .keyword-feed-type, .discussion-kind {
  display:inline-block; border:1px solid var(--r-btn-hi); background:var(--r-press); color:var(--r-amber);
  padding:2px 6px; font-size:11px; font-weight:800;
}
.keyword-feed-list { display:grid; gap:7px; max-height:min(58vh,520px); overflow:auto; }
.keyword-feed-item { display:block; text-align:left; width:100%; background:var(--r-card); color:var(--r-text); border:1px solid var(--r-btn-hi); padding:10px; cursor:pointer; text-decoration:none; }
.keyword-feed-outbound:hover { border-color:var(--r-amber); }
.keyword-feed-item strong { display:block; font-size:13px; line-height:1.5; margin:5px 0; }
.keyword-feed-item small { color:var(--r-faint); font-size:11px; }
.keyword-feed-empty { padding:28px 12px; color:var(--r-faint); text-align:center; border:1px solid var(--r-btn-hi); }

/* 의견은 주장 자체보다 성격을 먼저 보이게 한다. */
.discussion-kind { margin-right:4px; }
.kind-fact { color:#7dd3fc; border-color:#0e7490; }
.kind-counter { color:#fda4af; border-color:#be123c; }
.kind-context { color:#c4b5fd; border-color:#6d28d9; }
.discussion-kind { margin:0 0 7px; min-width:94px; background:var(--r-card); }

/* A/B 첫 화면: 시간·제목·바뀐 핵심만 먼저, 전후 제목은 그 아래 */
.revision-first-summary { display:flex; flex-wrap:wrap; gap:6px; color:var(--r-faint); font-size:11px; margin:7px 0; }
.revision-first-summary span { border:1px solid var(--r-btn-hi); padding:3px 6px; }
.revision-first-summary b { color:var(--r-text); }
.revision-first-summary a { border:1px solid var(--r-amber); padding:3px 6px; color:var(--r-amber); text-decoration:none; }
.revision-first-summary a:hover { background:var(--r-amber); color:var(--r-bg); }
.revision-highlights { display:grid; gap:4px; margin:8px 0; }
.revision-highlight { font-size:12px; line-height:1.5; padding:6px 7px; border-left:3px solid; background:var(--r-card); }
.revision-highlight b { display:inline-block; margin-right:6px; }
.revision-highlight.is-added { border-left-color:#22c55e; color:#dcfce7; }
.revision-highlight.is-removed { border-left-color:#f87171; color:#fecaca; }

.ibod-myinfo-row .push-toggle {
  min-width:72px !important; padding:4px 8px !important; font-size:11px !important;
  vertical-align:middle;
}
.ibod-myinfo-row .notification-mode {
  margin-left:5px; max-width:142px; height:28px; padding:2px 5px;
  font-size:11px !important; vertical-align:middle;
}
.ibod-myinfo-row .quiet-hours {
  display:block; margin-top:5px; color:var(--r-faint); font-size:10px; line-height:1.35;
}
.ibod-myinfo-row .quiet-hours input { vertical-align:-1px; margin:0 4px 0 0; }

/* 알림 종류는 버튼 옆에 억지로 끼우지 않는다. 화면 폭이 좁아도
   선택 문구가 잘리지 않게 이 줄만 위아래로 여유를 둔다. */
.ibod-myinfo-row.notification-row {
  display:block !important;
}
.ibod-myinfo-row.notification-row dt {
  display:block;
  margin-bottom:6px;
}
.ibod-myinfo-row.notification-row dd {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  text-align:left !important;
}
.ibod-myinfo-row.notification-row .push-toggle {
  flex:0 0 auto;
}
.ibod-myinfo-row.notification-row .notification-mode {
  flex:1 1 170px;
  min-width:0;
  max-width:none;
  width:auto;
  margin-left:0;
  font-size:12px !important;
}
.ibod-myinfo-row.notification-row .quiet-hours,
.ibod-myinfo-row.notification-row .push-toggle-hint {
  flex:1 0 100%;
  text-align:left;
}

/* ---------- 탭 ---------- */
.tabs-nav { gap: 4px !important; padding: 6px !important; }
.tab-btn { padding: 6px 12px !important; font-size: 13px !important; }

/* ---------- 로그인 패널 ---------- */
.ibod-login-panel {
  background: var(--r-panel) !important;
  border-bottom: 2px solid var(--r-btn-lo) !important;
  padding: 7px !important;
}
.ibod-login-status { color: var(--r-meta) !important; }

/* ---------- 시세 카드 ---------- */
.market-card {
  background: var(--r-card) !important;
  border: 2px solid !important;
  border-color: var(--r-card-hi) var(--r-card-lo) var(--r-card-lo) var(--r-card-hi) !important;
  box-shadow: none !important;
}
.market-card h3 { color: var(--r-text) !important; font-size: 13px !important; }
.market-time { color: var(--r-meta) !important; }

/* ---------- 카드 위 작은 단추 (복사 · 스크랩 · 공유) ----------
   본문을 덮지 않게 오른쪽 위로 몰고, 테두리 없는 아이콘으로 둔다.
   복사는 사진·문서가 없는 텍스트 글에만 쓴다. */
.scrap-btn, .share-btn, .copy-btn {
  position: absolute !important;
  top: 9px !important;
  z-index: 3;
  background: transparent !important;
  border: 0 !important;
  color: var(--r-icon) !important;
  line-height: 1 !important;
  padding: 2px 4px !important;
  cursor: pointer;
}
.scrap-btn { right: 8px !important; font-size: 17px !important; }
.share-btn {
  right: 32px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 22px; height: 20px;
}
.share-btn svg { display: block; }
.copy-btn { right:57px !important; font-size:17px !important; }

.scrap-btn[data-on="1"] { color: var(--r-amber) !important; }
.share-btn:hover, .scrap-btn:hover, .copy-btn:hover { color: var(--r-amber) !important; }

/* ---------- 기업별 모아보기 ---------- */
.card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 9px 0 0; }
.card-tag { padding: 3px 7px !important; line-height: 1 !important; cursor: pointer; }
.card-tag::before { content: '▣ '; color: var(--r-amber); }

.company-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 12px;
  background: var(--r-panel);
  border-top: 2px solid var(--r-amber);
  font-family: 'Galmuri11', monospace;
  font-size: 11px;
  color: var(--r-text);
}
/* id 선택자가 [hidden] 을 이기는 사고를 막는다 */
.company-bar[hidden] { display: none !important; }
.company-bar-label { color: var(--r-meta); }
.company-bar-name  { color: var(--r-amber); }
.company-bar-count { color: var(--r-meta); }
.company-bar button { padding: 3px 9px !important; cursor: pointer; }

body.has-company-filter { padding-bottom: 36px; }
body.has-company-filter .ibod-font-tools { bottom: 56px !important; }

/* ---------- 아침 브리핑 ---------- */
.brief-panel {
  position: fixed;
  inset: 0;
  z-index: 10040;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--r-overlay);
}
.brief-panel[hidden] { display: none !important; }

.brief-window {
  width: 100%;
  max-width: 520px;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  background: var(--r-card);
  border: 2px solid;
  border-color: var(--r-card-hi) var(--r-card-lo) var(--r-card-lo) var(--r-card-hi);
}

.brief-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 8px 7px 12px;
  color: var(--r-title-text);
  font-family: 'Galmuri14', monospace;
  font-size: 14px;
  background: linear-gradient(90deg, var(--r-title1), var(--r-title2));
}
.brief-title button { font-size: 12px !important; padding: 3px 8px !important; cursor: pointer; }

.brief-body {
  overflow-y: auto;
  padding: 13px;
  color: var(--r-text);
  font-family: 'Galmuri14', monospace;
  font-size: 14px;
  line-height: 1.62;
}

.brief-summary { padding-bottom: 10px; border-bottom: 2px solid var(--r-line); }
.brief-summary b { color: var(--r-amber) !important; }
.brief-count { margin-left: 8px; color: var(--r-meta); font-size: 12px; }
.brief-count b { color: var(--r-text) !important; margin-right: 2px; }

.brief-section { margin-top: 14px; }
.brief-label { margin-bottom: 7px; color: var(--r-meta); }
.brief-companies { display: flex; flex-wrap: wrap; gap: 5px; }
/* 목록 속 [단독] 표. 언론사와 제목 사이를 갈라 주기만 하면 된다.
   제목의 일부처럼 읽혀야 하므로 색은 따로 주지 않는다. */
.brief-excl { margin-right: 4px; }
/* 기업 칩은 조금 진하게. 위쪽 한 무리가 기업이라는 걸 색으로도 알려 준다. */
.card-tag.is-company { border-color: var(--r-sun); font-weight: 700; }
/* 카드에 붙는 기업 표는 누르는 것이 아니다. 손 모양도, 눌리는 시늉도 없앤다. */
.card-tag.is-label { cursor: default !important; }
.card-tag.is-label:active { border-color: var(--r-btn-hi) var(--r-btn-lo) var(--r-btn-lo) var(--r-btn-hi) !important; }
.card-tag.is-label:hover { color: var(--r-btn-text) !important; }

.brief-list { margin: 0; padding-left: 22px; }
.brief-list li { margin-bottom: 7px; line-height: 1.55; color: var(--r-dim); }
.brief-list li.is-unread { color: var(--r-text); }
.brief-open-item { margin:0; padding:0; color:inherit; background:transparent; border:0; font:inherit; line-height:inherit; text-align:left; cursor:pointer; }
.brief-open-item:hover { color:var(--r-link); text-decoration:underline; }
.feed-card.brief-target { outline:2px solid var(--r-amber); outline-offset:2px; }
.brief-kind {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 5px;
  background: var(--r-btn);
  color: var(--r-btn-text);
}
.brief-empty { padding: 24px 0; text-align: center; color: var(--r-meta); }

/* ---------- 캘린더 ---------- */
.ibod-cal-strip, .ibod-cal-tabs { background: var(--r-panel) !important; }
.ibod-cal-tab { padding: 5px 10px !important; font-size: 12px !important; }

.ibod-cal-month-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 7px !important;
  background: var(--r-panel) !important;
}
.ibod-cal-month-nav strong { color: var(--r-amber) !important; font-size: 14px !important; }
.ibod-cal-month-nav button { padding: 4px 10px !important; cursor: pointer; }

.ibod-cal-grid-h, .ibod-cal-grid {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap: 2px !important;
}
.ibod-cal-grid-h { padding: 6px 4px 3px !important; }
.ibod-cal-grid-h span {
  text-align: center;
  font-family: 'Galmuri11', monospace !important;
  font-size: 11px !important;
  color: var(--r-meta) !important;
}
.ibod-cal-grid-h span:first-child { color: var(--r-sun) !important; }
.ibod-cal-grid-h span:last-child,
.ibod-cal-grid-h span:nth-child(7) { color: var(--r-link) !important; }

.ibod-cal-grid, .ibod-cal-grid-h { grid-template-columns:repeat(7,minmax(0,1fr)); min-width:0; box-sizing:border-box; }
.ibod-cal-strip.scroll { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); overflow-x:hidden; gap:4px; }
.ibod-cal-strip.scroll .ibod-cal-day { min-width:0; padding-left:0; padding-right:0; }
.ibod-cal-strip .cal-critical-mark { white-space:normal; word-break:keep-all; }
/* F16: index.html의 aspect-ratio와 min-height가 겹치면 칸 최소 너비가 62px로 커져 좁은 화면에서 7열이 겹친다. */
.ibod-cal-grid .cell { aspect-ratio:auto !important; overflow:hidden; }
.ibod-cal-grid .cal-critical-mark { white-space:normal; word-break:keep-all; max-width:calc(100% - 2px); font-size:8px; line-height:1.15; padding:1px; }
.ibod-cal-grid { padding: 0 4px 6px !important; }
.ibod-cal-grid .cell {
  position: relative;
  min-width:0;
  min-height:54px;
  flex-direction:column;
  box-sizing:border-box;
  padding: 4px 0 0 !important;
  text-align: center;
  background: var(--r-card) !important;
  border: 2px solid !important;
  border-color: var(--r-card-hi) var(--r-card-lo) var(--r-card-lo) var(--r-card-hi) !important;
  font-family: 'GalmuriMono11', monospace !important;
  font-size: 11px !important;
  color: var(--r-text) !important;
  cursor: pointer;
}
.ibod-cal-grid .cell.blank { background: transparent !important; border-color: transparent !important; }
.ibod-cal-grid .cell:nth-child(7n+1) { color: var(--r-sun) !important; }
.ibod-cal-grid .cell.today { outline: 2px solid var(--r-amber); outline-offset: -2px; }
.ibod-cal-grid .cell.selected {
  background: var(--r-title1) !important;
  color: var(--r-title-text) !important;
  border-color: var(--r-card-lo) var(--r-card-hi) var(--r-card-hi) var(--r-card-lo) !important;
}
.ibod-cal-grid .cell i {
  display: block;
  width: 5px; height: 5px;
  margin: 3px auto 0;
  background: var(--r-amber);
}
.ibod-cal-grid .cell.selected i { background: var(--r-title-text); }

.ibod-cal-event {
  background: var(--r-card) !important;
  border: 2px solid !important;
  border-color: var(--r-card-hi) var(--r-card-lo) var(--r-card-lo) var(--r-card-hi) !important;
  padding: 8px !important;
  margin-bottom: 6px !important;
}
.ibod-cal-event.high { border-left: 4px solid var(--r-amber) !important; }
.ibod-cal-time, .ibod-cal-vals { color: var(--r-meta) !important; }
.ibod-cal-name { color: var(--r-text) !important; }
.ibod-cal-name-en { color: var(--r-meta) !important; font-size: 11px !important; }
.ibod-cal-impact { color: var(--r-meta) !important; }
.ibod-cal-impact.high { color: var(--r-amber) !important; }
/* 일정이 비었을 때도 점선 안내 상자처럼 보이지 않게, 화면 안쪽의 짧은 상태줄로 둔다. */
.ibod-cal-empty {
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:58px;
  margin:8px 0 0;
  padding:10px 12px !important;
  color:#dce8f9 !important;
  background:var(--r-panel) !important;
  border:1px solid var(--r-line) !important;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.05);
  text-align:center;
}

/* ---------- 모바일 아래 탭 ---------- */
.mobile-bottom-nav {
  background: var(--r-panel) !important;
  border-top: 2px solid var(--r-btn-lo) !important;
  backdrop-filter: none !important;
}
.mobile-bottom-nav button { color: var(--r-icon) !important; font-size: 11px !important; }
.mobile-bottom-nav button.active {
  background: var(--r-btn) !important;
  color: var(--r-amber) !important;
}

/* ---------- 내 정보 · 감시 키워드 · 알림 ---------- */
.ibod-myinfo-card, .ibod-push-banner, .ibod-toast {
  background: var(--r-card) !important;
  color: var(--r-text) !important;
  border: 2px solid !important;
  border-color: var(--r-card-hi) var(--r-card-lo) var(--r-card-lo) var(--r-card-hi) !important;
  box-shadow: none !important;
}
/* 잘 끝났다는 알림만 초록 테두리. 눈에 띄되 화면을 가리지는 않는다. */
.ibod-toast.ok { border: 2px solid #34d399 !important; border-color: #34d399 !important; }
.ibod-myinfo-card h3 { color: var(--r-amber) !important; font-size: 14px !important; }
.ibod-myinfo-row dt { color: var(--r-meta) !important; }
.ibod-myinfo-row dd { color: var(--r-text) !important; }

.level-badge {
  padding: 2px 6px !important;
  background: var(--r-btn) !important;
  color: var(--r-btn-text) !important;
  border: 2px solid !important;
  border-color: var(--r-btn-hi) var(--r-btn-lo) var(--r-btn-lo) var(--r-btn-hi) !important;
}
.level-badge[data-lv="2"] { color: var(--r-link) !important; }
.level-badge[data-lv="3"] { color: var(--r-amber) !important; }

.watch-chip {
  background: var(--r-btn) !important;
  color: var(--r-btn-text) !important;
  border: 2px solid !important;
  border-color: var(--r-btn-hi) var(--r-btn-lo) var(--r-btn-lo) var(--r-btn-hi) !important;
  padding: 3px 6px !important;
}
.watch-chip button { border: 0 !important; background: transparent !important; color: var(--r-meta) !important; padding: 0 2px !important; }
.watch-chip button:hover { color: var(--r-sun) !important; }
.watch-hint, .watch-count { color: var(--r-meta) !important; }
.watch-hint.warn { color: var(--r-amber) !important; }

/* ---------- 단독 · 저널 카드 속 요소 ---------- */
/* 크기는 A- / A / A+ 단추가 정한다. 여기서 14px 로 박으면 단독 탭에서만 단추가 먹통이 된다. */
.a-title, .article-title { color: var(--r-text) !important; font-size: calc(var(--ibod-feed-font-size, 17px) - 3px) !important; line-height: 1.5 !important; }
.a-lede { color: var(--r-lede) !important; line-height: 1.62 !important; }
.a-meta, .article-source { color: var(--r-meta) !important; }
.article-link { padding: 4px 9px !important; font-size: calc(var(--ibod-feed-font-size, 17px) - 5px) !important; display: inline-block; }
.article-original { border-top: 1px solid var(--r-line) !important; }

.empty-state, .loading-state { color: var(--r-meta) !important; padding: 22px 0 !important; text-align: center; }

/* 피드가 붙는 짧은 순간도 단말기 화면처럼 보이게 한다.
   로딩 문구 하나가 화면 한가운데 떠 있으면, 완성된 피드와 결이 끊긴다. */
.feed-loading {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 14px 18px !important;
  border: 1px dashed var(--r-line) !important;
  background: linear-gradient(90deg, rgba(255,176,0,.035), transparent 68%) !important;
  font-family: "GalmuriMono11", monospace !important;
  letter-spacing: .03em;
}
.feed-loading-copy { color: var(--r-text) !important; }
.feed-loading-cursor {
  width: 7px;
  height: 13px;
  background: var(--r-amber);
  box-shadow: 0 0 8px rgba(255,176,0,.65);
  animation: ibod-feed-cursor 1s steps(1, end) infinite;
}
@keyframes ibod-feed-cursor { 50% { opacity: 0; } }
@media (max-width: 620px) {
  .feed-loading { gap: 7px; min-height: 44px; padding: 12px !important; }
}
.upload-badge { color: var(--r-amber) !important; }

/* ---------- 이미지 뷰어 ---------- */
.ibod-image-modal { background: var(--r-overlay-strong) !important; }
.ibod-image-modal-close, .viewer-close-btn {
  background: var(--r-btn) !important;
  color: var(--r-btn-text) !important;
  border: 2px solid !important;
  border-color: var(--r-btn-hi) var(--r-btn-lo) var(--r-btn-lo) var(--r-btn-hi) !important;
}

/* ---------- 맨 위로 ---------- */
.ibod-to-top {
  border: 2px solid !important;
  border-color: var(--r-btn-hi) var(--r-btn-lo) var(--r-btn-lo) var(--r-btn-hi) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.ibod-to-top:active {
  border-color: var(--r-btn-lo) var(--r-btn-hi) var(--r-btn-hi) var(--r-btn-lo) !important;
}

/* ---------- 글자 크기 단추 ---------- */
.ibod-font-tools {
  --control-width:38px;
  --control-height:34px;
  background: var(--r-panel) !important;
  border: 2px solid !important;
  border-color: var(--r-btn-hi) var(--r-btn-lo) var(--r-btn-lo) var(--r-btn-hi) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding: 4px !important;
  gap: 4px !important;
}
.ibod-font-tools > button {
  box-sizing:border-box !important;
  width:var(--control-width) !important;
  height:var(--control-height) !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
}
@media (max-width:900px) {
  .ibod-font-tools { --control-width:40px; --control-height:36px; }
}

/* ---------- 바닥글 ---------- */
.legal-footer, body > .wrap > footer { background: var(--r-panel) !important; color: var(--r-meta) !important; }
.legal-footer a { color: var(--r-meta) !important; }

/* ---------- 좁은 화면 ---------- */
@media (max-width: 900px) {
  .company-bar { bottom: 62px; }
  body.has-company-filter { padding-bottom: 0; }
  body.has-company-filter .ibod-font-tools {
    bottom: calc(118px + env(safe-area-inset-bottom)) !important;
  }
  .feed-card { padding: 10px !important; }
  .brief-window { max-height: 80vh; }
}

/* ---------- 탭 제목줄 (단독 브리핑 단추 자리) ---------- */
.panel-head {
  display: flex !important;
  align-items: center !important;
  /* space-between 은 아이콘과 제목을 양쪽 끝으로 밀어버렸다.
     그림 하나에 글자 하나면 둘 다 제각각 칸이 되기 때문이다.
     왕쪽으로 붙이고, 오른쪽 단추만 여백으로 밀어낸다. */
  justify-content: flex-start !important;
  gap: 6px;
  margin: 0 0 8px !important;
  font-size: 14px !important;
}
.panel-head .toolbar-btn { padding: 4px 8px !important; cursor: pointer; white-space: nowrap; }

/* 낮 화면의 탭 제목은 판과 대비가 분명한 검정으로 통일한다.
   밤 화면은 어두운 판에서 읽히도록 기존의 밝은 글자를 유지한다. */
body[data-theme="day"] .tab-panel > h2,
body[data-theme="day"] .tab-panel > .panel-head {
  color: #000000 !important;
}

/* 브리핑 안의 매체 집계 */
.brief-sources { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.brief-source { font-family: 'Galmuri11', monospace; font-size: 11px; color: var(--r-meta); }
.brief-source b { color: var(--r-amber) !important; }

/* ---------- 증시 탭 (국장 / 미장) ---------- */
.sub-tabs { display: flex; gap: 4px; }
.sub-tabs .toolbar-btn { padding: 4px 12px !important; cursor: pointer; }
/* 증시 6개 단추는 지표도 같은 크기로, 좁은 화면에서 한 줄을 유지한다. */
[data-action="market-sub"] { padding:4px 7px!important; }
.panel-head .sub-tabs:has([data-action="market-sub"]) { gap:3px; flex-wrap:nowrap; }
@media (max-width:900px) {
  .panel-head:has([data-action="market-sub"]) { flex-wrap:wrap; }
  .panel-head .sub-tabs:has([data-action="market-sub"]) { flex:1 0 100%; margin-left:0; margin-top:5px; width:100%; }
  .sub-tabs [data-action="market-sub"] { flex:1 1 0; min-width:0; padding:4px 2px!important; white-space:nowrap; }
}
.sub-tabs .toolbar-btn.active {
  background: var(--r-press) !important;
  /* 낮에는 바탕이 남색이다. 거기에 검정 글씨를 올렸더니 아무것도 안 보였다. */
  color: var(--r-press-text) !important;
  border-color: var(--r-btn-lo) var(--r-btn-hi) var(--r-btn-hi) var(--r-btn-lo) !important;
}

.market-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 9px;
  margin-bottom: 14px;
}
.market-grid[hidden] { display: none !important; }

.market-card { padding: 12px !important; }

.market-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.market-card-head h3 { margin: 0 !important; font-size: 13px !important; }

.market-card-price {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-top: 9px;
}
.market-card-price > span:first-child {
  font-family: 'GalmuriMono11', monospace !important;
  font-size: 24px !important;
  line-height: 1;
}
.market-card-price > span:last-child {
  font-family: 'GalmuriMono11', monospace !important;
  font-size: 12px !important;
}

.market-card-chart { height: 130px; margin-top: 12px; }

@media (max-width: 900px) {
  .market-grid { grid-template-columns: 1fr; }
  .market-card-chart { height: 120px; }
  .panel-head { flex-wrap: wrap; }
}

/* ---------- 낮 / 밤 단추: 소유자 요청으로 상단 새로고침 자리와 교환 ---------- */
.theme-btn {
  font-family: 'Galmuri11', monospace !important;
  font-size: 14px !important;
  line-height: 1;
  cursor: pointer;
  background: var(--r-btn) !important;
  color: var(--r-btn-text) !important;
  border: 2px solid !important;
  border-color: var(--r-btn-hi) var(--r-btn-lo) var(--r-btn-lo) var(--r-btn-hi) !important;
}
.theme-btn:active {
  border-color: var(--r-btn-lo) var(--r-btn-hi) var(--r-btn-hi) var(--r-btn-lo) !important;
}

/* ---------- 공유 링크로 들어왔을 때 그 글 표시 ---------- */
.feed-card.is-shared-target {
  outline: 3px solid var(--r-amber);
  outline-offset: -3px;
}

/* ---------- 내 정보 창 ----------
   감시 키워드가 50개까지 늘어난다. 예전에는 창에 높이 제한이 없어서
   카드가 1300px 까지 자라고, 제목과 닫기 단추가 화면 밖으로 밀려났다.
   창은 화면 안에 가두고, 키워드 칸만 따로 스크롤한다. */
.ibod-myinfo-card {
  width: min(420px, 94vw) !important;
  max-height: 88vh !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.ibod-myinfo-card h3 {
  flex: 0 0 auto;
  margin: 0 !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
  color: var(--r-title-text) !important;
  background: linear-gradient(90deg, var(--r-title1), var(--r-title2)) !important;
}

/* 제목과 닫기 단추 사이만 스크롤한다 */
.ibod-myinfo-card dl {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0 12px;
}

.ibod-myinfo-card .close-btn {
  flex: 0 0 auto;
  margin: 0 !important;
  padding: 10px 0 !important;
  background: var(--r-btn) !important;
  color: var(--r-btn-text) !important;
  border: 2px solid !important;
  border-color: var(--r-btn-hi) var(--r-btn-lo) var(--r-btn-lo) var(--r-btn-hi) !important;
}

.ibod-myinfo-row { border-bottom-color: var(--r-line) !important; }

/* 키워드 줄은 위아래로 쌓는다. 좌우로 나누면 칩이 들어갈 폭이 안 나온다. */
.watch-row {
  display: block !important;
}
.watch-row dt {
  display: block;
  margin-bottom: 7px;
}
.watch-row dd {
  text-align: left !important;
}

.watch-count {
  float: right;
  color: var(--r-amber) !important;
}

/* 알약은 넉 개까지만 여기 둔다. 나머지는 관리창 몫이다 */
.watch-chips {
  justify-content: flex-start !important;
  align-content: flex-start;
  max-height: 78px;
  overflow-y: auto;
  padding: 6px !important;
  margin-bottom: 7px !important;
  background: var(--r-input);
  border: 2px solid;
  border-color: var(--r-card-lo) var(--r-card-hi) var(--r-card-hi) var(--r-card-lo);
}
.watch-chips:empty { display: none !important; }

.watch-add { justify-content: flex-start !important; }
.watch-add input { flex: 1 1 auto; width: auto !important; }
.watch-hint { text-align: left !important; }
.push-toggle-hint { text-align: right; }

/* ---------- 로고: 더 굵은 픽셀 ----------
   비트맵 글꼴은 고유 크기의 정수배에서만 선명하다.
   Galmuri11 을 2배인 22px 로 쓰면 획이 두 배로 두꺼워지면서도 안 흐려진다.
   Galmuri14 14px 로는 본문과 굵기가 같아 로고로 안 읽혔다. */
.feed-header > span:first-child,
body > .wrap > header .logo {
  font-family: 'Galmuri11', monospace !important;
  font-size: 19px !important;
  line-height: 1.2 !important;
  letter-spacing: .5px;
}

/* 단말기 커서. 로고 옆에서 깜빡인다 — 예전 판에 있던 것을 되살렸다 */
@keyframes retro-blink { 50% { opacity: 0; } }
.feed-header > span:first-child::after,
body > .wrap > header .logo b::after {
  content: '_';
  color: var(--r-amber);
  margin-left: 3px;
  animation: retro-blink 1.06s step-end infinite;
}

/* 창 제목줄도 CMS 와 같은 19px */
.brief-title, .ibod-myinfo-card h3, .panel-head, .tab-panel > h2 {
  font-size: 15px !important;
}

/* ---------- 첨부 사진 액자 ----------
   예전에는 검정 바탕에 둥근 모서리였다. 밝은 화면에서는 그 검은 상자 하나가
   카드 안에서 혼자 떠 보여 단말기 느낌을 깼다.
   화면 안쪽과 같은 색에 Win98 오목 테두리로 바꾼다. */
/* 액자는 있는 듯 없는 듯. 사진 자체가 내용이라 테두리가 셀 이유가 없다.
   낮에는 모서리 색이 순검정이라, 그걸 그대로 두르면 흰 문서 위에 검은 상자가 얹힌 꼴이 된다.
   카드와 같은 바탕에 얇은 실선만 남긴다. */
.gallery-wrap,
.gallery-wrap.feed-gallery,
.gallery-wrap.general-gallery,
.gallery-wrap.frontpage-gallery {
  background: transparent !important;
  border: 1px solid var(--r-line) !important;
  border-radius: 0 !important;
  margin-top: 10px !important;
  padding: 0 !important;
}

.collage-grid img,
.gallery-wrap.feed-gallery .collage-grid img:first-child,
.gallery-wrap.feed-gallery .collage-grid img:only-child,
.gallery-wrap.general-gallery .collage-grid img:first-child {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}

/* 사진이 여러 장일 때만 칸 사이를 띄운다 */
.collage-grid { gap: 2px !important; padding: 2px !important; }

/* 확대·밝기 효과는 90년대 화면에 없던 것이다 */
.collage-grid img:hover { transform: none !important; filter: none !important; }

/* 사진 넉 장부터는 사진 더미처럼 접어 둔다. 숫자나 '더보기' 대신,
   뒤로 비친 카드 자체가 사진이 더 있다는 표시다. 우측 위 단추로 펼친다. */
.gallery-wrap.feed-gallery.has-many-images:not(.expanded) {
  display:inline-block !important;
  width:166px !important;
  max-width:100% !important;
  overflow:visible !important;
}
.gallery-wrap.feed-gallery.has-many-images:not(.expanded) .collage-grid {
  display:block !important;
  position:relative;
  width:146px !important;
  height:126px !important;
  padding:0 !important;
  overflow:visible !important;
}
.gallery-wrap.feed-gallery.has-many-images:not(.expanded) .collage-grid img {
  display:none !important;
  position:absolute;
  width:112px !important;
  height:112px !important;
  min-height:0 !important;
  aspect-ratio:1 / 1 !important;
  object-fit:cover !important;
  border:2px solid var(--r-btn-hi) !important;
  background:var(--r-screen) !important;
  box-shadow:2px 2px 0 var(--r-btn-lo) !important;
}
.gallery-wrap.feed-gallery.has-many-images:not(.expanded) .collage-grid img:nth-child(1) { display:block !important; z-index:3; top:0; left:0; }
.gallery-wrap.feed-gallery.has-many-images:not(.expanded) .collage-grid img:nth-child(2) { display:block !important; z-index:2; top:7px; left:10px; opacity:.82; }
.gallery-wrap.feed-gallery.has-many-images:not(.expanded) .collage-grid img:nth-child(3) { display:block !important; z-index:1; top:14px; left:20px; opacity:.55; }
.gallery-wrap.feed-gallery.has-many-images:not(.expanded) .ibod-gallery-size-toggle { z-index:5; }

.inline-viewer, .inline-viewer iframe {
  background: var(--r-screen) !important;
  border-radius: 0 !important;
}

/* ---------- 회원 탈퇴 ----------
   눈에 띄되 실수로 누르기는 어렵게. 붉은 글씨에 작은 단추로 둔다. */
.withdraw-row dd { text-align: right !important; }
.withdraw-btn {
  font-family: 'Galmuri11', monospace !important;
  font-size: 11px !important;
  padding: 4px 10px;
  cursor: pointer;
  background: var(--r-btn);
  color: var(--r-sun);
  border: 2px solid;
  border-color: var(--r-btn-hi) var(--r-btn-lo) var(--r-btn-lo) var(--r-btn-hi);
}
.withdraw-btn:active {
  border-color: var(--r-btn-lo) var(--r-btn-hi) var(--r-btn-hi) var(--r-btn-lo);
}
.withdraw-btn[disabled] { opacity: .55; cursor: not-allowed; }
.withdraw-hint {
  margin-top: 5px;
  font-family: 'Galmuri11', monospace;
  font-size: 11px;
  color: var(--r-meta);
  line-height: 1.5;
}

/* 탭 제목줄의 단추 묶음 */
.panel-head .head-btns { display: flex; gap: 5px; flex-shrink: 0; margin-left: auto; }

/* ---------- 사이드바 면책 고지 ----------
   고지는 해야 하지만 늘 펼쳐 둘 이유는 없다. 제목만 두고 접어 놓는다. */
.legal-footer {
  padding: 8px 10px !important;
  background: var(--r-panel) !important;
  border-top: 2px solid var(--r-head-line) !important;
}
.legal-footer summary {
  cursor: pointer;
  list-style: none;
  color: var(--r-meta) !important;
  font-family: 'Galmuri11', monospace;
  font-size: 12px;
}
.legal-footer summary::-webkit-details-marker { display: none; }
.legal-footer summary::before { content: '▸ '; color: var(--r-amber); }
.legal-footer[open] summary::before { content: '▾ '; }
.legal-footer[open] summary { margin-bottom: 8px; }

/* ---------- 아래 푸터: 한 줄로 ---------- */
.ibod-legal-footer {
  padding: 5px 10px !important;
  background: var(--r-panel) !important;
  border-top: 2px solid var(--r-head-line) !important;
  font-size: 12px !important;
}
.ibod-legal-footer-inner {
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}
.ibod-legal-footer-links { margin-bottom: 0 !important; gap: 10px !important; }
.ibod-legal-footer a { color: var(--r-meta) !important; font-weight: 400 !important; }
.ibod-legal-footer a:hover { color: var(--r-link) !important; }
.ibod-legal-footer-copy { color: var(--r-faint) !important; }

/* ---------- 넓은 화면: 로그인·내 정보·로그아웃을 오른쪽 위로 ----------
   사이드바 안에 두니 세로 한 줄을 통째로 먹었다. 받글 피드가 그만큼 짧아진다.
   탭 줄 오른쪽이 비어 있으므로 거기로 올린다. */
@media (min-width: 901px) {
  .ibod-login-panel {
    position: fixed !important;
    top: 6px;
    right: 12px;
    z-index: 9997;
    display: flex !important;
    align-items: center;
    gap: 8px;
    width: auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  .ibod-login-panel .ibod-login-status {
    max-width: 210px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--r-meta) !important;
  }
  .ibod-login-panel .ibod-login-buttons { gap: 5px !important; }
  .ibod-login-panel .ibod-login-buttons button { padding: 4px 9px !important; }
}

/* 폰에서는 가장 자주 쓰는 받글 쓰기를 내 정보보다 먼저 둔다. */
@media (max-width: 900px) {
  .ibod-login-buttons .write-btn { order: 1; }
  .ibod-login-buttons .myinfo-btn { order: 2; }
}

/* ---------- 넓은 화면: 지수 카드를 한 줄에 ----------
   auto-fit 은 최소폭(280px)에 맞춰 두 칸만 만들고 셋째를 아래로 내렸다.
   그러면 미장 세 지수 중 하나가 잘려 보인다. 칸 수를 못 박는다. */
@media (min-width: 901px) {

  /* 세 칸으로 나누면 폭이 좁아진다. 숫자가 줄바꿈되지 않게 한 단계 줄인다. */
  .market-grid[data-market-group="us"] .market-card-price > span:first-child {
    font-size: 20px !important;
  }
  .market-grid[data-market-group="us"] .market-card-price > span:last-child {
    font-size: 11px !important;
  }
  .market-grid[data-market-group="us"] .market-card-head h3 { font-size: 12px !important; }
  .market-grid[data-market-group="us"] .market-time { font-size: 11px !important; }
  .market-card-chart { height: 118px; }
}

/* ---------- 낮: 흰 면을 쓸 곳 ----------
   CMS 는 판은 세이지, 읽고 쓰는 면은 흰색이다. 그 대비가 화면을 또렷하게 만든다.
   전부 세이지로 칠하면 밋밋해진다. */
body[data-theme="day"] .market-card,
body[data-theme="day"] .brief-body,
body[data-theme="day"] .ibod-myinfo-card dl,
body[data-theme="day"] .ibod-cal-grid .cell,
body[data-theme="day"] .ibod-cal-event,
body[data-theme="day"] .ibod-toast {
  background: var(--r-card) !important;
}

/* 낮 화면의 캘린더는 어두운 단말기 창을 그대로 쓴다.
   여기서 보조 글자를 세이지용 회색으로 물리면 빈 일정 문구가 누렇게 죽어
   보인다. 날짜와 빈 상태는 차가운 흰색 계열로 고정한다. */
body[data-theme="day"] .ibod-cal-day .dow { color:#cfe0f5 !important; }
body[data-theme="day"] .ibod-cal-day .num { color:#ffffff !important; }
body[data-theme="day"] .ibod-cal-day.today .dow { color:#7fb0ff !important; }
/* 낮 모드의 각 탭명은 세이지 판 위에서 읽히는 검정으로 통일한다. */
body[data-theme="day"] #tab-korea-market > .panel-head,
body[data-theme="day"] .mobile-panel .panel-head {
  color:#000000 !important;
  text-shadow:none;
}
body[data-theme="day"] .ibod-cal-empty { color:#ffffff !important; }


/* 피드가 놓이는 자리는 판 색 그대로. 흰 카드가 떠 보이게 한다 */
body[data-theme="day"] .feed-area,
body[data-theme="day"] .tab-content-area,
body[data-theme="day"] .mobile-panel {
  background: var(--r-screen) !important;
}

/* ---------- 사이드바 머리: 한 줄로 ----------
   머리줄 + 검색줄 + 도구줄로 세 줄이 먹고 있었다. 받글이 그만큼 짧아진다.
   검색은 자주 쓰는 기능이 아니므로 도구 단추와 한 줄에 묶는다. */
.feed-header { padding: 5px 10px !important; }
.motto { font-size: 11px !important; opacity: .85; }

.search-wrap {
  display: flex !important;
  align-items: center;
  gap: 5px;
  padding: 5px 6px !important;
}
.search-wrap input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 4px 8px !important;
  font-size: 12px !important;
}

.feed-toolbar {
  flex: 0 0 auto;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  gap: 4px !important;
}
.feed-toolbar .toolbar-btn { padding: 4px 7px !important; font-size: 11px !important; }

/* 검색줄 한 줄에 검색칸·스크랩만·모두읽음·새로고침이 다 들어간다.
   단추는 줄어들지 않으므로, 좁은 폰에서는 맨 끝의 새로고침이 화면 밖으로 밀려
   반쪽만 보였다. 줄일 수 있는 것은 검색칸뿐이니 그것만 줄인다. */
.search-wrap { flex-wrap: nowrap !important; }
.search-wrap input { flex: 1 1 60px !important; min-width: 60px !important; }
.feed-toolbar { flex: 0 0 auto !important; flex-wrap: nowrap !important; }
.feed-toolbar > * { flex: 0 0 auto !important; }

/* ── 반응 단추 (폰) ──
   폰 쪽에 grid 1fr 1fr · width:100% · min-height:46px 가 !important 로 걸려 있어
   카드 폭을 가득 채운 막대 두 개가 됐다. 손가락으로 누르기 쉬우라고 키운 것인데,
   28px 높이에 좌우 여백이면 누르는 데 지장이 없고 글이 가려지지도 않는다. */
@media (max-width: 900px) {
  .reaction-row {
    display: flex !important;
    grid-template-columns: none !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    margin-top: 8px !important;
    padding-top: 7px !important;
  }
  body .reaction-btn {
    /* 폰 쪽에 flex:1 1 0 이 걸려 있어 줄을 반씩 갈라 먹었다.
       늘어나지도 줄어들지도 않게 못 박아야 글자 폭만큼만 차지한다. */
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 62px !important;
    height: 28px !important;
    min-height: 0 !important;
    padding: 0 16px !important;
    font-size: 12px !important;
    line-height: 1 !important;
  }
}

/* 안 읽음 표시는 숫자만. 0 이면 아예 자리를 비운다 */
.unread-badge { margin-right: 2px !important; font-size: 11px !important; }
.unread-badge[data-zero="1"] { display: none !important; }

.ibod-login-panel { padding: 5px 6px !important; }

/* 세 칸이 내용 폭 때문에 화면 밖으로 밀리던 문제.
   1fr 은 내용보다 작아지지 않는다. minmax(0,1fr) 이라야 칸이 줄어든다. */
@media (min-width: 901px) {
  /* 칸 수를 못 박지 않고 폭에 맞춘다.
     3칸을 강제하면 창이 좁을 때 제목이 두 줄로 접히고 숫자가 눌린다.
     260px 이 한 카드가 답답하지 않은 최소 폭이다. */
  .market-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
    gap: 7px !important;
  }
  .market-card { min-width: 0; }
  .market-card-head h3 { white-space: nowrap; }
}

/* 픽셀 아이콘 — 글자와 같은 줄에 놓이게 */
.pix {
  display: inline-block;
  vertical-align: -2px;
  image-rendering: pixelated;
}
.mobile-bottom-nav button .pix { vertical-align: 0; margin-bottom: 2px; }
.feed-time .pix { vertical-align: -1px; margin-right: 2px; }

/* ---------- 첨부 동영상 ----------
   자동재생 없음. 눌러야 재생된다. 스크롤만으로 전송량이 나가면 요금이 통제를 벗어난다. */
.feed-video {
  margin-top: 10px;
  border: 1px solid var(--r-line);
  background: #000;
}
.feed-video video {
  display: block;
  width: 100%;
  max-height: 60vh;
  background: #000;
}

/* ---------- i제보 ---------- */
.tip-panel {
  position: fixed;
  inset: 0;
  z-index: 10045;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  background: var(--r-overlay);
}
.tip-panel[hidden] { display: none !important; }

.tip-window {
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: var(--r-card);
  border: 2px solid;
  border-color: var(--r-card-hi) var(--r-card-lo) var(--r-card-lo) var(--r-card-hi);
}

.tip-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 8px 7px 12px;
  color: var(--r-title-text);
  font-family: 'Galmuri11', monospace;
  font-size: 15px;
  background: linear-gradient(90deg, var(--r-title1), var(--r-title2));
}
.tip-title button {
  background: var(--r-btn);
  color: var(--r-btn-text);
  border: 2px solid;
  border-color: var(--r-btn-hi) var(--r-btn-lo) var(--r-btn-lo) var(--r-btn-hi);
  font-size: 12px;
  padding: 3px 8px;
  cursor: pointer;
}

.tip-body { overflow-y: auto; padding: 13px; }

.tip-lead {
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.75;
  color: var(--r-meta);
}
.tip-lead b { color: var(--r-strong) !important; }

.tip-body label {
  display: block;
  margin: 10px 0 5px;
  font-size: 12px;
  color: var(--r-meta);
}
.tip-opt { color: var(--r-faint); }

.tip-body textarea,
.tip-body input[type="text"] {
  width: 100%;
  background: var(--r-input) !important;
  color: var(--r-text) !important;
  border: 2px solid !important;
  border-color: var(--r-card-lo) var(--r-card-hi) var(--r-card-hi) var(--r-card-lo) !important;
  padding: 8px !important;
  font-family: 'Galmuri11', monospace !important;
  font-size: 15px !important;
  line-height: 1.6;
}
.tip-body textarea { min-height: 170px; resize: vertical; }

.tip-row { margin-top: 8px; }
.tip-sub, .tip-send {
  font-family: 'Galmuri11', monospace !important;
  cursor: pointer;
  background: var(--r-btn) !important;
  color: var(--r-btn-text) !important;
  border: 2px solid !important;
  border-color: var(--r-btn-hi) var(--r-btn-lo) var(--r-btn-lo) var(--r-btn-hi) !important;
}
.tip-sub { font-size: 12px !important; padding: 6px 11px; }
.tip-send { width: 100%; margin-top: 14px; padding: 12px 0; font-size: 15px !important; }
.tip-send[disabled] { opacity: .55; cursor: not-allowed; }

.tip-files { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.tip-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 7px;
  font-size: 11px;
  background: var(--r-btn);
  color: var(--r-btn-text);
  border: 2px solid;
  border-color: var(--r-btn-hi) var(--r-btn-lo) var(--r-btn-lo) var(--r-btn-hi);
}
.tip-chip button {
  background: none; border: 0; padding: 0;
  color: var(--r-meta); cursor: pointer; font-size: 12px;
}

.tip-msg { padding: 9px; font-size: 12px; margin-bottom: 10px; line-height: 1.6; }
.tip-msg.ok  { background: #14532d; color: #dcfce7; }
.tip-msg.bad { background: #5c1a1a; color: #ffd7d7; }
.tip-msg[hidden] { display: none !important; }

.tip-note { margin-top: 12px; font-size: 11px; line-height: 1.7; color: var(--r-faint); }

/* 제목줄: 아이콘 + 글자를 한 덩어리로. 따로 두면 양끝으로 벌어진다 */
.panel-head .head-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 1 auto;
  min-width: 0;
}

/* ---------- 제보 게시판 ---------- */
.tip-line {
  font-family: 'Galmuri11', monospace !important;
  font-size: var(--ibod-feed-font-size, 17px) !important;
  line-height: 1.55 !important;
  color: var(--r-text) !important;
}
.tip-line::before { content: '「'; color: var(--r-amber); }
.tip-line::after  { content: '」'; color: var(--r-amber); }

/* 제보 카드는 반응·태그 없이 제목만. 군더더기를 뺀다 */
.feed-card[data-post-type="tip"] .card-tags,
.feed-card[data-post-type="tip"] { padding: 10px 11px !important; }

/* ---------- 이미지 확대창: 좌우 이동 ----------
   폰은 쓸어 넘기면 되지만 PC 는 넘길 수단이 아예 없었다. */
.ibod-img-nav, .ibod-img-x {
  position: fixed;
  z-index: 10060;
  font-family: 'Galmuri11', monospace !important;
  cursor: pointer;
  background: var(--r-btn) !important;
  color: var(--r-btn-text) !important;
  border: 2px solid !important;
  border-color: var(--r-btn-hi) var(--r-btn-lo) var(--r-btn-lo) var(--r-btn-hi) !important;
}
.ibod-img-nav:active, .ibod-img-x:active {
  border-color: var(--r-btn-lo) var(--r-btn-hi) var(--r-btn-hi) var(--r-btn-lo) !important;
}

.ibod-img-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 66px;
  font-size: 17px !important;
}
.ibod-img-nav.prev { left: 14px; }
.ibod-img-nav.next { right: 14px; }

.ibod-img-x {
  top: 14px;
  right: 14px;
  width: 42px;
  height: 36px;
  font-size: 15px !important;
}

/* 확대창이 닫혀 있을 때는 단추도 없다 */
.ibod-image-modal:not(.show) .ibod-img-nav,
.ibod-image-modal:not(.show) .ibod-img-x { display: none !important; }

/* 한 장뿐이면 화살표는 숨긴다 */
.ibod-image-modal.single .ibod-img-nav { display: none !important; }

@media (max-width: 900px) {
  /* 좌우 화살표는 안 둔다. 손가락으로 넘기면 될 일을
     그림 위에 단추 두 개를 올려 가리고 있었다. */
  .ibod-img-nav { display: none !important; }
  .ibod-img-x { top: 8px; right: 8px; }
}

/* 제목줄 오른쪽: 하위탭과 단추 묶음을 같은 방식으로 다룬다 */
.panel-head .sub-tabs { flex: 0 0 auto; margin-left: auto; }

/* 차트도 화면 안에 박힌 것처럼 — 오목한 테두리 */
.market-card-chart {
  background: var(--r-input);
  border: 2px solid;
  border-color: var(--r-card-lo) var(--r-card-hi) var(--r-card-hi) var(--r-card-lo);
  padding: 2px;
  position: relative;
}



/* ══════════ 시트: 화면 위에 띄우는 창 ══════════
   키워드 관리·요금제가 같은 틀을 쓴다. 윈도우98 창처럼 제목줄이 있고,
   모바일에서는 아래에서 올라오는 판이 된다. */
.ibod-sheet {
  position: fixed;
  inset: 0;
  /* 내 정보 모달(10005) 위에 떠야 한다.
     내 정보 안의 '요금제 보기' · '키워드 전체 관리' 가 여기로 열리기 때문이다.
     이 값이 낮으면 단추를 눌러도 뒤에서 열려 아무 일도 안 난 것처럼 보인다. */
  z-index: 10070;
  background: var(--r-overlay-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.ibod-sheet[hidden] { display: none; }

.ibod-sheet-card {
  width: min(460px, 100%);
  max-height: min(78vh, 640px);
  display: flex;
  flex-direction: column;
  background: var(--r-panel);
  border: 2px solid;
  border-color: var(--r-card-hi) var(--r-card-lo) var(--r-card-lo) var(--r-card-hi);
  box-shadow: 4px 4px 0 var(--r-card-lo);
}

.ibod-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 6px 5px 9px;
  background: var(--r-head-bg);
  color: var(--r-head-text);
  font-family: 'Galmuri11', monospace;
  font-size: 13px;
  flex: 0 0 auto;
}
.ibod-sheet-head b { color: var(--r-head-sub); font-weight: normal; }
.ibod-sheet-head button {
  width: 22px;
  height: 20px;
  line-height: 1;
  font-size: 12px;
  background: var(--r-btn);
  color: var(--r-btn-text);
  border: 2px solid;
  border-color: var(--r-btn-hi) var(--r-btn-lo) var(--r-btn-lo) var(--r-btn-hi);
  cursor: pointer;
}
.ibod-sheet-head button:active {
  border-color: var(--r-btn-lo) var(--r-btn-hi) var(--r-btn-hi) var(--r-btn-lo);
}

/* ── 키워드 관리창 ── */
.watch-manager-tools {
  padding: 10px 10px 8px;
  border-bottom: 1px solid var(--r-line);
  flex: 0 0 auto;
}
.watch-manager-tools input[type="search"] {
  width: 100%;
  margin-bottom: 8px;
  padding: 7px 8px;
  background: var(--r-input);
  color: var(--r-text);
  font-family: 'Galmuri11', monospace;
  font-size: 13px;
  border: 2px solid;
  border-color: var(--r-card-lo) var(--r-card-hi) var(--r-card-hi) var(--r-card-lo);
}
.watch-manager-tools input[type="search"]::placeholder { color: var(--r-faint); }

.watch-manager-list {
  padding: 10px;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-content: flex-start;
}
.watch-manager-empty {
  width: 100%;
  padding: 24px 0;
  text-align: center;
  color: var(--r-faint);
  font-size: 12px;
}

.watch-manage-btn,
.plans-link {
  padding: 4px 9px;
  background: var(--r-btn);
  color: var(--r-btn-text);
  font-family: 'Galmuri11', monospace;
  font-size: 12px;
  border: 2px solid;
  border-color: var(--r-btn-hi) var(--r-btn-lo) var(--r-btn-lo) var(--r-btn-hi);
  cursor: pointer;
}
/* 넘치는 낱말로 가는 문. 한 줄을 다 쓰게 둬서 눈에 걸리게 한다 */
.watch-manage-btn {
  display: block;
  width: 100%;
  margin-top: 6px;
  text-align: left;
}
.plans-link { margin-left: 0; }
/* 등급 표시와 단추 둘이 좁은 폰에서 줄바꿈될 때 겹치지 않게 */
.level-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.watch-manage-btn:active,
.plans-link:active {
  border-color: var(--r-btn-lo) var(--r-btn-hi) var(--r-btn-hi) var(--r-btn-lo);
}
/* ── 요금제 ── */
.plans-card { width: min(520px, 100%); }
.plans-beta {
  padding: 9px 12px;
  background: var(--r-card);
  border-bottom: 1px solid var(--r-line);
  color: var(--r-amber);
  font-size: 12px;
  line-height: 1.6;
  flex: 0 0 auto;
}
.plans-body {
  padding: 10px;
  overflow-y: auto;
  display: grid;
  gap: 8px;
}
.plan-card {
  padding: 10px 11px;
  background: var(--r-card);
  border: 2px solid;
  border-color: var(--r-card-hi) var(--r-card-lo) var(--r-card-lo) var(--r-card-hi);
}
.plan-card.is-pick { border-color: var(--r-amber); border-style: solid; border-width: 2px; }
.plan-card.is-mine { outline: 1px dotted var(--r-link); }
.plan-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.plan-name { font-family: 'Galmuri11', monospace; font-size: 14px; color: var(--r-text); }
.plan-price { font-family: 'Galmuri11', monospace; font-size: 14px; color: var(--r-amber); }
.plan-badge { margin-top: 4px; font-size: 11px; color: var(--r-amber); }
.plan-perks {
  margin: 8px 0 10px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 3px;
}
.plan-perks li {
  font-size: 12px;
  color: var(--r-meta);
  padding-left: 12px;
  position: relative;
}
.plan-perks li::before {
  content: '▪';
  position: absolute;
  left: 0;
  color: var(--r-link);
}
.plan-cta {
  display: block;
  width: 100%;
  padding: 6px 0;
  text-align: center;
  font-family: 'Galmuri11', monospace;
  font-size: 12px;
  background: var(--r-btn);
  color: var(--r-btn-text);
  border: 2px solid;
  border-color: var(--r-btn-hi) var(--r-btn-lo) var(--r-btn-lo) var(--r-btn-hi);
  cursor: pointer;
}
a.plan-cta { text-decoration: none; box-sizing: border-box; }
.plans-foot b { color: var(--r-amber); font-weight: 700; }
.plan-cta.is-off,
.plan-cta:disabled {
  background: transparent;
  border: 1px dashed var(--r-line);
  color: var(--r-faint);
  cursor: default;
}
.plans-foot {
  padding: 9px 12px;
  border-top: 1px solid var(--r-line);
  color: var(--r-faint);
  font-size: 11px;
  flex: 0 0 auto;
}

/* ── 받글 토론 ── */
.discussion-card { width:min(620px, 100%); }
/* 원문 미리보기.
   높이로 자르면 글자 한가운데서 끊긴다. 줄 수로 끊고 말줄임표를 붙인다.
   사진이 달린 받글은 사진을 왼쪽에 세운다. */
.discussion-origin {
  display:flex; gap:9px; align-items:flex-start;
  padding:11px 12px;
  border-bottom:1px solid var(--r-line);
  background:var(--r-card);
  color:var(--r-text);
  font-size:13px;
  line-height:1.55;
}
.discussion-origin-text {
  min-width:0;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
}
.discussion-origin-shot {
  flex:0 0 auto; width:54px; height:54px; object-fit:cover;
  border:1px solid var(--r-line);
}
.discussion-list { min-height:0; max-height:42vh; overflow-y:auto; overflow-x:hidden; padding:4px 12px; display:block; }
/* ── 토론 ──
   판은 흐릿한 바탕, 읽고 쓰는 면만 움푹 판다.
   카드·글상자와 같은 짜임이라야 다른 화면에서 온 것처럼 안 보인다. */
/* 댓글은 상자가 아니라 줄글이다.
   글마다 테를 두르면 열 개만 쌓여도 화면이 격자무늬가 된다.
   간격과 옅은 선 하나로만 가른다 — 인스타·스레드가 쓰는 방식이고,
   좁은 화면에서 글이 가장 많이 들어간다. */
.discussion-item {
  box-sizing:border-box;
  padding:11px 2px;
  background:none;
  border:0;
  border-bottom:1px solid var(--r-line);
}
.discussion-item:last-child { border-bottom:0; }
.discussion-meta {
  display:flex; align-items:baseline; gap:7px;
  margin-bottom:4px; color:var(--r-faint); font-size:11px;
}
.discussion-meta time { margin-left:auto; }
.discussion-body {
  padding:0; background:none; border:0;
  white-space:pre-wrap; overflow-wrap:anywhere;
  color:var(--r-text); font-size:13px; line-height:1.55;
}
.discussion-empty { padding:14px 8px; color:var(--r-faint); text-align:center; font-size:12px; }
.discussion-compose {
  box-sizing:border-box; width:100%; padding:10px;
  background:var(--r-panel);
  border:1px solid;
  border-color:var(--r-card-hi) var(--r-card-lo) var(--r-card-lo) var(--r-card-hi);
}
.discussion-compose label { display:block; margin-bottom:5px; color:var(--r-meta); font-size:11px; }
.discussion-compose textarea {
  display:block; box-sizing:border-box; width:100%; min-height:64px; resize:vertical; padding:7px;
  background:var(--r-input); color:var(--r-text);
  border:1px solid;
  border-color:var(--r-card-lo) var(--r-card-hi) var(--r-card-hi) var(--r-card-lo);
  font:12px/1.5 'Galmuri11', monospace;
}
.discussion-compose-foot { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:6px; }
[data-discussion-hint] { color:var(--r-faint); font-size:10px; }
[data-discussion-submit] { padding:5px 12px; background:var(--r-btn); color:var(--r-btn-text); border:2px solid; border-color:var(--r-btn-hi) var(--r-btn-lo) var(--r-btn-lo) var(--r-btn-hi); font:12px 'Galmuri11', monospace; cursor:pointer; }
[data-discussion-submit]:disabled, .discussion-btn:disabled { opacity:.48; cursor:default; }
.discussion-btn { white-space:nowrap; }

/* ── 단독 탭 안에 편 A/B·브리핑 ──
   떠 있는 창을 그대로 옮겨 붙였으므로, 창 노릇을 하던 규칙만 벗긴다. */
#exclusive-inline { margin: 0 0 12px; }
#exclusive-inline > .brief-window,
#exclusive-inline > .ibod-sheet-card {
  position: static !important;
  width: 100% !important;
  max-width: none !important;
  max-height: 60vh !important;
  margin: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}
#exclusive-inline .revision-list,
#exclusive-inline .brief-body { max-height: 52vh; overflow-y: auto; }

/* 단독 카드의 원문·수정 이력은 같은 단추 줄에 둔다. */
.article-links { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.article-links .article-link { margin:0 !important; }
.revision-link {
  /* 원문 버튼과 같은 Win98 돌출 음영. 얇은 선만 있던 A/B는 단추로 안 보였다. */
  color:var(--r-btn-text) !important;
  text-decoration:none !important;
  background:var(--r-btn) !important;
  border:2px solid !important;
  border-color:var(--r-btn-hi) var(--r-btn-lo) var(--r-btn-lo) var(--r-btn-hi) !important;
  cursor:pointer;
}
.revision-link:not(:disabled):hover { background:var(--r-hover) !important; }
.revision-link:not(:disabled):active { border-color:var(--r-btn-lo) var(--r-btn-hi) var(--r-btn-hi) var(--r-btn-lo) !important; }
.revision-link:disabled { opacity:.48; cursor:default; }
.revision-mark { color:var(--r-amber) !important; }
.revision-count { margin-left:5px; color:var(--r-btn-text); }
/* 단독 탭의 전체 A/B도 카드 안 A/B와 같은 강조색으로 보인다. */
.revision-summary-btn { color:var(--r-amber) !important; }
.revision-card { width:min(700px, 100%); }
.revision-list { display:grid; gap:8px; padding:10px; max-height:62vh; overflow-y:auto; background:var(--r-bg); }
.revision-item { padding:10px; background:var(--r-card); border:1px solid var(--r-line); }
.revision-meta { display:flex; justify-content:space-between; gap:8px; margin-bottom:8px; color:var(--r-faint); font-size:10px; }
.revision-article-title { margin:0 0 8px; color:var(--r-text); font-size:12px; line-height:1.45; }
.revision-ab { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.revision-ab span { display:block; padding:7px; color:var(--r-text); background:var(--r-bg); border:1px solid var(--r-line); font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
.revision-ab b { display:block; margin-bottom:4px; color:var(--r-amber); font-size:10px; }
.revision-body-note { margin-top:8px; padding:7px; color:var(--r-meta); border-left:2px solid var(--r-amber); background:var(--r-bg); font-size:11px; }
.revision-empty, .revision-loading { padding:20px 8px; color:var(--r-faint); text-align:center; font-size:12px; }
.panel-head .pix, .tab-btn .pix { display:inline-block; vertical-align:-2px; }

/* 지금 토론을 열어 둔 글.
   카드를 통째로 두르면 글까지 딸려 강조돼서 오히려 읽기 힘들다.
   어느 단추를 눌러 열었는지만 알면 되므로 그 단추에만 표를 낸다. */
.feed-card.is-discussing .discussion-btn {
  border-color: var(--r-amber) var(--r-amber) var(--r-amber) var(--r-amber) !important;
  color: var(--r-amber) !important;
}
.discussion-reply-tools { display:flex; justify-content:flex-start; gap:12px; margin-top:5px; }
.discussion-reply-btn {
  padding:2px 7px; color:var(--r-meta); background:none; border:0;
  font:11px 'Galmuri11', monospace; cursor:pointer;
}
.discussion-reply-btn:hover { color:var(--r-link); }
.discussion-reply-btn:disabled { opacity:.48; cursor:default; }

/* 답글은 한 칸만 들여 쓰고 안내선 하나로 묶는다.
   답글마다 테를 두르면 원글과 무게가 같아져, 어느 것이 답인지 한눈에 안 갈린다.
   선 하나 + 들여쓰기가 다른 서비스들이 오래 써 온 방식이고 가장 덜 어지럽다. */
.discussion-replies {
  display:block;
  margin:4px 0 0 14px;
  padding-left:10px;
  border-left:1px solid var(--r-line);
}
.discussion-replies:empty { display:none; }
/* 접히면 통째로 감춘다. 몇 개인지는 아래 단추가 말해 준다. */
.discussion-replies.is-folded { display:none; }
.discussion-more-btn {
  margin:2px 0 0 14px;
  padding:2px 0;
  background:none; border:0;
  color:var(--r-link);
  font:11px 'Galmuri11', monospace;
  cursor:pointer;
}
.discussion-more-btn:hover { text-decoration:underline; }
.discussion-reply { padding:7px 0; background:none; border:0; }
.discussion-reply .discussion-meta { margin-bottom:3px; }
.discussion-reply .discussion-body {
  padding:0; background:none; border:0;
  color:var(--r-meta); font-size:12px;
}

.discussion-reply-compose {
  box-sizing:border-box; margin:7px 0 0 10px; padding:8px 0 0 10px;
  background:none; border:0; border-left:2px solid var(--r-line);
}
.discussion-reply-compose textarea {
  display:block; box-sizing:border-box; width:100%; min-height:54px; padding:7px; resize:vertical;
  color:var(--r-text); background:var(--r-input);
  border:1px solid;
  border-color:var(--r-card-lo) var(--r-card-hi) var(--r-card-hi) var(--r-card-lo);
  font:12px/1.5 'Galmuri11', monospace;
}

#tab-discussion { box-sizing:border-box; padding:14px 16px; overflow-x:hidden; }
/* 폭을 묶지 않는다. 웹에서 토론은 한 칸을 통째로 쓰는 화면이라
   가운데만 쓰고 오른쪽을 비워 두면 그만큼 글이 좁아진다. */
#tab-discussion .discussion-list,
#tab-discussion .discussion-compose { box-sizing:border-box; width:100%; }
/* 웹에서는 왼쪽에 원문이 이미 보이고, 어느 글인지는 그 카드의 토론 단추가 알려 준다.
   여기에 띠를 하나 더 깔 이유가 없다. */
#tab-discussion .discussion-origin { display:none; }
#tab-discussion .discussion-list { min-height:0; max-height:calc(100vh - 340px); padding:0 0 10px; }

@media (max-width: 640px) {
  .ibod-sheet { align-items: flex-end; padding: 0; }
  .ibod-sheet-card { width: 100%; max-height: 86vh; box-shadow: none; }
  /* A/B 이력은 아래에서 올라오는 작성 창이 아니라 확인 창이다.
     가려진 카드와 겹쳐 답답해 보이지 않게 화면 가운데에 띄운다. */
  #exclusive-revision-panel { align-items: center; padding: 16px; }
  #exclusive-revision-panel .revision-card { width: min(700px, 100%); box-shadow: 4px 4px 0 var(--r-card-lo); }
}

@media (max-width: 900px) {
  #discussion-panel { align-items:flex-end; padding:0; }
  #discussion-panel .discussion-card { width:100%; max-width:none; height:92dvh; max-height:92dvh; display:flex; flex-direction:column; }
  #discussion-panel .discussion-origin { flex:0 0 auto; }
  #discussion-panel .discussion-list { flex:1 1 auto; max-height:none; min-height:0; }
  #discussion-panel .discussion-compose { flex:0 0 auto; margin-top:auto; }
  .revision-card { width:100%; max-width:none; }
  .revision-list { max-height:78dvh; }
  .revision-ab { grid-template-columns:1fr; }
}

/* ══════════ 잠긴 줄 ══════════
   무료 등급에서 잘려 나간 자리. 숨기기만 하면 왜 없는지 모른다.
   무엇이 몇 건 있는지 말해 주고, 어디서 풀리는지 붙여 둔다. */
.lock-row {
  margin: 10px 0 4px;
  padding: 12px 13px;
  background: var(--r-card);
  border: 2px dashed var(--r-line);
  cursor: pointer;
}
.lock-row:hover { border-color: var(--r-amber); }
.lock-head {
  font-family: 'Galmuri11', monospace;
  font-size: 14px;
  color: var(--r-text);
}
.lock-desc {
  margin-top: 5px;
  font-size: 12px;
  color: var(--r-meta);
  line-height: 1.6;
}
.lock-cta {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 8px;
  font-size: 11px;
  color: var(--r-amber);
  border: 1px solid var(--r-amber);
}

/* ══════════ 브리핑 보강 ══════════ */
.brief-actions { margin: 8px 0 2px; }
.brief-sub { color: var(--r-faint); font-size: 11px; font-weight: normal; }
.brief-mine { border-left: 2px solid var(--r-amber); padding-left: 9px; }
.brief-kind.is-word { color: var(--r-amber); }
.card-tag.is-surge b { color: var(--r-up); font-weight: normal; }

/* ══════════ 제보 ══════════ */
.tip-line { cursor: pointer; }
.tip-line:hover { color: var(--r-link); }
.tip-open-hint {
  margin-left: 8px;
  font-size: 11px;
  color: var(--r-faint);
  white-space: nowrap;
}
.tipbody-wrap { padding: 12px; overflow-y: auto; }
.tipbody-text {
  font-size: var(--ibod-feed-font-size, 17px);
  line-height: 1.8;
  color: var(--r-text);
  white-space: pre-wrap;
  word-break: break-word;
}
.tipbody-wrap .lock-row { margin: 0; }

/* ══════════ 좁은 화면의 '전체' ══════════
   다섯 지수를 한눈에 넣는다. 국장 둘을 위에 나란히, 미장 셋을 그 아래 한 줄에.
   카드가 작아지는 대신 스크롤 없이 판이 통째로 보인다.
   '국장' · '미장' 을 따로 고르면 원래대로 한 줄에 한 장씩 큼직하게 나온다. */
@media (max-width: 900px) {
  body[data-market-sub="all"] .market-grid { margin-bottom: 8px; }
  body[data-market-sub="all"] .market-grid[data-market-group="kr"] {
    grid-template-columns: 1fr 1fr;
    gap: 7px;
  }
  body[data-market-sub="all"] .market-grid[data-market-group="us"] {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
  }
  /* 아시아는 둘뿐이라 반씩 나눈다. 크기는 미장과 같게 맞춰
     국장 2 + 미장 3 + 아시아 2, 일곱 장이 한 화면에 들어간다. */
  body[data-market-sub="all"] .market-grid[data-market-group="asia"],
  body[data-market-sub="all"] .market-grid[data-market-group="coin"] {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  body[data-market-sub="all"] .market-card { padding: 8px !important; }
  body[data-market-sub="all"] .market-card-head { flex-direction: column; align-items: flex-start; gap: 1px; }
  body[data-market-sub="all"] .market-card-head h3 { font-size: 12px !important; }
  body[data-market-sub="all"] .market-time { font-size: 9px !important; }
  body[data-market-sub="all"] .market-card-price { margin-top: 5px; gap: 5px; flex-wrap: wrap; }
  body[data-market-sub="all"] .market-card-price > span:first-child { font-size: 17px !important; }
  body[data-market-sub="all"] .market-card-price > span:last-child { font-size: 10px !important; }
  body[data-market-sub="all"] .market-time { white-space: nowrap; }
  body[data-market-sub="all"] .market-grid[data-market-group="kr"] .market-card-chart {
    height: 104px;
    margin-top: 7px;
  }

  /* 미장 셋은 한 줄에 들어가느라 폭이 절반이다. 글자를 한 단계 더 줄인다. */
  body[data-market-sub="all"] .market-grid[data-market-group="us"] .market-card-head h3,
  body[data-market-sub="all"] .market-grid[data-market-group="asia"] .market-card-head h3 { font-size: 10px !important; }
  /* 셋으로 쪼개진 칸에는 "2026년 9월 17일 00:47 기준" 이 안 들어간다.
     줄바꿈돼서 '기 / 준' 으로 잘리느니 아예 뺀다. 바로 위 국장 카드에 같은 시각이 적혀 있고,
     다섯 지수는 한 번에 같이 받아 온다. 미장만 따로 보면 거기엔 그대로 나온다. */
  body[data-market-sub="all"] .market-grid[data-market-group="us"] .market-time { display: none; }
  body[data-market-sub="all"] .market-grid[data-market-group="asia"] .market-time { display: none; }
  body[data-market-sub="all"] .market-grid[data-market-group="us"] .market-card-price > span:first-child { font-size: 13px !important; }
  body[data-market-sub="all"] .market-grid[data-market-group="asia"] .market-card-price > span:first-child { font-size: 13px !important; }
  body[data-market-sub="all"] .market-grid[data-market-group="us"] .market-card-price > span:last-child { font-size: 9px !important; }
  body[data-market-sub="all"] .market-grid[data-market-group="asia"] .market-card-price > span:last-child { font-size: 9px !important; }
  body[data-market-sub="all"] .market-grid[data-market-group="us"] .market-card-chart,
  body[data-market-sub="all"] .market-grid[data-market-group="asia"] .market-card-chart {
    height: 74px;
    margin-top: 6px;
  }
}

/* ══════════ 낮에 흐려 보이던 곳 ══════════ */
@media (max-width: 900px) {
  /* 아래 탭바. 밝은 판 위에 회색 글씨라 뭉개졌다. 검정으로 간다. */
  body[data-theme="day"] .mobile-bottom-nav button { color: #000000 !important; }
  body[data-theme="day"] .mobile-bottom-nav button.active { color: #000080 !important; }
}

/* ══════════ 브리핑: 기업 눌러 펼치기 ══════════ */
.brief-drill { margin-top: 8px; }
.brief-drill[hidden] { display: none; }
.brief-drill-head {
  font-family: 'Galmuri11', monospace;
  font-size: 12px;
  color: var(--r-amber);
  margin-bottom: 5px;
}
.brief-drill .brief-list { margin: 0; }
.card-tag.is-open {
  background: var(--r-press) !important;
  color: var(--r-press-text) !important;
  border-color: var(--r-btn-lo) var(--r-btn-hi) var(--r-btn-hi) var(--r-btn-lo) !important;
}

/* ══════════ 내 정보 안의 로그아웃 ══════════ */
.ibod-myinfo-card .logout-btn {
  margin-right: 6px;
  padding: 4px 10px;
  background: var(--r-btn);
  color: var(--r-btn-text);
  font-family: 'Galmuri11', monospace;
  font-size: 12px;
  border: 2px solid;
  border-color: var(--r-btn-hi) var(--r-btn-lo) var(--r-btn-lo) var(--r-btn-hi);
  cursor: pointer;
}
.ibod-myinfo-card .logout-btn:active {
  border-color: var(--r-btn-lo) var(--r-btn-hi) var(--r-btn-hi) var(--r-btn-lo);
}

/* 낮의 아래 탭바는 진한 검정이라야 읽힌다. 회색 계열은 밝은 판에서 전부 뭉갠다. */
@media (max-width: 900px) {
  body[data-theme="day"] .mobile-bottom-nav button,
  body[data-theme="day"] .mobile-bottom-nav button span { color: #000000 !important; }
  body[data-theme="day"] .mobile-bottom-nav button.active,
  body[data-theme="day"] .mobile-bottom-nav button.active span { color: #000080 !important; }
  /* 글자가 칸을 넘어 잘리던 것 — '제보' '캘린더' 가 양끝에서 잘려 보였다 */
  .mobile-bottom-nav button { padding: 0 2px; min-width: 0; }
  .mobile-bottom-nav button:last-child { font-size: 10px !important; }
}

/* ══════════ 동영상: GIF 처럼 ══════════
   올라오는 건 몇 초짜리다. 재생바·정지 단추·전체화면 아이콘을 얹으면
   그림보다 껍데기가 커진다. 껍데기를 걷고 저절로 돌게 둔다. */
.feed-video.is-loop { position: relative; }
.feed-video.is-loop video {
  width: 100%;
  display: block;
  background: #000;
}
/* 브라우저가 몰래 얹는 조작 단추까지 막는다 */
.feed-video.is-loop video::-webkit-media-controls,
.feed-video.is-loop video::-webkit-media-controls-enclosure,
.feed-video.is-loop video::-webkit-media-controls-panel,
.feed-video.is-loop video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
}

/* 소리 단추 하나만 남긴다. 오른쪽 아래, 그림을 가리지 않는 자리 */
.video-sound {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 30px;
  height: 30px;
  line-height: 1;
  font-size: 14px;
  background: rgba(8, 12, 20, .72);
  color: #fff;
  border: 2px solid;
  border-color: rgba(255,255,255,.28) rgba(0,0,0,.5) rgba(0,0,0,.5) rgba(255,255,255,.28);
  cursor: pointer;
}
.video-sound:active {
  border-color: rgba(0,0,0,.5) rgba(255,255,255,.28) rgba(255,255,255,.28) rgba(0,0,0,.5);
}

/* 확대해서 보는 중에는 사진을 화면에 꽉 채우지 않는다.
   max-width 가 걸려 있으면 키워도 잘린 채로만 커진다. */
.ibod-image-modal img { touch-action: none; }
.ibod-image-modal.is-zoomed img { cursor: grab; }
.ibod-image-modal.is-zoomed .ibod-img-nav { display: none !important; }

/* ══════════ 좋아요 · 싫어요 ══════════
   누른 쪽이 한눈에 보여야 한다. 파랑 한 겹으로는 밤 화면에서 묻혔다.
   좋아요는 남색, 싫어요는 붉은색으로 갈라 칠하고 글자를 흰색으로 못 박는다. */
body .reaction-btn {
  font-family: 'Galmuri11', monospace !important;
  /* 세로로 두툼하면 덩어리처럼 보인다. 납작하게 눕히고 가로로 벌린다.
     누른 쪽은 색으로 알아보면 되지, 덩치로 알릴 일이 아니다. */
  font-size: 12px !important;
  line-height: 1 !important;
  padding: 5px 15px !important;
  min-width: 58px !important;
  letter-spacing: .03em !important;
}
body .reaction-btn.active-reaction {
  background: #1d4ed8 !important;
  border-color: #93c5fd #0b2a6b #0b2a6b #93c5fd !important;
  color: #ffffff !important;
  box-shadow: none !important;
}
body .reaction-btn.active-reaction[data-reaction="bad"] {
  background: #b91c1c !important;
  border-color: #fca5a5 #5e0d0d #5e0d0d #fca5a5 !important;
}
/* 낮에는 같은 색이 더 진해야 밝은 판 위에서 선다 */
body[data-theme="day"] .reaction-btn.active-reaction { background: #000080 !important; }
body[data-theme="day"] .reaction-btn.active-reaction[data-reaction="bad"] { background: #8b0000 !important; }

/* 멈춤/재생 — 영상 위를 통째로 덮는 투명한 단추.
   어디를 눌러도 멈춘다. 멈춰 있을 때만 한가운데 세모가 보인다. */
.video-play {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.video-play .pix { opacity: 0; transition: opacity .12s; }
.feed-video.is-paused .video-play {
  background: rgba(3, 6, 12, .34);
}
.feed-video.is-paused .video-play .pix { opacity: 1; }

/* ══════════ 카드 짜임: 낮·밤 같은 구조 ══════════
   관리자 화면(CMS)의 뼈대는 두 겹이다 — 판은 바탕색, 읽고 쓰는 면만 움푹 파인 칸.
   그 대비가 90년대 창의 느낌을 만든다.

   예전에는 낮에만 이 짜임을 넣었다. 그래서 밤 화면은 글도 사진도 테두리 없이
   허공에 떠 있어 어색했다. 규칙을 하나로 합치고 색만 변수로 갈아 끼운다.
     · 낮 — 세이지 판에 흰 칸, 검은 테두리
     · 밤 — 남색 판에 더 어두운 칸, 희미한 테두리 */
.feed-card {
  background: var(--r-panel) !important;
  border-color: var(--r-card-hi) var(--r-card-lo) var(--r-card-lo) var(--r-card-hi) !important;
}

/* 글·사진이 놓이는 자리. 움푹 들어간 칸 */
.feed-text,
.tip-line,
.article-title,
.journal-lede,
.journal-body,
.collage-grid,
.inline-viewer,
.feed-video {
  background: var(--r-input);
  border: 2px solid;
  border-color: var(--r-card-lo) var(--r-card-hi) var(--r-card-hi) var(--r-card-lo);
}
.feed-text,
.tip-line,
.article-title,
.journal-lede,
.journal-body { padding: 9px 10px; }
.collage-grid,
.inline-viewer,
.feed-video { padding: 3px; }

.tip-line { display: block; }

/* 머리줄(작성자·시각)과 꼬리(반응)는 판 위에 그대로 둔다.
   거기까지 칸으로 만들면 칸이 세 겹으로 겹쳐 보인다. */
.feed-time,
.card-tags,
.reaction-row { background: transparent; }

/* 글이 없는 카드(사진만 붙인 것)에는 빈 칸을 만들지 않는다 */
.feed-text:empty,
.tip-line:empty { display: none; }

/* 사진 밑에 붙는 주소 한 줄. 상자를 두르면 사진과 따로 노는 덩어리가 된다. */
.feed-text.is-bare {
  background: none !important;
  border: 0 !important;
  padding: 6px 2px 0 !important;
  margin-top: 0 !important;
}

/* 목록 끝의 '더 보기' */
.feed-more {
  display: block;
  width: 100%;
  margin: 10px 0 4px;
  padding: 11px 0;
  background: var(--r-btn);
  color: var(--r-btn-text);
  font-family: 'Galmuri11', monospace;
  font-size: 13px;
  border: 2px solid;
  border-color: var(--r-btn-hi) var(--r-btn-lo) var(--r-btn-lo) var(--r-btn-hi);
  cursor: pointer;
}
/* display:block 은 브라우저 기본값인 [hidden]{display:none} 을 이긴다.
   JS 로 숨겨도 그대로 보여서, 스크랩이 하나도 없는 화면에 '더 보기' 만 덩그러니 남았다. */
.feed-more[hidden] { display: none !important; }

/* ── 검색 결과 ── */
#search-results[hidden] { display: none !important; }
.search-head {
  padding: 8px 10px;
  margin-bottom: 6px;
  background: var(--r-panel);
  border: 2px solid;
  border-color: var(--r-card-lo) var(--r-card-hi) var(--r-card-hi) var(--r-card-lo);
  color: var(--r-amber);
  font-family: 'Galmuri11', monospace;
  font-size: 12px;
}
/* 받글과 단독이 섞여 나온다. 겉모양이 같아 표를 달아 준다. */
.search-kind {
  margin: 8px 0 -4px 2px;
  color: var(--r-meta);
  font-size: 11px;
  font-weight: 700;
}
.feed-more:active {
  border-color: var(--r-btn-lo) var(--r-btn-hi) var(--r-btn-hi) var(--r-btn-lo);
}
.feed-more:disabled { color: var(--r-faint); cursor: default; }

/* ══════════ 문서 첨부 ══════════
   한글·워드·엑셀처럼 펼칠 수 없는 파일. 이름과 크기를 적고 받게만 한다. */
.feed-docs { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.feed-doc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 11px;
  background: var(--r-btn);
  color: var(--r-btn-text) !important;
  font-family: 'Galmuri11', monospace;
  font-size: 13px;
  text-decoration: none !important;
  border: 2px solid;
  border-color: var(--r-btn-hi) var(--r-btn-lo) var(--r-btn-lo) var(--r-btn-hi);
}
.feed-doc:active {
  border-color: var(--r-btn-lo) var(--r-btn-hi) var(--r-btn-hi) var(--r-btn-lo);
}
.feed-doc-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.feed-doc-name::before { content: '📎 '; }
.feed-doc-size { flex: 0 0 auto; color: var(--r-faint); font-size: 11px; }

/* ══════════ 스크롤 막대 ══════════
   기본 막대는 둥근 알약이라 이 화면에서 혼자 요즘 것처럼 보인다.
   윈도우 98 막대로 바꾼다 — 각지고, 손잡이는 볼록, 홈은 파인 면.
   가로·세로 둘 다, 페이지든 안쪽 칸이든 같이 적용된다. */
::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track {
  background: var(--r-input);
  border-radius: 0;
  box-shadow: inset 1px 1px 0 var(--r-card-lo);
}
::-webkit-scrollbar-thumb {
  background: var(--r-btn);
  border: 2px solid;
  border-color: var(--r-btn-hi) var(--r-btn-lo) var(--r-btn-lo) var(--r-btn-hi);
  border-radius: 0;
}
::-webkit-scrollbar-thumb:hover { background: var(--r-hover); }
::-webkit-scrollbar-thumb:active {
  border-color: var(--r-btn-lo) var(--r-btn-hi) var(--r-btn-hi) var(--r-btn-lo);
}
::-webkit-scrollbar-corner { background: var(--r-input); }
/* 파이어폭스는 모양을 못 고른다. 색만 맞춘다. */
* { scrollbar-color: var(--r-btn) var(--r-input); }

/* ─── 첫 방문 설정 ───
   키워드가 비어 있으면 알림이 한 통도 안 간다. 다시 올 이유가 없다는 뜻이다.
   그래서 묻는 것은 직군 하나뿐이고, 나머지는 대신 깔아 준다. 한 화면에서 끝낸다. */
.onboard-body { padding: 14px 14px 4px; overflow-y: auto; }
.onboard-lede { margin: 0 0 12px; font-size: 13px; line-height: 1.7; color: var(--r-text); }
.onboard-lede b { color: var(--r-amber); font-weight: normal; }
.onboard-jobs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.onboard-jobs button {
  padding: 11px 8px;
  font-size: 12px;
  background: var(--r-btn);
  color: var(--r-text);
  border: 2px solid;
  border-color: var(--r-btn-hi) var(--r-btn-lo) var(--r-btn-lo) var(--r-btn-hi);
  cursor: pointer;
}
/* 고른 것은 제목줄 색으로 뒤집는다. 눌린 테두리만으로는 밝은 테마에서 티가 안 나고,
   --r-press-text 는 밝은 바탕에서 글자가 날아간다. */
.onboard-jobs button[aria-pressed="true"] {
  border-color: var(--r-btn-lo) var(--r-btn-hi) var(--r-btn-hi) var(--r-btn-lo);
  /* --r-head-bg 는 그라데이션이고, 단추 배경·글자색은 다른 규칙이 !important 로 잡고 있다.
     고른 티가 나야 하는 자리라 단색 남색으로 못박는다. */
  background: #000080 !important;
  color: #ffffff !important;
}
.onboard-picked { margin-top: 14px; }
.onboard-sub { font-size: 11px; color: var(--r-dim); margin-bottom: 7px; }
.onboard-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.onboard-chips button {
  padding: 7px 10px;
  font-size: 12px;
  background: var(--r-input);
  color: var(--r-text);
  border: 2px solid;
  border-color: var(--r-card-lo) var(--r-card-hi) var(--r-card-hi) var(--r-card-lo);
  cursor: pointer;
}
.onboard-chips button::after { content: ' ×'; color: var(--r-dim); }
.onboard-foot { padding: 12px 14px 14px; display: grid; gap: 7px; flex: 0 0 auto; }
.onboard-go {
  padding: 12px;
  font-size: 13px;
  background: var(--r-btn);
  color: var(--r-amber);
  border: 2px solid;
  border-color: var(--r-btn-hi) var(--r-btn-lo) var(--r-btn-lo) var(--r-btn-hi);
  cursor: pointer;
}
.onboard-go[disabled] { color: var(--r-dim); cursor: default; }
.onboard-later { padding: 4px; font-size: 11px; background: none; border: 0; color: var(--r-dim); cursor: pointer; }

/* ─── 한 줄 의견 ─── */
.feedback-body { padding: 14px; }
.feedback-lede { margin: 0 0 10px; font-size: 12px; line-height: 1.7; color: var(--r-dim); }
.feedback-body textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 9px;
  font: inherit;
  font-size: 13px;
  resize: vertical;
  background: var(--r-input);
  color: var(--r-text);
  border: 2px solid;
  border-color: var(--r-card-lo) var(--r-card-hi) var(--r-card-hi) var(--r-card-lo);
}
.feedback-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.feedback-foot span { font-size: 11px; color: var(--r-dim); }
.feedback-foot button {
  padding: 9px 16px;
  font-size: 13px;
  background: var(--r-btn);
  color: var(--r-text);
  border: 2px solid;
  border-color: var(--r-btn-hi) var(--r-btn-lo) var(--r-btn-lo) var(--r-btn-hi);
  cursor: pointer;
}
.feedback-foot button[disabled] { color: var(--r-dim); cursor: default; }

/* ─── 토론 지우기·신고 ───
   읽는 데 방해가 되면 안 되지만, 필요할 때 못 찾으면 없는 것과 같다.
   답글 달기와 같은 줄 오른쪽 끝에 흐리게 둔다. */
.discussion-mod { margin-left: auto; }
.discussion-mod button {
  padding: 2px 7px;
  color: var(--r-meta);
  background: none;
  border: 0;
  font: 11px 'Galmuri11', monospace;
  cursor: pointer;
  opacity: .72;
}
.discussion-mod button:hover { color: var(--r-link); opacity: 1; }
/* 답글은 도구 줄이 따로 없다. 본문 아래 오른쪽으로 민다. */
.discussion-reply .discussion-mod { display: flex; justify-content: flex-end; margin-top: 2px; }

/* A/B 새 표시. '고쳐 씀'이 가장 잦고 가장 중요하다 — 숫자나 표현만 슬쩍 바꾸는 경우다.
   추가·삭제의 초록/빨강과 구분되게 주황을 준다. */
.revision-highlight.is-rewritten { border-left-color:#f59e0b; color:var(--r-text); }
.revision-highlight.is-removed i { opacity:.72; font-style:normal; }

/* ─── 키워드 한 장 ───
   감시 키워드(위)와 그 단어가 걸린 새 소식(아래)을 한 창에 둔다.
   단어를 고치려고 창을 닫고 내 정보를 다시 여는 일이 없게. */
.keyword-watch-box {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
  padding: 10px 12px;
  border-bottom: 2px solid var(--r-card-lo);
  background: var(--r-panel);
}
/* 칸과 단추는 인라인이라 그냥 두면 한 줄로 흘러 글자가 세로로 눕는다. */
.keyword-watch-box .watch-add { display: flex; gap: 6px; }
.keyword-watch-box .watch-add input { flex: 1; min-width: 0; }
.keyword-watch-box .watch-add button { flex: 0 0 auto; white-space: nowrap; }
.keyword-watch-box .watch-manage-btn { width: 100%; white-space: nowrap; }
.keyword-watch-title {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--r-dim); margin-bottom: 7px;
}
.keyword-watch-box .watch-chips { margin-bottom: 7px; }
.keyword-watch-box .watch-hint { margin-top: 6px; font-size: 11px; color: var(--r-dim); line-height: 1.6; }
.keyword-watch-box .watch-manage-btn { margin-top: 7px; }

/* 알림 줄은 손가락으로 누르는 자리다. 작아서 잘 안 보인다는 말이 나왔다. */
.notification-row .push-toggle {
  min-height: 40px !important; padding: 9px 14px !important; font-size: 14px !important;
}
.notification-row .notification-mode {
  min-height: 40px !important; padding: 8px 10px !important; font-size: 14px !important;
}
.notification-row .quiet-hours, .notification-row label { font-size: 13px; }
.notification-row dd { gap: 8px; }

/* 제목이 바뀐 단독은 한눈에 보여야 한다. 'A/B' 세 글자로는 아무도 못 알아챘다. */
.revision-link.is-changed { color: #ffb000; border-color: #ffb000; }
.revision-link.is-changed .revision-mark { font-weight: normal; }

/* ─── A/B 목록 ───
   회색 테두리뿐이라 항목 경계가 안 보였다. 바뀐 것을 보는 화면이니
   이 서비스가 쭉 써 온 주황으로 둘러 '여기가 바뀐 자리'를 바로 알게 한다. */
.revision-summary-item .revision-ab span { border-color: var(--r-amber); }

/* ---------- 지표판 (증시 > 지표) ----------
   일곱 가지를 한 화면에 건다. 숫자가 주인이고 차트는 곁다리라
   차트는 작게, 글자는 크게 둔다. */
.board-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(188px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
/* display 를 준 선택자가 UA 의 [hidden] 규칙을 이긴다. 명시적으로 숨긴다 —
   이것이 없으면 '전체' 를 눌러도 지표판이 계속 깔려 있다. */
.board-grid[hidden] { display: none !important; }
.board-stamp {
  grid-column: 1 / -1;
  color: var(--r-meta);
  font-size: 11px;
}
.board-stamp b { color: #34d399; font-weight: inherit; }

/* 남은 거리가 멀수록 진하다. 다 와 갈수록 옅어져 눈에 덜 걸린다. */
.board-target-fill.far { background: #ff5c6e; }
.board-target-fill.mid { background: #ffb000; }
.board-target-fill.near { background: #facc15; }
.board-target-fill.close { background: #6ee7a8; }
.board-target-text.far { color: #ff5c6e; }
.board-target-text.mid { color: #ffb000; }
.board-target-text.near { color: #facc15; }
.board-target-text.close { color: #6ee7a8; }
.board-loading {
  grid-column: 1 / -1;
  padding: 16px;
  color: var(--r-meta);
  font-size: 12px;
  border: 1px dashed var(--r-line);
}
.board-card {
  padding: 10px 11px;
  background: var(--r-card);
  border: 2px solid;
  border-color: var(--r-card-hi) var(--r-card-lo) var(--r-card-lo) var(--r-card-hi);
}
.board-name {
  color: var(--r-text);
  font-size: 12px;
  line-height: 1.4;
}
.board-period {
  display: block;
  color: var(--r-faint);
  font-size: 10.5px;
}
.board-price {
  margin: 3px 0 1px;
  color: var(--r-text);
  font-size: 19px;
  letter-spacing: -0.5px;
}
.board-diff { font-size: 11px; }
/* 한국 관행대로 오르면 빨강, 내리면 파랑. */
.board-diff.up { color: #ff5c6e; }
.board-diff.dn { color: #4d9bff; }
.board-spark {
  display: block;
  width: 100%;
  height: 44px;
  margin-top: 7px;
  background: var(--r-input);
  border: 1px solid var(--r-line);
}

/* ---------- 목표가 ----------
   막대는 '6개월 범위 안에서 목표까지 얼마나 왔나'를 보인다.
   % 숫자만으로는 천만원짜리와 백 포인트짜리의 감이 안 잡힌다. */
.board-card { cursor: pointer; }
.board-target { margin-top: 7px; }
.board-target-track {
  height: 6px;
  background: var(--r-input);
  border: 1px solid var(--r-line);
}
.board-target-fill { height: 100%; background: var(--r-amber); }
/* 지금 값이 목표보다 아래(-%)면 막대가 오른쪽 끝에서 왼쪽으로 찬다 */
.board-target-track.from-right { display: flex; justify-content: flex-end; }
.board-target-fill.done { background: #34d399; }
.board-target-text { margin-top: 4px; color: var(--r-meta); font-size: 10.5px; }
.board-target-text.done { color: #34d399; }

.target-card { max-width: 420px; }
.target-now { padding: 9px 12px; color: var(--r-text); font-size: 14px; }
.target-list { padding: 0 12px; display: grid; gap: 5px; }
.target-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: var(--r-card);
  border: 1px solid var(--r-line);
  font-size: 13px;
  color: var(--r-text);
}
.target-row b { flex: 1; min-width: 0; }
.target-row span { color: var(--r-meta); font-size: 11px; }
.target-empty {
  padding: 14px 10px; text-align: center;
  color: var(--r-faint); font-size: 12px;
  border: 1px dashed var(--r-line);
}
.target-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px; }
.target-add input[type="text"] {
  flex: 1 1 130px; min-width: 0; padding: 8px 9px;
  background: var(--r-input); color: var(--r-text);
  border: 2px solid;
  border-color: var(--r-card-lo) var(--r-card-hi) var(--r-card-hi) var(--r-card-lo);
  font-size: 13px;
}
.target-add label {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--r-meta); font-size: 12px; cursor: pointer;
}
.target-foot {
  padding: 0 12px 13px;
  color: var(--r-faint); font-size: 11px; line-height: 1.6;
}

/* 종목 이름도 막대와 같은 색을 쓴다. 칸을 안 들여다봐도 색만으로 읽힌다. */
.board-name.far { color: #ff5c6e; }
.board-name.mid { color: #ffb000; }
.board-name.near { color: #facc15; }
.board-name.close { color: #6ee7a8; }
.board-name.done { color: #34d399; }

/* ---------- 지표 단추는 장 단추와 다른 것이다 ----------
   국장·미장·코인은 여러 개를 같이 켜 두는 것이고,
   지표는 혼자만 서는 판이다. 같은 줄에 같은 모양으로 두면 헷갈린다.
   줄 하나 긋고 색을 달리해 갈라 둔다. */
.toolbar-btn.board-tab {
  border-color: #34d399 !important;
  color: #34d399 !important;
}
.toolbar-btn.board-tab.active {
  background: #34d399 !important;
  color: var(--r-bg) !important;
  border-color: #34d399 !important;
}

/* 증시에서도 새로고침·글자 크기 바를 같은 위치에 둔다. */

/* ---------- 손으로 그린 고르는 칸 ----------
   폰의 <select> 는 운영체제가 제 방식으로 띄워 PC 와 모양이 달랐다.
   같은 목록이 같은 자리에 떨어지도록 직접 그린다. */
.pick-wrap { position: relative; display: inline-block; min-width: 150px; }
.pick-hidden {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  opacity: 0 !important; pointer-events: none !important;
}
.pick-face {
  width: 100%;
  padding: 8px 26px 8px 10px;
  text-align: left;
  background: var(--r-input) !important;
  color: var(--r-text) !important;
  border: 2px solid !important;
  border-color: var(--r-card-lo) var(--r-card-hi) var(--r-card-hi) var(--r-card-lo) !important;
  font-size: 13px;
  cursor: pointer;
}
.pick-face::after {
  content: '▾';
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--r-meta);
}
.pick-list {
  position: absolute;
  left: 0; right: 0; top: calc(100% + 2px);
  z-index: 10006;
  background: var(--r-card);
  border: 2px solid;
  border-color: var(--r-card-hi) var(--r-card-lo) var(--r-card-lo) var(--r-card-hi);
}
.pick-list[hidden] { display: none; }
.pick-list button {
  display: block;
  width: 100%;
  padding: 10px 10px;
  text-align: left;
  background: transparent !important;
  color: var(--r-text) !important;
  border: 0 !important;
  font-size: 13px;
  cursor: pointer;
}
.pick-list button.on,
.pick-list button:hover { background: var(--r-amber) !important; color: var(--r-bg) !important; }

/* '안 읽음 N' 은 누를 수 있다. 첫 번째 안 읽은 글로 간다. */
button.unread-badge {
  background: transparent !important;
  border: 0 !important;
  padding: 0 4px !important;
  cursor: pointer;
  color: #ff9f0a !important;
}
button.unread-badge[data-zero="1"] { cursor: default; }
body[data-theme="day"] button.unread-badge { color: #b45309 !important; }

/* 삭제 요청 깃발. 반응 단추와 같은 줄에 두되 작게, 오른쪽 끝으로 민다. */
.reaction-btn.takedown-btn {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  margin-left: -2px !important;   /* 가리기·깃발 둘이 붙어 오른쪽 끝에 선다 */
  padding: 6px 9px !important;
  color: var(--r-meta) !important;
}
.reaction-btn.takedown-btn.tail-first { margin-left: auto !important; }

/* 고친 글 표시. 눈에 띄되 시각보다 앞서지 않게. */
.edited-mark { color: var(--r-meta) !important; font-size: 0.92em; }

/* 링크 카드 — 카톡방처럼 제목·사이트 왼쪽, 사진 오른쪽 */
.link-card { display:flex; align-items:center; gap:10px; margin:0 0 8px; padding:8px 10px; border:1px solid var(--r-line); background:var(--r-card); color:var(--r-text); text-decoration:none; }
.link-card-text { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.link-card-title { font-weight:700; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.link-card-site { color:var(--r-meta); font-size:.85em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.link-card-img { width:64px; height:64px; object-fit:cover; flex:none; }
/* 밤에는 링크 미리보기도 본문처럼 검은빛으로 맞춘다. 낮 테마는 유지한다. */
body:not([data-theme="day"]) .link-card { background:var(--r-screen); }
.search-input-box { position:relative; flex:1 1 60px; min-width:60px; }
.tb-dot { display:none; }
/* F21: 좁은 폰에서 검색칸이 60px까지 줄던 것. 스크랩·키워드는 아이콘만 두고, 단추 높이는 손가락 크기로. 순서·한 줄·테마 위치는 그대로. */
@media (max-width: 400px) {
  .feed-toolbar .tb-label { display:none; }
  .feed-toolbar .tb-dot { display:inline; }
  .feed-toolbar .toolbar-btn, .feed-toolbar .unread-badge { min-height:32px; }
  .search-wrap, .search-input-box { min-width:88px; }
  .search-input-box #user-search-ibad { min-height:32px; }
}
.search-input-box #user-search-ibad { width:100%; box-sizing:border-box; }
#user-search-ibad { padding-right:38px !important; }
/* 입력칸 안의 삭제 아이콘은 일반 입체 버튼 스타일을 쓰지 않는다. */
#ibod-search-clear { position:absolute; right:4px; top:50%; transform:translateY(-50%); display:flex; align-items:center; justify-content:center; width:30px; height:30px; min-height:0; padding:0 !important; margin:0 !important; border:0 !important; border-radius:50%; background:transparent !important; box-shadow:none !important; color:var(--r-meta) !important; font:22px/1 Arial,sans-serif !important; cursor:pointer; }
#ibod-search-clear:hover { background:var(--r-card) !important; color:var(--r-text) !important; }
#ibod-search-clear:focus-visible { outline:2px solid var(--r-icon); outline-offset:-3px; }
#ibod-search-clear[hidden], #ibod-unread-badge[hidden] { display:none !important; }
.cal-critical-mark { display:block; flex:none; box-sizing:border-box; margin:3px auto 0; width:max-content; max-width:100%; padding:2px; background:#b91c1c; color:#fff !important; font:700 9px/1.3 sans-serif; white-space:nowrap; border:1px solid #ff7777; }
.ibod-cal-impact.very-important { background:#b91c1c !important; color:#fff !important; border:1px solid #ff7777 !important; }
.ibod-cal-impact.very-important { background:#b91c1c !important; color:#fff !important; border:1px solid #ff6363 !important; font-weight:700; }
/* 기존 테마의 각진 창과 입력 색을 그대로 따른다. */
#report-dialog { box-sizing:border-box; width:min(440px, calc(100% - 24px)); max-height:calc(100dvh - 32px); overflow:auto; padding:18px; background:var(--r-panel); color:var(--r-text); border:2px solid var(--r-card-hi); }
#report-dialog::backdrop { background:rgba(3,7,14,.78); }
#report-dialog h2 { margin:0 0 10px; font-size:18px; }
#report-dialog p { margin:8px 0 14px; color:var(--r-meta); font-size:12px; line-height:1.6; }
#report-dialog label { display:block; font-size:13px; color:var(--r-meta); line-height:1.5; }
#report-dialog textarea { box-sizing:border-box; width:100%; margin-top:7px; font-size:14px; }
#report-dialog .report-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:12px; }
#report-dialog .report-actions button { min-height:40px; padding:7px 14px !important; white-space:nowrap; background:var(--r-btn); color:var(--r-btn-text); border:2px solid; border-color:var(--r-btn-hi) var(--r-btn-lo) var(--r-btn-lo) var(--r-btn-hi); }
#report-dialog :focus-visible { outline:2px solid var(--r-link); outline-offset:2px; }
.feed-text .market-text-up { color:var(--r-up) !important; }
.feed-text .market-text-down { color:var(--r-down) !important; }
/* 모바일 새로고침 안내만 해당 버튼 위로. 웹·다른 안내는 기존 위치다. */
@media (max-width:900px) {
  #ibod-toast[data-context="refresh"] { top:auto !important; bottom:calc(142px + env(safe-area-inset-bottom)); left:50%; right:auto; transform:translateX(-50%) translateY(8px); border:2px solid #00e600 !important; border-color:#00e600 !important; }
  #ibod-toast[data-context="refresh"].show { transform:translateX(-50%) translateY(0); }
  body.has-company-filter #ibod-toast[data-context="refresh"] { bottom:calc(178px + env(safe-area-inset-bottom)); }
}

/* 요금제: 30일·1년 두 단추 */
.plan-buy { display:flex; gap:6px; }
.plan-buy .plan-cta { flex:1; }
.plan-cta.is-year { border-color: var(--r-amber); }

/* B2B 도입 문의: 카드 안에서 펼친다 */
.b2b-ask[hidden], .plan-cta[hidden] { display: none !important; }
.b2b-ask { margin-top: 4px; }

/* i제보 예시 카드 — 비었을 때만. 누르면 쓰기 창 */
.tip-sample { border:1px dashed var(--r-line); background:var(--r-card); padding:10px 12px; margin-bottom:8px; cursor:pointer; }
.tip-sample-tag { font-size:11px; color:var(--r-amber); }
.tip-sample-title { color:var(--r-text); font-weight:700; margin-top:2px; }
.tip-sample-note { color:var(--r-meta); font-size:12px; margin-top:2px; }
.tip-login-note[hidden] { display:none !important; }

/* A/B: 어느 매체가 바꿨나 — 맨 앞에 굵게 */
.revision-first-summary .revision-media { color: var(--r-text); font-weight: 700; border-color: var(--r-amber); }

/* i제보 머리 안내 — 익명·보상·어디로 가나 */
.tip-pitch { list-style:none; margin:0 0 10px; padding:10px 12px; border:1px solid var(--r-amber); background:var(--r-card); }
.tip-pitch li { color:var(--r-text); font-size:13px; line-height:1.7; }

/* 가린 글 자리 — 한 줄만 남겨 되돌릴 수 있게 */
.hidden-line { display:flex; justify-content:flex-end; align-items:center; padding:8px 12px; margin-bottom:8px; border:1px dashed var(--r-line); color:var(--r-meta); font-size:12px; }
#hidden-posts-row[hidden] { display:none !important; }

/* 확대한 사진은 손 모양으로 — 끌어서 옮길 수 있다는 표시 */
#ibod-image-modal.is-zoomed #ibod-image-modal-img { cursor: grab; }

/* 받글 분류 칩 — 한 줄, 넘치면 옆으로 민다 */
.cat-chips { display:flex; gap:6px; overflow-x:auto; padding:6px 0 8px; scrollbar-width:none; }
.cat-chips::-webkit-scrollbar { display:none; }
.cat-chip { flex:0 0 auto; padding:5px 10px; font-size:12px; background:var(--r-btn); color:var(--r-btn-text); border:2px solid; border-color:var(--r-btn-hi) var(--r-btn-lo) var(--r-btn-lo) var(--r-btn-hi); cursor:pointer; }
.cat-chip.is-on { color:var(--r-amber); border-color:var(--r-amber); }