/* 1. 폰트 및 기본 초기화 */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css");

html body .hondal-gear-report-container,
html body .hondal-board-container {
    font-family: 'Pretendard', sans-serif !important;
}

/* 2. 평점 그리드 및 슬라이더 */
.rating-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin: 20px 0 !important;
    padding: 0 !important;
}

.rating-grid > div {
    background: #ffffff !important;
    padding: 18px 20px !important;
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04) !important;
}
/* 라벨과 숫자가 있는 상단 영역 */
.rating-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 15px !important;
}

.rating-header label {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
}

html body .rating-grid input[type="range"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 100% !important;
    height: 10px !important;
    background: #e2e8f0 !important;
    border-radius: 10px !important;
    outline: none !important;
}
/* 점수 표시 배지 */
.rating-value {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    background: #1e3a8a !important;
    padding: 2px 12px !important;
    border-radius: 50px !important;
    min-width: 35px !important;
    text-align: center !important;
}
/* 슬라이더(Input Range) 본체 */
.rating-grid input[type="range"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 100% !important;
    height: 12px !important; /* 슬라이더 막대 두께를 키움 */
    background: #e2e8f0 !important;
    border-radius: 10px !important;
    outline: none !important;
    margin: 10px 0 !important;
}

/* 슬라이더 조절 손잡이 (크롬, 사파리, 삼성인터넷 등) */
.rating-grid input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 28px !important; /* 모바일 터치용으로 크게 설정 */
    height: 28px !important;
    background: #ffffff !important;
    border: 4px solid #1e3a8a !important; /* 테두리 강조 */
    border-radius: 50% !important;
    cursor: pointer !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2) !important;
}

/* 슬라이더 조절 손잡이 (파이어폭스) */
.rating-grid input[type="range"]::-moz-range-thumb {
    width: 24px !important;
    height: 24px !important;
    background: #ffffff !important;
    border: 4px solid #1e3a8a !important;
    border-radius: 50% !important;
    cursor: pointer !important;
}

/* PC 버전일 때 너무 커 보이지 않게 처리 (선택 사항) */
@media (min-width: 769px) {
    .rating-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; /* PC에선 2열이 효율적 */
        gap: 15px !important;
    }
}
html body .rating-grid input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    background: #1a365d !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    border: 3px solid #fff !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
}

/* 1. 필터 바 컨테이너 중앙 정렬 */
.hondal-filter-bar {
    display: flex !important;
    flex-direction: column !important; /* 모바일/데스크톱 모두 세로 배치가 안정적 */
    align-items: center !important;   /* 자식 요소들을 가로 중앙으로 */
    justify-content: center !important;
    background: #ffffff !important;
    padding: 20px !important;         /* 상하좌우 여백 동일하게 */
    border-radius: 12px !important;
    border: 1px solid #eef2f6 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
    margin: 30px auto !important;     /* 상하 30px, 좌우 auto로 중앙 배치 */
    width: 95% !important;            /* 화면 너비의 90% 사용 */
    max-width: 1000px !important;      /* 너무 커지지 않게 제한 */
    gap: 15px !important;
}

/* 2. 카테고리 버튼 그룹 중앙 정렬 */
.hondal-filter-group {
    display: flex !important;
    justify-content: center !important; /* 버튼들을 가로 중앙으로 */
    width: 100% !important;
    gap: 6px !important;
}

.hondal-filter-group a {
    text-decoration: none !important;
    padding: 10px 20px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #64748b !important;
    background: #f8fafc !important;
    border-radius: 8px !important;
    border: 1px solid #f1f5f9 !important;
    transition: all 0.2s ease !important;
}

.hondal-filter-group a:hover,
.hondal-filter-group a.active {
    background: #0f172a !important;
    color: #ffffff !important;
    border-color: #0f172a !important;
}

/* 4. 검색창 및 버튼 (찌그러짐 방지 핵심) */
.hondal-search-box {
    display: flex !important;
    width: 100% !important;
    justify-content: center !important;
    margin: 0 auto !important;
}

.gear-search-input {
    flex: 1 !important;
    background: #fdfdfd !important; /* 아주 연한 회색 배경 */
    border: 1px solid #ddd !important; /* 연한 테두리 추가 */
    border-radius: 6px !important;    /* 살짝 둥글게 */
    outline: none !important;
    padding: 10px 15px !important;
    font-size: 14px !important;
    color: #1e293b !important;
    transition: all 0.2s ease !important;
}
/* 입력창을 클릭(포커스)했을 때 강조 효과 */
.gear-search-input:focus {
    border-color: #0f172a !important; /* 네이비색 테두리로 변경 */
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.05) !important;
}

.hondal-search-box button {
    flex-shrink: 0 !important; /* 버튼 크기 고정 */
    white-space: nowrap !important; /* 글자 줄바꿈 금지 */
    background: #0f172a !important;
    color: white !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
    cursor: pointer !important;
}

/* 5. 리뷰 리스트 아이템 (카드 디자인) */
/* 1. 컨테이너가 자식들을 꽉 채우도록 설정 */
.review-list-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* 가운데 정렬 */
    width: 100% !important;
    gap: 15px !important;
}

/* 2. 카드(a 태그)의 너비를 확장 */
.review-list-container a {
    width: 100% !important;
    max-width: 1000px !important; /* PC에서 너무 작지 않게 기본 최대치를 키움 */
    min-height: 100px !important;
	margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    background: #fff !important;
    border: 1px solid #eee !important;
    border-radius: 12px !important;
    padding: 20px !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
}

.review-list-container a:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05) !important;
}
/* 제목 스타일 수정 */
/* 제목을 감싸는 박스가 전체 너비를 차지하도록 설정 */
.hondal-header-wrapper {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    margin-top: 50px !important;
    margin-bottom: 10px !important;
    border-bottom: 2px solid #1a365d !important;
}

.form-header-title {
    display: block !important;
    text-align: center !important;
    width: 100% !important;
    font-size: 32px !important; /* PC에서 시원하게 키움 */
    font-weight: 800 !important;
    color: #1a365d !important;
    padding-bottom: 15px !important;
}


/* 6. 모바일 대응 */
@media (max-width: 768px) {
    /* 레이팅 그리드 2열 */
    html body .rating-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .hondal-filter-group {
        width: 100% !important;
        justify-content: space-between !important;
    }

    .hondal-filter-group a {
        flex: 1 !important;
        padding: 8px 1px !important; /* 좌우 패딩을 더 줄임 */
        font-size: 10.5px !important; /* 11px에서 0.5px 더 줄임 */
        text-align: center !important;
        white-space: nowrap !important; /* 줄바꿈 절대 금지 (핵심) */
        letter-spacing: -1px !important; /* 자간을 더 좁혀서 공간 확보 */
        display: flex !important;
        flex-direction: column !important; /* 텍스트와 이모지를 세로로 붙임 */
        align-items: center !important;
        justify-content: center !important;
        min-width: 0 !important;
    }

    /* 이모지 크기 조절 (필요 시) */
    .hondal-filter-group a span {
        display: block !important;
        margin-top: 2px !important;
    }

    /* 제목 중앙 정렬 */
    .form-header-title {
        text-align: center !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
		font-size: 22px !important; /* 모바일은 너무 크지 않게 */
        margin: 30px 0 15px 0 !important;
    }

    /* 모바일 카드 내 별점 배치 */
    .review-list-container a > div {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .review-list-container a span[style*="color:#f1c40f"] {
        margin-top: 10px !important;
        font-size: 18px !important; /* 별점 강조 */
    }
	.review-list-container {
        padding: 0 10px !important; /* 화면 끝에 붙지 않게 */
    }
    
.hondal-filter-bar,
    .review-list-container a {
        max-width: 100% !important;
        width: 92% !important;
    }
    .hondal-filter-bar {
        flex-direction: column !important; /* 모바일은 다시 세로로 */
    }
	  .hondal-search-box {
        max-width: 350px !important; /* 검색창이 너무 길어지지 않게 */
        margin: 0 !important;
	    gap: 8px !important; /* 입력창과 검색 버튼 사이 간격 */
        flex: 1 !important; /* 검색창 영역을 조금 더 넓게 */
    }
}
/* [보완] 3. PC 전용 설정 (화면이 클 때) */
@media (min-width: 1024px) {
    .hondal-filter-bar,
    .review-list-container a {
        max-width: 1100px !important; /* 제목 밑줄 길이와 비슷하게 확장 */
        padding: 25px 40px !important; /* PC에서는 내부 여백도 넉넉하게 */
    }
    
    /* PC에서는 검색창과 필터를 가로로 나란히 배치하고 싶다면 flex-direction 변경 */
    .hondal-filter-bar {
        flex-direction: row !important; 
        justify-content: space-between !important;
    }
    
    .hondal-search-box {
        max-width: 350px !important; /* 검색창이 너무 길어지지 않게 */
        margin: 0 !important;
	    gap: 8px !important; /* 입력창과 검색 버튼 사이 간격 */
        flex: 1 !important; /* 검색창 영역을 조금 더 넓게 */
    }

}


  /* 여기부터 single-gearview css */


/* ============================================================
   SINGLE GEAR REVIEW PAGE (상세 후기 페이지) 추출 스타일
   ============================================================ */

/* 1. 페이지 전체 컨테이너 */
.hondal-gear-report-container {
    max-width: 900px !important;
    margin: 40px auto !important;
    padding: 20px !important;
}

/* 2. 제품 요약 상단 섹션 (그라데이션 박스) */
.product-summary {
    background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%) !important;
    color: #fff !important;
    padding: 40px !important;
    border-radius: 20px !important;
    margin-bottom: 40px !important;
    text-align: center !important;
    box-shadow: 0 10px 25px rgba(30,58,138,0.15) !important;
}

/* 브랜드 뱃지 (나이키, 아디다스 등) */
.product-summary .brand-badge {
    background: rgba(255,255,255,0.2) !important;
    padding: 4px 12px !important;
    border-radius: 20px !important;
    font-size: 13px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
}

/* 제품명 타이틀 */
.product-summary h1 {
    font-size: 36px !important;
    margin: 15px 0 !important;
    color: #fff !important;
    font-weight: 800 !important;
}

/* 상단 평균 별점 및 리포트 수 */
.product-summary .rating-display {
    font-size: 26px !important;
    color: #facc15 !important;
}

.product-summary .rating-count {
    font-size: 16px !important;
    color: rgba(255,255,255,0.8) !important;
}

/* 3. 버튼 및 액션 바 영역 */
.action-bar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 25px !important;
}

/* 전체 목록 버튼 (홈 아이콘 포함) */
.btn-back-home {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 16px !important;
    background: #f8fafc !important;
    color: #475569 !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    font-size: 14px !important;
    border: 1px solid #e2e8f0 !important;
    font-weight: 500 !important;
}

/* 4. 섹션 제목 (USER REVIEWS) */
.section-title-reviews {
    margin-bottom: 25px !important;
    border-bottom: 2px solid #1e3a8a !important;
    padding-bottom: 10px !important;
    font-weight: 800 !important;
    color: #1e3a8a !important;
    display: inline-block !important;
}

/* 5. 개별 리뷰 카드 */
.individual-review {
    background: #fff !important;
    border: 1px solid #f1f5f9 !important;
    border-radius: 16px !important;
    padding: 30px !important;
    margin-bottom: 30px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04) !important;
}

/* 리뷰 내 별점 박스 */
.review-rating-box {
    background: #fffbeb !important;
    color: #d97706 !important;
    padding: 6px 14px !important;
    border-radius: 10px !important;
    font-weight: 800 !important;
    font-size: 18px !important;
    border: 1px solid #fef3c7 !important;
}

/* 항목별 평점 라벨 그룹 */
.review-labels {
    display: flex !important;
    gap: 8px !important;
    margin-bottom: 20px !important;
    flex-wrap: wrap !important;
}

/* 사이즈 정보 뱃지 전용 (연보라) */
.r-badge.size-info {
    background: #eef2ff !important;
    color: #4338ca !important;
    border-color: #c7d2fe !important;
}

/* 6. 리뷰 텍스트 본문 */
.review-text {
    line-height: 1.8 !important;
    color: #334155 !important;
    background: #f8fafc !important;
    padding: 25px !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    border-left: 5px solid #1e3a8a !important;
    white-space: pre-wrap !important;
}

/* 7. 구매 정보 하단 바 (구매가, 사용거리) */
.purchase-meta-info {
    margin-top: 20px !important;
    font-size: 14px !important;
    color: #64748b !important;
    display: flex !important;
    gap: 20px !important;
    background: #fff !important;
    padding: 10px !important;
    border-radius: 8px !important;
}

.purchase-meta-info strong {
    color: #1e293b !important;
}

/* 8. 페이지네이션 및 빈 결과 알림 */
.review-pagination {
    text-align: center !important;
    margin: 50px 0 !important;
}

.no-reviews-box {
    text-align: center !important;
    padding: 120px 0 !important;
    background: #f9fafb !important;
    border-radius: 16px !important;
}

.no-reviews-icon {
    font-size: 50px !important;
    margin-bottom: 20px !important;
}

.no-reviews-text {
    color: #64748b !important;
    font-size: 18px !important;
}

.btn-back-to-list {
    display: inline-block !important;
    margin-top: 20px !important;
    color: #1e3a8a !important;
    font-weight: bold !important;
    text-decoration: none !important;
}



/* 제목 주변에 숨어있는 모든 가상 요소 선 제거 */
.form-header-title::before,
.hondal-header-wrapper::before {
    content: none !important;
    display: none !important;
    border: none !important;
}
/* 에모지 이미지에 붙은 모든 선 제거 */
.form-header-title img.emoji {
    border: none !important;
    box-shadow: none !important;
    background: none !important;
    text-decoration: none !important;
}
/* 1. 제목 아래에 워드프레스가 자동으로 만드는 빈 단락과 선 제거 */
.hondal-header-wrapper + p,
.hondal-board-container p:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* 2. 에모지 이미지(img)가 아닌 '부모' 태그에 밑줄이 있는지 확인 사살 */
.form-header-title {
    text-decoration: none !important; /* 글자 밑줄 제거 */
    border-top: none !important;    /* 혹시 모를 위쪽 선 제거 */
}

/* 3. 전체 컨테이너 내부의 모든 p 태그 상단 선 제거 (가장 확실함) */
.hondal-board-container p {
    border-top: none !important;
}

/* ============================================================
   1. 후기 작성 폼 (Form) 스타일
   ============================================================ */
:root { 
    --hondal-primary: #1e3a8a; 
    --hondal-bg: #f8fafc; 
    --hondal-border: #e2e8f0; 
    --hondal-text: #1e293b; 
}

.hondal-form-wrapper { 
    background: #fff; 
    padding: 40px; 
    border-radius: 16px; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.05); 
    border: 1px solid #f1f5f9; 
    font-family: 'Pretendard', sans-serif; 
}

.form-header-title { 
    font-size: 24px; 
    font-weight: 800; 
    color: var(--hondal-text); 
    margin-bottom: 30px; 
    padding-bottom: 15px; 
    display: flex; 
    align-items: center; 
    gap: 10px; 
}

.hondal-frontend-form .form-section { margin-bottom: 25px; }
.hondal-frontend-form .form-section-title { 
    font-size: 16px; 
    font-weight: 700; 
    color: var(--hondal-primary); 
    margin-bottom: 15px; 
    display: flex; 
    align-items: center; 
    gap: 8px; 
}

.hondal-frontend-form label { 
    display: block; 
    font-weight: 600; 
    font-size: 14px; 
    color: #475569; 
    margin-bottom: 8px; 
}

.hondal-frontend-form input[type="text"], 
.hondal-frontend-form input[type="number"], 
.hondal-frontend-form select, 
.hondal-frontend-form textarea { 
    width: 100%; 
    padding: 12px 15px; 
    border: 1px solid var(--hondal-border); 
    border-radius: 8px; 
    font-size: 15px; 
}

.rating-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
    gap: 15px; 
    background: var(--hondal-bg); 
    padding: 20px; 
    border-radius: 12px; 
}

.photo-upload-section .file-upload-box { 
    border: 2px dashed #cbd5e1; 
    border-radius: 12px; 
    padding: 30px; 
    text-align: center; 
    background: var(--hondal-bg); 
    cursor: pointer; 
}

.hondal-btn-submit { 
    flex: 1; 
    background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%); 
    color: #fff; 
    border: none; 
    padding: 15px; 
    border-radius: 8px; 
    font-weight: 700; 
    cursor: pointer; 
}

.hondal-btn-cancel { 
    padding: 15px 25px; 
    background: #fff; 
    color: #64748b; 
    border: 1px solid var(--hondal-border); 
    border-radius: 8px; 
    text-decoration: none; 
    text-align: center; 
}

.form-btns { display: flex; gap: 10px; margin-top: 30px; }

/* 폼 전체 톤 조절 */
.soma-modern-form {
    max-width: 800px;
    margin: 0 auto;
}

/* 입력 그룹 레이아웃 */
.input-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.input-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

/* 라벨 스타일 */
.input-group label {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 8px;
    margin-left: 4px;
}

/* 입력창 & 셀렉트 박스 공통 스타일 */
.soma-modern-form select,
.soma-modern-form input[type="text"],
.soma-modern-form textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 12px; /* 둥글게 */
    font-size: 15px;
    background-color: #f8fafc;
    color: #1a365d;
    transition: all 0.2s ease;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
    appearance: none; /* 기본 화살표 제거 */
}

/* 포커스 효과: SOMA 블루 */
.soma-modern-form select:focus,
.soma-modern-form input:focus {
    outline: none;
    border-color: #1a365d;
    background-color: #fff;
    box-shadow: 0 0 0 4px rgba(26, 54, 93, 0.1);
}

/* 셀렉트 박스 커스텀 화살표 */
.select-wrapper {
    position: relative;
    width: 100%;
}

.select-wrapper::after {
    content: '▼';
    font-size: 12px;
    color: #64748b;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

/* 슬라이더(평점) 섹션 세련되게 */
.rating-grid-modern {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    background: #f1f5f9;
    padding: 20px;
    border-radius: 16px;
}

.rating-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.rating-value {
    background: #1a365d;
    color: #fff;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: bold;
}

/* 모바일 대응 */
@media (max-width: 480px) {
    .input-row {
        grid-template-columns: 1fr;
    }
}

/* 현대적인 SOMA 폼 스타일 */
.soma-modern-form {
    background: #fff;
}

.soma-modern-form .input-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.soma-modern-form .input-row {
    display: grid;
    grid-template-columns: 1fr 1.5fr; /* 코스는 짧게, 기록은 적당히 */
    gap: 15px;
}

.soma-modern-form .input-group label {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #1e3a8a;
    margin-bottom: 8px;
}

/* 입력창 공통 */
.soma-modern-form select,
.soma-modern-form input[type="text"],
.soma-modern-form textarea {
    width: 100% !important;
    padding: 12px 15px !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 10px !important;
    background: #f8fafc !important;
    font-size: 15px;
    transition: all 0.2s;
    box-sizing: border-box;
}

.soma-modern-form select:focus,
.soma-modern-form input:focus {
    border-color: #1a365d !important;
    background: #fff !important;
    box-shadow: 0 0 0 4px rgba(26, 54, 93, 0.1);
}

/* 셀렉트 박스 화살표 디자인 */
.select-wrapper {
    position: relative;
    width: 100%;
}

.select-wrapper::after {
    content: '▼';
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: #64748b;
    pointer-events: none;
}

/* 파일 업로드 헬프 텍스트 */
.file-help-text {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 8px;
}

/* 모바일 대응 */
@media (max-width: 600px) {
    .soma-modern-form .input-row {
        grid-template-columns: 1fr;
    }
}