/* Figma: SeoulNamsan CM Regular. 설치된 경우 사용, 없으면 Noto Sans KR로 대체 */
@font-face {
  font-family: "SeoulNamsanCM";
  src: local("SeoulNamsanCM"), local("SeoulNamsan CM"), local("서울남산체 CM"), local("SeoulNamsanCM-Regular");
  font-weight: 400;
  font-display: swap;
}

:root {
  --bg: #000;
  --fg: #fff;
  --font-title: "SeoulNamsanCM", "Noto Sans KR", "Apple SD Gothic Neo", sans-serif;
  /* Figma 390 x 844 프레임 기준 비율 */
  --title-size: clamp(20px, 1.2vw + 15px, 34px);
  --panel-ratio: 370 / 308;
  --panel-gutter: 2.6vw;       /* 10 / 390 */
  --vh: 1vh;                   /* 주소창 높이를 반영하는 dvh를 못 쓰는 예전 브라우저용 */
}
@supports (height: 1dvh) {
  :root { --vh: 1dvh; }
}

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

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--font-title);
  -webkit-font-smoothing: antialiased;
}

.screen {
  position: fixed;
  inset: 0;
  height: calc(100 * var(--vh));
  background: var(--bg);
}
.screen[hidden] { display: none; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ───────────── 도입 ───────────── */

.intro {
  cursor: pointer;
  user-select: none;
  outline: none;
}

.intro__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* 캔버스가 이 값을 읽어 글자를 그림 */
.title {
  margin: 0;
  font-weight: 400;
  font-size: var(--title-size);
}

/* ───────────── 메인 화면 (만화 슬라이드) ───────────── */

.main { touch-action: pan-y; }

/* 옛날 TV 켜기: 화면을 가로 5칸으로 나눠 위에서부터 한 칸씩 툭툭 켜짐 (간격은 일부러 고르지 않게) */
.main.is-powering-on {
  animation: tv-on 0.9s step-end 0.12s backwards;
}

@keyframes tv-on {
  0%   { clip-path: inset(0 0 100% 0); }
  8%   { clip-path: inset(0 0 80% 0); }
  28%  { clip-path: inset(0 0 60% 0); }
  44%  { clip-path: inset(0 0 40% 0); }
  66%  { clip-path: inset(0 0 20% 0); }
  82%  { clip-path: inset(0 0 0 0); }
  100% { clip-path: none; }
}

.main__fx {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.comic {
  position: absolute;
  inset: 0;
  overflow: hidden;
  cursor: grab;
  user-select: none;
  outline: none;
}
.comic.is-dragging { cursor: grabbing; }

.comic__track {
  display: flex;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  transition: transform 0.6s cubic-bezier(0.22, 0.8, 0.24, 1);
  will-change: transform;
}
.comic.is-dragging .comic__track { transition: none; }

.comic__slide {
  flex: 0 0 100%;
  display: grid;
  place-items: center;
  padding: var(--panel-gutter);
}

/* 390 폭에서 370 x 308, 큰 화면에서는 높이에 맞춰 커짐 */
.comic__panel {
  width: min(100%, calc((100 * var(--vh) - 2 * var(--panel-gutter)) * 370 / 308), 1400px);
  aspect-ratio: var(--panel-ratio);
  margin: 0;
  background: #0b0b0b;
  overflow: hidden;
}
.comic__panel img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* ───────────── 마지막 컷 + 댓글 (Figma 1:122) ───────────── */

/* 컷은 가운데 그대로, 아래쪽 남는 칸을 댓글이 씀. 컷은 댓글 칸만큼 줄어들 수 있음 */
.comic__slide--end {
  --comments-h: clamp(170px, calc(30 * var(--vh)), 320px);
  --end-w: min(100%, calc((100 * var(--vh) - 2 * var(--comments-h)) * 370 / 308), 1400px);
  grid-template-rows: 1fr auto 1fr;
  justify-items: center;
}
.comic__slide--end .comic__panel {
  grid-row: 2;
  width: var(--end-w);
}

.comments {
  grid-row: 3;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: var(--end-w); /* 컷과 같은 폭 */
  padding: 14px 0 calc(22px + env(safe-area-inset-bottom));
  font-family: var(--font-title);
  cursor: auto;
  user-select: text;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease, visibility 0s linear 0.8s;
}
/* 마지막 컷이 나온 뒤 comments.js가 붙임 */
.comments.is-shown {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.8s ease, visibility 0s;
}

/* 최신이 위, 오래된 댓글이 아래. 넘치면 이 안에서만 스크롤 */
.comments__list {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 0 10px;
  padding: 0 2px;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  touch-action: pan-y;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18px, #000 calc(100% - 10px), transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 18px, #000 calc(100% - 10px), transparent);
}
.comments__list::-webkit-scrollbar { display: none; }

.comments__item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
}
.comments__item:first-child { padding-top: 16px; }

.comments__text {
  flex: 1;
  margin: 0;
  color: #d3d3d3;
  font-size: clamp(13px, 0.4vw + 11.5px, 16px);
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.comments__delete,
.comments__send,
.comments__clear {
  flex: none;
  margin: 0;
  padding: 4px 2px;
  border: 0;
  background: none;
  color: #6f6f6f;
  font: inherit;
  font-size: clamp(11px, 0.25vw + 10px, 13px);
  cursor: pointer;
}
.comments__delete:hover,
.comments__clear:hover { color: #bababa; }

.comments__admin {
  display: flex;
  justify-content: flex-end;
}
.comments__admin[hidden] { display: none; }

.comments__note {
  margin: 0 0 8px;
  color: #8a8a8a;
  font-size: 11px;
}

/* Figma: 0.4px #d3d3d3 테두리 + #bababa 12px 안내 문구. 터치하기 쉽게 높이만 키움 */
.comments__form {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  height: clamp(36px, 1.2vw + 32px, 48px);
  padding: 0 8px 0 10px;
  border: 0.4px solid #d3d3d3;
}
.comments__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: none;
  background: none;
  color: var(--fg);
  font: inherit;
  font-size: clamp(12px, 0.35vw + 10.5px, 15px);
  text-overflow: ellipsis;
}
.comments__input::placeholder { color: #bababa; opacity: 1; }
.comments__form:focus-within { border-color: #fff; }
.comments__send { color: #bababa; }
.comments__send:disabled { display: none; } /* 비어 있을 땐 안내 문구가 폭을 다 씀 */

/* iOS는 16px보다 작은 입력칸을 누르면 화면을 확대해 버려서 터치 기기에서만 키움 */
@media (pointer: coarse) {
  .comments__input { font-size: 16px; }
  .comments__input::placeholder { font-size: 13px; }
}

/* 가로로 넓은 화면(웹, 아이패드·갤럭시 탭 가로, 휴대폰 가로): 컷 옆에 댓글 칸을 세로로 길게 둠 */
@media (orientation: landscape) and (min-width: 640px) {
  .comic__slide--end {
    --side-w: clamp(260px, 30vw, 480px);
    --side-gap: clamp(20px, 3vw, 56px);
    --end-w: min(
      calc(100vw - var(--side-w) - var(--side-gap) - 2 * var(--panel-gutter)),
      calc((100 * var(--vh) - 2 * var(--panel-gutter)) * 370 / 308),
      1400px);
    grid-template-rows: auto;
    grid-template-columns: var(--end-w) var(--side-w);
    column-gap: var(--side-gap);
    align-content: center;
    justify-content: center;
  }
  .comic__slide--end .comic__panel { grid-row: 1; grid-column: 1; }
  /* 컷과 같은 높이, 입력칸이 컷 아래 끝선에 맞음 */
  .comments {
    grid-row: 1;
    grid-column: 2;
    width: 100%;
    height: calc(var(--end-w) * 308 / 370);
    min-height: min(240px, calc(100 * var(--vh) - 2 * var(--panel-gutter)));
    align-self: end;
    padding: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .comic__track { transition-duration: 0.01s; }
}