:root {
  --bg: #FFFFFF;
  --bg-section: #F7F8FA;   /* 토스증권풍 라이트 그레이 카드 */
  --bg-hover: #F0F2F5;
  --text: #191F28;
  --text-sub: #6B7684;
  --brand: #39C5BB;        /* 미쿠 민트 — 최소 사용 */
  --brand-dark: #2BA79E;
  --brand-tint: #EAF9F8;
  --miku-pink: #E12885;    /* 미쿠 마젠타 — 포인트 전용 (LIVE 도트, 리본) */
  --up: #F04452;
  --down: #3182F6;
  --border: #E7EBF0;
  --radius-card: 16px;
  --radius-btn: 12px;
  --radius-input: 10px;
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  /* 라틴·숫자는 Inter, 한글은 Pretendard(Inter 기반 한글 확장) — 금융 데이터 표준 조합 */
  font-family: 'Inter Variable', Inter, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI',
    'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  /* 시세·점수 등 숫자 정렬 (tabular figures) — 금융 사이트 전문성의 핵심 디테일 */
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'cv05' 1;
}
::selection { background: var(--brand-tint); }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }
/* 입력 요소는 반드시 16px 이상 — iOS 사파리가 16px 미만 입력 포커스 시 화면을 자동 확대한다 (CLAUDE.md 정책) */
input, textarea, select { font: inherit; font-size: 16px; }
/* 동작 줄이기 기기에서도 애니메이션을 생략하지 않는다 — 모든 기기 동일 이펙트 (CLAUDE.md 정책) */

/* 페이지 간 부드러운 전환 (View Transitions — iOS 18+/Chrome, 미지원 브라우저는 기존 동작) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation-duration: 160ms; }
::view-transition-new(root) { animation-duration: 160ms; }
/* 글 상세로 진입할 때만 오른쪽에서 밀려 들어온다 (뒤로가기는 기본 페이드) */
html[data-page="post"]::view-transition-new(root) {
  animation: slideFromRight 260ms cubic-bezier(0.32, 0.72, 0, 1) both;
}
html[data-page="post"]::view-transition-old(root) {
  animation: fadeToLeft 260ms cubic-bezier(0.32, 0.72, 0, 1) both;
}
@keyframes slideFromRight { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes fadeToLeft { from { transform: translateX(0); opacity: 1; } to { transform: translateX(-18%); opacity: 0.5; } }

/* ── 앱 셸: 레딧식 3컬럼 그리드 ── */
.shell { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 1248px; margin: 0 auto; padding: 0 16px; gap: 24px; }
.leftnav { display: none; }
.rightbar { display: none; }
@media (min-width: 960px) {
  .shell { grid-template-columns: minmax(0, 1fr) 312px; }
  .rightbar { display: block; padding-top: 20px; }
}
@media (min-width: 1200px) {
  .shell { grid-template-columns: 240px minmax(0, 1fr) 312px; }
  .leftnav { display: block; padding-top: 12px; }
}
.main-col { min-width: 0; padding-bottom: 48px; }

/* ── 헤더: 햄버거 · 로고 · 검색 · 계정 (+미쿠 리본 그라디언트) ── */
.header { position: sticky; top: 0; z-index: 10; background: rgba(255,255,255,0.85); -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%); border-bottom: 1px solid var(--border); }
.header-inner { display: flex; align-items: center; gap: 12px; height: 56px; max-width: 1248px; margin: 0 auto; padding: 0 16px; }
.hamburger {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; min-height: 40px; border-radius: 999px; color: var(--text);
  transition: background 150ms ease; flex-shrink: 0;
}
.hamburger { position: relative; }
.hamburger::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); width: 44px; height: 44px;
}
.hamburger:hover { background: var(--bg-section); }
.mobile-search-link { display: none; }
@media (max-width: 639px) {
  .mobile-search-link {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; min-height: 40px; border-radius: 999px; color: var(--text);
  }
  .mobile-search-link:hover { background: var(--bg-section); }
}
@media (max-width: 519px) { .header-nav .nick { display: none; } }

/* ── 드로어 (햄버거 메뉴): 슬라이드 패널 + 백드롭 ── */
.drawer-backdrop {
  position: fixed; inset: 0; z-index: 40; background: rgba(25,31,40,0.45);
  opacity: 0; pointer-events: none; transition: opacity 200ms ease;
}
.drawer {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 41; width: 296px; max-width: 85vw;
  background: rgba(255,255,255,0.82);
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 4px 0 24px rgba(25,31,40,0.12);
  transform: translateX(-102%); transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
  display: flex; flex-direction: column; overflow-y: auto; padding: 12px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  scrollbar-width: none;
}
body.drawer-open .drawer { transform: translateX(0); }
body.drawer-open .drawer-backdrop { opacity: 1; pointer-events: auto; }
body.drawer-open { overflow: hidden; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 12px; }
.drawer-close { position: relative; min-width: 40px; min-height: 40px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; }
.drawer-close::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); width: max(100%, 44px); height: 44px;
}
.drawer-close:hover { background: var(--bg-section); }
.drawer .nav-item { min-height: 44px; }
.drawer-sec { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 8px; }
.logo { display: flex; align-items: center; gap: 8px; min-height: 44px; flex-shrink: 0; }
.logo svg { display: block; }
.logo-word { display: inline-flex; }
.header-search { flex: 1; max-width: 560px; margin: 0 auto; }
.search-wrap { position: relative; }
.search-wrap input { padding-right: 38px; }
.search-clear {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  min-width: 28px; min-height: 28px; border-radius: 50%; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center; color: var(--text-sub);
}
.search-clear:hover { background: var(--bg-hover); color: var(--text); }
.search-clear[hidden] { display: none; }
/* ── 타이프어헤드 드롭다운 (WAI-ARIA combobox) ── */
.ta-panel {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-card);
  box-shadow: 0 8px 28px rgba(25,31,40,0.12); overflow: hidden; max-height: 70vh; overflow-y: auto;
}
.ta-panel[hidden] { display: none; }
.ta-group { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: var(--text-sub); padding: 10px 14px 4px; }
/* 긴 이름은 행을 좌우로 밀어서(스와이프) 끝까지 볼 수 있다 */
.ta-item {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 14px;
  cursor: pointer; font-size: 14px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
}
.ta-item::-webkit-scrollbar { display: none; }
.ta-item .slogo-wrap, .ta-item .slogo { flex-shrink: 0; }
.ta-item .ta-main { flex: 0 0 auto; white-space: nowrap; }
.ta-item .ta-sub { font-size: 12px; color: var(--text-sub); flex: 0 0 auto; white-space: nowrap; padding-right: 8px; }
.ta-item b { color: var(--brand-dark); font-weight: 800; }
.ta-item[aria-selected="true"], .ta-item:hover { background: var(--bg-section); }
.ta-empty { padding: 14px; font-size: 13px; color: var(--text-sub); text-align: center; }
.ta-footer { display: block; padding: 10px 14px; font-size: 13px; font-weight: 600; color: var(--brand-dark); border-top: 1px solid var(--border); cursor: pointer; }
.ta-footer[aria-selected="true"], .ta-footer:hover { background: var(--bg-section); }
.header-search input {
  width: 100%; min-height: 40px; padding: 0 18px;
  border: 1px solid transparent; border-radius: 999px;
  background: var(--bg-section); font-size: 16px; color: var(--text);
  transition: border-color 200ms ease, background 200ms ease;
}
.header-search input:hover { background: var(--bg-hover); }
.header-search input:focus { outline: none; background: var(--bg); border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.header-search input::placeholder { color: var(--text-sub); }
/* 검색 알약 안의 로고 (레딧이 스누를 넣은 자리) — 피드 상단에서만 보인다 */
.hs-logo { display: none; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.hs-logo svg { display: block; }
.header-nav { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; }
.header-nav .nick { font-size: 13px; color: var(--text-sub); }
.header-nav:empty { display: none; }
/* .icon-btn 이 뒤에 선언돼 있어 같은 특이도로는 덮이지 않는다 — 한 단계 올린다 */
.header-inner .header-write { flex-shrink: 0; min-width: 44px; min-height: 44px; }
/*
 * 홈·라운지·투데이 = 레딧식 상단: 햄버거 · 넓은 검색 알약(로고 포함) · 글쓰기 +.
 * 로고는 알약 안으로 들어가므로 왼쪽 로고 링크는 숨긴다.
 */
.header-feed .logo { display: none; }
.header-feed .mobile-search-link { display: none; }
.header-feed .header-search { display: block; margin: 0; }
.header-feed .hs-logo { display: inline-flex; }
.header-feed .header-search input { padding-left: 40px; }
.header-feed .header-nav { margin-left: 0; }
@media (max-width: 639px) {
  .header-inner { gap: 8px; padding: 0 12px; }
  .header-search { display: none; }
  .header-nav { gap: 6px; }
  .header-nav .btn-sm { min-height: 34px; padding: 0 10px; font-size: 12px; }
}
@media (max-width: 399px) {
  .logo-word { display: none; } /* 로고는 심볼만 */
  .header-inner { gap: 6px; }
}

/* ── 좌측 내비 (레딧 Communities) ── */
.leftnav nav { position: sticky; top: 68px; scrollbar-width: none; }
.leftnav nav::-webkit-scrollbar, .drawer::-webkit-scrollbar, .drawer-inner::-webkit-scrollbar { display: none; }
.nav-item {
  display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px;
  border-radius: var(--radius-btn); font-size: 14px; font-weight: 500;
  transition: background 150ms ease;
}
.nav-item:hover { background: var(--bg-section); }
.nav-item.active { background: var(--bg-section); font-weight: 700; }
.nav-item svg { flex-shrink: 0; }
.nav-title { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: var(--text-sub); text-transform: uppercase; padding: 16px 12px 6px; }
/* 접히는 묶음 (레딧 드로어) — summary 기본 삼각형은 지우고 오른쪽 캐럿을 쓴다 */
.nav-sec > summary.nav-title {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  cursor: pointer; list-style: none; border-radius: 10px; padding: 10px 12px 8px; margin-top: 8px;
  transition: background 150ms ease; -webkit-tap-highlight-color: transparent;
}
.nav-sec > summary.nav-title::-webkit-details-marker { display: none; }
.nav-sec > summary.nav-title:hover { background: var(--bg-section); }
.nav-caret { display: inline-flex; color: var(--text-sub); transition: transform 200ms ease; }
.nav-sec[open] > summary .nav-caret { transform: rotate(180deg); }
/*
 * 라운지 한 줄 = 링크 + 즐겨찾기 별 (레딧 즐겨찾기).
 * 꺼진 별은 '누를 수 있다'가 보여야 하므로 보조 텍스트 색을 쓴다 —
 * 예전엔 --border(#E5E8EB) 라 흰 배경에서 사실상 안 보였고, 모바일엔 hover 도 없다.
 */
.nav-row { display: flex; align-items: center; }
.nav-row .nav-item { flex: 1; min-width: 0; }
.nav-star {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex-shrink: 0; border: none; background: none;
  border-radius: 50%; color: var(--text-sub); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 200ms ease, background 150ms ease;
}
.nav-star:hover { background: var(--bg-section); color: var(--text); }
.nav-star.on, .fav-btn.on { color: #F5A623; }
/* 라운지 헤더의 즐겨찾기 별 — .icon-btn 이 뒤에 선언돼 있어 한 단계 올려야 색이 먹는다 */
.icon-btn.fav-btn { color: var(--text-sub); }
.icon-btn.fav-btn.on { color: #F5A623; }

/*
 * 토글 모션 (CLAUDE.md §8): stroke→fill 전환 + scale 0.8→1.15→1 스프링.
 * fill 은 none 에서 색으로 보간되지 않으므로 꺼진 상태를 transparent 로 둔다.
 */
.nav-star svg path, .fav-btn svg path { fill: transparent; transition: fill 220ms ease; }
.nav-star.on svg path, .fav-btn.on svg path { fill: currentColor; }
.nav-star svg, .fav-btn svg { transition: transform 200ms ease; }
.nav-star:active svg, .fav-btn:active svg { transform: scale(0.86); }
@keyframes starPop {
  0% { transform: scale(0.8) rotate(-16deg); }
  55% { transform: scale(1.15) rotate(7deg); }
  100% { transform: scale(1) rotate(0); }
}
/* 켤 때만 노란 파문이 한 번 퍼진다 (끌 때는 조용히) */
@keyframes starRipple {
  from { box-shadow: 0 0 0 0 rgba(245, 166, 35, 0.4); }
  to { box-shadow: 0 0 0 15px rgba(245, 166, 35, 0); }
}
.nav-star.pop svg, .fav-btn.pop svg { animation: starPop 340ms var(--spring); }
.nav-star.pop.on, .fav-btn.pop.on { animation: starRipple 520ms ease-out; }
.nav-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.nav-name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-sub { font-size: 11px; font-weight: 400; color: var(--text-sub); }

/* US 종목: 티커 약어 중심 + 풀네임 보조 표기 */
.sname-sub { font-size: 11px; font-weight: 400; color: var(--text-sub); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── 종목 로고 (토스증권 스타일 원형) + 특성별 폴백 ── */
.slogo-wrap { position: relative; display: inline-flex; flex-shrink: 0; vertical-align: middle; }
.slogo-wrap .slogo { position: absolute; inset: 0; width: 100%; height: 100%; }
.slogo { border-radius: 50%; object-fit: cover; background: var(--bg-section); flex-shrink: 0; display: inline-block; vertical-align: middle; }
.slogo-fb {
  width: 100%; height: 100%; border-radius: 50%;
  background: var(--bg-section); color: var(--text-sub);
  display: inline-flex; align-items: center; justify-content: center;
}

/* ── 커뮤니티(종목) 아바타 ── */
.savatar {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  border-radius: 50%; color: #fff; font-weight: 800; overflow: hidden; line-height: 1;
}

/* ── 피드: 레딧식 글 카드 ── */
.feed { display: flex; flex-direction: column; }
.post-card { position: relative; padding: 8px 8px 4px; border-radius: var(--radius-card); transition: background 150ms ease; border-bottom: 1px solid var(--border); }
.post-card:hover { background: var(--bg-section); }
/* 읽음 상태: 본 글은 회색 점, 새 글은 빨간 점 (배경 변화 없음) */
.post-card.seen::before,
.post-card.unseen::before {
  content: ''; position: absolute; top: 14px; left: -3px;
  width: 7px; height: 7px; border-radius: 50%;
}
.post-card.seen::before { background: #C4CAD4; }
.post-card.unseen::before { background: var(--up); }
.post-card .meta-line { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-sub); flex-wrap: wrap; }
.post-card .meta-line .sname { font-weight: 700; color: var(--text); }
.post-card .meta-line .sname:hover { color: var(--brand-dark); }
/* 제목은 볼드 없이, 최대 3줄까지만 (넘치면 말줄임) */
.post-card .card-title {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3;
  overflow: hidden; font-size: 17px; font-weight: 400; letter-spacing: -0.01em;
  margin: 6px 0 4px; line-height: 1.35;
}
.post-card .card-title:hover { color: var(--brand-dark); }
.post-card .card-actions { display: flex; align-items: center; gap: 8px; padding: 4px 0 6px; }

/*
 * ── 탭 영역 확장 ──
 * 터치 타깃 최소 44px (§8). 다만 알약·투표 버튼을 44px 로 키우면 피드 카드가 세로로
 * 길어져 한 화면에 보이는 글 수가 줄어든다. 그래서 **보이는 크기는 그대로 두고
 * 눌리는 영역만** 투명 ::after 로 넓힌다.
 * 위아래로만 넓히는 게 기본이고, 가로까지 넓혀야 하는 것(투표 버튼)은 개별 지정한다.
 */
.tap44 { position: relative; }
.tap44::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); width: max(100%, 44px); height: 44px;
}

/* 액션 알약 (투표/댓글/공유) */
.pill {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px;
  border-radius: 999px; background: var(--bg-section); font-size: 13px; font-weight: 600; color: var(--text-sub);
  transition: background 150ms ease, color 150ms ease;
}
.pill::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); width: max(100%, 44px); height: 44px;
}
a.pill:hover, button.pill:hover { background: var(--bg-hover); color: var(--text); }
.pill svg { fill: none; stroke: currentColor; stroke-width: 1.8; }

/* 투표 알약: ⬆ 점수 ⬇ */
.vote-group { display: inline-flex; align-items: center; border-radius: 999px; background: var(--bg-section); min-height: 34px; }
.vote-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; min-height: 34px; border-radius: 999px;
  color: var(--text-sub); transition: color 150ms ease, background 150ms ease;
}
/*
 * 추천/비추는 세로 44px 을 확보하고 가로는 그룹 폭이 허락하는 만큼만 넓힌다.
 * 그룹이 74~86px 이라 좌우를 각각 44px 로 잡으면 두 영역이 겹치는데,
 * 겹치면 반대 버튼이 눌리는 최악의 오작동이 된다 — 폭 40px 이 겹침보다 낫다.
 * (실측: 그룹 중앙점은 어느 버튼에도 속하지 않는다 = 겹침 없음)
 */
.vote-btn::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); width: max(100%, 40px); height: 44px;
}
.vote-btn:hover { background: var(--bg-hover); color: var(--up); }
.vote-btn[data-value="-1"]:hover { color: var(--down); }
.vote-btn svg { fill: none; stroke: currentColor; stroke-width: 2; transition: fill 200ms ease; }
.vote-btn.on { color: var(--up); }
.vote-btn.on svg { fill: currentColor; }
.vote-btn[data-value="-1"].on { color: var(--down); }
.vote-btn.pop svg { animation: votePop 300ms var(--spring); }
@keyframes votePop { 0% { transform: scale(0.8); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
.vote-count { font-size: 13px; font-weight: 700; min-width: 18px; text-align: center; overflow: hidden; color: var(--text); }
.vote-count .num { display: inline-block; }
.vote-count .num.slide-up { animation: slideUp 200ms ease; }
.vote-count .num.slide-down { animation: slideDown 200ms ease; }
@keyframes slideUp { from { transform: translateY(60%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes slideDown { from { transform: translateY(-60%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ── 정렬 알약 (핫/신규/톱) ── */
.tabs { display: flex; gap: 6px; margin: 12px 0 8px; }
.tab {
  min-height: 34px; padding: 0 14px; display: inline-flex; align-items: center;
  border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--text-sub);
  transition: background 150ms ease, color 150ms ease;
}
.tab:hover { background: var(--bg-section); }
.tab.active { color: #fff; background: var(--text); }

/* ── 우측 사이드바 카드 (About Community / Popular Communities) ── */
.sidecard { background: var(--bg-section); border-radius: var(--radius-card); padding: 16px; margin-bottom: 16px; }
.sidecard h3 { font-size: 13px; font-weight: 700; color: var(--text-sub); letter-spacing: 0.04em; margin-bottom: 12px; }
.sidecard .siderow { display: flex; align-items: center; gap: 10px; min-height: 44px; border-radius: var(--radius-btn); padding: 0 8px; margin: 0 -8px; }
.sidecard .siderow:hover { background: var(--bg-hover); }
.sidecard .siderow .rname { font-size: 14px; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidecard .siderow .rsub { font-size: 12px; color: var(--text-sub); }
.sidecard .stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 8px 0 12px; }
.sidecard .stat-grid .stat b { display: block; font-size: 17px; }
.sidecard .stat-grid .stat span { font-size: 12px; color: var(--text-sub); }

/* ── EOD 시세 스파크라인 ── */
.price-line { display: flex; align-items: center; gap: 8px; min-height: 30px; flex-wrap: wrap; row-gap: 0; }
.price-line[hidden] { display: none; }
.spark { display: block; flex-shrink: 0; }
.spark-price { font-size: 15px; font-weight: 800; }
.spark-chg { font-size: 12px; font-weight: 700; }
.price-eod { font-size: 10px; color: var(--text-sub); }

/* 홈: 팔로우한 라운지 시세 카드 스트립 */
.watch-strip { display: flex; gap: 8px; overflow-x: auto; padding: 12px 0 4px; scrollbar-width: none; }
.watch-strip::-webkit-scrollbar { display: none; }
.watch-card {
  display: flex; flex-direction: column; gap: 3px; flex-shrink: 0;
  width: 124px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 12px;
  transition: border-color 200ms ease;
}
.watch-card:hover { border-color: var(--brand); }
.watch-card .wc-name { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; min-width: 0; }
.watch-card .wc-nm { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.watch-card .price-line { flex-direction: column; align-items: flex-start; gap: 1px; min-height: 58px; }
.watch-card .spark-price { font-size: 13px; }
.watch-card .spark-chg { font-size: 11px; }
.watch-more {
  align-items: center; justify-content: center; text-align: center;
  font-size: 12px; font-weight: 700; color: var(--text-sub); line-height: 1.4;
}
/* 프로필 '라운지' 탭: 홈 스트립과 같은 카드를 가로 스크롤 대신 격자로 편다 */
.lounge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); gap: 8px; }
.lounge-grid .watch-card { width: auto; }

/* 팔로우 중 상태: 회색 처리로 '이미 팔로우함'을 명확히 */
.follow-btn.following {
  background: var(--bg-hover); color: var(--text-sub);
  border: 1px solid var(--border);
}
.follow-btn.following:hover { background: #E4E8EC; color: var(--text); }

/* ── 커뮤니티(종목) 헤더 ── */
.community-head { display: flex; align-items: center; gap: 12px; margin: 20px 0 4px; }
.community-head .cinfo { flex: 1; min-width: 0; }
.community-head h1 { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.community-head .csub { font-size: 13px; color: var(--text-sub); }

/* ── 라운지 헤더 (레딧 서브레딧 헤더식) ── */
.community-head2 { margin: 16px 0 4px; }
.ch-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ch-info { flex: 1; min-width: 140px; }
.ch-info h1 { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.ch-stats { font-size: 12px; color: var(--text-sub); margin-top: 1px; }
.ch-desc { font-size: 13px; color: var(--text-sub); margin-top: 8px; }
.icon-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; min-height: 38px; border-radius: 50%;
  background: var(--bg-section); color: var(--text);
  transition: background 200ms ease, color 200ms ease, transform 200ms ease;
  -webkit-tap-highlight-color: transparent;
}
.icon-btn::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); width: 44px; height: 44px;
}
.icon-btn:hover { background: var(--bg-hover); }
.icon-btn:active { transform: scale(0.9); }

/* ── 하단 탭바 (모바일): 레딧식 플로팅 반투명 알약 + 스크롤 자동 접힘 ── */
.bottombar {
  position: fixed; left: 10px; right: 10px; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 20;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: rgba(255,255,255,0.72);
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(231,235,240,0.85); border-radius: 999px;
  box-shadow: 0 8px 24px rgba(25,31,40,0.10);
  transition: transform 280ms var(--spring), opacity 200ms ease;
}
.bb-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-height: 54px; margin: 4px 3px; border-radius: 999px;
  font-size: 11px; font-weight: 600; color: var(--text-sub);
  background: transparent;
  transition: color 200ms ease, background-color 200ms ease, transform 200ms ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation; /* 더블탭 줌 대기 제거 — 탭 반응 즉시 */
}
.bb-item svg { fill: none; stroke: currentColor; stroke-width: 1.8; transition: stroke-width 200ms ease; }
.bb-icon { display: inline-flex; align-items: center; justify-content: center; height: 24px; }
/* 현재 탭: 아이콘+텍스트 전체를 감싸는 음영 (레딧 방식) */
.bb-item.active { color: var(--text); background: var(--bg-hover); }
.bb-item.active svg { stroke-width: 2.3; }
.bb-item:active { color: var(--text); background: var(--bg-hover); transform: scale(0.94); transition-duration: 80ms; }
/* 스크롤 다운 → 바는 내려가고 미니 홈 버튼으로 접힘 (레딧 동작) */
body.bb-collapsed .bottombar { transform: translateY(calc(100% + 24px + env(safe-area-inset-bottom))); opacity: 0; pointer-events: none; }
.bb-mini {
  position: fixed; left: 16px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 21;
  width: 54px; height: 54px; border-radius: 50%;
  background: rgba(255,255,255,0.8);
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(231,235,240,0.85); box-shadow: 0 8px 24px rgba(25,31,40,0.14);
  display: inline-flex; align-items: center; justify-content: center; color: var(--text);
  transform: scale(0); transition: transform 280ms var(--spring); pointer-events: none;
}
.bb-mini svg { fill: none; stroke: currentColor; stroke-width: 2; }
body.bb-collapsed .bb-mini { transform: scale(1); pointer-events: auto; }
@media (min-width: 960px) { .bottombar, .bb-mini { display: none; } }
@media (max-width: 959px) {
  .main-col { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .footer { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
}

/* 카드 이미지 미리보기 — 본문에 그림이 있으면 한 장만 얹는다 (만화·이미지 글) */
.card-img-wrap {
  display: block; margin-top: 8px; border-radius: 12px; overflow: hidden;
  background: var(--bg-section); border: 1px solid var(--border);
}
.card-img {
  display: block; width: 100%; aspect-ratio: 3 / 2; max-height: 320px;
  object-fit: cover;
  /* 위쪽을 남긴다 — 만화 말풍선이 위에 있어 아래를 잘라야 내용이 살아난다 */
  object-position: center top;
  transition: transform 300ms var(--spring);
}
.card-img-wrap:hover .card-img { transform: scale(1.02); }

/* ── 하단 탭바 안읽음 배지 ── */
.bb-badge {
  position: absolute; top: 6px; left: calc(50% + 4px);
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--up); color: #fff; font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ── 다이렉트 메시지 (인스타 DM 스타일) ── */
.dm-list { display: flex; flex-direction: column; }
.dm-row { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px; border-radius: var(--radius-card); transition: background 150ms ease; }
.dm-row:hover { background: var(--bg-section); }
.dm-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.dm-name { font-weight: 700; font-size: 14px; }
.dm-preview { font-size: 13px; color: var(--text-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-row.unread .dm-preview { color: var(--text); font-weight: 600; }
.dm-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.dm-time { font-size: 11px; color: var(--text-sub); }
.dm-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
.dm-thread-head { display: flex; align-items: center; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--border); margin-top: 8px; }
/* 메시지는 위가 아니라 아래(입력칸 바로 위)에 붙는다 — 대화가 짧아도 허공에 뜨지 않게 */
.dm-thread { display: flex; flex-direction: column; gap: 2px; padding: 16px 0; }
.dm-thread > :first-child { margin-top: auto; }
/* 빈 대화 안내: 상대 프로필 + 시작 말풍선 */
.dm-intro { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 24px 0 8px; }
.dm-intro-av { display: inline-flex; }
.dm-intro-name { display: inline-flex; align-items: center; gap: 6px; font-size: 20px; font-weight: 800; margin-top: 12px; }
.dm-intro-sub { font-size: 13px; color: var(--text-sub); }
.dm-intro-hint { margin-top: 24px; padding: 12px 18px; border-radius: 18px; background: var(--brand-tint); color: var(--text); font-size: 14px; font-weight: 600; }
.dm-bubble-row { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 6px; }
.dm-bubble-row.mine { align-items: flex-end; }
.dm-bubble {
  max-width: 78%; padding: 8px 14px; border-radius: 18px; font-size: 14px;
  background: var(--bg-section); color: var(--text); white-space: pre-wrap; word-break: break-word;
  animation: bubbleIn 250ms var(--spring) both;
}
.dm-bubble-row.mine .dm-bubble { background: var(--brand); color: #fff; }
@keyframes bubbleIn { from { transform: scale(0.9) translateY(4px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }
.dm-bubble-time { font-size: 10px; color: var(--text-sub); margin: 2px 6px 0; }
/* 메시지 입력: 화면 하단 고정. 키보드가 올라오면 그 위로 따라 올라간다 (레딧·메신저 방식) */
.dm-input {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 22;
  display: flex; gap: 8px; align-items: flex-end;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--bg); border-top: 1px solid var(--border);
  max-width: 720px; margin: 0 auto;
  transition: transform 120ms ease;
}
/* 입력칸은 테두리 없는 평평한 필드 + 종이비행기 버튼 (내용이 있어야 활성) */
.dm-field {
  flex: 1; min-width: 0; border: none; outline: none; background: none; resize: none;
  font-family: inherit; font-size: 16px; line-height: 1.4; color: var(--text);
  padding: 12px 4px; max-height: 120px; overflow-y: auto;
}
.dm-field::placeholder { color: var(--text-sub); }
.dm-send {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex-shrink: 0; border: none; border-radius: 50%;
  background: none; color: var(--brand); cursor: pointer;
  transition: color 200ms ease, transform 200ms var(--spring);
}
.dm-send:disabled { color: var(--text-sub); opacity: 0.5; cursor: default; }
.dm-send:not(:disabled):active { transform: scale(0.88); }
/* 키보드가 올라오면 하단 내비는 숨긴다 (입력칸만 남는 메신저 동작) */
body.dm-typing .bottombar { transform: translateY(calc(100% + 24px + env(safe-area-inset-bottom))); opacity: 0; pointer-events: none; }
/*
 * 모바일 대화 화면은 **문서가 스크롤되지 않는다**. 메시지 영역만 내부 스크롤.
 * iOS 는 키보드가 뜰 때 문서를 밀어 올리는데, 그러면 sticky 헤더까지 화면 밖으로 나간다.
 * 문서를 못 움직이게 고정하고 스레드 높이를 visualViewport 에 맞춰 줄이는 방식으로 막는다.
 */
@media (max-width: 959px) {
  body.dm-page { overflow: hidden; }
  body.dm-page .main-col { padding-bottom: 0; }
  body.dm-page .dm-thread { overflow-y: auto; -webkit-overflow-scrolling: touch; }
}
@media (min-width: 960px) {
  .dm-input { left: auto; right: auto; position: sticky; bottom: 0; margin: 0; padding-left: 0; padding-right: 0; }
  body.dm-page .main-col { padding-bottom: 48px; }
  /* 대화가 짧아도 입력줄이 화면 중간에 뜨지 않게 스레드가 남는 높이를 채운다 */
  body.dm-page .dm-thread { min-height: calc(100vh - 300px); }
}

/* ── 계정 전환 목록 ── */
.acct-row { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px; border-radius: var(--radius-card); max-width: 400px; }
.acct-row:hover { background: var(--bg-section); }
.acct-row.active { background: var(--brand-tint); }
.acct-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.acct-name { font-weight: 700; font-size: 14px; }
.acct-sub { font-size: 12px; color: var(--text-sub); }

/* ── 프로필 (레딧식: 배너 + 오버랩 아바타 + 스탯 행) ── */
.profile-banner { height: 104px; border-radius: 0 0 var(--radius-card) var(--radius-card); margin-top: 8px; position: relative; }
.profile-banner.viewable, .profile-avatar.viewable { cursor: zoom-in; }
/* 사진 전체보기 라이트박스 */
.pv-overlay {
  position: fixed; inset: 0; z-index: 90; background: rgba(10,13,18,0.88);
  display: flex; align-items: center; justify-content: center; cursor: zoom-out;
  animation: obFade 180ms ease both;
}
.pv-overlay img { max-width: 94vw; max-height: 86vh; border-radius: 12px; object-fit: contain; animation: obPop 240ms var(--spring) both; }
.upload-hint {
  position: absolute; right: 10px; bottom: 8px;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; color: #fff;
  background: rgba(25,31,40,0.55); border-radius: 999px; padding: 5px 11px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background 200ms ease;
}
.upload-hint::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); width: max(100%, 44px); height: 44px;
}
.profile-banner.editable:hover .upload-hint, .profile-banner.editable:active .upload-hint { background: rgba(25,31,40,0.75); }
.profile-avatar { position: relative; }
/* 프로필 사진 변경 — 아바타 원 오른쪽 아래 카메라 버튼 */
.upload-badge {
  position: absolute; right: -2px; bottom: 2px;
  background: var(--text); color: #fff; border: 2.5px solid var(--bg); border-radius: 50%;
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(25,31,40,0.25); cursor: pointer;
  transition: transform 200ms var(--spring), background 150ms ease;
}
.upload-badge::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); width: max(100%, 44px); height: 44px;
}
.upload-badge:hover { background: #000; }
.upload-badge:active { transform: scale(0.9); }
.profile-head { padding: 0 4px; }
.profile-avatar { margin-top: -32px; margin-bottom: 8px; display: inline-block; }
.profile-avatar .savatar { border: 3px solid var(--bg); box-shadow: 0 2px 8px rgba(25,31,40,0.08); }
/*
 * 닉네임은 왼쪽, 액션은 오른쪽 한 줄. 자주 쓰는 것만 아이콘으로 남기고 나머지는 ⋯ 메뉴로.
 * (알약 버튼을 전부 늘어놓으면 두 줄로 흘러넘쳐 닉네임까지 밀려난다)
 */
.profile-idrow { display: flex; align-items: center; gap: 8px; }
.profile-id { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
/* 긴 닉네임(최대 12자)은 자르지 않고 줄바꿈한다 — 이름은 잘리면 안 되는 정보다 */
.profile-id h1 { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; word-break: break-word; }
@media (max-width: 480px) { .profile-id h1 { font-size: 20px; } }
/* 터치 타깃 44px (CLAUDE.md §8) — 헤더의 38px 아이콘 버튼보다 크게 잡는다 */
.profile-acts { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.profile-acts .icon-btn { position: relative; min-width: 44px; min-height: 44px; }
.profile-acts .btn-sm { flex-shrink: 0; min-height: 44px; }
.profile-edit { gap: 5px; }
/* 좁은 화면에선 '수정'도 아이콘만 — 닉네임(최대 12자)이 잘리지 않게 자리를 내준다 */
@media (max-width: 480px) {
  .profile-edit { min-width: 44px; padding: 0; border-radius: 50%; }
  .profile-edit span { display: none; }
}
.profile-bio { font-size: 13px; color: var(--text-sub); margin-top: 4px; }
/* 안읽은 메시지 수 — 아이콘 우상단 */
.ib-badge {
  position: absolute; top: -1px; right: -1px; min-width: 17px; height: 17px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--up); color: #fff;
  font-size: 10px; font-weight: 800; line-height: 1; border: 2px solid var(--bg);
}
/* ⋯ 더보기: 계정 전환·로그아웃 등 가끔 쓰는 항목 */
.pmenu-wrap { position: relative; display: inline-flex; }
.pmenu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 176px; padding: 6px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 10px 32px rgba(25,31,40,0.16);
  animation: pmenuIn 200ms var(--spring) both;
}
.pmenu[hidden] { display: none; }
.pmenu form { margin: 0; }
.pmenu a, .pmenu button {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 12px;
  border: none; background: none; border-radius: 10px;
  font-family: inherit; font-size: 14px; font-weight: 600; color: var(--text);
  text-align: left; cursor: pointer; white-space: nowrap;
}
.pmenu a:hover, .pmenu button:hover { background: var(--bg-section); }
.pmenu svg { flex-shrink: 0; color: var(--text-sub); }
.pmenu .danger, .pmenu .danger svg { color: var(--up); }
@keyframes pmenuIn { from { opacity: 0; transform: translateY(-6px) scale(0.96); } to { opacity: 1; transform: none; } }
.profile-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 0 4px; padding: 12px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.pstat { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.pstat b { font-size: 16px; }
.pstat span { font-size: 11px; color: var(--text-sub); }

/* ── 모바일 상단 게시판 칩 스크롤 (레딧 앱 트렌딩 바 격) ── */
.board-strip { display: flex; gap: 8px; overflow-x: auto; padding: 12px 0 4px; scrollbar-width: none; }
.board-strip::-webkit-scrollbar { display: none; }
.board-strip .bchip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 6px; flex-shrink: 0;
  border: 1px solid var(--border); border-radius: 999px; font-size: 13px; font-weight: 600;
}
.board-strip .bchip:hover { background: var(--bg-section); }
@media (min-width: 960px) { .board-strip { display: none; } }

/* ── 입력/버튼 ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-height: 44px; padding: 0 16px;
  border-radius: 999px; font-size: 14px; font-weight: 700;
  transition: background 200ms ease, color 200ms ease, transform 200ms ease;
}
.btn-primary { background: var(--brand); color: #FFFFFF; }
.btn-primary:hover { background: var(--brand-dark); }
.btn-ghost { background: var(--bg-section); color: var(--text); }
.btn-ghost:hover { background: var(--bg-hover); }
/* 검은 바탕 버튼 — 프로필 '수정' 처럼 눈에 띄어야 하는 자기 계정 액션 */
.btn-dark { background: var(--text); color: #FFFFFF; }
.btn-dark:hover { background: #000000; color: #FFFFFF; }
.btn-dark svg { stroke: currentColor; }
.btn-sm { position: relative; min-height: 36px; padding: 0 14px; font-size: 13px; }
.btn-sm::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); width: max(100%, 44px); height: 44px;
}
.btn:active { transform: scale(0.97); }
.input, textarea.input {
  width: 100%; min-height: 44px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-input);
  background: var(--bg); font-size: 16px; color: var(--text);
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
textarea.input { resize: vertical; line-height: 1.5; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--text-sub); margin-bottom: 4px; }
.section-title { font-size: 17px; font-weight: 700; margin: 24px 0 12px; letter-spacing: -0.01em; }

/* ── 인증 배지: 로터스 로고 마크 (텍스트 없이 아이콘만) ── */
.badge-verified {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--brand-tint); vertical-align: -3px; flex-shrink: 0;
}
/* 로고는 배지 크기에 비례 — 문맥별로 배지만 키우면 된다 */
.badge-verified svg { display: block; width: 70%; height: 70%; }
/* 이름 옆에 바로 붙는 마크라 앞 여백만 살짝 */
.who + .badge-verified, a + .badge-verified { margin-left: 2px; }
/* 프로필 제목(22px) 옆에서는 조금 크게 */
.profile-head .badge-verified { width: 22px; height: 22px; vertical-align: -4px; }
.badge-anon {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 700; color: var(--text-sub);
  background: var(--bg-section); border-radius: 6px; padding: 1px 6px;
  vertical-align: 1px;
}

/* ── 한줄시황 띠 (LIVE 도트: 미쿠 핑크 포인트) ── */
.oneliner-strip { background: var(--bg-section); border-radius: var(--radius-card); padding: 12px 16px; margin: 12px 0; }
.oneliner-strip .strip-title { font-size: 13px; font-weight: 700; color: var(--text-sub); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--miku-pink); animation: livePulse 2s ease infinite; }
@keyframes livePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.oneliner-items { display: flex; flex-direction: column; gap: 8px; }
.oneliner-item { font-size: 13px; display: flex; gap: 8px; }
.oneliner-item .who { color: var(--text-sub); flex-shrink: 0; }
.oneliner-form { display: flex; gap: 8px; margin-top: 12px; }
.oneliner-form .input { min-height: 40px; flex: 1; }

/* ── 댓글: 레딧식 스레드 라인 + 접기 ── */
.comment { position: relative; padding: 8px 0 0 0; }
.comment-inner { display: flex; gap: 8px; }
.comment-rail { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; width: 24px; cursor: pointer; }
.comment-rail .thread-line { flex: 1; width: 2px; background: var(--border); border-radius: 1px; margin-top: 4px; transition: background 150ms ease; }
.comment-rail:hover .thread-line { background: var(--brand); }
.comment-content { flex: 1; min-width: 0; }
.comment-head { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-sub); }
.comment-head .who { font-weight: 700; color: var(--text); }
.comment-body { margin-top: 2px; white-space: pre-wrap; word-break: break-word; font-size: 14px; }
.comment-body a { color: var(--down); text-decoration: underline; text-underline-offset: 2px; }
.comment-actions { display: flex; align-items: center; gap: 4px; margin: 4px 0; }
.comment-actions .vote-group, .comment-actions .vote-btn { min-height: 28px; }
.comment-actions .vote-btn { min-width: 28px; }
.comment-actions .pill { min-height: 28px; padding: 0 10px; font-size: 12px; background: transparent; }
.comment-actions .pill:hover { background: var(--bg-section); }
.comment-children { margin-left: 32px; }
.comment.collapsed > .comment-inner .comment-body,
.comment.collapsed > .comment-inner .comment-actions,
.comment.collapsed > .comment-children { display: none; }
.comment .collapse-hint { display: none; font-size: 12px; color: var(--text-sub); margin-left: 4px; }
.comment.collapsed > .comment-inner .collapse-hint { display: inline; }
.comment.pending { opacity: 0.55; }
.comment.landed > .comment-inner { animation: cmLand 300ms var(--spring); }
@keyframes cmLand { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.reply-toggle { position: relative; font-size: 12px; font-weight: 600; color: var(--text-sub); min-height: 28px; padding: 0 10px; border-radius: 999px; }
.reply-toggle::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); width: max(100%, 44px); height: 44px;
}
.reply-toggle:hover { background: var(--bg-section); }

/* ── 댓글 작성 하단 시트 (레딧식: 화면 전환 없이 아래에서 올라온다) ── */
.csheet-open {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px;
  margin: 4px 0 12px; padding: 0 14px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--bg); font-size: 14px; font-weight: 600; color: var(--text-sub);
  transition: border-color 200ms ease, color 200ms ease;
}
.csheet-open:hover { border-color: var(--brand); color: var(--text); }
.csheet-open svg { stroke: currentColor; fill: none; stroke-width: 2; }
.csheet-backdrop { display: none; }
.csheet-grip { display: none; }
.csheet-input {
  width: 100%; border: 1px solid var(--border); border-radius: 10px; background: var(--bg);
  padding: 12px 14px; font: inherit; font-size: 16px; line-height: 1.5; color: var(--text);
  resize: none; max-height: 40vh; transition: border-color 200ms ease;
}
.csheet-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.csheet-input::placeholder { color: #AEB5BD; opacity: 1; }
.csheet-foot { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.csheet-tools { display: flex; align-items: center; gap: 2px; margin-right: auto; }
.ctool {
  min-width: 36px; min-height: 36px; border-radius: 8px; display: inline-flex;
  align-items: center; justify-content: center; font-size: 15px; color: var(--text-sub);
  transition: background 200ms ease, color 200ms ease;
}
.ctool:hover { background: var(--bg-section); color: var(--text); }
.ctool:active { transform: scale(0.92); }
.ctool b, .ctool i, .ctool s { font-size: 15px; }
.csheet-count { font-size: 12px; color: var(--text-sub); font-variant-numeric: tabular-nums; }
.csheet-submit { min-height: 40px; padding: 0 18px; }
.csheet-target { font-size: 13px; color: var(--text-sub); margin-bottom: 8px; }
.csheet-target b { color: var(--text); font-weight: 700; }

/* JS가 있을 때만 고정 시트로 승격 — 없으면 위 스타일 그대로 인라인 폼 */
html.js .csheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
  background: var(--bg); border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 32px rgba(25,31,40,0.18);
  padding: 8px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  transform: translateY(101%); transition: transform 300ms var(--spring);
  max-width: 720px; margin: 0 auto;
}
html.js body.csheet-on .csheet { transform: translateY(0); }
html.js .csheet-backdrop {
  display: block; position: fixed; inset: 0; z-index: 119; background: rgba(25,31,40,0.45);
  opacity: 0; pointer-events: none; transition: opacity 200ms ease;
}
html.js body.csheet-on .csheet-backdrop { opacity: 1; pointer-events: auto; }
/*
 * 시트가 열린 동안 문서를 position:fixed 로 잠근다 (overflow:hidden 만으로는 iOS 가 안 멈춘다).
 * top 을 스크립트로 바꿔서 '잠긴 채로도' 답글 대상 댓글을 시트 위로 끌어올릴 수 있다.
 */
html.js body.csheet-on { overflow: hidden; position: fixed; left: 0; right: 0; width: 100%; }
/* 답글 대상 댓글 강조 — 어디에 답글을 다는지 눈으로 확인되게 */
.comment.reply-target > .comment-inner { background: var(--brand-tint); border-radius: 12px; }
.comment.reply-target > .comment-inner { transition: background 200ms ease; }
html.js .csheet-grip {
  display: block; width: 44px; height: 20px; margin: 0 auto 4px; position: relative;
}
html.js .csheet-grip::before {
  content: ''; position: absolute; left: 10px; right: 10px; top: 8px; height: 4px;
  border-radius: 2px; background: var(--border);
}
/* 키보드가 덮는 동안 홈 인디케이터 여백은 시트와 키보드 사이를 벌리기만 한다 */
html.js body.csheet-kb .csheet { padding-bottom: 12px; }
html.js .csheet-target[hidden] { display: none; }
html.js .csheet-input { border-color: transparent; padding: 4px 2px; max-height: 32vh; }
html.js .csheet-input:focus { border-color: transparent; box-shadow: none; }
html.js .csheet-foot { border-top: 1px solid var(--border); padding-top: 8px; }

/* ── 글 상세 ── */
.post-detail-title { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.3; margin-top: 4px; }
.post-detail-body { word-break: break-word; font-size: 15px; margin: 12px 0 16px; }
.post-detail-body p { margin: 8px 0; }
.post-detail-body h3 { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; margin: 16px 0 4px; }
.post-detail-body ul, .post-detail-body ol { padding-left: 22px; margin: 8px 0; }
.post-detail-body li { margin: 3px 0; }
.post-detail-body blockquote { border-left: 3px solid var(--border); padding: 2px 12px; margin: 8px 0; color: var(--text-sub); }
.post-detail-body img { display: block; max-width: 100%; border-radius: 12px; margin: 10px 0; }
.post-detail-body a { color: var(--down); text-decoration: underline; text-underline-offset: 2px; }
.post-detail-body strong { font-weight: 800; }
.spoiler { background: var(--text); color: transparent; border-radius: 4px; padding: 0 4px; cursor: pointer; transition: background 200ms ease, color 200ms ease; }
.spoiler.revealed { background: var(--bg-section); color: inherit; }

/* ── 통합 피드: 출처 표시(공시·뉴스) + 보관 버튼 ── */
.card-excerpt {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
  font-size: 14px; color: var(--text-sub); line-height: 1.55; margin: 2px 0 6px; word-break: break-word;
}
.src-name { display: inline-flex; align-items: center; font-weight: 600; color: var(--text-sub); }
.save-pill .i-fill { display: none; }
.save-pill.on { color: var(--brand-dark); }
.save-pill.on .i-line { display: none; }
.save-pill.on .i-fill { display: inline; }
.save-pill svg { transition: transform 300ms var(--spring); }
.save-pill.pop svg { transform: scale(1.15); }

/* ── 관리자 대시보드 ── */
.adm-h1 { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; margin: 12px 0 2px; }
.adm-sub { font-size: 13px; color: var(--text-sub); margin-bottom: 20px; }

/* 지표 타일: 숫자를 크게, 손봐야 하는 항목만 색으로 튀게 한다 */
.adm-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 20px; }
@media (min-width: 560px) { .adm-kpis { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .adm-kpis { grid-template-columns: repeat(6, 1fr); } }
.adm-kpi {
  background: var(--bg); border: 1px solid var(--border); border-radius: 14px;
  padding: 14px 12px; display: flex; flex-direction: column; gap: 2px;
  transition: border-color 150ms ease, transform 150ms ease;
}
a.adm-kpi:hover { border-color: var(--text-sub); transform: translateY(-1px); }
.adm-kpi b { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.adm-kpi span { font-size: 12px; color: var(--text-sub); }
/* 0 이 아니면 손볼 일이 있다는 뜻 — 경고(주황) / 조치 필요(빨강) */
.adm-kpi.warn { background: #FFFAF2; border-color: #F5E3C7; }
.adm-kpi.warn b { color: #B26B00; }
.adm-kpi.alert { background: #FEF4F5; border-color: #F7D9DD; }
.adm-kpi.alert b { color: var(--up); }

/* 섹션 카드 — 화면 전체가 흰 바탕에 떠 있던 걸 묶는다 */
.adm-card {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-card);
  padding: 16px; margin-bottom: 16px;
}
.adm-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.adm-card-head h2 { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.adm-hint { font-size: 12px; color: var(--text-sub); }
.adm-note { font-size: 12px; color: var(--text-sub); line-height: 1.5; margin-bottom: 12px; }
/* 카드 안에서 묶음을 가르는 작은 라벨 */
.adm-group { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: var(--text-sub); text-transform: uppercase; margin: 16px 0 8px; }
.adm-group:first-of-type { margin-top: 8px; }

/* 배치 실행 버튼: 격자로 깔아 이름이 잘리지 않게 한다 */
.adm-runs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 560px) { .adm-runs { grid-template-columns: repeat(3, 1fr); } }
.adm-run {
  min-height: 44px; padding: 0 12px; border-radius: var(--radius-btn);
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
  font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-align: center;
  transition: background 150ms ease, border-color 150ms ease, transform 100ms ease;
}
.adm-run:hover { background: var(--bg-section); border-color: var(--text-sub); }
.adm-run:active { transform: scale(0.97); }
.adm-run[disabled] { opacity: 0.5; cursor: default; }
.adm-run.busy::after {
  content: ''; width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--border); border-top-color: var(--brand);
  animation: admSpin 700ms linear infinite;
}
@keyframes admSpin { to { transform: rotate(360deg); } }

.adm-out-head { display: flex; align-items: center; justify-content: space-between; margin: 16px 0 6px; }
.adm-out-head[hidden] { display: none; }
.adm-out-head b { font-size: 12px; font-weight: 700; color: var(--text-sub); letter-spacing: 0.04em; }
.run-out {
  background: #0F1720; color: #D8E0E8; border-radius: 12px; padding: 14px; margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.55;
  white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; max-height: 420px; overflow-y: auto;
}
.run-out[hidden] { display: none; }

/* 사용량 표 — 좁은 화면에서는 토큰 열을 접어 비용에 집중시킨다 */
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th, .tbl td { padding: 10px 8px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }
.tbl th { font-size: 11px; color: var(--text-sub); font-weight: 600; }
.tbl td.n, .tbl th.n { text-align: right; font-variant-numeric: tabular-nums; }
.tbl td.strong { font-weight: 700; }
.tbl td.bad { color: var(--up); font-weight: 700; }
.tbl td.mono { font-size: 11px; color: var(--text-sub); }
.tbl tfoot td { font-weight: 700; border-bottom: none; border-top: 2px solid var(--border); }
@media (max-width: 640px) { .tbl .opt { display: none; } }

/* 일자별 비용 막대 */
.usage-bars { display: flex; align-items: flex-end; gap: 6px; height: 120px; margin-top: 12px; }
.ub { flex: 1; max-width: 56px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.ub-bar { width: 100%; background: linear-gradient(180deg, var(--brand), #7FDDD6); border-radius: 6px 6px 2px 2px; transition: height 300ms var(--spring); }
.ub-lab { font-size: 9px; color: var(--text-sub); margin-top: 6px; }

/* 검토함 */
.mod-card { border: 1px solid var(--border); border-radius: 14px; padding: 14px; margin-bottom: 8px; }
.mod-head { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-sub); flex-wrap: wrap; }
.risk { font-weight: 700; padding: 3px 9px; border-radius: 999px; font-size: 11px; }
.risk-hi { background: #FDECEE; color: var(--up); }
.risk-mid { background: #FFF4E5; color: #B26B00; }
.risk-lo { background: var(--bg-section); color: var(--text-sub); }
.mod-body { font-size: 14px; margin: 10px 0; word-break: break-word; line-height: 1.5; }
.mod-labels { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; }
.mod-label { font-size: 11px; background: var(--bg-section); border-radius: 999px; padding: 3px 9px; }
.mod-reason { font-size: 12px; color: var(--text-sub); margin-bottom: 10px; line-height: 1.5; }
.mod-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* AI 설정 — 좁은 화면에서는 라벨 아래로 입력을 내려 셀렉트가 잘리지 않게 한다 */
.cfg-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 720px) { .cfg-grid { grid-template-columns: 1fr 1fr; gap: 10px 20px; } }
.cfg-row { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.cfg-label { font-size: 13px; color: var(--text-sub); flex: 0 1 auto; min-width: 0; }
.cfg-select { flex: 1 1 170px; min-width: 0; max-width: 260px; padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); font-size: 16px; }
.cfg-num { width: 84px; flex-shrink: 0; text-align: right; padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); font-size: 16px; }
@media (max-width: 560px) {
  .cfg-row { flex-direction: column; align-items: stretch; gap: 6px; }
  .cfg-select, .cfg-num { flex: none; width: 100%; max-width: none; text-align: left; }
}
.cfg-saved { font-size: 12px; font-weight: 600; color: var(--brand-dark); }

/* ── AI 생성 표기 (공시 요약) ── */
.ai-chip {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700;
  color: var(--brand-dark); background: var(--brand-tint); border-radius: 999px;
  padding: 3px 9px; margin: 2px 0 6px;
}
.ai-chip::before { content: '✦'; }
.ai-note { font-size: 12px; color: var(--text-sub); line-height: 1.55; margin: 4px 0 12px; }

/* ── 미국 공시 영어 원문 접힘 블록 ── */
.orig-doc { border: 1px solid var(--border); border-radius: 12px; margin: 12px 0 16px; }
.orig-doc summary {
  cursor: pointer; list-style: none; padding: 12px 14px; min-height: 44px;
  display: flex; align-items: center; font-size: 14px; font-weight: 600; color: var(--text-sub);
  transition: color 200ms ease;
}
.orig-doc summary::-webkit-details-marker { display: none; }
.orig-doc summary::before { content: '▸'; margin-right: 8px; transition: transform 200ms ease; display: inline-block; }
.orig-doc[open] summary::before { transform: rotate(90deg); }
.orig-doc summary:hover { color: var(--text); }
.orig-note { font-size: 12px; color: var(--text-sub); padding: 0 14px 8px; }
.orig-note a { color: var(--down); text-decoration: underline; }
.orig-text {
  padding: 0 14px 14px; font-size: 13px; line-height: 1.6; color: var(--text-sub);
  white-space: pre-wrap; word-break: break-word; max-height: 420px; overflow-y: auto;
}

/* ── 토스트 ── */
.toast {
  position: fixed; left: 50%; bottom: calc(88px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%) translateY(12px);
  background: var(--text); color: #fff; font-size: 13px; font-weight: 600; line-height: 1.5;
  padding: 12px 18px; border-radius: 999px; box-shadow: 0 8px 24px rgba(0,0,0,0.22);
  opacity: 0; transition: opacity 200ms ease, transform 300ms var(--spring);
  z-index: 200; max-width: min(92vw, 480px); text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast a { color: #fff; }

/* ── 뉴스 헤드라인 (링크 큐레이션) ── */
.news-list { display: flex; flex-direction: column; }
.news-item { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--border); }
.news-item:last-child { border-bottom: none; }
.news-link { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 10px 4px; border-radius: 8px; }
.news-link:hover .news-title { color: var(--brand-dark); }
.news-title { font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.4; transition: color 150ms ease; }
.news-meta { font-size: 12px; color: var(--text-sub); }
.news-chip { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--brand-dark); background: var(--brand-tint); padding: 4px 10px; border-radius: 999px; min-height: 28px; display: inline-flex; align-items: center; }

/* ── 글쓰기 + 아이콘: 살랑살랑 대기 → 한 바퀴 회전 반복 + 안내 말풍선 ── */
@keyframes writeSway {
  0% { transform: rotate(0deg); }
  5% { transform: rotate(-14deg); }
  10% { transform: rotate(10deg); }
  15% { transform: rotate(-8deg); }
  20% { transform: rotate(6deg); }
  25% { transform: rotate(0deg); }
  55% { transform: rotate(0deg); }
  70% { transform: rotate(360deg); }
  100% { transform: rotate(360deg); }
}
.write-anim { position: relative; }
.write-anim svg { animation: writeSway 5.6s ease-in-out infinite; }
.write-tip {
  position: absolute; top: calc(100% + 10px); right: -4px;
  background: rgba(25, 31, 40, 0.85); color: #fff;
  font-size: 12px; font-weight: 600; line-height: 1;
  padding: 9px 12px; border-radius: 10px; white-space: nowrap; z-index: 30;
  opacity: 0; transform: translateY(-4px); pointer-events: none;
  transition: opacity 250ms ease, transform 300ms var(--spring);
}
.write-tip::before {
  content: ''; position: absolute; top: -4px; right: 16px;
  width: 8px; height: 8px; background: rgba(25, 31, 40, 0.85);
  transform: rotate(45deg); border-radius: 2px;
}
.write-tip.show { opacity: 1; transform: translateY(0); }

/*
 * ── 글쓰기 종목 선택 ──
 * 기본은 고른 라운지 한 줄로 접혀 있고, 탭하면 검색창 + 목록이 펼쳐진다.
 * JS 가 없으면 트리거가 숨겨진 채 목록이 그대로 보인다 (서버 렌더만으로 선택 가능).
 */
.sp-wrap { position: relative; }
.sp-trigger {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 48px;
  padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg); font-size: 15px; text-align: left; cursor: pointer;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
/* display:flex 가 UA 의 [hidden]{display:none} 을 이겨 버린다 — JS 없는 환경에서 새어 나오지 않게 명시 */
.sp-trigger[hidden], .sp-search[hidden] { display: none; }
.sp-trigger:hover { border-color: var(--text-sub); }
.sp-wrap.sp-open .sp-trigger { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(57, 197, 187, 0.2); }
.sp-trigger .sp-name { font-weight: 700; flex-shrink: 0; }
.sp-trigger .sp-sub { font-size: 12px; color: var(--text-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.sp-chev { display: inline-flex; margin-left: auto; color: var(--text-sub); flex-shrink: 0; transition: transform 200ms ease; }
.sp-wrap.sp-open .sp-chev { transform: rotate(180deg); }
/* 접힌 상태: 패널을 완전히 숨긴다. 트리거가 없는(=JS 없는) 환경에선 항상 펼침 */
.sp-wrap.sp-ready .sp-panel { display: none; }
.sp-wrap.sp-ready.sp-open .sp-panel { display: block; animation: spDrop 200ms ease both; }
@keyframes spDrop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.sp-panel { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.sp-wrap.sp-ready .sp-panel { margin-top: 6px; }
.sp-search { display: flex; align-items: center; gap: 8px; padding: 0 12px; border-bottom: 1px solid var(--border); color: var(--text-sub); }
.sp-search svg { flex-shrink: 0; }
/* iOS 자동 확대 방지 — 폼 입력은 16px 이상 */
.sp-q { flex: 1; min-width: 0; border: none; outline: none; background: none; font-size: 16px; min-height: 46px; color: var(--text); font-family: inherit; }
.sp-q::placeholder { color: var(--text-sub); }
.sp-q::-webkit-search-cancel-button { -webkit-appearance: none; }
.sp-list { display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 6px; scrollbar-width: none; }
.sp-list::-webkit-scrollbar { display: none; }
.sp-empty { padding: 16px 12px; font-size: 13px; color: var(--text-sub); text-align: center; }
.sp-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: none; background: none; border-radius: 8px; font-size: 14px; cursor: pointer; text-align: left; min-height: 44px; transition: background 150ms ease; }
.sp-item[hidden] { display: none; }
.sp-tag-new { color: var(--text-sub) !important; background: var(--bg-section) !important; }
.sp-item:hover { background: var(--bg-hover); }
.sp-item.on { background: var(--brand-tint); }
.sp-item .sp-name { font-weight: 600; flex-shrink: 0; }
.sp-item.sp-current .sp-name { font-weight: 800; }
.sp-item .sp-sub { font-size: 12px; color: var(--text-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.sp-item .sp-tag { font-size: 11px; font-weight: 700; color: var(--brand-dark); background: var(--brand-tint); padding: 2px 8px; border-radius: 999px; flex-shrink: 0; }

/* ── 글쓰기 컴포저 (레딧식 위지위그) ── */
.ed-toolbar { display: flex; align-items: center; gap: 0; padding: 2px; border: 1px solid var(--border); border-bottom: none; border-radius: 10px 10px 0 0; background: var(--bg-section); overflow-x: auto; }
.ed-toolbar button { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 44px; border: none; background: none; border-radius: 8px; font-size: 16px; color: var(--text); cursor: pointer; transition: background 150ms ease; flex: 1 1 auto; }
.ed-toolbar button:hover { background: var(--bg-hover); }
.ed-toolbar button.on { background: var(--brand-tint); color: var(--brand-dark); }
.ed-toolbar button:disabled { opacity: 0.4; cursor: default; }
.ed-toolbar .ed-sep { width: 1px; height: 20px; background: var(--border); margin: 0 2px; flex: 0 0 auto; }
.editor { min-height: 220px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 0 0 10px 10px; background: var(--bg); font-size: 16px; line-height: 1.6; word-break: break-word; outline: none; }
.editor:focus { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(57, 197, 187, 0.2); }
.editor img { display: block; max-width: 100%; border-radius: 12px; margin: 10px 0; }
.editor h3 { font-size: 18px; font-weight: 800; margin: 12px 0 4px; }
.editor blockquote { border-left: 3px solid var(--border); padding: 2px 12px; margin: 8px 0; color: var(--text-sub); }
.editor ul, .editor ol { padding-left: 22px; margin: 8px 0; }
.editor a { color: var(--down); text-decoration: underline; }
.ed-toolbar + textarea:not([hidden]) { border-radius: var(--radius-input, 10px); }
.back-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-sub); min-height: 36px; margin-top: 12px; }
.back-link:hover { color: var(--text); }

/* ── 설정 화면 (레딧 '내 계정' 시트에 해당) ── */
.set-h1 { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; margin: 8px 0 16px; }
.set-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 8px 4px; margin-bottom: 16px; }
.set-head { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--text-sub); padding: 8px 12px 4px; }
.set-note { font-size: 13px; color: var(--text-sub); line-height: 1.5; padding: 0 12px 8px; }
.set-note a { color: var(--down); text-decoration: underline; }
.set-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 56px; padding: 8px 12px; border: none; background: none;
  border-radius: 12px; font-family: inherit; text-align: left; cursor: pointer;
  transition: background 150ms ease;
}
.set-row:hover { background: var(--bg-section); }
.set-icon { display: inline-flex; flex-shrink: 0; color: var(--text-sub); }
.set-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.set-title { font-size: 15px; font-weight: 600; color: var(--text); }
.set-desc { font-size: 12px; color: var(--text-sub); line-height: 1.4; }
.set-chev { display: inline-flex; color: var(--text-sub); flex-shrink: 0; }
.set-danger .set-title, .set-danger .set-icon { color: var(--up); }
.set-actions { display: flex; align-items: center; gap: 12px; padding: 8px 12px 4px; }
.set-saved { font-size: 13px; font-weight: 600; color: var(--brand-dark); animation: obFade 200ms ease both; }
.set-saved[hidden] { display: none; }
/* 스위치 — 체크박스를 숨기고 트랙만 보여준다 (터치 타깃은 행 전체 56px) */
.switch { position: relative; display: inline-flex; flex-shrink: 0; }
/* 투명 입력이 트랙 위에 오도록 — 아래 있으면 스위치 자체를 눌러도 트랙이 클릭을 먹는다 */
.switch input { position: absolute; inset: 0; z-index: 1; opacity: 0; margin: 0; cursor: pointer; }
.switch-track {
  width: 48px; height: 28px; border-radius: 999px; background: var(--border);
  position: relative; transition: background 200ms ease;
}
.switch-track::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(25,31,40,0.25);
  transition: transform 200ms var(--spring);
}
.switch input:checked + .switch-track { background: var(--brand); }
.switch input:checked + .switch-track::after { transform: translateX(20px); }
.switch input:focus-visible + .switch-track { box-shadow: 0 0 0 3px var(--brand-tint); }
/* 값 선택 행 (급등락 기준 %) — 스위치 대신 셀렉트를 오른쪽에 세운다 */
.set-select { flex-shrink: 0; min-height: 44px; width: auto; padding: 0 32px 0 12px; }

/* ── 알림함 ── */
.nt-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 0 12px; }
.nt-list { display: flex; flex-direction: column; }
.nt-row {
  position: relative; display: flex; align-items: flex-start; gap: 12px;
  padding: 12px; border-radius: var(--radius-card);
  transition: background 150ms ease;
}
.nt-row:hover { background: var(--bg-section); }
/* 안 읽은 알림 — 왼쪽 브랜드 라인 + 옅은 틴트 (읽으면 조용히 사라진다) */
.nt-row.unread { background: var(--brand-tint); }
.nt-row.unread::before {
  content: ''; position: absolute; left: 0; top: 12px; bottom: 12px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--brand);
}
.nt-lead { position: relative; flex-shrink: 0; display: inline-flex; }
/* 종목 로고 위 우하단에 종류 글리프를 겹친다 (공시·급등락) */
.nt-kind:empty { display: none; }
.nt-kind {
  position: absolute; right: -3px; bottom: -3px;
  width: 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg); border: 1px solid var(--border); color: var(--text-sub);
}
.nt-kind svg { width: 11px; height: 11px; }
.nt-glyph {
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-section); color: var(--text-sub);
}
.nt-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.nt-title { font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.4; }
.nt-title.up { color: var(--up); }
.nt-title.down { color: var(--down); }
.nt-body {
  font-size: 13px; color: var(--text-sub); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.nt-meta { font-size: 11px; color: var(--text-sub); }
.nt-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); margin-top: 6px; }

/* 헤더 종 — 글쓰기 + 와 같은 44px 타깃. .icon-btn 이 뒤에 선언돼 있어 한 단계 올린다 */
.header-inner .header-bell { flex-shrink: 0; min-width: 44px; min-height: 44px; }
/* 새 알림이 있으면 진입 직후 두 번 흔들어 눈에 띄게 한다 */
.header-bell.has-new svg { transform-origin: 12px 4px; animation: bellSwing 700ms var(--spring) 400ms 2; }
@keyframes bellSwing {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(14deg); }
  45% { transform: rotate(-11deg); }
  70% { transform: rotate(6deg); }
}
/* 내비 항목 오른쪽 개수 배지 (알림) */
.nav-count {
  margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--up); color: #fff;
  font-size: 10px; font-weight: 800; line-height: 1;
}

/* ── 온보딩 오버레이 ── */
.onboard { position: fixed; inset: 0; z-index: 100; background: var(--bg); display: flex; align-items: center; justify-content: center; }
.onboard[hidden] { display: none; }
.onboard-inner { width: 100%; max-width: 360px; padding: 24px; text-align: center; }
.onboard-logo { display: flex; justify-content: center; animation: obPop 600ms var(--spring) both; }
.onboard-title { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; margin-top: 12px; animation: obPop 600ms var(--spring) both; display: flex; justify-content: center; }
.onboard-sub { font-size: 13px; color: var(--text-sub); margin-top: 4px; opacity: 0; animation: obFade 400ms ease 1100ms forwards; }
.onboard-choices { display: flex; flex-direction: column; gap: 8px; margin-top: 32px; opacity: 0; animation: obFade 400ms ease 1100ms forwards; }
.onboard-choices .btn { width: 100%; }
.onboard-hint { font-size: 13px; color: var(--text-sub); margin: 4px 0 8px; }
.onboard-skip { margin-top: 16px; font-size: 13px; color: var(--text-sub); min-height: 44px; padding: 0 16px; opacity: 0; animation: obFade 400ms ease 1300ms forwards; }
.onboard-skip:hover { color: var(--text); }
@keyframes obPop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes obFade { to { opacity: 1; } }

/* ── 스켈레톤/기타 ── */
.skeleton { background: linear-gradient(90deg, var(--bg-section) 25%, #EDEFF2 50%, var(--bg-section) 75%); background-size: 200% 100%; animation: shimmer 1.2s infinite linear; border-radius: 8px; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.empty { text-align: center; color: var(--text-sub); padding: 32px 16px; font-size: 13px; }
.notice { background: var(--brand-tint); color: var(--brand-dark); border-radius: var(--radius-input); padding: 12px; font-size: 13px; margin-bottom: 16px; }
.error-box { background: #FFF0F1; color: var(--up); border-radius: var(--radius-input); padding: 12px; font-size: 13px; margin-bottom: 16px; }
.stock-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.stock-cell { display: flex; flex-direction: column; gap: 2px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-card); transition: border-color 200ms ease; }
.stock-cell:hover { border-color: var(--brand); }
.stock-cell .name { font-weight: 700; }
.stock-cell .code { font-size: 13px; color: var(--text-sub); }
.form-page { max-width: 400px; margin: 32px auto; }
.form-page h1 { font-size: 24px; font-weight: 800; margin-bottom: 8px; }
.form-page .sub { color: var(--text-sub); font-size: 13px; margin-bottom: 24px; }
.divider { border: none; border-top: 1px solid var(--border); margin: 24px 0; }