/*
Theme Name: Memory Theme
Theme URI: http://localhost:8888/
Description: Custom theme for Homeless Memory Stairs project
Version: 1.0
Author: You
*/

body {
  margin: 0;
  font-family: "Pretendard", sans-serif;
}

/* ------------------ Header Style ------------------ */

.site-header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  background: rgba(255,255,255,0); /* 투명 */
  padding: 20px 32px;
  box-sizing: border-box;
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 좌측: 햄버거 + 메뉴 */
.header-left {
  display: flex;
  align-items: center;
  gap: 24px;
}

/* 우측: HOME 로고 */
.header-right .logo {
  font-size: 20px;
  text-decoration: none;
  font-weight: 600;
}

/* 데스크탑 메뉴 */
.menu-list {
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-list li a {
  text-decoration: none;
  color: black;
  font-size: 18px;
  font-weight: 500;
}

/* 햄버거 버튼 (기본: 모바일용이라 데스크탑에서 숨김) */
.hamburger {
  display: none;
  font-size: 26px;
  background: none;
  border: none;
  cursor: pointer;
}

/* 모바일 드롭다운 메뉴 기본 숨김 */
.mobile-menu {
  display: none;
  background: white;
  padding: 16px 24px;
}

.mobile-menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-menu-list li {
  margin-bottom: 12px;
}

.mobile-menu-list a {
  text-decoration: none;
  color: black;
  font-size: 18px;
}

/* ------- 반응형 (모바일) ------- */
@media (max-width: 768px) {
  /* 데스크탑용 가로 메뉴 숨김 */
  .main-nav {
    display: none;
  }

  /* 햄버거는 모바일에서만 보이게 (좌측 상단) */
  .hamburger {
    display: block;
  }
}
/* ---------- 홈 화면: 풀스크린 영상 커버 ---------- */

.hero-wrapper {
  width: 100%;
  height: 100vh;          /* 화면 전체 높이 */
  overflow: hidden;
  position: relative;
}

.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* 꽉 채우기 */
  display: block;
}

/* 기본: PC용만 보이게, 모바일용은 숨김 */
.hero-video-desktop {
  display: block;
}
.hero-video-mobile {
  display: none;
}

/* 화면이 좁아지면(모바일) 반대로 */
@media (max-width: 768px) {
  .hero-video-desktop {
    display: none;
  }
  .hero-video-mobile {
    display: block;
  }
}

/* 홈 페이지 본문 영역 */
.front-page-content {
  max-width: 960px;
  margin: 0 auto;
  padding: 40px 20px 80px;
  box-sizing: border-box;
}

/* 일반 페이지 공통 레이아웃 */
.page-main {
  padding-top: 100px; /* 고정 헤더 높이 보정 */
}

.page-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 40px 20px 80px;
  box-sizing: border-box;
}

.page-title {
  font-size: 32px;
  margin-bottom: 20px;
}

.page-content {
  font-size: 18px;
  line-height: 1.6;
}
/* ===== 기억의 계단 전체 레이아웃 ===== */

#memory-stairs-app {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 20px 80px;
}

/* 공통 버튼 */
.ms-btn {
  padding: 12px 24px;
  background: black;
  color: white;
  font-size: 16px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  margin: 8px 4px;
}
.ms-btn:hover {
  background: #444;
}
.ms-btn-sub {
  background: #e0e0e0;
  color: #222;
}
.ms-btn-sub:hover {
  background: #c7c7c7;
}

/* ===== 인트로: 어두운 배경 + 빛 + 장미 모션 ===== */

.ms-intro {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  padding: 60px 24px 72px;
  text-align: center;
  background: radial-gradient(circle at top, #444 0%, #161616 40%, #050505 100%);
  color: #f5f5f5;
}

/* 가장자리 비네트(어두운 테두리) */
.ms-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top, rgba(255,255,255,0.08) 0%, transparent 40%),
    radial-gradient(circle at bottom, rgba(255,255,255,0.04) 0%, transparent 45%);
  mix-blend-mode: screen;
  pointer-events: none;
}

/* 장미 1송이 + 은은한 빛 + 모션 */
.ms-intro::after {
  content: "🌹";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, 10%);
  font-size: 64px;
  filter: drop-shadow(0 0 18px rgba(255, 80, 120, 0.8));
  animation: msRoseFloat 4s ease-in-out infinite alternate,
             msRoseGlow 3.5s ease-in-out infinite alternate;
  pointer-events: none;
  opacity: 0.95;
}

@keyframes msRoseFloat {
  0%   { transform: translate(-50%, 10%); }
  100% { transform: translate(-50%, 0%); }
}

@keyframes msRoseGlow {
  0%   { filter: drop-shadow(0 0 10px rgba(255, 130, 160, 0.8)); }
  100% { filter: drop-shadow(0 0 22px rgba(255, 200, 220, 1)); }
}

.ms-intro h2 {
  position: relative;
  z-index: 1;
  font-size: 30px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.ms-intro p {
  position: relative;
  z-index: 1;
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 32px;
  color: #ddd;
}

/* 인트로 버튼 살짝 더 “작품 느낌”으로 */
.ms-intro .ms-btn {
  position: relative;
  z-index: 1;
  padding: 12px 32px;
  border-radius: 999px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.4);
  backdrop-filter: blur(8px);
}
.ms-intro .ms-btn:hover {
  background: rgba(255,255,255,0.18);
}

/* 1단계 – 구슬/별 */

.ms-step {
  margin-top: 20px;
}

/* ===== 1단계: 어두운 공간 + 떠다니는 구슬 ===== */

.ms-step1 {
  position: relative;
  color: white;
  background: radial-gradient(circle at top, #3d3d3d 0%, #111 40%, #000 100%);
  padding: 40px 24px 60px;
  border-radius: 16px;
  text-align: center;
  overflow: hidden;
}

/* 별가루 같은 작은 점들 */
.ms-step1::before {
  content: "";
  position: absolute;
  inset: -20%;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.2) 1px, transparent 1px),
    radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
  background-size: 120px 120px, 180px 180px;
  background-position: 0 0, 60px 90px;
  opacity: 0.4;
  animation: msStarDrift 40s linear infinite;
  pointer-events: none;
}

@keyframes msStarDrift {
  0%   { transform: translate3d(0,0,0); }
  100% { transform: translate3d(-80px, -120px, 0); }
}

.ms-step1 h2 {
  position: relative;
  z-index: 1;
  margin-bottom: 12px;
}
.ms-step1 p {
  position: relative;
  z-index: 1;
}

.ms-bubble-area {
  position: relative;
  z-index: 1;
  margin: 30px auto 20px;
  max-width: 480px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
}

/* 구슬 자체 + 둥둥 떠다니는 모션 */
.ms-bubble {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #aaa;
  background:
    radial-gradient(circle at 30% 20%, #ffffff 0%, #c8c8c8 25%, #555 55%, #000 100%);
  color: transparent;
  cursor: pointer;
  box-shadow:
    0 0 10px rgba(255,255,255,0.4),
    0 0 30px rgba(0,0,0,0.8) inset;
  animation:
    msBubbleFloat 6s ease-in-out infinite alternate,
    msBubblePulse 4.5s ease-in-out infinite alternate;
  transform-origin: center;
}

@keyframes msBubbleFloat {
  0%   { transform: translate3d(0, 4px, 0); }
  100% { transform: translate3d(0, -10px, 0); }
}

@keyframes msBubblePulse {
  0%   { box-shadow: 0 0 8px rgba(255,255,255,0.4), 0 0 30px rgba(0,0,0,0.7) inset; }
  100% { box-shadow: 0 0 14px rgba(255,255,255,0.8), 0 0 40px rgba(0,0,0,0.9) inset; }
}

/* 각 구슬마다 속도/딜레이 조금씩 다르게 */
.ms-bubble:nth-child(3n+1) {
  animation-duration: 7s, 5s;
  animation-delay: 0s, 0.3s;
}
.ms-bubble:nth-child(3n+2) {
  animation-duration: 6s, 4s;
  animation-delay: 0.8s, 0s;
}
.ms-bubble:nth-child(3n) {
  animation-duration: 8s, 5.5s;
  animation-delay: 0.4s, 0.6s;
}
.ms-bubble:hover {
  transform: translate3d(0, -14px, 0) scale(1.08);
}

/* 안내 문구 */
.ms-step1-info {
  position: relative;
  z-index: 1;
  margin-top: 16px;
  font-size: 14px;
  color: #ddd;
}

.ms-star-display {
  font-size: 60px;
  margin: 20px 0;
}
.ms-relation-text {
  font-size: 18px;
  margin-bottom: 24px;
}

/* 2단계 – 오늘 당신이 만난 사람 */

.ms-step2 {
  padding: 32px 24px;
  border-radius: 16px;
  background: #f9f9f9;
}
.ms-step2 h2 {
  margin-bottom: 10px;
}
.ms-relation-caption {
  font-size: 15px;
  color: #666;
  margin-bottom: 20px;
}

.ms-person-card {
  background: white;
  border-radius: 12px;
  padding: 20px 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  margin-bottom: 24px;
}
.ms-person-card h3 {
  margin-bottom: 8px;
}
.ms-person-intro {
  white-space: pre-line;
  font-size: 15px;
  line-height: 1.7;
}

.ms-cup-label {
  margin-bottom: 10px;
}
.ms-cup-area {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-bottom: 20px;
}
.ms-cup {
  width: 40px;
  height: 50px;
  border-radius: 0 0 10px 10px;
  border: 2px solid #aaa;
  position: relative;
  cursor: pointer;
  background: rgba(255,255,255,0.5);
}
.ms-cup::before {
  content: "🕯";
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 20px;
}
.ms-cup.selected {
  border-color: #000;
  box-shadow: 0 0 6px rgba(0,0,0,0.4);
}

.ms-message-area {
  margin: 16px 0 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ms-message-area label {
  font-size: 14px;
  text-align: left;
}
#ms-nickname,
#ms-message {
  width: 100%;
  box-sizing: border-box;
  padding: 8px;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-size: 14px;
}
#ms-message {
  min-height: 80px;
  resize: vertical;
}

/* 3단계 – 기억의 계단 */

.ms-step3 {
  padding: 20px 0 40px;
}
.ms-filter-bar {
  margin: 16px 0 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ms-filter-btn {
  padding: 6px 10px;
  font-size: 13px;
  border-radius: 999px;
  border: 1px solid #ccc;
  background: #f5f5f5;
  cursor: pointer;
}
.ms-filter-btn.active {
  background: #000;
  color: #fff;
  border-color: #000;
}

/* ---- 계단처럼 보이는 장미 그리드 ---- */

.ms-rose-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;       /* 세로, 가로 간격 */
  margin-bottom: 24px;
}

/* 기본 장미 카드 스타일 */
.ms-rose-item {
  width: 120px;
  border-radius: 12px;
  padding: 10px 6px;
  background: #f3f3f3;
  text-align: center;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
.ms-rose-item .ms-rose-icon {
  font-size: 24px;
  margin-bottom: 4px;
}
.ms-rose-name {
  font-size: 14px;
  margin-bottom: 2px;
}
.ms-rose-candles {
  font-size: 12px;
  color: #555;
}

/* 초가 있는 장미 / 내가 방금 올린 장미 강조 */
.ms-rose-item.has-candles {
  background: #ffe9e9;
}
.ms-rose-item.mine {
  box-shadow: 0 0 0 2px #000;
}
.ms-rose-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* ---- 계단 느낌: 1줄에 5개씩 잡고, 오른쪽으로 갈수록 아래로 내려가게 ---- */
/* 1행 5개: 1,2,3,4,5 번째 */
.ms-rose-item:nth-child(5n+1) { margin-top: 0; }
.ms-rose-item:nth-child(5n+2) { margin-top: 12px; }
.ms-rose-item:nth-child(5n+3) { margin-top: 24px; }
.ms-rose-item:nth-child(5n+4) { margin-top: 36px; }
.ms-rose-item:nth-child(5n)   { margin-top: 48px; }

/* 화면이 좁아질 땐 계단 효과를 조금 완만하게 */
@media (max-width: 768px) {
  .ms-rose-item {
    width: 45%;
  }
  .ms-rose-item:nth-child(5n+1),
  .ms-rose-item:nth-child(5n+2),
  .ms-rose-item:nth-child(5n+3),
  .ms-rose-item:nth-child(5n+4),
  .ms-rose-item:nth-child(5n) {
    margin-top: 12px;
  }
}


.ms-detail-area {
  margin-bottom: 24px;
}
.ms-detail-placeholder {
  font-size: 14px;
  color: #777;
}
.ms-detail-card {
  border-radius: 12px;
  padding: 18px 16px;
  background: #f9f9f9;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.ms-detail-card h3 {
  margin-bottom: 6px;
}
.ms-detail-card .ms-person-intro {
  margin-bottom: 10px;
}
.ms-detail-messages ul {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
}
.ms-detail-messages li {
  font-size: 14px;
  margin-bottom: 4px;
}
.ms-nickname {
  font-weight: 600;
}
.ms-no-message {
  font-size: 14px;
  color: #555;
}

.ms-bottom-actions {
  margin-top: 10px;
}

/* ===== 3단계: 장미 + 초 계단 시각화 ===== */

.ms-step3 {
  padding: 24px 0 40px;
  background: radial-gradient(circle at top, #1f2740 0%, #050812 60%, #020208 100%);
  color: #f5f5f5;
  border-radius: 18px;
}

/* 상단 통계 바 */
.ms-stats-bar {
  margin: 8px 20px 12px;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(0,0,0,0.3);
  font-size: 14px;
  line-height: 1.6;
}
.ms-stats-bar strong {
  font-weight: 600;
}

/* 필터는 기존 스타일 유지 + 살짝 톤 조정 */
.ms-filter-bar {
  margin: 10px 20px 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ms-filter-btn {
  padding: 6px 10px;
  font-size: 13px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.06);
  color: #eee;
  cursor: pointer;
}
.ms-filter-btn.active {
  background: #ffffff;
  color: #020202;
  border-color: #ffffff;
}

/* 계단 영역 전체 */
.ms-stairs-section {
  padding: 0 20px 0;
}

/* 실제 계단 사진 배경 */
.ms-stairs-bg {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  min-height: 260px;
  background-image: linear-gradient(to bottom, #000000 0%, #050812 100%),
                    url('images/stairs.jpg'); /* ← 계단 사진 경로 */
  background-size: cover;
  background-position: center;
  padding: 22px 18px 22px;
}

/* 장미들은 계단 위에 올려진 “반투명 카드” 느낌 */
.ms-rose-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px 14px;
}

/* 장미 카드 기본 */
.ms-rose-item {
  border-radius: 12px;
  padding: 8px 6px;
  text-align: center;
  cursor: pointer;
  background: rgba(5, 5, 10, 0.55);
  border: 1px solid rgba(255,255,255,0.06);
  color: #f2f2f2;
  transition: transform 0.16s, box-shadow 0.16s, background 0.16s, opacity 0.16s, filter 0.16s;
  backdrop-filter: blur(4px);
}
.ms-rose-icon {
  font-size: 22px;
  margin-bottom: 2px;
}
.ms-rose-name {
  font-size: 14px;
  margin-bottom: 1px;
}
.ms-rose-candles {
  font-size: 12px;
  color: #ddd;
}

/* 🔆 밝기 단계별 연출 */
/* 0개: 흐릿 + 흑백 */
.ms-rose-item.candle-level-0 {
  opacity: 0.3;
  filter: grayscale(100%);
  box-shadow: none;
}

/* 1~3개: 약한 빛 */
.ms-rose-item.candle-level-1 {
  opacity: 0.7;
  filter: grayscale(20%);
  box-shadow: 0 0 8px rgba(255, 214, 170, 0.35);
}

/* 4~7개: 중간 광채 */
.ms-rose-item.candle-level-2 {
  opacity: 0.95;
  filter: none;
  box-shadow: 0 0 10px rgba(255, 230, 180, 0.6);
  animation: msCandleGlowMid 3.2s ease-in-out infinite alternate;
}

/* 8개 이상: 더 밝은 광채 */
.ms-rose-item.candle-level-3 {
  opacity: 1;
  filter: none;
  box-shadow: 0 0 12px rgba(255, 240, 200, 0.95), 0 0 30px rgba(255, 200, 120, 0.8);
  animation: msCandleGlowHigh 2.6s ease-in-out infinite alternate;
}

/* 내가 오늘 초를 올린 사람 */
.ms-rose-item.mine {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* hover */
.ms-rose-item:hover {
  transform: translateY(-2px);
}

/* 광채 애니메이션 */
@keyframes msCandleGlowMid {
  0%   { box-shadow: 0 0 7px rgba(255, 230, 180, 0.4); }
  100% { box-shadow: 0 0 12px rgba(255, 240, 200, 0.9); }
}
@keyframes msCandleGlowHigh {
  0%   { box-shadow: 0 0 10px rgba(255, 240, 200, 0.7), 0 0 24px rgba(255, 210, 130, 0.6); }
  100% { box-shadow: 0 0 16px rgba(255, 250, 220, 1), 0 0 34px rgba(255, 222, 140, 0.95); }
}

/* 상세 영역 / 아래 설명 */
.ms-detail-area {
  margin-top: 18px;
}
.ms-detail-placeholder {
  font-size: 14px;
  color: #ccc;
}
.ms-detail-card {
  border-radius: 12px;
  padding: 16px 14px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.12);
}
.ms-detail-card h3 {
  margin-bottom: 6px;
}
.ms-detail-card .ms-person-intro {
  margin-bottom: 10px;
  white-space: pre-line;
}
.ms-detail-messages ul {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
}
.ms-detail-messages li {
  font-size: 13px;
  margin-bottom: 4px;
}
.ms-nickname {
  font-weight: 600;
}
.ms-no-message {
  font-size: 13px;
  color: #eee;
}

/* 반응형 */
@media (max-width: 768px) {
  .ms-stairs-bg {
    padding: 16px 10px 16px;
  }
  .ms-rose-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 10px;
  }
}

/* ================================
   홈리스 기억의 계단 전용 화면
   헤더는 유지 / 제목 영역만 제거
   ================================ */

body.page-id-14 .page-title,
body.page-id-14 h1.entry-title,
body.page-id-14 .entry-header {
  display: none !important; /* 페이지 제목 제거 */
}

/* 기본 페이지 패딩 제거 → 헤더 바로 아래부터 인터랙티브 시작 */
body.page-id-14 .site-main,
body.page-id-14 .page-main,
body.page-id-14 .content-area {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* 헤더 아래 전체를 immersive 화면으로 */
body.page-id-14 #memory-stairs-app {
  margin: 0;
  max-width: none;
  padding: 0;
}

/* 인트로/단계 화면 전체화면 느낌 */
body.page-id-14 .ms-step,
body.page-id-14 .ms-intro {
  border-radius: 0;
  max-width: 100%;
  min-height: calc(100vh - 60px); /* 헤더 높이만큼 빼고 꽉 차게 */
  padding-top: 40px; /* 헤더와 간격 조금 */
}

/* 배경이 화면 전체에 자연스럽게 이어지도록 */
body.page-id-14 {
  background: radial-gradient(circle at top, #1f2740 0%, #050812 60%, #020208 100%);
}
/* ==== 홈리스 기억의 계단: 전체 배경 + 레이아웃 ==== */
/* 37 대신 실제 페이지 ID로 바꾸기 */

body.page-id-14,
body.page-id-14 html {
  background: radial-gradient(circle at top, #1f2740 0%, #050812 60%, #020208 100%) !important;
}

/* 워드프레스 기본 페이지 여백 제거 */
body.page-id-14 .page-main,
body.page-id-14 .site-main,
body.page-id-14 .content-area {
  padding-top: 0;
  margin-top: 0;
}

/* 기억의 계단 앱은 전체 폭 사용 */
body.page-id-14 #memory-stairs-app {
  max-width: none;
  margin: 0;
  padding: 0;
}

/* 인트로/각 단계 카드가 화면 전체를 쓰도록 */
body.page-id-14 .ms-intro,
body.page-id-14 .ms-step {
  border-radius: 0;
  max-width: 100%;
  margin: 0;
  min-height: calc(100vh - 60px); /* 헤더 높이만큼 빼고 화면 꽉 채우기 */
  box-sizing: border-box;
  padding-top: 80px; /* 헤더에서 살짝 내려오기 */
}

/* 인트로 배경도 중앙 패널 말고 전체 화면 느낌으로 */
body.page-id-14 .ms-intro {
  background: radial-gradient(circle at top, #444 0%, #161616 35%, #050505 100%);
}
/* ==== 홈리스 기억의 계단에서만 헤더 스타일 변경 ==== */

body.page-id-14 .site-header {
  background: transparent !important;  /* 완전 투명 */
  box-shadow: none;
}

/* 메뉴 글자, HOME 로고를 흰색으로 */
body.page-id-14 .menu-list li a,
body.page-id-14 .header-right .logo {
  color: #ffffff !important;
}

/* 모바일 햄버거 아이콘도 흰색으로 */
body.page-id-14 .hamburger {
  color: #ffffff;
}

/* 헤더가 배경과 겹쳐도 클릭 잘 되게 z-index 유지 */
body.page-id-14 .site-header {
  z-index: 9999;
}
/* ===========================================
   홈리스 기억의 계단 - STEP1 (별 화면) 텍스트 흰색
   =========================================== */

body.page-id-14 .ms-step1-star h2 {
  color: #ffffff !important;   /* "별이 하나 떠올랐습니다" */
}

body.page-id-14 .ms-step1-star p,
body.page-id-14 .ms-step1-star .star-message {
  color: #ffffff !important;   /* 설명 문장 */
}
body.page-id-14 .ms-step,
body.page-id-14 .ms-intro {
  margin-top: -40px !important;      /* 헤더 높이만큼 띄우기 */
}
/* ==========================================
   홈리스 기억의 계단 (page-id-14)
   인트로/각 단계의 중앙 검정 배경 제거
   ========================================== */

body.page-id-14 .ms-intro,
body.page-id-14 .ms-step {
  background: transparent !important;
  box-shadow: none !important;
}
/* ===========================================
   page-id-14 : Step2 카드 외 텍스트만 흰색
   =========================================== */

/* Step2 전체 중 흰색으로 바뀌어야 하는 요소 */
body.page-id-14 .ms-step2 h2,
body.page-id-14 .ms-step2 .ms-relation-caption,
body.page-id-14 .ms-step2 .ms-cup-label,
body.page-id-14 .ms-step2 label {
  color: #ffffff !important;
}

/* Step2 안의 일반 p는 일단 흰색으로 */
body.page-id-14 .ms-step2 > p {
  color: #ffffff !important;
}

/* ===== BUT 카드(.ms-person-card) 안의 텍스트는 검정으로 다시 지정 ===== */
body.page-id-14 .ms-step2 .ms-person-card h3,
body.page-id-14 .ms-step2 .ms-person-card p {
  color: #000000 !important;
}
/* ================= 남겨진 메시지들 보드 ================= */

.ms-step-messages {
  max-width: 960px;
  margin: 80px auto 60px;
  color: #ffffff;
}

.ms-step-messages h2 {
  font-size: 26px;
  margin-bottom: 8px;
}

.ms-messages-caption {
  font-size: 14px;
  opacity: 0.8;
}

.ms-messages-list {
  margin-top: 28px;
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 8px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ms-message-card {
  background: rgba(5, 5, 10, 0.9);
  border-radius: 14px;
  padding: 14px 18px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.ms-message-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  margin-bottom: 6px;
  opacity: 0.85;
}

.ms-message-person {
  font-weight: 600;
}

.ms-message-nickname {
  font-style: italic;
}

.ms-message-text {
  font-size: 15px;
  line-height: 1.7;
  white-space: pre-wrap;
}

.ms-step-messages .ms-bottom-actions {
  margin-top: 24px;
  text-align: center;
}
/* 구슬 기본 */
.ms-bubble {
  position: relative;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 55%, #222, #000);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.1);
  cursor: pointer;
  border: none;
  transition:
    transform 0.25s ease,
    box-shadow 0.35s ease,
    background 0.35s ease;
  overflow: visible;
}

/* ✨ hover 시 내부에서 빛이 펑! 터짐 */
.ms-bubble:hover {
  transform: translateY(-8px) scale(1.12);
  background: radial-gradient(circle at 50% 45%, #ffffff, #666, #111);
  box-shadow:
    0 0 20px rgba(255, 255, 255, 0.6),
    0 0 45px rgba(255, 255, 255, 0.4),
    0 0 80px rgba(255, 255, 255, 0.2);
}

/* ✨ 빛의 후광이 퍼져나가는 효과 */
.ms-bubble::after {
  content: "";
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.15), transparent 70%);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.35s ease, transform 0.4s ease;
}

.ms-bubble:hover::after {
  opacity: 1;
  transform: scale(1.2);
}
/* 별가루 container */
.ms-bubble .sparkle {
  position: absolute;
  width: 6px;
  height: 6px;
  background: white;
  border-radius: 50%;
  opacity: 0;
  filter: blur(1px);
  animation: sparkleAnim 1.8s infinite ease-in-out;
}

/* 각 별을 개별적인 random path처럼 보이게 하기 */
.ms-bubble .sparkle:nth-child(1) { top: -10px; left: 20px; animation-delay: 0.1s; }
.ms-bubble .sparkle:nth-child(2) { top: 40px; left: -15px; animation-delay: 0.6s; }
.ms-bubble .sparkle:nth-child(3) { top: 55px; left: 40px; animation-delay: 1.1s; }

@keyframes sparkleAnim {
  0% { transform: scale(0.2); opacity: 0; }
  40% { transform: scale(1); opacity: 1; }
  80% { transform: scale(0.3); opacity: 0.3; }
  100% { transform: scale(0.1); opacity: 0; }
}
.ms-detail-area {
  max-width: 900px;
  margin: 24px auto 0;
}
/* 통계 박스 너비를 상세 카드와 동일하게 만들기 */
.ms-stats-bar {
  width: 100%;
  max-width: 100%;
  margin: 0 auto 20px auto;
}

/* 통계 글씨 크기 = 상세카드 (성별 여) 글씨 크기 */
.ms-stats-bar p {
  font-size: 16px;
  line-height: 1.5;
  color: #fff;
}
/* 통계 박스 아래 간격 */
.ms-stats-bar {
  margin-bottom: 40px !important;
}

/* 상세 카드 아래 간격 */
.ms-detail-card {
  margin-bottom: 40px !important;
}

/* 하단 버튼 그룹 아래 간격 */
.ms-bottom-actions {
  margin-bottom: 60px !important;
}

/* 전체~ㄱ~ㅎ 필터 버튼 위쪽 여백 */
.ms-filter-bar {
  margin-top: 40px !important;
}
/* ✅ 통계 박스와 상세 카드의 가로 너비를 완전히 통일 */
.ms-stats-bar {
  width: 100% !important;
  max-width: 960px !important;   /* 상세 카드와 같은 숫자로 맞추기 */
  margin: 0 auto 40px auto !important;  /* 가운데 정렬 + 아래 여백 */
}

.ms-detail-area {
  max-width: 960px !important;   /* 위랑 똑같이 */
  margin: 0 auto 40px auto !important;
}

/* 상세 카드가 래퍼 안에서 꽉 차도록 */
.ms-detail-card {
  width: 100%;
}
/* 컵 기본 모습 */
.ms-cup {
  position: relative;
  width: 54px;
  height: 72px;
  border-radius: 0 0 14px 14px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(to bottom, #555 0%, #777 50%, #444 100%);
  margin: 0 10px;
  cursor: pointer;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease,
    background 0.35s ease;
}

/* hover(마우스 올렸을 때) + 선택된 컵(.selected)이 될 때 같은 효과 */
.ms-cup:hover,
.ms-cup.selected {
  transform: translateY(-6px);
  border-color: rgba(255, 200, 120, 0.9);
  background: radial-gradient(circle at 50% 15%, #ffffff 0%, #ffe9b3 30%, #ffb347 55%, #4a3b2a 100%);
  box-shadow:
    0 0 16px rgba(255, 210, 140, 0.85),
    0 18px 36px rgba(0, 0, 0, 0.7);
}
/* 촛불 몸통 (초) */
.ms-cup::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  width: 22px;
  height: 30px;
  border-radius: 6px;
  background: linear-gradient(to bottom, #fff7e6 0%, #ffe1a6 50%, #ffbd6f 100%);
  box-shadow: 0 0 15px rgba(255, 210, 140, 0.8);
  opacity: 0; /* 기본은 꺼진 상태 */
  transition: opacity 0.25s ease;
  animation: candleGlow 1.2s infinite alternate ease-in-out;
  animation-play-state: paused; /* hover/selected 때만 움직이도록 */
}

/* 불꽃 */
.ms-cup::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 44px;
  transform: translateX(-50%);
  width: 12px;
  height: 18px;
  border-radius: 50% 50% 50% 50%;
  background: radial-gradient(
    circle at 50% 0%,
    #ffffff 0%,
    #ffe9a5 35%,
    #ff9d3b 65%,
    rgba(255, 140, 0, 0.0) 100%
  );
  box-shadow:
    0 0 14px rgba(255, 196, 125, 0.95),
    0 -4px 10px rgba(255, 255, 255, 0.5);
  opacity: 0; /* 기본은 안 보이게 */
  transition: opacity 0.25s ease;
  animation: flameFlicker 0.7s infinite alternate ease-in-out;
  animation-play-state: paused;
}

/* hover 또는 선택되었을 때 불이 켜지도록 */
.ms-cup:hover::before,
.ms-cup:hover::after,
.ms-cup.selected::before,
.ms-cup.selected::after {
  opacity: 1;
  animation-play-state: running;
}
/* 촛불 몸통 전체가 약간 커졌다 줄었다 하는 빛 번짐 */
@keyframes candleGlow {
  0% {
    transform: translateX(-50%) scale(0.96);
    box-shadow: 0 0 10px rgba(255, 210, 140, 0.6);
  }
  100% {
    transform: translateX(-50%) scale(1.03);
    box-shadow: 0 0 18px rgba(255, 230, 180, 0.95);
  }
}

/* 불꽃이 살짝 좌우로 흔들리는 느낌 */
@keyframes flameFlicker {
  0% {
    transform: translateX(-50%) translateY(0) scaleY(1);
    filter: blur(0.3px);
  }
  25% {
    transform: translateX(-52%) translateY(-1px) scaleY(1.06);
  }
  50% {
    transform: translateX(-49%) translateY(-2px) scaleY(0.95);
    filter: blur(0.6px);
  }
  75% {
    transform: translateX(-51%) translateY(-1px) scaleY(1.04);
  }
  100% {
    transform: translateX(-50%) translateY(0) scaleY(1);
    filter: blur(0.3px);
  }
}
/* =======================
/* ===== 남겨진 메시지들 레이아웃 ===== */
.ms-step-messages {
  max-width: 1100px;
  margin: 60px auto;
  padding: 0 20px 80px;
}

.ms-messages-caption {
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.95rem;
}

/* PC: 2열 그리드 */
.ms-messages-list {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

/* 메시지 카드 */
.ms-message-card {
  background: rgba(0, 0, 0, 0.55);
  border-radius: 10px;
  padding: 18px 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.ms-message-header {
  font-size: 1rem;       /* 닉네임 좀 더 크게 */
  font-weight: 600;
  margin-bottom: 8px;
  color: #ffffff;
}

.ms-message-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
}

/* 모바일: 1열 */
@media (max-width: 768px) {
  .ms-messages-list {
    grid-template-columns: 1fr;
  }
}
/* ============================
   기억해야 할 이름 – 상단 히어로 & 버튼
============================ */

.names-page-hero {
  padding: 80px 20px 30px;
}

.names-page-hero-inner {
  max-width: 960px;
  margin: 0 auto;
  text-align: left;
}

.names-page-kicker {
  font-size: 0.9rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #9ca3af;
  margin-bottom: 8px;
}

.names-page-title {
  font-size: 2.4rem;
  font-weight: 800;
  color: #111827;
  margin: 0 0 10px 0;
}

.names-page-sub {
  font-size: 1rem;
  color: #4b5563;
  max-width: 520px;
  line-height: 1.7;
  margin: 0 0 18px 0;
}

.names-message-top-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(90deg, #ff9f4a, #ffd76a);
  color: #111827;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(0,0,0,0.18);
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.2s ease;
}

.names-message-top-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(0,0,0,0.2);
  opacity: 0.95;
}

/* ============================
   연도별 이름 섹션(인트로+리스트)
============================ */

.name-year-section {
  max-width: 1040px;
  margin: 10px auto 40px;
}

.names-intro-block {
  background: #111827;
  color: #f9fafb;
  border-radius: 18px;
  padding: 22px 26px;
  margin-bottom: 24px;
  box-shadow: 0 18px 40px rgba(15,23,42,0.6);
}

.names-intro-block p {
  margin: 4px 0;
  line-height: 1.7;
}

/* 이름 리스트 전체 박스 */
.names-list-wrapper {
  background: #0f172a;
  border-radius: 18px;
  padding: 22px 26px;
  box-shadow: 0 18px 40px rgba(15,23,42,0.7);
  border: 1px solid rgba(148,163,184,0.4);
}

/* 실제 이름들 – 여러 컬럼 */
.names-list {
  font-size: 0.95rem;
  line-height: 1.8;
  color: #e5e7eb;
  column-count: 1;
  column-gap: 30px;
}

@media (min-width: 900px) {
  .names-list {
    column-count: 2;
  }
}

/* 맨 아래 설명 한 줄 */
.names-footer-note {
  margin-top: 16px;
  font-size: 0.9rem;
  color: #6b7280;
}

/* ============================
   추모의 말 – 폼 & 리스트
============================ */

.names-messages-wrapper {
  max-width: 960px;
  margin: 50px auto 80px;
  padding: 28px 26px 30px;
  border-radius: 18px;
  background: #020617;
  box-shadow: 0 20px 40px rgba(15,23,42,0.8);
  border: 1px solid rgba(148,163,184,0.5);
}

.names-messages-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: #f9fafb;
  margin: 0 0 14px 0;
}

.names-message-alert {
  margin: 0 0 10px 0;
  font-size: 0.9rem;
  color: #bbf7d0;
}

.names-message-form {
  margin-bottom: 18px;
}

.names-form-row {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

.names-form-row label {
  font-size: 0.85rem;
  color: #e5e7eb;
  margin-bottom: 4px;
}

.names-form-row input,
.names-form-row textarea {
  border-radius: 10px;
  border: 1px solid rgba(148,163,184,0.7);
  background: rgba(15,23,42,0.9);
  color: #f9fafb;
  padding: 8px 10px;
  font-size: 0.9rem;
}

.names-form-row input::placeholder,
.names-form-row textarea::placeholder {
  color: #6b7280;
}

.names-message-submit {
  margin-top: 4px;
  padding: 8px 18px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(90deg, #fbbf24, #f97316);
  color: #111827;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}

.names-message-submit:hover {
  opacity: 0.95;
}

/* 추모글 리스트 */

.names-message-list {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 420px;
  overflow-y: auto;
}

.names-message-item {
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(15,23,42,0.9);
  border: 1px solid rgba(55,65,81,0.8);
}

.names-message-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: #9ca3af;
  margin-bottom: 4px;
}

.names-message-author {
  font-weight: 600;
}

.names-message-content {
  font-size: 0.9rem;
  color: #e5e7eb;
  line-height: 1.6;
}

.names-message-empty {
  font-size: 0.9rem;
  color: #9ca3af;
}
/* 눈 캔버스 – 모든 페이지 공통 */
#snow-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;         /* 헤더보다 아래, 내용보다 살짝 아래/위는 상황에 맞게 조절 */
}
/* 153: '기억해야 할 이름' 페이지 전체 배경 어둡게 */
.page-id-153 {
  background: radial-gradient(circle at top, #151b2b 0%, #050814 55%, #02030b 100%);
  color: #f5f6ff;
}

/* 콘텐츠 영역 흰 배경 지우기 */
.page-id-153 .page-main,
.page-id-153 .page-inner {
  background: transparent;
}

/* 제목 더 잘 보이게 */
.page-id-153 .remember-names-hero-title,
.page-id-153 .remember-names-title,
.page-id-153 .page-title {
  color: #ffffff;
  text-shadow: 0 0 18px rgba(0, 0, 0, 0.6);
}
/* 어두운 배경용 헤더 */
.site-header.dark-header .menu-list a,
.site-header.dark-header .header-right a {
  color: #ffffff;
}
.names-cards-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap:16px;
  max-width: 920px;
  margin: 24px auto 0;
}
@media (max-width: 800px){
  .names-cards-grid{ grid-template-columns: 1fr; }
}
.names-card{
  border:1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.22);
  border-radius:14px;
  padding:18px;
  backdrop-filter: blur(6px);
}
.names-card-top{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
  margin-bottom:10px;
}
.names-card-name{ font-size:18px; font-weight:700; }
.names-card-age{ font-size:13px; opacity:.85; }
.names-card-meta{ font-size:13px; line-height:1.8; opacity:.9; }
.names-dedication{
  max-width: 920px;
  margin: 18px auto 18px;
  padding: 0 16px;
}

.names-dedication-inner{
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(135deg, rgba(255,210,160,.10), rgba(255,140,160,.06), rgba(0,0,0,.22));
  border-radius: 16px;
  padding: 18px 18px 16px;
  text-align: center;
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 30px rgba(0,0,0,.25);
  position: relative;
  overflow: hidden;
}

.names-dedication-inner:before{
  content:"";
  position:absolute;
  inset:-40%;
  background: radial-gradient(circle at 30% 30%, rgba(255,210,160,.18), transparent 55%);
  pointer-events:none;
}

.names-dedication-mark{
  font-size: 18px;
  opacity: .95;
  margin-bottom: 8px;
}

.names-dedication-text{
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  font-weight: 600;
  color: rgba(255,255,255,.95);
}

.names-dedication-sub{
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: .02em;
  color: rgba(255,255,255,.75);
}


.names-dedication-inner{
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(135deg, rgba(255,210,160,.10), rgba(255,140,160,.06), rgba(0,0,0,.22));
  border-radius: 16px;
  padding: 18px 18px 16px;
  text-align: center;
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 30px rgba(0,0,0,.25);
  position: relative;
  overflow: hidden;
}

.names-dedication-inner:before{
  content:"";
  position:absolute;
  inset:-40%;
  background: radial-gradient(circle at 30% 30%, rgba(255,210,160,.18), transparent 55%);
  pointer-events:none;
}

.names-dedication-mark{
  font-size: 18px;
  opacity: .95;
  margin-bottom: 8px;
}

.names-dedication-text{
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  font-weight: 600;
  color: rgba(255,255,255,.95);
}

.names-dedication-sub{
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: .02em;
  color: rgba(255,255,255,.75);
}


/* 실제 카드 모양 */
.names-dedication-inner {
  width: 100%;
  background: linear-gradient(
    135deg,
    rgba(255, 220, 180, 0.18),
    rgba(120, 140, 180, 0.18)
  );
  border-radius: 16px;
  padding: 28px 24px;
  text-align: center;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.15);
}
.names-dedication-inner {
  box-shadow: 0 20px 40px rgba(0,0,0,0.25);
}
/* 별 화면: ‘그 사람을 만나러 가기’ 버튼 */
.ms-step1-star #ms-go-step2 {
  background: #ffffff;
  color: #000000;
  border: none;
  font-weight: 600;
}

/* 호버 시 */
.ms-step1-star #ms-go-step2:hover {
  background: #eaeaea;
  color: #000000;
}
/* ✅ '기억해야 할 이름' 2025 탭 상단 안내 카드 정렬 고정 */
.names-intro-card{
  width: 100%;
  max-width: none;          /* 혹시 max-width로 줄어든 상태면 해제 */
  margin: 0 auto;           /* 가운데 정렬 */
  box-sizing: border-box;
}

/* ✅ 카드가 들어있는 부모가 flex면 왼쪽 정렬로 밀릴 수 있어서 가운데로 */
.name-tab-panel,
.name-tabs-panels,
.memorial-tabs-panels{
  box-sizing: border-box;
}

/* 만약 상단 카드가 flex 컨테이너 안에 있으면 이게 결정타 */
.name-tab-panel{
  display: flex;
  flex-direction: column;
  align-items: center;      /* 자식(상단 카드 포함) 가운데 기준 */
}

/* ✅ 아래 그리드(카드 리스트)도 같은 폭/기준으로 맞추기 */
.names-cards-grid{
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}


/* ✅ 전체 폭 기준 컨테이너: 가운데 + 동일 좌우 여백 */
.names-container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* ✅ 상단 안내 카드는 컨테이너 폭을 그대로 따라가게 */
.names-dedication{
  width: 100%;
  margin: 18px 0 24px;
  padding: 0;              /* <- 여기 중요! */
  box-sizing: border-box;
}

.names-dedication-inner{
  width: 100%;
  box-sizing: border-box;
}
.names-cards-grid{
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}
/* =========================
   ②단계: 초 올리기 버튼
========================= */
#ms-send-candle {
  background: #ffffff;
  color: #000000;
  border: none;
  font-weight: 600;
}

/* hover */
#ms-send-candle:hover {
  background: #eaeaea;
  color: #000000;
}
/* 🔹 모바일에서 컵·초가 문구를 가리지 않도록 조정 */
@media (max-width: 768px) {
  /* 문구 아래 여백 조금 주기 */
  .ms-step2 .ms-cup-label {
    margin-bottom: 16px;
  }

  /* 컵 전체 영역을 너무 위로 올려놨다면 내려주기 */
  .ms-step2 .ms-cup-area {
    margin-top: 12px;   /* 혹시 기존에 margin-top: -40px 이런 게 있으면 이 값이 덮어씀 */
  }

  /* 컵/초 자체 크기도 조금 줄이기 */
  .ms-step2 .ms-cup {
    transform: scale(0.8);   /* 0.7~0.9 사이로 취향에 맞게 조절 가능 */
    margin: 0 6px;
  }
}
/* 🔥 front-page에서 메뉴(메인내비) 텍스트를 흰색으로 */

.home .site-header a:hover,
.home #site-navigation a:hover {
    color: #ffe9a6 !important; /* 약하게 노란빛 */
}
.front-dark-bg .site-header a {
    color: #fff !important;
}
.home header.site-header {
    color: #fff !important;
}
/* 🔹 데스크톱(폭 801px 이상)에서만: 메뉴 글자 흰색 */
@media (min-width: 801px) {
  .home .site-header .site-nav a {
    color: #ffffff;
  }
}

/* 🔹 모바일(폭 800px 이하)에서: 메뉴 펼쳤을 때 흰 배경 + 검은 글자 */
@media (max-width: 800px) {
  .home .site-header .site-nav {
    background: #ffffff;
  }

  .home .site-header .site-nav a {
    color: #111111;
  }
}
.home .menu-toggle,
.home .menu-toggle span,
.home .menu-toggle i,
.home .menu-toggle svg {
  color: #ffffff !important;
  fill:  #ffffff !important;
}

.home .menu-toggle .bar,
.home .menu-toggle .line,
.home .menu-toggle .icon-line {
  background-color: #ffffff !important;
}
/* ===========================
   홈(프론트 페이지) 햄버거 아이콘 흰색으로
   =========================== */

/* 아이콘이 글자(☰) 형태일 때 */
.hamburger {
  color: #ffffff;     /* 아이콘 색을 흰색으로 */
}

/* 아이콘이 <span><span><span> 막대로 그려져 있을 때 */
.hamburger span,
.hamburger i {
  background-color: #ffffff;
}

/* 혹시 헤더에 .site-header--dark 같은 클래스가 있다면 거기서도 강제 흰색 */
.site-header,
.site-header * .hamburger {
  color: #ffffff;
}
/* ✅ 모바일에서 햄버거 메뉴 펼쳐졌을 때 – 흰 배경 + 검은 글자 강제 */
@media (max-width: 800px) {

  /* 모바일 드롭다운 박스 배경 */
  .home .mobile-menu {
    background: #ffffff;
  }

  /* 메뉴 글자 색을 검정으로 (위의 .home .site-header a !important 보다 더 구체 + !important) */
  .home .mobile-menu .mobile-menu-list a {
    color: #111111 !important;
  }

  .home .mobile-menu .mobile-menu-list a:hover {
    color: #333333 !important;
  }
}
/* ===============================
   기조와 요구 – 연도별 기조 카드
   =============================== */

.agenda-year-wrapper{
  max-width: 1100px;
  margin: 40px auto 80px;
  padding: 0 20px;
  box-sizing: border-box;
  color: #f7f7f7;
}

/* 상단 전체 기조 카드 */
.agenda-summary-card{
  border-radius: 20px;
  padding: 28px 26px 24px;
  background: radial-gradient(circle at 0% 0%, rgba(255,222,180,.16), transparent 60%)
              , rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.18);
  text-align: center;
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  margin-bottom: 32px;
}

.agenda-summary-label{
  margin: 0 0 6px;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
}

.agenda-summary-title{
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  color: #ffffff;
}

.agenda-summary-sub{
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255,255,255,.78);
}

/* 아래 3개 블럭 그리드 */
.agenda-grid{
  display: grid;
  gap: 20px;
}

/* 데스크탑이면 3열, 태블릿이면 2열 */
@media (min-width: 900px){
  .agenda-grid{
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
}
@media (min-width: 640px) and (max-width: 899px){
  .agenda-grid{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

/* 개별 블럭 카드 */
.agenda-block{
  border-radius: 16px;
  padding: 20px 18px 18px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 10px 26px rgba(0,0,0,.4);
}

.agenda-tag{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* 태그별 색 살짝 다르게 */
.agenda-tag-memory{
  background: rgba(255,220,180,.16);
  color: #ffd9a0;
}
.agenda-tag-housing{
  background: rgba(173,216,255,.16);
  color: #a7d8ff;
}
.agenda-tag-coexist{
  background: rgba(200,255,210,.14);
  color: #bdf5c8;
}

.agenda-block-title{
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
}

.agenda-list{
  margin: 0;
  padding-left: 1.1em;
  font-size: 13px;
  line-height: 1.8;
  color: rgba(255,255,255,.85);
}
.agenda-list li + li{
  margin-top: 4px;
}

/* 모바일 간격 조금 넉넉하게 */
@media (max-width: 600px){
  .agenda-year-wrapper{
    margin-top: 32px;
    margin-bottom: 60px;
  }
  .agenda-summary-card{
    padding: 22px 18px 20px;
  }
}
.ms-message-header{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
}

.ms-message-author{
  opacity: 0.9;
}

.ms-message-target{
  font-size: 12px;
  opacity: 0.7;
}
/* 남겨진 메시지 카드 헤더: 왼쪽에 작성자, 오른쪽에 'OOO 님께' */
.ms-message-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  font-size: 13px;
  opacity: 0.9;
}

.ms-message-author {
  font-weight: 600;
}

.ms-message-target {
  font-size: 12px;
  opacity: 0.75;
}
/* ================================
   기억해야 할 이름 – 상단 인트로 박스
   ================================ */

.memory-names-page {
  /* 가운데 정렬 기준 */
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px 0;
  box-sizing: border-box;
}

.memory-names-intro-box {
  /* 박스 자체를 가운데 놓기 */
  max-width: 900px;
  margin: 40px auto 40px;
  padding: 30px 40px;

  text-align: center;               /* ✅ 문단 전체 가운데 정렬 */
  line-height: 1.9;
  border-radius: 24px;

  /* 추모 분위기 그라데이션 + 반투명 */
  background: linear-gradient(
    135deg,
    rgba(255, 210, 180, 0.40),
    rgba(255, 170, 190, 0.32),
    rgba(20, 20, 40, 0.70)
  );
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);

  position: relative;
  overflow: hidden;
}

/* 부드러운 빛 확산 효과 */
.memory-names-intro-box::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(
    circle at 30% 20%,
    rgba(255, 240, 210, 0.5),
    transparent 60%
  );
  opacity: 0.7;
  pointer-events: none;
}

/* 텍스트 스타일 */
.memory-names-intro-box p {
  position: relative;
  margin: 0.4em 0;
  color: rgba(255, 255, 255, 0.96);
  font-size: 16px;
  z-index: 1;
}

/* 첫 번째 문단은 약간 더 강조 */
.memory-names-intro-box p:first-child {
  font-size: 17px;
  font-weight: 600;
}

/* 문단 사이 간격 조금 더 띄우기 */
.memory-names-intro-box p + p {
  margin-top: 1.1em;
}

/* 작은 화면에서는 패딩만 살짝 줄이기 */
@media (max-width: 768px) {
  .memory-names-intro-box {
    margin: 28px 12px 32px;
    padding: 24px 18px;
    border-radius: 18px;
  }

  .memory-names-intro-box p {
    font-size: 15px;
  }
}
/* =============================
   공통 추모 인트로 카드 스타일
   ============================= */

.memory-names-intro-box {
    max-width: 880px;
    margin: 40px auto 60px;
    padding: 40px 50px;
    border-radius: 18px;
    text-align: center;

    /* 2025 탭 스타일과 유사하게 */
    background: linear-gradient(
        135deg,
        rgba(255, 235, 215, 0.25),
        rgba(255, 205, 205, 0.15),
        rgba(40, 40, 50, 0.32)
    );
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
}

/* 내부 텍스트 */
.memory-names-intro-box p {
    margin: 10px 0;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.95); /* 잘 보이도록 약간 밝은 흰색 */
}

/* 모바일 최적화 */
@media (max-width: 768px) {
    .memory-names-intro-box {
        margin: 30px 16px 40px;
        padding: 28px 22px;
    }
    .memory-names-intro-box p {
        font-size: 16px;
        line-height: 1.6;
    }
}
/* 🌙 어두운 헤더를 쓰는 페이지들(프론트, 기억해야 할 이름, 기조와 요구) 공통 */

/* 상단 메뉴 텍스트 흰색 */
.front-dark-bg .site-header nav ul li a,
.front-dark-bg .menu-list li a,
.front-dark-bg .header-right .logo {
  color: #ffffff !important;
}

/* hover 시도 흰색 유지 or 살짝 노란빛 */
.front-dark-bg .site-header nav ul li a:hover,
.front-dark-bg .menu-list li a:hover {
  color: #ffe9a6 !important;
}

/* 햄버거 아이콘 흰색 */
.front-dark-bg .hamburger {
  color: #ffffff;
}

/* 만약 햄버거가 막대(span)로 되어 있으면 */
.front-dark-bg .hamburger span,
.front-dark-bg .hamburger i {
  background-color: #ffffff;
}

/* 모바일에서 메뉴 펼쳤을 때: 흰 배경 + 검은 글자 (지금처럼) */
@media (max-width: 768px) {
  .front-dark-bg .mobile-menu {
    background: #ffffff;
  }

  .front-dark-bg .mobile-menu-list a {
    color: #111111;
  }
}
/* 전체 묶음 폭 & 가운데 정렬 */
.agenda-year-wrapper {
  max-width: 1200px;
  margin: 80px auto 100px;
  padding: 0 24px;
  box-sizing: border-box;
}

/* 인트로 박스는 기존 names-dedication 디자인 재사용 */
.agenda-summary-card {
  text-align: center;
}

/* 작은 상단 라벨: 2025 전체 기조 */
.agenda-summary-label {
  margin: 0 0 6px;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: 0.85;
}

/* 큰 제목 */
.agenda-summary-title {
  margin: 4px 0 10px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
}

/* 부제 / 설명 */
.agenda-summary-sub {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  opacity: 0.9;
}
/* 세부 기조 카드들을 감싸는 영역 */
.agenda-grid {
  margin: 40px auto 0;
  max-width: 1100px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;  /* 가운데 정렬 */
  gap: 24px;                /* 카드 사이 간격 */
}

/* 개별 카드 모양 */
.agenda-block {
  flex: 1 1 320px;          /* 최소 320px, 넓으면 가로로 3개까지 */
  max-width: 360px;
  padding: 20px 22px 22px;
  border-radius: 18px;
  background: rgba(5, 9, 18, 0.92);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 16px 32px rgba(0,0,0,0.4);
  color: #f7f7f7;
  box-sizing: border-box;
}

/* 카드 상단의 '추모·주거·공존' 태그 */
.agenda-tag {
  display: inline-block;
  padding: 4px 10px;
  margin-bottom: 10px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: .06em;
  font-weight: 600;
  text-transform: uppercase;
}

/* 태그별 색상 살짝 다르게 */
.agenda-tag-memory {
  background: rgba(255, 210, 160, 0.22);
  color: #ffd18c;
}
.agenda-tag-housing {
  background: rgba(158, 209, 255, 0.22);
  color: #a5d3ff;
}
.agenda-tag-coexist {
  background: rgba(180, 255, 200, 0.18);
  color: #bdfbd0;
}

/* 카드 안 제목 & 내용 */
.agenda-block-title {
  margin: 4px 0 12px;
  font-size: 17px;
  line-height: 1.6;
}

.agenda-list {
  margin: 0;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.8;
}
/* ===========================
   어두운 배경 페이지용 헤더/메뉴 색
   (front page, 기억해야 할 이름, 기조와 요구)
   =========================== */

/* 데스크탑 메뉴 글자 */
.front-dark-bg .site-header nav ul li a,
.front-dark-bg .site-header .menu-list li a {
  color: #ffffff !important;
}

/* hover 시도 흰색 유지 + 살짝 노란빛 */
.front-dark-bg .site-header nav ul li a:hover,
.front-dark-bg .site-header .menu-list li a:hover {
  color: #ffe9a6 !important;
}

/* 모바일 상단 햄버거 아이콘 (접힌 상태) */
.front-dark-bg .hamburger {
  color: #ffffff !important;
}

/* 햄버거가 막대(span) 구조일 경우 대비 */
.front-dark-bg .hamburger span,
.front-dark-bg .hamburger i {
  background-color: #ffffff !important;
}
/* 🌙 어두운 배경 페이지(front-dark-bg)에서
   모바일(800px 이하) 드롭다운 메뉴는
   흰 배경 + 검정 글자로 보이게 */

@media (max-width: 800px) {

  /* 드롭다운 배경은 흰색 유지 */
  .front-dark-bg .mobile-menu {
    background: #ffffff;
  }

  /* 실제 메뉴 텍스트는 검정으로 강제 */
  .front-dark-bg .mobile-menu-list a {
    color: #000000 !important;
  }
}
/* ============================
   2022 이름 리스트 카드 디자인
   ============================ */

.memory-names-list-box {
  max-width: 960px;
  margin: 32px auto 80px;   /* 위/아래 여백 */
  padding: 0 20px;          /* 화면 가장자리와 거리 확보 */
  box-sizing: border-box;
}

.memory-names-list-inner {
  background: linear-gradient(
    145deg,
    rgba(0, 0, 0, 0.70),
    rgba(20, 24, 40, 0.90)
  );
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.45);
  padding: 28px 32px;        /* 👈 상·하 여백 동일하게 맞춤 */
  backdrop-filter: blur(8px);
  overflow: hidden;
}

/* 이름 텍스트 자체 스타일 */
.names-roll {
  margin: 0;
  font-size: 13px;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.9);
  text-align: left;          /* 가운데 정렬 원하면 'center' 로 바꾸면 됨 */
  word-break: keep-all;
}

/* 긴 줄이 너무 답답하다 싶으면 약간의 글자 간격 */
.names-roll {
  letter-spacing: 0.02em;
}

/* 모바일에서 가독성 높이기 */
@media (max-width: 768px) {
  .memory-names-list-inner {
    padding: 20px 18px;
  }
  .names-roll {
    font-size: 12px;
    line-height: 1.8;
  }
}
.memory-names-list-caption {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  margin-bottom: 14px;
}

#mobile-menu {
  display: none;
}

#mobile-menu.open {
  display: block;
}


/* ================================
 * 홈리스 기억의 계단 – 인트로(모바일)
 * ================================ */
@media (max-width: 768px) {
  /* 인트로 전체 정렬 */
  .ms-step-intro .ms-intro {
    text-align: center;
    padding: 32px 16px 40px;
  }

  /* 설명 문장: 줄바꿈이 자연스럽게 보이도록 폭을 조금 줄임 */
  .ms-step-intro .ms-intro-text {
    max-width: 22rem;        /* 좁게 잡아서 마지막 줄이 한 글자만 남지 않게 */
    margin: 16px auto 28px;  /* 버튼과의 간격 포함 */
    line-height: 1.7;
    font-size: 15px;
  }

  /* 장미 이모지 – 버튼과 충분히 떨어지도록 */
  .ms-step-intro .ms-intro-rose {
    margin-top: 32px;
    font-size: 52px;
  }
}
/* ================================
 * 기억의 계단 – 2단계 고인 카드(모바일)
 * ================================ */
@media (max-width: 768px) {
  /* 앱 전체에 좌우 동일 여백 */
  #memory-stairs-app {
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }

  /* 2단계 스텝 컨테이너도 혹시 모를 비대칭 제거 */
  .ms-step.ms-step2 {
    padding-left: 0;
    padding-right: 0;
  }

  /* 실제 카드 박스 – 양쪽 여백 동일 + 폭은 100% 안에서만 */
  .ms-step2 .ms-person-card {
    width: 100%;
    margin: 24px 0;          /* 좌우 마진은 0, 위아래만 */
    padding: 24px 20px;
    box-sizing: border-box;  /* 패딩까지 포함해서 100% */
    border-radius: 18px;
  }
}