@charset "utf-8";
.cft-sf {
    --sf-font: var(--content-font-family, sans-serif);
    --sf-mono: 'SFMono-Regular', Consolas, monospace;
    --sf-radius: 3px;
    --sf-gap: 24px;
    --sf-motion: 220ms;
    --sf-clear: transparent;
    --sf-shadow: none;
    --sf-surface: var(--container-bg-color, #ffffff);
    --sf-stage: var(--card-bg-color, #f3f4f3);
    --sf-raised: var(--card-bg-color, #e8eae8);
    --sf-text: var(--content-font-color, #272928);
    --sf-muted: rgb(from var(--content-font-color, #272928) r g b / 70%);
    --sf-line: var(--container-border-color, #c6ccc8);
    --sf-mark: var(--content-font-color, #555a57);
    --sf-accent: var(--sf-mark);
    --ci-primary: var(--sf-accent);
    --ci-primary-light: rgb(from var(--sf-accent) r g b / 15%);
    --ci-radius: var(--sf-radius);
    --ci-radius-lg: var(--sf-radius);
    --ci-bg: var(--sf-surface);
    --ci-text: var(--sf-text);
    --ci-text-muted: var(--sf-muted);
    --ci-border: var(--sf-line);
    --ci-shadow: var(--sf-shadow);
    --ci-shadow-lg: var(--sf-shadow);
    font-family: var(--sf-font);
}
.cft-view-wrap.cft-sf.black {
    color-scheme: dark;
    --sf-stage: #141415;
    --sf-surface: #1d1d1f;
    --sf-raised: #29292b;
    --sf-text: #ececea;
    --sf-muted: #aaa9a6;
    --sf-line: #3b3b3d;
    --sf-mark: #c4b4a9;
    --sf-backdrop: #0c0c0ded;
    --sf-view-background: linear-gradient(to bottom, #080809 0%, #303032 100%);
}
.cft-view-wrap.cft-sf.white {
    color-scheme: light;
    --sf-stage: #ecefee;
    --sf-surface: #f8faf7;
    --sf-raised: #dfe5e2;
    --sf-text: #2b3330;
    --sf-muted: #59645e;
    --sf-line: #bcc7c0;
    --sf-mark: #756458;
    --sf-backdrop: #ecefeeed;
    --sf-view-background: linear-gradient(to bottom, #e6e6e7 0%, #ffffff 100%);
}
.cft-view-wrap.cft-sf {
    --panel-bg: var(--sf-surface);
    --panel-text: var(--sf-text);
    --panel-border: var(--sf-line);
    --panel-muted: var(--sf-muted);
    --panel-hover: var(--sf-raised);
    /* Existing pack widgets and generated dialogs consume these shared tokens. */
    --card-bg-color: var(--sf-surface);
    --card-border-color: var(--sf-line);
    --text-secondary: var(--sf-muted);
    --text-muted: var(--sf-muted);
    --sf-rail: 108px;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    padding: 20px;
    box-sizing: border-box;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 0;
    overflow: hidden;
    background: var(--sf-view-background, var(--sf-stage));
    color: var(--sf-text);
    isolation: isolate;
    font-family: var(--sf-font);
}
.cft-sf *, .cft-sf *::before, .cft-sf *::after {box-sizing: border-box;}
.cft-view-wrap.cft-sf.cft-sf-no-dialogue {grid-template-rows: auto minmax(0, 1fr);}
.cft-sf .cft-view-bg {position: absolute; inset: 0; z-index: -1; opacity: .14; filter: grayscale(1); transform: none; pointer-events: none;}
.cft-sf .cft-action-bar {
    position: relative; inset: auto; grid-row: 1; width: auto; min-height: 58px; height: auto;
    padding: 10px 18px; border: 1px solid var(--sf-line); background: var(--sf-surface);
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; z-index: 60;
}
.cft-sf .cft-action-left, .cft-sf .cft-action-right {gap: 10px; min-width: 0;}
.cft-sf .cft-action-left {flex: 1 1 auto;}
.cft-sf-board-name {font-size: 14px; font-weight: 600; max-width: 24ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.cft-sf .cft-btn-back, .cft-sf .cft-btn-action, .cft-sf .cft-bgm-btn,
.cft-sf .cft-bottom-buttons button, .cft-sf .cft-bottom-buttons a, .cft-sf-panel-close {
    width: 34px; height: 34px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    padding: 0; color: var(--sf-text); background: var(--sf-raised); border: 1px solid var(--sf-line);
    border-radius: var(--sf-radius); box-shadow: none; font-size: 13px; cursor: pointer;
}
.cft-sf .cft-btn-action.active {color: var(--sf-text); border-color: var(--sf-mark); background: var(--sf-raised);}
.cft-sf .cft-view-container {
    position: relative; inset: auto; grid-row: 2; display: grid; grid-template-columns: var(--sf-rail) minmax(0, 1fr);
    min-height: 0; min-width: 0; border: 1px solid var(--sf-line); border-top: 0; overflow: hidden;
    background: transparent; z-index: 1;
}
.cft-sf .cft-sidebar {
    position: relative; inset: auto; width: auto; grid-column: 1; grid-row: 1;
    min-height: 0; padding: 22px 10px; border-right: 1px solid var(--sf-line); background: var(--sf-surface);
    backdrop-filter: none; overflow-y: auto; z-index: 30;
}
.cft-sf .cft-tab-nav {gap: 5px; width: 100%; counter-reset: sf-tab;}
.cft-sf :is(.cft-tab-btn,.cft-sf-add-secret) {
    position: relative; display: flex; flex-direction: column; justify-content: center; gap: 4px;
    padding: 10px 10px; min-height: 56px; margin: 0; border: 1px solid var(--sf-clear); border-radius: 1px;
    background: var(--sf-clear); color: var(--sf-muted); font-size: 12px; line-height: 1.4;
    transition: background var(--sf-motion), color var(--sf-motion); white-space: nowrap; max-width: 100%; text-align: left; cursor: pointer;
}
.cft-sf .cft-tab-btn::before {content: none;}
.cft-sf .cft-tab-btn::after {content: counter(sf-tab, decimal-leading-zero); counter-increment: sf-tab; order: -1; font: 8px var(--sf-mono); letter-spacing: 1px;}
.cft-sf .cft-tab-text {overflow: hidden; text-overflow: ellipsis; max-width: 100%;}
.cft-sf .cft-tab-btn.active {background: var(--sf-raised); border-color: var(--sf-line); color: var(--sf-text); box-shadow: inset 2px 0 var(--sf-accent);}
.cft-sf :is(.cft-tab-btn,.cft-sf-add-secret):hover {background: var(--sf-raised); color: var(--sf-text);}
.cft-sf .cft-main, .cft-sf.tab-open .cft-main {
    position: relative; inset: auto; width: auto; height: 100%; min-width: 0; min-height: 0; grid-area: 1 / 1 / 2 / 3;
    overflow: hidden; z-index: auto;
}
.cft-sf .cft-main::before {content: ''; position: absolute; inset: 24px 24px 24px calc(var(--sf-rail) + 24px); border-top: 1px solid var(--sf-line); border-bottom: 1px solid var(--sf-line); pointer-events: none;}
.cft-sf .cft-main::after {content: ''; position: absolute; right: 24px; top: 24px; bottom: 24px; width: 7px; background: repeating-linear-gradient(to bottom,var(--sf-line) 0 1px,var(--sf-clear) 1px 12px); pointer-events: none;}
.cft-sf .cft-body-area, .cft-sf.panel-closed .cft-body-area, .cft-sf .cft-body-area.shifted {
    position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; padding: 0; transform: none;
    display: block; overflow-y: auto; overflow-x: hidden; overscroll-behavior-y: contain;
    scrollbar-width: none; -ms-overflow-style: none; pointer-events: auto; transition: none;
}
.cft-sf .cft-body-area::-webkit-scrollbar {display: none; width: 0; height: 0;}
/* Full-stage image layer. Intrinsic dimensions, limited only by the stage width. */
.cft-sf .cft-body-image {width: 100%; height: auto; min-height: 100%; max-width: none; display: flex; align-items: flex-start; justify-content: flex-end; padding: 28px clamp(24px, 5vw, 88px) 32px;}
.cft-sf .cft-body-image img {display: block; width: auto; height: auto; max-width: 100%; max-height: none; flex: 0 0 auto; object-fit: initial; object-position: top center; filter: none; user-select: none;}
.cft-sf.cft-sf-interactive .cft-main, .cft-sf.cft-sf-interactive .cft-info-panel, .cft-sf.cft-sf-interactive .cft-sf-dialogue {cursor: pointer;}
.cft-sf .cft-info-panel {
    position: absolute; top: 24px; bottom: 24px; left: calc(var(--sf-rail) + 32px); right: auto;
    width: calc((100% - var(--sf-rail)) * .45 - 32px); padding: 0 4px 0 0;
    background: var(--sf-clear); backdrop-filter: none; overflow: auto; display: flex; flex-direction: column;
    align-items: flex-start; gap: 20px; z-index: 10; transform: none; opacity: 1;
    transition: opacity var(--sf-motion); visibility: visible; min-width: 0;
}
.cft-sf.tab-open .cft-info-panel {opacity: 0; visibility: hidden; pointer-events: none;}
.cft-sf-portrait {position: relative; margin: 0; width: 150px; max-width: 100%; flex: 0 0 auto; min-height: 0; border: 1px solid var(--sf-line); border-radius: 5px; padding: 9px; background: rgb(from var(--sf-stage) r g b / 40%); box-shadow: inset 0 0 0 2px rgb(from var(--sf-stage) r g b / 40%);}
.cft-sf-portrait img {display: block; width: 100%; height: auto; max-width: 150px; border: 1px solid var(--sf-line);}
.cft-sf .cft-name-area {text-align: left; width: 100%; min-width: 0; margin: 0;}
.cft-sf-identity-meta {display: flex; gap: 10px 14px; flex-wrap: wrap; align-items: center; margin-bottom: 12px;}
.cft-sf .cft-info-rank {font-size: 13px; letter-spacing: 3px; color: var(--sf-mark); line-height: 1.6; justify-content: flex-start;}
.cft-sf .cft-char-name-kr {font: 500 16px/1.5 var(--sf-font); letter-spacing: .04em; color: var(--sf-muted); margin: 0 0 8px; overflow-wrap: anywhere; min-width: 0;}
.cft-sf .cft-char-name-en, .cft-sf .cft-char-name-en.cjk-ja, .cft-sf .cft-char-name-en.cjk-zh {font: 650 clamp(32px, 4vw, 64px)/1.08 var(--sf-font); font-style: normal; letter-spacing: -.035em; padding: 0; margin: 0; color: var(--sf-text); overflow-wrap: anywhere;}
.cft-sf .cft-basic-info-line {text-align: left; font-size: 12px; line-height: 1.8; color: var(--sf-muted); margin: 0; width: 100%; overflow-wrap: anywhere;}
.cft-sf .cft-title-area {margin: 0; max-width: 100%;}
.cft-sf .cft-title-current {padding: 0; border: 0; background: none; font-size: 12px; text-align: left;}
.cft-sf .cft-title-badge {font-size: 12px; line-height: 1.6; color: var(--title-color, var(--sf-mark)); overflow-wrap: anywhere;}
.cft-sf .cft-title-dropdown {left: 0; right: auto; top: 100%; width: min(260px, 100%); min-width: 150px; background: var(--sf-surface); color: var(--sf-text); border: 1px solid var(--sf-line); border-radius: var(--sf-radius); z-index: 65;}
.cft-sf .cft-class-badge {margin-top: 14px; border-radius: var(--sf-radius); font-size: 11px; background: var(--sf-raised); color: var(--sf-text); border: 1px solid var(--sf-line);}
.cft-sf .cft-tab-panel, .cft-sf.white .cft-tab-panel {
    position: absolute; left: calc(var(--sf-rail) + 24px); right: auto; top: 24px; bottom: 24px; width: calc((100% - var(--sf-rail)) * .52 - 24px); height: auto;
    max-width: none; background: var(--sf-surface); border: 1px solid var(--sf-line); border-radius: var(--sf-radius);
    transform: translateX(-8px); opacity: 0; visibility: hidden; pointer-events: none; z-index: 40;
    display: flex; flex-direction: column; overflow: hidden; transition: opacity var(--sf-motion), transform var(--sf-motion), visibility var(--sf-motion);
    cursor: auto;
}
.cft-sf .cft-tab-panel.open {transform: none; opacity: 1; visibility: visible; pointer-events: auto;}
.cft-sf-panel-header {padding: 17px 22px; border-bottom: 1px solid var(--sf-line); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-shrink: 0;}
.cft-sf-panel-header h2 {font: 600 21px/1.4 var(--sf-font); color: var(--sf-text); margin: 0; overflow-wrap: anywhere; min-width: 0;}
.cft-sf-panel-close {font-size: 24px;}
.cft-sf .cft-tab-panel-content {padding: 22px; max-width: 100%; min-height: 0; flex: 1; overflow-y: auto; overflow-x: clip; overscroll-behavior: contain; scrollbar-gutter: stable;}
.cft-sf .cft-tab-body {font: 13px/1.9 var(--sf-font); color: var(--sf-text); min-width: 0; overflow-wrap: anywhere;}
.cft-sf .cft-tab-body img, .cft-sf .cft-tab-body video {max-width: 100%; height: auto;}
.cft-sf .cft-iframe-container {height: max(300px, 50vh); min-height: 0;}
.cft-sf .cft-iframe-container iframe {width: 100%; height: 100%;}
.cft-sf .cft-stats-grid, .cft-sf .cft-stats-grid.custom {display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; width: 100%;}
.cft-sf .cft-stat-item {padding: 14px; border: 1px solid var(--sf-line); border-radius: var(--sf-radius); background: var(--sf-stage); min-width: 0;}
.cft-sf .cft-stat-header {display: flex; flex-direction: column; align-items: flex-start; gap: 9px; min-width: 0; margin: 0;}
.cft-sf .cft-stat-name {font-size: 12px; color: var(--sf-muted); overflow-wrap: anywhere; max-width: 100%;}
.cft-sf .cft-stat-value {display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font: 23px/1.3 var(--sf-mono); color: var(--sf-text); max-width: 100%; overflow-wrap: anywhere;}
.cft-sf .stat-breakdown {font-size: 10px; color: var(--sf-muted);}
.cft-sf-section-title {font: 600 13px/1.5 var(--sf-font); margin: 24px 0 12px; color: var(--sf-text);}
.cft-sf-section-title:first-child {margin-top: 0;}
.cft-sf-resources {margin-bottom: 24px;}
.cft-sf-resource {padding: 10px 0;}
.cft-sf-resource-heading {display: flex; justify-content: space-between; gap: 10px; color: var(--sf-text); font-size: 12px; margin-bottom: 9px;}
.cft-sf-resource-heading > span:last-child {font-family: var(--sf-mono);}
.cft-sf-resource-heading small {color: var(--sf-muted);}
.cft-sf-resource-track {height: 5px; background: var(--sf-line); position: relative; overflow: hidden;}
.cft-sf-resource-track > span {height: 100%; display: block; background: var(--sf-mark);}
.cft-sf-resource-track::after {content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg,var(--sf-clear) 0 8px,var(--sf-surface) 8px 10px);}
.cft-sf .cft-stat-points-box, .cft-sf.white .cft-stat-points-box,
.cft-sf .cft-skill-points-box, .cft-sf .cft-stat-confirm-box, .cft-sf .cft-skill-confirm-box {background: var(--sf-raised); border: 1px solid var(--sf-line); color: var(--sf-text); border-radius: var(--sf-radius); flex-wrap: wrap;}
.cft-sf .cft-skills-grid {min-width: 0;}
.cft-sf .cft-skill-item, .cft-sf .cft-relation-card {background: var(--sf-stage); border: 1px solid var(--sf-line); border-radius: var(--sf-radius); color: var(--sf-text);}
.cft-sf .cft-inventory {margin: 0;}
/* Let the tab panel scroll the full inventory instead of clipping it to 300px. */
.cft-sf .cft-inventory-grid {grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; max-height: none; overflow: visible;}
.cft-sf .cft-inventory-slot {background: var(--sf-raised); border-color: var(--sf-line); border-radius: var(--sf-radius);}
.cft-sf .cft-inventory-tabs {flex-wrap: wrap; overflow: visible;}
.cft-sf .cft-inv-tab {white-space: nowrap; border-radius: var(--sf-radius); color: var(--sf-muted); background: var(--sf-stage); border: 1px solid var(--sf-line);}
.cft-sf .cft-inv-tab.active {background: var(--sf-raised); color: var(--sf-text); border-color: var(--sf-mark);}
/* Dialogue floats over the image stage, entirely inside the navigation rail. */
.cft-sf .cft-sf-dialogue {
    position: absolute; left: calc(var(--sf-rail) + var(--sf-overlay-inset)); right: var(--sf-overlay-inset); bottom: 0;
    min-width: 0; max-height: min(30dvh, 250px); border: 0; border-radius: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .92) 0%, rgba(0, 0, 0, .68) 45%, rgba(0, 0, 0, 0) 100%);
    color: #fff; z-index: 35; overflow: auto; scrollbar-width: none;
}
.cft-sf.white .cft-sf-dialogue {background: linear-gradient(to top, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .76) 45%, rgba(255, 255, 255, 0) 100%); color: #111;}
.cft-sf .cft-sf-dialogue::-webkit-scrollbar {display: none;}
.cft-sf-speech {padding: 40px 32px 20px; min-width: 0; text-align: center;}
.cft-sf .cft-oneline-text {font: 500 clamp(21px,2vw,28px)/1.65 var(--sf-font); letter-spacing: -.025em; color: inherit; padding: 0; margin: 0; text-shadow: none; max-width: 100%; overflow-wrap: anywhere; white-space: pre-line;}
.cft-sf-line-enter {animation: cft-sf-line-enter 220ms ease-out;}
@keyframes cft-sf-line-enter {from {opacity: .35; transform: translateY(3px);} to {opacity: 1; transform: none;}}
.cft-sf .cft-bottom-buttons {position: absolute; top: 28px; bottom: auto; right: 112px; display: flex; flex-direction: row; gap: 6px; z-index: 70;}
.cft-sf .cft-etc-list {top: calc(100% + 12px); bottom: auto; right: 0; border-radius: var(--sf-radius); background: var(--sf-surface); border-color: var(--sf-line);}
.cft-sf .cft-wardrobe-overlay {background: var(--sf-backdrop);}
.cft-sf .cft-wardrobe-content {background: var(--sf-surface); border: 1px solid var(--sf-line); border-radius: var(--sf-radius); color: var(--sf-text);}
.cft-sf .cft-wardrobe-item {background: var(--sf-stage); border: 1px solid var(--sf-line); border-radius: var(--sf-radius);}
.cft-sf button:hover, .cft-sf a.cft-btn-back:hover {filter: none;}
.cft-sf :is(button,a,input,textarea,select,[tabindex]):focus-visible {outline: 2px solid var(--sf-mark); outline-offset: 3px;}
.cft-sf button:disabled {opacity: .45; cursor: not-allowed;}
.cft-sf button:active:not(:disabled) {transform: translateY(1px);}
.cft-sf :is(.cft-info-panel,.cft-tab-panel-content,.cft-sidebar,.cft-sf-speech) {scrollbar-width: thin; scrollbar-color: var(--sf-line) var(--sf-clear);}
.cft-sf :is(.cft-info-panel,.cft-tab-panel-content,.cft-sidebar,.cft-sf-speech)::-webkit-scrollbar {display: block; width: 5px;}
.cft-sf :is(.cft-info-panel,.cft-tab-panel-content,.cft-sidebar,.cft-sf-speech)::-webkit-scrollbar-thumb {background: var(--sf-line); border-radius: var(--sf-radius);}
/* List/write inherit site colors; detail keeps the post's existing white/black choice. */
.cft-list-wrap.cft-sf {padding: 32px;}
.cft-sf .cft-card {border: 1px solid var(--sf-line); border-radius: var(--sf-radius); box-shadow: none; background: var(--sf-surface);}
.cft-sf .cft-card:hover {transform: translateY(-2px); box-shadow: none;}
.cft-sf .cft-card-cover {border-radius: 0;}
.cft-sf .cft-card-name {font-family: var(--sf-font); font-style: normal;}
.cft-sf .cft-card-title {font-family: var(--sf-font);}
.cft-sf .cft-category a {border-radius: var(--sf-radius);}
.cft-sf .cft-category a.active {background: var(--sf-raised); border-color: var(--sf-mark); color: var(--sf-text);}
.cft-write-wrap.cft-sf {max-width: 1000px;}
.cft-sf .cft-section, .cft-sf .cft-profile-option .cft-option-box {border-radius: var(--sf-radius); background: var(--sf-surface); border: 1px solid var(--sf-line); box-shadow: none;}
.cft-sf .cft-profile-source-section {border-style: solid; background: var(--sf-surface);}
.cft-sf .cft-profile-option input:checked + .cft-option-box {background: var(--sf-raised); border-color: var(--sf-mark);}
.cft-sf .cft-profile-option input:checked + .cft-option-box i {color: var(--sf-text);}
.cft-sf .cft-section-title {font-family: var(--sf-font);}
.cft-sf .cft-input, .cft-sf .cft-select, .cft-sf .cft-textarea {border-radius: var(--sf-radius); background: var(--sf-stage); color: var(--sf-text); border-color: var(--sf-line);}
@media (max-width: 1100px) {
    .cft-view-wrap.cft-sf {--sf-rail: 90px; padding: 18px;}
    .cft-sf .cft-action-bar {min-height: 54px; padding: 8px 12px;}
    .cft-sf .cft-info-panel {left: calc(var(--sf-rail) + 22px); width: calc((100% - var(--sf-rail)) * .46 - 24px); top: 22px; bottom: 22px; gap: 16px;}
    .cft-sf .cft-tab-panel, .cft-sf.white .cft-tab-panel {left: calc(var(--sf-rail) + 18px); top: 18px; bottom: 18px; width: calc((100% - var(--sf-rail)) * .53 - 18px);}
    .cft-sf .cft-sidebar {padding: 20px 6px;}
    .cft-sf :is(.cft-tab-btn,.cft-sf-add-secret) {font-size: 11px; padding: 10px 7px;}
    .cft-sf .cft-bottom-buttons {top: 20px; right: 103px;}
    .cft-sf-board-name {max-width: 16ch;}
    .cft-sf .cft-tab-panel-content {padding: 18px;}
    .cft-sf .cft-stat-item {padding: 12px;}
    .cft-sf .cft-stat-value {font-size: 20px;}
}
@media (max-width: 768px) {
    .cft-view-wrap.cft-sf {--sf-rail: 70px; padding: 14px;}
    .cft-sf .cft-action-bar {min-height: 95px; padding: 8px 10px 45px; gap: 6px;}
    .cft-sf .cft-action-left {gap: 7px;}
    .cft-sf-board-name {max-width: 15ch; font-size: 12px;}
    .cft-sf .cft-action-right {gap: 5px;}
    .cft-sf .cft-bottom-buttons {top: 59px; left: 17px; right: auto; gap: 5px;}
    .cft-sf .cft-bottom-buttons :is(button,a) {width: 30px; height: 30px; font-size: 11px;}
    .cft-sf .cft-info-panel {left: calc(var(--sf-rail) + 12px); width: calc((100% - var(--sf-rail)) * .62); top: 14px; bottom: 14px; padding-right: 2px; gap: 12px; background: none; transform: none; opacity: 1; pointer-events: auto;}
    .cft-sf.tab-open .cft-info-panel {opacity: 0; pointer-events: none;}
    .cft-sf .cft-name-area {text-align: left; margin: 0;}
    .cft-sf .cft-char-name-kr {font-size: 13px; margin-bottom: 7px; line-height: 1.5;}
    .cft-sf .cft-char-name-en, .cft-sf .cft-char-name-en.cjk-ja, .cft-sf .cft-char-name-en.cjk-zh {font-size: clamp(28px,7vw,44px); letter-spacing: -.025em; line-height: 1.1;}
    .cft-sf .cft-title-badge {font-size: 10px;}
    .cft-sf .cft-info-rank {font-size: 10px; letter-spacing: 1px;}
    .cft-sf-identity-meta {gap: 5px 8px; margin-bottom: 9px;}
    .cft-sf .cft-basic-info-line {font-size: 10px; line-height: 1.8; margin: 0;}
    .cft-sf .cft-class-badge {font-size: 10px; margin-top: 9px;}
    .cft-sf .cft-tab-panel, .cft-sf.white .cft-tab-panel {left: calc(var(--sf-rail) + 9px); right: 9px; top: 33%; bottom: 10px; width: auto; height: auto; max-width: none;}
    .cft-sf-panel-header {padding: 10px 12px; gap: 8px;}
    .cft-sf-panel-header h2 {font-size: 16px;}
    .cft-sf-panel-close {width: 30px; height: 30px;}
    .cft-sf .cft-tab-panel-content {padding: 12px;}
    .cft-sf .cft-tab-body {font-size: 12px; line-height: 1.85;}
    .cft-sf .cft-sidebar {padding: 15px 4px;}
    .cft-sf :is(.cft-tab-btn,.cft-sf-add-secret) {font-size: 10px; min-height: 52px; padding: 8px 4px; gap: 4px;}
    .cft-sf .cft-stats-grid, .cft-sf .cft-stats-grid.custom {grid-template-columns: minmax(0,1fr); gap: 6px;}
    .cft-sf .cft-stat-header {flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px;}
    .cft-sf .cft-stat-value {font-size: 19px;}
    .cft-sf .cft-stat-name {font-size: 11px;}
    .cft-sf .cft-oneline-text {font-size: 19px; line-height: 1.65; padding: 0; margin: 0;}
    .cft-sf .cft-inventory-grid {gap: 3px;}
    .cft-sf .cft-inventory-slot {min-width: 0;}
    .cft-list-wrap.cft-sf {padding: 18px 12px;}
    .cft-write-wrap.cft-sf {padding: 16px 10px;}
}
@media (max-width: 375px) {
    .cft-view-wrap.cft-sf {--sf-rail: 62px;}
    .cft-sf :is(.cft-tab-btn,.cft-sf-add-secret) {font-size: 9px; padding-inline: 3px;}
    .cft-sf .cft-oneline-text {font-size: 18px;}
    .cft-sf .cft-bgm-volume {width: 40px;}
    .cft-sf-board-name {max-width: 11ch;}
}
@media (prefers-reduced-motion: reduce) {
    .cft-sf *, .cft-sf *::before, .cft-sf *::after {animation: none !important; transition: none !important; scroll-behavior: auto !important;}
}

/* Resolve inherited layout rules explicitly; action tools participate in header flow. */
.cft-sf .cft-action-right {flex-wrap: wrap; justify-content: flex-end;}
.cft-sf .cft-bottom-buttons {position: static; inset: auto; margin: 0; flex-wrap: wrap; gap: 6px;}
.cft-sf .cft-action-left {flex-wrap: wrap;}
.cft-sf .cft-tab-text {font-size: inherit; text-shadow: none;}
.cft-sf :is(.cft-tab-btn,.cft-sf-add-secret) {backdrop-filter: none;}
.cft-sf .cft-info-panel .cft-name-area, .cft-sf .cft-info-panel .cft-basic-info-line {opacity: 1;}
.cft-sf .cft-filter-btn, .cft-sf .cft-filter-select, .cft-sf .cft-filter-reset {border-radius: var(--sf-radius);}
.cft-sf .cft-filter-label {color: var(--sf-muted);}
.cft-sf .cft-card-cover {background: var(--sf-raised);}
@media (max-width: 768px) {
    .cft-sf .cft-action-bar {min-height: 0; padding: 8px 10px;}
    .cft-sf .cft-action-left {flex-basis: 100%;}
    .cft-sf .cft-action-right {justify-content: flex-start; gap: 5px;}
    .cft-sf .cft-bottom-buttons {position: static; inset: auto; flex-wrap: wrap;}
    .cft-sf .cft-action-right > .cft-btn-action {width: 30px; height: 30px;}
    .cft-sf :is(.cft-tab-btn,.cft-sf-add-secret) {background: var(--sf-clear) !important;}
    .cft-sf .cft-tab-btn.active {background: var(--sf-raised) !important;}
    .cft-view-wrap.cft-sf.tab-open .cft-body-area {inset: 0; width: 100%; height: 100%; padding: 0; pointer-events: auto;}
    .cft-sf .cft-body-image {padding: 18px 14px 24px;}
}


/* One continuous housing around the header, stage and dialogue. */
.cft-sf-frame {position: absolute; inset: 8px; border: 1px solid var(--sf-line); border-radius: 5px; box-shadow: inset 0 0 0 2px var(--sf-stage); pointer-events: none; z-index: 90;}
.cft-sf-frame i, .cft-sf-portrait-fittings i {position: absolute; width: 5px; height: 5px; border: 1px solid var(--sf-muted); border-radius: 50%;}
.cft-sf-frame i:nth-child(1), .cft-sf-portrait-fittings i:nth-child(1) {top: 3px; left: 3px;}
.cft-sf-frame i:nth-child(2), .cft-sf-portrait-fittings i:nth-child(2) {top: 3px; right: 3px;}
.cft-sf-frame i:nth-child(3), .cft-sf-portrait-fittings i:nth-child(3) {bottom: 3px; left: 3px;}
.cft-sf-frame i:nth-child(4), .cft-sf-portrait-fittings i:nth-child(4) {bottom: 3px; right: 3px;}
.cft-sf .cft-char-name-kr.cft-name-only {font-size: clamp(28px,3.7vw,58px); font-weight: 650; line-height: 1.15; color: var(--sf-text);}
@media (max-width: 768px) {
    .cft-sf-frame {inset: 3px;}
    .cft-sf .cft-char-name-kr.cft-name-only {font-size: clamp(26px,6vw,38px);}
}

/* Bottom-aligned identity; auto margin keeps oversized content scrollable from the top. */
.cft-view-wrap.cft-sf {--sf-overlay-inset: 24px; --sf-dialogue-space: 112px;}
.cft-view-wrap.cft-sf.cft-sf-no-dialogue {--sf-dialogue-space: 0px;}
.cft-sf .cft-info-panel {bottom: calc(var(--sf-dialogue-space) + var(--sf-overlay-inset));}
.cft-sf .cft-info-panel > :first-child {margin-top: auto;}
.cft-sf .cft-info-panel > * {flex-shrink: 0;}
/* Detail documents sit above dialogue, with a small bottom inset. */
.cft-sf .cft-tab-panel, .cft-sf.white .cft-tab-panel {bottom: 15px;}
@media (max-width: 768px) {
    .cft-view-wrap.cft-sf {--sf-overlay-inset: 12px;}
    .cft-sf-speech {padding: 32px 16px 16px;}
    .cft-sf .cft-tab-panel, .cft-sf.white .cft-tab-panel {top: 12px;}
}

/* Detail panels overlay the full-stage art layer. */
.cft-sf .cft-main {
    --sf-detail-left: calc(var(--sf-rail) + 24px);
    --sf-detail-width: calc((100% - var(--sf-rail)) * .52 - 24px);
    --sf-detail-gap: 16px;
}
.cft-sf .cft-tab-panel, .cft-sf.white .cft-tab-panel {left: var(--sf-detail-left); right: auto; width: var(--sf-detail-width);}
.cft-view-wrap.cft-sf.tab-open .cft-body-image {padding-inline: 8px 24px;}
@media (max-width: 1100px) {
    .cft-sf .cft-main {--sf-detail-left: calc(var(--sf-rail) + 18px); --sf-detail-width: calc((100% - var(--sf-rail)) * .53 - 18px); --sf-detail-gap: 12px;}
}
@media (max-width: 768px) {
    .cft-sf .cft-main {--sf-detail-left: calc(var(--sf-rail) + 9px); --sf-detail-width: calc((100% - var(--sf-rail)) * .64 - 9px); --sf-detail-gap: 8px;}
    .cft-view-wrap.cft-sf.tab-open .cft-body-image {padding-inline: 0 8px;}
}

/* Keep the title picker inside the left edge and above the bottom-aligned identity. */
.cft-sf .cft-title-dropdown, .cft-sf .cft-title-dropdown.open {
    top: auto; bottom: calc(100% + 8px); left: 0; right: auto; margin-top: 0;
    transform: none; width: max-content; min-width: 150px;
    max-width: min(260px, calc(100vw - var(--sf-rail) - 84px));
    max-height: min(240px, 30dvh); overflow-y: auto; overflow-wrap: anywhere;
}

.cft-sf .cft-info-rank {margin-bottom: 10px;}
.cft-sf-name-line {display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; min-width: 0; margin-bottom: 0;}
.cft-sf .cft-sf-name-line .cft-char-name-kr {margin: 0;}
.cft-sf-name-line .cft-title-area {flex: 0 1 auto; min-width: 0;}

.cft-sf .cft-info-panel {gap: 15px;}
.cft-sf .cft-basic-info-line {font-size: 13px; line-height: 1.85;}
.cft-sf .cft-sf-intro {
    width: 100%; max-width: 440px; min-width: 0; min-height: 0;
    max-height: min(24dvh, 220px); overflow: auto; overscroll-behavior: contain;
    padding: 14px 4px 0 0; margin: 0; border-top: 1px solid var(--sf-line);
    font: 400 14px/1.85 var(--sf-font); color: var(--sf-text); text-align: left;
    overflow-wrap: anywhere; cursor: auto; scrollbar-width: thin; scrollbar-color: var(--sf-line) var(--sf-clear);
}
.cft-sf-intro > :first-child {margin-top: 0;}
.cft-sf-intro > :last-child {margin-bottom: 0;}
.cft-sf-intro p {margin: 0 0 .8em;}
.cft-sf .cft-sf-intro :is(img,video,iframe) {max-width: 100%;}
.cft-sf .cft-sf-intro :is(img,video) {height: auto;}
@media (max-width: 768px) {
    .cft-sf .cft-info-panel {gap: 12px;}
    .cft-sf .cft-basic-info-line {font-size: 11px;}
    .cft-sf .cft-sf-intro {font-size: 13px; line-height: 1.8; padding-top: 12px; max-height: 22dvh;}
}

/* Reserve the portrait's horizontal space while the overview is visible. */
.cft-view-wrap.cft-sf:not(.tab-open) .cft-body-image {padding-left: 300px;}
@media (max-width: 768px) {
    .cft-view-wrap.cft-sf:not(.tab-open) .cft-body-image {padding-left: min(300px, calc(var(--sf-rail) + 174px));}
}

.cft-sf-portrait-fittings {position: absolute; inset: 0; pointer-events: none;}

/* Portrait rank sits outside the frame, sharing its top edge. */
.cft-sf-portrait-row {position: relative; width: 174px; max-width: 100%; padding-right: 24px;}
.cft-sf .cft-sf-portrait-row .cft-info-rank {
    position: absolute; top: 0; right: 0; display: flex; flex-direction: column;
    align-items: center; gap: 5px; margin: 0; width: 16px;
    font-size: 12px; line-height: 1; letter-spacing: 0;
}
.cft-view-wrap.cft-sf, .cft-view-wrap.cft-sf * {scrollbar-width: none; scrollbar-gutter: auto;}
.cft-view-wrap.cft-sf::-webkit-scrollbar, .cft-view-wrap.cft-sf *::-webkit-scrollbar {display: none; width: 0; height: 0;}
/* A decorative, filled downward cue follows each line without altering its text. */
.cft-sf .cft-oneline-text::after {
    content: ''; display: inline-block; width: 0; height: 0; margin-left: .6em;
    border-left: 5px solid transparent; border-right: 5px solid transparent;
    border-top: 7px solid currentColor; vertical-align: middle;
    opacity: 1; animation: cft-sf-dialogue-cue 1.2s steps(1, end) infinite;
}
@keyframes cft-sf-dialogue-cue {0%, 49% {opacity: 1;} 50%, 100% {opacity: 0;}}
@media (prefers-reduced-motion: reduce) {
    .cft-sf .cft-oneline-text::after {animation: none; opacity: 1;}
}

/* Shared translucent surfaces; type and accent colors remain fully legible. */
.cft-view-wrap.cft-sf {
    --sf-glass-surface: rgb(from var(--sf-surface) r g b / 72%);
    --sf-glass-raised: rgb(from var(--sf-raised) r g b / 72%);
    --sf-glass-stage: rgb(from var(--sf-stage) r g b / 58%);
    --sf-glass-blur: 4px;
    --panel-bg: var(--sf-glass-surface);
}
.cft-view-wrap.cft-sf :is(.cft-action-bar,.cft-sidebar,.cft-tab-panel,.cft-wardrobe-content,.cft-title-dropdown,.cft-etc-list) {
    background: var(--sf-glass-surface);
    -webkit-backdrop-filter: blur(var(--sf-glass-blur)); backdrop-filter: blur(var(--sf-glass-blur));
}
.cft-view-wrap.cft-sf :is(.cft-stat-item,.cft-skill-item,.cft-relation-card,.cft-wardrobe-item,.cft-inv-tab) {
    background: var(--sf-glass-stage);
    -webkit-backdrop-filter: blur(var(--sf-glass-blur)); backdrop-filter: blur(var(--sf-glass-blur));
}
.cft-view-wrap.cft-sf :is(.cft-btn-back,.cft-btn-action,.cft-bgm-btn,.cft-sf-panel-close,.cft-bottom-buttons button,.cft-bottom-buttons a,.cft-class-badge,.cft-inventory-slot,.cft-stat-points-box,.cft-skill-points-box,.cft-stat-confirm-box,.cft-skill-confirm-box) {
    background: var(--sf-glass-raised);
    -webkit-backdrop-filter: blur(var(--sf-glass-blur)); backdrop-filter: blur(var(--sf-glass-blur));
}
.cft-view-wrap.cft-sf :is(.cft-tab-btn,.cft-sf-add-secret) {
    -webkit-backdrop-filter: blur(var(--sf-glass-blur)); backdrop-filter: blur(var(--sf-glass-blur));
}
.cft-view-wrap.cft-sf .cft-tab-btn.active, .cft-view-wrap.cft-sf :is(.cft-tab-btn,.cft-sf-add-secret):hover {background: var(--sf-glass-raised) !important;}
.cft-view-wrap.cft-sf .cft-inv-tab.active {background: var(--sf-glass-raised);}
.cft-view-wrap.cft-sf .cft-sf-portrait {
    -webkit-backdrop-filter: blur(var(--sf-glass-blur)); backdrop-filter: blur(var(--sf-glass-blur));
}

/* Compact terminal toolbar and detail sheet. */
.cft-view-wrap.cft-sf .cft-action-bar {min-height: 40px; padding: 5px 10px; gap: 6px 12px;}
.cft-view-wrap.cft-sf .cft-action-left {flex: 0 1 auto; gap: 7px;}
.cft-view-wrap.cft-sf .cft-action-right {margin-left: auto; gap: 5px;}
.cft-view-wrap.cft-sf .cft-bottom-buttons {gap: 5px;}
.cft-view-wrap.cft-sf .cft-action-bar :is(.cft-btn-action,.cft-bgm-btn,.cft-bottom-buttons button,.cft-bottom-buttons a) {width: 26px; height: 26px; font-size: 11px;}
.cft-view-wrap.cft-sf .cft-action-bar .cft-btn-back {
    width: 22px; height: 26px; margin-right: 3px; padding: 0; border: 0;
    background: transparent; box-shadow: none; border-radius: 0;
    -webkit-backdrop-filter: none; backdrop-filter: none; font-size: 12px;
}
.cft-view-wrap.cft-sf .cft-action-bar .cft-btn-back:hover {background: transparent; color: var(--sf-mark);}
.cft-view-wrap.cft-sf .cft-sf-board-name {font-size: 12px; max-width: 12ch;}
.cft-view-wrap.cft-sf .cft-bgm-player {gap: 6px; margin-left: 4px; padding-left: 10px; border-left: 1px solid var(--sf-line);}
.cft-view-wrap.cft-sf .cft-bgm-volume {width: 56px; height: 3px;}
.cft-view-wrap.cft-sf .cft-main {
    --sf-detail-left: calc(var(--sf-rail) + 18px);
    --sf-detail-width: min(640px, calc((100% - var(--sf-rail)) * .75 - 24px));
    --sf-detail-gap: 12px;
}
.cft-view-wrap.cft-sf .cft-sf-panel-header {padding: 10px 20px; gap: 10px;}
.cft-view-wrap.cft-sf .cft-sf-panel-header h2 {font-size: 16px; line-height: 1.4;}
.cft-view-wrap.cft-sf .cft-sf-panel-close {width: 26px; height: 26px; font-size: 20px;}
.cft-view-wrap.cft-sf .cft-tab-panel-content {padding: 30px 50px;}
.cft-view-wrap.cft-sf.cft-sf-compact-detail .cft-tab-panel-content {padding: 20px;}
/* Resource meters and arbitrary stats keep their values, but shed card-sized spacing. */
.cft-view-wrap.cft-sf .cft-stats-grid, .cft-view-wrap.cft-sf .cft-stats-grid.custom {grid-template-columns: minmax(0,1fr); gap: 0;}
.cft-view-wrap.cft-sf .cft-stat-item {padding: 6px 0; border: 0; border-bottom: 1px solid var(--sf-line); border-radius: 0; background: transparent;}
.cft-view-wrap.cft-sf .cft-stat-header {display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 8px;}
.cft-view-wrap.cft-sf .cft-stat-name {font-size: 11px; line-height: 1.4;}
.cft-view-wrap.cft-sf .cft-stat-value {font-size: 16px; line-height: 1.35; gap: 3px; justify-content: flex-end;}
.cft-view-wrap.cft-sf .stat-breakdown {font-size: 9px;}
.cft-view-wrap.cft-sf .cft-stat-btns {gap: 2px; margin-left: 3px; padding: 0 2px; border-radius: 2px;}
.cft-view-wrap.cft-sf :is(.cft-stat-plus-btn,.cft-stat-minus-btn) {width: 24px; height: 24px; font-size: 14px; color: var(--sf-text);}
.cft-view-wrap.cft-sf .cft-stat-pending-count {min-width: 14px; font-size: 10px; padding: 0 2px;}
.cft-view-wrap.cft-sf .cft-sf-section-title {font-size: 11px; line-height: 1.4; margin: 14px 0 5px;}
.cft-view-wrap.cft-sf .cft-sf-section-title:first-child {margin-top: 0;}
.cft-view-wrap.cft-sf .cft-sf-resources {margin-bottom: 12px;}
.cft-view-wrap.cft-sf .cft-sf-resource {display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; gap: 10px; padding: 4px 0;}
.cft-view-wrap.cft-sf .cft-sf-resource-heading {font-size: 11px; line-height: 1.4; margin: 0; gap: 5px; flex-wrap: wrap;}
.cft-view-wrap.cft-sf .cft-sf-resource-track {height: 3px;}
.cft-view-wrap.cft-sf .cft-stat-points-box {padding: 5px 8px; gap: 8px; margin-bottom: 8px; justify-content: space-between;}
.cft-view-wrap.cft-sf .cft-stat-points-label {font-size: 11px;}
.cft-view-wrap.cft-sf .cft-stat-points-value {font-size: 15px;}
.cft-view-wrap.cft-sf .cft-stat-points-value .pending-preview {font-size: 12px;}
.cft-view-wrap.cft-sf .cft-stat-confirm-box {padding: 5px; gap: 5px; margin-bottom: 8px;}
.cft-view-wrap.cft-sf :is(.cft-stat-confirm-btn,.cft-stat-reset-btn) {padding: 5px 8px; min-height: 26px; font-size: 11px; border-radius: 2px;}
@media (max-width: 768px) {
    .cft-view-wrap.cft-sf .cft-main {--sf-detail-left: calc(var(--sf-rail) + 9px); --sf-detail-width: calc(100% - var(--sf-rail) - 24px); --sf-detail-gap: 8px;}
    .cft-view-wrap.cft-sf .cft-action-bar {padding: 4px 8px;}
    .cft-view-wrap.cft-sf .cft-action-left {flex-basis: auto;}
    .cft-view-wrap.cft-sf .cft-action-right {justify-content: flex-end;}
    .cft-view-wrap.cft-sf .cft-bgm-volume {width: 42px;}
    .cft-view-wrap.cft-sf .cft-sf-panel-header {padding: 8px 16px;}
    .cft-view-wrap.cft-sf .cft-sf-panel-header h2 {font-size: 14px;}
    .cft-view-wrap.cft-sf .cft-tab-panel-content {padding: 16px;}
    .cft-view-wrap.cft-sf .cft-stat-header {grid-template-columns: minmax(0,1fr); gap: 3px;}
    .cft-view-wrap.cft-sf .cft-stat-value {justify-content: flex-start;}
    .cft-view-wrap.cft-sf .cft-stats-grid.custom .cft-stat-header {grid-template-columns: minmax(0,1fr) auto; gap: 5px;}
    .cft-view-wrap.cft-sf .cft-sf-resource {grid-template-columns: minmax(0,1fr); gap: 3px;}
}
@media (pointer: coarse) {
    .cft-view-wrap.cft-sf .cft-action-bar :is(.cft-btn-back,.cft-btn-action,.cft-bgm-btn,.cft-bottom-buttons button,.cft-bottom-buttons a) {min-width: 30px; min-height: 30px;}
}

.cft-view-wrap.cft-sf .cft-sf-dialogue {-webkit-backdrop-filter: none; backdrop-filter: none;}

.cft-view-wrap.cft-sf .cft-sf-intro {padding-left: 10px; color: rgb(from var(--sf-text) r g b / 90%);}

.cft-view-wrap.cft-sf .cft-action-right > .cft-btn-action,
.cft-view-wrap.cft-sf .cft-action-right .cft-bottom-buttons > :is(button,a),
.cft-view-wrap.cft-sf .cft-action-right .cft-btn-etc {
    background: transparent; border: 0; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
}

/* Identity metadata shares one wrapping row; absent values leave no empty badge. */
.cft-view-wrap.cft-sf .cft-sf-identity-badges {display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px;}
.cft-view-wrap.cft-sf .cft-sf-identity-badges .cft-class-badge {margin: 0; max-width: 100%; padding: 4px 8px; min-width: 0;}
.cft-view-wrap.cft-sf .cft-sf-identity-badges .cft-class-badge > :is(span,i) {overflow-wrap: anywhere;}
.cft-view-wrap.cft-sf .cft-sf-identity-badges .cft-class-badge > i {flex-shrink: 0; font-size: 10px;}

/* Utility sheets stay moderately narrower than prose panels. */
.cft-view-wrap.cft-sf.cft-sf-compact-detail .cft-main {--sf-detail-width: min(460px, calc((100% - var(--sf-rail)) * .56 - 18px));}

/* Skill sheets: compact, neutral surfaces with readable locked states. */
.cft-view-wrap.cft-sf .cft-skill-points-box {justify-content: space-between; padding: 5px 8px; gap: 8px; margin-bottom: 8px;}
.cft-view-wrap.cft-sf .cft-skill-points-label {font-size: 11px; color: var(--sf-muted);}
.cft-view-wrap.cft-sf .cft-skill-points-value {font-size: 15px; color: var(--sf-text); font-variant-numeric: tabular-nums;}
.cft-view-wrap.cft-sf .cft-skill-points-value .pending-preview {font-size: 12px; color: var(--sf-muted);}
.cft-view-wrap.cft-sf .cft-skill-confirm-box {padding: 5px; gap: 5px; margin-bottom: 8px;}
.cft-view-wrap.cft-sf :is(.cft-skill-confirm-btn,.cft-skill-reset-btn,.cft-skill-learn-btn) {padding: 5px 8px; min-height: 26px; font-size: 11px; line-height: 1.4; border-radius: 2px; border: 1px solid var(--sf-line); box-shadow: none;}
.cft-view-wrap.cft-sf :is(.cft-skill-confirm-btn,.cft-skill-learn-btn) {background: var(--sf-text); color: var(--sf-stage);}
.cft-view-wrap.cft-sf .cft-skill-reset-btn {background: transparent; color: var(--sf-muted);}
.cft-view-wrap.cft-sf :is(.cft-skill-confirm-btn,.cft-skill-learn-btn):hover {background: var(--sf-text); color: var(--sf-stage); filter: none; transform: none; opacity: .85;}
.cft-view-wrap.cft-sf .cft-skills-section {margin-bottom: 14px;}
.cft-view-wrap.cft-sf .cft-skills-section:last-child {margin-bottom: 0;}
.cft-view-wrap.cft-sf .cft-skills-section-title {font-size: 11px; color: var(--sf-muted); padding-bottom: 5px; margin-bottom: 7px; gap: 6px; border-color: var(--sf-line);}
.cft-view-wrap.cft-sf .cft-skills-section-title i {font-size: 10px;}
.cft-view-wrap.cft-sf .cft-skills-grid {gap: 8px;}
.cft-view-wrap.cft-sf .cft-skill-item {padding: 10px; min-width: 0; border-color: var(--sf-line); transition: border-color .15s;}
.cft-view-wrap.cft-sf .cft-skill-item:hover {border-color: var(--sf-line); background: var(--sf-glass-stage);}
.cft-view-wrap.cft-sf .cft-skill-header {display: grid; grid-template-columns: 28px minmax(0,1fr) auto; gap: 7px; margin-bottom: 7px;}
.cft-view-wrap.cft-sf .cft-skill-icon {width: 28px; height: 28px; border-radius: 2px; background: var(--sf-glass-raised); color: var(--sf-text); font-size: 14px; overflow: hidden;}
.cft-view-wrap.cft-sf .cft-skill-name {min-width: 0; font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; color: var(--sf-text);}
.cft-view-wrap.cft-sf .cft-skill-type {font-size: 10px; padding: 2px 5px; border-radius: 2px; background: var(--sf-glass-raised); color: var(--sf-muted);}
.cft-view-wrap.cft-sf .cft-skill-level {gap: 4px; flex-wrap: wrap; font-size: 11px; margin-bottom: 6px; color: var(--sf-text);}
.cft-view-wrap.cft-sf .cft-skill-level .level-max {font-size: 10px; color: var(--sf-muted);}
.cft-view-wrap.cft-sf :is(.cft-skill-level .level-pending,.cft-skill-pending-count.has-pending) {color: var(--sf-text);}
.cft-view-wrap.cft-sf .cft-skill-btns {gap: 2px; padding: 0 2px; border-radius: 2px; background: var(--sf-glass-raised);}
.cft-view-wrap.cft-sf :is(.cft-skill-plus-btn,.cft-skill-minus-btn) {width: 24px; height: 24px; border-radius: 2px; font-size: 14px; color: var(--sf-text); background: transparent;}
.cft-view-wrap.cft-sf :is(.cft-skill-plus-btn,.cft-skill-minus-btn):hover:not(:disabled) {background: var(--sf-text); color: var(--sf-stage); transform: none;}
.cft-view-wrap.cft-sf .cft-skill-pending-count {min-width: 14px; font-size: 10px; color: var(--sf-muted);}
.cft-view-wrap.cft-sf .cft-skill-max-badge {background: var(--sf-glass-raised); color: var(--sf-text); border: 1px solid var(--sf-line); border-radius: 2px; font-size: 9px;}
.cft-view-wrap.cft-sf .cft-skill-desc {font-size: 12px; line-height: 1.6; color: rgb(from var(--sf-text) r g b / 90%); white-space: pre-line; overflow-wrap: anywhere;}
.cft-view-wrap.cft-sf .cft-skill-details {gap: 4px; margin-top: 7px; padding-top: 7px; border-color: var(--sf-line);}
.cft-view-wrap.cft-sf .cft-skill-tag {padding: 2px 5px; gap: 3px; max-width: 100%; font-size: 10px; line-height: 1.5; white-space: normal; flex-wrap: wrap; overflow-wrap: anywhere; border-radius: 2px; background: var(--sf-glass-raised); color: var(--sf-muted);}
.cft-view-wrap.cft-sf .cft-skill-tag--coeff {color: var(--sf-text);}
.cft-view-wrap.cft-sf .cft-skill-tag small {font-size: 9px; opacity: 1;}
.cft-view-wrap.cft-sf :is(.cft-skill-locked,.cft-skill-class-locked) {opacity: 1; border-style: dashed; background: var(--sf-glass-stage);}
.cft-view-wrap.cft-sf .cft-skill-class-req {padding: 4px 6px; font-size: 10px; gap: 5px; border-radius: 2px; background: var(--sf-glass-raised); color: var(--sf-muted);}
.cft-view-wrap.cft-sf .cft-skill-class-req span {min-width: 0; overflow-wrap: anywhere;}
.cft-view-wrap.cft-sf .cft-skill-class-req i:first-child {color: inherit; font-size: 10px;}
.cft-view-wrap.cft-sf .cft-skill-cost {color: var(--sf-muted); font-size: 10px;}
.cft-view-wrap.cft-sf :is(.cft-skill-learn-btn,.cft-skill-locked-badge) {margin-left: auto;}
.cft-view-wrap.cft-sf .cft-skill-locked-badge {display: inline-flex; align-items: center; gap: 4px; font-size: 10px; color: var(--sf-muted); opacity: 1;}
.cft-view-wrap.cft-sf [data-tab="skills"] .cft-empty-state {padding: 24px 10px; font-size: 12px; color: var(--sf-muted);}
@media (max-width: 768px) {
    .cft-view-wrap.cft-sf.cft-sf-compact-detail .cft-main {--sf-detail-width: calc(100% - var(--sf-rail) - 24px);}
    .cft-view-wrap.cft-sf .cft-sf-identity-badges {margin-top: 9px; gap: 4px;}
    .cft-view-wrap.cft-sf .cft-skill-item {padding: 8px;}
    .cft-view-wrap.cft-sf .cft-skill-header {grid-template-columns: 24px minmax(0,1fr); gap: 5px;}
    .cft-view-wrap.cft-sf .cft-skill-icon {width: 24px; height: 24px; font-size: 12px;}
    .cft-view-wrap.cft-sf .cft-skill-type {grid-column: 2; justify-self: start;}
}

/* Size art against the full stage, never the narrower open-tab viewport. */
.cft-view-wrap.cft-sf .cft-body-area {container-type: inline-size; z-index: 1;}
.cft-view-wrap.cft-sf .cft-main {
    --sf-art-left-space: 300px;
    --sf-art-right-space: clamp(24px, 5vw, 88px);
}
.cft-view-wrap.cft-sf .cft-body-image {
    box-sizing: content-box;
    width: max(0px, calc(100cqw - var(--sf-art-left-space) - var(--sf-art-right-space)));
    max-width: none;
    padding-left: var(--sf-art-left-space);
    padding-right: var(--sf-art-right-space);
}
.cft-view-wrap.cft-sf.tab-open .cft-body-image {padding-left: 8px; padding-right: 24px;}
@media (max-width: 768px) {
    .cft-view-wrap.cft-sf .cft-main {
        /* On phones the portrait overlays the art; it must not reserve another column. */
        --sf-art-left-space: calc(var(--sf-rail) + 12px);
        --sf-art-right-space: 0px;
    }
    .cft-view-wrap.cft-sf.tab-open .cft-body-image {padding-left: 0; padding-right: 8px;}
}

.cft-view-wrap.cft-sf .cft-info-panel {
    top: clamp(32px, 5dvh, 56px);
    max-width: 440px;
    gap: 0;
    justify-content: flex-start;
}
.cft-view-wrap.cft-sf .cft-info-panel > :first-child {margin-top: 0;}
.cft-view-wrap.cft-sf .cft-sf-portrait-row + .cft-name-area {margin-top: 18px;}
.cft-view-wrap.cft-sf .cft-sf-identity-badges {margin-top: 10px; gap: 5px;}
.cft-view-wrap.cft-sf .cft-basic-info-line {margin-top: 9px; font-size: 12px; line-height: 1.7;}
.cft-view-wrap.cft-sf .cft-sf-intro {
    margin-top: 18px;
    padding-top: 12px;
    border-top-color: rgb(from var(--sf-text) r g b / 14%);
    line-height: 1.8;
}
.cft-view-wrap.cft-sf .cft-sf-intro p {margin-bottom: .85em;}
.cft-view-wrap.cft-sf .cft-sf-intro > :last-child {margin-bottom: 0;}
@media (max-width: 768px) {
    .cft-view-wrap.cft-sf .cft-info-panel {top: 26px;}
    .cft-view-wrap.cft-sf .cft-sf-portrait-row + .cft-name-area {margin-top: 14px;}
    .cft-view-wrap.cft-sf .cft-sf-identity-badges {margin-top: 8px; gap: 4px;}
    .cft-view-wrap.cft-sf .cft-basic-info-line {font-size: 11px; margin-top: 7px;}
    .cft-view-wrap.cft-sf .cft-sf-intro {margin-top: 14px; padding-top: 10px;}
}

/* Art stays on the full-stage background layer; tabs overlay it with a small rightward nudge. */
.cft-view-wrap.cft-sf .cft-body-area,
.cft-view-wrap.cft-sf.tab-open .cft-body-area {
    left: 0; right: 0; width: 100%; transition: none;
}
.cft-view-wrap.cft-sf .cft-body-image,
.cft-view-wrap.cft-sf:not(.tab-open) .cft-body-image,
.cft-view-wrap.cft-sf.tab-open .cft-body-image {
    justify-content: flex-end;
    text-align: right;
    padding-right: 0;
    padding-left: calc(var(--sf-art-left-space) + var(--sf-art-right-space));
    transform: translateX(0);
    transition: transform var(--sf-motion) ease;
}
.cft-view-wrap.cft-sf .cft-body-image img {
    margin: 0 0 0 auto;
    object-position: right top;
}
.cft-view-wrap.cft-sf.tab-open .cft-body-image {transform: translateX(32px);}
@media (prefers-reduced-motion: reduce) {
    .cft-view-wrap.cft-sf .cft-body-image,
    .cft-view-wrap.cft-sf.tab-open .cft-body-image {transition: none;}
}

/* Mobile uses the full screen; the portrait keeps its own smaller frame. */
@media (max-width: 768px) {
    .cft-view-wrap.cft-sf {padding: 0; border: 0; border-radius: 0;}
    .cft-view-wrap.cft-sf > .cft-sf-frame {display: none;}
    .cft-view-wrap.cft-sf .cft-view-container {border: 0; border-radius: 0;}
    .cft-view-wrap.cft-sf .cft-action-bar {border: 0; border-bottom: 1px solid var(--sf-line); border-radius: 0;}
    .cft-view-wrap.cft-sf .cft-main::before,
    .cft-view-wrap.cft-sf .cft-main::after {display: none;}
}

/* Mobile is one reading flow: identity and complete intro, then full-length art. */
@media (max-width: 768px) {
    .cft-view-wrap.cft-sf,
    .cft-view-wrap.cft-sf.cft-sf-no-dialogue {
        display: block;
        overflow-y: auto;
        overflow-x: hidden;
        padding-bottom: var(--sf-dialogue-space);
        overscroll-behavior-y: contain;
    }
    .cft-view-wrap.cft-sf .cft-action-bar {position: relative; inset: auto;}
    .cft-view-wrap.cft-sf .cft-view-container {
        display: grid;
        grid-template-columns: var(--sf-rail) minmax(0, 1fr);
        grid-template-rows: auto auto;
        align-items: start;
        overflow: visible;
        min-height: 0;
    }
    .cft-view-wrap.cft-sf .cft-sidebar {
        position: relative; inset: auto;
        grid-column: 1; grid-row: 1 / 3;
        align-self: start;
        height: auto; max-height: none; overflow: visible;
    }
    .cft-view-wrap.cft-sf .cft-info-panel {
        position: relative; inset: auto;
        grid-column: 2; grid-row: 1;
        width: 100%; max-width: none; height: auto;
        padding: 26px 16px 0 12px;
        overflow: visible;
    }
    .cft-view-wrap.cft-sf.tab-open .cft-info-panel {display: none;}
    .cft-view-wrap.cft-sf .cft-sf-intro {height: auto; max-height: none; overflow: visible; overscroll-behavior: auto;}
    .cft-view-wrap.cft-sf .cft-main,
    .cft-view-wrap.cft-sf.tab-open .cft-main {
        grid-column: 2; grid-row: 2;
        position: relative; inset: auto;
        width: 100%; height: auto; min-height: 0;
        display: flex; flex-direction: column;
        overflow: visible; container-type: normal;
    }
    .cft-view-wrap.cft-sf.tab-open .cft-main {grid-row: 1;}
    .cft-view-wrap.cft-sf.tab-open .cft-body-area {display: none;}
    .cft-view-wrap.cft-sf .cft-body-area,
    .cft-view-wrap.cft-sf.tab-open .cft-body-area {
        order: 2;
        container-type: normal;
        position: relative; inset: auto;
        width: 100%; height: auto; min-height: 0;
        padding: 0; margin-top: 24px;
        overflow: visible; overscroll-behavior: auto;
    }
    .cft-view-wrap.cft-sf .cft-body-image,
    .cft-view-wrap.cft-sf:not(.tab-open) .cft-body-image,
    .cft-view-wrap.cft-sf.tab-open .cft-body-image {
        box-sizing: border-box;
        width: 100%; max-width: 100%; min-height: 0; height: auto;
        padding: 0;
        transform: none; transition: none;
    }
    .cft-view-wrap.cft-sf .cft-body-image img {width: auto; height: auto; max-width: 100%; max-height: none;}
    .cft-view-wrap.cft-sf .cft-tab-panel {
        display: none; order: 1;
        position: relative; inset: auto;
        width: auto; height: auto; max-height: none;
        margin: 16px 12px 0;
        overflow: visible;
        transform: none;
    }
    .cft-view-wrap.cft-sf .cft-tab-panel.open {display: flex;}
    .cft-view-wrap.cft-sf .cft-tab-panel-content {flex: none; max-height: none; overflow: visible;}
    .cft-view-wrap.cft-sf .cft-sf-dialogue {
        position: fixed; left: 0; right: 0; bottom: 0;
    }
}

/* Keep every mobile toolbar action in one compact row. */
@media (max-width: 768px) {
    .cft-view-wrap.cft-sf .cft-action-bar {
        flex-wrap: nowrap; align-items: center;
        min-height: 36px; padding: 6px; gap: 4px;
    }
    .cft-view-wrap.cft-sf .cft-action-left {
        flex: 1 1 auto; min-width: 0;
        flex-wrap: nowrap; gap: 4px;
    }
    .cft-view-wrap.cft-sf .cft-action-right {
        flex: 0 0 auto; min-width: 0;
        flex-wrap: nowrap; gap: 2px; margin-left: 0;
    }
    .cft-view-wrap.cft-sf .cft-bottom-buttons {flex-wrap: nowrap; gap: 2px;}
    .cft-view-wrap.cft-sf .cft-action-bar :is(.cft-btn-back,.cft-btn-action,.cft-bgm-btn,.cft-bottom-buttons > button,.cft-bottom-buttons > a,.cft-btn-etc) {
        flex: 0 0 24px; width: 24px; height: 24px;
        min-width: 24px; min-height: 24px;
        padding: 0; margin: 0; font-size: 10px;
    }
    .cft-view-wrap.cft-sf .cft-sf-board-name {
        flex: 0 1 auto; min-width: 0; max-width: 6ch;
        font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .cft-view-wrap.cft-sf .cft-bgm-player {
        flex: 0 0 auto; flex-wrap: nowrap;
        gap: 4px; margin-left: 0; padding-left: 4px;
    }
    .cft-view-wrap.cft-sf .cft-action-bar .cft-bgm-volume {width: 32px; min-width: 0;}
}
@media (max-width: 375px) {
    .cft-view-wrap.cft-sf .cft-action-bar .cft-bgm-volume {width: 24px;}
}

/* Remove rail gutters, keeping the existing tab button dimensions. */
@media (max-width: 768px) {
    .cft-view-wrap.cft-sf {--sf-rail: 62px;}
    .cft-view-wrap.cft-sf .cft-sidebar {padding: 6px 0;}
    .cft-view-wrap.cft-sf .cft-tab-nav {gap: 2px;}
}
@media (max-width: 375px) {
    .cft-view-wrap.cft-sf {--sf-rail: 54px;}
}


/* Image fields fill the available row whether the community-only head field exists or not. */
.cft-write-wrap.cft-sf .cft-upload-grid {grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));}

/* Private configuration tabs: bottom-aligned creation and a matching confirmation dialog. */
.cft-view-wrap.cft-sf .cft-sidebar {display: flex; flex-direction: column;}
.cft-view-wrap.cft-sf .cft-sf-add-secret {margin-top: auto; flex-shrink: 0; width: 100%;}
.cft-sf .cft-sf-add-secret::after {content: "+"; order: -1; font: 8px var(--sf-mono); letter-spacing: 1px;}
.cft-view-wrap.cft-sf .cft-tab-nav {margin-bottom: 16px;}
.cft-view-wrap.cft-sf .cft-sf-secret-dialog {position: fixed; inset: 0; margin: auto; height: fit-content; overflow: auto; box-sizing: border-box; padding: 0; width: min(400px,calc(100vw - 32px)); max-height: calc(100dvh - 32px); border: 1px solid var(--sf-line); border-radius: 4px; color: var(--sf-text); background: rgb(from var(--sf-surface) r g b / 96%); backdrop-filter: blur(4px); box-shadow: inset 0 0 0 3px var(--sf-stage);}
.cft-sf-secret-dialog::backdrop {background: #0009; backdrop-filter: blur(4px);}
.cft-sf-secret-dialog-head {display:flex;align-items:center;justify-content:space-between;padding:10px 18px;border-bottom:1px solid var(--sf-line);font-size:11px;color:var(--sf-muted);}
.cft-sf-secret-dialog button {cursor:pointer;font:12px var(--sf-font);color:var(--sf-text);background:transparent;border:0;border-radius:2px;}
.cft-sf-secret-dialog-head button {font-size:22px;line-height:1;padding:0 3px;}
.cft-sf-secret-dialog-body {padding:24px 22px 10px;}
.cft-sf-secret-dialog-body h2 {font:600 16px/1.5 var(--sf-font);margin:0 0 10px;}
.cft-sf-secret-dialog-body p {font-size:12px;line-height:1.7;color:var(--sf-muted);margin:0;}
.cft-sf-secret-dialog-foot {display:flex;justify-content:flex-end;gap:8px;padding:16px 22px 20px;}
.cft-sf-secret-dialog-foot button {padding:8px 15px;border:1px solid var(--sf-line);}
.cft-sf-secret-dialog-foot #cft-sf-secret-confirm {background:var(--sf-text);color:var(--sf-stage);border-color:var(--sf-text);}
.cft-sf-secret-dialog button:disabled {opacity:.5;cursor:wait;}
.cft-sf-secret-dialog-body #cft-sf-secret-error:not(:empty) {margin-top:12px;color:var(--sf-text);}
.cft-sf-secret-actions {display:flex;justify-content:flex-end;gap:6px;margin-bottom:12px;}
.cft-sf-secret-actions button {background:transparent;border:0;color:var(--sf-muted);width:28px;height:28px;cursor:pointer;}
.cft-sf-secret-copy {overflow-wrap:anywhere;}
.cft-sf-secret-copy img {max-width:100%;height:auto;}
.cft-sf-secret-copy table {max-width:100%;}
.cft-sf-secret-editor iframe {width:100%;height:620px;border:0;display:block;background:transparent;color-scheme:dark;}
.cft-sf.white .cft-sf-secret-editor iframe {color-scheme:light;}
.cft-sf-secret-tab [hidden] {display:none!important;}
.cft-sf-secret-unlock {padding:16px 0;display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.cft-sf-secret-unlock p {width:100%;font-size:12px;color:var(--sf-muted);}
.cft-sf-secret-unlock input {max-width:100%;width:180px;padding:7px;background:var(--sf-stage);border:1px solid var(--sf-line);color:var(--sf-text);}
.cft-sf-secret-unlock button {padding:7px 14px;background:var(--sf-raised);border:1px solid var(--sf-line);color:var(--sf-text);cursor:pointer;}
@media(max-width:768px){
 .cft-view-wrap.cft-sf .cft-sidebar {align-self:stretch;}
 .cft-sf-secret-dialog-body {padding:20px 16px 8px;}
 .cft-sf-secret-dialog-foot {padding:14px 16px 18px;}
}

/* Framed portrait: quiet shine and an intrinsic-size image viewer. */
.cft-view-wrap.cft-sf .cft-sf-portrait-open {
    position: relative; display: block; width: 100%; padding: 0; margin: 0;
    border: 0; border-radius: 0; background: transparent; overflow: hidden;
    color: inherit; cursor: zoom-in; line-height: 0;
}
.cft-view-wrap.cft-sf .cft-sf-portrait-open:active {transform: none;}
.cft-view-wrap.cft-sf .cft-sf-portrait-open:focus-visible {outline: 2px solid var(--sf-mark); outline-offset: 3px;}
.cft-sf-portrait-open::after {
    content: ''; position: absolute; inset: -25% -50%; pointer-events: none;
    background: linear-gradient(110deg, transparent 35%, rgb(255 255 255 / 26%) 50%, transparent 65%);
    transform: translateX(-110%); opacity: 0;
}
@media (hover: hover) {
    .cft-sf-portrait-open:hover::after {animation: cft-sf-portrait-shine 650ms ease-out;}
}
.cft-sf-portrait-open:focus-visible::after {animation: cft-sf-portrait-shine 650ms ease-out;}
@keyframes cft-sf-portrait-shine {
    0% {transform: translateX(-110%); opacity: 0;}
    15% {opacity: 1;}
    85% {opacity: 1;}
    100% {transform: translateX(110%); opacity: 0;}
}
@media (prefers-reduced-motion: reduce) {
    .cft-sf-portrait-open:hover::after, .cft-sf-portrait-open:focus-visible::after {animation: none;}
}
.cft-view-wrap.cft-sf .cft-sf-portrait-dialog {
    position: fixed; inset: 0; margin: auto; padding: 0;
    width: max-content; height: fit-content; max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px);
    border: 1px solid var(--sf-line); border-radius: 4px;
    background: var(--sf-stage); color: var(--sf-text); overflow: hidden;
    box-shadow: 0 16px 60px #0006;
}
.cft-view-wrap.cft-sf .cft-sf-portrait-dialog:not([open]) {display: none;}
.cft-sf-portrait-dialog::backdrop {background: #0009; backdrop-filter: blur(4px);}
.cft-sf-portrait-dialog-head {display: flex; align-items: center; justify-content: flex-end; gap: 24px; padding: 8px 12px; min-height: 40px; border-bottom: 1px solid var(--sf-line); font: 12px/1.5 var(--sf-font);}
.cft-view-wrap.cft-sf .cft-sf-portrait-close {width: 28px; height: 28px; padding: 0; border: 0; background: transparent; color: inherit; font: 24px/1 var(--sf-font); cursor: pointer;}
.cft-sf-portrait-dialog-scroll {max-width: calc(100vw - 34px); max-height: calc(100dvh - 80px); overflow: auto; overscroll-behavior: contain;}
.cft-view-wrap.cft-sf .cft-sf-portrait-dialog-scroll img {display: block; width: auto; height: auto; max-width: none; max-height: none; margin: 0; object-fit: initial;}
/* Animate only the image inside the stationary frame. */
.cft-view-wrap.cft-sf .cft-sf-portrait-open img {
    transform-origin: center;
    transition: transform 280ms cubic-bezier(.2,.7,.2,1);
}
@media (hover: hover) {
    .cft-view-wrap.cft-sf .cft-sf-portrait-open:hover img {transform: rotate(-1deg) scale(1.025);}
}
.cft-view-wrap.cft-sf .cft-sf-portrait-open:focus-visible img {transform: rotate(-1deg) scale(1.025);}
@media (prefers-reduced-motion: reduce) {
    .cft-view-wrap.cft-sf .cft-sf-portrait-open img,
    .cft-view-wrap.cft-sf .cft-sf-portrait-open:hover img,
    .cft-view-wrap.cft-sf .cft-sf-portrait-open:focus-visible img {transition: none; transform: none;}
}

/* Class restrictions are explicit even when skill points are available. */
.cft-view-wrap.cft-sf {--sf-skill-danger: #ffaaaa;}
.cft-view-wrap.cft-sf.white {--sf-skill-danger: #a42e36;}
.cft-view-wrap.cft-sf .cft-skill-class-locked {border-color: rgb(from var(--sf-skill-danger) r g b / 45%);}
.cft-view-wrap.cft-sf .cft-skill-class-req.cft-class-mismatched {color: var(--sf-skill-danger); background: rgb(from var(--sf-skill-danger) r g b / 10%);}
.cft-view-wrap.cft-sf .cft-skill-class-warning {
    color: var(--sf-skill-danger); background: rgb(from var(--sf-skill-danger) r g b / 10%);
    border: 1px solid rgb(from var(--sf-skill-danger) r g b / 40%);
    border-radius: 2px; padding: 3px 6px; font-size: 11px; font-weight: 600;
    line-height: 1.5; white-space: normal;
}