)라 앞부분으로 잡는다 — TRPG 핸드아웃 창(root="shared")도 같이. */
.window[data-root^="shared"] { min-width: min(520px, calc(100vw - 8px)); min-height: min(420px, calc(100vh - 8px)); }
/* 팝업 미리보기는 높이를 정하고(JS) 너비는 비율에서 나온다 — 세로로 긴 무대에서도
팝업이 창을 넘지 않게(요청). 너비가 팝업보다 넓어지면 거기서 멈춘다. */
.shared-stage-dialog .shared-chat-stage-preview {
max-width: 100%; margin-inline: auto;
}
/* 무대 설정 대화상자의 미리보기 — 실제 무대와 같은 칸(16:9), 시험 대사창, 끌어 옮기기. */
.shared-stage-dialog { width: min(92%, 560px); max-width: 560px; } /* .confirm-dialog 의 320px 상한을 넘겨 미리보기가 볼 만하게 */
.shared-chat-stage-preview {
position: relative; aspect-ratio: 16 / 9; margin-top: 12px; border-radius: 10px; overflow: hidden;
background: #2a2a2e center / cover no-repeat; cursor: grab; touch-action: none; user-select: none;
}
.shared-chat-stage-preview:active { cursor: grabbing; }
.shared-chat-stage-preview .shared-chat-stage-box { pointer-events: none; }
/* 이름 칸 고정 격자 — 전신 이미지 팝업의 슬라이더 줄과 같은 규칙(요청). */
.shared-stage-zoom { display: grid; grid-template-columns: 4.5em 1fr; align-items: center; gap: 10px; margin-top: 10px; }
.shared-stage-zoom > span { min-width: 0; white-space: nowrap; }
.shared-stage-zoom input { width: 100%; min-width: 0; }
/* 미리보기 대사창도 실제 무대와 같이 왼쪽 정렬(요청) — 팝업의 가운데 정렬을 물려받아 있었다. */
.shared-chat-stage-preview .shared-chat-stage-box { text-align: left; }
/* 전신이 없으면 아바타를 원형 그대로 세운다. */
.shared-chat-stage-bust.is-avatar { left: 50%; bottom: 28%; width: 40%; height: auto; transform: translateX(-50%); border-radius: 50%; }
/* 들어오면서 전신·표정을 다 받는 동안(요청) — 다 받고 나면 사라진다. */
.shared-chat-stage-loading {
position: absolute; inset: 0; z-index: 4; pointer-events: none;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
background: rgba(0, 0, 0, .35); color: #fff !important; font-size: 13px;
}
/* 공용 로딩원 상자는 부모 높이를 다 쓰게 되어 있어(.loading-block height:100%),
여기서는 그것이 판을 통째로 밀어 글씨가 바닥에 붙었다 — 제 크기만 쓰게 한다(요청). */
.shared-chat-stage-loading .loading-block { height: auto; min-height: 0; padding: 0; }
/* 대사란은 네 줄로 고정이다(요청) — 대사 길이에 따라 높이가 오르내리지 않는다. */
.shared-chat-stage-box {
position: absolute; left: 10px; right: 10px; bottom: 10px;
display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 10px;
background: rgba(0, 0, 0, .55); color: #fff !important;
}
.shared-chat-stage-box[hidden] { display: none !important; }
.shared-chat-stage-name { font-weight: 600; color: #fff !important; }
/* 대사 칸은 늘 네 줄(6em) — 짧아도 줄지 않고, 길면 제 안에서 굴린다(요청).
치는 동안에는 typeOut 이 끝으로 따라 내린다. */
.shared-chat-stage-text {
display: block; white-space: pre-wrap; color: #fff !important;
line-height: 1.5; height: 6em; overflow-y: auto; overscroll-behavior: contain;
scrollbar-width: none;
}
.shared-chat-stage-text::-webkit-scrollbar { display: none; }
.shared-chat-stage-splitter {
cursor: col-resize; background: transparent;
border-left: 1px solid rgba(var(--system-c-area-b-base-border-rgb), var(--system-c-area-b-base-border-alpha));
}
.shared-chat-stage.is-stacked .shared-chat-stage-splitter {
border-left: 0;
border-top: 1px solid rgba(var(--system-c-area-b-base-border-rgb), var(--system-c-area-b-base-border-alpha));
}
/* 좁은 창(요청) — 무대가 위, 채팅과 입력줄이 남은 아래를 쓴다. */
.shared-chat-stage.is-stacked {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: var(--chat-stage-height, 42%) 6px minmax(0, 1fr);
}
.shared-chat-stage.is-stacked .shared-chat-stage-splitter { cursor: row-resize; }
/* TRPG 시나리오 편집기(요청) — 왼쪽 원본(읽기 전용), 오른쪽 수정 뷰어. */
.trpg-scenario { display: grid; grid-template-columns: var(--trpg-src-width, 50%) 10px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); flex: 1 1 auto; min-height: 0; }
.trpg-scenario-pane {
display: flex; flex-direction: column; gap: 6px; min-width: 0; min-height: 0;
padding: 8px; border-radius: 10px;
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));
}
.trpg-scenario.is-collapsed { grid-template-columns: 0 6px minmax(0, 1fr); }
.trpg-scenario.is-collapsed .trpg-scenario-src { display: none; }
.trpg-scenario-src { overflow: auto; min-height: 0; flex: 1 1 auto; }
.trpg-scenario-splitter { cursor: col-resize; background: transparent; }
.trpg-scenario-tools > strong { font-weight: 600; }
/* 두 판의 머리줄 높이를 맞춘다(요청) — 본문 라벨과 찾기/바꾸기 줄이 같은 선에서 시작한다. */
.trpg-scenario-tools { display: flex; align-items: center; gap: 4px; min-height: 44px; flex: 0 0 auto; }
.trpg-scenario-tools .auth-input { padding: 2px 6px; }
.trpg-scenario-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.trpg-scenario-find { width: 90px; }
.trpg-scenario-lines { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
/* 채팅 줄 모양으로 보여 주는 수정 뷰어(요청) — ▶ 는 줄 왼쪽에 붙는다. */
/* 맵이 걸린 줄은 [▶][맵][본문] 세 칸이 된다(요청). */
.trpg-line.is-chat { grid-template-columns: auto auto minmax(0, 1fr); align-items: start; }
.trpg-line.is-chat:not(:has(.trpg-line-map)) { grid-template-columns: auto minmax(0, 1fr); }
.trpg-line-chat { min-width: 0; }
.trpg-line-chat .shared-chat-msg { margin: 0; }
.trpg-scenario-input { width: 100%; flex: 1 1 auto; min-height: 120px; resize: none; }
.trpg-line { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: start; gap: 6px; padding: 2px 0; margin-left: calc(var(--trpg-depth, 0) * 14px); }
/* 분기(설명)와 선택지 — 챕터처럼 접었다 편다(요청). */
.trpg-line.is-branch .trpg-line-tag,
.trpg-line.is-choice .trpg-line-tag { font-size: 11px; padding: 0 4px; border-radius: 4px; background: rgba(var(--system-c-area-b-base-rgb), var(--system-c-area-b-base-alpha)); }
.trpg-line.is-branch { font-weight: 600; }
.trpg-line-fold { width: 18px; padding: 0; }
/* 이미 채팅으로 내보낸 줄은 흐리게(요청). */
.trpg-line.is-sent { opacity: .45; }
.trpg-line.is-chapter { grid-template-columns: minmax(0, 1fr); border-top: 1px solid; margin-top: 6px; padding-top: 6px; }
.trpg-line-chapter { font-weight: 600; }
.trpg-line-text { min-width: 0; white-space: pre-wrap; outline: none; }
.trpg-line-text:focus { background: rgba(var(--system-c-area-b-base-rgb), var(--system-c-area-b-base-alpha)); }
.shared-trpg-msg { display: flex; gap: 6px; padding: 2px 0; }
/* 창 바깥(바탕화면)에 뜨는 칸(요청) — 창 오른쪽에 붙어 따라다닌다. 자리·높이·층은 JS 가 맞춘다. */
.trpg-party { position: fixed; width: 240px; overflow-y: auto; scrollbar-width: none; }
.trpg-party::-webkit-scrollbar { display: none; }
.trpg-party > .panel-card { box-shadow: 0 6px 14px -2px rgb(0 0 0 / .2); }
/* 현재값은 눌러서 고친다(GM·소유자) — 버튼이지만 글씨 그대로 보인다. */
.trpg-party-bar-input { width: 3.4em; padding: 0 2px; font-size: 11px; text-align: right;
color: #000; background: #fff; border: 1px solid rgba(0, 0, 0, .25); border-radius: 4px; }
button.trpg-party-bar-num { padding: 0; font-size: 11px; cursor: pointer; }
/* 시트 버튼은 누를 수 있다는 표(요청) — 머리줄은 잡아 옮긴다. */
.trpg-party-sheet { cursor: pointer; }
.trpg-party > .panel-card > .panel-card-head { cursor: move; user-select: none; }
button.trpg-party-bar-num:hover { text-decoration: underline; }
.trpg-party-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.trpg-party-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: start; gap: 8px; }
.trpg-party-row > .avatar-circle { width: 34px; height: 34px; }
.trpg-party-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.trpg-party-name { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trpg-party-nosheet { font-size: 11px; color: var(--system-c-area-b-base-desc-font-color); }
/* 바 한 줄 — 이름 · 막대 · 현재값/최대값. */
.trpg-party-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 5px; font-size: 11px; }
.trpg-party-bar-label { white-space: nowrap; color: var(--system-c-area-b-base-desc-font-color); }
.trpg-party-bar-track { height: 5px; border-radius: 3px; overflow: hidden;
background: rgba(var(--system-c-area-b-base-border-rgb), var(--system-c-area-b-base-border-alpha)); }
.trpg-party-bar-fill { display: block; height: 100%; border-radius: 3px; background: var(--focus-color); }
.trpg-party-bar.is-hp .trpg-party-bar-fill { background: #e05a5a; }
.trpg-party-bar.is-mp .trpg-party-bar-fill { background: #4f86e8; }
.trpg-party-bar.is-san .trpg-party-bar-fill { background: #8a63d2; }
.trpg-party-bar-num { white-space: nowrap; font-variant-numeric: tabular-nums; opacity: .85; }
.trpg-party-sheet .shared-chat-mode-icon { width: 18px; height: 18px; }
/* TRPG 키퍼링 창(요청) — 시나리오명 / 참여 캐릭터 / NPC / 시나리오. */
.window[data-root^="shared"] .window-content:has(> .shared-trpg-keeper) { overflow: hidden; }
.shared-trpg-keeper { display: flex; flex-direction: column; gap: 10px; padding: 12px; height: 100%; box-sizing: border-box; min-height: 0; }
.shared-trpg-section { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; }
/* 참여 캐릭터·NPC 는 머리줄을 눌러 접는다(요청). */
.shared-trpg-section .panel-card-head { cursor: pointer; }
.shared-trpg-section.is-collapsed .shared-trpg-members,
.shared-trpg-section.is-collapsed > div:not(.panel-card-head) { display: none; }
.shared-trpg-section.is-scenario { flex: 1 1 auto; min-height: 0; }
.shared-trpg-section.is-scenario > div:last-child { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.shared-trpg-members { display: flex; flex-direction: column; gap: 4px; max-height: 30vh; overflow-y: auto; }
.shared-trpg-member { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto; align-items: center; gap: 8px; }
/* 맵 칸(요청) — 미리 올려 둔 무대 배경들. 누르면 그 맵으로 바로 전환한다. */
.shared-trpg-maps { display: flex; flex-direction: column; gap: 6px; }
/* 입력줄에 붙는 굴림 칩(요청) — "/" 자동완성에서 고르면 글자 대신 이 칩이 붙는다. */
/* TRPG 입력줄은 칩이 글 사이에 껴야 해서 textarea 가 아니라 편집 가능한 판이다(요청). */
.shared-chat-compose { white-space: pre-wrap; word-break: break-word; cursor: text; }
.shared-chat-compose:empty::before,
.shared-chat-compose:has(> br:only-child)::before {
content: attr(data-placeholder); opacity: .6; pointer-events: none;
}
/* 누르면 바로 걷힌다(요청) — 비어 있는 동안 계속 떠 있어 무엇을 치는지 가렸다.
펼침 표시(.is-compose-expanded, bindComposeGrow 가 포커스에 맞춰 붙인다)도 같이 보는 것은
창이 배경에 있을 때 :focus 가 안 잡히는 경우까지 덮기 위해서다. */
.shared-chat-compose:focus::before,
.shared-chat-compose:focus:has(> br:only-child)::before,
.is-compose-expanded .shared-chat-compose::before,
.is-compose-expanded .shared-chat-compose:has(> br:only-child)::before { content: none; }
.shared-chat-macro {
/* 글줄과 같은 baseline 에 놓는다(요청) — vertical-align:middle 은 칩이 글자 줄보다 높아
가운데가 x-height 기준으로 잡혀, 입력란에서 칩만 두 픽셀쯤 내려앉아 보였다.
inline-flex 면 칩의 baseline 을 첫 칸(아이콘 svg)이 정해 아이콘 칩만 다시 어긋나므로
inline-block 으로 두고 아이콘은 제 vertical-align 으로 맞춘다. */
display: inline-block; margin: 0 2px; vertical-align: baseline;
user-select: none;
padding: 2px 8px; border-radius: 999px; font-size: 12px; white-space: nowrap;
/* 칩은 포커스색 바탕에 포커스 글씨색(요청) — 글 사이에서 한눈에 띄게. */
background: var(--focus-color) !important;
border: 1px solid var(--focus-color) !important;
color: var(--focus-font-color) !important;
}
.shared-chat-macro svg { width: 14px; height: 14px; vertical-align: -0.2em; margin-right: 4px; }
/* 아직 치는 중인 칩("/r ", "/표정 " 으로 연다) — 점선으로 열려 있음을 알린다. */
.shared-chat-macro.is-open { display: inline-block; min-width: 14px; border-style: dashed !important; }
/* 굴릴 수 없는 글(기능치도 주사위식도 아님)이나 없는 표정은 빨갛게 — 이런 칩은
굴리지 않고 글 그대로 나간다(요청). 색은 수치 하락 칩(.is-down)과 같은 빨강. */
.shared-chat-macro.is-invalid { color: #e0483a !important; border-color: #e0483a !important; }
/* "/" 자동완성 목록 — 아이콘 + 이름·기능치. */
/* 목록은 판 너비를 다 쓴다(요청) — 버튼이라 내용만큼만 넓어 오른쪽이 비어 보였다.
표정이 많으면 max-height 안에서 굴린다(요청, .post-editor-popover 가 overflow-y:auto). */
.shared-macro-menu { min-width: 180px; max-height: 260px; }
.shared-macro-menu .post-editor-popover-item,
.shared-speaker-picker .post-editor-popover-item { display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; }
.shared-macro-menu svg { width: 16px; height: 16px; }
/* 매크로 줄(요청) — 이름은 굵게, 설명은 보통 글씨로 오른쪽에. */
.shared-macro-menu .shared-macro-name { font-weight: 700; flex: 0 0 auto; }
.shared-macro-menu .shared-macro-desc { margin-left: auto; opacity: .75; font-size: .92em; }
/* 핸드아웃(요청) — GM 이 나눠 준 쪽지 카드. */
.shared-trpg-handouts { display: flex; flex-direction: column; gap: 10px; }
.shared-trpg-handout {
padding: 10px; border-radius: 12px;
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;
}
.shared-trpg-handout-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.shared-trpg-handout-to { margin-left: auto; font-size: 11px; color: var(--system-c-area-b-base-desc-font-color); }
.shared-trpg-handout-image { width: 100%; border-radius: 8px; margin-bottom: 6px; }
/* 시트에서 굴리는 아이콘 버튼(요청) — 누르면 그 기능으로 굴린다. */
.character-sheet-check { padding: 0; cursor: pointer; line-height: 0; }
.character-sheet-check:hover svg { color: var(--focus-color); }
.shared-trpg-map {
display: grid; grid-template-columns: 64px minmax(0, 1fr) auto auto; align-items: center; gap: 8px;
padding: 4px; border-radius: 10px; cursor: pointer;
}
.shared-trpg-map:hover { background: rgba(var(--system-c-area-b-base-rgb), var(--system-c-area-b-base-alpha)); }
.shared-trpg-map.is-current { outline: 1px solid var(--focus-color); }
.shared-trpg-map-thumb {
width: 64px; aspect-ratio: 16 / 9; border-radius: 6px;
background-size: cover; background-position: center;
background-color: rgba(var(--system-c-area-b-base-rgb), var(--system-c-area-b-base-alpha));
}
.shared-trpg-map-memo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shared-trpg-map-now { font-size: 11px; color: var(--focus-color); }
/* 맵이 걸린 시나리오 줄 — 내보내면 무대도 같이 바뀐다는 표시. */
.trpg-line-map { font-size: 11px; color: var(--system-c-area-b-base-desc-font-color); white-space: nowrap; }
/* 키퍼링 목록의 아바타는 작게 — 컨테이너 단위(10cqi)로 커지던 자리(요청). */
.shared-trpg-member .avatar-circle { width: 28px; height: 28px; flex: 0 0 auto; }
.shared-trpg-member-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 시트가 있으면 focus 색 문어, 없으면 설명 색(요청). */
.shared-trpg-sheet svg { width: 16px; height: 16px; color: var(--system-c-area-b-base-desc-font-color); }
.shared-trpg-sheet.is-written svg { color: var(--focus-color); }
/* 상단 줄 우측의 화면별 버튼 자리([관리]) — 컨텐츠 카드 밖이라 본문을 밀지도,
본문과 함께 스크롤되지도 않는다(요청). */
.shared-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.shared-nav-backdrop { display: none; }
.shared-nav-toggle { display: inline-flex; align-items: center; justify-content: center; padding: 4px; cursor: pointer; }
.shared-nav-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
/* breadcrumb 자체가 목록으로 돌아가는 버튼이다 — 환경설정 앱과 같은
.panel-header-breadcrumb을 그대로 재사용한다(homepage.css). */
/* 넓은 창: ☰로 사이드바 자체를 접어 본문에 공간을 더 준다(환경설정 앱과 동일). */
.shared-layout.is-nav-collapsed .shared-side { display: none; }
/* 좁은 창(모바일 등): 사이드바는 overlay drawer가 된다. 클래스 토글(is-nav-small /
is-nav-drawer-open)은 UI.bindNavDrawer가, 위치·전환은 여기가 담당한다
— 환경설정 앱의 .settings-shell.is-nav-small 규칙과 같은 구조.
inset의 -14px는 .shared-record의 padding과 짝이다(콘텐츠 영역 전체를 덮도록). */
.shared-layout.is-nav-small .shared-side {
position: absolute;
inset: -14px auto -14px -14px;
height: auto;
z-index: 5;
/* 접힌 폭도 320px — 위 .shared-side 와 같은 값이다. breakpoint 를 900 으로
올린 뒤로는 drawer 가 좁은 창 전용이 아니라 표준 크기 창의 기본 모드라,
260px 로 두면 프로필 카드의 cqi 여백이 같이 줄어 아바타/이름이 사용자·캐릭터
프로필 카드보다 작아진다(그 값을 320 으로 정한 이유가 그것이다).
정말 좁은 창은 max-width 가 계속 막는다. */
width: 320px;
max-width: 80%;
/* 좌우 여백 없이 — 안의 칸(프로필/관계/사람/기념일/메뉴)이 서랍 폭을 그대로
쓴다(요청). 위아래만 띄운다. */
padding: 0 0 14px;
border-radius: 0 10px 10px 0;
/* 접힌 메뉴 판은 영역 B(요청) — 창 바탕 위에 얹힌 판이라 영역 A 면 바탕과 구분이
안 된다. 판 위의 카드들은 영역 C 로 간다(system-c.css 의 영역 C 셀 블록). */
background: rgba(var(--system-c-area-b-base-rgb), var(--system-c-area-b-base-alpha));
transform: translateX(-100%);
transition: transform .18s ease;
}
/* 가로만 잘라낸다 — overflow:hidden 으로 묶으면 세로 스크롤까지 죽어 서랍이 길 때
아래쪽 메뉴에 닿을 수 없었다(요청). 세로는 .shared-side 의 overflow-y:auto 그대로. */
.shared-layout.is-nav-small .shared-side { overflow-x: hidden; }
/* 서랍 안의 칸은 전부 서랍 폭을 꽉 채운다(요청) — 서랍 모서리에 맞물리므로
제 라운딩과 좌우 테두리는 두지 않는다. 칸 사이 간격은 .shared-side 의 gap 몫. */
.shared-layout.is-nav-small .shared-side .profile-info,
.shared-layout.is-nav-small .shared-side .panel-card {
border-radius: 0;
border-left-width: 0;
border-right-width: 0;
}
/* 하위 메뉴 칸(홈/정보/타임라인/갤러리 등)만은 안쪽 내용도 좌우 여백 없이 폭을 다
쓴다(요청) — hover/활성 표시가 서랍 끝까지 닿는다. 위아래 여백은 그대로. */
/* 메뉴 칸은 좌우 안쪽 여백을 두지 않는다(요청) — 활성 표시(왼쪽 Focus 줄)가 칸 벽에
붙어야 한다. 창 폭과 무관하게 같다(예전엔 좁은 창에서만 그랬다). */
.shared-side .shared-nav {
padding-left: 0;
padding-right: 0;
}
/* 머리줄("메뉴")과 무리 이름만은 다른 칸의 머리줄과 같은 x 에서 시작한다(요청) —
.panel-card 의 안쪽 여백 10px + .panel-card-head 의 5px = 15px. */
.shared-side .shared-nav > :is(.panel-card-head, .shared-nav-group) {
padding-left: 15px;
padding-right: 10px;
}
/* 서랍을 펼친 동안에는 본문이 스크롤되지 않는다(요청) — 서랍 위에서 굴린 바퀴가
뒤 본문으로 새어 본문만 움직였다. 서랍 자체는 제 안에서 스크롤한다. */
.shared-layout.is-nav-small.is-nav-drawer-open .shared-main,
.shared-layout.is-nav-small.is-nav-drawer-open .shared-content { overflow: hidden; }
.shared-layout.is-nav-small .shared-side { overscroll-behavior: contain; }
/* 그림자는 펼쳤을 때만 — 접힌 서랍은 화면 밖에 있는데도 그림자만 본문 위로 새어 나왔다(요청). */
.shared-layout.is-nav-small.is-nav-drawer-open .shared-side { transform: translateX(0); box-shadow: 4px 0 18px rgba(0, 0, 0, .25); }
.shared-layout.is-nav-small.is-nav-drawer-open .shared-nav-backdrop {
display: block;
position: absolute;
inset: -14px;
z-index: 4;
margin: 0;
border: 0;
padding: 0;
background: rgba(0, 0, 0, .32);
cursor: pointer;
}
/* 떠 있는 [+] 는 창에 바로 붙어(.fab-dock, z-index 700) 서랍 막(4)·서랍(5)보다 위라,
서랍을 펼친 동안에도 그대로 눌렸다(요청) — 팝업이 떠 있을 때와 같이 감춘다. */
.window:has(.shared-layout.is-nav-small.is-nav-drawer-open) .fab-dock { display: none; }
/* 배경/아이콘/이름 카드 — 구조와 스타일은 profile.css의 .profile-* 가 전부
담당하고, 여기서는 아바타 자리에 들어가는 메뉴 아이콘 크기만 맞춘다
(프로필은 사진이라 background-size:cover, 여기는 SVG/이미지 아이콘). */
.shared-record-card { flex: 0 0 auto; }
.shared-record-card .profile-avatar-img svg { width: 55%; height: 55%; }
.shared-record-card .profile-avatar-img img { width: 100%; height: 100%; object-fit: cover; }
.shared-mini-btn {
font-size: 11px; padding: 1px 6px; border-radius: 6px; cursor: pointer;
border: 1px solid rgba(var(--system-c-area-b-base-border-rgb), var(--system-c-area-b-base-border-alpha)); background: transparent; color: inherit;
}
/* 소속 사용자 행 — 관계란의 .avatar-chip 그대로. 그쪽 아바타
폭이 10cqi인데 이 칩은 사이드바와 후기 작성자 헤더 두 곳에 나오므로,
.character-relation-search-row와 같은 방식으로 고정 폭만 덮어쓴다. */
.shared-member { grid-template-columns: 28px minmax(0, 1fr); }
.shared-member .avatar-circle { width: 28px; }
.shared-member.is-profile-ref { cursor: pointer; }
/* 이 모달의 폼 다이얼로그(기념일 추가·수정 / 새 공유 후기 / 정보 수정) — 로그인·
프로필과 같은 떠오르는 라벨 밑줄 입력(.auth-field/.auth-input/.auth-label,
user.css)을 쓴다(요청). .confirm-dialog 가 가운데 정렬이라 글자만 되돌린다. */
/* 영화 검색 결과가 포스터 + 3줄짜리 항목이라 320px 로는 좁다 — .confirm-dialog 의
max-width:320px 를 클래스 하나로 이긴다(아이콘 피커와 같은 방식). */
.confirm-dialog.shared-review-create {
width: min(460px, calc(100% - 24px));
max-width: 460px;
}
.shared-form-field { text-align: left; }
/* 밑줄 select(UI.underlineSelectHTML)는 칸 폭을 꽉 채운다 — 아래 제목 칸과 같은 줄 폭. */
.shared-form-field .custom-select-wrap { width: 100%; }
/* .auth-field 의 padding-top(16px)만으로는 칸끼리 붙어 보였다(요청). 연달아
놓인 칸 사이에만 준다 — 첫 칸은 .confirm-dialog-message 의 아래 여백을 쓴다. */
.shared-form-field + .shared-form-field { margin-top: 8px; }
/* 켜고 끄는 칸(후기 메뉴의 영화 정보 연동 등, 요청) — 왼쪽에 이름·설명, 오른쪽 끝에 스위치.
예전엔 사이드바용 작은 체크박스(.shared-nav-manage-check)를 그대로 써서 폼에서 혼자 작았다. */
.shared-form-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; }
.shared-form-toggle-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.shared-form-toggle-text span { font-size: 12px; color: var(--system-c-area-b-base-desc-font-color); }
.shared-form-toggle-row .settings-toggle { flex: none; }
/* 후기 썸네일 칸(요청) — 링크 입력 | [이미지 업로드] | 작은 미리보기를 한 줄에. */
.shared-review-thumb-field { display: flex; align-items: flex-end; gap: 8px; }
.shared-review-thumb-field > .shared-form-field { flex: 1 1 auto; min-width: 0; }
.shared-review-thumb-field > .small-btn { flex: none; margin-bottom: 2px; }
.shared-review-thumb-preview { flex: none; width: 36px; height: 48px; object-fit: cover; border-radius: 4px; }
.shared-review-thumb-field + .shared-form-field { margin-top: 8px; }
/* 마지막 입력칸과 버튼줄이 붙어 보였다(요청) — 이 다이얼로그들에만 준다. */
.shared-form-dialog .confirm-dialog-actions { margin-top: 18px; gap: 12px; }
/* type=date 는 값이 없어도 :placeholder-shown 이 아니라, 위 라벨 규칙만으로는
라벨이 늘 떠 있고 "연도-월-일"도 그대로 보인다. 값이 있는지는 JS가
.is-filled 로 알려주고(bindDateFields), 비었고 포커스도 아니면 값 자리와
떠오른 라벨을 함께 감춰 다른 칸과 같은 모양으로 둔다(요청).
.auth-input:not(:placeholder-shown) + .auth-label(0,3,1)을 되받아야 해서
.shared-form-field 로 한 단계 더 좁힌다. 달력 아이콘은 남긴다 — 날짜 칸임을
알리는 유일한 표시가 된다. */
/* .auth-input 의 오른쪽 20px 패딩은 로그인 폼의 지우기(×)/비밀번호 보기 버튼
자리다 — 날짜 칸엔 그 버튼이 없어서 달력 아이콘만 안쪽으로 밀려 있었다. */
.shared-form-field .auth-input[type="date"] { padding-right: 0; }
.shared-form-field .auth-input[type="date"]:not(:focus):not(.is-filled)::-webkit-datetime-edit {
color: transparent;
}
.shared-form-field .auth-input[type="date"]:not(:focus):not(.is-filled) + .auth-label {
top: 20px;
font-size: 12px;
color: var(--system-c-area-b-base-desc-font-color);
}
.shared-anniv-list { display: flex; flex-direction: column; gap: 4px; }
/* 바로 위 "사용자" 칸(.shared-member = .avatar-chip)과 같은 줄
간격으로 맞춘다(요청) — padding 4px / gap 8px 도 그쪽 값이고, 아이콘도 그쪽
아바타와 같은 28px 자리다. 날짜 줄은 크기를 따로 주지 않고 이름 줄과 같은
12px 를 물려받아 @아이디 줄과 같은 높이가 된다. D-day 는 오른쪽 끝(요청). */
.shared-anniv { display: flex; align-items: center; gap: 8px; padding: 4px; font-size: 12px; }
.shared-anniv-label { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.shared-anniv-label small { color: var(--system-c-area-b-base-desc-font-color); }
/* 오른쪽 끝이라 폭을 잡아둘 필요가 없다 — 값 길이만큼만 쓰고 이름 칸이 남는다. */
.shared-anniv-dday { flex: 0 0 auto; font-weight: 700; font-size: 11px; white-space: nowrap; }
/* 아이콘 자리 — .avatar-circle 와 같은 28px 원형 판. 그쪽은
사진이라 background-size:cover 지만 여기는 SVG/PNG 아이콘이라 안에 맞춘다
(사이드바 카드 아이콘 .shared-record-card 와 같은 방식). */
.shared-anniv-icon {
flex: 0 0 28px;
width: 28px;
height: 28px;
display: grid;
place-items: center;
color: var(--system-c-area-b-base-font-color);
}
.shared-anniv-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.shared-anniv-icon img { width: 22px; height: 22px; object-fit: contain; }
.shared-anniv-icon-btn { padding: 0; cursor: pointer; }
/* 항목 자체는 환경설정 앱 셸의 .side-nav-btn normal-button을 그대로 쓴다
(구조/크기/활성 표시가 전부 공용). 다만 그 앱에서는 버튼들이 창 바탕에 바로
놓여 상자가 맞지만, 여기서는 컨텐츠 카드(.panel-card) 안이라
상자를 그대로 두면 카드 안에 카드가 늘어선다 — 위 사용자/기념일 칸의 행처럼
테두리·배경을 벗기고 hover 와 활성만 남긴다(요청).
활성 표시는 .side-nav-btn 이 이미 자리를 잡아둔 왼쪽 3px 막대를 쓴다. */
.shared-nav { display: flex; flex-direction: column; gap: 2px; }
/* 후기 메뉴는 편집 때문에 감싸개(div) 안에 있다 — 그냥 두면 블록 안이라 버튼이
글자 폭까지만 늘어나 홈/페어(사이드바의 flex 항목이라 꽉 참)와 폭이 달랐다(요청).
사이드바와 같은 세로 flex 를 줘서 같은 폭·같은 간격으로 맞춘다. */
[data-nav-menu-list] { display: flex; flex-direction: column; gap: 2px; }
/* "메뉴" 머리줄은 사용자/기념일 칸의 .panel-card-head 그대로 — 항목 위 한 줄. */
/* 머리줄 아래 간격을 다른 칸과 같은 8px 로 — 세로 flex 의 gap(2px)이 더해지므로 6px. */
.shared-nav > .panel-card-head { margin-bottom: 6px; }
/* 메뉴 한 줄 — 항목을 그대로 끌어 순서를 바꾼다(손잡이 없음). */
.shared-nav-row { display: flex; align-items: center; }
.shared-nav-row .shared-nav-item { flex: 1 1 auto; min-width: 0; }
/* 기념일 추가/수정 팝업 — 아이콘 버튼 + 이름·날짜 칸. */
.shared-anniv-dialog-row { display: flex; align-items: flex-start; gap: 10px; text-align: left; }
.shared-anniv-dialog-fields { flex: 1 1 auto; min-width: 0; }
/* 추가 줄(임시)은 기념일 편집 줄과 같은 뼈대를 쓴다 — 손잡이 자리는 비워 두어야
이름칸이 위 줄들과 같은 x 에서 시작한다. */
/* 공용 커스텀 체크박스(.settings-checkbox)를 쓰되, 기본 모양은 사진 위에 겹쳐도
보이게 만든 것이라(2px 테두리 + 그림자) 11px 글자 옆 좁은 줄에서는 혼자 크고
무겁다(요청: 화면이 이상함). 이 줄에서만 글자 크기에 맞게 눌러 준다. */
.shared-nav-manage-check { font-size: 11px; gap: 5px; }
.shared-nav-manage-check .settings-checkbox-box {
width: 13px;
height: 13px;
border-width: 1px;
border-radius: 3px;
box-shadow: none;
}
/* 체크 표시도 상자에 맞춰 줄인다 — 기본값(16px 상자 기준)이면 상자 밖으로 나가고,
top 을 0 으로 두면 위로 치우쳐 보인다(요청). 11px 안쪽 기준으로 가운데에 둔다. */
.shared-nav-manage-check .settings-checkbox-box::after { left: 4px; top: 2px; width: 3px; height: 7px; border-width: 0 2px 2px 0; }
/* 숨겨진 은 position:absolute 에 1px 이라, 클릭으로 포커스가 갈 때 브라우저가
그걸 보이게 하려고 조상(.shared-record)을 스크롤한다 — 창 본문이 통째로 튀었다(요청).
라벨을 기준 상자로 삼고 입력을 그 왼쪽 위에 붙여, 이미 보이는 자리에 있게 한다. */
.shared-nav-manage-check { position: relative; }
.shared-nav-manage-check .settings-checkbox-input { left: 0; top: 0; margin: 0; }
.shared-nav-item.is-sub { padding-left: 30px; }
.shared-nav-item { justify-content: space-between; }
/* 항목 글자는 "메뉴" 머리줄과 같은 x 에서 시작한다(요청) — 왼쪽 3px 활성 테두리를 뺀 값이라
12+3 = 머리줄의 15px 과 맞는다. */
.shared-side .shared-nav .shared-nav-item { padding-left: 12px; }
.shared-side .shared-nav .shared-nav-item.is-sub { padding-left: 27px; }
/* .normal-button(0,1,0 !important) 을 이기려고 클래스를 하나 더 얹는다. */
.shared-nav-item.normal-button {
border: 0 !important;
border-left: 3px solid transparent !important;
border-radius: 6px;
background: transparent !important;
color: var(--system-c-area-b-base-font-color) !important;
}
/* hover 는 .normal-button:hover(0,2,0 !important) 라 한 단계 더 필요하다. */
.shared-nav-item.normal-button:hover,
.shared-nav-item.normal-button:focus-visible {
background: rgba(var(--system-c-area-b-accent-rgb), var(--system-c-area-b-accent-alpha)) !important;
color: var(--system-c-area-b-accent-font-color) !important;
}
/* 활성 — 강조 배경 없이 왼쪽 Focus 테두리 한 줄로만 표시한다(요청).
그 줄이 각지게 보이도록 라운딩도 없앤다. */
.shared-nav-item.normal-button.is-active {
border-left-color: var(--focus-color) !important;
border-radius: 0;
background: transparent !important;
color: var(--system-c-area-b-base-font-color) !important;
}
/* 눌러도 되는 곳이 아닌 항목(준비중)은 hover 강조를 주지 않는다. */
.shared-nav-item.normal-button.is-disabled:hover {
background: transparent !important;
color: var(--system-c-area-b-base-font-color) !important;
}
.shared-nav-divider { height: 1px; background: rgba(var(--system-c-area-b-base-divider-rgb), var(--system-c-area-b-base-divider-alpha)); margin: 4px 0; }
.shared-nav-group { font-size: 11px; opacity: .6; padding: 6px 8px 2px 18px; }
/* 페어 메뉴의 타임라인/채팅/백업 — 아직 기능 없음, 눌러도 "준비중" 안내만. */
.shared-nav-item.is-disabled { opacity: .45; cursor: not-allowed; }
/* 캘린더 */
.shared-cal-head { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 8px; }
.shared-cal-grid {
display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
}
.shared-cal-wd { text-align: center; font-size: 11px; opacity: .6; padding: 2px 0; }
.shared-cal-cell {
min-height: 62px; border: 1px solid rgba(var(--system-c-area-b-base-divider-rgb), var(--system-c-area-b-base-divider-alpha)) !important;
border-radius: 5px; padding: 3px; display: flex; flex-direction: column; gap: 2px;
}
.shared-cal-cell.is-empty { border-color: transparent; }
/* 요일 색·오늘 테두리는 가계부 캘린더(.budget-calendar-*)와 같은 값·같은
클래스 이름을 쓴다 — 이 레포에 캘린더 공용 CSS가 없어 규약만 맞춘다.
is-empty 는 앞 줄에서 테두리를 지우므로 그 뒤에 와야 오늘/주말이 이긴다. */
.shared-cal-wd.is-sun,
.shared-cal-cell.is-sun .shared-cal-num { color: #e05252; }
.shared-cal-wd.is-sat,
.shared-cal-cell.is-sat .shared-cal-num { color: #4a7fd0; }
.shared-cal-cell.is-today {
outline: 2px solid var(--focus-color);
outline-offset: -2px;
}
.shared-cal-num { font-size: 11px; opacity: .7; }
.shared-cal-mark {
font-size: 10px;
background: color-mix(in srgb, var(--system-c-area-b-accent-color) calc(var(--system-c-area-b-accent-alpha) * 100%), rgba(var(--system-c-area-b-base-rgb), var(--system-c-area-b-base-alpha)));
color: var(--system-c-area-b-accent-font-color);
border-radius: 4px; padding: 0 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 후기 */
/* 셀 자체는 .grid-cell(그림/영화후기/캐릭터 공용)을 쓰되, 여기서는 카드 옷을
벗긴다 — 이 목록이 놓이는 본문 영역(.shared-main)이 이미 영역 B 카드라,
테두리 있는 셀을 그대로 두면 카드 안에 카드가 늘어선 모양이 된다.
캐릭터 이미지 그리드가 같은 이유로 쓰는 처리와 같다
([data-character-images-grid] > .character-image-cell, character.css). */
/* gap 은 다른 목록 그리드(.grid, homepage.css)와 같은 3px(요청). */
.shared-review-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 3px; }
/* 후기 셀은 영역 B(본문 카드) 위에 얹히는 컨텐츠라 영역 C 를 쓴다(요청) — 예전엔
배경을 투명하게 두고 그림자로만 구분했다. */
.shared-review-grid > .grid-cell {
border: 1px solid rgba(var(--system-c-area-c-base-border-rgb), var(--system-c-area-c-base-border-alpha)) !important;
border-radius: 9px;
padding: 7px;
background: rgba(var(--system-c-area-c-base-rgb), var(--system-c-area-c-base-alpha)) !important;
color: var(--system-c-area-c-base-font-color) !important;
box-shadow: 0 0 5px -2px rgba(0, 0, 0, .14) !important;
}
/* hover 는 .grid-cell:hover 가 이미 그리는데, 위 규칙이 같은 특이도(0,2,0)로
뒤에 와서 배경·그림자를 눌러 버린다 — 테두리만 빼고 그 값들을 그대로 다시 준다. */
.shared-review-grid > .grid-cell:hover {
background-color: color-mix(in srgb, var(--system-c-area-c-accent-color) calc(var(--system-c-area-c-accent-alpha) * 100%), rgba(var(--system-c-area-c-base-rgb), var(--system-c-area-c-base-alpha))) !important;
background-image: none !important;
color: var(--system-c-area-c-accent-font-color) !important;
box-shadow: inset 0 1px 0 1px rgb(0 0 0 / 10%),
0 5px 14px rgba(var(--system-c-area-c-accent-border-rgb), .16) !important;
}
/* 내 후기 에디터의 [취소][저장] — 제목·공개범위가 없어 비어버린 머리줄 대신
서식 툴바 오른쪽 끝에 붙인다(openReviewPostEditor). */
/* 후기 상세는 캐릭터 상세의 관계란(.panel-card)과 같은 영역 B
카드 한 장이다(요청) — 작품 정보가 카드 머리, 후기들이 그 본문. 그 카드의 규칙은
"카드는 하나, 안의 행은 자기 테두리를 갖지 않는다"라, 후기 박스의 테두리를 떼고
영역 B 구분선으로만 나눈다(관계란·댓글 스레드와 같은 방식). 예전처럼 두면 카드
안에 또 카드가 들어가 같은 내용을 셀로 두 번 그리는 모양이 된다. */
/* 영화 후기 메뉴의 상세 정보 블록(.movie-detail-info, homepage.css)과 같은 2단 —
포스터 120px + 정보 열. 그쪽의 margin/padding/그림자 구분선 대신 이 카드가 쓰는
영역 B 구분선을 그대로 둔다(카드 머리 역할이라 divider 가 이미 있다). */
.shared-review-detail-head {
display: grid;
grid-template-columns: 120px 1fr;
align-items: stretch;
gap: 16px;
padding: 0 4px 12px;
border-bottom: 1px solid rgba(var(--system-c-area-b-base-divider-rgb), var(--system-c-area-b-base-divider-alpha)) !important;
}
/* 화면을 바꾸는 동안(응답 대기) — 내용을 비우지 않고 흐리게만 둔다. 크기가
그대로라 흰 판이 늘었다 줄어들지 않는다(요청). 대기 중 조작은 막는다. */
.shared-main.is-view-loading {
opacity: .45;
pointer-events: none;
}
.shared-review-posts { display: flex; flex-direction: column; }
.shared-review-post {
border: 0 !important;
border-radius: 0;
padding: 12px 4px;
}
/* 첫 후기는 위 머리의 구분선을 그대로 쓴다 — 두 줄이 겹치지 않게 두 번째부터만. */
.shared-review-post + .shared-review-post {
border-top: 1px solid rgba(var(--system-c-area-b-base-divider-rgb), var(--system-c-area-b-base-divider-alpha)) !important;
}
/* 별 하나 + 점수 토큰 — 카드 메타 줄·후기 헤더처럼 별 다섯 개 위젯이 들어갈 자리가
없는 곳. 별은 Focus 색, 점수는 글자색. */
.shared-star { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 700; line-height: 1; }
.shared-star-glyph { color: var(--focus-color); }
/* 목록 카드의 "누가 몇 점" — 포스터 좌측 상단에 세로로 쌓는 태그(요청).
제목 아래 줄로 두면 사람이 셋만 되어도 카드가 길어졌는데, 포스터 위 오버레이는
몇 개가 쌓이든 카드 높이에 영향이 없다. 배지 껍데기는 썸네일 위 다른 배지
(.post-thumb-image-badge, homepage.css)와 같은 값이다. */
.shared-review-card-people {
position: absolute;
/* 포스터 모서리에 더 붙인다(요청) — 6px 는 별점 칩이 그림 안쪽으로 들어와 보였다. */
left: 2px;
top: 2px;
z-index: 2;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 3px;
pointer-events: none;
}
.shared-review-card-person {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 2px 5px;
border-radius: 10px;
background: rgba(var(--system-c-area-b-base-rgb), var(--system-c-area-b-base-alpha));
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);
}
/* 태그 안이라 아바타를 더 줄인다(요청) — 별점 글자 높이에 맞춘 크기. */
.shared-review-card-person .avatar-circle {
width: 14px;
height: 14px;
flex: 0 0 14px;
}
.shared-review-card-person .avatar-circle svg { width: 10px; height: 10px; }
.shared-review-card-person .shared-star { font-size: 11px; }
.shared-review-card-count { font-size: 12px; color: var(--system-c-area-b-base-desc-font-color); }
/* 후기 헤더의 이름 줄 — 이름 옆에 별점 토큰. */
/* 후기 헤더: 윗줄 "이름 @아이디", 아랫줄 별점(요청). 이름 줄은 폭이 모자라면
아이디부터 줄어든다. */
/* 별점 — 댓글 포맷에는 없는 것이라 이름 줄 아래 자기 줄을 쓴다(요청). */
.shared-review-author-rating { display: block; margin-top: 2px; }
/* 사이드바 사용자/캐릭터 한 줄. 초대 중 칩은 반투명. */
.shared-member-row { display: flex; align-items: center; gap: 4px; }
/* 사용자 칩은 라 캐릭터 칩(