.career-home { overflow: hidden; }
.career-hero { display: grid; min-height: 160px; place-items: center; background: linear-gradient(105deg, #00afe8, var(--blue)); color: #fff; text-align: center; }
.career-hero__inner { width: calc(100% - 32px); }
.career-hero h1 { margin: 0; font-size: 30px; line-height: 1.5; letter-spacing: 0; }
.career-hero p { margin: 12px 0 0; font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: 0; }
.career-home__content { width: min(calc(100% - 48px), var(--content-width)); margin-inline: auto; }
.career-section { padding-top: 80px; }
.career-section--popular { padding-bottom: 56px; }
.career-heading { position: relative; margin: 0 0 40px; padding-left: 16px; font-size: 28px; line-height: 1.5; }
.career-heading::before { position: absolute; top: 5px; bottom: 5px; left: 0; width: 4px; background: var(--blue); content: ""; }
.career-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 24px; }
.career-popular-slider { position: relative; }
.career-grid--popular { display: flex; gap: 24px; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x proximity; scrollbar-width: none; }
.career-grid--popular::-webkit-scrollbar { display: none; }
.career-grid--popular .career-card { flex: 0 0 287px; scroll-snap-align: start; }
.career-card { min-width: 0; }
.career-card__link { display: block; }
.career-card__image-link, .career-card__title-link { display: block; }
.career-card__image { position: relative; overflow: hidden; aspect-ratio: 343 / 229; border-radius: 8px; background: var(--soft); }
.career-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.career-card:hover .career-card__image img, .career-card:focus-within .career-card__image img { transform: scale(1.04); }
.career-card__rank { position: absolute; top: 0; left: 0; z-index: 1; display: grid; width: 30px; height: 30px; place-items: center; border-radius: 2px; background: var(--orange); color: #fff; font-size: 16px; font-weight: 700; }
.career-grid--popular .career-card:nth-child(n + 4) .career-card__rank { background: var(--blue); }
.career-card__body { padding-top: 8px; }
.career-card h3 { display: -webkit-box; min-height: 3em; margin: 0; overflow: hidden; font-size: 16px; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.career-card__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.career-card__tags a, .career-card__tags span { padding: 2px 8px; border-radius: 4px; background: var(--soft); color: var(--ink); font-size: 12px; font-weight: 400; line-height: 1.5; }
.career-section--popular .career-card__tags a, .career-section--popular .career-card__tags span { border-radius: 4px; }
.career-card__tags a:hover, .career-card__tags a:focus-visible, .career-tags a:hover, .career-tags a:focus-visible { text-decoration: underline; text-underline-offset: 2px; }
.career-slider__arrow { position: absolute; top: var(--career-slider-arrow-top, 36%); z-index: 3; display: block; width: 36px; height: 36px; padding: 6px; border: 1px solid var(--form-line); border-radius: 50%; background: #fff; color: transparent; font-size: 0; line-height: 0; cursor: pointer; transform: translateY(-50%); transition: opacity .2s ease; }
.career-slider__arrow::before { position: absolute; top: 50%; left: 50%; display: block; width: 20px; height: 20px; background-position: center; background-repeat: no-repeat; background-size: 20px 20px; content: ""; transform: translate(-50%, -50%); }
.career-slider__arrow--prev { left: -18px; }
.career-slider__arrow--prev::before { background-image: url("../images/common/icon-arrow-left-navy.svg?v=20260718"); }
.career-slider__arrow--next { right: -18px; }
.career-slider__arrow--next::before { background-image: url("../images/common/icon-arrow-right-navy.svg?v=20260718"); }
.career-slider__arrow:hover, .career-slider__arrow:focus-visible { opacity: .7; }
.career-slider__arrow:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.career-slider__arrow[hidden], .career-tabs__arrow[hidden] { display: none; }
.career-section--category { padding-top: 56px; }
.career-tabs-wrap { --career-tabs-arrow-space: 52px; position: relative; margin-bottom: 40px; }
.career-tabs { display: flex; width: 100%; min-width: 0; gap: 8px; padding-block: 8px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; }
.career-tabs-wrap.has-visible-next .career-tabs { width: calc(100% - var(--career-tabs-arrow-space)); }
.career-tabs-wrap.has-visible-prev .career-tabs { width: calc(100% - var(--career-tabs-arrow-space)); margin-left: var(--career-tabs-arrow-space); }
.career-tabs-wrap.has-visible-prev.has-visible-next .career-tabs { width: calc(100% - (var(--career-tabs-arrow-space) * 2)); }
.career-tabs::-webkit-scrollbar { display: none; }
.career-tab { flex: 0 0 auto; padding: 8px 16px; border: 1px solid var(--form-line); border-radius: 999px; background: #fff; color: var(--ink); font: inherit; font-size: 14px; font-weight: 500; line-height: 1.5; white-space: nowrap; cursor: pointer; }
.career-tab.is-active, .career-tab:hover { border-color: var(--blue); background: var(--blue); color: #fff; }
.career-tabs__arrow { top: 50%; z-index: 4; overflow: hidden; appearance: none; }
.career-tabs__arrow.career-slider__arrow--prev { left: 0; }
.career-tabs__arrow.career-slider__arrow--next { right: 0; }
.career-more { display: grid; width: 360px; min-height: 62px; margin: 40px auto 0; padding: 16px 40px; place-items: center; border: 0; border-radius: 2px; background: var(--blue); color: #fff; font-size: 20px; font-weight: 700; line-height: 1.5; box-shadow: 0 3px 2px rgba(0, 0, 0, .15); cursor: pointer; transition: opacity .2s ease; }
.career-more:hover, .career-more:focus-visible { opacity: .7; }
.career-more[hidden] { display: none !important; }
.career-section--tags { padding-top: 56px; padding-bottom: 80px; }
.career-section--tags .career-heading { margin-bottom: 40px; }
.career-tags { display: flex; flex-wrap: wrap; gap: 8px 8px; }
.career-tags a, .career-tags span { padding: 2px 8px; border-radius: 4px; background: var(--soft); color: var(--ink); font-size: 12px; font-weight: 400; line-height: 1.5; }

.career-section--recommended { padding-top: 80px; padding-bottom: 80px; }
.career-recommended-slider { position: relative; }
.career-section--recommended .career-grid--recommended { display: flex; gap: 24px; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x proximity; scrollbar-width: none; }
.career-section--recommended .career-grid--recommended::-webkit-scrollbar { display: none; }
.career-section--recommended .career-grid--recommended .career-card { flex: 0 0 calc((100% - 72px) / 4); scroll-snap-align: start; }

.career-cases { padding: 80px 0; background: var(--soft); }
.career-cases__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.career-case { display: flex; height: 100%; flex-direction: column; overflow: hidden; border-radius: 8px; background: #fff; box-shadow: 3px 2px 10px rgba(0, 0, 0, .1); }
.career-case__visual { aspect-ratio: 16 / 9; overflow: hidden; background: #fff; }
.career-case__visual img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.career-case:hover .career-case__visual img, .career-case:focus-visible .career-case__visual img { transform: scale(1.04); }
.career-case__body { position: relative; flex: 1; min-height: 224px; padding: 16px 16px 64px; }
.career-case__body h3 { margin: 0 0 16px; font-size: 16px; line-height: 1.6; }
.career-case__career { display: flex; align-items: center; gap: 10px; margin: 8px 0 0; font-size: 14px; line-height: 1.5; }
.career-case__career span { display: grid; min-width: 64px; min-height: 28px; padding: 2px 8px; place-items: center; border: 1px solid var(--blue); border-radius: 2px; color: var(--blue); font-size: 12px; font-weight: 700; line-height: 1.5; }
.career-case__career strong { color: var(--ink); font-size: 14px; font-weight: 400; }
.career-case__career--after span { background: var(--blue); color: #fff; }
.career-case__career--after strong { color: var(--blue); font-size: 14px; font-weight: 700; }
.career-case__body i { position: absolute; right: 16px; bottom: 16px; display: block; width: 40px; height: 40px; border: 1px solid var(--blue); border-radius: 50%; font-style: normal; }
.career-case__body i::before { position: absolute; top: 50%; left: 50%; width: 19px; height: 2px; background: var(--blue); content: ""; transform: translate(-55%, -50%); }
.career-case__body i::after { position: absolute; top: 50%; left: calc(50% + 4px); width: 9px; height: 9px; border-top: 2px solid var(--blue); border-right: 2px solid var(--blue); content: ""; transform: translate(-50%, -50%) rotate(45deg); }
.career-case--soon { display: grid; min-height: 0; place-items: center; color: var(--ink); font-size: 28px; font-weight: 700; line-height: 1.5; }
@media (max-width: 767px) {
  .career-hero { min-height: 131px; padding: 24px 16px; }
  .career-hero h1 { font-size: 26px; line-height: 1.5; }
  .career-hero p { max-width: 343px; margin: 8px auto 0; font-size: 12px; font-weight: 400; line-height: 1.5; }
  .career-home__content { width: calc(100% - 32px); }
  .career-section { padding-top: 40px; }
  .career-section--popular { padding-bottom: 40px; }
  .career-heading { margin-bottom: 32px; padding-left: 12px; font-size: 24px; line-height: 1.5; }
  .career-heading::before { top: 6px; bottom: 6px; width: 3px; }
  .career-grid { display: block; }
  .career-grid--popular { display: block; overflow: visible; }
  .career-grid .career-card + .career-card { margin-top: 16px; }
  .career-card__link { display: grid; grid-template-columns: 115px minmax(0, 1fr); gap: 16px; }
  .career-card__image { aspect-ratio: 115 / 76; border-radius: 4px; }
  .career-card__body { padding-top: 0; }
  .career-card h3 { min-height: auto; font-size: 14px; line-height: 1.5; }
  .career-card__rank { width: 21px; height: 21px; font-size: 14px; }
  .career-card__tags { gap: 8px; margin-top: 8px; }
  .career-card__tags a, .career-card__tags span { padding: 2px 8px; font-size: 12px; }
  .career-section--popular .career-card, .career-section--category .career-card, .career-section--recommended .career-card { padding-bottom: 16px; border-bottom: 1px solid var(--line); }
  .career-section--popular .career-card + .career-card, .career-section--category .career-card + .career-card, .career-section--recommended .career-card + .career-card { margin-top: 16px; }
  .career-slider__arrow { display: none; }
  .career-section--category { padding-top: 40px; }
  .career-tabs-wrap { --career-tabs-arrow-space: 44px; margin: 0 0 32px; }
  .career-tabs { gap: 8px; padding: 0; }
  .career-tab { padding: 8px 16px; font-size: 14px; }
  .career-tabs__arrow { display: block; }
  .career-more { width: 100%; min-height: 62px; margin-top: 32px; font-size: 20px; }
  .career-section--tags { padding-top: 40px; padding-bottom: 60px; }
  .career-section--tags .career-heading { margin-bottom: 32px; }
  .career-tags { gap: 8px; }
  .career-tags a, .career-tags span { padding: 2px 8px; font-size: 12px; }
  .career-section--recommended { padding-top: 60px; padding-bottom: 60px; }
  .career-section--recommended .career-grid--recommended { display: block; overflow: visible; }
  .career-section--recommended .career-grid--recommended .career-card { flex: none; }
  .career-cases { padding: 60px 0; }
  .career-cases .career-heading { font-size: 26px; }
  .career-cases__grid { display: block; }
  .career-case { display: block; }
  .career-case + .career-case { margin-top: 24px; }
  .career-case__visual { border-radius: 4px; }
  .career-case__body { min-height: 224px; }
  .career-case__body h3 { font-size: 16px; }
  .career-case--soon { display: none; }
}