/* ============================================================
   JF Blog Design System — reusable across JLPTForAll blog posts
   Prefix: jf-  |  Theme: "hanko stamp" — ink, washi paper, seal red
   ============================================================ */
:root{
  --jf-ink:#1a1a2e;          /* primary text / display */
  --jf-paper:#ffffff;        /* page background, washi paper */
  --jf-paper-soft:#f4f4f8;   /* card / section background */
  --jf-seal:#D81E2C;         /* hanko stamp red — signature accent */
  --jf-seal-dark:#a01520;
  --jf-line:#e8e8ee;         /* hairline borders */
  --jf-muted:#6b6b7e;        /* secondary text */
  --jf-gold:#f0a500;         /* sparing highlight accent */
  --jf-radius:10px;
  --jf-font-display:'Outfit',sans-serif;
  --jf-font-body:'Inter',sans-serif;
  --jf-font-mono:'JetBrains Mono',monospace;
}

.jf{ font-family:var(--jf-font-body); color:var(--jf-ink); background:var(--jf-paper); }
.jf h1,.jf h2,.jf h3{ font-family:var(--jf-font-display); }
.jf a{ color:var(--jf-seal); text-decoration:none; border-bottom:1px solid currentColor; }
.jf a:hover{ color:var(--jf-seal-dark); }


.txtcl {
    color: #fff !important;
}

/* Hero — hanko stamp motif as page mark */
.jf-hero{
  position:relative;
  padding:3.2rem 1.5rem 2.6rem;
  text-align:center;
  border-bottom:1px solid var(--jf-line);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  color:#fff;
}
.jf-hero-crumb{ font-size:.78rem; color:rgba(255,255,255,0.65); margin-bottom:1.4rem; }
.jf-hero-crumb a{ color:rgba(255,255,255,0.65); border-bottom-color:rgba(255,255,255,0.3); }
.jf-hero-crumb a:hover{ color:#fff; }
.jf-hero h1{ font-size:clamp(1.7rem,4vw,2.6rem); font-weight:800; line-height:1.25; max-width:760px; margin:0 auto 1rem; color:#fff; }
.jf-hero h1 em{ font-style:normal; color:var(--jf-gold); }
.jf-hero-meta{ font-size:.82rem; color:rgba(255,255,255,0.7); display:flex; gap:1.1rem; justify-content:center; flex-wrap:wrap; font-family:var(--jf-font-mono); }
.jf-stamp{
  width:64px; height:64px; margin:0 auto 1.1rem; border:3px solid #fff; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:#fff;
  font-family:var(--jf-font-display); font-weight:800; font-size:1.4rem; transform:rotate(-8deg);
  box-shadow:0 0 0 3px rgba(255,255,255,0.15);
}
/* Layout */
.jf-layout{ max-width:1080px; margin:0 auto; padding:2.8rem 1.5rem; display:grid; grid-template-columns:1fr 280px; gap:2.6rem; align-items:start; }
@media (max-width:860px){ .jf-layout{ grid-template-columns:1fr; } .jf-side{ order:-1; } }

/* Article typography */
.jf-article h2{ font-size:1.4rem; font-weight:700; margin:2.4rem 0 .9rem; padding-bottom:.5rem; border-bottom:2px solid var(--jf-seal); display:inline-block; }
.jf-article h3{ font-size:1.05rem; font-weight:600; margin:1.7rem 0 .5rem; }
.jf-article p{ font-size:1.01rem; line-height:1.85; margin-bottom:1.1rem; }
.jf-article p.lead{ font-size:1.1rem; color:var(--jf-ink); }

/* TOC */
.jf-toc{ background:var(--jf-ink); color:#fff; border-radius:var(--jf-radius); padding:1.3rem 1.5rem; margin-bottom:2.2rem; }
.jf-toc p{ font-family:var(--jf-font-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:#b8b3a6; margin:0 0 .8rem; }
.jf-toc ol{ margin:0; padding-left:1.1rem; }
.jf-toc li{ font-size:.88rem; margin-bottom:.45rem; }
.jf-toc a{ color:#eee; border:none; }
.jf-toc a:hover{ color:var(--jf-gold); }

/* Callout */
.jf-callout{ background:var(--jf-paper-soft); border-left:3px solid var(--jf-seal); border-radius:0 var(--jf-radius) var(--jf-radius) 0; padding:1rem 1.3rem; margin:1.4rem 0; }
.jf-callout p{ margin:0; font-size:.95rem; line-height:1.7; }

/* Level grid — hanko badges */
.jf-levels{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:.9rem; margin:1.3rem 0 2rem; }
.jf-level{ border:1px solid var(--jf-line); border-radius:var(--jf-radius); padding:1.1rem .9rem; text-align:center; }
.jf-level .badge{
  width:46px; height:46px; margin:0 auto .6rem; border:2px solid var(--jf-seal); border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-family:var(--jf-font-mono); font-weight:600; color:var(--jf-seal);
}
.jf-level h3{ font-size:.88rem; margin:0 0 .3rem; }
.jf-level p{ font-size:.76rem; color:var(--jf-muted); margin:0; line-height:1.5; }

/* Table */
.jf-table{ width:100%; border-collapse:collapse; font-size:.88rem; margin:1.3rem 0 1.8rem; border:1px solid var(--jf-line); border-radius:var(--jf-radius); overflow:hidden; }
.jf-table thead{ background:var(--jf-ink); color:#fff; }
.jf-table th{ padding:.75rem .9rem; text-align:left; font-weight:600; font-size:.76rem; letter-spacing:.03em; }
.jf-table td{ padding:.65rem .9rem; border-bottom:1px solid var(--jf-line); }
.jf-table tr:last-child td{ border-bottom:none; }
.jf-table tr:nth-child(even) td{ background:var(--jf-paper-soft); }

/* Roadmap timeline */
.jf-roadmap{ list-style:none; margin:1.4rem 0 2rem; padding:0; border-left:2px solid var(--jf-line); }
.jf-roadmap li{ position:relative; padding:0 0 1.3rem 1.4rem; }
.jf-roadmap li::before{ content:''; position:absolute; left:-6.5px; top:4px; width:11px; height:11px; border-radius:50%; background:var(--jf-seal); }
.jf-roadmap .wk{ font-family:var(--jf-font-mono); font-size:.72rem; color:var(--jf-seal); letter-spacing:.03em; }
.jf-roadmap h3{ margin:.2rem 0 .3rem; font-size:.98rem; }
.jf-roadmap p{ font-size:.87rem; color:var(--jf-muted); margin:0; line-height:1.6; }

/* Stat strip */
.jf-stats{ background:var(--jf-ink); border-radius:var(--jf-radius); padding:1.6rem 1.4rem; display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:1rem; text-align:center; margin:1.8rem 0; }
.jf-stats .num{ font-family:var(--jf-font-mono); font-weight:600; font-size:1.5rem; color:var(--jf-gold); }
.jf-stats .lbl{ font-size:.72rem; color:#b8b3a6; margin-top:.25rem; }

/* Mistake list */
.jf-mistakes{ list-style:none; padding:0; margin:1.3rem 0 1.8rem; }
.jf-mistakes li{ display:flex; gap:.8rem; padding:.9rem 0; border-bottom:1px solid var(--jf-line); }
.jf-mistakes li:last-child{ border-bottom:none; }
.jf-mistakes .x{ flex-shrink:0; width:26px; height:26px; border-radius:50%; background:var(--jf-seal); color:#fff; display:flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:700; }
.jf-mistakes strong{ display:block; font-size:.94rem; margin-bottom:.15rem; }
.jf-mistakes span{ font-size:.86rem; color:var(--jf-muted); line-height:1.6; }

/* FAQ */
.jf-faq-item{ border:1px solid var(--jf-line); border-radius:var(--jf-radius); margin-bottom:.7rem; overflow:hidden; }
.jf-faq-q{ width:100%; background:#fff; border:none; padding:.9rem 1.2rem; text-align:left; font-family:var(--jf-font-body); font-size:.94rem; font-weight:600; cursor:pointer; display:flex; justify-content:space-between; gap:1rem; }
.jf-faq-q:hover{ background:var(--jf-paper-soft); }
.jf-faq-icon{ flex-shrink:0; width:20px; height:20px; border-radius:50%; background:var(--jf-paper-soft); color:var(--jf-seal); display:flex; align-items:center; justify-content:center; font-weight:700; transition:transform .2s; }
.jf-faq-item.open .jf-faq-icon{ transform:rotate(45deg); }
.jf-faq-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; font-size:.9rem; color:var(--jf-muted); line-height:1.7; padding:0 1.2rem; }
.jf-faq-item.open .jf-faq-a{ max-height:260px; padding:0 1.2rem 1rem; }

/* CTA */
.jf-cta{ background:var(--jf-ink); border-radius:14px; padding:2.1rem 1.7rem; text-align:center; margin:2.8rem 0 1rem; }
.jf-cta h2{ color:#fff; border:none; font-size:1.4rem; margin:0 0 .6rem; }
.jf-cta p{ color:#c9c4b8; font-size:.93rem; margin:0 0 1.3rem; }
.jf-cta-btn{ display:inline-block; background:var(--jf-seal); color:#fff; font-weight:700; padding:.8rem 2rem; border-radius:50px; border-bottom:none; transition:background .2s,transform .15s; }
.jf-cta-btn:hover{ background:var(--jf-seal-dark); transform:scale(1.03); }

/* Sidebar */
.jf-side{ position:sticky; top:20px; }
.jf-side-card{ background:#fff; border:1px solid var(--jf-line); border-radius:var(--jf-radius); padding:1.2rem 1.3rem; margin-bottom:1.3rem; }
.jf-side-card h3{ font-size:.9rem; font-weight:700; margin:0 0 .9rem; padding-bottom:.5rem; border-bottom:2px solid var(--jf-seal); display:inline-block; }
.jf-side-link{ display:flex; align-items:center; gap:.7rem; padding:.55rem 0; border-bottom:1px solid var(--jf-line); font-size:.85rem; font-weight:500; border-bottom-style:solid; }
.jf-side-link:last-child{ border-bottom:none; }
.jf-side-pill{ background:var(--jf-seal); color:#fff; font-size:.68rem; font-weight:700; padding:.15rem .5rem; border-radius:4px; border:none; }
.jf-side-mini{ background:var(--jf-seal); border-radius:var(--jf-radius); padding:1.1rem; text-align:center; }
.jf-side-mini p{ color:#f4ded9; font-size:.82rem; margin:0 0 .8rem; line-height:1.5; }
.jf-side-mini a{ display:block; background:#fff; color:var(--jf-seal); font-weight:700; font-size:.86rem; padding:.6rem 1rem; border-radius:8px; border:none; }












.jf-hero-banner{
  margin: 24px auto 0;
  max-width: 900px;
  border-radius: 16px;
  overflow: hidden;
}

.jf-hero-banner img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.jf-poster-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 28px 0;
}

.jf-poster-card{
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--jf-line, #e8e8ee);
  background: var(--jf-paper-soft, #f4f4f8);
}

.jf-poster-card img{
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

.jf-poster-card figcaption{
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.jf-poster-title{
  font-family: var(--jf-font-display, 'Outfit', sans-serif);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--jf-ink, #1a1a2e);
}

.jf-poster-copyright{
  font-size: 0.72rem;
  color: var(--jf-muted, #6b6b7e);
}

@media (max-width: 900px){
  .jf-poster-grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px){
  .jf-poster-grid{ grid-template-columns: 1fr; }
}
















.jf-anime-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  gap:14px;
  margin:1.1rem 0 1.6rem;
}

.jf-anime-card{
  margin:0;
  border-radius:10px;
  overflow:hidden;
  border:1px solid var(--jf-line);
  background:var(--jf-paper-soft);
}

.jf-anime-card img{
  width:100%;
  height:180px;
  object-fit:cover;
  display:block;
}

.jf-anime-card figcaption{
  padding:8px 10px;
  display:flex;
  flex-direction:column;
  gap:2px;
}

.jf-anime-title{
  font-family:var(--jf-font-display);
  font-weight:700;
  font-size:.82rem;
  color:var(--jf-ink);
}

.jf-anime-copyright{
  font-size:.66rem;
  color:var(--jf-muted);
}

@media (max-width:600px){
  .jf-anime-grid{ grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); }
}