@import url('/css/design-system.css');
#navbar {background:var(--up-canvas)!important;border-bottom:1px solid var(--up-line)!important;z-index:1050!important;top:0!important;transition:none!important;font-family:var(--up-font-body);color:var(--up-ink)}
#navbar>.container-fluid {max-width:1280px!important;padding:14px 28px!important;min-height:68px}
#navbar .upskill-brand {display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--up-ink);flex-shrink:0}
#navbar .upskill-brand img {width:28px;height:28px;object-fit:contain;border-radius:7px}
#navbar .upskill-brand>span {font-size:23px;line-height:1;font-weight:850;letter-spacing:-.055em}
#navbar #user-status {gap:8px!important}
#navbar .nav-login,#navbar .nav-signup,#navbar .nav-mypage {display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:10px 15px;border-radius:11px;font-size:13px;font-weight:600;line-height:1;text-decoration:none;transition:background .15s,color .15s;color:var(--up-text)}
#navbar .nav-login:hover,#navbar .nav-mypage:hover {background:var(--up-field);color:var(--up-ink)}
#navbar .nav-signup {background:var(--up-brand);color:#fff;padding-inline:18px}
#navbar .nav-signup:hover {background:var(--up-brand-hover)}
#navbar .language-selector {position:relative;margin-right:8px}
#navbar .language-btn {display:flex;align-items:center;justify-content:center;gap:7px;min-height:40px;background:var(--up-field);border:1px solid transparent;color:var(--up-text);border-radius:11px;padding:8px 12px;font-size:13px;font-weight:500;line-height:1;font-family:inherit;cursor:pointer}
#navbar .language-btn:hover,#navbar .language-btn[aria-expanded='true'] {background:var(--up-brand-soft);color:var(--up-brand)}
#navbar .language-btn i {font-size:10px;margin-left:2px;transition:transform .15s}
#navbar .language-btn[aria-expanded='true'] i {transform:rotate(180deg)}
#navbar #current-lang-flag {font-size:16px;line-height:1}
#navbar .language-dropdown {display:none;position:absolute;right:0;top:calc(100% + 10px);width:206px;max-width:calc(100vw - 32px);padding:8px;background:#fff;border:1px solid var(--up-line);border-radius:16px;box-shadow:0 12px 40px #191f2812;z-index:1;white-space:nowrap}
#navbar .language-dropdown.show {display:block}
#navbar .language-menu-title {margin:8px 10px 10px;font-size:11px;font-weight:600;color:var(--up-muted);letter-spacing:.05em}
#navbar .language-option {display:flex;align-items:center;gap:10px;min-height:44px;width:100%;text-align:left;border:0;background:transparent;border-radius:9px;padding:10px;font-size:14px;font-weight:500;color:var(--up-text);font-family:inherit;cursor:pointer}
#navbar .language-option:hover {background:var(--up-field)}
#navbar .language-option.active {background:var(--up-brand-soft);color:var(--up-brand);font-weight:600}
#navbar .language-option .flag {font-size:18px}
#navbar .language-check {margin-left:auto;font-size:12px;visibility:hidden}
#navbar .language-option.active .language-check {visibility:visible}
#bottom-nav {position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--up-line);box-shadow:none;z-index:1030;padding:6px 20px max(6px,env(safe-area-inset-bottom));font-family:var(--up-font-body)}
#bottom-nav .nav-container {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));max-width:1000px;margin:0 auto;gap:8px;align-items:center}
#bottom-nav .nav-item {display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;min-height:54px;padding:3px 0;gap:2px;text-decoration:none;border-radius:12px;color:var(--up-muted);transition:color .15s,background .15s}
#bottom-nav .nav-item:hover {color:var(--up-brand);background:#fff8fa}
#bottom-nav .nav-icon {display:flex;align-items:center;justify-content:center;width:44px;height:29px;border-radius:10px}
#bottom-nav .nav-icon svg {width:22px;height:22px}
#bottom-nav .nav-item>span:last-child {font-size:11px;font-weight:500;line-height:1.4;white-space:nowrap}
#bottom-nav .nav-item.active {color:var(--up-brand)}
#bottom-nav .nav-item.active .nav-icon {background:var(--up-brand-soft)}
#bottom-nav .nav-item.active>span:last-child {font-weight:700}
#navbar a:focus-visible,#navbar button:focus-visible,#bottom-nav a:focus-visible {outline:2px solid var(--up-brand);outline-offset:3px}
@media(max-width:600px){#navbar>.container-fluid {padding:12px 16px!important;min-height:62px}#navbar .upskill-brand {gap:6px}#navbar .upskill-brand>span {font-size:19px}#navbar .upskill-brand img {width:25px;height:25px}#navbar #user-status {gap:3px!important}#navbar .language-selector {margin-right:3px}#navbar .language-btn {min-height:36px;padding:8px;gap:5px;font-size:11px}#navbar .language-btn i {font-size:8px}#navbar #current-lang-flag {font-size:14px}#navbar .nav-login,#navbar .nav-signup,#navbar .nav-mypage {min-height:36px;font-size:11px;padding:8px}#navbar .language-dropdown {width:190px}#bottom-nav {padding-inline:8px}#bottom-nav .nav-container {gap:0}#bottom-nav .nav-item {min-height:52px}#bottom-nav .nav-item>span:last-child {font-size:10px}}
@media(max-width:359px){#navbar .upskill-brand>span {font-size:17px}#navbar>.container-fluid {padding-inline:12px!important}#navbar #current-lang-flag {display:none}#navbar .nav-signup {padding-inline:7px}}
@media(prefers-reduced-motion:reduce){#navbar *,#bottom-nav * {transition:none!important}}
#navbar .nav-search {display:flex;align-items:center;gap:10px;width:min(36vw,400px);margin:0 24px;background:var(--up-field);border-radius:24px;padding:10px 16px}
#navbar .nav-search svg {width:20px;height:20px;fill:none;stroke:var(--up-muted);stroke-width:1.7;flex-shrink:0}
#navbar .nav-search input {width:100%;border:0;outline:0;background:transparent;font-family:var(--up-font-body);font-size:14px;color:var(--up-ink)}
#navbar .nav-search:focus-within {outline:2px solid var(--up-brand-soft)}
#navbar .desktop-gnb {display:flex;align-items:center;gap:26px;max-width:1224px;width:100%;margin:0 auto;padding:0 0 14px}
#navbar .nav-categories {position:relative;flex-shrink:0}
#navbar .nav-categories summary {list-style:none;cursor:pointer;display:flex;gap:12px;align-items:center;background:var(--up-ink);color:white;border-radius:8px;padding:11px 23px;font-size:14px;font-weight:600}
#navbar .nav-categories summary::-webkit-details-marker {display:none}
#navbar .nav-categories[open] summary {background:var(--up-brand)}
#navbar .category-panel {position:absolute;top:calc(100% + 14px);left:0;width:520px;max-width:calc(100vw - 32px);padding:24px;background:white;border:1px solid var(--up-line);border-radius:16px;box-shadow:0 12px 32px #191f2814}
#navbar .category-panel p {font-size:13px;color:var(--up-muted);margin:0 0 16px}
#navbar .category-grid {display:grid;grid-template-columns:1fr 1fr;gap:6px}
#navbar .category-grid a {padding:13px;border-radius:8px;text-decoration:none;color:var(--up-ink);font-size:14px;font-weight:600;display:flex;justify-content:space-between}
#navbar .category-grid a span {color:var(--up-brand)}
#navbar .category-grid a:hover {background:var(--up-brand-soft);color:var(--up-brand)}
#navbar .gnb-links {display:flex;gap:28px;align-items:center;overflow:auto;white-space:nowrap}
#navbar .gnb-links a {font-size:14px;font-weight:600;color:var(--up-ink);text-decoration:none;padding:9px 0}
#navbar .gnb-links a:hover {color:var(--up-brand)}
@media(max-width:1280px){#navbar .desktop-gnb {padding-inline:28px}}
@media(max-width:900px){#navbar>.container-fluid {padding-bottom:8px!important}#navbar .nav-search {width:100%;order:3;margin:10px 0 0}#navbar>.container-fluid>.d-flex {flex-wrap:wrap}#navbar .desktop-gnb {gap:16px;padding:0 16px 10px}#navbar .gnb-links {gap:20px}#navbar .gnb-links a {font-size:12px}#navbar .nav-categories summary {padding:9px 12px;font-size:12px;gap:7px}}
#navbar .gnb-links {scrollbar-width:none}
#navbar .gnb-links::-webkit-scrollbar {display:none}
/* Compact header: shared design-guide typography and spacing. */
#navbar>.container-fluid {max-width:1160px!important;min-height:54px;padding:8px 24px!important}
#navbar .upskill-brand img {width:25px;height:25px}
#navbar .upskill-brand>span {font-size:21px}
#navbar .nav-search {padding:8px 14px;width:min(34vw,360px)}
#navbar .nav-search input {font-size:13px}
#navbar .nav-login,#navbar .nav-signup,#navbar .nav-mypage {min-height:34px;padding:8px 12px;font-size:12px;border-radius:10px}
#navbar .language-btn {min-height:34px;padding:7px 10px;font-size:12px;border-radius:10px}
#navbar .desktop-gnb {max-width:1160px;padding:0 24px 8px;gap:24px}
#navbar .nav-categories summary {padding:8px 18px;font-size:13px;border-radius:8px}
#navbar .gnb-links {gap:24px}
#navbar .gnb-links a {font-size:13px;padding:7px 0}
@media(max-width:900px){#navbar>.container-fluid {padding:8px 16px!important}#navbar .nav-search {width:100%;margin-top:8px;padding:7px 12px}#navbar .desktop-gnb {padding:0 16px 8px;gap:14px}#navbar .nav-categories summary {padding:8px 10px;font-size:12px}#navbar .gnb-links a {font-size:12px}#navbar .gnb-links {gap:18px}}
#navbar .nav-categories summary,#navbar .nav-categories[open] summary {background:transparent;color:var(--up-text);padding-inline:0;border-radius:0}
#navbar .nav-categories summary:hover,#navbar .nav-categories[open] summary {color:var(--up-brand)}

/* Icon-only language selector. */
#navbar .language-btn {width:36px;height:36px;min-height:36px;padding:7px;border-radius:50%;background:transparent}
#navbar .language-globe {display:block;flex:none}

/* Brand mark sizing (motion: brand-mark.css) */
#navbar .upskill-brand .brand-mark {width:25px;height:25px}
@media(max-width:600px){#navbar .upskill-brand .brand-mark {width:24px;height:24px}}
/* Keep the shared header attached to the viewport while preserving document flow.
   overflow-x:hidden on body creates a scrolling ancestor that breaks sticky. */
body:has(> #navbar) {overflow-x:clip!important;overflow-y:visible!important}
#navbar {position:sticky!important;top:0!important;align-self:flex-start;width:100%}