/* 사용자·캐릭터 공통 프로필 카드/레이아웃. 전용 영역은 data-profile-kind/only로만 전환한다.
   좁은 창 전환은 뷰포트가 아니라 창 자체 폭 기준이므로, 두 모달의 .window-content에
   같은 이름의 컨테이너를 두고 아래 @container profile-detail 로 함께 반응한다.
   (user.js의 .is-narrow 토글은 CSS로 못 하는 배너/계정 DOM 재배치 전용으로만 남는다.) */
.window[data-root="user"] .window-content,
.window[data-root="character"]:not([data-main="1"]) .window-content{container:profile-detail / size;}
.profile-body{position:relative;width:100%;max-width:100%;margin:0;padding:14px;box-sizing:border-box;display:flex;flex:1;min-width:0;min-height:0;flex-direction:column;align-self:stretch;gap:16px;}
.profile-detail-layout{width:100%;min-width:100%;max-width:100%;box-sizing:border-box;display:grid;grid-template-columns:minmax(280px,320px) minmax(480px,1fr);justify-content:stretch;align-items:start;gap:5px;}
.profile-sidebar{container-type:inline-size;position:sticky;top:14px;min-width:0;display:flex;flex-direction:column;gap:10px;}
.profile-panel{min-width:0;display:flex;flex-direction:column;align-items:center;gap:10px;}
.profile-info{--profile-background-color:#808080;--profile-background-image:none;position:relative;isolation:isolate;width:100%;display:grid;grid-template-columns:minmax(0,1fr);gap:0;overflow:hidden;border-radius:16px;background:transparent!important;}
.profile-info::before{content:'';position:relative;z-index:0;grid-area:1/1;width:100%;aspect-ratio:16/9;background-color:var(--profile-background-color);background-image:var(--profile-background-image);background-position:center;background-size:cover;background-repeat:no-repeat;}
.profile-background-trigger{position:relative;z-index:1;grid-area:1/1;width:100%;height:auto;aspect-ratio:16/9;border:0;background:transparent!important;pointer-events:none;}
.profile-info.is-editing .profile-background-trigger{pointer-events:auto;}
.profile-background-trigger.is-profile-drop-target{z-index:3;}
.profile-card-edit-actions{position:relative;z-index:6;grid-area:1/1;align-self:start;justify-self:end;margin:10px;}
.profile-card-edit-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:5px;max-width:min(260px,60cqw);}
.profile-card-edit-controls[hidden]{display:none!important;}
/* 인라인 수정 시 저장 옆에 오는 공개범위 컨트롤 — 저장/취소 버튼과 높이를 맞춘다. */
.profile-card-edit-controls .post-editor-visibility-select{height:27px;}
/* 배경(단색/이미지/제거) 컨트롤은 카드 좌상단에 세로로 쌓는다. */
.profile-background-actions{position:relative;z-index:5;grid-area:1/1;align-self:start;justify-self:start;display:flex;flex-direction:column;align-items:flex-start;gap:5px;margin:10px;}
.profile-background-actions[hidden]{display:none!important;}
.profile-background-actions>label{position:relative;display:grid;place-items:center;overflow:hidden;cursor:pointer;}
.profile-background-actions input[type="color"]{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;opacity:0;cursor:pointer;}
.profile-card-overlay{position:relative;z-index:2;grid-area:1/1;background:linear-gradient(to bottom,transparent 60%,rgba(0,0,0,.8) 100%);pointer-events:none;}
.profile-info-content{position:relative;z-index:4;grid-area:1/1;align-self:end;box-sizing:border-box;width:100%;display:flex;align-items:center;gap:15px;padding:12px;transform:translateY(50%);color:#fff!important;text-align:left;text-shadow:0 1px 3px rgba(0,0,0,.85);pointer-events:none;}
.profile-info-content .profile-avatar,.profile-info-content input,.profile-info-content textarea,.profile-info-content .profile-avatar-remove-btn{pointer-events:auto;}
/* 캐릭터 편집에서만 쓰는 "사진 제거" — 배경 제거 버튼과 같은 작은 텍스트 버튼(small-btn normal-button) 언어. */
.profile-avatar-remove-btn{flex:0 0 auto;}
.profile-avatar-remove-btn[hidden]{display:none!important;}
.profile-avatar{position:relative;z-index:1;flex:0 0 auto;width:20cqi;height:auto;aspect-ratio:1;margin:0;padding:0;border:0;border-radius:50%;overflow:hidden;background:transparent;cursor:default;}
.profile-avatar:not(:disabled){cursor:pointer;}
.profile-avatar:disabled{opacity:1;}
.profile-avatar-img{width:100%;height:100%;box-sizing:border-box;display:grid;place-items:center;border:0;border-radius:50%;overflow:hidden;clip-path:circle(50%);background-color:rgba(var(--system-c-content-rgb),var(--system-c-content-alpha))!important;background-position:center;background-size:cover;background-repeat:no-repeat;color:inherit!important;}
.profile-avatar-img svg{width:40px;height:40px;fill:none;stroke:currentColor;stroke-width:1.6;}
.profile-avatar-img svg.is-hidden-by-image{display:none;}
.profile-avatar-overlay{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.45);color:#fff;opacity:0;transition:opacity .15s;pointer-events:none;}
.profile-avatar-overlay svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.profile-avatar:not(:disabled):hover .profile-avatar-overlay,.profile-avatar:not(:disabled):focus-visible .profile-avatar-overlay{opacity:1;}
.profile-info-right{position:relative;z-index:3;grid-area:2/1;min-width:0;width:auto;height:auto;min-height:76px;box-sizing:border-box;padding:calc(10cqi + 10px) 12px 12px;border:0!important;border-radius:0 0 16px 16px;background:rgba(var(--system-c-content-rgb),var(--system-c-content-alpha))!important;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;color:var(--system-c-font-color)!important;}
.profile-name-row{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;flex-wrap:nowrap;gap:1px;min-width:0;}
.profile-name,.profile-name-input{box-sizing:border-box;max-width:100%;min-width:0;margin:0;padding:4px 0;border:0;line-height:1.4;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.profile-name{color:var(--system-c-title-color)!important;text-shadow:none;}
.profile-name-input{width:100%;outline:none;}
.profile-edit-field{width:100%;display:flex;flex-direction:column;gap:4px;color:var(--system-c-title-color)!important;}
.profile-edit-field[hidden]{display:none!important;}
.profile-edit-field>.content-input-box{width:100%!important;height:30px;}
.profile-edit-field input{width:100%!important;height:100%;}
.profile-bio-wrap{position:relative;flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;}
.profile-bio,.profile-bio-input{box-sizing:border-box;width:100%;margin:0;border:0;resize:none;font:inherit;line-height:1.4;}
.profile-bio{flex:1 1 auto;width:fit-content;max-width:100%;max-height:72px;min-height:0;margin:0;padding:7px 10px;overflow-y:auto;white-space:pre-wrap;overscroll-behavior:contain;border:1px solid rgba(var(--system-c-content-border-rgb),var(--system-c-content-border-alpha));border-radius:14px 14px 14px 4px;background:rgba(var(--system-c-content-rgb),var(--system-c-content-alpha))!important;color:var(--system-c-font-color)!important;text-shadow:none;}
.profile-bio-input{flex:1 1 auto;min-height:44px;height:auto;padding:8px;outline:none;scrollbar-width:none;overscroll-behavior:contain;}
.profile-bio-input::-webkit-scrollbar{display:none;}
.profile-bio:empty{display:none;}
.profile-detail-main{width:100%;min-width:0;display:flex;flex-direction:column;align-self:stretch;justify-self:stretch;gap:10px;}
/* 탭 strip — 좁은 창에선 sticky top:0(카드가 스크롤로 사라지면 상단 고정),
   넓은 창에선 아래 @container에서 고정 헤더가 되고 탭 본문만 스크롤한다.
   padding-top 상단 여백, 카드와 같은 상단 라운딩, box-shadow. */
.profile-tabs{flex:0 0 auto;display:flex;gap:4px;margin-bottom:0;position:sticky;top:14px;z-index:6;padding-top:15px;border-radius:16px 16px 0 0;background:rgba(var(--system-c-content-rgb),var(--system-c-content-alpha));box-shadow:0 8px 12px -6px rgba(var(--system-c-font-rgb),.3);}
.profile-activity-section{flex:1;width:100%;min-width:480px;min-height:0;display:flex;flex-direction:column;margin-top:0;}
.profile-activity-panes,.profile-activity-pane,.activity-loading,.activity-empty{width:100%;max-width:none;box-sizing:border-box;}
/* 넓은 창에서 탭 본문이 자체 스크롤될 때 네이티브 스크롤바는 숨기고
   창 공용 오버레이 스크롤바(UI.bindWindowOverlayScrollbar)를 얹는다. */
.profile-activity-panes{flex:1;min-height:400px;margin:0;scrollbar-width:none;}
.profile-activity-panes::-webkit-scrollbar{display:none;}

/* 넓은 창: 카드는 왼쪽 열에 그대로 두고, 오른쪽 열의 탭 헤더는 고정 +
   탭 본문(.profile-activity-panes)만 스크롤 — 탭 위로 컨텐츠가 지나가지 않는다.
   .window-content는 자기 자신이 container라 @container로 못 건드리므로, 대신
   .profile-body를 창 높이에 딱 맞춰(height:100%) 스크롤이 안 넘치게 한다.
   좁은 창은 카드가 세로로 너무 커서 이 모델을 못 쓴다(카드 스크롤아웃 유지). */
@container profile-detail (min-width: 841px){
  .profile-body{height:100%;overflow:hidden;}
  .window[data-root="user"] .user-modal-root,
  .window[data-root="user"] [data-user-profile-shell]{height:100%;display:flex;flex-direction:column;}
  .profile-detail-layout{align-items:stretch;flex:1;min-height:0;}
  /* 스크롤이 없으므로 sticky 불필요 — static이라야 카드가 탭과 같은 y(그리드 행
     상단)에서 시작한다(sticky top:14px면 14px 더 내려가 안 맞음). */
  .profile-sidebar{position:static;align-self:start;}
  .profile-detail-main{min-height:0;}
  .profile-tabs{position:static;}
  .profile-activity-panes{min-height:0;overflow-y:auto;overflow-x:hidden;}
}
.profile-activity-pane{display:none;min-height:100%;}
.profile-activity-pane.is-active{display:block;}
.shared-profile-ui[data-profile-kind="user"] [data-profile-only="character"],.shared-profile-ui[data-profile-kind="character"] [data-profile-only="user"]{display:none!important;}
/* 카드 우측 하단 부가 정보(현재 user 전용 슬롯이지만 공통 카드 컴포넌트 스타일). */
.profile-login-id{color:var(--system-c-desc-color)!important;text-shadow:none;}
.profile-created-at{position:absolute;right:12px;bottom:12px;color:var(--system-c-desc-color)!important;}
.profile-info.is-editing{aspect-ratio:auto;}
.profile-info.is-editing .profile-bio-input{min-height:36px;max-height:64px;border-radius:5px!important;}
.profile-info:not(.is-editing) .profile-edit-field{display:none!important;}
.is-profile-drop-target::after{content:'Drag&Drop';position:absolute;z-index:20;inset:0;display:grid;place-items:center;border-radius:inherit;background:rgba(255,255,255,.58)!important;box-shadow:inset 0 0 10px 0px var(--focus-color)!important;color:var(--focus-color)!important;font-weight:700;pointer-events:none;}

/* 좁은 창(창 폭 840px 이하): 사이드바를 본문 위 한 열로 접고 카드를 전폭으로.
   user/character 공통 — 각 모달 전용 좁은 창 규칙은 user.css / character.css의
   같은 @container 블록에 둔다. */
@container profile-detail (max-width: 840px){
  .profile-body{padding:0;gap:0;}
  .profile-detail-layout{grid-template-columns:minmax(0,1fr);row-gap:0;}
  .profile-activity-section{width:100%;min-width:0;}
  .profile-sidebar{position:static;width:100%;max-width:none;gap:0;}
  .profile-panel:not(.is-editing){width:100%;gap:0;}
  .profile-panel:not(.is-editing) .profile-info{width:100%;margin:0;border-radius:0;}
  .profile-info-content{padding:12px 26px;}
  /* 접힌 모드: 카드 하단 라운딩 제거 — 아래 탭과 이어진 것처럼 보이게. */
  .profile-info-right{width:auto;min-height:0;padding:calc(10cqi + 10px) 26px 20px;border-radius:0;}
  .profile-detail-main{min-height:100cqh;margin-top:0;}
  /* 접힌 모드: 카드가 스크롤로 사라지면 탭이 최상단(top:0)에 고정 — 라운딩 없이,
     탭 위 약간의 여백만. */
  .profile-tabs{top:0;padding-top:8px;border-radius:0;}
}