/* 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} /* 영역 B 위의 로딩 원 — 옅은 링은 그 영역의 설명 폰트색, 도는 한 변만 Focus (요청). 예전엔 테두리색을 써서 배경과 대비가 거의 없었다. 영화 검색 스피너(.movie-search-loading)와 같은 규칙이다. */ .user-loading-spinner{display:block;flex:0 0 auto;width:28px;height:28px;box-sizing:border-box;border:2px solid var(--system-c-area-b-base-desc-font-color)!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-area-b-base-rgb)를 따르되, 투명도는 테마의 content-alpha와 무관하게 .80 고정 — backdrop-filter(blur)가 안 먹는 환경(구형 webview 등)에서도 뒤 텍스트가 읽히면 안 되니 blur 없이도 이 자체로 가림이 되게 한다. */ /* 로그인/가입 카드도 테마의 영역 B 투명도를 그대로 따른다(요청) — 예전엔 이 막이 영역 B 색 .80 고정이라 카드가 늘 불투명해 보였다. 막은 확인 팝업과 같은 어두운 막으로 두고, 뒤 프로필은 아래에서 filter 로 직접 흐린다(backdrop-filter 는 이 브라우저에서 글자 레이어를 못 잡아 글이 그대로 비쳤다). */ .user-guest-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(0,0,0,.35)!important;} .user-modal-root:has(> .user-guest-overlay:not([hidden])) > .profile-card{filter:blur(5px);} /* 테두리는 1px — 창 본문/그리드셀/활동 카드 등 다른 영역 B 판이 전부 1px 이라 여기만 2px 이면 유독 두껍게 튀었다(요청). */ .user-guest-overlay .confirm-dialog{box-sizing:border-box;background:rgba(var(--system-c-area-b-base-rgb), var(--system-c-area-b-base-alpha))!important;border:1px solid rgba(var(--system-c-area-b-base-border-rgb), var(--system-c-area-b-base-border-alpha))!important;color:var(--system-c-area-b-base-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; /* 강조(포커스) 전 기본 밑줄은 영역 B 구분선을 따른다(요청) — 이 입력들은 영역 B 판(프로필 카드/로그인 카드) 위에 놓인 "줄"이라, 입력 상자(영역 I)의 테두리색을 쓰면 그 판의 다른 구분선들과 따로 놀았다. 포커스 상태는 아래 .auth-input:focus 가 Focus 색으로 덮는다. */ /* !important 없이는 전역 *{border-color: 영역 B 테두리 !important} 에 눌려 늘 그 색으로 칠해졌다(이 밑줄이 무슨 값을 쓰든 무시되던 원인). */ border-bottom:1px solid rgba(var(--system-c-area-b-base-divider-rgb), var(--system-c-area-b-base-divider-alpha))!important; background:transparent;outline:none;font-size:14px;line-height:1.4; padding:4px 20px 6px 0;color:var(--system-c-area-b-base-font-color); } .auth-field-password .auth-input{padding-right:44px;} .auth-input:focus{border-bottom:2px solid var(--focus-color)!important;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:12px;color:var(--system-c-area-b-base-desc-font-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-area-b-base-desc-font-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(--system-c-area-b-accent-font-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-area-b-base-desc-font-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(, 배너가 있고 보기모드일 때만 보여서 실제 링크로 이동)가 같은 자리를 번갈아 차지한다(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; /* 배너 이미지 자체에는 외곽선을 두지 않는다(요청) — 감싸는 카드 (.profile-card-banner)가 이미 테두리를 갖는다. 선언을 아예 빼면 안 된다: 이건