/* plan-list.css v1.0 (2026-08-05) — 요금제 검색 및 추천 개편 (B안 확정)
   구성: 필터박스(칩 균등분할+자동숨김) / PC 카드 그리드·모바일 컴팩트 리스트 / 상세 팝업(PC 중앙·모바일 바텀시트)
   시안: phone82-tools/sian/2026-08-05-요금제목록B안-실반영미리보기.html (v7 확정)
   phone.html 전용 로드. 다크모드는 body.dark-mode 공통 규칙. */

/* ── 필터 박스 ── */
.pfl-filterbox { background: #fff; border: 1px solid #dbe4f0; border-radius: 16px; padding: 14px 18px; word-break: keep-all; }
.pfl-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.pfl-row:last-of-type { margin-bottom: 0; }
.pfl-label { flex: 0 0 44px; font-size: 11px; color: #64748b; font-weight: 700; }
/* 통신사 로고 버튼 줄은 기존 .carrier-buttons 스타일 그대로 — 폭만 차지하게 */
.pfl-row .carrier-buttons { flex: 1; min-width: 0; margin: 0; }
/* 칩: 모바일=4칸 등폭 그리드(작게 — 혼자 줄바꿈된 칩이 전체 폭으로 늘어나지 않음, 2026-08-05 사장님 지적),
   PC(600px+)=줄 폭 균등분할(공통지원금 팝업 세그와 동일 — 숨긴 칩 폭은 남은 칩이 재분배) */
.pfl-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; flex: 1; min-width: 0; }
.pfl-chips .pfl-chip { text-align: center; border: 1px solid #dbe4f0; background: #f8fafc; color: #334155; font-size: 10.5px; font-weight: 600; padding: 6px 1px; border-radius: 99px; white-space: nowrap; min-width: 0; letter-spacing: -0.3px; cursor: pointer; font-family: inherit; min-height: 30px; }
.pfl-chips .pfl-chip.active { background: #1a73e8; border-color: #1a73e8; color: #fff; }
.pfl-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 10px; border-top: 1px solid #eef2f7; }
.pfl-count { font-size: 12px; color: #64748b; }
.pfl-count b { color: #1a73e8; font-size: 13px; }
.pfl-sort { font-size: 11px; color: #334155; border: 1px solid #dbe4f0; border-radius: 99px; padding: 7px 12px; background: #f8fafc; cursor: pointer; font-family: inherit; font-weight: 600; }
@media (min-width: 600px) {
    .pfl-chips { display: flex; flex-wrap: nowrap; gap: 5px; }
    .pfl-chips .pfl-chip { flex: 1 1 0; font-size: 12px; padding: 9px 2px; min-height: 34px; letter-spacing: -0.2px; }
}

/* ── 목록: 모바일 컴팩트 리스트 (기본) ── */
.pfl-list-wrap { background: #fff; border: 1px solid #dbe4f0; border-radius: 14px; overflow: hidden; margin-top: 14px; word-break: keep-all; }
.pfl-lhead { display: grid; grid-template-columns: 1fr 86px 96px 18px; gap: 8px; padding: 9px 14px; background: #f8fafc; font-size: 10px; color: #64748b; font-weight: 700; }
.pfl-lhead span:nth-child(2), .pfl-lhead span:nth-child(3) { text-align: right; }
.pfl-prow { display: grid; grid-template-columns: 1fr 86px 96px 18px; gap: 8px; padding: 11px 14px; border-top: 1px solid #f1f5f9; align-items: center; cursor: pointer; }
.pfl-prow:hover { background: #f4f8ff; }
.pfl-prow .pfl-nm { font-size: 13px; font-weight: 700; line-height: 1.35; min-width: 0; color: #202124; }
.pfl-prow .pfl-nm .pflb { margin-left: 4px; vertical-align: 1px; }
.pfl-prow .pfl-nm small { display: block; font-size: 10.5px; color: #94a3b8; font-weight: 500; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pfl-prow .pfl-dt { text-align: right; font-size: 13px; font-weight: 800; color: #1a73e8; white-space: nowrap; }
.pfl-prow .pfl-dt small { display: block; font-size: 9.5px; color: #94a3b8; font-weight: 600; }
.pfl-prow .pfl-pr { text-align: right; font-size: 13px; font-weight: 800; white-space: nowrap; color: #202124; }
.pfl-prow .pfl-pr small { display: block; font-size: 10px; color: #16a34a; font-weight: 700; }
.pfl-prow .pfl-cv { color: #94a3b8; font-size: 13px; }
.pfl-empty { padding: 36px 0; text-align: center; color: #94a3b8; font-size: 13px; }

/* 나이 제한 경계 생일 예시 — 목록 줄(두 줄 <br>)·상세 팝업 배너 (2026-08-05 사장님 확정)
   .pfl-nm small 공통의 nowrap·ellipsis를 풀어야 두 줄이 온전히 보인다 */
.pfl-prow .pfl-nm small.pfl-age-note { color: #d97706; font-weight: 600; white-space: normal; word-break: keep-all; overflow: visible; }
body.dark-mode .pfl-prow .pfl-nm small.pfl-age-note { color: #fbbf24; }
.pfl-age-banner { margin: 0 0 10px; padding: 7px 10px; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 8px; font-size: 12px; font-weight: 600; color: #b45309; line-height: 1.5; word-break: keep-all; }
body.dark-mode .pfl-age-banner { background: rgba(251, 191, 36, .08); border-color: rgba(251, 191, 36, .35); color: #fbbf24; }

/* 배지 칩 (연령·구형·통신사) */
.pflb { font-size: 10px; font-weight: 700; border-radius: 5px; padding: 1px 5px; white-space: nowrap; display: inline-block; }
.pflb-age { background: rgba(251, 191, 36, .15); color: #b45309; border: 1px solid rgba(180, 120, 30, .4); }
.pflb-old { background: rgba(148, 163, 184, .12); color: #7c8aa0; border: 1px solid rgba(148, 163, 184, .4); }
.pflb-online { background: rgba(124, 58, 237, .1); color: #7c3aed; border: 1px solid rgba(124, 58, 237, .35); }
.pflb-skt { color: #3617CE; border: 1px solid currentColor; background: rgba(54, 23, 206, .06); }
.pflb-kt { color: #00807B; border: 1px solid currentColor; background: rgba(0, 128, 123, .06); }
.pflb-lgu { color: #E6007E; border: 1px solid currentColor; background: rgba(230, 0, 126, .06); }

/* ── PC(≥900px): 카드 그리드 — 컨테이너 1100px 기준 3열 ──
   같은 줄 카드는 전부 같은 높이(stretch)로 통일하고, 데이터·가격은 카드 하단 정렬
   (이름 두 줄·배지 줄바꿈 카드 때문에 높이가 들쭉날쭉하던 문제 — 2026-08-05 사장님 지적) */
@media (min-width: 900px) {
    .pfl-list-wrap { background: transparent; border: none; border-radius: 0; overflow: visible; }
    .pfl-lhead { display: none; }
    #pfl-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
    .pfl-item { background: #fff; border: 1px solid #dbe4f0; border-radius: 14px; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, .04); display: flex; }
    .pfl-prow { flex: 1; border-top: none; grid-template-columns: 1fr auto; grid-template-rows: 1fr auto; grid-template-areas: 'nm cv' 'dt pr'; row-gap: 10px; padding: 14px 16px 12px; align-items: start; }
    .pfl-prow .pfl-nm { grid-area: nm; }
    .pfl-prow .pfl-cv { grid-area: cv; align-self: start; }
    .pfl-prow .pfl-dt { grid-area: dt; text-align: left; font-size: 16px; align-self: end; }
    .pfl-prow .pfl-dt small { display: inline; margin-left: 5px; font-size: 10px; }
    .pfl-prow .pfl-pr { grid-area: pr; font-size: 15px; align-self: end; }
    .pfl-prow .pfl-nm small { white-space: normal; }
}

/* ── 상세 팝업: PC=중앙 모달, 모바일=바텀시트 ── */
.pfl-pov { position: fixed; inset: 0; background: rgba(15, 23, 42, .5); display: none; align-items: center; justify-content: center; padding: 20px; z-index: 1200; }
.pfl-pov.pfl-show { display: flex; }
.pfl-modal { background: #fff; border: 1px solid #dbe4f0; border-radius: 16px; width: 100%; max-width: 480px; max-height: 86dvh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 12px 40px rgba(0, 0, 0, .3); word-break: keep-all; }
.pfl-mhead { position: relative; padding: 16px 44px 12px 18px; border-bottom: 1px solid #eef2f7; }
.pfl-mhead .pfl-mtitle { font-size: 15px; font-weight: 800; line-height: 1.4; color: #202124; }
.pfl-mhead .pfl-mtitle .pflb { margin-left: 5px; vertical-align: 1px; }
.pfl-mclose { position: absolute; top: 12px; right: 12px; border: none; background: #f1f5f9; width: 30px; height: 30px; border-radius: 50%; font-size: 13px; color: #475569; cursor: pointer; }
.pfl-mprice { display: flex; align-items: baseline; gap: 8px; padding: 12px 18px 0; flex-wrap: wrap; }
.pfl-mprice .pfl-now { font-size: 20px; font-weight: 800; color: #202124; }
.pfl-mprice .pfl-disc { font-size: 12px; font-weight: 700; color: #15803d; background: rgba(74, 222, 128, .14); border-radius: 6px; padding: 3px 9px; white-space: nowrap; }
.pfl-mbody { overflow-y: auto; padding: 12px 18px 18px; overscroll-behavior: contain; }
.pfl-specs { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 6px; margin-bottom: 10px; }
.pfl-spec { background: #f8fafc; border: 1px solid #eef2f7; border-radius: 10px; padding: 8px 10px; min-width: 0; }
.pfl-spec .k { font-size: 10px; color: #94a3b8; margin-bottom: 3px; }
.pfl-spec .v { font-size: 13px; font-weight: 700; line-height: 1.3; color: #202124; }
.pfl-spec .v small { display: block; font-size: 10px; color: #94a3b8; font-weight: 600; margin-top: 1px; white-space: normal; }
.pfl-spec.pfl-data .v { color: #1a73e8; }
.pfl-detail { font-size: 12px; color: #334155; line-height: 1.8; }
.pfl-detail p { margin: 0 0 2px; padding-left: 12px; text-indent: -12px; }
.pfl-detail mark { background: #dcfce7; color: #15803d; border-radius: 4px; padding: 0 3px; }
.pfl-detail strong.pfl-pick { color: #7c3aed; }
@media (max-width: 600px) {
    .pfl-pov { padding: 0; align-items: flex-end; }
    .pfl-modal { max-width: none; border-radius: 16px 16px 0 0; border-bottom: none; max-height: 80dvh; animation: pfl-up .25s ease-out; }
    @keyframes pfl-up { from { transform: translateY(40px); opacity: .5; } to { transform: translateY(0); opacity: 1; } }
}
@media (max-width: 420px) {
    .pfl-label { flex-basis: 36px; font-size: 10px; }
    .pfl-filterbox { padding: 12px 12px; }
    .pfl-row { margin-bottom: 6px; }
    .pfl-chips .pfl-chip { font-size: 10px; letter-spacing: -0.5px; padding: 6px 0; }
    .pfl-prow { grid-template-columns: 1fr 72px 84px 14px; padding: 10px 10px; }
    .pfl-lhead { grid-template-columns: 1fr 72px 84px 14px; padding: 8px 10px; }
    .pfl-specs { grid-template-columns: 1fr 1fr; }
    .pfl-spec.pfl-data { grid-column: 1 / -1; }
}

/* ── 요금제 비교 (2026-08-05): 단일 버튼 토글 → 목록에서 2개 선택 → 나란히 비교 팝업 ── */
.pfl-meta-btns { display: flex; gap: 6px; align-items: center; }
/* 비교 버튼: 로고 시그니처(파랑→퍼플) 그라데이션 + 은은한 펄스로 시선 유도 (사장님 확정) */
.pfl-vs-startbtn { font-size: 12px; color: #fff; border: none; border-radius: 99px; padding: 8px 15px; background: linear-gradient(135deg, #1a73e8, #7c3aed); cursor: pointer; font-family: inherit; font-weight: 800; white-space: nowrap; box-shadow: 0 2px 10px rgba(80, 70, 230, .35); animation: pfl-vs-pulse 2.6s ease-in-out infinite; }
.pfl-vs-startbtn:hover { filter: brightness(1.08); }
.pfl-vs-startbtn.on { background: #475569; animation: none; box-shadow: none; }
@keyframes pfl-vs-pulse { 0%, 100% { box-shadow: 0 2px 10px rgba(80, 70, 230, .35); } 50% { box-shadow: 0 2px 16px rgba(124, 58, 237, .6); } }
@media (prefers-reduced-motion: reduce) { .pfl-vs-startbtn { animation: none; } }
.pfl-vs-banner { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 12px; background: rgba(26, 115, 232, .08); border: 1px solid #1a73e8; border-radius: 12px; padding: 10px 14px; font-size: 12.5px; color: #202124; word-break: keep-all; }
.pfl-vs-banner b { color: #1a73e8; }
.pfl-item.pfl-vs-picked { border-color: #1a73e8; box-shadow: 0 0 0 1px #1a73e8; }
.pfl-item.pfl-vs-picked .pfl-prow { background: rgba(26, 115, 232, .07); }
.pfl-vs-modal { max-width: 560px; }
.pfl-vs-grid { display: grid; grid-template-columns: 88px 1fr 1fr; gap: 6px; align-items: center; padding: 7px 0; border-bottom: 1px solid #f1f5f9; }
.pfl-vs-head-row { border-bottom: 1px solid #dbe4f0; padding-bottom: 9px; }
.pfl-vs-pname { font-size: 12.5px; font-weight: 800; color: #202124; line-height: 1.35; text-align: center; word-break: keep-all; }
.pfl-vs-pname .pflb { margin-left: 3px; vertical-align: 1px; }
.pfl-vs-lb { font-size: 10.5px; color: #64748b; font-weight: 700; }
.pfl-vs-c { text-align: center; font-size: 12.5px; font-weight: 700; color: #202124; border-radius: 8px; padding: 5px 4px; word-break: keep-all; }
.pfl-vs-c.best { background: rgba(34, 197, 94, .13); color: #15803d; }
.pfl-vs-summary { margin-top: 12px; text-align: center; font-size: 12.5px; font-weight: 700; background: #f4f8ff; border-radius: 10px; padding: 10px 12px; color: #202124; line-height: 1.6; word-break: keep-all; }
.pfl-vs-summary b { color: #1a73e8; }
.pfl-vs-note { margin: 8px 0 0; font-size: 10px; color: #94a3b8; line-height: 1.6; }
@media (max-width: 420px) {
    .pfl-vs-grid { grid-template-columns: 70px 1fr 1fr; }
    .pfl-vs-c { font-size: 11.5px; }
    .pfl-vs-startbtn { font-size: 11px; padding: 7px 11px; }
}

/* ── 다크모드 ── */
body.dark-mode .pfl-vs-banner { background: rgba(77, 148, 255, .1); border-color: #4d94ff; color: #e5e7eb; }
body.dark-mode .pfl-vs-banner b { color: #4d94ff; }
body.dark-mode .pfl-item.pfl-vs-picked { border-color: #4d94ff; box-shadow: 0 0 0 1px #4d94ff; }
body.dark-mode .pfl-item.pfl-vs-picked .pfl-prow { background: rgba(77, 148, 255, .1); }
body.dark-mode .pfl-vs-grid { border-color: #2d3748; }
body.dark-mode .pfl-vs-head-row { border-color: #374151; }
body.dark-mode .pfl-vs-pname { color: #f1f5f9; }
body.dark-mode .pfl-vs-lb { color: #9ca3af; }
body.dark-mode .pfl-vs-c { color: #e5e7eb; }
body.dark-mode .pfl-vs-c.best { background: rgba(74, 222, 128, .14); color: #4ade80; }
body.dark-mode .pfl-vs-summary { background: #242f3f; color: #e5e7eb; }
body.dark-mode .pfl-vs-summary b { color: #4d94ff; }

/* ── 다크모드 ── */
body.dark-mode .pfl-filterbox { background: #1f2937; border-color: #374151; }
body.dark-mode .pfl-label { color: #9ca3af; }
body.dark-mode .pfl-chips .pfl-chip { background: #111827; border-color: #374151; color: #d1d5db; }
body.dark-mode .pfl-chips .pfl-chip.active { background: #1a73e8; border-color: #1a73e8; color: #fff; }
body.dark-mode .pfl-meta { border-color: #374151; }
body.dark-mode .pfl-count { color: #9ca3af; }
body.dark-mode .pfl-count b { color: #4d94ff; }
body.dark-mode .pfl-sort { background: #111827; border-color: #374151; color: #d1d5db; }
body.dark-mode .pfl-list-wrap { background: #1f2937; border-color: #374151; }
body.dark-mode .pfl-lhead { background: #111827; color: #9ca3af; }
body.dark-mode .pfl-prow { border-color: #2d3748; }
body.dark-mode .pfl-prow:hover { background: #242f3f; }
body.dark-mode .pfl-prow .pfl-nm { color: #e5e7eb; }
body.dark-mode .pfl-prow .pfl-dt { color: #4d94ff; }
body.dark-mode .pfl-prow .pfl-pr { color: #e5e7eb; }
body.dark-mode .pfl-prow .pfl-pr small { color: #4ade80; }
body.dark-mode .pflb-age { color: #fbbf24; border-color: rgba(251, 191, 36, .4); }
body.dark-mode .pflb-old { color: #94a3b8; }
body.dark-mode .pflb-online { color: #d8b4fe; border-color: rgba(216, 180, 254, .4); }
body.dark-mode .pflb-skt { color: #8B7CFF; background: rgba(139, 124, 255, .1); }
body.dark-mode .pflb-kt { color: #2DD4CE; background: rgba(45, 212, 206, .1); }
body.dark-mode .pflb-lgu { color: #FF5CA8; background: rgba(255, 92, 168, .1); }
@media (min-width: 900px) {
    body.dark-mode .pfl-list-wrap { background: transparent; }
    body.dark-mode .pfl-item { background: #1f2937; border-color: #374151; box-shadow: none; }
}
body.dark-mode .pfl-modal { background: #1f2937; border-color: #374151; }
body.dark-mode .pfl-mhead { border-color: #374151; }
body.dark-mode .pfl-mhead .pfl-mtitle { color: #f1f5f9; }
body.dark-mode .pfl-mclose { background: #374151; color: #d1d5db; }
body.dark-mode .pfl-mprice .pfl-now { color: #f1f5f9; }
body.dark-mode .pfl-mprice .pfl-disc { color: #4ade80; background: rgba(74, 222, 128, .1); }
body.dark-mode .pfl-spec { background: #111827; border-color: #374151; }
body.dark-mode .pfl-spec .v { color: #e5e7eb; }
body.dark-mode .pfl-spec.pfl-data .v { color: #4d94ff; }
body.dark-mode .pfl-detail { color: #d1d5db; }
body.dark-mode .pfl-detail mark { background: rgba(74, 222, 128, .15); color: #4ade80; }
body.dark-mode .pfl-detail strong.pfl-pick { color: #a78bfa; }