/*
Theme Name: fra-hybrid-v3
Theme URI: https://vinaida.xyz
Description: Hybrid Traveler v3 – 개인별 우주/바다 테마 전환 (localStorage 기반).. 테마 변경 토글키를 이용하여 우주배경의 테마와 바닷속배경의 테마를 자유롭게 전환할 수 있습니다. 글 내용을 보다보면 선택된 테마에 따라 불규칙적으로 떨어지는 별똥별 또는 귀여운 젤리피쉬의 모습을 볼 수 있습니다. 순수 개인이 만든 블로그 목적용의 하이브리드(Hybrid Theme) 테마 입니다.
Author: vinaida
Version: 3.11
*/

/* ========================
   0) RESET / BASE
======================== */
*{ margin:0; padding:0; box-sizing:border-box; }

:root{
  --ocean-shallow: #0077b6;
  --ocean-mid:     #023e8a;
  --ocean-deep:    #03045e;
  --ocean-abyss:   #000814;
  --cyan-glow:     rgba(0,200,255,0.7);
  --text-bright:   rgba(200,240,255,0.92);
  --text-mid:      rgba(160,216,239,0.82);
  --text-dim:      rgba(100,180,210,0.65);
  --glass-bg:      rgba(0,20,50,0.3);
  --glass-border:  rgba(0,200,255,0.15);
}

html{ scroll-behavior:smooth; }

body{
  font-family: 'Georgia', 'Noto Serif KR', serif;
  background: var(--ocean-abyss);
  color: var(--text-bright);
  line-height:1.7;
}

a{ color: var(--cyan-glow); text-decoration:none; }
a:hover{ color:#fff; text-decoration:underline; }

h1,h2,h3{ font-weight:600; letter-spacing:-0.02em; color:var(--text-bright); }
p{ color:var(--text-mid); line-height:1.8; }

/* ========================
   1) CONTAINER
======================== */
.container{ max-width:1200px; margin:0 auto; padding:0 24px; }

/* ========================
   2) HEADER
======================== */
.site-header{
  padding:22px 0;
  background:none;
  backdrop-filter:blur(0px);
  border-bottom:0px solid rgba(0, 200, 255, 0);
}
.site-header .container{ display:flex; justify-content:space-between; align-items:center; }
.site-title a{ font-size:20px; font-weight:700; color:var(--text-bright) !important; letter-spacing:0.04em; }

.main-nav ul{ list-style:none; display:flex; gap:20px; }
.main-nav a{ font-size:17px; color:var(--text-mid); padding:6px 0; }
.main-nav a:hover{ color:#fff; text-decoration:none; }

/* 홈에서 헤더 투명 */
.home .site-header{
  position:absolute; top:0; left:0; right:0;
  background:transparent !important;
  border-bottom:0 !important;
  z-index:50;
}
/*.home .main-nav{ display:none !important; } */

/* ========================
   3) HERO – 바닷속 스크롤 여정
======================== */
.hero-thought{
  position:relative;
  height:200vh;
  overflow:hidden;
  background: linear-gradient(180deg, var(--ocean-shallow), var(--ocean-deep));

  --hero-fade:1;
  --sub-o:0;
  --sub-s:0.94;
  --sub-t-o:0;
  --sub-t-b:12px;
  --creatures-o:0;
  --creatures-s:0.94;
  --creatures-ty:100px;  /* ✅ 아래에서 시작 */
  --earth-o:0;
  --earth-s:0.96;
  --earth-t-o:0;
  --earth-t-b:10px;
  --stars-o:0;
  --stars-s:0.96;
  --stars-ty:100px;  /* ✅ 아래에서 시작 */
}

/* 카테고리 페이지에서는 히어로 짧게 */
.page .hero-thought,
.hero-world{
  height:120vh;  /* ✅ 200vh → 70vh로 단축 */
  min-height:500px;
}

/* 홈 페이지는 원래대로 길게 유지 */
.home .hero-thought{
  height:200vh;
}

/* 바다 배경 레이어 */
.hero-bg{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(180deg,
      rgba(0,119,182,0.85) 0%,
      rgba(2,62,138,0.90) 40%,
      rgba(3,4,94,0.92)   70%,
      rgba(0,8,20,0.97)   100%
    );
  animation: oceanDepth 20s ease-in-out infinite;
  opacity: var(--hero-fade);
  transition: opacity .6s ease;

}

@keyframes oceanDepth{
  0%,100%{ filter:brightness(1) hue-rotate(0deg); }
  50%    { filter:brightness(1.08) hue-rotate(6deg); }
}

/* 물속 빛 굴절 */
.hero-thought::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    repeating-linear-gradient(
      112deg,
      transparent 0%,
      rgba(0, 200, 255, 0.151) 1.5%,
      transparent 3%,
      transparent 8%
    );
  animation: lightCaustics 10s ease-in-out infinite;
  opacity: var(--hero-fade);
}

@keyframes lightCaustics{
  0%,100%{ transform:scaleX(1) skewX(0deg); opacity:.5; }
  30%    { transform:scaleX(1.02) skewX(2deg); opacity:.8; }
  60%    { transform:scaleX(0.98) skewX(-1.5deg); opacity:.6; }
}


/* ✅ 스크롤 아웃 시(최근글/본문 영역 진입) 히어로 배경을 빠르게 페이드아웃 */
.hero-thought.hero-out{
  --hero-fade: 0;
}
/* 거품 */
.bubble{
  position:fixed;
  border-radius:50%;
  background:rgba(180,230,255,0.12);
  border:1px solid rgba(100,200,255,0.3);
  pointer-events:none;
  z-index:2;
  animation: bubbleRise linear infinite;
}
@keyframes bubbleRise{
  0%  { transform:translateY(0) translateX(0); opacity:.7; }
  50% { transform:translateY(-45vh) translateX(6px); opacity:.4; }
  100%{ transform:translateY(-100vh) translateX(-3px); opacity:0; }
}

/* sticky 패널 */
.hero-inner{
  position:sticky;
  top:0;
  height:100vh;
  display:grid;
  align-items:center;
  padding:clamp(28px,5vw,64px);
  z-index:5;
}

/* 스크롤 힌트 */
.hero-hint{
  position:absolute;
  bottom:36px;
  left:50%;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:6px;
  opacity:.6;
}
.hint-dot{
  width:6px; height:6px; border-radius:50%;
  background:rgba(0,200,255,0.9);
  animation:hintBob 1.6s ease-in-out infinite;
}
@keyframes hintBob{
  0%,100%{ transform:translateY(0); opacity:.5; }
  50%    { transform:translateY(5px); opacity:1; }
}
.hint-text{ font-size:11px; letter-spacing:.1em; color:rgba(0,200,255,.6); }

/* 히어로 문장 */
.hero-lines{
  max-width:860px;
  padding-top:35vh;
  margin-left:clamp(18px,6vw,110px);
}
.hero-line{ margin:0; line-height:1.2; }
.hero-line.line-1{
  font-size:clamp(28px,5vw,56px);
  font-weight:700;
  color:#f5f6f7ec;
  text-shadow:0 10px 40px rgba(0,0,0,.7), 0 0 60px rgba(0,200,255,.2);
}
.hero-line.line-2,
.hero-line.line-3{
  margin-top:24px;
  font-size:clamp(15px,2.2vw,22px);
  font-weight:400;
  color:rgba(160,216,239,.85);
  text-shadow:0 8px 30px rgba(0,0,0,.6);
  opacity:0; transform:translateY(14px); filter:blur(3px);
  transition:opacity .6s ease, transform .6s ease, filter .6s ease;
}
.hero-line.is-visible{ opacity:1; transform:translateY(0); filter:blur(0); }

/* ========================
   잠수함
======================== */
#astro-overlay,
.hero-sub{
  position:fixed;
  left:70%; top:52%;
  transform:translate(-50%,-50%);
  z-index:6;
  pointer-events:none;
  width:min(600px,55vw);
  opacity:var(--sub-o);
  transition:opacity .4s linear;
}

/* ✅ 바다생물 이미지 위치 */
#ball-wrap{
  position:absolute;
  left:50%;
  top:48%;
  transform:translate(-50%, -50%) translateX(160px) translateY(-15px);  /* 정중앙 */
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.35));
  animation:ballFloat 3.1s ease-in-out infinite;
}

#ball-img{
  width:auto;  /* 크기 조절 */
  height:auto;
  display:block;
}

@keyframes ballFloat{
  0%,100%{ transform:translate(-50%, -50%) translateX(0px) translateY(-15px) translateY(0); }
  50%    { transform:translate(-50%, -50%) translateX(0px) translateY(-15px) translateY(-14px); }
}

#astro-img,
.hero-sub img{
  width:100%; height:auto; display:block;
  filter:
    drop-shadow(0 0 30px rgba(0,200,255,.5))
    drop-shadow(0 0 80px rgba(0,100,200,.25))
    drop-shadow(0 30px 80px rgba(0,0,0,.6));
  animation: subFloat 5s ease-in-out infinite;
  transform:scale(var(--sub-s));
}
@keyframes subFloat{
  0%,100%{ transform:scale(var(--sub-s)) translateY(0) rotate(-.5deg); }
  50%    { transform:scale(var(--sub-s)) translateY(-14px) rotate(.5deg); }
}

/* 잠수함 타이틀 */
.hero-sub-title{
  position:fixed;
  left:55%; top:52%;
  transform:translate(-50%,-50%);
  z-index:7;
  pointer-events:none;
  text-align:center;
  width:min(720px,86vw);
  opacity:var(--sub-t-o);
  filter:blur(var(--sub-t-b));
  transition:opacity .4s linear, filter .4s linear;
}
.sub-title-main{
  margin:0;
  font-size:clamp(20px,3.2vw,38px);
  font-weight:700;
  color:rgba(200,240,255,.92);
  text-shadow:0 12px 40px rgba(0,0,0,.8), 0 0 60px rgba(0,200,255,.3);
}
.sub-title-sub{
  margin:10px 0 0;
  font-size:clamp(13px,1.6vw,17px);
  color:rgba(160,216,239,.78);
  text-shadow:0 8px 30px rgba(0,0,0,.7);
}

/* ========================
   바다생물 네비게이션
======================== */
.hero-creature-nav,
.hero-star-nav{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  visibility: hidden;  /* ✅ 기본적으로 완전히 숨김 */
}

/* opacity가 0보다 크면 보이게 */
.hero-creature-nav,
.hero-star-nav{
  transition: opacity 0.4s linear, visibility 0s 0.4s;
}

.hero-creature-nav.is-active,
.hero-star-nav.is-active{
  visibility: visible !important;  /* ✅ 활성화되면 보이게 */
  transition: opacity 1.4s linear, visibility 0s;
}

.creature-link,
.star-link{
  position:absolute;
  left:50%; top:50%;
  pointer-events:none;  /* ✅ 기본은 클릭 불가 */
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  user-select:none;
  cursor:default;  /* ✅ 기본 커서 */
  opacity:var(--creatures-o);
  transform:
    translate(-50%, calc(-50% + var(--creatures-ty, 100px)))
    rotate(var(--ang))
    translateX(var(--rad))
    rotate(calc(var(--ang) * -1))
    scale(var(--creatures-s,1));
  transition:opacity .4s linear, transform 0.6s ease-out;
  animation:creatureFloat 6s ease-in-out infinite;
}

.creature-2,.star-2{ animation-delay:.7s; }
.creature-3,.star-3{ animation-delay:1.4s; }
.creature-4,.star-4{ animation-delay:2.1s; }
.creature-5,.star-5{ animation-delay:1.0s; }

.creature-1,.star-1{ --ang:-35deg; --rad:clamp(200px,28vw,420px); }
.creature-2,.star-2{ --ang: 20deg; --rad:clamp(180px,25vw,370px); }
.creature-3,.star-3{ --ang: 95deg; --rad:clamp(170px,23vw,340px); }
.creature-4,.star-4{ --ang:155deg; --rad:clamp(190px,26vw,390px); }
.creature-5,.star-5{ --ang:230deg; --rad:clamp(190px,26vw,390px); }

@keyframes creatureFloat{
  0%,100%{
    transform:
      translate(-50%, calc(-50% + var(--creatures-ty, 100px)))
      rotate(var(--ang))
      translateX(var(--rad))
      rotate(calc(var(--ang) * -1))
      scale(var(--creatures-s,1));
  }
  50%{
    transform:
      translate(-50%, calc(-50% + var(--creatures-ty, 100px)))
      rotate(var(--ang))
      translateX(calc(var(--rad) + 14px))
      rotate(calc(var(--ang) * -1))
      scale(calc(var(--creatures-s,.96) + .02));
  }
}

/* 기본 스타일 (공통) */
.creature-dot,
.star-dot{
  width:auto;
  height: 150px;  /* ✅ 기본 크기 */
  overflow:visible;
  border:none;
  background:transparent;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.6));
}

.creature-dot img,
.star-dot img{ 
  width:100%; 
  height:100%; 
  object-fit:contain;  /* ✅ cover → contain으로 변경 (비율 유지) */
  display:block; 
}

/* ✅ 각 생물별로 다른 크기 지정 */
.creature-1 .creature-dot,
.star-1 .star-dot { 
  height: 420px;  /* something - 상어 */
}

.creature-2 .creature-dot,
.star-2 .star-dot { 
  height: 220px;  /* anything - 거북이 */
}

.creature-3 .creature-dot,
.star-3 .star-dot { 
  height: 430px;  /* nothing - 니모 */
}

.creature-4 .creature-dot,
.star-4 .star-dot { 
  height: 160px;  /* whatelse - 산호초 */
}

.creature-5 .creature-dot,
.star-5 .star-dot { 
  height: 300px;  /* whatever - 고래(제일 크게!) */
}

.creature-label,
.star-label{
  font-size:13px;
  letter-spacing:.04em;
  color:rgba(200,240,255,.78);
  text-shadow:0 4px 16px rgba(0,0,0,.9), 0 0 16px rgba(0,200,255,.3);
}

/* ========================
   HOME LATEST
======================== */
.home-latest{
  position:relative;
  z-index:10;
  padding:100px 0 140px;
  background:none;
}
.home-latest-title{
  font-size:26px; font-weight:600;
  color:rgba(200,240,255,.9);
  margin-bottom:32px;
}
.home-latest-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}
.home-latest-card{
  border-radius:16px;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(8px);
  overflow:hidden;
  transition:transform .4s ease, box-shadow .4s ease;
}
.home-latest-card:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 60px rgba(0,0,0,.5), 0 0 30px rgba(0,200,255,.1);
}
.home-latest-link{ display:block; color:inherit; text-decoration:none; }
.home-latest-body{ padding:18px; }
.home-latest-title-sm{ font-size:17px; margin-bottom:6px; color:var(--text-bright); }
.home-latest-date{ font-size:12px; color:var(--text-dim); }
.home-latest-excerpt{ margin-top:8px; font-size:14px; color:var(--text-mid); line-height:1.6; }

/* ========================
   LOGBOOK HERO (single/page)
======================== */
.logbook-hero{
  position:relative;
  overflow:hidden;
  padding:110px 0 50px;
}
.logbook-bg{
  position:absolute; inset:0;
  background:none;
}
.logbook-inner{
  position:relative; z-index:2;
  max-width:1100px; margin:0 auto; padding:30px 32px;
  background:rgba(0, 15, 40, 0);
  border:1px solid rgba(0,200,255,.12);
  border-radius:20px;
  backdrop-filter:blur(3px);
  box-shadow:0 24px 80px rgba(0, 0, 0, 0);
}
.logbook-kicker{
  font-size:11px; letter-spacing:.18em;
  color:rgba(0,200,255,.7); margin-bottom:8px;
}
.logbook-title{
  font-size:clamp(26px,4vw,46px);
  color:rgba(200,240,255,.92);
  line-height:1.15;
}
.logbook-meta{ font-size:12px; color:var(--text-dim); margin-top:10px; }

/* ========================
   SINGLE LAYOUT
======================== */
body.single,
body.page{
  background:linear-gradient(180deg,
    var(--ocean-shallow) 0%,
    var(--ocean-deep)    40%,
    var(--ocean-abyss)   100%
  ) fixed !important;
}

.single-layout,
.page-layout{
  max-width:1400px; margin:0 auto;
  padding:0 40px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 340px;
  gap:56px;
  align-items:start;
}

.single-main,
.category-page{
  background:rgba(0, 26, 71, 0.096);
  border:1px solid rgba(0,200,255,.12);
  border-radius:20px;
  backdrop-filter:blur(2.5px);
  padding:28px;
  margin-top:24px;
}

.single-content p,
.single-content li{ color:rgba(240, 245, 247, 0.85); }

.single-title{ font-size:clamp(22px,3vw,38px); color:var(--text-bright); margin-bottom:8px; }
.single-meta{ font-size:12px; color:var(--text-dim); margin-bottom:20px; }

.single-featured{ text-align:center; margin:18px 0 24px; }
.single-featured img{
  width:min(480px,100%); height:auto; border-radius:16px; display:inline-block;
  box-shadow:0 24px 80px rgba(0, 0, 0, 0), 0 0 40px rgba(0, 200, 255, 0);
}

/* 이전/다음 */
.post-nav{
  display:flex; justify-content:space-between; gap:12px;
  margin-top:56px; padding:16px;
  background:rgba(0,20,40,.4);
  border:1px solid rgba(0,200,255,.12);
  border-radius:14px; backdrop-filter:blur(6px);
}
.post-nav a{
  display:block; padding:12px 16px; border-radius:10px;
  color:rgba(180,230,255,.9);
  background:rgba(0,200,255,.06);
  transition:all .25s ease;
}
.post-nav a:hover{ text-decoration:none; background:rgba(0,200,255,.15); }
.post-nav-prev{ text-align:left; }
.post-nav-next{ text-align:right; }

/* ========================
   SIDEBAR
======================== */
.page-sidebar,
.single-sidebar{ margin-top:24px; }

.sidebar-box{
  background:rgba(0, 15, 40, 0.164) !important;
  border:1px solid rgba(0,200,255,.12) !important;
  border-radius:16px;
  backdrop-filter:blur(3px);
  padding:16px;
}
.sidebar-title{
  font-size:11px; letter-spacing:.14em;
  color:rgba(0,200,255,.65); margin-bottom:12px;
}
.sidebar-post-list{ list-style:none; padding:0; }
.sidebar-post-list li{
  display:grid; grid-template-columns:1fr auto; gap:8px;
  padding:8px 0; border-top:1px solid rgba(0,200,255,.08);
}
.sidebar-post-list li:first-child{ border-top:0; }
.sidebar-post-list a{ color:var(--text-mid); font-size:14px; }
.sidebar-post-list a:hover{ color:#fff; text-decoration:none; }
.sidebar-date{ font-size:12px; color:var(--text-dim); white-space:nowrap; }

/* ========================
   CATEGORY PAGE
======================== */
.page-title{ font-size:36px; margin-bottom:24px; color:var(--text-bright); }
.post-list{ display:grid; gap:12px; }
.post-row{
  display:grid; grid-template-columns:90px 1fr; gap:12px;
  padding:12px 0; border-bottom:1px solid rgba(0,200,255,.08);
}
.post-row.no-thumb{ grid-template-columns:1fr; }
.post-row.no-thumb .post-row-thumb{ display:none; }
.post-row-thumb img{ width:100%; height:68px; object-fit:cover; border-radius:8px; display:block; }
.post-row-title a{ color:rgba(100,210,255,.9); font-size:19px; }
.post-row-title a:hover{ color:#fff; }
.post-row-date{ font-size:12px; color:var(--text-dim); white-space:nowrap; }
.post-row-excerpt{ font-size:15px; color: #fdfcfcd3; line-height:1.8; margin-top:4px; }

/* anything 카드 그리드 */
.anything-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px;
}
.any-card{
  border-radius:14px; overflow:hidden;
  background:rgba(0,20,50,.4);
  border:1px solid rgba(0,200,255,.15);
}
.any-card-thumb{ display:block; width:100%; aspect-ratio:4/3; }
.any-card-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.any-card-body{ padding:14px; }
.any-card-title a{ color:rgba(100,210,255,.9); font-size:19px; }
.any-card-title a:hover{ color:#fff; }
.any-card-meta{ font-size:13px; color:var(--text-dim); margin-bottom:8px; }
.any-card-excerpt{ font-size:14px; color: #f8f6f6d2; line-height:1.6; }

/* ========================
   WORLD HOME LINK
======================== */
a.world-home-link{
  display:inline-block; margin:20px 0 0 32px;
  color:rgba(0,200,255,.7) !important;
  letter-spacing:.04em; font-size:14px;
}
a.world-home-link:hover{ color:#fff !important; text-decoration:none; }

/* ========================
   POST AFTERGLOW
======================== */
.post-afterglow{
  text-align:center; padding:80px 24px 100px;
}
.afterglow-line{
  font-size:17px; line-height:1.9; letter-spacing:.02em;
  color:rgba(220, 222, 223, 0.8);
}
.afterglow-link{
  font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(0,200,255,.6);
}
.afterglow-link::after{
  content:""; display:block; height:1px;
  background:rgba(0,200,255,.4); margin-top:6px; opacity:.4;
  transition:opacity .3s ease;
}
.afterglow-link:hover::after{ opacity:.9; }
.afterglow-actions{ margin-top:36px; }

/* ========================
   COMMENTS
======================== */
.space-comments{
  margin-top:60px; padding:32px;
  background:rgba(0,20,40,.3);
  border:1px solid rgba(0,200,255,.1);
  border-radius:16px; backdrop-filter:blur(8px);
}
.space-comments h2{ color:var(--text-bright); margin-bottom:24px; }
.comment-respond label,
.comment-respond p,
.comment-notes,
.required-field-message{ color:rgba(160,216,239,.8); }
.comment-form textarea,
.comment-form input[type="text"],
.comment-form input[type="email"]{
  width:100%; background:rgba(0,10,30,.5);
  border:1px solid rgba(0,200,255,.2); border-radius:10px;
  padding:10px 12px; color:var(--text-bright);
}
.space-comment-btn{
  margin-top:12px; padding:10px 24px;
  background:rgba(0,200,255,.1);
  border:1px solid rgba(0,200,255,.25);
  color:var(--text-bright); border-radius:999px; cursor:pointer;
  transition:all .3s ease;
}
.space-comment-btn:hover{ background:rgba(0,200,255,.25); }

/* ========================
   FOOTER
======================== */
.site-footer{
  margin-top:80px; padding:60px 24px 44px;
  background:linear-gradient(180deg, transparent, rgba(0,8,20,.96));
  color:var(--text-dim);
}
.footer-inner{ max-width:1200px; margin:0 auto; text-align:center; }
.footer-title{ font-size:17px; letter-spacing:.08em; color:var(--text-bright); }
.footer-tagline{ margin-top:8px; font-size:12px; color:rgba(0,200,255,.5); }
.footer-meta{ margin-top:32px; font-size:11px; color:var(--text-dim); }

/* ========================
   RESPONSIVE
======================== */
@media(max-width:1024px){
  .single-layout,.page-layout{ grid-template-columns:1fr; padding:0 20px; }
  .anything-grid{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:768px){
  .home-latest-grid{ grid-template-columns:repeat(2,1fr); }
  .post-nav{ flex-direction:column; }
  .creature-label,.star-label{ display:none; }
  .creature-dot,.star-dot{ width:48px; height:48px; }
}
@media(max-width:640px){
  .anything-grid{ grid-template-columns:1fr; }
  .home-latest-grid{ grid-template-columns:1fr; }
}
@media(prefers-reduced-motion:reduce){
  .hero-bg,*{ animation:none !important; transition:none !important; }
}

/* ========================
   SINGLE: 제목 중복 제거 + 이미지 크기 조정
======================== */

/* 본문 안의 제목/메타 숨기기 (상단 로그북 히어로에만 표시) */
.single-main > .single-title,
.single-main > .single-meta{
  display:none;
}

/* 대표 이미지 크기 조정 */
.single-featured img{
  max-width:400px;
  max-height:300px;
  width:auto;
  height:auto;
  object-fit:contain;  /* 비율 유지 */
}

/* ========================
   SINGLE: 바닷속 배경
======================== */

/* 포스트 상세 페이지 전용 배경 */
body.single{
  background: 
    url('images/undersea3.png') 
    center/cover 
    fixed 
    no-repeat !important;
}

/* 배경 위에 살짝 어두운 오버레이 (가독성 향상) */
body.single::before{
  content:"";
  position:fixed;
  inset:0;
  background:rgba(0, 10, 20, 0.171);  /* 투명도 조절 가능 */
  z-index:-1;
  pointer-events:none;
}

/* 로그북 히어로 배경 제거 (중복 방지) */
.single .logbook-bg{
  display:none !important;
}

/* 본문/사이드바 패널 살짝 더 불투명하게 (가독성) */
body.single .single-main{
  background:rgba(0, 15, 40, 0.274) !important;
  backdrop-filter:blur(5px);
}

body.single .single-sidebar,
body.single .sidebar-box{
  background:rgba(0, 15, 40, 0.089) !important;
  backdrop-filter:blur(5px);
}

/* ========================
   PAGE: 카테고리 페이지 전체 배경
======================== */

/* 페이지 전체 배경 (싱글처럼) */
body.page{
  background: 
    url('images/undersea3.png') 
    center/cover 
    fixed 
    no-repeat !important;
}

/* 배경 위 어두운 오버레이 */
body.page::before{
  content:"";
  position:fixed;
  inset:0;
  background:rgba(0,10,20,0.30);
  z-index:-1;
  pointer-events:none;
}

/* 히어로는 그대로 파란색 유지 */
.page .hero-thought,
.page .hero-bg{
  background:linear-gradient(180deg, var(--ocean-shallow), var(--ocean-deep)) !important;
}

/* 글목록/사이드바 투명하게 */
.page-layout .category-page,
.page-layout .page-sidebar{
  background:rgba(0,15,40,.25) !important;
  backdrop-filter:blur(8px);
}

/* ========================
   PAGE: 자연스러운 배경 전환
======================== */

/* 페이지 전체 배경 */
body.page{
  background: 
    url('images/undersea3.png') 
    center/cover 
    fixed 
    no-repeat !important;
}

/* 히어로 영역 */
.page .hero-thought{
  background:linear-gradient(180deg, 
    var(--ocean-shallow) 0%, 
    var(--ocean-deep) 45%,
    transparent 80%  /* ✅ 더 빨리 투명 */
  ) !important;
}

/* 히어로 배경 레이어 */
.page .hero-bg{
  background:linear-gradient(180deg,
    rgba(0,119,182,0.95) 0%,
    rgba(2,62,138,0.90) 40%,
    rgba(3,4,94,0.55)   55%,
    rgba(0,8,20,0.18)   70%,
    transparent 85%  /* ✅ 더 빨리 투명 */
  ) !important;
}

/* body 오버레이 (가독성) */
body.page::before{
  content:"";
  position:fixed;
  inset:0;
  background:rgba(0,10,20,0.25);
  z-index:-1;
  pointer-events:none;
}

/* 글목록 투명하게 */
.page-layout .category-page,
.page-layout .page-sidebar{
  background:rgba(0,15,40,.25) !important;
  backdrop-filter:blur(8px);
}
/* ============================================================
   THEME TOGGLE BUTTON - Ocean → Space
============================================================ */

.theme-toggle-wrapper {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 999;
}

.theme-toggle-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: rgba(0, 20, 40, 0.062);
  border: 2px solid rgba(0, 200, 255, 0.5);
  border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(2px);
  transition: all 0.3s ease;
  font-size: 13px;
  font-weight: 500;
  color: rgba(0, 255, 200, 1);
  box-shadow: 0 4px 20px rgba(0, 200, 255, 0.2);
}

.theme-toggle-btn:hover {
  background: rgba(0, 30, 60, 0.212);
  border-color: rgba(0, 200, 255, 0.8);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0, 200, 255, 0.4);
}

.theme-toggle-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.toggle-icon {
  font-size: 20px;
  line-height: 1;
}

.toggle-text {
  letter-spacing: 0.02em;
  text-shadow: 0 0 10px rgba(0, 255, 200, 0.5);
}

@media (max-width: 768px) {
  .theme-toggle-btn {
    padding: 10px 18px;
    font-size: 14px;
  }
  
  .toggle-icon {
    font-size: 18px;
  }
}
/* ============================================================
   HYBRID THEME - Space & Ocean Toggle System v3
   개인별 localStorage 기반 테마 전환
============================================================ */

/* ===== 1) TOGGLE BUTTON ===== */
.theme-toggle {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 999;
}

.toggle-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background: rgba(0, 20, 40, 0.253);
  border: 2px solid rgba(0, 200, 255, 0.4);
  border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(2px);
  transition: all 0.3s ease;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.toggle-btn:hover {
  background: rgba(0, 30, 60, 0.267);
  border-color: rgba(0, 200, 255, 0.7);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 200, 255, 0.3);
}

.toggle-text {
  color: rgba(180, 230, 255, 0.5);
  transition: all 0.3s ease;
}

.toggle-text.active {
  color: rgba(0, 255, 200, 1);
  text-shadow: 0 0 12px rgba(0, 255, 200, 0.6);
}

/* ===== 2) MODE VISIBILITY - 기본: 모두 숨김 ===== */
.space-mode-only,
.ocean-mode-only {
  display: none !important;
}

/* 우주 모드 활성화 */
body.theme-space .space-mode-only,
html.theme-space .space-mode-only {
  display: block !important;
}

/* 바다 모드 활성화 */
body.theme-ocean .ocean-mode-only,
html.theme-ocean .ocean-mode-only {
  display: block !important;
}

/* ===== 3) BACKGROUND SWITCHING ===== */

/* 바다 배경 */
.hero-bg.ocean-mode-only {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(0,119,182,0.85) 0%,
    rgba(2,62,138,0.90) 40%,
    rgba(3,4,94,0.92) 70%,
    rgba(0,8,20,0.97) 100%
  );
  animation: oceanDepth 20s ease-in-out infinite;
}

@keyframes oceanDepth{
  0%,100%{ filter:brightness(1) hue-rotate(0deg); }
  50%    { filter:brightness(1.08) hue-rotate(6deg); }
}

/* 우주 배경 */
.hero-bg-space.space-mode-only {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url('https://vinaida.xyz/wp-content/uploads/2026/02/space11.webp') center/cover no-repeat fixed;
}

/* 물속 빛 굴절 (바다 모드만) */
body.theme-ocean .hero-thought::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    repeating-linear-gradient(
      112deg,
      transparent 0%,
      rgba(0,200,255,0.04) 1.5%,
      transparent 3%,
      transparent 8%
    );
  animation: lightCaustics 10s ease-in-out infinite;
}

@keyframes lightCaustics{
  0%,100%{ transform:scaleX(1) skewX(0deg); opacity:.5; }
  30%    { transform:scaleX(1.02) skewX(2deg); opacity:.8; }
  60%    { transform:scaleX(0.98) skewX(-1.5deg); opacity:.6; }
}

/* ===== 4) SPACE MODE - 우주 전용 스타일 ===== */

/* Warp Layer */
.warp-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background: repeating-linear-gradient(
    0deg,
    transparent 0%,
    rgba(255, 255, 255, 0.02) 1.2%,
    transparent 2.5%,
    transparent 10%
  );
  animation: warpScroll 1.8s linear infinite;
}

@keyframes warpScroll {
  from { transform: translateY(0); }
  to { transform: translateY(40px); }
}

/* Hero Earth */
.hero-earth {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
  pointer-events: none;
  text-align: center;
  width: min(750px, 80vw);
  opacity: var(--earth-o, 0);
  transition: opacity 0.4s linear;
}

.hero-earth > img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 0 60px rgba(100, 200, 255, 0.4))
          drop-shadow(0 30px 80px rgba(0, 0, 0, 0.7));
  transform: scale(var(--earth-s, 0.96));
  animation: earthFloat 8s ease-in-out infinite;
}

@keyframes earthFloat {
  0%, 100% { transform: scale(var(--earth-s, 0.96)) translateY(0) rotate(-0.3deg); }
  50% { transform: scale(var(--earth-s, 0.96)) translateY(-18px) rotate(0.3deg); }
}

.hero-earth-title {
  position: absolute;
  left: 10%;
  top: 40%;
  transform: translate(-50%, -50%);
  z-index: 7;
  pointer-events: none;
  text-align: center;
  width: min(720px, 86vw);
  opacity: var(--earth-t-o, 0);
  filter: blur(var(--earth-t-b, 10px));
  transition: opacity 0.4s linear, filter 0.4s linear;
}

.earth-title-main {
  margin: 0;
  font-size: clamp(20px, 3.2vw, 38px);
  font-weight: 700;
  color: rgba(200, 240, 255, 0.92);
  text-shadow: 0 12px 40px rgba(0, 0, 0, 0.8), 0 0 60px rgba(0, 200, 255, 0.3);
}

.earth-title-sub {
  margin: 10px 0 0;
  font-size: clamp(13px, 1.6vw, 17px);
  color: rgba(160, 216, 239, 0.78);
  text-shadow: 0 8px 30px rgba(0, 0, 0, 0.7);
}

/* Star Navigation */
.hero-star-nav {
  position: fixed;
  inset: 0;
  z-index: 8;
  pointer-events: none;
}

.star-link {
  position: absolute;
  left: 50%;
  top: 50%;
  pointer-events: none;  /* ✅ 기본은 클릭 불가 */
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  user-select: none;
  opacity: var(--stars-o, 0);
  transform: translate(-50%, calc(-50% + var(--stars-ty, 100px)))
             rotate(var(--ang))
             translateX(var(--rad))
             rotate(calc(var(--ang) * -1))
             scale(var(--stars-s, 1));
  transition: opacity 0.4s linear, transform 0.6s ease-out;
  animation: starFloat 6s ease-in-out infinite;
}

.star-2 { animation-delay: 0.7s; }
.star-3 { animation-delay: 1.4s; }
.star-4 { animation-delay: 2.1s; }
.star-5 { animation-delay: 1.0s; }

.star-1 { --ang: -10deg; --rad: clamp(300px, 38vw, 620px); }
.star-2 { --ang: 20deg; --rad: clamp(260px, 34vw, 560px); }
.star-3 { --ang: 105deg; --rad: clamp(110px, 24vw, 350px); }
.star-4 { --ang: 155deg; --rad: clamp(280px, 36vw, 600px); }
.star-5 { --ang: 200deg; --rad: clamp(300px, 40vw, 650px); }

@keyframes starFloat {
  0%, 100% {
    transform: translate(-50%, calc(-50% + var(--stars-ty, 100px)))
               rotate(var(--ang))
               translateX(var(--rad))
               rotate(calc(var(--ang) * -1))
               scale(var(--stars-s, 1));
  }
  50% {
    transform: translate(-50%, calc(-50% + var(--stars-ty, 100px)))
               rotate(var(--ang))
               translateX(calc(var(--rad) + 14px))
               rotate(calc(var(--ang) * -1))
               scale(calc(var(--stars-s, 0.96) + 0.02));
  }
}

.star-dot {
  width: 54px;
  height: 54px;
  overflow: visible;
  border: none;
  background: transparent;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6));
}

.star-dot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.star-label {
  font-size: 13px;
  letter-spacing: 0.04em;
  color: rgba(200, 240, 255, 0.78);
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.9), 0 0 16px rgba(0, 200, 255, 0.3);
}

/* Astronaut + Soccer Ball (우주 모드) */
#astro-overlay-space {
  position: fixed;
  left: 66%;
  top: 52%;
  transform: translate(-50%, -50%);
  z-index: 6;
  pointer-events: none;
  width: min(600px, 55vw);
  opacity: var(--sub-o, 0);
  transition: opacity 0.4s linear;
}

#astro-img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 0 30px rgba(0, 200, 255, 0.5))
          drop-shadow(0 0 80px rgba(0, 100, 200, 0.25))
          drop-shadow(0 30px 80px rgba(0, 0, 0, 0.6));
  animation: astroFloat 5s ease-in-out infinite;
  transform: scale(var(--sub-s, 1));
}

@keyframes astroFloat {
  0%, 100% { transform: scale(var(--sub-s, 1)) translateY(0) rotate(-0.5deg); }
  50% { transform: scale(var(--sub-s, 1)) translateY(-14px) rotate(0.5deg); }
}

#ball-wrap-space {
  position: absolute;
  left: 50%;
  top: 48%;
  transform: translate(-50%, -50%) translateX(160px) translateY(-15px);
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.35));
  animation: ballFloat 3.1s ease-in-out infinite;
}

#ball-img-space {
  width: 80px;
  height: auto;
  display: block;
}

@keyframes ballFloat {
  0%, 100% { transform: translate(-50%, -50%) translateX(160px) translateY(-15px) translateY(0); }
  50% { transform: translate(-50%, -50%) translateX(160px) translateY(-15px) translateY(-14px); }
}

/* Submarine (바다 모드) */
#astro-overlay-ocean {
  position: fixed;
  left: 70%;
  top: 52%;
  transform: translate(-50%, -50%);
  z-index: 6;
  pointer-events: none;
  width: min(600px, 55vw);
  opacity: var(--sub-o, 0);
  transition: opacity 0.4s linear;
}

#astro-img-ocean {
  width: 120%;
  height: 100%;
  display: block;
  border-radius: 0%;
  object-fit: cover;
  filter: drop-shadow(0 0 30px rgba(0, 200, 255, 0.5))
          drop-shadow(0 0 80px rgba(0, 100, 200, 0.25))
          drop-shadow(0 30px 80px rgba(0, 0, 0, 0.6));
  animation: astroFloat 5s ease-in-out infinite;
  transform: scale(var(--sub-s, 1));
}

/* ===== 5) RESPONSIVE ===== */
@media (max-width: 768px) {
  .toggle-btn {
    padding: 10px 18px;
    font-size: 14px;
  }
  
  .star-label,
  .creature-label {
    display: none;
  }
  
  .star-dot,
  .creature-dot {
    width: 48px !important;
    height: 48px !important;
  }
}

/* ============================================================
   CATEGORY PAGE - Hybrid Support
============================================================ */

/* 카테고리 페이지: 지구 이미지 (우주 모드) */
.hero-earth-category {
  position: fixed;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  z-index: 5;
  pointer-events: none;
  width: min(500px, 60vw);
}

.hero-earth-category img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 0 40px rgba(100, 200, 255, 0.4))
          drop-shadow(0 20px 60px rgba(0, 0, 0, 0.7));
  animation: earthFloat 8s ease-in-out infinite;
}

/* 카테고리 페이지: 잠수함 타이틀 (바다 모드) */
.hero-sub-title-category {
  position: fixed;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  z-index: 5;
  pointer-events: none;
  text-align: center;
}

.sub-title-category {
  font-size: clamp(24px, 4vw, 48px);
  font-weight: 700;
  color: rgba(200, 240, 255, 0.92);
  text-shadow: 0 12px 40px rgba(0, 0, 0, 0.8), 0 0 60px rgba(0, 200, 255, 0.3);
}

/* 카테고리/페이지(월드) 오버레이: 축구공/고래 크기 */
#ball-wrap-world-space {
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translate(-50%, -50%) translateX(160px) translateY(-15px);
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.35));
  animation: ufoFly-something 24s ease-in-out infinite;
}
/* 카테고리별 UFO 비행 경로 override */
body.theme-space:has(.hero-world-something) #ball-wrap-world-space { animation-name: ufoFly-something; animation-duration: 24s; }
body.theme-space:has(.hero-world-anything)  #ball-wrap-world-space { animation-name: ufoFly-anything;  animation-duration: 16s; }
body.theme-space:has(.hero-world-nothing)   #ball-wrap-world-space { animation-name: ufoFly-nothing;   animation-duration: 45s; }
body.theme-space:has(.hero-world-whatelse)  #ball-wrap-world-space { animation-name: ufoFly-whatelse;  animation-duration: 20s; }
body.theme-space:has(.hero-world-whatever)  #ball-wrap-world-space { animation-name: ufoFly-whatever;  animation-duration: 32s; }

/* ── something: 원호형 궤도, 느긋하게 사유하듯 ── */
@keyframes ufoFly-something {
  /* 넓은 원호 궤도, 사유하듯 천천히 — 38s */
  0%   { transform:translate(-50%,-50%) translateX(160px) translateY(-15px)   rotate(0deg)   scale(1);    filter:drop-shadow(0 10px 18px rgba(0,0,0,.35)); animation-timing-function:ease-in-out; }
  5%   { transform:translate(-50%,-50%) translateX(168px) translateY(-42px)   rotate(2deg)   scale(1);    filter:drop-shadow(0 10px 18px rgba(0,0,0,.35)); animation-timing-function:ease-in-out; }
  9%   { transform:translate(-50%,-50%) translateX(155px) translateY(-18px)   rotate(-1deg)  scale(1);    filter:drop-shadow(0 10px 18px rgba(0,0,0,.35)); animation-timing-function:cubic-bezier(.9,0,.1,1); }
  /* 왼쪽 끝으로 크게 */
  18%  { transform:translate(-50%,-50%) translateX(-220px) translateY(-140px) rotate(-16deg) scale(.91);  filter:drop-shadow(0 5px 30px rgba(160,120,255,.5)); animation-timing-function:ease-in-out; }
  24%  { transform:translate(-50%,-50%) translateX(-230px) translateY(-155px) rotate(-3deg)  scale(.93);  filter:drop-shadow(0 10px 18px rgba(0,0,0,.30)); animation-timing-function:ease-in-out; }
  27%  { transform:translate(-50%,-50%) translateX(-215px) translateY(-138px) rotate(-1deg)  scale(.93);  filter:drop-shadow(0 10px 18px rgba(0,0,0,.30)); animation-timing-function:cubic-bezier(.9,0,.1,1); }
  /* 오른쪽 상단으로 */
  36%  { transform:translate(-50%,-50%) translateX(420px) translateY(-170px)  rotate(17deg)  scale(.88);  filter:drop-shadow(0 4px 34px rgba(120,180,255,.55)); animation-timing-function:ease-in-out; }
  43%  { transform:translate(-50%,-50%) translateX(430px) translateY(-185px)  rotate(2deg)   scale(.90);  filter:drop-shadow(0 10px 16px rgba(0,0,0,.28)); animation-timing-function:ease-in-out; }
  46%  { transform:translate(-50%,-50%) translateX(418px) translateY(-168px)  rotate(0deg)   scale(.90);  filter:drop-shadow(0 10px 16px rgba(0,0,0,.28)); animation-timing-function:cubic-bezier(.9,0,.1,1); }
  /* 아래-왼쪽 */
  55%  { transform:translate(-50%,-50%) translateX(-150px) translateY(120px)  rotate(-14deg) scale(1.07); filter:drop-shadow(0 5px 30px rgba(180,100,255,.45)); animation-timing-function:ease-in-out; }
  61%  { transform:translate(-50%,-50%) translateX(-158px) translateY(130px)  rotate(-2deg)  scale(1.04); filter:drop-shadow(0 10px 18px rgba(0,0,0,.35)); animation-timing-function:ease-in-out; }
  64%  { transform:translate(-50%,-50%) translateX(-145px) translateY(118px)  rotate(-1deg)  scale(1.04); filter:drop-shadow(0 10px 18px rgba(0,0,0,.35)); animation-timing-function:cubic-bezier(.9,0,.1,1); }
  /* 오른쪽 아래 */
  72%  { transform:translate(-50%,-50%) translateX(390px) translateY(100px)   rotate(13deg)  scale(1.06); filter:drop-shadow(0 5px 28px rgba(100,160,255,.45)); animation-timing-function:ease-in-out; }
  78%  { transform:translate(-50%,-50%) translateX(395px) translateY(108px)   rotate(2deg)   scale(1.03); filter:drop-shadow(0 10px 18px rgba(0,0,0,.35)); animation-timing-function:ease-in-out; }
  81%  { transform:translate(-50%,-50%) translateX(388px) translateY(96px)    rotate(0deg)   scale(1.03); filter:drop-shadow(0 10px 18px rgba(0,0,0,.35)); animation-timing-function:cubic-bezier(.9,0,.1,1); }
  /* 귀환 */
  91%  { transform:translate(-50%,-50%) translateX(162px) translateY(-20px)   rotate(9deg)   scale(1.01); filter:drop-shadow(0 6px 22px rgba(130,140,255,.35)); animation-timing-function:ease-in-out; }
  96%  { transform:translate(-50%,-50%) translateX(158px) translateY(-10px)   rotate(1deg)   scale(1);    filter:drop-shadow(0 10px 18px rgba(0,0,0,.35)); animation-timing-function:ease-in-out; }
  100% { transform:translate(-50%,-50%) translateX(160px) translateY(-15px)   rotate(0deg)   scale(1);    filter:drop-shadow(0 10px 18px rgba(0,0,0,.35)); }
}

/* ✅ ocean 월드 오버레이 id가 bal- 로 생성되는 경우가 있어 둘 다 커버 */
#ball-wrap-world-ocean,
#bal-wrap-world-ocean{
  position: absolute;
  left: 48%;
  top: 35%; /* 조금 더 상단 */
  transform: translate(-50%, -50%) translateX(0px) translateY(-10px);
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.35));
  animation: ballFloat 3.1s ease-in-out infinite;
}

#ball-img-world-space {
  width: auto;
  height: 160px;
  display: block;
}

#ball-img-world-ocean,
#bal-img-world-ocean{
  width: auto;
  height: 850px;  /* ✅ 더 크게 */
  display: block;
}

/* ============================================================
   SINGLE POST - Hybrid Support
============================================================ */

/* 싱글 포스트: 바다 배경 제거 (logbook-bg로 처리) */
body.single {
  background: var(--ocean-abyss) !important;
}

/* 싱글 포스트: 우주 배경 */
.logbook-bg-space.space-mode-only {
  position: absolute;
  inset: 0;
  background: none;
  z-index: 0;
}

/* 싱글 포스트: 바다 배경 */
.logbook-bg.ocean-mode-only {
  position: absolute;
  inset: 0;
  background: url('images/undersea3.png') center/cover no-repeat fixed;
  z-index: 0;
}



/* ===== PATCH: ensure content stays above decorative fixed layers ===== */
.site-header{ position: relative; z-index: 100; }
.site-footer{ position: relative; z-index: 100; }
#main, main, .single-layout, .page-layout, .page-content{ position: relative; z-index: 60; }
/* Keep fixed decorative layers behind content when needed */
.hero-bg, .hero-bg-space, .warp-layer{ z-index: 0; }


/* ===== Global backgrounds for hybrid theme (applies to all templates) ===== */
.global-bg{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.global-bg-space.space-mode-only{
  background: url('https://vinaida.xyz/wp-content/uploads/2026/02/space11.webp') center/cover no-repeat fixed;
}
.global-bg-ocean.ocean-mode-only{
  background: url('images/undersea3.png') center/cover no-repeat fixed;
}

/* ============================================================
   v3.0.1 PATCH (fixed2 baseline)
   - 홈(바다) 고래 네비: 기존(작은) 크기 유지
   - /whatever/ 등 월드 페이지: 중앙 제목 중복 제거 + 고래 오버레이 크게
   - 우주: 우주인 80% + 축구공 자전
   - 우주: 지구 천천히 자전 (float와 분리)
   - 우주: 별 5개 크기 랜덤감(각기 다르게)
============================================================ */

/* 1) 홈(바다 모드)에서 스크롤 후 등장하는 5마리 고래는 "종전" 크기로 */
body.theme-ocean.home .hero-creature-nav .creature-dot,
body.theme-ocean.front-page .hero-creature-nav .creature-dot{
  height: 400px !important;
}

/* 2) 월드 페이지(whatever/something/...)에서 가운데 제목(중복) 제거 */
body.theme-ocean.page .hero-sub-title-category{
  display: none !important;
}

/* 3) 월드 페이지에서 고래 오버레이: 더 크게 + 조금 위로 */
body.theme-ocean.page #ball-wrap-world-ocean{
  position: absolute;
  left: 60% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) translateY(-20px) !important;
}
body.theme-ocean.page #ball-img-world-ocean{
  height: 1080px;
  max-width: none;
}

/* 4) 우주 모드: 우주인 오버레이 80% */
body.theme-space #astro-overlay-space{
  width: min(480px, 44vw) !important;
}

/* ── anything: 사방팔방 난비, 최대 범위, 짧은 정박 — 19s ── */
@keyframes ufoFly-anything {
  0%   { transform:translate(-50%,-50%) translateX(160px)  translateY(-15px)  rotate(0deg)   scale(1);    filter:drop-shadow(0 10px 18px rgba(0,0,0,.35)); animation-timing-function:cubic-bezier(.9,0,.1,1); }
  /* 왼쪽 끝-위 */
  7%   { transform:translate(-50%,-50%) translateX(-280px) translateY(-160px) rotate(-19deg) scale(.89);  filter:drop-shadow(0 4px 34px rgba(80,220,255,.55)); animation-timing-function:ease-in-out; }
  9%   { transform:translate(-50%,-50%) translateX(-272px) translateY(-170px) rotate(-2deg)  scale(.91);  filter:drop-shadow(0 10px 18px rgba(0,0,0,.32)); animation-timing-function:cubic-bezier(.9,0,.1,1); }
  /* 오른쪽 끝 */
  16%  { transform:translate(-50%,-50%) translateX(450px)  translateY(-30px)  rotate(21deg)  scale(1.08); filter:drop-shadow(0 4px 36px rgba(80,210,255,.58)); animation-timing-function:ease-in-out; }
  18%  { transform:translate(-50%,-50%) translateX(442px)  translateY(-38px)  rotate(2deg)   scale(1.05); filter:drop-shadow(0 10px 18px rgba(0,0,0,.35)); animation-timing-function:cubic-bezier(.9,0,.1,1); }
  /* 아래-왼쪽 */
  24%  { transform:translate(-50%,-50%) translateX(-100px) translateY(130px)  rotate(-18deg) scale(1.09); filter:drop-shadow(0 4px 32px rgba(100,230,255,.52)); animation-timing-function:ease-in-out; }
  26%  { transform:translate(-50%,-50%) translateX(-92px)  translateY(122px)  rotate(-2deg)  scale(1.06); filter:drop-shadow(0 10px 18px rgba(0,0,0,.35)); animation-timing-function:cubic-bezier(.9,0,.1,1); }
  /* 정중앙 위 (솟구침) */
  32%  { transform:translate(-50%,-50%) translateX(80px)   translateY(-180px) rotate(8deg)   scale(.86);  filter:drop-shadow(0 3px 38px rgba(180,240,255,.6)); animation-timing-function:ease-in-out; }
  34%  { transform:translate(-50%,-50%) translateX(84px)   translateY(-188px) rotate(1deg)   scale(.88);  filter:drop-shadow(0 10px 14px rgba(0,0,0,.28)); animation-timing-function:cubic-bezier(.9,0,.1,1); }
  /* 오른쪽 아래 */
  41%  { transform:translate(-50%,-50%) translateX(430px)  translateY(120px)  rotate(16deg)  scale(1.08); filter:drop-shadow(0 4px 34px rgba(80,200,255,.52)); animation-timing-function:ease-in-out; }
  43%  { transform:translate(-50%,-50%) translateX(422px)  translateY(112px)  rotate(2deg)   scale(1.05); filter:drop-shadow(0 10px 18px rgba(0,0,0,.35)); animation-timing-function:cubic-bezier(.9,0,.1,1); }
  /* 왼쪽 중간 */
  50%  { transform:translate(-50%,-50%) translateX(-300px) translateY(20px)   rotate(-20deg) scale(.92);  filter:drop-shadow(0 4px 36px rgba(100,220,255,.55)); animation-timing-function:ease-in-out; }
  52%  { transform:translate(-50%,-50%) translateX(-292px) translateY(12px)   rotate(-2deg)  scale(.94);  filter:drop-shadow(0 10px 18px rgba(0,0,0,.33)); animation-timing-function:cubic-bezier(.9,0,.1,1); }
  /* 오른쪽 위 */
  59%  { transform:translate(-50%,-50%) translateX(400px)  translateY(-140px) rotate(18deg)  scale(.90);  filter:drop-shadow(0 4px 34px rgba(80,215,255,.54)); animation-timing-function:ease-in-out; }
  61%  { transform:translate(-50%,-50%) translateX(392px)  translateY(-148px) rotate(2deg)   scale(.92);  filter:drop-shadow(0 10px 16px rgba(0,0,0,.30)); animation-timing-function:cubic-bezier(.9,0,.1,1); }
  /* 왼쪽-아래 */
  68%  { transform:translate(-50%,-50%) translateX(-200px) translateY(110px)  rotate(-15deg) scale(1.07); filter:drop-shadow(0 4px 32px rgba(100,225,255,.5)); animation-timing-function:ease-in-out; }
  70%  { transform:translate(-50%,-50%) translateX(-192px) translateY(102px)  rotate(-1deg)  scale(1.04); filter:drop-shadow(0 10px 18px rgba(0,0,0,.35)); animation-timing-function:cubic-bezier(.9,0,.1,1); }
  /* 중앙 귀환 경유 */
  77%  { transform:translate(-50%,-50%) translateX(300px)  translateY(-60px)  rotate(12deg)  scale(.95);  filter:drop-shadow(0 5px 28px rgba(100,210,255,.45)); animation-timing-function:ease-in-out; }
  79%  { transform:translate(-50%,-50%) translateX(296px)  translateY(-68px)  rotate(1deg)   scale(.97);  filter:drop-shadow(0 10px 18px rgba(0,0,0,.33)); animation-timing-function:cubic-bezier(.9,0,.1,1); }
  /* 왼쪽 위 한 번 더 */
  86%  { transform:translate(-50%,-50%) translateX(-180px) translateY(-120px) rotate(-14deg) scale(.93);  filter:drop-shadow(0 4px 32px rgba(80,220,255,.52)); animation-timing-function:ease-in-out; }
  88%  { transform:translate(-50%,-50%) translateX(-174px) translateY(-128px) rotate(-1deg)  scale(.95);  filter:drop-shadow(0 10px 16px rgba(0,0,0,.30)); animation-timing-function:cubic-bezier(.9,0,.1,1); }
  /* 귀환 */
  100% { transform:translate(-50%,-50%) translateX(160px)  translateY(-15px)  rotate(0deg)   scale(1);    filter:drop-shadow(0 10px 18px rgba(0,0,0,.35)); }
}

/* ── nothing: 깊은 침묵, 긴 정박 + 아주 느린 미세 이동 — 52s ── */
@keyframes ufoFly-nothing {
  0%   { transform:translate(-50%,-50%) translateX(160px) translateY(-15px)  rotate(0deg)  scale(1);    filter:drop-shadow(0 10px 18px rgba(0,0,0,.35)); animation-timing-function:ease-in-out; }
  /* 긴 호버 */
  12%  { transform:translate(-50%,-50%) translateX(166px) translateY(-30px)  rotate(1.5deg) scale(1);   filter:drop-shadow(0 10px 18px rgba(0,0,0,.35)); animation-timing-function:ease-in-out; }
  20%  { transform:translate(-50%,-50%) translateX(155px) translateY(-8px)   rotate(-1deg)  scale(1);   filter:drop-shadow(0 10px 18px rgba(0,0,0,.35)); animation-timing-function:cubic-bezier(.9,0,.1,1); }
  /* 느린 drift 왼쪽 (이동 자체도 느림) */
  31%  { transform:translate(-50%,-50%) translateX(-80px) translateY(-90px)  rotate(-7deg)  scale(.96); filter:drop-shadow(0 8px 22px rgba(60,60,80,.42)); animation-timing-function:ease-in-out; }
  /* 긴 정박 */
  44%  { transform:translate(-50%,-50%) translateX(-85px) translateY(-98px)  rotate(-2deg)  scale(.97); filter:drop-shadow(0 10px 18px rgba(0,0,0,.35)); animation-timing-function:ease-in-out; }
  50%  { transform:translate(-50%,-50%) translateX(-78px) translateY(-84px)  rotate(-0.5deg) scale(.97); filter:drop-shadow(0 10px 18px rgba(0,0,0,.35)); animation-timing-function:cubic-bezier(.9,0,.1,1); }
  /* 느린 drift 오른쪽-아래 */
  63%  { transform:translate(-50%,-50%) translateX(280px) translateY(80px)   rotate(6deg)   scale(1.03); filter:drop-shadow(0 8px 22px rgba(60,60,80,.42)); animation-timing-function:ease-in-out; }
  /* 긴 정박 */
  76%  { transform:translate(-50%,-50%) translateX(285px) translateY(88px)   rotate(1.5deg) scale(1.02); filter:drop-shadow(0 10px 18px rgba(0,0,0,.35)); animation-timing-function:ease-in-out; }
  84%  { transform:translate(-50%,-50%) translateX(275px) translateY(76px)   rotate(0deg)   scale(1.02); filter:drop-shadow(0 10px 18px rgba(0,0,0,.35)); animation-timing-function:cubic-bezier(.9,0,.1,1); }
  /* 느린 귀환 */
  96%  { transform:translate(-50%,-50%) translateX(162px) translateY(-12px)  rotate(3deg)   scale(1);    filter:drop-shadow(0 10px 18px rgba(0,0,0,.35)); animation-timing-function:ease-in-out; }
  100% { transform:translate(-50%,-50%) translateX(160px) translateY(-15px)  rotate(0deg)   scale(1);    filter:drop-shadow(0 10px 18px rgba(0,0,0,.35)); }
}

/* ── whatelse: 날카로운 지그재그, 전 구역 커버 — 25s ── */
@keyframes ufoFly-whatelse {
  0%   { transform:translate(-50%,-50%) translateX(160px)  translateY(-15px)  rotate(0deg)   scale(1);    filter:drop-shadow(0 10px 18px rgba(0,0,0,.35)); animation-timing-function:cubic-bezier(.9,0,.1,1); }
  /* ZIG 오른쪽 끝-위 */
  8%   { transform:translate(-50%,-50%) translateX(430px)  translateY(-160px) rotate(20deg)  scale(.89);  filter:drop-shadow(0 4px 32px rgba(255,170,70,.52)); animation-timing-function:ease-in-out; }
  10%  { transform:translate(-50%,-50%) translateX(422px)  translateY(-168px) rotate(2deg)   scale(.91);  filter:drop-shadow(0 10px 18px rgba(0,0,0,.32)); animation-timing-function:cubic-bezier(.9,0,.1,1); }
  /* ZAG 왼쪽 끝-아래 */
  18%  { transform:translate(-50%,-50%) translateX(-260px) translateY(130px)  rotate(-21deg) scale(1.10); filter:drop-shadow(0 4px 34px rgba(255,150,60,.55)); animation-timing-function:ease-in-out; }
  20%  { transform:translate(-50%,-50%) translateX(-252px) translateY(122px)  rotate(-2deg)  scale(1.07); filter:drop-shadow(0 10px 18px rgba(0,0,0,.35)); animation-timing-function:cubic-bezier(.9,0,.1,1); }
  /* ZIG 오른쪽-아래 */
  28%  { transform:translate(-50%,-50%) translateX(400px)  translateY(110px)  rotate(17deg)  scale(1.07); filter:drop-shadow(0 4px 32px rgba(255,160,70,.5)); animation-timing-function:ease-in-out; }
  30%  { transform:translate(-50%,-50%) translateX(392px)  translateY(102px)  rotate(2deg)   scale(1.04); filter:drop-shadow(0 10px 18px rgba(0,0,0,.35)); animation-timing-function:cubic-bezier(.9,0,.1,1); }
  /* ZAG 왼쪽 끝-위 */
  38%  { transform:translate(-50%,-50%) translateX(-280px) translateY(-170px) rotate(-20deg) scale(.87);  filter:drop-shadow(0 4px 36px rgba(255,145,55,.58)); animation-timing-function:ease-in-out; }
  40%  { transform:translate(-50%,-50%) translateX(-272px) translateY(-178px) rotate(-2deg)  scale(.89);  filter:drop-shadow(0 10px 14px rgba(0,0,0,.28)); animation-timing-function:cubic-bezier(.9,0,.1,1); }
  /* ZIG 정중앙 아래 */
  48%  { transform:translate(-50%,-50%) translateX(160px)  translateY(140px)  rotate(11deg)  scale(1.09); filter:drop-shadow(0 4px 30px rgba(255,160,70,.5)); animation-timing-function:ease-in-out; }
  50%  { transform:translate(-50%,-50%) translateX(156px)  translateY(132px)  rotate(1deg)   scale(1.06); filter:drop-shadow(0 10px 18px rgba(0,0,0,.35)); animation-timing-function:cubic-bezier(.9,0,.1,1); }
  /* ZAG 왼쪽 중간 */
  58%  { transform:translate(-50%,-50%) translateX(-300px) translateY(-20px)  rotate(-19deg) scale(.93);  filter:drop-shadow(0 4px 34px rgba(255,155,65,.54)); animation-timing-function:ease-in-out; }
  60%  { transform:translate(-50%,-50%) translateX(-292px) translateY(-28px)  rotate(-2deg)  scale(.95);  filter:drop-shadow(0 10px 18px rgba(0,0,0,.33)); animation-timing-function:cubic-bezier(.9,0,.1,1); }
  /* ZIG 오른쪽 위 */
  68%  { transform:translate(-50%,-50%) translateX(440px)  translateY(-90px)  rotate(18deg)  scale(.92);  filter:drop-shadow(0 4px 32px rgba(255,165,70,.5)); animation-timing-function:ease-in-out; }
  70%  { transform:translate(-50%,-50%) translateX(432px)  translateY(-98px)  rotate(2deg)   scale(.94);  filter:drop-shadow(0 10px 16px rgba(0,0,0,.30)); animation-timing-function:cubic-bezier(.9,0,.1,1); }
  /* 귀환 */
  82%  { transform:translate(-50%,-50%) translateX(160px)  translateY(-15px)  rotate(-8deg)  scale(.97);  filter:drop-shadow(0 6px 24px rgba(255,150,65,.38)); animation-timing-function:ease-in-out; }
  88%  { transform:translate(-50%,-50%) translateX(164px)  translateY(-22px)  rotate(-1deg)  scale(1);    filter:drop-shadow(0 10px 18px rgba(0,0,0,.35)); animation-timing-function:ease-in-out; }
  100% { transform:translate(-50%,-50%) translateX(160px)  translateY(-15px)  rotate(0deg)   scale(1);    filter:drop-shadow(0 10px 18px rgba(0,0,0,.35)); }
}

/* ── whatever: 여유롭고 넓은 스윕, 한결같이 차분 — 40s ── */
@keyframes ufoFly-whatever {
  0%   { transform:translate(-50%,-50%) translateX(160px)  translateY(-15px)  rotate(0deg)  scale(1);    filter:drop-shadow(0 10px 18px rgba(0,0,0,.35)); animation-timing-function:ease-in-out; }
  /* 왼쪽 끝으로 천천히 */
  18%  { transform:translate(-50%,-50%) translateX(-280px) translateY(-80px)  rotate(-6deg) scale(.95);  filter:drop-shadow(0 9px 22px rgba(0,0,0,.32)); animation-timing-function:ease-in-out; }
  /* 왼쪽 호버 */
  27%  { transform:translate(-50%,-50%) translateX(-285px) translateY(-92px)  rotate(-1.5deg) scale(.96); filter:drop-shadow(0 10px 18px rgba(0,0,0,.35)); animation-timing-function:ease-in-out; }
  33%  { transform:translate(-50%,-50%) translateX(-275px) translateY(-76px)  rotate(-0.5deg) scale(.96); filter:drop-shadow(0 10px 18px rgba(0,0,0,.35)); animation-timing-function:ease-in-out; }
  /* 위쪽 중앙으로 넓게 */
  45%  { transform:translate(-50%,-50%) translateX(80px)   translateY(-170px) rotate(4deg)  scale(.91);  filter:drop-shadow(0 8px 24px rgba(200,220,255,.35)); animation-timing-function:ease-in-out; }
  /* 위쪽 호버 */
  52%  { transform:translate(-50%,-50%) translateX(76px)   translateY(-180px) rotate(1deg)  scale(.92);  filter:drop-shadow(0 10px 16px rgba(0,0,0,.30)); animation-timing-function:ease-in-out; }
  /* 오른쪽 끝으로 */
  65%  { transform:translate(-50%,-50%) translateX(420px)  translateY(-30px)  rotate(5deg)  scale(1.04); filter:drop-shadow(0 9px 22px rgba(0,0,0,.32)); animation-timing-function:ease-in-out; }
  /* 오른쪽 호버 */
  74%  { transform:translate(-50%,-50%) translateX(425px)  translateY(-42px)  rotate(1.5deg) scale(1.03); filter:drop-shadow(0 10px 18px rgba(0,0,0,.35)); animation-timing-function:ease-in-out; }
  80%  { transform:translate(-50%,-50%) translateX(415px)  translateY(-28px)  rotate(0.5deg) scale(1.03); filter:drop-shadow(0 10px 18px rgba(0,0,0,.35)); animation-timing-function:ease-in-out; }
  /* 아래-왼쪽 경유 후 귀환 */
  90%  { transform:translate(-50%,-50%) translateX(-100px) translateY(90px)   rotate(-4deg) scale(1.02); filter:drop-shadow(0 9px 22px rgba(0,0,0,.33)); animation-timing-function:ease-in-out; }
  96%  { transform:translate(-50%,-50%) translateX(158px)  translateY(-10px)  rotate(1deg)  scale(1);    filter:drop-shadow(0 10px 18px rgba(0,0,0,.35)); animation-timing-function:ease-in-out; }
  100% { transform:translate(-50%,-50%) translateX(160px)  translateY(-15px)  rotate(0deg)  scale(1);    filter:drop-shadow(0 10px 18px rgba(0,0,0,.35)); }
}

/* 5) 우주 모드: 축구공 자전(둥둥 + 빙글) */
@keyframes ballSpin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
body.theme-space #ball-img-space{
  animation: ballSpin 10s linear infinite !important;
  transform-origin: 50% 50%;
}
/* UFO는 회전 없이 둥둥 떠있는 효과만 */
body.theme-space #ball-img-world-space{
  animation: none !important;
}

/* 6) 우주 모드: 지구 천천히 자전 (float wrapper와 분리) */
 .hero-earth-float{ 
  animation: earthFloatWrap 8s ease-in-out infinite;
} 
 .hero-earth-title{ 
  animation: earthFloatWrap 8s ease-in-out infinite;
} 
.hero-earth-spin{
  width: 100%;
  height: auto;
  animation: earthSpin 240s linear infinite;
  transform-origin: 58.9% 43.9%;  /* ← 50% 50% → 이 값으로 변경 */
}
.hero-earth-spin img{
  width: 100%;
  height: auto;
  display: block;
  transform: scale(var(--earth-s, 0.96));
  filter: drop-shadow(0 0 60px rgba(100, 200, 255, 0.4))
          drop-shadow(0 30px 80px rgba(0, 0, 0, 0.7));
}
@keyframes earthFloatWrap{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-18px); } }
@keyframes earthSpin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }

/* 기존 .hero-earth > img 규칙은 wrapper 도입으로 무력화 */
.hero-earth > img{ display:none !important; }

/* 7) 우주 모드: 별 5개 크기를 제각각 */
body.theme-space .star-1 .star-dot{ width: 60px; height: 60px; }
body.theme-space .star-2 .star-dot{ width: 48px; height: 48px; }
body.theme-space .star-3 .star-dot{ width: 66px; height: 66px; }
body.theme-space .star-4 .star-dot{ width: 44px; height: 44px; }
body.theme-space .star-5 .star-dot{ width: 56px; height: 56px; }



/* ✅ (우주 모드) 스크롤 등장 별 5개 크기 약간씩 다르게 */
body.theme-space .star-1 .star-dot{ width:120px; height:120px; }
body.theme-space .star-2 .star-dot{ width:70px; height:70px; }
body.theme-space .star-3 .star-dot{ width:110px; height:110px; }
body.theme-space .star-4 .star-dot{ width:90px; height:90px; }
body.theme-space .star-5 .star-dot{ width:230px; height:230px; }

/* ✅ hero-world(페이지)에서는 페이드 전환을 더 빠르게 */
.hero-world .hero-bg{ transition: opacity .35s ease; }
.hero-world::after{ transition: opacity .35s ease; }



/* 월드 페이지 고래: 위치는 여기서 고정 */
body.theme-ocean.page #ball-wrap-world-ocean{
  position: fixed;          /* absolute 말고 fixed로 박아버리면 더 안정적 */
  left: 60% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  animation: none !important;  /* ✅ 핵심: wrapper 애니메이션 제거 */
}

@keyframes whaleFloatY{
  0%,100%{ transform: translateY(0); }
  50%    { transform: translateY(-14px); }
}

body.theme-ocean.page #ball-img-world-ocean{
  height: 1080px;      /* 크기는 여기서 */
  width: auto;
  max-width: none;

  animation: whaleFloatY 3.1s ease-in-out infinite; /* ✅ transform 충돌 없음 */
}

/* 바다 모드: 기본은 클릭/커서 전부 막기 */
html.theme-ocean .hero-creature-nav,
body.theme-ocean .hero-creature-nav{
  pointer-events: none !important;
}

html.theme-ocean .hero-creature-nav .creature-link,
body.theme-ocean .hero-creature-nav .creature-link{
  pointer-events: none;  /* ✅ !important 제거 */
  cursor: default;
}

/* 고래 선택 화면에서만 다시 활성화 */
html.theme-ocean .hero-creature-nav.is-active,
body.theme-ocean .hero-creature-nav.is-active{
  pointer-events: auto;  /* ✅ !important 제거 */
}

html.theme-ocean .hero-creature-nav.is-active .creature-link,
body.theme-ocean .hero-creature-nav.is-active .creature-link{
  /* ✅ pointer-events는 JS가 제어하도록 여기서 제거 */
  cursor: pointer;
}

/* 우주 모드: 기본은 클릭/커서 전부 막기 */
html.theme-space .hero-star-nav,
body.theme-space .hero-star-nav{
  pointer-events: none !important;
}

html.theme-space .hero-star-nav .star-link,
body.theme-space .hero-star-nav .star-link{
  pointer-events: none;  /* ✅ !important 제거 */
  cursor: default;
}

/* 별 선택 화면에서만 다시 활성화 */
html.theme-space .hero-star-nav.is-active,
body.theme-space .hero-star-nav.is-active{
  pointer-events: auto;  /* ✅ !important 제거 */
}

html.theme-space .hero-star-nav.is-active .star-link,
body.theme-space .hero-star-nav.is-active .star-link{
  /* ✅ pointer-events는 JS가 제어하도록 여기서 제거 */
  cursor: pointer;
}

/* 우주모드..워프 가로줄 내려오는거 끄기 */
body.theme-space .warp-layer{ display:none !important; }
/* ✅ SPACE: 대각선 caustics(물빛굴절) 레이어 끄기 */
body.theme-space .hero-thought::after{
  content: none !important;
  animation: none !important;
  background: none !important;
  opacity: 0 !important;
}

/* ✅ SPACE 배경: space11.webp를 아주 천천히 줌인/줌아웃 */
@keyframes spaceBreath {
  0%, 100% { transform: scale(1.00); }
  50%      { transform: scale(1.06); }
}

/* ============================================================
   SPACE BACKGROUND BREATHING
   - hero-bg-space (home / page)
   - global-bg-space (single post)
============================================================ */

/* 공통 애니메이션 */
@keyframes spaceBreath {
  0%, 100% { transform: scale(1.00); }
  50%      { transform: scale(1.06); }
}

/* ===============================
   1) HERO SPACE BG (home / page)
=============================== */
body.theme-space .hero-bg-space.space-mode-only{
  background: none !important;
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

body.theme-space .hero-bg-space.space-mode-only::before{
  content:"";
  position: absolute;
  inset: -6%;
  background: url('https://vinaida.xyz/wp-content/uploads/2026/02/space11.webp')
              center/cover no-repeat;
  transform-origin: center;
  will-change: transform;
  animation: spaceBreath 28s ease-in-out infinite;
}

/* something 카테고리 페이지 전용 배경 */
body.theme-space:has(.hero-world-something) .hero-bg-space.space-mode-only::before{
  background: url('images/1star111.webp') center/cover no-repeat;
}

/* something 카테고리 싱글 포스트 전용 배경 */
body.theme-space:has(.single-cat-something) .global-bg-space.space-mode-only::before{
  background: url('images/1star11.webp') center/cover no-repeat;
}

/* anything 카테고리 페이지 전용 배경 */
body.theme-space:has(.hero-world-anything) .hero-bg-space.space-mode-only::before{
  background: url('images/1star222.webp') center/cover no-repeat;
}
/* anything 카테고리 싱글 포스트 전용 배경 */
body.theme-space:has(.single-cat-anything) .global-bg-space.space-mode-only::before{
  background: url('images/1star22.webp') center/cover no-repeat;
}

/* nothing 카테고리 페이지 전용 배경 */
body.theme-space:has(.hero-world-nothing) .hero-bg-space.space-mode-only::before{
  background: url('images/1star333.webp') center/cover no-repeat;
}
/* nothing 카테고리 싱글 포스트 전용 배경 */
body.theme-space:has(.single-cat-nothing) .global-bg-space.space-mode-only::before{
  background: url('images/1star33.webp') center/cover no-repeat;
}

/* whatelse 카테고리 페이지 전용 배경 */
body.theme-space:has(.hero-world-whatelse) .hero-bg-space.space-mode-only::before{
  background: url('images/1star444.webp') center/cover no-repeat;
}
/* whatelse 카테고리 싱글 포스트 전용 배경 */
body.theme-space:has(.single-cat-whatelse) .global-bg-space.space-mode-only::before{
  background: url('images/1star44.webp') center/cover no-repeat;
}

/* whatever 카테고리 페이지 전용 배경 */
body.theme-space:has(.hero-world-whatever) .hero-bg-space.space-mode-only::before{
  background: url('images/1star555.webp') center/cover no-repeat;
}
/* whatever 카테고리 싱글 포스트 전용 배경 */
body.theme-space:has(.single-cat-whatever) .global-bg-space.space-mode-only::before{
  background: url('images/1star55.webp') center/cover no-repeat;
}

/* ===============================
   2) GLOBAL SPACE BG (single post)
=============================== */
body.theme-space .global-bg-space.space-mode-only{
  background: none !important;
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

body.theme-space .global-bg-space.space-mode-only::before{
  content:"";
  position: absolute;
  inset: -6%;
  background: url('https://vinaida.xyz/wp-content/uploads/2026/02/space11.webp')
              center/cover no-repeat;
  transform-origin: center;
  will-change: transform;
  animation: spaceBreath 36s ease-in-out infinite; /* 싱글은 조금 더 느리게 */
}

/* world 홈 링크 제목 */
.hero-world h2{
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 700;
  margin: 20px 0 0 32px;
}

/* 링크는 h2 스타일을 그대로 상속 */
.hero-world h2 .world-home-link{
  font-size: inherit;     /* 🔥 핵심 */
  font-weight: inherit;
  margin: 0;
  color: rgba(160, 213, 228, 0.795);
}


/* 우주 */
body.theme-space .hero-world h2{
  font-size: clamp(18px, 2.6vw, 30px);
}

/* 바다 */
body.theme-ocean .hero-world h2{
  font-size: clamp(18px, 2.6vw, 30px);
}

/* ============================================================
   MOBILE PATCH (based on your current CSS) 모바일을 위한 설정...
   - readability / spacing / tap targets / layout stacking
   - keeps your ocean/space vibe, just makes it usable on phones
============================================================ */
@media (max-width: 768px){

  /* 0) Base typography: 폰에서 글 가독성 상승 */
  body{
    font-size: 16px;
    line-height: 1.85;
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
  }
  p{ font-size: 16px; }
  h1{ font-size: clamp(22px, 6vw, 30px); }
  h2{ font-size: clamp(18px, 5vw, 24px); }
  h3{ font-size: clamp(16px, 4.5vw, 20px); }

  /* 1) Container padding: 화면 좌우 숨 막힘 방지 */
  .container{ padding: 0 16px; }
  /* ✅ 네비 레이어가 콘텐츠(최근글 카드) 위로 올라오게 */
  .hero-creature-nav,
  .hero-star-nav{
  z-index: 120 !important;
}

/* 링크/도트도 확실히 위로 */
.hero-creature-nav .creature-link,
.hero-star-nav .star-link{
  z-index: 121 !important;
}


  /* 2) Header/Nav: 터치하기 쉽게 + 줄바꿈 허용 */
  .site-header{ padding: 14px 0; }
  .site-title a{ font-size: 18px; }
  .main-nav ul{ gap: 12px; flex-wrap: wrap; }
  .main-nav a{
    font-size: 15px;
    padding: 10px 8px;            /* ✅ 탭 영역 확대 */
    border-radius: 10px;
  }

  /* 3) Theme toggle button: 너무 커서 가리면 안 됨 */
  .theme-toggle,
  .theme-toggle-wrapper{
    top: 12px;
    right: 12px;
  }
  .toggle-btn,
  .theme-toggle-btn{
    padding: 10px 14px;
    gap: 8px;
    font-size: 12px;
  }

  /* 4) Hero: 폰에서 200vh 너무 길어서 피로 → 살짝 줄이기 */
  .home .hero-thought{ height: 200vh; }
  .page .hero-thought,
  .hero-world{ height: 105vh; min-height: 520px; }

  /* 5) Hero lines: 상단 문장 위치/줄간격/크기 최적화 */
  .hero-lines{
    padding-top: 28vh;
    margin-left: 12px;
    max-width: 92vw;
  }
  .hero-line.line-1{
    font-size: clamp(22px, 6.2vw, 34px);
    line-height: 1.18;
  }
  .hero-line.line-2,
  .hero-line.line-3{
    font-size: clamp(14px, 3.8vw, 18px);
    margin-top: 14px;
    line-height: 1.55;
  }

  /* 6) 우주/바다 오버레이(우주인, 잠수함 등) : 화면 가림 최소화 */
  #astro-overlay,
  #astro-overlay-space,
  #astro-overlay-ocean,
  .hero-sub{
    width: min(360px, 66vw) !important;
    left: 54% !important;
    top: 54% !important;
  }

  /* 7) 공/고래(월드) 오버레이 : 폰에서 너무 커지면 텍스트 가림 */
  #ball-wrap-world-ocean,
  #bal-wrap-world-ocean{
    left: 56% !important;
    top: 56% !important;
  }
  #ball-img-world-ocean,
  #bal-img-world-ocean{
    height: 72vh !important;     /* ✅ 1080px 고정 대신 뷰포트 기준 */
    max-height: 620px;
  }

  /* 8) 네비(생물/별) : 폰에서는 너무 커서 겹침 → 크기 다운 + 라벨 숨김 유지 */
  .creature-label,
  .star-label{ display:none !important; }

  /* 기존에 48px로 줄여놨는데, 너는 “이미지형”이 많아서
     너무 작으면 누르기 힘듦 → 최소 터치영역만 확보 */
  .hero-creature-nav.is-active .creature-link,
  .hero-star-nav.is-active .star-link{
    transform:
      translate(-50%,-50%)
      rotate(var(--ang))
      translateX(calc(var(--rad) * .78))
      rotate(calc(var(--ang) * -1))
      scale(.92);
  }

  /* 9) Home latest: 3열 → 1열(폰에서 카드가 커야 읽기 좋음) */
  .home-latest{ padding: 72px 0 92px; }
  .home-latest-grid{ grid-template-columns: 1fr !important; }
  .home-latest-body{ padding: 16px; }
  .home-latest-title-sm{ font-size: 16px; }
  .home-latest-excerpt{ font-size: 14px; line-height: 1.7; }

  /* 10) Single/Page layout: 사이드바 아래로, 패딩 줄이기 */
  .single-layout,
  .page-layout{
    grid-template-columns: 1fr !important;
    padding: 0 14px !important;
    gap: 18px !important;
  }
  .single-main,
  .category-page{
    padding: 18px !important;
    border-radius: 16px;
  }
  .page-sidebar,
  .single-sidebar{ margin-top: 0; }

  /* 11) Single title/meta: 제목 크기/여백 최적화 */
  .logbook-hero{ padding: 84px 0 28px; }
  .logbook-inner{ padding: 18px 16px; border-radius: 16px; }
  .logbook-title{ font-size: clamp(22px, 6vw, 30px); }
  .single-title{ font-size: clamp(20px, 5.6vw, 28px); }

  /* 12) 본문 이미지: 화면 꽉 차지 않게, 터치 확대 고려 */
  .single-featured img{
    width: 100%;
    max-width: 520px;
    max-height: 46vh;
    border-radius: 14px;
  }

  /* 13) 이전/다음: 버튼 크기 키우고 한 줄씩 */
  .post-nav{ flex-direction: column; gap: 10px; padding: 12px; }
  .post-nav a{ padding: 14px 14px; font-size: 14px; }

  /* 14) Category list: 썸네일+텍스트 줄맞춤 & 제목 크게 */
  .post-row{
    grid-template-columns: 72px 1fr;
    gap: 12px;
    padding: 14px 0;
  }
  .post-row-thumb img{ height: 64px; border-radius: 10px; }
  .post-row-title a{ font-size: 17px; }
  .post-row-excerpt{ font-size: 14px; line-height: 1.7; }

  /* 15) Anything grid: 3열 → 1열 */
  .anything-grid{ grid-template-columns: 1fr !important; gap: 14px; }

  /* 16) World home link(지구별로/심연속으로): 14px 고정 제거 + 탭영역 확대 */
  a.world-home-link{
    font-size: 18px !important;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(0,200,255,.06);
    border: 1px solid rgba(0,200,255,.12);
  }

  /* 17) Comments: 입력칸/버튼 터치 최적화 */
  .space-comments{ padding: 18px; border-radius: 14px; }
  .comment-form textarea{ min-height: 120px; }
  .space-comment-btn{ padding: 12px 22px; font-size: 14px; }

  /* 18) 성능/가독성: 폰에서 backdrop-filter 과하면 흐려지고 버벅일 수 있음 */
  .home-latest-card,
  .single-main,
  .category-page,
  .sidebar-box,
  .post-nav,
  .space-comments{
    backdrop-filter: blur(4px);
  }
}

/* ============================================================
   SMALL MOBILE (<= 420px): 더 타이트한 화면 대응
============================================================ */
@media (max-width: 420px){
  .hero-lines{ padding-top: 26vh; }
  #astro-overlay,
  #astro-overlay-space,
  #astro-overlay-ocean,
  .hero-sub{
    width: min(320px, 70vw) !important;
    left: 62% !important;
  }
  a.world-home-link{ font-size: 17px !important; }
}

@media (max-width: 768px){

  /* 1) 홈 히어로 여정: 모바일에서 더 길게(연출 시간 확보) */
  .home .hero-thought{
    height: 220vh !important;
  }

  /* 2) 최근글 섹션을 늦게 시작 (지구/별 페이드인 끝나기 전에 올라오지 않게) */
  .home .home-latest{
    padding-top: 70vh !important; /* ✅ 숫자만 조절하면 됨: 60~90vh 권장 */
    z-index: 30 !important;       /* 콘텐츠는 배경 위 */
    position: relative;
  }

  /* 3) 별/지구 네비/오버레이가 항상 카드 위 */
  .hero-star-nav,
  .hero-creature-nav{
    z-index: 300 !important;
  }
  #astro-overlay-space,
  #astro-overlay-ocean,
  #astro-overlay,
  .hero-earth{
    z-index: 260 !important;
  }

  /* 4) (선택) 연출 중에는 최근글 카드가 터치를 먹지 않게 */
  .home .hero-thought:not(.hero-out) ~ .home-latest{
    pointer-events: none;
  }
  /* hero-out 이후엔 다시 클릭 가능 */
  .home .hero-thought.hero-out ~ .home-latest{
    pointer-events: auto;
  }
}

@media (max-width: 768px){

  /* =========================
     1) 가운데로 더 모으기 (rad 축소)
  ========================= */
  body.theme-space .hero-star-nav.is-active .star-link,
  body.theme-ocean .hero-creature-nav.is-active .creature-link{
    /* 기존 var(--rad)이 너무 커서 퍼짐 → 모바일은 더 짧게 */
    transform:
      translate(-50%,-50%)
      rotate(var(--ang))
      translateX(clamp(120px, 22vw, 190px)) /* ✅ 핵심: 반지름 줄임 */
      rotate(calc(var(--ang) * -1))
      scale(1.05);
  }

  /* =========================
     2) 이미지(도트) 크기 키우기
  ========================= */
  body.theme-space .star-dot,
  body.theme-ocean .creature-dot{
    width: 86px !important;
    height: 86px !important;
  }

  /* 고래(whatever) / 큰 아이콘은 조금 더 크게 */
  body.theme-space .star-5 .star-dot{ width: 120px !important; height: 120px !important; }
  body.theme-ocean .creature-5 .creature-dot{ height: 150px !important; } /* 너는 height 기반이라 별도 */

  /* =========================
     3) 터치 영역(클릭)도 커지게
  ========================= */
  body.theme-space .hero-star-nav.is-active .star-link,
  body.theme-ocean .hero-creature-nav.is-active .creature-link{
    padding: 10px;                 /* ✅ 터치 여유 */
    pointer-events: auto !important;
  }

  /* 라벨은 폰에서 계속 숨김 유지 */
  .star-label,
  .creature-label{ display:none !important; }
}

/* 더 작은 폰(<=420px)에서는 더 중앙/더 크게 */
@media (max-width: 420px){

  body.theme-space .hero-star-nav.is-active .star-link,
  body.theme-ocean .hero-creature-nav.is-active .creature-link{
    transform:
      translate(-50%,-50%)
      rotate(var(--ang))
      translateX(clamp(105px, 24vw, 165px)) /* 더 모으기 */
      rotate(calc(var(--ang) * -1))
      scale(1.08);
  }

  body.theme-space .star-dot,
  body.theme-ocean .creature-dot{
    width: 92px !important;
    height: 92px !important;
  }

  body.theme-space .star-5 .star-dot{ width: 132px !important; height: 132px !important; }
}

@media (max-width: 768px){

  /* =========================
     1) 고래(바다 모드) 위치: 더 중앙으로
     - 별(star)은 건드리지 않음
  ========================= */
  body.theme-ocean .hero-creature-nav.is-active .creature-link{
    transform:
      translate(-50%,-50%)
      rotate(var(--ang))
      translateX(clamp(95px, 20vw, 150px))  /* ✅ 기존보다 더 안쪽 */
      rotate(calc(var(--ang) * -1))
      scale(1.08);
  }

  /* =========================
     2) 고래 크기만 키우기
     - 특히 creature-5 (고래 메인)
  ========================= */
  body.theme-ocean .creature-dot{
    height: 120px !important;  /* 기본 생물도 살짝 업 */
  }

  body.theme-ocean .creature-5 .creature-dot{
    height: 190px !important;  /* ✅ 고래 확실히 크게 */
  }
}

/* 더 작은 폰에서는 고래를 더 중앙 + 더 크게 */
@media (max-width: 420px){

  body.theme-ocean .hero-creature-nav.is-active .creature-link{
    transform:
      translate(-50%,-50%)
      rotate(var(--ang))
      translateX(clamp(80px, 22vw, 130px))  /* ✅ 거의 중앙 */
      rotate(calc(var(--ang) * -1))
      scale(1.12);
  }

  body.theme-ocean .creature-dot{
    height: 130px !important;
  }

  body.theme-ocean .creature-5 .creature-dot{
    height: 220px !important;  /* ✅ 작은 폰에서 고래 임팩트 */
  }
}

@media (max-width: 768px){

  /* 기본은 숨김 유지(화면 복잡해지는 것 방지) */
  .star-label,
  .creature-label{ display:none !important; }

  /* ✅ 네비 활성화 상태에서만 라벨 노출 */
  body.theme-space .hero-star-nav.is-active .star-label,
  body.theme-ocean .hero-creature-nav.is-active .creature-label{
    display: inline-block !important;
    font-size: 12px;
    line-height: 1.2;
    color: rgba(230, 250, 255, 0.92);
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(0, 10, 25, 0.55);
    border: 1px solid rgba(0, 200, 255, 0.18);
    backdrop-filter: blur(6px);
    text-shadow: 0 6px 18px rgba(0,0,0,.75);
    max-width: 52vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* 라벨이 아이콘과 너무 붙으면 보기 답답 → 간격 조금 */
  .star-link,
  .creature-link{ gap: 8px !important; }
}

/* 작은 폰에서는 라벨이 더 커 보이게 */
@media (max-width: 420px){
  body.theme-space .hero-star-nav.is-active .star-label,
  body.theme-ocean .hero-creature-nav.is-active .creature-label{
    font-size: 13px;
    max-width: 60vw;
    padding: 7px 11px;
  }
}

.site-header{
  background: linear-gradient(180deg, rgba(0, 10, 25, 0.363), rgba(0,10,25,0)) !important;
  backdrop-filter: blur(6px);
}

/* ============================================================
   SPACE: TWINKLE STARS (확실한 존재감 버전)
============================================================ */

/* 별빛 레이어: 배경(0) 위, 지구(6) 아래 정도 */
body.theme-space .twinkle-field{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

/* 별 점 공통 */
body.theme-space .twinkle-field .tw{
  position: absolute;
  border-radius: 999px;
  background: rgba(255,255,255,0.98);
  /* 별빛 번짐 */
  box-shadow:
    0 0 10px rgba(200,230,255,0.55),
    0 0 18px rgba(120,200,255,0.22);
  opacity: 0.18;

  /* “반짝 + 살짝 이동” 두 애니메이션 */
  animation-name: twinklePop, twinkleDrift;
  animation-timing-function: ease-in-out, linear;
  animation-iteration-count: infinite, infinite;
  will-change: opacity, transform, filter;
}

/* 반짝임: 짧고 강하게 ‘팍’ */
@keyframes twinklePop{
  0%   { opacity: .10; filter: blur(0px); }
  10%  { opacity: .22; }
  14%  { opacity: 1.15; filter: blur(0px); }  /* 🔥 피크 */
  18%  { opacity: .18; }
  52%  { opacity: .14; }
  58%  { opacity: .80; }                     /* 🔥 두번째 피크 */
  62%  { opacity: .16; }
  100% { opacity: .12; }
}

/* 아주 미세한 이동(정적 느낌 제거) */
@keyframes twinkleDrift{
  0%   { transform: translate(0,0) scale(var(--tw-s,1)); }
  100% { transform: translate(var(--dx, 12px), var(--dy, -10px)) scale(var(--tw-s,1)); }
}

/* 개별 별: 위치 + 크기 + 반짝 주기/딜레이 + 이동벡터(불규칙감) */
/* 크기: 2~4px 섞기 (확실히 보이게) */
body.theme-space .twinkle-field .s1  { left: 10%; top: 16%; width:3px; height:3px; --tw-s:1.1; --dx: 10px; --dy:-8px;  animation-duration: 3.2s, 18s; animation-delay: -1.1s, -4s; }
body.theme-space .twinkle-field .s2  { left: 78%; top: 20%; width:4px; height:4px; --tw-s:1.2; --dx:-14px; --dy:10px;  animation-duration: 5.1s, 22s; animation-delay: -3.4s, -9s; }
body.theme-space .twinkle-field .s3  { left: 62%; top: 58%; width:2px; height:2px; --tw-s:1.0; --dx: 12px; --dy:12px;  animation-duration: 4.0s, 20s; animation-delay: -2.2s, -7s; }
body.theme-space .twinkle-field .s4  { left: 22%; top: 64%; width:4px; height:4px; --tw-s:1.3; --dx: 16px; --dy:-6px;  animation-duration: 6.0s, 26s; animation-delay: -4.8s, -3s; }
body.theme-space .twinkle-field .s5  { left: 40%; top: 30%; width:3px; height:3px; --tw-s:1.15;--dx:-10px; --dy:-12px; animation-duration: 3.6s, 19s; animation-delay: -0.9s, -11s; }

body.theme-space .twinkle-field .s6  { left: 88%; top: 72%; width:2px; height:2px; --tw-s:1.0; --dx:-18px; --dy: 8px;  animation-duration: 4.4s, 23s; animation-delay: -1.6s, -5s; }
body.theme-space .twinkle-field .s7  { left: 6%;  top: 78%; width:4px; height:4px; --tw-s:1.35;--dx: 14px; --dy:14px;  animation-duration: 6.6s, 28s; animation-delay: -5.1s, -10s; }
body.theme-space .twinkle-field .s8  { left: 52%; top: 12%; width:2px; height:2px; --tw-s:0.95;--dx: 8px;  --dy:-16px; animation-duration: 3.9s, 21s; animation-delay: -2.9s, -6s; }
body.theme-space .twinkle-field .s9  { left: 33%; top: 52%; width:3px; height:3px; --tw-s:1.05;--dx:-12px; --dy: 6px;  animation-duration: 5.4s, 24s; animation-delay: -1.2s, -8s; }
body.theme-space .twinkle-field .s10 { left: 70%; top: 80%; width:4px; height:4px; --tw-s:1.4; --dx: 20px; --dy:-10px; animation-duration: 3.1s, 17s; animation-delay: -2.4s, -12s; }

body.theme-space .twinkle-field .s11 { left: 16%; top: 40%; width:2px; height:2px; --tw-s:0.9; --dx: 10px; --dy: 10px; animation-duration: 7.2s, 30s; animation-delay: -4.6s, -14s; }
body.theme-space .twinkle-field .s12 { left: 92%; top: 40%; width:3px; height:3px; --tw-s:1.25;--dx:-16px; --dy:-8px; animation-duration: 4.2s, 22s; animation-delay: -0.9s, -9s; }
body.theme-space .twinkle-field .s13 { left: 58%; top: 36%; width:3px; height:3px; --tw-s:1.1; --dx: 12px; --dy:-14px; animation-duration: 5.8s, 25s; animation-delay: -3.9s, -2s; }
body.theme-space .twinkle-field .s14 { left: 26%; top: 22%; width:4px; height:4px; --tw-s:1.3; --dx:-20px; --dy: 8px;  animation-duration: 3.4s, 18s; animation-delay: -1.7s, -7s; }
body.theme-space .twinkle-field .s15 { left: 44%; top: 74%; width:2px; height:2px; --tw-s:1.0; --dx: 16px; --dy: 6px;  animation-duration: 6.4s, 27s; animation-delay: -5.7s, -4s; }

/* ============================================================
   SPACE: BIG FLARE STARS (가끔만 강하게)
============================================================ */

body.theme-space .twinkle-field .tw.flare{
  width: 7px;
  height: 7px;
  opacity: .06;
  background: rgba(255,255,255,0.98);

  /* 영화 같은 강한 flare */
  box-shadow:
    0 0 18px rgba(230,245,255,0.85),
    0 0 40px rgba(140,210,255,0.45),
    0 0 70px rgba(80,160,255,0.25);

  /* flare는 전용 애니메이션 사용 */
  animation-name: flareRare, twinkleDrift;
  animation-timing-function: ease-in-out, linear;
  animation-iteration-count: infinite, infinite;
}

/* 오래 잠잠 → 짧게 강하게 */
@keyframes flareRare{
  0%   { opacity: .04; filter: blur(0px); }
  78%  { opacity: .04; }
  82%  { opacity: .45; }
  84%  { opacity: 1.3; }   /* 🔥 순간 폭발 */
  86%  { opacity: .18; filter: blur(0.4px); }
  100% { opacity: .05; }
}

/* flare 개별 크기 & 주기 (가끔만) */
body.theme-space .twinkle-field .s3.flare  { width:8px; height:8px; animation-duration: 14s, 24s; }
body.theme-space .twinkle-field .s9.flare  { width:7px; height:7px; animation-duration: 18s, 30s;
  background: rgba(220,235,255,0.98);
  box-shadow:
    0 0 18px rgba(210,235,255,0.9),
    0 0 42px rgba(120,190,255,0.5),
    0 0 70px rgba(80,150,255,0.3); }
body.theme-space .twinkle-field .s14.flare { width:8px; height:8px; animation-duration: 16s, 28s; }


/* ✅ 바다모드: 잠수함 물속 느낌 (페이드는 JS/--sub-o에 맡김) */
body.theme-ocean #astro-overlay-ocean,
body.theme-ocean #astro-overlay,
body.theme-ocean .hero-sub{
  z-index: 2 !important;        
  /* opacity 건드리지 마! (페이드 방향 뒤집힘/고정 문제 원인) */
  filter: blur(0.6px) saturate(0.85) brightness(0.85) !important;
}

/* ✅ 굴절 레이어를 잠수함 위로 */
body.theme-ocean .hero-thought::after{
  z-index: 3 !important;
}

/* ✅ 바다모드: 잠수함 자체 발광만 살짝 다운(페이드는 그대로) */
body.theme-ocean #astro-img-ocean{
  filter:
    drop-shadow(0 0 16px rgba(0,200,255,.22))
    drop-shadow(0 0 40px rgba(0,100,200,.16))
    drop-shadow(0 30px 80px rgba(0,0,0,.60))
    !important;
}

/* ✅ afterglow 텍스트 가시성 복구 (space + ocean) */
body.theme-space .afterglow-line,
body.theme-ocean .afterglow-line{
  color: rgba(230,235,238,0.9) !important;
  opacity: 1 !important;
  position: relative;
  z-index: 6;
}

body.theme-space .post-afterglow,
body.theme-ocean .post-afterglow{
  position: relative;
  z-index: 5;
}

/* 홈 첫화면: 타이틀만 보이게(오버레이) */
.home .home-site-title{
  position: absolute;  /* fixed → absolute */
  top: 1%;
  left: 20%;
  z-index: 999;
  font-size: clamp(18px, 2.8vw, 26px);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(231, 232, 233, 0.836);
  text-shadow: 0 2px 22px rgba(14, 14, 14, 0.55);
  pointer-events: none;
}
/* 홈 첫화면: 메뉴는 숨김(원하면) */
.home .site-header .main-nav{
  display: none !important;
} 

/* ============================================================
   SPACE: SHOOTING STAR (별똥별)
============================================================ */
.shooting-star {
  position: fixed;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    rgba(200, 230, 255, 0),       /* 꼬리 끝 = 투명 */
    rgba(255, 255, 255, 0.95)     /* 머리 = 밝음 */
  );
  box-shadow: 0 0 8px rgba(180, 220, 255, 0.55),
              0 0 18px rgba(120, 180, 255, 0.25);
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transform-origin: right center;
}

@keyframes shootingStar-left {
  0%   { transform: rotate(135deg) translateX(0);     opacity: 0; }
  8%   { opacity: 1; }
  88%  { opacity: 0.75; }
  100% { transform: rotate(135deg) translateX(200vw); opacity: 0; }
}

@keyframes shootingStar-right {
  0%   { transform: rotate(45deg) translateX(0);     opacity: 0; }
  8%   { opacity: 1; }
  88%  { opacity: 0.75; }
  100% { transform: rotate(45deg) translateX(200vw); opacity: 0; }
}

/* ============================================================
   OCEAN: JELLYFISH SWIM – 바다 테마 싱글 포스트
============================================================ */
.jellyfish-swim {
  position: fixed;
  bottom: -180px;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
}

.jellyfish-swim img {
  height: auto;
  display: block;
  filter: drop-shadow(0 0 12px rgba(100, 159, 255, 0))
          drop-shadow(0 0 28px rgba(60, 120, 220, 0.2));
}

@keyframes jellyfishRise {
  0%   { transform: translateY(0)      translateX(0);                           opacity: 0;    }

  1.5% { transform: translateY(-8vh)   translateX(calc(var(--drift,0px)*0.015)); opacity: 0.55; }
  4%   { transform: translateY(-5.6vh) translateX(calc(var(--drift,0px)*0.04));  }

  5.5% { transform: translateY(-13.6vh) translateX(calc(var(--drift,0px)*0.055)); }
  8%   { transform: translateY(-11.2vh) translateX(calc(var(--drift,0px)*0.08));  }

  9.5% { transform: translateY(-19.2vh) translateX(calc(var(--drift,0px)*0.095)); }
  12%  { transform: translateY(-16.8vh) translateX(calc(var(--drift,0px)*0.12));  }

  13.5%{ transform: translateY(-24.8vh) translateX(calc(var(--drift,0px)*0.135)); }
  16%  { transform: translateY(-22.4vh) translateX(calc(var(--drift,0px)*0.16));  }

  17.5%{ transform: translateY(-30.4vh) translateX(calc(var(--drift,0px)*0.175)); }
  20%  { transform: translateY(-28vh)   translateX(calc(var(--drift,0px)*0.20));  }

  21.5%{ transform: translateY(-36vh)   translateX(calc(var(--drift,0px)*0.215)); }
  24%  { transform: translateY(-33.6vh) translateX(calc(var(--drift,0px)*0.24));  }

  25.5%{ transform: translateY(-41.6vh) translateX(calc(var(--drift,0px)*0.255)); }
  28%  { transform: translateY(-39.2vh) translateX(calc(var(--drift,0px)*0.28));  }

  29.5%{ transform: translateY(-47.2vh) translateX(calc(var(--drift,0px)*0.295)); }
  32%  { transform: translateY(-44.8vh) translateX(calc(var(--drift,0px)*0.32));  }

  33.5%{ transform: translateY(-52.8vh) translateX(calc(var(--drift,0px)*0.335)); }
  36%  { transform: translateY(-50.4vh) translateX(calc(var(--drift,0px)*0.36));  }

  37.5%{ transform: translateY(-58.4vh) translateX(calc(var(--drift,0px)*0.375)); }
  40%  { transform: translateY(-56vh)   translateX(calc(var(--drift,0px)*0.40));  }

  41.5%{ transform: translateY(-64vh)   translateX(calc(var(--drift,0px)*0.415)); }
  44%  { transform: translateY(-61.6vh) translateX(calc(var(--drift,0px)*0.44));  }

  45.5%{ transform: translateY(-69.6vh) translateX(calc(var(--drift,0px)*0.455)); }
  48%  { transform: translateY(-67.2vh) translateX(calc(var(--drift,0px)*0.48));  }

  49.5%{ transform: translateY(-75.2vh) translateX(calc(var(--drift,0px)*0.495)); }
  52%  { transform: translateY(-72.8vh) translateX(calc(var(--drift,0px)*0.52));  }

  53.5%{ transform: translateY(-80.8vh) translateX(calc(var(--drift,0px)*0.535)); }
  56%  { transform: translateY(-78.4vh) translateX(calc(var(--drift,0px)*0.56));  }

  57.5%{ transform: translateY(-86.4vh) translateX(calc(var(--drift,0px)*0.575)); }
  60%  { transform: translateY(-84vh)   translateX(calc(var(--drift,0px)*0.60));  }

  61.5%{ transform: translateY(-92vh)   translateX(calc(var(--drift,0px)*0.615)); }
  64%  { transform: translateY(-89.6vh) translateX(calc(var(--drift,0px)*0.64));  }

  65.5%{ transform: translateY(-97.6vh) translateX(calc(var(--drift,0px)*0.655)); }
  68%  { transform: translateY(-95.2vh) translateX(calc(var(--drift,0px)*0.68));  }

  69.5%{ transform: translateY(-103.2vh) translateX(calc(var(--drift,0px)*0.695)); }
  72%  { transform: translateY(-100.8vh) translateX(calc(var(--drift,0px)*0.72));  }

  73.5%{ transform: translateY(-108.8vh) translateX(calc(var(--drift,0px)*0.735)); }
  76%  { transform: translateY(-106.4vh) translateX(calc(var(--drift,0px)*0.76));  }

  77.5%{ transform: translateY(-114.4vh) translateX(calc(var(--drift,0px)*0.775)); opacity: 0.45; }
  80%  { transform: translateY(-112vh)   translateX(calc(var(--drift,0px)*0.80));  }

  81.5%{ transform: translateY(-120vh)   translateX(calc(var(--drift,0px)*0.815)); }
  84%  { transform: translateY(-117.6vh) translateX(calc(var(--drift,0px)*0.84));  }

  85.5%{ transform: translateY(-125.6vh) translateX(calc(var(--drift,0px)*0.855)); opacity: 0.4; }
  88%  { transform: translateY(-123.2vh) translateX(calc(var(--drift,0px)*0.88));  }

  89.5%{ transform: translateY(-131.2vh) translateX(calc(var(--drift,0px)*0.895)); opacity: 0.4; }
  92%  { transform: translateY(-128.8vh) translateX(calc(var(--drift,0px)*0.92));  }

  93.5%{ transform: translateY(-136.8vh) translateX(calc(var(--drift,0px)*0.935)); opacity: 0.2; }
  96%  { transform: translateY(-134.4vh) translateX(calc(var(--drift,0px)*0.96));  }

  97.5%{ transform: translateY(-142.4vh) translateX(calc(var(--drift,0px)*0.975)); opacity: 0.1; }
  100% { transform: translateY(-140vh)   translateX(var(--drift,0px));             opacity: 0;   }
}

@keyframes jellyfishPulse {
  0%   { transform: scaleX(1)    scaleY(1);    }
  25%  { transform: scaleX(0.65) scaleY(1.18); } /* 가로 수축 + 세로 팽창 */
  50%  { transform: scaleX(0.88) scaleY(0.94); } /* 살짝 복귀 */
  70%  { transform: scaleX(0.72) scaleY(1.12); } /* 다시 수축 */
  100% { transform: scaleX(1)    scaleY(1);    } /* 원래대로 */
}