:root {
  --bg: #f3efe6;
  --card: #fffdf8;
  --text: #2c2a25;
  --dim: #6b675e;   /* WCAG AA(4.5:1) 충족하도록 어둡게 — 작은 회색 텍스트 다수가 이걸 씀 */
  --border: #e3ddd1;
  --accent: #c26339;
  --green: #5a7a5e;
  --radius: 10px;
  /* 에디토리얼 아틀라스 타이포 — 세리프 디스플레이 / 산세 본문(유형 대비 §A.3) */
  --font-body: 'Pretendard', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
}

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

/* Lucide 단색 아이콘(기능 UI) — currentColor로 테마 자동 연동, 1패밀리 일관성(§A.2) */
.ico { width: 1.3em; height: 1.3em; display: inline-block; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* 에디토리얼 디스플레이 세리프 — 워드마크·제목·점수·거리·티어 (나머지는 산세) */
header h1, #home h1, .stats-title, .result #pts, .result .dist, .rank-badge .tier {
  font-family: var(--font-display); font-optical-sizing: auto;
}
header h1, #home h1 { font-weight: 900; letter-spacing: -0.015em; }
.result #pts { font-weight: 900; letter-spacing: -0.01em; font-size: 2.1rem; }
.rank-badge .tier { font-weight: 800; font-size: 1.25rem; }
.stats-title { font-weight: 800; }

/* 종이 그레인 — 따뜻한 표면에 미세 질감(아틀라스 분위기, §A.2 깊이) */
.stats-card, .result, .feed-overlay { position: relative; }
.stats-card::before, .result::before, .feed-overlay::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  opacity: 0.5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}
.stats-card > *, .result > * { position: relative; z-index: 1; }   /* 콘텐츠는 그레인 위 */
#headerToggle .ico { transition: transform .18s ease; }
#headerToggle.flip .ico { transform: rotate(180deg); }

html, body { height: 100%; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
}

/* 지도 = 전체 배경 레이어(헤더 뒤까지, 독립). 헤더 토글해도 안 변함 */
#map { position: fixed; inset: 0; z-index: 0; }
/* UI = 지도 위 오버레이 컬럼. 빈 곳은 pointer-events 통과 → 지도 조작 */
.wrap {
  position: fixed; inset: 0; z-index: 1; max-width: none; margin: 0;
  padding: 0 0 calc(env(safe-area-inset-bottom, 0px) + 22px);   /* 하단 여백 → footer가 저작권 위로 */
  display: flex; flex-direction: column; gap: 6px; pointer-events: none;
}
.wrap > * { flex: 0 0 auto; pointer-events: auto; }       /* 헤더·버튼·결과는 클릭 받음 */
.stage { flex: 1 1 auto; min-height: 0; position: relative; pointer-events: none; }   /* 가운데=지도 통과, 사진 기준틀 */
/* 헤더·버튼·결과는 가운데 정렬 + 좌우 여백 (지도만 풀블리드) */
/* z-index 사다리(단일 출처): 지도1 < 사진오버레이10 < chrome버튼100 < zoom1000 < 모달1100 < toast1200 */
/* 상단바: 일반 흐름 — 헤더와 board가 겹침 없이 공간을 자동 분할. 사진은 board 안에서만 그려짐 */
.topbar {   /* 반투명 → 지도가 헤더 뒤로 비침 */
  padding-bottom: 12px;
  background: linear-gradient(180deg, rgba(245, 242, 236, 0.94) 60%, rgba(245, 242, 236, 0));
}
body.header-collapsed .topbar { display: none; }   /* 접기 = 상단바 숨김 → stage(사진 영역) 커짐, 지도는 불변 */
body.header-collapsed #cellPhoto.expanded { top: calc(env(safe-area-inset-top, 0px) + 46px); }   /* 접힘 시 사진 상단이 ▲·📊 버튼 행 아래에서 멈춤(absolute라 padding 무시 → top 직접) */
/* 앱바: 브랜드 좌정렬, 우측은 버튼 클러스터(토글·홈·도감) 공간 확보 → 겹침 구조적 방지 */
header { text-align: left; padding: 6px 14px 2px; padding-right: 150px; }
.chrome { display: contents; }   /* 자식 버튼이 각자 fixed라 레이아웃 기여 없음 */
/* 좌우 여백 넉넉히 → 바닥 우측 줌(+/−)·좌측 썸네일과 안 겹침 */
#guessBtn, .result { width: calc(100% - 112px); max-width: 480px; margin-left: auto; margin-right: auto; }
#skipBtn { width: auto; margin: 4px auto 0; padding: 7px 16px; font-size: 0.85rem; }   /* 강제 재플레이 탈출 — 작고 discreet */
footer { padding: 0 56px; }
header h1 { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; }
header h1 .pin { color: var(--accent); }
header .sub { color: var(--dim); font-size: 0.85rem; margin-top: 2px; }

.photo {
  max-width: 100%; max-height: 100%; width: auto; height: auto;   /* 셀에 맞춰 fit — 자연 비율, 띠 없음 */
  object-fit: contain;
  border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--card); display: block; cursor: zoom-in;
}
.photo-wrap { position: relative; display: flex; max-width: 100%; max-height: 100%; }
.zoom-badge {
  position: absolute; right: 8px; bottom: 8px;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 0.9rem;
  display: flex; align-items: center; justify-content: center; pointer-events: none;
}

.zoom-overlay {
  position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, 0.93);
  display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: none;
}
.zoom-img {
  transform-origin: 0 0; will-change: transform;
  user-select: none; -webkit-user-drag: none; max-width: 100%; max-height: 100%;
}
.zoom-close {
  position: fixed; top: 10px; right: 12px; width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.15); color: #fff; font-size: 1.3rem; padding: 0; line-height: 1;
}
.photo-fallback {
  width: 100%; max-height: 100%; min-height: 160px; border-radius: var(--radius);
  border: 1px dashed var(--accent); display: none;
  align-items: center; justify-content: center; text-align: center;
  color: var(--accent); font-size: 0.85rem; padding: 20px;
}

/* 첫 화면 정체성+전제(활성화) — 에디토리얼 워드마크 한 줄 */
.brand { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; letter-spacing: -0.01em; color: var(--text); }
.brand .pin { color: var(--accent); }
.brand .tag { font-family: var(--font-body); font-weight: 600; font-size: 0.8rem; color: var(--dim); margin-left: 6px; }
/* 온보딩 힌트: 상단바 최하단(고스트 아래) 중앙 알약 — 신규·첫 라운드·제출 전만 */
.hint {
  display: block; width: fit-content; max-width: 92%; margin: 8px auto 0;
  text-align: center; color: #fff; background: var(--accent);
  font-size: 0.82rem; font-weight: 700; line-height: 1.3;
  padding: 8px 18px; border-radius: 999px; box-shadow: 0 3px 12px rgba(194, 99, 57, 0.32);
}

/* 사진 = stage(헤더 안 쓰는 공간) 안 오버레이 — 펼침이 stage를 못 벗어남 → 헤더 침범·치솟음 불가 */
#cellPhoto {
  position: absolute; z-index: 10; overflow: hidden; pointer-events: auto;
  left: 10px; bottom: 10px;                             /* 접힘 썸네일 좌하단 */
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--card);
  box-shadow: 0 6px 22px rgba(54, 46, 38, 0.16);
  transition: opacity .18s ease;                        /* 지도 조작 중 페이드만 */
}
#cellPhoto.collapsed { width: 124px; height: 92px; cursor: pointer; box-shadow: 0 3px 12px rgba(54, 46, 38, 0.26); }
#cellPhoto.map-active { opacity: 0.4; }                 /* 지도 팬/줌 중 반투명 */
/* 펼침: stage 가득 채우되 투명+pointer-events:none → 여백은 지도로 통과(조작 가능).
   그 안에서 사진 묶음만 좌하단에 사진 크기로 hug + 클릭 받음. 버튼은 사진 묶음 기준 → 사진 위. */
/* 바깥 박스: stage 가득 + 크기 쿼리 컨테이너(확정) + 여백 지도통과. 사진 묶음을 좌하단에 */
#cellPhoto.expanded {
  top: 0; left: 0; right: 0; bottom: 0; padding: 10px;
  background: transparent; border: none; box-shadow: none; overflow: visible;
  pointer-events: none; container-type: size;
  display: flex; align-items: flex-end; justify-content: flex-start;
}
#cellPhoto .photo-wrap { width: 100%; max-width: none; max-height: none; }
/* 사진 묶음: 사진 크기로 hug(flex 아이템) → 버튼 기준틀이 곧 사진. 투명 통과 */
#cellPhoto.expanded .photo-wrap {
  display: flex; width: auto; height: auto; position: relative; pointer-events: none;
}
#cellPhoto.collapsed .photo-wrap { height: 100%; }
/* 사진: 부모(hug)가 아니라 컨테이너(=stage) 기준으로 크기 → 상수 없이 stage에 갇힘 */
#cellPhoto.expanded .photo {
  display: block; width: auto; height: auto; max-width: 100cqw; max-height: 100cqh;
  object-fit: contain; pointer-events: auto;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--card); box-shadow: 0 6px 22px rgba(54, 46, 38, 0.18);
}
#cellPhoto.expanded .photo-collapse { top: 7px; right: 7px; left: auto; bottom: auto; pointer-events: auto; }   /* 사진 우상단(박스가 사진에 hug) */
#cellPhoto.expanded .zoom-badge { display: none; }   /* 펼침에선 사진 탭으로 확대 */
#cellPhoto.collapsed .photo { width: 100%; height: 100%; object-fit: cover; border: none; border-radius: 0; }
#cellPhoto.collapsed .zoom-badge, #cellPhoto.collapsed .photo-collapse { display: none; }
.photo-collapse {
  position: absolute; top: 7px; right: 7px; width: auto; padding: 8px 14px; font-size: 0.74rem; min-height: 36px;
  background: rgba(0, 0, 0, 0.6); color: #fff; border-radius: 999px; z-index: 6;
}
/* 접기 온보딩 힌트: 접기 버튼(우상단) 바로 아래 떠있는 알약. 신규·첫 라운드·제출 전만 */
.collapse-hint {
  position: absolute; top: 50px; right: 7px; z-index: 7; max-width: 78%;
  background: rgba(0, 0, 0, 0.72); color: #fff; font-size: 0.74rem; line-height: 1.35;
  padding: 8px 12px; border-radius: 12px; text-align: left; pointer-events: none;
  animation: ph-fade2 .3s ease both;
}
.collapse-hint::after {   /* 위쪽(접기 버튼)을 가리키는 작은 화살표 */
  content: ''; position: absolute; top: -6px; right: 16px;
  border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid rgba(0, 0, 0, 0.72);
}
@keyframes ph-fade2 { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* 사진 정보(촬영자 등 비-위치 메타) — 펼침에서만 좌상단. 빈 값이면 숨김 */
.photo-info {
  position: absolute; top: 7px; left: 7px; max-width: 70%; z-index: 6; display: none;
  padding: 4px 10px; font-size: 0.74rem; line-height: 1.3;
  background: rgba(0, 0, 0, 0.55); color: #fff; border-radius: 999px;
  pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#cellPhoto.expanded .photo-info:not(:empty) { display: block; }

/* 융합 라운드 사진 페이저 — 하단 중앙 오버레이(펼침 상태만) */
.photo-pager {
  position: absolute; bottom: 9px; left: 50%; transform: translateX(-50%); z-index: 7;
  display: flex; align-items: center; gap: 10px;
  padding: 3px 8px; background: rgba(0, 0, 0, 0.55); border-radius: 999px;
}
#cellPhoto.collapsed .photo-pager { display: none !important; }
.photo-pager .pg-arrow {
  width: auto; background: none; border: none; color: #fff;
  font-size: 1.5rem; line-height: 1; padding: 4px 14px; border-radius: 0; touch-action: manipulation;
}
.photo-pager .pg-dots { display: flex; gap: 5px; align-items: center; }
.photo-pager .pg-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.4); }
.photo-pager .pg-dots i.on { background: #fff; }


button {
  font-family: inherit; font-size: 1rem; font-weight: 600; cursor: pointer;
  border: none; border-radius: var(--radius); padding: 13px 20px; width: 100%;
  transition: transform .08s, background .15s, opacity .15s;
}
button:active { transform: scale(0.98); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:disabled { opacity: .4; cursor: not-allowed; }
.btn-ghost { background: transparent; color: var(--dim); border: 1px solid var(--border); }
.btn-share { background: var(--green); color: #fff; margin-top: 10px; }

.result {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px; margin-top: 14px; text-align: center; display: none;
}
.result.show { display: block; animation: result-in .5s cubic-bezier(.2, .8, .25, 1); }
/* 결과 접기 토글: 상단 손잡이(셰브론). 접으면 다음 버튼만 남고 stage가 커져 지도·썸네일 시원하게 */
.result-toggle { display: block; width: auto; margin: -8px auto 2px; padding: 4px 18px; background: none; border: none; color: var(--dim); min-height: 30px; }
.result-toggle .ico { width: 22px; height: 22px; transition: transform .2s ease; }
#result.min .result-toggle .ico { transform: rotate(180deg); }   /* 접힘 = 펼치기 셰브론(위) */
.result #nextBtn { margin-top: 16px; }   /* 위 요소(연속·힌트)와 붙지 않게 */
#result.min #nextBtn { margin-top: 0; }   /* 접힘 땐 버튼만 있으니 여백 불필요 */
#result.min { padding: 6px 20px 14px; }
#result.min > :not(.result-toggle):not(#nextBtn) { display: none; }   /* 접힘: 토글 + 다음 버튼만 */
@keyframes result-in { from { opacity: 0; transform: translateY(26px) scale(.97); } to { opacity: 1; transform: none; } }
.result.show #pts { animation: pts-pop .34s .06s cubic-bezier(.2, 1.4, .3, 1) both; }   /* 점수만 살짝 팝 — 절제(1개 효과) */
@keyframes pts-pop { 0% { transform: scale(.7); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.result .bar { font-size: 1.6rem; letter-spacing: 3px; margin-bottom: 6px; }
.result .pts { color: var(--dim); font-size: 0.9rem; }
.result #pts { color: var(--text); }   /* 크기·웨이트·세리프는 상단 디스플레이 블록에서 (점수=거리보다 위·크게) */
.result .dist { color: var(--dim); font-size: 1rem; font-weight: 600; margin-top: 2px; }
.result .vs { font-size: 1.05rem; font-weight: 800; margin-top: 8px; }
.result .vs.win { color: var(--green); }
.result .vs.lose { color: var(--accent); }
.result .place { margin-top: 8px; font-weight: 600; }
.result .streak { margin-top: 12px; color: var(--accent); font-weight: 700; font-size: 0.9rem; }
.stats-btn {   /* 헤더와 무관하게 항상 뷰포트 우상단 고정 → 접기/펴기에도 안 움직임 */
  position: fixed; top: 8px; right: 8px; z-index: 100; width: auto; padding: 8px 12px;
  display: inline-flex; align-items: center; justify-content: center; color: var(--text);
  font-size: 1.05rem; background: var(--card); border: 1px solid var(--border); border-radius: 999px;
}
/* 우상단 3버튼 가로 배치(겹침 방지): [토글][홈][도감], 오른쪽부터 도감 */
#atlasBtn { right: 8px; }
#homeBtn { right: 58px; }
#headerToggle { right: 108px; }

.stats-overlay {
  position: fixed; inset: 0; z-index: 1100; background: rgba(0, 0, 0, 0.5);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.stats-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 26px 20px 22px; max-width: 360px; width: 100%; text-align: center; position: relative;
}
.stats-close { position: absolute; top: 4px; right: 4px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; padding: 0; background: none; border: none; color: var(--dim); font-size: 1.2rem; }   /* 44px급 터치 타깃 */
.stats-title { font-size: 1.1rem; font-weight: 800; margin-bottom: 14px; }
.stats-bars { font-size: 1rem; line-height: 1.7; letter-spacing: 2px; }
.detail-list { max-height: 55vh; overflow-y: auto; text-align: left; font-size: 0.85rem; margin-top: 4px; }
.detail-row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 2px; border-bottom: 1px solid var(--border); }
.detail-row.dim { color: var(--dim); }
.detail-row b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.detail-row .d-rank, .cap-mine .d-rank { color: var(--dim); font-weight: 400; font-size: 0.74rem; margin-left: 6px; }
.rank-badge { margin-top: 12px; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }   /* 꾹 눌러 공유 */
.rank-badge .tier { display: block; font-size: 1.1rem; font-weight: 800; color: var(--accent); letter-spacing: -0.01em; }
.rank-badge .rank-sub { display: block; font-size: 0.74rem; color: var(--dim); margin-top: 2px; }
.next-tier-card { font-size: 0.85rem; color: var(--accent); font-weight: 700; background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: var(--radius); padding: 8px 12px; margin: 0 0 12px; }

/* 홈 허브 — 성격별 버튼 묶음 (플레이 / 계정·동기화) */
.home-group { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); text-align: left; }
.home-group .home-label { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--dim); margin-bottom: 8px; }

/* 저작권·줌은 화면 맨 아래(노치 safe-area만). UI는 그 위로 올리고 버튼은 줌과 좌우로 안 겹치게 */
.leaflet-bottom { bottom: env(safe-area-inset-bottom, 0px); }

/* 사진 피드 (뷰어 — 소셜 아님) */
.feed-overlay { position: fixed; inset: 0; z-index: 1150; background: var(--bg); display: flex; flex-direction: column;
  animation: feed-slide-in .34s cubic-bezier(.16, 1, .3, 1) both; }   /* 우측에서 진입 — ease-out(끝에서 완만히 감속) */
@keyframes feed-slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
/* 뒤로가기: 우측으로 빠지며 게임 노출(ease-in, 가속) */
.feed-overlay.feed-closing { animation: feed-slide-out .28s cubic-bezier(.4, 0, 1, 1) both; }
@keyframes feed-slide-out { from { transform: translateX(0); } to { transform: translateX(100%); } }
/* 도감 상단 바: 좌상단 뒤로가기(게임 복귀). 노치 safe-area 포함 상단 여백 */
.feed-top { flex-shrink: 0; display: flex; align-items: center; padding: calc(env(safe-area-inset-top, 0px) + 10px) 10px 8px; }
.feed-back { width: auto; min-height: 40px; padding: 6px 10px; background: none; border: none; color: var(--text);
  display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; }
.feed-back .ico { width: 25px; height: 25px; }
.feed-list { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 14px 0 calc(env(safe-area-inset-bottom, 0px) + 84px); }   /* 하단 패딩 = 플로팅 내비 가림 방지 */
/* 전체 사진 = 내 사진과 동일한 카드 뷰(.feed-item) + 공용 lazyList */
.lazy-sentinel { height: 1px; }
/* 탭 패널 가시성 = 단일 출처(#feed[data-tab]). 인라인 display 토글 금지 → 캐스케이드 충돌 차단(SSOT) */
#feedAll, #feedUploads, #feedMine { display: none; }
#feed[data-tab="all"] #feedAll { display: block; }
#feed[data-tab="mine"] #feedMine { display: block; }
#feed[data-tab="uploads"] #feedUploads { display: block; }

/* 하단 내비바: 탭 + 업로드 + 게임으로 (동일 레벨) */
/* 플로팅 내비: 하단 중앙 떠있는 알약 섬(콘텐츠 위로 부유). 흐름 밖이라 스크롤 패널은 하단 패딩으로 가림 방지 */
.feed-nav { position: fixed; left: 50%; transform: translateX(-50%); z-index: 1156;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
  display: flex; gap: 4px; width: auto; padding: 5px;
  background: var(--card); border: 1px solid var(--border); border-radius: 999px;
  box-shadow: 0 8px 24px rgba(44, 42, 37, 0.2); }
.feed-nav-btn { position: relative; flex: 0 0 auto; width: auto; min-height: 44px; background: none; color: var(--dim);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px 16px; border-radius: 999px; }
.feed-nav-btn .ico { width: 21px; height: 21px; }
.feed-nav-btn .lb { font-size: 0.7rem; font-weight: 700; }
.feed-nav-btn.active { color: #fff; background: var(--accent); }
/* 컨테이너를 이미지 실제 폭에 맞춰 축소(fit-content) → 캡션 폭=이미지 폭 → 좌측정렬 캡션이 이미지 왼끝에 딱 붙음.
   컨테이너만 margin auto로 중앙정렬. 폭=화면 연동(풀폭), 세로=가용높이로 제한(왜곡·크롭·여백띠 없음) */
.feed-item { width: fit-content; max-width: 100%; margin: 0 auto 16px; }
.feed-item img { display: block; width: auto; height: auto;
  max-width: 100%; max-height: var(--photo-max, 72vh); background: var(--card); }
.feed-item .cap { padding: 6px 12px 0; font-size: 0.85rem; color: var(--text); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* 전체사진 = 도감 플레이트 캡션: 인덱스 번호(디냘 산세) + credit(Fraunces 세리프, §A.3 유형 대비) */
.feed-item .cap-atlas { flex-direction: column; align-items: flex-start; gap: 1px; padding: 9px 12px 0; }
.feed-item .cap-atlas .atlas-no { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; color: var(--dim); }
.feed-item .cap-atlas .atlas-credit { font-family: var(--font-display); font-optical-sizing: auto; font-size: 0.96rem; line-height: 1.3; color: var(--text); }
.feed-item .cap .ph-stat { display: block; font-family: var(--font-body); font-size: 0.74rem; color: var(--dim); margin-top: 3px; }
/* 내 사진 = 같은 도감 캡션(No.###/미승인 + 세리프) + 삭제 버튼 우측 */
.feed-item .cap-mine { flex-direction: row; align-items: center; justify-content: space-between; }
.feed-item .cap-mine .atlas-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; }
.feed-item .cap-mine .mine-score { flex-shrink: 0; font-family: var(--font-display); font-weight: 800; }
.feed-item .cap-mine .mine-score .d-rank { font-family: var(--font-body); }
.feed-item .cap .up-del { width: auto; background: none; font-size: 1rem; padding: 2px 6px; opacity: 0.6; flex-shrink: 0; }
.feed-item .cap .up-del:hover { opacity: 1; }
.feed-item .cap .pend { font-size: 0.74rem; color: #c0392b; background: color-mix(in srgb, #c0392b 12%, transparent); padding: 1px 7px; border-radius: 999px; margin-left: 4px; }
.up-loading { text-align: center; color: var(--dim); font-size: 0.85rem; padding: 30px 0; }
/* 내 사진 미업로드 빈 상태 — 출제자 기대감 훅 */
.up-empty { max-width: 340px; margin: 0 auto; padding: 44px 24px; text-align: center; }
.up-empty-emoji { font-size: 2.4rem; margin-bottom: 14px; }
.up-empty-title { font-family: var(--font-display); font-optical-sizing: auto; font-weight: 800;
  font-size: 1.25rem; line-height: 1.3; color: var(--text); margin-bottom: 10px; }
.up-empty-body { font-size: 0.88rem; line-height: 1.55; color: var(--dim); margin-bottom: 16px; }
.up-empty-cta { font-size: 0.82rem; font-weight: 700; color: var(--accent); }
.up-empty-login { display: block; max-width: 280px; margin: 4px auto 0; }
/* 인증 상태 한 줄(홈 계정 그룹) */
.auth-status { font-size: 0.76rem; line-height: 1.4; margin-bottom: 8px; word-break: break-all; }
.auth-status.out { color: var(--dim); }
.auth-status.in { color: var(--green); font-weight: 700; }
.auth-status.warn { color: #c0392b; font-weight: 700; }
/* 결과 화면 단서 해설 — 무엇을 보고 추론하는지 학습(성장 루프) */
.clue-note { margin: 8px auto 0; max-width: 460px; text-align: left; font-size: 0.82rem; line-height: 1.5;
  color: var(--text); background: color-mix(in srgb, var(--accent) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); border-radius: 10px; padding: 9px 13px; }
/* 내 사진 업로드 FAB — 우하단 떠있는 + 버튼(하단 내비 위). 탭 비활성 시 #feedUploads display:none으로 같이 숨음 */
.upload-fab {
  position: fixed; right: 18px; bottom: calc(env(safe-area-inset-bottom, 0px) + 66px); z-index: 1155;
  width: 56px; height: 56px; padding: 0; border: none; border-radius: 999px;
  background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(194, 99, 57, 0.42);
}
.upload-fab .ico { width: 26px; height: 26px; stroke-width: 2.4; }
/* 내 기록 탭 */
/* 좌우 패딩 0 → 사진 카드 풀블리드(전체사진과 일관). 여백 필요한 요소에만 좌우 여백 환원(아래) */
.feed-mine { flex: 1; overflow-y: auto; padding: 16px 0 calc(env(safe-area-inset-bottom, 0px) + 84px); width: 100%; margin: 0 auto; text-align: center; }
.feed-mine .next-tier-card { margin-left: 16px; margin-right: 16px; }
/* ④ 단서 숙련도 — 점진적 단계 + 진행 바(정보적, 포인트 아님) */
.read-cues { margin: 0 16px 14px; text-align: left; }
.read-cues .readcues-title { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.03em; color: var(--dim); margin-bottom: 8px; }
.read-cues .readcue { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.read-cues .rc-name { font-size: 0.82rem; font-weight: 700; color: var(--text); flex: 0 0 116px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.read-cues .rc-lv { font-size: 0.74rem; font-weight: 800; color: var(--accent); flex: 0 0 auto; min-width: 46px; }
.read-cues .rc-bar { flex: 1; height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 14%, transparent); overflow: hidden; }
.read-cues .rc-bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width .4s ease; }
.read-cues .rc-xp { flex: 0 0 auto; font-size: 0.68rem; font-variant-numeric: tabular-nums; color: var(--dim); min-width: 64px; text-align: right; }
/* 단서 숙련 마일스톤 모달 */
.milestone-card { max-width: 320px; text-align: center; }
.milestone-card .ms-emoji { font-size: 3rem; animation: ph-fade2 .4s ease both; }
.milestone-card .ms-title { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; color: var(--accent); margin: 6px 0 12px; }
.milestone-card .ms-line { font-size: 1rem; font-weight: 700; color: var(--text); margin: 4px 0; }
.feed-mine .detail-row { padding-left: 16px; padding-right: 16px; }   /* 목록뷰 행만 들여쓰기(사진 카드는 풀블리드) */
.mine-controls { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 4px 0 10px; }
.mine-sort { display: inline-flex; gap: 4px; background: var(--card); border: 1px solid var(--border); border-radius: 999px; padding: 3px; }
.mine-sort-btn { width: auto; min-height: 38px; background: none; color: var(--dim); font-size: 0.85rem; font-weight: 700; padding: 8px 16px; border-radius: 999px; }
.mine-sort-btn.active { background: var(--accent); color: #fff; }
.mine-empty { color: var(--dim); font-size: 0.85rem; padding: 30px 0; }
.feed-mine .detail-list { max-height: none; overflow: visible; }   /* 스크롤은 feed-mine이 담당(중첩 방지) */
.mine-row { align-items: center; gap: 10px; }
.mine-thumb { width: 46px; height: 46px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); flex-shrink: 0; background: var(--card); }
.mine-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lazy-sentinel { height: 1px; }   /* 점진 렌더 트리거(보이면 다음 배치) */

/* 사진 업로드 폼 (화이트리스트 전용) */
#upload { z-index: 1160; }   /* feed(1150) 위 — 내 사진 탭을 덮는 다이얼로그 */
.upload-form { display: flex; flex-direction: column; gap: 8px; text-align: left; margin-top: 6px; }
.upload-form input[type=url], .upload-form input[type=text], .upload-form input[type=number] {
  width: 100%; padding: 9px 11px; font-size: 0.9rem; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--bg); color: var(--text);
}
.up-file { display: block; text-align: center; padding: 10px; border: 1px dashed var(--accent); border-radius: var(--radius); color: var(--accent); font-weight: 700; font-size: 0.85rem; cursor: pointer; }
/* 업로드 모달: 화면 세로를 넘지 않게 카드 높이 제한, 폼만 스크롤(닫기/제목은 고정) */
#upload .stats-card { max-height: calc(100dvh - 40px); display: flex; flex-direction: column; }
#upload .upload-form { overflow-y: auto; min-height: 0; }
.up-or { text-align: center; font-size: 0.74rem; color: var(--dim); }
.up-done { text-align: center; font-size: 0.85rem; font-weight: 600; color: var(--accent); padding: 9px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--card); }
.up-preview { width: 100%; max-height: 180px; object-fit: contain; border-radius: var(--radius); border: 1px solid var(--border); background: var(--card); }
.up-pick-hint { font-size: 0.74rem; color: var(--dim); }
.up-map { width: 100%; height: 200px; border-radius: var(--radius); border: 1px solid var(--border); overflow: hidden; }
.up-msg { font-size: 0.85rem; min-height: 1.1em; }
.up-msg.err { color: #c0392b; } .up-msg.ok { color: var(--accent); }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 1200;
  background: var(--text); color: #fff; padding: 10px 18px; border-radius: 999px;
  font-size: 0.85rem; opacity: 0; transition: opacity .2s; pointer-events: none;
}
.toast.show { opacity: 1; }

/* '새 화면' 빨간 점 — 노출은 .has-dot(JS가 seenScreens 상태에서 유도). 호스트의 기존 positioning 위에 점만 얹음 */
#homeStats { position: relative; }   /* 정적 버튼 → 점 기준점 확보(고정형 .stats-btn은 이미 fixed) */
.has-dot::after {
  content: ''; position: absolute; top: 5px; right: 6px;
  width: 9px; height: 9px; border-radius: 50%;
  background: #ff3b30; box-shadow: 0 0 0 2px var(--bg); pointer-events: none;
}

/* 첫 진입 튜토리얼 — 화면 위 고정 버블, X로 닫기(display 토글 없이 가시성만 전환) */
.screen-tut {
  position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 56px);
  transform: translateX(-50%); z-index: 1210;
  max-width: min(420px, calc(100vw - 32px));
  display: flex; align-items: flex-start; gap: 8px;
  background: var(--accent); color: #fff;
  padding: 12px 12px 12px 16px; border-radius: 14px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s;
}
.screen-tut.show { opacity: 1; visibility: visible; pointer-events: auto; }
.screen-tut-msg { font-size: 0.86rem; line-height: 1.45; font-weight: 600; }
.screen-tut-close {
  flex: 0 0 auto; width: 28px; height: 28px; margin: -3px -2px 0 0; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.18); border: none; border-radius: 50%;
  color: #fff; font-size: 0.85rem; cursor: pointer;
}

/* 설치 권유 칩 — 하단 중앙(바텀 UI 위), 닫기 가능 */
.install-chip {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 95;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 92px);
  display: flex; align-items: center; gap: 2px;
  background: var(--accent); color: #fff; border-radius: 999px;
  padding: 2px 4px 2px 12px; box-shadow: 0 4px 16px rgba(54, 46, 38, 0.24);
}
.install-chip button { width: auto; background: none; color: #fff; padding: 8px 4px; font-size: 0.85rem; font-weight: 700; }
.install-chip #installX { padding: 8px 10px; opacity: 0.85; font-weight: 400; }

footer { text-align: center; color: var(--dim); font-size: 0.74rem; margin-top: 6px; }

/* 모션 민감 사용자 배려(S5) — 전환·애니메이션 최소화 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}