/* ============================================================
   月の満ち欠け3D（/michikake-3d/）
   サイト共通の style.css のトークン（--sky --panel --moon など）を使う。クラスは .m3d 配下に限定。
   ============================================================ */
.m3d{display:grid;grid-template-columns:minmax(0,1fr) 320px;grid-template-areas:"stage side" "tl tl" "ev rts";gap:14px;margin-top:6px;}
.m3d button,.m3d select,.m3d input{font:inherit;color:inherit;}
.m3d button{cursor:pointer;}
.m3d :focus-visible{outline:2px solid var(--moon);outline-offset:2px;}
.m3d-card{background:linear-gradient(160deg,var(--panel) 0%,var(--panel2) 100%);border:1px solid var(--line2);border-radius:16px;padding:18px 20px;min-width:0;}
.m3d-card h3{margin:0 0 10px;font-family:var(--serif);font-weight:700;font-size:15px;letter-spacing:.08em;color:var(--silver);}

/* ---- ステージ（3D表示） ---- */
.m3d-stage{grid-area:stage;align-self:start;position:relative;height:clamp(420px,52vw,580px);border-radius:18px;overflow:hidden;
  border:1px solid var(--line2);background:var(--sky);box-shadow:0 4px 30px rgba(0,0,0,.35);}
.m3d-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;}
.m3d-labels{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.m3d-label{font-size:12px;color:var(--dim);letter-spacing:.08em;white-space:nowrap;text-shadow:0 1px 6px rgba(0,0,0,.9);}
.m3d-label.strong{color:var(--ink);font-weight:600;}
.m3d-label.sun{color:var(--moon);}
.m3d-top,.m3d-bottom{position:absolute;left:12px;right:12px;display:flex;justify-content:space-between;align-items:center;gap:8px;pointer-events:none;}
.m3d-top{top:12px;align-items:flex-start;}
.m3d-bottom{bottom:12px;}
.m3d-top>*,.m3d-bottom>*{pointer-events:auto;}
.m3d-seg{display:inline-flex;padding:3px;border-radius:999px;background:rgba(10,15,34,.72);border:1px solid var(--line2);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.m3d-seg button{border:0;background:transparent;padding:5px 13px;border-radius:999px;font-size:12.5px;color:var(--dim);letter-spacing:.04em;line-height:1.5;}
.m3d-seg button.on{background:rgba(243,217,139,.16);color:var(--moon);}
.m3d-seg button:hover{color:var(--ink);}
.m3d-ghost{border:1px solid var(--line2);background:rgba(10,15,34,.72);border-radius:999px;padding:6px 13px;font-size:12.5px;color:var(--dim);line-height:1.5;}
.m3d-ghost:hover{color:var(--ink);border-color:var(--moon);}
.m3d-hint{margin:6px 4px 0 0;font-size:11px;color:var(--faint);letter-spacing:.06em;}
.m3d-note{position:absolute;left:16px;top:54px;margin:0;font-size:12px;line-height:1.6;color:var(--dim);max-width:62%;pointer-events:none;text-shadow:0 1px 6px rgba(0,0,0,.9);}
.m3d-note strong{color:var(--ink);font-weight:600;}
.m3d-loading{position:absolute;inset:0;display:grid;place-content:center;gap:12px;text-align:center;background:var(--sky);transition:opacity .6s ease;z-index:5;}
.m3d-loading p{margin:0;color:var(--dim);letter-spacing:.12em;font-size:13px;}
.m3d-orb{width:44px;height:44px;margin:0 auto;border-radius:50%;box-shadow:inset -14px 0 0 0 var(--moon);animation:m3d-wax 2.4s ease-in-out infinite;opacity:.85;}
@keyframes m3d-wax{0%,100%{box-shadow:inset -14px 0 0 0 var(--moon);}50%{box-shadow:inset -44px 0 0 0 var(--moon);}}
.m3d-loading.done{opacity:0;pointer-events:none;}

/* ---- 右の暦 ---- */
.m3d-side{grid-area:side;display:flex;flex-direction:column;gap:16px;}
.m3d-koyomi{display:grid;grid-template-columns:1fr auto;gap:12px;}
.m3d-date{margin:0;font-size:12.5px;color:var(--dim);font-variant-numeric:tabular-nums;line-height:1.6;}
.m3d-age-label{margin:12px 0 0;font-size:11px;letter-spacing:.3em;color:var(--faint);line-height:1.4;}
.m3d-age{margin:0;font-family:var(--serif);font-weight:700;font-size:60px;line-height:1.1;color:var(--moon);font-variant-numeric:tabular-nums;text-shadow:0 0 24px rgba(243,217,139,.25);}
.m3d-trend{margin:6px 0 0;font-size:13px;line-height:1.6;letter-spacing:.04em;}
.m3d-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
.m3d-badges span{font-size:11.5px;line-height:1.5;padding:3px 10px;border-radius:999px;border:1px solid var(--line2);}
.m3d-badges span.gold{background:rgba(243,217,139,.14);border-color:rgba(243,217,139,.4);color:var(--moon);font-weight:600;}
.m3d-badges span.blue{border-color:rgba(143,182,232,.45);color:var(--sat);}
.m3d-wamei{display:flex;flex-direction:row-reverse;gap:4px;align-items:flex-start;padding-left:12px;border-left:1px solid rgba(243,217,139,.35);min-height:176px;}
.m3d-wamei-name{writing-mode:vertical-rl;font-family:var(--serif);font-weight:700;font-size:30px;letter-spacing:.16em;line-height:1.15;}
.m3d-wamei-kana{writing-mode:vertical-rl;font-size:11px;color:var(--dim);letter-spacing:.18em;padding-top:4px;line-height:1.4;}
.m3d-facts{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin:0;padding-top:14px;border-top:1px dashed var(--line);}
.m3d-facts div{min-width:0;}
.m3d-facts dt{font-size:11px;color:var(--faint);letter-spacing:.08em;line-height:1.5;}
.m3d-facts dd{margin:0;font-size:14.5px;font-weight:600;line-height:1.5;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;}
.m3d-facts dd small{font-size:11px;color:var(--dim);font-weight:400;margin-left:4px;}
.m3d-credit{margin:auto 0 0;font-size:11px;line-height:1.7;color:var(--faint);}

/* ---- タイムライン ---- */
.m3d-timeline{grid-area:tl;display:flex;flex-direction:column;gap:12px;padding:14px 18px;}
.m3d-controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.m3d-steps{display:inline-flex;gap:4px;}
.m3d-btn{border:1px solid var(--line2);background:var(--panel2);border-radius:8px;padding:5px 10px;font-size:12.5px;line-height:1.5;font-variant-numeric:tabular-nums;color:var(--ink);}
.m3d-btn:hover{border-color:var(--moon);color:var(--moon);}
.m3d-btn.primary{color:var(--moon);border-color:rgba(243,217,139,.45);}
.m3d-play{width:34px;height:34px;border-radius:50%;border:1px solid rgba(243,217,139,.5);background:rgba(243,217,139,.14);color:var(--moon);display:grid;place-items:center;padding:0;}
.m3d-play svg{width:14px;height:14px;fill:currentColor;}
.m3d-spacer{flex:1;}
.m3d-field{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--dim);}
.m3d select,.m3d input[type="datetime-local"]{background:var(--panel2);color:var(--ink);border:1px solid var(--line2);border-radius:8px;padding:5px 9px;font-size:12.5px;color-scheme:dark;}
.m3d-lunation{position:relative;padding-top:20px;}
.m3d-lunation-labels{position:absolute;left:9px;right:9px;top:0;height:18px;}
.m3d-lunation-labels span{position:absolute;transform:translateX(-50%);font-size:11px;line-height:1.5;color:var(--dim);white-space:nowrap;font-variant-numeric:tabular-nums;}
.m3d-lunation-labels span.edge-l{transform:none;}
.m3d-lunation-labels span.edge-r{transform:translateX(-100%);}
.m3d-lunation-labels span b{color:var(--ink);font-weight:600;margin-right:3px;}
.m3d-lunation-labels span.full b{color:var(--moon);}
.m3d-lunation-labels span i{font-style:normal;}
.m3d-scrub{-webkit-appearance:none;appearance:none;width:100%;height:22px;background:transparent;margin:0;}
.m3d-scrub::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(90deg,#1B2446 0%,#9C8A55 50%,#1B2446 100%);}
.m3d-scrub::-moz-range-track{height:4px;border-radius:4px;background:linear-gradient(90deg,#1B2446 0%,#9C8A55 50%,#1B2446 100%);}
.m3d-scrub::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-7px;border-radius:50%;background:var(--moon);border:3px solid var(--sky);box-shadow:0 0 0 1px var(--moon),0 0 14px rgba(243,217,139,.55);}
.m3d-scrub::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--moon);border:3px solid var(--sky);box-shadow:0 0 0 1px var(--moon),0 0 14px rgba(243,217,139,.55);}
.m3d-month{display:flex;flex-direction:column;gap:6px;}
.m3d-month-head{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--dim);line-height:1.5;}
.m3d-month-head button{border:0;background:transparent;color:var(--dim);font-size:16px;line-height:1;padding:3px 7px;border-radius:6px;}
.m3d-month-head button:hover{color:var(--moon);background:rgba(243,217,139,.08);}
.m3d-month-title{font-family:var(--serif);font-weight:700;font-size:14px;color:var(--ink);min-width:6.5em;text-align:center;}
.m3d-cal{display:flex;gap:2px;overflow-x:auto;scrollbar-width:thin;padding-bottom:2px;}
.m3d-cal .day{flex:1 0 30px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 0 3px;border:1px solid transparent;border-radius:8px;background:transparent;}
.m3d-cal .day:hover{background:rgba(255,255,255,.04);}
.m3d-cal .dnum{font-size:10.5px;line-height:1;color:var(--dim);font-variant-numeric:tabular-nums;}
.m3d-cal .sun .dnum{color:var(--sun);}
.m3d-cal .sat .dnum{color:var(--sat);}
.m3d-cal canvas{width:22px;height:22px;}
.m3d-cal .ev{font-size:9.5px;line-height:1;height:10px;color:var(--moon);}
.m3d-cal .day.sel{border-color:rgba(243,217,139,.6);background:rgba(243,217,139,.12);}
.m3d-cal .day.is-today .dnum{color:var(--ink);font-weight:700;}

/* ---- 次の満ち欠け・月の出入り ---- */
.m3d-ev{grid-area:ev;}
.m3d-rts{grid-area:rts;display:flex;flex-direction:column;gap:10px;}
.m3d-rts-head{display:flex;justify-content:space-between;align-items:center;gap:10px;}
.m3d-rts-head h3{margin:0;}
.m3d-events{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.m3d-events li{border-bottom:1px dashed var(--line);}
.m3d-events li:last-child{border-bottom:0;}
.m3d-events button{display:grid;grid-template-columns:26px 3em 1fr auto;align-items:center;gap:10px;width:100%;padding:7px 2px;border:0;background:transparent;text-align:left;font-variant-numeric:tabular-nums;font-size:13.5px;line-height:1.5;}
.m3d-events button:hover .ev-date{color:var(--moon);}
.m3d-events canvas{width:26px;height:26px;}
.m3d-events .ev-name{font-family:var(--serif);font-weight:700;}
.m3d-events .ev-in{color:var(--dim);font-size:12px;}
.m3d-rts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0;}
.m3d-rts-grid div{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:10px;padding:8px 10px;}
.m3d-rts-grid dt{font-size:11px;color:var(--faint);letter-spacing:.08em;line-height:1.5;}
.m3d-rts-grid dd{margin:0;font-family:var(--serif);font-weight:700;font-size:18px;line-height:1.4;font-variant-numeric:tabular-nums;}
.m3d-rts-grid dd small{display:block;font-family:var(--sans);font-size:11px;color:var(--dim);font-weight:400;}
.m3d-nowpos{margin:0;font-size:12.5px;color:var(--dim);line-height:1.7;}
.m3d-nowpos strong{color:var(--ink);font-weight:600;}

/* ---- 使い方（折りたたみ） ---- */
.m3d-howto{margin-top:14px;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:0 18px;}
.m3d-howto summary{font-family:var(--serif);font-weight:700;font-size:14px;letter-spacing:.1em;padding:12px 0;cursor:pointer;}
.m3d-howto ul{margin:0 0 14px;padding-left:1.3em;font-size:13.5px;line-height:1.9;}
.m3d-howto li{margin-bottom:6px;}
.m3d-howto strong{color:var(--moon);}

/* ---- スマホ：月を上に固定して、下に操作と暦を並べる ---- */
@media (max-width:860px){
  .m3d{grid-template-columns:minmax(0,1fr);grid-template-areas:"stage" "tl" "side" "ev" "rts";gap:12px;}
  .m3d-stage{position:sticky;top:60px;z-index:3;height:min(50svh,440px);min-height:280px;}
  .m3d-hint{display:none;}
  .m3d-wamei{min-height:150px;}
}
@media (max-width:520px){
  .m3d-card{padding:16px;}
  .m3d-seg button,.m3d-ghost{font-size:12px;padding:5px 10px;}
  .m3d-note{font-size:11.5px;max-width:78%;}
  .m3d-age{font-size:52px;}
  .m3d-lunation-labels span i{display:none;}
  .m3d-steps .hour{display:none;}
  .m3d-field.dt{width:100%;}
  .m3d-field.dt input{flex:1;}
  .m3d-rts-grid dd{font-size:16px;}
}
@media (prefers-reduced-motion:reduce){
  .m3d-orb{animation:none;}
  .m3d-loading{transition:none;}
}