@charset "utf-8";
/* ==========================================================================
   연결점 · list.css — 소개기회 목록 / 프로그램 상세 / 랜딩
   ========================================================================== */

/* --------------------------------------------------------------------------
   페이지 헤더
   -------------------------------------------------------------------------- */
.phead{
  background:linear-gradient(180deg,#FBFCFF 0%,#F4F7FE 100%);
  border-bottom:1px solid var(--gray-200);padding-block:var(--s9) var(--s8);
}
.phead h1{margin-top:var(--s3)}
.phead .t-lead{margin-top:var(--s4);max-width:680px}
.crumb{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--gray-500);flex-wrap:wrap}
.crumb a:hover{color:var(--cobalt)}
.crumb span[aria-current]{color:var(--gray-700);font-weight:600}
.crumb i{font-style:normal;color:var(--gray-300)}

/* 탐색 축 전환 탭 */
.axis{display:flex;gap:6px;margin-top:var(--s7);flex-wrap:wrap}
.axis a{
  height:40px;padding:0 16px;border-radius:var(--r-full);display:inline-flex;align-items:center;
  font-size:14px;font-weight:600;color:var(--gray-600);background:#fff;border:1px solid var(--gray-300);
  transition:all .15s ease;
}
.axis a:hover{border-color:var(--cobalt);color:var(--cobalt)}
.axis a[aria-current="page"]{background:var(--navy);border-color:var(--navy);color:#fff}

/* --------------------------------------------------------------------------
   목록 레이아웃
   -------------------------------------------------------------------------- */
.listwrap{display:grid;grid-template-columns:252px minmax(0,1fr);gap:var(--s8);align-items:start}

.filters{position:sticky;top:calc(var(--header-h) + 20px);max-height:calc(100vh - var(--header-h) - 48px);
  overflow-y:auto;padding-right:4px}
.filters::-webkit-scrollbar{width:5px}
.filters::-webkit-scrollbar-thumb{background:var(--gray-300);border-radius:3px}
.fgroup{padding-block:var(--s5);border-bottom:1px solid var(--gray-200)}
.fgroup:first-child{padding-top:0}
.fgroup > h3{font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:12px}
.fopt{display:flex;align-items:center;gap:9px;padding:5px 0;cursor:pointer;font-size:14px;color:var(--gray-700)}
.fopt:hover{color:var(--ink)}
.fopt input{
  appearance:none;width:17px;height:17px;border:1.5px solid var(--gray-300);border-radius:5px;
  flex:none;cursor:pointer;transition:all .14s ease;position:relative;
}
.fopt input:checked{background:var(--cobalt);border-color:var(--cobalt)}
.fopt input:checked::after{
  content:"";position:absolute;left:5px;top:1.5px;width:4px;height:9px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(43deg);
}
.fopt input:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px}
.fopt span{flex:1;min-width:0}
.fopt em{font-style:normal;font-size:12px;color:var(--gray-400);font-variant-numeric:tabular-nums}

.filters__head{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px;
  border-bottom:1px solid var(--gray-200)}
.filters__head b{font-size:15px;font-weight:700}
.filters__reset{font-size:13px;color:var(--gray-500);font-weight:500}
.filters__reset:hover{color:var(--cobalt)}

/* 결과 헤더 */
.rhead{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-bottom:var(--s5);border-bottom:1px solid var(--gray-200);margin-bottom:var(--s6)}
.rhead__count{font-size:14.5px;color:var(--gray-600)}
.rhead__count b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.rhead__tools{display:flex;align-items:center;gap:8px}

/* 적용된 필터 */
.applied{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:var(--s5)}
.applied button{
  display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 8px 0 11px;
  border-radius:var(--r-full);background:var(--cobalt-050);color:var(--cobalt-700);
  font-size:12.5px;font-weight:600;border:1px solid var(--cobalt-100);
}
.applied button:hover{background:var(--cobalt-100)}
.applied button svg{width:13px;height:13px}

/* 결과 그리드 */
.results{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
@media (max-width:1400px){.results{grid-template-columns:repeat(2,minmax(0,1fr))}}

.empty{
  grid-column:1/-1;text-align:center;padding:var(--s11) var(--s5);
  background:var(--gray-050);border:1px dashed var(--gray-300);border-radius:var(--r-lg);
}
.empty h3{font-size:18px;margin-bottom:8px}
.empty p{font-size:14px;color:var(--gray-600);max-width:420px;margin:0 auto}

.loadmore{display:flex;justify-content:center;margin-top:var(--s8)}

/* 모바일 필터 시트 */
.fsheet-btn{display:none}
@media (max-width:1024px){
  .listwrap{grid-template-columns:1fr;gap:var(--s5)}
  .filters{
    position:fixed;inset:auto 0 0 0;z-index:70;background:#fff;max-height:82vh;
    border-radius:var(--r-xl) var(--r-xl) 0 0;padding:20px 20px 88px;top:auto;
    box-shadow:0 -8px 40px rgba(15,23,42,.22);transform:translateY(100%);
    transition:transform .26s cubic-bezier(.4,0,.2,1);visibility:hidden;
  }
  .filters.is-open{transform:none;visibility:visible}
  .fsheet-btn{display:inline-flex}
  .fsheet-apply{
    position:absolute;left:20px;right:20px;bottom:20px;
  }
  .fdim{position:fixed;inset:0;z-index:69;background:rgba(13,13,15,.4);opacity:0;visibility:hidden;
    transition:opacity .2s}
  .fdim.is-open{opacity:1;visibility:visible}
}
@media (max-width:640px){.results{grid-template-columns:1fr}}

/* --------------------------------------------------------------------------
   프로그램 상세
   -------------------------------------------------------------------------- */
.dwrap{display:grid;grid-template-columns:minmax(0,1fr) 344px;gap:var(--s8);align-items:start}
@media (max-width:1024px){.dwrap{grid-template-columns:1fr}}

.dhead{padding-block:var(--s8);border-bottom:1px solid var(--gray-200)}
.dhead__top{display:flex;gap:18px;align-items:flex-start}
.dhead__logo{
  width:60px;height:60px;border-radius:15px;flex:none;display:grid;place-items:center;
  color:#fff;font-size:21px;font-weight:800;letter-spacing:-.04em;
}
.dhead h1{font-size:clamp(23px,3vw,32px);margin-top:6px}
.dhead__brand{font-size:15px;color:var(--gray-600);font-weight:500}

/* 사이드 요약 카드 */
.dside{position:sticky;top:calc(var(--header-h) + 20px);display:flex;flex-direction:column;gap:var(--s4)}
@media (max-width:1024px){.dside{position:static}}
.dsum{border:1px solid var(--gray-200);border-radius:var(--r-lg);overflow:hidden;background:#fff;
  box-shadow:var(--sh-2)}
.dsum__fee{padding:var(--s6);background:linear-gradient(160deg,#FFF6EF,#FFF2E8);border-bottom:1px solid #FFE0CB}
.dsum__fee-label{font-size:12px;font-weight:700;color:var(--orange-700);letter-spacing:.02em}
.dsum__fee-value{font-size:22px;font-weight:800;color:var(--ink);margin-top:6px;line-height:1.35;
  letter-spacing:-.03em}
.dsum__fee-sub{font-size:12.5px;color:var(--gray-600);margin-top:8px}
.dsum__body{padding:var(--s6)}
.dsum__row{display:flex;justify-content:space-between;gap:14px;padding:11px 0;
  border-bottom:1px dashed var(--gray-200);font-size:13.5px}
.dsum__row:last-of-type{border-bottom:0}
.dsum__row dt{color:var(--gray-500);white-space:nowrap}
.dsum__row dd{margin:0;font-weight:600;color:var(--ink);text-align:right}
.dsum__cta{padding:0 var(--s6) var(--s6);display:flex;flex-direction:column;gap:9px}

/* 상세 본문 */
.dsec{padding-block:var(--s8);border-bottom:1px solid var(--gray-200)}
.dsec:last-child{border-bottom:0}
.dsec > h2{font-size:20px;display:flex;align-items:center;gap:10px}
.dsec > h2::before{content:"";width:4px;height:19px;border-radius:2px;background:var(--cobalt);flex:none}
.dsec__body{margin-top:var(--s5)}

.speclist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
@media (max-width:640px){.speclist{grid-template-columns:1fr}}
.spec{padding:var(--s5);background:var(--gray-050);border-radius:var(--r);border:1px solid var(--gray-200)}
.spec dt{font-size:12.5px;color:var(--gray-500);font-weight:600;display:flex;align-items:center;gap:6px}
.spec dd{margin:7px 0 0;font-size:14.5px;color:var(--ink);font-weight:600;line-height:1.55}

/* 수익 시나리오 */
.scen{border:1px solid var(--gray-200);border-radius:var(--r-md);overflow:hidden}
.scen__grid{display:grid;grid-template-columns:repeat(3,1fr)}
.scen__cell{padding:var(--s6);border-right:1px solid var(--gray-200);text-align:center}
.scen__cell:last-child{border-right:0}
.scen__k{font-size:12.5px;color:var(--gray-500);font-weight:600}
.scen__v{font-size:20px;font-weight:800;color:var(--ink);margin-top:6px;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.scen__u{font-size:12px;color:var(--gray-400);margin-top:3px}
.scen__foot{padding:14px 18px;background:var(--gray-050);border-top:1px solid var(--gray-200);
  font-size:12.5px;color:var(--gray-600);line-height:1.6}
@media (max-width:600px){.scen__grid{grid-template-columns:1fr}
  .scen__cell{border-right:0;border-bottom:1px solid var(--gray-200)}}

/* 난이도 게이지 */
.gauge{display:flex;gap:4px;margin-top:8px}
.gauge i{height:6px;flex:1;border-radius:3px;background:var(--gray-200)}
.gauge i.on{background:var(--cobalt)}
.gauge--hard i.on{background:var(--orange)}

/* 진행 안내 */
.flow{counter-reset:f;display:flex;flex-direction:column;gap:2px}
.flow li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:14px;padding:13px 0;
  border-bottom:1px dashed var(--gray-200)}
.flow li:last-child{border-bottom:0}
.flow li::before{
  counter-increment:f;content:counter(f);
  width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:var(--cobalt-050);color:var(--cobalt-700);font-size:12.5px;font-weight:800;
}
.flow b{display:block;font-size:14.5px;color:var(--ink)}
.flow p{font-size:13px;color:var(--gray-600);margin-top:3px;line-height:1.6}

/* 관련 프로그램 */
.related{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
@media (max-width:900px){.related{grid-template-columns:1fr}}

/* --------------------------------------------------------------------------
   랜딩(업종/고객유형/상황) 인트로
   -------------------------------------------------------------------------- */
.lintro{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--s8);align-items:center}
@media (max-width:900px){.lintro{grid-template-columns:1fr}.lintro img{display:none}}

.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
@media (max-width:900px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.tiles{grid-template-columns:1fr}}
.tile{
  display:flex;flex-direction:column;gap:7px;padding:var(--s6);background:#fff;
  border:1px solid var(--gray-200);border-radius:var(--r-md);
  transition:border-color .16s,box-shadow .16s,transform .16s;
}
.tile:hover{border-color:var(--cobalt);box-shadow:var(--sh-2);transform:translateY(-2px)}
.tile__n{font-size:12px;font-weight:700;color:var(--orange);font-variant-numeric:tabular-nums}
.tile__t{font-size:16.5px;font-weight:700;color:var(--ink)}
.tile__d{font-size:13.5px;color:var(--gray-600);line-height:1.6}