/* ===== STARBOAT-LIKE LIGHT THEME (re-implemented) ===== */

:root{
  --bg:#ffffff;
  --text:#111111;
  --muted:#9aa0a6;
  --line:#e9ecef;
  --blue:#0b63ce;         /* 스타보트 느낌의 메인 블루 */
  --blue2:#1a76e8;
  --shadow: 0 18px 40px rgba(0,0,0,.12);
  --radius: 26px;
  --max: 1680px;
  --container: 1200px;
  --fs-base: 16px;   /* 기존 13px → 전체 기본 크기 업 */
  --fs-menu: 18px;   /* 메뉴 크기 */
  --fs-sub: 15px;    /* 설명/서브텍스트 */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  font-family:Poppins,"Noto Sans KR",Arial,sans-serif;
  font-size:var(--fs-base);
  overflow-x:hidden;
}

/* container */
.container{
  width:min(var(--container), 92%);
  margin:0 auto;
}

/* ===== HEADER: transparent overlay (스타보트 같은 느낌) ===== */
.header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:80;
  background:rgba(255,255,255,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(255,255,255,.35);
}

/* fixed header offset */
main.heroWrap{ padding-top:86px; }

.header__inner{
  height:86px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
}
.brand__logo{height:38px;width:auto;display:block}
.brand__text{display:none} /* 로고 이미지 쓰는 느낌으로 */

/* nav */
.nav{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:24px;
  flex:1;
}
.nav__list{
  display:flex;
  align-items:center;
  gap:28px;
  list-style:none;
  margin:0;
  padding:0;
}
.nav__link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:#222;
  font-weight:500;
  font-size:var(--fs-menu);
  letter-spacing:-0.02em;
}

.nav__link:hover{color:var(--blue)}
.nav__searchIcon{
  font-size:20px;
  width:34px; height:34px;
  display:inline-flex;
  align-items:center; justify-content:center;
  border-radius:999px;
  cursor:pointer;
  color:#111;
}
.nav__searchIcon:hover{background:rgba(0,0,0,.04)}

/* mobile toggle */
.nav__toggle{
  display:none;
  width:44px;height:40px;
  border:1px solid var(--line);
  background:#fff;
  border-radius:10px;
}

/* ===== HERO SLIDER (스타보트처럼 크게/풀폭) ===== */
.heroWrap{
  width:100%;
  max-width:none;       /* ✅ 제한 해제 */
  margin:0;
  padding:0;
}

/* fixed header offset */
main.heroWrap{ padding-top:86px; }

.heroViewport{
  position:relative;
  width:100%;
  height:clamp(520px, 72vh, 780px);   /* ✅ 스타보트처럼 크게 */
  overflow:hidden;
  border-bottom-left-radius:140px;
  background:#dfefff;
}

.heroTrack{
  height:100%;
  display:flex;
  transition:transform .7s ease;
  will-change:transform;
}

.heroSlide{
  min-width:100%;
  height:100%;
  background-size:cover;
  background-position:center;
  position:relative;
}

/* 텍스트 안 쓸 거면 제거해도 됨 */
.heroSlide::before{ display:none; }

.heroContent{
  position:relative;
  height:100%;
  display:flex;
  align-items:center;
}

.heroText{
  max-width:560px;
  color:#fff;
  padding-left:6px;
}
.heroPill{
  display:inline-flex;
  padding:9px 16px;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  color:#333;
  font-weight:500;
  font-size:15px;
  letter-spacing:-0.02em;
  margin-bottom:14px;
}

.heroH1{
  margin:0 0 10px;
  font-size:60px;
  line-height:1.08;
  letter-spacing:-0.03em;
  font-weight:700;
}

.heroPagerLine{
  margin-top:24px;
  display:flex;
  align-items:center;
  gap:16px;
  color:rgba(255,255,255,.9);
  font-weight:500;
}
.heroPagerNums{
  display:flex;
  gap:12px;
  font-size:12px;
  letter-spacing:0.08em;
}
.heroBar{
  width:220px;
  height:2px;
  background:rgba(255,255,255,.35);
  position:relative;
}
.heroBarFill{
  position:absolute; left:0; top:0; bottom:0;
  width:50%;
  background:rgba(255,255,255,.95);
  transition:width .7s ease;
}
.heroPause{
  opacity:.85;
  font-size:14px;
}

/* 하단 중앙 작은 인디케이터 */
.heroDots{
  position:absolute;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  display:flex;
  gap:14px;
  z-index:2;
}
.heroDot{
  width:52px;
  height:8px;
  border-radius:999px;
  background:rgba(255,255,255,.28);
  border:1px solid rgba(255,255,255,.18);
  cursor:pointer;
}
.heroDot.is-active{
  background:rgba(255,255,255,.85);
}

/* ===== SECTION COMMON (스타보트처럼 위에 파란 작은 라벨 + 큰 제목) ===== */
.section{
  padding:68px 0;
}
.sectionHead{
  text-align:center;
  margin-bottom:28px;
}
.sectionKicker{
  color:var(--blue);
  font-weight:600;
  letter-spacing:.02em;
  margin:0 0 10px;
}
.sectionTitle{
  font-size:48px;
  line-height:1.15;
  margin:0 0 10px;
  font-weight:700;
  letter-spacing:-0.03em;
}
.sectionSub{
  margin:0;
  color:#b0b6bd;
  font-size:var(--fs-sub);
  letter-spacing:-0.02em;
}


/* ===== YOUTUBE (가운데 + 라운드) ===== */
.ytBox{
  width:min(1280px, 100%);
  margin:0 auto;
  border-radius:22px;
  overflow:hidden;
  box-shadow:var(--shadow);
  background:#000;
  aspect-ratio: 16/9;
}
.ytBox iframe{width:100%;height:100%}

/* ===== Best Products / Products 배경 구분 ===== */
.band{
  background:#f6f7f8;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

/* 검색 라인 */
.searchLine{
  width:min(520px, 92%);
  margin:28px auto 0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
}
.searchLine__inputWrap{
  flex:1;
  border-bottom:2px solid #111;
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 2px;
}
.searchLine input{
  border:none;
  outline:none;
  background:transparent;
  font-size:22px;
  text-align:center;
  width:100%;
  color:#111;
  letter-spacing:-0.02em;
}
.searchLine__icon{
  width:40px;height:40px;
  border-radius:999px;
  display:inline-flex;
  align-items:center; justify-content:center;
  cursor:pointer;
}
.searchLine__icon:hover{background:rgba(0,0,0,.05)}

/* ===== 카드/캐러셀 (스타보트 카드 톤) ===== */
.carousel{
  position:relative;
  width:min(1320px, 96%);
  margin:36px auto 0;
  overflow:hidden;
}
.carouselTrack{
  display:flex;
  gap:34px;
  transition:transform .45s ease;
  will-change:transform;
}
.pCard{
  width:360px;
  flex:0 0 auto;
  text-align:center;
}
.pThumb{
  width:100%;
  height:230px;
  border-radius:26px;
  overflow:hidden;
  background:#ddd;
  position:relative;
  box-shadow:0 12px 25px rgba(0,0,0,.10);
}
.pThumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.pBadge{
  position:absolute;
  left:14px;
  top:14px;
  width:58px;height:58px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:700;
  font-size:14px;
  box-shadow:0 10px 20px rgba(0,0,0,.14);
}
.pBadge.blue{background:var(--blue)}
.pBadge.gray{background:rgba(60,60,60,.65)}
.pTitle{
  margin:18px 0 6px;
  font-size:28px;
  font-weight:700;
  letter-spacing:-0.03em;
}
.pMeta{
  margin:0;
  color:#b0b6bd;
  font-size:14px;
}
.pPrice{
  margin:10px 0 0;
  font-weight:700;
  color:#222;
  font-size:16px;
}

/* 좌우 화살표 */
.cArrow{
  position:absolute;
  top:96px;
  width:44px;height:44px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:5;
  box-shadow:0 10px 18px rgba(0,0,0,.08);
}
.cArrow:hover{background:#f5f5f5}
.cArrow.left{left:8px}
.cArrow.right{right:8px}

/* 더보기 버튼 */
.moreBtnWrap{
  display:flex;
  justify-content:center;
  margin-top:34px;
}
.moreBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:170px;
  height:46px;
  border-radius:999px;
  border:1px solid #999;
  background:#fff;
  cursor:pointer;
  font-weight:600;
}
.moreBtn:hover{border-color:#333}

/* ===== Products 탭 ===== */
.tabs{
  display:flex;
  justify-content:center;
  gap:44px;
  margin:22px 0 0;
}
.tab{
  font-size:18px;
  color:#9aa0a6;
  padding:6px 2px;
  border-bottom:2px solid transparent;
  cursor:pointer;
  user-select:none;
}
.tab.is-active{
  color:var(--blue);
  border-bottom-color:var(--blue);
}

/* products grid */
.pGrid{
  width:min(1320px, 96%);
  margin:28px auto 0;
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:26px 26px;
}
.pGrid .pCard{width:auto}
.pGrid .pThumb{height:170px; border-radius:18px}
.pGrid .pTitle{font-size:18px; margin-top:12px}
.pGrid .pMeta{font-size:13px}
.pGrid .pPrice{font-size:14px}

/* ===== Footer (얇은 텍스트 + 회색 링크 라인) ===== */
.footer{
  padding:60px 0 40px;
  border-top:1px solid var(--line);
}
.footerGrid{
  width:min(1320px, 96%);
  margin:0 auto;
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr .6fr;
  gap:30px;
  color:#222;
}
.footer h4{margin:0 0 10px; font-size:14px}
.footer p{margin:6px 0; color:#444}
.footer small{color:#b0b6bd}
.footerBottom{
  width:min(1320px, 96%);
  margin:26px auto 0;
  display:flex;
  gap:18px;
  color:#b0b6bd;
  font-size:12px;
}
.footerBottom a{color:#b0b6bd}
.footerBottom a:hover{color:#555}

/* ===== Floating buttons (유튜브/카톡) ===== */
.floatBtns{
  position:fixed;
  right:20px;
  bottom:140px;
  display:flex;
  flex-direction:column;
  gap:14px;
  z-index:100;
}
.floatBtn{
  width:78px;height:78px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 18px 30px rgba(0,0,0,.18);
  cursor:pointer;
  text-align:center;
  font-weight:800;
  letter-spacing:-0.02em;
}
.floatBtn--yt{
  background:#e53935;
  color:#fff;
}
.floatBtn--kakao{
  background:#ffd400;
  color:#222;
}
.floatBtn span{display:block; line-height:1.05; font-size:13px}

/* ===== Responsive ===== */
@media (max-width: 1200px){
  .pGrid{grid-template-columns:repeat(3, 1fr)}
  .footerGrid{grid-template-columns:1fr 1fr}
}
@media (max-width: 900px){
  .heroH1{font-size:42px}
  .nav__list{gap:18px}
  .pGrid{grid-template-columns:repeat(2, 1fr)}
}
@media (max-width: 720px){
  .header__inner{height:68px}
  .nav__toggle{display:inline-flex}
  .nav{
    position:fixed;
    top:68px;
    left:0; right:0;
    background:#fff;
    border-bottom:1px solid var(--line);
    padding:14px 16px;
    display:none;
    flex-direction:column;
    align-items:flex-end;
    gap:12px;
  }
  .nav.is-open{display:flex}
  .nav__list{flex-direction:column; align-items:flex-end; gap:12px}
  .heroViewport{height:440px; border-bottom-left-radius:110px}
  .heroH1{font-size:36px}
  .carouselTrack{gap:18px}
  .pCard{width:300px}
  .floatBtns{right:14px}
}
/* ===== COMPANY BLOCK (스타보트 유사 구성) ===== */
.companyBlock{
  width:min(1320px, 96%);
  margin:0 auto;
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:34px;
  align-items:start;
}

.companyKicker{
  color:var(--blue);
  font-weight:700;
  letter-spacing:.02em;
  margin:0 0 10px;
}

.companyTitle{
  font-size:42px;
  line-height:1.15;
  margin:0 0 14px;
  letter-spacing:-0.03em;
  font-weight:800;
}

.companyDesc{
  margin:0;
  color:#b0b6bd;
  font-size:14px;
  line-height:1.65;
  letter-spacing:-0.02em;
  max-width:640px;
}

.companyLeft{ position:relative; }

.companyWatermark{
  position:absolute;
  left:0;
  top:180px;
  font-size:110px;
  font-weight:900;
  letter-spacing:.08em;
  color:rgba(0,0,0,.04);
  user-select:none;
  pointer-events:none;
  white-space:nowrap;
}

.companyStats{
  margin-top:26px;
  background:#f3f4f5;
  border:1px solid var(--line);
  border-radius:60px;
  padding:34px 34px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
  align-items:start;
}

.statLabel{
  margin:0 0 10px;
  color:var(--blue);
  font-weight:800;
  letter-spacing:-0.02em;
}

.statValue{
  margin:0 0 8px;
  font-size:44px;
  font-weight:900;
  letter-spacing:-0.04em;
}

.statSub{
  margin:0;
  color:#b0b6bd;
  font-size:13px;
  line-height:1.55;
}

/* 오른쪽 원형 3개 */
.companyRight{
  position:relative;
  min-height:520px;
}

.bubble{
  position:absolute;
  right:0;
  width:280px;
  height:280px;
  border-radius:999px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  text-decoration:none;
  box-shadow:0 18px 36px rgba(0,0,0,.12);
  border:1px solid rgba(0,0,0,.06);
  transition:transform .2s ease, filter .2s ease;
}

.bubble:hover{
  transform:translateY(-3px);
  filter:brightness(1.02);
}

.bubble--top{ top:0; background:var(--blue); color:#fff; }
.bubble--mid{ top:180px; background:rgba(11,99,206,.75); color:#fff; }
.bubble--bot{
  top:360px;
  background:#f7f7f8;
  color:#111;
}

.bubbleKo{
  font-size:28px;
  font-weight:900;
  letter-spacing:-0.03em;
  margin-bottom:8px;
}
.bubbleEn{
  font-size:13px;
  opacity:.9;
  font-weight:600;
}

/* ===== NEWS BAND ===== */
.newsBand{
  background:var(--blue);
  padding:64px 0 72px;
  margin-top:12px;
}
.newsKicker{
  margin:0 0 10px;
  color:rgba(255,255,255,.95);
  font-weight:700;
  text-align:center;
  letter-spacing:.02em;
}
.newsTitle{
  margin:0 0 10px;
  color:#fff;
  font-size:44px;
  font-weight:900;
  text-align:center;
  letter-spacing:-0.03em;
}
.newsSub{
  margin:0;
  color:rgba(255,255,255,.78);
  text-align:center;
  font-size:14px;
  letter-spacing:-0.02em;
}

/* ===== ASK BANNER ===== */
.askBanner{
  width:min(1320px, 96%);
  margin:0 auto;
  padding:0;
}
.askInner{
  margin-top:28px;
  border-radius:22px;
  overflow:hidden;
  position:relative;
  min-height:220px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  padding:46px 44px;
  background:
    linear-gradient(90deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,.08) 55%, rgba(0,0,0,0) 75%),
    url('./assets/hero-1.jpg') center/cover no-repeat;
}

.askKicker{
  margin:0 0 10px;
  color:rgba(255,255,255,.95);
  font-weight:700;
  letter-spacing:.02em;
}
.askTitle{
  margin:0;
  color:#fff;
  font-size:34px;
  font-weight:900;
  letter-spacing:-0.03em;
}

.askActions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.askBtn{
  height:56px;
  padding:0 26px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  letter-spacing:-0.02em;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.30);
}

.askBtn--white{
  background:#fff;
  color:#111;
  border-color:#fff;
}

.askBtn--blue{
  background:rgba(11,99,206,.95);
  color:#fff;
  border-color:rgba(11,99,206,.95);
}

/* responsive */
@media (max-width: 1200px){
  .companyBlock{ grid-template-columns:1fr; }
  .companyRight{ min-height:440px; }
  .bubble{ width:240px; height:240px; }
  .bubble--mid{ top:150px; }
  .bubble--bot{ top:300px; }
  .companyWatermark{ font-size:90px; top:170px; }
}

@media (max-width: 720px){
  .companyStats{ grid-template-columns:1fr; border-radius:26px; }
  .statValue{ font-size:36px; }
  .companyTitle{ font-size:34px; }
  .companyRight{ min-height:380px; }
  .bubble{ width:210px; height:210px; }
  .bubble--mid{ top:130px; }
  .bubble--bot{ top:260px; }
  .askInner{ padding:36px 20px; flex-direction:column; align-items:flex-start; }
  .askActions{ justify-content:flex-start; }
}
@media (max-width: 720px){
  :root{
    --fs-base: 16px;
    --fs-menu: 18px;
    --fs-sub: 15px;
  }
  .header__inner{ height:78px; }
  main.heroWrap{ padding-top:78px; }
  .heroH1{ font-size:42px; }
  .sectionTitle{ font-size:36px; }
}
/* ===== NEWS SECTION (스타보트 소식 카드형: 2 + 1 배치 정밀) ===== */
.newsSection{
  background:var(--blue);
  padding:70px 0 110px;
}

/* 제목 영역 */
.newsHead{
  text-align:center;
  margin-bottom:52px;
}

.newsSection .newsKicker{
  margin:0 0 14px;
  color:rgba(255,255,255,.95);
  font-weight:700;
  letter-spacing:.02em;
  font-size:16px;
}

.newsSection .newsTitle{
  margin:0 0 14px;
  color:#fff;
  font-size:54px;
  font-weight:900;
  letter-spacing:-0.03em;
}

.newsSection .newsSub{
  margin:0;
  color:rgba(255,255,255,.78);
  font-size:16px;
  letter-spacing:-0.02em;
}

/* 핵심: 카드 전체 폭/간격/배치 */
.newsGrid{
  width:min(1180px, 94%);
  margin:0 auto;
  display:grid;
  grid-template-columns: 1fr 1fr;
  column-gap:92px;    /* 좌/우 간격 크게 (스타보트 느낌) */
  row-gap:78px;       /* 위/아래 간격 */
  align-items:start;
}

/* 카드 공통: 스타보트처럼 "가로 넓고 세로는 덜" */
.newsCard{
  position:relative;
  display:block;
  border-radius:28px;
  overflow:hidden;
  background:#e9ecef;
  box-shadow:0 26px 60px rgba(0,0,0,.16);
  text-decoration:none;
  transform:translateZ(0);
  height:310px;       /* ✅ 위 2개 카드 높이 (스타보트처럼 조금 낮춤) */
}

/* 위 2개 위치 */
.newsCard--left{ grid-column:1; }
.newsCard--right{ grid-column:2; }

/* 아래 중앙 카드: 스타보트는 "더 작고" 중앙정렬 + 조금 내려옴 */
.newsCard--center{
  grid-column: 1 / span 2;
  justify-self:center;
  width:520px;        /* ✅ 아래 카드 가로 폭 */
  height:340px;       /* ✅ 아래 카드 높이 */
  margin-top:6px;
}

/* 배경 이미지 */
.newsImg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* 스타보트처럼 "가운데 띠"가 더 낮은 위치 + 조금 투명 */
.newsOverlay{
  position:absolute;
  left:0; right:0;
  top:58%;            /* ✅ 중앙보다 약간 아래 */
  height:108px;
  transform:translateY(-50%);
  background:rgba(0,0,0,.22);
}

/* 텍스트/플러스: 오버레이 안에서 아래쪽 정렬 */
.newsBar{
  position:absolute;
  left:0; right:0;
  top:58%;
  transform:translateY(-50%);
  height:108px;
  padding:22px 30px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
}

.newsText{
  color:#fff;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.newsEn{
  font-size:44px;     /* ✅ 스타보트처럼 큼 */
  font-weight:900;
  letter-spacing:-0.03em;
  line-height:1;
}
.newsKo{
  font-size:18px;
  font-weight:700;
  opacity:.95;
  letter-spacing:-0.02em;
}

/* + 아이콘: 스타보트는 그냥 + 하나, 우측에 떠있음 */
.newsPlus{
  color:#fff;
  font-size:42px;
  font-weight:800;
  line-height:1;
  opacity:.95;
  transform: translateY(-6px); /* ✅ 살짝 위로 */
}

/* hover */
.newsCard:hover{
  transform:translateY(-4px);
  box-shadow:0 30px 70px rgba(0,0,0,.22);
}
.newsCard:hover .newsOverlay{ background:rgba(0,0,0,.28); }

/* 반응형 */
@media (max-width: 1100px){
  .newsGrid{
    column-gap:48px;
    row-gap:48px;
  }
  .newsCard--center{ width:520px; }
}

@media (max-width: 980px){
  .newsGrid{
    grid-template-columns:1fr;
    row-gap:26px;
    column-gap:0;
  }
  .newsCard--left,
  .newsCard--right{
    grid-column:1;
    height:300px;
  }
  .newsCard--center{
    grid-column:1;
    width:100%;
    height:320px;
    margin-top:0;
  }
}

@media (max-width: 720px){
  .newsSection{ padding:60px 0 80px; }
  .newsSection .newsTitle{ font-size:40px; }
  .newsCard{ height:260px; }
  .newsCard--center{ height:280px; width:100%; }
  .newsEn{ font-size:34px; }
  .newsKo{ font-size:16px; }
  .newsOverlay{ height:96px; top:58%; }
  .newsBar{ height:96px; top:58%; padding:18px 18px; }
  .newsPlus{ font-size:38px; transform: translateY(-4px); }
}
/* ===== NAV DROPDOWN (스타보트처럼) ===== */
.nav__list{
  position:relative;
}

.navItem{
  position:relative;
}

.hasDrop{
  position:relative;
  padding-bottom:0; /* 기존 패딩 방식은 끊김이 날 수 있어서 제거 */
}
/* 메뉴와 드롭다운 사이 hover 끊김 방지용 브릿지 */
.hasDrop::after{
  content:"";
  position:absolute;
  left:-20px;          /* 좌우 여유 */
  right:-20px;
  top:100%;            /* 메뉴 바로 아래 */
  height:22px;         /* ✅ 이 영역을 지나가도 hover 유지 */
  background:transparent;
}


.dropMenu{
  position:absolute;
  left:50%;
  top:100%;
  transform:translateX(-50%) translateY(10px);
  min-width:190px;
  width:max-content;
  background:#fff;
  border:1px solid rgba(0,0,0,.10);
  box-shadow:0 18px 30px rgba(0,0,0,.12);
  padding:10px 0;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
  z-index:200;
}


.dropLink{
  display:block;
  padding:10px 18px;
  color:#333;
  font-size:16px;
  font-weight:500;
  text-decoration:none;
  letter-spacing:-0.02em;
  white-space:nowrap;
}

.dropLink:hover{
  background:#f4f6f8;
}

/* hover 하면 보이게 */
.hasDrop:hover .dropMenu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0px);   /* ✅ hover면 딱 붙어서 안정적 */
}


/* 드롭다운이 뜰 때, 상단 메뉴 밑줄 느낌(스타보트처럼) */
.hasDrop:hover > .nav__link{
  color:#111;
  position:relative;
}
.hasDrop:hover > .nav__link::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-10px;
  height:2px;
  background:var(--blue);
  border-radius:999px;
}

/* 모바일에서는 hover 대신 클릭이 필요하니, 모바일 메뉴에서는 드롭다운 숨김 */
@media (max-width: 720px){
  .dropMenu{ display:none; }
  .hasDrop{ padding-bottom:0; }
}
/* ===== PRODUCT LIST PAGE ===== */
.pageWrap{ padding-top:86px; } /* header fixed offset (메인과 동일) */

.pageHero{
  background:#fff;
  border-bottom:1px solid var(--line);
  padding:46px 0 34px;
}
.pageHero__inner{ text-align:center; }

.pageKicker{
  margin:0 0 10px;
  color:var(--blue);
  font-weight:700;
  letter-spacing:.02em;
  font-size:16px;
}
.pageTitle{
  margin:0 0 10px;
  font-size:54px;
  font-weight:900;
  letter-spacing:-0.03em;
}
.pageSub{
  margin:0;
  color:#b0b6bd;
  font-size:16px;
  letter-spacing:-0.02em;
}

/* controls */
.listControls{
  margin:26px auto 0;
  width:min(860px, 96%);
  display:flex;
  gap:16px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}
.listSearch{
  flex:1;
  min-width:260px;
  display:flex;
  align-items:center;
  border-bottom:2px solid #111;
  padding:6px 2px;
  gap:10px;
}
.listSearch input{
  border:none;
  outline:none;
  background:transparent;
  width:100%;
  font-size:22px;
  text-align:left;
  color:#111;
  letter-spacing:-0.02em;
}
.listSearch button{
  border:none;
  background:transparent;
  cursor:pointer;
  font-size:20px;
}
.listSort{
  height:44px;
  border:1px solid var(--line);
  background:#fff;
  border-radius:12px;
  padding:0 12px;
  font-size:16px;
  cursor:pointer;
}

.pageBody{ background:#f6f7f8; padding:34px 0 80px; }

.listInfo{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  width:min(1320px, 96%);
  margin:0 auto 16px;
  color:#333;
  font-size:16px;
}
.listCate{ color:#111; font-weight:700; }

.listGrid{
  width:min(1320px, 96%);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:22px;
}

/* card */
.listCard{
  background:#fff;
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 18px 40px rgba(0,0,0,.10);
  text-decoration:none;
  color:#111;
  display:block;
  transition: transform .15s ease, box-shadow .15s ease;
}
.listCard:hover{
  transform:translateY(-4px);
  box-shadow:0 22px 55px rgba(0,0,0,.14);
}
.listThumb{
  height:180px;
  background:#e9ecef;
  position:relative;
}
.listThumb img{ width:100%; height:100%; object-fit:cover; display:block; }

.listBadge{
  position:absolute;
  left:12px; top:12px;
  width:54px; height:54px;
  border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  font-weight:800;
  font-size:14px;
  box-shadow:0 10px 20px rgba(0,0,0,.14);
}
.listBadge.blue{ background:var(--blue); }
.listBadge.gray{ background:rgba(60,60,60,.65); }

.listBody{
  padding:14px 14px 16px;
  text-align:center;
}
.listTitle{
  margin:0 0 6px;
  font-size:20px;
  font-weight:900;
  letter-spacing:-0.03em;
}
.listMeta{
  margin:0 0 8px;
  color:#b0b6bd;
  font-size:14px;
}
.listPrice{
  margin:0;
  font-weight:900;
  font-size:16px;
  color:#111;
}

/* pagination */
.pager{
  width:min(1320px, 96%);
  margin:28px auto 0;
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}
.pageBtn{
  min-width:44px;
  height:44px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  cursor:pointer;
  font-size:16px;
  font-weight:700;
}
.pageBtn.is-active{
  border-color:var(--blue);
  color:var(--blue);
}

@media (max-width: 1200px){
  .listGrid{ grid-template-columns:repeat(3, 1fr); }
}
@media (max-width: 900px){
  .listGrid{ grid-template-columns:repeat(2, 1fr); }
  .pageTitle{ font-size:42px; }
}
@media (max-width: 520px){
  .listGrid{ grid-template-columns:1fr; }
}
/* 상단 카테고리 탭(스타보트 느낌) */
.cateTabs{
  margin:22px auto 0;
  width:min(520px, 96%);
  display:flex;
  gap:28px;
  justify-content:center;
  align-items:center;
}
.cateTab{
  text-decoration:none;
  color:#777;
  font-weight:700;
  font-size:16px;
  letter-spacing:-0.02em;
  padding:10px 6px;
  position:relative;
}
.cateTab.is-active{
  color:#111;
}
.cateTab.is-active::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:0;
  height:2px;
  background:var(--blue);
  border-radius:999px;
}

/* ===== SUB PAGES (ABOUT/GREETING/BUSINESS/LOCATION) ===== */
.subPage{ padding-top:86px; } /* fixed header offset */

.subHero{
  width:min(var(--max), 100%);
  margin:0 auto;
  height:220px;
  position:relative;
  overflow:hidden;
  background:#dfefff;
}
.subHero__bg{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  filter:saturate(1.02) contrast(1.02);
}
.subHero__bg::after{
  content:"";
  position:absolute; inset:0;
  background:rgba(0,0,0,.18);
}
.subHero__text{
  position:relative;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:54px;
  font-weight:900;
  letter-spacing:.08em;
  color:rgba(255,255,255,.92);
}

.subTabs{
  background:#fff;
  border-bottom:1px solid var(--line);
}
.subTabs__inner{
  width:min(920px, 92%);
  margin:0 auto;
  display:flex;
  justify-content:center;
  gap:44px;
  padding:18px 0;
}
.subTab{
  color:#888;
  text-decoration:none;
  font-weight:800;
  font-size:16px;
  letter-spacing:-0.02em;
  padding:10px 4px;
  position:relative;
}
.subTab.is-active{
  color:var(--blue);
}
.subTab.is-active::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:0;
  height:2px;
  background:var(--blue);
  border-radius:999px;
}

.subTitle{
  padding:56px 0 28px;
  background:#fff;
}
.subTitle .crumb{
  text-align:right;
  color:#b0b6bd;
  font-size:12px;
  margin-bottom:18px;
}
.subTitle h1{
  text-align:center;
  margin:0 0 14px;
  font-size:46px;
  font-weight:900;
  letter-spacing:-0.03em;
}
.subTitle p{
  text-align:center;
  margin:0;
  color:#b0b6bd;
  font-size:16px;
}

/* ===== ABOUT CONTENT ===== */
.aboutBlock{
  background:#fff;
  padding:56px 0;
}
.aboutRow{
  width:min(1220px, 92%);
  margin:0 auto;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:56px;
  align-items:center;
}
.aboutRow.is-reverse .aboutImgWrap{ order:2; }
.aboutRow.is-reverse .aboutTxt{ order:1; }

.aboutImgWrap{
  border-radius:28px;
  overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.14);
  background:#e9ecef;
}
.aboutImg{
  width:100%;
  height:360px;
  object-fit:cover;
  display:block;
}

.aboutTxt h2{
  margin:0 0 16px;
  font-size:30px;
  font-weight:900;
  letter-spacing:-0.03em;
}
.aboutTxt p{
  margin:0 0 12px;
  color:#5f6368;
  font-size:16px;
  line-height:1.75;
  letter-spacing:-0.02em;
}
.aboutTxt p:last-child{ margin-bottom:0; }

/* ===== BRAND HISTORY ===== */
.history{
  background:#fff;
  padding:74px 0 90px;
}
.historyHead{
  text-align:center;
  margin-bottom:40px;
}
.historyHead h2{
  margin:0 0 10px;
  font-size:44px;
  font-weight:900;
  letter-spacing:-0.03em;
}
.historyHead p{
  margin:0;
  color:#6b7280;
  font-size:15px;
}

.historyLine{
  width:min(920px, 92%);
  margin:0 auto;
  position:relative;
  padding:10px 0;
}
.historyLine::before{
  content:"";
  position:absolute;
  top:0; bottom:0;
  left:50%;
  width:3px;
  transform:translateX(-50%);
  background:#d6d6d6;
  border-radius:999px;
}

.hItem{
  position:relative;
  display:grid;
  grid-template-columns: 1fr 40px 1fr;
  align-items:center;
  padding:26px 0;
}
.hItem.left .hYear,
.hItem.left .hText{ grid-column:1; text-align:right; }
.hItem.left .hDot{ grid-column:2; }
.hItem.right .hYear,
.hItem.right .hText{ grid-column:3; text-align:left; }
.hItem.right .hDot{ grid-column:2; }

.hYear{
  font-size:34px;
  font-weight:900;
  color:var(--blue);
  letter-spacing:-0.03em;
}
.hDot{
  width:14px;
  height:14px;
  border-radius:999px;
  background:#fff;
  border:3px solid var(--blue);
  margin:0 auto;
}
.hText{
  color:#8b8f96;
  font-size:14px;
  line-height:1.7;
  letter-spacing:-0.02em;
}
.hText div{ margin:2px 0; }

/* responsive */
@media (max-width: 900px){
  .aboutRow{ grid-template-columns:1fr; gap:26px; }
  .aboutRow.is-reverse .aboutImgWrap{ order:1; }
  .aboutRow.is-reverse .aboutTxt{ order:2; }
  .aboutImg{ height:300px; }

  .hItem{ grid-template-columns: 1fr 30px 1fr; }
  .hYear{ font-size:28px; }
}

@media (max-width: 600px){
  .subHero__text{ font-size:40px; }
  .subTabs__inner{ gap:18px; }
  .subTitle h1{ font-size:36px; }

  .historyLine::before{ left:16px; transform:none; }
  .hItem{ grid-template-columns: 16px 1fr; padding:18px 0; }
  .hDot{ grid-column:1; margin:0; }
  .hYear{ grid-column:2; text-align:left; margin-bottom:4px; }
  .hText{ grid-column:2; text-align:left; }
  .hItem.left .hYear, .hItem.left .hText,
  .hItem.right .hYear, .hItem.right .hText{ grid-column:2; text-align:left; }
}
/* ===== GREETING PAGE ===== */
.greetBody{
  background:#fff;
  padding:56px 0 90px;
}

.greetRow{
  width:min(1320px, 92%);
  margin:0 auto;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:64px;
  align-items:start;
}

.greetImgWrap{
  border-radius:42px;
  overflow:hidden;
  background:#e9ecef;
  box-shadow:0 26px 70px rgba(0,0,0,.12);
}

.greetImg{
  width:100%;
  height:520px;
  object-fit:cover;
  display:block;
}

.greetTxt h2{
  margin:0 0 18px;
  font-size:40px;
  font-weight:900;
  letter-spacing:-0.03em;
}

.greetTxt p{
  margin:0 0 18px;
  color:#5f6368;
  font-size:16px;
  line-height:1.9;
  letter-spacing:-0.02em;
}

.greetSign{
  margin-top:34px;
  display:grid;
  grid-template-columns: 1fr auto;
  align-items:end;
  gap:16px 22px;
  padding-top:24px;
  border-top:1px solid #eceff3;
}

.greetRole{
  grid-column:1;
  color:#111;
  font-weight:700;
  font-size:16px;
}

.greetName{
  grid-column:1;
  color:#111;
  font-weight:900;
  font-size:20px;
  letter-spacing:-0.02em;
}

.greetSignature{
  grid-column:2;
  grid-row:1 / span 2;
  font-size:44px;
  color:#111;
  opacity:.9;
  font-family: "Brush Script MT", "Segoe Script", "Comic Sans MS", cursive;
  letter-spacing:0.02em;
}

/* responsive */
@media (max-width: 980px){
  .greetRow{ grid-template-columns:1fr; gap:28px; }
  .greetImg{ height:420px; }
  .greetTxt h2{ font-size:34px; }
}

@media (max-width: 600px){
  .greetImgWrap{ border-radius:28px; }
  .greetImg{ height:320px; }
  .greetSignature{ font-size:36px; }
}

/* ===== BUSINESS PAGE ===== */
.bizSection{
  background:#fff;
  padding:54px 0;
}

.bizRow{
  width:min(1320px, 92%);
  margin:0 auto;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:64px;
  align-items:center;
}

.bizImgWrap{
  border-radius:42px;
  overflow:hidden;
  background:#e9ecef;
  box-shadow:0 26px 70px rgba(0,0,0,.12);
}

.bizImg{
  width:100%;
  height:380px;
  object-fit:cover;
  display:block;
}

.bizHead{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:18px;
}

.bizNum{
  width:52px;
  height:52px;
  border-radius:999px;
  background:var(--blue);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:18px;
  letter-spacing:-0.02em;
  flex:0 0 auto;
}

.bizTitle{
  margin:0;
  font-size:40px;
  font-weight:900;
  letter-spacing:-0.03em;
}

.bizList{
  margin:0;
  padding-left:18px;
  color:#5f6368;
  font-size:16px;
  line-height:1.95;
  letter-spacing:-0.02em;
}

.bizList li{ margin:6px 0; }

/* spacing like starboat (큰 여백) */
.bizSection + .bizSection{ padding-top:0; }
.bizSection:nth-child(odd) .bizRow{ padding-top:8px; }

@media (max-width: 980px){
  .bizRow{ grid-template-columns:1fr; gap:28px; }
  .bizImg{ height:320px; }
  .bizTitle{ font-size:34px; }
}

@media (max-width: 600px){
  .bizImgWrap{ border-radius:28px; }
  .bizNum{ width:46px; height:46px; }
  .bizTitle{ font-size:30px; }
}

/* ===== LOCATION PAGE ===== */
.locMapSection{
  background:#fff;
  padding:0 0 22px;
}

.locMapFrame{
  width:min(1120px, 92%);
  margin:0 auto;
  border:1px solid var(--line);
  background:#fff;
}

.locMapFrame iframe{
  width:100%;
  height:420px;
  display:block;
  border:0;
}

.locInfoSection{
  background:#fff;
  padding:18px 0 90px;
}

.locH2{
  width:min(1120px, 92%);
  margin:18px auto 18px;
  font-size:34px;
  font-weight:900;
  letter-spacing:-0.03em;
}

.locList{
  width:min(1120px, 92%);
  margin:0 auto;
}

.locRow{
  display:grid;
  grid-template-columns: 260px 1fr;
  align-items:center;
  gap:20px;
  padding:22px 0;
  border-bottom:1px solid #e3e6ea;
}

.locLeft{
  display:flex;
  align-items:center;
  gap:14px;
}

.locIcon{
  font-size:28px;
  width:34px;
  display:inline-flex;
  justify-content:center;
}

.locLabel{
  color:var(--blue);
  font-weight:900;
  font-size:22px;
  letter-spacing:-0.02em;
}

.locValue{
  color:#111;
  font-size:20px;
  letter-spacing:-0.02em;
}

@media (max-width: 900px){
  .locRow{ grid-template-columns: 1fr; gap:10px; }
  .locLabel{ font-size:20px; }
  .locValue{ font-size:18px; }
  .locMapFrame iframe{ height:360px; }
}
/* ===== BOARD (NOTICE) ===== */
.boardSection{
  background:#fff;
  padding:34px 0 80px;
}

.boardWrap{
  width:min(1320px, 96%);
  margin:0 auto;
}

.boardTable{
  width:100%;
  border-collapse:collapse;

  /* ✅ fixed 때문에 제목 칸이 비정상적으로 좁아지는 경우가 많아서 auto로 */
  table-layout:auto;

  border-top:1px solid #e6e8ec;
}

.boardTable thead th{
  background:#f6f7f8;
  color:#111;
  font-weight:800;
  font-size:14px;
  padding:16px 10px;
  border-bottom:1px solid #e6e8ec;
}

.boardTable tbody td{
  padding:18px 10px;
  border-bottom:1px solid #eef0f3;
  font-size:14px;
  color:#111;
  vertical-align:middle;
}

/* ✅ 스타보트처럼 “제목 칸”을 넓게 확보 */
.colNo{ width:90px; text-align:center; white-space:nowrap; }
.colWriter{ width:130px; text-align:center; white-space:nowrap; }
.colDate{ width:190px; text-align:center; white-space:nowrap; }
.colHit{ width:80px; text-align:center; white-space:nowrap; }


/* ✅ 제목은 한 줄로 길게 + 넘치면 … */
.boardTitleLink{
  color:#111;
  text-decoration:none;

  display:block;      /* ✅ td 폭을 100% 사용 */
  width:100%;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;

  font-weight:700;
}

.boardTitleLink:hover{ color:var(--blue); }

.badgeNotice{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:22px;
  padding:0 10px;
  border-radius:999px;
  background:#e9ecef;
  color:#333;
  font-weight:800;
  font-size:12px;
}

.boardTools{
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:18px;
}

.boardSel{
  height:38px;
  border:1px solid #e3e6ea;
  border-radius:0;
  background:#fff;
  padding:0 10px;
  font-size:13px;
}

.boardInput{
  height:38px;
  width:260px;
  border:1px solid #e3e6ea;
  padding:0 10px;
  font-size:13px;
}

.boardBtn{
  height:38px;
  width:70px;
  border:1px solid #e3e6ea;
  background:#fff;
  cursor:pointer;
  font-size:13px;
  font-weight:700;
}

.boardPager{
  margin-top:26px;
  display:flex;
  justify-content:center;
  gap:8px;
  align-items:center;
}

.pgBtn{
  width:34px;
  height:34px;
  border:1px solid #e3e6ea;
  background:#fff;
  cursor:pointer;
  font-size:13px;
}

.pgBtn.is-active{
  border-color:#111;
  font-weight:900;
}

@media (max-width: 900px){
  .colWriter, .colDate, .colHit{ display:none; }
  .boardTable thead th.colWriter,
  .boardTable thead th.colDate,
  .boardTable thead th.colHit{ display:none; }
  .colNo{ width:90px; }
  .boardTools{ flex-wrap:wrap; }
  .boardInput{ width:min(320px, 100%); }
}
/* ===== VIDEO BOARD GRID ===== */
.videoSection{
  background:#fff;
  padding:30px 0 80px;
}

.videoGrid{
  width:min(1320px, 96%);
  margin:0 auto;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:34px 50px;
  padding-top:18px;
  border-top:1px solid #eef0f3;
}

.vCard{
  text-decoration:none;
  color:#111;
  display:block;
}

.vThumb{
  width:100%;
  height:220px;
  border-radius:18px;
  overflow:hidden;
  background:#e9ecef;
  box-shadow:0 18px 40px rgba(0,0,0,.10);
}

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

.vTitle{
  margin:14px 0 6px;
  font-weight:900;
  font-size:16px;
  letter-spacing:-0.02em;
}

.vMeta{
  margin:0;
  color:#8b8f96;
  font-size:13px;
}

.videoTools{
  width:min(1320px, 96%);
  margin:18px auto 0;
}

@media (max-width: 900px){
  .videoGrid{ grid-template-columns:1fr; gap:26px; }
  .vThumb{ height:200px; }
}

.productPage .subHero{
  max-width: min(var(--max), 100%); /* 공통과 통일 (또는 그냥 지워도 됨) */
  height: 220px;                    /* ✅ 공통 subHero와 동일 */
}

.productPage .subTabs__inner{
  width: min(980px, 92%);
  gap: 52px;
}

/* 스타보트는 상단 탭 3개만 보여서 "전체보트" 숨김 */
.productPage #tabAll{ display:none; }

.productTitle{
  padding: 64px 0 26px;
}

.productTop{
  display:flex;
  align-items:flex-end;
  gap: 18px;
}

.productH1{
  margin:0;
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -0.03em;
  color:#111;
  min-width: 220px; /* 좌측 타이틀 고정감 */
}

/* 중앙 검색(언더라인 스타일) */
.productSearch{
  flex: 1;
  max-width: 520px;
  margin: 0 auto;
  position: relative;
  display:flex;
  align-items:center;
  border-bottom: 2px solid #222;
  padding: 8px 0;
}
.productSearch input{
  width:100%;
  border:0;
  outline:0;
  background:transparent;
  font-size:16px;
  padding: 10px 46px 10px 6px;
}
.productSearch button{
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  width:42px;
  height:42px;
  border:0;
  background:transparent;
  cursor:pointer;
  font-size:18px;
}

/* 우측 정렬 */
.productSort{
  min-width: 160px;
  display:flex;
  justify-content:flex-end;
}

/* 본문 배경(스타보트는 흰 바탕 느낌) */
.productBody{
  background:#fff;
  padding: 26px 0 80px;
}

/* “총 n개의 상품” 위치/톤 */
.productInfo{
  width: min(1180px, 96%);
  margin: 0 auto 18px;
  font-size: 14px;
  color:#777;
}

/* 카드 그리드: 3열, 더 큰 썸네일 */
.productPage .listGrid{
  width: min(1180px, 96%);
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.productPage .listThumb{
  height: 240px;
}
.productPage .listBody{
  padding: 18px 16px 22px;
}
.productPage .listTitle{
  font-size: 22px;
}
.productPage .listPrice{
  font-size: 16px;
}

/* 반응형 */
@media (max-width: 980px){
  .productTop{ flex-direction:column; align-items:center; }
  .productH1{ min-width: 0; }
  .productSort{ width:100%; justify-content:center; }
  .productSearch{ max-width: 520px; width:100%; }
}
@media (max-width: 900px){
  .productPage .listGrid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px){
  .productPage .listGrid{ grid-template-columns: 1fr; }
}
/* ===== Footer (스타보트 스타일) ===== */
.footer{
  padding:0;
  border-top:1px solid var(--line);
  background:#fff;
}

.footerTop{
  padding:60px 0 34px;
}

.footerTopInner{
  width:min(1320px, 96%);
  margin:0 auto;
  display:grid;
  grid-template-columns: 240px 1fr; /* 좌 로고 / 우 정보 */
  gap:40px;
  align-items:start;
}

.footerBrand{
  display:flex;
  align-items:flex-start;
}

.footerLogo{
  width:180px;
  height:auto;
  display:block;
}

.footerGrid{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr .6fr;
  gap:30px;
  color:#222;
}

.footer h4{
  margin:0 0 12px;
  font-size:14px;
  font-weight:800;
}
.footer p{
  margin:6px 0;
  color:#444;
  font-size:13px;
  line-height:1.65;
}
.footer small{ color:#b0b6bd; }

.footerSns{
  display:block;
  margin:6px 0;
  color:#b0b6bd;
  text-decoration:none;
  font-size:13px;
}
.footerSns:hover{ color:#666; }

.footerCopy{
  width:min(1320px, 96%);
  margin:34px auto 0;
  color:#b0b6bd;
  font-size:12px;
}

/* 최하단 다크 바 */
.footerBar{
  background:#141414;
}
.footerBarInner{
  width:min(1320px, 96%);
  margin:0 auto;
  height:58px;
  display:flex;
  align-items:center;
  gap:22px;
}
.footerBarInner a{
  color:#a7a7a7;
  text-decoration:none;
  font-size:13px;
}
.footerBarInner a:hover{ color:#fff; }
.footerBarInner a.is-strong{
  color:#fff;
  font-weight:800;
}

/* responsive */
@media (max-width: 1200px){
  .footerTopInner{ grid-template-columns: 1fr; }
  .footerBrand{ justify-content:flex-start; }
  .footerGrid{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 600px){
  .footerGrid{ grid-template-columns:1fr; }
  .footerBarInner{ flex-wrap:wrap; height:auto; padding:14px 0; row-gap:10px; }
}
/* ===== Footer 링크 페이지들(회사정보/약관/개인정보/이용안내) ===== */

/* 회사소개 정보 표 */
.infoSection{
  margin: 10px auto 80px;
}
.infoHead{
  padding: 14px 0;
  border-bottom: 2px solid #222;
  margin-bottom: 14px;
}
.infoHead h2{
  margin:0;
  font-size: 16px;
  font-weight: 900;
}
.infoTable{
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid #e6e6e6;
}
.infoTable th,
.infoTable td{
  padding: 18px 18px;
  border-bottom: 1px solid #e6e6e6;
  font-size: 13px;
  line-height: 1.6;
}
.infoTable th{
  width: 180px;
  background: #f7f7f7;
  font-weight: 800;
  color: #222;
}
.infoTable td{
  color:#222;
}

/* 약관/개인정보 박스 */
.policyBox{
  border: 1px solid #e8e8e8;
  background:#fff;
  padding: 26px 28px;
  margin: 10px auto 80px;
  color:#333;
  font-size: 13px;
  line-height: 1.9;
}
.policyBox h3{
  margin: 18px 0 6px;
  font-size: 14px;
  font-weight: 900;
}
.policyNote{
  margin: 0 0 14px;
  color:#777;
  font-size: 12px;
}

/* 이용안내(아코디언) */
.guideWrap{
  margin: 10px auto 80px;
}
.guideItem{
  border-top: 2px solid #222;
}
.guideItem + .guideItem{
  border-top: 1px solid #e6e6e6;
}
.guideItem summary{
  list-style:none;
  cursor:pointer;
  padding: 20px 0;
  font-weight: 900;
  font-size: 14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.guideItem summary::-webkit-details-marker{ display:none; }
.guideItem summary::after{
  content:"⌄";
  font-size: 18px;
  transform: translateY(-1px);
}
.guideItem[open] summary::after{
  content:"⌃";
}
.guideContent{
  padding: 0 0 18px;
  color:#333;
  font-size: 13px;
  line-height: 1.9;
}
.guideContent ul{
  margin: 8px 0 0 18px;
}
/* ===== PRODUCT DETAIL ===== */
.detailWrap{ padding-bottom:70px; }

.detailTop{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:34px;
  align-items:start;
}

.detailMain{
  border-radius:22px;
  overflow:hidden;
  background:#e9ecef;
  box-shadow:0 18px 40px rgba(0,0,0,.10);
}
.detailMain img{ width:100%; height:520px; object-fit:cover; display:block; }

.detailThumbs{
  margin-top:14px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.dThumb{
  width:96px; height:72px;
  border-radius:12px;
  overflow:hidden;
  border:1px solid #e3e6ea;
  background:#fff;
  padding:0;
  cursor:pointer;
  opacity:.85;
}
.dThumb.is-active{ border-color:var(--blue); opacity:1; }
.dThumb img{ width:100%; height:100%; object-fit:cover; display:block; }

.detailInfo{
  background:#fff;
  border:1px solid #eef0f3;
  border-radius:22px;
  padding:22px 22px;
}
.detailH2{ margin:0 0 10px; font-size:28px; font-weight:900; letter-spacing:-0.03em; }
.detailPrice{ font-weight:900; font-size:18px; margin-bottom:16px; }

.detailTable{ border-top:1px solid #eef0f3; margin-top:10px; }
.dtRow{ display:grid; grid-template-columns: 160px 1fr; padding:12px 0; border-bottom:1px solid #eef0f3; }
.dtKey{ color:#666; font-weight:800; font-size:13px; }
.dtVal{ color:#111; font-weight:600; font-size:13px; }

.detailAskBtn{
  margin-top:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  height:48px;
  border-radius:999px;
  background:var(--blue);
  color:#fff;
  font-weight:900;
  text-decoration:none;
}

.detailSection{
  margin-top:34px;
  background:#fff;
  border:1px solid #eef0f3;
  border-radius:22px;
  padding:22px 22px;
}
.detailSection h3{ margin:0 0 10px; font-size:16px; font-weight:900; }
.detailDesc{
  text-align:center;
}

.detailDesc{
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}

.detailDesc p{
  margin: 0 0 18px;
  color: #222;
  line-height: 1.95;
  font-size: 1rem;
  text-align: center;
  word-break: keep-all;
}

.detailDesc p:last-child{
  margin-bottom: 0;
}

.detailDescLead{
  margin: 0 0 22px;
  font-size: 1.15rem;
  font-weight: 500;
  color: #111;
  line-height: 1.9;
}

.detailDescHighlight{
  margin: 0 0 26px;
  font-size: 1.18rem;
  font-weight: 800;
  color: #ff3b30;
  line-height: 1.85;
}

.detailDescSection{
  margin: 56px 0 22px;
  font-size: 1.4rem;
  font-weight: 900;
  line-height: 1.5;
  text-align: center;
  color: var(--blue);
}

.detailDescCheck{
  margin: 0 0 14px;
  font-weight: 700;
  color: #111;
}

@media (max-width: 768px){
  .detailDesc{
    max-width: 100%;
  }

  .detailDesc p{
    font-size: 0.98rem;
    line-height: 1.9;
  }

  .detailDescLead{
    font-size: 1.05rem;
  }

  .detailDescHighlight{
    font-size: 1.08rem;
  }

  .detailDescSection{
    font-size: 1.2rem;
    margin: 42px 0 18px;
  }
}

@media (max-width: 980px){
  .detailTop{ grid-template-columns:1fr; }
  .detailMain img{ height:420px; }
}
@media (max-width: 520px){
  .detailMain img{ height:320px; }
  .dtRow{ grid-template-columns: 120px 1fr; }
}
/* ===== DETAIL: long images / video ===== */
.detailLongImgs{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.detailLongImg{
  width:100%;
  height:auto;
  display:block;
  border-radius:18px;
  border:1px solid #eef0f3;
  background:#f3f5f7;
}

/* responsive video box */
.detailVideo{
  position:relative;
  width:100%;
  aspect-ratio: 16 / 9;
  border-radius:18px;
  overflow:hidden;
  border:1px solid #eef0f3;
  background:#000;
}
.detailVideo iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

/* ===== Detail: Boat Info table (스타보트 느낌) ===== */
.detailSectionTitle{
  display:flex;
  align-items:center;
  gap:8px;
}

.plusMark{
  color: var(--blue);
  font-weight: 900;
}

.boatInfoTable{
  margin-top: 12px;
  border: 1px solid #e6eef6;
  border-radius: 10px;
  overflow: hidden;
}

.biRow{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
}

.biCell{
  padding: 14px 10px;
  border-right: 1px solid #e6eef6;
  border-bottom: 1px solid #e6eef6;
  text-align:center;
  font-size: 13px;
  color:#222;
  background:#fff;
}

.biRow .biCell:last-child{ border-right: 0; }
.boatInfoTable .biRow:last-child .biCell{ border-bottom: 0; }

.biHead .biCell{
  background: var(--blue);
  color:#fff;
  font-weight: 900;
}

/* 반응형: 모바일에서는 2열로 쪼개기 */
@media (max-width: 720px){
  .biRow{ grid-template-columns: repeat(2, 1fr); }
  .biCell{ text-align:left; }
}
/* ===== Typography scale up (연령대 고려) ===== */
html { font-size: 18px; }              /* 기존보다 전체 업 */
body { line-height: 1.75; }            /* 가독성 */

@media (max-width: 560px){
  html { font-size: 17px; }            /* 모바일은 살짝만 */
}

/* 본문/설명/표/게시판 공통 */
p, li, td, th { font-size: 1rem; }     /* 기본 18px */
small { font-size: .9rem; }            /* 너무 작지 않게 */

/* 서브 타이틀/섹션 타이틀 */
.subTitle h1 { font-size: 2.6rem; }    /* 기존보다 큼 */
.subTitle p  { font-size: 1.05rem; }

/* 메뉴(상단 네비) */
.nav__link { font-size: 1.05rem; }
.dropLink  { font-size: 1rem; }

/* 리스트/카드 제목/가격 */
.listTitle { font-size: 1.25rem; }
.listMeta  { font-size: 1rem; }
.listPrice { font-size: 1.05rem; }

/* 상세 페이지(너가 만든 영역) */
.detailH2     { font-size: 1.6rem; }
.detailPrice  { font-size: 1.2rem; }
.dtKey, .dtVal{ font-size: 1rem; }


/* 보트정보 표 */
.biCell { font-size: 1rem; }

/* 게시판(공지/이벤트/어드바이스) */
.boardTable td, .boardTable th { font-size: 1rem; }

/* 푸터 */
.footer p, .footerSns { font-size: 1rem; }
.footer h4 { font-size: 1.05rem; }
.footerCopy { font-size: .95rem; }
.footerBarInner a { font-size: 1rem; }

/* ===== Detail section titles bigger ===== */
.productDetailPage .detailSection h3{
  font-size: 24px;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}

/* "+ 보트정보"처럼 커스텀 타이틀 쓰는 경우도 같이 */
.productDetailPage .detailSectionTitle{
  font-size: 24px;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}

.productDetailPage .plusMark{ font-size: 26px; }

/* ===== Detail section titles: + 표시 자동 ===== */
.productDetailPage .detailSection h3{
  display:flex;
  align-items:center;
  gap:8px;
}

.productDetailPage .detailSection h3::before{
  content:"+";
  color: var(--blue);
  font-weight: 900;
  font-size: 26px;
  line-height: 1;
  transform: translateY(-1px);
}
/* ===== Board View (blog-like) ===== */
.boardViewSection{ background:#fff; padding:34px 0 90px; }

.postView{
  width:min(980px, 96%);
  margin:0 auto;
}

.postHead{ padding:34px 0 18px; border-bottom:1px solid #eef0f3; }

.postKicker{
  color:#b0b6bd;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:14px;
  margin-bottom:10px;
}

.postTitle{
  margin:0 0 18px;
  font-size:34px;
  font-weight:900;
  letter-spacing:-0.03em;
  color:#0b63ce;
}

.postMeta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  color:#8b8f96;
  font-size:14px;
}

.postMetaLeft{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.postWriter{ color:#111; font-weight:800; }
.postDot{ opacity:.6; }

.postBtn{
  height:36px;
  padding:0 14px;
  border:1px solid #e3e6ea;
  background:#fff;
  border-radius:8px;
  cursor:pointer;
  font-size:14px;
  font-weight:800;
  text-decoration:none;
  color:#111;
  display:inline-flex;
  align-items:center;
}
.postBtn:hover{ border-color:#111; }

.postBody{
  padding:34px 0 0;
  font-size:18px;
  line-height:1.9;
  color:#222;
}

.postBody{
  text-align:center;
}

.postBody p{
  margin:0 0 18px;
  text-align:center;
  line-height:1.9;
  word-break:keep-all;
}

.postBody ul,
.postBody ol{
  margin:0 0 18px;
  padding:0;
  list-style-position:inside;
  text-align:center;
}

.postBody li{
  margin:0 0 10px;
  text-align:center;
  list-style-position:inside;
}

.postBody img{
  max-width:100%;
  height:auto;
  display:block;
  margin:24px auto;
  border-radius:16px;
  box-shadow:0 18px 40px rgba(0,0,0,.10);
}

.postMedia{
  width:100%;
  aspect-ratio: 16/9;
  border-radius:16px;
  overflow:hidden;
  background:#000;
  box-shadow:0 18px 40px rgba(0,0,0,.10);
  margin:18px 0 22px;
}
.postMedia iframe{ width:100%; height:100%; border:0; }
/* ===== BOARD TABLE FIX: 제목 칸이 아래로 떨어지는 현상 복구 ===== */
.boardTable th,
.boardTable td{
  display: table-cell !important;   /* ✅ 테이블 셀로 강제 */
  vertical-align: middle;
}

.boardTable th.colTitle,
.boardTable td.colTitle{
  display: table-cell !important;   /* ✅ 제목 칸도 셀로 강제 */
  text-align: left;
  padding-left: 18px;
}

/* 제목 링크는 셀 안에서 폭을 다 쓰게 */
.boardTitleLink{
  display: block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* ===== 상세 이미지: 스타보트처럼 2열 그리드 / 너무 크게 나오지 않게 ===== */
.productDetailPage .detailLongImgs{
  width: min(1260px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  background: #fff;
}

.productDetailPage .detailLongImg{
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid #f1f3f5;
  background: #f7f7f7;
}

@media (max-width: 900px){
  .productDetailPage .detailLongImgs{
    grid-template-columns: 1fr;
  }

  .productDetailPage .detailLongImg{
    aspect-ratio: 4 / 3;
  }
}
.postNoticeLogo{
  width: min(320px, 70%);
  height: auto;
  display: block;
  margin: 34px auto 10px;
  object-fit: contain;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 16px 34px rgba(0,0,0,.10);
}
.postBody iframe{
  width: min(960px, 100%);
  aspect-ratio: 16 / 9;
  height: auto;
  display: block;
  margin: 24px auto;
  border: 0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,.10);
}
.companyStats--single{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px 24px;
  background:#f7f7f7;
  border:1px solid #e5e5e5;
}

.companyStatsLine{
  margin:0;
  font-size:20px;
  line-height:1.7;
  font-weight:600;
  color:#222;
  text-align:center;
  letter-spacing:-0.02em;
}
/* ===== FOOTER : 스타보트 느낌으로 와이드/슬림하게 ===== */
.footer{
  margin-top:0;
  background:#f3f3f3;
  color:#222;
  border-top:1px solid #e6e6e6;
}

.footerTop{
  padding:56px 0 48px;
}

.footerTopInner{
  width:min(1320px, 94%);
  margin:0 auto;
  display:grid;
  grid-template-columns: 220px 1fr;
  gap:64px;
  align-items:start;
}

.footerBrand{
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
}

.footerLogo{
  width:180px;
  max-width:100%;
  height:auto;
  object-fit:contain;
}

.footerGrid{
  display:grid;
  grid-template-columns: minmax(420px, 1.35fr) minmax(250px, .9fr) minmax(240px, .85fr) 120px;
  gap:44px;
  align-items:start;
}

.footerCol h4,
.footerGrid h4,
.footer h4{
  margin:0 0 18px;
  font-size:17px;
  font-weight:800;
  color:#111;
  letter-spacing:-0.02em;
}

.footerCol p,
.footerGrid p,
.footer p{
  margin:0 0 10px;
  color:#333;
  font-size:14px;
  line-height:1.7;
  letter-spacing:-0.01em;
  word-break:keep-all;
}

.footerSep{
  margin-left:10px;
}

.footer small{
  color:#9aa1a8;
}

.footerCol--sns{
  min-width:100px;
}

.footerSns{
  display:block;
  margin:0 0 10px;
  color:#9aa1a8;
  text-decoration:none;
  font-size:14px;
  line-height:1.6;
}

.footerSns:hover{
  color:#555;
}

.footerCopy{
  width:min(1320px, 94%);
  margin:42px auto 0;
  color:#a5acb3;
  font-size:13px;
  line-height:1.6;
}

.footerBar{
  background:#141414;
}

.footerBarInner{
  width:min(1320px, 94%);
  margin:0 auto;
  min-height:56px;
  display:flex;
  align-items:center;
  gap:22px;
}

.footerBarInner a{
  color:#a7a7a7;
  text-decoration:none;
  font-size:13px;
  line-height:1.4;
}

.footerBarInner a:hover{
  color:#fff;
}

.footerBarInner a.is-strong{
  color:#fff;
  font-weight:800;
}

/* responsive */
@media (max-width: 1200px){
  .footerTopInner{
    grid-template-columns: 1fr;
    gap:28px;
  }

  .footerBrand{
    justify-content:flex-start;
  }

  .footerGrid{
    grid-template-columns: 1fr 1fr;
    gap:28px 36px;
  }

  .footerSep{
    display:inline;
    margin-left:8px;
  }
}

@media (max-width: 700px){
  .footerTop{
    padding:42px 0 36px;
  }

  .footerGrid{
    grid-template-columns: 1fr;
    gap:22px;
  }

  .footerLogo{
    width:150px;
  }

  .footerBarInner{
    flex-wrap:wrap;
    min-height:auto;
    padding:14px 0;
    row-gap:10px;
  }

  .footerSep{
    display:block;
    margin:4px 0 0;
  }
}