/* ===== 두리스 홈페이지 공통 스타일 ===== */

body { font-family: 'Inter', 'Noto Sans KR', sans-serif; }
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
html { scroll-behavior: smooth; }

/* 섹션 앵커가 고정 헤더에 가리지 않게 */
section[id] { scroll-margin-top: 72px; }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ===== 상단 메뉴 넘침 표시(휴대폰) — 넘칠 때만 가장자리 흐림 + 원형 화살표 ===== */
/* ※ .nav-wrap 을 앞에 붙여 우선순위를 높임 — Tailwind 기본값(button 배경 투명)이 뒤에 주입되어 덮어쓰지 않도록 */
.nav-wrap .nav-more {
  position: absolute; top: 0; bottom: 0; width: 56px;
  display: none; align-items: center;
  border: 0; padding: 0; cursor: pointer;
}
.nav-wrap .nav-more-right { right: 0; justify-content: flex-end; background: linear-gradient(to right, rgba(247,249,251,0), #f7f9fb 60%); }
.nav-wrap .nav-more-left  { left: 0;  justify-content: flex-start; background: linear-gradient(to left,  rgba(247,249,251,0), #f7f9fb 60%); }
.nav-wrap.can-right .nav-more-right,
.nav-wrap.can-left  .nav-more-left { display: flex; }
.nav-more-btn {
  width: 28px; height: 28px; border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  background: #041627; color: #fff; box-shadow: 0 2px 6px rgba(4,22,39,.25);
}
.nav-more-btn .material-symbols-outlined { font-size: 20px; }
.nav-more-right .nav-more-btn { animation: nav-nudge 1.1s ease-in-out 3; }
@keyframes nav-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }

/* 앱 목업 프레임(폰) */
.app-mockup-frame {
  border: 8px solid #1a2b3c;
  border-radius: 2.2rem;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

@keyframes float { 0% { transform: translateY(0); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0); } }
.animate-float { animation: float 4s ease-in-out infinite; }

/* 탭 칩 좌우 스크롤 줄 */
.tabstrip { scroll-snap-type: x proximity; }
.tabstrip > * { scroll-snap-align: start; }

/* ===== 스크롤 등장 애니메이션(살짝) ===== */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.reveal.reveal-left { transform: translateX(-26px); }
.reveal.reveal-right { transform: translateX(26px); }
.reveal.reveal-up { transform: translateY(26px); }
.reveal.in { opacity: 1; transform: none; }

/* ===== 상단 헤더 마케팅 캐러셀 ===== */
.hero-viewport { overflow: hidden; }
.hero-track {
  display: flex;
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.hero-slide { min-width: 100%; flex: 0 0 100%; }

/* 좌우 화살표 — 데스크톱은 양 끝 바깥, 모바일은 하단 인디케이터 옆 */
.hero-arrow {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 9999px;
  border: 1px solid #c4c6cd;
  background: #ffffff;
  color: #041627;
  transition: all .2s;
}
.hero-arrow:hover { border-color: #041627; background: #f2f4f6; }
.hero-arrow:active { transform: scale(.94); }
.hero-arrow:disabled { opacity: .35; cursor: default; }

.hero-dot {
  width: 8px; height: 8px;
  border-radius: 9999px;
  background: #c4c6cd;
  transition: all .3s;
}
.hero-dot.on { width: 28px; background: #041627; }

/* ===== 상단 헤더 — 이미지 배너형 슬라이드(APPS.slides[].bg) =====
   휴대폰: 이미지를 1.65배로 키워 오른쪽 그림 부분만 보이게(왼쪽 빈 여백 잘라냄) + 문구는 아래
   데스크톱(768px~): 이미지 전체 + 왼쪽 여백 위에 문구 */
.nb-banner { position: relative; border-radius: 20px; overflow: hidden; background: #eef0f6; }
.nb-crop { overflow: hidden; }
.nb-stage { position: relative; width: 165%; margin-left: -58%; aspect-ratio: 1376 / 768; }
.nb-stage > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nb-text { position: relative; padding: 22px 20px 26px; }
.nb-badge {
  display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 9999px;
  background: rgba(255,255,255,.7); color: #4b3f8f; font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
.nb-kicker { margin-top: 14px; font-weight: 800; font-size: clamp(16px, 1.5vw, 21px); color: var(--accent-ink, #558dff); }
.nb-title {
  margin-top: 10px; font-family: 'Noto Sans KR', 'Inter', sans-serif; font-weight: 900;
  font-size: clamp(26px, 3.1vw, 44px); line-height: 1.24; letter-spacing: -.03em; color: #221c3a; word-break: keep-all;
}
@media (min-width: 768px) {
  .nb-banner { border-radius: 28px; }
  .nb-stage { width: 100%; margin-left: 0; }
  .nb-text {
    position: absolute; top: 0; bottom: 0; left: 0; width: 50%;
    display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 0 2% 0 5.5%;
  }
}

/* 말풍선 — 현재 슬라이드(.is-active)가 되면 순서대로 떠오르고, 이후 둥실둥실 */
.nb-bubble {
  position: absolute; z-index: 2; opacity: 0; transform: translateY(10px) scale(.95);
  transition: opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1); transition-delay: var(--d, 0s);
}
.hero-slide.is-active .nb-bubble { opacity: 1; transform: none; }
.nb-bubble > span {
  position: relative; display: block; white-space: nowrap;
  background: #fff; color: #2b2640; font-size: 12.5px; font-weight: 600; line-height: 1.4;
  padding: 9px 13px; border-radius: 16px; box-shadow: 0 8px 24px rgba(70,50,140,.18);
  animation: float 4s ease-in-out infinite; animation-delay: var(--fd, 0s);
}
.nb-bubble > span::after {   /* 말꼬리 */
  content: ''; position: absolute; bottom: -5px; left: 18px; width: 12px; height: 12px;
  background: #fff; transform: rotate(45deg); border-radius: 2px;
}
.nb-bubble.r > span::after { left: auto; right: 18px; }
@media (min-width: 768px) {
  .nb-bubble > span { font-size: 15px; padding: 11px 16px; border-radius: 18px; }
}

/* ===== 앱 페이지 — 에디토리얼 기능 섹션(번호 라벨·굵은 제목·테두리 칩·스크린샷 프레임) =====
   포인트 색은 앱마다 아래 body[data-app] 변수로 지정. 변수가 없으면 사이트 기본색. */
body[data-app="psycho-test"] { --accent: #e5391c; --accent-ink: #c22d14; --accent-soft: #fdece7; }

.ed-eyebrow { font-weight: 800; font-size: 14px; letter-spacing: .22em; text-transform: uppercase; color: var(--accent-ink, #558dff); }
.ed-title {
  font-family: 'Noto Sans KR', 'Inter', sans-serif; font-weight: 900;
  font-size: clamp(32px, 4.4vw, 58px); line-height: 1.16; letter-spacing: -.03em;
  color: #141414; word-break: keep-all;
}
.ed-body { font-size: 18px; line-height: 1.8; color: #3a3d42; word-break: keep-all; }
.ed-chip {
  display: inline-flex; align-items: center; padding: 7px 16px; border-radius: 2px;
  border: 1.5px solid var(--accent, #558dff); color: var(--accent-ink, #558dff);
  font-size: 15px; font-weight: 500; white-space: nowrap;
}
.ed-chip.fill { background: var(--accent-soft, #eef3ff); border-color: var(--accent-soft, #eef3ff); }

/* 스크린샷 프레임(얇은 사각 테두리) */
.shot-frame { border: 3px solid #141414; background: #fcf8ff; overflow: hidden; }
.shot-frame img { display: block; width: 100%; height: auto; }

/* 어두운 섹션 */
.ed-dark { background: #0c0c0d; }
.ed-dark .ed-title { color: #fff; }
.ed-dark .ed-body { color: rgba(255,255,255,.62); }
.ed-dark .ed-chip { color: var(--accent, #558dff); }
.ed-dark .shot-frame { border-color: #fff; }
.ed-caption { font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.55); word-break: keep-all; }

/* 우측 점 네비 — 상단 헤더를 보는 동안 숨김(site.js initDots) */
.dots { transition: opacity .3s ease; }
.dots.dots-hidden { opacity: 0; pointer-events: none; }

/* 우측 점 네비 — 어두운 섹션(data-dot-theme="dark") 위에서는 글자를 밝게 */
.dots.on-dark .dot-label { color: rgba(255,255,255,.45) !important; }
.dots.on-dark .dot-item.is-on .dot-label { color: #fff !important; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  .hero-track { transition: none; }
  .animate-float { animation: none; }
  .nav-more-right .nav-more-btn { animation: none; }
  .nb-bubble { opacity: 1 !important; transform: none !important; transition: none; }
  .nb-bubble > span { animation: none; }
}