@charset "UTF-8";
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family: "Noto Sans KR", "Malgun Gothic","맑은 고딕", "Apple SD Gothic Neo", sans-serif;
  color:#333;
  background:#fff;
}
a { text-decoration:none; color:inherit; }
ul { list-style:none; }
img { display:block; max-width:100%; }
button { cursor:pointer; font-family:inherit; }

.wrap { max-width:1200px; margin:0 auto; padding:0 24px; }

/* ===== 헤더 ===== */
header.site-header{ padding:18px 0; border-bottom:1px solid #f0f0f0; }
.header-inner{ display:flex; align-items:center; justify-content:space-between; max-width:1200px; margin:0 auto; padding:0 24px; }
.header-inner .logo img{ height:56px; transition:transform .3s ease; }
.header-inner .logo:hover img{ transform:rotate(-4deg) scale(1.05); }
nav.main-nav ul{ display:flex; gap:40px; }
nav.main-nav a{ font-size:15px; font-weight:700; color:#333; }
nav.main-nav li.active a{ color:#0f5b8c; }
nav.main-nav a:hover{ color:#0f5b8c; }

/* ===== 히어로 슬라이더 ===== */
.hero-slider{ position:relative; width:100%; aspect-ratio:1920/700; overflow:hidden; background:#123; }
.hero-slider .slide{ position:absolute; inset:0; opacity:0; transition:opacity .6s ease; }
.hero-slider .slide.active{ opacity:1; }
.hero-slider .slide img{ width:100%; height:100%; object-fit:cover; }
.hero-slider .caption{
  position:absolute; left:6%; top:50%; transform:translateY(-50%); color:#fff; z-index:2;
}
.hero-slider .caption h1{ font-size:34px; font-weight:800; line-height:1.4; margin-bottom:14px; text-shadow:0 2px 8px rgba(0,0,0,.3); }
.hero-slider .caption p{ font-size:15px; opacity:.9; }
.hero-slider .arrow{
  position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.85); border:none; font-size:18px; z-index:3; cursor:pointer; transition:background .2s, transform .2s;
}
.hero-slider .arrow:hover{ background:#fff; transform:translateY(-50%) scale(1.1); }
.hero-slider .arrow.prev{ left:20px; }
.hero-slider .arrow.next{ right:20px; }
.hero-slider .dots{ position:absolute; bottom:20px; left:50%; transform:translateX(-50%); display:flex; gap:8px; z-index:3; }
.hero-slider .dots span{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.5); cursor:pointer; transition:background .2s, transform .2s; }
.hero-slider .dots span:hover{ transform:scale(1.3); }
.hero-slider .dots span.active{ background:#fff; }

/* ===== 서브페이지 히어로(고정, 슬라이드 없음) ===== */
.hero-sub{ position:relative; width:100%; aspect-ratio:1920/620; overflow:hidden; }
.hero-sub img{ width:100%; height:100%; object-fit:cover; }
.hero-sub .caption{ position:absolute; left:6%; top:50%; transform:translateY(-50%); color:#fff; }
.hero-sub .caption h1{ font-size:30px; font-weight:800; line-height:1.4; margin-bottom:12px; text-shadow:0 2px 8px rgba(0,0,0,.3); }
.hero-sub .caption p{ font-size:14px; opacity:.9; }

/* ===== 브레드크럼 & 탭 ===== */
.breadcrumb{ padding:20px 0; font-size:13px; color:#999; }
.breadcrumb b{ color:#333; }
.tab-menu{ display:flex; border:1px solid #eee; margin-bottom:50px; }
.tab-menu a{ flex:1; text-align:center; padding:16px 0; font-size:14px; font-weight:700; color:#555; border-right:1px solid #eee; transition:background .2s, color .2s; }
.tab-menu a:hover{ background:#f2f5f8; }
.tab-menu a:last-child{ border-right:none; }
.tab-menu a.active{ background:#0f3a5c; color:#fff; }

/* ===== 섹션 공통 ===== */
.section-title{ text-align:center; font-size:26px; font-weight:800; margin-bottom:10px; }
.section-sub{ text-align:center; font-size:14px; color:#888; margin-bottom:40px; }

/* ===== 인트로 블록 ===== */
.intro-block{ text-align:center; padding:70px 0 40px; }
.intro-block h2{ font-size:24px; font-weight:800; margin-bottom:20px; }
.intro-block p{ font-size:15px; color:#555; line-height:2; }
.intro-block b{ color:#0f5b8c; }

.logo-block{ display:flex; align-items:center; gap:60px; padding:20px 0 70px; }
.logo-block img{ width:220px; }
.logo-block p{ font-size:15px; color:#555; line-height:2; }

/* ===== Shop 안내 3카드 ===== */
.service-section{ background:#f7f8f9; padding:70px 0; }
.service-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin-top:40px; }
.service-grid > div{ transition:transform .3s ease; }
.service-grid > div:hover{ transform:translateY(-8px); }
.service-grid img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:4px; margin-bottom:20px; overflow:hidden; transition:transform .4s ease; }
.service-grid > div:hover img{ transform:scale(1.04); }
.service-grid h3{ font-size:17px; font-weight:800; margin-bottom:10px; }
.service-grid p{ font-size:13px; color:#777; line-height:1.8; }

/* ===== 갤러리 그리드 ===== */
.gallery-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:30px; }
.gallery-grid img{ width:100%; aspect-ratio:1; object-fit:cover; overflow:hidden; transition:transform .4s ease, filter .4s ease; cursor:pointer; }
.gallery-grid img:hover{ transform:scale(1.06); filter:brightness(1.05); }

/* ===== 네비 밑줄 애니메이션 ===== */
nav.main-nav a{ position:relative; }
nav.main-nav a::after{
  content:''; position:absolute; left:0; bottom:-6px; width:0; height:2px; background:#0f5b8c;
  transition:width .25s ease;
}
nav.main-nav a:hover::after, nav.main-nav li.active a::after{ width:100%; }

/* ===== 버튼 트랜지션 ===== */
a, button{ transition:background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .15s ease; }
.submit-btn:hover, .write-btn:hover{ transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,.12); }

/* ===== 등장 애니메이션 (스크롤 시 페이드업) ===== */
.fade-up{ opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
.fade-up.in-view{ opacity:1; transform:translateY(0); }

/* ===== 강아지 분양 그리드 ===== */
.dog-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px 20px; margin:40px 0 60px; }
.dog-card{ text-align:center; display:block; transition:transform .25s ease; }
.dog-card:hover{ transform:translateY(-6px); }
.dog-card .thumb{ width:100%; aspect-ratio:1; overflow:hidden; border-radius:2px; background:#f2f2f2; }
.dog-card .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .45s ease; }
.dog-card:hover .thumb img{ transform:scale(1.08); }
.dog-card .name{ margin-top:10px; font-size:14px; font-weight:700; transition:color .2s; }
.dog-card:hover .name{ color:#0f5b8c; }
.dog-card .cart{ margin-top:6px; font-size:16px; color:#999; }

/* ===== 게시판 ===== */
.board-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:30px; }
.board-header h2{ font-size:20px; font-weight:800; }
.board-search{ border:1px solid #ddd; border-radius:20px; padding:8px 16px; font-size:13px; width:200px; }
.board-empty{ text-align:center; padding:100px 0; color:#999; }
.board-empty .icon{ font-size:40px; margin-bottom:16px; }
.write-btn{ display:inline-block; margin-top:16px; border:1px solid #ccc; padding:8px 24px; border-radius:4px; font-size:13px; }

/* ===== 분양문의 폼 ===== */
.inquiry-wrap{ display:grid; grid-template-columns:420px 1fr; gap:60px; padding:40px 0 80px; }
.inquiry-wrap img{ width:100%; border-radius:4px; }
.form-field{ margin-bottom:26px; }
.form-field label{ display:block; font-size:14px; font-weight:700; margin-bottom:10px; }
.form-field input, .form-field textarea{
  width:100%; border:none; border-bottom:1px solid #ccc; padding:8px 2px; font-size:14px; font-family:inherit;
}
.form-field textarea{ border:1px solid #ccc; border-radius:4px; padding:10px; resize:vertical; }
.form-field .addr-row{ display:flex; gap:8px; }
.submit-btn{ padding:12px 40px; background:#0f3a5c; color:#fff; border:none; border-radius:4px; font-size:14px; font-weight:700; }

/* ===== 푸터 ===== */
footer.site-footer{ border-top:1px solid #eee; padding:50px 0 30px; margin-top:40px; }
.footer-inner{ display:flex; justify-content:space-between; align-items:flex-start; max-width:1200px; margin:0 auto; padding:0 24px; }
.footer-inner img{ height:60px; margin-bottom:10px; }
.footer-nav{ display:flex; gap:20px; font-size:13px; margin-bottom:16px; }
.footer-info p{ font-size:13px; color:#777; line-height:2; }
.footer-info b{ color:#333; }
.footer-copy{ text-align:center; font-size:12px; color:#aaa; margin-top:10px; }

@media (max-width:1240px){ .wrap{ max-width:100%; } }