body {
  font-family: 'yeoreum', 'GFS Neohellenic', sans-serif; /* 🌼 Sets base font for entire page */
  background-color: #60cb6c; /* 🍃 Light mint background */
  background-image: url('http://dl4.glitter-graphics.net/pub/577/577814mxl3lzplgr.gif'); /* 🌟 Sparkly background image */
  background-attachment: fixed; /* 📌 Keeps background fixed during scroll */
  background-repeat: repeat; /* 🔁 Repeats the background pattern */
  margin: 0; /* 🚫 Removes default outer spacing */
  padding: 0; /* 🚫 Removes default inner spacing */
  overflow: hidden; /* 🛑 Hides content that overflows the page */
}

.fancyBox {
  -webkit-mask-image: url('images/wavy-mask.svg');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: cover;
  -webkit-mask-position: center;

  background-color: #fff0f8;
  padding: 20px;
}


.wrapper {
  display: flex; /* 📦 Uses flex layout for horizontal alignment */
  max-width: 960px; /* 📐 Limits page width to 900px */
  margin: 40px auto; /* ⬆ Adds top margin, ⬅➡ centers horizontally */
  border: 4px solid #60cb6c; /* 🎀 Pink solid border around main container */
  background-color: #fff; /* ⚪ White background inside wrapper */
  box-shadow: 0 0 10px #aaa; /* 💨 Soft outer shadow around wrapper */
  border-radius: 12px;
  overflow: hidden;
}

.btn {
  font-family: 'yeoreum', 'GFS Neohellenic', sans-serif; /* 🌼 Button font styling */
  font-size: 16px; /* 🔠 Font size for buttons */
  background-color: #ffccff; /* 🩰 Light pink button background */
  border: 2px solid #c080ff; /* 💜 Purple border around button */
  padding: 8px; /* 📦 Padding inside button */
  cursor: pointer; /* 👆 Shows pointer when hovering */
  border-radius: 0px; /* ⭕ Rounded corners */
  box-shadow: 0 0 8px #ff99ff; /* ✨ Soft glow beneath button */
  transition: 0.3s ease; /* 🌊 Smooth animation when changing styles */
}

.btn:hover {
  background-color: #ffc0e0; /* 🩷 Button color changes when hovered */
  box-shadow: 0 0 12px #ff66cc; /* 💡 Glow gets stronger on hover */
}

.btn:active {
  background-color: #ffb3e0; /* 🧁 Color when button is actively clicked */
  box-shadow: inset 0 0 6px #aa00aa; /* 🔮 Inner shadow for pressed effect */
  transform: scale(0.5); /* 📌 Button scales down when clicked (might shrink too much) */
}

.main {
  flex: 1; /* 🚀 Takes up remaining space beside sidebar */
  padding: 20px; /* 📦 Inner spacing for content area */
}

.headerBox {
  font-family: 'yeoreum', 'GFS Neohellenic', sans-serif; /* 🌼 Font for header */
  font-size: 14px; /* 🔠 Smaller header text */
  border: 2px solid #999900; /* 🟡 Mustard-colored border */
  background-color: #ffffcc; /* 🍋 Light yellow background */
  padding: 5px; /* 📦 Space inside header box */
}

.imageBox img {
  width: 100%; /* 📐 Makes image fill its container */
  max-height: 300px; /* 📏 Limits vertical size */
  object-fit: cover; /* 🧩 Scales and crops image to fill box */
  border: 2px solid #000; /* ⚫ Black border around image */
  margin: 10px 0; /* ⬆⬇ Top and bottom spacing */
}

.dialogBox {
  font-family: 'yeoreum', 'GFS Neohellenic', sans-serif; /* 🌼 Font for dialog box */
 background-color: #ffffee;
  border: 2px solid #aaa;
  border-radius: 8px;
  padding: 12px;
  font-size: 16px;
  box-shadow: 0 0 6px #cccccc;
}

::selection {
  background: #f7abcf; /* 🎨 Background color when text is selected */
  color: #FFFFFF; /* 🖋️ Selected text turns white */
}

a {
  text-decoration: none; /* 🚫 Removes underline from links */
  color: pink; /* 🌸 Pink link text */
}

/*상단 패널*/
.topMenu {
  display: flex;
  justify-content: flex-end; /* 👉 오른쪽부터 정렬 */
  gap: 14px;
  padding: 12px 20px;
  background-color: #fff8ff; /* 상단 배경 */
  border-bottom: 2px solid #ffc0e0;
  box-shadow: 0 2px 6px #e8c8dd;
}

.menuBtn {
  padding: 8px 16px;
  font-family: 'yeoreum', 'GFS Neohellenic', sans-serif;
  font-size: 16px;
  color: #aa2288;
  background-color: #ffe0f5;
  border: 2px solid #cc66cc;
  border-radius: 12px;
  text-decoration: none;
  box-shadow: 0 2px 4px #ddaadd;
  transition: all 0.2s ease;
}

.menuBtn:hover { /* 🩷 마우스 올릴 때 톤 다운 */
  background-color: #f8cce8;
  color: #992277;
  box-shadow: 0 2px 6px #c088bb;
}

.menuBtn:active { /* 🧁 클릭 시 눌림 효과 */
  background-color: #e0aacb;
  box-shadow: inset 0 2px 6px #aa2288;
  transform: translateY(2px); /* 👇 살짝 눌리는 모션 */
}

/* 왼쪽 패널 */
.leftPanel {
  width: 260px;
  background-color: #fff0f8;
  padding: 16px;
  border-right: 2px dashed #ff99cc;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.profileBox {
  margin-top: 20px; /* ⬆ Space above profile section */
  padding: 10px; /* 📦 Space inside profile box */
  border: 3px double #ff80c0; /* 🌿 Green dashed border */
  background-color: #f5fff5; /* 🍃 Pale green background */
  font-family: 'yeoreum', 'GFS Neohellenic', sans-serif; /* 🌼 Consistent font styling */
  box-shadow: 0 0 8px #ffb3dd; /* ✨ Soft green shadow */
  border-radius: 8px; /* ⭕ Slightly rounded corners */
   max-width: 150px; /* 📏 Maximum width for image */
   width: 83%;
  flex-shrink: 0;
}

.profileBox h3 {
  margin-top: 0; /* ⬆ Removes default space above heading */
  color: #006600; /* 🟢 Dark green heading text */
}

.profileImg {
  max-width: 100px; /* 📏 Maximum width for image */
  width: 30%; /* 📐 Responsive: 30% of container width */
  height: auto; /* 🔄 Keeps aspect ratio */
  margin-top: 10px; /* ⬆ Space above image */
  border-radius: 6px; /* ⭕ Rounded image corners */
  border: 2px solid #008000; /* 🌿 Green border around profile image */
}
.sideProfile {
  text-align: center;
  background-color: #feeeba;
  border: 2px dashed #170f0c;
  padding: 8px;
  border-radius: 12px;
  box-shadow: 0 0 6px #f0c0e0;
}

.profileThumb {
  width: 80px;
  height: auto;
  border-radius: 20%;
  border: 2px solid #cc66cc;
  margin-bottom: 6px;
}

.sideClock {
  margin-top: 10px;
  text-align: center;
  font-size: 18px;
  font-family: 'yeoreum', sans-serif;
  background-color: #feeeba;
  padding: 8px;
  border: 2px dashed #66cc66;
  border-radius: 8px;
}

.sideInfo {
  margin-top: 10px;
  font-size: 14px;
  background-color: #feeeba;
  padding: 6px;
  border: 2px solid #aaa;
  border-radius: 6px;
}

/* 오른쪽 패널 */
.rightPanel {
  flex: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.topBar {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 10px;
}

.contentArea {
  display: flex;
  gap: 20px;
}

.mainContent {
  flex: 1;
}

/* 최근 글 영역 */
.recentPosts {
  background-color: #f0f0ff;
  border: 2px dashed #9999ff;
  border-radius: 8px;
  padding: 12px;
}

.recentPosts h3 {
  margin-top: 0;
  color: #4444aa;
}

/* 글 스크롤 영역 */
.postScroll {
  max-height: 180px;
  overflow-y: scroll;
  padding-right: 6px;
  font-size: 14px;
  line-height: 1.6;
}