/* === 学習ロードマップAI スタイル === */
:root{
  --bg:#f5f7fb; --card:#ffffff; --ink:#1f2937; --muted:#6b7280;
  --line:#e5e7eb; --accent:#4f46e5; --accent-d:#4338ca; --accent-l:#eef2ff;
  --green:#059669; --amber:#d97706; --radius:14px;
  --shadow:0 1px 3px rgba(0,0,0,.06),0 8px 24px rgba(31,41,55,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Sans","Noto Sans JP",sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.7; -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

/* header */
.site-header{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 20px; background:#fff; border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:10;
}
.brand{font-weight:800; font-size:1.1rem; color:var(--ink)}
.site-header nav{display:flex; gap:16px; align-items:center}
.site-header nav a{color:var(--muted); font-size:.92rem}
.btn-ghost{
  border:1px solid var(--line); padding:7px 14px; border-radius:999px;
  background:#fff; color:var(--ink); cursor:pointer; font-size:.9rem; display:inline-block;
}
.btn-ghost:hover{background:var(--accent-l); border-color:var(--accent); text-decoration:none}

/* hero */
.hero{
  text-align:center; padding:64px 20px 40px; max-width:760px; margin:0 auto;
}
.hero h1{font-size:2.1rem; line-height:1.4; margin:0 0 18px}
.hero .accent{color:var(--accent)}
.lead{color:var(--muted); font-size:1.05rem; margin:0 0 26px}
.sub{color:var(--muted); font-size:.85rem; margin-top:14px}
.btn-primary{
  background:var(--accent); color:#fff; padding:13px 30px; border-radius:999px;
  font-weight:700; border:none; cursor:pointer; display:inline-block; font-size:1rem;
}
.btn-primary:hover{background:var(--accent-d); text-decoration:none}
.btn-primary.big{width:100%; padding:15px; font-size:1.05rem; margin-top:10px}

/* form */
.form-wrap{max-width:720px; margin:0 auto 60px; background:var(--card);
  border:1px solid var(--line); border-radius:var(--radius); padding:30px; box-shadow:var(--shadow)}
.form-wrap h2{margin:0 0 6px}
.form-note{color:var(--muted); font-size:.9rem; margin:0 0 22px}
.field{margin-bottom:18px}
.field label{display:block; font-weight:600; margin-bottom:6px; font-size:.92rem}
.field .opt{color:var(--muted); font-weight:400; font-size:.82rem}
.field input[type=text],.field input[type=email],.field input[type=password],.field textarea{
  width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:10px;
  font-size:.98rem; font-family:inherit; background:#fff; color:var(--ink);
}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-l)}
.radio-row{display:flex; gap:18px; flex-wrap:wrap}
.radio-row label{font-weight:500}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.form-error{color:#dc2626; background:#fef2f2; border:1px solid #fecaca; padding:10px 14px; border-radius:10px; margin-top:14px}

/* footer */
.site-footer{text-align:center; color:var(--muted); font-size:.82rem; padding:30px 20px; border-top:1px solid var(--line)}
.site-footer p{margin:4px 0}

/* loading */
.loading-overlay{
  position:fixed; inset:0; background:rgba(245,247,251,.94); display:flex;
  flex-direction:column; align-items:center; justify-content:center; gap:18px; z-index:100; text-align:center;
}
.spinner{width:46px; height:46px; border:4px solid var(--accent-l); border-top-color:var(--accent);
  border-radius:50%; animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* result */
.result-wrap{max-width:780px; margin:0 auto; padding:30px 20px 60px}
.result-head{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:8px}
.result-head h1{font-size:1.6rem; margin:0}
.countdown{background:var(--accent-l); color:var(--accent-d); padding:8px 16px; border-radius:999px; font-size:.95rem; white-space:nowrap}
.countdown strong{font-size:1.25rem}
.summary{font-size:1.05rem; color:var(--ink); background:#fff; border-left:4px solid var(--accent);
  padding:12px 16px; border-radius:8px; margin:14px 0 24px}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 24px; margin-bottom:18px; box-shadow:var(--shadow)}
.card h2{margin:0 0 14px; font-size:1.18rem}
.card p{margin:0; color:var(--ink)}

.subject{padding:14px 0; border-top:1px dashed var(--line)}
.subject:first-of-type{border-top:none; padding-top:0}
.subject-head{display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap}
.subject-head h3{margin:0; font-size:1.05rem; color:var(--accent-d)}
.lvl{color:var(--muted); font-size:.88rem}
.book-list{list-style:none; counter-reset:bk; padding:0; margin:12px 0 0}
.book-list li{position:relative; padding:12px 12px 12px 44px; background:#fafbff; border:1px solid var(--line);
  border-radius:10px; margin-bottom:10px}
.book-list li::before{counter-increment:bk; content:counter(bk); position:absolute; left:12px; top:12px;
  width:22px; height:22px; background:var(--accent); color:#fff; border-radius:50%; font-size:.78rem;
  display:flex; align-items:center; justify-content:center; font-weight:700}
.book-top{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.book-name{font-weight:700}
.tag{font-size:.72rem; background:var(--line); color:var(--muted); padding:2px 8px; border-radius:999px}
.tag.owned{background:#dcfce7; color:var(--green)}
.period{font-size:.78rem; color:var(--amber); margin-left:auto}
.book-goal{font-size:.86rem; color:var(--green); margin-top:5px}
.book-why{font-size:.86rem; color:var(--muted); margin-top:3px}

.today{border:2px solid var(--accent)}
.task-list{list-style:none; padding:0; margin:0}
.task-list li{padding:8px 0; border-bottom:1px solid var(--line)}
.task-list li:last-child{border-bottom:none}
.task-list label{display:flex; align-items:center; gap:8px; cursor:pointer}
.t-sub{font-size:.74rem; background:var(--accent-l); color:var(--accent-d); padding:2px 8px; border-radius:999px}
.mins{margin-left:auto; color:var(--muted); font-size:.82rem}

.week-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:8px}
.day{background:#fafbff; border:1px solid var(--line); border-radius:8px; padding:8px; font-size:.8rem}
.day-name{font-weight:700; text-align:center; color:var(--accent-d)}
.day-focus{font-size:.72rem; color:var(--muted); text-align:center; margin-bottom:4px}
.day ul{padding-left:14px; margin:4px 0}
.day li{margin-bottom:2px}

.milestones{list-style:none; padding:0; margin:0}
.milestones li{display:flex; gap:14px; padding:8px 0; border-left:2px solid var(--accent); padding-left:14px; margin-left:6px}
.ms-date{font-weight:700; color:var(--accent-d); min-width:80px}
.cautions{background:#fffbeb; border-color:#fde68a}
.cautions ul{margin:0; padding-left:18px; color:#92400e; font-size:.88rem}

.result-actions{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:24px}
.save-hint{margin-top:18px; background:var(--accent-l); padding:12px 16px; border-radius:10px; font-size:.9rem}
/* 価値体験直後の保存CTA（結果カードの直後・アクションの上） */
.save-cta{display:flex; flex-direction:column; gap:8px; background:var(--accent-l);
  border:1px solid #c7d2fe; border-radius:12px; padding:16px 18px; margin:24px 0 6px}
.save-cta strong{font-size:1.05rem}
.save-cta span{color:var(--muted); font-size:.9rem; line-height:1.6}
.save-cta .btn-primary{align-self:flex-start; margin-top:4px}
/* 今日やること: チェック済みは控えめに */
.task-list li.done{opacity:.5}
.task-list li.done label{text-decoration:line-through; text-decoration-color:var(--muted)}
.empty{text-align:center; padding:60px 20px; color:var(--muted)}
.generating{text-align:center; padding:70px 20px; display:flex; flex-direction:column; align-items:center; gap:12px}
.generating h2{margin:8px 0 0}
.generating p{margin:0; color:var(--muted)}

/* auth */
.auth-wrap{max-width:420px; margin:40px auto; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); padding:30px; box-shadow:var(--shadow)}
.auth-wrap h1{margin:0 0 8px}
.auth-note{color:var(--muted); font-size:.88rem; margin:0 0 20px}
.auth-switch{text-align:center; margin-top:18px; font-size:.9rem; color:var(--muted)}

/* mypage */
.plan-list{list-style:none; padding:0; margin:18px 0}
.plan-list li{margin-bottom:10px}
.plan-list a{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  background:#fff; border:1px solid var(--line); border-radius:10px; padding:14px 16px; color:var(--ink)}
.plan-list a:hover{border-color:var(--accent); text-decoration:none; background:var(--accent-l)}
.pl-title{font-weight:700}
.pl-meta{color:var(--muted); font-size:.84rem}

@media(max-width:640px){
  .hero{padding:40px 16px 24px}
  .hero h1{font-size:1.6rem}
  .grid2{grid-template-columns:1fr}
  /* 週次プランは2列だと縦長で読みにくい→1日1行の横並びに */
  .week-grid{grid-template-columns:1fr; gap:6px}
  .day{display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; text-align:left; padding:10px 12px}
  .day-name{min-width:2.2em; text-align:left}
  .day-focus{text-align:left; margin-bottom:0}
  .day ul{flex:1 1 100%; padding-left:18px; margin:2px 0 0}
  .form-wrap{padding:20px; border-radius:0; border-left:none; border-right:none}
  .result-head h1{font-size:1.3rem}
}