/* 紫微斗数 命盤占い ― 見た目：ミント
   「余白」に寄せた、うすいピンクベージュとモーブ。明朝体、角の丸いカード、淡い円の飾り。
   外部の読み込みはなし（フォントは端末のもの）。 */
:root{
  --bg:#f6eeeb; --bg2:#f2e6e2; --paper:#fdf9f7; --line:#eadcd7; --line2:#dcc9c3;
  --ink:#4a3b3c; --sub:#7a6662; --accent:#985a55; --mauve:#6f5258; --mauve2:#87656b;
  --soft:#f3dcd7; --ming:#f6e3de;
  --main:#6f3f48; --good:#3f6e8a; --bad:#b0505c; --lucky:#4f8060;
  --serif:"Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP","BIZ UDPMincho","MS PMincho",serif;
  --r:28px;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;color:var(--ink);font-family:var(--serif);line-height:1.9;letter-spacing:.06em;position:relative;overflow-x:hidden;
  background:linear-gradient(180deg,var(--bg) 0,var(--bg2) 100%);min-height:100vh;
  padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}

/* 淡い円の飾り（はみ出しは .deco で切る） */
.deco{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.orb{position:absolute;border-radius:50%;pointer-events:none;z-index:0;border:1px solid rgba(176,114,108,.18)}
.orb1{width:560px;height:560px;left:-220px;top:90px;box-shadow:0 0 0 70px rgba(176,114,108,.035)}
.orb2{width:340px;height:340px;right:-120px;top:780px}
.orb1::after{content:"";position:absolute;width:12px;height:12px;border-radius:50%;background:var(--accent);opacity:.7;right:58px;top:150px}

header.top{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:18px 0;border-bottom:1px solid var(--line)}
.brand{font-size:1.3rem;letter-spacing:.3em;color:var(--ink)}
.brand small{font-size:.7rem;color:var(--accent);margin-left:18px;letter-spacing:.2em}

main{position:relative;z-index:1;max-width:1080px;margin:0 auto}
.eyebrow{margin:0 0 6px;font-size:.82rem;color:var(--accent);letter-spacing:.24em}

.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:56px;align-items:center;padding:72px 0 56px}
.intro h1{font-weight:400;font-size:clamp(2.4rem,6vw,4.2rem);line-height:1.35;letter-spacing:.14em;margin:14px 0 22px;text-wrap:balance}
.lead{color:var(--sub);margin:0 0 26px}
.note{display:inline-flex;gap:12px;align-items:center;margin:0;padding:16px 24px;background:var(--paper);border-radius:999px;
  color:var(--sub);font-size:.88rem;box-shadow:0 12px 30px rgba(111,82,88,.08)}
.note span{color:var(--accent);font-size:1.1rem}

.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:36px 40px;
  box-shadow:0 18px 40px rgba(111,82,88,.08);overflow-wrap:anywhere}
#form .formtitle{margin:0 0 18px;padding-bottom:18px;border-bottom:1px solid var(--line);font-size:1.15rem}
.field{display:flex;flex-direction:column;gap:6px;margin:18px 0}
.flabel{font-size:1rem}.flabel small{font-size:.75rem;color:var(--sub);margin-left:8px}
.row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
label.chk{display:inline-flex;align-items:center;gap:8px;font-size:.95rem;color:var(--ink);cursor:pointer}
label.pill{padding:8px 18px;border:1px solid var(--line2);border-radius:999px;background:var(--paper)}
label.pill:has(input:checked){border-color:var(--accent);background:var(--soft)}
input[type=date],input[type=time],select{font:inherit;font-size:1.15rem;letter-spacing:.08em;color:var(--ink);background:transparent;
  border:0;border-bottom:1px solid var(--line2);border-radius:0;padding:8px 4px;min-height:44px}
select{font-size:1rem}
input[type=checkbox],input[type=radio]{accent-color:var(--mauve);width:16px;height:16px}
input:focus-visible,select:focus-visible,summary:focus-visible,label.pill:focus-within{outline:2px solid var(--accent);outline-offset:3px}
details{margin:8px 0 0;color:var(--sub);font-size:.9rem}
summary{cursor:pointer}

button{margin-top:22px;width:100%;min-height:60px;padding:14px;font:inherit;font-size:1.05rem;letter-spacing:.2em;color:#fff;cursor:pointer;
  border:0;border-radius:999px;background:linear-gradient(120deg,var(--mauve2),var(--mauve));box-shadow:0 14px 26px rgba(111,82,88,.25)}
button:hover{filter:brightness(1.06)}
button:active{transform:translateY(1px)}
button:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

/* 結果 */
#result{padding:24px 0 40px}
.sechead{text-align:center;margin:24px 0 32px}
.big{font-weight:400;font-size:clamp(1.7rem,4vw,2.6rem);line-height:1.5;letter-spacing:.14em;margin:6px 0 0;text-wrap:balance}
#summary{line-height:2}
#summary h2,#reading h2{font-weight:400;font-size:1.5rem;letter-spacing:.12em;margin:0 0 12px}
#summary b{color:var(--mauve);font-weight:600}
#reading h3{font-weight:400;font-size:1.1rem;margin:22px 0 4px;padding-top:16px;border-top:1px solid var(--line);color:var(--main)}
#reading p{color:var(--sub);margin:0}
#reading b{color:var(--ink)}

/* 命盤 4×4：角の丸い一枚のカードの中に、細い罫で12宮 */
.board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(4,minmax(132px,auto));gap:1px;
  margin:28px 0;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:0 18px 40px rgba(111,82,88,.08)}
.cell{background:var(--paper);padding:12px 12px 8px;font-size:.84rem;position:relative;cursor:pointer;display:flex;flex-direction:column;min-width:0;overflow-wrap:anywhere;transition:background .15s}
.cell:hover{background:#fbf2ef}
.cell.sel{background:var(--soft);box-shadow:inset 0 0 0 1px var(--accent)}
.cell.ming{background:var(--ming)}
.cell.ming.sel{background:var(--soft)}
.pname{color:var(--accent);letter-spacing:.12em}
.tag{font-size:.68rem;color:#fff;background:var(--mauve);border-radius:999px;padding:0 7px;margin-left:6px;letter-spacing:0}
.stars{flex:1;margin:6px 0}
.s{display:inline-block;margin-right:7px}
.s.main{color:var(--main);font-size:1rem;font-weight:600}
.s.good{color:var(--good)}.s.bad{color:var(--bad)}.s.lucky{color:var(--lucky)}
.hua{font-size:.62rem;color:#fff;background:var(--bad);border-radius:999px;padding:0 5px;margin-left:2px;letter-spacing:0;vertical-align:1px}
.hua.権{background:#8a5a8f}.hua.科{background:var(--good)}.hua.禄{background:var(--lucky)}
.foot{display:flex;justify-content:space-between;gap:4px;color:var(--sub);font-size:.72rem;border-top:1px solid var(--line);padding-top:5px;letter-spacing:.04em}

/* 真ん中：淡い円を重ねた余白 */
.center{grid-column:2/4;grid-row:2/4;padding:18px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;text-align:center;color:var(--sub);font-size:.9rem;
  background:
    radial-gradient(circle at 50% 50%,transparent 0 33%,rgba(176,114,108,.16) 33.3% 33.6%,transparent 34% 47%,rgba(176,114,108,.1) 47.3% 47.6%,transparent 48%),
    var(--paper)}
.center b{color:var(--ink);font-weight:400;font-size:1.2rem;letter-spacing:.2em;margin-bottom:4px}

.hint{color:var(--sub);font-size:.88rem;text-align:center;margin:0 0 28px}
footer{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:28px 0 44px;border-top:1px solid var(--line);text-align:center;color:var(--sub);font-size:.82rem}

/* 一週間の流れ ― 見た目：ミント（スミレの下書きを余白らしく） */
.formnote{margin:14px 0 0;font-size:.8rem;color:var(--sub);text-align:center}
.sechead .lead{margin:14px auto 0;max-width:640px}

/* 7日のボタン：小さな丸い札。選んだ日はやわらかい桃色 */
.days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px;margin:8px 0 22px}
.day{margin:0;min-height:100px;padding:12px 2px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  font:inherit;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:20px;box-shadow:none;letter-spacing:.04em;cursor:pointer;
  transition:background .15s,border-color .15s}
.day:hover{filter:none;background:#fbf2ef}
.day:active{transform:none}
.day.sel{background:var(--soft);border-color:var(--accent);box-shadow:0 10px 22px rgba(176,114,108,.16)}
.day:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.day .w{font-size:.78rem;color:var(--sub)}
.day .md{font-size:1.05rem;letter-spacing:.02em}
.day .today{font-size:.66rem;color:var(--accent);min-height:1.3em;letter-spacing:.1em}

/* その日のカード */
.dayview{position:relative;overflow:hidden;margin-bottom:72px;padding:40px 44px}
.dayview::after{content:"";position:absolute;width:260px;height:260px;right:-90px;top:-90px;border-radius:50%;
  border:1px solid rgba(176,114,108,.18);box-shadow:0 0 0 36px rgba(176,114,108,.04);pointer-events:none}
.dayview h3{font-weight:400;font-size:clamp(1.4rem,3vw,1.9rem);margin:6px 0 14px;letter-spacing:.12em;line-height:1.5;text-wrap:balance}
.dayview p{color:var(--sub);margin:0 0 10px;max-width:40em}
.mood{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;color:var(--mauve)!important;margin-bottom:14px!important}
.dots{display:inline-flex;gap:7px;padding:6px 12px;background:var(--bg);border-radius:999px}
.dot{width:10px;height:10px;border-radius:50%;border:1px solid var(--accent);background:transparent}
.dot.on{background:var(--accent)}
.dayview dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:24px 0 0;border:1px solid var(--line);border-radius:18px;overflow:hidden}
.dayview dt{grid-row:1;padding:16px 20px 0;font-size:.78rem;color:var(--accent);letter-spacing:.24em}
.dayview dd{grid-row:2;margin:0;padding:4px 20px 18px;color:var(--ink);line-height:1.8}
.dayview dt:nth-of-type(2),.dayview dd:nth-of-type(2){border-left:1px solid var(--line)}

/* 鍵つきの有料カード：少し沈んだ色と、淡い円 */
.locked{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-bottom:48px}
.lock{position:relative;overflow:hidden;padding:30px 28px;background:linear-gradient(160deg,var(--paper),#f8efec)}
.lock::after{content:"";position:absolute;width:150px;height:150px;right:-50px;bottom:-60px;border-radius:50%;border:1px solid rgba(176,114,108,.2);pointer-events:none}
.lock .eyebrow{display:inline-block;padding:2px 12px;background:var(--bg);border-radius:999px;font-size:.74rem;letter-spacing:.14em}
.lock h3{font-weight:400;font-size:1.3rem;margin:12px 0 8px;letter-spacing:.1em}
.lock p:last-child{color:var(--sub);margin:0;font-size:.9rem;line-height:1.9}

@media (max-width:860px){.locked{grid-template-columns:1fr}}
@media (max-width:600px){
  .days{gap:4px}
  .day{min-height:74px;padding:8px 0;border-radius:14px;gap:1px;letter-spacing:0}
  .day .w{font-size:.66rem}.day .md{font-size:.8rem}.day .today{font-size:.56rem;letter-spacing:0}
  .dayview{padding:28px 22px}
  .dayview dl{grid-template-columns:1fr}
  .dayview dt,.dayview dd{grid-row:auto}
  .dayview dt:nth-of-type(2){border-left:0;border-top:1px solid var(--line)}
  .dayview dd:nth-of-type(2){border-left:0}
}
@media (prefers-reduced-motion:reduce){.day{transition:none}}

@media (max-width:1200px){br.wide{display:none}}
@media (max-width:860px){
  .hero{grid-template-columns:1fr;gap:36px;padding:44px 0 32px}
  br.wide{display:none}
}
@media (max-width:600px){
  body{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .brand small{display:none}
  .card{padding:24px 20px;border-radius:22px}
  .orb1{width:380px;height:380px;left:-200px}
  .board{border-radius:18px;grid-template-rows:repeat(4,minmax(108px,auto))}
  .cell{font-size:.64rem;padding:5px 4px 3px;letter-spacing:0}
  .pname{letter-spacing:0}
  .s{margin-right:3px}.s.main{font-size:.74rem}
  .hua{font-size:.54rem;padding:0 3px}
  .tag{font-size:.56rem;padding:0 4px;margin-left:2px}
  .foot{font-size:.56rem;flex-direction:column;gap:0}
  .center{font-size:.66rem;padding:6px;letter-spacing:0}.center b{font-size:.86rem;letter-spacing:.08em}
}
@media (prefers-reduced-motion:reduce){.cell{transition:none}button:active{transform:none}}