/* ==========================================================================
   SAFE-ON 사용자 앱 — 디자인 시스템
   톤: 블루(#2F6BFF) 메인 + 화이트 + 오렌지(#FF6A2C) 신고버튼
   모바일 웹뷰 (max-width 430px)
   ========================================================================== */

@font-face {
  font-family: 'GmarketSans';
  font-weight: 500;
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'GmarketSans';
  font-weight: 700;
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
  font-display: swap;
}

:root{
  --bg:#F3F6FB; --surface:#FFFFFF; --surface-2:#F7F9FC;
  --ink:#1A2440; --ink-2:#5A6B86; --ink-3:#93A1B8; --line:#E7ECF4;

  --blue:#2F6BFF; --blue-d:#1F54D6; --blue-soft:#EAF1FF;
  --navy:#16306B;                 /* 스플래시/로그인 헤드 카피 */
  --accent:#FF6A2C; --accent-d:#F2551A;   /* 오렌지 포인트(필수표시·알림점 등, FAB는 파랑) */

  /* 상태색 (badge--{styleKey}) — §4-1 7단계 */
  --st-received:#2F6BFF;  --st-confirmed:#7A5CFF; --st-progress:#FF8A00;
  --st-done:#16B364;      --st-rejected:#E5484D;  --st-canceled:#8A97AD;
  --st-unprocessable:#B4562E;

  /* 위험도 (risk--{styleKey}) — 없음은 중립 회색, 긴급은 높음보다 진한 적색 */
  --risk-none:#8A97AD;
  --risk-low:#16B364; --risk-medium:#FF8A00; --risk-high:#E5484D; --risk-critical:#B4232A;
  --confidence:#FF8A00;           /* 신뢰도 칩 */

  --kakao:#FEE500; --naver:#03C75A;

  --grad-blue:linear-gradient(135deg,#2F6BFF 0%,#4F8BFF 100%);  /* 스탯카드/포인트카드 */
  --grad-hero:linear-gradient(170deg,#FFFFFF 0%,#EAF1FF 58%,#DCEAFF 100%); /* 스플래시/로그인 배경 */

  --radius:16px; --radius-sm:12px; --radius-lg:22px;
  --shadow:0 6px 20px rgba(20,40,80,.07);
  --shadow-lg:0 16px 40px rgba(20,40,80,.16);
  --nav-h:62px; --maxw:430px;

  --font-body:'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --font-display:'GmarketSans','Pretendard Variable',sans-serif;
}

/* ---------- 베이스 ---------- */
*{ margin:0; padding:0; box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  /* 탭할 때 안드로이드 웹뷰가 씌우는 파란 사각형을 없앤다 — 네이티브 앱에는 없는 효과라
     버튼마다 파란 박스가 번쩍여 웹페이지처럼 보였다. 눌린 느낌은 :active 로 준다. */
  -webkit-tap-highlight-color:transparent;
}
body{
  font-family:var(--font-body);
  background:#DCE4F0;
  color:var(--ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  /* 길게 눌렀을 때 글자가 드래그로 선택되거나(파란 블록) 복사 메뉴가 뜨는 것을 막는다.
     읽기 전용 UI 라 선택할 이유가 없고, 스크롤하려다 텍스트가 잡히면 조작이 끊긴다.
     실제로 선택이 필요한 입력 요소만 아래에서 되돌린다. */
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}
/* 입력·편집 요소는 선택·복사가 가능해야 한다 (위 body 규칙의 예외) */
input, textarea, select, [contenteditable]{
  -webkit-user-select:text;
  user-select:text;
}
/* 이미지 길게 눌러 끌어내기(고스트 이미지) 방지 */
img{ -webkit-user-drag:none; user-drag:none; }
#app{
  position:relative;
  max-width:var(--maxw);
  margin:0 auto;
  min-height:100dvh;
  background:var(--bg);
  box-shadow:0 0 60px rgba(20,40,80,.12);
  overflow-x:clip;
}
button{ font-family:inherit; border:0; background:none; cursor:pointer; color:inherit; }
a{ color:inherit; text-decoration:none; }
input,textarea,select{ font-family:inherit; }
img{ display:block; max-width:100%; }
:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; border-radius:4px; }
[hidden]{ display:none !important; }

/* ---------- 레이아웃 ---------- */
.page{ padding:18px 20px calc(var(--nav-h) + 96px); }
.page--bare{ padding-bottom:32px; }

.section-title{
  font-size:15px; font-weight:800; color:var(--ink);
  display:flex; align-items:center; justify-content:space-between;
  margin:24px 0 12px;
}
.section-title .more{
  font-size:12px; font-weight:600; color:var(--ink-3);
  display:flex; align-items:center; gap:2px;
}

/* ---------- 앱바 / 헤더 ---------- */
.appbar{
  display:flex; align-items:center; gap:10px;
  padding:16px 20px 12px;
}
.appbar__loc{
  display:flex; align-items:center; gap:6px;
  font-size:15px; font-weight:800; color:var(--ink);
  min-width:0;
}
.appbar__loc svg{ color:var(--blue); flex:none; }
.appbar__loc span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.appbar__spacer{ flex:1; }

.icon-btn{
  width:40px; height:40px; flex:none;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--surface);
  color:var(--ink-2);
  box-shadow:var(--shadow);
  transition:transform .15s ease;
}
.icon-btn:active{ transform:scale(.92); }

.subbar{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; gap:8px;
  padding:14px 16px;
  background:linear-gradient(to bottom,var(--bg) 78%,transparent);
}
.subbar > a, .subbar > button{
  width:40px; height:40px; flex:none;
  display:grid; place-items:center;
  color:var(--ink); border-radius:50%;
}
.subbar > a:active{ background:rgba(20,40,80,.06); }
.subbar__title{ font-size:17px; font-weight:800; flex:1; text-align:center; }
.subbar__side{ width:40px; flex:none; }

/* ---------- 검색 / 칩 ---------- */
.search{
  display:flex; align-items:center; gap:8px;
  margin:0 20px 12px;
  background:var(--surface);
  border-radius:14px;
  padding:12px 14px;
  box-shadow:var(--shadow);
}
.search svg{ color:var(--ink-3); flex:none; }
.search input{
  flex:1; border:0; outline:0; font-size:14px; background:transparent; color:var(--ink);
}
.search input::placeholder{ color:var(--ink-3); }

.chips{
  display:flex; gap:8px;
  padding:0 20px 12px;
  overflow-x:auto;
  scrollbar-width:none;
}
.chips::-webkit-scrollbar{ display:none; }
.chip{
  flex:none;
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px;
  border-radius:999px;
  background:var(--surface);
  border:1px solid var(--line);
  font-size:13px; font-weight:700; color:var(--ink-2);
  white-space:nowrap;
  transition:all .18s ease;
}
.chip:active{ transform:scale(.96); }
.chip.on{
  background:var(--blue);
  color:#fff;
  border-color:transparent;
  box-shadow:0 6px 16px rgba(47,107,255,.35);
}
/* 아이콘+라벨 카테고리 칩 */
.cat-chip{
  flex:none;
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 13px 8px 11px;
  border-radius:999px;
  background:var(--surface);
  border:1px solid var(--line);
  font-size:13px; font-weight:700; color:var(--ink-2);
  white-space:nowrap;
  transition:all .18s ease;
}
.cat-chip svg{ color:var(--blue); flex:none; }
.cat-chip:active{ transform:scale(.96); }
.cat-chip.on{
  background:var(--blue); color:#fff; border-color:transparent;
  box-shadow:0 6px 16px rgba(47,107,255,.35);
}
.cat-chip.on svg{ color:#fff; }

/* ---------- 버튼 ---------- */
.btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%;
  padding:15px;
  border-radius:14px;
  font-size:15px; font-weight:700;
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s;
}
.btn:active{ transform:scale(.98); }
.btn--lg{ padding:17px; font-size:16px; border-radius:16px; }
.btn--primary{ background:var(--blue); color:#fff; box-shadow:0 10px 24px rgba(47,107,255,.32); }
.btn--primary:active{ background:var(--blue-d); }
.btn--accent{ background:var(--accent); color:#fff; box-shadow:0 10px 24px rgba(255,106,44,.34); }
.btn--accent:active{ background:var(--accent-d); }
.btn--ghost{ background:var(--surface); border:1px solid var(--line); color:var(--ink-2); }
.btn--kakao{ background:var(--kakao); color:#191600; }
.btn--naver{ background:var(--naver); color:#fff; }
.btn--google{ background:#fff; color:var(--ink); border:1px solid var(--line); }
.btn--daedaegu{ background:var(--navy); color:#fff; }
.btn:disabled{ opacity:.42; box-shadow:none; cursor:not-allowed; }
.btn:disabled:active{ transform:none; }

/* ---------- 상태 배지 ---------- */
.badge{
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 10px;
  border-radius:999px;
  font-size:11px; font-weight:800;
  line-height:1.4;
}
.badge::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
.badge--received{ background:rgba(47,107,255,.12);  color:var(--st-received); }
.badge--confirmed{ background:rgba(122,92,255,.14); color:var(--st-confirmed); }
.badge--progress{ background:rgba(255,138,0,.15);   color:#D97400; }
.badge--done{     background:rgba(22,179,100,.14);  color:#0E9655; }
.badge--rejected{ background:rgba(229,72,77,.13);   color:var(--st-rejected); }
.badge--canceled{ background:rgba(138,151,173,.16); color:var(--st-canceled); }
.badge--unprocessable{ background:rgba(180,86,46,.14); color:var(--st-unprocessable); }
.badge--chain{
  background:linear-gradient(135deg,#EAF1FF,#E6ECFF);
  color:var(--navy);
}
.badge--chain::before{ display:none; }

/* ---------- 위험도 / 신뢰도 / AI 칩 ---------- */
.aichip{
  display:inline-flex; align-items:center; gap:5px;
  padding:7px 13px;
  border-radius:10px;
  font-size:12.5px; font-weight:800;
  background:var(--surface-2); color:var(--ink-2);
  white-space:nowrap;
}
.aichip--type{ background:var(--blue); color:#fff; box-shadow:0 4px 12px rgba(47,107,255,.25); }
.aichip--risk{ color:#fff; }
.aichip--risk.risk--none{     background:var(--risk-none); }
.aichip--risk.risk--low{      background:var(--risk-low); }
.aichip--risk.risk--medium{   background:var(--risk-medium); }
.aichip--risk.risk--high{     background:var(--risk-high); }
.aichip--risk.risk--critical{ background:var(--risk-critical); }
.aichip--confidence{ background:var(--confidence); color:#fff; }

/* ---------- 하단 네비게이션 ---------- */
.bottom-nav{
  position:fixed; bottom:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:var(--maxw);
  height:calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  display:flex;
  z-index:50;
}
.bottom-nav a{
  flex:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  font-size:10.5px; font-weight:700; color:var(--ink-3);
  transition:color .15s;
}
.bottom-nav a.on{ color:var(--blue); }
.bottom-nav a.on svg{ filter:drop-shadow(0 2px 6px rgba(47,107,255,.4)); }
.bottom-nav svg{ width:23px; height:23px; }

/* ---------- 플로팅 신고 버튼 (파란 원형 — 연필 + "신고하기", 레퍼런스 디자인) ---------- */
.fab{
  position:fixed;
  bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 18px);
  left:50%; transform:translateX(-50%);
  width:100%; max-width:var(--maxw);
  display:flex; justify-content:flex-end;
  padding-right:18px;
  pointer-events:none;
  z-index:46;
  transition:bottom .25s cubic-bezier(.2,.9,.3,1);
}
.fab > *{ pointer-events:auto; }
/* 마커 미리보기가 떠 있을 때: 미리보기 카드 위로 자동 상승(가려지지 않도록, §3.3) */
.fab--raised{ bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 178px); }
.fab-inner{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  width:68px; height:68px;
  border-radius:50%;
  background:var(--blue);
  color:#fff; font-size:10.5px; font-weight:800; letter-spacing:-.3px;
  box-shadow:0 12px 28px rgba(47,107,255,.45);
  animation:fab-pulse 2.8s ease-in-out infinite;
  transition:transform .15s, background .15s;
}
.fab-inner svg{ flex:none; width:21px; height:21px; }
.fab-inner:active{ transform:scale(.94); background:var(--blue-d); }
@keyframes fab-pulse{
  0%,100%{ box-shadow:0 12px 28px rgba(47,107,255,.45); }
  50%{ box-shadow:0 12px 28px rgba(47,107,255,.45),0 0 0 10px rgba(47,107,255,.14); }
}

/* ---------- 지도 ---------- */
.map{
  position:relative;
  height:46vh; min-height:300px;
  margin:0 20px;
  border-radius:22px;
  overflow:hidden;
  box-shadow:var(--shadow);
}
.map--real{ width:100%; height:100%; }
.map--real:empty{ display:none; }
/* 폴백 목업 */
.map--mock{
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(0deg,transparent 0 54px,rgba(47,107,255,.045) 54px 55px),
    repeating-linear-gradient(90deg,transparent 0 54px,rgba(47,107,255,.045) 54px 55px),
    linear-gradient(160deg,#F4F8FF 0%,#E9F1FF 60%,#E2ECFF 100%);
}
.map__river{
  position:absolute; inset:-20% -30% auto auto;
  width:75%; height:150%;
  background:linear-gradient(90deg,rgba(47,107,255,.12),rgba(47,107,255,.05));
  transform:rotate(24deg);
  border-radius:120px;
}
.map__block{ position:absolute; background:rgba(47,107,255,.06); border-radius:8px; }
.map__road{ position:absolute; background:rgba(255,255,255,.92); box-shadow:0 0 0 1px rgba(47,107,255,.05); }
.map__note{
  position:absolute; top:12px; left:12px;
  font-size:10.5px; font-weight:700; color:var(--ink-3);
  background:rgba(255,255,255,.85);
  padding:5px 9px; border-radius:8px;
  backdrop-filter:blur(4px);
}
.map__legend{
  position:absolute; right:12px; top:12px;
  display:flex; flex-direction:column; gap:5px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(4px);
  border-radius:10px;
  padding:8px 10px;
  font-size:10.5px; font-weight:700; color:var(--ink-2);
  z-index:5;
}
.map__legend i{ width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:5px; }
.map__loc{
  position:absolute; left:12px; bottom:12px;
  display:flex; align-items:center; gap:5px;
  font-size:10.5px; font-weight:700; color:var(--ink-2);
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(4px);
  border-radius:10px; padding:7px 10px;
  z-index:5;
}
.map__loc svg{ color:var(--blue); }
.marker{
  position:absolute;
  width:32px; height:40px;
  transform:translate(-50%,-100%);
  filter:drop-shadow(0 4px 6px rgba(20,40,80,.3));
  transition:transform .18s ease;
  animation:marker-drop .5s cubic-bezier(.2,1.4,.4,1) backwards;
  cursor:pointer;
}
.marker[hidden]{ display:none !important; }
.marker:active{ transform:translate(-50%,-100%) scale(1.15); }
.marker svg{ width:100%; height:100%; }
.marker--received{ color:var(--st-received); }
.marker--confirmed{ color:var(--st-confirmed); }
.marker--progress{ color:var(--st-progress); }
.marker--done{ color:var(--st-done); }
.marker--rejected{ color:var(--st-rejected); }
.marker--canceled{ color:var(--st-canceled); }
.marker:nth-of-type(2){ animation-delay:.08s; }
.marker:nth-of-type(3){ animation-delay:.16s; }
.marker:nth-of-type(4){ animation-delay:.24s; }
.marker:nth-of-type(5){ animation-delay:.32s; }
@keyframes marker-drop{
  from{ opacity:0; transform:translate(-50%,-160%); }
  to{ opacity:1; transform:translate(-50%,-100%); }
}
.map__me{
  position:absolute;
  width:16px; height:16px; border-radius:50%;
  background:var(--blue);
  border:3px solid #fff;
  box-shadow:0 0 0 8px rgba(47,107,255,.15);
  animation:me-pulse 2s ease-in-out infinite;
}
@keyframes me-pulse{
  0%,100%{ box-shadow:0 0 0 6px rgba(47,107,255,.18); }
  50%{ box-shadow:0 0 0 13px rgba(47,107,255,.05); }
}

/* ---------- 마커 미리보기 시트 (마커 클릭 시에만, §3) ---------- */
.preview-sheet{
  position:fixed;
  bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 14px);
  left:50%; transform:translate(-50%,24px);
  width:calc(100% - 32px); max-width:398px;
  background:var(--surface);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  padding:14px;
  display:flex; flex-direction:column; gap:12px;
  opacity:0; pointer-events:none;
  transition:opacity .25s cubic-bezier(.2,.9,.3,1), transform .25s cubic-bezier(.2,.9,.3,1);
  z-index:45;
  touch-action:pan-y;
}
.preview-sheet.show{ opacity:1; transform:translate(-50%,0); pointer-events:auto; }
.preview-sheet__close{
  position:absolute; top:10px; right:10px;
  width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--surface-2); color:var(--ink-3);
  z-index:2;
}
.preview-sheet__close:active{ transform:scale(.9); }
.preview-sheet__row{ display:flex; gap:12px; align-items:center; padding-right:26px; }
.preview-sheet__media{
  width:62px; height:62px; flex:none;
  border-radius:14px; overflow:hidden;
  background:var(--blue-soft);
  display:grid; place-items:center;
  color:var(--blue);
}
.preview-sheet__media img{ width:100%; height:100%; object-fit:cover; }
.preview-sheet__body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }
.preview-sheet__title{ font-size:15px; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.preview-sheet__meta{ display:flex; align-items:center; gap:4px; font-size:12px; color:var(--ink-3); }
.preview-sheet__meta svg{ color:var(--blue); flex:none; }
.preview-sheet__meta span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.preview-sheet__go{ padding:12px; font-size:14px; border-radius:13px; }

/* ---------- 카드 ---------- */
.card{
  background:var(--surface);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

/* SNS형 피드 카드 (신고이력) */
.feed-card{
  background:var(--surface);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  padding:14px;
  margin-bottom:14px;
  animation:rise .45s ease backwards;
}
.feed-card:nth-child(2){ animation-delay:.06s; }
.feed-card:nth-child(3){ animation-delay:.12s; }
.feed-card:nth-child(4){ animation-delay:.18s; }
.feed-card:nth-child(5){ animation-delay:.24s; }
.feed-card__head{
  display:flex; align-items:center; gap:10px;
  margin-bottom:12px;
}
.feed-card__head .nick{ font-size:14px; font-weight:800; line-height:1.2; }
.feed-card__head .who{ font-size:11.5px; color:var(--ink-3); margin-top:1px; }
.feed-card__head .badge{ margin-left:auto; }
.feed-card__photo{
  border-radius:14px; overflow:hidden;
  margin-bottom:12px;
  background:var(--surface-2);
}
.feed-card__photo img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.feed-card__photo .thumb{ width:100%; height:auto; aspect-ratio:16/10; border-radius:14px; }
.feed-card__loc{
  display:flex; align-items:flex-start; gap:6px;
  font-size:12.5px; color:var(--ink-2); font-weight:600;
  margin-bottom:10px;
}
.feed-card__loc svg{ color:var(--blue); flex:none; margin-top:1px; }
.feed-card__chips{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.feed-card__chips .aichip{ font-size:11.5px; padding:5px 10px; }
.feed-card__text{ font-size:13.5px; color:var(--ink); line-height:1.55; }
.feed-card__date{ font-size:11px; color:var(--ink-3); text-align:right; margin-top:10px; }

/* 리스트 행 카드 (마이페이지/동일지점) */
.report-row{
  display:flex; gap:12px; align-items:center;
  background:var(--surface);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:12px;
  margin-bottom:10px;
  animation:rise .4s ease backwards;
}
.report-row:nth-child(2){ animation-delay:.05s; }
.report-row:nth-child(3){ animation-delay:.1s; }
.report-row:nth-child(4){ animation-delay:.15s; }
.report-row__body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.report-row__title{ font-size:14px; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.report-row__meta{ font-size:11.5px; color:var(--ink-3); }
.report-row__foot{ display:flex; align-items:center; gap:6px; margin-top:2px; }
.report-row .chev{ color:var(--ink-3); flex:none; }

@keyframes rise{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:none; }
}

/* 아이콘 썸네일 */
.thumb{
  width:76px; height:76px; flex:none;
  border-radius:14px;
  display:grid; place-items:center;
  color:#fff;
  position:relative;
  overflow:hidden;
}
.thumb svg{ width:38%; height:38%; }
.thumb--road{        background:linear-gradient(135deg,#5A6B86,#3A4B6B); }
.thumb--streetlight{ background:linear-gradient(135deg,#FFB45C,#F07B16); }
.thumb--park{        background:linear-gradient(135deg,#16B364,#0E8F4E); }
.thumb--plaza{       background:linear-gradient(135deg,#33C1B1,#0E9688); }
.thumb--parking{     background:linear-gradient(135deg,#6E7C99,#414E6B); }
.thumb--busstop{     background:linear-gradient(135deg,#F2B33D,#D98A0F); }
.thumb--knu{         background:linear-gradient(135deg,#9AA8C4,#5F719A); }
.thumb--cu{          background:linear-gradient(135deg,#FF8A6B,#F2551A); }
.thumb--etc{         background:linear-gradient(135deg,#4F8BFF,#2F6BFF); }

/* ---------- 필터 탭 ---------- */
.filter-tabs{
  display:flex; gap:6px;
  padding:4px;
  margin-bottom:16px;
  background:#E4EAF4;
  border-radius:14px;
}
.filter-tabs button{
  flex:1;
  padding:9px 4px;
  border-radius:11px;
  font-size:12.5px; font-weight:700; color:var(--ink-3);
  transition:all .18s;
}
.filter-tabs button.on{
  background:var(--surface);
  color:var(--blue);
  box-shadow:0 3px 10px rgba(20,40,80,.1);
}

/* ---------- 폼 ---------- */
.field{ margin-bottom:22px; }
.field > label{
  display:block;
  font-size:13.5px; font-weight:800;
  margin-bottom:9px;
}
.field > label .req{ color:var(--accent); }
.field > label .count{ float:right; font-weight:600; color:var(--ink-3); font-size:12px; }
.hint{ font-size:11.5px; color:var(--ink-3); margin-top:8px; display:flex; align-items:flex-start; gap:5px; line-height:1.5; }
.hint svg{ flex:none; margin-top:1px; }
/* 라벨 보조 설명 (결함 유형 직접 선택 안내 등) */
.field > label .label-hint{ display:block; font-weight:600; font-size:11.5px; color:var(--ink-3); margin-top:4px; }
/* 필드 하단 안내 (앨범 제한 안내 등) — .hint 와 동일 톤 */
.field-note{ font-size:11.5px; color:var(--ink-3); margin-top:9px; display:flex; align-items:flex-start; gap:5px; line-height:1.5; }
.field-note svg{ flex:none; margin-top:1px; }
/* 폼 내부 선택 칩(결함 유형): 가로 스크롤 대신 줄바꿈 */
.chips--wrap{ flex-wrap:wrap; overflow:visible; padding:0; }
.input,textarea.input{
  width:100%;
  padding:14px;
  border-radius:14px;
  border:1.5px solid var(--line);
  background:var(--surface);
  font-size:14px;
  color:var(--ink);
  outline:none;
  transition:border-color .15s;
}
.input:focus{ border-color:var(--blue); }
.input::placeholder,textarea.input::placeholder{ color:var(--ink-3); }
textarea.input{ min-height:110px; resize:vertical; line-height:1.6; }

/* 위치 자동 인식 카드 */
.loc-card{
  display:flex; align-items:center; gap:12px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
  box-shadow:var(--shadow);
}
.loc-card__pin{
  width:38px; height:38px; flex:none;
  border-radius:11px;
  background:var(--blue-soft);
  color:var(--blue);
  display:grid; place-items:center;
}
.loc-card__body{ flex:1; min-width:0; }
.loc-card__addr{ font-size:14px; font-weight:800; }
.loc-card__detail{ font-size:12px; color:var(--ink-2); margin-top:2px; }
.loc-card__detail em{ font-style:normal; color:var(--st-done); font-weight:700; }
.loc-card__edit{
  flex:none;
  font-size:12px; font-weight:700; color:var(--blue);
  background:var(--blue-soft);
  padding:7px 12px; border-radius:9px;
}

/* 사진 슬롯 */
.photo-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.slot{
  aspect-ratio:1;
  border-radius:14px;
  position:relative;
  overflow:hidden;
  background:var(--surface-2);
}
.slot img{ width:100%; height:100%; object-fit:cover; }
.slot--add{
  border:1.5px dashed #B9C9DE;
  background:var(--surface);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  color:var(--ink-3); font-size:11.5px; font-weight:700;
  width:100%;
  transition:border-color .15s,color .15s;
}
.slot--add svg{ color:var(--blue); }
.slot--add:active{ border-color:var(--blue); }
.slot__del{
  position:absolute; top:5px; right:5px;
  width:22px; height:22px;
  border-radius:50%;
  background:rgba(20,40,80,.65);
  color:#fff;
  display:grid; place-items:center;
  font-size:12px;
  z-index:2;
}

/* AI 분석 결과 카드 */
.ai-card{
  position:relative;
  border-radius:var(--radius);
  padding:1.5px;
  background:var(--grad-blue);
  box-shadow:var(--shadow);
}
.ai-card__inner{
  border-radius:calc(var(--radius) - 1.5px);
  background:linear-gradient(135deg,#F6FAFF,#EEF4FF);
  padding:14px 16px;
}
/* 표시 순서(v4.1 §3-9): 요약 → 설명 → 칩. 칩이 아래로 내려가며 위쪽 여백을 가진다 */
.ai-card__chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:11px; }
.ai-card__chips:first-child{ margin-top:0; }
.ai-card__chips .aichip{ font-size:12px; padding:6px 11px; }
.ai-card__summary{ font-size:13px; color:var(--ink-2); font-weight:600; text-align:center; }
.ai-card__loading{
  display:flex; align-items:center; gap:10px;
  font-size:13px; font-weight:700; color:var(--blue);
  min-height:38px;
}
.ai-card__spinner{
  width:22px; height:22px; flex:none;
  border:2.5px solid var(--blue-soft);
  border-top-color:var(--blue);
  border-radius:50%;
  animation:spin .9s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.ai-card.analyzing .ai-card__result{ display:none; }
.ai-card:not(.analyzing) .ai-card__loading{ display:none; }
/* 지역 선택 — 확장 예정 시·도 (v4 §3-3: 대구 우선, 타 지역 제한 안내) */
/* 확장 예정 지역(v4.1 §3-3) — 선택은 가능하므로 비활성으로 보이지 않게 하되
   '준비중' 배지로 서비스 범위 밖임을 구분한다 */
.fpill__item.off{ color:var(--ink-2); }
.fpill__soon{
  font-style:normal; font-size:9px; font-weight:800;
  color:var(--ink-3); background:var(--surface-2);
  border-radius:6px; padding:2px 5px; margin-left:5px;
  vertical-align:1px;
}

/* AI 분석 요약 헤드라인 (v4 §3-9) — 서술형 설명 위 굵은 요약 한 줄 */
/* 요약이 카드 첫 줄 — 설명(.ai-card__summary)과 붙여서 한 덩어리로 읽히게 한다 */
.ai-card__headline{ font-size:13.5px; font-weight:800; color:var(--ink-1); margin-bottom:4px; text-align:center; }
.ai-card__headline:empty{ display:none; }

/* 동의 (v4 §3-10) — 체크박스+제목+[필수] 한 행, 설명은 제목 시작선 아래 정렬 */
/* 두 카드의 간격·여백·정렬을 동일하게 맞춘다(완료 기준).
   높이는 내용에 따라 유동 — 설명이 한 줄인 카드를 두 줄 카드 높이에 맞추면
   아래쪽에 빈 공간이 남아 오히려 어색하므로 각자 내용만큼만 차지하게 둔다. */
.agree-group{
  display:grid;
  gap:10px;
}
.agree{
  display:flex; align-items:flex-start; gap:11px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
  box-shadow:var(--shadow);
  cursor:pointer;
}
/* 체크박스는 제목 행(1줄)과 세로 중앙 정렬 — 제목이 길어 줄바꿈돼도 첫 줄 기준 유지 */
.agree input{
  width:20px; height:20px; accent-color:var(--blue); flex:none;
  margin-top:0; align-self:flex-start;
}
.agree__body{ flex:1; min-width:0; display:flex; flex-direction:column; }
/* 제목과 [필수]는 인라인으로 흘려 영문처럼 제목이 길어져도 [필수]가 홀로
   다음 줄로 떨어지지 않고 제목 끝에 이어 붙는다(완료 기준: 같은 행에 표시) */
.agree__title{
  font-size:13.5px; font-weight:800; line-height:20px; /* 체크박스(20px)와 기준선 일치 */
  word-break:keep-all;
}
.agree__title .req{
  color:var(--accent); font-size:11.5px; font-weight:800;
  margin-left:5px; white-space:nowrap;
}
.agree__desc{ font-size:11.5px; color:var(--ink-3); margin-top:4px; line-height:1.5; word-break:keep-all; }
.agree--required{ border-color:rgba(47,107,255,.3); }
/* 필수 미동의 안내(§3-10) — 미동의 카드 강조 */
.agree--invalid{ border-color:var(--st-rejected); box-shadow:0 0 0 2.5px rgba(229,72,77,.14); animation:agree-shake .3s ease; }
@keyframes agree-shake{
  0%,100%{ transform:translateX(0); }
  25%{ transform:translateX(-4px); } 75%{ transform:translateX(4px); }
}

/* 제출 바 */
.submit-bar{
  position:fixed; bottom:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:var(--maxw);
  padding:12px 20px calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(to top,var(--bg) 72%,transparent);
  z-index:40;
}

/* ---------- 타임라인 ---------- */
.timeline{ padding:4px 0 0 6px; }
.tl-item{ position:relative; padding:0 0 26px 26px; }
.tl-item::before{
  content:'';
  position:absolute; left:6px; top:18px; bottom:0;
  width:2px;
  background:var(--line);
}
.tl-item:last-child::before{ display:none; }
.tl-item.done::before{ background:var(--st-done); }
.tl-item .dot{
  position:absolute; left:0; top:3px;
  width:14px; height:14px; border-radius:50%;
  background:var(--line);
  border:3px solid var(--bg);
}
.tl-item.done .dot{ background:var(--st-done); }
.tl-item.now .dot{
  background:var(--st-progress);
  box-shadow:0 0 0 4px rgba(255,138,0,.18);
  animation:me-pulse-now 1.8s ease-in-out infinite;
}
@keyframes me-pulse-now{
  0%,100%{ box-shadow:0 0 0 4px rgba(255,138,0,.18); }
  50%{ box-shadow:0 0 0 8px rgba(255,138,0,.06); }
}
.tl-item .t{ font-size:14px; font-weight:800; }
.tl-item.wait .t{ color:var(--ink-3); }
.tl-item .d{ font-size:12px; color:var(--ink-2); margin-top:3px; line-height:1.5; }
.tl-item .time{ font-size:11px; color:var(--ink-3); margin-top:3px; }

/* ---------- 블록체인 카드 (네이비 그라데) ---------- */
.chain-card{
  border-radius:var(--radius);
  background:linear-gradient(135deg,#16306B 0%,#1F3F8C 55%,#16306B 100%);
  color:#fff;
  padding:18px;
  position:relative;
  overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.chain-card::after{
  content:'';
  position:absolute; right:-30px; top:-30px;
  width:130px; height:130px;
  background:radial-gradient(circle,rgba(47,107,255,.4),transparent 70%);
}
.chain-card .h{
  display:flex; align-items:center; gap:8px;
  font-size:14px; font-weight:800;
  position:relative; margin-bottom:14px;
}
.chain-card .h svg{ flex:none; }
.chain-card .row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:9px 0;
  border-top:1px solid rgba(255,255,255,.1);
  position:relative;
}
.chain-card .row:first-of-type{ border-top:0; }
.chain-card .k{ font-size:12px; color:rgba(255,255,255,.6); font-weight:600; flex:none; }
.chain-card .v{ font-size:12.5px; font-weight:700; text-align:right; }
.chain-card .v.ok{ color:#5FE0A6; display:inline-flex; align-items:center; gap:4px; }
.chain-card .hash{
  font-family:ui-monospace,'Cascadia Mono',monospace;
  font-size:12px;
  color:#A9C6FF;
  word-break:break-all;
  text-align:right;
}

/* ---------- 마이페이지 ---------- */
.profile{
  display:flex; align-items:center; gap:14px;
  padding:6px 2px 18px;
}
.avatar{
  width:56px; height:56px; flex:none;
  border-radius:50%;
  background:var(--grad-blue);
  color:#fff;
  display:grid; place-items:center;
  font-family:var(--font-display); font-weight:700; font-size:21px;
}
.profile__body{ flex:1; min-width:0; }
.profile .name{ font-size:16.5px; font-weight:800; display:flex; align-items:center; gap:6px; }
.profile .name small{ font-size:12px; font-weight:600; color:var(--ink-3); }
.profile .sub{ font-size:12.5px; color:var(--ink-3); margin-top:2px; }
.profile .sns{
  width:18px; height:18px; border-radius:50%;
  background:var(--kakao);
  display:inline-grid; place-items:center;
  font-size:9px; font-weight:800; color:#191600; flex:none;
}
.profile .sns--naver{ background:var(--naver); color:#fff; }
.profile__edit{
  flex:none;
  font-size:12.5px; font-weight:700; color:var(--ink-2);
  background:var(--surface);
  border:1px solid var(--line);
  padding:9px 13px; border-radius:11px;
}

/* 스탯 그리드 (블루 카드) */
.stat-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
}
.stat{
  border-radius:var(--radius);
  background:var(--grad-blue);
  color:#fff;
  padding:15px 14px;
  position:relative;
  overflow:hidden;
  box-shadow:0 8px 20px rgba(47,107,255,.28);
}
.stat::before{
  content:'';
  position:absolute; right:-22px; top:-22px;
  width:80px; height:80px;
  background:radial-gradient(circle,rgba(255,255,255,.16),transparent 70%);
}
.stat__icon{ opacity:.75; margin-bottom:6px; }
.stat .num{ font-family:var(--font-display); font-size:22px; font-weight:700; line-height:1.1; }
.stat .num small{ font-size:13px; font-weight:500; }
.stat .lbl{ font-size:11.5px; opacity:.9; margin-top:3px; font-weight:600; }
.stat--grade{ background:linear-gradient(135deg,#16306B,#2F6BFF); }
.stat--grade .num{ font-size:18px; }

.menu-list{
  border-radius:var(--radius);
  background:var(--surface);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.menu-list a{
  display:flex; align-items:center; gap:12px;
  padding:16px 18px;
  font-size:14px; font-weight:700;
  border-bottom:1px solid #F0F4F9;
  transition:background .15s;
}
.menu-list a:last-child{ border-bottom:0; }
.menu-list a:active{ background:var(--surface-2); }
.menu-list a svg:first-child{ color:var(--ink-2); flex:none; }
.menu-list .chev{ margin-left:auto; color:var(--ink-3); }

/* ---------- 스플래시 ---------- */
.splash{
  min-height:100dvh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  position:relative;
  overflow:hidden;
  background:var(--grad-hero);
}
.splash__logo{
  width:210px;
  animation:splash-in .9s cubic-bezier(.2,.9,.3,1.2) backwards;
}
@keyframes splash-in{
  from{ opacity:0; transform:scale(.82) translateY(16px); }
  to{ opacity:1; transform:none; }
}
.splash__copy{
  margin-top:26px;
  font-family:var(--font-display);
  font-size:18px; font-weight:700;
  color:var(--navy);
  text-align:center;
  line-height:1.45;
  animation:rise .6s ease .45s backwards;
}
.splash__copy em{ font-style:normal; color:var(--accent); }
.splash__dots{ display:flex; gap:7px; margin-top:38px; }
.splash__dots i{
  width:7px; height:7px; border-radius:50%;
  background:var(--blue); opacity:.25;
  animation:dot-blink 1.2s ease-in-out infinite;
}
.splash__dots i:nth-child(2){ animation-delay:.2s; }
.splash__dots i:nth-child(3){ animation-delay:.4s; }
@keyframes dot-blink{ 0%,100%{ opacity:.25; } 50%{ opacity:1; } }

/* 스카이라인 (로고 모티프) */
.skyline{
  position:absolute; bottom:0; left:0; right:0;
  height:130px;
  pointer-events:none;
  color:#BFD2F0;
}
.skyline svg{ width:100%; height:100%; display:block; }

/* ---------- 로그인 ---------- */
.login{
  min-height:100dvh;
  display:flex; flex-direction:column;
  padding:0 24px;
  position:relative;
  overflow:hidden;
  background:var(--grad-hero);
}
/* 로그인 화면 뒤로가기 (APP-2T-015) — .login 이 position:relative 라 그 안에 띄운다.
   상태바 영역을 피하려고 safe-area 를 더한다(웹뷰 전체화면에서 노치에 가려지지 않게). */
.login__back{
  position:absolute; z-index:2;
  top:calc(env(safe-area-inset-top) + 10px); left:14px;
  width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center;
  color:var(--ink-1);
}
.login__hero{ flex:1; display:flex; flex-direction:column; justify-content:center; padding-top:40px; }
.login__logo{ width:158px; animation:rise .6s ease backwards; }
.login__head{
  margin-top:30px;
  font-family:var(--font-display);
  font-size:27px; font-weight:700; line-height:1.4; color:var(--navy);
  animation:rise .6s ease .12s backwards;
}
.login__head em{
  font-style:normal;
  background:var(--grad-blue);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.login__sub{ margin-top:10px; font-size:14px; color:var(--ink-2); animation:rise .6s ease .2s backwards; }
.login__btns{
  display:flex; flex-direction:column; gap:11px; padding-bottom:14px;
  animation:rise .6s ease .3s backwards;
  position:relative; z-index:1;
}
.login__btns .btn svg{ flex:none; }
.login__admin{
  text-align:center;
  font-size:12.5px; color:var(--ink-3);
  padding:12px 0 18px;
  position:relative; z-index:1;
}
.login__admin a{ text-decoration:underline; font-weight:700; color:var(--ink-2); }
.login__age{ text-align:center; font-size:11px; color:var(--ink-3); padding-bottom:20px; position:relative; z-index:1; }

/* ---------- 모달 / 토스트 / 오버레이 ---------- */
.modal-back{
  position:fixed; inset:0;
  background:rgba(15,25,50,.55);
  backdrop-filter:blur(3px);
  z-index:90;
  display:grid; place-items:center;
  padding:28px;
  opacity:0; pointer-events:none;
  transition:opacity .22s;
}
.modal-back.show{ opacity:1; pointer-events:auto; }
.modal{
  width:100%; max-width:330px;
  background:var(--surface);
  border-radius:22px;
  padding:26px 22px 18px;
  text-align:center;
  transform:scale(.92) translateY(12px);
  transition:transform .25s cubic-bezier(.2,1.2,.3,1);
}
.modal-back.show .modal{ transform:none; }
.modal__icon{
  width:54px; height:54px;
  margin:0 auto 14px;
  border-radius:16px;
  background:var(--blue-soft);
  color:var(--blue);
  display:grid; place-items:center;
}
.modal__icon--chain{ background:linear-gradient(135deg,#16306B,#2F6BFF); color:#fff; }
.modal__icon--warn{ background:rgba(229,72,77,.12); color:var(--st-rejected); }
.modal h3{ font-size:16.5px; font-weight:800; }
.modal p{ font-size:13px; color:var(--ink-2); margin-top:8px; line-height:1.6; }
.modal__btns{ display:flex; gap:9px; margin-top:20px; }
/* 위치 수정 시트 (APP-2T-009) — 검색 + 지도 + 후보 목록이 들어가 기본 모달보다 넓다.
   세로 배치 + 화면 높이 상한 (APP-2T-005): 제목·설명과 '적용'·'취소' 버튼은 고정하고
   가운데(.loc-edit__body)만 스크롤한다. dvh 는 키보드가 올라오면 함께 줄어들어
   낮은 기기·키보드 노출 상태에서도 버튼이 화면 밖으로 밀리지 않는다. */
.modal--loc{
  max-width:400px; text-align:left;
  display:flex; flex-direction:column;
  max-height:calc(100vh - 56px);  /* dvh 미지원 웹뷰 폴백 */
  max-height:calc(100dvh - 56px); /* .modal-back 상하 패딩(28px×2) 제외 */
}
.loc-edit__body{
  flex:1 1 auto; min-height:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  margin:0 -4px; padding:0 4px; /* 포커스 링이 스크롤 클리핑에 잘리지 않게 */
}
.loc-edit__search{ display:flex; gap:8px; margin-top:14px; }
.loc-edit__search .input{ flex:1; min-width:0; }
.loc-edit__search .btn{ flex:none; width:auto; padding:0 16px; }
.loc-edit__map{ width:100%; height:220px; margin-top:12px; border-radius:12px; overflow:hidden; }
.loc-edit__map[hidden]{ display:none; }
.loc-edit__results{ margin-top:10px; max-height:180px; overflow-y:auto; }
.loc-edit__item{
  display:block; width:100%; text-align:left;
  padding:10px 12px; border-radius:10px;
  font-size:13px; color:var(--ink-1); line-height:1.5;
}
.loc-edit__item:hover, .loc-edit__item:focus-visible{ background:var(--surface-2); }
.loc-edit__empty{ padding:12px 2px; font-size:12.5px; color:var(--ink-3); }
.loc-edit__picked{
  margin-top:10px; padding:10px 12px; border-radius:10px;
  background:rgba(47,107,255,.08); color:var(--blue);
  font-size:12.5px; font-weight:700;
}
.loc-edit__picked[hidden]{ display:none; }
.modal__btns .btn{ padding:13px; font-size:14px; }

/* ---------- 필수 동의 시트 (신고 제출 직전) ----------
   화면을 다 덮지 않고 아래에서 작게 올라온다 — 뒤의 신고 폼이 비쳐 보여야
   "제출 중에 확인받는 단계"로 읽힌다. 항목 하나씩 보여주고 [동의하기]로 넘긴다. */
.sheet-back{
  position:fixed; inset:0;
  background:rgba(15,25,50,.55);
  backdrop-filter:blur(3px);
  z-index:95;
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity .22s;
}
.sheet-back.show{ opacity:1; pointer-events:auto; }
.sheet{
  width:100%; max-width:var(--maxw);
  background:var(--surface);
  border-radius:22px 22px 0 0;
  padding:10px 22px calc(20px + env(safe-area-inset-bottom));
  transform:translateY(100%);
  transition:transform .28s cubic-bezier(.2,.9,.25,1);
}
.sheet-back.show .sheet{ transform:none; }
.sheet__grip{
  width:38px; height:4px; border-radius:2px;
  background:var(--line);
  margin:0 auto 16px;
}
.sheet__meta{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.sheet__req{ font-size:11.5px; font-weight:800; color:var(--accent); }
.sheet__step{ font-size:11.5px; font-weight:700; color:var(--ink-3); }
.sheet__title{ font-size:17.5px; font-weight:700; color:var(--ink); line-height:1.4; margin-top:8px; }
.sheet__desc{ font-size:13.5px; color:var(--ink-2); line-height:1.65; margin-top:10px; }
.sheet__btns{ display:flex; gap:9px; margin-top:22px; }
.sheet__btns .btn{ padding:15px; font-size:14.5px; }
/* 닫기는 보조 동작이라 폭을 줄인다 — 동의가 주 동작이다 */
.sheet__btns [data-consent-no]{ flex:0 0 32%; }
.sheet__btns [data-consent-yes]{ flex:1; }

#toast{
  position:fixed;
  bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 24px);
  left:50%; transform:translate(-50%,14px);
  background:rgba(15,25,50,.92);
  color:#fff;
  font-size:13px; font-weight:600;
  padding:12px 20px;
  border-radius:999px;
  opacity:0; pointer-events:none;
  transition:all .25s ease;
  z-index:100;
  max-width:calc(100% - 48px);
  text-align:center;
}
#toast.show{ opacity:1; transform:translate(-50%,0); }

/* 성공 오버레이 */
.success-overlay{
  position:fixed; inset:0;
  background:var(--grad-blue);
  z-index:95;
  display:none;
  flex-direction:column; align-items:center; justify-content:center;
  color:#fff;
  text-align:center;
  padding:32px;
}
.success-overlay.show{ display:flex; }
.success-overlay svg{ width:86px; height:86px; }
.success-overlay .circ{ stroke-dasharray:166; stroke-dashoffset:166; animation:draw .55s ease forwards; }
.success-overlay .tick{ stroke-dasharray:48; stroke-dashoffset:48; animation:draw .35s ease .45s forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
.success-overlay h2{ font-family:var(--font-display); font-size:21px; margin-top:22px; animation:rise .5s ease .6s backwards; }
.success-overlay p{ font-size:13.5px; opacity:.9; margin-top:8px; line-height:1.6; animation:rise .5s ease .75s backwards; }

/* ---------- 카메라 화면 ---------- */
.camera{
  position:fixed; inset:0;
  max-width:var(--maxw); margin:0 auto;
  background:#000;
  display:flex; flex-direction:column;
  z-index:60;
}
.camera__video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  background:#000;
}
.camera__top{
  position:relative; z-index:2;
  display:flex; align-items:center;
  padding:calc(env(safe-area-inset-top) + 14px) 18px 14px;
  color:#fff;
  background:linear-gradient(to bottom,rgba(0,0,0,.5),transparent);
}
.camera__top .title{ flex:1; text-align:center; font-size:15px; font-weight:800; }
.camera__close{
  width:40px; height:40px; flex:none;
  display:grid; place-items:center; color:#fff;
}
.camera__close + .title + .camera__close{ visibility:hidden; }
.camera__hint{
  position:relative; z-index:2;
  margin-top:auto;
  text-align:center;
  color:rgba(255,255,255,.92);
  font-size:13px; font-weight:600;
  padding:0 32px 20px;
  text-shadow:0 1px 6px rgba(0,0,0,.5);
}
.camera__bar{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:center;
  padding:18px 18px calc(env(safe-area-inset-bottom) + 30px);
  background:linear-gradient(to top,rgba(0,0,0,.55),transparent);
}
.camera__shutter{
  width:74px; height:74px; flex:none;
  border-radius:50%;
  background:#fff;
  border:4px solid rgba(255,255,255,.45);
  box-shadow:0 0 0 3px rgba(0,0,0,.2);
  transition:transform .12s;
}
.camera__shutter:active{ transform:scale(.92); }
/* 촬영 화면 안내 문구 (APP-2T-007).
   .camera__privacy 는 스타일이 아예 없어서 기본 문단으로 흘렀다 — 가이드 프레임 위에 겹치고
   글자 크기 설정이 큰 기기에서는 촬영 버튼까지 밀고 들어갔다.
   안내 두 줄을 하단 한 덩어리로 묶고, 프레임 아래쪽을 그만큼 비운다(아래 .camera__frame). */
.camera__privacy{
  position:relative; z-index:2;
  text-align:center;
  color:rgba(255,255,255,.82);
  font-size:11.5px; font-weight:600; line-height:1.5;
  padding:0 26px 14px;
  text-shadow:0 1px 6px rgba(0,0,0,.55);
}
.camera__hint{ padding-bottom:8px; }

.camera__frame{
  /* 아래를 넉넉히 비운다 — 이 아래가 안내 문구 + 촬영 버튼 자리다 (APP-2T-007) */
  position:absolute; inset:16% 12% 40%;
  border:2px dashed rgba(255,255,255,.4);
  border-radius:18px;
  z-index:1; pointer-events:none;
}

/* 확인 화면도 촬영 화면과 같은 전체화면 세로 배치 — 기존에는 규칙이 없어 일반 블록으로 흘렀다.
   아래 __stage/__bar 의 높이 배분이 이 컨테이너를 전제로 한다 (APP-2T-008). */
.photo-confirm{
  position:fixed; inset:0; z-index:60;
  display:flex; flex-direction:column;
  background:#0b1020; color:#fff;
}
.photo-confirm[hidden]{ display:none; }
/* 사진 확인 화면 안내 문구 (APP-2T-004).
   예전에는 이 문단이 .camera__top(가로 flex) 안에 있어 40px 여백 두 개 사이에 끼여
   한두 글자씩 끊어지는 줄바꿈이 났고, flex-wrap 우회로도 빈 여백 스팬이 다음 줄로 밀려
   높이가 들쭉났다. 이제 마크업이 헤더 밖 독립 블록이라 문구가 전체 폭을 쓴다. */
.photo-confirm__privacy{
  margin:2px 20px 0;
  text-align:center;
  color:rgba(255,255,255,.85);
  font-size:12px; font-weight:600; line-height:1.55;
  word-break:keep-all;      /* 한국어는 어절 단위로 끊는다 — 낱글자 줄바꿈 방지 */
  overflow-wrap:anywhere;   /* 글자 크기 확대·좁은 화면에서도 영역 밖으로 넘치지 않게 */
  text-shadow:0 1px 6px rgba(0,0,0,.5);
}
/* 사진이 남는 높이를 다 쓰도록 — 안내 문구가 길어져도 미리보기와 버튼이 밀리지 않는다 */
.photo-confirm__stage{ flex:1; min-height:0; display:grid; place-items:center; overflow:hidden; }
.photo-confirm__stage img{ max-width:100%; max-height:100%; object-fit:contain; }
.photo-confirm__bar{
  display:flex; gap:10px;
  padding:14px 18px calc(env(safe-area-inset-bottom) + 18px);
}
.photo-confirm__bar .btn{ flex:1; }

/* ---------- 상세 히어로 ---------- */
.detail-hero{
  position:relative;
  height:240px;
  display:grid; place-items:center;
  color:rgba(255,255,255,.9);
  overflow:hidden;
  background:var(--grad-blue);
}
.detail-hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.detail-hero .back{
  position:absolute; top:calc(env(safe-area-inset-top) + 14px); left:14px;
  width:38px; height:38px;
  border-radius:50%;
  background:rgba(15,25,50,.42);
  backdrop-filter:blur(6px);
  color:#fff;
  display:grid; place-items:center;
  z-index:2;
}
.detail-hero .count{
  position:absolute; right:14px; bottom:36px;
  font-size:11px; font-weight:700;
  background:rgba(15,25,50,.55);
  color:#fff;
  padding:5px 10px;
  border-radius:999px;
  z-index:2;
}
.detail-body{
  position:relative;
  margin-top:-24px;
  border-radius:24px 24px 0 0;
  background:var(--bg);
  padding:24px 20px 60px;
}
.detail-body .head-row{ display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.detail-body .report-no{ font-size:12px; font-weight:700; color:var(--ink-3); }
.detail-body .title{ font-size:19px; font-weight:800; line-height:1.35; }
.detail-body .date{ font-size:12px; color:var(--ink-3); margin-top:4px; }
.detail-section{ margin-top:26px; }
.detail-section > h3{ font-size:15px; font-weight:800; margin-bottom:12px; }

/* ---------- 공통 ---------- */
.empty{
  text-align:center;
  padding:40px 20px;
  color:var(--ink-3);
}
.empty svg{ color:var(--line); margin:0 auto 12px; }
.empty .t{ font-size:14px; font-weight:700; color:var(--ink-2); }
.empty .d{ font-size:12.5px; margin-top:4px; }
.divider{ height:1px; background:var(--line); margin:18px 0; border:0; }

/* 공지/약관 아코디언 */
.notice-item,.faq-item{
  background:var(--surface);
  border-radius:14px;
  box-shadow:var(--shadow);
  margin-bottom:10px;
  overflow:hidden;
}
.notice-item__head,.faq-item__head{
  display:flex; align-items:center; gap:10px;
  padding:16px;
  cursor:pointer;
}
.notice-item__head .body,.faq-item__head .body{ flex:1; min-width:0; }
.notice-item__head .t,.faq-item__head .t{ font-size:14px; font-weight:700; }
.notice-item__head .date{ font-size:11.5px; color:var(--ink-3); margin-top:3px; }
.faq-item__head .q{
  width:22px; height:22px; flex:none;
  border-radius:6px; background:var(--blue-soft); color:var(--blue);
  display:grid; place-items:center; font-weight:800; font-size:12px;
}
.notice-item__head .arrow,.faq-item__head .arrow{
  color:var(--ink-3); flex:none;
  transition:transform .22s;
}
.notice-item.open .arrow,.faq-item.open .arrow{ transform:rotate(180deg); }
.notice-item__body,.faq-item__body{
  max-height:0; overflow:hidden;
  transition:max-height .28s ease;
}
.notice-item.open .notice-item__body,.faq-item.open .faq-item__body{ max-height:600px; }
.notice-item__body p,.faq-item__body p{
  padding:0 16px 16px;
  font-size:13px; color:var(--ink-2); line-height:1.65;
}
.faq-item__body p{ padding-left:48px; }

/* 설정 토글 행 */
.setting-row{
  display:flex; align-items:center; gap:12px;
  padding:16px 18px;
  background:var(--surface);
  border-bottom:1px solid #F0F4F9;
}
.setting-row:first-child{ border-radius:14px 14px 0 0; }
.setting-row:last-child{ border-radius:0 0 14px 14px; border-bottom:0; }
.setting-row__body{ flex:1; min-width:0; }
.setting-row__title{ font-size:14px; font-weight:700; }
.setting-row__desc{ font-size:11.5px; color:var(--ink-3); margin-top:2px; }
.setting-row .val{ font-size:13px; color:var(--ink-3); font-weight:600; }
.setting-group{ border-radius:14px; box-shadow:var(--shadow); overflow:hidden; margin-bottom:16px; }

/* 토글 스위치 */
.switch{ position:relative; width:46px; height:27px; flex:none; cursor:pointer; }
.switch input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.switch .track{
  position:absolute; inset:0;
  background:#D2DCEA;
  border-radius:999px;
  transition:background .2s;
}
.switch .track::after{
  content:'';
  position:absolute; top:3px; left:3px;
  width:21px; height:21px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 2px 5px rgba(20,40,80,.25);
  transition:transform .2s;
}
.switch input:checked + .track{ background:var(--blue); }
.switch input:checked + .track::after{ transform:translateX(19px); }

/* ==========================================================================
   홈 GIS 풀스테이지 + 지도 오버레이 (§2 — 신고 이력 미노출, 지도 중심)
   ========================================================================== */
.home-stage{
  position:fixed;
  top:0; bottom:calc(var(--nav-h) + env(safe-area-inset-bottom));
  left:50%; transform:translateX(-50%);
  width:100%; max-width:var(--maxw);
  overflow:hidden;
}
/* 지도: 스테이지 전체를 채움 (border-radius/margin 제거) */
.map--full{
  position:absolute; inset:0;
  height:100%; min-height:0;
  margin:0; border-radius:0;
  box-shadow:none;
}
.map--full .map--real{ width:100%; height:100%; }

/* 상단 위치/알림 — 지도 위 떠 있는 알약 */
.appbar--float{
  position:absolute; top:0; left:0; right:0;
  z-index:12;
  padding:calc(env(safe-area-inset-top) + 12px) 16px 12px;
  background:linear-gradient(to bottom, rgba(243,246,251,.96) 40%, rgba(243,246,251,0));
  pointer-events:none;
}
.appbar--float .appbar__loc{
  pointer-events:auto;
  background:var(--surface); border-radius:999px;
  padding:9px 15px; box-shadow:var(--shadow);
  font-size:14px;
}
.appbar--float .icon-btn{ pointer-events:auto; position:relative; }
.icon-btn--badge .dot{
  position:absolute; top:8px; right:9px;
  width:8px; height:8px; border-radius:50%;
  background:var(--accent); border:2px solid var(--surface);
}

/* 카테고리 칩 오버레이 */
.chips--float{
  position:absolute; left:0; right:0;
  top:calc(env(safe-area-inset-top) + 64px);
  z-index:11;
  padding:2px 16px 8px;
}
.chips--float .chip,
.chips--float .cat-chip{ box-shadow:var(--shadow); }

/* 현재 위치 버튼 (좌하단 범례 위 — FAB(우하단)와 겹치지 않음) */
/* '내 위치'(왼쪽) 와 '신고하기' FAB(오른쪽) 의 중심을 같은 수평선에 맞춘다 (APP-2T-002).
   둘은 좌표 기준이 다르다 — FAB 은 화면 고정(.fab, bottom: nav-h + safe + 18px)이고
   이 버튼은 .home-stage(바닥이 nav-h + safe) 기준 absolute 다. 그래서 스테이지 좌표로 환산하면
   FAB 중심은 바닥에서 18 + 68/2 = 52px 다. 이 버튼(46px)의 중심을 같은 52px 에 두려면
   bottom 은 52 - 23 = 29px — 아래 식이 그 값이고, 두 버튼 크기가 바뀌어도 따라간다.
   예전 값 76px 은 중심이 99px 이라 FAB 보다 47px 높았다. */
.map-locate{
  position:absolute; left:16px;
  bottom:calc(18px + (68px - 46px) / 2); z-index:44;
  width:46px; height:46px; border-radius:14px;
  display:grid; place-items:center;
  background:var(--surface); color:var(--blue);
  box-shadow:var(--shadow-lg);
  transition:transform .15s, bottom .25s cubic-bezier(.2,.9,.3,1);
}
.map-locate:active{ transform:scale(.92); }
.map-locate.loading{ color:var(--ink-3); animation:locate-spin 1s linear infinite; }
@keyframes locate-spin{ to{ transform:rotate(360deg); } }
/* 미리보기가 뜨면 현재위치 버튼도 함께 상승(겹침 방지).
   상승 상태에서도 FAB(.fab--raised, bottom: nav-h + safe + 178px)과 중심을 맞춘다 (APP-2T-002) */
.map-locate--raised{ bottom:calc(178px + (68px - 46px) / 2); }

/* 지도 위 "내 위치" 커스텀 오버레이 점 (카카오 CustomOverlay 내용) */
.me-dot{
  width:18px; height:18px; border-radius:50%;
  background:var(--blue); border:3px solid #fff;
  box-shadow:0 0 0 7px rgba(47,107,255,.18);
  animation:me-pulse 2s ease-in-out infinite;
}

/* 홈 범례 위치(스테이지 기준) — 좌측 하단(우측 하단 FAB와 어떤 폭에서도 안 겹침) */
.home-stage .map__legend{ flex-direction:row; gap:10px; top:auto; bottom:18px; left:16px; right:auto; }
.home-stage .map__legend span{ display:flex; align-items:center; }

/* ==========================================================================
   세그먼트 탭 (고객센터 FAQ/문의 등)
   ========================================================================== */
.seg-tabs{
  display:flex; gap:4px;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:13px; padding:4px;
  margin-bottom:18px;
}
.seg-tabs button, .seg-tabs a{
  flex:1; padding:10px; border-radius:10px;
  font-size:13.5px; font-weight:800; color:var(--ink-3);
  transition:all .15s;
}
.seg-tabs button.on{ background:var(--surface); color:var(--blue); box-shadow:var(--shadow); }

/* ==========================================================================
   진행 현황 미니바 (신고 이력 피드 카드 — 접수→처리중→완료, §4.2)
   ========================================================================== */
.mini-steps{
  display:flex; align-items:center; gap:0;
  margin:2px 0 12px;
}
.mini-steps .ms{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  flex:none; width:auto;
}
.mini-steps .ms i{
  width:14px; height:14px; border-radius:50%;
  background:var(--line); display:grid; place-items:center;
}
.mini-steps .ms i svg{ width:9px; height:9px; color:#fff; opacity:0; }
.mini-steps .ms b{ font-size:10px; font-weight:700; color:var(--ink-3); }
.mini-steps .bar{ flex:1; height:3px; border-radius:2px; background:var(--line); margin:0 4px; margin-bottom:16px; }
.mini-steps .ms.done i{ background:var(--st-done); }
.mini-steps .ms.done i svg{ opacity:1; }
.mini-steps .ms.done b{ color:var(--st-done); }
.mini-steps .ms.now i{ background:var(--st-progress); box-shadow:0 0 0 4px rgba(255,138,0,.16); }
.mini-steps .ms.now b{ color:#D97400; }
.mini-steps .bar.fill{ background:var(--st-done); }
.mini-steps.rej .ms.now i{ background:var(--st-rejected); box-shadow:0 0 0 4px rgba(229,72,77,.15); }
.mini-steps.rej .ms.now b{ color:var(--st-rejected); }

/* ==========================================================================
   알림 목록 (§13)
   ========================================================================== */
.noti-item{
  display:flex; gap:12px; align-items:flex-start;
  background:var(--surface); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:14px;
  margin-bottom:10px;
  animation:rise .4s ease backwards;
}
.noti-item.unread{ border-left:3px solid var(--blue); }
.noti-item__ico{
  width:40px; height:40px; flex:none; border-radius:12px;
  display:grid; place-items:center;
}
.noti-item__ico--progress{ background:rgba(255,138,0,.14); color:#D97400; }
.noti-item__ico--done{ background:rgba(22,179,100,.14); color:#0E9655; }
.noti-item__ico--rejected{ background:rgba(229,72,77,.13); color:var(--st-rejected); }
.noti-item__ico--inquiry{ background:var(--blue-soft); color:var(--blue); }
.noti-item__ico--notice{ background:rgba(122,92,255,.14); color:var(--st-confirmed); }
.noti-item__ico--point{ background:rgba(255,138,0,.14); color:#D97400; }
.noti-item__ico--grade{ background:rgba(22,179,100,.14); color:#0E9655; }
.noti-item__body{ flex:1; min-width:0; }
.noti-item__title{ font-size:14px; font-weight:800; display:flex; align-items:center; gap:6px; }
.noti-item__title .ndot{ width:7px; height:7px; border-radius:50%; background:var(--accent); flex:none; }
.noti-item__msg{ font-size:12.5px; color:var(--ink-2); margin-top:3px; line-height:1.5; }
.noti-item__time{ font-size:11px; color:var(--ink-3); margin-top:6px; }

/* ==========================================================================
   1:1 문의 (고객센터)
   ========================================================================== */
.inq-card{
  background:var(--surface); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:14px; margin-bottom:10px;
  animation:rise .4s ease backwards;
}
.inq-card__head{ display:flex; align-items:center; gap:8px; margin-bottom:7px; }
.inq-card__type{ font-size:11px; font-weight:800; color:var(--blue); background:var(--blue-soft); padding:3px 9px; border-radius:999px; }
.inq-card__head .badge{ margin-left:auto; }
.inq-card__title{ font-size:14.5px; font-weight:800; }
.inq-card__q{ font-size:13px; color:var(--ink-2); line-height:1.55; margin-top:5px; }
.inq-card__date{ font-size:11px; color:var(--ink-3); margin-top:8px; }
.inq-answer{
  margin-top:12px; padding:12px;
  background:var(--blue-soft); border-radius:12px;
}
.inq-answer__h{ display:flex; align-items:center; gap:6px; font-size:12px; font-weight:800; color:var(--blue); margin-bottom:5px; }
.inq-answer__b{ font-size:13px; color:var(--ink); line-height:1.6; }
.inq-answer__t{ font-size:11px; color:var(--ink-3); margin-top:7px; }

/* ==========================================================================
   조치 결과 카드 (신고 상세 §5.2 - 6)
   ========================================================================== */
.resolve-card{
  background:linear-gradient(160deg,#EEFBF3,#E4F7EC);
  border:1px solid rgba(22,179,100,.2);
  border-radius:var(--radius); padding:16px;
}
.resolve-card__h{ display:flex; align-items:center; gap:7px; font-size:13.5px; font-weight:800; color:#0E9655; margin-bottom:10px; }
.resolve-card__memo{ font-size:13.5px; color:var(--ink); line-height:1.65; }
.resolve-card__meta{ display:flex; gap:12px; margin-top:12px; font-size:11.5px; color:var(--ink-2); }
.resolve-card__meta b{ color:var(--ink-3); font-weight:700; margin-right:4px; }
.resolve-card__photo{
  margin-top:12px; height:120px; border-radius:12px;
  background:rgba(255,255,255,.6); border:1px dashed rgba(22,179,100,.35);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  color:#0E9655; font-size:11.5px; font-weight:700;
}

/* ==========================================================================
   회원 탈퇴 안내 (§7.3 / 7.4)
   ========================================================================== */
.wd-hero{ text-align:center; padding:6px 0 14px; }
.wd-hero__ico{
  width:62px; height:62px; border-radius:20px; margin:0 auto 12px;
  display:grid; place-items:center;
  background:rgba(229,72,77,.12); color:var(--st-rejected);
}
.wd-hero h2{ font-size:18px; font-weight:800; }
.wd-hero p{ font-size:13px; color:var(--ink-3); margin-top:6px; line-height:1.55; }
.wd-list{ background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow); padding:6px 16px; margin-bottom:18px; }
.wd-list__row{ display:flex; gap:11px; padding:14px 0; border-bottom:1px solid var(--line); }
.wd-list__row:last-child{ border-bottom:0; }
.wd-list__row svg{ color:var(--accent); flex:none; margin-top:1px; }
.wd-list__row .t{ font-size:13.5px; font-weight:800; }
.wd-list__row .d{ font-size:12.5px; color:var(--ink-3); margin-top:3px; line-height:1.5; }
.wd-agree{
  display:flex; align-items:center; gap:10px;
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:13px; padding:14px; margin-bottom:14px;
  cursor:pointer;
}
.wd-agree input{ width:20px; height:20px; flex:none; accent-color:var(--blue); }
.wd-agree span{ font-size:13.5px; font-weight:700; }

/* ==========================================================================
   프로필 이미지 (내 정보 §7.1)
   ========================================================================== */
.pf-avatar{ display:flex; flex-direction:column; align-items:center; gap:10px; padding:8px 0 4px; }
.pf-avatar__img{
  position:relative; width:92px; height:92px; border-radius:50%;
  background:var(--grad-blue); color:#fff;
  display:grid; place-items:center;
  font-size:34px; font-weight:800; font-family:var(--font-display);
  box-shadow:0 10px 24px rgba(47,107,255,.3);
}
.pf-avatar__img img{ width:100%; height:100%; border-radius:50%; object-fit:cover; }
.pf-avatar__cam{
  position:absolute; right:-2px; bottom:-2px;
  width:32px; height:32px; border-radius:50%;
  background:var(--surface); color:var(--blue);
  display:grid; place-items:center;
  box-shadow:var(--shadow); border:2px solid var(--surface);
}
.pf-avatar__edit{ font-size:13px; font-weight:700; color:var(--blue); }
.pf-login{ display:inline-flex; align-items:center; gap:7px; }
.pf-login__ico{
  width:22px; height:22px; border-radius:7px; flex:none;
  display:grid; place-items:center; font-size:12px; font-weight:800;
}
.pf-login__ico--kakao{ background:var(--kakao); color:#191600; }
.pf-login__ico--naver{ background:var(--naver); color:#fff; }
.pf-login__ico--google{ background:#fff; border:1px solid var(--line); color:#4285F4; }
.pf-login__ico--daedaegu{ background:var(--navy); color:#fff; }

/* ==========================================================================
   공통 로고 헤더 (fragments/common :: logohead — 홈/신고 이력/마이페이지 상단)
   ========================================================================== */
.logohead{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; gap:8px;
  padding:calc(env(safe-area-inset-top) + 10px) 16px 10px;
  background:var(--surface);
  border-bottom:1px solid var(--line);
}
.logohead__brand{ display:inline-flex; align-items:center; gap:7px; color:var(--blue); }
.logohead__brand svg{ flex:none; }
.logohead__word{
  font-family:var(--font-display);
  font-size:19px; font-weight:700; line-height:1;
  letter-spacing:-.3px;
  padding-top:3px;                 /* GmarketSans 베이스라인 보정 */
}
.logohead__spacer{ flex:1; }
.logohead .icon-btn{ background:var(--surface-2); box-shadow:none; }
/* 알림 뱃지 점은 어디서든 동작하도록 앵커 보장 */
.icon-btn--badge{ position:relative; }
/* 홈: 지도 위 플로팅 변형 (.home-stage 안에서 absolute) */
.logohead--float{
  position:absolute; top:0; left:0; right:0; z-index:12;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:0;
  box-shadow:0 4px 18px rgba(20,40,80,.1);
}
.logohead--float .icon-btn{ background:var(--surface); box-shadow:var(--shadow); }

/* ==========================================================================
   우측 슬라이드 드로어 (fragments/common :: drawer — 햄버거 메뉴)
   열림: #drawer.drawer-root 에 .open 토글 (fragment 내장 스크립트)
   ========================================================================== */
.drawer-root{
  position:fixed; top:0; bottom:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:var(--maxw);
  z-index:80;
  pointer-events:none;
  overflow:hidden;
}
.drawer__dim{
  position:absolute; inset:0;
  background:rgba(15,25,50,.5);
  backdrop-filter:blur(2px);
  opacity:0;
  transition:opacity .28s ease;
}
.drawer{
  position:absolute; top:0; bottom:0; right:0;
  width:min(78%, 300px);
  background:var(--surface);
  box-shadow:-14px 0 40px rgba(20,40,80,.2);
  display:flex; flex-direction:column;
  padding:calc(env(safe-area-inset-top) + 12px) 0 calc(env(safe-area-inset-bottom) + 14px);
  transform:translateX(105%);
  transition:transform .3s cubic-bezier(.2,.9,.3,1);
}
.drawer-root.open{ pointer-events:auto; }
.drawer-root.open .drawer__dim{ opacity:1; }
.drawer-root.open .drawer{ transform:none; }
.drawer__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 14px 12px 18px;
  border-bottom:1px solid var(--line);
}
.drawer__brand{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-display);
  font-size:16px; font-weight:700;
  color:var(--blue);
  padding-top:2px;
}
.drawer__brand svg{ flex:none; }
.drawer__close{
  width:36px; height:36px; flex:none;
  border-radius:50%;
  display:grid; place-items:center;
  color:var(--ink-3);
}
.drawer__close:active{ background:var(--surface-2); }
.drawer__menu{ padding:10px; display:flex; flex-direction:column; }
.drawer__menu a,
.drawer__menu button{
  display:flex; align-items:center; gap:12px;
  padding:14px 12px;
  border-radius:12px;
  font-size:14.5px; font-weight:700; color:var(--ink);
  text-align:left;
  transition:background .15s;
}
.drawer__menu a svg,
.drawer__menu button svg{ color:var(--ink-2); flex:none; }
.drawer__menu a:active,
.drawer__menu button:active{ background:var(--surface-2); }
.drawer__divider{ height:1px; background:var(--line); border:0; margin:8px 4px; }
.drawer__menu button[data-todo]{ color:var(--st-rejected); }
.drawer__menu button[data-todo] svg{ color:var(--st-rejected); }

/* ==========================================================================
   필터 pill + 드롭다운 패널 (홈·신고 이력 공용)
   구조: .fpill-box(position 앵커) > .fpill(버튼) + .fpill__menu(패널 > .fpill__item)
   열림: .fpill-box.open 또는 .fpill__menu.show
   ========================================================================== */
.fpill-box{ position:relative; display:inline-flex; flex:none; }
.fpill{
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 13px;
  border-radius:999px;
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  font-size:13px; font-weight:700; color:var(--ink);
  white-space:nowrap;
  transition:all .18s ease;
}
.fpill svg{ color:var(--blue); flex:none; }
.fpill .arw{ color:var(--ink-3); transition:transform .2s; }
.fpill:active{ transform:scale(.96); }
.fpill.on{
  background:var(--blue); color:#fff; border-color:transparent;
  box-shadow:0 6px 16px rgba(47,107,255,.35);
}
.fpill.on svg{ color:#fff; }
.fpill.on .arw{ color:rgba(255,255,255,.8); }
.fpill-box.open .fpill .arw{ transform:rotate(180deg); }
.fpill__menu{
  position:absolute; top:calc(100% + 8px); left:0;
  min-width:200px; max-height:320px; overflow-y:auto;
  background:var(--surface);
  border-radius:16px;
  box-shadow:var(--shadow-lg);
  padding:8px;
  display:flex; flex-direction:column; gap:2px;
  opacity:0; pointer-events:none; transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease;
  z-index:25;
}
.fpill-box.open .fpill__menu,
.fpill__menu.show{ opacity:1; pointer-events:auto; transform:none; }
.fpill__menu .input{ padding:10px 12px; border-radius:10px; font-size:13px; margin-bottom:6px; }
.fpill__item{
  display:flex; align-items:center; gap:9px;
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  font-size:13.5px; font-weight:700; color:var(--ink-2);
  text-align:left;
  transition:background .15s;
}
.fpill__item svg{ color:var(--blue); flex:none; }
.fpill__item:active{ background:var(--surface-2); }
.fpill__item.on{ background:var(--blue-soft); color:var(--blue); }

/* ==========================================================================
   지도 상태 라벨 핀 — pill + 아래 꼬리 (접수/처리중/완료)
   카카오 CustomOverlay content / 목업 지도 공용. 위치는 페이지·JS가 잡는다.
   ========================================================================== */
.pin{
  position:relative;
  display:inline-flex; align-items:center; gap:5px;
  padding:7px 12px 7px 10px;
  border-radius:999px;
  color:#fff;
  font-size:12px; font-weight:800; line-height:1;
  white-space:nowrap;
  box-shadow:0 6px 14px rgba(20,40,80,.3);
  cursor:pointer;
  transform-origin:50% calc(100% + 7px);   /* 꼬리 끝 기준 확대 */
  transition:transform .18s ease, box-shadow .18s ease;
}
.pin svg{ width:13px; height:13px; flex:none; }
.pin::after{
  content:'';
  position:absolute; left:50%; top:100%;
  transform:translateX(-50%);
  margin-top:-1px;
  border:7px solid transparent;
  border-bottom:0;
}
.pin--received{ background:var(--st-received); }
.pin--received::after{ border-top-color:var(--st-received); }
.pin--progress{ background:var(--st-progress); }
.pin--progress::after{ border-top-color:var(--st-progress); }
.pin--done{ background:var(--st-done); }
.pin--done::after{ border-top-color:var(--st-done); }
.pin.sel{
  transform:scale(1.14);
  box-shadow:0 10px 24px rgba(20,40,80,.42);
  z-index:10;
}
/* 그룹 마커 포함 건수 배지 (APP-2T-002) — 핀 우상단 작은 원형 */
.pin__count{
  position:absolute; top:-8px; right:-8px;
  min-width:19px; height:19px; padding:0 5px;
  border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(15,25,50,.92); color:#fff;
  font-size:10.5px; font-weight:800; font-style:normal; line-height:1;
  border:2px solid #fff;
  box-shadow:0 2px 6px rgba(20,40,80,.3);
}

/* ==========================================================================
   1·2차 요구사항 추가 컴포넌트
   ========================================================================== */

/* ---------- 하단 내비 5탭 (§1-1) — 홈 중앙 강조 ---------- */
.bottom-nav--5 a{ font-size:10px; gap:3px; }
.bottom-nav--5 svg{ width:22px; height:22px; }
.bottom-nav__home{ position:relative; }
.bottom-nav__homebtn{
  width:46px; height:46px; margin-top:-22px;
  border-radius:50%;
  background:var(--grad-blue); color:#fff;
  display:grid; place-items:center;
  box-shadow:0 6px 16px rgba(47,107,255,.42);
  border:3px solid var(--surface);
  transition:transform .15s ease;
}
.bottom-nav__homebtn svg{ width:21px; height:21px; }
.bottom-nav__home:active .bottom-nav__homebtn{ transform:scale(.92); }
.bottom-nav__home.on{ color:var(--blue); }
.bottom-nav__home.on svg{ filter:none; }

/* ---------- 사진 확대 모달 (§5-2) ---------- */
.pv-modal{
  position:fixed; inset:0; z-index:90;
  display:none; align-items:center; justify-content:center;
  background:rgba(10,16,32,.88);
}
.pv-modal.show{ display:flex; }
.pv-modal__img{
  max-width:94vw; max-height:80vh;
  border-radius:12px; object-fit:contain;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.pv-modal__close{
  position:absolute; top:calc(env(safe-area-inset-top) + 14px); right:16px;
  width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.14); color:#fff;
  display:grid; place-items:center;
}
.pv-modal__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:42px; height:42px; border-radius:50%;
  background:rgba(255,255,255,.14); color:#fff;
  display:grid; place-items:center;
}
.pv-modal__nav--prev{ left:10px; }
.pv-modal__nav--next{ right:10px; }
.pv-modal__nav[disabled]{ opacity:.3; }
.pv-modal__count{
  position:absolute; bottom:calc(env(safe-area-inset-bottom) + 22px); left:50%;
  transform:translateX(-50%);
  color:#fff; font-size:12.5px; font-weight:700;
  background:rgba(255,255,255,.14); padding:5px 13px; border-radius:999px;
}
.pv-modal__label{
  position:absolute; top:calc(env(safe-area-inset-top) + 22px); left:20px;
  color:#fff; font-size:12.5px; font-weight:800;
}
[data-zoomable]{ cursor:zoom-in; }

/* ---------- 도트 캐릭터 아바타 (§6-1/§6-2 — SVG 플레이스홀더) ---------- */
.dot-ava{ display:inline-grid; place-items:center; }
.dot-ava__stack{ display:block; }
.dot-ava__stack img{ image-rendering:pixelated; image-rendering:crisp-edges; }

/* ---------- ? 안내 버튼 + 안내 모달 (§3-7) ---------- */
.help-btn{
  width:17px; height:17px; flex:none; border-radius:50%;
  display:inline-grid; place-items:center;
  background:var(--surface-2); color:var(--ink-3);
  font-size:11px; font-weight:800; line-height:1;
  border:1px solid var(--line);
  vertical-align:2px;
}
.help-btn:active{ background:var(--blue-soft); color:var(--blue); }
.help-modal .modal{ text-align:left; }
.help-modal .modal h3{ text-align:center; }
.help-modal table{
  width:100%; border-collapse:collapse; margin:10px 0 4px;
  font-size:12px;
}
.help-modal th, .help-modal td{
  padding:7px 8px; border-bottom:1px solid var(--line);
  text-align:left; color:var(--ink-2);
}
.help-modal th{ font-weight:800; color:var(--ink); background:var(--surface-2); }
.help-modal .note{ font-size:11.5px; color:var(--ink-3); line-height:1.55; margin-top:8px; }

/* ---------- 등급 진행 (§3-1 — 다음 등급까지) ---------- */
.grade-progress{ margin-top:10px; }
.grade-progress__bar{
  height:7px; border-radius:999px; background:var(--surface-2); overflow:hidden;
}
.grade-progress__fill{
  height:100%; border-radius:999px; background:var(--grad-blue);
  transition:width .4s ease;
}
.grade-progress__txt{
  display:flex; justify-content:space-between;
  font-size:11px; font-weight:700; color:var(--ink-3); margin-top:5px;
}