/* HADA LIGHT mobile landing — image-first layout */

/* 격동고딕: fonts/ 폴더에 파일 넣으면 자동 적용
   (예: GyeokdongGothic.otf / .woff2 / Sandoll 격동고딕.otf) */
@font-face {
  font-family: "GyeokdongGothic";
  src:
    local("Sandoll 격동고딕"),
    local("Sandoll 격동고딕 Black"),
    local("Sandoll GyeokdongGothic"),
    local("격동고딕"),
    url("../fonts/GyeokdongGothic.woff2") format("woff2"),
    url("../fonts/GyeokdongGothic.woff") format("woff"),
    url("../fonts/GyeokdongGothic.otf") format("opentype"),
    url("../fonts/GyeokdongGothic.ttf") format("truetype"),
    url("../fonts/SandollGyeokdongGothic.otf") format("opentype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: "GyeokdongGothic", "Sandoll 격동고딕", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  background: #a8e4fe;
  color: #222;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
}

:root {
  --hada-blue: #0066ff;
  --hada-sky: #dff4fd;
  --page-max: 1080px;
  /* 상단바 원본 2160×374 */
  --header-h: calc(min(100vw, var(--page-max)) * 374 / 2160);
  /* 하단 버튼 원본 1080×490, 가로 50%씩 */
  --footer-h: calc(min(100vw, var(--page-max)) * 490 / 2160);
  --thumb-bw: 5px;
  /* 원본 Lucci 흰 카드 좌우 하늘색 여백 ≈ 9.4% */
  --side-gutter: 9.4%;
  /* 팬토닉 큰 박스 — Frame 원본 05 박스와 동일 (L192 / R222 on 2156) */
  --fantonic-inset-l: calc(192 / 2156 * 100%);
  --fantonic-inset-r: calc(222 / 2156 * 100%);
  /* 하단 팬토닉 실링팬 내부 카드 간격(69px/2156)과 동일 */
  --fantonic-section-gap: calc(69 / 2156 * 100%);
  --fantonic-line: #c2c6d8;
  /* 하단 05 박스 보더 3px@2156 스케일 — 최소 1px */
  --fantonic-line-w: max(1px, calc(3 / 2156 * min(100vw, var(--page-max))));
  /* 흰 카드 안 팬 이미지 좌우 여백 (원본 비율) */
  --lucci-main-pad-x: 10%;
  --lucci-main-pad-y: 5%;
  --lucci-sky: #a8e4fe;
}

.page {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  background: var(--lucci-sky);
  padding-top: calc(env(safe-area-inset-top, 0px) + var(--header-h));
  /* 하단 여백은 자격증 아코디언이 회색으로 채움 (블루 비침 방지) */
  padding-bottom: 0;
  overflow-x: hidden;
}

/* Fixed header / footer — 이미지 비율에 맞춘 높이, 선/갭 제거 */
.site-header {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--page-max);
  z-index: 100;
  line-height: 0;
  background: var(--hada-blue);
  overflow: hidden;
}

.site-header-btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  line-height: 0;
}

.site-header img {
  width: 100%;
  height: auto;
  vertical-align: top;
  pointer-events: none;
}

.site-footer-bar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--page-max);
  z-index: 100;
  display: flex;
  line-height: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  /* 버튼 아래·사이 틈도 자격증 바 색으로 */
  background: #3e414d;
  border: 0;
  box-shadow: none;
  gap: 0;
}

.site-footer-bar .footer-btn {
  flex: 1 1 50%;
  display: block;
  line-height: 0;
  margin: 0;
  border: 0;
  outline: 0;
}

.site-footer-bar img {
  width: 100%;
  height: auto;
  vertical-align: top;
}

.block {
  position: relative;
  line-height: 0;
  overflow: visible;
  margin: 0;
  border: 0;
  background: transparent;
}

.block .full {
  width: 100%;
  vertical-align: top;
}

/* Lucci Air 전체 구간 — 첨부 스카이처럼 한 장의 연속 그라데이션 */
.lucci-wrap {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background-color: #a6e6ff;
  background-image: url("../images/web/lucci-sky-continuous.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% 100%;
  isolation: isolate;
}

.lucci-wrap > .block,
.lucci-wrap > .product-block {
  background: transparent !important;
}

/* 제품 카드 — 배경은 wrap 그라데이션이 비치도록 투명 */
.lucci.product-block {
  position: relative;
  z-index: 0;
  margin: 0;
  padding: 4.5% var(--side-gutter) 4.5%;
  background: transparent !important;
}

.lucci .product-card {
  position: relative;
  z-index: 1;
  box-shadow: none;
  border: 0;
  outline: 0;
  border-radius: 0;
  width: 100%;
  margin: 0;
  padding: 4% 4.5% 5%;
  background: #fff;
}

.lucci-hero {
  position: relative;
  z-index: 1;
  overflow: hidden;
  margin: 0;
  line-height: 0;
  background: transparent !important;
}

.lucci-hero .full {
  width: 100%;
  display: block;
  margin: 0;
  /* 하늘 영역 알파가 wrap 그라데이션을 드러냄 */
  background: transparent;
}

.lucci-features {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0;
  background: transparent !important;
  line-height: 0;
}

.lucci-features .full {
  display: block;
  margin: 0;
  background: transparent;
}

.footer-block {
  background: #191d26;
  line-height: 0;
  margin: 0;
  border: 0;
}

.footer-block .full {
  vertical-align: top;
}

/* —— product modules (원본처럼 좌우 여백) —— */
.product-block {
  background: transparent;
  padding: 0 var(--side-gutter) 4%;
  line-height: normal;
}

.product-card {
  background: #fff;
  padding: 5% 4.5% 6%;
  width: 100%;
  border-radius: 0;
  overflow: hidden;
}

.product-stage {
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Lucci: 원본 비율 — 흰 카드 좌우 하늘색 + 카드 안 팬 여백 */
.lucci .product-stage {
  width: 100%;
  height: auto;
  /* 원본 메인 팬 영역 비율 (넓은 가로형) */
  aspect-ratio: 1575 / 641;
  max-height: none;
  padding: var(--lucci-main-pad-y) var(--lucci-main-pad-x);
  box-sizing: border-box;
  background: #fff;
  border: 0;
  outline: 0;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lucci .product-main {
  width: 82%;
  height: auto;
  max-width: 82%;
  max-height: 92%;
  margin: 0 auto;
  object-fit: contain;
  object-position: center center;
  transition: opacity 0.22s ease;
  display: block;
}

.product-main {
  width: 88%;
  max-width: 820px;
  margin: 0 auto;
  transition: opacity 0.22s ease;
}

.product-main.is-swapping {
  opacity: 0.4;
}

.product-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 3.5% 0.5% 4%;
}

.product-name,
.product-size,
.fantonic-tagline,
.fantonic-notes,
.price-badge,
.thumb span {
  font-family: "GyeokdongGothic", "Sandoll 격동고딕", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}

.product-name {
  font-weight: 800;
  color: var(--hada-blue);
  font-size: clamp(15px, 4vw, 34px);
  letter-spacing: -0.03em;
  line-height: 1.25;
}

.product-size {
  font-size: clamp(11px, 2.5vw, 20px);
  font-weight: 700;
  color: #333;
  white-space: nowrap;
  flex-shrink: 0;
}

.thumb-grid {
  display: grid;
  gap: 10px;
  width: 100%;
}

.lucci-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.fantonic-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

/*
  선택 시에도 박스 외곽·간격 고정:
  border 대신 inset box-shadow만 사용해 두께/색만 변경
*/
.thumb {
  border: 0;
  background: #fff;
  border-radius: 2px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 8% 5% 10%;
  min-width: 0;
  width: 100%;
  aspect-ratio: 1 / 1.12;
  box-shadow: inset 0 0 0 var(--fantonic-line-w) var(--fantonic-line);
  outline: none;
  transform: none;
  transition: color 0.15s ease, box-shadow 0.15s ease;
}

.thumb.is-active {
  box-shadow: inset 0 0 0 var(--thumb-bw) var(--hada-blue);
  transform: none;
}

.thumb img {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  object-fit: contain;
  pointer-events: none;
}

.thumb span {
  flex: 0 0 auto;
  margin-top: 6%;
  font-size: clamp(12px, 2.9vw, 24px);
  font-weight: 800;
  color: #222;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.thumb.is-active span {
  color: var(--hada-blue);
}

/* Fantonic 구간 — 양옆·아래 흰색 (페이지 하늘색 가림), 원본 겹침 없음 */
.fantonic-zone {
  background: #fff;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  width: 100%;
}

.fantonic-zone > .block {
  background: #fff !important;
}

.fantonic.product-block {
  /* 하단 05 박스와 좌우 라인 정렬 (원본 Frame inset) */
  padding: 2% var(--fantonic-inset-r) 0 var(--fantonic-inset-l);
  margin: 0;
  background: #fff !important;
}

.fantonic .product-card {
  background: #fff;
  box-shadow: none;
  border: var(--fantonic-line-w) solid var(--fantonic-line);
  outline: 0;
  border-radius: 0;
  padding: 2% 2% 3%;
}

.fantonic .product-stage {
  width: 100%;
  height: auto;
  aspect-ratio: 1572 / 658;
  padding: 2% 6%;
  box-sizing: border-box;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-image: none !important;
}

.fantonic .product-main {
  width: 92%;
  max-width: 92%;
  height: auto;
  max-height: 96%;
  margin: 0 auto;
  object-fit: contain;
  object-position: center;
  display: block;
  background: #fff;
}

.after-fantonic {
  /* 하단 실링팬 내부 카드 간격과 동일한 섹션 간격 */
  margin-top: var(--fantonic-section-gap);
  padding: 0;
  background: #fff !important;
  line-height: 0;
}

.after-fantonic .full {
  display: block;
  margin: 0;
  vertical-align: top;
  width: 100%;
}

/* Fantonic */
.fantonic-tagline {
  text-align: center;
  font-size: clamp(13px, 3.1vw, 26px);
  font-weight: 700;
  color: #333;
  padding: 1% 2% 1.5%;
  line-height: 1.4;
  letter-spacing: -0.02em;
}

.fantonic-name {
  text-align: center;
  padding: 0 2% 3%;
  font-size: clamp(17px, 4.6vw, 38px);
}

.fantonic-price-row {
  display: flex;
  align-items: flex-start;
  gap: 3%;
  padding: 2% 0 5%;
}

.price-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40%;
  width: 40%;
  max-width: 40%;
  box-sizing: border-box;
  background: #ffe500;
  border: 4px solid var(--hada-blue);
  border-radius: 12px;
  color: var(--hada-blue);
  font-weight: 900;
  font-size: clamp(15px, 4.1vw, 34px);
  /* 좌우 패딩 고정 — 금액 자릿수가 바뀌어도 박스 크기 유지 */
  padding: 0.55em 0;
  white-space: nowrap;
  line-height: 1.15;
  min-width: 0;
  letter-spacing: -0.03em;
  overflow: hidden;
  text-align: center;
}

.fantonic-notes {
  flex: 1 1 auto;
  min-width: 0;
  font-size: clamp(11px, 2.5vw, 20px);
  font-weight: 700;
  line-height: 1.45;
  color: #222;
  letter-spacing: -0.02em;
}

.fantonic-notes .note-red {
  color: #e60000;
  font-weight: 800;
  margin-bottom: 2%;
}

/* Kakao CTA hotspot — 「카톡 상담도 환영합니다!」파란 버튼 */
.kakao-cta-wrap {
  position: relative;
}

.kakao-cta-wrap .hotspot {
  position: absolute;
  z-index: 2;
  border-radius: 40px;
  cursor: pointer;
}

/* 03 구간 카톡 버튼 */
.kakao-hs-1 {
  left: 13.3%;
  right: 13.9%;
  top: 32.5%;
  height: 15.8%;
}

/* 05 구간 카톡 버튼 (상단) */
.kakao-hs-2 {
  left: 13.3%;
  right: 13.9%;
  top: 24%;
  height: 2%;
}

/* 05 구간 카톡 버튼 (하단) */
.kakao-hs-3 {
  left: 16%;
  right: 15.5%;
  top: 69%;
  height: 2%;
}

/* Accordion under footer */
.accordion {
  background: #3e414d;
  line-height: 0;
  border: 0;
  margin: 0;
  /* 고정 하단 버튼 높이만큼 회색 연장 — 블루 페이지 여백이 보이지 않게 */
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--footer-h));
}

.accordion-trigger {
  display: block;
  width: 100%;
  line-height: 0;
  background: #3e414d;
}

.accordion-trigger img {
  width: 100%;
  height: auto;
  vertical-align: top;
}

.accordion-panel {
  overflow: hidden;
  background: #3e414d;
}

.accordion-panel[hidden] {
  display: none;
}

.accordion-inner {
  padding: 7% 8% 12%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5vw;
  line-height: 0;
}

.accordion-inner img {
  width: 82%;
  max-width: 680px;
  border-radius: 20px;
  /* 모서리 투명 영역 — 흰 틈 대신 자격증 남색 */
  background: #0f296c;
}

.reveal {
  will-change: transform, opacity;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

html.no-gsap .reveal:not(.is-visible) {
  opacity: 0;
  transform: translateY(28px);
}

@media (min-width: 1081px) {
  body {
    background: #111;
  }
}