/* yard.css의 스타일 변수 및 기본 레이아웃 상속 */
@import url('yard.css');

/* =========================================
   1. 헤더 커스터마이징 (투명 처리)
   ========================================= */
.transparent-header {
    background: transparent !important;
    box-shadow: none !important;
    position: absolute; /* 문서 흐름에서 제거하여 이미지 위에 겹침 */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100; /* 이미지보다 위에 오도록 */
}

.transparent-header .page-title {
    display: none; /* 메인 타이틀이 히로에 있으므로 헤더 타이틀 숨김 (선택사항) */
}

.transparent-header .back-btn {
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5); /* 사진 위에서도 잘 보이게 그림자 */
    background: rgba(0,0,0,0.2); /* 뒤로가기 버튼 배경 살짝 */
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* =========================================
   2. 히로 섹션 (확장형)
   ========================================= */
.hero-section {
    position: relative;
    height: 60vh; /* 화면 높이의 60% 차지 */
    min-height: 400px;
    /* 배경 이미지: 실제 이미지가 없으면 yard_hero.png가 보일 수 있으니 경로 확인 필요 */
    background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.6) 100%), 
                url('../images/profile/img_portfolio_hero.jpg') center/cover no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* 텍스트를 하단으로 */
    align-items: center;
    text-align: center;
    margin-bottom: -20px; /* 아래 섹션과 살짝 겹치게 하거나 간격 좁힘 */
}

.hero-overlay {
    padding: 0 20px 50px 20px; /* 하단 여백 확보 */
    width: 100%;
}

.hero-subtitle {
    font-size: 0.8rem;
    letter-spacing: 2px;
    color: rgba(255,255,255,0.9);
    margin-bottom: 10px;
    text-transform: uppercase;
    font-weight: 600;
}

.hero-section h2 {
    font-size: 1.6rem;
    line-height: 1.4;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
    margin: 0;
}

/* =========================================
   3. 포트폴리오 그리드 (Masonry 스타일)
   ========================================= */
.portfolio-section {
    padding-top: 40px;
    background: #fff;
}

.portfolio-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2열 배치 */
    gap: 4px; /* 사진 사이 간격을 좁게 하여 앨범 느낌 */
    padding-bottom: 20px;
}

.portfolio-item {
    position: relative;
    overflow: hidden;
    background: #eee;
}

.portfolio-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

/* 꽉 차는 이미지 (1열 전체 사용) */
.portfolio-item.full-width {
    grid-column: 1 / -1; /* 처음부터 끝까지 */
    aspect-ratio: 4 / 5; /* 세로형 비율 유지 (인스타 비율) */
}

/* 작은 이미지 비율 */
.portfolio-item:not(.full-width) {
    aspect-ratio: 1 / 1.2; /* 약간 세로로 긴 직사각형 */
}

/* 이미지 캡션 (선택적) */
.img-caption {
    position: absolute;
    bottom: 15px;
    left: 15px;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 500;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
    opacity: 0.9;
}

/* 더보기 버튼 영역 */
.more-btn-area {
    text-align: center;
    padding: 20px 0 40px;
}

.instagram-btn {
    display: inline-block;
    padding: 10px 24px;
    border: 1px solid #ddd;
    border-radius: 30px;
    font-size: 0.85rem;
    color: #555;
    text-decoration: none;
    transition: all 0.2s;
}

.instagram-btn i {
    margin-right: 6px;
    color: #E1306C; /* 인스타 컬러 */
}

/* =========================================
   4. 상세 리스트 스타일 (기존 개선)
   ========================================= */
.detail-list-box {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed #eee;
}

.detail-list-box ul {
    list-style: none;
    padding: 0;
}

.detail-list-box li {
    font-size: 0.85rem;
    color: var(--text-gray);
    margin-bottom: 8px;
    position: relative;
    padding-left: 14px;
}

.detail-list-box li::before {
    content: "•";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--brand-blue);
    font-weight: bold;
}


/* 4. 포인트 그리드 아이콘 크기 미세 조정 (카메라 등) */
.point-item i {
    font-size: 1.5rem;
    margin-top: 16px;
}

/* =========================================
   5. 촬영 패키지 썸네일 & 굿즈 그리드 (신규 추가)
   ========================================= */

/* 패키지 대표 이미지 (썸네일) */
.package-thumb {
    width: 100%;
    height: 200px; /* 시원시원하게 보이도록 높이 설정 */
    object-fit: cover; /* 비율 유지하며 꽉 채움 */
    border-radius: 8px;
    margin-bottom: 15px;
    display: block;
    background-color: #eee; /* 이미지 로딩 전 회색 배경 */
    border: 1px solid #eee;
}

/* 굿즈 섹션 그리드 레이아웃 (2열 배치) */
.goods-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 가로 2개씩 */
    gap: 12px; /* 간격 */
    margin-top: 15px;
}

/* 굿즈 개별 아이템 카드 */
.goods-item {
    background: #fdfdfd;
    border: 1px solid #eee;
    padding: 12px;
    border-radius: 12px;
    text-align: center;
    transition: all 0.2s ease;
}

/* 굿즈 이미지 */
.goods-img {
    width: 100%;
    aspect-ratio: 1/1; /* 정사각형 비율 고정 */
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 8px;
    background-color: #eee;
    border: 1px solid #f0f0f0;
}

/* 굿즈 이름 & 가격 텍스트 */
.goods-name {
    display: block;
    font-size: 0.85rem;
    color: #333;
    margin-bottom: 4px;
    font-weight: 500;
}

.goods-price {
    display: block;
    font-size: 0.9rem;
    color: var(--brand-blue); /* 브랜드 컬러 사용 */
    font-weight: 800;
}

/* =========================================
   6. 촬영 패키지 카드 간격 넓히기
   ========================================= */
.info-card {
    margin-bottom: 24px !important; /* 기존 간격보다 넓게 (숫자를 키우면 더 멀어집니다) */
}

/* 마지막 카드는 아래 여백을 없애서 섹션 패딩과 깔끔하게 떨어지도록 처리 */
.section-padding.bg-soft .info-card:last-child {
    margin-bottom: 0 !important;
}

/* =========================================
   배경색 선택 UI (UI 칩)
   ========================================= */
.color-picker-box {
    margin-top: 15px;
    padding: 12px;
    background-color: #f8faff; /* 연한 파란색 배경으로 시선 집중 */
    border-radius: 8px;
    border: 1px dashed var(--border-blue);
}

.color-picker-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--brand-blue);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.color-chip-wrap {
    display: flex;
    flex-wrap: wrap; /* 창 크기에 맞춰 자연스럽게 줄바꿈 */
    gap: 6px;
}

.color-chip-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--text-gray);
    background: #fff;
    padding: 4px 8px;
    border-radius: 20px; /* 둥근 캡슐 모양 */
    border: 1px solid #eee;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}

.color-circle {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.1); /* 흰색/연노랑 등 밝은색 테두리 구분용 */
}

/* 굿즈 섹션 대표 썸네일 이미지 */
.goods-section-thumb {
    width: 100%;
    height: auto;
    border-radius: 6px;
    margin-bottom: 12px;
    border: 1px solid #eee; /* 사진 테두리를 살짝 줘서 깔끔하게 */
    object-fit: cover; /* 사진 비율이 달라도 꽉 차게 보임 */
}