/*astro_portal.css*/

:root{
  --ink:#111;
  --muted:#666;
  --line:rgba(0,0,0,.12);
  --card:rgba(255,255,255,.76);
  --card2:rgba(255,255,255,.62);
  --shadow: 0 18px 48px rgba(0,0,0,.10);
  --radius:18px;

  --maxw: 1120px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: -apple-system,BlinkMacSystemFont,"Noto Sans TC",system-ui,sans-serif;
  color:var(--ink);
  background:#fafafa;
}

/* 柔光背景 */
.bg{
  position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(1100px 520px at 18% 12%, rgba(255,255,255,.95), rgba(255,255,255,0) 60%),
    radial-gradient(900px 520px at 80% 20%, rgba(255,255,255,.80), rgba(255,255,255,0) 58%),
    radial-gradient(900px 520px at 50% 85%, rgba(255,248,235,.72), rgba(255,255,255,0) 60%),
    repeating-radial-gradient(circle at 20% 40%, rgba(0,0,0,.03) 0 1px, rgba(0,0,0,0) 1px 12px),
    linear-gradient(to bottom, rgba(255,255,255,.92), rgba(255,255,255,.74));
  filter: saturate(.92);
}

/* Topbar */
.topbar{
  max-width: var(--maxw);
  margin: 18px auto 0;
  padding: 0 16px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
}
.brand-title{
  font-weight: 900;
  letter-spacing:.2px;
  font-size: 18px;
}
.brand-sub{
  margin-top:4px;
  font-size: 13px;
  color:var(--muted);
}
.topnav{ display:flex; gap:10px; flex-wrap:wrap; }
.navlink{
  font-size: 13px;
  text-decoration:none;
  color:var(--ink);
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.60);
}
.navlink.ghost{ background: transparent; }

/* Layout */
.wrap{
  max-width: var(--maxw);
  margin: 14px auto 40px;
  padding: 0 16px;
}
.card{
  border:1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}
.section-title{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin: 22px 2px 10px;
}
.section-title h2{
  margin:0;
  font-size: 18px;
}
.muted{ color:var(--muted); font-size: 13px; line-height:1.6; }

/* Hero */
.hero{ padding: 18px 18px 16px; }
.hero-head{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:flex-start;
}
.hero-title{
  margin:0;
  font-size: 26px;
  letter-spacing:.2px;
}
.hero-meta{ margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; }
.pill{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.66);
}
.pill.ghost{ background: transparent; }

.hero-right{
  min-width: 240px;
  max-width: 420px;
}
.mini-note{
  font-size: 14px;
  line-height:1.7;
  color:#222;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.62);
}

.hero-grid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
}
.hero-kpi{
  border:1px solid var(--line);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(255,255,255,.55);
}
.kpi-label{ font-size:12px; color:var(--muted); }
.kpi-value{ margin-top:6px; font-size:14px; font-weight:700; }

/* Moon */
.moon{ margin-top: 14px; padding: 16px 18px; }
.moon-row{
  display:grid;
  grid-template-columns: 110px 1fr;
  gap:14px;
  align-items:center;
}
.moon-illus img{
  display: block;
  width: 100%;          /* ✅ 關鍵 */
  height: auto;
  border-radius: 18px;  /* 想要柔邊才留 */
  grid-column: 1 / -1;   /* ✅ 關鍵：橫跨整個 grid */
}

.moon-disc{
  width:64px; height:64px;
  border-radius: 50%;
  border:1px solid rgba(0,0,0,.20);
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.95), rgba(0,0,0,.04) 65%);
}
.moon-body .moon-phase{
  display:flex; gap:10px; align-items:baseline; flex-wrap:wrap;
}
.moon-body .label{ color:var(--muted); font-size:12px; }
.moon-body .value{ font-size:15px; font-weight:800; }
.moon-copy{ margin-top:8px; font-size:14px; line-height:1.7; }
.moon-tips{
  margin-top:10px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
.tip{
  border:1px solid var(--line);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(255,255,255,.55);
}
.tip-title{ font-size:12px; color:var(--muted); margin-bottom:4px; }
.tip-body{ font-size:14px; line-height:1.7; }

/* Planets */
.planet-list{
  display:grid;
  grid-template-columns: 1fr;
  gap:10px;
}

.planet-card{
  border:1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card2);
  padding: 12px;
  display:grid;
  grid-template-columns: 88px 1fr;
  gap:12px;
  align-items:stretch; /* 讓右側能對齊 */
}

.planet-illus{
  width:88px; height:88px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.planet-illus img{
  width:100%; height:100%;
  object-fit: cover;
  display:block;
}
.planet-illus .ph{
  font-size: 12px;
  color: rgba(0,0,0,.45);
  letter-spacing:.2px;
}

.planet-body{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.planet-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

.planet-name{
  font-weight: 900;
  font-size: 16px;
}

.planet-role{
  font-size: 12px;
  color: var(--muted);
  margin-left: 8px;
  font-weight: 700;
}

/* ✅ 右上角「星座標籤卡」：文字 + 圖片（保留位置） */
.planet-pos{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  min-width:110px;
}

.pos-text{
  font-size:13px;
  font-weight:700;
  opacity:.85;
}

/* ⭐ 星座底圖卡片 */
.pos-card{
  width:84px;
  height:84px;
  border-radius:18px;

  background-size: 62%;
  background-position:center;
  background-repeat:no-repeat;

  background-color: transparent;
  border: 0;
  box-shadow: none;
  opacity: .45;              /* 淡一點 */
  filter: saturate(.85);

  backdrop-filter: blur(3px);
}

.planet-pos .pos-icon{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.planet-pos .pos-icon img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}
.planet-pos .pos-ph{
  font-size: 11px;
  color: rgba(0,0,0,.45);
}

.planet-lines{ display:grid; gap:6px; }
.line{
  font-size: 14px;
  line-height: 1.7;
}
.kv{
  color: var(--muted);
  font-size: 12px;
}

.interactions{
  margin-top: 2px;
  display:grid;
  gap:6px;
}
.interaction{
  border-left: 3px solid rgba(0,0,0,.16);
  padding-left: 10px;
}
.interaction-title{
  font-size: 13px;
  font-weight: 900;
}
.interaction-body{
  font-size: 13px;
  color:#222;
  line-height:1.7;
}

/* ✅ 外行星：社會氛圍視覺提示（淡淡就好） */
.planet-card.is-social{
  background: rgba(255,255,255,.56);
}
.planet-card.is-social .planet-name::after{
  content:"  · 社會氛圍";
  font-size: 12px;
  font-weight: 900;
  color: rgba(0,0,0,.42);
}

/* Empty note */
.empty-note{
  margin-top: 10px;
  padding: 12px 14px;
  background: rgba(255,255,255,.62);
}
.empty-note code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
}

/* Easter + CTA */
.easter{ margin-top: 14px; padding: 16px 18px; }
.easter-body{ font-size:14px; line-height:1.8; }

.cta{ margin-top: 16px; padding: 16px 18px; }
.cta-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
.cta-item{
  border:1px solid var(--line);
  border-radius: 16px;
  padding: 12px 12px 14px;
  background: rgba(255,255,255,.55);
}
.cta-title{ font-size: 14px; font-weight: 900; }
.cta-body{ margin-top:6px; font-size: 13px; color: var(--muted); line-height:1.7; }
.btn{
  display:inline-block;
  margin-top: 10px;
  text-decoration:none;
  color:#fff;
  background:#111;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
}
.btn.ghost{
  color:#111;
  background: transparent;
  border:1px solid var(--line);
}

/* Footer */
.footer{
  margin-top: 18px;
  text-align:center;
}

/* Responsive */
@media (max-width: 860px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-right{ min-width: unset; max-width: unset; }
  .cta-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 520px){
  .topbar{ align-items:flex-start; }
  .hero-title{ font-size: 22px; }
  .moon-row{ grid-template-columns: 92px 1fr; }
  .moon-illus{ width:92px; height:92px; }

  .planet-card{ grid-template-columns: 74px 1fr; }
  .planet-illus{ width:74px; height:74px; border-radius: 16px; }

  .planet-pos{ min-width: 78px; padding: 7px 9px; }
  .planet-pos .pos-text{ font-size: 14px; }
  .planet-pos .pos-icon{ width: 34px; height: 34px; }
}



/* =========================
本月概覽：緞帶入口（Hero 右側）
========================= */
.month-ribbon{
  position: relative;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;

  display: block;
  width: 100%;
  max-width: 420px;

  /* 讓它不要撐開右側 */
  line-height: 0;
}

.month-ribbon:hover{
  transform: translateY(-1px);
  filter: drop-shadow(0 16px 34px rgba(0,0,0,.12));
}

.month-ribbon img{
  width: 100%;
  height: auto;              /* ✅ 讓高度跟著圖片比例 */
  aspect-ratio: 6 / 2;       /* ✅ 緞帶常見比例（你可微調 6/2 or 8/2） */
  object-fit: contain;
  background: transparent;
  display:block;
}

/* ✅ 疊在圖片上：中間置中 */
.month-ribbon-text{
  position: absolute;
  inset: 0;

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

  font-weight: 950;
  font-size: 14px;
  letter-spacing: .2px;
  color: rgba(0,0,0,.78);

  /* ✅ 文字位置：沿著緞帶中間偏上 */
  transform: translateY(-4px);

  /* ✅ 柔光底，讓字在淺紫也清楚 */
  background: radial-gradient(closest-side, rgba(255,255,255,.62), rgba(255,255,255,0) 70%);

  text-shadow: 0 2px 10px rgba(255,255,255,.85);
  pointer-events: none;
}


/* =========================
本月概覽 Modal（獨立一套 m- 前綴）
========================= */
.m-modal{ position:fixed; inset:0; display:none; z-index:9998; }
.m-modal.open{ display:block; }
.m-backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(2px);
}

.m-panel{
  position:absolute;
  left:50%;
  top:52%;
  transform: translate(-50%, -50%);
  width: min(760px, 92vw);
  max-height: min(80vh, 820px);
  overflow: hidden;                 /* ✅ panel 不捲動 */
  background-attachment: local;     /* 可有可無（下面會解釋） */


  border: 1px solid rgba(0,0,0,.12);
  border-radius: 18px;
  box-shadow: 0 22px 70px rgba(0,0,0,.22);

  background:
    radial-gradient(900px 260px at 30% 20%, rgba(255,255,255,.7), rgba(255,255,255,0) 60%),
    url("/static/img/parchment1.png"),
    linear-gradient(to bottom, rgba(255,244,226,.9), rgba(255,230,205,.85));

  background-size: auto, cover, auto;
  background-position: center, center, center;
  background-repeat: no-repeat, no-repeat, no-repeat;
}

.m-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.m-title{ font-weight: 950; font-size: 16px; }
.m-sub{ margin-top:4px; color: rgba(0,0,0,.55); font-size:12px; line-height:1.5; }

.m-close{
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.9);
  border-radius: 12px;
  width: 36px;
  height: 36px;
  font-size: 22px;
  line-height: 30px;
  cursor: pointer;
}

.m-body{
  padding: 10px 14px 8px;

  overflow: auto;                         /* ✅ 只有文字捲 */
  -webkit-overflow-scrolling: touch;      /* ✅ iOS 慣性滑動 */
  max-height: calc(min(80vh, 820px) - 72px); /* ✅ 扣掉 header 高度 */
  display: grid;
  gap: 12px;
}

.m-loading{ color: rgba(0,0,0,.6); font-size: 13px; padding: 10px 2px; }

.m-line{
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.72);
  border-radius: 14px;
  padding: 10px 12px;
  margin: 10px 0;
}
.m-line-main{
  font-size: 14px;
  line-height: 1.65;
  color: rgba(0,0,0,.88);
  font-weight: 750;
}
.m-line-sub{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(0,0,0,.55);
}

.m-notes{
  margin: 6px 14px 14px;
  border: 1px dashed rgba(0,0,0,.18);
  border-radius: 14px;
  background: rgba(255,255,255,.45);
  min-height: 56px;  /* ✅ 留白高度 */
}

/* ===== 手機版 Mobile tweaks ===== */
@media (max-width: 520px){

  /* d. 品牌標題不要斷行 */
  .brand-title{
    white-space: nowrap;
    font-size: 16px;
  }

  /* a. 「今天的宇宙氣氛」不要斷行 */
  .hero-title{
    white-space: nowrap;
    font-size: 22px;
    line-height: 1.1;
  }

  /* a. 日期/台北時間同一行 */
  .hero-meta{
    flex-wrap: nowrap;
    gap: 6px;
    overflow: hidden;
  }
  .hero-meta .pill{
    white-space: nowrap;
  }

  /* ✅ 手機：hero 變成上下排列，避免擠爆 */
  .hero-head{
    flex-direction: column;
    align-items: stretch;
  }

  /* ✅ 手機：右側不要再被 min/max-width 限制 */
  .hero-right{
    min-width: 0;       /* ✅ 關鍵：清掉你之前的 240 */
    max-width: none;    /* ✅ 關鍵：清掉你之前的 420 */
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-self: stretch;
  }

  .mini-note{
    width: 100%;
  }

  /* ✅ 手機：緞帶滿版 */
  .month-ribbon{
    position: relative;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;

    display: block;
    width: 100%;
    max-width: 100%;    /* ✅ 不要 420 */
    line-height: 0;
  }

  .month-ribbon img{
    width: 100%;
    height: auto;
    aspect-ratio: 5 / 3;       /* ✅ 手機版緞帶比例微調 */
    border-radius: 14px;
  }

  .month-ribbon-text{
    font-size: 14px;
    transform: translateY(-4px);
  }
}

/* ===== Month modal list ===== */
.m-body{
  display: grid;
  gap: 10px;
}

.m-line{
  background: transparent;
  border: 0;
  padding: 8px 4px;   /* 留一點呼吸空間 */
}


.m-line-main{
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .2px;
}

.m-line-sub{
  margin-top: 6px;
  font-size: 13px;
  color: rgba(0,0,0,.62);
  line-height: 1.6;
}

.m-notes{
  margin-top: 10px;
  padding: 0;            /* 或 10px 14px */
  border: 0;
  background: transparent;
}



/* =========================
Personal Input Modal（p- 前綴）
========================= */
.p-modal{ position:fixed; inset:0; display:none; z-index:9999; }
.p-modal.open{ display:block; }

.p-backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(2px);
}

/* 這裡沿用你本頁的「乾淨卡片 + 紙感」氣質 */
.p-panel{
  position:absolute;
  left:50%;
  top:52%;
  transform: translate(-50%, -50%);
  width: min(560px, 92vw);
  max-height: min(78vh, 640px);
  overflow: auto;

  border: 1px solid rgba(0,0,0,.12);
  border-radius: 18px;
  box-shadow: 0 22px 70px rgba(0,0,0,.22);

  background: rgba(255,255,255,.92);
}

.p-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.p-title{ font-weight: 950; font-size: 16px; }
.p-sub{ margin-top:4px; color: rgba(0,0,0,.55); font-size: 12px; line-height:1.5; }

.p-close{
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.9);
  border-radius: 12px;
  width: 36px;
  height: 36px;
  font-size: 22px;
  line-height: 30px;
  cursor: pointer;
}

.p-body{ padding: 14px; }

.p-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 520px){
  .p-grid{ grid-template-columns: 1fr; }
}

.p-field{ display:block; }
.p-label{ font-size: 12px; color: rgba(0,0,0,.6); margin-bottom: 6px; }

.p-input{
  width: 100%;
  border: 1px solid rgba(0,0,0,.14);
  background: rgba(255,255,255,.85);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 14px;
  outline: none;
}
.p-input:focus{
  border-color: rgba(0,0,0,.26);
}

.p-actions{
  margin-top: 14px;
  display:flex;
  gap: 10px;
  justify-content:flex-end;
}

.p-btn{
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.9);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 800;
  cursor:pointer;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}
.p-btn.ghost{
  background: transparent;
  box-shadow: none;
}

.p-err{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 235, 235, .75);
  border: 1px solid rgba(200,0,0,.15);
  color: rgba(120,0,0,.85);
  font-size: 13px;
}

.p-note{
  margin-top: 10px;
  color: rgba(0,0,0,.55);
  font-size: 12px;
  line-height: 1.5;
}

.planet-role {
  font-size: 14px;
  color: #333;
}

.planet-role-note {
  font-size: 12px;
  color: #888;
  margin-left: 4px;
  white-space: nowrap;
}