@charset "utf-8";

/* 리셋 & 베이스 */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; padding: 0; background:linear-gradient(135deg,#667eea 0%,#764ba2 100%); color: #333; font-family: "Malgun Gothic", sans-serif; }

/* 타이포그래피 베이스 */
h1 { font-size: 2rem; margin: 1.5rem 0; line-height: 1.2; }
h2 { font-size: 1.75rem; margin: 1.4rem 0; line-height: 1.25; }
h3 { font-size: 1.5rem; margin: 1.3rem 0; line-height: 1.3; }
h4 { font-size: 1.25rem; margin: 1.2rem 0; line-height: 1.35; }
h5 { font-size: 1rem; margin: 1rem 0; line-height: 1.4; }
h6 { font-size: 0.875rem; margin: 0.8rem 0; line-height: 1.45; }
p { margin: 1rem 0; line-height: 1.6; }
span { display: inline; }

/* 목록 */
ul, ol { margin: 1rem 0 1rem 1.5rem; padding: 0; }
li { margin: 0.5rem 0; }

/* 인용문 & 코드 */
blockquote { margin: 1rem 0; padding-left: 1rem; border-left: 4px solid #ddd; }
pre, code { font-family: Consolas, monospace; }

/* 링크 */
a { color: #04AA6D; text-decoration: underline; }
a:hover { color: #e60073; }


/*  버튼  */
.btn { display:inline-block; padding:8px 16px; font-size:16px; cursor:pointer; text-align:center; text-decoration:none; outline:none; color:#fff; background-color:#555; border:none; border-radius:5px; box-shadow:0 4px #999; transition:all 0.3s ease; }
.btn:hover { background-color:#333; }
.btn:active { background-color:#333; box-shadow:0 2px #666; transform:translateY(2px); }
.btn-blue { background-color:#2196F3; }
.btn-green { background-color:#4CAF50; }
.btn-red { background-color:#f44336; }
.btn-black { background-color:#000; }
.btn-white { background-color:#fff; color:#000; border:1px solid #ccc; }
.btn-outline { background-color:transparent; border:2px solid #555; color:#555; }
.btn-outline:hover { background-color:#555; color:#fff; }
.btn-small { padding:4px 10px; font-size:12px; }
.btn-large { padding:12px 24px; font-size:18px; }
.btn-block { display:block; width:100%; }
.btn:disabled, .btn.disabled { background-color:#ccc; color:#666; cursor:not-allowed; box-shadow:none; }
/*  버튼  */

/* 컨테이너 */
.container { width: 100%; max-width: 100%; margin: 60px auto 0; padding: 0 1rem; background: #fff; min-height: 100vh; border-radius: 6px; box-shadow: 0 0 5px rgba(0,0,0,0.1); overflow: hidden; }

.container_header { width: 100%; max-width: 100%; margin: 60px auto 0; padding: 0 1rem;background:linear-gradient(135deg,#ff33cc 0%,#764ba2 100%); min-height: 100vh; border-radius: 6px; box-shadow: 0 0 5px rgba(0,0,0,0.1); overflow: hidden; }

/* 메인 콘텐츠 */
.main-content { padding: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
/*.main-content { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);}*/

.navigation { position: fixed; top: 0; left: 0; width: 100%; display: flex; align-items: center; padding: 0 5%; background: black; height: 45px; z-index: 1000; }

.navigation a { text-decoration: none; color: #fff; font-size: 1rem; }

.navigation .logo { font-size: 1.4rem; flex: 0 0 65%; text-align: left; letter-spacing: 0.2em; font-weight: bold; }
.logo, .logo .glow { color: #fff; text-align: left; animation: glow 1s ease-in-out infinite alternate; }



@keyframes glow { from { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 10px #e60073; } to { text-shadow: 0 0 10px #fff, 0 0 20px #ff4da6, 0 0 10px #ff4da6; } }

.navigation .header-right { flex: 0 0 20%; display: flex; justify-content: flex-end; position: relative; font-size: 0.875rem; white-space: nowrap; }

.header-right .username { font-weight: bold; margin-right: 0.5rem; color: aliceblue; cursor: pointer; }

.header-right .logout { display: none; position: absolute; top: 100%; left: 0; background: #fff; border: 1px solid #ccc; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); padding: 0.5rem; z-index: 100; }

.header-right .logout.visible { display: block; }

.header-right .logout a { color: #000; text-decoration: none; }

.header-right .logout a:hover { text-decoration: underline; }

.navigation .menu-toggle { flex: 0 0 10%; display: flex; justify-content: flex-start; background: none; border: none; cursor: pointer; padding: 0.2rem 1.5rem; }

.menu-toggle .hamburger-icon { font-size: 24px; color: #fff; }

/*  아이디클릭시 로그아웃팝업 */
.header-right .user-menu { position: relative; display: inline-block; }
.header-right .username { cursor: pointer; }
.user-dropdown { display: none; position: absolute; top: calc(100% + 5px); right: 0; background-color: #fff; border: 1px solid #ccc; border-radius: 4px; box-shadow: 0 2px 5px rgba(0,0,0,0.2); z-index: 1000; }
.user-dropdown.show { display: block; }
.user-dropdown a { display: block; padding: 8px 12px; text-decoration: none; color: #333; white-space: nowrap; }
.user-dropdown a:hover { background-color: #f5f5f5; }

/*  아이디클릭시 로그아웃팝업 */

.overlay { height: 0; width: 100%; position: fixed; top: 0; left: 0; background-color: rgba(0,0,0,0.90); overflow-y: hidden; transition: height 0.5s ease; z-index: 1000; }

.overlay-content { position: relative; top: 15%; width: 100%; text-align: center; }

.overlay a { padding: 10px; display: block; font-size: 28px; color: #ccc; text-decoration: none; transition: color 0.3s; }

.overlay a:hover { color: #fff; }

.closebtn { position: absolute; top: 20px; right: 40px; font-size: 60px; color: white; background: none; border: none; cursor: pointer; }




/* 모바일 */
@media (max-width: 768px) {
   .search_ {
       padding: 6px 15px;
   }
   
   .search_input {
       font-size: 13px;
       padding: 6px 12px;
   }
   
   .search_btn {
       padding: 6px 10px;
       font-size: 16px;
   }
   
   .container {
       margin-top: 80px;
   }
}
/* 반응형 */
@media screen and (max-height: 450px) {
  .overlay a { font-size: 20px; }
  .closebtn { font-size: 40px; top: 15px; right: 35px; }
}


/* 푸터 */
.site-footer { margin-top: 2rem; width: 100%; background: #222; color: #fff; text-align: center; padding: 1rem; }

.site-footer p { margin: 0.5rem 0; font-size: 0.875rem; }

.footer { background: #04AA6D; color: #fff; text-align: center; padding: 1.25rem 0.625rem; font-size: 0.875rem; border-top: 1px solid #e0e0e0; }

.footer-links a { color: #fff; margin: 0 0.3125rem; text-decoration: none; font-size: 0.8125rem; }

.footer-links a:hover { text-decoration: underline; }

/* 600px 이상 */
@media (min-width: 600px) {
  .container { max-width: 600px; }
}

/* 768px 이상 */
@media (min-width: 768px) {
  .container { max-width: 720px; }
  .overlay-content { top: 20%; }
  .overlay-content a { font-size: 1.5rem; }
  .overlay-content button { font-size: 1.5rem; }
  .overlay .closebtn { font-size: 2rem; top: 30px; right: 40px; font-weight: bold; }
}

/* 992px 이상 */
@media (min-width: 992px) {
  .container { max-width: 960px; }
}