/* Reading-first guide layout. All answers and navigation remain native HTML. */
.article-page { padding-block: 56px 96px; }
.article-layout { width: min(900px, calc(100% - 48px)); max-width: 900px; }
.article-layout .back-link { margin-bottom: 38px; font-size: .88rem; }
.article-layout h1 { max-width: 870px; margin-top: 14px; font-size: clamp(2.25rem, 4.6vw, 4.2rem); line-height: 1.08; letter-spacing: -.045em; text-wrap: balance; }
.article-meta { row-gap: 10px; line-height: 1.6; }
.article-lead { max-width: 800px; margin-top: 28px; font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.65; }
.article-summary { margin-top: 32px; padding: 26px 30px; border-left: 3px solid #0062cc; border-radius: 0 16px 16px 0; background: #f0f6fd; }
.article-summary strong { color: #004a99; font-size: .85rem; }
.article-summary p { margin-top: 9px; color: #263d57; line-height: 1.75; font-size: 1.04rem; }
.article-toc { margin-top: 28px; padding: 4px 24px 12px; border: 1px solid #d5e1ef; border-radius: 16px; background: #fff; }
.article-toc summary { min-height: 52px; padding-block: 14px; font-size: .98rem; font-weight: 700; cursor: pointer; }
.article-toc summary::marker { color: #0062cc; }
.article-toc ol { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 24px; margin: 0; padding: 2px 0 8px 22px; color: #52677d; }
.article-toc li { padding-left: 2px; font-size: .9rem; }
.article-toc a { display: flex; align-items: center; min-height: 44px; padding-block: 7px; color: #004a99; line-height: 1.5; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.article-body { max-width: 800px; margin: 44px 0 0; }
.article-body section + section { margin-top: 44px; }
.article-body h2 { margin: 0 0 18px; font-size: clamp(1.65rem, 2.5vw, 2.2rem); line-height: 1.2; letter-spacing: -.025em; text-wrap: balance; scroll-margin-top: 120px; }
.article-body h3 { margin-bottom: 12px; font-size: 1.1rem; line-height: 1.4; }
.article-body p, .article-body li { color: #40566f; font-size: 1.02rem; line-height: 1.8; }
.article-body p + p, .article-body p + ul, .article-body p + ol { margin-top: 16px; }
.article-body ul, .article-body ol { padding-left: 22px; }
.article-body li + li { margin-top: 8px; }
.article-body a { color: #004a99; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.article-body a:hover, .article-toc a:hover { color: #002e63; text-decoration-thickness: 2px; }
.article-layout :is(a, summary, [tabindex]):focus-visible { outline: 3px solid #0062cc; outline-offset: 5px; border-radius: 3px; }
.article-table-hint { display: none; }
.article-table-wrap { margin-block: 24px; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; border: 1px solid #d5e1ef; border-radius: 12px; }
.article-table-wrap table { width: 100%; min-width: 540px; border-collapse: collapse; text-align: left; font-size: .9rem; line-height: 1.65; }
.article-table-wrap caption { padding: 17px 20px; color: #102742; font-weight: 700; text-align: left; background: #f0f6fd; }
.article-table-wrap th, .article-table-wrap td { padding: 16px 18px; border-top: 1px solid #d5e1ef; vertical-align: top; color: #40566f; }
.article-table-wrap thead th { color: #102742; background: #f8fafd; font-weight: 700; }
.article-table-wrap tbody th { color: #102742; font-weight: 600; }
.article-sources { padding-top: 32px; border-top: 1px solid #d5e1ef; }
.article-sources li { font-size: .94rem; }
.article-sources .source-note { margin-top: 18px; color: #52677d; font-size: .88rem; }
.article-related { margin-top: 30px; padding: 24px 26px; border-radius: 14px; background: #f5f8fc; }
.article-related a { display: inline-flex; align-items: center; min-height: 44px; }
.article-related li + li { margin-top: 2px; }
.post-image.post-hotels { background: linear-gradient(135deg, #054d61, #3c9da2); }
.post-image.post-websites { background: linear-gradient(135deg, #153269, #4675c7); }
@media (max-width: 640px) {
  .article-page { padding-block: 30px 64px; }
  .article-layout { width: calc(100% - 40px); }
  .article-layout .back-link { margin-bottom: 30px; }
  .article-layout h1 { font-size: clamp(2rem, 8.8vw, 2.8rem); line-height: 1.12; }
  .article-meta { gap: 7px 14px; font-size: .75rem; }
  .article-meta > * { gap: 14px; }
  .article-lead { margin-top: 24px; }
  .article-summary { margin-top: 26px; padding: 20px; }
  .article-summary p { font-size: 1rem; }
  .article-toc { padding-inline: 18px; }
  .article-toc ol { grid-template-columns: 1fr; gap: 0; }
  .article-body { margin-top: 34px; }
  .article-body section + section { margin-top: 34px; }
  .article-body h2 { scroll-margin-top: 106px; }
  .article-body p, .article-body li { font-size: 1rem; line-height: 1.75; }
  .article-body .article-table-hint { display: block; margin-top: 20px; color: #52677d; font-size: .82rem; }
  .article-table-hint + .article-table-wrap { margin-top: 8px; }
  .article-related { padding: 20px; }
}