/* User modal — colors are inherited only from the global theme variables.
   사용자 정보(캐릭터설정 스타일 150x150 아바타+200x40 배너 좌열 / 이름·바이오
   컨텐츠 영역 우열) + 활동(캐릭터 상세와 공유하는 .profile-tabs 가로탭) 2단 구성. 창 자체는
   이제 로그인/가입/로딩 상태에서도 크기가 바뀌지 않는다(is-register 높이
   전환 삭제) — 그 상태들은 .user-guest-overlay가 대시보드 위를 덮는
   오버레이로 옮겨갔기 때문. */
/* 예전엔 이 창이 리사이즈 불가(fixedSize:true, 항상 860x560)였다 — 이제 다른
   창처럼 자유롭게 크기 조절이 된다(user.js의 fixedSize 제거). min-width/
   min-height만 남겨 아바타·활동 탭 레이아웃이 깨지기 전에 최소 크기를
   보장한다. 좁아졌을 때의 실제 배치는 .is-narrow(user.js의 ResizeObserver)가
   담당 — 아래 내려가서 확인. */
.window[data-root="user"]{min-width:360px;min-height:360px;}
/* 다른 모달과 같은 기본 .window 배경/블러를 그대로 쓴다 — 각 패널(profile-info-content/
   배너/활동 탭 등)이 필요한 곳마다 자기 System C 배경을 따로 입힌다.
   padding만 0으로 둬 profile-body가 자체 14px 패딩을 이중으로 겹치지 않게 한다.
   overflow는 예전엔 hidden이었다 — 창이 항상 860x560 고정이라 스크롤이 필요
   없다는 전제였는데, 이제 리사이즈로 창이 그보다 작아질 수 있어 hidden이면
   휠 스크롤 자체가 안 먹고(스크롤바 UI로 scrollTop을 직접 옮기는 것만 됨) 맨
   아래가 그냥 잘려 안 보였다. 다른 창과 같은 기본값
   (overflow-y:auto/overflow-x:hidden, homepage.css .window-content)으로
   되돌린다. */
.window[data-root="user"] .window-content{padding:0;}
.user-modal-root{position:relative;width:100%;min-width:100%;max-width:100%;height:100%;min-height:100%;box-sizing:border-box;}
.user-modal-root [hidden]{display:none!important}
.user-loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;text-align:center}
.user-loading-state p{margin:0}
.user-loading-spinner{display:block;flex:0 0 auto;width:28px;height:28px;box-sizing:border-box;border:2px solid rgba(var(--system-c-rgb), var(--system-c-alpha))!important;border-top-color:var(--focus-color)!important;border-radius:50%;animation:user-spinner 700ms linear infinite}
@keyframes user-spinner{to{transform:rotate(360deg)}}

/* 비로그인 오버레이 — 기존 프로필을 흐리게 덮고, 확인창 형태의 로그인/가입 카드는
   System C 컨텐츠 배경·폰트·테두리를 따른다. 배경색은 윈도우 테마 - 컨텐츠 bg
   (--system-c-content-rgb)를 따르되, 투명도는 테마의 content-alpha와 무관하게
   .80 고정 — backdrop-filter(blur)가 안 먹는 환경(구형 webview 등)에서도
   뒤 텍스트가 읽히면 안 되니 blur 없이도 이 자체로 가림이 되게 한다. */
.user-guest-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(var(--system-c-content-rgb), .80)!important;backdrop-filter:blur(18px) saturate(1.08);-webkit-backdrop-filter:blur(18px) saturate(1.08);}
.user-guest-overlay .confirm-dialog{box-sizing:border-box;background:rgba(var(--system-c-content-rgb), var(--system-c-content-alpha))!important;border:2px solid rgba(var(--system-c-content-border-rgb), var(--system-c-content-border-alpha))!important;color:var(--system-c-font-color)!important;}
.user-auth-panel{display:flex;flex-direction:column;justify-content:center;width:100%;max-width:300px;padding:22px 24px;}
.user-auth-heading{
    margin-bottom:15px;text-align:center
}
.user-auth-form{display:flex;flex-direction:column;gap:9px}

/* 로그인/가입/관리자 생성 마법사 공통 하단선 입력(placeholder=" " 트릭) — 예전엔
   박스형 .user-auth-field였는데 세 폼 다 이 스타일로 옮겨서 그 규칙은 삭제.
   라벨은 기본적으로 입력 위에 겹쳐 있다가, 포커스되거나
   값이 있으면(:not(:placeholder-shown)) 위로 뜬다 — JS 없이 CSS만으로 동작. */
.auth-field{position:relative;padding-top:16px;}
.auth-input{
    width:100%;box-sizing:border-box;border:0;border-bottom:1px solid rgb(0 0 0 / 30%);
    background:transparent;outline:none;font-size:14px;line-height:1.4;
    padding:4px 20px 6px 0;color:var(--system-c-font-color);
}
.auth-field-password .auth-input{padding-right:44px;}
.auth-input:focus{border-bottom:2px solid var(--focus-color);padding-bottom:5px;}
/* 이 앱은 Edge/WebView2 크롬이라 type=password 입력에 브라우저 자체 "표시" 눈
   아이콘(::-ms-reveal)이 기본으로 붙는다 — 우리 auth-toggle-pw와 겹쳐 눈이
   두 개로 보이던 원인. 우리 버튼만 남기고 네이티브 것은 끈다. */
.auth-input::-ms-reveal,
.auth-input::-ms-clear{display:none;}
.auth-label{
    position:absolute;left:0;top:20px;font-size:14px;color:var(--system-c-desc-color);
    pointer-events:none;transition:top .15s ease,font-size .15s ease,color .15s ease;
}
.auth-input:focus + .auth-label,
.auth-input:not(:placeholder-shown) + .auth-label{
    top:0;font-size:11px;
}
.auth-input:focus + .auth-label{color:var(--focus-color);}
/* bottom 기준 — .auth-field는 padding-top만 있고 아래엔 input 하나뿐이라
   필드 바닥이 곧 input의 테두리선이다. top 값으로 맞추면 라벨 유무에 따라
   흔들리니, 항상 input 자체 높이 안에서 수직 중앙에 오도록 bottom으로 고정. */
.auth-clear,.auth-toggle-pw{
    position:absolute;bottom:4px;width:22px;height:22px;border:0;background:transparent;
    padding:0;display:none;align-items:center;justify-content:center;cursor:pointer;
    color:var(--system-c-desc-color);
}
.auth-clear{right:0;}
.auth-toggle-pw{right:24px;}
.auth-input:not(:placeholder-shown) ~ .auth-clear{display:flex;}
.auth-field-password .auth-input:not(:placeholder-shown) ~ .auth-toggle-pw{display:flex;}
.auth-clear:hover,.auth-toggle-pw:hover{color:var(--focus-color);}
/* 비밀번호가 보이는 중(input type=text)이면 눈 아이콘을 포커스색으로 강조만
   한다 — 전엔 사선을 얹었는데 바로 옆 지우기(×)와 겹쳐 보여 "버튼이 두
   개"로 보인다는 피드백이 있었다. 아이콘 모양은 그대로 두고 색으로만 상태 표시. */
.auth-toggle-pw.is-revealed{color:var(--focus-color);}

.user-auth-message{min-height:13px;margin:0;color:var(--system-c-desc-color);line-height:1.4;text-align:center}
.user-primary-button,.user-link-button{
    width:100%;border-radius:8px;cursor:pointer;
}
.user-primary-button
{
    height:34px;
    border:1px solid var(--focus-color);
    font-weight:700
}
.user-link-button{height:27px;border:0 solid transparent;text-decoration:none}

/* isolation:isolate은 .profile-card를 그 자체로 새 스태킹 컨텍스트 루트로 만들어,
   아래에서 아바타에 주는 z-index가 전역 window z-index 체계(--z-window 등,
   homepage.css)와는 완전히 무관하게 이 카드 내부에서만 비교되도록 범위를 좁힌다. */
.profile-card{width:100%;min-width:100%;max-width:100%;height:100%;box-sizing:border-box;display:flex;flex-direction:column;align-items:stretch;background:transparent!important;isolation:isolate;}
/* window-content가 스크롤을 담당하므로(위) 여기는 세로로 쌓기만 한다. */
/* ==========================================================================
   사용자 정보 — 왼쪽(아바타 150x150 + 배너 200x40) / 오른쪽(이름·바이오를
   담은 컨텐츠 영역). 두 열 높이를 정확히 맞춘다(요청): 아바타(150) +
   gap(8) + 배너(40) = 198px.
   ========================================================================== */
/* 배너 200x40 슬롯 — .profile-banner(버튼, 보기모드 disabled/수정모드 클릭시
   에디터 오버레이)와 .profile-banner-link(<a>, 배너가 있고 보기모드일 때만
   보여서 실제 링크로 이동)가 같은 자리를 번갈아 차지한다(user.js가 hidden
   토글). 둘 다 똑같은 박스로 보이게 스타일을 공유한다. */
.profile-banner, .profile-banner-link{
  box-sizing: border-box;
  width: 200px;
  height: 40px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(var(--system-c-content-border-rgb), var(--system-c-content-border-alpha))!important;
  color: var(--system-c-desc-color)!important;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
/* background(shorthand)!important를 쓰면 background-image까지 초기화돼(shorthand는
   지정 안 한 서브 속성도 같이 리셋) user.js가 .profile-banner-link에 인라인으로
   넣는 background-image가 안 보이는 버그가 있었다 — background-color(longhand)로
   바꿔 background-image는 건드리지 않게 한다. */
.profile-banner{background-color: rgba(var(--system-c-content-rgb), var(--system-c-content-alpha));cursor:default;}
.profile-banner-link{background-color: rgba(var(--system-c-content-rgb), var(--system-c-content-alpha));}
.profile-banner:not(:disabled){cursor:pointer;}
.profile-banner:disabled{opacity:1;}
.profile-banner img{width:100%;height:100%;object-fit:cover;display:block;}
.profile-banner-empty{font-size:11px;padding:0 8px;text-align:center;line-height:1.3;}

/* -------------------- 오른쪽: 이름·바이오 컨텐츠 영역 -------------------- */
/* 요청대로 이름@아이디/바이오 영역 전체를 System C 박스로 감싼다. */
.profile-edit-message{flex:0 0 100%;min-height:12px;margin:0 0 2px;line-height:1.4;text-align:right;color:var(--system-c-desc-color)}
.profile-edit-message.is-error{color:var(--focus-color)}
.profile-edit-message:empty{display:none}
.small-btn{height:27px;padding:0 10px;border:0px solid rgba(var(--system-c-rgb), var(--system-c-alpha));border-radius:7px;
    cursor:pointer}

/* 이름과 한 줄에(요청) — 이름보다 눈에 덜 띄게 10px로 작게, 설명 폰트색. */
.profile-login-id{
    flex: 0 1 auto;
    min-width: 0;
    line-height: 1.3;
    color: var(--system-c-desc-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 계정 삭제 확인창의 비밀번호 입력칸/에러 메시지. */
.delete-account-password-field{width:100%;height:30px;margin:10px 0;}
.delete-account-message{min-height:13px;margin:0 0 8px;line-height:1.4;text-align:center;color:var(--system-c-desc-color)}
.delete-account-message.is-error{color:var(--focus-color)}
.delete-account-message:empty{display:none}

/* 목록 그리드(.grid)처럼 auto-fill로 컨테이너 폭에 따라 열 수가 바뀐다.
   masonry span 계산(user.js layoutActivityList)은 열 수와 무관해 그대로 동작. */
/* 목록 그리드처럼 auto-fill로 폭에 맞춰 열 수가 바뀌되, 한 줄 최대 5개.
   그 이상 폭이 남으면 열을 늘리지 않고 카드 자체를 넓힌다
   (min track = max(200px, "정확히 5열일 때의 한 열 폭")). gap 3px × 4 = 12px. */
.activity-list{box-sizing:border-box;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(max(230px,calc((100% - 12px) / 5)),100%),1fr));grid-auto-flow:row dense;grid-auto-rows:1px;align-items:start;gap:3px;padding:0;border:0!important;border-radius:0;background:transparent!important;backdrop-filter:none;-webkit-backdrop-filter:none;}
.activity-post{position:relative;box-sizing:border-box;width:100%;display:flex;flex-direction:column;gap:7px;margin:0;padding:10px;border:2px solid rgba(var(--system-c-content-border-rgb),var(--system-c-content-border-alpha))!important;border-radius:5px;background:rgba(var(--system-c-content-rgb),var(--system-c-content-alpha))!important;box-shadow:0 0 5px -2px rgba(0,0,0,.14);cursor:pointer;}
.activity-post.is-activity-entering{animation:activity-rise-in .24s ease-out both;}
@keyframes activity-rise-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
/* 알림 탭 미읽음 표시 — activityCardHTML(user.js)이 item.unread일 때만 붙인다. */
.activity-post.is-unread{border-color:rgba(var(--focus-rgb), .5)!important;}
.activity-post.is-unread .activity-title{color:var(--focus-color);}
.activity-menu-title{display:flex;align-items:center;gap:5px;color:var(--system-c-desc-color)!important;}
.activity-menu-icon{width:14px;height:14px;display:grid;place-items:center;flex:0 0 auto;}
.activity-menu-icon svg,.activity-menu-icon img{width:100%;height:100%;display:block;object-fit:contain;fill:none;stroke:currentColor;stroke-width:1.8;}
.activity-thumb{display:block;width:100%;height:auto;border:0;border-radius:4px;object-fit:cover;}
.activity-post[data-type="character"] .activity-thumb{width:70%;aspect-ratio:1;margin:4px auto;border-radius:50%;}
.activity-title{font-weight:700;color:var(--system-c-title-color)}
/* 내가 쓴 댓글은 프로필 한마디(.profile-bio)와 같은 말풍선 폼으로 감싸고
   focus-color 테두리로 강조한다. */
/* 테두리 색은 .focus-border 유틸리티가 담당한다(광역 * {border-color …!important}에
   지지 않도록) — 여기선 굵기/모양만. */
.activity-comment{margin-top:7px;padding:7px 10px;border:1px solid;border-radius:14px 14px 14px 4px;background:rgba(var(--system-c-content-rgb),var(--system-c-content-alpha))!important;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.4;color:var(--system-c-font-color);}
/* 댓글 작성 시각 — 말풍선 우측 하단. */
.activity-comment-time{display:block;margin-top:3px;text-align:right;font-size:.82em;line-height:1;color:var(--system-c-desc-color);}
.activity-unlike{position:absolute;right:7px;bottom:5px;width:28px;height:28px;padding:0;border:0;display:grid;place-items:center;cursor:pointer;}
.activity-empty{grid-column:1/-1;padding:24px;text-align:center;color:var(--system-c-desc-color);}
.activity-loading{min-height:120px;display:grid;place-items:center;}
.activity-loading.is-more{min-height:54px;}
@media (prefers-reduced-motion:reduce){.activity-post.is-activity-entering{animation:none;}}

/* ==========================================================================
   좁은 창(.is-narrow, user.js의 ResizeObserver가 토글) — 이 창은 자유롭게
   리사이즈되므로 뷰포트 기준 @media가 아니라 settings.js/character.js와 같은
   패턴으로 창 자체의 실제 폭을 관찰해야 한다. 왼쪽 열(200px 고정) 옆에
   이름/바이오 컨텐츠 영역이 찌그러지기 시작하는 폭을 기준으로 삼는다
   (user.js의 USER_NARROW_BREAKPOINT).
   ========================================================================== */
/* 캐릭터 상세과 같은 3:4 프로필 카드 + 우측 활동 영역. 사용자 전용 입력과
   배너 동작은 유지하고 배치만 공통 구조에 맞춘다. 창 폭은 고정하지 않고
   .is-narrow 전환에 맡긴다. */
.user-modal-root .profile-detail-main{max-width:none;}
.profile-banner-region{position:relative;align-self:center;width:200px;height:40px;box-sizing:border-box;padding:0;border:0!important;background:transparent!important;}
.profile-banner,.profile-banner-link{width:100%;height:100%;}
.profile-banner:not(:disabled){position:relative;overflow:hidden;}
.profile-banner-remove-overlay{position:absolute;z-index:3;top:0;right:0;bottom:0;width:44px;display:grid;place-items:center;padding:0;border:0;border-radius:0 6px 6px 0;background:rgba(0,0,0,.58)!important;color:#fff!important;cursor:pointer;opacity:0;transition:opacity .15s;}
.profile-banner-remove-overlay[hidden]{display:none!important;}
.profile-banner-region:hover .profile-banner-remove-overlay,.profile-banner-remove-overlay:focus-visible{opacity:1;}
@media (hover:none){.profile-banner-remove-overlay{opacity:1;}}
.profile-banner-link-field{align-self:center;width:200px;display:flex;align-items:center;}
.profile-banner-link-field[hidden]{display:none!important;}
.profile-banner-link-input{height:27px;}
.profile-banner-link-input.content-input-box{border-radius:5px!important;}
.profile-card-banner{position:relative;z-index:4;grid-area:3/1;box-sizing:border-box;width:100%;display:flex;align-items:center;gap:10px;padding:0 0 0 12px;border-radius:12px;background:rgba(var(--system-c-content-rgb),var(--system-c-content-alpha))!important;}
.profile-card-banner>strong{flex:0 0 auto;font-weight:400;color:var(--system-c-title-color)!important;}
.profile-card-banner-content{min-width:0;margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:0;}
.profile-card-actions{position:relative;z-index:4;align-self:flex-end;display:flex;justify-content:flex-end;gap:5px;margin-top:-5px;padding:0;background:transparent!important;}
.activity-list{box-sizing:border-box;min-height:0;}
/* 공개 프로필도 활동 탭을 보여주므로(수정만 불가) 레이아웃은 본인 프로필과 동일.
   예전의 "카드만 240px 가운데" 규칙은 제거 — 좁은 창에서 좌우 여백을 만들었다. */

/* 좁은 창 레이아웃 접힘은 profile.css의 @container profile-detail(공통).
   아래는 그 폭에서 user.js가 배너/계정 블록을 카드(.profile-info-right) 안으로
   옮긴 뒤에만 의미가 있는 후처리라 .is-narrow(JS 토글) 키를 유지한다. */
.user-modal-root.is-narrow .profile-info-right>.profile-card-banner{flex-direction:column;align-items:flex-start;gap:5px;margin:16px 0 0;padding:0;border-radius:0;background:transparent!important;}
.user-modal-root.is-narrow .profile-info-right>.profile-card-banner .profile-card-banner-content{margin-left:0;align-items:flex-start;}
.user-modal-root.is-narrow .profile-info-right>.profile-card-banner>.profile-created-at{right:0;bottom:0;}
.user-modal-root.is-narrow .profile-info-right>.profile-card-actions{align-self:auto;justify-content:space-between;align-items:flex-end;margin-top:8px;}
.user-modal-root.is-narrow .profile-info-right>.profile-card-actions button:first-child{padding-left:0;}
/* 가입일이 로그아웃/계정삭제 줄로 들어오면 절대배치 해제하고 우측 하단 정렬. */
.user-modal-root.is-narrow .profile-card-actions>.profile-created-at{position:static;right:auto;bottom:auto;margin-left:auto;}