@charset "UTF-8";

/* [1. 초기화 및 기본 설정] */
* { 
    box-sizing: border-box; 
    border-radius: 0 !important; 
} 

@font-face {
    font-family: 'RIDIBatang';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.0/RIDIBatang.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body { 
    scroll-behavior: smooth; 
    font-family: '돋움', Dotum, sans-serif;
    font-size: 11px; 
    line-height: 1.5; 
    padding: 0; margin: 0; 
    color: #000;
    overflow: hidden; 
    -webkit-font-smoothing: none;
    font-smooth: never;
    text-rendering: optimizeSpeed;
}

body, a, span, div, p, li, h1, h2, h3 { font-weight: normal !important; }
.fa, .fas, .far, .fab, .xi2, .xi-base, 
[class^="fa-"], [class*=" fa-"], [class^="xi-"], [class*=" xi-"] { 
    font-family: "Font Awesome 5 Free", "xeicon" !important; 
    font-weight: 900 !important; 
}

a { text-decoration: none; color: inherit; }
ul, li, ol { list-style: none; padding: 0; margin: 0; }

img { 
    vertical-align: bottom; 
    max-width: 100% !important; 
    width: auto !important;    
    height: auto !important;
    -webkit-user-drag: none; 
    user-select: none; 
    border: none; 
    display: block;            
}

* { cursor: url(./images/cur.cur), auto; }
textarea { resize: none; outline: none; }
input:focus { outline: none; }

/* [2. 레이아웃 구조] */
#whole { 
    width: 100%; height: 100vh; display: flex; overflow: hidden;
    align-items: center; justify-content: center; position: relative;
    background-repeat: no-repeat; background-attachment: fixed; 
    background-size: cover; background-position: center;
}

#sidebar { margin-right: 50px; position: relative; z-index: 1000; }
#container { margin-left: 50px; position: relative; overflow: hidden; }
.s-container, .c-container { margin: auto; position: relative; }

.wrap { 
    width: 100%; height: 100%; overflow-y: auto; overflow-x: hidden; 
    display: block; -webkit-overflow-scrolling: touch; 
    padding: 20px; 
}

.blog-img { width: 100%; height: 100%; overflow: hidden; position: relative; }
.blog-img img { width: 100% !important; height: 100% !important; object-fit: cover; }

/* 사이드바 페이드인 네모 박스 스타일 */
.cate { 
    opacity: 0; visibility: hidden; pointer-events: none;
    position: absolute; top: 25%; left: 25%; width: 50%; height: 50%; 
    z-index: 100; padding: 15px; box-sizing: border-box; text-align: center;
    transition: opacity 0.8s ease-in-out, visibility 0.8s;
    background: rgba(255, 255, 255, 0.9); 
    border: 1px solid #ddd; 
    display: flex; flex-direction: column; justify-content: center; align-items: center;
}
.s-container:hover .cate { opacity: 0.95 !important; visibility: visible; pointer-events: auto; }
.b-title { font-size: 11px; margin-bottom: 15px; }
.category { font-size: 11px; line-height: 1.8; width: 100%; }
.menu { display: flex; justify-content: center; position: absolute; width: 100%; bottom: 12px; left: 0; }
.menu li { margin: 0 5px; }

/* [3. 게시판 출력 모드 제어] */
.mode-special .article { display: none !important; }
.mode-general .list-name { display: none !important; }

.category-name { text-align: center; margin: 40px 0 !important; font-size: 12px; }
.list-wrap { border: none !important; padding: 10px 0; margin-bottom: 15px; background: transparent; }

/* [4. 특수 게시판 상세 스타일] */
#list-memo .list-link, #list-playlist .list-link, 
#list-view-only .list-link, #list-grid .list-link { 
    cursor: default !important; 
    pointer-events: none; 
}
#list-playlist .video-container, #list-memo .summary-desc, .mode-special .paging {
    pointer-events: auto !important;
}

#list-minimal .list-td { display: flex !important; justify-content: space-between; align-items: center; border-bottom: 1px solid #f2f2f2; padding: 10px 0; }
#list-minimal .summary, #list-minimal .thumbnail { display: none !important; }

#list-grid .list-inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
#list-grid .list-td, #list-grid .summary { display: none !important; }
#list-grid .thumbnail { display: block !important; aspect-ratio: 1 / 1; overflow: hidden; }
#list-grid .thumbnail img { width: 100% !important; height: 100% !important; object-fit: cover; }

#list-view-only .list-inner { display: block; width: 100%; }
#list-view-only .list-td, #list-view-only .summary { display: none !important; }
#list-view-only .thumbnail { display: block !important; width: 100%; margin-bottom: 30px; }
#list-view-only .thumbnail img { width: 100% !important; height: auto !important; }

#list-memo .list-td { display: flex !important; border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
#list-memo .list-title { display: none !important; }
#list-memo .list-date { width: 100%; text-align: right; margin: 0 0 5px 0; font-size: 10px; color: #aaa; }
#list-memo .thumbnail { display: none !important; }
#list-memo .summary { display: block !important; padding: 25px; background: rgba(0,0,0,0.03); }
#list-memo .summary-desc { display: block !important; -webkit-line-clamp: unset !important; color: #333; line-height: 1.6; }

#list-playlist .list-td, #list-playlist .thumbnail { display: none !important; }
#list-playlist .summary { display: block !important; margin-bottom: 20px; }
#list-playlist .summary-desc { display: none !important; }
#list-playlist .video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
#list-playlist .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:none; }

/* [5. 일반 게시판 및 보호글 스타일] */
.article { display: block !important; margin-top: 20px; padding-bottom: 100px; }
.article-title { font-size: 15px !important; text-align: center; margin-bottom: 15px; }
.article-date { font-size: 11px; color: #999; text-align: center; margin-bottom: 30px; display: block; }
.article-desc { font-size: 11px; line-height: 1.8; padding: 0 10px; }

.article-desc img, .c-desc img {
    margin: 15px auto !important; 
    max-width: 100% !important;  
    width: auto !important;      
    height: auto !important;
}

/* [보호글 게이트] */
.protected-gate {
    text-align: left;
    max-width: 280px;
    margin: 40px auto;
    border: 1px solid #999;
    background: #f7f7f7;
    position: relative;
    z-index: 9999;
}
.protected-bar {
    background: #000;
    color: #fff;
    font-size: 10px;
    letter-spacing: 3px;
    text-align: center;
    padding: 4px 8px;
}
.protected-text {
    font-size: 11px;
    line-height: 1.5;
    padding: 12px 10px 10px;
    color: #555;
    text-align: center;
    border-bottom: 1px dashed #ccc;
}
.protected-row {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px;
}
.protected-row label {
    font-size: 10px;
    color: #888;
    letter-spacing: 1px;
}
.protected-gate input[type="password"] {
    flex: 1;
    min-width: 0;
    padding: 4px 6px;
    border: 1px solid #999;
    background: #fff;
    font-size: 11px;
    outline: none;
}
.protected-btn {
    flex-shrink: 0;
    padding: 4px 10px;
    background: #000;
    color: #fff;
    border: none;
    font-size: 10px;
    letter-spacing: 1px;
    cursor: pointer;
}
.protected-btn:hover { opacity: 0.7; }

/* [6. 방명록(Guestbook) 디자인] */


#guestbook {
    padding: 0 10px;
    margin-top: 20px;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative;
    z-index: 9999;
}
.guest-write {
    margin-bottom: 20px;
    border: 1px solid #999;
    background: #f7f7f7;
    padding: 8px;
}
.guest-form-top {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
    align-items: center;
}
.guest-form-top input[type="text"], 
.guest-form-top input[type="password"] {
    border: 1px solid #999;
    background: #fff;
    padding: 3px 6px;
    font-size: 11px;
    width: 90px;
}
.guest-secret {
    margin-left: auto;
    font-size: 10px;
    color: #666;
}
.guest-secret input { vertical-align: middle; }
.guest-write textarea {
    width: 100%;
    height: 46px;
    border: 1px solid #999;
    background: #fff;
    padding: 5px 6px;
    font-size: 11px;
    line-height: 1.4;
    margin-bottom: 6px;
}
.guest-submit { text-align: right; }
.guest-submit button {
    border: 1px solid #666 !important;
    padding: 2px 14px;
    font-size: 10px;
    letter-spacing: 1px;
    cursor: pointer;
    background: #ddd;
}
.guest-submit button:hover { background: #000; color: #fff; }

.guest-list ol { list-style: none; padding: 0; }
.guest-item {
    padding: 6px 4px;
    border-bottom: 1px dashed #ccc;
}
.guest-item.reply {
    padding: 5px 8px;
    border-bottom: none;
    border-left: 2px solid #999;
    margin-left: 8px;
    margin-top: 4px;
    background: #ececec;
}
.guest-info {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
}
.guest-name { font-size: 11px; color: #333; }
.guest-name::before { content: "▶ "; font-size: 8px; color: #aaa; }
.guest-date { font-size: 9px; color: #aaa; }
.guest-ctrl { margin-left: auto; display: flex; gap: 6px; }
.guest-ctrl a { font-size: 9px; color: #bbb; }
.guest-ctrl a:hover { color: #333; }
.guest-desc {
    font-size: 11px;
    line-height: 1.4;
    color: #555;
    word-break: break-all;
    padding-left: 13px;
}

/* [7. 기타 시스템 요소] */
.container_postbtn {
    visibility: hidden !important; opacity: 0 !important;
    height: 0 !important; margin: 0 !important; padding: 0 !important;
    overflow: hidden !important; pointer-events: none !important;
}
.paging { z-index: 999; display: block; text-align: center; margin: 40px 0; }
::selection { background-color: #aeaeae; color: #fff; }

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background-color: transparent; }
::-webkit-scrollbar-thumb { background-color: #000; }

/* 입장 게이트 배경 및 위치 정상화 (100vh) */
#blog_gate {
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh; 
    background: #000000 !important; 
    z-index: 100000; 
    display: flex; align-items: center; justify-content: center; flex-direction: column; 
    font-family: '돋움', sans-serif; transition: opacity 0.8s ease-in-out, visibility 0.8s;
}

@media (max-width: 800px) {
    #whole { height: auto; flex-direction: column; overflow: visible; padding: 20px 0; }
    #sidebar, #container { margin: 0; width: 92%; }
    #sidebar { margin-bottom: 40px; }
    .cate { width: 80%; height: 80%; top: 10%; left: 10%; }
}

.category-name { display: none !important; }

#list-memo, #list-memo * {
    -webkit-user-drag: none !important; 
    user-drag: none !important;
}

ul.tt_category > li > a { display: none; }

.summary-desc {
    white-space: pre-line !important; 
    word-break: break-all !important;  
    overflow-wrap: break-word !important;
}