@charset "utf-8";
/* =========================================================
   인증 유형 (type.html) — type.css
   로드 순서: style.css → sub.css → type.css
   서브비주얼·2차메뉴·라벨/제목·담당자 띠(.tg-contact)는 sub.css 공통
   ========================================================= */
.svi { display: block; flex: none; fill: none; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }

/* ---------- 1. 세 가지 인증 : 3단 카드 ---------- */
.tp-types { padding: 120px 0 140px; background: #F4F6FA; }
.tp-head { text-align: center; }
.tp-head > p:last-child { margin-top: 20px; font-size: 17px; line-height: 1.85; color: var(--sub); }
.tp-head strong { color: var(--navy); font-weight: 700; }

.tp-cards { margin-top: 64px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.tp-card { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 44px 36px 36px; background: #fff; border: 1px solid #DCE3EE; border-radius: 22px; transition: transform .3s var(--ease), box-shadow .3s, border-color .3s; }
.tp-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, #2454C6, #6A9BFF); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.tp-card:hover { transform: translateY(-4px); border-color: #C9D6EA; box-shadow: 0 18px 40px rgba(16, 38, 76, .08); }
.tp-card:hover::before { transform: scaleX(1); }
.tp-card__top { display: flex; justify-content: space-between; align-items: flex-start; }
.tp-card__ico { display: inline-flex; align-items: center; justify-content: center; width: 88px; height: 88px; border-radius: 50%; background: #EEF3FC; }
.tp-card__ico .svi { width: 52px; height: 52px; stroke-width: 2.6; }
.tp-card__no { font-size: 15px; font-weight: 800; letter-spacing: .1em; color: #8FA6D6; }
.tp-card__title { margin-top: 28px; font-size: 26px; font-weight: 800; letter-spacing: -.03em; color: var(--navy); }
.tp-card__sum { margin-top: 12px; font-size: 17px; font-weight: 700; line-height: 1.6; color: var(--ink); }
.tp-card__desc { margin-top: 10px; font-size: 15px; line-height: 1.8; color: var(--sub); }
.tp-card__area { margin-top: 26px; padding: 22px 24px; border-radius: 14px; background: #F6F8FC; }
.tp-card__area strong { display: block; font-size: 14px; font-weight: 800; color: var(--navy); }
.tp-card__area ul { margin-top: 12px; display: grid; gap: 9px; }
.tp-card__area li { position: relative; padding-left: 26px; font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--ink-2); }
.tp-card__area li::before { content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: #2454C6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.3l2.6 2.6L13 6.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
.tp-card__fit { margin-top: auto; padding-top: 24px; font-size: 15px; line-height: 1.75; color: var(--body); }
.tp-card__fit::before { content: ""; display: block; height: 1px; margin-bottom: 20px; background: #E5EAF2; }

/* AI+ 3종 색상 + 코너 리본 (색상 변수·리본은 sub.css 공통) */
.tp-card[class*="tp-card--"] { overflow: visible; padding-top: 76px; border: 2px solid var(--rb); background: linear-gradient(160deg, #fff 0%, #fff 55%, var(--rb-tint) 100%); }
.tp-card[class*="tp-card--"]::before { display: none; }
.tp-card[class*="tp-card--"]:hover { border-color: var(--rb); box-shadow: 0 20px 44px rgba(16, 38, 76, .1); }
.tp-card[class*="tp-card--"] .tp-card__ico { background: var(--rb-tint2); box-shadow: 0 0 0 7px var(--rb-tint); }
.tp-card--standard .tp-card__ico .svi { filter: hue-rotate(-62deg) saturate(.85); }
.tp-card[class*="tp-card--"] .tp-card__no { color: var(--rb); opacity: .55; }
.tp-card[class*="tp-card--"] .tp-card__title { color: var(--rb-dark); }
.tp-card[class*="tp-card--"] .tp-card__area { background: #fff; border: 1px solid var(--rb-line); }
.tp-card[class*="tp-card--"] .tp-card__area strong { color: var(--rb); }
.tp-card[class*="tp-card--"] .tp-card__area li::before { background-color: var(--rb); }
.tp-card[class*="tp-card--"] .tp-card__fit::before { background: var(--rb-line); }

/* ---------- 2. 한눈에 보기 : 다크 3단 (about '무엇을 평가하나요?' 와 동일 톤) ---------- */
.tp-sum { position: relative; overflow: hidden; padding: 120px 0 130px; color: #fff; background: #071B3E; }
.tp-sum::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 72px 72px; background-position: center top;
  -webkit-mask: radial-gradient(ellipse 70% 80% at 70% 20%, #000 10%, transparent 75%);
          mask: radial-gradient(ellipse 70% 80% at 70% 20%, #000 10%, transparent 75%); }
.tp-sum::after { content: ""; position: absolute; right: -260px; top: -320px; width: 900px; height: 900px; border-radius: 50%; pointer-events: none;
  background: repeating-radial-gradient(circle, transparent 0 89px, rgba(111,168,255,.12) 89px 90px);
  -webkit-mask: radial-gradient(circle, #000 30%, transparent 70%);
          mask: radial-gradient(circle, #000 30%, transparent 70%); }
.tp-sum > .inner { position: relative; z-index: 1; }
.tp-sum .a2-h2 { margin-top: 0; color: #fff; }
.tp-sum__cols { margin-top: 48px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; border: 1px solid rgba(255,255,255,.2); border-radius: 22px; background: rgba(255,255,255,.02); }
.tp-sum__cols li { position: relative; padding: 44px 40px 48px; transition: background .35s; }
.tp-sum__cols li + li { border-left: 1px solid rgba(255,255,255,.2); }
.tp-sum__cols li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, #3D8BFF, #8FB8FF); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.tp-sum__cols li:hover { background: rgba(255,255,255,.04); }
.tp-sum__cols li:hover::before { transform: scaleX(1); }
.tp-sum__ico { display: inline-flex; align-items: center; justify-content: center; width: 80px; height: 80px; border-radius: 50%; background: #fff; }
.tp-sum__ico .svi { width: 48px; height: 48px; stroke-width: 2.8; }
.tp-sum__no { display: block; margin-top: 28px; font-size: 14px; font-weight: 800; letter-spacing: .1em; color: #6FA8FF; }
.tp-sum__cols h3 { margin-top: 6px; font-size: 28px; font-weight: 800; letter-spacing: -.03em; }
.tp-sum__cols p { margin-top: 12px; font-size: 17px; line-height: 1.7; color: #B9C6DA; }

/* ---------- 3. 상담 안내 + 담당자 ---------- */
.tp-check { padding: 110px 0 130px; }
.tp-check__msg { text-align: center; font-size: 19px; line-height: 1.8; color: var(--body); }
.tp-check__msg strong { color: var(--navy); font-weight: 800; }
.tp-check .tg-contact { margin-top: 40px; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1280px) {
  .tp-card { padding: 40px 28px 32px; }
}

@media (max-width: 1024px) {
  .tp-types { padding: 88px 0 96px; }
  .tp-cards { grid-template-columns: 1fr; gap: 16px; max-width: 720px; margin-left: auto; margin-right: auto; }
  .tp-sum { padding: 88px 0 96px; }
  .tp-sum__cols { grid-template-columns: 1fr; }
  .tp-sum__cols li { display: grid; grid-template-columns: 80px 1fr; column-gap: 24px; align-items: center; padding: 32px; }
  .tp-sum__cols li + li { border-left: 0; border-top: 1px solid rgba(255,255,255,.2); }
  .tp-sum__ico { grid-row: span 3; }
  .tp-sum__no { margin-top: 0; }
  .tp-check { padding: 88px 0 96px; }
}

@media (max-width: 768px) {
  .tp-types { padding: 64px 0 72px; }
  .tp-head { text-align: left; }
  .tp-head > p:last-child { font-size: 15px; }
  .tp-cards { margin-top: 36px; }
  .tp-card { padding: 28px 22px 26px; border-radius: 18px; }
  .tp-card[class*="tp-card--"] { padding-top: 60px; }
  .tp-card[class*="tp-card--"] .tp-card__top { justify-content: flex-end; align-items: center; gap: 14px; }
  .tp-card[class*="tp-card--"] .tp-card__no { order: -1; }
  .tp-card__ico { width: 68px; height: 68px; }
  .tp-card__ico .svi { width: 40px; height: 40px; stroke-width: 2.8; }
  .tp-card__title { margin-top: 20px; font-size: 22px; }
  .tp-card__sum { font-size: 16px; }
  .tp-card__desc, .tp-card__fit { font-size: 14px; }
  .tp-card__area { margin-top: 20px; padding: 18px; }
  .tp-card__area li { font-size: 14px; }
  .tp-sum { padding: 64px 0 72px; }
  .tp-sum__cols { margin-top: 28px; border-radius: 18px; }
  .tp-sum__cols li { grid-template-columns: 56px 1fr; column-gap: 16px; padding: 24px 20px; }
  .tp-sum__ico { width: 56px; height: 56px; }
  .tp-sum__ico .svi { width: 34px; height: 34px; }
  .tp-sum__cols h3 { font-size: 21px; }
  .tp-sum__cols p { margin-top: 6px; font-size: 14px; }
  .tp-check { padding: 64px 0 72px; }
  .tp-check__msg { text-align: left; font-size: 15px; }
  .tp-check .tg-contact { margin-top: 24px; }
}