@charset "utf-8";

/* ═══════════════════════════════════════════════════
   abc_pair 통합 스킨 스타일
   pairlist (갤러리형) + abc_line (관계도 카드형)
═══════════════════════════════════════════════════ */

/* ─────────────────────────────────────────
   폰트
───────────────────────────────────────── */
@font-face {
    font-family: 'DungGeunMo';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/DungGeunMo.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ─────────────────────────────────────────
   관계도 CSS 변수
───────────────────────────────────────── */
:root {
    --rel-dark-bg:    #121620;
    --rel-glass-bg:   rgba(23, 29, 43, 0.65);
    --rel-glass-card: rgba(34, 42, 62, 0.45);
    --rel-border:     rgba(255, 255, 255, 0.07);
    --rel-border-hover: rgba(255, 255, 255, 0.18);
    --rel-text-glow:  0 0 8px rgba(255, 255, 255, 0.3);
    --rel-blur:       blur(12px);
}

/* ═══════════════════════════════════════════════════
   PAIRLIST 갤러리형 목록
═══════════════════════════════════════════════════ */

#bo_gall { max-width: 1100px; margin: 0 auto; padding: 40px 10px; }

#bo_cate { margin-bottom: 2px; border: none; }
#bo_cate_ul {
    display: flex; flex-wrap: wrap; gap: 6px;
    list-style: none; padding: 0;
}
#bo_cate_ul a {
    display: block; padding: 5px 12px; border-radius: 20px;
    background: #f5f5f5; color: #888; text-decoration: none;
    font-size: 12px; border: 1px solid #eee;
}
#bo_cate_ul #bo_cate_on { background: #333; color: #fff; border-color: #333; }

.bo_gall_top { display: flex; justify-content: flex-end; margin-bottom: 15px; }
.btn_b01 {
    padding: 6px 15px; background: #333; color: #fff !important;
    text-decoration: none; border-radius: 5px; font-size: 12px;
}

#gall_ul {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 70px 25px; list-style: none; padding: 0; margin: 0;
}
.gall_li { width: 100%; }
.gall_box { position: relative; width: 100%; z-index: 1; }

/* 썸네일 영역 */
.gall_img_wrap {
    position: relative; width: 100%; aspect-ratio: 16 / 9;
    border-radius: 15px; background: #f0f0f0; z-index: 10; overflow: visible;
}
.gall_img_inner {
    position: relative; width: 100%; height: 100%; overflow: hidden;
    border-radius: 15px; z-index: 1;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}
.gall_img { display: block; width: 100%; height: 100%; }
.gall_img img {
    display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s;
}
.gall_overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 70%);
    opacity: 0; transition: opacity 0.3s; pointer-events: none; z-index: 2;
}
.gall_box:hover .gall_overlay { opacity: 1; }
.gall_box:hover .gall_img img { transform: scale(1.05); }

/* 제목 */
.bo_tit {
    position: absolute; left: 18px; top: 18px; z-index: 30;
    color: #3a3a3a; font-size: 20px;
    font-family: '물마루', 'DungGeunMo', monospace;
    font-weight: 700; letter-spacing: 0em; pointer-events: none;
    text-shadow:
        -1px -1px 0 rgba(255,255,255,0.95), 1px -1px 0 rgba(255,255,255,0.95),
        -1px  1px 0 rgba(255,255,255,0.95), 1px  1px 0 rgba(255,255,255,0.95),
        0 2px 8px rgba(0,0,0,0.18);
    max-width: calc(100% - 36px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 본문 */
.bo_content {
    position: absolute; right: 18px; bottom: 18px; z-index: 21;
    color: #eee; font-size: 12px; font-family: 'Dotum', '돋움', sans-serif;
    text-align: right; max-width: 55%; opacity: 0; transition: opacity 0.3s;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8); pointer-events: none;
}
.gall_box:hover .bo_content { opacity: 1; }

/* 수정/삭제 버튼 */
.bo_admin_btns {
    position: absolute; top: 15px; right: 15px; z-index: 999; display: flex; gap: 12px;
}
.bo_admin_btns a {
    display: inline-block; color: #fff !important;
    font-size: 18px; font-weight: bold; font-family: 'DungGeunMo', sans-serif;
    text-decoration: none !important; filter: drop-shadow(0 0 4px rgba(0,0,0,1)); cursor: pointer;
}

/* 토큰 */
.mini_thumb {
    position: absolute; left: 0; right: 0; bottom: -15px;
    display: flex; justify-content: center; align-items: flex-end;
    width: 100%; z-index: 1000; pointer-events: none;
}
.mini_thumb .token {
    position: relative; display: inline-block;
    height: clamp(90px, 15vw, 150px); flex: 0 0 auto;
    pointer-events: auto; margin: 0 2px;
}
.mini_thumb .token:nth-last-child(n+4),
.mini_thumb .token:nth-last-child(n+4) ~ .token { margin: 0 -20px !important; }
.mini_thumb .token:nth-last-child(n+5),
.mini_thumb .token:nth-last-child(n+5) ~ .token { margin: 0 -30px !important; }
.mini_thumb .token img {
    height: 100%; width: auto; max-width: 120px;
    object-fit: contain; filter: drop-shadow(0px 5px 8px rgba(0,0,0,0.3));
}
/* 말풍선 */
.mini_thumb .token::after {
    content: attr(data-name); position: absolute; bottom: 105%; left: 50%;
    transform: translateX(-50%); background: var(--bubble-bg, #333); color: #fff;
    padding: 8px 15px; border-radius: 8px; font-size: 14px;
    font-family: 'Pretendard', sans-serif; font-weight: 500; white-space: nowrap;
    opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.1s;
    z-index: 99999; box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.mini_thumb .token::before {
    content: ""; position: absolute; bottom: 98%; left: 50%;
    transform: translateX(-50%); border-width: 10px 8px 0 8px; border-style: solid;
    border-color: var(--bubble-bg, #333) transparent transparent transparent;
    opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.1s; z-index: 99998;
}
.mini_thumb .token:hover::after,
.mini_thumb .token:hover::before { opacity: 1; visibility: visible; }

/* ═══════════════════════════════════════════════════
   관계도 뷰 공통 (abc_line 계열)
═══════════════════════════════════════════════════ */

.rel-board-body { background-color: transparent !important; color: inherit !important; }

.rel-canvas-wrapper {
    position: relative; width: 100%; max-width: 650px; aspect-ratio: 1 / 1; margin: 0 auto;
}

/* 관계 라벨 */
.rel-line-label {
    position: absolute; z-index: 2; transform: translate(-50%, -50%);
    background: rgba(15, 23, 42, 0.85); border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 3px 8px; border-radius: 20px; font-size: 0.78em; color: #f1f5f9;
    white-space: nowrap; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    transition: transform 0.2s ease, border-color 0.2s ease;
}
.rel-line-label:hover { border-color: #38bdf8; transform: translate(-50%, -50%) scale(1.08); }

/* 사이드 프로필 패널 */
.rel-side-panel {
    position: fixed; top: 0; right: -420px; width: 400px; height: 100%;
    background: var(--card-bg-color, #fff);
    border-left: 1px solid var(--card-border-color, #e5e7eb);
    box-shadow: -4px 0 24px rgba(0,0,0,0.12); z-index: 9999;
    transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    padding: 30px; display: flex; flex-direction: column; overflow-y: auto;
}
.rel-side-panel.active { right: 0; }
.rel-panel-close {
    align-self: flex-end; background: transparent; border: 0;
    color: var(--text-muted, #6b7280); font-size: 1.5em; cursor: pointer;
}
.rel-panel-close:hover { color: var(--content-font-color, #1f2937); }
.rel-panel-img {
    width: 100%; aspect-ratio: 1 / 1; border-radius: var(--card-border-radius, 12px);
    object-fit: cover; margin-top: 15px;
    border: 1px solid var(--card-border-color, #e5e7eb); box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.rel-panel-name { font-size: 1.5em; font-weight: 700; margin: 16px 0 4px; color: var(--content-font-color, #1f2937); }
.rel-panel-desc {
    font-size: 0.9em; color: var(--content-font-color, #374151); line-height: 1.7;
    background: var(--container-bg-color, #f9fafb); padding: 12px 14px;
    border-radius: var(--card-border-radius, 8px); border: 1px solid var(--card-border-color, #e5e7eb);
    white-space: pre-wrap;
}
.rel-panel-section-title {
    font-size: 0.75em; font-weight: 700; color: var(--primary-color, #6366f1);
    margin-top: 20px; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.06em;
}
.rel-panel-relations { display: flex; flex-direction: column; gap: 8px; }
.rel-panel-relation-item {
    display: flex; align-items: center; gap: 10px;
    background: var(--container-bg-color, #f9fafb);
    border: 1px solid var(--card-border-color, #e5e7eb);
    padding: 10px 12px; border-radius: var(--card-border-radius, 8px);
    font-size: 0.88em; color: var(--content-font-color, #374151);
}

/* ═══════════════════════════════════════════════════
   모바일
═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
    #bo_gall { padding: 20px 10px; }
    #gall_ul { grid-template-columns: 1fr; gap: 80px 0; justify-items: center; }
    .gall_img { max-width: 100%; height: 100%; margin: 0; }
    .mini_thumb { bottom: -12px; }
    .mini_thumb .token { width: auto; margin: 0 2px; }
    .mini_thumb .token img { max-width: 90px; }
    .mini_thumb .token:nth-last-child(n+4),
    .mini_thumb .token:nth-last-child(n+4) ~ .token { margin: 0 -15px !important; }
    .mini_thumb .token:nth-last-child(n+5),
    .mini_thumb .token:nth-last-child(n+5) ~ .token { margin: 0 -22px !important; }
    .bo_tit { font-size: 16px; }

    .rel-side-panel { width: 100%; right: -100%; }
}

/* ── 비밀글 배지 (관리자 전용) ── */
.gall_secret_badge {
    font-size: 1rem; line-height: 1;
    margin-right: 4px; vertical-align: middle;
    cursor: default;
}