:root {
  --ink:#000000;        /* 본문 — 완전한 블랙 (애매한 회색 금지) */
  --line:#ededed;       /* 구분선 */
  --muted:#5b6573;      /* 서브 텍스트 — 더 또렷한 그레이(가독성↑) */
  --subtle:#8b93a1;     /* 보조 메타(시간·조회 등) 전용 — 회색 일관화 */
  --bg:#ffffff;         /* 배경 — 가장 쨍한 퓨어 화이트 */
  --card:#ffffff;       /* 카드 */
  --pad:20px;           /* 페이지 좌우 패딩 (px-5) */
  /* 포인트 컬러 — 블랙 기반 (화이트/블랙 + 최소 포인트) */
  --accent:#000000;        /* 메인 포인트 (선택/버튼/링크) — 가장 진한 블랙 */
  --accent-strong:#222222; /* hover/active — 살짝 밝은 블랙 */
  --accent-soft:#f1f2f4;   /* 옅은 배경 (선택 칩 hover 등) — 중립 그레이 */
  --teal:#000000;          /* 보조 포인트도 블랙으로 통일 */
  --teal-soft:#f1f2f4;     /* 옅은 그레이 배경 */
  --brand:#3182f6;         /* 브랜드 블루 — 로고·인증 배지 등 정체성 포인트에만 사용 */
  --brand-soft:#e8f1fe;    /* 옅은 브랜드 블루 배경 */
  --like:#ff3b5c;          /* 좋아요 — 톤다운 코랄레드 */
  --cmt-bg:#f4f6f8;        /* 댓글 영역 배경 — 본문과 시각 분리용 옅은 회색 */
}
* { -webkit-tap-highlight-color: transparent; }
html, body {
  background:var(--bg); color:var(--ink);
  /* overflow-x:hidden 을 쓰면 브라우저가 overflow-y 를 auto 로 승격시켜 body 가
     스크롤 컨테이너가 되고 position:sticky 가 window 스크롤과 어긋나 무력화된다.
     overflow-x:clip 은 스크롤 컨테이너를 만들지 않으므로 가로 오버플로우만 잘라낸다. */
  overflow-x: clip;
}
/* 카카오톡 등 인앱 브라우저(안드로이드 웹뷰)에서 세로 스크롤이 막히지 않도록 보장 */
html { height:auto; }
body {
  min-height:100%;
  overflow-y:visible;
  -webkit-overflow-scrolling:touch;
  /* overscroll-behavior-y:none 은 일부 인앱 웹뷰에서 스크롤을 막아 contain 으로 완화 */
  overscroll-behavior-y: contain;
  touch-action: pan-y;
}
/* 가로 스크롤 영역은 좌우 오버스크롤 전파 차단 */
.no-scrollbar { overscroll-behavior-x: contain; }

/* ===== 스플래시 화면 (토스 스타일) ===== */
#splash {
  position:fixed; inset:0; z-index:9999;
  background:#ffffff;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .45s ease, visibility .45s ease;
}
#splash.hide { opacity:0; visibility:hidden; pointer-events:none; }
.splash-inner { display:flex; flex-direction:column; align-items:center; gap:18px; }
.splash-logo {
  width:112px; height:112px; display:block;
  animation: splashLogo .9s cubic-bezier(.22,1,.36,1) both;
}
.splash-name {
  font-size:22px; font-weight:700; letter-spacing:-0.03em; color:var(--ink);
  opacity:0; animation: splashName .5s ease .35s both;
}
@keyframes splashLogo {
  0%   { opacity:0; transform:scale(.6) translateY(8px); }
  60%  { opacity:1; transform:scale(1.06) translateY(0); }
  100% { opacity:1; transform:scale(1) translateY(0); }
}
@keyframes splashName { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
body { letter-spacing:-0.011em; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }

/* ===== 통일 페이지 헤더 시스템 (Mobbin/Refero 톤) ===== */
.page-head { padding:20px 20px 14px; }
.page-title { font-size:23px; font-weight:700; line-height:1.2; letter-spacing:-0.028em; color:var(--ink); }
.page-sub { font-size:13.5px; line-height:1.5; color:var(--muted); margin-top:5px; }
/* 섹션 가로 패딩 통일 */
.px-page { padding-left:20px; padding-right:20px; }

/* 홈 메인 배너 카드 — 자연스러운 그림자 + 호버 살짝 떠오름 */
.hero-card { box-shadow: 0 1px 2px rgba(0,0,0,.04); transition: box-shadow .2s ease, transform .15s ease, border-color .2s ease; }
.hero-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.08); border-color: #e0e0e0; transform: translateY(-2px); }

.fade-in { animation: fadeIn .25s ease both; }
@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }

.no-scrollbar::-webkit-scrollbar { display:none; }
.no-scrollbar { -ms-overflow-style:none; scrollbar-width:none; }

.like-pop { animation: pop .3s ease; }
@keyframes pop { 0%{transform:scale(1);} 50%{transform:scale(1.35);} 100%{transform:scale(1);} }

textarea { resize:none; }

/* 온마음 AI 타이핑 인디케이터 */
.ai-typing { display:inline-flex; gap:4px; align-items:center; }
.ai-typing i { width:6px; height:6px; border-radius:50%; background:var(--subtle); display:inline-block; animation:aiBlink 1.2s infinite ease-in-out both; }
.ai-typing i:nth-child(2){ animation-delay:.2s; }
.ai-typing i:nth-child(3){ animation-delay:.4s; }
@keyframes aiBlink { 0%,80%,100%{ opacity:.25; transform:translateY(0);} 40%{ opacity:1; transform:translateY(-3px);} }

/* Threads 액션 버튼: 아이콘+숫자, hover 시 옅은 원형 */
.act { display:inline-flex; align-items:center; gap:5px; padding:7px 8px; border-radius:9999px; transition:background .12s; }
.act:hover { background:#f0f0f0; }

::selection { background:#000; color:#fff; }

.line-clamp-1 { display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-3 { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.snap-x { scroll-snap-type:x mandatory; }
.snap-start { scroll-snap-align:start; }

/* 카드 통일 그림자 (Mobbin/Refero 톤: 아주 옅고 깨끗하게) */
.card-soft { box-shadow:0 1px 2px rgba(17,17,17,.05), 0 2px 10px rgba(17,17,17,.035); }

/* 이미지 로딩 플레이스홀더 — 콘텐츠 사진에만 적용(로고·파비콘 제외).
   전역 img 회색 배경은 투명 로고에 회색이 비쳐 보이는 문제를 일으켜 제거함. */
.img-ph { background:#f2f2f2; }
.drop-shadow { filter:drop-shadow(0 1px 6px rgba(0,0,0,.35)); }

/* 인터랙션 통일: 칩·버튼 부드러운 트랜지션 */
button { transition:transform .12s ease, background-color .15s ease, color .15s ease; }

/* 숫자/금액 강조용 탭ular 정렬 */
.tnum { font-variant-numeric:tabular-nums; }

/* 게시물 본문 (Threads 톤: 15px / 1.45) */
.post-body { font-size:15px; line-height:1.45; letter-spacing:-0.01em; }