/* ===========================
   EXTENDED STYLING FOR PJLAW (MATCHING FIGMA)
   =========================== */

/* Global Container */
.container {
    width: 90%;
    max-width: var(--container-width);
    margin: 0 auto;
}

.container-full {
    width: 100%;
    padding: 0 60px;
}

/* Hero Section */
.hero {
    position: relative;
    height: 100vh;
    min-height: 800px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.6) 100%);
    display: flex;
    align-items: center;
    width: 100%;
}

.hero-content {
    color: #fff;
    z-index: 10;
    max-width: 800px;
}

.hero-title {
    font-family: var(--font-heading);
    font-size: 5.5rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 30px;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.hero-subtitle {
    font-size: 1.5rem;
    line-height: 1.6;
    font-weight: 500;
    opacity: 0.9;
    letter-spacing: -0.02em;
}

/* Logo Section */
.logo-section {
    background-color: var(--primary-dark);
    padding: 200px 0;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo-bg-text {
    position: absolute;
    font-family: var(--font-heading);
    font-size: 16rem;
    font-weight: 700;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.08);
    white-space: nowrap;
    pointer-events: none;
    z-index: 1;
    letter-spacing: 0.1em;
}

.pj-logo-large {
    width: 320px;
    height: auto;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.3));
}

/* Overview Section */
.overview {
    padding: 160px 0;
    text-align: center;
}

.overview .section-title {
    font-size: 3rem;
    line-height: 1.3;
    margin-bottom: 50px;
    color: var(--text-dark);
    font-weight: 700;
    letter-spacing: -0.03em;
}

.btn-text {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--text-dark);
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-text:hover {
    transform: translateX(10px);
    color: var(--primary-color);
}

.arrow-icon {
    width: 30px;
    height: auto;
    filter: invert(1);
    /* Make the white SVG black */
}

.btn-action .arrow-icon {
    filter: none;
    /* Keep it white for dark buttons */
    width: 24px;
}

/* Modern Services Scroller */
.services-modern {
    padding-bottom: 120px;
}

.services-scroller {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    padding: 20px 60px 40px;
    scrollbar-width: none;
}

.services-scroller::-webkit-scrollbar {
    display: none;
}

.service-box {
    flex: 0 0 460px;
    height: 600px;
    background-size: cover;
    background-position: center;
    border-radius: 30px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 50px;
    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.service-box::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.2) 60%, transparent 100%);
    z-index: 1;
}

.service-box:hover {
    transform: translateY(-15px) scale(1.02);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
}

.service-box-content {
    position: relative;
    z-index: 2;
    color: #fff;
    text-align: center;
}

.service-box h3 {
    font-size: 2.25rem;
    margin-bottom: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.service-box p {
    font-size: 1.1rem;
    line-height: 1.6;
    opacity: 0.8;
}

/* Stats Section Premium */
.stats-premium {
    background-color: var(--bg-dark);
    padding: 180px 0;
    border-radius: 100px 100px 0 0;
    margin-top: -50px;
}

.stats-header {
    text-align: center;
    margin-bottom: 100px;
}

.stats-tag {
    color: var(--primary-color);
    font-weight: 800;
    font-size: 1.1rem;
    display: block;
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.stats-title {
    color: #fff;
    font-size: 3rem;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.stats-grid-premium {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.stat-item {
    background-color: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 80px 40px;
    border-radius: 40px;
    text-align: center;
    transition: all 0.4s ease;
}

.stat-item:hover {
    border-color: var(--primary-color);
    background-color: rgba(255, 255, 255, 0.03);
    transform: translateY(-5px);
}

.stat-icon-wrapper {
    width: 120px;
    height: 120px;
    background-color: rgba(255, 255, 255, 0.04);
    border-radius: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 50px;
}

.stat-icon-wrapper img {
    width: 70px;
    height: auto;
    object-fit: contain;
}

.stat-item:nth-child(3) .stat-icon-wrapper img {
    width: 82px;
}

.stat-value {
    color: #fff;
    font-family: var(--font-heading);
    font-size: 4.5rem;
    font-weight: 700;
    margin-bottom: 25px;
    letter-spacing: -0.02em;
}

.stat-main-label {
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 12px;
}

.stat-sub-label {
    color: var(--text-muted);
    font-size: 1.1rem;
}

/* Cases Premium */
.cases-premium {
    background-color: var(--bg-dark);
    padding: 0 0 180px;
}

.cases-premium .container {
    max-width: 1720px;
}

.cases-header {
    text-align: center;
    margin-bottom: 80px;
}

.cases-title {
    font-family: var(--font-heading);
    font-size: 3rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 25px;
    letter-spacing: -0.02em;
}

.cases-subtitle {
    color: var(--text-muted);
    font-size: 1.4rem;
}

.cases-slider {
    display: flex;
    gap: 30px;
    overflow-x: auto;
    padding: 20px 60px 40px;
    scrollbar-width: none;
}

.cases-slider::-webkit-scrollbar {
    display: none;
}

.case-item {
    flex: 0 0 400px;
    background-color: var(--bg-card);
    border-radius: 30px;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.case-item:hover {
    transform: translateY(-10px);
}

.case-img-box {
    height: 250px;
    overflow: hidden;
}

.case-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.case-item:hover .case-img-box img {
    transform: scale(1.05);
}

.case-info {
    padding: 40px;
}

.case-tag {
    color: var(--primary-color);
    font-weight: 700;
    font-size: 1rem;
    display: block;
    margin-bottom: 20px;
}

.case-item-title {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.case-excerpt {
    color: var(--text-muted);
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 40px;
}

.case-author {
    display: flex;
    align-items: center;
    gap: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 30px;
}

.case-author img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid var(--primary-color);
}

.case-author span {
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
}

/* Bottom CTA Section */
.bottom-cta {
    padding: 120px 0 180px;
    background-color: #fff;
}

.cta-main-title {
    text-align: center;
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 90px;
    letter-spacing: -0.04em;
    color: #181a1e;
}

.cta-banner {
    position: relative;
    height: 482px;
    border-radius: 60px;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cta-overlay {
    position: absolute;
    inset: 0;
    background: rgba(8, 8, 9, 0.35);
    z-index: 1;
}

.cta-banner-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    padding: 0 100px;
    color: #fff;
}

.cta-banner-box {
    text-align: center;
    max-width: 400px;
}

.cta-banner-box h3 {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 25px;
    letter-spacing: -0.02em;
}

.cta-banner-box p {
    font-size: 1.1rem;
    opacity: 0.9;
    margin-bottom: 40px;
}

.cta-banner-separator {
    width: 1px;
    height: 220px;
    background-color: rgba(255, 255, 255, 0.3);
}

.btn-banner {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border: 1px solid #fff;
    border-radius: 100px;
    padding: 12px 10px 12px 30px;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    min-width: 180px;
    transition: all 0.3s ease;
}

.btn-banner:hover {
    background-color: #fff;
    color: var(--primary-dark);
}

.btn-banner img {
    width: 34px;
    height: 34px;
    transition: transform 0.3s ease;
}

.btn-banner:hover img {
    transform: rotate(-45deg);
}


/* ===========================
   HEADER & NAVBAR
   =========================== */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: transparent;
    transition: all 0.4s ease;
    padding: 20px 0;
}

.header.scrolled {
    background-color: rgba(5, 5, 5, 0.95);
    backdrop-filter: blur(10px);
    padding: 15px 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo-white {
    height: 40px;
    width: auto;
}

.navbar-nav {
    display: flex;
    gap: 60px;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
}

.navbar-nav > li {
    position: relative;
}

.navbar-nav .menu-item-has-children::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 18px;
}

.navbar-nav a {
    color: #fff;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    transition: color 0.3s ease;
}

.navbar-nav a:hover {
    color: var(--primary-color);
}

.navbar-nav .sub-menu {
    position: absolute;
    top: calc(100% - 2px);
    left: 50%;
    min-width: 220px;
    transform: translateX(-50%) translateY(8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    list-style: none;
    margin: 0;
    padding: 14px 0;
    background: rgba(7, 14, 24, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28);
    transition: all 0.25s ease;
    z-index: 1001;
}

.navbar-nav .menu-item-has-children > a::after {
    content: '▾';
    display: inline-block;
    margin-left: 10px;
    font-size: 0.75em;
    transform: translateY(-1px);
}

.navbar-nav .sub-menu li {
    margin: 0;
}

.navbar-nav .sub-menu a {
    display: block;
    padding: 12px 22px;
    font-size: 0.98rem;
    white-space: nowrap;
}

.navbar-nav .menu-item-has-children:hover > .sub-menu,
.navbar-nav .menu-item-has-children:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.navbar-actions {
    display: flex;
    align-items: center;
    gap: 30px;
}

.btn-reserve {
    border: 2px solid #fff;
    border-radius: 100px;
    padding: 8px 24px;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.btn-reserve:hover {
    background-color: #fff;
    color: var(--primary-dark);
}

/* ===========================
   FOOTER
   =========================== */
.footer {
    background-color: #fff;
    color: var(--text-dark);
}

.footer-main {
    padding: 100px 0;
    border-bottom: 1px solid #eee;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 40px;
}

.footer-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 25px;
    color: #000;
}

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

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

.footer-links-list a {
    color: #555;
    text-decoration: none;
    font-size: 1rem;
    transition: color 0.3s ease;
}

.footer-links-list a:hover {
    color: var(--primary-color);
}

.footer-bottom {
    background-color: #050505;
    padding: 60px 0 80px;
    position: relative;
}

.footer-legal {
    max-width: 1300px;
    margin: 0 auto;
}

.legal-top {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
}

.legal-top a {
    color: #a6a6ae;
    text-decoration: none;
    font-size: 1rem;
}

.legal-top a.bold {
    color: #fff;
    font-weight: 700;
}

.legal-top .divider {
    width: 1px;
    height: 12px;
    background-color: #444349;
}

.legal-separator {
    height: 1px;
    background-color: #29292a;
    margin-bottom: 30px;
}

.legal-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.legal-info p {
    color: #fff;
    font-size: 1rem;
    margin-bottom: 10px;
    opacity: 0.8;
}

.legal-info .copyright {
    color: #a6a6ae;
    font-size: 0.9rem;
    margin: 0;
}

.footer-logo {
    height: 60px;
    width: auto;
}

.scroll-top {
    position: absolute;
    right: 60px;
    top: -60px;
    width: 60px;
    height: 60px;
    background-color: transparent;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.scroll-top:hover {
    transform: translateY(-5px);
}

.scroll-top img {
    width: 60px;
    height: 60px;
}

/* ===========================
   HAMBURGER BUTTON (hidden on desktop)
   =========================== */
.navbar-toggler {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    z-index: 1100;
    order: 3;
}

.toggler-bar {
    display: block;
    width: 24px;
    height: 2px;
    background-color: #fff;
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Animate hamburger → X when active */
.navbar-toggler.active .toggler-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.navbar-toggler.active .toggler-bar:nth-child(2) {
    opacity: 0;
}
.navbar-toggler.active .toggler-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Header Responsive — show hamburger, hide desktop nav */
@media (max-width: 1024px) {
    .navbar-toggler {
        display: flex;
    }

    .navbar-actions {
        display: none;
    }

    .navbar-nav {
        display: none;
    }

    .navbar-menu.active .navbar-nav {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        padding: 24px 30px 30px;
        background: rgba(5, 5, 5, 0.98);
        backdrop-filter: blur(10px);
    }

    .navbar-menu.active .navbar-nav .sub-menu {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        min-width: 0;
        margin-top: 8px;
        padding: 10px 0 0 14px;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .navbar-menu.active .navbar-nav .menu-item-has-children > a::after {
        content: '▸';
    }

    .footer-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ===========================
   HOMEPAGE — TABLET & MOBILE
   =========================== */
@media (max-width: 768px) {

    /* Global */
    .container-full {
        padding: 0 20px;
    }

    /* Header */
    .header {
        padding: 16px 0;
    }

    /* Hero */
    .hero {
        min-height: 560px;
    }

    .hero-title {
        font-size: 2.8rem;
        margin-bottom: 20px;
    }

    .hero-subtitle {
        font-size: 1.1rem;
    }

    /* Logo section */
    .logo-section {
        padding: 80px 0;
    }

    .logo-bg-text {
        display: none;
    }

    .pj-logo-large {
        width: 200px;
    }

    /* Overview */
    .overview {
        padding: 80px 0;
    }

    .overview .section-title {
        font-size: 1.8rem;
        margin-bottom: 35px;
    }

    /* Services scroller */
    .services-modern {
        padding-bottom: 60px;
    }

    .services-scroller {
        padding: 10px 20px 30px;
        gap: 16px;
    }

    .service-box {
        flex: 0 0 300px;
        height: 420px;
        padding: 30px;
        border-radius: 20px;
    }

    .service-box h3 {
        font-size: 1.6rem;
    }

    .service-box p {
        font-size: 0.95rem;
    }

    /* Stats section */
    .stats-premium {
        padding: 80px 0;
        border-radius: 40px 40px 0 0;
        margin-top: -20px;
    }

    .stats-header {
        margin-bottom: 50px;
    }

    .stats-title {
        font-size: 1.8rem;
    }

    .stats-grid-premium {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .stat-item {
        padding: 50px 30px;
    }

    .stat-value {
        font-size: 3rem;
    }

    .stat-icon-wrapper {
        width: 90px;
        height: 90px;
        margin-bottom: 30px;
    }

    /* Cases slider */
    .cases-premium {
        padding: 0 0 80px;
    }

    .cases-slider {
        padding: 10px 20px 30px;
        gap: 16px;
    }

    .case-item {
        flex: 0 0 310px;
    }

    .cases-title {
        font-size: 2rem;
    }

    .cases-subtitle {
        font-size: 1.1rem;
    }

    /* Bottom CTA */
    .bottom-cta {
        padding: 70px 0 100px;
    }

    .cta-main-title {
        font-size: 2rem;
        margin-bottom: 50px;
    }

    .cta-banner {
        height: auto;
        border-radius: 30px;
    }

    .cta-banner-content {
        flex-direction: column;
        padding: 50px 30px;
        gap: 40px;
        align-items: center;
    }

    .cta-banner-separator {
        display: none;
    }

    .cta-banner-box {
        max-width: 100%;
    }

    /* Footer */
    .footer-main {
        padding: 60px 0;
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    .legal-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
    }

    .footer-logo {
        height: 44px;
    }

    .scroll-top {
        right: 20px;
    }
}

/* ===========================
   HOMEPAGE — PHONE (≤480px)
   =========================== */
@media (max-width: 480px) {

    /* Hero */
    .hero {
        min-height: 500px;
    }

    .hero-title {
        font-size: 2.2rem;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    /* Overview */
    .overview .section-title {
        font-size: 1.5rem;
    }

    /* Services */
    .service-box {
        flex: 0 0 260px;
        height: 380px;
    }

    /* Stats */
    .stats-premium {
        border-radius: 24px 24px 0 0;
    }

    .stat-value {
        font-size: 2.5rem;
    }

    /* Cases */
    .case-item {
        flex: 0 0 280px;
    }

    /* Bottom CTA */
    .cta-main-title {
        font-size: 1.6rem;
    }

    .cta-banner-content {
        padding: 40px 20px;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .legal-info p {
        font-size: 0.85rem;
    }
}

/* ===========================
   ABOUT PAGE
   =========================== */
.page-about .site-main {
    overflow: hidden;
}

.about-hero {
    position: relative;
    min-height: 760px;
    background-color: #0e2238;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    color: #fff;
}

.about-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(6, 18, 37, 0.36) 0%, rgba(6, 18, 37, 0.12) 38%, rgba(6, 18, 37, 0.02) 64%, rgba(6, 18, 37, 0) 100%),
        linear-gradient(180deg, rgba(8, 11, 18, 0.08) 0%, rgba(8, 11, 18, 0.12) 100%);
    pointer-events: none;
}

.about-hero__inner {
    position: relative;
    z-index: 1;
    min-height: 760px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-top: 160px;
    padding-bottom: 80px;
}

.about-hero__header {
    max-width: 760px;
}

.about-hero__eyebrow-wrap {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    margin-bottom: 34px;
}

.about-hero__eyebrow {
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
}

.about-hero__eyebrow-line {
    width: 120px;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.4);
    margin-bottom: 3px;
}

.about-hero__title {
    font-family: var(--font-main);
    font-size: clamp(2.75rem, 3.5vw, 3.75rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.03em;
    text-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}

.about-hero__footer {
    display: flex;
    justify-content: flex-end;
}

.about-hero__pager {
    display: flex;
    align-items: center;
    gap: 26px;
}

.about-hero__pager-item {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.about-hero__pager-arrow {
    width: 12px;
    height: 7px;
    flex: 0 0 auto;
    display: block;
    margin-top: 1px;
}

.about-intro {
    background: #fff;
    padding: 220px 0 260px;
}

.about-intro__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.about-intro__logo {
    width: min(248px, 32vw);
    height: auto;
    margin-bottom: 58px;
    display: block;
}

.about-intro__copy {
    max-width: 1320px;
}

.about-intro__title {
    font-size: clamp(2.4rem, 3.3vw, 3.375rem);
    font-weight: 700;
    line-height: 1.24;
    letter-spacing: -0.03em;
    color: #181a1e;
    margin-bottom: 26px;
}

.about-intro__description {
    max-width: 1180px;
    margin: 0 auto;
    font-size: clamp(1.1rem, 1.7vw, 1.875rem);
    font-weight: 700;
    line-height: 1.46;
    letter-spacing: -0.03em;
    color: #181a1e;
}

.about-value {
    position: relative;
    min-height: 1080px;
    background-color: #0b1322;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    color: #fff;
}

.about-value::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.about-value__inner {
    position: relative;
    z-index: 1;
    min-height: 1080px;
    display: flex;
    align-items: flex-start;
    padding-top: clamp(290px, 22vw, 440px);
    padding-bottom: 120px;
}

.about-value__copy {
    max-width: 560px;
}

.about-value__title {
    margin-bottom: 18px;
    font-size: clamp(2.25rem, 2.9vw, 3rem);
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: -0.03em;
    text-shadow: 0 6px 24px rgba(0, 0, 0, 0.16);
}

.about-value__description {
    max-width: 540px;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -0.03em;
    opacity: 0.96;
    text-shadow: 0 6px 16px rgba(0, 0, 0, 0.14);
}

.about-value--justice {
    background-position: center center;
}

.about-value--justice::before {
    background:
        linear-gradient(90deg, rgba(7, 10, 14, 0.64) 0%, rgba(7, 10, 14, 0.42) 38%, rgba(7, 10, 14, 0.1) 68%, rgba(7, 10, 14, 0) 100%),
        linear-gradient(180deg, rgba(7, 10, 14, 0.08) 0%, rgba(7, 10, 14, 0.22) 100%);
}

.about-value--dispute {
    background-position: center center;
}

.about-value--dispute::before {
    background:
        linear-gradient(90deg, rgba(16, 9, 5, 0.68) 0%, rgba(16, 9, 5, 0.44) 36%, rgba(16, 9, 5, 0.12) 68%, rgba(16, 9, 5, 0) 100%),
        linear-gradient(180deg, rgba(16, 9, 5, 0.08) 0%, rgba(16, 9, 5, 0.18) 100%);
}

.about-value--peace {
    background-position: center bottom;
}

.about-value--peace::before {
    background:
        linear-gradient(90deg, rgba(13, 27, 56, 0.34) 0%, rgba(13, 27, 56, 0.2) 36%, rgba(13, 27, 56, 0.04) 68%, rgba(13, 27, 56, 0) 100%),
        linear-gradient(180deg, rgba(13, 27, 56, 0.04) 0%, rgba(13, 27, 56, 0.1) 100%);
}

.about-quick-menu {
    position: fixed;
    right: 0;
    top: 50%;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transform: translateY(-50%);
    padding-right: 18px;
}

.about-quick-menu__item {
    width: 76px;
    border-radius: 14px;
    text-decoration: none;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.about-quick-menu__item--call {
    min-height: 130px;
    background: #3668fa;
    padding: 17px 12px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.about-quick-menu__item--online,
.about-quick-menu__item--kakao {
    min-height: 86px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px 0;
}

.about-quick-menu__item--online {
    background: #fff;
}

.about-quick-menu__item--kakao {
    background: #fae11f;
}

.about-quick-menu__item--directions {
    min-height: 106px;
    background: #3cb111;
    padding: 16px 11px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.about-quick-menu__item--directions .about-quick-menu__label {
    white-space: nowrap;
    font-size: 12px;
}

.about-quick-menu__icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
}

.about-quick-menu__item--call .about-quick-menu__icon-wrap {
    width: 28px;
    height: 22px;
}

.about-quick-menu__item--directions .about-quick-menu__icon-wrap {
    width: 24px;
    height: 24px;
}

.about-quick-menu__icon-wrap img {
    display: block;
    width: 100%;
    height: 100%;
}

.about-quick-menu__label {
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1;
    text-align: center;
}

.about-quick-menu__label--dark {
    color: #2d2e32;
}

.about-quick-menu__phone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
    white-space: nowrap;
}

.about-quick-menu__phone span {
    display: block;
    text-align: center;
    white-space: nowrap;
}

.about-quick-menu__dot {
    width: 3px;
    height: 3px;
    border-radius: 999px;
    background: #fff;
    margin: 0;
}

@media (max-width: 1280px) {
    .about-quick-menu {
        display: none;
    }

    .about-intro {
        padding: 160px 0 180px;
    }

    .about-value,
    .about-value__inner {
        min-height: 920px;
    }

    .about-value__inner {
        padding-top: 240px;
    }
}

@media (max-width: 768px) {
    .about-hero {
        min-height: 640px;
    }

    .about-hero__inner {
        min-height: 640px;
        padding-top: 132px;
        padding-bottom: 56px;
    }

    .about-hero__eyebrow {
        margin-bottom: 20px;
        font-size: 18px;
    }

    .about-hero__footer {
        justify-content: flex-start;
    }

    .about-hero__pager {
        gap: 18px;
        flex-wrap: wrap;
    }

    .about-hero__pager-item {
        font-size: 14px;
    }

    .about-hero__pager-arrow {
        width: 11px;
        height: 6px;
    }

    .about-intro {
        padding: 120px 0 140px;
    }

    .about-intro__logo {
        width: 180px;
        margin-bottom: 36px;
    }

    .about-intro__title {
        margin-bottom: 18px;
    }

    .about-intro__description {
        font-size: 1.05rem;
        line-height: 1.6;
    }

    .about-value,
    .about-value__inner {
        min-height: 760px;
    }

    .about-value__inner {
        padding-top: 180px;
        padding-bottom: 90px;
    }

    .about-value__copy {
        max-width: 100%;
    }

    .about-value__title {
        font-size: 2rem;
    }

    .about-value__description {
        font-size: 1rem;
    }
}

/* ==========================================================================
   Team Page
   ========================================================================== */

.team-page {
    background-color: #fff;
}

.team-hero {
    position: relative;
    width: 100%;
    min-height: 760px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 0;
    -webkit-mask-size: 1920px 760px;
    mask-size: 1920px 760px;
    -webkit-mask-position: center top;
    mask-position: center top;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    overflow: hidden;
}

.team-hero__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 1;
}

.team-hero__shade {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(217,217,217,0) 0%, rgba(0,0,0,0.15) 100%);
    z-index: 2;
}

.team-hero__inner {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 760px;
    padding-top: 160px;
    padding-bottom: 80px;
}

.team-hero__header {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.team-hero__breadcrumb {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.team-hero__eyebrow {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 18px;
    color: #fff;
    letter-spacing: -0.66px;
}

.team-hero__line {
    width: 120px;
    height: 1px;
    background-color: #fff;
    opacity: 0.4;
}

.team-hero__title {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 60px;
    line-height: 70px;
    color: #fff;
    letter-spacing: -1.8px;
    margin: 0;
}

.team-hero__footer {
    display: flex;
    justify-content: flex-end;
    margin-top: auto;
}

@media (max-width: 768px) {
    .team-hero__inner {
        min-height: 640px;
        padding-top: 132px;
        padding-bottom: 56px;
    }
}

.team-members {
    position: relative;
    background-color: #fff;
    padding-top: 57px; /* 817 - 760 */
    padding-bottom: 260px;
}

.team-members__bg-text {
    font-family: 'Fellix', sans-serif;
    font-weight: 700;
    font-size: 164px;
    line-height: 166px;
    letter-spacing: -4.92px;
    color: #f7f7f7; /* Very light color for background text, the design had it white on white? Wait, the design has it white text on a black background? No, the background is white starting from top 760. Ah, the design context: text-white, but where is it? Ah, it's inside the dark area? Let's check design: left 0 top 817, gap 260px, items center. text-[164px] text-right text-white. Wait, if it's text-white and background is white, it's invisible? No, the text is probably light grey or has opacity or it's placed over a dark background. Let's make it color #f5f5f5 so it's a watermark. */
    color: #f5f5f5;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    margin-bottom: 104px;
}

.team-members__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 26px;
    margin-bottom: 50px;
}

.team-member {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.team-member__image-wrap {
    position: relative;
    width: 100%;
    padding-bottom: 125%; /* Aspect ratio for 416x520 */
}

.team-member__mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-position: center;
    mask-position: center;
    background-color: rgba(0,0,0,0.04);
}

.team-member__shape {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 100%;
    height: auto;
    z-index: 1;
}

.team-member__photo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
}

.team-member__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 212px;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 48.08%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 30px 26px;
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
}

.team-member__name {
    margin: 0 0 14px 0;
    color: #fff;
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    letter-spacing: -0.9px;
}

.team-member__name .name {
    font-size: 30px;
    line-height: 34px;
}

.team-member__name .role {
    font-size: 26px;
    line-height: 34px;
}

.team-member__specialties {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-family: 'Pretendard', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
}

.team-member__specialties .dot {
    width: 4px;
    height: 4px;
    background-color: #fff;
    border-radius: 50%;
}

.team-member__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.team-member__tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    padding: 0 14px;
    background-color: #fff;
    border: 1px solid #dcdddf;
    border-radius: 100px;
    color: #595b5f;
    font-family: 'Pretendard', sans-serif;
    font-weight: 600;
    font-size: 13px;
    line-height: 22px;
    letter-spacing: -0.39px;
}

.team-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.team-pagination__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Assuming subtle shadow */
    color: #3d3d3d;
}

.team-pagination__pages {
    display: flex;
    align-items: center;
    gap: 18px;
}

.team-pagination__page {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background-color: #fff;
    color: #3d3d3d;
    font-family: 'Pretendard', sans-serif;
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
}

.team-pagination__page.active {
    background-color: #1e1e1e;
    color: #fff;
}

.team-member__link {
    display: block;
    text-decoration: none;
    color: inherit;
}
.team-member__link:hover .team-member__photo {
    transform: scale(1.05);
    transition: transform 0.4s ease;
}
.team-member__photo {
    transition: transform 0.4s ease;
}

/* ===========================
   TEAM PAGE — MOBILE
   =========================== */
@media (max-width: 768px) {
    /* Hero title */
    .team-hero__title {
        font-size: 36px;
        line-height: 44px;
        letter-spacing: -1px;
    }

    /* Members section */
    .team-members {
        padding-top: 40px;
        padding-bottom: 100px;
    }

    /* Hide the huge watermark text that causes overflow */
    .team-members__bg-text {
        display: none;
    }

    /* 2-column grid on tablet */
    .team-members__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px 16px;
    }
}

@media (max-width: 480px) {
    /* Hero title */
    .team-hero__title {
        font-size: 28px;
        line-height: 36px;
    }

    /* Single-column list view on phones */
    .team-members__grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    /* Make the member card less tall so it fits without scrolling */
    .team-member__image-wrap {
        padding-bottom: 110%;
    }

    /* Slightly smaller name/role text in overlay */
    .team-member__name .name {
        font-size: 24px;
        line-height: 28px;
    }

    .team-member__name .role {
        font-size: 20px;
        line-height: 28px;
    }
}

/* ==========================================================================
   Team Member Single Page
   ========================================================================== */

.team-member-page {
    background-color: #fff;
    padding-top: 148px;
    padding-bottom: 260px;
}

.member-detail-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 15px;
}

.member-detail-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 101px;
}

.member-detail-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 30px;
}

.member-detail-nav__links {
    display: flex;
    align-items: center;
    gap: 30px;
}

.member-detail-nav__home-link,
.member-detail-nav__close-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.member-detail-nav__separator {
    width: 1px;
    height: 80px;
    background-color: #e3e5e9;
}

.member-detail-nav__current {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 240px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 30px;
    color: #181a1e;
    letter-spacing: -0.54px;
}

.member-detail-nav__icon, .member-detail-nav__icon-close {
    width: 19.527px;
    height: 17.851px;
    display: block;
}

.member-detail-nav__line-wrap {
    width: 100%;
    position: relative;
    height: 2px;
}

.member-detail-nav__line-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #e3e5e9;
}

.member-detail-nav__line-active {
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 2px;
    background-color: #1a2e69;
}

.member-detail-content {
    display: flex;
    gap: 70px;
    align-items: flex-start;
}

.member-detail-hero {
    width: 600px;
    height: 750px;
    position: relative;
}

.member-detail-hero__mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-position: center;
    mask-position: center;
}

.member-detail-hero__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.member-detail-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding-top: 20px;
}

.member-detail-info__title {
    font-family: 'Pretendard', sans-serif;
    font-weight: 800;
    font-size: 50px;
    line-height: 62px;
    color: #181a1e;
    letter-spacing: -1.5px;
    margin: 0;
}

.member-detail-info__name-wrap {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.member-detail-info__name {
    font-family: 'Pretendard', sans-serif;
    font-weight: 800;
    font-size: 34px;
    line-height: 44px;
    color: #181a1e;
    letter-spacing: -1.02px;
    margin: 0;
}

.member-detail-info__divider {
    width: 630px;
    height: 1px;
    background-color: #e3e6ed;
}

.member-detail-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 630px;
}

.member-detail-section__header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.member-detail-section__icon {
    width: 26px;
    height: 26px;
}

.member-detail-section__title {
    font-family: 'Pretendard', sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 28px;
    color: #181a1e;
    letter-spacing: -0.66px;
    margin: 0;
}

.member-detail-section__content {
    padding-left: 20px;
}

.member-experience-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 18px;
}

.member-experience-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.member-experience-icon {
    width: 38px;
    height: 29px;
    flex: 0 0 auto;
}

.member-experience-text {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 28px;
    color: #181a1e;
    letter-spacing: -0.6px;
    margin: 0;
    min-width: 0;
}

.member-fields-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.member-field-row {
    display: flex;
    align-items: center;
    gap: 20px;
}

.member-field-name {
    width: 100px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 28px;
    color: #181a1e;
    letter-spacing: -0.54px;
    margin: 0;
}

.member-field-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.member-field-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 14px;
    background-color: #fff;
    border: 1px solid #d9dbdd;
    border-radius: 12px;
    color: #545558;
    font-family: 'Pretendard', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: -0.48px;
}

.member-field-tag--small {
    height: 36px;
    padding: 0 10px;
    border-radius: 10px;
    font-size: 15px;
    line-height: 20px;
    letter-spacing: -0.45px;
}

.member-tabs {
    margin-top: 60px;
    width: 100%;
}

.member-tabs__nav {
    display: flex;
    border-bottom: 1px solid #1a2e69;
    padding-left: 310px;
}

.member-tabs__item {
    width: 325px;
    height: 61px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 30px;
    color: #97999d;
    letter-spacing: -0.6px;
    text-decoration: none;
}

.member-tabs__item.active {
    color: #181a1e;
    border: 1px solid #1a2e69;
    border-bottom: 1px solid #fff;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    margin-bottom: -1px;
    background-color: #fff;
}

.member-tabs__content {
    padding-top: 50px;
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.member-tab-section {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.member-tab-section__header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.member-tab-section__icon {
    width: 40px;
    height: 40px;
}

.member-tab-section__title {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 30px;
    line-height: 38px;
    color: #181a1e;
    letter-spacing: -0.9px;
    margin: 0;
}

.member-tab-section__list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-left: 16px;
}

.member-tab-section__item {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.member-tab-section__bullet {
    display: flex;
    align-items: center;
    height: 26px;
    gap: 10px;
    width: 8px;
}

.member-tab-section__bullet-inner {
    width: 6px;
    height: 6px;
    background-color: #595c60;
    border-radius: 10px;
}

.member-tab-section__text {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    color: #181a1e;
    letter-spacing: -0.54px;
    margin: 0;
}

.member-tab-section__divider {
    width: 100%;
    height: 1px;
    background-color: #dcdfe4;
    margin-top: 20px;
}

.member-cases-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}

.member-case-card {
    display: flex;
    flex-direction: column;
    position: relative;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    overflow: hidden;
    background-color: #f8f8f8;
}

.member-case-card__content {
    padding: 26px 26px 34px 26px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    z-index: 2;
    position: relative;
}

.member-case-card__header {
    display: flex;
    align-items: center;
    gap: 14px;
}

.member-case-card__badge {
    height: 30px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border: 1px solid #3668fa;
    border-radius: 100px;
    color: #3668fa;
    font-family: 'Pretendard', sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: -0.39px;
}

.member-case-card__category {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: #8b8e94;
    letter-spacing: -0.45px;
    margin: 0;
}

.member-case-card__title {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 26px;
    color: #181a1e;
    letter-spacing: -0.6px;
    margin: 0;
}

.member-case-card__desc {
    font-family: 'Pretendard', sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 22px;
    color: #595b5f;
    letter-spacing: -0.45px;
    margin: 0;
}

.member-case-card__visuals {
    position: relative;
    height: 280px;
    margin-top: -20px;
}

.member-case-card__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.member-case-card__image {
    position: absolute;
    right: 40px;
    bottom: 20px;
    width: 185px;
    height: 93px;
    object-fit: cover;
    opacity: 0.8;
}

.member-cases-more {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.member-cases-more__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    padding: 0 53px;
    background-color: #fff;
    border: 1px solid #181a1e;
    border-radius: 100px;
    color: #181a1e;
    font-family: 'Pretendard', sans-serif;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: -0.48px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.member-cases-more__btn:hover {
    background-color: #181a1e;
    color: #fff;
}

/* ==========================================================================
   Directions Page (오시는길)
   ========================================================================== */

.directions-page {
    background-color: #fff;
}

/* --- Hero --- */
.directions-hero {
    position: relative;
    width: 100%;
    min-height: 760px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
}

.directions-hero__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center top;
    z-index: 1;
}

.directions-hero__shade {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(28,28,30,0.2) 0%, rgba(28,28,30,0.2) 100%);
    z-index: 2;
}

.directions-hero__inner {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 760px;
    padding-top: 160px;
    padding-bottom: 80px;
}

.directions-hero__header {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.directions-hero__breadcrumb {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.directions-hero__eyebrow {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 18px;
    color: #fff;
    letter-spacing: -0.66px;
}

.directions-hero__line {
    width: 120px;
    height: 1px;
    background-color: #fff;
    opacity: 0.4;
    margin-bottom: 3px;
}

.directions-hero__title {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 60px;
    line-height: 70px;
    color: #fff;
    letter-spacing: -1.8px;
    margin: 0;
}

.directions-hero__footer {
    display: flex;
    justify-content: flex-end;
    margin-top: auto;
}

/* Breadcrumb nav in footer of hero */
.directions-hero__breadcrumb-nav {
    display: flex;
    align-items: center;
    gap: 50px;
}

.directions-hero__breadcrumb-home {
    display: flex;
    align-items: center;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.directions-hero__breadcrumb-home:hover {
    opacity: 1;
}

.directions-hero__breadcrumb-home img {
    width: 20px;
    height: 18px;
    filter: brightness(0) invert(1);
}

.directions-hero__breadcrumb-items {
    display: flex;
    gap: 26px;
    align-items: center;
}

.directions-hero__breadcrumb-item {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 22px;
    letter-spacing: -0.54px;
}

.directions-hero__breadcrumb-item--active {
    opacity: 1;
}

.directions-hero__breadcrumb-item:not(.directions-hero__breadcrumb-item--active) {
    opacity: 0.9;
    transition: opacity 0.2s;
}

.directions-hero__breadcrumb-item:not(.directions-hero__breadcrumb-item--active):hover {
    opacity: 1;
}

.directions-hero__breadcrumb-arrow {
    width: 14px;
    height: 8.5px;
}

/* --- Map Section --- */
.directions-map-section {
    padding-top: 80px;
    padding-bottom: 0;
    background-color: #fff;
}

.directions-map-section__inner {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.directions-map-section__intro {
    padding-bottom: 80px;
    text-align: center;
}

.directions-map-section__intro-text {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 52px;
    color: #181a1e;
    letter-spacing: -1.2px;
    text-align: center;
}

.directions-map-section__content {
    display: flex;
    flex-direction: column;
    gap: 44px;
}

.directions-map-section__map-wrap {
    position: relative;
    width: 100%;
    border-radius: 0;
    overflow: hidden;
    line-height: 0;
}

.directions-map-section__map-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.directions-map-section__map-pin {
    position: absolute;
    left: 56.5%;
    top: 54.5%;
    width: 58px;
    height: 76.093px;
    transform: translate(-50%, -100%);
    z-index: 2;
    pointer-events: none;
    filter: drop-shadow(0 10px 18px rgba(54, 104, 250, 0.24));
}

/* Info Row */
.directions-map-section__info-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.directions-map-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.directions-map-info__name {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 30px;
    line-height: 40px;
    color: #181a1e;
    letter-spacing: -0.9px;
    margin: 0;
}

.directions-map-info__details {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.directions-map-info__detail-row {
    display: flex;
    align-items: center;
    gap: 60px;
    font-family: 'Pretendard', sans-serif;
    font-size: 20px;
    line-height: 30px;
    letter-spacing: -0.6px;
}

.directions-map-info__label {
    font-weight: 700;
    color: #181a1e;
    width: 68px;
    flex-shrink: 0;
}

.directions-map-info__value {
    font-weight: 500;
    color: #4a4c51;
    white-space: nowrap;
}

.directions-map-info__actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.directions-map-info__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 50px;
    padding: 0 29px;
    background-color: #181a1e;
    border-radius: 100px;
    color: #fff;
    font-family: 'Pretendard', sans-serif;
    font-weight: 600;
    font-size: 15px;
    line-height: 22px;
    letter-spacing: -0.45px;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.25s ease, color 0.25s ease;
    min-width: 150px;
}

.directions-map-info__btn img {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    display: block;
    object-fit: contain;
}

.directions-map-info__btn-icon--map {
    width: 22px;
    height: 22px;
}

.directions-map-info__btn-icon--street {
    width: 18px;
    height: 19px;
}

.directions-map-info__btn:hover {
    background-color: #3668fa;
    color: #fff;
}

.directions-map-section__divider {
    width: 100%;
    height: 1px;
    background-color: #d9d9d9;
}

/* --- Directions Footer --- */
.directions-footer {
    background-color: #050505;
    margin-top: 260px;
}

.directions-footer__bottom {
    background-color: #050505;
    padding-top: 30px;
    padding-bottom: 50px;
}

/* Responsive */
@media (max-width: 1024px) {
    .directions-hero__title {
        font-size: 44px;
        line-height: 54px;
    }
    .directions-map-section__intro-text {
        font-size: 30px;
        line-height: 40px;
    }
}

@media (max-width: 768px) {
    .directions-hero__inner {
        min-height: 640px;
        padding-top: 132px;
        padding-bottom: 56px;
    }
    .directions-hero__title {
        font-size: 32px;
        line-height: 42px;
    }
    .directions-hero__eyebrow {
        font-size: 16px;
    }
    .directions-map-section {
        padding-top: 60px;
    }
    .directions-map-section__intro-text {
        font-size: 22px;
        line-height: 32px;
    }
    .directions-map-section__info-row {
        flex-direction: column;
        gap: 24px;
    }
    .directions-map-info__detail-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        font-size: 16px;
    }
    .directions-map-info__label {
        width: auto;
    }
    .directions-map-info__value {
        white-space: normal;
    }
    .directions-hero__breadcrumb-nav {
        gap: 20px;
    }
    .directions-footer {
        margin-top: 80px;
    }
}

/* --- Services Page --- */
.services-page {
    background-color: #fff;
}

/* Hero Section */
.services-hero {
    position: relative;
    width: 100%;
    min-height: 760px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.services-hero__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.services-hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: multiply;
}

.services-hero__gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(217, 217, 217, 0) 100%);
    pointer-events: none;
}

.services-hero__inner {
    position: relative;
    z-index: 2;
    padding-top: 190px;
    min-height: 760px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: 80px;
}

.services-hero__content {
}

.services-hero__eyebrow-wrap {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    margin-bottom: 40px;
}

.services-hero__eyebrow {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 18px;
    letter-spacing: -0.66px;
    color: #fff;
}

.services-hero__eyebrow-line {
    width: 120px;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.4);
}

.services-hero__title {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 60px;
    line-height: 70px;
    letter-spacing: -1.8px;
    color: #fff;
    margin: 0;
}

.services-hero__breadcrumb {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.services-hero__breadcrumb-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 42px;
}

.services-hero__breadcrumb-current {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 22px;
    text-align: center;
    letter-spacing: -0.54px;
    color: #fff;
}

/* --- Services Footer --- */
.services-footer {
    background-color: #050505;
    color: #fff;
}

.services-footer__bottom {
    padding-top: 30px;
    padding-bottom: 50px;
}

.services-footer .divider {
    background-color: #444349;
}

.services-footer .legal-top a {
    color: #a6a6ae;
    font-weight: 500;
}

.services-footer .legal-top a.bold {
    color: #fff;
    font-weight: 600;
}

.services-footer .legal-separator {
    background-color: #29292a;
}

.services-footer .legal-info p {
    color: #fff;
    opacity: 0.8;
}

.services-footer .legal-info .copyright {
    color: #fff;
    opacity: 0.6;
}

/* Search Section */
.services-search {
    padding-top: 60px;
    padding-bottom: 60px;
}

.services-search__box {
    position: relative;
    max-width: 1300px;
    width: 100%;
    height: 60px;
    margin: 0 auto 20px;
    background: #FFFFFF;
    border: 1px solid #DDDEE4;
    border-radius: 100px;
    display: flex;
    align-items: center;
    padding-left: 28px;
    padding-right: 5px;
}

.services-search__input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-family: 'Pretendard', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 30px;
    letter-spacing: -0.54px;
    color: #181a1e;
}

.services-search__input::placeholder {
    color: #84868a;
}

.services-search__button {
    width: 50px;
    height: 50px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.services-search__button img {
    width: 100%;
    height: 100%;
}

.services-search__tags {
    display: flex;
    gap: 8px;
    max-width: 1300px;
    margin: 0 auto;
}

.services-search__tag {
    background: #F4F4F7;
    border-radius: 100px;
    padding: 12px 20px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 22px;
    letter-spacing: -0.45px;
    color: #545558;
    cursor: pointer;
    transition: background 0.25s ease;
}

.services-search__tag:hover {
    background: #e9e9ee;
}

/* Tabs and Content */
.services-tabs {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 60px;
}

.services-tabs::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #ECEDEF;
}

.services-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    position: relative;
}

.services-tab__text {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 30px;
    text-align: center;
    letter-spacing: -0.6px;
    padding-bottom: 12px;
}

.services-tab.active .services-tab__text {
    color: #181A1E;
}

.services-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #181A1E;
    z-index: 1;
}

.services-tab:not(.active) .services-tab__text {
    color: #97999D;
}

.services-tab-content {
    display: none;
    animation: fadeIn 0.3s ease-in-out;
    padding-bottom: 150px;
}

.services-tab-content.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Services Grid (Category Tab) */
.services-grid {
    display: flex;
    gap: 9px;
    width: 100%;
    max-width: 1300px;
    margin: 0 auto 60px;
}

/* Services All Tab Content */
.services-alpha-nav {
    display: flex;
    gap: 9px;
    width: 100%;
    max-width: 1300px;
    margin: 0 auto 60px;
}

.services-alpha-item {
    flex: 0 0 100px;
    width: 100px;
    background: #FFFFFF;
    border: 1px solid #E7E9EB;
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 22px 0;
    cursor: pointer;
    transition: all 0.25s ease;
}

.services-alpha-item.active {
    background: #1A2E69;
    border-color: #1A2E69;
}

.services-alpha-item .char {
    font-family: 'Pretendard', sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 22px;
    letter-spacing: -0.54px;
    color: #181A1E;
}

.services-alpha-item .count {
    font-family: 'Pretendard', sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 22px;
    letter-spacing: -0.54px;
    color: #8B8D92;
    margin-top: 4px;
}

.services-alpha-item.active .char,
.services-alpha-item.active .count {
    color: #FFFFFF;
    font-weight: 700;
}

.services-all-content {
    max-width: 1300px;
    margin: 0 auto;
}

.services-all-title {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 32px;
    letter-spacing: -0.66px;
    color: #181A1E;
    margin-bottom: 20px;
}

.services-all-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.services-all-tag {
    background: #FFFFFF;
    border: 1px solid #D9DBDD;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 26px;
    box-sizing: border-box;
    font-family: 'Pretendard', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: -0.48px;
    color: #545558;
    text-decoration: none;
    transition: all 0.25s ease;
    text-align: center;
    white-space: nowrap;
}

.services-all-tag:hover {
    background: #F4F4F7;
    border-color: #C0C2C5;
    color: #181A1E;
}

.services-grid__item {
    flex: 1;
    height: 128px;
    background: #FFFFFF;
    border: 1px solid #E7E9EB;
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-decoration: none;
    transition: all 0.25s ease;
    cursor: pointer;
    padding: 0;
}

.services-grid__item.active {
    background: #1A2E69;
    border-color: #1A2E69;
}

.services-grid__item.active .services-grid__icon svg path,
.services-grid__item.active .services-grid__icon svg rect,
.services-grid__item.active .services-grid__icon svg circle,
.services-grid__item.active .services-grid__icon svg line {
    stroke: #fff;
    fill: #fff;
}
.services-grid__item.active .services-grid__icon svg [fill="none"] {
    fill: none;
}
.services-grid__item.active .services-grid__icon img {
    filter: brightness(0) invert(1);
}

.services-grid__icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.services-grid__icon img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.services-grid__item.active .services-grid__icon img {
    filter: brightness(0) invert(1);
}

.services-grid__label {
    font-family: 'Pretendard', sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 22px;
    letter-spacing: -0.54px;
    color: #181A1E;
}

.services-grid__item.active .services-grid__label {
    color: #FFFFFF;
}

/* Corporate Icon Custom Drawing */
.corporate-icon-wrapper {
    position: relative;
    width: 36px;
    height: 36px;
}

.corporate-building-1, .corporate-building-2, .corporate-building-3 {
    position: absolute;
    background: #fff;
    border: 2px solid #181a1e;
}

.services-grid__item.active .corporate-building-1,
.services-grid__item.active .corporate-building-2,
.services-grid__item.active .corporate-building-3 {
    background: #181a1e;
    border-color: #fff;
}

.corporate-building-1 {
    width: 20px;
    height: 30px;
    left: 8px;
    top: 3px;
    background: #88a6ff;
}

.corporate-building-2 {
    width: 10px;
    height: 22px;
    left: 0px;
    top: 11px;
}

.corporate-building-3 {
    width: 7px;
    height: 10px;
    left: 14px;
    top: 23px;
    background: #fff !important;
}

/* Details Section */
.services-details {
    max-width: 1300px;
    margin: 0 auto 100px;
}

.services-details__header {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 40px;
}

.services-details__title {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 30px;
    line-height: 34px;
    letter-spacing: -0.9px;
    color: #181A1E;
    margin: 0;
}

.services-details__desc {
    font-family: 'Pretendard', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 32px;
    letter-spacing: -0.54px;
    color: #595B5F;
}

.services-details__desc p {
    margin: 0 0 10px;
}

.services-details__divider {
    width: 100%;
    height: 1px;
    background-color: #E9EAEE;
}

.services-details__sub {
    padding-top: 40px;
    padding-bottom: 40px;
}

.services-details__sub-title {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 30px;
    line-height: 34px;
    letter-spacing: -0.9px;
    color: #181A1E;
    margin: 0 0 20px;
}

.services-details__sub-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.services-details__sub-tag {
    background: #FFFFFF;
    border: 1px solid #D9DBDD;
    border-radius: 100px;
    padding: 14px 26px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 22px;
    letter-spacing: -0.54px;
    color: #545558;
}

/* Responsive Services */
@media (max-width: 1200px) {
    .services-hero__title {
        font-size: 48px;
        line-height: 58px;
    }
    .services-grid {
        flex-wrap: wrap;
        justify-content: center;
    }
    .services-grid__item {
        flex: 0 0 calc(33.333% - 10px);
    }
}

@media (max-width: 768px) {
    .services-hero {
        min-height: 500px;
    }
    .services-hero__title {
        font-size: 32px;
        line-height: 42px;
    }
    .services-hero__inner {
        padding-top: 120px;
    }
    .services-grid__item {
        flex: 0 0 calc(50% - 10px);
    }
    .services-details__title, .services-details__sub-title {
        font-size: 24px;
        line-height: 28px;
    }
    .services-details__desc {
        font-size: 16px;
        line-height: 28px;
    }
    .services-hero__breadcrumb {
        display: none;
    }
}

/* === Blog Page === */
.blog-page {
    background-color: #fff;
}

/* Blog Hero */
.blog-hero {
    position: relative;
    height: 766px;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.blog-hero__gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.15) 0%, rgba(217, 217, 217, 0) 100%);
    pointer-events: none;
}

.blog-hero__inner {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 1300px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 160px 0 80px;
    box-sizing: border-box;
}

.blog-hero__content {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.blog-hero__eyebrow-wrap {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.blog-hero__eyebrow {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 18px;
    letter-spacing: -0.66px;
    color: #FFFFFF;
}

.blog-hero__eyebrow-line {
    width: 120px;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.4);
    margin-bottom: 8px;
}

.blog-hero__title {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 60px;
    line-height: 70px;
    letter-spacing: -1.8px;
    color: #FFFFFF;
    margin: 0;
}

.blog-hero__footer {
    display: flex;
    justify-content: flex-end;
}

.blog-hero__breadcrumb-nav {
    display: flex;
    align-items: center;
    gap: 50px;
}

.blog-hero__breadcrumb-home {
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-hero__breadcrumb-items {
    display: flex;
    align-items: center;
    gap: 12px;
}

.blog-hero__breadcrumb-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 22px;
    letter-spacing: -0.54px;
    color: #FFFFFF;
}

/* Blog Search */
.blog-search {
    padding-top: 60px;
    padding-bottom: 60px;
}

.blog-search .container {
    max-width: 1300px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.blog-search__box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    border: 1px solid #DDDEE4;
    border-radius: 100px;
    padding: 5px 5px 5px 28px;
    background: #FFFFFF;
}

.blog-search__input {
    border: none;
    background: transparent;
    font-family: 'Pretendard', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 30px;
    letter-spacing: -0.54px;
    color: #84868A;
    width: 100%;
    outline: none;
}

.blog-search__input::placeholder {
    color: #84868A;
}

.blog-search__button {
    width: 50px;
    height: 50px;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-search__button img,
.blog-search__button svg {
    width: 24px;
    height: 24px;
    max-width: 100%;
}

.blog-search__tags {
    display: flex;
    align-items: center;
    gap: 8px;
}

.blog-search__tag {
    background: #F4F4F7;
    border-radius: 100px;
    padding: 12px 20px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 22px;
    letter-spacing: -0.45px;
    color: #545558;
    height: 42px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Blog Tabs */
.blog-tabs {
    display: flex;
    align-items: center;
    max-width: 1300px;
    margin: 0 auto 50px;
}

.blog-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    position: relative;
    background: none;
    border: none;
    padding: 0;
    text-decoration: none;
}

.blog-tab__text {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 30px;
    letter-spacing: -0.6px;
    color: #97999D;
    text-align: center;
}

.blog-tab::after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background-color: #EEEFF1;
}

.blog-tab--active .blog-tab__text {
    color: #181A1E;
}

.blog-tab--active::after {
    height: 2px;
    background-color: #181A1E;
}

/* Base border for the entire row of tabs to ensure full width */
.blog-content {
    position: relative;
}

/* Blog Results */
.blog-results-header {
    max-width: 1300px;
    margin: 0 auto 26px;
}

.blog-results-count {
    font-family: 'Pretendard', sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 22px;
    letter-spacing: -0.45px;
    color: #595B5F;
    margin: 0;
}

.blog-results-count strong {
    font-weight: 700;
    color: #1A2E69;
}

/* Blog Grid */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    max-width: 1300px;
    margin: 0 auto 90px;
}

.blog-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    border-radius: 18px;
    overflow: hidden;
    background: #F8F8F8;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.blog-card__image-wrap {
    width: 100%;
    height: 240px;
    overflow: hidden;
    position: relative;
    border-radius: 18px 18px 0 0;
}

.blog-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-card__content {
    padding: 26px 26px 34px 26px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
}

.blog-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.blog-card__tag {
    background: #FFFFFF;
    border: 1px solid #3668FA;
    border-radius: 100px;
    padding: 0 14px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Pretendard', sans-serif;
    font-weight: 600;
    font-size: 13px;
    line-height: 22px;
    letter-spacing: -0.39px;
    color: #3668FA;
    box-sizing: border-box;
}

.blog-card__title {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 26px;
    letter-spacing: -0.6px;
    color: #181A1E;
    margin: 0;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.blog-card__excerpt {
    font-family: 'Pretendard', sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 22px;
    letter-spacing: -0.45px;
    color: #595B5F;
    margin: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

/* Blog Pagination */
.blog-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 50px;
    margin-bottom: 60px;
}

.blog-pagination__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: #FFFFFF;
    border-radius: 20px;
    text-decoration: none;
}

.blog-pagination__numbers {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 0 10px;
}

.blog-pagination__number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: #FFFFFF;
    border-radius: 20px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #3D3D3D;
    text-decoration: none;
}

.blog-pagination__number--active {
    background: #1E1E1E;
    color: #FFFFFF;
}

.blog-card--empty {
    background: transparent;
    border: none;
    pointer-events: none;
    min-height: 380px;
}


.blog-footer__bottom {
    background-color: #050505;
}

/* ===========================
   BLOG PAGE — MOBILE RESPONSIVE
   =========================== */
@media (max-width: 1024px) {
    .blog-hero {
        height: 600px;
    }
    .blog-hero__inner {
        padding: 140px 20px 60px;
    }
    .blog-hero__title {
        font-size: 44px;
        line-height: 54px;
    }
}

@media (max-width: 768px) {
    .blog-hero {
        height: 500px;
    }
    .blog-hero__inner {
        padding: 120px 20px 40px;
    }
    .blog-hero__title {
        font-size: 32px;
        line-height: 42px;
    }
    .blog-hero__breadcrumb-nav {
        display: none;
    }
    .blog-search {
        padding: 40px 0;
    }
    .blog-search__tags {
        flex-wrap: wrap;
    }
    .blog-tabs {
        margin-bottom: 30px;
    }
    .blog-tab__text {
        font-size: 16px;
        line-height: 24px;
    }
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        margin-bottom: 50px;
    }
}

@media (max-width: 480px) {
    .blog-hero {
        height: 400px;
    }
    .blog-hero__inner {
        padding: 100px 20px 30px;
    }
    .blog-hero__title {
        font-size: 24px;
        line-height: 32px;
    }
    .blog-search__input {
        font-size: 16px;
    }
    .blog-search__tag {
        font-size: 13px;
        padding: 8px 14px;
        height: 36px;
    }
    .blog-tabs {
        flex-wrap: wrap;
    }
    .blog-tab {
        flex: 0 0 50%;
        margin-bottom: 10px;
    }
    .blog-grid {
        grid-template-columns: 1fr;
        margin-bottom: 40px;
    }
    .blog-card__image-wrap {
        height: 200px;
    }
    .blog-card__content {
        padding: 20px;
    }
    .blog-card__title {
        font-size: 18px;
        line-height: 24px;
    }
    .blog-card__excerpt {
        font-size: 14px;
        line-height: 20px;
    }
    .blog-pagination__numbers {
        gap: 8px;
        margin: 0 5px;
    }
    .blog-pagination__number,
    .blog-pagination__arrow {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }
}


/* === Services Detail Page === */

.sd-header {
    background-color: #F5F7FA;
    padding-top: 96px;
    padding-bottom: 80px;
}

.sd-header__inner {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}



.sd-header__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.sd-header__breadcrumb {
    font-family: 'Pretendard', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: -0.54px;
    color: #1A2E69;
    text-align: center;
    margin-bottom: -22px;
}

.sd-header__title {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 50px;
    line-height: 62px;
    letter-spacing: -1.5px;
    color: #181A1E;
    margin: 0;
    text-align: center;
}

.sd-header__pills {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.sd-header__pill {
    background-color: #FFFFFF;
    height: 42px;
    padding: 0 20px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 22px;
    letter-spacing: -0.45px;
    color: #545558;
}

.sd-layout {
    padding-top: 56px;
    padding-bottom: 150px;
}

.sd-layout__inner {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    gap: 56px;
    align-items: flex-start;
}

.sd-main {
    flex: 1;
    width: 975px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.sd-section-title {
    display: flex;
    gap: 10px;
    align-items: center;
}

.sd-section-title__icon {
    width: 48px;
    height: 48px;
}

.sd-section-title h2 {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 34px;
    line-height: 38px;
    letter-spacing: -1.02px;
    color: #1A2E69;
    margin: 0;
}

.sd-cards {
    display: flex;
    flex-direction: column;
    gap: 60px;
    width: 100%;
}

.sd-card {
    background: #FFFFFF;
    border: 1px solid #E3E5E9;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sd-card__header {
    display: flex;
    gap: 20px;
    align-items: center;
}

.sd-card__number {
    width: 66px;
    height: 66px;
    background: #1A2E69;
    border-radius: 14px 0 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 34px;
    letter-spacing: -0.72px;
    color: #FFFFFF;
}

.sd-card__heading {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 28px;
    line-height: 38px;
    letter-spacing: -0.84px;
    color: #1A2E69;
    margin: 0;
}

.sd-card__divider {
    height: 1px;
    background-color: #EBECF1;
    width: calc(100% - 2px);
}

.sd-card__body {
    padding: 34px 30px 30px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sd-card__body p {
    font-family: 'Pretendard', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 30px;
    letter-spacing: -0.54px;
    color: #414347;
    margin: 0 0 10px;
}

.sd-card__body strong {
    font-weight: 700;
}

.sd-card__inner-divider {
    height: 1px;
    background-color: #F2F2F3;
    width: 100%;
    margin: 24px 0;
}

.sd-card__subheading {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 32px;
    letter-spacing: -0.66px;
    color: #181A1E;
    margin: 0 0 14px;
}

.sd-table-wrap {
    border: 1px solid #E3E5E9;
    border-radius: 14px;
    overflow: hidden;
}

.sd-table {
    width: 100%;
    border-collapse: collapse;
}

.sd-table th,
.sd-table td {
    padding: 13px 20px;
    font-family: 'Pretendard', sans-serif;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: -0.48px;
    color: #414347;
}

.sd-table th {
    font-weight: 600;
    font-size: 14px;
    text-align: center;
    background-color: #F7F7F7;
    border-bottom: 1px solid #E3E5E9;
    border-right: 1px solid #E3E5E9;
}

.sd-table th:last-child {
    border-right: none;
}

.sd-table td {
    font-weight: 400;
    border-bottom: 1px solid #E3E5E9;
    border-right: 1px solid #E3E5E9;
}

.sd-table td:last-child {
    border-right: none;
}

.sd-table tbody tr:last-child td {
    border-bottom: none;
}

.sd-table td:first-child {
    font-weight: 700;
    width: 212px;
}

.sd-table--4col td:first-child {
    width: 136px;
}

.sd-table--4col td:nth-child(2) {
    width: 288px;
}

.sd-table--4col td:nth-child(3),
.sd-table--4col td:nth-child(4),
.sd-table--4col td:nth-child(5) {
    width: 160px;
}

.sd-law-blocks {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.sd-law-block {
    display: flex;
    flex-direction: column;
    margin-bottom: 1px;
}

.sd-law-block__header {
    background-color: #EEF4FF;
    height: 70px;
    padding: 0 26px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 14px 14px 0 0;
}

.sd-law-block:not(:first-child) .sd-law-block__header {
    border-radius: 0;
}

.sd-law-block__header img {
    width: 22px;
    height: 22px;
}

.sd-law-block__header h5 {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: -0.54px;
    color: #181A1E;
    margin: 0;
}

.sd-law-block__body {
    background-color: #EEF4FF;
    padding: 20px 65px 30px 26px;
    border-radius: 0 0 14px 14px;
    margin-top: -1px;
}

.sd-law-block:not(:last-child) .sd-law-block__body {
    border-radius: 0;
}

.sd-law-block__body p {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.48px;
    color: #414347;
    margin: 0;
}

.sd-cards-divider {
    height: 1px;
    background-color: #F2F2F3;
    width: 100%;
}

.sd-pjlaw-card {
    margin-top: 0;
}

.sd-pjlaw-card .sd-card__body {
    padding-top: 30px;
}

.sd-list-btn-wrap {
    display: flex;
    justify-content: center;
}

.sd-list-btn {
    background: #181A1E;
    border-radius: 10px;
    height: 56px;
    padding: 0 53px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Pretendard', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 30px;
    letter-spacing: -0.48px;
    color: #FFFFFF;
    text-decoration: none;
    transition: background-color 0.2s;
}

.sd-list-btn:hover {
    background: #333;
}

.sd-nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px;
    width: 100%;
    margin-top: -30px;
}

.sd-nav-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sd-nav-prev {
    align-items: flex-start;
}

.sd-nav-next {
    align-items: flex-end;
}

.sd-nav-link-wrap {
    display: flex;
    align-items: center;
    gap: 22px;
    cursor: pointer;
}

.sd-nav-link-wrap span {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 28px;
    line-height: 30px;
    letter-spacing: -0.84px;
    color: #181A1E;
}

.sd-nav-text {
    font-family: 'Pretendard', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: normal;
    letter-spacing: -0.48px;
    color: #B6B6B6;
    padding: 0 72px;
}

.sd-nav-next .sd-nav-text {
    color: #1E1E1E;
}

.sd-sidebar {
    width: 269px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    flex-shrink: 0;
}

.sd-sidebar__top-icon {
    width: 48px;
    height: 48px;
    margin-left: auto;
}

.sd-sidebar__top-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.sd-sidebar-card {
    background: #1A2E69;
    border-radius: 14px;
    box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sd-sidebar-card__header {
    background: #273D7E;
    height: 56px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #384E91;
}

.sd-sidebar-card__header h3 {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: -0.54px;
    color: #FFFFFF;
    margin: 0;
}

.sd-sidebar-card__header img {
    width: 7px;
    height: 12px;
}

.sd-sidebar-card__list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 0;
}

.sd-sidebar-card__item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0 20px;
    text-decoration: none;
}

.sd-sidebar-card__item span {
    font-family: 'Pretendard', sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 22px;
    letter-spacing: -0.45px;
    color: #FFFFFF;
    transition: opacity 0.2s;
}

.sd-sidebar-card__item:hover span {
    opacity: 0.8;
}

.sd-sidebar-card__item img {
    width: 14px;
    height: 20px;
    margin-top: 1px;
}

/* Responsive sd-layout */
@media (max-width: 1300px) {
    .sd-layout__inner, .sd-header__inner {
        padding: 0 20px;
    }
}

@media (max-width: 991px) {
    .sd-layout__inner {
        flex-direction: column;
    }
    .sd-main {
        width: 100%;
    }
    .sd-sidebar {
        width: 100%;
    }
    .sd-header__title {
        font-size: 40px;
        line-height: 50px;
    }
}

@media (max-width: 768px) {
    .sd-header__title {
        font-size: 32px;
        line-height: 42px;
    }
    .sd-nav-row {
        flex-direction: column;
        gap: 20px;
        height: auto;
        margin-top: 0;
    }
    .sd-nav-prev, .sd-nav-next {
        align-items: center;
    }
    .sd-nav-text {
        padding: 0;
        text-align: center;
    }
}

/* Services Detail Pagination Navigation */
.sd-nav-row {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #1a2e69;
    padding-top: 20px;
    margin-top: 40px;
}

.sd-nav-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sd-nav-next {
    align-items: flex-end;
}

.sd-nav-link-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 16px;
    color: #181a1e;
    text-decoration: none;
}

.sd-nav-link-wrap img {
    max-width: 60px;
    max-height: 60px;
    width: auto;
    height: auto;
    flex-shrink: 0;
}

.sd-nav-text {
    font-size: 15px;
    color: #8b8e96;
}

/* ==========================================================================
   Blog Post Detail Page
   ========================================================================== */
.blog-post-page {
    background-color: #f7f8f9;
    padding-bottom: 100px;
}

.blog-post-nav {
    background: #fff;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 0;
    z-index: 100;
}

.blog-post-nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 1300px;
    margin: 0 auto;
    position: relative;
}

.blog-post-nav__links {
    display: flex;
    align-items: center;
}

.blog-post-nav__home-link {
    display: flex;
    align-items: center;
}

.blog-post-nav__separator {
    width: 1px;
    height: 80px;
    background: #e3e5e9;
    margin: 0 30px;
}

.blog-post-nav__current {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: #181a1e;
}

.blog-post-nav__title {
    margin: 0;
}

.blog-post-nav__close-link {
    display: flex;
    align-items: center;
}

.blog-post-nav__icon,
.blog-post-nav__icon-close {
    flex-shrink: 0;
    max-width: 20px;
    height: auto;
}

.blog-post-nav__line-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
}

.blog-post-nav__line-bg {
    width: 100%;
    height: 100%;
    background: #e3e5e9;
}

.blog-post-nav__line-active {
    position: absolute;
    left: calc((100% - 1300px) / 2);
    top: 0;
    width: 300px;
    height: 100%;
    background: #1a2e69;
}

.blog-post-layout {
    display: flex;
    justify-content: space-between;
    gap: 56px;
    margin-top: 50px;
    align-items: flex-start;
}

.blog-post__main {
    width: 975px;
    background: transparent;
}

.blog-post__sidebar {
    width: 269px;
    position: sticky;
    top: 120px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.blog-post__hero {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 30px;
    background: #000;
}

.blog-post__hero-img {
    width: 100%;
    display: block;
    opacity: 0.6;
}

.blog-post__hero-title {
    position: absolute;
    top: 63px;
    left: 51px;
    color: #fff;
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 38px;
    line-height: 1.4;
    letter-spacing: -1.14px;
    margin: 0;
}

.blog-post__intro {
    background: #fff;
    border-radius: 14px;
    padding: 40px;
    margin-bottom: 20px;
}

.blog-post__intro-title {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 28px;
    color: #1a2e69;
    margin: 0 0 20px;
}

.blog-post__intro-text {
    font-family: 'Pretendard', sans-serif;
    font-size: 18px;
    line-height: 30px;
    letter-spacing: -0.54px;
    color: #414347;
    margin: 0;
}

.blog-post__toc {
    background: #fff;
    border: 1px solid #e3e5e9;
    border-radius: 14px;
    padding: 30px 40px;
    margin-bottom: 20px;
}

.blog-post__toc-item {
    display: flex;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #e3e5e9;
}

.blog-post__toc-num {
    background: #1a2e69;
    color: #fff;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: bold;
    margin-right: 15px;
}

.blog-post__toc-text {
    flex: 1;
    font-family: 'Pretendard', sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: #1a2e69;
}

.blog-post__toc-content {
    padding: 15px 0 15px 40px;
}

.blog-post__toc-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.blog-post__toc-content ul.flex-row {
    flex-direction: row;
    gap: 30px;
}

.blog-post__toc-content li {
    font-size: 15px;
    color: #414347;
    position: relative;
    padding-left: 15px;
}

.blog-post__toc-content li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #8b8e96;
}

.blog-post__toc-links {
    display: flex;
    align-items: center;
    gap: 20px;
    background: #fff;
    border: 1px solid #e3e5e9;
    border-radius: 14px;
    padding: 20px 40px;
    margin-bottom: 30px;
}

.blog-post__toc-link {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #1a2e69;
    text-decoration: none;
}

.blog-post__divider {
    height: 1px;
    background: #1a2e69;
    margin: 40px 0;
}

.blog-post__chapter {
    margin-bottom: 40px;
}

.blog-post__chapter-header {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
}

.blog-post__chapter-num {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 24px;
    color: #fff;
    background: #1a2e69;
    width: 66px;
    height: 66px;
    border-radius: 14px 0 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 20px;
}

.blog-post__chapter-title {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 28px;
    color: #1a2e69;
    margin: 0;
}

.blog-post__section-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.blog-post__section-num {
    background: #1a2e69;
    color: #fff;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-right: 15px;
}

.blog-post__section-title {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 22px;
    color: #181a1e;
    margin: 0;
}

.blog-post__text {
    font-family: 'Pretendard', sans-serif;
    font-size: 18px;
    line-height: 30px;
    letter-spacing: -0.54px;
    color: #414347;
    margin: 0;
}

.blog-post__law-box {
    background: #eef4ff;
    border-radius: 14px;
    padding: 30px;
    margin: 20px 0;
}

.blog-post__law-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 18px;
    color: #1a2e69;
    margin-bottom: 15px;
}

.blog-post__law-text {
    font-size: 16px;
    line-height: 1.6;
    color: #414347;
    margin: 0;
}

.blog-post__divider-sub {
    height: 1px;
    background: #e3e5e9;
    margin: 30px 0;
}

.blog-post__list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
}

.blog-post__list li {
    font-size: 16px;
    color: #414347;
    position: relative;
    padding-left: 20px;
    margin-bottom: 10px;
}

.blog-post__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #1a2e69;
}

.blog-post__checklist {
    background: #fff;
    border: 1px solid #e3e5e9;
    border-radius: 14px;
    padding: 30px;
}

.blog-post__check-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 15px;
}

.blog-post__check-item:last-child {
    margin-bottom: 0;
}

.blog-post__check-icon {
    width: 20px;
    height: 20px;
    background-color: #f2f4f8; /* placeholder for icon */
    border-radius: 4px;
    flex-shrink: 0;
    margin-top: 2px;
}

.blog-post__check-item p {
    font-size: 15px;
    line-height: 1.6;
    color: #595b5f;
    margin: 0;
}

.blog-post__more-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 400px;
    height: 56px;
    margin: 40px auto 0;
    border: 1px solid #1a2e69;
    border-radius: 28px;
    font-weight: 600;
    font-size: 16px;
    color: #1a2e69;
    background: #fff;
    text-decoration: none;
}

.blog-post__image-wrap {
    margin: 20px 0 30px;
}

.blog-post__image {
    width: 100%;
    border-radius: 14px;
    display: block;
}

.blog-post__image-caption {
    font-size: 15px;
    color: #8b8e96;
    margin: 15px 0 0;
    text-align: center;
}

.blog-post__callout {
    background: #f1f4f8;
    border-radius: 14px;
    padding: 30px;
    margin: 20px 0;
}

.blog-post__callout-title {
    font-weight: 700;
    font-size: 18px;
    color: #1a2e69;
    margin: 0 0 15px;
}

.blog-post__callout-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.blog-post__callout-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    color: #181a1e;
    margin-bottom: 10px;
}

.blog-post__table-wrap {
    background: #fff;
    border: 1px solid #e3e5e9;
    border-radius: 14px;
    overflow: hidden;
    margin: 20px 0;
}

.blog-post__table {
    width: 100%;
    border-collapse: collapse;
}

.blog-post__table th,
.blog-post__table td {
    padding: 15px;
    text-align: center;
    border: 1px solid #e3e5e9;
    font-size: 15px;
}

.blog-post__table th {
    background: #f7f8f9;
    font-weight: 600;
    color: #1a2e69;
}

.blog-post__qa {
    background: #fff;
    border: 1px solid #e3e5e9;
    border-radius: 14px;
    padding: 30px;
    margin: 30px 0;
}

.blog-post__qa-q,
.blog-post__qa-a {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.blog-post__qa-q {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eeeff2;
}

.blog-post__qa-icon {
    width: 30px;
    height: 30px;
    background: #1a2e69;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
}

.blog-post__qa-icon--a {
    background: #ff5a00;
}

.blog-post__qa-text {
    font-size: 16px;
    line-height: 1.6;
    color: #414347;
    margin-top: 3px;
}

.blog-post__conclusion {
    background: #1a2e69;
    border-radius: 14px;
    padding: 40px;
    color: #fff;
}

.blog-post__conclusion-title {
    font-weight: 700;
    font-size: 24px;
    margin: 0 0 20px;
}

.blog-post__list--white li {
    color: #fff;
}

.blog-post__list--white li::before {
    background: #fff;
}

.blog-post__conclusion-text {
    font-size: 16px;
    line-height: 1.6;
    margin: 20px 0 0;
}

.blog-post__faq {
    margin-bottom: 40px;
}

.blog-post__faq-title {
    font-weight: 700;
    font-size: 24px;
    color: #181a1e;
    margin: 0 0 20px;
}

.blog-post__faq-list {
    background: #fff;
    border: 1px solid #e3e5e9;
    border-radius: 14px;
}

.blog-post__faq-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px 30px;
    border-bottom: 1px solid #eeeff2;
}

.blog-post__faq-item:last-child {
    border-bottom: none;
}

.blog-post__faq-icon {
    font-weight: 700;
    font-size: 18px;
    color: #1a2e69;
}

.blog-post__faq-text {
    font-weight: 600;
    font-size: 16px;
    color: #181a1e;
}

.blog-post__actions {
    display: flex;
    justify-content: center;
    margin: 40px 0;
}

.blog-post__list-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    padding: 0 53px;
    background: #181a1e;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 16px;
    color: #fff;
    text-decoration: none;
}

.blog-post__nav-links {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #1a2e69;
    padding-top: 20px;
}

.blog-post__nav-prev,
.blog-post__nav-next {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-decoration: none;
}

.blog-post__nav-next {
    align-items: flex-end;
}

.blog-post__nav-icon {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 16px;
    color: #181a1e;
}

.blog-post__nav-icon svg,
.blog-post__nav-icon img {
    max-width: 60px;
    max-height: 60px;
    width: auto;
    height: auto;
    flex-shrink: 0;
}

.blog-post__nav-text {
    font-size: 15px;
    color: #8b8e96;
}

/* Sidebar Cards */
.sidebar-card {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.06);
}

.sidebar-card--dark {
    background: #1a2e69;
}

.sidebar-card--blue {
    background: #1a2e69;
}

.sidebar-card--light {
    background: #fff;
    border: 1px solid #e3e5e9;
}

.sidebar-card__header {
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    border-bottom: 1px solid #eeeff2;
}

.sidebar-card__header--dark {
    background: #273d7e;
    border-bottom: 1px solid #384e91;
}

.sidebar-card__header--blue {
    background: #273d7e;
    border-bottom: 1px solid #384e91;
}

.sidebar-card__title {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 18px;
    margin: 0;
}

.sidebar-card--dark .sidebar-card__title {
    color: #fff;
}

.sidebar-card--blue .sidebar-card__title {
    color: #fff;
}

.sidebar-card--light .sidebar-card__title {
    color: #1a2e69;
}

.sidebar-card__content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.sidebar-card__item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    text-decoration: none;
}

.sidebar-card__item-text {
    font-family: 'Pretendard', sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 1.4;
}

.sidebar-card__item--white .sidebar-card__item-text {
    color: #fff;
}

.sidebar-card__item--dark .sidebar-card__item-text {
    color: #414347;
}

@media (max-width: 1300px) {
    .blog-post-nav__links,
    .blog-post-layout {
        width: 100%;
        padding: 0 20px;
    }
    .blog-post-nav__inner {
        width: 100%;
        padding: 0 20px;
    }
    .blog-post-nav__line-active {
        left: 20px;
    }
}

@media (max-width: 1024px) {
    .blog-post-layout {
        flex-direction: column;
        gap: 50px;
    }
    .blog-post__main {
        width: 100%;
    }
    .blog-post__sidebar {
        width: 100%;
        position: relative;
        top: auto;
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .blog-post-nav {
        height: 60px;
    }
    .blog-post-nav__separator {
        height: 60px;
        margin: 0 15px;
    }
    .blog-post-nav__current {
        font-size: 15px;
        max-width: calc(100vw - 140px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .blog-post-nav__line-wrap {
        height: 1px;
    }
    
    .blog-post-layout {
        margin-top: 30px;
        gap: 40px;
    }
    .blog-post__hero {
        margin-bottom: 20px;
    }
    .blog-post__hero-title {
        font-size: 22px;
        line-height: 1.3;
        top: 30px;
        left: 20px;
        right: 20px;
    }
    .blog-post__intro {
        padding: 25px 20px;
        margin-bottom: 15px;
    }
    .blog-post__intro-title {
        font-size: 20px;
        margin-bottom: 15px;
    }
    .blog-post__intro-text {
        font-size: 15px;
        line-height: 1.6;
    }
    .blog-post__toc {
        padding: 20px;
        margin-bottom: 15px;
    }
    .blog-post__toc-item {
        padding: 12px 0;
    }
    .blog-post__toc-text {
        font-size: 15px;
    }
    .blog-post__toc-content {
        padding: 12px 0 12px 20px;
    }
    .blog-post__toc-links {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
        padding: 20px;
    }
    .blog-post__toc-link {
        font-size: 14px;
    }
    .blog-post__chapter {
        margin-bottom: 30px;
    }
    .blog-post__chapter-header {
        margin-bottom: 20px;
    }
    .blog-post__chapter-num {
        width: 48px;
        height: 48px;
        font-size: 18px;
        margin-right: 15px;
    }
    .blog-post__chapter-title {
        font-size: 20px;
    }
    .blog-post__section-header {
        margin-bottom: 15px;
    }
    .blog-post__section-num {
        width: 24px;
        height: 24px;
        font-size: 12px;
        margin-right: 10px;
    }
    .blog-post__section-title {
        font-size: 17px;
    }
    .blog-post__text {
        font-size: 15px;
        line-height: 1.6;
    }
    .blog-post__law-box {
        padding: 20px;
        margin: 15px 0;
    }
    .blog-post__law-title {
        font-size: 15px;
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }
    .blog-post__law-text {
        font-size: 14px;
    }
    .blog-post__list li {
        font-size: 15px;
        padding-left: 15px;
    }
    .blog-post__list li::before {
        top: 8px;
        width: 5px;
        height: 5px;
    }
    .blog-post__checklist {
        padding: 20px;
    }
    .blog-post__check-item {
        gap: 10px;
    }
    .blog-post__check-item p {
        font-size: 14px;
    }
    .blog-post__more-btn {
        width: 100%;
        max-width: 100%;
        margin-top: 25px;
    }
    .blog-post__image-wrap {
        margin: 15px 0 25px;
    }
    .blog-post__image-caption {
        font-size: 13px;
        margin-top: 10px;
    }
    .blog-post__callout {
        padding: 20px;
        margin: 15px 0;
    }
    .blog-post__callout-title {
        font-size: 16px;
        margin-bottom: 10px;
    }
    .blog-post__callout-list li {
        font-size: 14px;
    }
    .blog-post__table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .blog-post__table th,
    .blog-post__table td {
        padding: 10px 12px;
        font-size: 13px;
        white-space: nowrap;
    }
    .blog-post__qa {
        padding: 20px;
        margin: 20px 0;
    }
    .blog-post__qa-q {
        margin-bottom: 15px;
        padding-bottom: 15px;
    }
    .blog-post__qa-icon {
        width: 24px;
        height: 24px;
        font-size: 13px;
    }
    .blog-post__qa-text {
        font-size: 14px;
        margin-top: 1px;
    }
    .blog-post__conclusion {
        padding: 30px 20px;
    }
    .blog-post__conclusion-title {
        font-size: 20px;
        margin-bottom: 15px;
    }
    .blog-post__conclusion-text {
        font-size: 14px;
    }
    .blog-post__faq {
        margin-bottom: 30px;
    }
    .blog-post__faq-title {
        font-size: 20px;
        margin-bottom: 15px;
    }
    .blog-post__faq-item {
        padding: 15px 20px;
    }
    .blog-post__faq-icon {
        font-size: 16px;
    }
    .blog-post__faq-text {
        font-size: 14px;
    }
    .blog-post__actions {
        margin: 30px 0;
    }
    .blog-post__list-btn {
        height: 48px;
        padding: 0 40px;
        font-size: 15px;
    }
    .blog-post__nav-links {
        flex-direction: column;
        gap: 20px;
        padding-top: 15px;
    }
    .blog-post__nav-next {
        align-items: flex-start;
    }
    .blog-post__nav-text {
        font-size: 14px;
    }
}

/* =============================================
   CASES PAGE (업무사례)
   ============================================= */

.cases-page {
    background: #fff;
}

.cases-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Hero */
.cases-hero {
    position: relative;
    height: 766px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

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

.cases-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding-bottom: 80px;
}

.cases-hero__content {
    padding-top: 160px;
}

.cases-hero__eyebrow-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 40px;
}

.cases-hero__eyebrow {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 18px;
    letter-spacing: -0.66px;
    color: #fff;
}

.cases-hero__eyebrow-line {
    display: block;
    width: 120px;
    height: 1px;
    background: rgba(255, 255, 255, 0.4);
}

.cases-hero__title {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 60px;
    line-height: 70px;
    letter-spacing: -1.8px;
    color: #fff;
    margin: 0;
}

/* Breadcrumb */
.cases-hero__footer {
    display: flex;
    justify-content: flex-end;
}

.cases-hero__breadcrumb-nav {
    display: flex;
    align-items: center;
    gap: 50px;
}

.cases-hero__breadcrumb-home {
    display: flex;
    align-items: center;
    text-decoration: none;
    opacity: 0.85;
}

.cases-hero__breadcrumb-home:hover {
    opacity: 1;
}

.cases-hero__breadcrumb-items {
    display: flex;
    gap: 26px;
    align-items: center;
}

.cases-hero__breadcrumb-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 22px;
    letter-spacing: -0.54px;
    color: #fff;
}

/* Search section */
.cases-search-section {
    padding: 60px 0;
}

.cases-search-bar {
    height: 60px;
    background: #fff;
    border: 1px solid #dddee4;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 28px;
    padding-right: 5px;
    margin-bottom: 20px;
}

.cases-search-bar__input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: 'Pretendard', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 30px;
    letter-spacing: -0.54px;
    color: #84868a;
}

.cases-search-bar__input::placeholder {
    color: #84868a;
}

.cases-search-bar__button {
    width: 50px;
    height: 50px;
    background: #1a2e69;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s;
}

.cases-search-bar__button:hover {
    background: #2541a0;
}

/* Chips row */
.cases-chips-row {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0 28px;
}

.cases-chips-label {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.48px;
    color: #181a1e;
    white-space: nowrap;
}

.cases-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cases-chip {
    height: 42px;
    padding: 0 20px;
    background: #f4f4f7;
    border: none;
    border-radius: 100px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 22px;
    letter-spacing: -0.45px;
    color: #545558;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.cases-chip--active,
.cases-chip:hover {
    background: #1a2e69;
    color: #fff;
}

/* Divider */
.cases-divider {
    width: 100%;
    height: 1px;
    background: #ecedef;
}

/* Tabs */
.cases-tabs-section {
    padding: 60px 0 0;
}

.cases-tabs {
    display: flex;
    gap: 10px;
    flex-wrap: nowrap;
    overflow-x: auto;
}

.cases-tab {
    width: 150px;
    min-width: 150px;
    padding: 22px 20px;
    border-radius: 14px;
    border: 1px solid #e7e9eb;
    background: #fff;
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.cases-tab--active {
    background: #1a2e69;
    border-color: #1a2e69;
    box-shadow: none;
}

.cases-tab__label {
    font-family: 'Pretendard', sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 22px;
    letter-spacing: -0.54px;
    color: #181a1e;
    white-space: nowrap;
}

.cases-tab--active .cases-tab__label {
    color: #fff;
}

.cases-tab--active .cases-tab__icon svg path,
.cases-tab--active .cases-tab__icon svg rect,
.cases-tab--active .cases-tab__icon svg circle,
.cases-tab--active .cases-tab__icon svg line {
    stroke: #fff;
}

.cases-tab--active .cases-tab__icon svg rect[fill]:not([fill="none"]) {
    fill: rgba(255, 255, 255, 0.5);
}

/* Grid */
.cases-grid-section {
    padding: 60px 0 100px;
}

.cases-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    margin-bottom: 50px;
}

/* Case card */
.case-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 18px;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.case-card__info {
    background: #f8f8f8;
    border-radius: 18px 18px 0 0;
    padding: 26px 26px 34px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
}

.case-card__meta {
    display: flex;
    align-items: center;
    gap: 14px;
}

.case-card__badge {
    height: 30px;
    padding: 0 14px;
    border: 1px solid #3668fa;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Pretendard', sans-serif;
    font-weight: 600;
    font-size: 13px;
    line-height: 22px;
    letter-spacing: -0.39px;
    color: #3668fa;
    white-space: nowrap;
    background: #fff;
}

.case-card__category {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 22px;
    letter-spacing: -0.45px;
    color: #8b8e94;
    white-space: nowrap;
}

.case-card__title {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 26px;
    letter-spacing: -0.6px;
    color: #181a1e;
    margin: 0;
}

.case-card__desc {
    font-family: 'Pretendard', sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 22px;
    letter-spacing: -0.45px;
    color: #595b5f;
    margin: 0;
}

.case-card__image {
    position: relative;
    width: 100%;
    aspect-ratio: 416 / 240;
    overflow: hidden;
    border-radius: 0 0 18px 18px;
    flex-shrink: 0;
}

.case-card__image-base {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.case-card__image-label {
    position: absolute;
    left: 27.9%;
    top: 28.8%;
    width: 44.5%;
    object-fit: contain;
}

/* Pagination */
.cases-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.cases-pagination__nav {
    display: flex;
    gap: 10px;
    align-items: center;
}

.cases-pagination__arrow {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.cases-pagination__arrow:hover {
    background: #f4f4f7;
}

.cases-pagination__pages {
    display: flex;
    gap: 18px;
    align-items: center;
}

.cases-pagination__page {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background: #fff;
    border: none;
    cursor: pointer;
    font-family: 'Pretendard', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: normal;
    letter-spacing: -0.42px;
    color: #3d3d3d;
    transition: background 0.2s, color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cases-pagination__page--active {
    background: #1e1e1e;
    color: #fff;
}

.cases-pagination__page:hover:not(.cases-pagination__page--active) {
    background: #f4f4f7;
}

/* ===========================
   CASES PAGE — MOBILE RESPONSIVE
   =========================== */
@media (max-width: 1024px) {
    .cases-hero {
        height: 600px;
    }
    .cases-hero__inner {
        padding-top: 140px;
        padding-bottom: 60px;
    }
    .cases-hero__title {
        font-size: 44px;
        line-height: 54px;
    }
}

@media (max-width: 768px) {
    .cases-hero {
        height: 500px;
    }
    .cases-hero__inner {
        padding-top: 120px;
        padding-bottom: 40px;
    }
    .cases-hero__title {
        font-size: 32px;
        line-height: 42px;
    }
    .cases-hero__breadcrumb-nav {
        display: none;
    }
    .cases-search-section {
        padding: 40px 0;
    }
    .cases-chips-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 0 20px;
    }
    .cases-chips {
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
        flex-wrap: nowrap;
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
    }
    .cases-chip {
        display: inline-block;
        height: 38px;
        padding: 0 16px;
        font-size: 14px;
        line-height: 38px;
    }
    .cases-tabs-section {
        padding: 40px 0 0;
    }
    .cases-grid-section {
        padding: 40px 0 80px;
    }
    .cases-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        margin-bottom: 40px;
    }
}

@media (max-width: 480px) {
    .cases-hero {
        height: 400px;
    }
    .cases-hero__inner {
        padding-top: 100px;
        padding-bottom: 30px;
    }
    .cases-hero__title {
        font-size: 24px;
        line-height: 32px;
    }
    .cases-search-bar {
        height: 50px;
        padding-left: 18px;
    }
    .cases-search-bar__input {
        font-size: 15px;
    }
    .cases-search-bar__button {
        width: 40px;
        height: 40px;
    }
    .cases-grid {
        grid-template-columns: 1fr;
        margin-bottom: 30px;
    }
    .case-card__info {
        padding: 20px;
    }
    .case-card__title {
        font-size: 18px;
        line-height: 24px;
    }
    .case-card__desc {
        font-size: 14px;
        line-height: 20px;
    }
    .cases-pagination {
        gap: 10px;
    }
    .cases-pagination__arrow,
    .cases-pagination__page {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }
    .cases-pagination__pages {
        gap: 8px;
    }
}


/* ===== Careers Page ===== */


.careers-page {
    background: #fff;
}

/* --- Hero --- */
.careers-hero {
    position: relative;
    height: 766px;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}

.careers-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.45) 100%);
    pointer-events: none;
}

.careers-hero__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 160px 60px 0;
    height: 100%;
}

.careers-hero__text {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.careers-hero__footer {
    display: flex;
    justify-content: flex-end;
    padding-bottom: 80px;
}

.careers-hero__breadcrumb {
    display: flex;
    align-items: center;
    gap: 50px;
}

.careers-hero__breadcrumb-home {
    display: flex;
    align-items: center;
    text-decoration: none;
    opacity: 0.85;
    transition: opacity 0.2s;
}

.careers-hero__breadcrumb-home:hover {
    opacity: 1;
}

.careers-hero__breadcrumb-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 22px;
    letter-spacing: -0.54px;
    color: #fff;
}

.careers-hero__breadcrumb-current {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 22px;
    letter-spacing: -0.54px;
    color: #fff;
}

.careers-hero__eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 18px;
    letter-spacing: -0.66px;
    color: #fff;
}

.careers-hero__eyebrow::after {
    content: '';
    display: block;
    width: 120px;
    height: 1px;
    background: rgba(255,255,255,0.4);
}

.careers-hero__title {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 60px;
    line-height: 70px;
    letter-spacing: -1.8px;
    color: #fff;
    margin: 0;
}

.careers-hero__subtitle {
    font-family: 'Pretendard', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 30px;
    letter-spacing: -0.6px;
    color: #fff;
    margin: 0;
}

/* --- Listings Section --- */
.careers-listings {
    position: relative;
    background: #f0f2f7;
    padding: 60px 0 100px;
    overflow: hidden;
}

.careers-right-people {
    position: absolute;
    top: 600px;
    left: -16px;
    display: flex;
    gap: 100px;
    font-family: 'Pretendard', 'Inter', sans-serif;
    font-weight: 700;
    font-size: 300px;
    line-height: normal;
    letter-spacing: -9px;
    color: #f8f8f8;
    white-space: nowrap;
    pointer-events: none;
    z-index: 0;
    user-select: none;
}

/* Folder frame wrapper — 1300px wide, same as Figma */
.careers-listings__frame-wrap {
    position: relative;
    width: 1300px;
    margin: 0 auto;
    /* height driven by content; SVG stretches to fill */
}

/* Folder SVG rendered as a stretchy background layer */
.careers-listings__frame-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
    z-index: 1;
    filter: drop-shadow(0px 4px 12px rgba(0, 0, 0, 0.08));
}

/* Content sits above the SVG */
.careers-listings__inner {
    position: relative;
    z-index: 2;
    padding: 48px 55px 60px;
}

.careers-listings__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 40px;
}

.careers-listings__header-left {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.careers-listings__title {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 44px;
    line-height: 58px;
    letter-spacing: -1.32px;
    color: #181a1e;
    margin: 0;
}

.careers-filter-tabs {
    display: flex;
    align-items: center;
    gap: 20px;
}

.careers-filter-tab {
    display: flex;
    align-items: center;
    gap: 16px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.careers-filter-tab__label {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 28px;
    line-height: 38px;
    letter-spacing: -0.84px;
    color: #181a1e;
}

.careers-filter-tab__count {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ececef;
    border-radius: 100px;
    padding: 6px 20px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 500;
    font-size: 22px;
    line-height: 30px;
    letter-spacing: -0.66px;
    color: #545558;
    height: 42px;
}

.careers-filter-tab__divider {
    width: 1px;
    height: 36px;
    background: #e5e6ed;
    flex-shrink: 0;
}

.careers-listings__arrows {
    display: none;
}

.careers-arrow {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    transition: opacity 0.2s;
}

.careers-arrow:hover {
    opacity: 0.75;
}

.careers-arrow img {
    width: 60px;
    height: 60px;
    display: block;
}

/* --- Job Cards Grid --- */
.careers-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 21px 16px;
    margin-bottom: 40px;
}

.careers-card {
    background: #f5f6f9;
    border-radius: 18px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.careers-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.careers-card__meta {
    display: flex;
    align-items: center;
    gap: 14px;
}

.careers-card__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: 100px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: -0.6px;
    color: #fff;
}

.careers-card__badge--navy {
    background: #1a2e69;
}

.careers-card__badge--orange {
    background: #fc6818;
}

.careers-card__type {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: -0.6px;
    color: #595b5f;
}

.careers-card__share {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.careers-card__share img {
    width: 44px;
    height: 44px;
    display: block;
}

.careers-card__body {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.careers-card__title {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 26px;
    line-height: 36px;
    letter-spacing: -0.78px;
    color: #181a1e;
    margin: 0;
}

.careers-card__date {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: -0.48px;
    color: #595b5f;
}

.careers-card__date img {
    width: 15px;
    height: 16px;
    display: block;
    flex-shrink: 0;
}

/* --- View All Button --- */
.careers-viewall-wrap {
    display: flex;
    justify-content: center;
    padding-top: 20px;
}

.careers-viewall {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 56px;
    border: 1px solid #181a1e;
    border-radius: 100px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 30px;
    letter-spacing: -0.48px;
    color: #181a1e;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}

.careers-viewall:hover {
    background: #181a1e;
    color: #fff;
}

/* --- Talent Values Section --- */
.careers-values {
    position: relative;
    padding: 100px 0 140px;
    background: #fff;
    overflow: hidden;
}

.careers-values .container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 60px;
    position: relative;
    z-index: 2;
}

.careers-values__title {
    font-family: 'Pretendard', sans-serif;
    font-weight: 800;
    font-size: 44px;
    line-height: 54px;
    letter-spacing: -1.32px;
    color: #181a1e;
    text-align: center;
    margin: 0 0 100px;
}

.careers-values__list {
    display: flex;
    flex-direction: column;
    gap: 120px;
}

.careers-value-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.careers-value-item--reverse {
    flex-direction: row-reverse;
}

.careers-value-item__image-wrap {
    flex: 0 0 auto;
    width: 700px;
    height: 500px;
    border-radius: 24px;
    overflow: hidden;
}

.careers-value-item__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.careers-value-item__text {
    flex: 0 0 410px;
    display: flex;
    flex-direction: column;
    gap: 38px;
}

.careers-value-item__heading {
    font-family: 'Pretendard', sans-serif;
    font-weight: 800;
    font-size: 60px;
    line-height: 72px;
    letter-spacing: -1.8px;
    color: #181a1e;
    margin: 0;
    white-space: nowrap;
}

.careers-value-item__divider {
    width: 30px;
    height: 4px;
    background: #d0d3d9;
    flex-shrink: 0;
}

.careers-value-item__body {
    font-family: 'Pretendard', sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 34px;
    letter-spacing: -0.66px;
    color: #181a1e;
    margin: 0;
}

/* --- Careers Footer uses global .footer-bottom / .footer-legal CSS --- */

/* ===========================
   CAREERS PAGE — MOBILE RESPONSIVE
   =========================== */
@media (max-width: 1024px) {
    .careers-hero {
        height: 600px;
    }
    .careers-hero__content {
        padding: 140px 20px 0;
    }
    .careers-hero__title {
        font-size: 44px;
        line-height: 54px;
    }
    .careers-listings__frame-wrap {
        width: 100%;
        max-width: 100%;
    }
    .careers-listings__frame-svg {
        display: none; /* Hide complex background SVG to avoid skewing on variable widths */
    }
    .careers-listings__inner {
        padding: 30px 20px;
        background: #fff;
        border-radius: 20px;
        box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.05);
        margin: 0 20px;
    }
    .careers-value-item__image-wrap {
        width: 50%;
        height: 350px;
    }
    .careers-value-item__text {
        flex: 1;
    }
    .careers-value-item__heading {
        font-size: 40px;
        line-height: 48px;
    }
    .careers-value-item__body {
        font-size: 18px;
        line-height: 28px;
    }
}

@media (max-width: 768px) {
    .careers-hero {
        height: 500px;
    }
    .careers-hero__footer {
        padding-bottom: 40px;
    }
    .careers-hero__title {
        font-size: 32px;
        line-height: 42px;
    }
    .careers-hero__subtitle {
        font-size: 16px;
        line-height: 24px;
    }
    .careers-hero__breadcrumb {
        display: none;
    }
    .careers-listings {
        padding: 40px 0 65px;
    }
    .careers-listings__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        margin-bottom: 30px;
    }
    .careers-listings__header-left {
        gap: 20px;
        width: 100%;
    }
    .careers-listings__title {
        font-size: 28px;
        line-height: 38px;
    }
    .careers-filter-tabs {
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 8px;
        gap: 16px;
        -webkit-overflow-scrolling: touch;
    }
    .careers-filter-tab__label {
        font-size: 18px;
        line-height: 26px;
    }
    .careers-filter-tab__count {
        font-size: 14px;
        height: 30px;
        padding: 4px 12px;
    }
    .careers-filter-tab__divider {
        height: 20px;
    }
    .careers-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    .careers-card {
        padding: 20px;
        gap: 16px;
    }
    .careers-card__badge {
        font-size: 14px;
        padding: 4px 10px;
    }
    .careers-card__type {
        font-size: 14px;
    }
    .careers-card__title {
        font-size: 18px;
        line-height: 24px;
    }
    .careers-card__body {
        gap: 20px;
    }
    .careers-card__share img {
        width: 36px;
        height: 36px;
    }
    .careers-right-people {
        display: none;
    }
    .careers-values {
        padding: 60px 0 80px;
    }
    .careers-values .container {
        padding: 0 20px;
    }
    .careers-values__title {
        font-size: 32px;
        margin-bottom: 50px;
    }
    .careers-values__list {
        gap: 60px;
    }
    .careers-value-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
    .careers-value-item--reverse {
        flex-direction: column;
    }
    .careers-value-item__image-wrap {
        width: 100%;
        height: 300px;
    }
    .careers-value-item__text {
        width: 100%;
        flex: none;
        gap: 16px;
    }
    .careers-value-item__heading {
        font-size: 28px;
        line-height: 36px;
    }
    .careers-value-item__body {
        font-size: 16px;
        line-height: 24px;
    }
}

@media (max-width: 480px) {
    .careers-hero {
        height: 400px;
    }
    .careers-hero__content {
        padding: 100px 20px 0;
    }
    .careers-hero__title {
        font-size: 24px;
        line-height: 32px;
    }
    .careers-hero__subtitle {
        font-size: 14px;
        line-height: 22px;
    }
    .careers-listings__inner {
        margin: 0 10px;
        padding: 24px 15px;
    }
    .careers-grid {
        grid-template-columns: 1fr;
    }
    .careers-value-item__image-wrap {
        height: 200px;
    }
}



/* ===== Careers All Page ===== */

.careers-all-listings {
    background: #fff;
    padding: 90px 0 120px;
}

.careers-all-listings .container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 60px;
}

/* Top bar */
.careers-all-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 50px;
}

.careers-all-count {
    font-size: 22px;
    color: #181a1e;
    font-weight: 500;
    letter-spacing: -0.66px;
    line-height: 31px;
    margin: 0;
}

.careers-all-count strong {
    color: #1a2e69;
    font-weight: 700;
}

.careers-all-search {
    display: flex;
    width: 522px;
    height: 60px;
    border: 1px solid #dddee4;
    border-radius: 100px;
    align-items: center;
    padding: 5px 5px 5px 28px;
    background: #fff;
    box-sizing: border-box;
}

.careers-all-search input {
    flex: 1;
    border: none;
    background: none;
    font-size: 18px;
    color: #84868a;
    font-family: inherit;
    outline: none;
    letter-spacing: -0.54px;
    line-height: 30px;
}

.careers-all-search__btn {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.careers-all-search__btn img {
    width: 50px;
    height: 50px;
}

/* Sort + filter controls */
.careers-all-controls {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-bottom: 50px;
}

.careers-all-sort {
    display: flex;
    gap: 20px;
    align-items: center;
}

.careers-all-sort__option {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 18px;
    color: #181a1e;
    cursor: pointer;
    font-weight: 400;
    letter-spacing: -0.54px;
    line-height: 28px;
}

.careers-all-sort__option img {
    width: 30px;
    height: 30px;
}

/* Filter tabs */
.careers-all-filter {
    display: flex;
    gap: 26px;
    align-items: center;
}

.careers-all-filter__tab {
    font-size: 24px;
    font-weight: 700;
    color: #97999d;
    cursor: pointer;
    line-height: 32px;
    letter-spacing: -0.72px;
}

.careers-all-filter__tab--active {
    color: #181a1e;
}

.careers-all-filter__divider {
    width: 1px;
    height: 26px;
    background: #e5e6ed;
    flex-shrink: 0;
}

/* Pagination */
.careers-all-pagination {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center;
    margin-top: 60px;
}

.pagination-edges {
    display: flex;
    gap: 10px;
    align-items: center;
}

.pagination-edges button {
    width: 40px;
    height: 40px;
    background: #fff;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination-edges button img {
    display: block;
}

.pagination-numbers {
    display: flex;
    gap: 18px;
    align-items: center;
}

.pagination-numbers button {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    font-size: 14px;
    color: #3d3d3d;
    background: #fff;
    border: none;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: -0.42px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination-numbers button.active {
    background: #1e1e1e;
    color: #fff;
}

/* Breadcrumb intermediate link */
.careers-hero__breadcrumb-item a {
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.54px;
}

/* ===== Careers Card Link Wrapper ===== */
.careers-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* ===== Careers Detail Page ===== */

/* Nav Bar */
.careers-detail-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
}

.careers-detail-nav__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
    max-width: 1420px;
    margin: 0 auto;
    padding: 0 60px;
}

.careers-detail-nav__links {
    display: flex;
    align-items: center;
    gap: 30px;
}

.careers-detail-nav__home {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.careers-detail-nav__separator {
    width: 1px;
    height: 80px;
    background: #e3e5e9;
    flex-shrink: 0;
}

.careers-detail-nav__breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
}

.careers-detail-nav__title {
    font-size: 18px;
    font-weight: 600;
    color: #181a1e;
    letter-spacing: -0.54px;
    line-height: 30px;
    white-space: nowrap;
}

.careers-detail-nav__chevron {
    flex-shrink: 0;
    transform: rotate(-90deg);
}

.careers-detail-nav__close {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.careers-detail-nav__line-wrap {
    position: relative;
    height: 2px;
}

.careers-detail-nav__line-bg {
    position: absolute;
    inset: 0;
    background: #e3e5e9;
}

.careers-detail-nav__line-active {
    position: absolute;
    left: 0;
    top: 0;
    height: 2px;
    width: 300px;
    background: #1a2e69;
}

/* Content Area */
.careers-detail-content {
    background: #fff;
    padding: 60px 0 120px;
}

.careers-detail-content .container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 60px;
}

.careers-detail-layout {
    display: flex;
    gap: 56px;
    align-items: flex-start;
}

/* Left Main Column */
.careers-detail-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 50px;
    min-width: 0;
}

/* Title Block */
.careers-detail-title-block {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.careers-detail-title {
    font-size: 36px;
    font-weight: 700;
    color: #181a1e;
    letter-spacing: -1.08px;
    line-height: 46px;
    margin: 0;
}

.careers-detail-meta {
    display: flex;
    gap: 14px;
    align-items: center;
}

.careers-detail-badge {
    background: #1a2e69;
    color: #fff;
    border-radius: 100px;
    padding: 6px 16px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.48px;
    line-height: 22px;
    white-space: nowrap;
}

.careers-detail-date {
    font-size: 18px;
    font-weight: 500;
    color: #595b5f;
    letter-spacing: -0.54px;
    line-height: 28px;
}

.careers-detail-divider {
    border: none;
    height: 1px;
    background: #707176;
    margin: 0;
}

/* Position Subtitle */
.careers-detail-subtitle {
    font-size: 28px;
    font-weight: 700;
    color: #1a2e69;
    letter-spacing: -0.84px;
    line-height: 38px;
    margin: 0;
}

/* Content Sections */
.careers-detail-sections {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.careers-detail-section {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.careers-detail-section__heading {
    display: flex;
    gap: 10px;
    align-items: center;
}

.careers-detail-section__title {
    font-size: 22px;
    font-weight: 700;
    color: #181a1e;
    letter-spacing: -0.66px;
    line-height: 32px;
    margin: 0;
}

.careers-detail-section__box {
    background: #fff;
    border: 1px solid #e3e5e9;
    border-radius: 14px;
    padding: 26px 24px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.careers-detail-bullet {
    display: flex;
    gap: 8px;
    align-items: center;
}

.careers-detail-bullet__dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #181a1e;
    flex-shrink: 0;
}

.careers-detail-bullet__text {
    font-size: 18px;
    color: #181a1e;
    line-height: 28px;
    letter-spacing: -0.54px;
    margin: 0;
    font-weight: 400;
}

/* Apply Button */
.careers-detail-apply-wrap {
    display: flex;
    justify-content: center;
}

.careers-detail-apply-btn {
    background: #093bcd;
    color: #fff;
    border: none;
    border-radius: 10px;
    width: 150px;
    height: 56px;
    font-size: 16px;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: -0.48px;
    cursor: pointer;
}

/* Prev / Next Nav */
.careers-detail-prevnext {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    min-height: 70px;
    padding-top: 10px;
}

.careers-detail-prev,
.careers-detail-next {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.careers-detail-nav-label {
    display: flex;
    gap: 22px;
    align-items: center;
    font-size: 28px;
    font-weight: 700;
    color: #181a1e;
    letter-spacing: -0.84px;
    line-height: 30px;
}

.careers-detail-nav-label--right {
    justify-content: flex-end;
}

.careers-detail-nav-subtitle {
    font-size: 16px;
    color: #b6b6b6;
    letter-spacing: -0.48px;
    margin: 0;
    padding-left: 72px;
}

.careers-detail-nav-subtitle--active {
    color: #1e1e1e;
    padding-left: 0;
    padding-right: 72px;
    text-align: right;
}

/* Right Sidebar */
.careers-detail-sidebar {
    width: 269px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.careers-detail-sidebar__top {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.careers-detail-info-card {
    background: #1a2e69;
    border-radius: 14px 14px 0 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 6px 5px rgba(0,0,0,0.06);
}

.careers-detail-info-row {
    display: flex;
    gap: 27px;
    align-items: center;
    font-size: 16px;
    line-height: 28px;
    letter-spacing: -0.48px;
}

.careers-detail-info-label {
    font-weight: 700;
    color: #8fa8f4;
    width: 54px;
    flex-shrink: 0;
}

.careers-detail-info-value {
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
}

.careers-detail-info-divider {
    height: 1px;
    background: #2f4688;
}

.careers-detail-sidebar-apply {
    background: #093bcd;
    color: #fff;
    border: none;
    border-radius: 0 0 14px 14px;
    padding: 12px 20px;
    width: 100%;
    font-size: 16px;
    font-weight: 700;
    font-family: inherit;
    letter-spacing: -0.48px;
    line-height: 28px;
    cursor: pointer;
    box-shadow: 0 6px 5px rgba(0,0,0,0.06);
}

/* Recommended Jobs */
.careers-detail-recommended {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.careers-detail-recommended__title {
    font-size: 18px;
    font-weight: 700;
    color: #1a2e69;
    letter-spacing: -0.54px;
    line-height: 28px;
    margin: 0;
}

.careers-detail-rec-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.careers-detail-rec-card {
    display: block;
    background: #f5f6f9;
    border-radius: 18px;
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    margin-bottom: 10px;
}

.careers-detail-rec-card:last-child {
    margin-bottom: 0;
}

.careers-detail-rec-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.careers-detail-rec-badge {
    background: #1a2e69;
    color: #fff;
    border-radius: 100px;
    padding: 4px 12px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.48px;
    line-height: 24px;
    white-space: nowrap;
}

.careers-detail-rec-type {
    font-size: 16px;
    font-weight: 700;
    color: #595b5f;
    letter-spacing: -0.48px;
    line-height: 26px;
}

.careers-detail-rec-title {
    font-size: 18px;
    font-weight: 700;
    color: #181a1e;
    line-height: 26px;
    letter-spacing: -0.54px;
    margin: 0;
}

.careers-detail-rec-date-row {
    display: flex;
    gap: 6px;
    align-items: center;
}

.careers-detail-rec-date {
    font-size: 14px;
    color: #595b5f;
    line-height: 20px;
    letter-spacing: -0.42px;
}

/* ==========================================================================
   CONSULTATION PAGE STYLING (MATCHING FIGMA & PREMIUM UI DESIGN)
   ========================================================================== */

.consultation-page {
    background-color: #1a2e69;
    color: #ffffff;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding-top: 140px;
    padding-bottom: 100px;
    position: relative;
}

.consultation-container {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
}

.consultation-header {
    margin-bottom: 80px;
    text-align: center;
    width: 100%;
}

.consultation-title {
    font-family: 'Pretendard', sans-serif;
    font-size: 56px;
    font-weight: 500;
    line-height: 64px;
    letter-spacing: -1.68px;
    color: #ffffff;
    margin: 0;
}

.consultation-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.consultation-card {
    width: 220px;
    height: 250px;
    background-color: #1a2e69;
    border: 1px solid #4b609d;
    border-radius: 24px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-sizing: border-box;
    outline: none;
}

.consultation-card__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    width: 100%;
    height: 100%;
}

.consultation-card__icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.consultation-card__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.consultation-card__label {
    font-family: 'Pretendard', sans-serif;
    font-size: 22px;
    font-weight: 500;
    line-height: 32px;
    letter-spacing: -0.66px;
    color: #ffffff;
    transition: color 0.3s ease;
}

/* Card Hover Effects */
.consultation-card:hover {
    border-color: #ffffff;
    background-color: rgba(255, 255, 255, 0.06);
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

.consultation-card:focus-visible {
    border-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(85, 128, 255, 0.5);
}

.consultation-card:hover .consultation-card__icon {
    transform: scale(1.1);
}

.consultation-card:active {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

/* Modal Overlay & Container */
.consultation-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.consultation-modal.active {
    opacity: 1;
    pointer-events: auto;
}

.consultation-modal__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(10, 26, 53, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.consultation-modal__container {
    position: relative;
    width: 90%;
    max-width: 540px;
    background: #102250;
    border: 1px solid #3c528f;
    border-radius: 28px;
    padding: 40px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    transform: translateY(30px) scale(0.95);
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    max-height: 90vh;
    overflow-y: auto;
    box-sizing: border-box;
    z-index: 10;
}

.consultation-modal.active .consultation-modal__container {
    transform: translateY(0) scale(1);
}

.consultation-modal__close {
    position: absolute;
    top: 24px;
    right: 28px;
    background: none;
    border: none;
    color: #a4b3d6;
    font-size: 32px;
    cursor: pointer;
    transition: color 0.2s ease;
    line-height: 1;
    padding: 0;
}

.consultation-modal__close:hover {
    color: #ffffff;
}

.consultation-modal__title {
    font-family: 'Pretendard', sans-serif;
    font-size: 28px;
    font-weight: 600;
    color: #ffffff;
    margin-top: 0;
    margin-bottom: 30px;
    border-left: 4px solid #5580ff;
    padding-left: 12px;
    line-height: 1.2;
}

/* Consultation Form Elements */
.consultation-form .form-group {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.consultation-form .form-label {
    font-family: 'Pretendard', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #a4b3d6;
}

.consultation-form .form-input, 
.consultation-form .form-textarea {
    background-color: #172a5c;
    border: 1px solid #3c528f;
    border-radius: 10px;
    padding: 12px 16px;
    color: #ffffff;
    font-family: 'Pretendard', sans-serif;
    font-size: 15px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
    width: 100%;
}

.consultation-form .form-input:focus, 
.consultation-form .form-textarea:focus {
    outline: none;
    border-color: #5580ff;
    box-shadow: 0 0 0 3px rgba(85, 128, 255, 0.25);
}

.consultation-form .form-input::placeholder, 
.consultation-form .form-textarea::placeholder {
    color: #5d6f9a;
}

.consultation-form .form-textarea {
    resize: vertical;
    min-height: 120px;
}

.consultation-form .form-group--checkbox {
    margin-top: 15px;
    margin-bottom: 25px;
}

.consultation-form .privacy-consent-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.consultation-form .form-checkbox {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1px solid #3c528f;
    background-color: #172a5c;
    cursor: pointer;
    margin: 0;
}

.consultation-form .form-checkbox-label {
    font-size: 14px;
    color: #ffffff;
    cursor: pointer;
}

.consultation-form .privacy-policy-text {
    font-size: 12px;
    color: #6a7dab;
    line-height: 1.6;
    margin-top: 8px;
    padding: 12px;
    background-color: #132452;
    border-radius: 8px;
    border: 1px solid #23376e;
}

.consultation-form .form-submit-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.consultation-form .form-submit-btn {
    width: 100%;
    padding: 14px;
    font-size: 16px;
    font-weight: 600;
    background-color: #5580ff;
    color: #ffffff;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.consultation-form .form-submit-btn:hover {
    background-color: #3867f2;
}

.consultation-form .form-submit-btn:active {
    transform: scale(0.98);
}

.consultation-form .success-message {
    text-align: center;
    padding: 40px 10px;
}

.consultation-form .success-message p {
    font-size: 18px;
    line-height: 1.6;
    color: #4cd964;
    font-weight: 500;
    margin: 0;
}

/* Responsive Media Queries */
@media (max-width: 1440px) {
    .consultation-grid {
        max-width: 1000px;
    }
}

@media (max-width: 991px) {
    .consultation-page {
        padding-top: 120px;
        padding-bottom: 80px;
    }
    
    .consultation-title {
        font-size: 42px;
        line-height: 50px;
    }
    
    .consultation-header {
        margin-bottom: 50px;
    }
}

@media (max-width: 768px) {
    .consultation-page {
        padding-top: 100px;
        padding-bottom: 60px;
    }
    
    .consultation-title {
        font-size: 32px;
        line-height: 40px;
        letter-spacing: -1px;
    }
    
    .consultation-grid {
        gap: 12px;
        padding: 0 16px;
    }
    
    .consultation-card {
        width: calc(50% - 6px);
        height: 180px;
        border-radius: 18px;
    }
    
    .consultation-card__inner {
        gap: 16px;
    }
    
    .consultation-card__icon {
        width: 40px;
        height: 40px;
    }
    
    .consultation-card__label {
        font-size: 17px;
        line-height: 24px;
    }
    
    .consultation-modal__container {
        padding: 30px 24px;
        border-radius: 20px;
    }
    
    .consultation-modal__title {
        font-size: 22px;
        margin-bottom: 20px;
    }
}

@media (max-width: 480px) {
    .consultation-grid {
        flex-direction: column;
        align-items: stretch;
    }
    
    .consultation-card {
        width: 100%;
        height: 100px;
        border-radius: 16px;
    }
    
    .consultation-card__inner {
        flex-direction: row;
        padding: 0 24px;
        justify-content: flex-start;
        gap: 20px;
    }
    
    .consultation-card__icon {
        width: 36px;
        height: 36px;
    }
    
    .consultation-card__label {
        font-size: 18px;
    }
}

/* ==========================================================================
   Consultation Wizard (Step) Styles
   ========================================================================== */
.consultation-wizard {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 100px); /* Adjust based on header height */
    background-color: #ffffff;
}

.wizard-top-section {
    background-color: #1a2e69;
    padding: 240px 0 180px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.wizard-header-content {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 30px;
}

.wizard-step {
    font-family: 'Pretendard', sans-serif;
    font-weight: 500;
    font-size: 30px;
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: #ffffff;
    margin: 0 0 20px 0;
}

.wizard-question {
    font-family: 'Pretendard', sans-serif;
    font-weight: 600;
    font-size: 56px;
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: #ffffff;
    margin: 0;
}

.wizard-bottom-section {
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    flex: 1;
}

.wizard-progress-bar {
    width: 100%;
    height: 6px;
    background-color: rgba(133, 164, 255, 0.3); /* #85a4ff with 30% opacity */
    position: relative;
}

.wizard-progress-active {
    height: 100%;
    background-color: #65f2ff;
    position: absolute;
    left: 0;
    top: 0;
    transition: width 0.3s ease;
}

.wizard-options-area {
    padding: 60px 0 100px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: none;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    touch-action: pan-x;
}

.wizard-options-area::-webkit-scrollbar {
    display: none;
}

.wizard-options-container {
    max-width: 1500px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    width: max-content;
    min-width: 100%;
    gap: 32px;
}

.wizard-options {
    display: flex;
    gap: 16px;
    align-items: center;
    flex: 0 0 auto;
}

.wizard-option-btn {
    background-color: #ffffff;
    border: 1px solid #cdced6;
    border-radius: 100px;
    padding: 26px 50px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 1;
    letter-spacing: -0.03em;
    color: #181a1e;
    cursor: pointer;
    transition: all 0.2s ease;
}

.wizard-option-btn:hover {
    border-color: #1a2e69;
    background-color: rgba(26, 46, 105, 0.03);
}

.wizard-option-btn.active {
    border-color: #1a2e69;
    background-color: #1a2e69;
    color: #ffffff;
    font-weight: 600;
}

.wizard-actions {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.wizard-next-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 10px;
}

.wizard-next-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.wizard-next-text {
    font-family: 'Pretendard', sans-serif;
    font-weight: 600;
    font-size: 20px;
    letter-spacing: -0.03em;
    color: #666a73;
    transition: color 0.2s ease;
}

.wizard-next-btn:not(:disabled):hover .wizard-next-text {
    color: #1a2e69;
}

.wizard-next-icon {
    display: block;
    flex-shrink: 0;
    width: 28px;
    height: 44px;
    transition: opacity 0.2s ease;
}

.wizard-next-btn:not(:disabled):hover .wizard-next-icon line {
    transition: stroke 0.2s ease;
}

.wizard-next-btn:not(:disabled):hover .wizard-next-icon line:first-child {
    stroke: #1a2e69;
}

/* Responsive adjustments */
@media screen and (max-width: 1024px) {
    .wizard-question { font-size: 42px; }
    .wizard-options-container { align-items: flex-start; gap: 24px; }
}

@media screen and (max-width: 768px) {
    .wizard-top-section { padding: 180px 0 100px; }
    .wizard-question { font-size: 32px; }
    .wizard-step { font-size: 24px; margin-bottom: 15px; }
    .wizard-option-btn { font-size: 18px; padding: 18px 30px; text-align: center; }
    .wizard-options { gap: 12px; }
    .wizard-actions { justify-content: flex-end; }
}

#wizard-completed-steps {
    display: flex;
    flex-direction: column;
    gap: 80px;
    margin-bottom: 80px;
}

.wizard-completed-item {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.wizard-completed-item .wizard-step {
    font-size: 30px;
    color: #ffffff;
    margin: 0;
}

.wizard-completed-question {
    font-family: var(--font-family) !important;
    font-weight: 600 !important;
    font-size: 56px !important;
    line-height: 1.2 !important;
    letter-spacing: -0.03em !important;
    color: #ffffff !important;
    margin: 0 !important;
    padding-left: 30px !important;
}

.wizard-completed-answer {
    background-color: #ffffff !important;
    border-radius: 100px !important;
    padding: 26px 50px !important;
    font-family: var(--font-family) !important;
    font-weight: 400 !important;
    font-size: 24px !important;
    color: #181a1e !important;
    margin-left: 30px !important;
    display: inline-block !important;
    align-self: flex-start !important;
}

.wizard-option-btn {
    white-space: nowrap;
}

/* ============================================================
   CONSULTATION FORM PAGE (/consultation-form/)
   ============================================================ */

.consult-form-page {
    background: #fff;
    min-height: 100vh;
    font-family: 'Pretendard', sans-serif;
}

/* Nav bar */
.consult-form-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    background: #fff;
}

.consult-form-nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
    padding: 0 310px;
}

.consult-form-nav__left {
    display: flex;
    align-items: center;
    gap: 30px;
    height: 100%;
}

.consult-form-nav__logo {
    display: flex;
    align-items: center;
}

.consult-form-nav__logo img {
    display: block;
    width: 20px;
    height: auto;
}

.consult-form-nav__divider {
    width: 1px;
    height: calc(100% - 2px);
    background: #e3e5e9;
}

.consult-form-nav__breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 240px;
    justify-content: space-between;
}

.consult-form-nav__breadcrumb-text {
    font-size: 18px;
    font-weight: 600;
    color: #181a1e;
    letter-spacing: -0.54px;
    white-space: nowrap;
}

.consult-form-nav__close {
    display: flex;
    align-items: center;
}

.consult-form-nav__close img {
    width: 20px;
    height: 20px;
    display: block;
}

.consult-form-nav__progress-track {
    width: 100%;
    height: 2px;
    background: #e3e5e9;
    position: relative;
}

.consult-form-nav__progress-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 300px;
    background: #1a2e69;
}

/* Hero section */
.consult-form-hero {
    background: #1a2e69;
    padding-top: calc(80px + 96px);
    padding-bottom: 96px;
}

.consult-form-hero__inner {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
}

.consult-form-hero__label-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.consult-form-hero__label {
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    letter-spacing: -0.54px;
    line-height: 32px;
}

.consult-form-hero__title {
    font-size: 50px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -1.5px;
    line-height: 62px;
    white-space: nowrap;
}

/* Step cards row */
.consult-form-steps-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.consult-form-step-arrow {
    width: 16px;
    height: auto;
    flex-shrink: 0;
}

.consult-form-step-card {
    width: 220px;
    height: 230px;
    background: #1a2e69;
    border: 1px solid #4b609d;
    border-radius: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 40px 0;
    box-shadow: 0 6px 10px rgba(3, 14, 43, 0.2);
}

.consult-form-step-card__icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.consult-form-step-card__icon img {
    max-width: 52px;
    max-height: 44px;
    display: block;
}

.consult-form-step-card__text {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    text-align: center;
    width: 100%;
}

.consult-form-step-card__title {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.54px;
    line-height: 28px;
}

.consult-form-step-card__desc {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: -0.42px;
    line-height: 20px;
}

/* Main content */
.consult-form-main {
    max-width: 1000px;
    margin: 0 auto;
    padding: 96px 0 120px;
    display: flex;
    flex-direction: column;
    gap: 100px;
}

/* Shared card */
.consult-form-card {
    background: #fff;
    border: 1px solid #ebedf1;
    border-radius: 20px;
    box-shadow: 0 6px 5px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

/* Q&A card rows */
.consult-form-qa-row {
    padding: 34px 30px;
}

.consult-form-qa-row__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.consult-form-qa-row__left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.consult-form-qa-row__icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.consult-form-qa-row__question {
    font-size: 24px;
    font-weight: 700;
    color: #181a1e;
    letter-spacing: -0.72px;
    line-height: 34px;
    white-space: nowrap;
}

.consult-form-qa-row__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.consult-form-qa-row__selected {
    font-size: 16px;
    font-weight: 500;
    color: #3065cc;
    letter-spacing: -0.3px;
    display: none;
}

.consult-form-qa-row__selected--visible {
    display: block;
}

.consult-form-qa-row__chevron {
    width: 11px;
    height: 6px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.consult-form-qa-row__chevron--up {
    transform: rotate(180deg);
}

.consult-form-qa-row__options {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    padding-left: 44px;
}

.consult-form-qa-row__options--hidden {
    display: none !important;
}

.consult-form-qa-row__options--wrap {
    flex-wrap: wrap;
}

.consult-form-qa-separator {
    height: 1px;
    background: #f4f5f9;
    margin: 0 0;
}

/* Option buttons */
.consult-form-option-btn {
    background: #fff;
    border: 1px solid #cdced6;
    border-radius: 100px;
    padding: 14px 30px;
    font-family: 'Pretendard', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #7f8188;
    letter-spacing: -0.48px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.consult-form-option-btn:hover {
    border-color: #1a2e69;
    color: #1a2e69;
}

.consult-form-option-btn--selected {
    background: #181a1e;
    border-color: #181a1e;
    color: #fff;
}

/* Date scroll */
.consult-form-date-scroll {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding-bottom: 4px;
    flex-wrap: nowrap;
    padding-left: 44px;
}

.consult-form-date-scroll::-webkit-scrollbar {
    height: 4px;
}

.consult-form-date-scroll::-webkit-scrollbar-track {
    background: #f4f5f7;
}

.consult-form-date-scroll::-webkit-scrollbar-thumb {
    background: #cdced6;
    border-radius: 2px;
}

.consult-form-date-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    flex-shrink: 0;
    width: 52px;
}

.consult-form-date-cell__num {
    width: 52px;
    height: 52px;
    background: #f4f5f7;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    color: #181a1e;
    letter-spacing: -0.66px;
    transition: background 0.15s ease, color 0.15s ease;
}

.consult-form-date-cell:not(.consult-form-date-cell--disabled):hover .consult-form-date-cell__num {
    background: rgba(26, 46, 105, 0.1);
}

.consult-form-date-cell__num--selected {
    background: #181a1e !important;
    color: #fff !important;
}

.consult-form-date-cell__num--disabled {
    background: #e1e3e8;
    color: #a4a7ad;
}

.consult-form-date-cell__day {
    font-size: 16px;
    font-weight: 400;
    color: #181a1e;
    letter-spacing: -0.48px;
    text-align: center;
    line-height: 1;
}

.consult-form-date-cell__day--today {
    color: #ff4112;
}

.consult-form-date-cell__day--disabled {
    color: #a4a7ad;
}

/* Time slots */
.consult-form-time-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.consult-form-time-label {
    font-size: 16px;
    font-weight: 700;
    color: #181a1e;
    letter-spacing: -0.48px;
    line-height: 20px;
}

.consult-form-time-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.consult-form-time-btn {
    width: 98px;
    background: #fff;
    border: 1px solid #cdced6;
    border-radius: 100px;
    padding: 14px 0;
    font-family: 'Pretendard', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #7f8188;
    letter-spacing: -0.48px;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s ease;
}

.consult-form-time-btn:hover {
    border-color: #1a2e69;
    color: #1a2e69;
}

.consult-form-time-btn--selected {
    background: #181a1e;
    border-color: #181a1e;
    color: #fff;
}

.consult-form-qa-row__options.consult-form-date-scroll {
    padding-left: 44px;
}

.consult-form-qa-row__options--time {
    flex-direction: column;
    gap: 20px;
    padding-left: 44px;
}

/* Info form section */
.consult-form-info-section,
.consult-form-terms-section {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.consult-form-section-title {
    font-size: 28px;
    font-weight: 700;
    color: #181a1e;
    letter-spacing: -0.84px;
    line-height: 38px;
}

.consult-form-info-card,
.consult-form-terms-card {
    border-color: #eaebef;
}

.consult-form-info-row {
    padding: 34px 30px;
}

.consult-form-info-row--last {
    /* no separator after this row */
}

.consult-form-info-row__inner {
    display: flex;
    gap: 20px;
}

.consult-form-info-separator {
    height: 1px;
    background: #f4f5f9;
    margin: 0 30px;
}

.consult-form-field {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 460px;
}

.consult-form-field--full {
    width: 940px;
}

.consult-form-field__label {
    display: flex;
    align-items: center;
    gap: 6px;
}

.consult-form-field__label label {
    font-size: 16px;
    font-weight: 700;
    color: #181a1e;
    letter-spacing: -0.48px;
    line-height: 20px;
}

.consult-form-field__dot {
    width: 6px;
    height: 6px;
}

.consult-form-input {
    width: 460px;
    height: 58px;
    background: #fff;
    border: 1px solid #dfe1e7;
    border-radius: 8px;
    padding: 0 20px;
    font-family: 'Pretendard', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #181a1e;
    letter-spacing: -0.48px;
    box-sizing: border-box;
}

.consult-form-input--full {
    width: 940px;
}

.consult-form-input::placeholder {
    color: #848891;
}

.consult-form-input:focus {
    outline: none;
    border-color: #1a2e69;
}

.consult-form-textarea {
    width: 940px;
    height: 209px;
    background: #fff;
    border: 1px solid #dfe1e7;
    border-radius: 8px;
    padding: 20px;
    font-family: 'Pretendard', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #181a1e;
    letter-spacing: -0.48px;
    resize: vertical;
    box-sizing: border-box;
}

.consult-form-textarea::placeholder {
    color: #848891;
}

.consult-form-textarea:focus {
    outline: none;
    border-color: #1a2e69;
}

/* Terms */
.consult-form-terms-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px;
    cursor: pointer;
}

.consult-form-terms-header__left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.consult-form-terms-header__checkbox {
    width: 22px;
    height: 22px;
    position: relative;
    border: 1.5px solid #c0c2c8;
    border-radius: 4px;
    background: #ffffff;
    cursor: pointer;
    flex-shrink: 0;
}

.consult-form-terms-header__checkbox--checked {
    background: #181a1e;
    border-color: #181a1e;
}

.consult-form-terms-header__checkbox--checked::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 3px;
    width: 5px;
    height: 10px;
    border: 2px solid #ffffff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}

.consult-form-terms-header__label {
    font-size: 18px;
    font-weight: 500;
    color: #181a1e;
    letter-spacing: -0.54px;
    line-height: 24px;
}

.consult-form-terms-separator {
    height: 1px;
    background: #f4f5f9;
    margin: 0 30px;
}

.consult-form-terms-body {
    display: none;
    padding: 30px;
    flex-direction: column;
    gap: 13px;
}

.consult-form-terms-body--visible {
    display: flex;
}

.consult-form-terms-body__heading {
    font-size: 18px;
    font-weight: 700;
    color: #181a1e;
    letter-spacing: -0.54px;
    line-height: 28px;
}

.consult-form-terms-body__block {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.consult-form-terms-body__subtitle {
    font-size: 16px;
    font-weight: 400;
    color: #181a1e;
    letter-spacing: -0.48px;
    line-height: 24px;
}

.consult-form-terms-body__text {
    font-size: 16px;
    font-weight: 400;
    color: #545558;
    letter-spacing: -0.48px;
    line-height: 24px;
}

/* Submit button */
.consult-form-submit {
    align-self: center;
    background: #093bcd;
    color: #fff;
    border: none;
    border-radius: 10px;
    width: 150px;
    height: 56px;
    font-family: 'Pretendard', sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.48px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.consult-form-submit:hover {
    background: #0730a8;
}

/* ===========================
   CONSULTATION FORM — MOBILE RESPONSIVE
   =========================== */
@media (max-width: 1024px) {
    .consult-form-nav__inner {
        padding: 0 40px;
    }
    .consult-form-hero {
        padding-top: calc(80px + 60px);
        padding-bottom: 60px;
    }
    .consult-form-hero__title {
        font-size: 40px;
        line-height: 50px;
    }
    .consult-form-steps-row {
        gap: 8px;
    }
    .consult-form-step-card {
        width: 180px;
        height: 200px;
        padding: 20px 10px;
    }
    .consult-form-step-card__title {
        font-size: 16px;
    }
    .consult-form-step-card__desc {
        font-size: 12px;
        line-height: 18px;
    }
    .consult-form-main {
        max-width: 100%;
        padding: 60px 40px 100px;
    }
    .consult-form-field {
        width: 100%;
    }
    .consult-form-field--full {
        width: 100%;
    }
    .consult-form-input {
        width: 100%;
    }
    .consult-form-input--full {
        width: 100%;
    }
    .consult-form-textarea {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .consult-form-nav__inner {
        padding: 0 20px;
    }
    .consult-form-nav__breadcrumb {
        width: auto;
    }
    .consult-form-nav__breadcrumb-text {
        font-size: 16px;
    }
    .consult-form-hero {
        padding-top: calc(80px + 40px);
        padding-bottom: 40px;
    }
    .consult-form-hero__title {
        font-size: 28px;
        line-height: 36px;
        white-space: normal;
        text-align: center;
    }
    .consult-form-step-arrow {
        display: none; /* Hide step arrows on smaller screens */
    }
    .consult-form-steps-row {
        flex-direction: column;
        width: 100%;
        gap: 16px;
        padding: 0 20px;
    }
    .consult-form-step-card {
        width: 100%;
        height: auto;
        padding: 24px;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: 20px;
        border-radius: 20px;
    }
    .consult-form-step-card__text {
        align-items: flex-start;
        text-align: left;
    }
    .consult-form-main {
        padding: 40px 20px 80px;
        gap: 50px;
    }
    .consult-form-qa-row {
        padding: 24px 20px;
    }
    .consult-form-qa-row__question {
        font-size: 18px;
        line-height: 26px;
        white-space: normal; /* Allow wrapping */
    }
    .consult-form-qa-row__options {
        padding-left: 0;
        margin-top: 15px;
        flex-wrap: wrap;
    }
    .consult-form-option-btn {
        padding: 10px 20px;
        font-size: 14px;
    }
    .consult-form-date-scroll {
        padding-left: 0;
        margin-top: 15px;
    }
    .consult-form-qa-row__options--time {
        padding-left: 0;
        margin-top: 15px;
    }
    .consult-form-time-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
    }
    .consult-form-time-btn {
        width: 100%;
        padding: 10px 0;
        font-size: 14px;
    }
    .consult-form-section-title {
        font-size: 22px;
        line-height: 30px;
    }
    .consult-form-info-row {
        padding: 24px 20px;
    }
    .consult-form-info-row__inner {
        flex-direction: column;
        gap: 20px;
    }
    .consult-form-info-separator {
        margin: 0 20px;
    }
    .consult-form-terms-header {
        padding: 20px;
    }
    .consult-form-terms-body {
        padding: 20px;
    }
    .consult-form-terms-body__heading {
        font-size: 16px;
    }
    .consult-form-terms-body__subtitle,
    .consult-form-terms-body__text {
        font-size: 14px;
        line-height: 22px;
    }
}

@media (max-width: 480px) {
    .consult-form-time-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .consult-form-date-scroll {
        gap: 12px;
    }
}