@import url('https://fonts.googleapis.com/css2?family=Jua&display=swap');

body {
    background-image: url('https://cdn.midjourney.com/53bfbd1e-cba2-481d-9952-fa5ac5c89402/0_2.png'); /* 이미지 주소 */
    background-size: cover;      /* 이미지가 화면을 가득 채우도록 조절합니다. */
    background-position: center;  /* 이미지의 중심이 화면 가운데 오게 합니다. */
    background-repeat: no-repeat; /* 이미지가 바둑판처럼 반복되지 않게 합니다. */
    background-attachment: fixed; /* 스크롤을 내려도 배경은 고정되게 합니다 (매우 세련된 효과). */



    font-family: 'Jua', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #f4f4f9E6;
    color: #333;
    font-size: 20px; 
    font-weight: 400;
}

.container {
    width: 95%;
    max-width: 100%;
    margin: 20px auto;
    padding: 20px;
    background-color: #ffffffD8;
    border-radius: 20px;
    box-shadow: 0 2px 15px rgba(0,0,0,0.1);
    backdrop-filter: blur(5px);
    overflow-wrap: break-word !important;
    word-break: break-all;
    
    
    
}

header h1 {
    font-size: 500%;
    border-bottom: 2px solid #eee;
    padding-bottom: 0px;
    margin-bottom:  0px;
}

h2, h3 {
    color: #2c3e50;
    font-weight: 700;
    letter-spacing: -0.5px;
}

a {
    color: #02164b;
    text-decoration: none;
}

.btn {
    display: inline-block;
    padding: 10px 20px;
    background: #3498db;
    color: #fff;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    font-size: 18px;
}

.btn-small {
    padding: 5px 10px;
    font-size: 16px;
}

.card {
    border: 1px solid #ddd;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 5px;
}

.meta {
    font-size: 18px;
    color: #888;
}

form div {
    margin-bottom: 15px;
}

input[type="text"], textarea {
    width: 100%;
    padding: 10px;
    font-size: 18px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
}

.nav-menu {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
    justify-content: center;
}
.nav-menu a {
    text-decoration: none;      /* 링크 밑줄을 제거합니다. */
    padding: 12px 20px;         /* 버튼 내부에 상하 12px, 좌우 20px 여백을 줍니다. */
    background-color: hsl(199, 94%, 25%);  /* 버튼 배경을 아주 연한 회색으로 설정합니다. */
    color: #ffffff;                /* 글자색을 진한 회색으로 바꿉니다. */
    border: 1px solid #dee2e6;  /* 얇은 회색 테두리를 만듭니다. */
    border-radius: 50px;        /* 모서리를 둥글게 깎아 알약 모양으로 만듭니다. */
    font-size: 20px;            /* 글자 크기를 조절합니다. */
    transition: all 0.3s;       /* 마우스를 올렸을 때 부드럽게 변하도록 설정합니다. */
}
.nav-menu a:hover {
    background-color: #3498db;  /* 마우스를 올리면 배경이 파란색으로 변합니다. */
    color: white;               /* 마우스를 올리면 글자색이 흰색으로 변합니다. */
    border-color: #3498db;      /* 테두리 색상도 파란색으로 함께 바꿉니다. */
    transform: translateY(-3px); /* 버튼이 살짝 위로 떠오르는 효과를 줍니다. */
}

.sub-nav-menu {
    display: flex;
    gap: 5px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    justify-content: center;
}
.sub-nav-menu a {
    text-decoration: none;      /* 링크 밑줄을 제거합니다. */
    padding: 6px 10px;         /* 버튼 내부에 상하 12px, 좌우 20px 여백을 줍니다. */
    background-color: hsl(266, 45%, 88%);  /* 버튼 배경을 아주 연한 회색으로 설정합니다. */
    color: #20001c;                /* 글자색을 진한 회색으로 바꿉니다. */
    border: 2px solid #2401242a;  /* 얇은 회색 테두리를 만듭니다. */
    font-size: 18px;            /* 글자 크기를 조절합니다. */
    transition: all 0.3s;       /* 마우스를 올렸을 때 부드럽게 변하도록 설정합니다. */
}
.sub-nav-menu a:hover {
    background-color: #3498db;  /* 마우스를 올리면 배경이 파란색으로 변합니다. */
    color: white;               /* 마우스를 올리면 글자색이 흰색으로 변합니다. */
    border-color: #3498db;      /* 테두리 색상도 파란색으로 함께 바꿉니다. */
    transform: translateY(-3px); /* 버튼이 살짝 위로 떠오르는 효과를 줍니다. */
}

.comment-section {
    margin-top: 30px;
    border-top: 1px solid #eee;
    padding-top: 30px;
    flex-wrap: wrap;
}

.comment {
    background: #f9f9f9;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
}

.comment-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.comment-body{ flex:1; min-width:0; }
.comment-delete-form{ margin:0; flex-shrink:0; }
.comment-delete-btn{
  background: #c0392b;
  color: white;
  border: none;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
}
.comment-delete-btn:hover{
  opacity:1; color:#e74c3c; background:rgba(231,76,60,.08);
}

/* 모바일 대응 */
@media (max-width: 600px) {
    .container {
        margin: 10px;
        padding: 15px;
    }
    body {
        font-size: 18px;
    }
    header h1 {
        font-size: 32px; /* 60px이었던 제목을 모바일에서는 32px로 조절합니다. */
        word-break: keep-all; /* 단어가 잘리지 않고 통째로 줄바꿈되게 합니다. */
    }
    header h4 {
        font-size: 16px; /* 날짜 부분도 모바일에 맞춰 살짝 줄여줍니다. */
    }
}
.admin-delete-btn {
  background: #c0392b;
  color: white;
  border: none;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
}
.post-body {
    width: 100%;
    word-break: break-all; 
    overflow-wrap: break-word;
    overflow: hidden;
}

.post-body * {
    max-width: 100% !important;
    white-space: pre-wrap; 
    box-sizing: border-box !important;
}

.post-body img, .post-body table, .post-body div {
    height: auto !important;
}