/* ========================
   IMAGE BEFORE/AFTER LABEL (surgery.html)
   ======================== */
.img-label {
    position: absolute;
    bottom: 18px;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: 8px;
    letter-spacing: -0.3px;
    white-space: nowrap;
}

.img-label--left  { left: 25%; }
.img-label--right { left: 75%; }

@media (max-width: 480px) {
    .img-label {
        font-size: 0.72rem;
        padding: 4px 10px;
        bottom: 10px;
    }
}

/* ========================
   GUIDE CARD (surgery.html)
   ======================== */
.guide-card {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 16px;
    padding: 24px;
    box-shadow: var(--shadow-soft);
}

.guide-card-icon {
    font-size: 1.5rem;
    color: var(--color-point);
    margin-top: 2px;
    flex-shrink: 0;
}

.guide-card h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-main);
    margin-bottom: 8px;
}

.guide-card p {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.7;
    margin: 0;
}

/* ========================
   SYSTEM DIAGRAM SECTION (surgery.html)
   ======================== */
.system-diagram-section {
    padding: 20px 5% 40px;
    background-color: transparent;
    text-align: center;
    overflow: hidden;
}

.diagram-wrapper {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.diagram-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
}

.bottom-row {
    margin-top: 20px;
}

.circle-item {
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background-color: #fff;
    border: 2px dotted #d5d5d5;
    padding: 8px;
    transition: var(--transition);
    z-index: 1;
    position: relative;
}

.circle-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-soft);
    border: 1px solid rgba(0, 0, 0, 0.02);
}

.circle-inner i {
    font-size: 2.5rem;
    color: var(--color-point);
    margin-bottom: 15px;
    transition: transform 0.3s ease;
}

.circle-inner p {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-main);
    line-height: 1.4;
    margin: 0;
}

.plus-badge {
    width: 32px;
    height: 32px;
    background-color: var(--color-point);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    z-index: 2;
    box-shadow: 0 4px 10px rgba(197, 164, 126, 0.4);
}

.circle-item:hover,
.circle-item.active {
    border-color: var(--color-point);
    border-style: solid;
    transform: translateY(-5px);
}

.circle-item:hover .circle-inner i,
.circle-item.active .circle-inner i {
    transform: scale(1.1);
}

/* ========================
   ZIGZAG SCHEDULE LAYOUT (surgery.html)
   ======================== */
.zigzag-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto;
}

.zigzag-row {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;
}

/* plus-badge PC 수직 정렬 (160px circle 기준) */
.zigzag-row .zigzag-plus {
    margin-top: 64px; /* (160px circle - 32px badge) / 2 */
    flex-shrink: 0;
}

/* ========================
   RESPONSIVE - SURGERY
   ======================== */

@media (max-width: 768px) {
    /* 수술 전/후 이미지 레이블 축소 */
    .img-label {
        font-size: 0.62rem;
        padding: 3px 7px;
        bottom: 6px;
        border-radius: 5px;
    }

    /* 전이개 낭종 수술방법: 2×2 */
    .surgery-steps-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* 경부종양 주의사항: 1열 */
    .caution-grid {
        grid-template-columns: 1fr !important;
    }

    .caution-grid li[style*="grid-column: span 2"] {
        grid-column: span 1 !important;
    }

    /* 장점 process-grid: 2열 유지, 아이템 소형화 */
    .process-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .process-item {
        padding: 18px 12px;
    }

    .process-item i[style*="font-size: 2.5rem"] {
        font-size: 1.8rem !important;
        margin-bottom: 12px !important;
    }

    .process-item h4 {
        font-size: 0.9rem;
    }

    /* 가이드 그리드 1열 */
    .guide-grid {
        grid-template-columns: 1fr !important;
    }

    /* guide-card: 아이콘 위 → 타이틀 → 설명 세로 배치 */
    .guide-card {
        flex-direction: column;
        gap: 8px;
    }

    .guide-card-icon {
        margin-top: 0;
        font-size: 1.3rem;
    }

    .guide-card h4 {
        font-size: 0.95rem;
    }

    .guide-card p {
        font-size: 0.85rem;
    }

    /* span 2 해제 (1열이므로) */
    .guide-grid .guide-card[style*="grid-column: span 2"] {
        grid-column: span 1 !important;
    }

    .diagram-row {
        flex-direction: column;
        gap: 20px;
    }

    .bottom-row {
        margin-top: 20px;
    }

    .circle-item {
        width: 160px;
        height: 160px;
    }

    .circle-inner i {
        font-size: 2rem;
        margin-bottom: 10px;
    }

    .circle-inner p {
        font-size: 0.95rem;
    }

    .plus-badge {
        margin: 10px 0;
    }

    /* 모바일 <br> 숨김 - surgery 본문 텍스트 */
    .intro-text p br,
    .sub-hero-content p br {
        display: none;
    }

    /* 프로세스 카드 - 모바일에서도 가로 한 줄 유지 */
    .surgery-process .process-wrapper {
        flex-direction: row;
        align-items: flex-start;
        gap: 4px;
        padding: 0 2%;
    }

    /* 지그재그 레이아웃 모바일 */
    .zigzag-wrapper {
        gap: 20px;
        width: 100%;
    }

    .zigzag-row {
        gap: 4px;
        padding: 0 2%;
        justify-content: center;
    }

    /* zigzag circle-box 모바일 축소 (장점 섹션) */
    .zigzag-wrapper .circle-box {
        width: 86px;
        height: 86px;
        font-size: 1.6rem;
        margin-bottom: 12px;
    }

    .zigzag-wrapper .circle-box::before {
        top: -3px;
        left: -3px;
        right: -3px;
        bottom: -3px;
    }

    /* plus-badge 모바일 크기 + 수직 정렬 (86px circle 기준) */
    .zigzag-row .zigzag-plus {
        width: 22px;
        height: 22px;
        font-size: 0.65rem;
        margin-top: 32px; /* (86px circle - 22px badge) / 2 */
        flex-shrink: 0;
    }

    .zigzag-wrapper .text-box h4 {
        font-size: 0.9rem;
        margin-bottom: 4px;
    }

    .surgery-process .process-card {
        flex: 1;
        min-width: 0;
    }

    .surgery-process .circle-box {
        width: 72px;
        height: 72px;
        font-size: 1.5rem;
        margin-bottom: 10px;
    }

    .surgery-process .circle-box::before {
        top: -3px;
        left: -3px;
        right: -3px;
        bottom: -3px;
    }

    .surgery-process .step-num {
        width: 20px;
        height: 20px;
        font-size: 0.65rem;
        top: 2px;
        right: 2px;
    }

    .surgery-process .text-box h4 {
        font-size: 0.82rem;
        margin-bottom: 4px;
        word-break: keep-all;
    }

    .surgery-process .connector {
        padding-top: 36px;
        font-size: 0.9rem;
        transform: none;
        margin: 0;
        flex-shrink: 0;
    }
}