/* 목록 스타일 (아카이브 그리드) */
.pair-cardbook-list { width: 100%; margin: 0 auto; padding: 10px 0; }
.pair-list-toolbar { display: flex; justify-content: flex-end; margin-bottom: 16px; }
.pair-list-register-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: #6c5ce7; color: #fff; text-decoration: none;
    font-size: 14px; font-weight: bold; padding: 9px 18px; border-radius: 24px;
    box-shadow: 0 4px 10px rgba(108,92,231,0.25); transition: all 0.2s;
}
.pair-list-register-btn:hover { background: #5a4bd1; transform: translateY(-1px); }
.pair-list-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; list-style: none; padding: 0; margin: 0; }
.pair-item { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.04); transition: transform 0.25s ease; }
.pair-item:hover { transform: translateY(-4px); }
.pair-link { display: block; text-decoration: none; color: #2d3436; }
.pair-cover { width: 100%; height: 180px; background-size: cover; background-position: center; background-color: #f1f2f6; }
.pair-info { padding: 16px; }
.pair-subject { margin: 0 0 6px 0; font-size: 18px; font-weight: bold; }
.pair-desc { margin: 0; font-size: 13px; color: #747d8c; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empty-list { grid-column: 1 / -1; text-align: center; padding: 60px 0; color: #a4b0be; }

/* 뷰 페이지 상단 비주얼 프로필 배너 */
.pair-profile-header { position: relative; width: 100%; height: 260px; display: flex; flex-direction: column; justify-content: center; align-items: center; background-size: cover; background-position: center; background-color: #2f3542; border-radius: 14px; margin-bottom: 10px; color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,0.6); padding: 20px; box-sizing: border-box; }
.pair-title { font-size: 26px; margin: 0 0 8px 0; font-weight: bold; }
.pair-intro { font-size: 14px; margin: 0; opacity: 0.85; letter-spacing: -0.5px; }

/* ★ AU 탭 = 포스트잇/책갈피처럼 헤더와 카드 사이 경계에 걸쳐지는 디자인.
   .au-tabs-anchor는 높이 0인 "경계선 표시"일 뿐이고, 실제 탭/마퀴는 그 기준으로
   절대 위치시켰다. 탭이 위쪽(헤더 이미지 안), 마퀴가 탭 바로 아래에서 헤더/카드
   경계를 이어붙이는 순서 — 탭(-64px)이 위, 마퀴(-16px)가 그 아래, 마퀴 하단이
   카드 쪽으로 10px 겹쳐 들어가 문서 흐름상 빈 틈이 안 생긴다. */
.au-tabs-anchor { position: relative; height: 0; }
.au-tabs-wrapper {
    position: absolute; left: 0; right: 0; top: -64px;
    display: flex; overflow-x: auto; overflow-y: visible; white-space: nowrap; gap: 10px;
    -webkit-overflow-scrolling: touch;
    padding: 6px 20px 0; z-index: 3;
}
.au-tabs-wrapper::-webkit-scrollbar { display: none; }
.au-tab-trigger {
    flex-shrink: 0; cursor: pointer; font-size: 14px; font-weight: 600;
    padding: 11px 20px 14px; border: none; border-radius: 10px 10px 3px 3px;
    background: #eef0fb; color: #8286a3;
    box-shadow: 0 3px 8px rgba(45,52,80,0.16);
    transform: rotate(-2deg); transition: transform 0.2s, background 0.2s, color 0.2s, box-shadow 0.2s;
    position: relative; top: 6px;
}
.au-tab-trigger:nth-child(2n) { transform: rotate(2deg); }
.au-tab-trigger:nth-child(3n) { transform: rotate(-1deg); }
.au-tab-trigger:hover { top: 3px; }
.au-tab-trigger.active {
    background: #fff; color: #6c5ce7; font-weight: 700;
    box-shadow: 0 -3px 10px rgba(45,52,80,0.08);
    transform: rotate(0deg); top: 0;
}

/* ★ 노래 제목 마퀴 — 탭 바로 아래, 헤더 이미지 위에서 한 줄로 흘러간다.
   하단 10px는 카드 쪽으로 겹쳐 들어가 탭과 카드를 자연스럽게 이어붙인다.
   ★ display:flex 컨테이너 안에 두면 자식(track)의 padding-left:100%가
     flex-shrink에 의해 찌그러져 "흐르지 않고 제자리에 고정되는" 문제가 생겼다.
     그래서 flex를 쓰지 않고 line-height로 세로 중앙정렬하는 방식으로 바꿨다. */
.au-marquee-wrap {
    position: absolute; left: 0; right: 0; top: -16px; height: 26px; line-height: 26px;
    overflow: hidden; z-index: 2; white-space: nowrap;
    background: linear-gradient(to top, rgba(20,20,30,0.5), rgba(20,20,30,0.08));
    cursor: pointer;
}
.au-marquee-track {
    display: inline-block; white-space: nowrap; color: #fff; font-size: 12px;
    font-weight: 600; letter-spacing: 0.2px; text-shadow: 0 1px 3px rgba(0,0,0,0.55);
    padding-left: 100%;
    animation: au-marquee-scroll linear infinite;
}
.au-marquee-wrap.paused .au-marquee-track { animation-play-state: paused; }
@keyframes au-marquee-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

/* BGM 플레이어 영역 — 컨테이너 자체는 아무 박스 스타일도 갖지 않는다.
   (이전엔 padding/background를 컨테이너에 줬는데, <audio>가 display:none이어도
   컨테이너 자체의 패딩+배경은 그대로 남아 작은 빈 알약 모양이 둥둥 떠 있는
   원인이 됐다. 이제는 실제로 보이는 <audio> 태그 쪽에만 여백을 준다.) */
.bgm-player-zone { margin: 0; line-height: 0; }
.bgm-player-zone audio { display: block; height: 32px; margin-bottom: 14px; }
/* 유튜브 IFrame 플레이어는 음향만 필요하므로 화면에는 최소한으로만 남겨둔다 */
.au-yt-player-wrap { display: inline-block; width: 1px; height: 1px; overflow: hidden; opacity: 0.01; vertical-align: middle; }

/* 전시형 아카이브 메인 카드 */
.au-card-display { display: none; background: #fff; border-radius: 14px; box-shadow: 0 6px 20px rgba(0,0,0,0.03); padding: 25px; margin-bottom: 35px; border-left: 5px solid #6c5ce7; animation: fadeIn 0.3s ease-in-out; }
.au-card-display.active { display: block; }
.au-details-title { margin: 0 0 14px 0; font-size: 22px; color: #2f3542; }
.au-details-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.au-tag-chip { background: #f1f2f6; color: #6c5ce7; padding: 4px 10px; border-radius: 6px; font-size: 13px; font-weight: 500; }
.au-details-desc { font-size: 15px; line-height: 1.7; color: #57606f; white-space: pre-wrap; }

/* 쓰기 페이지 빌더 폼 레이아웃 */
.write-header-section, .write-au-section { background: #f8f9fa; padding: 20px; border-radius: 10px; margin-bottom: 20px; border: 1px solid #e4e7eb; }
.write-header-section h3, .write-au-section h3 { margin-top: 0; margin-bottom: 15px; font-size: 16px; color: #2f3542; border-left: 3px solid #6c5ce7; padding-left: 8px; }
.full_input { width: 100%; margin-bottom: 12px; padding: 10px; border: 1px solid #ced6e0; border-radius: 6px; box-sizing: border-box; }
.file-input-box { margin-top: 5px; font-size: 13px; color: #57606f; }
.au-edit-block { background: #fff; border: 1px solid #ced6e0; padding: 20px; border-radius: 8px; margin-bottom: 15px; position: relative; }
.au-edit-row { margin-bottom: 12px; }
.au-edit-row label { display: block; font-size: 13px; font-weight: bold; color: #57606f; margin-bottom: 5px; }
.au-edit-row input, .au-edit-row textarea { width: 100%; padding: 10px; border: 1px solid #ced6e0; border-radius: 6px; box-sizing: border-box; font-size: 14px; }
.au-edit-row textarea { height: 100px; resize: vertical; }
.btn-remove-au { background: #ff4757; color: #fff; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; position: absolute; right: 20px; top: 15px; font-size: 12px; }
.full_btn { width: 100%; padding: 14px; background: #fff; border: 2px dashed #6c5ce7; color: #6c5ce7; cursor: pointer; font-weight: bold; border-radius: 8px; transition: all 0.2s; }
.full_btn:hover { background: #6c5ce7; color: #fff; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}
/* AU 이미지 레이아웃 및 셀렉터 관련 스타일 추가 */
.au-details-img-zone { width: 100%; max-width: 600px; margin-bottom: 20px; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.06); background: #f1f2f6; }
.au-card-img { width: 100%; height: auto; display: block; object-fit: contain; max-height: 500px; }
.img-type-selector { display: flex; gap: 15px; margin-top: 5px; font-size: 13px; color: #57606f; }
.img-type-selector label { cursor: pointer; display: flex; align-items: center; gap: 5px; font-weight: normal !important; }
.img-preview-text { font-size: 12px; color: #747d8c; margin: 5px 0 0 0; padding-left: 2px; }
.img-preview-text a { color: #6c5ce7; text-decoration: underline; font-weight: bold; }

/* 뷰 페이지 상단 목록/수정/삭제 액션 바 (프로필 헤더 우상단 오버레이) */
.pair-action-bar { position: absolute; top: 14px; right: 14px; display: flex; gap: 6px; z-index: 2; }
.pair-action-btn {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(255,255,255,0.16); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.32); color: #fff; text-decoration: none;
    font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 20px;
    transition: all 0.2s; text-shadow: none;
}
.pair-action-btn:hover { background: rgba(255,255,255,0.32); transform: translateY(-1px); }
.pair-action-btn.pair-action-edit { background: rgba(108,92,231,0.55); border-color: rgba(108,92,231,0.7); }
.pair-action-btn.pair-action-edit:hover { background: rgba(108,92,231,0.78); }
.pair-action-btn.pair-action-del { background: rgba(255,71,87,0.4); border-color: rgba(255,71,87,0.6); }
.pair-action-btn.pair-action-del:hover { background: rgba(255,71,87,0.65); }

/* AU 카드 기본 3장 트리오 레이아웃 (캐릭터1 · 무드/투샷 · 캐릭터2) */
.au-trio-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 20px; }
.au-trio-cell { border-radius: 10px; overflow: hidden; background: #f1f2f6; aspect-ratio: 3/4; box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
/* ★ 기본 3장(캐릭터1·무드·캐릭터2)은 서로 다른 원본 비율이어도 잘리지 않고
   전체가 다 보이도록 object-fit: contain 사용. 남는 여백은 셀 배경색(#f1f2f6)으로 채워진다. */
.au-trio-cell img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* AU 카드 추가 이미지 (최대 5장, 설명 아래 별도 그리드) */
.au-extra-img-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin-top: 18px; }
.au-extra-img-cell { border-radius: 8px; overflow: hidden; background: #f1f2f6; aspect-ratio: 1/1; }
.au-extra-img-cell img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }

/* 쓰기 폼: 이미지 슬롯(캐릭터1 / 무드 / 캐릭터2 / 추가) 공용 스타일 */
.au-img-hint { font-weight: normal; color: #a4b0be; font-size: 12px; }
.au-image-trio { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.au-image-extra-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 10px; }
.au-img-slot { border: 1px dashed #ced6e0; border-radius: 8px; padding: 10px; background: #fbfbfd; position: relative; }
.au-img-slot-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.au-img-slot-label { font-size: 12px; font-weight: bold; color: #57606f; }
.btn-remove-slot-img { background: none; border: none; color: #ff4757; cursor: pointer; font-size: 15px; padding: 0 2px; line-height: 1; }
.au-img-slot .img-type-selector { margin-top: 0; margin-bottom: 6px; gap: 10px; font-size: 12px; }
.au-img-slot input[type="text"] { font-size: 12.5px; padding: 7px; margin-bottom: 0; }
.au-img-slot input[type="file"] { font-size: 12px; }
.btn-add-extra-img { width: 100%; padding: 9px; background: #fff; border: 1.5px dashed #6c5ce7; color: #6c5ce7; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 600; transition: all 0.15s; }
.btn-add-extra-img:hover:not(:disabled) { background: #6c5ce7; color: #fff; }
.btn-add-extra-img:disabled { opacity: .5; cursor: not-allowed; border-style: solid; }

/* 쓰기 폼: BGM mp3 직접 업로드 보조 영역 (URL/유튜브 입력과 함께 사용, 선택 UI 없이 공존) */
.au-bgm-upload-box { margin-top: 8px; padding: 8px 10px; background: #f8f9fa; border: 1px dashed #ced6e0; border-radius: 6px; }
.au-bgm-upload-box input[type="file"] { margin-top: 4px; font-size: 12.5px; }
.au-bgm-existing-text { display: flex; align-items: center; gap: 8px; margin: 6px 0 0 0 !important; }
.btn-clear-bgm-existing { background: none; border: none; color: #ff4757; cursor: pointer; font-size: 12px; padding: 0; }