/* PC_SUB DEDICATED FILE */
/* =========================================================
   37_type.css (PC)
   - Type page styles
   - 59A layout base for 59B / 59C / 84B / 84C
   - 84A excluded from title animation
   ========================================================= */

.type-page{
  padding: 12px 0 46px;
  background: #fff;
}

.type-inner{
  width: min(1320px, calc(100% - 64px));
  margin: 0 auto;
}

/* =========================
   HEAD
   ========================= */

.type-head{
  margin: 18px 0 34px;
  text-align: center;
  opacity: 0;
  transform: translateY(-26px);
}

.type-page:not(.type-page--84a) .type-head{
  animation: typeHeadFadeDown .95s cubic-bezier(.22,.61,.36,1) both;
}

.type-head-title{
  margin: 0;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: -0.04em;
  color: #444;
  white-space: nowrap;
}

.type-head-title-main{
  color: #444;
  font-weight: 400;
}

.type-head-title-accent{
  color: #c89459;
  font-weight: 550;
}

@keyframes typeHeadFadeDown{
  from{
    opacity: 0;
    transform: translateY(-26px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================
   LAYOUT
   ========================= */

.type-layout{
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

/* =========================
   LEFT
   ========================= */

.type-side{
  min-width: 0;
}

.type-summary-card{
  padding: 22px 20px 20px;
  color: #fff;
  text-align: center;
}

/* 타입별 박스 배경색 */
.type-page--59a .type-summary-card{ background: #8d4b52; } /* 59A */
.type-page--59b .type-summary-card{ background: #5d77bf; } /* 59B */
.type-page--59c .type-summary-card{ background: #8fc45a; } /* 59C */
.type-page--84b .type-summary-card{ background: #b67abb; } /* 84B */
.type-page--84c .type-summary-card{ background: #69c7d7; } /* 84C */

/* 84A는 현재 작업 제외 */
.type-page--84a .type-summary-card{ background: #e4b749; }

.type-summary-title{
  margin: 0 0 10px;
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
}

.type-summary-households{
  margin: 0;
  padding: 10px 0 8px;
  border-top: 2px solid rgba(255,255,255,.78);
  border-bottom: 2px solid rgba(255,255,255,.78);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.03em;
}

.type-summary-rate{
  margin: 10px 0 16px;
  padding: 8px 10px;
  background: #fff;
  color: #222;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
}

.type-summary-spec{
  margin: 0;
}

.type-summary-row{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
}

.type-summary-row + .type-summary-row{
  margin-top: 4px;
}

.type-summary-row dt,
.type-summary-row dd{
  margin: 0;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.03em;
}

.type-summary-row dt{
  text-align: left;
  font-weight: 500;
}

.type-summary-row dd{
  text-align: right;
  font-weight: 500;
}

.type-feature{
  margin-top: 24px;
}

.type-feature-title{
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: #444;
  display: flex;
  align-items: center;
  gap: 8px;
}

.type-feature-title::before{
  content: "";
  width: 14px;
  height: 14px;
  background: #97978d;
  flex: 0 0 14px;
}

.type-feature-list{
  list-style: none;
  margin: 0;
  padding: 0;
}

.type-feature-list li{
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: flex-start;
}

.type-feature-list li + li{
  margin-top: 10px;
}

.type-feature-num{
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #21396e;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
}

.type-feature-text{
  margin: 2px 0 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.03em;
  color: #555;
  word-break: keep-all;
}

.type-feature-text strong{
  color: #e53935;
  font-weight: 700;
}

/* =========================
   RIGHT
   ========================= */

.type-visual{
  min-width: 0;
}

.type-combined-figure{
  margin: 0;
  background: #fff;
  overflow: hidden;
}

.type-combined-figure img{
  display: block;
  width: 100%;
  height: auto;
  max-height: 740px;
  object-fit: contain;
  object-position: top center;
  margin: 0 auto;
}

/* =========================
   Reduced motion
   ========================= */

@media (prefers-reduced-motion: reduce){
  .type-head{
    opacity: 1;
    transform: none;
    animation: none !important;
  }

  .type-page *{
    animation: none !important;
    transition: none !important;
  }
}