@charset "utf-8";

/* ==============================
   Odeven Page — 오드이븐(Odeven)
   NDDS 직영 브랜드 카페 (준비 중)
============================== */

@font-face {
  font-family: 'NamyangjuDasan';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_eight@1.0/Eoe_YE_M.woff') format('woff');
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: 'NamyangjuDasan';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_eight@1.0/Eoe_YE_B.woff') format('woff');
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'OngleipRyudung';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2405-2@1.0/Ownglyph_ryuttung-Rg.woff2') format('woff2');
  font-weight: normal;
  font-display: swap;
}

.odeven-main {
  background: #fff;
  color: #121212;
}

/* 모바일 전용 줄바꿈 (다른 페이지의 pc-br과 반대로, 기본은 숨기고 모바일에서만 노출) */
.mo-br {
  display: none;
}

/* 데스크톱 전용 줄바꿈: 기본은 노출, 모바일에서는 숨김 */
.pc-br {
  display: inline;
}

:root {
  --od-brown: #6b4423;
  --od-cream: #f6efe6;
  --od-point: #ff7900; /* NDDS 사이트 포인트 컬러 (common.css --point-color 와 동일) */
  --od-text: #121212;
  --od-muted: #6b7280;
  --od-inner: min(1200px, calc(100% - 80px));
}

/* 이미지 미준비 영역은 단색 플레이스홀더 (추후 background-image 로 교체) */

/* 스크롤 reveal: 화면에 들어오면 아래 -> 위로 서서히 나타남 (JS가 .is-inview 클래스를 토글) */
.od-reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}

.od-reveal.is-inview {
  opacity: 1;
  transform: translateY(0);
}

.od-reveal--delay-1 {
  transition-delay: 0.15s;
}

.od-reveal--delay-2 {
  transition-delay: 0.3s;
}

.od-reveal--delay-3 {
  transition-delay: 0.45s;
}

@media (prefers-reduced-motion: reduce) {
  .od-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Hero */
.od-hero {
  position: relative;
  height: 100vh; /* 접속 화면 높이에 맞춰 꽉 차게 (미지원 브라우저 대비 vh → dvh 순서) */
  height: 100dvh;
  min-height: 560px;
  overflow: hidden;
  color: #fff;
  isolation: isolate;
}

.od-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* 상단 그라데이션: 스크롤 전 흰색 헤더 메뉴가 잘 보이도록 위쪽만 어둡게 */
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.65) 0, rgba(0, 0, 0, 0) 22%),
    #2b2019 url("../img/od-hero-bg.jpg") center / cover no-repeat;
}

.od-hero__inner {
  position: absolute;
  left: 12.2vw;
  top: 43.5%;
  width: 36vw;
}

.od-hero__title {
  margin: 0 0 24px;
  font-size: 68px;
  line-height: 1.4;
  font-weight: 900;
  letter-spacing: -1px;
  opacity: 0;
  animation: od-fade-up 0.9s ease 0.1s forwards;
}

.od-hero__title strong {
  font-weight: 900;
}

.od-hero__lead {
  margin: 0 0 30px;
  font-size: 28px;
  font-weight: 900;
  opacity: 0;
  animation: od-fade-up 0.9s ease 0.35s forwards;
}

.od-hero__desc {
  font-size: 16px;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.85);
  opacity: 0;
  animation: od-fade-up 0.9s ease 0.6s forwards;
}

/* 텍스트: 아래 -> 위로 서서히 나타남 */
@keyframes od-fade-up {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 영상이 들어갈 작은 사각형 (우측 끝에 붙는 형태) */
.od-hero__video {
  position: absolute;
  right: 0;
  bottom: 80px;
  width: 47.96vw;
  height: 60.5%;
  border-radius: 20px 0 0 0;
  overflow: hidden;
  background: #5a4636;
  opacity: 0;
  animation: od-fade-left 1.1s ease 0.2s forwards;
}

/* 영상: 오른쪽 -> 왼쪽으로 서서히 나타남 */
@keyframes od-fade-left {
  from {
    opacity: 0;
    transform: translateX(80px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .od-hero__title,
  .od-hero__lead,
  .od-hero__desc,
  .od-hero__video {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* 영상 사각형 정중앙 브랜드 워드마크 */
.od-hero__brand {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'NamyangjuDasan', "Spoqa Han Sans Neo", sans-serif;
  font-size: 50px;
  font-weight: 700;
  color: #fff;
}

/* hover 오버레이 + 재생/정지 버튼 */
.od-hero__vbtn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: rgba(0, 0, 0, 0);
  color: #fff;
  transition: background 0.3s ease;
}

.od-hero__video:hover .od-hero__vbtn,
.od-hero__vbtn:focus-visible {
  background: rgba(0, 0, 0, 0.5);
}

.od-hero__icon {
  width: 64px;
  height: 64px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.od-hero__icon--play {
  display: none;
}

.od-hero__video.is-paused .od-hero__icon--pause {
  display: none;
}

.od-hero__video.is-paused .od-hero__icon--play {
  display: block;
}

.od-hero__video:hover .od-hero__icon,
.od-hero__vbtn:focus-visible .od-hero__icon {
  opacity: 1;
}

/* 재생 진행 바: 영상 하단에서 10% 위치, 가로 중앙 정렬 */
.od-hero__vbar {
  position: absolute;
  left: 50%;
  bottom: 10%;
  z-index: 1;
  width: 70%;
  height: 4px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
}

/* 클릭하기 쉽도록 눈에 보이지 않는 터치 영역 확장 */
.od-hero__vbar::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  bottom: -10px;
}

.od-hero__vbar-fill {
  position: relative;
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #fff;
}

/* 진행 바 끝의 원형 포인트 */
.od-hero__vbar-fill::after {
  content: "";
  position: absolute;
  right: -7px;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.28), 0 2px 6px rgba(0, 0, 0, 0.35);
}

.od-hero__video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 스크롤 유도 아이콘: 데스크톱에서는 숨기고 모바일에서만 노출
   - JS(odeven.js)가 스크롤 위치에 따라 .is-hidden을 토글해 opacity로 페이드 인/아웃 */
.od-hero__scroll {
  display: none;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.od-hero__scroll.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* 아이콘이 제자리에서 위아래로 둥둥 떠오르는 루프 애니메이션
   (중앙 정렬용 translateX(-50%)는 바깥 래퍼에 있으므로, transform 충돌을 피해
   이미지 쪽에 애니메이션을 건다) */
.od-hero__scroll img {
  animation: od-scroll-bounce 1.6s ease-in-out infinite;
}

@keyframes od-scroll-bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(10px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .od-hero__scroll img {
    animation: none;
  }
}

/* Intro */
.od-intro {
  height: 1178px; /* circle 하단 ~ 다음 섹션 텍스트 간격을 50% 당김 (기존 1300px) */
  background: #fff;
}

.od-intro__inner {
  position: relative;
  width: 1920px;
  max-width: 100%;
  height: 100%;
  margin: 0 auto;
}

.od-intro__line {
  position: absolute;
  left: 241px;
  top: 226px;
  width: 144px;
  height: 12px;
  background: var(--od-brown);
}

.od-intro__text {
  position: absolute;
  left: 530px;
  top: 214px;
}

.od-intro__sub {
  font-size: 28px;
  line-height: 1.45;
  font-weight: 900;
}

.od-intro__name {
  margin: 30px 0 22px;
  font-size: 46px;
  font-weight: 900;
  color: var(--od-brown);
}

.od-intro__desc {
  font-size: 17px;
  line-height: 1.7;
  font-weight: 700;
  color: var(--od-muted);
}

.od-intro__photo {
  position: absolute;
  left: 1145px;
  top: 226px;
  width: 451px;
  height: 260px;
  background: url("../img/od-intro-photo.jpg") center / cover no-repeat;
}

.od-intro__points {
  position: absolute;
  left: 1145px;
  top: 526px;
  width: 530px;
}

.od-intro__points li {
  position: relative;
  padding: 20px 0;
  font-size: 13px;
  line-height: 1.6;
}

/* 구분선: 위 .od-intro__photo(451px) 가로 범위를 넘지 않도록 별도 요소로 제한 */
.od-intro__points li::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 451px;
  max-width: 100%;
  border-bottom: 2px solid #ddd;
}

.od-intro__points li:last-child::after {
  display: none;
}

.od-intro__points strong {
  display: block;
  margin-bottom: 8px;
  font-size: 18px;
  font-weight: 900;
  color: var(--od-brown);
}

.od-intro__points span {
  color: var(--od-muted);
  font-size: 16px;
}

.od-intro__circle {
  position: absolute;
  border-radius: 50%;
}

.od-intro__circle--lg {
  left: 310px;
  top: 560px;
  width: 417px;
  height: 417px;
  background: url("../img/od-intro-circle-lg.jpg") center / cover no-repeat;
}

.od-intro__circle--sm {
  left: 590px;
  top: 500px;
  width: 323px;
  height: 323px;
  background: url("../img/od-intro-circle-sm.jpg") center / cover no-repeat;
}

/* Slogan */
.od-slogan {
  margin-top: -80px;
  padding-bottom: 100px;
  text-align: center;
}

.od-slogan h2 {
  font-size: 32px;
  font-weight: 700;
  color: #9a9a9a;
}

.od-slogan h2 strong {
  color: #6B4423;
}

.od-slogan__logo {
  margin-top: 60px;
  font-family: 'OngleipRyudung', "Spoqa Han Sans Neo", sans-serif;
  font-size: 30px;
  letter-spacing: 0.7em;
  font-style: italic;
  color: var(--od-brown);
}

/* Wide banner */
.od-banner {
  position: relative;
  height: 440px;
}

.od-banner__img {
  height: 100%;
  background: #fff url("../img/od-banner-bg.png") top / cover no-repeat;
}

.od-banner__box {
  position: absolute;
  z-index: 1;
  left: calc(56.3% + 85px);
  top: -91px; /* 박스 높이(182px)의 절반만큼 .od-banner 위로 삐져나오게 */
  width: 532px;
  height: 182px;
  padding: 0 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--od-brown);
  color: #fff;
}

.od-banner__box p {
  font-size: 15px;
  line-height: 1.85;
  text-align: left;
}

/* Gallery: 자동 슬라이드 (트랙을 2세트 복제해 이음새 없이 무한 루프) */
.od-gallery {
  overflow: hidden;
  height: 520px; /* 트랙 상하 마진 50px씩(100px) 포함 */
  background: #fff;
  cursor: ew-resize; /* hover 시 좌/우 위치로 슬라이드를 조작할 수 있음을 표시 */
}

.od-gallery__track {
  display: flex;
  gap: 25px;
  width: max-content;
  height: calc(100% - 100px);
  margin: 50px 0;
  animation: od-gallery-scroll 80s linear infinite;
}

@keyframes od-gallery-scroll {
  from {
    transform: translateX(0);
  }
  to {
    /* 두 세트 중 앞쪽 한 세트(전체 트랙의 절반) 만큼 이동 후 처음 상태로 이어붙임 */
    transform: translateX(-50%);
  }
}

/* 카드박스 비율: 정사각형(1:1) 대비 세로를 20% 줄인 5:4 비율로 통일 (너비는 높이에 맞춰 자동 계산)
   background-size는 cover로 고정: 원본 이미지 비율이 카드 비율(5:4)과 달라도
   항상 박스를 꽉 채우며 비율을 유지한 채 크롭되어, 카드마다 제각각인 여백
   없이 반응형으로 작아져도 일관되게 보인다 */
.od-gallery__item {
  flex: 0 0 auto;
  aspect-ratio: 5 / 4;
  height: 100%;
  background: #8a7566 center / cover no-repeat;
}

/* background 단축 속성 대신 background-color만 지정: 단축 속성으로 쓰면
   .od-gallery__item 기본 규칙에서 설정한 center/cover가 초기값(0% 0%, auto)으로
   리셋되어 이 두 변형 카드들만 이미지가 크롭되지 않고 좌상단 기준으로 깨져 보였음 */
.od-gallery__item--sm {
  background-color: #b9c2a3;
}

.od-gallery__item--sm-alt {
  background-color: #e9c98a;
}

/* 카드박스 이미지 랜덤 배치 (복제본 세트도 동일한 순서로 매칭해 무한 루프 이음새 유지) */
.od-gallery__track > *:nth-child(1),
.od-gallery__track > *:nth-child(16) {
  background-image: url("../img/od-gallery-10.png");
}

.od-gallery__track > *:nth-child(2),
.od-gallery__track > *:nth-child(17) {
  background-image: url("../img/od-gallery-15.png");
}

.od-gallery__track > *:nth-child(3),
.od-gallery__track > *:nth-child(18) {
  background-image: url("../img/od-gallery-09.png");
}

.od-gallery__track > *:nth-child(4),
.od-gallery__track > *:nth-child(19) {
  background-image: url("../img/od-gallery-02.png");
}

.od-gallery__track > *:nth-child(5),
.od-gallery__track > *:nth-child(20) {
  background-image: url("../img/od-gallery-05.png");
}

.od-gallery__track > *:nth-child(6),
.od-gallery__track > *:nth-child(21) {
  background-image: url("../img/od-gallery-03.png");
}

.od-gallery__track > *:nth-child(7),
.od-gallery__track > *:nth-child(22) {
  background-image: url("../img/od-gallery-08.png");
}

.od-gallery__track > *:nth-child(8),
.od-gallery__track > *:nth-child(23) {
  background-image: url("../img/od-gallery-11.png");
}

.od-gallery__track > *:nth-child(9),
.od-gallery__track > *:nth-child(24) {
  background-image: url("../img/od-gallery-04.png");
}

.od-gallery__track > *:nth-child(10),
.od-gallery__track > *:nth-child(25) {
  background-image: url("../img/od-gallery-14.png");
}

.od-gallery__track > *:nth-child(11),
.od-gallery__track > *:nth-child(26) {
  background-image: url("../img/od-gallery-06.png");
}

.od-gallery__track > *:nth-child(12),
.od-gallery__track > *:nth-child(27) {
  background-image: url("../img/od-gallery-12.png");
}

.od-gallery__track > *:nth-child(13),
.od-gallery__track > *:nth-child(28) {
  background-image: url("../img/od-gallery-07.png");
}

.od-gallery__track > *:nth-child(14),
.od-gallery__track > *:nth-child(29) {
  background-image: url("../img/od-gallery-01.png");
}

.od-gallery__track > *:nth-child(15),
.od-gallery__track > *:nth-child(30) {
  background-image: url("../img/od-gallery-13.png");
}

/* 모션 최소화 설정 사용자는 자동 슬라이드 정지 */
@media (prefers-reduced-motion: reduce) {
  .od-gallery__track {
    animation: none;
  }
}

/* Culture: 이미지 전체 위에 텍스트 박스가 우측에 떠 있는 오버레이 구조 (od-banner와 동일 패턴) */
.od-culture {
  position: relative;
  height: 600px;
}

.od-culture__img {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)),
    #ddd8d3 url("../img/od-culture__img.jpg") center / cover no-repeat;
}

.od-culture__panel {
  position: absolute;
  z-index: 1;
  right: 0;
  top: 0;
  width: 626px;
  height: 100%;
  padding: 70px 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #000000c4;
  color: #fff;
}

.od-culture__lead {
  margin-bottom: 16px;
  font-size: 15px;
}

.od-culture__panel h3 {
  margin-bottom: 28px;
  font-size: 48px;
  line-height: 1.3;
  font-weight: 900;
}

.od-culture__panel p {
  margin-bottom: 20px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.85);
}

/* Synergy: 이미지 전체 위에 텍스트 박스가 좌측에 떠 있는 오버레이 구조 (od-banner와 동일 패턴) */
.od-synergy {
  position: relative;
  height: 600px;
}

.od-synergy__panel {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 80px; /* .od-synergy__img의 margin-top 80px와 동일한 위치로 맞춤 */
  width: 626px;
  height: calc(100% - 80px);
  padding: 70px 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #3b1c03c9;
  color: #fff;
}

.od-synergy__panel h3 {
  margin-bottom: 24px;
  font-size: 48px;
  line-height: 1.3;
  font-weight: 900;
}

.od-synergy__panel p {
  margin-bottom: 20px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.85);
}

.od-synergy__panel .od-synergy__lead {
  margin-bottom: 30px;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 700;
  color: #fff;
}

.od-synergy__img {
  position: absolute;
  inset: 0;
  margin-top: 80px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
    #e9e5df url("../img/od-synergy__img.png") center / cover no-repeat;
}

/* ODDEVEN in APT. */
.od-apt {
  padding: 150px 0 0px;
  background: #fff;
}

.od-apt__inner {
  width: 1500px;
  max-width: calc(100% - 80px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 300px repeat(3, 1fr);
  gap: 0 40px;
  padding-bottom: 100px;
  margin-bottom: 50px;
  border-bottom: 4px solid #ddd;
}

.od-apt__title {
  font-size: 45px;
  line-height: 1.3;
  font-weight: 900;
  color: var(--od-brown);
}

.od-apt__title-sub {
  color: #464646;
}

.od-apt__item span {
  display: block;
  margin-bottom: 16px;
  font-size: 38px;
  font-weight: 900;
  color: var(--od-brown);
}

.od-apt__item h4 {
  margin-bottom: 18px;
  font-size: 30px;
  line-height: 1.4;
  font-weight: 900;
  color: #121212;
}

.od-apt__item p {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.8;
  color: var(--od-muted);
}

/* Space strip: 4장을 살짝 넘치게 배치해 3.5장 정도만 보이는, 터치/드래그 + 좌우 화살표로 넘기는 슬라이드 (자동 재생 없음) */
.od-strip {
  position: relative;
  width: 1500px;
  max-width: calc(100% - 80px);
  margin: 0 auto;
  padding: 40px 0 0;
}

.od-strip__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  height: 300px;
  cursor: grab;
  /* 스크롤바 숨김 (Firefox / IE·Edge 레거시 / WebKit 계열) */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.od-strip__viewport::-webkit-scrollbar {
  display: none;
}

.od-strip__viewport.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}

.od-strip__track {
  display: flex;
  gap: 30px;
  width: max-content;
  height: 100%;
}

.od-strip__item {
  position: relative;
  flex: 0 0 auto;
  width: 500px;
  height: 100%;
  overflow: hidden; /* hover 시 확대되는 이미지를 카드 영역 안으로 클리핑 */
  scroll-snap-align: start;
  background: #cfc8c0;
  border-radius: 10px;
}

/* 카드 안의 이미지: hover 시 확대 + 어두운 오버레이 페이드 인 */
.od-strip__item::before {
  content: "";
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: transform 0.5s ease;
}

.od-strip__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.15);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.od-strip__item:hover::before {
  transform: scale(1.08);
}

.od-strip__item:hover::after {
  opacity: 1;
}

.od-strip__item:nth-child(1)::before {
  background-image: url("../img/od-strip-01.jpg");
}

.od-strip__item:nth-child(2)::before {
  background-image: url("../img/od-strip-02.jpg");
}

.od-strip__item:nth-child(3)::before {
  background-image: url("../img/od-strip-03.jpg");
}

.od-strip__item:nth-child(4)::before {
  background-image: url("../img/od-strip-04.jpg");
}

.od-strip__item:nth-child(5)::before {
  background-image: url("../img/od-strip-05.jpg");
}

.od-strip__item:nth-child(6)::before {
  background-image: url("../img/od-strip-06.jpg");
}

.od-strip__item:nth-child(7)::before {
  background-image: url("../img/od-strip-07.jpg");
}

/* 좌우 화살표 버튼 */
.od-strip__arrow {
  position: absolute;
  top: calc(50% + 20px); /* 상단 padding(40px)만큼 트랙 중앙에 맞춤 */
  transform: translateY(-50%);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  color: var(--od-brown);
  cursor: pointer;
}

.od-strip__arrow svg {
  width: 22px;
  height: 22px;
}

.od-strip__arrow--prev {
  left: -24px;
}

.od-strip__arrow--next {
  right: -24px;
}

.od-strip__arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

/* 1500px 이하: 절대 배치 블록을 유동 레이아웃으로 전환 */
@media screen and (max-width: 1500px) {
  .od-intro {
    height: auto;
    padding: 120px 0;
  }

  .od-intro__inner {
    width: min(1100px, calc(100% - 80px));
    height: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

  .od-intro__inner > * {
    position: static;
  }

  .od-intro__line,
  .od-intro__circle {
    display: none;
  }

  .od-intro__photo,
  .od-intro__points {
    width: 100%;
  }

  .od-banner__box {
    left: auto;
    right: 0;
    width: 50%;
  }

  .od-slogan {
    margin-top: 0;
    padding-top: 32px; /* 위 섹션과의 간격 60% 축소 (80px → 32px) */
  }

  .od-apt__inner {
    grid-template-columns: repeat(3, 1fr);
  }

  .od-apt__title {
    grid-column: 1 / -1;
    margin-bottom: 30px;
  }
}

@media screen and (max-width: 768px) {
  /* "ODDEVEN in APT." 타이틀을 1줄로 표시 */
  .od-apt__title .pc-br {
    display: none;
  }

  /* od-reveal--delay 요소들이 나타날 때 이동하는 거리(텍스트 간격) 50% 축소
     (.od-reveal 공통 규칙 대신 delay-1/2/3에만 한정해 다른 reveal 요소는 그대로 둠) */
  .od-reveal--delay-1,
  .od-reveal--delay-2,
  .od-reveal--delay-3 {
    transform: translateY(16px); /* 32px */
  }

  /* 순차 노출 간격(0.15s 단위) 20% 축소 */
  .od-reveal--delay-1 {
    transition-delay: 0.12s;
  }

  .od-reveal--delay-2 {
    transition-delay: 0.24s;
  }

  .od-reveal--delay-3 {
    transition-delay: 0.36s;
  }

  .od-hero__inner {
    left: 24px;
    right: 24px;
    top: 28.6%; /* 위치 30% 아래로 (22% → 28.6%) */
    width: auto;
    text-align: center;
    z-index: 2; /* 배경 비디오 + 오버레이보다 위에 오도록 명시 */
  }

  .od-hero__title {
    font-size: 30px;
  }

  .od-hero__desc br {
    display: none;
  }

  /* 우측 하단의 작은 영상 박스를 메인 섹션 전체를 채우는 배경 비디오로 전환 */
  .od-hero__video {
    position: absolute;
    inset: 0;
    right: auto;
    bottom: auto;
    width: 100%;
    height: 100%;
    z-index: 0; /* 가장 아래로 */
    border-radius: 0;
    background: transparent;
    opacity: 1;
    animation: none; /* 우측에서 슬라이드 인 되던 기존 애니메이션 취소 */
  }

  /* 가독성을 위한 어두운 반투명 오버레이 (비디오 위, 텍스트 아래) */
  .od-hero__video::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.45);
    pointer-events: none;
  }

  /* 작은 영상 박스 전용이던 브랜드 워드마크/재생·정지 버튼/재생바(컨트롤러)는
     배경 비디오에서는 불필요하므로 숨김 */
  .od-hero__brand,
  .od-hero__vbtn,
  .od-hero__vbar {
    display: none;
  }

  /* 메인 섹션 중앙 하단 스크롤 유도 아이콘 */
  .od-hero__scroll {
    display: block;
    position: absolute;
    left: 50%;
    bottom: 50.4px; /* 위치 50% 추가로 위로 (33.6px → 50.4px) */
    z-index: 2; /* 배경 비디오 + 오버레이보다 위 */
    transform: translateX(-50%);
  }

  .od-hero__scroll img {
    display: block;
    width: 22px; /* 크기 10% 증가 (20px → 22px) */
    height: auto;
  }

  .od-intro__inner {
    grid-template-columns: 1fr;
  }

  /* 공백 포함 24자를 넘어가는 지점에서 줄바꿈되도록 .mo-br 노출 */
  .mo-br {
    display: inline;
  }

  .od-slogan h2 {
    padding: 0 20px;
    font-size: 20px;
  }

  .od-banner {
    height: auto;
  }

  .od-banner__img {
    height: 240px;
  }

  .od-banner__box {
    position: static;
    width: 100%;
    height: auto;
    padding: 30px 24px;
  }

  .od-gallery {
    height: 300px; /* 트랙 상하 마진 50px씩(100px) 포함 */
  }

  /* 모바일에서는 오버레이 대신 이미지-패널 세로 스택으로 전환 */
  .od-culture,
  .od-synergy {
    display: flex;
    flex-direction: column;
    height: auto;
  }

  .od-culture__img,
  .od-synergy__img {
    position: static;
    height: 300px;
  }

  .od-culture__panel,
  .od-synergy__panel {
    position: static;
    width: 100%;
    height: auto;
    transform: none;
    padding: 60px 24px;
    text-align: center;
  }

  /* ODDEVEN · CULTURE 섹션 텍스트 크기 15% 축소 */
  .od-culture__lead {
    font-size: 12.75px; /* 15px */
  }

  .od-culture__panel h3 {
    font-size: 40.8px; /* 48px */
  }

  .od-culture__panel p {
    font-size: 12.75px; /* 15px */
  }

  /* Brand Synergy & Smart Cafe 섹션 텍스트 크기 15% 축소 */
  .od-synergy__panel h3 {
    font-size: 40.8px; /* 48px */
  }

  .od-synergy__panel p {
    font-size: 12.75px; /* 15px */
  }

  .od-synergy__panel .od-synergy__lead {
    font-size: 11.9px; /* 14px */
  }

  .od-synergy {
    flex-direction: column-reverse;
  }

  .od-apt__inner {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* 전체 텍스트 비율 15% 축소 */
  .od-apt__title {
    font-size: 38.25px; /* 45px */
  }

  .od-apt__item span {
    font-size: 32.3px; /* 38px */
  }

  .od-apt__item h4 {
    font-size: 25.5px; /* 30px */
  }

  .od-apt__item p {
    font-size: 11.05px; /* 13px */
  }

  .od-strip {
    padding: 40px 20px 0;
  }

  .od-strip__viewport {
    height: 180px;
  }

  .od-strip__track {
    gap: 16px;
  }

  .od-strip__item {
    width: 240px;
  }

  .od-strip__arrow {
    width: 36px;
    height: 36px;
  }

  .od-strip__arrow svg {
    width: 18px;
    height: 18px;
  }

  .od-strip__arrow--prev {
    left: -14px;
  }

  .od-strip__arrow--next {
    right: -14px;
  }
}

/* ==============================
   Odeven 테마 (body.theme-odeven)
   오드이븐 카테고리가 활성일 때 카테고리 버튼·퀵메뉴·헤더 포인트 컬러를 브라운으로 전환
   (js/category-tabs.js 가 탭 전환 시 body 클래스를 토글)
============================== */
/* 카테고리 버튼 */
body.theme-odeven .cat-tabs__btn.is-active {
  background: var(--od-brown);
  color: #fff;
}

/* 퀵메뉴바 */
body.theme-odeven .quick-menu {
  border-color: var(--od-brown);
}

body.theme-odeven .quick-menu__item {
  background: var(--od-brown);
}

body.theme-odeven .quick-menu__item--top {
  background: #fff;
  border-color: var(--od-brown);
  color: var(--od-brown);
}

/* 헤더 포인트 컬러 */
body.theme-odeven .header {
  --point-color: var(--od-brown);
}

/* 헤더 카테고리(GNB) 글자색
   - 스크롤 전(투명 헤더): 흰색 / 스크롤 후·서브메뉴 오픈(흰 배경): 기존 어두운 글자
   - 현재 페이지 카테고리: NDDS 포인트 컬러(#FF7900) */
body.theme-odeven .header:not(.scrolled):not(.is-open):not(:has(.gnb__item:hover)):not(:has(.gnb__item:focus-within)) .gnb__item > a:not(:hover):not(.is-active) {
  color: #fff;
}

/* 모바일 메뉴 버튼(햄버거)
   - 이 페이지가 housekeeping.css도 함께 로드해서 그쪽의 .menu-btn span(어두운 색,
     --hk-black)이 겹쳐 적용되고 있었음 → 스크롤/hover 전 기본 상태는 흰색으로 복원
   - 메뉴가 열렸을 때(.header.is-open)는 공통 CSS(common.css)가 포인트 컬러로 바꾸는
     규칙이 이 선택자보다 명시도가 더 높아 그대로 유지됨 */
body.theme-odeven .menu-btn span {
  background: #fff;
}

body.theme-odeven .gnb__item > a.is-active {
  color: var(--od-point);
}

/* 오드이븐과 연결된 카테고리(커뮤니티 공간케어/카페)는 hover 시 사이트 공통 포인트 컬러 대신
   오드이븐 페이지 고유 포인트 컬러(브라운)를 따라가도록 함 */
body.theme-odeven .gnb__item > a.is-active:hover,
body.theme-odeven .gnb__item.has-sub:hover > a.is-active {
  color: var(--od-brown);
}

body.theme-odeven .sub-menu-wrapper a:hover,
body.theme-odeven .sub-menu-wrapper a.is-active {
  color: var(--od-brown) !important;
}

body.theme-odeven .header__contact {
  color: var(--od-brown);
  border-color: var(--od-brown);
}

body.theme-odeven .header__contact:hover,
body.theme-odeven .header__contact.is-active {
  background: var(--od-brown);
  color: #fff;
}