/* 랜딩페이지 추적탭 (2026-08-05) — 플랫폼별 카드 UI (.lppx-*)
 * 카드 = 네이티브 <details>/<summary> (JS 불필요, 값 있는 플랫폼은 open 렌더)
 * 폼 컨트롤은 배경·글자색 동시 지정 (개발 규칙 10) */

.lppx-info { margin-bottom: 14px; padding: 10px 12px; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px; font-size: 11px; color: #1e40af; line-height: 1.6; }

.lppx-cards { display: flex; flex-direction: column; gap: 10px; }

details.lppx-card { border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; }
details.lppx-card[open] { border-color: #d1d5db; box-shadow: 0 1px 3px rgba(0, 0, 0, .05); }

.lppx-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; list-style: none; user-select: none; border-radius: 12px; }
.lppx-head::-webkit-details-marker { display: none; }
.lppx-head:hover { background: #f9fafb; }
details[open] > .lppx-head { border-radius: 12px 12px 0 0; }

.lppx-logo { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; color: #fff; flex-shrink: 0; }
.lppx-logo-google { background: #4285f4; }
.lppx-logo-tiktok { background: #111111; }
.lppx-logo-meta { background: #1877f2; }
.lppx-logo-kakao { background: #fee500; color: #191919; }
.lppx-logo-daangn { background: #ff6f0f; }
.lppx-logo-naver { background: #03c75a; }

.lppx-title { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lppx-title b { font-size: 13px; color: #111827; }
.lppx-title small { font-size: 11px; color: #9ca3af; }

.lppx-badges { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.lppx-badge { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.lppx-badge-on { background: #dcfce7; color: #15803d; }
.lppx-badge-off { background: #f3f4f6; color: #9ca3af; }
.lppx-badge-api { background: #e0e7ff; color: #4338ca; }

.lppx-chevron { color: #9ca3af; flex-shrink: 0; transition: transform .15s ease; }
details[open] .lppx-chevron { transform: rotate(180deg); }

.lppx-body { padding: 12px 14px 14px; border-top: 1px solid #f3f4f6; display: flex; flex-direction: column; gap: 12px; }

/* 카드 내부 구분 서브 헤딩 (예: "전환 API (서버 전송)") */
.lppx-sub { font-size: 11px; font-weight: 700; color: #6b7280; letter-spacing: .02em; display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.lppx-sub::after { content: ""; flex: 1; height: 1px; background: #f3f4f6; }

.lppx-field label { display: block; font-size: 12px; font-weight: 600; color: #374151; margin-bottom: 5px; }
.lppx-field label small { font-weight: 400; color: #9ca3af; }
.lppx-field input[type="text"], .lppx-field select { width: 100%; padding: 9px 12px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 13px; box-sizing: border-box; background: #fff; color: #111827; }
.lppx-field input[type="text"]::placeholder { color: #9ca3af; }
.lppx-field input[type="text"]:focus, .lppx-field select:focus { outline: none; border-color: #3e6187; box-shadow: 0 0 0 3px rgba(62, 97, 135, .12); }
.lppx-field input.lppx-mono { font-family: monospace; font-size: 12.5px; }

.lppx-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 640px) { .lppx-grid2 { grid-template-columns: 1fr; } }

.lppx-hint { margin: 0; padding: 8px 10px; border-radius: 8px; font-size: 11px; line-height: 1.5; }
.lppx-hint-warn { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.lppx-hint-note { background: #f9fafb; border: 1px solid #f3f4f6; color: #6b7280; }