#family-management-dialog { width: min(680px, calc(100% - 28px)); }
#family-management-dialog .category-settings-dialog-header { background: #fcfaf6; border-bottom-color: #eceee5; }
#family-management-dialog .category-settings-dialog-header .eyebrow { color: #83957d; font-size: 11px; letter-spacing: .02em; }
#family-management-dialog .category-settings-dialog-scroll { background: #fcfaf6; }
.family-room-welcome { display: flex; align-items: center; gap: 18px; padding: 22px; margin-bottom: 26px; border: 1px solid #e0e8d8; border-radius: 22px; background: #eef5e9; }
.family-room-welcome > img { flex: 0 0 84px; width: 84px; height: 84px; object-fit: contain; }
.family-room-welcome > div { min-width: 0; }
.family-room-welcome h3 { margin: 0; color: #365340; font-size: 20px; overflow-wrap: anywhere; }
.family-room-welcome p { margin: 7px 0 0; color: #7d8979; font-size: 12px; line-height: 1.7; }
.family-room-count { display: inline-block; margin-top: 10px; font-size: 11px; color: #527349; }
#family-management-dialog .settings-dialog-section-heading .eyebrow { display: none; }
#family-management-dialog .settings-dialog-section-heading h3 { color: #415342; font-size: 16px; }
#family-management-dialog .family-member-item { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 6px 14px; padding: 16px; border-color: #e7e9de; border-radius: 18px; background: #fff; }
.family-member-item > .family-member-avatar { grid-row: 1 / 3; display: flex; align-items: center; justify-content: center; width: 76px; height: 76px; border-radius: 20px; background: #f4f7ed; overflow: hidden; }
.family-member-avatar .family-character-image { width: 76px; height: 76px; object-fit: contain; }
.family-character-image[data-character="glasses"], .family-character-image[data-character="purple"] { transform: scale(1.3); }
#family-management-dialog .family-member-heading { flex-wrap: wrap; gap: 6px; }
#family-management-dialog .family-member-heading strong { color: #364a39; font-size: 15px; }
#family-management-dialog .family-role-badge { padding: 3px 7px; background: #f2f4ed; color: #819276; font-size: 10px; }
.family-member-self { color: #749c62; font-size: 10px; }
#family-management-dialog .family-member-copy .account-email { margin-top: 5px; font-size: 11px; color: #98a08e; overflow-wrap: anywhere; }
.family-member-actions { display: flex; align-items: center; gap: 12px; min-width: 0; }
.family-character-change { padding: 4px 0; border: 0; color: #739563; background: transparent; font-size: 11px; cursor: pointer; }
.family-member-manage { position: relative; margin-left: auto; }
.family-member-manage summary { cursor: pointer; list-style: none; color: #959d8d; font-size: 18px; padding: 0 8px; }
.family-member-manage summary::-webkit-details-marker { display: none; }
.family-member-manage .remove-connection { position: absolute; z-index: 2; right: 0; top: 100%; white-space: nowrap; background: #fff; border: 1px solid #ebe5df; border-radius: 10px; padding: 10px 14px; box-shadow: 0 8px 20px color-mix(in srgb, var(--theme-shadow-ink,rgb(56 81 57)) 7.059%, transparent); font-size: 11px; }
.family-character-picker { width:min(420px,calc(100% - 24px)); margin:auto; padding:0; border:1px solid var(--theme-line,#e5e9da); background:var(--theme-panel,#fff); overflow:hidden; }
.family-character-picker .category-settings-dialog-header { background:var(--theme-panel,#fff); }
.family-character-picker .category-settings-dialog-header h2 { font-size:18px; }
.family-character-picker .family-character-options { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.family-character-picker .family-character-option { padding:14px 8px; background:var(--theme-panel,#fff); border-color:var(--theme-line,#e8eadd); }
.family-character-picker .family-character-option:has(input:checked) { background:var(--theme-accent-soft,#eef5e5); border-color:var(--theme-accent,#8eac73); }
.family-character-picker .family-character-option strong { font-size:13px; color:var(--theme-ink,#586f4c); }
.family-character-picker .family-character-option small,.family-character-picker-title { color:var(--theme-muted,#7c8971); }
.family-character-picker-title { margin: 0 0 12px; color: #7c8971; font-size: 12px; }
.family-character-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; border: 0; margin: 0; padding: 0; }
.family-character-option { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 4px 10px; border: 1px solid #e8eadd; border-radius: 14px; background: #fcfcf7; cursor: pointer; min-width: 0; }
.family-character-option:has(input:checked) { border-color: var(--theme-accent,#8eac73); background: #eef5e5; box-shadow: inset 0 0 0 1px var(--theme-accent,#8eac73); }
.family-character-option:has(input:focus-visible) { outline: 3px solid var(--theme-accent,#b9cea3); outline-offset: 2px; }
.family-character-option:has(input:disabled) { cursor: wait; opacity: .65; }
.family-character-option input { position: absolute; opacity: 0; width: 1px; height: 1px; padding: 0; }
.family-character-option img { width: 64px; height: 64px; object-fit: contain; }
.family-character-option img[data-character="glasses"], .family-character-option img[data-character="purple"] { transform: scale(1.3); }
.family-character-option strong { font-size: 11px; color: #586f4c; text-align: center; }
.family-character-option small { font-size: 9px; color: #939d87; text-align: center; }
.family-character-save-status { margin: 10px 0 0; color: #7b985f; font-size: 11px; min-height: 1.5em; }
.family-character-save-status:empty { display:none; }
.family-character-save-status[data-kind="error"], #family-character-load-status { color: #bd6a60; }
#family-character-load-status { font-size: 12px; margin: 0 0 16px; }
#family-character-load-status button { color: inherit; font-size: inherit; margin-left: 8px; border: 0; background: transparent; text-decoration: underline; cursor: pointer; }
.family-character-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
#family-management-dialog .family-name-panel .eyebrow { display: none; }
#family-management-dialog .family-management-card { border: 1px solid #e7e9de; border-radius: 18px; box-shadow: none; }
#family-management-dialog .family-request-empty { padding: 14px 16px; border: 1px dashed #e2e7d6; color: #95a183; border-radius: 14px; background: transparent; }
#family-management-dialog .family-join-code-panel { margin-top: 28px; border: 1px solid #e2e7d6; border-radius: 20px; background: #f5f7ed; }
#family-management-dialog .family-join-code-panel .eyebrow { display: none; }
#family-management-dialog .family-join-code-panel h2 { color: #4d6245; font-size: 17px; }
#family-management-dialog .family-join-code-panel > .primary-button { background: #839d68; box-shadow: none; }
#family-management-dialog .settings-card-copy { font-size: 12px; line-height: 1.7; color: #929b87; }
#family-management-dialog .leave-family-section { padding: 0; margin-top: 20px; }
#family-management-dialog .leave-family-section summary { color: #a2a38f; font-size: 11px; cursor: pointer; }
#family-management-dialog .leave-family-section p { font-size: 11px; color: #959887; }
@container kkaebu (max-width: 599px){
  .family-room-welcome { padding: 17px; gap: 12px; }
  .family-room-welcome > img { flex-basis: 68px; width: 68px; height: 68px; }
  .family-room-welcome h3 { font-size: 18px; }
  #family-management-dialog .family-member-item { grid-template-columns: 64px minmax(0, 1fr); padding: 12px; gap: 5px 10px; }
  .family-member-item > .family-member-avatar { width: 64px; height: 64px; }
  .family-member-avatar .family-character-image { width: 64px; height: 64px; }
  .family-character-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .family-character-option small { font-size: 10px; }
}

/* A single bounded scroll surface keeps the last invitation action reachable. */
#family-management-dialog{width:min(620px,calc(100% - 24px));max-height:calc(100dvh - 24px);box-sizing:border-box;overflow:clip}
#family-management-dialog>.category-settings-dialog-shell{max-height:calc(100dvh - 24px);min-height:0;overflow:hidden}
#family-management-dialog .category-settings-dialog-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:14px 14px calc(24px + env(safe-area-inset-bottom));scroll-padding-bottom:24px}
#family-management-dialog .category-settings-dialog-header{padding:13px 16px}#family-management-dialog .category-settings-dialog-header .eyebrow{display:none}
#family-management-dialog .family-room-welcome{display:block;padding:0;margin:0 0 14px;border:0;background:transparent}
.family-room-identity{display:flex;align-items:center;gap:12px;width:100%;padding:0;border:0;text-align:left;background:transparent;color:var(--theme-ink,#365340);cursor:pointer}
.family-room-identity>img{width:56px;height:56px;flex:0 0 56px;object-fit:contain;border-radius:50%;background:var(--theme-accent-soft,#eef5e9)}.family-room-identity-copy{display:flex;flex-direction:column;min-width:0;gap:4px}.family-room-identity-copy>strong{font-size:19px;overflow-wrap:anywhere}.family-room-identity-copy>span{font-size:11px;color:var(--theme-muted,#7b897a)}.family-room-edit-hint{margin-left:auto;padding:9px;color:var(--theme-muted,#8a9a83)}.family-room-identity:disabled{opacity:1;cursor:default}.family-room-identity:disabled .family-room-edit-hint{display:none}
#family-management-dialog .settings-dialog-section{margin-top:16px}#family-management-dialog .settings-dialog-section-heading{margin-bottom:10px}
#family-members-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
#family-management-dialog .family-member-item{grid-template-columns:44px minmax(0,1fr);gap:6px 8px;padding:11px;border-radius:14px;margin:0;min-width:0}
#family-management-dialog .family-member-avatar{grid-row:1;width:44px;height:44px;border-radius:12px}#family-management-dialog .family-member-avatar img{width:44px;height:44px}
#family-management-dialog .family-member-copy{min-width:0}#family-management-dialog .family-member-heading{gap:3px 5px}#family-management-dialog .family-member-heading strong{font-size:12px;overflow-wrap:anywhere}
#family-management-dialog .family-role-badge{padding:1px 4px;font-size:9px}#family-management-dialog .family-member-copy .account-email{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;margin-top:3px}
#family-management-dialog .family-member-actions{grid-column:1/-1;gap:6px}#family-management-dialog .family-character-change{font-size:10px;padding:3px 0}#family-management-dialog .family-character-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}#family-management-dialog .family-character-option img{width:42px;height:42px}
#family-management-dialog .family-join-code-panel{margin-top:16px;padding:14px;border-radius:16px}#family-management-dialog .family-join-code-panel h2{font-size:16px}#family-management-dialog .settings-card-copy{margin:7px 0 10px;font-size:12px}
#family-management-dialog .join-code-result{padding:12px;margin:0 0 10px}#family-management-dialog .join-code-heading{gap:8px}#family-management-dialog #join-code-expiry{font-size:10px;margin:5px 0 10px}#family-management-dialog .family-invite-share-help{font-size:11px;line-height:1.5;margin:7px 0 10px}
#family-management-dialog .family-kakao-share-button{min-height:44px;padding:10px 6px;font-size:12px;white-space:nowrap}#family-management-dialog .join-code-actions{gap:6px}#family-management-dialog .join-code-actions button{min-height:35px;font-size:11px;padding:7px;white-space:normal}
#family-management-dialog #create-join-code-button{display:block;width:100%;max-width:100%;min-height:40px;white-space:normal;overflow-wrap:anywhere;margin:10px 0 0;padding:10px 12px;font-size:12px;line-height:1.5}
#family-management-dialog .family-invite-message-details{margin-top:10px;font-size:11px}#family-management-dialog .family-invite-message-details textarea{box-sizing:border-box;width:100%;max-width:100%}
.family-rename-shell{padding:22px}.family-rename-shell h2{font-size:19px;margin:0 0 18px}.family-rename-shell .family-name-form{display:block}.family-rename-shell input{box-sizing:border-box;width:100%}.family-rename-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
#family-management-dialog .family-access-card{padding:13px;margin-bottom:14px}
#family-management-dialog .family-offer-heading .eyebrow{display:none}
#family-management-dialog .family-access-card .family-offer-copy{font-size:12px;margin:7px 0}
#family-management-dialog .family-access-actions{margin-top:8px}
#family-management-dialog .family-access-actions>button{min-height:40px;padding:9px 10px;font-size:12px}
#family-management-dialog .family-access-details{margin-top:9px;padding-top:8px}
@container kkaebu (max-width:350px){#family-management-dialog .family-member-item{grid-template-columns:34px minmax(0,1fr);padding:8px;gap:5px}#family-management-dialog .family-member-avatar,#family-management-dialog .family-member-avatar img{width:34px;height:34px}.family-room-identity-copy>strong{font-size:17px}.family-access-card .family-offer-heading h3{font-size:18px}}