:root{
  --gold:#ffb510;
  --brand-red:#9a1119;
  --ink:#121212;
  --cream:#fff3e3;
  --card-bg:rgba(255,255,255,.82);
  --shadow:0 10px 30px rgba(0,0,0,.18);
  --radius:18px;
  --container:1480px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Pretendard,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;color:#222;background:#fafafa}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ================= Header ================= */
/* 헤더 바/경계 제거: 전체는 클릭 비활성화하고 버튼만 활성화 */
.site-header{
  position:fixed; top:0; left:0; right:0;
  height:0; padding:0; background:transparent; backdrop-filter:none;
  color:#fff; z-index:50; pointer-events:none;
}
/* HOME 버튼을 우상단 구석에 고정 */
.site-header .nav{
  position:fixed;
  top:calc(10px + env(safe-area-inset-top));
  right:calc(14px + env(safe-area-inset-right));
  pointer-events:auto;
}
.nav a{
  display:inline-block;
  padding:8px 12px;


  color:#fff; font-weight:800; letter-spacing:.2px; text-decoration:none;

}
.nav a:hover{ background:rgba(0,0,0,.62); }


.abklogo{position: absolute ; top: 20px; left: 20px;}

/* 컨테이너 */
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 20px}

/* ================= Hero (섹션 1) ================= */
.hero{
  margin-top:0;                               /* 헤더 높이 0 → 여백 제거 */
  position:relative;
  min-height:100vh;                           /* 화면 가득 */
  color:#fff;
  background:#000 url('/indonesia/img/in_bg_1.jpg') center/cover no-repeat;
  display:flex; align-items:center;
  scroll-snap-align:start; scroll-snap-stop:always; /* 스냅 타겟 */
}
.hero .headline{
  max-width:760px; font-weight:900; font-size:50px; line-height:1.15;
  text-shadow:0 6px 24px rgba(0,0,0,.55);
}

/* ================= Wave divider ================= */
.wave{display:block;line-height:0}
.wave svg{display:block;width:100%;height:auto}

/* ================= Brand sections (공통) ================= */
.brand-sec{
  position:relative;
  padding:72px 0; background:#fff;
  min-height:100vh;                            /* 화면 가득 */
  display:flex; align-items:center;
  scroll-snap-align:start; scroll-snap-stop:always;
}
.brand-sec .bg{
  position:absolute; inset:0;
  background:#eee center/cover no-repeat; z-index:0;
}
.brand-sec .inner{
  position:relative; z-index:1;


}
.card{


}
.badge{
  width:80px; height:80px; border-radius:50%;
  background:#fff url('/indonesia/img/badge.png') center/100% no-repeat;
margin-bottom:20px;
}
.eyebrow{font-size:14px; font-weight:800; color:#7d89a5; margin:4px 0 10px}
.brand-title{font-size:46px; line-height:1.05; font-weight:900; margin:6px 0 12px; color:#2a2a2a}
.tagline{font-style:italic; color:#333; margin:0 0 18px; font-weight:700}
.desc{color:#333; font-weight:600; line-height:1.6; margin:0 0 14px}
.bullets{margin:14px 0 18px; padding-left:18px}
.bullets li{margin:6px 0; font-weight:700}
.btns{display:flex; flex-wrap:wrap; gap:10px; margin-top:30px}
.btn{display:inline-flex; align-items:center; justify-content:center; height:40px; padding:0 16px; border-radius:999px; font-weight:800; border:0; cursor:pointer}
.btn-primary{background:#5b41ff; color:#fff}
.btn-orange{background:#ff6b00; color:#fff}
.btn-green{background:#18a05b; color:#fff}
.btn-purple{background:linear-gradient(45deg,#f77737,#e1306c,#c13584,#833ab4); color:#fff}
.btn:hover{filter:brightness(1.02)}

/* ================= Themed sections ================= */
.sec--yongma{background:linear-gradient(#ffe9c9,#ffe1b3)}
.sec--yongma .bg{background-image:url('/indonesia/img/in_bg_2.jpg');}
.sec--holika{background:linear-gradient(#eef2ff,#e3f1ff)}
.sec--holika .bg{background-image:url('/indonesia/img/in_bg_3.jpg');}

/* ================= Visual (이미지 카드) ================= */
.visual-wrap{display:flex; justify-content:flex-end}
.visual-card{
  width:min(560px,90%); aspect-ratio:4/3; border-radius:24px; background:rgba(0,0,0,.15);
  box-shadow:var(--shadow); background-position:center; background-size:cover;
}
/* 섹션 배경과 중복 방지 */
.sec--yongma .visual-card,
.sec--holika .visual-card{ background-image:none; }

/* ================= Footer ================= */
.site-footer{background:#363636; color:#9b9b9b; text-align:center; padding:16px}

/* ================= Responsive ================= */
@media (max-width:1024px){
  .hero .headline{font-size:36px}
  .brand-sec .inner{grid-template-columns:1fr; gap:22px}
  .visual-wrap{order:-1; justify-content:center}
  .visual-card{width:100%; max-width:680px}
  .brand-title{font-size:40px}
}
@media (max-width:600px){
  .hero .headline{font-size:20px}
  .card{padding:20px}
  .brand-title{font-size:32px}
  .btn{height:38px; padding:0 14px}
}

/* ================= Scroll Snap / 애니메이션 보조 ================= */
/* JS가 부드러운 스크롤을 처리하므로 smooth 해제 */
html{
  scroll-snap-type:y mandatory;
  scroll-behavior:auto;
  scroll-padding-top:0;              /* 헤더 0 → 보정 0 */
  overscroll-behavior:contain;
}
/* 애니메이션 중 스냅 잠시 비활성화 (JS에서 .no-snap 토글) */
html.no-snap{ scroll-snap-type:none !important; }

/* 모바일에서 스냅을 느슨하게 하고 싶다면 */
@media (max-width:991px){
  html{ scroll-snap-type:y proximity; }
}


/* 모바일에서 버튼 2열 */
@media (max-width:600px){
  .btns{
    display: grid;                     /* flex → grid */
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;                         /* 버튼 사이 간격 */
  }
  .btns .btn{
    width: 100%;                       /* 각 셀 가득 채우기 */
    height: 48px;                      /* 터치 영역 확보 (선택) */
    justify-content: center;           /* 텍스트 가운데 정렬 */
  }
  /* 만약 버튼이 이미지(<img>)라면 더 또렷하게 */
  .btns a img{
    width: 100%;
    height: auto;
    display: block;
  }
  a.logo img{
	width: 70%;
	height: auto;
	display: block;
  }
}