/* 사용자·캐릭터 공통 프로필 카드/레이아웃. 전용 영역은 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-card-top-left{position:relative;z-index:5;grid-area:1/1;align-self:start;justify-self:start;margin:6px;}
/* 배경 사진/단색 위에 얹히므로 카드 안 글자(.profile-info-content)와 같이
   흰색 + 그림자로 둔다 — 영역 글자색을 쓰면 어두운 배경에서 사라진다. */
.profile-card-top-left .post-back-btn{color:#fff!important;text-shadow:0 1px 3px rgba(0,0,0,.85);}
.profile-info.is-editing .profile-card-top-left{display:none;}
/* 카드 맨 아래 한 줄 — 왼쪽 조회수·좋아요·댓글, 오른쪽 작성일(요청). */
.profile-card-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px;}
.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;}
/* 아래쪽 흰 글자가 읽히도록 깔되, 시작 지점이 띠로 보이지 않게 구간을 넓히고
   중간 정지점으로 곡선을 흉내 낸다(요청) — 직선 2정지점이면 그라데이션이
   시작하는 높이에 눈에 띄는 경계가 생긴다. */
.profile-card-overlay{position:relative;z-index:2;grid-area:1/1;background:linear-gradient(to bottom,transparent 30%,rgba(0,0,0,.05) 50%,rgba(0,0,0,.16) 66%,rgba(0,0,0,.34) 80%,rgba(0,0,0,.55) 91%,rgba(0,0,0,.72) 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-bio-wrap(position:relative) 기준으로 한마디 말풍선 바깥 우측 상단에 띄우되,
   겹치지 않게 완전히 위로 빼고(버튼 높이 27px + 6px 여백) 오른쪽은 말풍선 테두리에 맞춘다. */
.profile-avatar-remove-btn{position:absolute;top:-33px;right:0;z-index:2;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-area-b-base-rgb),var(--system-c-area-b-base-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:1px solid rgba(var(--system-c-area-b-base-border-rgb),var(--system-c-area-b-base-border-alpha))!important;border-radius:0 0 16px 16px;background:rgba(var(--system-c-area-b-base-rgb),var(--system-c-area-b-base-alpha))!important;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;color:var(--system-c-area-b-base-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-area-b-base-font-color)!important;text-shadow:none;}
.profile-name-input{width:100%;outline:none;}
/* 이름 편집칸은 로그인 폼과 같은 .auth-field(하단선+플로팅 라벨) — .profile-name-row가
   align-items:flex-start라 안 늘어나니 여기서만 폭을 채운다. */
.profile-name-field{width: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-area-d-base-border-rgb),var(--system-c-area-d-base-border-alpha))!important;border-radius:14px 14px 14px 4px;background:var(--system-c-area-d-base-color)!important;color:var(--system-c-area-d-base-font-color)!important;text-shadow:none;}
/* 수정 중인 한마디도 말풍선(.profile-bio)과 같은 영역 C 를 따른다(요청) —
   예전엔 .content-input-box(입력 상자)라 편집 들어가는 순간 색이 튀었다.
   data-no-theme 은 광역 input/textarea 테마 규칙의 opt-out 표식(마크업 쪽). */
.profile-bio-input{flex:1 1 auto;min-height:44px;height:auto;padding:8px;outline:none;scrollbar-width:none;overscroll-behavior:contain;border:1px solid rgba(var(--system-c-area-d-base-border-rgb),var(--system-c-area-d-base-border-alpha))!important;border-radius:14px 14px 14px 4px;background:var(--system-c-area-d-base-color)!important;color:var(--system-c-area-d-base-font-color)!important;}
.profile-bio-input::-webkit-scrollbar{display:none;}
.profile-bio:empty{display:none;}
/* 활동 영역 전체를 영역 B 판 하나로 감싼다(요청) — 예전엔 탭 줄이 영역 A,
   활동 카드가 각자 영역 B 라 판이 여러 겹으로 겹쳐 보였다. 안쪽 부품은 자기
   배경/테두리를 버리고 이 판의 글자색만 따르고, 말풍선(영역 C)만 예외다. */
.profile-detail-main{--panel-pad:10px;width:100%;min-width:0;display:flex;flex-direction:column;align-self:stretch;justify-self:stretch;gap:10px;padding:var(--panel-pad);border:1px solid rgba(var(--system-c-area-b-base-border-rgb),var(--system-c-area-b-base-border-alpha))!important;border-radius:14px;background:rgba(var(--system-c-area-b-base-rgb),var(--system-c-area-b-base-alpha))!important;color:var(--system-c-area-b-base-font-color)!important;}
/* 판 안쪽 — 탭 줄은 배경·테두리를 버리고 판의 글자색만 따른다. 활동 카드는
   예외로 뺐다: 판 위에 얹히는 컨텐츠라 이제 영역 C 로 자기 배경·테두리를
   그린다(system-c.css 의 영역 C 셀 블록). 여기서 투명화하면 그게 지워진다. */
.profile-detail-main .profile-tabs{background:transparent!important;border-color:transparent!important;}
/* 단, 탭 줄의 밑줄은 남긴다 — 위 투명화는 "판 안에서 각자 상자를 그리지 말라"는
   뜻이지, 탭과 그 아래 목록을 나누는 구분선까지 지우라는 게 아니다. 같은
   특이도라 반드시 위 규칙보다 뒤에 와야 이긴다. */
.profile-detail-main .profile-tabs{border-bottom-color:rgba(var(--system-c-area-b-base-divider-rgb),var(--system-c-area-b-base-divider-alpha))!important;}
/* 탭 strip — 좁은 창에선 sticky top:0(카드가 스크롤로 사라지면 상단 고정),
   넓은 창에선 아래 @container에서 고정 헤더가 되고 탭 본문만 스크롤한다.
   padding-top 상단 여백, 카드와 같은 상단 라운딩, box-shadow. */
/* 넓은 창에서 탭 줄은 영역 A(창 본체)를 따른다(요청) — 컨텐츠 카드 위에 얹힌
   패널이 아니라 창 바탕에 놓인 줄로 보이게 한다. 자기 테두리는 두지 않고,
   강조는 활성 탭의 아래 3px(.bg-region-tab.is-active)만 맡는다. */
/* 밑줄은 3px 영역 B 테두리색 한 줄로, 판(.profile-detail-main)의 좌우 끝까지
   긋는다(요청) — 판의 안쪽 여백만큼 음수 마진으로 나갔다가 같은 값을 패딩으로
   되돌려, 탭 버튼 자리는 그대로 두고 선만 끝까지 이어지게 한다. */
.profile-tabs{flex:0 0 auto;display:flex;gap:4px;margin:0 calc(var(--panel-pad,0px) * -1);position:sticky;top:14px;z-index:6;padding:15px var(--panel-pad,0px) 0;border:0!important;border-bottom:3px solid rgba(var(--system-c-area-b-base-divider-rgb),var(--system-c-area-b-base-divider-alpha))!important;border-radius:16px 16px 0 0;background:rgba(var(--system-c-area-a-base-rgb),var(--system-c-area-a-base-alpha));box-shadow:none;}
/* 탭 글자도 영역 A 폰트 — 광역 `body *` 가 버튼을 직접 잡아 상속만으론 안 된다.
   활성 탭은 아래 .bg-region-tab.is-active 의 Focus 색을 그대로 쓰게 :not() 으로 뺀다. */
.profile-tabs .bg-region-tab:not(.is-active){color:var(--system-c-area-b-base-font-color);}
/* 밑줄은 탭마다가 아니라 탭 줄(.profile-tabs) 전체에 2px 설명폰트색으로
   하나만 긋는다 — 탭마다 그으면 사이의 gap(4px)에서 선이 끊긴다.
   활성 탭은 그 자리를 3px 강조색 막대로 "덮어" 두껍게 만든다(요청).
   탭 자신의 border-bottom 으로 하면 줄의 2px 선 위에 3px 가 세로로 쌓여
   그 자리만 5px 가 되므로, 절대배치 막대로 선 자리를 정확히 덮는다. */
.profile-tabs{position:relative;}
.profile-tabs .bg-region-tab{position:relative;}
.profile-tabs .bg-region-tab.is-active{border-bottom:0!important;}
.profile-tabs .bg-region-tab.is-active::after{
  content:'';position:absolute;left:0;right:0;bottom:-3px;height:3px;
  background:var(--focus-color);pointer-events:none;
}
/* 좁은 창에서도 같은 줄 — 위 넓은 창 규칙과 값이 같아 따로 손댈 게 없다. */
.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:stretch;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;}
  .profile-sidebar::-webkit-scrollbar{display:none;}
  /* 열이 창보다 짧아도 안의 것들을 눌러 찌그러뜨리지 않고 스크롤로 넘긴다(요청).
     특히 카드(.profile-info)는 overflow:hidden 이라 flex 의 자동 최소 크기가 0 이
     되어, 창을 줄이면 배너(::before, 16:9)까지 납작해져 안 보였다. */
  .profile-sidebar > *,
  .profile-panel > *{flex-shrink:0;}
  .profile-detail-main{min-height:0;}
  .profile-tabs{position:static;}
  .profile-activity-panes{min-height:0;overflow-y:auto;overflow-x:hidden;}
}
/* 탭 본문은 내용만큼만 — 예전엔 min-height:100% 라 빈 목록에서도 칸을 꽉 채웠고,
   "없습니다" 한 줄의 위아래 margin(12px) 만큼 넘쳐 스크롤바가 떴다(요청). */
.profile-activity-pane{display:none;min-height:0;}
.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-area-b-base-desc-font-color)!important;text-shadow:none;}
.profile-created-at{position:absolute;right:12px;bottom:12px;color:var(--system-c-area-b-base-desc-font-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;}
/* 드롭 대상 표시 — 전부 영역 B를 따른다. 베일은 아래 사진을 가려 글자를 읽히게
   하는 표면이라 영역 B 기본 배경(예전엔 rgba(255,255,255,.58) 하드코딩이라 어두운
   테마에서 흰 판이 떴다), 글자와 안쪽 발광은 "지금 여기 놓을 수 있다"는 활성 표시라
   영역 B 강조를 쓴다 — 기본 테두리는 투명도가 낮아(현 테마 α.05) 발광이 사라진다. */
.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(var(--system-c-area-b-base-rgb),.58)!important;box-shadow:inset 0 0 10px 0px rgba(var(--system-c-area-b-accent-border-rgb),var(--system-c-area-b-accent-border-alpha))!important;color:var(--system-c-area-b-accent-font-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;min-height:100%;box-sizing:border-box;}
  /* 접힌 모드에서도 컨텐츠가 창 바닥까지 닿게 한다(요청) — 예전엔 탭 본문이 제 내용만큼만
     차지해서, 글이 적으면 그 아래로 창 바탕(회색)이 그대로 드러났다. 카드는 제 높이대로 두고
     남는 높이를 탭 본문(두 번째 행)이 가져간다 — 내용이 길면 예전처럼 카드째 스크롤된다. */
  .profile-detail-layout{grid-template-columns:minmax(0,1fr);row-gap:0;min-height:100%;grid-template-rows:auto 1fr;align-items:stretch;}
  .profile-detail-main{min-height: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 규칙보다 뒤라 이긴다. */
  .profile-info-right{width:auto;min-height:0;padding:calc(10cqi + 10px) 26px 20px;border:0!important;border-radius:0;}
  /* 좁은 창에선 이 판이 창 폭을 꽉 채워 "카드"가 아니라 그냥 본문이 된다 —
     테두리·라운딩·안쪽 여백을 빼서 위(프로필 카드)와 자연스럽게 이어지게 한다(요청). */
  /* 컨텐츠가 없으면 그만큼만 차지한다(요청) — 예전엔 100cqh 로 한 화면을 미리
     잡아 둬서 빈 목록 아래에 흰 여백이 한 화면 더 남았다. */
  .profile-detail-main{--panel-pad:0px;min-height:0;margin-top:0;border:0!important;border-radius:0;}
  .profile-activity-panes{min-height:0;}
  /* 접힌 모드: 카드가 스크롤로 사라지면 탭이 최상단(top:0)에 고정 — 라운딩 없이,
     탭 위 약간의 여백만. */
  .profile-tabs{top:0;padding-top:8px;border-radius:0;}
  /* 좁은 창에서는 탭 메뉴의 좌·우·위 외곽선을 뺀다(요청) — 접힌 모드에선 탭이
     창 폭을 꽉 채워 화면을 가로지르는 선처럼 보인다. 아래 선은 탭과 그 아래
     목록을 나누는 역할이라 좁은 창에서도 남긴다(요청).
     배너 카드 쪽 같은 규칙은 user.css 에 있다(그 파일이 뒤에 로드돼
     여기 두면 진다). */
  .profile-tabs{border:0!important;border-bottom:3px solid rgba(var(--system-c-area-b-base-divider-rgb),var(--system-c-area-b-base-divider-alpha))!important;background:rgba(var(--system-c-area-b-base-rgb),var(--system-c-area-b-base-alpha));box-shadow:none;}
  .profile-tabs .bg-region-tab:not(.is-active){color:var(--system-c-area-b-base-font-color);}
}