/* 오늘의 팁 (features/daily-tip · 2026-09-27) — 규칙·이유는 daily-tip.js 머리말이 정본이다.
   층: 로그인·의견·피더 창(1600)·알림 창(1610)보다 아래, 피더 모집 카드(1230)보다 위.
   넓은 화면 = 지도 가운데 아래쪽 작은 카드 · 폰(≤760px) = 하단 탭바 바로 위 시트. */
.dtp-card {
  position: fixed; left: 50%; bottom: 72px; transform: translateX(-50%); z-index: 1500;
  width: 360px; max-width: calc(100vw - 24px); box-sizing: border-box;
  padding: 12px 14px 10px;
  background: var(--bg-surface-float, #fff); color: var(--text-primary, #0f172a);
  border: 1px solid var(--border-medium, #cbd5e1); border-top: 3px solid var(--accent-cyan, #0891b2);
  border-radius: var(--radius-md, 8px); box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,.18));
  font-size: var(--fs-sm, 12px); line-height: 1.5;
  animation: dtpIn .22s ease-out;
  outline: none;   /* 초점은 카드가 받는다(스크린리더가 제목을 읽게) — 테두리는 그리지 않는다 */
}
@keyframes dtpIn { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .dtp-card { animation: none; } }

.dtp-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.dtp-kicker { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--accent-cyan, #0891b2); }
.dtp-kicker .ui-ico { width: 14px; height: 14px; }
.dtp-count { margin-left: auto; color: var(--text-secondary, #64748b); font-variant-numeric: tabular-nums; }
.dtp-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; margin: -4px -6px -4px 0; padding: 0;
  background: transparent; border: 0; border-radius: 6px; color: var(--text-secondary, #64748b); cursor: pointer;
}
.dtp-count:empty + .dtp-x { margin-left: auto; }
.dtp-x:hover { background: var(--bg-hover, #f1f5f9); color: var(--text-primary, #0f172a); }
.dtp-x .ui-ico { width: 16px; height: 16px; }

.dtp-main { display: flex; gap: 10px; align-items: flex-start; }
.dtp-ico {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--bg-hover, #f1f5f9); color: var(--accent-cyan, #0891b2);
}
.dtp-ico .ui-ico { width: 20px; height: 20px; }
.dtp-txt { min-width: 0; }
.dtp-title { margin: 0 0 4px; font-size: var(--fs-md, 14px); font-weight: 700; line-height: 1.35; }
.dtp-body p { margin: 0 0 2px; color: var(--text-secondary, #475569); }

.dtp-acts { display: flex; gap: 6px; margin-top: 10px; }
.dtp-acts button {
  flex: 1 1 0; min-height: 34px; margin: 0; padding: 6px 10px; cursor: pointer;
  border-radius: var(--radius-sm, 6px); font: inherit; font-weight: 700;
  border: 1px solid var(--border-medium, #cbd5e1); background: transparent; color: var(--text-primary, #0f172a);
}
.dtp-acts .dtp-go { background: var(--accent-cyan, #0891b2); border-color: var(--accent-cyan, #0891b2); color: var(--on-primary, #fff); }   /* 다크 모드는 밝은 하늘색이라 어두운 글자(theme.css) */
.dtp-acts .dtp-go:hover { filter: brightness(1.08); }
.dtp-acts .dtp-next:hover { background: var(--bg-hover, #f1f5f9); }
.dtp-acts button[hidden] { display: none; }
.dtp-card button:focus-visible { outline: 2px solid var(--accent-cyan, #0891b2); outline-offset: 1px; }

.dtp-off { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; color: var(--text-secondary, #64748b); cursor: pointer; }
.dtp-off input { margin: 0; }

/* 폰 — 하단 탭바(--tabbar-total, shell.css) 바로 위 시트 */
@media (max-width: 760px) {
  .dtp-card {
    left: 8px; right: 8px; width: auto; max-width: none; transform: none;
    bottom: calc(var(--tabbar-total, 0px) + 8px);
    animation-name: dtpUp;
  }
  @keyframes dtpUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}