:root {
	--brand-primary: #0a32b1;
	--brand-secondary: #31589e;
	--brand-accent: #8fa9ca;
	--brand-surface: #eef3fa;
	--brand-page: #f8fafc;
	--brand-ink: #263752;
	--navy: #0a32b1;
	--navy2: #244a9f;
	--blue: #315fbd;
	--blue2: #204a9f;
	--cyan: #8fb4e8;
	--ink: #1d2b44;
	--muted: #68758a;
	--line: #e2e7ef;
	--bg: #f8fafc;
	--white: #fff;
	--shadow: 0 18px 48px rgba(31, 52, 88, .08);
	--shadow2: 0 28px 72px rgba(31, 52, 88, .13);
	--radius: 28px;
	--radius-card: 24px;
	--radius-btn: 16px
}

* {
	box-sizing: border-box
}

html {
	scroll-behavior: smooth
}

body {
	margin: 0;
	font-family: 'Noto Sans KR', Inter, sans-serif;
	color: var(--ink);
	background: #fff;
	line-height: 1.6
}

a {
	text-decoration: none;
	color: inherit
}

button {
	font: inherit;
	border: 0;
	cursor: pointer
}

.container {
	width: min(1240px, calc(100% - 44px));
	margin: 0 auto
}

.nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 60;
	background: rgba(6, 22, 43, .88);
	backdrop-filter: blur(18px);
	border-bottom: 1px solid rgba(255, 255, 255, .16);
	box-shadow: 0 12px 34px rgba(0, 0, 0, .12)
}

.nav-inner {
	height: 76px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: nowrap;
}

.logo {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 12px;
	font-weight: 950;
	color: #fff;
	letter-spacing: .02em;
	font-size: 20px
}

.logo img {
	
}

.menu {
	display: flex;
	gap: 26px;
	align-items: center;
	color: rgba(255, 255, 255, .92);
	font-weight: 850;
	font-size: 15px;
	flex: 1 1 auto;
	min-width: 0;
	justify-content: center;
	flex-wrap: nowrap;
}

.menu a {
	white-space: nowrap;
}

.menu a:hover {
	color: #6cf7ff
}

.menu-item{
    position:relative;
}

.menu-link{
    display:flex;
    align-items:center;
    gap:6px;
    color:rgba(255,255,255,.92);
    font-weight:850;
    font-size:15px;
    cursor:pointer;
    padding:28px 0;
    white-space:nowrap;
}

.menu-link:hover{
    color:var(--cyan);
}

.submenu{
    position:absolute;
    top:100%;
    left:50%;
    transform:translateX(-50%);
    min-width:200px;

    background:#fff;
    border-radius:18px;
    border:1px solid var(--line);
    box-shadow:0 20px 50px rgba(7,27,52,.15);

    padding:10px;
    opacity:0;
    visibility:hidden;
    transition:.25s;
}

.menu-item:hover .submenu{
    opacity:1;
    visibility:visible;
    transform:translateX(-50%) translateY(6px);
}

.submenu a{
    display:block;
    padding:12px 16px;
    border-radius:12px;
    color:var(--navy);
    font-weight:700;
    transition:.2s;
}

.submenu a:hover{
    background:#eef7ff;
    color:var(--blue);
}

.nav-cta {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}

.nav-cta-link {
	color: #fff;
	font-size: 14px;
	font-weight: 800;
	text-decoration: none;
	padding: 10px 14px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, .28);
	background: rgba(255, 255, 255, .08)
}

.nav-cta-link:hover {
	background: rgba(255, 255, 255, .16);
	color: #fff
}

.mobile-menu-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 13px;
	background: #fff;
	color: var(--navy);
	border: 1px solid var(--line)
}

.mobile-menu-btn svg {
	width: 24px;
	height: 24px
}

.mobile-menu-panel {
	display: none;
	position: fixed;
	top: 76px;
	left: 0;
	right: 0;
	z-index: 55;
	background: rgba(255, 255, 255, .98);
	border-top: 1px solid var(--line);
	box-shadow: 0 20px 60px rgba(7, 27, 52, .14);
	
	/* bottom:0 대신 높이를 직접 계산 */
	max-height: calc(100dvh - 76px);
	overflow-y:auto;
	overflow-x:hidden;
	-webkit-overflow-scrolling:touch;
}

.mobile-menu-panel.is-open {
	display: block
}

.mobile-menu-inner {
	width: min(1240px, calc(100% - 44px));
	margin: 0 auto;
	padding: 14px 0 18px;
	display: grid;
	gap: 8px
}

.mobile-menu-inner a {
	padding: 14px;
	border-radius: 13px;
	background: #f4f9ff;
	border: 1px solid var(--line);
	font-weight: 900;
	color: var(--navy)
}

.mobile-menu-inner .mobile-primary {
	background: linear-gradient(135deg, var(--blue), var(--blue2));
	color: #fff;
	text-align: center
}

.mobile-menu-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 6px 2px 10px;
}

.mobile-menu-title {
	font-size: 20px;
	font-weight: 900;
	color: var(--navy);
}
.mobile-menu-close {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 13px;
	background: #f4f9ff;
	border: 1px solid var(--line);
	color: var(--navy);
	transition: background .2s, transform .2s;
}
.mobile-menu-close:hover{
    background:#f5f5f5;
    transform:rotate(90deg);
}

.mobile-menu-backdrop {
	position: fixed;
	inset: 0;
	z-index: 50;
	background: rgba(0, 0, 0, .45);
	backdrop-filter: blur(2px);
	opacity: 0;
	visibility: hidden;
	transition: .25s
}

.mobile-menu-backdrop.is-open {
	opacity: 1;
	visibility: visible
}

.mobile-menu-group{
    margin-top:10px;
}

/*
.mobile-menu-group strong{
    display:block;
    margin:12px 6px 8px;
    color:#666;
    font-size:13px;
    font-weight:800;
}
*/
.mobile-menu-group-title{
    display:block;
    margin:20px 6px 10px;
    font-size:18px;
    font-weight:800;
    color:#1b2b45;
    letter-spacing:-0.5px;
}

.mobile-submenu{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px;
    margin-bottom:20px;
}

.mobile-submenu a{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:58px;
    border-radius:16px;
    font-size:17px;
    font-weight:700;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 20px;
	border-radius: 15px;
	font-weight: 950;
	transition: .18s;
	white-space: nowrap
}

.btn:hover {
	transform: translateY(-2px)
}

.btn.primary {
	background: linear-gradient(135deg, var(--blue), var(--blue2));
	color: #fff;
	box-shadow: 0 15px 34px rgba(8, 119, 242, .26)
}

.btn.ghost {
	background: rgba(255, 255, 255, .88);
	border: 1px solid rgba(7, 27, 52, .12);
	color: var(--navy);
	box-shadow: 0 12px 28px rgba(7, 27, 52, .08)
}

.breadcrumb {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	color: rgba(255, 255, 255, .80);
	font-size: 13px;
	font-weight: 800;
	margin-bottom: 10px
}

.breadcrumb a {
	color: #fff
}

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .28);
	color: #9ff8ff;
	font-size: 13px;
	font-weight: 950;
	letter-spacing: .03em;
	text-transform: uppercase
}

.sub-hero {
	position: relative;
	padding: 100px 0 76px;
	overflow: hidden;
	background: linear-gradient(135deg, rgba(7, 27, 52, .96),
		rgba(8, 119, 242, .78)),
		url('/images/lf_bg_ori.jpg') center/cover
		no-repeat;
	color: #fff;
}

.sub-hero:after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(rgba(255, 255, 255, .055) 1px, transparent
		1px), linear-gradient(90deg, rgba(255, 255, 255, .055) 1px,
		transparent 1px);
	background-size: 64px 64px;
	pointer-events: none;
}

.sub-hero .container {
	position: relative;
	z-index: 1;
}

.sub-hero h1 {
	margin: 18px 0 12px;
	font-size: clamp(38px, 5vw, 64px);
	line-height: 1.12;
	letter-spacing: -.06em;
}

.sub-hero p {
	margin: 0;
	max-width: 760px;
	color: rgba(255, 255, 255, .78);
	font-size: 18px;
	font-weight: 700;
}

.jobs-section {
	padding: 34px 0 96px;
	background: linear-gradient(180deg, #fff, #f4faff)
}

.jobs-summary {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin: 0 0 18px;
	padding: 14px 18px;
	border-radius: 20px;
	background: rgba(255, 255, 255, .96);
	border: 1px solid rgba(219, 231, 242, .92);
	box-shadow: 0 12px 34px rgba(7, 27, 52, .08)
}

.summary-card {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0 14px 0 0;
	border-right: 1px solid var(--line)
}

.summary-card:last-child {
	border-right: 0
}

.summary-card b {
	display: inline;
	color: var(--blue);
	font-size: 18px;
	line-height: 1;
	font-weight: 950
}

.summary-card span {
	display: inline;
	color: var(--muted);
	font-weight: 850;
	font-size: 14px;
	white-space: nowrap
}

.search-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 24px;
	padding: 20px;
	box-shadow: var(--shadow);
	margin-bottom: 20px
}

.search-title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	margin-bottom: 14px
}

.search-title h2 {
	margin: 0;
	color: var(--navy);
	font-size: 22px;
	letter-spacing: -.045em
}

.search-title p {
	margin: 0;
	color: var(--muted);
	font-weight: 700;
	font-size: 14px
}

.filter-grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 14px
}

.field {
	display: grid;
	gap: 7px
}

.field label {
	font-size: 13px;
	font-weight: 950;
	color: var(--navy)
}

.field select, .field input {
	width: 100%;
	height: 48px;
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 0 14px;
	background: #f8fbff;
	color: var(--ink);
	font-weight: 700;
	outline: none
}

.field select:focus, .field input:focus {
	border-color: rgba(8, 119, 242, .45);
	box-shadow: 0 0 0 4px rgba(8, 119, 242, .08)
}

.col-2 {
	grid-column: span 2
}

.col-3 {
	grid-column: span 3
}

.col-btn {
	grid-column: span 1;
	display: flex;
	align-items: end
}

.col-btn .btn {
	width: 100%;
	height: 48px;
	padding: 0 14px
}

.keyword-input-group {
	display: grid;
	grid-template-columns: 132px minmax(0, 1fr);
	gap: 8px
}

.keyword-input-group select,
.keyword-input-group input {
	width: 100%;
	height: 48px;
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 0 14px;
	background: #f8fbff;
	color: var(--ink);
	font-weight: 700;
	outline: none
}

.keyword-input-group select:focus,
.keyword-input-group input:focus {
	border-color: rgba(8, 119, 242, .45);
	box-shadow: 0 0 0 4px rgba(8, 119, 242, .08)
}

.list-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 26px 0 14px;
	gap: 12px
}

.list-count {
	color: var(--muted);
	font-weight: 800
}

.list-count strong {
	color: var(--blue)
}

.list-head-start {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap
}

.sort-mini {
	display: flex;
	gap: 8px;
	flex-wrap: wrap
}

.sort-mini a {
	font-size: 13px;
	font-weight: 900;
	padding: 8px 12px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--line);
	color: var(--muted)
}

.sort-mini a:hover {
	color: var(--blue);
	border-color: rgba(8, 119, 242, .35)
}

.sort-mini a.active {
	background: linear-gradient(135deg, var(--blue), var(--blue2));
	color: #fff;
	border-color: transparent;
	box-shadow: 0 10px 24px rgba(8, 119, 242, .22)
}

.job-page-size-label {
	font-size: 13px;
	font-weight: 900;
	color: var(--muted);
	padding: 8px 4px 8px 0
}

.job-pagination {
	display: flex;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 24px
}

.job-pagination a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	font-size: 13px;
	font-weight: 900;
	padding: 8px 12px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--line);
	color: var(--muted);
	transition: .18s
}

.job-pagination a:hover {
	color: var(--blue);
	border-color: rgba(8, 119, 242, .35)
}

.job-pagination a.active {
	background: linear-gradient(135deg, var(--blue), var(--blue2));
	color: #fff;
	border-color: transparent;
	box-shadow: 0 10px 24px rgba(8, 119, 242, .22)
}

.job-pagination a.disabled {
	opacity: .45;
	pointer-events: none
}

.notice-section {
	padding: 38px 0 96px;
	background: linear-gradient(180deg, #fff, #f4faff)
}

.notice-summary {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 18px;
	padding: 18px 22px;
	border-radius: 20px;
	background: #fff;
	border: 1px solid var(--line);
	box-shadow: 0 12px 34px rgba(7, 27, 52, .08)
}

.notice-summary strong {
	color: var(--blue);
	font-size: 20px
}

.notice-summary span {
	color: var(--muted);
	font-weight: 750
}

.search-card.notice-search {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 12px;
	align-items: end
}

.search-card.notice-search .btn.primary {
	height: 50px;
	padding: 0 24px;
	border: 0;
	border-radius: 14px
}

.notice-table-wrap {
	overflow: hidden;
	border-radius: 28px;
	background: #fff;
	border: 1px solid var(--line);
	box-shadow: var(--shadow)
}

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

.notice-table thead {
	background: linear-gradient(135deg, #eef7ff, #eafffb)
}

.notice-table th {
	padding: 16px 14px;
	color: var(--navy);
	font-size: 14px;
	font-weight: 950;
	text-align: center;
	border-bottom: 1px solid var(--line)
}

.notice-table td {
	padding: 18px 14px;
	border-bottom: 1px solid var(--line)
}

.notice-table tr:last-child td {
	border-bottom: 0
}

.notice-table tbody tr:hover {
	background: #f8fbff
}

.notice-no {
	text-align: center;
	color: var(--muted);
	font-weight: 850
}

.notice-title a {
	display: flex;
	align-items: center;
	gap: 9px;
	color: var(--navy);
	font-weight: 900
}

.notice-title a:hover {
	color: var(--blue)
}

.notice-meta {
	text-align: center;
	color: var(--muted);
	font-size: 13px;
	font-weight: 700
}

.notice-badge {
	display: inline-flex;
	padding: 6px 10px;
	border-radius: 999px;
	background: #ffe8ec;
	color: #df3b4f;
	font-size: 12px;
	font-weight: 950;
	flex-shrink: 0
}

.notice-empty {
	text-align: center;
	color: var(--muted);
	font-weight: 750;
	padding: 48px 14px
}

.notice-card-list {
	display: none;
	gap: 12px
}

.notice-card {
	padding: 18px;
	border-radius: 22px;
	background: #fff;
	border: 1px solid var(--line);
	box-shadow: 0 12px 30px rgba(7, 27, 52, .06)
}

.notice-card-top {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	align-items: flex-start
}

.notice-card-title {
	font-size: 17px;
	font-weight: 950;
	color: var(--navy);
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1
}

.notice-card-no {
	color: var(--muted);
	font-weight: 850;
	font-size: 13px;
	flex-shrink: 0
}

.notice-card-meta {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 10px;
	color: var(--muted);
	font-size: 12px;
	font-weight: 750
}

.notice-pagination {
	display: flex;
	justify-content: center;
	gap: 7px;
	flex-wrap: wrap;
	margin-top: 28px
}

.notice-pagination a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 13px;
	border-radius: 12px;
	border: 1px solid var(--line);
	background: #fff;
	color: var(--navy);
	font-size: 13px;
	font-weight: 900;
	transition: .18s
}

.notice-pagination a:hover {
	color: var(--blue);
	border-color: rgba(8, 119, 242, .35)
}

.notice-pagination a.active {
	background: linear-gradient(135deg, var(--blue), var(--blue2));
	color: #fff;
	border-color: transparent
}

.notice-pagination a.disabled {
	opacity: .45;
	pointer-events: none
}

.notice-article {
	overflow: hidden;
	border-radius: 28px;
	background: #fff;
	border: 1px solid var(--line);
	box-shadow: var(--shadow)
}

.article-head {
	padding: 30px 32px;
	border-bottom: 1px solid var(--line);
	background: linear-gradient(135deg, #f8fbff, #eef9ff)
}

.article-badge {
	display: inline-flex;
	align-items: center;
	padding: 6px 10px;
	border-radius: 999px;
	background: #e9f3ff;
	color: var(--blue);
	font-size: 12px;
	font-weight: 950;
	margin-bottom: 12px
}

.article-badge.top {
	background: #ffe8ec;
	color: #df3b4f
}

.article-head h2 {
	margin: 0;
	color: var(--navy);
	font-size: 32px;
	line-height: 1.35;
	letter-spacing: -.045em
}

.article-meta {
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
	margin-top: 14px;
	color: var(--muted);
	font-size: 13px;
	font-weight: 750
}

.article-meta strong {
	color: var(--navy)
}

.article-body {
	padding: 40px 32px;
	min-height: 300px;
	color: #36465d;
	font-size: 17px;
	line-height: 1.9
}

.article-body p {
	margin: 0 0 18px
}

.article-body img {
	max-width: 100%;
	height: auto;
	border-radius: 18px;
	margin: 18px 0
}

.article-body table {
	max-width: 100%;
	border-collapse: collapse
}

.article-attachments {
	padding: 0 32px 32px;
	border-top: 1px solid var(--line)
}

.article-attachments-title {
	padding-top: 24px;
	color: var(--navy);
	font-size: 14px;
	font-weight: 950;
	margin-bottom: 12px
}

.article-attachments ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px
}

.article-attachments a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--blue);
	font-weight: 850;
	font-size: 14px
}

.article-attachments a:hover {
	text-decoration: underline
}

.notice-attach-images {
	padding: 0 32px 32px;
	border-top: 1px solid var(--line)
}

.notice-attach-images-title {
	padding-top: 24px;
	color: var(--navy);
	font-size: 14px;
	font-weight: 950;
	margin-bottom: 14px
}

.notice-attach-image-wrap {
	text-align: center;
	margin-bottom: 16px
}

.notice-attach-image-wrap:last-child {
	margin-bottom: 0
}

.notice-attach-image {
	max-width: 100%;
	height: auto;
	border-radius: 18px
}

.notice-detail-nav {
	margin-top: 22px;
	overflow: hidden;
	border-radius: 22px;
	background: #fff;
	border: 1px solid var(--line);
	box-shadow: 0 12px 30px rgba(7, 27, 52, .06)
}

.notice-nav-row {
	display: grid;
	grid-template-columns: 92px 1fr;
	gap: 12px;
	align-items: center;
	padding: 18px 22px
}

.notice-nav-row+.notice-nav-row {
	border-top: 1px solid var(--line)
}

.notice-nav-label {
	color: var(--muted);
	font-size: 13px;
	font-weight: 900
}

.notice-nav-row a {
	color: var(--navy);
	font-weight: 850;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis
}

.notice-nav-row a:hover {
	color: var(--blue)
}

.notice-nav-empty {
	color: var(--muted);
	font-weight: 750;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis
}

.article-actions {
	display: flex;
	justify-content: center;
	margin-top: 28px
}

.article-actions .btn.primary {
	height: 50px;
	padding: 0 24px;
	border-radius: 14px;
	border: 0
}

.qna-section {
	padding: 38px 0 96px;
	background: linear-gradient(180deg, #fff, #f4faff)
}

.qna-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 18px;
	margin-bottom: 18px;
	padding: 18px 22px;
	border-radius: 20px;
	background: #fff;
	border: 1px solid var(--line);
	box-shadow: 0 12px 34px rgba(7, 27, 52, .08)
}

.qna-top strong {
	color: var(--blue);
	font-size: 20px
}

.qna-top p {
	margin: 0;
	color: var(--muted);
	font-weight: 750
}

.qna-top .btn.primary {
	height: 50px;
	padding: 0 22px;
	border-radius: 14px;
	border: 0
}

.search-card.qna-search {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 12px;
	align-items: end
}

.search-card.qna-search .btn.primary {
	height: 50px;
	padding: 0 24px;
	border: 0;
	border-radius: 14px
}

.qna-table-wrap {
	overflow: hidden;
	border-radius: 28px;
	background: #fff;
	border: 1px solid var(--line);
	box-shadow: var(--shadow)
}

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

.qna-table thead {
	background: linear-gradient(135deg, #eef7ff, #eafffb)
}

.qna-table th {
	padding: 16px 14px;
	text-align: center;
	color: var(--navy);
	font-size: 14px;
	font-weight: 950;
	border-bottom: 1px solid var(--line)
}

.qna-table td {
	padding: 18px 14px;
	border-bottom: 1px solid var(--line);
	vertical-align: middle
}

.qna-table tr:last-child td {
	border-bottom: 0
}

.qna-table tbody tr:hover {
	background: #f8fbff
}

.qna-no {
	text-align: center;
	color: var(--muted);
	font-weight: 850
}

.qna-title a {
	display: flex;
	align-items: center;
	gap: 9px;
	color: var(--navy);
	font-weight: 900
}

.qna-title a:hover {
	color: var(--blue)
}

.qna-meta {
	text-align: center;
	color: var(--muted);
	font-size: 13px;
	font-weight: 700
}

.status-badge {
	display: inline-flex;
	align-items: center;
	padding: 6px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 950;
	white-space: nowrap
}

.status-wait {
	background: #fff4dc;
	color: #aa7410
}

.status-done {
	background: #e8f8f1;
	color: #15956a
}

.qna-empty {
	text-align: center;
	color: var(--muted);
	font-weight: 750;
	padding: 48px 14px
}

.qna-card-list {
	display: none;
	gap: 12px
}

.qna-card {
	padding: 18px;
	border-radius: 22px;
	background: #fff;
	border: 1px solid var(--line);
	box-shadow: 0 12px 30px rgba(7, 27, 52, .06)
}

.qna-card-top {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	align-items: flex-start
}

.qna-card-title {
	font-size: 17px;
	font-weight: 950;
	color: var(--navy);
	line-height: 1.45;
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1
}

.qna-card-title:hover {
	color: var(--blue)
}

.qna-card-no {
	color: var(--muted);
	font-weight: 850;
	font-size: 13px;
	flex-shrink: 0
}

.qna-card-meta {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 10px;
	color: var(--muted);
	font-size: 12px;
	font-weight: 750
}

.qna-card-status {
	margin-top: 14px
}

.greeting-section {
	background: linear-gradient(180deg, #f5faff 0%, #fff 46%, #f5faff 100%);
	padding: 82px 0 96px
}

.greeting-wrap {
	display: grid;
	grid-template-columns: 340px 1fr;
	gap: 54px;
	align-items: start
}

.greeting-aside {
	position: sticky;
	top: 104px;
	padding: 34px;
	border-radius: 30px;
	background: linear-gradient(180deg, #fff, #f8fbff);
	border: 1px solid var(--line);
	box-shadow: var(--shadow)
}

.greeting-aside .mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	border-radius: 20px;
	background: linear-gradient(135deg, var(--blue), var(--cyan));
	color: #fff;
	font-size: 28px;
	margin-bottom: 22px;
	box-shadow: 0 16px 32px rgba(8, 119, 242, .22)
}

.greeting-aside h2 {
	margin: 0 0 16px;
	font-size: 34px;
	line-height: 1.25;
	letter-spacing: -.055em;
	color: var(--navy)
}

.greeting-aside h2 strong {
	color: var(--blue)
}

.greeting-aside p {
	margin: 0;
	color: var(--muted);
	font-weight: 750;
	line-height: 1.85
}

.greeting-document {
	background: #fff;
	border: 1px solid var(--line);
	box-shadow: var(--shadow);
	border-radius: 30px;
	padding: 48px 52px
}

.greeting-lead {
	padding-bottom: 30px;
	margin-bottom: 34px;
	border-bottom: 1px solid var(--line)
}

.greeting-lead h2 {
	margin: 0 0 14px;
	font-size: clamp(30px, 4vw, 44px);
	line-height: 1.25;
	letter-spacing: -.06em;
	color: var(--navy)
}

.greeting-lead h2 strong {
	color: var(--blue)
}

.greeting-lead p {
	margin: 0;
	color: var(--muted);
	font-size: 18px;
	font-weight: 750
}

.greeting-text h3 {
	margin: 38px 0 14px;
	font-size: 25px;
	line-height: 1.3;
	letter-spacing: -.045em;
	color: var(--blue)
}

.greeting-text h3:first-child {
	margin-top: 0
}

.greeting-text p {
	margin: 0 0 20px;
	color: #3f4e63;
	font-size: 17px;
	font-weight: 650;
	line-height: 2;
	word-break: keep-all
}

.greeting-text hr {
	border: 0;
	border-top: 1px solid #e8f0f8;
	margin: 36px 0
}

.ceo-message {
	margin-top: 42px;
	padding: 44px;
	border-radius: 28px;
	/*background: linear-gradient(135deg, #071b34, #0b3b75);*/
	color: #3f4e63;
	text-align: center;
	box-shadow: var(--shadow2)
}

.ceo-message .thanks {
	margin: 0 0 18px;
	font-size: clamp(26px, 3.5vw, 38px);
	font-weight: 950;
	letter-spacing: -.045em
}

.ceo-message p {
	margin: 0;
	/*color: rgba(255, 255, 255, .78);*/
	font-weight: 750
}

.ceo-sign {
	margin-top: 28px;
	display: inline-flex;
	align-items: baseline;
	gap: 12px
}

.ceo-sign span {
	color: rgba(255, 255, 255, .72);
	font-size: 16px;
	font-weight: 800
}

.ceo-sign strong {
	/*color: #fff;*/
	font-size: 34px;
	letter-spacing: -.04em
}

.location-section {
	padding: 82px 0 96px;
	background: linear-gradient(180deg, #fff, #f4faff)
}

.location-layout {
	display: grid;
	grid-template-columns: .85fr 1.15fr;
	gap: 30px;
	align-items: stretch
}

.location-info {
	padding: 38px;
	border-radius: 32px;
	background: #fff;
	border: 1px solid var(--line);
	box-shadow: var(--shadow)
}

.location-info h3 {
	margin: 0 0 26px;
	font-size: 30px;
	color: var(--navy);
	letter-spacing: -.04em
}

.location-item {
	padding: 18px 0;
	border-bottom: 1px solid var(--line)
}

.location-item:last-of-type {
	border-bottom: 0
}

.location-item b {
	display: block;
	margin-bottom: 6px;
	color: var(--blue);
	font-size: 14px
}

.location-item span, .location-item a {
	color: var(--ink);
	font-weight: 700
}

.location-item a:hover {
	color: var(--blue)
}

.location-actions {
	display: flex;
	gap: 12px;
	margin-top: 28px;
	flex-wrap: wrap
}

.location-actions .btn.primary {
	height: 50px;
	padding: 0 24px;
	border: 0;
	border-radius: 14px
}

.location-actions .btn.ghost {
	height: 50px;
	padding: 0 24px;
	border-radius: 14px
}

.location-map {
	min-height: 480px;
	border-radius: 32px;
	overflow: hidden;
	border: 1px solid var(--line);
	box-shadow: var(--shadow2);
	background: #eaf1f8
}

.location-map iframe {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 480px;
	border: 0
}

.transport-guide {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
	margin-top: 30px
}

.transport-card {
	padding: 24px;
	border-radius: 24px;
	background: #fff;
	border: 1px solid var(--line);
	box-shadow: 0 12px 30px rgba(7, 27, 52, .06)
}

.transport-card b {
	display: block;
	margin-bottom: 8px;
	color: var(--navy);
	font-size: 20px
}

.transport-card span {
	color: var(--muted);
	font-weight: 650
}

.qna-article, .answer-article {
	overflow: hidden;
	border-radius: 28px;
	background: #fff;
	border: 1px solid var(--line);
	box-shadow: var(--shadow)
}

.qna-article {
	margin-bottom: 24px
}

.article-kicker {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 12px
}

.answer-head {
	padding: 24px 28px;
	background: linear-gradient(135deg, #eefaf6, #f5fffb);
	border-bottom: 1px solid var(--line)
}

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

.answer-icon {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 14px;
	background: #dff7ed;
	color: #15956a;
	font-size: 20px;
	font-weight: 950;
	flex-shrink: 0
}

.answer-head h3 {
	margin: 0;
	color: var(--navy);
	font-size: 24px
}

.answer-meta {
	margin-top: 7px;
	color: var(--muted);
	font-size: 13px;
	font-weight: 750
}

.answer-body {
	padding: 30px 28px;
	color: #36465d;
	font-size: 16px;
	line-height: 1.85
}

.answer-body p {
	margin: 0 0 18px
}

.answer-body img {
	max-width: 100%;
	height: auto;
	border-radius: 18px;
	margin: 18px 0
}

.attachment-box {
	padding: 24px 28px;
	border-top: 1px solid var(--line);
	background: #fbfdff
}

.attachment-box h4 {
	margin: 0 0 12px;
	color: var(--navy);
	font-size: 16px;
	font-weight: 950
}

.file-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px
}

.file-list a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--blue);
	font-weight: 800;
	word-break: break-all
}

.file-list a:hover {
	text-decoration: underline
}

.qna-image-attachments {
	padding: 24px 28px;
	border-top: 1px solid var(--line);
	background: #f8fbff
}

.qna-image-attachments h4 {
	margin: 0 0 16px;
	color: var(--navy);
	font-size: 16px;
	font-weight: 950
}

.attachment-image {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 18px;
	border: 1px solid var(--line);
	box-shadow: 0 14px 34px rgba(7, 27, 52, .08);
	margin-bottom: 16px
}

.attachment-image:last-child {
	margin-bottom: 0
}

.org-section {
	position: relative;
	overflow: hidden;
	padding: 86px 0 110px;
	background: linear-gradient(180deg, #f5faff 0%, #fff 42%, #eef8ff 100%)
}

.org-section:before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 14% 12%, rgba(0, 200, 210, .16), transparent 28%),
		radial-gradient(circle at 86% 18%, rgba(8, 119, 242, .14), transparent 30%),
		linear-gradient(90deg, rgba(8, 119, 242, .04) 1px, transparent 1px),
		linear-gradient(rgba(8, 119, 242, .04) 1px, transparent 1px);
	background-size: auto, auto, 58px 58px, 58px 58px;
	pointer-events: none
}

.org-section .container {
	position: relative;
	z-index: 1
}

.org-head {
	text-align: center;
	max-width: 760px;
	margin: 0 auto 46px
}

.org-head .org-kicker {
	background: rgba(8, 119, 242, .08);
	border-color: rgba(8, 119, 242, .12);
	color: var(--blue)
}

.org-head h2 {
	margin: 10px 0;
	font-size: clamp(32px, 4vw, 48px);
	line-height: 1.18;
	letter-spacing: -.055em;
	color: var(--navy)
}

.org-head p {
	margin: 0;
	color: var(--muted);
	font-size: 18px;
	font-weight: 700
}

.org-board {
	position: relative;
	border-radius: 40px;
	padding: 46px;
	background: rgba(255, 255, 255, .88);
	border: 1px solid rgba(219, 231, 242, .95);
	box-shadow: var(--shadow2);
	backdrop-filter: blur(14px);
	overflow: hidden
}

.org-board:before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(8, 119, 242, .06), transparent 34%, rgba(0, 200, 210, .06));
	pointer-events: none
}

.org-board>* {
	position: relative;
	z-index: 1
}

.ceo-node {
	width: min(430px, 100%);
	margin: 0 auto 70px;
	padding: 28px 34px;
	border-radius: 30px;
	background: linear-gradient(135deg, #071b34, #0b3b75 48%, #0877f2);
	color: #fff;
	box-shadow: 0 28px 80px rgba(7, 27, 52, .34);
	text-align: center;
	position: relative
}

.ceo-node:after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -70px;
	width: 2px;
	height: 70px;
	transform: translateX(-50%);
	background: linear-gradient(to bottom, var(--cyan), rgba(8, 119, 242, .18))
}

.ceo-node small {
	display: block;
	font-size: 13px;
	font-weight: 950;
	color: #8ff8ff;
	letter-spacing: .08em;
	text-transform: uppercase
}

.ceo-node strong {
	display: block;
	font-size: 48px;
	line-height: 1;
	margin: 10px 0 8px;
	letter-spacing: -.04em
}

.ceo-node span {
	display: block;
	color: rgba(255, 255, 255, .78);
	font-weight: 750
}

.org-line {
	height: 2px;
	background: linear-gradient(90deg, transparent, rgba(8, 119, 242, .28), rgba(0, 200, 210, .48), rgba(8, 119, 242, .28), transparent);
	margin: 0 auto 42px;
	width: 78%
}

.team-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px
}

.team-card {
	position: relative;
	min-height: 310px;
	padding: 26px;
	border-radius: 30px;
	background: #fff;
	border: 1px solid var(--line);
	box-shadow: 0 14px 40px rgba(7, 27, 52, .08);
	transition: .22s;
	overflow: hidden
}

.team-card:before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 7px;
	background: linear-gradient(90deg, var(--blue), var(--cyan))
}

.team-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow)
}

.team-icon {
	width: 70px;
	height: 70px;
	border-radius: 24px;
	display: grid;
	place-items: center;
	margin-bottom: 22px;
	font-size: 32px;
	background: linear-gradient(135deg, #e9f3ff, #e9fffb);
	color: var(--blue);
	box-shadow: 0 12px 26px rgba(8, 119, 242, .10)
}

.team-card h3 {
	margin: 0 0 9px;
	font-size: 27px;
	letter-spacing: -.045em;
	color: var(--navy)
}

.team-card p {
	margin: 0;
	color: var(--muted);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.75
}

.team-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 20px
}

.team-tags span {
	display: inline-flex;
	padding: 7px 10px;
	border-radius: 999px;
	background: #f4f9ff;
	border: 1px solid var(--line);
	font-size: 12px;
	font-weight: 900;
	color: #344966
}

.team-card.logistics {
	background: linear-gradient(180deg, #fff, #f8fbff)
}

.team-card.logistics:before {
	background: linear-gradient(90deg, #ec2a8c, #0877f2)
}

.subteams {
	margin-top: 18px;
	display: grid;
	gap: 9px
}

.subteams a, .subteams .subteam-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 11px 13px;
	border-radius: 14px;
	background: rgba(8, 119, 242, .06);
	border: 1px solid rgba(8, 119, 242, .10);
	font-size: 13px;
	font-weight: 950;
	color: var(--navy)
}

.subteams a:after, .subteams .subteam-link:after {
	content: '→';
	color: var(--blue)
}

.org-note {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-top: 26px
}

.org-note div {
	padding: 20px 22px;
	border-radius: 22px;
	background: rgba(255, 255, 255, .82);
	border: 1px solid var(--line);
	box-shadow: 0 12px 30px rgba(7, 27, 52, .05)
}

.org-note b {
	display: block;
	color: var(--navy);
	font-size: 18px;
	margin-bottom: 5px
}

.org-note span {
	display: block;
	color: var(--muted);
	font-size: 13px;
	font-weight: 750
}

.login-page {
	min-height: 100vh;
	padding: 116px 0 72px;
	background: linear-gradient(135deg, rgba(7, 27, 52, .92), rgba(8, 119, 242, .72)),
		url('/images/logisfactory_main_20260703.png') center/cover fixed no-repeat;
	position: relative;
	overflow-x: hidden
}

.login-page:before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 15% 15%, rgba(255, 255, 255, .15), transparent 28%),
		linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
	background-size: auto, 64px 64px, 64px 64px;
	pointer-events: none
}

.login-page .container.login-wrap {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: 34px;
	align-items: stretch
}

.login-page .brand-panel {
	grid-column: 1;
	grid-row: 1
}

.login-page .login-card {
	grid-column: 2;
	grid-row: 1
}

.brand-panel {
	min-height: 610px;
	padding: 54px;
	border-radius: 34px;
	color: #fff;
	background: linear-gradient(180deg, rgba(7, 27, 52, .36), rgba(7, 27, 52, .64));
	border: 1px solid rgba(255, 255, 255, .18);
	backdrop-filter: blur(14px);
	box-shadow: 0 32px 90px rgba(0, 0, 0, .22);
	display: flex;
	flex-direction: column;
	justify-content: space-between
}

.brand-panel .eyebrow {
	display: inline-flex;
	width: max-content;
	padding: 9px 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .25);
	color: #9ff8ff;
	font-size: 13px;
	font-weight: 950;
	letter-spacing: .03em;
	text-transform: uppercase
}

.brand-panel h1 {
	margin: 24px 0 18px;
	font-size: clamp(40px, 5vw, 68px);
	line-height: 1.1;
	letter-spacing: -.06em
}

.brand-panel h1 strong {
	color: #6cf7ff
}

.brand-panel p {
	margin: 0;
	max-width: 620px;
	color: rgba(255, 255, 255, .82);
	font-size: 18px;
	font-weight: 700
}

.login-card {
	background: rgba(255, 255, 255, .97);
	border: 1px solid rgba(255, 255, 255, .8);
	border-radius: 34px;
	padding: 42px;
	box-shadow: 0 32px 90px rgba(7, 27, 52, .22);
	display: flex;
	flex-direction: column;
	justify-content: center
}

.login-card-head {
	text-align: center;
	margin-bottom: 30px
}

.login-card-head .mini {
	display: inline-flex;
	padding: 7px 12px;
	border-radius: 999px;
	background: #eaf3ff;
	color: var(--blue);
	font-size: 12px;
	font-weight: 950;
	text-transform: uppercase
}

.login-card-head h2 {
	margin: 14px 0 8px;
	color: var(--navy);
	font-size: 34px;
	letter-spacing: -.045em
}

.login-card-head p {
	margin: 0;
	color: var(--muted);
	font-size: 14px;
	font-weight: 700
}

.login-page .alert {
	margin-bottom: 18px;
	padding: 13px 14px;
	border-radius: 14px;
	font-size: 13px;
	font-weight: 800
}

.login-page .alert.error {
	background: #fff0f2;
	color: #d63b52;
	border: 1px solid #ffd1d8
}

.login-page .alert.success {
	background: #eaf8f2;
	color: #15956a;
	border: 1px solid #bfead8
}

.login-page .form-group {
	margin-bottom: 18px
}

.login-page .form-group label {
	display: block;
	margin-bottom: 7px;
	color: var(--navy);
	font-size: 13px;
	font-weight: 950
}

.login-page .form-control {
	width: 100%;
	height: 52px;
	border: 1px solid var(--line);
	border-radius: 15px;
	padding: 0 15px;
	background: #f8fbff;
	color: var(--ink);
	font-weight: 750;
	outline: none
}

.login-page .form-control:focus {
	border-color: rgba(8, 119, 242, .45);
	box-shadow: 0 0 0 4px rgba(8, 119, 242, .08);
	background: #fff
}

.login-page .form-text {
	margin-top: 6px;
	color: var(--muted);
	font-size: 12px;
	font-weight: 650
}

.login-page .invalid-feedback {
	display: block;
	margin-top: 6px;
	color: #dc3545;
	font-size: 12px;
	font-weight: 700
}

.login-page .password-wrap {
	position: relative
}

.login-page .password-toggle {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	padding: 7px 9px;
	border-radius: 10px;
	background: #eef4fb;
	color: var(--navy);
	font-size: 12px;
	font-weight: 900;
	border: 0;
	cursor: pointer
}

.login-page .password-wrap .form-control {
	padding-right: 58px
}

.login-page .login-btn {
	width: 100%;
	height: 52px;
	border-radius: 15px;
	background: linear-gradient(135deg, var(--blue), var(--blue2));
	color: #fff;
	font-weight: 950;
	border: 0;
	box-shadow: 0 15px 34px rgba(8, 119, 242, .24);
	transition: .18s;
	cursor: pointer
}

.login-page .login-btn:hover {
	transform: translateY(-2px)
}

.login-page .login-links {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--line);
	text-align: center
}

.login-page .login-links p {
	margin: 0 0 8px;
	color: var(--muted);
	font-size: 14px
}

.login-page .login-links a {
	color: var(--blue);
	font-weight: 900
}

.login-page .login-links .sub-link {
	display: inline-block;
	margin-top: 8px;
	color: var(--muted);
	font-size: 13px;
	font-weight: 750
}

.login-page .login-links .recovery-links {
	margin-bottom: 12px
}

.login-page .login-links .recovery-links .sep {
	margin: 0 10px;
	color: var(--line);
	font-weight: 400
}

.login-page .info-note {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	margin-top: 20px;
	padding: 13px 14px;
	border-radius: 14px;
	background: #f6f9fc;
	border: 1px solid var(--line);
	color: var(--muted);
	font-size: 12px;
	font-weight: 700
}

.login-page .security-note {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	margin-top: 20px;
	padding: 13px 14px;
	border-radius: 14px;
	background: #f6f9fc;
	border: 1px solid var(--line);
	color: var(--muted);
	font-size: 12px;
	font-weight: 700
}

.job-table-wrap {
	border-radius: 28px;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--line);
	box-shadow: var(--shadow)
}

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

.job-table thead {
	background: linear-gradient(135deg, #eef7ff, #eafffb)
}

.job-table th {
	padding: 16px 14px;
	text-align: center;
	color: var(--navy);
	font-size: 14px;
	font-weight: 950;
	border-bottom: 1px solid var(--line)
}

.job-table td {
	padding: 18px 14px;
	border-bottom: 1px solid var(--line);
	vertical-align: middle
}

.job-table tr:last-child td {
	border-bottom: 0
}

.job-table tbody tr:hover {
	background: #f8fbff
}

.job-no a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 12px;
	background: #e9f3ff;
	color: var(--blue);
	font-weight: 950
}

.time {
	color: var(--muted);
	font-size: 13px;
	text-align: center;
	white-space: nowrap
}

.job-title {
	font-size: 17px;
	color: var(--navy);
	font-weight: 950
}

.job-title:hover {
	color: var(--blue)
}

.job-meta {
	margin-top: 5px;
	color: var(--muted);
	font-size: 13px;
	font-weight: 700
}

.amount {
	text-align: right;
	font-weight: 950;
	color: var(--navy);
	white-space: nowrap
}

.amount small {
	display: block;
	color: var(--muted);
	font-weight: 700
}

.left {
	text-align: left;
	font-weight: 650;
	color: var(--navy);
	white-space: nowrap
}

.status {
	text-align: center;
	white-space: nowrap
}

.badge {
	display: inline-flex;
	align-items: center;
	padding: 6px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 950;
	margin: 2px
}

.badge.blue {
	background: #e9f3ff;
	color: var(--blue)
}

.badge.gray {
	background: #eef2f7;
	color: #526071
}

.badge.cyan {
	background: #e7fbfc;
	color: #0799a0
}

.badge.gold,
.detail-badges .badge.recommend {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: linear-gradient(
		120deg,
		#c9920a 0%,
		#ffd54f 18%,
		#fff9c4 32%,
		#ffb300 48%,
		#ffe082 62%,
		#f9a825 78%,
		#ffca28 100%
	);
	background-size: 220% 220%;
	color: #4a3200;
	border: 1px solid rgba(180, 120, 0, 0.45);
	box-shadow:
		0 0 14px rgba(255, 193, 7, 0.55),
		0 2px 6px rgba(154, 106, 0, 0.25),
		inset 0 1px 0 rgba(255, 255, 255, 0.65);
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
	animation: badge-gold-shimmer 3s ease-in-out infinite;
}

.badge.gold::after,
.detail-badges .badge.recommend::after {
	content: "";
	position: absolute;
	top: -60%;
	left: -75%;
	width: 45%;
	height: 220%;
	background: linear-gradient(
		90deg,
		transparent,
		rgba(255, 255, 255, 0.15),
		rgba(255, 255, 255, 0.75),
		rgba(255, 255, 255, 0.15),
		transparent
	);
	transform: rotate(22deg);
	animation: badge-gold-gleam 2.6s ease-in-out infinite;
	pointer-events: none;
	z-index: 0;
}

@keyframes badge-gold-shimmer {
	0%,
	100% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
}

@keyframes badge-gold-gleam {
	0%,
	100% {
		left: -75%;
		opacity: 0;
	}
	12% {
		opacity: 1;
	}
	48% {
		left: 130%;
		opacity: 1;
	}
	60% {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.badge.gold,
	.detail-badges .badge.recommend {
		animation: none;
		background: linear-gradient(135deg, #ffe082, #ffb300);
	}

	.badge.gold::after,
	.detail-badges .badge.recommend::after {
		animation: none;
		display: none;
	}
}

.badge.dark {
	background: #edf1f7;
	color: #1f2f46
}

.job-card-list {
	display: none;
	gap: 14px
}

.job-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 24px;
	padding: 20px;
	box-shadow: 0 12px 30px rgba(7, 27, 52, .06)
}

.job-card-top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 12px
}

.job-card-title {
	font-size: 18px;
	font-weight: 950;
	color: var(--navy);
	line-height: 1.35
}

.job-card-title:hover {
	color: var(--blue)
}

.job-card-meta {
	color: var(--muted);
	font-size: 13px;
	font-weight: 700
}

.job-card-money {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-top: 16px
}

.job-card-info{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:14px;
}

.job-card-info div{
    padding:13px 14px;
    border-radius:16px;
    background:#f8fbff;
    border:1px solid var(--line);
}

.job-card-info span{
    display:block;
    font-size:12px;
    color:var(--muted);
    font-weight:900;
    margin-bottom:4px;
}

.job-card-info b{
    display:block;
    color:var(--navy);
    font-size:14px;
    font-weight:950;
}

.money-box {
	padding: 14px;
	border-radius: 16px;
	background: #f8fbff;
	border: 1px solid var(--line)
}

.money-box span {
	display: block;
	font-size: 12px;
	color: var(--muted);
	font-weight: 900
}

.money-box b {
	display: block;
	margin-top: 4px;
	color: var(--navy);
	font-size: 16px
}

.money-box b span{
	display: block;
	margin-top: 4px;
	color: var(--navy);
	font-size: 16px
}

.money-box b small {
	display: block;
	margin-top: 4px;
	color: var(--muted);
	font-size: 12px;
	font-weight: 700
}

.footer {
	background: #06162b;
	color: rgba(255, 255, 255, .62);
	padding: 56px 0 30px
}

.footer-grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 40px
}

.footer .logo {
	color: #fff
}

.footer .logo img {
	
}

.footer h4 {
	color: #fff;
	margin: 0 0 16px
}

.footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 9px
}

.footer p, .footer li {
	font-size: 14px
}

.footer a:hover {
	color: #fff
}

.copy {
	border-top: 1px solid rgba(255, 255, 255, .08);
	margin-top: 34px;
	padding-top: 22px;
	font-size: 12px
}

.float {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 30;
	display: flex;
	flex-direction: column;
	gap: 10px
}

.float a {
	background: var(--cyan);
	color: #fff;
	border-radius: 999px;
	padding: 13px 17px;
	font-weight: 950;
	box-shadow: 0 10px 28px rgba(0, 200, 210, .32)
}

@media ( max-width :1120px) {
	.menu {
		gap: 18px;
		font-size: 14px
	}
	.filter-grid {
		grid-template-columns: repeat(6, 1fr)
	}
	.col-2, .col-3 {
		grid-column: span 2
	}
	.col-btn {
		grid-column: span 2
	}
}

@media ( max-width :1020px) {
	.menu, .nav-cta {
		display: none
	}
	.footer-grid {
		grid-template-columns: 1fr
	}
	.jobs-summary {
		display: flex;
		margin-top: 0
	}
}

@media ( max-width :760px) {
	.container {
		width: min(100% - 28px, 1240px)
	}
	.sub-hero {
		padding: 112px 0 34px
	}
	.jobs-section {
		padding: 24px 0 76px
	}
	.search-card {
		padding: 22px;
		border-radius: 24px
	}
	.search-title {
		display: block
	}
	.search-title p {
		margin-top: 6px
	}
	.filter-grid {
		grid-template-columns: 1fr
	}
	.col-2, .col-3, .col-btn {
		grid-column: span 1
	}
	.keyword-input-group {
		grid-template-columns: 1fr
	}
	.job-table-wrap {
		display: none
	}
	.job-card-list {
		display: grid
	}
	.list-head {
		align-items: flex-start;
		flex-direction: column
	}
	.summary-card {
		border-right: 0;
		padding: 0
	}
	.jobs-summary {
		gap: 8px 14px
	}
	.footer {
		padding-bottom: 86px
	}
	.float {
		right: 14px;
		bottom: 14px
	}
	.float a {
		padding: 11px 13px;
		font-size: 13px
	}
	.job-pagination {
		gap: 4px;
		margin-top: 18px
	}
	.job-pagination a {
		min-width: 28px;
		padding: 6px 8px;
		font-size: 12px;
		border-radius: 12px
	}
	.job-pagination a.active {
		box-shadow: 0 6px 16px rgba(8, 119, 242, .18)
	}
	.notice-section {
		padding: 24px 0 76px
	}
	.notice-summary {
		display: block
	}
	.notice-summary span {
		display: block;
		margin-top: 5px
	}
	.search-card.notice-search {
		grid-template-columns: 1fr
	}
	.search-card.notice-search .btn.primary {
		width: 100%
	}
	.notice-table-wrap {
		display: none
	}
	.notice-card-list {
		display: grid
	}
	.notice-pagination {
		gap: 4px;
		margin-top: 18px
	}
	.notice-pagination a {
		min-width: 32px;
		height: 36px;
		padding: 0 8px;
		font-size: 12px
	}
	.article-head {
		padding: 24px 20px
	}
	.article-head h2 {
		font-size: 25px
	}
	.article-meta {
		gap: 8px 14px
	}
	.article-body {
		padding: 28px 20px;
		font-size: 16px;
		min-height: 240px
	}
	.article-attachments, .notice-attach-images {
		padding: 0 20px 24px
	}
	.notice-nav-row {
		grid-template-columns: 72px 1fr;
		padding: 16px
	}
	.article-actions .btn.primary {
		width: 100%
	}
	.qna-section {
		padding: 24px 0 76px
	}
	.qna-top {
		display: block;
		padding: 16px 18px
	}
	.qna-top p {
		margin-top: 5px;
		font-size: 13px
	}
	.qna-top .btn.primary {
		width: 100%;
		margin-top: 14px
	}
	.search-card.qna-search {
		grid-template-columns: 1fr
	}
	.search-card.qna-search .btn.primary {
		width: 100%
	}
	.qna-table-wrap {
		display: none
	}
	.qna-card-list {
		display: grid
	}
	.greeting-section {
		padding: 56px 0 72px
	}
	.greeting-aside {
		padding: 26px 22px;
		border-radius: 24px
	}
	.greeting-aside h2 {
		font-size: 28px
	}
	.greeting-document {
		padding: 30px 22px;
		border-radius: 24px
	}
	.greeting-lead p {
		font-size: 16px
	}
	.greeting-text h3 {
		font-size: 21px;
		margin-top: 32px
	}
	.greeting-text p {
		font-size: 15px;
		line-height: 1.82;
		word-break: break-word
	}
	.ceo-message {
		padding: 32px 22px;
		border-radius: 24px
	}
	.ceo-sign strong {
		font-size: 28px
	}
	.location-section {
		padding: 56px 0 72px
	}
	.location-info {
		padding: 26px;
		border-radius: 26px
	}
	.location-map, .location-map iframe {
		min-height: 320px;
		border-radius: 26px
	}
	.location-actions .btn.primary, .location-actions .btn.ghost {
		width: 100%
	}
	.answer-head, .answer-body, .attachment-box, .qna-image-attachments {
		padding-left: 20px;
		padding-right: 20px
	}
	.org-section {
		padding: 56px 0 76px
	}
	.org-head {
		text-align: left
	}
	.org-board {
		padding: 28px 18px;
		border-radius: 30px
	}
	.ceo-node {
		padding: 24px 22px;
		margin-bottom: 52px
	}
	.ceo-node:after {
		bottom: -52px;
		height: 52px
	}
	.ceo-node strong {
		font-size: 40px
	}
	.org-line {
		width: 100%;
		margin-bottom: 28px
	}
	.team-grid {
		grid-template-columns: 1fr
	}
	.team-card {
		min-height: auto;
		padding: 24px;
		border-radius: 26px
	}
	.login-page {
		padding: 104px 0 56px;
		background-attachment: scroll
	}
	.login-page .container.login-wrap {
		grid-template-columns: 1fr
	}
	.login-page .brand-panel,
	.login-page .login-card {
		grid-column: 1;
		grid-row: auto
	}
	.brand-panel {
		min-height: auto;
		padding: 30px;
		border-radius: 26px
	}
	.brand-panel h1 {
		font-size: 38px
	}
	.brand-panel p {
		font-size: 16px
	}
	.login-card {
		padding: 28px 22px;
		border-radius: 26px
	}
	.login-card-head h2 {
		font-size: 29px
	}
}

@media ( max-width :560px) {
	.brand-panel {
		display: none
	}
	.login-page .container.login-wrap {
		display: block
	}
}

@media ( max-width :1100px) {
	.team-grid {
		grid-template-columns: repeat(2, 1fr)
	}
	.org-note {
		grid-template-columns: 1fr
	}
}

@media ( max-width :900px) {
	.location-layout, .transport-guide {
		grid-template-columns: 1fr
	}
	.location-map, .location-map iframe {
		min-height: 360px
	}
}

@media ( max-width :980px) {
	.greeting-wrap {
		grid-template-columns: 1fr;
		gap: 28px
	}
	.greeting-aside {
		position: static
	}
}

@media ( max-width :420px) {
	.sub-hero h1 {
		font-size: 34px
	}
	.sub-hero p {
		font-size: 16px
	}
	.job-card-money {
		grid-template-columns: 1fr
	}
	.mobile-menu-inner {
		width: min(100% - 28px, 1240px)
	}
	.job-card-info{
		grid-template-columns:1fr;
	}
	.job-pagination {
		gap: 3px
	}
	.job-pagination a {
		min-width: 24px;
		padding: 5px 6px;
		font-size: 11px;
		border-radius: 10px
	}
}

/* job detail page */
:root {
	--green: #12a66a;
	--danger: #d63b52;
}

.detail-section {
	padding: 38px 0 96px;
	background: linear-gradient(180deg, #fff, #f4faff)
}

.password-gate-wrap {
	max-width: 620px;
	margin: 0 auto
}

.detail-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(360px, .65fr);
	gap: 24px;
	align-items: start
}

.card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 28px;
	box-shadow: var(--shadow);
	overflow: hidden
}

.card-head {
	padding: 26px 28px;
	border-bottom: 1px solid var(--line);
	background: linear-gradient(135deg, #f8fbff, #eef9ff)
}

.card-body {
	padding: 28px
}

.job-topline {
	display: flex;
	justify-content: space-between;
	gap: 18px;
	align-items: flex-start
}

.detail-badges {
	display: flex;
	gap: 7px;
	flex-wrap: wrap;
	margin-bottom: 13px
}

.detail-badges .badge.top {
	background: #071b34;
	color: #fff
}

.detail-badges .badge.direct {
	background: #e7fbfc;
	color: #078e95
}

.detail-badges .badge.progress {
	background: #e9f3ff;
	color: var(--blue)
}

.job-heading h2 {
	margin: 0;
	color: var(--navy);
	font-size: 31px;
	line-height: 1.3;
	letter-spacing: -.045em
}

.job-sub {
	margin-top: 9px;
	color: var(--muted);
	font-size: 14px;
	font-weight: 750
}

.quick-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap
}

.btn.green {
	background: linear-gradient(135deg, #14b978, #098855);
	color: #fff;
	box-shadow: 0 15px 34px rgba(18, 166, 106, .22)
}

.info-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px
}

.info-item {
	padding: 17px 18px;
	border: 1px solid var(--line);
	border-radius: 18px;
	background: #f8fbff
}

.info-item.wide {
	grid-column: 1/-1
}

.info-item span {
	display: block;
	color: var(--muted);
	font-size: 12px;
	font-weight: 900;
	margin-bottom: 5px
}

.info-item b {
	display: block;
	color: var(--navy);
	font-size: 16px
}

.info-item b a {
	color: var(--blue);
	font-weight: 950;
	word-break: break-all
}

.info-item b a:hover {
	color: var(--blue2);
	text-decoration: underline
}

.info-item small {
	display: block;
	margin-top: 4px;
	color: var(--muted);
	font-size: 13px;
	font-weight: 700
}

.info-item .salary {
	color: var(--blue);
	font-size: 20px
}

.detail-content {
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid var(--line)
}

.detail-content h3 {
	margin: 0 0 14px;
	color: var(--navy);
	font-size: 22px
}

.detail-content .detail-html {
	color: #44546b;
	font-weight: 650;
	line-height: 1.85
}

.detail-content img {
	max-width: 100%;
	height: auto;
	border-radius: 18px;
	margin-top: 16px
}

.apply-card {
	position: sticky;
	top: 98px
}

.apply-card .card-head {
	background: linear-gradient(135deg, #0c9c68, #13c886);
	color: #fff
}

.apply-card .card-head h2 {
	margin: 0;
	font-size: 24px
}

.apply-card .card-head p {
	margin: 6px 0 0;
	color: rgba(255, 255, 255, .82);
	font-size: 14px;
	font-weight: 700
}

.form-group {
	margin-bottom: 17px
}

.form-group label {
	display: block;
	margin-bottom: 7px;
	color: var(--navy);
	font-size: 13px;
	font-weight: 950
}

.form-control {
	width: 100%;
	height: 48px;
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 0 14px;
	background: #f8fbff;
	color: var(--ink);
	font-weight: 700;
	outline: none
}

textarea.form-control {
	height: auto;
	min-height: 108px;
	padding: 13px 14px;
	resize: vertical
}

.form-control:focus {
	border-color: rgba(8, 119, 242, .45);
	box-shadow: 0 0 0 4px rgba(8, 119, 242, .08);
	background: #fff
}

.form-control[readonly] {
	background: #eef3f8;
	color: #68758a
}

.captcha-box {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: #f8fbff;
	margin-bottom: 9px
}

.captcha-image {
	height: 42px;
	width: auto;
	border-radius: 8px
}

.privacy-box {
	max-height: 220px;
	overflow: auto;
	padding: 16px;
	border: 1px solid var(--line);
	border-radius: 16px;
	background: #f8fbff;
	color: #536176;
	font-size: 12px;
	line-height: 1.65;
	margin: 18px 0
}

.privacy-box h4 {
	margin: 0 0 10px;
	color: var(--navy);
	font-size: 14px
}

.privacy-box p {
	margin: 0 0 9px
}

.agree-row {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 16px 0 20px;
	color: #314159;
	font-size: 14px;
	font-weight: 750
}

.agree-row input {
	margin-top: 4px
}

.detail-notice {
	margin-bottom: 18px;
	padding: 14px 16px;
	border-radius: 15px;
	background: #eaf8f2;
	border: 1px solid #bdebd8;
	color: #176846;
	font-size: 13px;
	font-weight: 800
}

.detail-alert {
	margin-bottom: 18px;
	padding: 14px 16px;
	border-radius: 15px;
	font-size: 13px;
	font-weight: 800
}

.detail-alert.success {
	background: #eaf8f2;
	border: 1px solid #bdebd8;
	color: #176846
}

.detail-alert.error {
	background: #fdecef;
	border: 1px solid #f5c2c9;
	color: #b42318
}

.list-actions {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	margin-top: 22px
}

.logo img {
	/*max-height: 42px;*/
	width: auto
}

@media ( max-width :1020px) {
	.detail-grid {
		grid-template-columns: 1fr
	}
	.apply-card {
		position: static
	}
}

@media ( max-width :760px) {
	.detail-section {
		padding: 24px 0 76px
	}
	.card-head, .card-body {
		padding: 21px
	}
	.job-topline {
		display: block
	}
	.quick-actions {
		margin-top: 18px
	}
	.info-grid {
		grid-template-columns: 1fr
	}
	.job-heading h2 {
		font-size: 25px
	}
	.list-actions {
		flex-direction: column
	}
	.list-actions .btn {
		width: 100%
	}
}

/* Join page */
.join-section {
	padding: 38px 0 96px;
	background: linear-gradient(180deg, #fff, #f4faff)
}

.join-shell {
	max-width: 980px;
	margin: 0 auto
}

.join-shell>.container {
	width: 100%;
	padding: 0
}

.join-section .join-steps {
	position: relative;
	max-width: 640px;
	margin: 0 auto 10px;
	padding: 0 12px
}

.join-section .join-steps:before {
	content: "";
	position: absolute;
	top: 21px;
	left: 12%;
	right: 12%;
	height: 2px;
	background: var(--line);
	z-index: 0
}

.join-section .step-item {
	position: relative;
	z-index: 1;
	min-width: 120px;
	color: var(--muted)
}

.join-section .step-badge {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin: 0 auto;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--line);
	font-weight: 950;
	color: var(--muted)
}

.join-section .step-item.active .step-badge {
	background: linear-gradient(135deg, var(--blue), var(--cyan));
	border-color: transparent;
	color: #fff;
	box-shadow: 0 10px 24px rgba(8, 119, 242, .24)
}

.join-section .step-item.active {
	color: var(--navy);
	font-weight: 900
}

.join-section #joinForm {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 30px;
	padding: 30px;
	box-shadow: var(--shadow)
}

.join-section #joinForm section {
	padding: 24px;
	border-radius: 24px;
	background: #fbfdff;
	border: 1px solid var(--line)
}

.join-section #joinForm section+section {
	margin-top: 20px
}

.join-section #joinForm h5 {
	margin: 0 0 18px;
	color: var(--navy);
	font-size: 22px;
	letter-spacing: -.03em
}

.join-section .form-label {
	display: block;
	margin-bottom: 7px;
	color: var(--navy);
	font-size: 13px;
	font-weight: 950
}

.join-section .form-select {
	width: 100%;
	height: 50px;
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 0 14px;
	background: #fff;
	color: var(--ink);
	font-weight: 700;
	outline: none
}

.join-section .form-control {
	height: 50px;
	background: #fff
}

.join-section .form-control:focus,
.join-section .form-select:focus {
	border-color: rgba(8, 119, 242, .45);
	box-shadow: 0 0 0 4px rgba(8, 119, 242, .08)
}

.join-section .form-control[type=file] {
	padding: 10px 12px;
	height: auto
}

.join-section .form-text {
	margin-top: 6px;
	color: var(--muted);
	font-size: 12px;
	font-weight: 650
}

.join-section .form-check {
	display: flex;
	align-items: flex-start;
	gap: 9px
}

.join-section .form-check-input {
	margin-top: 5px
}

.join-section .form-check-label {
	font-size: 14px;
	font-weight: 800;
	color: var(--navy)
}

.join-section .form-check-inline {
	display: inline-flex;
	margin-right: 18px
}

.join-section .btn {
	min-height: 46px;
	padding: 0 18px;
	border-radius: 13px;
	border: 1px solid transparent;
	font-weight: 900
}

.join-section .btn-primary {
	background: linear-gradient(135deg, var(--blue), var(--blue2));
	color: #fff;
	box-shadow: 0 12px 28px rgba(8, 119, 242, .2)
}

.join-section .btn-secondary {
	background: #eef3f8;
	color: var(--navy);
	border-color: var(--line)
}

.join-section .btn-outline-secondary {
	background: #fff;
	color: var(--navy);
	border-color: var(--line)
}

.join-section .btn-outline-primary {
	background: linear-gradient(135deg, #eef6ff, #e8f4ff);
	color: var(--blue);
	border-color: rgba(8, 119, 242, .45);
	box-shadow: 0 6px 16px rgba(8, 119, 242, .1)
}

.join-section .btn-outline-primary:hover {
	background: linear-gradient(135deg, var(--blue), var(--blue2));
	color: #fff;
	border-color: transparent;
	box-shadow: 0 10px 24px rgba(8, 119, 242, .22)
}

.join-section .btn-sm {
	min-height: 38px;
	padding: 0 13px;
	font-size: 12px
}

.join-section .privacy-consent-notice {
	max-height: 260px;
	overflow-y: auto;
	padding: 18px;
	border-radius: 16px;
	background: #fff;
	border: 1px solid var(--line);
	color: #4b5a70;
	font-size: 12px;
	line-height: 1.65
}

.join-section .privacy-consent-title {
	margin: 0 0 12px;
	color: var(--navy);
	font-size: 16px
}

.join-section .privacy-consent-heading {
	margin: 16px 0 6px !important;
	color: var(--navy);
	font-weight: 900
}

.join-section .privacy-consent-notice p {
	margin: 0 0 8px
}

.join-section .privacy-consent-notice ol,
.join-section .privacy-consent-notice ul {
	padding-left: 20px
}

.join-section .agreement-scroll {
	scrollbar-width: thin;
	scrollbar-color: #b8cae0 #eef4fa
}

.join-section .captcha-box {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 72px;
	padding: 12px;
	border-radius: 14px;
	background: #fff;
	border: 1px solid var(--line);
	margin-bottom: 0
}

.join-section .captcha-block {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px
}

.join-section .captcha-inline {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 14px
}

.join-section .captcha-field {
	flex: 0 1 220px;
	min-width: 160px
}

.join-section .join-form-actions {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: 10px
}

.join-section .captcha-image {
	max-height: 48px;
	width: auto
}

.join-section #loginIdCheckResult,
.join-section #nicknameCheckResult,
.join-section #passwordMatchResult {
	min-height: 20px
}

.join-section .digits-only {
	text-align: center
}

.join-section .join-alert {
	margin-bottom: 20px;
	padding: 14px 18px;
	border-radius: 15px;
	background: #fdecef;
	border: 1px solid #f5c2c9;
	color: #b42318;
	font-size: 14px;
	font-weight: 800
}

.join-section .row {
	display: flex;
	flex-wrap: wrap;
	margin: -8px
}

.join-section .row>* {
	padding: 8px
}

.join-section .justify-content-center {
	justify-content: center
}

.join-section .align-items-end {
	align-items: flex-end
}

.join-section .col-lg-8 {
	width: 100%
}

.join-section .col-md-8 {
	width: 66.666%
}

.join-section .col-md-6 {
	width: 50%
}

.join-section .col-md-4 {
	width: 33.333%
}

.join-section .col-md-3 {
	width: 25%
}

.join-section .col-12 {
	width: 100%
}

.join-section .col-4 {
	width: 33.333%
}

.join-section .col-auto {
	width: auto;
	flex: 0 0 auto
}

.join-section .d-flex {
	display: flex
}

.join-section .d-grid {
	display: grid
}

.join-section .justify-content-between {
	justify-content: space-between
}

.join-section .justify-content-md-center {
	justify-content: center
}

.join-section .text-center {
	text-align: center
}

.join-section .mb-4 {
	margin-bottom: 24px !important
}

.join-section .mb-3 {
	margin-bottom: 16px !important
}

.join-section .mb-2 {
	margin-bottom: 10px !important
}

.join-section .mb-1 {
	margin-bottom: 6px !important
}

.join-section .mt-4 {
	margin-top: 24px !important
}

.join-section .mt-3 {
	margin-top: 16px !important
}

.join-section .mt-1 {
	margin-top: 6px !important
}

.join-section .pb-2 {
	padding-bottom: 10px !important
}

.join-section .px-5 {
	padding-left: 28px !important;
	padding-right: 28px !important
}

.join-section .px-4 {
	padding-left: 22px !important;
	padding-right: 22px !important
}

.join-section .border-bottom {
	border-bottom: 1px solid var(--line) !important
}

.join-section .small {
	font-size: 12px
}

.join-section .text-muted {
	color: var(--muted) !important
}

.join-section .text-danger {
	color: #d63b52 !important
}

.join-section .text-success {
	color: #15956a !important
}

.join-section .w-100 {
	width: 100%
}

.join-section .gap-2 {
	gap: 10px
}

.join-section .g-3 {
	row-gap: 4px
}

.join-section .g-2 {
	row-gap: 2px
}

@media ( max-width :760px) {
	.join-section {
		padding: 24px 0 76px
	}
	.join-section #joinForm {
		padding: 18px;
		border-radius: 24px
	}
	.join-section #joinForm section {
		padding: 18px;
		border-radius: 20px
	}
	.join-section .col-md-8,
	.join-section .col-md-6,
	.join-section .col-md-4,
	.join-section .col-md-3 {
		width: 100%
	}
	.join-section .join-steps {
		padding: 0
	}
	.join-section .step-item {
		min-width: 0;
		flex: 1
	}
	.join-section .step-badge {
		width: 40px;
		height: 40px
	}
	.join-section .join-steps:before {
		top: 19px
	}
	.join-section .privacy-consent-notice {
		max-height: 220px
	}
	.join-section .captcha-inline {
		align-items: flex-end
	}
	.join-section .join-form-actions {
		flex-wrap: nowrap
	}
}

.join-complete-section {
	padding-bottom: 96px
}

.join-complete-card {
	max-width: 720px;
	margin: 0 auto;
	padding: 48px 40px;
	border-radius: 28px;
	background: #fff;
	border: 1px solid var(--line);
	box-shadow: var(--shadow);
	text-align: center
}

.join-complete-icon {
	width: 72px;
	height: 72px;
	margin: 0 auto 24px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #0877f2 0%, #00c8d2 100%);
	color: #fff;
	font-size: 34px;
	font-weight: 900;
	line-height: 1
}

.join-complete-card h2 {
	margin: 0 0 16px;
	font-size: clamp(24px, 3vw, 32px);
	font-weight: 900;
	color: var(--ink);
	letter-spacing: -.02em
}

.join-complete-lead {
	margin: 0 0 12px;
	font-size: 17px;
	color: var(--muted);
	line-height: 1.7
}

.join-complete-lead strong {
	color: var(--ink);
	font-weight: 800
}

.join-complete-desc {
	margin: 0 0 24px;
	font-size: 15px;
	color: var(--muted);
	line-height: 1.7
}

.join-complete-checklist {
	list-style: none;
	margin: 0 0 32px;
	padding: 18px 22px;
	border-radius: 18px;
	background: #f5faff;
	border: 1px solid #dbe7f2;
	text-align: left
}

.join-complete-checklist li {
	position: relative;
	padding-left: 22px;
	font-size: 14px;
	color: var(--muted);
	line-height: 1.6
}

.join-complete-checklist li+li {
	margin-top: 8px
}

.join-complete-checklist li:before {
	content: "•";
	position: absolute;
	left: 0;
	color: var(--blue);
	font-weight: 900
}

.join-complete-actions {
	justify-content: center;
	margin-top: 0
}

@media (max-width: 767px) {
	.join-complete-card {
		padding: 36px 24px
	}
	.join-complete-actions {
		flex-direction: column
	}
	.join-complete-actions .btn {
		width: 100%
	}
}

/* Mypage */
.mypage-section {
	padding: 48px 0 88px;
	background: linear-gradient(180deg, #f5faff 0%, #fff 42%, #f5faff 100%)
}

.mypage-layout {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: 28px;
	align-items: start
}

.mypage-nav {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 22px;
	padding: 18px;
	box-shadow: var(--shadow)
}

.mypage-nav-title {
	margin: 0 0 14px;
	font-size: 15px;
	font-weight: 900;
	color: var(--navy)
}

.mypage-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px
}

.mypage-nav-list a {
	display: block;
	padding: 12px 14px;
	border-radius: 14px;
	color: var(--ink);
	font-size: 14px;
	font-weight: 750;
	text-decoration: none;
	border: 1px solid transparent
}

.mypage-nav-list a:hover {
	background: #f3f8ff;
	border-color: #dbe7f2
}

.mypage-nav-list a.active {
	background: #eaf3ff;
	border-color: #c8def7;
	color: var(--blue);
	font-weight: 900
}

.mypage-nav-list a.danger {
	color: #c0394f
}

.mypage-nav-list a.danger.active {
	background: #fff0f2;
	border-color: #f3c6cd
}

.mypage-content {
	min-width: 0
}

.mypage-card-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px
}

.mypage-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 24px;
	padding: 28px;
	box-shadow: var(--shadow);
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-height: 220px
}

.mypage-card.danger-card {
	border-color: #f3c6cd;
	background: linear-gradient(180deg, #fff, #fff8f9)
}

.mypage-card h3 {
	margin: 0;
	font-size: 22px;
	color: var(--navy)
}

.mypage-card p {
	margin: 0;
	color: var(--muted);
	font-size: 14px;
	line-height: 1.65;
	flex: 1
}

.mypage-card .mypage-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 18px;
	border-radius: 14px;
	font-size: 14px;
	font-weight: 900;
	text-decoration: none;
	border: none;
	cursor: pointer
}

.mypage-card .mypage-btn.primary {
	background: linear-gradient(135deg, var(--blue), var(--cyan));
	color: #fff
}

.mypage-card .mypage-btn.danger {
	background: #fff;
	color: #c0394f;
	border: 1px solid #f3c6cd
}

.mypage-form-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 28px;
	padding: 32px;
	box-shadow: var(--shadow)
}

.mypage-form-card h2 {
	margin: 0 0 8px;
	font-size: 28px;
	color: var(--navy)
}

.mypage-form-card .lead {
	margin: 0 0 24px;
	color: var(--muted);
	font-size: 14px
}

.mypage-readonly {
	background: #f6f9fc;
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 12px 14px;
	font-size: 14px;
	color: var(--ink)
}

.profile-summary-section {
	background: linear-gradient(180deg, #f8fbff 0%, #f3f7fb 100%);
	border: 1px solid #dbe7f3;
	border-radius: 22px;
	padding: 24px;
	margin-bottom: 28px
}

.profile-edit-section {
	padding-top: 4px
}

.section-heading {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px
}

.section-heading h2 {
	margin: 6px 0 8px;
	font-size: 24px;
	color: var(--navy)
}

.section-heading p {
	margin: 0;
	color: var(--muted);
	font-size: 14px;
	line-height: 1.6
}

.section-kicker {
	display: inline-block;
	font-size: 11px;
	font-weight: 900;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--blue)
}

.readonly-badge,
.editable-badge {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 0 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 900
}

.readonly-badge {
	background: #eef3f8;
	color: #5b6b7f;
	border: 1px solid #d5e0ec
}

.editable-badge {
	background: #eaf8f2;
	color: #15956a;
	border: 1px solid #bfe8d4
}

.profile-summary-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px
}

.profile-summary-item {
	background: #fff;
	border: 1px solid #dbe7f3;
	border-radius: 16px;
	padding: 16px 18px;
	min-height: 88px
}

.summary-label {
	display: block;
	font-size: 12px;
	font-weight: 800;
	color: var(--muted);
	margin-bottom: 8px
}

.summary-value {
	display: block;
	font-size: 16px;
	font-weight: 900;
	color: var(--navy);
	line-height: 1.45;
	word-break: break-all
}

.member-status {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	padding: 0 10px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 900
}

.member-status.active {
	background: #eaf8f2;
	color: #15956a
}

.member-status.inactive {
	background: #fff0f2;
	color: #c0394f
}

.password-notice {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	background: #f8fbff;
	border: 1px solid #dbe7f3;
	border-radius: 16px;
	padding: 16px 18px;
	margin-bottom: 22px
}

.password-notice-icon {
	font-size: 18px;
	line-height: 1
}

.password-notice strong {
	display: block;
	margin-bottom: 4px;
	color: var(--navy);
	font-size: 14px
}

.password-notice p {
	margin: 0;
	color: var(--muted);
	font-size: 13px;
	line-height: 1.55
}

.password-confirm-area {
	background: #fffdf8;
	border: 1px dashed #ecdca8;
	border-radius: 16px;
	padding: 16px 18px
}

.required-mark {
	color: #d63b52;
	font-weight: 900
}

.editable-control {
	background: #fff;
	border-color: #cfd9e6
}

.editable-control:focus {
	border-color: var(--blue);
	box-shadow: 0 0 0 3px rgba(0, 95, 216, .12)
}

.duplicate-check-btn {
	font-weight: 800
}

.mypage-form-card .profile-edit-section .section-heading {
	margin-bottom: 18px
}

.mypage-alert {
	margin-bottom: 18px;
	padding: 13px 14px;
	border-radius: 14px;
	font-size: 14px;
	font-weight: 700
}

.mypage-alert.success {
	background: #eaf8f2;
	color: #15956a;
	border: 1px solid #bfe8d4
}

.mypage-alert.error {
	background: #fff0f2;
	color: #d63b52;
	border: 1px solid #f3c6cd
}

.mypage-alert.warning {
	background: #fff8e8;
	color: #9a6b00;
	border: 1px solid #f2dfaa
}

.mypage-form-actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 24px
}

.mypage-form-actions .btn-save {
	min-width: 120px;
	min-height: 48px;
	border: none;
	border-radius: 14px;
	background: linear-gradient(135deg, var(--blue), var(--cyan));
	color: #fff;
	font-weight: 900;
	cursor: pointer
}

.mypage-form-actions .btn-cancel,
.mypage-form-actions .btn-secondary-link {
	min-height: 48px;
	display: inline-flex;
	align-items: center;
	padding: 0 18px;
	border-radius: 14px;
	border: 1px solid var(--line);
	background: #fff;
	color: var(--muted);
	font-weight: 800;
	text-decoration: none
}

.mypage-form-actions .btn-withdraw {
	min-width: 120px;
	min-height: 48px;
	border: 1px solid #f3c6cd;
	border-radius: 14px;
	background: #fff0f2;
	color: #c0394f;
	font-weight: 900;
	cursor: pointer
}

.mypage-section .password-wrap {
	position: relative
}

.mypage-section .password-toggle {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	border: none;
	background: transparent;
	color: var(--muted);
	font-size: 12px;
	font-weight: 800;
	cursor: pointer
}

.mypage-section .password-wrap .form-control {
	padding-right: 58px
}

.mypage-withdraw-box {
	background: #fff8f9;
	border: 1px solid #f3c6cd;
	border-radius: 18px;
	padding: 18px;
	margin-bottom: 20px
}

.mypage-withdraw-box h3 {
	margin: 0 0 10px;
	font-size: 18px;
	color: #c0394f
}

.mypage-withdraw-box ul {
	margin: 0;
	padding-left: 18px;
	color: var(--muted);
	font-size: 14px;
	line-height: 1.7
}

@media (max-width: 1024px) {
	.mypage-card-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr))
	}
}

@media (max-width: 760px) {
	.mypage-layout {
		grid-template-columns: 1fr
	}
	.mypage-card-grid {
		grid-template-columns: 1fr
	}
	.mypage-form-card {
		padding: 24px 20px
	}
	.section-heading {
		flex-direction: column
	}
	.profile-summary-grid {
		grid-template-columns: 1fr
	}
}

/* Policy pages (terms, privacy) */
.policy-section {
	background: linear-gradient(180deg, #f5faff 0%, #fff 46%, #f5faff 100%);
	padding: 82px 0 96px
}

.policy-document {
	max-width: 980px;
	margin: 0 auto;
	background: #fff;
	border: 1px solid var(--line);
	box-shadow: var(--shadow);
	border-radius: 30px;
	padding: 44px 48px
}

.policy-doc-head {
	padding-bottom: 26px;
	margin-bottom: 30px;
	border-bottom: 1px solid var(--line)
}

.policy-doc-head h2 {
	margin: 14px 0 8px;
	font-size: 34px;
	line-height: 1.2;
	letter-spacing: -.05em;
	color: var(--navy)
}

.policy-doc-head p {
	margin: 0;
	color: var(--muted);
	font-weight: 700
}

.policy-doc-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 14px;
	border-radius: 999px;
	background: #eef6ff;
	border: 1px solid rgba(8, 119, 242, .15);
	color: var(--blue);
	font-size: 13px;
	font-weight: 950;
	letter-spacing: .03em;
	text-transform: uppercase
}

.policy-text h3 {
	margin: 42px 0 14px;
	padding-top: 22px;
	border-top: 1px solid #e8f0f8;
	font-size: 25px;
	line-height: 1.3;
	letter-spacing: -.045em;
	color: var(--navy)
}

.policy-text h3:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0
}

.policy-text h3.policy-chapter {
	margin-top: 42px;
	padding-top: 28px;
	border-top: 1px solid var(--line);
	color: var(--blue);
	font-size: 24px;
	line-height: 1.3;
	letter-spacing: -.045em
}

.policy-text h3.policy-chapter:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0
}

.policy-text h4 {
	margin: 26px 0 10px;
	font-size: 19px;
	color: var(--blue);
	letter-spacing: -.03em
}

.policy-text p {
	margin: 0 0 14px;
	color: #3f4e63;
	font-size: 16px;
	font-weight: 650;
	line-height: 1.85;
	word-break: keep-all
}

.policy-text a {
	color: var(--blue);
	font-weight: 850;
	text-decoration: underline;
	text-underline-offset: 3px
}

@media ( max-width :760px) {
	.policy-section {
		padding: 56px 0 72px
	}
	.policy-document {
		padding: 28px 22px;
		border-radius: 24px
	}
	.policy-doc-head h2 {
		font-size: 26px
	}
	.policy-text h3 {
		font-size: 21px;
		margin-top: 34px
	}
	.policy-text h3.policy-chapter {
		font-size: 21px;
		margin-top: 34px
	}
	.policy-text h4 {
		font-size: 17px
	}
	.policy-text p {
		font-size: 15px;
		line-height: 1.78;
		word-break: break-word
	}
}

/* estimate-form.css 로드 보조 — .field input width:100% 덮어씀 (일자리문의 이메일/연락처 한 줄) */
.estimate-section .field .inline-input-row {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-width: 0
}

.estimate-section .field .inline-input-row.email-row > .email-id,
.estimate-section .field .inline-input-row.email-row > .email-domain {
	flex: 1 1 0;
	min-width: 0
}

.estimate-section .field .inline-input-row.email-row > .email-at,
.estimate-section .field .inline-input-row.phone-row > .inline-sep {
	flex: 0 0 auto;
	color: var(--muted);
	font-weight: 900;
	padding: 0 2px
}

.estimate-section .field .inline-input-row.email-row > .email-domain-select {
	flex: 0 1 132px;
	min-width: 0;
	max-width: 38%
}

.estimate-section .field .inline-input-row.phone-row > .phone-prefix {
	flex: 0 0 96px;
	min-width: 0
}

.estimate-section .field .inline-input-row.phone-row > .phone-part {
	flex: 1 1 0;
	min-width: 0
}

.estimate-section .field .inline-input-row > .input,
.estimate-section .field .inline-input-row > .select {
	width: auto;
	min-width: 0;
	max-width: 100%;
	height: 52px;
	box-sizing: border-box
}

@media (max-width: 760px) {
	.estimate-section .field .inline-input-row.email-row,
	.estimate-section .field .inline-input-row.phone-row {
		gap: 6px
	}

	.estimate-section .field .inline-input-row > .input,
	.estimate-section .field .inline-input-row > .select {
		height: 48px;
		padding-left: 10px;
		padding-right: 10px;
		font-size: 14px
	}

	.estimate-section .field .inline-input-row.email-row > .email-domain-select {
		flex: 0 1 30%;
		max-width: 112px;
		font-size: 13px;
		padding-right: 28px
	}

	.estimate-section .field .inline-input-row.phone-row > .phone-prefix {
		flex: 0 0 72px
	}
}

@media (max-width: 420px) {
	.estimate-section .field .inline-input-row.email-row,
	.estimate-section .field .inline-input-row.phone-row {
		gap: 4px
	}

	.estimate-section .field .inline-input-row > .input,
	.estimate-section .field .inline-input-row > .select {
		height: 46px;
		padding-left: 8px;
		padding-right: 8px;
		font-size: 13px
	}

	.estimate-section .field .inline-input-row.email-row > .email-domain-select {
		flex: 0 1 28%;
		max-width: 96px;
		font-size: 12px
	}

	.estimate-section .field .inline-input-row.phone-row > .phone-prefix {
		flex: 0 0 64px
	}
}

/* estimate-section — 비밀번호 입력 내부 보기 버튼 */
.estimate-section .password-wrap {
	position: relative;
	width: 100%
}

.estimate-section .password-wrap .input {
	width: 100%;
	padding-right: 58px;
	box-sizing: border-box
}

.estimate-section .password-toggle {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	padding: 7px 9px;
	border-radius: 10px;
	background: #eef4fb;
	color: var(--navy);
	font-size: 12px;
	font-weight: 900;
	border: 0;
	cursor: pointer;
	line-height: 1;
	z-index: 1
}

.nav .nav-cta .lang-switch {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 850;
}

.nav .nav-cta .lang-switch a,
.nav .nav-cta .lang-switch a:visited {
	color: rgba(255, 255, 255, .92);
	text-decoration: none;
	font-size: 15px;
	font-weight: 850;
	opacity: 1;
	transition: color 0.15s ease;
}

.nav .nav-cta .lang-switch a:hover {
	color: #6cf7ff;
}

.nav .nav-cta .lang-switch a.active {
	color: rgba(255, 255, 255, .92);
	font-weight: 850;
}

.nav .nav-cta .lang-switch .lang-sep {
	color: rgba(255, 255, 255, .92);
	font-weight: 850;
	opacity: 0.55;
}

.lang-switch {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.lang-switch a {
	text-decoration: none;
}

.mobile-menu-panel .lang-switch {
	margin: 0.75rem 0 1rem;
	padding: 0 0.25rem;
}

.mobile-menu-panel .lang-switch a {
	color: var(--ink);
}

.mobile-menu-panel .lang-switch a.active {
	color: var(--navy);
	font-weight: 700;
}

.mobile-menu-panel .lang-switch .lang-sep {
	color: var(--muted);
}

/* English header: tighter spacing so nav does not wrap or overflow */
html[lang="en"] .nav .menu,
html[lang="en"] .nav .menu-link {
	font-size: 14px;
	font-weight: 800;
}

html[lang="en"] .nav .menu {
	gap: 16px;
}

html[lang="en"] .nav .nav-cta .lang-switch a {
	font-size: 14px;
	font-weight: 800;
}

html[lang="en"] .nav .nav-cta-link {
	font-size: 13px;
	padding: 8px 12px;
}

@media (min-width: 1021px) and (max-width: 1280px) {
	html[lang="en"] .nav .menu,
	html[lang="en"] .nav .menu-link {
		font-size: 13px;
	}

	html[lang="en"] .nav .menu {
		gap: 11px;
	}

	html[lang="en"] .nav .nav-cta {
		gap: 8px;
	}

	html[lang="en"] .nav .nav-cta .lang-switch {
		gap: 6px;
	}

	html[lang="en"] .nav .nav-cta .lang-switch a {
		font-size: 13px;
	}

	html[lang="en"] .nav .nav-cta-link {
		font-size: 12px;
		padding: 7px 10px;
	}
}

@media (min-width: 1021px) and (max-width: 1140px) {
	html[lang="en"] .nav .menu,
	html[lang="en"] .nav .menu-link {
		font-size: 12px;
	}

	html[lang="en"] .nav .menu {
		gap: 8px;
	}
}




/* =========================================
   Greeting page - redesigned
   ========================================= */

.greeting-section {
    background:
        radial-gradient(circle at 8% 8%, rgba(8,119,242,.08), transparent 28%),
        radial-gradient(circle at 92% 15%, rgba(0,200,210,.08), transparent 26%),
        linear-gradient(180deg, #f6faff 0%, #fff 46%, #f5f9fd 100%);
    padding: 88px 0 108px;
}

.greeting-intro {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 28px;
    margin-bottom: 34px;
}

.greeting-quote,
.greeting-summary {
    border-radius: 30px;
    overflow: hidden;
}

.greeting-quote {
    position: relative;
    padding: 42px;
    background: linear-gradient(
        145deg,
        #0a32b1 0%,
        #2457d6 58%,
        #2b7be8 100%
    );
    color: #fff;
    box-shadow: var(--shadow2);
}

.greeting-quote:before {
    content: "";
    position: absolute;
    width: 240px;
    height: 240px;
    right: -70px;
    top: -85px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(0,200,210,.35),
        rgba(0,200,210,0)
    );
}

.greeting-quote .kicker,
.section-kicker {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.greeting-quote .kicker {
    position: relative;
    z-index: 1;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
    color: #a9f8ff;
}

.section-kicker {
    color: var(--blue);
    background: #edf6ff;
    border: 1px solid #d8ebff;
}

.greeting-quote h2 {
    position: relative;
    z-index: 1;
    margin: 22px 0 16px;
    font-size: clamp(34px, 4.6vw, 58px);
    line-height: 1.18;
    letter-spacing: -.06em;
}

.greeting-quote h2 strong {
    color: #74f4ff;
}

.greeting-quote p {
    position: relative;
    z-index: 1;
    margin: 0;
    color: rgba(255,255,255,.8);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.9;
}

.greeting-summary {
    padding: 38px;
    background: rgba(255,255,255,.95);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

.greeting-summary .summary-mark {
    display: inline-flex;
    width: 56px;
    height: 56px;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--blue), var(--cyan));
    color: #fff;
    font-size: 27px;
}

.greeting-summary h3 {
    margin: 20px 0 10px;
    font-size: 30px;
    line-height: 1.28;
    letter-spacing: -.05em;
    color: var(--navy);
}

.greeting-summary h3 strong {
    color: var(--blue);
}

.greeting-summary p {
    margin: 0;
    color: #526581;
    font-weight: 650;
    line-height: 1.9;
    word-break: keep-all;
}

.greeting-block {
    margin-top: 28px;
    padding: 38px;
    border-radius: 30px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 18px 48px rgba(7,27,52,.07);
}

.greeting-block-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 26px;
}

.greeting-block-head h2 {
    margin: 10px 0 0;
    font-size: clamp(28px, 3.4vw, 40px);
    line-height: 1.25;
    letter-spacing: -.055em;
    color: var(--navy);
}

.greeting-block-head p {
    margin: 0;
    color: var(--muted);
    font-weight: 700;
}


/* =========================
   Vision / Mission
   ========================= */

.vm-grid,
.competency-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.vm-card,
.value-card,
.business-card,
.competency-card {
    border-radius: 24px;
    border: 1px solid var(--line);
}

.vm-card {
    padding: 30px;
    background: linear-gradient(180deg, #f8fbff, #fff);
}

.vm-card.vision {
    background: linear-gradient(
        135deg,
        rgba(8,119,242,.08),
        #fff
    );
}

.vm-card.mission {
    background: linear-gradient(
        135deg,
        rgba(0,200,210,.08),
        #fff
    );
}

.vm-card .num {
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--blue);
    font-weight: 950;
}

.vm-card h3 {
    margin: 18px 0 5px;
    color: var(--navy);
    font-size: 25px;
}

.vm-card .sub {
    color: var(--blue);
    font-size: 13px;
    font-weight: 900;
}

.vm-card blockquote {
    margin: 18px 0 0;
    padding-left: 18px;
    border-left: 4px solid var(--blue);
    color: #29456f;
    font-size: 18px;
    line-height: 1.85;
    font-weight: 400; /*900*/
    word-break: keep-all;
}


/* =========================
   Core Values
   ========================= */

.value-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 18px;
}

.value-card,
.competency-card {
    padding: 28px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(7,27,52,.05);
}

.value-card .icon,
.competency-card .icon {
    display: inline-flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: linear-gradient(135deg, #eaf4ff, #e8fcfd);
    color: var(--blue);
    font-size: 23px;
}

.value-card h3,
.competency-card h3 {
    margin: 17px 0 9px;
    font-size: 22px;
    color: var(--navy);
}

.value-card h3 small {
    display: block;
    margin-top: 3px;
    color: var(--blue);
    font-size: 12px;
}

.value-card p,
.competency-card p {
    margin: 0;
    color: #526581;
    font-weight: 400; /* 650 */
    line-height: 1.82;
    word-break: keep-all;
}


/* =========================
   Company Summary
   ========================= */

.summary-panel {
    padding: 34px;
    border-radius: 26px;
    background: linear-gradient(
        135deg,
        #0a32b1,
        #2b6fe7
    );
    color: #fff;
}

.summary-panel h3 {
    margin: 0 0 14px;
    font-size: 24px; /*24*/
}

.summary-panel p {
    margin: 0;
    color: rgba(255,255,255,.8);
    font-size: 17px;
    font-weight: 450; /*650*/
    line-height: 1.9;
}


/* =========================
   Business Areas
   ========================= */

.business-grid {
    display: grid;
    gap: 18px;
}

.business-card {
    padding: 30px;
    background: linear-gradient(180deg, #fff, #f9fbfe);
}

.business-card h3 {
    margin: 0 0 14px;
    color: var(--navy);
    font-size: 23px;
}

.business-card h3 span {
    color: var(--blue);
    font-size: 14px;
    margin-left: 8px;
}

.business-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 12px;
}

.business-card li {
    position: relative;
    padding-left: 28px;
    color: #526581;
    font-weight: 500; /*650*/
    line-height: 1.8;
    word-break: keep-all;
}

.business-card li:before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 2px;
    width: 19px;
    height: 19px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #eaf4ff;
    color: var(--blue);
    font-size: 12px;
    font-weight: 950;
}


/* =========================
   Responsive
   ========================= */

@media (max-width: 980px) {

    .greeting-intro,
    .vm-grid,
    .competency-grid,
    .value-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {

    .greeting-section {
        padding: 58px 0 76px;
    }

    .greeting-quote,
    .greeting-summary,
    .greeting-block {
        padding: 26px 22px;
        border-radius: 24px;
    }

    .greeting-block-head {
        display: block;
    }

    .vm-card,
    .value-card,
    .business-card,
    .competency-card {
        padding: 24px 20px;
        border-radius: 20px;
    }
}

.error-hero-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
}

.error-hero-code {
    color: var(--cyan);
    letter-spacing: -.04em;
}

.error-hero-sep {
    opacity: .72;
    font-weight: 700;
}

.error-page-section {
    padding: 38px 0 96px;
    background: linear-gradient(180deg, #fff, #f4faff);
}

.error-page-card {
    max-width: 760px;
    margin: 0 auto;
    padding: 48px 40px;
    border-radius: 28px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    text-align: center;
}

.error-page-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 88px;
    min-height: 88px;
    margin: 0 auto 24px;
    padding: 0 18px;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(8, 119, 242, .12), rgba(0, 216, 223, .16));
    color: var(--blue);
    font-size: clamp(34px, 6vw, 48px);
    font-weight: 900;
    letter-spacing: -.04em;
}

.error-page-card h2 {
    margin: 0 0 16px;
    font-size: clamp(24px, 3vw, 32px);
    color: var(--navy);
}

.error-page-card p {
    margin: 0 0 20px;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.75;
}

.error-page-path {
    margin: 0 0 28px;
    color: var(--muted);
    font-size: 14px;
}

.error-page-path code {
    padding: 4px 8px;
    border-radius: 8px;
    background: #f3f8fc;
    color: var(--navy);
    font-size: 13px;
    word-break: break-all;
}

.error-page-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.error-page-actions .btn {
    min-width: 160px;
}

.error-page-actions .btn.secondary {
    background: #eef4fa;
    color: var(--navy);
    border: 1px solid var(--line);
}

.error-page-actions .btn.secondary:hover {
    transform: translateY(-2px);
}

@media (max-width: 1020px) {
    .error-page-section {
        padding: 28px 0 72px;
    }

    .error-page-card {
        padding: 36px 24px;
        border-radius: 22px;
    }

    .error-page-actions {
        flex-direction: column;
    }

    .error-page-actions .btn {
        width: 100%;
    }
}