/* ── Footer — StaySeoul ───────────────────────────────────────────────────────
   Footer tag background (main.css): #60c9eb  (cyan)
   Sitemap has no background — inherits cyan from footer tag.
   ┌─────────────┬───────────┬─────────────────────────────────────────────────┐
   │ #7579E7     │ purple    │ section headings · brand "seoul" accent · hover  │
   │ #9AB3F5     │ lavender  │ palette reference (too light for cyan bg text)   │
   │ #A3D8F4     │ sky       │ palette reference (too light for cyan bg text)   │
   │ #B9FFFC     │ mint      │ palette reference (too light for cyan bg text)   │
   │ #1a1a2e     │ navy      │ primary body text — high contrast on #60c9eb    │
   └─────────────┴───────────┴─────────────────────────────────────────────────┘
──────────────────────────────────────────────────────────────────────────────── */

:root {
    --ft-purple:        #7579E7;
    --ft-lavender:      #9AB3F5;
    --ft-sky:           #A3D8F4;
    --ft-mint:          #B9FFFC;
    --ft-text:          #1a1a2e;                   /* body text on #60c9eb      */
    --ft-heading-rule:  rgba(117, 121, 231, 0.35); /* --ft-purple at 35%        */
    --ft-divider:       rgba(26, 26, 46, 0.18);    /* dark separator on cyan    */
    --ft-copyright:     rgba(26, 26, 46, 0.55);    /* muted dark text on cyan   */
}


/* ═══════════════════════════════════════════════════════════════════════════
   WRAPPER & BAND
══════════════════════════════════════════════════════════════════════════════ */

.site-footer {
    margin-top: 150px;
}

.footer-sitemap {
    background: transparent;
    padding: 60px 0 40px;
}

.footer-col {
    margin-bottom: 36px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   BRAND BLOCK — full-width centered anchor (bottom of sitemap)
══════════════════════════════════════════════════════════════════════════════ */

.footer-brand-row {
    margin-top: 20px;
    padding-top: 36px;
    padding-bottom: 28px;
    text-align: center;
}

.footer-brand-name {
    color: var(--ft-text);
    font-size: 2em;
    font-weight: 900;
    letter-spacing: 3px;
    margin: 0 0 12px;
}

.footer-brand-accent {
    color: var(--ft-purple);
}

.footer-brand-desc {
    color: var(--ft-text);
    font-size: 0.9em;
    line-height: 1.9;
    margin: 0 auto;
    width: 100%;
    text-align: center;
    opacity: 0.70;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION HEADINGS
══════════════════════════════════════════════════════════════════════════════ */

.footer-heading {
    color: var(--ft-purple);
    font-size: 0.78em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0 0 8px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   LINK LISTS — shared base
   Covers all 4 sitemap columns: Services · Hotplace · Info · Theme Guide
══════════════════════════════════════════════════════════════════════════════ */

.footer-links,
.footer-themeplace-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links a,
.footer-themeplace-list a {
    color: var(--ft-text);
    text-decoration: none;
    font-size: 0.9em;
    transition: color 0.2s ease;
}

.footer-links a:hover,
.footer-themeplace-list a:hover {
    color: var(--ft-purple);
}

/* ── Column link lists (Services / Hotplace / Info / Theme Guide) ───────── */

.footer-links li {
    margin-bottom: 4px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   BOTTOM BAR (copyright)
   Uses rgba color instead of opacity so hover states on child links
   are not affected by the parent's transparency.
══════════════════════════════════════════════════════════════════════════════ */

.footer-bottom-wrap {
    margin-top: 10px;
    padding-top: 24px;
}

.footer-bottom {
    color: var(--ft-copyright);
    font-size: 0.82em;
}

.footer-bottom .col-xs-12 {
    margin-bottom: 8px;
}

.footer-bottom .col-xs-12:last-child {
    margin-bottom: 0;
}

.footer-credit-link {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-credit-link:hover {
    color: var(--ft-purple);
}

.footer-top-link {
    color: var(--ft-purple);
    text-decoration: none;
    font-size: 0.95em;
    transition: color 0.2s ease;
}

.footer-top-link:hover {
    color: var(--ft-text);
}