/* 첫 화면 성공사례 = 본 홈페이지 'Case Results' 슬라이드와 똑같이 (2026-10-27 신동우 변호사 지시)
   "이런 메인페이지 성공사례를 성범죄와 사기피해, 이혼가사 사건도 똑같이 만들어줘"
   본 홈페이지 dist\css\style.css 의 .main .case-section · .case-item-list 규칙(561~604행)과 build\mcase.css(빨간 결과 박스 오른쪽 아래 수평)를
   그대로 옮기고, 센터 다른 칸과 섞이지 않게 모든 규칙을 #cases.case-section 안으로 좁혔다. 홈에서만 불러온다(build.py build_home).
   센터 sub.css 가 h1~h4 굵기를 inherit 로, b 를 700 으로 두므로 본 홈페이지 기본값(h2 bold, b 600)을 여기서 직접 적었다. */
@font-face{font-family:'Paperlogy';font-weight:600;font-style:normal;font-display:swap;src:url('https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy-6SemiBold.woff2') format('woff2')}
@font-face{font-family:'Paperlogy';font-weight:700;font-style:normal;font-display:swap;src:url('https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy-7Bold.woff2') format('woff2')}

#cases.case-section{ padding: 100px 0; position: relative; overflow: hidden; background-image: url('/img/case-section/background.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center; background-color: #1b2238;
    font-family: 'Pretendard Variable', Pretendard, sans-serif; font-size: 16px; letter-spacing: -0.04em; color: #222; scroll-margin-top: var(--hd); }
#cases.case-section .inner{ width: 1200px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#cases.case-section .mo-br{ display: none; }
#cases.case-section .main-box-title{ text-align: center; margin: 0 auto 15px auto; display: inline-block; font-weight: 700; padding: 8px 26px; border-radius: 100px; background-color: rgba(255,255,255,.1); color: #fff; }
#cases.case-section .main-title{ font-size: 46px; font-family: 'Paperlogy', 'Pretendard Variable', Pretendard, sans-serif; font-weight: 700; line-height: 1.25em; text-align: center; color: #fff; }
#cases.case-section .main-title b{ font-weight: 600; }
#cases.case-section .main-content{ text-align: center; word-break: keep-all; line-height: 1.5em; font-weight: 600; font-size: 20px; color: #fff; margin: 10px 0; }

#cases.case-section .slide-wrap{ margin-top: 40px; width: 100%; }
#cases.case-section .slide-wrap .swiper{ overflow: unset !important; }

#cases.case-section .case-item-list .item{ box-shadow: 4px 9px 11px 0 rgba(0, 0, 0, 0.15); position: relative; background-color: #fff; border-radius: 4px; }
#cases.case-section .case-item-list .item .icon-div{ display: flex; align-items: center; justify-content: center; background-color: #283149; width: 55px; height: 55px; position: absolute; left: 0; top: -22px; }
#cases.case-section .case-item-list .item .icon-div .icon{ width: 30px; height: auto; }
#cases.case-section .case-item-list .item .img-div{ position: relative; display: flex; align-items: center; justify-content: center; padding: 33px 0 0 0; }
#cases.case-section .case-item-list .item .img-div .real{ aspect-ratio: 182/258; margin: 0 auto; border: 1px solid #E4E4E4; width: 182px; background-size: cover; background-repeat: no-repeat; background-position: center; }
/* 빨간 결과 박스: 본 홈페이지 mcase.css 와 같게 오른쪽 아래 수평·작게, 결과 문구 길이에 맞춰 가로로 늘어난다 */
#cases.case-section .case-item-list .item .img-div .label{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.5em; font-weight: 900; text-align: center; color: #fff; position: absolute;
    background-image: url('/img/case-section/label.png'); background-repeat: no-repeat; background-position: center; background-size: 100% 100%;
    transform: none; top: auto; left: auto; right: 14px; bottom: 14px; width: auto; min-width: 153px; max-width: calc(100% - 28px); aspect-ratio: auto; font-size: 13px; padding: 10px 18px; }
#cases.case-section .case-item-list .item .content-div{ margin-top: 10px; padding: 20px 26px; border-top: 1px solid #D9D9D9; }
#cases.case-section .case-item-list .item .content-div .title{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 20px; font-weight: 600; }
#cases.case-section .case-item-list .item .content-div .content{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; word-break: break-word; margin-top: 5px; color: #7f7f7f; line-height: 1.5em; }
#cases.case-section .case-item-list .item .content-div .more{ display: inline-block; margin-top: 10px; border-bottom: 1px solid #283149; color: #283149; }
/* 본 홈페이지에는 없는 '성공사례 전체 보기' 글자 링크 (센터 사례 목록으로 가는 길을 남김) */
#cases.case-section .cs-all{ margin-top: 34px; font-size: 15.5px; font-weight: 700; color: #fff; border-bottom: 1px solid rgba(255,255,255,.6); padding-bottom: 2px; }
/* Swiper 를 못 받으면(CDN 실패) 카드를 옆으로 밀어 볼 수 있게 */
#cases.case-section .swiper:not(.swiper-initialized) .swiper-wrapper{ overflow-x: auto; gap: 20px; }
#cases.case-section .swiper:not(.swiper-initialized) .swiper-slide{ width: 320px; flex-shrink: 0; }

@media screen and (max-width: 1250px) {
    #cases.case-section .inner{ width: 100%; padding: 0 2vw; }
    #cases.case-section .main-title{ font-size: 26px; }
    #cases.case-section .main-content{ font-size: 16px; }
    #cases.case-section .case-item-list .item .content-div .title{ font-size: 18px; }
    #cases.case-section .case-item-list .item .content-div .content{ font-size: 16px; }
    #cases.case-section .case-item-list .item .content-div .more{ font-size: 16px; }
}
@media screen and (max-width: 950px) {
    #cases.case-section .main-box-title{ font-size: 14px; padding: 5px 10px; }
}
@media screen and (max-width: 650px) {
    #cases.case-section{ padding: 50px 0; }
    #cases.case-section .inner{ padding: 0 4vw; }
    #cases.case-section .main-title{ font-size: 24px; }
    #cases.case-section .mo-br{ display: inline-block; }
    #cases.case-section .main-content{ font-weight: 500; }
    #cases.case-section .case-item-list .item .img-div{ padding-top: 20px; }
    #cases.case-section .case-item-list .item .img-div .real{ width: 40vw; }
    #cases.case-section .case-item-list .item .img-div .label{ right: 8px; bottom: 8px; min-width: 110px; max-width: calc(100% - 16px); font-size: 11px; padding: 7px 12px; }
    #cases.case-section .case-item-list .item .content-div{ padding: 15px 15px 20px 15px; }
    #cases.case-section .case-item-list .item .content-div .title{ font-size: 16px; }
    #cases.case-section .case-item-list .item .content-div .content{ font-size: 14px; }
    #cases.case-section .case-item-list .item .content-div .more{ font-size: 14px; }
    #cases.case-section .case-item-list .item .icon-div{ top: -5px; width: 30px; height: 30px; }
    #cases.case-section .case-item-list .item .icon-div .icon{ width: 15px; }
}