/**
 * =====================================================
 * Twenty Seventeen Child Theme - custom.css
 * =====================================================
 * This file is reserved for custom CSS rules.
 * Add your styles below to override or extend
 * the default Twenty Seventeen theme styles.
 *
 * Notes:
 * - Keep selectors specific to avoid conflicts.
 * - Use comments to organize sections clearly.
 * - Test changes on desktop and mobile devices.
 */

/* -----------------------------------------------------
   Global Styles
   ----------------------------------------------------- */
/* SEO 히든 설명 */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body {
  overflow-x: hidden;
}
html {
  overflow-x: visible;
  overflow-y: visible;
}

/* 글로벌 컨테이너 확장 */
.wrap {
  max-width: 1200px !important;
  margin: 0 auto !important;
}

body.home #primary.content-area,
body.has-header-image #primary.content-area {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 auto !important;
}

@media (max-width: 768px) {
  body.home .entry-header .entry-title {
    margin-top: 0.8em;
    margin-bottom: 0.25em;
  }
}
/* 일반 페이지: primary 확장 - 홈/헤더 이미지 페이지는 제외 */
body:not(.home):not(.has-header-image) #primary.content-area {
  max-width: 1100px !important; /* 원하는 값으로 조정 가능 */
  margin: 0 auto !important;
}
/* -----------------------------------------------------
   Single Page Styles
   ----------------------------------------------------- */

/* Menu page body color */
body:not(.home) .site-content-contain {
  background: #fff !important;
}

body:not(.home) .navigation-top {
  background: #fff !important;
}

/* 메뉴 페이지 전용 footer 색상 */
body:not(.home) footer {
  background-color: #222; /* 풋터 배경색 */
  color: #fff;            /* 풋터 글자색 */
}

body:not(.home) .body.colors-dark, .colors-dark .site-content-contain, .colors-dark .navigation-top, .colors-dark .main-navigation ul {
    background: #222;
}

/* 반투명 오버레이 추가 */
.single-featured-image-header::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4); /* 검정색 반투명 오버레이 */
  z-index: 1;                  /* 이미지 위, 글자 아래 */
}

/* 엔트리헤더 위치 조정 */
.single-featured-image-header .entry-header {
  position: absolute;
  top: 50%; 
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 2; /* 오버레이 위에 표시 */
}

/* 타이틀 스타일 (배경 제거, 글자만 강조) */
.single-featured-image-header .entry-title {
  color: #fff !important;
  font-size: 2.5rem !important; /* 글자 크기 키우기 */
  font-weight: bold;
}
/* -----------------------------------------------------
   Header Customization
   ----------------------------------------------------- */
body:not(.home) .site-title {
        font-size: 1.6rem;
}

/* 1. 헤더 컨테이너 설정: 사라진 요소를 다시 화면에 표시 */
body:not(.home) .site-header {
    position: relative !important; /* absolute 대신 relative로 공간 확보 */
    background: transparent !important;
    z-index: 10;
}

/* 2. 대표 이미지 강제 노출 및 위치 조정 */
body:not(.home) .single-featured-image-header {
    position: absolute !important;
    top: 0 !important;
    left: 0;
    width: 100%;
    height: 800px !important; /* 이미지 높이 고정 */
    display: block !important; /* 사라짐 방지 */
    z-index: 1 !important;
    margin: 0 !important;
}

body:not(.home) .single-featured-image-header img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* 3. 메뉴바 설정: 배경색 전체 폭 + 75px 높이 */
body:not(.home) .navigation-top {
    background-color: #ffffff !important;
    position: absolute !important;
    top: 165px !important; /* 이미지 상단으로부터 165px 아래 */
    left: 0 !important;
    width: 100% !important;
    height: 75px !important;
    z-index: 999 !important; /* 최상단으로 올림 */
    visibility: visible !important; /* 사라짐 방지 */
}

/* 메뉴 내부 정렬 (메인페이지와 동일하게 좌측 기준선 맞춤) */
body:not(.home) .navigation-top .wrap {
    max-width: 1000px; /* 메인페이지 wrap 폭에 맞춤 */
    margin: 0 auto !important;
    height: 75px !important;
    display: flex;
    align-items: center;
}

/* 4. 본문 시작점: 벌어진 흰색 공간 제거 */
/* 이미지가 absolute이므로 본문을 600px만큼 위로 끌어올리되, 
   이미지가 끝나는 지점(600px)에 정확히 맞춥니다. */
body:not(.home) .site-content-contain {
    margin-top: 0 !important; 
    top: 370px; /* 이미지 높이만큼 아래에서 시작 */
    position: relative;
    z-index: 5;
    background: #ffffff;
}

/* 5. 스티키 상태 (스크롤 시 상단 고정) */
body:not(.home) .navigation-top.site-navigation-fixed {
    position: fixed !important;
    top: 0 !important;
transition: none !important; /* 혹시 모를 애니메이션 충돌 제거 */
}

body:not(.home).admin-bar .navigation-top.site-navigation-fixed {
    top: 32px !important;
}

.main-navigation.toggled-on {
  position: absolute;
  top: 100%;   /* 헤더 바로 아래 */
  left: 0;
  width: 100%;
  background: #fff;
  z-index: 9999; /* 다른 요소 위에 오도록 */
}

.main-navigation.toggled-on .sub-menu {
  display: block;   /* 기본적으로 펼쳐진 상태 */
}

/* TOOLS 페이지 배너이미지 높이 변경 & 컨텐츠 올리기 */ 
body.page-id-415 .single-featured-image-header,
body.page-id-446 .single-featured-image-header,
body.page-id-464 .single-featured-image-header,
body.page-id-657 .single-featured-image-header, 
body.page-id-659 .single-featured-image-header { 
    height: 170px !important; 
}

body.page-id-415 .custom-header,
body.page-id-446 .custom-header,
body.page-id-464 .custom-header,
body.page-id-657 .custom-header,
body.page-id-659 .custom-header {
margin-bottom: 0 !important;
}

body.page-id-415 .site-content-contain,
body.page-id-446 .site-content-contain,
body.page-id-464 .site-content-contain,
body.page-id-657 .site-content-contain,
body.page-id-659 .site-content-contain {
    top: 0 !important; /* 이미지 높이만큼 아래에서 시작 */
}

/* -----------------------------------------------------
   Front Page Sections
   ----------------------------------------------------- */
/* Example:
.panel-content {
    padding: 60px 20px;
}
*/

/* -----------------------------------------------------
   Footer Customization
   ----------------------------------------------------- */
.footer-columns {
    display: flex;
    justify-content: space-between;
    gap: 100px;
    /*flex-wrap: wrap;  작은 화면에서 줄바꿈 허용 */
}

.footer-left, .footer-right {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 카피라이트 */
.footer-copyright {
    font-size: 12px;
    color: #e6e6e6;
    text-align: right;
    margin-top: 10px;
}

/* 위젯 */
.site-footer .widget-column.footer-widget-1,
.site-footer .widget-column.footer-widget-2 {
    float: left;
    width: 100%;
}

.widget {
    padding-bottom: 1.5em;
}

/* 반응형 처리 */
@media (max-width: 1024px) {
    .footer-columns {
        gap: 50px; /* 태블릿에서 간격 줄이기 */
    }
}

@media (max-width: 768px) {
    .footer-columns {
        flex-direction: column; /* 세로 배치 */
        gap: 30px;
    }

    .footer-left, .footer-right {
        width: 100%; /* 한 줄 전체 차지 */
    }

    .footer-copyright {
        text-align: center; /* 모바일에서는 가운데 정렬 */
        margin-top: 20px;
    }
}


.site-info {
  font-size: 12px; /* 글씨 크기 */
  color: #999999;  /* 글씨 색상 */
  text-align: center;
  padding: 0.7em 0 0;
  width: 100%;
}

/* 푸터 위젯2 안의 소셜 메뉴 강제 오른쪽 정렬 */
.social-navigation {
  float: none !important;       /* 기본 float 제거 */
  clear: none !important;       /* 기본 clear 제거 */
  width: auto !important;       /* 강제 지정된 width 제거 */
  text-align: right;            /* 오른쪽 정렬 */
  margin-bottom: 0;
}

.social-links-menu {
  display: inline-flex;
  justify-content: flex-end;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.social-links-menu li {
  float: none !important;       /* li에도 float 제거 */
}

/* 시계 공통 래퍼 */
.clock-wrapper {
    display: flex;
    flex-direction: column;
    align-items: left;
    gap: 6px;
}

/* 홈(bday:home) → 다크 모드 */
body.home .clock-time {
    font-family: 'Roboto Mono', monospace;
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    background: #222;
    padding: 8px 12px;
    border-radius: 6px;
}

body.home .clock-date {
    font-size: 14px;
    color: #ccc;
	padding-left: 10px;
}

/* not home → 라이트 모드
body:not(.home) .clock-time {
    font-family: 'Roboto Mono', monospace;
    font-size: 20px;
    font-weight: 600;
    color: #111;
    background: #fff;
    padding: 8px 12px;
    border-radius: 6px;
}

body:not(.home) .clock-date {
    font-size: 14px;
    color: #555;
	padding-left: 10px;
}*/


/* 날씨 위젯 */
.splw-main-wrapper.horizontal .splw-lite-header-title-wrapper {
   display: flex !important; 
   flex-direction: column !important;   /* 세로(1열) 강제 */
   justify-content: flex-start !important;
   align-items: flex-start !important;
}

/* 좌측 컬럼 */
.splw-main-wrapper.horizontal .splw-lite-templates-body div {
    flex: 0 0 40% !important;
    text-align: left !important;
}

/* 추측 컬럼 */
.splw-main-wrapper.horizontal .splw-lite-templates-body div.splw-lite-daily-weather-details {
    flex: 0 0 60% !important;
    text-align: left !important;
}

/* 기존 코드에 아래 내용을 추가하거나 수정해 보세요 */
.splw-main-wrapper.horizontal .splw-lite-daily-weather-details .splw-other-opt > div {
    flex: 1 1 45% !important; /* 최소 너비를 보장하면서 남는 공간을 꽉 채우도록 설정 */
    max-width: 100% !important; /* 너비 제한 해제 */
}

/* 날시 상세 사항 폰트 설정 */
.splw-lite-wrapper .splw-lite-daily-weather-details .splw-other-opt {
    display: flex;
    flex-direction: column;
    font-size: 0.7rem !important;
    font-weight: 400;
    line-height: 0.8rem !important;
    margin-top: 5px !important;
}

/* 전체 날씨 위젯 텍스트 */
.splw-adv-forecast-days,
.lw-weather-container {
  font-size: 13px;       /* 글자 크기 */
  line-height: 1.4;      /* 줄 간격 */
  font-family: Arial, sans-serif; /* 폰트 */
  color: #333;           /* 글자 색상 */
}

/* 지금 온도 폰트 설정 */
.splw-lite-wrapper .splw-lite-current-temp span.cur-temp {
    font-size: 1.5rem !important;
    font-weight: 700;
    line-height: 2rem !important;
}

/* 지금 날씨 상태 단어 마진 */
#splw-location-weather-123 .splw-lite-desc {
    color: #333333;
    margin-top: 10px !important;
    margin-bottom: 0px;
}

/* 지금 날씨 상태 단어 폰트설정 */
.splw-lite-wrapper .splw-lite-desc {
    display: inline-block;
    font-size: 0.75rem !important;
    font-weight: 600;
    line-height: 0.9rem !important;
    text-transform: capitalize;
}

/* 현재 날씨 텍스트만 */
.lw-current {
  font-size: 14px;
  font-weight: bold;
}

/* 아이콘 크기 줄이기 */
.splw-weather-icon {
  width: 24px !important;
  height: 24px !important;
}

/* 온도 숫자 강조 */
.lw-high-temp .high {
  font-weight: bold;
  color: #d33; /* 빨간색 포인트 */
}

.lw-footer {
  display: none;
}

.splw-adv-forecast-days {
  display: none;
}

.splw-weather-title {
  display: none;
}

/* -----------------------------------------------------
   Custom Table Style
   ----------------------------------------------------- */
.custom-table {
  width: 100%;
  border-collapse: collapse;
  background-color: #343a40;
  color: #fff;
  margin: 10px auto;
  border-radius: 8px;
  overflow: hidden;
}
.custom-table th, .custom-table td {
  padding: 6px;
  text-align: center;
}
.custom-table th {
  background-color: rgba(255, 255, 255, 0.1);
  font-weight: bold;
}
.custom-table tr:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.05);
}
thead {
  background-color: #ff4d4d; /* 버튼 컬러와 동일한 색상 */
  color: #fff; /* 가독성을 위해 텍스트 색상을 조정 */
}

/* -----------------------------------------------------
   Form Inputs
   ----------------------------------------------------- */
.form-input {
  width: 50px;
  padding: 5px;
  text-align: center;
  background: #495057;
  border: none;
  color: #fff;
  border-radius: 4px;
}
.form-input:focus {
  outline: none;
  background: #e4e7e9;
}

/* -----------------------------------------------------
   Buttons
   ----------------------------------------------------- */
.calculate-btn {
  margin-top: 10px;
  background: #ff4d4d !important;
  border: none;
  color: #fff;
  cursor: pointer;
  transition: 0.3s;
}
.calculate-btn:hover {
  background: #c60005;
}
.clear-btn {
  background-color: #efefef;
  color: #000;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.clear-btn:hover {
  background-color: #ddd;
}

.calculate-btn,
.clear-btn {
  padding: 10px 20px !important;   /* 동일한 패딩 */
  font-size: 16px;
  border-radius: 5px;
}

/* -----------------------------------------------------
   Dropdown
   ----------------------------------------------------- */
select {
  background-color: #495057;
  color: #fff;
  border: none;
  padding: 5px;
  border-radius: 4px;
  appearance: none;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
select:hover {
  background-color: #6c757d;
}

/* -----------------------------------------------------
   Speed Blocks (페이지 64 전용)
   ----------------------------------------------------- */
/* Distance 입력 영역 */
#page-64 th {
  text-align: center; /* 데스크탑에서 가운데 정렬 */
}

#page-64 .dist-input {
  display: inline-block;
  width: 120px;
  margin-left: 8px auto;
}

#page-64 select[name="distunits"] {
  text-align: center; 
  width: 100px; /* 데스크탑 기본 폭 */
  margin-left: 8px;
}

/* Hours / Minutes / Seconds 행 */
#page-64 td {
  text-align: center; /* 데스크탑에서 가운데 정렬 */
}

#page-64 td label,
#page-64 td input {
  display: inline-block;

}

/* Speed 블록 */
#page-64 .speed-block {
  text-align: center;
}

#page-64 .speed-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

#page-64 .speed-input {
  width: 150px;
}

#page-64 select[name="speedunits"], 
#page-64 select[name="speedunits2"] {
  text-align: center; 
}
/* -------------------------------
   반응형 (모바일)
   ------------------------------- */
@media (max-width: 768px) {
  /* Distance 가운데 정렬 + select 폭 줄이기 */
  #page-64 th {
    text-align: center;
  }

  #page-64 .dist-input {
    width: 100%;
    max-width: 250px;
    margin: 5px auto;
    display: block;
  }

  #page-64 select[name="distunits"] {
    width: 80px; /* 폭 줄임 */
    margin: 5px auto;
    display: block;
  }

  /* Hours / Minutes / Seconds 줄바꿈 + 가운데 */
  #page-64 td {
    text-align: center;
    display: block; /* 줄바꿈 */
    margin: 8px 0;
  }

  #page-64 td input {
    display: block;
    margin: 5px auto;
    width: 100%;
    max-width: 200px;
  }

  /* Speed 블록 줄바꿈 + 가운데 */
  #page-64 .speed-row {
    flex-direction: column;
    align-items: center;
  }

  #page-64 .speed-input {
    width: 100%;
    max-width: 250px;
    margin: 5px auto;
  }

  #page-64 select {
    width: 100%;
    max-width: 200px;
    margin: 5px auto;
  }
}

/* -----------------------------------------------------
   Page 151 - Genetics Engine Specific Style
   ----------------------------------------------------- */

#page-151 .genetics-engine-wrapper {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
}

#page-151 .gen-container {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

#page-151 .gen-box {
    flex: 1;
    background: #343a40;
    padding: 20px;
    border-radius: 8px;
    color: #fff;
}

#page-151 .box-title {
    color: #ff4d4d;
    border-bottom: 1px solid #495057;
    padding-bottom: 10px;
    margin-bottom: 20px;
    font-size: 1.2rem;
}

#page-151 .input-group {
    margin-bottom: 15px;
}

#page-151 .input-group label {
    display: block;
    font-size: 12px;
    color: #adb5bd;
    margin-bottom: 5px;
    font-weight: bold;
}

#page-151 select {
    width: 100%; /* 유전 계산기는 항목이 많아 100% 폭 사용 */
}

/* 모디파이어 그리드 레이아웃 */
#page-151 .mods-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 데스크탑 2열 */
    gap: 10px;
    margin-top: 20px;
}

#page-151 fieldset {
    border: 1px solid #495057;
    padding: 8px;
    border-radius: 5px;
}

#page-151 legend {
    font-size: 11px;
    color: #ff4d4d;
    padding: 0 5px;
}

#page-151 .btn-area {
    text-align: center;
    margin: 30px 0;
}

/* 결과 테이블 (공통 스타일 유지 + 오버플로우 방지) */
#page-151 .table-responsive {
    overflow-x: auto;
}

#page-151 #resArea table {
    width: 100%;
    border-collapse: collapse;
    background-color: #343a40;
    color: #fff;
    font-size: 12px;
}

/* 공통 .custom-table 스타일 적용을 위해 ID 하위로 강제 지정 */
#page-151 table th {
    background-color: #ff4d4d;
    padding: 10px;
}

#page-151 table td {
    padding: 8px;
    border-bottom: 1px solid #495057;
}

/* Reference Box */
#page-151 .reference-box {
    margin-top: 40px;
    padding: 20px;
    background: #2b2f33;
    border-left: 4px solid #ff4d4d;
    border-radius: 4px;
}

#page-151 .ref-header {
    color: #ff4d4d;
    font-size: 14px;
    margin-bottom: 10px;
}

#page-151 .ref-list {
    font-size: 12px;
    color: #adb5bd;
    padding-left: 20px;
}

/* -------------------------------
   반응형 (모바일) - Page 151
   ------------------------------- */
@media (max-width: 768px) {
    #page-151 .gen-container {
        flex-direction: column;
    }

    #page-151 .mods-grid {
        grid-template-columns: 1fr; /* 모바일은 1열로 나열 */
    }

    #page-151 .box-title {
        text-align: center;
    }

    #page-151 .btn-area button {
        width: 100%;
        max-width: 300px;
        display: block;
        margin: 10px auto;
    }
}

/* ============================================================
   COLEEA Feed Analyzer v1.0 - 통합 스타일시트
   ============================================================ */

/* 1. 메인 컨테이너 및 셀렉터 박스 디자인 */
#page-162.feed-analyzer-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    color: #fff;
    font-family: 'Inter', -apple-system, sans-serif;
}

#page-162 .custom-selector-box {
    background-color: #495057 !important; /* 요청하신 배경색 */
    border-radius: 15px;
    padding: 35px 25px;
    text-align: center;
    margin-bottom: 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

#page-162 .box-title {
    color: #ffffff !important;
    font-size: 1.6rem;
    margin-bottom: 25px;
    font-weight: 700;
}

/* 셀렉트 행 정렬 (가로 배치 및 모바일 대응) */
#page-162 .select-row {
    display: flex;
    justify-content: center;
    gap: 25px;
    flex-wrap: wrap;
}

#page-162 .input-group {
    flex: 1;
    min-width: 280px;
    max-width: 450px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#page-162 .input-group label {
    display: block;
    margin-bottom: 10px;
    font-size: 14px;
    color: #ffffff !important;
    font-weight: 500;
}

/* 셀렉트 박스 스타일 (흰 배경 + 테마색 글자) */
#page-162 .input-group select {
    width: 100%;
    background-color: #ffffff !important;
    color: #495057 !important;
    border: none;
    border-radius: 8px;
    padding: 14px 18px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    appearance: auto;
    outline: none;
    transition: transform 0.2s ease;
}

#page-162 .input-group select:hover {
    transform: translateY(-2px);
}

/* 2. 결과 카드 그리드 및 스타일 */
#page-162 .results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

#page-162 .feed-card {
    background: #2b2f33;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid #3e444a;
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

#page-162 .feed-card:hover {
    transform: translateY(-5px);
    border-color: #ff4d4d;
}

#page-162 .feed-card .header {
    margin-bottom: 15px;
    border-bottom: 1px solid #3e444a;
    padding-bottom: 10px;
}

#page-162 .brand {
    color: #ff4d4d;
    font-weight: bold;
    font-size: 0.85rem;
    display: block;
}

#page-162 .product-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: #eee;
}

/* 3. 영양소 바 시스템 (메인 & 서브) */

/* 메인 바 (굵고 빨간색) */
#page-162 .bar-row { margin-bottom: 15px; }
#page-162 .bar-label {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    margin-bottom: 6px;
}

#page-162 .bar-track.main {
    height: 14px;
    background: #1a1d20;
    border-radius: 7px;
    overflow: hidden;
}

#page-162 .bar-fill.main {
    height: 100%;
    background: linear-gradient(90deg, #ff4d4d, #c60005);
    width: 0%; /* JS로 조절 */
    transition: width 1s cubic-bezier(0.17, 0.67, 0.83, 0.67);
}

/* 서브 바 (얇고 회색) */
#page-162 .sub-bars-container {
    background: rgba(0,0,0,0.1);
    padding: 10px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#page-162 .bar-row-sub {
    display: flex;
    align-items: center;
    font-size: 11px;
    color: #adb5bd;
}

#page-162 .sub-label { width: 55px; font-weight: 600; }
#page-162 .bar-track.sub {
    flex-grow: 1;
    height: 4px;
    background: #1a1d20;
    border-radius: 2px;
    margin: 0 10px;
    overflow: hidden;
}

#page-162 .bar-fill.sub {
    height: 100%;
    background: #6c757d;
    width: 0%; /* JS로 조절 */
    transition: width 1s ease-out;
}

#page-162 .sub-val { width: 35px; text-align: right; }

/* 4. 사료 내용물 (Full Ingredients) */
#page-162 .mix-box {
    margin-top: 15px;
    padding-top: 12px;
    border-top: 1px solid #3e444a;
}

#page-162 .mix-box span {
    font-size: 12px;
    color: #adb5bd;
    line-height: 1.5;
    word-break: keep-all;
}

/* 5. 하단 팁 박스 및 안내 */
#page-162 .reference-box {
    background: #1a1d20;
    border-radius: 12px;
    padding: 25px;
    border: 1px solid #495057;
}

#page-162 .ref-header {
    color: #ff4d4d;
    font-weight: bold;
    margin-bottom: 15px;
    font-size: 1.1rem;
}

#page-162 .disclaimer-text {
    margin-top: 15px;
    font-size: 11px;
    color: #6c757d;
    border-top: 1px solid #343a40;
    padding-top: 12px;
    line-height: 1.6;
}

/* 6. 반응형 미디어 쿼리 */
@media (max-width: 650px) {
    #page-162 .custom-selector-box { padding: 25px 15px; }
    #page-162 .select-row { flex-direction: column; align-items: center; }
    #page-162 .input-group { width: 100%; max-width: 100%; }
    #page-162 .results-grid { grid-template-columns: 1fr; }
}

/* -------------------------------
   768에서 햄버거 메뉴로 빠뀌지 않는거 수정
   ------------------------------- */
/* 600px 이하일 때 */
@media (max-width: 37.5em) { /* 600px */
    body:not(.home) .site-title {
        font-size: 0.825rem;
    }
}

/* 601px ~ 768px 사이일 때 */
@media (min-width: 37.5em) and (max-width: 48em) { /* 600px ~ 768px */
    body:not(.home) .site-title {
        font-size: 1.2rem;
    }
}

/* 960px(60em) 이하 구간: 햄버거 메뉴 + 서브메뉴 전체 노출 */
@media screen and (max-width: 60em) {
    /* 1. 햄버거 버튼 활성화 */
    .js .menu-toggle {
        display: flex !important;
        margin: 0 auto;
    }

    /* 2. 메인 메뉴 리스트 초기 설정 (토글 시 노출) */
    .main-navigation ul#top-menu {
        display: none !important;
        width: 100%;
        padding: 0;
        margin: 0;
    }

    .main-navigation.toggled-on ul#top-menu {
        display: block !important;
    }

    /* 3. 서브메뉴(ul ul) 강제 펼침 */
    .main-navigation ul ul {
        display: block !important; /* 처음부터 펼쳐짐 */
        position: relative !important;
        top: auto !important;
        left: auto !important;
        float: none !important;
        width: 100% !important;
        visibility: visible !important;
        opacity: 1 !important;
        padding-left: 20px !important; /* 서브메뉴 들여쓰기 */
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
    }

    /* 4. 불필요한 서브메뉴 토글 버튼(v 아이콘) 숨기기 */
    .main-navigation .dropdown-toggle {
        display: none !important;
    }

    /* 5. 메뉴 항목 스타일 정리 */
    .main-navigation ul li {
        display: block !important;
        width: 100%;
        text-align: left; /* 들여쓰기 효과를 위해 왼쪽 정렬 추천 */
        border-bottom: 1px solid #555;
    }

    .main-navigation ul ul li {
        border-bottom: none !important; /* 서브메뉴 사이에는 선 생략 */
    }

    .main-navigation a {
        padding: 12px 15px !important;
        display: block;
    }

	.navigation-top nav {
		margin-left: 0;
	}
/* 토글된 상태에서 펼쳐진 메뉴 영역만 어둡게 */
.main-navigation.toggled-on {
  background-color: #222;   /* 검정 배경 */
}

.main-navigation.toggled-on a {
  color: #fff;              /* 링크는 흰색 */
}

.main-navigation ul {
    background: #222;
    list-style: none;
    margin: 0;
    padding: 0 1.5em;
    text-align: left;
}

.icon {
    height: 1.4em;
    width: 1.4em;
}


}

/* 960px 초과: 원래 데스크탑 스타일 유지 */
@media screen and (min-width: 60.0625em) {
    .js .menu-toggle {
        display: none !important;
    }
    .main-navigation ul#top-menu {
        display: flex !important;
    }
}

/* 스티키 상태일 때만 적용되는 스타일 */
.site-navigation-fixed {
    background: rgba(255, 255, 255, 0.95); /* 배경 약간 투명하게 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 하단 그림자 */
    transition: background 0.3s ease;
}


/* ------------------ 망보드 관련 CSS 모음 START ----------------------*/
/* 페이지 ID가 15, 105에서만 망보드 리드 부분의 <p> 태그에만 적용 */
.page-id-15 .mb-style1.board-view p, .page-id-105 .mb-style1.board-view p {
    margin-bottom: 0 !important;  /* margin-bottom을 0으로 설정 */
    line-height: 1.5 !important;  /* 줄 간격을 1.1로 설정 (적당한 간격) */
}

/* 페이지 72에만 적용 list에 롤오버 적용하고 이름 가리기 */
body.page-id-72 .gallery-item-img {
    border-color: #000 !important; /* 기본 border 색상 */
}

body.page-id-72 .gallery-item-img:hover {
    border-color: red !important; /* 마우스 오버 시 border 색상 */
}

body.page-id-72 .gallery-name {
    display: none !important; /* gallery-name 숨기기 */
}

/* view에서 이름 가리기 */
body.page-id-72 #mb_gallery_tr_user_name {
    display: none !important; /* 'mb_gallery_tr_user_name' 숨기기 */
}
 /* read more button 추가 */
 .read-more-button {
    display: inline-block;
    border: 2px solid #ff7979;
    color: #ff7979 !important;
    background: transparent;
    padding: 8px 21px;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: bold; /* 볼드 적용 */
}

.read-more-button:hover {
    color: #46d846 !important;
    border-color: #46d846;
    background: transparent;
}

/* 아이소메트릭 레이아웃 */
.isometric-image {
  display: inline-block;
  width: 100%; /* 반응형으로 크기 조정 */
  max-width: 600px; /* 최대 너비는 600px로 제한 */
  height: auto;
  transform: rotateX(30deg) rotateZ(15deg) !important;
  transition: transform 0.6s ease, box-shadow 0.6s ease !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3) !important;
  -webkit-transform: rotateX(30deg) rotateZ(15deg); /* 사파리용 프리픽스 */
  will-change: transform; /* 하드웨어 가속을 유도 */
}

/* 호버 시 애니메이션 */
.isometric-image:hover {
  transform: rotateX(20deg) rotateZ(15deg) translateY(-10px) !important;
  box-shadow: 0 30px 50px rgba(0, 0, 0, 0.5) !important;
  -webkit-transform: rotateX(20deg) rotateZ(15deg) translateY(-10px); /* 사파리용 프리픽스 */
}

/* 이미지 아래 텍스트 캡션 */
.isometric-caption {
  text-align: center;
  margin-top: 10px;
  opacity: 0;
  transition: opacity 0.3s ease !important;
}

/* 호버 시 캡션 나타나기 */
.isometric-image:hover + .isometric-caption {
  opacity: 1 !important;
}

/* gallery masonry start */

.masonry-item {
    width: 30%; /* 3열 레이아웃 */
    margin: 8px; /* 간격 추가 (패딩 대신 사용) */
    position: relative;
    overflow: hidden;
    border-radius: 10px !important; /* 부모 요소의 둥근 테두리 */
}

.gallery-item-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0; /* 내부 패딩 제거 */
    box-sizing: border-box; /* 패딩 및 테두리 포함 */
}

.masonry-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px; /* 이미지 둥근 테두리 */
}

.masonry-item .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* 부모 크기와 일치 */
    height: 100%; /* 부모 크기와 일치 */
    background-color: rgba(0, 0, 0, 0.5); /* 반투명 효과 */
    border-radius: 10px; /* 오버레이 둥근 테두리 */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0); /* 초기 상태 */
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.masonry-item:hover .overlay {
    opacity: 1;
    pointer-events: auto; /* hover 상태에서 활성화 */
}


/* 레이어 타이틀 스타일 */
.masonry-item .overlay-title {
    color: white;
    font-size: 1.2rem;
    text-align: center;
    margin: 0; /* 여백 제거 */
    padding: 0; /* 여백 제거 */
    box-sizing: border-box !important; /* 내부 여백이 크기에 영향을 주지 않게 설정 */
}

/* 태블릿 (1024px 이하) */
@media (max-width: 1024px) {
    .masonry-item {
        width: calc(50% - 16px); /* 태블릿에서 2열 배치 */
        margin: 8px; /* 간격 유지 */
    }
    .overlay {
        background-color: rgba(0, 0, 0, 0.5); /* 태블릿에서 약간 어두운 반투명 */
    }
    .overlay-title {
        font-size: 1.2rem; /* 태블릿에서 적절한 크기 */
        padding: 4px; /* 타이틀 여백 조정 */
    }
}

/* 모바일 (768px 이하) */
@media (max-width: 768px) {
    .masonry-item {
        width: 100%; /* 모바일에서 1열 배치 */
        margin: 4px 0; /* 상하 간격 좁게 조정 */
    }
    .overlay {
        background-color: rgba(0, 0, 0, 0.4); /* 투명도를 낮춰 부드럽게 */
    }
    .overlay-title {
        font-size: 0.9rem; /* 모바일에서 더 작은 폰트 크기 */
        padding: 6px; /* 텍스트 주변 여백 최소화 */
    }
}

/* masonry에 추가적인 animation기능 추가 */
/* 초기 상태 (보이지 않음) */
.fade-in-target {
    opacity: 0;
    transform: translateY(20px); /* 아래에서 위로 등장하는 애니메이션 */
    transition: opacity 1s ease, transform 1s ease;
}

/* 활성화 상태 (보이는 상태) */
.fade-in-target.fade-in-visible {
    opacity: 1;
    transform: translateY(0); /* 원래 위치로 이동 */
}

/* gallery masonry end */
/*////////////////////////////////////////////*/
/* blog masonry end */ 
/* Masonry Grid 레이아웃 */
.bmasonry-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.bmasonry-item .gallery-item-wrap {
    width: 100%; /* 부모 항목 크기에 맞게 조정 */
    height: auto; /* 콘텐츠에 따라 자동 조정 */
    display: block; /* 레이아웃 흐름에 맞게 블록 요소로 설정 */
    margin: 0 auto; /* 중앙 정렬 */
    box-sizing: border-box; /* 패딩과 보더를 포함한 크기 계산 */
}

.bmasonry-grid .bmasonry-item {
    width: 30%;
    margin: 8px;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}

.bmasonry-grid .bmasonry-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 10px;
}

.bmasonry-grid .blog-title {
    font-size: 1rem;
    margin: 8px 0 4px;
    font-weight: bold;
}

.bmasonry-grid .blog-content {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 8px;
}

.bmasonry-grid .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    color: #fff;
}

.bmasonry-grid .bmasonry-item:hover .overlay {
    opacity: 1;
}

.bmasonry-grid .overlay .read-more {
    font-size: 1rem;
    font-weight: bold;
    color: #ff7979 !important; /* 기본 텍스트 색상 */
    border: 2px solid #ff7979 !important; /* 2px 아웃라인 */
    padding: 10px 15px; /* 버튼 형태를 위한 패딩 */
    /* border-radius: 5px;  버튼 모서리 둥글게 */
    text-decoration: none; /* 링크 밑줄 제거 */
    background: none; /* 배경색 없음 */
    transition: color 0.3s ease, border-color 0.3s ease; /* 부드러운 전환 효과 */
}

.bmasonry-grid .overlay .read-more:hover {
    color: #333 !important; /* 호버 시 텍스트 색상 변경 */
    border-color: #333 !important; /* 호버 시 아웃라인 색상 변경 */
}

/* 모바일 대응 (1컬럼) */
@media (max-width: 768px) {
    .bmasonry-grid .bmasonry-item {
        width: 100%;
        margin: 4px 0;
    }
}
/* blog masonry end */
/*////////////////////////////////////////////*/
/* 모바일 화면 대응 */
@media only screen and (max-width: 768px) {
	/* 아이소메트릭 레이아웃 */
	  .isometric-image {
		max-width: 100%; /* 모바일에서는 화면 크기에 맞게 이미지 크기 조정 */
		transform: rotateX(25deg) rotateZ(10deg); /* 각도 조정, 모바일에서 좀 더 부드럽게 보이도록 */
	  }
	}

 /* custom.tpl.prev_next.php 레이아웃 수정후 추가한 css START*/
 /* 페이지 ID 105과 72에만 적용되는 CSS */
.page-id-105 .prev_next_style .table-prev-next,
.page-id-72 .prev_next_style .table-prev-next {
    width: 100%;
}

.page-id-105 .prev_next_style .prev_title,
.page-id-72 .prev_next_style .prev_title,
.page-id-105 .prev_next_style .next_title,
.page-id-72 .prev_next_style .next_title {
    font-size: 16px; /* 기본 크기 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* 말줄임표 */
}

@media screen and (max-width: 768px) {
    .page-id-105 .prev_next_style .table-prev-next,
    .page-id-72 .prev_next_style .table-prev-next {
        display: block;
        width: 100%;
    }
    .page-id-105 .prev_next_style td,
    .page-id-72 .prev_next_style td {
        display: block;
        text-align: center;
        width: 100%;
        margin-bottom: 10px;
    }
    .page-id-105 .prev_next_style span,
    .page-id-72 .prev_next_style span {
        font-size: 14px; /* 모바일에서 텍스트 크기 조정 */
    }
}
/* custom.tpl.prev_next.php 레이아웃 수정후 추가한 css END*/

/* 페이지 ID 15에서만 적용되는 pigeons 보드의 이미지 호버 효과 */
/* bmasonry-item의 라운드 제거 */
.page-id-15 .bmasonry-item {
    border-radius: 0 !important; /* 모든 모서리를 사각형으로 설정 */
}

/* 부모 요소에 보더를 설정 */
.page-id-15 .pigeons-item {
    background-color: #efefef; /* 부모 요소의 배경색 설정 */
    border: 1px solid #efefef; /* 기본 보더 색상 */
    border-radius: 0 !important; /* 반드시 사각형 모서리 유지 */
    display: inline-block; /* 요소 크기 조정 */
    transition: border-color 0.3s ease-in-out; /* 보더 색상 애니메이션 */
    overflow: hidden; /* 확장 시 보더 잘림 방지 */
}

/* 이미지의 확대 효과 */
.page-id-15 .pigeons-item img.hover-zoom {
    transition: transform 0.3s ease-in-out; /* 확대 애니메이션 */
    display: block; /* 레이아웃 안정화 */
    border-radius: 0 !important; /* 이미지의 라운드도 강제 제거 */
}

/* 호버 시 보더 색상 변경 */
.page-id-15 .pigeons-item:hover {
    background-color: #999;
    border-color: #999; /* 보더 색상 변경 */
}

.page-id-15 .pigeons-item img.hover-zoom:hover {
    transform: scale(1.1); /* 이미지 확대 */
}

/* 타이틀 스타일 (보더와 분리) */
.page-id-15 .pigeons-item h5.blog-title {
    margin-top: 10px; /* 이미지와 타이틀 간 여백 추가 */
}