/* ==========================================================================
   web1 – design.css (main.html)
   ========================================================================== */

/* -----------------------------
   GNB
------------------------------ */
.gnb {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding: 0 40px;
  z-index: 10;
}

.gnb__logo-wrap {
  display: flex;
  flex-direction: column;
  width: 220px;
}

.gnb__logo {
  position: relative;
  width: 100%;
  height: 51px;
}

.gnb__logo a {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}

.gnb__logo-img {
  display: block;
  width: 220px;
  height: 51px;
  object-fit: contain;
  object-position: left center;
}

.gnb__logo-icon {
  position: absolute;
  left: 0;
  top: 0.5px;
  width: 40px;
  height: 50px;
}

.gnb__logo-text {
  position: absolute;
  left: 50px;
  top: 3.5px;
  display: flex;
  flex-direction: column;
  font-family: "Gmarket Sans", "GmarketSans", sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.45px;
  color: var(--text-heading, #111);
  white-space: nowrap;
}

.gnb__logo-mobile {
  display: none;
}

.gnb__logo-mobile a {
  display: flex;
  align-items: center;
  gap: 8px;
}

.gnb__logo-mobile-icon {
  width: 20px;
  height: 25px;
}

.gnb__logo-mobile-text {
  display: flex;
  flex-direction: column;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-white);
}

/* ── 모바일 GNB 오버레이 (Figma: Mobile-nav-menu / 2718:18231) ── */
.gnb__hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--icon-size-lg);
  height: var(--icon-size-lg);
  flex-shrink: 0;
}

.gnb__hamburger svg {
  width: var(--icon-size-lg);
  height: var(--icon-size-lg);
}

/* 오버레이가 열려 있는 동안에는 뒤쪽 문서가 스크롤되지 않게 잠그다.
   layout.css가 html과 body 둘 다에 overflow-x를 지정하고 있어서,
   body 한쪽만 잠그면 문서 스크롤이 그대로 남는다. */
.is-gnb-locked,
.is-gnb-locked body {
  overflow: hidden;
  /* iOS Safari는 overflow: hidden 하나로는 문서 스크롤이 안 잠겨서 높이도 같이 묶어둔다. */
  height: 100%;
}

.gnb__overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

.gnb__overlay[hidden] {
  display: none;
}

.gnb__overlay--open {
  transform: translateX(0);
}

/* 상단 바 */
.gnb__overlay-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  height: 56px;
  padding: 0 var(--spacing-lg);
  background: var(--color-white);
}

.gnb__overlay-logo {
  display: flex;
  align-items: center;
}

.gnb__overlay-logo-img {
  width: 129px;
  height: 32px;
  object-fit: contain;
  object-position: center;
}

.gnb__overlay-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  overflow: clip;
}

.gnb__overlay-close {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--icon-size-lg);
  height: var(--icon-size-lg);
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text-heading);
  cursor: pointer;
}

.gnb__overlay-close-icon {
  width: var(--icon-size-lg);
  height: var(--icon-size-lg);
}

/* 프로필 바 */
.gnb__overlay-profile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-sm);
  flex-shrink: 0;
  padding: var(--spacing-md) var(--spacing-lg) var(--spacing-lg);
  background: var(--color-bg-subtle);
  border-bottom: 1px solid var(--color-border-light);
  overflow: hidden;
}

.gnb__overlay-profile-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  width: 100%;
}

.gnb__overlay-avatar {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  background: var(--color-brand-100);
  overflow: hidden;
}

.gnb__overlay-avatar-img {
  position: absolute;
  top: 17.19%;
  right: 3.16%;
  bottom: -26.01%;
  left: 3.15%;
}

.gnb__overlay-profile-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-xs);
  flex: 1 0 0;
}

.gnb__overlay-profile-name-wrap {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.gnb__overlay-profile-name {
  font-family: var(--font-family-base);
  font-size: var(--font-size-heading-h3);
  font-weight: 700;
  line-height: 1.45;
  color: var(--color-text-heading);
}

/* Figma User Profile Bar(2718:18233)는 360폭 모바일 프레임에서도 heading-h3을 20px 그대로 씀 -
   공용 반응형 토큰(744px 이하에서 20→18 자동 축소)이 이 컴포넌트에는 적용되면 안 돼서 고정값으로 뺌 */
@media (max-width: 744px) {
  .gnb__overlay-profile-name {
    font-size: 20px;
  }
}

.gnb__overlay-profile-arrow {
  flex-shrink: 0;
  width: 15px;
  height: 9px;
  color: var(--color-text-heading);
  transform: rotate(-90deg);
}

.gnb__overlay-logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: var(--spacing-xs);
  height: 36px;
  font-family: var(--font-family-base);
  font-size: var(--font-size-14);
  font-weight: 500;
  line-height: 1.45;
  color: var(--color-text-secondary);
  text-decoration: underline;
}

.gnb__overlay-profile-meta {
  font-family: var(--font-family-base);
  font-size: var(--font-size-body-s);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-tertiary);
}

/* 프로필 바 - 아바타 옆 이름/메타/로그아웃 정보 열 (Figma State=logout, 3069:13502) */
.gnb__overlay-profile-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 0 0;
  min-width: 0;
  padding-top: 8px;
}

.gnb__overlay-profile-meta-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  width: 100%;
}

.gnb__overlay-profile-meta-item {
  font-family: var(--font-family-base);
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.42px;
  color: var(--color-text-tertiary);
  white-space: nowrap;
}

.gnb__overlay-profile-divider {
  flex-shrink: 0;
  width: 1px;
  height: 10px;
  background: var(--color-divider-vertical);
}

.gnb__overlay-profile-logout-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 36px;
  padding: 0 var(--spacing-sm);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-xs);
  background: var(--color-bg-page);
  font-family: var(--font-family-base);
  font-size: var(--font-size-caption-m);
  font-weight: 500;
  line-height: 1.45;
  color: var(--color-text-heading);
}

/* 로그인 안 했을 때의 프로필 바 (Figma UserProfileBar state=login / 2718:18298) */
.gnb__overlay-profile--guest {
  flex-direction: row;
  align-items: center;
  gap: 0;
  padding: 18px var(--spacing-lg);
  overflow: visible;
}

.gnb__overlay-guest-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  flex: 1 0 0;
}

.gnb__overlay-guest-text {
  flex: 1 0 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-body-s);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-body);
}

.gnb__overlay-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: var(--spacing-xs);
  height: 36px;
  padding: 0 var(--spacing-sm);
  border-radius: var(--spacing-2xs);
  background: var(--color-primary);
  font-family: var(--font-family-base);
  font-size: var(--font-size-caption-m);
  font-weight: 500;
  line-height: 1.45;
  color: var(--color-text-inverse);
}

.gnb__overlay-login:hover {
  background: var(--color-primary-hover);
}

.gnb__overlay-login:active {
  background: var(--color-primary-pressed);
}

.gnb__overlay-recent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-6);
  width: 100%;
}

.gnb__overlay-recent-label {
  font-family: var(--font-family-base);
  font-size: var(--font-size-caption-s);
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-text-tertiary);
}

.gnb__overlay-recent-list {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-6);
  width: 100%;
  overflow-x: auto;
}

.gnb__overlay-chip {
  flex-shrink: 0;
}

.gnb__overlay-chip-link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 var(--spacing-md);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-full);
  background: var(--color-white);
  font-family: var(--font-family-base);
  font-size: var(--font-size-caption-m);
  font-weight: 500;
  line-height: 1.45;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.gnb__overlay-chip.is-selected .gnb__overlay-chip-link {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

/* 메뉴 아코디언 */
.gnb__overlay-nav {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}

.gnb__overlay-l1 {
  width: 100%;
}

.gnb__overlay-l1-head {
  display: flex;
  align-items: center;
  gap: var(--spacing-10);
  height: 52px;
  padding: 0 var(--spacing-lg);
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border-light);
  font-family: var(--font-family-base);
  font-size: var(--font-size-heading-h4);
  font-weight: 700;
  line-height: 1.45;
  color: var(--color-text-body);
  cursor: pointer;
}

.gnb__overlay-l1-head.is-active {
  color: var(--color-primary);
}

.gnb__overlay-l1-icon {
  flex-shrink: 0;
  width: var(--icon-size-lg);
  height: var(--icon-size-lg);
}

.gnb__overlay-l2-list {
  width: 100%;
}

.gnb__overlay-l2 {
  width: 100%;
}

.gnb__overlay-l2-link,
.gnb__overlay-l2-toggle {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  width: 100%;
  height: 46px;
  padding: 0 var(--spacing-lg) 0 42px;
  border: 0;
  background: var(--color-white);
  font-family: var(--font-family-base);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-heading);
  text-align: left;
  cursor: pointer;
}

.gnb__overlay-l2-link {
  font-size: var(--font-size-body-m);
}

.gnb__overlay-l2-toggle {
  font-size: var(--font-size-body-s);
}

.gnb__overlay-l2-text {
  flex: 1 0 0;
}

.gnb__overlay-bullet {
  flex-shrink: 0;
  width: 4px;
  height: 4px;
  color: var(--color-text-secondary);
}

.gnb__overlay-chev {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  stroke-width: 1;
  color: var(--color-text-disabled);
}

/* 하위 메뉴가 펼쳐지면 위(-90deg), 접히면 아래(90deg)를 가리킨다 (Figma MenuL2Item / 2718:18270) */
.gnb__overlay-l2-toggle[aria-expanded="true"] .gnb__overlay-chev {
  transform: rotate(-90deg);
}

.gnb__overlay-l2-toggle[aria-expanded="false"] .gnb__overlay-chev {
  transform: rotate(90deg);
}

/* 하위메뉴가 있는 2depth는 "펼쳐진 상태"일 때 활성 컬러가 들어간다 */
.gnb__overlay-l2-link.is-active,
.gnb__overlay-l2-toggle[aria-expanded="true"] {
  background: var(--color-primary-bg);
  color: var(--color-primary);
}

.gnb__overlay-l2-link.is-active .gnb__overlay-bullet,
.gnb__overlay-l2-toggle[aria-expanded="true"] .gnb__overlay-bullet {
  color: var(--color-primary);
}

.gnb__overlay-l2-link.is-active .gnb__overlay-chev,
.gnb__overlay-l2-toggle[aria-expanded="true"] .gnb__overlay-chev {
  stroke-width: 1.5;
  color: var(--color-primary);
}

.gnb__overlay-l3-list {
  width: 100%;
}

.gnb__overlay-l3 {
  width: 100%;
}

.gnb__overlay-l3-link {
  display: flex;
  align-items: center;
  gap: var(--spacing-6);
  width: 100%;
  height: 40px;
  padding: 0 var(--spacing-lg) 0 52px;
  background: var(--color-white);
  font-family: var(--font-family-base);
  font-size: var(--font-size-body-s);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

.gnb__overlay-l3-link.is-current {
  color: var(--color-text-heading);
}

.gnb__overlay-l3-line {
  flex-shrink: 0;
  width: 6px;
  height: 1px;
  color: currentColor;
}

.gnb__overlay-l3-text {
  flex: 1 0 0;
}

/* 하단 바로가기 */
.gnb__overlay-bottom {
  flex-shrink: 0;
  padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-lg);
  background: var(--color-bg-nav-bottom);
}

.gnb__overlay-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  width: 100%;
  height: 44px;
  padding: 0 var(--spacing-lg);
  border-radius: var(--spacing-2xs);
  background: var(--color-primary);
  font-family: var(--font-family-base);
  font-size: var(--font-size-body-s);
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-text-inverse);
}

.gnb__overlay-cta:hover {
  background: var(--color-primary-hover);
}

.gnb__overlay-cta:active {
  background: var(--color-primary-pressed);
}

.gnb__overlay-cta-icon {
  flex-shrink: 0;
  width: var(--icon-size-md);
  height: var(--icon-size-md);
}

.gnb__menu {
  display: flex;
  flex: 1 0 0;
  align-items: center;
  justify-content: center;
  gap: 40px;
  min-width: 0;
  font-size: var(--font-size-20);
  font-weight: 500;
  line-height: var(--line-height-tight);
  color: var(--color-white);
}

.gnb__menu-link {
  white-space: nowrap;
}

.gnb__util {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  flex-shrink: 0;
  /* 피그마 _util 고정폭 220px. 바로가기 3개(로그인/회원가입/증명서 진위확인)가
     220px를 넘으므로 메뉴와 겹치지 않도록 최소폭으로 둔다. */
  min-width: 220px;
}

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

.gnb__auth-link {
  font-size: var(--font-size-14);
  font-weight: 500;
  color: var(--color-white);
  white-space: nowrap;
}

.gnb__divider {
  width: 1px;
  height: 12px;
  background: rgba(217, 217, 217, 0.6);
}

/* -----------------------------
   Hero (_Top)
------------------------------ */

#container {
  position: relative;
  margin: 0 auto;
}

.main-hero {
  position: relative;
  width: 100%;
  height: 600px;
  background: url(../../../files/web1/images/common/web_main_bg.png) no-repeat
    left top;
}

.main-hero__mobile-bg {
  display: none;
}

.main-hero__inner {
  width: 1280px;
  margin: 0 auto;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

/* Figma Frame 288(2813:36132): _tit 746px + 우측 534px = 1280px, 간격 0, 상단 정렬 */
.main-hero__col-left {
  display: flex;
  flex-direction: column;
  gap: 60px;
  width: 746px;
  padding-top: 180px;
}

.main-hero__col-right {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 534px;
  padding-top: 180px;
}

/* Figma _tit(2813:36133): padding 30px 0 0 10px, gap 12px */
.main-hero__tit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 0 0 0 10px;
  white-space: nowrap;
}

/* Figma 2813:36135: 달서다름체 타이틀 - 폰트 미보유로 아웃라인 그래픽(인라인 SVG) 처리
   원본 텍스트 박스 495x52 / 글리프 잉크 489x35 */
.main-hero__title {
  display: flex;
  align-items: center;
  height: 52px;
  margin: 0;
  color: var(--color-white);
}

.main-hero__title-img {
  display: block;
  width: 489px;
  height: 35px;
}

/* Figma 2813:36136: Pretendard Regular 20px / lh 1.5 / #fff 90% / -0.5px */
.main-hero__desc {
  margin: 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-20);
  font-weight: 400;
  line-height: var(--line-height-base);
  letter-spacing: -0.5px;
  color: var(--color-white-90);
}

.main-hero__right {
  width: 534px;
  height: 230px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 22px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(6px);
  border-radius: var(--radius-card);
  box-shadow:
    1px 1px 0 0 #c6c6c6,
    -1px -1px 0 0 var(--color-white);
}

/* -----------------------------
   Hero – 비로그인(회원 로그인) 카드
   Figma: _login (2813:37380)
------------------------------ */
.main-hero__right--login {
  align-items: center;
  gap: var(--spacing-xs);
  padding-top: var(--spacing-14);
  padding-bottom: var(--spacing-lg);
  border-radius: var(--radius-26);
}

/* 모바일 전용 로그인 유도 프롬프트(Figma _login 2832:6899) - 웹/태블릿에서는 숨김 */
.main-login__mobile-prompt {
  display: none;
}

/* 모바일 전용 로그인 팝업(Figma _login 2832:6899) - 웹/태블릿에서는 숨김 */
.main-login-popup {
  display: none;
}

.main-login__head {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 30px;
  border-radius: var(--radius-pill);
}

.main-login__head-inner {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  align-items: center;
  gap: var(--spacing-sm);
}

.main-login__title {
  flex: 1 0 0;
  min-width: 0;
  font-weight: 700;
  font-size: var(--font-size-heading-h3);
  line-height: var(--line-height-snug);
  color: var(--color-text-heading);
  word-break: break-word;
}

.main-login__type {
  display: flex;
  align-items: center;
  gap: var(--spacing-xl);
  height: 44px;
}

.main-login__radio {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.main-login__radio-input {
  appearance: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  background: var(--color-bg-page);
  cursor: pointer;
}

.main-login__radio-input:checked {
  border-color: var(--color-primary);
  background: var(--color-bg-page)
    radial-gradient(circle, var(--color-primary) 0 6px, transparent 6px);
}

.main-login__radio-label {
  font-weight: 400;
  font-size: var(--font-size-body-m);
  line-height: var(--line-height-base);
  color: var(--color-text-body);
  white-space: nowrap;
  cursor: pointer;
}

.main-login__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  width: 474px;
}

.main-login__form {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-10);
  width: 100%;
}

.main-login__fields {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-10);
}

.main-login__field {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  width: 100%;
  min-height: 44px;
}

.main-login__input {
  flex: 1 0 0;
  min-width: 40px;
  height: 44px;
  padding: 0 var(--spacing-md);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-bg-page);
  font-family: var(--font-family-base);
  font-weight: 400;
  font-size: var(--font-size-body-m);
  line-height: var(--line-height-base);
  color: var(--color-text-body);
}

.main-login__input::placeholder {
  color: var(--color-text-tertiary);
}

/* 다른 페이지 .form-row input 포커스/비활성 상태와 동일하게 맞춤 */
.main-login__input:focus {
  outline: none;
  border-color: var(--color-primary);
  border-width: 1.5px;
  box-shadow: 0 0 4px var(--color-primary-glow);
}

.main-login__input:disabled {
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
  cursor: not-allowed;
}

.main-login__actions {
  display: flex;
  align-items: flex-start;
  width: 121px;
  overflow: hidden;
}

.main-login__submit {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  height: 98px;
  padding: 0 var(--spacing-xl);
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  font-family: var(--font-family-base);
  font-weight: 600;
  font-size: var(--font-size-body-m);
  line-height: var(--line-height-base);
  color: var(--color-text-inverse);
  white-space: nowrap;
  cursor: pointer;
}

.main-login__links {
  display: flex;
  align-items: center;
  gap: var(--spacing-14);
  width: 100%;
  overflow: hidden;
}

.main-login__sns {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  align-items: center;
  gap: var(--spacing-6);
}

/* SNS 아이콘 하나하나가 각각의 버튼(a)이다. 링크는 아이콘 크기만 차지하고
   모양(원형 배경)은 안쪽 .main-login__sns-icon 이 그대로 담당한다.
   겹침·펼침 모션은 아이콘이 아니라 이 링크에 건다 - 아이콘은 이제 링크마다 하나씩이라
   .main-login__sns-icon:not(:last-child) 가 항상 참이 되어 버린다. */
.main-login__sns-link {
  display: flex;
  flex: none;
  align-items: center;
  border-radius: var(--radius-full);
  text-decoration: none;
}

.main-login__sns-link:not(:last-child) {
  margin-right: -12px;
  transition: margin-right 0.2s ease;
}

/* 펼침 트리거는 개별 버튼이 아니라 SNS 영역 전체 - 원래 한 덩어리 링크(아이콘+"로 로그인")를
   hover 했을 때의 동작을 그대로 유지한다.
   hover가 없는 터치 기기에서는 이 규칙이 탭 후 어정쩡하게 남아버리므로 hover 가능한
   기기로만 한정하고, 터치 쪽은 아래 .is-open(design.js가 탭으로 토글)이 담당한다. */
@media (hover: hover) {
  .main-login__sns:hover .main-login__sns-link:not(:last-child) {
    margin-right: 6px;
  }
}

/* 터치 기기 펼침 상태 - 트랜지션은 .main-login__sns-link 쪽에 이미 걸려 있어 그대로 재생된다. */
.main-login__sns.is-open .main-login__sns-link:not(:last-child) {
  margin-right: 6px;
}

.main-login__sns-icons {
  display: flex;
  flex: none;
  align-items: center;
}

.main-login__sns-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  transition: opacity 0.2s ease;
}

/* 겹쳐 있는 동안 클릭 영역이 가려지는 건 hover 시 펼쳐지면서 해소된다.
   버튼별 hover 피드백은 그 아이콘에만 준다. */
.main-login__sns-link:hover .main-login__sns-icon {
  opacity: 0.8;
}

.main-login__sns-icon svg {
  width: 15px;
  height: 15px;
}

.main-login__sns-icon--naver {
  background: var(--color-sns-naver);
}

.main-login__sns-icon--naver svg {
  width: 14px;
  height: 14px;
}

.main-login__sns-icon--kakao {
  background: var(--color-sns-kakao);
}

.main-login__sns-icon--kakao svg {
  width: 16px;
  height: 16px;
}

.main-login__sns-icon--google {
  background: var(--color-bg-page);
}

.main-login__sns-icon--google svg {
  width: 16px;
  height: 16px;
}

.main-login__sns-text {
  flex: none;
  font-weight: 400;
  font-size: var(--font-size-body-s);
  line-height: var(--line-height-base);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.main-login__link-group {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--spacing-2xs);
}

.main-login__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2xs);
  padding: var(--spacing-xs) var(--spacing-2xs);
  border-radius: var(--radius-xs);
  font-weight: 400;
  font-size: var(--font-size-body-m);
  line-height: var(--line-height-base);
  color: var(--color-text-secondary);
  white-space: nowrap;
  text-decoration: none;
}

.main-login__link-dot {
  flex: none;
  width: 4px;
  height: 4px;
  color: var(--color-text-disabled);
}

.main-login__link-divider {
  font-weight: 400;
  font-size: var(--font-size-12-5);
  line-height: normal;
  color: var(--color-border);
  white-space: nowrap;
}

/* -----------------------------
   User greeting
------------------------------ */
.main-user {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 0 30px;
  border-radius: 100px;
}

.main-user__info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.main-user__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-brand-100);
}

.main-user__greeting {
  font-size: 17px;
  font-weight: 400;
  line-height: var(--line-height-relaxed);
  letter-spacing: -0.45px;
  color: var(--color-text-heading);
  white-space: nowrap;
}

.main-user__name {
  font-size: var(--font-size-20);
  font-weight: 700;
  line-height: 1.45;
}

.main-user__greeting-emoji {
  font-weight: 400;
}

.main-user__settings {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(
    90deg,
    var(--color-settings-gradient-start),
    var(--color-settings-gradient-end)
  );
}

.main-user__settings-icon {
  width: 18px;
  height: 18px;
  color: var(--color-white-80);
}

/* -----------------------------
   Stat cards (_개인 이력)
------------------------------ */
.main-stat-list {
  display: flex;
  width: 100%;
  height: 125px;
  padding: 0 10.5px;
}

.main-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.main-stat:not(:last-child) {
  border-right: 1px dashed var(--color-divider-strong);
}

.main-stat__icon {
  width: 70px;
  height: 70px;
}

.main-stat__icon + .main-stat__label {
  margin-top: -2px;
}

.main-stat__label {
  font-size: var(--font-size-body-s);
  font-weight: 600;
  line-height: var(--line-height-base);
  color: var(--color-text-secondary);
}

.main-stat__count {
  display: flex;
  align-items: flex-end;
  gap: 0 2px;
  margin-top: -2px;
}

.main-stat__num {
  font-size: var(--font-size-heading-h1);
  font-weight: 700;
  line-height: var(--line-height-tight);
  color: var(--color-text-heading);
}

.main-stat__unit {
  font-size: var(--font-size-body-m);
  font-weight: 400;
  line-height: var(--line-height-base);
  color: var(--color-text-heading);
}

/* -----------------------------
   Certificate card (_증명서 발급)
------------------------------ */
.main-cert {
  width: 534px;
  height: 180px;
  padding: 26px 30px;
  background: var(--color-white);
  border-radius: var(--radius-card);
  box-shadow: 2px 2px 20px 0 rgba(0, 0, 0, 0.1);
}

.main-cert__head {
  width: 474px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.main-cert__title {
  font-size: var(--font-size-20);
  font-weight: 700;
  color: var(--color-gray-900);
}

.main-cert__info {
  display: flex;
  align-items: center;
  gap: 4px;
}

.main-cert__info-text {
  font-size: var(--font-size-15);
  font-weight: 400;
  color: var(--color-gray-500);
}

.main-cert__info-icon-mobile {
  display: none;
}

.main-cert__item-chevron {
  display: none;
  margin-left: auto;
  flex-shrink: 0;
}

.main-cert__list {
  margin-top: 25px;
  padding: 0 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px 0;
}

.main-cert__item {
  width: 50%;
}

.main-cert__item-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.main-cert__item-icon {
  width: 24px;
  height: 24px;
}

.main-cert__item-label {
  font-size: var(--font-size-17);
  font-weight: 500;
  color: var(--color-gray-900);
}

/* -----------------------------
   Process indicator (_진행절차)
------------------------------ */
.main-process {
  position: relative;
  width: 660px;
  height: 164px;
}

.main-process__stages {
  position: absolute;
  left: 0;
  top: 14px;
  display: flex;
  gap: 20px;
}

.main-process__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 150px;
  border-radius: 12px;
  background: rgba(86, 93, 107, 0.6);
}

.main-process__stage:nth-child(1) svg {
  width: 38px;
  height: 38px;
}

.main-process__stage:nth-child(2) svg {
  width: 43px;
  height: 43px;
}

.main-process__stage:nth-child(3) svg {
  width: 46px;
  height: 40px;
}

.main-process__stage:nth-child(4) svg {
  width: 49px;
  height: 41px;
}

.main-process__stage--active {
  background: var(--color-stage-active);
}

.main-process__stage-icon {
  width: 50px;
  height: 50px;
}

.main-process__stage-title {
  margin-top: 3px;
  font-size: var(--font-size-15);
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-white);
  text-align: center;
}

.main-process__steps {
  position: absolute;
  left: 61px;
  top: 0;
  display: flex;
  gap: 142px;
}

.main-process__step {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: var(--font-size-17);
  font-weight: 700;
  color: var(--color-gray-400);
  background: var(--color-white);
}

.main-process__step--active {
  color: var(--color-active-step);
}

/* -----------------------------
   Shared: section title + gradient add button
------------------------------ */
.main-content {
  width: 1280px;
  margin: 0 auto;
  /* Figma main_login: Container 하단 1654 → Footer 상단 1732 = 78px */
  padding-bottom: 78px;
}

.sec-pill-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--color-primary-border);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-15);
  font-weight: 500;
  color: var(--color-primary);
}

.sec-pill-btn svg,
.sec-pill-btn img {
  width: 20px;
  height: 20px;
}

/* -----------------------------
   _진행절차 경력 인증 절차 (main-cert-flow)
------------------------------ */
/* _Top(2813:36128) 기준 y=441 - 히어로 배경(0~600) 위로 159px 겹쳐 배치 */
.main-cert-flow {
  position: relative;
  z-index: 1;
  margin-top: -159px;
}

.main-cert-flow__card {
  position: relative;
  width: 1280px;
  height: 300px;
  border-radius: var(--radius-26);
  background: var(--color-white);
  box-shadow: var(--shadow-card-soft);
  overflow: hidden;
}

.main-cert-flow__title {
  position: absolute;
  left: 40px;
  top: 35px;
  margin: 0;
  font-size: var(--font-size-26);
  font-weight: 700;
  line-height: var(--line-height-tight);
  color: var(--color-text-heading);
}

/* 캐릭터 일러스트 */
.main-cert-flow__character {
  position: absolute;
  left: 67px;
  top: 103px;
  width: 195px;
  height: 153.033px;
}

.main-cert-flow__building {
  position: absolute;
  left: 0;
  top: 20.2489px;
  width: 81.3792px;
  height: 84.1007px;
}

.main-cert-flow__person {
  position: absolute;
  left: 31.9348px;
  top: 0;
  width: 126.242px;
  height: 129.6933px;
}

.main-cert-flow__person-skin {
  position: absolute;
  left: 23.5652px;
  top: 0;
  width: 79.1835px;
  height: 125.918px;
}

.main-cert-flow__person-body {
  position: absolute;
  left: 0;
  top: 73.9102px;
  width: 126.242px;
  height: 55.7759px;
}

.main-cert-flow__logo {
  position: absolute;
  left: 115px;
  top: 73.0331px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--color-brand-800);
}

.main-cert-flow__logo-img {
  position: absolute;
  left: 25px;
  top: 20px;
  width: 31px;
  height: 39px;
  object-fit: contain;
  object-position: center;
}

.main-cert-flow__spark {
  position: absolute;
  left: 138.663px;
  top: 26.4112px;
  width: 26.6288px;
  height: 28.6313px;
}

/* 화살표 - 순서대로 밝기가 오가며 앞으로 나아가는 느낌의 마칭 애니메이션 */
.main-cert-flow__chevrons {
  position: absolute;
  left: 304.4px;
  top: 171.4px;
  width: 67.2px;
  height: 16.2px;
}

.main-cert-flow__chevrons path {
  animation: main-cert-flow-chevron-pulse 1.5s ease-in-out infinite;
}

.main-cert-flow__chevrons path:nth-child(1) {
  animation-delay: 0s;
}

.main-cert-flow__chevrons path:nth-child(2) {
  animation-delay: 0.15s;
}

.main-cert-flow__chevrons path:nth-child(3) {
  animation-delay: 0.3s;
}

.main-cert-flow__chevrons path:nth-child(4) {
  animation-delay: 0.45s;
}

.main-cert-flow__chevrons path:nth-child(5) {
  animation-delay: 0.6s;
}

@keyframes main-cert-flow-chevron-pulse {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 1;
  }
}

/* 점선 구분선 - 말풍선에 종속(선택 시 말풍선과 함께 색이 바뀜).
   말풍선이 없는 마지막 경계선만 단독 요소로 유지 */
.main-cert-flow__end-line {
  position: absolute;
  left: 1047.5px;
  top: 101px;
  width: 1px;
  height: 136px;
  background: repeating-linear-gradient(
    to bottom,
    var(--color-violet-500) 0 3px,
    transparent 3px 6px
  );
  opacity: 0.3;
}

/* 말풍선 */
.main-cert-flow__tips {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.main-cert-flow__tip {
  position: absolute;
  top: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px 14px;
  border-radius: 100px;
  background: var(--color-brand-50);
}

.main-cert-flow__tip-text {
  font-size: var(--font-size-14);
  font-weight: 500;
  line-height: var(--line-height-snug);
  color: var(--color-text-body);
  white-space: nowrap;
}

/* 말풍선에 딸린 점선 - 꼬리 중심(x) 아래로 이어짐 */
.main-cert-flow__tip-line {
  position: absolute;
  left: 22.5px;
  top: 49px;
  width: 1px;
  height: 136px;
  background: repeating-linear-gradient(
    to bottom,
    var(--color-violet-500) 0 3px,
    transparent 3px 6px
  );
  opacity: 0.3;
}

.main-cert-flow__tip-tail {
  position: absolute;
  left: 15.64px;
  top: 30.25px;
  width: 14.7224px;
  height: 12.75px;
  color: var(--color-brand-50);
  transform: rotate(180deg);
}

.main-cert-flow__tip--1 {
  left: 515px;
  width: 144px;
  height: 34px;
}

.main-cert-flow__tip--2 {
  left: 685px;
  width: 144px;
  height: 34px;
}

.main-cert-flow__tip--3 {
  left: 855px;
  width: 197px;
  height: 34px;
}

/* 선택(활성) 상태 - 색상만 달라지고 나머지는 기본 말풍선과 동일 */
.main-cert-flow__tip--active {
  background: var(--color-brand-800);
}

.main-cert-flow__tip--active .main-cert-flow__tip-text {
  color: var(--color-white);
}

.main-cert-flow__tip--active .main-cert-flow__tip-tail {
  color: var(--color-brand-800);
}

.main-cert-flow__tip--active .main-cert-flow__tip-line {
  background: repeating-linear-gradient(
    to bottom,
    var(--color-violet-700) 0 3px,
    transparent 3px 6px
  );
  opacity: 1;
}

/* 5단계 아이콘 + 라벨 */
.main-cert-flow__steps {
  position: absolute;
  left: 368px;
  top: 104px;
  display: flex;
  width: 849px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.main-cert-flow__step {
  position: relative;
  width: 169px;
  height: 138px;
  flex-shrink: 0;
  opacity: 0.4;
  transition: opacity 0.1s ease;
}

.main-cert-flow__step--active {
  opacity: 1;
}

.main-cert-flow__step-icon {
  position: absolute;
  display: block;
}

.main-cert-flow__step-icon--1 {
  left: 46px;
  top: 20px;
  width: 78px;
  height: 70px;
}

.main-cert-flow__step-icon--2 {
  left: 45px;
  top: 20px;
  width: 79.0858px;
  height: 70px;
}

.main-cert-flow__step-icon--3 {
  left: 44px;
  top: 19px;
  width: 80.9101px;
  height: 72.89px;
}

.main-cert-flow__step-icon--4 {
  left: 46px;
  top: 19px;
  width: 77px;
  height: 73px;
}

.main-cert-flow__step-icon--5 {
  left: 53px;
  top: 15px;
  width: 73px;
  height: 78px;
}

.main-cert-flow__step1-art {
  position: absolute;
  left: 0;
  top: 0;
  width: 78px;
  height: 70px;
}

.main-cert-flow__step2-a {
  position: absolute;
  left: 19.5628px;
  top: 0;
  width: 59.5228px;
  height: 70px;
}

.main-cert-flow__step2-b {
  position: absolute;
  left: 28.1233px;
  top: 20.0922px;
  width: 30.7534px;
  height: 7.49566px;
}

.main-cert-flow__step2-c {
  position: absolute;
  left: 34.0998px;
  top: 38.78px;
  width: 31.1667px;
  height: 5.72691px;
}

.main-cert-flow__step2-d {
  position: absolute;
  left: 34.0998px;
  top: 51.289px;
  width: 31.1667px;
  height: 5.72691px;
}

.main-cert-flow__step2-e {
  position: absolute;
  left: 0;
  top: 26.656px;
  width: 46.7357px;
  height: 43.3412px;
}

.main-cert-flow__step3-a {
  position: absolute;
  left: 12.3712px;
  top: 0.9986px;
  width: 68.54px;
  height: 68.53px;
}

.main-cert-flow__step3-b {
  position: absolute;
  left: 0;
  top: 37.7207px;
  width: 35.16px;
  height: 35.17px;
}

.main-cert-flow__step4-art {
  position: absolute;
  left: 0;
  top: 0;
  width: 77px;
  height: 73px;
}

.main-cert-flow__step5-art {
  position: absolute;
  left: 0;
  top: 0;
  width: 73px;
  height: 78px;
}

.main-cert-flow__step-label {
  position: absolute;
  left: 0;
  top: 112px;
  width: 100%;
  font-size: var(--font-size-17);
  font-weight: 400;
  line-height: var(--line-height-relaxed);
  color: var(--color-text-body);
  text-align: center;
  white-space: nowrap;
}

/* -----------------------------
   _00 이용 안내 카드 (main-guide) — Figma node 2813:35947 (con1)
   절차안내 / 제출서류 안내 / 증명서 발급 서비스 3분할
------------------------------ */
.main-guide {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-25);
  width: 100%;
  margin-top: 60px;
}

.main-guide__card {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--spacing-30);
  border-radius: var(--radius-26);
  box-shadow: var(--shadow-md);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.main-guide__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.main-guide__card--step,
.main-guide__card--doc {
  align-self: stretch;
  gap: var(--spacing-lg);
  background: var(--color-bg-card);
  border: 1px solid var(--color-primary-border-light);
}

.main-guide__card--cert {
  gap: var(--spacing-md);
  background: var(--color-white);
  border: 1px solid var(--color-border-default);
}

.main-guide__title {
  width: 100%;
  font-size: var(--font-size-heading-h1);
  font-weight: 700;
  line-height: var(--line-height-tight);
  color: var(--color-text-heading);
}

.main-guide__title--indent {
  padding-left: var(--spacing-10);
}

/* 안내 링크 목록 + 일러스트 (일러스트 박스는 카드 오른쪽 여백까지 걸쳐 있다) */
.main-guide__body {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-lg);
  width: 100%;
}

.main-guide__list {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-md);
}

/* li 를 flex 컨테이너로 두어 링크 폭이 텍스트만큼만 잡히게 한다 */
.main-guide__item {
  display: flex;
}

.main-guide__link {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding-right: var(--spacing-6);
}

.main-guide__item--multiline .main-guide__link {
  align-items: flex-start;
}

.main-guide__check {
  flex: none;
  width: var(--icon-size-lg);
  height: var(--icon-size-lg);
}

.main-guide__link-text {
  font-size: var(--font-size-body-l);
  font-weight: 400;
  line-height: var(--line-height-relaxed);
  color: var(--color-text-body);
  white-space: nowrap;
}

.main-guide__link-text:hover {
  color: var(--color-text-link);
}

.main-guide__illust {
  position: relative;
  flex: none;
  width: 140px;
  height: 140px;
}

.main-guide__illust--step {
  margin-right: -16px;
}

.main-guide__illust--doc {
  margin-right: -20px;
}

.main-guide__illust-img {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  object-fit: cover;
  object-position: center;
}

.main-guide__illust-img--step {
  width: 91px;
  height: 95px;
}

.main-guide__illust-img--doc {
  width: 93px;
  height: 110px;
}

/* 증명서 발급 서비스 */
.main-guide__cert-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-10);
  width: 100%;
}

.main-guide__cert-item {
  width: 100%;
}

.main-guide__cert-link {
  display: flex;
  align-items: center;
  gap: var(--spacing-10);
  width: 100%;
  height: 50px;
  padding: 0 var(--spacing-lg);
  /* 기본 상태에도 같은 두께의 투명 테두리를 미리 잡아둬야 오버 시 크기/글자 위치가 밀리지 않는다 */
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: var(--color-primary-bg);
}

/* 테두리는 마우스 오버 시에만 색을 드러낸다 */
.main-guide__cert-link:hover {
  border-color: var(--color-primary-border-light);
}

.main-guide__cert-icon {
  flex: none;
  width: var(--icon-size-lg);
  height: var(--icon-size-lg);
}

.main-guide__cert-name {
  flex: 1 0 0;
  min-width: 0;
  font-size: var(--font-size-body-l);
  font-weight: 400;
  line-height: var(--line-height-relaxed);
  color: var(--color-text-heading);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.main-guide__cert-arrow {
  flex: none;
  width: 15px;
  height: 15px;
}

.main-guide__note {
  display: flex;
  align-items: center;
  gap: var(--spacing-2xs);
}

.main-guide__note-icon {
  flex: none;
  width: var(--icon-size-md);
  height: var(--icon-size-md);
}

.main-guide__note-text {
  font-size: var(--font-size-body-s);
  font-weight: 400;
  line-height: var(--line-height-base);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

/* 3분할 카드는 웹(1280) 기준 폭이라 좁은 화면에서는 세로로 쌓는다.
   ※ con1 전용 모바일 프레임을 받으면 이 블록을 그 값으로 교체한다. */
/* -----------------------------
   Footer (메인/서브 공통) — mockup.css에서 이관.
   메인은 mockup.css를 로드하지 않으므로 이 파일이 유일한 정의처다.
------------------------------ */
.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding-bottom: 40px;
  background: var(--color-footer-bg);
}
.footer__links {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 24px 0;
  border-bottom: 1px solid var(--color-footer-border);
}
.footer__link-list {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 1280px;
}
.footer__link {
  font-size: var(--font-size-16);
  font-weight: 400;
  line-height: var(--line-height-tight);
  color: var(--color-footer-text);
  white-space: nowrap;
  position: relative;
  padding-left: 18px;
}
.footer__link:first-child {
  padding-left: 0;
}
.footer__link:first-child::before {
  content: none;
}
.footer__link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 12px;
  background: var(--color-footer-border);
}
.footer__link--accent {
  font-weight: 600;
  color: var(--color-footer-link);
}
.footer__body {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  width: 1280px;
}
.footer__left {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.footer__info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 735px;
}
.footer__row {
  display: flex;
  gap: 60px;
}
.footer__field {
  display: flex;
  gap: 10px;
}
.footer__label {
  font-size: var(--font-size-15);
  font-weight: 400;
  line-height: var(--line-height-tight);
  color: var(--color-footer-text);
  white-space: nowrap;
}
.footer__value {
  font-size: var(--font-size-15);
  font-weight: 500;
  line-height: var(--line-height-tight);
  color: var(--color-footer-value);
  white-space: nowrap;
}
.footer__copyright {
  font-size: var(--font-size-15);
  font-weight: 400;
  color: var(--color-footer-text);
}
.footer__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 40px;
}
.footer__sns {
  display: flex;
  align-items: center;
  gap: 16px;
}
.footer__sns-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
}
.footer__partners {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 236px;
  height: 44px;
}
.footer__partner-logo {
  height: 40px;
}
.footer__partner-logo--nts {
  width: 102px;
}
.footer__partner-logo--hometax {
  width: 92px;
  opacity: 0.7;
  object-fit: cover;
}
.footer__mob-accordion {
  display: none;
}
.footer__copyright--mob {
  display: none;
}

/* 이용 안내 카드 - Figma mobile 절차안내(2832:2632) / 제출서류안내(2832:2654) / 증명서발급(2832:2672) */
@media (max-width: 1295px) {
  .main-guide {
    flex-direction: column;
    /* sec-01 세로 간격 12px (카드 사이도 동일) */
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
  }

  .main-guide__card {
    flex: none;
    width: 100%;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg);
    border-radius: var(--radius-xl);
  }

  /* 모바일 프레임은 heading-h3(18) / body-l(15)로 내려온다.
     역할 토큰은 744px 이하에서만 리맵되므로 raw 토큰을 직접 참조한다. */
  .main-guide__title {
    font-size: var(--font-size-18);
    line-height: var(--line-height-snug);
  }

  .main-guide__body {
    align-items: flex-end;
    gap: var(--spacing-10);
  }

  .main-guide__list {
    gap: var(--spacing-10);
  }

  .main-guide__link {
    gap: var(--spacing-xs);
  }

  .main-guide__link-text {
    font-size: var(--font-size-15);
    line-height: var(--line-height-relaxed);
  }

  /* 일러스트 박스 140 → 64, 카드 밖으로 빼던 음수 마진 제거 */
  .main-guide__illust {
    width: 64px;
    height: 64px;
  }

  .main-guide__illust--step,
  .main-guide__illust--doc {
    margin-right: 0;
  }

  .main-guide__illust-img {
    bottom: auto;
  }

  .main-guide__illust-img--step {
    top: 0;
    left: calc(50% - 0.5px);
    width: 60.42px;
    height: 63.33px;
  }

  .main-guide__illust-img--doc {
    top: 1.37px;
    left: calc(50% + 0.5px);
    width: 51.62px;
    height: 61.26px;
  }

  /* 증명서 발급 서비스 - 높이 고정을 풀고 상하 패딩으로 잡는다 */
  .main-guide__cert-list {
    gap: var(--spacing-xs);
  }

  .main-guide__cert-link {
    height: auto;
    padding: var(--spacing-10) var(--spacing-lg);
    border-radius: var(--radius-10);
  }

  .main-guide__cert-name {
    font-size: var(--font-size-15);
  }

  .main-guide__note-text {
    font-size: var(--font-size-14);
  }
}

/* -----------------------------
   _00 자주찾는 서비스 (main-quick) — Figma node 2813:36006 (con2)
   제목 + 회색 카드 안에 5개 바로가기 메뉴
------------------------------ */
.main-quick {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-md);
  width: 100%;
  margin-top: 60px;
}

.main-quick__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 40px;
}

.main-quick__title {
  font-size: var(--font-size-heading-h1);
  font-weight: 700;
  line-height: var(--line-height-tight);
  color: var(--color-text-heading);
}

.main-quick__list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 130px;
  padding: 0 var(--spacing-90);
  border-radius: var(--radius-xl);
  background: var(--color-bg-card);
}

.main-quick__link {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
}

/* 아이콘은 높이만 38px로 같고 가로 폭은 항목마다 달라서 인스턴스별로 지정한다 */
.main-quick__icon {
  flex: none;
  height: 38px;
  overflow: visible;
  transition: transform 0.25s ease;
}

.main-quick__icon--career {
  width: 35px;
}

.main-quick__icon--ext {
  width: 32px;
}

.main-quick__icon--cert {
  width: 38px;
}

.main-quick__icon--verify {
  width: 38px;
}

.main-quick__icon--job {
  width: 34px;
}

.main-quick__label {
  font-size: var(--font-size-body-l);
  font-weight: 600;
  line-height: var(--line-height-relaxed);
  color: var(--color-text-body);
  white-space: nowrap;
  transition: transform 0.25s ease;
}

/* hover 인터렉션 - apply-guide__link(FR-CS-007) 패턴 재사용: 아이콘 바운스 + path 순차 스케일 + 라벨 이동 */
.main-quick__link:hover .main-quick__icon {
  animation: main-quick-icon-bounce 0.6s ease;
}

@keyframes main-quick-icon-bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-6px);
  }
  55% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(-3px);
  }
}

.main-quick__icon path {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.3s ease;
}

.main-quick__link:hover .main-quick__icon path:nth-child(1) {
  transition-delay: 0s;
  transform: scale(1.15);
}

.main-quick__link:hover .main-quick__icon path:nth-child(2) {
  transition-delay: 0.05s;
  transform: scale(1.1);
}

.main-quick__link:hover .main-quick__icon path:nth-child(3) {
  transition-delay: 0.1s;
  transform: scale(1.1);
}

.main-quick__link:hover .main-quick__icon path:nth-child(4) {
  transition-delay: 0.15s;
  transform: scale(1.2);
}

.main-quick__link:hover .main-quick__label {
  transform: translateX(4px);
  font-weight: 700;
}

/* 자주찾는 서비스 - Figma mobile(2832:2690): 2열 그리드 3행 */
@media (max-width: 1295px) {
  .main-quick {
    gap: var(--spacing-sm);
    /* sec-01 세로 간격 12 + 프레임 자체 padding-top 20 */
    margin-top: var(--spacing-2xl);
  }

  .main-quick__head {
    height: auto;
  }

  /* 모바일 프레임은 heading-h2(19) / body-m(14)로 내려온다.
     역할 토큰은 744px 이하에서만 리맵되므로 raw 토큰을 직접 참조한다. */
  .main-quick__title {
    font-size: var(--font-size-19);
    line-height: var(--line-height-tight);
  }

  .main-quick__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    justify-content: normal;
    column-gap: var(--spacing-10);
    row-gap: var(--spacing-lg);
    height: auto;
    padding: var(--spacing-26) var(--spacing-lg);
    border-radius: var(--radius-lg);
  }

  .main-quick__link {
    gap: var(--spacing-sm);
  }

  /* 아이콘 높이 38 → 24, 가로 폭도 같은 비율로 줄인다 */
  .main-quick__icon {
    height: var(--icon-size-lg);
  }

  .main-quick__icon--career {
    width: 22px;
  }

  .main-quick__icon--ext {
    width: 20px;
  }

  .main-quick__icon--cert {
    width: 24px;
  }

  .main-quick__icon--verify {
    width: 24px;
  }

  .main-quick__icon--job {
    width: 21px;
  }

  .main-quick__label {
    font-size: var(--font-size-14);
    font-weight: 600;
    line-height: var(--line-height-base);
  }
}

/* -----------------------------
   _01 Process cards (sec-process)
------------------------------ */
.sec-process {
  margin-top: 60px;
}

.sec-process__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
}

.sec-process__banner {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-size-26);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.65px;
}

.sec-process__banner-count {
  color: var(--color-primary-alt);
}

.sec-process__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sec-process__list {
  display: flex;
  gap: 25px;
  margin-top: 22px;
}

.process-card {
  position: relative;
  width: 285px;
  height: 320px;
  flex-shrink: 0;
  padding: 30px;
  border-radius: var(--radius-card);
  background: var(--color-white);
  box-shadow: 2px 2px 20px 0 rgba(0, 0, 0, 0.1);
}

.process-card__btn {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}

.process-card--wide {
  width: 350px;
  background: var(--color-blue-600);
  box-shadow: none;
  color: var(--color-white);
}

.process-card--flat {
  background: var(--color-gray-100);
  box-shadow: none;
}

.process-card__info {
  display: flex;
  flex-direction: column;
}

.process-card__title {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-family-base);
  font-weight: 700;
  font-size: var(--font-size-26);
  line-height: 1.4;
  color: var(--color-gray-900);
}

.process-card--wide .process-card__title {
  font-weight: 900;
  color: var(--color-white);
}

.process-card__title-icon {
  width: 26px;
  height: 26px;
}

.process-card__desc {
  margin-top: 8px;
  font-family: var(--font-family-base);
  font-weight: 500;
  font-size: var(--font-size-18);
  line-height: 1.4;
  color: var(--color-gray-700);
}

.process-card--wide .process-card__desc {
  color: var(--color-white);
}

.process-card__illust-wrap {
  position: absolute;
  right: 0px;
  bottom: 63px;
}

.process-card__illust--idcard {
  width: 118px;
  height: 80px;
}

.process-card__illust--shield {
  width: 91px;
  height: 95px;
}

.process-card__illust--officer {
  width: 143px;
  height: 160px;
}

.process-card__illust--document {
  width: 93px;
  height: 110px;
}

.process-card--wide .process-card__illust {
  filter: drop-shadow(8px 8px 10px rgba(0, 15, 36, 0.4));
}

.process-card__bubble {
  visibility: hidden;
  position: absolute;
  right: 60px;
  top: -10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 166px;
  height: 56px;
}

.process-card__bubble-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.process-card__bubble-text {
  position: relative;
  font-size: var(--font-size-14);
  font-weight: 500;
  color: var(--color-gray-700);
  text-align: center;
  margin: -8px 0 0 -8px;
}

.process-card__footer {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.process-card__divider {
  height: 1px;
  background: var(--color-divider);
}

.process-card--wide .process-card__divider {
  background: rgba(255, 255, 255, 0.2);
}

.process-card__footer-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 28px;
  font-size: var(--font-size-17);
  font-weight: 400;
  color: var(--color-gray-800);
}

.process-card__footer-btn svg,
.process-card__footer-btn img {
  width: 14px;
  height: 10px;
}

.process-card__footer-btn--ready {
  color: var(--color-white);
}

.process-card__footer-btn--ready svg,
.process-card__footer-btn--ready img {
  width: 15px;
  height: 16px;
}

/* -----------------------------
   _02 Career status cards (sec-career)
------------------------------ */
.sec-career {
  margin-top: 70px;
}

.sec-career__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
}

.sec-career__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-size-26);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.65px;
  color: var(--color-gray-900);
}

.sec-career__count {
  color: var(--color-primary-alt);
}

.sec-career__body {
  position: relative;
  margin-top: 22px;
  margin-left: -22px;
  margin-right: -22px;
  padding: 0 22px;
}

.sec-career__list {
  display: flex;
  gap: 24.75px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.sec-career__list::-webkit-scrollbar {
  display: none;
}

.career-card {
  width: 301.25px;
  height: 260px;
  flex-shrink: 0;
  padding: 40px 30px 20px;
  border-radius: 28px 60px 60px 28px;
  background: #f5f5f9;
}

.career-card__btn {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}

.career-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 34px;
  padding: 0 12px 0 10px;
  border-radius: var(--radius-pill);
  background: var(--color-white);
  font-size: var(--font-size-16);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.4px;
  white-space: nowrap;
  margin: 0 0 20px 0;
}

.career-card__badge svg,
.career-card__badge img {
  width: 20px;
  height: 20px;
}

.career-card__badge--verified {
  color: #3e6fdf;
}

.career-card__badge--review {
  color: #6250f0;
}

.career-card__badge--revision {
  color: #b35a00;
}

.career-card__name {
  font-weight: 700;
  font-size: 22px;
  line-height: 1.4;
  letter-spacing: -0.55px;
  color: var(--color-gray-900);
}

.career-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.career-card__role {
  font-size: var(--font-size-16);
  font-weight: 500;
  color: var(--color-gray-700);
  white-space: nowrap;
}

.career-card__date-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.career-card__date-divider {
  width: 1px;
  height: 12px;
  background: #d9d9d9;
}

.career-card__date {
  font-size: var(--font-size-16);
  letter-spacing: -0.4px;
  white-space: nowrap;
  color: var(--color-gray-500);
}

.career-card__date--current {
  color: var(--color-primary-alt);
}

.career-card__footer {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.career-card__divider {
  height: 1px;
  background: var(--color-divider);
}

.career-card__action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding-right: 6px;
  font-size: var(--font-size-17);
  font-weight: 400;
  color: var(--color-gray-800);
}

.career-card__action svg,
.career-card__action img {
  width: 20px;
  height: 20px;
}

.sec-career__nav {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}

.sec-career__nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-white);
  box-shadow: 0 0 5px 0 rgba(21, 29, 54, 0.12);
  pointer-events: auto;
}

.sec-career__nav-btn svg,
.sec-career__nav-btn img {
  width: 26px;
  height: 26px;
}

.sec-career__nav-btn--next {
  transform: rotate(180deg);
}

/* -----------------------------
   _03 공지사항 / _04 일자리공고 / 알림창 3분할 (main-board)
   Figma node 2813:36075 — 공지·일자리는 균등 분할, 알림창은 410px 고정
------------------------------ */
.main-board {
  display: flex;
  align-items: center;
  gap: var(--spacing-60);
  width: 100%;
  /* Figma Container: Frame 444 하단 507 → Frame 443 상단 567 = 60px */
  margin-top: 60px;
}

/* main-board가 스크롤에 걸리면 3분할 컬럼이 순서대로 나타나는 연출.
   .main-board-reveal은 JS(IntersectionObserver)가 붙여주는 클래스라 JS가
   안 돌면 숨겨진 상태로 남지 않고 평소처럼 그냥 보인다. */
.main-board-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.main-board-reveal.is-visible {
  opacity: 1;
  transform: none;
}

.main-board__col {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-md);
}

.main-board__panel {
  display: flex;
  flex: none;
  width: 410px;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-md);
  background: var(--color-white);
}

.main-board__head,
.main-board__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 36px;
}

.main-board__panel-head {
  padding-left: var(--spacing-10);
}

.main-board__add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-top-left-radius: 3px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 10px;
  background: linear-gradient(
    180deg,
    var(--color-blue-gradient-start),
    var(--color-blue-gradient-end)
  );
}

.main-board__add-icon {
  width: 24px;
  height: 24px;
}

.main-board__title {
  font-size: var(--font-size-heading-h1);
  font-weight: 700;
  line-height: var(--line-height-tight);
  color: var(--color-gray-900);
  white-space: nowrap;
}

.main-board__panel-head .main-board__title {
  flex: 1 0 0;
  min-width: 0;
}

.main-board__dots {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--spacing-xs);
  height: 12px;
}

/* Figma 도트 65x12 = 활성 25 + gap 8 + 12 + gap 8 + 12 */
.main-board__dot {
  flex: none;
  width: 12px;
  height: 12px;
  padding: 0;
  border: 1px solid var(--color-dot-idle);
  border-radius: var(--radius-full);
  background: none;
  cursor: pointer;
  transition: width 0.3s ease, background-color 0.3s ease,
    border-color 0.3s ease;
}

.main-board__dot.is-active {
  width: 25px;
  border-color: transparent;
  background: var(--color-dot-active);
}

.main-board__items {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-18);
  width: 100%;
  padding-top: var(--spacing-30);
  border-top: 2px solid var(--color-black);
}

.main-board__item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  padding: 6px 0;
  margin: -6px 0;
  border-radius: var(--radius-sm);
  transition: background-color 0.2s ease;
}

.main-board__item:hover {
  background: var(--color-bg-card);
}

.main-board__item-title {
  flex: 1 0 0;
  min-width: 0;
  font-size: var(--font-size-body-l);
  font-weight: 400;
  line-height: var(--line-height-relaxed);
  color: var(--color-text-body);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.main-board__item-date {
  flex-shrink: 0;
  font-size: var(--font-size-body-m);
  font-weight: 400;
  line-height: var(--line-height-base);
  color: var(--color-text-secondary);
}

/* 알림창 프로모 배너 — 텍스트가 포함된 통이미지 하나로 처리한다 */
.main-board__promo {
  width: 100%;
  height: 230px;
  border-radius: var(--radius-26);
  overflow: hidden;
}

/* 관리자가 등록한 알림판이 없을 때 - 3분할 폭이 흔들리지 않게 같은 자리를 그대로 채운다 */
.main-board__promo--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border-default);
  font-size: var(--font-size-body-l);
  color: var(--color-text-secondary);
}

/* 슬라이드 폭이 항상 100%라 이동량을 %로 주면 브레이크포인트별 계산이 필요 없다 */
.main-board__promo-track {
  display: flex;
  width: 100%;
  height: 100%;
  /* 가로 제스처만 스크립트가 가로채고 세로 스크롤은 브라우저에 남긴다 */
  touch-action: pan-y;
  user-select: none;
  cursor: grab;
  transition: transform 0.5s ease;
}

/* 끌고 있는 동안에는 손가락/커서를 바로 따라와야 해서 전환 연출을 끔다 */
.main-board__promo-track.is-dragging {
  cursor: grabbing;
  transition: none;
}

.main-board__promo-slide {
  flex: none;
  width: 100%;
  height: 100%;
}

.main-board__promo-link {
  display: block;
  width: 100%;
  height: 100%;
}

.main-board__promo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (prefers-reduced-motion: reduce) {
  .main-board__promo-track,
  .main-board__dot {
    transition: none;
  }

  .main-cert-flow__chevrons path {
    animation: none;
  }
}

/* -----------------------------
   _05 Support cards + tab filter (sec-support)
------------------------------ */
.sec-support {
  margin-top: 70px;
}

.sec-support__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sec-support__head-left {
  display: flex;
  align-items: center;
  gap: 40px;
}

.sec-support__title {
  font-size: var(--font-size-26);
  font-weight: 700;
  color: var(--color-gray-900);
}

.sec-support__tabs {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sec-support__tab {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-white);
  font-size: var(--font-size-15);
  font-weight: 500;
  color: var(--color-gray-400);
}

.sec-support__tab svg,
.sec-support__tab img {
  width: 22px;
  height: 22px;
}

.sec-support__tab[aria-selected="true"] {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.sec-support__list {
  display: flex;
  gap: 25px;
  margin-top: 22px;
}

.support-card {
  width: 301.25px;
  height: 255px;
  flex-shrink: 0;
  padding: 30px;
  border-radius: 0 28px 28px 28px;
  background: var(--color-gray-50);
}

.support-card__btn {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  height: 100%;
}

.support-card__tag {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 3px 10px;
  border: 1px solid #346aca;
  border-radius: var(--radius-pill);
  background: var(--color-white);
  font-size: var(--font-size-15);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.375px;
  color: #346aca;
}

.support-card__title {
  font-size: var(--font-size-20);
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-gray-900);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.support-card__details {
  height: 76px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

.support-card__detail {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--font-size-17);
}

.support-card__detail-label {
  font-weight: 500;
  color: var(--color-gray-700);
}

.support-card__detail-value {
  font-weight: 400;
  color: var(--color-gray-700);
}

.web-view {
  display: block;
}
.mob-view {
  display: none;
}

/* ==========================================================================
   반응형 - 모바일 (max-width: 1295px)
   태블릿 구간(744px~1295px)도 모바일 레이아웃과 동일하게 처리 - 별도 태블릿 전용 레이아웃 없음
   모바일 전용 피그마 프레임: main / mobile (node 392:316, 사용자 제공 링크)
   ========================================================================== */
@media (max-width: 1295px) {
  /* 모바일 GNB — Figma 모바일 GNB(node 2293:4131, 사용자 제공 링크)
     Header 56px / padding 0 20 / 로고 좌측 · actions(검색·알림·햄버거) 우측 gap 16 */
  .gnb {
    height: 56px;
    padding: 0 20px;
    gap: 16px;
    justify-content: flex-start;
  }

  .gnb__logo-wrap {
    width: auto;
  }

  .gnb__logo {
    display: none;
  }

  .gnb__logo-mobile {
    display: block;
    height: 32px;
  }

  .gnb__logo-mobile a {
    height: 100%;
  }

  .gnb__logo-mobile-img {
    display: block;
    width: 129px;
    max-width: none;
    height: 32px;
    flex-shrink: 0;
  }

  .gnb__logo-mobile-icon {
    width: 25.6px;
    height: 32px;
  }

  .gnb__logo-mobile-text {
    font-size: var(--font-size-13);
    line-height: 1.23;
  }

  .gnb__menu {
    display: none;
  }

  .gnb__auth {
    display: none;
  }

  .gnb__util {
    min-width: 0;
    gap: var(--spacing-md);
    margin-left: auto;
  }

  .gnb__hamburger {
    display: flex;
  }

  .footer {
    gap: 0;
    padding: 0 20px 40px 20px;
    background: var(--color-footer-bg-mobile);
  }

  .footer__links {
    border-bottom: none;
  }

  .footer__link-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    width: 100%;
  }

  .footer__link {
    padding-left: 0;
    font-size: var(--font-size-13);
  }

  .footer__link::before {
    content: none;
  }

  .footer__link--accent {
    font-weight: 500;
    color: var(--color-footer-link-mobile);
  }

  .footer__link:last-child {
    grid-column: 1 / -1;
  }

  .footer__body {
    display: none;
  }

  .footer__mob-accordion {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    border-top: 1px solid var(--color-footer-border-mobile);
    border-bottom: 1px solid var(--color-footer-border-mobile);
  }

  .footer__mob-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 20px 0;
  }

  .footer__mob-toggle-label {
    font-size: var(--font-size-14);
    font-weight: 500;
    line-height: 1.45;
    color: var(--color-footer-title-mobile);
  }

  .footer__mob-chevron {
    color: var(--color-footer-text);
    transition: transform 0.2s ease;
  }

  .footer__mob-toggle[aria-expanded="true"] .footer__mob-chevron {
    transform: rotate(180deg);
  }

  .footer__mob-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .footer__mob-panel[hidden] {
    display: none;
  }

  .footer__mob-groups {
    display: flex;
    flex-direction: column;
    gap: 28px;
    width: 100%;
    padding: 20px 0;
  }

  .footer__mob-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .footer__mob-info .footer__field {
    align-items: flex-start;
  }

  .footer__mob-info .footer__label,
  .footer__mob-info .footer__value {
    font-size: var(--font-size-13);
    line-height: 1.5;
    letter-spacing: -0.325px;
    white-space: normal;
  }

  .footer__mob-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .footer__mob-group-title {
    font-size: var(--font-size-14);
    font-weight: 500;
    line-height: 1.45;
    color: var(--color-footer-title-mobile);
  }

  .footer__mob-sns {
    gap: 16px;
  }

  .footer__mob-sns .footer__sns-link {
    opacity: 0.4;
  }

  .footer__mob-sns .footer__sns-link img {
    width: 100%;
    height: 100%;
  }

  .footer__mob-partners {
    display: flex;
    align-items: center;
    gap: 24px;
    height: 36px;
  }

  .footer__partner-logo--mob {
    height: 36px;
    opacity: 0.4;
  }

  .footer__partner-logo--nts.footer__partner-logo--mob {
    width: 92px;
  }

  .footer__partner-logo--hometax.footer__partner-logo--mob {
    width: 83px;
    opacity: 0.28;
  }

  .footer__copyright--mob {
    display: block;
    width: 100%;
    padding: 20px 0 0;
    font-size: var(--font-size-11);
    font-weight: 400;
    color: var(--color-footer-value);
  }

  .main-content {
    width: 100%;
    /* Figma sec-01(2832:2631): 360 - 320 = 좌우 20px */
    padding: 0 var(--spacing-lg) 30px;
  }

  /* _진행절차 - Figma mobile-procedure(2832:3058) 세로 타임라인 */
  .main-cert-flow {
    /* sec-01 상단 padding 26px */
    margin: 26px 0 0;
    padding: 0;
    overflow: visible;
    touch-action: auto;
  }

  .main-cert-flow__card {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 8px;
    width: 100%;
    height: auto;
    padding: 0 0 16px;
    border-radius: 0;
    background: none;
    box-shadow: none;
    overflow: visible;
    counter-reset: cert-step;
  }

  .main-cert-flow__title {
    position: static;
    grid-column: 1 / -1;
    margin: 0 0 4px;
    font-size: var(--font-size-19);
    font-weight: 700;
    line-height: var(--line-height-tight);
    color: var(--color-text-heading);
  }

  /* 모바일에는 캐릭터 일러스트/종료 점선/셰브런이 없다 */
  .main-cert-flow__character,
  .main-cert-flow__end-line,
  .main-cert-flow__chevrons {
    display: none;
  }

  /* ul/ol 래퍼를 투명화해 li를 카드 그리드에 직접 배치 */
  .main-cert-flow__tips,
  .main-cert-flow__steps {
    display: contents;
  }

  /* 스텝 카드 */
  .main-cert-flow__step {
    position: relative;
    grid-column: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    width: auto;
    height: auto;
    min-height: 82px;
    padding: 16px 78px 16px 16px;
    border-radius: var(--radius-lg);
    background: var(--color-bg-card);
    counter-increment: cert-step;
  }

  .main-cert-flow__step:nth-child(1) {
    grid-row: 2;
  }

  .main-cert-flow__step:nth-child(2) {
    grid-row: 3;
  }

  .main-cert-flow__step:nth-child(3) {
    grid-row: 4;
  }

  .main-cert-flow__step:nth-child(4) {
    grid-row: 5;
  }

  .main-cert-flow__step:nth-child(5) {
    grid-row: 6;
  }

  /* 배지가 붙는 스텝(01, 02, 04)은 배지 자리만큼 높이를 확보한다 */
  .main-cert-flow__step:nth-child(1),
  .main-cert-flow__step:nth-child(2),
  .main-cert-flow__step:nth-child(4) {
    align-content: start;
    min-height: 91px;
  }

  /* 타임라인 도트 (Figma: 18x18, 1.5px 테두리 + 안쪽 8px 원) */
  .main-cert-flow__step::before {
    content: "";
    position: absolute;
    left: -31px;
    top: 0;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--color-primary);
    border-radius: 50%;
    background: var(--color-blue-50);
    box-shadow:
      inset 0 0 0 3.5px var(--color-blue-50),
      inset 0 0 0 7.5px var(--color-primary);
  }

  /* 도트 사이 세로 점선 (Figma: 1.5px, 대시 4 / 갭 3) */
  .main-cert-flow__step::after {
    content: "";
    position: absolute;
    left: -22.75px;
    top: 18px;
    width: 1.5px;
    height: calc(100% - 1px);
    background: repeating-linear-gradient(to bottom, var(--color-primary) 0 4px, transparent 4px 7px);
  }

  .main-cert-flow__step:nth-child(5)::after {
    display: none;
  }

  /* 스텝 제목 - ::before로 01~05 번호를 생성해 앞에 붙인다 */
  .main-cert-flow__step-label {
    position: static;
    display: flex;
    align-items: center;
    gap: 8px;
    width: auto;
    font-size: var(--font-size-17);
    font-weight: 700;
    line-height: var(--line-height-relaxed);
    color: var(--color-text-body);
    text-align: left;
  }

  .main-cert-flow__step-label::before {
    content: counter(cert-step, decimal-leading-zero);
    flex: none;
    font-size: var(--font-size-15);
    font-weight: 600;
    line-height: var(--line-height-base);
    color: var(--color-primary);
  }

  /* 설명 배지 - 데스크톱 말풍선이 모바일에서는 카드 안 배지로 바뀐다 */
  .main-cert-flow__tip {
    position: relative;
    z-index: 1;
    grid-column: 2;
    align-self: end;
    justify-self: start;
    left: auto;
    top: auto;
    width: auto;
    height: auto;
    margin: 0 16px 16px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
  }

  .main-cert-flow__tip--1 {
    grid-row: 2;
  }

  .main-cert-flow__tip--2 {
    grid-row: 3;
  }

  .main-cert-flow__tip--3 {
    grid-row: 5;
  }

  .main-cert-flow__tip-text {
    font-size: var(--font-size-13);
    line-height: var(--line-height-tight);
  }

  .main-cert-flow__tip-tail,
  .main-cert-flow__tip-line {
    display: none;
  }

  /* 아이콘 - 데스크톱 아트워크를 40px 높이로 축소해 카드 오른쪽에 배치 */
  .main-cert-flow__step-icon {
    left: auto;
    top: 50%;
    transform-origin: 100% 50%;
  }

  .main-cert-flow__step-icon--1 {
    right: 18.71px;
    transform: translateY(-50%) scale(0.571429);
  }

  .main-cert-flow__step-icon--2 {
    right: 18.4px;
    transform: translateY(-50%) scale(0.571429);
  }

  .main-cert-flow__step-icon--3 {
    right: 18.8px;
    transform: translateY(-50%) scale(0.548772);
  }

  .main-cert-flow__step-icon--4 {
    right: 19.9px;
    transform: translateY(-50%) scale(0.547945);
  }

  .main-cert-flow__step-icon--5 {
    right: 22.28px;
    transform: translateY(-50%) scale(0.512821);
  }

  /* 히어로 - 모바일 전용 배경/타이틀 이미지로 교체 */
  .main-hero {
    height: auto;
    background: none;
  }

  .main-hero__mobile-bg {
    display: block;
    position: relative;
    width: 100%;
    height: 310px;
    overflow: hidden;
    background-size: cover;
  }

  .main-hero__mobile-tit-img {
    width: 227px;
    height: auto;
    margin: 96px 0 0 50px;
  }

  .main-hero__inner {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
    margin: -36px 0 0;
    padding: 0 20px;
    position: relative;
  }

  /* 모바일 프레임에서 숨김 확인된 요소 (진행절차, 사용자 인사) */
  .main-hero__col-left {
    display: none;
  }

  .main-user {
    display: none;
  }

  .main-hero__col-right {
    width: 100%;
    padding-top: 0;
    gap: 12px;
  }

  .main-hero__right {
    width: 100%;
    height: auto;
    padding: 20px 0;
    gap: 0;
    border-radius: 20px;
    background: var(--color-white);
    box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
  }

  .main-stat-list {
    width: 100%;
    height: auto;
    margin-top: 0;
    padding: 0 10px;
  }

  /* 비로그인 카드 - 폭만 유동 처리(가로 스크롤 방지).
     모바일 전용 디자인 프레임 확인 후 확정 예정. */
  .main-hero__right--login {
    padding: var(--spacing-14) var(--spacing-md) var(--spacing-sm);
    gap: var(--spacing-xs);
    border-radius: var(--radius-26);
  }

  .main-login__body {
    width: 100%;
    padding: 0 var(--spacing-md);
  }

  /* .main-login__submit이 flex:1 0 0(min-width:0)이라 .main-login__actions를
     그대로 width:auto로 두면 배분받을 너비가 없어 0폭으로 접힘 - 버튼을
     자기 콘텐츠(padding+텍스트) 기준으로 고정폭 대신 유동 처리 */
  .main-login__actions {
    width: auto;
  }

  .main-login__submit {
    flex: none;
  }

  .main-login__head {
    padding: 0 var(--spacing-md);
  }

  .main-login__sns-icon--google {
    background: var(--color-bg-card);
  }

  .main-stat {
    flex: 1 0 0;
    gap: 7px;
  }

  .main-stat__icon {
    display: none;
  }

  /* 아이콘은 display:none 이지만 인접 선택자는 살아있으므로 상쇄 */
  .main-stat__icon + .main-stat__label {
    margin-top: 0;
  }

  .main-stat__label {
    font-size: var(--font-size-caption-s);
    font-weight: 500;
    line-height: var(--line-height-tight);
    color: var(--color-gray-650);
  }

  .main-stat__count {
    margin-top: 0;
  }

  .main-stat__num {
    line-height: var(--line-height-none);
    color: var(--color-primary);
  }

  .main-stat__unit {
    display: none;
  }

  .main-cert {
    width: 100%;
    height: auto;
    padding: 24px;
    border-radius: 20px;
    box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
  }

  .main-cert__head {
    width: 100%;
    height: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .main-cert__title {
    font-weight: 600;
  }

  .main-cert__info-icon {
    display: none;
  }

  .main-cert__info-icon-mobile {
    display: block;
  }

  .main-cert__info-text {
    font-size: 13px;
    font-weight: 500;
  }

  .main-cert__list {
    width: 100%;
    flex-direction: column;
    flex-wrap: nowrap;
    margin-top: 24px;
    padding: 0;
    gap: 8px;
  }

  .main-cert__item {
    width: 100%;
    height: 40px;
  }

  .main-cert__item-btn {
    justify-content: space-between;
  }

  .main-cert__item-icon {
    display: none;
  }

  .main-cert__item-label {
    font-size: var(--font-size-17);
    font-weight: 500;
    color: var(--color-gray-800);
  }

  .main-cert__item-chevron {
    width: 9px;
    height: 14px;
    display: block;
  }

  .main-process {
    display: none;
  }

  .sec-process {
    margin-top: 56px;
  }

  .sec-process__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    height: auto;
    width: 100%;
  }

  .sec-process__banner {
    font-size: var(--font-size-22);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: normal;
  }

  .sec-process__actions {
    gap: 6px;
  }

  .sec-process__actions .sec-pill-btn {
    flex: 0 0 auto;
    justify-content: center;
    gap: 6px;
    font-size: var(--font-size-14);
    line-height: 1.4;
    letter-spacing: -0.35px;
    white-space: nowrap;
  }

  .sec-process__actions .sec-pill-btn svg,
  .sec-process__actions .sec-pill-btn img {
    width: 16px;
    height: 16px;
  }

  .sec-process__list {
    gap: 12px;
    margin: -4px -16px -20px;
    padding: 20px 16px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    touch-action: pan-y;
  }

  .sec-process__list::-webkit-scrollbar {
    display: none;
  }

  .process-card {
    width: calc((100% - 12px) / 1.5);
    height: 230px;
    padding: 24px 0 0;
    border-radius: 20px;
    flex-shrink: 0;
    overflow: hidden;
  }

  .process-card__info {
    padding: 0 24px;
  }

  .process-card__title {
    font-size: var(--font-size-20);
    font-weight: 600;
  }

  .process-card--wide .process-card__title {
    font-weight: 600;
  }

  .process-card__desc {
    font-size: var(--font-size-14);
  }

  .process-card__illust-wrap {
    right: 12px;
    top: 90px;
    bottom: auto;
  }

  .process-card__illust {
    width: 80px;
    height: 80px;
    object-fit: contain;
  }

  .process-card--wide .process-card__illust {
    filter: drop-shadow(4px 4px 5px rgba(0, 15, 36, 0.3));
  }

  .process-card__footer {
    width: 152px;
    margin: 0 auto;
    gap: 16px;
    padding-bottom: 16px;
  }

  .process-card--wide .process-card__divider {
    background: var(--color-process-divider-active);
  }

  .process-card__footer-btn {
    height: auto;
    font-size: var(--font-size-15);
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-gray-800);
  }

  .process-card__footer-btn--ready {
    color: var(--color-white);
  }

  .process-card__footer-btn svg,
  .process-card__footer-btn--ready svg,
  .process-card__footer-btn--ready img {
    width: 20px;
    height: 20px;
    object-fit: contain;
  }

  .sec-career {
    margin-top: 56px;
  }

  .sec-career__title {
    font-size: var(--font-size-20);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: normal;
  }

  .sec-career__head .sec-pill-btn {
    gap: 6px;
    font-size: var(--font-size-14);
    line-height: 1.4;
    letter-spacing: -0.35px;
  }

  .sec-career__head .sec-pill-btn svg {
    width: 16px;
    height: 16px;
  }

  .sec-career__body {
    margin-top: 16px;
    margin-left: -16px;
    margin-right: -16px;
    padding: 0 16px;
  }

  .sec-career__list {
    gap: 12px;
    touch-action: pan-y;
  }

  .sec-career__nav {
    display: none;
  }

  .career-card {
    width: calc((100% - 12px) / 1.5);
    height: 254px;
    padding: 24px 24px 0;
    border-radius: 20px;
  }

  .career-card__badge {
    height: 30px;
    padding: 0 10px 0 8px;
    font-size: 13px;
    letter-spacing: -0.325px;
  }

  .career-card__name {
    margin-left: 4px;
    font-size: var(--font-size-20);
    line-height: 1.45;
    letter-spacing: normal;
  }

  .career-card__meta {
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 2px;
    margin-left: 4px;
  }

  .career-card__role {
    font-size: var(--font-size-14);
  }

  .career-card__date-wrap {
    gap: 0;
  }

  .career-card__date-divider {
    display: none;
  }

  .career-card__date {
    font-size: var(--font-size-14);
    line-height: 1.4;
    letter-spacing: -0.35px;
  }

  .career-card__footer {
    gap: 16px;
    padding-bottom: 16px;
  }

  .career-card__divider {
    background: #e6e6e6;
  }

  .career-card__action {
    font-size: var(--font-size-15);
    font-weight: 500;
    letter-spacing: -0.375px;
  }

  /* 공지사항 - Figma mobile sec-03(2832:2710) / 알림창 - sec-01(2832:2760) */
  .main-board {
    flex-direction: column;
    align-items: stretch;
    /* 각 sec 프레임이 상단 padding 30 / 하단 0을 갖는다 */
    gap: var(--spacing-30);
    margin-top: var(--spacing-30);
  }

  .main-board__col,
  .main-board__panel {
    flex: none;
    width: 100%;
  }

  .main-board__col,
  .main-board__panel {
    gap: var(--spacing-sm);
  }

  .main-board__head {
    height: 30px;
  }

  /* 알림창은 더보기 버튼이 없어 제목 높이 27px 그대로다 */
  .main-board__panel-head {
    height: 27px;
    padding-left: 0;
  }

  /* 모바일 프레임은 heading-h2(19)로 내려온다.
     역할 토큰은 744px 이하에서만 리맵되므로 raw 토큰을 직접 참조한다. */
  .main-board__title {
    font-size: var(--font-size-19);
  }

  .main-board__items {
    gap: var(--spacing-sm);
    padding-top: var(--spacing-xl);
  }

  /* 모바일은 제목 아래에 날짜가 따로 붙는다 */
  .main-board__item {
    flex-direction: column;
    align-items: flex-start;
    justify-content: normal;
    gap: var(--spacing-3xs);
  }

  .main-board__item-title {
    flex: none;
    width: 100%;
    font-size: var(--font-size-14);
    font-weight: 600;
    line-height: var(--line-height-base);
  }

  .main-board__item-date {
    font-size: var(--font-size-14);
    color: var(--color-text-tertiary);
  }

  /* Figma 320 x 180 — 폭이 유동이므로 높이도 비율로 잡는다 */
  .main-board__promo {
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-xl);
  }

  .sec-support {
    margin-top: 56px;
  }

  .sec-support__head {
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }

  .sec-support__head-left {
    display: contents;
  }

  .sec-support__title {
    order: 1;
    font-size: var(--font-size-22);
    line-height: 1.4;
    letter-spacing: normal;
  }

  .sec-support__tabs {
    order: 3;
    flex-basis: 100%;
    width: 100%;
    gap: 6px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .sec-support__tabs::-webkit-scrollbar {
    display: none;
  }

  .sec-support__tab {
    padding: 0 16px;
    gap: 2px;
    font-size: var(--font-size-14);
  }

  .sec-support__tab svg,
  .sec-support__tab img {
    width: 16px;
    height: 16px;
  }

  .sec-support__list {
    gap: 12px;
    margin: 16px -16px -20px;
    padding: 0 16px 20px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    touch-action: pan-y;
  }

  .sec-support__list::-webkit-scrollbar {
    display: none;
  }

  .support-card {
    width: calc((100% - 12px) / 1.5);
    height: auto;
    padding: 24px;
  }

  .support-card__tag {
    font-size: var(--font-size-13);
    letter-spacing: -0.325px;
  }

  .support-card__detail {
    font-size: var(--font-size-14);
    letter-spacing: -0.35px;
  }

  .web-view {
    display: none;
  }
  .mob-view {
    display: block;
  }
}

/* -----------------------------
   히어로 배경 - 태블릿(745px~1295px)은 웹 배경, 모바일(744px 이하)은 모바일 배경
------------------------------ */
@media (min-width: 745px) and (max-width: 1295px) {
  .main-hero__mobile-bg {
    background-image: url(../../../files/web1/images/common/tal_main_hero.png);
    background-repeat: no-repeat;
    background-position: left top;
  }
}

@media (max-width: 744px) {
  .main-hero__mobile-bg {
    background-image: url(../../../files/web1/images/common/mob_main_hero.png);
    background-repeat: no-repeat;
    background-position: left top;
  }

  /* 비로그인 카드는 모바일에서 숨긴다 - 로그인은 GNB 전체메뉴의 '로그인' 버튼으로 여는
     .main-login-popup 팝업으로만 제공한다(Figma _login 2832:6899) */
  .main-hero__right--login {
    display: none;
  }

  /* 로그인 팝업 - GNB 오버레이(z-index 100)보다 위에 뜬다 */
  .main-login-popup {
    position: fixed;
    inset: 0;
    z-index: 110;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--spacing-lg);
  }

  .main-login-popup[hidden] {
    display: none;
  }

  .main-login-popup__dim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
  }

  /* Figma _login(2832:6899) 카드 값 그대로 - bg #fff / radius 20 / shadow 0 2 15 / blur 6 */
  .main-login-popup__panel {
    position: relative;
    width: 100%;
    max-width: 400px;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-xl);
    background: var(--color-white);
    backdrop-filter: blur(6px);
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
  }

  .main-login-popup__close {
    position: absolute;
    right: 0;
    bottom: calc(100% + var(--spacing-xs));
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-white);
    cursor: pointer;
  }

  .main-login-popup__close-icon {
    width: 24px;
    height: 24px;
  }

  .main-login__mobile-prompt {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0;
  }

  /* Figma _login(2832:6899) 모바일 폭(320)에 맞춘 재배치 - 클래스는 데스크톱과 공유하되
     이 브레이크포인트에서만 값이 달라지는 부분만 오버라이드 */
  .main-login__mobile-prompt .main-login__head {
    padding: 0;
    border-radius: 0;
  }
  .main-login__mobile-prompt .main-login__type {
    gap: var(--spacing-sm);
  }
  .main-login__mobile-prompt .main-login__body {
    width: 100%;
    padding: 0;
    gap: var(--spacing-md);
  }
  .main-login__mobile-prompt .main-login__form {
    flex-direction: column;
    width: 100%;
  }
  .main-login__mobile-prompt .main-login__fields {
    width: 100%;
    background: var(--color-bg-page);
  }
  .main-login__mobile-prompt .main-login__sns-icon--google {
    background: var(--color-bg-card);
  }
  .main-login__mobile-prompt .main-login__input {
    width: 100%;
  }
  .main-login__mobile-prompt .main-login__actions {
    width: 100%;
    overflow: visible;
  }
  .main-login__mobile-prompt .main-login__submit {
    width: 100%;
    height: 44px;
    border-radius: var(--radius-xs);
  }
  .main-login__mobile-prompt .main-login__links {
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
  }
  .main-login__mobile-prompt .main-login__sns {
    flex: none;
    justify-content: center;
    width: 100%;
    gap: var(--spacing-2xs);
  }
  .main-login__mobile-prompt .main-login__sns:hover .main-login__sns-link:not(:last-child),
  .main-login__mobile-prompt .main-login__sns.is-open .main-login__sns-link:not(:last-child) {
    margin-right: 10px;
  }
  .main-login__mobile-prompt .main-login__link-divider {
    display: none;
  }
  .main-login__mobile-prompt .main-login__link-group {
    justify-content: center;
    width: 100%;
  }
}

/* -----------------------------
   카드 리스트 - 태블릿(745px~1295px)은 4개 노출, 모바일(744px 이하)은 1.5개(다음 카드 절반) 노출
------------------------------ */
@media (min-width: 745px) and (max-width: 1295px) {
  .process-card,
  .process-card--wide {
    width: 294px;
  }

  .career-card {
    width: 294px;
  }

  .support-card {
    width: 294px;
  }
}

/* ==========================================================================
   서브페이지 GNB (BG=White) — Figma GNB / BG=White 스펙 (node 71:151)
   main.html 히어로 위 투명 GNB와 분리, .body-with-sidebar 있는 페이지에만 적용
   ========================================================================== */
#wrapper:has(.body-with-sidebar) .gnb {
  position: relative;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border-divider);
}

#wrapper:has(.body-with-sidebar) .gnb__menu {
  color: var(--color-gray-900);
}

/* AI-MODIFIED: 2026-08-26 kwmf-mockup.css의 구 GNB 규칙 nav.gnb a{font-size:14px}(kwmf-mockup.css:76)가
   .gnb__menu-link a 에도 걸려, .gnb__menu(위)의 font-size:var(--font-size-20) 상속을 직접 선언값으로 덮어써버린다.
   색상만 되돌렸던 아래 규칙에 font-size도 함께 되돌린다(색상과 동일한 원인 - mockup.css:11803 참고). */
#wrapper:has(.body-with-sidebar) .gnb__menu-link a {
  color: var(--color-gray-900);
  font-size: var(--font-size-20);
}

#wrapper:has(.body-with-sidebar) .gnb__auth-link {
  color: var(--color-gray-700);
}

#wrapper:has(.body-with-sidebar) .gnb__divider {
  background: var(--color-border-divider);
}

/* 서브페이지 모바일 GNB — 햄버거·로고 텍스트 색상 보정 */
@media (max-width: 1295px) {
  #wrapper:has(.body-with-sidebar) .gnb__logo-mobile-text {
    color: var(--color-gray-900);
  }

  #wrapper:has(.body-with-sidebar) .gnb__hamburger path {
    stroke: var(--color-gray-900);
  }
}

/* 모바일 서브페이지 헤더 — 상단 GNB는 메인에서만 노출하고, 서브에서는 sub-visual
   컴팩트 헤더바 오른쪽에 햄버거를 붙인다.
   .sub-visual__inner 안의 .gnb__hamburger는 design.js가 GNB에서 복제해 넣은 것이라
   웹/태블릿에서는 항상 숨겨둔다. */
.sub-visual__inner > .gnb__hamburger {
  display: none;
}

@media (max-width: 744px) {
  #wrapper:has(.sub-visual) .gnb {
    display: none;
  }

  .sub-visual__inner > .gnb__hamburger {
    display: flex;
    flex-shrink: 0;
    margin-left: auto;
  }

  /* 화이트 헤더바 위라서 GNB의 흰색 햄버거 선을 진한 색으로 바꾼다 */
  .sub-visual__inner > .gnb__hamburger path {
    stroke: var(--color-gray-900);
  }
}

/* ==========================================================================
   로그인 페이지 (FR-AUTH-001) — Figma 2374:1685 (GNB), 2374:1686 (content)
   ========================================================================== */

/* GNB — BG=White 변형 (로그인 + 회원가입/비밀번호찾기 공통) */
#wrapper:has(.login-wrap) .gnb,
#wrapper:has(.reg-wrap) .gnb {
  position: relative;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border-divider);
}
/* 로그인/회원가입류 페이지 헤더 — gnb__menu/gnb__util 없이 로고만 표시, justify-content:center로 인해
   로고가 가운데로 밀리지 않도록 원래(전체 GNB 기준) 좌측 위치 그대로 고정.
   AI-MODIFIED: 2026-08-28 .reg-wrap(joinForm1~4/orgJoinForm/findPassword/socialJoinForm1 등)이
   .login-wrap과 똑같이 로고만 있는 GNB를 쓰는데 이 규칙엔 빠져 있어 로고가 가운데 정렬돼 있었다. */
#wrapper:has(.login-wrap) .gnb,
#wrapper:has(.reg-wrap) .gnb {
  justify-content: flex-start;
}
#wrapper:has(.login-wrap) .gnb__auth-link,
#wrapper:has(.reg-wrap) .gnb__auth-link {
  color: var(--color-gray-700);
}
#wrapper:has(.login-wrap) .gnb__divider,
#wrapper:has(.reg-wrap) .gnb__divider {
  background: var(--color-border-divider);
}

@media (max-width: 1295px) {
  #wrapper:has(.login-wrap) .gnb__logo-mobile-text,
  #wrapper:has(.reg-wrap) .gnb__logo-mobile-text {
    color: var(--color-gray-900);
  }
  #wrapper:has(.login-wrap) .gnb__hamburger svg path,
  #wrapper:has(.reg-wrap) .gnb__hamburger svg path {
    stroke: var(--color-gray-900);
  }
}

/* 회원가입/비밀번호찾기 content-wrap */
.reg-wrap {
  background: #f9f9f9;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 100px;
  width: 100%;
}
/* ==========================================================================
   비밀번호 찾기 (FR-AUTH-003) — Figma 2374:1931
   ========================================================================== */
.pw-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
}

.pw-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 480px;
  padding: 50px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  box-shadow: 0px 1px 2px 0px rgba(15, 31, 61, 0.06);
  overflow: hidden;
}

.pw-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pw-card__step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9999px;
  background: #eaf0fe;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: #1f4fd1;
  flex-shrink: 0;
}

.pw-card__step-title {
  font-size: var(--font-size-20);
  font-weight: 600;
  line-height: 1.45;
  color: var(--color-gray-900);
}

.pw-card input::placeholder {
  color: var(--color-gray-400);
}

.pw-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 34px;
  width: 480px;
  padding: 70px 50px 50px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  box-shadow: 0px 1px 2px 0px rgba(15, 31, 61, 0.06);
}

.pw-done__icon {
  width: 131px;
  height: 120px;
  object-fit: contain;
}

.pw-done__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.pw-done__title {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-gray-900);
}

.pw-done__desc {
  font-size: var(--font-size-15);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-gray-500);
}

.pw-done__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 24px;
  background: var(--color-primary);
  border-radius: 8px;
  font-size: var(--font-size-16);
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-white);
}

.pw-done__btn:hover {
  background: var(--color-primary-alt);
}

.pw-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.pw-actions .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 24px;
  border-radius: 8px;
  font-size: var(--font-size-16);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

.pw-actions .btn-primary {
  background: var(--color-primary);
  color: var(--color-white);
  border: none;
}

.pw-actions .btn-primary:hover {
  background: var(--color-primary-alt);
}

.pw-actions .btn-ghost {
  background: var(--color-white);
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
}

.pw-actions .btn-ghost:hover {
  background: var(--color-primary-bg);
}

@media (max-width: 1295px) {
  .pw-wrap {
    padding: 0 16px;
    gap: 24px;
  }

  .pw-card {
    width: 100%;
    padding: 32px 24px;
  }

  .pw-done {
    width: 100%;
    padding: 48px 24px 40px;
    gap: 28px;
  }

  .pw-done__title {
    font-size: var(--font-size-22);
  }
}

/* ==========================================================================
   가입완료 카드 (FR-AUTH-002 4단계) — Figma 2374:1907
   ========================================================================== */
.done-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 34px;
  width: 768px;
  padding: 70px 50px 50px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: 0px 1px 2px 0px rgba(15, 31, 61, 0.06);
}

.done-card__icon {
  width: 131px;
  height: 120px;
  object-fit: contain;
}

.done-card__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.done-card__title {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-gray-900);
}

.done-card__desc {
  font-size: var(--font-size-15);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-gray-500);
}

.done-card__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 24px;
  background: var(--color-primary);
  border-radius: 8px;
  font-size: var(--font-size-16);
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-white);
}

.done-card__btn:hover {
  background: var(--color-primary-alt);
}

/* ---------- 공지사항 상세 (Figma node 2440:7740, Article Header + article-body + File Upload + Actions) ---------- */
.notice-detail {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xl);
  width: 100%;
  padding: 0 0 var(--spacing-xl);
}

.notice-detail__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-md);
  width: 100%;
  padding-bottom: var(--spacing-xl);
  border-bottom: 1px solid var(--color-bg-muted);
}

.notice-detail__title-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-sm);
  width: 100%;
}

.notice-detail__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-2xs) var(--spacing-xs);
  border-radius: var(--radius-full);
  background: var(--color-status-error-bg);
  color: var(--color-status-error);
  font-size: var(--font-size-13);
  font-weight: 400;
  line-height: 1.4;
  white-space: nowrap;
}

.notice-detail__title {
  margin: 0;
  font-size: var(--font-size-26);
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-text-heading);
}

.notice-detail__meta {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: var(--font-size-14);
  font-weight: 500;
  line-height: 1.45;
  color: var(--color-text-tertiary);
}

.notice-detail__meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  white-space: nowrap;
}

.notice-detail__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  font-size: var(--font-size-16);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-body);
}

.notice-detail__body p {
  margin: 0;
}

.notice-detail__list p {
  margin: 0;
}

.notice-detail__attachment {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  width: 480px;
  min-width: 480px;
  padding: var(--spacing-md);
  border: 1px solid var(--color-coolgray-700);
  border-radius: var(--radius-sm);
  background: var(--color-white);
}

.notice-detail__attachment-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
}

.notice-detail__attachment-icon svg {
  display: block;
  width: 18.38px;
  height: 23.24px;
}

.notice-detail__attachment-name {
  margin: 0;
  font-size: var(--font-size-15);
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-text-body);
  white-space: nowrap;
}

@media (max-width: 1295px) {
  /* 공지사항 상세 - 태블릿 전용 프레임 없음, 웹 기준 유동 처리(고정폭 -> 유동화) */
  .notice-detail__attachment {
    width: 100%;
    max-width: 480px;
    min-width: 0;
  }

  .notice-detail__meta {
    flex-wrap: wrap;
    row-gap: var(--spacing-2xs);
  }
}

@media (max-width: 744px) {
  /* 공지사항 상세 - 모바일 전용 프레임 없음, 웹/태블릿 기준 유동 처리 */
  .notice-detail__attachment {
    max-width: 100%;
    padding: 8px 12px;
  }

  .notice-detail__attachment-name {
    white-space: normal;
    word-break: break-all;
  }
}

/* ---------- 1:1문의 상세 (Figma node 2384:8045, Article Header + article-body + File Upload + Comment + Actions) ---------- */
.inquiry-detail {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-2xl);
  width: 100%;
  padding: 0 0 var(--spacing-xl);
}

.inquiry-detail__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-md);
  width: 100%;
  padding-bottom: var(--spacing-xl);
  border-bottom: 1px solid var(--color-bg-muted);
}

.inquiry-detail__title-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-sm);
  width: 100%;
}

.inquiry-detail__status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-2xs) var(--spacing-xs);
  border-radius: var(--radius-full);
  background: var(--color-status-warning-bg);
  color: var(--color-status-warning);
  font-size: var(--font-size-13);
  font-weight: 400;
  line-height: 1.4;
  white-space: nowrap;
}

.inquiry-detail__title {
  margin: 0;
  font-size: var(--font-size-26);
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-text-heading);
}

.inquiry-detail__meta {
  display: flex;
  align-items: center;
  gap: 20px;
}

.inquiry-detail__meta-type {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px var(--spacing-xs);
  border-radius: var(--radius-xs);
  background: var(--color-bg-subtle);
  color: var(--color-coolgray-800);
  font-size: var(--font-size-13);
  font-weight: 400;
  line-height: 1.4;
  white-space: nowrap;
}

.inquiry-detail__meta-date {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-14);
  font-weight: 500;
  line-height: 1.45;
  color: var(--color-text-tertiary);
  white-space: nowrap;
}

.inquiry-detail__meta-label {
  color: var(--color-text-tertiary);
}

.inquiry-detail__body {
  width: 100%;
  margin: 0;
  padding: var(--spacing-xs) 0 var(--spacing-xl);
  font-size: var(--font-size-16);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-body);
}

.inquiry-detail__attachment {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  width: 480px;
  min-width: 480px;
  padding: var(--spacing-md);
  border: 1px solid var(--color-coolgray-700);
  border-radius: var(--radius-sm);
  background: var(--color-white);
}

.inquiry-detail__attachment-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  overflow: hidden;
}

.inquiry-detail__attachment-icon svg {
  display: block;
  width: 21.01px;
  height: 26.56px;
}

.inquiry-detail__attachment-info {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-3xs);
  min-width: 0;
}

.inquiry-detail__attachment-name {
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  font-size: var(--font-size-15);
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-text-body);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inquiry-detail__attachment-download {
  font-size: var(--font-size-13);
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-text-tertiary);
}

.inquiry-detail__attachment-download:hover {
  text-decoration: underline;
}

.inquiry-detail__answer {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  width: 100%;
  padding: var(--spacing-xl);
  overflow: hidden;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-white);
}

.inquiry-detail__answer-head {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  width: 100%;
}

.inquiry-detail__answer-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--color-icon-default);
  transform: scaleX(-1);
}

.inquiry-detail__answer-icon svg {
  display: block;
  width: 24px;
  height: 24px;
}

.inquiry-detail__answer-label {
  flex: 1 0 0;
  font-size: var(--font-size-15);
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-text-heading);
  white-space: nowrap;
}

.inquiry-detail__answer-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: var(--spacing-2xs) var(--spacing-xs);
  border-radius: var(--radius-full);
  background: var(--color-status-warning-bg);
  color: var(--color-status-warning);
  font-size: var(--font-size-14);
  font-weight: 500;
  line-height: 1.45;
  white-space: nowrap;
}

.inquiry-detail__answer-text {
  width: 100%;
  margin: 0;
  padding: var(--spacing-md) 0;
  font-size: var(--font-size-16);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-secondary);
  text-align: left;
}

/* [퍼블 최종본 2026-08-26 반영] 모바일 답변 박스 여백 축소 */
@media (max-width: 744px) {
  .inquiry-detail__answer {
    padding: 12px 16px;
    gap: 0;
  }
}

.inquiry-detail + .btn-row {
  margin-top: 0;
  padding-top: var(--spacing-xl);
}

.inquiry-detail + .btn-row .btn {
  border-radius: var(--radius-xs);
}

@media (max-width: 1295px) {
  .done-card {
    width: 100%;
    padding: 48px 24px 40px;
    gap: 28px;
  }

  .done-card__title {
    font-size: var(--font-size-22);
  }

  .done-card__desc {
    font-size: var(--font-size-14);
  }
}

/* -----------------------------
   cert-check (증명서 진위확인)
------------------------------ */
.cert-check {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-2xl);
  width: 100%;
}

.cert-check__callout {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-sm);
  background: var(--color-blue-50);
}

.cert-check__callout-icon {
  flex-shrink: 0;
  width: 23px;
  height: 23px;
}

.cert-check__callout-text {
  font-weight: 400;
  font-size: var(--font-size-16);
  line-height: var(--line-height-base);
  color: var(--color-blue-500);
  white-space: nowrap;
}

.cert-check__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-2xl);
  width: 100%;
  padding: var(--spacing-2xl);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xl);
  background: var(--color-white);
}

.cert-check__field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-xs);
  width: 490px;
}

.cert-check__field-label {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-3xs);
  padding: 0 2px;
  white-space: nowrap;
}

.cert-check__field-label-text {
  font-weight: 400;
  font-size: var(--font-size-15);
  line-height: var(--line-height-base);
  color: var(--color-text-body);
}

.cert-check__field-required {
  font-weight: 500;
  font-size: var(--font-size-14);
  line-height: var(--line-height-base);
  color: var(--color-required);
}

.cert-check__radio-group {
  display: flex;
  align-items: center;
  gap: var(--spacing-xl);
  min-height: 44px;
  width: 100%;
}

.cert-check__radio {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  cursor: pointer;
}

.cert-check__radio-input {
  appearance: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  background: var(--color-white);
  cursor: pointer;
}

.cert-check__radio-input:checked {
  border-color: var(--color-primary);
  background: var(--color-white)
    radial-gradient(circle, var(--color-primary) 0 6px, transparent 6px);
}

.cert-check__radio-label {
  font-weight: 400;
  font-size: var(--font-size-16);
  line-height: var(--line-height-base);
  color: var(--color-text-body);
  white-space: nowrap;
}

.cert-check__code-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  min-height: 44px;
  width: 100%;
}

.cert-check__code-input {
  flex: 1 0 0;
  height: 44px;
  padding: 0 var(--spacing-md);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  font-weight: 400;
  font-size: var(--font-size-16);
  color: var(--color-text-body);
}

.cert-check__code-input::placeholder {
  color: var(--color-text-tertiary);
}

.cert-check__code-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.cert-check__code-dash {
  font-weight: 400;
  font-size: var(--font-size-15);
  color: var(--color-text-tertiary);
}

.cert-check__field-message {
  padding: 0 var(--spacing-3xs);
  width: 100%;
  font-weight: 400;
  font-size: var(--font-size-13);
  line-height: var(--line-height-base);
  color: var(--color-text-tertiary);
  white-space: nowrap;
}

.cert-check__submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 var(--spacing-lg);
  border-radius: var(--spacing-2xs);
  background: var(--color-primary);
  font-weight: 600;
  font-size: var(--font-size-15);
  line-height: var(--line-height-base);
  color: var(--color-white);
}

.cert-check__qr-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 var(--spacing-lg);
  border: 1px solid var(--color-primary);
  border-radius: var(--spacing-2xs);
  background: var(--color-white);
  font-weight: 600;
  font-size: var(--font-size-15);
  line-height: var(--line-height-base);
  color: var(--color-primary);
}

.cert-check__qr-btn:hover {
  background: var(--color-primary-bg);
}

.mt-0 {
  margin-top: 0 !important;
}

/* 태블릿 전용 프레임 없음 - 웹 레이아웃 기준 안 깨지게 유동 처리 */
@media (max-width: 1295px) {
  .cert-check__callout-text {
    white-space: normal;
  }

  .cert-check__field {
    width: 100%;
  }
}

/* 모바일 전용 프레임 (node 2655:15095, 사용자가 준 링크) - 카드 padding 축소 + 증명서 고유번호 입력행은 3분할이 아니라 입력창 1개로 표시 */
@media (max-width: 744px) {
  .cert-check__card {
    padding: var(--spacing-lg) var(--spacing-md);
  }

  .cert-check__code-row > .cert-check__code-dash,
  .cert-check__code-row > .cert-check__code-input:nth-of-type(n + 2) {
    display: none;
  }

  .cert-check__code-row > .cert-check__code-input:nth-of-type(1) {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
  }
}

/* ==========================================================================
   설문 응답 (FR-COM-014) — Figma node 2665:19585
   ========================================================================== */
.survey-response {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-2xl);
  width: 100%;
}

/* 설문 기본정보 헤더 */
.survey-response__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-sm);
  width: 100%;
  padding: var(--spacing-28);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
}

.survey-response__header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: var(--spacing-sm);
}

.survey-response__title {
  margin: 0;
  font-size: var(--font-size-22);
  font-weight: 700;
  line-height: var(--line-height-tight);
  color: var(--color-text-heading);
  white-space: nowrap;
}

.survey-response__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: var(--spacing-2xs) var(--spacing-xs);
  border-radius: var(--radius-full);
  background: var(--color-status-error-bg);
  font-size: var(--font-size-14);
  font-weight: 500;
  line-height: 1.45;
  color: var(--color-status-error);
  white-space: nowrap;
}

.survey-response__meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.survey-response__meta-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-xs);
  font-size: var(--font-size-15);
  line-height: var(--line-height-base);
  white-space: nowrap;
}

.survey-response__meta-label {
  font-weight: 600;
  color: var(--color-text-secondary);
}

.survey-response__meta-value {
  font-weight: 400;
  color: var(--color-text-body);
}

.survey-response__meta-divider {
  flex-shrink: 0;
  width: 1px;
  height: 14px;
  background: var(--color-border-strong);
  opacity: 0.3;
}

.survey-response__meta-note {
  margin: 0;
  font-size: var(--font-size-13);
  font-weight: 400;
  line-height: var(--line-height-tight);
  color: var(--color-text-tertiary);
  white-space: nowrap;
}

/* 문항 영역 */
.survey-response__questions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-2xl);
  width: 100%;
}

.survey-response__question {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-xs);
  width: 100%;
}

.survey-response__question--gap-md {
  gap: var(--spacing-md);
}

.survey-response__label {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-3xs);
  margin: 0;
  padding: 0 var(--spacing-3xs);
  font-size: var(--font-size-18);
  font-weight: 700;
  line-height: 1.45;
  color: var(--color-text-body);
  white-space: nowrap;
}

.survey-response__required {
  font-size: var(--font-size-14);
  font-weight: 500;
  color: var(--color-required);
}

.survey-response__options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-xl);
  min-height: 44px;
}

.survey-response__option {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  cursor: pointer;
}

.survey-response__option input[type="checkbox"] {
  border-radius: var(--radius-xs);
}

.survey-response__option-text {
  font-size: var(--font-size-16);
  font-weight: 400;
  line-height: var(--line-height-base);
  color: var(--color-text-body);
  white-space: nowrap;
}

/* Q4 순위형 드래그 정렬 */
.survey-response__ranking {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-xs);
  width: 100%;
  margin: 0;
  padding: var(--spacing-lg);
  list-style: none;
  background: var(--color-bg-subtle);
  border-radius: var(--radius-md);
}

.survey-response__rank-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  width: 100%;
  padding: var(--spacing-sm);
  background: var(--color-white);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  cursor: grab;
}

.survey-response__rank-grip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--color-text-tertiary);
}

.survey-response__rank-grip svg {
  width: 20px;
  height: 20px;
}

.survey-response__rank-text {
  font-size: var(--font-size-16);
  font-weight: 400;
  line-height: var(--line-height-base);
  color: var(--color-text-heading);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Q5 서술형 */
.survey-response__textarea {
  display: block;
  width: 100%;
  min-height: 120px;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: var(--font-size-16);
  font-weight: 400;
  line-height: var(--line-height-base);
  color: var(--color-text-body);
  resize: vertical;
}

.survey-response__textarea::placeholder {
  color: var(--color-text-tertiary);
}

/* 하단 버튼 영역 */
.survey-response + .btn-row {
  margin-top: 0;
  padding-top: var(--spacing-xl);
}

.survey-response + .btn-row .btn {
  border-radius: var(--radius-xs);
}

/* 설문 응답 - 모바일 (max-width: 744px) — Figma node 2665:19611 */
@media (max-width: 744px) {
  .survey-response {
    gap: var(--spacing-lg);
  }

  .survey-response__header {
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
  }

  .survey-response__header-top {
    align-items: flex-start;
    gap: var(--spacing-xs);
  }

  .survey-response__title {
    flex: 1 0 0;
    min-width: 0;
    font-size: var(--font-size-19);
    white-space: normal;
  }

  .survey-response__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-6);
    width: 100%;
  }

  .survey-response__meta-item {
    align-items: center;
    font-size: var(--font-size-14);
  }

  .survey-response__meta-divider {
    display: none;
  }

  .survey-response__meta-note {
    width: 100%;
    font-size: var(--font-size-12);
    white-space: normal;
  }

  .survey-response__questions {
    gap: var(--spacing-lg);
  }

  .survey-response__question,
  .survey-response__question--gap-md {
    gap: var(--spacing-10);
  }

  .survey-response__label {
    font-size: var(--font-size-16);
  }

  .survey-response__required {
    font-size: var(--font-size-12);
  }

  /* 라디오(단일선택): 세로 스택 */
  .survey-response__options {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
    width: 100%;
    min-height: 0;
  }

  /* 체크박스(다중선택): 2열 그리드 */
  .survey-response__options:has(input[type="checkbox"]) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-sm) var(--spacing-md);
  }

  .survey-response__options:has(input[type="checkbox"])
    .survey-response__option {
    align-items: center;
  }

  .survey-response__options:has(input[type="checkbox"])
    .survey-response__option-text {
    flex: 1 0 0;
    min-width: 0;
    white-space: normal;
  }

  .survey-response__ranking {
    padding: var(--spacing-sm);
  }

  .survey-response + .btn-row {
    gap: var(--spacing-xs);
    padding-top: var(--spacing-lg);
  }

  .survey-response + .btn-row .btn {
    flex: 1 0 0;
    min-width: 0;
    padding: 0 var(--spacing-xs);
  }
}

/* ==========================================================================
   FR-JOB-001 일자리공고 목록 (Figma node 2651:14289)
   - 검색바(.filterbar), 총 N건 툴바(.list-toolbar/.list-count), 페이지네이션(.pagination)은
     mockup.css의 공용 컴포넌트를 그대로 재사용하고, 여기서는 카드 그리드 간격만 보정한다.
   ========================================================================== */
.job-list {
  /* .filterbar의 margin-bottom 16px + 16px = Figma content gap 32px */
  margin-top: var(--spacing-md);
}

.job-list__toolbar {
  min-height: 56px;
  padding: 8px;
  margin-bottom: var(--spacing-md);
}

.job-list__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-md) var(--spacing-sm);
}

.job-list + .pagination {
  margin-top: var(--spacing-2xl);
}

/* ---------- 공고 카드 (Figma CardJob / Default) ---------- */
.job-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-xl);
  width: 100%;
  min-width: 0;
  height: 170px;
  padding: var(--spacing-lg) var(--spacing-xl);
  background: var(--color-white);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  color: inherit;
}

.job-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-xs);
  width: 100%;
}

.job-card__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-2xs);
  width: 100%;
}

.job-card__title {
  width: 100%;
  font-size: var(--font-size-18);
  font-weight: 700;
  line-height: var(--line-height-snug);
  color: var(--color-text-body);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.job-card__place {
  display: flex;
  align-items: center;
  gap: var(--spacing-2xs);
  width: 100%;
}

.job-card__place-icon {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--color-icon-muted);
}

.job-card__place-text {
  flex: 1 0 0;
  min-width: 0;
  font-size: var(--font-size-15);
  font-weight: 400;
  line-height: var(--line-height-base);
  color: var(--color-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.job-card__cat {
  padding: var(--spacing-3) var(--spacing-xs);
  background: var(--color-bg-subtle);
  border-radius: var(--radius-xs);
  font-size: var(--font-size-13);
  font-weight: 400;
  line-height: var(--line-height-tight);
  color: var(--color-coolgray-800);
  white-space: nowrap;
}

.job-card__foot {
  display: flex;
  flex: 1 0 0;
  align-items: flex-end;
  justify-content: flex-end;
  width: 100%;
}

.job-card__date {
  font-size: var(--font-size-13);
  font-weight: 400;
  line-height: var(--line-height-tight);
  color: var(--color-text-tertiary);
  white-space: nowrap;
}

/* ---------- 공고 카드 - 연동 지연 상태 (Figma CardJob / Delay) ---------- */
.job-card--delay {
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
}

.job-card__delay-icon {
  flex: none;
  width: 40px;
  height: 40px;
}

.job-card__delay-icon-bubble {
  fill: var(--color-illust-warning-bg);
}

.job-card__delay-icon-badge {
  fill: var(--color-illust-warning);
  stroke: var(--color-illust-warning);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.job-card__delay-icon-hand {
  stroke: var(--color-white);
  stroke-width: 2;
  stroke-linecap: round;
}

.job-card__delay-icon-dots {
  stroke: var(--color-illust-warning);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.job-card__delay-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-2xs);
}

.job-card__delay-title {
  font-size: var(--font-size-16);
  font-weight: 600;
  line-height: var(--line-height-base);
  color: var(--color-text-body);
  white-space: nowrap;
}

.job-card__delay-dots {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  margin-left: 2px;
}

.job-card__delay-dots span {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--color-text-secondary);
  opacity: 0;
  animation: job-card-delay-dot 2.4s infinite;
}

.job-card__delay-dots span:nth-child(1) {
  animation-delay: 0s;
}

.job-card__delay-dots span:nth-child(2) {
  animation-delay: 0.4s;
}

.job-card__delay-dots span:nth-child(3) {
  animation-delay: 0.8s;
}

@keyframes job-card-delay-dot {
  0%, 20% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.job-card__delay-desc {
  font-size: var(--font-size-14);
  font-weight: 500;
  line-height: var(--line-height-snug);
  color: var(--color-text-tertiary);
  white-space: nowrap;
}

/* FR-JOB-001 태블릿 (745~1295px) - 전용 피그마 프레임 없음, 4열 고정이 깨지지 않게 유동 처리만 */
@media (max-width: 1295px) {
  .job-list__grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
}

/* FR-JOB-001 모바일 (Figma node 2663:18736 content-cards-mobile) */
@media (max-width: 744px) {
  .job-list__toolbar {
    min-height: unset;
    padding: 0;
    margin-bottom: var(--spacing-sm);
  }

  .job-list__grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-sm);
  }

  .job-card {
    width: 100%;
    height: 157px;
    gap: var(--spacing-sm);
  }

  .job-card__foot {
    flex: none;
    align-items: flex-end;
    justify-content: flex-start;
  }
}

/* ===== 에러 페이지 (400/401/403/404/500) =========================================
   AI-GENERATED: 2026-08-26
   errors/*.jsp 는 design.css 하나만 링크한다. 토큰과 .btn 기본형은 mockup.css 에 있어
   여기서는 참조하지 않고 값을 직접 쓴다 - 에러 화면이 다른 파일에 기대면 안 된다.
   색은 mockup.css :root 의 값을 그대로 옮긴 것이다(navy-800 / blue-600 / text-500 등). */
#error_content {
  box-sizing: border-box;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 40px 24px 64px;
  margin: 0;
  background: #f6f8fb;
  font-family: "Pretendard", "Malgun Gothic", sans-serif;
  text-align: center;
}

#error_content .text1 {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: #1a2e5c;
}

#error_content .text2 {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: #666666;
}

#error_content .btn {
  margin-top: 16px;
  height: 48px;
  padding: 0 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 8px;
  background: #066bfd;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1; /* 공통 스킨이 button 에 line-height:0 을 걸어 찌그러뜨린 전례가 있다 */
  text-decoration: none;
  cursor: pointer;
}

#error_content .btn:hover,
#error_content .btn:focus {
  background: #2d67ff;
}

@media (max-width: 768px) {
  #error_content .text1 {
    font-size: 22px;
  }

  #error_content .text2 {
    font-size: 15px;
  }
}