/* 
  style_fixed.css
  Rebuilt for compatibility & accessibility
  Date: 2025-10-03 (Asia/Seoul)
  Notes:
  - Keeps original class names/selectors so it works with your HTML as-is
  - Improves readability (contrast), responsiveness, and performance
  - Adds focus-visible styles and reduced-motion support
  - Replaces .layer height animation with transform/opacity (smoother)
*/

/* ---------- Base / Reset ---------- */
*,
*::before,
*::after{ box-sizing:border-box; }

html{ font-size:16px; scroll-behavior:smooth; }

body{
  margin:0;
  background:#eee8d3;
  color:#111; /* improved contrast: was #fff on light bg */
  font-family:'Poppins', system-ui, -apple-system, Segoe UI, Roboto, 'Noto Sans KR', sans-serif;
  line-height:1.6;
}

/* Utility for screen-reader text */
.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

/* ---------- Header / Hero ---------- */
#header{
  position: relative;
  width:100%;
  /* 전체 화면을 꽉 채우되, 너무 길지 않게 제한 */
  min-height: clamp(520px, 62vh, 860px);
  /* 화면 크기에 따라 위/아래 여백 자동 */
  padding-block: clamp(40px, 9vh, 120px);

  background-image:url(images/goldbg.png);
  background-size: cover;           /* 비율 유지, 꽉 채움(일부 크롭 감수) */
  background-position: var(--hero-focus-x) 50%;
  background-repeat: no-repeat;
  background-attachment: fixed;     /* 모바일에선 아래 미디어쿼리에서 해제됨 */
  overflow: hidden;                 /* 내부 넘침 방지 */
}

/* 가독성용 오버레이 (밝은 배경에서도 텍스트 선명) */
#header::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.78) 0%,
    rgba(255,255,255,0.38) 45%,
    rgba(255,255,255,0.0) 80%
  );
  pointer-events:none;
}

/* Container width control for readability */
.container{
  width:min(1200px, 90%);
  margin-inline:auto;
  padding-block:10px;
}

/* ---------- Navigation ---------- */
nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}

.goldlogo{ width:140px; height:auto; }

nav ul{ list-style:none; margin:0; padding:0; }

nav ul li{
  display:inline-block;
  margin:10px 20px;
}

nav ul li a{
  color:#111;
  text-decoration:none;
  font-size:18px;
  position:relative;
  outline:none;
}
nav ul li a::after{
  content:'';
  width:0;
  height:3px;
  background:#ff004f;
  position:absolute;
  left:0;
  bottom:-6px;
  transition:width .3s ease;
}
nav ul li a:hover::after,
nav ul li a:focus-visible::after{ width:100%; }
nav ul li a:focus-visible{
  outline:2px solid #ff004f;
  outline-offset:3px;
  border-radius:4px;
}

/* ---------- Hero text ---------- */
.header-text{
  /* 큰 margin-top 삭제: padding 기반 레이아웃로 안정화 */
  margin-top: 0;
  max-width: 900px;                /* 너무 길게 늘어지는 것 방지 */
  font-size: clamp(1rem, 1.8vw, 1.125rem);
  position: relative;
  z-index: 1;                      /* 오버레이 위에 표시 */
}

.header-text p{
  font-size: clamp(0.9rem, 1.6vw, 1.125rem);
  letter-spacing: .06em;
  margin: 0 0 .4rem 0;
}

.header-text h1{
  font-size: clamp(2rem, 6vw, 4rem);
  line-height: 1.16;
  margin: .25rem 0 0 0;
  word-break: keep-all;
}

.header-text h1 span{ color:#ff004f; }

/* ---------- About ---------- */
#about{ padding:80px 0; color:#444; } /* was #ababab; improve contrast */
.row{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:24px;
}
.about-col-1{ flex-basis:35%; }
.about-col-1 img{
  width:100%;
  border-radius:15px;
  aspect-ratio:1/1;
  object-fit:cover;
}
.about-col-2{ flex-basis:60%; }

.sub-title{
  font-size:clamp(2rem, 5vw, 3.75rem);
  font-weight:600;
  color:#111; /* was #fff on light bg */
}

.tab-titles{ display:flex; gap:32px; margin:20px 0 40px; }
.tab-links{
  font-size:18px; font-weight:500; cursor:pointer; position:relative;
}
.tab-links::after{
  content:''; width:0; height:3px; background:#ff004f; position:absolute; left:0; bottom:-8px; transition:width .3s ease;
}
.tab-links.active-link::after{ width:50%; }

.tab-contents{ display:none; }
.tab-contents.active-tab{ display:block; }
.tab-contents ul{ padding-left:0; margin:0; }
.tab-contents ul li{ list-style:none; margin:10px 0; }
.tab-contents ul li span{ color:#b54769; font-size:14px; }

/* ---------- Services ---------- */
#services{ padding:30px 0; }
.services-list{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
  gap:40px;
  margin-top:50px;
}
.services-list div{
  background:#262626;
  color:#fff;
  padding:clamp(16px, 4vw, 40px);
  font-size:1rem;          /* was 13px: improve readability */
  font-weight:400;         /* was 300 */
  border-radius:10px;
  transition:transform .3s ease, background-color .3s ease;
}
.services-list div i{ font-size:50px; margin-bottom:30px; }
.services-list div h2{ font-size:clamp(1.25rem, 2.4vw, 1.875rem); font-weight:600; margin-bottom:15px; }
.services-list div a{
  text-decoration:none; color:#fff; font-size:.875rem; margin-top:20px; display:inline-block;
}
.services-list div:hover{ background:#ff004f; transform:translateY(-10px); }

/* ---------- Portfolio ---------- */
#portfolio{ padding:50px 0; }
.work-list{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
  gap:40px;
  margin-top:50px;
}
.work{
  border-radius:10px;
  position:relative;
  overflow:hidden;
}
.work img{
  width:100%;
  border-radius:10px;
  display:block;
  transition:transform .35s ease;
  aspect-ratio:4/3;
  object-fit:cover;
}

/* Overlay: replaced height animation with transform/opacity */
.layer{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.55) 55%, rgba(255,0,79,0.4) 100%);
  border-radius:10px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  padding:0 clamp(16px, 6vw, 40px);
  text-align:center;
  font-size:1rem; /* was 14px */
  line-height:1.6;

  opacity:0;
  transform:translateY(8px);
  transition:opacity .35s ease, transform .35s ease;
  pointer-events:none;
}
.layer h3{ font-weight:600; margin-bottom:12px; color:#fff; }
.layer a{
  margin-top:20px;
  color:#ff004f;
  text-decoration:none;
  font-size:18px;
  line-height:60px;
  background:#fff;
  width:60px; height:60px;
  border-radius:50%;
  text-align:center;
}
.work:hover img{ transform:scale(1.06); }
.work:hover .layer,
.work:focus-within .layer{
  opacity:1; transform:translateY(0); pointer-events:auto;
}

/* ---------- Buttons ---------- */
.btn{
  display:block;
  margin:50px auto;
  width:fit-content;
  border:1px solid #ff004f;
  padding:14px 50px;
  border-radius:6px;
  text-decoration:none;
  color:#fff;
  background:transparent;
  transition:background .25s ease, transform .2s ease;
}
.btn:hover,
.btn:focus-visible{
  background:#ff004f;
  transform:translateY(-1px);
  outline:none;
}
.btn.btn2{
  display:inline-block;
  background:#ff004f;
}

/* ---------- Contact ---------- */
.contact-left{ flex-basis:35%; }
.contact-right{ flex-basis:60%; }
.contact-left p{ margin-top:30px; }
.contact-left p i{ color:#ff004f; margin-right:15px; font-size:25px; }

.social-icons{ margin-top:30px; }
.social-icons a{
  text-decoration:none;
  font-size:30px;
  margin-right:15px;
  color:#ababab;
  display:inline-block;
  transition:transform .3s ease, color .3s ease;
}
.social-icons a:hover{ color:#ff004f; transform:translateY(-5px); }

.contact-right form{ width:100%; }
form input, form textarea{
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, 'Noto Sans KR', sans-serif !important;
  font-weight: 400;
  line-height: 1.5;
  width:100%;
  border:0;
  outline:none;
  background:#262626;
  padding:15px;
  margin:15px 0;
  color:#fff;
  font-size:18px;
  border-radius:6px;
}
form input::placeholder,
form textarea::placeholder{ font-family: inherit;
  font-style: normal;  /* 브라우저 기본 이탤릭 방지 */
  color: #d9d9d9;
  opacity: 1; color:#d9d9d9; }
form .btn2{
  padding:14px 60px;
  font-size:18px;
  margin-top:20px;
  cursor:pointer;
}

/* ---------- Footer ---------- */
.copyright{
  width:100%;
  text-align:center;
  padding:25px 0;
  background:#262626;
  color:#fff;
  font-weight:300;
  margin-top:20px;
}
.copyright i{ color:#ff004f; }
.copyright a{ color:#ff004f; text-decoration:none; }

/* ---------- Icons (FontAwesome toggle) ---------- */
nav .fas{ display:none; }

/* ---------- Header / Hero (patched) ---------- */

:root{
  /* 히어로 이미지 가로 포커스 (0%=왼쪽, 100%=오른쪽) */
  --hero-focus-x: 55%;
}

/* ---------- Responsive ---------- */
@media only screen and (max-width: 600px){  
  #header{
    background-image:url(images/phone2-goldbg.png);
    background-attachment:scroll; /* disable fixed on mobile for performance */
  }
  .header-text{ margin-top:100%; font-size:16px; }
  .header-text h1{ font-size:30px; }
  nav .fas{ display:block; font-size:25px; }
  nav ul{
    background:#ff004f;
    position:fixed;
    top:0; right:-200px;
    width:200px; height:100vh;
    padding-top:50px;
    z-index:2;
    transition:right .3s ease;
  }
  nav ul li a{ color:#fff; }
  nav ul li{ display:block; margin:25px; }
  nav ul .fas{ position:absolute; top:25px; left:25px; cursor:pointer; }

  .sub-title{ font-size:40px; }

  .about-col-1, .about-col-2{ flex-basis:100%; }
  .about-col-1{ margin-bottom:30px; }
  .about-col-2{ font-size:14px; }

  .tab-links{ font-size:16px; margin-right:20px; }

  .contact-left, .contact-right{ flex-basis:100%; }
  .copyright{ font-size:14px; }
}

/* ---------- Reduced Motion Preference ---------- */
@media (prefers-reduced-motion: reduce){
  *{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ---------- Message status ---------- */
#msg{
  color:#61b752;
  margin-top:-40px;
  display:block;
}
/* ===== 메인 검색바 (심플) ===== */
:root{
  --accent:#ffb000;       /* 버튼 컬러 (deunzi 톤 비슷) */
  --field:#ffffff;
  --border:#dcdcdc;
  --text:#222;
}

/* 헤더 위에 올 때 시인성 확보 (배경 이미지/영상 위에서도 잘 보이게) */
.searchbar{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr 1fr; /* 3셀 + 거래유형/버튼 */
  gap:10px;
  width:100%;
  margin-top:18px;
  background:rgba(255,255,255,.08);
  padding:10px;
  border-radius:10px;
  backdrop-filter:saturate(140%) blur(4px);
}

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

.field{ position:relative; display:flex; align-items:center; }
.field select{
  width:100%;
  appearance:none;
  background:var(--field);
  border:1px solid var(--border);
  border-radius:6px;
  padding:14px 44px 14px 14px;
  color:var(--text);
  font-size:16px;
}
.field .caret{
  position:absolute; right:12px; top:50%;
  transform:translateY(-50%); pointer-events:none; color:#7c7c7c;
}

.field--action{ gap:10px; }
.field--action select{ flex:1; }
.field--action .btn{ flex:0 0 140px; }

.searchbar .btn{
  border:0; border-radius:6px; padding:14px 18px; cursor:pointer; font-weight:700;
}
.searchbar .btn--accent{ background:var(--accent); color:#222; }
.searchbar .btn--accent:active{ transform:translateY(1px); }

/* 헤더 안쪽 여백이 작은 경우 아래로 살짝 띄우기 */
#header .container .searchbar{ margin-top:22px; }

/*뉴스섹션 */
.news-wrapper {
  background-color: #0a2440; /* 남색 계열 */
  padding: 40px 20px;
  margin-top: 60px;
  border-radius: 16px;
}

.news-title {
  color: #fff;
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 20px;
}

/* 뉴스 카드 박스 */
/* ===== 부동산 뉴스 바 (JSON + 슬라이드) ===== */
.news-bar-wrapper{
  margin-top:24px;
  padding:20px 7px;
  border-radius:9px;
  background:#f3f0e5;
}
.news-bar-title{
  font-size:20px; font-weight:700; color:#002a5c;
  margin-bottom:8px; padding-left:0px;
}
.news-bar{
  position:relative;
  background:#0a2440;
  border-radius:12px;
  padding:12px 16px;
  min-height:48px;
  color:#fff; line-height:1.5;
  box-shadow:0 2px 8px rgba(0,0,0,.1);
  overflow:hidden;
  display:flex; align-items:center;
}
.news-slide{
  width:100%;
  display:none;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.news-slide.active{ display:block; }
.news-bar-date{
  background:#fff; color:#0a2440; font-weight:600;
  padding:3px 8px; border-radius:20px; margin-right:12px;
  font-size:12px;
}
.news-bar-headline{
  font-weight:800; margin-right:12px; font-size:15px;
}
.news-bar-text{
  color:#d9deff; opacity:.9; font-size:14px;
}
/* 뉴스 링크 스타일 */
.news-bar a.news-slide{
  color:inherit;               /* 부모(흰색) 상속 */
  text-decoration:none;        /* 밑줄 제거 */
  display:block;
}
.news-bar a.news-slide:visited{ color:inherit; }
.news-bar a.news-slide:hover .news-bar-headline{
  text-decoration:underline;   /* 호버 시 제목만 밑줄(선택) */
}

/* 컨트롤 */
.news-bar-controls{
  display:flex; gap:5px; justify-content:flex-end; margin-top:8px;
}
.news-arrow{
  background:transparent; border:1px solid rgba(10,36,64,.25);
  color:#0a2440; font-size:15px; width:25px; height:325x;
  border-radius:10px; cursor:pointer; transition:.2s;
}
.news-arrow:hover{ background:#0a2440; color:#fff; border-color:#0a2440; }

/* 접근성: 키보드 포커스 */
.news-arrow:focus{ outline:3px solid #ffcc00; outline-offset:2px; }

/* 반응형 */
@media (max-width:768px){
  .news-bar{ padding:14px 16px; border-radius:12px; }
  .news-bar-title{ text-align:left; padding-left:0; }
  .news-bar-text{ display:none; } /* 모바일에선 제목 위주 */
}
/* --- Scroll Reveal base --- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
  will-change: opacity, transform;
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* 순차(스태거) 효과: 같은 컨테이너 안에서 지연시간 다르게 */
.reveal[data-delay="1"] { transition-delay: .1s; }
.reveal[data-delay="2"] { transition-delay: .2s; }
.reveal[data-delay="3"] { transition-delay: .3s; }
.reveal[data-delay="4"] { transition-delay: .4s; }

/* 모션 민감 사용자 배려 */
@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; transform: none; opacity: 1; }
}