@charset "utf-8";

/* ============================================================
   HippO Booth — style.css
   기준: 모바일 1080×1920 / 웹 1920×1080
   디카(모바일): 827×1103 / 디카(웹): 548×730

   ★ 실측값 (camera_m.png 투명 영역 픽셀 분석):
     화면 left   = 20.435%  (169/827)
     화면 top    =  5.077%  (56/1103)
     화면 width  = 58.888%  (487/827)
     화면 height = 66.727%  (736/1103)
   ============================================================ */

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
}

button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: block;
}

button img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

input[type="file"] {
    display: none;
}

/* ============================================================
   BACKGROUND — 모바일/웹 분리
   ============================================================ */
body {
    background-image: url('../img/mo/bg_mb.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

@media (min-width: 1024px) {
    body {
        background-image: url('../img/bg.jpg');
    }
}

/* ============================================================
   SCREEN VISIBILITY
   ============================================================ */
.screen {
    display: none;
    position: absolute;
    inset: 0;
}

.screen.active {
    display: block;
}

.outbtn {
    display: none;
}

.outbtn.active {
    display: flex;
}

/* ============================================================
   CAMERA CONTAINER
   ============================================================ */
.camera-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 0;
}

@media (min-width: 1024px) {
    .camera-container {
        /* 웹: 전체를 살짝 아래로 — 위 여백보다 아래 여백이 더 작게 */
        justify-content: flex-start;
        padding-top: 18vh;
    }
}

/* ============================================================
   .camera-wrap
   비율 827:1103 고정, 뷰포트에 꽉 차게
   ============================================================ */
.camera-wrap {
    position: relative;
    aspect-ratio: 827 / 1103;
    height: min(calc(92vh - 120px), calc(92vw * 1103 / 827));
    width: auto;
}

@media (min-width: 1024px) {
    .camera-wrap {
        /* 웹: 뷰포트 높이의 78% 기준, 너비 제한도 함께 */
        height: min(calc(78vh - 91px), calc(60vw * 1103 / 827));
        width: auto;
    }
}

/* ============================================================
   디카 <picture> + <img>
   ============================================================ */
.camera-wrap > picture {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none;
    user-select: none;
    display: block;
}

.camera {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* ============================================================
   .camera-screen — 디카 화면 오버레이
   
   PNG 투명 구멍 실측값:
     left   = 169/827  = 20.435%
     top    =  56/1103 =  5.077%
     width  = 487/827  = 58.888%
     height = 736/1103 = 66.727%
   ============================================================ */
.camera-screen {
    position: absolute;
    /* 실측값보다 상하좌우 확장해 빈틈 완전 제거 */
    top: 4.8%;
    left: 20.1%;
    width: 59.5%;
    height: 67.3%;
    z-index: 5;
    overflow: hidden;
    border-radius: 4px;
}

/* ============================================================
   각 화면 공통 배경
   Fix 2: inset: 0 으로 빈틈 완전 제거
   ============================================================ */
.home-screen,
.take-screen,
.upload-screen,
.done-screen {
    background: #0a0a0a;
    /* inset: 0 이 .screen에 이미 있으므로 추가 margin 없이 꽉 채워짐 */
}

/* ============================================================
   screen-ui <picture> + <img>
   Fix 1: object-fit: fill → contain 으로 변경
         이미지 원본 비율 유지, 늘리지 않음
         화면 상단 기준으로 배치
   ============================================================ */
.screen > picture {
    position: absolute;
    width: 100%;
    height: 50%;          /* 상하단 각각 절반 차지 */
    z-index: 4;
    pointer-events: none;
    user-select: none;
    display: block;
}

/* home-screen은 기존대로 전체 높이 */
.home-screen > picture {
    height: 100%;
    top: 0;
    left: 0;
}

/* 상단 screen_m */
.screen-ui-top {
    top: 0;
    left: 0;
}

/* 하단 screen_m */
.screen-ui-bottom {
    top: 50%;
    left: 0;
}

.screen-ui {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    pointer-events: none;
    user-select: none;
}

/* screen_m / mainscreen_m 가로 기준 양쪽 20px 안쪽 여백 */
.screen > picture {
    padding-left: 20px;
    padding-right: 20px;
}

/* home-screen picture는 별도 처리 — 위에서 height:100% 이미 지정 */

/* ============================================================
   HOME 화면

   takebtn / uploadbtn: 272×82px (원본 기준)
     화면 너비(487px) 대비: 272/487 = 55.85%
   ============================================================ */
.image-btn {
    position: absolute;
    z-index: 2;
    width: 55.85%;
    left: 50%;
    transform: translateX(-50%);
}

.takebtn {
    top: 52.5%;
}

.uploadbtn {
    top: 67.5%;
}

/* ============================================================
   TAKE / UPLOAD 화면
   Fix 3: 슬롯을 디카 화면 전체(상하)에 꽉 차게 배치
          사진 2장이 빈틈 없이 반반 채우기

   기존 top 46.21% / 73.11% 방식 → 0% / 50% 로 변경
   (screen-ui 오버레이는 z-index로 위에 덮음)
   ============================================================ */
.photo-slot,
.upload-slot {
    position: absolute;
    left: 0;
    width: 100%;
    overflow: hidden;
    z-index: 2;
    background: #1c1c1c;
}

/* Fix 3: 상단 슬롯 — 화면 상단 절반 */
.top-slot {
    top: 0;
    height: 50%;
}

/* Fix 3: 하단 슬롯 — 화면 하단 절반 */
.bottom-slot {
    top: 50%;
    height: 50%;
}

.photo-slot img,
.upload-slot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-slot video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Fix 4: 셀피 미러링 — 뷰파인더가 거울처럼 보이게 */
    transform: scaleX(-1);
}

/* ============================================================
   in-btn (촬영/업로드 버튼)
   Fix 3: 각 슬롯의 정중앙에 위치
          top-slot: 0~50% 중간 = 25%
          bottom-slot: 50~100% 중간 = 75%
   ============================================================ */
.in-btn {
    position: absolute;
    z-index: 5;   /* screen-ui(4) 위에서 클릭 가능 */
    width: 20.53%;
    aspect-ratio: 1;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Fix 3: 상단 슬롯 중앙 */
.take-top-btn,
.upload-top-btn {
    top: 25%;
}

/* Fix 3: 하단 슬롯 중앙 */
.take-bottom-btn,
.upload-bottom-btn {
    top: 75%;
}

/* ============================================================
   RESULT 화면
   Fix 3 연동: 사진 2장이 화면 전체를 빈틈 없이 채우기
   ============================================================ */
.result-frame {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.result-frame img {
    display: block;
    width: 100%;
    flex: 1;
    object-fit: cover;
    min-height: 0;
}

/* ============================================================
   외부 버튼 (.outbtn)
   - camera-container를 flex column으로 바꿔 camera-wrap 아래 배치
   - 모바일: 원본 사이즈(260×80px), 디카 아래 40px
   - 웹(1024px+): 디카 축소 비율에 맞게 비례 축소, 디카 아래 30px
   ============================================================ */

.outbtn {
    position: static;
    margin-top: 40px;
    width: auto;
    height: 80px;
    justify-content: center;
    align-items: center;
    gap: 20px;
    z-index: 20;
    padding: 0;
    flex-shrink: 0;
}

.btn {
    width: 260px;
    height: 80px;
    flex-shrink: 0;
}

.btn img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media (min-width: 1024px) {
    .outbtn {
        margin-top: 30px;
        height: 61px;
        gap: 16px;
    }

    .btn {
        width: 198px;
        height: 61px;
    }
}

/* ============================================================
   슬롯 빈 상태 placeholder
   ============================================================ */
.photo-slot:not(:has(> *))::after,
.upload-slot:not(:has(> *))::after {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    background: #111;
}