/* =====================================================
   Travel with Masaru — Article Page Styles
   ===================================================== */

.breadcrumb { background:var(--washi-light); border-bottom:1px solid var(--washi-mid); }
.breadcrumb-inner { max-width:var(--max-w); margin:0 auto; padding:12px 24px; display:flex; align-items:center; gap:8px; font-size:.82rem; color:var(--sumi-light); flex-wrap:wrap; }
.breadcrumb a { color:var(--matcha); transition:color var(--transition); }
.breadcrumb a:hover { color:var(--matcha-dark); }
.breadcrumb-sep { color:var(--washi-mid); }

.article-wrap { max-width:820px; margin:0 auto; padding:48px 24px 80px; }

/* Article Header */
.article-header { margin-bottom:36px; }
.article-tag { display:inline-block; background:var(--matcha); color:#fff; font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:4px 12px; border-radius:20px; margin-bottom:16px; }
.article-title { font-family:var(--font-serif); font-size:clamp(1.6rem,3.5vw,2.2rem); line-height:1.35; color:var(--sumi); margin-bottom:20px; }
.article-meta { display:flex; align-items:center; gap:20px; flex-wrap:wrap; font-size:.82rem; color:var(--sumi-light); padding-bottom:20px; border-bottom:1px solid var(--washi-mid); }

/* TOC */
.toc { background:var(--washi-light); border:1px solid var(--washi-mid); border-left:4px solid var(--matcha); border-radius:var(--radius-sm); padding:24px 28px; margin-bottom:40px; }
.toc-title { font-family:var(--font-serif); font-size:.95rem; font-weight:700; color:var(--sumi); margin-bottom:14px; }
.toc ol { padding-left:20px; margin:0; }
.toc li { font-size:.88rem; margin-bottom:6px; line-height:1.5; }
.toc a { color:var(--matcha); transition:color var(--transition); }
.toc a:hover { color:var(--matcha-dark); text-decoration:underline; }
.toc ol ol { margin-top:6px; padding-left:16px; }
.toc ol ol li { font-size:.83rem; color:var(--sumi-light); }

/* Article Body */
.article-body h2, .article-main h2 { font-family:var(--font-serif); font-size:1.45rem; color:var(--sumi); margin:48px 0 18px; padding-bottom:12px; border-bottom:2px solid var(--washi-mid); position:relative; }
.article-body h2::before, .article-main h2::before { content:''; position:absolute; bottom:-2px; left:0; width:48px; height:2px; background:var(--matcha); }
.article-body h3, .article-main h3 { font-family:var(--font-serif); font-size:1.15rem; color:var(--matcha-dark); margin:32px 0 14px; }
.article-body p, .article-main p { font-size:.97rem; color:var(--sumi-light); line-height:1.85; margin-bottom:18px; }
.article-body ul, .article-main ul, .article-body ol, .article-main ol { padding-left:24px; margin-bottom:18px; }
.article-body li, .article-main li { font-size:.95rem; color:var(--sumi-light); line-height:1.75; margin-bottom:6px; }
.article-body strong, .article-main strong { color:var(--sumi); }

/* Images */
.article-img-wrap { margin:24px 0; }
.article-img-wrap img { width:100%; border-radius:var(--radius-sm); box-shadow:var(--shadow); }
.article-img-wrap figcaption { font-size:.8rem; color:var(--sumi-light); text-align:center; margin-top:8px; font-style:italic; opacity:.8; }
.img-pair { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:24px 0; }

/* Numbered items (interleaved with images) */
.num-item { display:flex; align-items:flex-start; gap:14px; padding:14px 16px; margin-bottom:10px; background:var(--washi-light); border-radius:var(--radius-sm); border:1px solid var(--washi-mid); font-size:.96rem; color:var(--sumi-light); line-height:1.75; }
.num-badge { display:flex; align-items:center; justify-content:center; min-width:28px; height:28px; background:var(--matcha); color:#fff; font-weight:700; font-size:.85rem; border-radius:50%; flex-shrink:0; margin-top:2px; }

/* Choice Cards */
.choice-card { border:1px solid var(--washi-mid); border-radius:var(--radius); padding:28px; margin-bottom:24px; background:#fff; box-shadow:0 2px 12px rgba(42,42,42,.06); }
.choice-card--recommended { border-color:var(--kin); background:var(--kin-light); }
.choice-card-header { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.choice-num { display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:var(--matcha); color:#fff; font-weight:700; font-size:1rem; flex-shrink:0; }
.choice-num--gold { background:var(--kin); color:#2A2A2A; }
.choice-title { font-family:var(--font-serif); font-size:1.05rem; color:var(--sumi); line-height:1.35; }
.choice-badge { margin-left:auto; background:var(--shu); color:#fff; font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:3px 10px; border-radius:20px; flex-shrink:0; }
.choice-specs { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:10px 20px; }
.choice-specs li { font-size:.88rem; color:var(--sumi-light); display:flex; flex-direction:column; gap:2px; margin:0; }
.spec-label { font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--matcha); }
.spec-value { font-size:.95rem; color:var(--sumi); font-weight:500; }

/* Tip / Info / Warning boxes */
.tip-box, .warning-box, .info-box { border-radius:var(--radius-sm); padding:18px 20px; margin:24px 0; display:flex; gap:14px; align-items:flex-start; }
.tip-box { background:var(--matcha-light); border:1px solid rgba(91,122,78,.25); }
.warning-box { background:#FEF9E7; border:1px solid rgba(192,57,43,.2); }
.info-box { background:#EBF5FB; border:1px solid rgba(41,128,185,.2); }
.box-icon { font-size:1.3rem; flex-shrink:0; margin-top:1px; }
.box-content p { font-size:.9rem; margin:0; color:var(--sumi-light); }

/* Sightseeing grid */
.sight-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:20px 0; }
.sight-item { background:var(--washi-light); border:1px solid var(--washi-mid); border-radius:var(--radius-sm); padding:18px 20px; }
.sight-name { font-family:var(--font-serif); font-weight:700; font-size:.97rem; color:var(--sumi); margin-bottom:5px; }
.sight-desc { font-size:.84rem; color:var(--sumi-light); line-height:1.6; margin:0; }

/* Conclusion */
.conclusion-box { background:var(--matcha); color:#fff; border-radius:var(--radius); padding:36px; text-align:center; margin:40px 0 0; }
.conclusion-box h2 { font-family:var(--font-serif); font-size:1.5rem; color:#fff; margin-bottom:14px; border:none; padding:0; }
.conclusion-box h2::before { display:none; }
.conclusion-box p { color:rgba(255,255,255,.88); font-size:.97rem; max-width:560px; margin:0 auto; }

/* Affiliate disclosure note */
.affiliate-note {
  background: #FFF8F0;
  border: 1px solid #F0D5AA;
  border-left: 3px solid #C9983A;
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  font-size: .8rem;
  color: var(--sumi-light);
  margin-bottom: 28px;
  line-height: 1.7;
}
.affiliate-note a { color: var(--matcha); text-decoration: underline; }

/* Table currency note */
.table-note {
  font-size: .78rem;
  color: #B05A00;
  margin: -8px 0 20px;
  font-style: italic;
}

/* Responsive */
@media (max-width:600px) {
  .img-pair { grid-template-columns:1fr; }
  .choice-card { padding:20px; }
  .choice-specs { grid-template-columns:1fr; }
  .sight-grid { grid-template-columns:1fr; }
}