/* static/css/style.css */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    padding-top: 0; 
    padding-bottom: 0;
    background-color: #0c0a08; 
    color: #e0e0e0; 
    font-family: "Nanum Myeongjo", "Noto Serif KR", '돋움', Dotum, Helvetica, sans-serif; 
    font-size: 16px;
    line-height: 1.6;
}

/* --- 헤더 & 네비게이션 --- */
#header_wrap {
    background-color: #1a120b; 
    padding: 15px 0;
    border-bottom: 2px solid #c8a064; 
    position: sticky; 
    top: 0;
    z-index: 1020; 
    width: 100%;
}

#header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

#header .logo img {
    height: 40px; 
    filter: drop-shadow(1px 1px 2px #000);
}

.gnb ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

.gnb ul li {
    margin-left: 15px; 
    position: relative;
}

.gnb ul li a {
    display: block;
    padding: 10px 12px; 
    color: #d4c0a0; 
    text-decoration: none;
    font-weight: 700; 
    font-size: 1.05em; 
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

.gnb ul li a:hover,
.gnb ul li.active a {
    color: #ffc800; 
    text-shadow: 0 0 8px rgba(255, 200, 0, 0.7);
}

.gnb ul li ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: rgba(26, 18, 11, 0.98);
    border: 1px solid #c8a064;
    border-top: none;
    padding: 5px 0;
    min-width: 180px;
    border-radius: 0 0 5px 5px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.7);
    z-index: 1000;
}

.gnb ul li:hover > ul {
    display: block;
}

.gnb ul li ul li {
    margin-left: 0;
}

.gnb ul li ul li a {
    padding: 10px 20px; 
    font-size: 0.95em; 
    font-weight: normal;
    white-space: nowrap;
}

#tnb ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
}
#tnb ul li {
    margin-left: 15px;
}

#tnb ul li a.btn_search {
    font-size: 1.3em; 
    padding: 5px;
    color: #d4c0a0;
}
#tnb ul li a.btn_search:hover {
    color: #ffc800;
}
#tnb ul li .btn_profile img {
    height: 30px;
    width: 30px;
    border-radius: 50%;
    border: 1px solid #c8a064;
}

#tnb ul li .tnb-login-button {
    background-color: #8c1c0a; 
    color: #fff;
    padding: 8px 20px;
    font-weight: bold;
    font-size: 0.95em;
    border-radius: 5px;
    border: 1px solid #5a1005;
    box-shadow: inset 0 -2px 0 #5a1005, 0 1px 2px rgba(0,0,0,0.3);
    transition: background-color 0.2s ease, transform 0.1s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
}
#tnb ul li .tnb-login-button:hover {
    background-color: #a52a2a;
    transform: translateY(-1px);
}
#tnb ul li .tnb-login-button:active {
    transform: translateY(0px);
    box-shadow: inset 0 1px 0 #5a1005;
}


.layer-member-fold {
    position: absolute;
    top: 45px; /* 헤더 높이에 따라 조절 */
    right: 0; /* 오른쪽 정렬 */
    background: #1a120b;
    min-width: 150px; /* 최소 너비 */
    border: 1px solid #c8a064;
    border-radius: 5px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.7);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
}

.layer-member-fold.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.layer-member-fold ul {
    list-style: none;
    padding: 8px 0; /* 상하 패딩 */
    margin: 0;
    display: flex;
    flex-direction: column; 
}

.layer-member-fold ul li {
    /* border-bottom: 1px solid #2c1d13; 드롭다운 내 구분선은 취향에 따라 */
    flex: 0 0 auto; 
    text-align: left; /* 텍스트 왼쪽 정렬 */
}

.layer-member-fold ul li:last-child {
    border-bottom: none; 
}

.layer-member-fold ul li a {
    display: block;
    padding: 10px 20px; /* 항목 패딩 */
    color: #d4c0a0;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
    white-space: nowrap;
    font-size: 0.9em;
}

.layer-member-fold ul li a:hover {
    background-color: #2c1d13;
    color: #ffc800;
}

.btn_profile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px; /* 크기 약간 키움 */
    height: 34px;
    border-radius: 50%;
    background-color: #2c1d13; /* 배경색 */
    overflow: hidden;
    transition: transform 0.2s ease, background-color 0.2s ease;
    cursor: pointer;
    padding: 0;
    border: 1px solid #5c4a3a;
}
.btn_profile:hover {
    transform: scale(1.05);
    background-color: #4a3b2a;
}
.btn_profile.active { /* 드롭다운 활성화 시 */
    background-color: #c8a064;
    border-color: #ffc800;
}

/* --- 메인 컨텐츠 (index.html) --- */
#body_wrap {
    max-width: 1200px;
    margin: 20px auto 0 auto; 
    padding: 20px;
}

#body_wrap.samkuk-theme {
    /* 추가적인 삼국지 테마 배경 또는 스타일 */
}

.notice.samkuk-notice {
    background-color: rgba(44, 29, 19, 0.85); 
    border: 1px solid #c8a064;
    border-radius: 5px;
    margin-bottom: 25px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.4);
}
.notice.samkuk-notice a {
    color: #ffdead; 
    padding: 12px 15px;
    font-size: 1.1em;
    display: block;
    text-align: center;
    font-weight: bold;
    text-decoration: none;
    text-shadow: 1px 1px 1px #000;
}
.notice.samkuk-notice a:hover {
    background-color: rgba(70, 50, 40, 0.9);
    color: #fff;
}

.admin.samkuk-admin-link {
    background-color: #601005; 
    border: 1px solid #c8a064;
    color: #ffdead;
    text-align: center;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 25px;
}
.admin.samkuk-admin-link a {
    color: #ffdead;
    font-weight: bold;
    text-decoration: none;
}
.admin.samkuk-admin-link a:hover {
    color: #fff;
}

.banner2 {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0 -5px 20px -5px; /* 아이템 간 간격 고려한 마진 */
}
.banner2 li {
    width: calc(25% - 10px); /* 4개 아이템 기준 */
    margin: 5px;
}
.banner2 li.full {
    width: calc(100% - 10px);
}
.banner2 img {
    width: 100%;
    height: auto;
    border-radius: 5px; 
    border: 2px solid #4a3b2a; 
    box-shadow: 3px 3px 8px rgba(0,0,0,0.5);
}

@media (max-width: 992px) {
    .banner2 li {
        width: calc(50% - 10px); /* 화면 작을 때 2개씩 */
    }
}
@media (max-width: 768px) {
    .banner2 li.full img.pc-only { display: none !important; }
    .banner2 li.full img.mobile-only { display: block !important; }
}
.banner2 li.full img.mobile-only { display: none !important; }
.banner2 li.full img.pc-only { display: block !important; }


/* 콘텐츠 섹션 */
.movie-section.samkuk-section {
    margin-bottom: 40px; 
    padding: 0; 
}

.movie-section.samkuk-section h2 {
    color: #ffdfa0; 
    font-size: 2em; 
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 2px solid #c8a064; 
    letter-spacing: 1.5px; 
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
    font-weight: 700;
}

.movie-grid { /* 슬라이더 컨테이너 */
    display: flex;
    gap: 20px; /* 아이템 간 간격 */
    position: relative;
    width: 100%;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 15px 0; /* 상하 패딩 */
    will-change: transform;
    overflow-x: auto; /* 스크롤바 (터치 드래그용, JS에서 숨김 처리) */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
.movie-grid::-webkit-scrollbar { /* Chrome, Safari, Opera */
    display: none;
}


.movie-item.samkuk-item {
    flex: 0 0 calc((100% - 80px) / 5); /* 5개 기준, 양옆 네비 버튼 고려 */
    min-width: calc((100% - 80px) / 5);
    /* opacity: 1;
    transform: translateZ(0);
    backface-visibility: hidden; */
}
@media (max-width: 1200px) {
    .movie-item.samkuk-item { flex: 0 0 calc((100% - 60px) / 4); min-width: calc((100% - 60px) / 4); }
}
@media (max-width: 992px) {
    .movie-item.samkuk-item { flex: 0 0 calc((100% - 40px) / 3); min-width: calc((100% - 40px) / 3); }
}
@media (max-width: 768px) {
    .movie-item.samkuk-item { flex: 0 0 calc((100% - 20px) / 2); min-width: calc((100% - 20px) / 2); }
}
@media (max-width: 480px) {
    .movie-item.samkuk-item { flex: 0 0 calc(100% - 10px); min-width: calc(100% - 10px); } /* 1개 기준 */
}

.movie-box.samkuk-box {
    background: rgba(20, 12, 8, 0.85); /* 기존 0.7에서 약간 진하게 */
    border: 1px solid #5c4a3a; 
    box-shadow: 0 4px 8px rgba(0,0,0,0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    border-radius: 6px; 
    height: 100%; 
    display: flex;
    flex-direction: column;
    overflow: hidden; /* 내부 요소 넘침 방지 */
}
.movie-box.samkuk-box:hover {
    transform: translateY(-5px) scale(1.02); 
    box-shadow: 0 8px 16px rgba(0,0,0,0.6);
    border-color: #c8a064;
}

.movie-box.samkuk-box .img {
    display: block;
    position: relative;
    overflow: hidden;
    aspect-ratio: 2/3; /* 포스터 비율 */
    width: 100%;
}
.movie-box.samkuk-box .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    border-bottom: 1px solid #4a3b2a; /* 이미지 하단 구분선 */
    /* border-radius: 6px 6px 0 0; 이미지 상단만 둥글게 처리하려면 필요 */
}
.movie-box.samkuk-box:hover .img img {
    transform: scale(1.05); /* 호버 시 이미지 확대 */
}

.movie-box.samkuk-box .title.samkuk-title {
    color: #ffdead;
    font-weight: bold;
    font-size: 1em;
    padding: 12px 10px 8px 10px; 
    flex-grow: 1; 
    line-height: 1.4;
    text-decoration: none; /* 링크 밑줄 제거 */
    /* 두 줄 말줄임 처리 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;  
    overflow: hidden;
    text-overflow: ellipsis;
    height: calc(1.4em * 2); /* 최소 2줄 높이 강제 (컨텐츠 양에 따라 조절) */
}
.movie-box.samkuk-box:hover .title.samkuk-title {
    color: #ffc800;
}

.movie-box.samkuk-box .good.samkuk-info {
    color: #b8a07c; 
    font-size: 0.85em;
    padding: 0px 10px 12px 10px; 
    white-space: nowrap; /* 정보 텍스트 한 줄 처리 */
    overflow: hidden;
    text-overflow: ellipsis;
}

/* BNB (하단 공지/바로가기) */
#bnb_wrap.samkuk-bnb {
    background-color: #1a120b;
    border-top: 1px solid #c8a064;
    padding: 15px 0; 
    margin-bottom: 0; 
}
#bnb {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#bnb ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
}
#bnb ul li {
    margin-right: 25px;
}
#bnb ul li a {
    color: #d4c0a0;
    font-size: 1em; 
    font-weight: 500;
    text-decoration: none;
}
#bnb ul li a:hover {
    color: #ffc800;
}
#bnb .btn_event_shortcut {
    background-color: #b8860b; 
    color: #fff;
    padding: 10px 18px; 
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9em;
    text-shadow: 1px 1px 1px #000;
    transition: background-color 0.2s ease;
}
#bnb .btn_event_shortcut:hover {
    background-color: #daa520; 
}


/* --- 푸터 --- */
#footer_wrap {
    background-color: #110c08;
    padding: 40px 20px 20px 20px; /* 좌우 패딩 추가 */
    border-top: 2px solid #c8a064;
}

#footer {
    max-width: 1200px; 
    margin: 0 auto;
    text-align: center;
}

#footer ul.pc {
    list-style: none;
    padding: 0;
    margin: 0 auto 25px auto; 
    display: flex;
    justify-content: center; 
    flex-wrap: wrap; /* 화면 작을 시 줄바꿈 */
}
#footer ul.pc li {
    margin: 0 18px; /* 간격 조정 */
}
#footer ul.pc li a {
    color: #d4c0a0;
    font-size: 0.95em;
    text-decoration: none;
}
#footer ul.pc li a:hover {
    color: #ffc800;
}

#footer p {
    color: #a08c6c; 
    font-size: 0.9em;
    line-height: 1.7; /* 줄 간격 조정 */
    margin-bottom: 8px;
}
#footer p span {
    color: #c0a888; 
    font-weight: 500;
}
#footer p a {
    color: #ffdead;
    text-decoration: underline;
}
#footer p a:hover {
    color: #ffc800;
}

/* 탑 버튼 */
#top_btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: rgba(140, 28, 10, 0.8); 
    color: #ffdead;
    border: 1px solid #ffdead;
    border-radius: 50%;
    width: 45px; /* 크기 키움 */
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.7; 
    transition: opacity 0.3s ease, background-color 0.3s ease;
    z-index: 1000;
}
#top_btn:hover {
    opacity: 1; 
    background-color: rgba(165, 42, 42, 0.95);
}
#top_btn i {
    font-size: 1.4em;
}
#top_btn.sticky_top_btn {
    opacity: 1; 
}


/* 검색창 */
.search_layer {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(12,10,8,0.9); /* 더 어둡고 투명도 낮게 */
    z-index: 1030; /* 헤더보다 높게 */
    display: none; 
}
.search_layer.active { display: block; }

.search_wrap {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background-color: #1a120b;
    padding: 35px 40px; /* 패딩 증가 */
    border-radius: 8px; /* 둥근 모서리 */
    border: 2px solid #c8a064;
    box-shadow: 0 0 30px rgba(0,0,0,0.8);
    z-index: 1031; 
    display: none; 
    width: 90%; 
    max-width: 550px; /* 최대 너비 약간 증가 */
}
.search_wrap.active { display: block; }

.search_wrap h2 {
    color: #ffc800;
    font-family: "Nanum Myeongjo", "Noto Serif KR", serif;
    font-size: 1.8em;
    text-shadow: 1px 1px 2px #000;
    margin-bottom: 25px;
}
.search_wrap .search_input {
    position: relative;
    margin-bottom: 25px;
}
.search_wrap .search_input input {
    width: 100%;
    background-color: #2c1d13;
    color: #e0e0e0;
    border: 1px solid #5c4a3a;
    padding: 14px 50px 14px 18px; /* 우측 버튼 공간 확보 */
    font-size: 1em;
    border-radius: 4px;
}
.search_wrap .search_input input::placeholder {
    color: #a08c6c;
}
.search_wrap .search_input input:focus {
    border-color: #c8a064;
    box-shadow: 0 0 5px rgba(200, 160, 100, 0.5);
}
.search_wrap .search_input button {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 50px; /* 버튼 영역 증가 */
    background: transparent;
    border: none;
    color: #c8a064;
    font-size: 1.5em; /* 아이콘 크기 증가 */
    cursor: pointer;
    transition: color 0.2s ease;
}
.search_wrap .search_input button:hover {
    color: #ffc800;
}
.search_wrap .search_title_mobile {
    color: #d4c0a0;
    font-size: 0.9em;
    margin-bottom: 12px;
    font-weight: 500;
}
.search_wrap .search_title_mobile .date {
    color: #a08c6c;
    font-size: 0.85em;
}
.search_wrap ul {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 200px; /* 인기 검색어 목록 높이 제한 */
    overflow-y: auto; /* 필요시 스크롤 */
}
.search_wrap ul li {
    margin-bottom: 10px;
}
.search_wrap ul li a {
    color: #d4c0a0;
    text-decoration: none;
    display: block;
    padding: 10px 12px; 
    border-radius: 3px;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.search_wrap ul li a:hover {
    background-color: #2c1d13;
    color: #ffc800;
}
.search_wrap ul li a .num {
    color: #c8a064;
    font-weight: bold;
    margin-right: 8px;
}

.scrap_warning {
    position: fixed;
    bottom: 70px; /* 플로팅 메뉴 위로 */
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(140, 28, 10, 0.95); 
    color: #ffdead;
    border: 1px solid #ffdead;
    padding: 12px 22px;
    font-size: 0.95em;
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.6);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
.scrap_warning.on {
    opacity: 1;
    visibility: visible;
}


/* 로그인/회원가입 페이지 테마 적용 (style.css에 병합) */
#login_wrap {
    /* body 스타일과 유사하게 설정 */
    min-height: 100vh;
    background-color: #0c0a08; /* 삼국지 배경색 */
    background-image: url('/static/img/bg/samkuk_login_bg.jpg'); /* 로그인 전용 배경 이미지 (예시) */
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.login_container {
    background-color: rgba(26, 18, 11, 0.9); /* 반투명 어두운 갈색 */
    border-radius: 10px;
    padding: 40px 50px; /* 패딩 증가 */
    width: 100%;
    max-width: 450px; /* 너비 증가 */
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7); 
    border: 1px solid #c8a064; /* 금색 테두리 */
}

.login_logo img {
    height: 45px; /* 로고 크기 증가 */
    margin-bottom: 15px; /* 로고와 제목 간 간격 */
}

.login_container h2 {
    font-family: "Nanum Myeongjo", "Noto Serif KR", serif;
    color: #ffc800; 
    text-shadow: 1px 1px 3px #000;
    font-size: 2.2em; /* 제목 폰트 크기 증가 */
    margin-bottom: 30px; /* 입력 필드와의 간격 */
}

.input_group label {
    color: #d4c0a0;
    font-size: 0.9em;
    margin-bottom: 10px; /* 라벨과 입력창 간격 */
}

.input_text {
    background-color: #2c1d13; 
    border: 1px solid #5c4a3a;
    color: #e0e0e0;
    padding: 14px 18px; /* 패딩 증가 */
    font-size: 1em;
    border-radius: 4px;
}
.input_text::placeholder { color: #a08c6c; }
.input_text:focus {
    border-color: #c8a064;
    box-shadow: 0 0 0 3px rgba(200, 160, 100, 0.3);
}

.btn_login { /* 로그인 페이지 버튼 */
    background-color: #8c1c0a;
    border: 1px solid #5a1005;
    box-shadow: inset 0 -3px 0 #5a1005, 0 2px 4px rgba(0,0,0,0.5);
    font-family: "Nanum Myeongjo", "Noto Serif KR", serif;
    font-weight: 700; /* 더 굵게 */
    letter-spacing: 1.5px; /* 자간 넓게 */
    font-size: 1.15em; /* 폰트 크기 증가 */
    padding: 14px 15px; /* 패딩 증가 */
    text-transform: uppercase;
    margin-top: 20px; /* 입력 그룹과의 간격 */
}
.btn_login:hover {
    background-color: #a52a2a;
    transform: translateY(-2px); /* 호버 효과 강화 */
    box-shadow: inset 0 -2px 0 #5a1005, 0 4px 6px rgba(0,0,0,0.5);
}
.btn_login:active {
    transform: translateY(0px);
    box-shadow: inset 0 1px 0 #5a1005;
}

.login_alternative a,
.login_utils a,
.back_link a {
    color: #b8a07c;
    font-size: 0.9em;
}
.login_alternative a:hover,
.login_utils a:hover,
.back_link a:hover {
    color: #ffdead;
    background-color: rgba(44, 29, 19, 0.3);
    text-decoration: underline;
}

.social_login_section {
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid #4a3b2a; /* 구분선 색상 변경 */
}
.social_login_section h3 {
    color: #c0a888;
    font-size: 0.9em;
    font-weight: 500;
    text-transform: none; 
    margin-bottom: 20px;
}
.btn_social {
    font-size: 0.95em;
    padding: 12px 15px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.btn_social i { font-size: 1.2em; }

.btn_social_google {
    background-color: #7a2e2e; 
    border-color: #5c1f1f;
}
.btn_social_google:hover { background-color: #983a3a; }

.btn_social_meta {
    background-color: #2c3a5d; 
    border-color: #1e2a48;
}
.btn_social_meta:hover { background-color: #3a4c7a; }

.username_display_text {
    color: #d4c0a0;
    border-bottom: 1px solid #4a3b2a;
    font-size: 1em;
    padding-bottom: 10px;
}
.username_display_text strong { color: #ffc800; }

.error-message {
    background-color: rgba(140, 28, 10, 0.3); /* 삼국지풍 에러 메시지 배경 */
    border: 1px solid #8c1c0a;
    color: #ffdead;
    font-size: 0.9em;
    padding: 12px; /* 패딩 조정 */
    border-radius: 4px;
}

.login_footer {
    background-color: transparent; /* 로그인 페이지에서는 푸터 배경 투명하게 */
    position: absolute; /* 화면 하단에 고정시키되, 배경과 어울리도록 */
    bottom: 15px;
    color: #a08c6c;
    text-shadow: 1px 1px 2px #000;
}
.login_footer #footer p {
    color: #a08c6c;
    font-size: 0.85em;
}

/* 회원가입 폼 테마 적용 */
.register_form_wrap { /* register_form.css 에서 login_wrap 과 유사하게 처리 */
    padding-top: 80px; /* 헤더 높이 고려 */
    padding-bottom: 40px;
    background-color: #0c0a08;
    /* background-image: url('/static/img/bg/samkuk_scroll_bg.png'); */ /* 두루마리 배경 예시 */
}
.register_form_container { /* login_container 와 유사하게 처리 */
    background-color: rgba(26, 18, 11, 0.95);
    border: 1px solid #c8a064;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7); 
}
.profile_preview {
    border: 3px solid #c8a064; /* 프로필 이미지 테두리 */
    box-shadow: 0 0 10px rgba(200, 160, 100, 0.5);
}
.file_upload_button {
    background-color: #5c4a3a;
    color: #ffdead;
    border: 1px solid #4a3b2a;
}
.file_upload_button:hover {
    background-color: #7a6a5a;
}


/* 프로필 페이지 (간단한 테마 적용) */
.profile-container {
    font-family: "Nanum Myeongjo", "Noto Serif KR", serif;
    color: #e0e0e0;
    max-width: 1100px; /* 너비 조정 */
}
.profile-sidebar {
    background: rgba(26, 18, 11, 0.9); /* 반투명 배경 */
    border: 1px solid #c8a064;
    box-shadow: 0 4px 15px rgba(0,0,0,0.6);
    border-radius: 8px;
}
.profile-image {
    border: 4px solid #c8a064; /* 테두리 두께 증가 */
    box-shadow: 0 0 15px rgba(200,160,100,0.6);
}
.profile-name {
    color: #ffc800;
    text-shadow: 1px 1px 3px #000;
    font-size: 1.8em;
}
.profile-meta {
    color: #a08c6c;
    font-size: 0.9em;
}
.profile-main {
    gap: 25px; /* 섹션 간 간격 조정 */
}
.profile-section {
    background: rgba(17, 12, 8, 0.9); 
    border: 1px solid #4a3b2a;
    box-shadow: 0 3px 10px rgba(0,0,0,0.5);
    border-radius: 8px;
    padding: 30px; /* 내부 패딩 증가 */
}
.section-title {
    color: #ffdead;
    text-shadow: 1px 1px 2px #000;
    font-size: 1.5em; /* 섹션 제목 크기 */
    padding-bottom: 10px;
    border-bottom: 1px solid #5c4a3a; /* 구분선 */
}
.section-title i {
    color: #c8a064;
    font-size: 1.2em; /* 아이콘 크기 */
    margin-right: 12px;
}
.status-message {
    background: #2c1d13;
    color: #e0e0e0;
    border-left: 5px solid #c8a064; 
    font-size: 1em; /* 상태 메시지 폰트 크기 */
    padding: 18px; /* 패딩 증가 */
    border-radius: 4px;
}
.stat-card {
    background: #2c1d13;
    border: 1px solid #4a3b2a;
    border-radius: 6px;
    padding: 20px; /* 스탯 카드 패딩 */
}
.stat-number {
    color: #ffc800;
    font-size: 2em; /* 스탯 숫자 크기 */
}
.stat-label {
    color: #a08c6c;
    font-size: 0.95em; /* 스탯 라벨 */
}
.activity-item {
    border-bottom: 1px solid #4a3b2a;
    padding: 18px 0; /* 활동 항목 패딩 */
}
.activity-badge { 
    padding: 5px 10px; /* 뱃지 패딩 */
    font-size: 0.85em;
    border-radius: 4px;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.7);
}
.badge-comment { background: #3a5b8e; color: #fff; border:1px solid #28406b;}
.badge-want { background: #4a7c45; color: #fff; border:1px solid #31592d;}
.badge-report { background: #8e3a3a; color: #fff; border:1px solid #6b2828;}

.activity-content a { color: #ffdead; }
.activity-content a:hover { color: #ffc800; }
.activity-date { font-size: 0.8em; }

.button.primary-button {
    background: #8c1c0a; color: #fff;
    border: 1px solid #5a1005; box-shadow: inset 0 -2px 0 #5a1005;
    font-size: 0.95em; padding: 10px 20px;
}
.button.primary-button:hover { background: #a52a2a; }
.button.secondary-button {
    background: #5c4a3a; color: #d4c0a0;
    border: 1px solid #4a3b2a;
    font-size: 0.95em; padding: 10px 20px;
}
.button.secondary-button:hover { background: #7a6a5a; color: #fff; }

/* 목록 페이지 스타일 */
.list-page-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.category-header .category-title {
    color: #ffc800;
    font-family: "Nanum Myeongjo", "Noto Serif KR", serif;
    font-size: 2em;
    text-shadow: 1px 1px 2px #000;
    border-bottom: 1px solid #c8a064;
    padding-bottom: 10px;
    margin-bottom: 25px;
    text-align: center;
    color: white;
}
.list-card { 
    background: rgba(20, 12, 8, 0.8);
    border: 1px solid #5c4a3a;
    box-shadow: 0 4px 8px rgba(0,0,0,0.4);
    border-radius: 8px;
}
.list-card:hover {
    border-color: #c8a064;
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 8px 16px rgba(0,0,0,0.6);
}
.item-title { 
    color: #ffdead;
    font-weight: bold;
}
.list-card:hover .item-title {
    color: #ffc800;
}
.item-sub-info { 
    color: #b8a07c;
}
.pagination .page-link {
    background: #2c1d13;
    color: #a08c6c;
    border: 1px solid #4a3b2a;
    font-size: 0.95em; /* 페이지네이션 링크 폰트 크기 */
    padding: 10px 16px; /* 페이지네이션 링크 패딩 */
    border-radius: 4px;
}
.pagination .page-link:hover {
    background: #4a3b2a;
    color: #ffdead;
    border-color: #5c4a3a;
}
.pagination .page-item.active .page-link {
    background: #8c1c0a;
    color: #fff;
    border-color: #8c1c0a;
    font-weight: bold;
}
.pagination .page-item.disabled .page-link {
    background: #1a120b;
    color: #5c4a3a;
    border-color: #2c1d13;
}


/* 게시판 페이지 공통 스타일 (기본 스타일을 삼국지 테마에 맞게) */
.notice-list h2, /* notice, want, report 공통 */
.notice-write h2,
.notice-detail .notice-header h2 {
    color: #ffc800;
    font-family: "Nanum Myeongjo", "Noto Serif KR", serif;
    text-shadow: 1px 1px 2px #000;
    border-bottom: 1px solid #c8a064;
    padding-bottom: 10px;
    margin-bottom: 25px;
    text-align: center;
    font-size: 2em;
}

.search-form input { /* 게시판 검색창 */
    background-color: #2c1d13;
    border: 1px solid #5c4a3a;
    color: #e0e0e0;
}
.search-form input::placeholder { color: #a08c6c; }
.search-form button {
    background-color: #5c4a3a;
    color: #ffdead;
    border: 1px solid #4a3b2a;
}
.search-form button:hover { background-color: #7a6a5a; color: #fff;}

.write-btn { /* 글쓰기 버튼 */
    background-color: #8c1c0a;
    color: #fff;
    border: 1px solid #5a1005;
    box-shadow: inset 0 -2px 0 #5a1005;
}
.write-btn:hover { background-color: #a52a2a; }

.notice-table { /* 게시판 테이블 */
    background-color: rgba(26,18,11,0.8); /* 배경 약간 투명하게 */
    border: 1px solid #4a3b2a;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
.notice-table th {
    background-color: #2c1d13; /* 테이블 헤더 배경 */
    color: #ffdead;
    border-bottom: 2px solid #c8a064; /* 헤더 하단 강조선 */
}
.notice-table td {
    border-bottom: 1px solid #4a3b2a; /* 셀 구분선 */
    color: #d4c0a0;
}
.notice-table td a {
    color: #ffdead;
    font-weight: 500;
}
.notice-table td a:hover {
    color: #ffc800;
    text-decoration: underline;
}

.status-badge { /* 상태 뱃지 */
    text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
    border: 1px solid rgba(0,0,0,0.3);
}
.status-waiting { background-color: #4a4a4a; color: #ccc; border-color: #333; }
.status-approved { background-color: #3a7c35; color: #a0f090; border-color: #28592d;} /* 녹색계열 */
.status-rejected { background-color: #7c3a3a; color: #f0a0a0; border-color: #592828;} /* 붉은색계열 */

/* 게시글 작성/수정 폼 */
.write-form {
    background-color: rgba(26,18,11,0.9);
    border: 1px solid #4a3b2a;
    padding: 25px;
}
.input-group label { color: #d4c0a0; }
.input-group input,
.input-group textarea,
.input-group select { /* select 도 추가 */
    background-color: #2c1d13;
    border: 1px solid #5c4a3a;
    color: #e0e0e0;
    border-radius: 4px;
}
.input-group input:focus,
.input-group textarea:focus,
.input-group select:focus {
    border-color: #c8a064;
    box-shadow: 0 0 5px rgba(200, 160, 100, 0.4);
}
.submit-btn { /* 글쓰기 폼의 제출 버튼 */
    background-color: #8c1c0a;
    color: #fff;
    border: 1px solid #5a1005;
    box-shadow: inset 0 -2px 0 #5a1005;
    padding: 12px 25px; /* 패딩 조정 */
    font-size: 1.05em;
}
.submit-btn:hover { background-color: #a52a2a; }


/* 게시글 상세 페이지 */
.notice-detail .notice-header {
    background-color: rgba(26,18,11,0.9);
    border: 1px solid #4a3b2a;
    padding: 25px;
}
.notice-detail .notice-meta {
    color: #a08c6c;
}
.notice-detail .notice-meta span {
    margin-right: 25px;
}
.notice-detail .notice-content {
    background-color: rgba(17,12,8,0.9); /* 본문 배경은 더 어둡게 */
    border: 1px solid #4a3b2a;
    padding: 30px; /* 본문 패딩 증가 */
    color: #e0e0e0;
    line-height: 1.7;
}
.notice-actions a {
    background-color: #5c4a3a;
    color: #ffdead;
    border: 1px solid #4a3b2a;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.notice-actions a:hover { background-color: #7a6a5a; color: #fff;}
.notice-actions .delete-btn {
    background-color: #8c1c0a; color: #fff;
    border: 1px solid #5a1005;
}
.notice-actions .delete-btn:hover { background-color: #a52a2a; }

/* 관리자 답변 박스 */
.admin-comment-box {
    background-color: #2c1d13; /* 약간 다른 갈색톤 */
    border-left: 5px solid #c8a064; /* 금색 왼쪽 강조선 */
    padding: 25px;
}
.admin-comment-box h3 {
    color: #ffc800;
    font-size: 1.3em;
}
.admin-comment-box h3:before { /* '관리자' 뱃지 */
    background-color: #c8a064;
    color: #1a120b; /* 어두운 글자색 */
    font-size: 0.75em;
    padding: 3px 10px;
    font-weight: bold;
}
.admin-comment-box .comment-content { color: #e0e0e0; }


/* 댓글 영역 (movie_detail.html) 삼국지 풍으로 조정 */
.movie-detail { /* 영상 상세 페이지 컨테이너 */
    /* padding-top: 20px; */ /* 바디 패딩과 겹칠 수 있으니 조정 */
}
.video-container {
    border: 2px solid #4a3b2a;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    margin-bottom: 25px;
}
.movie-info {
    background-color: rgba(26,18,11,0.9);
    border: 1px solid #4a3b2a;
    padding: 25px;
    border-radius: 6px;
}
.movie-info h2 {
    color: #ffc800;
    font-size: 1.8em;
    font-family: "Nanum Myeongjo", "Noto Serif KR", serif;
    text-shadow: 1px 1px 2px #000;
}
.movie-info .movie-meta {
    color: #a08c6c;
}
.comments-section {
    /* 기존 스타일 유지하되, 폰트와 색상이 body에서 상속됨 */
}
.comment-form {
    background-color: rgba(26,18,11,0.9);
    border: 1px solid #4a3b2a;
    padding: 25px;
}
.comment-form textarea {
    background-color: #2c1d13;
    border: 1px solid #5c4a3a;
    color: #e0e0e0;
}
.comment-form textarea::placeholder { color: #a08c6c; }
.comment-form button {
    background-color: #8c1c0a; color: #fff;
    border: 1px solid #5a1005; box-shadow: inset 0 -2px 0 #5a1005;
}
.comment-form button:hover { background-color: #a52a2a; }

.comment-list {
    background-color: rgba(17,12,8,0.9);
    border: 1px solid #4a3b2a;
    border-radius: 6px;
}
.comment {
    border-bottom: 1px solid #4a3b2a;
}
.comment-line::before, .comment-line::after {
    background-color: #5c4a3a; /* 들여쓰기 선 색상 */
}
.comment-author {
    color: #ffdead;
    font-weight: bold;
}
.comment-date { color: #a08c6c; }
.comment-content { color: #e0e0e0; }
.comment-actions button {
    background: #5c4a3a;
    color: #ffdead;
    border: 1px solid #4a3b2a;
}
.comment-actions button:hover {
    background-color: #c8a064;
    border-color: #c8a064;
    color: #1a120b;
}

.reply-form { /* 답글 폼 */
    background-color: #2c1d13;
    border-left: 4px solid #c8a064;
}
.reply-form textarea {
    background-color: #1a120b;
    border-color: #5c4a3a;
    color: #e0e0e0;
}
.reply-form button[type="submit"] { /* 답글 작성 버튼 */
    background-color: #8c1c0a;
}
.reply-form button[type="button"] { /* 답글 취소 버튼 */
    background-color: #5c4a3a;
    color: #d4c0a0;
}
.comment-edit-form textarea {
    background-color: #2c1d13;
    border: 1px solid #5c4a3a;
    color: #e0e0e0;
}
.comment-edit-form button[type="submit"] { /* 수정 버튼 */
    background-color: #8c1c0a;
}
.comment-edit-form button[type="button"] { /* 수정 취소 버튼 */
    background-color: #5c4a3a;
}
/* --- Mobile Menu Button --- */
.mobile-menu-btn {
    display: none; /* Desktop default: hidden */
    background: none;
    border: none;
    color: #c8a064;
    font-size: 1.8em;
    cursor: pointer;
    margin-right: 15px;
    padding: 5px;
}
.mobile-menu-btn:hover {
    color: #ffc800;
}


/* --- Mobile Media Queries --- */
@media (max-width: 900px) { /* Tablet/Mobile Breakpoint */
    
    #header {
        position: relative;
        flex-wrap: wrap; /* Allow wrapping for mobile menu */
        padding: 10px 20px;
    }

    .mobile-menu-btn {
        display: block; /* Show hamburger on mobile */
        order: 1; /* First item */
    }

    .logo {
        order: 2; /* Center or create space */
        margin-right: auto;
    }
    
    #tnb {
        order: 3;
    }

    /* GNB Mobile Style */
    .gnb {
        display: none; /* Hidden by default on mobile */
        width: 100%;
        order: 4; /* New line */
        background-color: rgba(26, 18, 11, 0.98);
        border-top: 1px solid #c8a064;
        margin-top: 10px;
        box-shadow: 0 5px 10px rgba(0,0,0,0.5);
    }
    .gnb.active {
        display: block; /* Show when active */
    }

    .gnb ul {
        flex-direction: column; /* Stack items vertically */
    }

    .gnb ul li {
        margin-left: 0;
        border-bottom: 1px solid #2c1d13;
        width: 100%;
    }
    
    .gnb ul li a {
        display: block;
        padding: 15px 20px;
        font-size: 1.1em;
    }

    /* Dropdowns in Mobile Message: Expand them or simplify */
    .gnb ul li ul {
        position: static; /* Relative to parent li */
        display: none; /* JS or CSS Click to show? For now, open on hover or show all */
        background-color: #110c08;
        box-shadow: none;
        border: none;
        padding-left: 20px;
    }
    .gnb ul li:hover ul {
        display: block; /* Keep hover for simplicity, or add JS toggle for submenus */
    }
    
    /* Layout Adjustments */
    .banner2 li {
        width: calc(50% - 10px); /* 2 items per row */
    }
    
    .movie-section.samkuk-section h2 {
        font-size: 1.5em; /* Smaller headings */
    }
}

@media (max-width: 600px) { /* Small Mobile */
    .banner2 li {
        width: calc(100% - 10px); /* 1 item per row */
    }
    
    /* Hide some TNB items if needed, or adjust spacing */
    #tnb ul li {
        margin-left: 10px;
    }
    
    .search_wrap {
        width: 95%;
        padding: 20px;
    }
    
    #footer ul.pc {
        flex-direction: column;
    }
    #footer ul.pc li {
        margin: 5px 0;
    }
}