/* =========================================================
   1. HERO (1920 × 550) — 가운데 정렬
========================================================= */
.hero {
    background: url('../images/head-banner.jpg') center center / cover no-repeat;
}

/* =========================================================
   3. REASONS — 좌텍스트 + 우카드5개 (참고이미지 2컬럼)
========================================================= */
.reasons-section {
    background: linear-gradient(160deg, #fdfbf5 0%, #f6f2e9 100%);
}
.reasons-layout {
    display: grid;
    grid-template-columns: 38% 58%;
    gap: 0 60px;
    align-items: center;
    max-width: var(--content-width);
    margin: 0 auto;
}

/* ── 좌: 텍스트 블록 ── */
.reasons-left {
    padding-right: 10px;
}
.reasons-clinic {
    font-size: 17px;
    font-weight: 400;
    color: #888;
    margin-bottom: 8px;
    letter-spacing: 0.3px;
}
.reasons-title {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.8px;
    line-height: 1.35;
    margin-bottom: 24px;
}
.reasons-desc {
    font-size: 14px;
    font-weight: 300;
    color: #666;
    line-height: 2.0;
}
.reasons-desc strong {
    font-weight: 700;
    color: var(--black);
}

/* ── 우: 카드 스택 ── */
.reasons-right {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.reason-feat-card {
    display: flex;
    align-items: center;
    gap: 20px;
    background: #ffffff;
    border-radius: 12px;
    padding: 20px 24px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    transition: transform .3s ease, box-shadow .3s ease;
}
.reason-feat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.10);
}
/* 아이콘: 골드 그라데이션 원형 */
.reason-icon {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #d4aa6a 0%, #f0dca0 50%, #c9a05a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 3px 10px rgba(200,163,90,0.30);
}
.reason-icon i {
    color: #ffffff;
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    -webkit-text-fill-color: #ffffff;
}
/* 텍스트 */
.reason-text h3 {
    font-size: 15px;
    font-weight: 700;
    color: #222222;
    margin-bottom: 3px;
    letter-spacing: -0.2px;
    line-height: 1.3;
}
.reason-text p {
    font-size: 12px;
    font-weight: 300;
    color: #999999;
    line-height: 1.4;
}

/* =========================================================
   5. CORRECTION TYPES — 이미지만, 설명 없음
========================================================= */
.hashtags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 48px;
}
.hashtags .tag-pill {
    background: var(--black);
    color: var(--white);
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.2px;
}
.hashtags .tag-pill .gold-text { font-weight: 700; }

.types-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.type-card {
    background: var(--white);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(0,0,0,0.07);
    transition: transform .3s ease, box-shadow .3s ease;
}
.type-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 22px 48px rgba(0,0,0,0.12);
}
.type-card .thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}
.type-card .thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}
.type-card:hover .thumb img { transform: scale(1.05); }

/* =========================================================
   6. RECOMMEND CASES — 3×2 그리드 (참고이미지 스타일)
========================================================= */
.cases-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto;
}
/* 5개이므로 마지막 행 가운데 정렬을 위해 */
.cases-grid .case-card:nth-child(4) { grid-column: 1; }
.cases-grid .case-card:nth-child(5) { grid-column: 2; }

.case-card {
    background: var(--white);
    border-radius: 10px;
    padding: 44px 24px 36px;
    text-align: center;
    box-shadow: 0 6px 20px rgba(0,0,0,0.06);
    transition: transform .3s ease, box-shadow .3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}
.case-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.1);
}
.case-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--gold-deep);
    margin-bottom: 20px;
    display: block;
}
.case-icon,
.case-icon-flat {
    width: 68px; height: 68px;
    border-radius: 50%;
    background: var(--black);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    font-size: 26px;
}
/* 아이콘 컬러 #e5cd92 (단색, 그라디언트 X) */
.case-icon i,
.case-icon-flat i {
    color: #c9a661;
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    -webkit-text-fill-color: #c9a661;
}
.case-text {
    font-size: 15px;
    font-weight: 500;
    color: #222;
    line-height: 1.55;
    text-align: center;
    letter-spacing: -0.2px;
}

/* =========================================================
   7. PROMISE — 3+1컬럼 카드 (참고이미지: 양심진료 스타일)
   숫자 우상단, 아이콘 라이트써클, 제목 볼드, 골드구분선, 설명
========================================================= */
.promise-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    max-width: 1100px;
    margin: 0 auto;
}
.promise-card {
    background: var(--white);
    border-radius: 12px;
    padding: 48px 28px 44px;
    text-align: center;
    box-shadow: 0 6px 22px rgba(0,0,0,0.06);
    position: relative;
    transition: transform .3s ease, box-shadow .3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.promise-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.1);
}
.promise-num {
    position: absolute;
    top: 20px; right: 22px;
    font-size: 13px;
    font-weight: 600;
    color: var(--gold-deep);
    letter-spacing: 1px;
    opacity: 0.9;
}
.promise-icon {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: var(--light-gray);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    font-size: 28px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.07);
}
/* 아이콘 컬러 #e5cd92 (단색) */
.promise-icon i {
    color: #c9a661;
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    -webkit-text-fill-color: #c9a661;
}
.promise-title {
    font-size: 21px;
    font-weight: 700;
    color: var(--black);
    letter-spacing: -0.5px;
    margin-bottom: 14px;
}
.promise-divider {
    width: 28px; height: 2px;
    background: #c9a661;
    margin: 0 auto 16px;
    border-radius: 2px;
}
.promise-desc {
    font-size: 14px;
    font-weight: 300;
    color: var(--gray-mid);
    line-height: 1.75;
    text-align: center;
}
/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 1100px) {
    .promise-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
    /* reasons: 1컬럼으로 전환 */
    .reasons-layout {
        grid-template-columns: 1fr;
        gap: 40px 0;
    }
    .reasons-left { padding-right: 0; }
    .reasons-title { font-size: 24px; }
    .types-grid { grid-template-columns: repeat(2, 1fr); }
    .cases-grid { grid-template-columns: repeat(2, 1fr); }
    .cases-grid .case-card:nth-child(4) { grid-column: auto; }
    .cases-grid .case-card:nth-child(5) { grid-column: auto; }
}

@media (max-width: 768px) {
    .types-grid    { grid-template-columns: 1fr; }
    .cases-grid    { grid-template-columns: 1fr 1fr; }
    .promise-cards { grid-template-columns: 1fr 1fr; }
    .reasons-title { font-size: 20px; }
    .reason-feat-card { padding: 16px 18px; gap: 14px; }
    .reason-icon { width: 42px; height: 42px; font-size: 16px; }
    .reason-text h3 { font-size: 14px; }
    .reason-text p  { font-size: 12px; }
}

@media (max-width: 480px) {
    .cases-grid  { grid-template-columns: 1fr; }
    .promise-cards { grid-template-columns: 1fr; }
    .hashtags .tag-pill { font-size: 13px; padding: 8px 14px; }
}