/* takao-parking-navi — Cocoon記事内に馴染む控えめスタイル */
#tpn-root { margin: 1.2em 0; }
.tpn-app { border: 1px solid #d8d8d8; border-radius: 10px; padding: 14px; background: #fafaf8; }
.tpn-inputs { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-bottom: 10px; font-size: 0.95em; }
.tpn-inputs label { display: inline-flex; align-items: center; gap: 4px; }
.tpn-inputs input[type="datetime-local"], .tpn-inputs select { padding: 4px 6px; border: 1px solid #ccc; border-radius: 6px; font-size: 0.95em; }
.tpn-cards { display: grid; gap: 10px; }
.tpn-card { border: 1px solid #e0e0e0; border-radius: 8px; padding: 10px 12px; background: #fff; }
.tpn-rank1 { border-color: #2f6b4f; border-width: 2px; }
.tpn-card-head { font-weight: 700; margin-bottom: 4px; }
.tpn-card-body { font-size: 0.92em; line-height: 1.6; }
.tpn-link { display: inline-block; margin: 4px 8px 0 0; padding: 8px 10px; font-size: 0.88em; background: rgba(47,107,79,0.08); border-radius: 6px; text-decoration: none; }
.tpn-warn { color: #b04a3a; font-weight: 600; }
.tpn-note { color: #666; font-size: 0.85em; }
.tpn-others { font-size: 0.88em; margin: 10px 0 0; padding-left: 1.2em; }
.tpn-red-alert { background: #fdecea; border-left: 4px solid #b04a3a; padding: 10px 12px; border-radius: 0 6px 6px 0; margin-bottom: 10px; font-size: 0.93em; }
.tpn-disclaimer { font-size: 0.8em; color: #777; margin-top: 12px; }
@media (prefers-color-scheme: dark) {
  .tpn-app { background: #1e2422; border-color: #3a423e; }
  .tpn-card { background: #262d2a; border-color: #3a423e; color: #e8ebe7; }
  .tpn-inputs input, .tpn-inputs select { background: #262d2a; color: #e8ebe7; border-color: #4a524e; }
  .tpn-note, .tpn-disclaimer { color: #9aa8a0; }
  .tpn-red-alert { background: #2e1d19; }
  .tpn-warn { color: #e08a7a; }
  .tpn-link { background: rgba(95,169,131,0.15); }
}
@media (max-width: 480px) { .tpn-inputs { flex-direction: column; align-items: flex-start; } }