/* Token Go 디자인 토큰 — 2026-09-10 fnny 컬러 시스템 (출처: 피그마 「⑨ 컬러 시스템 (확정)」).
   피그마 Color 컬렉션과 같은 값이다.
   시안에서 승인한 색과 앱이 다른 색을 쓰면 실기에서 본 것과 승인한 것이 달라진다.
   map.html이 인라인으로 가진 옛 변수는 이 파일이 뒤에 실려 덮어쓴다. */

/* 값은 피그마 「⑨ 컬러 시스템 (확정)」에서 그대로 읽어 왔다 (2026-09-10).
   눈으로 옮기지 않는다 — muted 를 disabled 값으로 넣어 시안보다 연하게 나온 적이 있다. */
/* .appbar[data-theme]: 앱 상단바가 iframe 안 이벤트 테마의 톤을 따라간다 (셸 톤이 아니라). */
:root, .appbar[data-theme="light"] {
  color-scheme: light dark;

  --bg:        #F7F7FA;
  --surface:   #FFFFFF;
  --sunken:    #F3F3F6;
  --scrim:     #202129;
  --ink:       #202129;   /* text/1        */
  --ink-2:     #696A75;   /* text/2        */
  --muted:     #93949E;   /* text/3        */
  --disabled:  #B8B9C1;   /* text/disabled */
  --line:      #E6E6EB;   /* border        */
  --line-strong: #D4D5DC; /* border/strong */
  /* 2026-09-09 확정 — 크롬은 무채색, 브랜드는 그라디언트로만.
     이벤트 페이지가 주최자 색을 입는 구조라 플랫폼이 유채색을 가지면
     모든 이벤트의 색과 싸운다. 지도도 마찬가지다 (피그마 「⑨ 메인컬러 검토」).
     흰 글자 대비 9.3:1 — 크롬 위 흰 글자는 AAA다. */
  --accent:    #454653;
  --accent-pressed: #373842;
  --accent-wash:    #EEEEF2;   /* selected */
  --accent-tint:    #F7F7FA;
  --on-accent: #FFFFFF;

  /* 브랜드 순간에만 쓴다 — 로고, 브랜드 CTA, 선택된 지도 핀, 참여 완료, 포인트 카드, 아바타.
     한 화면에 두 번 이상 두지 않는다. 흔해지면 특별하지 않다. */
  --brand-grad:   linear-gradient(110deg, #C9379C 0%, #F12E82 38%, #FF5364 68%, #FF7A2D 100%);
  /* 3단 별칭 — 참조하는 곳이 남아 있어 이름을 지우지 않는다. 값은 같다. */
  --brand-grad-3: var(--brand-grad);
  --success:   #15c47e;
  --success-wash: #e4f8f0;
  --warning:   #e09400;
  --warning-wash: #fff5de;
  --danger:    #f04452;
  --danger-wash: #fdecee;
  --action:    #454653;   /* 크롬 버튼 */
  --on-action: #FFFFFF;

  --radius: 14px;
  /* 카드는 스트록이 없다. 면을 띄우는 것은 이 그림자 하나뿐이다. */
  --shadow: 0 1px 2px rgba(32,33,41,.05), 0 8px 20px -6px rgba(32,33,41,.10);

  /* 모션 토큰. 화면마다 다른 속도를 쓰지 않는다. */
  --t-press: 150ms;
  --t-move:  250ms;
  --t-enter: 450ms;
  --ease:    cubic-bezier(.2,.7,.2,1);
  --spring:  cubic-bezier(.34,1.56,.64,1);
}

/* 다크. 시스템 설정을 따르되, 앱 안에서 고른 값(data-theme)이 이긴다. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    /* 2026-09-10 fnny 컬러 시스템 (피그마 「⑨ 컬러 시스템 (확정)」) */
    --bg:        #121318;
    --surface:   #202127;
    --sunken:    #27282F;   /* elevated */
    --scrim:     #0B0C10;
    --ink:       #F4F4F6;
    --ink-2:     #A5A6AF;
    --muted:     #7D7E88;
    --disabled:  #65666F;
    --line:      #303138;
    --line-strong: #45464F;
    /* 다크 크롬은 밝은 면이다. 그 위 글자는 흰색이 아니라 잉크(#202129) —
       대비 14:1. 밝은 면에 흰 글자를 얹는 사고를 막는 값이다. */
    --accent:    #F1F1F4;
    --accent-pressed: #B6B7C0;
    --accent-wash:    #292A30;   /* selected */
    --accent-tint:    #191A20;
    --on-accent: #202129;
    --success:   #3ddc9b;
    --success-wash: #0a2a1e;
    --warning:   #ffc845;
    --warning-wash: #2e2208;
    --danger:    #ff6b77;
    --danger-wash: #2e1114;
    --action:    #F1F1F4;
    --on-action: #202129;
    --shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 1px 2px rgba(0,0,0,.35), 0 8px 20px -6px rgba(0,0,0,.5);
  }
}
/* 라이트를 못 박으면 OS가 다크여도 폼 컨트롤·스크롤바까지 라이트로 되돌린다 */
:root[data-theme="light"] { color-scheme: light; }

:root[data-theme="dark"], .appbar[data-theme="dark"] {
  color-scheme: dark;
  /* 2026-09-10 fnny 컬러 시스템 (피그마 「⑨ 컬러 시스템 (확정)」) */
  --bg:        #121318;
  --surface:   #202127;
  --sunken:    #27282F;   /* elevated */
  --scrim:     #0B0C10;
  --ink:       #F4F4F6;
  --ink-2:     #A5A6AF;
  --muted:     #7D7E88;
  --disabled:  #65666F;
  --line:      #303138;
  --line-strong: #45464F;
  /* 다크 크롬은 밝은 면이다. 그 위 글자는 흰색이 아니라 잉크(#202129) —
     대비 14:1. 밝은 면에 흰 글자를 얹는 사고를 막는 값이다. */
  --accent:    #F1F1F4;
  --accent-pressed: #B6B7C0;
  --accent-wash:    #292A30;   /* selected */
  --accent-tint:    #191A20;
  --on-accent: #202129;
  --success:   #3ddc9b;
  --success-wash: #0a2a1e;
  --warning:   #ffc845;
  --warning-wash: #2e2208;
  --danger:    #ff6b77;
  --danger-wash: #2e1114;
  --action:    #F1F1F4;
  --on-action: #202129;
  --shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 1px 2px rgba(0,0,0,.35), 0 8px 20px -6px rgba(0,0,0,.5);
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-press: 0ms; --t-move: 0ms; --t-enter: 0ms; }
}

/* 글꼴. 프리텐다드 — 한글 UI의 사실상 표준이고 숫자 폭도 고르다. */
html, body { font-family: "Pretendard Variable", Pretendard, -apple-system, "Noto Sans KR", "Malgun Gothic", sans-serif !important; font-weight: 500; }
/* 입력·버튼은 폰트를 상속하지 않는다 (브라우저 기본 서식이 이긴다). 한 번에 넘긴다 —
   규칙마다 font-family: inherit을 적으면 언젠가 하나가 빠진다. */
input, button, select, textarea { font-family: inherit; }
.num, .row-val, .hero .num, .code-cells div, .wordmark { font-family: "Pretendard Variable", Pretendard, Inter, sans-serif; }

/* ── 공통 ─────────────────────────────────────────────── */
.btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 56px; border: 0; border-radius: var(--radius);
  font-weight: 700; font-size: 16px; line-height: 1; cursor: pointer;
  transition: transform var(--t-press) var(--ease), opacity var(--t-press);
}
.btn:active { transform: scale(.98); }
.btn.primary { background: var(--accent); color: var(--on-accent); }
.btn.primary:disabled { background: var(--disabled); color: var(--on-accent); }
/* 브랜드 CTA — 참여 행동에만 그라디언트 (참여하기 · QR 찍기). 기능 버튼(다음·확인)은 크롬 그대로 */
#s-go.btn.primary:not(.done):not(:disabled), #j-opts .opt.primary:not(:disabled) { background: var(--brand-grad); color: #fff; }
#j-opts .opt.primary:not(:disabled) .ic, #j-opts .opt.primary:not(:disabled) .chip { background: rgba(255,255,255,.22); color: #fff; }
#j-opts .opt.primary:not(:disabled) span, #j-opts .opt.primary:not(:disabled) b, #j-opts .opt.primary:not(:disabled) .caret { color: #fff; }
.btn.soft { background: var(--accent-wash); color: var(--accent-pressed); }

/* ── 인증 오버레이 ─────────────────────────────────────── */
#auth {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--bg); color: var(--ink);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
#auth[hidden] { display: none; }
/* flow-root: 첫 자식(h1)의 위 여백이 section 밖으로 새어 나가 절대 배치된
   뒤로가기까지 밀어내리는 것을 막는다. */
#auth section { position: relative; min-height: 100%; padding: 0 24px calc(24px + var(--safe-bottom, 0px)); display: flow-root; }
#auth section[hidden] { display: none; }

#auth .glow {
  position: absolute; left: -120px; top: -140px; width: 460px; height: 460px;
  border-radius: 999px; pointer-events: none;
  background: radial-gradient(circle, rgba(241,46,130,.14), rgba(241,46,130,0) 70%);
}

.wordmark {
  display: inline-flex; align-items: center; gap: 0;
  font: 600 23px/1 Inter, -apple-system, sans-serif; letter-spacing: .02em; color: var(--ink);
  margin-top: calc(118px + var(--safe-top, 0px));
}
.wordmark b { color: var(--accent); margin-left: .34em; font-weight: 600; }
.wordmark i {
  display: inline-block; width: .72em; height: .72em; margin-left: .06em;
  border-radius: 999px; background: var(--accent); position: relative; top: .02em;
}
.wordmark i::after {
  content: ""; position: absolute; inset: 29%; border-radius: 999px; background: var(--bg);
}
/* fnny 워드마크(SVG). 위 텍스트 워드마크 규칙은 인증 코드 화면 등 남은 곳을 위해 둔다. */
img.wordmark { display: block; width: 112px; height: auto; }

#auth h1 { font-size: 26px; line-height: 36px; margin: 26px 0 0; letter-spacing: -.01em; font-weight: 700; }
#auth .sub { color: var(--muted); font-size: 14px; line-height: 21px; margin: 12px 0 0; }

.field {
  display: block; width: 100%; height: 56px; margin-top: 44px;
  padding: 0 18px; border: 0; border-radius: var(--radius);
  background: var(--surface); color: var(--ink); font-weight: 500; font-size: 15px;
  outline: none;
}
.field::placeholder { color: var(--disabled); }
.field:focus { box-shadow: 0 0 0 2px var(--accent) inset; }
#email-form .btn { margin-top: 10px; }

/* 로그인 메인 — 간편 로그인(크롬) + Google. 「간편 로그인」을 누르면 그 자리에 이메일 입력이 열린다. */
.auth-main { display: grid; gap: 10px; margin-top: 44px; }
.auth-main .field { margin-top: 0; }
.auth-main [hidden] { display: none; }
.btn.google { gap: 10px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.btn.google svg { width: 20px; height: 20px; }

.sns-label { text-align: center; color: var(--muted); font-size: 13px; margin: 32px 0 16px; }
.sns { display: flex; justify-content: center; gap: 18px; }
.sns button {
  width: 56px; height: 56px; border: 0; border-radius: 999px; cursor: pointer;
  display: grid; place-items: center; padding: 0;
  transition: transform var(--t-press) var(--ease);
}
.sns button:active { transform: scale(.94); }
.sns button svg { width: 26px; height: 26px; }
.sns-kakao  { background: #FEE500; }
.sns-naver  { background: #03C75A; }
.sns-google { background: #FFFFFF; box-shadow: 0 1px 4px rgba(15,23,40,.12); }
.sns-apple  { background: #000000; }
.sns button:disabled { opacity: .35; }

.terms { position: absolute; left: 24px; right: 24px; bottom: calc(40px + var(--safe-bottom, 0px)); text-align: center; color: var(--disabled); font-size: 11.5px; margin: 0; }

/* 인증 코드 */
/* ── 원형 아이콘 버튼 · 앱 상단바 (2026-09-11) ─────────────────
   앱 안에서 뒤로·닫기·액션은 전부 이 38px 원형 하나다. 피그마 「③ 참여 흐름」 상세의
   Back 필과 같은 값. 색은 기능 버튼(크롬)과 같은 토큰 — 라이트: 어두운 크롬 원 + 흰 아이콘,
   다크: 밝은 크롬 원 + 어두운 아이콘. 테마마다 톤이 뒤집힌다(둘 다 어둡게 두지 않는다).
   아이콘은 icon/left/line · icon/close/line 24px 세트 (선 2, 둥근 끝). */
/* 알약도 유리다 (2026-09-11, Luma 참고) — 크롬색 62% + 뒤 흐림. 라이트: 어두운 원/흰 아이콘, 다크: 밝은 원/어두운 아이콘. */
:root { --pill-bg: color-mix(in srgb, var(--action) 62%, transparent); --pill-fg: var(--on-action); }
.icon-pill { width: 38px; height: 38px; flex: none; border: 0; border-radius: 999px; cursor: pointer; padding: 0;
  display: inline-grid; place-items: center; background: var(--pill-bg); color: var(--pill-fg);
  -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4);
  transition: transform var(--t-press, 120ms) var(--ease, ease); }
.icon-pill:active { transform: scale(.94); }
.icon-pill svg { width: 24px; height: 24px; display: block; }
.icon-pill[hidden] { display: none; }
/* 유리 — 상단바·탭바는 불투명 흰/검정이 아니라 반투명 유리다. 뒤의 테마·지도 색이 배어 나온다 (라이트·다크 공통). */
.glass { background: color-mix(in srgb, var(--bg) 45%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5); }
.appbar { --pill-bg: color-mix(in srgb, var(--action) 62%, transparent); --pill-fg: var(--on-action); /* 톤이 바뀐 바 안에서 다시 계산 */
  display: grid; grid-template-columns: 38px minmax(0, 1fr) 38px; align-items: center; gap: 8px;
  padding: calc(7px + var(--safe-top, 0px)) 12px 7px; flex: none; }
/* 호스트 화면: 상단바가 iframe 위에 떠서 유리로 비친다. 안쪽 페이지는 --app-top 만큼 위를 비운다 (sb.js가 받는다). */
.screen.plain { position: fixed; }
.screen.plain .appbar { position: absolute; top: 0; left: 0; right: 0; z-index: 2; }
.appbar h2 { margin: 0; font-size: 16px; font-weight: 600; text-align: center; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appbar .icon-pill.ghost { visibility: hidden; }

/* 인증 코드 화면 뒤로 — 같은 원형 */
.back {
  position: absolute; left: 16px; top: calc(52px + var(--safe-top, 0px));
  width: 38px; height: 38px; border: 0; border-radius: 999px; cursor: pointer; padding: 0;
  display: inline-grid; place-items: center; background: var(--pill-bg); color: var(--pill-fg);
  -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4);
}
.back svg { width: 24px; height: 24px; display: block; }
#auth-code h1 { margin-top: calc(118px + var(--safe-top, 0px)); font-size: 24px; line-height: 33px; }

.code-wrap { position: relative; margin-top: 32px; }
.code-cells { display: flex; gap: 8px; }
.code-cells div {
  width: 50px; height: 60px; border-radius: 12px; background: var(--surface);
  display: grid; place-items: center; font-weight: 700; font-size: 24px; color: var(--ink);
  transition: background var(--t-press);
}
.code-cells div.cur { background: var(--accent-wash); }
.code-cells div.cur::after { content: ""; width: 2px; height: 24px; background: var(--accent); animation: blink 1s steps(1) infinite; }
.code-cells div.cur:not(:empty)::after { display: none; }
@keyframes blink { 50% { opacity: 0; } }
.code-input {
  position: absolute; inset: 0; opacity: 0; font-size: 24px; letter-spacing: 2em; border: 0; background: transparent;
}
.code-wrap.shake { animation: shake .4s var(--ease); }
@keyframes shake { 20%,60% { transform: translateX(-6px); } 40%,80% { transform: translateX(6px); } }

.resend { color: var(--muted); font-size: 13.5px; margin: 20px 0 0; }
.resend button { border: 0; background: none; color: var(--accent); font-weight: 700; font-size: 13.5px; padding: 0; cursor: pointer; }
.resend button:disabled { color: var(--muted); font-weight: 500; }
#verify { position: absolute; left: 24px; right: 24px; bottom: calc(40px + var(--safe-bottom, 0px)); width: auto; }

#auth-toast {
  position: fixed; left: 24px; right: 24px; bottom: calc(110px + var(--safe-bottom, 0px)); z-index: 1001;
  background: var(--ink); color: var(--bg); padding: 12px 16px; border-radius: 12px;
  font-size: 13.5px; text-align: center; opacity: 0; transform: translateY(8px);
  transition: opacity var(--t-move), transform var(--t-move) var(--ease); pointer-events: none;
}
#auth-toast.on { opacity: 1; transform: none; }

/* ── 탭바 — 떠 있는 알약 ──────────────────────────────── */
#tabbar {
  position: fixed; left: 24px; right: 24px; bottom: calc(22px + var(--safe-bottom, 0px)); z-index: 600;
  height: 66px; border-radius: 999px; padding: 6px;
  display: flex; align-items: center; justify-content: space-between;
  /* 유리 알약 — 지도·테마 색이 배어 나온다 */
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5);
  box-shadow: 0 2px 6px rgba(15,23,40,.06), 0 12px 28px -8px rgba(15,23,40,.22);
}
#tabbar[hidden] { display: none; }
#tabbar button {
  flex: 1; height: 54px; border: 0; border-radius: 999px; background: transparent; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--disabled); font-weight: 500; font-size: 10px; padding: 0;
  transition: background var(--t-move) var(--ease), color var(--t-move);
}
#tabbar button svg { width: 22px; height: 22px; fill: currentColor; }
#tabbar button.on { background: var(--accent-wash); color: var(--accent); font-weight: 700; }
/* 탭바 그림자 = Elevation/Floating. 다크에서도 지우지 않는다(결정 2026-09-04) —
   바닥이 검어도 위를 지나가는 카드와 분리돼야 한다. */
#tabbar { box-shadow: 0 2px 6px rgba(15,23,41,.06), 0 12px 28px -8px rgba(15,23,41,.22); }
:root[data-theme="dark"] #tabbar { box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 2px 6px rgba(0,0,0,.35), 0 12px 28px -8px rgba(0,0,0,.6); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #tabbar { box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 2px 6px rgba(0,0,0,.35), 0 12px 28px -8px rgba(0,0,0,.6); } }

/* ── 탭 화면 공통 ─────────────────────────────────────── */
.screen {
  position: fixed; inset: 0; z-index: 500; background: var(--bg); color: var(--ink);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: calc(56px + var(--safe-top, 0px)) 24px calc(120px + var(--safe-bottom, 0px));
}
.screen[hidden] { display: none; }
/* 이벤트 만들기·관리는 웹 페이지를 그대로 띄운다 (같은 출처라 세션 공유).
   화면을 두 벌로 짜면 문구와 규칙이 언젠가 갈라진다. */
.screen.plain { padding: 0; display: flex; flex-direction: column; }
#host-frame { flex: 1; width: 100%; border: 0; background: var(--bg); }
.screen-head h1 { font-size: 26px; margin: 0; letter-spacing: -.01em; }
.screen-head p { color: var(--muted); font-size: 13.5px; margin: 6px 0 0; }
.screen-head { margin-bottom: 22px; }
.card { background: var(--surface); border-radius: 16px; margin-bottom: 14px; box-shadow: var(--shadow); overflow: hidden; }
.card-head { display: flex; align-items: center; gap: 8px; padding: 16px 18px 6px; font-weight: 700; font-size: 14.5px; }
.card-head span { flex: 1; }
.card-body { color: var(--muted); font-size: 13.5px; line-height: 20px; margin: 0; padding: 0 18px 12px; }
.card .btn { width: calc(100% - 36px); margin: 0 18px 18px; height: 46px; border-radius: 12px; font-size: 14.5px; }
.card .btn + .btn { margin-top: -8px; }
.chip { display: inline-block; padding: 4px 9px; border-radius: 999px; font-weight: 700; font-size: 11.5px; font-style: normal;
  background: var(--accent-wash); color: var(--accent-pressed); }
.chip.done { background: var(--success-wash); color: var(--success); }
.chip.out, .card-head .chip { background: var(--sunken); color: var(--muted); }
.card-head .chip.on { background: var(--success-wash); color: var(--success); }
.section-title { display: flex; align-items: center; margin: 22px 0 10px; font-weight: 700; font-size: 15px; }
.empty-state { padding: 26px 18px; text-align: center; color: var(--muted); font-size: 13.5px; }

.row { display: flex; align-items: center; gap: 12px; padding: 14px 18px; }
.row + .row { border-top: 1px solid var(--line); }
.row .dot { width: 34px; height: 34px; border-radius: 999px; flex: none; }
.row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.row-main b { font-size: 14.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-main span { font-size: 12.5px; color: var(--muted); }
.row-val { font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; }
.row-val.plus { color: var(--success); font-size: 15px; }

/* 이벤트 목록 */
#events-list { position: relative; padding-left: 22px; }
#events-list::before { content: ""; position: absolute; left: 4px; top: 18px; bottom: 24px; border-left: 1.5px dashed var(--line-strong); opacity: .45; }
/* 날짜 줄은 목록 안에 그대로. 스크롤하면 위에 알약(#date-pill) 하나만 떠서 따라온다 */
.day { position: relative; }
.date-head { display: flex; align-items: center; gap: 10px; margin: 8px 0 12px; font-size: 14.5px; position: relative; }
.date-head i { width: 9px; height: 9px; border-radius: 999px; background: var(--line-strong); position: absolute; left: -22px; top: 50%; margin-top: -4.5px; }
.date-head b { font-weight: 700; }
.date-head span { color: var(--muted); font-size: 13.5px; }
#date-pill { position: fixed; z-index: 520; left: 24px; top: calc(36px + var(--safe-top, 0px)); padding: 8px 14px; border-radius: 999px;
  font-size: 13.5px; color: var(--ink); background: color-mix(in srgb, var(--surface) 74%, transparent);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 2px 6px rgba(15,23,41,.06), 0 12px 28px -8px rgba(15,23,41,.22), inset 0 0 0 .5px color-mix(in srgb, var(--ink) 8%, transparent);
  opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity var(--t-press) var(--ease), transform var(--t-press) var(--ease); }
#date-pill.on { opacity: 1; transform: none; }
#date-pill b { font-weight: 700; margin-right: 2px; }
.ec-time { font-size: 12.5px; color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.event-card {
  display: flex; gap: 12px; width: 100%; text-align: left; align-items: flex-start;
  background: var(--surface); border: 0; border-radius: 16px; padding: 14px; margin: 0 0 12px;
  box-shadow: var(--shadow); cursor: pointer; color: var(--ink);
  transition: transform var(--t-press) var(--ease);
}
.event-card:active { transform: scale(.985); }
.ec-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ec-title { font-size: 15.5px; font-weight: 700; line-height: 21px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ec-host, .ec-place { font-size: 12.5px; color: var(--muted); }
.ec-body .chip { align-self: flex-start; margin-top: 4px; }
.thumb { width: 78px; height: 78px; border-radius: 12px; background: var(--sunken) center/cover no-repeat; flex: none; }

/* 포인트 */
/* 모은 포인트는 이 앱의 결과물이다. 잉크 카드는 정보처럼 보이고
   그라디언트는 성취처럼 보인다 — 그라디언트를 쓰는 자리 중 하나다.
   면이 브랜드색이라 글자는 두 테마 모두 흰색이다 (--on-action은 다크에서 잉크다). */
.hero { background: var(--brand-grad-3); color: #fff; border-radius: 18px; padding: 20px 22px; margin-bottom: 14px; }

.hero .cap { display: block; font-size: 13px; opacity: .8; }
.hero .num { display: block; font-weight: 700; font-size: 38px; letter-spacing: -.02em; margin: 6px 0 4px; font-variant-numeric: tabular-nums; }
.hero .note { font-size: 12.5px; opacity: .8; }

/* 마이 */
.card.profile { display: flex; align-items: center; gap: 14px; padding: 18px; }
/* 아바타는 화면에 하나뿐이고 「나」를 가리킨다. 연회색이면 자리만 차지한다. */
.avatar { width: 48px; height: 48px; border-radius: 999px; background: var(--brand-grad); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 18px; flex: none; }
.prov { width: 28px; height: 28px; border-radius: 999px; flex: none; background: var(--sunken); }
.prov { display: grid; place-items: center; }
.prov svg { width: 14px; height: 14px; }
.prov-kakao { background: #FEE500; } .prov-google { background: #fff; box-shadow: 0 1px 4px rgba(15,23,40,.12); }
.prov-apple { background: #000; } .prov-naver { background: #03C75A; }
.card.menu button {
  display: flex; align-items: center; width: 100%; padding: 16px 14px 16px 18px; border: 0; background: none;
  font-weight: 500; font-size: 15px; color: var(--ink); text-align: left; cursor: pointer;
}
.card.menu button + button { border-top: 1px solid var(--line); }
.card.menu button span { margin-left: auto; color: var(--disabled); font-size: 18px; }
.card.menu button span.ver { font-size: 13px; color: var(--muted); }
.card.menu button:disabled { color: var(--ink); cursor: default; }
.signout { display: block; margin: 8px auto 0; border: 0; background: none; color: var(--muted); font-weight: 600; font-size: 14px; cursor: pointer; padding: 10px; }

/* 탭바가 있을 때 지도 조작 버튼·시연 버튼은 탭바 위로 */
body.has-tabbar #controls { bottom: calc(110px + var(--safe-bottom, 0px)) !important; }
body.has-tabbar #demo { bottom: calc(104px + var(--safe-bottom, 0px)) !important; }

/* 화면 테마 선택 (마이) */
.seg { display: flex; gap: 4px; background: var(--sunken); border-radius: 10px; padding: 3px; margin-left: auto; }
.card.menu .seg button, .seg button { display: inline-block; width: auto; white-space: nowrap; border: 0; background: none; padding: 6px 10px; border-radius: 8px; font-weight: 600; font-size: 12.5px; color: var(--muted); cursor: pointer; text-align: center; }
.card.menu .seg button.on, .seg button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(15,23,41,.08); }
.card.menu .theme-row { display: flex; align-items: center; padding: 12px 14px 12px 18px; font-size: 15px; font-weight: 500; color: var(--ink); }
.card.menu .theme-row + button { border-top: 1px solid var(--line); }

/* ── 플랫 (2026-09-11, 피그마 565/566 · 상세 web.css 와 같은 언어) — 마이·포인트 탭 ──
   카드 fill·그림자를 걷어내고 배경 위 콘텐츠 + 1px 헤어라인(--line) + 여백으로 섹션을 나눈다.
   면은 탭 타깃(.btn.soft·세그먼트)에만 남는다. 마크업의 .card 는 그대로 두고 여기서 뒤집는다. */
#screen-my .card, #screen-points .card {
  background: none; box-shadow: none; border-radius: 0; overflow: visible;
  margin: 0; padding: 18px 0; border-top: 1px solid var(--line); }
#screen-my .card.profile { border-top: 0; padding: 2px 0 20px; }
#screen-my .card-head { padding: 0 0 6px; }
#screen-my .card-body { padding: 0 0 14px; }
#screen-my .card .btn { width: 100%; margin: 0 0 8px; }
#screen-my .card .btn + .btn { margin-top: 0; }
#screen-my .card .btn:last-child { margin-bottom: 0; }
#screen-my .card.menu { padding: 0; }
#screen-my .card.menu > button { padding: 16px 0; }
#screen-my .card.menu .theme-row { padding: 14px 0; }
#screen-my .signout { margin-top: 18px; }
/* 포인트 — 총합은 카드가 아니라 배경 위 큰 숫자. 브랜드 그라디언트는 숫자에만 (브랜드 순간). */
#screen-points .hero { background: none; color: var(--ink); border-radius: 0; padding: 4px 0 22px; margin: 0; }
#screen-points .hero .cap { color: var(--muted); opacity: 1; font-weight: 600; }
#screen-points .hero .num { display: inline-block; font-size: 46px; font-weight: 800; margin: 4px 0 2px;
  background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
#screen-points .hero .note { display: block; color: var(--muted); opacity: 1; }
#screen-points .section-title { border-top: 1px solid var(--line); padding-top: 18px; margin: 8px 0 0;
  font-size: 12.5px; font-weight: 600; color: var(--muted); }
#screen-points .section-title + .card { border-top: 0; padding-top: 0; }
#screen-points .card { padding: 0; }
#screen-points .row { padding: 14px 0; }
#screen-points .empty-state { padding: 22px 0; text-align: left; }

/* ── 지도 다크 ──────────────────────────────────────────
   네이버 지도에는 다크 스타일이 없다(NORMAL/TERRAIN/SATELLITE/HYBRID 뿐).
   타일 레이어(.tg-tiles — map.js watchTileLayers가 표시)에만 반전 필터를 건다.
   핀·내 위치가 든 오버레이 판은 빠진다. 로고·저작권은 다른 레이어 —
   가리거나 바꾸면 약관 위반이다. */
:root[data-theme="dark"] #map .tg-tiles { filter: invert(.92) hue-rotate(180deg) brightness(.88) contrast(.92) saturate(.75); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #map .tg-tiles { filter: invert(.92) hue-rotate(180deg) brightness(.88) contrast(.92) saturate(.75); }
}

/* ══════════════════════════════════════════════════════
   지도 홈 — 핀·상단바·카드·참여 시트·시연 버튼
   ══════════════════════════════════════════════════════ */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; width: 100%; background: var(--bg); color: var(--ink); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
/* 지도 화면만 스크롤을 잠근다. create·manage·e 페이지는 같은 CSS를 쓰면서 스크롤돼야 한다. */
html.app, body.app { height: 100%; overflow: hidden; }
:root { --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); }
#map { position: fixed; inset: 0; width: 100%; height: 100%; }

/* 핀. 앱 색만 쓴다 — 캠페인 색은 상세에서. 지도 위라 테두리는 남긴다. */
.pin { display: inline-flex; align-items: center; height: 38px; padding: 0 5px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); white-space: nowrap; cursor: pointer;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 6px rgba(15,23,41,.06), 0 12px 28px -8px rgba(15,23,41,.22);
  transition: transform var(--t-move) var(--spring); }
.pin u { display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: 999px;
  background: var(--accent-wash); color: var(--accent-pressed); font-weight: 700; font-size: 13px; text-decoration: none;
  font-variant-numeric: tabular-nums; }
.pin b { padding: 0 9px; font-weight: 700; font-size: 13px; color: var(--ink); max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
/* 선택된 핀은 화면에 하나뿐이라 브랜드를 써도 시끄러워지지 않는다.
   그라디언트를 쓰는 네 곳 중 하나다 (tokengo.css 머리말).
   38px에서는 채도를 낮추면 탁해진다 — 로고 값을 그대로 쓴다. */
.pin.sel { background: var(--brand-grad); border-color: transparent; }
.pin.sel u { background: var(--surface); color: #a93b9c; }
.pin.sel b { color: #fff; }
/* 추천 핀도 기본과 같은 흰색이다 (2026-09-11). 검정 핀이 섞여 지도가 시끄러웠다 —
   추천 강조는 색이 아니라 z-index(위로 올라옴)로만. 브랜드색은 선택된 핀 하나만 갖는다. */
.pin.hot { background: var(--surface); border-color: var(--line); }
.pin.hot u { background: var(--accent-wash); color: var(--accent-pressed); }
.pin.hot b { color: var(--ink); }
.pin.hot.sel { background: var(--brand-grad); border-color: transparent; }
.pin.hot.sel u { background: var(--surface); color: #a93b9c; }
.pin.hot.sel b { color: #fff; }
/* 날짜 캡슐 — 포인트가 없는 이벤트. 포인트(파랑)와 구분되게 중립색으로 둔다.
   파랑을 쓰면 "포인트 있는 이벤트"로 잘못 읽힌다. */
.pin.when u { background: var(--sunken); color: var(--ink-2); }
/* 포인트도 날짜도 없는 이벤트 — 캡슐 대신 장소 아이콘 하나 */
.pin.plain u { width: 22px; padding: 0; background: var(--sunken); position: relative; }
.pin.plain u::after { content: ""; position: absolute; inset: 0; margin: auto; width: 9px; height: 9px;
  border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--ink-2); }
/* 홀더 전용 — 이름 앞에 자물쇠. 참여 조건이 있다는 신호가 핀에서 보여야
   가서 못 들어가는 일이 안 생긴다. */
.pin.gated b::before { content: "🔒"; font-size: 10px; margin-right: 4px; opacity: .75; }
.pin.done u { background: var(--success-wash); color: var(--success); }
.pin.done b { color: var(--ink-2); }
.pin.out u { background: var(--sunken); color: var(--disabled); }
.pin.out b { color: var(--disabled); }
/* 멀리 보면 스팟이 점만 남는다. 이 점들은 크롬이 아니라 콘텐츠 —
   지도에 무엇이 있는지가 화면의 내용 그 자체다. 잉크로 두니 지도 위
   얼룩처럼 보여서 브랜드색을 준다. 14px이라 그라디언트는 마젠타 한 색으로 읽힌다. */
.pin.dot { width: 14px; height: 14px; padding: 0; border: 0; background: var(--brand-grad);
  box-shadow: 0 0 0 2.5px var(--surface), 0 2px 6px rgba(15,23,41,.2); }
/* 점이 다 브랜드색이 됐으니 추천은 색이 아니라 크기로 구분한다 */
.pin.dot.hot { width: 20px; height: 20px;
  box-shadow: 0 0 0 3px var(--surface), 0 2px 8px rgba(15,23,41,.28); }
.pin.dot.done { background: var(--success); }
.pin.dot.out { background: var(--disabled); }
/* 점 상태에서 선택된 핀 — 점이 전부 브랜드색이라 색으로는 구분이 안 된다. 크기 + 흰 링 + 번짐으로 (2026-09-11) */
.pin.dot.sel, .pin.dot.hot.sel { width: 26px; height: 26px; background: var(--brand-grad);
  box-shadow: 0 0 0 3px var(--surface), 0 0 0 9px color-mix(in srgb, #F12E82 28%, transparent), 0 4px 12px rgba(15,23,41,.35); }
/* 내 위치 — 크롬색은 「활성」 느낌이 안 난다. 브랜드 핑크 점 + 살아 있는 파동 (선택 핀 링과 같은 색) */
.me { width: 18px; height: 18px; border-radius: 50%; background: #F12E82; border: 3px solid var(--surface);
  box-shadow: 0 0 0 1px rgba(15,23,41,.15), 0 2px 8px rgba(241,46,130,.45); transform: translate(-50%, -50%); }
.me::before { content: ""; position: absolute; inset: -3px; border-radius: 50%;
  background: color-mix(in srgb, #F12E82 40%, transparent); animation: me-pulse 2s var(--ease, ease-out) infinite; }
@keyframes me-pulse { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(3.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .me::before { animation: none; box-shadow: 0 0 0 12px color-mix(in srgb, #F12E82 14%, transparent); } }

/* 상단바 — 활동이 먼저. 누르면 포인트 탭 */
/* 상단 검색 바 — 지도 위에 떠서 이벤트·장소를 찾는다 (예전 활동 카드 자리) */
#map-search { position: fixed; z-index: 6; left: 16px; right: 16px; top: calc(56px + var(--safe-top));
  height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--shadow);
  color: var(--muted); font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; width: auto; }
#map-search .ms-ico { width: 20px; height: 20px; flex: none; color: var(--muted); }
#map-search span { color: var(--muted); }

/* 검색 오버레이 — 전체를 덮는 시트. 이벤트/장소 결과 · 최근 · 빈 상태 · 오류 */
#search { position: fixed; inset: 0; z-index: 60; background: var(--surface); display: flex; flex-direction: column; }
#search[hidden] { display: none; }
.ss-top { display: flex; align-items: center; gap: 4px; padding: calc(8px + var(--safe-top)) 12px 8px; }
#ss-back { width: 40px; height: 44px; border: 0; background: none; color: var(--ink); display: grid; place-items: center; cursor: pointer; flex: none; }
#ss-back svg { width: 24px; height: 24px; }
.ss-field { flex: 1; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border-radius: 12px; background: var(--sunken); }
.ss-field .ss-ico { width: 20px; height: 20px; flex: none; color: var(--muted); }
#ss-input { flex: 1; border: 0; background: none; outline: none; font-size: 16px; font-weight: 600; color: var(--ink); min-width: 0; }
#ss-input::placeholder { color: var(--muted); font-weight: 500; }
#ss-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
#ss-clear { width: 24px; height: 24px; border: 0; background: none; padding: 0; color: #C9CBD2; cursor: pointer; flex: none; }
#ss-clear[hidden] { display: none; }
#ss-clear svg { width: 18px; height: 18px; }
.ss-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 2px 0 24px; }
.ss-sec { padding: 16px 20px 4px; font-size: 13px; font-weight: 700; color: var(--muted); }
.ss-row { display: flex; align-items: flex-start; gap: 12px; padding: 11px 20px; cursor: pointer; border: 0; background: none; width: 100%; text-align: left; }
.ss-row:active { background: var(--sunken); }
.ss-row .ss-pin { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.ss-row .ss-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ss-row .ss-name { font-size: 15px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-row .ss-meta { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.ss-recent { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 20px 8px; }
.ss-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; background: var(--sunken); border: 0; color: var(--ink); font-size: 14px; font-weight: 600; cursor: pointer; }
.ss-chip svg { width: 16px; height: 16px; color: var(--muted); }
.ss-empty { text-align: center; color: var(--muted); padding: 72px 40px; }
.ss-empty svg { width: 64px; height: 64px; color: #C9CBD2; margin-bottom: 16px; }
.ss-empty b { display: block; color: var(--ink); font-size: 17px; margin-bottom: 6px; }
.ss-retry { margin-top: 14px; padding: 10px 18px; border-radius: 999px; background: var(--ink); color: var(--bg); border: 0; font-weight: 700; font-size: 14px; cursor: pointer; }
.ss-hint { padding: 12px 20px; font-size: 13px; color: var(--muted); }

/* 조작 — 내 위치만. 확대·축소는 손가락으로 한다 */
#controls { position: fixed; z-index: 5; right: 16px; bottom: calc(110px + var(--safe-bottom)); display: flex; flex-direction: column; gap: 10px; transition: bottom var(--t-move) var(--ease); }
#controls button { width: 48px; height: 48px; border: 0; border-radius: 999px; background: var(--surface); color: var(--accent);
  display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 6px rgba(15,23,41,.06), 0 12px 28px -8px rgba(15,23,41,.22); }
#controls button svg { width: 22px; height: 22px; fill: currentColor; }
#controls button { transition: transform var(--t-press, 120ms) var(--ease, ease), color var(--t-press) var(--ease); }
#controls button:active { transform: scale(.9); }               /* 눌림 피드백 (구글맵처럼) */
#controls button.off { color: var(--disabled); }
#controls button.busy { opacity: .55; pointer-events: none; }
/* 위치를 잡으면 아이콘이 브랜드색으로 — 「내 위치가 살아 있다」는 신호 (2026-09-11) */
#locate:not(.off) { color: #F12E82; }

/* 스팟 카드 */
/* 치수는 피그마 SpotCard(11:2) 그대로: r24 · 패딩 20 · 세로 간격 16 · 머리 64 */
#sheet { position: fixed; z-index: 20; left: 12px; right: 12px; bottom: calc(96px + var(--safe-bottom));
  background: var(--surface); border-radius: 24px; padding: 20px; box-shadow: var(--shadow);
  transform: translateY(calc(100% + 120px)); transition: transform var(--t-enter) var(--spring); }
#sheet.on { transform: none; }
/* 머리 줄은 눌러서 이벤트 상세로 간다. 여백을 안쪽으로 넣어 탭 영역을
   넓히고, 오른쪽 화살표가 "다른 화면으로 나간다"를 알린다. */
#sheet #s-head.head { cursor: pointer; }
#sheet .head { display: flex; gap: 12px; align-items: center;
  margin: -8px -10px 0; padding: 8px 10px; border-radius: 14px;
  transition: background var(--t-press) var(--ease); }
#sheet #s-head:hover { background: color-mix(in srgb, var(--sunken) 60%, transparent); }
#sheet #s-head:active { background: var(--sunken); }
#sheet #s-head:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#sheet .head .go { width: 17px; height: 17px; flex: none; margin-left: 2px;
  fill: none; stroke: var(--muted); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }
#sheet .head > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
/* 머리 세 줄은 한 줄씩 — 썸네일 64와 높이를 맞춘다. 긴 이름은 말줄임 */
#sheet .campaign, #sheet h1, #sheet .place { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#sheet .thumb { width: 64px; height: 64px; border-radius: 16px; background: var(--sunken) center/cover no-repeat; flex: none; display: grid; place-items: center; color: var(--disabled); }
#sheet .thumb svg { width: 24px; height: 24px; fill: currentColor; }
#sheet .thumb.img svg { display: none; }
#sheet .campaign { font-size: 12px; line-height: 14px; color: var(--muted); }
#sheet h1 { font-size: 22px; line-height: 26px; margin: 0; font-weight: 800; }
#sheet .place { font-size: 13px; line-height: 16px; font-weight: 400; color: var(--muted); }
/* 닫기 버튼은 없앴다. 지도 탭 · Esc · 아래로 쓸기로 닫는다. */
#sheet .chips { display: flex; gap: 8px; margin: 16px 0 0; flex-wrap: wrap; }
#sheet .chips .chip { padding: 7px 11px; border-radius: 10px; font-size: 13px; line-height: 16px; }
#sheet .chips .chip.out { background: var(--sunken); color: var(--ink-2); font-weight: 500; }
#sheet .desc { font-size: 14px; line-height: 1.45; font-weight: 400; color: var(--ink-2); margin: 16px 0 0; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#sheet .count { display: flex; justify-content: space-between; margin: 16px 0 8px; font-size: 13px; color: var(--ink-2); font-weight: 600; }
#sheet .track { height: 6px; border-radius: 999px; background: var(--sunken); overflow: hidden; }
#sheet .fill { height: 100%; width: 0; border-radius: 999px; background: var(--accent); transition: width var(--t-enter) var(--ease); }
#sheet .fill.full { background: var(--disabled); }
#sheet .btn { margin-top: 16px; height: 54px; border-radius: 14px; font-size: 16px; }
#sheet .btn.done { background: var(--success-wash); color: var(--success); }
#sheet .btn:disabled:not(.done) { background: var(--disabled); color: var(--on-accent); }

/* 참여 시트 */
#join { position: fixed; inset: 0; z-index: 700; display: none; } /* 탭바(600) 위. 모달이다 */
#join.on { display: block; }
#join .scrim { position: absolute; inset: 0; background: var(--scrim); opacity: .42; }
#join .panel { position: absolute; left: 0; right: 0; bottom: 0; background: var(--bg); border-radius: 26px 26px 0 0;
  padding: 10px 20px calc(34px + var(--safe-bottom)); transform: translateY(100%); transition: transform var(--t-enter) var(--spring); }
#join.on .panel { transform: none; }
#join .grab { width: 40px; height: 4px; border-radius: 999px; background: var(--line-strong); margin: 0 auto 22px; }
#join h2 { font-size: 21px; margin: 0; line-height: 28px; }
#join .sub { color: var(--muted); font-size: 13.5px; margin: 6px 0 20px; }
#join .opt { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; border: 0; border-radius: 16px;
  padding: 15px 14px 15px 16px; background: var(--surface); color: var(--ink); cursor: pointer; margin-bottom: 10px; box-shadow: var(--shadow); }
#join .opt.primary { background: var(--accent-wash); }
#join .opt:disabled { opacity: .55; cursor: default; }
#join .opt .ic { width: 42px; height: 42px; border-radius: 13px; background: var(--sunken); display: grid; place-items: center; color: var(--ink-2); flex: none; }
#join .opt.primary .ic { background: var(--accent); color: var(--on-accent); }
#join .opt .ic svg { width: 22px; height: 22px; fill: currentColor; }
#join .opt .tx { flex: 1; min-width: 0; }
#join .opt .tx b { display: flex; align-items: center; gap: 6px; font-size: 15.5px; }
#join .opt .tx span { display: block; font-size: 13px; color: var(--muted); margin-top: 3px; }
#join .opt .caret { color: var(--disabled); font-size: 18px; }
#join .cond { background: var(--sunken); border-radius: 14px; padding: 14px 15px; margin-top: 10px; display: flex; flex-direction: column; gap: 11px; font-size: 13px; color: var(--ink-2); }
#join .cond div { display: flex; align-items: center; gap: 9px; }
#join .cond svg { width: 16px; height: 16px; fill: var(--disabled); flex: none; }

/* 시연 위치 (DEMO 빌드에서만) */
#demo { position: fixed; z-index: 6; left: 16px; bottom: calc(104px + var(--safe-bottom)); display: none; }
#demo.show { display: block; }
#demo-btn { height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--action); color: var(--on-action); font-weight: 700; font-size: 14px; cursor: pointer; box-shadow: var(--shadow); }
#demo-list { display: none; position: absolute; left: 0; bottom: 54px; width: 260px; background: var(--surface); border-radius: 16px; padding: 6px; box-shadow: var(--shadow); max-height: 50vh; overflow-y: auto; }
#demo.open #demo-list { display: block; }
#demo-list button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 12px 14px; border-radius: 10px; font-weight: 500; font-size: 14.5px; color: var(--ink); cursor: pointer; }
#demo-list button:active { background: var(--sunken); }
#demo-list .none { padding: 14px; color: var(--muted); font-size: 13px; }

/* 카테고리 칩 줄 아래로 내린다 — 겹치면 둘 다 못 읽는다. */
#status { position: fixed; z-index: 30; left: 24px; right: 24px; top: calc(190px + var(--safe-top)); background: var(--ink); color: var(--bg); padding: 12px 16px; border-radius: 12px; font-size: 13.5px; white-space: pre-wrap; text-align: center; }

/* 지도 카테고리 필터 — 상단바 바로 아래 한 줄. 지도를 가리지 않게 얇게.
   화면 끝까지 흐르고 옆으로 쓸어 넘긴다. */
#map-cats { position: fixed; z-index: 5; left: 0; right: 0;
  top: calc(116px + var(--safe-top));
  display: flex; gap: 8px; overflow-x: auto; padding: 0 16px 2px;
  scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding-left: 16px;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
#map-cats::-webkit-scrollbar { display: none; }
#map-cats[hidden] { display: none; }
#map-cats button { flex: none; scroll-snap-align: start; cursor: pointer;
  border: 0; border-radius: 999px; padding: 8px 14px;
  background: var(--surface); color: var(--muted);
  font-weight: 700; font-size: 12.5px; white-space: nowrap;
  box-shadow: var(--shadow); transition: all var(--t-press) var(--ease); }
#map-cats button.on { background: var(--ink); color: var(--bg); }

/* 마이 탭 메뉴의 안 읽은 배지 */
.card.menu .unread { min-width: 18px; height: 18px; padding: 0 5px; margin-left: 8px;
  border-radius: 999px; background: var(--danger); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.card.menu .unread[hidden] { display: none; }

/* ── 오류·빈 상태 ──────────────────────────────────────
   시안: 피그마 「⑤ 오류·빈 상태」 (라이트·다크 각 4장).
   지도를 덮되 탭바는 가리지 않는다 — 막힌 건 이 화면 하나뿐이고
   다른 탭은 계속 쓸 수 있다는 게 보여야 한다. */
.state { position: absolute; inset: 0; z-index: 24;
  display: grid; place-items: center; padding: 28px;
  background: var(--bg); text-align: center; }
.state[hidden] { display: none; }
.state .in { max-width: 300px; display: grid; justify-items: center; }
.state .ico { width: 52px; height: 52px; border-radius: 999px; display: grid; place-items: center;
  margin-bottom: 16px; background: var(--sunken); color: var(--muted); }
.state .ico.warn { background: var(--warning-wash); color: var(--warning); }
.state .ico.acc { background: var(--accent-wash); color: var(--accent); }
.state b { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.state p { color: var(--muted); font-size: 13.5px; line-height: 1.6; margin: 8px 0 0; }
.state .btn { margin-top: 20px; width: auto; padding: 0 20px; height: 44px; }

/* ── 온보딩 (첫 실행 1회) ──────────────────────────────
   시안: 피그마 「① 온보딩·로그인」 > 온보딩 v2 1~4/4.
   이모지 대신 실제 UI 조각(지도 핀·스캔 프레임·이벤트 카드)으로 아트를 짠다 —
   무엇을 하는 앱인지 그림 하나로 읽혀야 한다. */
#onboard { position: fixed; inset: 0; z-index: 1200; background: var(--bg);
  display: flex; flex-direction: column;
  padding: clamp(28px, 8vh, 72px) 28px calc(28px + var(--safe-bottom));
  padding-top: calc(clamp(28px, 8vh, 72px) + var(--safe-top)); }
.ob-card { width: min(400px, 100%); margin: 0 auto; flex: 1; min-height: 0;
  display: flex; flex-direction: column; }
/* 버튼은 언제나 바닥에 붙어 있다. 화면이 짧으면 위쪽만 스크롤된다 —
   주소창이 높이를 먹는 모바일 브라우저에서 버튼이 화면 밖으로 밀렸다. */
.ob-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; justify-content: center;
  scrollbar-width: none; }
.ob-scroll::-webkit-scrollbar { display: none; }
.ob-card h2 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.32;
  margin: clamp(20px, 4vh, 40px) 0 12px; white-space: pre-line; }
.ob-card p { color: var(--muted); font-size: 14.5px; line-height: 1.62; margin: 0;
  white-space: pre-line; }
.ob-dots { display: flex; gap: 6px; margin: 20px 0 22px; }
.ob-dots i { width: 7px; height: 7px; border-radius: 999px; background: var(--sunken);
  transition: all var(--t-move) var(--ease); }
.ob-dots i.on { width: 22px; background: var(--accent); }
.ob-skip { border: 0; background: none; color: var(--muted); font-weight: 600; font-size: 13.5px;
  padding: 12px; cursor: pointer; }
.ob-skip[hidden] { display: none; }

/* 안전 고지 (4장) — 걸어다니며 화면을 보는 앱이다 */
.ob-safe { display: flex; gap: 10px; align-items: center; margin-top: 16px;
  background: var(--warning-wash); color: var(--warning);
  border-radius: 14px; padding: 13px 14px; font-size: 12.5px; line-height: 1.5; font-weight: 600; }
.ob-safe svg { flex: none; }

/* ── 아트 무대 ── */
.ob-art { position: relative; flex: none; height: min(300px, 36vh);
  border-radius: 24px; overflow: hidden;
  background: var(--sunken); animation: ob-rise var(--t-enter) var(--ease) both; }
@keyframes ob-rise { from { opacity: 0; transform: translateY(10px); } }
.ob-art .rd { position: absolute; background: var(--surface); opacity: .75; border-radius: 5px; }
.ob-art .rd.h { left: -20px; right: -20px; height: 10px; }
.ob-art .rd.v { top: -20px; bottom: -20px; width: 10px; }

/* 지도 핀 (1·4장) — 지도의 실제 핀과 같은 모양 */
.ob-pin { position: absolute; display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface); border-radius: 999px; padding: 5px 12px 5px 5px;
  font-size: 12px; font-weight: 700; white-space: nowrap; box-shadow: var(--shadow); }
.ob-pin b { background: var(--accent-wash); color: var(--accent);
  border-radius: 999px; padding: 3px 8px; font-size: 11.5px; }
.ob-pin.on { background: var(--accent); color: var(--on-accent); }
.ob-pin.on b { background: rgba(255,255,255,.24); color: var(--on-accent); }

/* 스캔 (2장) */
.ob-scan { position: absolute; inset: 0; background: var(--scrim); }
/* 조준선은 카메라 화면(scrim) 위에 있다. 잉크로 두면 같은 색이 되어 사라진다 —
   여기만은 테마와 무관하게 흰색이다. */
.ob-scan i { position: absolute; width: 46px; height: 46px; border: 6px solid #fff; }
.ob-scan i:nth-child(1) { left: 27%; top: 25%; border-right: 0; border-bottom: 0; border-radius: 8px 0 0 0; }
.ob-scan i:nth-child(2) { right: 27%; top: 25%; border-left: 0; border-bottom: 0; border-radius: 0 8px 0 0; }
.ob-scan i:nth-child(3) { left: 27%; bottom: 25%; border-right: 0; border-top: 0; border-radius: 0 0 0 8px; }
.ob-scan i:nth-child(4) { right: 27%; bottom: 25%; border-left: 0; border-top: 0; border-radius: 0 0 8px 0; }
.ob-scan svg { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.ob-scan .pt { position: absolute; left: 50%; bottom: 9%; transform: translateX(-50%);
  background: var(--accent-wash); color: var(--accent); border-radius: 999px;
  padding: 5px 12px; font-size: 12px; font-weight: 700; }

/* 호스트 카드 (3장) */
/* 실제 이벤트 카드와 같은 골격 — 표지가 있어야 이벤트처럼 읽힌다.
   커버는 원격 이미지라 첫 실행에 못 받는다. 목록에서 커버가 없는 이벤트에
   쓰는 것과 같은 색 표지를 그린다. */
.ob-ev { position: absolute; left: 30px; right: 30px; background: var(--surface);
  border-radius: 14px; padding: 11px 12px; box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 11px; }
.ob-ev .body { flex: 1; min-width: 0; display: grid; gap: 3px; }
.ob-ev .t { font-size: 11px; color: var(--muted); font-weight: 600; }
.ob-ev .n { font-size: 14px; font-weight: 700; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-ev .m { font-size: 11px; color: var(--muted); }
.ob-ev .cv { width: 52px; height: 52px; border-radius: 10px; flex: none; }
.ob-ev .cv.a { background:
  radial-gradient(120% 90% at 25% 20%, #ff7ab8, transparent 62%), linear-gradient(140deg, #f31a7c, #6d1147); }
.ob-ev .cv.b { background:
  radial-gradient(120% 90% at 25% 20%, #7ee0ff, transparent 62%), linear-gradient(140deg, #2f6ad9, #10285c); }

/* 내 위치 (4장) */
.ob-me { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 22px; height: 22px; border-radius: 999px; background: var(--accent);
  box-shadow: 0 0 0 6px var(--surface), 0 0 0 60px color-mix(in srgb, var(--accent) 14%, transparent); }

@media (prefers-reduced-motion: reduce) { .ob-art { animation: none; } }