@charset "utf-8";

/* 찰랑 첫 화면(index.php) 전용. 공용 UI 는 common.css 가 맡는다 */

/* --------------------------------0. 토큰--------------------------------- */

:root {
   --cl-cream: #f2f1ed;        /* KV 위쪽 모래빛 */
   --cl-sea: #4ebffd;          /* 바다 — --cl-sky 와 같은 값 유지 */
   --cl-sky: #4ebffd;          /* 제품소개·FAQ 바탕 */
   --cl-paper: #ffffff;
   --cl-sand: #efeeee;         /* 물결 아래 모래빛 — charlang-kv-bg 실측 */
   --cl-navy: #1f2950;         /* 본문 글자 */
   --cl-blue: #2547b8;         /* 큰 카피 */
   --cl-kv-text: #51c0fd;      /* KV 카피 */
   --cl-gutter: clamp(20px, 5vw, 64px);
   --cl-max: 1400px;
   --cl-section-y: clamp(64px, 8vw, 140px);
   --faq-line: 22px;
}

/* --------------------------------1. 유틸--------------------------------- */

.nx,
.nx body { height: auto; overflow: visible; background: var(--cl-paper); }
html.lenis,
html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
.js-reveal .nx-reveal { opacity: 0; transform: translateY(40px); transition: opacity 800ms ease, transform 800ms cubic-bezier(0.22, 1, 0.36, 1); }
.js-reveal .nx-reveal--later { transition-delay: 180ms; }
.js-reveal .nx-reveal.is-in { opacity: 1; transform: none; }
.intro__inner,
.brand__inner,
.kv__inner,
.faq__inner { width: 100%; max-width: calc(var(--cl-max) + 48px); margin-inline: auto; padding-inline: 24px; }

/* --------------------------------2. 머리--------------------------------- */

.site-head { color: var(--cl-navy); background: transparent; }
/* .nx-head-bg .site-head::before { background-color: #efeded; } */

/* ---------------------------------3. KV---------------------------------- */

.hero {
   /* 손볼 값 */
   --scroll-w: clamp(34px, 2.8vw, 50px);  /* 스크롤 화살표 폭 */
   --scroll-gap: 24px;                    /* 화살표를 화면 아래에서 띄우는 거리 */

   /* 파생값 — 건드릴 일 없음 */
   --scroll-h: calc(var(--scroll-w) * 34 / 50);   /* 화살표 높이 (원본 50x34) */
   position: relative; aspect-ratio: 964 / 546; overflow: hidden; isolation: isolate;
}
.hero__sea { position: absolute; inset: 0; z-index: -2; background: var(--cl-sea) no-repeat center / cover; background-image: image-set(url("../images/main/charlang-intro-bg-1920.webp") 1x, url("../images/main/charlang-intro-bg-3840.webp") 2x); }
.hero__sky { position: absolute; left: 50%; top: 0; translate: -50% 0; width: 107%; aspect-ratio: 3840 / 1992; z-index: -1; background: var(--cl-cream) no-repeat center / 100% 100%; background-image: image-set(url("../images/main/charlang-hero-bg-1920.webp") 1x, url("../images/main/charlang-hero-bg-2880.webp") 2x); }
.hero__art { position: absolute; left: 22vw; top: 70%; width: 42vw; translate: 0 calc(-74.2% + 2vw); }
.hero__art-img { display: block; width: 120%; height: auto; }
.hero__new { position: absolute; left: 13%; top: 25%; z-index: 1; width: 16.8%; height: auto; transform-origin: 60% 100%; pointer-events: none; }
.js-reveal .hero__new { opacity: 0; }
.js-reveal .hero__art.is-in .hero__new { animation: hero-new-pop 760ms cubic-bezier(0.34, 1.56, 0.64, 1) 420ms both; }

@keyframes hero-new-pop {
   0% { opacity: 0; scale: 0.2; rotate: -18deg; }
   55% { opacity: 1; scale: 1.18; rotate: 8deg; }
   75% { scale: 0.94; rotate: -3deg; }
   100% { opacity: 1; scale: 1; rotate: 0deg; }
}
.hero__copy { position: absolute; right: 14vw; top: 21%; width: min(40vw, 700px); text-align: center; }
.hero__eyebrow { margin: 0; color: var(--cl-kv-text); font-family: var(--font-kyobo, inherit); font-size: clamp(26px, 2.604vw, 50px); letter-spacing: -0.02em; }
.hero__title { margin: 0; color: var(--cl-kv-text); font-family: var(--font-kyobo, inherit); font-size: clamp(56px, 5.729vw, 110px); font-weight: 400; line-height: 1.25; letter-spacing: -0.05em; word-break: keep-all; }
.hero__scroll { position: absolute; left: 50%; width: var(--scroll-w); margin-left: calc(var(--scroll-w) / -2); animation: hero-bob 1s ease-in-out infinite; }
.hero__scroll { top: min(calc(100vh - var(--scroll-gap) - var(--scroll-h)), calc(100% - var(--scroll-gap) - var(--scroll-h))); }
.hero__scroll { top: min(calc(100svh - var(--scroll-gap) - var(--scroll-h)), calc(100% - var(--scroll-gap) - var(--scroll-h))); }
.hero__scroll img { display: block; width: 100%; height: auto; }

@keyframes hero-bob {
   0%, 100% { transform: translateY(0); }
   50% { transform: translateY(6px); }
}

/* ------------------------------4. 제품 소개------------------------------ */

.intro {
   /* 손볼 값 */

   padding-block: 60px 120px; background-color: var(--cl-sky); background-image: image-set(url("../images/main/charlang-intro-bg-1920.webp") 1x, url("../images/main/charlang-intro-bg-3840.webp") 2x); background-repeat: no-repeat; background-position: center; background-size: cover; color: var(--cl-paper); text-align: center;
}
.intro__head { margin-bottom: clamp(32px, 5vw, 48px); }
.intro__eyebrow { margin: 0 0 12px 0; font-family: var(--font-kyobo, inherit); font-size: clamp(24px, 2.5vw, 48px); letter-spacing: -0.05em; }
.intro__title { margin: 0; font-family: var(--font-kyobo, inherit); font-size: clamp(38px, 3.646vw, 70px); font-weight: 400; line-height: 1.1; letter-spacing: -0.05em; word-break: keep-all; }
.intro__gallery { margin: 0; padding: 0; list-style: none; }
.intro__cell { display: flex; width: calc((100% - 76px) / 3); overflow: hidden; aspect-ratio: 768 / 1110; border-radius: 12px; }
.intro__img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1); transition: transform 1s ease; }
.intro__carousel { position: relative; }
.intro__swiper { overflow: hidden; }
.intro__nav { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 80px; aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.3); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); translate: 0 -50%; cursor: pointer; }
.intro__nav--prev { left: max(24px, calc((100% - 1400px) / 2 - 80px)); translate: 0 -50%; }
.intro__nav--next { right: max(24px, calc((100% - 1400px) / 2 - 80px)); translate: 0 -50%; }
.intro__nav-ico { display: block; width: 50%; height: auto; fill: none; stroke: var(--cl-paper); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3)); }
.intro__nav:focus-visible { outline: 2px dashed var(--cl-paper); outline-offset: 4px; border-radius: 50%; }
.intro__cell:hover .intro__img { transform: scale(1.12); }

/* ----------------------------5. 브랜드 스토리---------------------------- */

.brand {
   /* 손볼 값 */

   position: relative; min-height: calc(100vw * 1594 / 3840);
   background-color: var(--cl-sand); background-repeat: no-repeat; background-position: top center; background-size: 100% auto;
   background-image: image-set(url("../images/main/charlang-brand-bg-1920.webp") 1x, url("../images/main/charlang-brand-bg-2880.webp") 2x);
   color: var(--cl-paper);
}
.brand__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: clamp(24px, 3vw, 64px); }
.brand__body { text-align: center; }
.brand__text > p { margin: 0; font-family: var(--font-sans); font-size: clamp(18px, 1.458vw, 28px); line-height: 1.4; letter-spacing: -0.02em; word-break: keep-all; }
.brand__sign { margin: clamp(24px, 3vw, 28px) 0 0; }
.brand__sign-img { display: block; width: clamp(302px, 24vw, 477px); height: auto; margin: 0 auto; }
.brand__art { position: absolute; left: 50vw; top: 1vw; width: 33vw; }
.brand__art-img { display: block; width: 100%; height: auto; }

/* -----------------------------6. 캠페인 4컷------------------------------ */

.kv {
   /* 손볼 값 */

   padding-block: 80px 120px; background-color: var(--cl-sand); background-repeat: no-repeat; background-position: center; background-size: cover;
   background-image: image-set(url("../images/main/charlang-kv-bg-1920.webp") 1x, url("../images/main/charlang-kv-bg-2880.webp") 2x);
}
.kv__swiper { overflow: hidden; }
.kv__item { flex: 0 0 auto; width: 80%; max-width: 300px; margin: 0; }

@media (min-width: 768px) {
   .kv__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; transform: none !important; }
   .kv__item { flex: initial; width: auto; max-width: none; margin: 0; }
}
.kv__btn { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.kv__btn img { display: block; width: 100%; height: auto; }
.kv__btn:focus-visible { outline: 2px dashed var(--cl-blue); outline-offset: -4px; }

/* -----------------------------7. 라이트박스------------------------------ */

.lightbox { position: fixed; z-index: 40; inset: 0; display: flex; align-items: center; justify-content: center; padding: 56px var(--cl-gutter); visibility: hidden; opacity: 0; transition: opacity 260ms ease, visibility 0s linear 260ms; }
.lightbox.is-open { visibility: visible; opacity: 1; transition-delay: 0s; }
.lightbox__dim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.72); }
.lightbox__frame { position: relative; transform: scale(0.96); transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1); }
.lightbox.is-open .lightbox__frame { transform: scale(1); }
.lightbox__img { display: block; width: min(600px, calc(100vw - var(--cl-gutter) * 2), calc(80vh * 3 / 4)); height: auto; aspect-ratio: 3 / 4; object-fit: contain; border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); }
.lightbox__close { position: absolute; top: -44px; right: -6px; width: 40px; height: 40px; margin: 0; padding: 0; border: 0; background: none; color: var(--cl-paper); cursor: pointer; }
.lightbox__close svg { display: block; width: 24px; height: 24px; margin: 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.lightbox__close:focus-visible { outline: 2px dashed currentColor; outline-offset: 2px; }

/* ---------------------------------8. FAQ--------------------------------- */

.faq {
   /* 손볼 값 */
   --faq-fs-q: clamp(16px, 1.042vw, 20px);    /* 질문 — 1920px 에서 20px */
   --faq-lh-q: 1.5;                           /* 질문 줄 높이 */
   position: relative; padding-block: var(--cl-section-y); overflow: hidden;
   background-color: var(--cl-sky); background-repeat: no-repeat; background-position: center; background-size: cover;
   background-image: image-set(url("../images/main/charlang-faq-bg-1920.webp") 1x, url("../images/main/charlang-faq-bg-2880.webp") 2x);
}
.faq__title { margin: 0 0 40px; color: var(--cl-paper); font-family: var(--font-kyobo, inherit); font-size: clamp(42px, 3.646vw, 70px); font-weight: 400; letter-spacing: -0.03em; text-align: center; }
.faq__list { position: relative; display: flex; flex-direction: column; gap: 14px; max-width: var(--cl-max); margin-inline: auto; }
.faq__col { display: contents; }

@media (min-width: 768px) {
   .faq__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 14px; }
   .faq__col { display: flex; flex-direction: column; min-width: 0; gap: 14px; }
   .faq__item { min-height: 0; transition: min-height 340ms cubic-bezier(0.22, 1, 0.36, 1); }
   .faq:not(.faq--js) .faq__item[open],
   .faq--js .faq__item.is-open { min-height: var(--faq-open-h, 0px); }
}
.faq__item { position: relative; }
.faq__item::before { content: ""; position: absolute; z-index: 0; inset: 0; border: 18px solid transparent; border-image: url("../images/main/charlang-faq-brush.webp") 54 fill / 18px / 0 round; }
.faq__q, .faq__a { position: relative; z-index: 1; }
.faq__q { display: flex; align-items: flex-start; gap: 10px; padding: 10px 20px; list-style: none; cursor: pointer; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q:focus-visible { outline: 2px dashed var(--cl-blue); outline-offset: 2px; }
.faq__mark { display: grid; place-items: center; flex: 0 0 auto; width: var(--faq-line); height: var(--faq-line); margin-block: calc((var(--faq-fs-q) * var(--faq-lh-q) - var(--faq-line)) / 2); border-radius: 50%; background: var(--cl-navy); color: var(--cl-paper); font-family: var(--font-sans); font-size: 14px; font-weight: 700; line-height: 1; }
.faq__q-text { flex: 1 1 0; min-width: 0; margin: 0; color: var(--cl-navy); font-family: var(--font-sans); font-size: var(--faq-fs-q); font-weight: 500; line-height: var(--faq-lh-q); letter-spacing: -0.02em; word-break: keep-all; }
.faq__arrow { display: block; flex: 0 0 auto; width: 22px; height: 22px; margin-block: calc((var(--faq-fs-q) * var(--faq-lh-q) - 22px) / 2); fill: none; stroke: var(--cl-navy); stroke-width: 2; transform: rotate(180deg); transition: transform 340ms cubic-bezier(0.22, 1, 0.36, 1); }
.faq:not(.faq--js) .faq__item[open] .faq__arrow { transform: rotate(0deg); }
.faq--js .faq__item.is-open .faq__arrow { transform: rotate(0deg); }
.faq__a { overflow: hidden; }
.faq__a-inner { padding: 4px 20px 20px; }
.faq__a p { margin: 0; color: var(--cl-navy); font-family: var(--font-sans); font-size: clamp(14px, 0.938vw, 18px); line-height: 1.65; letter-spacing: -0.02em; word-break: keep-all; }
.faq__mascot { position: absolute; z-index: 2; right: 0; bottom: 0; width: clamp(120px, 8.854vw, 170px); height: auto; translate: 30% 60%; pointer-events: none; }

/* -------------------------------9. 맨 위로------------------------------- */

.to-top { position: fixed; right: max(24px, calc((100% - 1400px) / 2 - 80px)); bottom: calc(28px + var(--to-top-lift, 0px)); z-index: 20; display: grid; place-items: center; width: 48px; aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: var(--cl-paper); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18); opacity: 0; visibility: hidden; translate: 0 14px; cursor: pointer; transition: opacity 300ms ease, translate 300ms ease, visibility 300ms; }
.to-top.is-on { opacity: 1; visibility: visible; translate: 0 0; }
.to-top__ico { display: block; width: 60%; height: auto; fill: none; stroke: var(--cl-navy); stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.to-top:focus-visible { outline: 2px dashed var(--cl-navy); outline-offset: 4px; }

/* -------------------------------10. 반응형------------------------------- */

@media (max-width: 1023px) {
   .kv__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
   .brand__inner { grid-template-columns: minmax(0, 1fr); justify-items: center; }
   .hero { aspect-ratio: 750 / 1334; }
   .hero__scroll { top: calc(100% - var(--scroll-gap) - var(--scroll-h)); }
   .hero__sea { background-image: image-set(url("../images/main/charlang-intro-bg-750.webp") 2x); }
   .hero__sky { left: 0; translate: none; width: 100%; height: 100%; aspect-ratio: auto; background-position: center; background-size: cover; background-image: image-set(url("../images/main/charlang-hero-bg-750.webp") 2x); }
   .hero__art { left: 0; width: 100%; }
   .hero__art-img { width: 100%; }
   .hero__new { left: 12%; top: 23%; width: 14%; }
   .hero__eyebrow { font-size: 26px; }
   .hero__title { font-size: 56px; }
   .hero__copy { right: auto; left: 50%; top: 14.25%; width: min(86vw, 420px); translate: -50% 0; }
   .intro { padding-block-end: 60px; background-image: image-set(url("../images/main/charlang-intro-bg-750.webp") 2x); }
   .brand__text > p { font-size: 18px; }
   .brand__art { left: 10vw; top: min(90vw, 400px); width: 80vw; }
   .intro__eyebrow { font-size: 24px; }
   .intro__title { font-size: 38px; }
   .intro__cell { width: 80%; }
   .intro__nav { display: none; }
   .to-top { right: 16px; bottom: calc(16px + var(--to-top-lift, 0px));}
   .kv__inner { padding-inline: 0; }
   .brand { min-height: calc(100vw * 1337 / 750); background-image: image-set(url("../images/main/charlang-brand-bg-750.webp") 2x); }
   .kv { padding-block-end: 60px; background-image: image-set(url("../images/main/charlang-kv-bg-750.webp") 2x); }
   .faq { --faq-fs-q: 16px; padding-block-end: 60px; background-image: image-set(url("../images/main/charlang-faq-bg-750.webp") 2x); }
   .faq__title { margin-bottom: 24px; font-size: 38px; }
   .faq__list { gap: 12px; }
   .faq__mascot { width: 58px; translate: 30% 46%; }
   .lightbox { padding: 56px 16px; }
   .lightbox__close { right: 0; }
   .faq__a p { line-height: 1.4; }
}

@media (prefers-reduced-motion: reduce) {
   .js-reveal .nx-reveal { opacity: 1; transform: none; transition: none; }
   .hero__scroll { animation: none; }
   .lightbox,
   .lightbox__frame { transition: none; }
   .intro__img,
   .faq__item,
   .faq__arrow { transition: none; }
   .js-reveal .hero__art.is-in .hero__new { animation: none; opacity: 1; }
}

/* --------------------------------11. 푸터-------------------------------- */

.nx .site-footer { padding: 0 var(--cl-gutter); border-top: 1px solid #a6dfff; background: var(--cl-sky) no-repeat center / 100% 100%; background-image: image-set(url("../images/main/charlang-footer-bg-1920.webp") 1x, url("../images/main/charlang-footer-bg-3840.webp") 2x); color: var(--cl-paper); }
.nx .site-footer__col { border-left-color: rgba(255, 255, 255, 0.5); }
.nx .site-footer__item::after { background-color: rgba(255, 255, 255, 0.8); }
.nx .site-footer__link { color: var(--cl-paper); text-decoration: underline; text-underline-position: from-font; }

@media (max-width: 767px) {
}