@charset "utf-8";

/* ============================
   pair_list_ra0 통합 스킨
   ============================ */

:root {
    --pair-accent:       #b89dca;
    --pair-accent-dark:  #9378b0;
    --pair-accent-light: #f3edf8;
    --pair-card-bg:      #fff;
    --pair-card-border:  #e8dff0;
    --pair-card-shadow:  rgba(184,157,202,0.15);
    --pair-name-color:   #5a3e6e;
    --pair-desc-color:   #888;
    --pair-hover-shadow: rgba(184,157,202,0.40);
    --pair-text:         #3a2a4a;
    --pair-text-sub:     #7a6a8a;
}

/* ============================
   목록 (list.skin.php)
   ============================ */

#pair_list_wrap {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px 10px 40px;
}

.pair-admin-btn { text-align: right; margin-bottom: 16px; }

.pair-card-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    justify-content: center;
}

.pair-card {
    display: block;
    width: 220px;
    background: var(--pair-card-bg);
    border: 1px solid var(--pair-card-border);
    border-radius: 16px;
    box-shadow: 0 4px 16px var(--pair-card-shadow);
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.pair-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 28px var(--pair-hover-shadow);
}

.pair-card-img {
    width: 100%;
    aspect-ratio: 3/4;
    overflow: hidden;
    background: var(--pair-accent-light);
}
.pair-card-img img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform 0.3s;
}
.pair-card:hover .pair-card-img img { transform: scale(1.04); }
.pair-card-no-img {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: var(--pair-accent); font-size: 13px; letter-spacing: 0.1em;
}

.pair-card-info { padding: 14px 16px 18px; text-align: center; }
.pair-card-name { font-size: 16px; font-weight: bold; color: var(--pair-name-color); margin: 0 0 6px; }
.pair-card-desc {
    font-size: 12px; color: var(--pair-desc-color);
    line-height: 1.6; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
}
.pair-empty { text-align: center; color: var(--pair-desc-color); padding: 60px 0; width: 100%; }

/* ============================
   소개 페이지 (view.skin.php)
   ============================ */

.pv-wrap {
    max-width: 960px;
    margin: 0 auto;
    padding: 30px 16px 60px;
    font-family: 'Noto Sans KR', 'Malgun Gothic', sans-serif;
}

.pv-title {
    font-size: 26px; font-weight: 700;
    color: var(--pair-text); margin: 0 0 24px;
    letter-spacing: 0.05em;
}

.pv-body {
    display: flex;
    gap: 28px;
    align-items: stretch;   /* 좌우 높이 맞춤 */
}

/* 좌측 */
.pv-left {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 18px;
}

/* 캐릭터 프로필 카드 */
.pv-chars { display: grid; gap: 12px; }
.pv-chars-1 { grid-template-columns: 1fr; }
.pv-chars-2 { grid-template-columns: 1fr 1fr; }
.pv-chars-3 { grid-template-columns: 1fr 1fr 1fr; }
.pv-chars-4 { grid-template-columns: 1fr 1fr; }

.pv-char-card {
    background: var(--pair-card-bg);
    border: 1px solid var(--pair-card-border);
    border-radius: 12px;
    padding: 12px 14px 14px;
    box-shadow: 0 2px 8px var(--pair-card-shadow);
}

.pv-char-card {
    --card-accent: var(--pair-accent);
    --card-light: var(--pair-accent-light);
    --card-border: var(--pair-card-border);
    border-color: var(--card-border) !important;
    background: var(--card-light) !important;
}
.pv-catch {
    font-size: 11px; font-style: italic;
    color: var(--card-accent); text-align: center;
    margin: 0 0 4px; line-height: 1.5;
}
.pv-code {
    font-size: 13px; font-weight: 900;
    letter-spacing: 0.12em; color: var(--pair-text);
    text-align: center; margin: 0 0 2px;
}
.pv-char-name {
    font-size: 13px; font-weight: 700;
    color: var(--pair-name-color); text-align: center;
    padding-bottom: 6px; margin-bottom: 6px;
    border-bottom: 1px solid var(--card-border);
}
.pv-origin {
    font-size: 10px; color: #bbb;
    text-align: center; margin: 0 0 6px;
    letter-spacing: 0.05em;
}
.pv-info-list { list-style: none; margin: 0; padding: 0; }
.pv-info-list li {
    display: flex; gap: 6px;
    font-size: 11px; color: var(--pair-text); line-height: 1.8;
}
.pv-info-list li span {
    flex-shrink: 0; min-width: 28px;
    color: var(--card-accent); font-weight: 700; font-size: 10px;
}
.pv-info-list li span::after { content: "·"; margin-left: 2px; }
.pv-etc { color: var(--pair-text-sub) !important; }

/* 바로가기 버튼 */
.pv-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.pv-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 76px; height: 76px; border-radius: 50%;
    background: var(--pair-accent-light);
    border: 2px solid var(--pair-card-border);
    color: var(--pair-name-color); font-size: 12px; font-weight: 600;
    text-decoration: none; text-align: center;
    transition: all 0.2s; word-break: keep-all; padding: 8px; line-height: 1.4;
}
.pv-btn:hover {
    background: var(--pair-accent); border-color: var(--pair-accent-dark);
    color: #fff; transform: translateY(-3px);
}

/* 플레이리스트 자리 */
.pv-playlist-area {
    width: 100%; min-height: 60px;
    border: 2px dashed var(--pair-card-border);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
}
.pv-playlist-placeholder { font-size: 12px; color: #ccc; letter-spacing: 0.05em; }

/* 갤러리 */
.pv-gallery { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; }
.pv-gallery-item {
    display: block; aspect-ratio: 1;
    overflow: hidden; border-radius: 8px;
    border: 1px solid var(--pair-card-border);
}
.pv-gallery-item img {
    width: 100%; height: 100%;
    object-fit: cover; display: block; transition: transform 0.25s;
}
.pv-gallery-item:hover img { transform: scale(1.06); }

/* 우측 이미지 영역 */
.pv-right {
    width: 40%;
    min-width: 280px;
    max-width: 500px;
    flex-shrink: 0;
    position: sticky; top: 20px;
}

/* 전신/SD: 하단 정렬, 고정 높이 컨테이너 */
.pv-fullbody-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;     /* 정사각형 비율 */
    max-height: 80vw;         /* 화면 너비에 맞게 */
    overflow: hidden;
}

/* 공통: 모든 이미지를 절대위치 하단 정렬 */
.pv-fullbody-img {
    position: absolute;
    bottom: 0;
    overflow: hidden;
}

.pv-fullbody-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;      /* 잘리지 않게 전체 보임 */
    object-position: bottom center;
    display: block;
}

/* 1명 */
.pv-count-1 .pv-fullbody-img {
    width: 100%; height: 100%; left: 0; right: 0;
}

/* 2명: 살짝 겹치며 하단 정렬 */
.pv-count-2 .pv-fullbody-img { width: 65%; height: 100%; }
.pv-count-2 .pv-img-0 { left: 0;   z-index: 2; }
.pv-count-2 .pv-img-1 { right: 0;  z-index: 1; }

/* 3명 */
.pv-count-3 .pv-fullbody-img { width: 58%; height: 100%; }
.pv-count-3 .pv-img-0 { left: 0; z-index: 3; }
.pv-count-3 .pv-img-1 { left: 50%; transform: translateX(-50%); z-index: 2; }
.pv-count-3 .pv-img-2 { right: 0; z-index: 1; }

/* 4명 */
.pv-count-4 .pv-fullbody-img { width: 55%; height: 100%; }
.pv-count-4 .pv-img-0 { left: 0;   z-index: 4; }
.pv-count-4 .pv-img-1 { left: 18%; z-index: 3; }
.pv-count-4 .pv-img-2 { left: 36%; z-index: 2; }
.pv-count-4 .pv-img-3 { right: 0;  z-index: 1; }

/* 두상: 학생증 카드 */
.pv-idcard-wrap {
    display: flex; flex-direction: column; gap: 16px;
}
.pv-idcard {
    background: var(--pair-card-bg);
    border: 1px solid var(--pair-card-border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 16px var(--pair-card-shadow);
}
.pv-idcard {
    --ic-color: var(--pair-accent);
    --ic-light: var(--pair-accent-light);
}
.pv-idcard-header {
    background: var(--ic-color);
    color: #fff; font-size: 11px;
    font-weight: 700; letter-spacing: 0.2em;
    padding: 6px 14px; text-align: center;
}
.pv-idcard-body {
    display: flex; gap: 12px; padding: 12px;
}
.pv-idcard-photo {
    width: 80px; height: 100px; flex-shrink: 0;
    border-radius: 6px; overflow: hidden;
    border: 1px solid rgba(0,0,0,0.08);
    background: var(--ic-light);
}
.pv-idcard-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-idcard-info { flex: 1; }
.pv-idcard-name {
    font-size: 14px; font-weight: 700;
    color: var(--pair-text); margin: 0 0 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--ic-color);
}
.pv-idcard-info p {
    font-size: 11px; color: var(--pair-text-sub);
    margin: 2px 0; display: flex; gap: 6px;
}
.pv-idcard-info p span {
    font-size: 10px; color: var(--ic-color);
    font-weight: 700; flex-shrink: 0;
}
.pv-idcard-info p span::after { content: "·"; margin-left: 2px; }

.pv-no-img {
    width: 100%; aspect-ratio: 3/4;
    background: var(--pair-accent-light); border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    color: var(--pair-accent); font-size: 13px;
}

/* 관리자 바 */
.pv-admin-bar { margin-top: 20px; text-align: right; font-size: 12px; }
.pv-admin-bar a {
    margin-left: 8px; color: var(--pair-accent-dark);
    text-decoration: none; border: 1px solid var(--pair-card-border);
    padding: 4px 10px; border-radius: 6px;
}
.pv-admin-bar a:hover { background: var(--pair-accent-light); }

/* ============================
   글쓰기 (write.skin.php)
   ============================ */
.pair-write-table { width:100%; max-width:700px; margin:30px auto; border-collapse:collapse; }
.pair-section-th { background:#ede0f5; color:#5a3e6e; padding:10px 12px; font-size:13px; text-align:left; }
.pair-write-table th { width:140px; padding:12px; background:var(--pair-accent-light); color:var(--pair-name-color); font-size:13px; text-align:left; border-bottom:1px solid var(--pair-card-border); vertical-align:top; }
.pair-write-table td { padding:10px 12px; border-bottom:1px solid var(--pair-card-border); }
.pair-input { width:100%; padding:8px 10px; border:1px solid var(--pair-card-border); border-radius:8px; font-size:13px; box-sizing:border-box; }
.pair-textarea { width:100%; padding:8px 10px; border:1px solid var(--pair-card-border); border-radius:8px; font-size:12px; height:80px; resize:vertical; box-sizing:border-box; font-family:inherit; }
.pair-write-btn { text-align:center; margin-top:24px; display:flex; justify-content:center; align-items:center; gap:10px; }
.pair-btn-submit { padding:10px 32px; background:var(--pair-accent); color:#fff; border:none; border-radius:20px; cursor:pointer; font-size:14px; }
.pair-btn-submit:hover { background:var(--pair-accent-dark); }
.pair-btn-delete { padding:10px 20px; background:#f0e0e0; color:#c06060; border-radius:20px; font-size:14px; text-decoration:none; }
.pair-btn-cancel { padding:10px 20px; color:#aaa; font-size:14px; text-decoration:none; }

/* ============================
   반응형
   ============================ */
@media (max-width: 700px) {
    .pv-body { flex-direction: column-reverse; }
    .pv-right { width: 100%; position: static; }
    .pv-fullbody-wrap.pv-count-2 { min-height: 280px; }
    .pv-chars-3, .pv-chars-4 { grid-template-columns: 1fr 1fr; }
    .pv-title { font-size: 20px; }
    .pv-gallery { grid-template-columns: repeat(4,1fr); }
}
@media (max-width: 400px) {
    .pv-chars-2, .pv-chars-3, .pv-chars-4 { grid-template-columns: 1fr; }
    .pv-gallery { grid-template-columns: repeat(2,1fr); }
    .pair-card { width: calc(50% - 14px); min-width: 140px; }
}

/* ============================
   댓글 기반 갤러리
   ============================ */

.pv-gallery-outer {
    width: 100%;
}

.pv-gallery-section {
    width: 100%;
}

.pv-gallery-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.pv-gallery-count {
    font-size: 12px;
    color: var(--pair-text-sub);
}

.pv-gallery-add-btn {
    padding: 5px 14px;
    background: var(--pair-accent-light);
    border: 1px solid var(--pair-card-border);
    border-radius: 20px;
    color: var(--pair-name-color);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}
.pv-gallery-add-btn:hover {
    background: var(--pair-accent);
    color: #fff;
    border-color: var(--pair-accent);
}

/* 업로드 폼 */
.pv-gallery-form {
    background: var(--pair-accent-light);
    border: 1px dashed var(--pair-card-border);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 12px;
}

.pv-gform-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.pv-gform-file-input { display: none; }

.pv-gform-file-btn {
    display: inline-block;
    padding: 8px 20px;
    background: #fff;
    border: 1px solid var(--pair-card-border);
    border-radius: 20px;
    font-size: 13px;
    color: var(--pair-name-color);
    cursor: pointer;
    transition: all 0.2s;
}
.pv-gform-file-label:hover .pv-gform-file-btn {
    background: var(--pair-accent);
    color: #fff;
}

.pv-gform-preview {
    max-width: 120px;
    max-height: 120px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid var(--pair-card-border);
}

.pv-gform-btns { display: flex; gap: 8px; }

.pv-gform-submit {
    padding: 6px 20px;
    background: var(--pair-accent);
    color: #fff; border: none;
    border-radius: 16px; cursor: pointer;
    font-size: 12px;
}
.pv-gform-submit:hover { background: var(--pair-accent-dark); }

.pv-gform-cancel {
    padding: 6px 14px;
    background: #fff;
    color: #aaa; border: 1px solid var(--pair-card-border);
    border-radius: 16px; cursor: pointer;
    font-size: 12px;
}

/* 갤러리 그리드 */
.pv-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    /* 이미지가 적을 때 빈 칸은 자연스럽게 */
    grid-auto-rows: 1fr;
}

/* 이미지 1장이면 1/4 너비만 차지 */
.pv-gallery-grid:has(.pv-gallery-thumb:nth-child(1):last-child) {
    grid-template-columns: repeat(4, 1fr);
}
.pv-gallery-grid .pv-gallery-thumb:only-child {
    grid-column: 1;
}

.pv-gallery-thumb {
    position: relative;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--pair-card-border);
    background: var(--pair-accent-light);
}

.pv-gallery-link {
    display: block;
    width: 100%; height: 100%;
}

.pv-gallery-thumb img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform 0.25s;
}
.pv-gallery-thumb:hover img { transform: scale(1.06); }

.pv-gallery-del {
    position: absolute;
    top: 4px; right: 4px;
    width: 20px; height: 20px;
    background: rgba(0,0,0,0.5);
    color: #fff; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; text-decoration: none;
    opacity: 0; transition: opacity 0.2s;
}
.pv-gallery-thumb:hover .pv-gallery-del { opacity: 1; }

.pv-gallery-empty {
    text-align: center;
    color: var(--pair-desc-color);
    font-size: 12px;
    padding: 20px 0;
}