/* 1. 폰트 등록 */
@font-face {
    font-family: 'ChosunGu'; /* 내가 원하는 이름을 자유롭게 정하세요 */
    src: url('ChosunGu.woff2') format('woff2'), /* 폰트 파일 경로와 확장자 맞추기 */
         url('fonts/ChosunGu.woff2') format('truetype'); /* 여러 개라면 쉼표로 연결 */
    font-weight: bold;
    font-style: normal;
}

/* 2. 웹페이지 전체에 적용 */
* {
    font-family: 'ChosunGu', sans-serif; /* 위에서 정한 이름 사용 */
}
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
}

.container {
    display: flex;
    height: 100vh;
}

/* 왼쪽 보이지 않는 박스 (숫자들을 담는 큰 바구니) */
.left-panel {
    width: 380px;           /* 박스 너비 (원하시는 대로 조절) */
    height: 100vh;          /* 화면 전체 높이 사용 */
    
    display: flex;          /* 유연한 배치를 위해 사용 */
    flex-direction: column; /* 내용물을 위아래(세로) 방향으로 정렬 */
    
    /* ★ 핵심: 상하 중앙 정렬 */
    justify-content: center; 
    
    /* 가로 중앙 정렬 */
    align-items: center;    
    
    padding: 0px;          /* 박스 안쪽 여백 */
    position: fixed;        /* [선택] 스크롤해도 왼쪽 메뉴는 고정하고 싶다면 추가 */
    left: 0;
    top: 0;
}

/* 숫자 그리드 (실제 숫자들이 배치되는 공간) */
.number-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5열 */
    gap: 20px 13px;      /* 숫자 간격 조절 */
    text-align: center;
    max-width: 300px;       /* 너무 퍼지지 않게 최대 너비 제한 (조절 가능) */
}

/* 링크 공통 디자인 (파란색) */
.number-grid a {
    color: blue;
   /* 1. 밑줄 스타일 활성화 */
    text-decoration: underline;
    
    /* 2. 밑줄의 굵기 조절 (원하는 대로 숫자를 바꿔보세요) */
    text-decoration-thickness: 1.7px; 
    
    /* 3. 글자와 밑줄 사이의 간격 조절 (숫자가 클수록 멀어집니다) */
    text-underline-offset: 4px; 
    
    cursor: pointer;
    font-size: 11px;
}

/* 클릭한(방문한) 링크 디자인 (보라색) */
.number-grid a.visited {
    color: purple;
}

/* R 버튼(초기화) 전용 스타일 */
.reset-btn {
    text-decoration: none !important; /* ★ 밑줄 제거 */
    font-weight: bold;                /* 다른 버튼과 구분되도록 굵게 설정 */
}

.number-grid a {
    font-weight: bold; /* 숫자들만 한 단계 더 두껍게 */
    -webkit-text-stroke: 1.5px; /* 아주 미세하게 외곽선을 그려서 더 선명하게 만들기 (꿀팁!) */
}

/* 오른쪽 사진 공간 */
.right-panel {
    flex-grow: 1;
    position: relative;
    overflow: hidden;
    pointer-events: none;

    /* ★ 추가: 왼쪽 패널 너비만큼 여백을 주어 영역을 오른쪽으로 밀어냅니다 */
    margin-left: 380px; 
    /* ★ 추가: 전체 높이를 차지하게 해서 세로 중앙 정렬 기준을 잡습니다 */
    height: 100vh;
}

/* 사진과 장식을 모두 오른쪽 패널 중앙에 겹치게 만듭니다 */
.right-panel img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* 숫자 눌렀을 때 나오는 실제 사진들 (장식보다 앞에 위치) */
#photoContainer img {
    max-width: 70%;
    max-height: 70%;
    z-index: 10;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    object-fit: contain;
}

/* =========================================
   장식 레이어 공통 설정 (절대 건드리지 않는 기본 틀)
   ========================================= */

/* 1. 장식 요소들을 담는 거대한 투명 배경막 */
.decoration-layer {
    position: fixed;        /* 화면 전체에 딱 고정시킴 */
    top: 0;
    left: 0;
    width: 100vw;           /* 화면 전체 너비 */
    height: 100vh;          /* 화면 전체 높이 */

    z-index: -1;            /* ★ 핵심: 모든 것의 맨 뒤(벽지)로 보냅니다 */
    pointer-events: none;   /* ★ 핵심: 클릭, 터치를 완벽하게 무시합니다 */
    overflow: hidden;       /* 화면 밖으로 삐져나가는 장식은 잘라냅니다 */
}

/* 2. 장식 이미지 개별 속성 (드래그 방지) */
.deco-img {
    position: absolute;      /* 화면의 절대 좌표를 기준으로 배치 */
    user-select: none;       /* 텍스트처럼 선택되는 것 방지 */
    -webkit-user-drag: none; /* 마우스로 끌어당기기 완벽 차단 */
}

/* =========================================
   개별 장식 이미지 위치 & 크기 조절 (자유롭게 수정하세요!)
   ========================================= */

/* 첫 번째 일러스트 (예: 왼쪽 상단 구석에 작게) */
.deco1 {
    position: absolute;
    top: 20px;
    left: 152px;
    width: 75px;
}
.deco2 {
    position: absolute;
    bottom: 20px;
    left: 152px;
    width: 75px;
}
.deco3 {
    position: absolute;
    top: 58px;
    left: 90px;
    width: 270px;
    height: 350px;
}
/* ★ 수정: 숫자를 누를 때 나오는 장식 (초기엔 숨김) */
.deco4 {
    display: none;      /* 처음엔 안 보임 */
    width: 294px;
    pointer-events: none;
}

/* ★ 수정: R(초기화) 버튼일 때 나오는 장식 (초기엔 보임) */
.deco5 {
    display: block;     /* 처음엔 보임 */
    z-index: 5;
    width: 294px;
    pointer-events: none;
    transform: translate(-50%, -75%) !important;
}
/* ★ 추가: 링크 이미지 배치 (중앙에서 아래로 50px 내림) */
.initial-link {
    display: block;      /* 처음엔 보임 */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, 80%); /* 아래로 이동 */
    z-index: 15;         /* 클릭이 되어야 하므로 z-index를 높게 */
    pointer-events: auto; /* 클릭 가능하게 설정 */
}

.initial-link img {
    width: 150px;        /* 작은 이미지 크기 조절 */
    height: auto;
    position: static;    /* 부모인 .initial-link의 정렬을 따름 */
    transform: none;     /* 부모가 이미 transform 중이므로 초기화 */
}

/* 너비를 1024px로 넉넉하게 잡아 PC 창을 줄였을 때와 모바일을 모두 포함합니다 */
@media screen and (max-width: 1024px) {

    .left-panel {
    width: 110px;           /* 박스 너비 (원하시는 대로 조절) */
    height: 100vh;          /* 화면 전체 높이 사용 */
    
    display: flex;          /* 유연한 배치를 위해 사용 */
    flex-direction: column; /* 내용물을 위아래(세로) 방향으로 정렬 */
    
    /* ★ 핵심: 상하 중앙 정렬 */
    justify-content: center; 
    
    /* 가로 중앙 정렬 */
    align-items: center;    
    
    padding: 0px;          /* 박스 안쪽 여백 */
    position: fixed;        /* [선택] 스크롤해도 왼쪽 메뉴는 고정하고 싶다면 추가 */
    left: 0;
    top: 0;
    }

    /* 숫자 그리드 (실제 숫자들이 배치되는 공간) */
    .number-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5열 */
    gap: 15px 8px;      /* 숫자 간격 조절 */
    text-align: center;
    max-width: 300px;       /* 너무 퍼지지 않게 최대 너비 제한 (조절 가능) */
    }

    .number-grid a {
    color: blue;
   /* 1. 밑줄 스타일 활성화 */
    text-decoration: underline;
    
    /* 2. 밑줄의 굵기 조절 (원하는 대로 숫자를 바꿔보세요) */
    text-decoration-thickness: 1.3px; 
    
    /* 3. 글자와 밑줄 사이의 간격 조절 (숫자가 클수록 멀어집니다) */
    text-underline-offset: 3px; 
    
    cursor: pointer;
    font-size: 7px;
    }

    .number-grid a {
    font-weight: bold; /* 숫자들만 한 단계 더 두껍게 */
    -webkit-text-stroke: 1px; /* 아주 미세하게 외곽선을 그려서 더 선명하게 만들기 (꿀팁!) */
    }

    /* 1. 배경 레이어 설정 확인 */
    .decoration-layer {
        position: fixed !important; 
        width: 100% !important;
        height: 100% !important;
    }

    /* 2. deco1 위치 강제 조정 (좌측 상단) */
    .deco1 {
        top: 70px !important;
        left: 25px !important;
        right: auto !important;
        bottom: auto !important;
        width: 50px !important;
        transform: none !important;
    }

    /* 3. deco2 위치 강제 조정 (우측 상단) */
    .deco2 {
        top: auto !important;
        right: auto !important;
        left: 25px !important;
        bottom: 50px !important;
        width: 50px !important;
        transform: none !important;
    }

    /* 4. deco3 (큰 배경 장식) 위치 조정 */
    .deco3 {
        top: 100px !important;
        left: 0px !important;
        width: 140px !important;
        height: 210px !important;
    }
    /* 5. 오른쪽 패널 위치 및 너비 재조정 */
    .right-panel {
        margin-left: 110px !important; /* 왼쪽 패널 너비만큼만 비우기 */
        width: calc(100% - 110px) !important; /* 전체에서 왼쪽 패널 뺀 나머지 꽉 채우기 */
        height: 100vh !important;
        position: relative !important;
        overflow: hidden !important; /* 패널 밖으로 나가는 사진은 가리기 */
    }

    /* 6. 패널 안의 사진들 크기 강제 제한 */
    #photoContainer img {
        /* 패널 너비의 90%를 넘지 않게 해서 화면 안으로 가두기 */
        max-width: 80% !important; 
        max-height: 80% !important;
        
        /* 중앙 정렬 유지 */
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        
        object-fit: contain; /* 이미지 비율 유지하며 박스 안에 맞춤 */
    }

    /* 7. 중앙 장식(deco4, 5) 및 링크 이미지 크기 조정 */
    .deco4, .deco5 {
        width: 200px !important; /* 화면이 작으니 장식도 조금 작게 */
    }

    .initial-link img {
        width: 100px !important; /* 커버 이미지 크기도 조정 */
    }
}