body{
    margin:0;
    height:100vh;
    display:flex;
    flex-direction:column;
    font-family:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;

    background:linear-gradient(
        180deg,
        #f7f6f4 0%,
        #eceae7 100%
    );
}

/* 상단 프로젝트 버튼 영역 */

.pdf-list{
    display:flex;
    justify-content:center;
    gap:14px;
    padding:18px;
}

/* 프로젝트 버튼 */

.pdf-btn{

    padding:10px 18px;
    border-radius:10px;

    border:1px solid #e2e2e2;

    background:#ffffff;

    color:#2f2f2f;
    font-size:14px;
    font-weight:500;

    cursor:pointer;

    white-space:nowrap;
    max-width:240px;
    overflow:hidden;
    text-overflow:ellipsis;

    transition:all .2s ease;

    box-shadow:0 2px 6px rgba(0,0,0,0.04);
}

.pdf-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 16px rgba(0,0,0,0.08);
}

.pdf-btn.active{
    background:#f3f4f6;
    border:1px solid #d9d9d9;
}

/* 메인 영역 */

main{
    flex:1;
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
}

/* Viewer 카드 */

.viewer{
    width:85%;
    height:90vh;

    background:#ffffff;

    border-radius:16px;

    box-shadow:
        0 10px 35px rgba(0,0,0,0.12);

    display:flex;
    flex-direction:column;
    position:relative;
    overflow:hidden;
}

/* Viewer header */

.viewer-header{
    display:flex;
    align-items:center;
    padding:14px 20px;
    border-bottom:1px solid #efefef;
}

.dot{
    width:12px;
    height:12px;
    border-radius:50%;
    margin-right:8px;
}

.red{ background:#ff5f56; }
.yellow{ background:#ffbd2e; }
.green{ background:#27c93f; }

.viewer-title{
    margin-left:20px;
    color:#7a7a7a;
    font-size:14px;
}

/* Slider */

#slider{
    display:flex;
    overflow:hidden;

    height:calc(100% - 60px);

    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;

    position:relative;
}

/* 페이지 */

.page{
    flex:0 0 100%;
    height:100%;

    display:flex;
    justify-content:center;
    align-items:center;

    padding:clamp(20px,4vw,60px);

    background:#f6f6f6;

    overflow:hidden;

    box-sizing:border-box;
}

.page img{
    max-width:100%;
    max-height:100%;
    border-radius:4px;
    object-fit:contain;

    box-shadow:0 8px 30px rgba(0,0,0,0.15);
}

/* 페이지 번호 */

.page-indicator{
    text-align:center;
    padding:8px;
    color:#9b9b9b;
    font-size:13px;
}

/* 네비 버튼 */

.nav-btn{

    position:absolute;
    top:50%;
    transform:translateY(-50%);

    width:56px;
    height:56px;

    border:none;
    border-radius:50%;

    background:rgba(0,0,0,0.35);

    color:white;
    font-size:30px;

    cursor:pointer;

    backdrop-filter:blur(4px);

    transition:opacity .25s ease, transform .15s ease;

    z-index:10;
    opacity:.6;
}

.nav-btn:hover{
    transform:translateY(-50%) scale(1.05);
}

.left{ left:12px; }
.right{ right:12px; }

/* Empty state */

.empty-state{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);

    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:16px;
}

.empty-icon{
    font-size:60px;
    opacity:.7;
}

.empty-title{
    font-size:22px;
    font-weight:600;
    color:#5f5f5f;
}

.empty-desc{
    font-size:14px;
    color:#9b9b9b;
}

/* 화살표 초기 숨김 */

body:not(.viewer-active) .nav-btn{
    opacity:0;
    pointer-events:none;
}

body.viewer-active .nav-btn{
    opacity:1;
    pointer-events:auto;
}

/* 애니메이션 */

@keyframes fadeIn{
    from{opacity:0}
    to{opacity:1}
}

.loader{
    width:60px;
    height:60px;

    border-radius:50%;
    border:4px solid #ddd;
    border-top-color:#666;

    animation:spin 1s linear infinite;
}

@keyframes spin{
    to{ transform:rotate(360deg); }
}

.zoom-controls{
    margin-left:auto;
    display:flex;
    gap:8px;
}

.zoom-controls button{
    width:28px;
    height:28px;

    border-radius:6px;
    border:1px solid #ddd;

    background:#fff;

    font-size:16px;
    cursor:pointer;
}

.zoom-controls button:hover{
    background:#f3f3f3;
}

/* 이미지 설정: 하단에 링크 박스가 들어갈 공간(약 80px)을 비워둡니다 */
.page img {
    max-width: 100%;
    max-height: calc(100% - 80px); /* 중요: 하단 박스 공간 확보 */
    border-radius: 4px;
    object-fit: contain;
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
    transition: transform 0.15s ease;
    margin-top: -40px; /* 이미지를 약간 위로 올려 밸런스를 맞춤 */
}

.project-links a {
    font-size: 0.9rem;
    transition: opacity 0.2s;
}

.project-links a:hover {
    text-decoration: underline;
    opacity: 0.8;
}

.viewer-active #projectLinks {
    display: block;
}

/* 슬라이더 내부에서 링크 박스가 기준이 되도록 설정 */
#slider {
    position: relative;
    overflow: hidden;
    height: calc(100% - 60px);
    display: flex;
    background: #f6f6f6; /* 페이지 배경색과 통일 */
}

/* 링크 박스 디자인: PPT(슬라이더) 내부 하단에 고정 */
.resource-box {
    position: absolute;
    bottom: 20px; /* 바닥에서 약간 띄움 */
    left: 50%;
    transform: translateX(-50%);
    
    padding: 12px 25px;
    background: rgba(255, 255, 255, 0.95); /* 살짝 투명한 흰색 */
    border-radius: 12px;
    border: 1px solid #e2e2e2;
    
    z-index: 100;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: auto; /* 클릭 가능하게 설정 */
}

.resource-box p {
    margin: 0 0 8px 0;
    font-size: 0.85rem;
    color: #666;
    font-weight: 600;
}

.resource-box div {
    display: flex;
    gap: 20px;
}

.resource-box a {
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 5px;
}