/* ==========================================================================
   증명사진 서비스 (Identity Photo) 페이지 커스텀 디자인
   ========================================================================== */

/* --- [1] 상단 헤더 가이드 섹션 --- */
.id-guide-header .sub-title {
    display: block;
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    color: #888;
}

.id-guide-header h2 {
    font-size: 3rem;
    font-weight: 900;
    margin-bottom: 0.5em;
    color: #111;
}

.id-guide-header p {
    font-size: 1.4rem;
    line-height: 1.8;
    color: #555;
}

/* --- [2] 카드 그리드 레이아웃 (PC 기본) --- */
.id-grid-horiz {
    display: flex;
    flex-direction: column;
    gap: 4em;
    margin-top: 5rem;
}

.id-card-horiz {
    display: flex;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid #eee;
    box-shadow: 0 10px 40px rgba(0,0,0,0.05);
    transition: all 0.3s ease; /* 호버 효과를 위한 트랜지션 */
}

.id-card-horiz.highlight {
    border: 3px solid #111;
}

/* 이미지 영역 및 태그 */
.id-thumb-guide {
    flex: 0 0 420px; /* 이미지 영역 확장 */
    position: relative;
    background: #f9f9f9;
}

.id-thumb-guide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.id-thumb-guide .tag {
    position: absolute;
    top: 25px;
    left: 25px;
    background: #111;
    color: #fff;
    padding: 8px 18px;
    font-size: 1rem;
    font-weight: 900;
    border-radius: 5px;
    z-index: 10;
}

/* 특정 태그 컬러 (여권 Official 등) */
.tag-official { background: #e74c3c !important; }

/* --- [3] 카드 내부 상세 설명 --- */
.id-details-horiz {
    flex: 1;
    padding: 4rem; /* 여백 확장 */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.id-details-horiz h3 {
    font-size: 2.5rem; /* 제목 크기 대폭 확대 */
    font-weight: 900;
    margin-bottom: 1rem;
    color: #000;
}

.id-details-horiz h3 small {
    font-size: 0.5em;
    color: #888;
    margin-left: 15px;
    font-weight: 500;
}

.usage-list-horiz {
    list-style: none;
    padding: 2rem 0;
    margin: 1.5rem 0;
    border-top: 2px solid #f5f5f5;
}

.usage-list-horiz li {
    font-size: 1.35rem; /* 리스트 글씨 확대 */
    margin-bottom: 0.8rem;
    color: #333;
    position: relative;
    padding-left: 1.5rem;
    line-height: 1.6;
}

.usage-list-horiz li::before {
    content: '·';
    position: absolute;
    left: 0;
    font-weight: 900;
}

.specs-horiz {
    font-size: 1.2rem;
    color: #777;
    margin-bottom: 2rem;
}

/* 강조 텍스트 (주민등록증 경고 등) */
.alert-text {
    color: #e74c3c !important;
    font-weight: 700;
}

.price-tag-horiz {
    margin-top: auto;
    font-size: 1.6rem; /* 가격 글씨 확대 */
    font-weight: 900;
    color: #000;
    padding-top: 2rem;
    border-top: 2px solid #f5f5f5;
}

.price-val {
    float: right;
    color: #e74c3c; /* 가격 강조 */
    letter-spacing: 0.05em;
}

/* ==========================================================================
   [4] 반응형 (980px 이하 모바일/태블릿)
   ========================================================================== */
@media screen and (max-width: 980px) {
    /* 오면서 맞추는 현상 차단 */
    .id-card-horiz, .id-thumb-guide .tag, #footer {
        transition: none !important;
    }

    .id-guide-header h2 { font-size: 2rem !important; }
    .id-guide-header p { font-size: 1.1rem !important; }

    .id-grid-horiz {
        gap: 2.5rem;
        margin-top: 2.5rem;
    }

    .id-card-horiz { 
        flex-direction: column; 
        width: 100%;
        max-width: 440px; /* 카드 너비 최적화 */
        margin: 0 auto;
    }

    .id-thumb-guide { 
        flex: none; 
        width: 100%;
        aspect-ratio: 3 / 3.8; /* 사진 비율 고정 */
    }

    /* [중요] 증명사진 가이드 글씨 크기 및 태그 조정 */
    .id-thumb-guide .tag {
        top: 15px !important;
        left: 15px !important;
        padding: 4px 12px !important;
        font-size: 0.85rem !important; /* 가이드 글씨 크기 축소 */
        font-weight: 700 !important;
    }

    .id-details-horiz { 
        padding: 1.8rem 1.5rem; /* 내부 여백 조절 */
        text-align: center;
    }

    /* 제목 및 부가설명 크기 축소 */
    .id-details-horiz h3 { 
        font-size: 1.45rem !important; 
        margin-bottom: 0.4rem !important;
        line-height: 1.3;
    }

    .id-details-horiz h3 small {
        display: block !important;
        margin: 4px 0 0 0 !important;
        font-size: 0.75rem !important;
        color: #888;
    }

    /* 리스트 및 설명글 조절 */
    .usage-list-horiz {
        display: block;
        text-align: left;
        padding: 1.2rem 0;
        margin: 1.2rem 0;
        border-top: 1px solid #eee;
    }

    .usage-list-horiz li { 
        font-size: 0.95rem !important; 
        margin-bottom: 0.5rem !important;
        padding-left: 1.2rem !important;
    }

    .specs-horiz {
        font-size: 0.85rem !important;
        margin-bottom: 1.2rem !important;
        color: #888;
    }

    /* 가격 정보 */
    .price-tag-horiz {
        font-size: 1.15rem !important;
        border-top: 1px solid #eee;
        padding-top: 1.2rem !important;
    }

    .price-val { 
        display: inline-block;
        margin-top: 5px;
        font-size: 1.35rem !important;
        float: none !important;
        font-weight: 900;
        color: #e74c3c !important;
    }
}

/* [5] 아주 작은 폰 (480px 이하) */
@media screen and (max-width: 480px) {
    .id-card-horiz {
        max-width: 95%; 
    }
    .id-thumb-guide .tag {
        font-size: 0.75rem !important;
        padding: 3px 10px !important;
    }
    .id-details-horiz h3 {
        font-size: 1.3rem !important;
    }
    .usage-list-horiz li {
        font-size: 0.9rem !important;
    }
}








/* --- 프로필 서비스 섹션 (공통 레이아웃 적용) --- */
.profile-service .profile-main-grid {
    display: flex;
    gap: 4rem;
    align-items: flex-start;
    margin-top: 3rem;
}

/* 이미지 영역 */
.profile-service .profile-visual {
    flex: 1.3;
}

.profile-service .profile-visual img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

/* 콘텐츠 영역 */
.profile-service .profile-info-content {
    flex: 1;
}

.profile-service .info-header h3 {
    font-size: 2.4rem;
    font-weight: 900;
    color: #000;
    margin-bottom: 1rem;
}

.profile-service .info-header .desc {
    font-size: 1.25rem;
    line-height: 1.7;
    color: #444;
}

/* 상세 리스트 */
.profile-service .service-details {
    margin: 2.5rem 0;
    border-top: 1px solid #eee;
    padding-top: 2.5rem;
}

.profile-service .detail-item {
    margin-bottom: 2rem;
}

.profile-service .detail-item .label {
    font-weight: 900;
    color: #111;
    font-size: 1.1rem;
    display: block;
    margin-bottom: 0.5rem;
}

.profile-service .package-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 1.2rem;
    line-height: 2;
}

.profile-service .detail-notice {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 10px;
    border-left: 4px solid #ddd;
}

.profile-service .detail-notice p {
    font-size: 1rem;
    color: #666;
    margin: 0;
    line-height: 1.6;
}

/* 가격 영역 */
.profile-service .price-section {
    margin-bottom: 3rem;
}

.profile-service .price-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-bottom: 3px solid #111;
    padding-bottom: 15px;
}

.profile-service .price-main .name {
    font-size: 1.7rem;
    font-weight: 900;
}

.profile-service .price-main .val {
    font-size: 2rem;
    font-weight: 900;
    color: #e74c3c;
}

.profile-service .price-sub {
    display: flex;
    justify-content: space-between;
    padding: 20px 0;
    font-size: 1.2rem;
    color: #555;
}

/* 예약 버튼 */
.profile-service .button.large {
    width: 100%;
    text-align: center;
    font-size: 1.4rem;
    height: 4.5rem;
    line-height: 4.5rem;
    font-weight: 900;
}

/* --- 모바일 반응형 (980px 이하) --- */
@media screen and (max-width: 980px) {
    /* 오면서 맞추는 현상(transition) 즉시 차단 */
    .profile-service *, .profile-service .info-header h3 {
        transition: none !important;
    }

    .profile-service .profile-main-grid {
        flex-direction: column;
        gap: 2rem; /* 간격 살짝 축소 */
    }
    
    .profile-service .profile-visual {
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
    }

    /* [텍스트 반응형 조정] */
    .profile-service .info-header {
        text-align: center; /* 모바일은 중앙 정렬이 깔끔함 */
    }

    .profile-service .info-header h3 {
        font-size: 1.8rem !important; /* 2.4rem -> 1.8rem 축소 */
        margin-bottom: 0.8rem;
    }

    .profile-service .info-header .desc {
        font-size: 1.05rem !important; /* 1.25rem -> 1.05rem 축소 */
        line-height: 1.6;
    }

    /* 상세 리스트 및 공지사항 */
    .profile-service .service-details {
        margin: 1.5rem 0;
        padding-top: 1.5rem;
    }

    .profile-service .detail-item .label {
        font-size: 1rem !important;
        text-align: center;
    }

    .profile-service .package-list {
        font-size: 0.95rem !important; /* 리스트 글씨 축소 */
        text-align: center;
        line-height: 1.8;
    }

    .profile-service .detail-notice {
        padding: 1.2rem;
    }

    .profile-service .detail-notice p {
        font-size: 0.9rem !important;
        text-align: center;
    }

    /* 가격 영역 (모바일에서 너무 크지 않게) */
    .profile-service .price-main .name {
        font-size: 1.3rem !important; /* 1.7rem -> 1.3rem */
    }

    .profile-service .price-main .val {
        font-size: 1.6rem !important; /* 2rem -> 1.6rem */
    }

    .profile-service .price-sub {
        font-size: 1rem !important;
        padding: 15px 0;
    }

    /* 예약 버튼 높이 조절 */
    .profile-service .button.large {
        font-size: 1.2rem !important;
        height: 3.8rem;
        line-height: 3.8rem;
    }
}

/* 480px 이하 초소형 기기 */
@media screen and (max-width: 480px) {
    .profile-service .info-header h3 {
        font-size: 1.6rem !important;
    }
    .profile-service .price-main .val {
        font-size: 1.4rem !important;
    }
}






/* --- 우정/커플/가족 서비스 섹션 (수직 정렬 최적화) --- */
.memory-service .memory-main-grid {
    display: flex;
    gap: 4rem;
    align-items: stretch; /* 자식 요소들의 높이를 최대한 맞춤 */
    margin-top: 2rem;
}

/* 이미지 영역: 3:4 세로형 비율 유지 */
.memory-service .memory-visual {
    flex: 1.3;
}

.memory-service .memory-visual img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    display: block; /* 하단 미세 공백 제거 */
}

/* 콘텐츠 영역: 내부 간격 최적화 */
.memory-service .memory-info-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* 이미지 높이에 맞춰 버튼을 아래로 배치하거나 간격 분산 */
}

.memory-service .info-header h3 {
    font-size: 2.2rem; /* 2.4에서 미세 축소 */
    font-weight: 900;
    color: #000;
    margin-bottom: 0.8rem;
}

.memory-service .info-header .desc {
    font-size: 1.15rem; /* 1.25에서 미세 축소 */
    line-height: 1.6;
    color: #444;
}

/* 상세 리스트 간격 축소 */
.memory-service .service-details {
    margin: 1.5rem 0; /* 2.5에서 축소 */
    border-top: 1px solid #eee;
    padding-top: 1.5rem;
}

.memory-service .detail-item {
    margin-bottom: 1.2rem; /* 2.0에서 축소 */
}

.memory-service .detail-item .label {
    font-weight: 900;
    color: #111;
    font-size: 1rem;
    display: block;
    margin-bottom: 0.3rem;
}

.memory-service .package-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 1.1rem; /* 1.2에서 축소 */
    line-height: 1.8; /* 2에서 축소 */
}

.memory-service .detail-notice {
    background: #f8f9fa;
    padding: 1rem 1.2rem;
    border-radius: 10px;
    border-left: 4px solid #ddd;
    margin-top: 1rem;
}

.memory-service .detail-notice p {
    font-size: 0.95rem;
    color: #666;
    margin: 0;
    line-height: 1.5;
}

/* 가격 영역 간격 축소 */
.memory-service .price-section {
    margin-bottom: 1.5rem; /* 3.0에서 축소 */
}

.memory-service .price-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-bottom: 2px solid #111;
    padding-bottom: 10px;
}

.memory-service .price-main .name {
    font-size: 1.5rem;
    font-weight: 900;
}

.memory-service .price-main .val {
    font-size: 1.8rem;
    font-weight: 900;
    color: #e74c3c;
}

.memory-service .price-sub {
    display: flex;
    justify-content: space-between;
    padding: 12px 0; /* 20에서 축소 */
    font-size: 1.1rem;
    color: #555;
}

/* 버튼 크기 조정 */
.memory-service .button.large {
    width: 100%;
    text-align: center;
    font-size: 1.3rem;
    height: 4rem; /* 4.5에서 축소 */
    line-height: 4rem;
    font-weight: 900;
}

/* --- 모바일 반응형 --- */
@media screen and (max-width: 980px) {
    .memory-service .memory-main-grid {
        flex-direction: column;
        gap: 2rem;
    }
    
    .memory-service .memory-visual {
        width: 100%;
        max-width: 450px;
        margin: 0 auto;
    }
}










        /* 서비스 카드 스타일 유지 */
        .service-container {
            display: flex;
            flex-direction: column;
            gap: 2em;
            margin-top: 2em;
            max-width: 1200px;
            margin-left: auto;
            margin-right: auto;
        }

        /* 최상단 소개 문구 */
        .top-description {
            max-width: 1200px;
            margin: 2em auto 0;
            padding: 0 1.5em;
            font-size: 1.05em;
            color: #444;
            line-height: 1.6;
        }

        /* 중앙 정렬 타이틀 섹션 */
        .extra-intro-center {
            text-align: center;
            margin: 3em 0 2em;
        }
        .extra-intro-center h2 {
            font-size: 2.2em;
            font-weight: 700;
            margin-bottom: 0.2em;
            color: #000;
        }
        .extra-intro-center .sub-label {
            display: block;
            font-size: 1.2em;
            color: #666;
            margin-bottom: 1.2em;
        }
        .extra-intro-center p {
            font-size: 1.05em;
            line-height: 1.7;
            color: #555;
        }

        .service-section {
            display: flex;
            gap: 1.5em;
            background: #f7f7f7;
            padding: 2em;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.05);
            align-items: center;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .service-section:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 16px rgba(0,0,0,0.1);
        }
        .service-image {
            flex: 0 0 180px;
            max-width: 180px;
            height: 180px;
            object-fit: cover;
            border-radius: 8px;
        }
        .service-info {
            flex: 1;
        }
        .service-info h3 {
            font-size: 1.3em;
            margin-bottom: 0.5em;
            color: #333;
        }
        .service-info p {
            font-size: 1em;
            line-height: 1.6em;
            color: #555;
            margin: 0.2em 0;
        }
        .service-price-value {
            font-weight: 700;
            font-size: 1.3em;
            color: #000;
            margin-top: 0.5em;
        }

        @media screen and (max-width: 768px) {
            .service-section {
                flex-direction: column;
                text-align: center;
            }
            .service-image {
                margin-bottom: 0.8em;
            }
        }