/* 2026-11-05 계정 메뉴(PC 사람 모양)·알림센터 손보기 — app.css·hamgae-ds.css(핵심 CSS 묶음의 원본)는 그대로 두고 이 파일만 뒤에 덮어쓴다.
   base.html이 전체 CSS 다음에 늦게 불러온다(패널은 처음엔 숨겨져 있어 첫 화면 그림에는 영향 없음). 선택자 앞 html은 같은 무게 규칙보다 이기려고.
   - 알림센터: 밝은 바탕 · 부드러운 구분선 · 검은 채움 칩/밑줄 없앰 · 안 읽음은 아주 옅은 바탕 + 점 · 중요 알림만 포인트 색 · 종류별 옅은 아이콘 원
   - 계정 메뉴: 오른쪽 정렬 팝오버, 넘침·가로 스크롤 없음(메뉴 줄의 음수 여백 제거), 긴 이름 말줄임, 작은 PC·태블릿 폭 */

/* ---------- 공통 패널 ---------- */
html .account-panel .ap-sheet { background: var(--hg-elevated); border: 1px solid var(--hg-border); box-shadow: 0 12px 32px rgba(17, 20, 24, .12), 0 2px 6px rgba(17, 20, 24, .06); }
html .account-panel .ap-head { display: flex; align-items: center; gap: 4px; min-height: 52px; padding: 4px 6px 4px 16px; background: var(--hg-elevated); box-shadow: none; border-bottom: 1px solid var(--hg-divider); }
html .account-panel .ap-title { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 17px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
/* 깨짐 원인(2026-11-05 재현): 계정 메뉴의 제목 '내 계정'은 .sr-only(position:absolute !important)를 풀어 보이게 하는데 position:static에 !important가 없어
   제목이 머리글 줄 밖(구분선 위)에 떠서 겹쳐 보였다 → 여기서 확실히 풀어 머리글 한 줄(제목 왼쪽 · 닫기 오른쪽)로 */
html .account-panel:not(.is-center) .ap-title-account { position: static !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important;
  clip: auto !important; clip-path: none !important; overflow: hidden !important; white-space: nowrap !important; text-overflow: ellipsis; display: block; }
html .account-panel.is-sheet .ap-head { padding-top: 0; }
html .account-panel .ap-body { overflow-x: hidden; }
html .account-panel.is-sheet .ap-backdrop { background: rgba(17, 20, 24, .32); }
html[data-theme="dark"] .account-panel .ap-sheet { box-shadow: 0 12px 32px rgba(0, 0, 0, .45); }

/* ---------- 알림센터 ---------- */
html .account-panel .ap-ctabs { gap: 2px; padding: 0 14px; border-bottom: 1px solid var(--hg-divider); }
html .account-panel .ap-ctabs button { font-weight: 600; color: var(--hg-text-secondary); }
html .account-panel .ap-ctabs button[aria-selected="true"] { color: var(--hg-text); font-weight: 700; }
html .account-panel .ap-ctabs button[aria-selected="true"]::after { background: var(--hg-primary); height: 2px; }
html .account-panel .nc-bar { background: var(--hg-elevated); padding: 12px 16px 10px; }
html .account-panel .nc-chip { min-height: 32px; padding: 0 13px; border: 1px solid var(--hg-border); background: transparent; color: var(--hg-text-secondary); font-weight: 600; font-size: 13.5px; }
html .account-panel .nc-chip:hover { background: var(--hg-surface-subtle); color: var(--hg-text); }
html .account-panel .nc-chip[aria-pressed="true"] { border-color: transparent; background: var(--hg-primary-soft); color: var(--hg-primary-strong); }
html .account-panel .nc-readall { font-weight: 600; font-size: 13.5px; color: var(--hg-text-secondary); }
html .account-panel .nc-list > li + li { border-top: 1px solid var(--hg-divider); }
html .account-panel .nc-item.is-unread { background: color-mix(in srgb, var(--hg-primary-soft) 45%, transparent); }
html .account-panel .nc-item.is-unread .nc-link:hover { background: color-mix(in srgb, var(--hg-primary-soft) 80%, transparent); }
html .account-panel .nc-link { padding: 13px 46px 13px 16px; gap: 12px; }
html .account-panel .nc-link:hover { background: var(--hg-surface-subtle); }
html .account-panel .nc-title { font-size: 14.5px; font-weight: 600; color: var(--hg-text); }
html .account-panel .nc-item.is-unread .nc-title { font-weight: 700; }
html .account-panel .nc-item:not(.is-unread) .nc-text { color: var(--hg-text-secondary); }
html .account-panel .nc-item.is-important .nc-title { color: var(--hg-primary-strong); }
html .account-panel .nc-text { font-size: 14px; line-height: 1.5; }
html .account-panel .nc-time { font-size: 12.5px; }
html .account-panel .nc-ico { width: 36px; height: 36px; background: var(--hg-cat-gray-bg); color: var(--hg-cat-gray); }
html .account-panel .nc-ico.is-brand { background: var(--hg-primary-soft); color: var(--hg-primary-strong); box-shadow: none; }  /* 함께할개 알림: 진한 앱 아이콘 대신 옅은 발자국 */
html .account-panel .nc-item[data-kind="comment"] .nc-ico, html .account-panel .nc-item[data-kind="answer"] .nc-ico,
html .account-panel .nc-item[data-kind="accepted"] .nc-ico { background: var(--hg-cat-blue-bg); color: var(--hg-cat-blue); }
html .account-panel .nc-item[data-kind="reaction"] .nc-ico, html .account-panel .nc-item[data-kind="follow"] .nc-ico { background: var(--hg-cat-pink-bg); color: var(--hg-cat-pink); }
html .account-panel .nc-item[data-kind="points"] .nc-ico { background: var(--hg-cat-yellow-bg); color: var(--hg-cat-yellow); }
html .account-panel .nc-item[data-kind="suggestion"] .nc-ico { background: var(--hg-cat-green-bg); color: var(--hg-cat-green); }
html .account-panel .nc-dot { width: 7px; height: 7px; top: 21px; }
html .account-panel .nc-menu summary { color: var(--hg-text-tertiary, var(--hg-text-secondary)); }
html .account-panel .nc-more { border-color: var(--hg-border); font-weight: 600; font-size: 14px; }
html .account-panel .nc-empty-title { font-weight: 700; }
html .account-panel .nc-foot a { font-weight: 600; }
html .account-panel .nc-count { font-weight: 700; }

/* ---------- 계정 메뉴(사람 모양) ---------- */
html .account-panel:not(.is-center) .ap-body { padding: 6px 16px 10px; }
html .ap-me { padding: 8px 0 12px; border-bottom: 1px solid var(--hg-divider); }
html .ap-me .ap-profile { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 6px 8px; margin: 0 -8px; border-radius: var(--hg-r-md, 12px); color: var(--hg-text); text-decoration: none; }
html .ap-me .ap-profile:hover, html .ap-me .ap-profile:focus-visible { background: var(--hg-surface-subtle); }
html .ap-me .ap-profile > .icon { flex: none; margin-left: auto; color: var(--hg-text-secondary); }
html .ap-me .ap-avatar { flex: none; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; }
html .ap-me .ap-avatar img { width: 100%; height: 100%; object-fit: cover; }
html .ap-me .ap-who { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
html .ap-me .ap-name { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16.5px; font-weight: 700; }
html .ap-me .ap-grade { font-size: 13.5px; color: var(--hg-text-secondary); }
html .account-panel .ap-rtabs { margin: 10px 0 2px; }
html .account-panel .ap-menu { margin: 4px 0; padding: 0; }
html .account-panel .ap-menu li a, html .account-panel .ap-menu li button { box-sizing: border-box; width: 100%; margin: 0; padding: 0 10px; min-height: 46px; gap: 12px; border-radius: 10px; font-size: 15px; font-weight: 600; }
html .account-panel .ap-menu li a > span:not(.ap-aside):not(.ap-count), html .account-panel .ap-menu li button > span:not(.ap-aside):not(.ap-count) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html .account-panel .ap-menu .ap-aside { flex: none; margin-left: auto; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--hg-text-secondary); font-size: 13.5px; font-weight: 500; }
html .account-panel .ap-menu .ap-count { flex: none; margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--hg-primary); color: var(--hg-on-primary, #fff); font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; }
html .account-panel .ap-menu.ap-foot { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--hg-divider); }
html .account-panel .ap-logout { margin: 0; }
html .account-panel .ap-logout button { color: var(--hg-text-secondary); }
@media (min-width: 768px) {
  html .account-panel:not(.is-center):not(.is-sheet) .ap-sheet { width: 320px; max-width: calc(100vw - 24px); max-height: min(640px, calc(100vh - 84px)); }
}