/* LS Nav: one widget, desktop horizontal menu with dropdown cards + mobile card panel (option A). Design-system vars with fallbacks. */
.lsn { --lsn-ink: var(--color-gray-900, #1E1E1E); --lsn-mute: var(--color-gray-700, #565656); --lsn-faint: var(--color-gray-400, #9F9F9F); --lsn-line: var(--color-gray-200, #EAEAEA); --lsn-soft: var(--color-gray-100, #F7F7F7); --lsn-mint: var(--color-brand-300, #5BCCC7); --lsn-deep: var(--color-brand-700, #137A79); --lsn-bg: var(--color-white, #FFFFFF);
	font-family: var(--font-main, "Noto Sans KR"), sans-serif; display: flex; align-items: center; }
.lsn ul { list-style: none; margin: 0; padding: 0; }
.lsn a { text-decoration: none; }
.lsn .lsn-empty { padding: 8px 12px; border: 1px dashed var(--color-gray-300, #C7C7C7); border-radius: 8px; font-size: 13px; color: var(--color-gray-700, #565656); }

/* desktop */
.lsn .lsn-gnb { display: flex; align-items: center; gap: 4px; }
.lsn .lsn-top { position: relative; }
.lsn .lsn-top-link { position: relative; display: flex; align-items: center; gap: 6px; height: 64px; padding: 0 16px; font-size: var(--text-base, 15px); font-weight: 600; letter-spacing: -0.3px; color: var(--lsn-ink); white-space: nowrap; transition: color .2s; }
.lsn .lsn-top-link::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 14px; height: 2px; border-radius: 2px; background: var(--lsn-mint); transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.lsn .lsn-top.is-open > .lsn-top-link, .lsn .lsn-top-link:hover, .lsn .lsn-top.is-current > .lsn-top-link { color: var(--lsn-deep); }
.lsn .lsn-top.is-open > .lsn-top-link::after, .lsn .lsn-top-link:hover::after, .lsn .lsn-top.is-current > .lsn-top-link::after { transform: scaleX(1); }
.lsn .lsn-chev { width: 7px; height: 7px; border-right: 1.6px solid var(--lsn-faint); border-bottom: 1.6px solid var(--lsn-faint); transform: rotate(45deg) translateY(-2px); transition: transform .25s, border-color .25s; flex: none; }
.lsn .lsn-top.is-open > .lsn-top-link .lsn-chev { transform: rotate(225deg) translateY(-2px); border-color: var(--lsn-deep); }
.lsn .lsn-dd { position: absolute; top: calc(100% + 10px); left: 0; min-width: 220px; background: var(--lsn-bg); border-radius: var(--radius-md, 16px); box-shadow: 0 16px 40px rgba(30,30,30,.16); padding: 10px; z-index: 1000;
	transform-origin: top left; transform: translateY(-6px) scaleY(.96); opacity: 0; visibility: hidden; transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .2s, visibility 0s .28s; }
.lsn .lsn-dd::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } /* hover bridge */
.lsn .lsn-top.is-open > .lsn-dd { transform: none; opacity: 1; visibility: visible; transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .2s; }
.lsn .lsn-dd a { display: block; padding: 9px 12px; border-radius: var(--radius-sm, 8px); font-size: var(--text-sm, 14px); color: var(--lsn-mute); white-space: nowrap; }
.lsn .lsn-dd a:hover, .lsn .lsn-dd a[aria-current] { background: var(--lsn-soft); color: var(--lsn-deep); }

/* burger */
.lsn .lsn-burger { display: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radius-sm, 8px); background: none; cursor: pointer; place-items: center; }
.lsn .lsn-burger:hover, .lsn .lsn-burger:focus, .lsn .lsn-burger:active { background: none; }
@media (hover: hover) { .lsn .lsn-burger:hover { background: var(--lsn-soft); } }
.lsn .lsn-burger span { position: relative; display: block; width: 20px; height: 2px; background: var(--lsn-ink); border-radius: 2px; transition: background .25s; }
.lsn .lsn-burger span::before, .lsn .lsn-burger span::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--lsn-ink); border-radius: 2px; transition: transform .3s cubic-bezier(.5,0,.2,1), top .3s; }
.lsn .lsn-burger span::before { top: -6px; } .lsn .lsn-burger span::after { top: 6px; }
.lsn.is-open .lsn-burger span { background: transparent; }
.lsn.is-open .lsn-burger span::before { top: 0; transform: rotate(45deg); }
.lsn.is-open .lsn-burger span::after { top: 0; transform: rotate(-45deg); }

/* mobile panel (A): a card that drops below the header bar; JS sets --lsn-top / --lsn-left / --lsn-right */
.lsn .lsn-panel { display: none; }
.lsn-dim { display: none; }
.lsn.is-mobile .lsn-desk { display: none; }
.lsn.is-mobile .lsn-burger { display: grid; }
/* dim lives on <body> (moved by JS) so the sticky header, z-index 999, stays above it */
body > .lsn-dim { display: block; position: fixed; inset: 0; background: rgba(30,30,30,.35); opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; z-index: 998; }
body > .lsn-dim.is-open { opacity: 1; visibility: visible; transition: opacity .3s; }
.lsn.is-mobile .lsn-panel { display: flex; flex-direction: column; position: fixed; top: calc(var(--lsn-top, 72px) + 8px); left: var(--lsn-left, 12px); right: var(--lsn-right, 12px); max-height: calc(100vh - var(--lsn-top, 72px) - 24px); max-height: calc(100dvh - var(--lsn-top, 72px) - 24px); overflow: auto; overscroll-behavior: contain;
	background: var(--lsn-bg); border-radius: var(--radius-md, 16px); box-shadow: 0 16px 40px rgba(30,30,30,.16); padding: 6px var(--space-4, 16px) var(--space-4, 16px); z-index: 1000;
	transform-origin: top center; transform: translateY(-8px) scaleY(.96); opacity: 0; visibility: hidden; transition: transform .32s cubic-bezier(.2,.8,.2,1), opacity .2s, visibility 0s .32s; }
.lsn.is-mobile.is-open .lsn-panel { transform: none; opacity: 1; visibility: visible; transition: transform .32s cubic-bezier(.2,.8,.2,1), opacity .2s; }
.lsn .lsn-acc-item { border-bottom: 1px solid var(--lsn-line); }
.lsn .lsn-row { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 4px; border: 0; background: none; font: inherit; font-size: var(--text-base, 16px); font-weight: 600; letter-spacing: -0.3px; color: var(--lsn-ink); text-align: left; cursor: pointer; }
.lsn .lsn-row:hover, .lsn .lsn-row:focus { background: none; color: var(--lsn-deep); }
.lsn .lsn-row .lsn-chev { width: 9px; height: 9px; border-width: 0 2px 2px 0; }
.lsn .lsn-acc-item.is-open > .lsn-row { color: var(--lsn-deep); }
.lsn .lsn-acc-item.is-open > .lsn-row .lsn-chev { transform: rotate(225deg) translateY(-2px); border-color: var(--lsn-deep); }
.lsn .lsn-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s cubic-bezier(.5,0,.2,1); }
.lsn .lsn-acc-item.is-open > .lsn-sub { grid-template-rows: 1fr; }
.lsn .lsn-sub > ul { overflow: hidden; }
.lsn .lsn-sub a { display: block; margin-left: 4px; padding: 8px 4px 8px 14px; border-left: 2px solid var(--lsn-line); font-size: var(--text-sm, 14px); color: var(--lsn-mute); }
.lsn .lsn-sub li:last-child a { margin-bottom: 12px; }
.lsn .lsn-sub a:hover, .lsn .lsn-sub a[aria-current] { color: var(--lsn-deep); border-left-color: var(--lsn-mint); }
.lsn .lsn-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: var(--space-4, 16px); }
.lsn .lsn-lang { display: flex; gap: 4px; }
.lsn .lsn-lang a { padding: 6px 10px; border-radius: var(--radius-pill, 999px); font-size: var(--text-sm, 13px); font-weight: 600; color: var(--lsn-faint); }
.lsn .lsn-lang a.is-on { background: var(--lsn-soft); color: var(--lsn-ink); }
.lsn .lsn-cta { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 22px; border-radius: var(--radius-pill, 999px); background: var(--lsn-ink); color: var(--lsn-bg); font-size: var(--text-sm, 14px); font-weight: 600; white-space: nowrap; transition: background .2s; }
.lsn .lsn-cta:hover { background: var(--lsn-deep); color: var(--lsn-bg); }
.lsn a:focus-visible, .lsn button:focus-visible { outline: 2px solid var(--lsn-deep); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .lsn * { transition: none !important; } }