/* 모든 페이지 공통: 스크롤 등장, 페이지 넘어갈 때 검은 막, 커서, 자석 버튼. (common.js 가 켠다) */

/* 스크롤 등장. JS 가 없으면(.js 없음) 그대로 보인다. */
.js [data-reveal] { transition: opacity 0.9s ease, transform 1.1s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: var(--d, 0ms); }
.js [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(44px); }
.js [data-reveal='fade']:not(.is-in) { transform: none; }
.js [data-reveal='rise']:not(.is-in) { transform: translateY(32%); }
.js [data-reveal='words'], .js [data-reveal='words']:not(.is-in) { opacity: 1; transform: none; transition: none; }
[data-reveal='words'] .rw { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0.06em 0.04em 0.16em; margin: -0.06em -0.04em -0.16em; }
.js [data-reveal='words'] .rw > span { display: inline-block; transform: translateY(115%); transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: calc(var(--w, 0) * 70ms + var(--d, 0ms)); }
.js [data-reveal='words'].is-in .rw > span { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js [data-reveal]:not(.is-in) { opacity: 1; transform: none; transition: none; }
  .js [data-reveal='words'] .rw > span { transform: none; transition: none; }
}
.page-veil { position: fixed; inset: 0; z-index: 1000; background: #000; opacity: 1; pointer-events: none; transition: opacity 0.32s ease; }
.page-veil.is-open { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .page-veil { display: none; } }

/* 소식 받기 창 */
.sub { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 20px; font-family: 'Pretendard Variable', 'Noto Sans KR', system-ui, sans-serif; }
.sub[hidden] { display: none; } /* 페이지 CSS 의 [hidden] 규칙이 없어도 닫혀 있게 */
.sub__veil { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.25s; }
.sub__box { position: relative; width: min(520px, 100%); max-height: calc(100vh - 40px); overflow: auto; padding: 32px 28px 28px; border-radius: 20px; background: #141317; color: #fff; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); opacity: 0; transform: translateY(16px) scale(0.98); transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.sub.is-open .sub__veil { opacity: 1; }
.sub.is-open .sub__box { opacity: 1; transform: none; }
.has-sub { overflow: hidden; }
.sub__x { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
.sub__x:hover { background: rgba(255, 255, 255, 0.16); }
.sub__about { margin: 0 0 6px; font-size: 13px; color: rgba(255, 255, 255, 0.55); }
.sub__about:empty { display: none; }
.sub__title { margin: 0 0 8px; font-size: 26px; font-weight: 600; letter-spacing: -0.02em; }
.sub__lead { margin: 0 0 20px; font-size: 15px; color: rgba(255, 255, 255, 0.7); }
.sub__choices { display: grid; gap: 10px; }
.sub__choice { display: grid; gap: 4px; padding: 16px 18px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.05); color: #fff; text-align: left; font: inherit; cursor: pointer; text-decoration: none; transition: background 0.2s, border-color 0.2s; }
.sub__choice:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.3); }
.sub__choice strong { font-size: 16px; font-weight: 600; }
.sub__choice span { font-size: 13px; color: rgba(255, 255, 255, 0.62); }
.sub__choice.is-off { opacity: 0.55; cursor: default; border-style: dashed; }
.sub__form { display: grid; gap: 14px; }
.sub__field { display: grid; gap: 6px; font-size: 13px; color: rgba(255, 255, 255, 0.7); }
.sub__field input { height: 46px; padding: 0 14px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.06); color: #fff; font: inherit; font-size: 16px; }
.sub__field input:focus { outline: 2px solid #b9a6ff; outline-offset: 1px; }
.sub__check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.6; color: rgba(255, 255, 255, 0.7); }
.sub__check input { margin-top: 4px; width: 16px; height: 16px; accent-color: #8b6cff; }
.sub__actions { display: flex; gap: 8px; }
.sub__btn { height: 44px; padding: 0 22px; border: 0; border-radius: 999px; background: #fff; color: #000; font: inherit; font-weight: 600; cursor: pointer; }
.sub__btn:disabled { opacity: 0.6; cursor: wait; }
.sub__ghost { height: 44px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 999px; background: transparent; color: #fff; font: inherit; cursor: pointer; }
.sub__err { margin: 0; font-size: 13px; color: #ffb4b4; }
.sub__done { margin: 0; padding: 16px 18px; border-radius: 14px; background: rgba(139, 108, 255, 0.16); border: 1px solid rgba(139, 108, 255, 0.4); font-size: 15px; }
@media (prefers-reduced-motion: reduce) { .sub__veil, .sub__box { transition: none; } }

/* 커서: 데스크톱에서만. 기본 커서는 숨기고 링크 위에서는 원이 커진다. */
.has-cursor, .has-cursor a, .has-cursor button, .has-cursor summary, .has-cursor [role='button'] { cursor: none; }
.has-cursor input, .has-cursor textarea, .has-cursor select, .has-cursor input[type='range'] { cursor: auto; }
.cursor { position: fixed; left: 0; top: 0; z-index: 1001; pointer-events: none; opacity: 0; transition: opacity 0.3s; will-change: transform; }
.cursor.is-on { opacity: 1; }
.cursor__dot, .cursor__ring { position: absolute; left: 0; top: 0; border-radius: 50%; transform: translate(-50%, -50%); }
.cursor__dot { width: 6px; height: 6px; background: #fff; mix-blend-mode: difference; transition: transform 0.2s ease, opacity 0.2s; }
.cursor__ring { width: 68px; height: 68px; border: 1px solid rgba(255, 255, 255, 0.75); mix-blend-mode: difference; display: grid; place-items: center; transform: translate(-50%, -50%) scale(0.5); transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), background 0.28s, border-color 0.28s; }
.cursor__label { transform: scale(1); font: 600 12px/1 'Pretendard Variable', 'Noto Sans KR', system-ui, sans-serif; color: #000; opacity: 0; transition: opacity 0.2s; white-space: nowrap; }
.cursor.is-link .cursor__ring { transform: translate(-50%, -50%) scale(0.82); background: rgba(255, 255, 255, 0.9); border-color: transparent; }
.cursor.is-link .cursor__dot { transform: translate(-50%, -50%) scale(0); }
.cursor.has-label .cursor__ring { transform: translate(-50%, -50%) scale(1); }
.cursor.has-label .cursor__label { opacity: 1; }
.cursor.is-down .cursor__ring { transform: translate(-50%, -50%) scale(0.42); }
.cursor.is-link.is-down .cursor__ring { transform: translate(-50%, -50%) scale(0.7); }

/* 자석 버튼 */
.magnet { transform: translate(var(--mx, 0px), var(--my, 0px)); transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), background 0.25s, border-color 0.25s, box-shadow 0.25s; }