/* DateNote – style.css */
*{box-sizing:border-box;margin:0;padding:0}

:root{
  --accent:#b0335f;
  --accent-dark:#8a2748;
  --accent-light:#fce8ef;
  --bg:#fff;
  --bg-warm:#fdf8f5;
  --text:#2d2224;
  --muted:#7a6a6e;
  --border:#ecdde2;
  --r:10px;
  --shadow:0 2px 14px rgba(176,51,95,.08);
  --shadow-h:0 8px 26px rgba(176,51,95,.18);
}

body{
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Noto Sans JP",sans-serif;
  color:var(--text);background:var(--bg);line-height:1.75;font-size:15px;
}

.container{max-width:860px;margin:0 auto;padding:0 1.1rem}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* HEADER */
.site-header{
  background:var(--bg);border-bottom:1px solid var(--border);
  padding:.85rem 0;position:sticky;top:0;z-index:100;
}
.site-header .container{display:flex;align-items:center;justify-content:space-between}
.logo{font-size:1.3rem;font-weight:800;color:var(--accent);letter-spacing:-.03em}
.site-header nav a{color:var(--muted);font-size:.9rem;margin-left:1.2rem}

/* FOOTER */
.site-footer{
  background:var(--bg-warm);border-top:1px solid var(--border);
  padding:2rem 0;margin-top:4rem;text-align:center;
}
.footer-links a{color:var(--muted);margin:0 .8rem;font-size:.87rem}
.footer-copy{color:var(--muted);font-size:.78rem;margin-top:.5rem}

/* HERO */
.hero{
  background:linear-gradient(160deg,#fff0f5 0%,#fdf8f5 60%,#f5f0fd 100%);
  padding:4.5rem 0 4rem;text-align:center;border-bottom:1px solid var(--border);
  position:relative;overflow:hidden;
}
.hero::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 60% at 50% 0%,rgba(176,51,95,.07) 0%,transparent 70%);
  pointer-events:none;
}
.hero-eyebrow{
  font-size:.78rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);margin-bottom:1.1rem;
}
.hero-title{
  font-size:clamp(2.1rem,6vw,3.4rem);font-weight:900;
  line-height:1.2;letter-spacing:-.03em;margin-bottom:1rem;color:var(--text);
}
.hero-accent-line{
  width:3rem;height:3px;background:var(--accent);
  border-radius:2px;margin:0 auto 1.4rem;
}
.hero-sub{color:var(--muted);font-size:1rem;margin-bottom:1.6rem;line-height:1.9}
.hero-stats{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin-bottom:2rem;
}
.hero-stats span{
  background:var(--bg);border:1px solid var(--border);
  border-radius:2rem;padding:.3rem .9rem;font-size:.83rem;color:var(--muted);
}
.btn-primary{
  display:inline-block;background:var(--accent);color:#fff;
  padding:.85rem 2.4rem;border-radius:2rem;font-weight:700;font-size:1rem;
  box-shadow:0 4px 16px rgba(176,51,95,.3);transition:background .2s,box-shadow .2s;
}
.btn-primary:hover{background:var(--accent-dark);box-shadow:0 6px 20px rgba(176,51,95,.4);text-decoration:none}

/* SECTION HEADING */
.section-title{
  font-size:1.25rem;font-weight:700;margin-bottom:1.5rem;
  padding-bottom:.45rem;border-bottom:2px solid var(--accent);display:inline-block;
}
.stories-section{padding:3rem 0}

/* CARD GRID */
.card-grid{display:grid;grid-template-columns:1fr;gap:1.4rem}
@media(min-width:580px){.card-grid{grid-template-columns:1fr 1fr}}
@media(min-width:840px){.card-grid{grid-template-columns:1fr 1fr 1fr}}

.story-card{
  display:block;background:var(--bg);border:1px solid var(--border);
  border-radius:var(--r);padding:0;box-shadow:var(--shadow);overflow:hidden;
  color:var(--text);transition:transform .2s,box-shadow .2s;
}
.story-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-h);text-decoration:none}

.card-thumb{
  height:100px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.3rem;
}
.card-icon{font-size:2rem;line-height:1}
.card-scene{font-size:.82rem;font-weight:800;color:#fff;letter-spacing:.06em}
.thumb-propose  {background:linear-gradient(135deg,#b0335f,#7a1f40)}
.thumb-anniversary{background:linear-gradient(135deg,#4a6090,#2d3f6a)}
.thumb-birthday {background:linear-gradient(135deg,#c06030,#8a3a10)}

.card-body{padding:1rem 1.2rem 1.3rem}
.card-rating{display:flex;align-items:center;gap:.5rem;margin-bottom:.55rem}
.card-stars{color:var(--accent);letter-spacing:.04em;font-size:1rem}
.card-score{font-size:.78rem;color:var(--muted);white-space:nowrap}
.card-title{font-size:1.05rem;font-weight:700;margin-bottom:.25rem}
.card-meta{color:var(--muted);font-size:.83rem;margin-bottom:.5rem}
.card-note{font-size:.86rem;color:var(--muted);line-height:1.55}

/* STORY DETAIL */
.story-detail{padding:2rem 0 3rem}
.story-header{margin-bottom:2.2rem}
.story-header h1{font-size:clamp(1.25rem,3vw,1.75rem);font-weight:800;margin:.5rem 0}
.story-meta{display:flex;flex-wrap:wrap;gap:.8rem;color:var(--muted);font-size:.9rem;margin-top:.5rem}
.badge{
  display:inline-block;background:var(--accent);color:#fff;
  font-size:.78rem;font-weight:700;padding:.22rem .75rem;border-radius:1rem;
}

.story-section{margin-bottom:2.6rem}
.story-section h2{
  font-size:1.05rem;font-weight:700;color:var(--accent);
  margin-bottom:1rem;padding-left:.7rem;border-left:3px solid var(--accent);
}

/* TIMELINE */
.timeline{list-style:none;padding:0;position:relative;counter-reset:step}
.timeline::before{
  content:'';position:absolute;left:1.15rem;top:.6rem;bottom:.6rem;
  width:2px;background:var(--border);
}
.timeline-step{position:relative;padding:.7rem 0 .7rem 3rem;counter-increment:step}
.timeline-step::before{
  content:counter(step);position:absolute;left:0;top:.65rem;
  width:2.3rem;height:2.3rem;background:var(--accent);color:#fff;
  border-radius:50%;font-size:.82rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}

/* INFO TABLE */
.info-table{width:100%;border-collapse:collapse;font-size:.91rem}
.info-table th,.info-table td{padding:.58rem .8rem;border-bottom:1px solid var(--border);text-align:left}
.info-table th{width:40%;color:var(--muted);background:var(--bg-warm);font-weight:600}

/* SUMMARY */
.summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.summary-item{background:var(--bg-warm);border-radius:var(--r);padding:1rem}
.summary-item .label{display:block;font-size:.78rem;color:var(--muted);margin-bottom:.3rem}
.summary-item .value{font-weight:700;font-size:1rem}

/* CAUTION */
.caution-section{background:#fff8f0;border:1px solid #f0d0a0;border-radius:var(--r);padding:1.2rem 1.5rem}
.caution-section h2{border-left-color:#e08020;color:#b05010}
.caution-text{font-weight:500}

/* REVIEW */
.review-grid{display:grid;gap:1rem}
@media(min-width:580px){.review-grid{grid-template-columns:1fr 1fr}}
.review-item{border-radius:var(--r);padding:1rem 1.2rem}
.review-item h3{font-size:.88rem;font-weight:700;margin-bottom:.4rem}
.review-item.good{background:#f0faf4}.review-item.good h3{color:#1a7a3a}
.review-item.bad{background:#fdf4f6}.review-item.bad h3{color:var(--accent)}
.review-item.change{background:#f0f4fd}.review-item.change h3{color:#2040a0}

/* CTA */
.cta-section{background:var(--bg-warm);border-radius:var(--r);padding:1.5rem}
.pr-label{
  font-size:.73rem;color:var(--muted);background:#e8e0e3;
  display:inline-block;padding:.1rem .5rem;border-radius:.3rem;margin-bottom:.8rem;
}
.cta-grid{display:grid;gap:.8rem}
@media(min-width:500px){.cta-grid{grid-template-columns:1fr 1fr}}
.cta-btn{
  display:block;background:var(--accent);color:#fff;text-align:center;
  padding:.8rem 1rem;border-radius:var(--r);font-weight:700;font-size:.93rem;
  transition:background .2s;
}
.cta-btn:hover{background:var(--accent-dark);text-decoration:none}
.cta-btn.gift{background:#2d7a4a}.cta-btn.gift:hover{background:#1a5a34}
.cta-note{font-size:.76rem;color:var(--muted);margin-top:.6rem}

/* COMPARE */
.compare-section{padding:2rem 0 3rem}
.compare-title{font-size:clamp(1.15rem,3vw,1.55rem);font-weight:800;margin-bottom:.5rem}
.compare-sub{color:var(--muted);margin-bottom:2rem}
.rank-list{display:grid;gap:1.2rem}
.rank-item{
  display:flex;gap:1rem;background:var(--bg);border:1px solid var(--border);
  border-radius:var(--r);padding:1.2rem;box-shadow:var(--shadow);
}
.rank-num{font-size:1.45rem;font-weight:800;color:var(--accent);min-width:2.5rem}
.rank-body{flex:1}
.rank-meta{font-size:.87rem;color:var(--muted);margin-bottom:.3rem}
.rank-stars{color:var(--accent);margin-bottom:.4rem;letter-spacing:.05em}
.rank-note{font-size:.87rem;margin-bottom:.6rem}
.rank-link{font-weight:700;font-size:.9rem}

/* TEXT PAGE */
.text-page{padding:2.5rem 0}
.text-page h1{font-size:1.5rem;font-weight:800;margin-bottom:1.5rem}
.text-page h2{font-size:1rem;font-weight:700;margin:1.5rem 0 .5rem;color:var(--accent)}
.text-page p,.text-page li{margin-bottom:.5rem}
.text-page ul{padding-left:1.5rem}

.empty{color:var(--muted);text-align:center;padding:2rem}