/* ===================================================================
   lipoma-case.css
   chijilkorea.co.kr 메인(index.html) box3 아래 삽입된
   <article class="case"> ~ </article> (지방종 사례 뷰어) 전용 스타일.

   - 모든 선택자를 .case 아래로 스코프해서 사이트 전역(header, nav,
     footer, a, ul/li, .row, .inner 등)에 영향을 주지 않도록 했습니다.
   - lipoma 원본 style.css의 .case-box 절대좌표(top:-515px 등)는
     lipoma 자체 페이지 상단 구조(헤더 160px+nav 68px+배너 220px+
     .case padding-top 230px)를 전제로 역산된 값이라 이 페이지에는
     맞지 않았습니다. 실제 people_img_01.png(949×1129) 파일을 픽셀
     단위로 분석해서 갈색 액자 프레임의 정확한 좌표(왼쪽 21.7%,
     위 43.9%, 폭 56.6%, 높이 55.2%)를 구하고, .proc-box 기준
     퍼센트 좌표로 다시 계산했습니다.
   - 버튼(.case-01~16) 좌표도 lipoma 원본 값 대신, 이미지에 실제로
     그려진 점(마커)과 연결선의 끝점을 픽셀 분석해서 새로 계산했습니다.
     점을 공유하는 지방종/피지낭종 쌍(02·14, 09·13, 10·12)은 같은
     좌표를 씁니다.
   - .proc-box에 있던 padding(0 1rem)이 .inner의 퍼센트 좌표 기준폭과
     .people의 실제 렌더 폭을 어긋나게 만드는 원인이어서 제거하고,
     여백은 .case 쪽으로 옮겼습니다.
   - 모바일에서 사진이 버튼 그리드보다 좁아 보이던 문제는
     .case-contents 좌우 패딩을 줄이고 .img-box img를 100%로
     채워서 맞췄습니다.
   - 색상은 lipoma의 브라운(#702a00) 대신 chijilkorea 사이트의
     블루 톤(#0a89d3, hover #0dcaf0)으로 맞췄습니다.
   - jquery-ui.css는 이 페이지에서 쓰는 클래스가 전혀 없어서 포함하지
     않았습니다.
   =================================================================== */

.case {
    padding: 4rem 1rem;
    background-color: #f2efec;
}

/* bootstrap.min.css의 ol,ul{padding-left:2rem} 리셋이 모바일 버튼
   그리드(.mobile-btn ul)에 그대로 적용돼서 왼쪽이 밀리는 걸 무력화 */
.case ul,
.case ol {
    padding-left: 0;
}

.case .art-tit {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -1px;
    text-align: center;
    color: #0a89d3;
    padding: 0 1rem 0.5rem;
}

.case .art-cmt {
    font-size: 1rem;
    font-weight: 400;
    text-align: center;
    color: #495057;
    padding: 0 1rem;
    margin-bottom: 2rem;
}

/* ------------------------------------------------------------------
   데스크톱(1024px 이상): people_img_01.png 안에 그려진 액자 프레임
   자리에 .inner(.case-box)를 퍼센트 좌표로 정확히 겹쳐서 배치.
   .proc-box를 .people과 같은 폭(800px)으로 고정하고 position:relative를
   줘서, .inner의 퍼센트 좌표가 항상 이미지 기준으로 정확히 맞도록 함.
   ------------------------------------------------------------------ */
.case .proc-box {
    width: 800px;
    max-width: 100%;
    margin: 0 auto;
    position: relative;
}

.case .proc-box .mobile-btn {
    display: none;
    padding: 10px;
    box-sizing: border-box;
}

.case .proc-box .people {
    position: relative;
}

.case .proc-box .people img {
    width: 100%;
    display: block;
}

.case .proc-box .people > .case-btn {
    position: absolute;
    min-width: 150px;
    background: #0a89d3;
    color: #fff;
    border: solid 2px #086ba8;
    text-align: center;
    padding: 2px 0 4px;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: -0.5px;
    transition: background-color 0.15s ease-in-out;
}

.case .proc-box .people > .case-btn.radius {
    border-radius: 20px;
}

.case .proc-box .people > .case-btn:hover,
.case .proc-box .people > .case-btn.active {
    background: #0dcaf0;
    border-color: #0aa9c9;
    color: #fff;
}

.case .proc-box .people > .case-btn.dir-left {
    transform: translate(-100%, -50%);
}

.case .proc-box .people > .case-btn.dir-right {
    transform: translate(0, -50%);
}

/* 신체 그림(people_img_01.png, 949×1129) 위 버튼 좌표
   — 이미지에 그려진 점(마커)과 연결선의 실제 끝점을 픽셀 단위로
   분석해서 계산한 값입니다. 점을 공유하는 지방종/피지낭종 쌍
   (02·14, 09·13, 10·12)은 완전히 같은 좌표를 쓰면 하나가 다른
   하나를 완전히 가려서, 둘 다 보이도록 짝의 두 번째 버튼을
   세로로 살짝(3%p) 내려서 배치했습니다. */
.case .proc-box .people > .case-01 { top:14.61%; left:16.12%; }
.case .proc-box .people > .case-02 { top:19.22%; left:7.80%; }
.case .proc-box .people > .case-03 { top:26.48%; left:7.59%; }
.case .proc-box .people > .case-04 { top:34.10%; left:12.01%; }
.case .proc-box .people > .case-05 { top:26.13%; left:38.04%; }
.case .proc-box .people > .case-06 { top:19.75%; left:65.75%; }
.case .proc-box .people > .case-07 { top:38.88%; left:70.18%; }
.case .proc-box .people > .case-08 { top:16.74%; left:89.36%; }
.case .proc-box .people > .case-09 { top:23.47%; left:86.20%; }
.case .proc-box .people > .case-10 { top:43.67%; left:87.04%; }
.case .proc-box .people > .case-11 { top:71.12%; left:85.99%; }
.case .proc-box .people > .case-12 { top:46.67%; left:87.04%; }
.case .proc-box .people > .case-13 { top:26.47%; left:86.20%; }
.case .proc-box .people > .case-14 { top:22.22%; left:7.80%; }
.case .proc-box .people > .case-15 { top:13.20%; left:69.86%; }
.case .proc-box .people > .case-16 { top:13.29%; left:89.36%; }

/* people_img_01.png 안에 그려진 액자 프레임 위치
   (949×1129 원본 이미지 픽셀 분석 실측치: x 206~743, y 496~1119)
   — 프레임 선 자체가 가려지지 않도록 사방으로 살짝 축소해서 배치 */
.case .proc-box .inner {
    position: absolute;
    top: 44.9%;
    left: 22.7%;
    width: 54.6%;
    height: 53.2%;
    padding: 0 15px;
    box-sizing: border-box;
}

.case .proc-box .case-box {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background: #fff;
}

/* ------------------------------------------------------------------
   case_XX.html 조각(fetch로 불러오는 내용) 안쪽 스타일
   ------------------------------------------------------------------ */
.case .case-contents {
    padding: 1.25rem 1.25rem 2rem;
}

.case .case-contents .title {
    position: relative;
    border-bottom: solid 1px #0a89d3;
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
}

.case .case-contents .title p {
    font-size: 1.3rem;
    color: #0a89d3;
    font-weight: 700;
    margin: 0;
}

.case .case-contents .title .number {
    display: inline-block;
    position: absolute;
    right: 0;
    top: -1.1rem;
    color: #000;
    font-weight: 500;
    font-size: 1rem;
}

.case .case-contents .title .star {
    display: inline-block;
    position: absolute;
    right: 0;
    top: 0.6rem;
}

.case .case-contents .title .star img {
    width: 1rem;
}

.case .case-contents .case-con {
    font-size: 0.95rem;
    color: #495057;
    font-weight: 400;
    line-height: 1.7;
}

.case .case-contents .case-con .cmt {
    color: #000;
    font-size: 1.1rem;
    font-weight: 600;
    padding: 0.5rem 0;
}

.case .case-contents .case-con .img-box {
    width: 100%;
    padding: 1rem 0;
    text-align: center;
}

.case .case-contents .case-con .img-box img {
    width: 90%;
    border-radius: 4px;
}

.case .case-contents .case-con hr {
    border-top: 1px dashed #ced4da;
}

/* ------------------------------------------------------------------
   모바일: 신체 그림 대신 버튼 목록으로 전환 (1024px 미만)
   ------------------------------------------------------------------ */
@media (max-width: 1024px) {
    .case {
        padding: 2.5rem 0;
    }

    .case .proc-box {
        width: 100%;
        position: static;
    }

    .case .proc-box .people {
        display: none;
    }

    .case .proc-box .mobile-btn {
        display: block;
    }

    .case .proc-box .mobile-btn ul {
        display: flex;
        flex-wrap: wrap;
        gap: 2px;
        margin-bottom: 2px;
    }

    .case .proc-box .mobile-btn ul.st-3 li,
    .case .proc-box .mobile-btn ul.st-1 li {
        flex: 1 1 0;
    }

    .case .proc-box .mobile-btn a.case-mo-btn {
        display: block;
        padding: 0.6rem 0;
        text-align: center;
        background: #0a89d3;
        color: #fff;
        font-size: 0.8rem;
        letter-spacing: -0.5px;
        transition: background-color 0.15s ease-in-out;
    }

    .case .proc-box .mobile-btn a.case-mo-btn:hover,
    .case .proc-box .mobile-btn a.case-mo-btn.active {
        background: #0dcaf0;
    }

    .case .proc-box .inner {
        position: static;
        width: 100%;
        height: auto;
    }

    .case .proc-box .case-box {
        height: 480px;
        border: solid 4px #0a89d3;
    }

    /* 사진이 버튼 그리드와 같은 폭으로 꽉 차도록 (데스크톱 프레임 안에서는
       .case-contents에 여백이 있어도 되지만, 모바일에서는 버튼 폭과
       맞춰야 하므로 좌우 패딩을 줄이고 이미지를 100%로 채움) */
    .case .case-contents {
        padding: 1rem 0.5rem 1.5rem;
    }

    .case .case-contents .case-con .img-box img {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .case .art-tit {
        font-size: 1.35rem;
    }

    .case .art-cmt {
        font-size: 0.9rem;
    }

    .case .case-contents .case-con .img-box img {
        width: 100%;
    }
}