/* ============================================
   Needle & Stitch 키오스크 - 메인 스타일시트
   16:9 고정 레이아웃 + 투명 버튼 기반
   ============================================ */

/* Reset & Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: 'Malgun Gothic', sans-serif;
    cursor: none; /* 기본 커서 숨김 */
}

/* 전체 배경 이미지 (가장 뒤 레이어) */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: url('../assets/images/TotalBG.png');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;
}

/* ============================================
   커스텀 커서
   ============================================ */
.custom-cursor {
    position: fixed;
    width: 32px;
    height: 32px;
    border: 3px dashed rgba(0, 0, 0, 1);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    animation: cursorRotate 2s linear infinite;
}

.custom-cursor::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    background: rgba(0, 0, 0, 1);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

@keyframes cursorRotate {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* ============================================
   16:9 고정 레이아웃
   ============================================ */
.app-wrapper {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000;
}

.scene {
    position: relative;
    width: 80%;                                    /* 0.8배 크기 */
    max-width: calc(100vh * (16 / 9) * 0.8);       /* 0.8배 크기 */
    height: calc(100vw * (9 / 16) * 0.8);          /* 0.8배 크기 */
    max-height: calc(100vh * 0.8);                 /* 0.8배 크기 */
    overflow: hidden;
    background: #1a1a1a;
}

/* ============================================
   페이지 (섹션) 스타일
   ============================================ */
.page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    /* 애니메이션 없음 - 즉시 전환 */
}

.page.active {
    display: block;
}

/* 배경 이미지 */
.bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
}

/* ============================================
   투명 버튼 스타일 (공통)
   ============================================ */
.invisible-btn {
    position: absolute;
    background: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    z-index: 10;
}

.invisible-btn:hover {
    /* CSS hover 효과 사용 금지 - 이미지 레이어로 처리 */
}

.invisible-btn:focus {
    outline: none;
}

/* ============================================
   🔘 버튼 위치/크기 설정 (페이지별)
   ============================================ */

/* --- 공통: 홈 버튼 (왼쪽 상단) --- */
.btn-home {
    left: 7%;
    top: 4%;
    width: 8%;
    height: 6%;
    background-image: url('../assets/images/btn-reset.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* 홈 버튼 임시 라벨 숨김 (이미지 사용) */
.btn-home .temp-label {
    display: none;
}

/* 디버그 모드에서는 라벨 표시 */
.debug-mode .btn-home .temp-label {
    display: flex;
}

/* --- 01. 시작 페이지: 시작하기 버튼 --- */
.btn-start {
    left: 40%;
    top: calc(75% - 0.5vw);
    width: 20%;
    height: 10%;
    opacity: 0; /* 완전 투명 */
}

/* --- 02. 안내 페이지: 다음 버튼 --- */
.btn-guide-next {
    left: 42.5%;
    top: calc(85% - 5.5vw);
    width: 15%;
    height: 12%;
    opacity: 0;    /* ← 알파값 (0~1) */
}

/* --- 03. 선택 페이지: 좌/우 선택 영역 --- */
.btn-select-left {
    left: 10%;
    top: 55%;
    width: 40%;
    height: 35%;
    z-index: 10;
    opacity: 0;    /* ← 알파값 (0~1) */
}

.btn-select-right {
    left: 50%;
    top: 55%;
    width: 40%;
    height: 35%;
    z-index: 10;
    opacity: 0;    /* ← 알파값 (0~1) */
}

/* --- 04. 입력 페이지: 완료하기 버튼 --- */
.btn-submit {
    left: 40%;
    top: 78%;
    width: 20%;
    height: 10%;
    z-index: 100;
    opacity: 0;    /* ← 알파값 (0~1) */
}

/* --- 05. 테피스트리 페이지: 하단 홈 버튼 --- */
.btn-home-bottom {
    left: 3%;
    top: 88%;
    width: 10%;
    height: 10%;
    background-size: contain;
}

/* 메시지월 요소 fade-in 애니메이션 */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* 처음으로 버튼 (이미지 버튼) - 메시지월 페이지용 */
.btn-home-image {
    position: absolute;
    left: 1%;
    bottom: 2%;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 100;
    padding: 0;
    animation: fadeIn 1s ease-in-out;
}

.btn-home-image:focus {
    outline: none;
}

.home-btn-img {
    width: 8vw;
    height: auto;
    display: block;
}

/* 반대편 보기 버튼 (우측 중앙) - 메시지월 전환 */
.btn-switch-right {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 100;
    padding: 0;
    animation: fadeIn 1s ease-in-out;
}

.btn-switch-right:focus {
    outline: none;
}

.switch-btn-img {
    height: 4.2vw;  /* 6vw에서 70%로 축소 */
    width: auto;
    display: block;
}

/* ============================================
   📝 입력 필드 위치/크기 설정
   ============================================ */
.transparent-input {
    position: absolute;
    background: transparent;
    border: none;
    outline: none;
    font-size: 2vw;
    color: #333;
    text-align: left;
    z-index: 10;
}

/* 대상 입력 필드 */
.input-target {
    left: 36%;
    top: 40%;
    width: 52%;
    height: 8%;
}

/* 메시지 입력 필드 */
.input-message {
    left: 36%;
    top: 58%;
    width: 53%;
    height: 9%;
}

.transparent-input::placeholder {
    color: rgba(0, 0, 0, 0);
}

.transparent-input:focus {
    outline: none;
}

/* ============================================
   Hover 이미지 레이어 (선택 페이지용)
   ============================================ */
.hover-layer {
    position: absolute;
    width: 15vw;   /* 브라우저 너비에 비례 (조절 가능) */
    height: auto;
    pointer-events: none;
    user-select: none;
    opacity: 0;
    z-index: 5;
    transition: opacity 0.3s ease-in-out; /* 부드러운 페이드 효과 */
}

.hover-layer.visible {
    opacity: 1;
}

.hover-left {
    top: 80%;
    left: 40%;
    transform: translate(-50%, -50%);
}

/* 우측 hover 이미지 위치 (상처 받은 사람) */
.hover-right {
    top: 80%;
    left: 60%;
    transform: translate(-50%, -50%);
}

/* ============================================
   테피스트리 페이지 (외부 iframe)
   ============================================ */
.tapestry-page {
    background: #000;
}

.tapestry-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    z-index: 1;
}

/* YouTube 배경 영상 */
.youtube-bg {
    pointer-events: none; /* 영상 클릭 방지, 버튼만 클릭 가능 */
}

/* 테피스트리 페이지 버튼은 영상 위에 표시 */
.tapestry-page .btn-home-bottom {
    z-index: 10;
}

/* ============================================
   디버그 모드 (개발 중에만 사용)
   ============================================ */
.debug-mode .invisible-btn {
    background: rgba(255, 0, 0, 0.3);
    border: 2px dashed red;
}

.debug-mode .btn-select-left,
.debug-mode .btn-select-right {
    background: rgba(0, 255, 0, 0.2);
    border: 2px dashed green;
}

.debug-mode .transparent-input {
    background: rgba(0, 0, 255, 0.2);
    border: 2px dashed blue;
}

/* ============================================
   플레이스홀더 이미지 스타일 (이미지 없을 때)
   ============================================ */
.page::before {
    content: attr(id);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3vw;
    color: rgba(255, 255, 255, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.5em;
    pointer-events: none;
    z-index: 0;
}

/* ============================================
   ⚠️ 욕설 경고 메시지
   완료하기 버튼 아래에 배치 (top: 90%)
   ============================================ */
.profanity-warning {
    position: absolute;
    left: 80%;
    top: 68%;
    transform: translateX(-50%);
    padding: 0.8vw 1.6vw;
    background: transparent;
    color: #ff0000;
    font-family: 'Malgun Gothic', 'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif;
    font-size: 1.2vw;
    font-weight: bold;
    z-index: 200;
    display: none;
    animation: warningShake 0.5s ease-in-out;
    white-space: nowrap;
}

.profanity-warning.show {
    display: block;
}

@keyframes warningShake {
    0%, 100% { transform: translateX(-50%); }
    25% { transform: translateX(calc(-50% - 10px)); }
    75% { transform: translateX(calc(-50% + 10px)); }
}

/* ============================================
   ⚠️ 빈 입력 경고 메시지
   완료하기 버튼 아래에 배치 (top: 90%)
   ============================================ */
.empty-warning {
    position: absolute;
    left: 80%;
    top: 68%;
    transform: translateX(-50%);
    padding: 0.8vw 1.6vw;
    background: transparent;
    color: #ff9600;
    font-family: 'Malgun Gothic', 'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif;
    font-size: 1.2vw;
    font-weight: bold;
    z-index: 200;
    display: none;
    animation: warningShake 0.5s ease-in-out;
    white-space: nowrap;
}

.empty-warning.show {
    display: block;
}

/* 쿨다운 경고 (이미 메시지 전송됨) */
.cooldown-warning {
    position: absolute;
    left: 80%;
    top: 68%;
    transform: translateX(-50%);
    padding: 0.8vw 1.6vw;
    background: transparent;
    color: #666666;
    font-family: 'Malgun Gothic', 'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif;
    font-size: 1.2vw;
    font-weight: bold;
    z-index: 200;
    display: none;
    animation: warningShake 0.5s ease-in-out;
    white-space: nowrap;
}

.cooldown-warning.show {
    display: block;
}

/* ============================================
   📝 글자수 카운터
   ============================================ */
   .char-counter {
    position: absolute;
    right: 13%;
    top: 61%;
    font-size: 1.4vw;  /* 기존 2vw에서 70%로 축소 */
    color: rgba(0, 0, 0, 0.4);
    z-index: 15;
}

/* ============================================
   🚨 임시 라벨 (나중에 지울 것!)
   "임시 라벨 지워줘" 하면 삭제
   ============================================ */
.temp-label {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    font-size: 1.2vw;
    font-weight: bold;
    color: #fff;
    background: rgba(0, 0, 0, 0.7);
    border: 3px solid #ff6b6b;
    border-radius: 8px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    pointer-events: none;
}

/* ============================================
   🖥️ 전체화면 모드 - 메시지월 페이지 확대
   F11 전체화면 시 16:9 비율 유지하며 화면 가득 채움
   ============================================ */

/* 전체화면 모드일 때 scene 확대 (메시지월 페이지) */
.fullscreen-mode .scene.fullscreen-tapestry {
    width: 100%;
    max-width: calc(100vh * (16 / 9));   /* 세로 기준 최대 너비 (16:9 비율) */
    height: 100vh;                        /* 세로 가득 채움 */
    max-height: 100vh;
}

/* 가로가 더 넓은 화면 (예: 21:9 울트라와이드) */
@media screen and (min-aspect-ratio: 16/9) {
    .fullscreen-mode .scene.fullscreen-tapestry {
        width: calc(100vh * (16 / 9));   /* 세로 기준으로 너비 계산 */
        max-width: calc(100vh * (16 / 9));
        height: 100vh;
        max-height: 100vh;
    }
}

/* 세로가 더 긴 화면 (예: 4:3, 5:4) */
@media screen and (max-aspect-ratio: 16/9) {
    .fullscreen-mode .scene.fullscreen-tapestry {
        width: 100vw;                     /* 가로 가득 채움 */
        max-width: 100vw;
        height: calc(100vw * (9 / 16));  /* 가로 기준으로 높이 계산 */
        max-height: calc(100vw * (9 / 16));
    }
}

/* 정확히 16:9 화면 */
@media screen and (aspect-ratio: 16/9) {
    .fullscreen-mode .scene.fullscreen-tapestry {
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        max-height: 100vh;
    }
}

/* 전체화면 모드에서 배경 숨김 */
.fullscreen-mode.fullscreen-tapestry-active body::before {
    display: none;
}

/* 전체화면 모드에서 app-wrapper 배경 */
.fullscreen-mode .app-wrapper {
    background: #000;
}