/* Bulma 위에 얹는 최소한의 프로젝트 커스텀 스타일 */

/* 폼 검증 에러 표시 (public/js/form-validate.js) - 관리자 화면(admin/_style.php)과 동일한 규칙 */
.input.field-error, .textarea.field-error, select.field-error, .field-error { border-color: #d94141; }
.error-message { display: block; color: #d94141; font-size: 12px; margin: .25rem 0 0; min-height: 14px; }
.error-message:empty { display: none; }

html, body {
  height: 100%;
}

/* home-hero/home-band 풀블리드(전체 폭) 섹션이 100vw 계산 시 가로 스크롤을 만들지 않도록 */
html {
  overflow-x: hidden;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1 0 auto;
}

/* 로그인/회원가입처럼 박스 하나짜리 작은 페이지가 화면 위쪽에 붙어 보이지 않도록
   세로 중앙보다 살짝 위에 오게 배치 (min-height 안에서만 정중앙 정렬하고,
   그 아래 여백을 더 둬서 시각적 중심을 위로 당김) */
.auth-page {
  min-height: 60vh;
  align-items: center;
  padding-bottom: 4rem;
}

/* 소셜 로그인 버튼 - 무채색 원칙의 4번째 예외(frontend-bulma.md 참고). 구글/카카오는
   자기 브랜드 색을 쓰는 게 사용자에게 즉시 인지되는 관용적 UI라 예외로 둔다. */
.social-login-divider { display: flex; align-items: center; text-align: center; color: #999; font-size: .75rem; }
.social-login-divider::before, .social-login-divider::after { content: ""; flex: 1; border-bottom: 1px solid #e0e0e0; }
.social-login-divider span { padding: 0 .75rem; }
.social-login-btn { border: 1px solid #dbdbdb; font-weight: 600; }
.social-login-btn.google { background: #fff; color: #3c4043; }
.social-login-btn.google:hover { background: #f7f7f7; }
.social-login-btn.kakao { background: #FEE500; color: #191600; border-color: #FEE500; }
.social-login-btn.kakao:hover { background: #f5dc00; }

/* 회원가입 약관동의 - 개별 항목은 접었다 펼 수 있는 <details>로 본문을 보여준다 */
.terms-agreement { padding: 1rem; }
.terms-content summary { cursor: pointer; }
.terms-content-box {
  max-height: 160px;
  overflow-y: auto;
  margin-top: .4rem;
  padding: .6rem .75rem;
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 4px;
  color: #555;
  line-height: 1.5;
}

.banner-image {
  width: 100%;
  border-radius: 6px;
  margin-bottom: 0.75rem;
}

.comment-item {
  padding: 0.65rem 0;
  border-bottom: 1px solid #f5f5f5;
}

/* 마이페이지 > 메일(/mypage/mail, /mypage/mail/inbox, /mypage/mail/sent) - .box 하나(또는 두 개를
   세로로 쌓은 것) 아래/사이에 페이지네이션 `<nav>`나 다음 박스가 형제로 이어진다. 전역
   .box{height:100%}는 원래 홈 화면처럼 같은 줄에 나란한 카드 높이를 맞추기 위한 규칙인데, 여기서는
   상위 .column이 flex 컨테이너(.columns)의 stretch로 "고정된 높이"(= 그 컬럼 안 형제 요소를 전부
   합친 높이)를 갖게 되면서, 그 규칙이 .box를 형제 요소까지 합친 높이만큼 늘려버리는 문제가 있었다
   - .box 배경/영역이 실제 콘텐츠보다 훨씬 아래까지 부풀어서, 바로 뒤에 오는 요소(페이지네이션 등)가
   그만큼 아래로 밀려나 보인다(예: /mypage/mail/inbox 페이지네이션이 footer 근처까지 밀려 보이던 문제,
   2026-08-04 "재현 못함"으로 보류했던 것의 실제 원인). 이 페이지들의 박스에는 height:100%를 끄고
   자연스러운 콘텐츠 높이만 쓰게 한다. */
.mail-page-box { height: auto; }

/* 마이페이지 > 메일 연동(/mypage/mail) 계정 목록 - 계정마다 Bulma .box(패딩 1.75rem)를
   중첩해서 쓰면 항목 하나하나가 불필요하게 크고 무거워 보여서, comment-item과 같은
   가벼운 구분선 리스트로 바꿨다. */
.mail-account-list { margin-top: .25rem; }
.mail-account-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: .85rem 0;
  border-bottom: 1px solid #f0f0f0;
}
.mail-account-item:last-child { border-bottom: none; }
.mail-account-info p { margin: 0; }
.mail-account-info p + p { margin-top: .25rem; }
.mail-account-actions { margin: 0; gap: .4rem; }
.mail-account-actions form { margin: 0; }

/* 메일 발송/답장/전달 모달의 첨부파일 영역(src/views/member/mail/_attach_fields.php,
   public/js/mail-compose.js) - 클릭 또는 드래그앤드롭으로 파일을 여러 개 담을 수 있다. */
.mail-attach-dropzone {
  border: 1px dashed #d0d0d0;
  border-radius: 4px;
  padding: .85rem;
  text-align: center;
  color: #888;
  font-size: .85rem;
  cursor: pointer;
  transition: border-color .15s, background-color .15s, color .15s;
}
.mail-attach-dropzone.is-dragover { border-color: #2563eb; background-color: #f0f5ff; color: #2563eb; }

/* 첨부 목록 - 균등한 폭의 2열 그리드(2026-08-19, "첨부 이미지가 좌우로 2줄씩 나오게 해달라, 지금은
   한 줄로만 나온다" 요청) - novap.kr 대시보드(phpdashapi) "저장소" 글쓰기의 .dash-compose-files와
   같은 이유로 같은 값을 그대로 맞췄다(파일명 길이가 제각각이라 flex-wrap 한 줄로 두면 오른쪽 여백이
   들쭉날쭉했음). */
.mail-attach-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: .4rem; margin-top: .5rem; }
/* display:grid가 class 자체에 있으면 hidden 속성이 특정도 동률이라 안 먹는 문제 예방
   (phpdashapi .dash-compose-files[hidden]과 동일한 함정 - 여기서도 미리 막아둔다) */
.mail-attach-list[hidden] { display: none; }

/* 첨부 칩 - 업로드 중(진행률 바)/완료(체크)/실패(빨간 문구) 3가지 상태(2026-08-19, "저장소처럼
   첨부 즉시 진행바+체크 아이콘" 요청 - phpdashapi .dash-compose-file과 시각 패턴을 맞췄다. 원래도
   그 반대 방향으로 이 프로젝트 색을 참고했었다). */
.mail-attach-file {
  /* 그리드 아이템도 기본 min-width:auto라 안쪽 파일명이 길면 칩이 그리드 칸(1fr) 밖으로 넘친다 -
     phpdashapi .dash-compose-file과 같은 이유로 명시적으로 0을 준다. */
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: #f5f5f5;
  border-radius: 999px;
  padding: .3rem .5rem .3rem .7rem;
  font-size: .78rem;
  color: #4b5468;
  width: 100%;
  box-sizing: border-box;
}
.mail-attach-file-name {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mail-attach-file.is-error { background: #fdecec; color: #c22; }
.mail-attach-file.is-error .mail-attach-file-name { white-space: normal; }

/* 이미지 파일은 텍스트 대신(위에) 썸네일을 보여준다 */
.mail-attach-file.has-thumb { border-radius: 14px; padding: .3rem .5rem .3rem .3rem; }
.mail-attach-file-thumb {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  object-fit: cover;
  flex: 0 0 auto;
}

.mail-attach-file-progress {
  flex: 0 0 auto;
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: #dcdfe4;
  overflow: hidden;
}
.mail-attach-file.is-done .mail-attach-file-progress,
.mail-attach-file.is-error .mail-attach-file-progress { display: none; }
.mail-attach-file-progress-bar {
  display: block;
  height: 100%;
  width: 0;
  background: var(--brand);
  transition: width .15s ease;
}

/* 체크 아이콘 - 업로드 중/실패일 때는 숨기고 완료(is-done)일 때만 보여준다 */
.mail-attach-file-check { display: none; flex: 0 0 auto; color: #1f9d55; font-size: .85rem; line-height: 1; }
.mail-attach-file.is-done .mail-attach-file-check { display: inline-block; }

.mail-attach-file-remove {
  flex: 0 0 auto;
  border: none;
  background: none;
  color: #9aa0aa;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 .15rem;
}
.mail-attach-file-remove:hover { color: #e0445b; }

/* 메일 발송/답장/전달 모달의 본문 에디터(src/views/member/mail/_body_editor_fields.php,
   public/js/mail-compose.js) - 외부 라이브러리 없이 굵게/기울임/링크만 지원하는 가벼운
   서식 툴바 + contenteditable. 실제 제출값은 화면에 안 보이는 .mail-body-textarea. */
.mail-body-toolbar { gap: .25rem; }
.mail-body-editor {
  min-height: 140px;
  max-height: 320px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.mail-body-editor:empty::before {
  content: attr(data-placeholder);
  color: #9a9a9a;
}

/* Gmail 스타일 앱 셸(받은메일함 전용, /mypage/mail/inbox) - 좌측 폴더형 사이드바 + 우측
   검색창/목록. 여기서 쓰는 .mail-inbox-row/.mail-inbox-list/.mail-inbox-search 같은 클래스는
   보낸편지함(sent.php)이 예전 2줄짜리 레이아웃으로 그대로 재사용 중이고, mail-flags.js도
   .mail-inbox-row/.mail-inbox-checkbox/.mail-inbox-star/.mail-inbox-important를 셀렉터로
   직접 쓰기 때문에 클래스명 자체는 바꾸지 않았다 - 대신 받은메일함만 다르게 보여야 하는 규칙은
   전부 `.mail-app .mail-inbox-*`처럼 `.mail-app` 하위로 스코프해서, 보낸편지함/상세페이지에는
   전혀 영향 없이 여기서만 한 줄짜리 행으로 오버라이드한다. */
/* 메일함은 사이트 공통 .container(가운데 정렬, 고정 max-width)를 벗어나 지메일처럼 화면 전체
   폭을 쓰고 좌측부터 내용이 시작되게 한다 - .full-bleed(위 서브페이지 배너용)와 같은 원리
   (width:100vw + 음수 margin으로 부모 .container를 빠져나감)를 여기 직접 적용했다.
   html{overflow-x:hidden}(파일 상단)이 100vw 계산 시 생기는 가로 스크롤을 이미 막아준다.
   전체 폭을 쓰는 건 검색창(.mail-app-topsearch)까지 포함해서 지메일처럼 4개 화면 어디서나
   똑같은 위치에 나오는 상단 검색줄 + [사이드바+본문] 줄을 함께 감싸는 셸이라 이름을 .mail-shell로
   붙였다(.mail-app은 그 안의 [사이드바+본문] flex 줄만 담당). */
.mail-shell {
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  box-sizing: border-box;
}

/* 지메일 상단바와 동일하게 [사이트명(좌측 끝)] - [검색창(가운데, 사이드바/본문 둘 다의 위쪽)] -
   [회원 메뉴 사람 아이콘(우측 끝)] 한 줄로 구성한다 - 예전엔 사이트 공통 상단바(사이트명 + 회원
   텍스트 링크, layout.php)와 이 검색줄이 두 줄로 따로 있었는데(사용자 피드백으로 2026-08-07 통합),
   지금은 메일 화면에서 공통 상단바를 아예 숨기고(위 body.mail-app-page .navbar.is-fixed-top) 이
   한 줄이 그 역할까지 대신한다. 4개 화면 전부 항상 같은 자리/같은 모양으로 나온다 - 검색 자체는
   페이지별 로직을 그대로 쓰고(받은메일함/보낸편지함은 각자 자기 목록을 검색, 연동관리/상세는
   받은메일함 검색으로 연결) 모양과 위치만 통일한다. */
.mail-app-topsearch-row { display: flex; align-items: center; gap: 1.5rem; padding: .85rem 20px; }
.mail-app-topbar-brand {
  flex: 0 0 auto;
  font-weight: 700;
  font-size: 1.05rem;
  color: #202124;
  white-space: nowrap;
}
.mail-app-topsearch {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 720px;
  margin: 0 auto;
  background: #eaf1fb;
  border-radius: 999px;
  padding: .65rem 1.25rem;
}
.mail-app-topsearch:focus-within { background: #fff; box-shadow: 0 1px 1px rgba(0,0,0,.08), 0 1px 3px 1px rgba(0,0,0,.08); }
.mail-app-topsearch-icon { color: #5f6368; font-size: 1rem; }
.mail-app-topsearch-input { flex: 1 1 auto; min-width: 0; border: none; background: none; font-size: .9rem; outline: none; color: #202124; }
.mail-app-topsearch-clear { color: #5f6368; font-size: .9rem; line-height: 1; padding: .2rem; }

/* 우측 끝 사람 아이콘 - 클릭하면 회원정보수정/비밀번호수정/로그아웃 드롭다운이 열린다(예전엔
   사이트 공통 상단바에 텍스트 링크 3개가 항상 펼쳐져 있던 것을 지메일 프로필 아이콘처럼 압축).
   public/js/mail-account-menu.js가 열고 닫는 것만 담당(계정 목록 ⋮ 드롭다운과 동일한 패턴). */
.mail-app-topbar-profile { position: relative; flex: 0 0 auto; }
.mail-app-topbar-profile-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.3rem;
  height: 2.3rem;
  border: none;
  border-radius: 50%;
  background: #e8eaed;
  color: #5f6368;
  cursor: pointer;
}
.mail-app-topbar-profile-btn:hover,
.mail-app-topbar-profile-btn[aria-expanded="true"] { background: #d3e3fd; color: #001d35; }
.mail-app-topbar-profile-icon { width: 1.3rem; height: 1.3rem; }
.mail-app-topbar-profile-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  min-width: 160px;
  background: #fff;
  border: 1px solid #e6e8ee;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15), 0 1px 3px rgba(0, 0, 0, .1);
  padding: .3rem;
}
.mail-app-topbar-profile-dropdown.is-open { display: block; }
.mail-app-topbar-profile-form { margin: 0; }
.mail-app-topbar-profile-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: .55rem .8rem;
  border: none;
  border-radius: 6px;
  background: none;
  color: #202124;
  font-size: .85rem;
  white-space: nowrap;
  cursor: pointer;
}
.mail-app-topbar-profile-item:hover { background: #f1f3f4; }
.mail-app-topsearch-clear:hover { color: #202124; }

.mail-app {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
}

/* flex 세로줄로 만들어서 맨 아래 저작권 표시(.mail-app-sidebar-footer)를 margin-top:auto로
   바닥에 붙일 수 있게 한다 - 사이드바 길이가 남는 세로 공간보다 짧을 때만 실제로 바닥에 붙고,
   길어서 스크롤이 필요해지면(overflow-y:auto, body.mail-app-page 스코프) 메뉴 목록 바로 아래에
   자연스럽게 이어진다. */
.mail-app-sidebar {
  flex: 0 0 248px;
  display: flex;
  flex-direction: column;
}

/* 지메일 편지쓰기 버튼 - 진한 배경의 알약 버튼이 아니라, 흰 배경 + 옅은 그림자의 둥근 사각
   버튼이다(FAB 스타일). */
.mail-compose-btn {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  border: none;
  border-radius: 16px;
  background: #fff;
  color: #1f1f1f;
  font-weight: 600;
  font-size: .95rem;
  padding: 1rem 1.5rem;
  margin-bottom: 1.1rem;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .15), 0 4px 8px 1px rgba(0, 0, 0, .08);
  transition: box-shadow .15s;
}
.mail-compose-btn:hover { box-shadow: 0 1px 3px rgba(0, 0, 0, .18), 0 6px 10px 1px rgba(0, 0, 0, .12); }
.mail-compose-btn-icon { font-size: 1.3rem; }

.mail-app-nav { display: flex; flex-direction: column; gap: .15rem; }
.mail-app-nav-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .65rem 1rem .65rem 1.5rem;
  border-radius: 0 999px 999px 0;
  font-size: .9375rem;
  color: #202124;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mail-app-nav-item:hover { background: #f1f3f4; }
.mail-app-nav-item.is-active { background: #d3e3fd; color: #001d35; font-weight: 700; }
/* 이모지 대신 실제 SVG 라인 아이콘을 쓴다 - 글자 아이콘(📥/📤/⚙️)은 폰트/OS마다 크기·베이스라인이
   달라서 줄이 안 맞아 보이는 원인이었다(사용자 피드백: "라인도 딱 맞아"). SVG는 viewBox가 전부
   24x24로 통일돼 있어 width/height만 고정하면 항상 같은 자리에 정렬된다. stroke="currentColor"라
   아이콘 색은 아래 color로만 조절하고(평소엔 회색, 선택된 메뉴는 본문과 같은 진한 색), 텍스트
   색(.mail-app-nav-item의 color)과는 별개로 살짝 차분하게 뺐다(지메일과 동일한 관례). */
.mail-app-nav-icon {
  flex: 0 0 auto;
  width: 1.35rem;
  height: 1.35rem;
  color: #5f6368;
}
.mail-app-nav-item.is-active .mail-app-nav-icon { color: #001d35; }

/* "메일 연동 관리" - 예전엔 별도 페이지로 가는 링크였는데 지금은 아래 계정 패널을 펼치고/접는
   아코디언 토글 버튼이다(<a> 대신 <button>이라 브라우저 기본 버튼 모양을 지워야 함). */
.mail-app-nav-toggle {
  border: none;
  background: none;
  width: 100%;
  font: inherit;
  cursor: pointer;
}
.mail-app-nav-toggle-caret {
  margin-left: auto;
  font-size: .7rem;
  color: #9aa1b1;
  transition: transform .15s ease;
}
.mail-app-nav-toggle[aria-expanded="true"] .mail-app-nav-toggle-caret { transform: rotate(180deg); }

/* 계정 패널(연동 계정 목록) - 네이티브 hidden 속성으로 여닫는다(public/js/mail-account-menu.js).
   원래는 max-height/overflow:hidden으로 펼치고/접는 애니메이션을 줬는데, 그 overflow:hidden이
   계정 행의 ⋮ 드롭다운(.mail-account-row-dropdown, position:absolute)까지 잘라내는 문제가 있어서
   (조상에 overflow:hidden이 있으면 절대 위치 자손도 그 박스 밖으로 못 튀어나옴) 애니메이션을
   포기하고 단순 표시/숨김으로 바꿨다. `.mail-app-account-panel { display:flex }`가 `[hidden]`의
   `display:none`(UA 기본 스타일)을 덮어쓰지 않도록 :not([hidden])로 한정한다. */
.mail-app-account-panel:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  margin-top: .3rem;
}
.mail-app-account-empty {
  padding: .6rem 1rem;
  font-size: .78rem;
  color: #9aa1b1;
}
.mail-app-storage-box { padding: .5rem 1rem .8rem; }
.mail-app-storage-box-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  font-size: .72rem;
  color: #5f6368;
  margin-bottom: .3rem;
}
.mail-app-storage-box-warning { font-size: .72rem; color: #c5221f; margin-top: .3rem; }

/* "메일 연동 관리" 옆 + 버튼(계정 연동 추가 모달을 바로 연다) - 메뉴 항목(.mail-app-nav-item)이
   폭을 채우고 버튼은 오른쪽에 고정폭으로 붙는다. */
.mail-app-nav-row { display: flex; align-items: center; gap: .1rem; }
.mail-app-nav-row .mail-app-nav-item { flex: 1 1 auto; min-width: 0; }
.mail-app-nav-add-btn {
  flex: 0 0 auto;
  width: 1.8rem;
  height: 1.8rem;
  margin-right: .4rem;
  border: none;
  border-radius: 50%;
  background: none;
  color: #5f6368;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.mail-app-nav-add-btn:hover { background: #e8eaed; color: #202124; }

/* 연동 계정 한 줄 = [클라우드 동기화 아이콘][이메일(클릭 시 그 계정으로 필터링된 받은메일함)]
   [⋮ 메뉴(마우스오버 시에만 노출)] - 셋 다 형제 요소라 버튼 안에 버튼이 중첩되지 않는다.
   border-radius를 위 .mail-app-nav-item과 맞춘다(왼쪽은 각지고 오른쪽만 둥근 지메일 식 필). 아이콘
   자체의 가로 정렬은 아래 .mail-account-row-sync-btn의 margin-left에서 맞춘다(사용자 피드백: 계정
   목록이 위 메뉴보다 살짝 왼쪽으로 밀려 보임) - 동기화 버튼은 클릭 히트 영역을 넓히려고 아이콘보다
   큰 원(2.1rem)이라 아이콘이 버튼 안에서 가운데 정렬돼 있다. 그래서 margin-left를 "받은편지함" 등의
   아이콘 시작 위치(1.5rem)에서 그 여백((버튼-아이콘)/2 = .45rem)만큼 뺀 1.05rem으로 줘야, 버튼이
   아니라 버튼 "안의 아이콘"이 1.5rem 지점에서 시작해서 위 메뉴 아이콘과 정확히 같은 세로줄에 선다. */
.mail-app-account-row { display: flex; align-items: center; border-radius: 0 999px 999px 0; }
.mail-app-account-row:hover,
.mail-app-account-row:focus-within { background: #f1f3f4; }
.mail-app-account-row.is-active { background: #d3e3fd; }
.mail-app-account-row.is-active .mail-account-row-link { color: #001d35; font-weight: 700; }

.mail-account-row-sync-form { margin: 0; flex: 0 0 auto; }
.mail-account-row-sync-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  margin-left: 1.05rem;
  border: none;
  border-radius: 50%;
  background: none;
  color: #5f6368;
  cursor: pointer;
}
.mail-account-row-sync-btn:hover { background: #e8eaed; color: #202124; }
.mail-account-row-sync-btn:disabled { cursor: default; }
.mail-account-row-sync-icon { width: 1.2rem; height: 1.2rem; }
/* "메일 가져오기" 진행 중에는 클라우드 테두리는 그대로 두고 안의 화살표(<g>로 따로 묶음)만 돈다 -
   transform-box:fill-box라서 SVG viewport 좌표를 몰라도 그 <g>의 실제 크기 기준 중심으로 돈다. */
.mail-account-row-sync-icon-arrow { transform-box: fill-box; transform-origin: center; }
.mail-account-row-sync-btn.is-syncing .mail-account-row-sync-icon-arrow {
  animation: mail-account-row-sync-spin .9s linear infinite;
}
@keyframes mail-account-row-sync-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.mail-account-row-link {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  padding: .55rem .4rem;
  font-size: .85rem;
  color: #5b6479;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ⋮ 메뉴 - 평소엔 안 보이다가 그 줄에 마우스를 올리거나(:hover) 이미 열려있을 때(is-open)만
   나타난다. 키보드로 Tab 이동해서 포커스가 왔을 때도 보여야 해서 :focus-within도 같이 건다
   (위 .mail-app-account-row:focus-within이 배경을 켜는 것과 별개로, 버튼 자체 표시 여부는
   focus-within이 있는 조상 규칙 하나로 같이 처리됨 - 아래 3번째 셀렉터). */
.mail-account-row-menu { position: relative; flex: 0 0 auto; }
.mail-account-row-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  margin: 0 .4rem;
  border: none;
  border-radius: 50%;
  background: none;
  color: #5f6368;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}
.mail-app-account-row:hover .mail-account-row-menu-btn,
.mail-app-account-row:focus-within .mail-account-row-menu-btn,
.mail-account-row-menu-btn[aria-expanded="true"] { display: flex; }
.mail-account-row-menu-btn:hover,
.mail-account-row-menu-btn[aria-expanded="true"] { background: #e8eaed; color: #202124; }

.mail-account-row-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: .4rem;
  z-index: 30;
  min-width: 148px;
  background: #fff;
  border: 1px solid #e6e8ee;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15), 0 1px 3px rgba(0, 0, 0, .1);
  padding: .3rem;
}
.mail-account-row-dropdown.is-open { display: block; }
.mail-account-row-dropdown-form { margin: 0; }
.mail-account-row-dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: .5rem .7rem;
  border: none;
  border-radius: 6px;
  background: none;
  color: #202124;
  font-size: .82rem;
  white-space: nowrap;
  cursor: pointer;
}
.mail-account-row-dropdown-item:hover { background: #f1f3f4; }
.mail-account-row-dropdown-item.is-danger { color: #c5221f; }
.mail-account-row-dropdown-item.is-danger:hover { background: #fce8e6; }

/* 사이드바 맨 아래 저작권 표시 - 사이트 공통 풋터(어두운 배경) 대신 여기 하나만 남긴다.
   margin-top:auto로 사이드바 안에서 항상 바닥에 붙는다(위 .mail-app-sidebar가 flex 세로줄).
   배경은 따로 안 준다 - 사이드바는 콘텐츠 박스가 아니라 회색 프레임의 일부라 body.mail-app-page의
   회색이 그대로 비쳐야 한다(흰 배경이면 그 부분만 붕 떠 보인다는 피드백, 2026-08-07). */
.mail-app-sidebar-footer {
  margin-top: auto;
  padding: .9rem;
  color: #9aa1b1;
  font-size: .72rem;
}

.mail-app-main { flex: 1 1 auto; min-width: 0; }

/* 4개 메일 화면(받은메일함/보낸편지함/메일 연동 관리/메일 읽기)이 검색창 아래 .mail-app-main의
   첫 줄로 쓰는 보조 바 - 페이지마다 안에 들어가는 내용(제목+버튼/뒤로가기)은 다르지만, 높이와
   아래쪽 여백을 통일해서 페이지를 옮겨도 리듬이 똑같이 느껴지게 한다. 받은메일함/보낸편지함은
   검색창이 위 공통 줄로 옮겨가면서 이 바가 따로 필요 없어져 목록 패널이 바로 시작한다. */
.mail-app-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  min-height: 2.75rem;
  margin-bottom: 1.1rem;
}

/* 메일 상세페이지(detail.php) 제목 위 네비게이션 줄 - "‹ 받은메일함  0/100  ‹ ›". 예전에는
   .mail-app-topbar 자리에 "받은메일함으로" 버튼만 큼직하게 있었는데(사용자 피드백: 이거 없애고
   그 아래 콘텐츠가 위로 올라오게), 그 자리를 아예 없애고 카드 맨 위, 제목 바로 위에 훨씬 작고
   가벼운 이 줄 하나로 대체했다(2026-08-11) - Gmail 상세화면과 같은 자리/느낌. 카드 padding 안에
   있어서 카드가 그만큼 위로 붙어 보인다. */
.mail-app-mail-nav {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .6rem;
  font-size: .8rem;
  color: #5f6368;
}
.mail-app-mail-nav-back { color: #5f6368; }
.mail-app-mail-nav-back:hover { color: #202124; text-decoration: underline; }
.mail-app-mail-nav-count { white-space: nowrap; }
.mail-app-mail-nav-arrows { display: flex; gap: .15rem; }
.mail-app-mail-nav-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 4px;
  color: #5f6368;
  font-size: 1rem;
}
a.mail-app-mail-nav-arrow:hover { background: #f1f3f4; color: #202124; }
.mail-app-mail-nav-arrow.is-disabled { color: #dadce0; cursor: default; }

/* 지메일처럼 이 패널(툴바+목록)만 흰색이고 나머지 프레임(사이드바/상단검색줄)은 회색 배경
   (body.mail-app-page)이 비쳐 보이게 한다 - 그래서 여기 있던 테두리(border)는 뺐다(회색 배경
   위에서는 흰 박스 자체가 경계로 충분히 보여서 테두리가 없어야 지메일과 같은 깔끔한 느낌이 남). */
.mail-app-panel { background: #fff; border-radius: 8px; overflow: hidden; }
.mail-app-empty { padding: 2.5rem 1.5rem; text-align: center; }

/* 메일 읽기(detail.php) 본문 카드 - 지메일처럼 테두리 있는 흰 카드 안에 메일 내용이 담긴다.
   기존 Bulma .box(그림자만 있고 테두리 없음) 대신 이 클래스를 쓴다. */
.mail-app-card { background: #fff; border: 1px solid #e6e8ee; border-radius: 12px; padding: 1.5rem; }

/* 앱 셸 고정 레이아웃(상단바/좌측메뉴/하단풋터는 그대로 있고 본문만 스크롤) - 메일 관련 4개
   화면(View::renderWithLayout에 bodyClass=mail-app-page를 넘기는 컨트롤러만)에만 적용된다.
   body를 뷰포트 높이에 딱 맞는 flex 세로줄(네비게이션/본문/풋터)로 만들고 overflow:hidden으로
   막은 뒤, 그 사이의 래퍼들(main.section/.container/.mail-shell/.mail-app/.mail-app-main)은
   height:100%/flex로 주어진 높이만 그대로 물려주기만 하고 자기 overflow는 건드리지 않는다 -
   여기 overflow:hidden을 넣으면 .mail-shell의 풀블리드 트릭(width:100vw + 음수 margin으로
   .container 밖까지 그리는 것)이 조상의 클리핑에 잘려서 사이드바가 화면 왼쪽 대신 .container
   시작 위치에서부터만 보이는 버그가 생긴다(실제로 겪음). 실제로 넘치는 내용을 스크롤로 담아야
   하는 곳은 사이드바와 목록 두 곳뿐이라 overflow-y:auto는 그 두 곳에만 준다. min-height:0은
   flex 자식이 내용 크기만큼 무한정 커지려는 기본 동작을 막아서 이 높이 전달 체인이 실제로
   작동하게 하는 필수 값이다. */
/* 지메일처럼 전체 프레임(상단검색줄/좌측메뉴)은 옅은 회색, 실제 콘텐츠 패널(.mail-app-panel/
   .mail-app-card)만 흰색으로 대비를 준다(사용자 피드백, 2026-08-07). */
body.mail-app-page {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #f2f4f8;
}
body.mail-app-page main.section {
  flex: 1 1 auto;
  min-height: 0;
}
body.mail-app-page main.section > .container {
  height: 100%;
}
body.mail-app-page .mail-shell {
  height: 100%;
  display: flex;
  flex-direction: column;
}
body.mail-app-page .mail-app-topsearch-row { flex: 0 0 auto; }
body.mail-app-page .mail-app {
  flex: 1 1 auto;
  min-height: 0;
  align-items: stretch;
}
/* 좌측메뉴 자체 길이가 남는 세로 공간보다 길어지면(계정이 많은 경우) 페이지 전체가 아니라
   사이드바 안에서만 스크롤되게 한다. */
body.mail-app-page .mail-app-sidebar { overflow-y: auto; }
body.mail-app-page .mail-app-main {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
/* 스크롤은 흰 콘텐츠 박스(.mail-app-panel/.mail-app-card) 안쪽에서만 일어나야 한다는 피드백
   (2026-08-07, 예전엔 반대로 "브라우저 맨 끝에 스크롤바" 피드백이 있어서 여기서 스크롤시켰던
   적이 있었는데 지금은 뒤집혔다) - 그래서 이 래퍼 자체는 더 이상 overflow를 갖지 않고, 오른쪽
   여백(20px, 지메일과 동일)만 유지한 채 아래 .mail-app-panel/.mail-app-card에 높이/스크롤을
   그대로 물려주는 flex 세로줄 역할만 한다. */
body.mail-app-page .mail-app-main-scroll {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding-right: 20px;
}
/* 실제 스크롤은 여기서 일어난다 - 흰 박스(.mail-app-panel/.mail-app-card) 자체가 남은 세로 공간을
   꽉 채우고(flex:1 1 auto) 그 안에서만 넘치는 내용이 스크롤된다. 그래서 스크롤바가 박스의 둥근
   테두리 안쪽에 붙어 보인다. */
body.mail-app-page .mail-app-panel,
body.mail-app-page .mail-app-card {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
/* 목록 하단 페이지네이션은 스크롤 영역(.mail-app-panel) 밖의 형제로 둬서, 화면에 항상
   고정되어 보이고 목록만 그 위에서 스크롤된다. */
body.mail-app-page .mail-app-pagination { flex: 0 0 auto; margin-top: .75rem; padding-right: 20px; }
/* 사이트 공통 풋터(어두운 배경, 전 페이지 공통)는 메일 화면에서만 빼고, 같은 내용(저작권 표시)을
   사이드바 맨 아래(.mail-app-sidebar-footer, _sidebar.php)로 옮겼다. display:none이라 flex
   레이아웃에서 아예 빠지므로 main.section이 그만큼 세로 공간을 그대로 더 차지한다. */
body.mail-app-page footer.site-footer { display: none; }
/* 사이트 공통 상단바(사이트명 + 회원정보수정/비밀번호수정/로그아웃 텍스트 링크, layout.php)도
   메일 화면에서는 뺀다 - 같은 내용을 지메일처럼 검색창과 한 줄로 합친 상단바
   (.mail-app-topsearch-row, _topsearch.php)로 대체했다(사용자 피드백: "검색이 상단 위로 올라가고
   사이트명은 좌측끝, 회원 정보는 오른쪽끝 사람아이콘 클릭 시 메뉴"). */
body.mail-app-page .navbar.is-fixed-top { display: none; }

/* 로고 왼쪽 햄버거 버튼(_topsearch.php) - 넓은 화면에서는 항상 숨겨져 있다가 아래
   @media (max-width: 768px)에서만 나타난다. */
.mail-app-sidebar-toggle-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  flex: 0 0 auto;
  border: none;
  border-radius: 8px;
  background: none;
  color: #5f6368;
  font-size: 1.3rem;
  cursor: pointer;
}
.mail-app-sidebar-toggle-btn:hover { background: #f1f3f4; color: #202124; }

/* 드로어가 열렸을 때 뒤를 덮는 반투명 배경 - 클릭하면 닫힌다(mail-sidebar-drawer.js).
   좁은 화면에서만 의미가 있어서 기본은 항상 숨김. */
.mail-app-sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .4);
  z-index: 50;
}
.mail-app-sidebar-backdrop.is-open { display: block; }

@media (max-width: 768px) {
  .mail-app-sidebar-toggle-btn { display: inline-flex; }

  /* 예전에는 이 폭에서 사이드바가 위쪽에 가로로 눕는 칩 목록으로 바뀌었는데(2026-08-11 이전),
     대신 Gmail 모바일처럼 화면 밖(왼쪽)에 숨어있다가 햄버거 버튼을 누르면 오른쪽으로 슬라이드해
     들어오는 드로어로 바꿨다(사용자 요청) - 평소엔 왼쪽 메뉴가 아예 안 보이고 본문(.mail-app-main)만
     화면 전체 폭을 쓴다. 메뉴 항목이 계정 여러 개 등으로 길어질 수 있어 overflow-y:auto로 드로어
     자기 자신만 스크롤되게 한다(바깥 페이지와 별개 스크롤 영역).
     desktop-only .mail-app-sidebar{flex:0 0 248px}는 여기서 안 지워도 되는데, position:fixed가
     되는 순간 flex 계산 자체에서 빠지기 때문이다(무시됨). */
  .mail-app-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: min(85vw, 300px);
    height: 100vh;
    height: 100dvh;
    background: #fff;
    padding: 1.25rem;
    box-shadow: 2px 0 16px rgba(0, 0, 0, .2);
    overflow-y: auto;
    z-index: 51;
    transform: translateX(-100%);
    transition: transform .25s ease;
  }
  .mail-app-sidebar.is-open { transform: translateX(0); }

  /* 이 폭에서는 사이드바가 화면 밖 드로어로 빠지므로(위 규칙) 세로 고정 셸과 안 맞으므로,
     고정 레이아웃은 데스크톱에서만 쓰고 모바일에서는 원래대로 페이지 전체가 자연스럽게
     스크롤되게 되돌린다. */
  body.mail-app-page { height: auto; overflow: visible; }
  body.mail-app-page main.section,
  body.mail-app-page main.section > .container,
  body.mail-app-page .mail-shell,
  body.mail-app-page .mail-app,
  body.mail-app-page .mail-app-main,
  body.mail-app-page .mail-app-main-scroll {
    overflow: visible;
    min-height: 0;
  }
  /* .mail-app-main-scroll의 padding-right:20px(위 desktop 규칙)는 데스크톱 스크롤바 자리를
     지메일처럼 맞추려고 오른쪽에만 준 여백인데, 이 폭에서는 사이드바가 빠지면서 카드가 화면
     전체 폭을 채워야 하는데도 이 여백이 그대로 남아 카드가 왼쪽으로 쏠려 보이는 원인이 됐다
     (2026-08-11, 사용자 피드백: "콘텐츠부분이 중앙에 정렬되지 않고 왼쪽으로 쏠려 있어") - 모바일
     에서는 0으로 되돌려서 좌우 대칭(=화면 꽉 채움)으로 만든다. */
  body.mail-app-page .mail-app-main-scroll { padding-right: 0; }
  /* .mail-app-sidebar는 위 목록에서 일부러 뺐다 - 여기부터는 position:fixed 드로어라 이 페이지
     흐름(overflow:visible 되돌리기)과 무관한 별도 레이어이고, 오히려 이 규칙에 같이 걸리면
     드로어 자체 스크롤(overflow-y:auto, 위 .mail-app-sidebar 규칙)이 밀려서 메뉴가 길 때 안
     스크롤되는 문제가 생긴다. */
}

/* 메일 상세페이지 인쇄(detail.php/detail_embed.php의 🖨 인쇄 버튼, window.print()) - 위 모바일
   대응과 같은 이유로, 화면 전용의 고정 높이 셸(overflow:hidden으로 한 화면만 보여주는 구조)을
   그대로 두면 인쇄 시 첫 페이지 한 장 분량만 찍히고 나머지 내용이 통째로 잘린다. 인쇄할 때는
   모든 조상 컨테이너의 높이 제한을 풀어서 내용 전체가 여러 장에 걸쳐 자연스럽게 이어지게 한다.
   버튼/사이드바/상단검색줄처럼 종이에 의미 없는 조작 UI는 no-print로 표시해서 뺀다(2026-08-11). */
@media print {
  .no-print { display: none !important; }

  body.mail-app-page {
    height: auto !important;
    overflow: visible !important;
    display: block !important;
  }
  body.mail-app-page main.section,
  body.mail-app-page main.section > .container,
  body.mail-app-page .mail-shell,
  body.mail-app-page .mail-app,
  body.mail-app-page .mail-app-main,
  body.mail-app-page .mail-app-main-scroll,
  body.mail-app-page .mail-app-card {
    display: block !important;
    overflow: visible !important;
    height: auto !important;
    min-height: 0 !important;
  }
  .mail-app-sidebar, .mail-app-topsearch-row, .navbar { display: none !important; }
  .mail-app-card { box-shadow: none !important; border: none !important; }
}

.mail-inbox-search { display: flex; gap: .5rem; flex-wrap: wrap; }
.mail-inbox-search .input { max-width: 320px; }

.mail-inbox-toolbar {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  padding: .75rem 1.1rem;
  border-bottom: 1px solid #eee;
  background: #fafbfd;
}
.mail-inbox-toolbar form { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: 0; }
.mail-inbox-select-all { display: flex; align-items: center; gap: .4rem; font-size: .85rem; color: #4b5468; cursor: pointer; }
/* 받은메일함 툴바의 아이콘 버튼 그룹을 구분하는 세로선 + 우측 "N개 중 N개" 카운트 텍스트 */
.mail-inbox-toolbar-divider { width: 1px; align-self: stretch; background: #e2e5ec; }
.mail-inbox-toolbar-count { margin-left: auto; font-size: .78rem; color: #8a92a3; white-space: nowrap; }

.mail-inbox-list { border-top: 1px solid #eee; }
.mail-inbox-row {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .65rem 1.1rem;
  border-bottom: 1px solid #eee;
}
.mail-inbox-row:hover { background: #f7f9fd; }

.mail-inbox-row-controls { display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; padding-top: .15rem; }
.mail-inbox-checkbox { cursor: pointer; }
.mail-inbox-star {
  background: none;
  border: none;
  padding: 0;
  font-size: 1.1rem;
  line-height: 1;
  color: #d5d9e3;
  cursor: pointer;
}
.mail-inbox-star.is-active { color: #f0b429; }
/* 별표/중요 뱃지(2026-08-19 1차 "제목이 나와지는 모든 페이지에서" → "줄목록에서만"으로 좁힘 →
   3차 "특문/이모지 대신 SVG 이미지 파일로 뱃지형태로" 요청) - .mail-inbox-important(발신자 이름
   앞/상세 제목 앞 배지)와 .mail-inbox-title-star/-important(inbox.php/sent.php 목록 제목 앞
   배지)가 badge-star.svg/badge-important.svg <img>를 공유한다 - 뱃지 자체에 색이 있어 위
   .mail-inbox-star(목록 행 토글 버튼, 여전히 ★ 글자)처럼 별도 color 지정이 필요 없다. */
.mail-inbox-important, .mail-inbox-title-star, .mail-inbox-title-important {
  width: 15px;
  height: 15px;
  margin-right: .2rem;
  vertical-align: -2px;
}
.mail-inbox-important.is-hidden, .mail-inbox-title-star.is-hidden, .mail-inbox-title-important.is-hidden { display: none; }

/* 중요 토글 버튼 - 별표 버튼과 같은 아이콘 전용 스타일. 예전엔 Bulma .button.is-danger(빨간 배경)를
   썼는데, ❗ 이모지 자체도 빨강/주황 계열이라 빨간 배경 위에서 잘 안 보이는 문제가 있었다 - 배경을
   아예 없애서(별표와 동일한 방식) 흰 박스 배경 위에 이모지 원래 색이 또렷하게 보이게 했다. 꺼짐
   상태는 회색조로 흐리게 처리해서 켜짐/꺼짐이 뚜렷이 구분된다. */
.mail-inbox-important-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  filter: grayscale(1);
  opacity: .45;
}
.mail-inbox-important-btn.is-active { filter: none; opacity: 1; }

/* 메일 상세페이지(detail.php)의 별표/중요 버튼 - 목록의 아이콘 전용 버튼과 달리 여기서는 아이콘만
   있으면 뭘 누르는 버튼인지 알기 어렵다는 피드백이 있어서, 텍스트가 있는 일반 버튼 형태(테두리 +
   배경)로 바꾸고 상태(켜짐/꺼짐)는 배경색으로 구분한다. 꺼짐은 기본 .button 색 그대로 두고,
   켜짐만 옅은 강조색(진한 색은 이모지 색과 겹쳐서 오히려 잘 안 보이므로 옅은 톤 사용 -
   notification.is-warning과 같은 톤 규칙)을 얹는다. */
.mail-inbox-flag-btn.is-star.is-active { background: #fffaeb; border-color: #f0b429; color: #946c00; }
.mail-inbox-flag-btn.is-important.is-active { background: #fdeef0; border-color: #e0445b; color: #c1273f; }

/* 메일 상세페이지 본문 - 받은 메일 원본 HTML(이미지/CSS 포함)을 그대로 보여주는 iframe.
   (2026-08-11, 여러 차례 시행착오 끝에 최종적으로 Gmail/네이버메일과 같은 방식으로 정리) 이
   iframe 자체는 세로 스크롤을 갖지 않는다 - "스크롤되는 상자"가 아니라 "내용 높이만큼 계속
   자라기만 하는 상자"로 쓴다. 실제 높이는 CSS가 아니라 public/js/mail-html-frame.js가 iframe
   내부 문서의 실제 높이를 재서 정확히 그 값으로 맞춰준다(그래서 이 iframe에는 max-height도,
   overflow-y도 없다 - 넘칠 상황 자체를 안 만듦). 스크롤은 이 iframe을 담고 있는 바깥
   판(detail.php는 body.mail-app-page .mail-app-card, detail_embed.php는 페이지 자체) 딱
   한 군데에서만 일어난다 - iframe 자신도 스크롤되고 바깥 판도 스크롤되면 스크롤이 이중으로
   생기는 문제가 있었다(사용자 피드백: "스크롤이 2개가 생겨"). height 초기값(JS가 실제로 재기
   전 잠깐 보일 값)만 여기서 갖고 있다.
   가로는 세로와 다르게 취급한다 - 표/모노스페이스처럼 고정폭 내용이 iframe 폭보다 넓어지는
   경우까지 이 바깥 판 스크롤 하나로 흡수하면 세로/가로가 뒤섞여 읽기 어려우므로, 가로 스크롤만
   iframe "안쪽" 문서 자신이 갖게 한다(detail.php/detail_embed.php가 $htmlBody 맨 앞에
   `overflow-x:auto !important`를 강제로 심어서 보냄). iframe 자체 폭을 늘리는 방식은 이전에
   정렬이 틀어지는 등 부작용이 있어 폐기했다(당시 기록: 카드 안 정렬이 왼쪽으로 틀어지거나
   반응형 내용이 무한히 커지는 문제, "메일 내용이 왼쪽에 붙어서"). */
.mail-html-body-frame {
  width: 100%;
  border: none;
  display: block;
  height: 200px;
}

/* 메일 상세(embed) 첨부파일 카드(2026-08-19, detail_embed.php 참고) - 예전엔 그냥 알약 태그
   나열이었는데 이미지는 실제 썸네일이 보이는 카드형으로 바꿨다. 카드 폭을 고정하고 가로로
   줄바꿈되게(flex-wrap)만 해서 첨부가 몇 개든 별도 캐러셀/스크롤 로직 없이 자연스럽게 여러
   줄로 쌓인다. */
.mail-attachment-cards {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}
.mail-attachment-card {
  display: flex;
  flex-direction: column;
  /* 2026-08-19, "썸네일 부분 크기를 2/3 정도 줄여달라" 요청 - 96px → 64px(약 2/3) */
  width: 64px;
  border: 1px solid #e4e6ea;
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}
.mail-attachment-card:hover { border-color: #b7bcc4; }
.mail-attachment-card-thumb {
  width: 100%;
  /* 72px → 48px(약 2/3), 카드 폭 축소와 같은 비율 */
  height: 48px;
  background-color: #f4f5f7;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .62rem;
  font-weight: 700;
  color: #6b7280;
}
.mail-attachment-card-name {
  display: block;
  padding: .25rem .3rem;
  font-size: .65rem;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mail-inbox-row-body { flex: 1 1 auto; min-width: 0; }
.mail-inbox-row-line1 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
}
.mail-inbox-sender { display: flex; align-items: baseline; gap: .5rem; min-width: 0; overflow: hidden; }
.mail-inbox-sender-name {
  font-weight: 600;
  color: #1b2333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 발신자 이름은 답장 모달을 여는 <button>이라 브라우저 기본 버튼 테두리/배경을 지우고
   일반 텍스트처럼 보이게 한 뒤, 클릭 가능하다는 것만 hover 밑줄로 알려준다. */
.mail-inbox-link {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
}
.mail-inbox-link:hover { text-decoration: underline; }
.mail-inbox-account {
  font-size: .72rem;
  color: #9aa1b1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mail-inbox-meta {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: .4rem;
  color: #8a92a3;
  font-size: .8rem;
  white-space: nowrap;
}
.mail-inbox-row-line2 {
  display: block;
  margin-top: .15rem;
  color: #6b7383;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mail-inbox-row-line2:hover { text-decoration: none; }
.mail-inbox-row-line2 strong { color: #1b2333; font-weight: 600; }
/* 안 읽은 메일은 발신자/제목을 굵게 강조한다(unread 상태는 items.metadata.read로 관리) */
.mail-inbox-row[data-unread="1"] .mail-inbox-sender-name,
.mail-inbox-row[data-unread="1"] .mail-inbox-row-line2 strong { font-weight: 800; }

/* 받은메일함(.mail-app 아래)만 한 줄짜리 행으로 오버라이드 - inbox.php는 위 .mail-inbox-row-body/
   .mail-inbox-row-line1/.mail-inbox-sender 래퍼 없이 [컨트롤]/[중요]/[발신자]/[제목-본문]/[메타]를
   .mail-inbox-row의 직계 flex 자식으로 바로 둔다. 보낸편지함(sent.php)은 이 래퍼 구조를 그대로 쓰고
   있어서 `.mail-app` 밖에 있는 한 이 규칙의 영향을 받지 않는다. */
.mail-app .mail-inbox-row { align-items: center; gap: .6rem; padding: .5rem 1rem; font-size: .875rem; }
.mail-app .mail-inbox-row-controls { padding-top: 0; }
.mail-app .mail-inbox-sender-name { flex: 0 0 168px; max-width: 168px; }
.mail-app .mail-inbox-row-line2 { flex: 1 1 auto; min-width: 0; margin-top: 0; }
.mail-app .mail-inbox-meta .mail-inbox-account {
  max-width: 140px;
  background: #f0f2f7;
  border-radius: 999px;
  padding: .05rem .5rem;
}

@media (max-width: 560px) {
  .mail-app .mail-inbox-sender-name { flex-basis: 96px; max-width: 96px; }
  .mail-app .mail-inbox-meta .mail-inbox-account { display: none; }
}

@media (max-width: 560px) {
  .mail-inbox-row { padding: .6rem .85rem; gap: .5rem; }
  .mail-inbox-account { display: block; }
  .mail-inbox-toolbar { padding: .6rem .85rem; }
}

/* 게시글/댓글은 사용자가 입력한 긴 문자열(URL 등)이 그대로 들어올 수 있어
   모바일 폭에서 가로 스크롤이 생기지 않도록 줄바꿈을 강제한다 */
.box, .content, .notification, .modal-card-body {
  overflow-wrap: break-word;
}

/* 게시글 첨부파일 다중 업로드 위젯 (드래그 앤 드롭 + 순서 변경) */
.attachment-dropzone {
  border: 2px dashed #dbdbdb;
  border-radius: 6px;
  padding: 1.5rem;
  text-align: center;
  color: #7a7a7a;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}

.attachment-dropzone.is-dragover {
  border-color: #8a8a8a;
  background: #fafafa;
}

.attachment-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.attachment-item {
  position: relative;
  width: 96px;
  height: 96px;
  border: 1px solid #dbdbdb;
  border-radius: 6px;
  overflow: hidden;
  cursor: grab;
}

.attachment-item.is-dragging {
  opacity: 0.4;
}

.attachment-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.attachment-item-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background: rgba(10, 10, 10, 0.6);
  color: #fff;
  line-height: 1;
  cursor: pointer;
}

/* ==========================================================================
   홈페이지 랜딩 디자인 (CLAUDE/index.png 시안 기준)
   브랜드 블루는 이 파일의 home-*/site-footer* 클래스와 네비게이션 CTA 버튼에만
   한정해서 쓴다 - 사이트 전역 버튼(.is-link/.is-primary 등)의 무채색 규칙은 그대로 유지.
   ========================================================================== */
:root {
  --brand: #2557eb;
  --brand-dark: #173fc7;
}

.home-band {
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
}

.home-band-alt { background: #f7f9fd; }

.home-band-blue {
  background: linear-gradient(120deg, #2557eb 0%, #1b41c4 100%);
  color: #fff;
}

.home-container {
  max-width: 1152px;
  margin: 0 auto;
  padding: 4.5rem 1.5rem;
}

.home-section-head {
  text-align: center;
  margin-bottom: 2.5rem;
}

.home-section-head h2 {
  font-size: 1.75rem;
  font-weight: 800;
  color: #1b2333;
  margin: 0 0 .5rem;
}

.home-section-head p { color: #6b7383; margin: 0; }

.home-stats .home-section-head h2,
.home-stats .home-section-head p { color: #fff; }
.home-stats .home-section-head p { color: rgba(255, 255, 255, .8); }

.home-accent { color: var(--brand); }

.home-section-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.home-section-head-row h2 {
  font-size: 1.6rem;
  font-weight: 800;
  color: #1b2333;
  margin: 0 0 .35rem;
}

.home-section-head-row p { color: #6b7383; margin: 0; }

.home-grid { display: grid; gap: 1.5rem; }
.home-grid-4 { grid-template-columns: repeat(4, 1fr); }
.home-grid-3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 960px) {
  .home-grid-4, .home-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .home-grid-4, .home-grid-3 { grid-template-columns: 1fr; }
}

.home-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: #eaf0ff;
  color: var(--brand);
  margin-bottom: 1rem;
}
.home-icon svg { width: 24px; height: 24px; }

/* 히어로 */
.home-hero {
  background: linear-gradient(135deg, #eaf1ff 0%, #dce8ff 55%, #cfe0ff 100%);
  overflow: hidden;
}
.home-hero-inner {
  padding-top: 4rem;
  padding-bottom: 3.5rem;
  display: flex;
  align-items: center;
  gap: 2.5rem;
  flex-wrap: wrap;
}
.home-hero-text { flex: 1 1 380px; min-width: 280px; }
.home-hero-title {
  font-size: 2.75rem;
  line-height: 1.25;
  font-weight: 800;
  color: #1b2333;
  margin: 0 0 1rem;
}
.home-hero-title .home-accent { color: var(--brand); }
.home-hero-desc {
  color: #4b5468;
  font-size: 1.05rem;
  line-height: 1.7;
  margin: 0 0 1.75rem;
  max-width: 32rem;
}
.home-hero-actions { display: flex; gap: .75rem; flex-wrap: wrap; }
.home-hero-media {
  flex: 1 1 320px;
  min-width: 280px;
  min-height: 280px;
  align-self: stretch;
  border-radius: 14px;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 45%),
    linear-gradient(200deg, #274bc9, #4d78ec 55%, #9fbaf6);
  box-shadow: 0 20px 45px rgba(37, 87, 235, .25);
}
.home-hero-progress {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-top: 2.5rem;
  color: #5b6479;
  font-size: .85rem;
  font-weight: 700;
}
.home-hero-progress .bar { width: 52px; height: 2px; background: var(--brand); }

/* 버튼 (홈페이지 전용, 사이트 공통 .button.is-link/.is-primary와는 별개) */
.home-btn-primary { background: var(--brand); border-color: transparent; color: #fff; }
.home-btn-primary:hover { background: var(--brand-dark); color: #fff; text-decoration: none; }
.home-btn-outline { background: #fff; border-color: #d7deee; color: #1b2333; }
.home-btn-outline:hover { border-color: var(--brand); color: var(--brand); text-decoration: none; }

.home-link-arrow { color: var(--brand); font-weight: 600; font-size: .85rem; }

/* 가치 카드 */
.home-value-card { text-align: center; }
.home-value-card .home-icon { margin-left: auto; margin-right: auto; }
.home-value-card h3 { font-size: 1.05rem; font-weight: 700; color: #1b2333; margin: 0 0 .5rem; }
.home-value-card p { font-size: .875rem; color: #6b7383; margin: 0; line-height: 1.6; }

/* 서비스 카드 */
.home-service-card { display: flex; flex-direction: column; }
.home-service-media {
  height: 160px;
  display: flex;
  align-items: flex-start;
  padding: 1rem;
}
.home-service-media .home-icon { background: rgba(255, 255, 255, .25); color: #fff; margin: 0; }
.home-service-media-a { background: linear-gradient(135deg, #b9cbf5, #7d9aeb); }
.home-service-media-b { background: linear-gradient(135deg, #8fa9ef, #4f6fdd); }
.home-service-media-c { background: linear-gradient(135deg, #a4bdf2, #5877e2); }
.home-service-card h3 { font-size: 1.05rem; font-weight: 700; color: #1b2333; margin: 0 0 .4rem; }
.home-service-card p { font-size: .875rem; color: #6b7383; margin: 0 0 .75rem; line-height: 1.6; }

/* 통계 밴드 */
.home-stats-grid { text-align: center; }
.home-stat { display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.home-stat .home-icon { background: rgba(255, 255, 255, .15); color: #fff; }
.home-stat strong { font-size: 1.9rem; font-weight: 800; }
.home-stat span { font-size: .85rem; color: rgba(255, 255, 255, .85); }

/* 고객사례 카드 */
.home-case-media { height: 150px; position: relative; }
.home-case-media-1 { background: linear-gradient(135deg, #8ba1d2, #465a86); }
.home-case-media-2 { background: linear-gradient(135deg, #3d5b9e, #1c2c52); }
.home-case-media-3 { background: linear-gradient(135deg, #93aade, #3f5590); }
.home-case-tag {
  position: absolute;
  left: .75rem;
  bottom: .75rem;
  background: rgba(10, 10, 20, .55);
  color: #fff;
  font-size: .7rem;
  padding: .25rem .6rem;
  border-radius: 4px;
}
.home-case-card h3 { font-size: 1rem; font-weight: 700; color: #1b2333; margin: 0 0 .35rem; }
.home-case-card p { font-size: .85rem; color: #6b7383; margin: 0 0 .75rem; }

/* 최신 소식 + CTA */
.home-news-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2rem; }
@media (max-width: 800px) {
  .home-news-grid { grid-template-columns: 1fr; }
}
.home-news-list { list-style: none; margin: 1rem 0 0; padding: 0; }
.home-news-list li {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .75rem 0;
  border-bottom: 1px solid #eef0f4;
}
.home-news-list li:last-child { border-bottom: none; }
.home-news-thumb {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  flex: none;
  background: linear-gradient(135deg, #dbe6fb, #aac1f2);
}
.home-news-text { display: flex; flex-direction: column; gap: .15rem; overflow: hidden; }
.home-news-text a {
  color: #1b2333;
  font-weight: 600;
  font-size: .9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-news-text time { color: #9aa1b1; font-size: .75rem; }

.home-cta-card {
  background: linear-gradient(160deg, #1b2333, #12182a);
  color: #fff;
  border-radius: 14px;
  padding: 2.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .75rem;
}
.home-cta-card h3 { font-size: 1.4rem; font-weight: 800; margin: 0; line-height: 1.35; }
.home-cta-card p { color: rgba(255, 255, 255, .75); font-size: .9rem; margin: 0 0 .5rem; }

/* 헤더 CTA 버튼 (layout.php navbar-end, 전 페이지 공통) */
.navbar-item .home-btn-primary { padding: .5em 1.1em; font-size: .85rem; }

/* 데스크톱 상단 메뉴(.navbar-start-pc)와 모바일 햄버거 드로어 전용 메뉴(.navbar-start-mobile)는
   메뉴관리 > 홈페이지메뉴에서 항목별로 PC/모바일 노출을 따로 설정할 수 있어 서로 다른 항목
   구성을 갖는다 - 항상 같은 부모(#main-nav .navbar-menu) 안에 있으므로 화면 폭에 따라 한쪽만
   보이게 감춘다 (global.css의 navbar-menu 반응형 분기점 1024px과 맞춤). */
@media (max-width: 1023px) {
  .navbar-start-pc { display: none !important; }
}
@media (min-width: 1024px) {
  .navbar-start-mobile { display: none !important; }
}

/* 하위 메뉴 항목의 들여쓰기 - layout.php의 $renderDropdownItems가 넘기는 --indent 값을 그대로
   padding-left로 쓴다(데스크톱 드롭다운 기준값). 모바일 드로어는 이 값에 드로어 좌우 여백만큼을
   더 얹어서 쓰므로 아래 미디어쿼리에서 따로 재정의함 - PHP가 계산하는 숫자 자체는 그대로 두고
   컨텍스트(데스크톱/모바일)에 따라 CSS가 다르게 조합하기 위해 인라인 padding-left 대신 커스텀
   프로퍼티로 넘겨받음. **반드시 .navbar-start 안으로 스코프할 것** - 스코프 없이 그냥
   ".navbar-dropdown .navbar-item"으로 두면 계정 드롭다운(.navbar-end 안, 사람 아이콘 클릭 시
   나오는 로그인/회원가입/마이페이지/로그아웃)의 --indent 없는 링크에도 걸려서 padding-left가
   기본값 0으로 깔려버려 텍스트가 왼쪽 끝에 붙는 문제가 있었음(계정 드롭다운은 메뉴관리 트리가
   아니라 --indent 자체를 안 씀). */
.navbar-start .navbar-dropdown .navbar-item { padding-left: var(--indent, 0px); }

/* 모바일 드로어 전용 상단 헤더 - "메뉴" 제목 + 닫기(×) 버튼. 예전엔 이 버튼이 없어서 상단이
   허전했다가, 그 다음엔 별도 버튼을 열린 자리(드로어 안 우측 상단, absolute)에 뒀더니 헤더의
   햄버거가 열렸을 때 ×자로 바뀌는 애니메이션과 겹쳐 ×가 두 개로 보이는 문제가 있었다 - 이번엔
   버튼을 드로어 맨 위의 평범한 헤더 행(일반 흐름, absolute 아님)에 넣고, 그 대신 헤더 햄버거
   쪽의 ×자 변신 애니메이션을 꺼서(아래 .navbar-burger.is-active 참고) 겹쳐 보이는 경우 자체가
   생기지 않게 했다. */
.navbar-drawer-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: .5rem;
  padding-right: .5rem;
  margin-bottom: .25rem;
  border-bottom: 1px solid #eee;
  
}
.navbar-menu-close {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -.5rem;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 50%;
  background: none;
  color: #363636;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease;
}
.navbar-menu-close:hover { background: #eee; }
/* 이 헤더/닫기 버튼은 모바일 드로어 전용 - 데스크톱에서는 숨김. 이 프로젝트의 다른 반응형
   show/hide 토글(.navbar-start-pc/.navbar-start-mobile/.navbar-mobile-account)과 동일하게
   !important를 써서, 나중에 코드 순서가 바뀌어도 우선순위 동률 문제로 깨지지 않게 함 */
@media (min-width: 1024px) {
  .navbar-drawer-header { display: none !important; }
}

/* 헤더의 햄버거는 드로어가 열려도 3줄 모양 그대로 둔다(×자로 안 바뀜) - 닫기는 위 드로어 헤더의
   × 버튼(또는 백드롭 클릭) 하나로 통일하기 위함, 두 개의 ×가 동시에 보이는 걸 원천적으로 방지 */
.navbar-burger.is-active span:nth-child(1),
.navbar-burger.is-active span:nth-child(2),
.navbar-burger.is-active span:nth-child(3) {
  transform: none;
  opacity: 1;
}

/* 모바일 햄버거 드로어 정리 - global.css의 기본 골격(우측에서 슬라이드되는 흰색 패널, 세로로 쌓인
   .navbar-item 목록, position:fixed;right:0 - 이 값을 여기서 다시 선언하지 말 것, 예전에 실수로
   .navbar-menu.is-active에 position:relative를 덮어써서 드로어가 우측 고정 오버레이가 아니라
   문서 흐름 안에 그려지던 버그가 있었음)은 그대로 두고, 다음만 다듬는다:
   (1) 드로어 자체의 좌우 패딩(1.5rem)을 없애고, 그만큼을 각 항목 자신의 padding-left/right로
       옮겨서 hover 배경/구분선이 항목 박스 자체만으로 이미 드로어 끝까지 꽉 차게 만든다(텍스트
       위치는 컨테이너 패딩→항목 패딩으로 옮겨졌을 뿐 최종 위치는 그대로). **이전에는 컨테이너
       패딩은 그대로 두고 각 항목 뒤에 화면 밖으로 삐져나오는 ::before/::after 레이어를 깔아
       배경/구분선만 넓히려 했었는데, 그 레이어가 absolute라 텍스트보다 나중에 페인트되면서(z-index
       auto인 절대배치 요소는 일반 흐름의 텍스트보다 항상 나중에 그려짐) hover 시 글자가 아예 안
       보이는 문제가 있었고, 조상 요소에 따라 삐져나온 만큼이 잘려 보이는 문제도 있어서 이 방식으로
       바꿨다 - 항목 자신의 진짜 padding이라 이런 문제 자체가 생기지 않음.**
   (2) 지금 보고 있는 페이지는 굵게 표시(layout.php의 $renderTopMenu/$renderDropdownItems가
       MenuItem::pathMatches()로 계산해서 붙이는 .is-current 클래스). 색은 프로젝트 전역 무채색
       규칙을 따르고(강조색 없이 굵기만으로 구분), 파란 브랜드컬러는 홈 화면 전용이라 여기서는 안 씀. */
@media (max-width: 1023px) {
  .navbar-menu.is-active { padding: 1.5rem 0; }

  .navbar-menu.is-active .navbar-item:not(.has-dropdown),
  .navbar-menu.is-active .navbar-link {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  /* 하위 메뉴 항목은 원래 들여쓰기(--indent)에 드로어 좌우 여백(1.5rem)을 더해서 계산 -
     위 규칙과 동일한 클래스(.navbar-item)를 대상으로 하지만 선택자 우선순위가 더 높아서(부모
     .navbar-dropdown까지 포함) 이 값이 이긴다. */
  .navbar-menu.is-active .navbar-dropdown .navbar-item {
    padding-left: calc(var(--indent, 0px) + 1.5rem);
    padding-right: 1.5rem;
  }

  .navbar-start-mobile > .navbar-item { border-bottom: 1px solid #eee; }
  .navbar-start-mobile > .navbar-item:last-child { border-bottom: none; }

  .navbar-menu.is-active .navbar-item.is-current,
  .navbar-menu.is-active .navbar-item.has-dropdown.is-current > .navbar-link {
    color: #1a1a1a;
    font-weight: 700;
  }
  .navbar-menu.is-active .navbar-dropdown .navbar-item { color: #8a8f98; }
  .navbar-menu.is-active .navbar-dropdown .navbar-item.is-current { color: #1a1a1a; font-weight: 700; }
}

/* 모바일 햄버거 드로어(#main-nav)의 메뉴 항목(.navbar-start-mobile)과 로그인/회원가입/
   마이페이지/로그아웃(.navbar-mobile-account)은 메뉴관리가 관리하는 항목과 로그인 여부에 따라
   내용이 달라지는 계정 액션을 구분해서 보여주기 위해 서로 다른 블록으로 나눠져 있다 - 데스크톱은
   똑같은 계정 액션을 .navbar-end의 사람 아이콘 드롭다운으로 이미 제공하므로 그쪽만 남기고
   .navbar-mobile-account는 숨긴다(반대로 모바일에서는 .navbar-end를 숨김). */
@media (max-width: 1023px) {
  .navbar-end { display: none !important; }
}
@media (min-width: 1024px) {
  .navbar-mobile-account { display: none !important; }
}
.navbar-mobile-account-divider { border: none; border-top: 1px solid #eee; margin: .5rem 0; }
.navbar-mobile-account-greeting { color: #8a8f98; font-size: .9rem; }

/* 푸터 (layout.php, 전 페이지 공통) */
.site-footer { background: #12131a; color: rgba(255, 255, 255, .75); padding: 3.5rem 0 0; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr;
  gap: 2rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand strong { color: #fff; font-size: 1.1rem; }
.footer-brand p { margin: .75rem 0 1.25rem; font-size: .85rem; line-height: 1.7; color: rgba(255, 255, 255, .55); }
.footer-social { display: flex; gap: .6rem; }
.footer-social a {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.footer-social a:hover { background: var(--brand); text-decoration: none; }
.footer-col h4 { color: #fff; font-size: .85rem; font-weight: 700; margin: 0 0 1rem; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.footer-col a, .footer-col span { color: rgba(255, 255, 255, .6); font-size: .85rem; }
.footer-col a:hover { color: #fff; text-decoration: none; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  padding: 1.5rem 0;
  font-size: .75rem;
  color: rgba(255, 255, 255, .45);
}
.footer-bottom a { color: rgba(255, 255, 255, .45); margin-left: 1rem; }
.footer-bottom a:hover { color: #fff; text-decoration: none; }

/* 갤러리 게시판 목록 - 카드 1개당 최소 220px을 유지하며 한 줄에 들어가는 개수만큼
   유동적으로 폭이 늘어나 화면을 꽉 채우고(auto-fit), 화면이 좁아져 한 줄에
   다 안 들어가면 자동으로 다음 줄로 떨어진다 (고정 컬럼 수/고정 폭 방식 아님) */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
}
.gallery-card { display: block; padding: 0.5rem; }
.gallery-card:hover { text-decoration: none; }
.gallery-card figure { background: #f2f2f2; border-radius: 4px; overflow: hidden; }
.gallery-card figure img { object-fit: cover; width: 100%; height: 100%; }
.gallery-card-title { margin-top: 0.5rem; font-weight: 600; }
.gallery-card-meta { font-size: .75rem; color: #7a7a7a; }

/* ==========================================================================
   서브페이지 공통 배너/사이드바 (CLAUDE/img_sub.png 시안 기준)
   board/list, board/view, page/view 등 게시판·콘텐츠페이지가 공유해서 쓴다.
   브랜드 블루는 home-* 클래스와 동일하게 sub-* 클래스에만 한정한다.
   ========================================================================== */
.full-bleed {
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
}

.sub-banner {
  background: linear-gradient(100deg, #eef3ff 0%, #eef3ff 45%, #cfdcf7 72%, #9fb8ea 100%);
  overflow: hidden;
  position: relative;
}
.sub-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  left: 60%;
  background: repeating-linear-gradient(75deg, rgba(37, 87, 235, .18) 0 10px, rgba(37, 87, 235, .05) 10px 20px);
  pointer-events: none;
}
.sub-banner-inner { position: relative; padding: 2.75rem 1.5rem 2.25rem; }
.sub-banner-title { font-size: 2rem; font-weight: 800; color: #1b2333; margin: 0 0 .75rem; }
.sub-breadcrumb { display: flex; align-items: center; gap: .4rem; font-size: .85rem; color: #5b6479; }
.sub-breadcrumb a { color: #5b6479; }
.sub-breadcrumb a:hover { color: var(--brand); text-decoration: none; }
.sub-breadcrumb .sep { color: #b7c0d4; }
.sub-breadcrumb .is-current { color: #1b2333; font-weight: 600; }

.sub-layout {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  max-width: 1152px;
  margin: 2.5rem auto;
  padding: 0 1.5rem;
}

.sub-sidebar {
  flex: 0 0 240px;
  width: 240px;
}
/* 헤더의 navbar-burger가 나타나는 지점(global.css)과 맞춰서, 좌측 메뉴는 사라지고
   같은 메뉴 항목은 햄버거 드로어(navbar-menu)로만 노출한다 - 화면에 중복 노출하지 않음 */
@media (max-width: 1023px) {
  .sub-sidebar { display: none; }
}
.sub-sidebar-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: #1b2333;
  margin: 0 0 1rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #1b2333;
}
.sub-sidebar-list { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.sub-sidebar-list li { border-bottom: 1px solid #eef0f4; }
.sub-sidebar-list a {
  display: block;
  padding: .75rem .25rem;
  color: #5b6479;
  font-size: .9rem;
}
.sub-sidebar-list a:hover { color: var(--brand); text-decoration: none; }
.sub-sidebar-list a.is-active {
  color: var(--brand);
  font-weight: 700;
  border-left: 3px solid var(--brand);
  padding-left: .5rem;
  margin-left: -.25rem;
}
.sub-contact-box {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  background: #f7f9fd;
  border-radius: 10px;
  padding: 1.25rem;
}
.sub-contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #eaf0ff;
  color: var(--brand);
  flex: none;
}
.sub-contact-icon svg { width: 18px; height: 18px; }
.sub-contact-box strong { display: block; font-size: .85rem; color: #1b2333; }
.sub-contact-phone { font-size: 1.1rem; font-weight: 800; color: #1b2333; margin: .15rem 0; }
.sub-contact-hours { font-size: .75rem; color: #8a92a3; line-height: 1.5; margin: 0; }

.sub-content { flex: 1; min-width: 0; }

.sub-content-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.sub-content-count { font-size: .9rem; color: #5b6479; }
.sub-search { display: flex; gap: .4rem; }
.sub-search select,
.sub-search input {
  border: 1px solid #dbdbdb;
  border-radius: 6px;
  padding: .5em .75em;
  font-size: .85rem;
  color: #363636;
  background: #fff;
}
.sub-search button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4em;
  border: none;
  border-radius: 6px;
  background: #1b2333;
  color: #fff;
  cursor: pointer;
}
.sub-search button:hover { background: var(--brand); }

/* 서브페이지 안에서만 페이지네이션 현재 페이지를 브랜드 블루로 강조 (다른 화면의 무채색 페이지네이션은 그대로 둠) */
.sub-content .pagination-link.is-current { background: var(--brand); border-color: var(--brand); }

/* 게시판 카테고리 필터 (use_category=1인 게시판의 목록 상단, board/basic·download·faq의 _shared 마크업
   없이 스킨별로 직접 렌더링) - 예전에는 Bulma .tabs를 썼는데 global.css(실사용 클래스만 담은 발췌본)에
   .tabs 스타일 자체가 없어서 그냥 민짜 목록으로 보였다. 알약 모양 필터 칩으로 바꾸고, 선택된 카테고리만
   사이드바 active 링크/페이지네이션 현재 페이지와 같은 규칙으로 브랜드 블루로 강조한다. */
.sub-category-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0 0 1.25rem;
}
.sub-category-tabs a {
  display: inline-flex;
  align-items: center;
  padding: .45em 1.1em;
  border-radius: 999px;
  background: #f2f4f8;
  color: #4b5468;
  font-size: .85rem;
  font-weight: 600;
  line-height: 1.4;
}
.sub-category-tabs a:hover { background: #e7ecf7; color: #1b2333; text-decoration: none; }
/* 모니터/화면 설정에 따라 --brand(연한 블루)만으로는 흰 텍스트와 대비가 약해 보일 수 있어서,
   선택된 칩은 더 진한 --brand-dark를 쓰고 살짝 그림자를 더해 눈에 확실히 띄게 한다. */
.sub-category-tabs a.is-active {
  background: #484848;
  color: #fff;
  box-shadow: 0 1px 3px rgba(23, 63, 199, .4);
}

/* 게시글 상세(board/_shared/view.php) 제목 위 카테고리 배지 - 목록의 미선택 카테고리 칩과
   같은 톤(연회색)으로 통일, 클릭 동작이 없는 정적 라벨이라 <a> 대신 <span>으로 둔다 */
.post-category-tag {
  display: inline-flex;
  align-items: center;
  padding: .3em .85em;
  border-radius: 999px;
  background: #f2f4f8;
  color: #4b5468;
  font-size: .75rem;
  font-weight: 600;
}

/* ==========================================================================
   스크롤 등장 애니메이션 (IntersectionObserver, layout.php 하단 스크립트가 처리)
   .reveal 요소는 뷰포트에 들어오는 순간 JS가 is-visible을 붙인다 - JS가 없거나
   IntersectionObserver 미지원 브라우저에서는 스크립트가 즉시 is-visible을 붙여
   콘텐츠가 항상 보이도록 폴백한다.
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.16, .84, .44, 1), transform .7s cubic-bezier(.16, .84, .44, 1);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* 한 줄에 2개씩 짝을 이루는 레이어(히어로 텍스트/이미지, 최신소식/CTA)는 기본(아래→위) 대신 좌우에서 들어온다 */
.reveal.reveal-left { transform: translateX(-48px); }
.reveal.reveal-right { transform: translateX(48px); }
.reveal.reveal-left.is-visible,
.reveal.reveal-right.is-visible { transform: translateX(0); }

.reveal-delay-2 { transition-delay: .15s; }

.home-grid > .reveal:nth-child(1) { transition-delay: 0ms; }
.home-grid > .reveal:nth-child(2) { transition-delay: 90ms; }
.home-grid > .reveal:nth-child(3) { transition-delay: 180ms; }
.home-grid > .reveal:nth-child(4) { transition-delay: 270ms; }

.home-news-list > .reveal:nth-child(1) { transition-delay: 0ms; }
.home-news-list > .reveal:nth-child(2) { transition-delay: 70ms; }
.home-news-list > .reveal:nth-child(3) { transition-delay: 140ms; }
.home-news-list > .reveal:nth-child(4) { transition-delay: 210ms; }
.home-news-list > .reveal:nth-child(5) { transition-delay: 280ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   공통 배너 렌더러 (program_banner.md) - fixed/slide/fade/custom 4가지 출력방식 공용 스타일.
   Swiper 자체 UI(화살표/페이지네이션)는 vendor/swiper 번들 CSS가 기본을 제공하고, 여기서는
   이 프로젝트 톤에 맞는 색상/배치만 얹는다.
   ========================================================================== */
.site-banner { position: relative; width: 100%; overflow: hidden; }
.site-banner .swiper,
.banner-fixed-wrap { height: var(--banner-height, auto); }
.site-banner .swiper .banner-item,
.banner-fixed-wrap .banner-item { position: relative; height: 100%; }
@media (max-width: 1199px) {
  .site-banner .swiper, .banner-fixed-wrap { height: var(--banner-height-tablet, var(--banner-height, auto)); }
}
@media (max-width: 767px) {
  .site-banner .swiper, .banner-fixed-wrap { height: var(--banner-height-mobile, var(--banner-height, auto)); }
}

.banner-item picture.banner-image { display: block; width: 100%; height: 100%; }
.banner-item picture.banner-image img { display: block; width: 100%; height: 100%; object-fit: cover; }

.banner-image-link { position: absolute; inset: 0; }

.banner-overlay {
  position: absolute;
  inset: 0;
  background: var(--banner-overlay-color, #000000);
  opacity: var(--banner-overlay-opacity, 0.3);
  pointer-events: none;
}

.banner-inner {
  position: absolute;
  inset: 0;
  display: flex;
  padding: 6% 8%;
}
.banner-inner.position-left-top { justify-content: flex-start; align-items: flex-start; }
.banner-inner.position-left-center { justify-content: flex-start; align-items: center; }
.banner-inner.position-left-bottom { justify-content: flex-start; align-items: flex-end; }
.banner-inner.position-center-top { justify-content: center; align-items: flex-start; }
.banner-inner.position-center-center { justify-content: center; align-items: center; }
.banner-inner.position-center-bottom { justify-content: center; align-items: flex-end; }
.banner-inner.position-right-top { justify-content: flex-end; align-items: flex-start; }
.banner-inner.position-right-center { justify-content: flex-end; align-items: center; }
.banner-inner.position-right-bottom { justify-content: flex-end; align-items: flex-end; }

.banner-content {
  max-width: 36rem;
  color: var(--banner-text-color, #ffffff);
}
.banner-content.align-left { text-align: left; }
.banner-content.align-center { text-align: center; }
.banner-content.align-right { text-align: right; }
.banner-subtitle { font-size: .95rem; font-weight: 600; margin: 0 0 .5rem; opacity: .9; }
.banner-title { font-size: clamp(1.5rem, 4vw, 2.5rem); font-weight: 800; margin: 0 0 .75rem; line-height: 1.25; }
.banner-description { font-size: 1rem; line-height: 1.6; margin: 0 0 1.25rem; }
.banner-buttons { display: flex; gap: .75rem; flex-wrap: wrap; }
.banner-content.align-center .banner-buttons { justify-content: center; }
.banner-content.align-right .banner-buttons { justify-content: flex-end; }
.banner-button {
  display: inline-flex;
  align-items: center;
  padding: .65em 1.4em;
  border-radius: 6px;
  background: var(--brand, #2557eb);
  color: #fff;
  font-weight: 600;
  font-size: .9rem;
}
.banner-button:hover { background: var(--brand-dark, #173fc7); text-decoration: none; }
.banner-button-secondary { background: rgba(255, 255, 255, .15); backdrop-filter: blur(2px); }
.banner-button-secondary:hover { background: rgba(255, 255, 255, .3); }

.banner-html { width: 100%; height: 100%; }
.banner-custom-wrap .banner-custom-item + .banner-custom-item { margin-top: 1rem; }

/* 텍스트 애니메이션 (program_banner.md 11장) - Swiper가 붙이는 swiper-slide-active와,
   고정 배너는 항상 붙어있는 banner-fixed 클래스를 기준으로 재생한다 */
.banner-content .banner-title,
.banner-content .banner-description,
.banner-content .banner-buttons { opacity: 0; }
.banner-content.anim-none .banner-title,
.banner-content.anim-none .banner-description,
.banner-content.anim-none .banner-buttons { opacity: 1; }

.banner-content .banner-title { animation-delay: 0s; }
.banner-content .banner-description { animation-delay: .15s; }
.banner-content .banner-buttons { animation-delay: .3s; }

.swiper-slide-active .banner-content.anim-fade .banner-title,
.swiper-slide-active .banner-content.anim-fade .banner-description,
.swiper-slide-active .banner-content.anim-fade .banner-buttons,
.banner-fixed .banner-content.anim-fade .banner-title,
.banner-fixed .banner-content.anim-fade .banner-description,
.banner-fixed .banner-content.anim-fade .banner-buttons { animation: bannerFade .7s ease forwards; }

.swiper-slide-active .banner-content.anim-fade-up .banner-title,
.swiper-slide-active .banner-content.anim-fade-up .banner-description,
.swiper-slide-active .banner-content.anim-fade-up .banner-buttons,
.banner-fixed .banner-content.anim-fade-up .banner-title,
.banner-fixed .banner-content.anim-fade-up .banner-description,
.banner-fixed .banner-content.anim-fade-up .banner-buttons { animation: bannerFadeUp .7s ease forwards; }

.swiper-slide-active .banner-content.anim-fade-down .banner-title,
.swiper-slide-active .banner-content.anim-fade-down .banner-description,
.swiper-slide-active .banner-content.anim-fade-down .banner-buttons,
.banner-fixed .banner-content.anim-fade-down .banner-title,
.banner-fixed .banner-content.anim-fade-down .banner-description,
.banner-fixed .banner-content.anim-fade-down .banner-buttons { animation: bannerFadeDown .7s ease forwards; }

.swiper-slide-active .banner-content.anim-fade-left .banner-title,
.swiper-slide-active .banner-content.anim-fade-left .banner-description,
.swiper-slide-active .banner-content.anim-fade-left .banner-buttons,
.banner-fixed .banner-content.anim-fade-left .banner-title,
.banner-fixed .banner-content.anim-fade-left .banner-description,
.banner-fixed .banner-content.anim-fade-left .banner-buttons { animation: bannerFadeLeft .7s ease forwards; }

.swiper-slide-active .banner-content.anim-fade-right .banner-title,
.swiper-slide-active .banner-content.anim-fade-right .banner-description,
.swiper-slide-active .banner-content.anim-fade-right .banner-buttons,
.banner-fixed .banner-content.anim-fade-right .banner-title,
.banner-fixed .banner-content.anim-fade-right .banner-description,
.banner-fixed .banner-content.anim-fade-right .banner-buttons { animation: bannerFadeRight .7s ease forwards; }

.swiper-slide-active .banner-content.anim-zoom-in .banner-title,
.swiper-slide-active .banner-content.anim-zoom-in .banner-description,
.swiper-slide-active .banner-content.anim-zoom-in .banner-buttons,
.banner-fixed .banner-content.anim-zoom-in .banner-title,
.banner-fixed .banner-content.anim-zoom-in .banner-description,
.banner-fixed .banner-content.anim-zoom-in .banner-buttons { animation: bannerZoomIn .7s ease forwards; }

@keyframes bannerFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bannerFadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes bannerFadeDown { from { opacity: 0; transform: translateY(-24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes bannerFadeLeft { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: translateX(0); } }
@keyframes bannerFadeRight { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }
@keyframes bannerZoomIn { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .banner-content * { animation: none !important; transition: none !important; opacity: 1 !important; }
}

.swiper-button-prev, .swiper-button-next {
  color: #fff;
  background: transparent;
  border: none;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
  opacity: .75;
  transition: opacity .2s ease;
}
.swiper-button-prev:hover, .swiper-button-next:hover { opacity: 1; }
.swiper-button-prev:focus-visible, .swiper-button-next:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ==========================================================================
   팝업 (layout.php) - 헤더/바디/푸터가 구분된 모달 카드 대신, 닫기 버튼과
   "오늘 하루 보지 않기" 바를 콘텐츠(이미지) 위에 겹치는 레이어로 표현한다.
   같은 페이지에 팝업이 여러 개 활성화되어 있으면 배경은 하나만(공유) 깔고,
   카드는 전부 화면 정중앙에 겹쳐서 쌓이며, 클릭한 카드가 맨 위로 올라온다
   (layout.php의 popupZCounter/bringPopupToFront). */
.popup-overlay-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(10, 10, 10, .6);
}
.popup-modal-wrap {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(480px, calc(100vw - 2rem));
}
.popup-modal-card {
  position: relative;
  width: 100%;
  max-height: calc(100vh - 40px);
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(10, 10, 10, .35);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.popup-close {
  position: absolute;
  top: .625rem;
  right: .625rem;
  z-index: 2;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 50%;
  background: rgba(10, 10, 10, .55);
  color: #fff;
  font-size: 1.375rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.popup-close:hover { background: rgba(10, 10, 10, .75); }
.popup-modal-body { overflow-y: auto; flex: 1 1 auto; }
.popup-modal-text { padding: 1.25rem 1.5rem 2.75rem; }
/* 이미지가 등록된 팝업은 이미지가 "오늘 하루 보지 않기" 바 영역을 제외한 카드 전체를 채우고,
   내용(텍스트)이 있으면 별도 여백 있는 박스 대신 이미지 위에 얹는 레이어로 표현한다.
   글자가 잘리지 않도록 카드 자체에 최소 300x300px을 보장한다. */
.popup-has-image {
  aspect-ratio: 1 / 1;
  min-width: 300px;
  min-height: 300px;
}
.popup-has-image .popup-modal-body { height: 100%; }
.popup-modal-image { display: block; width: 100%; height: 100%; object-fit: cover; }
.popup-modal-overlay-text {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  padding: .75rem 3rem .75rem 1rem;
  background: linear-gradient(to bottom, rgba(10, 10, 10, .65), rgba(10, 10, 10, 0));
  color: #fff;
  font-size: .85rem;
  line-height: 1.4;
}
.popup-modal-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .5rem 1rem;
  background: rgba(10, 10, 10, .55);
  color: #fff;
  font-size: .8rem;
}
.popup-modal-footer label { color: #fff; display: flex; align-items: center; gap: .35rem; }
.popup-modal-footer a { color: #fff; text-decoration: underline; }
.swiper-pagination-bullet-active { background: var(--brand, #2557eb); }

/* 부트스트랩 모달 배경(.modal-backdrop) - 부트스트랩 JS가 이 요소를 .bs-scope 안이 아니라
   <body> 바로 아래에 직접 붙이기 때문에, bootstrap.scoped.css의 .bs-scope .modal-backdrop
   규칙이 적용되지 않아 배경이 투명하게 보이는 문제가 있다. 스코프를 타지 않는 별도 규칙으로
   같은 값을 재선언해서 정상적으로 반투명 검정 배경이 나오게 한다(마이페이지 > 메일의 계정 연동
   추가/보내기/수정 모달에서 사용, src/views/member/mail/_connect_modal.php·_account_modals.php). */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1050;
  width: 100vw;
  height: 100vh;
  background-color: #000;
}
.modal-backdrop.fade { opacity: 0; }
.modal-backdrop.show { opacity: .5; }