/* ===================================
   concierge.css - AI 컨시어지 페이지 공통 스타일
   - 데스크탑 퍼스트, BEM
   - 타입 선택 (index.html) + 게임형 플로우 (game.html) 공통
   =================================== */

/* -----------------------------------
   Hero (타이틀 영역)
   ----------------------------------- */

   /* .blackScreen  {
    position: fixed;
    left: 0;
    top: 90px;
    z-index: 999;
    height: calc(100vh - 90px);
    width:100%;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
   } */
   .blackScreen p {
    padding: 10vh;
    word-break: keep-all;
    line-height: 140%;
    font-size: clamp(16px, 2vw, 28px);
    color: #fff;
    text-align: center;
   }
   .concierge-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    margin-bottom: 60px;
  }
  
  .concierge-hero__overline {
    margin-bottom: 4px;
  }
  
  .concierge-hero__title {
    font-size: 44px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.04em;
    color: var(--neutral-900);
  }
  
  .concierge-hero__desc {
    font-size: 22px;
    font-weight: 300;
    line-height: 1.4;
    letter-spacing: -0.04em;
    color: var(--neutral-500);
  }
  
  .concierge-hero__desc-line {
    display: block;
  }
  
  /* -----------------------------------
     타입 선택 카드 리스트
     ----------------------------------- */
  .type-select {
    margin-top: 40px;
  }
  
  .type-select__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    list-style: none;
    padding: 0;
  }
  
  .type-select__item {
    list-style: none;
  }
  
  /* -----------------------------------
     타입 카드 (공통)
     ----------------------------------- */
  .type-card {
    position: relative;
    display: block;
    height: 766px;
    padding: 50px;
    border-radius: 12px;
    background-size: 90%;
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    cursor: pointer;
    transition: transform 240ms ease, box-shadow 240ms ease;
    outline: none;
  }
  .type-card.type-card--game {
    background: 
      url('../image/concierge/game_bg.png') no-repeat right bottom,
      linear-gradient(113.5deg, rgba(244, 244, 244, 0.5) 31.95%, rgba(158, 158, 158, 0.2) 83.68%)
    ;
  }
  .type-card.type-card--card {
    background: 
      url('../image/concierge/card_bg.png') no-repeat right bottom,
      linear-gradient(113.5deg, rgba(244, 244, 244, 0.5) 31.95%, rgba(158, 158, 158, 0.2) 83.68%)
    ;
  }
  
  .type-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid transparent;
    border-radius: inherit;
    transition: border-color 200ms ease;
    pointer-events: none;
    z-index: 2;
  }
  
  .type-card:hover,
  .type-card:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  }
  
  .type-card:focus-visible::before,
  .type-card.is-selected::before {
    border-color: var(--brand-600);
  }
  
  .type-card__body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 360px;
    max-width: 100%;
  }
  
  .type-card__head {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  
  .type-card__label {
    color: var(--brand-600);
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
  }
  
  .type-card__title {
    font-size: 44px;
    font-weight: 700;
    line-height: 1.36;
    letter-spacing: -0.04em;
    color: #0e0e0e;
  }
  
  .type-card__title-strong {
    color: #0e0e0e;
  }
  
  .type-card__title-mute {
    color: var(--neutral-500);
  }
  
  .type-card__desc {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.04em;
    color: var(--neutral-400);
  }
  
  /* 카드 내부 태그 */
  .type-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    padding: 0;
    list-style: none;
  }
  
  .type-card__tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    border: 1px solid #dedede;
    border-radius: 100px;
    background: var(--neutral-100);
    color: var(--brand-800);
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.04em;
    white-space: nowrap;
  }
  
  
  /* -----------------------------------
     이전 추천 결과 바
     ----------------------------------- */
  .prev-result {
    display: none;
    /*display: flex;*/
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 24px 50px;
    border-radius: 12px;
    background: linear-gradient(157.7deg, #005a54 45.03%, #103734 76.16%);
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
    color: #ffffff;
  }
  
  .prev-result__info {
    display: flex;
    align-items: center;
    gap: 16px;
  }
  
  .prev-result__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
  }
  
  .prev-result__icon svg {
    width: 100%;
    height: 100%;
  }
  
  .prev-result__texts {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  
  .prev-result__label {
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.04em;
    color: #ffffff;
  }
  
  .prev-result__meta {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.04em;
    color: #ffffff;
  }
  
  .prev-result__btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    height: 60px;
    padding: 0 30px;
    border-radius: 12px;
    background: #244847;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    text-decoration: none;
    transition: background 180ms ease, transform 180ms ease;
  }
  
  .prev-result__btn:hover,
  .prev-result__btn:focus-visible {
    background: #2f5956;
    transform: translateX(2px);
  }
  
  .prev-result__btn-arrow {
    display: inline-block;
    transition: transform 180ms ease;
  }
  
  .prev-result__btn:hover .prev-result__btn-arrow,
  .prev-result__btn:focus-visible .prev-result__btn-arrow {
    transform: translateX(4px);
  }
  
  /* -----------------------------------
     반응형 - Tablet (~1200px)
     ----------------------------------- */
  @media (max-width: 1200px) {
    .concierge-hero__title {
      font-size: 36px;
    }
  
    .concierge-hero__desc {
      font-size: 18px;
    }
  
    .type-card {
      height: 680px;
      padding: 40px;
    }
  
    .type-card__title {
      font-size: 36px;
    }
  
  }
  
  /* -----------------------------------
     반응형 - Mobile (~768px)
     ----------------------------------- */
  @media (max-width: 768px) {
    .concierge-hero {
      margin-bottom: 40px;
    }
  
    .concierge-hero__title {
      font-size: 28px;
      line-height: 1.3;
    }
  
    .concierge-hero__desc {
      font-size: 15px;
    }
  
    .type-select {
      margin-bottom: 40px;
    }
  
    .type-select__list {
      grid-template-columns: 1fr;
      gap: 16px;
    }
    
    .type-card {
      height: auto;
      min-height: 520px;
      padding: 32px 24px;
    }
  
    .type-card__body {
      width: 100%;
    }
  
    .type-card__label {
      font-size: 16px;
    }
  
    .type-card__title {
      font-size: 28px;
    }
  
    .type-card__desc {
      font-size: 15px;
    }
  
    .type-card__tag {
      font-size: 13px;
      padding: 5px 12px;
    }
    .type-card.type-card--game, .type-card.type-card--card {
      background-size: 75%, 100%;
    }
  
    /* Sticky Bar - Mobile */
    .prev-result {
      flex-direction: column;
      align-items: stretch;
      gap: 16px;
      padding: 20px 24px;
    }
  
    .prev-result__info {
      gap: 12px;
    }
  
    .prev-result__icon {
      width: 48px;
      height: 48px;
    }
  
    .prev-result__label {
      font-size: 14px;
    }
  
    .prev-result__meta {
      font-size: 17px;
    }
  
    .prev-result__btn {
      height: 52px;
      font-size: 15px;
      justify-content: center;
    }
  }
  
  /* -----------------------------------
     반응형 - Small Mobile (~480px)
     ----------------------------------- */
  @media (max-width: 480px) {
    .type-card {
      min-height: 480px;
      padding: 28px 20px;
    }
  
    .type-card__title {
      font-size: 24px;
    }
  }
  
  /* -----------------------------------
     Type card (Link)
     - index.html에서 Type A 카드를 <a>로 변경한 경우
     ----------------------------------- */
  .type-card--link {
    text-decoration: none;
    color: inherit;
  }
  
  .type-card--link:hover,
  .type-card--link:focus-visible {
    text-decoration: none;
  }
  
  /* ===================================
     Stepper (공통 컴포넌트)
     - 단계 진행 인디케이터
     - 상태: 기본(대기) / .is-current / .is-done
     =================================== */
  .stepper {
    position: relative;
    padding: 32px 62px;
    border: 1px solid #dedede;
    border-radius: 16px;
    background: #ffffff;
  }
  
  .stepper__list {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding: 0;
    margin: 0;
    list-style: none;
  }
  
  /* 연결 라인 (전체 트랙) */
  .stepper__list::before {
    content: "";
    position: absolute;
    top: 18px;
    left: 40px;
    right: 40px;
    height: 4px;
    background: var(--neutral-50);
    border-radius: 2px;
    z-index: 0;
  }
  
  .stepper__step {
    position: relative;
    z-index: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  
  /* Dot */
  .stepper__dot {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 2px solid var(--neutral-200);
    border-radius: 20px;
    background: var(--neutral-100);
    transition: background 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
  }
  
  .stepper__dot-num {
    font-family: var(--font-base);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    color: var(--neutral-400);
    letter-spacing: -0.02em;
  }
  
  /* Label */
  .stepper__label {
    display: block;
    max-width: 80px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.04em;
    color: var(--neutral-400);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  /* 상태: 완료 */
  .stepper__step.is-done .stepper__dot {
    background: var(--brand-700);
    border-color: var(--brand-700);
  }
  
  .stepper__step.is-done .stepper__dot-num {
    font-size: 0;
  }
  
  .stepper__step.is-done .stepper__dot-num::after {
    content: "✓";
    font-size: 14px;
    color: #ffffff;
  }
  
  .stepper__step.is-done .stepper__label {
    font-weight: 700;
    color: var(--neutral-900);
  }
  
  /* 상태: 현재 */
  .stepper__step.is-current .stepper__dot {
    background: var(--brand-700);
    border-color: var(--brand-600);
    box-shadow: 0 0 0 4px rgba(0, 90, 84, 0.25);
  }
  
  .stepper__step.is-current .stepper__dot-num {
    color: #ffffff;
  }
  
  .stepper__step.is-current .stepper__label {
    font-weight: 700;
    color: var(--neutral-900);
  }
  
  /* ===================================
     Game (게임형 플로우) 스텝 패널
     =================================== */
  
  /* -----------------------------------
     Step panel (단계별 섹션)
     ----------------------------------- */
  .step-panel {
    padding-top: 60px;
    padding-bottom: 32px;
  }
  
  .step-panel[hidden] {
    display: none;
  }
  
  .step-panel:not(.is-active) {
    display: none;
  }
  
  .step-panel.is-active {
    display: block;
  }
  
  .step-panel__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 40px;
    text-align: center;
  }
  
  .step-panel__label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(0, 90, 84, 0.06);
    color: var(--brand-700);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.04em;
    white-space: nowrap;
  }
  
  .step-panel__label--mono {
    font-family: var(--font-mono);
    font-weight: 600;
    letter-spacing: -0.02em;
  }
  
  .step-panel__title {
    margin-top: 10px;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.04em;
    color: var(--neutral-900);
  }
  
  .step-panel__subtitle {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.04em;
    color: var(--neutral-300);
  }
  
  /* -----------------------------------
     캐릭터 선택 카드 (3열)
     ----------------------------------- */
  .char-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 0;
    margin: 0;
    list-style: none;
  }
  
  .char-grid > li {
    list-style: none;
  }
  
  .char-card {
    position: relative;
    display: flex;
    flex-direction: column;
  
    width: 100%;
    height: 200px;
    padding: 25px;
    border: 1px solid #e0e0e0;
    border-radius: 16px;
    background: #ffffff;
    cursor: pointer;
    text-align: left;
    overflow: hidden;
    transition: border-color 200ms ease, background 200ms ease, transform 200ms ease, box-shadow 200ms ease;
    font: inherit;
    color: inherit;
  }
  
  .char-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
    border-color: var(--brand-600);
  }
  
  .char-card:focus-visible {
    outline: none;
    border-color: var(--brand-700);
    box-shadow: 0 0 0 3px rgba(7, 250, 216, 0.35);
  }
  
  .char-card.is-selected {
    border: 2px solid var(--brand-700);
    background: var(--brand-50);
    padding: 24px;
  }
  
  .char-card__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  
  .char-card__name {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -0.04em;
    color: var(--neutral-900);
  }
  
  .char-card__desc {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.04em;
    color: var(--neutral-300);
  }
  
  .char-card__img {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 150px;
    height: 150px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }
  
  .char-card__img img {
    width: 92%;
    height: auto;
    object-fit: contain;
  }
  
  /* -----------------------------------
     상황 선택 카드 (card.html - 2열 × 이미지)
     ----------------------------------- */
  .situation-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 0;
    margin: 0;
    list-style: none;
  }
  
  .situation-grid > li {
    list-style: none;
  }
  
  .situation-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    width: 100%;
    height: 200px;
    padding: 25px;
    border: 1px solid #e0e0e0;
    border-radius: 16px;
    background: #ffffff;
    cursor: pointer;
    text-align: left;
    overflow: hidden;
    transition: border-color 200ms ease, background 200ms ease, transform 200ms ease, box-shadow 200ms ease;
    font: inherit;
    color: inherit;
  }
  
  .situation-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
    border-color: var(--brand-600);
  }
  
  .situation-card:focus-visible {
    outline: none;
    border-color: var(--brand-700);
    box-shadow: 0 0 0 3px rgba(7, 250, 216, 0.35);
  }
  
  .situation-card.is-selected {
    border: 2px solid var(--brand-700);
    background: var(--brand-50);
    padding: 24px;
  }
  
  .situation-card__text {
    flex: 1 1 auto;
    max-width: calc(100% - 200px);
    font-size: 22px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.04em;
    color: var(--neutral-900);
  }
  
  .situation-card__text strong {
    font-weight: 700;
  }
  
  .situation-card__img {
    position: absolute;
    right: 0;
    bottom: -25px;
    width: 200px;
    height: 200px;
    display: inline-flex;
    align-items: flex-end;
    justify-content: flex-end;
    pointer-events: none;
  }
  
  .situation-card__img img {
    width: 172px;
    height: 172px;
    object-fit: cover;
  }
  
  /* -----------------------------------
     설문 카드 (2열 × N행)
     ----------------------------------- */
  .survey-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 0;
    margin: 0;
    list-style: none;
  }
  
  .survey-grid > li {
    list-style: none;
  }
  
  .survey-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 8px;
    width: 100%;
    min-height: 150px;
    padding: 25px;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    background: #ffffff;
    overflow: hidden;
    cursor: pointer;
    text-align: right;
    transition: border-color 200ms ease, background 200ms ease, transform 200ms ease, box-shadow 200ms ease;
    font: inherit;
    color: inherit;
  }
  
  .survey-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
    border-color: var(--brand-600);
  }
  
  .survey-card:focus-visible {
    outline: none;
    border-color: var(--brand-700);
    box-shadow: 0 0 0 3px rgba(7, 250, 216, 0.35);
  }
  
  .survey-card.is-selected {
    border: 2px solid var(--brand-700);
    background: var(--brand-50);
    padding: 24px;
  }
  
  .survey-card__num {
    position: absolute;
    left: -40px;
    top: -50px;
    font-family: var(--font-base);
    font-size: 160px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--brand-700);
    opacity: 0.05;
    pointer-events: none;
    user-select: none;
    z-index: 0;
  }
  
  .survey-card__text {
    position: relative;
    z-index: 1;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -0.04em;
    color: var(--neutral-700);
  }
  
  /* -----------------------------------
     다중/단일 선택 리스트 (card.html - 1열 체크)
     ----------------------------------- */
  .select-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0;
    margin: 0;
    list-style: none;
  }
  
  .select-list > li {
    list-style: none;
  }
  
  .select-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 25px;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    background: #ffffff;
    cursor: pointer;
    text-align: left;
    transition: border-color 200ms ease, background 200ms ease, transform 200ms ease, box-shadow 200ms ease;
    font: inherit;
    color: inherit;
  }
  
  .select-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.04);
    border-color: var(--brand-600);
  }
  
  .select-card:focus-visible {
    outline: none;
    border-color: var(--brand-700);
    box-shadow: 0 0 0 3px rgba(7, 250, 216, 0.35);
  }
  
  .select-card.is-selected {
    border: 1px solid var(--brand-700);
    background: var(--brand-50);
  }
  
  /* 체크 인디케이터 (원형) */
  .select-card__check {
    flex-shrink: 0;
    position: relative;
    display: inline-block;
    width: 28px;
    height: 28px;
    border: 2px solid var(--neutral-200);
    border-radius: 50%;
    background: transparent;
    transition: background 180ms ease, border-color 180ms ease;
  }
  
  .select-card__check::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'><path d='M2.5 7.5l3 3 6-6' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 180ms ease;
  }
  
  .select-card.is-selected .select-card__check {
    background: var(--neutral-900);
    border-color: var(--neutral-900);
  }
  
  .select-card.is-selected .select-card__check::after {
    opacity: 1;
  }
  
  .select-card__text {
    flex: 1 1 auto;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.04em;
    color: var(--neutral-700);
  }
  
  /* -----------------------------------
     Step 하단 네비게이션 바
     ----------------------------------- */
  .step-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
    padding: 12px 32px;
    background: #ffffff;
    border-top: 1px solid var(--neutral-200);
  }
  
  .step-nav__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 32px;
    border: 1px solid var(--neutral-200);
    border-radius: 10px;
    background: #ffffff;
    color: var(--neutral-700);
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    cursor: pointer;
    transition: background 180ms ease, border-color 180ms ease, transform 180ms ease, opacity 180ms ease;
    font-family: inherit;
  }
  
  .step-nav__btn:hover:not(.is-disabled):not(:disabled) {
    border-color: var(--neutral-900);
    background: var(--neutral-50);
  }
  
  .step-nav__btn--next {
    border: none;
    background: var(--neutral-900);
    color: #ffffff;
  }
  
  .step-nav__btn--next:hover:not(.is-disabled):not(:disabled) {
    background: var(--neutral-800);
    border: none;
  }
  
  .step-nav__btn.is-disabled,
  .step-nav__btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }
  
  .step-nav__progress {
    font-family: var(--font-base);
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--neutral-300);
    text-align: center;
  }
  
  .step-nav__progress.step-nav__progress--mono {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 15px;
    letter-spacing: -0.02em;
  }
  
  /* -----------------------------------
     반응형 - Tablet (~1200px)
     ----------------------------------- */
  @media (max-width: 1200px) {
    .game__inner {
      padding: 0 32px;
    }
  
    .stepper {
      padding: 24px;
    }
  
    .stepper__label {
      font-size: 11px;
    }
  
    .step-panel__title {
      font-size: 28px;
    }
  
    .char-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  
    .survey-card__text {
      font-size: 18px;
    }
  
    .situation-card__text {
      font-size: 18px;
      max-width: calc(100% - 170px);
    }
  
    .situation-card__img {
      width: 170px;
      height: 170px;
    }
  
    .situation-card__img img {
      width: 146px;
      height: 146px;
    }
  
    .select-card__text {
      font-size: 16px;
    }
  }
  
  /* -----------------------------------
     반응형 - Mobile (~768px)
     ----------------------------------- */
  @media (max-width: 768px) {
    .stepper {
      padding: 20px 12px;
      border-radius: 12px;
    }
  
    .stepper__list::before {
      left: 24px;
      right: 24px;
    }
  
    .stepper__dot {
      width: 32px;
      height: 32px;
    }
  
    .stepper__dot-num {
      font-size: 12px;
    }
  
    .stepper__label {
      font-size: 10px;
      max-width: 56px;
    }
  
    .step-panel {
      padding-top: 40px;
    }
  
    .step-panel__title {
      font-size: 22px;
    }
  
    .step-panel__subtitle {
      font-size: 14px;
    }
  
    .char-grid,
    .survey-grid,
    .situation-grid {
      grid-template-columns: 1fr;
    }
  
    .char-card {
      height: auto;
      min-height: 160px;
      padding: 20px;
    }
  
    .char-card.is-selected {
      padding: 19px;
    }
  
    .char-card__text {
      width: calc(100% - 110px);
    }
  
    .char-card__name {
      font-size: 18px;
    }
  
    .char-card__desc {
      font-size: 14px;
    }
  
    .char-card__img {
      width: 110px;
      height: 110px;
    }
  
    .survey-card {
      min-height: 120px;
      padding: 20px;
    }
  
    .survey-card.is-selected {
      padding: 19px;
    }
  
    .survey-card__num {
      font-size: 90px;
      left: 16px;
      top: -16px;
    }
  
    .survey-card__text {
      font-size: 16px;
    }
  
    /* Situation card - mobile */
    .situation-card {
      height: auto;
      min-height: 160px;
      padding: 20px;
    }
  
    .situation-card.is-selected {
      padding: 19px;
    }
  
    .situation-card__text {
      font-size: 15px;
      max-width: calc(100% - 120px);
    }
  
    .situation-card__img {
      width: 120px;
      height: 120px;
    }
  
    .situation-card__img img {
      width: 104px;
      height: 104px;
    }
  
    /* Select card - mobile */
    .select-card {
      padding: 18px;
      gap: 12px;
    }
  
    .select-card__check {
      width: 24px;
      height: 24px;
    }
  
    .select-card__text {
      font-size: 15px;
    }
  
    /* Step nav - mobile */
    .step-nav {
      padding: 10px 16px;
      height: 72px;
    }
  
    .step-nav__btn {
      height: 44px;
      padding: 0 18px;
      font-size: 14px;
    }
  
    .step-nav__progress {
      font-size: 13px;
      max-width: 120px;
    }
  }
  
  /* ===================================
     Result 페이지 (result.html)
     =================================== */
  
  /* -----------------------------------
     Result Hero
     ----------------------------------- */
  
  .result-hero__overline {
    color: var(--brand-300);
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    margin-bottom: 20px;
  }
  
  .result-hero__title {
    font-size: 36px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    color: #ffffff;
    margin-bottom: 16px;
  }
  
  .result-hero__desc {
    max-width: 600px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: -0.04em;
    color: var(--neutral-100);
    margin-bottom: 20px;
  }
  
  .result-hero__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    margin: 0;
    list-style: none;
  }
  
  .result-hero__tag {
    display: inline-flex;
    align-items: center;
    padding: 9px 17px;
    border: 1px solid var(--brand-50);
    border-radius: 9999px;
    background: var(--brand-50);
    color: var(--brand-900);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.04em;
    white-space: nowrap;
  }
  
  /* -----------------------------------
     공통 섹션 헤더
     ----------------------------------- */
  .result-section {
    display: flex;
    flex-direction: column;
  }
  
  .result-section__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
  }
  
  .result-section__title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--neutral-900);
  }
  
  .result-section__count {
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--neutral-300);
  }
  
  /* -----------------------------------
     추천 강의 카드 (4열 그리드)
     ----------------------------------- */
  .course-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    padding: 0;
    margin: 0 0 24px;
    list-style: none;
  }
  
  .course-grid > li {
    list-style: none;
  }
  
  .course-card {
    position: relative;
    display: block;
    height: 100%;
    border: 1px solid var(--neutral-100);
    border-radius: 16px;
    background: #ffffff;
    overflow: hidden;
    transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
  }
  
  .course-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
    border-color: var(--brand-600);
  }
  
  .course-card__link {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 310px;
    padding: 16px 16px 24px;
    text-decoration: none;
    color: inherit;
  }
  
  .course-card__thumb {
    position: relative;
    width: 100%;
    min-height: 136px;
    /*aspect-ratio: 266 / 148; */
    border-radius: 8px;
    overflow: hidden;
    background: var(--neutral-50);
    border-bottom: 1px solid #e0e0e0;
  }
  
  .course-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  
  .course-card__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 20px;
  }
  
  .course-card__cat {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.04em;
    color: var(--neutral-400);
  }
  
  .course-card__title {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.04em;
    color: var(--neutral-900);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }
  
  .course-card__meta {
    margin-top: 6px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.04em;
    color: var(--neutral-300);
  }
  
  .course-card__num {
    position: absolute;
    right: 20px;
    bottom: -20px;
    font-family: var(--font-base);
    font-size: 68px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--brand-700);
    opacity: 0.05;
    pointer-events: none;
    user-select: none;
  }
  
  /* -----------------------------------
     추천 강의 테이블 (5~10)
     ----------------------------------- */
  .course-table-wrap {
    border: 1px solid var(--neutral-100);
    border-radius: 10px;
    overflow: hidden;
  }
  
  .course-table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
  }
  
  .course-table__th {
    padding: 14px 20px;
    background: var(--brand-50);
    border-bottom: 1px solid var(--neutral-50);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.04em;
    color: var(--neutral-300);
    text-align: left;
  }
  
  .course-table__th--num {
    width: 70px;
    padding-left: 32px;
  }
  
  .course-table__th--cat {
    width: 140px;
  }
  
  .course-table__th--inst,
  .course-table__th--dur {
    width: 130px;
  }
  
  .course-table tbody tr {
    border-bottom: 1px solid var(--neutral-50);
    transition: background 160ms ease;
  }
  
  .course-table tbody tr:last-child {
    border-bottom: 0;
  }
  
  .course-table tbody tr:hover {
    background: var(--brand-50);
  }
  
  .course-table td {
    padding: 18px 20px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.04em;
    color: var(--neutral-700);
    vertical-align: middle;
  }
  
  .course-table .course-table__num {
    width: 70px;
    padding-left: 32px !important;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    color: var(--neutral-200);
  }
  
  .course-table__title {
    padding-right: 80px !important;
    font-size: 15px;
    font-weight: 600;
    color: var(--neutral-700);
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .course-table__title .course-table__meta {
    display: none;
    padding-top: 6px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    color: var(--neutral-300);
  }
  
  /* -----------------------------------
     추천 도서 (2열)
     ----------------------------------- */
  .book-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border: 1px solid var(--neutral-100);
    border-radius: 10px;
    overflow: hidden;
  }
  
  .book-card {
    border-bottom: 1px solid var(--neutral-50);
    border-right: 1px solid var(--neutral-50);
    background: #ffffff;
    transition: background 160ms ease;
  }
  
  .book-card:nth-child(2n) {
    border-right: 0;
  }
  
  .book-card:hover {
    background: var(--brand-50);
  }
  
  .book-card__link {
    display: flex;
    gap: 24px;
    padding: 24px 50px 24px 24px;
    text-decoration: none;
    color: inherit;
  }
  
  .book-card__cover {
    flex-shrink: 0;
    width: 110px;
    height: 160px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--neutral-50);
  }
  
  .book-card__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  
  .book-card__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 4px 0;
  }
  
  .book-card__cat {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.04em;
    color: var(--neutral-300);
  }
  
  .book-card__title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.04em;
    color: var(--neutral-900);
  }
  
  .book-card__author {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.04em;
    color: var(--neutral-300);
  }
  
  .book-card__desc {
    margin-top: 6px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: -0.04em;
    color: var(--neutral-400);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
  }
  
  /* -----------------------------------
     추천 심리검사 (1열 리스트)
     ----------------------------------- */
  .test-list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--neutral-100);
    border-radius: 10px;
    overflow: hidden;
    padding: 0;
    margin: 0;
    list-style: none;
  }
  
  .test-list > li {
    list-style: none;
  }
  
  .test-item {
    border-bottom: 1px solid var(--neutral-50);
    background: #ffffff;
    transition: background 160ms ease;
  }
  
  .test-list > li:last-child .test-item {
    border-bottom: 0;
  }
  
  .test-item:hover {
    background: var(--brand-50);
  }
  
  .test-item__link {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 18px 20px;
    text-decoration: none;
    color: inherit;
  }
  
  .test-item__thumb {
    flex-shrink: 0;
    width: 110px;
    aspect-ratio: 110 / 92;
    border-radius: 4px;
    overflow: hidden;
    background: var(--neutral-50);
  }
  
  .test-item__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  
  .test-item__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  
  .test-item__cat {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.04em;
    color: var(--neutral-300);
  }
  
  .test-item__title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.04em;
    color: var(--neutral-900);
  }
  
  .test-item__author {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.04em;
    color: var(--neutral-300);
  }
  
  .test-item__desc {
    margin-top: 6px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: -0.04em;
    color: var(--neutral-400);
  }
  
  /* -----------------------------------
     CTA Banner (구독 유도)
     ----------------------------------- */
  .cta-banner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 200px;
    padding: 60px 70px;
    border-radius: 16px;
    overflow: hidden;
    background: var(--brand-700);
    color: #ffffff;
  }
  
  .cta-banner__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.6;
  }
  
  .cta-banner__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  
  .cta-banner__texts {
    position: relative;
    z-index: 1;
    max-width: 560px;
  }
  
  .cta-banner__title {
    margin-bottom: 6px;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.04em;
  }
  
  .cta-banner__desc {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.04em;
    color: #ffffff;
    opacity: 0.9;
  }
   
  .cta-banner__btn {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 250px;
    height: 54px;
    padding: 0 24px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.85);
    color: var(--neutral-900);
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    text-decoration: none;
    transition: background 180ms ease, transform 180ms ease;
  }
  
  .cta-banner__btn:hover {
    background: #ffffff;
    transform: translateX(2px);
  }
  
  /* CTA 구독자/비구독자 분기
     - 기본(비구독자): .cta-banner--guest 노출, .cta-banner--subscriber 숨김
     - body.is-subscriber 적용 시: 반대로 노출/숨김 전환 */
  .cta-banner.cta-banner--subscriber {
    display: none;
  }
  
  .is-subscriber .cta-banner.cta-banner--guest {
    display: none;
  }
  
  .is-subscriber .cta-banner.cta-banner--subscriber {
    display: flex;
  }
  
  /* -----------------------------------
     Result 반응형
     ----------------------------------- */
  
  @media (max-width: 1200px) {
    /*
    .course-grid {
      grid-template-columns: repeat(3, 1fr);
    }
      */
    .course-card__title {
      font-size: 20px;
    }
  
    .cta-banner {
      padding: 40px 48px;
    }
  
    .cta-banner__title {
      font-size: 26px;
    }
  
    .cta-banner__desc {
      font-size: 17px;
    }
  }
  
  @media (max-width: 1024px) {
    .course-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  
    .book-grid {
      grid-template-columns: 1fr;
    }
  
    .book-card {
      border-right: 0;
    }
  
    .course-table__title {
      padding-right: 20px !important;
    }
  
    .cta-banner {
      flex-direction: column;
      align-items: flex-start;
    }
  }
  
  @media (max-width: 768px) {
    .result-hero__title {
      font-size: 28px;
    }
  
    .result-hero__desc {
      font-size: 14px;
    }
  
    .course-card {
      border-radius: 8px;
    }
    .course-card__link {
      min-height: 260px;
      padding: 0;
    }
    .course-card__body {
      padding: 16px;
    }
    .course-card__thumb {
      height: 90px;
      border-radius: 8px 8px 0 0;
    }
    .course-card__title {
      font-size: 16px;
    }
  
    .course-table-wrap {
      overflow-x: auto;
    }
    .course-table thead {
      display: none;
    }
    .course-table .course-table__num {
      padding: 18px 8px 18px 18px !important;
      width: 32px;
      vertical-align: baseline;
    }
    .course-table .course-table__title {
      padding-left: 0;
      font-weight: 600;
      color: var(--neutral-900);
    }
    .course-table__title .course-table__meta {
      display: block;
    }
  
    .course-table__th--cat,
    .course-table__th--inst,
    .course-table__th--dur,
    .course-table__cat,
    .course-table__inst,
    .course-table__dur {
      display: none;
    }
  
    .book-card__link {
      padding: 16px;
      gap: 16px;
    }
  
    .book-card__cover {
      width: 80px;
      height: 116px;
    }
  
    .book-card__title {
      font-size: 15px;
    }
  
    .book-card__desc {
      font-size: 13px;
      -webkit-line-clamp: 3;
      line-clamp: 3;
    }
  
    .test-item__link {
      padding: 16px;
      gap: 16px;
    }
  
    .test-item__thumb {
      width: 80px;
    }
  
    .test-item__title {
      font-size: 15px;
    }
  
    .cta-banner {
      min-height: auto;
      padding: 28px;
    }
  
    .cta-banner__title {
      font-size: 20px;
    }
  
    .cta-banner__desc {
      font-size: 15px;
    }
  
    .cta-banner__btn {
      min-width: 0;
      width: 100%;
      height: 48px;
      font-size: 15px;
    }
  }