@charset "utf-8";
/* ===== 페어 게시판 스킨 (테마 CSS 변수 기반) ===== */
/* ---- 반투명 외곽 배경 (밤하늘 위에서도 잘 보이게) ---- */
#pair_w, #pair_list {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 10px 34px rgba(30, 50, 90, 0.28);
}
/* 흰 유리 위 글씨 확실히 보이게 */
#pair_w .pw-l, #pair_w .pw-mini { color: #35507a; }
#pair_w .pw-h, #pair_list .pl-h { color: #1f4e86; }
@media (max-width: 720px){
    #pair_w, #pair_list { padding: 18px; }
}


/* ---- 입력 폼 (write) ---- */
#pair_w {
    max-width: 680px;
    margin: 20px auto;
    font-family: var(--content-font-family);
    color: var(--content-font-color);
}
#pair_w .pw-h {
    font-family: var(--title-font-family);
    font-size: var(--sub-title-font-size, 18px);
    font-weight: bold;
    color: var(--primary-color);
    margin: 0 0 18px;
}
#pair_w .pw-l {
    display: block;
    font-weight: 700;
    font-size: 14px;
    color: var(--content-font-color);
    margin: 18px 0 7px;
}
#pair_w .pw-in,
#pair_w textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--form-border-color);
    border-radius: var(--form-border-radius);
    padding: 10px 13px;
    font-family: var(--content-font-family);
    font-size: 14px;
    color: var(--form-text-color);
    background: var(--form-bg-color);
}
#pair_w textarea { min-height: 60px; resize: vertical; }
#pair_w .pw-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
#pair_w .pw-card {
    border: 1px solid var(--card-border-color);
    border-radius: var(--card-border-radius);
    padding: 14px;
    background: var(--card-bg-color);
    margin-top: 4px;
}
#pair_w .pw-half { display: flex; gap: 12px; }
#pair_w .pw-half > div { flex: 1; }
#pair_w .pw-mini { font-size: 12px; color: var(--text-muted); margin: 2px 0 6px; }
#pair_w .pw-cur img {
    max-width: 90px; max-height: 90px;
    border-radius: var(--card-border-radius);
    border: 1px solid var(--border-color, var(--card-border-color));
    margin-top: 6px; vertical-align: middle;
}
#pair_w .pw-toggle { display: flex; gap: 12px; font-size: 13px; margin-bottom: 6px; color: var(--content-font-color); }
#pair_w input[type=range] { width: 100%; accent-color: var(--primary-color); }
#pair_w input[type=color] {
    width: 60px; height: 38px;
    border: 1px solid var(--form-border-color);
    border-radius: var(--form-border-radius);
    background: var(--form-bg-color);
    cursor: pointer;
}
#pair_w .pw-btns { display: flex; justify-content: center; gap: 10px; margin-top: 26px; }
#pair_w .pw-btns button,
#pair_w .pw-btns a {
    padding: 12px 30px;
    font-size: 14px;
    font-family: var(--content-font-family);
    text-decoration: none;
    cursor: pointer;
    border: none;
}
#pair_w .pw-submit {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border-radius: var(--btn-primary-radius);
}
#pair_w .pw-cancel {
    background: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    border-radius: var(--btn-secondary-radius, var(--btn-primary-radius));
}
#pair_w .pw-chk { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; color: var(--primary-color); }

/* ---- 목록 (list) ---- */
#pair_list {
    max-width: 820px;
    margin: 20px auto;
    font-family: var(--content-font-family);
    color: var(--content-font-color);
}
#pair_list .pl-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
#pair_list .pl-h {
    font-family: var(--title-font-family);
    font-size: var(--sub-title-font-size, 16px);
    font-weight: bold;
    color: var(--primary-color);
    margin: 0;
}
#pair_list .pl-write {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    text-decoration: none;
    padding: 9px 18px;
    border-radius: var(--btn-primary-radius);
    font-size: 13px;
}
#pair_list .pl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
    list-style: none; margin: 0; padding: 0;
}
#pair_list .pl-item {
    border: 1px solid var(--card-border-color);
    border-radius: var(--card-border-radius);
    overflow: hidden;
    background: var(--card-bg-color);
    transition: var(--transition-base, .15s);
}
#pair_list .pl-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md, 0 8px 18px rgba(0,0,0,.12)); }
#pair_list .pl-item a { display: block; text-decoration: none; color: inherit; }
#pair_list .pl-thumb {
    height: 110px;
    background: var(--gray-100) center/cover no-repeat;
    display: grid; place-items: center;
    color: var(--text-muted); font-size: 20px;
}
#pair_list .pl-name {
    padding: 10px 12px;
    font-weight: 700; font-size: 14px; text-align: center;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--content-font-color);
}
#pair_list .pl-edit {
    display: block; text-align: center; padding: 7px;
    font-size: 12px; color: var(--primary-color);
    border-top: 1px solid var(--card-border-color);
    text-decoration: none;
}
#pair_list .pl-edit:hover { background: var(--gray-100); }
#pair_list .pl-empty { grid-column: 1 / -1; text-align: center; padding: 50px; color: var(--text-muted); }

/* ===== 씬 레이아웃 드래그 에디터 ===== */
#sched_w #lay-stage, #pair_w #lay-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 660 / 285;
    margin-top: 8px;
    border-radius: 10px;
    background:
        linear-gradient(rgba(111,168,220,.10), rgba(111,168,220,.10)),
        repeating-linear-gradient(0deg, transparent 0 23px, rgba(31,88,150,.06) 23px 24px),
        repeating-linear-gradient(90deg, transparent 0 23px, rgba(31,88,150,.06) 23px 24px);
    border: 1.5px dashed var(--card-border-color, #b9c6ea);
    overflow: hidden;
    touch-action: none;
}
#pair_w .lay-chip {
    position: absolute;
    transform: translate(-50%, -50%);
    padding: 4px 9px;
    font-family: var(--content-font-family);
    font-size: 12px; font-weight: 700;
    color: #fff; white-space: nowrap;
    border-radius: 8px; cursor: grab; user-select: none;
    box-shadow: 0 3px 8px rgba(31,88,150,.28);
    border: 2px solid rgba(255,255,255,.7);
}
#pair_w .lay-chip.drag { cursor: grabbing; z-index: 9; box-shadow: 0 6px 14px rgba(31,88,150,.4); }
#pair_w .lay-chip.c { background: #6FA8DC; }
#pair_w .lay-chip.s { background: #B7A7E6; }
#pair_w .lay-chip.d { background: #F4A9C7; }

/* ===== 페어 크게 보기 (게시판 view) ===== */
#pair_view{ max-width:760px;margin:20px auto;background:rgba(255,255,255,.6);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1.5px solid rgba(255,255,255,.85);border-radius:14px;box-shadow:0 10px 34px rgba(30,50,90,.28);padding:24px 28px;font-family:var(--content-font-family);color:var(--content-font-color);}
#pair_view .pv-topline{text-align:center;font-family:var(--title-font-family);font-size:11px;letter-spacing:3px;color:var(--text-muted);}
#pair_view .pv-title{text-align:center;font-size:28px;font-weight:700;color:var(--content-font-color);margin:2px 0 16px;word-break:keep-all;}
#pair_view .pv-frame{position:relative;border:2px solid rgba(31,88,150,.22);border-radius:10px;padding:30px 14px 14px;}
#pair_view .pv-frame::before,#pair_view .pv-frame::after{content:"";position:absolute;width:20px;height:20px;border:2px solid var(--pc,#6FA8DC);}
#pair_view .pv-frame::before{top:-2px;left:-2px;border-right:none;border-bottom:none;border-radius:6px 0 0 0;}
#pair_view .pv-frame::after{bottom:-2px;right:-2px;border-left:none;border-top:none;border-radius:0 0 6px 0;}
#pair_view .pv-corner{position:absolute;top:8px;font-family:var(--content-font-family);font-weight:700;font-size:15px;color:var(--pc,#1F5896);max-width:44%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#pair_view .pv-corner.tl{left:14px;}
#pair_view .pv-corner.tr{right:14px;text-align:right;}
#pair_view .pv-scene{position:relative;height:min(52vh,460px);border-radius:8px;overflow:hidden;background:#cfe0f2;}
#pair_view .pv-char{position:absolute;bottom:0;height:98%;width:auto;max-width:none;filter:drop-shadow(0 8px 14px rgba(31,88,150,.35));}
#pair_view .pv-lines{margin:16px 2px 0;display:flex;flex-direction:column;gap:9px;}
#pair_view .pv-line{background:rgba(255,255,255,.82);border-radius:12px;padding:10px 14px;color:#2f3f6b;font-size:15px;box-shadow:0 3px 9px rgba(31,88,150,.12);}
#pair_view .pv-line b{display:inline-block;background:var(--pc,#6FA8DC);color:#fff;font-family:var(--title-font-family);font-size:12px;padding:1px 9px;border-radius:5px;margin-right:8px;}
#pair_view .pv-foot{display:flex;align-items:center;gap:10px;margin-top:16px;flex-wrap:wrap;}
#pair_view .pv-dday{background:linear-gradient(90deg,#6FA8DC,#9db8e8);color:#fff;font-family:var(--title-font-family);font-size:12px;padding:5px 14px;border-radius:8px;}
#pair_view .pv-syms{display:inline-flex;gap:6px;}
#pair_view .pv-sym{width:34px;height:34px;border-radius:8px;background:#fff center/contain no-repeat;box-shadow:0 2px 6px rgba(31,88,150,.18);display:inline-grid;place-items:center;font-size:20px;}
#pair_view .pv-btns{margin-left:auto;display:flex;gap:8px;}
#pair_view .pv-list,#pair_view .pv-edit{text-decoration:none;border-radius:8px;padding:8px 16px;font-size:14px;}
#pair_view .pv-list{background:#e6edf9;color:#46587e;}
#pair_view .pv-edit{background:var(--primary-color,#6FA8DC);color:#fff;}

/* ---- 홈 버튼 ---- */
#pair_list .pl-actions{display:flex;gap:8px;align-items:center;}
#pair_list .pl-home,#pair_view .pv-home{background:#eaf2ff;color:#1F5896;text-decoration:none;border-radius:8px;padding:8px 13px;font-size:13px;white-space:nowrap;}
#pair_list .pl-home:hover,#pair_view .pv-home:hover{background:#d9e8ff;}