/* 모든 페이지 머리말의 [로그인]/[마이페이지] 단추, 흉내 모드 한 줄, 역할 전환 창(FIX40). tokens.css 다음에 불러온다.
   휴대폰 360에서도 단추를 메뉴 안에 숨기지 않는다. 누르는 곳 44px 이상. */
.acct { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; flex-shrink: 0; min-height: 44px; }
.acct.is-loading { min-width: 132px; }
.acct-login {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--space-4);
  border-radius: var(--radius-md); background: var(--color-primary); color: var(--color-on-primary);
  font-weight: var(--font-weight-bold); text-decoration: none; white-space: nowrap;
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.acct-login:hover { background: var(--color-primary-dark); }
.acct-join {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-1);
  font-size: var(--font-size-caption); color: var(--color-text-muted); white-space: nowrap; text-underline-offset: 4px;
}
.acct-join:hover { color: var(--color-primary); }
.acct-menu { position: relative; }
.acct-btn {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-3) 0 var(--space-1);
  border: var(--border-width) solid var(--color-border); border-radius: 999px; background: var(--color-surface);
  font: inherit; font-weight: var(--font-weight-bold); color: var(--color-text); cursor: pointer; white-space: nowrap;
  transition: border-color var(--duration-fast) var(--ease-standard);
}
.acct-btn:hover, .acct-btn[aria-expanded="true"] { border-color: var(--color-primary); }
.acct-ava {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--color-primary); color: var(--color-on-primary); font-size: 0.9375rem; font-weight: var(--font-weight-heavy);
}
.acct-pop {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 220px; padding: var(--space-2);
  background: var(--color-surface); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
}
.acct-who { margin: 0; padding: var(--space-2) var(--space-3) var(--space-3); border-bottom: var(--border-width) solid var(--color-border); font-size: var(--font-size-caption); color: var(--color-text-muted); }
.acct-who strong { color: var(--color-text); font-size: var(--font-size-body); }
.acct-item {
  display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 var(--space-3); margin-top: 2px;
  border: 0; border-radius: var(--radius-sm); background: none; font: inherit; color: var(--color-text);
  text-align: left; text-decoration: none; cursor: pointer;
}
.acct-item:hover, .acct-item:focus-visible { background: var(--color-primary-soft); }
@media (max-width: 420px) {
  .acct-join { padding: 0; }
  .acct-login { padding: 0 var(--space-3); }
  .acct-btn { padding-right: var(--space-2); }
}

.mode-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px var(--space-3);
  margin: 0; padding: 4px 16px; font-size: 13px; line-height: 1.5; text-align: center;
  background: var(--color-warning-soft); color: var(--color-warning);
}
.mode-bar__toggle {
  min-height: 32px; padding: 0 var(--space-2); border: var(--border-width) solid currentColor; border-radius: var(--radius-sm);
  background: transparent; color: inherit; font: inherit; font-weight: var(--font-weight-bold); cursor: pointer;
}
.mode-bar__toggle[aria-pressed="true"] { background: var(--color-warning); color: #fff; border-color: var(--color-warning); }

.m-dialog { width: min(440px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: var(--radius-lg); box-shadow: 0 24px 64px rgba(15, 23, 42, 0.28); }
.m-dialog::backdrop { background: var(--color-overlay); }
.m-dialog__body { padding: var(--space-5); }
.m-dialog__body h2 { margin: 0 0 var(--space-2); font-size: var(--font-size-h3); }
.m-dialog .m-field { margin: var(--space-4) 0 0; }
.m-dialog label { display: block; font-weight: var(--font-weight-bold); margin-bottom: var(--space-1); }
.m-dialog input, .m-dialog textarea {
  width: 100%; min-height: 48px; padding: var(--space-2) var(--space-3); font: inherit;
  border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface);
}
.m-dialog textarea { min-height: 96px; resize: vertical; }
.m-dialog .m-help { margin: var(--space-1) 0 0; font-size: var(--font-size-caption); color: var(--color-text-muted); }
.m-dialog .m-err { margin: var(--space-3) 0 0; color: var(--color-error); }
.m-dialog .m-acts { display: flex; gap: var(--space-2); margin-top: var(--space-5); flex-wrap: wrap; }
.m-dialog .m-btn { min-height: 48px; padding: 0 var(--space-5); border-radius: var(--radius-md); font: inherit; font-weight: var(--font-weight-bold); cursor: pointer; border: var(--border-width-strong) solid var(--color-primary); }
.m-dialog .m-btn--primary { background: var(--color-primary); color: var(--color-on-primary); }
.m-dialog .m-btn--ghost { background: transparent; color: var(--color-primary); }

/* 광고주·제작자 소개 페이지 맨 위 바꿔 가기 줄 */
.side-switch { margin: 0; padding: 8px 16px; text-align: center; font-size: var(--font-size-caption); background: var(--color-surface-alt); color: var(--color-text-muted); }
.side-switch a { font-weight: var(--font-weight-bold); color: var(--color-primary); text-underline-offset: 3px; }

/* 광고주·제작자 소개 페이지(site.css) 머리말에 단추 자리: 휴대폰에서는 글자 메뉴를 줄이고 단추는 항상 보인다 */
header.top.has-acct .wrap { flex-wrap: nowrap; gap: var(--space-3); }
header.top.has-acct .top-nav { margin-left: auto; }
header.top.has-acct .acct { margin-left: 0; }
@media (max-width: 600px) {
  header.top.has-acct .top-nav { display: none; }
  header.top.has-acct .acct { margin-left: auto; }
}
.steps-mini { margin: 0 0 var(--space-4); padding-left: 1.25em; }
.steps-mini li { margin: var(--space-1) 0; }

/* FIX44 🔔 알림: 머리말 단추 옆. 안 읽은 수 배지, 최근 20개 */
.bell { position: relative; }
.bell-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border: var(--border-width) solid var(--color-border); border-radius: 50%; background: var(--color-surface); cursor: pointer; font: inherit;
}
.bell-btn:hover, .bell-btn[aria-expanded="true"] { border-color: var(--color-primary); }
.bell-icon { font-size: 1.125rem; line-height: 1; }
.bell-badge {
  position: absolute; top: -2px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  background: var(--color-error); color: #fff; font-size: 12px; font-weight: var(--font-weight-bold); line-height: 20px; text-align: center;
}
.bell-pop {
  position: absolute; right: -52px; top: calc(100% + 6px); z-index: 31; width: min(340px, calc(100vw - 24px));
  background: var(--color-surface); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14); overflow: hidden;
}
.bell-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) var(--space-3); border-bottom: var(--border-width) solid var(--color-border); }
.bell-all { min-height: 36px; padding: 0 var(--space-2); border: 0; background: none; color: var(--color-primary); font: inherit; font-size: var(--font-size-caption); font-weight: var(--font-weight-bold); cursor: pointer; }
.bell-list { max-height: min(60vh, 420px); overflow-y: auto; }
.bell-item { display: grid; gap: 2px; padding: var(--space-2) var(--space-3); border-bottom: var(--border-width) solid var(--color-border); color: var(--color-text); text-decoration: none; }
.bell-item:hover, .bell-item:focus-visible { background: var(--color-primary-soft); }
.bell-item.is-new { background: var(--color-surface-alt); }
.bell-item.is-new .bell-title::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--color-primary); vertical-align: middle; }
.bell-title { font-weight: var(--font-weight-bold); overflow-wrap: anywhere; }
.bell-body { font-size: var(--font-size-caption); color: var(--color-text-muted); overflow-wrap: anywhere; }
.bell-time { font-size: 12px; color: var(--color-text-muted); }
.bell-empty { margin: 0; padding: var(--space-4) var(--space-3); color: var(--color-text-muted); text-align: center; }
.bell-foot { display: block; padding: var(--space-2) var(--space-3); font-size: var(--font-size-caption); color: var(--color-primary); text-align: center; }
@media (max-width: 420px) { .bell-pop { position: fixed; left: 12px; right: 12px; top: 64px; width: auto; } }

/* FIX46 프로필 사진 동그라미(사진이 없으면 이름 첫 글자). 머리말·마이페이지·채팅방·채팅 목록·회원 카드 공통 */
.m-ava { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; background: var(--color-primary); color: var(--color-on-primary); font-size: 0.9375rem; font-weight: var(--font-weight-heavy); line-height: 1; }
.m-ava--lg { flex-basis: 64px; width: 64px; height: 64px; font-size: 1.5rem; }
.m-ava-box { overflow: hidden; }
.m-ava-box img, .m-hello__ava img, #photo-ava img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.m-ava-box.has-img, .m-hello__ava.has-img { background: var(--color-surface-alt); }
.m-photo { display: flex; gap: var(--space-3); align-items: center; margin-bottom: var(--space-4); }
.m-photo__acts { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; min-width: 0; }
.m-photo__acts .m-help, .m-photo__acts .m-ok, .m-photo__acts .m-err { flex-basis: 100%; margin: 0; }
.m-photo__pick { cursor: pointer; }
.m-photo:focus-within .m-photo__pick { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.m-card-dlg__head { display: flex; gap: var(--space-3); align-items: center; margin-bottom: var(--space-3); }
.m-card-dlg__head h2 { margin: 0; font-size: 1.25rem; overflow-wrap: anywhere; }
.m-card-dlg__facts { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--space-3); margin: 0 0 var(--space-3); }
.m-card-dlg__facts dt { color: var(--color-text-muted); }
.m-card-dlg__facts dd { margin: 0; font-weight: var(--font-weight-bold); }
.m-card-dlg .m-btn { margin-top: var(--space-2); margin-right: var(--space-2); }

/* FIX46 💬 채팅 단추(🔔 옆). 좁은 휴대폰(400px 이하)에서는 [마이페이지] 글자를 화면에서만 감춘다(읽어 주기·누르기는 그대로, 동그라미 사진이 단추) */
a.chat-btn { text-decoration: none; color: inherit; }
@media (max-width: 400px) {
  .acct { gap: 6px; }
  .acct-btn { padding: 0 var(--space-1); }
  .acct-btn .acct-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* 11/08 대표: 🔔·💬 이모지 대신 사이트 선 아이콘 + 유리 동그라미 단추 */
.bell-btn { border: 0; background: rgba(255, 255, 255, .78); color: var(--color-forest, #1b3a3d);
  box-shadow: 0 0 0 1px rgba(27, 58, 61, .12), 0 4px 12px -4px rgba(27, 58, 61, .25); transition: background .2s, color .2s, box-shadow .2s, transform .2s; }
.bell-btn:hover, .bell-btn[aria-expanded="true"] { background: var(--color-forest, #1b3a3d); color: #eef1f1; box-shadow: 0 8px 18px -6px rgba(27, 58, 61, .5); transform: translateY(-1px); }
.bell-icon { display: inline-grid; place-items: center; width: 22px; height: 22px; }
.bell-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bell-icon svg .dot { fill: currentColor; stroke: none; }
.chat-btn:hover .bell-icon svg .dot { animation: hd-dot 1s ease-in-out infinite; }
.chat-btn:hover .bell-icon svg .dot:nth-of-type(2) { animation-delay: .15s; } .chat-btn:hover .bell-icon svg .dot:nth-of-type(3) { animation-delay: .3s; }
@keyframes hd-dot { 50% { transform: translateY(-1.5px); } }
.bell-btn:not(.chat-btn):hover .bell-icon { animation: hd-swing .7s ease-in-out; transform-origin: 50% 12%; }
@keyframes hd-swing { 25% { transform: rotate(12deg); } 55% { transform: rotate(-9deg); } 80% { transform: rotate(4deg); } }
.bell-badge { top: -3px; right: -3px; min-width: 19px; height: 19px; line-height: 19px; font-size: 11px; background: var(--color-terracotta, #208787); box-shadow: 0 0 0 2px #f5fafa; animation: hd-pop .35s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes hd-pop { from { transform: scale(.4); } }
@media (prefers-reduced-motion: reduce) { .bell-btn .bell-icon, .bell-badge, .chat-btn .dot { animation: none !important; } }