: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[data-ptr]).
 *
 * 전역(html, body)에 걸었다가 되돌렸다. contain 은 브라우저의 당겨서 새로고침과
 * 스와이프 내비게이션을 없애는데, 우리 PTR 이 없는 페이지에까지 걸면 **당겨도 아무 일도
 * 안 일어나는** 상태가 된다. 대체물을 주는 자리에서만 끄는 게 규칙이다.
 * 세로축만 지정해 좌우 스와이프 내비게이션은 그대로 둔다.
 */
body[data-ptr] { overscroll-behavior-y: contain; }
/*
 * 가로 오버스크롤로 인한 히스토리 이동을 끈다 (사파리 16+ · 크롬 모두 지원).
 * 위 가장자리 스와이프의 두 번째 방어선이다 — touchstart 를 비패시브로 다는 것이
 * 1차이고, 이건 그 손짓이 스크롤 컨테이너 오버스크롤로 새는 경우를 막는다.
 * 세로는 건드리지 않는다 (당겨서 새로고침이 쓰는 화면에만 위에서 따로 건다).
 */
body { overscroll-behavior-x: auto; }
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; }
/* 동작 줄이기에서도 기능과 최종 상태는 동일하게 유지하되, 큰 축 이동은 짧은 페이드로 대체한다. */

/* 교차 문서 View Transition은 Safari의 시스템 뒤로가기와 중복되므로 사용하지 않는다. */


/* ── 앱 셸: 레딧식 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; }

/* ── 헤더: 햄버거 · 로고 · 검색 · 계정 (+미쿠 리본 그라디언트) ── */
/*
 * 상단바는 **fixed** 다 (sticky 아님).
 *
 * sticky 는 문서 흐름 안에 있어서 브라우저가 고무줄 오버스크롤로 문서 전체를 끌면 같이
 * 끌려 내려간다 — iOS 에서 당겨서 새로고침을 할 때 헤더가 통째로 밀려 내려갔다
 * (실측 2026-08-17). fixed 는 뷰포트에 박히므로 어느 탭에서든, 무엇을 당기든 그대로 있다.
 * 흐름에서 빠지는 만큼 본문 첫 화면이 헤더 밑으로 들어가지 않게 body 에 여백을 준다.
 */
.header { position: fixed; top: 0; left: 0; right: 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); }
body { padding-top: 57px; } /* 헤더 56px + 아래 경계선 1px */
.header-inner { display: flex; align-items: center; gap: 12px; height: 56px; max-width: 1248px; margin: 0 auto; padding: 0 16px; }
/*
 * 햄버거는 **버튼처럼 보여야 한다.** 배경 없이 선 세 개만 두었더니 헤더의 다른 요소들
 * (검색창·글쓰기 버튼)이 모두 알약·원형 배경을 갖고 있어서 이것만 그림처럼 읽혔다
 * (신고 2026-08-19). 오른쪽 글쓰기 버튼(.icon-btn)과 같은 원형 배경을 준다 —
 * 헤더 양 끝이 같은 모양이 되어 '누르는 것'이라는 신호가 붙는다.
 * 색은 브랜드를 쓰지 않는다(§8: 미쿠 민트는 최소 사용) — 여는 문일 뿐 주요 CTA 가 아니다.
 */
.hamburger {
  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, transform 200ms ease; flex-shrink: 0;
}
.hamburger:active { transform: scale(0.94); transition-duration: 80ms; }
.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-hover); }
@media (max-width: 519px) { .header-nav .nick { display: none; } }

/* ── 드로어 (햄버거 메뉴): 슬라이드 패널 + 백드롭 ── */
.drawer-backdrop {
  position: fixed; inset: 0; z-index: 40; background: rgba(25,31,40,0.42);
  opacity: 0; pointer-events: none;
  transition: opacity 240ms cubic-bezier(0.32, 0.72, 0, 1);
}
.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: translate3d(-102%,0,0);
  transition: transform 260ms cubic-bezier(0.32, 0.72, 0, 1);
  display: flex; flex-direction: column; overflow-y: auto; padding: 12px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  scrollbar-width: none; contain: paint;
}
body.drawer-open .drawer {
  transform: translate3d(0,0,0);
  transition-duration: 300ms;
}
body.drawer-open .drawer-backdrop { opacity: 1; pointer-events: auto; transition-duration: 280ms; }
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; }
.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; }
/*
 * **모든 화면이 같은 상단을 쓴다**: 햄버거 · 넓은 검색 알약(로고 포함) · 글쓰기 +.
 * 화면마다 다른 상단을 두면 어디에 있는지보다 '버튼이 어디 갔지' 를 먼저 찾게 된다 (2026-08 결정).
 * 로고는 알약 안에 있으므로 왼쪽 로고 링크를 따로 두지 않는다.
 */
.header-search { display: block; margin: 0; }
.hs-logo { display: inline-flex; }
.header-search input { padding-left: 40px; }
.header-nav { margin-left: 0; }
/* 알림은 상단에서 뺐다. 안 읽은 게 있으면 햄버거에 점만 찍어 알린다 (목록은 드로어에) */
.hamburger { position: relative; }
.hamburger.has-new::after {
  content: ''; position: absolute; top: 7px; right: 7px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--up); border: 2px solid var(--bg);
}
@media (max-width: 639px) {
  .header-inner { gap: 8px; padding: 0 12px; }
  .header-nav { gap: 6px; }
  .header-nav .btn-sm { min-height: 34px; padding: 0 10px; font-size: 12px; }
}
@media (max-width: 399px) {
  .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; }
/* 클라이언트 탭 이동 중 — 아무 일도 안 일어난 것처럼 보이지 않게 살짝 죽인다 */
/*
 * 이동 중에 화면을 흐리게 하지 않는다. 떠나는 화면을 어둡게 만들면 **기다림이 눈에 보이게**
 * 되어 같은 시간도 더 느리게 느껴진다 — 누른 탭이 바로 켜지는 것으로 충분한 응답이 된다.
 * 대신 오래 걸릴 때만(200ms 넘김) 상단에 얇은 진행 막대를 띄운다.
 */
body.nav-busy::before {
  content: ''; position: fixed; left: 0; top: 0; height: 2px; width: 100%; z-index: 200;
  background: var(--brand); transform-origin: 0 50%; transform: scaleX(0);
  animation: navbar-grow 2s cubic-bezier(0.2, 0.8, 0.3, 1) 200ms forwards;
}
@keyframes navbar-grow { 0% { transform: scaleX(0); } 60% { transform: scaleX(.7); } 100% { transform: scaleX(.92); } }
/* 「방금 팔로우한 라운지」 띠 — 겉모양은 피드와 같지만 이름이 달라야 한다
   (무한 스크롤이 첫 .feed 에 다음 페이지를 붙이므로 pages.ts 의 catchupSection 참고) */
.catchup-list { display: flex; flex-direction: column; }
/*
 * 띠와 아래 본문 피드는 생김새가 같아서 경계가 없으면 이어진 목록으로 읽힌다.
 * 회색 여백만으로는 부족했다 — 제목이 스크롤로 사라지면 띠에 담긴 (일부러) 오래된 글이
 * 새 글 위에 있는 것처럼 보여 "정렬이 깨졌다"는 신고를 받았다 (2026-08-19).
 * 그래서 **띠를 상자로 감싸** 스크롤 위치와 무관하게 다른 묶음임이 보이게 하고,
 * 카드마다 꼬리표(.card-badge)를 달아 카드 하나만 봐도 알 수 있게 한다.
 */
.catchup {
  background: var(--bg-section); border-radius: var(--radius-card);
  padding: 12px 12px 4px; margin-bottom: 16px;
}
.catchup .section-title { margin-top: 0; }
.catchup-list { background: var(--bg); border-radius: 12px; overflow: hidden; }
.catchup-end {
  font-size: 12px; color: var(--text-sub); text-align: center; padding: 10px 0 8px;
}
/* 카드 꼬리표 — 시간순을 일부러 벗어난 자리를 표시한다 */
.card-badge {
  font-size: 11px; font-weight: 700; color: var(--brand-dark);
  background: var(--brand-tint); border-radius: 999px; padding: 2px 7px; margin-left: 2px;
}
/*
 * 화면 밖 카드는 그리지 않는다 (content-visibility).
 *
 * 피드 한 장에 카드가 30개고 카드마다 아이콘이 여남은 개라 DOM 이 1,900 노드까지 간다
 * (실측 2026-08-17: 그중 885개가 SVG). 전송량은 압축하면 8KB 라 문제가 아니고,
 * **전부를 레이아웃·페인트하는 비용**이 탭 전환을 무겁게 만든다.
 *
 * content-visibility: auto 는 화면 밖 요소의 레이아웃·페인트를 건너뛴다. 스크롤로
 * 다가오면 그때 그린다 — 내용은 HTML 에 그대로 있으므로 **SSR·SEO 계약은 그대로다**
 * (§9. 크롤러는 전문을 본다). 지원율 90%+ (Safari 18+), 모르는 브라우저는 그냥 무시한다.
 *
 * contain-intrinsic-size 의 auto 키워드는 **한 번 그린 실제 높이를 기억**한다. 이게 없으면
 * 화면 밖으로 나갈 때마다 추정 높이로 되돌아가 스크롤바가 출렁인다.
 */
.post-card { position: relative; padding: 8px 8px 4px 14px; border-radius: var(--radius-card); transition: background 150ms ease; border-bottom: 1px solid var(--border);
  content-visibility: auto; contain-intrinsic-size: auto 204px; }
.post-card:hover { background: var(--bg-section); }
/*
 * 읽음 상태 — **안 읽은 글에만 빨간 점**을 찍는다 (2026-08-18).
 *
 * 읽은 글에 회색 점을 찍었더니 "여기 뭔가 있다"는 인상만 남고 정작 새 글과 구분이 약했다.
 * 읽은 것은 아무 표시도 하지 않는 게 가장 잘 읽힌다 — 점이 보이면 그게 곧 새 글이다.
 *
 * 점은 **반드시 카드 안쪽**에 둔다. .post-card 는 content-visibility: auto 라
 * 페인트 컨테인먼트가 걸려 있어서, 카드 밖(예전 left: -3px)에 두면 넘친 쪽이 잘려
 * 반달로 보인다 (실측 2026-08-18). 왼쪽 패딩 14px 이 그 자리다 — 읽은 글에는 점이
 * 없어도 이 여백은 그대로라 카드끼리 글 시작선이 어긋나지 않는다.
 */
.post-card.unseen::before {
  content: ''; position: absolute; top: 14px; left: 4px;
  width: 6px; height: 6px; border-radius: 50%; 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); }
/*
 * 공시 종류 칩 — 브랜드색을 쓰지 않는다 (§8: 미쿠 민트는 최소 사용).
 * 이건 분류 표시일 뿐 눌러야 할 것도, 강조할 것도 아니다. 회색 알약으로 조용히 둔다.
 */
/* 출처 칩 (DART·SEC) — 분류 칩과 같은 생김새로 두어 '작은 표시'라는 위계를 맞춘다 */
.src-chip {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 700; line-height: 1;
  padding: 4px 7px; border-radius: 999px;
  background: var(--bg-section); color: var(--text-sub); flex-shrink: 0;
}
.src-chip svg { width: 11px; height: 11px; }
.cat-chip {
  font-size: 11px; font-weight: 700; line-height: 1;
  padding: 4px 7px; border-radius: 999px;
  background: var(--bg-section); color: var(--text-sub); flex-shrink: 0;
}
.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; }
/* 관리자 삭제 — 되돌릴 수 없는 방향이라 다른 알약과 색으로 구분한다 (상승 색을 경고로 재사용) */
.pill-danger { color: var(--up); }
button.pill-danger:hover { background: color-mix(in srgb, var(--up) 12%, transparent); color: var(--up); }
.pill-danger[disabled] { opacity: .5; }

/* 투표 알약: ⬆ 점수 ⬇ */
.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-count {
  display: inline-flex; align-items: center; justify-content: center; margin-left: 5px;
  min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px;
  background: var(--up); color: #fff; font-size: 11px; font-weight: 700; line-height: 1;
}
.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; }
/* 등락률이 무엇 대비인지 — 옆의 1개월 스파크라인 때문에 한 달 등락으로 오해하기 쉽다 */
.spark-basis { color: var(--text-sub); font-weight: 600; margin-right: 3px; }
.price-eod { font-size: 10px; color: var(--text-sub); }

/* ── 라운지 상세 차트 (EOD 1개월) ── */
.px-card {
  position: relative; margin: 12px 0 16px; padding: 14px 14px 10px;
  border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--bg);
}
.px-empty { font-size: 12px; color: var(--text-sub); padding: 20px 0; text-align: center; }
.px-sk { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 8px; }
.px-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.px-price { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.px-chg { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.px-asof { font-size: 11px; color: var(--text-sub); flex-basis: 100%; margin-top: 2px; }
/* 기간 토글 — 이미 받아둔 1년치를 자르기만 하므로 전환에 네트워크가 없다 */
.px-ranges { display: inline-flex; gap: 2px; margin-top: 12px; padding: 3px; background: var(--bg-section); border-radius: 10px; }
.px-range {
  min-height: 32px; padding: 0 14px; border: none; border-radius: 8px; background: none;
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--text-sub); cursor: pointer;
  transition: background 200ms ease, color 200ms ease;
}
.px-range.on { background: var(--bg); color: var(--text); box-shadow: 0 1px 3px rgba(25,31,40,0.08); }
.px-period { font-size: 13px; font-weight: 700; margin-top: 10px; font-variant-numeric: tabular-nums; }
.px-plot { position: relative; margin-top: 6px; touch-action: pan-y; }
.px-svg { display: block; width: 100%; height: auto; overflow: visible; }
.px-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.px-base { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 3; }
.px-cross { stroke: var(--text-sub); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; }
.px-dot { r: 4; stroke: var(--bg); stroke-width: 2; opacity: 0; }
.px-plot.on .px-cross, .px-plot.on .px-dot { opacity: 1; }
/* 값 말풍선 — 손가락/커서를 따라다닌다 */
.px-tip {
  position: absolute; top: 0; transform: translateX(-50%);
  background: var(--text); color: #fff; border-radius: 8px; padding: 4px 8px;
  font-size: 11px; font-weight: 700; white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity 150ms ease; font-variant-numeric: tabular-nums;
}
.px-plot.on .px-tip { opacity: 1; }
.px-xaxis { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-sub); margin-top: 6px; }
.px-hilo { display: flex; gap: 12px; font-size: 11px; color: var(--text-sub); font-variant-numeric: tabular-nums; }

/* 홈: 팔로우한 라운지 시세 카드 스트립 */
.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; }
/* 주제 라운지는 시세가 없다 — 빈 칸을 두면 못 불러온 것처럼 보이므로 무엇인지 적는다 */
.watch-card .wc-theme { font-size: 12px; color: var(--text-sub); justify-content: center; }

/* 팔로우 중 상태: 회색 처리로 '이미 팔로우함'을 명확히 */
.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-counts { display: flex; align-items: baseline; gap: 5px; font-size: 12px; color: var(--text-sub); margin-top: 3px; }
.ch-counts b { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.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: 82%; padding: 9px 12px 7px; border-radius: 16px 16px 16px 5px; font-size: 16px; line-height: 1.48;
  letter-spacing: -0.006em; background: var(--bg-section); color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; word-break: keep-all;
  animation: bubbleIn 220ms cubic-bezier(.2,.75,.3,1) both;
}
.dm-bubble-row.mine .dm-bubble { border-radius: 16px 16px 5px 16px; background: var(--brand); color: #fff; }
@keyframes bubbleIn { from { transform: translateY(4px); opacity: 0; } to { transform: none; opacity: 1; } }
.dm-bubble-time { font-size: 9.5px; line-height: 1.3; color: var(--text-sub); margin: 3px 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); }
.acct-ghost {
  width: 40px; height: 40px; border-radius: 999px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-tint); color: var(--brand-dark);
}

/* ── ⋯ 메뉴 (글·댓글) ── */
.omenu-wrap { position: relative; display: inline-flex; }
.omenu-btn {
  position: relative; min-width: 28px; height: 28px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-sub); transition: background 200ms ease, color 200ms ease;
}
.omenu-btn:hover { background: var(--bg-section); color: var(--text); }
/* 보이는 크기는 그대로, 눌리는 영역만 넓힌다 (CLAUDE.md 8) */
.omenu-btn::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; }
.omenu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 40; min-width: 168px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 8px 28px rgba(25,31,40,.14); padding: 4px; overflow: hidden;
}
.omenu[hidden] { display: none; }
.omenu > a, .omenu > button {
  display: block; width: 100%; text-align: left; padding: 10px 12px; border-radius: 8px;
  font-size: 14px; font-weight: 600; color: var(--text); background: none; border: 0; cursor: pointer;
}
.card-action-more { margin-left: auto; }
.card-action-more .omenu-btn { min-width: 34px; height: 34px; padding: 0; }
.omenu > a:hover, .omenu > button:hover { background: var(--bg-section); }
.omenu > .danger { color: var(--up); }
.edited { font-size: 12px; color: var(--text-sub); }

/* ── 규칙 화면 ── */
.rule-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; counter-reset: r; }
.rule-item {
  counter-increment: r; padding: 14px 16px; background: var(--bg-section);
  border-radius: var(--radius-card); display: flex; flex-direction: column; gap: 4px;
}
.rule-name { font-weight: 700; font-size: 15px; }
.rule-name::before { content: counter(r) ". "; color: var(--brand-dark); font-variant-numeric: tabular-nums; }
.rule-detail { margin: 0; font-size: 14px; color: var(--text-sub); line-height: 1.6; }

/* ── 신고 시트 (계정 시트와 같은 골격) ── */
.rsheet, .rsheet-backdrop { display: none; }
html.js .rsheet {
  display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 140;
  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: 520px; margin: 0 auto; visibility: hidden;
  max-height: 86vh; overflow-y: auto;
}
html.js body.rsheet-on .rsheet { transform: translateY(0); visibility: visible; }
html.js .rsheet-backdrop {
  display: block; position: fixed; inset: 0; z-index: 139; background: rgba(25,31,40,0.45);
  opacity: 0; pointer-events: none; transition: opacity 200ms ease;
}
html.js body.rsheet-on .rsheet-backdrop { opacity: 1; pointer-events: auto; }
html.js body.rsheet-on { overflow: hidden; }
.rsheet-title { font-size: 16px; font-weight: 800; padding: 8px 4px 2px; }
.rsheet-sub { font-size: 13px; color: var(--text-sub); padding: 0 4px 10px; line-height: 1.5; }
.rsheet-opts { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--border); padding-top: 6px; }
/* display 를 지정한 클래스는 [hidden] 을 이긴다 — 대상별 사유 세 벌 중 하나만 보이려면 이 줄이 필요하다 */
.rsheet-opts[hidden] { display: none; }
.rsheet-opt {
  display: block; width: 100%; text-align: left; min-height: 48px; padding: 10px 12px;
  border-radius: 10px; font-size: 15px; font-weight: 600; color: var(--text); background: none; border: 0; cursor: pointer;
}
.rsheet-opt:hover { background: var(--bg-section); }
.rsheet-opt[aria-pressed="true"] { background: var(--brand-tint); color: var(--brand-dark); }
.rsheet-note { width: 100%; margin-top: 8px; }
.rsheet-foot { display: flex; gap: 8px; margin-top: 10px; }
.rsheet-foot .btn { flex: 1; min-height: 48px; }

/* ── 계정 시트 (레딧식: 아래에서 올라오는 계정 전환 목록) ──
 *
 * JS 가 없으면 아무것도 그리지 않고 트리거는 평범한 링크로 /accounts 로 간다 —
 * 시트는 이미 서버가 그린 화면을 덮는 편의일 뿐이고 원본은 그 주소다 (CLAUDE.md §2·§9).
 * 그래서 목록은 **서버가 미리 그려 둔다**: 열 때 fetch 하면 탭 한 번에 왕복이 생기고,
 * 계정 두세 개짜리 목록은 어차피 몇 백 바이트다.
 */
.asheet, .asheet-backdrop { display: none; }
html.js .asheet {
  display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 130;
  background: var(--bg); border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 32px rgba(25,31,40,0.18);
  padding: 8px 12px calc(12px + env(safe-area-inset-bottom, 0px));
  transform: translateY(101%); transition: transform 300ms var(--spring);
  max-width: 520px; margin: 0 auto;
  visibility: hidden;
}
html.js body.asheet-on .asheet { transform: translateY(0); visibility: visible; }
html.js .asheet-backdrop {
  display: block; position: fixed; inset: 0; z-index: 129; background: rgba(25,31,40,0.45);
  opacity: 0; pointer-events: none; transition: opacity 200ms ease;
}
html.js body.asheet-on .asheet-backdrop { opacity: 1; pointer-events: auto; }
html.js body.asheet-on { overflow: hidden; }
.asheet-title { font-size: 13px; font-weight: 700; color: var(--text-sub); padding: 4px 8px 8px; }
.asheet-list { border-top: 1px solid var(--border); padding-top: 4px; }
/* 시트 안에서는 목록이 폭을 꽉 채운다 (페이지의 .acct-row 는 400px 로 묶여 있다) */
.asheet .acct-row { max-width: none; width: 100%; text-align: left; background: none; border: 0; font: inherit; color: inherit; cursor: pointer; }
.asheet .acct-row:hover { background: var(--bg-section); }
.asheet-check { color: var(--brand-dark); font-size: 18px; flex-shrink: 0; }
.asheet-add { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px; border-radius: var(--radius-card); font-weight: 700; font-size: 14px; }
.asheet-add:hover { background: var(--bg-section); }
.asheet-add .asheet-ico { width: 40px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-sub); }
/* ICON_PLUS 는 선 굵기를 CSS 에 맡기는 아이콘이다 — 지정하지 않으면 획이 없어 빈칸으로 보인다 */
.asheet-ico svg { fill: none; stroke: currentColor; stroke-width: 2; }
/* 프로필 이름 옆 갈매기 — 누르면 계정 시트가 올라온다 (레딧의 계정 칩과 같은 자리) */
.acct-chip {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 999px; color: var(--text-sub); flex-shrink: 0;
  transition: background 200ms ease, color 200ms ease;
}
.acct-chip:hover { background: var(--bg-section); color: var(--text); }
/* 보이는 크기는 그대로 두고 눌리는 영역만 44px (CLAUDE.md §8) */
.acct-chip::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; }

.asheet-close { width: 100%; min-height: 48px; margin-top: 8px; border-radius: 12px; background: var(--bg-section); font-weight: 700; font-size: 15px; color: var(--text-sub); }
.asheet-close:hover { color: var(--text); }


/* ── 프로필 (레딧식: 배너 + 오버랩 아바타 + 스탯 행) ── */
.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); }

/* ── 모바일 상단 게시판 칩 스크롤 (레딧 앱 트렌딩 바 격) ── */
/* ── 스켈레톤 (로딩) ────────────────────────────────────────────────
 * 스피너 대신 **들어올 내용의 모양**을 미리 그린다 (§8). 스피너는 "무언가 돌고 있다"만
 * 말하지만 스켈레톤은 "여기에 카드 세 장이 온다"를 말해서, 같은 시간도 덜 기다린 것처럼
 * 느껴지고 도착했을 때 화면이 덜 튄다 (자리를 미리 잡아 두므로 레이아웃 이동이 없다).
 *
 * 블록 색은 섹션 배경(--bg-section)이고 그 위로 옅은 빛이 지나간다. 빛은 배경 위치만
 * 움직이므로 레이아웃·페인트를 건드리지 않는다.
 */
.sk { pointer-events: none; }
.sk-b {
  background: var(--bg-section);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}
.sk-b::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.75), transparent);
  transform: translateX(-100%);
  animation: sk-shine 1.4s ease-in-out infinite;
}
@keyframes sk-shine { to { transform: translateX(100%); } }
.sk-line { height: 14px; }
.sk-line.sm { height: 12px; }
.sk-round { border-radius: 999px; }
/* 피드 카드 한 장 — .post-card 와 같은 여백·구분선을 쓴다 */
.sk-post { padding: 16px 0; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.sk-post-head { display: flex; align-items: center; gap: 8px; }
.sk-post-foot { display: flex; gap: 8px; margin-top: 2px; }
.sk-pill { height: 32px; width: 64px; border-radius: 999px; }
/* 가로로 늘어선 칩 줄 (라운지 띠·시세 카드) */
.sk-strip { display: flex; gap: 8px; padding: 12px 0 4px; }
.sk-chip { height: 68px; min-width: 132px; border-radius: var(--radius-card); }
.sk-title { height: 18px; width: 40%; margin: 20px 0 4px; }
.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); }
/*
 * 데스크톱에서 이 띠를 감추던 규칙이 있었다(≥960px). 홈 상단의 '오늘의 라운지' 띠가
 * 좌측 내비의 목록과 겹치던 시절, 넓은 화면에서는 중복이라 지운 것이었다.
 * **그 띠는 2026-08-19 에 없어졌고 지금 .board-strip 을 쓰는 곳은 「라운지」 탭뿐이다** —
 * 그래서 그 규칙이 남은 채로 라운지 탭이 데스크톱에서 제목만 남고 통째로 비어 보였다
 * (실측 신고 2026-08-20: 좌측 내비에는 최근 방문이 멀쩡히 나오는데 본문만 비었다).
 * 화면을 지우면 그 화면만 쓰던 CSS 도 같이 지운다 — 남은 규칙은 언젠가 엉뚱한 것을 지운다.
 */

/* ── 입력/버튼 ── */
.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); }
/*
 * 카카오 로그인 버튼. 색·글자색은 카카오 디자인 가이드가 정한 값이라 토큰을 쓰지 않는다
 * (노랑 #FEE500, 글자 검정 85%) — 다크모드에서도 그대로 둔다. 사람들이 이 버튼을
 * 색으로 알아보기 때문에 여기서만은 우리 팔레트보다 인지가 우선이다.
 */
.btn-kakao { background: #FEE500; color: rgba(0, 0, 0, 0.85); }
.btn-kakao:hover { background: #F2DA00; color: rgba(0, 0, 0, 0.85); }
.btn-kakao svg { fill: currentColor; stroke: none; flex: none; }
/* 검은 바탕 버튼 — 프로필 '수정' 처럼 눈에 띄어야 하는 자기 계정 액션 */
.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;
}

/* ── 댓글: 레딧식 스레드 라인 + 접기 ── */
.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; }
/*
 * 보관하면 **검은색 채움**으로 바꾼다. 예전엔 민트였는데 회색 알약 위의 민트는 켜졌는지
 * 아닌지가 한눈에 안 잡혔다 — 보관은 되돌리기 전까지 유지되는 상태라 확실히 보여야 한다.
 * (다크모드에서는 --text 가 밝은 색이라 그대로 대비가 선다)
 */
.save-pill { transition: color 200ms ease; }
.save-pill.on { color: var(--text); font-weight: 700; }
.save-pill.on .i-line { display: none; }
.save-pill.on .i-fill { display: inline; }
/*
 * 스프링 한 번 (§8: scale 0.8 → 1.15 → 1).
 * 예전에는 transform: scale(1.15) 를 class 로 켰다 껐는데, 그건 1 → 1.15 → 1 이라
 * **눌린 느낌 없이 부풀기만** 한다. 0.8 에서 시작해야 손끝에 눌렸다 튀어나오는 느낌이 난다.
 * 켤 때는 채움이 살짝 커지며 들어오는 걸 한 번 더 얹는다 (끌 때는 조용히).
 */
@keyframes savePop {
  0% { transform: scale(0.8); }
  55% { transform: scale(1.15); }
  100% { transform: scale(1); }
}
@keyframes saveFillIn {
  from { opacity: 0; transform: scale(0.55); }
  to { opacity: 1; transform: scale(1); }
}
.save-pill.pop svg { animation: savePop 340ms var(--spring); }
.save-pill.pop.on .i-fill { animation: saveFillIn 260ms var(--spring); }

/* ── 관리자 대시보드 ── */
.adm-h1 { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; margin: 12px 0 2px; }

/* 지표 타일: 숫자를 크게, 손봐야 하는 항목만 색으로 튀게 한다 */
.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-status { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.adm-st {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--bg-section); border-radius: 12px; padding: 10px 12px;
}
.adm-st b { font-size: 13px; font-weight: 700; }
.adm-st span { font-size: 11px; color: var(--text-sub); }

.adm-inline { display: flex; gap: 8px; flex-wrap: wrap; }
.adm-inline-input {
  flex: 1 1 200px; min-width: 0; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: var(--radius-btn); background: var(--bg); font-size: 16px;
}
.adm-inline .adm-run { flex: 0 0 auto; }

/* ── 당겨서 새로고침 (홈) — 레딧 방식 ──
 * **상단바는 고정이고 콘텐츠만 밀려 내려간다.** 그렇게 벌어진 틈 안에서 인디케이터가 돈다.
 * 인디케이터가 콘텐츠 위에 떠서 내려오는 방식은 글을 가려서, 당기는 내내 무엇을
 * 새로고침하는지가 안 보인다. 틈을 벌리면 헤더는 그대로 있고 그 아래가 열리는 것이라
 * '위에서 새로 받아 온다'는 게 그대로 보인다.
 *
 * z-index 를 헤더(10)보다 낮게 둔다 — 틈이 아직 좁을 때 인디케이터가 헤더 밑에서
 * 반투명하게 비쳐 올라오고, 헤더를 침범하지 않는다.
 */
.ptr {
  position: fixed; top: 0; left: 50%; z-index: 9;
  width: 32px; height: 32px; margin-left: -16px;
  opacity: 0; pointer-events: none;
  will-change: transform, opacity;
}
.ptr svg { width: 32px; height: 32px; display: block; }
.ptr circle { fill: none; stroke: var(--brand); stroke-width: 3; stroke-linecap: round; }
/* 손을 뗀 뒤(되돌아가기·멈춰서 돌기)에만 전환을 건다 — 끄는 동안 붙으면 손가락이 미끄러진다 */
.ptr.snap { transition: transform 320ms var(--spring), opacity 220ms ease; }
.shell.ptr-snap { transition: transform 320ms var(--spring); }
/* 임계점을 넘으면 한 번 튀어 '놓으면 된다'를 알린다 */
.ptr.ready svg { animation: ptrPop 260ms var(--spring); }
/* 새로고침 중에는 계속 돈다 (당기는 동안의 회전은 JS 가 손가락에 맞춰 준다) */
.ptr.busy svg { animation: ptrSpin 720ms linear infinite; }
.ptr.busy circle { stroke-dasharray: 46 26; }
@keyframes ptrPop { 0% { scale: 1; } 55% { scale: 1.2; } 100% { scale: 1; } }
@keyframes ptrSpin { to { rotate: 360deg; } }

.adm-textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-btn);
  background: var(--bg); font-family: inherit; font-size: 16px; line-height: 1.6; resize: vertical;
}

/*
 * 접히는 편집 블록. 프롬프트는 열어 두면 화면을 다 잡아먹는데 실제로 고치는 일은 드물다 —
 * 평소엔 제목 한 줄로 접어 두고 필요할 때만 편다. 몇 자인지 옆에 적어 두면 접힌 채로도
 * 비었는지 채워졌는지 알 수 있다.
 */
.adm-fold { border-top: 1px solid var(--border); }
.adm-fold > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 14px 2px; font-size: 15px; font-weight: 700; cursor: pointer; list-style: none;
}
.adm-fold > summary::-webkit-details-marker { display: none; }
.adm-fold > summary::after {
  content: ''; flex: 0 0 auto; width: 8px; height: 8px; margin-right: 4px;
  border-right: 2px solid var(--text-sub); border-bottom: 2px solid var(--text-sub);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform 200ms ease;
}
.adm-fold[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.adm-fold > summary .adm-hint { flex: 1 1 auto; text-align: right; }
.adm-fold > *:last-child { padding-bottom: 16px; }

.adm-out-head { display: flex; align-items: center; justify-content: space-between; margin: 16px 0 6px; }
.adm-out-head[hidden] { display: none; }
.adm-out-acts { display: flex; gap: 8px; }
.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); }
/*
 * 좁은 화면에서 **비용이 잘려 나가지 않게** 한다.
 *
 * 모든 칸이 nowrap 이라 용도 이름이 길면(예: 'AI 의견글 (2026-08 중단 — …)') 표가
 * 화면보다 넓어지고, 정작 이 표를 보는 이유인 비용 열이 오른쪽으로 밀려 안 보였다
 * (실측 2026-08-17: 화면에 용도와 호출 수만 남았다).
 * 용도 칸만 줄바꿈을 허용해 표를 화면 안으로 접고, 파생값인 비중은 접는다.
 */
@media (max-width: 640px) {
  .tbl .opt, .tbl .opt-narrow { display: none; }
  .tbl th:first-child, .tbl td:first-child { white-space: normal; word-break: keep-all; min-width: 96px; }
  .tbl th, .tbl td { padding: 10px 6px; }
}

/* 일자별 비용 막대 */
.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; }
/* 막대 위 금액 — 그래프만 보고도 얼마인지 알게 한다 (마우스를 못 올리는 모바일이 기본이다) */
.ub-val { font-size: 10px; font-weight: 700; color: var(--text); margin-bottom: 4px; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* 검토함 */
.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 설정 — 좁은 화면에서는 라벨 아래로 입력을 내려 셀렉트가 잘리지 않게 한다 */
/* ── 자동 실행 일정 표 (관리자) ── */
.sch-tbl td { vertical-align: top; padding: 12px 10px; }
.sch-tbl td:first-child { white-space: nowrap; }
.sch-tbl td:first-child b { font-size: 15px; font-variant-numeric: tabular-nums; }
.sch-cron { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--text-sub); margin-top: 2px; }
.sch-cron span { font-size: 10px; opacity: 0.7; }
.sch-next { font-size: 11px; color: var(--brand); font-weight: 600; margin-top: 2px; }
.sch-note { font-size: 12px; color: var(--text-sub); margin-bottom: 6px; }
.sch-task { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13px; padding: 2px 0; }
.sch-task em { font-style: normal; font-size: 11px; color: var(--text-sub); white-space: nowrap; flex-shrink: 0; }
.sch-task em.none { opacity: 0.5; }
/*
 * 좁은 화면에서는 **표를 접어 쌓는다.**
 *
 * 표 그대로 두면 세 칸이 390px 안에 욱여넣어지면서 글자가 한 자씩 세로로 흘러
 * 읽을 수가 없다(실측 신고 2026-08-18). 가로 스크롤로 밀어 두는 방법도 있지만,
 * 이 표는 "지금 일정대로 돌고 있나"를 훑는 자리라 **한눈에 보이는 쪽**이 맞다.
 * 머리글은 감추고 각 칸이 스스로를 설명하게 둔다 (시각·주기·하는 일 순서 그대로).
 */
@media (max-width: 640px) {
  .sch-tbl, .sch-tbl tbody, .sch-tbl tr, .sch-tbl td { display: block; width: auto; }
  .sch-tbl thead { display: none; }
  .sch-tbl tr { padding: 14px 0; border-bottom: 1px solid var(--border); }
  .sch-tbl tr:last-child { border-bottom: none; }
  .sch-tbl td { padding: 0; border: none; }
  .sch-tbl td:first-child { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; white-space: normal; }
  .sch-tbl td:nth-child(2) { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--text-sub); margin: 2px 0 8px; }
  .sch-tbl .sch-cron, .sch-tbl .sch-next { margin-top: 0; }
}

/* ── AI 키 <-> 기능 (관리자) ── */
.aik-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 12px 0 4px; }
@media (min-width: 720px) { .aik-grid { grid-template-columns: repeat(3, 1fr); } }
.aik { border: 1px solid var(--border); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.aik-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.aik-head b { font-size: 15px; }
.aik-badge { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--bg-section); color: var(--up); }
.aik-badge.on { color: var(--brand); }
.aik-env { font-size: 12px; color: var(--text-sub); word-break: break-all; }
.aik-env code { font-size: 12px; background: var(--bg-section); padding: 1px 5px; border-radius: 5px; }
.aik-uses { display: flex; flex-wrap: wrap; gap: 6px; min-height: 26px; }
.aik-chip { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: rgba(57, 197, 187, 0.12); color: var(--brand); cursor: pointer; transition: opacity 200ms ease; }
.aik-chip.off { background: var(--bg-section); color: var(--text-sub); text-decoration: line-through; }
.aik-none { font-size: 12px; color: var(--text-sub); }
.aik-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.aik-count { font-size: 12px; font-weight: 700; color: var(--text-sub); }
.aik-acts { display: flex; gap: 2px; }

.aif-list { display: flex; flex-direction: column; gap: 8px; }
.aif { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; border: 1px solid var(--border); border-radius: 12px; padding: 12px; transition: background 200ms ease, opacity 200ms ease; }
.aif.off { opacity: 0.55; background: var(--bg-section); }
.aif.flash { background: rgba(57, 197, 187, 0.1); }
.aif-main { min-width: 0; }
.aif-toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.aif-toggle input { width: 20px; height: 20px; flex-shrink: 0; }
.aif-toggle b { font-size: 15px; }
.aif-desc { font-size: 13px; color: var(--text-sub); margin-top: 4px; }
.aif-meta { font-size: 12px; color: var(--text-sub); margin-top: 2px; }
.aif-off-note { display: none; }
.aif.off .aif-off-note { display: block; color: var(--up); }
.aif-key { flex-shrink: 0; width: 190px; max-width: 45%; }
.aif-fixed { display: inline-block; font-size: 13px; color: var(--text-sub); padding: 8px 0; }
.aif-warn { font-size: 12px; color: var(--up); margin-top: 4px; }

.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); }

/* ── 공시 용어 각주 (JS 없이 CSS 만으로 뜬다) ── */
.gl { position: static; outline: none; }
.gl-w {
  border-bottom: 1px dashed var(--text-sub); cursor: help;
  -webkit-tap-highlight-color: transparent;
}
.gl:focus .gl-w, .gl:hover .gl-w { border-bottom-color: var(--brand); color: var(--brand-dark); }
/*
 * 용어 옆이 아니라 화면 아래에 띄운다 — 문장 앞쪽 단어에 붙이면 카드가 화면 밖으로
 * 잘리는데 CSS 는 요소의 화면 위치를 모르므로 막을 방법이 없다. 아래 고정이면 항상 온전하다.
 */
.gl-tip {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 40; max-width: 520px; margin: 0 auto;
  background: var(--text); color: #fff; border-radius: 14px; padding: 14px 16px;
  font-size: 14px; font-weight: 400; line-height: 1.55; text-align: left;
  box-shadow: 0 10px 30px rgba(25,31,40,0.28);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(8px);
  transition: opacity 180ms ease, transform 280ms var(--spring), visibility 180ms;
}
.gl-tip b { font-weight: 800; color: var(--brand); }
.gl:hover .gl-tip, .gl:focus .gl-tip, .gl:focus-within .gl-tip {
  opacity: 1; visibility: visible; transform: translateY(0);
}
/* 모바일에서는 하단 탭바를 피해 조금 더 올린다 */
@media (max-width: 959px) { .gl-tip { bottom: calc(84px + env(safe-area-inset-bottom)); } }
.gl-hint { font-size: 12px; color: var(--text-sub); margin-top: 10px; }

/* ── 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: translate(0, 0) rotate(0deg); }
  4%  { transform: translate(-1.4px, 0.2px) rotate(-4deg); }
  8%  { transform: translate(0.6px, 0.5px) rotate(2deg); }
  12% { transform: translate(-1.1px, 0.9px) rotate(-3deg); }
  16% { transform: translate(0.7px, 1.2px) rotate(2deg); }
  20% { transform: translate(-0.6px, 0.4px) rotate(-2deg); }
  24% { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
.write-anim { position: relative; }
/* 움직이는 건 펜뿐이다 — 글줄은 이미 써 놓은 글자라 같이 흔들리면 종이가 흔들리는 꼴이 된다 */
.write-anim .wp-pen {
  animation: writeSway 5.6s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: 72% 28%; /* 펜을 쥔 쪽(자루 끝) — 촉이 크게 움직인다 */
}
.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-more { margin: 0 8px 4px; border-top: 1px solid var(--border); }
.set-more[hidden] { display: none; }
.set-more summary { min-height: 44px; padding: 0 4px; display: flex; align-items: center; color: var(--text-sub); font-size: 13px; font-weight: 650; cursor: pointer; }
.set-more summary::-webkit-details-marker { display: none; }
.set-more summary::after { content: '›'; margin-left: auto; font-size: 20px; line-height: 1; transition: transform 180ms ease; }
.set-more[open] summary::after { transform: rotate(90deg); }
.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); }
/* display 를 지정한 클래스는 [hidden] 을 이긴다 — 푸시 스위치·시험 발송을 감추려면 이 줄이 필요하다 */
.set-row[hidden], .set-note[hidden] { display: none; }
.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; }
/* 저장 실패는 되돌린 뒤 알린다 — 껐다고 생각한 게 켜져 있으면 알림이 계속 온다 */
.set-saved.fail { color: var(--up); }
/* 자동 저장이 켜지면 버튼이 사라지고 표시만 남는다 (JS 없으면 버튼 그대로) */
.set-actions.auto { padding-top: 0; min-height: 20px; }
/* 스위치 — 체크박스를 숨기고 트랙만 보여준다 (터치 타깃은 행 전체 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; }
/* 내비 항목 오른쪽 개수 배지 (알림) */
.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; }

/* Lotux Liquid Glass functional layer v1
 * 콘텐츠 카드가 아니라 내비게이션·메뉴·주요 컨트롤에만 쓴다.
 * 새 메뉴는 glass-menu 또는 glass-surface 클래스를 사용한다.
 */
:root {
  --glass-regular-bg: rgba(250, 252, 253, 0.82);
  --glass-strong-bg: rgba(255, 255, 255, 0.9);
  --glass-border: rgba(255, 255, 255, 0.64);
  --glass-edge: rgba(25, 31, 40, 0.1);
  --glass-shadow: 0 10px 32px rgba(25, 31, 40, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.76);
  --glass-blur: 20px;
}
.glass-surface,
.glass-menu {
  background: var(--glass-regular-bg);
  border-color: var(--glass-border);
}
.glass-control {
  background: var(--glass-strong-bg);
  border: 1px solid var(--glass-border);
  box-shadow: 0 5px 18px rgba(25, 31, 40, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.72);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .header,
  .bottombar,
  .bb-mini,
  .drawer,
  .asheet,
  .rsheet,
  .ta-panel,
  .glass-surface,
  .glass-menu {
    background: var(--glass-regular-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(145%);
    backdrop-filter: blur(var(--glass-blur)) saturate(145%);
    border-color: var(--glass-border);
    box-shadow: var(--glass-shadow);
  }
  .header .hamburger,
  .header .icon-btn,
  .glass-control {
    background: var(--glass-strong-bg);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    border-color: var(--glass-border);
  }
  .header {
    box-shadow: 0 1px 0 var(--glass-edge), 0 8px 26px rgba(25, 31, 40, 0.045);
  }
  .bottombar,
  .bb-mini {
    box-shadow: 0 12px 40px rgba(25, 31, 40, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.82);
  }
  .drawer,
  .asheet,
  .rsheet,
  .ta-panel,
  .glass-menu {
    --glass-blur: 24px;
  }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .header,
  .bottombar,
  .bb-mini,
  .drawer,
  .asheet,
  .rsheet,
  .ta-panel,
  .glass-surface,
  .glass-menu,
  .glass-control {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: #fff !important;
    border-color: var(--border) !important;
    box-shadow: 0 1px 4px rgba(25, 31, 40, 0.08) !important;
  }
}
@media (forced-colors: active) {
  .header,
  .bottombar,
  .bb-mini,
  .drawer,
  .asheet,
  .rsheet,
  .ta-panel,
  .glass-surface,
  .glass-menu,
  .glass-control {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: Canvas !important;
    border: 1px solid CanvasText !important;
    box-shadow: none !important;
  }
}