/* WAKAMIZU BUNKA Journal: existing fonts, iris and title proportions. */
.article-page { font-size: var(--fs-md); background: var(--wk-white); }
.article-page :lang(ja) {
  --wk-font-display: "WK Japanese Display", "Noto Serif CJK JP", "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --wk-font-body: "WK Japanese Text", "Noto Sans CJK JP", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  word-break: auto-phrase;
  line-break: strict;
}
.phrase-card__jp, .article-compare dd:lang(ja) { font-family: var(--wk-font-body); }
.article-head { background: var(--wk-iris-soft); padding-bottom: var(--sp-7); }
.article-head__inner { position: relative; max-width: 1080px; display: grid; gap: var(--sp-4); }
.article-head__crumbs { min-width: 0; flex-wrap: wrap; }
.article-head__title { max-width: none; margin: var(--sp-2) 0; }
.article-head__description { max-width: 43em; color: var(--wk-ink-2); line-height: var(--lh-body); text-wrap: pretty; }
.article-head__byline { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); font-size: var(--fs-xs); color: var(--wk-ink-2); }
.article-head__byline a { color: inherit; }
.article-head__brand { font-family: var(--wk-font-latin); font-style: italic; font-size: var(--fs-lg); letter-spacing: .08em; color: var(--wk-gold-deep); }
.article-layout { display: grid; gap: var(--sp-6); max-width: 1080px; padding-top: var(--sp-6); padding-bottom: var(--sp-8); }
.article-main { min-width: 0; max-width: 45em; }
.article-toc { align-self: start; border: 1px solid var(--wk-line); border-radius: var(--r-md); background: var(--wk-white); padding: var(--sp-2) var(--sp-4); }
.article-toc summary { cursor: pointer; min-height: 44px; padding-block: var(--sp-2); font-family: var(--wk-font-display); font-weight: 700; }
.article-toc ol { padding-bottom: var(--sp-2); }
.article-toc a { display: flex; align-items: baseline; gap: var(--sp-3); min-height: 44px; padding-block: var(--sp-2); font-size: var(--fs-sm); line-height: 1.7; color: var(--wk-ink-2); text-decoration: none; }
.article-toc a:hover { text-decoration: underline; }
.article-toc a span { flex: none; font-family: var(--wk-font-latin); font-style: italic; color: var(--wk-gold-deep); }
.article-prose { display: flow-root; }
.article-prose p, .article-prose li { text-wrap: pretty; overflow-wrap: anywhere; }
.article-prose > p, .article-prose > .article-list, .article-prose > .article-quote { margin-block: var(--sp-5); }
.article-heading { font-size: calc(var(--fs-xl) * var(--title-up)); margin-block: var(--sp-7) var(--sp-5); scroll-margin-top: calc(var(--header-h) + var(--sp-5)); }
.article-subheading { font-family: var(--wk-font-display); font-weight: 700; font-size: var(--fs-lg); line-height: var(--lh-head); margin-block: var(--sp-6) var(--sp-4); scroll-margin-top: calc(var(--header-h) + var(--sp-5)); text-wrap: balance; }
.article-list { padding-left: 1.4em; }
ul.article-list { list-style: disc; }
ol.article-list { list-style: decimal; }
.article-list li + li { margin-top: var(--sp-3); }
.article-prose strong { font-weight: 700; }
.article-prose code { background: var(--wk-mist); border-radius: var(--r-xs); padding: 1px 4px; font: inherit; }
.article-callout { padding: var(--sp-5); border: 1px solid var(--wk-line); border-radius: var(--r-md); background: var(--wk-white); margin-block: var(--sp-5); }
.article-callout > * + * { margin-top: var(--sp-4); }
.article-callout--summary { background: var(--wk-aqua-50); border-color: var(--wk-aqua-300); }
.article-callout--note { border-left: 3px solid var(--wk-gold); }
.article-callout--cta { background: var(--wk-iris-soft); border-color: var(--wk-line); }
.article-callout__label { display: inline; font-size: var(--fs-sm); font-weight: 700; color: var(--wk-ink-2); background: linear-gradient(transparent 58%, var(--wk-lemon-300) 58%, var(--wk-lemon-300) 92%, transparent 92%); }
.article-callout__label + * { margin-top: var(--sp-4); }
.article-cta__links { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.article-cta__links .btn { min-width: 0; max-width: 100%; white-space: normal; padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm); letter-spacing: .03em; }
.article-quote { border-left: 2px solid var(--wk-aqua-300); padding-left: var(--sp-5); color: var(--wk-ink-2); }
.article-table { min-width: 0; margin-block: var(--sp-5); }
.article-table__hint { color: var(--wk-ink-3); font-size: var(--fs-xs); margin-bottom: var(--sp-2); }
.article-table__scroll { max-width: 100%; overflow-x: auto; border: 1px solid var(--wk-line); border-radius: var(--r-sm); overscroll-behavior-inline: contain; }
.article-table table { width: 100%; min-width: 580px; border-collapse: collapse; text-align: left; font-size: var(--fs-sm); line-height: 1.8; }
.article-table th, .article-table td { padding: var(--sp-3) var(--sp-4); vertical-align: top; border-right: 1px solid var(--wk-line); border-bottom: 1px solid var(--wk-line); }
.article-table th { font-weight: 700; }
.article-table thead { background: var(--wk-mist); }
.article-table tbody th { min-width: 6em; }
.article-table tr > :last-child { border-right: 0; }
.article-table tbody tr:last-child > * { border-bottom: 0; }
.article-compare { margin-block: var(--sp-5); border: 1px solid var(--wk-line); border-radius: var(--r-md); overflow: hidden; }
.article-compare__row { padding: var(--sp-5); }
.article-compare__row + .article-compare__row { border-top: 1px solid var(--wk-line); }
.article-compare__row dl { display: grid; gap: var(--sp-4); }
.article-compare__row dt { font-size: var(--fs-xs); color: var(--wk-ink-3); }
.article-compare__row dd { margin-top: var(--sp-1); }
.article-compare__row dl > :last-child dd { color: var(--wk-aqua-700); font-weight: 700; }
.article-compare__row > p { font-size: var(--fs-sm); color: var(--wk-ink-2); margin-top: var(--sp-4); }
.phrase-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--wk-line); }
.phrase-tools p { flex: 1 1 15em; font-size: var(--fs-sm); color: var(--wk-ink-2); }
.phrase-card { border: 1px solid var(--wk-line); border-radius: var(--r-md); padding: var(--sp-5); background: var(--wk-white); margin-block: var(--sp-4); }
.phrase-card__top { display: flex; align-items: start; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.phrase-card__number { font-family: var(--wk-font-latin); font-style: italic; font-size: 2.25rem; line-height: 1; color: var(--wk-gold); }
.phrase-card__when { font-size: var(--fs-sm); color: var(--wk-ink-2); line-height: 1.65; }
.phrase-card__when > span { display: block; font-size: var(--fs-xs); color: var(--wk-ink-3); }
.phrase-card__jp { font-size: var(--fs-lg); line-height: 1.75; overflow-wrap: anywhere; }
.phrase-card__translation { margin-top: var(--sp-3); color: var(--wk-ink-2); }
.phrase-card__note { margin-top: var(--sp-4); color: var(--wk-ink-3); font-size: var(--fs-sm); }
.phrase-card__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-4); }
.phrase-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 44px; min-width: 88px; padding: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); line-height: 1.5; border: 1px solid var(--wk-line-strong); border-radius: var(--r-pill); background: var(--wk-mist); color: var(--wk-ink); cursor: pointer; touch-action: manipulation; }
.phrase-button svg { width: 18px; height: 18px; flex: none; }
.phrase-button:hover, .phrase-button[aria-pressed="true"] { background: var(--wk-aqua-100); border-color: var(--wk-aqua-700); }
.phrase-button:disabled { opacity: .55; cursor: default; }
.phrase-card__status { min-height: 1.75em; margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--wk-aqua-700); }
.phrase-card__status[data-error="true"] { color: var(--wk-petal-600); }
.article-faq, .article-sources { margin-top: var(--sp-7); }
.article-faq__item { border-bottom: 1px solid var(--wk-line); }
.article-faq__item summary { display: flex; align-items: baseline; gap: var(--sp-3); min-height: 44px; padding: var(--sp-4) var(--sp-2); cursor: pointer; font-weight: 700; line-height: 1.8; }
.article-faq__item summary::after { content: '+'; flex: none; margin-left: auto; color: var(--wk-aqua-700); }
.article-faq__item[open] summary::after { content: '−'; }
.article-faq__number { flex: none; font-family: var(--wk-font-latin); font-style: italic; color: var(--wk-gold-deep); }
.article-faq__item > p { padding: 0 var(--sp-2) var(--sp-5); color: var(--wk-ink-2); }
.article-sources ol { list-style: decimal; padding-left: 1.4em; }
.article-sources li { margin-bottom: var(--sp-3); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.article-links { max-width: 880px; margin: var(--sp-6) auto 0; }
.article-links__title { font-size: calc(var(--fs-lg) * var(--title-up)); margin-bottom: var(--sp-4); }
.article-row .news__title { min-height: 44px; font-size: var(--fs-md); line-height: 1.8; overflow-wrap: anywhere; }
.article-back { margin-top: var(--sp-5); }
@media (min-width: 900px) {
  .article-layout { grid-template-columns: 220px minmax(0, 1fr); gap: var(--sp-7); padding-top: var(--sp-7); }
  .article-toc { position: sticky; top: calc(var(--header-h) + var(--sp-5)); }
  .article-compare__row dl { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 599px) {
  .article-head { padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + var(--sp-6)); padding-bottom: var(--sp-6); }
  .article-head__title { font-size: calc(var(--fs-2xl) * var(--title-up)); }
  .article-head__description { font-size: var(--fs-md); }
  .article-layout { padding-bottom: var(--sp-7); }
  .article-callout, .phrase-card, .article-compare__row { padding: var(--sp-4); }
  .article-cta__links .btn { flex: 1 1 8em; }
  .article-heading { margin-top: var(--sp-6); }
}