
.keyolhu-footer { position: relative; background: #17283d; color: #bdcadb; padding: 48px 24px 24px; }
.keyolhu-footer::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, #2c98d4, #863b96); }
.footer-inner { max-width: 1280px; margin: 0 auto; }
.footer-grid { display: grid; grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr)); gap: 32px; padding-bottom: 36px; }
.footer-brand { display: inline-flex; align-items: center; gap: 12px; color: white; font-size: 24px; font-weight: 700; letter-spacing: -.035em; }
.footer-logo { display: flex; align-items: center; justify-content: center; width: 42px; height: 48px; border-radius: 11px; background: #fff; }
.footer-logo img { width: 24px; height: 36px; object-fit: contain; }
.footer-brand-column p { margin: 18px 0 10px; font-size: 13px; line-height: 1.8; }
.footer-brand-caption { display: block; max-width: 220px; color: #91a6bf; font-size: 12px; line-height: 1.8; }
.footer-coming { color: #bdcadb; font-size: 13px; line-height: 1.6; }
.footer-coming span { display: block; color: #91a6bf; font-size: 10px; }
.footer-grid h2 { margin: 6px 0 17px; color: #f0f4fb; font-size: 13px; font-weight: 600; }
.footer-grid ul { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; }
.footer-grid li a { color: #bdcadb; font-size: 13px; line-height: 1.6; }
.keyolhu-footer a:hover { color: white; text-decoration: underline; text-underline-offset: 4px; }
.keyolhu-footer a:focus-visible { outline: 2px solid #88c9ed; outline-offset: 5px; border-radius: 2px; }
.footer-contact { display: inline-flex; align-items: center; gap: 20px; padding: 9px 14px; border: 1px solid #40506c; border-radius: 8px; font-size: 12px; color: #dfe8f7; margin-top: 22px; }
.footer-contact span { color: #8dcbea; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid #ffffff15; padding-top: 22px; font-size: 11px; line-height: 1.8; color: #9badc3; }
.footer-bottom a { color: #c3d4ec; white-space: nowrap; }
.footer-bottom a span { margin-left: 8px; }
@media (max-width: 1000px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } .footer-brand-column { grid-column: 1 / -1; } .footer-bottom { align-items: flex-start; flex-direction: column; gap: 12px; } }
@media (max-width: 479px) { .keyolhu-footer { padding-top: 32px; } .footer-grid { gap: 28px 18px; } .footer-brand-column { grid-column: 1 / -1; } }
@media (max-width: 767px) {
  .footer-grid > nav, .footer-bottom > a { display: none; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 0; padding-bottom: 24px; }
  .footer-grid > .footer-information { display: block; margin-top: 24px; }
  .footer-information h2 { margin: 0 0 8px; }
  .footer-information ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
  .footer-information li a { display: flex; align-items: center; min-height: 44px; }
  .footer-information .footer-contact { display: none; }
}

.keyolhu-footer { box-sizing:border-box; }
.keyolhu-footer a { text-decoration:none; }
.keyolhu-footer .footer-bottom p { margin:0;font-size:inherit;line-height:inherit; }
.fis-app .keyolhu-footer { margin-top:40px; }

.footer-signed-in { background:linear-gradient(110deg,#f8fbfe,#f7f5fb); color:#52677e; border-top:1px solid #e1e8f1; }
.footer-signed-in::before { height:2px; background:linear-gradient(90deg,#c5e2f3,#ddd1eb); }
.footer-signed-in .footer-brand { color:#62518f; }
.footer-signed-in .footer-grid h2 { color:#33465d; }
.footer-signed-in .footer-grid li a,
.footer-signed-in .footer-coming,
.footer-signed-in .footer-bottom a { color:#52677e; }
.footer-signed-in .footer-brand-caption,
.footer-signed-in .footer-coming span,
.footer-signed-in .footer-bottom { color:#5e6e83; }
.footer-signed-in .footer-bottom { border-top-color:#e1e8f1; }
.footer-signed-in .footer-contact { color:#62518f; background:#f2edf8; border-color:#ded5e9; }
.footer-signed-in .footer-contact span { color:#62518f; }
.footer-signed-in a:hover { color:#78418b; text-decoration:underline; }
.footer-signed-in a:focus-visible { outline-color:#78629f; }

@media (min-width:1001px) { .footer-signed-in .footer-grid { grid-template-columns:1.3fr repeat(3,minmax(0,1fr)); } }
