*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html, body {
  width:100%; height:100%;
  overflow:hidden;
  font-family:"Pretendard Variable","Pretendard",sans-serif;
}

/* ── 분할 화면 ── */
#split-screen {
  display:flex; width:100vw; height:100vh;
  position:fixed; top:0; left:0; z-index:10;
}

.panel {
  position:relative; display:flex;
  align-items:center; justify-content:center;
  height:100%; overflow:hidden; cursor:pointer;
  transition:width 0.85s cubic-bezier(0.77,0,0.175,1);
}

#panel-left  { width:50%; background-color:#00FB6D; }
#panel-right { width:50%; background-color:#7100FB; }

#split-screen.expand-left  #panel-left  { width:100%; }
#split-screen.expand-left  #panel-right { width:0%; }
#split-screen.expand-right #panel-right { width:100%; }
#split-screen.expand-right #panel-left  { width:0%; }

.panel-content {
  text-align:left; padding:0 6vw;
  transition:opacity 0.3s ease;
  pointer-events:none; user-select:none;
}

.panel-content p {
  font-size:3rem; font-weight:600; line-height:1.5;
}

#panel-left  .panel-content p { color:#000; }
#panel-right .panel-content p { color:#fff; }

.panel::after {
  content:attr(data-hint);
  position:absolute; bottom:6vh; left:50%;
  transform:translateX(-50%);
  font-size:0.85rem; font-weight:500;
  letter-spacing:0.1em; opacity:0.4;
  transition:opacity 0.3s; pointer-events:none;
}

#panel-left::after  { color:#000; }
#panel-right::after { color:#fff; }
.panel:hover::after { opacity:0.85; }

/* ── 스토리 화면 ── */
.story-screen {
  position:fixed; top:0; left:0;
  width:100vw; height:100vh; z-index:5;
  display:flex; align-items:flex-start; justify-content:flex-start;
  padding-left:20vw; padding-right:20vw;
}

.story-screen.hidden { display:none; }
#story-kor { background-color:#00FB6D; }
#story-eng { background-color:#7100FB; }

.feed-wrap {
  margin-top:15vh; width:100%; max-height:80vh;
  overflow-y:auto; overflow-x:hidden;
  display:flex; flex-direction:column;
  scrollbar-width:none; -ms-overflow-style:none;
}

.feed-wrap::-webkit-scrollbar { display:none; }

.feed {
  display:flex; flex-direction:column;
  gap:calc(3rem * 1.5 * 0.5);
  width:100%;
}

/* ── 텍스트 블록 ── */
.text-block {
  font-size:3rem; font-weight:600;
  line-height:1.5; word-break:keep-all;
}

/* 한국어 색상 */
.lang-kor .text-block     { color:#000; }
.lang-kor .text-block.old { color:#00C756; }

/* 영어 색상 */
.lang-eng .text-block     { color:#ffffff; }
.lang-eng .text-block.old { color:#9F50FF; }

/* 말머리 */
.heading { display:inline; }

/* 깜빡 애니메이션 */
@keyframes blinkKor { 0%,100%{color:#000000} 50%{color:#00C756} }
@keyframes blinkEng { 0%,100%{color:#ffffff} 50%{color:#9F50FF} }

.lang-kor .heading.blink {
  animation:blinkKor 1.2s ease-in-out infinite; cursor:pointer;
}
.lang-eng .heading.blink {
  animation:blinkEng 1.2s ease-in-out infinite; cursor:pointer;
}

.text-block.old .heading { animation:none!important; }
.lang-kor .text-block.old .heading { color:#00C756!important; }
.lang-eng .text-block.old .heading { color:#9F50FF!important; }

/* 링크: 타이핑 완료 후 .blink-ready 추가되면 깜빡임 시작 */
/* no-break: 링크+꺽쇠 등 고유명사가 줄 중간에서 잘리지 않도록 */
.inline-link { color:inherit; text-decoration:none; white-space:nowrap; }
.no-break { white-space:nowrap; }
.lang-kor .inline-link.blink-ready { animation:blinkKor 1.2s ease-in-out infinite; }
.lang-eng .inline-link.blink-ready { animation:blinkEng 1.2s ease-in-out infinite; }
.inline-link:hover { opacity:0.7; }

.text-block.old .inline-link { animation:none!important; }
.lang-kor .text-block.old .inline-link { color:#00C756!important; }
.lang-eng .text-block.old .inline-link { color:#9F50FF!important; }

/* 꺽쇠: 깜빡이지 않는 정적 텍스트 */
.bracket { color:inherit; animation:none!important; }

/* 타자기 커서 */
.cursor {
  display:inline-block; width:3px; height:0.85em;
  margin-left:2px; vertical-align:middle;
  animation:cursorBlink 0.6s step-end infinite;
}
.lang-kor .cursor { background:#000; }
.lang-eng .cursor { background:#fff; }

@keyframes cursorBlink { 0%,100%{opacity:1} 50%{opacity:0} }

/* ── 모바일 반응형 (세로 분할) ── */
@media (max-width: 768px) {

  /* 분할 화면: 가로 → 세로 */
  #split-screen {
    flex-direction: column;
  }

  /* 패널: 너비 100% 고정, 높이 50%로 전환 */
  .panel {
    width: 100% !important;
    height: 50%;
    /* 세로 확장용 트랜지션 */
    transition: height 0.85s cubic-bezier(0.77,0,0.175,1),
                width  0.85s cubic-bezier(0.77,0,0.175,1);
  }

  /* 한국어(위) 확장: 아래 패널을 밀어냄 */
  #split-screen.expand-left  #panel-left  { height:100%; width:100% !important; }
  #split-screen.expand-left  #panel-right { height:0%;   width:100% !important; }
  /* 영어(아래) 확장: 위 패널을 밀어냄 */
  #split-screen.expand-right #panel-right { height:100%; width:100% !important; }
  #split-screen.expand-right #panel-left  { height:0%;   width:100% !important; }

  /* 패널 텍스트 크기 */
  .panel-content p {
    font-size: clamp(1.4rem, 5vw, 2.2rem);
  }

  /* hint 위치 */
  .panel::after {
    bottom: 4vh;
  }

  /* 스토리 화면 */
  .story-screen {
    padding-left: 7vw;
    padding-right: 7vw;
  }

  .feed-wrap {
    margin-top: 10vh;
    max-height: 85vh;
  }

  /* 텍스트 블록 */
  .text-block {
    font-size: clamp(1.3rem, 4.5vw, 2rem) !important;
  }

  .feed {
    gap: calc(clamp(1.3rem, 4.5vw, 2rem) * 1.5 * 0.5);
  }
}