/* =========================
     기본 설정
========================= */
html, body {
  
  height: 100%;
  margin: 0;
  overflow: hidden; /* 스크롤 완전 제거 */
  -webkit-text-size-adjust: 100%;
  background: #ffffff;
}

@font-face {
  font-family: "MissFajardose";
  src: url("fonts/MissFajardose-Regular.ttf") format("truetype");
}


/* ====================================
     모바일 
==================================== */
/* 모바일 기준: 390 × 844 */

:root {
  --vh: 1vh;   /* ⬅ Safari/Chrome 둘 다 문제 없음 */
}


.mobile-wrapper {
  width: 100%; 
  height: calc(var(--vh) * 100);
  position: relative;
  margin: 0 auto;
  overflow: hidden;
}

/* 모바일 이미지 */
.m-image-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;       /* 화면 가로 꽉 채우기 */
  height: calc(var(--vh) * 100);
  overflow: hidden;   /* 잘리는 부분 숨기기 */
}

@media screen and (orientation: landscape) {
  .mobile-wrapper,
  .m-image-wrapper {
    width: 100%;
    height: 100%;
  }
}

.m-image-content {
  width: 100%;
  height: 100%;
  object-fit: cover;  /* 가로 꽉 + 비율 유지 + 세로 잘려도 OK */
  object-position: center;
}

@supports (-webkit-touch-callout: none) {
  .m-image-content {
    object-position: center 30%; 
  }
}



/* 모바일 메뉴박스 */
.m-menu-box {
  position: absolute;
  left: calc(-14 / 390 * 100vw);          /* -3.59vw */
  top: calc(318 / 844 * 100 * var(--vh));           /* 37.68vh */
  width: calc(419 / 390 * 100vw);         /* 107.43vw */
  height: calc(170 / 844 * 100 * var(--vh));        /* 20.14vh */
  background: #f2f2f2;
  border: 1px solid #222;
}

.m-item {
  font-family: "MissFajardose";
  font-size: 28px;                         /* 글자 px 유지 */
  letter-spacing: 4px;
  height: calc(34 / 844 * 100 * var(--vh));  
  width: fit-content;    
  padding-left: calc(26 / 390 * 100vw);    
  padding-top: calc(15.3 / 844 * 100 * var(--vh));   
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #000;
}

/* 모바일 패널 */
.m-panel {
  position: absolute;
  left: calc(-14 / 390 * 100vw);            /* -3.59vw */
  width: calc(419 / 390 * 100vw);           /* 107.43vw */
  background: #f2f2f2;
  border: 1px solid #222;
}

.m-panel-chitanda {
  border-top: none;       /* 위쪽 border 제거 */
  border-left: 1px solid #222;
  border-right: 1px solid #222;
  border-bottom: 1px solid #222;
}

.m-panel-chitanda {
  top: calc(0 / 844 * 100 * var(--vh));             /* -1.66vh */
  height: calc(302 / 844 * 100 * var(--vh));          /* 37.45vh */
}

.m-panel-contact {
  top: calc(505 / 844 * 100 * var(--vh));             /* 55.68vh */
  height: calc(200 / 844 * 100 * var(--vh));          /* 23.69vh */
}


/* 텍스트 공통 */
.m-text {
  position: absolute;
  width: calc(320 / 390 * 100vw);          /* 82.05vw */
  font-family: "Noto Sans CJK KR", sans-serif;
  font-size: 10px;                          /* px 유지 */
  letter-spacing: 1px;
  line-height: 1.48;
  text-align: right;
  color: #000;
}

.m-chitanda-text {
  left: calc(72 / 390 * 100vw);             
  /* top: calc(180 / 844 * 100vh);              */
  bottom: calc(24 / 844 * 100 * var(--vh));   
  top: auto;                         /* top 제거 */
}

.m-contact-text {
  left: calc(72 / 390 * 100vw);            
  /* top: calc(149 / 844 * 100vh);              */
  bottom: calc(24 / 844 * 100 * var(--vh));    
  top: auto;                         /* top 제거 */
}

/* 모바일 X */
.m-close {
  position: absolute;
  left: calc(28 / 390 * 100vw);             /* 8.46vw */
  top: calc(19 / 844 * 100 * var(--vh));              /* 3.67vh */
  font-family: "MissFajardose";
  font-size: 28px;
  letter-spacing: 10px;
  cursor: pointer;
}


/* ====================================
     웹 (기존 유지)
==================================== */

 @media (min-width: 900px) {

  .mobile-wrapper { display:none; }

  .web-wrapper {
    width: 1920px;
    height: 1080px;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    transform-origin: center center;

    margin: 0;
    overflow: hidden;
  }

  .w-image-wrapper {
    position: absolute;
    left: 823px;
    top: 183px;
    width: 820px;
    height: 717px;
    border: 1px solid #222;
    overflow: hidden;
  }

  .w-image-content {
    width: 820px;
    height: 1573.38px;
    position: absolute;
    left: 0;
    top: -731px;
  }

  .w-menu-box {
    position: absolute;
    left: 274px;
    top: 501px;
    width: 531px;
    height: 170px;
    background: #f2f2f2;
    border: 1px solid #222;
  }

  .w-item {
    font-family: "MissFajardose";
    font-size: 31px;
    letter-spacing: 4px;
    height: 34px;
    width: fit-content;   
    padding-left: 21px;
    padding-top: 15px;
    display: flex;
    align-items: center;
    cursor: pointer;
    color: #000;
  }

  .w-outline {
    position: absolute;
    border: 1px solid #222;
    background: transparent;
  }

  .w-chitanda-outline {
    left: 274px;
    top: 183px;
    width: 531px;
    height: 302px;
  }

  .w-contact-outline {
    left: 274px;
    top: 687px;
    width: 531px;
    height: 213px;
  }

  .w-filled {
    position: absolute;
    background: #f2f2f2;
    border: 1px solid #222;
  }

  .w-chitanda-filled {
    left: 274px;
    top: 183px;
    width: 531px;
    height: 302px;
  }

  .w-contact-filled {
    left: 274px;
    top: 687px;
    width: 531px;
    height: 213px;
  }

  .w-close {
    position: absolute;
    left: 19px;
    top: 17px;
    font-family: "MissFajardose";
    font-size: 28px;
    letter-spacing: 10px;
    cursor: pointer;
  }

  .w-text {
    position: absolute;
    width: 320px;
    font-family: "Noto Sans CJK KR", sans-serif;
    font-size: 10px;
    letter-spacing: 1px;
    line-height: 1.48;
    text-align: right;
    color: #000;
  }

  .w-chitanda-text { left: 196px; top: 166px; }
  .w-contact-text  { left: 196px; top: 163.5px; }
}


/* 링크 */
a, a:visited, a:hover, a:active {
  color: #000;
  text-decoration: none;
}

html, body, div, span, a, p {
  animation: textGlitchSoft 0.9s infinite alternate;
}

@keyframes textGlitchSoft {
  0%   { text-shadow: 0px 0px 0 #000; }
  33%  { text-shadow: 0.3px -0.2px 0 #000; }
  66%  { text-shadow: -0.2px 0.3px 0 #000; }
  100% { text-shadow: 0.2px 0.4px 0 #000; }
}

/* ✨ Thin Cross Sparkle Effect */
.cross-sparkle {
  position: fixed;
  width: 8px;
  height: 8px;
  pointer-events: none;
  opacity: 0.9;
  mix-blend-mode: multiply;
  animation: crossFade 0.6s ease-out forwards;
}

/* 십자가 막대 — 더 얇게 (1px) */
.cross-sparkle::before,
.cross-sparkle::after {
  content: "";
  position: absolute;
  background: #d0d0d0; /* 연한 그레이 */
  border-radius: 1px;
}

/* 수직 */
.cross-sparkle::before {
  width: 1px;
  height: 8px;
  left: 3.5px;
  top: 0;
}

/* 수평 */
.cross-sparkle::after {
  width: 8px;
  height: 1px;
  left: 0;
  top: 3.5px;
}

@keyframes crossFade {
  0% {
    transform: scale(1);
    opacity: 0.9;
  }
  100% {
    transform: scale(0.2) translateY(-10px);
    opacity: 0;
  }
}

/* ✨ Thin Cross Sparkle Effect */
.cross-sparkle {
  position: fixed;
  width: 8px;
  height: 8px;
  pointer-events: none;
  opacity: 0.9;
  mix-blend-mode: multiply;
  animation: crossFade 0.8s ease-out forwards;
}

/* 십자가 막대 — 더 얇게 (1px) */
.cross-sparkle::before,
.cross-sparkle::after {
  content: "";
  position: absolute;
  background: #d0d0d0; /* 연한 그레이 */
  border-radius: 1px;
}

/* 수직 */
.cross-sparkle::before {
  width: 1px;
  height: 8px;
  left: 3.5px;
  top: 0;
}

/* 수평 */
.cross-sparkle::after {
  width: 8px;
  height: 1px;
  left: 0;
  top: 3.5px;
}

@keyframes crossFade {
  0% {
    transform: scale(1);
    opacity: 0.9;
  }
  100% {
    transform: scale(0.2) translateY(-10px);
    opacity: 0;
  }
}

/* 모바일 전용 별똥별 애니메이션 */
@keyframes crossFall {
  0% {
    opacity: 0.8;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--fall-x), var(--fall-y)) scale(0.2);
  }
}

/* 모바일에서만 색 더 진하게 */
@media (pointer: coarse) {
  .cross-sparkle::before,
  .cross-sparkle::after {
    background: #707070; /* 더 진한 그레이 */
  }
}

/* 📱 모바일 전용: 떨어지는 속도 + 사라지는 속도 느리게 */
@media (pointer: coarse) {
  .cross-sparkle {
    animation-duration: 5.1s !important; /* PC보다 훨씬 느리게 */
  }
}

/* 모바일 탭 하이라이트 제거 */
* {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}