/* Shared orgsite section navigation. Keep the menu above the overlapping hero.
 * Legacy themes use important rules, so this opt-in component owns its layout and colors. */
:root .sub-nav-container.orgsite-subnav {
    position: relative !important; z-index: 20 !important; margin: -30px auto 50px !important; padding: 0 !important;
}
:root .sub-nav-container.orgsite-subnav .sub-nav {
    position: relative !important; width: calc(100% - 48px) !important; max-width: 1060px !important; min-width: 0 !important;
    margin: 0 auto !important; padding: 0 !important; background: #fff !important; border: 0 !important; border-radius: 8px !important;
    box-shadow: 0 5px 15px rgb(0 0 0 / 10%) !important; overflow: hidden !important;
}
:root .sub-nav-container.orgsite-subnav .sub-nav > ul {
    display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: stretch !important;
    width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; list-style: none !important; gap: 0 !important;
}
:root .sub-nav-container.orgsite-subnav .sub-nav > ul > li {
    position: relative !important; display: flex !important; flex-direction: column !important; flex: 1 1 auto !important;
    min-width: 0 !important; width: auto !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; text-align: center !important;
    background: transparent !important; border: 0 !important;
}
:root .sub-nav-container.orgsite-subnav .sub-nav > ul > li::after { display: none !important; }
:root .sub-nav-container.orgsite-subnav .sub-nav > ul > li > a {
    display: flex !important; flex: 1 !important; align-items: center !important; justify-content: center !important;
    min-height: 56px !important; height: auto !important; margin: 0 !important; padding: 14px 18px !important;
    color: var(--text-main, #333) !important; background: transparent !important; border: 0 !important; border-radius: 0 !important;
    font-family: inherit !important; font-size: 16px !important; font-weight: 500 !important; line-height: 1.5 !important;
    white-space: normal !important; word-break: keep-all !important; overflow-wrap: anywhere !important;
    text-decoration: none !important; text-align: center !important; box-shadow: none !important;
    transition: background-color .15s, color .15s !important; touch-action: manipulation !important;
}
:root .sub-nav-container.orgsite-subnav .sub-nav > ul > li.active > a,
:root .sub-nav-container.orgsite-subnav .sub-nav > ul > li > a[aria-current="page"] {
    background: var(--main-color, #ff7f2a) !important; color: var(--orgsite-subnav-active-text, #fff) !important; font-weight: 700 !important;
}
:root .sub-nav-container.orgsite-subnav .sub-nav > ul > li:not(.active) > a:hover {
    background: var(--sub-color, #d65f16) !important; color: #fff !important;
}
:root .sub-nav-container.orgsite-subnav .sub-nav a:focus-visible {
    outline: 3px solid var(--text-main, #222) !important; outline-offset: -4px !important;
}
/* Nested section links remain available with a pointer or keyboard on desktop. */
:root .sub-nav-container.orgsite-subnav .sub-nav:has(.depth-3) { overflow: visible !important; }
:root .sub-nav-container.orgsite-subnav .sub-nav li.has-depth > .depth-3 {
    display: none !important; opacity: 1 !important; visibility: visible !important; transform: none !important; pointer-events: auto !important; position: absolute !important; z-index: 2 !important; top: 100% !important; left: 0 !important;
    width: max-content !important; min-width: 100% !important; max-width: min(360px, calc(100vw - 24px)) !important;
    margin: 0 !important; padding: 8px !important; list-style: none !important; background: #fff !important;
    border: 1px solid #eee !important; border-radius: 0 0 8px 8px !important; box-shadow: 0 5px 15px rgb(0 0 0 / 10%) !important;
}
:root .sub-nav-container.orgsite-subnav .sub-nav .has-depth:hover > .depth-3,
:root .sub-nav-container.orgsite-subnav .sub-nav .has-depth:focus-within > .depth-3 { display: block !important; }
:root .sub-nav-container.orgsite-subnav .sub-nav .depth-3 > li {
    display: block !important; position: relative !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important;
}
:root .sub-nav-container.orgsite-subnav .sub-nav .depth-3 > li::after { display: none !important; }
:root .sub-nav-container.orgsite-subnav .sub-nav .depth-3 a {
    display: flex !important; align-items: center !important; justify-content: center !important; min-height: 44px !important;
    padding: 10px 12px !important; font-size: 14px !important; line-height: 1.5 !important; white-space: normal !important;
    word-break: keep-all !important; overflow-wrap: anywhere !important; text-decoration: none !important;
}
@media (max-width: 768px) {
    :root .sub-nav-container.orgsite-subnav { margin-bottom: 36px !important; }
    :root .sub-nav-container.orgsite-subnav .sub-nav { width: calc(100% - 24px) !important; overflow-x: hidden !important; }
    :root .sub-nav-container.orgsite-subnav .sub-nav > ul { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-auto-columns: auto !important; }
    :root .sub-nav-container.orgsite-subnav .sub-nav > ul > li > a { min-height: 52px !important; padding: 12px 10px !important; font-size: 14px !important; }
    :root .sub-nav-container.orgsite-subnav .sub-nav li.has-depth > .depth-3 {
        display: block !important; opacity: 1 !important; visibility: visible !important; transform: none !important; position: static !important; width: 100% !important; max-width: none !important; min-width: 0 !important;
        margin: 0 !important; padding: 0 !important; border: 0 !important; border-top: 1px solid #eee !important; border-radius: 0 !important; box-shadow: none !important;
    }
    :root .sub-nav-container.orgsite-subnav .sub-nav .has-depth > a { flex: 0 0 auto !important; }
    :root .sub-nav-container.orgsite-subnav .sub-nav .depth-3 a { font-size: 13px !important; }
    :root .sub-nav-container.orgsite-subnav .sub-nav li.has-depth > .depth-3::before { display: none !important; }
}
@media (max-width: 480px) {
    :root .sub-nav-container.orgsite-subnav .sub-nav > ul { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* NODL's yellow brand needs the same dark selected text as its existing menus. */
:root .nodl-page .sub-nav-container.orgsite-subnav { --orgsite-subnav-active-text: #242424 !important; }
:root .nodl-page .sub-nav-container.orgsite-subnav .sub-nav > ul > li:not(.active) > a:hover {
    background: var(--main-color, #ffde00) !important; color: #242424 !important;
}

/* Leave breathing room between the section tabs and their bottom rule. */
:root .sub-nav-container.orgsite-subnav {
    padding-bottom: 16px !important;
}
@media (max-width: 640px) {
    :root .sub-nav-container.orgsite-subnav {
        padding-bottom: 12px !important;
    }
}

/* Public breadcrumbs: a visible home icon with the existing accessible link name. */
:root nav.breadcrumb[aria-label="현재 위치"] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    color: #50625c;
    font-size: .8125rem;
}
:root nav.breadcrumb[aria-label="현재 위치"] > a { color: inherit; }
:root nav.breadcrumb[aria-label="현재 위치"] > a[aria-label="홈"] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    visibility: visible !important;
    min-width: 16px;
    min-height: 24px;
    font-size: 0 !important;
}
:root nav.breadcrumb[aria-label="현재 위치"] > a[aria-label="홈"]::before {
    content: "";
    width: 16px;
    height: 16px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 10 9-7 9 7v10H3zM9 20v-7h6v7'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Shared public-page widths for the Freewel and JGcil development sites. */
:root :is(.sub-visual .breadcrumb-container, .sub-nav-container.orgsite-subnav .sub-nav) {
    box-sizing: border-box;
    width: min(calc(100% - 44px), 1060px) !important;
    max-width: 1060px;
}
:root .sub-visual .breadcrumb-container { padding-inline: 0; }
:root .sub-visual .page-title {
    box-sizing: border-box;
    width: min(calc(100% - 44px), 1060px);
    text-align: left;
}
:root body:has(.sub-visual) .board-wrapper { padding-inline: 0; }
:root body:has(.sub-visual) :is(.content-page-wrap, .board-container) {
    box-sizing: border-box;
    width: min(calc(100% - 44px), 1000px);
    max-width: 1000px;
    margin-inline: auto;
    padding-inline: 0;
}
@media (min-width: 1101px) {
    :root body:has(.sub-visual) .header .main-nav {
        --public-title-clearance: calc(max(22px, (100vw - 1060px) / 2) + 275px);
        min-width: 0;
        justify-content: flex-end;
    }
    :root body:has(.sub-visual) .header :is(.main-menu, .all-submenu) {
        width: min(100%, 1000px, calc(100vw - var(--public-title-clearance) - 195px));
    }
    :root body:has(.sub-visual) .header .main-menu { min-width: 0; }
    :root body:has(.sub-visual) .header .main-menu > li > a {
        padding-inline: .4rem;
        white-space: nowrap;
    }
    :root body:has(.sub-visual) .header .all-submenu {
        left: auto;
        right: 0;
        transform: none;
    }
}

@media (min-width: 1101px) {
    :root body:has(.sub-visual) .header :is(.main-menu, .all-submenu) {
        width: min(100%, 1000px, calc(100vw - var(--public-title-clearance) - 300px));
    }
    :root .sub-visual .page-title {
        padding-inline-end: min(70%, calc(min(calc(100vw - 44px), 1060px) - 300px));
        word-break: keep-all;
        overflow-wrap: anywhere;
    }
    :root .sub-visual .breadcrumb { max-width: 300px; }
}

/* Public button and selected-tab contrast on the orange theme. */
:root :is(button.login-btn, .gallery-search-wrapper button.search-button, a.data-card-view-btn,
    .board-pagination a.active, .board-pagination .active > a,
    .data-pagination a.active, .data-pagination .active > a,
    .gallery-pagination-wrapper .active > a, .gallery-pagination-wrapper .active > span),
:root .sub-nav-container.orgsite-subnav .sub-nav > ul > li.active > a {
    color: #24170e !important;
    background-color: #ff9a53 !important;
}
:root :is(button.login-btn, .gallery-search-wrapper button.search-button, a.data-card-view-btn):hover,
:root :is(button.login-btn, .gallery-search-wrapper button.search-button, a.data-card-view-btn):focus-visible {
    background-color: #ffab73 !important;
}
:root :is(button.login-btn, .gallery-search-wrapper button.search-button, a.data-card-view-btn):focus-visible {
    outline: 2px solid #63300d;
    outline-offset: 3px;
}

/* orgsite-header-fit */
@media (min-width:1101px) {
    :root body .header .main-nav { flex: 1 1 auto; min-width: 0; }
    :root body .header .main-menu {
        width: 100%;
        min-width: 0;
        gap: 4px;
        justify-content: flex-end;
    }
    :root body .header .main-menu > li { flex: 0 1 auto; min-width: max-content; }
    :root body .header .main-menu > li > a {
        width: auto;
        box-sizing: border-box;
        padding-inline: clamp(8px, 1vw, 16px);
        white-space: nowrap;
        font-size: 16px;
    }
    :root body .header .all-submenu { width: min(100%, 1000px); right: 0; left: auto; transform: none; }
}
@media (min-width:1101px) and (max-width:1280px) {
    :root body .header .main-menu > li > a { padding-inline: 7px; font-size: 14px; }
}


/* Shared desktop navigation: the menu owns the available width, account controls never collapse. */
@media(min-width:1101px){
:root body .header.header .header-container{gap:22px}
:root body .header.header .logo{flex:0 0 auto;max-width:180px}
:root body .header.header .main-nav{flex:1 1 auto;min-width:0;justify-content:center;position:relative}
:root body .header.header .main-menu{width:100%!important;max-width:none;gap:6px;display:flex;justify-content:space-between}
:root body .header.header .main-menu>li{flex:1 1 auto;min-width:0;justify-content:center}
:root body .header.header .main-menu>li>a{width:100%;padding-inline:10px;white-space:nowrap;font-size:16px;justify-content:center}
:root body .header.header .user-menu{flex:0 0 auto;margin-left:0}
:root body .header.header .login-status{display:flex;align-items:center;gap:10px}
:root body .header.header .menu-toggle{flex:0 0 32px;margin-left:0}
:root body .header.header .all-submenu{width:100%!important;right:0;left:auto;transform:none}
}
@media(min-width:1101px) and (max-width:1280px){:root body .header.header .header-container{gap:12px}:root body .header.header .main-menu>li>a{font-size:14px;padding-inline:6px}:root body .header.header .logo{max-width:135px}}
@media(max-width:1100px){:root body .header.header .login-status{display:flex;gap:8px;align-items:center}}
@media(min-width:1101px){
:root body .header.header .header-container{max-width:1600px;width:calc(100% - 48px);padding-inline:0}
:root body .header.header .main-menu{justify-content:space-evenly}
:root body .header.header .all-submenu{position:fixed;top:80px;left:50%;right:auto;transform:translateX(-50%);width:min(1180px,calc(100vw - 64px))!important;max-width:none}
:root body .header.header .all-submenu-container{width:100%;max-width:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));padding:24px 12px;gap:0}
:root body .header.header .submenu-group{width:auto;min-width:0;padding:0 12px}
:root body .header.header .submenu-group a{word-break:keep-all;overflow-wrap:normal;line-height:1.65;padding:10px 2px}
}


/* Centre the page title inside both hero and plain subpage headers. */
:root body .sub-visual .page-title{width:100%!important;text-align:center!important;left:0!important;right:0!important;margin-left:auto!important;margin-right:auto!important;transform:none!important}
@media(max-width:1100px){:root body .sub-visual .breadcrumb-wrap{left:0!important;right:0!important;box-sizing:border-box}}

/* JGCIL: all public subpages use the menu-managed hero photo (2026-11-14). */
:root body:has(.header.header) .sub-visual.sub-visual{position:relative!important;height:450px!important;min-height:450px!important;width:100%!important;margin:0!important;padding:0!important;border:0!important;overflow:visible!important;background:#425459!important}
:root body:has(.header.header) .sub-visual.sub-visual .sub-visual-img{display:block!important;position:absolute!important;inset:0!important;width:100%!important;height:100%!important;overflow:hidden}
:root body:has(.header.header) .sub-visual.sub-visual .sub-visual-img img{display:block;width:100%!important;height:100%!important;object-fit:cover;object-position:center}
:root body:has(.header.header) .sub-visual.sub-visual .sub-visual-img:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.28));pointer-events:none}
:root body:has(.header.header) .sub-visual.sub-visual .breadcrumb-wrap{position:relative!important;inset:auto!important;transform:none!important;width:calc(100% - 40px)!important;max-width:1060px!important;height:100%!important;margin:0 auto!important;padding:0!important;background:none!important;z-index:1}
:root body:has(.header.header) .sub-visual.sub-visual .breadcrumb-container{position:absolute!important;left:0!important;top:24px!important;width:100%!important;max-width:none!important;margin:0!important;padding:0!important}
:root body:has(.header.header) .sub-visual.sub-visual .breadcrumb{display:inline-flex!important;align-items:center;gap:8px;max-width:100%!important;flex-wrap:wrap;padding:8px 14px!important;border-radius:20px!important;background:rgba(0,0,0,.48)!important;color:white!important;font-size:13px!important}
:root body:has(.header.header) .sub-visual.sub-visual .breadcrumb :is(a,span,svg){color:white!important}
:root body:has(.header.header) .sub-visual.sub-visual .page-title{position:absolute!important;left:0!important;right:0!important;top:50%!important;bottom:auto!important;width:100%!important;max-width:none!important;margin:0!important;padding:0 16px!important;box-sizing:border-box;transform:translateY(-50%)!important;text-align:center!important;color:white!important;font-size:40px!important;line-height:1.3!important;text-shadow:0 2px 10px rgba(0,0,0,.55)!important;opacity:1!important;word-break:keep-all}
:root body:has(.header.header) .sub-visual.sub-visual .sub-visual-credit{display:block!important;position:absolute;right:18px;bottom:40px;z-index:2;background:rgba(0,0,0,.55);color:white;padding:5px 8px;font-size:11px;border-radius:3px}
:root body:has(.header.header) .sub-nav-container.orgsite-subnav{position:relative!important;top:auto!important;left:auto!important;right:auto!important;transform:none!important;width:calc(100% - 40px)!important;max-width:1060px!important;height:auto!important;margin:-30px auto 36px!important;padding:0!important;z-index:3}
:root body:has(.header.header) .sub-nav-container.orgsite-subnav .sub-nav{width:100%!important;margin:0!important;max-width:none!important}
@media(max-width:700px){:root body:has(.header.header) .sub-visual.sub-visual{height:260px!important;min-height:260px!important}:root body:has(.header.header) .sub-visual.sub-visual .page-title{font-size:28px!important}:root body:has(.header.header) .sub-visual.sub-visual .breadcrumb-container{top:16px!important}:root body:has(.header.header) .sub-visual.sub-visual .breadcrumb{font-size:11px!important;gap:6px;padding:7px 10px!important}:root body:has(.header.header) .sub-visual.sub-visual .sub-visual-credit{right:14px;bottom:28px}:root body:has(.header.header) .sub-nav-container.orgsite-subnav{margin:-18px auto 28px!important}}
@media(max-width:700px){:root body .pagination{max-width:100%;flex-wrap:wrap;justify-content:center;gap:5px}:root body .pagination .page-item{margin:0}}