/* assets/css/common.css */

/* PC: max-width 1024px 중앙정렬 / 1000px 이하: 모바일 시안 */
:root{
  --wrap: 1024px;
  --mobile-break: 1000px;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", Arial,
               "Noto Sans KR", sans-serif;
}
a{ color:inherit; text-decoration:none; }

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin:0 auto;
  padding:0;
  position: relative;
}

.wrap img {width: 100%;}

.img-placeholder{
  background:#f3f3f3;
  border:1px dashed #bbb;
  border-radius:10px;
}

/* Header */
.site-header{ position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid #eee; }
.header-inner{ height:80px; display:flex; align-items:center; justify-content:space-between; gap:20px; }

.gnb{ display:block; }
.gnb-list{ list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:28px; }
.gnb-item > a{ padding:10px 2px; display:inline-block; }
.gnb-item.is-active > a{ font-weight:700; }
.gnb-item.has-sub{ position:relative; }
.gnb-item.has-sub .sub{
  display:none;
  position:absolute; left:0; top:100%;
  min-width:180px;
  padding:10px;
  background:#fff;
  border:1px solid #eee;
  border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
}
.gnb-item.has-sub .sub a{ display:block; padding:10px; border-radius:10px; }
.gnb-item.has-sub .sub a:hover{ background:#f7f7f7; }
@media (hover:hover){
  .gnb-item.has-sub:hover .sub{ display:block; }
}

/* Mobile Nav Button */
.btn-nav{
  display:none;
  width:44px; height:44px;
  border:0;
  background:#fff;
  border-radius:12px;
  cursor:pointer;
  position:relative;
}
.btn-nav span{
  display:block;
  width:18px; height:2px;
  background:#111;
  position:absolute; left:50%;
  transform:translateX(-50%);
}
.btn-nav span:nth-child(1){ top:14px; }
.btn-nav span:nth-child(2){ top:21px; }
.btn-nav span:nth-child(3){ top:28px; }

/* Mobile Nav Panel */
.mnav{ display:none; border-top:1px solid #eee; background:#fff; }
.mnav.is-open{ display:block; }
.mnav-inner{ padding:16px 10px 20px; display:flex; flex-direction:column; gap:10px; }
.mnav-link{ padding:12px 0;border-bottom:1px solid #f2f2f2; }
.mnav-accordion{
  padding:12px 0;
  background:transparent;
  border:0;
  border-bottom:1px solid #f2f2f2;
  text-align:left;
  cursor:pointer;
  font:inherit;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.mnav-panel{ display:none; padding:6px 0 10px 12px; }
/* 모바일 아코디언 기본 펼침 상태용 */
.mnav-panel.is-open{ display:block; }

/* aria-expanded 상태에 따른 화살표 회전(옵션) */
.mnav-accordion[aria-expanded="true"] .chev{
  display:inline-block;
  transform:rotate(180deg);
}
.mnav-panel a{ display:block; padding:10px 0; color:#333; }

.mnav-row{
  display:flex;
  align-items:center;
  justify-content:space-between;  
}

.mnav-row .mnav-link{
  flex:1;
  display:block;          /* 기존 한줄 영역 유지 */
}

.mnav-row .mnav-accordion{
  flex:0 0 44px;          /* 화살표 버튼 폭 고정 */
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  background:none;
  border-bottom:1px solid #f2f2f2;
}

/* Page Layout */
.page{ padding:0; }
.section{ margin:0; }
.section-title{ font-size:22px; font-weight:800; margin:0 0 14px; }

/* Responsive YouTube */
.video-wrap{
  position:relative;
  width:100%;
  padding-top:56.25%;
  background:#f3f3f3;
  border:1px dashed #bbb;
  border-radius:14px;
  overflow:hidden;
}
.video-wrap iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0;
}

/* Footer */
.site-footer{ border-top:0; padding:0; background:#fff; }

/* 버튼(임시) */
.btn-more{
  height:44px;
  padding:0 18px;
  border:1px solid #ddd;
  background:#fff;
  border-radius:12px;
  cursor:pointer;
}

/* Mobile Breakpoint */
@media (max-width:1000px){
  .gnb{ display:none; }
  .btn-nav{ display:block; }
  .header-inner{ height:64px; }
  .page{ padding:0; }
}
/* wrap 보조 클래스 */
.wrap--no-pad{
  padding-left:0;
  padding-right:0;
}

@media (max-width:1000px){
  .wrap--mo-edge{
    padding-left:0;
    padding-right:0;
  }
}

/* 섹션 상단/하단 마진 제거용 */
.section--no-margin{
  margin:0;
}

/* =====================
   Main Slider
===================== */

.slider{
  position:relative;
  overflow:hidden;
  border-radius:0; /* 둥글게 가려면 16px */
}

.slider__track{
  display:flex;
  transition:transform .35s ease;
  will-change:transform;
}

.slider__item{
  min-width:100%;
}

/* PC: 정확히 700 고정 */
.slider__item a,
.slider__item .no-link{
  display:block;
  width:100%;
  height:700px;
}

.slider__img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* MO: 가로 100%, 세로 auto */
@media (max-width:1000px){
  .slider__item a,
  .slider__item .no-link{
    height:auto;
  }

  .slider__img{
    height:auto;
    object-fit:contain;
  }
}

/* 이미지 드래그 방지 (PC 스와이프용) */
.slider__img{
  -webkit-user-drag:none;
  user-drag:none;
  user-select:none;
  -webkit-user-select:none;
  pointer-events:none;
}

/* =====================
   Main Slider Arrow
===================== */

#mainSlider{ position: relative; } /* 혹시 몰라서 한 번 더 안전빵 */

.mainSlideArrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  border-radius:999px;
  border:0;
  background:rgba(255,255,255,.85);
  box-shadow:0 6px 18px rgba(0,0,0,.12);
  cursor:pointer;
  z-index:10;
  padding:0;
}

.mainSlideArrow--prev{ left:14px; }
.mainSlideArrow--next{ right:14px; }

/* 아이콘 */
.mainSlideArrow::before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:10px;
  height:10px;
  border-right:3px solid #0b8fc4;
  border-bottom:3px solid #0b8fc4;
  transform:translate(-50%,-50%) rotate(135deg);
}
.mainSlideArrow--next::before{
  transform:translate(-50%,-50%) rotate(-45deg);
}

@media (max-width:1000px){
  .mainSlideArrow{
    width:38px;
    height:38px;
  }
  .mainSlideArrow--prev{ left:10px; }
  .mainSlideArrow--next{ right:10px; }
}

/* =========================
   PC / Mobile 전용 클래스
========================= */

/* 기본: 둘 다 보이게 두지 않고, 명확하게 제어 */
.pc_only{
  display:block;
}

.mo_only{
  display:none;
}

@media (max-width:1000px){
  .pc_only{
    display:none !important;
  }

  .mo_only{
    display:block !important;
  }
}

/* =========================
   Reviews Slider (Main) - Screenshot 1:1
========================= */

#home-reviews{
  background:#fff7e7;
  padding:30px 0 40px;
}

.reviews{ }

.reviews__slider{
  overflow:hidden;
  user-select:none;
  -webkit-user-select:none;
  touch-action:pan-y;
}

.reviews__track{
  display:flex;
  gap:18px; /* 스샷 간격 느낌 */
  transition: transform .35s ease;
  will-change: transform;
  cursor:grab;
}
.reviews__slider.is-dragging .reviews__track{
  transition:none !important;
  cursor:grabbing;
}

/* 카드: 스샷 기준 고정폭 */
.reviews__card{
  flex: 0 0 258px;          /* ✅ 스샷 폭 */
  border-radius:18px;
  background:#fff;
  border:1px solid #dedede;
  position: relative;
}

/* 상단 이미지 */
.reviews__thumb{
  width:100%;
  height:175px;
  background:#f2f2f2;

  border-top-left-radius:18px;
  border-top-right-radius:18px;
  overflow:hidden; /* 이미지 크롭용 */
  position: relative;
  z-index: 1;
}
.reviews__thumb img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position: top center;   /* ✅ 상단부터 보이게 크롭 */

  -webkit-user-drag:none;
  user-drag:none;
  user-select:none;
  -webkit-user-select:none;
  pointer-events:none;
}

/* 하단 본문 */
.reviews__body{
  position: relative;
  z-index: 2;
  padding:14px 16px 16px;
  background:#fff;

  border-bottom-left-radius:18px;
  border-bottom-right-radius:18px;

  /* ✅ 여기 추가 */
  border-top-left-radius:18px;
  border-top-right-radius:18px;

  margin-top:-18px; /* ✅ 겹치게 만들어 스샷처럼 자연스럽게 */
}

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

.reviews__stars{
  font-size:14px;
  letter-spacing:2px;
  color:#1f5bff;
  white-space:nowrap;
}

.reviews__writer{
  font-size:14px;
  font-weight:700;
  color:#111;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:45%;
}

.reviews__text{
  font-size:14px;
  line-height:1.55;
  color:#222;

  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden;

  min-height: calc(1.55em * 4);
}

/* MO: 카드 크게(옆 카드 살짝 보이게) */
@media (max-width:1000px){
  #home-reviews{
    padding:22px 0 34px;
  }
  .reviews__track{
    gap:18px;
  }
  .reviews__card{
    flex: 0 0 78%;
  }
  .reviews__thumb{
    height:190px;
  }
}

/* =========================
   FAQ (Main) - Final UI
========================= */

#home-faq{
  padding:0;
}

.faq{
  max-width:720px;
  margin:0 auto;
}

.faq__item{
  margin:18px 0;
  position:relative;
}

/* =====================
   질문 버튼
===================== */
.faq__q{
  width:100%;
  border:0;
  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;

  padding:20px 26px;

  border-radius:28px;             /* 기본 둥글 */
  background:#0b2f45;
  color:#fff;

  font-size:18px;
  font-weight:700;
  line-height:1.2;

  transition: border-radius .2s ease;
}

/* 열렸을 때 아래 모서리 직각 */
.faq__item.is-open .faq__q{
  border-bottom-left-radius:8px;
  border-bottom-right-radius:8px;
}

/* 질문 텍스트 중앙 정렬 느낌 */
.faq__qtext{
  flex:1;
  text-align:center;
  padding-left:24px;
}

/* 화살표 */
.faq__chev{
  width:26px;
  height:26px;
  flex:0 0 26px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: transform .25s ease;
}

.faq__item.is-open .faq__chev{
  transform: rotate(180deg);
}

/* =====================
   답변 영역
===================== */

.faq__a{
  overflow:hidden;
  max-height:0;
  transition:max-height .3s ease;
}

/* 답변 카드 */
.faq__acard{
  margin:0;                        /* 질문과 붙임 */
  padding:22px 24px;

  background:#f3f4f6;
  border:1px solid #e5e7eb;

  border-top:0;                    /* 질문과 자연 연결 */
  border-radius:0 0 20px 20px;     /* 아래만 둥글 */

  color:#111827;
  font-size:15px;
  line-height:1.75;
}

/* ANSWER 라벨 */
.faq__label{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:6px 12px;
  border-radius:999px;

  background:#0b2f45;   /* 질문색과 동일 */
  color:#fff;

  font-size:12px;
  font-weight:800;
  letter-spacing:.5px;

  margin-bottom:14px;
}
.float-div {position: relative;}
.float-inner {position: absolute;top: 63%;right: 5%;z-index: 10;}
.float-inner-sub {top: 83%;right: 5%;}

/* =====================
   모바일
===================== */
@media (max-width:1000px){
.float-inner {
  top: 76%;
  right: 5%;
  width: 15%;
}
.float-inner-sub {
  top: 83%;
  right: 5%;
  width: 15%;
}
/*.float-img {width: 50% !important;}*/

  #home-faq{
    padding:0;
  }

  .faq{
    max-width:100%;
    padding:0 14px; /* 모바일 좌우 여백 */
  }

  .faq__item{
    margin:12px 0;  /* 간격 줄임 */
  }

  .faq__q{
    padding:14px 16px;     /* ✅ 높이 줄임 */
    font-size:14px;        /* ✅ 폰트 줄임 */
    border-radius:18px;    /* ✅ 라운드 줄임 */
  }

  .faq__item.is-open .faq__q{
    border-bottom-left-radius:8px;
    border-bottom-right-radius:8px;
  }

  .faq__qtext{
    padding-left:14px;     /* 아이콘 공간 보정 */
    font-weight:700;
    line-height:1.25;

    /* ✅ 모바일에서 너무 커 보이는 핵심: 2줄 제한 */
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }

  .faq__chev{
    width:22px;
    height:22px;
    flex:0 0 22px;
  }

  .faq__acard{
    padding:14px 14px;     /* 답변도 컴팩트 */
    font-size:14px;
    line-height:1.65;
    border-radius:0 0 16px 16px;
  }

  .faq__label{
    padding:5px 10px;      /* 배지 크기 줄임 */
    font-size:11px;
    margin-bottom:10px;
  }
}

@media (max-width:1000px){

  .header__inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
  }

  /* 햄버거 왼쪽 */
  .nav-toggle{
    order:1;
  }

  /* 로고 오른쪽 */
  .logo{
    order:2;
    margin-right:14px; /* ✅ 오른쪽 여백 살짝 */
  }

}

/* sub7 notice board */
.notice-wrap{ max-width: 720px; margin: 30px auto; }
.notice-top{ padding: 0 8px; }
.notice-count{ font-weight: 700; font-size: 16px; }
.notice-line{ height:1px; background:#cfcfcf; margin-top:10px; }

.notice-list{ border-top: 1px solid transparent; }

.notice-row{
  display:grid;
  grid-template-columns: 44px 70px 1fr 110px;
  align-items:center;
  gap: 12px;
  padding: 18px 8px;
  text-decoration:none;
  color: inherit;
  border-bottom:1px solid #ededed;
}

.notice-row .c-no{ font-size: 13px; color:#444; }
.notice-row .c-tag{ font-size: 13px; color:#2f7dd1; }
.notice-row .c-title{ font-size: 14px; color:#222; }
.notice-row .c-date{ font-size: 13px; color:#666; text-align:right; }

.notice-empty{
  padding: 40px 8px;
  text-align:center;
  color:#666;
  border-bottom:1px solid #ededed;
}

/* paging (◀ 1 ▶) */
.paging{ display:flex; justify-content:center; }
.paging-inner{ display:flex; align-items:center; gap: 10px; }

.pg-btn, .pg-current{
  width: 34px; height: 34px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid #e6e6e6;
  background:#fff;
  font-size: 14px;
  line-height:1;
}

.pg-btn{ cursor:pointer; }
.pg-btn.is-disabled{ opacity:.35; cursor:default; }
.pg-current{ font-weight:700; }

.notice-view-head{ border-bottom:1px solid #e5e5e5; padding:16px 0; }
.notice-view-type{ font-size:13px; color:#2f7dd1; margin-bottom:6px; }
.notice-view-title{ font-size:18px; font-weight:700; line-height:1.35; }
.notice-view-date{ font-size:13px; color:#666; margin-top:8px; }
.notice-view-body{ padding:18px 0; line-height:1.7; color:#222; }

.notice-view-foot{
  padding-top:24px;
  border-top:1px solid #e5e5e5;
  text-align:center;   /* 가운데 정렬 */
}

.notice-back-btn{
  display:inline-block;
  min-width:140px;
  padding:12px 28px;
  border-radius:28px;
  background:#2f7dd1;
  color:#fff;
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  transition:all .2s ease;
}

.notice-back-btn:hover{
  background:#2567b0;
  transform:translateY(-2px);
}

.notice-back-btn:active{
  transform:translateY(0);
}

/* mobile tweak */
@media (max-width:1000px){
  .notice-wrap{ max-width: 100%; }
  .notice-row{ grid-template-columns: 34px 62px 1fr 92px; }

  /* 상세 전체 컨테이너 */
  .notice-view{
    padding: 0 20px;   /* 좌우 여백 */
  }

  /* 혹시 내부 텍스트가 꽉 차있으면 추가 보정 */
  .notice-view-head,
  .notice-view-body,
  .notice-view-foot{
    padding-left: 0;
    padding-right: 0;
  }
  
}

/* sub2 products */
.product-block{
  padding:70px 0;                 /* 상/하단 패딩 70px */
}

.product-block__inner{
  width:784px;                    /* 상품 목록 width = 784px */
  max-width:100%;
  margin:0 auto;
}

.product-block__title{
  margin-bottom:22px;
}

.product-block__title img{
  max-width:100%;
  height:auto;
}

.product-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px 18px;
}

.product-card{
  display:block;
  text-decoration:none;
  color:inherit;
}

.product-thumb{
  position:relative;
  width:100%;
  aspect-ratio: 1 / 1;
  background:#fff;
  border:1px solid #e9e9e9;
  border-radius:6px;
  overflow:hidden;
}

.product-thumb img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.product-name{
  margin-top:10px;
  font-size:13px;
  line-height:1.35;
  color:#222;
  word-break:keep-all;
  text-align:center;
}

.product-actions{
  display:flex;
  flex-direction:column;
  align-items:center;
  margin-top:18px;
}

.product-more{
  min-width:120px;
  height:34px;
  padding:0 18px;
  border-radius:18px;
  background:#1f2a3a;
  color:#fff;
  border:0;
  cursor:pointer;
  font-size:13px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

.product-more::before{
  content:"\2193"; /* ↓ */
  font-size:14px;
}

.product-more.is-hidden{
  display:none;
}

.product-learn-more{
  min-width:120px;
  height:34px;
  padding:0 18px;
  border-radius:18px;
  background:#5a7d9a;
  color:#fff;
  border:0;
  cursor:pointer;
  font-size:13px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:8px;
  width:100%;
  max-width:fit-content;
}

/* mobile */
@media (max-width:1000px){
  .product-block__inner{
    width:100%;
    padding:0 20px;               /* 모바일 좌우 여백 */
  }
  .product-grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 12px;   /* 모바일에서 살짝 타이트하게 */
  }
  .product-thumb{
    border-radius:4px;
  }
  .product-name{
    font-size:12px;
  }
  .product-block__title{
    text-align:center;   /* 모바일에서만 가운데 */
  }

  .product-block__title .product-title-img{
    margin:0 auto;       /* 이미지 자체도 중앙 */
  }
}

/* wrap img {width:100%} 예외: 제품 타이틀 이미지는 원본 크기 유지 */
.product-block__title .product-title-img{
  width: auto !important;
  max-width: 100%;
  height: auto;
}

/* 썸네일 hover 효과 */
.product-thumb{
  position:relative;
  overflow:hidden;
}

.product-zoom-icon{
  position:absolute;
  right:8px;
  bottom:8px;
  width:28px;
  height:28px;
  background:#fff;
  border-radius:50%;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transform:translateY(6px);
  transition:all .2s ease;
}

/* 돋보기 아이콘 */
.product-zoom-icon::before{
  content:"🔍";
  font-size:14px;
}

/* PC hover 시 나타남 */
.product-card:hover .product-zoom-icon{
  opacity:1;
  transform:translateY(0);
}

/* 이미지 살짝 확대 효과 */
.product-card:hover .product-thumb img{
  transform:scale(1.05);
  transition:transform .3s ease;
}

/* 모바일에서는 항상 살짝 보이게 */
@media (max-width:1000px){
  .product-zoom-icon{
    opacity:.85;
    transform:none;
  }
}

/* hy가 걸어온 길 */
#home-history{
  padding:0;
}

#home-history .faq{
  width:780px;
  max-width:100%;
  margin:0 auto;
}

/* 제목 */
#home-history .faq__q{
  background:#009ecd;
  color:#fff;
  border-radius:12px;
  font-weight:700;
  font-size:18px;
}

/* FAQ와 동일 화살표 스타일 사용 */
#home-history .faq__chev{
  display:flex;
  align-items:center;
  justify-content:center;
  transition: transform .25s ease;
}

#home-history .faq__item.is-open .faq__chev{
  transform: rotate(180deg);
}

/* 열렸을 때 회전 */
#home-history .faq__item.is-open .faq__chev{
  transform: rotate(180deg);
}

/* 내용 박스 */
#home-history .faq__acard{
  background:#fff7e7;
  border:none;
  border-radius:12px;
  margin-top:0;         /* 요청 */
  padding:26px 30px;
  box-shadow:none;      /* 요청 */
}

/* 리스트 */
.history-list{
  font-size:16px;
  line-height:1.9;
  color:#222;
}

.history-row b{
  display:inline-block;
  width:84px;
  font-weight:800;
}

/* 모바일 */
@media (max-width:1000px){
  #home-history .faq{
    width:100%;
    padding:0 20px;
  }
  .history-list{ font-size:14px; }
  .history-row b{ width:72px; }
}

/* =======================
   Footer (전체)
   - 배경은 full width
   - 콘텐츠(.site-footer)는 1024px 제한
======================= */
.footer-bg--top{ background:#f4f4f4; }
.footer-bg--bottom{ background:#1f334a; }

.site-footer{
  max-width:1024px;
  width:100%;
  margin:0 auto;
}

/* ========== 1단 (회색) ========== */
.footer-top{ padding:60px 0; }

.footer-top-inner{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:60px;
}

.footer-brand{ min-width:160px; }

.footer-logo{
  font-size:28px;
  font-weight:700;
  margin-bottom:18px;
  color:#111;
}

.footer-copy{
  font-size:14px;
  line-height:1.6;
  color:#666;
}

.footer-menu{
  display:flex;
  gap:80px;
}

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

.footer-menu li{ margin-bottom:18px; }

.footer-menu a{
  text-decoration:none;
  font-size:20px;
  font-weight:500;
  color:#222;
  transition:opacity .2s ease;
}
.footer-menu a:hover{ opacity:.6; }

/* ========== 2단 (남색) ========== */
.footer-bottom{
  padding:70px 0;
  color:#fff;
}

.footer-bottom-inner{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:70px;
}

.footer-bottom h3{
  font-size:22px;
  font-weight:700;
  margin-bottom:24px;
  color:#fff;
}

/* 전화번호 한 줄 */
.footer-phone{
  font-size:40px;
  font-weight:700;
  margin-bottom:20px;
  letter-spacing:0.5px;
  white-space:nowrap;
}
.footer-phone a{
  color:#fff;
  text-decoration:none;
}
.footer-phone a:hover{ opacity:.85; }

/* 회사정보 라인 */
.footer-line{
  font-size:16px;
  line-height:1.8;
  margin-bottom:6px;
  color:#d8dfe6;
  white-space:nowrap;
}

.footer-addr{
  font-size:15px;        /* 주소는 길어서 살짝 작게 */
  letter-spacing:-0.2px;
  white-space:nowrap;
}

.footer-bottom a{
  color:#fff;
  text-decoration:none;
}
.footer-bottom a:hover{ opacity:.85; }

/* =======================
   Mobile (구조 유지)
======================= */
@media (max-width:1000px){
  .site-footer{ padding:0 18px; }

  /* 메뉴 간격 축소 */
  .footer-top-inner{ gap:30px; }
  .footer-menu{ gap:36px; }
  .footer-menu a{ font-size:16px; }

  .footer-logo{ font-size:22px; }

  /* 하단 간격 축소 */
  .footer-bottom-inner{ gap:34px; }
  .footer-bottom h3{ font-size:18px; }
  .footer-phone{ font-size:26px; }

  .footer-line{ font-size:13px; }
  .footer-addr{ font-size:12px; letter-spacing:-0.3px; }
}

/* 아주 좁은 기기에서 한 줄 유지용 최소 축소 */
@media (max-width:420px){
  .footer-phone{ font-size:22px; }
  .footer-addr{ font-size:11px; }
}

/* =========================
   QtoPet Footer (qf-*)
   - 배경은 full width
   - 내용은 max-width 1024
========================= */
.qf{ width:100%; }

.qf-bg--top{ background:#f4f4f4; }
.qf-bg--bottom{ background:#1f334a; }

.qf-wrap{
  max-width:1024px;
  width:100%;
  margin:0 auto;
  padding:0 18px;
  box-sizing:border-box;
}

/* TOP */
.qf-top{
  padding:60px 0;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:60px;
}

.qf-brand{ min-width:180px; }
.qf-logo{ font-size:28px; font-weight:700; color:#111; margin-bottom:18px; }
.qf-copy{ font-size:14px; line-height:1.6; color:#666; }

.qf-menu{
  display:flex;
  gap:80px;
}

.qf-col{ list-style:none; padding:0; margin:0; }
.qf-col li{ margin-bottom:18px; }
.qf-col a{
  text-decoration:none;
  font-size:20px;
  font-weight:500;
  color:#222;
  transition:opacity .2s ease;
}
.qf-col a:hover{ opacity:.6; }

/* BOTTOM */
.qf-bottom{
  padding:70px 0;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:70px;
  color:#fff;
}

.qf-h{
  font-size:22px;
  font-weight:700;
  margin:0 0 24px;
  color:#fff;
}

/* 전화번호 한 줄 */
.qf-phone{
  font-size:40px;
  font-weight:700;
  margin-bottom:20px;
  letter-spacing:.5px;
  white-space:nowrap;
}
.qf-phone a{ color:#fff; text-decoration:none; }
.qf-phone a:hover{ opacity:.85; }

.qf-line{
  margin:0 0 6px;
  font-size:16px;
  line-height:1.8;
  color:#d8dfe6;
  white-space:nowrap;
}

.qf-addr{
  font-size:15px;            /* 주소만 살짝 작게 */
  letter-spacing:-0.2px;
  white-space:nowrap;
}

.qf-bottom a{ color:#fff; text-decoration:none; }
.qf-bottom a:hover{ opacity:.85; }

/* Mobile (구조 유지 + 안정감) */
@media (max-width:1000px){
  .qf-top{ gap:30px; }
  .qf-menu{ gap:36px; }
  .qf-col a{ font-size:16px; }
  .qf-logo{ font-size:22px; }

  .qf-bottom{ gap:34px; }
  .qf-h{ font-size:18px; }
  .qf-phone{ font-size:26px; }
  .qf-line{ font-size:13px; }
  .qf-addr{ font-size:12px; letter-spacing:-0.3px; }
}

@media (max-width:420px){
  .qf-phone{ font-size:22px; }
  .qf-addr{ font-size:11px; }
}
@media (max-width:1000px){

  /* ===== TOP: 3열이 밖으로 안 튀게 안정화 ===== */
  .qf-menu{
    gap:18px;                 /* 간격 더 줄임 */
  }
  .qf-col{
    min-width:0;              /* flex overflow 방지 */
  }
  .qf-col a{
    font-size:14px;           /* 모바일에서 더 줄임 */
    white-space:nowrap;       /* 메뉴는 한 줄 유지 */
  }

  /* 브랜드 영역이 너무 넓게 먹으면 메뉴가 밀리니까 약간 축소 */
  .qf-brand{ min-width:140px; }
  .qf-copy{ font-size:12px; }

  /* ===== BOTTOM: 2컬럼 유지 + 텍스트만 줄바꿈 허용 ===== */
  .qf-bottom{
    gap:18px;                 /* 컬럼 간격 축소 */
  }

  /* 고객센터/회사정보 컬럼 폭 균형 */
  .qf-cs{ flex:0 0 42%; min-width:0; }
  .qf-co{ flex:1; min-width:0; }

  /* 긴 문장(주소/상호명 등) 줄바꿈 허용해서 삐져나감 방지 */
  .qf-line{
    white-space:normal;       /* ← 핵심 */
    word-break:keep-all;
    overflow-wrap:anywhere;   /* 아주 긴 텍스트 대비 */
  }

  /* 전화번호는 한 줄 유지 */
  .qf-phone{
    white-space:nowrap;
    font-size:22px;           /* 조금 더 줄여서 안정 */
  }

  /* 주소는 모바일에서 2줄까지 허용(너무 길어서) */
  .qf-addr{
    font-size:12px;
    letter-spacing:-0.3px;
  }
}
@media (max-width:420px){
  .qf-col a{ font-size:13px; }
  .qf-phone{ font-size:20px; }
}

/* 혹시 남는 1~2px 오버플로우 방지 */
.qf{ overflow-x:hidden; }

/* 모바일에서 flex 아이템 overflow 방지 */
@media (max-width:1000px){
  .qf-top,
  .qf-bottom{
    min-width:0;
  }
  .qf-brand,
  .qf-menu,
  .qf-cs,
  .qf-co{
    min-width:0;
  }

  /* 줄바꿈/오버플로우 방지 강화 */
  .qf-line{
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:keep-all;
  }

  /* 이메일/숫자 라인은 keep-all이면 안 끊길 수 있어서 별도 처리 */
  .qf-co .qf-line a{
    word-break:break-all;
    overflow-wrap:anywhere;
  }
}

/*#######################*/
/* 링크 DIV들 */
/*#######################*/
.btn {position: absolute;cursor: pointer;}
.main_goshop {top: 73%;left: 41%;width: 18%;height: 15%;}
.main_saryo {top: 53%;left: 14%;width: 19%;height: 4%;}
.main_gansik {top: 53%;left: 40.5%;width: 19%;height: 4%;}
.main_yongpum {top: 53%;left: 66%;width: 19%;height: 4%;}
.main_care {top: 85.3%;left: 26.7%;width: 19%;height: 4%;}
.main_deangniger {top: 85.3%;left: 53.7%;width: 19%;height: 4%;}
.main_suscribe {top: 47%;left: 33%;width: 34%;height: 23%;}

.sub_suscribe {top: 65.4%;left: 17.3%;width: 33.7%;height: 13%;}
.sub_consulting {top: 84.2%;left: 11.5%;width: 12.8%;height: 5%;}
.sub_ai_jindan {top: 80.5%;left: 75.5%;width: 12.8%;height: 7%;}
.sub_microom {top: 79.2%;left: 11.5%;width: 12.8%;height: 7%;}
.sub_jangryea {top: 75.2%;left: 11.5%;width: 13.2%;height: 7%;}
.sub_deangniger {top: 76.5%;left: 75.5%;width: 12.8%;height: 7%;}
.sub_baebyun {top: 75.2%;left: 13.5%;width: 13.3%;height: 6%;}
.sub_living {top: 75.2%;left: 38.6%;width: 13.3%;height: 6%;}
.sub_care {top: 75.2%;left: 64.6%;width: 13.3%;height: 6%;}

.sub_gop1 {top: 80.4%;left: 15.3%;width: 17.7%;height: 6.5%;}
.sub_gop2 {top: 80.4%;left: 41.3%;width: 17.7%;height: 6.5%;}
.sub_gop3 {top: 80.4%;left: 66.9%;width: 17.7%;height: 6.5%;}

@media (max-width:1000px){
  .main_goshop {top: 72%;left: 35%;width: 30%;height: 17%;}
  .main_saryo {top: 28.5%;left: 35%;width: 22%;height: 2.7%;}
  .main_gansik {top: 43.6%;left: 35.5%;width: 21%;height: 2.7%;}
  .main_yongpum {top: 58.7%;left: 35%;width: 22%;height: 2.8%;}
  .main_care {top: 74.0%;left: 35.7%;width: 23%;height: 2.8%;}
  .main_deangniger {top: 89.0%;left: 35.7%;width: 21%;height: 2.8%;}
  .main_suscribe {top: 45%;left: 27%;width: 46%;height: 24%;}

  .sub_suscribe {top: 69.7%;left: 8%;width: 44%;height: 16%;}

  .sub_consulting {top: 87.2%;left: 18.5%;width: 26.8%;height: 5%;}
  .sub_ai_jindan {top: 81.5%;left: 17.5%;width: 27.8%;height: 7.2%;}
  .sub_microom {top: 83%;left: 17.5%;width: 27.8%;height: 7%;}
  .sub_jangryea {top: 74.2%;left: 17.5%;width: 27.8%;height: 8%;}
  .sub_deangniger {top: 79.2%;left: 17.5%;width: 27.8%;height: 9%;}
  
  .sub_baebyun {top: 33.6%;left: 17.5%;width: 27.3%;height: 4%;}
  .sub_living {top: 61.6%;left: 17.6%;width: 27.3%;height: 4%;}
  .sub_care {top: 89.5%;left: 17.6%;width: 27.3%;height: 3.5%;}


  .sub_gop1 {top: 28.4%;left: 36.3%;width: 27.7%;height: 3.5%;}
  .sub_gop2 {top: 60.4%;left: 36.3%;width: 26.7%;height: 3.5%;}
  .sub_gop3 {top: 92.4%;left: 36.2%;width: 27.7%;height: 3.0%;}
}

/* empty-state가 그리드 전체 폭을 먹도록 */
.product-block [data-list] .no-product-box{
  grid-column: 1 / -1;   /* ✅ 전체 컬럼 span */
  width: 100%;
  box-sizing: border-box;
  text-align: center;

  /* 기존 스타일 유지/보강 */
  padding: 60px 20px;
  border: 1px solid #e5e5e5;
  background: #fafafa;
  color: #777;
  border-radius: 10px;

  /* 문구 줄바꿈 방지 (지금처럼 '없습니/다' 쪼개짐 방지) */
  word-break: keep-all;
}

@media (max-width:1000px){
  .product-block [data-list] .no-product-box{
    padding: 45px 16px;
    font-size: 14px;
  }
}

/* Vimeo stacked responsive embeds */
.video-stack{
  max-width: 780px;
  width: 100%;
  margin: 0 auto;
}

@media (max-width: 1000px){
  .video-stack{
    width: 90%;
  }
}

.video-box{
  margin: 40px auto;
}

.video-box video{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px; /* 필요 없으면 제거 */
}