@charset "UTF-8";
/* ============================================================
   フライングスター — ポップ・初心者フレンドリー配色
   コーラル: #FF6F59 / ミント: #3DDC97 / スカイ: #4D96FF / イエロー: #FFC93C
   ============================================================ */
:root{
  --bg:#fffaf3;
  --card:#ffffff;
  --card-2:#fff3e8;
  --card-3:#ffe9d6;
  --coral:#ff6f59;
  --coral-dark:#e8543e;
  --mint:#12b886;
  --mint-soft:#3ddc97;
  --sky:#4d96ff;
  --yellow:#ffc93c;
  --purple:#9b6bff;
  --text:#3d3a34;
  --text-soft:#8b8680;
  --bad:#f4442e;
  --warn:#ff9f45;
  --line:rgba(255,111,89,.22);
  --line-soft:rgba(61,58,52,.10);
  --shadow:0 4px 16px rgba(255,111,89,.10);
  --shadow-sm:0 2px 8px rgba(61,58,52,.06);
  font-size:16px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  background:var(--bg);
  background-image:
    radial-gradient(ellipse 70% 40% at 15% 0%, rgba(255,201,60,.14), transparent),
    radial-gradient(ellipse 60% 40% at 100% 20%, rgba(77,150,255,.10), transparent),
    radial-gradient(ellipse 50% 30% at 50% 100%, rgba(61,220,151,.08), transparent);
  color:var(--text);
  font-family:"M PLUS Rounded 1c","Zen Maru Gothic","Hiragino Maru Gothic ProN","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  line-height:1.75;
  min-height:100vh;
}
.wrap{max-width:920px;margin:0 auto;padding:0 1.1rem 4rem;}

/* ---------- 冒頭 ---------- */
header.hero{
  text-align:center;
  padding:2.6rem 0 1.8rem;
  margin-bottom:1.8rem;
}
.hero .eyebrow{
  font-size:.75rem;letter-spacing:.35em;text-indent:.35em;
  color:var(--sky);font-weight:700;margin-bottom:.7rem;
}
.hero h1{
  font-family:"Zen Maru Gothic","M PLUS Rounded 1c",sans-serif;
  font-size:clamp(2rem,6.5vw,3rem);
  font-weight:900;letter-spacing:.06em;
  color:var(--coral);
  text-shadow:3px 3px 0 rgba(255,201,60,.35);
}
.hero .sub{
  margin-top:.8rem;font-size:.86rem;letter-spacing:.06em;color:var(--text-soft);font-weight:500;
}
.hero .seal{
  display:inline-block;margin-top:1.2rem;
  background:var(--mint);color:#fff;
  font-size:.72rem;letter-spacing:.15em;font-weight:700;
  padding:.4rem 1.1rem;border-radius:999px;
  box-shadow:var(--shadow-sm);
}

/* ---------- 節 ---------- */
section{margin-bottom:2.2rem;}
h2.sec{
  display:flex;align-items:center;gap:.7rem;
  font-size:1.02rem;font-weight:800;letter-spacing:.08em;
  color:var(--coral-dark);margin-bottom:1.1rem;
  font-family:"Zen Maru Gothic",sans-serif;
}
h2.sec::before{content:"●";color:var(--yellow);font-size:.8rem;}
h2.sec::after{content:"";flex:1;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--coral) 0%,rgba(255,111,89,0) 100%);}

/* ---------- 入力パネル ---------- */
.panel{
  background:var(--card);
  border:2px solid var(--card-3);
  border-radius:20px;
  padding:1.4rem 1.4rem 1.6rem;
  box-shadow:var(--shadow-sm);
}
.field{margin-bottom:1.5rem;}
.field:last-child{margin-bottom:0;}
.label{
  font-size:.85rem;font-weight:700;letter-spacing:.03em;color:var(--text);
  margin-bottom:.6rem;display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;
}
.label .hint{font-size:.74rem;font-weight:500;letter-spacing:.02em;color:var(--text-soft);}

/* 運の九宮ボタン */
.period-grid{display:flex;flex-wrap:wrap;gap:.5rem;}
.pbtn{
  width:3.1rem;height:3.1rem;border-radius:12px;
  background:var(--card-2);border:2px solid var(--card-3);
  color:var(--text);font-family:inherit;font-size:1.05rem;font-weight:700;
  cursor:pointer;transition:all .15s;position:relative;
}
.pbtn small{display:block;font-size:.55rem;color:var(--text-soft);line-height:1;margin-top:-2px;font-weight:500;}
.pbtn:hover{border-color:var(--sky);transform:translateY(-2px);}
.pbtn.on{
  background:var(--coral);color:#fff;border-color:var(--coral-dark);
  font-weight:800;box-shadow:var(--shadow-sm);transform:translateY(-1px);
}
.pbtn.on small{color:#fff;opacity:.9;}
.year-row{display:flex;align-items:center;gap:.6rem;margin-top:.8rem;flex-wrap:wrap;}
input[type=number],select{
  background:var(--card-2);border:2px solid var(--card-3);
  color:var(--text);font-family:inherit;font-size:.95rem;font-weight:500;
  padding:.5rem .7rem;border-radius:10px;width:7.4rem;
}
select{width:auto;min-width:9rem;}
input[type=number]:focus,select:focus{outline:none;border-color:var(--sky);}
button.ghost{
  background:#fff;border:2px solid var(--sky);color:var(--sky);
  font-family:inherit;font-size:.82rem;font-weight:700;letter-spacing:.03em;
  padding:.5rem 1.1rem;border-radius:999px;cursor:pointer;transition:all .15s;
}
button.ghost:hover{background:var(--sky);color:#fff;}

/* 鑑定するボタン・結果の表示切替 */
.hidden{display:none !important;}
.calc-field{text-align:center;}
.calc-btn{
  display:inline-block;width:100%;max-width:360px;
  background:linear-gradient(90deg,var(--coral) 0%,var(--coral-dark) 100%);
  color:#fff;border:none;font-family:inherit;
  font-size:1.05rem;font-weight:800;letter-spacing:.05em;
  padding:1rem 1.5rem;border-radius:999px;cursor:pointer;
  box-shadow:var(--shadow-sm);transition:transform .15s,box-shadow .15s;
}
.calc-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow);}
.calc-btn:active{transform:translateY(0);}
.note-inline{font-size:.76rem;color:var(--text-soft);letter-spacing:.01em;}

/* 羅盤 */
.compass-row{display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap;}
.compass-box{flex:0 0 auto;}
svg.luopan{display:block;touch-action:manipulation;}
.luopan .sector{cursor:pointer;transition:fill .15s;}
.luopan .sector:hover{fill:rgba(77,150,255,.20);}
.luopan text{pointer-events:none;user-select:none;}
.dir-inputs{flex:1;min-width:230px;}
.deg-row{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;margin-bottom:.8rem;}
.zuoxiang-display{
  margin-top:.5rem;font-size:1.35rem;font-weight:800;letter-spacing:.05em;color:var(--coral-dark);
  font-family:"Zen Maru Gothic",sans-serif;
}
.zuoxiang-display .small{font-size:.8rem;font-weight:500;color:var(--text-soft);letter-spacing:.02em;display:block;margin-top:.2rem;}
.warn{
  margin-top:.7rem;font-size:.8rem;line-height:1.7;font-weight:500;
  color:var(--bad);background:#fff0ee;border-radius:10px;padding:.6rem .8rem;
}
.info-jian{
  margin-top:.7rem;font-size:.8rem;line-height:1.7;font-weight:500;
  color:var(--mint);background:#effcf6;border-radius:10px;padding:.6rem .8rem;
}

/* 下卦/替卦トグル */
.toggle-row{display:flex;gap:.6rem;flex-wrap:wrap;}
.tbtn{
  background:var(--card-2);border:2px solid var(--card-3);color:var(--text);
  font-family:inherit;font-size:.88rem;font-weight:700;letter-spacing:.05em;
  padding:.55rem 1.3rem;border-radius:999px;cursor:pointer;transition:all .15s;
}
.tbtn.on{background:var(--coral);color:#fff;font-weight:800;border-color:var(--coral-dark);}
.tbtn small{display:block;font-size:.6rem;font-weight:500;margin-top:.1rem;opacity:.85;}

.plain-box{
  background:#eef6ff;border:2px dashed var(--sky);border-radius:12px;
  padding:.7rem .9rem;font-size:.78rem;line-height:1.75;color:var(--text);
  margin-bottom:.8rem;
}
.plain-box strong{color:var(--sky);}

/* ---------- カードの補足サブタイトル ---------- */
.card-sub{font-size:.72rem;font-weight:700;color:var(--text-soft);margin:-.4rem 0 .6rem;}



/* ---------- 挨星盤 ---------- */
.board-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:.5rem;margin-bottom:.8rem;}
.board-title{font-size:1.1rem;font-weight:800;letter-spacing:.04em;color:var(--coral-dark);font-family:"Zen Maru Gothic",sans-serif;}
.board-caption{font-size:.76rem;color:var(--text-soft);letter-spacing:.02em;}
.board{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:6px;background:var(--card-3);
  border:2px solid var(--card-3);border-radius:16px;padding:6px;
  max-width:560px;margin:0 auto;
}
.cell{
  background:var(--card);border-radius:12px;
  padding:.65rem .55rem .5rem;min-height:7.4rem;
  position:relative;display:flex;flex-direction:column;
}
.cell.center{background:var(--card-2);}
.cell .palace{
  font-size:.7rem;color:var(--text-soft);letter-spacing:.05em;font-weight:700;
  display:flex;justify-content:space-between;align-items:center;
}
.cell .badge{
  font-size:.63rem;letter-spacing:.05em;font-weight:800;padding:.08rem .5rem;border-radius:999px;
}
.badge.sit{background:var(--sky);color:#fff;}
.badge.face{background:var(--coral);color:#fff;}
.stars{display:flex;justify-content:center;align-items:baseline;gap:.35rem;flex:1;padding-top:.35rem;flex-wrap:wrap;}
.star{font-size:1.8rem;line-height:1;font-weight:800;font-family:"Zen Maru Gothic",sans-serif;}
.star .tag{display:block;font-size:.56rem;font-weight:600;text-align:center;margin-top:.2rem;color:var(--text-soft);}
.star-sm{font-size:1.2rem;}
.star-sm .tag{font-size:.5rem;}
.guest-star{color:var(--purple);}
.guest-wu{color:var(--bad);text-shadow:none;font-weight:800;}
.guest-er{color:var(--warn);}
.pstar{align-self:flex-end;font-size:.95rem;color:var(--text-soft);font-weight:600;}
.cell .mtns{font-size:.62rem;color:var(--text-soft);letter-spacing:.1em;text-align:center;opacity:.85;}
.mtn-taisui{color:var(--coral-dark);font-weight:800;text-decoration:underline;text-underline-offset:2px;}
.mtn-chong{color:var(--bad);font-weight:800;text-decoration:underline;text-underline-offset:2px;}
.mtn-saat{color:var(--warn);font-weight:800;}
.mtn-huangquan{color:var(--purple);font-weight:800;text-decoration:wavy underline;text-underline-offset:2px;}
.cell .next-line{font-size:.6rem;color:var(--text-soft);text-align:center;letter-spacing:.02em;margin-top:.15rem;opacity:.9;}
/* 旺衰カラー */
.w-wang{color:var(--coral);text-shadow:none;font-weight:800;}
.w-sheng{color:var(--mint);}
.w-jin{color:var(--sky);}
.w-tui{color:var(--text-soft);}
.w-si{color:var(--bad);}

.legend{
  display:flex;gap:1.1rem;flex-wrap:wrap;justify-content:center;
  margin-top:.9rem;font-size:.72rem;color:var(--text-soft);font-weight:600;letter-spacing:.02em;
}
.legend span::before{content:"●";margin-right:.3rem;}
.legend .l-wang::before{color:var(--coral);}
.legend .l-sheng::before{color:var(--mint);}
.legend .l-jin::before{color:var(--sky);}
.legend .l-tui::before{color:var(--text-soft);}
.legend .l-si::before{color:var(--bad);}
.legend .l-kyaku::before{color:var(--purple);}
.legend .l-wu::before{color:var(--bad);}
.legend .l-er::before{color:var(--warn);}

/* ---------- 判定カード ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:1rem;}
.card{
  background:var(--card);border:2px solid var(--card-3);
  border-radius:18px;padding:1.1rem 1.2rem;box-shadow:var(--shadow-sm);
}
.card h3{
  font-size:.86rem;font-weight:800;letter-spacing:.05em;color:var(--coral-dark);
  margin-bottom:.6rem;font-family:"Zen Maru Gothic",sans-serif;
  border-bottom:2px dashed var(--card-3);padding-bottom:.45rem;
}
.card .big{font-size:1.35rem;font-weight:800;letter-spacing:.03em;color:var(--mint);margin-bottom:.35rem;font-family:"Zen Maru Gothic",sans-serif;}
.card .big.bad{color:var(--bad);}
.card p{font-size:.82rem;line-height:1.8;color:var(--text);opacity:.92;}
.card .sub-item{font-size:.82rem;margin-top:.4rem;line-height:1.75;}
.ok-mark{color:var(--mint);font-weight:700;}
.ng-mark{color:var(--bad);font-weight:700;}

/* ---------- 各宮コメント ---------- */
.pcomments{display:flex;flex-direction:column;gap:.7rem;}
.pcom{
  background:var(--card);border:2px solid var(--card-3);border-radius:16px;
  padding:.85rem 1rem;display:flex;gap:.9rem;align-items:flex-start;
}
.pcom .head{
  flex:0 0 5.8rem;text-align:center;
  border-right:2px dashed var(--card-3);padding-right:.8rem;
}
.pcom .head .pname{font-size:1rem;font-weight:800;letter-spacing:.05em;color:var(--coral-dark);font-family:"Zen Maru Gothic",sans-serif;}
.pcom .head .pnum{font-size:1.2rem;margin-top:.15rem;font-weight:700;}
.pcom .head .pws{font-size:.63rem;color:var(--text-soft);margin-top:.2rem;letter-spacing:.02em;font-weight:600;}
.pcom .body{flex:1;font-size:.82rem;line-height:1.8;}
.pcom .body .flags{margin-top:.3rem;}
.flag{
  display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.03em;
  background:#fff0ee;color:var(--bad);
  padding:.12rem .6rem;border-radius:999px;margin-right:.35rem;margin-top:.25rem;
}
.flag.good{background:#effcf6;color:var(--mint);}
.trend-line{font-size:.76rem;margin-top:.4rem;padding-top:.4rem;border-top:1px dashed var(--card-3);letter-spacing:.01em;font-weight:600;}
.trend-line.good{color:var(--mint);}
.trend-line.bad{color:var(--bad);}

/* ---------- 化殺（開運アクション）カード ---------- */
.remedy-card{
  background:linear-gradient(135deg,#fff9ef,#fff2e5);
  border:2px solid var(--yellow);border-radius:16px;
  padding:.85rem 1rem;margin-top:.5rem;
}
.remedy-card .rt{font-size:.78rem;font-weight:800;color:var(--coral-dark);margin-bottom:.35rem;}
.remedy-card ul{padding-left:1.2rem;font-size:.8rem;line-height:1.85;color:var(--text);}
.remedy-card li{margin-bottom:.15rem;}

/* ---------- 初心者ガイド（用語集） ---------- */
.glossary{display:flex;flex-direction:column;gap:.6rem;}
details.gterm{
  background:var(--card);border:2px solid var(--card-3);border-radius:14px;
  padding:.75rem 1rem;
}
details.gterm summary{
  cursor:pointer;font-weight:800;color:var(--sky);font-size:.9rem;
  list-style:none;display:flex;align-items:center;gap:.5rem;
}
details.gterm summary::before{content:"❓";font-size:.85rem;}
details.gterm[open] summary::before{content:"💡";}
details.gterm summary::-webkit-details-marker{display:none;}
details.gterm p{margin-top:.6rem;font-size:.83rem;line-height:1.85;color:var(--text);}

.export-actions{display:flex;gap:.7rem;margin-top:.8rem;flex-wrap:wrap;}

/* ---------- 注意書き ---------- */
.disclaimer{
  font-size:.74rem;line-height:1.85;color:var(--text-soft);
  background:var(--card-2);border-radius:14px;padding:1rem 1.2rem;
}
.disclaimer strong{color:var(--coral-dark);font-weight:800;}

footer{
  text-align:center;margin-top:3rem;padding-top:1.6rem;
  border-top:2px dashed var(--card-3);
  font-size:.74rem;letter-spacing:.05em;color:var(--text-soft);font-weight:600;
}
footer .brand{color:var(--coral);margin-bottom:.25rem;font-size:.95rem;font-weight:800;font-family:"Zen Maru Gothic",sans-serif;}

/* ---------- ロゴ（クリックでリセット） ---------- */
.hero h1#logoReset{cursor:pointer;transition:opacity .15s,transform .15s;}
.hero h1#logoReset:hover{opacity:.82;transform:translateY(-1px);}
.hero h1#logoReset:active{transform:translateY(0);opacity:.7;}

/* ---------- トップへ戻るボタン ---------- */
#backToTopBtn{
  position:fixed;right:1.1rem;bottom:1.1rem;z-index:50;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.05rem;
  width:3.6rem;height:3.6rem;border-radius:50%;
  background:var(--coral);color:#fff;border:none;cursor:pointer;
  font-family:inherit;font-size:1.1rem;line-height:1;
  box-shadow:0 4px 14px rgba(255,111,89,.35);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .25s,transform .25s,visibility .25s,background .15s;
}
#backToTopBtn.show{opacity:1;visibility:visible;transform:translateY(0);}
#backToTopBtn:hover{background:var(--coral-dark);}
#backToTopBtn span{font-size:.55rem;font-weight:700;letter-spacing:.03em;}
@media (max-width:560px){
  #backToTopBtn{right:.8rem;bottom:.8rem;width:3.2rem;height:3.2rem;}
}

/* ---------- 印刷 ---------- */
@media print{
  :root{font-size:12px;}
  body{background:#fff;color:#222;}
  .wrap{max-width:100%;padding:0;}
  .no-print{display:none !important;}
  header.hero{padding:.5rem 0 .8rem;margin-bottom:1rem;}
  .hero h1{color:#222;text-shadow:none;font-size:1.5rem;}
  .hero .eyebrow,.hero .sub{color:#666;}
  .hero .seal{background:#eee;color:#333;}
  h2.sec{color:#222;}
  h2.sec::after{background:#ccc;}
  .panel,.card,.pcom,.remedy-card,details.gterm{background:#fff;border-color:#ccc;}
  .cell{background:#fff;border:1px solid #999;}
  .cell.center{background:#f4f4f4;}
  .board{background:#999;border-color:#666;}
  .card .big{color:#222;}
  .card .big.bad{color:#c0392b;}
  .card p,.pcom .body,.card .sub-item{color:#333;}
  .pcom .head .pname{color:#222;}
  .w-wang{color:#c0392b;text-shadow:none;font-weight:700;}
  .w-sheng{color:#1e8a63;}
  .w-jin{color:#2563eb;}
  .w-tui{color:#777;}
  .w-si{color:#c0392b;}
  .guest-star{color:#7c3aed;}
  .guest-wu{color:#c0392b;}
  .guest-er{color:#c67c1e;}
  .mtn-taisui{color:#8a6d1f;}
  .mtn-chong{color:#c0392b;}
  .mtn-saat{color:#c67c1e;}
  .mtn-huangquan{color:#7c3aed;}
  .badge.sit{background:#333;color:#fff;}
  .badge.face{background:#c0392b;}
  .stars .star{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  section{break-inside:avoid;margin-bottom:1.2rem;}
  .disclaimer{color:#666;}
  footer{color:#888;}
  #inputSection,#printSection{display:none;}
  #printMeta{display:block !important;}
}
#printMeta{display:none;font-size:.85rem;margin-bottom:1rem;line-height:1.9;}
#printMeta table{border-collapse:collapse;}
#printMeta td{border:1px solid #bbb;padding:.25rem .8rem;}

@media (max-width:560px){
  .pcom{flex-direction:column;gap:.4rem;}
  .pcom .head{border-right:none;border-bottom:2px dashed var(--card-3);padding:0 0 .4rem;flex-basis:auto;display:flex;gap:.8rem;align-items:baseline;text-align:left;}
  .cell{min-height:7.4rem;padding:.5rem .4rem .4rem;}
  .star{font-size:1.35rem;}
  .star-sm{font-size:1rem;}
}