@charset "utf-8";
@import url('style.css');
@import url('https://cdn.jsdelivr.net/npm/galmuri/dist/galmuri.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400&display=swap');






/* 일본어 표시용 본명조(Source Han Serif) */
@font-face {
    font-family: 'BonmyeongjoSourceHanSerif';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/NotoSerifKR.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
hr.padding {
    display: none !important;
}

::selection {
    background: var(--cha-color);
    color: var(--white);
    /* 선택된 텍스트 색상 (필요하면 변경) */
}

.all-section {
    width: 100vw;
    height: 100vh;
    display: flex;
    position: fixed;
    bottom: 0;
    right: 0;
}

.cha-a-s {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50px;
    z-index: 10001;
    position: fixed;
    gap: 75vh;
    left: 0;
    top: 20px;
}

.a-s-option {
    display: flex;
    flex-direction: column;
    flex: 0.9;
    align-items: center;
    width: 30px;
    gap: 10px;
}

.a-s-option .cha-info-btn {
    color: var(--gray-100);
}

.linkcopyload_btn {
    color: var(--gray-100);
    font-size: 15px;
}

.a-s-option .cha-info-btn:hover,
.linkcopyload_btn:hover {
    color: var(--white);
    text-shadow: 0 0 5px var(--gray-300), 0 0 15px var(--white), 0 0 35px var(--gray-300), 0 0 40px var(--white);
}

.cha-bgm {
    position: fixed;
    bottom: 3%;
    z-index: 10002;
    filter: drop-shadow(0 3px 7px rgb(from var(--black) r g b / 58%));
}

#bgm-player {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

#play-pause-btn {
    cursor: pointer;
    border-radius: 10px;
    background: var(--cha-color);
    border: 1px solid rgb(from var(--white) r g b / 78%);
    width: 30px;
    height: 30px;
    color: var(--white);
    font-size: 15px;
    position: relative;
    left: 35px;
    bottom: 0;
    box-shadow:
        0 0 0 2px rgb(from var(--black) r g b / 35%),
        0 3px 9px rgb(from var(--black) r g b / 58%),
        0 0 12px rgb(from var(--cha-color) r g b / 48%);
    text-shadow: 0 1px 3px rgb(from var(--black) r g b / 85%);
    transition: filter .2s ease, box-shadow .2s ease, transform .2s ease;
}

#play-pause-btn:hover {
    filter: brightness(1.12);
    box-shadow:
        0 0 0 2px rgb(from var(--white) r g b / 48%),
        0 4px 12px rgb(from var(--black) r g b / 65%),
        0 0 16px rgb(from var(--cha-color) r g b / 70%);
    transform: translateY(-1px);
}

#play-pause-btn:focus-visible {
    outline: 2px solid var(--white);
    outline-offset: 3px;
}

#volume-bar {
    -webkit-appearance: none;
    appearance: none;
    width: 100px;
    height: 7px;
    background: rgb(from var(--black) r g b / 58%);
    border: 1px solid rgb(from var(--white) r g b / 72%);
    border-radius: 999px;
    box-shadow:
        0 2px 7px rgb(from var(--black) r g b / 72%),
        inset 0 0 0 1px rgb(from var(--cha-color) r g b / 42%);
    cursor: pointer;
    transform: rotate(-90deg);
    transform-origin: center;
    position: relative;
    top: -50px;
}

#volume-bar::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    background: var(--cha-color);
    border: 2px solid var(--white);
    border-radius: 50%;
    box-shadow:
        0 0 0 2px rgb(from var(--black) r g b / 45%),
        0 0 10px rgb(from var(--cha-color) r g b / 72%);
    cursor: pointer;
}

#volume-bar::-moz-range-track {
    height: 7px;
    background: rgb(from var(--black) r g b / 58%);
    border: 1px solid rgb(from var(--white) r g b / 72%);
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgb(from var(--cha-color) r g b / 42%);
}

#volume-bar::-moz-range-thumb {
    width: 15px;
    height: 15px;
    background: var(--cha-color);
    border: 2px solid var(--white);
    border-radius: 50%;
    box-shadow:
        0 0 0 2px rgb(from var(--black) r g b / 45%),
        0 0 10px rgb(from var(--cha-color) r g b / 72%);
    cursor: pointer;
}

.cha-b-s {
    position: fixed;
    left: 180px;
    bottom: 0px;
    height: 82%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    /* 시나리오부터 한마디까지의 묶음만 15px 위로 이동 */
    transform: translateY(-15px);
}

/* 시나리오/커뮤니티 이름 */
.cha-scenario {
    position: relative;
    width: min(440px, 42vw);
    max-width: calc(100vw - 220px);
    margin-left: 10px;
    /* 시나리오 텍스트→구분선 10px, 구분선→붓질 텍스처 약 10px */
    margin-bottom: 0;
    padding: 0 0 10px;
    border-bottom: 0;
    box-sizing: border-box;
    color: var(--white);
    font-family: 'ChosunSm', serif;
    font-size: 46px;
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -2px;
    word-break: keep-all;
    text-align: left;
    text-shadow:
        0 0 2px rgb(from var(--white) r g b / 98%),
        0 0 8px rgb(from var(--white) r g b / 78%),
        0 0 18px rgb(from var(--white) r g b / 48%),
        0 0 3px var(--black),
        0 0 12px rgb(from var(--gray-700) r g b / 72%);
}

/* 양 끝이 자연스럽게 사라지는 시나리오 구분선 */
.cha-scenario::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        rgb(from var(--white) r g b / 0%) 0%,
        rgb(from var(--white) r g b / 48%) 14%,
        rgb(from var(--white) r g b / 48%) 86%,
        rgb(from var(--white) r g b / 0%) 100%
    );
}

/* 캐치프레이즈: 한글 이름과 같은 타이포그래피를 사용하고, 작은 붓질만 뒤에 깝니다. */
.cha-catchphrase {
    position: relative;
    isolation: isolate;
    display: inline-block;
    width: max-content;
    max-width: min(620px, 58vw);
    padding: 0;
    box-sizing: border-box;
    color: var(--white);
    font-family: var(--f-pre);
    font-size: 20px;
    font-weight: normal;
    line-height: normal;
    letter-spacing: 6px;
    word-break: keep-all;
}

/* 메인 컬러 붓질: 텍스트보다 살짝 넓고, 좌측은 거칠게 시작해 우측으로 흐려집니다. */
.cha-catchphrase::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: -20px;
    top: 57%;
    width: calc(100% + 42px);
    height: 34px;
    transform: translateY(-50%) rotate(-0.35deg);
    transform-origin: left center;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        rgb(from var(--cha-color) r g b / 0.94) 0%,
        rgb(from var(--cha-color) r g b / 0.88) 18%,
        rgb(from var(--cha-color) r g b / 0.74) 58%,
        rgb(from var(--cha-color) r g b / 0.38) 82%,
        transparent 100%
    );
    -webkit-mask-image: url('../img/catchphrase-brush-mask.png');
    mask-image: url('../img/catchphrase-brush-mask.png');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: left center;
    mask-position: left center;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    opacity: 0.86;
    filter: drop-shadow(
        0 0 4px
        rgb(from var(--cha-color) r g b / 0.24)
    );
}

/* 붓질 가장자리의 옅은 번짐 */
.cha-catchphrase::after {
    content: "";
    position: absolute;
    z-index: 0;
    left: -15px;
    top: 58%;
    width: calc(100% + 28px);
    height: 22px;
    transform: translateY(-50%);
    pointer-events: none;
    background: linear-gradient(
        90deg,
        rgb(from var(--cha-color) r g b / 0.30) 0%,
        rgb(from var(--cha-color) r g b / 0.20) 65%,
        transparent 100%
    );
    -webkit-mask-image: url('../img/catchphrase-brush-mask.png');
    mask-image: url('../img/catchphrase-brush-mask.png');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: left center;
    mask-position: left center;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    opacity: 0.52;
    filter: blur(3px);
}

.cha-catchphrase-text {
    position: relative;
    z-index: 1;
    display: block;
    max-width: 100%;
    white-space: pre-wrap;
    color: var(--white);
    font: inherit;
    transform: translateX(10px);
    text-shadow: 0 0 5px var(--black), 0 0 15px var(--gray-700), 0 0 35px var(--gray-500), 0 0 40px var(--gray-500);
}

.cha-name {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.cha-name-primary,
.cha-name-secondary {
    color: var(--white);
}

/* 작성 화면에서 선택한 이름을 크게 표시 */
.cha-name-primary {
    font-size: 100px;
    line-height: 0.9;
    text-shadow: 0 0 2px rgb(from var(--black) r g b / 40%), 0 0 10px rgb(from var(--gray-700) r g b / 70%), 0 0 20px rgba(187, 187, 187, 0.3), 0 0 30px rgb(255 255 255 / 50%);
}

.cha-name-primary.cha-name-en {
    font-family: "Playfair Display", serif;
}

.cha-name-primary.cha-name-ko {
    font-family: 'ChosunSm', serif;
    letter-spacing: -2px;
}

/* 크게 표시하지 않은 이름은 위쪽에 작게 배치 */
.cha-name-secondary {
    position: relative;
    left: 10px;
    font-size: 17px;
    line-height: 1.2;
    text-shadow: 0 0 5px var(--black), 0 0 15px var(--gray-700), 0 0 35px var(--gray-500), 0 0 40px var(--gray-500);
}

.cha-name-secondary.cha-name-ko {
    font-family: var(--f-pre);
    letter-spacing: 6px;
}

.cha-name-secondary.cha-name-en {
    font-family: "Playfair Display", serif;
    font-size: 20px;
    letter-spacing: 1.5px;
}

/* 영문명 칸에 일본어·중국어가 입력된 경우 */
.cha-name-en.cjk-ja {
    font-family: "Zen Antique", serif;
}

.cha-name-en.cjk-zh {
    font-family: "Noto Serif SC", serif;
}


/* 일본어 가나·일본식 한자에는 일본어 명조를 우선 적용합니다.
   같은 문장 안의 한글은 한국어 본명조로 자동 폴백됩니다. */
.cha-scenario.cjk-ja,
.cha-catchphrase-text.cjk-ja,
.cha-name-primary.cha-name-en.cjk-ja {
    font-family: 'Noto Serif JP', 'BonmyeongjoSourceHanSerif', serif;
    font-weight: 400;
}

.cha-one-liner {
    position: relative;
    font-size: 22px;
    font-family: 'ChosunSm';
    font-style: italic;
    left: 40px;
    top: 15px;
    color: rgb(from var(--white) r g b / 95%);
    -webkit-animation: tracking-in-expand 3s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
    animation: tracking-in-expand 3s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
    text-shadow: 0 0 3px var(--black), 0 0 10px rgb(from var(--gray-700) r g b / 70%), 0 0 20px rgb(from var(--white) r g b / 80%);
}

.cha-one-liner::before {
    content: "“";
    position: absolute;
    font-size: 45px;
    top: 0px;
    left: -25px;
    opacity: 0.5;
}

.cha-one-liner::after {
    content: "";
}

.cha-c-s {
}

.cha-body-img {
    display: block;
    max-width: 100%;
    height: auto;

    filter:
        drop-shadow(0 0 7px rgba(255, 255, 255, 0.34))
        drop-shadow(0 0 18px rgba(255, 255, 255, 0.26))
        drop-shadow(0 0 36px rgba(255, 255, 255, 0.18))
        drop-shadow(0 0 58px rgba(255, 255, 255, 0.10));
}

.cha-c-option {
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    align-items: center;
    position: fixed;
    height: 100%;
    right: 10px;
    z-index: 500;
    /* filter: drop-shadow(2px 2px 4px rgb(from var(--white) r g b / 40%)); */
}

.cha-c-option .thumbnail {
    position: relative;
    display: block;
    width: 52px;
    height: 52px;
    margin: 0;
    padding: 0;
    border: 1px inset var(--gray-400);
    border-radius: 50%;
    background: linear-gradient(300deg, var(--gray-900) 25%, var(--gray-400) 100%);
    filter: brightness(0.5) drop-shadow(0 0 3px rgb(from var(--black) r g b / 50%));
    overflow: hidden;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: filter .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.cha-c-option .thumbnail img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    transition: opacity .22s ease;
}

.cha-c-option .thumbnail:hover {
    filter: brightness(0.5) drop-shadow(0 0 3px rgb(from var(--black) r g b / 50%));
    border-color: var(--gray-400);
}

.cha-c-option .thumbnail.is-active {
    border: 2px groove var(--cha-border-color);
    filter: brightness(0.9) drop-shadow(0 0 3px var(--white));
    background: var(--cha-border-color);
    box-shadow: 0 0 0 2px rgb(from var(--cha-color) r g b / 20%);
}

.cha-swap-label {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    border-radius: inherit;
    background: rgb(from var(--cha-color) r g b / 90%);
    color: var(--white);
    font-family: 'Galmuri9', monospace;
    font-size: 11px;
    line-height: 1.15;
    text-align: center;
    word-break: keep-all;
    opacity: 0;
    transform: scale(.82);
    transition: opacity .2s ease, transform .24s cubic-bezier(.2, .8, .2, 1);
    pointer-events: none;
    text-shadow: 0 1px 2px rgb(from var(--black) r g b / 55%);
}

.cha-c-option .thumbnail:hover .cha-swap-label,
.cha-c-option .thumbnail:focus-visible .cha-swap-label {
    opacity: 1;
    transform: scale(1);
}

.cha-c-option .thumbnail:hover img,
.cha-c-option .thumbnail:focus-visible img {
    opacity: .12;
}

.cha-c-option .thumbnail:focus-visible {
    outline: 2px solid var(--white);
    outline-offset: 3px;
}

.main-body-image {
    opacity: 0;
    animation: cha-right 1s ease-out forwards; /* 애니메이션 유지 */
    animation-delay: 1s;
    position: absolute;
    right: 0;
    height: 100%;
    overflow: scroll;
}

@keyframes cha-right {
    0% {
        opacity: 0;
        transform: translate3d(10%, 0, 0);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}

.cha-head {
    position: fixed;
    width: 200px;
    bottom: 60px;
    left: 250px;
    transform: none;
    filter: brightness(0.8) drop-shadow(-20px 20px 5px rgb(from var(--black) r g b / 70%));
    transition: filter .25s ease;
}

.cha-head:hover {
    transform: none;
    filter: brightness(1.05) drop-shadow(-5px 20px 5px rgb(from var(--black) r g b / 50%));
}

.cha-head-img {
    transform: none;
}

.cha-head-img:hover {
    transform: none;
    filter: drop-shadow(0 0 3px white);
}

.glow-line-container {
    position: fixed;
    bottom: 300px;
    left: 330px;
    width: 200px;
    transform: rotate(-50deg);
}

/* 두상 이미지와 기본 정보를 잇던 직선 장식은 사용하지 않습니다. */
.glow-line {
    display: none !important;
}

.line-text {
    --effect-text: #32343A;
    --effect-text2: #ffffff;
    position: absolute;
    top: 0;
    right: -40px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: #475569;
    opacity: 0;
    transform: rotate(50deg);
    animation: fadeInText 1s forwards;
    animation-delay: .35s;
    line-height: 1.5;
}

/* 첨부된 공통 서식 '제목5'를 기본 정보용으로 범위 한정해 적용 */
.line-text .textggu--title5.cha-basic-info-item {
    position: relative;
    display: inline-block;
    box-sizing: content-box;
    min-width: max-content;
    height: 24px;
    margin: 13px 10px 15px 0;
    padding: 5px 13px;
    border: 1px solid var(--effect-text);
    background: var(--effect-text2);
    color: #475569;
    font-family: 'Galmuri9', 'galmuri9', monospace;
    font-size: 13px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 0;
    text-shadow: none;
    filter: drop-shadow(7px 5px 0 var(--effect-text));
    transition: color .18s ease, translate .5s ease, filter .5s ease;
}

.line-text .textggu--title5.cha-basic-info-item::before {
    content: '- X';
    position: absolute;
    top: -14px;
    left: -1px;
    width: calc(100% + 2px);
    height: 14px;
    box-sizing: border-box;
    padding: 2px;
    border: 1px solid var(--effect-text);
    background: var(--effect-text2);
    color: var(--effect-text);
    font-size: 10px;
    line-height: 8px;
    text-align: right;
    transition: color .5s ease, background-color .5s ease;
}

.line-text .textggu--title5.cha-basic-info-item::after {
    content: '';
    position: absolute;
    right: -9px;
    top: 24px;
    display: block;
    width: 15px;
    height: 28px;
    background-image: url('https://cdn.pixabay.com/photo/2012/04/01/12/38/cursor-23229_960_720.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    pointer-events: none;
}

.line-text .textggu--title5.cha-basic-info-item:hover {
    color: var(--cha-color);
    translate: 6px 3px;
    filter: drop-shadow(2px 2px 0 var(--effect-text));
}

.line-text .textggu--title5.cha-basic-info-item:hover::before {
    background: var(--effect-text);
    color: var(--effect-text2);
}

/* 라인이 왼쪽에서 오른쪽으로 그려지는 애니메이션 */
@keyframes drawLine {
  from { width: 0; }
  to { width: 100%; }
}

/* 텍스트가 서서히 나타나는 애니메이션 */
@keyframes fadeInText {
  from { opacity: 0; }
  to { opacity: 1; }
}

.cha-d-s {
    --main: var(--cha-color);
    --main-color: var(--cha-color);
    --main-bg-color: var(--cha-color);
    --point: var(--cha-color);
    --point-color: var(--cha-color);
    --point-bg-color: var(--cha-color);
    --point-text-color: var(--white);
    --primary: var(--cha-color);
    --primary-color: var(--cha-color);
    --primary-bg-color: var(--cha-color);
    --accent: var(--cha-color);
    --accent-color: var(--cha-color);
    --accent-bg-color: var(--cha-color);
    --highlight: var(--cha-color);
    --highlight-color: var(--cha-color);
    --theme: var(--cha-color);
    --theme-color: var(--cha-color);
    --line-color: var(--cha-color);
    --color-primary: var(--cha-color);
    --color-point: var(--cha-color);
    --content-point-color: var(--cha-color);
    --content-accent-color: var(--cha-color);
    --btn-primary-bg: var(--cha-color);
    --btn-accent-bg: var(--cha-color);
    /* 미선택 탭은 충분히 어둡게, 선택·호버 탭은 메인 컬러에 가깝게 구분합니다. */
    --cha-tab-color: color-mix(in srgb, var(--cha-color) 38%, #000 62%);
    --cha-tab-active-color: color-mix(in srgb, var(--cha-color) 82%, #000 18%);
    --content-font-color: #475569;
    --content-font-family: 'Noto Sans KR', sans-serif;

    position: fixed;
    top: 50%;
    left: 50%;
    display: none;
    align-items: flex-start;
    transform: translate(-50%, -50%) scaleX(0);
    opacity: 0;
    max-width: min(960px, calc(100vw - 80px));
    max-height: min(620px, 84vh);
    overflow: visible;
    transition: transform 0.5s ease-in-out, opacity 0.3s ease-in-out;
    filter: drop-shadow(10px 20px 6px rgb(from var(--black) r g b / 45%));
    box-sizing: border-box;
    color: #475569;
    font-family: 'Noto Sans KR', sans-serif;
}

.cha-pro-area {
    position: relative;
    display: flex;
    align-items: stretch;
    justify-content: center;
    width: min(900px, calc(100vw - 130px));
    height: min(600px, 82vh);
    padding: 62px 70px 52px;
    overflow: hidden;
    border: 1px solid rgb(from var(--cha-color) r g b / 30%);
    border-radius: 20px;
    background:
        linear-gradient(145deg, rgb(248 250 252 / 93%) 0%, rgb(241 245 249 / 91%) 48%, rgb(226 232 240 / 89%) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 90%),
        0 18px 45px rgb(from var(--black) r g b / 24%);
    box-sizing: border-box;
    color: #475569;
    font-family: 'Noto Sans KR', sans-serif;
}

.cha-d-s-close-area {
    position: absolute;
    top: 12px;
    right: 18px;
    z-index: 5;
}

button#cha-d-s-close {
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #64748b;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 32px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    transition: color .18s ease, transform .18s ease;
}

button#cha-d-s-close:hover,
button#cha-d-s-close:focus-visible {
    color: var(--cha-color);
    transform: rotate(6deg) scale(1.05);
    outline: none;
}

.cha-profile {
    display: none;
    position: relative;
    width: 100%;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    color: #475569;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 14px;
    line-height: 1.8;
    letter-spacing: -0.02em;
    text-align: left;
    white-space: normal;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior: contain;
}

.cha-profile.active {
    display: block;
}

.cha-d-s::-webkit-scrollbar,
.cha-pro-area::-webkit-scrollbar,
.cha-profile::-webkit-scrollbar,
.cha-profile .ra0-content::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

.cha-d-btn {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    margin: 24px -1px 0 0;
    padding: 0;
    text-align: right;
}

.cha-d-btn button {
    position: relative;
    top: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    min-height: 68px;
    padding: 7px 5px;
    border: 1px solid var(--cha-tab-color);
    border-right: 0;
    border-radius: 6px 0 0 6px;
    background: var(--cha-tab-color);
    color: var(--white);
    box-shadow: -3px 5px 12px rgb(from var(--black) r g b / 14%);
    cursor: pointer;
    font-family: 'Galmuri9', 'galmuri9', monospace;
    font-size: 10px;
    font-weight: 400;
    line-height: 1;
    transition:
        background-color .22s ease,
        color .22s ease,
        border-color .22s ease,
        box-shadow .22s ease,
        transform .22s ease;
}

.cha-detail-tab-label {
    display: inline-block;
    writing-mode: vertical-rl;
    text-orientation: upright;
    letter-spacing: .16em;
    word-break: keep-all;
    font-family: 'Galmuri9', 'galmuri9', monospace;
    font-size: 10px;
    font-weight: 400;
}

.cha-d-btn button:hover,
.cha-d-btn button:focus-visible,
.cha-d-btn button.is-active {
    border-color: var(--cha-tab-active-color);
    background: var(--cha-tab-active-color);
    color: var(--white);
    box-shadow:
        -3px 5px 14px rgb(from var(--cha-color) r g b / 28%),
        inset 0 0 0 1px rgb(255 255 255 / 28%);
    transform: none;
    outline: none;
}

.cha-d-btn button.is-active {
    cursor: default;
}

.deco-app,
.deco-pro,
.deco-etc {
    display: none !important;
}

.cha-app,
.cha-pro,
.cha-etc {
    min-height: 100%;
    color: #475569;
    font-family: 'Noto Sans KR', sans-serif;
}

.cha-profile .ra0-content,
.cha-app .ra0-content,
.cha-pro .ra0-content,
.cha-etc .ra0-content {
    min-height: 100%;
    padding: 12px 14px 20px;
    border-radius: 12px;
    background: transparent;
    color: #475569;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: -0.02em;
    text-align: left;
    text-shadow: none;
    box-sizing: border-box;
}

.cha-profile .ra0-content *,
.cha-profile .ra0-content p,
.cha-profile .ra0-content li,
.cha-profile .ra0-content blockquote,
.cha-profile .ra0-content td,
.cha-profile .ra0-content th {
    font-family: 'Noto Sans KR', sans-serif;
    text-shadow: none;
}

.cha-profile .ra0-content p,
.cha-profile .ra0-content li,
.cha-profile .ra0-content blockquote,
.cha-profile .ra0-content td,
.cha-profile .ra0-content th {
    color: #475569;
}

.cha-profile .ra0-content a,
.cha-profile .ra0-content [class~="point"],
.cha-profile .ra0-content [class~="accent"],
.cha-profile .ra0-content [class~="highlight"],
.cha-profile .ra0-content [class*="text-point"],
.cha-profile .ra0-content [class*="point-text"] {
    color: var(--cha-color);
}

/* 에디터의 밑줄 서식은 제거하고, 선택된 상세 탭 색상으로 강조합니다.
   strong/em 등 다른 글자 서식은 건드리지 않습니다. */
.cha-profile .cha-underline-accent {
    text-decoration: none !important;
    text-decoration-line: none !important;
    text-decoration-thickness: 0 !important;
}

.cha-profile .cha-underline-accent,
.cha-profile .cha-underline-accent * {
    color: var(--cha-tab-active-color) !important;
}

.cha-profile .ra0-content hr,
.cha-profile .ra0-content [class*="line"],
.cha-profile .ra0-content [class*="bar"] {
    border-color: var(--cha-color);
}

.cha-profile .ra0-content [class*="line"]::before,
.cha-profile .ra0-content [class*="line"]::after,
.cha-profile .ra0-content [class*="bar"]::before,
.cha-profile .ra0-content [class*="bar"]::after {
    border-color: var(--cha-color);
    background-color: var(--cha-color);
}


.cha-e-s {
    width: 100%;
    height: 50px;
    display: flex;
    position: fixed;
    top: 20px;
    left: 80px;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.cha-another {
    width: 50px;
    height: 50px;
    overflow: hidden;
    border-radius: 15px;
    background: linear-gradient(300deg, var(--gray-900) 25%, var(--gray-400) 100%);
    filter: brightness(0.7);
    opacity: 0.5;
}

.cha-another:hover {
    filter: brightness(1) drop-shadow(0px 0px 6px var(--white));
    opacity: 1;
}


.cha-another img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bg-container {
    background: linear-gradient(300deg, var(--gray-900) 25%, var(--gray-700) 100%);
    background-size: cover;
    background-position: center;
    width: 100vw;
    height: 100vh;
    position: fixed;
    z-index: -1;
}

.bg-effect {
    width: 100vw;
    height: 100vh;
    bottom: 0;
    position: fixed;
    z-index: -1;
    background: linear-gradient(180deg, rgb(from var(--white) r g b / 0%) 50%, rgb(from var(--white) r g b / 50%) 100%);
    backdrop-filter: blur(3px);
}


/* ----------------------------------------------
 * Generated by Animista on 2025-3-19 0:46:16
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation tracking-in-expand
 * ----------------------------------------
 */
@-webkit-keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
@keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}


/* 반응형 스타일 */


/* 데스크톱 전신 이미지: 화면 가로폭의 절반에 맞추고 세로 스크롤 허용 */
@media (min-width: 769px) {
    .cha-c-s {
        position: fixed;
        inset: 0;
        display: flex;
        align-items: flex-start;
        justify-content: flex-end;
        z-index: 1;
        pointer-events: none;
    }

    .cha-b-s,
    .cha-d {
        z-index: 10;
    }

    /* 캐치프레이즈·이름·한마디 묶음만 기존 위치보다 조금 아래로 이동 */
    .cha-b-s {
        transform: translateY(34px);
    }

    .main-body-image {
        position: relative;
        right: auto;
        bottom: auto;
        display: block;
        width: 50vw;
        height: 100vh;
        margin-right: 8.33vw;
        padding-top: 50px;
        padding-bottom: 50px;
        max-width: none;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        pointer-events: auto;
        scrollbar-width: none;
    }

    .main-body-image::-webkit-scrollbar {
        display: none;
    }

    .cha-body-img {
        display: block;
        width: 100%;
        height: auto;
        max-width: none;
        max-height: none;
        object-fit: initial;
    }
}

@media (max-width: 768px) {

    .character-item {
        margin: 0;
    }

    .gallery-modal-close {
        top: 50px;
    }

    .all-section {}

    .cha-a-s {
        display: flex;
        width: 95%;
        height: 50px;
        z-index: 10001;
        position: fixed;
        gap: 0px;
        left: 2.5%;
        top: 0;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .a-s-option {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }

    .cha-bgm {
        position: relative;
        bottom: 0;
    }

    #volume-bar {
        transform: none;
        transform-origin: center;
        position: relative;
        top: 0;

    }

    #play-pause-btn {
        left: 0;
    }

    .cha-b-s {
        display: flex;
        width: 100%;
        left: 0;
        height: 93%;
        transform: translateY(3px);
    }

    .cha-scenario {
        width: min(86vw, 420px);
        max-width: 86vw;
        margin-left: 10px;
        margin-bottom: 0;
        padding-bottom: 10px;
        font-size: 28px;
        letter-spacing: -1px;
    }

    .cha-catchphrase {
        max-width: 86vw;
        padding: 0;
        font-size: 16px;
        letter-spacing: 4px;
    }

    .cha-catchphrase::before {
        left: -14px;
        top: 57%;
        width: calc(100% + 30px);
        height: 27px;
    }

    .cha-catchphrase::after {
        left: -10px;
        top: 58%;
        width: calc(100% + 20px);
        height: 18px;
        opacity: 0.46;
        filter: blur(2.5px);
    }

    .cha-one-liner {
        top: 0;
    }

    .cha-comment {
        display: none;
    }

    .cha-img {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 5px;
        height: 100%;
    }

    .cha--thumb {
        position: absolute;
        height: 80px;
        top: 30px;
        background-image: none !important;
        border: 0;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
    }

    .character-sd img {
        max-height: 60px;
    }

    .cha-gall {
        position: absolute;
        width: 20%;
        height: 80%;
        top: 120px;
        border-radius: 5px;
        box-sizing: border-box;
        overflow: scroll;
        padding: 10px;
        max-height: 85%;
        filter: saturate(0.7) opacity(0.7);
    }

    .gallery-container {
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 2px;
    }

    .cha-c-s {
        width: 100%;
        height: 95%;
        display: inline-flex;
        flex-wrap: nowrap;
        flex-direction: row;
        position: absolute;
        right: 0;
        bottom: 0;
        justify-content: flex-end;
        align-items: flex-end;
    }

    .cha-c-option {
        scale: 0.7;
        translate: 10px;
    }

    .main-body-image {
        z-index: 10;
        pointer-events: none;
    }

    .cha-body-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: bottom;
    }

    .cha-e-s {
        top: 5px;
        left: 50%;
        transform: translateX(-50%);
        width: fit-content;
        justify-content: center;
        z-index: 10000000;
    }
    .cha-another {
        width: 30px;
        height: 30px;
        border-radius: 6px;
    }

    .mobile-comment-toggle {
        display: block;
        margin: 15px 0;
        text-align: center;
        position: fixed;
        bottom: 0;
        left: -5px;
        z-index: 10000;
    }

    .mobile-comment-toggle button {
        padding: 8px 15px;
        background: var(--card-bg-color);
        color: var(--content-font-color);
        border-radius: 4px;
        font-size: 14px;
        border: 0;
        filter: drop-shadow(2px 2px 0px rgb(from var(--black) r g b / 50%));
    }

    .mobile-comment-toggle button.active {
        color: var(--card-bg-color);
        background: var(--content-font-color);
    }

    .cha-a-s {
        display: flex;
        width: 95%;
        height: 50px;
        z-index: 10001;
        position: fixed;
        gap: 0px;
        left: 2.5%;
        top: 0;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .toggle-button {
        display: block;
    }

    .cha-header {
        padding: 0;
        position: relative;
        top: 40px;
        left: 0px;
        z-index: 10;
        transform: scale(0.8);
    }

    .cha-header-width {
        width: 80%;
    }

    .cha-title {
        font-size: 50px;
        white-space: nowrap;
    }

    .cha-title::before {
        height: 30px;
        left: -15px;
    }

    .cha-name {
        scale: 0.7;
        translate: -40px;
        gap: 10px;
    }

    .cha-one-liner {
        width: 95%;
        padding-left: 0;
        padding: 10px;
        letter-spacing: -0.3px;
        line-height: 1.3;
        position: relative;
        top: -15px;
        left: 30px;
        z-index: 20;
        font-size: 23px;
        word-break: keep-all;
        white-space: pre-wrap;
    }

    .cha-one-liner::before {
        top: -5px;
        left: -5px;
    }

    .cha-flex {
        flex-direction: column;
    }

    .cha-d {
        z-index: 100;
    }

    .cha-head {
        position: fixed;
        width: 150px;
        bottom: 20px;
        left: 30px;
        transform: none;
        filter: brightness(0.8) drop-shadow(-20px 20px 5px rgb(from var(--black) r g b / 70%));
        transition: filter .25s ease;
    }

    .glow-line-container {
        left: 0;
        top: 60%;
        transform: rotate(0deg) translate(0px, -60%);
    }

    .glow-line {
        display: none;
        animation: none;
    }

    .line-text {
        position: fixed;
        display: flex;
        top: 0;
        bottom: 0;
        right: 0;
        left: 10px;
        transform: rotate(0deg);
        line-height: 1.3;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-start;
        align-content: flex-start;
        flex-wrap: nowrap;
    }

    .cha-d-s {
        display: none;
        position: absolute;
        margin: 0;
        padding: 10px;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 100%;
    }

    .cha-d-s.active {
        display: flex;
    }

    button#cha-d-s-close {
        font-size: 30px;
        padding: 5px;
    }

    .cha-pro-area {
        padding: 30px;
        width: 95%;
        box-sizing: border-box;
    }

    .cha-pro {
        font-size: 1rem;
        text-align: justify;
        letter-spacing: -0.2px;
    }

    .character-body {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 10;
    }

    .cha-info-flex {
        position: absolute;
        top: 100px;
        left: -50px;
        transform: scale(1);
    }

    .bg-effect::before {
        content: "";
        position: absolute;
        height: 100%;
        width: 100%;
        z-index: -20;
        background-image: var(--cha-bg);
        background-position: 40% 20%;
        opacity: 0.2;
        filter: saturate(0.5);
    }

    .character-content {
        justify-content: flex-start;
        height: 95%;
        background: linear-gradient(35deg, var(--black) 50%, rgb(from var(--gray-700) r g b / 70%) 100%);
        padding: 20px 25px;
    }

    .character-details {
        line-height: 1.7;
    }
}

/* -------------------------------------------------
 * 좌측 하단 두상 이미지 자동 크롭
 * 원본 기준: 600×600
 * 표시 범위: 중앙 450px × 상단 50px을 제외한 550px
 * 실제 원본 파일은 변경하지 않고 화면에서만 잘라 표시합니다.
 * ------------------------------------------------- */
.cha-head {
    aspect-ratio: 450 / 550;
    height: auto;
    overflow: hidden;
}

.cha-head-img {
    position: absolute;
    top: 0;
    left: 50%;
    display: block;

    /* 원본 600px 중 중앙 450px이 컨테이너 폭을 채우도록 확대 */
    width: 133.333333%;
    height: auto;
    max-width: none;
    max-height: none;

    /* 좌우는 중앙 정렬, 위쪽은 원본 기준 50px만큼 잘라냄 */
    transform: translate(-50%, -8.333333%);
    transform-origin: center top;
}

.cha-head:hover,
.cha-head-img:hover {
    transform: none;
}

/* 이미지 자체의 크롭 이동값은 호버해도 유지 */
.cha-head-img:hover {
    transform: translate(-50%, -8.333333%);
}


/* 기본 정보 제목5 모바일 크기 보정 */
@media (max-width: 768px) {
    .line-text .textggu--title5.cha-basic-info-item {
        height: 22px;
        margin: 12px 8px 13px 0;
        padding: 4px 10px;
        font-size: 12px;
        line-height: 22px;
        filter: drop-shadow(5px 4px 0 var(--effect-text));
    }

    .line-text .textggu--title5.cha-basic-info-item::before {
        top: -13px;
        height: 13px;
        font-size: 9px;
    }

    .line-text .textggu--title5.cha-basic-info-item::after {
        top: 22px;
        width: 13px;
        height: 25px;
    }
}

/* 프로필 상세 창 모바일 보정 */
@media (max-width: 768px) {
    .cha-d-s {
        position: fixed;
        top: 50%;
        left: 50%;
        align-items: stretch;
        width: auto;
        height: auto;
        max-width: calc(100vw - 24px);
        max-height: 88vh;
        margin: 0;
        padding: 0;
        overflow: visible;
    }

    .cha-d-btn {
        flex-direction: row;
        align-items: flex-end;
        gap: 4px;
        margin: 0 0 -1px 12px;
    }

    .cha-d-btn button {
        width: auto;
        min-width: 36px;
        min-height: 31px;
        padding: 6px 8px;
        border-right: 1px solid rgb(from var(--cha-color) r g b / 28%);
        border-bottom: 0;
        border-radius: 7px 7px 0 0;
    }

    .cha-detail-tab-label {
        writing-mode: horizontal-tb;
        text-orientation: mixed;
        letter-spacing: 0;
    }

    .cha-d-btn button:hover,
    .cha-d-btn button:focus-visible,
    .cha-d-btn button.is-active {
        transform: none;
    }

    .cha-pro-area {
        width: calc(100vw - 24px);
        height: min(72vh, 620px);
        padding: 54px 24px 34px;
        border-radius: 16px;
    }
}


/* =========================================================
 * 최종 프로필 위치·간격·기본 정보 보정
 * ========================================================= */

/* 데스크톱 좌우 고정 컨트롤을 화면 가장자리에서 10px 띄웁니다. */
@media (min-width: 769px) {
    .cha-a-s {
        left: 10px;
    }

    .cha-c-option {
        right: 10px;
    }

    /* 좌측 하단 두상 이미지를 기존 위치보다 30px 위로 이동 */
    .cha-head {
        bottom: 90px;
    }
}

/* 모바일에서도 두상 이미지를 기존 위치보다 30px 위로 이동 */
@media (max-width: 768px) {
    .cha-head {
        bottom: 50px;
    }
}

/* 기본 정보는 세로 순서를 유지하면서 항목별로 좌우 위치만 다르게 배치 */
.line-text .cha-basic-info-item:nth-child(1) {
    left: -10px;
}

.line-text .cha-basic-info-item:nth-child(2) {
    left: 5px;
}

.line-text .cha-basic-info-item:nth-child(3) {
    left: -5px;
}

.line-text .cha-basic-info-item:nth-child(4) {
    left: 0;
}

/* =========================================================
 * 2026-07-30 프로필 여백·위치 추가 보정
 * ========================================================= */

/* 시나리오 텍스트→구분선은 20px,
   구분선→캐치프레이즈 붓질도 시각적으로 약 20px 확보 */
.cha-scenario {
    padding-bottom: 20px;
    margin-bottom: 12px;
}

/* 기본 정보 항목별 좌우 오프셋 */
.line-text .cha-basic-info-item:nth-child(1) {
    left: -15px;
}

.line-text .cha-basic-info-item:nth-child(2) {
    left: 10px;
}

.line-text .cha-basic-info-item:nth-child(3) {
    left: -10px;
}

.line-text .cha-basic-info-item:nth-child(4) {
    left: 0;
}

@media (min-width: 769px) {
    /* 좌우 고정 요소를 화면 가장자리에서 20px 띄움 */
    .cha-a-s {
        left: 10px;
    }

    .cha-c-option {
        right: 20px;
    }

    /* 현재 위치에서 텍스트 묶음을 추가로 15px 위로 */
    .cha-b-s {
        transform: translateY(-30px);
    }

    /* 현재 위치에서 두상 이미지를 추가로 30px 위로 */
    .cha-head {
        bottom: 120px;
    }
}

@media (max-width: 768px) {
    .cha-scenario {
        padding-bottom: 20px;
        margin-bottom: 12px;
    }

    /* 모바일에서도 현재 위치에서 추가로 15px 위로 */
    .cha-b-s {
        transform: translateY(-12px);
    }

    /* 모바일 두상 이미지도 현재 위치에서 추가로 30px 위로 */
    .cha-head {
        bottom: 80px;
    }
}

/* =========================================================
 * 2026-07-30 기본 정보 추가 위치 및 두상 툴팁
 * ========================================================= */

/* 기존 위치에서 추가 이동한 최종 좌우 오프셋 */
.line-text .cha-basic-info-item:nth-child(1) {
    left: -30px;
}

.line-text .cha-basic-info-item:nth-child(2) {
    left: 20px;
}

.line-text .cha-basic-info-item:nth-child(3) {
    left: -15px;
}

.line-text .cha-basic-info-item:nth-child(4) {
    left: 0;
}

/* 제목5 기본 정보 항목 사이의 세로 간격 */
.line-text {
    row-gap: 5px;
}

/* 두상 크롭 영역과 툴팁을 함께 움직이는 바깥 래퍼 */
.cha-head-wrap {
    position: fixed;
    width: 200px;
    aspect-ratio: 450 / 550;
    left: 250px;
    bottom: 120px;
    z-index: 120;
}

.cha-head-wrap .cha-head {
    position: relative !important;
    inset: auto !important;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    overflow: hidden;
}

/* 두상 위 말풍선 툴팁 */
.cha-head-tooltip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 13px);
    z-index: 4;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    min-width: max-content;
    height: 28px;
    min-height: 28px;
    padding: 0 13px;
    box-sizing: border-box;

    border: 1px solid rgb(from var(--white) r g b / 55%);
    border-radius: 999px;
    background: var(--cha-color);
    color: var(--cha-tooltip-text, var(--white));
    box-shadow:
        0 5px 14px rgb(from var(--black) r g b / 28%),
        0 0 9px rgb(from var(--cha-color) r g b / 35%);

    font-family: 'Galmuri9', 'galmuri9', monospace;
    font-size: 11px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    white-space: nowrap;

    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(-50%, 7px, 0);
    transform-origin: center bottom;
    backface-visibility: hidden;
    will-change: opacity, transform;
    transition:
        opacity .22s ease,
        transform .28s cubic-bezier(.22, .8, .28, 1),
        visibility 0s linear .28s;
}

/* 말풍선 본체와 꼬리의 테두리가 겹치지 않도록 연결부를 덮습니다. */
.cha-head-tooltip::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -2px;
    z-index: 2;
    width: 15px;
    height: 4px;
    background: var(--cha-color);
    transform: translateX(-50%);
    pointer-events: none;
}

/* 꼬리는 회전한 정사각형으로 만들고 바깥쪽 두 면에만 테두리를 표시합니다. */
.cha-head-tooltip::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    z-index: 1;
    width: 10px;
    height: 10px;
    box-sizing: border-box;
    background: var(--cha-color);
    border-right: 1px solid rgb(from var(--white) r g b / 55%);
    border-bottom: 1px solid rgb(from var(--white) r g b / 55%);
    transform: translateX(-50%) rotate(45deg);
    transform-origin: center;
    filter: drop-shadow(2px 2px 2px rgb(from var(--black) r g b / 14%));
    pointer-events: none;
}

.cha-head-wrap:hover .cha-head-tooltip,
.cha-head-wrap:focus-within .cha-head-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translate3d(-50%, 0, 0);
    transition-delay: 0s;
}

@media (max-width: 768px) {
    .cha-head-wrap {
        width: 150px;
        left: 30px;
        bottom: 80px;
    }

    .cha-head-tooltip {
        bottom: calc(100% + 11px);
        height: 26px;
        min-height: 26px;
        padding: 0 11px;
        font-size: 11px;
    }
}



/* =========================================================
 * 2026-07-30 전신 세트 연동·스왑 버튼 안정화·배경 노이즈
 * ========================================================= */

.cha-catchphrase.is-empty {
    display: none !important;
}

/* 밝기 필터를 버튼 전체가 아니라 이미지에만 적용해 툴팁 글자가 어두워지지 않게 합니다. */
.cha-c-option .thumbnail,
.cha-c-option .thumbnail:hover,
.cha-c-option .thumbnail:focus-visible,
.cha-c-option .thumbnail.is-active {
    filter: drop-shadow(0 0 3px rgb(from var(--black) r g b / 50%));
}

.cha-c-option .thumbnail img {
    image-rendering: auto;
    filter: brightness(.48) saturate(.9);
    transform: translateZ(0);
    backface-visibility: hidden;
    transition: opacity .18s ease, filter .18s ease;
}

.cha-c-option .thumbnail.is-active img {
    filter: brightness(.92) saturate(1);
}

.cha-c-option .thumbnail:hover img,
.cha-c-option .thumbnail:focus-visible img {
    opacity: .12;
    filter: brightness(.7) saturate(.9);
}

/* scale 애니메이션을 제거해 종료 직후 글자가 재배치되는 현상을 방지합니다. */
.cha-swap-label {
    color: #fff !important;
    filter: none !important;
    height: 100%;
    min-height: 100%;
    box-sizing: border-box;
    white-space: nowrap;
    word-break: keep-all;
    font-family: 'Galmuri9', 'galmuri9', monospace;
    font-size: 11px;
    font-weight: 400;
    font-kerning: none;
    font-variant-ligatures: none;
    line-height: 1;
    transform: none;
    backface-visibility: hidden;
    will-change: opacity;
    transition: opacity .18s ease;
}

.cha-c-option .thumbnail:hover .cha-swap-label,
.cha-c-option .thumbnail:focus-visible .cha-swap-label {
    color: #fff !important;
    filter: none !important;
    transform: translate3d(0, 0, 0);
}

/* 캐릭터 배경 위, 캐릭터와 UI 아래에만 아주 연한 필름 그레인을 얹습니다. */
.bg-container,
.bg-effect {
    z-index: -2;
}

.bg-noise {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .075;
    mix-blend-mode: soft-light;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.8'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 180px 180px;
}


/* =========================================================
 * 메인 프로필/프로필 전환 버튼 최종 보정
 * ========================================================= */

/* 세로 탭 제목의 글자 사이 간격을 줄입니다. */
.cha-detail-tab-label {
    letter-spacing: .06em;
}

/* 좌측 상단 프로필 전환 버튼: 각 프로필의 메인 컬러 + 좌측 하단과 동일한 450×550 크롭 */
.cha-e-s {
    height: 64px;
    gap: 7px;
}

.cha-another {
    position: relative;
    /* 기존 높이는 유지하고 좌우 폭만 넓혀 정사각형으로 표시 */
    width: 61px;
    height: 61px;
    aspect-ratio: 1 / 1;
    flex: 0 0 61px;
    overflow: hidden;
    border: 1px solid rgb(from var(--white) r g b / 70%);
    border-radius: 12px;
    background: var(--profile-switch-color, var(--cha-color));
    box-shadow:
        0 3px 10px rgb(from var(--black) r g b / 36%),
        inset 0 0 0 1px rgb(from var(--profile-switch-color, var(--cha-color)) r g b / 45%);
}

.cha-another .another {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.cha-another img.reply-head-img {
    position: absolute;
    top: 0;
    left: 50%;
    display: block;
    width: 133.333333%;
    height: auto;
    max-width: none;
    max-height: none;
    object-fit: initial;
    transform: translate(-50%, -8.333333%);
    transform-origin: center top;
}

.bg-effect {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;

    background: linear-gradient(
        180deg,
        rgb(from var(--white) r g b / 0%) 50%,
        rgb(from var(--white) r g b / 50%) 100%
    );

    backdrop-filter: blur(3px);
    overflow: hidden;
    isolation: isolate;
}

/* 캐릭터 배경 바로 위 펄린 노이즈 */
.bg-effect::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 320px 320px;
    background-position: center;

    mix-blend-mode: soft-light;
    opacity: 0.5;
}
/* =========================================================
 * 좌측 상단 연동 프로필 버튼: 하단 말풍선 + 부드러운 밝기 전환
 * ========================================================= */
.cha-e-s {
    overflow: visible;
}

.cha-another {
    overflow: visible;
    filter:
        brightness(.72)
        drop-shadow(0 0 0 rgb(from var(--white) r g b / 0%));
    opacity: .58;
    transition:
        filter .48s cubic-bezier(.22, .61, .36, 1),
        opacity .42s ease,
        box-shadow .42s ease;
    will-change: filter, opacity;
}

.cha-another:hover,
.cha-another:focus-within {
    filter:
        brightness(1.02)
        drop-shadow(0 0 6px rgb(from var(--white) r g b / 88%));
    opacity: 1;
}

/* 버튼 아래에 표시되는 '프로필 / 변경' 말풍선 */
.cha-another::after {
    content: "프로필\A변경";
    position: absolute;
    left: 50%;
    top: calc(100% + 18px);
    z-index: 22;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    min-width: max-content;
    min-height: 28px;
    padding: 6px 13px 5px;
    box-sizing: border-box;

    border: 1px solid rgb(from var(--white) r g b / 55%);
    border-radius: 14px;
    background: var(--profile-switch-color, var(--cha-color));
    color: var(--profile-switch-text-color, var(--white));
    box-shadow:
        0 5px 14px rgb(from var(--black) r g b / 28%),
        0 0 9px rgb(from var(--profile-switch-color, var(--cha-color)) r g b / 35%);

    font-family: 'Galmuri9', 'galmuri9', monospace;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: 0;
    text-align: center;
    white-space: pre-line;
    text-shadow: 0 1px 2px rgb(from var(--black) r g b / 28%);

    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(-50%, -7px, 0);
    transform-origin: center top;
    backface-visibility: hidden;
    transition:
        opacity .22s ease,
        transform .3s cubic-bezier(.22, .8, .28, 1),
        visibility 0s linear .3s;
}

/* 위쪽을 향하는 꼬리: 본체보다 위에 올려 상단 테두리를 자연스럽게 덮습니다. */
.cha-another::before {
    content: "";
    position: absolute;
    left: 50%;
    top: calc(100% + 13px);
    z-index: 23;

    width: 11px;
    height: 11px;
    box-sizing: border-box;
    background: var(--profile-switch-color, var(--cha-color));
    border-top: 1px solid rgb(from var(--white) r g b / 55%);
    border-left: 1px solid rgb(from var(--white) r g b / 55%);
    box-shadow: -2px -2px 3px rgb(from var(--black) r g b / 10%);

    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(-50%, -7px, 0) rotate(45deg);
    transform-origin: center;
    backface-visibility: hidden;
    transition:
        opacity .22s ease,
        transform .3s cubic-bezier(.22, .8, .28, 1),
        visibility 0s linear .3s;
}

.cha-another:hover::before,
.cha-another:hover::after,
.cha-another:focus-within::before,
.cha-another:focus-within::after {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

.cha-another:hover::before,
.cha-another:focus-within::before {
    transform: translate3d(-50%, 0, 0) rotate(45deg);
}

.cha-another:hover::after,
.cha-another:focus-within::after {
    transform: translate3d(-50%, 0, 0);
}

/* consolidated release: 2026-07-30 */