/* October 9 review: shared, readable FAQ layout and a genuine sticky directory. */
.page-faq main,.page-matter main{overflow:visible}
.page-faq .faq-guide-section{padding-block:52px 64px}
.page-faq .docpage{width:100%;max-width:1320px}
.page-faq .docpage__source{margin:0 0 30px;padding:14px 18px;border-left:3px solid #b7c9ef;background:#f6f8fc;color:#657188;font-size:14px;line-height:1.9}
.page-faq .docpage__qa{margin:0;border:0;border-top:1px solid #e4eaf4;border-radius:0;box-shadow:none;transition:background .18s}
.page-faq .docpage__qa[open]{border-color:#e0e8f5;background:#f7faff;box-shadow:none}
.page-faq .docpage__qa summary{gap:16px;min-height:74px;padding:20px 24px;color:#243049;font-size:17px;font-weight:600;line-height:1.8}
.page-faq .docpage__qa summary:hover,.page-faq .docpage__qa[open] summary{color:var(--blue-600)}
.page-faq .docpage__qa summary:hover{background:#f7faff}
.page-faq .docpage__qa summary b{align-self:flex-start;flex:0 0 24px;padding-top:2px;color:#7a8ca9;font-size:14px;line-height:1.9;font-weight:500;font-variant-numeric:tabular-nums}
.page-faq .docpage__qa[open] summary b{color:var(--blue-600)}
.page-faq .docpage__ans{padding:0 64px 24px;color:#526078;font-size:17px;line-height:1.95;overflow-wrap:anywhere}
.page-faq .faq-chevron{width:9px;height:9px;flex:none;margin:0 4px 4px 8px;border-right:1.7px solid #7d8daa;border-bottom:1.7px solid #7d8daa;transform:rotate(45deg);transition:transform .18s}
.page-faq details[open] .faq-chevron{transform:rotate(225deg);margin-top:7px;border-color:var(--blue-600)}
.page-faq .docpage__qa summary:focus-visible{outline:2px solid var(--blue-600);outline-offset:-4px}
:is(.page-faq,.page-matter) .matter-categories{top:var(--support-sticky-top,162px);max-height:calc(100dvh - var(--support-sticky-top,162px) - 20px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#c3d0e8 transparent;align-self:flex-start;flex-shrink:0}
:is(.page-faq,.page-matter) :is(.matter-questions,.docpage__qa,.matter-guide){scroll-margin-top:calc(var(--support-sticky-top,162px) + 12px)}
.matter-categories__tip a{color:var(--blue-600);text-decoration:underline;text-underline-offset:3px}
.coa-bank-section{margin-top:48px;padding-top:36px;border-top:1px solid #e3eaf5}
.coa-bank-section__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:24px}
.coa-bank-section h2{font-size:27px;line-height:1.4;color:#202d44;letter-spacing:.01em}
.coa-bank-section__head p{margin-top:8px;font-size:14px;line-height:1.8;color:#6a778e}
.coa-bank-section__head>span{flex:none;color:#8a96a9;font-size:12px}
.coa-bank-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.coa-bank-card{display:flex;min-width:0;flex-direction:column;padding:24px;border:1px solid #e1e8f3;border-radius:12px;background:#fff;transition:border-color .18s,box-shadow .18s}
.coa-bank-card:hover{border-color:#9db4e2;box-shadow:0 8px 24px #244cb40b}
.coa-bank-card:focus-visible{outline:2px solid var(--blue-600);outline-offset:3px}
.coa-bank-card__logo{display:flex;align-items:center;height:58px;margin-bottom:18px}
.coa-bank-card__logo img{max-width:100%;width:auto;max-height:54px;object-fit:contain;object-position:left center}
.coa-bank-card__wordmark{display:block;font-size:29px;font-weight:700;line-height:1.2;color:#244cb4;letter-spacing:-.035em}
.coa-bank-card__wordmark--expasy{color:#c52346;letter-spacing:-.05em}
.coa-bank-card__wordmark--jcrb{color:#246b78;letter-spacing:.035em}
.coa-bank-card>strong{font-size:15px;line-height:1.5;color:#263951}
.coa-bank-card>span:not(.coa-bank-card__logo){display:block;margin-top:6px;color:#78859a;font-size:12px;line-height:1.7}
.coa-bank-card__action{display:flex;align-items:center;gap:7px;margin-top:18px;color:var(--blue-600);font-size:13px;font-style:normal}
.coa-bank-section__note{margin-top:18px;color:#7b879a;font-size:12px;line-height:1.8}
@media(min-width:961px){
  .page-faq .docpage{width:calc(100% - 64px)}
  :is(.page-faq,.page-matter) .matter-layout{align-items:flex-start}
  :is(.page-faq,.page-matter) .matter-categories{position:sticky}
}
@media(max-width:960px){
  :is(.page-faq,.page-matter) .matter-categories{position:sticky;z-index:20;top:var(--support-sticky-top,120px);width:100%;max-height:none;padding:12px;border-radius:10px;background:#fff;box-shadow:0 4px 16px #172e6008}
  :is(.page-faq,.page-matter) .matter-categories>h3{margin:0 0 9px;font-size:12px}
  :is(.page-faq,.page-matter) .matter-categories__list{display:flex;gap:8px;overflow-x:auto;scrollbar-width:thin;overscroll-behavior-x:contain;padding-bottom:3px}
  :is(.page-faq,.page-matter) .matter-categories button{flex:0 0 auto;width:auto;min-height:44px;padding:9px 12px;white-space:nowrap;font-size:14px}
  :is(.page-faq,.page-matter) .matter-categories__tip{display:none}
  :is(.page-faq,.page-matter) :is(.matter-questions,.docpage__qa){scroll-margin-top:calc(var(--support-sticky-top,120px) + 112px)}
  .coa-bank-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .page-faq .faq-guide-section{padding-block:28px 40px}
  .page-faq .docpage__source{padding:12px 14px;margin-bottom:22px;font-size:13px}
  .page-faq .docpage__source a{margin-left:0}
  .page-faq .docpage__qa summary{gap:10px;min-height:68px;padding:18px 16px;font-size:15px;line-height:1.8}
  .page-faq .docpage__qa summary b{flex-basis:20px;font-size:12px}
  .page-faq .docpage__ans{padding:0 18px 22px 46px;font-size:15px;line-height:1.9}
  .page-faq .matter-search input{font-size:16px}
  .page-faq .matter-search button{min-width:44px;height:44px}
  .page-faq .matter-tools__meta button{min-height:44px}
  :is(.page-faq,.page-matter) .matter-categories{padding:10px}
  :is(.page-faq,.page-matter) .matter-categories>h3{display:none}
  :is(.page-faq,.page-matter) :is(.matter-questions,.docpage__qa){scroll-margin-top:calc(var(--support-sticky-top,120px) + 88px)}
  .coa-bank-section{margin-top:32px;padding-top:28px}
  .coa-bank-section h2{font-size:23px}
  .coa-bank-section__head{display:block;margin-bottom:18px}
  .coa-bank-section__head>span{display:none}
  .coa-bank-grid{gap:10px}
  .coa-bank-card{padding:16px 12px;border-radius:10px}
  .coa-bank-card__logo{height:42px;margin-bottom:14px}
  .coa-bank-card__logo img{max-height:40px}
  .coa-bank-card__wordmark{font-size:23px}
  .coa-bank-card>strong{font-size:13px}
  .coa-bank-card__action{font-size:12px;margin-top:14px}
}
@media(prefers-reduced-motion:reduce){.coa-bank-card,.faq-chevron{transition:none}}
