/* ===================================
   main.css - 메인 페이지 전용 스타일
   - style.css의 :root 토큰 재사용 (재정의 금지)
   - BEM (Block__Element--Modifier)
   - Desktop First 반응형 (1200 / 768 / 480)
   =================================== */

/* -----------------------------------
   섹션 구분 주석 템플릿
   ----------------------------------- */
/* ===== Hero ===== */
/* ===== Course Explore ===== */
/* ===== Plan ===== */
/* ===== FAQ ===== */
/* ===== Sticky Bar ===== */

/* main inner: Hero 는 풀블리드이므로 inner padding을 상쇄 */
.main .inner {
    padding: 0;
    max-width: none;
  }
  
  /* ===================================
     Hero
     =================================== */
  .hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    /*height: 100vh;
    height: 100dvh;*/
    min-height: 1080px;
    overflow: hidden;
    padding: 120px 48px 120px;
    background-color: var(--brand-900);
    color: #ffffff;
    isolation: isolate;
  }
  
  /* --- 배경 --- */
  .hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
  }
  
  .hero__bg-image {
    position: absolute;
    inset: 0;
    background-color: #000;
    background-image: url("../image/main/hero-bg.png");
    background-size: contain;
    background-position: center top;
    background-repeat: no-repeat;
  }
  
  .hero__bg-overlay {
    position: absolute;
    inset: 0;
    background-color: var(--brand-200);
    mix-blend-mode: color-burn;
  }
  
  /* --- 데코 오브젝트 --- */
  .hero__deco {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
  }
  
  .hero__deco-item {
    position: absolute;
    display: block;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }
  
  .hero__deco-item--1 {
    top: -18%;
    left: 94%;
    width: 221px;
    height: 214px;
    background: url("../image/main/hero-deco-1.png") no-repeat center center;
    mix-blend-mode: hard-light;
  }
  
  .hero__deco-item--2 {
    top: 51.2%;
    left: 45.7%;
    width: 348px;
    height: 352px;
    background-image: url("../image/main/hero-deco-3.png");
    opacity: 0.95;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
    z-index: 9;
    pointer-events: none;
  }
  
  .hero__deco-item--3 {
    top: 76%;
    right: -30%;
    width: 210px;
    height: 206px;
    background-image: url("../image/main/hero-deco-2.png");
  }
  
  /* --- Hero deco 진입(fade-in) + 둥둥 떠있는(float) 애니메이션 --- */
  @keyframes hero-deco-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  
  @keyframes hero-deco-float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-12px) rotate(1.5deg); }
  }
  
  .hero__deco-item {
    opacity: 0;
    animation:
      hero-deco-fade-in 900ms cubic-bezier(0.22, 1, 0.36, 1) forwards,
      hero-deco-float 5s ease-in-out infinite;
  }
  
  .hero__deco-item--1 {
    animation-delay: 200ms, 1100ms;
    animation-duration: 900ms, 5.5s;
  }
  
  .hero__deco-item--2 {
    animation-delay: 400ms, 1300ms;
    animation-duration: 900ms, 6.5s;
  }
  
  .hero__deco-item--3 {
    animation-delay: 600ms, 1500ms;
    animation-duration: 900ms, 5s;
  }
  
  @media (prefers-reduced-motion: reduce) {
    .hero__deco-item {
      animation: none;
      opacity: 1;
    }
  }
  
  /* --- 컨텐츠 레이아웃 --- */
  .hero__inner {
    position: relative;
    z-index: 2;
    max-width: var(--content-main-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 382px;
    gap: 96px;
    align-items: center;
  }
  
  .hero__content {
    display: flex;
    flex-direction: column;
    gap: 60px;
    max-width: 842px;
  }
  
  /* --- Overline 배지 (컨테이너 전용 보정) --- */
  .hero__overline {
    align-self: flex-start;
  }
  
  /* --- 타이틀 묶음 --- */
  .hero__texts {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  
  .hero__subtitle {
    margin: 0;
    font-size: 26px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.04em;
    color: #eeeeee;
  }
  
  .hero__title {
    margin: 0;
    font-size: 52px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.04em;
    color: #ffffff;
  }
  
  .hero__title-line {
    display: block;
  }
  
  .hero__desc {
    margin: 0;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.64;
    letter-spacing: -0.04em;
    color: #eeeeee;
  }
  
  .hero__desc-line {
    display: block;
  }
  
  /* --- CTA 액션 --- */
  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    padding: 0 30px;
    border-radius: var(--radius-md);
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 120ms ease;
  }
  
  .hero__btn:active {
    transform: scale(0.98);
  }
  
  .hero__btn--accent {
    background-color: var(--brand-300);
    color: var(--neutral-900);
    border: 1px solid var(--brand-300);
  }
  
  .hero__btn--accent:hover,
  .hero__btn--accent:focus-visible {
    background-color: #68ff98;
    border-color: #68ff98;
    box-shadow: 0 0 0 6px rgba(77, 250, 131, 0.2);
  }
  
  .hero__btn--outline {
    background-color: transparent;
    color: #ffffff;
    border: 1px solid #ffffff;
  }
  
  .hero__btn--outline:hover,
  .hero__btn--outline:focus-visible {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--brand-300);
    color: var(--brand-300);
  }
  
  /* --- 강의 카드 (우측) --- */
  .hero__feature {
    position: relative;
    z-index: 2;
    justify-self: end;
  }
  
  .hero-card {
    position: relative;
    width: 382px;
    padding: 15px;
    outline: 8px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-xl);
    background-image: linear-gradient(145deg, #ffffff 3%, #ebebeb 99%);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.25);
    color: var(--neutral-900);
    overflow: hidden;
  }
  
  .hero-card__thumb {
    width: 100%;
    height: 243px;
    border-radius: var(--radius-md);
    overflow: hidden;
    background-color: #000000;
  }
  
  .hero-card__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .hero-card__body {
    padding: 19px 0 0;
  }
  
  .hero-card__meta {
    position: relative;
    margin: 0 0 6px;
    padding-left: 18px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.04em;
    color: var(--neutral-800);
  }
  
  .hero-card__meta-bullet {
    position: absolute;
    left: 0;
    top: 50%;
    width: 10px;
    height: 10px;
    transform: translateY(-50%);
    background-image: url("../image/main/hero-bullet.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
  
  .hero-card__title {
    margin: 0 0 14px;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.04em;
    color: var(--neutral-900);
  }
  
  .hero-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
  }
  
  .hero-card__tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 6px;
    background-color: #ffffff;
    border-radius: var(--radius-sm);
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--neutral-500);
  }
  
  .hero-card__actions {
    display: flex;
    align-items: stretch;
    gap: 1px;
  }
  
  .hero-card__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 54px;
    padding: 0 16px;
    border: 0;
    border-radius: var(--radius-md);
    background-color: var(--neutral-900);
    color: #ffffff;
    font-family: inherit;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 180ms ease, transform 120ms ease;
  }
  
  .hero-card__btn:hover,
  .hero-card__btn:focus-visible {
    background-color: var(--neutral-800);
  }
  
  .hero-card__btn:active {
    transform: scale(0.98);
  }
  
  .hero-card__btn--main {
    flex: 1 0 0;
    min-width: 0;
  }
  
  .hero-card__btn--plus {
    width: 54px;
    flex: 0 0 54px;
    font-size: 22px;
  }
  
  /* --- 페이지네이션 도트 --- */
  .hero__pager {
    position: absolute;
    left: 50%;
    bottom: 32px;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    margin: 0;
    list-style: none;
  }
  
  .hero__pager-dot {
    display: block;
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    transition: background-color 180ms ease, width 200ms ease;
  }
  
  .hero__pager-dot:hover,
  .hero__pager-dot:focus-visible {
    background-color: rgba(255, 255, 255, 0.65);
  }
  
  .hero__pager-dot.is-active {
    width: 28px;
    border-radius: var(--radius-full);
    background-color: var(--brand-500);
  }
  
  /* ===================================
     반응형 - Desktop First
     =================================== */
  
  /* Tablet: 1200px 이하 */
  @media (max-width: 1200px) {
    .hero__inner {
      padding: 100px 32px 100px;
      gap: 48px;
      grid-template-columns: minmax(0, 1fr) 340px;
    }
  
    .hero__content {
      gap: 40px;
    }
  
    .hero__title {
      font-size: 42px;
    }
  
    .hero__subtitle {
      font-size: 22px;
    }
  
    .hero__desc {
      font-size: 20px;
    }
  
    .hero-card {
      width: 340px;
    }
  
    .hero-card__thumb {
      height: 210px;
    }
  
    .hero-card__title {
      font-size: 24px;
    }
  
    .hero__deco-item--1 {
      width: 180px;
      height: 172px;
    }
  
    .hero__deco-item--2 {
      width: 220px;
      height: 224px;
      top: auto;
      bottom: -20%;
    }
  
    .hero__deco-item--3 {
      width: 130px;
      height: 128px;
    }
  }
  
  /* Tablet: 1200px 이하 */
  @media (max-width: 1024px) {
    .hero__inner {
      padding:80px 0;
    }
  }
  
  /* Tablet: 768px 이하 */
  @media (max-width: 768px) {
    .hero {
      min-height: 0;
      padding: clamp(40px, 15.6vw, 72px) 24px clamp(80px, 15.6vw, 120px);
    }
  
    .hero__inner {
      padding: 80px 20px 96px;
      grid-template-columns: 1fr;
      gap: 56px;
    }
  
    .hero__content {
      gap: 32px;
    }
  
    .hero__texts {
      gap: 12px;
    }
  
    .hero__subtitle {
      font-size: 18px;
    }
  
    .hero__title {
      font-size: 34px;
      line-height: 1.3;
    }
  
    .hero__title-line {
      display: inline;
    }
  
    .hero__desc {
      font-size: 17px;
      line-height: 1.6;
    }
  
    .hero__actions {
      gap: 8px;
    }
  
    .hero__btn {
      height: 54px;
      padding: 0 22px;
      font-size: 17px;
    }
  
    .hero__feature {
      justify-self: center;
    }
  
    .hero-card {
      width: 100%;
      max-width: 382px;
      border-width: 6px;
    }
  
    .hero-card__thumb {
      height: 220px;
    }
  
    .hero__deco-item--1 {
      top: 2%;
      left: auto;
      right: 0;
      width: 140px;
      height: 134px;
      background-size: cover;
    }
  
    .hero__deco-item--2 {
      display: none;
    }
  
    .hero__deco-item--3 {
      top: auto;
      bottom: 20%;
      right: -30px;
      width: 110px;
      height: 108px;
    }
  
    .hero__pager {
      bottom: 24px;
    }
  }
  
  /* Mobile: 480px 이하 */
  @media (max-width: 480px) {
    .hero {
      padding: 40px 24px 80px;
    }
    .hero__inner {
      padding: 64px 16px 80px;
      gap: 40px;
    }
  
    .hero__subtitle {
      font-size: 16px;
    }
  
    .hero__title {
      font-size: 28px;
    }
  
    .hero__desc {
      font-size: 15px;
    }
  
    .hero__actions {
      flex-direction: column;
      align-items: stretch;
    }
  
    .hero__btn {
      width: 100%;
      height: 50px;
      padding: 0 18px;
      font-size: 15px;
    }
  
    .hero-card {
      padding: 12px;
      border-width: 4px;
    }
  
    .hero-card__thumb {
      height: 180px;
    }
  
    .hero-card__title {
      font-size: 22px;
    }
  
    .hero-card__meta {
      font-size: 15px;
    }
  
    .hero-card__tag {
      font-size: 13px;
    }
  
    .hero-card__btn {
      height: 48px;
      font-size: 15px;
    }
  
    .hero-card__btn--plus {
      width: 48px;
      flex-basis: 48px;
    }
  
    .hero__deco-item--1,
    .hero__deco-item--3 {
      width: 90px;
      height: 88px;
    }
  }
  
  /* ===================================
     Partner - 파트너/제휴사 로고 스트립
     - Hero 바로 아래 위치, 풀블리드 배경
     - 데스크탑: 횡방향 스크롤 가능 (overflow-x auto)
     - 로고 간 간격 60px, 상하 padding으로 호흡 확보
     =================================== */
  .partner {
    position: relative;
    width: 100%;
    background-color: #f7f7f7;
    border-bottom: 1px solid var(--neutral-200);
  }
  
  .partner__viewport {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
  }
  
  .partner__track {
    display: flex;
    align-items: center;
    gap: 60px;
    min-height: 120px;
    padding: 20px 0;
    margin: 0;
    width: max-content;
    flex: 0 0 auto;
    list-style: none;
  }
  
  /* 우 → 좌 무한 자동 루프 (JS가 아이템 복제 후 .partner--marquee 부여) */
  .partner--marquee .partner__track {
    animation: partner-marquee var(--marquee-duration, 40s) linear infinite;
    will-change: transform;
  }
  
  .partner--marquee .partner__viewport:hover .partner__track {
    animation-play-state: paused;
  }
  
  @keyframes partner-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-1 * var(--marquee-distance, 50%))); }
  }
  
  @media (prefers-reduced-motion: reduce) {
    .partner--marquee .partner__track {
      animation: none;
    }
  }
  
  .partner__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    line-height: 1;
    filter: grayscale(0.05);
    opacity: 0.92;
    transition: filter 180ms ease, opacity 180ms ease, transform 180ms ease;
  }
  
  .partner__item:hover,
  .partner__item:focus-within {
    filter: grayscale(0);
    opacity: 1;
    transform: translateY(-2px);
  }
  
  .partner__logo {
    display: block;
    width: auto;
    max-width: none;
    height: auto;
    object-fit: contain;
  }
  
  /* --- 아이템별 개별 크기 (Figma 사양 기준) --- */
  .partner__item--kcpa .partner__logo     { width: 245px; height: 50px; }
  .partner__item--elem .partner__logo     { width: 240px; height: 51px; }
  .partner__item--teacher .partner__logo  { width: 95px;  height: 80px; }
  .partner__item--youth .partner__logo    { width: 83px;  height: 80px; }
  .partner__item--family .partner__logo   { width: 80px;  height: 77px; }
  .partner__item--kpa .partner__logo      { width: 70px;  height: 80px; }
  .partner__item--clinical .partner__logo { width: 81px;  height: 80px; }
  .partner__item--kslp .partner__logo     { width: 124px; height: 64px; }
  .partner__item--kart .partner__logo      { width: 176px; height: 72px; }
  .partner__item--ybm .partner__logo      { width: 141px; height: 40px; }
  .partner__item--lg .partner__logo      { width: 176px; height: 64px; }
  .partner__item--posco .partner__logo    { width: 154px; height: 42px; }
  
  /* --- 반응형 --- */
  @media (max-width: 1200px) {
    .partner__viewport {
      padding: 0 24px;
    }
  
    .partner__track {
      gap: 48px;
      min-height: 108px;
      padding: 16px 0;
    }
  }
  
  @media (max-width: 768px) {
    .partner__viewport {
      padding: 0 20px;
    }
  
    .partner__track {
      gap: 36px;
      min-height: 96px;
      padding: 14px 0;
    }
  
    .partner__item--kcpa .partner__logo     { width: 196px; height: 40px; }
    .partner__item--elem .partner__logo     { width: 192px; height: 41px; }
    .partner__item--teacher .partner__logo  { width: 76px;  height: 64px; }
    .partner__item--youth .partner__logo    { width: 66px;  height: 64px; }
    .partner__item--family .partner__logo   { width: 64px;  height: 62px; }
    .partner__item--kpa .partner__logo      { width: 56px;  height: 64px; }
    .partner__item--clinical .partner__logo { width: 65px;  height: 64px; }
    .partner__item--kslp .partner__logo     { width: 100px; height: 52px; }
    .partner__item--art .partner__logo      { width: 113px; height: 32px; }
    .partner__item--ybm .partner__logo      { width: 141px; height: 52px; }
    .partner__item--posco .partner__logo    { width: 124px; height: 34px; }
  }
  
  @media (max-width: 480px) {
    .partner__viewport {
      padding: 0 16px;
    }
  
    .partner__track {
      gap: 28px;
      min-height: 84px;
      padding: 12px 0;
    }
  
    .partner__item--kcpa .partner__logo     { width: 168px; height: 34px; }
    .partner__item--elem .partner__logo     { width: 164px; height: 35px; }
    .partner__item--teacher .partner__logo  { width: 64px;  height: 54px; }
    .partner__item--youth .partner__logo    { width: 56px;  height: 54px; }
    .partner__item--family .partner__logo   { width: 54px;  height: 52px; }
    .partner__item--kpa .partner__logo      { width: 48px;  height: 54px; }
    .partner__item--clinical .partner__logo { width: 55px;  height: 54px; }
    .partner__item--kslp .partner__logo     { width: 86px;  height: 44px; }
    .partner__item--art .partner__logo      { width: 98px;  height: 28px; }
    .partner__item--ybm .partner__logo      { width: 122px; height: 44px; }
    .partner__item--posco .partner__logo    { width: 108px; height: 30px; }
  }
  
  /* ===================================
     Story - 유저 스토리 캐러셀
     - 섹션 타이틀(Overline + H2 + Desc) + 3장 카드 슬라이드
     - 카드는 795px 고정, 콘텐츠 영역을 넘어 양쪽으로 살짝 보이는 레이아웃
     - 하단: 진행 바(절반 트랙) + 이전/다음 원형 버튼
     =================================== */
  .story {
    position: relative;
    width: 100%;
    background-color: #ffffff;
    color: var(--neutral-900);
  }
  
  .story__inner {
    margin: 0 auto;
    padding: 120px 0 140px;
  }
  
  /* --- Head (Overline + Title + Desc) --- */
  .story__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    max-width: 706px;
    margin: 0 auto;
    text-align: center;
  }
  
  .story__title {
    margin: 0;
    font-size: 44px;
    font-weight: 700;
    line-height: 1.36;
    letter-spacing: -0.04em;
  }
  
  .story__title-line {
    display: block;
  }
  
  .story__title-strong {
    color: var(--neutral-900);
  }
  
  .story__title-muted {
    color: var(--neutral-300);
  }
  
  .story__desc {
    margin: 0;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.36;
    letter-spacing: -0.04em;
    color: var(--neutral-700);
  }
  
  /* --- Carousel --- */
  .story__carousel {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    margin-top: 80px;
  }
  
  /* Swiper 컨테이너: 양옆 슬라이드 노출을 위해 overflow: visible */
  .story__swiper {
    position: relative;
    width: 100%;
    overflow: visible;
  }
  
  /* Swiper가 flex 배치를 처리하므로 수동 gap/transform은 제거.
     slide 개별 폭은 .story__slide 에서 지정하고 slidesPerView:'auto' 로 읽게 한다. */
  .story__swiper .swiper-wrapper {
    align-items: stretch;
  }
  
  .story__slide {
    position: relative;
    width: 100%;
    max-width: 795px;
    flex-shrink: 0;
    height: 402px;
    padding: 10px;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-sizing: border-box;
  }
  
  .story__slide--mint   { background-color: #f3f7ee; }
  .story__slide--butter { background-color: #f8f6e0; }
  .story__slide--sky    { background-color: #e0f8f8; }
  .story__slide--pink    { background-color: #F7EEF2; }
  
  /* --- Story Card (inner) --- */
  .story-card {
    position: relative;
    display: block;
    height: 100%;
    width: 100%;
  }
  
  .story-card__quote {
    display: flex;
    width: 100%;
    height: 284px;
    padding: 30px;
    border-radius: var(--radius-md);
    background-color: #ffffff;
    box-sizing: border-box;
  }
  
  .story-card__text {
    margin: 0;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.625;
    letter-spacing: -0.04em;
    color: #0c211d;
  }
  
  .story-card__profile {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 26px 16px 0;
  }
  
  .story-card__avatar {
    position: relative;
    flex: 0 0 50px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
  }
  
  .story-card__avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .story-card__meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  
  .story-card__name {
    margin: 0;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.04em;
    color: #0c211d;
  }
  
  .story-card__role {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.04em;
    color: #606b68;
  }
  
  /* --- Controls (Progress + Nav) --- */
  .story__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    margin-top: 70px;
    width: 100%;
    max-width: 1024px;
  }
  
  .story__progress {
    position: relative;
    flex: 1 1 auto;
    max-width: 795px;
    height: 12px;
    background-color: #f4f4f4;
    border-radius: 100px;
    overflow: hidden;
    opacity: 0.9;
  }
  
  .story__progress-bar {
    display: block;
    width: 33.3333%;
    height: 100%;
    background-color: #0c211d;
    border-radius: 100px;
    transition: width 400ms cubic-bezier(.4, 0, .2, 1), transform 400ms cubic-bezier(.4, 0, .2, 1);
    transform-origin: left center;
  }
  
  .story__nav {
    display: none;
    gap: 10px;
    flex: 0 0 auto;
  }
  
  .story__nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    padding: 0;
    border: 1px solid #0c211d;
    border-radius: 50%;
    background-color: transparent;
    cursor: pointer;
    line-height: 1;
    transition: background-color 180ms ease, color 180ms ease, transform 120ms ease, box-shadow 180ms ease;
  }
  
  .story__nav-btn img {
    display: block;
    width: 25px;
    height: 24px;
  }
  
  .story__nav-btn--prev img {
    transform: rotate(180deg);
  }
  
  .story__nav-btn:hover,
  .story__nav-btn:focus-visible {
    background-color: #0c211d;
  }
  
  .story__nav-btn:hover img,
  .story__nav-btn:focus-visible img {
    filter: invert(1) brightness(2);
  }
  
  .story__nav-btn:active {
    transform: scale(0.96);
  }
  
  .story__nav-btn:disabled {
    cursor: not-allowed;
    opacity: 0.35;
  }
  
  .story__nav-btn:disabled:hover {
    background-color: transparent;
  }
  
  .story__nav-btn:disabled:hover img {
    filter: none;
  }
  
  /* ===================================
     Story - 반응형
     =================================== */
  
  /* Tablet: 1200px 이하 */
  @media (max-width: 1200px) {
    .story__inner {
      padding: 100px 32px 120px;
    }
  
    .story__title {
      font-size: 38px;
    }
  
    .story__desc {
      font-size: 20px;
    }
  
    .story__carousel {
      margin-top: 64px;
    }
  
    .story__slide {
      width: 680px;
      height: 380px;
    }
  
    .story-card__quote {
      height: 262px;
      padding: 26px;
    }
  
    .story-card__text {
      font-size: 20px;
      line-height: 1.6;
    }
  
    .story__controls {
      margin-top: 48px;
      gap: 32px;
    }
  }
  
  /* Tablet: 768px 이하 */
  @media (max-width: 768px) {
    .story__inner {
      padding: 80px 20px 96px;
    }
  
    .story__head {
      gap: 16px;
    }
  
    .story__title {
      font-size: 30px;
      line-height: 1.35;
    }
  
  
    .story__desc {
      font-size: 17px;
      line-height: 1.55;
    }
  
    .story__carousel {
      margin-top: 48px;
    }
  
    .story__slide {
      width: min(520px, 88%);
      height: auto;
      min-height: 340px;
      padding: 8px;
    }
  
    .story-card__quote {
      height: auto;
      min-height: 220px;
      padding: 22px;
    }
  
    .story-card__text {
      font-size: 17px;
      line-height: 1.6;
    }
  
    .story-card__profile {
      padding: 20px 12px 0;
    }
  
    .story-card__avatar {
      flex-basis: 44px;
      width: 44px;
      height: 44px;
    }
  
    .story-card__name {
      font-size: 18px;
    }
  
    .story-card__role {
      font-size: 15px;
    }
  
    .story__controls {
      margin-top: 36px;
      gap: 20px;
    }
  
    .story__nav-btn {
      width: 44px;
      height: 44px;
    }
  
    .story__nav-btn img {
      width: 22px;
      height: 22px;
    }
  }
  
  /* Mobile: 480px 이하 */
  @media (max-width: 480px) {
    .story__inner {
      padding: 64px 16px 80px;
    }
  
    .story__title {
      font-size: 24px;
    }
  
    .story__desc {
      font-size: 15px;
    }
  
    .story__carousel {
      margin-top: 36px;
    }
  
    .story__slide {
      width: 92%;
      min-height: 320px;
      padding: 6px;
    }
  
    .story-card__quote {
      min-height: 200px;
      padding: 18px;
    }
  
    .story-card__text {
      font-size: 15px;
    }
  
    .story-card__name {
      font-size: 16px;
    }
  
    .story-card__role {
      font-size: 13px;
    }
  
    .story__controls {
      flex-direction: column-reverse;
      align-items: stretch;
      gap: 16px;
      margin-top: 28px;
    }
  
    .story__nav {
      justify-content: center;
    }
  }
  
  /* ===================================
     Concierge - AI 컨시어지 (두 가지 진입 방식)
     - 좌: 게임형(상황 카드) / 우: 카드형(문장 선택)
     - 배경: 파스텔 블롭 2개(상단/하단)로 은은한 그라디언트 연출
     - 카드 내부에 선택된 chip 하이라이트 + 커서 아이콘 오버레이
     =================================== */
  .concierge {
    position: relative;
    width: 100%;
    background: #fff url('../image/main/concierge-bg.png') no-repeat center center;
    background-size: cover;
    color: var(--neutral-900);
    overflow: hidden;
    isolation: isolate;
    padding: 0 48px;
  }
  
  
  /* --- 컨텐츠 프레임 --- */
  .concierge__inner {
    position: relative;
    z-index: 1;
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 100px 0 200px;
  }
  
  /* --- Head --- */
  .concierge__head {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  
  .concierge__overline {
    align-self: flex-start;
  }
  
  .concierge__headline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
  }
  
  .concierge__title {
    margin: 0;
    font-size: 44px;
    font-weight: 700;
    line-height: 1.36;
    letter-spacing: -0.04em;
    color: #111111;
  }
  
  .concierge__title-line {
    display: block;
  }
  
  .concierge__title-line--muted {
    color: var(--neutral-300);
  }
  
  .concierge__desc {
    margin: 0;
    max-width: 501px;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.64;
    letter-spacing: -0.04em;
    color: var(--neutral-700);
  }
  
  .concierge__desc-line {
    display: block;
  }
  
  /* --- Cards Grid --- */
  .concierge__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 100px;
  }
  
  /* --- Concierge Card (공통) --- */
  .concierge-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 32px;
    height: 500px;
    padding: 32px 32px 56px;
    background-color: #ffffff;
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-xl);
    box-sizing: border-box;
    overflow: hidden;
  }
  
  .concierge-card__head {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  
  .concierge-card__meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }
  
  .concierge-card__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 9px;
    background-color: #f9fbff;
    border: 1px solid #0054f9;
    border-radius: 32px;
    color: #0054f9;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
  }
  
  .concierge-card__hint {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.04em;
    color: #0054f9;
  }
  
  .concierge-card__title {
    margin: 0;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.04em;
    color: var(--neutral-900);
  }
  
  /* --- Visual (Game card) --- */
  .concierge-card__visual {
    position: relative;
    flex: 1 1 auto;
    /* min-height: 300px; */
    border-radius: var(--radius-xl);
    overflow: hidden;
    aspect-ratio: 263 / 150;
  }
  
  .concierge-card__visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  
  /* --- 커서 오버레이 --- */
  .concierge-card__cursor {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 46px;
    filter: drop-shadow(0 4px 4px rgba(153, 190, 255, 0.1)) drop-shadow(0 1px 1px rgba(11, 20, 55, 0.1));
    pointer-events: none;
  }
  
  .concierge-card__cursor img {
    display: block;
    width: 100%;
    height: 100%;
  }
  
  .concierge-card__cursor--game {
    left: 245px;
    top: 215px;
  }
  
  .concierge-card__cursor--pick {
    right: 36px;
    top: 212px;
  }
  .concierge-card.concierge-card--pick {
    padding:32px 0 56px;
  }
  .concierge-card.concierge-card--pick .concierge-card__head {
    padding: 0 32px;
  }
  .concierge-card.concierge-card--pick .concierge-card__visual {
    aspect-ratio: 307/170;
  }
  
  /* --- Chip (공통) --- */
  .concierge-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 17px 31px;
    border-radius: var(--radius-xl);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.04em;
    text-align: center;
    box-sizing: border-box;
    list-style: none;
  }
  
  /* Ghost: 반투명 보더 chip (게임형 기본 카드 / 카드형 미선택) */
  .concierge-chip--ghost {
    background-color: rgba(255, 255, 255, 0.45);
    border: 2px solid #ffffff;
    color: var(--neutral-900);
    box-shadow: 0 4px 20px rgba(236, 236, 236, 0.8);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }
  
  /* Pick: 게임형 카드 내부 검은 카드 */
  .concierge-chip--pick {
    background-color: rgba(0, 0, 0, 0.28);
    border: 2px solid #ffffff;
    color: #ffffff;
    font-size: 26px;
    font-weight: 700;
    box-shadow: 0 4px 30px rgba(152, 255, 221, 0.8);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }
  
  /* Selected: 카드형 하이라이트(네온 그린) */
  .concierge-chip--selected {
    background-color: rgba(77, 250, 131, 0.9);
    border: 2px solid #2cd762;
    color: #072c20;
    font-weight: 700;
    box-shadow: 0 4px 30px rgba(77, 250, 131, 0.55);
    transform: translateX(-6px);
  }
  
  /* --- Game card 내 chip 위치 --- */
  .concierge-chip--game-1 {
    position: absolute;
    left: 20px;
    top: 38px;
    padding: 12px 18px;
    color: #ffffff;
    background-color: transparent;
    border: 0;
    box-shadow: none;
    font-size: 24px;
    font-weight: 700;
    text-align: left;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.5;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  
  .concierge-chip--game-1 .concierge-chip__line {
    display: block;
  }
  
  .concierge-chip--game-2 {
    position: absolute;
    left: 20px;
    top: 160px;
    padding: 17px 31px;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
  }
  
  /* --- Pick card 리스트 --- */
  .concierge-card__list {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0;
    margin: 0;
    list-style: none;
    min-height: 300px;
  }
  
  .concierge-card__list .concierge-chip {
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
  }
  
  /* ===================================
     Concierge - 반응형
     =================================== */
  
  /* Tablet: 1200px 이하 */
  @media (max-width: 1200px) {
    .concierge__inner {
      padding: 100px 32px 120px;
    }
  
    .concierge__title {
      font-size: 38px;
    }
  
    .concierge__desc {
      font-size: 20px;
    }
  
    .concierge__cards {
      margin-top: 48px;
      gap: 16px;
    }
  
    .concierge-card {
      height: 460px;
      padding: 28px 28px 44px;
      gap: 24px;
    }
  
    .concierge-card__title {
      font-size: 26px;
    }
  
    .concierge-chip {
      font-size: 19px;
      padding: 14px 22px;
    }
  
    .concierge-chip--pick {
      font-size: 22px;
    }
  
    .concierge-chip--selected {
      transform: translateX(-4px);
    }
  
    .concierge-chip--game-1 {
      top: 28px;
      left: 18px;
      font-size: 20px;
    }
  
    .concierge-chip--game-2 {
      top: 130px;
      left: 16px;
      font-size: 24px;
      padding: 14px 24px;
    }
  
    .concierge-card__cursor--game {
      left: 200px;
      top: 180px;
    }
  
    .concierge-card__cursor--pick {
      right: 24px;
      top: 190px;
    }
  }
  
  /* Tablet: 768px 이하 */
  @media (max-width: 768px) {
    .concierge {
      padding: 0;
    }
    .concierge__inner {
      padding: 80px 16px 96px;
    }
  
    .concierge__headline {
      flex-direction: column;
      gap: 16px;
    }
  
    .concierge__title {
      font-size: 30px;
      line-height: 1.35;
    }
  
    .concierge__desc {
      font-size: 17px;
      line-height: 1.6;
      max-width: none;
    }
  
  
    .concierge__cards {
      grid-template-columns: 1fr;
      margin-top: 40px;
      gap: 16px;
    }
  
    .concierge-card {
      height: auto;
      min-height: auto;
      padding: 24px 24px 36px;
      gap: 20px;
    }
  
    .concierge-card__title {
      font-size: 22px;
    }
  
    .concierge-card__badge,
    .concierge-card__hint {
      font-size: 14px;
    }
  
    .concierge-chip {
      font-size: 16px;
      padding: 12px 18px;
      border-width: 2px;
    }
  
    .concierge-chip--pick {
      font-size: 20px;
    }
  
    .concierge-chip--selected {
      transform: none;
    }
  
    .concierge-chip--game-1 {
      top: 20px;
      left: 14px;
      font-size: 17px;
    }
  
    .concierge-chip--game-2 {
      top: 110px;
      left: 14px;
      font-size: 20px;
      padding: 12px 18px;
    }
    .concierge-card__visual {
      min-height: auto;
      flex: none;
    }
  
    .concierge-card__cursor {
      width: 36px;
      height: 37px;
    }
  
    .concierge-card__cursor--game {
      left: 140px;
      top: 150px;
    }
  
    .concierge-card__cursor--pick {
      right: 18px;
      top: 170px;
    }
  
    .concierge-card__list {
      min-height: 260px;
    }
  
    .concierge__bg-blob {
      filter: blur(80px);
    }
  
    .concierge__bg-blob--1,
    .concierge__bg-blob--2,
    .concierge__bg-blob--3 {
      width: 420px;
      height: 320px;
    }
  }
  
  /* Mobile: 480px 이하 */
  @media (max-width: 480px) {
    .concierge__inner {
      padding: 64px 16px 80px;
    }
  
    .concierge__title {
      font-size: 24px;
    }
  
    .concierge__desc {
      font-size: 15px;
    }
  
    .concierge__cards {
      margin-top: 32px;
    }
  
    .concierge-card {
      padding: 20px 20px 28px;
      min-height: auto;
    }
  
    .concierge-card__title {
      font-size: 20px;
    }
  
    .concierge-chip {
      font-size: 14px;
      padding: 10px 14px;
    }
  
    .concierge-chip--pick {
      font-size: 17px;
    }
  
    .concierge-chip--game-1 {
      top: 16px;
      left: 12px;
      font-size: 15px;
    }
  
    .concierge-chip--game-2 {
      top: 90px;
      left: 12px;
      font-size: 17px;
      padding: 10px 14px;
    }
  
    .concierge-card__visual {
      min-height: auto;
      flex: none;
    }
  
    .concierge-card__list {
      min-height: 220px;
    }
  
    .concierge-card__cursor {
      width: 30px;
      height: 31px;
    }
  
    .concierge-card__cursor--game {
      left: 110px;
      top: 120px;
    }
  
    .concierge-card__cursor--pick {
      right: 14px;
      top: 150px;
    }
  }
  
  /* ===================================
     Process
     - 좌측 sticky 이미지 스택 + 우측 4단 STEP 카드
     - sticky 높이/간격을 카드 높이와 맞춰 자연스러운 스와이프 전환
     =================================== */
  .processElement {
    position: relative;
    background-color: #fffdfd;
    color: var(--neutral-900);
    width: 100%;
    padding: 0 48px;
  }
  
  .process__inner {
    position: relative;
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 120px 0 170px;
  }
  
  /* --- Head --- */
  /* head 의 padding-bottom 으로 split 과의 gap 을 만든다.
     split 자체에 margin-top 을 두면 GSAP pin 이 trigger 의 margin 을 pin-spacer 로
     이전하는 과정에서 resize 시 margin 이 중복 적용되어 위쪽 여백이 누적되는
     known issue 발생 → padding 으로 대체. */
  .process__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding-bottom: 100px;
    text-align: center;
  }
  
  .process__title {
    margin: 0;
    font-size: 44px;
    font-weight: 700;
    line-height: 1.36;
    letter-spacing: -0.04em;
  }
  
  .process__title-line {
    display: block;
  }
  
  .process__title-muted {
    color: var(--neutral-300);
  }
  
  .process__title-strong {
    color: var(--neutral-900);
  }
  
  .process__desc {
    margin: 0;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.36;
    letter-spacing: -0.04em;
    color: var(--neutral-700);
  }
  
  /* --- Split Layout --- */
  /* margin-top 을 두지 않는다: 위 .process__head 의 padding-bottom 으로 간격 확보.
     이유는 .process__head 코멘트 참고 (pin + margin-top duplicate 이슈 회피). */
  .process__split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 42px;
    align-items: start;
  }
  
  /* --- Left: Sticky media stack --- */
  .process__media {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 580px;
    width: 100%;
    justify-self: end;
  }
  
  .process-media {
    position: relative;
    margin: 0;
    border-radius: 32px;
    overflow: hidden;
    width: 580px;
    aspect-ratio: 580 / 560;
    background-color: #0E0E0E;
    box-shadow: 0 20px 40px rgba(3, 25, 25, 0.08);
    transition: box-shadow 400ms ease;
  }
  
  .process-media.is-active {
    box-shadow: 0 24px 60px rgba(3, 25, 25, 0.18);
  }
  
  /* 4개의 이미지가 같은 자리에서 스택되도록 절대 위치 + 초기 숨김 (GSAP가 제어) */
  .process-media > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    will-change: transform, opacity;
  }
  
  /* 첫 번째 이미지는 GSAP 미로드 환경에서도 보이도록 기본 노출 */
  .process-media > img:first-child {
    opacity: 1;
  }
  
  .process-media__inner {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 600ms ease, filter 400ms ease;
    filter: saturate(0.9);
  }
  
  .process-media.is-active .process-media__inner {
    transform: scale(1.03);
    filter: saturate(1.05);
  }
  
  .process-step {
    transition: opacity 300ms ease, transform 300ms ease;
  }
  
  /* 실제 이미지 리소스 부재를 대비한 플레이스홀더 그라디언트
     - 아이콘/스텝별 톤을 반영 (민트/버터/라임/인디고)
  */
  .process-media__inner--1 {
    background-image: radial-gradient(circle at 50% 55%, rgba(77, 250, 131, 0.35), transparent 60%),
                      linear-gradient(160deg, #0f2b2b 0%, #031919 60%, #020f0f 100%);
  }
  
  .process-media__inner--2 {
    background-image: radial-gradient(circle at 50% 55%, rgba(255, 229, 143, 0.3), transparent 60%),
                      linear-gradient(160deg, #1a1610 0%, #0b0a08 100%);
  }
  
  .process-media__inner--3 {
    background-image: radial-gradient(circle at 50% 55%, rgba(197, 255, 153, 0.28), transparent 60%),
                      linear-gradient(160deg, #111a0b 0%, #060806 100%);
  }
  
  .process-media__inner--4 {
    background-image: radial-gradient(circle at 50% 55%, rgba(182, 214, 255, 0.3), transparent 60%),
                      linear-gradient(160deg, #0f1422 0%, #05080f 100%);
  }
  
  /* --- Right: Steps --- */
  .process__steps {
      overflow:hidden;
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 16px;
      max-width: 580px;
      width: 100%;
      border: 1px dashed var(--neutral-200);
      border-radius: 32px;
      background-color: #ffffff;
      height: 560px;
  }
  
  .process-step {
      display: block;
      height: 560px;
  }
  
  .process-step__card {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 38px;
      padding: 60px;
      box-sizing: border-box;
  }
  
  /* 첫 카드만 dashed, 나머지는 보더 없이 (Figma 스타일 재현) */
  .process-step:not(:first-child) .process-step__card {
      border-color: transparent;
      border-style: solid;
  }
  
  .process-step__icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 64px;
      height: 64px;
      border-radius: 16px;
      background-image: linear-gradient(132deg, #F5F3F3 0%, rgba(255, 255, 255, 0.9) 65%);
  }
  
  .process-step__icon svg {
    display: block;
    width: 28px;
    height: 28px;
  }
  
  .process-step__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  
  .process-step__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    height: 30px;
    padding: 0 10px;
    border: 1px solid var(--neutral-900);
    border-radius: var(--radius-md);
    font-family: var(--font-base);
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--neutral-900);
  }
  
  .process-step__badge--1 {
    background-image: linear-gradient(180deg, rgba(209, 255, 255, 0.7) 16%, rgba(224, 248, 248, 0.7) 45%, rgba(224, 248, 248, 0.7) 84%);
  }
  
  .process-step__badge--2 {
    background-image: linear-gradient(180deg, rgba(255, 250, 191, 0.7) 16%, rgba(248, 246, 224, 0.7) 45%, rgba(248, 246, 224, 0.7) 84%);
  }
  
  .process-step__badge--3 {
    background-image: linear-gradient(180deg, rgba(237, 255, 215, 0.7) 16%, rgba(243, 247, 238, 0.7) 45%, rgba(243, 247, 238, 0.7) 84%);
  }
  
  .process-step__badge--4 {
    background-image: linear-gradient(180deg, rgba(231, 240, 254, 0.7) 16%, rgba(232, 234, 237, 0.7) 45%, rgba(232, 234, 237, 0.7) 84%);
  }
  
  .process-step__title {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.04em;
    color: var(--neutral-900);
  }
  
  .process-step__title-line {
    display: block;
  }
  
  .process-step__title-accent {
    color: #30d965;
  }
  
  .process-step__desc {
    padding-top: 12px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.03em;
    color: var(--neutral-500);
  }
  
  .process-step__list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
  }
  
  .process-step__card > .process-step__list > .process-step__item {
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1;
  }
  
  .process-step__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }
  
  .process-step__check svg {
    display: block;
    width: 100%;
    height: 100%;
  }
  
  .process-step__item-text {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.03em;
    color: var(--neutral-700);
  }
  
  /* Tablet: 1200px 이하 */
  @media (max-width: 1200px) {
    .process__inner {
      padding: 100px 40px 120px;
    }
  
    .process__title {
      font-size: 40px;
    }
  
    .process__desc {
      font-size: 20px;
    }
  
    .process__head {
      padding-bottom: 60px;
    }
  
    .process__split {
      gap: 40px;
    }
  
    .process-step__card {
      min-height: 520px;
      padding: 48px;
    }
  
    .process-step__title {
      font-size: 26px;
    }
  
    .process-step__list {
      margin-top: 36px;
    }
  }
  
  /* Tablet portrait: 768px 이하 */
  @media (max-width: 768px) {
    .process {
      height: auto;
      min-height: auto;
      overflow: visible;
      padding: 0 24px;
    }
    .process__inner {
      padding: 80px 0 100px;
    }
  
    .process__title {
      font-size: 32px;
    }
  
    .process__desc {
      font-size: 18px;
    }
  
    .process__head {
      padding-bottom: 48px;
    }
  
    /* 모바일: sticky/grid 해제, 세로 흐름으로 전환
       - 1개의 process-media(대표 이미지) 상단
       - 그 아래 4개의 step 카드 스택 */
    .process__split {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }
  
    .process-media {
      position: relative;
      top: auto;
      order: 0;
      width: 100%;
      max-width: 100%;
      border-radius: 24px;
      justify-self: stretch;
    }
  
    /* 모바일: JS(matchMedia)가 images[0]만 opacity:1로 제어.
       CSS fallback 으로도 동일한 상태를 유지해 GSAP 미로드 환경에서 첫 이미지만 노출 */
    .process-media > img {
      opacity: 0;
    }
    .process-media > img:first-child {
      opacity: 1;
    }
  
    /* process__steps 의 desktop 전용 박스 속성(고정 높이/overflow/border) 해제.
       li(process-step) 들이 자연스러운 높이로 스택되도록 flex column 으로 전환 */
    .process__steps {
      display: flex;
      flex-direction: column;
      gap: 16px;
      height: auto;
      overflow: visible;
      border: 0;
      border-radius: 0;
      background-color: transparent;
      max-width: 100%;
    }
  
    .process-step {
      height: auto;
      order: 1;
    }
  
    .process-step__card {
      min-height: 0;
      padding: 40px 28px;
      border: 1px solid var(--neutral-100);
      border-radius: 24px;
      background-color: #ffffff;
    }
  
    .process-step__title {
      font-size: 24px;
    }
  
    .process-step__desc {
      font-size: 15px;
    }
  
    .process-step__list {
      margin-top: 28px;
      gap: 16px;
    }
  }
  
  /* Mobile: 480px 이하 */
  @media (max-width: 480px) {
    .process__inner {
      padding: 64px 16px 80px;
    }
  
    .process__title {
      font-size: 26px;
    }
  
    .process__desc {
      font-size: 16px;
    }
  
    .process-media {
      border-radius: 20px;
    }
  
    .process-step__card {
      padding: 32px 22px;
      border-radius: 20px;
    }
  
    .process-step__icon {
      width: 56px;
      height: 56px;
      border-radius: 14px;
    }
  
    .process-step__icon svg {
      width: 24px;
      height: 24px;
    }
  
    .process-step__badge {
      height: 28px;
      font-size: 15px;
      margin-top: 24px;
    }
  
    .process-step__title {
      font-size: 22px;
    }
  
    .process-step__desc {
      font-size: 14px;
      margin-top: 20px;
    }
  
    .process-step__list {
      margin-top: 24px;
      gap: 14px;
    }
  
    .process-step__item-text {
      font-size: 15px;
    }
  }
  
  /* ===================================
     Design Feature
     - 다크 그린 풀블리드 섹션, 상단 카피 + 3컬럼 카드
     - Figma node 1354:1468 기반
     =================================== */
  .design-feature {
    position: relative;
    width: 100%;
    padding: 125px 48px 170px;
    background-color: #004b4b;
    color: #ffffff;
    overflow: hidden;
    isolation: isolate;
  }
  
  .design-feature__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
  }
  
  .design-feature__bg-image {
    position: absolute;
    inset: -12% -8%;
    background-image: url("../image/main/design-bg.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.6;
  }
  
  .design-feature__bg-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
      rgba(3, 25, 25, 0.15) 0%,
      rgba(3, 25, 25, 0.45) 60%,
      rgba(3, 25, 25, 0.7) 100%);
  }
  
  .design-feature__inner {
    position: relative;
    z-index: 1;
    max-width: var(--content-max-width);
    margin: 0 auto;
  }
  
  /* --- Head --- */
  .design-feature__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    max-width: 706px;
    margin: 0 auto;
    text-align: center;
  }
  
  .design-feature__title {
    font-size: 44px;
    font-weight: 700;
    line-height: 136%;
    letter-spacing: -1.76px;
    color: #ffffff;
  }
  
  .design-feature__title-line {
    display: block;
  }
  
  .design-feature__title-line--accent {
    color: #30d965;
  }
  
  .design-feature__desc {
    font-size: 22px;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: -0.88px;
    color: #fefefe;
  }
  
  /* --- Card List --- */
  .design-feature__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 80px;
    list-style: none;
    padding: 0;
  }
  
  .design-feature-card {
    display: flex;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 520ms ease, transform 520ms ease;
    background: rgba(255, 255, 255, 0.05);
      backdrop-filter: blur(10px);
  }
  
  .design-feature-card:nth-child(2) {
    transition-delay: 80ms;
  }
  
  .design-feature-card:nth-child(3) {
    transition-delay: 160ms;
  }
  
  .design-feature-card.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  
  @media (prefers-reduced-motion: reduce) {
    .design-feature-card {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }
  
  .design-feature-card__inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 486px;
    padding: 1px;
    border: 1px solid #393939;
    border-radius: var(--radius-xl);
    background-color: rgba(0, 0, 0, 0);
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.25);
    transition: transform 240ms ease, border-color 240ms ease, box-shadow 240ms ease;
  }
  
  .design-feature-card__inner:hover {
    transform: translateY(-4px);
    border-color: var(--brand-400);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  }
  
  .design-feature-card__thumb {
    position: relative;
    width: 100%;
    height: 260px;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background-color: #f1eeee;
    flex-shrink: 0;
  }
  
  .design-feature-card__thumb--dark {
    background-color: #000000;
  }
  
  .design-feature-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 320ms ease;
  }
  
  .design-feature-card__inner:hover .design-feature-card__image {
    transform: scale(1.04);
  }
  
  .design-feature-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 24px;
    padding: 24px 20px 20px;
  }
  
  .design-feature-card__texts {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  
  .design-feature-card__title {
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    letter-spacing: -0.02em;
    color: #ffffff;
  }
  
  .design-feature-card__desc {
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: -0.64px;
    color: #dedede;
  }
  
  .design-feature-card__meta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
  }
  
  .design-feature-card__meta-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-md);
    background-color: #ffffff;
    color: #000000;
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
    letter-spacing: -0.32px;
  }
  
  .design-feature-card__meta-label {
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.64px;
    color: #dedede;
  }
  
  /* ===================================
     Design Feature - Responsive
     =================================== */
  @media (max-width: 1200px) {
    .design-feature {
      padding: 100px 0 110px;
    }
  
    .design-feature__inner {
      padding: 0 40px;
    }
  
    .design-feature__title {
      font-size: 40px;
      letter-spacing: -1.6px;
    }
  
    .design-feature__desc {
      font-size: 20px;
      letter-spacing: -0.8px;
    }
  
    .design-feature__list {
      gap: 24px;
      margin-top: 64px;
    }
  
    .design-feature-card__inner {
      min-height: 460px;
    }
  
    .design-feature-card__thumb {
      height: 220px;
    }
  }
  
  @media (max-width: 768px) {
    .design-feature {
      padding: 80px 0 88px;
    }
  
    .design-feature__inner {
      padding: 0 24px;
    }
  
    .design-feature__head {
      gap: 16px;
    }
  
    .design-feature__title {
      font-size: 32px;
      line-height: 132%;
      letter-spacing: -1.28px;
    }
  
    .design-feature__desc {
      font-size: 17px;
      line-height: 156%;
      letter-spacing: -0.68px;
    }
  
    .design-feature__list {
      grid-template-columns: 1fr;
      gap: 20px;
      margin-top: 48px;
    }
  
    .design-feature-card__inner {
      min-height: 0;
    }
  
    .design-feature-card__thumb {
      height: 240px;
    }
  
    .design-feature-card__body {
      padding: 24px 20px 20px;
    }
  }
  
  @media (max-width: 480px) {
    .design-feature {
      padding: 64px 0 72px;
    }
  
    .design-feature__inner {
      padding: 0 20px;
    }
  
    .design-feature__title {
      font-size: 26px;
      letter-spacing: -1.04px;
    }
  
    .design-feature__desc {
      font-size: 15px;
      letter-spacing: -0.6px;
    }
  
    .design-feature__list {
      margin-top: 36px;
    }
  
    .design-feature-card__thumb {
      height: 200px;
    }
  
    .design-feature-card__title {
      font-size: 18px;
      line-height: 26px;
      letter-spacing: -0.72px;
    }
  
    .design-feature-card__desc {
      font-size: 14px;
      line-height: 24px;
      letter-spacing: -0.56px;
    }
  
    .design-feature-card__body {
      padding: 20px 18px 18px;
      gap: 20px;
    }
  
    .design-feature-card__meta-label {
      font-size: 14px;
      letter-spacing: -0.56px;
    }
  
    .design-feature-card__meta-index {
      width: 26px;
      height: 26px;
      font-size: 14px;
    }
  }
  
  /* ===================================
     Lecture
     - 전문가 신뢰 소개 섹션
     - 1920x1080 의 가상 스테이지 위에 썸네일을 산재시키고
       중앙 상단에 카피를 배치. 스테이지 자체는 aria-hidden 데코.
     =================================== */
  .lecture {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 768px;
    background-color: #fdfdfd;
    overflow: hidden;
    isolation: isolate;
  }
  
  /* --- 배경 세로 격자 (Figma Line) --- */
  .lecture__grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    display: flex;
    justify-content: space-between;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 160px;
    left: 0;
    right: 0;
  }
  
  .lecture__grid-line {
    display: block;
    width: 1px;
    background: linear-gradient(
      180deg,
      rgba(30, 30, 30, 0) 0%,
      rgba(30, 30, 30, 0.08) 20%,
      rgba(30, 30, 30, 0.08) 80%,
      rgba(30, 30, 30, 0) 100%
    );
  }
  
  /* --- 썸네일 스테이지 (1920x1080 가상 캔버스) --- */
  .lecture__stage {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 1920px;
    height: 100%;
    z-index: 1;
    pointer-events: none;
  }
  
  /* --- 썸네일 공통 --- */
  .lecture-thumb {
    position: absolute;
    display: block;
    border-radius: 8px;
    overflow: hidden;
  }
  
  .lecture-thumb::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
      circle at 30% 25%,
      rgba(255, 255, 255, 0.28) 0%,
      rgba(255, 255, 255, 0) 55%
    );
  }
  
  /* Portrait: 200x300, 컬러 그라디언트 */
  .lecture-thumb--portrait {
    width: 200px;
    height: 300px;
  }
  
  .lecture-thumb--blue {
    background: linear-gradient(180deg, #C5EDF4 0%, #E0E0E0 100%);
  }
  
  .lecture-thumb--orange {
    background: linear-gradient(180deg, #F2E5D6 0%, #FECE97 100%);
  }
  
  .lecture-thumb--yellow {
    background: linear-gradient(180deg, #FAF3D5 0%, #E7D58B 100%);
  }
  
  .lecture-thumb--deepYellow {
    background: linear-gradient(180deg, #FCE1B0 0%, #F8C565 100%);
  }
  
  .lecture-thumb--green {
    background: linear-gradient(180deg, #D7F1B8 0%, #ABCD83 100%);
  }
  
  .lecture-thumb--violet {
    background: linear-gradient(177deg, #CFD9F4 -1.92%, #8491BE 100.52%);
  }
  
  /* Wide: 가로형 다크 썸네일 (115x198, Figma 기준 가로배치 → 여기서도 가로) */
  .lecture-thumb--wide {
    width: 198px;
    height: 115px;
    background-color: #373737;
    background-image:
      linear-gradient(
        125deg,
        rgba(7, 250, 216, 0.18) 0%,
        rgba(7, 250, 216, 0) 38%
      ),
      linear-gradient(
        315deg,
        rgba(74, 224, 121, 0.18) 0%,
        rgba(74, 224, 121, 0) 45%
      );
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.25);
  }
  
  .lecture-thumb--wide::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 36px;
    height: 36px;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
    clip-path: polygon(30% 20%, 30% 80%, 78% 50%);
  }
  
  /* 포지션 (Figma 좌표 기반) */
  .lecture-thumb--pos-1 { left: 320px;  top: 0;     }
  .lecture-thumb--pos-2 { left: 1400px; top: 277px; }
  .lecture-thumb--pos-3 { left: 1720px; top: 0;     }
  .lecture-thumb--pos-4 { left: calc(50% - 180px);  bottom: -140px; }
  .lecture-thumb--pos-5 { right: 120px; bottom: 0; }
  .lecture-thumb--pos-6 { left: 0; top: 616px; }
  
  /* wide cards */
  .lecture-thumb--pos-w1 { left: 431px;  top: 220px; }
  .lecture-thumb--pos-w2 { left: 1683px; top: 242px; }
  .lecture-thumb--pos-w3 { left: 1357px; top: 501px; }
  .lecture-thumb--pos-w4 { left: 130px;  top: 858px; }
  .lecture-thumb--pos-w5 { left: 1452px; top: 902px; }
  .lecture-thumb--pos-w6 { left: 640px;  top: 849px; }
  
  /* Figma 좌측 상단 영역에도 다크 wide 하나 */
  .lecture-thumb--pos-w4 {
    width: 190px;
    height: 115px;
  }
  
  /* --- 중앙 카피 --- */
  .lecture__head {
    position: relative;
    z-index: 2;
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 48px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  
  .lecture__title {
    font-size: 44px;
    font-weight: 700;
    line-height: 60px;
    letter-spacing: -0.04em;
    color: var(--neutral-900);
    word-break: keep-all;
  }
  
  .lecture__title-line {
    display: block;
  }
  
  .lecture__title-sub {
    color: var(--neutral-200);
  }
  
  .lecture__title-em {
    color: var(--neutral-900);
  }
  
  .lecture__desc {
    font-size: 22px;
    line-height: 36px;
    letter-spacing: -0.04em;
    color: var(--neutral-700);
  }
  
  .lecture__desc-line {
    display: block;
  }
  
  /* --- 리빌 애니메이션 훅 --- */
  .lecture-thumb {
      overflow:hidden;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.9s ease, transform 0.9s ease;
  }
  
  .lecture.is-visible .lecture-thumb {
    opacity: 1;
    transform: translateY(0);
  }
  
  .lecture.is-visible .lecture-thumb--pos-2 { transition-delay: 80ms; }
  .lecture.is-visible .lecture-thumb--pos-3 { transition-delay: 160ms; }
  .lecture.is-visible .lecture-thumb--pos-4 { transition-delay: 240ms; }
  .lecture.is-visible .lecture-thumb--pos-5 { transition-delay: 320ms; }
  .lecture.is-visible .lecture-thumb--pos-w1 { transition-delay: 120ms; }
  .lecture.is-visible .lecture-thumb--pos-w2 { transition-delay: 200ms; }
  .lecture.is-visible .lecture-thumb--pos-w3 { transition-delay: 280ms; }
  .lecture.is-visible .lecture-thumb--pos-w4 { transition-delay: 360ms; }
  .lecture.is-visible .lecture-thumb--pos-w5 { transition-delay: 440ms; }
  .lecture.is-visible .lecture-thumb--pos-w6 { transition-delay: 520ms; }
  
  /* -----------------------------------
     Lecture 반응형
     ----------------------------------- */
  @media (max-width: 1200px) {
    .lecture {
      padding: 100px 0;
    }
  
    .lecture__stage {
      transform: translateX(-50%) scale(0.78);
      transform-origin: 50% 50%;
    }
  
    .lecture__head {
      padding: 320px 40px 300px;
      max-width: 860px;
    }
  
    .lecture__title {
      font-size: 36px;
      line-height: 50px;
    }
  
    .lecture__desc {
      font-size: 20px;
      line-height: 32px;
    }
  }
  
  @media (max-width: 768px) {
    .lecture {
      padding: 64px 0;
    }
  
    .lecture__stage {
      position: relative;
      transform: none;
      left: 0;
      top: 0;
      width: 100%;
      height: 420px;
      margin-bottom: -40px;
    }
  
    .lecture__grid {
      display: none;
    }
  
    /* 모바일에선 Figma 절대좌표 대신 고루 분산 */
    .lecture-thumb--portrait {
      width: 110px;
      height: 165px;
    }
  
    .lecture-thumb--wide {
      width: 130px;
      height: 76px;
    }
  
    .lecture-thumb--wide::after {
      width: 28px;
      height: 28px;
    }
  
    .lecture-thumb--pos-1  { left: 4%;   top: 0;    }
    .lecture-thumb--pos-2  { left: 62%;  top: 20px; }
    .lecture-thumb--pos-3  { left: auto; right: 4%; top: 180px; }
    .lecture-thumb--pos-4  { left: 34%;  top: 240px; }
    .lecture-thumb--pos-5  { left: 4%;   top: 220px; }
  
    .lecture-thumb--pos-w1 { left: 40%;  top: 0;    }
    .lecture-thumb--pos-w2 { left: 4%;   top: 180px; }
    .lecture-thumb--pos-w3 { left: 64%;  top: 200px; }
    .lecture-thumb--pos-w4 { left: 30%;  top: 100px; width: 120px; height: 70px; }
    .lecture-thumb--pos-w5 { left: 70%;  top: 350px; }
    .lecture-thumb--pos-w6 { left: 10%;  top: 350px; }
  
    /* 모바일 전용: 12개 중 3개(pos-1, pos-3, pos-4)만 삼각 구도로 노출
       · 좁은 화면에서 12개가 겹쳐 혼잡해지는 문제 해결
       · PC 레이아웃은 기존 12개 그대로 유지 */
    .lecture__stage .lecture-thumb:not(.lecture-thumb--pos-1):not(.lecture-thumb--pos-3):not(.lecture-thumb--pos-4) {
      display: none;
    }
  
    .lecture__head {
      padding: 16px 20px 40px;
      max-width: none;
    }
  
    .lecture__title {
      font-size: 28px;
      line-height: 40px;
      letter-spacing: -0.03em;
    }
  
    .lecture__desc {
      font-size: 16px;
      line-height: 26px;
    }
  }
  
  @media (max-width: 480px) {
    .lecture {
      padding: 48px 0;
    }
  
    .lecture__stage {
      height: 340px;
    }
  
    .lecture-thumb--portrait {
      width: 88px;
      height: 132px;
    }
  
    .lecture-thumb--wide {
      width: 110px;
      height: 64px;
    }
  
    .lecture-thumb--wide::after {
      width: 22px;
      height: 22px;
    }
  
    .lecture__title {
      font-size: 24px;
      line-height: 34px;
    }
  
    .lecture__desc {
      font-size: 15px;
      line-height: 24px;
    }
  
    .lecture__desc-line {
      display: inline;
    }
  }
  
  /* ===================================
     Price (SNACK Piece - AS-IS / TO-BE)
     - Figma node 1354:2116
     - 다크 그린 배경 + 상하 비교 카드(기존/스낵) 2개
     =================================== */
  .price {
    position: relative;
    width: 100%;
    padding: 0;
    background-color: #004b4b;
    color: #ffffff;
    overflow: hidden;
    isolation: isolate;
  }
  
  /* --- 배경 장식 (글로우 + 대형 아스테리스크) --- */
  .price__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    padding: 0 48px;
  }
  
  .price__bg-glow {
    position: absolute;
    top: -260px;
    left: 50%;
    transform: translateX(-50%);
    width: 960px;
    height: 520px;
    background: radial-gradient(
      ellipse at center,
      rgba(77, 250, 131, 0.35) 0%,
      rgba(77, 250, 131, 0.12) 40%,
      rgba(77, 250, 131, 0) 70%
    );
    filter: blur(30px);
  }
  
  .price__bg-asterisk {
    position: absolute;
    right: -80px;
    bottom: -120px;
    width: 440px;
    height: 440px;
    background-image: conic-gradient(
      from 0deg,
      rgba(77, 250, 131, 0.08) 0deg,
      rgba(77, 250, 131, 0.02) 60deg,
      rgba(77, 250, 131, 0.08) 120deg,
      rgba(77, 250, 131, 0.02) 180deg,
      rgba(77, 250, 131, 0.08) 240deg,
      rgba(77, 250, 131, 0.02) 300deg,
      rgba(77, 250, 131, 0.08) 360deg
    );
    mask: radial-gradient(circle, #000 0 40%, transparent 70%);
    -webkit-mask: radial-gradient(circle, #000 0 40%, transparent 70%);
    transform: rotate(15deg);
    opacity: 0.55;
  }
  
  /* --- inner --- */
  .price__inner {
    position: relative;
    z-index: 1;
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 120px 0 170px;
  }
  
  /* --- 헤드 (오버라인 + 타이틀 + 설명) --- */
  .price__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
  }
  
  .price__title {
    font-family: var(--font-base);
    font-weight: 700;
    font-size: 44px;
    line-height: 60px;
    letter-spacing: -0.04em;
    color: var(--neutral-200);
    max-width: 900px;
  }
  
  .price__title-line {
    display: block;
  }
  
  .price__title-em {
    color: var(--brand-300);
  }
  
  .price__title-sub {
    color: var(--neutral-200);
  }
  
  .price__desc {
    font-family: var(--font-base);
    font-weight: 400;
    font-size: 22px;
    line-height: 36px;
    letter-spacing: -0.04em;
    color: var(--neutral-100);
    max-width: 820px;
  }
  
  .price__desc-line {
    display: block;
  }
  
  /* --- 비교 영역 --- */
  .price__compare {
    position: relative;
    margin-top: 100px;
    display: flex;
    flex-direction: column;
    gap: 170px;
  }
  
  /* --- 카드 --- */
  .price-card {
    position: relative;
    width: 100%;
  }
  
  .price-card--asis {
    align-self: flex-start;
    padding-left: 0;
    padding-right: 0;
    width: 100%;
  }
  
  .price-card--tobe {
    align-self: flex-end;
    padding-left: 0;
    padding-right: 0;
    width: 100%;
  }
  
  .price-card__badge {
    position: absolute;
    z-index: 1;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 78px;
    height: 44px;
    font-family: var(--font-base);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #DEDEDE;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
  }
  .price-card--asis .price-card__badge {
    background-image: url('../image/main/badge_bg.png');
  }
  .price-card--tobe .price-card__badge {
    background-image: url('../image/main/badge_bg2.png');
  }
  
  .price-card--asis {
    align-self: flex-start;
    padding-left: 0;
    padding-right: 0;
    width: 100%;
  }
  
  .price-card--tobe {
    align-self: flex-end;
    padding-left: 0;
    padding-right: 0;
    width: 100%;
  }
  
  .price-card__body {
      position: absolute;
      z-index: 1;
  }
  .price-card--asis .price-card__body {
      left: -78px;
      top: 20%;
      width: 678px;
      height: 275px;
      padding-top: 53px;
      padding-left: 67px;
      padding-right: 135px;
      background: url('../image/main/message_bg1.png') no-repeat center center / cover;
  }
  
  .price-card--tobe .price-card__body {
      right: -42px;
      top: 20%;
      width: 646px;
      height: 289px;
      padding-top: 62px;
      padding-left: 140px;
      padding-right: 46px;
      background: url('../image/main/message_bg2.png') no-repeat center center / cover;
  }
  
  
  /* 카드 카피 영역 */
  .price-card__copy {
    display: flex;
    flex-direction: column;
    gap: 22px;
  }
  
  .price-card__title {
    font-family: var(--font-base);
    font-weight: 600;
    font-size: 30px;
    line-height: 42px;
    letter-spacing: -0.04em;
    color: #ffffff;
    strong {
      font-weight: 600;
      color: var(--brand-300);
    }
  }
  
  
  .price-card__quote {
    position: relative;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
  }
  
  .price-card__quote p {
    font-family: var(--font-base);
    font-weight: 400;
    font-size: 20px;
    line-height: 32px;
    letter-spacing: -0.04em;
    color: var(--neutral-200);
  }
  
  /* --- 목업 (브라우저 프레임) --- */
  .price-card__mock {
    position: relative;
    width: 100%;
    max-width: 640px;
    aspect-ratio: 640 / 462;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
    background: #f9f9f9;
    justify-self: end;
  }
  
  .price-card__mock--tobe {
    justify-self: start;
  }
  
  .price-mock {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  
  .price-mock__bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: #ffffff;
    border-bottom: 1px solid #f1f3f4;
    min-height: 48px;
  }
  
  .price-mock__dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  
  .price-mock__dot--red    { background: #ff5f57; }
  .price-mock__dot--yellow { background: #febc2e; }
  .price-mock__dot--green  { background: #28c840; }
  
  .price-mock__url {
    margin-left: auto;
    margin-right: auto;
    padding: 4px 12px;
    min-width: 200px;
    max-width: 340px;
    background: #f2f2f2;
    border-radius: 5px;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.6;
    color: #4c4c4c;
    text-align: center;
    letter-spacing: 0;
  }
  
  .price-mock__screen {
    position: relative;
    flex: 1;
    overflow: hidden;
  }
  
  .price-mock__screen--asis {
    background:
      radial-gradient(circle at 30% 40%, rgba(0, 90, 84, 0.35) 0%, rgba(0, 90, 84, 0) 60%),
      linear-gradient(180deg, #f9f9f9 0%, #e8ece8 100%);
  }
  
  .price-mock__screen--asis::before,
  .price-mock__screen--asis::after {
    content: "";
    position: absolute;
    background: rgba(30, 30, 30, 0.08);
    border-radius: 6px;
  }
  
  .price-mock__screen--asis::before {
    top: 16%;
    left: 8%;
    right: 8%;
    height: 18%;
  }
  
  .price-mock__screen--asis::after {
    bottom: 14%;
    left: 8%;
    width: 40%;
    height: 36%;
    background: rgba(30, 30, 30, 0.12);
  }
  
  .price-mock__screen--tobe {
    background:
      linear-gradient(180deg, #1a1a1a 0%, #2a2a2a 100%);
  }
  
  .price-mock__screen--tobe::before,
  .price-mock__screen--tobe::after {
    content: "";
    position: absolute;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 6px;
  }
  
  .price-mock__screen--tobe::before {
    top: 10%;
    left: 6%;
    right: 6%;
    height: 22%;
  }
  
  .price-mock__screen--tobe::after {
    bottom: 10%;
    left: 6%;
    right: 6%;
    height: 48%;
    background:
      linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.1) 100%);
  }
  
  /* 강조 하이라이트(초록 아웃라인 썸네일) */
  .price-mock__highlight {
    position: absolute;
    border: 3px solid var(--brand-300);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25), 0 0 0 3px rgba(77, 250, 131, 0.15);
    pointer-events: none;
    z-index: 2;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
  }
  
  .price-mock__highlight--asis {
    top: 16%;
    left: 47%;
    width: 30%;
    height: 60%;
    background:
      linear-gradient(180deg, rgba(0, 90, 84, 0.35) 0%, rgba(0, 90, 84, 0.55) 100%);
  }
  
  .price-mock__highlight--tobe {
    top: 28%;
    left: 14%;
    width: 34%;
    height: 62%;
    background:
      linear-gradient(180deg, rgba(77, 250, 131, 0.2) 0%, rgba(0, 90, 84, 0.7) 100%);
  }
  
  .price-card.is-visible .price-mock__highlight {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35), 0 0 0 4px rgba(77, 250, 131, 0.25);
  }
  
  /* ===== Price: Tablet (<= 1200px) ===== */
  @media (max-width: 1200px) {
    .price__inner {
      padding: 120px 40px 140px;
    }
  
    .price__title {
      font-size: 36px;
      line-height: 50px;
    }
  
    .price__desc {
      font-size: 18px;
      line-height: 30px;
    }
  
    .price__compare {
      margin-top: 80px;
      gap: 100px;
    }
  
    .price-card__body,
    .price-card__body--reverse {
      gap: 40px;
    }
  
    .price-card__title {
      font-size: 26px;
      line-height: 38px;
    }
  
    .price-card__quote p {
      font-size: 18px;
      line-height: 28px;
    }
  
    .price__bg-glow {
      width: 720px;
      height: 400px;
      top: -200px;
    }
  
    .price__bg-asterisk {
      width: 340px;
      height: 340px;
      right: -120px;
    }
  }
  
  /* ===== Price: Mobile wide (<= 768px) ===== */
  @media (max-width: 768px) {
    .price__inner {
      padding: 80px 24px 96px;
    }
  
    .price__title {
      font-size: 28px;
      line-height: 40px;
    }
  
    .price__desc {
      font-size: 16px;
      line-height: 26px;
    }
  
    .price__compare {
      margin-top: 56px;
      gap: 72px;
    }
  
    .price-card--asis,
    .price-card--tobe {
      align-self: stretch;
    }
  
    .price-card__body,
    .price-card__body--reverse {
      position: relative;
      left:0!important;
      top: 0!important;
      background: #000 !important;
      border-radius: 12px;
      grid-template-columns: 1fr;
      gap: 28px;
      width: 90% !important;
      margin: 8px auto !important;
      padding: 44px 24px 24px !important;
      height: auto !important;
    }
  
    /* 모바일에서는 목업을 하단으로 정렬 */
    .price-card__body--reverse {
      display: flex;
      flex-direction: column;
    }
  
    .price-card__body--reverse .price-card__copy {
      order: 1;
    }
  
    .price-card__body--reverse .price-card__mock {
      order: 2;
    }
  
    .price-card__mock,
    .price-card__mock--tobe {
      justify-self: stretch;
      max-width: 90%;
      margin: 0 auto;
    } 
  
    .price-card__badge {
      top: -20px;
      padding: 8px;
      font-size: 14px;
    }
  
    .price-card__title {
      font-size: 22px;
      line-height: 34px;
    }
  
    .price-card__title-line {
      display: inline;
    }
  
    .price-card__quote p {
      font-size: 16px;
      line-height: 26px;
    }
  
    .price-card__body::before,
    .price-card__body--reverse::before {
      width: 40%;
    }
  }
  
  /* ===== Price: Mobile narrow (<= 480px) ===== */
  @media (max-width: 480px) {
    .price__inner {
      padding: 64px 20px 80px;
    }
  
    .price__title {
      font-size: 24px;
      line-height: 34px;
    }
  
    .price__desc {
      font-size: 14px;
      line-height: 22px;
    }
  
    .price-card__title {
      font-size: 20px;
      line-height: 30px;
    }
  
    .price-card__quote p {
      font-size: 14px;
      line-height: 22px;
    }
  
    .price-mock__bar {
      padding: 8px 10px;
      min-height: 40px;
    }
  
    .price-mock__dot {
      width: 9px;
      height: 9px;
    }
  
    .price-mock__url {
      min-width: 120px;
      font-size: 10px;
    }
  
    .price-card__badge {
      padding: 8px 14px;
      font-size: 14px;
    }
  }
  
  /* ===================================
     Membership (SNACK 요금제)
     =================================== */
  .membership {
    position: relative;
    width: 100%;
    background-color: #f7f7f7;
    color: var(--neutral-900);
  }
  
  .membership__inner {
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 125px 48px 140px;
  }
  
  /* --- 헤드 (오버라인 + 타이틀) --- */
  .membership__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
  }
  
  .membership__title {
    font-family: var(--font-base);
    font-weight: 700;
    font-size: 44px;
    line-height: 60px;
    letter-spacing: -0.04em;
    max-width: 900px;
  }
  
  .membership__title-sub {
    color: var(--neutral-300);
  }
  
  .membership__title-em {
    color: var(--neutral-900);
  }
  
  /* --- 플랜 그리드 --- */
  .membership__plans {
    display: grid;
    grid-template-columns: repeat(3, 386px);
    gap: 21px;
    justify-content: center;
    margin-top: 60px;
  }
  
  /* --- 플랜 카드 --- */
  .plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 580px;
    padding: 39px;
    background: #ffffff;
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-xl);
    overflow: hidden;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 560ms ease, transform 560ms ease, box-shadow 240ms ease, border-color 240ms ease;
  }
  
  .plan-card.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  
  .plan-card:hover {
    transform: translateY(-4px);
    background: linear-gradient(140.82deg, #f5fffe 43.83%, #c0fbf3 92.52%);
    border-color: var(--brand-600);
    box-shadow: 0 12px 30px rgba(31, 174, 154, 0.28), 0 0 35px #aeece3;
  }
  
  /* 헤드 */
  .plan-card__head {
    margin-bottom: 28px;
  }
  
  .plan-card__name {
    font-family: var(--font-base);
    font-weight: 700;
    font-size: 32px;
    line-height: 1.2;
    letter-spacing: -0.04em;
    color: var(--neutral-900);
  }
  
  /* 피처 리스트 */
  .plan-card__feats {
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  .plan-card__feat {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 6px 12px;
    background: var(--brand-50);
    border: 1px solid var(--brand-500);
    border-radius: var(--radius-md);
    font-family: var(--font-base);
    font-weight: 500;
    font-size: 20px;
    line-height: 30px;
    letter-spacing: -0.04em;
    color: var(--brand-800);
    text-align: center;
  }
  
  /* 추가옵션 행 (Snack 15 전용) */
  .plan-card__option {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
  }
  
  .plan-card__option-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 6px;
    background: var(--brand-50);
    border: 1px solid var(--brand-500);
    border-radius: var(--radius-sm);
    font-family: var(--font-base);
    font-weight: 500;
    font-size: 16px;
    line-height: 1;
    letter-spacing: -0.04em;
    color: #146c60;
    white-space: nowrap;
  }
  
  .plan-card__option-text {
    font-family: var(--font-base);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.3;
    letter-spacing: -0.04em;
    color: var(--neutral-700);
  }
  
  /* 구분선 */
  .plan-card__divider {
    display: block;
    margin: 0;
    margin-top: auto;
    border: 0;
    border-top: 1px solid var(--neutral-200);
  }
  
  /* 가격 */
  .plan-card__price {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-top: 24px;
    margin-bottom: 22px;
  }
  
  .plan-card__price-amount {
    font-family: var(--font-base);
    font-weight: 700;
    font-size: 36px;
    line-height: 1.1;
    letter-spacing: -0.04em;
    color: var(--neutral-900);
  }
  
  .plan-card__price-vat {
    font-family: var(--font-base);
    font-weight: 400;
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: -0.04em;
    color: var(--neutral-400);
  }
  
  /* CTA */
  .plan-card__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 68px;
    padding: 0 20px;
    background: var(--neutral-900);
    color: #ffffff;
    border-radius: var(--radius-md);
    font-family: var(--font-base);
    font-weight: 700;
    font-size: 18px;
    line-height: 1;
    letter-spacing: -0.04em;
    text-decoration: none;
    transition: background-color 180ms ease, color 180ms ease, transform 120ms ease, box-shadow 180ms ease;
  }
  
  .plan-card__cta:hover {
    background: var(--neutral-800);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
  }
  
  .plan-card__cta:active {
    transform: scale(0.98);
  }
  
  .plan-card__cta--accent,
  .plan-card:hover .plan-card__cta {
    background: var(--brand-300);
    color: var(--neutral-900);
  }
  
  .plan-card__cta--accent:hover,
  .plan-card:hover .plan-card__cta:hover {
    background: #68ff98;
    box-shadow: 0 0 0 4px rgba(77, 250, 131, 0.25), 0 10px 22px rgba(7, 250, 216, 0.18);
  }
  
  /* ===== Membership: Tablet (<= 1200px) ===== */
  @media (max-width: 1200px) {
    .membership__inner {
      padding: 100px 40px 120px;
    }
  
    .membership__plans {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
    }
  
    .plan-card {
      padding: 32px 28px;
    }
    .plan-card__price-amount {
      font-size: 28px;
    }
    .plan-card__name {
      font-size: 24px;
    }
  }
  
  @media (max-width: 1024px) {
    .plan-card__price-amount {
      font-size: 24px;
    }
    .plan-card__name {
      font-size: 20px;
    }
  }
  
  /* ===== Membership: Mobile (<= 768px) ===== */
  @media (max-width: 768px) {
    .membership__inner {
      padding: 80px 24px 96px;
    }
  
    .membership__title {
      font-size: 30px;
      line-height: 44px;
    }
  
    .membership__plans {
      grid-template-columns: 1fr;
      gap: 16px;
      margin-top: 40px;
      margin-left: auto;
      margin-right: auto;
    }
  
    .plan-card {
      min-height: auto;
      padding: 32px 28px;
    }
  
    .plan-card__name {
      font-size: 20px;
    }
  
    .plan-card__feat {
      font-size: 16px;
      line-height: 28px;
    }
  
    .plan-card__price-vat {
      font-size: 16px;
    }
  
    .plan-card__cta {
      height: 60px;
      font-size: 17px;
    }
  }
  
  /* ===== Membership: Mobile narrow (<= 480px) ===== */
  @media (max-width: 480px) {
    .membership__inner {
      padding: 64px 20px 80px;
    }
  
    .membership__title {
      font-size: 24px;
      line-height: 36px;
    }
  
    .plan-card {
      padding: 28px 22px;
    }
  
    .plan-card__name {
      font-size: 24px;
    }
  
    .plan-card__feat {
      font-size: 16px;
      line-height: 26px;
      min-height: 38px;
    }
  
    .plan-card__option-badge {
      font-size: 14px;
    }
  
    .plan-card__option-text {
      font-size: 14px;
    }
  
    .plan-card__price-amount {
      font-size: 28px;
    }
  
    .plan-card__cta {
      height: 56px;
      font-size: 16px;
    }
  }
  
  /* ===================================
     Banner (메인 마지막 CTA 섹션)
     - 풀블리드 다크 배경 이미지 + 오버레이
     - 좌측 타이틀/설명, 우측 2개 CTA
     =================================== */
  .banner {
    position: relative;
    width: 100%;
    min-height: 280px;
    padding: 60px 48px;
    overflow: hidden;
    background-color: var(--brand-900);
    color: #ffffff;
    isolation: isolate;
  }
  
  /* --- 배경 --- */
  .banner__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
  }
  
  .banner__bg-image {
    position: absolute;
    inset: 0;
    background-image: url("../image/main/banner-bg.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
  }
  
  .banner__bg-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      90deg,
      rgba(3, 25, 25, 0.85) 0%,
      rgba(3, 25, 25, 0.6) 50%,
      rgba(3, 25, 25, 0.7) 100%
    );
  }
  
  /* --- 컨텐츠 레이아웃 --- */
  .banner__inner {
    position: relative;
    z-index: 1;
    max-width: var(--content-max-width);
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 48px;
  }
  
  /* --- 좌측 텍스트 --- */
  .banner__content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
  }
  
  .banner__title {
    margin: 0;
    font-size: 44px;
    font-weight: 700;
    line-height: 60px;
    letter-spacing: -0.04em;
  }
  
  .banner__title-sub {
    color: var(--neutral-300);
    margin-right: 0.2em;
  }
  
  .banner__title-em {
    color: #fefefe;
  }
  
  .banner__desc {
    margin: 0;
    font-size: 22px;
    line-height: 36px;
    letter-spacing: -0.04em;
    color: #fefefe;
    font-weight: 400;
  }
  
  /* --- 우측 CTA --- */
  .banner__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
  }
  
  .banner__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 250px;
    height: 65px;
    padding: 0 24px;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    text-decoration: none;
    text-align: center;
    transition: background-color 180ms ease, color 180ms ease,
      border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
    cursor: pointer;
    user-select: none;
  }
  
  .banner__cta--primary {
    background-color: rgba(77, 250, 131, 0.85);
    color: var(--neutral-900);
    border: 1px solid transparent;
  }
  
  .banner__cta--primary:hover {
    background-color: var(--brand-300);
    box-shadow: 0 0 0 4px rgba(77, 250, 131, 0.28),
      0 10px 22px rgba(7, 250, 216, 0.18);
  }
  
  .banner__cta--primary:active {
    transform: scale(0.98);
  }
  
  .banner__cta--ghost {
    background-color: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.85);
  }
  
  .banner__cta--ghost:hover {
    background-color: rgba(255, 255, 255, 0.95);
    color: var(--neutral-900);
    border-color: #ffffff;
  }
  
  .banner__cta--ghost:active {
    transform: scale(0.98);
  }
  
  .banner__cta:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(7, 250, 216, 0.6);
  }
  
  /* ===== Banner: Tablet (<= 1200px) ===== */
  @media (max-width: 1200px) {
    .banner__inner {
      gap: 32px;
    }
  
    .banner__title {
      font-size: 36px;
      line-height: 52px;
    }
  
    .banner__desc {
      font-size: 20px;
      line-height: 32px;
    }
  
    .banner__cta {
      width: 220px;
      height: 60px;
      font-size: 17px;
    }
  }
  @media (max-width: 1024px) {
    .banner__inner {
      flex-direction: column;
      align-items: center;
      gap: 32px;
    }
    .banner__content {
      width: 100%;
    }
    .banner__title {
      text-align: center;
    }
    .banner__desc {
      text-align: center;
    }
    .banner__actions {
      justify-content: center;
    }
  }
  
  /* ===== Banner: Mobile (<= 768px) ===== */
  @media (max-width: 768px) {
    .banner {
      min-height: 0;
    }
  
    .banner__inner {
      flex-direction: column;
      align-items: flex-start;
      gap: 32px;
    }
  
    .banner__title {
      font-size: 30px;
      line-height: 44px;
    }
  
    .banner__desc {
      font-size: 18px;
      line-height: 30px;
    }
  
    .banner__actions {
      width: 100%;
      gap: 12px;
    }
  
    .banner__cta {
      flex: 1 1 0;
      width: auto;
      min-width: 0;
      height: 56px;
      padding: 0 16px;
      font-size: 16px;
    }
  }
  
  /* ===== Banner: Mobile narrow (<= 480px) ===== */
  @media (max-width: 480px) {
    .banner__inner {
      gap: 24px;
    }
  
    .banner__title {
      font-size: 26px;
      line-height: 38px;
    }
  
    .banner__title-sub {
      display: block;
      margin-right: 0;
    }
  
    .banner__desc {
      font-size: 16px;
      line-height: 26px;
    }
  
    .banner__actions {
      flex-direction: column;
      align-items: stretch;
    }
  
    .banner__cta {
      width: 100%;
      flex: 0 0 auto;
      height: 54px;
      font-size: 16px;
    }
  }



  /* =====================================================
   [신규] HOW TO SNACK — 퀵버튼 + 가이드 팝업 (캐러셀 6장)
   ===================================================== */

/* ---------- 퀵버튼 (pill형 플로팅 배너 — 원복) ---------- */
.howto-fab{position:fixed;right:24px;bottom:24px;z-index:90;display:inline-flex;align-items:center;gap:10px;padding:15px 24px;border:0;border-radius:999px;background:#4dfa83;color:#000;font-size:20px;font-weight:700;line-height:1;letter-spacing:-0.02em;box-shadow:0 8px 24px rgba(0,0,0,.25);cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}
.howto-fab:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.32)}
.howto-fab__dot{width:8px;height:8px;border-radius:50%;background:#fff;animation:howtoFabPulse 1.6s ease-in-out infinite}
@keyframes howtoFabPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}

/* ---------- 팝업 : SNACK DESIGN 카드 톤앤매너 (다크 글래스) ---------- */
.howto{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px}
.howto[hidden]{display:none}
.howto__dim{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.howto__panel{position:relative;width:100%;max-width:880px;background:linear-gradient(180deg,#0b423c 0%,#031919 60%);border:1px solid rgba(255,255,255,.08);border-radius:24px;box-shadow:0 16px 48px rgba(0,0,0,.45);overflow:hidden;animation:modalPop .2s cubic-bezier(.2,.8,.2,1)}
.howto__head{position:absolute;top:14px;right:14px;z-index:2}
.howto__overline{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:var(--radius-full);font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--neutral-100);background:rgba(255,255,255,.05);border:1px solid rgba(77,250,131,.35)}
.howto__overline img{width:10px;height:10px}
.howto__close{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;border-radius:var(--radius-md);background:transparent;font-size:20px;color:var(--neutral-300);cursor:pointer;transition:all .15s ease}
.howto__close:hover{background:rgba(255,255,255,.08);color:#fff}

/* 캐러셀 */
.howto__viewport{overflow:hidden}
.howto__track{display:flex;align-items:stretch;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.howto-slide{flex:0 0 100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;padding:36px 48px 8px;box-sizing:border-box}
.howto-slide__visual{width:100%;display:flex;align-items:center;justify-content:center;margin-top:6px}
.howto-slide__visual--img{padding:0;overflow:hidden}
.howto-slide__visual--img img{width:100%;height:230px;object-fit:cover;display:block}
.howto-slide__title{font-size:25px;font-weight:700;letter-spacing:-0.04em;line-height:1.45;color:#fff}
.howto-slide__title em{font-style:normal;color:#30d965}
.howto-slide__desc{font-size:18px;line-height:1.6;letter-spacing:-0.02em;color:var(--neutral-200);max-width:660px}
.howto-slide__checks{display:flex;flex-direction:column;gap:6px}
.howto-slide__check{display:flex;align-items:center;gap:8px;font-size:16px;color:var(--neutral-200)}
.howto-slide__check::before{content:"";width:15px;height:15px;flex-shrink:0;border-radius:50%;background:rgba(77,250,131,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 24 24' fill='none' stroke='%234dfa83' stroke-width='4'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/9px no-repeat}
.howto-slide__meta{display:flex;align-items:center;gap:10px;margin-top:2px}
.howto-slide__meta-index{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:6px;background:#fff;color:var(--neutral-900);font-family:var(--font-mono);font-size:12px;font-weight:700}
.howto-slide__meta-label{font-size:16px;font-weight:600;color:#fff;letter-spacing:-0.02em}

/* 슬라이드1: 두 진단 카드 (세로 스택) */
.howto-duo{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%;text-align:left}
.howto-duo__card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-lg);padding:16px 18px;display:flex;flex-direction:column;gap:6px}
.howto-duo__tag{align-self:flex-start;padding:2px 10px;border-radius:var(--radius-full);font-size:11px;font-weight:700;letter-spacing:.04em;background:rgba(77,250,131,.18);color:var(--brand-300)}

.howto-duo__name{font-size:18px;font-weight:700;letter-spacing:-0.03em;color:#fff}
.howto-duo__sub{font-size:16px;line-height:1.55;color:var(--neutral-200)}
@media (max-width:860px){.howto-duo{grid-template-columns:1fr}}

/* 슬라이드3: 검사 목업 */
.howto-rs{width:100%;max-width:380px;box-sizing:border-box;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-lg);padding:18px;display:flex;flex-direction:column;gap:12px}
.howto-rs__top{display:flex;align-items:center;justify-content:space-between}
.howto-rs__name{font-size:15px;font-weight:700;color:#fff}
.howto-rs__by{font-family:var(--font-mono);font-size:10px;letter-spacing:.04em;color:var(--neutral-300)}
.howto-rs__row{display:flex;flex-direction:column;gap:5px}
.howto-rs__label{display:flex;justify-content:space-between;font-size:12px;color:var(--neutral-200)}
.howto-rs__bar{height:7px;border-radius:var(--radius-full);background:rgba(255,255,255,.12);overflow:hidden}
.howto-rs__fill{display:block;height:100%;border-radius:var(--radius-full);background:linear-gradient(90deg,var(--brand-600),var(--brand-300))}

/* 슬라이드4: 패밀리 다이어그램 */
.howto-family{display:flex;align-items:center;gap:8px;width:100%;max-width:620px;justify-content:center}
.howto-family__node{display:flex;flex-direction:column;align-items:center;gap:3px;padding:14px 10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-lg);flex:1;min-width:0}
.howto-family__node--center{background:var(--brand-300);border-color:var(--brand-300)}
.howto-family__node--center .howto-family__role{color:var(--brand-800)}
.howto-family__node--center .howto-family__brand{color:var(--neutral-900)}
.howto-family__role{font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;color:var(--neutral-300);text-transform:uppercase}
.howto-family__brand{font-size:16px;font-weight:700;letter-spacing:-0.02em;color:#fff;white-space:nowrap}
.howto-family__link{color:rgba(255,255,255,.35);font-size:15px;flex-shrink:0}

/* 슬라이드5: 결과 리포트 목업 */
.howto-report{width:100%;max-width:560px;box-sizing:border-box;text-align:left;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-lg);padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.howto-report__title{display:flex;justify-content:space-between;align-items:center;font-size:16px;font-weight:700;color:#fff}
.howto-report__score{font-family:var(--font-mono);font-size:12px;color:var(--brand-300)}
.howto-report__item{display:flex;align-items:center;gap:10px;padding:5px 0}
.howto-report__bullet{width:14px;height:14px;flex-shrink:0;filter:brightness(0) invert(1)}
.howto-report__kind{flex-shrink:0;padding:3px 9px;border-radius:var(--radius-full);font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.04em}
.howto-report__kind--lec{background:rgba(77,250,131,.18);color:var(--brand-300)}
.howto-report__kind--book{background:rgba(255,188,79,.18);color:#ffbc4f}
.howto-report__kind--test{background:rgba(7,250,216,.15);color:var(--brand-500)}
.howto-report__kind--cert{background:rgba(255,255,255,.14);color:#fff}
.howto-report__kind--badge{background:rgba(48,217,101,.18);color:#30d965}
.howto-report__kind--job{background:rgba(126,168,255,.18);color:#7ea8ff}
.howto-report__kind--care{background:rgba(255,141,140,.18);color:#ff8d8c}
.howto-report__text{font-size:16px;color:var(--neutral-100);letter-spacing:-0.02em}
.howto-result{display:grid;grid-template-columns:210px 1fr;gap:12px;width:100%;max-width:680px;align-items:stretch;text-align:left}
.howto-result .howto-report{max-width:none;height:100%;box-sizing:border-box}
.howto-gauge{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-lg);padding:16px}
.howto-gauge svg{width:150px;height:124px}
.howto-gauge__label{font-size:16px;font-weight:600;color:var(--neutral-200)}
@media (max-width:700px){.howto-result{grid-template-columns:1fr}}
.howto-stack{display:flex;flex-direction:column;gap:12px;width:100%;max-width:720px}
.howto-stack .howto-report{max-width:none}
.howto-family--wide{max-width:100%}
.howto-family--wide .howto-family__node{padding:12px 6px}
.howto-family--wide .howto-family__brand{font-size:13px}
@media (max-width:760px){.howto-family--wide{flex-wrap:wrap}}
/* 결과표 (표준화검사 T점수/수준) */
.howto-table{width:100%;box-sizing:border-box;display:flex;flex-direction:column;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-lg);padding:12px 16px;text-align:left;box-sizing:border-box}
.howto-table__row{display:flex;align-items:center;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.howto-table__row:last-child{border-bottom:none}
.howto-table__name{font-size:16px;color:var(--neutral-100)}
.howto-table__t{font-family:var(--font-mono);font-size:12px;color:var(--neutral-300);margin-left:auto;margin-right:10px}
.howto-table__lv{flex-shrink:0;min-width:56px;text-align:center;padding:2px 8px;border-radius:var(--radius-full);font-size:11px;font-weight:700}
.howto-table__lv--low{background:rgba(255,141,140,.18);color:#ff8d8c}
.howto-table__lv--mid{background:rgba(255,255,255,.12);color:var(--neutral-100)}
.howto-table__lv--good{background:rgba(77,250,131,.18);color:var(--brand-300)}
/* 큐레이션 카드 3종 */
.howto-cur{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%;text-align:left}
@media (max-width:760px){.howto-cur{grid-template-columns:1fr}}

.howto-evidence{width:270px;display:block;border-radius:var(--radius-lg);border:1px solid rgba(255,255,255,.12);background:#fff}
.howto-split{display:grid;grid-template-columns:270px 1fr;gap:14px;width:100%;max-width:720px;align-items:stretch;text-align:left}
.howto-split .howto-evidence{height:240px;object-fit:cover;object-position:top}
.howto-split .howto-report{height:240px;justify-content:center;box-sizing:border-box}
@media (max-width:700px){.howto-split{grid-template-columns:1fr}.howto-evidence{width:100%}.howto-split .howto-evidence{height:auto}.howto-split .howto-report{height:auto;justify-content:flex-start}}

/* 슬라이드6: 사이클 */
.howto-cycle{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;flex-wrap:wrap}
.howto-cycle__step{padding:12px 16px;border-radius:var(--radius-full);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);font-size:16px;font-weight:700;color:#fff}
.howto-cycle__step--accent{background:var(--brand-300);border-color:var(--brand-300);color:var(--neutral-900)}
.howto-cycle__arrow{color:rgba(255,255,255,.35);font-size:15px}
.howto-slide__cta{display:inline-flex;align-items:center;justify-content:center;align-self:center;height:50px;padding:0 34px;border-radius:var(--radius-md);background:var(--brand-300);color:var(--neutral-900);font-size:18px;font-weight:700;text-decoration:none;transition:background .15s ease,box-shadow .15s ease}
.howto-slide__cta:hover{background:#68ff98;box-shadow:0 0 0 6px rgba(77,250,131,.2)}
.howto-slide__ctas{display:flex;gap:10px;justify-content:center;align-self:center;flex-wrap:wrap;width:100%;max-width:560px;margin-top:16px}
.howto-slide__ctas .howto-slide__cta{flex:1;box-sizing:border-box;padding:0 12px;white-space:nowrap}
.howto-slide__cta--outline{background:transparent;border:1px solid rgba(255,255,255,.4);color:#fff}
.howto-slide__cta--outline:hover{background:transparent;border-color:var(--brand-300);color:var(--brand-300);box-shadow:none}

/* 컨트롤 */
.howto__foot{display:flex;align-items:center;justify-content:center;gap:18px;padding:16px 22px 28px}
.howto__dots{display:none}
.howto__dot{width:7px;height:7px;padding:0;border:none;border-radius:50%;background:rgba(255,255,255,.25);cursor:pointer;transition:all .2s ease}
.howto__dot.is-active{width:22px;border-radius:var(--radius-full);background:var(--brand-300)}
.howto__nav{display:flex;align-items:center;gap:12px}
.howto__counter{font-family:var(--font-mono);font-size:12px;color:var(--neutral-400);letter-spacing:.04em}
.howto__counter strong{color:#fff}
.howto__arrow{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid rgba(255,255,255,.25);border-radius:50%;background:transparent;font-size:15px;color:#fff;cursor:pointer;transition:all .15s ease}
.howto__arrow:hover:not(:disabled){border-color:var(--brand-300);color:var(--brand-300)}
.howto__arrow:disabled{opacity:.25;cursor:default}
@media (max-width:768px){
  .howto{padding:12px}
  .howto__panel{max-height:92vh;max-height:92dvh;overflow-y:auto;border-radius:18px}
  .howto__head{top:10px;right:10px}
  .howto-slide{padding:30px 20px 4px;gap:7px}
  .howto-slide__title{font-size:20px}
  .howto-slide__desc{font-size:15px}
  .howto-slide__desc br,.howto-duo__sub br{display:none}
  .howto-slide__meta-label{font-size:14px}
  .howto-slide__meta-index{width:24px;height:24px;font-size:11px}
  .howto-duo{grid-template-columns:1fr;gap:8px}
  .howto-duo__name{font-size:16px}
  .howto-duo__sub{font-size:14px}
  .howto-report__text,.howto-table__name{font-size:14px}
  .howto-report__title{font-size:15px}
  .howto-table{padding:10px 14px}
  .howto-table__t{font-size:11px}
  .howto-family--wide{flex-wrap:wrap;row-gap:8px}
  .howto-family--wide .howto-family__node{flex:1 1 30%}
  .howto-family--wide .howto-family__link{display:none}
  .howto-family__brand{font-size:14px}
  .howto-gauge svg{width:130px;height:108px}
  .howto-gauge__label{font-size:14px}
  .howto-cycle__step{font-size:14px;padding:10px 14px}
  .howto-slide__ctas{flex-direction:column;max-width:100%}
  .howto-slide__ctas .howto-slide__cta{width:100%;box-sizing:border-box}
  .howto__foot{padding:12px 18px 18px;gap:12px}
  .howto__arrow{width:36px;height:36px}
  .howto-fab{right:16px;bottom:16px;padding:13px 20px;font-size:14px}
}
@media (max-width:480px){
  .howto-slide__title{font-size:18px}
  .howto-slide__desc{font-size:14px}
  .howto-slide{padding:26px 16px 4px}
  .howto-family--wide .howto-family__node{flex:1 1 40%}
  .howto__counter{font-size:11px}
}