/* 

1. Add your custom Css styles below
2. Place the this code in your template: 

 <link href="css/custom.css" rel="stylesheet">

*/

.heading-text h2 {
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 100;
}

.text-gothic-a1-bold {
    font-family: 'Nanum Gothic', sans-serif;
    font-weight: 600;
}

.text-gothic-a1 {
    font-family: 'Nanum Gothic', sans-serif;
    font-weight: 400;
}

.text-serif-bold {
    font-family: 'Noto Serif KR', serif;
    font-weight: 400;
    /*letter-spacing:-3px;*/
}

.text-serif {
    font-family: 'Noto Serif KR', serif;
    font-weight: 400;
}

.text-serif-en {
    font-family: 'Noto Serif KR', serif;
    font-weight: 200;
    letter-spacing: -0.5px;
}

.text-sans-bold {
    font-family: 'Noto Sans KR', sans-serif !important;
    font-weight: 700 !important;
    text-transform: none !important;
}

.text-sans {
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 400;
}

.text-sans-light {
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 300;
}

.m-t-14 {
    margin-top: 13px !important;
}

.space-half {
    width: 100%;
    display: block;
    clear: both;
    height: 40px;
    position: relative;
}

.btn.btn-2xs {
    border: 1px solid rgba(0, 0, 0, .125);

    font-size: 9px;
    padding-left: 5px;
    padding-right: 5px;
}

.btn.btn-light2 {
    border: 1px solid rgba(0, 0, 0, .125);
}

.imgbox {
    position: relative;
}

.inbtn {
    position: absolute;
    right: 20px;
    top: 15px;
    background-color: #fff;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.in-add-btn {
    position: absolute;
    right: 105px;
    bottom: 130px;
}

.inbtn-expand-btn-mypage {
    position: absolute;
    right: 10px;
    bottom: 20px;
}

.inbtn-preview-close {
    position: absolute;
    right: 0;
    bottom: 530px;
}

.inbtn-expand-btn-book {
    position: absolute;
    right: 20px;
    bottom: 15px;
    background-color: #fff;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.in-add-btn-bottom {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
}

/* 시프트(밀기/당기기) 버튼 — 선택된 페이지에만 표시. 이미지 상/하단 중앙. */
.shift-up-btn,
.shift-down-btn {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
.shift-up-btn { top: 15px; }
.shift-down-btn { bottom: 15px; }

/* 시프트 모드로 선택된 슬롯 강조 — 안쪽 두꺼운 보더 + 외곽 글로우 */
.shift-selected {
    outline: 4px solid #0d6efd;
    outline-offset: -2px;
    box-shadow: 0 0 12px rgba(13, 110, 253, 0.6);
}
.shift-selected img.img-thumbnail {
    opacity: 0.92;
}

.page-no-overlay {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.75rem;
    font-weight: 600;
    color: #888;
    pointer-events: none;
}

/* 빈 슬롯에만 표시 — P 번호(top 60%) 바로 위에 위치. P 번호 위치는 그대로 유지. */
.empty-page-overlay {
    position: absolute;
    top: 38%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.2rem;
    font-weight: 600;
    color: #888;
    pointer-events: none;
}

/* 고정 페이지(타이틀/판권)의 '(고정)' 라벨 — P 번호(top 60%) 아래 대칭 위치(82%).
   비어있음(empty-page-overlay)과 폰트 크기·여백을 동일하게 맞춘다. */
.fixed-page-label {
    position: absolute;
    top: 82%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.2rem;
    font-weight: 600;
    color: #888;
    pointer-events: none;
}

/* 빈 페이지(blank.png 정사각형)와 채워진 페이지(썸네일 세로형)의 종횡비가 달라
   같은 행 안에서 셀 높이가 어긋나며 행 간격이 불균일해 보이는 문제를 해결한다.
   padding-top 트릭으로 imgbox 자체에 5:7 종횡비를 강제하고 이미지를 absolute로
   imgbox를 가득 채운다. 이렇게 하면 blank.png든 썸네일이든 동일한 시각 높이가 된다. */
.bookpagelist-grid .imgbox {
    position: relative;
    height: 0;
    /* padding-top %는 컨테이너(row) 폭 기준이다. col-lg-6은 row 폭의 50%이므로
       자기 폭의 140%(5:7 비율) = row 폭의 70%. */
    padding-top: 70%;
    padding-bottom: 0 !important;
    overflow: visible;
    margin-bottom: 0.5rem;
}

.bookpagelist-grid .imgbox img.img-thumbnail {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}