/* 기본 설정 */
    body, html {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Arial', sans-serif;
      background-color: #f4f4f9;
      color: #333;
      height: 100%;
      overflow: hidden; /* 기본 스크롤 숨김 */
    }
    
    /* 컨테이너 */
    .container {
      display: flex;
      flex-direction: column;
      height: 100vh;
      overflow: hidden; /* 메인 콘텐츠 스크롤을 위해 숨김 */
    }
    
    /* 헤더 */
    .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: #007bff;
      color: #fff;
      padding: 15px;
      flex-shrink: 0;
    }
    
    .back-button {
      background: none;
      border: none;
      color: #fff;
      font-size: 1.5rem; /* 기본 크기 */
      font-weight: bold; /* 굵은 글씨 */
      cursor: pointer;
      padding: 10px 15px;
      border-radius: 5px;
      transition: background-color 0.3s ease;
    }
    
    .back-button:hover {
      background-color: #0056b3;
    }
    
    .header-title {
      font-size: 20px;
      font-weight: bold;
      margin: 0;
    }
    
    /* 메인 콘텐츠 */
    .main {
      flex: 1; /* 남은 공간을 채움 */
      overflow-y: auto; /* 세로 스크롤 가능 */
      padding: 20px;
    }
    
    /* 제목 */
    .member-name {
      font-size: 22px;
      font-weight: bold;
      margin: 20px 0;
      line-height: 1.5;
      color: #333;
    }
    
    /* 내용 (경조사 및 일반 조건) */
    .details.row#desc {
      font-size: 18px; /* 기본 크기 */
      line-height: 1.8;
      margin-bottom: 20px;
      white-space: pre-wrap; /* 줄바꿈 허용 */
      word-wrap: break-word; /* 단어 줄바꿈 */
      color: #333;
      overflow-y: auto; /* 긴 내용 스크롤 허용 */
      max-height: calc(100vh - 150px); /* 제목과 여백 제외한 영역 제한 */
      border: 1px solid #ddd; /* 가독성 향상을 위한 테두리 */
      padding: 10px;
      border-radius: 5px;
      background-color: #fff;
    }
    
    /* 경조사 스타일 */
    .details.row#desc.ceremony {
      font-size: 22px; /* 경조사일 경우 큰 글씨 */
      line-height: 2;
      font-weight: bold;
    }
    
    /* 공지사항 등 일반 내용 */
    .details.row#desc.general {
      font-size: 18px; /* 공지사항 기본 크기 */
      line-height: 1.5;
    }
    
    /* 파일 URL */
    .file-url {
      font-size: 14px;
      color: #555;
      word-wrap: break-word;
      margin-right: 10px;
    }
    
    /* 첨부 파일 */
    .details.row#file-container {
      display: flex;
      align-items: center;
      gap: 10px; /* URL과 버튼 간 간격 */
      margin-top: 10px;
    }
    
    .action-button {
      font-size: 16px;
      color: #fff;
      background-color: #007bff;
      border: none;
      padding: 10px 20px;
      cursor: pointer;
      border-radius: 5px;
      transition: background-color 0.3s ease;
    }
    
    .action-button:hover {
      background-color: #0056b3;
    }
    
    /* 반응형: 폰 화면에서 크기 조정 */
    @media screen and (max-width: 768px) {
      .member-name {
        font-size: 20px; /* 제목 크기 조정 */
      }
      .details.row#desc {
        font-size: 16px; /* 일반 조건에서 글씨 크기 축소 */
      }
      .details.row#desc.ceremony {
        font-size: 20px; /* 경조사 폰에서 크기 조정 */
      }
    }