@charset "utf-8";

/* ----------------------------------------------
  [1] 전역 설정 및 폰트
  :root 내의 변수들은 전체 문서에서 재사용할 수 있는 전역 변수
  --main: 본문 글자색, --sub: 보조 또는 전경색, --point: 강조색
  --font: 본문폰트, --font2: 제목폰트 
  .ham 요소(제목 및 강조텍스트)에는 제목폰트가 적용
  .avocado-list 요소는 마우스오버, 상태변환 등에 부드러운 애니메이션 효과
---------------------------------------------- */
@font-face {
    font-family: 'Paperlogy-4Regular';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'SchoolSafetyNotification';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-5@1.0/HakgyoansimAllimjangTTF-R.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'SchoolSafetyNotification';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-5@1.0/HakgyoansimAllimjangTTF-B.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

:root {
  --main: #000;
  --sub: #312f2f;
  --point: crimson;
  --font: 'Paperlogy-4Regular', sans-serif;
  --font2: "Hahmlet";
}

.ham { font-family: var(--font2); }
.avocado-list * { transition: all ease 0.3s; }


/* ----------------------------------------------
  [2] 게시판 공통 요소 스타일
  .board-notice는 게시판 상단에 표시되는 공지사항 영역
  .avocado-list는 게시글 목록을 감싸는 컨테이너로, 자식 요소들 중앙 정렬
    각 li 요소들은 개별 게시글 항목
  .bo_notice와 .no-data는 각각 공지와 게시글이 없을 때의 스타일
  .td_chk 게시글 목록 좌측에 위치하는 체크박스(절대위치)
  li a는 게시글 항목을 클릭할 수 있게 만드는 링크에 적용
  .title은 제목 영역에 큰 글씨와 여백 적용
  .sub_title과 ::before은 서브타이틀과 부제목에 강조효과 및 문자간격 적용
  .people은 게시글 작성자 또는 등장인물 정보 표시에 적용
  .bottom_title은 게시글 하단의 제목 또는 설명 영역 설정
  .ico-cate는 아이콘, 날짜, 작성자 등 부가 요소 스타일
  .name은 작성자 이름 표시 영역
  .hit은 게시글 조회수 표시 영역
  .date는 게시글 작성일자지만 일단 안 뜨게 설정
---------------------------------------------- */
/* html { font-size: 14px; } */

.fix-layout {
  max-width: 900px;
}

.board-notice {
  width: 264px;
  padding: 10px;
  margin: 0 auto;
  text-align: center;
  box-sizing: border-box;
}

.avocado-list {
  display: block;
  position: relative;
  text-align: center;
  margin: 0 auto;
  padding: 0;
  max-width: 1000px;
}

.avocado-list li {
  position: relative;
  width: 80%;
  height: 200px !important;
  margin: 15px auto;
  padding: 5px 0;
  border-radius: 10px; 
  display: inline-block;
  font-family: var(--font);
  transition: transform 0.3s ease;
}

.avocado-list li:hover {
  transform-origin: center;
  transform: scale(1.08);
  z-index: 10;
  box-shadow: 0 0 15px #00000057;
}

.avocado-list li.bo_notice { }
.avocado-list li.no-data {
  text-align: center;
  line-height: 200px;
}

.avocado-list li .td_chk {
  position: absolute;
  top: 0;
  left: 0;
  padding-left: 5px;
  line-height: 35px;
  z-index: 10;
}

.avocado-list li a {
  display: block;
  position: relative;
  color: var(--sub);
  line-height: 180%;
}

.avocado-list li .title {
  font-size: 30px;
  font-weight: 500;
  margin: 5px 0;
  display: block;
}

.avocado-list li .sub_title {
  font-size: 14px;
  font-weight: bold;
  color: var(--point);
  text-transform: uppercase;
  letter-spacing: 2px;
}

.avocado-list li .sub_title::before {
  content: "| ";
}

.avocado-list li .people {
  line-height: 250%;
  padding-left: 5px;
  letter-spacing: 2px;
  opacity: 0.8;
}

.avocado-list li .bottom_title {
  text-align: left;
  margin-top: 80px;
  padding-left: 30px;
  color: var(--main);
}

.avocado-list li .ico-cate {
  background-color: var(--sub);
  color: white;
  border-radius: 2em;
  padding: 2px 20px;
  position: absolute;
  top: 20px;
  right: 30px;
  text-align: center;
  display: inline-block;
}

.avocado-list li .name,
.avocado-list li .hit {
  font-size: 11px;
  opacity: 0.6;
  text-align: center;
  position: absolute;
  top: 0;
  display: block;
  }

.avocado-list li .name {
  right: 100px;
  width: 100px;
}

.avocado-list li .hit {
  right: 0;
  width: 50px;
}

.avocado-list li .date {
  position: absolute;
  bottom: 20px;
  right: 40px;
  font-size: 13px;
  text-align: center;
  opacity: 0;
}

.avocado-list li:hover .date {
  opacity: 0.9;
}

iframe.responsive-iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    display: block;
    border: 0;
}



/* ----------------------------------------------
  [3] 하단 기능 영역 및 작성 화면 스타일
  .bo_fx는 게시판 하단의 버튼 영역(글쓰기, 목록, 선택 삭제 등)을 감쌈
  .board-category는 게시판 카테고리 선택 드롭다운의 기본 레이아웃
  .board-write는 게시글 작성 화면의 제목, 공지, 입력필드 등의 레이아웃
---------------------------------------------- */
.bo_fx {
  position: relative;
  padding: 20px 0;
}

.bo_fx .chk_all {
  position: absolute;
  left: 5px;
  top: 20px;
}

.board-category {
  display: block;
  position: relative;
  margin-bottom: 10px;
}
.board-category select { }

.bo_fx {
  position: relative;
  padding: 20px 0;
}
.bo_fx .chk_all {
  position: absolute;
  left: 5px;
  top: 20px;
}

.board-category {
  display: block;
  position: relative;
  margin-bottom: 10px;
}
.board-category select { }

/* ★ 여기부터 글쓰기 새 버전 */
/* 글쓰기 박스 폭 */
#bo_w .board-write,
.board-write.theme-box {
  max-width: 820px;
  margin: 0 auto;
  padding: 10px 10px 0;
}

/* 각 줄을 2열 그리드로 */
#bo_w .board-write > dl {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr); /* 라벨 / 입력칸 */
  gap: 10px;
  margin: 10px 0;
  position: static;  /* 예전 position:relative 영향 제거 */
}

/* 라벨(dt) – 왼쪽, 위에 고정 */
#bo_w .board-write > dl > dt {
  position: static !important;  /* 기존 absolute 덮어쓰기 */
  text-align: right;
  align-self: flex-start;        /* 위쪽 정렬 */
  padding-right: 6px;
  white-space: nowrap;
  font-size: 13px;
  color: #4a4a4a;
  line-height: 1.4;
  padding-top: 9px;
}
input.frm_file.frm_input { height: 32px; }

/* 입력칸(dd) – 그냥 전체 너비 */
#bo_w .board-write > dl > dd {
  margin: 0;
  padding: 0;
}

/* 공통 인풋 룩 */
#bo_w .board-write input.frm_input,
#bo_w .board-write input.frm_input.full,
#bo_w .board-write select,
#bo_w .board-write textarea {
  width: 100%;
  border: 1px solid rgba(110,70,50,.25);
  border-radius: 10px;
  padding: 8px 10px;
  background: #fff;
  font: inherit;
  color: #333;
}

#bo_w .btn_confirm{ margin-top:16px; text-align:center }
#bo_w .btn_confirm .ui-btn{
  display:inline-block; background:#fff; color:#222;
  border:1px solid rgba(0,0,0,.15); border-radius:10px;
  padding:8px 16px; text-decoration:none; font-weight:600; line-height:1.2;
  box-shadow:0 1px 3px rgba(0,0,0,.06)
}
#bo_w .btn_confirm .ui-btn:hover{ background:#f5f5f5; box-shadow:0 2px 6px rgba(0,0,0,.10) }
#bo_w .btn_confirm .ui-btn.point{ background:#ae5d5c; border-color:#ae5d5c; color:#fff }

#bo_w .board-write textarea{ height: 50px; }

/* ========================
   등장인물 줄 3등분 + 추가 URL 줄
======================== */
#character-list .character-row{
  display: grid;
  grid-template-columns: 150px minmax(140px, 1fr) minmax(180px, 1.2fr) auto;
  gap: 3px;
  align-items: flex-start;
  margin-top: 7px;
}

/* 1) 모든 URL 입력칸은 3번째 칸으로 */
#character-list .character-row input[name^="bf_url"]{
  grid-column: 3 / 4;
  width: 100%;
}

/* 2) 첫 번째 이후 URL들은 같은 3번째 칸에서 아래로만 쌓이게 */
#character-list .character-row input[name^="bf_url"] ~ input[name^="bf_url"]{
  grid-column: 3 / 4;
  margin-top: 4px;
}

/* 3) + 버튼은 항상 맨 위, 4번째 칸 */
#character-list .character-row .add-url-only{
  grid-column: 4 / 5;
  grid-row: 1;
  background: #000;
  color: #fff;
  border: 0;
  border-radius: 7px;
  padding: 5px 11px;
  cursor: pointer;
  white-space: nowrap;
}
#character-list .character-row > .url-only-row{
  grid-column: 3 / 4;   /* URL 자리 */
  display: flex;
  gap: 6px;
  margin-top: 4px;
}
#character-list .character-row > .url-only-row input{
  flex: 1 1 auto;
  width: 100%;
}

/* 모바일일 때 한 줄로 */
@media (max-width: 800px){
  #bo_w .board-write > dl{
    grid-template-columns: 1fr;
  }
  #bo_w .board-write > dl > dt{
    text-align: left;
    padding-right: 0;
  }
  #character-list .character-row{
    grid-template-columns: 1fr;
  }
  #character-list .character-row > .url-only-row{
    grid-column: 1 / -1;
  }
}

.board-write input.frm_input.full {
  width: 100%;
  display: block;
  margin: 1px 0;
}

#bo_btn_top{
  margin:10px 0;
  overflow:hidden;
}
#bo_btn_top .btn_bo_user{
  margin:0;
  padding:0;
  list-style:none;
  float:right;
  display:flex;
  gap:6px;
  align-items:center;
}
#bo_btn_top .btn_bo_user li{ margin:0; padding:0 }

#bo_btn_top .btn_bo_user a.ui-btn,
#bo_btn_top .btn_bo_user button.ui-btn{
  display:inline-block;
  background:#fff;
  color:#222;
  border:1px solid rgba(0,0,0,.15);
  border-radius:10px;
  padding:6px 14px;
  text-decoration:none;
  font-weight:600;
  line-height:1.2;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
  cursor:pointer;
}
#bo_btn_top .btn_bo_user a.ui-btn:hover,
#bo_btn_top .btn_bo_user button.ui-btn:hover{
  background:#f5f5f5;
  box-shadow:0 2px 6px rgba(0,0,0,.10);
}

/* 체크박스는 왼쪽으로 */
#bo_btn_top .chk_all{
  float:left;
  line-height:28px;
}

#bo_sch form { justify-content: center; margin: 0 30% }



/* ----------------------------------------------
  [4] 게시글 상세보기 영역
  게시글 상세보기 페이지의 전체 컨테이너와 제목 영역 스타일
---------------------------------------------- */
.board-viewer.theme-box {
  display: block;
  position: relative;
  padding: 40px;
  color: var(--main) !important;
  border-radius: 15px !important;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 1) 300px, rgba(255, 255, 255, 0) 500px);
  /* background-color: rgba(255, 255, 255, 0.8); */
  background-color: rgba(255, 255, 255);
  background-blend-mode: lighten;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  max-width: 900px !important;
}

.board-viewer .cate_btn {
  display: inline-block;
  padding: 2px 20px;
  text-align: center;
  background-color: var(--sub);
  color: white;
  border-radius: 2em;
  position: absolute;
  right: 40px;
  top: 30px;
}

.board-viewer .subject {
  text-align: left;
  z-index: 1;
  position: relative;
  margin-top: 120px;
  /* width: 80%; */
}
.board-viewer .subject em {
  display: block;
  position: relative;
  font-size: 14px;
  line-height: 1.2em;
  padding-bottom: 10px;
}
.board-viewer .subject .chapter {
  font-size: 16px;
  letter-spacing: 3px;
  font-weight: bold;
  color: var(--point);
}
.board-viewer .subject .chapter::before {
  content: "| ";
}
.board-viewer .subject .title {
  display: block;
  position: relative;
  line-height: 1.2em;
  color: var(--sub);
  font-size: 42px;
  font-style: normal;
  font-weight: 400;
}



/* ----------------------------------------------
  [5] 작성자 정보 및 태그 목록
  작성자, 작성일, 조회수, 썸네일 정보 및 태그 목록 스타일
---------------------------------------------- */
.board-viewer .info {
  margin-top: -30px;
  text-align: right;
  float: right;
  color: gray;
  font-size: 14px;
}
.board-viewer .info::after {
  content: "";
  display: block;
  clear: both;
}
@media (max-width: 640px){
  .board-viewer .info{
    float: none; 
    width: 100%;
    text-align: right; 
    margin-top: -30px;
  }

  .board-viewer .info .people{
    justify-content: flex-end;
    flex-wrap: wrap;
  }
}

.board-viewer .info span {
  display: block;
  opacity: 0.8;
}
.board-viewer .info span + span:before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 8px;
  vertical-align: middle;
  margin: 0 10px;
}

.board-viewer .info .people {
  position: relative;
  z-index: 1;
  display: flex;
  margin-top: 10px;
  justify-content: flex-end;
}
.board-viewer .info .people li {
  display: flex;
  align-items: center;
}
.board-viewer .info .people li:not(:first-child)::before {
  content: " | ";
  margin: 0 10px;
}
.board-viewer .info .people .thumb_head {
    display: inline-flex;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    border: 1px solid #999;
    margin-right: 5px;
}
.board-viewer .info .people .thumb_head img {
    width: 150%;
    max-width: none;
    transform: translateY(5%);
}



/* ----------------------------------------------
  [6] 본문 내용 및 배경 이미지
  게시글 본문, 배경 이미지, 요약 텍스트 등 스타일 정의
---------------------------------------------- */
.board-viewer .contents {
  display: block;
  position: relative;
  margin: 1em 0 1.5em 0;
  padding: 20px 15px;
  border-left-width: 0;
  border-right-width: 0;
  font-size: clamp(0.8rem, 2.2vw, 1rem);
  font-weight: 400;
  font-family: var(--font);
}

.board-viewer .contents.summary {
  border-bottom: 2px dotted rgb(204, 204, 204);

  /* ✅ 추가 */
  clear: both;        /* float(.info) 밑으로 확실히 내려가게 */
  width: 100%;        /* 점선이 박스 폭에 맞게 */
  box-sizing: border-box;
  overflow: hidden;   /* 모바일에서 점선/내용 삐져나옴 방지 */
}

.board-viewer .image-back {
  height: 220px;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-size: cover;
  background-position: center;
  border-radius: 15px 15px 0 0;
}

.theme-box.con_box::before {
  z-index: 1;
}

.board-viewer .image-back::after {
  content: '';
  position: absolute;
  display: block;
  width: 100%;
  height: 220px;
  bottom: 0;
  background: linear-gradient(to top, #ffffff, #ffffff 0%, transparent);
}

.board-viewer .in_head img {
  width: auto;
  max-width: 60px;
  height: auto;
  max-height: 200px;
  object-fit: contain;
  object-position: bottom;
  image-rendering: smooth;
  margin-right: 0.5em;
}



/* ----------------------------------------------
  [7] 댓글 영역
  댓글 목록, 작성자, 입력 폼, 답글 및 유틸리티 관련 스타일
---------------------------------------------- */
.board-comment-list {
  position: relative;
}

.board-comment-list .co-line {
  display: block;
  position: relative;
  clear: both;
  width: 100%;
  height: 1px;
  margin: 0;
  padding: 0;
  border: none;
}

.board-comment-list .item {
  position: relative;
  padding: 10px 10px 10px 100px;
}

.board-comment-list .co-name {
  position: absolute;
  top: 0px;
  left: 0;
  bottom: 0;
  width: 90px;
  padding: 10px 10px;
  box-sizing: border-box;
}

.board-comment-list .co-info {
  display: block;
  text-align: right;
  padding-top: 15px;
  font-size: 11px;
  opacity: 0.7;
  margin-bottom: 30px;
}

.board-comment-list .co-info span {
  display: inline-block;
  opacity: 0.8;
}

.board-comment-list .co-info span + span:before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 8px;
  vertical-align: middle;
  margin: 0 10px;
}

.board-comment-list .item.reply {
  border-left: 5px solid rgba(255, 255, 255, 0.1);
}

.board-comment-list .item.reply .co-name {
  background: none;
}

.board-comment-list + .board-comment-write {
  margin-top: 20px;
}

.board-comment-form {
  position: relative;
  padding-right: 80px;
}

.board-comment-form .btn_confirm {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 29px;
  width: 80px;
}

.board-comment-form .btn_confirm .ui-btn {
  width: 100%;
  height: 100%;
}

.board-comment-form p {
  margin: 0;
  padding: 5px 10px;
}

.board-comment-form textarea {
  display: block;
  height: 100px;
  resize: none;
  border: none;
}



/* ----------------------------------------------
  [8] 말풍선 기본 구조
  .ch_head span은 캐릭터 이미지 영역 내의 span 요소에 높이 100%, 중앙 정렬, 인라인블록 표시, 상하 여백 등을 설정
  .bubble_name은 말풍선 이름탭으로 기본적으로 회색에 흰글씨
  .bubble_content는 대사 출력탭
---------------------------------------------- */
.board-viewer .talk_content {
  display: flex;
  flex-direction: column;
}

.board-viewer .talk_content li {
  display: flex;
  align-items: flex-end;
  /*gap: 10px;*/
  flex-direction: row;
  margin-bottom: 1em;
  word-break: keep-all;        /* 한국어 단어(어절) 단위 유지 */
  overflow-wrap: break-word;   /* 너무 긴 영문/URL은 필요 시 끊기 */
  white-space: normal;         /* 줄바꿈 허용 */
}

.board-viewer .talk_content li .talk {
    background-color: rgb(228, 220, 220, 0.1);
    color: #444444;
    padding: 15px 15px;
    border-radius: 0 0 10px 10px;
    border: 1px solid #d4d4dc;
    line-height: 1.5;
}

.board-viewer .ch_head {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
  min-width: 60px;
}

.board-viewer .ch_head span {
  line-height: 100%;
  text-align: center;
  display: inline-block;
  margin: 8px 0;
}

.board-viewer .in_head {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  line-height: 0;
  position: relative;
  margin-bottom: 5px;
}
.board-viewer .in_head::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0.8) 30%,
    rgba(255, 255, 255, 0) 100%
  );
  pointer-events: none;
}

.board-viewer .talk_bubble {
  position: relative;
  margin: 5px 0;
  font-family: var(--font);
  line-height: 1.5em;
}

.board-viewer .bubble_name {
  display: inline-block;
  background-color: #666666;
  color: #ffffff;
  font-weight: 700;
  font-size: 90%;
  padding: 4px 8px 0 8px;
  border-radius: 10px 10px 0 0;
  margin-bottom: 0;
}

.board-viewer .bubble_content {
  border: 1px solid #d4d4dc;
  border-top: 4px solid #444444;
  background-color: #fcfbfb;
  padding: 15px;
  border-radius: 0 0 10px 10px;
}

.board-viewer .bubble_content br {
  display: block;
  margin: 0.5em 0;
  content: ""; 
}


/* ----------------------------------------------
   [8-1] 캐릭터별 말풍선 커스터마이징
---------------------------------------------- */
/* 아인 */
.board-viewer .bubble_name.ayn { background-color: #ae5d5c; color: #fcfcfc; }
.board-viewer .bubble_content.ayn { border-top: 4px solid #a13d41; }
/* 슈 */
.board-viewer .bubble_name.shu { background-color: #ebdada; color: #444444; }
.board-viewer .bubble_content.shu { border-top: 4px solid #eac1c1; }
/* 아인슈 */
.board-viewer .bubble_name.aynshu { background-color: #ebdada; color: #444444; }
.board-viewer .bubble_content.aynshu { border-top: 4px solid #a13d41; }
/* 나소 */
.board-viewer .bubble_name.naso { background-color: #69789b; color: #ffffff; }
.board-viewer .bubble_content.naso { border-top: 4px solid #46587d; }

/* 알카이드 */
.board-viewer .bubble_name.alk { background-color: #bdd1c7; color: #444444; }
.board-viewer .bubble_content.alk { border-top: 4px solid #8eb19b; }
/* 세라 */
.board-viewer .bubble_name.sera { background-color: #beafa5; color: #444444; }
.board-viewer .bubble_content.sera { border-top: 4px solid #a09187; }

/* 로샤 */
.board-viewer .bubble_name.rosh { background-color: #f7e6c6; color: #444444; }
.board-viewer .bubble_content.rosh { border-top: 4px solid #f0d1a5; }

/* 카이로스 */
.board-viewer .bubble_name.clrnce { background-color: #5e607f; color: #fcfcfc; }
.board-viewer .bubble_content.clrnce { border-top: 4px solid #4b4d6e; }

/* 예신 */
.board-viewer .bubble_name.emr { background-color: #d8d4f2; color: #444444; }
.board-viewer .bubble_content.emr { border-top: 4px solid #ccc6ed; }
/* 유리 */
.board-viewer .bubble_name.yuri { background-color: #dcdceb; color: #444444; }
.board-viewer .bubble_content.yuri { border-top: 4px solid #c3c3d9; }

/* 루카스 */
.board-viewer .bubble_name.luke { background-color: #d7cdcd; color: #444444; }
.board-viewer .bubble_content.luke { border-top: 4px solid #c8b4b4; }

/* 호레스 */
.board-viewer .bubble_name.hres { background-color: #7a6882; color: #fcfcfc; }
.board-viewer .bubble_content.hres { border-top: 4px solid #695569; }

/* 정재한 */
.board-viewer .bubble_name.jjh { background-color: #fad7cd; color: #444444; }
.board-viewer .bubble_content.jjh { border-top: 4px solid #f0beb4; }

/* 바쵸 */
.board-viewer .bubble_name.bajiu { background-color: #8472d4; color: #fcfcfc; }
.board-viewer .bubble_content.bajiu { border-top: 4px solid #7161c7; }

/* 벤자민 */
.board-viewer .bubble_name.benza { background-color: #c89696; color: #fcfcfc; }
.board-viewer .bubble_content.benza { border-top: 4px solid #9b6464; }

/* 페이 */
.board-viewer .bubble_name.fei { background-color: #c85f7b; color: #fcfcfc; }
.board-viewer .bubble_content.fei { border-top: 4px solid #c34664; }


/* ----------------------------------------------
  [8-2] 말풍선 특수 모드
  li.no-profile .talk_bubble은 프로필 이미지가 없는 경우 왼쪽 여백 제거
---------------------------------------------- */
.board-viewer .talk_content li.no-profile .talk_bubble {
  margin-left: 0;
}



/* ----------------------------------------------
  [9] 컬러 나레이션, 이미지, 하단 정보(댓글, 텍스트, iframe, 하단 버튼 영역의 배치 및 여백)
---------------------------------------------- */
.board-viewer .color_desc {
  display: block;
  width: 80%;
  padding: 30px 15px;
  text-align: center;
  border-radius: 10px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.08);
  background-color: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(2px);
  margin: 0px auto;
}

.board-viewer .color_desc.left {
  text-align: left !important; /* @ 붙은 것만 좌측 정렬 */
}

.board-viewer .color_desc.right {
  text-align: right !important; /* @@ 붙은 것만 좌측 정렬 */
}

/*
.board-viewer .fancy_box {
  display: block;
  width: 50%;
  margin: 0 auto;
  padding: 30px 15px;
  border: 5px double #c8c8dc;
  border-radius: 13px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.08);
}
*/

.board-viewer .fancy_box {
  display: block;
  max-width: 80%;
  margin: 0 auto;
  padding: 30px 15px;
  border: 6px double #fff;
  outline: 2px solid #bec8fa;
  border-radius: 13px;
  box-shadow: 0 0 8px #a5c8ff;
  color: #fff;
  text-shadow: -2px 0 1px rgb(255, 0, 0, 0.5);
}

.board-viewer .fancy_box.left {
  text-align: left !important;
}

.board-viewer .fancy_box.right {
  text-align: right !important; /* @@ 붙은 것만 좌측 정렬 */
}

.color_desc p,
.fancy_box p,
.bubble_content p {
  margin-bottom: 0.5em;
}

.color_desc p:last-child,
.fancy_box p:last-child,
.bubble_content p:last-child {
  margin-bottom: 0;
}

.board-viewer .talk_content li p img {
    border-radius: 10px;
}
/* 이미지만 있는 li는 컨테이너(li)가 가운데 정렬 */
.board-viewer .talk_content li:has(> p:only-child > img) {
  justify-content: center !important;
}
/* 이미지는 블록+자동여백+부모폭 넘지 않게 */
.board-viewer .talk_content li > p:only-child > img {
  display: block;
  max-width: 100%;
  height: auto;
  max-height: 800px;
}
/* CG2 */
.board-viewer .talk_content li > p.cg2:only-child > img {
  max-width: 500px;
  max-height: 450px;
}
@media (max-width: 800px) {
  .board-viewer .talk_content li > p.cg2:only-child > img {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
  }
}


.board-viewer .talk_content li p {
  word-break: keep-all;
  line-height: 1.5em;
}

.board-viewer .talk_content li p br {
  display: block;
  margin: 0.5em 0;
  content: ""; 
}

.board-viewer .talk_content li p br.gap {
  margin: 1.5em 0;
}

.board-viewer .talk_content li span {
  font-weight: 500;
}

.board-viewer .talk_content li iframe {
  margin-bottom: 10px;
}

#bo_v_bot {
  padding: 20px 0;
  overflow: hidden;
}
.bo_v_nb {
  float: left;
}
.bo_v_com {
  float: right;
}

.avocado-list li:hover .bottom_title { }

/* 컬러박스(.color_desc)나 펜시박스(.fancy_box)에 text-white가 붙으면 글자색을 무조건 흰색으로 */
.color_desc.text-white,
.fancy_box.text-white {
  color: #ffffff !important;
}

/* 내부 요소(p나 span 등)까지 하얗게 덮어주고 싶다면… */
.color_desc.text-white *,
.fancy_box.text-white * {
  /* color: #ffffff !important; */
}

.board-viewer .color_desc p:empty:first-child,
.board-viewer .fancy_box p:empty:first-child {
  margin-bottom: 0;
}



/* ----------------------------------------------
  [10] 시간선
  .talk_content li:has(.divider-text)는 글을 포함한 li는 flex 대신 block 정렬
  .divider-text span는 시간선 글자 크기를 크게 조정
---------------------------------------------- */
.divider-text {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 3em 0;
  font-weight: bold;
  text-align: center;
}

.divider-text::before,
.divider-text::after {
  content: "";
  flex: 1 1 0;
  display: block;
  height: 1px; 
  background: linear-gradient(#000, #000)
              center / 100% 1px no-repeat; /* shorthand */
}
@media (min-resolution: 2dppx) {
  .divider-text::before,
  .divider-text::after {
    background-size: 100% 0.5px;
  }
}

.divider-text span {
  padding: 0 1%;
  position: relative;
  z-index: 1;
  white-space: nowrap;
  font-size: clamp(14px, 2.2vw, 16px);
}

/* 선택지 외부 시간선 처리 */
.board-viewer .talk_content > li:has(> .divider-text),
.board-viewer .talk_list > li:has(> .divider-text) {
  display: block !important;
  text-align: center;
}

.board-viewer .divider-text span {
  font-size: 1.15em;
}



/* ----------------------------------------------
  [11] 구분선
  .divider-line.solid는 실선
  .divider-line.dashed는 점선
---------------------------------------------- */
.divider-line {
  width: 100%;
  height: 0;
  border: none;
}

.divider-line.solid {
  border-top: 1px solid rgba(0,0,0,0.3);
  margin: 3em 0;
}
.divider-line-solid span {
  border-bottom: 1px solid rgba(0,0,0,0.3);
  margin: 20px 0;
}

.divider-line.dashed {
  border: none;
  margin: 1.5em 0;
  height: 1px;
  background-image: repeating-linear-gradient(
    to right,
    rgba(0,0,0,0.4) 0,
    rgba(0,0,0,0.4) 4px,
    transparent 4px,
    transparent 8px
  );
}
.divider-line-dashed span {
  border-bottom: 1px dashed rgba(0,0,0,0.3);
  margin: 20px 0;
}



/* ----------------------------------------------
  [12] 선택지 탭 스타일
  .wrapper는 탭 전체 컨테이너
  .wrapper > input[type="radio"]는 라디오 버튼 기본 숨김

  .tabs는 상하정렬, 내용에 따라 크기 조절
  .tab은 탭 버튼 기본 스타일
  .wrapper > input[type="radio"]:는 선택된 탭 버튼 스타일
---------------------------------------------- */
@import url('https://fonts.googleapis.com/css?family=Arimo:400,700&display=swap');

.wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.wrapper > input[type="radio"] {
  display: none !important;
}

.wrapper .tabs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
  align-items: flex-start;
}

.wrapper .tab {
  display: flex;
  width: auto;
  padding: 10px;
  background-color: #fcfbfb;
  color: #444;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 0px 3px rgba(0,0,0,0.1);
  border-radius: 5px 8px 8px 5px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.wrapper .tab:hover {
  background-color: #444;
  color: #fff;
}

.wrapper:not(.sms-choice-container) > input[type="radio"]:nth-of-type(1):checked ~ .tabs > label:nth-of-type(1),
.wrapper:not(.sms-choice-container) > input[type="radio"]:nth-of-type(2):checked ~ .tabs > label:nth-of-type(2),
.wrapper:not(.sms-choice-container) > input[type="radio"]:nth-of-type(3):checked ~ .tabs > label:nth-of-type(3),
.wrapper:not(.sms-choice-container) > input[type="radio"]:nth-of-type(4):checked ~ .tabs > label:nth-of-type(4),
.wrapper:not(.sms-choice-container) > input[type="radio"]:nth-of-type(5):checked ~ .tabs > label:nth-of-type(5),
.wrapper:not(.sms-choice-container) > input[type="radio"]:nth-of-type(6):checked ~ .tabs > label:nth-of-type(6) {
  background-color: #444;
  color: #fff;
  font-weight: bold;
  border-left: 10px solid #a13d41;
}



/* ----------------------------------------------
  [13] 선택지 패널 스타일
  .panels는 패널 컨테이너
  .panel은 모든 패널 기본 숨김
  .wrapper의 직계 input과 .panels 내부 직계 .panel이 순서대로 매핑
---------------------------------------------- */
.wrapper:not(.sms-choice-container) .panels {
  margin-top: 10px;
  background: rgba(255,255,255,0.5);
  border: 1px solid rgba(0,0,0,0.05);
  box-shadow: 0 0px 3px rgba(0,0,0,0.1);
  border-radius: 5px;
  overflow: hidden;
  padding: 15px;
  min-height: 0;
  width: auto;
}

.wrapper .panel {
  display: none;
  animation: fadein 0.8s;
}

.wrapper:not(.sms-choice-container) > input[type="radio"]:nth-of-type(1):checked ~ .panels > .panel:nth-of-type(1),
.wrapper:not(.sms-choice-container) > input[type="radio"]:nth-of-type(2):checked ~ .panels > .panel:nth-of-type(2),
.wrapper:not(.sms-choice-container) > input[type="radio"]:nth-of-type(3):checked ~ .panels > .panel:nth-of-type(3),
.wrapper:not(.sms-choice-container) > input[type="radio"]:nth-of-type(4):checked ~ .panels > .panel:nth-of-type(4),
.wrapper:not(.sms-choice-container) > input[type="radio"]:nth-of-type(5):checked ~ .panels > .panel:nth-of-type(5),
.wrapper:not(.sms-choice-container) > input[type="radio"]:nth-of-type(6):checked ~ .panels > .panel:nth-of-type(6) {
  display: block;
}

@keyframes fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 선택지 패널의 마지막 li(선택지 종료)만 아래 여백 제거 */
.wrapper .panels .panel li:last-child {
  margin-bottom: 0 !important;
}



/* ----------------------------------------------
  [14] 문자 메시지
  .somsgtopbar는 문자 상단바
  .somsgclock은 문자 상단 시계
---------------------------------------------- */
.somsg-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.somsgtopbar,
.sms-name,
.somsgbox {
  width: 70%;
  margin: 0 auto;
  box-sizing: border-box;
}
.somsgtopbar {
  padding-top: 5px;
  height: 25px;
  display: flex;
  background-color: #645a5a;
  border-radius: 10px 10px 0 0;
}
.sms-name {
  text-align: center;
  background-color: #645a5a;
  color: #fcfcfc;
  font-size: 18px;
  padding: 10px;
  border-bottom: 4px solid #504646;
}
.somsgbox {
  background-color: #f1edec;
  padding: 10px 15px;
  border-radius: 0 0 10px 10px;
  border: 1px solid rgba(0,0,0,0.2);
  line-height: 1.5;
}

.somsgclock {
  font-size: clamp(11px, 2.2vw, 13px);
  color: #fff;
  text-align: center;
  margin: 0 auto;
}

.somsg, 
.somsg2 {
  display: flex;
  align-items: flex-start;
  margin: 10px 1%;
}
.somsg { justify-content: flex-start; }
.somsg2 { justify-content: flex-end; }

.somsg-img, 
.somsg2 .somsg-img {
  width: 50px;
  height: 50px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: 50%;
  flex-shrink: 0;
  background-color: #dddddd;
  border: 1px solid rgba(100, 90, 90, 0.5);
}

.somsg2 .somsg-img {
display: none;
}

.somsgbubble1,
.somsgbubble2 {
  position: relative;
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0 0 6px rgba(0,0,0,0.1);
}
.somsgbubble1 { margin-left: 20px; margin-right: 3em; background-color: #fff; color: #444; }
.somsgbubble2 { margin-right: 20px; margin-left: 3em; background-color: #968c82; color: #fff; }

.somsgbubble1::after,
.somsgbubble2::after {
  content: '';
  position: absolute;
  top: 27px;
  transform: translateY(-50%);
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}
.somsgbubble1::after {
  left: -13px;
  border-right: 14px solid #fff;
  filter: drop-shadow(-3px 0px 2px rgba(0, 0, 0, 0.1));
}
.somsgbubble2::after {
  right: -13px;
  border-left: 14px solid #968c82;
  filter: drop-shadow(3px 0px 2px rgba(0, 0, 0, 0.1));
}

.somsgphotobox {
  width: 150px;
  overflow: hidden;
  margin: 0 auto;
  border-radius: 0px;
}
.somsgphotobox-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background-size: 100% 100%;
}

.sms-block {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 20px;
}


.wrapper.sms-choice-container .tabs {
  display: flex;
  gap: 8px;
  border-top: 1px solid rgba(0, 0, 0, 0.15); 
  padding-top: 20px;
  margin-top: 15px;
  align-items: center;
}
/* 나레이션| 직전 선택지 구간의 panels 완전 초기화 */
.wrapper.sms-choice-container.no-panel-border .panels {
  border-bottom: none !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
.sms-gap-line {
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}


.wrapper.sms-choice-container .tab {
  justify-content: center;
  align-items: center;    
  min-width: 45%;
  max-width: 90%;
  background: #fff;
  color: #444;
  border: none;
  padding: 8px 16px;
  border-radius: 10px;
  cursor: pointer;
  margin: 3px auto;
  transition: transform 0.2s ease, background 0.2s ease;
  transform: scale(1);
  font-size: clamp(0.8rem, 2.2vw, 1rem);
}

.wrapper.sms-choice-container .tab:hover {
  background: #645a5a;
  color: #fff;
  transform: scale(1.05);
}

.wrapper.sms-choice-container .tab.selected {
  background: #ae5d5c;
  color: #fff;
  font-weight: bold;
  transform: scale(1.05);
}

.wrapper.sms-choice-container .tab.unselected {
  transform: scale(0.9);
  opacity: 0.5;
}

.wrapper.sms-choice-container .tab.unselected:hover {
  transform: scale(1);
  opacity: 1;
}

/* 체크된 라디오와 매칭된 label(.tab) — SMS 전용 
.wrapper.sms-choice-container > input[type="radio"]:nth-of-type(1):checked ~ .tabs > label:nth-of-type(1),
.wrapper.sms-choice-container > input[type="radio"]:nth-of-type(2):checked ~ .tabs > label:nth-of-type(2),
.wrapper.sms-choice-container > input[type="radio"]:nth-of-type(3):checked ~ .tabs > label:nth-of-type(3),
.wrapper.sms-choice-container > input[type="radio"]:nth-of-type(4):checked ~ .tabs > label:nth-of-type(4),
.wrapper.sms-choice-container > input[type="radio"]:nth-of-type(5):checked ~ .tabs > label:nth-of-type(5),
.wrapper.sms-choice-container > input[type="radio"]:nth-of-type(6):checked ~ .tabs > label:nth-of-type(6),
.wrapper.sms-choice-container > input[type="radio"]:nth-of-type(7):checked ~ .tabs > label:nth-of-type(7),
.wrapper.sms-choice-container > input[type="radio"]:nth-of-type(8):checked ~ .tabs > label:nth-of-type(8)
{
  background: #ae5d5c;
  color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  border-left: none;
}*/

/* 패널(내용) 영역 — SMS 전용 */
.wrapper.sms-choice-container .panels {
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  margin-bottom: 15px;
  padding-bottom: 15px;
}

.wrapper.sms-choice-container .panel {
  display: none;
  animation: fadeIn 0.3s ease-out;
}

.wrapper.sms-choice-container > input[type="radio"]:nth-of-type(1):checked ~ .panels > .panel:nth-of-type(1),
.wrapper.sms-choice-container > input[type="radio"]:nth-of-type(2):checked ~ .panels > .panel:nth-of-type(2),
.wrapper.sms-choice-container > input[type="radio"]:nth-of-type(3):checked ~ .panels > .panel:nth-of-type(3),
.wrapper.sms-choice-container > input[type="radio"]:nth-of-type(4):checked ~ .panels > .panel:nth-of-type(4),
.wrapper.sms-choice-container > input[type="radio"]:nth-of-type(5):checked ~ .panels > .panel:nth-of-type(5),
.wrapper.sms-choice-container > input[type="radio"]:nth-of-type(6):checked ~ .panels > .panel:nth-of-type(6),
.wrapper.sms-choice-container > input[type="radio"]:nth-of-type(7):checked ~ .panels > .panel:nth-of-type(7),
.wrapper.sms-choice-container > input[type="radio"]:nth-of-type(8):checked ~ .panels > .panel:nth-of-type(8)
{
  display: block;
}

/* 페이드인 키프레임 (공용) */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 문자메시지 선택지 */
.wrapper.sms-choice-container .panels {
  background: none;
  border: none;
  border-bottom: 1px solid rgba(0,0,0,0.15);
  border-radius: 0;
  box-shadow: none;
}



/* ----------------------------------------------
  [15] 자동 목차
  #clickToc는 목차 보기 토글 버튼 스타일
  #toc은 실제 목차 영역으로 기본 숨김
  h2는 목차용 앵커가 붙은 제목 태그 스타일
---------------------------------------------- */
#clickToc {
  color: #a13d41;
  font-size: 1.1em;
  font-weight: bold;
  cursor: default;
  margin-bottom: 10px;
  transition: margin-bottom 0.2s ease;
}

#clickToc span {
  font-size: 0.9em;
  color: #fff;
  border-radius: 0.8em;
  padding: 0.3em 0.6em 0.3em 0.5em;
  background: #a13d41;
  opacity: 0.6;
  transition: all 0.2s ease;
}

#clickToc:hover span {
  opacity: 0.9;
}

#toc {
  margin: 0px 0 10px 10px;
  padding-left: 10px;
  border-left: 3px solid #a13d41;
  display: none;
}

#toc li {
  margin-bottom: 5px;
}

#toc a {
  text-decoration: none;
  color: #444;
}

#toc a:hover {
  color: #a13d41;
  font-weight: bold;
}

h2[id^="toc_"] {
  margin: 0 0 1em 0;
  font-size: 1.5em;
}


/* ----------------------------------------------
  [16] 독백
---------------------------------------------- */
/* 기본 스타일 */
p.monologue {
  display: inline-block;
  padding: 0 15px;
  color: #ffffff;
  font-weight: bold;
  line-height: 1.2;
  white-space: normal;

  /* 기본 검정 테두리 */
  text-shadow: 0 0 1px #000,
               0 0 2px #000,
               0 0 2px #000,
               0 0 2px #000,
               0 0 3px #000;
}

/* 정렬 */
p.monologue.monologue-left {
  margin-left: 5%;
  margin-right: auto;
  text-align: left;
}

p.monologue.monologue-right {
  margin-left: auto;
  margin-right: 5%;
  text-align: right;
}

p.monologue.monologue-center {
  margin: 0 auto;
  text-align: center;
}

/* 원문(span.orig-text) 스타일 */
p.monologue > span.orig-text {
  display: block;
  font-size: 0.75em;
  margin-bottom: 0.2em;
  line-height: 1.2;
}

/* 모든 자식에게 기본 섀도우 상속 */
p.monologue * {
  font-weight: bold !important;
  text-shadow: inherit;
}

/* HEX 컬러 테두리 (PHP에서 --mono-hex 내려줌) */
.monologue[data-hex],
.monologue[data-hex] * {
  text-shadow: 0 0 1px var(--mono-hex),
               0 0 2px var(--mono-hex),
               0 0 2px var(--mono-hex),
               0 0 2px var(--mono-hex),
               0 0 3px var(--mono-hex) !important;
}

/* 독백2 (#000 글씨 + 컬러 테두리) */
.monologue.monologue-border,
.monologue.monologue-border * {
  color: #000 !important;
}


/* ----------------------------------------------
  [17] 원문  숨기기 및 글자크기 조절
---------------------------------------------- */
.controls {
  display: inline-flex; 
  margin-left: auto;  
  align-self: flex-start; 
  gap: 1em;
  padding: 8px 12px;
  margin-bottom: 0.5em;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #fcfbfb;
}

/* TOC 토글은 위 float·flex 영향 해제 */
#clickToc {
  clear: both;
  margin-bottom: 0.5em;
}

/* 내부 레이아웃 */
.control-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.control-col + .control-col {
  border-left: 1px solid #eee;
  padding-left: 12px;
}

.control-header {
  font-size: 0.7em;
  font-weight: 500;
}

.btn-group {
  display: flex;
  gap: 4px;
}

.control-btn {
  width: auto !important;
  padding: 4px 8px !important;
  color: #444 !important;
  font-size: 0.7em !important;
  border: 1px solid #ccc !important;
  border-radius: 4px !important;
  background: #fff !important;
  cursor: pointer !important;
}
.control-btn:hover {
  background: #f0f0f0 !important;
}

#toggleOrigBtn {
  padding: 5.5px 8px !important;
}
#decreaseFontBtn {
  font-size: 0.6em !important;
}
#increaseFontBtn {
  font-size: 0.8em !important;
}







/* ----------------------------------------------
  [18] 속삭임
---------------------------------------------- */
.whisper-container {
  position: relative;
  width: 100%;
  height: 400px;
  margin: 0 auto;
  padding: clamp(12px, 4vw, 24px);
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  box-shadow: 0 0 8px rgba(0,0,0,0.1);
  box-sizing: border-box;
  overflow: hidden;
}

.whisper-container::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(black, #878caa);
  opacity: 0.6;
  z-index: 1;
  pointer-events: none;
}
.whisper-container > * {
  position: relative;
  z-index: 2;
}

.whisper-canvas {
  display: block;
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  z-index: 1;
  pointer-events: none;
  background: transparent;
  border-radius: inherit;
}

.whisper-text {
  position: relative;
  inset: auto;
  display: grid;
  align-content: start;
  justify-items: center;
  box-sizing: border-box;

  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: clip;
  word-break: break-word;
  overflow-wrap: anywhere;

  z-index: 2;
  color: #fff;
  text-shadow: 0 0 4px rgba(0,0,0,1);
  font-family: var(--font);
  text-align: center;
}

.whisper-text::-webkit-scrollbar {
  display: none;
}

.whisper-text p {
  max-width: min(72ch, 100%); 
  margin: 0 0 1em; 
}
.whisper-text p:last-child { margin-bottom: 0; }

.highlight-line {
  background: linear-gradient(
    to right,
    rgba(100, 150, 220, 0) -10%,
    rgba(100, 150, 220, 0.6) 50%,
    rgba(100, 150, 220, 0) 110%
  );
  padding: 1px 0;
  border-radius: 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  display: inline;
  color: #fff;
  text-shadow: 0 0 4px rgba(0,0,0,0.7);
}


/* ── 속삭임2 전용 오버라이드 ── */
.whisper-container.whisper2-container {
  height: auto;
  min-height: 0;
}
/* 속삭임2 전용: 블록(문단) 위치를 왼쪽으로 */
.whisper-container.whisper2-container .whisper-text {
  justify-items: start;
  text-align: left;
  min-height: 0;
  height: auto;
  overflow: visible;
}
/* 사파리 등 호환 보강(선택): 각 p 아이템도 좌측 정렬 고정 */
.whisper-container.whisper2-container .whisper-text p {
  justify-self: start;
}

.whisper-container.whisper2-container .whisper-text {
  text-align: left;
}

/* whisper2 전용 스피커명 하이라이트 */
.whisper-container.whisper2-container .highlight-speaker {
  background: linear-gradient(
    to left,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 70%,
    rgba(255, 255, 255, 0.1) 100%
  );
  padding: 1px 30px 0px 10px;
  border-radius: 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  display: inline;
  color: #644d2c;
  text-shadow: 0 0 4px rgba(255,255,255,0.7);
  font-weight: bold;
  font-size: 90%;
}

/* 1) 모든 줄 기본 0.5em */
.whisper-container.whisper2-container .whisper-text p {
  margin-left: 1em;
  margin-bottom: 0.5em;
  margin-top: 0;   
}
.whisper-container.whisper2-container .whisper-text p:last-child {
  margin-bottom: 0;
}

/* 2) 스피커명 줄 앞에만 위쪽 여유 1em */
.whisper-container.whisper2-container .whisper-text p.whisper2-speaker {
  margin-left: 0;
  margin-top: 1.5em; 
}
/* ── 나레이션 이후 등장하는 스피커명은 2em 으로 override ── */
.whisper-container.whisper2-container .whisper-text p.whisper2-narration + p.whisper2-speaker {
  margin-top: 2em;
}

/* 3) 첫 줄 스피커는 위쪽 여유 제거 */
.whisper-container.whisper2-container .whisper-text p.whisper2-speaker:first-child {
  margin-top: 0;
}

/* 4) 빈 줄 기본 세팅: 들여쓰기 없애고, 여백은 모두 0 */
.whisper-container.whisper2-container .whisper-text p.whisper2-blank {
  margin-left: 0;
  margin-top: 0;
  margin-bottom: 0;
  line-height: 0;
  height: 1em;
}

/* 5) 대사 → blank 사이 공백 2em */
.whisper-container.whisper2-container .whisper-text p.whisper2-dialogue + p.whisper2-blank {
  margin-top: 2em;
}

/* 6) 나레이션 본문 자체 여백 모두 0 */
.whisper-container.whisper2-container .whisper-text p.whisper2-narration {
  margin-left: 0;
}

/* 7) 대사 이후 첫 나레이션은 여백 2em 추가 */
.whisper-container.whisper2-container .whisper-text p.whisper2-dialogue + p.whisper2-narration {
  margin-top: 2em;
}

/* 속삭임 이름 컬러 */
.whisper-container.whisper2-container .highlight-speaker.ayn {
    color: #ae5d5c; 
    text-shadow:
    -1px  0   rgba(255,255,255,0.3),
     0    1px rgba(255,255,255,0.3),
     1px  0   rgba(255,255,255,0.3),
     0   -1px rgba(255,255,255,0.3);
}

.whisper-container.whisper2-container .highlight-speaker.shu {
    color: #ebdada; 
    text-shadow:
    -1px  0   rgba(0,0,0,0.6),
     0    1px rgba(0,0,0,0.6),
     1px  0   rgba(0,0,0,0.6),
     0   -1px rgba(0,0,0,0.6);
}

.whisper-container.whisper2-container .highlight-speaker.alk {
    color: #bdd1c7; 
    text-shadow:
    -1px  0   rgba(0,0,0,0.6),
     0    1px rgba(0,0,0,0.6),
     1px  0   rgba(0,0,0,0.6),
     0   -1px rgba(0,0,0,0.6);
}

.whisper-container.whisper2-container .highlight-speaker.rosh {
    color: #f7e6c6; 
    text-shadow:
    -1px  0   rgba(0,0,0,0.6),
     0    1px rgba(0,0,0,0.6),
     1px  0   rgba(0,0,0,0.6),
     0   -1px rgba(0,0,0,0.6);
}

.whisper-container.whisper2-container .highlight-speaker.clrnce {
    color: #5e607f; 
    text-shadow:
    -1px  0   rgba(255,255,255,0.3),
     0    1px rgba(255,255,255,0.3),
     1px  0   rgba(255,255,255,0.3),
     0   -1px rgba(255,255,255,0.3);
}

.whisper-container.whisper2-container .highlight-speaker.emr {
    color: #d8d4f2; 
    text-shadow:
    -1px  0   rgba(0,0,0,0.6),
     0    1px rgba(0,0,0,0.6),
     1px  0   rgba(0,0,0,0.6),
     0   -1px rgba(0,0,0,0.6);
}

.whisper-container.whisper2-container .highlight-speaker.luke {
    color: #d7cdcd; 
    text-shadow:
    -1px  0   rgba(0,0,0,0.6),
     0    1px rgba(0,0,0,0.6),
     1px  0   rgba(0,0,0,0.6),
     0   -1px rgba(0,0,0,0.6);
}

.whisper-container.whisper2-container .highlight-speaker.hres {
  color: #7a6882; 
    text-shadow:
    -1px  0   rgba(255,255,255,0.3),
     0    1px rgba(255,255,255,0.3),
     1px  0   rgba(255,255,255,0.3),
     0   -1px rgba(255,255,255,0.3);
}


/* ── 속삭임4 전용 오버라이드 ── */
.whisper4-container {
  background-color: #000 !important;
  height: auto;
  min-height: 0;
  overflow: hidden;
  padding: 20px 30px;
}

.whisper4-container::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(#444, #000);
  opacity: 0.8;
  z-index: 1;
  pointer-events: none;
}

.whisper4-text {
  text-align: left;
  margin: 6px 0;
  padding: 0;
}

/* 30/70 레이아웃 */
.whisper4-row{
  width:100%;
  display:grid;
  grid-template-columns: 20% 1fr;
  column-gap:15px;
  align-items:start;
  margin:1em 0;
  line-height:1.5;
}
.whisper4-row.w4-mid{ margin-bottom:2px; }
.whisper4-row.w4-end{ margin-bottom:6px; }

/* 이름(좌측) */
.whisper4-name{
  text-align:right;
  color:#b9965a;
  font-style:oblique;
  padding-right:1%;
  word-break: keep-all;      /* 단어 중간에서 자르지 말기 */
  overflow-wrap: normal;     /* anywhere/break-word 영향 차단 */
  white-space: normal;       /* 줄바꿈은 허용(공백에서만) */
}

/* 대사(우측) */
.whisper4-dialogue{
  text-align:left;
  word-break:break-word;
  overflow-wrap:anywhere;
  padding-right:10px;
}

/* 나레이션: 전폭 */
.whisper4-narration{
  width:100%;
  text-align:left;
  line-height:1.5;
  margin:1em 0;
}

/* 속삭임4 이름 컬러 */
.whisper-container.whisper4-container .highlight-speaker.ayn{ color:#ae5d5c; font-weight:700; }
.whisper-container.whisper4-container .highlight-speaker.shu{ color:#ebdada; font-weight:700; }
.whisper-container.whisper4-container .highlight-speaker.alk{ color:#bdd1c7; font-weight:700; }
.whisper-container.whisper4-container .highlight-speaker.rosh{ color:#f7e6c6; font-weight:700; }
.whisper-container.whisper4-container .highlight-speaker.clrnce{ color:#5e607f; font-weight:700; }
.whisper-container.whisper4-container .highlight-speaker.emr{ color:#d8d4f2; font-weight:700; }
.whisper-container.whisper4-container .highlight-speaker.luke{ color:#d7cdcd; font-weight:700; }
.whisper-container.whisper4-container .highlight-speaker.hres{ color:#7a6882; font-weight:700; }

/* ── 속삭임4만: 내부 스크롤 제거 + 자동 높이 ── */
.whisper-container.whisper4-container .whisper-text {
  position: relative;
  inset: auto;
  min-height: 0;
  height: auto;
  max-height: none;
  overflow: visible;
}

/* 속삭임4 컨테이너는 내용 늘어나게 */
.whisper-container.whisper4-container{
  min-height:0;
  overflow:visible;
  overflow-x:hidden;
  padding: 20px 30px;
}




/* ----------------------------------------------
  [20] 속삭임3 (스토리형)
---------------------------------------------- */
.whisper3-wrapper {
  --w3-uline-gap: 1px;
  --w3-uline-thickness: 1px;
  --w3-uline-color: rgba(255,255,255,.35);
  --w3-item-gap: 1em;
  --w3-group-gap: .75em;

  position: relative;
  width: 100%;
  box-sizing: border-box;
  background-origin: border-box;

  /* 밤하늘 배경 + 별빛 */
  background:
    radial-gradient(0.25em 0.25em at 10% 16%, rgba(255,255,255,.92), transparent 60%),
    radial-gradient(0.25em 0.25em at 22% 28%, rgba(255,255,255,.88), transparent 60%),
    radial-gradient(0.25em 0.25em at 88% 12%, rgba(255,255,255,.95), transparent 60%),
    radial-gradient(0.25em 0.25em at 15% 5%,  rgba(255,255,255,.94), transparent 60%),
    radial-gradient(0.25em 0.25em at 41% 20%, rgba(255,255,255,.92), transparent 60%),
    radial-gradient(0.25em 0.25em at 60% 8%,  rgba(255,255,255,.95), transparent 60%),
    radial-gradient(0.25em 0.25em at 71% 26%, rgba(255,255,255,.93), transparent 60%),
    radial-gradient(0.25em 0.25em at 91% 10%, rgba(255,255,255,.96), transparent 60%),

    radial-gradient(0.2em 0.2em at 70% 22%, rgba(255,255,255,.90), transparent 60%),
    radial-gradient(0.2em 0.2em at 92% 21%, rgba(255,255,255,.90), transparent 60%),
    radial-gradient(0.2em 0.2em at 90% 20%, rgba(255,255,255,.92), transparent 60%),
    radial-gradient(0.2em 0.2em at 5% 22%,  rgba(255,255,255,.93), transparent 60%),
    radial-gradient(0.2em 0.2em at 14% 46%, rgba(255,255,255,.85), transparent 60%),
    radial-gradient(0.2em 0.2em at 30% 58%, rgba(255,255,255,.80), transparent 60%),
    radial-gradient(0.2em 0.2em at 48% 50%, rgba(255,255,255,.85), transparent 60%),
    radial-gradient(0.2em 0.2em at 66% 42%, rgba(255,255,255,.82), transparent 60%),
    radial-gradient(0.2em 0.2em at 82% 54%, rgba(255,255,255,.85), transparent 60%),
    radial-gradient(0.2em 0.2em at 92% 40%, rgba(255,255,255,.80), transparent 60%),
    radial-gradient(0.2em 0.2em at 12% 36%, rgba(255,255,255,.86), transparent 60%),
    radial-gradient(0.2em 0.2em at 22% 52%, rgba(255,255,255,.84), transparent 60%),
    radial-gradient(0.2em 0.2em at 47% 44%, rgba(255,255,255,.85), transparent 60%),
    radial-gradient(0.2em 0.2em at 63% 33%, rgba(255,255,255,.83), transparent 60%),
    radial-gradient(0.2em 0.2em at 77% 47%, rgba(255,255,255,.86), transparent 60%),
    radial-gradient(0.2em 0.2em at 89% 39%, rgba(255,255,255,.82), transparent 60%),

    radial-gradient(0.18em 0.18em at 8%  76%, rgba(255,255,255,.78), transparent 60%),
    radial-gradient(0.18em 0.18em at 20% 86%, rgba(255,255,255,.75), transparent 60%),
    radial-gradient(0.18em 0.18em at 36% 72%, rgba(255,255,255,.78), transparent 60%),
    radial-gradient(0.18em 0.18em at 52% 86%, rgba(255,255,255,.72), transparent 60%),
    radial-gradient(0.18em 0.18em at 68% 78%, rgba(255,255,255,.78), transparent 60%),
    radial-gradient(0.18em 0.18em at 84% 84%, rgba(255,255,255,.76), transparent 60%),
    radial-gradient(0.18em 0.18em at 10% 82%, rgba(255,255,255,.78), transparent 60%),
    radial-gradient(0.18em 0.18em at 24% 74%, rgba(255,255,255,.76), transparent 60%),
    radial-gradient(0.18em 0.18em at 40% 68%, rgba(255,255,255,.77), transparent 60%),
    radial-gradient(0.18em 0.18em at 58% 82%, rgba(255,255,255,.76), transparent 60%),
    radial-gradient(0.18em 0.18em at 76% 74%, rgba(255,255,255,.75), transparent 60%),
    radial-gradient(0.18em 0.18em at 90% 88%, rgba(255,255,255,.76), transparent 60%),

    radial-gradient(0.15em 0.15em at 12% 28%, rgba(255,255,255,.84), transparent 60%),
    radial-gradient(0.15em 0.15em at 24% 32%, rgba(255,255,255,.82), transparent 60%),
    radial-gradient(0.15em 0.15em at 16% 36%, rgba(255,255,255,.80), transparent 60%),
    radial-gradient(0.15em 0.15em at 26% 40%, rgba(255,255,255,.82), transparent 60%),
    radial-gradient(0.15em 0.15em at 30% 44%, rgba(255,255,255,.84), transparent 60%),
    radial-gradient(0.15em 0.15em at 22% 48%, rgba(255,255,255,.83), transparent 60%),
    radial-gradient(0.15em 0.15em at 34% 52%, rgba(255,255,255,.81), transparent 60%),
    radial-gradient(0.15em 0.15em at 26% 56%, rgba(255,255,255,.79), transparent 60%),
    radial-gradient(0.15em 0.15em at 28% 60%, rgba(255,255,255,.80), transparent 60%),
    radial-gradient(0.15em 0.15em at 30% 54%, rgba(255,255,255,.82), transparent 60%),
    radial-gradient(0.15em 0.15em at 32% 58%, rgba(255,255,255,.81), transparent 60%),
    radial-gradient(0.15em 0.15em at 34% 62%, rgba(255,255,255,.83), transparent 60%),
    radial-gradient(0.15em 0.15em at 42% 46%, rgba(255,255,255,.84), transparent 60%),
    radial-gradient(0.15em 0.15em at 54% 50%, rgba(255,255,255,.82), transparent 60%),
    radial-gradient(0.15em 0.15em at 46% 54%, rgba(255,255,255,.80), transparent 60%),
    radial-gradient(0.15em 0.15em at 58% 58%, rgba(255,255,255,.82), transparent 60%),
    radial-gradient(0.15em 0.15em at 50% 62%, rgba(255,255,255,.84), transparent 60%),
    radial-gradient(0.15em 0.15em at 42% 66%, rgba(255,255,255,.83), transparent 60%),
    radial-gradient(0.15em 0.15em at 54% 70%, rgba(255,255,255,.81), transparent 60%),
    radial-gradient(0.15em 0.15em at 66% 64%, rgba(255,255,255,.79), transparent 60%),
    radial-gradient(0.15em 0.15em at 49% 60%, rgba(255,255,255,.80), transparent 60%),
    radial-gradient(0.15em 0.15em at 40% 56%, rgba(255,255,255,.82), transparent 60%),
    radial-gradient(0.15em 0.15em at 62% 52%, rgba(255,255,255,.81), transparent 60%),
    radial-gradient(0.15em 0.15em at 74% 48%, rgba(255,255,255,.83), transparent 60%),

    radial-gradient(0.12em 0.12em at 80% 30%, rgba(255,255,255,.84), transparent 60%),
    radial-gradient(0.12em 0.12em at 72% 34%, rgba(255,255,255,.82), transparent 60%),
    radial-gradient(0.12em 0.12em at 74% 38%, rgba(255,255,255,.80), transparent 60%),
    radial-gradient(0.12em 0.12em at 84% 42%, rgba(255,255,255,.82), transparent 60%),
    radial-gradient(0.12em 0.12em at 78% 46%, rgba(255,255,255,.84), transparent 60%),
    radial-gradient(0.12em 0.12em at 90% 50%, rgba(255,255,255,.83), transparent 60%),
    radial-gradient(0.12em 0.12em at 70% 55%, rgba(255,255,255,.81), transparent 60%),
    radial-gradient(0.12em 0.12em at 84% 58%, rgba(255,255,255,.79), transparent 60%),
    radial-gradient(0.12em 0.12em at 90% 62%, rgba(255,255,255,.80), transparent 60%),
    radial-gradient(0.12em 0.12em at 87% 66%, rgba(255,255,255,.82), transparent 60%),
    radial-gradient(0.12em 0.12em at 90% 70%, rgba(255,255,255,.81), transparent 60%),
    radial-gradient(0.12em 0.12em at 86% 72%, rgba(255,255,255,.83), transparent 60%),

    radial-gradient(0.25em 0.25em at 20% 12%, rgba(255,255,255,.90), transparent 62%),
    radial-gradient(0.25em 0.25em at 62% 16%, rgba(255,255,255,.88), transparent 62%),
    radial-gradient(0.25em 0.25em at 35% 15%, rgba(255,255,255,.92), transparent 62%),
    radial-gradient(0.25em 0.25em at 70% 12%, rgba(255,255,255,.90), transparent 62%),

    linear-gradient(to bottom, #37322d 0%, #5f5046 70%, #8c7d69 100%);

  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3);
  margin: 1em 0;
  padding: 20px 0;
  color: #fff;
  min-height: 0;
}

.whisper3-wrapper::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none; z-index:0;
  background-image:url("https://somouu.dothome.co.kr/img/99_SOMO/whisper3-bg.webp");
  background-repeat:no-repeat; background-position:center; background-size:cover;
  mix-blend-mode:lighten; opacity:.20;
  filter:brightness(1.05) contrast(1.08);
  border-radius:20px;
}

.whisper3-list {
  list-style: none;
  margin: 0;
  padding: 12px 30px 18px;
  box-sizing: border-box;

  max-height: none;
  height: auto;
  overflow: visible;
}

.whisper3-list::-webkit-scrollbar{ width:0; height:0; }
.whisper3-list > li{ margin:0 0 var(--w3-item-gap); }
.whisper3-list > li::after{ content:""; display:table; clear:both; }
.whisper3-list > li:last-child{ margin-bottom:0; } /* 바닥 붙는 현상 방지 */

/* 상단 아바타(있을 때만 노출) */
.whisper3-head{
  padding: 0 20px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 16px;
  flex-direction: column;
}
.whisper3-avatar{
  width:50%; max-width:300px; aspect-ratio:2/2.5; height:auto;
  display:block; object-fit:cover; border-radius:50%; border:0; outline:0;
  -webkit-mask-image: radial-gradient(ellipse closest-side,#fff calc(100% - 8px),transparent 100%);
  mask-image: radial-gradient(ellipse closest-side,#fff calc(100% - 8px),transparent 100%);
  box-shadow:0 0 18px rgba(255,255,255,.30),0 0 36px rgba(180,210,255,.22);
}

.whisper3-caption {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  max-width: 90%;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  line-height: 1.2;
  text-align: center;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
}

/* 텍스트 스타일 */
.whisper3-cap-title { font-weight: 700; }

/* 비어 있으면 숨김(안 넣었을 때 깔끔) */
.whisper3-caption:empty,
.whisper3-caption :where(.whisper3-cap-title, .whisper3-cap-text):empty {
  display: none;
}

/* PC: 이미지 좌 / 본문 우 (이미지 있을 때만 2열) */
@media (min-width:1024px){
  .whisper3-wrapper:has(.whisper3-head){
    display:grid;
    grid-template-columns:minmax(260px,340px) 1fr;
    align-items:start;
  }

  .whisper3-wrapper:has(.whisper3-head) .whisper3-list{
    height:auto;
    max-height:none;
    min-height:0;
    min-width:0;
    overflow:visible;
  }

  .whisper3-head {
    margin-bottom: 0;
    padding: 0 0 0 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .whisper3-avatar {
    width:100%;
    max-width:290px;
    height:auto;
  }
}

/* 진행자(버블 없음) — 중앙 + 밑줄 */
.whisper3-list .whisper3-line.is-moderator{
  display:flex; justify-content:center; align-items:center; text-align:center;
}
.whisper3-list .whisper3-line.is-moderator > .interviewer-text{
  display:inline-block; margin:0; line-height:1.5;
  padding-bottom:var(--w3-uline-gap);
  border-bottom:var(--w3-uline-thickness) dashed var(--w3-uline-color) !important;
}

/* ── 말풍선 ───────────────────────── */
/* 이름(한 줄 차지) */
.whisper3-wrapper .talk_bubble .bubble_name{
  display:block; margin:.5em 0 .25em; padding:0;
  background:none; border:0; border-radius:0;
  font-weight:700; font-size:100%; color:#d6b96f;
  text-shadow:0 0 1px #000,0 0 2px #000,0 0 2px #000,0 0 3px #000;
}
/* 캐릭터별 이름색 (필요시 확장) */
.whisper3-wrapper .talk_bubble .bubble_name.ayn{ color:#a13d41; }
.whisper3-wrapper .talk_bubble .bubble_name.shu{ color:#eac1c1; }
.whisper3-wrapper .talk_bubble .bubble_name.alk{ color:#8eb19b; }
.whisper3-wrapper .talk_bubble .bubble_name.rosh{ color:#f0d1a5; }

/* 묶음 간격 */
.whisper3-wrapper .talk_bubble{ margin:0 0 var(--w3-group-gap); }

/* 톤 제거 + 기본 들여쓰기 */
.whisper3-wrapper .talk_bubble .bubble_content{
  background:transparent !important; border:0 !important; box-shadow:none !important;
  margin:0 0 0 1em; padding:0; color:#fff;
}

/* 한줄 말풍선(자식 p 없음) → 컨텐트에 직접 밑줄 */
.whisper3-wrapper .talk_bubble .bubble_content:not(:has(> p)){
  display:inline-block;
  padding-bottom:var(--w3-uline-gap);
  border-bottom:var(--w3-uline-thickness) dashed var(--w3-uline-color) !important;
  border-radius:0;
}

/* 여러줄 말풍선(자식 p 존재) → 각 p에 밑줄 */
.whisper3-wrapper .talk_bubble .bubble_content:has(> p){ display:block; }
.whisper3-wrapper .talk_bubble .bubble_content:has(> p) > p,
.whisper3-wrapper .talk_bubble .bubble_content > p.whisper3-dialogue{
  display:block; margin:.25em 0 .5em;
  padding-bottom:var(--w3-uline-gap);
  border-bottom:var(--w3-uline-thickness) dashed var(--w3-uline-color) !important;
}
/* 여러줄 말풍선 마지막 p 여백 제거 */
.whisper3-wrapper .talk_bubble .bubble_content:has(> p) > p:last-child,
.whisper3-wrapper .talk_bubble .bubble_content > p.whisper3-dialogue:last-child{
  margin-bottom:0;
}


/* 0) 말풍선 컴포넌트 자체 간격 제거 (중복 간격 원천 차단) */
.whisper3-wrapper .talk_bubble {
  margin: 0 !important;  /* ← 기존 var(--w3-group-gap) 무시 */
}

/* 1) 기본 li 간격(나레이션 등 일반 항목) */
.whisper3-list > li {
  margin: 0 0 var(--w3-item-gap);
}

/* 2) 말풍선이 들어있는 li는 그룹 간격 사용 */
.whisper3-list > li:has(> .talk_bubble) {
  margin-bottom: 0;
}
.whisper3-list > li:has(> .talk_bubble):last-child {
  margin-bottom: var(--w3-item-gap);
}

li.whisper3-line.is-moderator { margin: 1em 0; }

/* 나레이션 — 상위 리스트의 ‘직계 p’만 동일 밑줄 */
.whisper3-list > li > p:not(.interviewer-text){
  margin:0; line-height:1.5;
  padding-bottom:var(--w3-uline-gap);
}

/* (선택) 선택지 영역에서 전역 gap 무력화 */
.board-viewer .talk_content li:has(.whisper3-wrapper){ gap:0; }

/* 선택지 내부: 진행자 중앙 정렬 + 밑줄 동일 적용 */
.whisper3-wrapper .wrapper.sms-choice-container .talk_list .interviewer,
.whisper3-wrapper .warpper.sms-choice-container .talk_list .interviewer{ text-align:center; }
.whisper3-wrapper .wrapper.sms-choice-container .talk_list .interviewer > .interviewer-text,
.whisper3-wrapper .warpper.sms-choice-container .talk_list .interviewer > .interviewer-text{
  display:inline-block; line-height:1.5;
  padding-bottom:var(--w3-uline-gap, .28em);
  border-bottom:var(--w3-uline-thickness, 1px) dashed var(--w3-uline-color, rgba(255,255,255,.35)) !important;
}
/* 선택지 내부: 나레이션 밑줄 동일 적용 */
.whisper3-wrapper .wrapper.sms-choice-container .talk_list > li > p:not(.interviewer-text),
.whisper3-wrapper .warpper.sms-choice-container .talk_list > li > p:not(.interviewer-text){
  line-height:1.5;
  padding-bottom:var(--w3-uline-gap, .28em);
  border-bottom:var(--w3-uline-thickness, 1px) dashed var(--w3-uline-color, rgba(255,255,255,.35)) !important;
}

/* 기본: 말풍선 li는 하단 여백 0 (붙이기) */
.whisper3-list > li.whisper3-line {
  margin-bottom: 0 !important;
}

/* 다음 형제가 '말풍선이 아닐 때' = 말풍선 런(run)의 끝 → 여백 부여 */
.whisper3-list > li.whisper3-line:has(+ li:not(.whisper3-line)) {
  margin-bottom: 1.5em !important;
}

/* 리스트의 '마지막 항목이 말풍선'인 경우도 보장 */
.whisper3-list > li.whisper3-line:last-child {
  margin-bottom: 1.5em !important;
}

.whisper3-wrapper .wrapper.sms-choice-container .talk_list > li.whisper3-line { margin-bottom:0 !important; }
.whisper3-wrapper .wrapper.sms-choice-container .talk_list > li.whisper3-line:has(+ li:not(.whisper3-line)),
.whisper3-wrapper .wrapper.sms-choice-container .talk_list > li.whisper3-line:last-child {
  margin-bottom: var(--w3-item-gap) !important;
}

/* 속삭임3 내부: 내용 없는 나레이션 p 숨기기 */
.whisper3-wrapper .whisper3-list > li > p:not(.interviewer-text):not([class]):not(:has(*)){
  display:none !important;
}

/* (옵션) 위 p만 있는 li도 통째로 제거해 간격까지 없앰 */
.whisper3-wrapper .whisper3-list > li:has(> p:not(.interviewer-text):not([class]):not(:has(*))){
  display:none !important;
}

/* Whisper3 전용 탭 보더 색상 */
.whisper3-wrapper .wrapper.sms-choice-container .tabs {
  border-top: 1px solid rgba(0, 0, 0, 0.5);
}
.whisper3-wrapper .wrapper.sms-choice-container .panels {
    border-bottom: 1px solid rgba(0, 0, 0, 0.5);
}




/* ----------------------------------------------
  [20] 인터뷰
---------------------------------------------- */
/* 인터뷰 리스트 안의 각 항목을 block formatting context 로 감싸서 float 을 묶어버린다 */
.interview-list li {
  overflow: auto;    /* float 된 자식 요소들을 자동으로 clear 해 줌 */
  margin-bottom: 1em;/* 항목 간격 취향껏 */
}

/* ——— 인터뷰 박스 스타일 ——— */
.interview-wrapper {
    width: 100%;
    box-sizing: border-box;
    background-origin: border-box;
    background: rgba(70, 70, 88, 0.8);
    border: 5px double;
    background-image: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.15) 0px,
    rgba(0, 0, 0, 0.15) 1px,
    transparent 1px,
    transparent 5px
  );
  background-size: 100% 5px;   border: 5px double rgba(200, 200, 220, 0.5);
   box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3);
   margin: 1em 0;
   padding: 0;
}

.interview-topbar {
  padding: 6px 10px;
  background: rgba(45, 45, 60, 0.8);
  color: #fff;
  font-weight: bold;
  border-radius: 50px;
  display: inline-block;
  margin: 20px;
  font-size: 0.8em;
  align-self: flex-start;  
  width: auto; 
}

.interview-list {
  list-style: none;
  margin: 0;
  padding: 0 30px 30px 30px;
}

/* ——— 진행자 텍스트 스타일 ——— */
.interviewer {
  text-align: center;
}

.interviewer-text {
  color: #fff;
  line-height: 1.5;
  margin: auto;
}

/* 인터뷰 박스 내부의 말풍선 */
.interview-wrapper .talk_bubble .bubble_content {
    border: 1px solid rgb(255, 255, 255, 0.3);
    border-top: 4px solid #444444;
    background-color: rgb(45, 45, 60, 0.5);
    color: #fff;  
}

.interview-wrapper .talk_bubble .bubble_content.ayn,
.interview-wrapper .talk_bubble .bubble_content.shu,
.interview-wrapper .talk_bubble .bubble_content.alk {
    background-color: rgb(45, 45, 60, 0.5);
    color: #fff;  
}

.interview-wrapper .talk_bubble .bubble_content.ayn { border-top: 4px solid #a13d41; }
.interview-wrapper .talk_bubble .bubble_content.shu { border-top: 4px solid #eac1c1; }


.interview-list .wrapper.sms-choice-container .tabs {
  border-top: 1px solid rgba(255, 255, 255, 0.5) !important;
}

.interview-list .wrapper.sms-choice-container .panels {
  border-bottom: 1px solid rgba(255, 255, 255, 0.5) !important;
}

/*-- 영상통화 --*/
.video-call-wrapper {
  border: none;
  border-radius: 10px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: 444px;
  overflow: hidden;
  background-position: center;
  background-size: cover;
}
@media (max-width: 800px) {
  .video-call-wrapper {
    height: 300px !important;
  }
}

/* 1) 반투명 검은 오버레이 (가장 아래) */
.video-call-wrapper::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.5);
  pointer-events: none;
  z-index: 2;
}

/* 2) 전경 이미지 (포그라운드) */
.video-call-foreground {
  position: absolute;
  bottom: 0; 
  left: 50%;
  transform: translateX(-50%);
  max-height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* 3) 탑바와 리스트 (가장 위) */
.video-call-wrapper .interview-topbar,
.video-call-wrapper .interview-list {
  position: relative;
  z-index: 3;
}

/* 리스트 스크롤 세로만, 가로 넘침 숨기기 */
.video-call-wrapper .interview-list {
  flex: 1 1 auto;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: content-box;
}

.video-call-wrapper .talk_bubble .bubble_content {
    background-color: rgb(45, 45, 60, 0.7);
}

.video-call-wrapper .talk_bubble .bubble_content.ayn,
.video-call-wrapper .talk_bubble .bubble_content.shu {
    background-color: rgb(45, 45, 60, 0.7);
}

/* 인터뷰/영상통화 내부의 프로필 이미지에선 그라데이션 비활성화 */
.board-viewer .interview-wrapper .in_head::after,
.board-viewer .video-call-wrapper .in_head::after,
.interview-wrapper .in_head::after,
.video-call-wrapper .in_head::after {
  background: none !important; 
}



/* ----------------------------------------------
  [21] 토글
---------------------------------------------- */
/* 토글 전체 컨테이너 */
.toggle-block {
  border-radius: 4px;
  background-color: #fff; 
}

/* summary (토글 버튼) 스타일 */
.toggle-block > summary {
  padding: 0.5em 1em; 
  border-radius: 4px;
  background-color: #fff;
  color: #333;  
  font-size: 0.8em;
  border: 1px solid #7f7f7f;
  display: inline-block;
  width: auto;
  box-sizing: border-box;
}

/* marker 숨기기 */
.toggle-block > summary::-webkit-details-marker { display: none; }
.toggle-block > summary::marker { content: ''; }

/* 커스텀 화살표 */
.toggle-block > summary::before {
  content: '▼';
  font-size: 0.8em;
  display: inline-block;
  margin-right: 0.5em;
  transition: transform 0.2s ease;
}

/* 열린 상태 */
.toggle-block[open] > summary {
  background-color: #7f7f7f;
  color: #fff;
}

/* 화살표 회전 */
.toggle-block[open] > summary::before {
  transform: rotate(-180deg);
}

/* 토글된 본문(목록) 스타일 */
.toggle-block > .talk_list {
  background-color: #f7f7f7; /* 본문 연회색 배경 */
  border-radius: 4px;
  padding: 1em;              /* 본문 안쪽 여백 */
  margin-top: 0.5em;
  list-style: none;
  border: 1px solid #ccc;    /* 연한 회색 테두리 */
  width: 100%;              /* 꽉 채우기 */
  box-sizing: border-box;   /* padding 포함 */
}

/* 토글 내부의 마지막 li는 아래 여백 제거 */
.toggle-block .talk_list li:last-child {
  margin-bottom: 0 !important;
}

.toggle-block .talk_list li {
  display: block;
}

.toggle-block .talk_list li p {
  word-break: break-word;
  white-space: normal;
}

/* 토글 내부의 각 줄을 flex로 */
.toggle-block .talk_list li{
  display: flex;
  align-items: center;
}

/* 말풍선은 내용만큼만 */
.toggle-block .talk_list li p{
  display: inline-block;
  width: fit-content;     /* 지원 잘 됨 */
  max-width: 100%;
}

/* ----------------------------------------------
  [21-2] 바로가기
---------------------------------------------- */
/* 바로가기 버튼 */
.shortcut-wrap {
  list-style: none;
  display: flex;
  justify-content: center;
  margin: 14px 0;
}

.shortcut-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;

  width: min(520px, 92%);
  padding: 14px 16px;

  border-radius: 14px;
  border: 1px solid rgba(225,225,225,1);
  background: #f5f5f5;
  box-shadow: 0 0 10px rgba(165,200,255,0.35);

  color: #444;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
}

.shortcut-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 14px rgba(165,200,255,0.55);
}





/* ----------------------------------------------
  [22] 해킹 메시지
---------------------------------------------- */
.switch-text {
  opacity: 1;
  transition: opacity 1s ease; /* 1초 페이드 */
}





/* ----------------------------------------------
  [23] 2025 화이트데이 박스
---------------------------------------------- */
.white25-q {
    margin: 15px auto;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fbfafa;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    width: 520px;
}

.white25-content {
  /* background: #f0f0f0;
  border-radius: 16px;
  padding: 12px 16px; */
  background: transparent;
  border-radius: 0;
  padding: 0;
  line-height: 1.6;
  margin: 3px 0px 0px 10px;
}

.white25 {
  position: relative; /* 점선 배치를 위한 기준 */
  display: flex;
  align-items: flex-start;
  padding: 0 0 1em 0;
  margin-bottom: 10px;
}

.white25-node {
  position: relative; /* 점선 가상요소 기준 */
  width: 28px;
  height: 35px;
  background-image: url('https://somouu.dothome.co.kr/img/99_SOMO/white.webp');
  background-repeat: no-repeat;
  background-position-x: 0;
  margin-right: 10px;
  flex-shrink: 0;
  background-size: 28px auto;
  margin-right: 10px;
  flex-shrink: 0;
}

.white25-block {
  position: relative;
}
.white25-block::before {
  content: "";
  position: absolute;
  top: 35px;
  bottom: 0;
  left: 14px;
  width: 2px;
  background-image: repeating-linear-gradient(
    to bottom,
    #ccc 0px,
    #ccc 4px,
    transparent 4px,
    transparent 8px
  );
}

/* 마지막 말풍선에는 점선 제거 
.white25:last-child .white25-node::after {
  display: none;
}*/
/* .white25-q 컨테이너 안에서 마지막 말풍선에만 하단 여백 0 */
.white25-q > .white25-block:last-child .white25 {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* 컬러박스 */
.ay25-color {
  background: #f2dede;
  position: relative;
  margin: 10px 0px 0px 10px;
  padding: 10px 15px 10px 40px;
  border-radius: 10px;
  border: 1px solid rgb(0,0,0,0.2);
}
.sh25-color {
  background: #ffffff;
  position: relative;
  margin: 5px 0 0 auto;
  padding: 10px 15px;
  border-radius: 10px;
  border: 1px solid rgb(0,0,0,0.2);
  max-width: 80%;
}

.white25-tu1 {
  width: 12px;
  height: 12px;
  background: #aaa;
  border-radius: 50%;
  position: absolute;
  top: -6px;
  left: -6px;
}

.ay25-color-circle {
  width: 40px;
  height: 40px;
  position: absolute;
  left: -10px;
  top: -10px;

  /* 1) 검은색 원형 배경 */
  background-color: #444;
  border-radius: 50%;

  /* 2) 빨간 테두리 */
  border: 2px solid red;

  /* 3) 안쪽에 들어갈 원형 이미지 */
  background-image: url('https://somouu.dothome.co.kr/img/08_QQ/QQ%E4%BA%BA-%E7%99%BD%E8%A1%A3%E5%B0%91%E5%B9%B4.webp');
  background-repeat: no-repeat;
  background-position: 50% 30%;
  background-size: 150%;
}

/* 선택지 내부에서 마지막 아닌 말풍선 → 하단 여백 유지 */
.message-item.white25-fqpanel .white25:not(:last-child) {
  margin-bottom: 10px !important;
  padding-bottom: 0 !important;
}
/* 선택지 내부에서 마지막 말풍선 → 여백 제거 */
.message-item.white25-fqpanel .white25:last-child {
  padding-bottom: 0 !important;
}

/* 선택지 탭 영역 */
.message-tab-container.white25-fqdiv {
  display: flex;
  flex-wrap: wrap; 
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-left: 0;
}

/* 2. 탭들 높이 맞추기 (선택 사항) */
.message_q.white25-fq {
  padding: 6px 12px;
  background-color: #fff;
  border: 1px solid var(--flow-divider, #ccc);
  border-radius: 8px;
  margin: 5px auto;
  position: relative;
  max-width: 70%;
  text-align: center;
}

.message_q.white25-fq.on {
  background-color: #ae5d5c;
  color: #fff;
}

.message-item {
  margin-top: 8px;
  margin-bottom: 16px;
}


.white25-fqpanel {
  display: none;
}
.white25-fqpanel.show {
  display: block;
}

/* 선택지가 기본적으로 보일 때는 하단 여백 추가 */
.white25-fqdiv {
  margin-bottom: 20px;
}
/* 선택지가 클릭되어 본문(.show)이 나타나면 여백 제거 */
.white25-fqdiv:has(.white25-fqpanel.show) {
  margin-bottom: 0;
  padding-bottom: 0;
}

/* 1) 탭 컨테이너 위쪽 여백 제거 (기존 margin-top:-) */
.white25-block > .white25 + .white25-fqdiv {
  margin-top: 0 !important;
}
/* 2) :has() 지원 브라우저에서는 “탭 바로 앞” 말풍선의 밑여백·패딩을 제거 */
.white25-block > .white25:has(+ .white25-fqdiv) {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.white25-block a {
  font-weight: bold; 
  text-decoration: none; 
}

.white25-block a:hover {
  text-decoration: underline; 
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}


/* 기본 시간 칩 */
.white25-node.white25-time {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-image: none !important;
  width: 56px; 
  height: 35px; 
  margin-right: 10px; 
  flex-shrink: 0;
}
.white25-node.white25-time .white25-time-txt {
  position: absolute;
  width: 50px;
  background: linear-gradient(150deg, #f0dcbe 70%, rgba(240, 218, 219, 0) 100%);
  border-radius: 5px 15px 5px 15px;
  vertical-align: middle;
  text-align: center;
  font-size: 12px;
  line-height: 20px;
}

/* 시간 라인이 있는 경우: 한 줄 전체 사용 + 내용은 다음 줄 */
.white25:has(> .white25-node.white25-time) {
  flex-direction: column;
  align-items: stretch;
}
/* 시간 노드를 가로 전체로 */
.white25:has(> .white25-node.white25-time) > .white25-node.white25-time {
  width: 100% !important; 
  height: 35px;
  justify-content: flex-start;
}
/* 시간 텍스트 위치(절대배치 사용 중이므로 좌측 정렬 보정) */
.white25:has(> .white25-node.white25-time) 
  > .white25-node.white25-time .white25-time-txt {
  left: -10px; 
}
/* 최상위 본문에서만 시간 라인 들여쓰기 */
.white25-block > .white25:has(> .white25-node.white25-time) > .white25-content,
.white25-block > .white25:has(> .white25-node.white25-time) > .ay25-color,
.white25-block > .white25:has(> .white25-node.white25-time) > .sh25-color,
.white25-block > .white25:has(> .white25-node.white25-time) > .ay25-time,
.white25-block > .white25:has(> .white25-node.white25-time) > .sh25-time {
  margin-left: 2em;
}
/* 시간 선택지 패널 내부는 들여쓰기 제거 */
.message-item.white25-fqpanel .white25:has(> .white25-node.white25-time) > .white25-content,
.message-item.white25-fqpanel .white25:has(> .white25-node.white25-time) > .ay25-time {
  margin-left: -5px !important;
}
.message-item.white25-fqpanel .white25:has(> .white25-node.white25-time) > .sh25-time {
  margin-left: auto !important;
}

/* 선택지 내부에서는 PHP가 visibility:hidden을 인라인으로 주지만,
   혹시 인라인이 빠진 경우를 대비한 보조 처리 */
.message-item.white25-fqpanel .white25-node.white25-time {
  visibility: inherit; /* 기본 */
}
.message-item.white25-fqpanel .white25-node.white25-time[style*="visibility:hidden"] {
  /* 공간만 유지 */
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

/* A) 선택지 패널 내부 UL 기본 여백 제거 */
.message-item.white25-fqpanel ul.talk_list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.message-item.white25-fqpanel ul.talk_list > li {
  margin: 0;
  padding: 0;
}

/* B) 선택지 패널 내부에서는 '시간 라인 한 줄 전체' 규칙 무효화 */
.message-item.white25-fqpanel .white25 {
  flex-direction: row;           /* 다시 가로 배치 */
  align-items: flex-start;
}
/* 숨김 처리된 시간 노드: 아이콘과 같은 폭만 차지(여백 없음) */
.message-item.white25-fqpanel .white25 > .white25-node.white25-time {
  width: 28px !important;        /* 아이콘 폭과 동일 */
  height: 35px;                  /* 라인 높이 유지 */
  margin-right: 10px;
}
/* 시간 텍스트 배지도 숨김 */
.message-item.white25-fqpanel .white25 > .white25-node.white25-time .white25-time-txt {
  display: none;
}


/* 시간형 아인(@) — 기존 ay25-color와 동일한 박스, 아이콘만 교체/무테 */
.white25-content.ay25-time {
  background: #f2dede;
  position: relative;
  margin: 10px 0px 0px 10px;
  padding: 10px 15px 10px 40px;
  border-radius: 10px;
  border: 1px solid rgb(0,0,0,0.2);
}
/* 둥근 아이콘(무테 + 새 이미지) */
.ay25-time .ay25-time-circle {
  width: 60px;
  height: 50px;
  position: absolute;
  left: -15px;
  top: -15px;
  background-image: url('https://somouu.dothome.co.kr/img/08_QQ/%E5%B0%8F%E5%A4%B4%E5%83%8F-%E7%8E%B0%E4%BB%A3%E8%89%BE%E5%9B%A0.webp');
  transform: scaleX(-1);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;  
}

/* 시간형 여주(@@) — 현재는 기존 sh25-color와 동일, 클래스만 분리 */
.white25-content.sh25-time {
  background: #e6dcd7;
  position: relative;
  margin: 5px 0 0 auto;
  padding: 10px 15px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.2);
  /*text-align: right;*/
}



/* ----------------------------------------------
   [24] 더스트 편지
---------------------------------------------- */
/* 전체 편지 외곽 */
.dust-letter-wrapper {
  display: flex;
  justify-content: center;   /* 중앙 정렬 */
  width: 100%;
  height: auto;
  overflow: visible;
  position: relative;
}

/* 스케일 조절을 위한 감싸는 요소 */
.dust-letter-scaler {
  transform-origin: top center;
  transition: transform 0.2s ease;
}

/* 실제 편지 */
.dust-letter {
  width: 700px;
  height: 594px;
  background-image: url('https://somouu.dothome.co.kr/img/99_SOMO/dust-letter.webp');
  background-size: cover;
  background-position: center;
  text-align: center;
  padding: 40px 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  font-size: 16px;
  position: relative;
}

/* 제목 */
.dust-letter h2 {
  font-family: 'SchoolSafetyNotification';
  font-weight: 700;
  margin-top: 22px;
  margin-bottom: 42px;
  font-size: 28px;
}


.dust-letter .dust-content {
  width: 420px;
  margin: 0 auto;
  text-align: left;
  box-sizing: border-box;

  max-height: 330px;
  overflow-y: auto;

  padding-right: 15px;              /* ✅ 스크롤바 공간 확보 */
  background-clip: content-box;     /* ✅ 텍스트는 패딩 영역을 침범하지 않도록 */

  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
}

/* WebKit (Chrome, Edge, Safari, Whale) */
.dust-letter .dust-content::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}



/* 단락 */
.dust-paragraph {
  white-space: nowrap;       
  overflow-wrap: break-word;
}

.letter-line {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  line-height: 28px;
  padding-top: 2px;
  padding-bottom: 2px;
}

/* 발신인 */
.sender-box {
  position: absolute;
  bottom: 80px;
  right: 160px;
  text-align: right;
  font-size: 14px;
}

.sender-subtitle {
  opacity: 0.65;
  margin-bottom: 5px;
}

.sender-name {
  font-weight: bold;
  font-size: 24px;
  font-style: oblique;
}



/* ----------------------------------------------
   [25] 탈출 편지
---------------------------------------------- */
/* 전체 편지 외곽 */
.escape-letter-wrapper {
  display: flex;
  justify-content: center;   /* 중앙 정렬 */
  width: 100%;
  height: auto;
  overflow: visible;
  position: relative;
}

/* 스케일 조절을 위한 감싸는 요소 */
.escape-letter-scaler {
  transform-origin: top center;
  transition: transform 0.2s ease;
}

.escape-letter {
  width: 700px;
  height: 594px;
  background-image: url('https://somouu.dothome.co.kr/img/99_SOMO/escape-letter.webp');
  background-size: cover;
  background-position: center;
  text-align: center;
  padding: 40px 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  font-size: 16px;
  position: relative;
}

/* 내용 영역 */
.escape-letter .escape-content {
  width: 420px;
  margin: 60px auto 0 auto;
  text-align: left;
  box-sizing: border-box;

  max-height: 360px;           /* 필요에 따라 높이 조정 */
  overflow-y: auto;

  padding-right: 15px;         
  background-clip: content-box;

  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
}

/* WebKit (Chrome, Edge, Safari, Whale) */
.escape-letter .escape-content::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

/* 단락 */
.escape-paragraph {
  white-space: nowrap;       
  overflow-wrap: break-word;
}

.letter-line {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  line-height: 28px;
  padding-top: 2px;
  padding-bottom: 2px;
}


/* ----------------------------------------------
   [26] 탈출 프로필
---------------------------------------------- */
.escape-profile-wrapper {
  max-width: 400px;
  margin: 10px auto;
}

.escape-profile-table {
  width: 100%;
  position: relative;
  z-index: 1; 
  background: rgba(60, 90, 120, 1);
  border: 2px solid #B0C4DE;
  border-radius: 10px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden; 

  padding: 12px; 
  border-collapse: separate;  /* padding이 적용되도록 */
}

.escape-profile-table td {
  padding: 6px 6px;
}

.escape-profile-img-cell {
  text-align: center;
}
.escape-profile-img {
  width: 100px;
  height: auto;
  object-fit: cover;
  filter: brightness(1.1);
}

.escape-profile-label {
  width: 80px;
  color: rgba(255, 255, 255, 0.6);
}

.escape-profile-value span {
  color: #FCFCFC;
}

.escape-profile-narration {
  color: #bed7e6;
  padding-top: 10px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.escape-profile-wrapper {
  position: relative;
}

.escape-profile-wrapper canvas.tv {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
  opacity: 1;
  mix-blend-mode: soft-light;
  border-radius: 10px;
  overflow: hidden; 
}



/* ----------------------------------------------
  [27] 배경 대화박스
---------------------------------------------- */
.dialogue-container {
  position: relative;
  width: 100%;
  margin: 0 auto;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 0 8px rgba(0,0,0,0.1);
  min-height: 0;
}
@media (max-width: 800px) {
  .dialogue-container {
    min-height: 300px;
  }
}

.dialogue-container::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(black, #878caa);
  opacity: 0.2;
  z-index: 1;
  pointer-events: none;
}

.dialogue-container > * {
  position: relative;
  z-index: 2;
}

.dialogue-canvas {
  display: block;
  position: absolute;
  top: 0; left: 0;
  width: 100% !important;
  height: 100% !important;
  z-index: 1;
  pointer-events: none;
  background: transparent;
  border-radius: inherit;
}

.dialogue-narration {
  background: #f1edec; 
  color: #644d2c; 
  padding: 20px; 
  border-radius: 8px;
  text-align: center;
  margin: 2em auto; 
  max-width: 60%; 
  border: 4px double #aa9b8c;
}

/* 대화 내용 영역 */
.dialogue-text {
  position: relative;
  left: auto;
  width: 100%;
  height: auto;
  overflow: visible;
  box-sizing: border-box;
  padding: 20px 10px;
  z-index: 2;
  color: #644d2c;
  font-family: var(--font);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.dialogue-text::-webkit-scrollbar { display: none; }

/* 아바타 + 말풍선 가로 배치 */
.dialogue-bubble-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 1em 0;
}

/* 아바타 */
.dialogue-avatar-wrapper {
  position: relative;
  width: 20%;
  aspect-ratio: 1 / 1; 
  flex-shrink: 0;
  min-width: 100px;
}

/* 배경 마름모 */
.dialogue-avatar-wrapper .body_span {
  width: 80%; 
  height: 80%;
  background-color: #f1edec;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  position: absolute;
  top: 20%;
  left: 10%;
  z-index: 1;
}

/* 아바타 이미지 */
.dialogue-avatar-wrapper .SmDialogue_imgA {
  position: absolute;
  bottom: 0; 
  left: 0;
  width: 100%;
  object-fit: cover;
  clip-path: polygon(0% 0%, 100% 0%, 100% 64%, 50% 100%, 0% 64%);
  transform: scale(0.8); 
  transform-origin: bottom center; 
  z-index: 2;
}

/* 말풍선 */
.dialogue-bubble {
  max-width: 70%;
  background: rgba(240, 238, 238, 1);
  padding: 10px 15px 10px 25px;
  border-radius: 10px 10px 10px 0px;
  position: relative;
  /* 그림자를 여러 번 겹쳐서 진하게 */
  box-shadow:
    0 0 2px rgba(170, 155, 140, 1),
    0 0 2px rgba(170, 155, 140, 1),
    0 0 2px rgba(170, 155, 140, 1);
}

/* 왼쪽 꼬리 (기본) */
.dialogue-bubble::before {
  content: "";
  position: absolute;
  left: -14px;
  bottom: 0;
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-right: 14px solid rgba(240, 238, 238, 1);
  filter: drop-shadow(-1.5px 1px 1px rgba(170, 155, 140, 1));
}

/* 오른쪽 정렬 */
.dialogue-bubble.right {
  margin-left: auto;
  margin-right: 35px;
  padding: 10px 15px 10px 25px;
  border-radius: 10px 10px 0px 10px;
}

/* 오른쪽 말풍선에서는 기본 꼬리를 숨김 */
.dialogue-bubble.right::before {
  content: none;
}

/* 오른쪽 꼬리 */
.dialogue-bubble.right::after {
  content: "";
  position: absolute;
  right: -13px;
  bottom: 0;
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-left: 14px solid rgba(240, 238, 238, 1);
  filter: drop-shadow(1.5px 1px 1px rgba(170, 155, 140, 1));
}

/* 화자 이름 */
.dialogue-bubble .dialogue-speaker {
  margin: 0 0 3px 0;
  font-size: 0.9em;
}

.board-viewer .dialogue-container .highlight-speaker {
  display: inline;
  color: #644d2c;
  text-shadow: 0 0 4px rgba(255,255,255,0.7);
  font-weight: bold;
  font-size: 120%;
  margin-left: -10px;
}

/* 대사 */
.dialogue-bubble .dialogue-line {
  margin: 0;
  line-height: 1.4;
}

/* 이름별 색상 */
.dialogue-container .highlight-speaker.ayn { color: #ae5d5c; text-shadow: -1px 0 rgba(255,255,255,0.3), 0 1px rgba(255,255,255,0.3), 1px 0 rgba(255,255,255,0.3), 0 -1px rgba(255,255,255,0.3); }
.dialogue-container .highlight-speaker.shu { color: #ebdada; text-shadow: -1px 0 rgba(0,0,0,0.5), 0 1px rgba(0,0,0,0.5), 1px 0 rgba(0,0,0,0.5), 0 -1px rgba(0,0,0,0.5); }
.dialogue-container .highlight-speaker.alk { color: #bdd1c7; text-shadow: -1px 0 rgba(0,0,0,0.6), 0 1px rgba(0,0,0,0.6), 1px 0 rgba(0,0,0,0.6), 0 -1px rgba(0,0,0,0.6); }
.dialogue-container .highlight-speaker.rosh { color: #f7e6c6; text-shadow: -1px 0 rgba(0,0,0,0.6), 0 1px rgba(0,0,0,0.6), 1px 0 rgba(0,0,0,0.6), 0 -1px rgba(0,0,0,0.6); }
.dialogue-container .highlight-speaker.clrnce { color: #5e607f; text-shadow: -1px 0 rgba(255,255,255,0.3), 0 1px rgba(255,255,255,0.3), 1px 0 rgba(255,255,255,0.3), 0 -1px rgba(255,255,255,0.3); }
.dialogue-container .highlight-speaker.emr { color: #d8d4f2; text-shadow: -1px 0 rgba(0,0,0,0.6), 0 1px rgba(0,0,0,0.6), 1px 0 rgba(0,0,0,0.6), 0 -1px rgba(0,0,0,0.6); }
.dialogue-container .highlight-speaker.luke { color: #d7cdcd; text-shadow: -1px 0 rgba(0,0,0,0.6), 0 1px rgba(0,0,0,0.6), 1px 0 rgba(0,0,0,0.6), 0 -1px rgba(0,0,0,0.6); }
.dialogue-container .highlight-speaker.hres { color: #7a6882; text-shadow: -1px 0 rgba(255,255,255,0.3), 0 1px rgba(255,255,255,0.3), 1px 0 rgba(255,255,255,0.3), 0 -1px rgba(255,255,255,0.3); }











/* ----------------------------------------------
  [-] 비주얼노벨
---------------------------------------------- */
/* 비주얼 노벨의 기본 레이아웃으로, 요소들이 세로로 정렬되고 
  대사가 절대 위치로 고정되어 클릭하면 넘어가는 구조를 만듭니다. */
.board-viewer .talk_content li.novel {
  flex-direction: column;
  position: relative;
}

/*  대사 부분(클릭해서 넘기는 부분)을 하단에 고정시키고
클릭할 수 있게 만들어줍니다. */
.board-viewer .talk_content li.novel .talk {
  box-sizing: border-box;
  margin-left: 0;
  border-radius: 0 0 10px 10px;
  position: absolute;
  bottom: 0; left: 0; right: 0;
  margin: 0 auto;
  height: 150px;
  display: flex;
  align-items: center;
  padding: 0 50px;
  cursor: pointer;
}

/* 배경 이미지 영역의 높이와 정렬을 결정하는 부분으로, 
  캐릭터의 큰 이미지가 적절히 표시됩니다. */
.board-viewer .ch_head.chest {
  width: 100%;
  min-height: 600px;
  justify-content: flex-end;
  align-items: center;
  background-position: center !important;
}
.board-viewer .in_chest img {
  max-width: 700px;
  max-height: 600px;
  object-fit: cover;
  object-position: center;
  filter: drop-shadow(0 0 15px #ffffff57);
}

/* 추가적으로 .desc 클래스가 붙은 경우 내부 콘텐츠를 중앙 정렬합니다. */
.board-viewer .ch_head.chest.desc {
  justify-content: center;
}

/* 캐릭터 이름이 비주얼 노벨 화면에서 위치 고정 및 강조 스타일로 나타납니다. */
.board-viewer .ch_name {
  position: absolute;
  top: -18px;
  left: 40px;
  padding: 5px 30px;
  font-size: 24px;
  border-radius: 2em;
  border: 2px solid white;
  font-weight: 800;
  background-color: #666;
  color: white;
  box-sizing: border-box;
}

/* "전체 로그" 버튼과 전체 로그 영역이 클릭 시 보이고 숨겨지도록 하는 핵심 스타일입니다. */
.board-viewer .log_btn {
  background-color: var(--sub);
  color: white;
  text-align: center;
  cursor: pointer;
  border-radius: 10px;
}
#log_list {
  display: none;
  padding: 30px 0;
}


/* ----------------------------------------------
  [-] 비주얼노벨 대사 말풍선
---------------------------------------------- */
.board-viewer .talk_content li .talk.novel {
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(5px);
  border: 1px solid #312f2f;
  color: black;
  width: 100%;
}

.board-viewer .talk_content li .talk.novel.desc {
  display: inline-block;
  width: auto;
  height: auto;
  position: relative;
  padding: 20px 50px;
  border-radius: 0;
}


/* ----------------------------------------------
   [-] 비주얼노벨 애니메이션 및 효과 관련
   .fadedown과 .fadeup은 요소가 나타날 때 부드럽게 적용되는 효과
  @keyframes fadedown은 요소가 나타날 때 위쪽(-10%)에서 원래 위치(0)로 이동하고 불투명도가 0에서 1로 증가하는 효과
  @keyframes fadeup은 요소가 나타날 때 아래쪽(10%)에서 원래 위치(0)로 이동하고 불투명도가 0에서 1로 증가하는 효과
---------------------------------------------- */
.fadedown {
  animation: fadedown 1s ease both;
}
.fadeup {
  animation: fadeup 1s ease both;
}

@keyframes fadedown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-10%);
    transform: translateY(-10%);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeup {
  0% {
    opacity: 0;
    -webkit-transform: translateY(10%);
    transform: translateY(10%);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}



/* ----------------------------------------------
   [-] 카카오톡 대화 날짜
---------------------------------------------- */
.board-viewer .kakao_date {
  text-align: center;
  display: block;
  background-color: #aaaaaa;
  color: white;
  font-size: 14px;
  width: 100%;
  margin: 50px 0;
}



/* ----------------------------------------------
   [-] 이름변경
---------------------------------------------- */
/* -- 이름 입력 전체 박스 -- */
.name-box {
  position: relative;
  background-color: #fcfbfb; /* 기존처럼 전체 배경 */
  padding: 10px 25px 10px 65px; /* 왼쪽 리본 공간 확보 */
  margin: 0.5em 0;
  border: 1px solid #d9d9d9;
  border-radius: 10px;
  width: fit-content;
}

/* -- 리본 윗부분 (사각형) -- */
.name-box::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 14px;
  width: 30px;
  height: 47px;
  background-color: #a03c42; /* 리본색 */
}

/* -- 리본 아랫부분 (삼각형) -- */
.name-box::after {
  content: "";
  position: absolute;
  top: 17px;
  left: 14px;
  width: 0;
  height: 0;
  border: 15px solid;
  border-color: transparent transparent #fcfbfb;
}

/* -- 안내 문구 -- */
.name-guide {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

/* -- 이름 입력창 -- */
.custom-name-input {
  background-color: #f0f8ff; /* 연한 파랑 */
  border: 1px solid #ccc;
  padding: 5px;
  border-radius: 4px;
  width: 70px;
  text-align: center;
  font-size: 12px;
}

/* -- 확인 버튼 -- */
.custom-name-apply-btn {
  background-color: #eac1c1; /* 연한 빨강 */
  color: #444444;
  border: none;
  padding: 8px 8px;
  border-radius: 5px;
  cursor: pointer;
  text-align: center;
  font-size: 12px;
  margin-left: 0.5em;
}

/* -- 버튼 hover -- */
.custom-name-apply-btn:hover {
  background-color: #a13d41; /* 진한 빨강 */
  color: #ffffff;
}


.blur-toggle {
  filter: blur(5px);
  cursor: pointer;
  transition: filter 0.3s ease;
  display: inline-block;
}

.blur-toggle.revealed {
  filter: none;
}




/* ----------------------------------------------
  [-] 반응형 스타일
  화면 너비가 640px 이하인 모바일 환경에서 반응형 조절
---------------------------------------------- */
@media all and (max-width: 640px) {
  .avocado-list li {
    height: auto;
  }

  .avocado-list li a {
    line-height: 200%;
    padding: 10px 15px;
    text-overflow: ellipsis;
  }

  .avocado-list li .title {
    width: 100%;     
    font-size: 20px;
  }

  .avocado-list li .ico-cate,
  .avocado-list li .name,
  .avocado-list li .date,
  .avocado-list li .hit {
    position: relative;
    width: auto;
    left: auto;
    right: auto;
    bottom: auto;
    line-height: 1.2em;
  }
  .avocado-list li .name,
  .avocado-list li .date,
  .avocado-list li .hit {
    display: inline;
    padding: 0 5px;
  }
  .avocado-list li .ico-cate { 
    display: inline; 
  }
  .avocado-list li .date { 
    display: none !important; 
  }

  .avocado-list li .bottom_title { 
    padding: 0; 
    margin-top: 67px; 
  }

  .avocado-list li .info {
    display: block;
    text-align: right;
    line-height: 1.0em;
    padding-top: 10px;
  }

  .avocado-list li strong { 
    display: inline; 
    line-height: 1.2em; 
  }

  .theme-box.con_box::before { 
    display: none !important; 
  }

  .board-comment-list .item { 
    padding: 0; 
  }

  .board-comment-list .co-name { 
    position: relative; 
    width: auto; 
    padding: 5px 10px; 
  }

  .board-comment-list .co-content { 
    padding: 10px; 
    word-break: break-all; 
  }

  .board-viewer .info { 
    margin-top: 0px; 
  }

  .board-viewer .info::after { 
    content: ""; 
    display: block; 
    clear: both; 
  }

  .board-viewer .contents { 
    /* margin-top: 5em; */ 
    word-break: break-all; 
  }
  /* .board-viewer .contents.summary {
    margin-top: 7em;
  } */

  .board-viewer.theme-box { 
    padding: 10px; 
  }

  .board-viewer .subject { 
    padding: 20px !important; 
  }

  .board-viewer .ch_head.chest { 
    justify-content: center; 
  }

  .board-viewer .in_chest img { 
    max-width: 100%; 
  }

  #bo_v_con * {
    max-width: 100%;
  }

  .board-category {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0 10px;
  }
  .board-category select {
    width: 100%;
  }

  .bo_fx {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 20px 10px !important;
  }
  .bo_fx a {
    display: block;
    width: 100%;
  }

  .board-viewer.theme-box {
    background: #fff !important;
    backdrop-filter: none !important;
  }

  .wrapper .tab {
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: break-word;
  }
}

/* 문자메시지 반응형 */
@media (max-width: 550px) {
  .somsgtopbar,
  .sms-name,
  .somsgbox {
    width: 100%;
  }
}

.orig-text {
  display: none;               
  font-size: 0.8em;
  opacity: 0.3;
  margin-bottom: 0.2em;         /* 번역문과의 간격 */
  line-height: 1.2;             /* 조금 좁은 행간 */
  white-space: normal;
}
p.monologue > span.orig-text {
  display: none;
}


/* 형광펜 */
.highlight-text {
  background: linear-gradient(to top, #dedede 60%, transparent 60%);
  padding: 0 4px; 
  border-radius: 3px; 
}

.highlight-text2 {
  background: linear-gradient(to top, #ae5d5c 60%, transparent 60%);
  padding: 0 4px; 
  border-radius: 3px; 
}