/* 2026-11-10 전체 메뉴(사이드바) — 사용자 시안 두 장(로그인 전·로그인 후)을 따른다. 이전 파일: drawer-profile-card.css(2026-11-05).
   로그인 전: '나의 도화서원 / 로그인하고 시작하기' 큰 카드 대신 보라색 '로그인' 버튼 하나.
   로그인 후: 흰 카드 — 작은 프로필 사진 옆에 이름과 대표 칭호, 구분선 아래 한 줄에 '칭호 N개 보유'(왼쪽)와 '인연 도감 보기'(오른쪽).
   메뉴 줄 높이는 52px → 44px(시안처럼 조금 촘촘하게, 휴대폰 한 화면에 '상담 검색'까지 보이게).
   어두운 화면에서는 메뉴 바탕이 흰색으로 남고 글자만 밝아져 거의 안 보였다(2026-11-10 확인) — 메뉴 전체를 어둡게 맞춘다.
   연결 주소와 자료는 그대로다(/login, /account, /collection?status=owned, /collection). 마크업은 php/collection-view.php의 dohwa_collection_drawer(). */

/* 로그인 전 */
.drawer-login-button{display:flex;align-items:center;justify-content:center;min-height:44px;margin:2px 0 20px;padding:0 16px;border-radius:10px;background:#7a5c9c;color:#fff;font-size:16px;font-weight:700;line-height:1.4;letter-spacing:-.3px;text-align:center}
.drawer-login-button:hover{background:#6c4f8e;color:#fff}
.drawer-login-button:focus-visible{outline:2px solid #8b6cae;outline-offset:3px}

/* 메뉴 줄 */
.side-drawer .drawer-body .drawer-nav-link{min-height:44px;padding-block:10px}

/* 로그인 후 */
.drawer-collection.drawer-collection--profile-inline{--drawer-avatar-size:46px;--drawer-avatar-gap:14px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;margin:2px 0 20px;padding:12px 16px 2px;border:1px solid #e2d9ee;border-radius:16px;background:#fff;color:#28233c}
.drawer-collection--profile-inline>*{grid-column:1/-1;min-width:0}
.drawer-collection--profile-inline .collection-eyebrow{margin:0 0 6px;color:#6f5a88;font-size:12px;font-weight:600;line-height:1.5}
.drawer-collection--profile-inline .collection-profile-name{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:26px;padding-left:calc(var(--drawer-avatar-size) + var(--drawer-avatar-gap))}
.drawer-collection--profile-inline .collection-profile-name>.member-avatar{position:absolute;left:0;top:0;width:var(--drawer-avatar-size);height:var(--drawer-avatar-size);max-width:none;box-sizing:border-box;border:1px solid #e4dced;border-radius:50%;background:#fff;object-fit:cover}
.drawer-collection--profile-inline .collection-profile-name>.member-avatar.is-default-avatar{padding:3px;object-fit:contain}
.drawer-collection--profile-inline .collection-profile-name>strong{display:block;flex:1;min-width:0;overflow:hidden;color:#1d1a2b;font-size:18px;font-weight:800;line-height:1.45;letter-spacing:-.5px;text-align:left;white-space:nowrap;text-overflow:ellipsis}
.drawer-collection--profile-inline .collection-profile-name>svg{flex:none;width:18px;height:18px;margin:0;color:#7d6896}
.drawer-collection--profile-inline .collection-profile-title,.drawer-collection--profile-inline .collection-profile-hint{margin-left:calc(var(--drawer-avatar-size) + var(--drawer-avatar-gap))}
.drawer-collection--profile-inline .collection-profile-title{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:24px;margin-top:2px}
.drawer-collection--profile-inline .collection-profile-title>.collection-seal{flex:none;width:20px;height:20px}
.drawer-collection--profile-inline .collection-profile-title>span{min-width:0;color:#2c2740;font-size:14px;font-weight:600;line-height:1.4;word-break:keep-all}
.drawer-collection--profile-inline .collection-profile-title>small{padding:1px 7px;border:1px solid #d9cde8;border-radius:999px;color:#6a5784;font-size:11px;font-weight:600;line-height:1.45;white-space:nowrap}
.drawer-collection--profile-inline .collection-profile-hint{min-height:24px;margin-top:2px;margin-bottom:0;color:#6f6478;font-size:12px;line-height:1.6;word-break:keep-all;overflow-wrap:anywhere}
.drawer-collection--profile-inline .collection-owned-link,.drawer-collection--profile-inline .collection-primary{display:flex;align-items:center;min-height:40px;margin:8px 0 0;padding:0;border:0;border-top:1px solid #ebe5f1;border-radius:0;background:none;line-height:1.5}
.drawer-collection--profile-inline .collection-owned-link{grid-column:1;gap:4px;color:#6f6478;font-size:13px;font-weight:500}
.drawer-collection--profile-inline .collection-owned-link b{color:#3a3150;font-weight:700}
.drawer-collection--profile-inline .collection-owned-link>svg{display:none!important}
.drawer-collection--profile-inline .collection-primary{grid-column:2;justify-content:flex-end;gap:3px;width:auto;color:#6b4f8f;font-size:14px;font-weight:700;text-align:right}
.drawer-collection--profile-inline .collection-primary>svg{flex:none;width:15px;height:15px}
.drawer-collection--profile-inline .collection-primary::before{content:none}
.drawer-collection--profile-inline .collection-profile-hint+.collection-primary{grid-column:1/-1}
.drawer-collection--profile-inline .collection-profile-name:focus-visible{outline:none}
.drawer-collection--profile-inline .collection-profile-name:focus-visible>.member-avatar,.drawer-collection--profile-inline .collection-profile-name:focus-visible>strong{outline:2px solid #8b6cae;outline-offset:3px}
@media(max-width:360px){.drawer-collection.drawer-collection--profile-inline{--drawer-avatar-size:42px;--drawer-avatar-gap:12px;padding-inline:14px}}

/* 어두운 화면 */
html[data-theme="dark"] .side-drawer{background:var(--dk-surface,#181b29);color:var(--dk-text,#e9e9f2)}
html[data-theme="dark"] .side-drawer .drawer-eyebrow{color:#b9a2d6}
html[data-theme="dark"] .side-drawer .drawer-close{background:var(--dk-surface-2,#20243a);color:var(--dk-text,#e9e9f2)}
html[data-theme="dark"] .side-drawer .drawer-section-title{color:#a99cbb}
html[data-theme="dark"] .side-drawer .drawer-section+.drawer-section{border-top-color:var(--dk-line,#2c3045)}
html[data-theme="dark"] .side-drawer .drawer-nav-link{color:var(--dk-text,#e9e9f2)}
html[data-theme="dark"] .side-drawer .drawer-nav-link>.icon{color:#8f87a6}
html[data-theme="dark"] .side-drawer .drawer-nav-link[aria-current='page']{background:#2d2644;color:#dcc8f0}
html[data-theme="dark"] .side-drawer .drawer-bottom{background:#141623;border-top-color:var(--dk-line,#2c3045)}
html[data-theme="dark"] .side-drawer .drawer-footer{color:#8f8aa3}
html[data-theme="dark"] .drawer-login-button{background:#7a5c9c;color:#fff}
html[data-theme="dark"] .drawer-collection.drawer-collection--profile-inline{border-color:var(--dk-line,#2c3045);background:var(--dk-surface-2,#20243a);color:var(--dk-text,#e9e9f2)}
html[data-theme="dark"] .drawer-collection--profile-inline .collection-eyebrow,html[data-theme="dark"] .drawer-collection--profile-inline .collection-profile-name>svg{color:#b9a2d6}
html[data-theme="dark"] .drawer-collection--profile-inline .collection-profile-name>strong,html[data-theme="dark"] .drawer-collection--profile-inline .collection-profile-title>span,html[data-theme="dark"] .drawer-collection--profile-inline .collection-owned-link b{color:var(--dk-text,#e9e9f2)}
html[data-theme="dark"] .drawer-collection--profile-inline .collection-profile-title>small{border-color:#4a4466;color:#cdbfe6}
html[data-theme="dark"] .drawer-collection--profile-inline .collection-profile-hint,html[data-theme="dark"] .drawer-collection--profile-inline .collection-owned-link{color:#b3adc4}
html[data-theme="dark"] .drawer-collection--profile-inline .collection-owned-link,html[data-theme="dark"] .drawer-collection--profile-inline .collection-primary{border-top-color:var(--dk-line,#2c3045)}
html[data-theme="dark"] .drawer-collection--profile-inline .collection-primary{color:#cdb6ea}