/* 색·글자는 여기서 바꾸면 사이트 전체에 적용됨 */
:root {
  --night: #0e0e11;        /* 어두운 섹션 바탕 */
  --night-text: #ecebe7;   /* 어두운 섹션 글자 */
  --night-sub: #c4c3be;    /* 어두운 섹션 보조 글자 */
  --paper: #f3f1ec;        /* 밝은 섹션 바탕 */
  --ink: #18181c;          /* 밝은 섹션 글자 */
  --ink-sub: #3f3f45;      /* 밝은 섹션 보조 글자 */
  --ink-faint: #6f6e69;    /* 밝은 섹션 흐린 글자 */
  --accent: #a3242c;       /* 강조색(밝은 바탕용) */
  --accent-night: #e0676c; /* 강조색(어두운 바탕용) */

  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --measure: 34em;         /* 본문 한 줄 최대 길이 */
  --header-h: 60px;
}

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

html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }

body {
  margin: 0;
  background: var(--night);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.8;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* ---------- 머리 ---------- */

.site-header {
  position: sticky; /* 위 메뉴바는 늘 화면 위에 고정 */
  top: 0;
  z-index: 10;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 0 40px;
  background: var(--night);
  color: var(--night-text);
}

.site-title {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav {
  display: flex;
  gap: 28px;
  font-size: 15px;
}

.site-nav a {
  color: var(--night-sub);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s;
}

.site-nav a:hover { color: var(--night-text); }

/* ---------- 첫 화면 ---------- */

.hero {
  min-height: calc(100svh - var(--header-h));
  display: grid;
  place-items: center;
  padding: 96px 24px 120px;
  text-align: center;
  color: var(--night-text);
  background:
    linear-gradient(to bottom, rgba(14, 14, 17, 0.62), rgba(14, 14, 17, 0.86) 65%, var(--night)),
    url("https://bb-v3-test.pages.dev/BB/PLC/8.webp") center 30% / cover no-repeat;
}

.hero-inner { max-width: 720px; }

.hero h1 {
  margin: 0 0 48px;
  font-size: clamp(40px, 7vw, 80px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: #fff;
}

.prologue p {
  margin: 0 auto 14px;
  max-width: var(--measure);
  font-size: 18px;
  color: var(--night-sub);
  text-wrap: balance;
}

.prologue .prologue-last {
  margin-top: 28px;
  font-weight: 600;
  color: var(--night-text);
}

.hero-link {
  display: inline-block;
  margin-top: 56px;
  font-size: 16px;
  font-weight: 600;
  color: var(--accent-night);
  text-decoration: none;
}

.hero-link:hover { text-decoration: underline; text-underline-offset: 6px; }

/* ---------- 밝은 섹션 공통 ---------- */

.characters {
  background: var(--paper);
  padding: 120px 24px 140px;
}

.wrap { max-width: 1120px; margin: 0 auto; }

.section-head { text-align: center; margin-bottom: 56px; }

.section-head h2 {
  margin: 0 0 12px;
  font-size: clamp(32px, 4.4vw, 46px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.section-head p { margin: 0; color: var(--ink-sub); font-size: 18px; text-wrap: balance; }

/* ---------- 세계관 ---------- */

.world {
  --line: rgba(255, 255, 255, 0.1);
  background: var(--night);
  color: var(--night-text);
  padding: 120px 24px 140px;
}

.world .section-head p { color: var(--night-sub); }

/* 주제 탭 */
.tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 32px;
  margin-bottom: 72px;
  font-size: 17px;
}

.tabs button { color: var(--night-sub); transition: color 0.15s; }
.tabs button:hover { color: var(--night-text); }
.tabs button[aria-selected="true"] { color: #fff; font-weight: 700; }

/* 탭 안 제목: 왼쪽 큰 제목, 오른쪽 짧은 설명 */
.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.panel-head h3 {
  margin: 0;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.panel-head p { margin: 0; font-size: 15px; color: var(--night-sub); text-align: right; white-space: nowrap; }

/* 항목 줄: 왼쪽 이름, 오른쪽 굵은 핵심 + 흐린 보충 */
.defs { margin: 0; }

.defs > div {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.defs dt { font-size: 16px; color: var(--night-sub); }
.defs dd { margin: 0; }
.defs b { display: block; font-size: 18px; font-weight: 600; line-height: 1.65; color: var(--night-text); }
.defs span { display: block; margin-top: 6px; font-size: 16px; line-height: 1.75; color: var(--night-sub); text-wrap: pretty; }

.with-face { display: flex; align-items: center; gap: 12px; }
.with-face img, .faces img {
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 18%;
}
.with-face img { width: 34px; height: 34px; }

/* 그림 카드 */
.cards { display: grid; gap: 28px; margin-top: 56px; }
.cards.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card { margin: 0; }
.card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.card figcaption { padding-top: 16px; }
.card h4 { margin: 0 0 6px; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.card b { display: block; font-size: 17px; font-weight: 600; line-height: 1.6; }
.card span { display: block; margin-top: 6px; font-size: 16px; line-height: 1.75; color: var(--night-sub); text-wrap: pretty; }
.tiles .card img { aspect-ratio: 4 / 3; }

/* 종족: 윗줄 신·인간·거족 세 칸, 아랫줄 수인·마수 두 칸 */
.cards.races { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 48px; }
.cards.races .card { grid-column: span 2; }
.cards.races .card:nth-child(n+4) { grid-column: span 3; }
.cards.races .card:nth-child(n+4) img { aspect-ratio: 2 / 1; }

/* 등급: 가로로 나란히 */
.sub-title { margin: 64px 0 16px; font-size: 20px; font-weight: 800; }

.grades {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.grades li { padding: 18px 14px 20px; border-left: 1px solid var(--line); }
.grades li:first-child { border-left: 0; padding-left: 0; }
.grades .g { display: block; font-size: 24px; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; }
.grades p { margin: 6px 0 12px; font-size: 14px; line-height: 1.6; color: var(--night-sub); }
.faces { display: flex; flex-wrap: wrap; gap: 4px; }
.faces img { width: 30px; height: 30px; }

.note { margin: 16px 0 0; font-size: 15px; color: var(--night-sub); }
.lead-line { margin: -4px 0 16px; font-size: 16px; color: var(--night-sub); }
.ranks { margin-top: 24px; gap: 56px; }

/* 글과 그림 좌우 */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

.split .defs > div { grid-template-columns: 96px minmax(0, 1fr); }

/* ---------- 학사일정 ---------- */

.sub-title.first { margin-top: 0; }
.sub-title small { margin-left: 8px; font-size: 14px; font-weight: 500; color: var(--night-sub); }

/* 하루 · 매달: 왼쪽 시간(날짜), 오른쪽 내용 */
.routine { gap: 64px; }
.sched { margin: 0; border-top: 1px solid var(--line); }
.sched > div {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.sched dt { font-size: 16px; font-weight: 700; color: var(--night-text); font-variant-numeric: tabular-nums; }
.sched dd { margin: 0; font-size: 16px; font-weight: 600; }
.sched dd span { display: block; margin-top: 4px; font-size: 16px; font-weight: 400; line-height: 1.7; color: var(--night-sub); }

/* 하루 막대: 7시~22시를 시간 비율대로 */
.daybar { margin-bottom: 24px; }
.bar { display: flex; gap: 2px; height: 44px; }
.seg {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
}
.seg.major { background: var(--accent-night); color: #fff; }
.seg.minor { background: rgba(224, 103, 108, 0.45); color: #fff; }
.seg.meal { background: rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.9); }
.seg.free { background: rgba(255, 255, 255, 0.06); color: var(--night-sub); }
.ticks { position: relative; height: 18px; margin-top: 6px; font-size: 12px; color: var(--night-sub); font-variant-numeric: tabular-nums; }
.ticks span { position: absolute; transform: translateX(-50%); }
.ticks span:first-child { transform: none; }
.ticks span:last-child { transform: translateX(-100%); }

/* 매달: 위아래로 쌓고, 오른쪽 칸 높이를 왼쪽 '하루'에 맞춤. 그림이 남는 높이를 채움 */
.routine { align-items: stretch; }
.routine > div:last-child { display: flex; flex-direction: column; }
.monthly-cards { flex: 1; display: flex; flex-direction: column; gap: 24px; }
.mcard { flex: 1; display: flex; flex-direction: column; margin: 0; }
.mimg { position: relative; flex: 1; min-height: 120px; }
.mimg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mimg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(14, 14, 17, 0.85), rgba(14, 14, 17, 0) 55%); }
.mdate { position: absolute; left: 16px; bottom: 10px; z-index: 1; font-size: 34px; font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.mcard figcaption { padding-top: 14px; }
.mcard b { display: block; font-size: 17px; font-weight: 700; }
.mcard figcaption span { display: block; margin-top: 6px; font-size: 16px; line-height: 1.7; color: var(--night-sub); text-wrap: pretty; }

/* 한 해: 3월부터 2월까지 달력처럼 4칸 × 3줄 */
.months {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}

.month { padding: 22px 22px 28px; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.month:nth-child(4n + 1) { border-left: 0; padding-left: 0; }

.month h5 { margin: 0 0 16px; font-size: 30px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.month ul { list-style: none; margin: 0; padding: 0; }
.month li + li { margin-top: 16px; }
.month .d { display: block; font-size: 14px; font-weight: 700; color: var(--night-sub); font-variant-numeric: tabular-nums; }
.month b { display: block; margin-top: 2px; font-size: 17px; font-weight: 700; }
.month .t { display: block; margin-top: 4px; font-size: 15px; line-height: 1.7; color: var(--night-sub); text-wrap: pretty; }
.month em { display: block; margin-top: 6px; font-size: 13px; font-style: normal; font-weight: 700; color: var(--accent-night); }
.month li.start .d { color: var(--accent-night); }

.month.off h5 { color: rgba(255, 255, 255, 0.28); }
.month.off p { margin: 0; font-size: 14px; color: rgba(255, 255, 255, 0.28); }

.media { margin: 28px 0 0; }
.media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.media-stack .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.pair .card figcaption { padding-top: 10px; }
.pair .card h4 { font-size: 16px; margin-bottom: 2px; }
.pair .card span { margin-top: 0; }

/* ---------- 모드 ---------- */

.modes {
  --line: rgba(0, 0, 0, 0.1);
  background: var(--paper);
  color: var(--ink);
  padding: 120px 24px 140px;
}

.mode-group {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 56px;
  padding: 44px 0;
  border-top: 1px solid var(--line);
}

.mode-art { position: relative; margin: 0; align-self: start; }
.mode-art img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.mode-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(14, 14, 17, 0.8), rgba(14, 14, 17, 0) 50%); }
.mode-art figcaption {
  position: absolute;
  left: 20px;
  bottom: 16px;
  z-index: 1;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
}

.mode + .mode { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--line); }
.mode h3 { margin: 0 0 8px; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.mode b { display: block; font-size: 17px; font-weight: 600; line-height: 1.65; }
.mode > span { display: block; margin-top: 6px; font-size: 16px; line-height: 1.75; color: var(--ink-sub); text-wrap: pretty; }

.cmd {
  display: inline-block;
  margin-top: 14px;
  padding: 7px 12px;
  font-family: var(--font);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  background: rgba(0, 0, 0, 0.05);
}

.ex { display: block; margin-top: 8px; font-size: 14px; color: var(--ink-faint); }

/* '도중에 켜는 모드' 소제목 */
.modes-sub { padding: 72px 0 8px; border-top: 1px solid var(--line); }
.modes-sub h3 { margin: 0 0 8px; font-size: 28px; font-weight: 800; letter-spacing: -0.02em; }
.modes-sub p { margin: 0; font-size: 17px; color: var(--ink-sub); }
.modes-sub + .mode-group { border-top: 0; }
.mode .tag { margin-left: 8px; padding: 3px 8px; vertical-align: middle; font-size: 13px; font-style: normal; font-weight: 700; color: #fff; background: var(--accent); }

.mode-notes { margin: 0; border-top: 1px solid var(--line); }
.mode-notes > div {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 56px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}
.mode-notes dt { font-weight: 700; }
.mode-notes dd { margin: 0; color: var(--ink-sub); line-height: 1.75; }

/* ---------- 스토리 ---------- */

.stories { display: grid; grid-template-columns: 1fr 1fr; gap: 72px 64px; }
.story-card .mimg img { position: static; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.story-card .mimg::after { background: linear-gradient(to top, rgba(14, 14, 17, 0.5), rgba(14, 14, 17, 0) 40%); }
.story-card h3 { margin: 24px 0 12px; font-size: 28px; font-weight: 800; letter-spacing: -0.02em; }
.story-card p { margin: 0; font-size: 17px; line-height: 1.85; color: var(--night-text); text-wrap: pretty; }
.world .cmd { color: var(--night-text); background: rgba(255, 255, 255, 0.08); }

/* ---------- 플레이 안내 ---------- */

.guide {
  --line: rgba(0, 0, 0, 0.12);
  background: var(--paper);
  color: var(--ink);
  padding: 120px 24px 140px;
}

.guide-block { padding: 56px 0 64px; border-top: 1px solid var(--line); }
.guide-title { margin: 0 0 10px; font-size: 32px; font-weight: 800; letter-spacing: -0.02em; }
.guide-lead { margin: 0 0 36px; font-size: 18px; line-height: 1.75; color: var(--ink); }

/* 첫 대답 예시: 말풍선 */
.chat-and-rows { gap: 64px; }
.chat { display: flex; flex-direction: column; gap: 18px; }
.bubble { display: flex; gap: 12px; align-items: flex-start; }
.bubble img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; flex: none; }
.bubble small { display: block; margin-bottom: 4px; font-size: 14px; font-weight: 700; color: var(--ink-sub); }
.bubble p { margin: 0; padding: 14px 18px; font-size: 18px; line-height: 1.6; background: #fff; }
.bubble.me { justify-content: flex-end; }
.bubble.me small { text-align: right; }
.bubble.me p { color: #fff; background: var(--ink); font-weight: 600; }

.guide-rows { margin: 0; border-top: 1px solid var(--line); }
.guide-rows > div {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  font-size: 18px;
  line-height: 1.65;
}
.guide-rows dt { font-weight: 800; }
.guide-rows dd { margin: 0; }

/* 마공폰: 왼쪽 폰, 오른쪽 앱 이름 목록. 누르면 화면·빛·설명이 부드럽게 바뀜 */
.phone-feature {
  display: grid;
  /* 위 '내 캐릭터 정하기'와 같은 좌우 칸·같은 간격으로 맞춤 */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: stretch;
}

/* 오른쪽 목록을 폰 높이에 맞춰 위아래로 펼침: 첫 이름은 화면 위, 마지막 이름은 화면 아래에 맞음 */
.app-list {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 34px 0 30px;
}

/* 폰 뒤 빛: 앱마다 한 장씩 겹쳐 두고 서서히 바꿔 끼움 */
.phone-wrap { position: relative; padding: 24px 0; justify-self: start; }
.glow {
  position: absolute;
  inset: 4% -16%;
  z-index: 0;
  border-radius: 50%;
  background:
    radial-gradient(closest-side at 32% 34%, var(--app), transparent),
    radial-gradient(closest-side at 70% 68%, var(--app2), transparent);
  filter: blur(56px);
  opacity: 0;
  transition: opacity 0.6s ease;
}
.glow.is-on { opacity: 0.95; }

/* 폰: 챗에서 뜨는 마공폰 그림(서버 코드의 사이트용 복사본이 테두리째 그림)을 겹쳐 씀.
   바닥 = 홈 화면 한 장(테두리). 그 위 화면 칸 안에서 홈·앱·잠금화면이 실제 폰처럼 움직임 */
.phone {
  position: relative;
  z-index: 1;
  width: 460px;
  filter: drop-shadow(0 24px 28px rgba(0, 0, 0, 0.22));
}
.phone > img { display: block; width: 100%; height: auto; aspect-ratio: 394 / 543; }
/* 알림이 오면 폰이 짧게 진동 */
.phone.is-buzz { animation: phone-buzz 0.28s linear; }
@keyframes phone-buzz {
  20% { transform: translateX(-1.6px); }
  40% { transform: translateX(1.6px); }
  60% { transform: translateX(-1.2px); }
  80% { transform: translateX(1.2px); }
}

/* 화면 칸: 그림 394×543 가운데 화면 360×509(테두리 17 안쪽), 모서리 43 */
.phone-scr {
  position: absolute;
  left: 4.3147%;
  top: 3.1308%;
  width: 91.3706%;
  height: 93.7385%;
  overflow: hidden;
  border-radius: 11.944% / 8.448%;
}
/* 화면 칸 안의 그림: 테두리째 그림을 화면 자리에 맞춰 둠 */
.phone-scr img { position: absolute; left: -4.7222%; top: -3.3399%; width: 109.4444%; max-width: none; height: auto; aspect-ratio: 394 / 543; }

/* 홈 화면: 잠금이 풀리면 흐릿하게 커진 데서 제자리로 들어오고, 앱이 열리면 살짝 물러나며 어두워짐 */
.phone-home {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.6s ease, opacity 0.45s ease;
}
.phone-home.is-pre { transform: scale(1.12); filter: blur(6px); opacity: 0; }
.phone-home.is-back { transform: scale(1.06); filter: brightness(0.7) blur(2px); }

/* 아이콘 눌림: 누른 아이콘이 잠깐 어두워짐 */
.phone-tap {
  position: absolute;
  left: var(--ox);
  top: var(--oy);
  width: 13.889%;
  aspect-ratio: 1;
  margin: -6.944% 0 0 -6.944%;
  border-radius: 26%;
  background: #000;
  opacity: 0;
  pointer-events: none;
}
.phone-tap.is-tap { animation: phone-tap 0.3s ease; }
@keyframes phone-tap { 35% { opacity: 0.3; } }

/* 앱 화면: 홈의 그 앱 아이콘 자리(--ox, --oy)에서 커지며 열리고, 닫힐 땐 그 자리로 줄어듦 */
.phone-app {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  opacity: 0;
  transform: scale(0.14);
  transform-origin: var(--ox) var(--oy);
  transition: transform 0.45s cubic-bezier(0.3, 0.75, 0.2, 1), opacity 0.2s ease 0.03s;
}
.phone-app.is-on { opacity: 1; transform: none; }

/* 잠금화면(모서리는 화면 모양대로 둥글게 잘라, 움직일 때 그림 속 테두리 모서리가 안 보이게): 알림 카드가 하나씩 튕기며 들어오고, 잠금이 풀리면 열쇠구멍이 돌아가고 안내가 뜬 뒤
   한 번 살짝 튀었다가 불투명한 채로 위로 넘어감 */
.phone-lock { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; container-type: inline-size; transition: transform 0.55s cubic-bezier(0.5, 0, 0.2, 1); }
.phone-lock.is-open { animation: phone-nudge 0.7s ease 0.45s; }
.phone-lock.is-gone { transform: translateY(-100%); pointer-events: none; animation: none; }
@keyframes phone-nudge {
  35% { transform: translateY(-3.5%); }
  60% { transform: none; }
  78% { transform: translateY(-1.2%); }
}
.note { opacity: 0; transform: translateY(-10px) scale(0.95); transition: opacity 0.3s ease, transform 0.5s cubic-bezier(0.2, 1.4, 0.4, 1); }
.note.is-on { opacity: 1; transform: none; }
.phone-key {
  position: absolute;
  left: 47.222%;
  top: 10.806%;
  width: 5.556%;
  fill: #fff;
  transition: transform 0.45s cubic-bezier(0.3, 1.5, 0.5, 1), filter 0.45s ease;
}
.phone-lock.is-open .phone-key { transform: rotate(-90deg); filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.9)); }
.phone-hint {
  position: absolute;
  left: 0;
  right: 0;
  top: 90.4%;
  text-align: center;
  font-size: 3.4cqw;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 3px rgba(42, 31, 92, 0.5);
  opacity: 0;
  transition: opacity 0.4s ease 0.2s;
}
.phone-lock.is-open .phone-hint { opacity: 1; }

/* 꺼진 화면: 처음엔 까맣다가 켜짐 */
.phone-off { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity 0.5s ease; }
.phone-off.is-on { opacity: 1; }

/* 카메라 구멍은 늘 맨 위(잠금화면·앱 화면이 움직여도 제자리) */
.phone-cam {
  position: absolute;
  left: 86.111%;
  top: 2.7505%;
  width: 6.667%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle closest-side, #262634 21.7%, #15151c 21.7% 50%, #000 50%);
}

@media (prefers-reduced-motion: reduce) {
  .phone-lock, .note, .phone-app, .phone-home, .phone-key, .phone-hint, .phone-off { transition: none; }
  .phone-tap, .phone-hint { display: none; }
}

/* 앱 이름 목록: 크게 쌓고, 고른 앱만 색이 들고 설명이 펼쳐짐 */
.app-item button { display: block; width: 100%; padding: 6px 0; text-align: left; }
.app-name {
  display: inline-block;
  font-size: 54px;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.15;
  color: rgba(24, 24, 28, 0.2);
  transition: color 0.35s ease, transform 0.35s ease;
}
.app-item button:hover .app-name { color: rgba(24, 24, 28, 0.45); }
.app-item.is-on .app-name { color: color-mix(in srgb, var(--app) 82%, #000); }

.app-detail {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.45s ease, opacity 0.35s ease;
}
.app-item.is-on .app-detail { grid-template-rows: 1fr; opacity: 1; }
.app-detail-inner { overflow: hidden; min-height: 0; }
.app-detail-inner b { display: block; padding-top: 14px; font-size: 22px; font-weight: 700; line-height: 1.55; }
.app-detail-inner p { margin: 10px 0 0; font-size: 18px; line-height: 1.75; color: var(--ink); }

/* 입력 예: 내가 보내는 채팅 말풍선처럼 */
.says { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 24px 0 8px; }
.says small { font-size: 14px; font-weight: 700; color: var(--ink-sub); }
.say {
  padding: 12px 18px;
  border-radius: 22px 22px 22px 6px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  color: #fff;
  background: color-mix(in srgb, var(--app) 88%, #000);
}

/* ---------- 인물 분류 ---------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 30px;
  margin-bottom: 72px;
  font-size: 17px;
}

.filters button { color: var(--ink-faint); transition: color 0.15s; }
.filters button:hover { color: var(--ink); }
.filters button[aria-pressed="true"] { color: var(--ink); font-weight: 700; }
.filters .count { margin-left: 5px; font-size: 13px; font-weight: 400; color: var(--ink-faint); }

/* ---------- 인물 상세 (기록 글자) ---------- */

.profile-group { margin: 0 0 2px; font-size: 15.5px; font-weight: 700; line-height: 1.4; color: var(--accent); }

.dz-main h3 {
  margin: 0;
  padding-right: 110px; /* 도장 자리 */
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

/* 머리: 윗줄 학년·출처, 이름, 이름 오른쪽 기록 상태 도장. 아래 가는 줄 하나로 본문과 나눔 */
.doc-title { position: relative; padding-bottom: 20px; border-bottom: 1px solid #d8d3c8; }
.doc-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 16px; }
.doc-status {
  position: absolute;
  top: 30px;
  right: 4px;
  padding: 6px 12px;
  border: 2.5px solid currentColor;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.12em;
  transform: rotate(-6deg);
  opacity: 0.9;
}
.doc-status:empty { display: none; }
.doc-status.is-ok { color: #2c4a7a; }
.doc-status.is-mid { color: #9a6a1c; }
.doc-status.is-low { color: #a3242c; }

.doc-label { display: block; margin: 0; font-size: 14px; font-weight: 700; letter-spacing: 0.08em; color: var(--ink-faint); }
.doc-source { display: flex; gap: 8px; margin: 0; font-size: 14.5px; color: var(--ink-sub); }
.doc-source b { flex: none; font-weight: 600; color: var(--ink-faint); }
.doc-source:has(span:empty) { display: none; }

.profile-body { margin-top: 24px; }
.profile-body p { margin: 0 0 6px; font-size: 17px; line-height: 1.65; color: var(--ink); text-wrap: pretty; }

/* 대사: 꼬리표 + 대사(세로 막대·상자·가로줄 없음, 기록과는 빈자리로 나눔) */
.profile-quote {
  grid-row: 4;
  margin: 0;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.65;
  color: var(--ink);
}
.profile-quote .doc-label { margin-bottom: 2px; }
.profile-quote:empty { display: none; }

/* 항목: 두 쌍씩 한 줄, 기록 칸 맨 아래(그림 아래 끝과 같은 높이)에 붙음. 대사와는 최소 28px */
.dz-data { grid-row: 6; margin-top: 28px; }
.profile-facts {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto minmax(max-content, 1fr);
  gap: 7px 16px;
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid #d8d3c8;
  font-size: 15.5px;
  line-height: 1.6;
}
.profile-facts dt { color: var(--ink-faint); white-space: nowrap; }
.profile-facts dd { margin: 0 8px 0 0; font-weight: 600; color: var(--ink); }
.profile-facts dd.is-wide { grid-column: 2 / -1; } /* 값이 긴 항목은 한 줄을 다 씀 */

/* ---------- 인물 목록 ---------- */

/* 인물 기록만 넓게: 다섯 칸 명찰이 작아 보이지 않게 */
.characters .wrap { max-width: 1360px; }

.roster {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 36px 24px;
}

.roster button { display: block; align-self: start; text-align: left; }

.roster img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

.roster .r-name { display: block; margin: 10px var(--px) 0; font-size: 15.5px; font-weight: 800; letter-spacing: -0.02em; }

/* ---------- 신분증: 목록=목걸이 명찰, 상세=기록실 인물 기록(명찰 디자인을 넓힌 서류 한 장) ----------
   학생=학생증, 교수=교직원증, 그 외 인간=방문증, 신·거족=아카데미 기록 카드.
   그림은 원본 그대로(색·합성 없음). 꾸밈은 사진 바깥에만 */

/* 바탕: 지폐처럼 가는 물결무늬 + (상세 서류) 흐린 큰 문장 */
.badge, .dossier {
  --band: #1c2640;                       /* 머리 띠 */
  --band-ink: #ffffff;                   /* 머리 띠 글자 */
  --gold: #c8a55b;                       /* 문장·테두리 선 */
  --hatch: rgba(255, 255, 255, 0.06);    /* 띠 안 사선 무늬 */
  --shine: rgba(255, 255, 255, 0.16);    /* 띠 왼쪽 위 빛 */
  background: #fbfaf6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='48' viewBox='0 0 160 48'%3E%3Cg fill='none' stroke='%238f9bb3' stroke-opacity='.16' stroke-width='.6'%3E%3Cpath d='M0 12 C20 2 40 22 60 12 S100 2 120 12 S150 22 160 12'/%3E%3Cpath d='M0 24 C20 14 40 34 60 24 S100 14 120 24 S150 34 160 24'/%3E%3Cpath d='M0 36 C20 26 40 46 60 36 S100 26 120 36 S150 46 160 36'/%3E%3Cpath d='M0 6 C20 16 40 -4 60 6 S100 16 120 6 S150 -4 160 6'/%3E%3Cpath d='M0 30 C20 40 40 20 60 30 S100 40 120 30 S150 20 160 30'/%3E%3C/g%3E%3C/svg%3E") repeat;
}
.t-staff { --band: #4f1c27; }
.t-guest { --band: #2f4038; }
.t-god { --band: #eef0f4; --band-ink: #2f3542; --gold: #747e92; --hatch: rgba(47, 53, 66, 0.06); --shine: rgba(255, 255, 255, 0.75); } /* 신: 백금 */
.t-geo { --band: #2a2a2e; --band-ink: #d6d3cc; --gold: #8f8b83; --hatch: rgba(255, 255, 255, 0.05); --shine: rgba(255, 255, 255, 0.08); }

/* 머리 띠: 사선 무늬 + 왼쪽 위 빛, 아래 끝은 물결 곡선(가면으로 자름), 곡선을 따라 금색 테두리 두 줄, 오른쪽에 흐린 큰 문장 */
.b-head, .dz-head {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(130% 160% at 0% 0%, var(--shine), transparent 55%),
    repeating-linear-gradient(135deg, var(--hatch) 0 1px, transparent 1px 7px),
    var(--band);
  color: var(--band-ink);
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--wave)) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M0 0H100V6C62 3 36 21 0 15Z'/%3E%3C/svg%3E") bottom / 100% var(--wave) no-repeat;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--wave)) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M0 0H100V6C62 3 36 21 0 15Z'/%3E%3C/svg%3E") bottom / 100% var(--wave) no-repeat;
}
.b-head::before, .dz-head::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--wave);
  background: var(--gold);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23000'%3E%3Cpath d='M100 2.2C62 -.8 36 17.2 0 11.2' stroke-width='1.6' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M100 -1.4C62 -4.4 36 13.6 0 7.6' stroke-width='.7' stroke-opacity='.7' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23000'%3E%3Cpath d='M100 2.2C62 -.8 36 17.2 0 11.2' stroke-width='1.6' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M100 -1.4C62 -4.4 36 13.6 0 7.6' stroke-width='.7' stroke-opacity='.7' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.b-head::after, .dz-head::after {
  content: "";
  position: absolute;
  top: -12%;
  right: -6%;
  aspect-ratio: 1;
  background: var(--gold);
  opacity: 0.18;
  transform: rotate(-12deg);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.8 20.6 4.8V11c0 5.3-3.7 9.3-8.6 11.2C7.1 20.3 3.4 16.3 3.4 11V4.8Z' fill='none' stroke='%23000' stroke-width='.9'/%3E%3Cpath d='M12 6.2l1.4 3.6 3.8.3-2.9 2.4.9 3.7L12 14.2l-3.2 2 .9-3.7-2.9-2.4 3.8-.3Z'/%3E%3Ccircle cx='12' cy='12' r='8.6' fill='none' stroke='%23000' stroke-width='.35'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.8 20.6 4.8V11c0 5.3-3.7 9.3-8.6 11.2C7.1 20.3 3.4 16.3 3.4 11V4.8Z' fill='none' stroke='%23000' stroke-width='.9'/%3E%3Cpath d='M12 6.2l1.4 3.6 3.8.3-2.9 2.4.9 3.7L12 14.2l-3.2 2 .9-3.7-2.9-2.4 3.8-.3Z'/%3E%3Ccircle cx='12' cy='12' r='8.6' fill='none' stroke='%23000' stroke-width='.35'/%3E%3C/svg%3E") center / contain no-repeat;
}
.b-head > *, .dz-head > * { position: relative; z-index: 1; }

/* 목록: 목걸이 명찰 */
.roster .badge {
  --px: 18px; /* 안쪽 양옆 여백 */
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0 0 14px;
  border: 1px solid #dcd7cc;
  border-bottom: 4px solid var(--band);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 8px 18px rgba(30, 30, 40, 0.07);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.roster .badge:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(30, 30, 40, 0.12); }
/* 목걸이 줄 구멍 */
.roster .badge::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 7px;
  left: 50%;
  width: 30px;
  height: 6px;
  margin-left: -15px;
  border-radius: 3px;
  background: var(--paper);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}
.b-head { --wave: 10px; display: flex; align-items: center; gap: 6px; padding: 20px var(--px) 18px; }
.b-head::after { width: 64px; }
.crest { flex: none; color: var(--gold); }
.b-head .crest { width: 16px; height: 16px; }
.b-head b { font-size: 12px; font-weight: 700; letter-spacing: 0.02em; }
.b-head i { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 700; color: var(--gold); }
.b-photo { display: block; margin: 8px var(--px) 0; padding: 4px; background: #fff; border: 1px solid #d9d3c7; }
.b-unit { margin: 2px var(--px) 0; font-size: 12.5px; line-height: 1.45; color: #5d5c58; }
/* 명찰은 원래 모양 그대로 통째로 키움: 카드 폭이 원래(204.8px)보다 넓어진 배율(--u)만큼 안의 치수도 같이 */
@media (min-width: 861px) {
  .roster { container-type: inline-size; }
  .roster .badge {
    --u: max(1px, (100cqw - 96px) / 5 / 204.8); /* 96px = 칸 사이 24px × 4 */
    --px: calc(18 * var(--u));
    padding-bottom: calc(14 * var(--u));
    border-bottom-width: calc(4 * var(--u));
    border-radius: calc(12 * var(--u));
  }
  .roster .badge::before { top: calc(7 * var(--u)); width: calc(30 * var(--u)); height: calc(6 * var(--u)); margin-left: calc(-15 * var(--u)); border-radius: calc(3 * var(--u)); }
  .b-head { --wave: calc(10 * var(--u)); gap: calc(6 * var(--u)); padding: calc(20 * var(--u)) var(--px) calc(18 * var(--u)); }
  .b-head::after { width: calc(64 * var(--u)); }
  .b-head .crest { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
  .b-head b { font-size: calc(12 * var(--u)); }
  .b-head i { font-size: calc(11 * var(--u)); }
  .b-photo { margin-top: calc(8 * var(--u)); padding: calc(4 * var(--u)); }
  .roster .r-name { margin-top: calc(10 * var(--u)); font-size: calc(15.5 * var(--u)); }
  .b-unit { margin-top: calc(2 * var(--u)); font-size: calc(12.5 * var(--u)); }
}

/* 상세: 기록실 인물 기록 한 장. 위 띠(기록실 머리) / 그림 | 기록 두 쪽 / 아래 번호·학장 서명·도장.
   그림 한 변 = 기록 칸 높이라서 두 쪽 무게가 같음. 노트북·모니터에선 이 크기 그대로 두고,
   화면보다 크면 통째로 줄임(app.js fit). 키우지는 않음 → 어느 화면에서든 같은 구도로 스크롤 없이 한 장 */
.dossier {
  --px: 48px;      /* 안쪽 양옆 여백 */
  --art: 585px;    /* 그림 한 변(흰 테두리 포함) = 기록 칸 높이. 가장 긴 기록(제니)이 들어가는 높이 */
  --text: 560px;   /* 기록 칸 너비 */
  --gap: 52px;     /* 그림과 기록 사이 */
  position: relative;
  isolation: isolate; /* 흐린 큰 문장을 종이 바탕 위, 글자 아래에 깔기 위해 */
  flex: none;
  width: calc(var(--px) * 2 + var(--art) + var(--gap) + var(--text));
  border: 1px solid #d8d2c6;
  border-bottom: 8px solid var(--band);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.04), 0 24px 48px rgba(30, 30, 40, 0.14);
}
.dz-head { --wave: 15px; display: flex; align-items: center; gap: 12px; padding: 18px var(--px) 23px; line-height: 1.4; }
.dz-head::after { width: 150px; }
.dz-head .crest { width: 32px; height: 32px; }
.dz-head b { display: block; font-size: 17px; font-weight: 800; letter-spacing: 0.01em; }
.dz-head small { display: block; margin-top: 1px; font-size: 10.5px; letter-spacing: 0.22em; color: var(--gold); }
.dz-type { margin-left: auto; text-align: right; }
.dz-type b { margin-right: -0.32em; font-size: 16px; letter-spacing: 0.32em; }
.dz-body {
  display: grid;
  grid-template-columns: var(--art) var(--text);
  column-gap: var(--gap);
  padding: 24px var(--px) 0;
}
.dz-photo { align-self: start; padding: 6px; background: #fff; border: 1px solid #d6d0c4; }
.dz-photo img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
/* 기록 칸: 머리 / 기록 / 사이(24~44px, 자리가 있으면 넓게) / 대사 / 남는 자리 / 항목 */
.dz-main { display: grid; grid-template-rows: auto auto minmax(24px, 44px) auto 1fr auto; min-width: 0; height: var(--art); min-height: min-content; } /* 글이 넘칠 때만 길어짐 */
/* 아래 줄: 왼쪽 바코드·번호·홀로그램, 오른쪽 서명(날짜 · 직함 · 이름). 학장 직인은 이 줄 윗선에 걸쳐 찍힘 */
.dz-foot {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
  padding: 12px var(--px);
  border-top: 1px solid #e6e1d6;
}
.dz-code { display: flex; align-items: center; gap: 12px; }
.dz-bar { width: 150px; height: 26px; fill: #2a2a2e; }
.dz-code span { font-size: 13.5px; letter-spacing: 0.12em; color: #6f6c66; font-variant-numeric: tabular-nums; }
.dz-holo {
  position: relative;
  overflow: hidden;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 7px;
  background: conic-gradient(from 30deg, #ffd9ec, #d3f1ff, #e6ffd9, #fff1c9, #f0dcff, #ffd9ec);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 1px 2px rgba(0, 0, 0, 0.12);
}
.dz-holo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.75) 45%, transparent 60%); }
/* 서명란만 명조체: 증서 끝의 날짜·직함·이름처럼 */
.dz-sign { display: flex; align-items: baseline; gap: 14px; margin: 0 0 0 auto; padding-right: 40px; font-family: "Noto Serif KR", serif; line-height: 1.45; }
.dz-date { font-size: 14px; letter-spacing: 0.04em; color: #6f6c66; }
.dz-issuer { font-size: 15px; font-weight: 500; letter-spacing: 0.04em; color: #3f3f45; }
.dz-signer { font-size: 20px; font-weight: 700; letter-spacing: 0.14em; color: #1f1f23; }
/* 오른쪽 아래 큰 방패 문장(흐린 금색): 서류 바닥·오른쪽 글자 선 안에 다 들어오게 위로 올림 */
.dz-foot::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: 14px;
  bottom: 2px;
  width: 220px;
  aspect-ratio: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.8 20.6 4.8V11c0 5.3-3.7 9.3-8.6 11.2C7.1 20.3 3.4 16.3 3.4 11V4.8Z' fill='none' stroke='%23c8a55b' stroke-opacity='.26' stroke-width='.45'/%3E%3Cpath d='M12 6.2l1.4 3.6 3.8.3-2.9 2.4.9 3.7L12 14.2l-3.2 2 .9-3.7-2.9-2.4 3.8-.3Z' fill='%23c8a55b' fill-opacity='.11'/%3E%3Ccircle cx='12' cy='12' r='8.6' fill='none' stroke='%23c8a55b' stroke-opacity='.2' stroke-width='.25'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* 학장 직인: 아래 줄 윗선에 반쯤 걸쳐 이름 끝 위로, 방패 아래쪽 오른편에 찍힘. 글자가 비치게 곱하기 */
.dz-stamp { position: absolute; top: -35px; right: calc(var(--px) - 8px); width: 70px; height: 70px; }
.dz-seal { display: block; width: 100%; height: 100%; color: #c0392b; opacity: 0.9; mix-blend-mode: multiply; transform: rotate(-8deg); }
.dz-seal text { font-family: "Noto Serif KR", serif; }
/* 왼쪽 가장자리 깨알 글씨 줄(실제 신분증의 미세 문자) */
.dz-micro {
  position: absolute;
  top: 110px;
  bottom: 90px;
  left: calc(var(--px) / 2 - 4px);
  width: 8px;
  overflow: hidden;
  writing-mode: vertical-rl;
  white-space: nowrap;
  font-size: 6px;
  line-height: 8px;
  letter-spacing: 0.14em;
  color: var(--gold);
  opacity: 0.75;
}

/* ---------- 인물 소개 (목록을 누르면 화면 전체를 덮으며 열림) ---------- */

.sheet {
  position: fixed;
  inset: 0;
  z-index: 20;
  overflow-y: auto;
  background: var(--paper);
  padding: 30px 24px; /* 서류 위아래 최소 여백 */
  opacity: 0;
  transition: opacity 0.2s;
}

.sheet.is-open { opacity: 1; }
.sheet[hidden] { display: none; }

/* 서류는 화면 가운데, 이전·다음 인물은 서류 양옆 */
.sheet:not([hidden]) { display: flex; flex-direction: column; }
.sheet > .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  width: 100%;
  max-width: none;
  margin: auto;
}
body.sheet-open { overflow: hidden; }

.sheet-step {
  display: grid;
  justify-items: center;
  gap: 2px;
  justify-self: center;
  max-width: 128px;
  padding: 12px 4px;
  text-align: center;
  color: var(--ink-sub);
  transition: color 0.15s;
}
.sheet-step i { font-style: normal; font-size: 26px; line-height: 1.2; }
.sheet-step span { font-size: 13.5px; color: var(--ink-faint); }
.sheet-step b { font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--ink); }
.sheet-step:hover, .sheet-step:hover b { color: var(--accent); }

.sheet-close {
  position: absolute;
  top: 22px;
  right: 32px;
  z-index: 1;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-sub);
}

.sheet-close:hover { color: var(--accent); }

/* 창이 좁아 서류 양옆에 자리가 없으면(태블릿·폰) 이전·다음은 서류 아래 한 줄 */
@media (max-width: 1180px) {
  .sheet > .wrap { grid-template-columns: 1fr 1fr; gap: 20px 12px; align-items: start; }
  .dossier { grid-column: 1 / -1; grid-row: 1; justify-self: center; }
  .sheet-step { grid-template-columns: auto auto; justify-content: start; column-gap: 6px; justify-self: stretch; max-width: none; padding: 4px 0; text-align: left; }
  .sheet-step i { grid-area: 1 / 1; font-size: 15px; line-height: inherit; }
  .sheet-step span { grid-area: 1 / 2; }
  .sheet-step b { grid-area: 2 / 1 / 3 / 3; }
  .sheet-step.is-next { justify-content: end; text-align: right; }
  .sheet-step.is-next i { grid-area: 1 / 2; }
  .sheet-step.is-next span { grid-area: 1 / 1; }
}
@media (min-width: 861px) and (max-width: 1180px) {
  .sheet { padding-top: 56px; } /* 닫기 자리 */
}

/* ---------- 바닥 ---------- */

.site-footer {
  padding: 56px 24px;
  text-align: center;
  font-size: 13px;
  color: var(--night-sub);
}

.site-footer p { margin: 0; }

/* ---------- 좁은 화면 ---------- */

@media (max-width: 860px) {
  .site-header {
    height: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 12px 16px 10px;
  }
  .site-nav {
    width: 100%;
    overflow-x: auto;
    gap: 22px;
    font-size: 14px;
    scrollbar-width: none;
  }
  .site-nav::-webkit-scrollbar { display: none; }
  html { scroll-padding-top: 84px; }

  .hero { min-height: 88svh; padding: 72px 16px 96px; }
  .prologue p { font-size: 17px; }

  .characters { padding: 88px 16px 100px; }

  .world { padding: 88px 16px 100px; }
  .tabs { gap: 8px 22px; margin-bottom: 48px; }
  .panel-head { flex-direction: column; gap: 6px; }
  .panel-head p { text-align: left; white-space: normal; }
  .defs > div { grid-template-columns: 1fr; gap: 4px; padding: 18px 0; }
  .cards { margin-top: 40px; gap: 32px; }
  .cards.three, .cards.four, .cards.races { grid-template-columns: 1fr; }
  .cards.races .card, .cards.races .card:nth-child(n+4) { grid-column: auto; }
  .cards.races .card:nth-child(n+4) img { aspect-ratio: 16 / 10; }
  .cards.four.tiles { grid-template-columns: 1fr 1fr; gap: 20px 14px; }
  .grades { grid-template-columns: 1fr 1fr; border-bottom: 0; }
  .grades li, .grades li:first-child { border-left: 0; padding: 16px 12px 16px 0; border-bottom: 1px solid var(--line); }
  .split { grid-template-columns: 1fr; gap: 0; }
  .routine > div + div .sub-title { margin-top: 48px; }
  .modes { padding: 88px 16px 100px; }
  .stories { grid-template-columns: 1fr; gap: 56px; }
  .guide { padding: 88px 16px 100px; }
  .guide-block { padding: 40px 0 48px; }
  .guide-title { font-size: 26px; }
  .guide-lead, .guide-rows > div, .bubble p, .phone-text p { font-size: 17px; }
  .chat-and-rows { gap: 32px; }
  .phone-feature { grid-template-columns: 1fr; gap: 24px; }
  .app-list { order: -1; padding: 0; gap: 4px; justify-content: flex-start; }
  .app-name { font-size: 32px; }
  .phone-wrap { padding: 8px 0; justify-self: center; width: 100%; max-width: 460px; }
  .phone { width: 100%; }
  .mode-group { grid-template-columns: 1fr; gap: 24px; padding: 32px 0; }
  .mode-art img { aspect-ratio: 16 / 9; }
  .mode-notes > div { grid-template-columns: 1fr; gap: 4px; }
  .monthly-cards { gap: 28px; }
  .mimg { flex: none; aspect-ratio: 16 / 9; }
  .months { grid-template-columns: 1fr; }
  .month, .month:nth-child(4n + 1) { border-left: 0; padding: 20px 0 22px; }
  .month.off { display: flex; align-items: baseline; gap: 12px; padding: 14px 0; }
  .month.off h5 { margin: 0; font-size: 20px; }
  .section-head { margin-bottom: 40px; }
  .filters { gap: 8px 22px; margin-bottom: 48px; }

  /* 폰: 서류는 화면 폭에 맞추고 그림 → 기록 → 항목 → 서명 순서로 한 줄, 이전·다음은 서류 아래 */
  .sheet { padding: 56px 16px 36px; }
  .sheet-close { top: 18px; right: 16px; }
  .dossier { --px: 20px; width: auto; border-bottom-width: 6px; }
  .dz-head { --wave: 12px; gap: 10px; padding: 18px var(--px) 22px; }
  .dz-head::after { width: 110px; }
  .dz-head .crest { width: 26px; height: 26px; }
  .dz-head b { font-size: 15px; }
  .dz-head small { display: none; }
  .dz-type b { font-size: 14px; letter-spacing: 0.24em; margin-right: -0.24em; }
  .dz-body { display: block; padding-top: 16px; }
  .dz-main { height: auto; min-height: 0; margin-top: 22px; }
  .dz-main h3 { padding-right: 86px; font-size: 30px; }
  .profile-facts { grid-template-columns: auto minmax(0, 1fr); }
  .dz-foot { flex-wrap: wrap; gap: 14px 12px; padding-bottom: 22px; }
  .dz-holo { margin-right: auto; }
  .dz-sign { flex: 1 1 auto; flex-direction: column; align-items: flex-end; gap: 0; padding-right: 0; }
  .dz-signer { font-size: 18px; }
  .dz-stamp { position: relative; top: auto; right: auto; flex: none; margin-left: 6px; }
  .dz-foot::after { right: 4px; width: 150px; }
  .dz-bar { width: 120px; }
  .dz-micro { left: 5px; top: 96px; }

  .roster { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 22px 14px; }
  .roster .r-name { font-size: 14.5px; }
  .roster .badge { --px: 14px; }

}