@charset "UTF-8";

/* ==================================================================
   CHERRY HOLIC — MAIN
   ------------------------------------------------------------------
   화면 구조 (#kv-stage 의 상태 클래스로 전환)
     기본        키 비주얼   .kv-world
     .is-menu    전체 메뉴   .kv-menuscreen
     .is-info    인적사항    .kv-info
     .is-oaa     OAA 평가    .kv-oaa
     .is-about   캐릭터 설명 .kv-about  (목록 #stViewList / 본문 #stViewDetail)

   사이징 원칙
     1) 높이는 100dvh — 인앱 브라우저 주소창 대응
     2) 키 비주얼은 세로 3단 flex — 각 영역이 자기 공간을 확보
     3) 캐릭터는 height 기준 + object-fit:contain — 절대 잘리지 않음
     4) 글자 크기는 clamp() + vh/vw 비례 — 화면에 맞춰 자동 축소
   ================================================================== */

/* ==================================================================
   1. 토큰
   ================================================================== */
:root{
  /* 색 */
  --point-pink:#ed1e79;
  --old-pink:#db2190;
  --soft-pink:#f7a8cf;
  --track-bg:#1f141a;
  --bg-deep:#25222b;
  --bg-rose:#b12167;

  --line:rgb(255 255 255 / .14);
  --line-soft:rgb(255 255 255 / .1);
  --panel:rgb(20 8 18 / .5);
  --panel-light:rgb(255 255 255 / .07);

  --txt:#fff;
  --txt-mute:rgb(255 255 255 / .6);
  --txt-dim:rgb(255 255 255 / .42);

  /* 서체 */
  --f-display:'KaiseiHarunoUmi-Bold', serif;
  --f-serif:'Gowun Batang', 'KaiseiHarunoUmi-Bold', serif;
  --f-label:'HeirofLightRegular', 'Noto Sans KR', sans-serif;
  --f-body:'Noto Sans KR', sans-serif;

  /* 모션 */
  --ease-out:cubic-bezier(.25, 1, .5, 1);
  --ease-in:cubic-bezier(.5, 0, .75, 0);

  /* 형태 */
  --r-sm:9px;
  --r-md:14px;
  --r-lg:16px;
  --r-pill:26px;
}

/* ==================================================================
   2. 리셋 / 공통
   ================================================================== */
html,
body{
  margin:0;
  padding:0;
  height:100%;
}

body{
  background:var(--bg-deep);
  color:var(--txt);
  font-family:var(--f-body);
  overflow:hidden;                 /* 각 화면이 자체 스크롤을 가짐 */
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  /* 평상시 배경 (1번째 이미지 : 선형 그라데이션) */
  background:linear-gradient(180deg, var(--bg-rose) 0%, var(--bg-deep) 100%);
  z-index:-10;
  pointer-events:none;
}

/* 캐릭터 스토리 전용 방사형 배경 (평소엔 투명하게 숨겨둠) */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  /* 캐릭터 스토리 진입 시 배경 (2번째 이미지 : 중앙 발광 방사형) */
  background: radial-gradient(circle at center, #6c1a41 0%, var(--bg-deep) 100%);
  z-index: -9;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease; /* 배경이 훅 바뀌지 않고 부드럽게 스며들도록 설정 */
}

/* 무대(#kv-stage)가 'is-about' 상태가 되면 숨겨둔 방사형 배경을 띄움 */
body:has(#kv-stage.is-about)::after {
  opacity: 1;
}

#kv-stage,
#kv-stage *{box-sizing:border-box;}

#kv-stage{
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}

#kv-stage img{-webkit-user-drag:none;}

a{
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}

:focus-visible{
  outline:2px solid var(--point-pink);
  outline-offset:3px;
}

/* 스크롤바 숨김 (여러 화면 공용) */
:is(.kv-info, .kv-oaa, .kv-about){
  scrollbar-width:none;
  -ms-overflow-style:none;
}
:is(.kv-info, .kv-oaa, .kv-about)::-webkit-scrollbar{display:none;}

/* 화면 공통 : 전체를 덮고 세로 스크롤 */
:is(.kv-info, .kv-oaa, .kv-about){
  position:absolute;
  inset:0;
  z-index:45;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  opacity:0;
  visibility:hidden;
  transition:opacity .4s ease .28s, visibility .4s .28s;
}

/* ==================================================================
   3. 무대 (겉틀)
   ================================================================== */
#kv-stage{
  position:relative;
  width:100%;
  max-width:clamp(320px, 100%, 520px);
  height:100dvh;
  margin-inline:auto;
  overflow:hidden;
  cursor:pointer;
}
#kv-stage.is-menu{cursor:default;}

/* ==================================================================
   4. 화면 A — 키 비주얼
   ================================================================== */
.kv-world{
  position:absolute;
  inset:0;
  padding:clamp(14px, 3vw, 20px) clamp(16px, 4vw, 20px) clamp(10px, 2vw, 14px);
  display:flex;
  flex-direction:column;
}
#kv-stage.is-menu .kv-world{pointer-events:none;}

/* ---- 이름 (캐릭터 위에 겹쳐 캐릭터 공간을 확보) ---- */
.kv-name{
  position:absolute;
  inset-block-start:clamp(14px, 3vw, 20px);
  inset-inline:clamp(16px, 4vw, 20px);
  z-index:10;
  pointer-events:none;
  opacity:0;
  animation:kvSlide 1s var(--ease-out) forwards .3s;
}

.kv-kanji{
  margin:0;
  font-family:var(--f-display);
  font-size:clamp(2.6rem, 8.4vh, 4.2rem);
  font-weight:800;
  line-height:1;
  letter-spacing:2px;
  text-shadow:0 2px 12px rgb(0 0 0 / .35);
}

.kv-en{
  margin:6px 0 0 3px;
  font-size:clamp(.7rem, 1.6vh, .92rem);
  font-weight:500;
  letter-spacing:1.2px;
  opacity:.88;
  text-shadow:0 1px 8px rgb(0 0 0 / .4);
}

/* ---- 캐릭터 무대 ---- */
.kv-figure{
  position:relative;
  flex:1 1 auto;
  min-height:0;                    /* flex 자식이 줄어들 수 있게 하는 핵심 */
  margin:20px -8px 0;
}

.kv-char,
.kv-shadow{
  position:absolute;
  bottom:0;
  height:100%;
  width:auto;
  max-width:100%;                  /* 줄이면 위아래 여백이 생김 */
  object-fit:contain;
  object-position:bottom center;
  pointer-events:none;
  transform:translateX(-50%);
}

.kv-char{
  left:30%;
  z-index:23;
  opacity:0;
  animation:kvFade 1.1s ease forwards .6s;
}

.kv-shadow{
  left:35%;
  z-index:22;
  filter:brightness(0) opacity(.15);
  opacity:0;
  animation:kvFadeShadow 1.1s ease forwards .45s;
}

/* ---- 세로쓰기 대사 ---- */
.kv-quote{
  position:absolute;
  top:9%;
  right:clamp(10px, 3vw, 16px);
  display:flex;
  flex-direction:row-reverse;
  gap:7px;
  align-items:flex-start;
  max-height:82%;
  z-index:24;
  opacity:0;
  animation:kvQuoteIn 1s var(--ease-out) forwards .9s;
}

.kv-line{
  writing-mode:vertical-rl;
  text-orientation:mixed;
  background:linear-gradient(180deg, var(--point-pink) 0%, transparent 100%);
  font-family:var(--f-display);
  font-size:clamp(.74rem, 1.95vh, 1.15rem);
  font-weight:500;
  padding:clamp(13px, 2vw, 14px) clamp(7px, 1.5vw, 8px);
  line-height:1.35;
  letter-spacing:clamp(.8px, .2vw, 1.2px);
}
.kv-line.line-2{margin-top:42px;}

/* ---- 학급 ---- */
.kv-class{
  position:absolute;
  right:2px;
  bottom:2%;
  font-size:clamp(3rem, 10vh, 5.6rem);
  font-weight:300;
  line-height:1;
  letter-spacing:2px;
  color:rgb(255 255 255 / .3);
  z-index:1;
  pointer-events:none;
  opacity:0;
  animation:kvSlide 1s var(--ease-out) forwards 1s;
}

/* ---- 하단 (터치 안내 + 로고) ---- */
.kv-bottom{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  padding-top:4px;
  position:relative;
  z-index:26;
}

.kv-touch{
  font-family:var(--f-label);
  font-size:clamp(.7rem, 1.7vh, .92rem);
  letter-spacing:4px;
  color:rgb(255 255 255 / .9);
  text-shadow:0 0 14px rgb(237 30 121 / .85);
  white-space:nowrap;
  animation:kvBlink 2.2s ease-in-out infinite;
}

.kv-logo{
  width:clamp(44px, 6vh, 72px);
  opacity:.16;
  pointer-events:none;
}
.kv-logo img{
  width:100%;
  display:block;
  object-fit:contain;
}

/* ---- 퇴장 : 등장의 역순 ----------------------------------------
   등장  이름 .3 → 그림자 .45 → 캐릭터 .6 → 대사 .9 → 학급 1.0
   퇴장  학급/터치 0 → 대사 .08 → 캐릭터 .16 → 그림자 .2 → 이름 .26

   fill-mode 는 반드시 both.
   forwards 로 두면 delay 구간에 원래 선언값(opacity:0)이 적용돼
   요소가 한 번 깜빡인 뒤 다시 나타났다가 사라진다.
------------------------------------------------------------------ */
#kv-stage.is-menu .kv-class{animation:kvSlideOut .45s var(--ease-in) both 0s;}
#kv-stage.is-menu .kv-touch{animation:kvTouchOut .3s ease both 0s;}
#kv-stage.is-menu .kv-logo{animation:kvTouchOut .3s ease both .04s;}
#kv-stage.is-menu .kv-quote{animation:kvQuoteOut .45s var(--ease-in) both .08s;}
#kv-stage.is-menu .kv-char{animation:kvCharOut .5s var(--ease-in) both .16s;}
#kv-stage.is-menu .kv-shadow{animation:kvShadowOut .5s var(--ease-in) both .2s;}
#kv-stage.is-menu .kv-name{animation:kvSlideOut .5s var(--ease-in) both .26s;}

/* ==================================================================
   5. 화면 B — 전체 메뉴
   ================================================================== */
.kv-menuscreen{
  position:absolute;
  inset:0;
  z-index:40;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:clamp(30px, 6vw, 36px) clamp(22px, 5vw, 30px) clamp(40px, 8vw, 46px);
  opacity:0;
  visibility:hidden;
  transition:opacity .4s ease .5s, visibility .4s .5s;
}
#kv-stage.is-menu .kv-menuscreen{
  opacity:1;
  visibility:visible;
}

/* 하위 화면이 열리면 메뉴는 먼저 사라짐 */
#kv-stage:is(.is-info, .is-oaa, .is-about) .kv-menuscreen{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .3s ease, visibility .3s;
}

.ms-view{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.ms-view[hidden]{display:none;}

/* ---- 헤더 ---- */
.ms-head{
  margin-bottom:26px;
  opacity:0;
}
#kv-stage.is-menu .ms-head{animation:msFadeUp .55s var(--ease-out) both .58s;}

.ms-crest{
  width:46px;
  margin:0 auto 12px;
  opacity:.55;
}
.ms-crest img{
  width:100%;
  display:block;
  object-fit:contain;
}

.ms-title{
  margin:0;
  font-family:var(--f-label);
  font-size:clamp(1.5rem, 5vw, 1.75rem);
  font-weight:500;
  letter-spacing:9px;
  text-indent:9px;                 /* 자간 때문에 밀린 중심 보정 */
  text-shadow:0 0 18px rgb(237 30 121 / .5);
}

.ms-eyebrow{
  margin:9px 0 0;
  font-size:.6rem;
  letter-spacing:2.5px;
  color:var(--txt-dim);
}

/* 장식 구분선 */
.ms-orn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  width:150px;
  margin:15px auto 0;
}
.ms-orn::before,
.ms-orn::after{
  content:"";
  flex:1 1 auto;
  height:1px;
}
.ms-orn::before{background:linear-gradient(90deg, transparent, rgb(255 255 255 / .3));}
.ms-orn::after{background:linear-gradient(90deg, rgb(255 255 255 / .3), transparent);}
.ms-orn i{
  width:6px;
  height:6px;
  flex:0 0 auto;
  background:var(--point-pink);
  transform:rotate(45deg);
  box-shadow:0 0 10px rgb(237 30 121 / .9);
}

/* ---- 메뉴 버튼 ---- */
.ms-menu{
  display:flex;
  flex-direction:column;
  gap:11px;
  width:100%;
  max-width:clamp(280px, 80vw, 330px);
}

.ms-item{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  width:100%;
  padding:13px 12px;
  border:1px solid rgb(237 30 121 / .55);
  border-radius:var(--r-md);
  background:linear-gradient(180deg, rgb(237 30 121 / .22) 0%, rgb(237 30 121 / .05) 100%);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .12), 0 6px 16px rgb(0 0 0 / .28);
  color:var(--txt);
  font-family:inherit;
  cursor:pointer;
  opacity:0;                       /* 순차 등장 대기 */
  transition:transform .18s ease, box-shadow .25s ease,
             border-color .25s ease, background .25s ease;
}
.ms-item:hover{
  border-color:var(--point-pink);
  background:linear-gradient(180deg, rgb(237 30 121 / .4) 0%, rgb(237 30 121 / .12) 100%);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .18), 0 8px 22px rgb(237 30 121 / .3);
}
.ms-item:active{transform:scale(.97);}

#kv-stage.is-menu .ms-item{animation:msFadeUp .5s var(--ease-out) both;}
#kv-stage.is-menu .ms-item:nth-child(1){animation-delay:.66s;}
#kv-stage.is-menu .ms-item:nth-child(2){animation-delay:.73s;}
#kv-stage.is-menu .ms-item:nth-child(3){animation-delay:.80s;}
#kv-stage.is-menu .ms-item:nth-child(4){animation-delay:.87s;}
#kv-stage.is-menu .ms-item:nth-child(5){animation-delay:.94s;}

.ms-tit{
  display:block;
  font-family:var(--f-label);
  font-size:clamp(1.12rem, 3.5vw, 1.2rem);
  letter-spacing:2px;
  line-height:1.2;
}
.ms-sub{
  display:block;
  font-size:.55rem;
  letter-spacing:2px;
  color:rgb(255 255 255 / .5);
}

/* ---- 뒤로 ---- */
.ms-back{
  margin-top:26px;
  padding:8px 14px;
  background:none;
  border:none;
  cursor:pointer;
  color:rgb(255 255 255 / .5);
  font-family:var(--f-label);
  font-size:.7rem;
  letter-spacing:3px;
  opacity:0;
  transition:color .2s;
}
.ms-back:hover{color:var(--txt);}
#kv-stage.is-menu .ms-back{animation:msFadeUp .5s var(--ease-out) both 1.02s;}

/* MEMBER 뷰는 지연 없이 바로 */
#kv-stage.is-menu #msViewMember :is(.ms-head, .ms-back){animation-delay:.05s;}

/* ---- MEMBER (아웃로그인) ---- */
.ms-member-box{
  width:100%;
  max-width:clamp(280px, 80vw, 330px);
  padding:20px 18px;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:rgb(20 16 22 / .45);
  text-align:left;
}
.ms-member-box .ol :is(input[type=text], input[type=password]){
  width:100%;
  padding:11px;
  margin-bottom:9px;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  background:#2e2833;
  color:var(--txt);
}
.ms-member-box .ol :is(input[type=submit], .btn_b02){
  width:100%;
  padding:12px;
  border:none;
  border-radius:var(--r-sm);
  background:var(--old-pink);
  color:var(--txt);
  font-weight:700;
  cursor:pointer;
}
.ms-member-box .ol a{color:#f0a8d2;}
.ms-member-box .ol h2{font-size:.9rem;}

/* ==================================================================
   6. 화면 C — 인적사항
   ================================================================== */
.kv-info{padding:clamp(54px, 8vw, 60px) clamp(22px, 5vw, 30px) clamp(44px, 8vw, 50px);}
#kv-stage.is-info .kv-info{opacity:1; visibility:visible;}

/* 배경 실루엣 (인적사항 · OAA 공용) */
.inf-silhouette{
  position:absolute;
  top:0;
  left:50%;
  translate:-50% 0;
  height:92%;
  filter:brightness(0) opacity(.12);
  z-index:1;
  pointer-events:none;
}

/* 상단 이름 (인적사항 · OAA 공용) */
.inf-name{
  position:relative;
  z-index:2;
  margin-bottom:4px;
  opacity:0;
}
#kv-stage:is(.is-info, .is-oaa) .inf-name{
  animation:msFadeUp .55s var(--ease-out) both .34s;
}
:is(.kv-info, .kv-oaa) .kv-kanji{font-size:clamp(2.1rem, 6.2vh, 3rem);}
:is(.kv-info, .kv-oaa) .kv-en{font-size:clamp(.66rem, 1.5vh, .85rem);}

/* ---- 항목 목록 ---- */
.pi-wrapper{
  position:relative;
  z-index:2;
  width:100%;
  display:flex;
  flex-direction:column;
  padding:26px 4px 0;
  gap:1.6vh;
}
.pi-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(18px, 4vw, 26px);
}
.pi-block{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-bottom:8px;
}
.pi-label{
  font-family:var(--f-label);
  font-size:clamp(1.05rem, 3vw, 1.15rem);
  letter-spacing:.5px;
  color:#ea83c5;
}
.pi-value{
  font-size:clamp(.95rem, 2.6vw, 1rem);
  line-height:1.3;
  word-break:keep-all;
}

/* 항목 순차 등장 */
#kv-stage.is-info .pi-wrapper > *{
  animation:msFadeUp .5s var(--ease-out) both;
  animation-delay:calc(.44s + (var(--i, 0) * .06s));
}
#kv-stage.is-info .pi-wrapper > *:nth-child(1){--i:0;}
#kv-stage.is-info .pi-wrapper > *:nth-child(2){--i:1;}
#kv-stage.is-info .pi-wrapper > *:nth-child(3){--i:2;}
#kv-stage.is-info .pi-wrapper > *:nth-child(4){--i:3;}
#kv-stage.is-info .pi-wrapper > *:nth-child(5){--i:4;}
#kv-stage.is-info .pi-wrapper > *:nth-child(6){--i:5;}
#kv-stage.is-info .pi-wrapper > *:nth-child(7){--i:6;}
#kv-stage.is-info .pi-wrapper > *:nth-child(8){--i:7;}
#kv-stage.is-info .pi-wrapper > *:nth-child(n+9){--i:8;}

/* ---- 뒤로 (인적사항 · OAA 공용) ---- */
.inf-back{
  position:relative;
  z-index:2;
  display:block;
  margin:22px auto 0;
  padding:8px 14px;
  background:none;
  border:none;
  cursor:pointer;
  color:rgb(255 255 255 / .5);
  font-family:var(--f-label);
  font-size:.7rem;
  letter-spacing:3px;
  opacity:0;
  transition:color .2s;
}
.inf-back:hover{color:var(--txt);}
#kv-stage.is-info .inf-back{animation:msFadeUp .5s var(--ease-out) both 1s;}
#kv-stage.is-oaa .inf-back{animation:msFadeUp .5s var(--ease-out) both .95s;}

/* ==================================================================
   7. 화면 D — OAA 평가
   ================================================================== */
.kv-oaa{padding:clamp(54px, 8vw, 60px) clamp(22px, 5vw, 30px) clamp(44px, 8vw, 50px);}
#kv-stage.is-oaa .kv-oaa{opacity:1; visibility:visible;}

.oaa-wrapper{
  position:relative;
  z-index:2;
  width:100%;
  padding:24px 4px 0;
}

/* ---- 종합평가 ---- */
.eval-section{margin-bottom:2.2vh;}

.eval-badge{
  display:inline-block;
  margin-bottom:1.2vh;
  padding:5px 20px;
  border-radius:25px;
  background:var(--old-pink);
  font-family:var(--f-label);
  font-size:clamp(1.15rem, 3.4vw, 1.3rem);
  line-height:1.6;
}

.eval-text{
  font-size:clamp(.9rem, 2.5vw, 1rem);
  line-height:1.65;
  word-break:keep-all;
}
.eval-text[hidden]{display:none;}

/* ---- 학년 탭 ---- */
.oaa-tabs{
  display:flex;
  gap:12px;
  margin-bottom:2.2vh;
}

.oaa-tab{
  flex:1;
  padding:clamp(9px, 2vw, 11px) 0;
  border:1.5px solid var(--old-pink);
  border-radius:30px;
  background:transparent;
  color:var(--txt);
  font-family:var(--f-display);
  font-size:clamp(1rem, 3vw, 1.1rem);
  cursor:pointer;
  transition:background .3s, box-shadow .3s;
}
.oaa-tab.active{
  background:var(--old-pink);
  box-shadow:0 4px 14px rgb(219 33 144 / .35);
}

/* ---- 능력치 게이지 ---- */
.oaa-stats-area[hidden]{display:none;}

.stat-row{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-bottom:1.6vh;
}
.stat-info{
  margin-bottom:5px;
  font-family:var(--f-label);
  font-size:clamp(.88rem, 2.5vw, 1rem);
  letter-spacing:.5px;
}
.stat-bar-track{
  width:100%;
  height:8px;
  border-radius:4px;
  background:var(--track-bg);
  overflow:hidden;
}
.stat-bar-fill{
  width:0;
  height:8px;
  border-radius:4px;
  background:var(--old-pink);
}
.stat-bar-fill.running{animation:fillGauge 1.2s var(--ease-out) forwards;}

/* 순차 등장 : 종합평가 → 탭 (게이지 영역은 JS 가 .swap-in 으로 제어) */
#kv-stage.is-oaa .oaa-wrapper > .eval-section{animation:msFadeUp .5s var(--ease-out) both .44s;}
#kv-stage.is-oaa .oaa-wrapper > .oaa-tabs{animation:msFadeUp .5s var(--ease-out) both .52s;}

/* 탭 전환·최초 등장 공용. animation-delay 는 JS 가 인라인으로 지정.
   both 이므로 delay 동안 opacity:0 으로 대기 → 뚝 튀어나오지 않음 */
.oaa-stats-area.swap-in{animation:msFadeUp .42s var(--ease-out) both;}
.eval-text.swap-in{animation:msFadeUp .34s var(--ease-out) both;}

/* ==================================================================
   8. 화면 E — 캐릭터 설명 (게시판 연동)
   ================================================================== */
.kv-about{padding:clamp(20px, 4vw, 26px) clamp(18px, 4vw, 26px) clamp(34px, 6vw, 40px);}
#kv-stage.is-about .kv-about{opacity:1; visibility:visible;}

.st-view{
  display:flex;
  flex-direction:column;
  min-height:100%;
}
.st-view[hidden]{display:none;}
.st-view.st-in{animation:msFadeUp .42s var(--ease-out) both;}
#kv-stage.is-about #stViewList{animation:msFadeUp .5s var(--ease-out) both .34s;}

/* ---- 상단 BACK ---- */
.st-back{
  align-self:flex-start;
  padding:2px 2px 12px;
  background:none;
  border:none;
  cursor:pointer;
  color:rgb(255 255 255 / .72);
  font-family:var(--f-label);
  font-size:.78rem;
  letter-spacing:3px;
  transition:color .2s;
}
.st-back:hover{color:var(--txt);}

:is(#stViewList, #stViewDetail) > .st-back{
  width:100%;
  text-align:left;
  border-bottom:1px solid rgb(255 255 255 / .16);
  margin-bottom:16px;
}

.st-back-bottom{
  align-self:center;
  width:auto !important;
  margin:20px 0 0 !important;
  padding:8px 18px !important;
  text-align:center !important;
  border-bottom:none !important;
}

/* ---- 선택된 이야기 카드 ---- */
.st-feature{
  padding:14px;
  border:1.5px solid var(--point-pink);
  border-radius:var(--r-lg);
  background:rgb(20 8 18 / .4);
}
.st-feature[hidden]{display:none;}

.st-feat-top{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}
.st-feat-thumb{
  width:58px;
  aspect-ratio:1;
  flex:0 0 auto;
  border:1px solid rgb(237 30 121 / .4);
  border-radius:12px;
  background:rgb(237 30 121 / .2);
  overflow:hidden;
}
.st-feat-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.st-feat-txt{min-width:0;}
.st-feat-label{
  margin:0;
  font-family:var(--f-label);
  font-size:.72rem;
  letter-spacing:2px;
  color:var(--txt-mute);
}
.st-feat-title{
  margin:5px 0 0;
  font-size:clamp(.95rem, 2.8vw, 1.05rem);
  letter-spacing:.5px;
  word-break:keep-all;
}

.st-read-btn{
  display:block;
  width:100%;
  padding:clamp(13px, 2.5vw, 15px) 0;
  border:none;
  border-radius:var(--r-pill);
  background:var(--point-pink);
  color:var(--txt);
  font-family:var(--f-label);
  font-size:clamp(1.05rem, 3.2vw, 1.15rem);
  letter-spacing:3px;
  cursor:pointer;
  box-shadow:0 6px 18px rgb(237 30 121 / .35);
  transition:transform .18s ease, box-shadow .25s ease;
}
.st-read-btn:hover{box-shadow:0 8px 24px rgb(237 30 121 / .5);}
.st-read-btn:active{transform:scale(.97);}

/* ---- 진행 표시 ---- */
.st-progress{margin:18px 0 14px;}
.st-prog-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:6px;
  font-family:var(--f-label);
  font-size:.74rem;
  letter-spacing:2px;
  color:var(--txt-mute);
}
.st-prog-track{
  height:5px;
  border-radius:3px;
  background:var(--track-bg);
  overflow:hidden;
}
.st-prog-fill{
  width:0;
  height:100%;
  border-radius:3px;
  background:var(--point-pink);
  transition:width .45s var(--ease-out);
}

/* ---- 슬롯 ---- */
.st-grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:20px 8px;                    /* NEW 뱃지가 위로 나오므로 세로 여백 넉넉히 */
}

.st-slot{
  position:relative;
  aspect-ratio:1 / 1.03;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:0;
  border:1px solid rgb(237 30 121 / .45);
  border-radius:var(--r-lg);
  background:rgb(20 8 18 / .7);
  color:var(--txt-mute);
  cursor:pointer;
  transition:border-color .22s, background .22s, color .22s, transform .18s;
}
.st-slot:hover{
  border-color:rgb(237 30 121 / .85);
  background:rgb(237 30 121 / .2);
  color:var(--txt);
}
.st-slot:active{transform:scale(.95);}
.st-slot.on{
  border:1.5px solid var(--point-pink);
  background:radial-gradient(circle at center,
             rgb(237 30 121 / .5) 0%, rgb(20 8 18 / .4) 80%);
  color:var(--txt);
  box-shadow:0 0 16px rgb(237 30 121 / .45);
}

/* 자물쇠는 78×91 비율 — 높이를 고정하면 찌그러지므로 width 만 지정 */
.st-lock{
  width:clamp(22px, 6vw, 24px);
  height:auto;
  display:block;
  margin-top: 9px;
}

.st-slot-no{
  font-family:var(--f-label);
  font-size:.6rem;
  letter-spacing:.5px;
  color:var(--txt);
}

/* 선택 표식 (하트) */
.st-slot-mark{
  position:absolute;
  bottom:-8px;
  left:50%;
  width:14px;
  height:15px;
  translate:-50% 0;
  scale:0;
  background:var(--point-pink);
  clip-path:path('M7 13.5 C7 13.5 0.7 9.4 0.7 5.1 A3.6 3.6 0 0 1 7 2.8 A3.6 3.6 0 0 1 13.3 5.1 C13.3 9.4 7 13.5 7 13.5 Z');
  transition:scale .22s var(--ease-out);
}
.st-slot.on .st-slot-mark{scale:1.1;}

/* NEW 뱃지 : 슬롯 상단 중앙 */
.st-new{
  position:absolute;
  top:-6px;
  left:50%;
  translate:-50% 0;
  padding:3px 9px;
  border-radius:12px;
  background:var(--point-pink);
  color:var(--txt);
  font-size:.5rem;
  font-weight:700;
  letter-spacing:1px;
  line-height:1.1;
  box-shadow:0 2px 6px rgb(0 0 0 / .4);
}

/* 이야기 추가 슬롯 */
.st-slot.st-add{
  border-style:dashed;
  border-color:rgb(237 30 121 / .55);
  background:rgb(255 255 255 / .05);
  color:rgb(255 255 255 / .72);
}
.st-slot.st-add:hover{
  border-style:solid;
  border-color:var(--point-pink);
  background:rgb(237 30 121 / .22);
  color:var(--txt);
}
.st-plus{
  width:clamp(26px, 8vw, 32px);
  height:auto;
  display:block;
}

/* ---- 등록된 이야기가 없을 때 ---- */
.st-empty{
  margin:34px 0 30px;
  text-align:center;
  font-size:.86rem;
  line-height:1.9;
  letter-spacing:.5px;
  color:rgb(255 255 255 / .62);
}
.st-empty[hidden]{display:none;}

/* ---- 페이지 화살표 ---- */
.st-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin-top:18px;
}
.st-nav[hidden]{display:none;}

.st-nav-btn{
  width:38px;
  aspect-ratio:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:1px solid rgb(237 30 121 / .5);
  border-radius:50%;
  background:rgb(255 255 255 / .045);
  color:#f7b7d8;
  cursor:pointer;
  transition:background .22s, border-color .22s, color .22s,
             transform .18s, opacity .22s;
}
.st-nav-btn svg{
  width:19px;
  height:19px;
  display:block;
}
.st-nav-btn:hover:not(:disabled){
  background:rgb(237 30 121 / .25);
  border-color:var(--point-pink);
  color:var(--txt);
}
.st-nav-btn:active:not(:disabled){transform:scale(.9);}
.st-nav-btn:disabled{
  opacity:.28;
  cursor:default;
  border-color:rgb(255 255 255 / .18);
  color:rgb(255 255 255 / .5);
}

.st-nav-page{
  min-width:52px;
  text-align:center;
  font-family:var(--f-label);
  font-size:.78rem;
  letter-spacing:2px;
  color:rgb(255 255 255 / .65);
}

/* ---- 관리자용 목록 관리 링크 ---- */
.st-manage{
  display:block;
  width:fit-content;
  margin:24px auto 0;
  padding-bottom:2px;
  border-bottom:1px solid rgb(255 255 255 / .14);
  font-size:.62rem;
  letter-spacing:2px;
  color:rgb(255 255 255 / .32);
  transition:color .2s, border-color .2s;
}
.st-manage:hover{
  color:#f7b7d8;
  border-color:rgb(237 30 121 / .6);
}

/* ---- 하단 로고 ---- */
.st-logo{
  margin-top:auto;
  padding-top:26px;
  text-align:center;
  opacity:.14;
  pointer-events:none;
}
.st-logo img{
  width:52px;
  display:inline-block;
}

/* ------------------------------------------------------------------
   8-2. 이야기 본문 (#stViewDetail)
------------------------------------------------------------------ */
#stViewDetail{position:relative;}

/* 상단 핑크 광원 — 목록 화면과 톤을 구분 */
#stViewDetail::before{
  content:"";
  position:absolute;
  top:-40px;
  left:50%;
  translate:-50% 0;
  width:130%;
  height:340px;
  background:radial-gradient(60% 100% at 50% 0%,
             rgb(237 30 121 / .38) 0%,
             rgb(237 30 121 / .12) 45%,
             transparent 78%);
  z-index:0;
  pointer-events:none;
}
#stViewDetail > *{
  position:relative;
  z-index:1;
}

/* ---- 제목 ---- */
.st-head{
  text-align:center;
  margin-bottom:16px;
}
.st-head-eyebrow{
  margin:0 0 8px;
  font-family:var(--f-label);
  font-size:.7rem;
  letter-spacing:3px;
  color:var(--soft-pink);
}
.st-head-title{
  margin:0;
  font-family:var(--f-serif);
  font-size:clamp(1.28rem, 5vw, 1.72rem);
  font-weight:500;
  line-height:1.35;
  letter-spacing:1px;
  word-break:keep-all;
}

/* ---- 자물쇠 구분선 ---- */
.st-divider{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:74%;
  max-width:250px;
  margin:14px auto 0;
}
.st-div-line{
  flex:1 1 auto;
  height:1px;
  background:linear-gradient(90deg, transparent, rgb(255 255 255 / .42));
}
.st-divider .st-div-line:last-child{
  background:linear-gradient(90deg, rgb(255 255 255 / .42), transparent);
}
.st-div-lock{
  flex:0 0 auto;
  width:17px;
  height:19px;
  display:block;
  color:#ffd3ea;
}
.st-div-lock svg{
  width:100%;
  height:100%;
  display:block;
}

/* ---- 아바타 ---- */
.st-avatar{
  width:clamp(66px, 20vw, 82px);
  aspect-ratio:1;
  margin:0 auto 14px;
  border:1px solid rgb(255 255 255 / .16);
  border-radius:var(--r-md);
  background:rgb(237 30 121 / .18);
  overflow:hidden;
  transform: translateY(-70px);
}
.st-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ---- 본문 카드 ---- */
.st-body-wrap{
  position:relative;
  margin-top:62px;
  padding:clamp(24px, 5vw, 26px) clamp(14px, 4vw, 18px) clamp(20px, 4vw, 22px);
  border:1px solid rgb(255 255 255 / .13);
  border-radius:var(--r-lg);
  background:var(--panel-light);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}

/* ---- 핑크 요약문 (글쓰기 화면의 "링크1" 칸) ---- */
.st-summary{
  margin:0 0 20px;
  padding:0 4px 18px;
  border-bottom:1px solid var(--line-soft);
  text-align:center;
  font-family:var(--f-serif);
  font-size:clamp(.86rem, 2.6vw, 1rem);
  line-height:1.75;
  letter-spacing:.3px;
  color:#ff9dc7;
  word-break:keep-all;
}
.st-summary[hidden]{display:none;}

/* ---- 이전 / 다음 이야기 ---- */
.st-arrow{
  position:absolute;
  top:50%;
  width:clamp(30px, 8vw, 38px);
  aspect-ratio:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:1px solid rgb(237 30 121 / .5);
  border-radius:50%;
  background:rgb(30 14 26 / .82);
  color:#f7b7d8;
  cursor:pointer;
  z-index:5;
  translate:0 -50%;
  transition:background .22s, border-color .22s, color .22s,
             scale .18s, opacity .22s;
}
.st-arrow svg{
  width:clamp(15px, 4vw, 18px);
  height:auto;
  display:block;
}
.st-arrow-l{left:clamp(-19px, -4vw, -13px);}
.st-arrow-r{right:clamp(-19px, -4vw, -13px);}
.st-arrow:hover:not(:disabled){
  background:rgb(237 30 121 / .55);
  border-color:var(--point-pink);
  color:var(--txt);
}
.st-arrow:active:not(:disabled){scale:.9;}
.st-arrow:disabled{
  opacity:.25;
  cursor:default;
  border-color:rgb(255 255 255 / .2);
  color:rgb(255 255 255 / .45);
}

/* ---- 본문 ---- */
.st-body{
  font-family:var(--f-body);
  font-size:clamp(.83rem, 2.4vw, .9rem);
  line-height:1.95;
  color:rgb(255 255 255 / .86);
  word-break:keep-all;
  overflow-wrap:break-word;
  -webkit-user-select:text;
  user-select:text;
}
.st-body p{margin:0 0 15px;}
.st-body :is(b, strong){color:var(--txt);}
.st-body a{
  color:#f0a8d2;
  text-decoration:underline;
}
.st-body hr{
  height:0;
  margin:20px 0;
  border:none;
  border-top:1px solid var(--line-soft);
}
.st-body :is(img, video, iframe){
  max-width:100% !important;
  height:auto !important;
  display:block;
  margin:14px auto;
  border-radius:10px;
}
.st-body table{
  max-width:100% !important;
  table-layout:fixed;
}

/* ---- 관리자 수정 / 삭제 ---- */
.st-adm-row{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  margin-top:22px;
  padding-top:16px;
  border-top:1px solid var(--line-soft);
}
.ab-edit{
  padding:3px 12px;
  border:1px solid rgb(255 255 255 / .25);
  border-radius:16px;
  background:none;
  color:var(--txt-mute);
  font-family:var(--f-body);
  font-size:.62rem;
  letter-spacing:1.5px;
  cursor:pointer;
  transition:border-color .2s, color .2s, background .2s;
}
.ab-edit:hover{
  border-color:var(--point-pink);
  color:var(--txt);
}
.ab-del{
  border-color:rgb(226 75 74 / .45);
  color:rgb(240 150 150 / .85);
}
.ab-del:hover{
  border-color:#e24b4a;
  background:rgb(226 75 74 / .18);
  color:var(--txt);
}

/* 본문 원본 보관함 (JS 가 꺼내 씀) */
.st-source{display:none;}

/* ==================================================================
   캐릭터 스토리 - 카테고리 탭 UI
   ================================================================== */
.st-category-tabs {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
}

.st-cat-btn {
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(237, 30, 121, 0.3);
  border-radius: 20px;
  color: rgba(255, 255, 255, 0.6);
  font-family: 'HeirofLightRegular', 'Noto Sans KR', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.st-cat-btn:hover {
  border-color: rgba(237, 30, 121, 0.8);
  color: #fff;
}

.st-cat-btn.active {
  background: var(--point-pink);
  color: #fff;
  border-color: var(--point-pink);
  box-shadow: 0 0 10px rgba(237, 30, 121, 0.5);
  font-weight: bold;
}


/* ==================================================================
   9. BGM 플레이어
   ================================================================== */
.bgm-player-bar{
  position:fixed;
  top:clamp(16px, 3vw, 20px);
  right:clamp(16px, 3vw, 20px);
  z-index:999999;
  display:flex;
  align-items:center;
  gap:9px;
  padding:clamp(9px, 2vw, 10px) clamp(16px, 3vw, 18px);
  border-radius:30px;
  background:#3f2f33;
  color:var(--txt);
  font-size:13px;
  font-weight:bold;
  overflow:hidden;
  cursor:grab;
  touch-action:none;
  box-shadow:0 4px 15px rgb(0 0 0 / .3);
}
.bgm-player-bar.dragging{
  cursor:grabbing;
  box-shadow:0 8px 25px rgb(0 0 0 / .45);
}
.bgm-title{
  font-size:10px !important;
  z-index:2;
}
#bgm-icon{
  font-size:11px !important;
  z-index:2;
}
#bgm-toggle-btn{
  padding:2px 6px;
  border:none;
  border-radius:12px;
  background:#fff;
  color:#3f2f33;
  font-size:9px;
  font-weight:bold;
  cursor:pointer;
  z-index:2;
}

.bgm-wave-container{
  position:absolute;
  inset:auto 0 0 0;
  width:100%;
  height:100%;
  z-index:1;
  pointer-events:none;
}
.wave-svg{
  position:absolute;
  bottom:-1px;
  left:0;
  width:200%;
  height:38px;
}
.wave-front{animation:waveRight 1.4s linear infinite paused;}
.wave-back{animation:waveRight 2.2s linear infinite paused;}

.bgm-hidden-player{
  position:fixed;
  bottom:0;
  left:0;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}

/* ==================================================================
   10. 키프레임
   ================================================================== */
/* 등장 */
@keyframes kvFade{to{opacity:1;}}
@keyframes kvFadeShadow{to{opacity:.7;}}
@keyframes kvSlide{
  from{opacity:0; transform:translateX(-30px);}
  to{opacity:1; transform:translateX(0);}
}
@keyframes kvQuoteIn{
  from{opacity:0; transform:translateY(18px);}
  to{opacity:1; transform:translateY(0);}
}
@keyframes kvBlink{
  0%, 100%{opacity:.28;}
  50%{opacity:1;}
}

/* 퇴장 (등장의 반대 방향) */
@keyframes kvSlideOut{
  from{opacity:1; transform:translateX(0);}
  to{opacity:0; transform:translateX(-30px);}
}
@keyframes kvQuoteOut{
  from{opacity:1; transform:translateY(0);}
  to{opacity:0; transform:translateY(18px);}
}
@keyframes kvCharOut{
  from{opacity:1; transform:translateX(-50%) scale(1);}
  to{opacity:0; transform:translateX(-50%) scale(1.05);}
}
@keyframes kvShadowOut{
  from{opacity:.7; transform:translateX(-50%) scale(1);}
  to{opacity:0; transform:translateX(-50%) scale(1.05);}
}
@keyframes kvTouchOut{
  from{opacity:1;}
  to{opacity:0;}
}

/* 하위 화면 공용 */
@keyframes msFadeUp{
  from{opacity:0; transform:translateY(14px);}
  to{opacity:1; transform:translateY(0);}
}
@keyframes fillGauge{
  from{width:0;}
  to{width:var(--target);}
}
@keyframes waveRight{
  from{transform:translateX(-50%);}
  to{transform:translateX(0);}
}

/* ==================================================================
   11. 접근성 — 모션 최소화
   ================================================================== */
@media (prefers-reduced-motion:reduce){
  .kv-world *,
  .kv-touch,
  .wave-svg,
  .ms-item,
  .ms-head,
  .ms-back,
  .inf-name,
  .inf-back,
  .pi-wrapper > *,
  .oaa-wrapper > *,
  .oaa-stats-area.swap-in,
  .eval-text.swap-in,
  .st-view{
    animation:none !important;
    opacity:1 !important;
  }
  .stat-bar-fill.running{width:var(--target) !important;}
  .kv-shadow{opacity:.7 !important;}
  #kv-stage.is-menu .kv-world{opacity:0 !important;}
  :is(.kv-menuscreen, .kv-info, .kv-oaa, .kv-about){transition:opacity .2s;}
}

/* ==================================================================
   12. 화면 높이가 아주 낮을 때 (가로모드 등)
   ================================================================== */
@media (max-height:520px){
  .kv-quote{max-height:70%;}
  .kv-class,
  .kv-logo,
  .ms-crest{display:none;}

  .ms-head{margin-bottom:14px;}
  .ms-orn{margin-top:10px;}
  .ms-menu{gap:8px;}
  .ms-item{padding:9px 12px;}
  .ms-back{margin-top:14px;}
}