/* app.css — 통합 앱 셸 레이아웃. 타임라인 style.css(먼저 로드) 위에 얹는다.
 * 타임라인 css 가 html,body 를 flex-column·overflow:hidden 으로 잡으므로,
 * #app-content(flex:1) 가 화면 전체를 채우고 #app-tabbar 는 떠 있는 오버레이(absolute)로
 * 그 위에 얹힌다 — 콘텐츠가 화면 끝까지 흐르고 알약만 뜬다(아래 탭 바 절 참고).
 * CSS 변수(--bg 등)는 timeline style.css :root 재사용. */

body { display: flex; flex-direction: column; }

/* ── 콘텐츠 영역 — 뷰들을 겹쳐 쌓고 active 만 표시 ── */
#app-content { position: relative; flex: 1 1 auto; min-height: 0; }
.app-view { position: absolute; inset: 0; }
/* [hidden] 은 #view-path{display:flex}(ID 우선순위)를 이겨야 하므로 !important. */
.app-view[hidden] { display: none !important; }

/* 여정 뷰 = 타임라인(헤더 + #stage). timeline css 의 header{flex-shrink:0}·#stage{flex:1} 가
   이 flex-column 컨텍스트 안에서 동작한다. */
#view-path { display: flex; flex-direction: column; }

/* 스크롤 뷰(프로필·수첩·여비) — body overflow:hidden 을 뷰 단위 스크롤로 상쇄 */
.app-scroll { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; user-select: text; -webkit-user-select: text; }

/* ── 탭 바 — 떠 있는 알약 (배경 스트립 없음) ──
 * 배경·상단 보더를 두지 않아 콘텐츠(타임라인)가 화면 끝까지 흐르고, 그 위에 알약·액션 버튼만 뜬다.
 * 컨테이너는 터치를 통과시키고(pointer-events:none) 알약·버튼만 받는다.
 * 층: 팝오버(20)·삭제바(25) 위 / 모달 백드롭(30)·시트(31) 아래 — 모달이 열리면 메뉴도 함께 덮인다. */
#app-tabbar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 28;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  pointer-events: none;
}
#app-tabbar .tab-main, #app-tabbar .tab-action { pointer-events: auto; }

/* ── 하단 고정 오버레이 층 정리 ──
 * 삭제 액션바(비모달)는 떠 있는 알약과 겹치지 않게 --tabbar-h(shell.js 가 실측 주입)만큼 위에서 시작.
 * 옵션/폼 시트(모달)는 bottom:0 그대로 — 백드롭이 메뉴까지 덮는 표준 모달 동작.
 * 표준(단독) 타임라인 proto 는 app.css 를 로드하지 않으므로 영향 없음. */
.del-bar { bottom: calc(var(--tabbar-h, 0px) + 10px); }
/* 리퀴드 글래스 — 반투명 유리 뒤로 타임라인이 비치고(블러+채도 부스트),
 * 상단 1px 스펙큘러 하이라이트(inset)로 유리 두께감을 준다. */
.tab-main {
  display: flex; align-items: stretch; gap: 2px;
  /* 흰 광택 레이어 아래 어두운 베이스 틴트 — 밝은 콘텐츠(보라 막대 등) 위에서도 라벨 가독성 유지 */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.03)),
    rgba(10, 10, 14, 0.42);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px; padding: 4px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05);
}
/* backdrop-filter 미지원 브라우저 — 유리 대신 기존 불투명 패널로 가독성 유지 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tab-main { background: var(--panel); }
}
.tab {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 62px; padding: 6px 12px; border-radius: 999px;
  color: var(--muted); background: transparent; font-family: inherit; cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.tab:hover { color: var(--text); }
.tab.is-active {
  background: rgba(255, 255, 255, 0.16); color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14); /* 활성 알약도 유리 한 겹 */
}
.tab-ic { font-size: 15px; line-height: 1; }
.tab-lb { font-size: 11px; font-weight: 600; letter-spacing: 0.01em; }

.tab-action {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 400; line-height: 1;
  color: #0b0b0d; cursor: pointer;
  /* 액션 버튼도 틴트 유리 — 브랜드 베이지를 살짝 투과시키고 상단 하이라이트 */
  background: linear-gradient(180deg, rgba(233, 219, 183, 0.92), rgba(203, 186, 142, 0.88));
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: transform 0.12s, background 0.15s;
}
.tab-action:hover { background: linear-gradient(180deg, rgba(240, 228, 197, 0.95), rgba(214, 198, 156, 0.9)); }
.tab-action:active { transform: scale(0.94); }

/* ── 허브(프로필·수첩·여비 공용 카드 UI) ── */
/* 하단 패딩: 떠 있는 탭바 뒤에 마지막 카드가 숨지 않도록 --tabbar-h 만큼 확보 */
.hub { max-width: 720px; margin: 0 auto; padding: 28px 20px calc(24px + var(--tabbar-h, 72px)); }
.hub-eyebrow { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: #b8a98a; margin: 0 0 8px; }
.hub-title { font-size: 26px; font-weight: 680; letter-spacing: -0.01em; margin: 0 0 6px; }
.hub-lede { color: var(--muted); line-height: 1.6; margin: 0 0 24px; }
.hub h2 { font-size: 13px; letter-spacing: 0.05em; color: #8c857a; margin: 26px 0 12px; font-weight: 600; }

.card {
  display: block; background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; padding: 18px; margin-bottom: 12px; text-align: left;
  width: 100%; color: inherit; font-family: inherit;
}
button.card { cursor: pointer; transition: border-color 0.15s, transform 0.15s, background 0.15s; }
button.card:hover { border-color: #5a4f38; background: #221f18; transform: translateY(-1px); }
.card-k { font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: #8c857a; margin: 0 0 6px; }
.card-v { font-size: 20px; font-weight: 650; margin: 0; }
.card-sub { color: var(--muted); font-size: 13px; margin: 4px 0 0; line-height: 1.5; }

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.stat-row .card { margin-bottom: 0; }

.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); background: #0d0d0f; border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; margin: 0 6px 6px 0; }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }

.deeplinks { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.deeplinks button { padding: 10px 16px; border-radius: 10px; background: #0d0d0f; color: var(--text); border: 1px solid var(--line); font-family: inherit; font-size: 13px; cursor: pointer; }
.deeplinks button:hover { border-color: #3f3f46; }

.wip-note { color: var(--dim); font-size: 12px; margin-top: 18px; line-height: 1.6; }