@import url('/fonts/pretendardvariable-gov.css');

body {
    font-family: "Pretendard GOV Variable", "Noto Sans KR", sans-serif;
}

/* livedb.kr brand blue (#3586c1), overriding Bootstrap's default primary
   (#0d6efd). bootstrap.css is the stock (non-recompiled) build, so most
   color values are hardcoded per-component rather than driven purely by
   --bs-primary -- these overrides target the components actually used in
   this app rather than a full Sass rebuild. */
:root,
[data-bs-theme="light"] {
    --bs-primary: #3586c1;
    --bs-primary-rgb: 53, 134, 193;
    --bs-link-color: #3586c1;
    --bs-link-color-rgb: 53, 134, 193;
    --bs-link-hover-color: #2d70a3;
    --bs-link-hover-color-rgb: 45, 112, 163;
    --bs-pagination-active-bg: #3586c1;
    --bs-pagination-active-border-color: #3586c1;
}

.btn-primary {
    --bs-btn-bg: #3586c1;
    --bs-btn-border-color: #3586c1;
    --bs-btn-hover-bg: #2d70a3;
    --bs-btn-hover-border-color: #2d70a3;
    --bs-btn-active-bg: #24597f;
    --bs-btn-active-border-color: #24597f;
    --bs-btn-disabled-bg: #3586c1;
    --bs-btn-disabled-border-color: #3586c1;
    --bs-btn-focus-shadow-rgb: 53, 134, 193;
}

.btn-outline-primary {
    --bs-btn-color: #3586c1;
    --bs-btn-border-color: #3586c1;
    --bs-btn-hover-bg: #3586c1;
    --bs-btn-hover-border-color: #3586c1;
    --bs-btn-active-bg: #3586c1;
    --bs-btn-active-border-color: #3586c1;
    --bs-btn-focus-shadow-rgb: 53, 134, 193;
}

.form-control:focus,
.form-select:focus {
    border-color: #3586c1 !important;
    box-shadow: 0 0 0 0.25rem rgba(53, 134, 193, 0.25) !important;
}

/* Top nav: transparent background everywhere, dark/readable text by default.
   Only the home hero header (.header-transparent below) switches this to
   white, since that's the only place with a dark photo behind it. */
header .nav-link {
    color: #212529;
}

header .nav-link:hover {
    background-color: rgba(0, 0, 0, 0.06);
    border-radius: 2px;
}

header .nav-link.active {
    background-color: rgba(0, 0, 0, 0.06);
    border-radius: 2px;
    font-weight: 600;
}

/* Login/register password-visibility toggle (hyperscript adds/removes this
   class on the eye-slash icon; Bootstrap doesn't ship a .hidden utility) */
.hidden {
    display: none !important;
}

/* Transparent header overlaying the home page hero (livedb.kr-style):
   the header is taken out of flow so the hero starts at the very top of the
   page, with the nav floating on top of it instead of pushing it down. */
.header-transparent {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    transition: background-color 0.2s ease-in-out;
}

.header-transparent .navbar {
    background-color: transparent !important;
    transition: background-color 0.2s ease-in-out;
}

.header-transparent .navbar-brand,
.header-transparent .nav-link,
.header-transparent .navbar-toggler i {
    color: #fff;
    transition: color 0.2s ease-in-out;
}

.header-transparent .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.header-transparent .nav-link.active {
    background-color: rgba(255, 255, 255, 0.15);
}

/* Solid once scrolled past the hero, so nav stays legible over page content
   (livedb.kr's sticky-on-scroll behavior). */
.header-transparent.header-scrolled {
    background-color: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.header-transparent.header-scrolled .navbar {
    background-color: #fff !important;
}

.header-transparent.header-scrolled .navbar-brand,
.header-transparent.header-scrolled .nav-link,
.header-transparent.header-scrolled .navbar-toggler i {
    color: #212529;
}

.header-transparent.header-scrolled .nav-link:hover,
.header-transparent.header-scrolled .nav-link.active {
    background-color: rgba(0, 0, 0, 0.06);
}

/* Home page hero carousel */
.hero-slide {
    position: relative;
    height: 70vh;
    min-height: 420px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

.hero-slide .carousel-caption {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    padding: 0 1rem;
}

.hero-photo-credit {
    position: absolute;
    right: 1rem;
    bottom: .75rem;
    z-index: 2;
    color: rgba(255, 255, 255, .7);
    font-size: .75rem;
}

/* Home page category grid */
.category-tile {
    width: 6rem;
}

.category-tile:hover {
    transform: scale(1.08);
    transition: transform 0.15s ease-in-out;
}

.category-icon {
    width: 2.5rem;
    height: 2.5rem;
}

/* Home page mid-page CTA band */
.cta-band {
    position: relative;
    background-image: url('/images/hero/middle-1.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.cta-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}

/* Login/register cards */
.auth-card {
    width: 100%;
    max-width: 24rem;
}

/* Signup's terms/privacy agreement text areas need more room than the
   plain login form the .auth-card width was sized for. */
.auth-card-wide {
    max-width: 34rem;
}

/* Flash messages */
.flash-alert {
    width: 100%;
    max-width: 28rem;
}

/* Error pages */
.ribbon-rotate {
    transform: rotate(20deg);
}

/* htmx loading indicators */
.htmx-indicator {
    opacity: 0;
    transition: opacity 200ms ease-in;
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    opacity: 1;
}

.portal-loader {
    display: inline-block;
    width: 0.85rem;
    height: 0.85rem;
    border: 2px solid transparent;
    border-radius: 50%;
    border-top-color:#38bdf8;
    border-right-color:#a855f7;
    animation:spin 1s linear infinite;
}

.portal-loader-center {
    position: fixed;
    top: 50%;
    left: 50%;
    margin: -2.5rem 0 0 -2.5rem;
    width: 4rem;
    height: 4rem;
    border-width: 4px;
    border-color: rgba(56, 189, 248, 0.2);
    border-top-color: #38bdf8;
    border-right-color: #a855f7;
    z-index: 1050;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}