/* ============================================================
   common.css — 전역 스타일 (모든 페이지 공통)
   ============================================================ */

/* ---------- Font ---------- */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');
/* Instrument Serif 는 임시 비활성 — 영문도 Pretendard 사용 */
/* @import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap'); */

/* ---------- Variables ---------- */
:root {
  --blue: #bdd3fc;
  --blue-deep: #9ebaef;
  --blue-soft: #d7e3fb;
  --orange: #f75b44;
  --orange-deep: #db4229;
  --ivory: #fffcf9;
  --ink: #1a1a1a;
  --ink-soft: #3a3a3a;
  --paper: #f7f2ea;
  --shadow: 0 8px 24px rgba(30, 50, 100, 0.12);
  --shadow-soft: 0 4px 12px rgba(30, 50, 100, 0.08);

  --font-kr: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
  /* 영문도 임시로 Pretendard 사용 (추후 Instrument Serif 로 전환 예정) */
  --font-en: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Custom Cursor (all elements, all states) ----------
   ⚠ .ani 는 Chrome/Firefox/Safari 미지원.
   같은 경로에 .cur / .png 를 추가로 업로드하면 자동 적용됨.
------------------------------------------------------------------- */
*, *::before, *::after {
  cursor:
    url('http://myphaionly.com/myphai.cur'),
    url('http://myphaionly.com/myphai.png') 0 0,
    url('http://myphaionly.com/myphai.ani'),
    auto !important;
}
/* 모든 상호작용 상태에서도 동일하게 유지 */
a, a:hover, a:active, a:focus,
button, button:hover, button:active, button:focus,
input, input:hover, input:focus,
textarea, textarea:hover, textarea:focus,
select, select:hover, select:focus,
[role="button"],
[role="link"] {
  cursor:
    url('http://myphaionly.com/myphai.cur'),
    url('http://myphaionly.com/myphai.png') 0 0,
    url('http://myphaionly.com/myphai.ani'),
    auto !important;
}

/* ---------- Reset ---------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent; /* 모바일 탭 하이라이트 네모 제거 */
}
a, button, [role="button"], [tabindex] {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
a:focus, button:focus, input:focus, textarea:focus, select:focus {
  outline: none;
}
a:focus-visible, button:focus-visible {
  outline: 2px solid rgba(247, 91, 68, 0.5);
  outline-offset: 2px;
}
html, body { height: 100%; }
body {
  font-family: var(--font-kr);
  letter-spacing: -0.035em;
  color: var(--ink);
  background: var(--blue);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }
ul, ol { list-style: none; }

/* ---------- Background (PC / Mobile) ---------- */
html body {
  background-image: url('https://i.imgur.com/rp4bmV7.jpeg') !important;
  background-size: cover !important;
  background-position: center !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
  background-color: var(--blue) !important;
}
@media (max-width: 768px) {
  html body {
    background-image: url('https://i.imgur.com/jat5uZ1.jpeg') !important;
    background-attachment: scroll !important;
  }
}

/* ---------- Texture Overlay (touch-through, screen blend) ---------- */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('https://i.imgur.com/hcWppb0.jpeg');
  background-size: cover;
  background-position: center;
  mix-blend-mode: screen;
  opacity: 0.5;
  pointer-events: none;
  z-index: 1;
}

/* Content must sit above texture */
main, header, footer,
.site-root, .page-root, .page-intro-root,
.intro-stage, .side, .copy, .contents, .book-menu, .logo-title {
  position: relative;
  z-index: 2;
}
.side { z-index: 50; }
.page-root { z-index: 3; }

/* ---------- English Helper ---------- */
.en, .serif {
  font-family: var(--font-en);
  letter-spacing: 0;
  font-weight: 400;
}

/* ---------- Page Transition Fade ---------- */
.page-root {
  opacity: 1;
  transition: opacity 500ms var(--ease-out);
}
.page-root.is-out { opacity: 0; }

/* ---------- Loading overlay (shared) ---------- */
/* ---------- Load Veil (진입/전환 로딩 오버레이) ---------- */
.load-veil {
  position: fixed;
  inset: 0;
  background: var(--blue);
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 450ms var(--ease-out);
  display: flex;
  align-items: center;
  justify-content: center;
}
.load-veil.show {
  opacity: 1;
  pointer-events: auto;
}
.load-veil::after {
  /* 텍스처 느낌 유지 */
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('https://i.imgur.com/hcWppb0.jpeg');
  background-size: cover;
  background-position: center;
  mix-blend-mode: screen;
  opacity: 0.4;
  pointer-events: none;
}

.load-spinner {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 3px solid rgba(247, 91, 68, 0.18);
  border-top-color: var(--orange);
  animation: load-spin 850ms linear infinite;
  position: relative;
  z-index: 1;
}
@keyframes load-spin {
  to { transform: rotate(360deg); }
}

/* ---------- Selection ---------- */
::selection { background: var(--orange); color: #fff; }

/* ---------- Scrollbar (subtle) ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(30, 50, 100, 0.2); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(30, 50, 100, 0.35); }