/* ★ 목록 카드 전용 폰트 — 레트로 팝/네온사인 분위기.
   한글은 통통하고 임팩트 있는 팝 폰트(Gugi), 영문/숫자는 진짜 네온관 느낌이 나는
   Monoton을 앞세워 섞어 쓴다(폰트 스택 앞쪽이 영문만 커버하므로 한글은 자동으로
   Gugi로 떨어진다). 여기에 네온 글로우 텍스트섀도우를 얹어 간판 느낌을 냈다. */
@import url('https://fonts.googleapis.com/css2?family=Gugi&family=Monoton&display=swap');

/* 목록 스타일 (아카이브 그리드) */
.pair-cardbook-list { width: 100%; margin: 0 auto; padding: 10px 0; }
.pair-list-toolbar { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-bottom: 16px; }
/* ★ 아이콘 전용 보조 버튼(게시판 설정 · 순서 변경) — 글자 없이 아이콘만 */
.pair-list-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; flex-shrink: 0;
    background: #fff; color: #6c5ce7; text-decoration: none; font-size: 15px;
    border: 1.5px solid #d9d5f5; border-radius: 50%; cursor: pointer;
    transition: all 0.2s; padding: 0;
}
.pair-list-icon-btn:hover { background: #f4f2ff; border-color: #6c5ce7; transform: translateY(-1px); }
.pair-list-icon-btn.active { background: #6c5ce7; color: #fff; border-color: #6c5ce7; }
.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-reorder-hint {
    display: none; margin-bottom: 14px; padding: 10px 14px; border-radius: 10px;
    background: #f4f2ff; border: 1px dashed #b9b1ee; color: #5a4bd1; font-size: 13px;
    align-items: center; gap: 10px; flex-wrap: wrap;
}
.pair-reorder-hint.visible { display: flex; }
.pair-reorder-hint.is-saving { border-style: solid; opacity: 0.75; }
.pair-reorder-hint.is-ok { background: #eafaf1; border-color: #7bd8a6; color: #1e7a4b; border-style: solid; }
.pair-reorder-hint.is-error { background: #fdeeee; border-color: #f0a5a5; color: #c0392b; border-style: solid; }
/* ★ 순서 정리 줄 안에 함께 놓이는 "남겨진 파일 정리" 버튼.
   안내 문구가 길어도 버튼이 밀려나지 않도록 오른쪽 끝에 붙이고(auto 여백),
   좁은 화면에서는 줄바꿈되어 아래로 내려간다(부모가 flex-wrap). */
.pair-reorder-msg { flex: 1 1 auto; min-width: 180px; }
.pair-cleanup-btn {
    flex: 0 0 auto; margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px; border-radius: 8px; text-decoration: none; white-space: nowrap;
    background: #fff; border: 1px solid #b9b1ee; color: #5a4bd1; font-size: 12.5px; font-weight: 600;
    transition: background 0.15s ease, color 0.15s ease;
}
.pair-cleanup-btn:hover { background: #5a4bd1; border-color: #5a4bd1; color: #fff; }
/* ★ 썸네일 글씨 색 고르개 — 순서 정리 줄 안에 함께 선다 */
.pair-color-tools {
    flex: 0 0 auto; display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px;
    padding: 5px 10px; border-radius: 8px;
    background: rgba(255,255,255,0.6); border: 1px solid #ddd6f3;
}
.pair-color-group { display: inline-flex; align-items: center; gap: 4px; }
.pair-color-label { font-size: 11.5px; color: #6c5ce7; font-weight: 700; margin-right: 2px; }
.pair-color-in {
    width: 26px; height: 22px; padding: 0; border: 1px solid #cfc7ee; border-radius: 5px;
    background: none; cursor: pointer;
}
.pair-color-tools button {
    padding: 5px 10px; border-radius: 7px; border: 1px solid #b9b1ee;
    background: #fff; color: #5a4bd1; font-size: 12px; font-weight: 600; cursor: pointer;
    white-space: nowrap;
}
.pair-color-tools button:hover { background: #5a4bd1; border-color: #5a4bd1; color: #fff; }

/* 저장 결과 색(초록/빨강)으로 바뀐 줄에서도 버튼은 그 색을 따라간다 */
.pair-reorder-hint.is-ok .pair-cleanup-btn { border-color: #7bd8a6; color: #1e7a4b; }
.pair-reorder-hint.is-ok .pair-cleanup-btn:hover { background: #1e7a4b; border-color: #1e7a4b; color: #fff; }
.pair-reorder-hint.is-error .pair-cleanup-btn { border-color: #f0a5a5; color: #c0392b; }
.pair-reorder-hint.is-error .pair-cleanup-btn:hover { background: #c0392b; border-color: #c0392b; color: #fff; }

/* ★ 카드가 한 줄에 하나뿐이거나 카드 최대 너비(bo_gallery_width)가 지정돼 칸보다
   좁아진 경우, 카드가 왼쪽에 치우치지 않고 가운데 오도록 justify-content/items 지정 */
.pair-list-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 28px; list-style: none; padding: 0; margin: 0; justify-content: center; justify-items: center; }
.pair-list-grid > .pair-item { width: 100%; }
/* 순서 변경 모드: 카드가 드래그 가능한 상태임을 커서/외곽선으로 알린다 */
.pair-list-grid.reorder-mode .pair-item { cursor: grab; outline: 2px dashed #b9b1ee; outline-offset: 3px; }
.pair-list-grid.reorder-mode .pair-item:hover { transform: none; }
.pair-list-grid .pair-item.dragging { opacity: 0.45; cursor: grabbing; }
/* ★ overflow:hidden을 없앴다 — 토큰(스티커)이 카드 하단 경계를 살짝 넘어가야
   "붙여놓은 스티커"처럼 보이는데, hidden이면 그 튀어나온 부분이 잘려버린다.
   대신 둥근 모서리는 .pair-cover 쪽에 직접 줘서 카드 자체는 그대로 둥글게 보인다. */
.pair-item { background: #2f3542; border-radius: 14px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); transition: transform 0.25s ease; }
.pair-item:hover { transform: translateY(-4px); }
.pair-link { display: block; text-decoration: none; color: #2d3436; }
/* ★ "목록 전용(클릭 불가)" 카드 — 눌러도 아무 일이 없으므로 손가락 커서를 없앤다.
   단, 관리자·작성자에게는 링크가 살아 있으므로(is-nolink-open) 이 규칙이 걸리지 않는다.
   그 경우엔 대신 자물쇠 배지를 띄워 "남들에겐 안 열리는 카드"임을 알려 준다. */
.pair-item.is-nolink .pair-link { cursor: default; }
.pair-item.is-nolink:hover { transform: none; }
.pair-item.is-nolink-open .pair-cover { outline: 2px dashed rgba(255,255,255,0.45); outline-offset: -6px; }
/* ★ '목록 전용' 글자를 빼고 자물쇠 아이콘만 남겼다 — 관리자에게만 보이는 표시인데
   글자까지 얹히면 정작 보고 싶은 디데이·페어명 구경을 방해한다. 무슨 뜻인지는
   title 툴팁으로 남겨 뒀다. */
.pair-nolink-badge {
    position: absolute; top: 8px; left: 8px; z-index: 5;
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; padding: 0; border-radius: 50%;
    background: rgba(20,20,30,0.5); color: rgba(255,255,255,0.9);
    font-size: 11px;
    backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
    text-shadow: none; pointer-events: none;
}
/* ★ 포스터형 카드: 배경(썸네일) 위에 페어명·디데이·이름조합·토큰이 전부 겹쳐서 뜬다.
   높이는 게시판 관리자 설정(bo_gallery_height)을 따르며, list.skin.php가 인라인
   style로 덮어쓴다. 여기 값은 설정을 못 읽었을 때의 최종 안전망일 뿐이다. */
.pair-cover { width: 100%; height: var(--au-card-h, 260px); background-size: cover; background-position: center; background-color: #f1f2f6; border-radius: 14px; position: relative; }
.empty-list { grid-column: 1 / -1; text-align: center; padding: 60px 0; color: #a4b0be; }
/* ★ 글은 있는데 AU 카드가 하나도 없는 글에서 나오는 안내문.
   .empty-list 와 짝이라 같은 모양으로 맞춘다 — 규칙이 없으면 맨 <p> 로 떨어진다
   (받는 쪽이 새 게시판에서 가장 먼저 보게 되는 화면이다). */
.empty-au { text-align: center; padding: 48px 16px; color: #a4b0be; }

/* 상단 중앙: 페어명 + (있으면) 한 줄 소개 */
.pair-cover-overlay {
    position: absolute; top: 0; left: 0; right: 0; z-index: 2;
    padding: 14px 14px 22px; text-align: center; border-radius: 14px 14px 0 0; overflow: hidden;
    background: linear-gradient(to bottom, rgba(0,0,0,0.55), rgba(0,0,0,0));
}
/* ★ 영문 페어명도 자연스럽게: 영문/숫자는 Monoton(네온관), 한글은 Gugi로 자동 분기.
   영문 이름은 한글보다 길어지기 쉬워서 두 줄까지 접히도록 허용하고, 넘치면 말줄임. */
.pair-name-overlay {
    margin: 0; font-family: 'Monoton', 'Gugi', sans-serif; font-weight: 400;
    font-size: 23px; letter-spacing: 0.5px; line-height: 1.35;
    word-break: break-word;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    /* ★ 글자색·네온색은 목록의 "순서 정리" 줄에서 바꿀 수 있다(게시판마다 따로 기억).
       맨 뒤의 검은 그림자는 밝은 썸네일 위에서도 글씨가 읽히게 하는 것이라 남겨 둔다. */
    color: var(--au-list-name-color, #fff);
    text-shadow:
        0 0 4px  var(--au-list-name-glow, #ff36c1),
        0 0 12px var(--au-list-name-glow, #ff36c1),
        0 0 26px var(--au-list-name-glow, #ff36c1),
        0 2px 6px rgba(0,0,0,0.5);
}
.pair-intro-overlay {
    margin: 4px 0 0 0; font-size: 12px; color: rgba(255,255,255,0.85);
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 상단부(정중앙보단 살짝 위): 디데이 — 더 크고 또렷하게 */
.pair-dday-overlay {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2;
    font-family: 'Monoton', 'Gugi', sans-serif; font-weight: 400; font-size: 46px;
    letter-spacing: 1px; white-space: nowrap;
    color: var(--au-list-dday-color, #fff);
    text-shadow:
        0 0 6px  var(--au-list-dday-glow, #00eaff),
        0 0 18px var(--au-list-dday-glow, #00eaff),
        0 0 38px var(--au-list-dday-glow, #00eaff),
        0 3px 10px rgba(0,0,0,0.5);
}

/* 중앙 하단: 오리지널 기준 "이름A × 이름B" */
.pair-names-overlay {
    position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 2;
    font-size: 13.5px; font-weight: 700; color: rgba(255,255,255,0.95);
    text-shadow: 0 1px 4px rgba(0,0,0,0.55); letter-spacing: 0.3px; white-space: nowrap;
}

/* ★ 토큰(SD1/SD2) — 카드 좌/우 하단에 하나씩. 정사각형으로 잘라 담지 않고
   원본 이미지 실루엣 그대로 보이게 한다(object-fit:contain + 배경/테두리 없음).
   투명 배경 PNG의 여백을 회색 박스로 채우던 문제를 없애기 위해 박스 자체를
   지우고, 그림자는 이미지의 알파 채널(실루엣)을 따라가는 drop-shadow로 대체했다.
   카드 바닥 경계를 살짝 넘어가게(-14px) 배치해 "겹쳐서 붙은" 느낌은 유지한다. */
.pair-sd-thumb {
    position: absolute; bottom: -22px; z-index: 3;
    width: 164px; height: 164px;
    transition: transform 0.2s;
}
.pair-sd-thumb-left  { left: 4px; transform: rotate(-6deg); }
.pair-sd-thumb-right { right: 4px; transform: rotate(6deg); }
.pair-sd-thumb img {
    width: 100%; height: 100%; object-fit: contain; display: block;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.45));
}
.pair-sd-tooltip {
    position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px);
    background: rgba(20,20,25,0.9); color: #fff; font-size: 11.5px; line-height: 1.5;
    padding: 6px 10px; border-radius: 8px; white-space: nowrap;
    opacity: 0; pointer-events: none; transition: opacity 0.15s, transform 0.15s; z-index: 5;
}
.pair-sd-tooltip::after {
    content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    border: 5px solid transparent; border-top-color: rgba(20,20,25,0.9);
}
.pair-sd-tooltip b { display: block; font-size: 12.5px; }
.pair-sd-tooltip em { display: block; font-style: normal; opacity: 0.85; margin-top: 2px; }
.pair-sd-thumb-left:hover  { z-index: 4; transform: rotate(0deg) scale(1.1); }
.pair-sd-thumb-right:hover { z-index: 4; transform: rotate(0deg) scale(1.1); }
.pair-sd-thumb:hover .pair-sd-tooltip { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ★ 모바일 레이아웃 조정 */
@media (max-width: 560px) {
    /* 토큰(스티커)은 좁은 화면에서 텍스트와 겹치거나 지저분해지므로 숨긴다 */
    .pair-sd-thumb { display: none; }

    /* ★ 높이는 설정값(--au-card-h)의 55%로 줄여 가로로 긴 "배너형 디데이 위젯"이
       되게 한다. 다만 글자가 겹칠 만큼 납작해지지는 않도록 최소 150px은 지킨다.
       (토큰이 숨겨져 아래 여백이 필요 없어진 만큼 과감히 줄일 수 있다) */
    .pair-cover { height: max(130px, calc(var(--au-card-h, 260px) * 0.5)); }

    /* 한 줄에 하나씩만 — PHP가 인라인 style로 열 개수를 지정하므로 !important로 덮는다.
       카드 최대 너비(bo_gallery_width) 역시 좁은 화면에선 무시하고 꽉 채운다. */
    .pair-list-grid { grid-template-columns: 1fr !important; gap: 16px; }
    .pair-item { max-width: none !important; }

    /* 버튼(설정·순서변경·페어등록)은 목록 아래로 내린다 — 세로 배치에서 위쪽 공간을
       버튼이 차지하지 않게 하고, 스크롤을 다 본 뒤 자연스럽게 손에 닿게 한다. */
    .pair-cardbook-list { display: flex; flex-direction: column; }
    .pair-list-grid { order: 1; }
    .pair-reorder-hint { order: 2; margin: 16px 0 0; }
    .pair-list-toolbar { order: 3; margin: 16px 0 0; justify-content: center; }
    .bo_fx { order: 4; }

    /* 배너처럼 납작해진 만큼 글자도 그에 맞춰 조정 */
    .pair-dday-overlay { font-size: 38px; }
    .pair-name-overlay { font-size: 19px; }
    .pair-cover-overlay { padding: 10px 12px 18px; }
    .pair-names-overlay { bottom: 10px; font-size: 12.5px; }
}

/* 아주 좁은 화면에서는 한 단계 더 줄인다 (560px 블록 뒤에 와야 덮어쓸 수 있다) */
@media (max-width: 400px) {
    .pair-dday-overlay { font-size: 32px; }
    .pair-name-overlay { font-size: 17px; }
}


/* 뷰 페이지 상단 비주얼 프로필 배너 */
/* ★ 헤더와 본문 카드의 둥근 모서리를 없애 같은 네모 폭으로 이어지게 했다.
   (예전엔 헤더 아래쪽만 둥글어서, 그 위에 걸친 마퀴 바 옆이 오목하게 파여 보였다) */
.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: 0; 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는 헤더의 flex 자식(justify-content:center)으로 두면
   제목/한줄소개 글자 길이에 따라 그룹 전체의 중앙정렬 위치가 바뀌면서 앵커 위치도
   같이 흔들려, 텍스트가 짧은 글에서는 탭이 헤더 중간 어딘가로 밀려버렸다.
   그래서 flex 흐름에서 아예 빼고 position:absolute; bottom:0;으로 헤더 맨 아래에
   직접 고정시켰다 — 이제 텍스트 길이와 무관하게 항상 같은 위치에 붙는다. */
.au-tabs-anchor { position: absolute; left: 0; right: 0; bottom: 0; height: 0; }
.au-tabs-wrapper {
    position: absolute; left: 0; right: 0; top: -61px;
    display: flex; overflow-x: auto; overflow-y: visible; white-space: nowrap; gap: 10px;
    -webkit-overflow-scrolling: touch;
    padding: 6px 20px 0; z-index: 2;   /* 검은 띠(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로 세로 중앙정렬하는 방식으로 바꿨다.
   ★ 배경을 반투명 그라데이션에서 불투명 단색으로 바꿨다 — 사진 배경이 어떻든
     늘 또렷하게 보이고, "허공에 붕 뜬" 느낌 없이 탭 밑에 딱 붙어있는 것처럼 보인다.

   ★ 높이 26px(-13 ~ +13) 시절에는 활성 탭 아랫변(-12)이 검은 띠 안으로 겨우 1px만
     들어가서, 탭이 띠 위에 얹힌 게 아니라 허공에 떠 있는 것처럼 보였다.
     위쪽으로 더 키워(-22 ~ +16) 탭 아랫부분을 확실히 물게 한다:
       활성 탭 아랫변 -12 → 띠 안으로 10px
       비활성 탭 아랫변 -6 → 띠 안으로 16px
     ★ 층 순서: 띠(z-index 3)가 탭(z-index 2)보다 위다. 띠가 탭 아랫부분을 덮어서
       탭이 띠 뒤로 꽂혀 들어간 것처럼 보인다.
       (덮인 부분은 탭 대신 띠가 클릭을 받는다 — 그 자리를 누르면 탭 전환이 아니라
        노래 재생/일시정지가 되므로, 탭은 덮이지 않은 윗부분을 눌러야 한다) */
.au-marquee-wrap {
    position: absolute; left: 0; right: 0; top: -22px; height: 38px; line-height: 38px;
    overflow: hidden; z-index: 3; white-space: nowrap;
    background: #16161c;
    cursor: pointer;
}
.au-marquee-track {
    display: inline-block; white-space: nowrap; color: #fff; font-size: 12px;
    font-weight: 600; letter-spacing: 0.2px;
    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; }

/* ══════════════════════════════════════════════════════════
   ★ 카드 · 전신 이미지 · 댓글창의 겹침을 정하는 값

   이 세 값이 style.css(카드)와 view_comment.skin.php(댓글창) 양쪽에서 쓰이는데,
   따로 적어두면 한쪽만 고쳤을 때 태그가 댓글에 깔리거나 버튼이 가려진다.
   그래서 한 곳에 모아 두고 양쪽이 calc()로 계산해 쓴다.
   (이 CSS는 이 게시판 스킨에서만 불러오므로 :root에 둬도 다른 페이지에 영향이 없다)
   ══════════════════════════════════════════════════════════ */
:root {
    --au-comment-overlap: 26px;  /* 댓글창이 카드 아랫부분을 덮는 깊이 */
    --au-comment-gap: 3px;       /* 태그와 댓글창 사이에 남길 틈 */
    --au-body-overhang: 26px;    /* 전신 이미지가 카드 밖으로 내려오는 길이 */
    /* ★ 장면 배경이 깔린 카드의 비네트(가장자리 그늘).
       --au-vignette 를 0 으로 두면 완전히 꺼진다. 0.3 은 은은하게, 0.6 은 진하게. */
    --au-vignette: 0.45;
    --au-vignette-size: 150px;   /* 그늘이 번지는 범위 */
    --au-vignette-spread: 30px;  /* 그늘이 안쪽으로 파고드는 깊이 */
}

/* 전시형 아카이브 메인 카드 */
/* ★ 카드 안쪽 여백을 줄였다(25px → 16px 20px 18px). 설명 칸이 유난히 커 보이던 원인은
   설명 박스 자체보다 카드 패딩 + 이미지·설명 사이 간격이 겹쳐 쌓인 탓이 컸다. */
.au-card-display {
    position: relative; display: none; background: #fff; border-radius: 0;
    box-shadow: 0 6px 20px rgba(0,0,0,0.03);
    /* ★ 아래 안여백 = 댓글창이 덮는 깊이 + 남길 틈.
       태그가 카드 맨 아래에 붙어 있으므로, 이만큼 확보해야 댓글창이 올라타도
       태그를 깔고 앉지 않고 딱 그 틈(기본 1px)만 두고 멈춘다. */
    padding: 16px 20px calc(var(--au-comment-overlap, 26px) + var(--au-comment-gap, 1px));
    /* 댓글창이 이 카드 위로 올라타야 하므로 바깥 아래 여백은 두지 않는다 */
    margin-bottom: 0;
    animation: fadeIn 0.3s ease-in-out;
    /* 왼쪽 정보 칼럼과 오른쪽 전신 이미지의 폭 배분.
       전신을 더 크게 보고 싶으면 --au-body-col 을 키우면 된다(합이 100%가 아니어도
       되지만, gap 때문에 95% 안쪽으로 두는 편이 안전하다). */
    --au-info-col: 42%;
    --au-body-col: 54%;
}
.au-card-display.active { display: block; }
.au-details-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
/* 태그는 정보 칼럼 맨 아래에 놓이므로 가운데 정렬을 풀고 왼쪽으로 흘린다 */
/* ★ 태그는 정보 칼럼 맨 아래 오른쪽에 붙인다.
   margin-top:auto 가 위쪽 남는 공간을 전부 밀어내므로, 무드보드 길이와 상관없이
   항상 본문 하단에 정렬된다. */
.au-side-col .au-details-tags {
    justify-content: flex-end; margin: 0 !important;
    margin-top: auto !important; flex: 0 0 auto;
}
/* 아래 띠가 있을 때의 태그 — 카드 폭 전체를 기준으로 오른쪽 아래 */
.au-details-tags.au-tags-bottom { justify-content: flex-end; margin: 12px 0 0; }
.au-tag-chip { background: #f1f2f6; color: #6c5ce7; padding: 4px 10px; border-radius: 6px; font-size: 13px; font-weight: 500; }
/* ★ line-height 1.7 → 1.55. pre-wrap이라 빈 줄 하나가 통째로 이 높이만큼 먹는데,
   1.7은 문단을 나눌 때마다 간격이 과하게 벌어져 보였다. */
.au-details-desc { font-size: 15px; line-height: 1.55; color: #57606f; white-space: pre-wrap; }

/* ══════════════════════════════════════════════════════════
   ★ 2단 레이아웃 — [정보 칼럼] | [전신 이미지]

   왼쪽 칼럼은 설명 → 프로필 → 무드 이미지 → 태그 순으로 세로로 쌓이고,
   오른쪽은 전신 이미지가 칼럼 하나를 통째로 쓴다. 예전 3단 배치([프로필]
   [전신][프로필])에서는 전신이 가운데 좁은 폭에 갇혀 있었는데, 이제 절반 이상을
   차지하므로 같은 카드 높이에서도 훨씬 크게 나온다.
   ══════════════════════════════════════════════════════════ */
/* ★ align-items를 stretch로 둬서 정보 칼럼이 전신 이미지와 같은 높이로 늘어난다.
   그래야 무드보드가 남는 세로 공간을 전부 차지하고, 태그는 맨 아래에 붙는다. */
.au-side-layout {
    display: flex; align-items: stretch; gap: 26px;
    flex-wrap: nowrap; margin-bottom: 0;
}
.au-side-col {
    flex: 1 1 var(--au-info-col, 42%); min-width: 0;
    display: flex; flex-direction: column; gap: 14px;
}
.au-body-col {
    flex: 0 1 var(--au-body-col, 54%); min-width: 0;
    display: flex; justify-content: center; align-items: flex-start;
}

/* ══ ★ 전신 이미지가 댓글창을 밟는 오버행 ══
   음수 아래여백으로 카드 높이를 그만큼 줄이면, 이미지가 카드 밖으로 흘러나와
   뒤따라오는 댓글 영역 위에 얹힌다. 뒤 형제 요소보다 위에 그려져야 하므로
   z-index를 올려 두었다(댓글 영역은 position이 없어 아래 층에 그려진다). */
.au-card-display.has-body-images .au-body-col {
    position: relative; z-index: 4;
    margin-bottom: calc(var(--au-body-overhang, 26px) * -1);
}
/* ★ 아래 가로 띠가 있으면 전신이 카드 밖으로 내려오면 안 된다 — 내려온 만큼
   띠와 태그를 덮어버린다. 이 탭에서는 오버행을 끄고, 댓글창 쪽에도 같은 사실을
   알려 준다(view.skin.php가 탭 전환용 style에 --au-body-overhang:0px 를 실어 보낸다). */
.au-card-display.has-mood-strip.has-body-images .au-body-col { margin-bottom: 0; }
/* ★ 이미지가 댓글창 위를 덮으면 그 아래 버튼이 눌리지 않는다(그림 픽셀이 클릭을
   먼저 가로챈다). 전신 이미지 자체는 누를 일이 없으므로 클릭을 통과시키고,
   실제로 눌러야 하는 것들(대사 마커 · 대사 ON/OFF · 대사창 · 스티커)에만
   다시 켜 준다. 겹치는 부분이 조금 넓어져도 댓글 버튼이 죽지 않는다. */
.au-card-display.has-body-images .au-body-images-display { pointer-events: none; }
.au-card-display.has-body-images .au-hotspot-marker,
.au-card-display.has-body-images .au-hotspot-toggle-btn,
.au-card-display.has-body-images .au-vn-dialogue { pointer-events: auto; }
/* 전신 이미지가 없는 탭은 정보 칼럼이 카드 폭을 그대로 쓴다 */
.au-card-display:not(.has-body-images) .au-side-col { flex-basis: 100%; }

/* ★ 왼쪽 배치 — 순서만 뒤집는다. 마크업은 그대로라 읽기 순서(설명 먼저)는 유지된다. */
.au-card-display.pos-left .au-side-layout { flex-direction: row-reverse; }

/* ══ ★ 가운데 배치 ══
   [프로필+무드][전신][프로필+무드] 3단. 세계관 설명은 그 위에 가로로 눕는다.
   전신만 위로 끌어올려 설명 아랫부분을 밟게 하고(--au-desc-step),
   양옆 기둥은 제자리에 둬서 설명 글자를 가리지 않게 한다. */
.au-center-layout {
    /* stretch — 양옆 기둥이 전신 이미지와 같은 높이를 갖게 한다 */
    display: flex; align-items: stretch; justify-content: center;
    gap: 18px; flex-wrap: nowrap; position: relative;
}
/* 기둥: 프로필은 위, 무드 묶음은 아래(전신 발치 높이)에 붙는다 */
.au-center-side {
    /* 남는 폭을 나눠 갖되(grow 1) 300px 에서 멈춘다 — 더 벌어지면 전신이 밀린다 */
    flex: 1 1 200px; min-width: 120px; max-width: 300px;
    display: flex; flex-direction: column; gap: 10px;
    justify-content: space-between;
}
.au-center-side .au-profile-panel { flex: 0 0 auto; }
.au-center-layout .au-body-col { flex: 1 1 auto; min-width: 0; justify-content: center; }

.au-card-display.pos-center { --au-desc-step: 26px; }
.au-card-display.pos-center .au-desc-top {
    position: relative; z-index: 1; margin-bottom: 14px;
}
/* 전신만 끌어올려 설명을 밟는다 (양옆 기둥은 그대로) */
.au-card-display.pos-center .au-center-layout .au-body-col {
    position: relative; z-index: 4;
    margin-top: calc(var(--au-desc-step, 26px) * -1);
}
/* ★ 가운데 배치에서는 전신이 --au-desc-step 만큼 위로 끌어올려져 세계관 설명 바로
   밑에 붙는다. 그래서 이미지 우상단의 대사 ON/OFF 버튼이 설명 글상자와 맞닿아
   답답해 보였다. 끌어올린 만큼(+여유) 버튼만 아래로 내려 준다. */
.au-card-display.pos-center .au-hotspot-toggle-btn {
    top: calc(var(--au-desc-step, 26px) + 16px);
}

/* 가운데 배치에서는 전신이 좌우 기둥 사이에 들어가므로 조금 낮춘다 */
.au-card-display.pos-center .au-body-images-display.count-1 .au-body-img-wrap img { max-height: 600px; }
.au-card-display.pos-center .au-body-images-display.count-2 .au-body-img-wrap img { height: auto; max-height: 560px; }

/* ══ ★ 카드 맨 아랫줄 — [스티커 편집 도구]              [키워드 태그] ══

   두 요소를 한 줄에 두되 한쪽으로 몰지 않고 각각 왼쪽 끝·오른쪽 끝에 붙인다.
   내용이 한쪽만 있어도 자리가 흔들리지 않도록 view.skin.php가 빈 칸까지 항상 그린다. */
.au-card-footer-row {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 12px; margin-top: 12px; position: relative; z-index: 5;
}
.au-card-footer-left  { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
.au-card-footer-right { display: flex; align-items: flex-end; min-width: 0; margin-left: auto; }

/* ★ 스티커 편집 · 탭 주소 복사 · 이미지 저장 — 전부 아이콘만, 26px 정사각.
   글자를 달고 있으면 줄이 길어져 옆(또는 위)의 키워드 태그와 부딪혔다.
   무슨 버튼인지는 title 툴팁이 알려 준다. */
.au-mini-btn {
    width: 26px; height: 26px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px dashed rgba(108,92,231,0.55); border-radius: 6px;
    background: rgba(255,255,255,0.8); color: #6c5ce7;
    font-size: 12px; line-height: 1; cursor: pointer; flex: 0 0 auto;
}
.au-mini-btn:hover, .au-mini-btn.is-on { background: #6c5ce7; color: #fff; border-style: solid; }
.au-mini-btn[disabled] { opacity: 0.55; cursor: default; }
.au-mini-msg { font-size: 12px; color: #8286a3; }

/* ★ 카드를 그림으로 찍는 동안에는 버튼만 잠깐 감춘다.
   display:none 이 아니라 visibility 로 감춰야 자리가 그대로 남아 레이아웃이 흔들리지
   않는다. 태그는 남겨서 저장된 그림에도 그대로 찍히게 한다. */
.au-card-display.au-capturing .au-card-footer-left,
.au-card-display.au-capturing .au-hotspot-toggle-btn,
.au-card-display.au-capturing .au-vn-dialogue { visibility: hidden !important; }
/* ★ .au-sticker-editbar 자체가 margin-top:12px 을 들고 있어서, 도구 묶음 안에서
   스티커 편집 버튼만 다른 두 버튼보다 살짝 내려가 보였다. 묶음 안에서는 항상 0. */
.au-card-footer-left .au-sticker-editbar { margin-top: 0; align-items: center; }
.au-card-footer-row .au-details-tags.au-tags-bottom { margin: 0; }

/* ★ 아래 가로 띠가 없는 탭에서는 전신 이미지가 카드 밖으로 내려와 댓글창을 밟기로
   되어 있다(--au-body-overhang). 그런데 이 줄이 흐름에 남아 있으면 그 높이만큼
   카드가 길어져서 이미지가 댓글창에 닿지 못한다. 흐름에서 빼 카드 바닥에 붙여
   높이에 영향을 주지 않게 한다. 위치는 카드 안여백 기준이라 아래 띠·태그가 있던
   자리와 같고, 전신은 가운데라 좌우 끝의 이 줄과 겹치지 않는다.
   (전신 이미지 z-index 4 위에 올라와야 버튼이 눌리므로 5로 둔다) */
.au-card-display.has-body-images:not(.has-mood-strip) .au-card-footer-row {
    position: absolute; left: 20px; right: 20px;
    bottom: calc(var(--au-comment-overlap, 26px) + var(--au-comment-gap, 1px));
    margin-top: 0;
}

/* ══ ★ 정보 칼럼 맨 아래 — 키워드 태그 + 도구 버튼 한 덩어리 ══
   버튼을 카드 바닥에 따로 띄워두면 전신이 왼쪽일 때 이미지 위에 얹히고 태그와도
   같은 높이에서 부딪힌다. 태그 아래에 세로로 붙여 한 덩어리로 다룬다. */
.au-side-bottom {
    display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
    margin-top: auto; flex: 0 0 auto;
}
.au-side-bottom .au-details-tags { margin: 0 !important; justify-content: flex-end; }
.au-side-bottom .au-card-footer-left { justify-content: flex-end; }

/* 칼럼 안에서는 gap이 간격을 담당하므로 개별 아래 여백을 없앤다
   (단 위 덩어리는 margin-top:auto 로 바닥에 붙어야 하므로 예외로 둔다) */
.au-side-col > * { margin-bottom: 0 !important; margin-top: 0 !important; }
.au-side-col > .au-side-bottom { margin-top: auto !important; }

/* 쓰기 페이지 빌더 폼 레이아웃 */
.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; }
/* ★ 예전에는 이 규칙이 체크박스·라디오·색상선택기·슬라이더까지 전부 잡아서
   width:100%와 padding:10px가 걸렸다. 그래서 "목록 전용" 체크박스가 한 줄을
   통째로 차지하며 글자와 따로 떨어져 어중간한 위치에 뜨는 문제가 있었다.
   글자를 입력하는 컨트롤에만 적용되도록 대상을 좁힌다. */
.au-edit-row input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]):not([type="file"]),
.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 input[type="checkbox"], .au-edit-row input[type="radio"] {
    width: auto; padding: 0; margin: 0; border: 0; flex: none; vertical-align: middle;
}
.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 이미지 관련 공용 셀렉터 스타일 */
.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 카드 레이아웃: 전신 이미지(1~2장) 중앙 + 양옆 간략 프로필
   (예전 캐릭터1·무드·캐릭터2 트리오 구성을 대체) — 모바일에서는 세로로 쌓인다.
   ══════════════════════════════════════════════════════════ */
/* ══ 프로필 두 장을 나란히 ══
   예전에는 전신 이미지 좌우에 하나씩 떨어져 있어서 오른쪽 프로필만 글머리가
   왼쪽 정렬, 왼쪽 프로필은 오른쪽 정렬이라 서로 거울처럼 어긋나 있었다.
   이제 같은 칼럼 안에서 나란히 놓이므로 정렬을 왼쪽으로 통일하고, 좁은 폭에서도
   읽히도록 이름/한마디/항목의 크기와 간격을 다시 잡는다. */
.au-profile-row {
    display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap;
}
.au-profile-panel {
    flex: 1 1 0; min-width: 132px;
    padding: 12px 14px; background: #f8f9fc; border-radius: 12px;
    text-align: left;
}
/* 좌우 구분용 클래스는 남겨두되, 정렬은 더 이상 좌우로 갈리지 않는다 */
.au-profile-panel-left, .au-profile-panel-right { text-align: left; }
.au-profile-name {
    margin: 0 0 4px 0; font-size: 15.5px; font-weight: 700; color: #2f3542;
    line-height: 1.3; word-break: keep-all;
}
.au-profile-line {
    margin: 0 0 9px 0; font-size: 12.5px; color: #6c5ce7; font-style: italic;
    line-height: 1.45; word-break: keep-all;
}
/* 이름과 항목 사이를 옅은 선으로 갈라 정보 덩어리를 구분한다 */
.au-profile-extra-list {
    margin: 0; padding-top: 8px;
    border-top: 1px solid rgba(130,134,163,0.22);
}
.au-profile-extra-item { margin-bottom: 5px; font-size: 12px; line-height: 1.45; }
.au-profile-extra-item:last-child { margin-bottom: 0; }
.au-profile-panel-left .au-profile-extra-item { text-align: left; }
.au-profile-extra-item dt { font-weight: 700; color: #8286a3; display: inline; }
.au-profile-extra-item dt::after { content: ' · '; }
.au-profile-extra-item dd { display: inline; margin: 0; color: #57606f; }

/* ══ 전신 이미지 ══
   ★ width:100% 였던 것을 내용에 맞게 줄어들도록 바꿨다. 이 상자가 곧 스티커
   좌표의 기준이라, 칼럼 폭이 아니라 이미지 크기에 맞아야 글쓰기 화면의
   미리보기와 비율이 같아진다(크기는 달라도 비율만 같으면 %는 그대로 맞는다). */
.au-body-images-display {
    position: relative; width: auto; max-width: 100%; min-width: 0;
    /* ★ align-items 를 flex-start 로 못 박는다.
       기본값 stretch 로 두면 칸(.au-body-img-wrap)이 옆 그림 높이에 맞춰 늘어날 수
       있는데, 대사 마커는 그 칸을 기준으로 백분율로 찍히므로 칸이 그림보다 커지는
       순간 마커가 그림 위 엉뚱한 곳을 가리킨다. 칸은 언제나 제 그림에 딱 맞아야 한다.
       (두 장을 나란히 세우는 경우는 아래 count-2 규칙이 flex-end 로 덮어쓴다) */
    display: flex; gap: 8px; justify-content: center; align-items: flex-start;
}

/* ★ 전신 이미지는 이제 각각 .au-body-img-wrap으로 감싸는데, 이게 대사 마커의
   위치 기준점(position:relative) 역할을 한다. */
.au-body-img-wrap { position: relative; display: inline-block; line-height: 0; }
.au-body-img-wrap img {
    border-radius: 12px; box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    object-fit: contain; display: block;   /* ★ cover 로 잘라내면 대사 마커가 그림과 어긋난다 (아래 설명) */
}
/* ★ 전신 이미지를 더 크고 시원하게 — 요청하신 참고 이미지 정도의 존재감을 주려고
   기존보다 한 단계 키웠다. */
/* ★ 칼럼 하나를 통째로 쓰므로 예전(560px)보다 키워도 카드가 무너지지 않는다 */
.au-body-images-display.count-1 .au-body-img-wrap img { max-height: 720px; max-width: 100%; width: auto; }
/* ★ 두 캐릭터를 나란히 두면 폭을 너무 많이 먹어서 옆 프로필이 밀려난다.
   음수 margin으로 살짝 겹쳐 세워 전체 폭을 줄이고, 두 사람이 붙어 서 있는
   느낌도 함께 낸다. gap을 0으로 두고 겹침량만 margin으로 조절한다. */
.au-body-images-display.count-2 { align-items: flex-end; gap: 0; }
.au-body-images-display.count-2 .au-body-img-wrap { max-width: none; }
.au-body-images-display.count-2 .au-body-img-wrap + .au-body-img-wrap { margin-left: -6%; }
/* 뒤에 오는 쪽이 위로 올라와 겹쳐 보이게 */
.au-body-images-display.count-2 .au-body-img-wrap:first-child { z-index: 1; }
.au-body-images-display.count-2 .au-body-img-wrap:last-child { z-index: 2; }
/* ★ 높이를 660px 로 못 박지 않는다.
   예전에는 두 장의 키를 맞추려고 height 를 고정했는데, 가로로 긴 그림은 그 높이에서
   폭이 카드를 넘겨서 max-width 에 걸려 잘렸다(object-fit:cover). 그러면 상자와 그림의
   비율이 어긋나고, 대사 마커는 상자 기준 백분율이라 그림 위 엉뚱한 곳을 가리키게 된다.
   max-height 로 바꾸면 어떤 그림이든 원래 비율이 유지되고 잘리지 않는다.
   두 장의 키가 다를 수 있지만 아래쪽(flex-end)으로 나란히 서므로 어색하지 않다. */
.au-body-images-display.count-2 .au-body-img-wrap img { height: auto; max-height: 660px; width: auto; max-width: 100%; }

/* ★ 배경 이미지(body_bg)가 지정된 경우: 카드 전체(프로필 · 전신이미지 · 무드이미지 ·
   태그 · 설명까지 전부)에 이 배경이 깔리고, 그 위에 모든 요소가 반투명 유리질감
   패널로 떠 있는 것처럼 보이게 한다. 흰 배경이 하나도 안 보이도록,
   전신 이미지의 개별 테두리/그림자(object-fit:contain으로 실루엣만 살림)와
   프로필·설명·태그의 불투명 배경을 전부 투명/반투명으로 바꾼다. */
.au-card-display.has-scene-bg {
    background-color: transparent; background-size: cover; background-position: center center; background-repeat: no-repeat;
    border-left-color: rgba(255,255,255,0.4);
    /* ★ 비네트 — 가장자리를 안쪽으로 어둡게 깔아 준다.
       빈 공간을 채우는 대신 "빈 곳"이 아니라 "무대"로 읽히게 만드는 쪽이다.
       안쪽 그림자라 배경 위·내용 아래에 그려지므로 겹침 순서를 건드리지 않고,
       글자나 사진을 가리지도 않는다. 세기·범위는 아래 :root 값으로 조절한다.
       (원래 카드가 갖고 있던 바깥 그림자는 뒤에 그대로 붙여 둔다) */
    box-shadow:
        inset 0 0 var(--au-vignette-size, 150px) var(--au-vignette-spread, 30px) rgba(0,0,0,var(--au-vignette, 0.45)),
        0 6px 20px rgba(0,0,0,0.03);
}
.au-card-display.has-scene-bg .au-body-img-wrap img {
    border-radius: 0; box-shadow: none; background: transparent; object-fit: contain;
}
/* 토글 버튼이 박스 위로 삐져나가지 않으니, 전신 이미지 박스 자체엔 여백이 거의 필요 없다 */
.au-card-display.has-scene-bg .au-body-images-display { padding: 0; }

/* ★ 프로필 패널 · 태그 · 설명 박스의 색은 글쓰기 폼에서 AU마다 지정한 값을 쓴다.
   (--au-panel-bg / --au-panel-fg는 view.skin.php가 카드에 인라인으로 넣어준다.
    지정 전 기존 글을 위해 기본값도 함께 둔다) */
.au-card-display.has-scene-bg .au-profile-panel {
    background: var(--au-panel-bg, rgba(20,20,25,0.4));
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.12);
}
.au-card-display.has-scene-bg .au-profile-name { color: var(--au-panel-fg, #fff); text-shadow: 0 1px 4px rgba(0,0,0,0.6); }
.au-card-display.has-scene-bg .au-profile-line { color: var(--au-panel-fg, #d9d3ff); opacity: 0.85; text-shadow: 0 1px 3px rgba(0,0,0,0.55); }
.au-card-display.has-scene-bg .au-profile-extra-item dt { color: var(--au-panel-fg, #e3e1f5); opacity: 0.75; }
.au-card-display.has-scene-bg .au-profile-extra-item dd { color: var(--au-panel-fg, #fff); text-shadow: 0 1px 3px rgba(0,0,0,0.5); }

/* 태그 칩도 같은 박스색/글자색을 따라간다 */
.au-card-display.has-scene-bg .au-tag-chip {
    background: var(--au-panel-bg, rgba(255,255,255,0.18));
    color: var(--au-panel-fg, #fff); text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

/* 설명 텍스트도 동일한 박스색을 사용해 통일감을 준다.
   ★ 위아래 안여백을 14px → 11px로 줄이고, 겹침이 있는 카드에서는 위쪽만
      따로 키우도록 아래 has-body-images 규칙이 덮어쓴다. */
/* ══ ★ 세계관 설명 칸 ══
   프로필 칸과 같은 사각 박스라 둘이 구분되지 않아, 설명 쪽에만 변주를 줬다.
   글꼴·크기·자간은 그대로 두고 "틀"만 바꿔서 가독성은 손대지 않는다.
     · 왼쪽에 굵은 강조 막대 → 인용문처럼 읽히는 도입부
     · 좌우 비대칭 모서리   → 프로필의 균일한 둥근 사각형과 대비
     · 위에서 아래로 옅어지는 배경 → 같은 색을 쓰되 질감이 달라 보인다 */
.au-card-display.has-scene-bg .au-details-desc {
    /* ⚠ text-shadow 는 여기 적지 말 것 — 파일 아래쪽 같은 셀렉터가 더 진한 값으로 덮는다 */
    color: var(--au-panel-fg, #fff);
    background:
        linear-gradient(160deg, rgba(255,255,255,0.10), rgba(255,255,255,0) 55%),
        var(--au-panel-bg, rgba(20,20,25,0.35));
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    padding: 13px 18px 15px 20px;
    border-radius: 3px 16px 16px 3px;
    border-left: 4px solid var(--au-panel-fg, #fff);
    position: relative;
}
/* 강조 막대는 글자색을 그대로 쓰되 옅게 — 어떤 색을 골라도 어울린다 */
.au-card-display.has-scene-bg .au-details-desc { border-left-color: color-mix(in srgb, var(--au-panel-fg, #fff) 55%, transparent); }
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    /* color-mix를 모르는 브라우저는 그냥 흰 막대로 */
    .au-card-display.has-scene-bg .au-details-desc { border-left-color: rgba(255,255,255,0.55); }
}

/* 배경 이미지가 없는 흰 카드에서도 같은 변주를 준다 */
.au-card-display:not(.has-scene-bg) .au-details-desc {
    padding: 13px 16px 15px 18px;
    border-radius: 3px 16px 16px 3px;
    border-left: 4px solid rgba(108,92,231,0.45);
    background: linear-gradient(160deg, rgba(108,92,231,0.07), rgba(108,92,231,0) 60%);
}
/* 배경 이미지가 깔린 카드는 설명 글자가 밝은 색이라 배경 무늬에 묻히기 쉽다.
   진한 그림자를 깔아 어떤 배경 위에서도 읽히게 한다.
   (예전 '전신이 설명을 밟는' 겹침용 padding-top은 2단 배치로 바뀌며 사라졌다) */
.au-card-display.has-scene-bg .au-details-desc {
    text-shadow: 0 1px 3px rgba(0,0,0,0.85), 0 0 6px rgba(0,0,0,0.6);
}

/* 무드 이미지 썸네일 배경(빈 여백 채우던 회색)도 투명하게 — 이미지 자체 그림자로 구분되게 */
.au-card-display.has-scene-bg .au-extra-img-cell { background: rgba(255,255,255,0.1); }

@media (max-width: 640px) {
    .au-card-display { padding: 14px 14px 16px; }
    /* ★ 좁은 화면에서는 2단을 세로로 쌓는다. 이때 전신 이미지를 먼저 보여주는 게
       카드북답고(order:-1), 설명·프로필은 그 아래에서 읽게 한다. */
    /* ★ 스티커는 카드 전체 기준의 백분율 좌표라, 칼럼이 세로로 쌓이면 카드 모양이
       완전히 달라져 엉뚱한 자리에 얹힌다. 좁은 화면에서는 아예 숨긴다.
       (데이터는 그대로 남아 있고, 넓은 화면에서 보면 원래 자리에 그대로 보인다) */
    .au-sticker-layer { display: none; }
    .au-sticker-editbar { display: none; }
    /* 세로로 쌓이면 오버행 자체를 끄므로, 맨 아랫줄도 흐름 안으로 되돌린다 */
    .au-card-display.has-body-images:not(.has-mood-strip) .au-card-footer-row {
        position: static; margin-top: 12px;
    }
    .au-card-footer-row { flex-wrap: wrap; gap: 8px; }

    .au-side-layout { flex-direction: column; gap: 16px; align-items: stretch; }
    /* 왼쪽 배치의 뒤집기는 세로로 쌓일 때 의미가 없다 */
    .au-card-display.pos-left .au-side-layout { flex-direction: column; }
    /* 가운데 배치도 세로로: 설명 → 전신 → 프로필 기둥 순서 */
    .au-center-layout { flex-direction: column; align-items: stretch; gap: 14px; }
    .au-center-side { flex-basis: auto; }

    .au-card-display.pos-center .au-center-layout .au-body-col { order: -1; margin-top: 0; }
    .au-card-display.pos-center .au-body-images-display.count-1 .au-body-img-wrap img { max-height: 420px; }
    .au-side-col, .au-body-col { flex-basis: auto; width: 100%; }
    /* 세로로 쌓이면 이미지가 댓글창까지 닿지 않으므로 오버행과 겹침을 끈다 */
    .au-card-display.has-body-images .au-body-col { order: -1; margin-bottom: 0; }
    /* 세로 배치에서는 무드보드가 남는 높이를 먹을 필요가 없다 */
    .au-extra-img-grid { grid-auto-rows: auto; flex: 0 0 auto; min-height: 0; }
    .au-extra-img-cell { aspect-ratio: 1/1; }
    .au-side-col .au-details-tags { margin-top: 0 !important; justify-content: flex-start; }
    .au-side-bottom { align-items: flex-start; margin-top: 0 !important; }
    .au-side-col > .au-side-bottom { margin-top: 0 !important; }
    .au-side-bottom .au-details-tags,
    .au-side-bottom .au-card-footer-left { justify-content: flex-start; }
    .au-profile-panel-left, .au-profile-panel-right { order: initial; text-align: center; max-width: 100%; width: 100%; box-sizing: border-box; }
    .au-profile-panel-left .au-profile-extra-item { text-align: center; }
    .au-body-images-display.count-1 .au-body-img-wrap img { max-height: 420px; }
    .au-body-images-display.count-2 .au-body-img-wrap img { height: auto; max-height: 340px; }
    /* 좁은 화면에선 더 많이 겹쳐서 두 캐릭터가 화면 안에 들어오게 한다 */
    .au-body-images-display.count-2 .au-body-img-wrap + .au-body-img-wrap { margin-left: -10%; }
}

/* ★ 이 탭의 키워드 태그를 전신 이미지 위쪽에 먼저 보여줄 때 쓰는 위치용 클래스 */


/* ══════════════════════════════════════════════════════════
   ★ 전신 이미지 대사 핫스팟 — 뷰 페이지(on/off + 말풍선)와
   쓰기 폼 에디터(위치 찍기)가 마커 모양(.au-hotspot-marker)을 공유하지만,
   뷰 페이지에서는 마커 자체를 투명한 "클릭 영역"으로만 쓴다(아래 참고).
   ══════════════════════════════════════════════════════════ */
.au-hotspot-marker {
    position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px;
    border-radius: 50%; background: rgba(108,92,231,0.88); border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.35); cursor: pointer; padding: 0; z-index: 2;
}
.au-hotspot-marker::before {
    content: ''; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px;
    background: #fff; border-radius: 50%; transform: translate(-50%, -50%);
}
/* ★ 쓰기 폼 에디터에서만: 왼쪽/오른쪽 화자를 색으로 구분해서 한눈에 보이게 한다
   (뷰 페이지에서는 어차피 투명 처리되므로 이 색상 차이가 보이지 않는다). */
.au-hotspot-editor .au-hotspot-marker.speaker-right { background: rgba(255,107,157,0.88); }

/* ★ 뷰 페이지에서는 마커가 캐릭터를 가리면 미관상 안 좋으므로 완전히 투명하게
   처리한다 — off일 땐 클릭도 안 되고(pointer-events:none), on으로 켜면 보이지
   않는 채로 그 위치만 클릭할 수 있게 된다(설정 화면이 아니므로 안 보여도 된다). */
.au-body-img-wrap .au-hotspot-marker {
    background: transparent; border: none; box-shadow: none; animation: none;
    pointer-events: none;
}
.au-body-img-wrap .au-hotspot-marker::before { display: none; }
.au-card-display.hotspot-mode .au-body-img-wrap .au-hotspot-marker { pointer-events: auto; }

/* ★ 토글 버튼: 이미지 박스 우상단 모서리 안쪽에 겹쳐서 배치 — 위로 삐져나가지
   않으므로 배경이 그 자리까지 빈틈없이 채워진다. 사진 위에서도 잘 보이도록
   반투명 유리질감 스타일을 썼다(헤더의 목록/수정 버튼과 같은 톤). */
.au-hotspot-toggle-btn {
    position: absolute; top: 10px; right: 10px; z-index: 3;
    display: flex; align-items: center; gap: 5px; white-space: nowrap;
    background: rgba(20,20,25,0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.28); color: #fff;
    font-size: 11.5px; font-weight: 600; padding: 5px 12px; border-radius: 20px;
    cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.25); transition: all 0.15s;
}
.au-hotspot-toggle-btn:hover, .au-hotspot-toggle-btn.active { background: rgba(108,92,231,0.85); border-color: rgba(108,92,231,0.9); }

/* ★ 대사창: 라이트노벨/비주얼노벨처럼 전신 이미지 영역 하단에 폭 전체로 뜬다.
   좌/우 구분이 없어졌으니(캐릭터가 몇 명이든, 어느 쪽을 클릭하든 같은 자리에
   뜬다) 예전의 코너 앵커 방식보다 캐릭터 위치가 바뀌어도 신경 쓸 게 없다. */
/* ★ 창은 아래쪽(bottom:10px)에 못박혀 있으므로, 높이를 키우면 아래로 내려가지 않고
   위로 자란다. 최소 높이를 줘서 한 줄짜리 대사도 허전하지 않게 하고, 긴 대사는
   이미지 높이의 절반까지 자라다가 그 안에서 스스로 넘겨 읽게 한다. */
.au-vn-dialogue {
    position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 6;
    background: rgba(15,15,20,0.9); color: #fff;
    padding: 18px 44px 18px 20px; border-radius: 14px;
    min-height: 108px; max-height: 55%;
    /* 창 자체는 넘치지 않게 두고, 긴 대사는 안쪽 글상자만 넘겨 읽는다 —
       그래야 닫기 버튼이 스크롤에 딸려 올라가지 않고 늘 오른쪽 위에 남는다 */
    display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.25);
    transform: translateY(110%); opacity: 0; pointer-events: none;
    transition: transform 0.25s ease, opacity 0.2s ease;
}
.au-vn-dialogue.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.au-vn-dialogue-name { flex: 0 0 auto; font-size: 13.5px; font-weight: 700; color: #b8a9ff; margin-bottom: 7px; }
.au-vn-dialogue-name:empty { display: none; }
.au-vn-dialogue-text {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    font-size: 14px; line-height: 1.75; white-space: pre-wrap;
}
/* 닫기 버튼은 창(스크롤되지 않는 바깥 상자) 기준이라 늘 오른쪽 위에 남는다 */
.au-vn-dialogue-close {
    position: absolute; top: 10px; right: 12px; background: none; border: none;
    color: rgba(255,255,255,0.65); font-size: 15px; cursor: pointer; padding: 4px 6px; line-height: 1;
}
.au-vn-dialogue-close:hover { color: #fff; }

/* ══════════════════════════════════════════════════════════
   ★ 스티커 레이어
   기준 상자(.au-body-images-display) 위에 절대좌표로 얹는다.
   overflow를 막지 않아서 이미지 밖 카드 여백까지 삐져나갈 수 있고,
   보기 화면에서는 클릭을 가로채지 않도록 pointer-events를 끈다
   (그래야 밑에 있는 대사 마커를 그대로 누를 수 있다).
   ══════════════════════════════════════════════════════════ */
.au-sticker-layer {
    position: absolute; inset: 0; pointer-events: none; z-index: 6;
}
.au-sticker {
    position: absolute; display: block; height: auto;
    transform-origin: center center;
    will-change: transform;
}

/* ── 보기 화면의 스티커 편집 도구막대 (관리자·글쓴이에게만 보인다) ── */
.au-sticker-editbar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-top: 12px; position: relative; z-index: 5;
}
.au-st-edit-controls { margin-top: 0 !important; }
.au-st-msg { font-size: 12px; color: #6c5ce7; }
/* 편집 중일 때만 스티커를 집을 수 있다 (평소에는 클릭이 통과된다) */
.au-card-display.sticker-editing .au-sticker-layer.editable { pointer-events: none; }
.au-card-display.sticker-editing .au-sticker-layer.editable .au-sticker {
    pointer-events: auto; cursor: grab; touch-action: none;
    outline: 2px dashed rgba(108,92,231,0.45); outline-offset: 2px;
}
/* ══ ★ 크기·회전 손잡이 ══
   고른 스티커 위에 같은 자리·같은 각도로 겹쳐 놓는 얇은 테두리.
   테두리 자체는 클릭을 통과시키고, 손잡이만 잡힌다. */
.au-st-gizmo {
    position: absolute; pointer-events: none;
    border: 1px solid #6c5ce7; border-radius: 2px;
    box-sizing: border-box;
}
.au-st-h {
    position: absolute; width: 12px; height: 12px; box-sizing: border-box;
    background: #fff; border: 2px solid #6c5ce7; border-radius: 50%;
    pointer-events: auto; touch-action: none;
}
.au-st-h.nw { left: -6px;  top: -6px;    cursor: nwse-resize; }
.au-st-h.ne { right: -6px; top: -6px;    cursor: nesw-resize; }
.au-st-h.sw { left: -6px;  bottom: -6px; cursor: nesw-resize; }
.au-st-h.se { right: -6px; bottom: -6px; cursor: nwse-resize; }
/* 회전 손잡이는 위쪽으로 조금 띄워 막대에 매단 것처럼 보이게 한다 */
.au-st-h.rot {
    left: 50%; top: -30px; margin-left: -7px;
    width: 14px; height: 14px; background: #6c5ce7; border-color: #fff;
    cursor: grab; box-shadow: 0 1px 4px rgba(0,0,0,.35);
}
.au-st-h.rot::before {
    content: ''; position: absolute; left: 50%; top: 100%;
    width: 2px; height: 18px; margin-left: -1px; background: #6c5ce7;
}

.au-card-display.sticker-editing .au-sticker-layer.editable .au-sticker.selected {
    outline: 2px solid #6c5ce7; box-shadow: 0 0 0 4px rgba(108,92,231,0.2);
}

/* (글쓰기 폼 전용 스티커 무대 스타일은 제거했다 — 스티커는 이제 글을 보는
    화면에서만 붙이므로, 미리보기용 가짜 무대가 더는 필요 없다) */


.au-sticker-controls {
    margin-top: 10px; padding: 12px 14px; border-radius: 8px;
    background: #fff; border: 1px solid #e4e7eb;
    display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap;
}
/* (label · input[type=range] 규칙은 지웠다 — 크기·회전이 슬라이더에서 손잡이 방식으로
    바뀌면서 도구막대에 label 도 range 도 더는 없다. .au-st-num 은 지금도 쓰인다) */
.au-sticker-controls .au-st-num { min-width: 44px; color: #8286a3; font-size: 12px; }
.au-sticker-controls button {
    padding: 6px 11px; border: 1px solid #ced6e0; border-radius: 6px;
    background: #fff; font-size: 12.5px; color: #57606f; cursor: pointer;
}
.au-sticker-controls button:hover { background: #f1f2f6; }
.au-sticker-controls .au-st-del { border-color: #ffb8b8; color: #e55; }
.au-sticker-controls .au-st-del:hover { background: #ffecec; }

/* 쓰기 폼: 전신 이미지를 클릭해서 대사 위치를 찍는 에디터 */
.au-hotspot-editor { margin-top: 8px; }
.au-hotspot-editor .au-img-hint { display: block; margin-top: 5px; }
/* ★ 캔버스는 이미지에 딱 맞게 줄어든다 (뷰의 .au-body-img-wrap 과 같은 방식).
   예전처럼 3:4 고정 상자에 background-size:contain 으로 깔면, 3:4가 아닌 이미지는
   상자 안에 여백이 생긴다. 그 여백까지 포함한 상자 기준으로 클릭 %가 저장되는데
   뷰에서는 이미지 기준으로 마커를 찍으므로, 세로로 긴 그림은 좌우로, 가로로 긴
   그림은 위아래로 마커가 밀렸다(가로 3:2 이미지에서 최대 25%p까지 어긋남).
   상자와 이미지를 같게 만들어 두 화면이 같은 좌표계를 쓰게 한다. */
.au-hotspot-canvas {
    position: relative; display: inline-block; vertical-align: top;
    max-width: 100%; line-height: 0; border-radius: 6px;
    background-color: #eceef5; cursor: not-allowed; border: 1px solid #ced6e0;
}
.au-hotspot-canvas-img {
    display: block; max-width: 100%; max-height: 460px;
    width: auto; height: auto; border-radius: 5px;
}
/* 이미지가 없을 때만 예전처럼 3:4 빈 상자를 보여준다 */
.au-hotspot-editor:not(.has-img) .au-hotspot-canvas {
    display: block; width: 100%; aspect-ratio: 3/4;
}
.au-hotspot-editor:not(.has-img) .au-hotspot-canvas-img { display: none; }
.au-hotspot-empty {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 84%; text-align: center; line-height: 1.5;
    font-size: 12.5px; color: #98a0b3;
}
.au-hotspot-editor.has-img .au-hotspot-empty { display: none; }
.au-hotspot-editor.has-img .au-hotspot-canvas { cursor: crosshair; }
.au-hotspot-editor .au-hotspot-marker { animation: none; }

/* AU 카드 추가 이미지 (최대 5장, 설명 아래 별도 그리드) */
/* ★ 열 수는 view.skin.php가 장수에 맞춰 계산해 인라인으로 넘긴다.
   여기 값은 그게 없을 때를 위한 예비값. */
/* ★ 옆에 거는 무드 이미지 (1개 또는 3개).
   예전에는 이 격자가 남는 세로를 전부 먹도록 늘렸는데, 세계관 설명이 길어지면
   칼럼이 함께 길어지면서 격자가 세로로 늘어져 보기 나빴다. 이제 정사각 한 줄로
   고정하고, 남는 이미지는 카드 아래 가로 띠로 내린다. */
.au-extra-img-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 7px; margin-top: 0; flex: 0 0 auto;
}
.au-extra-img-cell {
    border-radius: 8px; overflow: hidden; background: #f1f2f6;
    aspect-ratio: 1/1; min-height: 0;
}

/* ══ 카드 아래 가로 띠 ══
   카드 폭 전체에 한 줄로 길게. 태그 바로 위, 전신 이미지 아래에 놓인다. */
.au-mood-strip {
    display: grid; gap: 8px; margin-top: 14px;
}
/* 한두 장만 내려왔을 때는 폭을 다 늘리지 않고 가운데로 모은다 —
   카드 폭 전체를 두 장이 나눠 가지면 무드보드가 아니라 배너처럼 보인다 */
.au-mood-strip.few { justify-content: center; }
/* 화면에서 재서 다시 나눈 결과 띠가 비면 자리째 감춘다 */
.au-mood-strip:empty { display: none; }
.au-mood-strip .au-extra-img-cell { aspect-ratio: 1/1; }
.au-center-side .au-extra-img-cell { aspect-ratio: 1/1; }
.au-extra-img-cell img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }

/* ══ ★ 가운데 배치 기둥 안의 무드 묶음 ══
   기둥은 좁고 세로로 길다. 그래서 1열로 쌓고, 남은 세로를 사진들이 나눠 갖는다.

   ⚠ .au-extra-img-grid(파일 뒤쪽) 보다 셀렉터가 강해야 한다 — 클래스 2개를 유지할 것 */
.au-center-side .au-mood-pillar {
    grid-template-columns: 1fr;
    /* ⚠ flex-basis 는 0 이어야 한다. auto 면 안쪽 사진이 요구하는 높이가 기둥의
       기본 크기가 되어 카드가 통째로 길어진다. 0 이면 전신이 정한 높이에서 남는
       만큼만 받아 가므로, 전신이 작으면 옆 사진도 함께 작아진다. */
    flex: 1 1 0;
    min-height: 0;                     /* 안쪽 내용이 기둥을 밀어 올리지 못하게 */
    overflow: hidden;
    grid-auto-rows: minmax(0, 1fr);    /* 받은 높이를 사진들이 고르게 나눈다 */
    align-content: stretch;
}
/* ⚠ align-self 를 건드리지 말 것 — 칸이 줄 높이 대신 그림 원래 높이를 갖게 되어
   세로로 긴 그림이 위 칸을 덮어쓴다(사진이 겹쳐 보인다). 높이 상한도 두지 않는다:
   옆에 몇 장을 걸지는 skin.js 가 재서 정하므로 이중으로 막을 필요가 없다. */
.au-center-side .au-mood-pillar .au-extra-img-cell {
    aspect-ratio: auto; min-height: 0;
}
/* 한 장뿐일 때까지 늘리면 세로로 과하게 길어진다 — 정사각으로 두고 기둥 아래에 붙인다 */
.au-center-side .au-mood-pillar.count-1 { flex: 0 0 auto; grid-auto-rows: auto; }
.au-center-side .au-mood-pillar.count-1 .au-extra-img-cell { aspect-ratio: 1/1; }

/* 좌/우 배치의 옆 격자 — 2열. flex-basis 0 인 이유는 기둥과 같다.
   설명이 길어 자리가 거의 없을 때만 최소 높이로 버틴다. */
.au-side-col .au-mood-side {
    flex: 1 1 0; min-height: 120px; overflow: hidden;
    grid-auto-rows: minmax(0, 1fr); align-content: stretch;
}
/* 같은 이유로 여기도 높이 상한을 두지 않는다 — 줄 높이에 그대로 맞춘다 */
.au-side-col .au-mood-side .au-extra-img-cell { aspect-ratio: auto; min-height: 0; }
/* 홀수로 끝나면 마지막 한 장이 두 칸을 차지해 오른쪽 아래 구멍을 없앤다 */
/* 마지막 줄에 빈칸이 하나 남을 때 끝 장을 두 칸으로 늘려 메운다.
   2열 홀수뿐 아니라 3열에서 한 칸 비는 경우도 같다 — 붙였다 떼는 쪽은 auFitSideCols. */
.au-mood-side.odd-tail > .au-extra-img-cell:last-child { grid-column: span 2; }
/* 사진이 전부 아래 띠로 내려가 옆이 비었을 때 — 빈 격자가 gap 만큼 자리를 남기지 않게.
   :empty 대신 클래스를 쓰는 이유는 마크업의 줄바꿈이 자식으로 세어지기 때문(auFitSideCols 가 붙인다). */
.au-mood-side.is-empty { display: none; }

/* ══ ★ 무드 사진 기울기 ══
   저장된 각도만큼 살짝 돌린다. 돌린 사진이 이웃을 밀어내지 않도록 칸 자체는
   그대로 두고 안쪽만 기울이며, 모서리가 잘리지 않게 아주 조금 줄여 둔다. */
.au-extra-img-cell[data-rot] {
    transform: rotate(var(--au-mood-rot, 0deg)) scale(0.97);
    transition: transform 0.15s ease;
}
/* 기울인 사진은 겹쳐 보이는 편이 자연스럽다 — 살짝 그림자를 준다 */
.au-extra-img-cell[data-rot]:not([data-rot="0"]) {
    box-shadow: 0 3px 10px rgba(0,0,0,0.18);
}
/* ══ ★ 배경이 뚫린 그림(알파 PNG·WebP) ══
   회색 칸에 꽉 채워 자르면 투명한 부분이 회색으로 비쳐 뿌옇게 보인다.
   칸 배경과 둥근 모서리를 지우고, 자르지 않고 전체를 비율 그대로 띄운 뒤
   그림자를 그림 모양대로 드리운다 — 스티커를 붙인 것처럼 보인다.
   (칸의 크기 자체는 그대로라 격자가 흐트러지지 않는다) */
/* ※ 셀렉터 세기에 주의 — 위의 기울기 그림자 규칙이
   .au-extra-img-cell[data-rot]:not([data-rot="0"]) (클래스1+속성2) 라서,
   .au-extra-img-cell.is-bare (클래스2) 로는 그 그림자를 못 끈다.
   그래서 배경 없는 그림에도 사각 그림자가 그대로 남았다. 같은 모양으로 세기를 맞춘다. */
.au-extra-img-cell.is-bare[data-rot],
.au-extra-img-cell.is-bare,
.au-card-display.has-scene-bg .au-extra-img-cell.is-bare {
    background: transparent; border-radius: 0; box-shadow: none; overflow: visible;
}
.au-extra-img-cell.is-bare img {
    object-fit: contain;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,0.35));
}
/* 기울인 사진의 사각 그림자도 배경 없는 그림에는 붙이지 않는다(위에서 이미 껐다) */

/* 편집 중에는 확대 커서를 끄고 좌우로 끄는 손잡이임을 알린다 */
.mood-editing .au-extra-img-cell[data-mood-idx] {
    cursor: ew-resize; outline: 2px dashed rgba(108,92,231,0.75); outline-offset: 2px;
    touch-action: none; user-select: none;
}
.mood-editing .au-extra-img-cell[data-mood-idx] img { cursor: ew-resize; pointer-events: none; }
/* 기울기 초기화 버튼은 스티커 도구들과 같은 줄에 서므로 별도 모양을 두지 않는다 */

/* 쓰기 폼: 이미지 슬롯(전신 / 무드 / SD) 공용 스타일 */
.au-img-hint { font-weight: normal; color: #a4b0be; font-size: 12px; }
.au-body-images-grid, .au-mood-images-grid { display: grid; grid-template-columns: repeat(auto-fit, 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; }
/* "배경 없는 그림" 선택지 — 무드 슬롯에만 붙는다 */
.au-img-bare-label {
    display: flex; align-items: center; gap: 5px; margin-top: 6px;
    font-size: 12px; font-weight: normal !important; color: #57606f; cursor: pointer;
}
.btn-add-body-img, .btn-add-mood-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-body-img:hover:not(:disabled), .btn-add-mood-img:hover:not(:disabled) { background: #6c5ce7; color: #fff; }
.btn-add-body-img:disabled, .btn-add-mood-img:disabled { opacity: .5; cursor: not-allowed; border-style: solid; }

/* 쓰기 폼: AU별 좌/우 프로필 편집
   ★ 선택자를 .au-edit-block 안으로 한정한다. 예전에는 그냥 .au-profile-row 였는데,
     이 클래스는 본문 카드(view)에서도 쓰는 이름이라 같은 스타일시트 안에서 뒤에 오는
     이 규칙이 본문 쪽 규칙(align-items:stretch, gap:10px)을 조용히 덮고 있었다.
     그래서 프로필 두 장의 높이 맞춤이 풀리고 쓸데없는 아래 여백 12px 이 붙었다. */
.au-edit-block .au-profile-row { display: flex; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; }
.au-profile-edit { flex: 1 1 220px; background: #fbfbfd; border: 1px solid #ced6e0; border-radius: 8px; padding: 12px 14px; }
.au-profile-edit-title { margin: 0 0 8px 0; font-size: 13px; color: #6c5ce7; }
.au-profile-edit input[type="text"] { width: 100%; padding: 8px; margin-bottom: 6px; border: 1px solid #ced6e0; border-radius: 6px; box-sizing: border-box; font-size: 13px; }
.au-profile-field-row { display: flex; gap: 6px; margin-bottom: 6px; align-items: center; }
.au-profile-field-row input { margin-bottom: 0 !important; }
.au-profile-field-label { flex: 0 0 35%; }
.au-profile-field-value { flex: 1 1 auto; }
.btn-remove-profile-field { background: none; border: none; color: #ff4757; cursor: pointer; font-size: 15px; flex: 0 0 auto; padding: 0 2px; }
.btn-add-profile-field { width: 100%; padding: 6px; background: #fff; border: 1px dashed #a4b0be; color: #747d8c; border-radius: 6px; cursor: pointer; font-size: 12px; margin-top: 2px; }
.btn-add-profile-field:hover { border-color: #6c5ce7; color: #6c5ce7; }

/* 쓰기 폼: 목록 카드 장식(디데이 · SD 이미지 2장) 편집 영역 */
.pair-sd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 14px; }
.pair-sd-edit { background: #fff; border: 1px solid #ced6e0; border-radius: 8px; padding: 12px 14px; }
.pair-sd-edit > label { display: block; font-size: 13px; font-weight: bold; color: #57606f; margin-bottom: 8px; }
.pair-sd-edit input[type="text"] { width: 100%; padding: 8px; margin-top: 8px; border: 1px solid #ced6e0; border-radius: 6px; box-sizing: border-box; font-size: 13px; }
@media (max-width: 560px) { .pair-sd-grid { grid-template-columns: 1fr; } }

/* 쓰기 폼: BGM mp3 직접 업로드 보조 영역 (URL/유튜브 입력과 함께 사용, 선택 UI 없이 공존) */
/* ★ 글쓰기 폼: 공개 설정(코어 옵션 + 회원 전용) */
/* ══ 공개 설정 영역 ══
   그누보드가 넘겨주는 공지/비밀글 체크박스($option)와 스킨 자체 옵션(목록 전용)이
   같은 줄 규칙을 따르도록 하나의 박스 안에 세로로 쌓는다. 체크박스와 설명이
   항상 같은 줄에서 왼쪽 정렬로 붙어 보이는 게 핵심. */
.au-visibility-box {
    display: flex; flex-direction: column; gap: 8px;
    background: #fff; border: 1px solid #e4e7eb; border-radius: 8px; padding: 12px 14px;
}
.au-visibility-row .au-core-options { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; margin: 0; }
.au-visibility-row .au-core-options label { font-weight: normal !important; font-size: 13px; color: #57606f; margin: 0 10px 0 4px; display: inline-flex; align-items: center; }
.au-visibility-row .au-core-options input { margin: 0; }

/* 체크박스 + 설명이 한 줄에 붙는 공용 체크 줄 */
.au-check-line {
    display: flex; align-items: flex-start; gap: 8px; margin: 0;
    font-size: 13px; color: #57606f; cursor: pointer; font-weight: normal !important;
}
.au-check-line input[type="checkbox"] { margin-top: 2px; }
.au-check-line .au-check-text { display: block; line-height: 1.5; }
.au-check-line .au-img-hint { display: block; margin-top: 1px; }

.au-visibility-hint {
    margin: 2px 0 0 0; padding: 9px 11px; border-radius: 6px;
    background: #f4f2ff; border: 1px solid #ded8ff; color: #5b53a8;
    font-size: 12px; line-height: 1.65; font-weight: normal;
}
.au-visibility-hint b { color: #4a3fb0; }
.au-visibility-hint i { margin-right: 4px; opacity: .8; }
.au-visibility-hint a { color: #6c5ce7; text-decoration: underline; margin-left: 4px; white-space: nowrap; }

/* 댓글 색 고르는 줄 — 체크박스를 켰을 때만 나타난다 */
.au-cmt-color-row { margin-top: 8px; }
/* 전신 위치 고르는 라디오 줄 */
.au-bodypos-row { display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap; margin-top: 4px; }
.au-bodypos-item {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; color: #57606f; font-weight: normal !important; cursor: pointer;
}
/* (여기 있던 .au-panel-color-row / -item / input[color] 규칙 세 줄은 지웠다 —
    아래 "글쓰기 폼: 프로필/태그 박스 색" 블록에 같은 선택자가 그대로 다시 있어서
    항상 뒤엣것이 이기는, 완전히 죽은 코드였다) */

/* 예전 클래스명 호환(혹시 남아 있는 마크업 대비) */

/* ★ 글쓰기 폼: 프로필/태그 박스 색 지정 */
.au-panel-color-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.au-panel-color-item { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #57606f; font-weight: normal !important; }
.au-panel-color-item input[type="color"] { width: 42px; height: 30px; padding: 0; border: 1px solid #ced6e0; border-radius: 6px; cursor: pointer; background: none; }
.au-panel-color-item input[type="range"] { width: 110px; }
.au-panel-alpha-num { font-size: 12px; color: #8286a3; min-width: 36px; }

.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; }

/* ══ ★ 대사창 끝의 ▼ 표시 ══
   넘길 수 있다는 뜻이 아니라, 대사창이 살아 있는 느낌만 주는 장식이다.
   transform 만 움직이므로 다시 그리는 비용이 거의 없다(레이아웃을 건드리지 않는다). */
.au-vn-dialogue-more {
    position: absolute; right: 14px; bottom: 10px;
    font-size: 12px; line-height: 1; opacity: 0.75; pointer-events: none;
    animation: au-vn-bob 1.4s ease-in-out infinite;
}
@keyframes au-vn-bob {
    0%, 100% { transform: translateY(0); opacity: 0.45; }
    50%      { transform: translateY(3px); opacity: 0.9; }
}

/* ★ 못 불러온 이미지 자리표시 — 원래 칸을 그대로 지켜 배치가 무너지지 않게 한다 */
.au-img-broken {
    object-fit: contain !important; background: #eceef5;
    box-shadow: none !important; opacity: 0.9;
}

/* ══ ★ 목록 분류(카테고리) 이동줄 ══ */
.pair-cate { margin: 0 0 14px; }
.pair-cate ul {
    display: flex; flex-wrap: wrap; gap: 8px;
    list-style: none; margin: 0; padding: 0;
}
.pair-cate li { margin: 0; }
.pair-cate a {
    display: inline-block; padding: 5px 14px; border-radius: 20px;
    background: rgba(255,255,255,0.75); border: 1px solid #ddd6f3;
    color: #6c5ce7; font-size: 12.5px; font-weight: 600; text-decoration: none;
    transition: all 0.15s;
}
.pair-cate a:hover { background: #6c5ce7; color: #fff; border-color: #6c5ce7; }
.pair-cate a.bo_cate_on, .pair-cate #bo_cate_on {
    background: #6c5ce7; color: #fff; border-color: #6c5ce7;
}

/* ★ 임시저장 복구 안내줄 */
#au-draft-bar {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    margin-bottom: 14px; padding: 10px 14px; border-radius: 8px;
    background: #fff8e1; border: 1px solid #ffe3a3; color: #7a5c00; font-size: 13px;
}
#au-draft-bar .au-draft-btns { margin-left: auto; display: flex; gap: 6px; }
#au-draft-bar button {
    padding: 5px 12px; border-radius: 6px; cursor: pointer; font-size: 12.5px; font-weight: 600;
    border: 1px solid #e0b84c; background: #fff; color: #8a6400;
}
#au-draft-bar .au-draft-restore { background: #6c5ce7; border-color: #6c5ce7; color: #fff; }

/* ══ ★ 대사 마커를 눌렀을 때 전신 이미지가 잠깐 반응하는 움직임 ══
   transform 만 쓰므로 주변 배치를 다시 계산하지 않는다(가볍다).
   이미지가 아니라 이미지 상자를 움직여서 그 위의 대사 마커도 같이 따라간다. */
/* 세기 조절: 값을 키우면 더 크게 움직인다. 3px 정도면 "반응했다"는 것만 전해지고
   시선을 뺏지 않는다(처음엔 7px 이었는데 움찔거리는 느낌이 강했다). */
.au-body-img-wrap.au-poked { animation: au-body-poke 0.55s cubic-bezier(0.33, 0, 0.2, 1); }
@keyframes au-body-poke {
      0% { transform: translateY(0); }
     40% { transform: translateY(-3px); }
     75% { transform: translateY(1px); }
    100% { transform: translateY(0); }
}

/* 기기·브라우저에서 "움직임 줄이기"를 켠 사람에게는 흔들지 않는다 */
@media (prefers-reduced-motion: reduce) {
    .au-body-img-wrap.au-poked { animation: none; }
    .au-vn-dialogue-more { animation: none; }
}

/* ══ ★ 세계관 설명 꾸미기 도구 ══ */
.au-desc-tools {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px;
}
.au-desc-btn {
    width: 28px; height: 28px; padding: 0; border-radius: 6px; cursor: pointer;
    border: 1px solid #ddd6f3; background: #fff; color: #57508a; font-size: 13px; line-height: 1;
}
.au-desc-btn:hover { background: #6c5ce7; color: #fff; border-color: #6c5ce7; }
.au-desc-color { display: inline-flex; align-items: center; }
.au-desc-color-input {
    width: 30px; height: 28px; padding: 0; border: 1px solid #ddd6f3;
    border-radius: 6px; background: none; cursor: pointer;
}
.au-desc-hint { font-size: 11.5px; color: #9b9bb0; }
/* 안내문이 잠깐 경고로 바뀔 때 (예: 글자를 안 고르고 단추를 누른 경우) */
.au-desc-hint.is-warn { color: #c0392b; font-weight: 600; }
/* 글자가 들어가는 단추(색·지우기)는 정사각형 틀을 벗어나 내용만큼 넓어진다 */
.au-desc-btn.au-desc-color-apply, .au-desc-btn.au-desc-clear {
    width: auto; padding: 0 10px; font-size: 12px;
}

/* ══ ★ 설명 미리보기 ══
   글상자 바로 아래에서 실제 화면과 같은 규칙으로 그려 준다.
   표시가 짝이 안 맞으면(닫는 표시를 빠뜨렸을 때 등) 여기서 바로 드러난다. */
.au-desc-preview-wrap {
    margin-top: 6px; padding: 10px 12px; border-radius: 8px;
    background: #faf9ff; border: 1px dashed #ddd6f3;
}
.au-desc-preview-wrap.is-empty { display: none; }
.au-desc-preview-label {
    display: block; font-size: 11px; color: #9b9bb0; margin-bottom: 4px; letter-spacing: 0.02em;
}
.au-desc-preview { font-size: 14px; }

/* 본문 설명 안에서 살아나는 태그들 — 상자 스타일을 흐트러뜨리지 않게 최소한만 */
.au-details-desc b { font-weight: 700; }
.au-details-desc i { font-style: italic; }
.au-details-desc u { text-decoration: underline; }
.au-details-desc s { opacity: 0.75; }

/* ══ ★ 좁은 화면에서의 기둥 무드 되돌리기 ══
   미디어쿼리는 셀렉터 우선순위를 올려 주지 않는다 — 같은 세기라면 파일에서 뒤에 있는
   쪽이 이긴다. 그래서 위쪽 @media 안에 적으면 아래의 기둥 규칙에 그대로 덮인다.
   반드시 기둥 규칙보다 뒤(=파일 맨 끝)에 두어야 한다.
   세로로 쌓인 화면에서 기둥은 더 이상 "좁고 긴 기둥"이 아니므로 원래 격자로 돌린다. */
@media (max-width: 640px) {
    .au-center-side .au-mood-pillar {
        flex: 0 0 auto; grid-auto-rows: auto;
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    }
    .au-center-side .au-mood-pillar .au-extra-img-cell { aspect-ratio: 1/1; min-height: 0; }

    /* 정보 칼럼도 세로로 길게 흐르므로, 옆 무드 격자를 정사각 썸네일 흐름으로 되돌린다 */
    .au-side-col .au-mood-side {
        flex: 0 0 auto; min-height: 0; grid-auto-rows: auto;
    }
    .au-side-col .au-mood-side .au-extra-img-cell { aspect-ratio: 1/1; }
}