@charset "utf-8";

/* Character Board MG7 - reference-matched dossier view
 * Typography continues to inherit the user's existing skin/site fonts. */
.ci-view-wrap {
    --sf-font: var(--content-font-family, sans-serif);
    --sf-mono: 'SFMono-Regular', Consolas, monospace;
    --sf-radius: 3px;
    --sf-motion: 220ms;
    --sf-clear: transparent;
    --sf-shadow: none;
    --sf-rail: 108px;
    --sf-overlay-inset: 24px;
    --sf-dialogue-space: 112px;
    --sf-stage: #141415;
    --sf-surface: #1d1d1f;
    --sf-raised: #29292b;
    --sf-text: #ececea;
    --sf-muted: #aaa9a6;
    --sf-line: #3b3b3d;
    --sf-mark: var(--accent-color, #756458);
    --sf-backdrop: #0c0c0ded;
    --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;
    --sf-accent: var(--sf-mark);
    --char-color: var(--sf-mark);
    --ci-primary: var(--sf-mark);
    --ci-primary-light: rgb(from var(--sf-mark) 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);
    --panel-bg: var(--sf-glass-surface);
    --panel-text: var(--sf-text);
    --panel-border: var(--sf-line);
    --panel-muted: var(--sf-muted);
    --panel-hover: var(--sf-glass-raised);
    --card-bg-color: var(--sf-surface);
    --card-border-color: var(--sf-line);
    --text-secondary: var(--sf-muted);
    --text-muted: var(--sf-muted);
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    padding: 20px;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    box-sizing: border-box;
    color: var(--sf-text);
    background: linear-gradient(to bottom, #080809 0%, #303032 100%);
    border: 0;
    box-shadow: none;
    isolation: isolate;
    font-family: var(--sf-font);
}

.ci-view-wrap.white {
    color-scheme: light;
    --sf-stage: #ecefee;
    --sf-surface: #f8faf7;
    --sf-raised: #dfe5e2;
    --sf-text: #2b3330;
    --sf-muted: #59645e;
    --sf-line: #bcc7c0;
    --sf-mark: var(--accent-color, #756458);
    --sf-backdrop: #ecefeeed;
    background: linear-gradient(to bottom, #e6e6e7 0%, #fff 100%);
}

.ci-view-wrap.black { color-scheme: dark; }
.ci-view-wrap.black,
.ci-view-wrap.white {
    --panel-bg: var(--sf-glass-surface);
    --panel-text: var(--sf-text);
    --panel-border: var(--sf-line);
    --panel-muted: var(--sf-muted);
    --panel-hover: var(--sf-glass-raised);
}

.ci-view-wrap.ci-no-dialogue { --sf-dialogue-space: 0px; }

.ci-view-wrap,
.ci-view-wrap *,
.ci-view-wrap *::before,
.ci-view-wrap *::after { box-sizing: border-box; }

.ci-view-wrap::before { content: none; }

.ci-view-frame {
    position: absolute;
    inset: 8px;
    z-index: 90;
    border: 1px solid var(--sf-line);
    border-radius: 5px;
    box-shadow: inset 0 0 0 2px var(--sf-stage);
    pointer-events: none;
}

.ci-view-frame i,
.ci-portrait-fasteners i {
    position: absolute;
    width: 5px;
    height: 5px;
    border: 1px solid var(--sf-muted);
    border-radius: 50%;
}

.ci-view-frame i:nth-child(1), .ci-portrait-fasteners i:nth-child(1) { top: 3px; left: 3px; }
.ci-view-frame i:nth-child(2), .ci-portrait-fasteners i:nth-child(2) { top: 3px; right: 3px; }
.ci-view-frame i:nth-child(3), .ci-portrait-fasteners i:nth-child(3) { bottom: 3px; left: 3px; }
.ci-view-frame i:nth-child(4), .ci-portrait-fasteners i:nth-child(4) { right: 3px; bottom: 3px; }

.ci-view-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .14;
    filter: grayscale(1);
    transform: none;
    pointer-events: none;
}

.ci-action-bar {
    position: relative;
    inset: auto;
    grid-row: 1;
    width: auto;
    height: auto;
    min-height: 40px;
    padding: 5px 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px 12px;
    color: var(--sf-text);
    background: var(--sf-glass-surface);
    border: 1px solid var(--sf-line);
    -webkit-backdrop-filter: blur(var(--sf-glass-blur));
    backdrop-filter: blur(var(--sf-glass-blur));
    z-index: 60;
}

.ci-action-left,
.ci-action-right { display: flex; align-items: center; min-width: 0; }
.ci-action-left { flex: 0 1 auto; flex-wrap: wrap; gap: 7px; }
.ci-action-right { flex-wrap: wrap; justify-content: flex-end; margin-left: auto; gap: 5px; }

.ci-board-title {
    max-width: 12ch;
    margin: 0;
    overflow: hidden;
    color: var(--sf-text);
    font-size: 12px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ci-btn-back,
.ci-btn-action,
.ci-bgm-btn,
.ci-bottom-buttons button,
.ci-bottom-buttons a,
.ci-tab-panel-close {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--sf-text);
    background: var(--sf-glass-raised);
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-radius);
    box-shadow: none;
    font-size: 11px;
    cursor: pointer;
    -webkit-backdrop-filter: blur(var(--sf-glass-blur));
    backdrop-filter: blur(var(--sf-glass-blur));
}

.ci-action-bar .ci-btn-back {
    width: 22px;
    height: 26px;
    margin-right: 3px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-size: 12px;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.ci-action-bar .ci-btn-back:hover {
    color: var(--sf-mark);
    background: transparent;
    filter: none;
    transform: none;
}

.ci-btn-action.active { color: var(--sf-text); background: var(--sf-glass-raised); border-color: var(--sf-mark); }
.ci-bgm-player { gap: 6px; margin-left: 4px; padding-left: 10px; border-left: 1px solid var(--sf-line); }
.ci-bgm-volume {
    width: 56px;
    height: 12px;
    margin: 0;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    color: var(--sf-mark);
    background: transparent;
    border: 0;
    border-radius: 0;
    accent-color: var(--sf-mark);
    cursor: pointer;
}
.ci-bgm-volume::-webkit-slider-runnable-track {
    width: 100%;
    height: 3px;
    background: var(--sf-line);
    border: 0;
    border-radius: 999px;
}
.ci-bgm-volume::-webkit-slider-thumb {
    width: 11px;
    height: 11px;
    margin-top: -4px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--sf-text);
    border: 1px solid var(--sf-mark);
    border-radius: 50%;
    box-shadow: none;
}
.ci-bgm-volume::-moz-range-track {
    width: 100%;
    height: 3px;
    background: var(--sf-line);
    border: 0;
    border-radius: 999px;
}
.ci-bgm-volume::-moz-range-progress {
    height: 3px;
    background: var(--sf-mark);
    border-radius: 999px;
}
.ci-bgm-volume::-moz-range-thumb {
    width: 11px;
    height: 11px;
    background: var(--sf-text);
    border: 1px solid var(--sf-mark);
    border-radius: 50%;
    box-shadow: none;
}
.ci-bottom-buttons { position: static; inset: auto; display: flex; flex-flow: row wrap; align-items: center; gap: 5px; margin: 0; z-index: auto; }

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

.ci-view-container {
    position: relative;
    inset: auto;
    grid-row: 2;
    display: grid;
    grid-template-columns: var(--sf-rail) minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: transparent;
    border: 1px solid var(--sf-line);
    border-top: 0;
    z-index: 1;
}

.ci-sidebar {
    position: relative;
    inset: auto;
    grid-column: 1;
    grid-row: 1;
    width: auto;
    min-height: 0;
    padding: 22px 10px;
    overflow-y: auto;
    color: var(--sf-text);
    background: var(--sf-glass-surface);
    border-right: 1px solid var(--sf-line);
    -webkit-backdrop-filter: blur(var(--sf-glass-blur));
    backdrop-filter: blur(var(--sf-glass-blur));
    z-index: 30;
}

.ci-tab-nav { width: 100%; gap: 5px; }
.ci-tab-btn {
    position: relative;
    width: 100%;
    min-height: 56px;
    margin: 0;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    color: var(--sf-muted);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 1px;
    font-size: 12px;
    line-height: 1.4;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--sf-motion), color var(--sf-motion);
}

.ci-tab-btn::before { content: none; }
.ci-tab-btn:hover { color: var(--sf-text); background: var(--sf-glass-raised); }
.ci-tab-btn.active {
    color: var(--sf-text);
    background: var(--sf-glass-raised);
    border-color: var(--sf-line);
    box-shadow: inset 2px 0 var(--sf-mark);
}

.ci-tab-index { order: -1; color: inherit; font: 8px var(--sf-mono); letter-spacing: 1px; }
.ci-tab-text { max-width: 100%; margin: 0; overflow: hidden; font-size: inherit; text-overflow: ellipsis; text-shadow: none; }
.ci-sidebar-bottom { display: none; }

.ci-main,
.ci-view-wrap.tab-open .ci-main {
    --sf-art-left-space: 300px;
    --sf-art-right-space: clamp(24px, 5vw, 88px);
    --sf-detail-left: calc(var(--sf-rail) + 18px);
    --sf-detail-width: min(640px, calc((100% - var(--sf-rail)) * .75 - 24px));
    position: relative;
    inset: auto;
    grid-area: 1 / 1 / 2 / 3;
    width: auto;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: transparent;
    z-index: auto;
}

.ci-view-wrap.ci-compact-detail .ci-main { --sf-detail-width: min(460px, calc((100% - var(--sf-rail)) * .56 - 18px)); }

.ci-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;
}

.ci-main::after {
    content: '';
    position: absolute;
    top: 24px;
    right: 24px;
    bottom: 24px;
    width: 7px;
    background: repeating-linear-gradient(to bottom, var(--sf-line) 0 1px, transparent 1px 12px);
    pointer-events: none;
}

.ci-body-area,
.ci-view-wrap.panel-closed .ci-body-area,
.ci-body-area.shifted,
.ci-view-wrap.tab-open .ci-body-area {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0;
    display: block;
    overflow-y: auto;
    overflow-x: hidden;
    container-type: inline-size;
    overscroll-behavior-y: contain;
    scrollbar-width: none;
    transform: none;
    transition: none;
    pointer-events: auto;
    z-index: 1;
}

.ci-body-area::-webkit-scrollbar { display: none; width: 0; height: 0; }
.ci-body-image,
.ci-view-wrap:not(.tab-open) .ci-body-image,
.ci-view-wrap.tab-open .ci-body-image {
    box-sizing: content-box;
    width: max(0px, calc(100cqw - var(--sf-art-left-space) - var(--sf-art-right-space)));
    max-width: none;
    min-height: 100%;
    height: auto;
    margin: 0;
    padding: 28px 0 32px calc(var(--sf-art-left-space) + var(--sf-art-right-space));
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    text-align: right;
    transform: translateX(0);
    transition: transform var(--sf-motion) ease;
}

.ci-view-wrap.tab-open .ci-body-image { transform: translateX(32px); }
.ci-view-wrap.ci-interactive :is(.ci-main,.ci-info-panel,.ci-dialogue) { cursor: pointer; }
.ci-body-image img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: none;
    margin: 0 0 0 auto;
    flex: 0 0 auto;
    object-fit: initial;
    object-position: right top;
    filter: none;
    user-select: none;
}

.ci-info-panel {
    position: absolute;
    top: clamp(32px, 5dvh, 56px);
    right: auto;
    bottom: calc(var(--sf-dialogue-space) + var(--sf-overlay-inset));
    left: calc(var(--sf-rail) + 32px);
    width: calc((100% - var(--sf-rail)) * .45 - 32px);
    max-width: 440px;
    min-width: 0;
    padding: 0 4px 0 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    overflow: auto;
    color: var(--sf-text);
    background: transparent;
    backdrop-filter: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity var(--sf-motion);
    z-index: 10;
}

.ci-info-panel > * { flex-shrink: 0; }
.ci-view-wrap.tab-open .ci-info-panel,
.ci-info-panel.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: none;
}

.ci-info-panel.panel-hidden { opacity: 0; visibility: hidden; pointer-events: none; transform: none; }
.ci-portrait-row { position: relative; width: 174px; max-width: 100%; min-height: 0; margin: 0; padding-right: 24px; display: block; }
.ci-info-portrait {
    position: relative;
    width: 150px;
    max-width: 100%;
    min-height: 0;
    aspect-ratio: auto;
    margin: 0;
    padding: 9px;
    overflow: visible;
    background: rgb(from var(--sf-stage) r g b / 40%);
    border: 1px solid var(--sf-line);
    border-radius: 5px;
    outline: 0;
    box-shadow: inset 0 0 0 2px rgb(from var(--sf-stage) r g b / 40%);
    -webkit-backdrop-filter: blur(var(--sf-glass-blur));
    backdrop-filter: blur(var(--sf-glass-blur));
}

.ci-portrait-fasteners { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.ci-portrait-fasteners i { background: transparent; }
.ci-portrait-open {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: hidden;
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: 0;
    line-height: 0;
    cursor: zoom-in;
}

.ci-portrait-open:focus-visible { outline: 2px solid var(--sf-mark); outline-offset: 3px; }

.ci-info-portrait img {
    display: block;
    width: 100%;
    max-width: 150px;
    height: auto;
    object-fit: initial;
    border: 1px solid var(--sf-line);
    transform-origin: center;
    transition: transform 280ms cubic-bezier(.2,.7,.2,1);
}

.ci-portrait-open::after {
    content: '';
    position: absolute;
    inset: -25% -50%;
    background: linear-gradient(110deg, transparent 35%, rgb(255 255 255 / 26%) 50%, transparent 65%);
    opacity: 0;
    transform: translateX(-110%);
    pointer-events: none;
}

@media (hover: hover) {
    .ci-portrait-open:hover::after { animation: ci-portrait-shine 650ms ease-out; }
    .ci-portrait-open:hover img { transform: rotate(-1deg) scale(1.025); }
}

.ci-portrait-open:active { transform: none; }
.ci-portrait-open:focus-visible::after { animation: ci-portrait-shine 650ms ease-out; }
.ci-portrait-open:focus-visible img { transform: rotate(-1deg) scale(1.025); }

@keyframes ci-portrait-shine {
    0% { opacity: 0; transform: translateX(-110%); }
    15%, 85% { opacity: 1; }
    100% { opacity: 0; transform: translateX(110%); }
}

.ci-info-rank {
    position: absolute;
    top: 0;
    right: 0;
    width: 16px;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    color: var(--sf-mark);
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0;
}

.ci-name-area { width: 100%; min-width: 0; margin: 0; text-align: left; }
.ci-portrait-row + .ci-name-area { margin-top: 18px; }
.ci-name-line { min-width: 0; margin-bottom: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.ci-name-line .ci-char-name-kr { margin: 0; }
.ci-char-name-kr { margin: 0 0 8px; padding: 0; color: var(--sf-muted); font: 500 16px/1.5 var(--sf-font); letter-spacing: .04em; overflow-wrap: anywhere; }
.ci-char-name-kr.ci-name-only { color: var(--sf-text); font-size: clamp(28px,3.7vw,58px); font-weight: 650; line-height: 1.15; }
.ci-char-name-en { margin: 0; padding: 0; color: var(--sf-text); font: 650 clamp(32px,4vw,64px)/1.08 var(--sf-font); font-style: normal; letter-spacing: -.035em; overflow-wrap: anywhere; }
.ci-title-area { min-width: 0; max-width: 100%; margin: 0; flex: 0 1 auto; }
.ci-title-current { padding: 0; background: none; border: 0; font-size: 12px; text-align: left; }
.ci-title-badge { color: var(--title-color, var(--sf-mark)); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.ci-title-dropdown { top: auto; right: auto; bottom: calc(100% + 8px); left: 0; width: max-content; min-width: 150px; max-width: min(260px, calc(100vw - var(--sf-rail) - 84px)); max-height: min(240px, 30dvh); overflow-y: auto; color: var(--sf-text); background: var(--sf-glass-surface); border: 1px solid var(--sf-line); border-radius: var(--sf-radius); transform: none; }
.ci-identity-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 10px; }
.ci-class-badge { min-width: 0; min-height: 0; max-width: 100%; margin: 0; padding: 4px 8px; gap: 5px; color: var(--sf-text); background: var(--sf-glass-raised); border: 1px solid var(--sf-line); border-radius: var(--sf-radius); font-size: 11px; }
.ci-basic-info-line { width: 100%; margin: 9px 0 0; color: var(--sf-muted); font-size: 12px; line-height: 1.7; text-align: left; overflow-wrap: anywhere; }
.ci-info-divider { display: none; }
.ci-intro {
    width: 100%;
    max-width: 440px;
    min-width: 0;
    min-height: 0;
    max-height: min(24dvh, 220px);
    margin: 18px 0 0;
    padding: 12px 4px 0 10px;
    overflow: auto;
    color: rgb(from var(--sf-text) r g b / 90%);
    background: transparent;
    border: 0;
    border-top: 1px solid rgb(from var(--sf-text) r g b / 14%);
    border-radius: 0;
    font-size: 14px;
    line-height: 1.8;
    text-align: left;
    overflow-wrap: anywhere;
    overscroll-behavior: contain;
}

.ci-intro-content .ra0-content { max-height: none; padding: 0; overflow: visible; color: inherit; font-size: inherit; line-height: inherit; text-align: inherit; }
.ci-intro-content .ra0-content > :first-child { margin-top: 0; }
.ci-intro-content .ra0-content > :last-child { margin-bottom: 0; }
.ci-intro-content p { margin: 0 0 .85em; }
.ci-info-panel > .ci-inventory { display: none; }

.ci-tab-panel,
.ci-view-wrap.white .ci-tab-panel {
    position: absolute;
    top: 24px;
    right: auto;
    bottom: 15px;
    left: var(--sf-detail-left);
    width: var(--sf-detail-width);
    max-width: none;
    height: auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: var(--sf-text);
    background: var(--sf-glass-surface);
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-radius);
    box-shadow: none;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-8px);
    pointer-events: none;
    -webkit-backdrop-filter: blur(var(--sf-glass-blur));
    backdrop-filter: blur(var(--sf-glass-blur));
    transition: opacity var(--sf-motion), transform var(--sf-motion), visibility var(--sf-motion);
    cursor: auto;
    z-index: 40;
}

.ci-tab-panel.open,
.ci-view-wrap.white .ci-tab-panel.open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.ci-tab-panel-header { min-height: 0; padding: 10px 20px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--sf-line); flex-shrink: 0; }
.ci-tab-panel-header h2 { min-width: 0; margin: 0; color: var(--sf-text); font: 600 16px/1.4 var(--sf-font); overflow-wrap: anywhere; }
.ci-tab-panel-close { width: 26px; height: 26px; color: var(--sf-text); background: var(--sf-glass-raised); border: 1px solid var(--sf-line); font-size: 20px; }
.ci-tab-panel-content { max-width: 100%; min-height: 0; height: auto; padding: 30px 50px; flex: 1; overflow-y: auto; overflow-x: clip; overscroll-behavior: contain; }
.ci-view-wrap.ci-compact-detail .ci-tab-panel-content { padding: 20px; }
.ci-tab-content.active { height: auto; }
.ci-tab-body { min-width: 0; color: var(--sf-text); font: 13px/1.9 var(--sf-font); overflow-wrap: anywhere; }
.ci-tab-body .ra0-content, .ci-tab-body .ra0-content blockquote { color: inherit; }
.ci-tab-body img, .ci-tab-body video { max-width: 100%; height: auto; }
.ci-relations-grid { grid-template-columns: 1fr; }
.ci-inventory-tab-body { height: auto; }
.ci-inventory-tab-body .ci-inventory { margin: 0; }
.ci-inventory-tab-body .ci-inventory-grid,
.ci-inventory-grid { grid-template-columns: repeat(8,minmax(0,1fr)); gap: 6px; max-height: none; overflow: visible; }
.ci-inventory-tabs { flex-wrap: wrap; overflow: visible; }
.ci-inv-tab { white-space: nowrap; color: var(--sf-muted); background: var(--sf-glass-stage); border: 1px solid var(--sf-line); border-radius: var(--sf-radius); }
.ci-inv-tab.active { color: var(--sf-text); background: var(--sf-glass-raised); border-color: var(--sf-mark); }
.ci-inventory-slot { background: var(--sf-glass-raised); border-color: var(--sf-line); border-radius: var(--sf-radius); }
.ci-section-title { color: var(--sf-text); font: 600 13px/1.5 var(--sf-font); }
.ci-relation-card { color: var(--sf-text); background: var(--sf-glass-stage); border: 1px solid var(--sf-line); border-radius: var(--sf-radius); }
.ci-iframe-body { height: max(300px,50vh); min-height: 0; }
.ci-iframe-body iframe { width: 100%; height: 100%; }

.ci-dialogue {
    position: absolute;
    right: var(--sf-overlay-inset);
    bottom: 0;
    left: calc(var(--sf-rail) + var(--sf-overlay-inset));
    min-width: 0;
    max-height: min(30dvh, 250px);
    overflow: auto;
    color: #fff;
    background: linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.68) 45%, rgba(0,0,0,0) 100%);
    border: 0;
    border-radius: 0;
    scrollbar-width: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    z-index: 35;
}

.ci-view-wrap.white .ci-dialogue { color: #111; background: linear-gradient(to top, rgba(255,255,255,.96) 0%, rgba(255,255,255,.76) 45%, rgba(255,255,255,0) 100%); }
.ci-dialogue::-webkit-scrollbar { display: none; }
.ci-dialogue-speech { min-width: 0; padding: 40px 32px 20px; text-align: center; }
.ci-oneline-text { max-width: 100%; margin: 0; padding: 0; color: inherit; font: 500 clamp(21px,2vw,28px)/1.65 var(--sf-font); font-style: normal; letter-spacing: -.025em; text-shadow: none; white-space: pre-line; overflow-wrap: anywhere; }
.ci-oneline-text::after { content: ''; display: inline-block; width: 0; height: 0; margin-left: .6em; border-right: 5px solid transparent; border-left: 5px solid transparent; border-top: 7px solid currentColor; vertical-align: middle; animation: ci-dialogue-cue 1.2s steps(1,end) infinite; }
.ci-oneline-text.fade { animation: ci-line-enter 220ms ease-out; }
@keyframes ci-dialogue-cue { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
@keyframes ci-line-enter { from { opacity: .35; transform: translateY(3px); } to { opacity: 1; transform: none; } }

.ci-portrait-dialog {
    position: fixed;
    inset: 0;
    width: max-content;
    height: fit-content;
    max-width: calc(100vw - 32px);
    max-height: calc(100dvh - 32px);
    margin: auto;
    padding: 0;
    overflow: hidden;
    color: var(--sf-text);
    background: var(--sf-stage);
    border: 1px solid var(--sf-line);
    border-radius: 4px;
    box-shadow: 0 16px 60px #0006;
}

.ci-portrait-dialog:not([open]) { display: none; }
.ci-portrait-dialog::backdrop { background: #0009; backdrop-filter: blur(4px); }
.ci-portrait-dialog-head { min-height: 40px; padding: 8px 12px; display: flex; align-items: center; justify-content: flex-end; gap: 24px; border-bottom: 1px solid var(--sf-line); font: 12px/1.5 var(--sf-font); }
.ci-portrait-close { width: 28px; height: 28px; padding: 0; color: inherit; background: transparent; border: 0; font: 24px/1 var(--sf-font); cursor: pointer; }
.ci-portrait-dialog-scroll { max-width: calc(100vw - 34px); max-height: calc(100dvh - 80px); overflow: auto; overscroll-behavior: contain; }
.ci-portrait-dialog-scroll img { display: block; width: auto; height: auto; max-width: none; max-height: none; margin: 0; object-fit: initial; }

.ci-etc-list { top: calc(100% + 12px); right: 0; bottom: auto; color: var(--sf-text); background: var(--sf-glass-surface); border-color: var(--sf-line); border-radius: var(--sf-radius); }
.ci-wardrobe-overlay { background: var(--sf-backdrop); }
.ci-wardrobe-content { color: var(--sf-text); background: var(--sf-glass-surface); border: 1px solid var(--sf-line); border-radius: var(--sf-radius); }
.ci-wardrobe-item { background: var(--sf-glass-stage); border: 1px solid var(--sf-line); border-radius: var(--sf-radius); }

.ci-view-wrap, .ci-view-wrap * { scrollbar-width: none; scrollbar-gutter: auto; }
.ci-view-wrap::-webkit-scrollbar, .ci-view-wrap *::-webkit-scrollbar { display: none; width: 0; height: 0; }
.ci-view-wrap :is(button,a,input,textarea,select,[tabindex]):focus-visible { outline: 2px solid var(--sf-mark); outline-offset: 3px; }

@media (max-width: 1100px) {
    .ci-view-wrap { --sf-rail: 90px; padding: 18px; }
    .ci-sidebar { padding: 20px 6px; }
    .ci-tab-btn { padding: 10px 7px; font-size: 11px; }
    .ci-info-panel { top: clamp(32px, 5dvh, 56px); left: calc(var(--sf-rail) + 22px); width: calc((100% - var(--sf-rail)) * .46 - 24px); }
    .ci-main, .ci-view-wrap.tab-open .ci-main { --sf-detail-left: calc(var(--sf-rail) + 18px); --sf-detail-width: min(640px, calc((100% - var(--sf-rail)) * .75 - 24px)); }
}

@media (max-width: 768px) {
    .ci-view-wrap {
        --sf-rail: 62px;
        --sf-overlay-inset: 12px;
        display: block;
        padding: 0 0 var(--sf-dialogue-space);
        overflow-y: auto;
        overflow-x: hidden;
        border: 0;
        border-radius: 0;
        overscroll-behavior-y: contain;
    }
    .ci-view-frame { display: none; }
    .ci-action-bar { position: relative; inset: auto; min-height: 36px; padding: 6px; flex-wrap: nowrap; align-items: center; gap: 4px; border: 0; border-bottom: 1px solid var(--sf-line); border-radius: 0; }
    .ci-action-left { flex: 1 1 auto; flex-wrap: nowrap; gap: 4px; }
    .ci-action-right { flex: 0 0 auto; flex-wrap: nowrap; gap: 2px; margin-left: 0; }
    .ci-bottom-buttons { flex-wrap: nowrap; gap: 2px; }
    .ci-action-bar :is(.ci-btn-back,.ci-btn-action,.ci-bgm-btn,.ci-bottom-buttons > button,.ci-bottom-buttons > a,.ci-btn-etc) { flex: 0 0 24px; width: 24px; height: 24px; min-width: 24px; min-height: 24px; padding: 0; margin: 0; font-size: 10px; }
    .ci-board-title { flex: 0 1 auto; min-width: 0; max-width: 6ch; font-size: 11px; }
    .ci-bgm-player { flex: 0 0 auto; flex-wrap: nowrap; gap: 4px; margin-left: 0; padding-left: 4px; }
    .ci-bgm-volume { width: 32px; min-width: 0; }
    .ci-view-container { display: grid; grid-template-columns: var(--sf-rail) minmax(0,1fr); grid-template-rows: auto auto; align-items: start; min-height: 0; overflow: visible; border: 0; border-radius: 0; }
    .ci-sidebar { position: relative; inset: auto; grid-column: 1; grid-row: 1 / 3; align-self: start; width: auto; height: auto; max-height: none; padding: 6px 0; overflow: visible; }
    .ci-tab-nav { gap: 2px; }
    .ci-tab-btn { min-height: 52px; padding: 8px 4px; gap: 4px; font-size: 10px; }
    .ci-info-panel { position: relative; inset: auto; grid-column: 2; grid-row: 1; width: 100%; max-width: none; height: auto; padding: 26px 16px 0 12px; gap: 0; overflow: visible; }
    .ci-view-wrap.tab-open .ci-info-panel { display: none; }
    .ci-char-name-kr { margin-bottom: 7px; font-size: 13px; }
    .ci-char-name-kr.ci-name-only { font-size: clamp(26px,6vw,38px); }
    .ci-char-name-en { font-size: clamp(28px,7vw,44px); line-height: 1.1; letter-spacing: -.025em; }
    .ci-title-badge { font-size: 10px; }
    .ci-info-rank { font-size: 10px; letter-spacing: 1px; }
    .ci-class-badge { font-size: 10px; }
    .ci-basic-info-line { margin-top: 7px; font-size: 11px; }
    .ci-portrait-row + .ci-name-area { margin-top: 14px; }
    .ci-intro { max-height: none; margin-top: 14px; padding-top: 10px; overflow: visible; font-size: 13px; line-height: 1.8; }
    .ci-main, .ci-view-wrap.tab-open .ci-main { position: relative; inset: auto; grid-column: 2; grid-row: 2; width: 100%; height: auto; min-height: 0; display: flex; flex-direction: column; overflow: visible; container-type: normal; }
    .ci-view-wrap.tab-open .ci-main { grid-row: 1; }
    .ci-main::before, .ci-main::after { display: none; }
    .ci-view-wrap.tab-open .ci-body-area { display: none; }
    .ci-body-area, .ci-view-wrap.panel-closed .ci-body-area, .ci-body-area.shifted { position: relative; inset: auto; order: 2; width: 100%; height: auto; min-height: 0; margin-top: 24px; padding: 0; overflow: visible; container-type: normal; overscroll-behavior: auto; }
    .ci-body-image, .ci-view-wrap:not(.tab-open) .ci-body-image, .ci-view-wrap.tab-open .ci-body-image { box-sizing: border-box; width: 100%; max-width: 100%; min-height: 0; height: auto; padding: 0; transform: none; transition: none; }
    .ci-body-image img { width: auto; height: auto; max-width: 100%; max-height: none; }
    .ci-tab-panel, .ci-view-wrap.white .ci-tab-panel { position: relative; inset: auto; order: 1; display: none; width: auto; height: auto; max-height: none; margin: 16px 12px 0; overflow: visible; transform: none; }
    .ci-tab-panel.open, .ci-view-wrap.white .ci-tab-panel.open { display: flex; }
    .ci-tab-panel-content { flex: none; max-height: none; padding: 16px; overflow: visible; }
    .ci-tab-panel-header { padding: 8px 16px; }
    .ci-tab-panel-header h2 { font-size: 14px; }
    .ci-tab-body { font-size: 12px; line-height: 1.85; }
    .ci-dialogue { position: fixed; right: 0; bottom: 0; left: 0; }
    .ci-dialogue-speech { padding: 32px 16px 16px; }
    .ci-oneline-text { font-size: 19px; }
}

@media (max-width: 375px) {
    .ci-view-wrap { --sf-rail: 54px; }
    .ci-bgm-volume { width: 24px; }
}

@media (prefers-reduced-motion: reduce) {
    .ci-view-wrap *, .ci-view-wrap *::before, .ci-view-wrap *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}