/* =====================================================
   GoFishingAI — 공통 스타일
   ===================================================== */

:root {
  --primary:       #0f6e3d;
  --primary-dark:  #0a4f2c;
  --primary-light: #e8f5ee;
  --sea-primary:   #0a5a8f;
  --sea-light:     #e3f0fa;
  --accent:        #f4a230;
  --danger:        #e53935;
  --bg:            #f5f5f5;
  --surface:       #ffffff;
  --text:          #1a1a1a;
  --text-sub:      #666666;
  --border:        #e0e0e0;
  --header-h:      56px;
  --bottom-nav-h:  64px;
  --radius:        12px;
  --radius-sm:     8px;
}

/* 바다 모드 */
body.mode-sea {
  --primary:       var(--sea-primary);
  --primary-dark:  #074070;
  --primary-light: var(--sea-light);
}

/* ── 다크 테마 ─────────────────────────────
   마이 탭 설정에서 시스템/라이트/다크 선택(_v2SetTheme → html[data-theme]).
   시스템=속성 없음(OS 설정 따름), 라이트=[data-theme=light](항상 라이트), 다크=[data-theme=dark].
   변수 기반 표면(bg/surface/text/border/primary-light)을 재정의해 v2 UI 전반을 어둡게 함.
   지도 마커 팝업 등 지도 위 인라인 흰 배경은 지도 타일 위라 그대로 둠. */
:root[data-theme="dark"] {
  --bg:            #10141a;
  --surface:       #1b212c;
  --text:          #e8ebf0;
  --text-sub:      #98a1ad;
  --border:        #2e3644;
  --primary:       #1f9257;
  --primary-dark:  #12603a;
  --primary-light: #15352a;
  color-scheme: dark;
}
:root[data-theme="dark"] body.mode-sea {
  --primary:       #2b8fd6;
  --primary-dark:  #1c6fae;
  --primary-light: #13314a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #10141a;
    --surface:       #1b212c;
    --text:          #e8ebf0;
    --text-sub:      #98a1ad;
    --border:        #2e3644;
    --primary:       #1f9257;
    --primary-dark:  #12603a;
    --primary-light: #15352a;
    color-scheme: dark;
  }
  :root:not([data-theme="light"]) body.mode-sea {
    --primary:       #2b8fd6;
    --primary-dark:  #1c6fae;
    --primary-light: #13314a;
  }
}
/* 변수 대신 흰색을 직접 쓴 표면(하단탭·모달·폼 컨트롤·검색창)을 다크에서 표면색으로 치환.
   v2 셸/카드 대부분은 이미 var(--surface)/var(--text)라 자동으로 어두워짐. */
:root[data-theme="dark"] #bottom-nav,
:root[data-theme="dark"] .modal-sheet,
:root[data-theme="dark"] .modal-sheet input,
:root[data-theme="dark"] .modal-sheet select,
:root[data-theme="dark"] .modal-sheet textarea,
:root[data-theme="dark"] .cc2-search,
:root[data-theme="dark"] .cc2-menu { background: var(--surface); color: var(--text); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #bottom-nav,
  :root:not([data-theme="light"]) .modal-sheet,
  :root:not([data-theme="light"]) .modal-sheet input,
  :root:not([data-theme="light"]) .modal-sheet select,
  :root:not([data-theme="light"]) .modal-sheet textarea,
  :root:not([data-theme="light"]) .cc2-search,
  :root:not([data-theme="light"]) .cc2-menu { background: var(--surface); color: var(--text); }
}

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

/* ── 아이콘 (common/ui/icons.js의 Icon() 결과물) ─── */
.icon { flex-shrink: 0; vertical-align: -3px; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Noto Sans KR', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100dvh;
  overflow-x: hidden;
}

/* ── 로그인 화면 ─────────────────────────── */
#login-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: 32px 24px;
  background: linear-gradient(160deg, var(--primary-light) 0%, #fff 60%);
}
#login-screen .logo {
  color: var(--primary);
  margin-bottom: 8px;
}
#login-screen .logo svg { display: block; }
#login-screen h1 {
  font-size: 26px;
  font-weight: 700;
  color: var(--primary-dark);
  margin-bottom: 4px;
}
#login-screen p {
  font-size: 14px;
  color: var(--text-sub);
  margin-bottom: 40px;
}
.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 320px;
  padding: 14px 20px;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  margin-bottom: 12px;
  transition: box-shadow .15s;
}
.btn-google:hover { box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.login-box {
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.btn-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 20px;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  margin-bottom: 12px;
  transition: box-shadow .15s;
}
.btn-social:hover { box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.btn-kakao { background: #FEE500; color: #191919; }
.btn-naver { background: #03C75A; color: #fff; }
.recent-login-tag {
  display: inline-block;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 10.5px; font-weight: 700;
  padding: 2px 8px; border-radius: 9px;
  margin-left: 6px;
  white-space: nowrap;
}
.btn-guest {
  font-size: 13px;
  color: var(--text-sub);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  margin-top: 8px;
}

/* ── 앱 레이아웃 ─────────────────────────── */
#app { display: none; }
#app.active { display: block; }

/* ── 헤더 ────────────────────────────────── */
#header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  z-index: 100;
}
#header .logo { font-size: 18px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
#mode-toggle {
  position: relative;
  display: flex;
  background: rgba(255,255,255,.2);
  border-radius: 20px;
  padding: 3px;
  gap: 2px;
}
/* 선택 표시 pill — 버튼 2개 전제(폭 50%), 민물↔바다 전환 시 좌우로 슬라이드 */
#mode-toggle::before {
  content: '';
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 4px);
  background: #fff;
  border-radius: 16px;
  transition: transform .25s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
#mode-toggle.sea::before {
  transform: translateX(calc(100% + 2px));
}
#mode-toggle button {
  position: relative;
  z-index: 1;
  border: none;
  background: transparent;
  color: rgba(255,255,255,.7);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 16px;
  cursor: pointer;
  transition: color .25s;
}
#mode-toggle button.active {
  color: var(--primary);
}
#header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
#header-avatar,
#header-ai {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  border: none;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
#header-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ── v2: 헤더 로고 이미지 (GoFishing 텍스트 대체) ── */
#header .logo .logo-img { height: 24px; width: auto; display: block; }
#login-screen .logo .login-logo-img { height: 54px; width: auto; display: block; }

/* ── v2: 자동로그인 스플래시 ── */
#splash {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, var(--primary) 0%, var(--primary-dark) 100%);
  transition: opacity .4s ease;
}
#splash.hide { opacity: 0; pointer-events: none; }
#splash .splash-inner { display: flex; flex-direction: column; align-items: center; gap: 22px; }
#splash img { width: 220px; max-width: 64vw; height: auto; background: #fff; border-radius: 16px; padding: 16px 20px; box-shadow: 0 12px 44px rgba(0,0,0,.28); }
#splash .splash-spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid rgba(255,255,255,.35); border-top-color: #fff; animation: splashspin .8s linear infinite; }
@keyframes splashspin { to { transform: rotate(360deg); } }

/* ── 콘텐츠 영역 ─────────────────────────── */
#content {
  padding-top: var(--header-h);
  padding-bottom: calc(var(--bottom-nav-h) + 8px);
  min-height: 100dvh;
}

/* ── 탭 패널 ─────────────────────────────── */
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ── 하단 네비게이션 ─────────────────────── */
#bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--bottom-nav-h);
  background: #fff;
  border-top: 1px solid var(--border);
  display: flex;
  z-index: 100;
}
#bottom-nav button {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: none;
  background: transparent;
  color: var(--text-sub);
  font-size: 10px;
  cursor: pointer;
  transition: color .15s;
  padding: 8px 0;
}
#bottom-nav button .nav-icon { display: flex; }
#bottom-nav button .nav-icon svg { width: 22px; height: 22px; }
#bottom-nav button.active { color: var(--primary); }
/* 선택 시 테두리(선) 색만으로는 잘 안 보여서, 아이콘 안쪽도 옅게 채움 */
#bottom-nav button.active .nav-icon svg path,
#bottom-nav button.active .nav-icon svg circle {
  fill: var(--primary);
  fill-opacity: .15;
}

/* ── FAB ─────────────────────────────────── */
#fab {
  position: fixed;
  bottom: calc(var(--bottom-nav-h) + 12px);
  right: 16px;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  border: none;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0,0,0,.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  line-height: 1;
  z-index: 99;
  transition: transform .15s;
}
#fab:hover { transform: scale(1.08); }

/* ══════════ v2 셸: 밝은 헤더 + 하단탭 재편(포인트/조황/AI/정보/마이) ══════════ */
#header {
  background: var(--surface);
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
#mode-toggle { background: var(--bg); }
#mode-toggle::before { background: var(--primary); }
#mode-toggle button { color: var(--text-sub); }
#mode-toggle button.active { color: #fff; }
#header-avatar, #header-ai {
  background: var(--bg);
  color: var(--text-sub);
  border: 1px solid var(--border);
}
/* 하단탭 — AI 가운데 볼록 버튼 */
#bottom-nav button.active .nav-icon svg path,
#bottom-nav button.active .nav-icon svg circle,
#bottom-nav button.active .nav-icon svg rect { fill: none; }
#bottom-nav .nav-center .nav-knob {
  width: 46px; height: 46px; border-radius: 15px;
  color: #fff;
  display: grid; place-items: center;
  margin-top: -16px; margin-bottom: 2px;
  transition: background .15s, box-shadow .15s;
  /* 기본(비선택)은 중립색 — AI 탭이 아닐 때도 knob이 초록이라 "AI가 선택된 것처럼" 보이던 문제 해결 */
  background: var(--text-sub);
  box-shadow: 0 3px 8px rgba(0,0,0,.18);
}
/* AI 탭이 선택됐을 때만 초록으로 강조 */
#bottom-nav .nav-center.active .nav-knob {
  background: var(--primary);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--primary) 45%, transparent);
}
#bottom-nav .nav-center .nav-knob svg { width: 24px; height: 24px; }
#bottom-nav .nav-center.active { color: var(--primary); }
/* 선택된 탭을 색 + 굵기로 더 분명하게 (색만으로는 잘 안 보임) */
#bottom-nav button.active .nav-label { font-weight: 800; }

/* ── 새 버전 알림 배너 (VersionCheck) ─────── */
.update-banner {
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(var(--bottom-nav-h) + 72px);
  z-index: 2000;
  background: var(--primary);
  color: #fff;
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,.28);
  font-size: 13px;
  line-height: 1.45;
}
.update-banner span { flex: 1; }
.update-banner button {
  flex: none;
  background: #fff;
  color: var(--primary);
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

/* ── 공통 카드 ───────────────────────────── */
.card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 16px;
  margin: 12px 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-sub);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── 섹션 헤더 ───────────────────────────── */
.section-header {
  padding: 16px 16px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.section-header h2 { font-size: 16px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.section-header a  { font-size: 12px; color: var(--primary); text-decoration: none; }

/* ── 배지 ────────────────────────────────── */
.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 10px;
  background: var(--primary-light);
  color: var(--primary);
}
.badge-hot { background: #fdecea; color: var(--danger); }

/* ── 스켈레톤 로딩 ───────────────────────── */
.skeleton {
  background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
  border-radius: var(--radius-sm);
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── 빈 상태 ─────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-sub);
}
.empty-state .icon { margin-bottom: 10px; display: flex; align-items: center; justify-content: center; color: #ccc; }
.empty-state p { font-size: 14px; }

/* ── 버튼 ────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  border: none;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s;
}
.btn:hover { opacity: .85; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-outline {
  background: transparent;
  border: 1.5px solid var(--primary);
  color: var(--primary);
}
.btn-block { width: 100%; justify-content: center; }

/* ── 모달 (bottom sheet) ─────────────────── */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 200;
  display: none;
  align-items: flex-end;
}
.modal-backdrop.open { display: flex; }
.modal-sheet {
  background: #fff;
  border-radius: 20px 20px 0 0;
  width: 100%;
  max-height: 85dvh;
  overflow-y: auto;
  padding: 20px 16px 32px;
}
.modal-handle {
  width: 36px; height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: 0 auto 16px;
}
.modal-title {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 7px;
}

/* ── 점수 게이지 ─────────────────────────── */
.score-bar {
  height: 8px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 6px;
}
.score-bar-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--primary);
  transition: width .5s ease;
}

/* ── 가로 스크롤 리스트 ──────────────────── */
.h-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 16px 8px;
  scrollbar-width: none;
}
.h-scroll::-webkit-scrollbar { display: none; }

/* ── 포인트 카드 (가로) ──────────────────── */
.spot-card-h {
  flex-shrink: 0;
  width: 140px;
  background: var(--surface);
  border-radius: var(--radius);
  padding: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,.07);
  cursor: pointer;
}
.spot-card-h .spot-name { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.spot-card-h .spot-sub  { font-size: 11px; color: var(--text-sub); }
.spot-card-h .spot-dist { font-size: 11px; color: var(--primary); font-weight: 600; margin-top: 4px; }

/* ── AI 추천 배지 — 홈 오늘의 추천 카드 ──── */
.ai-pick-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 4px;
}

/* ── AI 심층 리포트 — 분할 카드·주간 스트립·특보 배너 ── */
.deep-sec {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 14px;
  margin-top: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.deep-sec-title {
  display: flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 700; margin-bottom: 8px;
  color: var(--primary);
}
/* 강조 섹션 제목 — 배경을 원래 글자색(초록)으로, 글자·아이콘은 흰색인 알약형 라벨 */
.deep-sec-title.hl {
  display: inline-flex;
  background: var(--primary);
  color: #fff;
  padding: 5px 10px;
  border-radius: 8px;
}
.deep-sec-body { font-size: 13.5px; line-height: 1.7; }
.deep-sec-body .deep-li { padding: 3px 0; }

.deep-warn {
  display: flex; align-items: center; gap: 8px;
  background: #fff4ec; border: 1px solid #f7c9a3; color: #8a4b12;
  border-radius: var(--radius); padding: 10px 12px; margin-top: 10px;
  font-size: 13px; line-height: 1.4;
  cursor: pointer;
}
.deep-warn svg { flex-shrink: 0; color: #e07b00; }
.deep-warn-more { flex-shrink: 0; font-size: 11.5px; font-weight: 700; text-decoration: underline; white-space: nowrap; }

.week-strip {
  display: flex; gap: 6px;
  overflow-x: auto; padding: 8px 0 4px;
  scrollbar-width: none;
}
.week-strip::-webkit-scrollbar { display: none; }
.week-day {
  flex: 1; min-width: 52px; text-align: center; position: relative;
  background: var(--bg); border-radius: 10px; padding: 8px 4px;
}
.week-day.best { background: var(--primary-light); box-shadow: inset 0 0 0 1.5px var(--primary); }
.wd-best {
  position: absolute; top: -7px; left: 50%; transform: translateX(-50%);
  background: var(--primary); color: #fff;
  font-size: 9px; font-weight: 800; padding: 1px 6px; border-radius: 8px;
}
.wd-dow  { font-size: 11px; font-weight: 700; }
.wd-dow.weekend { color: #e05d5d; }
.wd-date { font-size: 10px; color: var(--text-sub); }
.wd-emoji { font-size: 18px; margin: 3px 0; }
.wd-feel { font-size: 10px; color: var(--text-sub); }
.wd-wind { font-size: 10px; color: var(--text-sub); line-height: 1.3; }
.wd-rain { font-size: 10px; color: var(--text-sub); margin-top: 2px; }
.wd-score { margin-top: 4px; font-size: 12px; font-weight: 800; border-radius: 8px; padding: 1px 0; }
.wd-score.good { background: #e3f4e8; color: #15803d; }
.wd-score.mid  { background: #fdf3dc; color: #b45309; }
.wd-score.bad  { background: #fde8e8; color: #b91c1c; }

/* ── 조황 리스트 아이템 ──────────────────── */
.report-item {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.report-item:last-child { border-bottom: none; }
.report-thumb {
  width: 60px; height: 60px;
  border-radius: var(--radius-sm);
  background: var(--bg);
  object-fit: cover;
  flex-shrink: 0;
}
.report-info { flex: 1; min-width: 0; }
.report-title { font-size: 14px; font-weight: 600; margin-bottom: 3px; }
.report-meta  { font-size: 12px; color: var(--text-sub); }

/* ── 어종 도감 그리드 ────────────────────── */
.fish-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 12px 16px;
}
.fish-card {
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 12px 8px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  cursor: pointer;
}
.fish-card .fish-icon  { font-size: 28px; margin-bottom: 6px; }
.fish-card .fish-name  { font-size: 12px; font-weight: 600; }
.fish-card .fish-badge { font-size: 10px; }

/* ── AI 추천 위젯 ────────────────────────── */
.ai-summary-card {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff;
  border-radius: var(--radius);
  padding: 18px 16px;
  margin: 12px 16px;
}
.ai-summary-card .ai-label { font-size: 11px; opacity: .8; margin-bottom: 6px; display: flex; align-items: center; gap: 5px; }
.ai-summary-card .ai-text  { font-size: 14px; line-height: 1.6; }
.ai-summary-card .ai-meta  { font-size: 11px; opacity: .7; margin-top: 8px; }

/* ── 날씨 위젯 ───────────────────────────── */
.weather-widget {
  display: flex;
  align-items: center;
  gap: 12px;
}
.weather-icon { color: var(--accent); display: flex; }
.weather-temp { font-size: 28px; font-weight: 700; }
.weather-desc { font-size: 12px; color: var(--text-sub); }

/* ── TOP 10 리스트 ───────────────────────── */
.top-list { padding: 0 16px; }
.top-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.top-item:last-child { border-bottom: none; }
.top-rank {
  font-size: 16px;
  font-weight: 700;
  width: 24px;
  text-align: center;
  color: var(--text-sub);
}
.top-rank.rank-1 { color: #f4a230; }
.top-rank.rank-2 { color: #9e9e9e; }
.top-rank.rank-3 { color: #8d6e63; }
.top-name { flex: 1; font-size: 14px; font-weight: 500; }
.top-score { font-size: 14px; font-weight: 700; color: var(--primary); }

/* ── 유틸 ────────────────────────────────── */
.text-sub  { color: var(--text-sub); }
.text-sm   { font-size: 12px; }
.text-xs   { font-size: 11px; }
.mt-8  { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.gap-8 { gap: 8px; }
.flex  { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }

/* ── 서브탭 네비게이션 (3열 그리드 — 항목이 많아도 스크롤 없이 한눈에 다 보이도록) ── */
.sub-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 10px 16px;
  background: #fff;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: var(--header-h);
  z-index: 50;
}
.sub-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--text-sub);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
  font-family: inherit;
}
.sub-nav-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.sub-nav-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  font-weight: 600;
}

/* ── 필터 칩 ─────────────────────────────── */
.chip-row {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 8px 16px 4px;
  scrollbar-width: none;
}
.chip-row::-webkit-scrollbar { display: none; }
.chip {
  flex-shrink: 0;
  padding: 4px 12px;
  border-radius: 14px;
  border: 1.5px solid var(--border);
  background: #fff;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-sub);
  cursor: pointer;
  transition: all .12s;
  font-family: inherit;
}
.chip.active {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary);
  font-weight: 600;
}

/* ── 정보 행 ─────────────────────────────── */
.info-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.info-row:last-child { border-bottom: none; }
.info-label {
  flex-shrink: 0;
  width: 72px;
  font-size: 12px;
  color: var(--text-sub);
  font-weight: 500;
  padding-top: 1px;
}
.info-value { flex: 1; line-height: 1.5; }

/* ── 도감 카드 ───────────────────────────── */
.enc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 12px 16px;
}
.enc-card {
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 14px 8px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.07);
  cursor: pointer;
  transition: transform .12s;
}
.enc-card:active { transform: scale(.96); }
.enc-card .ec-icon { font-size: 30px; margin-bottom: 6px; }
.enc-card .ec-name { font-size: 12px; font-weight: 700; margin-bottom: 3px; }
.enc-card .ec-sub  { font-size: 10px; color: var(--text-sub); }
.enc-card .ec-badge {
  display: inline-block;
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 8px;
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 600;
  margin-top: 3px;
}

/* ── 도감 상세 모달 ──────────────────────── */
.enc-detail .ed-header {
  text-align: center;
  padding: 8px 0 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.enc-detail .ed-icon { font-size: 56px; margin-bottom: 8px; }
.enc-detail .ed-name { font-size: 20px; font-weight: 700; }
.enc-detail .ed-sub  { font-size: 13px; color: var(--text-sub); margin-top: 4px; }
.star-row { display: flex; gap: 2px; justify-content: center; margin-top: 6px; }
.star-row span { font-size: 16px; }

/* ── 시즌 바 ─────────────────────────────── */
.season-grid {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.season-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.season-label {
  width: 52px;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
  text-align: right;
  color: var(--text-sub);
}
.season-months {
  display: flex;
  gap: 2px;
  flex: 1;
}
.season-month {
  flex: 1;
  height: 20px;
  border-radius: 3px;
  background: var(--border);
  transition: background .2s;
}
.season-month.peak   { background: var(--primary); }
.season-month.active { background: #a8d5b8; }

/* ── 시즌 월 라벨 ────────────────────────── */
.season-month-labels {
  display: flex;
  gap: 2px;
  padding: 0 16px 4px calc(16px + 60px);
}
.season-month-labels span {
  flex: 1;
  text-align: center;
  font-size: 10px;
  color: var(--text-sub);
}

/* ── 캘린더 ──────────────────────────────── */
.cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 8px;
  font-size: 15px;
  font-weight: 700;
}
.cal-header button {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--text-sub);
  padding: 4px 10px;
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  padding: 0 8px;
}
.cal-day-label {
  text-align: center;
  font-size: 11px;
  color: var(--text-sub);
  padding: 6px 0;
  font-weight: 600;
}
.cal-day {
  text-align: center;
  padding: 6px 2px;
  font-size: 13px;
  cursor: pointer;
  border-radius: 6px;
  position: relative;
  min-height: 36px;
}
.cal-day:hover { background: var(--primary-light); }
.cal-day.empty { opacity: 0; pointer-events: none; }
.cal-day.today {
  background: var(--primary);
  color: #fff;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
.cal-dot {
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

/* ── 커뮤니티 게시물 ─────────────────────── */
.post-card {
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: 14px 16px;
  cursor: pointer;
}
.post-card:active { background: var(--bg); }
.post-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.post-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--primary-light);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.post-avatar img { width: 100%; height: 100%; object-fit: cover; }
.post-author { font-size: 13px; font-weight: 600; }
.post-time   { font-size: 11px; color: var(--text-sub); }
.post-title  { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.post-body   { font-size: 13px; color: var(--text-sub); line-height: 1.5; white-space: pre-wrap; }
.post-photos {
  display: none;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.post-card.expanded .post-photos { display: flex; }
.post-photos img {
  width: 100%;
  height: auto;
  max-height: 320px;
  border-radius: 8px;
  object-fit: cover;
}
.post-footer { display: flex; gap: 14px; margin-top: 8px; }
.post-stat   { font-size: 12px; color: var(--text-sub); display: flex; align-items: center; gap: 3px; }
.post-type-badge {
  display: inline-block;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 6px;
  font-weight: 600;
  margin-right: 6px;
}
.post-type-board   { background: #e3f2fd; color: #1976d2; }
.post-type-qna     { background: #e8f5e9; color: #388e3c; }
.post-type-knowhow { background: #fff3e0; color: #e65100; }
.post-type-review  { background: #fce4ec; color: #c62828; }
.post-type-event   { background: #f3e5f5; color: #7b1fa2; }

/* ── 글쓰기 폼 ───────────────────────────── */
.write-form { display: flex; flex-direction: column; gap: 12px; }
.write-form select,
.write-form input,
.write-form textarea {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 14px;
  outline: none;
  font-family: inherit;
  transition: border-color .15s;
}
.write-form select:focus,
.write-form input:focus,
.write-form textarea:focus { border-color: var(--primary); }
.write-form textarea { height: 100px; resize: none; }

/* ── 앱 설정 ─────────────────────────────── */
.set-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 4px; gap: 12px; }
.set-row .set-label { font-size: 14px; font-weight: 600; }
.set-row .set-desc { font-size: 12px; color: var(--text-sub); margin-top: 2px; }
.set-divider { height: 1px; background: var(--border); }
.set-select {
  width: 100%; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 12px; font-size: 14px; font-family: inherit; outline: none; background: #fff;
}
.set-select:focus { border-color: var(--primary); }
.set-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.set-switch input { opacity: 0; width: 0; height: 0; }
.set-switch .slider { position: absolute; inset: 0; background: var(--border); border-radius: 24px; transition: .2s; cursor: pointer; }
.set-switch .slider::before { content: ''; position: absolute; height: 18px; width: 18px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: .2s; }
.set-switch input:checked + .slider { background: var(--primary); }
.set-switch input:checked + .slider::before { transform: translateX(20px); }

/* ── AI 오버레이 패널 ────────────────────── */
#ai-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 300;
  display: none;
  align-items: flex-end;
}
#ai-overlay.open { display: flex; }
#ai-panel {
  background: #fff;
  width: 100%;
  height: 70dvh;
  border-radius: 20px 20px 0 0;
  display: flex;
  flex-direction: column;
}
#ai-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
}
#ai-overlay-close {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--text-sub);
  padding: 4px 8px;
}
#ai-panel-msgs {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#ai-panel-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 14px 4px;
}
#ai-panel-input-row {
  display: flex;
  gap: 8px;
  padding: 10px 14px 16px;
  border-top: 1px solid var(--border);
}
#ai-panel-input {
  flex: 1;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  padding: 9px 14px;
  font-size: 14px;
  outline: none;
  font-family: inherit;
}
#ai-panel-input:focus { border-color: var(--primary); }
#ai-panel-send {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.ai-msg {
  max-width: 82%;
  padding: 10px 13px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.ai-msg.user {
  align-self: flex-end;
  background: var(--primary);
  color: #fff;
  border-radius: 16px 16px 4px 16px;
}
.ai-msg.bot {
  align-self: flex-start;
  background: #f0f0f0;
  color: var(--text);
  border-radius: 16px 16px 16px 4px;
}
.ai-quick-chip {
  font-size: 12px;
  padding: 5px 11px;
  border-radius: 14px;
  border: 1.5px solid var(--border);
  background: #fff;
  color: var(--text-sub);
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}

/* ── 금어기 테이블 ───────────────────────── */
.table-wrap { overflow-x: auto; padding: 12px 16px; }
.info-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.info-table th {
  background: var(--primary);
  color: #fff;
  padding: 9px 10px;
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
}
.info-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  line-height: 1.5;
}
.info-table tr:nth-child(even) td { background: var(--bg); }

/* ── 낚시 기법 카드 ──────────────────────── */
.tech-card {
  background: #fff;
  border-radius: var(--radius);
  margin: 8px 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,.07);
  overflow: hidden;
}
.tech-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  cursor: pointer;
}
.tech-card-icon { font-size: 28px; }
.tech-card-title { font-size: 15px; font-weight: 700; flex: 1; }
.tech-card-arrow { font-size: 18px; color: var(--text-sub); transition: transform .2s; }
.tech-card-arrow.open { transform: rotate(90deg); }
.tech-card-body {
  display: none;
  padding: 0 16px 16px;
  font-size: 13px;
  color: var(--text-sub);
  line-height: 1.7;
  border-top: 1px solid var(--border);
  margin-top: 0;
}
.tech-card-body.open { display: block; }

/* ── 즐겨찾기 토글 ───────────────────────── */
.fav-btn {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  padding: 4px;
  transition: transform .15s;
}
.fav-btn:active { transform: scale(1.3); }

/* ── 조황 리포트 강화 ────────────────────── */
.report-img-placeholder {
  width: 60px; height: 60px;
  border-radius: var(--radius-sm);
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #bbb;
  flex-shrink: 0;
}
/* ── 프로필 헤더 강화 ────────────────────── */
.my-stats-row {
  display: flex;
  background: #fff;
  margin: 0;
  border-bottom: 1px solid var(--border);
}
.my-stat-item {
  flex: 1;
  text-align: center;
  padding: 16px 8px;
  border-right: 1px solid var(--border);
}
.my-stat-item:last-child { border-right: none; }
.my-stat-num {
  font-size: 22px;
  font-weight: 700;
  color: var(--primary);
  display: block;
}
.my-stat-lbl { font-size: 11px; color: var(--text-sub); }
.menu-section-title {
  padding: 14px 16px 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-sub);
  letter-spacing: .5px;
  text-transform: uppercase;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  background: #fff;
  transition: background .1s;
}
.menu-item:active { background: var(--bg); }
.menu-item .mi-icon { width: 28px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--text-sub); }
.menu-item .mi-label { flex: 1; font-size: 15px; }
.menu-item .mi-arrow { color: #ccc; }
.menu-item .mi-arrow svg { width: 16px; height: 16px; }
.menu-item .mi-badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 8px;
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 600;
}

/* ── 채비 정보 카드 ──────────────────────── */
.tackle-card {
  background: #fff;
  border-radius: var(--radius);
  margin: 8px 16px;
  padding: 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,.07);
}
.tackle-card-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tackle-item {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.tackle-item:last-child { border-bottom: none; }
.tackle-item-label { color: var(--text-sub); }
.tackle-item-value { font-weight: 500; }

/* ── 입력 공통 스타일 헬퍼 ───────────────── */
.input-field {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 14px;
  outline: none;
  font-family: inherit;
}

/* ── 시간대별 예보 (가로 스크롤) ─────────── */
.hourly-scroll {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 4px 0 6px;
  scrollbar-width: none;
}
.hourly-scroll::-webkit-scrollbar { display: none; }
/* 지도 SDK 내부 z-index(컨트롤·정보창 등)가 모달(z-index:200) 위로 새어나오지 않도록
   컨테이너에 z-index를 명시해 자체 스태킹 컨텍스트로 가둠 (Leaflet에서 실제로 겪었던 문제 — 표준 해결법) */
#map-inline-view { position: relative; z-index: 0; }

.hourly-cell {
  flex-shrink: 0;
  width: 64px;
  text-align: center;
  padding: 8px 2px;
  border-radius: 10px;
  background: var(--bg);
}
.hourly-cell.now {
  background: #e8f5ee;
  outline: 1.5px solid var(--primary);
}
.hourly-cell.day-start { border-left: 2px solid var(--primary); margin-left: 6px; padding-left: 6px; }
.hourly-cell .hc-day {
  font-size: 9.5px; font-weight: 800; color: var(--primary);
  margin-bottom: 3px; white-space: nowrap;
}
.hourly-cell .hc-time { font-size: 11px; font-weight: 700; margin-bottom: 2px; }
.hourly-cell.now .hc-time { color: var(--primary); }
.hourly-cell .hc-icon { display: flex; justify-content: center; color: var(--text-sub); margin-bottom: 2px; }
.hourly-cell .hc-temp { font-size: 13px; font-weight: 700; }
.hourly-cell .hc-feel { font-size: 10px; color: var(--text-sub); margin-bottom: 2px; }
.hourly-cell .hc-wind { font-size: 10px; color: var(--text-sub); line-height: 1.4; }
.hourly-cell .hc-rain {
  font-size: 10px; color: #1c6fc9; font-weight: 600; min-height: 14px;
  display: flex; align-items: center; justify-content: center; gap: 2px; margin-top: 2px;
}

/* ── 프리미엄 구독 / 제휴 쇼핑 UI ─────────────────────────── */
.plan-badge {
  display: inline-block;
  background: linear-gradient(135deg, #f4a230, #e07b00);
  color: #fff;
  font-size: 9.5px; font-weight: 800; letter-spacing: .5px;
  padding: 2px 7px; border-radius: 9px;
  vertical-align: 2px; margin-left: 6px;
  white-space: nowrap;
}
/* 콘텐츠 작성자 옆 프리미엄 미니 배지 (조과·게시글) */
.p-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 50%;
  background: linear-gradient(135deg, #f4a230, #e07b00);
  color: #fff; font-size: 9px; font-weight: 800;
  margin-left: 4px; vertical-align: 1px;
}
.premium-lock-card {
  background: #fff;
  border: 1.5px solid #f4d9ae;
  border-radius: var(--radius);
  padding: 20px 16px 16px;
  box-shadow: 0 2px 10px rgba(224, 123, 0, .08);
}
.shop-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-sub);
  font-size: 12px; font-weight: 600; font-family: inherit;
  padding: 7px 12px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.shop-btn:active { background: var(--bg); }
.shop-btn-block { flex: 1; width: 100%; }

/* ══════════════════════════════════════════════════════════
   AI 탭 v2 — 오늘의 추천 + 심층 리포트
   (색은 --primary를 그대로 써서 바다 모드(body.mode-sea)에 자동 대응)
   ══════════════════════════════════════════════════════════ */
/* 하단 패딩 — 하단탭(+FAB)에 마지막 카드가 가리지 않게 넉넉히 */
.ai2 { padding: 12px 14px 96px; }

/* 컨텍스트 헤더 — 위치 · 날짜 · 안전도 배지 */
.ai2-ctx { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 2px 2px 14px; }
.ai2-ctx .ai2-loc { font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.ai2-ctx .ai2-date { font-size: 12px; color: var(--text-sub); font-weight: 600; }
.ai2-safety {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border); cursor: pointer;
}
.ai2-safety .dot { width: 8px; height: 8px; border-radius: 50%; background: #2f9e57; box-shadow: 0 0 0 3px rgba(47,158,87,.2); }
.ai2-safety.warn .dot { background: #e0a83a; box-shadow: 0 0 0 3px rgba(224,168,58,.22); }
.ai2-safety.crit .dot { background: #e05353; box-shadow: 0 0 0 3px rgba(224,83,83,.22); }

/* 섹션 헤더 */
.ai2-sec-h { display: flex; align-items: baseline; gap: 8px; margin: 4px 4px 10px; }
.ai2-sec-h .t { font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.ai2-sec-h.sub .t { font-size: 15px; }
.ai2-sec-h .s { font-size: 11.5px; color: var(--text-sub); font-weight: 600; }
.ai2-sec-h .plan-tag {
  margin-left: auto; font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
  color: #b9841f; background: #fdf3e0; border: 1px solid #f0d9a8;
  padding: 3px 8px; border-radius: 999px;
}
.ai2-sec-h .plan-tag.free { color: #0f6e3d; background: #e8f5ee; border-color: #b6e2c8; }
/* 심층 리포트 수동 분석 Go! 버튼 (헤더, 눈에 띄는 펄스) */
.ai2-go {
  align-self: center; border: 0; background: var(--primary); color: #fff;
  font-size: 13px; font-weight: 800; font-family: inherit; cursor: pointer;
  padding: 7px 16px; border-radius: 999px; margin-left: 8px;
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--primary) 38%, transparent);
  animation: ai2-go-pulse 2s ease-in-out infinite;
}
.ai2-go:active { transform: scale(.96); }
@keyframes ai2-go-pulse {
  0%, 100% { box-shadow: 0 3px 10px color-mix(in srgb, var(--primary) 32%, transparent); }
  50%      { box-shadow: 0 4px 18px color-mix(in srgb, var(--primary) 62%, transparent); }
}
@keyframes fishid-spin { to { transform: rotate(360deg); } }
/* 분석 전 안내 카드 (Go! 대기 상태) */
.ai2-idle { margin-top: 10px; text-align: center; }
.ai2-idle .ic { color: var(--primary); display: flex; justify-content: center; margin-bottom: 8px; }
.ai2-idle .t { font-size: 13.5px; font-weight: 700; line-height: 1.6; }
.ai2-idle .t b { color: var(--primary); }
.ai2-idle .s { font-size: 12px; color: var(--text-sub); margin-top: 6px; line-height: 1.6; }

/* 카드 공통 */
.ai2-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  padding: 15px; box-shadow: 0 1px 3px rgba(20,40,30,.05), 0 6px 18px rgba(20,40,30,.05);
}
.ai2-sum .cap {
  font-size: 11px; letter-spacing: .04em; color: var(--text-sub); font-weight: 700;
  margin-bottom: 8px; display: flex; align-items: center; gap: 5px;
}
.ai2-sum .body { font-size: 13.5px; line-height: 1.65; color: var(--text); }
.ai2-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.ai2-chips .chip {
  font-size: 12.5px; font-weight: 700; padding: 5px 10px; border-radius: 9px;
  background: var(--primary-light); color: var(--primary-dark);
  border: 1px solid rgba(15,110,61,.18);
}
.ai2-chips .chip.g { background: #fdf3e0; color: #8a6413; border-color: #f0d9a8; }

/* 추천 블록 (오늘의 추천 · 심층 추천 공용) */
.ai2-rec {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 14px; margin-top: 11px; box-shadow: 0 1px 3px rgba(20,40,30,.05);
}
.ai2-rec .rh { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ai2-rec .num {
  width: 22px; height: 22px; border-radius: 7px; background: var(--primary); color: #fff;
  font-size: 12px; font-weight: 800; display: grid; place-items: center; flex: none;
}
.ai2-rec .rt { font-size: 14.5px; font-weight: 800; letter-spacing: -.01em; line-height: 1.3; }
.ai2-rec .body { font-size: 13.5px; line-height: 1.66; color: var(--text-sub); }
.ai2-rec strong, .ai2-card strong, .ai2-report strong { color: var(--primary); font-weight: 700; }
/* _mdLite()는 문장마다 .deep-li로 감싼 div를 반환 — 문장 사이 간격만 준다 */
.ai2 .deep-li + .deep-li { margin-top: 3px; }

 /* 버튼 4개(날씨·어종·포인트·채비·미끼)가 375px에서 한 줄에 들어가도록 균등 분할 */
.ai2-btnrow { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.ai2-mbtn {
  flex: 1 1 0; min-width: 0;
  border: 1px solid var(--border); background: var(--bg); color: var(--text-sub);
  font-size: 12px; font-weight: 700; font-family: inherit;
  padding: 7px 4px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  cursor: pointer; white-space: nowrap;
}
.ai2-mbtn svg { flex: none; }
.ai2-mbtn:active { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }

/* 심층 리포트 */
.ai2-region { display: flex; gap: 6px; align-items: center; background: var(--surface);
  border-radius: 10px; padding: 8px 10px; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.ai2-region .lb { font-size: 12px; font-weight: 700; color: var(--text-sub); white-space: nowrap; }
.ai2-region select {
  flex: 1; min-width: 0; padding: 6px 8px; border: 1px solid var(--border);
  border-radius: 8px; font-size: 13px; font-family: inherit; background: #fff;
}
/* '내 위치로 복귀' — 잘 보이도록 primary 강조(이전엔 회색이라 눈에 안 띔) */
.ai2-rreset {
  width: 100%; margin-top: 8px; padding: 10px;
  background: var(--primary-light); color: var(--primary);
  border: 1.5px solid var(--primary); border-radius: 10px;
  font-size: 13px; font-weight: 800; font-family: inherit; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.ai2-rreset:active { background: color-mix(in srgb, var(--primary) 16%, #fff); }
.ai2-report { position: relative; margin-top: 10px; }
.ai2-report .save {
  position: absolute; top: 12px; right: 12px;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 700; font-family: inherit; cursor: pointer;
  color: #b9841f; background: #fdf3e0; border: 1px solid #f0d9a8;
  padding: 5px 9px; border-radius: 8px;
}
.ai2-report .rhead { display: flex; align-items: center; gap: 14px; padding-right: 56px; }
.ai2-report .rlead { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.7; }
.ai2-report .rpara { font-size: 13.5px; line-height: 1.72; color: var(--text-sub); margin-top: 12px; }
.ai2-report .by { font-size: 11px; color: var(--text-sub); font-weight: 600; margin-top: 12px; opacity: .8; }
.ai2-bestdays {
  margin-top: 14px; background: var(--primary-light); border: 1px solid rgba(15,110,61,.2);
  border-radius: 12px; padding: 11px 13px;
}
.ai2-bestdays .bt {
  font-size: 11px; letter-spacing: .04em; color: var(--primary); font-weight: 800;
  margin-bottom: 7px; display: flex; align-items: center; gap: 5px;
}
.ai2-bestdays .days { display: flex; gap: 8px; }
.ai2-bestdays .d { flex: 1; text-align: center; background: var(--surface); border-radius: 9px; padding: 8px 4px; }
.ai2-bestdays .d .dow { font-size: 11px; color: var(--text-sub); font-weight: 700; }
.ai2-bestdays .d .dd { font-size: 14px; font-weight: 800; margin-top: 1px; }
.ai2-bestdays .d .sc { font-size: 10.5px; color: #2f9e57; font-weight: 800; margin-top: 2px; }

/* 잠금 미리보기 */
.ai2-lock { position: relative; overflow: hidden; }
.ai2-lock h4 { font-size: 15px; font-weight: 800; margin-bottom: 2px; }
.ai2-lock .by { font-size: 11px; color: var(--text-sub); margin-bottom: 10px; }
.ai2-lock p { font-size: 13.5px; line-height: 1.7; color: var(--text-sub); margin-bottom: 8px; filter: blur(3.5px); user-select: none; }
.ai2-lock .veil {
  position: absolute; left: 0; right: 0; bottom: 0; height: 78%;
  background: linear-gradient(180deg, transparent, var(--surface) 55%);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: 8px; padding: 20px 16px 16px; text-align: center;
}
.ai2-lock .veil .lk { font-size: 13.5px; font-weight: 800; }
.ai2-lock .veil .lk-s { font-size: 12px; color: var(--text-sub); }
.ai2-lock .upgrade {
  border: 0; background: linear-gradient(180deg, #d8a03a, #b9841f); color: #fff;
  font-size: 13px; font-weight: 800; font-family: inherit;
  padding: 11px 20px; border-radius: 11px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  box-shadow: 0 4px 14px rgba(185,132,31,.32);
}

/* 로딩 체크리스트 */
.ai2-checklist { font-size: 12.5px; line-height: 1.5; }
.ai2-checklist .ck { display: flex; gap: 7px; align-items: center; padding: 2.5px 0; }
.ai2-checklist .ck span { width: 14px; text-align: center; flex: none; }
.ai2-checklist .ck.wait { opacity: .35; }
.ai2-checklist .ck.now { opacity: .9; }
.ai2-checklist .ck.done span { color: #2f9e57; font-weight: 700; }
.ai2-checklist .ck-final { margin-top: 7px; font-weight: 600; }

.ai2-refresh {
  width: 100%; margin-top: 12px; padding: 9px; background: var(--bg); color: var(--text-sub);
  border: 1px solid var(--border); border-radius: 10px;
  font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 5px;
}

/* 해루질 진입 카드 */
.ai2-mudflat {
  width: 100%; margin-top: 18px; padding: 13px 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  display: flex; align-items: center; gap: 10px; text-align: left; cursor: pointer;
  font-family: inherit; font-size: 12.5px; color: var(--text-sub);
}
.ai2-mudflat svg { color: var(--primary); flex: none; }
.ai2-mudflat b { color: var(--text); display: block; font-size: 13.5px; margin-bottom: 1px; }
.ai2-mudflat .ar { margin-left: auto; color: var(--text-sub); font-size: 16px; }

.ai2-note { margin: 16px 4px 0; font-size: 11.5px; line-height: 1.6; color: var(--text-sub); text-align: center; }

/* ── 바텀시트 (2단) ────────────────────────────────────── */
.ai2-backdrop {
  position: fixed; inset: 0; background: rgba(10,18,14,.44);
  opacity: 0; pointer-events: none; transition: opacity .24s; z-index: 1200;
}
.ai2-backdrop.lv2 { background: rgba(10,18,14,.5); z-index: 1220; }
.ai2-backdrop.on { opacity: 1; pointer-events: auto; }
.ai2-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; max-height: 88vh;
  background: var(--surface); border-radius: 22px 22px 0 0;
  box-shadow: 0 -8px 40px rgba(0,0,0,.3);
  transform: translateY(101%); transition: transform .28s cubic-bezier(.32,.72,0,1);
  display: flex; flex-direction: column; z-index: 1210;
}
.ai2-sheet.lv2 { max-height: 84vh; z-index: 1230; }
.ai2-sheet.on { transform: translateY(0); }
.ai2-sheet .grip { flex: none; padding: 9px 0 4px; display: flex; justify-content: center; }
.ai2-sheet .grip i { width: 38px; height: 4px; border-radius: 99px; background: var(--border); display: block; }
.ai2-sheet .sh {
  flex: none; display: flex; align-items: center; gap: 9px;
  padding: 2px 16px 12px; border-bottom: 1px solid var(--border);
}
.ai2-sheet .sh-t { font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.ai2-sheet .sh-s { font-size: 11.5px; color: var(--text-sub); font-weight: 600; }
.ai2-sheet .sh .x, .ai2-sheet .sh .back {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  border: 1px solid var(--border); background: var(--bg); color: var(--text-sub);
  display: grid; place-items: center; cursor: pointer;
}
.ai2-sheet .sh .x { margin-left: auto; }
.ai2-sheet .sc-body { overflow-y: auto; padding: 14px 16px 28px; -webkit-overflow-scrolling: touch; }

/* 시트 내부 조각 */
.ai2-now {
  display: flex; align-items: center; gap: 14px;
  background: var(--primary-light); border-radius: 14px; padding: 15px 16px;
}
.ai2-now .temp { font-size: 38px; font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.ai2-now .temp span { font-size: 18px; font-weight: 700; color: var(--text-sub); vertical-align: top; }
.ai2-now .wx { font-size: 13px; font-weight: 700; color: var(--text-sub); margin-top: 4px; }
.ai2-now .ic { margin-left: auto; color: var(--primary); }
.ai2-grid { display: grid; gap: 8px; margin-top: 11px; }
.ai2-grid.g3 { grid-template-columns: repeat(3, 1fr); }
.ai2-grid .cell { background: var(--bg); border-radius: 11px; padding: 10px 6px; text-align: center; }
.ai2-grid .cell .cl { font-size: 10.5px; color: var(--text-sub); font-weight: 700; }
.ai2-grid .cell .cv { font-size: 13.5px; font-weight: 800; margin-top: 3px; }
.ai2-subh {
  font-size: 12px; font-weight: 800; color: var(--text-sub);
  margin: 18px 2px 9px; display: flex; align-items: center; gap: 6px;
}
.ai2-subh .plan-chip {
  font-size: 10px; font-weight: 800; color: #b9841f;
  background: #fdf3e0; border: 1px solid #f0d9a8; padding: 2px 7px; border-radius: 999px;
}
.ai2-p { font-size: 13px; line-height: 1.65; color: var(--text-sub); margin: 10px 2px 0; }
.ai2-tip {
  margin-top: 10px; padding: 9px 11px; background: var(--primary-light);
  border-radius: 9px; font-size: 12.5px; line-height: 1.6; color: var(--primary-dark);
  display: flex; gap: 6px; align-items: flex-start;
}
.ai2-banner {
  display: flex; gap: 9px; align-items: flex-start;
  border-radius: 11px; padding: 11px 12px; margin-bottom: 8px;
  font-size: 12.5px; line-height: 1.55; background: var(--bg); color: var(--text);
}
.ai2-banner svg { flex: none; margin-top: 1px; color: var(--text-sub); }
.ai2-banner.ok { background: var(--primary-light); }
.ai2-banner.ok svg { color: var(--primary); }
.ai2-banner.warn { background: #fdf3e0; }
.ai2-banner.warn svg { color: #c9820a; }
.ai2-banner.crit { background: #fdecea; }
.ai2-banner.crit svg { color: #cf4646; }
.ai2-drill {
  width: 100%; margin-top: 8px; padding: 11px 13px; text-align: left; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); border-radius: 11px;
  display: flex; align-items: center; gap: 9px;
  font-family: inherit; font-size: 12.5px; color: var(--text-sub);
}
.ai2-drill svg { color: var(--primary); flex: none; }
.ai2-drill b { color: var(--text); }
.ai2-drill .ar { margin-left: auto; color: var(--text-sub); font-weight: 700; flex: none; }
.ai2-actions { display: flex; gap: 8px; margin-top: 14px; }
.ai2-actions button {
  flex: 1; border: 1px solid var(--border); background: var(--bg); color: var(--text);
  font-weight: 800; font-size: 13px; font-family: inherit;
  padding: 11px; border-radius: 11px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.ai2-actions .primary { background: var(--primary); color: #fff; border-color: transparent; }

/* 어종 */
.ai2-fishhero { display: flex; gap: 13px; align-items: center; }
.ai2-fishhero .fimg {
  width: 78px; height: 78px; border-radius: 14px; flex: none;
  background: var(--primary-light); display: grid; place-items: center; font-size: 38px;
}
.ai2-fishhero .fn { font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.ai2-fishhero .fl { font-size: 12.5px; color: var(--text-sub); font-weight: 600; margin-top: 1px; }
.ai2-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 7px; }
.ai2-tags .tag {
  font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px;
  background: var(--bg); color: var(--text-sub); border: 1px solid var(--border);
}
.ai2-tags .tag.on { background: var(--primary-light); color: var(--primary); border-color: rgba(15,110,61,.25); }
.ai2-season { display: flex; gap: 3px; }
.ai2-season .mo { flex: 1; text-align: center; }
.ai2-season .mo i { display: block; height: 20px; border-radius: 3px; background: var(--border); margin-bottom: 3px; }
.ai2-season .mo.on i { background: rgba(15,110,61,.4); }
.ai2-season .mo.peak i { background: var(--primary); }
.ai2-season .mo.cur i { box-shadow: inset 0 0 0 2px #b9841f; }
.ai2-season .mo span { font-size: 8.5px; color: var(--text-sub); font-weight: 700; }

/* 포인트 */
.ai2-hscroll { display: flex; gap: 9px; overflow-x: auto; padding: 2px 2px 8px; }
.ai2-hscroll::-webkit-scrollbar { display: none; }
.ai2-pcard {
  flex: none; width: 145px; text-align: left; cursor: pointer; font-family: inherit;
  border: 1px solid var(--border); background: var(--bg); border-radius: 13px; padding: 11px 12px;
}
.ai2-pcard.on { border-color: var(--primary); background: var(--primary-light); box-shadow: inset 0 0 0 1px var(--primary); }
.ai2-pcard .pn { font-size: 13.5px; font-weight: 800; }
.ai2-pcard .psub { font-size: 10.5px; color: var(--text-sub); font-weight: 700; margin-top: 2px; }
.ai2-pcard .pmeta { font-size: 11px; color: var(--primary); font-weight: 700; margin-top: 7px; }
.ai2-spothead { margin-bottom: 8px; }
.ai2-spothead .sn { font-size: 16px; font-weight: 800; }
.ai2-spothead .ss { font-size: 12px; color: var(--text-sub); font-weight: 600; margin-top: 1px; }

/* 채비·미끼 */
.ai2-rig { background: var(--bg); border: 1px solid var(--border); border-radius: 13px; padding: 13px; }
.ai2-rig .rn { font-size: 14px; font-weight: 800; margin-bottom: 4px; }
.ai2-baits { display: flex; flex-direction: column; gap: 8px; }
.ai2-bait {
  display: flex; gap: 11px; align-items: center;
  background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 10px 11px;
}
.ai2-bait .bimg {
  width: 40px; height: 40px; border-radius: 10px; flex: none; font-size: 20px;
  background: var(--primary-light); display: grid; place-items: center;
}
.ai2-bait .bn { font-size: 13.5px; font-weight: 800; }
.ai2-bait .bn .pri { font-size: 10px; color: #b9841f; font-weight: 800; margin-left: 6px; }
.ai2-bait .bd { font-size: 11.5px; color: var(--text-sub); font-weight: 600; margin-top: 1px; line-height: 1.45; }

/* 물때 · 조황 · 주간 */
.ai2-tiderow { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 4px; }
.ai2-tiderow .tc {
  flex: none; min-width: 72px; text-align: center; border-radius: 10px; padding: 8px 11px;
  background: var(--bg); border: 1px solid var(--border);
}
.ai2-tiderow .tc.hi { background: var(--primary-light); border-color: rgba(15,110,61,.25); }
.ai2-tiderow .tc .tt { font-size: 10.5px; color: var(--text-sub); font-weight: 700; }
.ai2-tiderow .tc .tv { font-size: 13px; font-weight: 800; margin-top: 2px; }
.ai2-tiderow .tc .th { font-size: 10px; font-weight: 700; color: var(--primary); margin-top: 1px; }
.ai2-catchitem { display: flex; gap: 11px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
.ai2-catchitem .cimg {
  width: 46px; height: 46px; border-radius: 10px; flex: none; overflow: hidden;
  background: var(--bg); border: 1px solid var(--border);
  display: grid; place-items: center; font-size: 18px;
}
.ai2-catchitem .cimg img { width: 100%; height: 100%; object-fit: cover; }
.ai2-catchitem .cn { font-size: 13px; font-weight: 800; }
.ai2-catchitem .cs { font-size: 11px; color: var(--text-sub); font-weight: 600; margin-top: 1px; }
.ai2-week { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; }
.ai2-week .wrow {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; cursor: pointer;
  background: var(--bg); border: 1px solid var(--border); border-radius: 11px;
  padding: 10px 12px; font-family: inherit;
}
.ai2-week .wd { font-size: 12.5px; font-weight: 800; width: 74px; flex: none; }
.ai2-week .wmid { flex: 1; min-width: 0; font-size: 12px; color: var(--text-sub); font-weight: 600; }
.ai2-week .wsc { font-size: 14px; font-weight: 800; flex: none; }
.ai2-week .wsc.good { color: #2f9e57; }
.ai2-week .wsc.mid { color: #c9820a; }
.ai2-week .wsc.bad { color: #cf4646; }

.ai2-empty { text-align: center; padding: 20px 12px; }
.ai2-empty .e-t { font-size: 13.5px; font-weight: 800; }
.ai2-empty .e-s { font-size: 12px; color: var(--text-sub); line-height: 1.6; margin-top: 5px; }


/* ══════════════════════════════════════════════════════════
   포인트 탭 v2 — 전체화면 지도 + 오버레이
   색은 --primary를 그대로 써서 바다 모드(body.mode-sea)에 자동 대응
   ══════════════════════════════════════════════════════════ */
.pt2 {
  position: relative;
  height: calc(100vh - 128px); /* dvh 미지원 웹뷰 폴백 */
  height: calc(100dvh - 128px); /* 헤더 56 + 하단탭 72 */
  min-height: 420px;
  overflow: hidden;
  background: var(--bg);
}
.pt2-map { position: absolute; inset: 0; width: 100%; height: 100%; }

/* 상단 필터칩 */
/* 필터칩은 한 줄 고정(줄바꿈 금지). 좁으면 가로 스크롤. 레이어 버튼은 아래(top:54)라 top 행은 전체폭 사용 */
.pt2-top { position: absolute; top: 10px; left: 10px; right: 10px; z-index: 5; }
.pt2-filters { display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.pt2-filters::-webkit-scrollbar { display: none; }
.pt2-filters .fchip {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 800; font-family: inherit; white-space: nowrap;
  padding: 8px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px); color: var(--text);
  box-shadow: 0 1px 6px rgba(0,0,0,.12);
}
.pt2-filters .fchip.on { background: var(--primary); color: #fff; border-color: transparent; }
.pt2-filters .fchip.loc-only { padding: 8px; width: 34px; justify-content: center; }
.pt2-filters .fchip .star { color: #c8912a; display: inline-flex; }
.pt2-filters .fchip.on .star { color: #fff; }
/* '포인트' 필터의 종류 서브칩 — 필터 행 아래 한 줄(가로 스크롤), 약간 작게 */
.pt2-subfilters { display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-top: 6px; }
.pt2-subfilters::-webkit-scrollbar { display: none; }
.pt2-subfilters .fchip.sub {
  flex: none; display: inline-flex; align-items: center; gap: 3px;
  font-size: 11.5px; font-weight: 800; font-family: inherit; white-space: nowrap;
  padding: 6px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px); color: var(--text); box-shadow: 0 1px 6px rgba(0,0,0,.12);
}
.pt2-subfilters .fchip.sub.on { background: var(--primary); color: #fff; border-color: transparent; }

/* 우상단 컨트롤 (레이어·줌·축척) */
.pt2-right { position: absolute; top: 54px; right: 10px; z-index: 5; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.pt2-ctl {
  width: 38px; height: 38px; border-radius: 11px; cursor: pointer;
  border: 1px solid var(--border); background: rgba(255,255,255,.92); backdrop-filter: blur(8px);
  color: var(--text); display: grid; place-items: center; box-shadow: 0 1px 6px rgba(0,0,0,.12);
}
.pt2-ctl.on { color: var(--primary); border-color: var(--primary); }
/* 즐겨찾기 추가 버튼(★+) — 무장 시 초록 채움 */
.pt2-ctl.pt2-addfav { position: relative; }
.pt2-ctl.pt2-addfav .pl { position: absolute; right: 4px; bottom: 3px; font-size: 11px; font-weight: 900; line-height: 1; color: var(--primary); }
.pt2-ctl.pt2-addfav.on { background: var(--primary); color: #fff; border-color: transparent; }
.pt2-ctl.pt2-addfav.on .pl { color: #fff; }
.pt2-zoom { display: flex; flex-direction: column; border-radius: 11px; overflow: hidden; border: 1px solid var(--border); box-shadow: 0 1px 6px rgba(0,0,0,.12); }
.pt2-zoom button {
  width: 38px; height: 36px; border: 0; cursor: pointer;
  background: rgba(255,255,255,.92); backdrop-filter: blur(8px);
  color: var(--text); font-size: 18px; font-weight: 700; display: grid; place-items: center;
}
.pt2-zoom button:first-child { border-bottom: 1px solid var(--border); }
.pt2-scale {
  font-size: 10px; font-weight: 800; color: var(--text);
  background: rgba(255,255,255,.9); backdrop-filter: blur(6px);
  border: 1px solid var(--border); border-radius: 7px; padding: 3px 7px;
}

/* 검색 패널 (낚시터·저수지·댐 이름) */
.pt2-searchpanel {
  position: absolute; top: 54px; left: 10px; right: 10px; z-index: 8;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.24); overflow: hidden;
  transform: translateY(-8px); opacity: 0; pointer-events: none; transition: .16s;
}
.pt2-searchpanel.on { transform: translateY(0); opacity: 1; pointer-events: auto; }
.pt2-searchpanel .sp-bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.pt2-searchpanel .sp-bar svg { color: var(--text-sub); flex: none; }
.pt2-searchpanel .sp-bar input { flex: 1; border: 0; background: none; font-size: 14px; font-family: inherit; color: var(--text); outline: none; min-width: 0; }
.pt2-searchpanel .sp-close { border: 0; background: none; color: var(--text-sub); font-size: 15px; font-weight: 800; cursor: pointer; padding: 2px 4px; }
.pt2-searchpanel .sp-results { max-height: 46vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.pt2-searchpanel .sp-row { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; border: 0; background: none; padding: 10px 13px; cursor: pointer; font-family: inherit; border-bottom: 1px solid var(--border); }
.pt2-searchpanel .sp-row:last-child { border-bottom: 0; }
.pt2-searchpanel .sp-row:active { background: var(--bg); }
.pt2-searchpanel .sp-ic { font-size: 16px; flex: none; }
.pt2-searchpanel .sp-nm { font-size: 13.5px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt2-searchpanel .sp-ty { margin-left: auto; font-size: 11px; color: var(--text-sub); font-weight: 700; flex: none; }
.pt2-searchpanel .sp-empty { padding: 16px; text-align: center; color: var(--text-sub); font-size: 13px; }

/* 레이어 패널 */
.pt2-layer-panel {
  position: absolute; top: 54px; right: 56px; z-index: 7; width: 152px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.22); padding: 6px;
  transform: scale(.9); opacity: 0; pointer-events: none; transform-origin: top right; transition: .16s;
}
.pt2-layer-panel.on { transform: scale(1); opacity: 1; pointer-events: auto; }
.pt2-layer-panel .lp-h { font-size: 10px; font-weight: 800; letter-spacing: .06em; color: var(--text-sub); text-transform: uppercase; padding: 6px 8px 4px; }
.pt2-layer-panel button {
  display: flex; width: 100%; align-items: center; gap: 8px; border: 0; background: none;
  color: var(--text); font-size: 13px; font-weight: 700; font-family: inherit;
  padding: 9px 8px; border-radius: 9px; text-align: left; cursor: pointer;
}
.pt2-layer-panel button[aria-pressed="true"] { background: var(--primary-light); color: var(--primary); }
.pt2-layer-panel button .lk { margin-left: auto; font-size: 10px; color: #b9841f; font-weight: 800; }
.pt2-layer-panel .dv { height: 1px; background: var(--border); margin: 4px 2px; }

.pt2-layer-name {
  position: absolute; left: 10px; bottom: 92px; z-index: 4;
  font-size: 10.5px; font-weight: 800; letter-spacing: .02em; color: var(--text);
  background: rgba(255,255,255,.85); backdrop-filter: blur(6px);
  border: 1px solid var(--border); padding: 4px 9px; border-radius: 8px;
}

/* 범례 */
.pt2-legend {
  position: absolute; left: 10px; bottom: 124px; z-index: 4;
  display: flex; flex-wrap: wrap; gap: 5px 10px; max-width: 62%;
  background: rgba(255,255,255,.86); backdrop-filter: blur(8px);
  border: 1px solid var(--border); border-radius: 11px; padding: 8px 10px;
  box-shadow: 0 1px 6px rgba(0,0,0,.1);
}
.pt2-legend .lg { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; color: var(--text); }
.pt2-legend .lg i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.pt2-legend:empty { display: none; }

/* 하단 peek (가로 스크롤) */
.pt2-peek {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  padding: 26px 12px 12px;
  background: linear-gradient(180deg, transparent, var(--bg) 34%);
  transform: translateY(101%); transition: transform .26s cubic-bezier(.32,.72,0,1);
}
.pt2-peek.on { transform: translateY(0); }
.pt2-peek .ph { font-size: 11px; font-weight: 800; color: var(--text-sub); margin: 0 4px 8px; display: flex; align-items: center; gap: 6px; }
.pt2-peek .plist { display: flex; gap: 9px; overflow-x: auto; padding-bottom: 2px; }
.pt2-peek .plist::-webkit-scrollbar { display: none; }
.pt2-peek .pcard2 {
  flex: none; width: 160px; text-align: left; cursor: pointer; font-family: inherit;
  background: var(--surface); border: 1px solid var(--border); border-radius: 13px;
  padding: 11px 12px; box-shadow: 0 1px 6px rgba(0,0,0,.1);
}
.pt2-peek .pcard2 .p2h { display: flex; align-items: center; gap: 6px; }
.pt2-peek .pcard2 .p2h i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.pt2-peek .pcard2 .p2n { font-size: 13px; font-weight: 800; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt2-peek .pcard2 .p2t { font-size: 10px; font-weight: 800; color: var(--text-sub); margin-left: auto; flex: none; }
.pt2-peek .pcard2 .p2m { font-size: 11px; color: var(--text-sub); font-weight: 700; margin-top: 7px; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 날씨 카드 (peek 자리) */
.pt2-peek .pt2-wxcard {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 13px 15px; box-shadow: 0 1px 6px rgba(0,0,0,.12);
}
.pt2-wxcard .wx-loc { font-size: 11px; color: var(--text-sub); font-weight: 700; }
.pt2-wxcard .wx-main { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.pt2-wxcard .wx-ic { color: var(--primary); flex: none; }
.pt2-wxcard .wx-t { font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.pt2-wxcard .wx-desc { font-size: 11.5px; color: var(--text-sub); font-weight: 600; line-height: 1.5; margin-left: auto; text-align: right; }

/* 토스트 */
.pt2-toast {
  position: absolute; top: 14px; left: 50%; transform: translate(-50%,-6px); z-index: 9;
  background: #15241c; color: #fff; font-size: 11.5px; font-weight: 700;
  padding: 7px 13px; border-radius: 999px; opacity: 0; pointer-events: none;
  transition: .2s; white-space: nowrap; box-shadow: 0 8px 24px rgba(0,0,0,.3);
}
.pt2-toast.on { opacity: .96; transform: translate(-50%,0); }

/* 지도 위 시도 요약 카드(넓게) — map-view가 anchor(0,0)로 배치하므로 루트에 translate(-50%,-50%)로 중심 정렬 */
.pt2-ovcard, .pt2-ovwx {
  transform: translate(-50%, -50%);
  min-width: 66px; max-width: 120px; text-align: center; cursor: pointer;
  background: rgba(255,255,255,.82); backdrop-filter: blur(6px);
  border: 1px solid rgba(0,0,0,.1); border-radius: 12px;
  padding: 6px 8px 7px; box-shadow: 0 3px 12px rgba(0,0,0,.2);
  font-family: inherit; user-select: none;
}
.pt2-ovcard .ovc-h, .pt2-ovwx .ovc-h { font-size: 11.5px; font-weight: 800; color: #16221c; letter-spacing: -.01em; line-height: 1.2; }
.pt2-ovcard .ovc-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px 6px; margin-top: 4px; }
.pt2-ovcard .ovc-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 800; color: #2a3a32; }
.pt2-ovcard .ovc-chip i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.pt2-ovwx .ovw-main { display: flex; align-items: center; justify-content: center; gap: 3px; margin-top: 2px; color: #16221c; }
.pt2-ovwx .ovw-main svg { color: var(--primary); }
.pt2-ovwx .ovw-t { font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
.pt2-ovwx .ovw-sub { font-size: 9.5px; font-weight: 700; color: #4a5a52; margin-top: 1px; }

/* 지도 중심 날씨 카드(가까이 ≤10km) — 화면 중앙 고정, 누르면 상세 */
.pt2-centerwx {
  position: absolute; left: 50%; top: 44%; transform: translate(-50%,-50%) scale(.92);
  z-index: 4; opacity: 0; pointer-events: none; transition: .18s;
}
.pt2-centerwx.on { opacity: 1; pointer-events: auto; transform: translate(-50%,-50%) scale(1); }
.pt2-centerwx .cwx {
  cursor: pointer; min-width: 176px; text-align: left;
  background: rgba(255,255,255,.92); backdrop-filter: blur(10px);
  border: 1px solid var(--border); border-radius: 16px; padding: 12px 15px 11px;
  box-shadow: 0 10px 30px rgba(0,0,0,.24);
}
.pt2-centerwx .cwx-loc { font-size: 11px; color: var(--text-sub); font-weight: 700; }
.pt2-centerwx .cwx-main { display: flex; align-items: center; gap: 9px; margin-top: 6px; }
.pt2-centerwx .cwx-ic { color: var(--primary); flex: none; }
.pt2-centerwx .cwx-t { font-size: 27px; font-weight: 800; letter-spacing: -.02em; }
.pt2-centerwx .cwx-sub { font-size: 11px; color: var(--text-sub); font-weight: 600; line-height: 1.5; margin-left: auto; text-align: right; }
.pt2-centerwx .cwx-more { margin-top: 8px; font-size: 11px; font-weight: 800; color: var(--primary); text-align: right; }
.pt2-centerwx .cwx-load { background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border: 1px solid var(--border); border-radius: 14px; padding: 12px 16px; font-size: 12.5px; font-weight: 700; color: var(--text-sub); box-shadow: 0 8px 24px rgba(0,0,0,.2); }

/* ── 마커 클러스터링(모든 필터 공통) ── map-view가 anchor(0,0)로 배치 → 루트에 translate(-50%,-50%)로 중심 정렬 */
/* 종류별 개수 버블(🐟48) */
.pt2-cl {
  transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  background: rgba(255,255,255,.94); backdrop-filter: blur(6px);
  border: 1.5px solid rgba(0,0,0,.12); border-radius: 999px;
  padding: 5px 10px; box-shadow: 0 3px 12px rgba(0,0,0,.22);
  font-family: inherit; white-space: nowrap; user-select: none;
}
.pt2-cl .cl-t { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; line-height: 1; }
.pt2-cl .cl-t b { font-size: 12.5px; font-weight: 800; color: #16221c; }
.pt2-cl .cl-more { font-size: 10.5px; font-weight: 800; color: var(--text-sub); }
/* 개별 포인트 핀(아이콘 + 이름) */
.pt2-pin {
  transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 4px; cursor: pointer; max-width: 128px;
  background: rgba(255,255,255,.95); border: 1px solid rgba(0,0,0,.12); border-radius: 999px;
  padding: 3px 9px 3px 6px; box-shadow: 0 2px 8px rgba(0,0,0,.2);
  font-family: inherit; white-space: nowrap; user-select: none;
}
.pt2-pin .ic { font-size: 15px; line-height: 1; flex: none; }
.pt2-pin .nm { font-size: 11px; font-weight: 800; color: #1a2620; overflow: hidden; text-overflow: ellipsis; }
.pt2-pin .fav { font-size: 12px; line-height: 1; flex: none; color: #e8a91d; }
.pt2-pin .fam { font-size: 11px; line-height: 1; flex: none; }
/* 즐겨찾기 핀 — 금색 테두리 강조 */
.pt2-pin.isfav { border-color: #e8a91d; box-shadow: 0 2px 8px rgba(232,169,29,.4); }
/* 유명(조황기록) 핀 — 옅은 청록 테두리 */
.pt2-pin.isfam:not(.isfav) { border-color: var(--primary); }
/* 최근접(줌15+) 상세 핀 — 이름 폭을 넓혀 전체 표기 */
.pt2-pin.detail { max-width: 190px; padding: 4px 11px 4px 8px; }
.pt2-pin.detail .nm { font-size: 12px; }
/* 날씨 클러스터 버블(SVG 아이콘 + 기온) */
.pt2-clwx {
  transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
  background: rgba(255,255,255,.94); backdrop-filter: blur(6px);
  border: 1.5px solid rgba(0,0,0,.12); border-radius: 999px;
  padding: 4px 10px 4px 8px; box-shadow: 0 3px 12px rgba(0,0,0,.22);
  font-family: inherit; white-space: nowrap; user-select: none;
}
.pt2-clwx svg { color: var(--primary); flex: none; }
.pt2-clwx .t { font-size: 14px; font-weight: 800; letter-spacing: -.02em; color: #16221c; }
/* 로딩 표시 — 정적 "…" 대신 통통 튀는 3점(진행중) */
.pt2-clwx .ld { display: inline-flex; align-items: center; gap: 3px; padding: 0 1px; }
.pt2-clwx .ld i { width: 4px; height: 4px; border-radius: 50%; background: var(--primary); display: inline-block; animation: pt2-dot 1s infinite ease-in-out both; }
.pt2-clwx .ld i:nth-child(2) { animation-delay: .15s; }
.pt2-clwx .ld i:nth-child(3) { animation-delay: .3s; }
@keyframes pt2-dot { 0%, 75%, 100% { opacity: .3; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-3px); } }
/* 해도(KHOA) 색점 — 항로표지·암초·저질. 클러스터/핀 아래(z=20)에 깔림 */
.pt2-chartdot { transform: translate(-50%, -50%); border-radius: 50%; background: var(--c, #d32f2f); border: 1.5px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.4); cursor: pointer; }
/* 내 위치 점 */
.pt2-me { transform: translate(-50%, -50%); }
.pt2-me .dot { display: block; width: 15px; height: 15px; border-radius: 50%; background: #2563eb; border: 3px solid #fff; box-shadow: 0 0 0 3px rgba(37,99,235,.28), 0 1px 4px rgba(0,0,0,.4); }

/* 클러스터 부드러운 등장(줌·이동 시 합쳐지고 나눠지는 느낌) — 오버레이가 새로 그려질 때 살짝 튀어오르며 나타남 */
@keyframes pt2-pop { from { opacity: 0; transform: translate(-50%, -50%) scale(.68); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.pt2-cl, .pt2-pin, .pt2-clwx, .pt2-me { animation: pt2-pop .17s cubic-bezier(.34, 1.45, .5, 1) both; }
@media (prefers-reduced-motion: reduce) { .pt2-cl, .pt2-pin, .pt2-clwx, .pt2-me { animation: none; } }

/* 진짜 위치 트위닝 — 클러스터가 직전 프레임 위치에서 목표 위치로 미끄러져 들어옴(줌 시 합쳐지고 갈라지는 이동감).
   map-view._tweenWrap가 --tx/--ty(출발점까지의 화면 픽셀차)를 심고, 이 래퍼가 0으로 애니메이션 */
.pt2-tw { display: inline-block; will-change: transform; animation: pt2-tween .34s cubic-bezier(.22, .61, .36, 1) both; }
@keyframes pt2-tween { from { transform: translate(var(--tx, 0), var(--ty, 0)); } to { transform: translate(0, 0); } }
@media (prefers-reduced-motion: reduce) { .pt2-tw { animation: none; } }

/* 조황 지도 클러스터 — pt2-cl/pt2-pin 스타일 재사용 + 조황건수 배지 */
.cc2-maparea-full { flex: 1; }
.pt2-pin.cc2-catchpin .ic { font-size: 14px; }
.pt2-pin.cc2-catchpin .cc2-cnt { font-size: 10.5px; font-weight: 800; color: #fff; background: var(--primary); border-radius: 999px; padding: 1px 6px; margin-left: 2px; }
/* 조황 상세 핀(줌15+) '기법 마리수' 배지 */
.pt2-pin.cc2-catchpin .cc2-tech { font-size: 10.5px; font-weight: 800; color: var(--primary); background: rgba(15,110,61,.1); border-radius: 999px; padding: 1px 7px; margin-left: 2px; white-space: nowrap; }
.pt2-cl.cc2-catchcl .cc2-clspots { font-size: 10px; font-weight: 800; color: var(--text-sub); }
.cc2-maplegend { position: absolute; left: 10px; bottom: 10px; z-index: 4; background: rgba(255,255,255,.9); backdrop-filter: blur(6px); border: 1px solid var(--border); border-radius: 9px; padding: 6px 10px; font-size: 11px; font-weight: 700; color: var(--text); box-shadow: 0 1px 6px rgba(0,0,0,.1); }
.cc2-maplegend:empty { display: none; }


/* ══════════════════════════════════════════════════════════
   조황+커뮤니티 탭 v2 — [조황 소식 | 커뮤니티] 세그먼트
   색은 --primary를 그대로 써서 바다 모드(body.mode-sea)에 자동 대응
   ══════════════════════════════════════════════════════════ */
.cc2 {
  position: relative;
  height: calc(100vh - 128px); /* dvh 미지원 웹뷰 폴백 */
  height: calc(100dvh - 128px);
  min-height: 460px;
  display: flex; flex-direction: column;
  overflow: hidden; background: var(--bg);
}

/* 세그먼트 */
.cc2-seg { flex: none; display: flex; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--border); background: var(--surface); }
.cc2-seg button {
  flex: 1; border: 1px solid var(--border); background: var(--surface); color: var(--text-sub);
  font-size: 13.5px; font-weight: 800; font-family: inherit; padding: 9px; border-radius: 11px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.cc2-seg button.on { background: var(--primary); color: #fff; border-color: transparent; }

.cc2-view { flex: 1; min-height: 0; display: none; flex-direction: column; }
.cc2-view.on { display: flex; }

/* 조황 소식: 서브필터 */
.cc2-subf { flex: none; display: flex; align-items: center; gap: 7px; padding: 9px 12px 6px; background: var(--surface); }
.cc2-miniloc { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); color: var(--text-sub); display: grid; place-items: center; flex: none; cursor: pointer; }
.cc2-tg { display: inline-flex; background: var(--bg); border: 1px solid var(--border); border-radius: 9px; padding: 3px; }
.cc2-tg button { border: 0; background: transparent; color: var(--text-sub); font-size: 12.5px; font-weight: 800; font-family: inherit; padding: 6px 12px; border-radius: 7px; cursor: pointer; }
.cc2-tg button.on { background: var(--primary); color: #fff; }
.cc2-drop { margin-left: auto; position: relative; }
.cc2-drop > button { border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 12px; font-weight: 700; font-family: inherit; padding: 8px 11px; border-radius: 9px; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.cc2-drop > button svg { color: var(--text-sub); transform: rotate(-90deg); }
.cc2-drop.tech { margin-left: 0; }
.cc2-drop.tech > button svg:first-child { color: var(--primary); transform: none; }
.cc2-drop.fish { margin-left: 0; }
.cc2-drop.fish > button svg:first-child { color: var(--primary); transform: none; }
/* 조황 지도 토스트 — 포인트 탭과 동일 스타일 */
.cc2-toast { position: absolute; top: 14px; left: 50%; transform: translate(-50%,-6px); z-index: 9; background: #15241c; color: #fff; font-size: 11.5px; font-weight: 700; padding: 7px 13px; border-radius: 999px; opacity: 0; pointer-events: none; transition: .2s; white-space: nowrap; box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.cc2-toast.on { opacity: .96; transform: translate(-50%,0); }
.cc2-menu { position: absolute; top: calc(100% + 5px); right: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 11px; box-shadow: 0 12px 40px rgba(0,0,0,.22); padding: 5px; z-index: 20; min-width: 120px; display: none; }
.cc2-menu.on { display: block; }
.cc2-menu button { display: block; width: 100%; text-align: left; border: 0; background: none; color: var(--text); font-size: 12.5px; font-weight: 700; font-family: inherit; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.cc2-menu button:active { background: var(--primary-light); color: var(--primary); }

.cc2-subf2 { flex: none; display: flex; align-items: center; gap: 8px; padding: 0 12px 9px; background: var(--surface); border-bottom: 1px solid var(--border); }
.cc2-search { flex: 1; display: flex; align-items: center; gap: 7px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 8px 11px; min-width: 0; }
.cc2-search svg { color: var(--text-sub); flex: none; }
.cc2-search input { flex: 1; border: 0; background: none; font-size: 12.5px; font-family: inherit; color: var(--text); outline: none; min-width: 0; }
.cc2-search .clr { border: 0; background: none; color: var(--text-sub); font-size: 13px; font-weight: 800; cursor: pointer; }

/* 지도 */
.cc2-maparea { flex: 1; min-height: 0; position: relative; overflow: hidden; }
.cc2-map { position: absolute; inset: 0; width: 100%; height: 100%; }
.cc2-heatlegend { position: absolute; left: 10px; top: 10px; z-index: 4; background: rgba(255,255,255,.86); backdrop-filter: blur(8px); border: 1px solid var(--border); border-radius: 10px; padding: 7px 10px; box-shadow: 0 1px 6px rgba(0,0,0,.1); font-size: 10.5px; font-weight: 700; color: var(--text); }
.cc2-heatlegend .bar { display: flex; align-items: center; gap: 6px; margin-top: 5px; }
.cc2-heatlegend .grad { width: 70px; height: 8px; border-radius: 99px; background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 28%, #fff), var(--primary)); }
.cc2-mapright { position: absolute; top: 10px; right: 10px; z-index: 5; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.cc2-zoom { display: flex; flex-direction: column; border-radius: 11px; overflow: hidden; border: 1px solid var(--border); box-shadow: 0 1px 6px rgba(0,0,0,.12); }
.cc2-zoom button { width: 36px; height: 34px; border: 0; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); color: var(--text); font-size: 17px; font-weight: 700; display: grid; place-items: center; cursor: pointer; }
.cc2-zoom button:first-child { border-bottom: 1px solid var(--border); }
.cc2-scale { font-size: 10px; font-weight: 800; color: var(--text); background: rgba(255,255,255,.9); backdrop-filter: blur(6px); border: 1px solid var(--border); border-radius: 7px; padding: 3px 7px; }

/* peek */
/* min-height:0 필수 — 없으면 flex 항목이 콘텐츠 높이(min-height:auto)로 부풀어 44% 제약을 무시하고
   피드가 길면 peek이 통째로 늘어나 내부 스크롤(.cc2-peekbody)이 동작하지 않음(조황 리스트 스크롤 버그) */
.cc2-peek { flex: 0 0 44%; min-height: 0; display: flex; flex-direction: column; background: var(--surface); border-top: 1px solid var(--border); border-radius: 18px 18px 0 0; box-shadow: 0 -6px 22px rgba(0,0,0,.1); z-index: 5; }
.cc2-peekh { flex: none; display: flex; align-items: center; gap: 8px; padding: 12px 14px 9px; border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 800; }
.cc2-peekh .cnt { color: var(--text-sub); font-weight: 600; font-size: 11.5px; }
.cc2-peekbody { flex: 1; overflow-y: auto; padding: 6px 14px 16px; -webkit-overflow-scrolling: touch; }
.cc2-empty { text-align: center; color: var(--text-sub); font-size: 12.5px; line-height: 1.6; padding: 24px 12px; }

/* 피드 카드 */
.cc2-fcard { border-bottom: 1px solid var(--border); padding: 12px 2px; cursor: pointer; }
.cc2-fcard .fh { display: flex; align-items: center; gap: 8px; }
.cc2-fcard .av2 { width: 26px; height: 26px; border-radius: 50%; background: var(--primary-light); color: var(--primary); display: grid; place-items: center; font-size: 11px; font-weight: 800; flex: none; }
.cc2-fcard .who { font-size: 12.5px; font-weight: 800; }
.cc2-fcard .when { font-size: 10.5px; color: var(--text-sub); font-weight: 600; }
.cc2-fcard .fspot { margin-left: auto; font-size: 11px; font-weight: 800; color: var(--primary); background: var(--primary-light); padding: 3px 8px; border-radius: 999px; cursor: pointer; }
.cc2-fcard .fmain { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.cc2-fcard .ffish { font-size: 14px; font-weight: 800; }
.cc2-fcard .fsize { font-size: 11px; color: var(--text-sub); font-weight: 700; }
.cc2-fcard .frate { font-size: 11px; margin-left: auto; }
.cc2-fcard .photos { display: flex; gap: 6px; overflow-x: auto; margin-top: 9px; }
.cc2-fcard .photos::-webkit-scrollbar { display: none; }
.cc2-fcard .photos img { flex: none; width: 96px; height: 72px; border-radius: 10px; object-fit: cover; border: 1px solid var(--border); }
.cc2-fcard .fmemo { font-size: 12.5px; color: var(--text-sub); line-height: 1.6; margin-top: 9px; }
.cc2-fcard .frig { margin-top: 10px; font-size: 12px; font-weight: 700; color: var(--text-sub); display: flex; align-items: center; gap: 6px; background: var(--bg); padding: 9px 11px; border-radius: 9px; }
.cc2-fcard .frig svg { color: var(--primary); flex: none; }
.cc2-fcard .frig.lock { color: #b9841f; }
.cc2-fcard .fbar { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.cc2-fcard .fbtn { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; color: var(--text-sub); font-size: 12px; font-weight: 700; font-family: inherit; cursor: pointer; }

/* 내기록 통계 */
.cc2-statgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 4px 0 12px; }
.cc2-statgrid .stat { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 11px 8px; text-align: center; }
.cc2-statgrid .stat b { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.cc2-statgrid .stat span { font-size: 10.5px; color: var(--text-sub); font-weight: 700; }
.cc2-subh { font-size: 12px; font-weight: 800; color: var(--text-sub); margin: 15px 2px 8px; display: flex; align-items: center; gap: 6px; }
.cc2-barmini { display: flex; align-items: flex-end; gap: 7px; height: 76px; padding-top: 12px; }
.cc2-barmini .bm { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cc2-barmini .bm i { width: 60%; max-width: 20px; border-radius: 4px 4px 2px 2px; background: var(--primary); min-height: 4px; }
.cc2-barmini .bm span { font-size: 9.5px; color: var(--text-sub); font-weight: 700; }
.cc2-barmini .bm b { font-size: 9.5px; font-weight: 800; color: var(--text); }
.cc2-rowline { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.cc2-rowline .rk { color: var(--text); font-weight: 700; }
.cc2-rowline .rv { font-weight: 800; color: var(--primary); }
.cc2-triprow { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; cursor: pointer; font-family: inherit; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 7px; }
.cc2-triprow .tn { font-size: 12.5px; font-weight: 700; }
.cc2-triprow .tc { margin-left: auto; font-weight: 800; color: var(--primary); font-size: 12px; }

/* 커뮤니티 */
.cc2-boards { flex: none; display: flex; gap: 7px; overflow-x: auto; padding: 10px 12px; background: var(--surface); border-bottom: 1px solid var(--border); }
.cc2-boards::-webkit-scrollbar { display: none; }
.cc2-bchip { flex: none; border: 1px solid var(--border); background: var(--surface); color: var(--text-sub); font-size: 12.5px; font-weight: 800; font-family: inherit; padding: 7px 13px; border-radius: 999px; white-space: nowrap; cursor: pointer; }
.cc2-bchip.on { background: var(--primary); color: #fff; border-color: transparent; }
.cc2-commbody { flex: 1; overflow-y: auto; padding: 10px 12px 16px; -webkit-overflow-scrolling: touch; }

/* 통합 커뮤니티 카드(조황글/일반글) — 아코디언 없이 사진 가로스크롤 + 통계, 클릭 시 모달 */
.cc2-ccard { border: 1px solid var(--border); border-radius: 14px; margin-bottom: 10px; background: var(--surface); padding: 12px 13px; cursor: pointer; }
.cc2-ccard:active { background: var(--bg); }
.cc2-ccard .cch { display: flex; align-items: center; gap: 7px; }
.cc2-ccard .cbadge { font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: var(--primary-light); color: var(--primary); flex: none; }
.cc2-ccard .cbadge.catch { background: #e8f5ee; color: #0f7a43; }
.cc2-ccard .cbadge.notice { background: #fdf3e0; color: #c9820a; }
.cc2-ccard .cwho { font-size: 12.5px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc2-ccard .ctime { font-size: 10.5px; color: var(--text-sub); font-weight: 600; flex: none; }
.cc2-ccard .cspot { margin-left: auto; font-size: 11px; font-weight: 800; color: var(--primary); background: var(--primary-light); padding: 3px 8px; border-radius: 999px; flex: none; white-space: nowrap; }
.cc2-ccard .ctitle { font-size: 14px; font-weight: 800; margin-top: 8px; letter-spacing: -.01em; }
.cc2-ccard .cfish { font-size: 14px; font-weight: 800; margin-top: 8px; }
.cc2-ccard .cpreview { font-size: 12.5px; color: var(--text-sub); line-height: 1.55; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cc2-ccard .cc2-cphotos { display: flex; gap: 6px; overflow-x: auto; margin-top: 10px; -webkit-overflow-scrolling: touch; }
.cc2-ccard .cc2-cphotos::-webkit-scrollbar { display: none; }
.cc2-ccard .cc2-cphotos img { flex: none; width: 104px; height: 78px; border-radius: 10px; object-fit: cover; border: 1px solid var(--border); }
.cc2-ccard .cmeta { display: flex; align-items: center; gap: 15px; margin-top: 10px; font-size: 12px; font-weight: 700; color: var(--text-sub); }
.cc2-ccard .cmeta svg { vertical-align: -2px; }

.cc2-post { border: 1px solid var(--border); border-radius: 13px; margin-bottom: 9px; overflow: hidden; background: var(--surface); }
.cc2-post .ph2 { padding: 12px 13px; cursor: pointer; }
.cc2-post .ptop { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
.cc2-post .btag { font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: var(--primary-light); color: var(--primary); }
.cc2-post .btag.notice { background: #fdf3e0; color: #c9820a; }
.cc2-post .pwho { font-size: 11px; color: var(--text-sub); font-weight: 700; }
.cc2-post .ptime { font-size: 11px; color: var(--text-sub); font-weight: 600; margin-left: auto; }
.cc2-post .ptitle { font-size: 14px; font-weight: 800; letter-spacing: -.01em; line-height: 1.35; }
.cc2-post .pmeta { display: flex; align-items: center; gap: 14px; margin-top: 9px; font-size: 11.5px; color: var(--text-sub); font-weight: 700; }
.cc2-post .pmeta .m { display: inline-flex; align-items: center; gap: 4px; }
.cc2-post .pacc { max-height: 0; overflow: hidden; transition: max-height .3s; }
.cc2-post.open .pacc { max-height: 600px; }
.cc2-post .pbody { padding: 0 13px 13px; font-size: 13px; line-height: 1.65; color: var(--text-sub); white-space: pre-wrap; }
.cc2-postphotos { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.cc2-postphotos img { width: 100%; border-radius: 10px; border: 1px solid var(--border); }

/* Best */
.cc2-bestgrid { display: flex; flex-direction: column; gap: 10px; }
.cc2-bestcard { border: 1px solid var(--border); border-radius: 14px; padding: 13px; background: var(--surface); box-shadow: 0 1px 6px rgba(0,0,0,.06); }
.cc2-bestcard .bch { font-size: 11px; font-weight: 800; letter-spacing: .04em; color: #b9841f; display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.cc2-bestrow { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.cc2-bestrow:last-child { border-bottom: 0; }
.cc2-bestrow .rank { width: 22px; height: 22px; border-radius: 7px; background: var(--primary-light); color: var(--primary); font-size: 11px; font-weight: 800; display: grid; place-items: center; flex: none; }
.cc2-bestrow .rank.g { background: #fdf3e0; color: #b9841f; }
.cc2-bestrow .nick { font-size: 13px; font-weight: 800; }
.cc2-bestrow .sub2 { font-size: 10.5px; color: var(--text-sub); font-weight: 700; }
.cc2-bestrow .val { margin-left: auto; font-size: 13px; font-weight: 800; color: var(--primary); }

/* FAB 스피드다이얼 */
.cc2-fab-bd { position: absolute; inset: 0; z-index: 6; display: none; }
.cc2-fab-bd.on { display: block; }
.cc2-fabwrap { position: absolute; right: 16px; bottom: 16px; z-index: 7; display: flex; flex-direction: column; align-items: flex-end; gap: 11px; }
.cc2-fab { width: 52px; height: 52px; border-radius: 17px; background: var(--primary); color: #fff; border: 0; display: grid; place-items: center; cursor: pointer; box-shadow: 0 8px 20px color-mix(in srgb, var(--primary) 45%, transparent); transition: transform .22s; }
.cc2-fabwrap.open .cc2-fab { transform: rotate(45deg); }
.cc2-fab-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 11px; }
.cc2-fab-mini { display: flex; align-items: center; gap: 10px; border: 0; background: none; padding: 0; cursor: pointer; opacity: 0; transform: translateY(12px) scale(.92); pointer-events: none; transition: opacity .18s, transform .18s; }
.cc2-fabwrap.open .cc2-fab-mini { opacity: 1; transform: none; pointer-events: auto; }
.cc2-fabwrap.open .cc2-fab-mini:nth-child(1) { transition-delay: .03s; }
.cc2-fabwrap.open .cc2-fab-mini:nth-child(2) { transition-delay: .06s; }
.cc2-fabwrap.open .cc2-fab-mini:nth-child(3) { transition-delay: .09s; }
.cc2-fabwrap.open .cc2-fab-mini:nth-child(4) { transition-delay: .12s; }
.cc2-fab-mini .fab-lbl { font-size: 12.5px; font-weight: 800; color: var(--text); background: var(--surface); border: 1px solid var(--border); padding: 8px 12px; border-radius: 10px; box-shadow: 0 1px 6px rgba(0,0,0,.12); white-space: nowrap; }
.cc2-fab-mini .fab-lbl em { font-style: normal; font-size: 9px; color: #b9841f; font-weight: 800; margin-left: 5px; }
.cc2-fab-mini .fab-ic { width: 42px; height: 42px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); color: var(--primary); display: grid; place-items: center; box-shadow: 0 1px 6px rgba(0,0,0,.12); flex: none; }


/* ══════════════════════════════════════════════════════════
   정보 탭 v2 — 카테고리 칩 + 금어기 카드
   ══════════════════════════════════════════════════════════ */
.info2-cats {
  display: flex; gap: 7px; overflow-x: auto; padding: 10px 12px;
  background: var(--surface); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10;
}
.info2-cats::-webkit-scrollbar { display: none; }
.info2-chip {
  flex: none; border: 1px solid var(--border); background: var(--surface); color: var(--text-sub);
  font-size: 12.5px; font-weight: 800; font-family: inherit; padding: 7px 13px; border-radius: 999px;
  white-space: nowrap; cursor: pointer;
}
.info2-chip.on { background: var(--primary); color: #fff; border-color: transparent; }
.info2-body { padding-bottom: 20px; }
.info2-subhd { font-size: 12px; font-weight: 800; color: var(--text-sub); margin: 14px 16px 8px; display: flex; align-items: center; gap: 6px; }
.info2-note { margin: 12px 16px 0; font-size: 11.5px; line-height: 1.6; color: var(--text-sub); }

.info2-bancard { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 13px; margin: 0 12px 9px; box-shadow: 0 1px 4px rgba(0,0,0,.05); }
.info2-bancard .bh { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.info2-bancard .bh .bi { color: var(--primary); display: inline-flex; }
.info2-bancard .bh .bn { font-size: 14.5px; font-weight: 800; }
.info2-dday { margin-left: auto; font-size: 10.5px; font-weight: 800; padding: 3px 9px; border-radius: 999px; }
.info2-dday.active { background: #fdecea; color: #cf4646; }
.info2-dday.soon { background: #fdf3e0; color: #c9820a; }
.info2-dday.open { background: var(--primary-light); color: var(--primary); }
.info2-dday.check { background: var(--bg); color: var(--text-sub); }
.info2-bancard .brow { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: 12.5px; border-top: 1px solid var(--border); }
.info2-bancard .brow:nth-child(2) { border-top: 0; }
.info2-bancard .brow .k { color: var(--text-sub); font-weight: 600; }
.info2-bancard .brow .v { font-weight: 700; text-align: right; }

/* ══════════════════════════════════════════════════════════
   마이 탭 v2 — 프로필 카드 + 아코디언
   ══════════════════════════════════════════════════════════ */
.my2 { padding: 14px 14px 96px; }
.my2-profile { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 14px; box-shadow: 0 1px 4px rgba(0,0,0,.05); }
.my2-profile .pav { width: 54px; height: 54px; border-radius: 50%; flex: none; overflow: hidden; background: var(--primary-light); color: var(--primary); display: grid; place-items: center; }
.my2-profile .pav img { width: 100%; height: 100%; object-fit: cover; }
.my2-profile .pinfo { flex: 1; min-width: 0; }
.my2-profile .pn { font-size: 16px; font-weight: 800; display: flex; align-items: center; gap: 7px; }
.my2-profile .pn .plan { font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 999px; }
.my2-profile .pn .plan.prem { background: #fdf3e0; color: #b9841f; }
.my2-profile .pn .plan.free { background: var(--bg); color: var(--text-sub); }
.my2-profile .pmeta { font-size: 11.5px; color: var(--text-sub); font-weight: 600; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.my2-profile .pedit { flex: none; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 12px; font-weight: 700; font-family: inherit; padding: 8px 14px; border-radius: 10px; cursor: pointer; }

.my2-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.my2-stats .stat { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 8px; text-align: center; }
.my2-stats .stat b { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.my2-stats .stat span { font-size: 10.5px; color: var(--text-sub); font-weight: 700; }

.my2-upsell { margin-top: 12px; background: linear-gradient(135deg, #fdf3e0, #fbe9c8); border: 1px solid #f0d9a8; border-radius: 14px; padding: 14px; }
.my2-upsell .ut { font-size: 13.5px; font-weight: 800; color: #8a6413; display: flex; align-items: center; gap: 5px; }
.my2-upsell .us { font-size: 12px; color: #8a6413; line-height: 1.6; margin: 6px 0 11px; opacity: .9; }
.my2-upsell button { border: 0; background: linear-gradient(180deg, #d8a03a, #b9841f); color: #fff; font-size: 13px; font-weight: 800; font-family: inherit; padding: 10px 18px; border-radius: 11px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.my2-premline { margin-top: 12px; font-size: 12.5px; font-weight: 800; color: #b9841f; background: #fdf3e0; border: 1px solid #f0d9a8; border-radius: 12px; padding: 11px 13px; display: flex; align-items: center; gap: 6px; }

.my2-acclist { margin-top: 12px; display: flex; flex-direction: column; gap: 9px; }
.my2-acc { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.my2-acc .ah { display: flex; align-items: center; gap: 11px; width: 100%; padding: 14px; background: none; border: 0; font-family: inherit; cursor: pointer; text-align: left; }
.my2-acc .ah .ai { width: 34px; height: 34px; border-radius: 10px; background: var(--primary-light); color: var(--primary); display: grid; place-items: center; flex: none; }
.my2-acc .ah .atext { flex: 1; min-width: 0; }
.my2-acc .ah .at { display: block; font-size: 14px; font-weight: 800; }
.my2-acc .ah .asub { display: block; font-size: 11px; color: var(--text-sub); font-weight: 600; margin-top: 1px; }
.my2-acc .ah .achev { color: var(--text-sub); flex: none; transition: transform .22s; }
.my2-acc.open .ah .achev { transform: rotate(90deg); }
.my2-acc .abody { max-height: 0; overflow: hidden; transition: max-height .28s; }
.my2-acc.open .abody { max-height: 700px; }
.my2-acc .ainner { padding: 0 14px 12px; }

.my2-arow { display: flex; align-items: center; gap: 8px; width: 100%; padding: 11px 0; border-top: 1px solid var(--border); background: none; border-left: 0; border-right: 0; border-bottom: 0; font-family: inherit; cursor: pointer; text-align: left; }
.my2-arow .rk { flex: 1; font-size: 13px; font-weight: 700; color: var(--text); }
.my2-arow .rchev { color: var(--text-sub); flex: none; }
.my2-ver { font-size: 11px; color: var(--text-sub); padding: 10px 0 2px; border-top: 1px solid var(--border); margin-top: 4px; }

/* 설정 인라인 */
.my2-setrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0; border-top: 1px solid var(--border); }
.my2-setrow:first-child { border-top: 0; }
.my2-setrow .sk { font-size: 13px; font-weight: 700; }
.my2-swi { width: 44px; height: 26px; border-radius: 999px; border: 0; background: var(--border); position: relative; cursor: pointer; flex: none; transition: background .18s; }
.my2-swi::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .18s; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.my2-swi.on { background: var(--primary); }
.my2-swi.on::after { transform: translateX(18px); }
.my2-seg { display: inline-flex; background: var(--bg); border: 1px solid var(--border); border-radius: 9px; padding: 3px; }
.my2-seg button { border: 0; background: transparent; color: var(--text-sub); font-size: 11.5px; font-weight: 800; font-family: inherit; padding: 5px 10px; border-radius: 7px; cursor: pointer; }
.my2-seg button.on { background: var(--primary); color: #fff; }

/* 심층 리포트 저장 */
.my2-savedcard { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border); }
.my2-savedcard:first-child { border-top: 0; }
.my2-savedcard .si { width: 38px; height: 38px; border-radius: 10px; background: var(--primary-light); color: var(--primary); display: grid; place-items: center; font-size: 10px; font-weight: 800; flex: none; }
.my2-savedcard .sc { flex: 1; min-width: 0; }
.my2-savedcard .sn { font-size: 13px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.my2-savedcard .ss { font-size: 10.5px; color: var(--text-sub); font-weight: 600; margin-top: 1px; }
.my2-savedcard .sopen { border: 1px solid var(--border); background: var(--bg); color: var(--primary); font-size: 12px; font-weight: 800; font-family: inherit; padding: 7px 12px; border-radius: 9px; cursor: pointer; flex: none; }
.my2-savedcard .sdel { border: 0; background: none; color: var(--text-sub); cursor: pointer; flex: none; display: grid; place-items: center; padding: 4px; }
.my2-lockmsg { font-size: 12.5px; line-height: 1.6; color: var(--text-sub); padding: 4px 0; }
.my2-upbtn { margin-top: 8px; border: 0; background: linear-gradient(180deg, #d8a03a, #b9841f); color: #fff; font-size: 12.5px; font-weight: 800; font-family: inherit; padding: 9px 16px; border-radius: 10px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }

/* 내 활동 소제목 */
.my2-actsub { font-size: 11.5px; font-weight: 800; color: var(--text-sub); margin: 2px 0 2px; }

/* 설정 인라인 — 프로필(지역·장르·어종) */
.my2-setgrouph { font-size: 11.5px; font-weight: 800; color: var(--text-sub); margin: 14px 0 8px; padding-top: 12px; border-top: 1px solid var(--border); }
.my2-setlabel { font-size: 12.5px; font-weight: 700; display: block; margin-bottom: 4px; }
.my2-genrow { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.my2-genrow .chip { flex-shrink: 0; }
.my2-genlvl { flex: 1; max-width: 120px; border: 1.5px solid var(--border); border-radius: 8px; padding: 6px 8px; font-size: 13px; font-family: inherit; background: var(--surface); color: var(--text); outline: none; }

/* AI 어종 구분 기록 — 썸네일 그리드 */
.my2-fishidgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.my2-fishidcard { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface); cursor: pointer; padding: 0; font-family: inherit; }
.my2-fishidcard img { width: 100%; height: 84px; object-fit: cover; display: block; }
.my2-fishidcard .ph { width: 100%; height: 84px; display: grid; place-items: center; background: var(--bg); color: var(--text-sub); }
.my2-fishidcard .fd { font-size: 10.5px; font-weight: 700; color: var(--text-sub); padding: 6px 4px; text-align: center; }

.my2-danger { display: flex; gap: 10px; margin-top: 16px; }
.my2-danger button { flex: 1; border: 1px solid var(--border); background: var(--surface); color: var(--text-sub); font-size: 13px; font-weight: 700; font-family: inherit; padding: 12px; border-radius: 11px; cursor: pointer; }
.my2-danger .quit { color: var(--danger, #cf4646); }

/* 앱 공용 토스트 (하단 중앙) — 하드웨어 뒤로가기 종료 안내 등 */
.app-toast {
  position: fixed; left: 50%; bottom: calc(var(--bottom-nav-h) + 20px);
  transform: translate(-50%, 12px);
  background: rgba(20, 24, 30, .92); color: #fff;
  font-size: 13px; font-weight: 700; letter-spacing: -.01em;
  padding: 11px 18px; border-radius: 999px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
  z-index: 3000; opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s; max-width: 88vw; text-align: center;
}
.app-toast.on { opacity: 1; transform: translate(-50%, 0); }