.mansion-message-dialog { box-sizing: border-box; width: min(460px,calc(100% - 32px)); max-height: calc(100dvh - 36px); overflow: auto; padding: 26px 24px; border: 1px solid #b6975c; border-radius: 18px; background: #14232b; color: #f0e6d4; box-shadow: 0 20px 70px #0008; font: 16px/1.8 system-ui,sans-serif; overflow-wrap: anywhere; }
.mansion-message-dialog::backdrop { background: #030913bd; }
.mansion-message-dialog h2 { font-size: clamp(22px,6vw,27px); line-height: 1.5; }
.message-content { white-space: pre-wrap; overflow-wrap: anywhere; }
.message-eyebrow,.message-hint { color: #c9b68a; font-size: 13px; }
.message-status { color: #e8cc99; font-size: 14px; }
.mansion-message-dialog button { display: block; box-sizing: border-box; width: 100%; min-height: 48px; padding: 12px; margin: 12px 0; border: 1px solid #8d958e; border-radius: 10px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.mansion-message-dialog .message-primary { background: #deca99; color: #17242b; border-color: #deca99; font-weight: 700; }
.mansion-message-dialog button:disabled { opacity: .5; }
.mansion-message-dialog a { color: #e2c78c; display: inline-block; padding: 10px 0; font-size: 14px; }
/* 본문 속 주소(2026-10-02) — 글 사이에 끼는 링크라 줄 안에 그대로 둔다. */
:is(.mansion-message-dialog,.board-body) a.message-link { display: inline; padding: 0; font-size: inherit; color: #e8cf96; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.mansion-message-dialog :focus-visible { outline: 3px solid #efdba9; outline-offset: 3px; }
.mansion-lunel-award { box-sizing: border-box; width: min(360px,calc(100% - 32px)); padding: 30px 24px 24px; border: 1px solid #c4a76d; border-radius: 20px; background: radial-gradient(circle at 50% 34%,#28434a,#14232b 70%); color: #f0e6d4; box-shadow: 0 20px 70px #0009; text-align: center; font: 16px/1.5 system-ui,sans-serif; }
.mansion-lunel-award::backdrop { background: #030913c9; }
.mansion-lunel-award h2 { margin: 12px 0 20px; font-size: clamp(20px,5.4vw,25px); line-height: 1.5; }
.mansion-lunel-award button { min-height: 48px; width: 100%; border: 1px solid #deca99; border-radius: 10px; background: #deca99; color: #17242b; font: 700 16px system-ui,sans-serif; cursor: pointer; }
.mansion-lunel-award :focus-visible { outline: 3px solid #fff0b8; outline-offset: 3px; }
.lunel-award-burst { position: relative; width: 128px; height: 128px; margin: 4px auto 0; display: grid; place-items: center; }
.lunel-award-burst::before { content: ''; position: absolute; inset: 12px; border-radius: 50%; background: radial-gradient(circle,#9af2d977,#9af2d900 70%); }
.lunel-award-burst img { position: relative; width: 96px; height: 96px; object-fit: contain; filter: drop-shadow(0 0 12px #91edd7aa); }
.lunel-award-burst i { position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: #e9d18c; opacity: 0; transform: rotate(calc(var(--i) * 30deg)) translateY(-38px); }
.lunel-award-burst.bursting img { animation: lunel-pop 700ms cubic-bezier(.2,1.5,.3,1) both; }
.lunel-award-burst.bursting i { animation: lunel-spark 850ms ease-out both; animation-delay: 120ms; }
@keyframes lunel-pop { 0% { transform: scale(.38); opacity: .2; } 60% { transform: scale(1.28); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes lunel-spark { 0% { opacity: 0; transform: rotate(calc(var(--i) * 30deg)) translateY(-25px) scale(.3); } 25% { opacity: 1; } 100% { opacity: 0; transform: rotate(calc(var(--i) * 30deg)) translateY(-66px) scale(1); } }
@media (prefers-reduced-motion: reduce) { .lunel-award-burst.bursting img,.lunel-award-burst.bursting i { animation: none; } .lunel-award-burst i { display: none; } }
/* /support 게시판(2026-09-25) — 탭 · 한 줄 목록 · 펼쳐 읽기 */
.support-page main { max-width: 760px; }
.board-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.board-brand { display: inline-flex; align-items: center; gap: 8px; color: #e8dcc0; text-decoration: none; font-size: 15px; }
.board-brand img { border-radius: 8px; }
.support-nav { display: flex; flex-wrap: wrap; gap: 14px; font-size: 14px; }
.support-nav a,.support-reply a { color: #dfc78f; }
.support-page h1 { margin: 0 0 4px; font-size: clamp(22px, 5.6vw, 28px); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.board-tabs { display: flex; gap: 0; margin: 14px 0 0; border-bottom: 1px solid #53656a; }
.board-tabs button { flex: 1; min-height: 48px; padding: 10px 12px; border-radius: 10px 10px 0 0; background: transparent; color: #b9c7c6; font-size: 16px; border-bottom: 3px solid transparent; }
.board-tabs button[aria-selected="true"] { color: #f4ead3; font-weight: 700; border-bottom-color: #deca99; background: #1a2e33; }
.tab-count { margin-left: 6px; padding: 0 7px; border-radius: 999px; background: #3a4d52; color: #e0e6e4; font-size: 12px; font-weight: 600; }
.tab-count:empty { display: none; }
.tab-count.unread { background: #e0655a; color: #fff; }
.board-head, .board-line { display: grid; grid-template-columns: 44px 84px minmax(0, 1fr) 92px 84px; gap: 8px; align-items: center; }
.board-head { padding: 10px 12px; border-bottom: 1px solid #53656a; color: #9fb0b1; font-size: 12px; text-align: center; }
.board-head span:nth-child(3) { text-align: left; }
.board-list { border-bottom: 1px solid #53656a; }
.board-row { border-bottom: 1px solid #2f4246; }
.board-row:last-child { border-bottom: 0; }
.board-line { width: 100%; min-height: 52px; padding: 10px 12px; border-radius: 0; background: transparent; color: #f0ead9; text-align: center; font-size: 14px; }
.board-line:hover, .board-row.open .board-line { background: #1a2e33; filter: none; }
.board-line:focus-visible { outline: 2px solid #efdba9; outline-offset: -2px; }
.board-no, .board-date { color: #9fb0b1; font-size: 13px; font-variant-numeric: tabular-nums; }
.board-cat { justify-self: center; padding: 1px 8px; border: 1px solid #5f7478; border-radius: 999px; color: #cfdad9; font-size: 12px; white-space: nowrap; }
.board-title { text-align: left; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board-state { justify-self: center; font-size: 12px; font-weight: 700; white-space: nowrap; }
.board-state.done { color: #9fb0b1; font-weight: 500; }
.board-state.wait { color: #e8cc99; }
.board-state.new { color: #ff9d92; }
.board-body { padding: 4px 16px 18px 64px; background: #16282d; overflow-wrap: anywhere; }
.board-body small { color: #b9c7c6; font-size: 12px; }
.board-body p { white-space: pre-wrap; line-height: 1.8; margin: 8px 0 12px; }
.board-body > button { min-height: 44px; padding: 10px 18px; background: #deca99; color: #17242b; }
.support-reply { margin-top: 6px; padding: 12px 14px; border-left: 3px solid #d7bd85; border-radius: 0 8px 8px 0; background: #1e3338; }
.support-reply p { margin: 6px 0; }
.board-empty { margin: 0; padding: 28px 12px; color: #b9c7c6; text-align: center; font-size: 14px; }
.support-pager { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; margin: 14px 0 6px; color: #b9c7c6; font-size: 13px; }
.support-pager button { min-height: 40px; padding: 8px 14px; background: #2a3d42; color: #e8e0cc; }
#support-compose { margin: 14px 0; }
#support-compose summary { display: flex; align-items: center; justify-content: center; margin-left: auto; width: fit-content; min-height: 44px; padding: 0 18px; border-radius: 9px; background: #deca99; color: #17242b; font-weight: 700; cursor: pointer; list-style: none; }
#support-compose summary::-webkit-details-marker { display: none; }
#support-compose summary::before { content: '✎'; margin-right: 6px; }
#support-compose[open] summary { background: #2a3d42; color: #e8e0cc; }
#support-compose[open] summary::before { content: '×'; }
#support-compose .support-form { margin-top: 12px; padding: 4px 16px 16px; border: 1px solid #53656a; border-radius: 12px; background: #16282d; }
.compose-lead { margin: 14px 0 0; color: #e8dcc0; font-size: 15px; }
.support-form label { display: block; margin: 16px 0; line-height: 1.8; }
.support-form input,.support-form select,.support-form textarea { box-sizing: border-box; width: 100%; font: inherit; background: #14282d; color: #f0ead9; padding: 12px; border: 1px solid #697b7c; border-radius: 8px; }
.support-form textarea { min-height: 160px; resize: vertical; line-height: 1.8; }
.support-form button { width: 100%; background: #deca99; color: #17242b; font-weight: 700; }
.board-refresh { display: block; margin: 18px auto 0; min-height: 40px; padding: 8px 16px; background: transparent; border: 1px solid #5f7478; color: #cfdad9; font-size: 14px; }
@media (max-width: 560px) {
  .board-head { display: none; }
  .board-line { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "cat title state" "no date date"; row-gap: 3px; text-align: left; padding: 12px 6px; }
  .board-cat { grid-area: cat; } .board-title { grid-area: title; } .board-state { grid-area: state; }
  .board-no { grid-area: no; justify-self: start; font-size: 12px; } .board-no::before { content: 'No.'; }
  .board-date { grid-area: date; font-size: 12px; }
  .board-body { padding: 4px 12px 16px; }
}
/* 편지 모듈(2026-09-29) — 운영 화면이 편지마다 고른 단추: 카카오톡 채널 추가 · 점사 메일 받기. 팝업과 편지함(/support)에서 같이 쓴다. */
:is(.mansion-message-dialog,.board-body) .message-modules { display: grid; gap: 10px; margin: 14px 0 4px; }
:is(.mansion-message-dialog,.board-body) .message-module { display: flex; align-items: center; gap: 12px; box-sizing: border-box; width: 100%; min-height: 60px; margin: 0; padding: 10px 14px; border-radius: 12px; text-align: left; text-decoration: none; font: inherit; line-height: 1.4; cursor: pointer; }
:is(.mansion-message-dialog,.board-body) a.message-kakao { background: #fee500; color: #191600; border: 1px solid #f2d800; font-size: inherit; }
:is(.mansion-message-dialog,.board-body) .message-kakao-symbol { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: #fff7b8; }
:is(.mansion-message-dialog,.board-body) .message-kakao-symbol img { width: 26px; height: auto; }
:is(.mansion-message-dialog,.board-body) .message-module-copy { display: grid; gap: 2px; flex: 1; min-width: 0; }
:is(.mansion-message-dialog,.board-body) .message-module strong { font-size: 16px; }
:is(.mansion-message-dialog,.board-body) .message-module small { font-size: 12.5px; opacity: .85; overflow-wrap: anywhere; }
:is(.mansion-message-dialog,.board-body) .message-module-arrow { flex: none; font-size: 18px; }
:is(.mansion-message-dialog,.board-body) button.message-mail { display: grid; gap: 3px; border: 1px solid #deca99; background: #1d2f38; color: #f3e6c6; }
:is(.mansion-message-dialog,.board-body) button.message-mail.done { border-color: #7fb79f; opacity: 1; }
:is(.mansion-message-dialog,.board-body) .message-module-done { margin: 0; color: #9fd3bd; font-size: 14px; }