/* ============ RESET & BASE ============ */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;700;800&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* 2026-07-16: 상단 market-ribbon(코스피/코스닥/원달러/BTC 고정바)을 완전히 걷어내고
   그 자리를 없앴다(js/market-ribbon.js가 #market-ribbon을 display:none 처리) - navbar가
   맨 위(top:0)로 올라오고, 그만큼 아래 disc-ticker/page-wrap/sidebar 좌표를 전부 32px씩
   당겼다. 관심지수 카드바(js/quick-indices.js)는 navbar 바로 아래 위치하며, 접었다 폈다
   할 때 자기 높이(--qi-height)만 바꾸고 그 값을 아래 콘텐츠 시작 좌표 계산에도 그대로
   재사용한다(quick-indices.js가 collapsed 여부에 따라 이 값을 40px/175px로 setProperty).
   기본값(175px)은 var()의 폴백으로 넣어둬서 JS가 아직 안 붙었을 때도 레이아웃이 안 깨진다.
   2026-07-17: 100 -> 74 -> 100 -> 180(토스 큰 카드+그리드) -> 130(min-height:0 버그
   수정) -> 140(글자 크기 원복) -> 175px(그리드를 4x2에서 2x3으로 바꾸며 줄이 하나
   늘어서 같은 폰트 크기가 겹치지 않으려면 170px 이상 필요해짐 - 사용자가 직접 그린
   스케치 반영, css/quick-indices.css 참고).
   2026-07-17(9차): 별도 바였던 KRX 공시 티커(disc-ticker)를 관심지수 바 안의 "긴급속보"
   패널로 흡수하면서 disc-ticker 자체가 사라졌다 - 아래 .page-wrap/.sidebar-left/right의
   오프셋 계산에서 disc-ticker 높이(38px)를 뺐다(js/quick-indices.js 상단 주석 참고).
   2026-07-17(11차): 등락률을 가격 옆 한 줄로 합치면서 175 -> 140px. 그리고 바가
   navbar에서 6px 떨어지면서(css/quick-indices.css top:62px) 아래 오프셋 상수도
   +6(page-wrap 52->58, sidebar 72->78).
   2026-07-27: 왼쪽 세로 사이드바(메뉴)를 없애고 navbar 바로 아래 가로 상단 메뉴바로
   전환(9Pay 증권 작업지시서) - .sidebar-left 자체를 이 상단 메뉴바로 재활용한다(DOM은
   그대로, position만 fixed 가로바로 변경 - skin.html 수정 불필요). 그 높이를
   --topbar-height로 빼서 아래 page-wrap/sidebar-right/quick-indices 오프셋에 전부
   더한다(패턴은 --qi-height와 동일). */
:root { --qi-height: 86px; --topbar-height: 48px; }
html.nav-secondary-open { --topbar-height: 92px; }
/* 2026-07-27: 관심지수 리본을 홈("/")에서만 띄우기로 하면서(js/quick-indices.js의
   isHomePage() 참고) 다른 페이지에서는 init()이 아예 실행되지 않아 --qi-height를
   setProperty할 JS가 없다 - :root의 기본값(140px)이 그대로 남아 .page-wrap 등의
   padding-top 계산에 리본이 없는데도 그 자리만큼 빈 여백이 생김. full-width-page는
   skin.html 인라인 스크립트가 홈이 아닌 모든 페이지에 미리 붙여두는 클래스라 여기서
   재사용해 0으로 덮어쓴다(:root보다 명시도가 높아 이김). */
html.full-width-page { --qi-height: 0px; }

/* 2026-07-17: 페이지 배경을 연라벤더(#edf0f7)에서 흰색으로 변경(사용자 요청 - "토스
   스타일"처럼 배경과 카드가 또렷이 구분되는 옅은 회색/보라 대신, 카드 그림자만으로
   구분되는 플랫한 흰 배경). .card/.post-card 등은 이미 테두리 없이 box-shadow만으로
   떠 있는 느낌을 내고 있어서(아래 .card 참고) 배경이 흰색이어도 그림자로 구분된다.
   2026-07-18: 순백(#fff)에서 rgb(253,253,247)로 재변경(사용자 요청 - 배경색 통일).
   2026-08: 기본 명조 폰트를 'Noto Serif KR'에서 '마루 부리'(MaruBuri, 네이버 한글한글
   아름답게 - skin.html의 maru-buri.css 링크로 로드)로 교체(사용자 요청). CDN이
   MaruBuriExtraLight/Light/MaruBuri(Regular)/SemiBold/Bold 5개 굵기를 별도 font-family로
   제공하는데, 지금은 Regular('MaruBuri')만 기본값으로 연결했다 - font-weight:700/800을
   쓰는 굵은 텍스트는 브라우저가 합성(faux) 볼드로 그린다(진짜 Bold/SemiBold 글자꼴을
   쓰려면 해당 굵기 문맥마다 font-family를 'MaruBuriBold'/'MaruBuriSemiBold'로 따로
   지정해야 함 - 아직 안 함). */
body {
  font-family: 'MaruBuri', Georgia, 'Times New Roman', serif;
  background: rgb(253, 253, 247);
  color: #1a202c;
  min-height: 100vh;
}
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-thumb { background: #bdc8e0; border-radius: 4px; }
button, input, textarea { font-family: inherit; }
a { text-decoration: none; color: inherit; }

/* ============ NAVBAR ============ */
/* 2026-07-28: 라이트모드 기본 배경을 진한 초록(#082415)에서 사이트 바탕색과 같은
   rgb(253,253,247)로 변경(사용자 요청) - 당시엔 다크모드가 원래도 이 진초록으로 별도
   지정돼 있어서 그대로 뒀었지만("다크모드=진초록 navbar" 결정), 같은 날 후속 요청으로
   다크모드 전체를 배경 #1A1A1A + 글자 #F5EFE0 2색 체계로 재통일하면서 진초록도
   폐기됨(아래 html.dark .navbar 참고, 상세 사유는 그 규칙 옆 주석). 배경이 밝아지면서
   어두운 배경을 전제로 한 로고 텍스트/아이콘/검색창 색도 전부 같이 뒤집어야 해서, 아래
   각 요소에 라이트/다크 색을 나눠 정의한다(라이트=기본값, 다크=html.dark 오버라이드). */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 300;
  height: 56px;
  background: rgb(253, 253, 247);
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
  /* 2026-07-28: 로고를 더 왼쪽으로 붙이기 위해 좌측 패딩만 줄임(우측 아이콘 위치는 유지) -
     아래 .sidebar-left .nav-menu의 좌측 패딩과 반드시 같은 값을 써야 메뉴 탭 첫 글자가
     9Pay 로고와 같은 x좌표에서 시작함(사용자 요청 "9Pay랑 같이 시작"). */
  padding: 0 20px 0 14px;
  gap: 16px;
  box-shadow: 0 1px 8px rgba(0,0,0,0.06);
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  flex-shrink: 0;
  text-decoration: none;
}
.nav-logo-icon {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
}
.nav-logo-icon svg { display: block; }
.nav-logo-text { line-height: 1; }
.nav-logo-name {
  display: block;
  font-family: 'MaruBuri', Georgia, serif !important;
  color: #000;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.5px;
}
.nav-logo-sub {
  display: block;
  color: #6b84a8;
  font-size: 9px;
  letter-spacing: 0.8px;
  margin-top: 2px;
}
.nav-search {
  flex: 1;
  max-width: 420px;
  margin-left: 20px;
  position: relative;
}

/* 2026-07-28: navbar 안에 종목검색 입력창(js/skin-menu.js의 SEARCH_HTML, 원래는 왼쪽
   사이드바 카드용 "음각" 스타일)을 심었다 - 마크업/자동완성 로직(js/stock-search-panel.js)은
   그대로. navbar가 라이트모드 기본값에서 밝은 배경(rgb(253,253,247))으로 바뀌면서
   .nav-search-wrap의 원래 "음각" 라이트 색(아래 사이드바용 기본값 참고)이 그대로 잘
   맞아 라이트모드 전용 재도색은 더 필요 없음 - padding/border만 navbar 안에서 카드
   여백 없이 딱 맞게 조정한다. 다크그린 색은 html.dark 전용(아래) 오버라이드로 이동.
   (예전 .nav-search input/.nav-search svg 규칙은 <s_search>가 있던 시절 원시 <input>에
   직접 걸려있던 것 - 지금은 그 자리를 .nav-search-wrap > .nav-search-input-wrap > input
   구조가 대신하는데, 옛 "input" 디센던트 셀렉터가 이 안쪽 input에도 그대로 걸려서 바깥
   래퍼와 안쪽 input에 각각 둥근 박스가 이중으로 그려지는 버그가 있었음
   (사용자 리포트: "검색창이 이중으로 되어 있어") - 옛 규칙을 삭제해서 해결) */
.navbar .nav-search-wrap { padding: 0; border-bottom: none; margin-bottom: 0; }
.nav-icons {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.nav-icon-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #f1f5f9;
  border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
/* 아이콘 svg 자체는 skin.html에 stroke="#ffffff"로 하드코딩돼 있음(마크업 수정 없이
   CSS로 덮어씀 - SVG presentation attribute는 CSS보다 우선순위가 낮아 그냥 선택자만
   걸어도 이긴다). 라이트모드 기본값은 어두운 회색, 다크모드는 원래 흰색으로 되돌림. */
.nav-icon-btn svg { stroke: #555; }
html.dark .nav-icon-btn { background: rgba(245, 239, 224, 0.08); }
html.dark .nav-icon-btn svg { stroke: #F5EFE0; }

/* ============ MAIN LAYOUT ============ */
.page-wrap {
  /* navbar(56) + quick-indices 바(--qi-height) + 여백(16) = 72+높이, main-layout 자체
     padding(20)을 빼면 52+높이. --qi-height는 :root에서 정의(위 참고), quick-indices.js가
     접힘/펼침에 따라 실시간으로 바꾼다.
     2026-07-16: 실사에서 이 값이 계산대로 안 먹히고 122px(내가 쓴 적 없는 값)로 나오는
     현상이 확인됨 - skin.html에 직접 박혀있는(git 밖이라 안 보이는) 다른 CSS가 이걸
     덮어쓰는 것으로 추정, !important로 강제함.
     2026-07-17(9차): disc-ticker(38px)가 없어지면서 base가 94->56으로 줄어 90->52.
     2026-07-17(11차): 바가 navbar에서 6px 떨어지며 52->58.
     2026-07-27: 상단 메뉴바(--topbar-height) 추가로 그만큼 더 밀어냄. */
  padding-top: calc(58px + var(--topbar-height) + var(--qi-height)) !important;
  min-height: 100vh;
}
.main-layout {
  max-width: 1380px;
  margin: 0 auto;
  padding: 20px 16px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

/* ============ TOP MENU BAR (구 SIDEBAR LEFT) ============
   2026-07-27: 세로 사이드바를 navbar 바로 아래 가로 상단 메뉴바로 전환(9Pay 증권
   작업지시서 #1/#2 - "LOGO 메뉴 검색" 헤더 + 그 아래 메뉴 행 레이아웃). skin.html의
   div 자체(.sidebar-left, #nav-menu-mount)는 옮기지 않고 CSS로만 위치를 바꿨다 -
   position:fixed가 되는 순간 .main-layout(flex) 흐름에서 빠지므로 .feed가 자동으로
   풀폭이 되고 별도 구조 변경이 불필요했다(skin.html 재배포 없이 push만으로 반영 가능). */
.sidebar-left {
  position: fixed !important;
  top: 56px !important; /* navbar 높이 바로 아래 */
  left: 0; right: 0;
  width: auto;
  height: var(--topbar-height);
  z-index: 250;
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  padding-bottom: 0;
  /* 2026-07-28: 흰 배경이라 navbar와의 경계가 흐릿해 보인다는 피드백 - navbar와 같은
     옅은 배경(rgb(253,253,247))으로 통일하고, box-shadow 대신 위/아래 회색 실선(hairline)으로
     경계를 명확히 함(네이버페이 증권 참고 스크린샷 스타일). */
  background: rgb(253, 253, 247);
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  box-shadow: none;
  border-radius: 0;
}
/* 사이드바 완전 숨김(2026-07-21 사이드바 리디자인 #3, navbar #sidebarToggleBtn) -
   상단 메뉴바가 된 지금도 그대로 재사용(메뉴바 접기/펼치기로 의미만 바뀜). */
@media (min-width: 721px) {
  html.sidebar-collapsed .sidebar-left { display: none !important; }
}
.sidebar-left .card.nav-menu,
.sidebar-left .nav-menu {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  height: 100%;
  /* nav-menu는 .card 클래스도 같이 갖고 있어 .card { background:#fff }가 그대로 먹으면
     .sidebar-left에 새로 준 크림색(rgb(253,253,247))을 이 안쪽 요소가 흰색으로 덮어버림
     (nav-menu가 사실상 메뉴바 전체 폭/높이를 채우므로 눈에 보이는 배경은 전부 이 색이 됨) -
     투명으로 재정의해서 부모 배경이 그대로 비치게 함. */
  background: transparent;
  /* 2026-07-28: max-width:1380px + margin:0 auto로 가운데 정렬돼있던 걸 제거 - navbar의
     로고는 뷰포트 왼쪽 끝(padding-left:14px)에 고정인데 이 메뉴는 화면 중앙 기준으로
     떠 있어서 넓은 화면에서 서로 어긋나 보였음(사용자 리포트). navbar와 동일한
     좌측 패딩(14px)으로 맞춰 항상 같은 x좌표에서 시작하게 함. */
  padding: 0 8px 0 14px;
  /* 데스크톱에서 overflow-x:auto를 주면 CSS 계산상 overflow-y도 auto가 되어,
     position:absolute 드롭다운이 50px 메뉴바 안에서 잘린다. PC는 완전히 열어두고
     가로 스크롤이 필요한 모바일에서만 아래 media query로 다시 활성화한다. */
  overflow: visible;
  scrollbar-width: none;
  box-shadow: none;
  border-radius: 0;
  width: 100%;
}
.sidebar-left .nav-menu::-webkit-scrollbar { display: none; }
/* 2026-07-28: 종목검색 입력창 자체를 navbar 안(#navSearchMount, skin.html)으로 옮겨서
   더는 이 상단 메뉴바 쪽에 렌더링되지 않음(js/skin-menu.js) - 예전엔 여기서 CSS로
   숨기기만 했었는데 모바일 재노출을 못 해서 모바일에 검색창이 아예 없는 버그가 있었음.
   지금은 애초에 여기 안 그려지니 그 문제 자체가 해소됨. */
.sidebar-left .nav-item {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2px;
  padding: 0 18px;
  margin-bottom: 0;
  border-radius: 0;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}
.sidebar-left .nav-item-icon { display: none; } /* 텍스트 탭 위주(스크린샷 스타일) */
.sidebar-left .nav-item-label { font-size: 14.5px; flex: none; color: #374151; }
.sidebar-left .nav-item:hover { background: #f8fafc; }
.sidebar-left .nav-item-home {
  background: transparent;
  border-bottom-color: #082415;
}
/* 2026-07-28: 메뉴 전체 bold체 제거 요청으로 활성 탭(현재 페이지) 표시도 굵기 대신
   색(아래)과 위 .nav-item-home의 border-bottom-color만으로 구분하도록 변경. */
.sidebar-left .nav-item-home .nav-item-label { color: #082415; }

/* Card base */
.card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 1px 8px rgba(0,0,0,0.08);
}

/* Nav menu */
.nav-menu { padding: 8px; }
.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 10px;
  border-radius: 10px;
  cursor: pointer;
  margin-bottom: 3px;
  transition: background .15s;
  user-select: none;
  text-decoration: none;
  color: #374151;
}
/* 실제로 클릭해본 링크(예: 마켓 브리핑)는 브라우저 기본 방문색(보라/파랑)이 새어나오므로
   명시적으로 무효화 - 아이콘 svg는 color:inherit이라 이 색을 같이 따라간다 */
.nav-item:visited,
.nav-item:visited .nav-item-label { color: #374151; }
.nav-item-icon svg {
  display: block;
  color: inherit; /* 부모 color 그대로 따라감 */
  transition: stroke 0.2s;
}
.nav-item:hover { background: #f1f5f9; }
/* 2026-07-17: 아이콘 원형 배경(회색/연보라)이 흰 페이지 배경과 도드라져 보여서
   흰색으로 통일(사용자 요청 - "토스처럼", 배경 대신 텍스트 색으로만 강조). */
.nav-item-home { background: #fff; }
.nav-item-home .nav-item-label { color: #4338ca; }
.nav-item-home .nav-item-icon { background: #fff; }
.nav-item-icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.nav-item-label { font-size: 14px; flex: 1; }

/* 종목검색 (2026-07-21부터 js/skin-menu.js가 메뉴 리스트 최상단에 심음, 이전엔 커뮤니티
   메뉴 뒤. js/stock-search-panel.js가 동작을 붙임) "음각" 느낌 - 안쪽 그림자로 눌려있는
   듯한 인풋. 아래 메뉴 리스트와 구분되는 얇은 구분선을 하단에 둠(작업지시서 순서표의
   "─────────────"에 대응). */
.nav-search-wrap { position: relative; padding: 10px 10px 12px; border-bottom: 1px solid #eee; margin-bottom: 6px; }
.nav-search-input-wrap {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  border-radius: 10px;
  background: #eef0f3;
  border: 1px solid #dde1e7;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.08), inset 0 -1px 0 rgba(255, 255, 255, 0.6);
}
.nav-search-icon { font-size: 13px; flex-shrink: 0; opacity: 0.7; }
.nav-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-size: 13.5px;
  font-family: inherit;
  color: #374151;
}
.nav-search-input::placeholder { color: #9aa3af; }

.nav-search-suggest {
  display: none;
  position: absolute;
  top: calc(100% - 2px);
  left: 10px;
  right: 10px;
  z-index: 30;
  background: #fff;
  border: 1px solid #dde1e7;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14);
  max-height: 280px;
  overflow-y: auto;
  padding: 4px;
}
.nav-search-suggest.active { display: block; }
.nav-search-suggest-title {
  font-size: 10.5px;
  font-weight: 700;
  color: #9aa3af;
  padding: 6px 8px 2px;
}
.nav-search-suggest-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px;
  border-radius: 7px;
  font-size: 13px;
  color: #374151;
  cursor: pointer;
}
/* 2026-07-28 사용자 요청: 자동완성 목록에 종목 아이콘 표시 */
.nav-search-suggest-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: contain;
  background: #fff;
}
.nav-search-suggest-item:hover, .nav-search-suggest-item.active { background: #f1f5f9; }
.nav-search-suggest-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.nav-search-rate-badge {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  border-radius: 4px;
  color: #888780;
}
.nav-search-rate-badge:empty { display: none; }
.nav-search-rate-badge:not(:empty) { padding: 2px 5px; background: #f1f0ea; }
.nav-search-rate-badge.rate-up { color: #d24f45; background: #fdebea; }
.nav-search-rate-badge.rate-down { color: #1261c4; background: #eaf1fb; }
.nav-search-current-price {
  flex-shrink: 0;
  min-width: 68px;
  text-align: right;
  font-size: 11px;
  font-weight: 600;
  color: #4b5563;
  font-variant-numeric: tabular-nums;
}
.nav-search-current-price:empty { display: none; }
.nav-search-fav-btn {
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: #cbd5e1;
  font-size: 15px;
  line-height: 1;
  padding: 2px 4px;
  cursor: pointer;
  border-radius: 4px;
}
.nav-search-fav-btn:hover { background: rgba(0, 0, 0, 0.06); }
.nav-search-fav-btn.active { color: #e0a300; }

/* Categories — [##_category_list_##] 출력 스타일 */
.cat-section { padding: 16px; }
.section-title {
  font-size: 10.5px;
  font-weight: 700;
  color: #94a3b8;
  margin-bottom: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
/* li에 flex 금지 — 하위 ul이 옆으로 붙는 버그 방지 */
.cat-section ul { list-style: none; padding: 0; margin: 0; }
.cat-section ul li { margin-bottom: 2px; }

/* flex는 a에만 */
.cat-section ul li > a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 8px;
  border-radius: 9px;
  font-size: 13px;
  color: #374151;
  text-decoration: none;
  transition: background .15s;
}
.cat-section ul li > a:hover { background: #f8faff; color: #4338ca; }

/* 글 수 뱃지 */
.cat-section ul li > a span:not(.cat-dot) {
  margin-left: auto;
  font-size: 10.5px;
  background: #f1f5f9;
  color: #94a3b8;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 500;
  flex-shrink: 0;
}
/* 하위 카테고리 들여쓰기 */
.cat-section ul ul { padding-left: 20px; margin-top: 2px; }
.cat-section ul ul li > a { font-size: 12px; color: #64748b; padding: 7px 8px; }
.cat-section ul ul li > a::before { width: 5px; height: 5px; background: #cbd5e1; }

/* 3단계 */
.cat-section ul ul ul { padding-left: 14px; }
.cat-section ul ul ul li > a { font-size: 11.5px; color: #94a3b8; }

/* 왼쪽 커스텀 카테고리 리스트 */
.cat-custom-list { list-style: none; padding: 0; margin: 0; }
.cat-custom-list li { margin-bottom: 2px; }
.cat-custom-list li > a {
  display: flex; align-items: center; gap: 9px;
  justify-content: flex-start;
  padding: 9px 8px; border-radius: 9px;
  font-size: 13px; color: #374151;
  text-decoration: none; transition: background .15s;
  text-align: left; width: 100%;
}
.cat-custom-list li > a:visited { color: #374151; }
.cat-custom-list li > a:hover { background: #f8faff; color: #4338ca; }
.cat-custom-list li > a.active { background: #eef2ff; color: #4338ca; font-weight: 700; }
.cat-section .cat-custom-list li > a::before { display: none !important; } /* 이중 점 방지 */
.cat-icon { flex-shrink: 0; stroke: #374151; } /* 왼쪽 페이지 메뉴 아이콘과 동일 색상(무지개 대신 단색) */
.cat-cnt { margin-left: auto; font-size: 10.5px; background: #f1f5f9; color: #94a3b8; padding: 2px 8px; border-radius: 10px; font-weight: 500; }

/* 서브 카테고리 필터 바 */
.sub-filter-bar {
  background: #f0f6ff; border-radius: 12px;
  padding: 0 12px; display: flex; align-items: center;
  gap: 4px; flex-wrap: wrap; min-height: 44px;
  box-shadow: 0 1px 4px rgba(37,99,235,0.08);
}
.sub-filter-tab {
  padding: 8px 14px; font-size: 12.5px;
  border-radius: 20px; color: #4b7be5;
  text-decoration: none; font-weight: 500;
  transition: background .15s, color .15s; white-space: nowrap;
}
.sub-filter-tab:hover { background: #e0e7ff; color: #4338ca; }
.sub-filter-tab.active { background: #6366f1; color: #fff; font-weight: 700; }

/* ============ CENTER FEED ============ */
.feed {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* JS가 채우기 전 잠깐 비어있는 동안 display:block 상태면 flex gap을 하나 더 먹어서
   좌측 사이드바보다 본문이 더 아래에서 시작하는 오정렬이 생김 — :empty일 때 완전히
   flex 흐름에서 빼서 해결(구 #pinnedNotice 공지카드와 동일한 이유, 작업지시서 #4로 교체) */
.feed #investor-trend-widget:empty { display: none; }

/* Post card */
.post-card {
  background: #fff;
  border-radius: 16px;
  padding: 22px 24px;
  box-shadow: 0 1px 8px rgba(0,0,0,0.07);
  transition: box-shadow .2s;
}
.post-card:hover { box-shadow: 0 4px 20px rgba(29,78,216,0.12); }
.home-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 8px 2px 0;
}
.home-section-heading div { display: flex; align-items: baseline; gap: 10px; }
.home-section-heading strong { font-size: 17px; color: #1a202c; }
.home-section-heading span { font-size: 12px; color: #8a94a3; }
.home-briefing-more {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e2e7e4;
  border-radius: 12px;
  background: #fff;
  color: #315b43;
  font-size: 13px;
}
.home-briefing-more:hover { background: #f3f6f4; }
html.dark .home-section-heading strong { color: #F5EFE0 !important; }
html.dark .home-section-heading span { color: rgba(245,239,224,.55) !important; }
html.dark .home-briefing-more { background: #1A1A1A !important; border-color: rgba(245,239,224,.16) !important; color: #F5EFE0 !important; }

/* ============ 홈 시장 상황판 ============ */
.home-dashboard {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.home-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
  gap: 16px;
  align-items: stretch;
}
.home-investor-slot,
.home-investor-slot #investor-trend-widget,
.home-investor-slot #investor-trend-widget .itw-card {
  min-width: 0;
  height: 100%;
}
.home-market-board {
  height: 298px;
  min-width: 0;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
}
.home-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.home-card-heading > div {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.home-card-heading strong {
  color: #171717;
  font-size: 15px;
  font-weight: 600;
}
.home-card-heading span {
  color: #A8ADB5;
  font-size: 10.5px;
  font-weight: 400;
  white-space: nowrap;
}
.hmb-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 11px 0 0;
}
.hmb-list > div {
  min-height: 25px;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid #f1f2f3;
}
.hmb-list dt {
  color: #7d828a;
  font-size: 11.5px;
  font-weight: 400;
}
.hmb-list dd {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #171717;
  font-size: 12px;
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
}
.home-positive { color: #d24f45 !important; }
.home-negative { color: #1261c4 !important; }
.home-neutral { color: #555 !important; }
.hmb-interpretation {
  margin-top: auto;
  padding: 10px 11px;
  border-radius: 10px;
  background: #f5f7f6;
  color: #555;
  font-size: 11.5px;
  line-height: 1.55;
}
.home-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
.home-rank-slot,
.home-rank-slot #sidebar-rank,
.home-rank-slot #sidebar-rank .sr-card {
  min-width: 0;
  height: 100%;
}
.home-card-grid #sidebar-rank .sr-card,
.home-mini-card {
  height: 370px;
}
.home-mini-card {
  min-width: 0;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
}
.home-card-state {
  color: #9ca3af;
  font-size: 12.5px;
  line-height: 1.6;
}
.home-pattern-list {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0;
  min-height: 0;
  margin-top: 13px;
}
.home-pattern-explainer {
  margin: 7px 0 0;
  color: #8a94a3;
  font-size: 10.5px;
  line-height: 1.5;
}
.home-pattern-row,
.home-pattern-new {
  min-height: 43px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid #f0f1f2;
  color: #555;
  font-size: 12.5px;
}
.home-pattern-row {
  appearance: none;
  width: 100%;
  padding: 0;
  border: 0;
  border-bottom: 1px solid #f0f1f2;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .16s ease;
}
.home-pattern-row:hover { background: #f7f8f8; }
.home-pattern-row:focus-visible {
  outline: 2px solid rgba(49, 91, 67, .24);
  outline-offset: -2px;
}
.home-pattern-row strong,
.home-pattern-new strong {
  color: #171717;
  font-size: 13px;
  font-weight: 600;
}
.home-pattern-row strong {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.home-pattern-chevron {
  color: #a8adb5;
  font-size: 17px;
  font-weight: 400;
  line-height: 1;
}
.home-pattern-new {
  margin-top: 10px;
  padding: 0 11px;
  border: 0;
  border-radius: 10px;
  background: #f5f7f6;
}
.home-pattern-new strong { color: #315b43; }
.home-pattern-preview {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}
.home-pattern-preview-back {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: transparent;
  color: #6f767e;
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
}
.home-pattern-preview-back:hover { color: #315b43; }
.home-pattern-preview-heading {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid #eceeed;
}
.home-pattern-preview-heading strong {
  color: #171717;
  font-size: 14px;
  font-weight: 600;
}
.home-pattern-preview-heading span {
  color: #a8adb5;
  font-size: 10px;
}
.home-pattern-stock-list {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: transparent transparent;
  scrollbar-width: none;
}
.home-pattern-stock-list::-webkit-scrollbar {
  width: 0;
  height: 0;
  background: transparent;
}
.home-pattern-stock-list::-webkit-scrollbar-thumb { background: transparent; }
.home-pattern-stock {
  flex: 0 0 auto;
  min-height: 47px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid #f0f1f2;
}
.home-pattern-stock > span {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.home-pattern-stock strong {
  overflow: hidden;
  color: #171717;
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-pattern-stock small { color: #a8adb5; font-size: 9.5px; }
.home-pattern-stock em {
  flex: 0 0 auto;
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
}
.home-pattern-empty {
  margin: 22px 0 0;
  color: #9ca3af;
  font-size: 12px;
  line-height: 1.6;
}
.home-schedule-list {
  display: flex;
  flex-direction: column;
  margin-top: 13px;
}
.home-schedule-row {
  min-height: 58px;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  border-bottom: 1px solid #f0f1f2;
}
.home-schedule-row time {
  color: #555;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.home-schedule-content {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
}
.home-schedule-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: #171717;
  font-size: 12.5px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-schedule-category {
  flex: 0 0 auto;
  max-width: 72px;
  overflow: hidden;
  padding: 3px 7px;
  border-radius: 999px;
  background: #f1f3f2;
  color: #7a8088;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-card-more {
  min-height: 34px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid #eceeed;
  color: #315b43;
  font-size: 12px;
  font-weight: 600;
  text-align: right;
}
.home-card-more[data-open-global-watchlist] {
  width: 100%;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
}

/* 최신 6건: 대표 1개 + 대표 아래 2개 + 오른쪽 3개 */
.home-briefing-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.home-briefing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 1fr);
  gap: 14px;
  align-items: start;
}
.home-briefing-featured-slot,
.home-briefing-small-stack,
.home-briefing-left-column,
.home-briefing-left-more { min-width: 0; }
.home-briefing-featured-slot .post-card {
  height: auto;
  min-height: 0;
  align-self: flex-start;
}
.home-briefing-left-column {
  display: grid;
  grid-template-rows: auto auto;
  align-content: start;
  gap: 14px;
}
.home-briefing-left-more {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.home-briefing-left-more .post-card { height: auto; }
.home-briefing-small-stack {
  display: grid;
  grid-template-rows: repeat(3, auto);
  align-content: start;
  gap: 14px;
}
.home-briefing-featured {
  padding: 24px 26px;
}
.home-briefing-featured .post-excerpt {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}
.home-briefing-featured .post-tags,
.home-briefing-featured .btn-share { display: none; }
.home-briefing-small {
  padding: 18px 20px;
}
.home-briefing-small .post-cat-badge,
.home-briefing-small .post-tags { display: none; }
.home-briefing-small .post-footer { display: flex; }
.home-briefing-small .btn-share { display: none; }
.home-briefing-small .post-header {
  justify-content: flex-end;
  margin-bottom: 6px;
}
.home-briefing-small .post-title {
  display: -webkit-box;
  overflow: hidden;
  margin-bottom: 7px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 15px;
}
.home-briefing-small .post-excerpt {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  font-size: 12.5px;
}
.home-briefing-left-small {
  padding: 16px 18px;
}
.home-briefing-left-small .post-title {
  font-size: 14px;
}
.home-briefing-left-small .post-excerpt {
  -webkit-line-clamp: 3;
  font-size: 12px;
}

html.dark .home-market-board,
html.dark .home-mini-card { background: #1A1A1A !important; }
html.dark .home-card-heading strong,
html.dark .home-pattern-row strong,
html.dark .home-pattern-preview-heading strong,
html.dark .home-pattern-stock strong,
html.dark .home-schedule-title { color: #F5EFE0 !important; }
html.dark .home-card-heading span,
html.dark .home-card-state,
html.dark .hmb-list dt { color: rgba(245, 239, 224, .5) !important; }
html.dark .hmb-list > div,
html.dark .home-pattern-row,
html.dark .home-pattern-preview-heading,
html.dark .home-pattern-stock,
html.dark .home-schedule-row,
html.dark .home-card-more { border-color: rgba(245, 239, 224, .12) !important; }
html.dark .hmb-list dd,
html.dark .home-pattern-row,
html.dark .home-schedule-row time { color: rgba(245, 239, 224, .82) !important; }
html.dark .hmb-interpretation,
html.dark .home-pattern-new,
html.dark .home-schedule-category {
  background: rgba(245, 239, 224, .08) !important;
  color: rgba(245, 239, 224, .7) !important;
}
html.dark .home-card-more,
html.dark .home-pattern-new strong { color: #F5EFE0 !important; }
html.dark .home-pattern-row:hover,
html.dark .home-pattern-row:focus-visible { background: rgba(245, 239, 224, .06) !important; }
html.dark .home-pattern-preview-back,
html.dark .home-pattern-preview-heading span,
html.dark .home-pattern-stock small { color: rgba(245, 239, 224, .5) !important; }

@media (max-width: 1100px) {
  .home-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-schedule-card { grid-column: 1 / -1; }
}
@media (max-width: 820px) {
  .home-overview-grid { grid-template-columns: 1fr; }
  .home-market-board,
  .home-investor-slot #investor-trend-widget .itw-card { height: 298px; }
  .home-briefing-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .home-dashboard { gap: 12px; }
  .home-overview-grid,
  .home-card-grid { grid-template-columns: 1fr; gap: 12px; }
  .home-schedule-card { grid-column: auto; }
  .home-card-grid #sidebar-rank .sr-card,
  .home-mini-card { height: auto; min-height: 340px; }
  .home-market-board { height: auto; min-height: 298px; padding: 16px; }
  .home-card-heading > div { flex-wrap: wrap; }
  .home-briefing-small-stack { grid-template-rows: none; grid-auto-rows: auto; }
  .home-briefing-featured,
  .home-briefing-small { padding: 17px 16px; }
}

/* ============ 홈 위젯 대시보드 v3 ============ */
body#tt-body-index .sidebar-right[hidden] { display: none !important; }

.home-dashboard-toolbar {
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
}
.home-dashboard-toolbar > span { color: #A8ADB5; font-size: 11px; }
.home-dashboard-settings { position: relative; }
.home-settings-button,
.home-reset-button,
.home-hidden-widgets button {
  border: 1px solid #dfe3e1;
  border-radius: 9px;
  background: #fff;
  color: #555;
  font-family: inherit;
  font-size: 11.5px;
  cursor: pointer;
}
.home-settings-button { min-height: 32px; padding: 0 12px; }
.home-settings-button:hover,
.home-hidden-widgets button:hover { background: #f3f6f4; color: #315b43; }
.home-settings-panel {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  z-index: 80;
  width: 230px;
  padding: 14px;
  border: 1px solid #e0e4e2;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .13);
}
.home-settings-panel[hidden] { display: none; }
.home-settings-panel > strong {
  display: block;
  margin-bottom: 9px;
  color: #171717;
  font-size: 12px;
}
.home-hidden-widgets {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #A8ADB5;
  font-size: 11.5px;
}
.home-hidden-widgets button { min-height: 32px; padding: 0 10px; text-align: left; }
.home-reset-button {
  width: 100%;
  min-height: 34px;
  margin-top: 12px;
  border-color: #e4d9d7;
  color: #a54b43;
}
.home-reset-button:hover { background: #fff5f4; }

.home-widget-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-flow: row;
  gap: 16px;
  align-items: stretch;
}
.home-widget {
  position: relative;
  min-width: 0;
  transition: transform .24s ease, box-shadow .2s ease, opacity .2s ease;
}
.home-widget[hidden] { display: none !important; }
.home-widget--wide { grid-column: span 8; height: 298px; }
.home-widget--summary { grid-column: span 4; height: 298px; }
.home-widget--compact { grid-column: span 3; height: 400px; }
.home-widget--full { grid-column: 1 / -1; }

.home-widget--wide #investor-trend-widget,
.home-widget--wide #investor-trend-widget .itw-card,
.home-widget--compact.home-rank-slot #sidebar-rank,
.home-widget--compact.home-rank-slot #sidebar-rank .sr-card {
  width: 100%;
  height: 100%;
  min-width: 0;
}
.home-widget--summary.home-market-board {
  width: 100%;
  height: 298px;
}
.home-widget--compact.home-mini-card {
  width: 100%;
  height: 400px;
  min-width: 0;
  padding: 18px 16px;
}
.home-widget--compact .home-card-heading { padding-right: 38px; }

.home-widget-actions {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 2px;
}
.home-widget-drag,
.home-widget-menu-button {
  width: 25px;
  height: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: rgba(255, 255, 255, .88);
  color: #9ca1a8;
  font-family: inherit;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity .18s ease, background .18s ease, color .18s ease;
}
.home-widget-drag { cursor: grab; letter-spacing: -4px; padding-right: 4px; }
.home-widget:hover .home-widget-drag,
.home-widget:hover .home-widget-menu-button,
.home-widget:focus-within .home-widget-drag,
.home-widget:focus-within .home-widget-menu-button { opacity: 1; }
.home-widget-drag:hover,
.home-widget-menu-button:hover { background: #f0f3f1; color: #315b43; }
.home-widget-drag:active { cursor: grabbing; }
.home-widget.is-dragging {
  z-index: 30;
  opacity: .62;
  box-shadow: 0 12px 30px rgba(49, 91, 67, .18);
}
.home-widget.is-touch-dragging { touch-action: none; }
.home-widget-menu {
  position: absolute;
  top: 30px;
  right: 0;
  width: 128px;
  overflow: hidden;
  padding: 4px;
  border: 1px solid #e0e4e2;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
}
.home-widget-menu[hidden] { display: none; }
.home-widget-menu button {
  width: 100%;
  min-height: 31px;
  padding: 0 9px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #555;
  font-family: inherit;
  font-size: 11.5px;
  text-align: left;
  cursor: pointer;
}
.home-widget-menu button:hover { background: #f3f6f4; color: #315b43; }

.home-my-list,
.home-disclosure-list {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  margin-top: 13px;
}
.home-my-list {
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: transparent transparent;
  scrollbar-width: none;
}
.home-my-list::-webkit-scrollbar {
  width: 0;
  height: 0;
  background: transparent;
}
.home-my-list::-webkit-scrollbar-thumb { background: transparent; }
.home-my-row,
.home-disclosure-row {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid #f0f1f2;
}
.home-my-row { flex: 0 0 auto; }
.home-my-name {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.home-my-quote {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  gap: 3px;
}
.home-my-row strong,
.home-disclosure-row strong {
  overflow: hidden;
  color: #171717;
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-my-quote small {
  color: #555;
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.home-my-quote em {
  flex: 0 0 auto;
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  white-space: nowrap;
}
.home-disclosure-row {
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.home-disclosure-row span {
  width: 100%;
  overflow: hidden;
  color: #777d85;
  font-size: 10.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 대표·중간 포스팅은 콘텐츠 높이를 따르고, 빈 공간이 생기지 않도록 위에서부터 쌓는다. */
.home-widget--full .home-briefing-grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(390px, 1fr);
  min-height: 0;
  align-items: start;
}
.home-widget--full .home-briefing-left-column {
  grid-template-rows: auto auto;
  align-content: start;
}
.home-widget--full .home-briefing-small-stack {
  grid-template-rows: repeat(3, auto);
  align-content: start;
}
.home-widget--full .home-briefing-small .post-excerpt {
  -webkit-line-clamp: 4;
  line-height: 1.65;
}

@media (min-width: 1101px) {
  .home-widget--compact.home-rank-slot #sidebar-rank .sr-card { padding: 14px 12px; }
  .home-widget--compact.home-rank-slot #sidebar-rank .sr-tabs { margin: 10px 0; }
  .home-widget--compact.home-rank-slot #sidebar-rank .sr-list { gap: 4px; }
  .home-widget--compact.home-rank-slot #sidebar-rank .sr-row {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    grid-template-rows: minmax(16px, auto) minmax(18px, auto);
    min-height: 47px;
    align-content: center;
    column-gap: 4px;
    row-gap: 3px;
  }
  .home-widget--compact.home-rank-slot #sidebar-rank .sr-icon { display: none; }
  .home-widget--compact.home-rank-slot #sidebar-rank .sr-rank {
    grid-row: 1 / span 2;
    align-self: center;
  }
  .home-widget--compact.home-rank-slot #sidebar-rank .sr-name,
  .home-widget--compact.home-rank-slot #sidebar-rank .sr-details { grid-column: 2; }
  .home-widget--compact.home-rank-slot #sidebar-rank .sr-name {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .home-widget--compact.home-rank-slot #sidebar-rank .sr-details {
    width: 100%;
    justify-content: space-between;
    overflow: visible;
  }
  .home-widget--compact.home-rank-slot #sidebar-rank .sr-quote {
    justify-content: space-between;
    gap: 4px;
  }
  .home-widget--compact.home-rank-slot #sidebar-rank .sr-amount {
    margin-left: auto;
    min-width: 0;
    color: #8a9098;
    font-size: 10px;
    text-align: left;
  }
  .home-widget--compact.home-schedule-card .home-schedule-row {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 6px;
  }
  .home-widget--compact.home-schedule-card .home-schedule-content { gap: 5px; }
}

html.dark .home-settings-button,
html.dark .home-reset-button,
html.dark .home-hidden-widgets button,
html.dark .home-settings-panel,
html.dark .home-widget-menu,
html.dark .home-widget-drag,
html.dark .home-widget-menu-button {
  background: #1A1A1A !important;
  border-color: rgba(245, 239, 224, .16) !important;
  color: rgba(245, 239, 224, .72) !important;
}
html.dark .home-settings-panel > strong,
html.dark .home-my-row strong,
html.dark .home-disclosure-row strong { color: #F5EFE0 !important; }
html.dark .home-my-row,
html.dark .home-disclosure-row { border-color: rgba(245, 239, 224, .12) !important; }
html.dark .home-my-row small,
html.dark .home-disclosure-row span { color: rgba(245, 239, 224, .5) !important; }
html.dark .home-widget-menu button { color: rgba(245, 239, 224, .72) !important; }
html.dark .home-widget-menu button:hover,
html.dark .home-hidden-widgets button:hover { background: rgba(245, 239, 224, .08) !important; }

@media (max-width: 1100px) {
  .home-widget-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .home-widget--wide { grid-column: span 4; }
  .home-widget--summary { grid-column: span 2; }
  .home-widget--compact { grid-column: span 3; }
  .home-widget--full { grid-column: 1 / -1; }
  .home-widget--full .home-briefing-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(330px, 1fr);
  }
}
@media (max-width: 820px) {
  .home-widget--wide,
  .home-widget--summary,
  .home-widget--full { grid-column: 1 / -1; }
  .home-widget--compact { grid-column: span 3; }
  .home-widget--full .home-briefing-grid {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .home-widget--full .home-briefing-featured-slot .post-card { height: auto; min-height: 0; }
  .home-widget--full .home-briefing-left-column { grid-template-rows: auto auto; }
  .home-widget--full .home-briefing-small-stack { grid-template-rows: repeat(3, auto); }
}
@media (max-width: 640px) {
  .home-dashboard-toolbar { align-items: flex-start; }
  .home-dashboard-toolbar > span { display: none; }
  .home-widget-grid { grid-template-columns: 1fr; gap: 12px; }
  .home-widget--wide,
  .home-widget--summary,
  .home-widget--compact,
  .home-widget--full { grid-column: 1; }
  .home-widget--wide,
  .home-widget--summary { height: 298px; }
  .home-widget--compact,
  .home-widget--compact.home-mini-card { height: 370px; min-height: 0; }
  .home-widget-drag,
  .home-widget-menu-button { opacity: .68; }
  .home-widget-drag { touch-action: none; }
  .home-settings-panel { position: fixed; top: 112px; right: 12px; }
  .home-widget--full .home-briefing-small-stack {
    grid-template-rows: repeat(3, minmax(0, auto));
  }
  .home-widget--full .home-briefing-left-more {
    grid-template-columns: 1fr;
  }
}

/* Notice card — 블루~인디고 그라데이션 보더 + 은은한 틴트 배경 */
.notice-card {
  border: 1px solid transparent;
  background:
    linear-gradient(160deg, #fdfeff 0%, #f7f9ff 100%) padding-box,
    linear-gradient(135deg, #60a5fa 0%, #818cf8 55%, #a78bfa 100%) border-box;
  box-shadow: 0 4px 18px rgba(29,78,216,0.08);
  transition: box-shadow .2s, transform .2s;
}
.notice-card:hover {
  box-shadow: 0 8px 28px rgba(29,78,216,0.15);
  transform: translateY(-2px);
}

.post-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 13px;
}
/* 2026-08-05: 목록 카드는 카테고리 배지를 뺐다(skin.html 주석 참고) - .post-header에
   날짜 하나만 남아 space-between이 왼쪽으로 붙여버리는 걸 막고 원래처럼 오른쪽에 그대로
   둔다. 공지 카드(.notice-card)는 배지를 그대로 유지하므로 대상에서 뺀다. */
.post-card:not(.notice-card) > .post-header {
  justify-content: flex-end;
}
.post-cat-badge {
  font-size: 10.5px;
  font-weight: 700;
  padding: 4px 13px;
  border-radius: 20px;
  letter-spacing: 0.2px;
  background: #e0e7ff;
  color: #4338ca;
  text-decoration: none;
  transition: background .15s;
}
.post-cat-badge:hover { background: #c7d2fe; }

/* 카테고리별 색상 — 실제 카테고리명 기준 */

/* Insight Day (파랑) */
.post-card[data-cat="Insight Day"] .post-cat-badge,
.post-card[data-cat="Economic"] .post-cat-badge,
.post-card[data-cat="Tech &amp; Security"] .post-cat-badge { background: #e0e7ff; color: #4338ca; }

/* Insight Analysis (초록) */
.post-card[data-cat="Insight Analysis"] .post-cat-badge { background: #dcfce7; color: #15803d; }

/* Personal Notes (앰버) */
.post-card[data-cat="Personal Notes"] .post-cat-badge { background: #fef3c7; color: #92400e; }

/* Starlight Wisdom Alcove / Insight Archive + 하위 (보라) */
.post-card[data-cat="Starlight Wisdom Alcove"] .post-cat-badge,
.post-card[data-cat="Insight Archive"] .post-cat-badge,
.post-card[data-cat="The 맛있는 여행"] .post-cat-badge,
.post-card[data-cat="일상생활"] .post-cat-badge,
.post-card[data-cat="일기장 (비공개)"] .post-cat-badge,
.post-card[data-cat="공부 ?"] .post-cat-badge,
.post-card[data-cat="Knowledge, research"] .post-cat-badge { background: #f3e8ff; color: #6d28d9; }
.cat-notice {
  background: linear-gradient(135deg, #818cf8, #6366f1) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(99,102,241,0.25);
}

.post-date { font-size: 11.5px; color: #94a3b8; letter-spacing: -0.2px; }
.post-title {
  font-size: 17px; font-weight: 700;
  color: #0d1b40;
  line-height: 1.45;
  margin-bottom: 9px;
  letter-spacing: -0.4px;
  cursor: pointer;
  text-wrap: pretty;
}
.post-card a:hover .post-title { color: #6366f1; }
.post-excerpt {
  font-size: 13.5px; color: #64748b;
  line-height: 1.75;
  margin-bottom: 15px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-wrap: pretty;
}

/* Tags from [##_tag_label_rep_##] */
.post-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 15px;
}
.post-tags a {
  font-size: 11px;
  background: #eef2ff; color: #4361a8;
  padding: 4px 12px;
  border-radius: 20px;
  font-weight: 500;
  text-decoration: none;
  transition: background .15s;
  display: inline-block;
}
.post-tags a:hover { background: #e0e7ff; color: #4338ca; }

.post-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid #f1f5f9;
}
.post-footer-left { display: flex; align-items: center; gap: 14px; }
.post-meta { display: flex; align-items: center; gap: 5px; color: #94a3b8; font-size: 12px; }
.post-footer-right { display: flex; align-items: center; gap: 8px; }
/* 2026-08: 진한 보라 알약 + 그림자가 카드 안에서 너무 무겁다는 피드백으로, .post-tags
   a와 같은 옅은 인디고 톤(배경 #eef2ff/글자 #4338ca)으로 톤다운 - "더 보기"가 CTA처럼
   튀지 않고 카드 안 보조 액션 정도의 무게감이 되도록. */
.btn-read {
  font-size: 12.5px; color: #4338ca;
  background: #eef2ff;
  border: none;
  padding: 7px 18px;
  border-radius: 20px;
  cursor: pointer;
  font-weight: 700;
  letter-spacing: -0.2px;
  transition: background .15s, color .15s;
  text-decoration: none;
  display: inline-block;
}
.btn-read:hover { background: #e0e7ff; color: #312e81; }
.btn-read.open { background: #f1f5f9; color: #374151; }

/* 공유 버튼 */
.btn-share {
  font-size: 12.5px; color: #64748b;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  padding: 7px 14px;
  border-radius: 20px;
  cursor: pointer;
  transition: background .15s;
  font-family: inherit;
}
.btn-share:hover { background: #e2e8f0; }

/* ============ 카테고리 글목록: 블록 단위 무작위 배치(2026-08-05) ============
   마켓 브리핑 등 카테고리 글목록을 앞에서부터 순서대로(최신순, 재정렬 없음) 소비하면서
   [대표 1개 단독 / 히어로(대표1+제목목록 최대4) / 작은 카드 3개 그리드 / 가로 2단] 네 가지
   블록 타입 중 하나를 무작위로 골라 그만큼씩 묶는다 - 실제 그룹핑·클래스 부여는
   js/skin-main.js의 buildCategoryFeedBlocks가 담당. */
.post-card.feed-featured {
  padding: 26px 28px;
}
.post-card.feed-featured .post-title { font-size: 20px; }
.post-card.feed-featured .post-excerpt {
  font-size: 14.5px;
  -webkit-line-clamp: 4;
}

/* 히어로 블록 - 왼쪽 대표 글(feed-featured 재사용) + 오른쪽 제목 목록(최대 4).
   "제목만 있는 목록이 혼자 떠 있으면 어색하다"는 지적으로, 제목 목록은 항상 대표 글
   옆에 붙어서만 나온다(js/skin-main.js buildCategoryFeedBlocks 참고). */
.feed-block-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr);
  gap: 14px;
  align-items: start;
}
.feed-hero-featured-slot { min-width: 0; }
/* 제목 목록 패널 - 카드 하나하나의 테두리/그림자 대신 목록 전체를 감싸는 패널
   하나(.feed-block-headline)에 얇은 구분선으로 나눈 행(.feed-headline-item)을 넣는다. */
.feed-block-headline {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 1px 8px rgba(0,0,0,0.07);
  padding: 4px 18px;
}
/* 2026-08-05: 날짜가 제목 위에 혼자 한 줄을 차지해 밀도가 떨어진다는 지적으로,
   순서를 뒤집어(order) 제목 다음에 작게 붙는 한 줄로 바꿨다 - 마크업(skin.html)은
   그대로 두고 flex order만으로 처리해서 다른 블록(기본 카드 등)에는 영향 없다. */
.post-card.feed-headline-item {
  display: flex;
  flex-direction: column;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: 10px 0;
  border-bottom: 1px solid #f1f5f9;
}
.post-card.feed-headline-item:last-child { border-bottom: none; }
.post-card.feed-headline-item > a { order: 1; }
.post-card.feed-headline-item .post-header {
  order: 2;
  justify-content: flex-start;
  margin: 3px 0 0;
}
.post-card.feed-headline-item .post-date { font-size: 10.5px; }
.post-card.feed-headline-item .post-title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 14px;
  margin-bottom: 0;
}
.post-card.feed-headline-item .post-excerpt,
.post-card.feed-headline-item .post-tags,
.post-card.feed-headline-item .post-footer { display: none; }

/* 작은 카드형 3개 그리드 - 카드 자체 테두리·그림자는 유지한 채(각자 독립 카드) 3단으로 배치. */
.feed-block-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.post-card.feed-cards-item { padding: 16px 16px; }
.post-card.feed-cards-item .post-title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 14.5px;
}
.post-card.feed-cards-item .post-excerpt {
  -webkit-line-clamp: 2;
  font-size: 12px;
}
.post-card.feed-cards-item .post-tags,
.post-card.feed-cards-item .btn-share { display: none; }

/* 가로로 나란한 2개 - cards보다 넓어서 발췌문을 조금 더 보여준다. */
.feed-block-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.post-card.feed-duo-item { padding: 18px 20px; }
.post-card.feed-duo-item .post-title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 15px;
}
.post-card.feed-duo-item .post-excerpt {
  -webkit-line-clamp: 2;
  font-size: 12.5px;
}
.post-card.feed-duo-item .post-tags,
.post-card.feed-duo-item .btn-share { display: none; }

html.dark .feed-block-headline {
  background: #1A1A1A !important;
  border: 1px solid rgba(245, 239, 224, 0.2) !important;
}
html.dark .post-card.feed-headline-item { border-bottom-color: rgba(245, 239, 224, 0.12) !important; }

/* ============ 퍼머링크 단일 글 ============ */
.post-single {
  padding: 28px 32px;
}
.post-single-header {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f1f5f9;
}
.post-single-title {
  font-size: 26px; font-weight: 800;
  color: #0d1b40;
  line-height: 1.4;
  letter-spacing: -0.6px;
  margin: 12px 0 10px;
  text-wrap: pretty;
}
.post-single-meta {
  display: flex; align-items: center; gap: 14px;
  margin-top: 10px;
}
.post-single-body {
  font-size: 15px;
  line-height: 1.9;
  color: #374151;
  margin-bottom: 24px;
}
.post-single-body img { max-width: 100%; height: auto; border-radius: 8px; }
/* 표는 폭이 고정된 채로 넘치면 좁은 화면에서 레이아웃이 깨진다.
   table 자체에 overflow-x:auto를 주면 auto 테이블 레이아웃이 칸 너비를 억지로 욱여넣어
   찌그러지길래(스킨 스크립트가 표를 이 div로 감쌈), 감싼 div 쪽에서 스크롤되게 처리. */
.table-scroll-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 16px;
}
.table-scroll-wrap table {
  margin-bottom: 0;
}
.post-single-body h2 { font-size: 20px; margin: 28px 0 12px; color: #0d1b40; }
.post-single-body h3 { font-size: 17px; margin: 22px 0 10px; color: #4338ca; }
/* 전역 리셋(* padding:0)이 리스트 들여쓰기를 없애 글머리표가 본문 밖으로 튀는 것 복원 */
.post-single-body ul, .post-single-body ol,
.post-expand-body ul, .post-expand-body ol {
  padding-left: 1.5em;
  margin: 10px 0;
}
.post-single-body li, .post-expand-body li { margin: 4px 0; }

/* ============ 티스토리 링크카드 — Facebook 스타일 ============ */
/* 본문 + 더읽기 확장 모두 적용 */
.post-single-body .link-preview,
.post-expand-body   .link-preview,
.post-single-body figure.link-preview,
.post-expand-body   figure.link-preview {
  margin: 16px 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  background: #fff;
  box-shadow: 0 1px 6px rgba(0,0,0,0.07);
  display: block;
}
/* 링크카드 전체 클릭 영역 */
.post-single-body .link-preview a,
.post-expand-body   .link-preview a {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
/* OG 이미지 */
.post-single-body .link-preview .og-image,
.post-expand-body   .link-preview .og-image {
  width: 100%;
  max-height: 280px;
  overflow: hidden;
  background: #f1f5f9;
}
.post-single-body .link-preview .og-image img,
.post-expand-body   .link-preview .og-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  display: block;
  margin: 0;
}
/* OG 텍스트 영역 */
.post-single-body .link-preview .og-text,
.post-expand-body   .link-preview .og-text {
  padding: 12px 16px 14px;
  background: #f8faff;
  border-top: 1px solid #e8eef8;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* 제목 */
.post-single-body .link-preview .og-title,
.post-expand-body   .link-preview .og-title {
  font-size: 14px;
  font-weight: 700;
  color: #0d1b40;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* 설명 */
.post-single-body .link-preview .og-desc,
.post-expand-body   .link-preview .og-desc {
  font-size: 12.5px;
  color: #64748b;
  line-height: 1.6;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* 도메인 */
.post-single-body .link-preview .og-host,
.post-expand-body   .link-preview .og-host {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
/* 호버 효과 */
.post-single-body .link-preview:hover,
.post-expand-body   .link-preview:hover {
  box-shadow: 0 3px 16px rgba(29,78,216,0.12);
  border-color: #c7d2fe;
}
/* 티스토리 구버전 클래스명 대응 */
.post-single-body .tt_og_container,
.post-expand-body   .tt_og_container {
  margin: 16px 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  background: #f8faff;
  display: block;
}
.post-single-body .tt_og_container img,
.post-expand-body   .tt_og_container img {
  width: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
  border-radius: 0;
}
.post-single-body p { margin-bottom: 14px; }
.post-single-body blockquote {
  border-left: 3px solid #e0e7ff;
  padding: 10px 16px;
  margin: 16px 0;
  background: #f8faff;
  border-radius: 0 8px 8px 0;
  color: #64748b;
}
.post-single-tags { margin-bottom: 20px; }

/* 관련 글 */
.related-posts {
  margin: 20px 0;
  padding: 16px;
  background: #f8faff;
  border-radius: 12px;
}
.related-title {
  font-size: 12px; font-weight: 700; color: #94a3b8;
  margin-bottom: 12px; letter-spacing: 0.5px;
  text-transform: uppercase;
}
.related-list { display: flex; flex-direction: column; gap: 8px; }
.related-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #e2e8f0;
  text-decoration: none;
}
.related-item:last-child { border-bottom: none; }
.related-thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.related-item-title { font-size: 13px; color: #374151; flex: 1; line-height: 1.4; }
.related-item-title:hover { color: #4338ca; }
.related-item-date { font-size: 11px; color: #94a3b8; flex-shrink: 0; }

/* ============ 댓글 섹션 (티스토리 s_t3 — s_rp 기반) ============ */
.post-comments {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid #f1f5f9;
}

/* 댓글 위 블로그 정보 카드 숨김 */
.tt_box_namecard,
[data-tistory-react-app="Namecard"],
[data-tistory-react-app="BlogInfo"] { display: none !important; }

/* ── Tistory React 댓글 시스템 전역 스타일 ── */

/* 댓글 수 */
.tt-box-total {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 18px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  font-family: 'MaruBuri', Georgia, serif !important;
}
.tt-box-total .tt_txt_g {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #0d1b40 !important;
}
.tt-box-total .tt_num_g {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #6366f1 !important;
}

/* 댓글 목록 */
.tt-area-reply { display: block !important; }
.tt-list-reply {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

/* 개별 댓글 카드 */
.tt-item-reply {
  background: #f8faff !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  border: none !important;
  box-shadow: none !important;
}

/* 댓글 내부 레이아웃 */
.tt-wrap-cmt {
  display: flex !important;
  gap: 12px !important;
  align-items: flex-start !important;
}

/* 아바타 */
.tt-box-thumb { flex-shrink: 0 !important; }
.tt-thumbnail {
  display: block !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: 50% !important;
  background-size: cover !important;
  background-position: center !important;
  border: 2px solid #fff !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12) !important;
}

/* 댓글 내용 */
.tt-box-content {
  flex: 1 !important;
  min-width: 0 !important;
}
.tt-box-meta {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 5px !important;
  flex-wrap: wrap !important;
}
.tt-link-user {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #4a6494 !important;
  text-decoration: none !important;
  font-family: 'MaruBuri', Georgia, serif !important;
}
.tt-wrap-info { margin-top: 6px !important; display: flex !important; align-items: center !important; gap: 10px !important; }
.tt_date { font-size: 11px !important; color: #b0bac5 !important; }
.tt-wrap-desc .tt_desc {
  font-size: 13.5px !important;
  color: #374151 !important;
  line-height: 1.78 !important;
  font-family: 'MaruBuri', Georgia, serif !important;
}

/* 답글 버튼 */
.tt-link-comment {
  font-size: 12px !important;
  color: #6b7280 !important;
  text-decoration: none !important;
}
.tt-link-comment:hover { color: #6366f1 !important; }

/* 대댓글 */
.tt-item-reply.rp_reply { margin-left: 28px !important; background: #f0f4fc !important; }

/* 핀고정 안내 */
.tt_cmt_info { font-size: 11.5px !important; color: #94a3b8 !important; margin-bottom: 8px !important; }

/* ── 댓글 작성폼 ── */
.tt-area-write {
  background: #f0f5ff !important;
  border-radius: 16px !important;
  padding: 16px 18px 14px !important;
  display: flex !important;
  gap: 12px !important;
  align-items: flex-start !important;
  border: none !important;
  margin-top: 16px !important;
  box-shadow: none !important;
}
.tt_wrap_write {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

/* 비로그인 이름/비밀번호 */
.tt-box-account { display: flex !important; gap: 8px !important; margin-bottom: 4px !important; }
.tt-box-account input {
  flex: 1 !important;
  background: #fff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 7px 12px !important;
  font-size: 13px !important;
  font-family: 'MaruBuri', Georgia, serif !important;
  outline: none !important;
}

/* 입력 영역 — 테두리 완전 제거 */
.tt-box-textarea,
.tt-box-textarea *,
.tt-inner-g,
.tt-inner-g * { background: transparent !important; border: none !important; outline: none !important; box-shadow: none !important; }
.tt-inner-g { display: flex !important; flex-direction: column !important; gap: 4px !important; }
.tt_txt_user { font-size: 12px !important; font-weight: 600 !important; color: #4a6494 !important; }
.tt-cmt {
  min-height: 60px !important;
  font-size: 13px !important;
  color: #4a5a78 !important;
  line-height: 1.7 !important;
  outline: none !important;
  font-family: 'MaruBuri', Georgia, serif !important;
}

/* 하단 버튼 행 */
.tt-box-write {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  margin-top: 4px !important;
}
.tt-xe-label { display: flex !important; align-items: center !important; gap: 5px !important; cursor: pointer !important; margin-right: auto !important; }
.tt-xe-label-text { font-size: 12px !important; color: #64748b !important; font-family: 'MaruBuri', Georgia, serif !important; }

/* 등록 버튼 */
.tt-btn_register {
  height: 36px !important;
  padding: 0 22px !important;
  border-radius: 999px !important;
  border: none !important;
  background: linear-gradient(135deg, #7aabdf 0%, #5b7ab0 100%) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  font-family: 'MaruBuri', Georgia, serif !important;
  cursor: pointer !important;
  box-shadow: 0 2px 10px rgba(91,122,176,0.30) !important;
  transition: opacity .15s !important;
  letter-spacing: -0.2px !important;
}
.tt-btn_register:hover { opacity: 0.85 !important; }
.tt-btn_register:disabled { opacity: 0.5 !important; cursor: default !important; }

/* ── 새 Tistory React 댓글 시스템 (data-tistory-react-app="Comment") ── */

/* 최상위 컨테이너 */
.post-comments .tt-comment-cont,
.post-comments [data-tistory-react-app="Comment"] > div {
  display: block !important;
}

/* 댓글 수 */
.post-comments .tt-box-total {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 18px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid #f1f5f9 !important;
}
.post-comments .tt-box-total .tt_txt_g {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #0d1b40 !important;
}
.post-comments .tt-box-total .tt_num_g {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #6366f1 !important;
}

/* 댓글 목록 영역 */
.post-comments .tt-area-reply { display: block !important; }
.post-comments .tt-list-reply {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

/* 개별 댓글 */
.post-comments .tt-item-reply {
  background: #f8faff !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  border: none !important;
}
.post-comments .tt-item-reply .tt-wrap-cmt {
  display: flex !important;
  gap: 12px !important;
  align-items: flex-start !important;
}

/* 핀고정 댓글 */
.post-comments .tt-item-reply .tt_cmt_info {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 8px !important;
  font-size: 11.5px !important;
  color: #94a3b8 !important;
}

/* 아바타 */
.post-comments .tt-box-thumb {
  flex-shrink: 0 !important;
}
.post-comments .tt-thumbnail {
  display: block !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background-size: cover !important;
  background-position: center !important;
  border: 2px solid #fff !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important;
}

/* 댓글 내용 */
.post-comments .tt-box-content {
  flex: 1 !important;
  min-width: 0 !important;
}
.post-comments .tt-box-meta {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 5px !important;
  flex-wrap: wrap !important;
}
.post-comments .tt-link-user {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #4a6494 !important;
  text-decoration: none !important;
}
.post-comments .tt_date {
  font-size: 11px !important;
  color: #b0bac5 !important;
}
.post-comments .tt_desc {
  font-size: 13.5px !important;
  color: #374151 !important;
  line-height: 1.75 !important;
}

/* 답글/더보기 영역 */
.post-comments .tt-wrap-info {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 6px !important;
}
.post-comments .tt-link-comment {
  font-size: 12px !important;
  color: #6b7280 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  text-decoration: none !important;
}
.post-comments .tt-link-comment:hover { color: #6366f1 !important; }

/* 더보기 버튼 */
.post-comments .tt-button-modify {
  font-size: 11px !important;
  color: #b0bac5 !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  padding: 2px 6px !important;
}

/* 대댓글 */
.post-comments .tt-item-reply + .tt-item-reply.rp_sub {
  margin-left: 28px !important;
  background: #f0f4fc !important;
}

/* ── 댓글 작성폼 ── */
.post-comments .tt-area-write {
  background: #f0f5ff !important;
  border-radius: 16px !important;
  padding: 16px 18px 14px !important;
  display: flex !important;
  gap: 12px !important;
  align-items: flex-start !important;
  margin-top: 16px !important;
}
.post-comments .tt_wrap_write {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

/* 이름/비밀번호 (비로그인) */
.post-comments .tt-box-account {
  display: flex !important;
  gap: 8px !important;
  margin-bottom: 4px !important;
}
.post-comments .tt-box-account input {
  flex: 1 !important;
  background: #fff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 7px 12px !important;
  font-size: 13px !important;
  color: #374151 !important;
  outline: none !important;
  font-family: 'MaruBuri', Georgia, serif !important;
}
.post-comments .tt-box-account input:focus { border-color: #4b7be5 !important; }

/* textarea (contenteditable) */
.post-comments .tt-box-textarea {
  background: transparent !important;
  border: none !important;
}
.post-comments .tt-inner-g { display: flex !important; flex-direction: column !important; gap: 4px !important; }
.post-comments .tt_txt_user {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #4a6494 !important;
}
.post-comments .tt-cmt {
  min-height: 60px !important;
  font-size: 13px !important;
  color: #4a5a78 !important;
  line-height: 1.7 !important;
  outline: none !important;
  font-family: 'MaruBuri', Georgia, serif !important;
}
.post-comments .tt-cmt:empty::before {
  content: attr(placeholder) !important;
  color: #b0bac5 !important;
  pointer-events: none !important;
}

/* 하단 버튼 행 */
.post-comments .tt-box-write {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  margin-top: 4px !important;
}

/* 비밀글 체크박스 */
.post-comments .tt-xe-label {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  cursor: pointer !important;
  margin-right: auto !important;
}
.post-comments .tt-xe-label-text {
  font-size: 12px !important;
  color: #64748b !important;
}

/* 등록 버튼 */
.post-comments .tt-btn_register {
  height: 34px !important;
  padding: 0 20px !important;
  border-radius: 999px !important;
  border: none !important;
  background: linear-gradient(135deg, #7aabdf 0%, #5b7ab0 100%) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  font-family: 'MaruBuri', Georgia, serif !important;
  cursor: pointer !important;
  box-shadow: 0 2px 10px rgba(91,122,176,0.30) !important;
  transition: opacity .15s !important;
}
.post-comments .tt-btn_register:hover { opacity: 0.85 !important; }
.post-comments .tt-btn_register:disabled { opacity: 0.5 !important; cursor: default !important; }

/* 최상위 래퍼 강제 표시 */
.post-comments #cmt_wrap,
.post-comments #replyList,
.post-comments .tt_body_comment {
  display: block !important;
  visibility: visible !important;
}

/* 댓글 수 타이틀 */
.post-comments .tit_cmt,
.post-comments .cnt_cmt,
.post-comments .tit_rp {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #0d1b40;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f1f5f9;
}

/* 댓글 목록 */
.post-comments .list_reply,
.post-comments .list_comment,
.post-comments ul.tt_comment {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

/* 개별 댓글 */
.post-comments .item_reply,
.post-comments .item_comment {
  background: #f8faff;
  border-radius: 14px;
  padding: 14px 16px;
  display: flex !important;
  gap: 12px;
  align-items: flex-start;
  border: none;
}

/* 대댓글 들여쓰기 */
.post-comments .item_reply.reply,
.post-comments .item_comment.reply {
  margin-left: 28px;
  background: #f0f4fc;
}

/* 아바타 */
.post-comments .thumb_g,
.post-comments .link_writer img,
.post-comments .ico_writer img {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  border: 2px solid #fff !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important;
  display: block !important;
}

/* 아바타 래퍼 링크 */
.post-comments .link_writer {
  flex-shrink: 0 !important;
  display: block !important;
}

/* 댓글 내용 영역 */
.post-comments .desc_reply,
.post-comments .wrap_comment_inner {
  flex: 1;
  min-width: 0;
}

/* 작성자 정보 행 */
.post-comments .info_reply,
.post-comments .head_comment {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 5px !important;
  flex-wrap: wrap !important;
}

.post-comments .tit_author,
.post-comments .name_author {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #4a6494 !important;
}

.post-comments .txt_date,
.post-comments .date_comment {
  font-size: 11px !important;
  color: #b0bac5 !important;
  margin-left: auto !important;
}

/* 댓글 텍스트 */
.post-comments .txt_reply,
.post-comments .txt_comment {
  font-size: 13.5px !important;
  color: #374151 !important;
  line-height: 1.75 !important;
}

/* 삭제/수정 버튼 */
.post-comments .btn_del,
.post-comments .btn_modify {
  font-size: 11px !important;
  color: #b0bac5 !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  padding: 2px 6px !important;
  border-radius: 8px !important;
  font-family: inherit !important;
}
.post-comments .btn_del:hover { color: #e05a5a !important; }

/* ── 댓글 작성 폼 (모든 가능한 클래스) ── */
.post-comments .wrap_write_cmt,
.post-comments .area_write,
.post-comments .wrap_write,
.post-comments .box_write {
  background: #f0f5ff !important;
  border-radius: 16px !important;
  padding: 16px 18px 14px !important;
  display: flex !important;
  gap: 12px !important;
  align-items: flex-start !important;
  border: none !important;
  margin-top: 16px !important;
}

/* 입력 래퍼 */
.post-comments .inner_write,
.post-comments .wrap_textarea {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  min-width: 0 !important;
}

/* textarea */
.post-comments textarea {
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  resize: none !important;
  font-size: 13px !important;
  color: #4a5a78 !important;
  font-family: 'MaruBuri', Georgia, serif !important;
  line-height: 1.7 !important;
  outline: none !important;
  box-shadow: none !important;
  min-height: 60px !important;
  padding: 0 !important;
}
.post-comments textarea:focus {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}
.post-comments textarea::placeholder { color: #b0bac5 !important; }

/* 버튼 행 */
.post-comments .wrap_btn,
.post-comments .foot_write,
.post-comments .box_btn {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  margin-top: 4px !important;
}

/* 비밀 댓글 */
.post-comments .label_secret,
.post-comments .wrap_secret label {
  font-size: 12px !important;
  color: #64748b !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  cursor: pointer !important;
  margin-right: auto !important;
}

/* 등록 버튼 */
.post-comments .btn_submit,
.post-comments .btn_reg,
.post-comments .btn_cmt,
.post-comments .btn_write,
.post-comments button[type="submit"],
.post-comments input[type="submit"] {
  height: 34px !important;
  padding: 0 20px !important;
  border-radius: 999px !important;
  border: none !important;
  background: linear-gradient(135deg, #7aabdf 0%, #5b7ab0 100%) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  font-family: 'MaruBuri', Georgia, serif !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  box-shadow: 0 2px 10px rgba(91,122,176,0.30) !important;
  transition: opacity .15s !important;
}
.post-comments .btn_submit:hover,
.post-comments button[type="submit"]:hover { opacity: 0.85 !important; }

/* ============ 방명록 ============ */
.guest-section { padding: 24px; }
.guest-title {
  font-size: 15px; font-weight: 700; color: #0d1b40;
  margin-bottom: 6px;
  display: flex; align-items: center; gap: 8px;
}

/* ════ 핵심: textarea를 직접 포함하는 박스 → 흰 직사각형 제거 ════ */
/* 클래스명 불문, textarea의 부모 div에 둥근 스타일 적용 */
.guest-section div:has(> textarea) {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
}

/* textarea + 버튼을 모두 포함하는 상위 래퍼 (username + textarea + button 묶음) */
.guest-section div:has(textarea):has(button),
.guest-section div:has(textarea):has(input[type="submit"]) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* 전체 작성 행 (아바타 + 입력 박스를 함께 감싸는 div) */
.guest-section div:has(img):has(textarea),
.guest-section div:has(a):has(textarea) {
  background: #f0f5ff !important;
  border: none !important;
  border-radius: 20px !important;
  padding: 16px 18px !important;
  box-shadow: none !important;
  display: flex !important;
  gap: 12px !important;
  align-items: flex-start !important;
}

/* 방명록 수 (티스토리 여러 가능 클래스 포함) */
.guest-section .cnt_reply,
.guest-section .desc_guest,
.guest-section .num_guest,
.guest-section p.cnt_reply {
  font-size: 13px !important; color: #8a9ab5 !important;
  margin-bottom: 20px !important; font-weight: 500 !important;
  display: block;
}

/* ── 방명록 목록 ── */
.guest-section .list_reply,
.guest-section .list_guest,
.guest-section ul.list_comment {
  list-style: none !important; padding: 0 !important;
  margin: 0 0 16px !important;
  display: flex !important; flex-direction: column !important; gap: 10px !important;
}

/* 방명록 개별 항목 */
.guest-section .item_reply,
.guest-section .item_guest,
.guest-section .list_reply > li,
.guest-section .list_guest > li {
  background: #f0f5ff !important;
  border-radius: 20px !important;
  padding: 14px 16px !important;
  display: flex !important; gap: 12px !important; align-items: flex-start !important;
  border: none !important;
  transition: background .15s;
}
.guest-section .item_reply:hover,
.guest-section .item_guest:hover { background: #e8efff !important; }

/* 아바타 이미지 (모든 가능한 클래스) */
.guest-section .thumb_g,
.guest-section .ico_writer img,
.guest-section .link_thumb img,
.guest-section .wrap_guest img,
.guest-section .link_writer img,
.guest-section .profile_wrap img {
  width: 38px !important; height: 38px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid #fff !important;
  box-shadow: 0 2px 8px rgba(100,130,200,0.15) !important;
  flex-shrink: 0 !important;
  display: block !important;
}

/* 내용 영역 */
.guest-section .desc_reply,
.guest-section .desc_guest,
.guest-section .wrap_comment { flex: 1 !important; min-width: 0 !important; }

.guest-section .info_reply,
.guest-section .info_guest,
.guest-section .head_comment {
  display: flex !important; align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 5px !important; gap: 8px !important; flex-wrap: wrap !important;
}
.guest-section .tit_author,
.guest-section .name_author,
.guest-section .tit_writer { font-size: 13px !important; font-weight: 600 !important; color: #4a6494 !important; }
.guest-section .txt_date,
.guest-section .date_guest  { font-size: 11px !important; color: #b0bac5 !important; }
.guest-section .txt_reply,
.guest-section .txt_guest   { font-size: 13px !important; color: #5a6a8a !important; line-height: 1.7 !important; }

/* 삭제/수정 버튼 */
.guest-section .btn_del,
.guest-section .btn_modify {
  font-size: 11px !important; color: #b0bac5 !important;
  background: none !important; border: none !important;
  cursor: pointer; padding: 2px 6px !important; border-radius: 8px !important;
}
.guest-section .btn_del:hover { color: #e05a5a !important; }

/* ── 작성 영역 (모든 가능한 클래스) ── */
.guest-section .area_write,
.guest-section .wrap_write,
.guest-section .area_cmt,
.guest-section .box_write {
  background: #f0f5ff !important;
  border-radius: 20px !important;
  padding: 16px 18px 14px !important;
  display: flex !important; gap: 12px !important; align-items: flex-start !important;
  border: none !important;
}

/* 입력 래퍼 */
.guest-section .wrap_textarea,
.guest-section .wrap_comment,
.guest-section .inner_write {
  flex: 1 !important; display: flex !important;
  flex-direction: column !important; gap: 8px !important; min-width: 0 !important;
}

/* textarea — border 제거, 배경 투명 */
.guest-section textarea {
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  resize: none !important;
  font-size: 13px !important; color: #4a5a78 !important;
  font-family: 'MaruBuri', Georgia, serif !important;
  line-height: 1.7 !important;
  outline: none !important;
  box-shadow: none !important;
  min-height: 60px !important;
  padding: 0 !important;
}
.guest-section textarea:focus { border: none !important; outline: none !important; box-shadow: none !important; }
.guest-section textarea::placeholder { color: #b0bac5 !important; }

/* 버튼 행 */
.guest-section .wrap_btn,
.guest-section .box_btn,
.guest-section .area_btn,
.guest-section .foot_write {
  display: flex !important; align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important; margin-top: 4px !important;
}

/* 파일 첨부 버튼 */
.guest-section .btn_file,
.guest-section .btn_attach,
.guest-section .ico_file,
.guest-section .wrap_attach button {
  width: 32px !important; height: 32px !important;
  border-radius: 50% !important;
  border: none !important;
  background: #dce6f8 !important;
  cursor: pointer !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  color: #7a9fd4 !important; font-size: 14px !important;
  transition: background .15s;
}
.guest-section .btn_file:hover,
.guest-section .btn_attach:hover { background: #c8d8f4 !important; }

/* ── 등록 버튼 (티스토리 가능한 모든 클래스) ── */
.guest-section .btn_submit,
.guest-section .btn_reg,
.guest-section .btn_cmt,
.guest-section .btn_write,
.guest-section button[type="submit"],
.guest-section input[type="submit"] {
  height: 34px !important; padding: 0 20px !important;
  border-radius: 999px !important;
  border: none !important;
  background: linear-gradient(135deg, #7aabdf 0%, #5b7ab0 100%) !important;
  color: #fff !important;
  font-size: 13px !important; font-weight: 700 !important;
  font-family: 'MaruBuri', Georgia, serif !important;
  cursor: pointer !important;
  letter-spacing: -0.2px !important;
  box-shadow: 0 2px 10px rgba(91,122,176,0.30) !important;
  transition: opacity .15s;
  white-space: nowrap !important;
}
.guest-section .btn_submit:hover,
.guest-section .btn_reg:hover,
.guest-section button[type="submit"]:hover {
  opacity: .85 !important;
}

/* ============ 페이지네이션 ============ */
.pagination {
  background: #fff;
  border-radius: 16px;
  padding: 14px 20px;
  box-shadow: 0 1px 8px rgba(0,0,0,0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.page-btn {
  width: 34px; height: 34px;
  border-radius: 8px;
  border: 1.5px solid #e2e8f0;
  background: #fff;
  cursor: pointer;
  font-size: 13px;
  color: #64748b;
  transition: background .15s;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  font-family: inherit;
}
.page-btn:hover { background: #f1f5f9; }
/* Tistory가 현재 페이지에 class="active" 또는 style 추가함 */
.page-btn.active,
.page-btn[class~="on"] {
  background: #4338ca;
  color: #fff;
  border-color: #4338ca;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(29,78,216,0.3);
}
.page-arrow { font-size: 16px; }

/* ============ SIDEBAR RIGHT ============ */
.sidebar-right {
  width: 292px;
  flex-shrink: 0;
  position: sticky;
  top: calc(72px + var(--topbar-height)) !important; /* navbar(56) + 여백(16) + 상단 메뉴바. 2026-07-17(13차): 관심지수 리본이 fixed->absolute로 바뀌어 스크롤하면 사라지므로, 스크롤 후 고정 기준은 navbar만 남는다 - 리본 높이(--qi-height) 오프셋 제거. !important는 page-wrap과 같은 이유(주석 참고). 2026-07-27: 상단 메뉴바 추가분 반영. */
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  scrollbar-width: none;
  scrollbar-gutter: stable;
  padding-bottom: 80px;
}
.sidebar-right::-webkit-scrollbar { display: none; }
.sidebar-card { padding: 16px; }
.sidebar-title {
  display: flex; align-items: center; gap: 7px;
  margin-bottom: 14px;
  font-size: 13px; font-weight: 700;
  color: #0d1b40;
}
.sidebar-icon {
  width: 26px; height: 26px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.si-blue  { background: #eff6ff; }
.si-amber { background: #fffbeb; }
.si-purple{ background: #f5f3ff; }
.si-green { background: #f0fdf4; }

/* 방문자 통계 */
.stats-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.stat-item { border-radius: 11px; padding: 11px 8px; text-align: center; }
.stat-item.today  { background: #eef2ff; }
.stat-item.others { background: #f8faff; }
.stat-item-label { font-size: 10px; color: #64748b; font-weight: 500; margin-bottom: 5px; }
.stat-item-num { font-size: 22px; font-weight: 700; color: #0d1b40; letter-spacing: -0.5px; line-height: 1; }
.stat-item-num.blue  { color: #2563eb; }
.stat-item-num.small { font-size: 14px; margin-top: 3px; }

/* 인기글 — CSS counter로 순위 자동 생성 */
.popular-list {
  list-style: none; padding: 0; margin: 0;
  counter-reset: popular-rank;
}
.popular-list .pop-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid #f8fafc;
  counter-increment: popular-rank;
}
.popular-list .pop-item:last-child { border-bottom: none; }
.pop-rank {
  min-width: 22px; line-height: 1.35; flex-shrink: 0;
  font-size: 16px; font-weight: 800;
}
.pop-rank::before {
  content: counter(popular-rank);
  color: #d1d5db;
}
.popular-list .pop-item:nth-child(1) .pop-rank::before,
.popular-list .pop-item:nth-child(2) .pop-rank::before,
.popular-list .pop-item:nth-child(3) .pop-rank::before { color: #4338ca; }
.pop-info { flex: 1; min-width: 0; }
.pop-title {
  font-size: 12.5px; color: #374151;
  line-height: 1.5; font-weight: 500;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.pop-title a { text-decoration: none; color: #374151; }
.pop-title a:hover { color: #4338ca; }
.pop-date { font-size: 11px; color: #94a3b8; margin-top: 3px; }

/* 태그 클라우드 (s_random_tags) */
.tag-cloud { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-pill {
  font-size: 11.5px;
  background: #f1f5f9;
  color: #64748b;
  padding: 5px 12px;
  border-radius: 20px;
  cursor: pointer;
  font-weight: 500;
  transition: background .15s, color .15s;
  user-select: none;
  text-decoration: none;
  display: inline-block;
}
.tag-pill:hover { background: #e0e7ff; color: #4338ca; }

/* ============ SITE FOOTER ============ */
/* 링크 4종(.site-footer-links, js/skin-shell.js가 주입) + 카피라이트(.copyright, 티스토리
   태그가 섞여있어 skin.html에 직접 있음)를 한 행에 배치 - 카피라이트가 "문의하기" 오른쪽에
   오도록 flex-wrap 행 정렬(2026-07-22, 예전엔 우측 사이드바 하단에 별도로 있었음). */
.site-footer {
  border-top: 1px solid #e5e7eb;
  margin-top: 12px;
  padding: 18px 16px 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  row-gap: 8px;
}
.site-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 6px;
  font-size: 12px;
}
.site-footer-links a {
  color: #94a3b8;
  text-decoration: none;
  padding: 0 12px;
  border-right: 1px solid #e5e7eb;
  transition: color .15s;
}
.site-footer-links a:last-child { border-right: none; }
.site-footer-links a:hover { color: #374151; }
/* 카피라이트를 링크 구분선과 같은 스타일(굵기·색·간격)로 이어붙임 - 문의하기 오른쪽에
   별도 텍스트 "|" 넣었을 때보다 자연스러움(2026-07-23, 사용자 실측 피드백으로 교체). */
.copyright {
  font-size: 11px;
  color: #94a3b8;
  text-align: center;
  line-height: 1.6;
  text-decoration: none;
  transition: color .15s;
  padding-left: 12px;
  border-left: 1px solid #e5e7eb;
}
.copyright:hover { color: #374151; text-decoration: underline; }
html.dark .site-footer { border-top-color: rgba(245, 239, 224, 0.14); }
html.dark .site-footer-links a { color: rgba(245, 239, 224, 0.55); border-right-color: rgba(245, 239, 224, 0.14); }
html.dark .site-footer-links a:hover { color: #F5EFE0; }
html.dark .copyright { color: rgba(245, 239, 224, 0.55); border-left-color: rgba(245, 239, 224, 0.14); }
html.dark .copyright:hover { color: #F5EFE0; }
body.iframe-mode .site-footer { display: none !important; }

/* ============ DISCLOSURE TICKER ============ */
/* 2026-07-17(9차): 별도 고정 바였던 공시 티커를 관심지수 바(js/quick-indices.js)의
   "긴급속보" 패널로 흡수 - 관련 스타일은 css/quick-indices.css의 .qi-news* 참고. */

/* ============ 반응형 ============ */
@media (max-width: 1100px) {
  .sidebar-right { display: none; }
  .main-layout { max-width: 860px; }
}
@media (max-width: 720px) {
  /* 2026-07-27: 상단 메뉴바 전환 이후 모바일도 사이드바(=메뉴바)를 숨기지 않고
     가로 스크롤 형태로 계속 노출한다(9Pay 증권 작업지시서 #12 - 모바일도 상단 메뉴
     유지, 서브메뉴만 가로 스크롤). 실제 모바일 전용 스타일은 아래 두 번째
     반응형 블록(720px)에서 재정의. */
  .main-layout { padding: 12px 10px; }
  .post-card { padding: 16px 16px; }
  .post-single { padding: 18px 16px; }
  .post-single-title { font-size: 20px; }
}

/* ============ 모바일 햄버거 버튼 ============ */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: #123020;
  border: none;
  border-radius: 9px;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  order: -1;
}
.nav-hamburger span {
  display: block;
  width: 16px;
  height: 2px;
  background: #8fb09e;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); background: #7aabdf; }
.nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); background: #7aabdf; }

/* ============ 데스크톱 사이드바 토글 버튼 (2026-07-21 사이드바 리디자인 #3) ============
   .nav-hamburger 스타일/열림 애니메이션을 그대로 재사용하되 노출 조건은 정반대(모바일
   전용 #mobileMenuBtn은 데스크톱에서 숨김, 이건 모바일에서 숨김 - 모바일은 이미 사이드바가
   기본 숨김 상태라 완전 숨김 토글이 무의미하고 기존 드로어 햄버거와 겹치면 혼란스러움). */
.nav-sidebar-toggle-btn { display: flex; }

/* ============ 모바일 드로어 오버레이 ============ */
.mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 998;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.mobile-overlay.open { display: block; }

/* ============ 모바일 검색 오버레이 ============ */
.mobile-search-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(8, 36, 21, 0.97);
  z-index: 1001;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 90px;
  animation: msoIn 0.2s ease;
}
.mobile-search-overlay.open { display: flex; }
@keyframes msoIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.mso-inner {
  width: calc(100% - 40px);
  max-width: 480px;
  position: relative;
}
.mso-input {
  width: 100%;
  background: #123020;
  border: 2px solid #22c55e;
  border-radius: 30px;
  padding: 14px 52px 14px 22px;
  color: #fff;
  font-size: 16px;
  font-family: 'MaruBuri', Georgia, serif;
  outline: none;
  letter-spacing: -0.2px;
  box-shadow: 0 4px 24px rgba(34,197,94,0.25);
}
.mso-input::placeholder { color: #7fa08d; }
.mso-hint {
  margin-top: 14px;
  font-size: 12px;
  color: #4a6494;
  text-align: center;
}
.mso-close-btn {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #6b84a8;
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mso-close-btn:hover { color: #fff; }

/* 모바일 전용 검색 버튼 (nav-icons 안) */
.nav-search-btn { display: none; }
.nav-manage-btn:hover svg { stroke: #745b37; }

body.account-login-open { overflow: hidden; }
.account-login-modal[hidden] { display: none; }
.account-login-modal { position: fixed; inset: 0; z-index: 2200; font-family: 'MaruBuri', 'Maru Buri', 'Nanum Gothic', system-ui, sans-serif; }
.account-login-backdrop { display: grid; place-items: center; min-height: 100%; padding: 24px; box-sizing: border-box; background: rgba(15, 23, 42, .42); backdrop-filter: blur(5px); }
.account-login-dialog { position: relative; width: min(520px, 100%); box-sizing: border-box; padding: 32px; border: 1px solid rgba(255, 255, 255, .7); border-radius: 24px; background: linear-gradient(145deg, #fff 0%, #f8fbff 100%); box-shadow: 0 24px 70px rgba(15, 23, 42, .24); color: #172033; }
.account-login-close { position: absolute; top: 18px; right: 18px; width: 34px; height: 34px; border: 1px solid #e2e8f0; border-radius: 50%; background: rgba(255, 255, 255, .8); color: #64748b; font: inherit; font-size: 22px; line-height: 1; cursor: pointer; transition: background .15s ease, color .15s ease, transform .15s ease; }
.account-login-close:hover { background: #eef3f9; color: #1e293b; transform: rotate(90deg); }
.account-login-close:focus-visible, .account-login-option:focus-visible { outline: 3px solid rgba(37, 99, 235, .22); outline-offset: 3px; }
.account-login-heading { padding-right: 36px; margin-bottom: 24px; }
.account-login-eyebrow { display: block; margin-bottom: 8px; color: #2563eb; font-family: Arial, sans-serif; font-size: 10px; font-weight: 800; letter-spacing: .18em; }
.account-login-heading h2 { margin: 0; font-size: 23px; font-weight: 800; letter-spacing: -.04em; }
.account-login-heading p { margin: 9px 0 0; color: #64748b; font-size: 13px; line-height: 1.6; }
.account-login-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.account-login-option { display: grid; grid-template-columns: 40px minmax(0, 1fr) 18px; align-items: center; gap: 11px; min-height: 92px; box-sizing: border-box; padding: 15px; border: 1px solid #dbe5f2; border-radius: 16px; background: #fff; color: #172033; text-align: left; text-decoration: none; font: inherit; cursor: pointer; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease; }
.account-login-option:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(31, 41, 55, .09); }
.account-login-tistory:hover { border-color: #e6c77b; background: #fffdf7; }
.account-login-google:hover { border-color: #9fc0f8; background: #f8fbff; }
.account-login-option-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; font-family: Arial, sans-serif; font-size: 20px; font-weight: 800; }
.account-login-kakao-icon { background: #fee500; color: #191919; font-size: 13px; }
.account-login-google-icon { border: 1px solid #d6e2f2; background: #fff; color: #4285f4; box-shadow: 0 3px 10px rgba(66, 133, 244, .12); }
.account-login-option-copy { min-width: 0; }
.account-login-option-copy strong { display: block; font-size: 13px; line-height: 1.35; }
.account-login-option-copy small { display: block; margin-top: 4px; color: #7b8798; font-size: 11px; line-height: 1.35; white-space: nowrap; }
.account-login-option-arrow { color: #94a3b8; font-size: 18px; transition: transform .15s ease, color .15s ease; }
.account-login-option:hover .account-login-option-arrow { color: #2563eb; transform: translateX(2px); }
.account-login-google-status { min-height: 18px; margin-top: 16px; color: #64748b; font-size: 11px; line-height: 1.5; }
.account-login-footer { margin-top: 20px; padding-top: 15px; border-top: 1px solid #e8eef5; color: #94a3b8; font-size: 10px; line-height: 1.5; }
html.dark .account-login-backdrop { background: rgba(0, 0, 0, .62); }
html.dark .account-login-dialog { border-color: rgba(245, 239, 224, .15); background: linear-gradient(145deg, #202b3a 0%, #1a1a1a 100%); color: #f5efe0; box-shadow: 0 24px 70px rgba(0, 0, 0, .5); }
html.dark .account-login-close { border-color: rgba(245, 239, 224, .2); background: #242424; color: rgba(245, 239, 224, .7); }
html.dark .account-login-close:hover { background: #2b2b2b; color: #f5efe0; }
html.dark .account-login-heading p, html.dark .account-login-google-status { color: rgba(245, 239, 224, .65); }
html.dark .account-login-option { border-color: rgba(245, 239, 224, .18); background: #1a1a1a; color: #f5efe0; }
html.dark .account-login-tistory:hover { border-color: #a3843f; background: #2e291d; }
html.dark .account-login-google:hover { border-color: #4678bd; background: #202b3a; }
html.dark .account-login-google-icon { border-color: rgba(245, 239, 224, .2); background: #242424; color: #8ab4f8; }
html.dark .account-login-option-copy small, html.dark .account-login-footer { color: rgba(245, 239, 224, .5); }
html.dark .account-login-footer { border-color: rgba(245, 239, 224, .15); }
@media (max-width: 560px) {
  .account-login-backdrop { align-items: end; padding: 12px; }
  .account-login-dialog { padding: 25px 18px 18px; border-radius: 22px; }
  .account-login-heading { margin-bottom: 18px; }
  .account-login-heading h2 { font-size: 20px; }
  .account-login-options { grid-template-columns: 1fr; gap: 9px; }
  .account-login-option { min-height: 72px; }
  .account-login-option-icon { width: 36px; height: 36px; }
}

/* ============ 스크롤 투 탑 ============ */
.scroll-top-btn {
  position: fixed;
  bottom: 24px;
  right: 18px;
  width: 40px;
  height: 40px;
  background: #4338ca;
  border: none;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 290;
  box-shadow: 0 3px 14px rgba(29,78,216,0.4);
  transition: background 0.15s, transform 0.2s, opacity 0.2s;
  opacity: 0;
}
.scroll-top-btn.visible { opacity: 1; }
.scroll-top-btn:hover { background: #1e40af; transform: translateY(-2px); }
.scroll-top-btn svg { display: block; }

/* ============ 반응형 오버라이드 (모바일 우선) ============ */
@media (max-width: 720px) {
  :root { --topbar-height: 44px; } /* 모바일 상단 메뉴바는 아이콘 없이 얇게(44px) */
  /* ── 내비게이션 바 ── */
  .navbar { padding: 0 12px; gap: 10px; }
  .nav-logo-sub { display: none; }
  /* 2026-07-28: 예전엔 여기서 .nav-search를 통째로 숨기고 돋보기 아이콘(.nav-search-btn)이
     여는 전체화면 오버레이(티스토리 블로그글 검색, /search/{q})로 대신했는데, navbar
     검색창이 종목검색으로 바뀐 지금은 그 오버레이가 더는 맞는 기능이 아니다. 마침 아래
     햄버거 버튼들이 없어져 공간이 남아서 종목검색창을 모바일에서도 그대로 노출한다
     (사이드바 쪽 종목검색은 navbar로 이전되며 사라졌으므로, 여기마저 숨기면 모바일에서
     종목검색을 아예 할 수 없게 됨). */
  .nav-search { flex: 1; max-width: none; margin-left: 8px; }
  /* 2026-07-27: 상단 메뉴바가 항상 노출되는 가로 스크롤 형태로 바뀌면서 모바일
     드로어 자체가 없어져 햄버거 버튼도 더는 쓸 일이 없다(9Pay 증권 작업지시서 #12). */
  .nav-hamburger { display: none !important; }
  .nav-sidebar-toggle-btn { display: none !important; }
  .nav-search-btn { display: none; } /* 이제 옆에 실제 종목검색창이 항상 보이므로 중복 */
  /* 아이콘 6개(다크토글/방명록/검색/글쓰기/관리자/로그아웃)가 한 줄에 다 들어가야 해서
     기본 36px 크기로는 좁은 화면에서 로그아웃 아이콘이 뷰포트 밖으로 밀려 잘림 -> 축소 */
  .nav-icon-btn { width: 32px; height: 32px; }
  .nav-icons { gap: 6px; }
  .scroll-top-btn { display: flex; bottom: 20px; right: 14px; width: 38px; height: 38px; }

  /* ── 페이지 래퍼 ── */
  .main-layout { padding: 10px 10px; }

  /* ── 좌측 사이드바(=상단 메뉴바) 모바일: 드로어 대신 항상 보이는 가로 스크롤 바 ──
     2026-07-27: 오프캔버스 드로어를 없애고 navbar 바로 아래 얇은 가로 스크롤 탭
     목록으로 통일(9Pay 작업지시서 #12 - "Sidebar 없음, 상단 Menu 유지, Sub Menu
     가로 스크롤"). 위쪽 데스크톱 규칙(.sidebar-left, min-width 스코프 없음)과 겹치는
     값은 여기서 모바일 전용으로만 다시 좁힌다. */
  .sidebar-left {
    top: 56px !important;
    left: 0 !important; right: 0 !important;
    width: auto !important;
    height: 44px !important;
    z-index: 250 !important;
    overflow-y: hidden !important;
    padding: 0 !important;
    background: rgb(253, 253, 247) !important;
    box-shadow: none !important;
    border-top: 1px solid #eee !important;
    border-bottom: 1px solid #eee !important;
    border-right: none !important;
    transition: none !important;
    max-height: none !important;
    gap: 0 !important;
  }
  .drawer-header { display: none !important; }

  /* 모바일 navbar 좌측 패딩(위 .navbar 규칙, 12px)과 맞춰 로고와 같은 x좌표에서 시작 */
  .sidebar-left .nav-menu { padding: 0 4px 0 12px; }
  .sidebar-left .nav-item { padding: 0 12px; margin-bottom: 0; }
  .sidebar-left .nav-item-label { font-size: 13.5px; }

  /* ── 피드 ── */
  .feed { gap: 10px; }
  .post-card.feed-featured { padding: 18px 16px; }
  .post-card.feed-featured .post-title { font-size: 17px; }
  .feed-block-cards { grid-template-columns: 1fr; gap: 10px; }
  .feed-block-duo { grid-template-columns: 1fr; gap: 10px; }
  .feed-block-hero { grid-template-columns: 1fr; gap: 10px; }
  .feed-block-headline { padding: 2px 14px; }

  /* ── 서브 필터 ── */
  .sub-filter-bar { padding: 0 8px; }
  .sub-filter-tab { padding: 8px 11px; font-size: 12px; }

  /* ── 포스트 카드 ── */
  .post-card { padding: 15px 15px; border-radius: 14px; }
  .post-title { font-size: 15.5px; }
  .post-excerpt { font-size: 13px; -webkit-line-clamp: 3; }
  .post-footer { flex-wrap: wrap; gap: 8px; padding-top: 12px; }
  .post-footer-right { gap: 6px; }
  .btn-read { font-size: 12px; padding: 7px 14px; }
  .btn-share { font-size: 12px; padding: 7px 11px; }
  .post-cat-badge { font-size: 10px; padding: 3px 10px; }

  /* ── 단일 글 ── */
  .post-single { padding: 18px 16px; }
  .post-single-title { font-size: 21px; }
  .post-single-body { font-size: 14.5px; }
  .post-single-body h2 { font-size: 18px; }
  .post-single-body h3 { font-size: 15px; }

  /* ── 관련 글 ── */
  .related-list { flex-direction: column; }

  /* ── 페이지네이션 ── */
  .pagination { gap: 4px; }
  .page-btn { width: 34px; height: 34px; font-size: 13px; }
}

@media (max-width: 430px) {
  .navbar { gap: 6px; padding: 0 8px; }
  .nav-search { min-width: 0; margin-left: 2px; }
  /* 작은 화면에서는 폰트·다크 토글과 1차 텍스트 메뉴를 우선한다. MY와 커뮤니티는
     1차 메뉴에서 직접 접근하므로 원형 보조 아이콘은 헤더 폭을 차지하지 않게 한다. */
  .nav-icons > .nav-icon-btn { display: none; }
  .sidebar-left .nav-menu { padding: 0 4px 0 8px; }
  .nav-logo-name { font-size: 15px; }
  .nav-logo-icon { width: 32px; height: 32px; }
  .nav-hamburger { width: 30px; height: 30px; }
  .nav-icon-btn { width: 29px; height: 29px; }
  .nav-icons { gap: 4px; }
  .post-title { font-size: 15px; }
  .post-card { padding: 14px 13px; }
  .btn-read, .btn-share { font-size: 11.5px; padding: 6px 12px; }
}

/* ============ iframe 모드 (모달 안에서 열릴 때) ============ */
body.iframe-mode .navbar,
body.iframe-mode .sidebar-left,
body.iframe-mode .sidebar-right,
body.iframe-mode .sub-filter-bar,
body.iframe-mode .pagination,
body.iframe-mode .guest-section,
body.iframe-mode .market-ribbon,
body.iframe-mode .mobile-overlay,
body.iframe-mode .mobile-search-overlay,
body.iframe-mode .scroll-top-btn { display: none !important; }
body.iframe-mode { background: rgb(253, 253, 247); }
body.iframe-mode .page-wrap { padding-top: 0 !important; }
body.iframe-mode .main-layout { display: block; max-width: 100%; padding: 0; }
body.iframe-mode .feed { gap: 0; }
body.iframe-mode .post-card { border-radius: 0; box-shadow: none; margin: 0; }
body.iframe-mode .post-single { padding: 20px 24px; border-radius: 0; box-shadow: none; }
body.iframe-mode .notice-card { border-radius: 0; }

/* ============ 아티클 모달 ============ */
@keyframes nmFadeOut { from { opacity: 1; } to { opacity: 0; } }
#bolt-modal {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
}
#bolt-modal.nm-closing .nm-overlay,
#bolt-modal.nm-closing .nm-card { animation: nmFadeOut 0.18s ease forwards; }
.nm-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.nm-card {
  position: relative; z-index: 1;
  width: min(960px, 80vw);
  height: min(72vh, 768px);
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,0.35);
  display: flex; flex-direction: column;
  animation: nmIn .25s ease;
}
@keyframes nmIn {
  from { opacity: 0; transform: scale(.95) translateY(12px); }
  to   { opacity: 1; transform: scale(1)  translateY(0); }
}
.nm-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 16px;
  border-bottom: 1px solid #f1f5f9;
  flex-shrink: 0; gap: 10px;
  background: #fff;
}
.nm-title {
  font-size: 12.5px; font-weight: 700; color: #0d1b40;
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nm-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.nm-ext {
  font-size: 11.5px; color: #4338ca; text-decoration: none;
  background: #eef2ff; padding: 5px 12px; border-radius: 20px;
  font-weight: 600; transition: background .15s; white-space: nowrap;
}
.nm-ext:hover { background: #e0e7ff; }
.nm-close {
  width: 28px; height: 28px; border-radius: 50%;
  border: none; background: #f1f5f9; cursor: pointer;
  font-size: 13px; color: #64748b;
  display: flex; align-items: center; justify-content: center;
  font-family: inherit; flex-shrink: 0;
}
.nm-close:hover { background: #e2e8f0; color: #374151; }
.nm-iframe { flex: 1; border: none; width: 100%; background: #fff; }

.nm-card.nm-wide { width: min(1280px, 78vw); height: min(75vh, 832px); }
@media (max-width: 600px) {
  .nm-card.nm-wide { width: 100%; height: 94vh; }
}

.nm-scale-wrap { flex: 1; overflow-x: hidden; overflow-y: auto; position: relative; }
.nm-scale-inner { position: relative; }
.nm-iframe-fixed {
  position: absolute; top: 0; left: 0;
  width: 1200px; height: 1300px;
  transform-origin: top left;
  border: none; background: #fff;
}

/* ============ 다크모드 (html.dark — 토글: navbar #darkModeBtn, 저장: localStorage 'bolt-dark') ============ */

/* 토글 버튼 - 스위치 형태(트랙+원형 손잡이), 켜지면 브랜드 보라색 */
.nav-dark-btn {
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background: #1f4a34;
  border: none;
  padding: 0;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s;
}
.dark-toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s;
}
html.dark .nav-dark-btn { background: #22c55e; }
html.dark .dark-toggle-knob { transform: translateX(20px); }

/* 베이스 - 2026-07-28 사용자 요청으로 다크모드 전체를 배경 #1A1A1A + 글자 #F5EFE0
   두 색 조합으로 통일(기존엔 파일마다 남색/청록/초록 등 제각각 톤을 썼음). 카드처럼
   배경에서 "떠 보여야" 하는 표면은 색을 따로 마련하는 대신 같은 #1A1A1A 위에 크림색
   저채도 테두리/오버레이(rgba(245,239,224, 낮은 알파))만 얹어 2색 체계를 지킨다.
   단, 상승/하락 빨강·파랑, 카테고리 뱃지 색처럼 "의미"를 담은 강조색은 그대로 둔다
   (전부 지우면 등락 방향이나 카테고리 구분이 안 됨 - 아래 예외 규칙들 참고). */
html.dark body { background: #1A1A1A; color: #F5EFE0; }
html.dark ::-webkit-scrollbar-thumb { background: rgba(245, 239, 224, 0.25); }
html.dark .navbar { background: #1A1A1A; border-bottom: 1px solid rgba(245, 239, 224, 0.1); }
html.dark .nav-logo-name { color: #F5EFE0; }

/* 카드 계열 표면 */
html.dark .card,
html.dark .post-card,
html.dark .pagination {
  background: #1A1A1A;
  border: 1px solid rgba(245, 239, 224, 0.12);
  box-shadow: 0 1px 8px rgba(0,0,0,0.45);
}
html.dark .post-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.55); border-color: rgba(245, 239, 224, 0.22); }
html.dark .notice-card {
  background: #1A1A1A;
  border: 1px solid rgba(245, 239, 224, 0.22);
  box-shadow: 0 4px 18px rgba(0,0,0,0.4);
}

/* 제목·본문 텍스트 */
html.dark .post-title,
html.dark .post-single-title,
html.dark .sidebar-title,
html.dark .guest-title,
html.dark .stat-item-num,
html.dark .related-title { color: #F5EFE0; }
html.dark .post-card a:hover .post-title { color: #F5EFE0; text-decoration: underline; }
html.dark .post-excerpt { color: rgba(245, 239, 224, 0.72); }
/* 티스토리 에디터가 본문에 박아넣는 인라인 style="color:..."(대개 검정 계열)가 클래스 규칙보다
   우선순위가 높아 다크모드에서 글자가 안 보이는 문제 -> !important로 강제 크림색.
   단, 등락 표시용 빨강(#d24f45)/파랑(#1261c4)·기본 red/blue 계열 inline 색상은 예외로 유지. */
html.dark .post-single-body,
html.dark .post-single-body * {
  color: #F5EFE0 !important;
}
html.dark .post-single-body [style*="d24f45" i],
html.dark .post-single-body [style*="ff0000" i],
html.dark .post-single-body [style*="#f00" i],
html.dark .post-single-body [style*="color:red" i],
html.dark .post-single-body [style*="color: red" i],
html.dark .post-single-body [style*="rgb(255, 0, 0)" i] {
  color: #ff6b6b !important;
}
html.dark .post-single-body [style*="1261c4" i],
html.dark .post-single-body [style*="0000ff" i],
html.dark .post-single-body [style*="#00f" i],
html.dark .post-single-body [style*="color:blue" i],
html.dark .post-single-body [style*="color: blue" i],
html.dark .post-single-body [style*="rgb(0, 0, 255)" i] {
  color: #4dabf7 !important;
}
/* h2/h3/굵은 글씨는 본문과 색을 다르게 주지 않고(2색 체계 유지) 굵기·크기만으로 위계를
   구분한다 - 이미 폰트 크기/굵기가 다르므로 색 없이도 구분됨(빨강/초록/주황/보라 등
   인라인 색이 이미 지정된 굵은 글씨는 아래 색상 예외 규칙이 더 specificity가 높아 그대로 유지됨). */
html.dark .post-single-body h2 { color: #F5EFE0 !important; }
html.dark .post-single-body h3 { color: #F5EFE0 !important; }
html.dark .post-single-body blockquote { background: rgba(245, 239, 224, 0.05); color: #F5EFE0 !important; border-color: rgba(245, 239, 224, 0.25); }
html.dark .post-single-body strong,
html.dark .post-single-body b { color: #F5EFE0 !important; }

/* 초록/주황·노랑/보라 계열 인라인 색상도 빨강/파랑처럼 다크모드 전용 색으로 보존
   (카테고리 뱃지에 이미 쓰는 색과 맞춰 톤 통일: 초록 #4ade80, 주황 #fbbf24, 보라 #b79af0) */
html.dark .post-single-body [style*="008000" i],
html.dark .post-single-body [style*="00ff00" i],
html.dark .post-single-body [style*="00b050" i],
html.dark .post-single-body [style*="22c55e" i],
html.dark .post-single-body [style*="color:green" i],
html.dark .post-single-body [style*="color: green" i] {
  color: #4ade80 !important;
}
html.dark .post-single-body [style*="ffa500" i],
html.dark .post-single-body [style*="ffff00" i],
html.dark .post-single-body [style*="f59e0b" i],
html.dark .post-single-body [style*="color:orange" i],
html.dark .post-single-body [style*="color: orange" i],
html.dark .post-single-body [style*="color:yellow" i],
html.dark .post-single-body [style*="color: yellow" i] {
  color: #fbbf24 !important;
}
html.dark .post-single-body [style*="800080" i],
html.dark .post-single-body [style*="8000ff" i],
html.dark .post-single-body [style*="6f42c1" i],
html.dark .post-single-body [style*="9333ea" i],
html.dark .post-single-body [style*="color:purple" i],
html.dark .post-single-body [style*="color: purple" i] {
  color: #b79af0 !important;
}

/* 표 — 다크모드 기본값이 없어서 헤더/데이터 구분이 안 되고 테두리도 거의 안 보이던 문제 수정 */
html.dark .post-single-body table {
  border-color: rgba(245, 239, 224, 0.25) !important;
}
html.dark .post-single-body th,
html.dark .post-single-body td {
  border-color: rgba(245, 239, 224, 0.25) !important;
  background: #1A1A1A !important;
}
html.dark .post-single-body th {
  background: rgba(245, 239, 224, 0.08) !important;
  font-weight: 700 !important;
}
html.dark .post-single-body tr:nth-child(even) td {
  background: rgba(245, 239, 224, 0.04) !important;
}
html.dark .post-comments { color: #F5EFE0; }
html.dark .post-date,
html.dark .post-meta,
html.dark .pop-date,
html.dark .related-item-date { color: rgba(245, 239, 224, 0.55); }

/* 필터 바 */
html.dark .sub-filter-bar { background: #1A1A1A; box-shadow: none; border: 1px solid rgba(245, 239, 224, 0.12); }
html.dark .sub-filter-tab { color: rgba(245, 239, 224, 0.75); }
html.dark .sub-filter-tab:hover { background: rgba(245, 239, 224, 0.08); }

/* 카테고리 뱃지 — 콘텐츠 분류를 색으로 구분하는 게 목적이라(상승/하락 색과 같은 성격의
   "의미 있는" 색) 다크모드 전체 배경 2색 통일 대상에서 제외하고 원래 톤 유지 */
html.dark .post-cat-badge { background: #2a3467; color: #a5b4fc; }
html.dark .post-cat-badge:hover { background: #24365c; }
html.dark .post-card[data-cat="Insight Analysis"] .post-cat-badge { background: #122b1d; color: #4ade80; }
html.dark .post-card[data-cat="Personal Notes"] .post-cat-badge { background: #2d2410; color: #fbbf24; }
html.dark .post-card[data-cat="Starlight Wisdom Alcove"] .post-cat-badge,
html.dark .post-card[data-cat="Insight Archive"] .post-cat-badge,
html.dark .post-card[data-cat="The 맛있는 여행"] .post-cat-badge,
html.dark .post-card[data-cat="일상생활"] .post-cat-badge,
html.dark .post-card[data-cat="일기장 (비공개)"] .post-cat-badge,
html.dark .post-card[data-cat="공부 ?"] .post-cat-badge,
html.dark .post-card[data-cat="Knowledge, research"] .post-cat-badge { background: #251b3d; color: #b79af0; }

/* 태그 */
html.dark .post-tags a,
html.dark .tag-pill { background: rgba(245, 239, 224, 0.08); color: rgba(245, 239, 224, 0.8); }
html.dark .post-tags a:hover,
html.dark .tag-pill:hover { background: rgba(245, 239, 224, 0.16); color: #F5EFE0; }

/* 카드 푸터·버튼 */
html.dark .post-footer { border-top-color: rgba(245, 239, 224, 0.14); }
html.dark .btn-share { background: #1A1A1A; border-color: rgba(245, 239, 224, 0.2); color: rgba(245, 239, 224, 0.75); }
html.dark .btn-share:hover { background: rgba(245, 239, 224, 0.08); }
html.dark .btn-read { background: rgba(99, 102, 241, 0.18); color: #a5b4fc; }
html.dark .btn-read:hover { background: rgba(99, 102, 241, 0.28); color: #c7d2fe; }
html.dark .btn-read.open { background: rgba(245, 239, 224, 0.1); color: #F5EFE0; }

/* 관련 글 */
html.dark .related-posts { background: #1A1A1A; border-color: rgba(245, 239, 224, 0.14); }
html.dark .related-item { border-bottom-color: rgba(245, 239, 224, 0.14); }
html.dark .related-item-title { color: rgba(245, 239, 224, 0.75); }
html.dark .related-item-title:hover { color: #F5EFE0; }

/* 상단 메뉴바(구 좌측 사이드바)
   2026-07-28: navbar와 같은 톤으로 맞추는 원칙은 유지하되(하나의 헤더처럼 보이게),
   진초록(#082415) 대신 사이트 공통 다크모드 배경(#1A1A1A)으로 통일(사용자 요청 -
   "다크모드인데 왜 초록색이냐"는 지적, 아래 전체 재작업과 함께 처리). */
html.dark .sidebar-left { background: #1A1A1A; box-shadow: 0 1px 6px rgba(0,0,0,0.5); border-top: none; border-bottom: 1px solid rgba(245, 239, 224, 0.1); }
/* background도 명시 - html.dark .nav-item-home이 detail specificity상 더 세서 그냥
   두면 상단 메뉴바 "홈" 탭 뒤에 안 어울리는 박스가 깔림(옛 카드형 메뉴 스타일 잔재). */
html.dark .sidebar-left .nav-item-home { background: transparent; border-bottom-color: #F5EFE0; }
html.dark .nav-search-wrap { border-bottom-color: rgba(245, 239, 224, 0.16); }
html.dark .nav-item { color: #F5EFE0; }
html.dark .nav-item-label { color: #F5EFE0; }
html.dark .nav-item:visited,
html.dark .nav-item:visited .nav-item-label { color: #F5EFE0; }
html.dark .nav-item:hover { background: rgba(245, 239, 224, 0.08); }
/* 2026-07-17: 라이트모드와 동일하게 아이콘 원형 배경을 없앰 - 다크모드는 카드
   배경색(#1A1A1A, style.css html.dark .card 참고)과 맞춰서 튀지 않게 한다. */
html.dark .nav-item-home { background: #1A1A1A; }
html.dark .nav-item-icon { background: #1A1A1A; }
html.dark .nav-item-home .nav-item-icon { background: #1A1A1A; }
html.dark .nav-item-home .nav-item-label { color: #F5EFE0; }
/* 아이콘 SVG(그리드·벨·말풍선 = currentColor) 밝게 */
html.dark .nav-item-icon svg { stroke: #F5EFE0; }
html.dark .nav-item-home .nav-item-icon svg { stroke: #F5EFE0; }

html.dark .nav-search-input-wrap {
  background: #1A1A1A;
  border-color: rgba(245, 239, 224, 0.2);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
}
html.dark .nav-search-input { color: #F5EFE0; }
html.dark .nav-search-input::placeholder { color: rgba(245, 239, 224, 0.45); }
html.dark .nav-search-suggest { background: #1A1A1A; border-color: rgba(245, 239, 224, 0.2); }
html.dark .nav-search-suggest-title { color: rgba(245, 239, 224, 0.55); }
html.dark .nav-search-suggest-item { color: #F5EFE0; }
html.dark .nav-search-suggest-item:hover, html.dark .nav-search-suggest-item.active { background: rgba(245, 239, 224, 0.1); }
html.dark .nav-search-rate-badge:not(:empty) { background: rgba(245, 239, 224, 0.14); }
html.dark .nav-search-rate-badge.rate-up { color: #ff6b5b; background: #3a2323; }
html.dark .nav-search-rate-badge.rate-down { color: #4d9fff; background: #1f2c3d; }
html.dark .nav-search-current-price { color: #F5EFE0; }
html.dark .nav-search-fav-btn { color: rgba(245, 239, 224, 0.35); }
html.dark .nav-search-fav-btn:hover { background: rgba(245, 239, 224, 0.08); }
html.dark .nav-search-fav-btn.active { color: #e0b040; }
/* 온도계(currentColor 방식): 다크에선 밝은 빨강 (인라인 color 오버라이드) */
html.dark .nav-icon-temp { color: #ff7a6e !important; }
html.dark .section-title { color: rgba(245, 239, 224, 0.55); }
html.dark .cat-section ul li > a,
html.dark .cat-custom-list li > a { color: #F5EFE0; }
html.dark .cat-custom-list li > a:visited { color: #F5EFE0; }
html.dark .cat-section ul li > a:hover,
html.dark .cat-custom-list li > a:hover { background: rgba(245, 239, 224, 0.08); color: #F5EFE0; }
html.dark .cat-custom-list li > a.active { background: rgba(245, 239, 224, 0.16); color: #F5EFE0; }
html.dark .cat-cnt,
html.dark .cat-section ul li > a span:not(.cat-dot) { background: #2b3852; color: #aeb9cc; }
html.dark .cat-icon { stroke: #dbe4f2; } /* 왼쪽 페이지 메뉴 아이콘 다크모드 색과 동일 */

/* 방문자 통계 */
html.dark .stat-item.today { background: rgba(245, 239, 224, 0.1); }
html.dark .stat-item.others { background: rgba(245, 239, 224, 0.05); }
html.dark .stat-item-num.blue { color: #F5EFE0; }

/* 인기글 */
html.dark .pop-title,
html.dark .pop-title a { color: #F5EFE0; }
html.dark .pop-title a:hover { color: rgba(245, 239, 224, 0.7); }
html.dark .pop-rank::before { color: rgba(245, 239, 224, 0.35); }
html.dark .popular-list .pop-item { border-bottom-color: rgba(245, 239, 224, 0.14); } /* 라이트용 #f8fafc가 다크에선 흰 줄로 보임 */
html.dark .popular-list .pop-item:last-child { border-bottom: none; }

/* 사이드바 아이콘 배경(오늘/전체/글/방명록 4종을 색으로 구분하는 용도) - 카테고리 뱃지와
   같은 이유로 구분색 유지, 배경 통일 대상에서 제외 */
html.dark .si-blue { background: #1c2c4d; }
html.dark .si-amber { background: #2d2410; }
html.dark .si-purple { background: #251b3d; }
html.dark .si-green { background: #122b1d; }

/* 공시 티커 - 2026-07-17(9차)부터 관심지수 바 "긴급속보" 패널로 흡수됨.
   다크모드 스타일은 css/quick-indices.css의 html.dark .qi-news* 참고. */

/* 페이지네이션 */
html.dark .page-btn { background: #1A1A1A; border-color: rgba(245, 239, 224, 0.2); color: rgba(245, 239, 224, 0.75); }
html.dark .page-btn:hover { background: rgba(245, 239, 224, 0.08); }

/* 아티클 모달 */
html.dark .nm-card { background: #1A1A1A; border: 1px solid rgba(245, 239, 224, 0.14); }
html.dark .nm-header { background: #1A1A1A; border-bottom-color: rgba(245, 239, 224, 0.14); }
html.dark .nm-title { color: #F5EFE0; }
html.dark .nm-close { background: rgba(245, 239, 224, 0.1); color: rgba(245, 239, 224, 0.75); }
html.dark .nm-close:hover { background: rgba(245, 239, 224, 0.18); color: #F5EFE0; }
html.dark .nm-ext { background: rgba(245, 239, 224, 0.14); color: #F5EFE0; }
html.dark .nm-ext:hover { background: rgba(245, 239, 224, 0.22); }
html.dark .nm-iframe,
html.dark .nm-iframe-fixed { background: #1A1A1A; }
html.dark body.iframe-mode { background: #1A1A1A; }

/* 모바일 상단 메뉴바 다크모드 (원본이 !important라 여기도 필요) */
@media (max-width: 720px) {
  html.dark .sidebar-left {
    background: #1A1A1A !important;
    box-shadow: 0 1px 6px rgba(0,0,0,0.6) !important;
    border-top: none !important;
    border-bottom: 1px solid rgba(245, 239, 224, 0.1) !important;
  }
}

/* ============ 폰트 전환 (명조 ⇄ 고딕) ============ */
/* 토글 버튼은 navbar의 #fontModeBtn, 선택은 localStorage('bolt-font')에 저장.
   본문 font-family가 곳곳에 'MaruBuri' !important로 박혀 있어서,
   여기(파일 끝)에 같은 !important + 더 높은 specificity로 덮어쓴다.
   고딕은 NanumGothic 웹폰트(skin.html에서 로드) - 모든 기기 동일 렌더링.
   웹폰트 로드 실패 시 맑은고딕/시스템 고딕 폴백. */
html.font-gothic body,
html.font-gothic body *,
/* 아래: 댓글/방명록/티스토리 위젯(.tt-*)은 명조 규칙의 specificity가 더 높아서
   (예: .post-comments input[type="submit"]) 위 blanket만으로는 못 이김 → 동급 이상으로 재지정 */
html.font-gothic .post-comments *,
html.font-gothic .guest-section *,
html.font-gothic [class^="tt-"], html.font-gothic [class*=" tt-"],
html.font-gothic [class^="tt-"] *, html.font-gothic [class*=" tt-"] * {
  font-family: 'NanumGothic', 'Malgun Gothic', sans-serif !important;
}

/* 예외: 로고는 Space Grotesk 유지 (브랜드 아이덴티티) */
html.font-gothic .nav-logo-name {
  font-family: 'MaruBuri', Georgia, serif !important;
}

html.font-gothic .nav-logo-name-gradient,
html.font-gothic svg text {
  font-family: 'Space Grotesk', 'Noto Sans KR', sans-serif !important;
}

/* 토글 버튼: 현재 적용 중인 폰트로 "가"를 보여줘서 상태를 드러냄 */
.nav-font-btn {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 1px solid #ccc;
  background: transparent;
  color: #888;
  font-size: 14px;
  font-weight: 700;
  font-family: 'MaruBuri', Georgia, serif;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.2s, border-color 0.2s;
}
.nav-font-btn:hover {
  color: #000;
  border-color: #000;
}
html.font-gothic .nav-font-btn {
  color: #000;
  border-color: #000;
}
/* 2026-07-28: navbar가 더 이상 진초록이 아니라 사이트 공통 다크 배경(#1A1A1A)이라
   버튼 색도 크림색 계열로 통일 */
html.dark .nav-font-btn { border-color: rgba(245, 239, 224, 0.4); color: rgba(245, 239, 224, 0.75); }
html.dark .nav-font-btn:hover { color: #F5EFE0; border-color: #F5EFE0; }
html.dark.font-gothic .nav-font-btn { color: #F5EFE0; border-color: #F5EFE0; }

/* ============ full-width 페이지(오늘의 온도 등) ============ */
html.full-width-page .sidebar-right,
body#tt-body-page .sidebar-right { display: none; }

/* ============ 2026-07 IA 재개편: 7개 1차 메뉴 + 고정형 2차 메뉴 ============ */
.sidebar-left .card.nav-menu,
.sidebar-left .nav-menu {
  display: flex;
  flex-direction: column;
  padding: 0 14px;
  overflow: visible;
}
.sidebar-left .nav-primary-row {
  height: 48px;
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.sidebar-left .nav-primary-row::-webkit-scrollbar,
.sidebar-left .nav-secondary-inner::-webkit-scrollbar { display: none; }
.sidebar-left .nav-primary-item {
  flex: 0 0 auto;
  height: 48px;
  padding: 0 18px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: #51555c;
  font-weight: 400;
}
.sidebar-left .nav-primary-item:hover { background: rgba(23, 23, 23, .03); }
.sidebar-left .nav-primary-item.nav-item-active {
  border-bottom-color: #171717;
  color: #171717;
  font-weight: 600;
}
.sidebar-left .nav-primary-item .nav-item-label {
  color: inherit;
  font-weight: inherit;
}
.sidebar-left .nav-secondary-row {
  height: 44px;
  margin: 0 -14px;
  border-top: 1px solid #ececed;
  border-bottom: 1px solid #ececed;
  background: rgb(253, 253, 247);
}
.sidebar-left .nav-secondary-inner {
  height: 100%;
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0 18px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.sidebar-left .nav-secondary-item {
  flex: 0 0 auto;
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  border-bottom: 2px solid transparent;
  color: #A8ADB5;
  font-size: 13px;
  font-weight: 400;
  white-space: nowrap;
}
.sidebar-left .nav-secondary-item:hover,
.sidebar-left .nav-secondary-item:focus-visible {
  color: rgba(23, 23, 23, .72);
  outline: none;
}
.sidebar-left .nav-secondary-item.active {
  color: #171717;
  font-weight: 600;
  border-bottom-color: #171717;
}
.sidebar-left .nav-secondary-separator {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  height: 44px;
  color: #D8DADD;
  font-size: 12px;
  font-weight: 400;
}
.sidebar-left .nav-item:focus-visible,
.nav-icon-btn:focus-visible {
  outline: 2px solid #315b43;
  outline-offset: -2px;
}
html.dark .sidebar-left .nav-primary-item { color: rgba(245, 239, 224, .58) !important; }
html.dark .sidebar-left .nav-primary-item.nav-item-active {
  color: #F5EFE0 !important;
  border-bottom-color: #F5EFE0 !important;
}
html.dark .sidebar-left .nav-secondary-row {
  background: #1A1A1A !important;
  border-color: rgba(245, 239, 224, .12) !important;
}
html.dark .sidebar-left .nav-secondary-item { color: rgba(245, 239, 224, .48) !important; }
html.dark .sidebar-left .nav-secondary-item.active {
  color: #F5EFE0 !important;
  border-bottom-color: #F5EFE0 !important;
}
html.dark .sidebar-left .nav-secondary-separator { color: rgba(245, 239, 224, .18) !important; }

@media (max-width: 720px) {
  .sidebar-left { height: var(--topbar-height) !important; overflow: visible !important; }
  .sidebar-left .nav-menu {
    padding: 0;
    overflow: visible;
  }
  .sidebar-left .nav-primary-row { padding: 0 8px; }
  .sidebar-left .nav-primary-item { padding: 0 12px; }
  .sidebar-left .nav-primary-item .nav-item-label { font-size: 13.5px; }
  .sidebar-left .nav-secondary-row { margin: 0; }
  .sidebar-left .nav-secondary-inner { padding: 0 8px; }
  .sidebar-left .nav-secondary-item { padding: 0 12px; }
}
/* 2026-08-05: 카테고리 글목록(마켓 브리핑 등)에서 우측 "실시간 랭킹" 위젯을 없애달라는
   요청으로, 카테고리 화면만 예외로 우측 사이드바를 강제로 띄우던 규칙을 삭제함.
   이제 위 skin.html head 스크립트의 원래 의도(우측 사이드바는 전체글 "/"에서만 노출)
   그대로 3523행 `html.full-width-page .sidebar-right { display: none; }` 일반 규칙을 탄다.
   #sidebar-rank DOM 자체와 js/sidebar-rank.js는 홈 대시보드(오늘의 시장판 카드)가 그대로
   재사용하므로 삭제하지 않음 - js/sidebar-rank.js 쪽에서 홈이 아닌 화면에서는 아예
   초기화(폴링)하지 않도록 별도로 막아둠. */

/* 번개 로고: 실제로 내리치듯 한 주기 안에서 두 번 번쩍하고 잠깐 쉬는 패턴을 반복
   (아이콘 자체가 주황/노랑 그라디언트라 글로우도 같은 톤으로 맞춤) */
@keyframes bolt-strike {
  0%, 46%, 100% { opacity: 0.75; filter: drop-shadow(0 0 3px rgba(255,180,90,0.55)); }
  4%   { opacity: 1; filter: drop-shadow(0 0 8px rgba(255,180,90,0.9)) drop-shadow(0 0 16px rgba(255,140,60,0.55)); }
  8%   { opacity: 0.75; filter: drop-shadow(0 0 3px rgba(255,180,90,0.55)); }
  11%  { opacity: 1; filter: drop-shadow(0 0 10px rgba(255,180,90,1)) drop-shadow(0 0 20px rgba(255,140,60,0.65)); }
  15%  { opacity: 0.75; filter: drop-shadow(0 0 3px rgba(255,180,90,0.55)); }
}
/* 모바일(28~30px)에서는 위 글로우 블러가 통 모양의 가는 선을 뭉개서 얼룩처럼 보이므로
   블러 반경을 절반 이하로 줄인 전용 애니메이션을 사용 */
@keyframes bolt-strike-mobile {
  0%, 46%, 100% { opacity: 0.85; filter: drop-shadow(0 0 1px rgba(255,180,90,0.5)); }
  4%   { opacity: 1; filter: drop-shadow(0 0 3px rgba(255,180,90,0.9)); }
  8%   { opacity: 0.85; filter: drop-shadow(0 0 1px rgba(255,180,90,0.5)); }
  11%  { opacity: 1; filter: drop-shadow(0 0 4px rgba(255,180,90,1)); }
  15%  { opacity: 0.85; filter: drop-shadow(0 0 1px rgba(255,180,90,0.5)); }
}
.nav-logo-emblem {
  display: flex; align-items: center; justify-content: center;
  /* .nav-bolt 자체의 filter는 번개 애니메이션이 매 프레임 덮어쓰므로 바깥 wrapper에서
     테마별 색을 적용한다. 라이트는 검정, 다크는 아래 html.dark 규칙에서 크림색으로 전환. */
  filter: brightness(0);
}
html.dark .nav-logo-emblem { filter: brightness(0) invert(1); }
.nav-bolt {
  animation: bolt-strike 3.6s ease-in-out infinite;
}
@media (max-width: 720px) {
  /* 모바일에서는 위 bolt-strike 대신 블러가 절제된 버전 사용 (파일 뒤쪽에 둬서 캐스케이드로 확실히 덮어씀) */
  .nav-bolt { animation-name: bolt-strike-mobile; }
}
.nav-logo-name-gradient {
  font-family: 'Space Grotesk', 'Noto Sans KR', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #ffffff;
  letter-spacing: -0.5px;
}