)이 자동 배치돼버려 카드 전체 너비 대신 180px
폭에 갇혀 있었습니다("2 CARDS →"가 이상한 위치에 있던 진짜 원인). 이미지 없는 카드는
한 칸짜리 그리드로 바꿔서 글자 영역이 카드 전체 너비를 쓰게 합니다 — 그러면
footer의 기존 margin-left:auto가 정상적으로 "CARDS" 배지를 오른쪽 끝으로 밀어줍니다. */
.tale-list-card:not(:has(> figure)) {
grid-template-columns: 1fr;
}
.tale-list-card:hover {
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(45, 35, 35, 0.07);
border-color: color-mix(in srgb, var(--accent) 30%, #ddd);
}
.tale-list-card > figure {
margin: 0;
min-height: 150px;
background: #ece9e6;
}
.tale-list-card > figure img {
width: 100%;
height: 100%;
object-fit: cover;
}
.tale-list-card > div {
padding: 21px 23px;
}
.tale-list-card small {
font-size: 9px;
letter-spacing: 0.16em;
color: #a49c98;
font-weight: 700;
}
.tale-list-card h2 {
font-size: 23px;
margin: 5px 0 7px;
letter-spacing: -0.035em;
}
.tale-list-card p {
margin: 0;
color: #726b68;
font-size: 13px;
line-height: 1.65;
}
.tale-list-card footer {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
margin-top: 14px;
}
.tale-list-card footer span {
font-size: 10px;
padding: 4px 8px;
border-radius: 999px;
background: color-mix(in srgb, var(--accent) 9%, #fff);
color: color-mix(in srgb, var(--accent) 78%, #555);
}
.tale-list-card footer b {
margin-left: auto;
font-size: 9px;
letter-spacing: 0.12em;
color: #8f8783;
}
.tales-empty {
padding: 48px 20px;
text-align: center;
border: 1px dashed rgba(80, 70, 70, 0.18);
border-radius: 18px;
color: #8e8783;
}
.tales-empty b {
display: block;
margin-bottom: 5px;
letter-spacing: 0.12em;
}
.tales-back {
border: 0;
background: none;
padding: 0 0 18px;
color: #827a77;
font-weight: 800;
letter-spacing: 0.08em;
cursor: pointer;
}
.tale-detail-head {
padding: 18px 0 25px;
border-bottom: 1px solid rgba(70, 60, 60, 0.12);
margin-bottom: 26px;
}
.tale-detail-head h1 {
font-size: clamp(36px, 5vw, 62px);
}
.tale-detail-head > div {
display: flex;
align-items: center;
gap: 7px;
flex-wrap: wrap;
margin-top: 14px;
}
.tale-detail-head span {
font-size: 10px;
padding: 5px 9px;
border-radius: 999px;
background: color-mix(in srgb, var(--accent) 10%, #fff);
color: var(--accent);
}
.tale-detail-head time {
margin-left: auto;
font-size: 10px;
color: #9a928f;
letter-spacing: 0.08em;
}
.tale-block-stack {
display: grid;
gap: 20px;
}
.tale-text-card,
.tale-dialogue-card,
.tale-image-card,
.tale-qa-card {
margin: 0;
border: 1px solid rgba(80, 70, 70, 0.11);
border-radius: 18px;
background: rgba(255, 255, 255, 0.68);
overflow: hidden;
}
/* v0.3.224 — 문답(Q&A) 카드. 오늘의 썰에서 뽑힌 질문을 그대로 채워 쓰는 용도. */
.tale-qa-card {
padding: 6px 20px;
}
.tale-qa-item {
padding: 18px 0;
border-bottom: 1px solid rgba(80, 70, 70, 0.08);
}
.tale-qa-item:last-child {
border-bottom: 0;
}
.tale-qa-q,
.tale-qa-a {
margin: 0;
font-size: 15px;
line-height: 1.8;
color: #4b4745;
word-break: keep-all;
}
.tale-qa-q {
margin-bottom: 8px;
font-weight: 700;
}
.tale-qa-q b,
.tale-qa-a b {
margin-right: 4px;
color: var(--accent, #9f7d86);
font-weight: 800;
}
.tale-text-card {
padding: 27px 30px;
}
.tale-rich-view {
font-size: 15px;
line-height: 1.9;
color: #4b4745;
word-break: keep-all;
}
.tale-rich-view p,
.tale-rich-view div {
margin: 0.25em 0 0.8em;
}
.tale-image-card {
padding: 12px;
}
.tale-image-card img {
display: block;
width: 100%;
height: auto;
max-height: 82vh;
object-fit: contain;
border-radius: 12px;
background: #f2f0ed;
}
.tale-image-empty {
height: 260px;
display: grid;
place-items: center;
color: #aaa;
background: #f0eeeb;
border-radius: 12px;
}
.tale-image-card figcaption {
padding: 12px 7px 3px;
text-align: center;
color: #817a77;
font-size: 12px;
line-height: 1.6;
}
.tale-dialogue-card {
padding: 18px 20px;
}
.tale-dialogue-line {
display: grid;
grid-template-columns: 48px 1fr;
gap: 13px;
padding: 14px 0;
border-bottom: 1px solid rgba(80, 70, 70, 0.08);
}
.tale-dialogue-line:last-child {
border-bottom: 0;
}
.tale-dialogue-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
overflow: hidden;
background: color-mix(in srgb, var(--dc) 12%, #eee);
border: 2px solid color-mix(in srgb, var(--dc) 54%, #fff);
}
.tale-dialogue-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.tale-dialogue-avatar .art-fallback {
width: 100%;
height: 100%;
display: grid;
place-items: center;
}
.tale-dialogue-line small {
display: block;
color: var(--dc);
font-size: 10px;
font-weight: 800;
margin-bottom: 4px;
}
.tale-dialogue-line .tale-rich-view {
font-size: 14px;
line-height: 1.75;
}
/* v0.3.88 — 나레이션: 캐릭터 카드 프리셋에서 왼쪽 프사·이름 없이 가운데 정렬로 표시 */
.tale-dialogue-line.narration {
display: block;
text-align: center;
padding: 10px 8px;
}
.tale-dialogue-line.narration .tale-rich-view {
display: inline-block;
font-style: italic;
color: #8b8380;
}
.annotation-editor-list {
display: grid;
gap: 8px;
}
.annotation-editor-row {
display: grid;
grid-template-columns: minmax(70px, 0.65fr) 1.5fr 30px;
gap: 6px;
align-items: start;
}
/* v0.3.229 — 이 칸들이 border/background 지정이 하나도 없어서 브라우저 기본
입력창 그대로 보이던 문제. 에디터의 다른 입력칸들과 같은 다크 톤으로 맞췄습니다. */
.annotation-editor-row input,
.annotation-editor-row textarea {
min-width: 0;
border: 1px solid #35333a;
border-radius: 8px;
background: #19181c;
color: #f0eef3;
padding: 8px 10px;
font: inherit;
font-size: 12px;
}
.annotation-editor-row textarea {
min-height: 62px;
resize: vertical;
}
.trio-editor-person {
padding: 11px;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
margin-bottom: 10px;
background: rgba(255, 255, 255, 0.025);
}
.trio-member-field .trio-member-picker {
margin-top: 6px;
}
.trio-member-field > small {
display: block;
margin-top: 8px;
}
.trio-editor-person header {
display: flex;
align-items: center;
gap: 9px;
margin-bottom: 10px;
}
.trio-editor-person header > div:last-child {
display: flex;
flex-direction: column;
}
.trio-editor-person header small {
font-size: 9px;
opacity: 0.55;
}
.trio-editor-colors {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
margin: 8px 0;
}
.trio-editor-colors label {
font-size: 9px;
color: #aaa;
}
.trio-editor-colors input {
display: block;
width: 100%;
height: 30px;
margin-top: 4px;
padding: 2px;
}
.trio-editor-upload {
display: grid;
grid-template-columns: 1fr auto auto;
align-items: center;
gap: 6px;
margin: 8px 0;
padding: 7px;
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: 9px;
}
.trio-editor-upload > span {
grid-column: 1/-1;
font-size: 10px;
color: #bbb;
}
.trio-editor-upload img {
width: 46px;
height: 46px;
object-fit: contain;
border-radius: 6px;
background: #fff;
}
.trio-editor-upload small {
font-size: 9px;
color: #777;
}
.trio-editor-upload label input {
display: none;
}
.trio-editor-upload > small:last-child {
grid-column: 1 / -1;
line-height: 1.5;
}
.trio-editor-badges {
margin: 10px 0;
padding: 9px;
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: 9px;
}
.trio-editor-badges > span {
display: block;
margin-bottom: 7px;
font-size: 10px;
color: #bbb;
}
.trio-editor-badges > div {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 6px;
}
.trio-editor-badges article {
min-width: 0;
display: flex;
flex-direction: column;
gap: 5px;
}
.trio-editor-badges article > img,
.trio-editor-badges article > i {
width: 100%;
aspect-ratio: 1;
display: grid;
place-items: center;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
background: var(--badge-color);
color: rgba(255, 255, 255, 0.82);
font-size: 10px;
font-style: normal;
}
.trio-editor-badges article > img {
object-fit: cover;
object-position: center;
}
.trio-editor-badges .ebtn {
width: 100%;
min-width: 0;
padding-inline: 4px;
text-align: center;
font-size: 8px;
}
.trio-editor-badges label input {
display: none;
}
.trio-editor-badges > small {
display: block;
margin-top: 7px;
font-size: 9px;
line-height: 1.5;
color: #777;
}
.trio-editor-relation {
padding: 9px;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 10px;
margin-bottom: 8px;
}
.trio-editor-relation > b {
display: block;
font-size: 11px;
margin-bottom: 7px;
}
.trio-editor-relation label {
display: block;
font-size: 9px;
color: #aaa;
margin: 6px 0;
}
.trio-editor-relation textarea {
display: block;
width: 100%;
min-height: 58px;
margin-top: 4px;
}
.modal.tale-editor-modal {
width: min(900px, calc(100vw - 28px));
max-height: min(92vh, 950px);
overflow: auto;
}
.tale-meta-grid {
display: grid;
grid-template-columns: 1fr 0.5fr;
gap: 10px;
}
.tale-modal-blocks {
display: grid;
gap: 11px;
margin: 12px 0;
}
.tale-editor-block {
border: 1px solid rgba(70, 60, 60, 0.13);
border-radius: 13px;
background: #fbfaf9;
overflow: hidden;
}
.tale-editor-block.dragging {
opacity: 0.45;
}
.tale-editor-block.drag-over {
outline: 2px solid var(--accent);
}
.tale-editor-block-head {
height: 38px;
display: flex;
align-items: center;
gap: 8px;
padding: 0 8px 0 10px;
border-bottom: 1px solid rgba(70, 60, 60, 0.09);
background: #f4f1ee;
}
.tale-editor-block-head .tale-block-grip {
cursor: grab;
font-size: 18px;
color: #8d8581;
user-select: none;
}
.tale-editor-block-head b {
font-size: 11px;
}
.tale-editor-block-head > span:nth-of-type(2) {
margin-left: auto;
font-size: 9px;
color: #aaa;
}
.tale-editor-block-head > button {
border: 0;
background: none;
font-size: 18px;
color: #918985;
cursor: pointer;
}
.tale-rich-toolbar {
display: flex;
align-items: center;
gap: 4px;
padding: 7px 9px;
border-bottom: 1px solid rgba(70, 60, 60, 0.08);
background: #fff;
}
.tale-rich-toolbar button,
.tale-rich-toolbar label {
height: 28px;
min-width: 30px;
display: grid;
place-items: center;
border: 1px solid rgba(70, 60, 60, 0.14);
border-radius: 7px;
background: #fff;
color: #4d4846;
font-size: 11px;
cursor: pointer;
}
.tale-rich-toolbar label {
position: relative;
overflow: hidden;
}
.tale-rich-toolbar input[type="color"] {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
.tale-rich-editor {
min-height: 64px;
padding: 10px 12px;
background: #fff;
color: #383432;
border: 0;
outline: none;
font-size: 13px;
line-height: 1.7;
}
.tale-rich-large {
min-height: 120px;
}
.tale-rich-editor:focus {
box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent);
}
.tale-add-row {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin: 9px 0 18px;
}
.tale-editor-image {
display: flex;
align-items: center;
justify-content: center;
min-height: 150px;
padding: 10px;
position: relative;
background: #eeeae7;
outline: none;
cursor: text;
border: 1px solid transparent;
border-radius: 8px;
}
/* v0.3.132 — 클릭 후 Ctrl+V로 이미지를 바로 붙여넣을 수 있는 영역이라는 걸 보이게 합니다. */
.tale-editor-image:focus {
border-color: #8b6471;
}
.tale-image-paste-hint {
display: block;
color: #a39b97;
font-size: 10px;
margin: 5px 0 8px;
}
.tale-editor-image img {
max-width: 100%;
max-height: 300px;
object-fit: contain;
}
.tale-editor-image > span {
color: #a39b97;
letter-spacing: 0.15em;
}
.tale-editor-image label {
position: absolute;
right: 10px;
bottom: 10px;
}
.tale-editor-image input {
display: none;
}
.tale-editor-block > input[data-tale-caption] {
width: calc(100% - 18px);
margin: 9px;
}
.tale-editor-dialogue-line {
border-bottom: 1px solid rgba(70, 60, 60, 0.08);
}
.tale-dialogue-edit-row {
display: grid;
grid-template-columns: 140px 1fr 32px;
gap: 7px;
align-items: start;
padding: 8px;
}
.tale-dialogue-edit-row .tale-rich-editor {
min-height: 68px;
border: 1px solid rgba(70, 60, 60, 0.12);
border-radius: 8px;
}
.tale-dialogue-edit-row > button {
height: 32px;
border: 1px solid rgba(70, 60, 60, 0.12);
border-radius: 7px;
background: #fff;
cursor: pointer;
}
@media (max-width: 780px) {
.trio-page,
.tales-page {
padding: 32px 15px 90px;
}
.trio-top-grid,
.trio-body-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.trio-top-grid {
display: grid;
}
.trio-person-head {
display: grid;
grid-template-columns: 92px 1fr;
grid-template-rows: auto auto auto;
column-gap: 15px;
text-align: left;
align-items: center;
padding: 10px;
}
.trio-avatar {
grid-row: 1/4;
width: 92px;
margin: 0;
}
.trio-person-head h2 {
font-size: 20px;
}
.trio-person-head p {
margin: 2px 0 6px;
min-height: 0;
}
.trio-colors {
justify-content: flex-start;
}
.trio-colors i {
width: 25px;
height: 25px;
}
.trio-relations {
grid-template-columns: 1fr;
margin-bottom: 22px;
}
.trio-full-art {
height: min(66vh, 520px);
}
.tale-list-card {
grid-template-columns: 1fr;
}
.tale-list-card > figure {
max-height: 240px;
}
.tale-list-card > div {
padding: 17px;
}
.tale-detail-head time {
width: 100%;
margin: 3px 0 0;
}
.tale-text-card {
padding: 21px 19px;
}
.tale-dialogue-card {
padding: 12px;
}
.tale-dialogue-line {
grid-template-columns: 40px 1fr;
gap: 10px;
}
.tale-dialogue-avatar {
width: 38px;
height: 38px;
}
.tale-meta-grid {
grid-template-columns: 1fr;
}
.tale-dialogue-edit-row {
grid-template-columns: 1fr 32px;
}
.tale-dialogue-edit-row .lope-select,
.tale-dialogue-edit-row select {
grid-column: 1/-1;
}
.annotation-editor-row {
grid-template-columns: 1fr 32px;
}
.annotation-editor-row textarea {
grid-column: 1/2;
}
.annotation-editor-row button {
grid-column: 2;
grid-row: 1/3;
}
.lope-annotation-note {
left: 0;
transform: translate(0, 5px);
max-width: 78vw;
}
.lope-annotation:hover .lope-annotation-note,
.lope-annotation:focus .lope-annotation-note,
.lope-annotation:focus-within .lope-annotation-note {
transform: translate(0, 0);
}
}
/* v0.3.85 · pair profile layout presets */
.pair-direction-title {
display: grid;
grid-template-columns: 1fr 42px 1fr;
align-items: center;
gap: 8px;
margin-bottom: 4px;
font:
700 8px/1 Arial,
sans-serif;
letter-spacing: 0.06em;
color: #827a7e;
}
.pair-direction-title span:first-child {
text-align: right;
}
.pair-direction-title span:last-child {
text-align: left;
}
.pair-direction-title strong {
display: grid;
place-items: center;
width: 36px;
height: 25px;
border-radius: 999px;
margin: auto;
background: color-mix(in srgb, var(--c), #fff 83%);
color: var(--c);
font:
700 20px/1 Arial,
sans-serif;
}
.pair-personal-galleries {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.pair-personal-gallery {
border: 1px solid color-mix(in srgb, var(--c), #d7d0cd 72%);
background: rgba(255, 255, 255, 0.88);
padding: 12px;
border-radius: 17px;
}
.pair-personal-gallery > header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
.pair-personal-gallery > header .pair-info-avatar {
width: 42px;
height: 42px;
border-width: 3px;
}
.pair-personal-gallery > header small {
display: block;
font:
700 6px/1 Arial,
sans-serif;
letter-spacing: 0.16em;
color: #aaa;
}
.pair-personal-gallery > header b {
font:
600 15px/1.2 Georgia,
"Noto Serif KR",
serif;
}
.pair-personal-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 7px;
}
.pair-personal-grid figure {
height: 170px;
margin: 0;
border-radius: 11px;
overflow: hidden;
background: #eeeae7;
border: 1px solid #ded7d3;
display: grid;
place-items: center;
}
.pair-personal-grid img {
width: 100%;
height: 100%;
object-fit: cover;
}
.pair-personal-grid span {
font:
700 7px/1 Arial,
sans-serif;
letter-spacing: 0.12em;
color: #aaa;
}
.pair-preset {
min-height: 100vh;
padding: 72px max(18px, calc((100vw - 1320px) / 2)) max(92px, calc(env(safe-area-inset-bottom) + 82px));
background: linear-gradient(
120deg,
color-mix(in srgb, var(--a), #fff 94%),
#f7f5f1 45%,
color-mix(in srgb, var(--b), #fff 94%)
);
color: #1d1b20;
overflow: hidden;
}
.pair-preset-head {
text-align: center;
margin: 0 auto 22px;
}
.pair-preset-head > small {
font:
700 7px/1 Arial,
sans-serif;
letter-spacing: 0.22em;
color: #9a9297;
}
.pair-preset-head h1 {
font:
500 clamp(36px, 5vw, 70px)/1 Georgia,
"Noto Serif KR",
serif;
margin: 7px 0 9px;
}
.pair-preset-head > div {
display: flex;
justify-content: center;
gap: 6px;
flex-wrap: wrap;
}
.pair-preset-head > div span {
font-size: 8px;
padding: 5px 8px;
border: 1px solid #d7d0cd;
border-radius: 999px;
background: #fff9;
}
.pair-preset .pair-info-avatar {
flex: 0 0 auto;
}
.pair-edge-v4.inside {
position: absolute;
top: 2%;
bottom: 0;
width: 58%;
height: 98%;
z-index: 2;
opacity: 1;
pointer-events: none;
}
.pair-edge-v4.inside.left {
left: -7%;
}
.pair-edge-v4.inside.right {
right: -7%;
}
.pair-edge-v4.inside img {
object-position: center bottom;
}
/* full body preset */
.pair-fullbody-stage {
display: grid;
grid-template-columns: minmax(220px, 0.72fr) minmax(480px, 1.55fr) minmax(220px, 0.72fr);
gap: 18px;
min-height: 620px;
align-items: stretch;
}
.pair-fullbody-copy {
align-self: center;
background: #fffc;
border: 1px solid color-mix(in srgb, var(--c), #d7d0cd 70%);
border-radius: 22px;
padding: 23px;
position: relative;
z-index: 4;
}
.pair-fullbody-copy.right {
text-align: right;
}
.pair-fullbody-copy.right .pair-info-avatar {
margin-left: auto;
}
.pair-fullbody-copy .pair-info-avatar {
width: 76px;
height: 76px;
margin-bottom: 14px;
}
.pair-fullbody-copy > small {
font:
700 7px/1 Arial,
sans-serif;
letter-spacing: 0.15em;
color: var(--c);
}
.pair-fullbody-copy h2 {
font:
600 31px/1 Georgia,
serif;
margin: 7px 0 2px;
}
.pair-fullbody-copy > b {
font-size: 10px;
color: #7f777b;
}
.pair-fullbody-copy p {
font:
400 10px/1.8 "Noto Serif KR",
serif;
color: #655e62;
margin: 17px 0;
}
.pair-fullbody-tags {
display: flex;
gap: 5px;
flex-wrap: wrap;
}
.pair-fullbody-copy.right .pair-fullbody-tags {
justify-content: flex-end;
}
.pair-fullbody-tags span {
font-size: 7px;
border: 1px solid #ded7d3;
border-radius: 999px;
padding: 5px 7px;
}
.pair-fullbody-art {
position: relative;
min-height: 620px;
border-radius: 28px;
background: linear-gradient(180deg, #ffffff80, #ffffff20);
border: 1px solid #ded7d3;
overflow: hidden;
}
.pair-fullbody-name {
position: absolute;
left: 50%;
bottom: 18px;
transform: translateX(-50%);
z-index: 6;
text-align: center;
background: #fffde;
border: 1px solid #d8d1ce;
border-radius: 999px;
padding: 8px 24px;
white-space: nowrap;
}
.pair-fullbody-name small {
font:
700 6px/1 Arial,
sans-serif;
letter-spacing: 0.18em;
color: #aaa;
display: block;
}
.pair-fullbody-name b {
font:
600 20px/1.25 Georgia,
"Noto Serif KR",
serif;
}
.pair-fullbody-directions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-top: 14px;
}
.pair-fullbody-directions .pair-direction-v4 {
min-height: 130px;
}
/* status + timeline preset */
.pair-status-grid {
display: grid;
grid-template-columns: minmax(250px, 0.9fr) minmax(430px, 1.25fr) minmax(250px, 0.9fr);
gap: 16px;
align-items: start;
}
.pair-status-side,
.pair-status-center > article {
background: #fffd;
border: 1px solid #d8d1ce;
border-radius: 19px;
}
.pair-status-side {
padding: 22px;
}
.pair-status-side .pair-info-avatar {
width: 112px;
height: 112px;
margin: 0 auto 13px;
}
.pair-status-side > small,
.pair-status-side > h2,
.pair-status-side > b {
text-align: center;
display: block;
}
.pair-status-side > small {
color: var(--c);
font:
700 7px/1 Arial,
sans-serif;
letter-spacing: 0.15em;
}
.pair-status-side h2 {
font:
600 31px/1 Georgia,
serif;
margin: 7px 0 3px;
}
.pair-status-side > b {
font-size: 10px;
}
.pair-status-side > p {
min-height: 85px;
font:
400 9px/1.8 "Noto Serif KR",
serif;
color: #655e62;
margin: 16px 0;
}
.pair-status-bars {
border-top: 1px solid #e1dcd9;
padding-top: 12px;
}
.pair-status-bars > div {
display: grid;
grid-template-columns: 58px 1fr auto;
gap: 8px;
align-items: center;
margin: 8px 0;
}
.pair-status-bars span {
font-size: 7px;
color: #7d757a;
}
.pair-status-bars i {
height: 1px;
align-self: center;
background: repeating-linear-gradient(90deg, #cfc8c5 0 3px, transparent 3px 7px);
}
.pair-status-bars b {
font-size: 7px;
white-space: nowrap;
}
.pair-status-side blockquote {
margin: 18px 0 8px;
padding: 12px 14px;
border-radius: 12px;
background: color-mix(in srgb, var(--c), #fff 91%);
font:
500 10px/1.65 "Noto Serif KR",
serif;
}
.pair-status-reply {
font-size: 8px;
line-height: 1.6;
color: #70686d;
border-left: 2px solid var(--c);
padding-left: 10px;
white-space: pre-wrap;
}
.pair-status-center {
display: flex;
flex-direction: column;
gap: 10px;
}
.pair-world-card {
padding: 24px 26px;
}
.pair-world-card small,
.pair-mini-timeline header small,
.pair-danger-card small {
font:
700 7px/1 Arial,
sans-serif;
letter-spacing: 0.16em;
color: #9d9499;
}
.pair-world-card h2 {
font:
600 27px/1.2 Georgia,
"Noto Serif KR",
serif;
margin: 8px 0;
}
.pair-world-card p {
font:
400 10px/1.85 "Noto Serif KR",
serif;
white-space: pre-wrap;
color: #5d565a;
}
.pair-danger-card {
padding: 16px 20px;
}
.pair-danger-card header {
display: flex;
gap: 10px;
align-items: center;
}
.pair-danger-card header b {
font-size: 10px;
}
.pair-danger-card header strong {
margin-left: auto;
font:
600 15px/1 Georgia,
serif;
}
.pair-danger-meter {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 4px;
margin-top: 11px;
}
.pair-danger-meter i {
height: 13px;
border-radius: 4px;
background: #e8e3e1;
}
.pair-danger-meter i.on {
background: linear-gradient(90deg, var(--a), var(--b));
}
.pair-mini-timeline {
padding: 18px 20px;
}
.pair-mini-timeline > header {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 8px;
border-bottom: 1px solid #ddd6d2;
}
.pair-mini-timeline > header b {
font:
700 7px/1 Arial,
sans-serif;
letter-spacing: 0.1em;
color: #aaa;
}
.pair-mini-timeline > div {
display: grid;
grid-template-columns: 48px 1fr;
gap: 10px;
padding: 12px 0;
border-bottom: 1px solid #ebe6e3;
}
.pair-mini-timeline > div > strong {
font:
600 21px/1 Georgia,
serif;
}
.pair-mini-timeline section small {
font-size: 6px;
color: #aaa;
}
.pair-mini-timeline section b {
display: block;
font:
600 11px/1.3 "Noto Serif KR",
serif;
margin: 2px 0 4px;
}
.pair-mini-timeline section p {
font-size: 8px;
line-height: 1.55;
color: #7a7276;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.pair-empty-copy {
font-size: 9px;
color: #aaa;
padding: 16px 0;
}
/* large banner preset */
.pair-layout-banner {
background: #f4f2ef;
}
.pair-banner-hero {
height: min(55vh, 610px);
position: relative;
border: 1px solid #d1cbc8;
border-radius: 23px;
overflow: hidden;
background: #ddd;
}
.pair-banner-hero > img {
width: 100%;
height: 100%;
object-fit: cover;
transform: translate(var(--img-x, 0%), var(--img-y, 0%)) scale(var(--img-scale, 1));
}
.pair-banner-hero > div {
position: absolute;
inset: auto 20px 20px 20px;
background: #fffde;
border: 1px solid #fff;
border-radius: 16px;
padding: 13px 18px;
}
.pair-banner-hero small {
font:
700 7px/1 Arial,
sans-serif;
letter-spacing: 0.18em;
}
.pair-banner-hero h1 {
font:
600 clamp(31px, 4vw, 60px)/1 Georgia,
"Noto Serif KR",
serif;
margin: 4px 0;
}
.pair-banner-bottom {
display: grid;
grid-template-columns: 1fr 0.8fr 1fr;
gap: 14px;
margin-top: 14px;
}
.pair-banner-person,
.pair-banner-keywords {
background: #fffd;
border: 1px solid #d7d0cd;
border-radius: 18px;
padding: 20px;
}
.pair-banner-person {
display: grid;
grid-template-columns: 86px 1fr;
gap: 14px;
align-items: center;
}
.pair-banner-person .pair-info-avatar {
width: 82px;
height: 82px;
}
.pair-banner-person small {
font:
700 6px/1 Arial,
sans-serif;
color: var(--c);
}
.pair-banner-person h2 {
font:
600 28px/1 Georgia,
serif;
margin: 5px 0 2px;
}
.pair-banner-person > dl {
grid-column: 1/-1;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 5px;
margin: 5px 0 0;
}
.pair-banner-person dl div {
display: flex;
justify-content: space-between;
border-top: 1px solid #e5dfdc;
padding-top: 6px;
}
.pair-banner-person dt,
.pair-banner-person dd {
font-size: 7px;
margin: 0;
}
.pair-banner-person dt {
color: #aaa;
}
.pair-banner-keywords {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 7px;
}
.pair-banner-keywords > small {
font:
700 6px/1 Arial,
sans-serif;
letter-spacing: 0.18em;
color: #aaa;
}
.pair-banner-keywords h2 {
font:
600 28px/1.1 Georgia,
"Noto Serif KR",
serif;
margin: 3px 0 8px;
}
.pair-banner-keywords h2 img {
max-width: 180px;
max-height: 70px;
object-fit: contain;
}
.pair-banner-keywords span {
width: 100%;
border: 1px solid #d9d2cf;
border-radius: 4px;
padding: 8px 10px;
font-size: 8px;
}
/* playlist / lyric preset */
.pair-layout-playlist {
position: relative;
background:
radial-gradient(circle at 10% 12%, color-mix(in srgb, var(--a) 42%, transparent), transparent 38%),
radial-gradient(circle at 90% 18%, color-mix(in srgb, var(--b) 38%, transparent), transparent 40%),
linear-gradient(145deg, color-mix(in srgb, var(--p) 34%, #111218), #111218 72%);
color: #fff;
min-height: 100vh;
isolation: isolate;
}
.pair-player-bg {
position: absolute;
inset: -40px;
z-index: -2;
background-position: center;
background-size: cover;
filter: blur(28px) saturate(0.82);
opacity: 0.38;
}
.pair-layout-playlist:after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(color-mix(in srgb, var(--p) 13%, #11131a99), #0f1016d9 82%);
}
.pair-layout-playlist > header {
text-align: center;
}
.pair-layout-playlist > header small {
font:
700 7px/1 Arial,
sans-serif;
letter-spacing: 0.2em;
color: #ffffffa0;
}
.pair-layout-playlist > header h1 {
font:
500 clamp(33px, 4vw, 56px)/1 Georgia,
"Noto Serif KR",
serif;
margin: 8px 0;
color: #fff !important;
text-shadow: 0 2px 18px rgba(0,0,0,.42);
}
.pair-layout-playlist > header p {
font-size: 9px;
color: #ffffffa8;
}
.pair-player-stage {
display: grid;
grid-template-columns: 220px minmax(440px, 680px) 220px;
align-items: center;
justify-content: center;
gap: 24px;
margin-top: 28px;
}
.pair-player-person {
text-align: center;
}
.pair-player-person .pair-info-avatar {
width: 138px;
height: 138px;
margin: auto;
border-color: color-mix(in srgb, var(--c), #fff 36%);
box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 18%, transparent);
}
.pair-player-person-txt {
margin-top: 10px;
padding: 10px 13px 11px;
border: 1px solid color-mix(in srgb, var(--c), transparent 48%);
border-radius: 14px;
background: color-mix(in srgb, var(--c), #111218 76%);
box-shadow: 0 10px 24px rgba(0,0,0,.16);
}
.pair-player-person small {
display: block;
margin-top: 0;
font:
700 7px/1 Arial,
sans-serif;
letter-spacing: 0.15em;
color: #ffffffb8 !important;
}
.pair-player-person h2 {
font:
500 23px/1.2 Georgia,
"Noto Serif KR",
serif;
margin: 5px 0;
color: #fff !important;
text-shadow: 0 1px 8px rgba(0,0,0,.4);
}
.pair-player-person span {
font-size: 8px;
color: #ffffffc4 !important;
}
.pair-player-disc {
aspect-ratio: 1;
border-radius: 50%;
position: relative;
border: 2px solid color-mix(in srgb, var(--p), #fff 48%);
box-shadow:
0 0 0 9px color-mix(in srgb, var(--p) 12%, transparent),
0 0 0 12px color-mix(in srgb, var(--p), #fff 70%);
overflow: hidden;
background: #181b21;
}
.pair-player-disc > img {
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(0.62);
}
.pair-player-disc > i {
position: absolute;
inset: 17%;
border: 1px solid #ffffff45;
border-radius: 50%;
box-shadow:
0 0 0 14px #ffffff0b,
0 0 0 28px #ffffff0a;
}
.pair-player-lyrics {
position: absolute;
left: 15%;
right: 15%;
bottom: 12%;
height: 130px;
text-align: center;
display: grid;
place-items: center;
overflow: hidden;
}
.pair-player-lyrics article {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
opacity: 0;
animation: pairTrackCycle calc(var(--n) * 6s) infinite;
animation-delay: calc(var(--i) * 6s);
}
.pair-player-lyrics article:only-child,
.pair-player-lyrics article.static {
animation: none;
opacity: 1;
}
.pair-player-lyrics small {
font-size: 7px;
color: #ffffffa8;
}
.pair-player-lyrics b {
font:
600 14px/1.2 "Noto Serif KR",
serif;
margin: 4px 0;
}
.pair-player-lyrics p {
font:
400 13px/1.55 "Noto Serif KR",
serif;
margin: 0;
color: #fff;
text-shadow: 0 1px 4px #000;
}
.pair-player-progress {
width: min(800px, 78vw);
display: grid;
grid-template-columns: auto 1fr auto;
gap: 10px;
align-items: center;
margin: 32px auto 0;
font-size: 8px;
}
.pair-player-progress > i {
height: 2px;
background: #ffffff5c;
position: relative;
}
.pair-player-progress > i em {
position: absolute;
inset: 0 auto 0 0;
width: 40%;
background: linear-gradient(90deg, var(--a), var(--p), var(--b));
animation: pairProgress 6s linear infinite;
}
@keyframes pairTrackCycle {
0%,
14% {
opacity: 1;
transform: translateY(0);
}
17%,
96% {
opacity: 0;
transform: translateY(8px);
}
97%,
100% {
opacity: 0;
}
}
@keyframes pairProgress {
from {
width: 0;
}
to {
width: 100%;
}
}
/* poster / half body preset */
.pair-layout-poster {
/* v0.3.324 — 다른 스킨 색으로 바꿔도 이 배경만 고정 크림색이라 어색하다는 요청으로,
명도·채도는 그대로 두고 색상만 배경 · MAIN 색을 따라가도록 변경. */
background: hsl(from var(--accent) h 24% 96%);
}
.pair-poster-top {
display: grid;
grid-template-columns: 1fr minmax(220px, 0.6fr) 1fr;
align-items: center;
border-bottom: 1px solid #29282c;
margin-bottom: 0;
}
.pair-poster-top > div {
display: flex;
gap: 13px;
justify-content: center;
flex-wrap: wrap;
padding: 13px;
}
.pair-poster-top span {
font:
500 9px/1.3 "Noto Serif KR",
serif;
}
.pair-poster-top h1 {
text-align: center;
margin: 0;
padding: 12px;
border-left: 1px solid #29282c;
border-right: 1px solid #29282c;
font:
600 34px/1 Georgia,
"Noto Serif KR",
serif;
}
.pair-poster-top h1 img {
max-width: 240px;
max-height: 74px;
object-fit: contain;
}
.pair-poster-grid {
display: grid;
grid-template-columns: 1fr 1.35fr 1fr;
min-height: 690px;
border-bottom: 1px solid #29282c;
}
.pair-poster-copy {
padding: 64px 36px 32px;
position: relative;
z-index: 4;
}
.pair-poster-copy.right {
text-align: right;
}
.pair-poster-copy > small {
font:
700 8px/1 Arial,
sans-serif;
color: var(--c);
letter-spacing: 0.12em;
}
.pair-poster-copy h2 {
font:
600 clamp(38px, 4.2vw, 70px)/0.88 Georgia,
serif;
margin: 10px 0 5px;
}
.pair-poster-copy h3 {
font:
600 17px/1.2 "Noto Serif KR",
serif;
}
.pair-poster-mini {
display: flex;
flex-direction: column;
gap: 5px;
margin: 24px 0;
}
.pair-poster-copy.right .pair-poster-mini {
align-items: flex-end;
}
.pair-poster-mini span {
display: flex;
gap: 10px;
font-size: 8px;
}
.pair-poster-mini b {
color: var(--c);
}
.pair-poster-copy p {
font:
400 10px/1.8 "Noto Serif KR",
serif;
white-space: pre-wrap;
color: #575156;
}
/* v0.3.302 — 캐릭터 이미지를 자르는 레이어(.pair-poster-stage)와 말풍선 레이어를
분리하기 위한 안 잘리는 바깥 래퍼. 그리드 칸을 이 래퍼가 대신 차지하고, 안쪽
.pair-poster-stage는 inset:0으로 정확히 같은 자리를 채웁니다(기존과 동일하게 보임) —
말풍선만 이 래퍼의 형제로 옮겨서 스테이지 밖으로 드래그해도 잘리지 않습니다. */
.pair-poster-stage-wrap {
position: relative;
}
.pair-poster-stage {
position: absolute;
inset: 0;
border-left: 1px solid #29282c;
border-right: 1px solid #29282c;
overflow: hidden;
/* v0.3.334 — .pair-layout-poster 바깥 배경은 v0.3.324에서 배경·MAIN 색을
따라가게 고쳤는데, 그 안쪽 인물 스테이지(.pair-poster-stage)는 그대로
--a/--b(캐릭터 고유색, 기본값이 핑크 계열)로 남아 있어서 스킨 색을 바꿔도
계속 핑크로 보인다는 재차 리포트. 바깥과 같은 방식으로 accent 색상만
따라가도록 통일. */
background: linear-gradient(180deg, hsl(from var(--accent) h 22% 95%), hsl(from var(--accent) h 20% 90%));
}
.pair-poster-stage:before {
content: "";
position: absolute;
inset: 8% 8% auto;
height: 1px;
background: #29282c55;
}
.pair-poster-stage .pair-edge-v4.inside {
width: 66%;
top: 8%;
height: 92%;
}
.pair-poster-stage .pair-edge-v4.inside.left {
left: -13%;
}
.pair-poster-stage .pair-edge-v4.inside.right {
right: -13%;
}
.pair-poster-conversation {
position: absolute;
/* v0.3.302 — 옆 텍스트(.pair-poster-copy, z-index:4)·상단바(z-index:40)·하단
독(z-index:80)보다는 아래, 캐릭터 이미지(.pair-edge-v4, z-index:2)보다는 위에
오도록 자유롭게 옮긴 말풍선이 그 위 UI를 가리지 않게 합니다. */
z-index: 3;
inset: 14% 7% 10%;
display: flex;
flex-direction: column;
justify-content: center;
gap: 9px;
pointer-events: none;
}
.pair-poster-bubble {
position: relative;
width: fit-content;
/* v0.3.291 — 글자가 아주 짧으면(1~2글자) fit-content 너비가 border-radius(18px)보다
작아져서 말풍선이 둥근 사각형 대신 동그라미로 뭉개지고, 꼬리(:after, right/left:24px)도
테두리 밖으로 삐져나갔습니다. min-width로 최소 너비를 꼬리 위치보다 넉넉히 키워
짧은 대사에서도 항상 말풍선 모양을 유지합니다. */
min-width: 60px;
max-width: min(48%, 250px);
background: #fff;
border: 1px solid color-mix(in srgb, var(--c), #444 50%);
border-radius: 18px;
padding: 8px 14px;
font: 500 9px/1.45 "Noto Serif KR", serif;
box-shadow: 0 7px 20px #00000012;
text-align: center;
}
.pair-poster-bubble.left {
align-self: flex-start;
margin-right: 25%;
}
.pair-poster-bubble.right {
align-self: flex-end;
margin-left: 25%;
}
.pair-poster-bubble.left:after,
.pair-poster-bubble.right:after {
content: "";
position: absolute;
bottom: -7px;
width: 12px;
height: 12px;
background: #fff;
border-bottom: 1px solid color-mix(in srgb, var(--c), #444 50%);
transform: rotate(45deg);
}
.pair-poster-bubble.left:after {
right: 24px;
border-right: 1px solid color-mix(in srgb, var(--c), #444 50%);
}
.pair-poster-bubble.right:after {
left: 24px;
border-right: 1px solid color-mix(in srgb, var(--c), #444 50%);
}
/* v0.3.291 — 편집 모드에서만 말풍선을 직접 드래그로 옮길 수 있게 합니다. 방문자
화면(.pair-poster-conversation의 기본 pointer-events:none)은 그대로 두어, 아래
전신 이미지 드래그·클릭을 막지 않습니다. */
.site.editing .pair-poster-bubble {
pointer-events: auto;
cursor: grab;
touch-action: none;
}
.site.editing .pair-poster-bubble.is-dragging {
cursor: grabbing;
z-index: 20;
box-shadow: 0 10px 26px #00000022;
}
.pair-poster-conversation-empty {
align-self: center;
max-width: 220px;
padding: 10px 14px;
border: 1px dashed #7d74794f;
border-radius: 13px;
color: #70686d;
background: rgba(255,255,255,.72);
font-size: 8px;
line-height: 1.6;
text-align: center;
}
.relation-personal-image-editor {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 7px;
}
.relation-track-picker {
display: flex;
flex-direction: column;
gap: 8px;
}
.relation-track-group {
border: 1px solid #2f2d33;
border-radius: 9px;
padding: 9px;
}
.relation-track-group > b {
display: block;
font-size: 9px;
margin-bottom: 6px;
}
.relation-track-group label {
display: flex;
align-items: center;
gap: 7px;
padding: 5px 0;
font-size: 8px;
}
.relation-track-group input {
width: auto !important;
}
.relation-layout-field select {
font-weight: 700;
}
@media (max-width: 900px) {
.pair-personal-galleries,
.pair-fullbody-directions {
grid-template-columns: 1fr;
}
.pair-personal-grid figure {
height: 145px;
}
.pair-preset {
padding: 58px 12px max(92px, calc(env(safe-area-inset-bottom) + 82px));
}
.pair-fullbody-stage,
.pair-status-grid,
.pair-banner-bottom,
.pair-player-stage,
.pair-poster-grid {
grid-template-columns: 1fr;
}
.pair-fullbody-art {
min-height: 560px;
grid-row: 1;
}
.pair-fullbody-copy {
grid-row: auto;
}
.pair-status-side {
order: 2;
}
.pair-status-center {
order: 1;
}
.pair-banner-hero {
height: 44vh;
min-height: 320px;
}
.pair-player-stage {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 14px 10px;
}
.pair-player-person {
flex: 1 1 45%;
min-width: 0;
display: flex;
align-items: center;
gap: 8px;
text-align: left;
}
.pair-player-person .pair-info-avatar {
flex: none;
width: 40px;
height: 40px;
margin: 0;
}
.pair-player-person-txt {
min-width: 0;
margin-top: 0;
overflow: hidden;
}
.pair-player-person small {
display: block;
margin: 0;
font-size: 6px;
}
.pair-player-person h2 {
font-size: 12px;
margin: 2px 0 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pair-player-person span {
display: block;
font-size: 7px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pair-player-person.right {
flex-direction: row-reverse;
text-align: right;
order: 2;
}
.pair-player-person.left {
order: 1;
}
.pair-player-disc {
order: 3;
flex: 1 1 100%;
width: min(82vw, 560px);
margin: auto;
}
.pair-poster-top {
grid-template-columns: 1fr;
}
.pair-poster-top h1 {
border: 0;
border-top: 1px solid #29282c;
border-bottom: 1px solid #29282c;
}
.pair-poster-grid {
display: flex;
flex-direction: column;
}
.pair-poster-stage-wrap {
order: 1;
height: 620px;
}
.pair-poster-stage {
border-left: 0;
border-right: 0;
border-bottom: 1px solid #29282c;
}
.pair-poster-copy {
order: 2;
padding: 32px 24px;
}
.pair-poster-copy.right {
text-align: left;
}
.pair-poster-copy.right .pair-poster-mini {
align-items: flex-start;
}
.relation-personal-image-editor {
grid-template-columns: 1fr;
}
}
@media (max-width: 520px) {
.pair-personal-galleries {
grid-template-columns: 1fr;
}
.pair-personal-grid figure {
height: 125px;
}
.pair-preset-head h1 {
font-size: 38px;
}
.pair-fullbody-art {
min-height: 460px;
}
.pair-status-side .pair-info-avatar {
width: 88px;
height: 88px;
}
.pair-banner-person {
grid-template-columns: 64px 1fr;
}
.pair-banner-person .pair-info-avatar {
width: 60px;
height: 60px;
}
.pair-player-disc {
width: 88vw;
}
.pair-player-lyrics {
left: 10%;
right: 10%;
height: 115px;
}
.pair-player-lyrics p {
font-size: 11px;
}
.pair-poster-stage-wrap {
height: 500px;
}
.pair-poster-conversation {
inset: 12% 5% 8%;
gap: 7px;
}
.pair-poster-bubble {
max-width: 180px;
padding: 7px 11px;
font-size: 8px;
}
}
.trio-auto-note {
display: block;
margin-top: 3px;
font-size: 9px;
font-style: normal;
font-weight: 700;
color: var(--accent);
letter-spacing: 0.04em;
}
.trio-auto-preview {
display: grid;
gap: 4px;
margin: 8px 0 12px;
padding: 10px 11px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.62);
border: 1px solid rgba(80, 70, 70, 0.08);
}
.trio-auto-preview span {
font-size: 11px;
font-weight: 700;
color: #5f5957;
}
.trio-auto-preview small {
font-size: 10px;
line-height: 1.5;
color: #8a8380;
}
.drawer-note.compact {
display: block;
margin: -4px 0 10px;
}
.roster-compare {
display: flex;
gap: 8px;
flex-wrap: wrap;
justify-content: center;
}
/* v0.3.87 · dialogue annotations / tale messenger / profile autofill */
.talk-message-body-label {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin: 0 0 5px;
}
.talk-message-body-label small {
margin: 0 !important;
}
.talk-message-body-label button {
border: 1px solid #3c3942;
border-radius: 8px;
background: #18161b;
color: #c7c1cc;
padding: 4px 9px;
font:
700 9px/1 "Noto Sans KR",
sans-serif;
cursor: pointer;
}
.talk-message-body-label button:hover {
border-color: #696370;
color: #fff;
}
.talk-message-body textarea::placeholder {
color: #6d6872;
}
.tale-dialogue-layout-picker {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 12px;
margin: 0 0 10px;
border: 1px solid rgba(80, 70, 70, 0.1);
border-radius: 10px;
background: rgba(255, 255, 255, 0.55);
}
.tale-dialogue-layout-picker small {
font-size: 10px;
font-weight: 800;
color: #8b8380;
}
.tale-mob-editor-wrap {
padding: 10px 12px;
margin: 0 0 10px;
border: 1px solid rgba(80, 70, 70, 0.1);
border-radius: 10px;
background: rgba(255, 255, 255, 0.55);
}
.tale-mob-editor-wrap > small {
display: block;
margin-bottom: 8px;
font-size: 10px;
font-weight: 800;
color: #8b8380;
}
.tale-mob-editor-wrap .m-btn {
margin-top: 4px;
}
.tale-dialogue-layout-picker select {
min-width: 150px;
}
.tale-dialogue-card.messenger {
display: grid;
gap: 7px;
padding: 20px 18px;
background: color-mix(in srgb, var(--world-bg) 82%, #fff);
}
.tale-messenger-line {
display: flex;
align-items: flex-end;
gap: 9px;
max-width: 78%;
}
.tale-messenger-line.right {
justify-self: end;
flex-direction: row-reverse;
}
.tale-messenger-avatar {
flex: 0 0 36px;
width: 36px;
height: 36px;
border-radius: 50%;
overflow: hidden;
background: color-mix(in srgb, var(--dc) 12%, #eee);
border: 1px solid color-mix(in srgb, var(--dc) 48%, #fff);
}
.tale-messenger-avatar img,
.tale-messenger-avatar .art-fallback {
width: 100%;
height: 100%;
object-fit: cover;
}
.tale-messenger-copy {
min-width: 0;
}
.tale-messenger-line.right .tale-messenger-copy {
text-align: right;
}
.tale-messenger-copy > small {
display: block;
margin: 0 7px 4px;
color: var(--dc);
font-size: 9px;
font-weight: 800;
}
.tale-messenger-bubble {
position: relative;
display: inline-block;
max-width: 100%;
padding: 10px 13px;
border-radius: 16px 16px 16px 5px;
background: #fff;
border: 1px solid rgba(70, 60, 60, 0.1);
box-shadow: 0 3px 12px rgba(60, 50, 50, 0.04);
text-align: left;
font-size: 14px;
line-height: 1.65;
word-break: keep-all;
}
.tale-messenger-line.right .tale-messenger-bubble {
border-radius: 16px 16px 5px 16px;
background: color-mix(in srgb, var(--dc) 12%, #fff);
border-color: color-mix(in srgb, var(--dc) 24%, #fff);
}
.tale-messenger-bubble p,
.tale-messenger-bubble div {
margin: 0.1em 0 0.45em;
}
.tale-messenger-bubble p:last-child,
.tale-messenger-bubble div:last-child {
margin-bottom: 0;
}
/* v0.3.88 — 나레이션: 양쪽 메신저 프리셋에서 좌우 구분 없이 가운데 말풍선으로 표시 */
.tale-messenger-line.narration {
max-width: 100%;
justify-self: center;
justify-content: center;
}
.tale-messenger-line.narration .tale-messenger-bubble {
background: rgba(80, 74, 74, 0.06);
border: 1px dashed rgba(80, 74, 74, 0.18);
color: #6c6669;
font-style: italic;
text-align: center;
border-radius: 13px;
}
.relation-autofill-btn {
display: block;
width: 100%;
margin-top: 10px;
border-style: dashed !important;
}
.trio-editor-person .trio-auto-note {
font-style: normal;
}
@media (max-width: 780px) {
.tale-messenger-line {
max-width: 88%;
}
.tale-dialogue-layout-picker {
align-items: stretch;
flex-direction: column;
}
.tale-dialogue-layout-picker select {
width: 100%;
}
}
.relation-auto-list-btn {
border: 1px solid color-mix(in srgb, var(--accent) 28%, #ddd);
border-radius: 7px;
background: color-mix(in srgb, var(--accent) 7%, #fff);
color: color-mix(in srgb, var(--accent) 72%, #555);
padding: 5px 7px;
font-size: 9px;
font-weight: 800;
cursor: pointer;
white-space: nowrap;
}
.relation-auto-list-btn:hover {
background: color-mix(in srgb, var(--accent) 13%, #fff);
}
/* v0.3.139 — profile tab type + preset system */
.profile-keyword-preset .profile-essay {
margin-bottom: 0;
padding: 12px 2px 14px;
}
.profile-keyword-preset .profile-essay:first-child {
padding-top: 3px;
}
.profile-keyword-preset .profile-essay p {
margin-top: 8px;
}
.profile-keyword-preset .profile-essay:last-child {
margin-bottom: 0;
}
/* v0.3.149 — 숫자 프리셋: 예전 VOICE SAMPLE 계열의 큰 번호 + 설명 */
.profile-number-voice {
padding-top: 5px;
}
.profile-number-voice > header {
margin-bottom: 3px;
}
.profile-number-voice > header small {
display: block;
margin-bottom: 7px;
color: var(--c);
font: 700 7px/1 Arial, sans-serif;
letter-spacing: 0.2em;
}
.profile-number-voice > header h3 {
margin: 0 0 5px;
color: #2b272a;
font: 600 25px/1.15 Georgia, "Noto Serif KR", serif;
}
.profile-number-list {
padding-top: 0;
}
.profile-number-list blockquote:first-child {
border-top: 1px solid #e0d9d5;
}
.profile-number-list blockquote span {
display: block;
}
.profile-number-list blockquote span em {
display: block;
margin-bottom: 4px;
color: var(--c);
font: 800 8px/1.3 Arial, sans-serif;
letter-spacing: 0.08em;
font-style: normal;
}
.profile-box-preset {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
padding-top: 5px;
}
.profile-box-preset article {
min-height: 82px;
padding: 14px 15px;
border: 1px solid #ddd7d3;
background: #f7f4f1;
position: relative;
overflow: hidden;
}
.profile-box-preset article:before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 3px;
background: var(--c);
}
.profile-box-preset small {
display: block;
margin-bottom: 8px;
color: var(--c);
font: 800 7px/1 Arial, sans-serif;
letter-spacing: 0.18em;
}
.profile-box-preset p {
margin: 0;
font: 500 11px/1.7 "Noto Serif KR", serif;
color: #474145;
white-space: pre-wrap;
}
.profile-quote-preset {
margin: 2px 0 0;
padding: 28px 26px 24px;
border-top: 1px solid #dcd5d1;
border-bottom: 1px solid #dcd5d1;
position: relative;
}
.profile-quote-preset blockquote {
margin: 0;
}
.profile-quote-preset blockquote.main span {
font: 600 clamp(20px, 2vw, 31px)/1.5 Georgia, "Noto Serif KR", serif;
letter-spacing: -0.025em;
color: #282428;
white-space: pre-wrap;
}
.profile-quote-preset blockquote.sub {
margin-top: 14px;
padding-top: 12px;
border-top: 1px dashed #ddd6d2;
}
.profile-quote-preset blockquote.sub span {
font: 500 12px/1.75 "Noto Serif KR", serif;
color: #655e62;
}
.profile-quote-preset footer {
display: flex;
gap: 10px;
align-items: baseline;
margin-top: 17px;
}
.profile-quote-preset footer b {
font-size: 9px;
letter-spacing: 0.06em;
}
.profile-inline-image-preview {
margin-top: 8px;
border: 1px solid #d7d0cb;
background: #f7f3f0;
min-height: 120px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.profile-inline-image-preview img {
display: block;
max-width: 100%;
max-height: 220px;
object-fit: contain;
}
.profile-inline-image-preview.empty {
color: #9b9295;
font: 700 11px/1 Arial, sans-serif;
letter-spacing: 0.18em;
}
.profile-image-preset {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(220px, 0.95fr);
gap: 16px;
align-items: start;
margin-top: 22px;
}
.profile-image-preset figure {
margin: 0;
border: 1px solid #ded7d3;
background: #f4f0ed;
min-height: 260px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.profile-image-preset figure img {
display: block;
width: 100%;
height: auto;
object-fit: contain;
}
.profile-image-preset .v2-image-empty {
min-height: 260px;
}
.profile-image-preset-body {
border-top: 1px solid #ded7d3;
padding-top: 10px;
}
.profile-image-preset-body small {
display: block;
color: var(--c);
font: 800 8px/1 Arial, sans-serif;
letter-spacing: 0.22em;
}
.profile-image-preset-body h3 {
margin: 8px 0 10px;
font: 700 30px/1.08 Georgia, "Noto Serif KR", serif;
}
.profile-image-preset-body p {
margin: 0;
color: #625b5f;
font: 400 13px/1.9 "Noto Serif KR", serif;
white-space: pre-wrap;
}
.profile-quote-preset footer small {
color: #938b90;
font-size: 8px;
}
.profile-body-preset .profile-essay:first-child {
padding-top: 3px;
}
.profile-body-free {
margin: 0;
padding: 15px 2px;
color: #625b5f;
font: 400 11px/1.95 "Noto Serif KR", serif;
white-space: pre-wrap;
}
.profile-relation-panel > header {
display: flex;
align-items: baseline;
gap: 12px;
padding: 2px 2px 10px;
}
.profile-relation-panel > header small,
.profile-relation-empty > small {
color: var(--c);
font: 800 7px/1 Arial, sans-serif;
letter-spacing: 0.2em;
}
.profile-relation-panel > header h3 {
margin: 0;
font: 600 24px/1 Georgia, "Noto Serif KR", serif;
}
.profile-relation-canvas {
position: relative;
height: clamp(330px, 47vh, 480px);
min-height: 330px;
border: 1px solid #ded7d3;
background:
radial-gradient(circle at center, color-mix(in srgb, var(--c), transparent 93%), transparent 42%),
#f8f5f2;
overflow: hidden;
isolation: isolate;
}
.profile-relation-canvas svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
}
.profile-relation-canvas svg line {
vector-effect: non-scaling-stroke;
stroke-width: 1.2;
opacity: 0.72;
}
.profile-relation-edge-label {
position: absolute;
left: var(--x);
top: var(--y);
transform: translate(-50%, -50%);
z-index: 4;
width: max-content;
max-width: 180px;
padding: 7px 13px;
border: 1px solid #ddd6d2;
border-radius: 999px;
background: rgba(248, 245, 242, 0.97);
color: #6c6569;
font: 700 10px/1.15 Arial, sans-serif;
letter-spacing: 0.02em;
white-space: nowrap;
box-shadow: 0 2px 10px rgba(50, 42, 46, 0.04);
pointer-events: none;
}
.profile-relation-node {
position: absolute;
left: var(--x);
top: var(--y);
transform: translate(-50%, -50%);
width: 104px;
text-align: center;
z-index: 2;
}
.profile-relation-node > div {
width: 58px;
height: 58px;
margin: 0 auto 7px;
border-radius: 50%;
border: 3px solid #fff;
outline: 1px solid var(--rc);
background: #eee9e5;
overflow: hidden;
box-shadow: 0 5px 14px rgba(50, 42, 46, 0.08);
}
.profile-relation-node.self > div {
width: 76px;
height: 76px;
outline-width: 2px;
}
.profile-relation-node img,
.profile-relation-node > div > span {
width: 100%;
height: 100%;
object-fit: cover;
}
.profile-relation-node b {
display: block;
font: 700 10px/1.25 "Noto Serif KR", sans-serif;
}
.profile-relation-node small {
display: block;
margin-top: 3px;
color: #8d858a;
font-size: 7px;
line-height: 1.35;
word-break: keep-all;
}
.profile-relation-full,
.profile-timeline-full {
border: 0;
background: none;
color: #777075;
padding: 11px 2px 0;
font: 800 7px/1 Arial, sans-serif;
letter-spacing: 0.12em;
cursor: pointer;
}
.profile-relation-empty {
min-height: 230px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding: 22px;
border: 1px solid #ded7d3;
background: #f8f5f2;
}
.profile-relation-empty h3 {
margin: 9px 0 7px;
font: 600 22px/1.2 Georgia, "Noto Serif KR", serif;
}
.profile-relation-empty p {
margin: 0;
color: #847c81;
font-size: 10px;
}
.profile-feature-stack {
display: grid;
gap: 30px;
}
.profile-feature-section + .profile-feature-section {
padding-top: 30px;
border-top: 1px solid #e1dad6;
}
/* editor */
.profile-tab-kind {
flex: none;
padding: 5px 7px;
border: 1px solid #45414c;
border-radius: 999px;
color: #bdb7c3;
font-size: 9px;
font-weight: 800;
}
.profile-tab-editor.feature {
background: #19181d;
}
.profile-feature-picker {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
}
.profile-feature-picker button {
min-width: 0;
border: 1px solid #34313a;
border-radius: 10px;
background: #222027;
color: #ddd8e0;
padding: 10px 7px;
text-align: left;
cursor: pointer;
}
.profile-feature-picker button.on {
border-color: #ded7e4;
background: #f2eef5;
color: #201d22;
}
.profile-feature-picker b,
.profile-feature-picker small {
display: block;
}
.profile-feature-picker b {
font-size: 11px;
}
.profile-feature-picker small {
margin-top: 4px;
font-size: 8px;
line-height: 1.4;
opacity: 0.68;
}
.profile-feature-gallery-editor {
margin-top: 10px;
padding: 12px;
border: 1px solid #34313a;
border-radius: 10px;
background: #151419;
}
.profile-feature-gallery-editor > header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
.profile-feature-gallery-editor > header > div {
flex: 1;
min-width: 0;
}
.profile-feature-gallery-editor > header b,
.profile-feature-gallery-editor > header small {
display: block;
}
.profile-feature-gallery-editor > header b {
color: #f0ecf2;
font-size: 10px;
}
.profile-feature-gallery-editor > header small {
margin-top: 3px;
color: #817b86;
font-size: 7px;
line-height: 1.4;
}
.profile-feature-gallery-upload {
flex: 0 0 auto;
white-space: nowrap;
}
.profile-feature-gallery-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 7px;
}
.profile-feature-gallery-list article {
position: relative;
min-width: 0;
padding: 6px;
border: 1px solid #302e35;
border-radius: 8px;
background: #1d1b21;
}
.profile-feature-gallery-list article > div:first-child {
height: 92px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 5px;
background: #101014;
}
.profile-feature-gallery-list img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.profile-feature-gallery-list article > span {
display: block;
margin: 6px 0 4px;
color: #8c8690;
font: 800 7px/1 Arial, sans-serif;
letter-spacing: 0.12em;
}
.profile-feature-gallery-list .block-controls {
justify-content: flex-end;
}
.profile-feature-gallery-empty {
grid-column: 1 / -1;
padding: 20px 10px;
border: 1px dashed #39363f;
border-radius: 8px;
color: #77717c;
text-align: center;
font-size: 8px;
}
.profile-gallery-v4.empty {
display: block;
}
.profile-gallery-empty {
min-height: 180px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 7px;
border: 1px dashed #ded7d3;
color: #aaa1a5;
}
.profile-gallery-empty small {
color: var(--c);
font: 800 7px/1 Arial, sans-serif;
letter-spacing: 0.2em;
}
.profile-gallery-empty b {
font: 500 11px/1.5 "Noto Serif KR", serif;
}
.profile-preset-option-row {
display: grid;
grid-template-columns: 72px minmax(0, 1fr);
gap: 8px;
align-items: center;
margin: 3px 0 9px;
}
.profile-preset-option-row > label {
color: #aaa5ae;
font-size: 9px;
font-weight: 700;
}
.profile-preset-option-row select {
width: 100%;
border: 1px solid #3b3942;
border-radius: 8px;
background: #242229;
color: #fff;
padding: 7px 8px;
font-size: 10px;
}
.profile-preset-source textarea {
min-height: 108px !important;
font-family: ui-monospace, SFMono-Regular, Consolas, monospace !important;
font-size: 11px !important;
}
.profile-preset-source > small {
display: block;
margin-top: 6px;
color: #8e8893;
font-size: 9px;
line-height: 1.45;
}
.preset-limit-note {
margin: 4px 0 0 !important;
text-align: center;
}
.profile-tab-add-choices,
.profile-tab-feature-choices {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
margin-top: 10px;
}
.profile-tab-feature-choices {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.profile-tab-add-card,
.profile-tab-feature-card {
min-height: 74px;
text-align: left !important;
display: flex !important;
flex-direction: column;
align-items: flex-start !important;
justify-content: center;
gap: 5px;
}
.profile-tab-add-card b,
.profile-tab-feature-card b {
font-size: 14px;
}
.profile-tab-add-card small {
white-space: normal;
opacity: 0.7;
line-height: 1.45;
}
.profile-template-apply {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
gap: 5px;
margin-top: 8px;
}
.profile-template-apply select {
min-width: 0;
border: 1px solid #3b3942;
background: #242229;
color: #fff;
border-radius: 9px;
padding: 8px 9px;
font-size: 11px;
}
.color-input-pair {
display: grid;
grid-template-columns: minmax(0, 1fr) 42px;
gap: 6px;
align-items: center;
}
.color-input-pair input[type="color"] {
width: 42px;
height: 34px;
padding: 2px;
border: 1px solid #45414c;
border-radius: 8px;
background: #242229;
cursor: pointer;
}
.profile-color-list {
display: grid;
gap: 5px;
margin: -1px 0 8px;
}
.profile-color-row {
display: grid;
grid-template-columns: minmax(70px, 0.8fr) minmax(90px, 1fr) 38px;
gap: 5px;
align-items: center;
padding: 6px;
border: 1px solid #302e36;
border-radius: 9px;
background: #1d1c21;
}
.profile-color-row b {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #bdb8c1;
font-size: 9px;
}
.profile-color-row input[type="text"] {
min-width: 0;
border: 1px solid #3b3942;
background: #242229;
color: #fff;
border-radius: 7px;
padding: 7px 8px;
font-size: 10px;
}
.profile-color-row input[type="color"] {
width: 38px;
height: 30px;
padding: 2px;
border: 1px solid #45414c;
border-radius: 7px;
background: #242229;
}
@media (max-width: 680px) {
.profile-keyword-cards,
.profile-box-preset {
grid-template-columns: 1fr;
}
.profile-relation-canvas {
height: 360px;
}
.profile-feature-picker,
.profile-tab-feature-choices {
grid-template-columns: 1fr;
}
.profile-tab-add-choices {
grid-template-columns: 1fr;
}
}
/* v0.3.140 — tale quick edit / annotation marker visibility */
.site.editing .tales-page.detail[data-tale-edit] .tale-detail-head,
.site.editing .tale-list-card[data-tale-edit] {
cursor: default;
}
/* v0.3.145 — 관리자에서는 기능 3종을 한 설정 카드로 묶어 관리합니다. */
.profile-feature-admin-title {
flex: 1;
min-width: 0;
color: #f2eef5;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.04em;
}
/* v0.3.146 — LOOK별 연결 프로필 선택. 관리자 최상단의 "기본 정보" 탭에서 관리합니다. */
.profile-look-main {
gap: 5px !important;
}
.profile-look-profile-link {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 6px;
min-width: 0;
}
.profile-look-profile-link > span {
color: #77727d;
font-size: 7px;
white-space: nowrap;
}
.profile-look-profile-link select {
width: 100%;
min-width: 0;
height: 27px;
border: 1px solid #353139;
border-radius: 6px;
background: #242228;
color: #eee;
padding: 0 24px 0 7px;
font-size: 8px;
}
/* v0.3.170 — 관리자 프로필 프리셋: 탭 카드와 구분되는 밝은 편집 카드 */
.profile-tab-block-editor .profile-block-type-trigger {
border-color: #d6d1da;
background: #fff;
color: #29262d;
box-shadow: none;
}
.profile-tab-block-editor .profile-block-type-trigger i { color: #77717c; }
.profile-tab-block-editor .profile-block-type-menu {
border-color: #d8d3dc;
background: #fff;
color: #29262d;
box-shadow: 0 16px 36px rgba(0,0,0,.18);
}
.profile-tab-block-editor .profile-block-type-menu button {
background: #f1eff3;
color: #37323b;
}
.profile-tab-block-editor .profile-block-type-menu button:hover {
background: #e8e4eb;
border-color: #d2ccd6;
color: #17151a;
}
.profile-tab-block-editor .profile-block-type-menu button.on {
background: #252229;
border-color: #252229;
color: #fff;
}
.profile-tab-block-editor .block-controls.horizontal button {
border-color: #d6d1da;
background: #fff;
color: #4c4651;
}
.profile-tab-block-editor .block-controls.horizontal button:hover:not(:disabled) {
background: #ece9ef;
color: #17151a;
}
.profile-tab-block-editor .efield > label,
.profile-tab-block-editor .profile-preset-option-row > label {
color: #625c67 !important;
}
.profile-tab-block-editor .profile-preset-source textarea,
.profile-tab-block-editor .profile-preset-option-row select,
.profile-tab-block-editor input[type="text"] {
border-color: #d8d3dc !important;
background: #fff !important;
color: #2c2830 !important;
}
.profile-tab-block-editor .profile-preset-source > small { color: #85808a; }
.profile-add-preset {
min-height: 38px;
border: 1px dashed #d5d0d9 !important;
background: #f7f6f8 !important;
color: #3a353e !important;
font-weight: 800 !important;
}
.profile-add-preset:hover {
border-style: solid !important;
background: #fff !important;
}
/* v0.3.170 — 관리자 프로필 프리셋은 다시 어두운 카드/입력 UI, 추가 버튼만 밝게 유지 */
.profile-tabs-editor {
gap: 34px;
}
.profile-tab-editor {
position: relative;
}
.profile-tab-editor + .profile-tab-editor::before {
content: "";
position: absolute;
left: 2px;
right: 2px;
top: -18px;
height: 2px;
background: #5a5660;
pointer-events: none;
}
.profile-tab-block-editor {
border-color: #34323a;
background: #201f24;
box-shadow: none;
}
.profile-tab-block-editor > header {
border-bottom-color: #39363e;
}
.profile-preset-index {
color: #8f8994;
}
.profile-tab-block-editor .profile-block-type-trigger {
border-color: #45414c;
background: linear-gradient(180deg, #2d2a32, #242229);
color: #f5f2f7;
box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}
.profile-tab-block-editor .profile-block-type-trigger i {
color: #aaa3b1;
}
.profile-tab-block-editor .profile-block-type-menu {
border-color: #4b4652;
background: #242129;
color: #f8f5fa;
box-shadow: 0 18px 45px rgba(0,0,0,.42);
}
.profile-tab-block-editor .profile-block-type-menu button {
background: #302d35;
color: #e8e3eb;
}
.profile-tab-block-editor .profile-block-type-menu button:hover {
background: #3c3743;
border-color: #55505d;
color: #fff;
}
.profile-tab-block-editor .profile-block-type-menu button.on {
background: #f1edf4;
border-color: #f1edf4;
color: #1e1b21;
}
.profile-tab-block-editor .block-controls.horizontal button {
border-color: #45414c;
background: #29272e;
color: #d7d1db;
}
.profile-tab-block-editor .block-controls.horizontal button:hover:not(:disabled) {
background: #38343d;
color: #fff;
}
.profile-tab-block-editor .efield > label,
.profile-tab-block-editor .profile-preset-option-row > label {
color: #aaa4ae !important;
}
.profile-tab-block-editor .profile-preset-source textarea,
.profile-tab-block-editor .profile-preset-option-row select,
.profile-tab-block-editor input[type="text"] {
border-color: #3f3b45 !important;
background: #17161a !important;
color: #f4f0f6 !important;
}
.profile-tab-block-editor .profile-preset-source textarea::placeholder,
.profile-tab-block-editor input[type="text"]::placeholder {
color: #716b76 !important;
}
.profile-tab-block-editor .profile-preset-source > small {
color: #817b85;
}
/* 추가 버튼은 v0.3.170의 밝은 카드 느낌을 유지 */
.profile-add-preset {
min-height: 38px;
border: 1px dashed #d5d0d9 !important;
background: #f7f6f8 !important;
color: #3a353e !important;
font-weight: 800 !important;
}
.profile-add-preset:hover {
border-style: solid !important;
background: #fff !important;
}
/* v0.3.170 — 프리셋 헤더 공간 확보 */
.profile-tab-block-editor > header {
justify-content: flex-start;
gap: 5px;
}
.profile-tab-block-editor .profile-preset-head {
flex: 1 1 auto;
min-width: 0;
gap: 5px;
}
.profile-tab-block-editor .profile-preset-index {
flex: 0 0 18px;
width: 18px;
margin: 0;
letter-spacing: .04em;
text-align: left;
}
.profile-tab-block-editor .profile-block-type-picker {
flex: 0 1 126px;
width: 126px;
min-width: 104px;
}
.profile-tab-block-editor > header > .block-controls.horizontal {
margin-left: auto;
}
/* v0.3.170 — 관리자 프리셋 입력창의 `제목 : 내용` 문법 강조 */
.profile-preset-highlight-wrap {
position: relative;
display: block;
width: 100%;
min-width: 0;
}
.profile-preset-highlight-wrap > textarea {
position: relative;
z-index: 2;
display: block;
width: 100% !important;
min-width: 0;
box-sizing: border-box;
background: transparent !important;
color: transparent !important;
caret-color: #f4f0f6;
-webkit-text-fill-color: transparent;
white-space: pre-wrap;
overflow-wrap: break-word;
}
.profile-preset-highlight {
position: absolute;
z-index: 1;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 9px 10px;
border: 1px solid transparent;
overflow: hidden;
pointer-events: none;
white-space: pre-wrap;
overflow-wrap: break-word;
color: #d8d2dc;
background: #17161a;
font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
font-size: 12px;
line-height: 1.5;
border-radius: 10px;
box-sizing: border-box;
}
.profile-preset-highlight strong {
color: #fff;
font-weight: 800;
}
.profile-preset-highlight-wrap > textarea::selection {
background: rgba(126, 113, 141, 0.48);
}
/* v0.3.323 — 뒤에 깔린 .profile-preset-highlight(굵게 표시용
)와 글자 크기·줄
간격이 달라서(이 textarea는 .profile-preset-source textarea 규칙 때문에 11px,
는 12px/line-height 1.5) 실제 글자가 접히는 줄바꿈 위치가 서로 어긋났습니다.
눈에 보이는 건 쪽인데 실제로 드래그·선택되는 건 textarea 쪽이라, 화면에
보이는 글자와 드래그로 잡히는 글자가 안 맞아 선택이 이상하게 되던 원인입니다.
두 레이어의 글자 크기·줄 간격을 완전히 맞춥니다. */
.profile-preset-source .profile-preset-highlight-wrap > textarea {
font-size: 12px !important;
line-height: 1.5 !important;
}
/* v0.3.170 — 프리셋 하이라이트 오버레이: 어두운 관리자 입력 UI와의 !important 충돌 보정 */
.profile-tab-block-editor .profile-preset-source .profile-preset-highlight-wrap > textarea {
background: transparent !important;
color: transparent !important;
-webkit-text-fill-color: transparent !important;
caret-color: #f4f0f6 !important;
}
.profile-tab-block-editor .profile-preset-source .profile-preset-highlight-wrap > .profile-preset-highlight {
background: #17161a !important;
color: #d8d2dc !important;
}
.profile-tab-block-editor .profile-preset-source .profile-preset-highlight-wrap > .profile-preset-highlight strong {
color: #ffffff !important;
font-weight: 800 !important;
}
/* v0.3.170 — 프로필 프리셋 드래그 정렬 / 탭 간 이동 */
.profile-preset-drag-handle {
flex: 0 0 16px;
width: 16px;
color: #817b86;
font: 700 14px/1 Arial, sans-serif;
text-align: center;
cursor: grab;
user-select: none;
}
.profile-preset-drag-handle:hover {
color: #f2edf4;
}
.profile-preset-drag-handle:active {
cursor: grabbing;
}
.profile-tab-block-editor.profile-preset-dragging {
opacity: .48;
}
.profile-tab-editor.description.profile-preset-drop-tab {
outline: 1px solid color-mix(in srgb, var(--accent) 72%, #fff 28%);
outline-offset: 4px;
}
.profile-tab-block-editor.profile-preset-drop-before::before,
.profile-tab-block-editor.profile-preset-drop-after::after {
content: "";
position: absolute;
left: 4px;
right: 4px;
height: 3px;
border-radius: 99px;
background: var(--accent);
z-index: 20;
pointer-events: none;
}
.profile-tab-block-editor.profile-preset-drop-before::before {
top: -7px;
}
.profile-tab-block-editor.profile-preset-drop-after::after {
bottom: -7px;
}
/* v0.3.174 — 관리자 > 기록 > 썰 : 오늘의 썰 AU 가챠 */
.tale-editor-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 7px;
margin: 10px 0 12px;
}
.tale-editor-actions .ebtn {
margin: 0;
}
.today-tale-admin-btn {
border-style: dashed;
background: rgba(255, 255, 255, 0.035);
}
.today-tale-admin-btn span {
margin-right: 4px;
}
.modal.today-tale-modal {
width: min(560px, calc(100vw - 28px));
overflow: auto;
}
.today-tale-modal-head {
text-align: center;
margin: 2px 0 16px;
}
.today-tale-modal-head > small {
display: block;
color: #8a8a90;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.18em;
margin-bottom: 6px;
}
.modal.today-tale-modal .today-tale-modal-head h2 {
margin: 0 0 7px;
}
.today-tale-modal-head p {
margin: 0 auto;
max-width: 420px;
color: #8b8b91;
font-size: 10px;
line-height: 1.6;
}
.today-tale-machine {
position: relative;
display: grid;
gap: 9px;
margin: 4px 0 13px;
}
.today-tale-reel {
position: relative;
height: 72px;
display: grid;
place-items: center;
overflow: hidden;
border: 1px solid #dedee4;
border-radius: 16px;
background:
linear-gradient(#fff0, rgba(255,255,255,.88) 12%, rgba(255,255,255,.88) 88%, #fff0),
repeating-linear-gradient(90deg, #f4f4f6 0 1px, transparent 1px 24px),
#fafafd;
box-shadow: inset 0 0 20px rgba(18, 18, 24, 0.04);
}
.today-tale-reel::before,
.today-tale-reel::after {
content: "";
position: absolute;
left: 14px;
right: 14px;
height: 1px;
background: #e4e4e9;
}
.today-tale-reel::before { top: 13px; }
.today-tale-reel::after { bottom: 13px; }
.today-tale-reel span {
position: relative;
z-index: 1;
display: block;
max-width: calc(100% - 40px);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: clamp(20px, 5vw, 28px);
font-weight: 800;
letter-spacing: -0.04em;
color: #17171b;
}
.today-tale-reel.is-spinning span {
animation: today-tale-reel-blur 0.14s linear infinite;
}
@keyframes today-tale-reel-blur {
0% { transform: translateY(-7px); opacity: 0.25; filter: blur(1.5px); }
50% { transform: translateY(0); opacity: 1; filter: blur(0); }
100% { transform: translateY(7px); opacity: 0.25; filter: blur(1.5px); }
}
.today-tale-result {
width: 100%;
min-height: 108px;
border: 1px solid #d8d8de;
border-radius: 17px;
background: #17171b;
color: #fff;
display: grid;
place-items: center;
align-content: center;
gap: 4px;
padding: 17px 20px;
text-align: center;
transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}
.today-tale-result:disabled {
cursor: wait;
opacity: 0.62;
}
.today-tale-result.is-ready {
cursor: pointer;
box-shadow: 0 11px 28px rgba(18, 18, 24, 0.14);
}
.today-tale-result.is-ready:hover {
transform: translateY(-2px);
}
.today-tale-result small {
font-size: 8px;
letter-spacing: 0.18em;
color: #8e8e96;
}
.today-tale-result b {
font-size: 24px;
line-height: 1.2;
letter-spacing: -0.03em;
}
.today-tale-result em {
font-size: 9px;
font-style: normal;
color: #bcbcc2;
}
.today-tale-questions[hidden] {
display: none !important;
}
.today-tale-questions {
opacity: 0;
transform: translateY(-5px);
margin: 14px 0 4px;
transition: opacity 0.18s ease, transform 0.18s ease;
}
.today-tale-questions.is-open {
opacity: 1;
transform: translateY(0);
}
.today-tale-questions header {
display: flex;
align-items: baseline;
gap: 8px;
margin-bottom: 8px;
}
.today-tale-questions header small {
color: #9a9aa0;
font-size: 8px;
letter-spacing: 0.13em;
font-weight: 700;
}
.today-tale-questions header h3 {
margin: 0;
font-size: 15px;
}
.today-tale-questions > div {
display: grid;
gap: 7px;
}
.today-tale-questions article {
display: grid;
grid-template-columns: 28px 1fr;
align-items: start;
gap: 9px;
border: 1px solid #e3e3e8;
border-radius: 12px;
padding: 10px 12px;
background: #fafafd;
}
.today-tale-questions article span {
color: #a0a0a8;
font-size: 9px;
line-height: 1.65;
font-weight: 700;
}
.today-tale-questions article p {
margin: 0;
color: #303035;
font-size: 10px;
line-height: 1.65;
}
.today-tale-meta {
display: flex;
justify-content: space-between;
gap: 10px;
color: #96969d;
font-size: 9px;
margin-top: 9px;
}
.today-tale-meta b {
color: #242429;
}
.today-tale-empty {
border: 1px dashed #d6d6dc;
border-radius: 16px;
padding: 26px 20px;
text-align: center;
background: #fafafd;
}
.today-tale-empty b {
display: block;
margin-bottom: 6px;
font-size: 14px;
}
.today-tale-empty p {
margin: 0;
color: #8e8e96;
font-size: 10px;
}
@media (max-width: 560px) {
.tale-editor-actions { grid-template-columns: 1fr; }
.today-tale-meta { flex-direction: column; gap: 2px; }
.today-tale-result b { font-size: 21px; }
}
/* v0.3.205 — 오늘의 썰 닫기 / 바로 작성 */
.modal.today-tale-modal { position: relative; }
.today-tale-close {
position: absolute;
top: 12px; right: 12px;
width: 30px; height: 30px;
display: grid; place-items: center;
border: 1px solid #dedee4; border-radius: 999px;
background: #fff; color: #777780;
font: inherit; font-size: 18px; line-height: 1; cursor: pointer; z-index: 3;
}
.today-tale-close:hover { color: #17171b; border-color: #bdbdc5; }
.today-tale-write-btn { margin-top: 10px; }
.tale-today-seed {
margin: 0 0 14px; padding: 13px 14px;
border: 1px solid #dedee4; border-radius: 13px;
background: #fafafd;
}
.tale-today-seed header { display: flex; gap: 8px; align-items: baseline; margin-bottom: 8px; }
.tale-today-seed header small { color: #96969d; font-size: 8px; font-weight: 800; letter-spacing: .14em; }
.tale-today-seed header b { font-size: 14px; }
.tale-today-seed > div { display: grid; gap: 5px; }
.tale-today-seed p { margin: 0; display: grid; grid-template-columns: 25px 1fr; gap: 7px; color: #45454b; font-size: 10px; line-height: 1.55; }
.tale-today-seed p span { color: #a0a0a8; font-size: 8px; font-weight: 800; }
.tale-today-seed > small { display: block; margin-top: 9px; color: #95959b; font-size: 9px; line-height: 1.5; }
/* v0.3.175 — 오너 전용 캘린더 ------------------------------------------------ */
.owner-calendar-page{min-height:100%;padding:88px 34px 64px;color:#242126}
.owner-calendar-shell{width:min(1220px,100%);margin:0 auto}
.owner-calendar-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:20px}
.owner-calendar-head small{display:block;font-size:10px;font-weight:900;letter-spacing:.18em;color:var(--accent);margin-bottom:5px}
.owner-calendar-head h1{margin:0;font-size:clamp(30px,4vw,54px);line-height:1;font-weight:950;letter-spacing:-.045em}
.owner-calendar-head p{margin:9px 0 0;color:#756f75;font-size:13px}
.owner-cal-month-nav{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.owner-cal-month-nav strong{font-size:21px;min-width:92px;text-align:center}
.owner-cal-month-nav button,.owner-cal-actions button,.owner-cal-quick-actions button{border:1px solid #d8d2d3;background:#fff;color:#302b30;border-radius:9px;min-height:38px;padding:0 13px;font:inherit;font-size:12px;font-weight:800;cursor:pointer}
.owner-cal-month-nav button:hover,.owner-cal-actions button:hover,.owner-cal-quick-actions button:hover{border-color:var(--accent);color:var(--accent)}
/* v0.3.227 — 일정 추가/일정 조율 버튼 하나씩만 남아서, 박스(section)로 나누지 않고
나란히 배치합니다. */
.owner-cal-quick-actions{display:flex;gap:6px}
.owner-cal-quick-actions button{flex:1}
.owner-calendar-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:18px;align-items:start}
.owner-cal-board{min-width:0;border:1px solid #d9d4d2;background:#fff;border-radius:16px;overflow:hidden}
.owner-cal-weekdays{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));background:hsl(from var(--accent) h 16% 92%);border-bottom:1px solid #d9d4d2}
.owner-cal-weekdays b{padding:10px 8px;text-align:center;font-size:10px;letter-spacing:.08em;color:#766f73}
.owner-cal-weekdays b:first-child{color:#c05f65}.owner-cal-weekdays b:last-child{color:#577ea8}
.owner-cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.owner-cal-day{min-height:132px;border-right:1px solid #ebe7e4;border-bottom:1px solid #ebe7e4;padding:7px;min-width:0;background:#fff;transition:.15s background,.15s box-shadow}
.owner-cal-day:nth-child(7n){border-right:0}
.owner-cal-day:nth-last-child(-n+7){border-bottom:0}
.owner-cal-day.outside{background:hsl(from var(--accent) h 17% 98%);color:#b7b1b1}
.owner-cal-day.today{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--accent) 48%,transparent)}
.owner-cal-day.drag-over{background:color-mix(in srgb,var(--accent) 11%,white);box-shadow:inset 0 0 0 2px var(--accent)}
.owner-cal-daynum{width:29px;height:29px;border:0;border-radius:8px;background:transparent;color:inherit;font-weight:850;cursor:pointer;text-align:center}
.owner-cal-day.today .owner-cal-daynum{background:var(--accent);color:#fff}
.owner-cal-events{display:flex;flex-direction:column;gap:4px;margin-top:4px;min-width:0}
.owner-cal-event{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:5px;width:100%;min-width:0;border:0;border-left:3px solid #999;border-radius:6px;padding:5px 6px;background:hsl(from var(--accent) h 13% 95%);color:#3f3a3f;text-align:left;cursor:grab}
.owner-cal-event:active{cursor:grabbing}
.owner-cal-event small{font-size:8px;font-weight:950;letter-spacing:.04em;opacity:.72}
.owner-cal-event b{font-size:10px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.owner-cal-event.type-personal{border-left-color:#7b8793}.owner-cal-event.type-trpg{border-left-color:#7257a3;background:#f3eff9}.owner-cal-event.type-commission{border-left-color:#c17867;background:#fbf1ee}.owner-cal-event.type-dday{border-left-color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,white)}
.owner-cal-side{display:flex;flex-direction:column;gap:12px;min-width:0}
.owner-cal-side>section{background:#fff;border:1px solid #ddd7d4;border-radius:14px;padding:14px}
.owner-cal-side h2{font-size:12px;margin:0 0 10px;letter-spacing:.02em}
.owner-cal-actions{display:grid;grid-template-columns:1fr;gap:6px}
.owner-cal-actions button{text-align:left;width:100%}
.owner-cal-poll-list,.owner-cal-upcoming{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.owner-cal-poll-list button,.owner-cal-upcoming button{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 7px;align-items:center;border:1px solid #e5dfdc;background:hsl(from var(--accent) h 17% 98%);border-radius:8px;padding:8px;text-align:left;cursor:pointer;min-width:0}
.owner-cal-poll-list button span,.owner-cal-upcoming button span{grid-row:1/3;font-size:8px;font-weight:950;color:var(--accent)}
.owner-cal-poll-list button b,.owner-cal-upcoming button b{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.owner-cal-poll-list button small,.owner-cal-upcoming button small{font-size:9px;color:#888;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.owner-cal-empty{font-size:11px;color:#999;margin:4px 0}
.calendar-editor-stats{display:flex;gap:7px;margin:9px 0}.calendar-editor-stats span{flex:1;border:1px solid #ffffff22;border-radius:7px;padding:8px;font-size:10px}.calendar-editor-stats b{font-size:18px;margin-right:3px}
.calendar-commission-preview{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid #ded8d5;border-radius:9px;background:hsl(from var(--accent) h 18% 97%);margin:2px 0 12px;font-size:11px}.calendar-commission-preview b{font-size:20px;color:var(--accent)}
.calendar-poll-modal{width:min(1100px,calc(100vw - 32px))!important;max-width:none!important}
.cal-poll-topline{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 10px;border-radius:8px;background:hsl(from var(--accent) h 19% 95%);margin-bottom:10px}.cal-poll-topline span{font-size:9px;font-weight:950;color:var(--accent)}.cal-poll-topline b{font-size:11px}
.cal-poll-response-bar{display:flex;gap:7px;margin:9px 0}.cal-poll-response-bar input{flex:1;min-width:0}
.cal-poll-people{display:flex;gap:5px;flex-wrap:wrap;margin:7px 0 9px}.cal-poll-people span{border:1px solid #ddd6d3;border-radius:999px;padding:4px 7px;font-size:9px}.cal-poll-people span.on{border-color:var(--accent);color:var(--accent)}.cal-poll-people span b{margin-left:3px}
.cal-poll-scroll{max-width:100%;overflow:auto;border:1px solid #ded9d6;border-radius:10px;background:#fff}
.cal-poll-matrix{display:grid;grid-template-columns:74px repeat(var(--cal-cols),minmax(82px,1fr));min-width:max-content}
.cal-poll-corner,.cal-poll-date,.cal-poll-time{position:sticky;z-index:2;background:hsl(from var(--accent) h 19% 95%);border-right:1px solid #e3dedb;border-bottom:1px solid #e3dedb;min-height:43px;display:flex;align-items:center;justify-content:center}
.cal-poll-corner{left:0;top:0;z-index:4;font-size:9px;font-weight:900}.cal-poll-date{top:0;z-index:3;gap:5px;padding:5px}.cal-poll-date b{font-size:10px}.cal-poll-date small{font-size:9px;color:#888}.cal-poll-time{left:0;z-index:3;font-size:9px;font-weight:800;padding:5px}
.cal-poll-cell{position:relative;min-height:43px;border:0;border-right:1px solid #eee9e6;border-bottom:1px solid #eee9e6;background:color-mix(in srgb,var(--accent) calc(var(--heat) * 72%),#fff);cursor:pointer;color:#262126}
.cal-poll-cell:hover{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--accent) 55%,transparent)}
.cal-poll-cell.mine:after{content:"";position:absolute;inset:4px;border:2px solid #242124;border-radius:4px;pointer-events:none}
.cal-poll-cell.picked{box-shadow:inset 0 0 0 3px #171417}
.cal-poll-cell span{font-size:10px;font-weight:900}.cal-poll-cell i{position:absolute;right:3px;top:2px;font-style:normal;font-size:7px;font-weight:950;color:#1e171d}
.cal-poll-share-note{display:grid;grid-template-columns:auto 1fr;gap:7px 10px;margin-top:10px;padding:9px 10px;border-radius:8px;background:hsl(from var(--accent) h 13% 95%);font-size:9px;color:#6d676b}.cal-poll-share-note b{color:#332d31}.cal-poll-share-note span{line-height:1.45}
@media(max-width:1000px){.owner-calendar-layout{grid-template-columns:1fr}.owner-cal-side{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.owner-cal-day{min-height:112px}}
@media(max-width:720px){.owner-calendar-page{padding:74px 12px 40px}.owner-calendar-head{align-items:flex-start;flex-direction:column}.owner-cal-month-nav{width:100%;justify-content:space-between}.owner-cal-side{grid-template-columns:1fr}.calendar-poll-modal{width:calc(100vw - 16px)!important}.cal-poll-response-bar{flex-direction:column}.cal-poll-matrix{grid-template-columns:62px repeat(var(--cal-cols),76px)}}
/* v0.3.271 — 사용자 요청: 캘린더가 모바일에서 가로 스크롤 없이 한 화면에 다 보이게.
기존엔 요일 7칸을 최소 700px(칸당 100px)로 고정해서 좁은 화면에서 옆으로 긁어야
봤는데, 실제 모바일 캘린더 앱(구글/애플 캘린더 등)은 폭에 맞춰 칸을 줄이는 대신
각 날짜 안의 "일정 텍스트 칩"을 작은 점(dot)으로 축약해서 가로 스크롤이 아예
필요 없게 만듭니다 — 그 방식을 그대로 따랐습니다. 날짜 칸 자체는 7등분
(minmax(0,1fr))으로 화면 폭에 맞춰 자연스럽게 줄어들고, 그 안의 일정/디데이 칩은
글자 없이 종류별 색 점만 남깁니다(점을 길게 누르면 원래 있던 title 툴팁으로 내용은
여전히 확인 가능). */
/* v0.3.272 — 날짜 칸 클릭 → 그리드 아래 패널에 그 날의 일정 표시. 패널 자체는 항상
DOM에 있지만(그래야 클릭 즉시 채워짐), 데스크톱(칸 안에 이미 전체 칩이 다 보임)엔
불필요한 중복이라 모바일에서만 보이게 합니다. */
.owner-cal-day-detail{display:none}
.owner-cal-day{cursor:pointer}
.owner-cal-day.selected{background:color-mix(in srgb,var(--accent) 12%,#fff)}
@media(max-width:720px){
.owner-cal-board{overflow:hidden}
.owner-cal-weekdays,.owner-cal-grid{min-width:0}
.owner-cal-weekdays b{padding:6px 2px;font-size:8px}
.owner-cal-day{min-height:56px;padding:4px 2px}
.owner-cal-daynum{width:20px;height:20px;font-size:10px}
.owner-cal-events{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:3px;margin-top:3px}
/* 그리드 안의 칩만 점으로 축약합니다 — 아래 .owner-cal-day-detail-list 안의 칩은
이 규칙에 안 걸리게 .owner-cal-events로 범위를 좁혔습니다(전에는 .owner-cal-event를
범위 없이 걸어서 상세 패널 칩까지 같이 점이 돼버리는 실수가 있었습니다).
v0.3.273 — 점이 동그랗지 않고 위아래로 길쭉한 알약 모양이었던 원인: 이 파일 뒤쪽의
범위 없는 .owner-cal-event{min-height:29px} 규칙이 계속 살아있어서, height:6px를
줘도 min-height가 더 커서 그쪽이 이겼습니다(같은 요소에서 height와 min-height가
충돌하면 min-height가 우선). min-height도 같이 6px로 눌러줘야 실제로 정사각형(=
border-radius:50%로 원)이 됩니다. */
.owner-cal-events .owner-cal-event{width:6px;height:6px;min-width:6px;min-height:6px;padding:0;border:0;border-radius:50%;overflow:hidden}
.owner-cal-events .owner-cal-event small,.owner-cal-events .owner-cal-event b{display:none}
.owner-cal-events .owner-cal-event.type-personal{background:#7b8793!important}
.owner-cal-events .owner-cal-event.type-trpg{background:#7257a3!important}
.owner-cal-events .owner-cal-event.type-commission{background:#c17867!important}
.owner-cal-events .owner-cal-event.type-dday{background:var(--accent)!important}
/* v0.3.274 — 점 크기가 종류마다 제각각(특히 TRPG만 눈에 띄게 컸음)이었던 원인: 이
파일 뒤쪽에 있는 .owner-cal-event.type-*(개인/TRPG/커미션/디데이) 각각의 원래
border·padding 값이 위 리셋(border:0;padding:0)과 같은 특이도라서 소스 순서상
더 뒤에 있는 이 규칙들이 이기고 있었습니다 — TRPG는 border:2px+padding:4px 6px가
통째로 남아있어서 유독 크고 타원으로 보였던 것. 종류별 규칙 자체를 하나하나 다시
찾아다니는 대신, .type-*를 한번에 겨냥해서 border/padding/box-shadow를 확실히
0으로 되돌립니다. */
.owner-cal-events .owner-cal-event.type-personal,
.owner-cal-events .owner-cal-event.type-trpg,
.owner-cal-events .owner-cal-event.type-commission,
.owner-cal-events .owner-cal-event.type-dday{border:0!important;padding:0!important;box-shadow:none!important}
/* 편집 모드에선 접힌 편집 도구 레일(48px)이 항상 화면 오른쪽에 떠 있어서, 그만큼
오른쪽 여백을 더 줘야 토요일 칸이 레일에 가려지지 않습니다. */
.site.editing .owner-calendar-page{padding-right:60px}
.owner-cal-day-detail{display:block;padding:14px 12px;border-top:1px solid #ebe7e4}
.owner-cal-day-detail-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.owner-cal-day-detail-head b{font-size:13px}
.owner-cal-day-detail-add{border:1px solid #d9d4d2;background:#fff;border-radius:999px;padding:5px 11px;font-size:10px;font-weight:700;color:#3f3a3f}
.owner-cal-day-detail-list{display:flex;flex-direction:column;gap:6px}
.owner-cal-day-detail-list .owner-cal-event{width:auto;height:auto}
}
@media(min-width:1101px){.site.editing .owner-calendar-page{padding-right:460px}.site.editing .owner-calendar-shell{width:100%}}
.cal-poll-share-note .cal-poll-import{grid-column:1/-1;display:flex;gap:6px;margin-top:2px}.cal-poll-import input{flex:1;min-width:0;font-size:10px}
.shared-calendar-poll-page{min-height:100%;padding:92px 24px 64px;color:#242126}
.shared-calendar-poll-shell{width:min(1100px,100%);margin:0 auto}
.shared-calendar-poll-shell>header{margin-bottom:18px}.shared-calendar-poll-shell>header small{font-size:9px;font-weight:950;letter-spacing:.16em;color:var(--accent)}.shared-calendar-poll-shell>header h1{margin:5px 0 7px;font-size:clamp(28px,5vw,48px);letter-spacing:-.04em}.shared-calendar-poll-shell>header p{margin:0;color:#787177;font-size:12px}
.shared-poll-name{display:flex;align-items:center;gap:9px;margin-bottom:10px}.shared-poll-name label{font-size:10px;font-weight:900}.shared-poll-name input{width:min(280px,70vw);min-height:42px;border:1px solid #d9d3cf;border-radius:9px;background:#fff;padding:0 11px;font:inherit}
.shared-poll-actions{display:flex;justify-content:flex-end;gap:7px;margin-top:12px}.shared-poll-actions button{min-height:40px;border:1px solid #d8d2cf;border-radius:9px;background:#fff;padding:0 14px;font:inherit;font-size:11px;font-weight:850;cursor:pointer}.shared-poll-actions button.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.shared-poll-note{margin:10px 0 0;font-size:10px;line-height:1.55;color:#817a7f}
@media(max-width:640px){.shared-calendar-poll-page{padding:78px 10px 42px}.shared-poll-actions{flex-direction:column}.shared-poll-actions button{width:100%}.cal-poll-share-note .cal-poll-import{flex-direction:column}}
/* v0.3.176 — SOCIAL + owner calendar polish ----------------------------------- */
.owner-cal-daynum{
display:grid;
place-items:center;
padding:0;
line-height:1;
font-variant-numeric:tabular-nums;
}
.owner-cal-day.today .owner-cal-daynum{
border-radius:8px;
box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 72%,#fff);
}
.owner-cal-event{
position:relative;
min-height:29px;
border-radius:7px;
padding:5px 7px;
transition:.14s transform,.14s border-color,.14s background,.14s color;
}
.owner-cal-event:hover{transform:translateY(-1px)}
.owner-cal-event small{
display:inline-grid;
place-items:center;
min-width:31px;
height:17px;
padding:0 5px;
border-radius:4px;
line-height:1;
}
.owner-cal-event.type-personal{
border:1px solid #d9dde1;
border-left:4px solid #7b8793;
background:#f2f4f5;
}
.owner-cal-event.type-personal small{background:#fff;color:#66717c}
.owner-cal-event.type-trpg{
border:2px solid #7257a3;
background:#fff;
color:#533d79;
padding:4px 6px;
}
.owner-cal-event.type-trpg small{background:#7257a3;color:#fff}
.owner-cal-event.type-commission{
border:1px dashed #c17867;
border-left:5px solid #c17867;
background:#fff8f4;
color:#7c473b;
}
.owner-cal-event.type-commission small{background:#f2d7ce;color:#844c3f}
.owner-cal-event.type-dday{
border:1px solid color-mix(in srgb,var(--accent) 88%,#5b4a50);
border-left:1px solid color-mix(in srgb,var(--accent) 88%,#5b4a50);
background:var(--accent);
color:#fff;
box-shadow:0 3px 8px color-mix(in srgb,var(--accent) 18%,transparent);
}
.owner-cal-event.type-dday small{background:#ffffff24;color:#fff}
.owner-cal-event.type-dday b{color:#fff}
.owner-cal-side .owner-cal-actions{grid-template-columns:1fr 1fr}
.owner-cal-side .owner-cal-actions button:nth-child(3){grid-column:1/-1}
.calendar-editor-panel{padding-top:13px}
.calendar-editor-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.calendar-editor-top>div{min-width:0}
.calendar-editor-top h3{margin-bottom:3px}
.calendar-editor-top .drawer-note{margin:0}
.calendar-editor-top>.ebtn{flex:0 0 auto;min-height:34px;padding-inline:10px}
.calendar-editor-stats{margin:13px 0 15px;gap:8px}
.calendar-editor-stats span{
display:flex;
align-items:baseline;
gap:5px;
min-width:0;
padding:10px 11px;
}
.calendar-editor-stats b{font-size:20px;line-height:1;margin:0}
.calendar-editor-stats small{font-size:9px;color:#a8a8ad;font-weight:700}
.calendar-editor-label{margin:13px 0 7px;font-size:9px;letter-spacing:.08em;color:#9a9aa0;text-transform:uppercase}
.calendar-editor-action-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.calendar-editor-action-grid button:nth-child(3){grid-column:1/-1}
.calendar-editor-action-grid.two{grid-template-columns:1fr 1fr}
.calendar-editor-action-grid.two button:nth-child(3){grid-column:auto}
.calendar-editor-foot{margin-top:11px!important;padding-top:10px;border-top:1px solid #ffffff12}
/* SOCIAL */
.sns-page{
min-height:100%;
padding:88px 34px 72px;
color:#252126;
}
.sns-shell{width:min(1260px,100%);margin:0 auto}
.sns-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:20px}
.sns-page-head small{display:block;font-size:9px;font-weight:900;letter-spacing:.18em;color:var(--accent);margin-bottom:6px}
.sns-page-head h1{margin:0;font-size:clamp(32px,4vw,52px);line-height:1;font-weight:950;letter-spacing:-.045em}
.sns-page-head p{margin:8px 0 0;color:#7c757a;font-size:12px}
.sns-feed-count{display:flex;align-items:flex-end;gap:7px;color:#8a8388}
.sns-feed-count b{font-size:30px;line-height:.9;color:#2c272b;font-variant-numeric:tabular-nums}
.sns-feed-count span{font-size:9px;font-weight:900;letter-spacing:.1em}
.sns-layout{display:grid;grid-template-columns:210px minmax(0,680px) 210px;gap:18px;justify-content:center;align-items:start}
.sns-account-rail,.sns-meta-rail{position:sticky;top:86px;display:flex;flex-direction:column;gap:9px;min-width:0}
.sns-account-rail>small,.sns-meta-rail section>small{font-size:8px;font-weight:950;letter-spacing:.14em;color:#9b9298}
.sns-account-card{position:relative;border:1px solid #dfd9d6;background:#fff;border-radius:12px;padding:10px;overflow:hidden}
.sns-account-card>i{position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--sns-c)}
.sns-author{display:flex;align-items:center;gap:9px;min-width:0}
.sns-avatar{width:38px;height:38px;border-radius:50%;overflow:hidden;background:hsl(from var(--accent) h 14% 91%);display:grid;place-items:center;flex:0 0 auto;border:1px solid #e1dcda}
.sns-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.sns-avatar-fallback{font-weight:900;font-size:12px;color:#827b7f}
.sns-author>span{display:flex;flex-direction:column;min-width:0}
.sns-author b{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sns-author small{font-size:9px;color:#999096;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sns-author.compact{gap:7px}
.sns-author.compact .sns-avatar{width:28px;height:28px}
.sns-author.compact b{font-size:10px}
.sns-author.compact small{font-size:8px}
.sns-feed{display:flex;flex-direction:column;gap:12px;min-width:0}
.sns-post{background:#fff;border:1px solid #ddd7d4;border-radius:16px;overflow:hidden}
.sns-post>header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 15px 11px}
.sns-post>header time{font-size:9px;color:#a0989d;white-space:nowrap}
.sns-post-body{padding:0 15px 13px}
.sns-post-body>p{margin:0;font-size:13px;line-height:1.75;color:#342f33;word-break:break-word}
.sns-post-image{margin-top:11px;border:1px solid #e4dfdc;border-radius:12px;overflow:hidden;background:hsl(from var(--accent) h 14% 96%)}
.sns-post-image img{display:block;width:100%;max-height:520px;object-fit:contain}
.sns-post>footer{display:flex;align-items:center;gap:16px;border-top:1px solid #eee9e6;padding:8px 15px;color:#8a8287;font-size:9px;letter-spacing:.04em}
.sns-post>footer b{color:#474147;font-size:10px}
.sns-comments{border-top:1px solid #eee9e6;background:hsl(from var(--accent) h 17% 98%);padding:3px 15px 9px}
.sns-comment-row{display:grid;grid-template-columns:118px minmax(0,1fr);gap:10px;padding:10px 0;border-bottom:1px solid #ece7e4}
.sns-comment-row:last-child{border-bottom:0}
.sns-comment-copy>p,.sns-reply-row>div>p{margin:1px 0 3px;font-size:11px;line-height:1.55;color:#443e42}
.sns-comment-copy>small,.sns-reply-row>div>small{font-size:8px;color:#aaa1a6}
.sns-replies{margin-top:8px;padding-left:11px;border-left:2px solid color-mix(in srgb,var(--accent) 35%,#ded8d5);display:flex;flex-direction:column;gap:8px}
.sns-reply-row{display:grid;grid-template-columns:105px minmax(0,1fr);gap:8px;align-items:start}
.sns-meta-rail section{background:#fff;border:1px solid #dfd9d6;border-radius:12px;padding:12px}
.sns-meta-rail section>b{display:block;margin:4px 0 5px;font-size:14px}
.sns-meta-rail section>p{margin:0;font-size:9px;line-height:1.55;color:#91898f}
.sns-meta-rail section>div{display:flex;align-items:baseline;justify-content:space-between;border-top:1px solid #eee9e6;padding:8px 0 0;margin-top:8px}
.sns-meta-rail section>div b{font-size:18px}
.sns-meta-rail section>div span{font-size:8px;color:#999096;font-weight:900;letter-spacing:.08em}
.sns-empty,.sns-empty-small{border:1px dashed #d9d3d0;border-radius:14px;padding:28px 18px;text-align:center;color:#999096;background:#ffffff88}
.sns-empty b{font-size:16px}.sns-empty p{font-size:10px;margin:6px 0 0}.sns-empty-small{font-size:9px;padding:16px 10px}
.sns-admin-comments{margin:12px 0 2px;border:1px solid #ddd7d4;border-radius:10px;padding:10px;background:hsl(from var(--accent) h 17% 98%)}
.sns-admin-comments>header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.sns-admin-comments>header>b{font-size:11px}
.sns-admin-comments>article{border-top:1px solid #e7e1de;padding:9px 0}
.sns-admin-comments>article:first-of-type{border-top:0}
.sns-admin-comments article>div:first-child b{font-size:10px}
.sns-admin-comments article>div:first-child p{margin:3px 0;font-size:10px;line-height:1.45}
.sns-admin-comments article>div:first-child small{font-size:8px;color:#999}
.sns-admin-comment-actions{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px}
.sns-admin-comment-actions .m-btn,.sns-admin-reply .m-btn{min-height:28px;padding:0 8px;font-size:9px}
.sns-admin-reply{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:5px;align-items:center;margin:7px 0 0 12px;padding:6px 7px;border-radius:7px;background:#fff;border:1px solid #e7e1de}
.sns-admin-reply span{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:1100px){
.sns-layout{grid-template-columns:180px minmax(0,1fr)}
.sns-meta-rail{display:none}
}
@media(max-width:760px){
.sns-page{padding:74px 12px 46px}
.sns-page-head{align-items:flex-start;flex-direction:column}
.sns-feed-count{align-self:flex-end}
.sns-layout{grid-template-columns:1fr}
.sns-account-rail{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));order:0}
.sns-account-rail>small{grid-column:1/-1}
.sns-feed{order:1}
.sns-comment-row{grid-template-columns:1fr}
.sns-reply-row{grid-template-columns:1fr}
.sns-author.compact>span{flex-direction:row;gap:5px;align-items:baseline}
}
@media(max-width:430px){
.sns-account-rail{grid-template-columns:1fr}
.sns-account-rail>small{grid-column:auto}
.sns-post>header{align-items:flex-start;flex-direction:column}
.sns-post>header time{padding-left:47px}
}
/* v0.3.177 — calendar visibility --------------------------------------------- */
.calendar-visibility-toggle{
display:grid;
grid-template-columns:1fr 1fr;
gap:5px;
padding:4px;
border:1px solid #ffffff18;
border-radius:9px;
background:#0f0f11;
}
.calendar-visibility-toggle button{
min-height:34px;
border:1px solid transparent;
border-radius:6px;
background:transparent;
color:#8f8f95;
font:inherit;
font-size:10px;
font-weight:850;
cursor:pointer;
}
.calendar-visibility-toggle button.on{
border-color:#ffffff20;
background:#2b2b30;
color:#fff;
}
.calendar-visibility-help{margin:7px 1px 0!important;line-height:1.5}
.owner-calendar-page.public-view .owner-cal-daynum{cursor:default}
.owner-calendar-page.public-view .owner-cal-event.readonly{cursor:default}
.owner-calendar-page.public-view .owner-cal-event.readonly:hover{transform:none}
.owner-cal-upcoming-item{
display:grid;
grid-template-columns:auto minmax(0,1fr);
gap:2px 7px;
align-items:center;
border:1px solid #e5dfdc;
background:#faf9f8;
border-radius:8px;
padding:8px;
text-align:left;
min-width:0;
}
.owner-cal-upcoming-item span{grid-row:1/3;font-size:8px;font-weight:950;color:var(--accent)}
.owner-cal-upcoming-item b{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.owner-cal-upcoming-item small{font-size:9px;color:#888;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.owner-cal-public-note small{display:block;font-size:8px;font-weight:950;letter-spacing:.16em;color:var(--accent);margin-bottom:5px}
.owner-cal-public-note p{margin:0;font-size:10px;line-height:1.55;color:#817a7f}
/* v0.3.178 — SOCIAL redesign + wider bottom dock ------------------------------ */
.site-bottom-dock {
width: max-content;
max-width: calc(100vw - 32px);
}
@media (min-width: 701px) {
.site-bottom-dock {
justify-content: center;
padding-inline: 12px;
}
}
.sns-page {
padding: clamp(78px, 8vw, 104px) clamp(14px, 3vw, 28px) 58px;
}
.sns-shell {
width: min(1160px, 100%);
margin: 0 auto;
}
.sns-page-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 20px;
margin-bottom: 18px;
}
.sns-page-head small {
display: block;
font-size: 10px;
font-weight: 900;
letter-spacing: 0.18em;
color: var(--accent);
margin-bottom: 8px;
}
.sns-page-head h1 {
margin: 0;
font-size: clamp(40px, 5vw, 64px);
line-height: 0.94;
font-weight: 950;
letter-spacing: -0.055em;
}
.sns-page-head p {
margin: 10px 0 0;
color: #766f74;
font-size: 13px;
}
.sns-head-stats {
display: flex;
gap: 10px;
flex-wrap: wrap;
justify-content: flex-end;
}
.sns-stat-pill {
min-width: 106px;
border: 1px solid #ddd7d4;
border-radius: 16px;
background: #fff;
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 4px;
}
.sns-stat-pill b {
font-size: 28px;
line-height: 0.9;
color: #2f2a2e;
font-variant-numeric: tabular-nums;
}
.sns-stat-pill span {
font-size: 9px;
font-weight: 900;
letter-spacing: 0.12em;
color: #938b90;
}
.sns-body {
display: grid;
grid-template-columns: minmax(0, 1fr) 240px;
gap: 18px;
align-items: start;
}
.sns-feed-wrap {
min-width: 0;
display: flex;
flex-direction: column;
gap: 16px;
}
.sns-side-rail {
position: sticky;
top: 86px;
display: flex;
flex-direction: column;
gap: 12px;
}
.sns-meta-card {
border: 1px solid #dfd9d6;
border-radius: 16px;
background: #fff;
padding: 14px;
}
.sns-meta-card small {
display: block;
font-size: 9px;
font-weight: 900;
letter-spacing: 0.14em;
color: #9a9197;
}
.sns-meta-card b {
display: block;
margin-top: 6px;
font-size: 18px;
color: #2c272b;
}
.sns-meta-card p {
margin: 8px 0 0;
font-size: 11px;
line-height: 1.55;
color: #898086;
}
.sns-meta-line {
display: flex;
align-items: center;
justify-content: space-between;
border-top: 1px solid #eee9e6;
padding-top: 8px;
margin-top: 8px;
}
.sns-meta-line span {
font-size: 10px;
color: #8f878c;
}
.sns-meta-line b {
margin: 0;
font-size: 16px;
}
.sns-section-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
margin-bottom: 10px;
}
.sns-section-head b {
font-size: 11px;
letter-spacing: 0.12em;
color: #2f2b2f;
}
.sns-section-head span {
font-size: 10px;
color: #8f878c;
}
.sns-account-strip,
.sns-feed-panel {
border: 1px solid #dfd9d6;
border-radius: 18px;
background: rgba(255,255,255,0.86);
padding: 14px;
}
.sns-account-scroll {
display: flex;
gap: 10px;
overflow-x: auto;
scrollbar-width: none;
padding-bottom: 2px;
}
.sns-account-scroll::-webkit-scrollbar { display: none; }
.sns-account-card {
position: relative;
min-width: 190px;
border: 1px solid #e2dcd9;
background: #fff;
border-radius: 16px;
padding: 12px 12px 12px 16px;
overflow: hidden;
box-shadow: 0 8px 20px rgba(35, 28, 32, 0.04);
}
.sns-account-card > i {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: var(--sns-c);
}
.sns-feed {
display: flex;
flex-direction: column;
gap: 14px;
}
.sns-post {
background: #fff;
border: 1px solid #ded7d4;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 10px 24px rgba(30, 25, 28, 0.04);
}
.sns-post > header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px 16px 12px;
}
.sns-post > header time {
font-size: 10px;
color: #978f94;
white-space: nowrap;
}
.sns-post-body {
padding: 0 16px 14px;
}
.sns-post-body > p {
margin: 0;
font-size: 13px;
line-height: 1.8;
color: #342f33;
}
.sns-post-image {
margin-top: 12px;
border: 1px solid #e6e1de;
border-radius: 14px;
overflow: hidden;
background: #f6f3f2;
}
.sns-post > footer {
display: flex;
align-items: center;
gap: 16px;
border-top: 1px solid #f0ebe8;
padding: 10px 16px;
color: #8a8287;
font-size: 10px;
letter-spacing: 0.04em;
}
.sns-post > footer b {
color: #474147;
font-size: 11px;
}
.sns-comments {
border-top: 1px solid #f0ebe8;
background: #fbfaf9;
padding: 10px 16px 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
.sns-thread-row {
display: flex;
align-items: flex-start;
gap: 10px;
}
.sns-thread-row.is-reply {
gap: 8px;
}
.sns-thread-row .sns-avatar {
width: 34px;
height: 34px;
border-radius: 50%;
overflow: hidden;
border: 1px solid #e3deda;
background: #fff;
flex: 0 0 auto;
}
.sns-thread-row .sns-avatar.small {
width: 28px;
height: 28px;
}
.sns-thread-card {
flex: 1;
min-width: 0;
border: 1px solid #ebe5e2;
border-radius: 14px;
background: #fff;
padding: 10px 12px;
}
.sns-thread-head {
display: flex;
align-items: baseline;
gap: 7px;
flex-wrap: wrap;
margin-bottom: 4px;
}
.sns-thread-head b {
font-size: 11px;
color: #302b2f;
}
.sns-thread-head small {
font-size: 9px;
color: #9a9297;
}
.sns-thread-card p {
margin: 0;
font-size: 12px;
line-height: 1.7;
color: #403a3f;
word-break: break-word;
}
.sns-thread-replies {
margin-top: 10px;
padding-top: 10px;
border-top: 1px dashed #e7e1de;
display: flex;
flex-direction: column;
gap: 8px;
}
.sns-author {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.sns-avatar {
width: 42px;
height: 42px;
border-radius: 50%;
overflow: hidden;
background: #ece8e6;
display: grid;
place-items: center;
flex: 0 0 auto;
border: 1px solid #e1dcda;
}
.sns-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.sns-avatar-fallback {
font-weight: 900;
font-size: 12px;
color: #827b7f;
}
.sns-author > span {
display: flex;
flex-direction: column;
min-width: 0;
}
.sns-author b {
font-size: 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sns-author small {
font-size: 10px;
color: #999096;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sns-author.compact {
gap: 7px;
}
.sns-author.compact .sns-avatar {
width: 28px;
height: 28px;
}
.sns-author.compact b { font-size: 10px; }
.sns-author.compact small { font-size: 8px; }
.sns-empty,
.sns-empty-small {
border: 1px dashed #d9d3d0;
border-radius: 14px;
padding: 28px 18px;
text-align: center;
color: #999096;
background: #ffffff88;
}
.sns-empty b { font-size: 16px; }
.sns-empty p { font-size: 10px; margin: 6px 0 0; }
.sns-empty-small { font-size: 10px; padding: 18px 12px; }
@media (max-width: 960px) {
.sns-body {
grid-template-columns: 1fr;
}
.sns-side-rail {
position: static;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 700px) {
.sns-page {
padding: 74px 12px 46px;
}
.sns-page-head {
align-items: flex-start;
flex-direction: column;
}
.sns-head-stats {
width: 100%;
justify-content: flex-start;
}
.sns-stat-pill {
min-width: 92px;
}
.sns-side-rail {
grid-template-columns: 1fr;
}
.sns-account-card {
min-width: 172px;
}
.sns-post > header {
align-items: flex-start;
flex-direction: column;
}
.sns-post > header time {
padding-left: 52px;
}
.sns-comments {
padding: 10px 12px 14px;
}
.sns-thread-card {
padding: 9px 10px;
}
}
/* v0.3.181 — custom background image + page-specific direct-manipulation stickers */
.world-bg-image {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
/* JS가 현재 페이지의 원래 계산 배경(색/gradient)을 그대로 복제합니다. */
background-color: transparent;
}
.world-bg-image img {
display: block;
width: 100%;
max-width: none;
height: auto;
min-height: 0;
object-fit: contain;
object-position: top center;
user-select: none;
}
.site.has-world-bg-image .site-view {
position: relative;
z-index: 2;
background: transparent !important;
}
body .site.has-world-bg-image .site-view > :not(.world-bg-image):not(.easter-hotspot):not(.area-select-hint):not(.area-select-box) {
position: relative;
z-index: 1;
background-color: transparent !important;
background-image: none !important;
}
.world-sticker-layer {
position: fixed;
inset: 0;
/* v0.3.322 — 스티커가 반신 캐릭터 이미지 뒤에 깔려서 잘 안 보인다는 요청으로
올렸습니다. .hero-info-half가 z-index:10 !important라, 그보다 높여야 스티커가
그 위로 올라옵니다. 편집 모드 값(35)·하단 독(80)보다는 여전히 낮게 둡니다. */
z-index: 15;
pointer-events: none;
overflow: hidden;
}
.world-sticker-item {
position: absolute;
left: var(--st-x, 50%);
top: var(--st-y, 50%);
width: var(--st-size, 120px);
max-width: min(85vw, 900px);
transform: translate(-50%, -50%) rotate(var(--st-rotation, 0deg));
transform-origin: center center;
opacity: var(--st-opacity, 1);
user-select: none;
pointer-events: none;
}
.world-sticker-image {
display: block;
width: 100%;
height: auto;
transform: none;
transform-origin: center center;
user-select: none;
-webkit-user-drag: none;
pointer-events: none;
}
.world-sticker-resize-handle,
.world-sticker-rotate-handle {
display: none;
}
.site.editing .world-sticker-layer {
z-index: 35;
overflow: visible;
}
.site.editing .world-sticker-item {
pointer-events: none;
}
.site.editing .world-sticker-image {
pointer-events: auto;
cursor: grab;
outline: 1px dashed color-mix(in srgb, var(--accent) 70%, #fff);
outline-offset: 6px;
border-radius: 4px;
touch-action: none;
}
.site.editing .world-sticker-item.dragging .world-sticker-image {
cursor: grabbing;
outline-style: solid;
}
.site.editing .world-sticker-resize-handle,
.site.editing .world-sticker-rotate-handle {
position: absolute;
bottom: -22px;
display: grid;
place-items: center;
width: 30px;
height: 30px;
padding: 0;
border: 1px solid rgba(255,255,255,.46);
border-radius: 50%;
background: rgba(24,23,27,.9);
color: #fff;
box-shadow: 0 5px 15px rgba(0,0,0,.2);
pointer-events: auto;
touch-action: none;
z-index: 2;
/* 위치는 스티커 회전을 따라가되, 버튼 모양 자체는 화면 기준으로 똑바로 유지합니다. */
transform: rotate(var(--st-counter-rotation, 0deg));
transform-origin: center center;
}
.site.editing .world-sticker-resize-handle {
left: -22px;
cursor: nwse-resize;
}
.site.editing .world-sticker-resize-handle::before,
.site.editing .world-sticker-resize-handle::after {
content: "";
position: absolute;
width: 11px;
height: 1px;
background: currentColor;
transform: rotate(45deg);
}
.site.editing .world-sticker-resize-handle::after {
width: 5px;
height: 5px;
border-left: 1px solid currentColor;
border-bottom: 1px solid currentColor;
background: transparent;
transform: translate(-4px, 4px) rotate(0deg);
}
.site.editing .world-sticker-rotate-handle {
right: -22px;
cursor: grab;
font: 700 17px/1 sans-serif;
}
.site.editing .world-sticker-item.rotating .world-sticker-rotate-handle {
cursor: grabbing;
background: var(--accent);
}
.site.editing .world-sticker-item.resizing .world-sticker-resize-handle {
background: var(--accent);
}
.world-bg-editor-preview {
position: relative;
width: 100%;
aspect-ratio: 16 / 7;
margin: 10px 0;
border: 1px dashed #4a474d;
border-radius: 10px;
overflow: hidden;
display: grid;
place-items: center;
background: var(--world-base-bg, var(--world-bg, #f4f2ef));
color: #8e8990;
font-size: 9px;
font-weight: 800;
letter-spacing: .1em;
}
.world-bg-editor-preview img {
position: absolute;
inset: 0 auto auto 0;
display: block;
width: 100%;
max-width: none;
height: auto;
object-fit: contain;
object-position: top center;
}
.decor-range {
display: grid;
gap: 7px;
margin-top: 12px;
}
.decor-range > label {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
font-size: 10px;
}
.decor-range > label b { font-variant-numeric: tabular-nums; }
.decor-range input[type="range"] { width: 100%; }
.decor-sticker-list {
display: grid;
gap: 9px;
margin-top: 10px;
}
.decor-sticker-row {
display: grid;
grid-template-columns: 74px minmax(0, 1fr);
gap: 10px;
padding: 9px;
border: 1px solid #35343a;
border-radius: 10px;
background: #19191d;
}
.decor-sticker-thumb {
min-width: 0;
height: 74px;
border-radius: 8px;
overflow: hidden;
background: #242329;
border: 1px solid #3e3c43;
display: grid;
place-items: center;
color: #77727c;
font-size: 8px;
}
.decor-sticker-thumb img { width: 100%; height: 100%; object-fit: contain; }
.decor-sticker-controls {
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: 6px;
}
.decor-sticker-controls > b { font-size: 9px; letter-spacing: .08em; }
.decor-sticker-controls > small { font-size: 8px; color: #8e8992; }
.decor-sticker-controls .eactions { margin-top: 2px; }
@media (max-width: 700px) {
.world-sticker-item { max-width: min(88vw, 620px); }
.decor-sticker-row { grid-template-columns: 58px minmax(0, 1fr); }
.decor-sticker-thumb { height: 58px; }
.site.editing .world-sticker-resize-handle,
.site.editing .world-sticker-rotate-handle {
width: 34px;
height: 34px;
bottom: -25px;
}
.site.editing .world-sticker-resize-handle { left: -25px; }
.site.editing .world-sticker-rotate-handle { right: -25px; }
}
/* v0.3.182 — sticker handles rotate with sticker; background image uses actual site base color */
/* v0.3.184 — uploaded background sits on each page's real original background */
.site.has-world-bg-image .site-view > .world-bg-image {
z-index: 0;
}
/* v0.3.185 — direct background image position controls */
.world-bg-image img {
position: absolute;
left: 50%;
top: 0;
width: 100%;
max-width: none;
height: auto;
min-height: 0;
object-fit: contain;
object-position: top center;
transform: translate(
calc(-50% + var(--world-bg-x-vw, 0vw)),
var(--world-bg-y-vh, 0vh)
);
transform-origin: top center;
}
.world-bg-editor-preview img {
left: 50%;
top: 0;
transform: translate(
calc(-50% + var(--world-bg-x-pct, 0%)),
var(--world-bg-y-pct, 0%)
);
transform-origin: top center;
}
.decor-bg-position {
display: grid;
gap: 8px;
margin-top: 13px;
padding-top: 12px;
border-top: 1px solid #35343a;
}
.decor-bg-position > label {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
font-size: 10px;
}
.decor-bg-position > label b {
font-variant-numeric: tabular-nums;
color: #aaa4ae;
font-size: 9px;
}
.decor-bg-position-pad {
width: 112px;
display: grid;
grid-template-columns: repeat(3, 34px);
grid-auto-rows: 34px;
gap: 5px;
margin: 1px auto 2px;
}
.decor-bg-position-pad button {
width: 34px;
height: 34px;
display: grid;
place-items: center;
padding: 0;
border: 1px solid #45434a;
border-radius: 8px;
background: #222126;
color: #d7d2da;
cursor: pointer;
font: 700 14px/1 sans-serif;
}
.decor-bg-position-pad button:hover {
border-color: var(--accent);
color: #fff;
background: #2a292f;
}
.decor-bg-position-pad button.reset {
font-size: 9px;
color: var(--accent);
}
/* v0.3.186 — world background color consistency ------------------------------ */
/* 직접 지정/스킨색 모드에서는 페이지 루트마다 하드코딩돼 있던 크림색들을 한 색으로 통일.
background-color만 덮어서 기존 gradient/texture 장식은 그대로 남깁니다. */
.site.theme-default:not(.dark-mode).world-bg-override {
--ui-page-bg: var(--world-bg);
}
/* v0.3.329 — 이 규칙은 .site-view의 "페이지 콘텐츠" 직계 자식을 통일된 배경색으로
덮으려는 의도인데, .easter-hotspot(이스터에그/반응 범위 표시 상자, v0.3.326부터
.site-view의 직계 자식)까지 함께 걸려서 일부러 낮춘 반투명 배경(v0.3.327)이
!important로 통째로 불투명한 페이지 배경색으로 덮여버렸습니다. */
.site.theme-default.world-bg-override .site-view > :not(.world-bg-image):not(.easter-hotspot):not(.area-select-hint):not(.area-select-box) {
background: var(--ui-page-bg) !important;
}
.world-background-reset-row {
align-items: center;
justify-content: space-between;
margin-top: 7px;
}
.world-background-reset-row small {
color: #8f878c;
font-size: 9px;
}
/* v0.3.187 — character creation image fields -------------------------------- */
.character-modal-images {
margin: 14px 0;
padding: 12px;
border: 1px solid #ddd7d4;
border-radius: 12px;
display: grid;
gap: 10px;
}
.character-modal-images > legend {
padding: 0 5px;
font-size: 10px;
font-weight: 800;
color: #8e868b;
letter-spacing: .05em;
}
.character-modal-image-field {
margin: 0;
}
.character-modal-image-row {
display: grid;
grid-template-columns: 86px minmax(0, 1fr);
gap: 10px;
align-items: center;
}
.character-modal-image-preview {
width: 86px;
height: 86px;
border: 1px solid #ddd7d4;
border-radius: 10px;
overflow: hidden;
background: #f5f2f0;
display: grid;
place-items: center;
color: #a0979d;
font-size: 9px;
font-weight: 800;
letter-spacing: .08em;
}
.character-modal-image-preview img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.character-modal-image-actions {
min-width: 0;
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.character-modal-image-actions small {
width: 100%;
font-size: 9px;
line-height: 1.45;
color: #958d92;
}
.character-modal-main-check {
margin-top: 12px;
}
.character-modal-main-help {
display: block;
margin: -4px 0 10px;
/* v0.3.344 — 관리자 문구 검토 반영: 붉은 글씨로(캐릭터 목록의 같은 경고와
톤 통일, .character-main-warning과 같은 색). 뒤쪽 .modal-help{color:#8f8d96
!important} 규칙을 이겨야 해서 !important 필요. */
color: #f0a6b4 !important;
font-weight: 700;
}
@media (max-width: 520px) {
.character-modal-image-row {
grid-template-columns: 70px minmax(0, 1fr);
}
.character-modal-image-preview {
width: 70px;
height: 70px;
}
}
/* v0.3.190 — GUESTBOOK ------------------------------------------------------- */
.guestbook-page{
min-height:100%;
padding:clamp(82px,8vw,108px) clamp(14px,4vw,54px) 86px;
color:#29252a;
}
.guestbook-shell{width:min(1120px,100%);margin:0 auto}
.guestbook-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:22px}
.guestbook-head>div{min-width:0}
.guestbook-head small{display:block;margin-bottom:8px;font-size:9px;font-weight:900;letter-spacing:.18em;color:var(--accent,#9f7d86)}
.guestbook-head h1{margin:0;font-size:clamp(42px,6vw,72px);line-height:.92;letter-spacing:-.055em;font-weight:950}
.guestbook-head p{margin:12px 0 0;max-width:620px;color:#7e767c;font-size:12px;line-height:1.7}
.guestbook-head>strong{flex:0 0 auto;display:flex;align-items:baseline;gap:7px;font-size:34px;line-height:1;font-variant-numeric:tabular-nums}
.guestbook-head>strong span{font-size:9px;letter-spacing:.12em;color:#989096}
.guestbook-layout{display:grid;grid-template-columns:minmax(260px,330px) minmax(0,1fr);gap:18px;align-items:start}
.guestbook-compose{position:sticky;top:86px;border:1px solid color-mix(in srgb,var(--accent,#9f7d86) 18%,#d9d3d0);border-radius:20px;background:color-mix(in srgb,var(--world-bg,#f4f2ef) 72%,#fff);padding:18px;box-shadow:0 12px 30px rgba(38,30,35,.05)}
.guestbook-compose-head{display:flex;flex-direction:column;gap:4px;margin-bottom:16px;padding-bottom:13px;border-bottom:1px solid rgba(40,34,39,.09)}
.guestbook-compose-head small{font-size:8px;font-weight:900;letter-spacing:.16em;color:var(--accent,#9f7d86)}
.guestbook-compose-head b{font-size:17px}
.guestbook-field{display:grid;gap:6px;margin-top:12px;position:relative}
.guestbook-field label{font-size:10px;font-weight:800;color:#625b60}
.guestbook-field input,.guestbook-field textarea{width:100%;box-sizing:border-box;border:1px solid #dcd5d2;border-radius:12px;background:rgba(255,255,255,.84);color:#2d282c;padding:11px 12px;font:inherit;font-size:12px;outline:none;resize:vertical}
.guestbook-field input:focus,.guestbook-field textarea:focus{border-color:color-mix(in srgb,var(--accent,#9f7d86) 65%,#bbb);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent,#9f7d86) 12%,transparent)}
.guestbook-field>small{justify-self:end;font-size:8px;color:#aaa1a6}
.guestbook-submit{width:100%;min-height:42px;margin-top:14px;border:0;border-radius:12px;background:#272329;color:#fff;font-weight:850;font-size:11px;cursor:pointer}
.guestbook-submit:hover{transform:translateY(-1px)}
.guestbook-local-note{margin:10px 2px 0;font-size:8px;line-height:1.55;color:#9b9398}
.guestbook-list{display:flex;flex-direction:column;gap:11px;min-width:0}
.guestbook-entry{border:1px solid #dfd9d6;border-radius:18px;background:color-mix(in srgb,var(--world-bg,#f4f2ef) 58%,#fff);padding:15px 17px;box-shadow:0 8px 22px rgba(35,28,32,.035)}
.guestbook-entry>header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.guestbook-entry>header>div{display:flex;align-items:center;gap:9px;min-width:0}
.guestbook-entry>header span{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:color-mix(in srgb,var(--accent,#9f7d86) 15%,#fff);color:color-mix(in srgb,var(--accent,#9f7d86) 78%,#222);font-size:9px;font-weight:900;font-variant-numeric:tabular-nums}
.guestbook-entry>header b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.guestbook-entry>header time{font-size:9px;color:#a0979d;white-space:nowrap}
.guestbook-entry>p{margin:0;color:#433d42;font-size:12px;line-height:1.75;word-break:break-word}
.guestbook-reply{margin-top:12px;margin-left:34px;border-left:3px solid color-mix(in srgb,var(--accent,#9f7d86) 44%,#d7d0cd);background:rgba(255,255,255,.48);border-radius:0 12px 12px 0;padding:10px 12px}
.guestbook-reply small{display:block;margin-bottom:5px;font-size:8px;font-weight:900;letter-spacing:.11em;color:var(--accent,#9f7d86)}
.guestbook-reply p{margin:0;font-size:11px;line-height:1.65;color:#5a5358}
.guestbook-delete-own{margin-top:10px;border:0;background:transparent;color:#a49ca1;font-size:9px;text-decoration:underline;cursor:pointer;padding:0}
.guestbook-empty{border:1px dashed #d7d0cd;border-radius:18px;padding:50px 20px;text-align:center;background:rgba(255,255,255,.28)}
.guestbook-empty b{display:block;font-size:16px;letter-spacing:.08em}
.guestbook-empty p{margin:7px 0 0;font-size:10px;color:#999096}
.guestbook-admin-summary{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:12px 0;padding:10px 11px;border:1px solid #e1dbd8;border-radius:10px;background:#faf9f8}
.guestbook-admin-summary b{font-size:21px}.guestbook-admin-summary span{font-size:9px;color:#8f878c}
.guestbook-admin-list .elist-row{align-items:flex-start}
.guestbook-admin-list .grow p{margin:4px 0 0;font-size:9px;line-height:1.45;color:#6f676c}
.guestbook-admin-list .grow em{display:block;margin-top:4px;font-size:8px;font-style:normal;color:var(--accent,#9f7d86)}
.site.theme-default.dark-mode .guestbook-page{color:#f2eef1}
.site.theme-default.dark-mode .guestbook-head p,.site.theme-default.dark-mode .guestbook-local-note{color:#999197}
.site.theme-default.dark-mode .guestbook-compose,.site.theme-default.dark-mode .guestbook-entry{background:color-mix(in srgb,var(--world-bg,#121214) 82%,#242126);border-color:#3b373c}
.site.theme-default.dark-mode .guestbook-compose-head{border-bottom-color:#39353a}
.site.theme-default.dark-mode .guestbook-field label{color:#c5bec3}
.site.theme-default.dark-mode .guestbook-field input,.site.theme-default.dark-mode .guestbook-field textarea{background:#1d1b1f;border-color:#403b41;color:#f4f0f2}
.site.theme-default.dark-mode .guestbook-submit{background:#f2edef;color:#242126}
.site.theme-default.dark-mode .guestbook-entry>p{color:#d9d2d7}
.site.theme-default.dark-mode .guestbook-reply{background:#201d21}
.site.theme-default.dark-mode .guestbook-reply p{color:#c8c0c5}
.site.theme-default.dark-mode .guestbook-empty{background:rgba(255,255,255,.025);border-color:#403b40}
/* v0.3.263 — 사용자 요청: 대화(TALK) 페이지의 큰 박스(.talk-window)가 v0.3.219 통합
컬러 시스템 도입 때 빠져서 다크모드에서도 계속 밝은 하드코딩 색 그대로였습니다. */
.site.theme-default.dark-mode .talk-window{background:color-mix(in srgb,var(--accent,#9f7d86) 5%,#1b1a1e);border-color:rgba(255,255,255,.14);color:#f2eff1}
.site.theme-default.dark-mode .talk-window-head{border-bottom-color:rgba(255,255,255,.14)}
.site.theme-default.dark-mode .talk-window-head small,.site.theme-default.dark-mode .talk-meta small,.site.theme-default.dark-mode .talk-no-message{color:#7e777d}
.site.theme-default.dark-mode .talk-meta{color:#aaa3a9}
.site.theme-default.dark-mode .talk-meta i{background:#3a363a}
.site.theme-default.dark-mode .talk-bubble{background:color-mix(in srgb,var(--talk) 24%,#232126);border-color:color-mix(in srgb,var(--talk) 28%,#3a363a);color:#f2eff1}
.site.theme-default.dark-mode .talk-message.right .talk-bubble{background:color-mix(in srgb,var(--talk) 78%,#1b1a1e);color:#fff}
.site.theme-default.dark-mode .talk-message.narration .talk-bubble{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16);color:#aaa3a9}
.site.theme-default.dark-mode .talk-narration-time{color:#7e777d}
.site.theme-default.dark-mode .talk-input-mock{background:color-mix(in srgb,var(--accent,#9f7d86) 4%,#17161a);color:#7e777d}
@media(max-width:820px){
.guestbook-head{align-items:flex-start;flex-direction:column}
.guestbook-head>strong{align-self:flex-end;font-size:28px}
.guestbook-layout{grid-template-columns:1fr}
.guestbook-compose{position:static}
}
@media(max-width:520px){
.guestbook-page{padding:76px 12px 74px}
.guestbook-head h1{font-size:44px}
.guestbook-entry{padding:13px}
.guestbook-entry>header{align-items:flex-start}
.guestbook-entry>header time{font-size:8px}
.guestbook-reply{margin-left:18px}
}
/* v0.3.191 — TALES visibility flags ----------------------------------------- */
.tales-access-tabs {
display: flex;
align-items: center;
gap: 7px;
flex: 0 0 auto;
}
.tales-access-tabs button {
min-width: 48px;
height: 34px;
padding: 0 12px;
border: 1px solid rgba(70, 60, 60, 0.14);
border-radius: 999px;
background: rgba(255, 255, 255, 0.72);
color: #766f72;
font: 800 10px/1 system-ui, sans-serif;
letter-spacing: 0.08em;
cursor: pointer;
}
.tales-access-tabs button.on {
background: #25151a;
color: #f1bacb;
border-color: #25151a;
}
.tale-access-badges {
display: flex;
align-items: center;
gap: 5px;
flex-wrap: wrap;
margin: 0 0 8px;
}
.tale-access-badges span,
.tale-detail-head .tale-access-badges span {
padding: 4px 7px;
border-radius: 999px;
background: #e9e7e3;
color: #555;
font: 800 8px/1 system-ui, sans-serif;
letter-spacing: 0.08em;
}
.tale-access-badges .r18,
.tale-detail-head .tale-access-badges .r18 {
background: #25151a;
color: #f1bacb;
}
.tale-access-badges .spoiler,
.tale-detail-head .tale-access-badges .spoiler {
background: #252229;
color: #d9cff0;
}
.tale-access-badges .private,
.tale-detail-head .tale-access-badges .private {
background: #1c1c1c;
color: #cfcfcf;
}
.tale-detail-head > div > .tale-access-badges {
margin: 0 2px 0 0;
}
@media (max-width: 700px) {
.tales-page-head {
align-items: flex-start;
gap: 14px;
}
.tales-access-tabs {
align-self: flex-end;
}
}
/* v0.3.192 — custom HTML page -------------------------------------------------- */
/* v0.3.354 — 사용자가 만든 코드가 곧 페이지 전체가 되도록(LOPE가 얹던 제목·설명
박스를 없애고, 고정 px 높이 대신 화면 남은 영역을 채우는 형태로) 구조 변경. */
.custom-html-page {
padding-top: 58px;
color: #282429;
}
.custom-html-frame {
display: block;
width: 100%;
height: calc(100dvh - 58px);
border: 0;
background: transparent;
}
.custom-html-empty {
min-height: calc(100dvh - 58px);
display: grid;
place-items: center;
align-content: center;
gap: 7px;
margin: 0 clamp(14px, 4vw, 56px);
border: 1px dashed color-mix(in srgb, currentColor 22%, transparent);
border-radius: 18px;
text-align: center;
}
.custom-html-empty b {
font-size: 16px;
letter-spacing: .08em;
}
.custom-html-empty p {
margin: 0;
color: color-mix(in srgb, currentColor 58%, transparent);
font-size: 11px;
}
/* v0.3.354 — HTML 자유 페이지 아이콘 등록 UI. */
.html-page-icon-row {
display: flex;
align-items: center;
gap: 8px;
}
.html-page-icon-preview {
width: 32px;
height: 32px;
border-radius: 8px;
object-fit: cover;
background: #222;
flex: 0 0 auto;
}
.html-page-icon-preview.empty {
display: grid;
place-items: center;
}
.html-page-icon-preview.empty .ui-icon {
width: 16px;
height: 16px;
filter: brightness(0) invert(1);
}
.html-code-editor {
min-height: 360px !important;
resize: vertical;
font-family: "Cascadia Code", "Consolas", "SFMono-Regular", monospace !important;
font-size: 11px !important;
line-height: 1.6 !important;
tab-size: 2;
white-space: pre;
overflow: auto;
}
.site.theme-default.dark-mode .custom-html-page {
color: #f2eef1;
}
@media (max-width: 700px) {
.html-code-editor {
min-height: 280px !important;
}
}
/* ===== lope v0.3.195 · lope-style error easter egg ===== */
.easter-error-back {
position: fixed;
z-index: 330;
inset: 0;
display: grid;
place-items: center;
padding: 20px;
background: rgba(12, 11, 14, 0.62);
backdrop-filter: blur(10px);
}
.easter-error-window {
position: relative;
width: min(500px, calc(100vw - 32px));
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--egg-color) 18%, var(--line));
border-radius: 22px;
background: color-mix(in srgb, var(--paper2) 96%, var(--egg-color) 4%);
color: var(--ink);
box-shadow: 0 32px 100px rgba(0, 0, 0, 0.34);
font-family: Inter, Pretendard, "Noto Sans KR", system-ui, sans-serif;
}
.easter-error-window::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 4px;
background: var(--egg-color);
}
.easter-error-head {
min-height: 66px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 17px 18px 12px 20px;
border-bottom: 1px solid var(--line);
}
.easter-error-head-copy {
display: flex;
align-items: center;
gap: 11px;
min-width: 0;
}
.easter-error-mark {
width: 32px;
height: 32px;
flex: 0 0 32px;
display: grid;
place-items: center;
border: 1px solid color-mix(in srgb, var(--egg-color) 45%, transparent);
border-radius: 50%;
background: color-mix(in srgb, var(--egg-color) 12%, transparent);
color: var(--egg-color);
font: 900 15px/1 Inter, sans-serif;
}
.easter-error-head-copy div {
min-width: 0;
}
.easter-error-head-copy small {
display: block;
margin-bottom: 4px;
color: var(--egg-color);
font: 800 7px/1 Inter, Arial, sans-serif;
letter-spacing: 0.16em;
}
.easter-error-head-copy b {
display: block;
overflow: hidden;
color: color-mix(in srgb, var(--ink) 82%, var(--muted));
font-size: 10px;
font-weight: 700;
text-overflow: ellipsis;
white-space: nowrap;
}
.easter-error-close {
width: 32px;
height: 32px;
flex: 0 0 32px;
border: 1px solid var(--line);
border-radius: 50%;
background: color-mix(in srgb, var(--paper2) 84%, transparent);
color: var(--muted);
font-size: 18px;
line-height: 1;
cursor: pointer;
}
.easter-error-close:hover,
.easter-error-close:focus-visible {
border-color: color-mix(in srgb, var(--egg-color) 38%, var(--line));
background: color-mix(in srgb, var(--egg-color) 9%, var(--paper2));
color: var(--egg-color);
outline: none;
}
.easter-error-body {
padding: 28px 30px 24px;
}
.easter-error-copy h2 {
margin: 0 0 11px;
color: var(--ink);
font: 650 clamp(22px, 4vw, 28px)/1.2 Georgia, "Noto Serif KR", serif;
letter-spacing: -0.03em;
word-break: keep-all;
}
.easter-error-copy p {
margin: 0;
color: color-mix(in srgb, var(--ink) 68%, var(--muted));
font-size: 11px;
line-height: 1.8;
word-break: break-word;
}
.easter-error-copy code {
display: inline-flex;
max-width: 100%;
margin-top: 16px;
padding: 7px 10px;
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--egg-color) 20%, var(--line));
border-radius: 999px;
background: color-mix(in srgb, var(--egg-color) 7%, var(--paper));
color: color-mix(in srgb, var(--egg-color) 65%, var(--ink));
font: 700 8px/1.3 ui-monospace, SFMono-Regular, Consolas, monospace;
letter-spacing: 0.04em;
text-overflow: ellipsis;
white-space: nowrap;
}
.easter-error-window > footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 13px 18px 17px 22px;
border-top: 1px solid var(--line);
background: color-mix(in srgb, var(--paper) 62%, transparent);
}
.easter-error-window > footer span {
color: var(--muted);
font: 800 7px/1 Inter, Arial, sans-serif;
letter-spacing: 0.14em;
}
.easter-error-window > footer button {
min-width: 92px;
min-height: 36px;
padding: 0 18px;
border: 1px solid color-mix(in srgb, var(--egg-color) 28%, var(--line));
border-radius: 999px;
background: var(--paper2);
color: var(--ink);
font-size: 9px;
font-weight: 800;
cursor: pointer;
}
.easter-error-window > footer button:hover,
.easter-error-window > footer button:focus-visible {
background: var(--egg-color);
color: #fff;
outline: none;
}
body.dark-mode .easter-error-window {
--ink: #f1eef3;
--paper: #1b1a1e;
--paper2: #222126;
--muted: #a9a3ad;
--line: rgba(255,255,255,.12);
}
body.dark-mode .easter-error-back {
background: rgba(4, 4, 6, 0.7);
}
@media (max-width: 520px) {
.easter-error-back { padding: 10px; }
.easter-error-window { width: min(470px, calc(100vw - 20px)); border-radius: 18px; }
.easter-error-head { padding: 15px 14px 11px 16px; }
.easter-error-body { padding: 22px 18px 20px; }
.easter-error-window > footer { padding: 12px 14px 14px 18px; }
}
/* ======================================================================
v0.3.198 — 기본 스킨 SOCIAL : 회사 인트라넷 / 사내 게시판
SNS 데이터는 기존 그대로 쓰고, 기본 스킨에서만 보이는 화면을 게시판형으로 재구성합니다.
====================================================================== */
.sns-office-page{
padding:clamp(78px,8vw,102px) clamp(14px,3vw,30px) 60px;
}
.sns-office-shell{width:min(1180px,100%);margin:0 auto}
.sns-office-top{
min-height:86px;display:flex;align-items:center;justify-content:space-between;gap:22px;
border:1px solid #d7d3d0;border-bottom:3px solid color-mix(in srgb,var(--accent) 68%,#383338);
background:#fff;padding:16px 19px;
}
.sns-office-brand{display:flex;align-items:center;gap:16px;min-width:0}
.sns-office-brand>span{
width:52px;height:52px;display:grid;place-items:center;background:#29262a;color:#fff;
font-size:11px;font-weight:950;letter-spacing:.08em;flex:0 0 auto;
}
.sns-office-brand small{display:block;margin-bottom:3px;color:#989095;font-size:8px;font-weight:900;letter-spacing:.16em}
.sns-office-brand h1{margin:0!important;color:#2a272a!important;font:900 clamp(22px,3vw,30px)/1.1 inherit!important;letter-spacing:-.035em!important}
.sns-office-world{min-width:112px;padding-left:16px;border-left:1px solid #e2dedb;text-align:right}
.sns-office-world small{display:block;font-size:8px;font-weight:900;letter-spacing:.12em;color:#9a9297}
.sns-office-world b{display:block;margin-top:3px;font-size:14px;color:#363136}
.sns-office-grid{display:grid;grid-template-columns:218px minmax(0,1fr);gap:14px;margin-top:14px;align-items:start}
.sns-office-side{display:flex;flex-direction:column;gap:12px;position:sticky;top:84px}
.sns-office-side>section{border:1px solid #dcd7d4;background:#fff}
.sns-office-side>section>header{height:37px;padding:0 12px;display:flex;align-items:center;justify-content:space-between;background:hsl(from var(--accent) h 12% 93%);border-bottom:1px solid #ded9d6}
.sns-office-side>section>header b{font-size:9px;font-weight:950;letter-spacing:.11em;color:#3d383c}
.sns-office-side>section>header span{font-size:9px;color:#989095}
.sns-office-members{padding:4px 10px 8px}
.sns-office-member{display:grid;grid-template-columns:31px minmax(0,1fr);gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid #eeeae8;position:relative}
.sns-office-member:last-child{border-bottom:0}
.sns-office-member::before{content:"";position:absolute;left:-10px;top:10px;bottom:10px;width:2px;background:var(--sns-c)}
.sns-office-member .sns-avatar{width:31px;height:31px;border-radius:5px}
.sns-office-member>div{min-width:0;display:flex;flex-direction:column}
.sns-office-member b{font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sns-office-member small{font-size:8px;color:#999095;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sns-office-summary dl{margin:0;padding:5px 11px 9px}
.sns-office-summary dl div{display:flex;align-items:center;justify-content:space-between;padding:7px 1px;border-bottom:1px solid #eeeae8}
.sns-office-summary dl div:last-child{border-bottom:0}
.sns-office-summary dt{font-size:9px;color:#858085}
.sns-office-summary dd{margin:0;font-size:13px;font-weight:900;font-variant-numeric:tabular-nums}
.sns-office-board{min-width:0;border:1px solid #d9d5d2;background:#fff}
.sns-office-board-head{min-height:61px;padding:11px 14px;display:flex;align-items:center;justify-content:space-between;gap:15px;border-bottom:1px solid #d9d5d2}
.sns-office-board-head>div{display:flex;flex-direction:column;gap:2px}
.sns-office-board-head small{font-size:8px;font-weight:900;letter-spacing:.14em;color:var(--accent)}
.sns-office-board-head b{font-size:17px;color:#302c30}
.sns-office-board-head>span{font-size:9px;color:#8e878b}
.sns-board-columns,.sns-board-entry>summary{display:grid;grid-template-columns:58px minmax(0,1fr) 100px 126px 58px;align-items:center}
.sns-board-columns{height:34px;padding:0 9px;background:#f3f1ef;border-bottom:1px solid #ddd8d5;color:#7f787d;font-size:8px;font-weight:900;text-align:center}
.sns-board-columns span:nth-child(2){text-align:left;padding-left:9px}
.sns-board-entry{border-bottom:1px solid #e7e2df}
.sns-board-entry:last-child{border-bottom:0}
.sns-board-entry>summary{min-height:47px;padding:0 9px;cursor:pointer;list-style:none;color:#504a4f;font-size:9px;transition:.14s;background:#fff}
.sns-board-entry>summary::-webkit-details-marker{display:none}
.sns-board-entry>summary:hover,.sns-board-entry[open]>summary{background:color-mix(in srgb,var(--accent) 5%,#fff)}
.sns-board-no,.sns-board-author,.sns-board-entry>summary time,.sns-board-like{text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sns-board-no{font-variant-numeric:tabular-nums;color:#989095}
.sns-board-title{min-width:0;display:flex;align-items:center;gap:6px;padding:0 9px}
.sns-board-title b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;color:#353035}
.sns-board-title em{flex:0 0 auto;border:1px solid #ddd6d2;background:#faf8f7;padding:2px 4px;font-style:normal;font-size:7px;color:#8b8388}
.sns-board-entry>summary time{font-size:8px;color:#91898e}
.sns-board-like{font-size:8px;color:#827a7f}
.sns-board-article{border-top:1px solid #e4dfdc;background:#fbfaf9;padding:18px 20px 20px}
.sns-board-article>header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:13px;border-bottom:1px solid #e6e1de}
.sns-board-article>header .sns-avatar{border-radius:5px;width:36px;height:36px}
.sns-board-article>header>div:last-child{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end;font-size:8px;color:#958e92}
.sns-board-copy{padding:22px 4px 24px;min-height:92px}
.sns-board-copy>p{margin:0;color:#373237;font-size:12px;line-height:1.9;word-break:break-word}
.sns-board-copy figure{margin:18px 0 0;border:1px solid #dfd9d6;background:#fff;padding:8px;width:min(620px,100%)}
.sns-board-copy figure img{display:block;width:100%;max-height:520px;object-fit:contain}
.sns-board-comments{border-top:1px solid #ded9d5;padding-top:14px}
.sns-board-comments-title{display:flex;align-items:center;gap:7px;margin-bottom:10px}
.sns-board-comments-title b{font-size:10px}
.sns-board-comments-title span{min-width:18px;height:18px;display:grid;place-items:center;background:#353136;color:#fff;font-size:8px}
.sns-board-comments .sns-thread-card{border-radius:4px;background:#fff}
.sns-board-comments .sns-avatar{border-radius:4px}
.sns-office-empty,.sns-office-empty-small{padding:34px 18px;text-align:center;color:#8f888c}
.sns-office-empty b{display:block;font-size:12px;color:#514a50}
.sns-office-empty p{margin:6px 0 0;font-size:9px}
.sns-office-empty-small{padding:15px 5px;font-size:8px}
@media(max-width:900px){
.sns-office-grid{grid-template-columns:1fr}
.sns-office-side{position:static;display:grid;grid-template-columns:1fr 1fr;order:2}
.sns-office-board{order:1}
}
@media(max-width:680px){
.sns-office-top{align-items:flex-start}
.sns-office-world{display:none}
.sns-office-grid{margin-top:8px}
.sns-office-side{grid-template-columns:1fr}
.sns-board-columns{display:none}
.sns-board-entry>summary{grid-template-columns:42px minmax(0,1fr) 65px;gap:4px;padding:8px 7px}
.sns-board-entry>summary .sns-board-author{display:none}
.sns-board-entry>summary time{font-size:7px}
.sns-board-title em{display:none}
.sns-board-like{font-size:7px}
.sns-board-article{padding:14px 12px 16px}
.sns-board-article>header{align-items:flex-start;flex-direction:column}
.sns-board-article>header>div:last-child{justify-content:flex-start}
}
/* v0.3.202 — 사이트 작성 양식 적용 미리보기 */
.site-form-import-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:10px 0 14px}.site-form-import-item{display:flex;align-items:center;gap:8px;padding:9px 10px;border:1px solid var(--line,#ddd);border-radius:10px;background:rgba(255,255,255,.04);font-size:12px}.site-form-import-item.disabled{opacity:.38}.site-form-char-preview{display:flex;flex-wrap:wrap;gap:6px}.site-form-char-preview span{display:inline-flex;align-items:center;gap:6px;padding:6px 8px;border:1px solid var(--line,#ddd);border-radius:999px;font-size:11px}.site-form-char-preview b{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--accent);color:#fff;font-size:9px}@media(max-width:560px){.site-form-import-summary{grid-template-columns:1fr}}
/* =========================================================
lope v0.3.206 — default skin light/dark background direction
White mode uses a light MAIN / TIMELINE source palette so the existing
dark-mode filter naturally produces the themed dark gray version.
Timeline detail overlay stays dark in white mode and is inverted only in
dark mode (images are counter-filtered back to their original colors).
========================================================= */
.site.theme-default .home-page:not(.world-au-school) {
color: #1b1a1e;
background: radial-gradient(ellipse at 50% 42%, rgba(40, 35, 45, 0.035), transparent 38%), var(--world-bg);
}
/* v0.3.214 — 위와 같은 이유로 캐릭터색 그라데이션은 라이트 모드에서만. */
.site.theme-default:not(.dark-mode) .home-page:not(.world-au-school) {
background:
radial-gradient(ellipse at 50% 42%, rgba(40, 35, 45, 0.035), transparent 38%),
linear-gradient(
120deg,
color-mix(in srgb, var(--char-a) 6%, var(--world-bg)),
var(--world-bg) 30%,
var(--world-bg) 70%,
color-mix(in srgb, var(--char-b) 6%, var(--world-bg))
);
}
.site.theme-default .home-page:not(.world-au-school) .hero-half.left:after {
background: linear-gradient(90deg, rgba(255, 255, 255, 0.64), transparent 45%, rgba(255, 255, 255, 0.04));
}
.site.theme-default .home-page:not(.world-au-school) .hero-half.right:after {
background: linear-gradient(-90deg, rgba(255, 255, 255, 0.64), transparent 45%, rgba(255, 255, 255, 0.04));
}
.site.theme-default .home-page:not(.world-au-school) .hero-name {
color: #17171a;
text-shadow: 0 4px 30px rgba(255, 255, 255, 0.32);
}
.site.theme-default .home-page:not(.world-au-school) .hero-kicker,
.site.theme-default .home-page:not(.world-au-school) .hero-subname {
color: #2e2b31;
}
.site.theme-default .home-page:not(.world-au-school) .pair-kicker {
color: rgba(23, 22, 26, 0.46);
}
.site.theme-default .home-page:not(.world-au-school) .pair-title {
color: #17171a;
}
.site.theme-default .home-page:not(.world-au-school) .pair-desc,
.site.theme-default .home-page:not(.world-au-school) .pair-date {
color: rgba(23, 22, 26, 0.66);
}
.site.theme-default .home-page:not(.world-au-school) .pair-date i {
background: rgba(23, 22, 26, 0.25);
}
.site.theme-default .home-page:not(.world-au-school) .art-fallback {
border-color: rgba(20, 18, 24, 0.12);
background: linear-gradient(160deg, rgba(20, 18, 24, 0.06), rgba(20, 18, 24, 0.012));
}
.site.theme-default .home-page:not(.world-au-school) .art-fallback:before,
.site.theme-default .home-page:not(.world-au-school) .art-fallback:after {
background: rgba(20, 18, 24, 0.055);
}
.site.theme-default .home-page:not(.world-au-school) .art-fallback b {
color: rgba(20, 18, 24, 0.09);
}
.site.theme-default .story-page-v5 {
color: #26272a;
background:
radial-gradient(ellipse at 50% -12%, rgba(76, 88, 100, 0.07) 0%, rgba(79, 94, 107, 0.025) 29%, transparent 55%),
radial-gradient(ellipse at 8% 66%, rgba(76, 89, 98, 0.045), transparent 34%),
radial-gradient(ellipse at 92% 74%, rgba(67, 80, 92, 0.035), transparent 30%),
var(--world-bg, #f4f2ef);
}
.site.theme-default .story-page-v5:before {
opacity: 0.34;
mix-blend-mode: multiply;
background:
linear-gradient(112deg, transparent 0 17%, rgba(20, 22, 24, 0.032) 18%, transparent 19% 58%, rgba(20, 22, 24, 0.024) 59%, transparent 60%),
linear-gradient(72deg, transparent 0 33%, rgba(20, 22, 24, 0.021) 34%, transparent 35% 78%, rgba(20, 22, 24, 0.018) 79%, transparent 80%);
}
.site.theme-default .story-page-v5:after {
box-shadow: inset 0 0 180px rgba(42, 38, 34, 0.08);
}
.site.theme-default .story-page-v5 .history-light-v5 {
background: #65717a;
opacity: 0.055;
}
.site.theme-default .story-page-v5 .history-light-v5.two {
opacity: 0.035;
}
.site.theme-default .story-page-v5 .history-track-v5 {
background: linear-gradient(to bottom, rgba(48, 48, 50, 0.56), rgba(48, 48, 50, 0.38) 86%, rgba(48, 48, 50, 0));
}
.site.theme-default .story-page-v5 .history-event-v5:before {
background: rgba(52, 51, 54, 0.42);
}
.site.theme-default .story-page-v5 .history-filter-v6 button {
border-color: rgba(35, 34, 38, 0.16);
background: rgba(255, 255, 255, 0.68);
color: #666269;
}
.site.theme-default .story-page-v5 .history-filter-v6 button:hover,
.site.theme-default .story-page-v5 .history-filter-v6 button.on {
background: #25252a;
color: #f4f1ed;
border-color: #25252a;
}
.site.theme-default .story-page-v5 .history-empty-v6 {
color: #5f5b60;
}
.site.theme-default .story-page-v5 .history-osmo-title-item-v8 button {
color: #27262a;
}
.site.theme-default .story-page-v5 .history-osmo-seq-v8,
.site.theme-default .story-page-v5 .history-osmo-title-copy-v8 > small,
.site.theme-default .story-page-v5 .history-osmo-title-item-v8 button > em,
.site.theme-default .story-page-v5 .history-osmo-row-side-v33 > em {
color: #777278;
}
.site.theme-default .story-page-v5 .history-osmo-preview-item-v8 {
filter: drop-shadow(0 30px 45px rgba(25, 22, 28, 0.16));
}
/* The timeline detail is mounted under , outside .site-view, so it needs
its own dark-mode flip. This gives WHITE mode = dark detail, DARK mode = light detail. */
body.theme-default.dark-mode .history-osmo-overlay-v8 {
filter: none;
background: #faf9f6;
color: #1d1c20;
}
body.theme-default.dark-mode .history-osmo-overlay-v8::before {
background:
radial-gradient(circle at 50% 0, rgba(30, 28, 34, 0.055), transparent 35%),
linear-gradient(120deg, transparent 40%, rgba(30, 28, 34, 0.018) 41%, transparent 42%);
}
body.theme-default.dark-mode .history-osmo-overlay-nav-v8 {
background: linear-gradient(#faf9f6 55%, rgba(250, 249, 246, 0));
}
body.theme-default.dark-mode .history-osmo-overlay-nav-v8 button {
color: #222126;
}
body.theme-default.dark-mode .history-osmo-overlay-nav-v8 span,
body.theme-default.dark-mode .history-osmo-overlay-title-v8 > small,
body.theme-default.dark-mode .history-osmo-overlay-copy-v8 > div {
color: #777278;
}
body.theme-default.dark-mode .history-osmo-overlay-copy-v8 {
border-top-color: #d8d3d0;
}
body.theme-default.dark-mode .history-osmo-overlay-copy-v8 > div b {
color: #5d585e;
}
body.theme-default.dark-mode .history-osmo-overlay-copy-v8 > p {
color: #454047;
}
body.theme-default.dark-mode .history-osmo-overlay-v8 img,
body.theme-default.dark-mode .history-osmo-overlay-v8 video,
body.theme-default.dark-mode .history-osmo-overlay-v8 canvas {
filter: none;
}
/* ============================================================
lope v0.3.207 — admin feedback / bug report entry
v0.3.277 — "HTML로 내보내기" 버튼을 피드백 버튼 바로 위에 추가했는데, 피드백 탭에만
margin-top:auto(레일 맨 아래로 밀기)가 걸려 있어서 내보내기 버튼은 그냥 일반 탭
자리(맨 위 그룹)에 남고 피드백만 훌쩍 아래로 떨어져 둘 사이에 큰 빈 공간이
생겼습니다(사용자 스크린샷으로 발견). margin-top:auto를 내보내기 버튼 쪽으로
옮겨서 — 바닥으로 미는 건 "그 그룹의 첫 번째 요소"만 있으면 되고, 뒤따르는
피드백 버튼은 자연스럽게 바로 밑에 붙습니다. 구분선(border-top-color)도 이제
"일반 탭 그룹"과 "내보내기+피드백 그룹" 사이의 경계이므로 내보내기 쪽으로 같이
옮겼습니다.
============================================================ */
@media (min-width: 821px) {
.drawer-icon-rail [data-html-export-open] {
margin-top: auto;
flex: 0 0 auto;
border-top-color: #34343a;
}
}
.editor-drawer.collapsed [data-html-export-open] {
margin-top: auto;
flex: 0 0 auto;
border-top-color: #34343a;
}
.drawer-feedback-tab::before {
content: "";
position: absolute;
left: 5px;
right: 5px;
top: -8px;
height: 1px;
background: #2d2d33;
}
.feedback-report-modal {
padding: 2px 1px 0;
}
.feedback-report-kicker {
display: block;
margin-bottom: 6px;
color: #9a9698;
font-size: 8px;
font-weight: 800;
letter-spacing: .16em;
}
.feedback-report-modal h2 {
margin-bottom: 18px;
}
.feedback-report-types {
margin-bottom: 14px;
padding: 12px 13px;
border: 1px solid #e5e1df;
border-radius: 12px;
background: #faf9f8;
}
.feedback-report-types > span {
display: flex;
align-items: baseline;
gap: 7px;
margin-bottom: 10px;
color: #393538;
font-size: 10px;
font-weight: 700;
}
.feedback-report-types > span small {
color: #a09a9d;
font-size: 8px;
font-weight: 500;
}
.feedback-report-types .modal-check-group {
gap: 7px;
}
.feedback-report-types .modal-check {
margin: 0;
padding: 7px 10px;
border: 1px solid #ddd8d6;
border-radius: 999px;
background: #fff;
color: #4a4548;
cursor: pointer;
}
.feedback-report-copy {
margin: 0 0 14px;
color: #716b6e;
font-size: 10px;
line-height: 1.7;
}
/* v0.3.281 — "HTML로 내보내기" 안내문 가독성. 긴 줄글 두 덩어리 대신 짧은 리드
문장 + 목록으로 나누고, 주의사항은 색이 있는 박스로 눈에 띄게 분리했습니다. */
.lope-export-points {
margin: 0 0 14px;
padding-left: 18px;
display: flex;
flex-direction: column;
gap: 4px;
color: #716b6e;
font-size: 11px;
line-height: 1.7;
}
.lope-export-warn {
margin-bottom: 14px;
padding: 12px 13px;
border: 1px solid #f1d9d3;
border-radius: 12px;
background: #fdf6f4;
}
.lope-export-warn > b {
display: block;
margin-bottom: 6px;
color: #b25a4a;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.04em;
}
.lope-export-warn ul {
margin: 0;
padding-left: 16px;
display: flex;
flex-direction: column;
gap: 4px;
color: #8a5f55;
font-size: 11px;
line-height: 1.7;
}
.lope-export-warn b {
color: #96473c;
}
.feedback-report-field textarea {
min-height: 150px;
resize: vertical;
}
.drawer-feedback-tab {
position: relative;
}
.feedback-report-status {
margin: 8px 0 0;
padding: 8px 10px;
border-radius: 9px;
background: #f3f1f0;
color: #817a7e;
font-size: 9px;
line-height: 1.5;
}
.feedback-report-status[hidden] {
display: none;
}
/* ============================================================
lope v0.3.219 — DEFAULT SKIN UNIFIED COLOR SYSTEM
One semantic palette is shared by every default-skin page.
Individual pages no longer own their own canvas/surface/text colors.
Custom world background image/color remains an explicit exception.
============================================================ */
.site.theme-default {
--ui-page-bg: #faf9f6;
--ui-surface: #ffffff;
--ui-surface-soft: #f5f3f1;
--ui-input-bg: #ffffff;
--ui-text: #211f23;
--ui-text-muted: #797278;
--ui-text-faint: #9a9298;
--ui-emphasis: var(--accent, #9f7d86);
--ui-line: #ddd7d3;
--ui-line-soft: #ebe6e3;
--ink: var(--ui-text);
--paper: var(--ui-page-bg);
--paper2: var(--ui-surface-soft);
--muted: var(--ui-text-muted);
--line: var(--ui-line);
color: var(--ui-text);
background: var(--ui-page-bg) !important;
}
.site.theme-default.dark-mode {
/* all page canvases use exactly this one accent-tinted dark gray */
--ui-page-bg: color-mix(in srgb, var(--accent, #9f7d86) 8%, #111115);
--ui-surface: color-mix(in srgb, var(--accent, #9f7d86) 5%, #1b1a1e);
--ui-surface-soft: color-mix(in srgb, var(--accent, #9f7d86) 5%, #232126);
--ui-input-bg: color-mix(in srgb, var(--accent, #9f7d86) 4%, #17161a);
--ui-text: #f2eff1;
--ui-text-muted: #aaa3a9;
--ui-text-faint: #7e777d;
--ui-emphasis: var(--accent, #b99aa3);
--ui-line: rgba(255,255,255,.14);
--ui-line-soft: rgba(255,255,255,.08);
--ink: var(--ui-text);
--paper: var(--ui-page-bg);
--paper2: var(--ui-surface);
--muted: var(--ui-text-muted);
--line: var(--ui-line);
color: var(--ui-text);
background: var(--ui-page-bg) !important;
}
body.theme-default {
background: #fff;
color: #211f23;
}
body.theme-default.dark-mode {
background: color-mix(in srgb, var(--accent, #9f7d86) 8%, #111115);
color: #f2eff1;
}
.site.theme-default .site-view {
background: var(--ui-page-bg) !important;
color: var(--ui-text);
filter: none;
}
.site.theme-default.dark-mode .site-topbar,
.site.theme-default.dark-mode .site-bottom-dock,
.site.theme-default.dark-mode .edit-hint {
filter: none;
}
.site.theme-default.dark-mode .site-view img:not(.editor-drawer *),
.site.theme-default.dark-mode .site-view video:not(.editor-drawer *),
.site.theme-default.dark-mode .site-view canvas:not(.editor-drawer *) {
filter: none;
}
/* Every actual page root rendered by app.js shares one canvas. */
.site.theme-default .site-view > :where(
.home-page,
.roster-page,
.profile-page-v4,
.pair-page-v4,
.trio-page,
.gallery-page,
.diagram-page,
.dialogue-page,
.story-page-v5,
.history-osmo-page-v8,
.tales-page,
.calendar-page,
.shared-calendar-poll-page,
.owner-calendar-page,
.dday-page,
.checklist-page,
.trpg-page,
.similar-page,
.music-page,
.music-record-page,
.owner-page,
.guestbook-page,
.tag-archive-page,
.sns-page,
.sns-office-page,
.custom-html-page,
.placeholder-page,
.secret-page,
.tab-lock-page
) {
background: var(--ui-page-bg) !important;
color: var(--ui-text);
}
/* Main and timeline no longer own separate colored/gradient canvases. */
.site.theme-default .home-page:not(.world-au-school),
.site.theme-default .story-page-v5,
.site.theme-default.dark-mode .home-page:not(.world-au-school),
.site.theme-default.dark-mode .story-page-v5 {
background: var(--ui-page-bg) !important;
}
.site.theme-default .story-page-v5::after,
.site.theme-default.dark-mode .story-page-v5::after {
box-shadow: none;
}
/* Shared user-facing surfaces. Character/accent color stays in borders/markers, not fill. */
.site.theme-default .site-view :where(
.compare-card,
.profile-note-sheet,
.relation-profile-card,
.history-card-v5,
.tab-lock-card,
.dday-card,
.profile-summary-card,
.history-gallery-card-v7,
.trpg-log-card,
.friend-banner-card,
.tag-index-card,
.tag-story-card,
.tag-link-card,
.music-lyrics-panel,
.similar-list-card,
.similar-outfit-card,
.checklist-list-card,
.checklist-card-members > span,
.checklist-tendency-card,
.trio-relation-card,
.tale-list-card,
.tale-text-card,
.tale-dialogue-card,
.tale-image-card,
.profile-box-preset article,
.sns-account-card,
.sns-meta-card,
.sns-account-strip,
.sns-feed-panel,
.sns-thread-card,
.guestbook-compose,
.guestbook-entry,
.guestbook-reply,
.day-card,
.tag-link-card,
.log-card,
.char-card,
.pair-card,
.film-frame
) {
background: var(--ui-surface) !important;
color: var(--ui-text);
border-color: var(--ui-line) !important;
}
.site.theme-default .site-view :where(
.checklist-tendency-card > p,
.tale-list-card > figure,
.tale-image-card img,
.guestbook-empty
) {
background: var(--ui-surface-soft) !important;
color: var(--ui-text-muted);
border-color: var(--ui-line-soft) !important;
}
/* Forms are also semantic-token based instead of page-specific grays. */
.site.theme-default .site-view :where(input, textarea, select):not(.editor-drawer *) {
background-color: var(--ui-input-bg) !important;
color: var(--ui-text) !important;
border-color: var(--ui-line) !important;
}
.site.theme-default .site-view :where(input, textarea)::placeholder {
color: var(--ui-text-faint) !important;
}
/* Common text roles. Page-specific hardcoded neutral colors no longer diverge by page. */
.site.theme-default .site-view :where(.page-title, h1, h2, h3, h4, h5, h6) {
color: var(--ui-text);
}
.site.theme-default .site-view :where(.page-eyebrow, small, time) {
color: var(--ui-text-muted);
}
.site.theme-default .site-view :where(a) {
border-color: var(--ui-line-soft);
}
/* Timeline filter keeps one neutral surface; selected state uses the semantic emphasis. */
.site.theme-default .story-page-v5 .history-filter-v6 button {
background: var(--ui-surface) !important;
color: var(--ui-text-muted) !important;
border-color: var(--ui-line) !important;
}
.site.theme-default .story-page-v5 .history-filter-v6 button:hover,
.site.theme-default .story-page-v5 .history-filter-v6 button.on {
background: var(--ui-emphasis) !important;
color: #fff !important;
border-color: var(--ui-emphasis) !important;
}
/* Timeline detail is intentionally the ONLY mode-opposite canvas. */
body.theme-default:not(.dark-mode) .history-osmo-overlay-v8 {
filter: none;
background: color-mix(in srgb, var(--accent, #9f7d86) 8%, #111115);
color: #f2eff1;
}
body.theme-default.dark-mode .history-osmo-overlay-v8 {
filter: none;
background: #fff;
color: #211f23;
}
body.theme-default.dark-mode .history-osmo-overlay-nav-v8 {
background: linear-gradient(#fff 55%, rgba(255,255,255,0));
}
body.theme-default.dark-mode .history-osmo-overlay-v8 img,
body.theme-default.dark-mode .history-osmo-overlay-v8 video,
body.theme-default.dark-mode .history-osmo-overlay-v8 canvas,
body.theme-default:not(.dark-mode) .history-osmo-overlay-v8 img,
body.theme-default:not(.dark-mode) .history-osmo-overlay-v8 video,
body.theme-default:not(.dark-mode) .history-osmo-overlay-v8 canvas {
filter: none;
}
/* Explicit user background settings always win over the unified defaults. */
.site.theme-default:not(.dark-mode).world-bg-override {
--ui-page-bg: var(--world-bg);
}
.site.theme-default.world-bg-override .site-view,
.site.theme-default.world-bg-override .site-view > :not(.world-bg-image):not(.easter-hotspot):not(.area-select-hint):not(.area-select-box) {
background: var(--ui-page-bg) !important;
}
.site.theme-default.has-world-bg-image .site-view {
background: transparent !important;
}
body .site.theme-default.has-world-bg-image .site-view > :not(.world-bg-image):not(.easter-hotspot):not(.area-select-hint):not(.area-select-box) {
background-color: transparent !important;
background-image: none !important;
}
/* ============================================================
lope v0.3.219 — COMPLETE DEFAULT DARK PALETTE
Default skin dark mode no longer relies on inversion or only a canvas swap.
All neutral foreground/surface/border colors used by user-facing pages are
remapped to the shared semantic palette below. Character/accent colors stay.
============================================================ */
.site.theme-default.dark-mode {
--ui-page-bg: color-mix(in srgb, var(--accent, #9f7d86) 8%, #111115);
--ui-surface: color-mix(in srgb, var(--accent, #9f7d86) 5%, #1b1a1e);
--ui-surface-soft: color-mix(in srgb, var(--accent, #9f7d86) 5%, #232126);
--ui-input-bg: color-mix(in srgb, var(--accent, #9f7d86) 4%, #17161a);
--ui-text: #f2eff1;
--ui-text-muted: #aaa3a9;
--ui-text-faint: #756f74;
--ui-emphasis: var(--accent, #b99aa3);
--ui-line: rgba(255,255,255,.14);
--ui-line-soft: rgba(255,255,255,.08);
}
/* Generated semantic remap from every neutral page-specific literal. */
.site.theme-default.dark-mode .pair-desc{color:#fff;}
.site.theme-default.dark-mode .pair-date{color:#fff;}
.site.theme-default.dark-mode .profile-info{background:var(--ui-surface);}
.site.theme-default.dark-mode .profile-reading{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .profile-chip{background:var(--ui-surface-soft);}
.site.theme-default.dark-mode .profile-color i{border:4px solid var(--ui-line);}
.site.theme-default.dark-mode .compare-page{background:var(--ui-surface);}
.site.theme-default.dark-mode .compare-title small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .compare-card{border:1px solid color-mix(in srgb, var(--c), var(--ui-line) 66%); background:var(--ui-surface);}
.site.theme-default.dark-mode .compare-meta{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .compare-tags span{background:var(--ui-surface-soft);}
.site.theme-default.dark-mode .relation-note p{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .roster-head small{color:#fff;}
.site.theme-default.dark-mode .roster-caption{background:linear-gradient(180deg, transparent, var(--ui-surface-soft) 32%);}
.site.theme-default.dark-mode .roster-caption span{color:#fff;}
.site.theme-default.dark-mode .relation-photo{background:linear-gradient(145deg, color-mix(in srgb, var(--r), var(--ui-surface-soft) 50%), #0d0d0f);}
.site.theme-default.dark-mode .relation-copy p{color:#fff;}
.site.theme-default.dark-mode .diagram-board{border:1px solid var(--ui-line); background-color:var(--ui-surface);}
.site.theme-default.dark-mode .placeholder-card small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .placeholder-card p{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .relation-page .light-btn:hover,
.site.theme-default.dark-mode .relation-page .light-btn.on{background:var(--ui-surface); color:var(--ui-text);}
.site.theme-default.dark-mode .compare-profile-select{background:var(--ui-surface);}
.site.theme-default.dark-mode .hero-half.left:after{background:linear-gradient(90deg, var(--ui-surface-soft), transparent 45%, rgba(0, 0, 0, 0.05));}
.site.theme-default.dark-mode .hero-half.right:after{background:linear-gradient(-90deg, var(--ui-surface-soft), transparent 45%, rgba(0, 0, 0, 0.05));}
.site.theme-default.dark-mode .hero-tag{background:color-mix(in srgb, var(--c), var(--ui-surface-soft) 15%);}
.site.theme-default.dark-mode .profile-page-v2{background:var(--ui-surface);}
.site.theme-default.dark-mode .profile-page-v2:before{background:linear-gradient(110deg, color-mix(in srgb, var(--c), var(--ui-surface) 92%), transparent 42%),
linear-gradient(180deg, var(--ui-surface), var(--ui-surface));}
.site.theme-default.dark-mode .profile-v2-artzone{background:linear-gradient(
145deg,
color-mix(in srgb, var(--c), var(--ui-surface) 84%),
rgba(255, 255, 255, 0.22) 58%,
rgba(0, 0, 0, 0.025)
);}
.site.theme-default.dark-mode .profile-v2-info{background:var(--ui-surface);}
.site.theme-default.dark-mode .profile-v2-topline{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .profile-v2-kor{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .profile-v2-quote{background:linear-gradient(90deg, color-mix(in srgb, var(--c), var(--ui-surface) 91%), transparent);}
.site.theme-default.dark-mode .profile-v2-tags span{background:color-mix(in srgb, var(--c), var(--ui-surface) 82%); border:1px solid color-mix(in srgb, var(--c), var(--ui-line) 65%);}
.site.theme-default.dark-mode .compare-v2-page{background:var(--ui-surface);}
.site.theme-default.dark-mode .compare-v2-head small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .compare-v2-summary{background:var(--ui-surface); border:1px solid color-mix(in srgb, var(--c), var(--ui-line) 70%);}
.site.theme-default.dark-mode .compare-v2-avatar{border:5px solid color-mix(in srgb, var(--c), var(--ui-line) 56%); background:var(--ui-surface);}
.site.theme-default.dark-mode .compare-v2-summary-copy p{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .compare-v2-lines i{background:var(--ui-surface);}
.site.theme-default.dark-mode .compare-v2-rel{background:var(--ui-surface);}
.site.theme-default.dark-mode .compare-v2-rel small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .compare-v2-rel p{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .compare-v2-notes > div{background:var(--ui-surface);}
.site.theme-default.dark-mode .compare-v2-notes p{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .profile-page-v3{background:var(--ui-surface);}
.site.theme-default.dark-mode .profile-v3-wrap{background:var(--ui-surface);}
.site.theme-default.dark-mode .outfit-rail-title{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .outfit-thumb{border:1px solid var(--ui-line);}
.site.theme-default.dark-mode .outfit-thumb:hover{border-color:var(--ui-line);}
.site.theme-default.dark-mode .outfit-thumb img{background:linear-gradient(180deg, var(--ui-surface-soft), #1c1c21);}
.site.theme-default.dark-mode .outfit-thumb b{color:var(--ui-text-faint);}
.site.theme-default.dark-mode .outfit-add{border:1px dashed var(--ui-line); color:var(--ui-text-muted);}
.site.theme-default.dark-mode .profile-v3-visual{background:linear-gradient(145deg, color-mix(in srgb, var(--c), var(--ui-surface) 87%) 0%, var(--ui-surface) 58%, var(--ui-surface) 100%);}
.site.theme-default.dark-mode .profile-v3-nameblock span{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .profile-v3-detail{background:var(--ui-surface);}
.site.theme-default.dark-mode .profile-v3-top small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .profile-subtabs-v3 .subtab{border:1px solid var(--ui-line); color:var(--ui-text-muted);}
.site.theme-default.dark-mode .profile-detail-tabs{border-bottom:1px solid var(--ui-line);}
.site.theme-default.dark-mode .profile-detail-tabs button{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .profile-detail-tabs button.on{color:var(--ui-text);}
.site.theme-default.dark-mode .profile-v3-quote{background:linear-gradient(100deg, color-mix(in srgb, var(--c), var(--ui-surface) 91%), rgba(255, 255, 255, 0.3));}
.site.theme-default.dark-mode .profile-v3-stats small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .profile-v3-tags span{border:1px solid color-mix(in srgb, var(--c), var(--ui-line) 55%); color:var(--ui-text); background:var(--ui-surface);}
.site.theme-default.dark-mode .profile-v3-content .v2-mini-info,
.site.theme-default.dark-mode .profile-v3-content .v2-about,
.site.theme-default.dark-mode .profile-v3-content .v2-note,
.site.theme-default.dark-mode .profile-v3-content .v2-section-title,
.site.theme-default.dark-mode .profile-v3-content .v2-image-block{background:var(--ui-surface); border:1px solid var(--ui-line);}
.site.theme-default.dark-mode .profile-note-sheet{border:1px solid var(--ui-line); background:var(--ui-surface);}
.site.theme-default.dark-mode .profile-note-sheet > p{color:var(--ui-text);}
.site.theme-default.dark-mode .profile-mini-gallery figure{background:var(--ui-surface);}
.site.theme-default.dark-mode .profile-character-switch{border-top:1px solid var(--ui-line);}
.site.theme-default.dark-mode .profile-switch-tab{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .profile-switch-tab.on:before{background:var(--c, var(--ui-surface));}
.site.theme-default.dark-mode .relation-compare-page{background:var(--ui-surface);}
.site.theme-default.dark-mode .relation-compare-head small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .relation-compare-head p{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .relation-profile-card{border:1px solid color-mix(in srgb, var(--c), var(--ui-line) 58%); background:var(--ui-surface);}
.site.theme-default.dark-mode .relation-avatar{background:var(--ui-surface); border:5px solid color-mix(in srgb, var(--c), var(--ui-line) 56%);}
.site.theme-default.dark-mode .relation-card-copy > span{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .relation-lines i{background:var(--ui-surface);}
.site.theme-default.dark-mode .relation-direction-grid > div{border:1px solid var(--ui-line); background:var(--ui-surface);}
.site.theme-default.dark-mode .relation-direction-grid p{color:var(--ui-text);}
.site.theme-default.dark-mode .relation-content-tabs button{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .relation-content-tabs button.on{color:var(--ui-text);}
.site.theme-default.dark-mode .relation-content-tabs button.on:after{background:var(--ui-surface-soft);}
.site.theme-default.dark-mode .relation-gallery-grid figure{border:1px solid var(--ui-line); background:var(--ui-surface);}
.site.theme-default.dark-mode .relation-note-long{border:1px solid var(--ui-line); background:var(--ui-surface);}
.site.theme-default.dark-mode .relation-note-long > small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .relation-note-long > p{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .relation-note-pair > div{background:var(--ui-surface);}
.site.theme-default.dark-mode .timeline-v3-page{color:var(--ui-text-faint);}
.site.theme-default.dark-mode .timeline-v3-head small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .timeline-v3-head p{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .timeline-v3-filter button{border:1px solid var(--ui-line); color:var(--ui-text-muted);}
.site.theme-default.dark-mode .timeline-v3-filter button.on{background:var(--ui-surface); border-color:var(--ui-line);}
.site.theme-default.dark-mode .timeline-v3-line:before{background:linear-gradient(var(--ui-surface-soft), var(--ui-surface-soft) 50%, var(--ui-surface-soft));}
.site.theme-default.dark-mode .timeline-v3-dot{background:var(--ui-surface);}
.site.theme-default.dark-mode .timeline-v3-card{border-top:1px solid var(--ui-line);}
.site.theme-default.dark-mode .timeline-v3-card small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .timeline-v3-card time{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .timeline-v3-card p{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .timeline-v3-tag{border:1px solid var(--ui-line); color:var(--ui-text-muted);}
.site.theme-default.dark-mode .profile-v4-wrap{border:1px solid var(--ui-line); background:var(--ui-surface);}
.site.theme-default.dark-mode .profile-v4-visual{background:linear-gradient(145deg, color-mix(in srgb, var(--c), var(--ui-surface) 89%), var(--ui-surface) 58%, var(--ui-surface));}
.site.theme-default.dark-mode .profile-v4-visual:after{background:var(--ui-surface);}
.site.theme-default.dark-mode .profile-v4-word{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .profile-v4-name span{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .profile-v4-detail{background:var(--ui-surface);}
.site.theme-default.dark-mode .profile-v4-detail-head{border-bottom:1px solid var(--ui-line);}
.site.theme-default.dark-mode .profile-v4-detail-head small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .profile-v4-tabs{border-bottom:1px solid var(--ui-line);}
.site.theme-default.dark-mode .profile-v4-tabs button{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .profile-v4-tabs button.on{color:var(--ui-text);}
.site.theme-default.dark-mode .profile-story-lead{border-bottom:1px solid var(--ui-line);}
.site.theme-default.dark-mode .profile-story-lead p{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .profile-fact-sheet{border-top:1px solid var(--ui-line);}
.site.theme-default.dark-mode .profile-fact-sheet > div{border-bottom:1px solid var(--ui-line);}
.site.theme-default.dark-mode .profile-fact-sheet.cols-2 > div:nth-child(even){border-left:1px solid var(--ui-line);}
.site.theme-default.dark-mode .profile-fact-sheet.cols-3 > div:not(:nth-child(3n + 1)){border-left:1px solid var(--ui-line);}
.site.theme-default.dark-mode .profile-fact-sheet small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .profile-fact-sheet span{color:var(--ui-text);}
.site.theme-default.dark-mode .profile-meter-row{border-bottom:1px solid var(--ui-line);}
.site.theme-default.dark-mode .profile-meter-dots i{border:1px solid color-mix(in srgb, var(--c), var(--ui-line) 55%); background:var(--ui-surface);}
.site.theme-default.dark-mode .profile-meter-sheet.meter-radar header h3{color:var(--ui-text);}
.site.theme-default.dark-mode .profile-meter-sheet.meter-radar .line{stroke:color-mix(in srgb, var(--c) 82%, var(--ui-line) 18%);}
.site.theme-default.dark-mode .profile-meter-sheet.meter-radar .nodes circle{fill:color-mix(in srgb, var(--c) 72%, var(--ui-text-faint) 28%);}
.site.theme-default.dark-mode .profile-radar-label strong{color:var(--ui-text);}
.site.theme-default.dark-mode .profile-radar-label small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .profile-meter-row span{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .profile-essay{border-bottom:1px solid var(--ui-line);}
.site.theme-default.dark-mode .profile-essay p{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .profile-voice-list blockquote{border-bottom:1px solid var(--ui-line);}
.site.theme-default.dark-mode .profile-voice-list blockquote span{color:var(--ui-text);}
.site.theme-default.dark-mode .profile-palette-block{border-bottom:1px solid var(--ui-line);}
.site.theme-default.dark-mode .profile-palette-block > small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .profile-palette-block i{border:1px solid var(--ui-line);}
.site.theme-default.dark-mode .profile-palette-block em{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .profile-gallery-v4 figure{background:var(--ui-surface); border:1px solid var(--ui-line);}
.site.theme-default.dark-mode .profile-gallery-v4 figcaption{background:var(--ui-surface-soft);}
.site.theme-default.dark-mode .pair-page-v4{background:linear-gradient(
90deg,
color-mix(in srgb, var(--a), var(--ui-surface) 95%),
var(--ui-surface) 28%,
var(--ui-surface) 72%,
color-mix(in srgb, var(--b), var(--ui-surface) 95%)
);}
.site.theme-default.dark-mode .pair-page-label{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .pair-info-v4{background:var(--ui-surface); border:1px solid color-mix(in srgb, var(--c), var(--ui-line) 68%);}
.site.theme-default.dark-mode .pair-info-avatar{background:var(--ui-surface); border:5px solid color-mix(in srgb, var(--c), var(--ui-line) 55%);}
.site.theme-default.dark-mode .pair-info-head small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .pair-info-head span{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .pair-info-stats{border-top:1px solid var(--ui-line); border-bottom:1px solid var(--ui-line);}
.site.theme-default.dark-mode .pair-info-stats > div + div{border-left:1px solid var(--ui-line);}
.site.theme-default.dark-mode .pair-info-stats small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .pair-info-colors i{background:var(--ui-surface);}
.site.theme-default.dark-mode .pair-direction-v4{background:var(--ui-surface); border:1px solid var(--ui-line);}
.site.theme-default.dark-mode .pair-relation-story{border:1px solid var(--ui-line); background:linear-gradient(115deg, color-mix(in srgb, var(--a), var(--ui-surface) 92%), var(--ui-surface) 48%, color-mix(in srgb, var(--b), var(--ui-surface) 92%));}
.site.theme-default.dark-mode .pair-relation-story > header h2{color:var(--ui-text);}
.site.theme-default.dark-mode .pair-relation-story > header p{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .pair-direction-view-head h3{color:var(--ui-text);}
.site.theme-default.dark-mode .pair-direction-view-head > span{background:color-mix(in srgb, var(--c), var(--ui-surface) 83%);}
.site.theme-default.dark-mode .pair-direction-v4 p{color:var(--ui-text);}
.site.theme-default.dark-mode .pair-direction-v4 li{border:1px solid color-mix(in srgb, var(--c), var(--ui-line) 60%); color:var(--ui-text-muted);}
.site.theme-default.dark-mode .pair-center-title > i{background:var(--ui-surface);}
.site.theme-default.dark-mode .pair-center-title small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .pair-content-tabs-v4 button{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .pair-content-tabs-v4 button.on{color:var(--ui-text);}
.site.theme-default.dark-mode .pair-content-tabs-v4 button.on:after{background:var(--ui-surface-soft);}
.site.theme-default.dark-mode .pair-moodboard-v4 figure{border:1px solid var(--ui-line); background:var(--ui-surface);}
.site.theme-default.dark-mode .pair-note-v4{background:var(--ui-surface); border:1px solid var(--ui-line);}
.site.theme-default.dark-mode .pair-note-v4 > small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .pair-note-v4 blockquote{color:var(--ui-text);}
.site.theme-default.dark-mode .pair-note-v4 > p{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .pair-calls{border-top:1px solid var(--ui-line); color:var(--ui-text-muted);}
.site.theme-default.dark-mode .story-page-v4{color:var(--ui-text-faint);}
.site.theme-default.dark-mode .story-side-v4 > small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .story-side-v4 p{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .story-legend-v4 span{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .story-list-v4:before{background:linear-gradient(#39363f, var(--ui-surface-soft) 20%, var(--ui-surface-soft) 80%, #29272e);}
.site.theme-default.dark-mode .story-marker-v4 i{background:var(--ui-surface);}
.site.theme-default.dark-mode .story-tag-v4{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .story-page-v5{color:var(--ui-text-faint);}
.site.theme-default.dark-mode .history-light-v5{background:var(--ui-surface);}
.site.theme-default.dark-mode .history-era-v5{background:var(--ui-surface); color:var(--ui-text);}
.site.theme-default.dark-mode .history-era-v5 i{background:var(--ui-surface);}
.site.theme-default.dark-mode .history-era-v5 span:last-child{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .history-track-v5{background:linear-gradient(
to bottom,
var(--ui-surface),
var(--ui-surface) 86%,
rgba(240, 239, 235, 0)
);}
.site.theme-default.dark-mode .history-event-v5:before{background:var(--ui-surface);}
.site.theme-default.dark-mode .history-axis-v5 i{background:var(--ui-surface);}
.site.theme-default.dark-mode .history-card-v5{background:var(--ui-surface); color:var(--ui-text);}
.site.theme-default.dark-mode .history-card-v5 header span{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .history-card-v5 header em{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .history-card-v5 h2{color:var(--ui-text);}
.site.theme-default.dark-mode .history-card-v5 p{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .history-card-v5 footer{border-top:1px solid var(--ui-line); color:var(--ui-text-muted);}
.site.theme-default.dark-mode .history-card-v5 footer b{color:var(--ui-text-faint);}
.site.theme-default.dark-mode .history-lock-icon{border:1px solid var(--ui-line); color:var(--ui-text-muted);}
.site.theme-default.dark-mode .history-lock-v5 > p{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .history-unlock-v5{border:1px solid var(--ui-line);}
.site.theme-default.dark-mode .history-unlock-v5 small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .history-unlock-v5 b{color:var(--ui-text);}
.site.theme-default.dark-mode .tab-lock-card{background:var(--ui-surface);}
.site.theme-default.dark-mode .tab-lock-icon{border:1px solid color-mix(in srgb, var(--accent) 40%, var(--ui-line));}
.site.theme-default.dark-mode .tab-lock-card > small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .tab-lock-card > p{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .tab-lock-form input{background:var(--ui-surface);}
.site.theme-default.dark-mode .tab-lock-back{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .history-filter-v6 button{color:#fff;}
.site.theme-default.dark-mode .history-filter-v6 button:hover,
.site.theme-default.dark-mode .history-filter-v6 button.on{background:var(--ui-surface); border-color:var(--ui-line);}
.site.theme-default.dark-mode .history-filter-v6 button i{background:var(--c, var(--ui-surface-soft));}
.site.theme-default.dark-mode .timeline-people > span{border:1px solid var(--ui-line); background:var(--ui-surface); color:var(--ui-text-muted);}
.site.theme-default.dark-mode .timeline-people > span i{background:var(--c, var(--ui-surface-soft));}
.site.theme-default.dark-mode .history-empty-v6{color:var(--ui-text-faint);}
.site.theme-default.dark-mode .profile-timeline-v1 > header{border-bottom:1px solid var(--ui-line);}
.site.theme-default.dark-mode .profile-timeline-v1 > header small,
.site.theme-default.dark-mode .profile-timeline-empty small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .profile-timeline-full{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .profile-timeline-list article{border-bottom:1px solid var(--ui-line);}
.site.theme-default.dark-mode .profile-timeline-index{color:color-mix(in srgb, var(--c) 55%, var(--ui-text-muted));}
.site.theme-default.dark-mode .profile-timeline-copy > small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .profile-timeline-copy p{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .profile-timeline-empty p{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .timeline-member-picker label{border:1px solid var(--ui-line); background:var(--ui-surface);}
.site.theme-default.dark-mode .timeline-member-picker label b{color:var(--ui-text);}
.site.theme-default.dark-mode .dday-page{color:var(--ui-text);}
.site.theme-default.dark-mode .dday-page-head small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .dday-page-head p{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .dday-card{background:var(--ui-surface); border:1px solid color-mix(in srgb, var(--dd) 28%, var(--ui-line));}
.site.theme-default.dark-mode .dday-copy small{color:color-mix(in srgb, var(--dd) 68%, var(--ui-text-muted));}
.site.theme-default.dark-mode .dday-copy strong{color:var(--ui-text);}
.site.theme-default.dark-mode .dday-copy p{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .dday-copy em{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .dday-pair-media{background:var(--ui-surface);}
.site.theme-default.dark-mode .dday-pair-media:after{background:linear-gradient(transparent, var(--ui-surface));}
.site.theme-default.dark-mode .dday-card.layout-pair .dday-cycle-hint{color:#fff;}
.site.theme-default.dark-mode .dday-card.layout-personal{background:linear-gradient(125deg, color-mix(in srgb, var(--dd) 9%, var(--ui-surface)), var(--ui-surface) 62%);}
.site.theme-default.dark-mode .dday-personal-media:after{background:linear-gradient(90deg, transparent 50%, var(--ui-surface) 96%);}
.site.theme-default.dark-mode .dday-personal-media.right:after{background:linear-gradient(-90deg, transparent 50%, var(--ui-surface) 96%);}
.site.theme-default.dark-mode .dday-card.layout-dual{background:linear-gradient(
90deg,
color-mix(in srgb, var(--dd) 11%, var(--ui-surface)),
var(--ui-surface) 39% 61%,
color-mix(in srgb, var(--dd) 9%, var(--ui-surface))
);}
.site.theme-default.dark-mode .dday-dual-media:after{background:linear-gradient(90deg, transparent 64%, var(--ui-surface) 100%);}
.site.theme-default.dark-mode .dday-dual-media.right:after{background:linear-gradient(-90deg, transparent 64%, var(--ui-surface) 100%);}
.site.theme-default.dark-mode .dday-empty{border:1px dashed var(--ui-line); color:var(--ui-text-muted);}
.site.theme-default.dark-mode .dday-empty h2{color:var(--ui-text);}
.site.theme-default.dark-mode .home-dday-widgets .dday-card{background:var(--ui-surface); color:var(--ui-text);}
.site.theme-default.dark-mode .dday-variant-row{border:1px solid var(--ui-line); background:var(--ui-surface);}
.site.theme-default.dark-mode .dday-variant-row > b{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .dday-variant-row label{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .dday-variant-row input{border:1px solid var(--ui-line);}
.site.theme-default.dark-mode .profile-summary-card{border:1px solid var(--ui-line); background:linear-gradient(135deg, var(--ui-surface) 0%, var(--ui-surface) 72%);}
.site.theme-default.dark-mode .profile-summary-card p{color:var(--ui-text);}
.site.theme-default.dark-mode .history-view-switch-v7 button{color:#fff;}
.site.theme-default.dark-mode .history-view-switch-v7 button.on{background:var(--ui-surface);}
.site.theme-default.dark-mode .history-gallery-card-v7{background:var(--ui-surface); color:var(--ui-text);}
.site.theme-default.dark-mode .history-gallery-media-v7{background:linear-gradient(120deg, color-mix(in srgb, var(--ca) 72%, var(--ui-surface-soft)), color-mix(in srgb, var(--cb) 50%, var(--ui-surface-soft)));}
.site.theme-default.dark-mode .history-gallery-number-v7{color:#fff;}
.site.theme-default.dark-mode .history-gallery-copy-v7{background:var(--ui-surface);}
.site.theme-default.dark-mode .history-gallery-copy-v7 header em{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .history-gallery-copy-v7 h2{color:var(--ui-text);}
.site.theme-default.dark-mode .history-gallery-copy-v7 p{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .history-gallery-copy-v7 footer{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .history-overlay-v7{background:var(--ui-surface); color:var(--ui-text);}
.site.theme-default.dark-mode .history-overlay-media-v7{background:linear-gradient(
135deg,
color-mix(in srgb, var(--ca) 78%, var(--ui-surface-soft)),
color-mix(in srgb, var(--cb) 58%, #151719)
);}
.site.theme-default.dark-mode .history-overlay-media-v7 span{color:#fff;}
.site.theme-default.dark-mode .history-overlay-meta-v7 em{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .history-overlay-close-v7{background:var(--ui-surface); color:var(--ui-text);}
.site.theme-default.dark-mode .gallery-page{color:var(--ui-text);}
.site.theme-default.dark-mode .gallery-head small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .gallery-head p{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .gallery-type-tabs button,
.site.theme-default.dark-mode .gallery-album-tabs button{border:1px solid var(--ui-line); background:var(--ui-surface); color:var(--ui-text-muted);}
.site.theme-default.dark-mode .gallery-album-tabs button.on{border-color:var(--ui-line); color:var(--ui-text); background:var(--ui-surface);}
.site.theme-default.dark-mode .gallery-item{background:var(--ui-surface);}
.site.theme-default.dark-mode .gallery-item small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .gallery-item span{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .gallery-empty{color:var(--ui-text-muted); border:1px dashed var(--ui-line);}
.site.theme-default.dark-mode .gallery-reader{background:var(--ui-surface); color:var(--ui-text);}
.site.theme-default.dark-mode .gallery-editor-group{border:1px solid var(--ui-line);}
.site.theme-default.dark-mode .dialogue-page{background:linear-gradient(135deg, var(--ui-surface) 0%, var(--ui-surface) 100%); color:var(--ui-text);}
.site.theme-default.dark-mode .dialogue-empty p{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .dialogue-editor-folder{border:1px solid var(--ui-line);}
.site.theme-default.dark-mode .dialogue-editor-folder-head{border:1px solid var(--ui-line);}
.site.theme-default.dark-mode .dialogue-editor-folder-head:before{border:1px solid var(--ui-line);}
.site.theme-default.dark-mode .dialogue-folder-main small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .dialogue-folder-main b{color:var(--ui-text-faint);}
.site.theme-default.dark-mode .dialogue-folder-main em{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .dialogue-editor-scenes{border-left:1px solid var(--ui-line);}
.site.theme-default.dark-mode .dialogue-editor-scene{border:1px solid var(--ui-line);}
.site.theme-default.dark-mode .dialogue-editor-scene:before{border-top:1px solid var(--ui-line);}
.site.theme-default.dark-mode .dialogue-editor-scene .grow small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .dialogue-editor-scene .grow b{color:var(--ui-text-faint);}
.site.theme-default.dark-mode .dialogue-editor-scene .grow em{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .dialogue-folder-empty{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .profile-look-editor{border:1px solid var(--ui-line);}
.site.theme-default.dark-mode .profile-look-editor.active{border-color:var(--ui-line);}
.site.theme-default.dark-mode .profile-look-thumb{background:var(--ui-surface-soft); color:var(--ui-text-muted);}
.site.theme-default.dark-mode .profile-look-editor header small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .profile-look-editor .outfit-name-input{color:var(--ui-text-faint);}
.site.theme-default.dark-mode .history-osmo-preview-item-v8 img,
.site.theme-default.dark-mode .history-osmo-placeholder-v8{background:var(--ui-surface);}
.site.theme-default.dark-mode .history-osmo-placeholder-v8{background:linear-gradient(145deg, var(--ui-surface), var(--ui-surface)); color:var(--ui-text);}
.site.theme-default.dark-mode .history-osmo-title-item-v8 button{color:var(--ui-text-faint);}
.site.theme-default.dark-mode .history-osmo-seq-v8{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .history-osmo-title-copy-v8 > small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .history-osmo-title-item-v8 button > em{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .history-osmo-overlay-nav-v8 button{color:var(--ui-text-faint);}
.site.theme-default.dark-mode .history-osmo-overlay-nav-v8 span{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .history-osmo-overlay-title-v8 > small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .history-osmo-overlay-placeholder-v8{background:linear-gradient(145deg, var(--ui-surface), var(--ui-surface-soft)); color:var(--ui-text);}
.site.theme-default.dark-mode .history-osmo-overlay-copy-v8 > div{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .history-osmo-overlay-copy-v8 > div b{color:var(--ui-text);}
.site.theme-default.dark-mode .history-osmo-overlay-copy-v8 > p{color:var(--ui-text-faint);}
.site.theme-default.dark-mode .dday-tune-pack{border:1px solid var(--ui-line); background:var(--ui-surface);}
.site.theme-default.dark-mode .relation-editor-card{border:1px solid var(--ui-line);}
.site.theme-default.dark-mode .hero-layer-row{border:1px solid var(--ui-line);}
.site.theme-default.dark-mode .hero-layer-row.drag-over{border-color:var(--ui-line);}
.site.theme-default.dark-mode .hero-layer-grip{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .hero-layer-row .grow small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .hero-layer-depth{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .hero-layer-row:first-child .hero-layer-depth{background:var(--ui-surface); color:var(--ui-text);}
.site.theme-default.dark-mode .history-map-button-v19:hover{background:var(--ui-surface);}
.site.theme-default.dark-mode .relation-map-window-v19{background:var(--ui-surface);}
.site.theme-default.dark-mode .relation-map-window-v19 > header{border-bottom:1px solid var(--ui-line);}
.site.theme-default.dark-mode .relation-map-window-v19 > header small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .relation-map-close-v19{border:1px solid var(--ui-line); background:var(--ui-surface);}
.site.theme-default.dark-mode .compare-profile-select{background-color:var(--ui-surface) !important; color:var(--ui-text) !important;}
.site.theme-default.dark-mode .hero-layer-card{border:1px solid var(--ui-line);}
.site.theme-default.dark-mode .hero-layer-card.drag-over{border-color:var(--ui-line);}
.site.theme-default.dark-mode .hero-layer-card > header{border-bottom:1px solid var(--ui-line);}
.site.theme-default.dark-mode .hero-layer-card .grow small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .relation-map-head-actions > button:not(.relation-map-close-v19){border:1px solid var(--ui-line); background:var(--ui-surface);}
.site.theme-default.dark-mode .relation-art-details{border-top:1px solid var(--ui-line);}
.site.theme-default.dark-mode .relation-art-details summary{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .site.editing .profile-reaction-hotspot{border:1px dashed color-mix(in srgb, var(--c, var(--ui-line)) 72%, var(--ui-line)); background:color-mix(in srgb, var(--c, var(--ui-surface-soft)) 8%, transparent);}
.site.theme-default.dark-mode .profile-heart-toggle{border:1px solid color-mix(in srgb, var(--c, var(--ui-line)) 34%, var(--ui-line)); background:var(--ui-surface); color:var(--c, var(--ui-text-muted));}
.site.theme-default.dark-mode .profile-heart-toggle.on{background:var(--c, var(--ui-surface-soft));}
.site.theme-default.dark-mode .profile-reaction-bubble{background:var(--ui-surface); border:1px solid color-mix(in srgb, var(--c, var(--ui-line)) 28%, var(--ui-line)); color:var(--ui-text);}
.site.theme-default.dark-mode .easter-popup small,
.site.theme-default.dark-mode .secret-card small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .easter-popup button,
.site.theme-default.dark-mode .secret-back,
.site.theme-default.dark-mode .secret-card button{border:1px solid var(--ui-line); background:var(--ui-surface);}
.site.theme-default.dark-mode .secret-page{background:radial-gradient(
circle at 50% 20%,
color-mix(in srgb, var(--secret-accent) 14%, var(--ui-surface)),
var(--ui-surface) 48%,
var(--ui-surface)
);}
.site.theme-default.dark-mode .secret-card{background:var(--ui-surface);}
.site.theme-default.dark-mode .secret-card p{color:var(--ui-text);}
.site.theme-default.dark-mode .timeline-crop-editor{border:1px solid var(--ui-line); background-color:var(--ui-surface);}
.site.theme-default.dark-mode .timeline-crop-empty{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .timeline-crop-controls > label{color:var(--ui-text-faint);}
.site.theme-default.dark-mode .history-osmo-row-side-v33 > em{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .owner-page{color:var(--ui-text);}
/* v0.3.323 — 오너 헤드 아래 밑줄이 라이트 모드용 검정 반투명 고정값이라 다크
모드에서 배경과 거의 안 보였음. */
.site.theme-default.dark-mode .owner-head{border-bottom-color:var(--ui-line);}
.site.theme-default.dark-mode .owner-head small,
.site.theme-default.dark-mode .owner-banner-title small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .owner-head p{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .owner-section > span{color:var(--accent, var(--ui-text-muted));}
.site.theme-default.dark-mode .owner-section p{color:var(--ui-text);}
.site.theme-default.dark-mode .owner-ng p{color:var(--ui-text);}
.site.theme-default.dark-mode .owner-banner-section{background:var(--ui-surface);}
.site.theme-default.dark-mode .owner-banner-title > p{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .owner-banner-preview{background:repeating-conic-gradient(var(--ui-surface) 0 25%, var(--ui-surface) 0 50%) 50%/18px 18px; border:1px solid var(--ui-line);}
.site.theme-default.dark-mode .owner-banner-actions button,
.site.theme-default.dark-mode .owner-banner-actions a{border:1px solid var(--ui-line); background:var(--ui-surface); color:var(--ui-text);}
.site.theme-default.dark-mode .owner-banner-actions button:hover,
.site.theme-default.dark-mode .owner-banner-actions a:hover{border-color:var(--accent, var(--ui-line));}
.site.theme-default.dark-mode .owner-banner-code{background:var(--ui-surface-soft); color:var(--ui-text-faint);}
.site.theme-default.dark-mode .owner-banner-empty{border:1px dashed var(--ui-line); color:var(--ui-text-muted);}
.site.theme-default.dark-mode .owner-banner-admin-preview{background:var(--ui-surface-soft);}
.site.theme-default.dark-mode .owner-banner-admin-preview span{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .profile-editor-panel-tabs button{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .profile-editor-panel-tabs button:hover{color:var(--ui-text-faint);}
.site.theme-default.dark-mode .profile-editor-panel-tabs button.on{background:var(--ui-surface);}
.site.theme-default.dark-mode .profile-tab-block-editor{border:1px solid var(--ui-line); background:var(--ui-surface);}
.site.theme-default.dark-mode .profile-tab-block-editor > header{border-bottom:1px solid var(--ui-line);}
.site.theme-default.dark-mode .profile-preset-index{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .profile-custom-image img{background:var(--ui-surface);}
.site.theme-default.dark-mode .profile-custom-image figcaption{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .profile-block-type-trigger{color:var(--ui-text-faint);}
.site.theme-default.dark-mode .profile-block-type-trigger i{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .profile-block-type-menu{color:var(--ui-text-faint);}
.site.theme-default.dark-mode .profile-block-type-menu button{color:var(--ui-text-faint);}
.site.theme-default.dark-mode .profile-block-type-menu button.on{background:var(--ui-surface); border-color:var(--ui-line);}
.site.theme-default.dark-mode .relation-editor-summary span{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .relation-editor-summary p{color:var(--ui-text-faint);}
.site.theme-default.dark-mode .relation-card-override{border:1px solid var(--ui-line); background:var(--ui-surface);}
.site.theme-default.dark-mode .relation-card-override legend{color:var(--ui-text);}
.site.theme-default.dark-mode .gallery-crop-editor{border:1px solid var(--ui-line); background-color:var(--ui-surface);}
.site.theme-default.dark-mode .gallery-crop-empty{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .gallery-crop-toolbar button{border:1px solid var(--ui-line); background:var(--ui-surface); color:var(--ui-text);}
.site.theme-default.dark-mode .gallery-crop-toolbar strong{color:var(--ui-text);}
.site.theme-default.dark-mode .gallery-access-tabs button{background:var(--ui-surface);}
.site.theme-default.dark-mode .gallery-access-tabs button:hover{background:var(--ui-surface);}
.site.theme-default.dark-mode .gallery-access-tabs button.on{background:var(--ui-surface-soft); border-color:var(--ui-line);}
.site.theme-default.dark-mode .gallery-badges span{background:var(--ui-surface); color:var(--ui-text);}
.site.theme-default.dark-mode .gallery-badges .private{background:var(--ui-surface-soft); color:var(--ui-text-faint);}
.site.theme-default.dark-mode .music-page,
.site.theme-default.dark-mode .trpg-page{color:var(--ui-text);}
.site.theme-default.dark-mode .music-folders > button.on,
.site.theme-default.dark-mode .trpg-nav > button.on{background:var(--ui-surface-soft);}
.site.theme-default.dark-mode .music-list{background:var(--ui-surface);}
.site.theme-default.dark-mode .music-list > header p{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .music-track figure{background:var(--ui-surface);}
.site.theme-default.dark-mode .music-track figure span{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .music-track-copy small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .music-track-copy p{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .music-track > button{background:var(--ui-surface);}
.site.theme-default.dark-mode .music-track.playing > button{background:var(--ui-surface-soft);}
.site.theme-default.dark-mode .trpg-log{background:var(--ui-surface);}
.site.theme-default.dark-mode .trpg-log > header p{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .trpg-log > header span{background:var(--ui-surface);}
.site.theme-default.dark-mode .trpg-html td,
.site.theme-default.dark-mode .trpg-html th{border:1px solid var(--ui-line);}
.site.theme-default.dark-mode .trpg-archive-head small,
.site.theme-default.dark-mode .trpg-reader-head small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .trpg-archive-head p{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .trpg-log-card{background:color-mix(in srgb, var(--accent, #9f7d86) 8%, var(--ui-surface)); color:var(--ui-text);}
.site.theme-default.dark-mode .trpg-log-card:hover{border-color:color-mix(in srgb, var(--accent) 35%, var(--ui-line));}
.site.theme-default.dark-mode .trpg-log-thumb{background:var(--ui-surface);}
.site.theme-default.dark-mode .trpg-log-thumb b{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .trpg-log-copy > em{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .trpg-log-copy > small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .trpg-log-card time{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .trpg-log-card > i{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .trpg-archive-stats{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .trpg-sort-row > span{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .trpg-sort-row button{background:var(--ui-surface); border-color:var(--ui-line); color:var(--ui-text-muted);}
.site.theme-default.dark-mode .trpg-sort-row button.on{background:var(--accent); border-color:var(--accent); color:#fff;}
.site.theme-default.dark-mode .trpg-empty{border:1px dashed var(--ui-line); color:var(--ui-text-muted);}
.site.theme-default.dark-mode .trpg-reader-shell{background:var(--ui-surface);}
.site.theme-default.dark-mode .trpg-back{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .trpg-reader-toolbar > span{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .trpg-reader-head p{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .trpg-reader-head > figure{background:var(--ui-surface-soft); box-shadow:inset 0 0 0 1px var(--ui-line);}
.site.theme-default.dark-mode .trpg-reader-side{border-left-color:var(--ui-line);}
.site.theme-default.dark-mode .trpg-reader-side time{color:var(--ui-text);}
.site.theme-default.dark-mode .trpg-reader-side > em{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .trpg-reader-body{border-color:var(--ui-line); background:var(--ui-surface-soft);}
.site.theme-default.dark-mode .trpg-reader-body > header{border-bottom-color:var(--ui-line); background:var(--ui-surface);}
.site.theme-default.dark-mode .trpg-reader-body > header span{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .trpg-html-view{background:var(--ui-surface);}
.site.theme-default.dark-mode .trpg-editor-row > img,
.site.theme-default.dark-mode .trpg-editor-row > i{background:var(--ui-surface-soft);}
.site.theme-default.dark-mode .trpg-thumb-admin img,
.site.theme-default.dark-mode .trpg-thumb-admin .empty{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .trpg-paste-zone{border:1px solid var(--ui-line); color:var(--ui-text-faint);}
.site.theme-default.dark-mode .trpg-paste-zone > span:only-child{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .trpg-thumb-stage{border:1px solid var(--ui-line);}
.site.theme-default.dark-mode .trpg-thumb-stage .empty{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .trpg-thumb-actions small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .tale-mob-icon-pick{background:var(--ui-surface); color:var(--ui-text-muted);}
.site.theme-default.dark-mode .tale-mob-edit-row input[type="text"],
.site.theme-default.dark-mode .tale-mob-edit-row input:not([type]){background:var(--ui-surface); color:var(--ui-text);}
.site.theme-default.dark-mode .tale-mob-edit-row input[type="color"]{background:var(--ui-surface);}
.site.theme-default.dark-mode .tale-mob-edit-row button.danger{background:var(--ui-surface);}
.site.theme-default.dark-mode .tale-qa-edit-row{background:var(--ui-surface); border-color:var(--ui-line);}
.site.theme-default.dark-mode .tale-qa-edit-row input,
.site.theme-default.dark-mode .tale-qa-edit-row textarea{background:var(--ui-surface); color:var(--ui-text); border-color:var(--ui-line);}
.site.theme-default.dark-mode .tale-qa-edit-row button.danger{background:var(--ui-surface);}
.site.theme-default.dark-mode .trpg-reader-head p{color:var(--ui-text-muted) !important;}
.site.theme-default.dark-mode .trpg-html-view{background:var(--ui-surface) !important;}
.site.theme-default.dark-mode .gallery-type-tabs button,
.site.theme-default.dark-mode .gallery-access-tabs button{border:1px solid var(--ui-line) !important; background:var(--ui-surface) !important; color:var(--ui-text-muted) !important;}
.site.theme-default.dark-mode .gallery-type-tabs button:hover,
.site.theme-default.dark-mode .gallery-access-tabs button:hover{background:var(--ui-surface) !important; border-color:var(--ui-line) !important; color:var(--ui-text) !important;}
/* v0.3.323 — 위 두 규칙이 .on 여부와 상관없이 모든 버튼을 똑같이(!important) 칠해서,
다크 모드에서는 갤러리 탭·R18·스포일러 버튼이 눌러도(선택돼도) 시각적으로
구분이 안 갔습니다. 라이트 모드의 "선택 = 진하게 채움" 느낌을 다크 모드에서는
반전해서(흰 배경 + 검은 글자) 다시 살립니다. */
.site.theme-default.dark-mode .gallery-type-tabs button.on,
.site.theme-default.dark-mode .gallery-access-tabs button.on{background:var(--ui-text) !important; border-color:var(--ui-text) !important; color:var(--ui-surface) !important;}
.site.theme-default.dark-mode .roster-page{color:var(--ui-text); background:linear-gradient(rgba(30, 28, 31, 0.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(30, 28, 31, 0.025) 1px, transparent 1px), var(--ui-surface);}
.site.theme-default.dark-mode .roster-head small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .roster-head h1{color:var(--ui-text);}
.site.theme-default.dark-mode .roster-head p{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .roster-card{border:1px solid var(--ui-line); background:var(--ui-surface); color:var(--ui-text);}
.site.theme-default.dark-mode .roster-card:hover{border-color:color-mix(in srgb, var(--c), var(--ui-line) 46%);}
.site.theme-default.dark-mode .roster-index{color:var(--ui-text-muted); background:var(--ui-surface); border:1px solid var(--ui-line);}
.site.theme-default.dark-mode .roster-art{background:linear-gradient(180deg, color-mix(in srgb, var(--c), white 88%), var(--ui-surface));}
.site.theme-default.dark-mode .roster-card .roster-art > .art-fallback{color:color-mix(in srgb, var(--c), var(--ui-text) 40%);}
.site.theme-default.dark-mode .roster-caption small{color:color-mix(in srgb, var(--c), var(--ui-text-muted) 55%);}
.site.theme-default.dark-mode .roster-caption b{color:var(--ui-text);}
.site.theme-default.dark-mode .roster-caption strong{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .roster-caption > span{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .roster-tags i{color:var(--ui-text-muted); background:var(--ui-surface);}
.site.theme-default.dark-mode .roster-compare .top-pill{color:var(--ui-text); border-color:var(--ui-line); background:var(--ui-surface);}
.site.theme-default.dark-mode .owner-banner-crop-wrap{background:var(--ui-surface-soft);}
.site.theme-default.dark-mode .owner-banner-result > img{background:var(--ui-surface-soft);}
.site.theme-default.dark-mode .timeline-ref-tag{background:var(--ui-surface);}
.site.theme-default.dark-mode .timeline-ref-pop{background:var(--ui-surface-soft);}
.site.theme-default.dark-mode .timeline-ref-picker{background:var(--ui-surface);}
.site.theme-default.dark-mode .timeline-ref-picker label{background:var(--ui-surface);}
.site.theme-default.dark-mode .tag-archive-page{background:linear-gradient(180deg, color-mix(in srgb, var(--world-bg, var(--ui-surface)) 88%, var(--ui-surface)), var(--world-bg, var(--ui-surface))); color:var(--ui-text);}
.site.theme-default.dark-mode .tag-archive-head,
.site.theme-default.dark-mode .tag-detail-head{border-bottom:1px solid color-mix(in srgb, var(--accent) 18%, var(--ui-line));}
.site.theme-default.dark-mode .tag-archive-head p{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .tag-archive-head > strong small,
.site.theme-default.dark-mode .tag-detail-head > span small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .tag-index-card{border:1px solid var(--ui-line); background:var(--ui-surface);}
.site.theme-default.dark-mode .tag-index-card:hover{border-color:color-mix(in srgb, var(--accent) 46%, var(--ui-line));}
.site.theme-default.dark-mode .tag-index-no{border:1px solid color-mix(in srgb, var(--accent) 25%, var(--ui-line)); background:color-mix(in srgb, var(--accent) 5%, var(--ui-surface));}
.site.theme-default.dark-mode .tag-index-copy > small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .tag-index-copy > p{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .tag-link-count{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .tag-index-types span,
.site.theme-default.dark-mode .tag-type-counts span{border:1px solid var(--ui-line); background:var(--ui-surface); color:var(--ui-text-muted);}
.site.theme-default.dark-mode .tag-back{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .tag-story-card{border:1px solid color-mix(in srgb, var(--accent) 22%, var(--ui-line)); background:color-mix(in srgb, var(--accent) 5%, var(--ui-surface));}
.site.theme-default.dark-mode .tag-story-card p{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .tag-story-card button{border:1px solid color-mix(in srgb, var(--accent) 45%, var(--ui-line)); background:var(--ui-surface);}
.site.theme-default.dark-mode .tag-link-card{border:1px solid var(--ui-line); background:var(--ui-surface);}
.site.theme-default.dark-mode .tag-link-card:hover{border-color:color-mix(in srgb, var(--accent) 45%, var(--ui-line));}
.site.theme-default.dark-mode .tag-link-thumb,
.site.theme-default.dark-mode .tag-link-glyph{background:color-mix(in srgb, var(--accent) 7%, var(--ui-surface));}
.site.theme-default.dark-mode .tag-link-copy em{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .tag-empty{border:1px dashed var(--ui-line); color:var(--ui-text-muted);}
.site.theme-default.dark-mode .tag-empty b{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .music-track-actions > button{background:var(--ui-surface);}
.site.theme-default.dark-mode .music-track-actions > button.on,
.site.theme-default.dark-mode .music-track.playing .music-track-actions > [data-music-play],
.site.theme-default.dark-mode .music-track.playing .music-track-actions > [data-mplay]{background:var(--ui-surface-soft); border-color:var(--ui-line);}
.site.theme-default.dark-mode .music-lyrics-panel{background:color-mix(in srgb, var(--accent, #9f7d86) 7%, var(--ui-surface)); border:1px solid color-mix(in srgb, var(--accent, #9f7d86) 14%, var(--ui-line));}
.site.theme-default.dark-mode .music-lyrics-panel header b{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .music-lyrics-line,
.site.theme-default.dark-mode .music-lyrics-gap{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .similar-page{background:linear-gradient(180deg, color-mix(in srgb, var(--world-bg, var(--ui-surface)) 86%, var(--ui-surface)), var(--world-bg, var(--ui-surface))); color:var(--ui-text);}
.site.theme-default.dark-mode .similar-page-head{border-bottom:1px solid color-mix(in srgb, var(--accent) 16%, var(--ui-line));}
.site.theme-default.dark-mode .similar-page-head p,
.site.theme-default.dark-mode .similar-detail-head p{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .similar-head-mark:before,
.site.theme-default.dark-mode .similar-head-mark:after{border:1px solid color-mix(in srgb, var(--accent) 42%, var(--ui-line)); background:color-mix(in srgb, var(--accent) 5%, var(--ui-surface));}
.site.theme-default.dark-mode .similar-filter button{border:1px solid color-mix(in srgb, var(--accent) 15%, var(--ui-line)); background:var(--ui-surface); color:var(--ui-text-muted);}
.site.theme-default.dark-mode .similar-filter button small{background:var(--ui-surface); color:var(--ui-text-muted);}
.site.theme-default.dark-mode .similar-filter button:hover{border-color:color-mix(in srgb, var(--accent) 40%, var(--ui-line));}
.site.theme-default.dark-mode .similar-list-card{border:1px solid color-mix(in srgb, var(--accent) 12%, var(--ui-line)); background:var(--ui-surface);}
.site.theme-default.dark-mode .similar-list-card:hover{border-color:color-mix(in srgb, var(--accent) 40%, var(--ui-line));}
.site.theme-default.dark-mode .similar-list-visual{background:linear-gradient(
110deg,
color-mix(in srgb, var(--sa) 9%, var(--ui-surface)) 0 49.7%,
color-mix(in srgb, var(--sb) 9%, var(--ui-surface)) 50.3% 100%
); border-right:1px solid color-mix(in srgb, var(--accent) 10%, var(--ui-line));}
.site.theme-default.dark-mode .similar-list-visual:after{background:linear-gradient(transparent, color-mix(in srgb, var(--accent) 18%, var(--ui-surface)), transparent);}
.site.theme-default.dark-mode .similar-list-visual figure > span{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .similar-list-tags span,
.site.theme-default.dark-mode .similar-detail-tags span{border:1px solid color-mix(in srgb, var(--accent) 18%, var(--ui-line)); background:color-mix(in srgb, var(--accent) 5%, var(--ui-surface)); color:color-mix(in srgb, var(--accent) 76%, var(--ui-text));}
.site.theme-default.dark-mode .similar-list-copy p{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .similar-list-copy em{border-top:1px solid var(--ui-line); color:var(--ui-text-muted);}
.site.theme-default.dark-mode .similar-empty{border:1px dashed color-mix(in srgb, var(--accent) 25%, var(--ui-line));}
.site.theme-default.dark-mode .similar-empty p{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .similar-art-empty{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .similar-back{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .similar-detail-head{border-bottom:1px solid color-mix(in srgb, var(--accent) 16%, var(--ui-line));}
.site.theme-default.dark-mode .similar-outfit-card{border:1px solid color-mix(in srgb, var(--look-c) 22%, var(--ui-line)); background:linear-gradient(180deg, color-mix(in srgb, var(--look-c) 6%, var(--ui-surface)), var(--ui-surface));}
.site.theme-default.dark-mode .similar-outfit-card header h2{color:var(--ui-text);}
.site.theme-default.dark-mode .similar-outfit-card header span{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .similar-outfit-art{border:1px solid color-mix(in srgb, var(--look-c) 12%, var(--ui-line)); background:var(--ui-surface);}
.site.theme-default.dark-mode .similar-outfit-card > p{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .similar-pair-section{border:1px solid color-mix(in srgb, var(--accent) 14%, var(--ui-line)); background:var(--ui-surface);}
.site.theme-default.dark-mode .similar-pair-toggle > i{border:1px solid color-mix(in srgb, var(--accent) 20%, var(--ui-line)); background:var(--ui-surface);}
.site.theme-default.dark-mode .similar-pair-media{background:color-mix(in srgb, var(--accent) 3%, var(--ui-surface));}
.site.theme-default.dark-mode .similar-pair-empty{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .similar-description{border-top:1px solid color-mix(in srgb, var(--accent) 13%, var(--ui-line));}
.site.theme-default.dark-mode .similar-description p{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .similar-modal-outfits fieldset{border:1px solid var(--ui-line);}
.site.theme-default.dark-mode .similar-art-editor-row{border:1px solid var(--ui-line); background:var(--ui-surface);}
.site.theme-default.dark-mode .similar-art-editor-thumb{background:var(--ui-surface); color:var(--ui-text-muted);}
.site.theme-default.dark-mode .checklist-page{background:linear-gradient(180deg, color-mix(in srgb, var(--world-bg, var(--ui-surface)) 88%, var(--ui-surface)), var(--world-bg, var(--ui-surface))); color:var(--ui-text);}
.site.theme-default.dark-mode .checklist-page-head,
.site.theme-default.dark-mode .checklist-detail-head{border-bottom:1px solid color-mix(in srgb, var(--accent) 16%, var(--ui-line));}
.site.theme-default.dark-mode .checklist-page-head p,
.site.theme-default.dark-mode .checklist-detail-head > div > p{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .checklist-head-sign > i{border:1px solid color-mix(in srgb, var(--accent) 25%, var(--ui-line)); background:var(--ui-surface);}
.site.theme-default.dark-mode .checklist-list-card{border:1px solid color-mix(in srgb, var(--accent) 13%, var(--ui-line)); background:var(--ui-surface);}
.site.theme-default.dark-mode .checklist-list-card:hover{border-color:color-mix(in srgb, var(--accent) 38%, var(--ui-line));}
.site.theme-default.dark-mode .checklist-card-top em{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .checklist-list-card > p{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .checklist-card-members > span{border:1px solid var(--ui-line); background:var(--ui-surface);}
.site.theme-default.dark-mode .checklist-card-members img,
.site.theme-default.dark-mode .checklist-card-members > span > i{background:var(--ui-surface);}
.site.theme-default.dark-mode .checklist-card-members b{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .checklist-card-members em{color:var(--ui-text);}
.site.theme-default.dark-mode .checklist-card-members em small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .checklist-list-card > footer{border-top:1px solid var(--ui-line); color:var(--ui-text-muted);}
.site.theme-default.dark-mode .checklist-empty{border:1px dashed color-mix(in srgb, var(--accent) 25%, var(--ui-line));}
.site.theme-default.dark-mode .checklist-empty p{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .checklist-back{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .checklist-detail-score > article{border:1px solid color-mix(in srgb, var(--cc) 20%, var(--ui-line)); background:linear-gradient(145deg,color-mix(in srgb,var(--cc) 8%,var(--ui-surface)),var(--ui-surface));}
.site.theme-default.dark-mode .checklist-detail-score article > header b{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .checklist-score-track{background:var(--ui-surface-soft);}
.site.theme-default.dark-mode .checklist-result-capacity{border-color:var(--ui-line);background:var(--ui-surface);}
.site.theme-default.dark-mode .checklist-result-capacity small,
.site.theme-default.dark-mode .checklist-result-capacity span{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .checklist-tendency-card{border:1px solid color-mix(in srgb, var(--cc) 20%, var(--ui-line)); background:linear-gradient(150deg, color-mix(in srgb, var(--cc) 5%, var(--ui-surface)), var(--ui-surface));}
.site.theme-default.dark-mode .checklist-tendency-card > header{border-bottom:1px solid color-mix(in srgb, var(--cc) 11%, var(--ui-line));}
.site.theme-default.dark-mode .checklist-person-icon{background:color-mix(in srgb, var(--cc) 10%, var(--ui-surface));}
.site.theme-default.dark-mode .checklist-tendency-card header span{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .checklist-traits > span{border:1px solid var(--ui-line); background:var(--ui-surface); color:var(--ui-text-muted);}
.site.theme-default.dark-mode .checklist-traits > span > i{border:1px solid var(--ui-line);}
.site.theme-default.dark-mode .checklist-traits > span.on{border-color:color-mix(in srgb, var(--cc) 28%, var(--ui-line)); background:color-mix(in srgb, var(--cc) 7%, var(--ui-surface)); color:color-mix(in srgb, var(--cc) 80%, var(--ui-text));}
.site.theme-default.dark-mode .checklist-tendency-card > p{background:var(--ui-surface); color:var(--ui-text-muted);}
.site.theme-default.dark-mode .checklist-result-metric{background:linear-gradient(115deg,color-mix(in srgb,var(--cc) 12%,var(--ui-surface-soft)),var(--ui-surface));}
.site.theme-default.dark-mode .checklist-result-editor{border-color:var(--ui-line);}
.site.theme-default.dark-mode .checklist-result-editor-grid > section{border-color:var(--ui-line);background:var(--ui-surface);}
.site.theme-default.dark-mode .checklist-section{border:1px solid color-mix(in srgb, var(--accent) 13%, var(--ui-line)); background:var(--ui-surface);}
.site.theme-default.dark-mode .checklist-section-title{border-bottom:1px solid var(--ui-line);}
.site.theme-default.dark-mode .checklist-shared-head{border-bottom:1px solid var(--ui-line); background:color-mix(in srgb, var(--accent) 3%, var(--ui-surface));}
.site.theme-default.dark-mode .checklist-shared-head b{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .checklist-shared-list > div{border-bottom:1px solid var(--ui-line);}
.site.theme-default.dark-mode .checklist-shared-list p{border-left:1px solid var(--ui-line); border-right:1px solid var(--ui-line); color:var(--ui-text-muted);}
.site.theme-default.dark-mode .checklist-shared-list .check-a,
.site.theme-default.dark-mode .checklist-shared-list .check-b{border:1px solid var(--ui-line); background:var(--ui-surface);}
.site.theme-default.dark-mode .checklist-split-grid > article:first-child{border-right:1px solid var(--ui-line);}
.site.theme-default.dark-mode .checklist-split-grid > article > header{border-bottom:1px solid var(--ui-line);}
.site.theme-default.dark-mode .checklist-split-grid > article > header small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .checklist-split-grid > article > header b{color:var(--ui-text);}
.site.theme-default.dark-mode .checklist-split-items > div{border-bottom:1px solid var(--ui-line); color:var(--ui-text-muted);}
.site.theme-default.dark-mode .checklist-split-items span{border:1px solid var(--ui-line); background:var(--ui-surface);}
.site.theme-default.dark-mode .checklist-split-items > div.on p{color:var(--ui-text);}
.site.theme-default.dark-mode .checklist-file-drop{border:1px dashed color-mix(in srgb, var(--accent) 35%, var(--ui-line)); background:color-mix(in srgb, var(--accent) 4%, var(--ui-surface));}
.site.theme-default.dark-mode .checklist-file-drop > span{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .checklist-import-summary > *{border:1px solid var(--ui-line); background:var(--ui-surface); color:var(--ui-text-muted);}
.site.theme-default.dark-mode .checklist-import-summary > b{border-color:color-mix(in srgb, var(--accent) 25%, var(--ui-line)); background:color-mix(in srgb, var(--accent) 6%, var(--ui-surface));}
.site.theme-default.dark-mode .checklist-shared-list > .checklist-check-row{border-bottom:1px solid var(--ui-line);}
.site.theme-default.dark-mode .checklist-shared-list > .checklist-check-row > p{border-left:1px solid var(--ui-line); border-right:1px solid var(--ui-line); color:var(--ui-text-muted);}
.site.theme-default.dark-mode .checklist-row-notes{background:color-mix(in srgb, var(--accent) 2%, var(--ui-surface));}
.site.theme-default.dark-mode .checklist-shared-list > .checklist-row-notes{border-bottom:1px solid var(--ui-line);}
.site.theme-default.dark-mode .checklist-row-notes > article{border:1px solid color-mix(in srgb, var(--cc) 18%, var(--ui-line)); background:color-mix(in srgb, var(--cc) 4%, var(--ui-surface));}
.site.theme-default.dark-mode .checklist-row-notes > article > p{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .checklist-special-block{border-bottom:1px solid var(--ui-line) !important; background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 3%, var(--ui-surface)), var(--ui-surface));}
.site.theme-default.dark-mode .checklist-special-block > p{color:var(--ui-text-muted) !important;}
.site.theme-default.dark-mode .checklist-stat-grid > article{border:1px solid color-mix(in srgb, var(--cc) 20%, var(--ui-line)); background:color-mix(in srgb, var(--cc) 4%, var(--ui-surface));}
.site.theme-default.dark-mode .checklist-stat-grid > article > em{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .checklist-stat-grid > article > span{border-top:1px solid color-mix(in srgb, var(--cc) 12%, var(--ui-line)); color:var(--ui-text-muted);}
.site.theme-default.dark-mode .checklist-split-items > div > small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .checklist-avatar-admin{border:1px solid var(--ui-line); background:var(--ui-surface);}
.site.theme-default.dark-mode .checklist-avatar-preview{background:var(--ui-surface); color:var(--ui-text-muted);}
.site.theme-default.dark-mode .music-record-shell{background:var(--ui-surface);}
.site.theme-default.dark-mode .music-record-top nav button{background:var(--ui-surface);}
.site.theme-default.dark-mode .music-record-top nav button.on{background:var(--ui-surface-soft); border-color:var(--ui-line);}
.site.theme-default.dark-mode .music-record-visual{background:linear-gradient(145deg, color-mix(in srgb, var(--music-accent) 7%, var(--ui-surface)), var(--ui-surface) 56%);}
.site.theme-default.dark-mode .music-record-label small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .music-vinyl{background:radial-gradient(
circle at center,
var(--ui-surface-soft) 0 8%,
var(--ui-surface-soft) 8.4% 13%,
var(--ui-surface-soft) 13.4% 24%,
var(--ui-surface-soft) 24.4% 25.2%,
var(--ui-surface-soft) 25.6% 38%,
var(--ui-surface-soft) 38.3% 39.1%,
var(--ui-surface-soft) 39.5% 52%,
var(--ui-surface-soft) 52.4% 53.1%,
var(--ui-surface-soft) 53.5% 66%,
var(--ui-surface-soft) 66.4% 67.1%,
var(--ui-surface-soft) 67.5% 100%
);}
.site.theme-default.dark-mode .music-vinyl-center{border:5px solid var(--ui-line);}
.site.theme-default.dark-mode .music-record-now span{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .music-record-content > header p{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .music-record-rule i{background:color-mix(in srgb, var(--music-accent) 35%, var(--ui-surface));}
.site.theme-default.dark-mode .music-stream-play{background:var(--ui-surface); color:var(--ui-text);}
.site.theme-default.dark-mode .music-stream-no{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .music-stream-row figure{background:var(--ui-surface);}
.site.theme-default.dark-mode .music-stream-row figure span{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .music-stream-copy small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .music-stream-copy p{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .music-stream-lyrics{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .music-record-page .music-stream-row-wrap .music-lyrics-panel{border-top:1px solid color-mix(in srgb, var(--music-accent) 22%, var(--ui-line));}
.site.theme-default.dark-mode .roster-column-picker button{border:1px solid var(--ui-line); background:var(--ui-surface-soft); color:var(--ui-text-muted);}
.site.theme-default.dark-mode .roster-column-picker button:hover{border-color:var(--ui-line); color:var(--ui-text-faint);}
.site.theme-default.dark-mode .roster-column-picker button.on{background:var(--ui-surface); border-color:var(--ui-line); color:var(--ui-text);}
.site.theme-default.dark-mode .trio-page-head h1{color:var(--ui-text);}
.site.theme-default.dark-mode .trio-page-head p{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .trio-avatar{background:var(--ui-surface); border:1px solid color-mix(in srgb, var(--tc) 34%, var(--ui-line));}
.site.theme-default.dark-mode .trio-avatar .art-fallback{background:color-mix(in srgb, var(--tc) 12%, var(--ui-surface));}
.site.theme-default.dark-mode .trio-person-head p{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .trio-relation-card{background:var(--ui-surface);}
.site.theme-default.dark-mode .trio-relation-card p{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .trio-full-art{background:linear-gradient(180deg, rgba(255, 255, 255, 0.25), color-mix(in srgb, var(--tc) 7%, var(--ui-surface)));}
.site.theme-default.dark-mode .trio-full-art > span{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .trio-animal{background:var(--ui-surface);}
.site.theme-default.dark-mode .tale-list-card{background:var(--ui-surface);}
.site.theme-default.dark-mode .tale-list-card:hover{border-color:color-mix(in srgb, var(--accent) 30%, var(--ui-line));}
.site.theme-default.dark-mode .tale-list-card > figure{background:var(--ui-surface);}
.site.theme-default.dark-mode .tale-list-card small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .tale-list-card p{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .tale-list-card footer span{background:color-mix(in srgb, var(--accent) 9%, var(--ui-surface)); color:color-mix(in srgb, var(--accent) 78%, var(--ui-text));}
.site.theme-default.dark-mode .tale-list-card footer b{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .tale-detail-head span{background:color-mix(in srgb, var(--accent) 10%, var(--ui-surface));}
.site.theme-default.dark-mode .tale-detail-head time{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .tale-text-card,
.site.theme-default.dark-mode .tale-dialogue-card,
.site.theme-default.dark-mode .tale-image-card,
.site.theme-default.dark-mode .tale-qa-card{background:var(--ui-surface);}
.site.theme-default.dark-mode .tale-rich-view{color:var(--ui-text);}
.site.theme-default.dark-mode .tale-qa-item{border-bottom-color:var(--ui-line);}
.site.theme-default.dark-mode .tale-qa-q,
.site.theme-default.dark-mode .tale-qa-a{color:var(--ui-text);}
.site.theme-default.dark-mode .tale-image-card img{background:var(--ui-surface);}
.site.theme-default.dark-mode .tale-image-empty{color:var(--ui-text-muted); background:var(--ui-surface);}
.site.theme-default.dark-mode .tale-image-card figcaption{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .tale-dialogue-avatar{background:color-mix(in srgb, var(--dc) 12%, var(--ui-surface)); border:2px solid color-mix(in srgb, var(--dc) 54%, var(--ui-line));}
.site.theme-default.dark-mode .tale-dialogue-line.narration .tale-rich-view{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .trio-editor-colors label{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .trio-editor-upload > span{color:var(--ui-text-faint);}
.site.theme-default.dark-mode .trio-editor-upload img{background:var(--ui-surface);}
.site.theme-default.dark-mode .trio-editor-upload small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .trio-editor-relation label{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .tale-editor-block{background:var(--ui-surface);}
.site.theme-default.dark-mode .tale-editor-block-head{background:var(--ui-surface);}
.site.theme-default.dark-mode .tale-editor-block-head .tale-block-grip{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .tale-editor-block-head > span:nth-of-type(2){color:var(--ui-text-muted);}
.site.theme-default.dark-mode .tale-editor-block-head > button{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .tale-rich-toolbar{background:var(--ui-surface);}
.site.theme-default.dark-mode .tale-rich-toolbar button,
.site.theme-default.dark-mode .tale-rich-toolbar label{background:var(--ui-surface); color:var(--ui-text);}
.site.theme-default.dark-mode .tale-rich-editor{background:var(--ui-surface); color:var(--ui-text);}
.site.theme-default.dark-mode .tale-editor-image{background:var(--ui-surface);}
.site.theme-default.dark-mode .tale-image-paste-hint{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .tale-editor-image > span{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .tale-dialogue-edit-row > button{background:var(--ui-surface);}
.site.theme-default.dark-mode .pair-direction-title{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .pair-direction-title strong{background:color-mix(in srgb, var(--c), var(--ui-surface) 83%);}
.site.theme-default.dark-mode .pair-personal-gallery{border:1px solid color-mix(in srgb, var(--c), var(--ui-line) 72%); background:var(--ui-surface);}
.site.theme-default.dark-mode .pair-personal-gallery > header small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .pair-personal-grid figure{background:var(--ui-surface); border:1px solid var(--ui-line);}
.site.theme-default.dark-mode .pair-personal-grid span{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .pair-preset{background:linear-gradient(
120deg,
color-mix(in srgb, var(--a), var(--ui-surface) 94%),
var(--ui-surface) 45%,
color-mix(in srgb, var(--b), var(--ui-surface) 94%)
);}
.site.theme-default.dark-mode .pair-preset-head > small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .pair-preset-head > div span{border:1px solid var(--ui-line); background:var(--ui-surface);}
.site.theme-default.dark-mode .pair-status-side,
.site.theme-default.dark-mode .pair-status-center > article{background:var(--ui-surface); border:1px solid var(--ui-line);}
.site.theme-default.dark-mode .pair-status-side > p{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .pair-status-bars{border-top:1px solid var(--ui-line);}
.site.theme-default.dark-mode .pair-status-bars span{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .pair-status-bars i{background:repeating-linear-gradient(90deg, var(--ui-surface) 0 3px, transparent 3px 7px);}
.site.theme-default.dark-mode .pair-status-side blockquote{background:color-mix(in srgb, var(--c), var(--ui-surface) 91%);}
.site.theme-default.dark-mode .pair-status-reply{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .pair-world-card small,
.site.theme-default.dark-mode .pair-mini-timeline header small,
.site.theme-default.dark-mode .pair-danger-card small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .pair-world-card p{color:var(--ui-text);}
.site.theme-default.dark-mode .pair-danger-meter i{background:var(--ui-surface);}
.site.theme-default.dark-mode .pair-mini-timeline > header{border-bottom:1px solid var(--ui-line);}
.site.theme-default.dark-mode .pair-mini-timeline > header b{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .pair-mini-timeline > div{border-bottom:1px solid var(--ui-line);}
.site.theme-default.dark-mode .pair-mini-timeline section small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .pair-mini-timeline section p{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .pair-empty-copy{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .pair-layout-banner{background:var(--ui-surface);}
.site.theme-default.dark-mode .pair-banner-hero{border:1px solid var(--ui-line); background:var(--ui-surface);}
.site.theme-default.dark-mode .pair-banner-hero > div{border:1px solid var(--ui-line);}
.site.theme-default.dark-mode .pair-banner-person,
.site.theme-default.dark-mode .pair-banner-keywords{background:var(--ui-surface); border:1px solid var(--ui-line);}
.site.theme-default.dark-mode .pair-banner-person dl div{border-top:1px solid var(--ui-line);}
.site.theme-default.dark-mode .pair-banner-person dt{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .pair-banner-keywords > small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .pair-banner-keywords span{border:1px solid var(--ui-line);}
.site.theme-default.dark-mode .pair-layout-playlist > header small{color:#fff;}
.site.theme-default.dark-mode .pair-layout-playlist > header p{color:#fff;}
.site.theme-default.dark-mode .pair-player-person small{color:#fff;}
.site.theme-default.dark-mode .pair-player-person span{color:#fff;}
.site.theme-default.dark-mode .pair-player-lyrics small{color:#fff;}
.site.theme-default.dark-mode .pair-player-progress > i em{background:var(--ui-surface);}
.site.theme-default.dark-mode .pair-layout-poster{background:var(--ui-surface);}
.site.theme-default.dark-mode .pair-poster-top{border-bottom:1px solid var(--ui-line);}
.site.theme-default.dark-mode .pair-poster-top h1{border-left:1px solid var(--ui-line); border-right:1px solid var(--ui-line);}
.site.theme-default.dark-mode .pair-poster-grid{border-bottom:1px solid var(--ui-line);}
.site.theme-default.dark-mode .pair-poster-copy p{color:var(--ui-text);}
.site.theme-default.dark-mode .pair-poster-stage{border-left:1px solid var(--ui-line); border-right:1px solid var(--ui-line); background:linear-gradient(180deg, hsl(from var(--accent) h 22% 22%), hsl(from var(--accent) h 20% 18%));}
.site.theme-default.dark-mode .pair-poster-bubble{background:var(--ui-surface); border:1px solid color-mix(in srgb, var(--c), var(--ui-line) 50%);}
.site.theme-default.dark-mode .pair-poster-bubble.left:after,
.site.theme-default.dark-mode .pair-poster-bubble.right:after{background:var(--ui-surface); border-bottom:1px solid color-mix(in srgb, var(--c), var(--ui-line) 50%);}
.site.theme-default.dark-mode .pair-poster-bubble.left:after{border-right:1px solid color-mix(in srgb, var(--c), var(--ui-line) 50%);}
.site.theme-default.dark-mode .pair-poster-bubble.right:after{border-right:1px solid color-mix(in srgb, var(--c), var(--ui-line) 50%);}
.site.theme-default.dark-mode .relation-track-group{border:1px solid var(--ui-line);}
.site.theme-default.dark-mode .trio-auto-preview{background:var(--ui-surface);}
.site.theme-default.dark-mode .trio-auto-preview span{color:var(--ui-text);}
.site.theme-default.dark-mode .trio-auto-preview small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .tale-dialogue-layout-picker{background:var(--ui-surface);}
.site.theme-default.dark-mode .tale-dialogue-layout-picker small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .tale-mob-editor-wrap{background:var(--ui-surface);}
.site.theme-default.dark-mode .tale-mob-editor-wrap > small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .tale-dialogue-card.messenger{background:color-mix(in srgb, var(--world-bg) 82%, var(--ui-surface));}
.site.theme-default.dark-mode .tale-messenger-avatar{background:color-mix(in srgb, var(--dc) 12%, var(--ui-surface)); border:1px solid color-mix(in srgb, var(--dc) 48%, var(--ui-line));}
.site.theme-default.dark-mode .tale-messenger-bubble{background:var(--ui-surface);}
.site.theme-default.dark-mode .tale-messenger-line.right .tale-messenger-bubble{background:color-mix(in srgb, var(--dc) 12%, var(--ui-surface)); border-color:color-mix(in srgb, var(--dc) 24%, var(--ui-line));}
.site.theme-default.dark-mode .tale-messenger-line.narration .tale-messenger-bubble{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .relation-auto-list-btn{border:1px solid color-mix(in srgb, var(--accent) 28%, var(--ui-line)); background:color-mix(in srgb, var(--accent) 7%, var(--ui-surface)); color:color-mix(in srgb, var(--accent) 72%, var(--ui-text));}
.site.theme-default.dark-mode .relation-auto-list-btn:hover{background:color-mix(in srgb, var(--accent) 13%, var(--ui-surface));}
.site.theme-default.dark-mode .profile-number-voice > header h3{color:var(--ui-text);}
.site.theme-default.dark-mode .profile-number-list blockquote:first-child{border-top:1px solid var(--ui-line);}
.site.theme-default.dark-mode .profile-box-preset article{border:1px solid var(--ui-line); background:var(--ui-surface);}
.site.theme-default.dark-mode .profile-box-preset p{color:var(--ui-text);}
.site.theme-default.dark-mode .profile-quote-preset{border-top:1px solid var(--ui-line); border-bottom:1px solid var(--ui-line);}
.site.theme-default.dark-mode .profile-quote-preset blockquote.main span{color:var(--ui-text);}
.site.theme-default.dark-mode .profile-quote-preset blockquote.sub{border-top:1px dashed var(--ui-line);}
.site.theme-default.dark-mode .profile-quote-preset blockquote.sub span{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .profile-inline-image-preview{border:1px solid var(--ui-line); background:var(--ui-surface);}
.site.theme-default.dark-mode .profile-inline-image-preview.empty{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .profile-image-preset figure{border:1px solid var(--ui-line); background:var(--ui-surface);}
.site.theme-default.dark-mode .profile-quote-preset footer small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .profile-relation-canvas{border:1px solid var(--ui-line); background:radial-gradient(circle at center, color-mix(in srgb, var(--c), transparent 93%), transparent 42%),
var(--ui-surface);}
.site.theme-default.dark-mode .profile-relation-edge-label{border:1px solid var(--ui-line); background:var(--ui-surface); color:var(--ui-text-muted);}
.site.theme-default.dark-mode .profile-relation-node > div{border:3px solid var(--ui-line); background:var(--ui-surface);}
.site.theme-default.dark-mode .profile-relation-node small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .profile-relation-full,
.site.theme-default.dark-mode .profile-timeline-full{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .profile-relation-empty{border:1px solid var(--ui-line); background:var(--ui-surface);}
.site.theme-default.dark-mode .profile-relation-empty p{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .profile-feature-section + .profile-feature-section{border-top:1px solid var(--ui-line);}
.site.theme-default.dark-mode .profile-tab-kind{color:var(--ui-text-faint);}
.site.theme-default.dark-mode .profile-feature-picker button{color:var(--ui-text-faint);}
.site.theme-default.dark-mode .profile-feature-picker button.on{border-color:var(--ui-line); background:var(--ui-surface);}
.site.theme-default.dark-mode .profile-feature-gallery-editor > header b{color:var(--ui-text-faint);}
.site.theme-default.dark-mode .profile-feature-gallery-editor > header small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .profile-feature-gallery-list article > span{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .profile-feature-gallery-empty{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .profile-gallery-empty{border:1px dashed var(--ui-line); color:var(--ui-text-muted);}
.site.theme-default.dark-mode .profile-preset-option-row > label{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .profile-preset-source > small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .profile-color-row b{color:var(--ui-text-faint);}
.site.theme-default.dark-mode .profile-feature-admin-title{color:var(--ui-text-faint);}
.site.theme-default.dark-mode .profile-look-profile-link > span{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .profile-look-profile-link select{color:var(--ui-text-faint);}
.site.theme-default.dark-mode .profile-tab-block-editor .profile-block-type-trigger{border-color:var(--ui-line); background:var(--ui-surface);}
.site.theme-default.dark-mode .profile-tab-block-editor .profile-block-type-trigger i{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .profile-tab-block-editor .profile-block-type-menu{border-color:var(--ui-line); background:var(--ui-surface);}
.site.theme-default.dark-mode .profile-tab-block-editor .profile-block-type-menu button{background:var(--ui-surface);}
.site.theme-default.dark-mode .profile-tab-block-editor .profile-block-type-menu button:hover{background:var(--ui-surface); border-color:var(--ui-line);}
.site.theme-default.dark-mode .profile-tab-block-editor .block-controls.horizontal button{border-color:var(--ui-line); background:var(--ui-surface);}
.site.theme-default.dark-mode .profile-tab-block-editor .block-controls.horizontal button:hover:not(:disabled){background:var(--ui-surface);}
.site.theme-default.dark-mode .profile-tab-block-editor .efield > label,
.site.theme-default.dark-mode .profile-tab-block-editor .profile-preset-option-row > label{color:var(--ui-text-muted) !important;}
.site.theme-default.dark-mode .profile-tab-block-editor .profile-preset-source textarea,
.site.theme-default.dark-mode .profile-tab-block-editor .profile-preset-option-row select,
.site.theme-default.dark-mode .profile-tab-block-editor input[type="text"]{border-color:var(--ui-line) !important; background:var(--ui-surface) !important;}
.site.theme-default.dark-mode .profile-tab-block-editor .profile-preset-source > small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .profile-add-preset{border:1px dashed var(--ui-line) !important; background:var(--ui-surface) !important;}
.site.theme-default.dark-mode .profile-add-preset:hover{background:var(--ui-surface) !important;}
.site.theme-default.dark-mode .profile-tab-editor + .profile-tab-editor::before{background:var(--ui-surface-soft);}
.site.theme-default.dark-mode .profile-tab-block-editor .profile-block-type-trigger{color:var(--ui-text-faint);}
.site.theme-default.dark-mode .profile-tab-block-editor .profile-block-type-menu{color:var(--ui-text-faint);}
.site.theme-default.dark-mode .profile-tab-block-editor .profile-block-type-menu button{color:var(--ui-text-faint);}
.site.theme-default.dark-mode .profile-tab-block-editor .profile-block-type-menu button.on{background:var(--ui-surface); border-color:var(--ui-line);}
.site.theme-default.dark-mode .profile-tab-block-editor .block-controls.horizontal button{color:var(--ui-text-faint);}
.site.theme-default.dark-mode .profile-tab-block-editor .profile-preset-source textarea,
.site.theme-default.dark-mode .profile-tab-block-editor .profile-preset-option-row select,
.site.theme-default.dark-mode .profile-tab-block-editor input[type="text"]{color:var(--ui-text-faint) !important;}
.site.theme-default.dark-mode .profile-tab-block-editor .profile-preset-source textarea::placeholder,
.site.theme-default.dark-mode .profile-tab-block-editor input[type="text"]::placeholder{color:var(--ui-text-muted) !important;}
.site.theme-default.dark-mode .profile-preset-highlight{color:var(--ui-text-faint);}
.site.theme-default.dark-mode .profile-tab-block-editor .profile-preset-source .profile-preset-highlight-wrap > .profile-preset-highlight{color:var(--ui-text-faint) !important;}
.site.theme-default.dark-mode .profile-tab-block-editor .profile-preset-source .profile-preset-highlight-wrap > .profile-preset-highlight strong{color:#fff !important;}
.site.theme-default.dark-mode .profile-preset-drag-handle{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .profile-preset-drag-handle:hover{color:var(--ui-text-faint);}
.site.theme-default.dark-mode .tale-today-seed{border:1px solid var(--ui-line); background:var(--ui-surface);}
.site.theme-default.dark-mode .tale-today-seed header small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .tale-today-seed p{color:var(--ui-text);}
.site.theme-default.dark-mode .tale-today-seed p span{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .tale-today-seed > small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .owner-calendar-head p{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .owner-cal-month-nav button,
.site.theme-default.dark-mode .owner-cal-actions button,
.site.theme-default.dark-mode .owner-cal-quick-actions button{border:1px solid var(--ui-line); background:var(--ui-surface); color:var(--ui-text);}
.site.theme-default.dark-mode .owner-cal-board{border:1px solid var(--ui-line); background:var(--ui-surface);}
.site.theme-default.dark-mode .owner-cal-weekdays{background:var(--ui-surface); border-bottom:1px solid var(--ui-line);}
.site.theme-default.dark-mode .owner-cal-weekdays b{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .owner-cal-day{border-right:1px solid var(--ui-line); border-bottom:1px solid var(--ui-line); background:var(--ui-surface);}
.site.theme-default.dark-mode .owner-cal-day.outside{background:var(--ui-surface); color:var(--ui-text-muted);}
.site.theme-default.dark-mode .owner-cal-day.selected{background:color-mix(in srgb,var(--accent) 20%,var(--ui-surface));}
.site.theme-default.dark-mode .owner-cal-day-detail{border-top:1px solid var(--ui-line);}
.site.theme-default.dark-mode .owner-cal-day-detail-add{border:1px solid var(--ui-line); background:var(--ui-surface); color:var(--ui-text);}
.site.theme-default.dark-mode .owner-cal-event{border-left:3px solid var(--ui-line); background:var(--ui-surface); color:var(--ui-text);}
.site.theme-default.dark-mode .owner-cal-event.type-trpg{background:var(--ui-surface);}
.site.theme-default.dark-mode .owner-cal-event.type-commission{background:var(--ui-surface);}
.site.theme-default.dark-mode .owner-cal-side>section{background:var(--ui-surface); border:1px solid var(--ui-line);}
.site.theme-default.dark-mode .owner-cal-poll-list button,
.site.theme-default.dark-mode .owner-cal-upcoming button{border:1px solid var(--ui-line); background:var(--ui-surface);}
.site.theme-default.dark-mode .owner-cal-poll-list button small,
.site.theme-default.dark-mode .owner-cal-upcoming button small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .owner-cal-empty{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .calendar-commission-preview{border:1px solid var(--ui-line); background:var(--ui-surface);}
.site.theme-default.dark-mode .shared-calendar-poll-shell>header p{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .owner-cal-event.type-personal{border:1px solid var(--ui-line); background:var(--ui-surface);}
.site.theme-default.dark-mode .owner-cal-event.type-personal small{background:var(--ui-surface);}
.site.theme-default.dark-mode .calendar-editor-stats small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .calendar-editor-label{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .sns-page-head p{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .sns-feed-count{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .sns-feed-count b{color:var(--ui-text);}
.site.theme-default.dark-mode .sns-account-rail>small,
.site.theme-default.dark-mode .sns-meta-rail section>small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .sns-account-card{border:1px solid var(--ui-line); background:var(--ui-surface);}
.site.theme-default.dark-mode .sns-avatar{background:var(--ui-surface); border:1px solid var(--ui-line);}
.site.theme-default.dark-mode .sns-avatar-fallback{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .sns-author small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .sns-post{background:var(--ui-surface); border:1px solid var(--ui-line);}
.site.theme-default.dark-mode .sns-post>header time{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .sns-post-image{border:1px solid var(--ui-line); background:var(--ui-surface);}
.site.theme-default.dark-mode .sns-post>footer{border-top:1px solid var(--ui-line); color:var(--ui-text-muted);}
.site.theme-default.dark-mode .sns-post>footer b{color:var(--ui-text);}
.site.theme-default.dark-mode .sns-comments{border-top:1px solid var(--ui-line); background:var(--ui-surface);}
.site.theme-default.dark-mode .sns-comment-row{border-bottom:1px solid var(--ui-line);}
.site.theme-default.dark-mode .sns-comment-copy>p,
.site.theme-default.dark-mode .sns-reply-row>div>p{color:var(--ui-text);}
.site.theme-default.dark-mode .sns-comment-copy>small,
.site.theme-default.dark-mode .sns-reply-row>div>small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .sns-replies{border-left:2px solid color-mix(in srgb,var(--accent) 35%,var(--ui-line));}
.site.theme-default.dark-mode .sns-meta-rail section{background:var(--ui-surface); border:1px solid var(--ui-line);}
.site.theme-default.dark-mode .sns-meta-rail section>p{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .sns-meta-rail section>div{border-top:1px solid var(--ui-line);}
.site.theme-default.dark-mode .sns-meta-rail section>div span{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .sns-empty,
.site.theme-default.dark-mode .sns-empty-small{border:1px dashed var(--ui-line); color:var(--ui-text-muted);}
.site.theme-default.dark-mode .sns-admin-comments{border:1px solid var(--ui-line); background:var(--ui-surface);}
.site.theme-default.dark-mode .sns-admin-comments>article{border-top:1px solid var(--ui-line);}
.site.theme-default.dark-mode .sns-admin-comments article>div:first-child small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .sns-admin-reply{background:var(--ui-surface); border:1px solid var(--ui-line);}
.site.theme-default.dark-mode .calendar-visibility-toggle{background:var(--ui-surface-soft);}
.site.theme-default.dark-mode .calendar-visibility-toggle button{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .calendar-visibility-toggle button.on{background:var(--ui-surface-soft);}
.site.theme-default.dark-mode .owner-cal-upcoming-item{border:1px solid var(--ui-line); background:var(--ui-surface);}
.site.theme-default.dark-mode .owner-cal-upcoming-item small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .owner-cal-public-note p{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .sns-stat-pill{border:1px solid var(--ui-line); background:var(--ui-surface);}
.site.theme-default.dark-mode .sns-stat-pill b{color:var(--ui-text);}
.site.theme-default.dark-mode .sns-stat-pill span{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .sns-meta-card{border:1px solid var(--ui-line); background:var(--ui-surface);}
.site.theme-default.dark-mode .sns-meta-card small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .sns-meta-card b{color:var(--ui-text);}
.site.theme-default.dark-mode .sns-meta-card p{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .sns-meta-line{border-top:1px solid var(--ui-line);}
.site.theme-default.dark-mode .sns-meta-line span{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .sns-section-head b{color:var(--ui-text);}
.site.theme-default.dark-mode .sns-section-head span{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .sns-account-strip,
.site.theme-default.dark-mode .sns-feed-panel{border:1px solid var(--ui-line); background:var(--ui-surface);}
.site.theme-default.dark-mode .sns-post > header time{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .sns-post > footer{border-top:1px solid var(--ui-line); color:var(--ui-text-muted);}
.site.theme-default.dark-mode .sns-post > footer b{color:var(--ui-text);}
.site.theme-default.dark-mode .sns-thread-row .sns-avatar{border:1px solid var(--ui-line); background:var(--ui-surface);}
.site.theme-default.dark-mode .sns-thread-card{border:1px solid var(--ui-line); background:var(--ui-surface);}
.site.theme-default.dark-mode .sns-thread-head b{color:var(--ui-text);}
.site.theme-default.dark-mode .sns-thread-head small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .sns-thread-card p{color:var(--ui-text);}
.site.theme-default.dark-mode .sns-thread-replies{border-top:1px dashed var(--ui-line);}
.site.theme-default.dark-mode .guestbook-page{color:var(--ui-text);}
.site.theme-default.dark-mode .guestbook-head p{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .guestbook-head>strong span{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .guestbook-compose{border:1px solid color-mix(in srgb,var(--accent,#9f7d86) 18%,var(--ui-line)); background:color-mix(in srgb,var(--world-bg,var(--ui-surface)) 72%,var(--ui-surface));}
.site.theme-default.dark-mode .guestbook-field label{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .guestbook-field input,
.site.theme-default.dark-mode .guestbook-field textarea{border:1px solid var(--ui-line); background:var(--ui-surface); color:var(--ui-text);}
.site.theme-default.dark-mode .guestbook-field input:focus,
.site.theme-default.dark-mode .guestbook-field textarea:focus{border-color:color-mix(in srgb,var(--accent,#9f7d86) 65%,var(--ui-line));}
.site.theme-default.dark-mode .guestbook-field>small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .guestbook-local-note{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .guestbook-entry{border:1px solid var(--ui-line); background:color-mix(in srgb,var(--world-bg,var(--ui-surface)) 58%,var(--ui-surface));}
.site.theme-default.dark-mode .guestbook-entry>header span{background:color-mix(in srgb,var(--accent,#9f7d86) 15%,var(--ui-surface)); color:color-mix(in srgb,var(--accent,#9f7d86) 78%,var(--ui-text));}
.site.theme-default.dark-mode .guestbook-entry>header time{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .guestbook-entry>p{color:var(--ui-text);}
.site.theme-default.dark-mode .guestbook-reply{border-left:3px solid color-mix(in srgb,var(--accent,#9f7d86) 44%,var(--ui-line));}
.site.theme-default.dark-mode .guestbook-reply p{color:var(--ui-text);}
.site.theme-default.dark-mode .guestbook-delete-own{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .guestbook-empty{border:1px dashed var(--ui-line);}
.site.theme-default.dark-mode .guestbook-empty p{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .guestbook-admin-summary{border:1px solid var(--ui-line); background:var(--ui-surface);}
.site.theme-default.dark-mode .guestbook-admin-summary span{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .guestbook-admin-list .grow p{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .tale-access-badges span,
.site.theme-default.dark-mode .tale-detail-head .tale-access-badges span{background:var(--ui-surface); color:var(--ui-text);}
.site.theme-default.dark-mode .tale-access-badges .private,
.site.theme-default.dark-mode .tale-detail-head .tale-access-badges .private{background:var(--ui-surface-soft); color:var(--ui-text-faint);}
.site.theme-default.dark-mode .custom-html-page{color:var(--ui-text);}
.site.theme-default.dark-mode .sns-office-top{border:1px solid var(--ui-line); border-bottom:3px solid color-mix(in srgb,var(--accent) 68%,var(--ui-line)); background:var(--ui-surface);}
.site.theme-default.dark-mode .sns-office-brand>span{background:var(--ui-surface-soft);}
.site.theme-default.dark-mode .sns-office-brand small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .sns-office-brand h1{color:var(--ui-text) !important;}
.site.theme-default.dark-mode .sns-office-world{border-left:1px solid var(--ui-line);}
.site.theme-default.dark-mode .sns-office-world small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .sns-office-world b{color:var(--ui-text);}
.site.theme-default.dark-mode .sns-office-side>section{border:1px solid var(--ui-line); background:var(--ui-surface);}
.site.theme-default.dark-mode .sns-office-side>section>header{background:var(--ui-surface); border-bottom:1px solid var(--ui-line);}
.site.theme-default.dark-mode .sns-office-side>section>header b{color:var(--ui-text);}
.site.theme-default.dark-mode .sns-office-side>section>header span{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .sns-office-member{border-bottom:1px solid var(--ui-line);}
.site.theme-default.dark-mode .sns-office-member small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .sns-office-summary dl div{border-bottom:1px solid var(--ui-line);}
.site.theme-default.dark-mode .sns-office-summary dt{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .sns-office-board{border:1px solid var(--ui-line); background:var(--ui-surface);}
.site.theme-default.dark-mode .sns-office-board-head{border-bottom:1px solid var(--ui-line);}
.site.theme-default.dark-mode .sns-office-board-head b{color:var(--ui-text);}
.site.theme-default.dark-mode .sns-office-board-head>span{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .sns-board-columns{background:var(--ui-surface); border-bottom:1px solid var(--ui-line); color:var(--ui-text-muted);}
.site.theme-default.dark-mode .sns-board-entry{border-bottom:1px solid var(--ui-line);}
.site.theme-default.dark-mode .sns-board-entry>summary{color:var(--ui-text); background:var(--ui-surface);}
.site.theme-default.dark-mode .sns-board-entry>summary:hover,
.site.theme-default.dark-mode .sns-board-entry[open]>summary{background:color-mix(in srgb,var(--accent) 5%,var(--ui-surface));}
.site.theme-default.dark-mode .sns-board-no{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .sns-board-title b{color:var(--ui-text);}
.site.theme-default.dark-mode .sns-board-title em{border:1px solid var(--ui-line); background:var(--ui-surface); color:var(--ui-text-muted);}
.site.theme-default.dark-mode .sns-board-entry>summary time{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .sns-board-like{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .sns-board-article{border-top:1px solid var(--ui-line); background:var(--ui-surface);}
.site.theme-default.dark-mode .sns-board-article>header{border-bottom:1px solid var(--ui-line);}
.site.theme-default.dark-mode .sns-board-article>header>div:last-child{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .sns-board-copy>p{color:var(--ui-text);}
.site.theme-default.dark-mode .sns-board-copy figure{border:1px solid var(--ui-line); background:var(--ui-surface);}
.site.theme-default.dark-mode .sns-board-comments{border-top:1px solid var(--ui-line);}
.site.theme-default.dark-mode .sns-board-comments-title span{background:var(--ui-surface-soft);}
.site.theme-default.dark-mode .sns-board-comments .sns-thread-card{background:var(--ui-surface);}
.site.theme-default.dark-mode .sns-office-empty,
.site.theme-default.dark-mode .sns-office-empty-small{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .sns-office-empty b{color:var(--ui-text);}
.site.theme-default.dark-mode .story-page-v5{color:var(--ui-text); background:radial-gradient(ellipse at 50% -12%, rgba(76, 88, 100, 0.07) 0%, rgba(79, 94, 107, 0.025) 29%, transparent 55%),
radial-gradient(ellipse at 8% 66%, rgba(76, 89, 98, 0.045), transparent 34%),
radial-gradient(ellipse at 92% 74%, rgba(67, 80, 92, 0.035), transparent 30%),
var(--world-bg, var(--ui-surface));}
.site.theme-default.dark-mode .story-page-v5 .history-track-v5{background:linear-gradient(to bottom, var(--ui-surface-soft), rgba(48, 48, 50, 0.38) 86%, rgba(48, 48, 50, 0));}
.site.theme-default.dark-mode .story-page-v5 .history-filter-v6 button{background:var(--ui-surface); color:var(--ui-text-muted);}
.site.theme-default.dark-mode .story-page-v5 .history-filter-v6 button:hover,
.site.theme-default.dark-mode .story-page-v5 .history-filter-v6 button.on{background:var(--ui-surface-soft); color:var(--ui-text-faint); border-color:var(--ui-line);}
.site.theme-default.dark-mode .story-page-v5 .history-empty-v6{color:var(--ui-text-muted);}
.site.theme-default.dark-mode .story-page-v5 .history-osmo-title-item-v8 button{color:var(--ui-text);}
.site.theme-default.dark-mode .story-page-v5 .history-osmo-seq-v8,
.site.theme-default.dark-mode .story-page-v5 .history-osmo-title-copy-v8 > small,
.site.theme-default.dark-mode .story-page-v5 .history-osmo-title-item-v8 button > em,
.site.theme-default.dark-mode .story-page-v5 .history-osmo-row-side-v33 > em{color:var(--ui-text-muted);}
/* Canvas / large split panels must use the same dark family, not old white/cream. */
.site.theme-default.dark-mode .site-view > :where(
.home-page,.roster-page,.profile-page-v4,.pair-page-v4,.trio-page,.gallery-page,
.diagram-page,.dialogue-page,.story-page-v5,.history-osmo-page-v8,.tales-page,
.calendar-page,.shared-calendar-poll-page,.owner-calendar-page,.dday-page,
.checklist-page,.trpg-page,.similar-page,.music-page,.music-record-page,.owner-page,
.guestbook-page,.tag-archive-page,.sns-page,.sns-office-page,.custom-html-page,
.placeholder-page,.secret-page,.tab-lock-page
){background:var(--ui-page-bg)!important;color:var(--ui-text)!important;}
.site.theme-default.dark-mode :where(
.profile-v4-wrap,.profile-v4-detail,.pair-v4-wrap,.trio-wrap,.dialogue-wrap,
.gallery-wrap,.diagram-wrap,.calendar-wrap,.checklist-wrap,.trpg-wrap,.similar-wrap,
.music-wrap,.owner-wrap,.tag-archive-wrap,.sns-wrap
){background-color:var(--ui-surface)!important;color:var(--ui-text)!important;border-color:var(--ui-line)!important;}
.site.theme-default.dark-mode .profile-v4-visual{
background:linear-gradient(145deg,color-mix(in srgb,var(--c) 8%,var(--ui-surface)),var(--ui-surface) 58%,var(--ui-surface-soft))!important;
}
.site.theme-default.dark-mode .profile-v4-detail{background:var(--ui-surface)!important;}
/* Main copy: explicit semantic roles. */
.site.theme-default.dark-mode .home-page:not(.world-au-school) :where(.hero-name,.pair-title){color:var(--ui-text)!important;text-shadow:none!important;}
.site.theme-default.dark-mode .home-page:not(.world-au-school) :where(.hero-kicker,.hero-subname,.pair-desc,.pair-date){color:var(--ui-text-muted)!important;}
.site.theme-default.dark-mode .home-page:not(.world-au-school) .pair-kicker{color:var(--ui-text-faint)!important;}
.site.theme-default.dark-mode .home-page:not(.world-au-school) .pair-date i{background:var(--ui-line)!important;}
/* Profile copy/table/status: no near-black text can remain on the dark panels. */
.site.theme-default.dark-mode .profile-page-v4 :where(
.profile-v4-name h1,.profile-v4-detail-head b,.profile-story-lead h3,
.profile-meter-sheet header h3,.profile-essay-title h3,.profile-palette-block b,
.profile-fact-sheet span,.profile-meter-row>b,.profile-voice-list blockquote span,
.profile-radar-label strong
){color:var(--ui-text)!important;}
.site.theme-default.dark-mode .profile-page-v4 :where(
.profile-v4-word,.profile-v4-name span,.profile-v4-detail-head small,.profile-v4-tabs button,
.profile-story-lead p,.profile-fact-sheet small,.profile-meter-row span,.profile-essay p,
.profile-palette-block>small,.profile-palette-block em,.profile-radar-label small
){color:var(--ui-text-muted)!important;}
.site.theme-default.dark-mode .profile-page-v4 :where(
.profile-v4-name small,.profile-story-lead small,.profile-meter-sheet header small,
.profile-voice-list>small
){color:var(--c)!important;}
.site.theme-default.dark-mode .profile-v4-tabs button.on{color:var(--ui-text)!important;}
.site.theme-default.dark-mode .profile-meter-dots i{background:var(--ui-surface-soft)!important;border-color:var(--ui-line)!important;}
.site.theme-default.dark-mode .profile-meter-dots i.on{background:var(--c)!important;border-color:var(--c)!important;}
.site.theme-default.dark-mode .profile-keyword-wall span{background:var(--ui-surface-soft)!important;color:var(--ui-text)!important;border:1px solid var(--ui-line)!important;}
/* Timeline list: headings were the most visibly broken after removing inversion. */
.site.theme-default.dark-mode .story-page-v5 :where(
.history-osmo-title-item-v8 button,.history-osmo-title-v8,.history-title-v5,
.history-osmo-row-v8 h2,.history-osmo-row-v8 h3
){color:var(--ui-text)!important;}
.site.theme-default.dark-mode .story-page-v5 :where(
.history-osmo-seq-v8,.history-osmo-title-copy-v8>small,
.history-osmo-title-item-v8 button>em,.history-osmo-row-side-v33>em,.history-empty-v6
){color:var(--ui-text-muted)!important;}
.site.theme-default.dark-mode .story-page-v5 .history-track-v5{
background:linear-gradient(to bottom,var(--ui-line),rgba(255,255,255,.05) 86%,transparent)!important;
}
.site.theme-default.dark-mode .story-page-v5 .history-event-v5:before{background:var(--ui-line)!important;}
.site.theme-default.dark-mode .story-page-v5 .history-filter-v6 button{
background:var(--ui-surface)!important;color:var(--ui-text-muted)!important;border-color:var(--ui-line)!important;
}
.site.theme-default.dark-mode .story-page-v5 .history-filter-v6 button:hover,
.site.theme-default.dark-mode .story-page-v5 .history-filter-v6 button.on{
background:var(--ui-emphasis)!important;color:#fff!important;border-color:var(--ui-emphasis)!important;
}
/* Generic semantic text safety net for page content. Accent/selected rules above override it. */
.site.theme-default.dark-mode .site-view :where(p,li,td,th,blockquote){color:var(--ui-text-muted);}
.site.theme-default.dark-mode .site-view :where(h1,h2,h3,h4,h5,h6,strong,b){color:var(--ui-text);}
.site.theme-default.dark-mode .site-view :where(small,time){color:var(--ui-text-muted);}
.site.theme-default.dark-mode .site-view :where(hr){border-color:var(--ui-line);}
/* Timeline detail intentionally remains the opposite mode. Do not remap it here. */
/* ============ END lope v0.3.219 COMPLETE DEFAULT DARK PALETTE
============================================================ */
/* v0.3.283–0.3.284, v0.3.297 — 모든 스킨 공통 다인틀 레이아웃 프리셋 */
.site .trio-layout-diagonal,
.site .trio-layout-cards,
.site .trio-layout-editorial {
--trio-surface: var(--ui-surface, #fff);
--trio-soft: var(--ui-surface-soft, #f1efed);
--trio-line: var(--ui-line, rgba(37, 32, 31, 0.13));
--trio-text: var(--ui-text, #252120);
--trio-muted: var(--ui-text-muted, #77706d);
}
.site .trio-layout-diagonal .trio-page-head,
.site .trio-layout-cards .trio-page-head,
.site .trio-layout-editorial .trio-page-head {
margin-bottom: 30px;
}
.site .trio-layout-diagonal .trio-page-head h1,
.site .trio-layout-cards .trio-page-head h1,
.site .trio-layout-editorial .trio-page-head h1 {
font-size: clamp(34px, 5vw, 64px);
}
.site .trio-layout-relation {
min-width: 0;
}
.site .trio-layout-relation > b {
display: block;
margin-bottom: 4px;
font-size: 9px;
letter-spacing: 0.12em;
color: var(--tc);
}
.site .trio-layout-relation p {
display: grid;
grid-template-columns: 16px minmax(0, 1fr);
gap: 4px;
margin: 2px 0;
font-size: 10px;
line-height: 1.5;
color: var(--trio-muted);
}
.site .trio-layout-relation em {
font-style: normal;
font-weight: 900;
color: var(--tc);
}
.site .trio-layout-image-fallback {
width: 100%;
height: 100%;
display: grid;
place-items: center;
background: color-mix(in srgb, var(--tc) 7%, var(--trio-soft));
font-family: var(--serif, Georgia, serif);
font-size: 46px;
font-weight: 500;
color: color-mix(in srgb, var(--tc) 62%, var(--trio-muted));
}
/* 참고 1: 텍스트와 인물이 교차하는 사선 콜라주 */
.site .trio-layout-diagonal .trio-shell {
width: min(900px, 100%);
}
.site .trio-collage {
position: relative;
isolation: isolate;
overflow: visible;
border: 1px solid var(--trio-line);
background: var(--trio-surface);
box-shadow: 0 20px 55px rgba(39, 31, 30, 0.08);
}
.site .trio-collage::before {
content: "";
position: absolute;
z-index: -1;
top: 30%;
left: -6%;
width: 112%;
height: 31%;
transform: skewY(-4deg);
background: color-mix(in srgb, var(--accent) 10%, var(--trio-soft));
border-block: 1px solid color-mix(in srgb, var(--accent) 12%, transparent);
}
.site .trio-collage-row {
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(260px, 0.92fr);
align-items: stretch;
min-height: 330px;
position: relative;
overflow: visible;
}
.site .trio-collage-row + .trio-collage-row {
border-top: 1px solid color-mix(in srgb, var(--trio-line) 55%, transparent);
}
.site .trio-collage-row-2,
.site .trio-collage-row-even {
grid-template-columns: minmax(260px, 0.92fr) minmax(0, 1.08fr);
}
.site .trio-collage-row-2 .trio-collage-copy,
.site .trio-collage-row-even .trio-collage-copy {
grid-column: 2;
}
.site .trio-collage-row-2 .trio-collage-figure,
.site .trio-collage-row-even .trio-collage-figure {
grid-column: 1;
grid-row: 1;
}
.site .trio-collage-copy {
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
padding: 36px 44px;
}
.site .trio-collage-copy > small {
font-size: 9px;
font-weight: 850;
letter-spacing: 0.18em;
color: var(--tc);
}
.site .trio-collage-copy h2 {
margin: 8px 0 9px;
font-family: var(--serif, Georgia, serif);
font-size: clamp(28px, 4vw, 44px);
font-weight: 500;
line-height: 1;
color: var(--trio-text);
}
.site .trio-collage-keywords,
.site .trio-column-keywords {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.site .trio-collage-keywords span {
font-size: 10px;
font-weight: 700;
color: var(--tc);
}
.site .trio-collage-copy > p {
margin: 17px 0 0;
font-size: 12px;
line-height: 1.78;
color: var(--trio-muted);
}
.site .trio-collage-palette {
display: flex;
gap: 6px;
margin-top: 16px;
}
.site .trio-collage-palette i,
.site .trio-editorial-palette i {
width: 24px;
height: 5px;
background: var(--dot);
}
.site .trio-collage-relations {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 13px;
margin-top: 18px;
padding-top: 13px;
border-top: 1px solid var(--trio-line);
}
.site .trio-collage-figure {
position: relative;
min-width: 0;
height: 330px;
min-height: 0;
margin: 0;
overflow: visible;
}
.site .trio-collage-frame {
position: absolute;
z-index: 0;
inset: 0;
background: color-mix(in srgb, var(--tc) 9%, var(--trio-soft));
clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);
}
.site .trio-collage-row-2 .trio-collage-frame,
.site .trio-collage-row-even .trio-collage-frame {
clip-path: polygon(0 0, 100% 7%, 92% 100%, 0 100%);
}
.site .trio-collage-art-window {
position: absolute;
z-index: 1;
left: -9%;
right: -4%;
bottom: 0;
height: 460px;
overflow: hidden;
}
.site .trio-collage-art-window > img,
.site .trio-collage-art-window > .art-fallback,
.site .trio-collage-art-window > .trio-layout-image-fallback {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center bottom;
}
.site .trio-collage-art-window > img {
transform: translate(var(--img-x, 0%), var(--img-y, 0%)) scale(var(--img-scale, 1));
transform-origin: 50% 100%;
will-change: transform;
filter: drop-shadow(0 14px 18px rgba(35, 29, 28, 0.1));
}
.site .trio-collage-animal {
position: absolute;
z-index: 2;
right: 16px;
bottom: 16px;
width: 66px;
height: 66px;
display: grid;
place-items: center;
padding: 7px;
border: 1px solid color-mix(in srgb, var(--tc) 30%, var(--trio-line));
border-radius: 50%;
background: color-mix(in srgb, var(--trio-surface) 88%, transparent);
backdrop-filter: blur(8px);
}
.site .trio-collage-animal img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
/* 참고 2: 세 사람을 같은 규격으로 비교하는 3열 카드 */
.site .trio-layout-cards .trio-shell {
width: min(1080px, 100%);
}
.site .trio-card-strip {
display: grid;
grid-template-columns: repeat(var(--trio-cols, 3), minmax(0, 1fr));
border: 1px solid var(--trio-line);
background: var(--trio-surface);
box-shadow: 0 18px 50px rgba(35, 31, 30, 0.08);
}
.site .trio-column-card {
min-width: 0;
padding: 0 18px 24px;
}
.site .trio-column-card + .trio-column-card {
border-left: 1px solid var(--trio-line);
}
.site .trio-column-card:nth-child(3n + 1) {
border-left: 0;
}
.site .trio-column-card:nth-child(n + 4) {
border-top: 1px solid var(--trio-line);
}
.site .trio-column-card > header {
width: 72px;
height: 58px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
gap: 2px;
margin: 0 auto 10px;
padding-bottom: 9px;
border-radius: 0 0 50% 50%;
background: color-mix(in srgb, var(--tc) 16%, var(--trio-soft));
}
.site .trio-column-card > header span {
font-size: 13px;
font-weight: 900;
color: var(--tc);
}
.site .trio-column-card > header small {
max-width: 62px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 7px;
letter-spacing: 0.08em;
color: var(--trio-muted);
}
.site .trio-column-stage {
position: relative;
height: 480px;
min-height: 480px;
padding: 15px 12px;
}
.site .trio-column-stage::before {
content: "";
position: absolute;
inset: 46px 15px 24px;
background: color-mix(in srgb, var(--tc) 8%, var(--trio-soft));
}
.site .trio-column-stage figure {
position: absolute;
z-index: 1;
inset: 0 24px 0;
margin: 0;
display: flex;
align-items: flex-end;
justify-content: center;
overflow: hidden;
}
.site .trio-column-stage figure > img,
.site .trio-column-stage figure > .art-fallback,
.site .trio-column-stage figure > .trio-layout-image-fallback {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center bottom;
}
.site .trio-column-float {
position: absolute;
z-index: 2;
inset: 0;
pointer-events: none;
}
.site .trio-column-float > i {
position: absolute;
top: 54px;
left: -4px;
width: 112px;
height: 132px;
border: 1px solid rgba(255, 255, 255, 0.82);
border-radius: 24px 18px 42px 16px;
background: var(--dot);
box-shadow: 0 4px 10px rgba(30, 25, 25, 0.08);
}
.site .trio-column-float > i:nth-child(2) {
top: 204px;
left: auto;
right: -8px;
width: 126px;
height: 94px;
border-radius: 18px 36px 18px 30px;
}
.site .trio-column-float > i:nth-child(3) {
top: 334px;
left: 8px;
width: 94px;
height: 118px;
border-radius: 34px 16px 28px 18px;
}
.site .trio-column-card:nth-child(3n + 2) .trio-column-float > i:nth-child(1) {
top: 78px;
right: 4px;
left: auto;
width: 122px;
height: 92px;
border-radius: 20px 34px 16px 26px;
}
.site .trio-column-card:nth-child(3n + 2) .trio-column-float > i:nth-child(2) {
top: 212px;
right: auto;
left: -6px;
width: 96px;
height: 128px;
border-radius: 34px 16px 38px 20px;
}
.site .trio-column-card:nth-child(3n + 2) .trio-column-float > i:nth-child(3) {
top: 348px;
right: 2px;
left: auto;
width: 116px;
height: 96px;
border-radius: 16px 30px 22px 36px;
}
.site .trio-column-card:nth-child(3n) .trio-column-float > i:nth-child(1) {
top: 65px;
left: 4px;
width: 96px;
height: 124px;
border-radius: 18px 34px 16px 40px;
}
.site .trio-column-card:nth-child(3n) .trio-column-float > i:nth-child(2) {
top: 210px;
right: -6px;
left: auto;
width: 118px;
height: 96px;
border-radius: 36px 18px 30px 16px;
}
.site .trio-column-card:nth-child(3n) .trio-column-float > i:nth-child(3) {
top: 358px;
left: -6px;
width: 126px;
height: 88px;
border-radius: 18px 28px 38px 16px;
}
.site .trio-column-float > i.has-image {
overflow: hidden;
background: var(--trio-surface);
border-color: color-mix(in srgb, var(--tc) 28%, var(--trio-line));
}
/* v0.3.303 — 보조 이미지 3칸을 편집 모드에서 드래그로 옮기고 크기를 조절할 수 있게.
방문자 화면(.trio-column-float의 기본 pointer-events:none)은 그대로 두어 클릭이
아래 전신 이미지를 가리지 않게 합니다. 칸 자체의 width/height를 직접 늘리므로
border-radius(각 칸 고정 px)는 그대로 유지되고 가운데 직선 구간만 늘어납니다. */
.site.editing .trio-column-float > i {
pointer-events: auto;
cursor: grab;
touch-action: none;
}
.site.editing .trio-column-float > i.is-dragging {
cursor: grabbing;
z-index: 3;
box-shadow: 0 8px 20px rgba(30, 25, 25, 0.22);
}
.trio-badge-resize {
/* v0.3.303 — 이미지가 든 칸(.has-image)은 overflow:hidden이라 핸들이 칸 밖으로
삐져나오면 잘려서 안 보입니다. 칸 안쪽에 완전히 들어오게 둡니다. */
position: absolute;
right: 4px;
bottom: 4px;
width: 16px;
height: 16px;
border-radius: 50%;
background: #fff;
border: 2px solid var(--accent, #a675b8);
box-shadow: 0 2px 6px rgba(30, 25, 25, 0.25);
opacity: 0;
pointer-events: none;
cursor: nwse-resize;
transition: opacity 0.15s;
z-index: 4;
}
.site.editing .trio-column-float > i:hover .trio-badge-resize,
.site.editing .trio-column-float > i.is-resizing .trio-badge-resize {
opacity: 1;
pointer-events: auto;
}
.site .trio-column-float > i img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
}
.site .trio-column-float > span {
position: absolute;
z-index: 3;
right: 2px;
bottom: 8px;
width: 58px;
height: 58px;
display: grid;
place-items: center;
padding: 6px;
border: 1px solid var(--trio-line);
border-radius: 14px;
background: color-mix(in srgb, var(--trio-surface) 88%, transparent);
}
.site .trio-column-float > span img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.site .trio-column-copy {
position: relative;
padding: 19px 4px 0;
border-top: 7px solid var(--tc);
}
.site .trio-column-copy > small {
font-size: 8px;
font-weight: 800;
letter-spacing: 0.16em;
color: var(--tc);
}
.site .trio-column-copy h2 {
margin: 5px 0 9px;
font-family: var(--serif, Georgia, serif);
font-size: 28px;
font-weight: 500;
color: var(--trio-text);
}
.site .trio-column-keywords span {
padding: 4px 7px;
border: 1px solid color-mix(in srgb, var(--tc) 22%, var(--trio-line));
border-radius: 999px;
font-size: 9px;
color: var(--tc);
}
.site .trio-column-copy > p {
margin: 15px 0 0;
min-height: 92px;
font-size: 11px;
line-height: 1.75;
color: var(--trio-muted);
}
.site .trio-column-relations {
display: grid;
gap: 10px;
margin-top: 16px;
padding-top: 13px;
border-top: 1px solid var(--trio-line);
}
/* 참고 3: 인쇄물처럼 세로로 이어지는 에디토리얼 */
.site .trio-layout-editorial .trio-shell {
width: min(1160px, 100%);
}
.site .trio-editorial-grid {
display: grid;
grid-template-columns: repeat(var(--trio-cols, 3), minmax(0, 1fr));
border: 1px solid var(--trio-line);
background: var(--trio-surface);
box-shadow: 0 18px 54px rgba(35, 30, 29, 0.08);
}
.site .trio-editorial-column {
position: relative;
min-width: 0;
overflow: hidden;
padding: 28px 25px 0;
}
.site .trio-editorial-column + .trio-editorial-column {
border-left: 1px solid var(--trio-line);
}
.site .trio-editorial-column:nth-child(3n + 1) {
border-left: 0;
}
.site .trio-editorial-column:nth-child(n + 4) {
border-top: 1px solid var(--trio-line);
}
.site .trio-editorial-corner {
position: absolute;
top: 0;
left: 0;
width: 116px;
height: 68px;
clip-path: polygon(0 0, 100% 0, 68% 100%, 0 76%);
background: color-mix(in srgb, var(--tc) 45%, var(--trio-soft));
}
.site .trio-editorial-column > header {
position: relative;
z-index: 1;
height: 178px;
}
.site .trio-editorial-vertical {
position: absolute;
top: 2px;
left: 0;
width: 82px;
height: 132px;
display: flex;
flex-direction: row-reverse;
justify-content: center;
gap: 8px;
padding: 11px 9px;
border: 1px solid var(--trio-text);
background: color-mix(in srgb, var(--trio-surface) 84%, transparent);
backdrop-filter: blur(5px);
}
.site .trio-editorial-vertical b,
.site .trio-editorial-vertical small {
writing-mode: vertical-rl;
text-orientation: mixed;
/* v0.3.333 — 세로쓰기 상자 높이가 고정이라 이름이 길면 다음 줄(칸)로 넘어가는데,
기본값은 한글 글자 사이 아무 데서나 줄바꿈할 수 있어서 "성 이름" 사이 띄어쓰기와
상관없이 이름 중간이 뚝뚝 끊겨 다른 칸으로 흩어졌습니다. 띄어쓰기 단위(단어)
안에서는 안 끊기도록 고정합니다. */
word-break: keep-all;
overflow-wrap: normal;
}
.site .trio-editorial-vertical b {
font-family: var(--serif, Georgia, serif);
font-size: 17px;
font-weight: 600;
letter-spacing: 0.08em;
color: var(--trio-text);
}
.site .trio-editorial-vertical small {
overflow: hidden;
font-size: 8px;
line-height: 1.4;
color: var(--trio-muted);
}
.site .trio-editorial-role {
position: absolute;
top: 64px;
left: 103px;
right: 0;
padding-top: 8px;
border-top: 1px solid var(--trio-line);
}
.site .trio-editorial-role span,
.site .trio-editorial-role small {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.site .trio-editorial-role span {
font-size: 9px;
color: var(--trio-text);
}
.site .trio-editorial-role small {
margin-top: 3px;
font-size: 7px;
letter-spacing: 0.12em;
color: var(--trio-muted);
}
.site .trio-editorial-column > figure {
box-sizing: border-box;
height: 520px;
margin: -70px 0 0 74px;
padding: 28px 0 34px;
overflow: hidden;
background: color-mix(in srgb, var(--tc) 8%, var(--trio-soft));
}
.site .trio-editorial-column > figure > img,
.site .trio-editorial-column > figure > .art-fallback,
.site .trio-editorial-column > figure > .trio-layout-image-fallback {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center bottom;
}
.site .trio-editorial-copy {
display: grid;
grid-template-columns: minmax(0, 1.45fr) minmax(82px, 0.55fr);
gap: 18px;
margin-top: 22px;
padding-top: 17px;
border-top: 1px solid var(--trio-line);
}
.site .trio-editorial-copy > p {
margin: 0;
font-size: 10px;
line-height: 1.82;
color: var(--trio-muted);
}
.site .trio-editorial-copy aside {
min-width: 0;
padding-top: 2px;
}
.site .trio-editorial-copy aside > small,
.site .trio-editorial-copy aside > b {
display: block;
}
.site .trio-editorial-copy aside > small {
font-size: 7px;
letter-spacing: 0.13em;
color: var(--tc);
}
.site .trio-editorial-copy aside > b {
margin-top: 6px;
font-size: 11px;
color: var(--trio-text);
}
.site .trio-editorial-copy aside > img {
width: 54px;
height: 54px;
margin-top: 10px;
object-fit: contain;
}
.site .trio-editorial-palette {
display: grid;
gap: 3px;
margin-top: 9px;
}
.site .trio-editorial-palette i {
width: 100%;
}
.site .trio-editorial-relations {
display: grid;
gap: 11px;
margin-top: 17px;
padding-top: 14px;
border-top: 1px solid var(--trio-line);
}
.site .trio-editorial-column > footer {
margin-top: 22px;
padding: 8px 0 10px;
border-top: 4px solid var(--tc);
font-size: 7px;
letter-spacing: 0.16em;
text-align: right;
color: var(--trio-muted);
}
@media (max-width: 780px) {
.site .trio-layout-diagonal,
.site .trio-layout-cards,
.site .trio-layout-editorial {
padding-top: 68px;
}
.site .trio-collage {
border-inline: 0;
box-shadow: none;
}
.site .trio-collage-row,
.site .trio-collage-row-2,
.site .trio-collage-row-even {
grid-template-columns: 1fr;
}
.site .trio-collage-row-2 .trio-collage-copy,
.site .trio-collage-row-2 .trio-collage-figure,
.site .trio-collage-row-even .trio-collage-copy,
.site .trio-collage-row-even .trio-collage-figure {
grid-column: 1;
grid-row: auto;
}
.site .trio-collage-copy {
padding: 30px 28px 74px;
}
.site .trio-collage-figure,
.site .trio-collage-row-2 .trio-collage-figure,
.site .trio-collage-row-even .trio-collage-figure {
height: 310px;
min-height: 0;
}
.site .trio-collage-frame,
.site .trio-collage-row-2 .trio-collage-frame,
.site .trio-collage-row-even .trio-collage-frame {
clip-path: polygon(0 9%, 100% 0, 100% 100%, 0 100%);
}
.site .trio-collage-art-window {
left: -2%;
right: -2%;
height: 370px;
}
.site .trio-card-strip,
.site .trio-editorial-grid {
grid-template-columns: 1fr;
border-inline: 0;
box-shadow: none;
}
.site .trio-column-card {
padding-inline: 26px;
}
.site .trio-column-card + .trio-column-card,
.site .trio-editorial-column + .trio-editorial-column {
border-left: 0;
border-top: 1px solid var(--trio-line);
}
.site .trio-column-stage {
height: min(72vh, 520px);
min-height: 470px;
}
.site .trio-editorial-column {
padding-inline: 28px;
}
.site .trio-editorial-column > figure {
height: min(76vh, 600px);
margin-left: 92px;
padding: 26px 0 32px;
}
}
@media (max-width: 460px) {
.site .trio-layout-diagonal .trio-page-head h1,
.site .trio-layout-cards .trio-page-head h1,
.site .trio-layout-editorial .trio-page-head h1 {
font-size: 30px;
line-height: 1.06;
}
.site .trio-collage-relations {
grid-template-columns: 1fr;
}
.site .trio-collage-copy {
padding-inline: 22px;
}
.site .trio-column-card,
.site .trio-editorial-column {
padding-inline: 18px;
}
.site .trio-editorial-column > figure {
height: 540px;
margin-left: 72px;
padding: 26px 0 30px;
}
.site .trio-editorial-copy {
grid-template-columns: minmax(0, 1fr) 82px;
gap: 12px;
}
}
/* v0.3.285 — usable 2-person frame index and retained-frame navigation */
.site.theme-default .pair-index-page {
min-height: 100vh;
padding: 94px 24px max(100px, calc(env(safe-area-inset-bottom) + 86px));
color: var(--ui-text);
background:
radial-gradient(circle at 8% 4%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 30%),
var(--ui-page-bg);
}
.site.theme-default .pair-index-shell {
width: min(1120px, 100%);
margin: 0 auto;
}
.site.theme-default .pair-index-head {
max-width: 620px;
margin-bottom: 30px;
}
.site.theme-default .pair-index-head small {
color: var(--ui-text-muted);
font-size: 9px;
font-weight: 800;
letter-spacing: 0.22em;
}
.site.theme-default .pair-index-head h1 {
margin: 8px 0 10px;
color: var(--ui-text);
font: 600 clamp(38px, 6vw, 68px)/1.04 Georgia, "Noto Serif KR", serif;
}
.site.theme-default .pair-index-head p {
margin: 0;
color: var(--ui-text-muted);
font-size: 13px;
line-height: 1.7;
}
.site.theme-default .pair-index-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px;
}
.site.theme-default .pair-index-card {
min-width: 0;
padding: 0;
overflow: hidden;
border: 1px solid var(--ui-line);
border-radius: 22px;
color: var(--ui-text);
background: var(--ui-surface);
box-shadow: 0 18px 46px color-mix(in srgb, #000 9%, transparent);
text-align: left;
cursor: pointer;
transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.site.theme-default .pair-index-card:hover {
transform: translateY(-4px);
border-color: color-mix(in srgb, var(--a) 55%, var(--ui-line));
box-shadow: 0 24px 58px color-mix(in srgb, #000 14%, transparent);
}
.site.theme-default .pair-index-card > figure {
position: relative;
height: 270px;
margin: 0;
overflow: hidden;
background: linear-gradient(135deg, color-mix(in srgb, var(--a) 26%, var(--ui-surface-soft)), color-mix(in srgb, var(--b) 22%, var(--ui-surface-soft)));
}
.site.theme-default .pair-index-card > figure > img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transform: translate(var(--img-x, 0%), var(--img-y, 0%)) scale(var(--img-scale, 1));
transform-origin: center;
transition: transform 300ms ease;
}
.site.theme-default .pair-index-card:hover > figure > img {
transform: translate(var(--img-x, 0%), var(--img-y, 0%)) scale(calc(var(--img-scale, 1) * 1.025));
}
.site.theme-default .pair-index-card > figure > em {
position: absolute;
top: 15px;
right: 15px;
display: grid;
width: 36px;
height: 36px;
place-items: center;
border: 1px solid rgba(255,255,255,.55);
border-radius: 50%;
color: #fff;
background: rgba(20,18,21,.42);
backdrop-filter: blur(8px);
font: 700 9px/1 Arial, sans-serif;
letter-spacing: .08em;
}
.site.theme-default .pair-index-fallback {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 22px;
}
.site.theme-default .pair-index-fallback > span {
width: 112px;
height: 112px;
overflow: hidden;
border: 3px solid rgba(255,255,255,.72);
border-radius: 50%;
background: var(--ui-surface);
}
.site.theme-default .pair-index-fallback img {
width: 100%;
height: 100%;
object-fit: cover;
}
.site.theme-default .pair-index-fallback > i {
color: var(--ui-text-muted);
font: 400 24px/1 Georgia, serif;
}
.site.theme-default .pair-index-copy {
padding: 22px 24px 24px;
}
.site.theme-default .pair-index-copy > small {
color: color-mix(in srgb, var(--a) 62%, var(--ui-text));
font-size: 9px;
font-weight: 900;
letter-spacing: .12em;
}
.site.theme-default .pair-index-copy h2 {
margin: 8px 0 9px;
color: var(--ui-text);
font: 600 clamp(23px, 3vw, 34px)/1.15 Georgia, "Noto Serif KR", serif;
}
.site.theme-default .pair-index-copy > p {
min-height: 42px;
margin: 0;
color: var(--ui-text-muted);
font-size: 12px;
line-height: 1.72;
}
.site.theme-default .pair-index-members {
display: flex;
align-items: center;
gap: 8px;
margin-top: 16px;
color: var(--ui-text);
font-size: 11px;
font-weight: 800;
}
.site.theme-default .pair-index-members i {
color: var(--ui-text-muted);
font-family: Georgia, serif;
}
.site.theme-default .pair-index-keywords {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-top: 13px;
}
.site.theme-default .pair-index-keywords span {
padding: 5px 8px;
border: 1px solid var(--ui-line-soft);
border-radius: 999px;
color: var(--ui-text-muted);
background: var(--ui-surface-soft);
font-size: 9px;
}
.site.theme-default .pair-index-copy > strong {
display: flex;
justify-content: space-between;
margin-top: 20px;
padding-top: 15px;
border-top: 1px solid var(--ui-line-soft);
color: var(--ui-text);
font-size: 10px;
letter-spacing: .08em;
}
.site.theme-default .pair-index-empty {
grid-column: 1 / -1;
padding: 54px 28px;
border: 1px dashed var(--ui-line);
border-radius: 20px;
color: var(--ui-text-muted);
background: var(--ui-surface);
text-align: center;
}
.site.theme-default .pair-index-empty b {
display: block;
margin-bottom: 7px;
color: var(--ui-text);
}
.site.theme-default .pair-index-empty p {
margin: 0;
}
.site.theme-default .pair-list-back {
display: inline-flex;
align-items: center;
min-height: 34px;
margin: 0 0 16px;
padding: 0 13px;
border: 1px solid var(--ui-line, rgba(80,70,75,.2));
border-radius: 999px;
color: var(--ui-text, #28242a);
background: color-mix(in srgb, var(--ui-surface, #fff) 88%, transparent);
box-shadow: 0 7px 20px rgba(20,16,18,.06);
backdrop-filter: blur(12px);
font-size: 10px;
font-weight: 800;
cursor: pointer;
}
.site.theme-default .pair-layout-playlist .pair-list-back {
border-color: rgba(255,255,255,.25);
color: #fff;
background: rgba(15,16,21,.44);
}
.site.theme-default .pair-detail-cover {
position: relative;
height: 320px;
margin: 0 0 18px;
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--a) 20%, #d5ceca);
border-radius: 20px;
background: linear-gradient(120deg, color-mix(in srgb, var(--a) 20%, #eee), color-mix(in srgb, var(--b) 18%, #eee));
box-shadow: 0 18px 42px rgba(35,25,30,.1);
}
.site.theme-default .pair-detail-cover > img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
transform: translate(var(--img-x, 0%), var(--img-y, 0%)) scale(var(--img-scale, 1));
transform-origin: center;
}
.site.theme-default .pair-detail-cover > figcaption {
position: absolute;
inset: auto 0 0;
padding: 34px 22px 18px;
color: #fff;
background: linear-gradient(transparent, rgba(20,15,18,.72));
pointer-events: none;
}
.site.theme-default .pair-detail-cover > figcaption small,
.site.theme-default .pair-detail-cover > figcaption b {
display: block;
}
.site.theme-default .pair-detail-cover > figcaption small {
margin-bottom: 4px;
color: rgba(255,255,255,.72);
font-size: 8px;
letter-spacing: .16em;
}
.site.theme-default .pair-detail-cover > figcaption b {
font: 600 24px/1.1 Georgia, "Noto Serif KR", serif;
}
@media (max-width: 720px) {
.site.theme-default .pair-index-page {
padding: 78px 14px max(92px, calc(env(safe-area-inset-bottom) + 82px));
}
.site.theme-default .pair-index-head {
margin-bottom: 22px;
padding: 0 5px;
}
.site.theme-default .pair-index-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.site.theme-default .pair-index-card > figure {
height: 230px;
}
.site.theme-default .pair-index-copy {
padding: 19px 20px 21px;
}
.site.theme-default .pair-index-copy > p {
min-height: 0;
}
.site.theme-default .pair-detail-cover {
height: 230px;
border-radius: 15px;
}
.site.theme-default .pair-page-v4 .pair-list-back,
.site.theme-default .pair-preset .pair-list-back {
margin-left: 0;
}
}
/* lope v0.3.292 — unified supplied SVG icon set */
.editor-subtab {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
}
.editor-subtab-icon {
display: inline-grid;
place-items: center;
flex: 0 0 auto;
}
.editor-subtab-icon .ui-icon {
width: 13px;
height: 13px;
filter: brightness(0) invert(1);
opacity: .72;
}
.editor-subtab:hover .editor-subtab-icon .ui-icon {
opacity: 1;
}
.editor-subtab.on .editor-subtab-icon .ui-icon {
filter: brightness(0);
opacity: 1;
}
.button-ui-icon {
display: inline-block;
/* v0.3.324 — 사용자 피드백: 자동 부착 아이콘이 버튼 글자에 비해 전반적으로 살짝
커 보임. 다른 자리에서 이미 13px로 줄여 쓰던 값을 기본값으로 승격. */
width: 13px;
height: 13px;
vertical-align: -2px;
flex: 0 0 auto;
}
.icon-ebtn .button-ui-icon,
.drawer-close .button-ui-icon,
.relation-map-close-v19 .button-ui-icon,
.gallery-lightbox-close .button-ui-icon,
.vn-close .button-ui-icon,
.easter-sms-close .button-ui-icon,
.easter-error-close .button-ui-icon {
filter: brightness(0) invert(1) !important;
}
/* v0.3.324 — 관계도 팝업은 document.body 바로 아래(.site 바깥)에 붙어서 다크 모드
배경 규칙(.site.theme-default.dark-mode ...)이 안 걸리고, 항상 흰 배경(#fff)의
닫기 버튼입니다. 그런데 위 공용 규칙이 아이콘을 항상 흰색으로 뒤집어서 흰 배경
위에 흰 아이콘 = 안 보이는 X 버튼이 되던 문제. */
.relation-map-close-v19 .button-ui-icon {
filter: brightness(0) !important;
}
/* v0.3.335 — 이스터에그 "문자(SMS)" 카드도 항상 흰 배경(.easter-sms)인데 같은 공용
규칙이 X 아이콘을 흰색으로 뒤집어서 안 보였습니다. brightness(0) invert(60%)는
검정을 #999(회색)로 만들어 버튼 기본 텍스트색(color:#999)과 맞춥니다. */
.easter-sms-close .button-ui-icon {
filter: brightness(0) invert(60%) !important;
}
.easter-sms-close:hover .button-ui-icon {
filter: brightness(0) invert(33%) !important;
}
/* v0.3.324 — 이스터에그 "오류" 팝업의 닫기 버튼도 라이트 모드에서는 배경이 거의
흰색(--paper2)이라 흰 아이콘이 안 보였습니다. 다크 모드(body.dark-mode)는 배경이
이미 어두워서 흰 아이콘이 맞으므로 라이트 모드일 때만 검정으로 뒤집습니다. */
body:not(.dark-mode) .easter-error-close .button-ui-icon {
filter: brightness(0) !important;
}
.music-stream-play .button-ui-icon,
[data-music-widget-toggle] .button-ui-icon,
[data-music-widget-next] .button-ui-icon {
width: 13px;
height: 13px;
}
.vn-play-button { display:inline-flex; align-items:center; gap:6px; }
.tab-lock-back { display:inline-flex; align-items:center; justify-content:center; gap:6px; }
/* supplied action/control icon alignment
아이콘 자동 부착은 요소의 원래 레이아웃(display:grid 등)을 바꾸지 않습니다.
편집기의 실제 액션 버튼만 flex 정렬하고, 공개 페이지 카드/캘린더 버튼은
각 컴포넌트가 선언한 display와 text-align을 그대로 유지합니다. */
.lope-action-iconized { gap:5px; }
:is(.ebtn,.m-btn,.icon-ebtn,.ghost-btn,.light-btn).lope-action-iconized,
label.m-btn.lope-action-iconized,
a.ebtn.lope-action-iconized { display:inline-flex; align-items:center; justify-content:center; }
.lope-action-iconized.full { display:flex; width:100%; }
.lope-action-iconized .button-ui-icon { margin-right:1px; }
.tales-search { position:relative; }
.tales-search-icon { position:absolute; left:12px; top:50%; transform:translateY(-50%); display:grid; place-items:center; pointer-events:none; opacity:.55; z-index:1; }
.tales-search-icon .ui-icon { width:14px; height:14px; }
.tales-search:has(.tales-search-icon) input { padding-left:34px; }
.history-filter-icon { display:inline-grid; place-items:center; opacity:.6; }
.history-filter-icon .ui-icon { width:14px; height:14px; }
.trpg-sort-label { display:inline-flex !important; align-items:center; gap:5px; }
.trpg-sort-label .ui-icon { width:13px; height:13px; }
.bgm-volume-label { display:inline-flex !important; align-items:center; gap:5px; }
.bgm-volume-label .ui-icon { width:13px; height:13px; }
.au-world-icon { width:13px !important; height:13px !important; display:inline-block !important; }
.dark-mode-check-row > span { display:inline-flex; align-items:center; gap:6px; }
.dark-mode-check-row > span .ui-icon { width:14px; height:14px; filter:brightness(0) invert(1); }
.world-sticker-resize-handle .button-ui-icon, .world-sticker-rotate-handle .button-ui-icon { width:12px; height:12px; filter:brightness(0) invert(1); }
.world-sticker-resize-handle::before, .world-sticker-resize-handle::after { display:none !important; }
.ebtn.lope-action-iconized .button-ui-icon { filter:brightness(0) invert(1) !important; }
.ebtn.primary.lope-action-iconized .button-ui-icon { filter:brightness(0) !important; }
.m-btn.primary.lope-action-iconized .button-ui-icon { filter:brightness(0) invert(1) !important; }
.site.dark-mode .tales-search-icon .ui-icon,
.site.dark-mode .history-filter-icon .ui-icon,
.site.dark-mode .trpg-sort-label .ui-icon { filter:brightness(0) invert(1); }
/* lope v0.3.294 — account > achievements display-only UI */
.achievement-panel {
padding-bottom: 0;
}
.achievement-panel-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 12px;
margin: 2px 0 12px;
}
.achievement-panel-head > div > small {
display: block;
margin-bottom: 4px;
color: #686872;
font-size: 8px;
font-weight: 800;
letter-spacing: .16em;
}
.editor-drawer .achievement-panel-head h3 {
margin: 0;
color: #efeff2;
font-size: 14px;
letter-spacing: 0;
text-transform: none;
}
.achievement-panel-head > span {
min-width: 27px;
height: 22px;
padding: 0 8px;
border: 1px solid #303038;
border-radius: 999px;
display: inline-grid;
place-items: center;
background: #1b1b20;
color: #92929b;
font-size: 9px;
font-weight: 800;
}
.achievement-list {
display: grid;
gap: 7px;
}
.achievement-card {
min-width: 0;
min-height: 74px;
padding: 11px 12px;
border: 1px solid #2d2d34;
border-radius: 12px;
display: grid;
grid-template-columns: 38px minmax(0, 1fr);
gap: 11px;
align-items: center;
background: #1a1a1e;
}
.achievement-card-mark {
width: 38px;
height: 38px;
border: 1px solid #34343c;
border-radius: 11px;
display: grid;
place-items: center;
background: #222228;
}
.achievement-card-icon.ui-icon {
width: 20px;
height: 20px;
filter: brightness(0) invert(1);
opacity: .82;
}
.achievement-card-copy {
min-width: 0;
}
.achievement-card-copy > small {
display: block;
margin-bottom: 3px;
color: #64646d;
font-size: 7px;
font-weight: 800;
letter-spacing: .12em;
}
.achievement-card-copy > b {
display: block;
overflow: hidden;
color: #efeff2;
font-size: 11px;
line-height: 1.35;
text-overflow: ellipsis;
white-space: nowrap;
}
.achievement-card-copy > p {
margin: 4px 0 0;
color: #8f8f98;
font-size: 9px;
line-height: 1.45;
}
.achievement-card.is-secret {
border-style: dashed;
background: #17171b;
}
.achievement-card.is-secret .achievement-card-mark {
background: #1d1d22;
}
.achievement-card.is-secret .achievement-card-copy > b,
.achievement-card.is-secret .achievement-card-copy > p {
color: #686871;
letter-spacing: .08em;
}
/* v0.3.312 — TRPG detail only: left session summary + v2 minimal transcript */
.trpg-page:has(.trpg-reader-shell){padding-left:18px;padding-right:18px}
.trpg-reader-shell{width:min(1180px,96vw)!important;margin:0 auto!important;display:grid!important;grid-template-columns:238px minmax(0,1fr)!important;gap:18px!important;align-items:start!important;overflow:visible!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;padding:0!important}
.trpg-reader-shell:before{display:none!important}
.trpg-reader-sidebar{position:sticky!important;top:76px!important;min-width:0!important}
.trpg-reader-sidebar .trpg-back{width:100%!important;margin:0 0 8px!important;padding:9px 12px!important;border:1px solid rgba(35,31,34,.09)!important;border-radius:10px!important;background:rgba(255,255,255,.76)!important;text-align:left!important;cursor:pointer!important}
.trpg-reader-summary{min-width:0!important;padding:12px 12px 16px!important;border:1px solid rgba(35,31,34,.09)!important;border-radius:16px!important;background:rgba(255,255,255,.88)!important;box-shadow:0 12px 34px rgba(31,27,30,.045)!important}
.trpg-reader-cover{position:relative!important;width:100%!important;aspect-ratio:4/3!important;min-height:0!important;margin:0 0 15px!important;overflow:hidden!important;border-radius:11px!important;background:color-mix(in srgb,var(--accent) 10%,#ece9e6)!important;box-shadow:none!important}
.trpg-reader-cover:after{display:none!important}
.trpg-reader-cover img{width:100%!important;height:100%!important;display:block!important;object-fit:cover!important}
.trpg-reader-cover.empty{display:grid!important;place-items:center!important;align-content:center!important;gap:2px!important;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 13%,#fff),#f6f4f2)!important}
.trpg-reader-cover.empty:before{content:""!important;display:block!important;position:absolute!important;inset:9px!important;border:1px solid color-mix(in srgb,var(--accent) 24%,#ddd)!important;border-radius:8px!important;background:none!important}
.trpg-reader-cover.empty b{position:relative!important;z-index:1!important;color:var(--accent)!important;font:700 26px/1 Georgia,serif!important;letter-spacing:.08em!important}
.trpg-reader-cover.empty span{position:relative!important;z-index:1!important;color:#aaa39e!important;font-size:8px!important;font-weight:800!important;letter-spacing:.24em!important}
.trpg-reader-summary>small{display:block!important;margin-bottom:5px!important;color:var(--accent)!important;font-size:9px!important;font-weight:800!important;line-height:1.3!important;letter-spacing:.16em!important;text-transform:uppercase!important}
.trpg-reader-summary>h1{margin:0!important;color:#242126!important;font:700 25px/1.12 Georgia,"Noto Serif KR",serif!important;letter-spacing:0!important;overflow-wrap:anywhere!important}
.trpg-reader-summary>p{margin:8px 0 0!important;color:#817a76!important;font-size:11px!important;line-height:1.65!important}
.trpg-reader-summary .timeline-ref-tags{margin-top:10px!important}
.trpg-reader-summary dl{display:grid!important;gap:0!important;margin:15px 0 0!important;padding-top:3px!important;border-top:1px solid rgba(35,31,34,.08)!important}
.trpg-reader-summary dl>div{display:grid!important;grid-template-columns:46px minmax(0,1fr)!important;gap:8px!important;padding:8px 1px!important;border-bottom:1px solid rgba(35,31,34,.055)!important}
.trpg-reader-summary dt{color:#aaa39e!important;font-size:8px!important;font-weight:800!important;letter-spacing:.12em!important}.trpg-reader-summary dd{min-width:0!important;margin:0!important;color:#615b57!important;font-size:10px!important;line-height:1.45!important;text-align:right!important;overflow-wrap:anywhere!important}
.trpg-reader-main{min-width:0!important;overflow:hidden!important;border:1px solid rgba(35,31,34,.09)!important;border-radius:16px!important;background:#fff!important;box-shadow:0 12px 34px rgba(31,27,30,.035)!important}
.trpg-transcript-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:16px!important;min-height:56px!important;padding:11px 18px!important;border-bottom:1px solid #ece9e7!important;background:#fff!important}
.trpg-transcript-head>div{display:flex!important;flex-direction:column!important;gap:2px!important}.trpg-transcript-head small{color:var(--accent)!important;font-size:8px!important;font-weight:900!important;letter-spacing:.16em!important}.trpg-transcript-head b{color:#55504d!important;font-size:11px!important}.trpg-transcript-head>span{color:#aaa39e!important;font-size:9px!important}
.trpg-reader-main .trpg-html-view{display:block!important;width:100%!important;height:420px;min-height:420px!important;border:0!important;background:#fff!important}
.theme-youth .trpg-theme-reader .page-shell{max-width:1180px!important}.theme-youth .trpg-reader-youth .trpg-reader-summary,.theme-youth .trpg-reader-youth .trpg-reader-main{border-color:var(--yt-line)!important;box-shadow:none!important}.theme-youth .trpg-reader-youth .trpg-reader-summary>small,.theme-youth .trpg-reader-youth .trpg-transcript-head small{color:var(--yt-blue)!important}.theme-youth .trpg-reader-youth .trpg-reader-sidebar .trpg-back{border-color:var(--yt-line)!important;border-radius:4px!important;background:#fff!important}.theme-youth .trpg-reader-youth .trpg-reader-main,.theme-youth .trpg-reader-youth .trpg-reader-summary{border-radius:4px!important}
.site.theme-default.dark-mode .trpg-reader-summary,.site.theme-default.dark-mode .trpg-reader-main,.site.theme-default.dark-mode .trpg-reader-sidebar .trpg-back{background:var(--ui-surface)!important;border-color:var(--ui-line)!important}.site.theme-default.dark-mode .trpg-reader-summary>h1,.site.theme-default.dark-mode .trpg-reader-summary dd,.site.theme-default.dark-mode .trpg-transcript-head b{color:var(--ui-text)!important}.site.theme-default.dark-mode .trpg-reader-summary>p,.site.theme-default.dark-mode .trpg-reader-summary dt,.site.theme-default.dark-mode .trpg-transcript-head>span{color:var(--ui-text-muted)!important}
@media(max-width:860px){.trpg-reader-shell{width:min(760px,94vw)!important;grid-template-columns:1fr!important;gap:12px!important}.trpg-reader-sidebar{position:static!important}.trpg-reader-sidebar .trpg-back{width:auto!important}.trpg-reader-summary{display:grid!important;grid-template-columns:112px minmax(0,1fr)!important;column-gap:14px!important;align-items:start!important}.trpg-reader-cover{grid-row:1/span 6!important;width:112px!important;margin:0!important}.trpg-reader-summary>small,.trpg-reader-summary>h1,.trpg-reader-summary>p,.trpg-reader-summary>.timeline-ref-tags,.trpg-reader-summary>dl{grid-column:2!important}.trpg-reader-summary dl{margin-top:10px!important}}
@media(max-width:600px){.trpg-page:has(.trpg-reader-shell){padding-left:10px!important;padding-right:10px!important}.trpg-reader-shell{width:100%!important}.trpg-reader-summary{grid-template-columns:78px minmax(0,1fr)!important;gap:10px 12px!important;padding:10px!important}.trpg-reader-cover{width:78px!important;border-radius:8px!important}.trpg-reader-summary>h1{font-size:20px!important}.trpg-reader-summary dl{display:none!important}.trpg-transcript-head{min-height:50px!important;padding:10px 14px!important}.trpg-transcript-head>span{display:none!important}.trpg-reader-main .trpg-html-view{min-height:360px!important}}