/* ══════════════════════════════════════════════════════════════
   pf-list — 목록 정본(조합본)
   히어로 = pf-2 / 필터 = pf-3(언더라인 탭 + 칩 드롭다운 + 레인지)
   카드   = pf-2 / 하단 롤링 바 = pf-1
   ★이번 변경: ① 자동화 유형 탭 대폭 확대 ② 우측 정렬(최신순) 추가
   ══════════════════════════════════════════════════════════════ */
:root{ --tdur:.15s; --tfn:cubic-bezier(.4,0,.2,1); }
body{ background:#fff; }
img,svg{ display:block; }
button{ font-family:inherit; }

/* ── 서브 히어로 ─────────────────────────────────────────── */
/* ★2차 요청서 §3 — 상·하 여백을 소폭 확대(150→176 / 96→120).
   값은 ux-common.css 의 공통 토큰이 관리한다. 미디어 히어로(mx-2)도
   같은 토큰을 참조하므로 두 페이지의 수직 리듬이 자동으로 맞는다.
   ⛔여기에 px 를 직접 쓰지 말 것 — 한쪽만 어긋난다. */
.subhero{ padding-top:var(--hero-space-top); padding-bottom:var(--hero-space-bottom); }
.subhero .lead{ max-width:none; font-size:clamp(17px,1.9vw,21px); font-weight:500; line-height:1.72; letter-spacing:-.025em; color:var(--g700); word-break:keep-all; }
.subhero .lead b{ font-weight:600; color:var(--ink); }

/* pill 앞 펄스 원형 (위닝피피티식 ping) */
.subhero .sec-pill{ display:inline-flex; align-items:center; gap:10px; }
.pdot{ position:relative; width:8px; height:8px; flex:0 0 auto; }
.pdot i{ position:absolute; inset:0; border-radius:50%; background:var(--blue); }
.pdot::before, .pdot::after{
  content:''; position:absolute; inset:0; border-radius:50%; background:var(--blue);
  opacity:.5; animation:pf-ping 2.8s cubic-bezier(0,0,.2,1) infinite;
}
.pdot::after{ animation-delay:1.4s; }
@keyframes pf-ping{ 0%{ transform:scale(1); opacity:.5; } 70%,100%{ transform:scale(3.4); opacity:0; } }

/* ── sticky 필터 바 ──────────────────────────────────────── */
.fbar{
  position:sticky; top:76px; z-index:30;
  background:rgba(255,255,255,.94); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.fbar .in{ max-width:1520px; margin:0 auto; padding:26px 32px 20px; }

/* 상단 미세 지표 한 줄 */
/* 탭 줄: 좌 탭 · 우 정렬 */
.fb-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; }
.tabs{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:4px 18px; min-width:0; }
.tab{
  display:inline-flex; align-items:center; cursor:pointer;
  padding:8px 2px 10px; border:0; background:transparent;
  font-size:clamp(19px,2.1vw,27px); font-weight:600; line-height:1.4; letter-spacing:-.035em;
  color:var(--g500); border-bottom:2px solid transparent;
  transition:color var(--tdur) var(--tfn), border-color var(--tdur) var(--tfn);
  white-space:nowrap;
}
.tab:hover{ color:var(--ink); }
.tab.on{ color:var(--ink); border-bottom-color:var(--ink); }
.tab .c{
  margin-left:7px; font-size:.5em; font-weight:600; line-height:1;
  color:var(--g500); transform:translateY(-.35em);
  transition:color var(--tdur) var(--tfn);
}
.tab.on .c{ color:var(--blue); }

/* 칩 줄 */
.chips{ display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin-top:14px; }
.chip{ position:relative; }
.chip-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; flex-shrink:0; cursor:pointer;
  border-radius:999px; border:1px solid var(--line); background:#fff;
  padding:7px 16px; max-width:100%;
  font-size:14.5px; font-weight:500; line-height:1.5; letter-spacing:-.015em; color:var(--ink);
  transition:background-color var(--tdur) var(--tfn), border-color var(--tdur) var(--tfn);
}
.chip-btn:hover{ background:var(--bg2); }
.chip.open .chip-btn,
.chip.act .chip-btn{ background:var(--tint); border-color:var(--tint-b); color:var(--blue-d); }
.chip-btn .lb{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chip-btn .chev{ width:15px; height:15px; flex-shrink:0; transition:transform var(--tdur) var(--tfn); }
.chip.open .chip-btn .chev{ transform:rotate(180deg); }

/* 전체 초기화 */
.allreset{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer; border:0; background:transparent;
  border-radius:999px; padding:6px 12px;
  font-size:13.5px; font-weight:500; color:var(--g500);
  transition:color var(--tdur) var(--tfn), background-color var(--tdur) var(--tfn);
}
.allreset:hover{ color:var(--ink); background:var(--bg2); }
.allreset[disabled]{ opacity:.35; cursor:default; }
.allreset svg{ width:14px; height:14px; }

/* ── 정렬(최신순) ────────────────────────────────────────── */
.sortwrap{ flex:0 0 auto; padding-bottom:6px; }
.sort-btn{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  border-radius:999px; border:1px solid var(--line); background:#fff;
  padding:7px 14px 7px 16px;
  font-size:14px; font-weight:500; letter-spacing:-.015em; color:var(--ink);
  transition:background-color var(--tdur) var(--tfn), border-color var(--tdur) var(--tfn);
}
.sort-btn:hover{ background:var(--bg2); }
.chip.open .sort-btn{ background:var(--bg2); border-color:var(--tint-b); }
.sort-btn .ic{ width:15px; height:15px; color:var(--g500); }
.sort-btn .chev{ width:15px; height:15px; transition:transform var(--tdur) var(--tfn); }
.chip.open .sort-btn .chev{ transform:rotate(180deg); }

/* ── 드롭다운 패널 ───────────────────────────────────────── */
.panel{
  position:absolute; top:calc(100% + 8px); left:0; z-index:40; display:none;
  background:#fff; border:1px solid var(--line); border-radius:14px;
  box-shadow:0 18px 44px -20px rgba(10,28,62,.34), 0 2px 6px -2px rgba(10,28,62,.10);
  padding:20px 22px 10px;
}
.panel.r{ left:auto; right:0; }
.chip.open .panel{ display:block; }
.panel-ind{ min-width:392px; }
.panel-rng{ width:430px; max-width:calc(100vw - 48px); padding:16px 22px 10px; }
.panel-sort{ min-width:196px; padding:8px; }

.cbcols{ display:flex; gap:26px; }
.cbcol{ width:168px; flex-shrink:0; display:flex; flex-direction:column; }
.cbrow{ display:flex; align-items:center; gap:9px; cursor:pointer; padding:8px 8px 8px 4px; border-radius:8px; }
.cbrow:hover{ background:var(--bg2); }
.cbrow input{ position:absolute; opacity:0; width:0; height:0; }
.cbbox{
  width:17px; height:17px; flex-shrink:0; border-radius:5px; border:1px solid var(--line);
  background:#fff; display:grid; place-content:center; color:transparent;
  transition:background-color var(--tdur) var(--tfn), border-color var(--tdur) var(--tfn);
}
.cbrow input:checked + .cbbox{ background:var(--blue); border-color:var(--blue); color:#fff; }
.cbrow input:focus-visible + .cbbox{ box-shadow:0 0 0 3px var(--tint-b); }
.cbbox svg{ width:12px; height:12px; }
.cbrow .tx{ font-size:15px; font-weight:500; line-height:1.5; color:var(--ink); }
.cbrow .n{ margin-left:auto; font-size:12.5px; font-weight:500; color:var(--g500); }

/* 정렬 옵션 행 */
.srow{ display:flex; align-items:center; gap:9px; cursor:pointer; padding:10px 12px; border-radius:9px; }
.srow:hover{ background:var(--bg2); }
.srow input{ position:absolute; opacity:0; width:0; height:0; }
.srow .dot{
  width:16px; height:16px; flex-shrink:0; border-radius:50%; border:1px solid var(--line); background:#fff;
  display:grid; place-content:center;
  transition:border-color var(--tdur) var(--tfn);
}
.srow .dot::after{
  content:''; width:8px; height:8px; border-radius:50%; background:var(--blue);
  transform:scale(0); transition:transform var(--tdur) var(--tfn);
}
.srow input:checked + .dot{ border-color:var(--blue); }
.srow input:checked + .dot::after{ transform:scale(1); }
.srow .tx{ font-size:14.5px; font-weight:500; color:var(--ink); }

/* 레인지 슬라이더 */
.rng{ display:flex; flex-direction:column; gap:10px; }
.rng-head{ display:flex; align-items:center; gap:20px; }
.rng-val{ display:flex; align-items:baseline; gap:6px; }
.rng-val .lab{ font-size:10.5px; font-weight:500; color:var(--g500); }
.rng-val .v{ font-size:16px; font-weight:600; line-height:1.7; letter-spacing:-.02em; color:var(--ink); }
.rng-head .tilde{ font-size:14px; color:var(--g500); }
.rng-box{ position:relative; height:18px; }
.rng-track{ position:absolute; top:5px; left:0; right:0; height:8px; border-radius:999px; background:var(--line); }
.rng-fill{ position:absolute; top:5px; height:8px; border-radius:999px; background:var(--blue); }
.rng-i{
  position:absolute; top:0; left:0; width:100%; height:18px; margin:0; padding:0;
  -webkit-appearance:none; appearance:none; background:transparent; pointer-events:none;
}
.rng-i:focus{ outline:none; }
.rng-i::-webkit-slider-thumb{
  -webkit-appearance:none; pointer-events:auto; cursor:pointer;
  width:18px; height:18px; border-radius:50%; background:#fff; border:2px solid var(--blue);
  transition:box-shadow var(--tdur) var(--tfn);
}
.rng-i::-moz-range-thumb{
  pointer-events:auto; cursor:pointer;
  width:18px; height:18px; border-radius:50%; background:#fff; border:2px solid var(--blue); box-shadow:none;
}
.rng-i::-webkit-slider-thumb:hover, .rng-i:focus-visible::-webkit-slider-thumb{ box-shadow:0 0 0 4px var(--tint); }
.rng-i::-moz-range-thumb:hover{ box-shadow:0 0 0 4px var(--tint); }
.rng-ticks{ display:flex; justify-content:space-between; font-size:10.5px; font-weight:500; color:var(--g500); }

.pact{
  display:flex; width:100%; align-items:center; justify-content:space-between;
  border-top:1px solid var(--line); padding-top:12px; padding-bottom:6px; margin-top:18px;
}
.pact .reset{
  display:flex; align-items:center; gap:6px; cursor:pointer; border:0; background:transparent;
  border-radius:999px; padding:4px 11px 4px 7px;
  font-size:14px; font-weight:500; color:var(--g700);
  transition:background-color var(--tdur) var(--tfn), color var(--tdur) var(--tfn);
}
.pact .reset:hover{ background:var(--bg2); color:var(--ink); }
.pact .reset svg{ width:16px; height:16px; }
.pact .apply{
  cursor:pointer; border:0; border-radius:999px; background:var(--ink); color:#fff;
  padding:8px 20px; font-size:14px; font-weight:500;
  transition:background-color var(--tdur) var(--tfn);
}
.pact .apply:hover{ background:var(--blue-d); }

/* ── 본문 ────────────────────────────────────────────────── */
.listwrap{ max-width:1520px; margin:0 auto; padding:30px 32px 110px; }
.rhead{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-bottom:18px; border-bottom:1px solid var(--line); }
.rhead h2{ font-size:20px; font-weight:600; letter-spacing:-.02em; color:var(--ink); }
.rhead h2 b{ color:var(--blue); font-weight:700; }
.rhead .st{ font-size:13.5px; font-weight:500; color:var(--g500); }

/* 카드 그리드 */
.pgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:26px; }
@media(max-width:1000px){ .pgrid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:640px){ .pgrid{ grid-template-columns:1fr; } }

.pcard{ display:flex; flex-direction:column; overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:16px; transition:transform .55s var(--ease), border-color .35s, box-shadow .55s var(--ease); }
.pcard:hover{ transform:translateY(-6px); border-color:var(--tint-b); box-shadow:0 18px 40px -24px rgba(10,28,62,.28); }
.pcard .ph{ position:relative; aspect-ratio:16/9; overflow:hidden; border-bottom:1px solid var(--line); background:var(--bg2); }
.pcard .ph .im{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#EEF2F8,#E4E9F2); transition:transform .7s var(--ease); }
.pcard:hover .ph .im{ transform:scale(1.05); }
.pcard .ph .im::before{ content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(126,138,160,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(126,138,160,.13) 1px,transparent 1px); background-size:28px 28px; }
.pcard .ph .cap{ position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; font-size:12px; font-weight:500; color:var(--g500); }
.pcard .ph .cap svg{ opacity:.55; }
/* ★2026-08-12 — 썸네일이 통째로 안 보이던 것 수정.
   시안은 회색 자리표시(.cap)만 있었는데 라이브는 DB 썸네일 <img> 를 넣는다.
   `.im` 이 flex 라서 규칙이 없으면 img 가 0×0 으로 접힌다(육안으론 '이미지 깨짐').
   격자 무늬(::before)는 이미지가 있을 때 위로 비쳐 보이므로 z-index 로 눌러 둔다. */
.pcard .ph .im img{ position:relative; z-index:1; display:block; width:100%; height:100%; object-fit:cover; }
.pbd{ display:flex; flex-direction:column; flex:1; padding:24px 19px 20px; }
.ptop{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.cbdg{ font-size:11.5px; font-weight:600; border-radius:999px; padding:4px 11px; }
/* ★자동화 유형별 색 라벨 — 5종 각각 다른 톤(옅은 배경 + 진한 글씨) */
.cbdg.cat{ color:var(--blue-d); background:var(--tint); border:1px solid var(--tint-b); }
.cbdg.cat[data-k="RPA"]{ color:#1F55C8; background:#E9F1FF; border-color:#C7DCFD; }
.cbdg.cat[data-k="BI"] { color:#0E7566; background:#E3F4F0; border-color:#BBE4DA; }
.cbdg.cat[data-k="AX"] { color:#6535BE; background:#F0E9FB; border-color:#DAC9F4; }
.cbdg.cat[data-k="ERP"]{ color:#9C5B12; background:#FBEFDF; border-color:#F1DAB6; }
.cbdg.cat[data-k="WEB"]{ color:#1A7038; background:#E5F4E9; border-color:#C2E6CD; }
.ptitle{ margin-top:11px; font-size:16.5px; font-weight:600; line-height:1.5; letter-spacing:-.02em; color:var(--ink); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; transition:color .3s; }
.pcard:hover .ptitle{ color:var(--blue-d); }
.pmeta{ display:flex; flex-wrap:wrap; gap:6px; margin-top:11px; }
.pmeta span{ font-size:12px; font-weight:500; color:var(--g700); background:var(--bg2); border-radius:7px; padding:4px 10px; }
.pmts{ display:flex; gap:7px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.pmts .m{ flex:1; text-align:center; }
.pmts .m .l{ font-size:11px; font-weight:500; color:var(--g500); line-height:1.4; }
.pmts .m .v{ margin-top:4px; font-size:15px; font-weight:600; color:var(--g500); }
.pfoot{ margin-top:auto; padding-top:14px; display:flex; align-items:center; justify-content:flex-end; }
.pfoot .go{ position:relative; display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--blue); }
/* GNB 메뉴 밑줄 인디케이터와 같은 규격(scaleX + origin left + .4s var(--ease)) */
.pfoot .go::after{
  content:''; position:absolute; left:0; right:0; bottom:-3px; height:2px;
  background:var(--blue); transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease);
}
.pfoot .go:hover::after{ transform:scaleX(1); }
.pfoot .go .ar{ transition:transform .35s var(--ease); }
.pcard:hover .pfoot .go .ar{ transform:translateX(4px); }

/* 스켈레톤 · 로더 · 빈 결과 */
.sk-card{ border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.sk-th{ aspect-ratio:16/9; background:#EEF2F8; }
.sk-b{ padding:18px; display:flex; flex-direction:column; gap:12px; }
.sk-l{ height:22px; width:70%; border-radius:6px; background:#EEF2F8; }
.sk-s{ height:14px; width:100%; border-radius:6px; background:#EEF2F8; }
.sk-p{ display:flex; gap:8px; }
.sk-p i{ display:block; height:20px; border-radius:999px; background:#EEF2F8; }
.sk-p i:first-child{ width:64px; } .sk-p i:last-child{ width:96px; }
.pulse{ animation:pf-pulse 2s cubic-bezier(.4,0,.6,1) infinite; }
@keyframes pf-pulse{ 50%{ opacity:.5; } }

.loader{ display:none; align-items:center; justify-content:center; gap:10px; padding:34px 0 4px; font-size:13.5px; font-weight:500; color:var(--g500); }
.loader.on{ display:flex; }
.spin{ width:17px; height:17px; border:2px solid var(--line); border-top-color:var(--blue); border-radius:50%; animation:spin .75s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.endnote{ display:none; padding:34px 0 4px; text-align:center; font-size:13px; font-weight:500; color:var(--g500); }
.endnote.on{ display:block; }
.empty{ display:none; padding:70px 24px; text-align:center; border:1px solid var(--line); border-radius:16px; background:var(--bg2); margin-top:26px; }
.empty.on{ display:block; }
.empty h3{ font-size:18px; font-weight:600; color:var(--ink); }
.empty p{ margin-top:10px; font-size:14.5px; line-height:1.7; color:var(--g700); }
.empty .btn{ margin-top:22px; }
#sentinel{ height:16px; }
#pfNoscript{ display:flex; flex-direction:column; gap:2px; margin-top:26px; }
#pfNoscript a{ font-size:14.5px; line-height:1.7; color:var(--g700); padding:8px 0; border-bottom:1px solid var(--line); }

/* ── 하단 CTA 밴드 ───────────────────────────────────────── */
.cta{
  position:relative; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:24px; width:100%; overflow:hidden; border-radius:16px; padding:52px 56px; margin-top:64px;
  background:linear-gradient(135deg,#EAF2FF 0%,#C6DCFE 50%,#EAF2FF 100%);
  background-size:200% 200%; animation:gradient-shift 6s ease infinite;
}
@keyframes gradient-shift{ 0%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } 100%{ background-position:0% 50%; } }
.cta .eb{ font-size:15.5px; font-weight:600; line-height:1.7; letter-spacing:-.02em; color:var(--blue-d); }
.cta h2{ margin-top:8px; font-size:clamp(24px,2.6vw,32px); font-weight:700; line-height:1.44; letter-spacing:-.03em; color:var(--ink); }
.cta .go{
  display:inline-flex; align-items:center; gap:8px; border-radius:999px; background:var(--ink); color:#fff;
  padding:13px 24px; font-size:16px; font-weight:500; letter-spacing:-.02em;
  transition:background-color var(--tdur) var(--tfn), transform .3s var(--ease);
}
.cta .go:hover{ background:var(--blue-d); transform:translateY(-2px); }

/* ── 하단 롤링 카피 바 ───────────────────────────────────── */
.bbar{
  position:fixed; left:50%; bottom:22px; z-index:85;
  display:flex; align-items:center; gap:16px;
  padding:10px 10px 10px 22px; border-radius:999px;
  background:rgba(10,25,48,.92); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 18px 40px -18px rgba(10,25,48,.7);
  opacity:0; transform:translate(-50%,18px); pointer-events:none;
  transition:opacity 400ms ease, transform 450ms var(--ease);
  max-width:calc(100vw - 32px);
}
.bbar.show{ opacity:1; transform:translate(-50%,0); pointer-events:auto; }
@media(max-width:640px){ .bbar{ display:none; } }
.bbar-lines{ position:relative; overflow:hidden; height:22px; }
.bbar-measure{ display:block; visibility:hidden; height:0; overflow:hidden; font-size:14.5px; font-weight:500; white-space:nowrap; }
.bbar-line{ position:absolute; inset:0; display:flex; align-items:center; font-size:14.5px; font-weight:500; color:#fff; white-space:nowrap; }
@keyframes bbarIn{ from{ transform:translateY(110%); opacity:0; } to{ transform:translateY(0); opacity:1; } }
@keyframes bbarOut{ from{ transform:translateY(0); opacity:1; } to{ transform:translateY(-110%); opacity:0; } }
.bbar-line.in{ animation:bbarIn 450ms var(--ease) both; }
.bbar-line.out{ animation:bbarOut 450ms var(--ease) both; }
.bbar-cta{
  display:inline-flex; align-items:center; gap:7px; flex-shrink:0;
  padding:9px 18px; border-radius:999px; background:var(--blue); color:#fff;
  font-size:13.5px; font-weight:600;
  transition:transform 250ms var(--ease), box-shadow 250ms var(--ease), background-color 250ms var(--ease);
}
.bbar-cta:hover{ transform:translateY(-2px); background:var(--blue-d); box-shadow:0 12px 28px -10px rgba(46,111,242,.6); }
.bbar-arrow{ animation:bbarArrow 1.5s ease-in-out infinite; }
@keyframes bbarArrow{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(5px); } }

/* ── 리빌 ────────────────────────────────────────────────── */
.rv{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.rv.in{ opacity:1; transform:none; }

/* ── 반응형 ──────────────────────────────────────────────── */
@media(max-width:900px){
  .fbar .in{ padding:12px 20px 14px; }
  .fb-row{ flex-direction:column; align-items:stretch; gap:10px; }
  .tabs{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
  .tabs::-webkit-scrollbar{ display:none; }
  .sortwrap{ padding-bottom:0; align-self:flex-end; }
  .listwrap{ padding:24px 20px 90px; }
  .panel{ left:0; right:auto; }
  .panel.r{ left:auto; right:0; }
  .panel-ind{ min-width:0; width:calc(100vw - 44px); }
  .cbcols{ gap:12px; }
  .cbcol{ width:auto; flex:1; }
  .cta{ padding:32px 26px; }
}

@media(prefers-reduced-motion:reduce){
  .rv{ opacity:1 !important; transform:none !important; transition:none !important; }
  .pcard,.pcard .ph .im,.chip-btn,.tab,.pfoot .go .ar,.pfoot .go::after,.rng-i::-webkit-slider-thumb,.cta .go{ transition:none !important; }
  .pcard:hover{ transform:none; }
  .pcard:hover .ph .im{ transform:none; }
  .spin,.pulse,.cta,.bbar-line,.bbar-arrow,.bbar,.pdot::before,.pdot::after{ animation:none !important; }
}

.rv{ opacity:1 !important; transform:none !important; }