/* ============================================================
   컨셉보기 페이지 — 피그마 sub_컨셉보기_1920 (53:6334) 1920x3761
   좌표는 전부 피그마 원본에서 직접 검산한 값
   ============================================================ */

:root {
  --sans: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --serif: "Nanum Myeongjo", "NanumMyeongjo", serif;
  --en: "Cormorant Infant", "Times New Roman", serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--sans); color: #111; background: #fff; -webkit-font-smoothing: antialiased; overflow-x: clip; } /* clip — hidden과 달리 body를 스크롤 컨테이너로 만들지 않아 세로 이중 스크롤바 원천 차단 */ }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; background: none; border: 0; cursor: pointer; }

#page { position: relative; width: 1920px; transform-origin: 0 0; background: #fff; }

/* ---------- 컨셉 섹션 — 위치는 concept.php에서 CSS 변수로 동적 생성
   (--img-l/--img-t/--body-l/--body-t 데스크톱, --m-t 모바일) ---------- */
/* 래퍼도 실제 영역(top/height)을 갖는다 — 자식만 배치되던 구조에서는
   섹션 박스 자체가 최상단에 뭉친 0높이라 GNB 소분류 앵커(#ct-N) 대상이 안 됨.
   주의: .ct-sec이 abs라 자식(img/body)의 containing block이므로, 래퍼에 top을
   준 순간 자식 좌표를 래퍼 기준으로 재계산해야 한다 — 안 그러면 이중 오프셋
   (래퍼 top + 자식 top)으로 콘텐츠가 화면 밖으로 밀려난다 */
.ct-sec { position: absolute; left: 0; top: var(--img-t); width: 1920px; height: 460px; }
.ct-sec__img { position: absolute; left: var(--img-l); top: 0; width: 760px; height: 460px; object-fit: cover; }
.ct-sec__body { position: absolute; left: var(--body-l); top: 80px; width: 489px; } /* body_t = img_t + 80 */
.ct-sec__label {
  font-family: var(--en); font-weight: 700; font-size: 18px; line-height: 28px;
  letter-spacing: -0.02em; text-transform: uppercase; color: #000; white-space: nowrap;
}
.ct-sec__tit {
  margin-top: 16px; font-family: var(--serif); font-weight: 600;
  font-size: 40px; line-height: 62px; letter-spacing: -0.01em; color: #000; white-space: nowrap;
}
.ct-sec__desc {
  margin-top: 32px; font-weight: 500; font-size: 18px; line-height: 30px;
  letter-spacing: -0.02em; color: #666;
}
.ct-sec__btn {
  display: flex; align-items: center; justify-content: center;
  width: 194px; height: 52px; margin-top: 50px;
  border: 1px solid #aaa; font-weight: 500; font-size: 16px; line-height: 30px;
  letter-spacing: -0.02em; color: #333; transition: background 0.2s, color 0.2s;
}
.ct-sec__btn:hover { background: #333; color: #fff; border-color: #333; }

/* ============================================================
   모바일 (html.is-m — 360 캔버스) — 피그마 컨셉보기_360 4110:8269
   360x(동적): GNB 60 / 히어로 60~260 / 카드 320~ (이미지 360x240 +
   흰 패널 320x282 겹침 40, 카드 피치 530) / 푸터(높이는 PHP에서 계산)
   ============================================================ */
html.is-m #page { width: 360px; }

/* ---------- 히어로 (60~260) — 모바일 전용 크롭(ct-hero-m.jpg, 딤 포함) ---------- */
html.is-m .sub-hero { top: 60px; height: 200px; }
html.is-m .sub-hero__img:not(.sub-hero__img--m) { display: none; }
html.is-m .sub-hero__tit { left: 0; top: 82px; width: 100%; text-align: center; }

/* 데스크톱 히어로 타이틀 위치 (inline style → CSS 이동, 모바일 오버라이드용) */
.sub-hero__tit { left: 854px; top: 302px; }

/* ---------- 컨셉 카드 — 이미지 위에 흰 패널이 40px 겹쳐 올라옴 ---------- */
html.is-m .ct-sec { width: 360px; top: var(--m-t); height: 482px; } /* 이미지 240 + 패널 시작 200 + 패널 282 = 482 */
html.is-m .ct-sec__img {
  left: 0; top: 0; width: 360px; height: 240px; /* 래퍼 기준 — 데스크톱 .ct-sec 주석 참고 */
  filter: brightness(0.9); /* 시안 딤 rgba(0,0,0,0.1) */
}
html.is-m .ct-sec__body {
  left: 20px; top: 200px; width: 320px; height: 282px; /* 래퍼 기준 (구 calc(--m-t + 200px)) */
  background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  padding: 30px 20px; /* 콘텐츠 (40,230) = 패널(20,200) + 패딩 */
}
html.is-m .ct-sec__label { font-size: 15px; line-height: 18px; }
html.is-m .ct-sec__tit { margin-top: 16px; font-weight: 700; font-size: 26px; line-height: 30px; }
html.is-m .ct-sec__desc { margin-top: 20px; font-size: 15px; line-height: 24px; }
html.is-m .ct-sec__btn {
  width: fit-content; height: 42px; margin-top: 24px;
  padding: 5px 40px; font-size: 14px; line-height: 30px;
}

/* ============================================================
   태블릿 (html.is-t — 1024 캔버스) — 피그마 컨셉보기_1024 276:2212 기반
   flow 스택(절대좌표 무시) — 컨셉 수가 바뀌어도 높이 자동.
   캔버스 1024 → main.js base=1024로 tPad(바 68 자리)·t-native 푸터 자동.
   히어로 68~408 / 블록 = 전체폭 사진 436 + 흰 카드 720(위로 51px 겹침) /
   블록 간격 60 / 마지막 블록 → 푸터 간격 120(data-dyn-gap-t).
   ============================================================ */
html.is-t #page { width: 1024px; height: auto; }

/* 히어로 (68~408) — 데스크톱 이미지 커버 + 타이틀 중앙 40px */
html.is-t .sub-hero { top: 68px; width: 1024px; height: 340px; }
html.is-t .sub-hero__img--m { display: none; }
html.is-t .sub-hero__tit { left: 0; top: 146px; width: 100%; text-align: center; font-size: 40px; line-height: 46px; }

/* 컨셉 블록 — 사진(전체폭 436, 딤 10%) 위로 카드가 51px 겹침 */
html.is-t main { padding-top: 408px; }
html.is-t .ct-sec { position: relative; top: auto; width: 1024px; height: auto; }
html.is-t .ct-sec + .ct-sec { margin-top: 60px; }
html.is-t .ct-sec__img {
  position: static; /* 플로우에 넣어 카드 겹침(-51px)이 높이에 반영되게 */
  width: 100%; height: 436px;
  filter: brightness(0.9); /* 시안 딤 rgba(0,0,0,0.1) */
}
html.is-t .ct-sec__body {
  position: relative; left: auto; top: auto;
  width: 720px; min-height: 271px; margin: -51px auto 0;
  background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  padding: 32px 40px; /* 시안: 카드(152,385) 내 텍스트 (192,417) */
}
html.is-t .ct-sec__label { font-size: 15px; line-height: 18px; }
html.is-t .ct-sec__tit { margin-top: 16px; font-weight: 700; font-size: 30px; line-height: 35px; white-space: normal; }
html.is-t .ct-sec__desc { margin-top: 20px; max-width: 556px; font-size: 16px; line-height: 26px; }
html.is-t .ct-sec__btn {
  width: fit-content; height: auto; margin-top: 24px;
  padding: 5px 40px; font-size: 14px; line-height: 30px;
}

/* ---------- 토스트 ---------- */
.toast {
  position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%) translateY(10px);
  background: #333; color: #fff; padding: 12px 24px; border-radius: 6px;
  font-size: 15px; z-index: 999; opacity: 0; pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}
.toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================================================
   컨셉 상세 팝업 — #page(transform:scale) 밖 body 직계라 fixed가 정상 동작
   오버레이가 스크롤 컨테이너(다이얼로그 높이 무제한)이자 백드롭.
   다이얼로그에 overflow·border-radius를 주면 sticky 고정이 풀리므로 절대 금지
   ============================================================ */
.ct-modal {
  display: none; position: fixed; inset: 0; z-index: 900; /* GNB 100·드로어 200 위, 토스트 999 아래 */
  background: rgba(0, 0, 0, 0.5);
  overflow-y: auto; overscroll-behavior: contain;
  padding: 40px 20px;
}
.ct-modal.is-open { display: block; }
.ct-modal__dialog { width: min(760px, 100%); margin: 0 auto; background: #fff; }
.ct-modal__img { display: block; width: 100%; height: auto; }
/* 스크롤해도 따라오는 닫기 버튼 — 0높이 래퍼로 이미지 위치를 밀지 않음 */
.ct-modal__bar { position: sticky; top: 0; height: 0; z-index: 2; }
.ct-modal__close {
  position: absolute; right: 0; top: 0; width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.92); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
}
.ct-modal__close img { width: 15px; height: 15px; }
.ct-modal__close:hover { background: #fff; }