/* 銘柄起点ページ用。styles.css の変数と既存クラスを前提に、記事レイアウトだけを足す。 */

.article {
  max-width: 940px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}

/* --- パンくず --- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 2rem; font-size: .72rem; color: var(--muted); }
.crumbs a { color: var(--gold); text-decoration: none; }
.crumbs a:hover { color: var(--gold-bright); text-decoration: underline; }
.crumbs a:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }
.crumb-sep { color: rgba(169, 161, 143, .5); }

/* --- 見出し --- */
.article-head { padding-bottom: 2rem; margin-bottom: 2.5rem; border-bottom: 1px solid var(--line); }
.article-head .eyebrow { margin: 0 0 .9rem; }
.article-head h1 { margin: 0 0 1.2rem; font-size: clamp(1.6rem, 4.2vw, 2.5rem); line-height: 1.4; }
.article-lead { margin: 0; color: var(--paper); font-size: 1rem; line-height: 2; }

.article-block { margin-bottom: 3rem; }
.article-block h2 { margin: 0 0 1rem; font-size: clamp(1.15rem, 2.6vw, 1.5rem); line-height: 1.5; }
.article-block p { margin: 0 0 1rem; color: var(--paper); line-height: 2; font-size: .92rem; }
.article-block p:last-child { margin-bottom: 0; }
.article-block strong { color: var(--gold-bright); }

/* --- 好みの傾向 --- */
.trait-list { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.4rem; padding: 0; list-style: none; }
.trait-list li { padding: .35rem .85rem; border: 1px solid var(--line); border-radius: 999px; color: var(--gold-bright); font-size: .74rem; }

/* --- 3方向の説明 --- */
.lane-legend { margin: 0; padding: 0; list-style: none; counter-reset: lane; display: grid; gap: .75rem; }
.lane-legend li { position: relative; padding: .9rem 1rem .9rem 3rem; border: 1px solid var(--line); background: rgba(255, 255, 255, .018); color: var(--paper); font-size: .86rem; line-height: 1.85; counter-increment: lane; }
.lane-legend li::before { content: "0" counter(lane); position: absolute; left: 1rem; top: .9rem; color: var(--gold); font-size: .74rem; letter-spacing: .06em; }
.lane-legend strong { display: block; margin-bottom: .15rem; color: var(--gold-bright); font-size: .9rem; }

/* --- 価格帯セクション --- */
.gift-band-section { margin-bottom: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.gift-band-section h2 { margin: 0 0 .5rem; font-size: clamp(1.2rem, 3vw, 1.6rem); }
.band-note { margin: 0 0 1.6rem; color: var(--muted); font-size: .84rem; line-height: 1.9; }

.gift-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.gift-grid.single { grid-template-columns: minmax(0, 380px); }

/* --- 候補カード --- */
.gift-card { display: flex; flex-direction: column; padding: 1.25rem; border: 1px solid var(--line); background: rgba(255, 255, 255, .018); }
.gift-lane { margin: 0 0 .8rem; }
.gift-lane-badge { display: inline-block; padding: .3rem .7rem; border: 1px solid currentColor; font-size: .66rem; letter-spacing: .04em; }
.gift-card[data-lane="safe"] .gift-lane-badge { color: #d8bd7d; }
.gift-card[data-lane="similar"] .gift-lane-badge { color: #86bdb2; }
.gift-card[data-lane="bold"] .gift-lane-badge { color: #d199ae; }
.gift-card h3 { margin: 0 0 .5rem; font-size: 1.02rem; line-height: 1.55; }
.gift-meta { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0 0 .8rem; color: var(--muted); font-size: .7rem; letter-spacing: .05em; }
.gift-band { padding: .18rem .55rem; border: 1px solid var(--line); color: var(--gold); letter-spacing: 0; }
.gift-flavor { margin: 0; color: var(--ivory); font-size: .84rem; line-height: 1.8; }
.gift-reason { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.gift-reason span { display: block; margin-bottom: .35rem; color: var(--gold); font-size: .66rem; letter-spacing: .08em; }
.gift-reason p { margin: 0; color: var(--paper); font-size: .8rem; line-height: 1.9; }
.gift-card .taste-tags { margin-top: .9rem; }
.gift-card .shop-links { margin-top: auto; padding-top: 1rem; }

/* --- 補足ブロック --- */
.callout-block { padding: 1.6rem; border: 1px solid var(--line); border-left: 3px solid var(--wine); background: rgba(255, 255, 255, .018); }
.decision-block { padding-top: 2rem; border-top: 1px solid var(--line); }
.cta-block { padding: 2rem 1.6rem; border: 1px solid var(--line); background: linear-gradient(135deg, rgba(218, 193, 130, .07), rgba(255, 255, 255, .018)); text-align: center; }
.cta-block .primary-button { display: inline-flex; align-items: center; gap: .6rem; margin-top: .5rem; text-decoration: none; }

/* --- 他ブランドへの導線 --- */
.other-brands { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .5rem; margin: 0; padding: 0; list-style: none; }
.other-brands a { display: block; padding: .75rem .9rem; border: 1px solid var(--line); color: var(--paper); font-size: .82rem; text-decoration: none; transition: border-color .2s ease, color .2s ease; }
.other-brands a:hover { border-color: var(--gold-bright); color: var(--gold-bright); }
.other-brands a:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }

/* --- ハブページ --- */
.hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: .75rem; margin-bottom: 3rem; }
.hub-card { display: flex; flex-direction: column; gap: .35rem; padding: 1.2rem; border: 1px solid var(--line); background: rgba(255, 255, 255, .018); color: var(--ivory); text-decoration: none; transition: border-color .2s ease, transform .2s ease; }
.hub-card:hover { border-color: var(--gold-bright); transform: translateY(-2px); }
.hub-card:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }
.hub-country { color: var(--gold); font-size: .62rem; letter-spacing: .16em; }
.hub-card strong { font-size: .98rem; }
.hub-card small { color: var(--muted); font-size: .75rem; line-height: 1.7; }

/* --- ヘッダーのCTAをリンクとして使う --- */
a.nav-cta { display: inline-flex; align-items: center; text-decoration: none; }

.article .affiliate-note { margin-top: 3rem; }

@media (max-width: 980px) {
  .gift-grid { grid-template-columns: minmax(0, 1fr); }
  .gift-grid.single { grid-template-columns: minmax(0, 1fr); }
  .gift-card .shop-links { margin-top: 1rem; }
}

@media (max-width: 680px) {
  .article { padding: 1.75rem 1rem 3rem; }
  .article-block { margin-bottom: 2.25rem; }
  .gift-band-section { margin-bottom: 2.5rem; }
  .cta-block { padding: 1.5rem 1.1rem; }
}