@charset "utf-8";
@import url('https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css');
@import url('https://fonts.googleapis.com/css2?family=Aoboshi+One&family=Homemade+Apple&family=Noto+Sans+KR:wght@100&family=Rubik+Bubbles&family=Satisfy&family=Shrikhand&family=Special+Elite&family=Splash&family=Sarina&family=Honk&family=Sixtyfour&family=UnifrakturMaguntia&family=Explora&family=Italianno&family=Nothing+You+Could+Do&family=Viaoda+Libre&family=Zen+Maru+Gothic:wght@300&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Corinthia:wght@400;700&family=Metal&display=swap');

@import url('color.css');

body {
/*페이지 전환 애니메이션*/
    background-image:url('https://images.unsplash.com/photo-1630717028756-56ac40550feb?q=80&w=1332&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
    opacity: 0;
    animation: fadeInBackground 0.8s forwards;/* fadeInBackground 애니메이션을 2초 동안 재생하고, 마지막 상태를 유지 */
}

/* 배경 페이드인 애니메이션 정의 */
@keyframes fadeInBackground {
    from {
        opacity: 0; /* 시작 시 투명 */
    }
    to {
        opacity: 1; /* 종료 시 선명 */
    }
}


@font-face {
    font-family: 'Cafe24Ohsquare';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/Cafe24Ohsquare.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
  font-family: 'LeferiPoint-WhiteObliqueA';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/LeferiPoint-WhiteObliqueA.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'MYHaemalgeunSangsang';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2206-02@1.0/MYHaemalgeunSangsang.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'UhBeematsuko';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_five@.2.0/UhBeematsuko.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100&display=swap');

@font-face {
  font-family: 'CWDangamAsac-Bold';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/CWDangamAsac-Bold.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'HS-Regular';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/HS-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'OKGUNG';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2206-02@1.0/OKGUNG.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'RixInooAriDuriR';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2207-01@1.0/RixInooAriDuriR.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Hyejun';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/naverfont_06@1.0/Hyejun.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'KimjungchulScript-Bold';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302_01@1.0/KimjungchulScript-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Handletter';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/naverfont_05@1.0/Handletter.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'iceJaram-Rg';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2307-2@1.0/iceJaram-Rg.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'InkLipquid';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/InkLipquid.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'ChosunSm';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@1.1/ChosunSm.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'ghanachoco';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@1.0/ghanachoco.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'GowunBatang-Regular';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/GowunBatang-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Chosunilbo_myungjo';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/Chosunilbo_myungjo.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'KIMM_Bold';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2212@1.0/KIMM_Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'NanumSquareNeo-Variable';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_11-01@1.0/NanumSquareNeo-Variable.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'GmarketSansMedium';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'GmarketSansLight';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'GmarketSansBold';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'ChosunSg';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@1.0/ChosunSg.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Pretendard-Regular';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'TAEBAEKmilkyway';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2310@1.0/TAEBAEKmilkyway.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'JalnanGothic';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_231029@1.1/JalnanGothic.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'yg-jalnan';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'YEONGJUPunggiGinsengTTF';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2310@1.0/YEONGJUPunggiGinsengTTF.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
    font-family: 'BookkMyungjo-Bd';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2302@1.0/BookkMyungjo-Bd.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

@font-face {
  font-family: "Explora", serif;
  font-weight: 700;
  font-size: 20px !important; /* 폰트 크기 설정 */
  font-style: normal;
}

@font-face {
    font-family: 'BookkMyungjo-Bd';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2302@1.0/BookkMyungjo-Bd.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'MapoDacapo';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/MapoDacapoA.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'HSBombaram';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/HSBombaram.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Cafe24Danjunghae';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.1/Cafe24Danjunghae.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}






/* =============================== */
.corinthia-regular {
    font-family: "Corinthia", cursive;
    font-weight: 400;
    font-style: normal;
}

.corinthia-bold {
    font-family: "Corinthia", cursive;
    font-weight: 700;
    font-style: normal;
}

.metal-regular {
    font-family: "Metal", serif;
    font-weight: 400;
    font-style: normal;
}


/* =============================== */
/*	카테고리	*/
/* =============================== */

ul.upcategories {
    display: flex;
    gap: 3px;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
}

a.upcate {
    background: var(--color-list-bg);
    padding: 2px 15px;
    border-radius: 20px;
    border: 1px solid var(--color-text);
    font-size: 12px;
    font-family: 'Pretendard-Regular';
    color: var(--color-list-text);
    display: flex;
    align-items: center;
    justify-content: center;
}

a.upcate.point {
    overflow: hidden;
    background: linear-gradient(135deg, rgba(255, 182, 193, 0.7) 0%, rgba(173, 216, 230, 0.7) 50%, rgba(255, 182, 193, 0.7) 100%);
    background-size: 200% 200%;
    animation: hologram-bg-shift 8s ease infinite;
    border: 1px dashed var(--color-b);
}

a.upcate:hover {
    background: rgba(0, 0, 0, 0.2);
}

/* =============================== */
/*	상단 검색창 & 글쓰기 영역	*/
/* =============================== */

.trpg-board-container .trpg-guide {
    display: flex;
    justify-content: space-between;
    margin: 0px 0px 25px;
}

.trpg-board-container .trpg-guide .trpg-sch-input {
    width: 200px;
}

.trpg-board-container .trpg-guide .trpg-ui-btn {
    display: flex;
    gap: 2px;
}

.trpg-board-container .trpg-guide .trpg-btn {
    text-align: center;
    color: var(--color-list-text);
    border-radius: 8px;
    width: 30px;
    height: 25px;
    line-height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-list-bg);
    border: 1px solid var(--color-b);
}

.trpg-board-container .trpg-guide .trpg-btn a {
    color: var(--color-list-text);
}

.trpg-board-container .trpg-guide .trpg-sch-input,
.trpg-board-container .trpg-guide .trpg-sch-select {
    border-radius: 10px;
    height: 27px;
}

/* =============================== */
/*	하단 체크박스 & 선택 삭제	*/
/* =============================== */

.trpg-board-container .trpg-chk-option {
    display: flex;
    gap: 2px;
}

.trpg-board-container .chk_all,
.trpg-board-container .select-trash-btn {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
    box-sizing: border-box;
    background: none;
    border: none;
    font: inherit;
    width: 30px;
    height: 25px;
    line-height: 25px;
    background: var(--color-list-bg);
    border: 1px solid var(--color-b);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.trpg-board-container .select-trash-btn:hover {
    background: rgb(from var(--color-list-text) r g b / 20%);
}

.trpg-board-container .pg {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3px;
}

.trpg-board-container .pg_wrap .pg_page {
    width: 30px;
    height: 25px;
    line-height: 25px;
    background: var(--color-list-bg);
    border: 1px solid var(--color-b);
    color: rgb(from var(--color-list-text) r g b / 60%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Pretendard-Regular';
    padding: 0 5px;
    font-size: 11px;
    border-radius: 8px;
}

.trpg-board-container strong.pg_current.pg_page {
    background: rgb(from var(--color-list-text) r g b / 20%);
    color: rgb(from var(--color-list-text) r g b / 80%);
}

/* =============================== */
/*	리스트	*/
/* =============================== */

.trpg-board-container {
    width: 900px;
    margin: 0 auto;
}

.trpg-ticket-list {
    width: 100%;
    display: grid;
    /* minmax(현재보다 큰 값, 1fr) 으로 변경하여 썸네일의 가로폭을 넓힙니다. */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* 예시: 최소 300px 너비로 설정 */
    gap: 20px; /* 이 값은 썸네일 간의 가로/세로 간격을 유지합니다. */
    margin: 30px 0;
}

/* --- 1. 전체 카드 아이템 (.trpg-ticket-item) 설정 --- */
.trpg-ticket-item {
    position: relative; /* 자식 요소들의 absolute 기준점 */
    min-width: 200px;
    width: 100%;
    height: 400px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    background-color: black;
    display: flex;
    flex-direction: column;
    will-change: transform, box-shadow; /* 브라우저에 변화를 미리 알림 */
}

.trpg-ticket-item:hover {
    transform: scale(1.07);
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.7);
    z-index: 10; /* 호버 시 z-index를 높여 다른 요소 위에 겹치도록 합니다. */
}

/* 체크박스 스타일은 그대로 유지 */
.trpg-ticket-chk {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
    opacity: 0.3;
}

/* 컨테이너의 display를 세로로 변경 */
.trpg-ticket-container {
    display: flex;
    flex-direction: column; /* 가로 -> 세로로 변경 */
    height: auto; /* 고정 높이 제거, 내용에 따라 유동적으로 */
}

/* 이미지 영역 (B 영역) */
.trpg-ticket-image {
    width: 100%;
    height: 400px;
    position: absolute;
    top: 0;         
    left: 0;          
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.5s ease-out, background-position 0.8s ease-out, opacity 0.3s, filter 0.3s ease-in-out;
    z-index: 1;
    will-change: transform, background-position, opacity, filter;
    backface-visibility: hidden;
    transform: translateZ(0);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), 
                inset 0 0 0 1px rgba(0, 0, 0, 0.5);
}

/* style.list.css 또는 style.css 에 추가 */
.trpg-ticket-image.is-wide-image {
    background-size: contain; /* 가로로 긴 이미지가 잘리지 않고 전체가 보이도록 설정 */
    transform: translateZ(0); /* 여기에도 GPU 가속 강제를 추가하여 일관성 유지 */
    /* animation 속성은 이제 호버 시에만 적용됩니다. */
}

/* is-wide-image 클래스가 있는 경우에만 호버 효과 적용 */
.trpg-ticket-image.is-wide-image:hover {
    /* 기존 transform 속성(scale, rotateZ)은 제거되고, transform은 이제 trpg-stretch-entry 애니메이션이 제어합니다. */
    opacity: 0.9;
    filter: saturate(1.2) brightness(1.1);
    background-position: 0% center; /* 호버 시 애니메이션의 시작점으로 부드럽게 이동 */
    /* 두 애니메이션을 동시에 적용. trpg-stretch-entry는 0.4초 동안 실행 후 종료. */
    animation: trpg-stretch-entry 0.6s ease-out forwards, /* 가로 비율 변경 애니메이션 */
               trpg-wide-image-pan 12s linear infinite alternate; /* 패닝 애니메이션 (0.8초 지연 시작) */
    background-size: 200% auto; /* 이미지를 가로로 200% 확대 (세로는 비율에 맞게 자동 조절) */
}

/* 와이드 이미지 배경 이동 애니메이션 키프레임 */
@keyframes trpg-wide-image-pan {
    0% { background-position: 0% center; } /* 시작 지점 (좌측) */
    100% { background-position: 100% center; } /* 끝 지점 (우측) */
}

/* 새로 추가: 가로 비율 변경 애니메이션 (진입 효과) */
@keyframes trpg-stretch-entry {
    0% {
        transform: scale(1.5) translateZ(0);
        filter: blur(2px); /* 0% 지점에 블러 효과 추가 */
    }
    50% {
        transform: scale(1.08 * 1.15, 1.08) translateZ(0);
        filter: blur(0); /* 블러를 점차 제거 */
    }
    100% {
        transform: scale(1.08) translateZ(0);
        filter: blur(0); /* 블러 완전히 제거 */
    }
}

/* 일반 썸네일 호버 효과 (is-wide-image가 아닐 때) */
.trpg-ticket-image:not(.is-wide-image):hover {
    /* transform 속성은 이제 trpg-regular-entry 애니메이션이 제어합니다. */
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
   filter: saturate(1.2) brightness(1.1);
   /* transition 속성에서 transform 부분을 제거하고, animation 속성을 추가 */
   transition: background-position 1s ease-out, opacity 0.5s, filter 0.5s ease-in-out;
   animation: trpg-regular-entry 3s ease-out forwards; /* 새로운 진입 효과 애니메이션 추가 (예시: 0.4초 지속) */
}

/* 새로 추가: 일반 썸네일 진입 효과 (조금 커졌다 축소) */
@keyframes trpg-regular-entry {
    0% { transform: scale(1) translateZ(0); } /* 시작: 평상시 크기 */
    60% { transform: scale(1.13) translateZ(0); } /* 중간: 목표 호버 크기(1.1)보다 아주 조금 작은 크기 */
    100% { transform: scale(1.05) translateZ(0); } /* 끝: 최종 목표 호버 크기 */
}

.trpg-ticket-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 이미지가 영역을 꽉 채우도록 설정 */
    display: block; /* 이미지 하단 공백 제거 */
}

/* 정보 영역 (C 영역) */
.trpg-ticket-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    min-height: 120px;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    z-index: 2;
    background: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
    pointer-events: none;
    /* info 전체의 패딩을 trpg-info로 옮겼으므로 여기서는 제거하거나 필요에 따라 조절 */
    padding: 0 10px;
}

.trpg-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    flex-grow: 1;
    /* 이 부분을 space-between으로 변경하여 내부 요소들을 상단, 중간, 하단으로 분배합니다. */
    justify-content: space-between; /* 기존: flex-start */
    /* 제목의 시작 위치를 조절하기 위한 패딩은 그대로 유지 */
    padding-top: 30px;
    padding-bottom: 10px;
    box-sizing: border-box;
}


/* 1. 제목+부제 그룹 (.trpg-title-group) */
.trpg-title-group {
    width: 100%;
    display: flex;
    flex-direction: column; /* 제목과 부제를 세로로 배열 */
    align-items: center; /* 내부 요소(제목, 부제)를 가로 중앙 정렬 */
    padding: 0 10px; /* 좌우 패딩 유지 */
    box-sizing: border-box;
    /* 이 그룹에 고정된 최소 높이를 부여하여 모든 썸네일의 중앙 기준을 일치시킵니다. */
    /* (제목 2줄 높이) + (부제 2줄 높이) + (제목-부제 마진) 정도로 계산 */
    min-height: calc((16px * 1.2 * 2) + 5px) + (16px * 1.2 * 2) + 5px);
    /* (제목 min-height) + (부제 min-height) + (부제 margin-top) */
    /* 이 값은 제목 폰트 크기, 부제 폰트 크기 및 행간, 마진에 따라 정확히 조정 필요 */
}

/* 2. 부제목 (.trpg-ticket-subtitle) 설정 - 시각적으로 위에 위치 */
.trpg-ticket-subtitle {
    position: relative; 
    font-size: 16px;
    color: rgba(225, 225, 225, 1);
    text-shadow: 2px 2px 2px rgba(50, 50, 50, 0.8);
    letter-spacing :0.5px;
    font-style: italic;
    font-family: 'InkLipquid';
    text-align: center; /* 중앙 정렬 유지 */
    width: 100%;
    padding: 0 20px; /* 좌우 패딩 유지 */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* 텍스트 내용 하단 정렬 (밑줄부터 위로 늘어남) */
    align-items: center; /* 텍스트 가로 중앙 정렬 */
    vertical-align: bottom;
    margin-top: 0;
    margin-bottom: 5px; /* 부제 아래에 하단 여백 추가 (제목과의 간격) */
    transform: none; 
    min-height: calc(16px * 1.2 * 2); /* 부제 2줄 높이 확보 */    
}

/* 3. 제목 (.trpg-ticket-title) 설정 - 시각적으로 아래에 위치 */
.trpg-ticket-info .trpg-ticket-title {
    /*font-variant: small-caps; /*작은 대문자*/
    color: var(--trtxt-color);
    position: relative; 
    width: 100%;
    text-align: center;
    padding: 0;
    box-sizing: border-box;
    color: white;
    letter-spacing :0.05em;/*자간*/
    font-size: 20px;
    /*font-size: 1.8em;*/
    font-weight: bold;
    z-index: 3;
    pointer-events: none;
    line-height: 1.4;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* 텍스트 내용 상단 정렬 (1번째 줄 높이 맞춤) */
    align-items: center; /* 텍스트 가로 중앙 정렬 */
    vertical-align: top;
    margin-top: 0;
    margin-bottom: 0;
    transform: none; 
}

/* 타이틀 이미지가 있을 때 .trpg-title-group의 패딩 제거 */
.trpg-title-group.no-padding-title-image {
    padding: 0;
}
    
/* 부제목 따옴표 위치 조정 */
.trpg-ticket-subtitle::before {
    content: '“';
    font-size: 40px;
    font-family: 'ChosunSm';
    position: relative;
    top: 5px;
    left: 0px;
    opacity: 0.6;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
    display: inline-block;
    margin-right: 5px;
    vertical-align: top;
}


/* --- 추가: 카테고리 텍스트 스타일 (선택 사항) --- */
.trpg-ticket-info .trpg-ticket-title .trpg-ticket-category {
    display: block;   /* 카테고리를 별도의 줄에 표시 */
    font-size: 0.8em; /* 카테고리 글자 크기를 제목보다 작게 */
    opacity: 0.8;     /* 약간 투명하게 */
    margin-bottom: 5px; /* 제목과의 간격 */
}

/* 4. 카테고리 태그 스타일 */
.trpg-ticket-cate {
    font-family: 'Pretendard-Regular';
    margin: 10px auto; /* 상하 여백 유지 */
    border-radius: 10px; /* 둥근 모서리 유지 */
    font-size: 11px; /* 글씨 크기를 10px에서 11px로 키웁니다. (조절 가능) */
    padding: 1px 8px; /* 태그 박스 크기를 줄이기 위해 상하 패딩 1px, 좌우 패딩 8px로 조정 */
    text-align: center;
    width: fit-content;
    position: relative;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.5); /* 어두운 반투명 배경 유지 */
    color: white; /* 흰색 텍스트 유지 */
    
    /* 테두리 box-shadow 조정 */
    box-shadow: 0 0 0 1px rgba(200, 200, 200, 0.8); /* 외곽선을 조금 더 진하게 (투명도 0.6 -> 0.8) */
}

/* 기존 가상 요소 삭제 유지 */
.trpg-ticket-cate::before,
.trpg-ticket-cate::after {
    content: none;
}

/* 날짜+인원 그룹 (.trpg-details-group) */
.trpg-details-group {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 5px; /* cate와의 간격을 조절합니다. auto에서 고정값으로 변경 */
    padding: 0 10px;
    box-sizing: border-box;
}

/* 6. 날짜 설정 */
.trpg-ticket-date {
    font-size: 12px; /* 폰트 크기 12px로 통일 */
    color: var(--color-info-text); /* '개봉일' 글자색 변경 */
    text-align: left;
    width: 100%;
    margin-top: 5px;
    min-height: calc(12px * 1.2); /* 폰트 크기에 맞춰 최소 높이 조정 */
}

/* 개봉일 값과 텍스트 사이의 간격 */
.trpg-ticket-date .date-value {
    margin-left: 5px;
    color: var(--color-b); /* 날짜 값 텍스트색 변경 */
}


/* 7. 멤버 설정 */
.trpg-ticket-members {
    font-size: 12px; /* 폰트 크기 12px로 통일 (기존과 동일) */
    color: var(--color-info-text); /* '출연' 글자색 변경 (기존과 동일) */
    text-align: left;
    word-break: break-word;
    width: 100%;
    margin-top: 5px;
    min-height: calc(12px * 1.2); /* 폰트 크기에 맞춰 최소 높이 조정 */
}

/* 출연진 이름과 텍스트 사이의 간격 */
.trpg-ticket-members .members-value {
    margin-left: 5px;
    color: var(--color-b); /* 출연진 이름 텍스트색 변경 */
}

/* 바코드 부분 */
/*
.barcode-img {
    width: 100%;
    height: 20px;
    position: relative;
    overflow: hidden;
    padding: 2px 0;
}

.barcode-lines {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

.barcode-line {
    display: inline-block;
    height: 100%;
    background: linear-gradient(135deg,
                rgba(255, 182, 193, 0.7) 0%,
                rgba(173, 216, 230, 0.7) 50%,
                rgba(255, 182, 193, 0.7) 100%);
    background-size: 200% 200%;
    animation: hologram-bg-shift 8s ease infinite;
}

.hologram-text {
    background: linear-gradient(135deg,
                rgba(255, 182, 193, 0.7) 0%,
                rgba(173, 216, 230, 0.7) 50%,
                rgba(255, 182, 193, 0.7) 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: hologram-bg-shift 5s ease infinite;
    display: inline-block;
    position: relative;
    font-family: monospace;
    letter-spacing: 1px;
    font-size: 11px;
}
*/

/* 완료 스탬프 스타일 */
/*
.trpg-ticket-completed {
    position: absolute;
    width: 120px;
    height: 120px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(-0px -1px 0px rgba(70, 70, 70, 0.3));
    opacity: 0.7;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-15deg); /* 약간 기울여서 배치 *//*
}
/*
.stamp-image {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    filter: hue-rotate(0deg);
    animation: hologram-hue-rotate 5s linear infinite;
}
*/

@keyframes hologram-hue-rotate {
    0% {
        filter: hue-rotate(0deg) brightness(1);
    }
    25% {
        filter: hue-rotate(20deg) brightness(1.1);
    }
    50% {
        filter: hue-rotate(40deg) brightness(1);
    }
    75% {
        filter: hue-rotate(20deg) brightness(1.1);
    }
    100% {
        filter: hue-rotate(0deg) brightness(1);
    }
}

@keyframes hologram-shift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
/*
.stamp-hologram-text {
    background: linear-gradient(135deg, rgba(255, 182, 193, 0.7) 0%, rgba(173, 216, 230, 0.7) 50%, rgba(255, 182, 193, 0.7) 100%);
    background-size: 50% 50%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    animation: hologram-bg-shift 5s ease infinite;
}*/

/* 빈 리스트 스타일 */
.empty-list {
    padding: 50px 0;
    text-align: center;
    color: var(--color-info-text);
    font-size: 16px;
}

/* 홀로그램 배경 색상 변화 애니메이션 */
@keyframes hologram-bg-shift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* 반응형 스타일 */
@media (max-width: 768px) {
    .trpg-board-container {
        width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
    }

    .trpg-ticket-list {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 15px;
    }

    .trpg-ticket-image {
        height: 100%; /* 부모의 height에 꽉 차도록 */
    }
    /*
    .trpg-ticket-barcode {
        width: 100%;
        height: auto;
        border-right: none;
        border-bottom: 1px dashed var(--color-b);
        display: none;
    }

    .barcode-rotate {
        transform: none;
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        padding: 0 15px;
        display: none;
    }
*/
    /* 상단 검색창 및 글쓰기 영역 조정 */
    .trpg-board-container .trpg-guide {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    .trpg-board-container .trpg-guide .trpg-sch {
        display: flex;
        width: 100%;
        justify-content: center;
        gap: 5px;
    }
    .trpg-board-container .trpg-guide .trpg-sch .trpg-sch-input,
    .trpg-board-container .trpg-guide .trpg-sch .trpg-sch-select {
        max-width: none;
        width: 100%;
    }

    .trpg-board-container .trpg-guide .trpg-ui-btn {
        width: 100%;
        justify-content: center;
    }
}


/* 전체 페이지 스크롤바 스타일 - 웹킷 브라우저 (Chrome, Safari, Edge) */
::-webkit-scrollbar {
   /* width: 20px; /* 스크롤바의 너비 */
    /*height: 10px; /* 가로 스크롤바의 높이 (필요시) */
    background-image:url('https://images.unsplash.com/photo-1630717028756-56ac40550feb?q=80&w=1632&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')  !important;
    /*border-radius: 5px; /* 스크롤바 전체 영역의 모서리를 트랙과 동일하게 둥글게 설정 */
    /* display: none; 주석 처리 또는 삭제하여 스크롤바가 보이도록 합니다. */
}

/* 스크롤바 트랙(바탕색) */
::-webkit-scrollbar-track { /* <-- 여기에 '*'가 추가되었습니다. */
    background-image:url('https://images.unsplash.com/photo-1630717028756-56ac40550feb?q=80&w=1632&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')  !important;
    /*filter: blur(5px) !important; /* <-- 여기에 블러 효과 추가 (원하는 픽셀값으로 조절) */
}

/* 스크롤바 썸(바 부분) */
::-webkit-scrollbar-thumb {
    /*background-color: var(--trtxt-color) !important; /* 원하는 바 색상 */
    border-radius: 5px; /* 바 모서리 둥글게 */
    cursor: pointer; /* 마우스 오버 시 클릭 커서로 변경 */
}

/* 마우스 오버 시 스크롤바 썸 색상 변경 (선택 사항) */
::-webkit-scrollbar-thumb:hover {
    /*background-color: var(--trtxt-color-hover); /* 마우스 오버 시 색상 (예시: 더 어둡게) */
    /* --trtxt-color-hover 변수가 없다면 직접 색상 코드를 지정해주세요 (예: #555) */
}