@font-face {
	font-family: 'Pretendard';
	src: url('../fonts/PretendardVariable.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
:root {
	color-scheme: light;
	--topten-ink: #0b3558;
	--topten-body: #273d51;
	--topten-muted: #60748a;
	--topten-border: #d9e1e8;
	--topten-canvas: #fff;
	--topten-surface: #fff;
	--topten-accent: #315f86;
	--topten-action: #006bff;
	--topten-content-width: 1200px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--topten-canvas);
	color: var(--topten-body);
	font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, "Segoe UI", "Malgun Gothic", sans-serif;
	font-size: 15px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--topten-action); }
button, input { font: inherit; }
.blind { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.topten-site { min-height: 100vh; display: flex; flex-direction: column; }
.topten-skip { position: absolute; z-index: 10; left: 16px; top: -60px; padding: 10px 14px; border: 1px solid var(--topten-border); border-radius: 8px; background: #fff; }
.topten-skip:focus { top: 12px; }
.topten-header { position: relative; z-index: 5; border-bottom: 1px solid var(--topten-border); background: var(--topten-surface); }
.topten-header-inner { width: min(100%, var(--topten-content-width)); min-height: 88px; margin: 0 auto; padding: 16px 28px; display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(200px, 240px) auto; grid-template-areas: "brand nav search account"; align-items: center; gap: 24px; }
.topten-brand { grid-area: brand; display: flex; flex-direction: column; line-height: 1.2; }
.topten-wordmark { color: var(--topten-ink); font-size: 23px; font-weight: 750; letter-spacing: .015em; }
.topten-brand-line { margin-top: 5px; color: var(--topten-muted); font-size: 11px; }
.topten-nav { grid-area: nav; min-width: 0; }
.topten-nav ul { display: flex; align-items: center; gap: 23px; margin: 0; padding: 0; list-style: none; white-space: nowrap; overflow-x: auto; }
.topten-nav a { display: block; padding: 10px 0; color: #475569; font-size: 14px; font-weight: 500; }
.topten-nav .is-current a { color: #0b3558; font-weight: 650; }
.topten-nav a:hover { color: var(--topten-action); }
.topten-search { grid-area: search; min-width: 0; width: 100%; height: 42px; margin: 0; padding: 0; display: flex; align-items: center; border: 1px solid #e1e6ec; border-radius: 8px; background: #f7f8fa; }
.topten-search:focus-within { border-color: #7098bd; outline: 3px solid #eaf2fb; }
.topten-search input { flex: 1 1 0%; width: 0; min-width: 0; max-width: none; height: 100%; margin: 0; padding: 0 0 0 13px; border: 0; border-radius: 0; outline: 0; background: transparent; box-shadow: none; color: #334155; font-size: 13px; line-height: normal; }
.topten-search input::placeholder { color: #8191a1; }
.topten-search button { flex: 0 0 42px; width: 42px; min-width: 42px; height: 40px; display: grid; place-items: center; margin: 0; padding: 0; border: 0; border-radius: 7px; background: transparent; box-shadow: none; color: #64748b; cursor: pointer; line-height: 1; white-space: nowrap; }
.topten-search button svg { display: block; flex-shrink: 0; }
.topten-search button:hover { color: var(--topten-action); }

.topten-account { grid-area: account; min-width: 0; }
.topten-account-guest { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.topten-account-guest a { height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0 8px; border: 1px solid transparent; border-radius: 8px; color: #475569; font-size: 14px; font-weight: 500; line-height: 1; white-space: nowrap; }
.topten-account-guest .topten-signup-link { padding: 0 16px; border-color: #0b3558; background: #0b3558; color: #fff; font-weight: 600; }
.topten-account-guest .topten-signup-link:hover { border-color: #17466d; background: #17466d; color: #fff; }
.topten-account-menu { position: relative; }
.topten-account-menu summary { min-height: 38px; display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; white-space: nowrap; }
.topten-account-menu summary::-webkit-details-marker { display: none; }
.topten-account-photo, .topten-account-avatar { width: 30px; height: 30px; flex: 0 0 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; object-fit: cover; background: #edf2f6; color: var(--topten-ink); font-size: 9px; font-weight: 700; }
.topten-account-name { max-width: 92px; overflow: hidden; color: #30495f; font-size: 14px; font-weight: 600; text-overflow: ellipsis; }
.topten-account-chevron { width: 7px; height: 7px; margin: 0 2px 4px 1px; transform: rotate(45deg); border-right: 1px solid #708196; border-bottom: 1px solid #708196; }
.topten-account-panel { position: absolute; z-index: 20; top: calc(100% + 8px); right: 0; width: 238px; max-height: calc(100vh - 96px); max-height: min(480px, calc(100dvh - 96px)); overflow-y: auto; padding: 8px; border: 1px solid var(--topten-border); border-radius: 10px; background: #fff; box-shadow: 0 8px 24px rgba(11, 53, 88, .1); }
.topten-account-greeting { margin: 5px 7px 9px; padding: 2px 0 11px; border-bottom: 1px solid #edf1f4; color: var(--topten-muted); font-size: 12px; }
.topten-account-greeting strong { color: var(--topten-ink); font-weight: 650; }
.topten-account-panel > a { display: block; padding: 9px 10px; border-radius: 6px; color: #40566b; font-size: 13px; }
.topten-account-panel > a:hover { background: #f2f6fa; color: var(--topten-ink); }
.topten-account-panel .topten-account-logout { margin-top: 5px; padding-top: 11px; border-top: 1px solid #edf1f4; }

.topten-content { width: min(100%, var(--topten-content-width)); flex: 1 0 auto; margin: 0 auto; padding: 28px 28px 44px; }
.topten-footer { border-top: 1px solid var(--topten-border); background: #f2f4f7; }
.topten-footer-inner { width: min(100%, var(--topten-content-width)); margin: 0 auto; padding: 24px 28px 17px; display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 8px 24px; color: var(--topten-muted); font-size: 12px; }
.topten-footer-brand { color: var(--topten-ink); font-weight: 700; letter-spacing: .035em; }
.topten-footer-about p { margin: 5px 0 0; }
.topten-footer-account { display: flex; gap: 18px; padding-top: 2px; }
.topten-footer-account a { color: #40566b; }
.topten-footer-account a:hover { color: var(--topten-action); }
.topten-copyright { grid-column: 1 / -1; margin: 7px 0 0; padding-top: 12px; border-top: 1px solid #e1e6eb; color: #788898; font-size: 11px; }

.topten-header a:focus-visible,
.topten-header button:focus-visible,
.topten-account-menu summary:focus-visible { outline: 2px solid #006bff; outline-offset: 4px; }

@media (max-width: 1100px) {
	.topten-header-inner { grid-template-columns: minmax(0, 1fr) 240px; grid-template-areas: "brand account" "nav search"; gap: 16px 24px; padding: 18px 28px 14px; }
	.topten-account { justify-self: end; }
	.topten-nav ul { gap: 24px; }
}
@media (max-width: 640px) {
	.topten-header-inner { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand account" "search search" "nav nav"; gap: 16px; padding: 16px 20px 10px; }
	.topten-brand-line { display: none; }
	.topten-wordmark { font-size: 22px; }
	.topten-search { height: 44px; }
	.topten-search input { font-size: 14px; }
	.topten-search button { height: 42px; }
	.topten-account-guest { gap: 8px; }
	.topten-account-guest a { height: 38px; padding: 0 5px; font-size: 13px; }
	.topten-account-guest .topten-signup-link { padding: 0 12px; }
	.topten-account-name { max-width: 72px; font-size: 13px; }
	.topten-account-panel { width: min(260px, calc(100vw - 40px)); }
	.topten-nav ul { gap: 24px; }
	.topten-nav a { padding: 6px 0 10px; font-size: 14px; }
	.topten-nav .is-current a { box-shadow: inset 0 -2px #0b3558; }
	.topten-content { padding: 28px 20px 48px; }
	.topten-footer-inner { padding: 24px 20px 16px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.topten-logo{display:block;max-width:180px;max-height:38px;width:auto;height:auto;object-fit:contain;object-position:left center}.topten-footer-logo{display:block;max-width:150px;max-height:28px;width:auto;height:auto;object-fit:contain}.topten-section-nav{border-top:1px solid #edf0f2}.topten-section-nav ul{display:flex;gap:24px;list-style:none;padding:10px 28px;margin:0 auto;max-width:1200px;overflow-x:auto;white-space:nowrap}.topten-section-nav a{font-size:13px;color:#526171}.topten-section-nav a[aria-current]{color:#182c40;font-weight:600}.topten-company-info{white-space:pre-line}.topten-footer-nav{display:flex;flex-wrap:wrap;gap:12px 20px;grid-column:1/-1;padding-top:12px;font-size:12px}@media(max-width:640px){.topten-logo{max-width:140px;max-height:32px}.topten-section-nav ul{padding:10px 20px}}

/* Wide uploaded logos retain their aspect ratio without the old 38px ceiling. */
.topten-logo { width: 220px; max-width: 220px; height: auto; max-height: 72px; }
.topten-footer-logo { width: 190px; max-width: 190px; max-height: 62px; }
.topten-header-inner { min-height: 104px; }
.topten-nav a { position: relative; transition: color 160ms ease; }
.topten-nav a::after { content: ''; position: absolute; bottom: 2px; left: 0; width: 100%; height: 2px; background: var(--topten-action); transform: scaleX(0); transform-origin: left; transition: transform 180ms ease; }
.topten-nav a:hover::after, .topten-nav a:focus-visible::after, .topten-nav .is-current a::after { transform: scaleX(1); }
.topten-search { transition: border-color 160ms ease, background-color 160ms ease; }
.topten-account-chevron { transition: transform 160ms ease; }
.topten-account-menu[open] .topten-account-chevron { transform: rotate(225deg); margin-top: 4px; }
.topten-footer-inner { padding-top: 36px; padding-bottom: 24px; }
@media(max-width:640px) {
	.topten-logo { width: 176px; max-width: min(176px, 43vw); max-height: 58px; }
	.topten-footer-logo { width: 160px; max-width: 160px; max-height: 52px; }
	.topten-header-inner { min-height: auto; }
}
@media(prefers-reduced-motion:reduce) {
	.topten-nav a, .topten-nav a::after, .topten-search, .topten-account-chevron { transition: none; }
}