@charset "UTF-8";
/* =========================================================
   common.css : 메인/땡스 페이지 공통
   ※ DMM 연령인증 화면(.common-age-verification) 디자인에 영향을 주지 않도록
     button / a / h1 등의 전역 리셋은 하지 않는다.
   ========================================================= */

:root {
  --font-base: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  --color-text: #1e293b;
  --color-pink: #ff56f9;
  --color-pink-strong: #ff4cc3;
  --color-blue: #1269e2;
  --color-sky: #1daeff;
  --color-nav-bg: rgba(91, 122, 243, 0.65);
  --nav-h: 60px;
  --float-h: 0px; /* 플로팅 폼 높이 (JS 에서 갱신) */
}

@media (min-width: 770px) {
  :root { --nav-h: 80px; }
}

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

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

body {
  margin: 0;
  background: #fff;
  color: var(--color-text);
  font-family: var(--font-base);
  line-height: 1.5;
  overflow-x: hidden;
  line-break: strict;
  overflow-wrap: break-word;
}

img,
video {
  display: block;
  max-width: 100%;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

:where(.site) :where(h1, h2, h3, p) {
  margin: 0;
}

[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 연령인증 : 쿠키로 이미 인증된 경우 처음부터 숨김 ---------- */
.is-age-verified #common-age-verification {
  display: none;
}

/* ---------- DMM 헤더 : PC / SP 전환 ---------- */
.dmm-header {
  position: relative;
  z-index: 1001;
  background: #fff;
}

.dmm-header--sp {
  display: none;
}

@media (max-width: 769px) {
  .dmm-header--pc { display: none; }
  .dmm-header--sp { display: block; }
}

/* ---------- 공통 버튼 : 사전등록 (임시 디자인) ---------- */
.btn-prereg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  height: 56px;
  padding: 0 32px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  background: linear-gradient(135deg, #ff7ad9 0%, #ff4cc3 45%, #c14cff 100%);
  box-shadow: 0 8px 18px rgba(255, 0, 128, 0.25);
  color: #fff;
  font-family: inherit;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: filter 0.2s, transform 0.1s;
}

.btn-prereg:hover {
  filter: brightness(1.08);
}

.btn-prereg:active {
  transform: scale(0.98);
}

/* ---------- 모달 공통 ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.modal__dim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  cursor: pointer;
}

.modal__close::before,
.modal__close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 2px;
  background: #fff;
}

.modal__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.modal__close::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* ---------- 스크롤 등장 애니메이션 ---------- */
.reveal {
  opacity: 0;
  transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

.reveal--left { transform: translateX(-50px); }
.reveal--right { transform: translateX(50px); }
.reveal--zoom { transform: scale(0.9); transition-duration: 0.6s; }

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

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