/* 촬영 팁 섹션 전체 */
/* 컨테이너 가로폭 제한으로 문장이 너무 길어지는 것 방지 */
.container.small {
    max-width: 1000px;
    margin: 0 auto;
}

.tips-list-wrap {
    margin-top: 4em;
    border-top: 2px solid #111;
}

/* 행 단위 레이아웃: 가로로 길게 배치하여 줄바꿈 최소화 */
.tip-row {
    display: flex;
    padding: 3.5em 0;
    border-bottom: 1px solid #f0f0f0;
    align-items: flex-start;
}

/* 좌측 타이틀 영역 */
.tip-title {
    flex: 0 0 280px; /* 제목 영역 폭 확보 */
    padding-right: 30px;
}

.tip-title .num {
    display: block;
    font-size: 0.8em;
    font-weight: 800;
    color: #bbb;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
}

.tip-title h3 {
    font-size: 1.5em;
    font-weight: 900;
    color: #111;
    margin: 0;
    letter-spacing: 0.05em;
}

.tip-title .ko {
    display: block;
    font-size: 0.95em;
    color: #888;
    margin-top: 6px;
    font-weight: 500;
}

/* 우측 본문 리스트 */
.tip-desc {
    flex: 1;
}

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

.list li {
    font-size: 1.05em;
    color: #444;
    line-height: 1.7;
    margin-bottom: 1em;
    position: relative;
    padding-left: 1.5em;
    /* [핵심] 단어 단위 줄바꿈으로 지저분한 엔터 방지 */
    word-break: keep-all; 
}

/* 불렛 포인트: 미니멀한 라인 */
.list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.8em;
    width: 8px;
    height: 1px;
    background-color: #999;
}

.list li:last-child { margin-bottom: 0; }

.list li strong {
    color: #000;
    font-weight: 600;
}

/* 주의사항 (연한 갈색 톤으로 세련되게) */
.list li.notice {
    color: #8e7e7e;
    font-size: 0.95em;
}

/* 모바일 대응 */
@media screen and (max-width: 840px) {
    .tip-row {
        flex-direction: column;
        padding: 2.5em 1em;
    }
    .tip-title {
        flex: none;
        margin-bottom: 1.5em;
    }
    .list li {
        font-size: 0.95em;
    }
}













        /* [Process 전용 스타일] */
        .process-header {
            max-width: 1200px;
            margin: 0 auto 3em auto;
            padding: 2em 1.5em;
            background: #fdfdfd;
            border-radius: 12px;
            border: 1px solid #eee;
            text-align: center;
        }
        .process-header h3 { font-size: 1.6em; color: #000; margin-bottom: 1em; }
        .process-header ul { list-style: none; padding: 0; display: inline-block; text-align: left; }
        .process-header ul li { 
            position: relative; 
            padding-left: 1.5em; 
            margin-bottom: 0.8em; 
            color: #555; 
            font-size: 1.05em;
        }
        .process-header ul li::before { 
            content: '✓'; 
            position: absolute; 
            left: 0; 
            color: #4477bb; 
            font-weight: bold; 
        }

        /* 프로세스 단계별 카드 */
        .process-container {
            max-width: 900px; /* 흐름을 위해 폭을 팁 페이지보다 좁게 설정 */
            margin: 0 auto;
            padding: 0 1.5em;
        }
        .process-step {
            display: flex;
            gap: 2.5em;
            margin-bottom: 3em;
            position: relative;
        }
        /* 단계 연결 선 */
        .process-step:not(:last-child)::after {
            content: '';
            position: absolute;
            left: 35px;
            top: 80px;
            width: 2px;
            height: calc(100% - 40px);
            background: #eee;
        }
        .step-number {
            flex: 0 0 70px;
            height: 70px;
            background: #fff;
            border: 3px solid #4477bb;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.4em;
            font-weight: 800;
            color: #4477bb;
            z-index: 2;
        }
        .step-content {
            flex: 1;
            background: #fbfbfb;
            padding: 2em;
            border-radius: 12px;
            border: 1px solid #eee;
            transition: all 0.3s ease;
        }
        .step-content:hover {
            transform: translateX(10px);
            border-color: #4477bb;
            background: #fff;
        }
        .step-content h4 { font-size: 1.3em; color: #000; margin-bottom: 0.8em; }
        .step-content p { color: #555; line-height: 1.7; margin-bottom: 0.5em; word-break: keep-all; }
        .step-content .highlight { color: #4477bb; font-weight: 600; }

        @media screen and (max-width: 768px) {
            .process-step { flex-direction: column; gap: 1em; }
            .process-step:not(:last-child)::after { display: none; }
            .step-number { width: 50px; height: 50px; font-size: 1.1em; flex: none; }
            .step-content { padding: 1.5em; }
        }