@charset "utf-8";

/* ── 뷰어 전체 레이아웃 ── */
.mb_board_viewer {
    position: relative;
    width: 98%;
    height: 95vh;
    max-height: 980px;
    margin: 0 auto;
    padding: 4px;
    display: block;
    box-sizing: border-box;
    overflow: hidden;
    background: var(--mb-box);
    box-shadow: inset -1px -1px var(--mb-shadow-dark),
                inset 1px 1px var(--mb-shadow-middle-light),
                inset -2px -2px var(--mb-shadow-middle-dark),
                inset 2px 2px var(--mb-shadow-light);
}
.mb_board_viewer:after { content: ""; display: block; clear: both; }
.mb_board_viewer::-webkit-scrollbar,
.mb_board_viewer .body_img::-webkit-scrollbar { display: none; }

/* clear(모바일) 모드 */
.mb_board_viewer.clear .body_img,
.mb_board_viewer.clear .mb_contents {
    float: none;
    width: 90% !important;
    clear: both;
    height: auto;
    right: unset;
    left: 50%;
    translate: -50% 0;
}
.mb_board_viewer.clear .mb_contents { margin: 0 auto 30px; }
.mb_board_viewer.clear .body_img { text-align: center; }

/* ── 배경/그라디언트/전신 ── */
.mb_board_viewer .bg_img {
    position: absolute;
    width: calc(100% - 7px);
    height: calc(100% - 33px);
    overflow: hidden;
    border: 2px groove transparent;
    border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='5' height='5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='gray' d='M0 0h4v1H0z'/%3E%3Cpath fill='gray' d='M0 0h1v4H0z'/%3E%3Cpath fill='%230a0a0a' d='M1 1h2v1H1z'/%3E%3Cpath fill='%230a0a0a' d='M1 1h1v2H1z'/%3E%3Cpath fill='%23fff' d='M0 4h5v1H0z'/%3E%3Cpath fill='%23fff' d='M4 0h1v5H4z'/%3E%3Cpath fill='%23dfdfdf' d='M3 1h1v3H3z'/%3E%3Cpath fill='%23dfdfdf' d='M1 3h3v1H1z'/%3E%3C/svg%3E") 2;
    box-sizing: border-box;
    z-index: 0;
}
#mb_board_gradient {
    position: absolute;
    z-index: 2;
    width: calc(100% - 9px);
    top: 26px;
    bottom: 0;
    margin: 4px 0;
    pointer-events: none;
    background: 
        linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 5%, transparent 7%),
        linear-gradient(to top,    rgba(0,0,0,1) 0%, rgba(0,0,0,1) 17%, transparent 19%);
}

/* 전신 이미지 - % 기반 */
.mb_board_viewer .body_img {
    position: absolute;
    overflow: hidden;
    width: 500px;         
    top: 17%;            /* 160px / 960px */
    height: 650px;       
    z-index: 1;
    left: 10px;
}
.mb_board_viewer .body-img {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
.mb_board_viewer .body-img img {
    cursor: pointer;
    max-height: 100%;
}

/* ── AU/옷장 링크 ── */
#links-box-open { display: none; }
.links-box {
    position: absolute;
    top: 4%;
    left: 15px;
    width: 100%;
    display: block; /* 추가 */
}
.links-box .ui-links { overflow: hidden; padding: 10px; }
.links-box .ui-links ul { display: flex; flex-direction: row; }
.links-box .ui-links li { margin: 3px; }
.links-box .ui-links li::after {
    content: "";
    width: 40px;
    height: 40px;
    border: 1px dashed #a1a1a1;
    z-index: 9;
    display: flex;
    position: relative;
    top: -35px;
    left: 10px;
    pointer-events: none;
}
#rel_link { position: absolute; z-index: 999;}
#rel_link li a.ui-thumb {
    cursor: pointer;
    color: white;
    box-shadow: rgb(145, 145, 145) 0px 0px 0px 2px, rgb(0, 0, 0) 0px 0px 0px 3px;
    margin: 3px;
    width: 40px !important;
    height: 40px !important;
    display: block;
    z-index: 999;
    position: relative;
}
#clo_link { float: right; }
#clo_link li { text-align: right; }

/* ── 대화창 - % 기반 ── */
.mb_board_viewer .mb_contents {
    position: absolute;
    box-sizing: border-box;
    width: 720px !important;   /* 720px 기준 */
    height: 28% !important;  /* 270px / 960px */
    top: 62%;                /* 550px / 960px */
    right: 13%;              /* 180px 기준 */
    z-index: 3;
    background: linear-gradient(180deg, rgba(25, 25, 25, 0.95), rgba(20, 20, 18, 0.95));
    border-image-source: url(img/frame.png);
    border-image-width: 10px 10px 10px 10px;
    border-image-slice: 10 10 10 10;
    background-size: contain;
    background-repeat: no-repeat;
    border-image-repeat: stretch;
    font-family: 'MabinogiClassicR';
    border-radius: 3px;
}
.mb_board_viewer .mb_contents .mb_content-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 20px 50px;
    height: 100%;
    box-sizing: border-box;
}

/* ── 여행 수첩 노트 ── */
#mbng_note {
    box-sizing: border-box;
    top: 12px;
    right: -50px;
    z-index: 4;
    position: absolute;
}
#mbng_note .note_button {
    position: relative;
    background-color: transparent;
    border: 1px solid #595A68;
    color: blue;
    border-radius: 2px;
    font-family: 'MabinogiClassicR';
    font-size: 11px;
    padding: 2px;
    z-index: 999;
}
#mbng_note .note_button:hover { font-weight: bold; }
#mbng_note .note_con {
    position: absolute;
    top: 0;
    color: black;
    padding: 15px 25px;
    max-height: 210px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 0px;
    column-gap: 40px;
    width: 90%;
    align-items: center;
    align-content: space-between;
}
.note_con_btn {
    margin-bottom: 5px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 125px;
}
.note_btn_sub { font-size: 11px; }

/* clear 모드 노트 */
.clear #mbng_note {
    background: linear-gradient(180deg, rgba(25, 25, 25, 0.9), rgba(20, 20, 18, 0.9));
    border: 1px solid black;
    width: 300px;
    height: 100px;
    right: 0;
    top: -110px;
}
.clear #mbng_note .note_con { box-sizing: border-box; width: 100%; height: 100%; }
.clear #mbng_note img { display: none; }
.clear #mbng_note .note_button { color: white; }
.clear #mbng_note .note_btn_sub { display: none; }

/* ── 페이지 네비 ── */
/* 기본 (데스크탑) */

#pageNav {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 20px);
    height: 100%;
    pointer-events: none;
}

#pageNav .page_btn {
    position: absolute;
    top: 0;
    height: 100%;
    width: 50%;
    background-color: transparent;
    border: 1px solid transparent;
    z-index: 5;
    color: transparent;
    pointer-events: all;
}

#pageNav .page_btn:first-child { left: 0; }   /* mbng_note 왼쪽 절반 */
#pageNav .page_btn:last-child  { right: 0; }  /* mbng_note 오른쪽 절반 */

#pageNav_total {
    position: absolute;
    bottom: 20px;
    right: 55px;
    top: unset;
    z-index: 6;
    pointer-events: none;
}

/* 모바일 (clear 모드) — 기존 유지 */
.clear #pageNav_total { top: unset; bottom: 5px; right: 30px; color: white; }
.clear #pageNav { width: 100%; height: 100%; }
.clear #pageNav .page_btn {
    position: absolute;
    width: 30px;
    top: unset;
    bottom: -5px;
    height: 30px;
    pointer-events: all;
}
.clear #pageNav .page_btn:first-child { right: 40px; }
.clear #pageNav .page_btn:first-child::before { content: '<'; color: white; }
.clear #pageNav .page_btn:last-child { right: 0; }
.clear #pageNav .page_btn:last-child::before { content: '>'; color: white; }
.clear #pageNav .page_btn:first-child:hover::before,
.clear #pageNav .page_btn:last-child:hover::before { font-weight: bold; }

/* ── 대화창 텍스트 영역 ── */
#mbng_name {
    color: white;
    font-size: 12px !important;
    padding: 5px 0 10px 0;
}
#mbng_con {
    padding: 0;
    font-size: 11px;
    width: 53%;
    max-height: 150px;
    overflow: auto;
    -ms-overflow-style: none;
    font-weight: 100;
    color: white;
    height: 100%;
}
#mbng_con::-webkit-scrollbar { display: none; }
.pausePrinter, .contentPrinter { height: 100%; }

/* ── 대화 버튼 ── */
.con_btns {
    display: flex;
    height: 46px;
    align-items: center;
    margin-top: 7px;
    position: absolute;
    bottom: 20px;
    width: 53%;   /* calc(100% - 100px) → mbng_con과 동일하게 */
    z-index: 10;    
}

.clear .con_btns {
    flex-wrap: wrap;
    height: unset;
    bottom: 6px;
    position: relative; /* 추가 */
    z-index: 10;        /* 추가 */
    width: 100% !important;  /* clear 모드에서는 mbng_con도 100%이므로 */
}

.con_btn {
    box-shadow: inset -1px -1px 1px #212121, inset 1px 1px 1px #4C4C4C,
                inset -2px -2px 1px #353535, inset 2px 2px 1px #4C4C4C;
    background-color: #3C3C3C;
    font-family: 'MabinogiClassicR';
    font-size: 11px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    cursor: pointer;
    margin: 3px;
    border-radius: 2px;
    color: white;
    z-index: 10;
}
.con_btn:hover {
    box-shadow: inset -1px -1px #3F3F3F, inset 1px 1px #5D5D5D,
                inset -2px -2px #3d3d3d, inset 2px 2px #5D5D5D;
    background-color: #4B4B4B;
}
.con_btn:active {
    box-shadow: inset -1px -1px 1px #4C4C4C, inset 1px 1px 1px #212121,
                inset -2px -2px 1px #353535, inset 2px 2px 1px #212121;
    background-color: #353535;
}
.con_btn.q_btn { height: unset; min-height: 18px; width: unset; min-width: 60px; padding: 3px 10px; z-index: 10; }

/* ── 하단 버튼 ── */
#mbng_bot {
    padding: 15px;
    z-index: 3;
    position: relative;
    float: right;
}
#mbng_bot .mbng_btn {
    margin-bottom: 2px;
    box-shadow: inset -1px -1px #212121, inset 1px 1px #4C4C4C,
                inset -2px -2px #353535, inset 2px 2px #4C4C4C;
    border: 1px;
    background-color: #3C3C3C;
    font-family: 'MabinogiClassicR';
    font-size: 11px;
    cursor: pointer;
}
#mbng_bot .mbng_btn:active {
    box-shadow: inset -1px -1px #4C4C4C, inset 1px 1px #212121,
                inset -2px -2px #353535, inset 2px 2px #212121;
    background-color: #353535;
}
.clear #mbng_bot .mbng_com a { padding: 0 10px; min-width: 50px; }
.clear #mb_board_gradient { background-size: contain; }

/* ── 코멘트 ── */
.mb_board_comment-view { position: relative; clear: both; overflow: hidden; }
p.add { margin: 10px 0; }
p.add.txt-left { float: left; }
p.add.txt-right { float: right; }
p.add a { display: inline-block; }
#bo_vc_w { clear: both; }
.co-content { text-align: right; }

.mb_board_comment-list { position: relative; clear: both; }
.mb_board_comment-list .item { position: relative; margin-bottom: 5px; }
.mb_board_comment-list strong { display: block; margin: 20px 0 5px; }
.mb_board_comment-list .co-content { box-sizing: border-box; padding-right: 50px; padding-bottom: 5px; }
.mb_board_comment-list .co-content .co-inner { text-align: left; }
.mb_board_comment-list .co-info { position: absolute; width: 50px; top: 0; right: 0; }
.mb_board_comment-list .co-content .mbng_btn { padding: 0 8px; margin: 0 2px; }

.mb_board_comment-form { position: relative; padding-right: 80px; }
.mb_board_comment-form .btn_confirm { position: absolute; top: 0; right: 0; bottom: 0; width: 80px; }
.mb_board_comment-form .btn_confirm .mbng_btn { width: 100%; height: 100%; }
.mb_board_comment-form p { margin: 0; padding: 5px 10px; }

/* ── 기타 ── */
.next_btn { position: absolute; width: 100%; height: 100%; top: 0; left: 0; cursor: pointer !important; }
.con_question { position: absolute; bottom: 20px; }



/* ── 아이패드 전용 con_btns 히트영역 강제 수정 ── */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) {

    /* mb_contents 내부를 flex 컬럼으로 재구성 */
    .mb_board_viewer .mb_contents .mb_content-wrap {
        display: flex;
        flex-direction: column;
    }

    /* mbng_con이 남는 공간만 차지하고, con_btns 영역은 침범 못하게 */
    #mbng_con {
        position: relative;
        flex: 1 1 auto;
        height: auto !important;
        max-height: none !important;
        overflow-y: auto;
        margin-bottom: 8px;
        z-index: 1 !important;
        pointer-events: auto;
    }

    /* con_btns를 absolute에서 꺼내 일반 흐름에 배치 */
    .con_btns {
        position: relative !important;
        bottom: auto !important;
        margin-top: auto;
        flex-shrink: 0;
        width: 100% !important;
        z-index: 20;
    }

    .con_btn,
    .con_btn.q_btn {
        position: relative;
        z-index: 999 !important;
        pointer-events: auto !important;
        /* transform 관련 줄 전부 삭제 */
        cursor: pointer;
        -webkit-tap-highlight-color: rgba(255,255,255,0.2);
    }

    .contentPrinter, .pausePrinter {
        z-index: 1 !important;
        pointer-events: none !important; /* 클릭 이벤트를 con_btns로 통과 */
    }

    #mbng_con::after {
        content: none !important;
    }
}


/* ── 반응형 ── */
@media all and (max-width: 640px) {
    .mb_board_viewer .body_img,
    .mb_board_viewer .contents { width: 100%; float: none; clear: both; }
    .mb_board_viewer .body_img { text-align: center; }
    #links-box-open { display: block; margin: 10px auto; opacity: 0.7; }
    .links-box { position: relative; top: auto; overflow: hidden; display: none; }
    .links-box .ui-links li { font-size: 13px; }
}