/* ==========================================================================
   維護頁面共用樣式
   使用頁面：/maintenance.php（維護中）、/maintenance_close.php（服務暫停）
   ========================================================================== */

:root{
  --gold: #78838f;
  --gold-soft: #c7ced5;
  --teal: #2f7fa0;
  --teal-deep: #17566e;
  --ink: #1e2933;
  --ink-soft: rgba(30,41,51,0.72);
  --ink-faint: rgba(30,41,51,0.52);
  --paper: #f2f4f6;
  --card: #ffffff;
}

*{box-sizing:border-box;}

html,body{
  height:100%;
  margin:0;
  padding:0;
}

body{
  background:
    radial-gradient(circle at 50% 12%, rgba(120,131,143,0.12), transparent 45%),
    radial-gradient(circle at 88% 90%, rgba(47,127,160,0.10), transparent 50%),
    linear-gradient(160deg, #ffffff 0%, var(--paper) 55%, #e6eaed 100%);
  color: var(--ink);
  font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  -webkit-text-size-adjust: none;
  overflow-x:hidden;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}

/* 背景細緻光點 */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(120,131,143,.35) 0, transparent 60%),
    radial-gradient(1px 1px at 78% 14%, rgba(47,127,160,.3) 0, transparent 60%),
    radial-gradient(1.5px 1.5px at 34% 68%, rgba(120,131,143,.38) 0, transparent 60%),
    radial-gradient(1px 1px at 62% 82%, rgba(47,127,160,.32) 0, transparent 60%),
    radial-gradient(1px 1px at 90% 55%, rgba(120,131,143,.26) 0, transparent 60%),
    radial-gradient(1.5px 1.5px at 20% 88%, rgba(47,127,160,.26) 0, transparent 60%);
  animation: twinkle 5s ease-in-out infinite alternate;
  pointer-events:none;
}

@keyframes twinkle{
  from{ opacity:.4; }
  to{ opacity:1; }
}

.wrap{
  position:relative;
  z-index:1;
  width:100%;
  max-width:645px;
  margin:24px;
  padding:56px 40px 65px;
  text-align:center;
  background: linear-gradient(180deg, var(--card), #f7f9fb);
  border:1px solid rgba(120,131,143,0.3);
  border-radius:6px;
  box-shadow: 0 30px 70px rgba(30,41,51,0.10), 0 8px 22px rgba(30,41,51,0.06);
}

.wrap::before,
.wrap::after{
  content:"";
  position:absolute;
  width:26px; height:26px;
  border:1px solid rgba(120,131,143,0.5);
}
.wrap::before{ top:14px; left:14px; border-right:none; border-bottom:none; }
.wrap::after{ bottom:14px; right:14px; border-left:none; border-top:none; }

.diamond{
  width:78px;
  height:78px;
  margin:0 auto 26px;
  animation: float 4.5s ease-in-out infinite;
}
.diamond svg{ width:100%; height:100%; display:block; filter: drop-shadow(0 10px 16px rgba(30,41,51,0.14)); }
.facet-fill{ fill:url(#diamondGradient); }
.facet-line{ stroke:rgba(30,41,51,0.35); stroke-width:1; }
.sparkle{
  animation: sparkle 2.4s ease-in-out infinite;
  transform-origin:center;
}
.sparkle.s2{ animation-delay:.6s; }
.sparkle.s3{ animation-delay:1.2s; }

@keyframes float{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-8px); }
}
@keyframes sparkle{
  0%,100%{ opacity:0; transform: scale(0.4); }
  50%{ opacity:1; transform: scale(1); }
}

.brand-en{
  font-family:"Cormorant Garamond", serif;
  letter-spacing:6px;
  font-size:13px;
  color: var(--gold);
  text-transform:uppercase;
  margin:0 0 8px;
}

h1{
  font-size:26px;
  font-weight:700;
  letter-spacing:2px;
  margin:0 0 18px;
  color: var(--ink);
}

.divider{
  width:56px;
  height:1px;
  margin:0 auto 22px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

p.desc{
  font-size:15px;
  line-height:1.9;
  color: var(--ink-soft);
  margin:0 0 10px;
  letter-spacing:.5px;
}

p.desc.small{
  font-size:13.5px;
  color: var(--ink-faint);
  margin-top:22px;
}

/* 狀態標籤：共用版型，live／closed 兩種語氣 */
.status{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:26px 0 6px;
  padding:8px 20px;
  border-radius:999px;
  font-size:13px;
  letter-spacing:2px;
}
.status i{
  width:7px; height:7px;
  border-radius:50%;
}

/* 維護中：湖水藍、脈動中的燈號 */
.status.live{
  border:1px solid rgba(47,127,160,0.35);
  background: rgba(47,127,160,0.06);
  color: var(--teal-deep);
}
.status.live i{
  background: var(--teal);
  box-shadow:0 0 0 0 rgba(47,127,160,0.5);
  animation: pulse 1.8s infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(47,127,160,0.45); }
  70%{ box-shadow:0 0 0 8px rgba(47,127,160,0); }
  100%{ box-shadow:0 0 0 0 rgba(47,127,160,0); }
}

/* 服務暫停：低調靜態燈號 */
.status.closed{
  border:1px solid rgba(30,41,51,0.16);
  background: rgba(30,41,51,0.04);
  color: var(--ink-soft);
}
.status.closed i{
  background: var(--gold);
}

/* 架站中／尚未啟用：金色靜態燈號 */
.status.pending{
  border:1px solid rgba(120,131,143,0.35);
  background: rgba(120,131,143,0.07);
  color: var(--gold);
}
.status.pending i{
  background: var(--gold);
}

.contact{
  margin-top:28px;
  padding-top:22px;
  border-top:1px solid rgba(30,41,51,0.10);
  font-size:13.5px;
  color: var(--ink-faint);
  letter-spacing:1px;
}
.contact a{
  color: var(--gold);
  text-decoration:none;
  font-weight:600;
}
.contact a:hover{ text-decoration:underline; }

@media (max-width:480px){
  .wrap{ padding:44px 24px 34px; }
  h1{ font-size:21px; }
  p.desc{ font-size:14px; }
}