/* =========================
   ROOT
========================= */

:root {

  --glass:
    rgba(255,255,255,0.12);

  --glass-strong:
    rgba(255,255,255,0.22);

  --glass-heavy:
    rgba(255,255,255,0.82);

  --text-main:
    #333;

  --text-sub:
    #666;

  --shadow:
    0 10px 25px rgba(0,0,0,0.08);

  --transition-fast:
    0.25s;

  --transition-normal:
    0.35s;

  --transition-slow:
    0.5s;
}

/* =========================
   RESET / BASE
========================= */

html {

  scroll-behavior: smooth;
}

body {

  margin: 0;

  font-family:
    'M PLUS Rounded 1c',
    sans-serif;

  background: url("../images/bg.png") center center / cover no-repeat fixed;

  min-height: 100vh;

  color: var(--text-main);
}

/* 背景レイヤー */

body::before {

  content: "";

  position: fixed;

  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  background:
    rgba(255,255,255,0.35);

  pointer-events: none;

  z-index: -1;
}

/* =========================
   COMMON UI
========================= */

/* メニューボタン */

.menu-button {

  position: fixed;

  top: 20px;
  left: 20px;

  font-size: 30px;

  cursor: pointer;

  z-index: 100;

  color: white;

  mix-blend-mode: difference;
}

/* =========================
   SIDE MENU
========================= */

#side-menu {

  position: fixed;

  top: 0;
  left: -250px;

  width: 250px;
  height: 100%;

  background:
    rgba(255,255,255,0.7);

  backdrop-filter: blur(10px);

  padding-top: 80px;

  transition:
    var(--transition-normal);

  z-index: 90;
}

#side-menu a {

  display: block;

  padding: 20px;

  color: white;

  text-decoration: none;

  font-size: 20px;

  mix-blend-mode: difference;
}

#side-menu a:hover {

  background:
    rgba(255,255,255,0.4);
}

/* =========================
   SEARCH
========================= */

.search-box {

  position: fixed;

  top: 25px;
  right: 30px;

  z-index: 200;
}

.search-box input {

  width: 220px;

  padding: 10px 14px;

  border:
    1px solid rgba(255,255,255,0.25);

  border-radius: 999px;

  background:
    rgba(255,255,255,0.32);

  backdrop-filter: blur(8px);

  color: #4a4a4a;

  font-size: 14px;

  outline: none;

  transition:
    var(--transition-normal);
}

.search-box input::placeholder {

  color:
    rgba(70,70,70,0.55);
}

.search-box input:focus {

  background:
    rgba(255,255,255,0.42);

  border-color:
    rgba(255,255,255,0.55);
}

/* =========================
   HERO
========================= */

.hero {

  height: 96vh;

 background-image: url("../images/main1.png");

  background-size: cover;

  background-position: center center;

  position: relative;

  overflow: hidden;

  -webkit-mask-image:
    linear-gradient(
      to bottom,
      rgba(0,0,0,1) 70%,
      rgba(0,0,0,0) 100%
    );

  mask-image:
    linear-gradient(
      to bottom,
      rgba(0,0,0,1) 70%,
      rgba(0,0,0,0) 100%
    );
}

/* =========================
   MAIN OVERLAY
========================= */

.overlay {

  width: 100%;
  height: 100%;

  background:
    linear-gradient(
      rgba(0,0,0,0.12),
      rgba(0,0,0,0.18)
    );
}
.overlay h1 {

  font-size: 72px;

  margin: 0;

  font-weight: 700;

  letter-spacing: 2px;
}

.overlay p {

  font-size: 22px;

  margin-top: 10px;

  font-weight: 300;
}

/* =========================
   PAGE HEADER
========================= */

.page-header {

  padding-top: 140px;

  padding-bottom: 70px;

  text-align: center;
}

.page-header h1 {

  font-size: 56px;

  margin-bottom: 10px;

  color: #444;
}

.page-header p {

  font-size: 18px;

  color: #777;
}

/* =========================
   NEWS
========================= */

.news {

  padding: 60px 12%;
}

.news h2 {

  font-size: 32px;

  font-weight: 600;

  margin-bottom: 30px;
}

/* NEWSカード */

.news-card {

  background:
    rgba(255,255,255,0.55);

  backdrop-filter: blur(8px);

  padding: 16px 20px;

  margin-bottom: 15px;

  border-radius: 15px;

  box-shadow:
    0 4px 12px rgba(0,0,0,0.06);

  transition:
    var(--transition-normal);

  cursor: pointer;
}

.news-card:hover {

  transform:
    translateY(-5px);

  box-shadow:
    0 10px 25px rgba(0,0,0,0.15);
}

/* タグ */

.tag {

  display: inline-block;

  padding: 5px 12px;

  border-radius: 20px;

  font-size: 12px;

  margin-bottom: 8px;

  color: white;

  font-weight: 600;

  letter-spacing: 1px;
}

.update {
  background: #6ab7ff;
}

.bug {
  background: #ffb74d;
}

.event {
  background: #81c784;
}

.alert {
  background: #e57373;
}

/* 日付 */

.news-date {

  font-size: 12px;

  color: #999;

  margin-top: 6px;
  margin-bottom: 6px;
}

/* タイトル */

.news-card h3 {

  font-size: 20px;

  margin-top: 5px;
  margin-bottom: 8px;

  font-weight: 600;
}

/* 本文 */

.news-card p {

  font-size: 14px;

  line-height: 1.6;

  color: #555;
}

/* =========================
   ABOUT
========================= */

.about {

  padding: 70px 12%;
}

.about-container {

  width: 100%;

  background:
    rgba(255,255,255,0.4);

  backdrop-filter: blur(10px);

  padding: 45px 55px;

  border-radius: 25px;

  box-shadow:
    0 8px 25px rgba(0,0,0,0.05);

  animation:
    floating 6s ease-in-out infinite;

  box-sizing: border-box;
}

.about-container p {

  font-size: 17px;

  line-height: 2;

  color: #555;

  margin-bottom: 30px;

  font-weight: 300;
}

.about-last {

  font-size: 20px;

  color: #3d5a80 !important;

  font-weight: 400 !important;

  margin-top: 45px;
}

/* 浮遊 */

@keyframes floating {

  0% {
    transform:
      translateY(0px);
  }

  50% {
    transform:
      translateY(-10px);
  }

  100% {
    transform:
      translateY(0px);
  }
}

/* =========================
   WORLD
========================= */

.world-section {

  width: 85%;

  max-width: 1200px;

  margin:
    0 auto 100px;
}

.world-card {

  background:
    rgba(255,255,255,0.12);

  backdrop-filter: blur(10px);

  border:
    1px solid rgba(255,255,255,0.18);

  border-radius: 24px;

  overflow: hidden;

  margin-bottom: 50px;

  transition:
    var(--transition-normal);
}

.world-card:hover {

  transform:
    translateY(-6px);

  background:
    rgba(255,255,255,0.18);
}

.world-card img {

  width: 100%;

  height: 340px;

  object-fit: cover;

  display: block;
}

.world-content {

  padding: 35px;
}

.world-content h2 {

  font-size: 32px;

  margin-bottom: 20px;

  color: #444;
}

.world-content p {

  font-size: 16px;

  line-height: 2;

  color: #555;

  margin-bottom: 18px;
}

/* =========================
   WORLD JOB LINK
========================= */

.world-job-link {

  margin-top: 28px;

  font-size: 14px;

  line-height: 2;

  color: #777;
}

.world-job-link a {

  color: #5c7aa6;

  text-decoration: none;

  margin: 0 4px;

  transition: 0.25s;
}

.world-job-link a:hover {

  opacity: 0.7;
}

/* =========================
   SYSTEM
========================= */

.system-section {

  width: 85%;

  max-width: 1300px;

  margin:
    0 auto 120px;
}

.system-card {

  display: flex;

  align-items: center;

  gap: 60px;

  margin-bottom: 80px;

  padding: 40px;

  border-radius: 30px;

  background:
    linear-gradient(
      rgba(255,255,255,0.92),
      rgba(240,245,255,0.92)
    );

  border:
    1px solid rgba(255,255,255,0.5);

  backdrop-filter: blur(14px);

  transition:
    var(--transition-normal);
}

.system-card:hover {

  transform:
    translateY(-8px);

  box-shadow:
    0 20px 40px rgba(0,0,0,0.08);
}

.system-card.reverse {

  flex-direction: row-reverse;
}

.system-image {

  flex: 1;
}

.system-image img {

  width: 100%;

  height: 420px;

  object-fit: cover;

  border-radius: 24px;
}

.system-text {

  flex: 1;
}

.system-label {

  display: inline-block;

  font-size: 12px;

  letter-spacing: 3px;

  color: #7b8ca8;

  margin-bottom: 18px;
}

.system-text h2 {

  font-size: 34px;

  margin-bottom: 26px;

  color: #333;
}

.system-text p {

  font-size: 16px;

  line-height: 2.1;

  color: #555;
}

/* =========================
   GALLERY
========================= */

.gallery-section {

  width: 90%;

  max-width: 1450px;

  margin:
    0 auto 140px;
}

.gallery-grid {

  display: grid;

  grid-template-columns:
    repeat(auto-fit, minmax(320px, 1fr));

  gap: 28px;
}

.gallery-item {

  position: relative;

  overflow: hidden;

  border-radius: 28px;

  background:
    rgba(255,255,255,0.14);

  backdrop-filter: blur(10px);

  cursor: pointer;

  transition:
    var(--transition-normal);
}

.gallery-item.large {

  grid-column: span 2;
}

.gallery-item:hover {

  transform:
    translateY(-8px);

  box-shadow:
    0 25px 50px rgba(0,0,0,0.12);
}

.gallery-item img {

  width: 100%;

  height: 340px;

  object-fit: cover;

  display: block;

  transition:
    var(--transition-slow);
}

.gallery-item.large img {

  height: 430px;
}

.gallery-item:hover img {

  transform:
    scale(1.04);
}

/* 情報 */

.gallery-info {

  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  padding: 28px;

  background:
    linear-gradient(
      transparent,
      rgba(0,0,0,0.72)
    );

  color: white;
}

.gallery-info span {

  display: block;

  font-size: 12px;

  letter-spacing: 3px;

  opacity: 0.7;

  margin-bottom: 10px;
}

.gallery-info h3 {

  font-size: 28px;

  margin-bottom: 10px;
}

.gallery-info p {

  font-size: 14px;

  line-height: 1.8;

  opacity: 0.9;
}

/* more */

.gallery-more {

  text-align: center;

  margin-top: 80px;

  font-size: 20px;

  letter-spacing: 4px;

  color:
    rgba(80,80,80,0.6);

  font-style: italic;
}

/* モーダル */

.gallery-modal {

  position: fixed;

  inset: 0;

  background:
    rgba(0,0,0,0.86);

  display: none;

  align-items: center;
  justify-content: center;

  z-index: 300;

  padding: 40px;

  backdrop-filter: blur(8px);
}

.gallery-modal img {

  max-width: 90%;

  max-height: 90%;

  border-radius: 24px;

  box-shadow:
    0 25px 60px rgba(0,0,0,0.45);
}

/* =========================
   SYNC STATUS
========================= */

#sync-status {

  width: 90%;

  max-width: 1000px;

  margin:
    40px auto 20px;

  text-align: right;

  font-size: 0.7rem;

  letter-spacing: 1px;

  font-family: monospace;

  color:
    rgba(255,255,255,0.75);

  text-shadow:
    0 0 6px rgba(0,0,0,0.6);
}

.sync-box {

  display: inline-block;
}

.sync-value {

  margin: 0;
}

.sync-state {

  margin-top: 4px;
}

/* phase */

.phase-1,
.phase-2,
.phase-3 {

  color:
    rgba(255,255,255,0.82);
}

.phase-4,
.phase-5 {

  color:
    rgba(255,120,120,0.92);
}

/* =========================
   ARCHIVE
========================= */

.archive-wrapper {

  position: fixed;

  bottom: 25px;
  left: 25px;

  z-index: 200;
}

/* =========================
   BUTTON
========================= */

.archive-button {

  padding: 10px 18px;

  border:
    1px solid rgba(255,255,255,0.18);

  border-radius: 999px;

  background:
    rgba(18,22,28,0.72);

  backdrop-filter: blur(12px);

  box-shadow:
    0 4px 18px rgba(0,0,0,0.22);

  color:
    rgba(245,248,252,0.92);

  font-size: 12px;

  letter-spacing: 2px;

  font-family:
    'M PLUS Rounded 1c',
    sans-serif;

  cursor: pointer;

  transition:
    var(--transition-normal);
}

.archive-button:hover {

  background:
    rgba(28,34,42,0.88);

  transform:
    translateY(-1px);
}

/* =========================
   BOX
========================= */

.archive-box {

  width: 280px;

  max-height: 340px;

  overflow-y: auto;

  margin-top: 12px;

  padding: 18px;

  border-radius: 22px;

  border:
    1px solid rgba(255,255,255,0.08);

  background:
    rgba(10,12,18,0.86);

  backdrop-filter: blur(18px);

  box-shadow:
    0 12px 35px rgba(0,0,0,0.35),
    0 0 0 1px rgba(255,255,255,0.03) inset;

  display: none;

  animation:
    archiveFade 0.25s ease;
}

.archive-box.open {

  display: block;
}

/* =========================
   SCROLL
========================= */

.archive-box::-webkit-scrollbar {

  width: 6px;
}

.archive-box::-webkit-scrollbar-thumb {

  background:
    rgba(255,255,255,0.18);

  border-radius: 999px;
}

/* =========================
   ITEM
========================= */

.archive-item {

  margin-bottom: 12px;

  padding-bottom: 12px;

  border-bottom:
    1px solid rgba(255,255,255,0.05);

  font-size: 13px;

  line-height: 1.8;

  color:
    rgba(228,236,244,0.82);

  font-family:
    'IBM Plex Mono',
    monospace;

  word-break: break-word;
}

.archive-item:last-child {

  margin-bottom: 0;

  padding-bottom: 0;

  border-bottom: none;
}

/* =========================
   LINK
========================= */

.archive-item a {

  color:
    rgba(155,235,205,0.92);

  text-decoration: none;

  transition: 0.2s;
}

.archive-item a:hover {

  opacity: 0.7;
}

/* =========================
   ANIMATION
========================= */

@keyframes archiveFade {

  from {

    opacity: 0;

    transform:
      translateY(6px);
  }

  to {

    opacity: 1;

    transform:
      translateY(0);
  }

}

/* =========================
   SUPPORT
========================= */

.support-section {

  width: 88%;

  max-width: 1200px;

  margin: 0 auto 140px;
}

/* =========================
   サポートカード
========================= */

.support-card-grid {

  display: grid;

  grid-template-columns:
    repeat(auto-fit, minmax(280px, 1fr));

  gap: 24px;

  margin-bottom: 45px;
}

.support-card {

  background: rgba(255,255,255,0.78);

  backdrop-filter: blur(12px);

  border:
    1px solid rgba(255,255,255,0.25);

  border-radius: 20px;

  padding: 34px;

  transition: 0.35s;

  box-shadow:
    0 8px 24px rgba(0,0,0,0.05);
}

.support-card:hover {

  transform: translateY(-5px);

  box-shadow:
    0 18px 36px rgba(0,0,0,0.08);
}

.support-card span {

  display: inline-block;

  font-size: 11px;

  letter-spacing: 3px;

  color: #8a96aa;

  margin-bottom: 18px;
}

.support-card h3 {

  font-size: 26px;

  margin-bottom: 16px;

  color: #222;

  font-weight: 500;
}

.support-card p {

  font-size: 14px;

  line-height: 2;

  color: #666;
}

/* =========================
   注意表示
========================= */

.support-warning {

  margin-bottom: 40px;

  padding: 20px 26px;

  border-radius: 16px;

  background:
    rgba(255,255,255,0.72);

  backdrop-filter: blur(10px);

  border:
    1px solid rgba(255,255,255,0.3);

  color: #666;

  font-size: 14px;

  line-height: 2;

  box-shadow:
    0 8px 20px rgba(0,0,0,0.04);
}

/* =========================
   フォーム
========================= */

.support-form-box {

  background:
    rgba(255,255,255,0.82);

  backdrop-filter: blur(14px);

  border:
    1px solid rgba(255,255,255,0.3);

  border-radius: 24px;

  padding: 55px;

  box-shadow:
    0 15px 40px rgba(0,0,0,0.05);
}

/* タイトル */

.support-form-header {

  margin-bottom: 35px;
}

.support-form-header span {

  display: block;

  font-size: 11px;

  letter-spacing: 3px;

  color: #8a96aa;

  margin-bottom: 14px;
}

.support-form-header h2 {

  font-size: 30px;

  font-weight: 500;

  color: #222;

  margin: 0;
}

/* 入力欄 */

.support-form-box input,
.support-form-box textarea {

  width: 100%;

  margin-bottom: 18px;

  padding: 18px 20px;

  border:
    1px solid rgba(0,0,0,0.08);

  border-radius: 14px;

  background:
    rgba(255,255,255,0.9);

  font-family:
    'M PLUS Rounded 1c', sans-serif;

  font-size: 14px;

  color: #333;

  box-sizing: border-box;

  outline: none;

  transition: 0.25s;
}

.support-form-box input:focus,
.support-form-box textarea:focus {

  border-color:
    rgba(120,140,180,0.5);

  background: white;

  box-shadow:
    0 0 0 4px rgba(120,140,180,0.08);
}

.support-form-box textarea {

  min-height: 180px;

  resize: vertical;
}

/* ボタン */

.support-form-box button {

  padding: 15px 34px;

  border: none;

  border-radius: 14px;

  background:
    linear-gradient(
      135deg,
      #3b4252,
      #2d3442
    );

  color: white;

  font-size: 13px;

  letter-spacing: 2px;

  font-family:
    'M PLUS Rounded 1c', sans-serif;

  cursor: pointer;

  transition: 0.3s;

  box-shadow:
    0 8px 18px rgba(0,0,0,0.12);
}

.support-form-box button:hover {

  transform: translateY(-2px);

  opacity: 0.95;
}

/* =========================
   結果表示
========================= */

#support-result {

  margin-top: 30px;

  font-size: 14px;

  line-height: 2;
}

/* =========================
   hidden後エラー
========================= */

.error-main {

  color: #b44;

  font-size: 15px;

  line-height: 2;
}

.error-sub {

  margin-top: 18px;

  font-size: 12px;

  letter-spacing: 1px;

  line-height: 1.9;

  color: rgba(80,80,80,0.75);
}

.error-button {

  background:
    linear-gradient(
      135deg,
      #5b2d2d,
      #412020
    ) !important;
}

/* =========================
   FAQ
========================= */

.faq-section {

  width: 88%;

  max-width: 1000px;

  margin: 0 auto 140px;
}

/* =========================
   FAQ ITEM
========================= */

.faq-item {

  margin-bottom: 18px;

  border-radius: 20px;

  overflow: hidden;

  background:
    rgba(255,255,255,0.78);

  backdrop-filter: blur(12px);

  border:
    1px solid rgba(255,255,255,0.28);

  box-shadow:
    0 10px 24px rgba(0,0,0,0.05);

  transition: 0.3s;
}

.faq-item:hover {

  transform: translateY(-2px);

  box-shadow:
    0 16px 32px rgba(0,0,0,0.08);
}

/* =========================
   質問
========================= */

.faq-question {

  width: 100%;

  padding: 24px 28px;

  border: none;

  background: transparent;

  text-align: left;

  font-size: 16px;

  font-family:
    'M PLUS Rounded 1c', sans-serif;

  color: #222;

  cursor: pointer;

  position: relative;

  transition: 0.25s;
}

.faq-question:hover {

  background:
    rgba(255,255,255,0.18);
}

/* ＋マーク */

.faq-question::after {

  content: "+";

  position: absolute;

  right: 28px;

  top: 50%;

  transform:
    translateY(-50%);

  font-size: 22px;

  color: #888;

  transition: 0.3s;
}

/* 開いた時 */

.faq-answer.open + .faq-question::after {

  transform:
    translateY(-50%)
    rotate(45deg);
}

/* =========================
   回答
========================= */

.faq-answer {

  max-height: 0;

  overflow: hidden;

  padding: 0 28px;

  font-size: 14px;

  line-height: 2;

  color: #666;

  transition:
    max-height 0.35s ease,
    padding 0.35s ease;
}

/* 開いた状態 */

.faq-answer.open {

  max-height: 400px;

  padding:
    0 28px 28px;
}

/* =========================
   hidden後
========================= */

.hidden-question {

  border:
    1px solid rgba(120,120,120,0.15);

  background:
    rgba(255,255,255,0.72);
}

/* 不穏回答 */

.strange-answer {

  color: #6a4b4b;

  letter-spacing: 0.5px;
}

/* =========================
   ABOUT IMAGE
========================= */

.image-about {

  padding: 0;

  background: transparent !important;

  backdrop-filter: none !important;

  box-shadow: none !important;

  animation: none !important;

  text-align: center;
}

/* 画像 */

.image-about img {

  width: 82%;

  max-width: 820px;

  display: block;

  margin: 0 auto;

  opacity: 0.98;

  animation:
  softFloat 7s ease-in-out infinite;

/* 四辺ぼかし（弱め） */

mask-image:
  linear-gradient(
    to bottom,
    transparent 0%,
    black 4%,
    black 96%,
    transparent 100%
  ),
  linear-gradient(
    to right,
    transparent 0%,
    black 4%,
    black 96%,
    transparent 100%
  );

mask-composite: intersect;

-webkit-mask-image:
  linear-gradient(
    to bottom,
    transparent 0%,
    black 4%,
    black 96%,
    transparent 100%
  ),
  linear-gradient(
    to right,
    transparent 0%,
    black 4%,
    black 96%,
    transparent 100%
  );

-webkit-mask-composite: source-in;

  /* 浮遊感 */

  filter:
    drop-shadow(
      0 18px 35px rgba(0,0,0,0.16)
    );
}

/* =========================
   FLOATING IMAGE
========================= */

@keyframes softFloat {

  0% {

    transform:
      translateY(0px);
  }

  50% {

    transform:
      translateY(-14px);
  }

  100% {

    transform:
      translateY(0px);
  }

}

/* =========================
   BBS LAYOUT
========================= */

.bbs-layout {

  width: 92%;

  max-width: 1500px;

  margin: 0 auto 140px;

  display: flex;

  gap: 40px;

  align-items: flex-start;
}

/* 左側 */

.bbs-main {

  flex: 1;
}

/* =========================
   SIDEBAR
========================= */

.bbs-sidebar {

  width: 300px;

  position: sticky;

  top: 120px;
}

/* ボックス */

.thread-nav {

  background:
    rgba(255,255,255,0.72);

  backdrop-filter: blur(12px);

  border-radius: 24px;

  padding: 24px;

  border:
    1px solid rgba(255,255,255,0.25);

  box-shadow:
    0 12px 30px rgba(0,0,0,0.05);
}

/* タイトル */

.thread-nav h3 {

  margin-top: 0;

  margin-bottom: 20px;

  font-size: 18px;

  color: #333;
}

/* リンク */

.thread-nav a {

  display: block;

  margin-bottom: 14px;

  color: #5a6d8a;

  text-decoration: none;

  font-size: 14px;

  line-height: 1.7;

  transition: 0.25s;
}

.thread-nav a:hover {

  opacity: 0.7;

  transform:
    translateX(4px);
}

/* =========================
   THREAD
========================= */

.thread {

  background:
    rgba(255,255,255,0.78);

  backdrop-filter: blur(12px);

  border:
    1px solid rgba(255,255,255,0.25);

  border-radius: 24px;

  padding: 30px;

  margin-bottom: 26px;

  box-shadow:
    0 12px 30px rgba(0,0,0,0.05);
}

/* タイトル */

.thread-title {

  font-size: 24px;

  margin-bottom: 25px;

  color: #222;

  font-weight: 500;
}

/* 投稿 */

.post {

  padding:
    18px 0;

  border-bottom:
    1px solid rgba(0,0,0,0.06);
}

.post:last-child {

  border-bottom: none;
}

/* 投稿ヘッダー */

.post-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 10px;

  font-size: 13px;
}

/* 名前 */

.post-name {

  color: #4b5d7a;

  font-weight: 500;
}

/* 日付 */

.post-date {

  color: #999;
}

/* 本文 */

.post-body {

  font-size: 14px;

  line-height: 2;

  color: #555;
}

/* 不穏 */

.strange-post {

  color: #6a4b4b;
}

.system-post {

  color: #4f5f78;
}

/* =========================
   FOOTER
========================= */

.site-footer {

  width: 100%;

  margin-top: 120px;

  padding:
    28px 6%;

  box-sizing: border-box;

  border-top:
    1px solid rgba(255,255,255,0.15);

  background:
    rgba(255,255,255,0.08);

  backdrop-filter: blur(10px);
}

.footer-inner {

  max-width: 1400px;

  margin: 0 auto;

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 20px;

  flex-wrap: wrap;
}

/* 左 */

.footer-left {

  font-size: 12px;

  letter-spacing: 1px;

  color: rgba(80,80,80,0.72);
}

/* 右 */

.footer-right {

  display: flex;

  gap: 20px;
}

.footer-right a {

  font-size: 12px;

  letter-spacing: 2px;

  color: rgba(70,70,70,0.72);

  text-decoration: none;

  transition: 0.25s;
}

.footer-right a:hover {

  opacity: 0.6;
}

/* =========================
   VOICE LINK
========================= */

.voice-link-section {

  width: 90%;

  max-width: 1200px;

  margin:
    80px auto 100px;
}

.voice-link-card {

  display: block;

  padding:
    45px 50px;

  border-radius: 28px;

  text-decoration: none;

  background:
    rgba(255,248,242,0.88);

  border:
    1px solid rgba(210,190,170,0.55);

  backdrop-filter: blur(8px);

  box-shadow:
    0 10px 35px rgba(0,0,0,0.06);

  transition:
    transform 0.3s,
    box-shadow 0.3s,
    background 0.3s;

  color: #5a4a40;
}

.voice-link-card:hover {

  transform:
    translateY(-4px);

  background:
    rgba(255,250,246,0.94);

  box-shadow:
    0 14px 40px rgba(0,0,0,0.08);
}

.voice-link-label {

  margin-bottom: 16px;

  font-size: 11px;

  letter-spacing: 3px;

  color: #9b8573;
}

.voice-link-card h2 {

  margin: 0 0 18px;

  font-size: 34px;

  color: #5a4a40;
}

.voice-link-card p {

  margin: 0;

  line-height: 2.1;

  color: #77685d;
}

/* =========================
   BEGINNER BANNER
========================= */

.beginner-banner {

  background:
    linear-gradient(
      rgba(255,250,245,0.82),
      rgba(255,245,238,0.88)
    );

  border:
    1px solid rgba(220,205,190,0.7);
}

/* =========================
   SURVEY POPUP
========================= */

.survey-popup {

  position: fixed;

  inset: 0;

  background:
    rgba(0,0,0,0.55);

  display: none;

  align-items: center;

  justify-content: center;

  z-index: 999999;
}

.survey-popup.show {

  display: flex;

  animation: fadePopup 0.4s ease;
}

@keyframes fadePopup {

  from {

    opacity: 0;
  }

  to {

    opacity: 1;
  }

}

.survey-popup-box {

  width: 90%;

  max-width: 980px;

  padding:
    52px 54px;

  border-radius: 30px;

  background:
    rgba(255,248,242,0.96);

  border:
    1px solid rgba(220,205,190,0.8);

  text-align: center;

  box-shadow:
    0 20px 60px rgba(0,0,0,0.18);
}

.survey-popup-label {

  margin-bottom: 16px;

  font-size: 11px;

  letter-spacing: 3px;

  color: #9b8575;
}

.survey-popup-box h2 {

  margin: 0 0 20px;

  font-size: 30px;

  color: #5d4d42;
}

.survey-popup-box p {

  line-height: 2;

  color: #77695d;
}

.survey-popup-button {

  display: inline-block;

  margin-top: 26px;

  padding:
    14px 30px;

  border-radius: 999px;

  background:
    #c8ab90;

  color: #fff;

  text-decoration: none;

  transition: 0.3s;
}

.survey-popup-button:hover {

  opacity: 0.82;
}

.survey-close {

  display: block;

  margin:
    18px auto 0;

  border: none;

  background: none;

  color: #8c7d72;

  cursor: pointer;
}