/* =============================================================
 * Alcove pre-story 테마 — Pastel Dream + Y2K + Pixel + Kawaii
 * 적용 대상: index / select / persona / session / creator (body.prestory)
 * 절대 금지: 이 파일은 post-story (app/room-content/chat/outing) 에 영향 주면 안 됨.
 *           모든 셀렉터는 body.prestory 또는 .prestory 로 시작할 것.
 * ============================================================= */

/* ===== @font-face: 로컬 호스팅 폰트 ===== */
/* css/prestory.css 기준의 상대경로 → ../fonts/ */

/* PFStardust 3종 — 메인 폰트 (Regular 400 / Bold 700 / ExtraBold 900) */
@font-face {
  font-family: 'PFStardust';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/PFStardust3.ttf') format('truetype');
}
@font-face {
  font-family: 'PFStardust';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/PFStardust3-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'PFStardust';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/PFStardust3-ExtraBold.ttf') format('truetype');
}

/* 카페24 폰트 — 폴백용으로 등록만 유지 */
@font-face {
  font-family: 'Cafe24Ssurround';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/Cafe24Ssurround.woff2') format('woff2'),
       url('../fonts/Cafe24Ssurround.woff') format('woff');
}

/* ===== 0. 토큰 오버라이드 (body.prestory 스코프) ===== */
body.prestory {
  /* 기존 :root 토큰을 pre-story 톤으로 재바인딩 */
  --color-bg: #C8A2E8;                /* 라벤더 메인 */
  --color-bg-soft: #F5C8DC;           /* 파스텔 핑크 */
  /* 대각선 다단 그라데이션 (좌상 시안 → 우하 라임): 시안 → 블루 → 라벤더 → 핑크 → 살구 → 옐로우 → 라임 */
  --color-bg-grad: linear-gradient(135deg,
    #B8E8E8   0%,
    #B0CDF5  12%,
    #D8B8E8  28%,
    #E8A8D0  48%,
    #FFB8C8  68%,
    #FFE0B0  88%,
    #C8E8B0 100%);
  --color-accent: #FF6090;            /* 핫핑크 */
  --color-accent-soft: #FFB8D0;
  --color-warm: #FFD060;              /* 골드 */
  --color-sky: #A0D8E8;
  --color-purple: #C8A2E8;
  --color-text: #3D2658;              /* 딥 플럼 (검정에서 멀어진 부드러운 어둠) */
  --color-text-muted: #5A4A78;
  --color-card: #FFF8FC;              /* 흰크림 */
  --color-card-2: #FFE8F0;
  --color-border: #3D2658;            /* 두꺼운 플럼 외곽 */
  --color-shadow: #3D2658;

  /* PFStardust 단일 패밀리 — weight (400/700/900) 로 강조 위계 표현 */
  --font-display: 'PFStardust', 'Cafe24Ssurround', 'Pretendard', 'Noto Sans KR', sans-serif;
  --font-body:    'PFStardust', 'Cafe24Ssurround', 'Pretendard', 'Noto Sans KR', sans-serif;

  /* Y2K 신규 토큰 */
  --y2k-mint: #A0D8E8;
  --y2k-mint-deep: #88C8E0;
  /* 신규: 블루 / 시안 계열 */
  --y2k-blue: #88B8E8;
  --y2k-blue-soft: #C0DCF5;
  --y2k-blue-deep: #5A88D0;
  --y2k-cyan: #88E0E0;
  --y2k-magenta: #E84080;
  --y2k-yellow: #FFD060;
  --y2k-yellow-deep: #F0C040;
  --y2k-lavender-2: #B8A0D8;
  --y2k-pink-2: #E8A0B8;
  --y2k-pink-soft: #FFE8F0;
  --y2k-navy: #3D2658;                /* 외곽선/텍스트 기준 — 검정에서 한 발 떨어진 딥 플럼 */
  --y2k-navy-2: #3A2960;
  /* 신규: 연두 / 초록 계열 (봄톤 액센트) */
  --y2k-lime: #B8E8A0;                /* 메인 라임 */
  --y2k-lime-soft: #E8F8DC;           /* 카드 배경용 연한 연두 */
  --y2k-green: #6CB860;                /* 진한 그린 (강조) */
  --y2k-green-deep: #4A9A4F;

  --w98-titlebar: linear-gradient(180deg, #E84080 0%, #FF6090 100%);
  --w98-titlebar-mint: linear-gradient(180deg, #88C8E0 0%, #A0D8E8 100%);
  --w98-titlebar-lavender: linear-gradient(180deg, #B8A0D8 0%, #C8A2E8 100%);
  --w98-titlebar-yellow: linear-gradient(180deg, #F0C040 0%, #FFD060 100%);
  --w98-titlebar-lime: linear-gradient(180deg, #88D070 0%, #B8E8A0 100%);
  --w98-window-bg: #FFF8FC;

  --pixel-shadow: 4px 4px 0 var(--y2k-navy);
  --pixel-shadow-sm: 2px 2px 0 var(--y2k-navy);
  --pixel-shadow-lg: 6px 6px 0 var(--y2k-navy);

  --soft-radius: 14px;
  --sparkle-color: #FFD060;
}

/* ===== 1. 글로벌 베이스 (pre-story 만 적용) ===== */
body.prestory {
  font-family: var(--font-body);
  font-weight: 400; /* 본문 = Regular. 강조는 개별 셀렉터에서 700/900 지정 */
  /* 그라데이션 + 라디얼 오버레이 2단으로 깊이감 */
  background:
    radial-gradient(ellipse 70% 50% at 18% 8%,  rgba(168, 232, 240, 0.55) 0%, transparent 55%),
    radial-gradient(ellipse 60% 45% at 90% 92%, rgba(255, 200, 216, 0.55) 0%, transparent 55%),
    radial-gradient(ellipse 55% 40% at 50% 55%, rgba(232, 200, 248, 0.35) 0%, transparent 60%),
    var(--color-bg-grad);
  background-attachment: fixed;
  color: var(--color-text);
  min-height: 100vh;
  /* 좌측 무지개 띠 12px 만큼 본문 보정 */
  padding-left: 12px;
}

body.prestory ::selection {
  background: var(--y2k-magenta);
  color: #fff;
}

/* 기존 .ambient-orb 흐릿한 그라데이션 제거 — 픽셀 스파클로 교체 */
body.prestory .ambient-bg,
body.prestory .ambient-orb,
body.prestory .orb-1,
body.prestory .orb-2,
body.prestory .orb-3 {
  display: none !important;
}

/* ===== 2. 좌측 무지개 픽셀 띠 ===== */
body.prestory::before {
  content: '';
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 12px;
  background: repeating-linear-gradient(
    180deg,
    #FF6090 0 32px,
    #FFD060 32px 64px,
    #A0D8E8 64px 96px,
    #C8A2E8 96px 128px,
    #B8E8A0 128px 160px,
    #E84080 160px 192px
  );
  border-right: 3px solid var(--y2k-navy);
  z-index: 9999;
  pointer-events: none;
  image-rendering: pixelated;
}

/* ===== 3. 픽셀 스파클 레이어 (별·하트·점 다채롭게) ===== */
.prestory .sparkle-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  /* SVG 별 두 종류 + 작은 점 다수 */
  background-image:
    /* 큰 노란 별 */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='14' height='14'><path d='M8 0 L10 6 L16 6 L11 10 L13 16 L8 12 L3 16 L5 10 L0 6 L6 6 Z' fill='%23FFD060' stroke='%233D2658' stroke-width='1'/></svg>"),
    /* 핑크 작은 별 */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='10' height='10'><path d='M8 0 L10 6 L16 6 L11 10 L13 16 L8 12 L3 16 L5 10 L0 6 L6 6 Z' fill='%23FF6090'/></svg>"),
    /* 흰 다이아 점 */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' width='8' height='8'><path d='M4 0 L8 4 L4 8 L0 4 Z' fill='%23ffffff'/></svg>"),
    /* 점박이들 */
    radial-gradient(2.5px 2.5px at 12% 18%, var(--sparkle-color) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 78% 30%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 33% 70%, var(--y2k-magenta) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 88% 82%, var(--y2k-mint) 50%, transparent 51%),
    radial-gradient(2.5px 2.5px at 50% 45%, var(--sparkle-color) 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 88%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 65% 12%, var(--y2k-magenta) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 92% 55%, var(--sparkle-color) 50%, transparent 51%),
    radial-gradient(2px 2px at 8% 55%, var(--y2k-lime) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 45% 22%, var(--y2k-mint) 50%, transparent 51%),
    radial-gradient(2px 2px at 70% 60%, #fff 50%, transparent 51%);
  background-repeat:
    no-repeat, no-repeat, no-repeat,
    no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat,
    no-repeat, no-repeat, no-repeat;
  background-position:
    18% 28%, 72% 14%, 56% 78%,
    12% 18%, 78% 30%, 33% 70%, 88% 82%, 50% 45%, 22% 88%, 65% 12%, 92% 55%,
    8% 55%, 45% 22%, 70% 60%;
  background-size: auto;
  animation: sparkleTwinkle 3.2s ease-in-out infinite alternate;
  opacity: 0.92;
}

@keyframes sparkleTwinkle {
  0%   { opacity: 0.45; transform: translateY(0); }
  100% { opacity: 0.95; transform: translateY(-2px); }
}

/* 별·하트 SVG 데코 (선택적 - .sparkle-star 클래스로 부착) */
.prestory .sparkle-star {
  position: absolute;
  width: 14px; height: 14px;
  background: var(--y2k-yellow);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  pointer-events: none;
  animation: sparkleTwinkle 2.8s ease-in-out infinite alternate;
}

/* ===== 4. Win98 윈도우 프레임 (.y2k-window) ===== */
.prestory .y2k-window {
  background: var(--w98-window-bg);
  border: 3px solid var(--y2k-navy);
  border-radius: 6px;
  box-shadow:
    inset 1px 1px 0 #ffffff,
    var(--pixel-shadow);
  overflow: hidden;
  position: relative;
}

.prestory .y2k-window__title {
  background: var(--w98-titlebar);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 6px 10px 6px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 3px solid var(--y2k-navy);
  text-shadow: 1px 1px 0 var(--y2k-navy);
  letter-spacing: 0.02em;
  user-select: none;
}

.prestory .y2k-window__title-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.prestory .y2k-window__controls {
  display: inline-flex;
  gap: 4px;
  flex-shrink: 0;
}

.prestory .y2k-window__controls span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 16px;
  background: var(--color-card);
  border: 2px solid var(--y2k-navy);
  font-size: 11px;
  line-height: 1;
  color: var(--y2k-navy);
  font-family: var(--font-display);
}

.prestory .y2k-window__body {
  padding: 14px 16px;
  background: var(--w98-window-bg);
  color: var(--y2k-navy);
}

/* 변형: 민트 / 라벤더 / 옐로우 타이틀바 */
.prestory .y2k-window--mint     > .y2k-window__title { background: var(--w98-titlebar-mint); color: var(--y2k-navy); text-shadow: 1px 1px 0 #fff; }
.prestory .y2k-window--lavender > .y2k-window__title { background: var(--w98-titlebar-lavender); }
.prestory .y2k-window--yellow   > .y2k-window__title { background: var(--w98-titlebar-yellow); color: var(--y2k-navy); text-shadow: 1px 1px 0 #fff; }
.prestory .y2k-window--lime     > .y2k-window__title { background: var(--w98-titlebar-lime); color: var(--y2k-navy); text-shadow: 1px 1px 0 #fff; }

/* 작은 사이즈 (피처 카드 등) */
.prestory .y2k-window--sm > .y2k-window__title { font-size: 0.85rem; padding: 5px 8px; }
.prestory .y2k-window--sm > .y2k-window__body { padding: 12px 14px; }

/* ===== 5. 픽셀 청키 버튼 (.y2k-btn) ===== */
.prestory .y2k-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  background: var(--color-card);
  color: var(--y2k-navy);
  border: 3px solid var(--y2k-navy);
  border-radius: 8px;
  box-shadow: var(--pixel-shadow);
  cursor: pointer;
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: transform 90ms ease, box-shadow 90ms ease;
}

.prestory .y2k-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 var(--y2k-navy);
}

.prestory .y2k-btn:active {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 var(--y2k-navy);
}

.prestory .y2k-btn--primary { background: var(--y2k-magenta); color: #fff; text-shadow: 1px 1px 0 var(--y2k-navy); }
.prestory .y2k-btn--mint    { background: var(--y2k-mint); }
.prestory .y2k-btn--yellow  { background: var(--y2k-yellow); }
.prestory .y2k-btn--lavender { background: var(--y2k-lavender-2); color: #fff; text-shadow: 1px 1px 0 var(--y2k-navy); }
.prestory .y2k-btn--lime    { background: var(--y2k-lime); }

.prestory .y2k-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: var(--pixel-shadow-sm);
}

/* ===== 6. RPG 분절형 게이지 (.hp-bar) ===== */
.prestory .hp-bar {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--y2k-navy);
  border: 2px solid var(--y2k-navy);
  border-radius: 4px;
  box-shadow: var(--pixel-shadow-sm);
  width: 100%;
  max-width: 220px;
}

.prestory .hp-bar__cell {
  flex: 1;
  height: 14px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 2px;
  transition: background 0.25s;
}

.prestory .hp-bar__cell.is-filled {
  background: linear-gradient(180deg, var(--y2k-magenta), var(--y2k-yellow));
  box-shadow: inset 0 1px 0 #fff;
}

.prestory .hp-bar--mint .hp-bar__cell.is-filled {
  background: linear-gradient(180deg, var(--y2k-mint-deep), var(--y2k-mint));
}

/* ===== 7. 픽셀 카드 / 픽셀 아이콘 ===== */
.prestory .pixel-card {
  background: var(--color-card);
  border: 3px solid var(--y2k-navy);
  border-radius: var(--soft-radius);
  box-shadow: var(--pixel-shadow);
  padding: 16px 18px;
}

.prestory .pixel-icon {
  display: inline-block;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  vertical-align: middle;
}

/* 픽셀 하트(💗 대체용) */
.prestory .pixel-heart {
  display: inline-block;
  width: 14px;
  height: 12px;
  background: var(--y2k-magenta);
  clip-path: polygon(
    25% 0%, 50% 25%, 75% 0%, 100% 25%, 100% 50%,
    50% 100%, 0% 50%, 0% 25%
  );
}

/* ===== 8. index.html 오버라이드 ===== */
.prestory nav {
  background: rgba(255, 248, 252, 0.85) !important;
  border-bottom: 3px solid var(--y2k-navy) !important;
  backdrop-filter: blur(8px);
}

.prestory .logo,
.prestory .footer-logo {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  color: var(--y2k-magenta) !important;
  text-shadow: 1px 1px 0 var(--y2k-navy);
  letter-spacing: 0.02em;
}

.prestory .nav-links a {
  color: var(--y2k-navy);
  font-weight: 700;
}

.prestory .nav-links a:hover { color: var(--y2k-magenta); }

.prestory .nav-cta {
  background: var(--y2k-magenta) !important;
  color: #fff !important;
  border: 3px solid var(--y2k-navy);
  border-radius: 8px !important;
  box-shadow: var(--pixel-shadow-sm);
  text-shadow: 1px 1px 0 var(--y2k-navy);
}

.prestory .nav-cta:hover {
  transform: translate(-1px, -1px) !important;
  box-shadow: 3px 3px 0 var(--y2k-navy) !important;
}

.prestory .hero-badge {
  background: var(--color-card);
  border: 3px solid var(--y2k-navy);
  border-radius: 100px;
  color: var(--y2k-navy);
  font-weight: 700;
  box-shadow: var(--pixel-shadow-sm);
}

.prestory .hero-badge::before {
  background: var(--y2k-magenta);
  box-shadow: 0 0 0 2px var(--y2k-navy);
}

.prestory .hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--y2k-navy);
  letter-spacing: -0.01em;
}

.prestory .hero h1 .highlight {
  background: none !important;
  -webkit-text-fill-color: var(--y2k-magenta) !important;
  color: var(--y2k-magenta) !important;
  font-style: normal !important;
  text-shadow:
    3px 3px 0 var(--y2k-navy),
    -1px -1px 0 #fff,
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
    1px 1px 0 var(--y2k-navy);
}

.prestory .hero-subtitle {
  color: var(--y2k-navy);
  font-weight: 500;
  opacity: 0.85;
}

/* index 버튼 — 기존 .btn-primary/secondary 위에 Y2K 풍 덧입히기 */
.prestory .btn {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  border: 3px solid var(--y2k-navy) !important;
  box-shadow: var(--pixel-shadow);
  transition: transform 90ms, box-shadow 90ms !important;
}

.prestory .btn-primary {
  background: var(--y2k-magenta) !important;
  color: #fff !important;
  text-shadow: 1px 1px 0 var(--y2k-navy);
}

.prestory .btn-secondary {
  background: var(--color-card) !important;
  color: var(--y2k-navy) !important;
  border: 3px solid var(--y2k-navy) !important;
}

.prestory .btn:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 6px 6px 0 var(--y2k-navy) !important;
}

.prestory .btn:active {
  transform: translate(4px, 4px) !important;
  box-shadow: 0 0 0 var(--y2k-navy) !important;
}

/* preview-window — Win98 풍으로 재해석 */
.prestory .preview-window {
  background: var(--w98-window-bg) !important;
  border: 3px solid var(--y2k-navy) !important;
  border-radius: 6px !important;
  box-shadow: var(--pixel-shadow-lg) !important;
  overflow: hidden;
}

.prestory .preview-header {
  background: var(--w98-titlebar) !important;
  border-bottom: 3px solid var(--y2k-navy) !important;
  padding: 0.5rem 0.9rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.prestory .preview-header::before {
  content: 'Alcove.exe — preview';
  font-family: var(--font-display);
  font-weight: 700;
  color: #fff;
  font-size: 0.9rem;
  text-shadow: 1px 1px 0 var(--y2k-navy);
  letter-spacing: 0.02em;
  flex: 1;
}

.prestory .preview-dot {
  width: 16px !important;
  height: 14px !important;
  border-radius: 0 !important;
  background: var(--color-card) !important;
  border: 2px solid var(--y2k-navy) !important;
  opacity: 1 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--y2k-navy);
  font-family: var(--font-display);
}

.prestory .preview-dot:nth-child(1)::after { content: '_'; }
.prestory .preview-dot:nth-child(2)::after { content: '□'; }
.prestory .preview-dot:nth-child(3)::after { content: '×'; }

.prestory .chat-bubble {
  font-family: var(--font-body);
  font-weight: 500;
  border-radius: 14px !important;
}

.prestory .chat-bubble.them {
  background: var(--y2k-pink-soft) !important;
  border: 3px solid var(--y2k-navy) !important;
  color: var(--y2k-navy);
  box-shadow: var(--pixel-shadow-sm);
}

.prestory .chat-bubble.me {
  background: var(--y2k-mint) !important;
  border: 3px solid var(--y2k-navy) !important;
  color: var(--y2k-navy) !important;
  box-shadow: var(--pixel-shadow-sm);
}

.prestory .character-avatar {
  border: 3px solid var(--y2k-navy);
  box-shadow: var(--pixel-shadow);
  border-radius: 50% !important;
}

.prestory .character-name {
  color: var(--y2k-magenta) !important;
  font-family: var(--font-display) !important;
  font-weight: 700;
  text-shadow: 1px 1px 0 var(--y2k-navy);
}

.prestory .character-mood {
  color: var(--y2k-navy);
  font-weight: 500;
}

.prestory .preview-dot-btn {
  border: 2px solid var(--y2k-navy) !important;
  background: var(--color-card) !important;
}

.prestory .preview-dot-btn.active {
  background: var(--y2k-magenta) !important;
  border-color: var(--y2k-navy) !important;
}

/* 피처 카드 = 4개 한 줄 동그라미 카와이 카드 */
.prestory .features-grid {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1.6rem !important;
  max-width: 1100px;
  margin: 0 auto;
}

.prestory .feature-card {
  background: var(--w98-window-bg) !important;
  border: 4px solid var(--y2k-navy) !important;
  border-radius: 50% !important;
  box-shadow: var(--pixel-shadow);
  aspect-ratio: 1;
  padding: 1.6rem 1.4rem !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  transition: transform 0.25s, box-shadow 0.25s;
  position: relative;
}

/* 가짜 타이틀바 제거 (동그라미와 안 어울림) */
.prestory .feature-card::before { display: none !important; }

/* 카드 4장에 다른 파스텔 톤 — 카와이 가챠 느낌 */
.prestory .feature-card:nth-child(1) { background: #FFF8FC !important; }                            /* 흰크림 */
.prestory .feature-card:nth-child(2) { background: var(--y2k-pink-soft) !important; }                /* 연핑크 */
.prestory .feature-card:nth-child(3) { background: #FFF6D8 !important; }                             /* 옐로우 톤 */
.prestory .feature-card:nth-child(4) { background: var(--y2k-lime-soft) !important; }                 /* 라임/연두 톤 */

.prestory .feature-card:hover {
  transform: translate(-3px, -3px) rotate(-2deg);
  box-shadow: 7px 7px 0 var(--y2k-navy);
}

.prestory .feature-card:nth-child(2n):hover { transform: translate(-3px, -3px) rotate(2deg); }

.prestory .feature-card .feature-icon {
  display: block;
  margin: 0 0 0.5rem !important;
  font-size: 2.6rem !important;
  filter: drop-shadow(2px 2px 0 var(--y2k-navy));
  line-height: 1;
}

.prestory .feature-card h3 {
  margin: 0 0 0.45rem !important;
  font-size: 1rem !important;
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  color: var(--y2k-magenta);
  text-shadow: 1px 1px 0 #fff;
  line-height: 1.25 !important;
  word-break: keep-all;
}

.prestory .feature-card p {
  margin: 0 !important;
  color: var(--y2k-navy) !important;
  font-weight: 400;
  font-size: 0.74rem !important;
  line-height: 1.5 !important;
  opacity: 0.88;
  word-break: keep-all;
}

/* 좁은 화면 (2x2) */
@media (max-width: 1080px) {
  .prestory .features-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    max-width: 640px;
    gap: 1.8rem !important;
  }
  .prestory .feature-card .feature-icon { font-size: 3rem !important; }
  .prestory .feature-card h3 { font-size: 1.2rem !important; }
  .prestory .feature-card p { font-size: 0.85rem !important; }
}

@media (max-width: 540px) {
  .prestory .features-grid {
    grid-template-columns: 1fr !important;
    max-width: 320px;
  }
}

.prestory .section-label {
  color: var(--y2k-magenta) !important;
  font-weight: 700;
  text-shadow: 1px 1px 0 #fff;
}

.prestory .section-title {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  color: var(--y2k-navy);
}

/* philosophy 번호 → 픽셀 리본 */
.prestory .philosophy-number {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 50px;
  font-size: 1.4rem !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  color: #fff !important;
  background: var(--y2k-magenta);
  border: 3px solid var(--y2k-navy);
  box-shadow: var(--pixel-shadow-sm);
  clip-path: polygon(0 0, 100% 0, 90% 50%, 100% 100%, 0 100%, 10% 50%);
  opacity: 1 !important;
  text-shadow: 1px 1px 0 var(--y2k-navy);
  flex-shrink: 0;
}

.prestory .philosophy-item:nth-child(2n) .philosophy-number { background: var(--y2k-mint); color: var(--y2k-navy) !important; text-shadow: 1px 1px 0 #fff; }
.prestory .philosophy-item:nth-child(3n) .philosophy-number { background: var(--y2k-yellow); color: var(--y2k-navy) !important; text-shadow: 1px 1px 0 #fff; }
.prestory .philosophy-item:nth-child(4n) .philosophy-number { background: var(--y2k-lavender-2); }

.prestory .philosophy-item h4 {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  color: var(--y2k-navy);
}

.prestory .philosophy-item p { color: var(--y2k-navy); opacity: 0.78; font-weight: 500; }

/* CTA 박스 = 큰 Win98 다이얼로그 */
.prestory .cta-box {
  background: var(--w98-window-bg) !important;
  border: 3px solid var(--y2k-navy) !important;
  border-radius: 8px !important;
  box-shadow: var(--pixel-shadow-lg);
  padding: 0 !important;
  overflow: hidden;
}

.prestory .cta-box::before {
  content: 'Confirm?';
  display: flex;
  align-items: center;
  height: 30px;
  padding: 0 14px;
  background: var(--w98-titlebar);
  border-bottom: 3px solid var(--y2k-navy);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  text-shadow: 1px 1px 0 var(--y2k-navy);
  position: static !important;
  width: auto !important;
  height: 30px !important;
  animation: none !important;
}

.prestory .cta-box h2,
.prestory .cta-box p,
.prestory .cta-box .btn {
  margin-left: 2rem;
  margin-right: 2rem;
}

.prestory .cta-box h2 {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  color: var(--y2k-magenta);
  margin-top: 1.6rem !important;
  text-shadow: 1px 1px 0 #fff;
}

.prestory .cta-box p { color: var(--y2k-navy) !important; font-weight: 500; }

.prestory .cta-box .btn { margin-bottom: 2rem; }

/* 푸터 */
.prestory footer {
  background: var(--color-card);
  border-top: 3px solid var(--y2k-navy) !important;
  color: var(--y2k-navy);
}

.prestory .footer-tagline { color: var(--y2k-magenta); font-style: normal; font-weight: 500; }
.prestory .footer-links a { color: var(--y2k-navy); font-weight: 500; }
.prestory .footer-links a:hover { color: var(--y2k-magenta); }
.prestory .copyright { color: var(--y2k-navy); }

/* ===== 9. 헤더 (persona/session/creator 공유 .logo + .back-btn) ===== */
.prestory header {
  background: rgba(255, 248, 252, 0.92);
  border-bottom: 3px solid var(--y2k-navy);
  backdrop-filter: blur(6px);
}

.prestory header .back-btn {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--y2k-navy);
  background: var(--color-card);
  border: 2px solid var(--y2k-navy);
  border-radius: 6px;
  box-shadow: var(--pixel-shadow-sm);
  padding: 0.4rem 0.9rem;
}

.prestory header .back-btn:hover {
  color: var(--y2k-magenta);
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--y2k-navy);
}

/* ===== 10. select.html (.world-*) 오버라이드 ===== */
.prestory .world-shell {
  background: var(--color-bg-grad);
}

.prestory .world-side {
  background: var(--w98-window-bg) !important;
  border-right: 3px solid var(--y2k-navy) !important;
  box-shadow: var(--pixel-shadow);
  color: var(--y2k-navy);
}

.prestory .world-side__logo {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  color: var(--y2k-magenta) !important;
  text-shadow: 1px 1px 0 var(--y2k-navy);
}

.prestory .world-side__search {
  background: var(--y2k-pink-soft) !important;
  border: 2px solid var(--y2k-navy) !important;
  color: var(--y2k-navy) !important;
  font-weight: 700;
  border-radius: 6px !important;
  box-shadow: var(--pixel-shadow-sm);
}

.prestory .world-side__label {
  color: var(--y2k-magenta) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  text-shadow: 1px 1px 0 #fff;
}

.prestory .world-side__item,
.prestory .world-side__tag {
  color: var(--y2k-navy) !important;
  font-weight: 700;
  border-radius: 6px;
  transition: all 0.15s;
}

.prestory .world-side__item:hover {
  background: var(--y2k-yellow) !important;
  color: var(--y2k-navy) !important;
}

.prestory .world-side__item--active {
  background: var(--y2k-magenta) !important;
  color: #fff !important;
  border: 2px solid var(--y2k-navy);
  box-shadow: var(--pixel-shadow-sm);
  text-shadow: 1px 1px 0 var(--y2k-navy);
}

.prestory .world-side__item--cta {
  color: var(--y2k-magenta) !important;
  font-weight: 700 !important;
  background: var(--y2k-pink-soft) !important;
  border: 2px solid var(--y2k-navy);
  box-shadow: var(--pixel-shadow-sm);
}

.prestory .world-side__item--cta:hover {
  background: var(--y2k-magenta) !important;
  color: #fff !important;
}

.prestory .world-side__tag {
  background: var(--y2k-mint);
  border: 2px solid var(--y2k-navy);
  box-shadow: var(--pixel-shadow-sm);
}

.prestory .world-side__tag:hover { background: var(--y2k-yellow); }

.prestory .world-side__author {
  background: var(--y2k-pink-soft);
  border: 2px solid var(--y2k-navy);
  border-radius: 6px;
  padding: 6px 8px;
  color: var(--y2k-navy);
  font-weight: 700;
  box-shadow: var(--pixel-shadow-sm);
}

.prestory .world-side__author-avatar {
  background: var(--y2k-magenta) !important;
  color: #fff !important;
  border: 2px solid var(--y2k-navy);
  font-family: var(--font-display);
  font-weight: 700;
  text-shadow: 1px 1px 0 var(--y2k-navy);
}

.prestory .world-side__account {
  background: var(--y2k-yellow);
  border: 2px solid var(--y2k-navy);
  border-radius: 6px;
  color: var(--y2k-navy);
  font-weight: 700;
  box-shadow: var(--pixel-shadow-sm);
  padding: 10px 12px !important;
  display: flex !important;
  flex-direction: column;
  gap: 6px;
  line-height: 1.35 !important;
}

.prestory .world-side__account > * { line-height: 1.35; }
.prestory .world-side__account-link { color: var(--y2k-magenta) !important; }

.prestory .world-toggle {
  background: var(--y2k-magenta) !important;
  border: 3px solid var(--y2k-navy) !important;
  color: #fff !important;
  border-radius: 6px !important;
  box-shadow: var(--pixel-shadow-sm);
  font-family: var(--font-display);
  font-weight: 700;
}

.prestory .world-toggle:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--y2k-navy);
}

.prestory .world-main__title {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  color: var(--y2k-navy);
  text-shadow:
    2px 2px 0 #fff,
    3px 3px 0 var(--y2k-navy);
}

.prestory .world-main__subtitle {
  color: var(--y2k-navy) !important;
  font-weight: 500;
  opacity: 0.85;
}

/* world-featured 카드 = Win98 윈도우 풍 */
.prestory .world-featured {
  background: var(--w98-window-bg) !important;
  border: 3px solid var(--y2k-navy) !important;
  border-radius: 8px !important;
  box-shadow: var(--pixel-shadow);
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}

.prestory .world-featured::before {
  content: '';
  display: block;
  height: 26px;
  background: var(--w98-titlebar);
  border-bottom: 3px solid var(--y2k-navy);
  position: relative;
  z-index: 3;
}

.prestory .world-featured:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--y2k-navy);
}

.prestory .world-featured__bg {
  border-radius: 0 !important;
}

.prestory .world-featured__overlay {
  background: linear-gradient(
    180deg,
    rgba(40, 40, 72, 0) 0%,
    rgba(40, 40, 72, 0.55) 70%,
    rgba(40, 40, 72, 0.85) 100%
  ) !important;
}

.prestory .world-featured__custom-badge {
  background: var(--y2k-yellow) !important;
  color: var(--y2k-navy) !important;
  border: 2px solid var(--y2k-navy) !important;
  border-radius: 4px !important;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: var(--pixel-shadow-sm);
  top: 36px !important;
}

.prestory .world-featured__tags { gap: 6px; }

.prestory .world-tag {
  background: var(--y2k-magenta) !important;
  color: #fff !important;
  border: 2px solid var(--y2k-navy) !important;
  border-radius: 100px !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  text-shadow: 1px 1px 0 var(--y2k-navy);
  box-shadow: var(--pixel-shadow-sm);
}

.prestory .world-featured__prose {
  font-family: var(--font-body) !important;
  font-style: normal !important;
  font-weight: 700 !important;
  color: #fff !important;
  text-shadow: 1px 1px 0 var(--y2k-navy);
}

.prestory .world-featured__name {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  color: #fff !important;
  text-shadow: 2px 2px 0 var(--y2k-navy);
}

.prestory .world-featured__author {
  color: var(--y2k-pink-soft) !important;
  font-weight: 500;
}

/* world-row (upcoming) — 픽셀 티켓 풍 */
.prestory .world-row {
  background: var(--w98-window-bg) !important;
  border: 3px solid var(--y2k-navy) !important;
  border-radius: 6px !important;
  box-shadow: var(--pixel-shadow-sm);
  filter: grayscale(0.4);
}

.prestory .world-row__name {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  color: var(--y2k-navy) !important;
}

.prestory .world-row__prose,
.prestory .world-row__author {
  color: var(--y2k-navy) !important;
  opacity: 0.7;
  font-weight: 500;
}

.prestory .world-row__aside {
  display: flex !important;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  padding: 8px 4px !important;
  line-height: 1.4 !important;
}

.prestory .world-row__author {
  line-height: 1.4 !important;
}

.prestory .world-row__release {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px !important;
  background: var(--y2k-yellow) !important;
  color: var(--y2k-navy) !important;
  border: 2px solid var(--y2k-navy);
  border-radius: 4px;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2 !important;
  box-shadow: var(--pixel-shadow-sm);
}

.prestory .world-empty {
  background: var(--w98-window-bg);
  border: 3px solid var(--y2k-navy);
  border-radius: 8px;
  padding: 2rem;
  text-align: center;
  color: var(--y2k-navy);
  font-weight: 700;
  box-shadow: var(--pixel-shadow);
}

/* ===== 11. persona.html / creator.html 폼 ===== */
.prestory .page-title {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  color: var(--y2k-navy);
  text-shadow:
    2px 2px 0 #fff,
    3px 3px 0 var(--y2k-magenta);
}

.prestory .page-subtitle {
  color: var(--y2k-navy);
  font-weight: 500;
  opacity: 0.78;
}

.prestory .form-label {
  color: var(--y2k-magenta) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  text-shadow: 1px 1px 0 #fff;
  letter-spacing: 0.01em;
}

.prestory .form-label .required {
  color: var(--y2k-magenta) !important;
  font-size: 1rem;
}

.prestory .form-input {
  background: var(--w98-window-bg) !important;
  border: 3px solid var(--y2k-navy) !important;
  border-radius: var(--soft-radius) !important;
  color: var(--y2k-navy) !important;
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  box-shadow: var(--pixel-shadow-sm);
  transition: all 0.15s;
}

.prestory .form-input:focus {
  outline: none;
  border-color: var(--y2k-magenta) !important;
  background: var(--y2k-pink-soft) !important;
  box-shadow: 4px 4px 0 var(--y2k-magenta);
  transform: translate(-1px, -1px);
}

.prestory .form-input::placeholder {
  color: var(--y2k-navy);
  opacity: 0.45;
  font-weight: 400;
}

.prestory .form-section__title {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  color: #fff !important;
  background: var(--w98-titlebar);
  border: 3px solid var(--y2k-navy);
  border-radius: 6px;
  padding: 6px 12px !important;
  text-shadow: 1px 1px 0 var(--y2k-navy);
  box-shadow: var(--pixel-shadow-sm);
}

.prestory .form-hint {
  color: var(--y2k-navy);
  font-weight: 500;
  opacity: 0.6;
}

.prestory .desc-guide {
  background: var(--y2k-pink-soft) !important;
  border: 3px solid var(--y2k-navy) !important;
  border-left: 6px solid var(--y2k-magenta) !important;
  border-radius: var(--soft-radius) !important;
  color: var(--y2k-navy) !important;
  font-weight: 500;
  box-shadow: var(--pixel-shadow-sm);
}

.prestory .desc-guide strong { color: var(--y2k-magenta); }

.prestory .desc-counter {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--y2k-navy);
}

.prestory .desc-counter.near-max { color: var(--y2k-magenta); }

.prestory .option-btn {
  background: var(--w98-window-bg) !important;
  border: 3px solid var(--y2k-navy) !important;
  color: var(--y2k-navy) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  box-shadow: var(--pixel-shadow-sm);
  transition: transform 90ms, box-shadow 90ms;
}

.prestory .option-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--y2k-navy);
  background: var(--y2k-yellow) !important;
}

.prestory .option-btn.selected {
  background: var(--y2k-magenta) !important;
  color: #fff !important;
  text-shadow: 1px 1px 0 var(--y2k-navy);
  border-color: var(--y2k-navy) !important;
}

/* 아바타 프리셋 = 픽셀 하트 6색 프레임 */
.prestory .avatar-preset {
  background: var(--w98-window-bg) !important;
  border: 3px solid var(--y2k-navy) !important;
  border-radius: 8px !important;
  box-shadow: var(--pixel-shadow-sm);
  transition: transform 90ms, box-shadow 90ms;
}

.prestory .avatar-preset:hover {
  transform: translate(-1px, -1px) scale(1.04);
  box-shadow: 3px 3px 0 var(--y2k-navy);
  border-color: var(--y2k-magenta) !important;
}

.prestory .avatar-preset.selected {
  border-color: var(--y2k-magenta) !important;
  box-shadow: 4px 4px 0 var(--y2k-magenta) !important;
  transform: translate(-1px, -1px);
}

.prestory .avatar-preview {
  background: var(--w98-window-bg) !important;
  border: 4px solid var(--y2k-navy) !important;
  box-shadow: var(--pixel-shadow);
}

.prestory .avatar-upload-btn {
  background: var(--y2k-mint) !important;
  border: 3px solid var(--y2k-navy) !important;
  border-radius: 8px !important;
  color: var(--y2k-navy) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  box-shadow: var(--pixel-shadow-sm);
}

.prestory .avatar-upload-btn:hover {
  background: var(--y2k-yellow) !important;
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--y2k-navy);
}

.prestory .avatar-preset-label {
  color: var(--y2k-navy);
  font-family: var(--font-display);
  font-weight: 700;
}

.prestory .scenario-card {
  background: var(--w98-window-bg) !important;
  border: 3px solid var(--y2k-navy) !important;
  border-radius: var(--soft-radius) !important;
  color: var(--y2k-navy) !important;
  font-family: var(--font-body);
  box-shadow: var(--pixel-shadow-sm);
  transition: transform 90ms, box-shadow 90ms;
}

.prestory .scenario-card:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--y2k-navy);
  border-color: var(--y2k-magenta) !important;
}

.prestory .scenario-card.selected {
  background: var(--y2k-pink-soft) !important;
  border-color: var(--y2k-magenta) !important;
  box-shadow: 4px 4px 0 var(--y2k-magenta);
}

.prestory .scenario-card .scenario-label {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  color: var(--y2k-navy) !important;
}

.prestory .scenario-card.selected .scenario-label { color: var(--y2k-magenta) !important; }

.prestory .scenario-card .scenario-desc { color: var(--y2k-navy); opacity: 0.7; font-weight: 500; }

.prestory .submit-btn {
  background: var(--y2k-magenta) !important;
  color: #fff !important;
  border: 3px solid var(--y2k-navy) !important;
  border-radius: 10px !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  text-shadow: 1px 1px 0 var(--y2k-navy);
  box-shadow: var(--pixel-shadow);
}

.prestory .submit-btn:hover:not(:disabled) {
  transform: translate(-2px, -2px) !important;
  box-shadow: 6px 6px 0 var(--y2k-navy) !important;
}

.prestory .submit-btn:active:not(:disabled) {
  transform: translate(4px, 4px) !important;
  box-shadow: 0 0 0 var(--y2k-navy) !important;
}

.prestory .cancel-btn {
  background: var(--w98-window-bg) !important;
  color: var(--y2k-navy) !important;
  border: 3px solid var(--y2k-navy) !important;
  border-radius: 10px !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  box-shadow: var(--pixel-shadow);
}

.prestory .cancel-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 var(--y2k-navy) !important;
  background: var(--y2k-yellow) !important;
}

.prestory .error-msg {
  background: var(--y2k-pink-soft) !important;
  border: 3px solid var(--y2k-magenta) !important;
  color: var(--y2k-magenta) !important;
  border-radius: var(--soft-radius) !important;
  font-family: var(--font-display);
  font-weight: 700;
  box-shadow: var(--pixel-shadow-sm);
}

/* 마법사 진행 (persona.html 사용) */
.prestory .wizard-step {
  background: var(--w98-window-bg) !important;
  border: 3px solid var(--y2k-navy) !important;
  color: var(--y2k-navy) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  box-shadow: var(--pixel-shadow-sm);
}

.prestory .wizard-step.active {
  background: var(--y2k-yellow) !important;
  color: var(--y2k-navy) !important;
}

.prestory .wizard-step.done {
  background: var(--y2k-magenta) !important;
  color: #fff !important;
  border-color: var(--y2k-navy) !important;
}

.prestory .wizard-line { background: var(--y2k-navy); }
.prestory .wizard-line.done { background: var(--y2k-magenta); }

/* ===== 12. session.html ===== */
.prestory .character-header {
  border-bottom: 3px solid var(--y2k-navy) !important;
  padding: 1.4rem 1.6rem !important;
  background: var(--w98-window-bg);
  border: 3px solid var(--y2k-navy);
  border-radius: 8px;
  box-shadow: var(--pixel-shadow);
  margin-bottom: 2.5rem !important;
}

.prestory .character-header .character-avatar {
  border: 3px solid var(--y2k-navy);
  box-shadow: var(--pixel-shadow-sm);
}

.prestory .character-info h1 {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  color: var(--y2k-navy);
  text-shadow: 1px 1px 0 #fff;
}

.prestory .character-info p { color: var(--y2k-navy); font-weight: 500; opacity: 0.75; }

.prestory .section-title {
  color: var(--y2k-magenta) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  text-shadow: 1px 1px 0 #fff;
  letter-spacing: 0.08em !important;
}

.prestory .section-title::after {
  background: var(--y2k-navy) !important;
  height: 3px !important;
}

.prestory .new-persona-card {
  background: var(--w98-window-bg) !important;
  border: 3px solid var(--y2k-navy) !important;
  border-radius: 8px !important;
  box-shadow: var(--pixel-shadow);
  padding: 0 !important;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}

.prestory .new-persona-card::before {
  content: 'New Game.exe';
  display: flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  background: var(--w98-titlebar-lime);
  border-bottom: 3px solid var(--y2k-navy);
  color: var(--y2k-navy);
  font-family: var(--font-display);
  font-weight: 700;
  text-shadow: 1px 1px 0 #fff;
}

.prestory .new-persona-card:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 6px 6px 0 var(--y2k-navy) !important;
  border-color: var(--y2k-navy) !important;
  background: var(--y2k-pink-soft) !important;
}

.prestory .new-persona-card .new-icon {
  background: var(--y2k-magenta) !important;
  color: #fff !important;
  border: 3px solid var(--y2k-navy);
  box-shadow: var(--pixel-shadow-sm);
  margin: 1.4rem auto 0.8rem !important;
  text-shadow: 1px 1px 0 var(--y2k-navy);
}

.prestory .new-persona-card h3 {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  color: var(--y2k-navy);
  margin: 0 1.6rem 0.4rem !important;
}

.prestory .new-persona-card p {
  color: var(--y2k-navy) !important;
  font-weight: 500;
  margin: 0 1.6rem 1.6rem !important;
}

.prestory .session-card {
  background: var(--w98-window-bg) !important;
  border: 3px solid var(--y2k-navy) !important;
  border-radius: 8px !important;
  box-shadow: var(--pixel-shadow);
  transition: transform 0.18s, box-shadow 0.18s;
}

.prestory .session-card:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 6px 6px 0 var(--y2k-navy) !important;
  border-color: var(--y2k-magenta) !important;
  background: var(--w98-window-bg) !important;
}

.prestory .session-avatar {
  background: var(--y2k-pink-soft) !important;
  border: 3px solid var(--y2k-navy) !important;
  border-radius: 8px !important;
  box-shadow: var(--pixel-shadow-sm);
}

.prestory .session-name {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  color: var(--y2k-navy);
}

.prestory .session-date {
  color: var(--y2k-navy) !important;
  opacity: 0.7;
  font-weight: 500;
}

.prestory .session-preview { color: var(--y2k-navy); opacity: 0.78; font-weight: 500; }

.prestory .status-badge {
  background: var(--y2k-mint) !important;
  border: 2px solid var(--y2k-navy);
  color: var(--y2k-navy) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  box-shadow: var(--pixel-shadow-sm);
  border-radius: 100px !important;
}

.prestory .status-badge.love {
  background: var(--y2k-magenta) !important;
  color: #fff !important;
  text-shadow: 1px 1px 0 var(--y2k-navy);
}

.prestory .status-badge.friend {
  background: var(--y2k-yellow) !important;
  color: var(--y2k-navy) !important;
}

.prestory .status-badge.new {
  background: var(--y2k-mint) !important;
  color: var(--y2k-navy) !important;
}

.prestory .relation-score {
  color: var(--y2k-magenta) !important;
  font-family: var(--font-display);
  font-weight: 700;
}

.prestory .arrow {
  color: var(--y2k-magenta) !important;
  font-family: var(--font-display);
  font-weight: 700;
}

.prestory .session-delete-btn {
  background: var(--w98-window-bg) !important;
  border: 2px solid var(--y2k-navy) !important;
  color: var(--y2k-navy) !important;
  border-radius: 4px !important;
  font-family: var(--font-display);
  font-weight: 700;
}

.prestory .session-card:hover .session-delete-btn {
  background: var(--y2k-magenta) !important;
  color: #fff !important;
}

/* 삭제 모달 */
.prestory .session-delete-modal {
  background: rgba(40, 40, 72, 0.55) !important;
}

.prestory .session-delete-modal .modal-card {
  background: var(--w98-window-bg) !important;
  border: 3px solid var(--y2k-navy) !important;
  border-radius: 8px !important;
  box-shadow: var(--pixel-shadow-lg);
  padding: 0 !important;
  overflow: hidden;
}

.prestory .session-delete-modal .modal-card::before {
  content: 'Delete?';
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 28px;
  padding: 0 10px;
  background: var(--w98-titlebar);
  border-bottom: 3px solid var(--y2k-navy);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  text-shadow: 1px 1px 0 var(--y2k-navy);
}

.prestory .session-delete-modal h3 {
  margin: 1.4rem 1.6rem 0.6rem !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  color: var(--y2k-magenta);
}

.prestory .session-delete-modal p {
  margin: 0 1.6rem 1.4rem !important;
  color: var(--y2k-navy) !important;
  font-weight: 500;
}

.prestory .session-delete-modal .modal-actions {
  margin: 0 1.6rem 1.4rem !important;
}

.prestory .session-delete-modal button {
  background: var(--w98-window-bg) !important;
  border: 3px solid var(--y2k-navy) !important;
  color: var(--y2k-navy) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  box-shadow: var(--pixel-shadow-sm);
  padding: 0.55rem 1.1rem !important;
}

.prestory .session-delete-modal button:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--y2k-navy);
  background: var(--y2k-yellow) !important;
}

.prestory .session-delete-modal button.danger {
  background: var(--y2k-magenta) !important;
  color: #fff !important;
  border-color: var(--y2k-navy) !important;
  text-shadow: 1px 1px 0 var(--y2k-navy);
}

.prestory .session-delete-modal button.danger:hover {
  background: var(--y2k-magenta) !important;
  box-shadow: 3px 3px 0 var(--y2k-navy) !important;
}

/* 빈 상태 */
.prestory .empty-state {
  background: var(--w98-window-bg);
  border: 3px solid var(--y2k-navy);
  border-radius: 8px;
  box-shadow: var(--pixel-shadow);
  color: var(--y2k-navy) !important;
}

.prestory .empty-state h3 {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  color: var(--y2k-magenta) !important;
  text-shadow: 1px 1px 0 #fff;
}

.prestory .empty-state p { color: var(--y2k-navy) !important; font-weight: 500; }

.prestory .empty-cta {
  background: var(--y2k-magenta) !important;
  color: #fff !important;
  border: 3px solid var(--y2k-navy) !important;
  border-radius: 100px !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  text-shadow: 1px 1px 0 var(--y2k-navy);
  box-shadow: var(--pixel-shadow-sm);
}

.prestory .empty-cta:hover {
  transform: translate(-1px, -1px) !important;
  box-shadow: 3px 3px 0 var(--y2k-navy) !important;
}

/* ===== 13. creator.html 추가 (persona 와 공유 안 되는 부분) ===== */
.prestory .back-link {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--y2k-navy);
  background: var(--color-card);
  border: 2px solid var(--y2k-navy);
  border-radius: 6px;
  box-shadow: var(--pixel-shadow-sm);
  padding: 0.4rem 0.9rem;
  text-decoration: none !important;
  margin-bottom: 1.6rem !important;
}

.prestory .back-link:hover {
  color: var(--y2k-magenta) !important;
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--y2k-navy);
}

/* ===== 14. 모바일 반응형 (좌측 띠 폭 축소) ===== */
@media (max-width: 768px) {
  body.prestory {
    padding-left: 8px;
  }
  body.prestory::before { width: 8px; }

  .prestory .y2k-window__title { font-size: 0.85rem; padding: 5px 8px; }
  .prestory .y2k-window__body { padding: 12px 14px; }

  .prestory nav { padding: 1rem 1.2rem !important; }
}

/* ===== 14-B. PFStardust 강조 위계 (큰 제목 = 900 ExtraBold) ===== */
.prestory .hero h1,
.prestory .page-title,
.prestory .world-main__title,
.prestory .character-info h1,
.prestory .cta-box h2,
.prestory .feature-card h3,
.prestory .new-persona-card h3,
.prestory .empty-state h3,
.prestory .section-title {
  font-weight: 900 !important;
}

/* ===== 15. 접근성: 모션 줄이기 ===== */
@media (prefers-reduced-motion: reduce) {
  .prestory .sparkle-layer,
  .prestory .sparkle-star {
    animation: none !important;
  }
  .prestory .y2k-btn,
  .prestory .btn,
  .prestory .y2k-window,
  .prestory .feature-card,
  .prestory .session-card,
  .prestory .new-persona-card {
    transition: none !important;
  }
}