@charset "utf-8";
/* SIR 지운아빠 기반 - 아보카도 에디션 커스텀 */

/* ========================================================= */
/* 1. 기본 게시판 스타일 (기본 레이아웃, 아이콘 등) */
/* ========================================================= */
.error { position:relative; text-align: center; line-height: 1.8em; padding-top: 70px; }
.error:before { content:"\ea0e"; display:block; position: absolute; font-family: 'icon'; font-size: 50px; line-height: 50px; top: 0;left:0; right: 0; text-align: center; }
.error .btn-group { padding: 20px 0 0; }

.ui-mmb-button { text-align: center; padding-top: 10px; }
.help.ui-btn { width: 100%; padding: 8px; line-height: 1.2em; border-radius: 3px; }
.ui-paging { margin-bottom:0; padding-bottom:0;}

/* --- 쓰기 페이지 --- */
#bo_w { max-width: 640px; margin: 0 auto; padding: 20px 0; }
#bo_w dl, #bo_w dt, #bo_w dd { display: block; position: relative; margin: 0; padding: 0; }
#bo_w dl { overflow: hidden; }
#bo_w label { cursor: pointer; }
#bo_w dt { position: absolute; top: 0; left: 0; line-height: 30px; width: 70px; padding: 5px 0; font-size: 12px; }
#bo_w dt select { box-sizing: border-box; width:100%; font-size: 12px; }
#bo_w dd { padding: 5px 0; min-height: 30px; line-height: 30px; margin-left: 70px; }
#bo_w dd fieldset { display: inline-block; padding-right: 12px; }
#bo_w .frm_input { width: 100%; }
#bo_w #wr_content { height: 170px; padding: 10px; }


#board_category { text-align: center; }
#board_category input { display: none; }
#board_category li { display: inline-block; line-height: 31px; }
#board_category li label { display: inline-block; cursor: pointer; padding: 0 15px;}
#board_category input:checked + label:before { content: "《 "; }
#board_category input:checked + label:after { content: " 》"; }
#board_action { padding-top: 15px; }
#load_log_board .inner { padding: 0 30px 0; }

@media all and (max-width: 640px) {
	#load_log_board .inner { padding: 0 0 0; }
}



.icon-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: #222; color: #fff; font-size: 40px; border-radius: 50%; }
.icon-placeholder i { opacity: 0.5; }


/* ========================================================= */
/* 2. 리스트 레이아웃 (디깅 스타일) */
/* ========================================================= */

#log_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start; /* ← center → flex-start 로 변경! */
    width: 100%; max-width: 600px;
    margin: 0 auto; 
    padding: 10px 0 10px; 
    overflow: visible; 
    perspective: none !important; 
    transform-style: flat !important;
}


#log_list .empty_list { text-align: center; line-height: 100px; width: 100%; color:#fff; opacity: 0.5; }




/* 1. hover/active 시 아래로 이동 제거, scale만 적용 */
/*
#log_list .item:hover,
#log_list .item.active {
    transform: scale(1.15);  /* translateY 제거 */
    z-index: 100;
}*/


#log_list .item-inner {  position: relative !important; width: 100%; height: 100%;   pointer-events: auto !important; }
#log_list .item-inner > * { pointer-events: auto; }

#log_list .ui-comment, #log_list .pic-header { display: none; }


/* ========================================================= */
/* 3. 3D 플립 애니메이션 - 원형 고정판 */
/* ========================================================= */









/* 앞/뒷면 */
.flip-card-front, .flip-card-back {
    position: absolute; /* 원래대로 유지 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    backface-visibility: hidden;
    overflow: hidden;
    box-sizing: border-box;
}



.vinyl-thumb {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    transform: scale(1.35);
    transition: transform 0.5s ease;
    pointer-events: none;
}

@keyframes spinVinyl { 
    100% { transform: scale(1.35) rotate(360deg); } 
}
.flip-card-front.playing .vinyl-thumb { 
    animation: spinVinyl 8s linear infinite; 
}


/* 뒷면 */
.flip-card-back {
    background: rgba(15, 15, 15, 0.95);
    backdrop-filter: blur(5px);
    color: #fff;
    z-index: 1;

    display: block;           
    text-align: center;
    padding: 10px;            
    overflow-y: auto;
}


.back-content-wrap {
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 12px;
    line-height: 1.5;
    color: #eee;
    overflow-y: auto;
    scrollbar-width: none;
}
.back-content-wrap::-webkit-scrollbar { display: none; }

/* ========================================================= */
/* 4. 오버레이 정보 및 효과 */
/* ========================================================= */

.vinyl-info-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(3px); border-radius: 50%;
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
    opacity: 0; transition: opacity 0.4s ease; z-index: 20; padding: 15px; box-sizing: border-box; color: #fff;
}
.flip-card-inner:hover .vinyl-info-overlay { opacity: 1; }
.yt-player-container.is-flipped .vinyl-info-overlay { display: none !important; opacity: 0 !important; }

.vinyl-info-overlay .song-title { 
    font-size: 13px; font-weight: bold; margin-bottom: 5px; line-height: 1.3; word-break: keep-all; 
    text-shadow: 0 2px 10px rgba(0,0,0,0.8); transform: translateY(10px); transition: transform 0.4s ease; opacity: 0;
}
.flip-card-inner:hover .song-title { transform: translateY(0); opacity: 1; }

.vinyl-info-overlay .song-artist { 
    font-size: 11px; color: #eee; opacity: 0; transform: translateY(10px); transition: transform 0.4s ease 0.1s;
}
.flip-card-inner:hover .song-artist { transform: translateY(0); opacity: 0.8; }

.vinyl-info-overlay .control-icons { margin-top: 10px; display: flex; gap: 10px; align-items: center; justify-content: center; }

.vinyl-info-overlay .icon-btn { 
    color: #fff; font-size: 16px !important; width: 24px; height: 24px; line-height: 24px;
    text-align: center; opacity: 0; transition: all 0.3s ease 0.2s; 
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.5)); cursor: pointer; z-index: 30;
}
.vinyl-info-overlay .icon-btn:hover { transform: scale(1.2); color: #fff; }
.vinyl-info-overlay .icon-btn.yt-link { color: #ff0000; }
.flip-card-inner:hover .icon-btn { opacity: 1; }

.yt-hidden-iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: none;
    z-index: 0;  /* <-- 썸네일보다 뒤에 깔리도록 */
}

.ripple-effect {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 100%; height: 100%; border-radius: 50%; z-index: 0; pointer-events: none;
}
.yt-player-container.is-playing .ripple-effect::before,
.yt-player-container.is-playing .ripple-effect::after {
    content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 100%; height: 100%; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.6); opacity: 0;
    box-shadow: 0 0 10px rgba(255,255,255,0.3);
}
.yt-player-container.is-playing .ripple-effect::before { animation: rippleAnim 2.5s ease-out infinite; }
.yt-player-container.is-playing .ripple-effect::after { animation: rippleAnim 2.5s ease-out infinite 1.25s; }
@keyframes rippleAnim {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; border-width: 4px; }
    100% { transform: translate(-50%, -50%) scale(1.8); opacity: 0; border-width: 0px; }
}


/* ========================================================= */
/* 5. UI 컨트롤 바 및 페이징 */
/* ========================================================= */

.board-notice-box { 
    width: 80%; max-width: 580px; 
    padding: 5px 10px; box-sizing: border-box; margin: 0 auto 5px; 
    text-align: center; opacity: 0.9; font-size: 12px; 
    background: transparent; color: #fff; line-height: 1.5; word-break: keep-all; 
    text-shadow: 0 2px 5px rgba(0,0,0,0.5);
}

.music-control-bar {
    position: relative; 
    width: 100%; max-width: 600px; 
    margin: 0 auto; 
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 10px; box-sizing: border-box;
    background: transparent; z-index: 10;
    margin-bottom: 80px;
}


#log_list{
  padding-top: 60px;   /* 음반 리스트 시작을 조금 더 아래로 */
}



.mini-search-box { display: flex; align-items: center; background: transparent; }
.mini-search-box button { background: none; border: none; color: #fff; cursor: pointer; opacity: 0.8; margin-right: 5px; }
.mini-search-box input { 
    background: transparent; border: none; color: #fff; 
    width: 70px; font-size: 11px; transition: width 0.3s; outline: none; 
    border-bottom: 1px solid rgba(255,255,255,0.3); 
}
.mini-search-box input:focus { width: 120px; border-bottom-color: #fff; }

.control-right-group { display: flex; gap: 8px; align-items: center; }
.music-control-bar a, .music-control-bar button.icon-only {
    background: none; border: none; cursor: pointer; color: #fff; 
    font-size: 13px; opacity: 0.7; transition: all 0.3s; 
    padding: 0; width: 25px; height: 25px; line-height: 25px; text-align: center;
    text-shadow: 0 2px 5px rgba(0,0,0,0.5);
}
.music-control-bar a:hover { opacity: 1; transform: scale(1.1); }

.ui-paging-container { text-align: center; padding-bottom: 30px; }
.ui-paging { margin: 0 !important; padding: 0 !important; display: inline-block; }

.ui-paging a, .ui-paging span { 
    color: #fff !important; opacity: 0.7;
    padding: 0 5px; font-size: 11px; text-decoration: none; 
    text-shadow: 0 1px 2px rgba(0,0,0,0.5); 
}
.ui-paging a:hover { opacity: 1; font-weight: bold; }
.ui-paging strong { color: #fff !important; font-weight: bold; border-bottom: 1px solid #fff; opacity: 1; }


/* ================================
   라공에디션 호환 패치
   (기존 CSS 아래에 추가)
================================ */

/* 상위 레이아웃이 3D 속성 건드릴 때 방어 */
#load_log_board,
#load_log_board * {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

/* #log_list에서 3D 관련 강제 제거는 오히려 충돌할 수 있음 */
#log_list {
  perspective: initial !important;
  transform-style: initial !important;

  padding-bottom: 60px;  /* ← 원반 리스트와 아래 UI 간격 */
  /* 또는 margin-bottom: 60px; */
}


/* 라공에디션 레이아웃에서 클릭 씹힘 방지 */
#log_list .item-inner {
  pointer-events: auto !important;
}

/* 기존 강제 relative 제거 후 오버레이 절대 위치 유지 */
/* 기존 패치 부분 수정 */
#log_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    width: 100%; 
    max-width: 660px;
    margin: 0 auto; 

    /* 🔥 여기 중요 */
    padding-top: 30px;
    padding-bottom: 48px;

    overflow: visible; 
    perspective: none !important; 
    transform-style: flat !important;
}


/* 리스트 아이템 */
#log_list .item {
    position: relative;
    width: 180px;      /* 기존 그대로 */
    height: 180px;     
    margin: 12px;      /* 간격 살짝 줄임 */
    display: flex; 
    justify-content: center; 
    align-items: center;
    z-index: 1;
}

.yt-player-container,
.flip-card-inner,
.flip-card-front,
.flip-card-back {
    position: absolute; /* 회전 및 원형 배치용 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 뒤집기 시 숨기는 건 그대로 두되, !important 최소화 */
.yt-player-container.is-flipped .vinyl-info-overlay { 
  opacity: 0;
  pointer-events: none;
}

/* 모바일 hover 대응: active 상태에서도 오버레이 표시 */
#log_list .item.active .vinyl-info-overlay {
  opacity: 1;
}

/* backdrop-filter 성능/호환 fallback */
.flip-card-back {
  background: rgba(15, 15, 15, 0.95);
}
@supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))) {
  .flip-card-back {
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
  }
}

/* 모바일에서 hover로만 보이던 버튼이 안 보이는 문제 방지 */
@media (hover: none) {
  .vinyl-info-overlay { opacity: 1; }
  .vinyl-info-overlay .song-title,
  .vinyl-info-overlay .song-artist,
  .vinyl-info-overlay .icon-btn {
    opacity: 1;
    transform: none;
  }
}





/* ================================
   둥근 배경 + 바깥 프레임 마스킹
================================ */

:root{
  --bg-radius: 28px;
  --bg-inset: 18px;
}

html, body{
  height: 100%;
  background:#000 !important;
}

/* 게시판 전체를 둥근 카드로 만들기 */
#load_log_board{
  position: relative;
  min-height: 100vh;
  padding-top: 80px;

  /* ⭐ 둥근 영역 밖 잘라내기 */
  margin: var(--bg-inset);
  border-radius: var(--bg-radius);
  overflow: hidden;

  background: transparent !important;
}

/* 배경 이미지 */
#load_log_board::before{
  content:"";
  position: absolute;   /* fixed ❌ */
  inset: 0;
  z-index: -2;

  background: url('https://i.imgur.com/ucNE6QU.jpeg') center/cover no-repeat;

filter: blur(6px) saturate(1.1) brightness(1);
  transform: scale(1.08);
}

/* 오버레이 */
#load_log_board::after{
  content:"";
  position: absolute;
  inset: 0;
  z-index: -1;

  /* 아래로 갈수록 확실히 어두워짐 + 비네팅 느낌 */
  background:
    radial-gradient(120% 90% at 50% 10%,
      rgba(0,0,0,0.00) 0%,
      rgba(0,0,0,0.35) 55%,
      rgba(0,0,0,0.70) 100%
    ),
    linear-gradient(to bottom,
      rgba(0,0,0,0.10) 0%,
      rgba(0,0,0,0.45) 55%,
      rgba(0,0,0,0.92) 100%
    );

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}





/* YT iframe */
.flip-card-front iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover; /* 찌그러짐 방지 */
    border-radius: 50%; /* 원형 안에서만 보이도록 */
    pointer-events: none; /* 클릭 이벤트 방해 방지 */
}

/* 플레이 시 썸네일 숨기기 */
.flip-card-front .vinyl-thumb {
    display: block; /* 평상시 */
}
.flip-card-front.playing .vinyl-thumb {
    display: none;
}




/* ================================
   상단 MUSIC PLAYER 타이틀
================================ */

.music-title{
  width: 100%;
  max-width: 600px;
  margin: 0 auto 30px;
  text-align: center;

  font-size: 18px;
  letter-spacing: 0.12em;
  font-weight: 800;
  text-transform: uppercase;

  color: rgba(255,255,255,0.95);
  text-shadow: 0 4px 14px rgba(0,0,0,0.55);
}

/* 음표 */
.music-title .note{
  display: inline-block;
  margin: 0 6px;
  opacity: 0.9;

  animation: noteFloat 1.2s ease-in-out infinite;
}

/* 양쪽 음표가 같은 타이밍이면 심심하니까 딜레이 */
.music-title .note:last-child{
  animation-delay: 0.25s;
}

@keyframes noteFloat{
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}



/* ================================
   FIX: 앞/뒷면 스케일 기준 통일 + 파형 중앙 고정
================================ */

/* 컨테이너는 기준만 잡고 크기 고정 */
.yt-player-container{
  position: relative;
  width: 200px;
  height: 200px;
  perspective: 1200px;
  transform-style: preserve-3d;
  overflow: visible;
}

/* ⭐ 카드 전체(앞/뒤 공통)에만 스케일 적용 */
.flip-card-inner{
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;

  /* 여기서만 크기 통일 */
  transform: scale(1.1);
}

/* 뒤집기는 scale 유지한 상태에서 rotate만 추가 */
.yt-player-container.is-flipped .flip-card-inner{
  transform: scale(1.1) rotateY(180deg);
}

/* 앞/뒤면은 scale 금지 (기준 통일) */
.flip-card-front,
.flip-card-back{
  position: absolute;
  inset: 0;
  border-radius: 50%;
  backface-visibility: hidden;
  overflow: hidden;
  box-sizing: border-box;
  transform: none !important; /* 기존 rotateY + scale 덮기용 */
}

/* 앞면 */
.flip-card-front{
  z-index: 2;
  background: #111;
}

/* 뒷면 */
.flip-card-back{
  z-index: 1;
  transform: rotateY(180deg) !important; /* scale 없이 회전만 */
  background: rgba(15, 15, 15, 0.95);
}

/* ⭐ 파형은 flip-card-inner 기준 중앙 고정 */
.flip-card-inner .ripple-effect{
  position: absolute;
  inset: 0;
  border-radius: 50%;
  z-index: 5;
  pointer-events: none;
}

/* ripple-effect가 정확히 중앙에서 퍼지도록 */
.flip-card-inner .ripple-effect::before,
.flip-card-inner .ripple-effect::after{
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}