/* ============================================================
   base.css — 검증된 레이아웃/공통 규칙 (LucidTrip + 살려줘)
   앱별 색·폰트는 :root 토큰만 바꾸면 됨. 구조 규칙은 건드리지 말 것.
   ============================================================ */

/* ---------- 1. 토큰 (앱마다 여기만 교체) ---------- */
:root {
  /* 색 — 번개셈 시안 A "크로노" (design/DESIGN.md 1장. 웜 블랙 + 본화이트 + 핫오렌지) */
  --bg-base: #111014;
  --bg-grad-a: #17161b;
  --bg-grad-b: #0c0b0e;
  --panel: #1b1a1f;
  --line: #2c2a31;
  --accent: #ff5a2a;
  --danger: #ff2e3d;
  --muted: #8b8779;
  --text: #f2efe8;

  /* 레이아웃 상수 */
  --header-content-h: 35px; /* 로고/헤더 콘텐츠 자체 높이 */
  --ad-h: 50px;             /* 하단 배너 높이 (393x50 앵커) */

  /* ⭐ 헤더 높이: 상단 safe-area 포함해 변수화 (팬텀 스크롤 방지의 핵심) */
  --header-h: calc(max(40px, env(safe-area-inset-top)) + var(--header-content-h));

  /* ⭐ 네이티브(웹뷰) 보정용 변수 — MainActivity가 주입. 웹에선 0으로 폴백 */
  --sat: 0px; /* status bar (top) */
  --sab: 0px; /* nav bar (bottom) */
  --sal: 0px;
  --sar: 0px;
  --kb: 0px;  /* 키보드(IME) 높이 */

  /* 필름 그레인 노이즈 (이미지 파일 0개, slope=강도)
     🐛 2026-07-15 수정: componentTransfer → feComponentTransfer (오타면 알파 감쇠가 무시돼
     그레인이 불투명하게 전면에 깔림). slope 0.05 = 시안 A 확정값. app-starter 역이식 대상. */
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.05'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* ---------- 2. 배경 ----------
   ⚠️ background-attachment:fixed 금지 (그라데이션이 밋밋해짐 — 검증됨) */
body {
  color: var(--text);
  background-color: var(--bg-base);
  background-image:
    var(--noise),
    linear-gradient(180deg, var(--bg-grad-a) 0%, var(--bg-grad-b) 100%);
  background-size: 160px 160px, 100% 100%;
  -webkit-font-smoothing: antialiased;
}

/* ---------- 3. 앱 프레임 (한 화면 원칙) ----------
   .wrap = 화면 전체 고정 프레임. 기본 스크롤 없음.
   키보드가 뜨면 --kb 만큼 줄어 입력창이 가려지지 않음 (네이티브에서 주입) */
.wrap {
  height: calc(100dvh - var(--kb));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* ⭐ safe-area 이중 대응: 웹=env, 웹뷰=--sat/--sab (max로 겸용) */
  padding-top: calc(max(var(--sat), env(safe-area-inset-top)) + 22px);
  padding-bottom: calc(max(var(--sab), env(safe-area-inset-bottom)) + 18px);
  padding-left: max(var(--sal), env(safe-area-inset-left));
  padding-right: max(var(--sar), env(safe-area-inset-right));
}
/* 내용이 길어지는 특정 모드에서만 스크롤 허용 (JS에서 body 클래스 토글)
   예: body.mode-list .wrap { overflow-y: auto; } */

/* ---------- 4. 헤더 ----------
   ⭐ 흐름 안(relative) — fixed/sticky 헤더는 겹침·팬텀 스크롤의 근원이라 금지 */
header.app-head {
  position: relative;
  height: var(--header-content-h);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  flex: 0 0 auto;
}
/* 헤더가 흐름 안이므로 콘텐츠 상단 여백은 작게(8~12px)면 충분 */
.app-head + * { margin-top: 12px; }

/* 탭 화면(React형 A타입에서 사용): 헤더 높이를 뺀 화면 */
.tab-screen { min-height: calc(100svh - var(--header-h)); }

/* ---------- 5. 탭 바 ----------
   flex:1 로 꽉 채우지 말 것(가장자리에 붙어 빽빽 — 검증됨) */
.modes {
  display: flex;
  justify-content: space-between;
  padding: 0 18px;
  flex: 0 0 auto;
}
.mode { flex: 0 0 auto; padding: 0 10px; min-height: 44px; }

/* ---------- 6. 하단 액션바 (항상 보임) ---------- */
.actionbar {
  position: sticky;
  bottom: 0;
  flex: 0 0 auto;
  padding-top: 14px;
  background: linear-gradient(180deg, transparent, var(--bg-grad-b) 55%);
}

/* ---------- 7. 광고 배너 (무료 전용) ----------
   ⭐ .wrap 높이를 광고만큼 줄이는 방식 (sticky offset 방식은 겹침 버그로 폐기됨) */
.ad-bar {
  display: none;
  position: fixed;
  left: 0; right: 0;
  bottom: max(var(--sab), env(safe-area-inset-bottom));
  height: var(--ad-h);
  align-items: center;
  justify-content: center;
  background: var(--panel);
  z-index: 50;
}
body.has-ad .ad-bar { display: flex; }
body.has-ad .wrap {
  height: calc(100dvh - var(--kb) - var(--ad-h) - max(var(--sab), env(safe-area-inset-bottom)));
  padding-bottom: 8px; /* 광고 위 여백은 타이트하게 (20→8 검증) */
}
body.is-premium .ad-bar { display: none; }
body.is-premium.has-ad .wrap { height: calc(100dvh - var(--kb)); }

/* ---------- 8. 프리미엄 게이팅 표시 ---------- */
.mode .lock { margin-left: 4px; }
body.is-premium .mode .lock { display: none; }

/* ---------- 9. 빈/로딩/오류 상태 카드 (전 화면 공용) ----------
   구조: [이모지] + [메시지] + [부가안내] + [버튼(선택)] */
.state-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  padding: 28px 20px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  position: relative;
}
.state-card::before { /* 유리 테두리 — 차분한 톤(0.6→0.45)으로 앱 전체 통일 */
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(160deg, rgba(255,255,255,0.6), rgba(255,255,255,0.45));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.state-card .ico { font-size: 34px; }
.state-card .msg { font-weight: 600; }
.state-card .sub { font-size: 13px; color: var(--muted); }

/* ---------- 10. 가로 넘침 콘텐츠 (신호·타임라인 등) ----------
   좌우 그라데이션 페이드 6% + 내부 padding 24px
   (첫 요소가 페이드에 안 묻히게 — 페이드 끝 ~19px 밖에서 시작) */
.fade-x {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.fade-x .inner {
  width: max-content;
  margin: 0 auto;              /* 짧으면 가운데 */
  padding: 0 24px;
  transition: transform 0.12s; /* 재생 위치 따라 translateX (JS) */
}
.fade-x.overflowing .inner { margin: 0; } /* 길면 좌측부터 */

/* ---------- 11. 입력 ---------- */
textarea.autogrow, input.autogrow {
  field-sizing: content;       /* 한 줄 시작, 내용 길면 자동 확장 */
  min-height: 54px;
  max-height: 160px;
}

/* ---------- 12. 그라데이션 안 색 부드러운 전환 ----------
   CSS 변수는 기본 transition 불가 → @property 등록 필수. 미지원 브라우저는 즉시 전환 폴백 */
@property --scrim {
  syntax: '<color>';
  inherits: true;
  initial-value: transparent;
}
.bottom-scrim {
  transition: --scrim 0.8s ease; /* 배경 페이드(0.9s)와 시간 맞출 것 */
  background: linear-gradient(180deg, transparent, var(--scrim));
}

/* ---------- 13. 접근성 바닥선 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- 14. 스플래시 (웹 레이어 — OS 스플래시와 별개) ---------- */
.splash {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--bg-grad-a) center / cover no-repeat;
  /* background-image: url(assets/splash.png); ← 에셋 준비되면 */
  transition: opacity 0.45s;
}
.splash.hide { opacity: 0; }