@charset "utf-8";

/* =============================================================================
   How To 섹션 통합 스타일 — 경매 소개 · 응찰 안내 (· 위탁 안내 예정)
   공통 셸(리셋·GNB·푸터)은 howto.common.css.
   색·버튼·타이포는 디자인 시스템(foundations.css / components.css)을 따른다.

   ▶ 구성
     ① How To 공통 : 세 페이지가 공유하는 페이지 머리 · 본문 서체 · 안내 바로가기
                     → `main.howto2` 로 스코프
     ② 경매 소개    → `main.auction-about`
     ③ 응찰 안내    → `main.bid-guide`
     ④ 반응형       : 768 이하 모바일 시안 (파일 끝) — 세 페이지 모두 반영
     마크업은 `<main class="howto2 auction-about">` 처럼 공통 + 페이지 클래스를 함께 쓴다.

   ▶ 원본(K-Auction.Design/howTo/css/ka.howto.css)에서 반드시 바꿔야 하는 것
     클래스명은 원본이 이미 프로덕션과 같은 이름(`.howto2` / `.auction-about`)을 쓰므로
     그대로 복사하고, 아래 다섯 가지만 다시 적용한다.
       1. 이미지 경로 `../img/<page>/` → `../../img/howto/<page>/`
          (경매 소개는 폴더명도 auction-intro → auction-about 으로 바뀐다)
       2. 페이지 아래 여백은 `.auction-about+.footer` 가 아니라 `.howto2` 의
          padding-bottom 으로 준다. _Layout 의 푸터는 `<footer>` 로 한 겹 더 감싸여 있어
          인접(+) 선택자가 닿지 않는다.
       3. _Layout 이 모든 페이지에 깔아 두는 `.footer-padding` 간격자를 숨긴다.
          위 2번과 겹쳐 아래 여백이 두 번 들어간다.
       4. 서브 GNB 의 `top` 은 CSS 에서 빼고 auction-about.js 가 인라인으로 준다.
          원본이 기대는 공통 셸 신호(`--howto-header-h`, `:root.is-header-hidden`)를
          _Layout 의 헤더가 보내지 않는다. 자세한 내용은 해당 규칙의 주석에 있다.
       5. 사이트 헤더(`.header`)를 다시 fixed 로 되돌리고 `.ka-container` 에 그만큼
          padding-top 을 준다. ka.home.css 가 static 으로 덮어 둔 탓에 스크롤 방향에
          따른 헤더 접기·펴기(시안의 GNB 모션)가 죽어 있다.
   ========================================================================== */

/* =============================================================================
   ① How To 공통
   ========================================================================== */

/* ---- 페이지 머리 --------------------------------------------------------- */
.howto2 {
    /* 반응형 기준 — 세 페이지 모두 1920 고정 시안이지만, 모바일 시안이 나오기 전이라도
       폭이 줄면 레이아웃이 같이 줄어야 한다. 규칙은 두 가지다.
         · 전면(full-bleed) 장식 밴드 : 밴드에 `aspect-ratio` 를 주어 폭에 따라
           높이가 정해지게 하고, 그 안의 배경 좌표·크기는 밴드 기준 %로 적는다.
           밴드 비율이 고정이라 %는 폭이 달라져도 시안 비율을 그대로 지킨다.
           %로 옮길 수 없는 값(글자 크기, 밴드 높이 자체)만 `④ 반응형` 에서
           단계로 줄인다.
         · 본문 컨테이너 : 1200 을 상한으로 두고 좌우 여백(--howto-gutter)만 남기고 줄인다.
           안의 2단 블록은 시안 픽셀을 컨테이너 1200 기준 %로 바꿔 비율을 지킨다
           (예: 588px → 49%, 486px → 40.5%, 간격 126px → 10.5%).
       768 이하에서 2단을 세로로 쌓는 규칙은 파일 끝 `④ 반응형` 에 모아 두었다. */
    --howto-content: 1200px;
    --howto-gutter: 20px;

    /* 서브 GNB 배경 — Figma 에서 변수에 묶여 있지 않은 raw 색이라 여기 둔다 */
    --howto-subgnb-surface: rgba(0, 0, 0, .8);

    /* 프로젝트 전용 — 시안의 안내 바로가기 → 푸터 160.
       원본은 `.auction-about+.footer` 로 주지만 _Layout 의 푸터는
       `<footer>` 로 한 겹 더 감싸여 있어 인접(+) 선택자가 닿지 않는다. */
    padding-bottom: 160px;
}


/* _Layout 이 모든 페이지에 깔아 두는 간격자 — 위 padding-bottom 과 겹친다 */
.footer-padding {
    display: none;
}


/* ---- 사이트 헤더 고정 (프로젝트 전용) ------------------------------------- */
/* 시안은 아래로 내리면 GNB 가 접히고(서브 GNB 가 그 자리를 대신한다) 위로 올리면
   다시 펴진다. 원본은 이걸 공통 셸 스크립트(ka.howto.common.js)가 맡지만,
   이 사이트는 같은 동작을 이미 가지고 있다 — ka.fe.css 가 `.header` 를 fixed 로 두고,
   ka.common.js 가 스크롤 방향에 따라 `.header-up`(top:-80px) / `.header-down`(top:0)
   을 번갈아 붙여 .4s 로 움직인다.

   다만 ka.home.css 가 "모든 페이지 레이아웃" 으로 `.header { position: static }` 을
   다시 덮어, 두 클래스의 top 이 아무 일도 하지 않는다. 그래서 아래로 내리면 헤더가
   그냥 본문과 같이 밀려 올라가 버리고, 위로 올려도 내려오지 않는다.
   이 파일은 How To 세 화면에서만 불러오므로, 여기서 원래 값으로 되돌려
   그 세 화면에서만 시안대로 접혔다 펴지게 한다.
   서브 GNB 는 auction-about.js 가 헤더의 실제 아래 모서리를 따라붙으므로 함께 움직인다. */
.header {
    position: fixed;
}


/* 헤더가 흐름에서 빠진 만큼 본문을 내린다.
   ka.home.css 가 `.ka-container` 의 padding-top 을 0 으로 두고 있어 여기서 다시 준다.
   높이는 폭에 따라 두 값뿐이다 — ka.fe.css `.header { height: 80px !important }` 가
   기본이고, 485 이하에서 ka.header.css `body .header { height: 50px !important }` 가
   이긴다. 그 두 값을 그대로 따라간다. */
.ka-container {
    padding-top: 80px;
}


@media (max-width: 485px) {
    .ka-container {
        padding-top: 0px;
    }
}


.howto2 .intro__head {
    /* 시안: 제목 상단 y=160 = GNB 80 + 80 */
    margin-top: 80px;
    text-align: center;
}

/* 48 — 타입 스케일 최상단(xl 24)을 넘는 시안 전용 값 */
.howto2 .intro__title {
    font-size: 48px;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.384px;
}

/* ---- 서브 GNB (스크롤 상태) ------------------------------------------------ */
/* Figma `A-경매소개(스크롤)` 1630:2442 · `응찰안내 (스크롤다운)` 19402:101673
   — GNB(80) 바로 아래 폭 100% / 높이 56 바. 세 페이지가 같은 모양이라
   `.howto2` 스코프에 두고 동작은 sub-gnb.js 가 맡는다(두 페이지 공용).
   기본 시안에는 없는 요소이므로 fixed 로 흐름에서 빼 문서 높이를 건드리지 않는다.
   숨김 상태는 위로 밀어 두고 z-index 로 GNB 뒤에 가려 둔다 → 진입 시 내려오는 모션. */
/* ▶ 프로젝트 전용 — top 은 CSS 가 아니라 sub-gnb.js 가 인라인으로 준다.
     원본은 공통 셸이 GNB 높이를 `--howto-header-h` 로 알려 주고 접힘 여부를
     `:root.is-header-hidden` 으로 알려 주지만, _Layout 의 헤더는 그 둘을 쓰지 않고
     `.header` 에 `.header-up` / `.header-down` 을 붙였다 떼며 스스로 .4s 로 움직인다.
     그래서 여기서는 헤더의 실제 아래 모서리를 매 프레임 재서 그대로 붙인다.
     · `top` 에 전환을 걸지 않는다 — 헤더(.4s)와 바(.25s)의 전환이 따로 돌면 서로
       어긋나고, 특히 바가 사라지는 순간 top 이 뒤늦게 내려와 "내려왔다가 올라가는"
       것처럼 보인다. 자세한 이유는 sub-gnb.js 의 주석에 있다.
     · 원본의 `top: var(--howto-header-h)` 와 `:root.is-header-hidden` 규칙은
       인라인 top 에 가려 동작하지 않으므로 아예 두지 않는다. */
.howto2 .sub-gnb {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 90;
    /* .gnb(100) 보다 뒤 */
    width: 100%;
    height: 56px;
    background: var(--howto-subgnb-surface);
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform .25s ease, visibility 0s linear .25s;
}


.howto2 .sub-gnb.is-visible {
    transform: none;
    visibility: visible;
    transition: transform .25s ease, visibility 0s;
}


/* 시안 px-360 — 본문 컨테이너와 같은 폭이다 */
.howto2 .sub-gnb__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: min(var(--howto-content), 100% - var(--howto-gutter) * 2);
    height: 100%;
    margin-inline: auto;
}


/* 좌측 현재 페이지 — 타이포는 마크업의 `.ka-typo--rg-sb`(15/23/600, 시안 body_label/rg-sb) */
.howto2 .sub-gnb__page {
    position: relative;
    /* 앵커가 길어도 페이지 이름은 줄어들지 않는다 (모바일에서 두 줄로 접혔다) */
    flex: none;
}


.howto2 .sub-gnb__page-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    /* 시안: 텍스트 55 + 6 → 아이콘 x=61 */
    color: var(--ka-text-white);
    white-space: nowrap;
}


.howto2 .sub-gnb__caret {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}


.howto2 .sub-gnb__caret circle {
    fill: var(--ka-surface-white);
}


.howto2 .sub-gnb__caret path {
    stroke: var(--ka-text-default);
}


.howto2 .sub-gnb__page-btn[aria-expanded="true"] .sub-gnb__caret {
    transform: rotate(180deg);
}


/* 페이지 전환 메뉴 — Figma `Dropdown menu` 19510:4697 (폭 160 · 위아래 여백 6) */
.howto2 .sub-gnb__menu {
    position: absolute;
    left: 0;
    margin-top: 8.5px;
    min-width: 160px;
    padding: 6px 0;
    border: 1px solid var(--ka-border-gray-lightest);
    border-radius: 8px;
    background: var(--ka-surface-white);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .16);
    overflow: hidden;
}


.howto2 .sub-gnb__menu[hidden] {
    display: none;
}


/* 시안 항목 높이 40 고정 — 타이포(15/23)는 마크업의 `.ka-typo--rg` 가 맡는다 */
.howto2 .sub-gnb__menu a {
    display: flex;
    align-items: center;
    height: 40px;
    padding: 0 16px;
    color: var(--ka-text-default);
    white-space: nowrap;
}


.howto2 .sub-gnb__menu a:hover {
    background: var(--ka-surface-gray-lightest);
}


.howto2 .sub-gnb__menu a[aria-current="page"] {
    color: var(--ka-text-primary);
}


/* 우측 섹션 앵커 */
.howto2 .sub-gnb__anchors {
    display: flex;
    gap: 24px;
    /* 시안: 68 + 24 → 두 번째 x=92 */
}


.howto2 .sub-gnb__anchors li {
    flex: none;
}


/* 15/23/500 — 타입 스케일에 없는 시안 전용 값(rg 는 400, rg-sb 는 600).
   활성/비활성이 Figma 에서 같은 text/white 변수라, 차이는 색이 아니라 불투명도다. */
.howto2 .sub-gnb__anchors a {
    display: block;
    font-size: 15px;
    font-weight: 500;
    line-height: 23px;
    color: var(--ka-text-white);
    white-space: nowrap;
    opacity: .5;
    transition: opacity .15s ease;
}


.howto2 .sub-gnb__anchors a.is-active {
    opacity: 1;
}


/* 터치 기기는 탭한 앵커에 :hover 가 남아, 다른 섹션으로 옮겨도 활성처럼 보인다 */
@media (hover: hover) {
    .howto2 .sub-gnb__anchors a:hover {
        opacity: 1;
    }
}



/* ---- 본문 설명 ----------------------------------------------------------- */
/* 16/26 — `.ka-typo--md`(16/24) 와 줄높이가 달라 시안값을 쓴다.
   `.desc` 는 이름이 일반적이라 반드시 `.howto2` 스코프 안에서만 쓴다. */
.howto2 .desc {
    font-size: 16px;
    line-height: 26px;
    letter-spacing: -0.128px;
    word-break: keep-all;
}

/* ---- 안내 페이지 바로가기 ------------------------------------------------ */
/* 위 여백만 페이지마다 달라 각 장에서 준다 (경매 소개 150 / 응찰 안내 160) */
.howto2 .guide-links {
    display: flex;
    /* 시안 24 / 컨테이너 1200 */
    gap: 2%;
    margin-inline: auto;
    width: min(var(--howto-content), 100% - var(--howto-gutter) * 2);
}

.howto2 .guide-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    height: 92px;
    /* 좌우 40 / .guide-links 1200 */
    padding: 20px 3.3333%;
    border-radius: 8px;
    background: var(--ka-surface-gray-lighter);
    transition: background .15s ease;
}

.howto2 .guide-link:hover,
.howto2 .guide-link:focus-visible,
.howto2 .guide-link:active {
    background: var(--ka-surface-gray-light);
}

.howto2 .guide-link__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.howto2 .guide-link__text strong {
    color: var(--ka-text-default);
}

.howto2 .guide-link__desc {
    color: var(--ka-text-secondary);
}

.howto2 .guide-link__arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--ka-surface-default);
    color: var(--ka-text-white);
}

.howto2 .guide-link__arrow svg {
    width: 12px;
    height: 12px;
}

.howto2 em {
    font-style: normal !important;
    word-break: keep-all;
    color: var(--ka-text-primary);
}

/* ---- 스크롤 페이드 (Figma 메모 260901 `콘텐츠 아래로 스크롤 시`, 세 페이지 공통) -- */
/* 화면에 들어온 블록에 scroll-fade.js 가 `is-in` 을 붙인다. 한 번 붙으면 떼지 않는다 —
   아래로 내릴 때 한 번만 떠오르고, 위로 되감을 때는 페이드 없이 그대로 보인다.
   대상은 페이지를 이루는 덩어리 단위다. 첫 화면에 놓여 들어오고 나갈 일이 없는
   히어로(경매 소개 라이브 · 응찰 안내 영상 · 위탁 안내 영상)는 뺀다.
     · 경매 소개 : 온라인 히어로 · 리드 · 경매 카드 · 출품작 스트립 · 경매 일정 밴드
     · 응찰 안내 : 스텝 머리 · 이미지/본문 묶음 · 소제목 · 표 · 유의사항 · 도록 배너
                   (프리뷰는 앵커 대상이라 밴드째 움직이면 착지 자리가 어긋나 머리만 띄운다)
     · 위탁 안내 : 섹션 머리 · 특징 항목 · 경매 결과 밴드 · 절차 머리 · 본문 · 주의사항
     · 공통     : 신청 버튼 · 안내 바로가기
   자리를 건드리지 않도록 투명도와 짧은 이동(15px)만 쓴다.
   마스크 선언은 그러데이션이 꺼져 있어 지금은 아무 일도 하지 않는다. */
.auction-about .hero--online,
.auction-about .intro__lead,
.auction-about .auction-card,
.auction-about .lot-strip,
.auction-about .lot-strip__cta,
.auction-about .schedule,
.auction-about .guide-links,
.bid-guide .step__head,
.bid-guide .pair,
.bid-guide .split,
.bid-guide .block-title,
.bid-guide .block-lead,
.bid-guide .table,
.bid-guide .notice,
.bid-guide .bid-catalog,
.bid-guide .guide-links,
.consign-guide .section-head,
.consign-guide .feature,
.consign-guide .results,
.consign-guide .step__head,
.consign-guide .split,
.consign-guide .notice,
.consign-guide .consign-apply,
.consign-guide .guide-links {
    opacity: 0;
    transform: translateY(15px);
    /* -webkit-mask-image: linear-gradient(to top, #000 0%, #000 50%, transparent 100%);
    mask-image: linear-gradient(to top, #000 0%, #000 50%, transparent 100%); */
    -webkit-mask-size: 100% 200%;
    mask-size: 100% 200%;
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    transition: opacity 1.1s cubic-bezier(.4, 0, .2, 1),
        transform 1.1s cubic-bezier(.4, 0, .2, 1),
        -webkit-mask-position 1.1s cubic-bezier(.4, 0, .2, 1),
        mask-position 1.1s cubic-bezier(.4, 0, .2, 1),
        /* 버튼이 대상에 끼어 있어 `.ka-btn` 의 hover 전환을 여기서 이어 받는다.
           나머지 블록은 두 속성이 변하지 않아 아무 일도 일어나지 않는다. */
        background .15s, border-color .15s;
}


.auction-about .is-in,
.bid-guide .is-in,
.consign-guide .is-in {
    opacity: 1;
    transform: translateY(0);
    -webkit-mask-position: 0 100%;
    mask-position: 0 100%;
}


@media (prefers-reduced-motion: reduce) {

    .auction-about .hero--online,
    .auction-about .intro__lead,
    .auction-about .auction-card,
    .auction-about .lot-strip,
    .auction-about .lot-strip__cta,
    .auction-about .schedule,
    .auction-about .guide-links,
    .bid-guide .step__head,
    .bid-guide .pair,
    .bid-guide .split,
    .bid-guide .block-title,
    .bid-guide .block-lead,
    .bid-guide .table,
    .bid-guide .notice,
    .bid-guide .bid-catalog,
    .bid-guide .guide-links,
    .consign-guide .section-head,
    .consign-guide .feature,
    .consign-guide .results,
    .consign-guide .step__head,
    .consign-guide .split,
    .consign-guide .notice,
    .consign-guide .consign-apply,
    .consign-guide .guide-links {
        opacity: 1;
        transform: none;
        -webkit-mask-image: none;
        mask-image: none;
        transition: none;
    }
}


/* =============================================================================
   ② 경매 소개 — Figma `A-경매소개` (1920x4851)
   ========================================================================== */
/* 시안: 경매 일정 밴드 4645 → 안내 바로가기 4805 → 푸터 5057, 둘 다 160.
   푸터 앞 160 은 `.howto2` 의 padding-bottom 이 대신한다 (파일 머리 참고). */

/* =============================================================================
   경매 소개 (A) — Figma `A-경매소개` (1920x4851) 본문
   공통 리셋·GNB·푸터는 ka.common.css.
   색·버튼·타이포는 디자인 시스템(foundations.css / components.css)을 따른다.
     - 색   : `--ka-text-* / --ka-surface-* / --ka-border-* / --ka-divider-*`
     - 버튼 : `.ka-btn` + `.ka-btn--solid-black` + `.ka-btn--size-42`
     - 타이포: 스케일과 값이 일치하는 곳은 마크업에 `.ka-typo--*` 를 붙이고
               여기서는 font-size/line-height/letter-spacing 을 다시 쓰지 않는다.
               스케일에 없는 시안 전용 값만 이 파일에 남기고 이유를 주석으로 적는다.

   ▶ 스코프 : 이 파일의 모든 규칙은 페이지 최상위 `main.auction-about` 아래로 한정한다.
     페이지 변수도 `:root` 가 아니라 그 엘리먼트에 선언해 다른 페이지로 새지 않게 한다.
     공통 셸(리셋·GNB·푸터)은 여러 페이지가 공유하므로 ka.common.css 에서 스코프하지 않는다.

   고정 1920 시안이라 세로 간격은 시안 좌표에서 계산한 값을 그대로 쓴다.

   ▶ 전면(full-bleed) 요소의 가로 위치
     뷰포트가 1920 보다 넓어져도 시안 그림이 화면 중앙에 오도록,
     좌표를 왼쪽 고정이 아니라 "중앙 정렬된 1920 캔버스" 기준으로 준다:
         left: calc(50% - 960px + <시안 left>)
     배경 이미지는 %가 (컨테이너폭 - 이미지폭) 에 대해 풀리므로 오프셋이 달라진다(아래 주석 참고).
   ========================================================================== */

.auction-about {
    /* 디자인 시스템에 대응 토큰이 없는 값만 페이지 변수로 둔다 */
    --intro-hero-surface: #d1d0d1;
    /* 온라인 히어로 여백 배경 */
    --intro-hero-edge: #030302;
    /* 온라인 히어로 우측 띠 */
    --intro-schedule-surface: #d9d9d9;
    --intro-schedule-veil: 233, 234, 237;
    /* 경매 일정 그러데이션 */
    /* 출품작 스트립은 overflow-x 가 세로도 자른다. 카드 그림자가 잘리지 않게 트랙에 준
       상하 여백이고, 바깥 간격에서 그만큼 되돌린다. 호버 그림자(0 2 5)가 아래로 7px
       번지므로 8 이다. */
    --lot-shadow-room: 8px;
}


/* ---- 본문 공통 타이포 ----------------------------------------------------- */
/* 타입 스케일에 없는 시안 전용 값. 값은 여기 한 곳에서만 정의하고
   여백·레이아웃은 아래 각 섹션 규칙이 맡는다. */

/* 28/33.41 — 섹션·카드 제목 */
.auction-about h3 {
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
    letter-spacing: -0.192px;
}

.auction-about .auction-card__type {
    font-style: normal;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: -0.112px;
    margin-bottom: 16px;
}

.auction-about .intro__section-live .auction-card__type {
    color: var(--ka-text-primary);
}

.auction-about .intro__section-online .auction-card__type {
    color: var(--ka-color-navy-600);
}

/* 16/26 — 본문 설명 공통. `.ka-typo--md`(16/24) 와 줄높이가 달라 시안값을 쓴다.
   `.desc` 는 이름이 일반적이라 반드시 `.auction-about` 스코프 안에서만 쓴다.
   여백은 공통이 아니므로 아래 각 섹션 규칙이 준다. */
.auction-about .desc {
    font-size: 16px;
    line-height: 26px;
}


/* 앵커 이동 시 섹션 상단이 화면 맨 위에 멈춘다.
   서브 GNB 가 나타나는 기준점(sub-gnb.js 가 이 값을 그대로 읽는다)과 같은 점이라,
   "라이브 경매" 앵커로 이동해도 바가 조건에서 벗어나 사라지지 않는다.
   헤더·바(합 136)는 히어로 위에 겹쳐 뜨는데, 히어로는 장식 배경이고
   "Live" 레터링이 가운데(600px 의 절반)라 가려지지 않는다. */
.auction-about .intro__section {
    scroll-margin-top: 0;
}


/* ---- 레이아웃 골격 -------------------------------------------------------- */
/* 섹션은 항상 전체 폭(전면 배경을 놓을 수 있게), 가운데 콘텐츠는 .inner 가 맡는다.
   `.inner` 는 이름이 일반적이라 반드시 `.auction-about` 스코프 안에서만 쓴다. */
.auction-about .intro-inner,
.auction-about .schedule-inner {
    width: min(var(--howto-content), 100% - var(--howto-gutter) * 2);
    margin-inline: auto;
}


/* ---- 히어로 -------------------------------------------------------------- */
/* 밴드는 폭만 화면을 따라가고 높이는 시안 600 으로 고정한다.
   폭이 줄어도 높이는 그대로이므로 사진은 좌우가 더 잘려 보인다. */
.auction-about .hero {
    position: relative;
    width: 100%;
    height: 600px;
    margin-top: 80px;
    overflow: hidden;
}


/* 두 번째 섹션은 앞 카드와의 간격이 시안에서 160px 이다 */
.auction-about .intro__section+.intro__section .hero {
    margin-top: 160px;
}


/* 160/195.04 영문 디스플레이 — 타입 스케일에 없는 시안 전용 값.
   밴드 높이가 고정이라 글자도 시안값 그대로 둔다. */
.auction-about .hero__label {
    font-family: var(--ka-typo-font-family-en);
    color: var(--ka-text-white);
    text-shadow: 0 0 80px rgba(0, 0, 0, 0.50);
    font-size: 160px;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -1.28px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}


/* 현장 사진도 장식이라 배경으로 넣는다(온라인 히어로와 동일 방식).
   가로는 cover 가 항상 채우므로 50% 하나로 중앙 정렬이 끝난다.
   세로 시안값은 -115px 인데, background-position 의 %는 (밴드높이 - 사진높이) 에
   대해 풀리므로 그 비율로 환산한다. 밴드 폭을 W 라 하면
     사진(1920x783) 이 cover 로 폭에 맞춰 늘어난 높이 = 783/1920 W = 0.4078125 W
     밴드 높이(aspect-ratio 1920/600)                = 0.3125 W
     시안 오프셋                                      = -115/1920 W = -0.0598958 W
     → -0.0598958 / (0.3125 - 0.4078125) = 0.628393
   밴드 비율이 고정이라 W 가 약분돼 어느 폭에서도 시안과 같은 자리가 나온다. */
.auction-about .hero--live {
    background-image: url("../../img/howto/auction-about/live-hero.png");
    background-position: 50% 62.8393%;
    background-size: cover;
    background-repeat: no-repeat;
}


.auction-about .hero--live::after {
    /* 하단으로 어두워지는 오버레이 (시안 40% x 레이어 30%) */
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .12) 100%);
}


/* 태블릿·화면 두 장은 장식 합성 이미지라 배경으로 넣는다.
   background-image 는 앞 레이어가 위에 그려지므로 순서가 마크업과 반대다
   (screen 이 device 위에 얹혀야 하므로 screen 을 먼저 쓴다).
   레이어가 2장이라 cover 를 쓸 수 없어 좌표·크기를 직접 적는다. 밴드 높이가
   600 고정이므로 크기는 시안 px 그대로 두고(세로 %는 폭을 따라가지 않아 늘어난다),
   가로 위치만 밴드 가운데 기준으로 잡아 폭이 줄면 좌우가 같이 잘리게 한다.
     크기 : screen 947x714(마스크 박스) · device 1704x1360 (시안 px)
     가로 : calc(50% + N) 은 (밴드 - 사진) x 0.5 + N 이므로 시안 x 에서 역산한다
       screen  276.5 → 276.5 - (1920 - 947)  / 2 = -210
       device  212   → 212   - (1920 - 1704) / 2 = +104
     세로 : 시안 오프셋 px 그대로 (screen -239.5 · device -487) */
.auction-about .hero--online {
    background-color: var(--intro-hero-surface);
    background-image: url("../../img/howto/auction-about/online-hero-screen.png"),
        url("../../img/howto/auction-about/online-hero-device.png");
    background-position: calc(50% - 210px) -239.5px,
        calc(50% + 104px) -487px;
    background-size: 947px 714px,
        1704px 1360px;
    background-repeat: no-repeat;
}


.auction-about .hero--online::after {
    /* 우측 끝 어두운 띠 */
    content: "";
    position: absolute;
    top: 0;
    left: 99.6875%;
    /* 1914/1920 · 9/1920 — 밴드 폭 기준 */
    width: 0.46875%;
    height: 100%;
    background: var(--intro-hero-edge);
}


/* ---- 섹션 리드 ----------------------------------------------------------- */
.auction-about .intro__lead {
    display: flex;
    margin-top: 80px;
}


.auction-about .intro__lead h3 {
    flex: none;
    width: 51%;
    font-size: 28px;
    line-height: normal;
    letter-spacing: -0.224px;
}


/* ---- 경매 종류 카드 ------------------------------------------------------ */
.auction-about .auction-card {
    display: flex;
    align-items: center;
    gap: min(126px, 10.5%);
    margin-top: 80px;
    padding-top: 80px;
    border-top: 1px solid var(--ka-divider-gray-light);
    /* 경매 카드 앵커(메인 "오늘의 경매" → /HowTo/AuctionIntroduction/{종류}).
       페이지 위에서 아래로 내려가며 착지하므로 헤더는 접히고(ka.common.js) 서브 GNB 만 남는다 —
       그 높이만 띄운다. 헤더가 남아도 위 여백 80 이 덮여 내용은 가려지지 않는다. */
    scroll-margin-top: 56px;
}


/* 온라인 리드는 본문이 한 줄 더 길어 시안상 구분선이 6px 아래에 있다 */
.auction-about .intro__section+.intro__section .auction-card {
    margin-top: 80px;
}


/* .auction-about .intro__section+.intro__section .auction-card~.auction-card {
    margin-top: 80px;
} */


.auction-about .auction-card__media {
    flex: none;
    width: 49%;
    height: auto;
}


.auction-about .auction-card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 40.5%;
}


.auction-about .auction-card__body .desc {
    margin-top: 16px;
}


.auction-about .auction-card__link {
    margin-top: 40px;
    padding-right: 14px;
}


.auction-about .auction-card__link svg {
    width: 16px;
    height: 16px;
}


/* ---- 경매 없을 경우 (Figma `경매소개-경매없을때` 19197:7794) -------------- */
/* 진행 중인 경매가 없으면 `출품작 확인하기` 버튼 자리에 예정 경매 안내를 둔다.
   어느 쪽을 그릴지는 서버가 경매마다 정한다 — 스트립도 그리지 않으므로
   프리미엄 · 위클리 카드 사이 구분선은 `.lot-strip~.intro-inner` 가 걸리지 않아 그대로 남는다. */
.auction-about .auction-card__upcoming {
    width: 100%;
    margin-top: 40px;
    /* 좌우 32 / .auction-card__body 486 */
    padding: 20px 6.5844% 24px;
    border: 1px solid var(--ka-border-gray-lighter);
    border-radius: 6px;
}


.auction-about .auction-card__upcoming-label {
    color: var(--ka-text-secondary);
}


.auction-about .auction-card__upcoming-title {
    margin-top: 12px;
}


/* 라벨 76 + 간격 40 → 값이 116 에서 시작한다.
   라벨이 고정 폭이라 간격도 시안 px 그대로 둔다 — 간격만 폭을 따라가면
   값이 시작하는 자리가 흔들린다. */
.auction-about .auction-card__schedule {
    display: grid;
    grid-template-columns: 76px auto;
    gap: 4px 40px;
    /* dl/dd 는 공통 리셋 대상이 아니라 기본 여백을 여기서 지운다 */
    margin: 16px 0 0;
}


.auction-about .auction-card__schedule dd {
    margin: 0;
}


.auction-about .auction-card__schedule dt {
    color: var(--ka-text-secondary);
}


/* ---- 경매 있는 경우 · 출품작 스트립 (Figma `경매소개-경매있을때` 19197:7661) --- */
/* 진행 중인 경매가 있으면 카드 아래에 출품작이 화면 폭으로 깔린다.
   시안 1920 에서 260 카드 일곱 장(간격 16)이 좌우 2px 만 남기고 꽉 찬다.
   그보다 좁아지면 가로로 밀어서 본다. `.hero` 와 같이 `.intro-inner` 바깥,
   `.intro__section` 직계로 둬야 1200 컨테이너를 벗어난다. */
.auction-about .lot-strip {
    position: relative;
    /* 트랙의 그림자 여백만큼 위아래 간격에서 되돌려, 바깥 간격은 카드 기준이 된다 */
    margin-top: calc(80px - var(--lot-shadow-room));
    margin-bottom: calc(-1 * var(--lot-shadow-room));
}


/* 좌우 끝은 흰색 → 투명 그러데이션으로 흐린다 (시안 120px).
   무한 루프라 끝이 없으므로 항상 켜 둔다. */
.auction-about .lot-strip::before,
.auction-about .lot-strip::after {
    content: "";
    position: absolute;
    /* Swiper 의 `.swiper-wrapper`(z-index 1) 보다 위 */
    z-index: 2;
    top: 0;
    bottom: 0;
    width: 120px;
    pointer-events: none;
}


.auction-about .lot-strip::before {
    left: 0;
    background: linear-gradient(to right, var(--ka-surface-white), rgba(255, 255, 255, 0));
}


.auction-about .lot-strip::after {
    right: 0;
    background: linear-gradient(to left, var(--ka-surface-white), rgba(255, 255, 255, 0));
}


/* 슬라이드 배치·루프·드래그는 Swiper 가 맡는다(auction-about.js).
   뷰포트는 padding box 에서 자르므로, 카드 그림자 여백을 여기에 준다. */
.auction-about .lot-strip__viewport {
    /* 프로젝트 전용 — 원본은 Swiper 11 의 `.swiper` 기본 CSS 가 깔아 주는 값이다.
       _Layout 이 깔아 두는 건 Swiper 5 이고, 그 공용 이름(`.swiper-container` /
       `.swiper-wrapper` / `.swiper-slide`) 위에 ka.fe.css·ka.work.css 의 구 화면 규칙이
       쌓여 있어 그대로 쓰면 카드 폭·높이가 다른 화면 값으로 덮인다.
       그래서 auction-about.js 는 Swiper 에 wrapperClass/slideClass/containerModifierClass 를
       넘겨 공용 이름을 피하고, 대신 배치에 꼭 필요한 값만 여기서 준다. */
    position: relative;
    overflow: hidden;
    padding: var(--lot-shadow-room) 2px;
}


/* 위와 같은 이유 — Swiper 5 의 `.swiper-wrapper` 기본 배치를 직접 준다.
   box-sizing 은 카드 폭 합산(Swiper 가 재는 값)과 맞추기 위해 content-box 다. */
.auction-about .lot-strip__track {
    display: flex;
    box-sizing: content-box;
    height: 100%;
}


/* 스트립은 통째로 끌 수 있는 면이라 카드 위에서도 손 모양을 유지한다.
   링크·버튼의 기본 포인터가 이기지 않도록 자식까지 함께 지정한다.
   끄는 동안의 `is-grabbing` 은 auction-about.js 가 붙인다. */
.auction-about .lot-strip__viewport,
.auction-about .lot-strip__viewport .lot-card__link {
    cursor: grab;
}


.auction-about .lot-strip__viewport.is-grabbing,
.auction-about .lot-strip__viewport.is-grabbing .lot-card__link,
.auction-about .lot-strip__viewport.is-grabbing .lot-card__like {
    cursor: grabbing;
}


/* 흐르는 속도가 일정해야 하므로 가속 곡선을 없앤다 */
.auction-about .lot-strip__track {
    transition-timing-function: linear;
}


/* Swiper 를 못 불러온 경우에만 — 브라우저 기본 가로 스크롤로 되돌린다 */
.auction-about .lot-strip__viewport.is-plain {
    overflow-x: auto;
    scrollbar-width: none;
}


.auction-about .lot-strip__viewport.is-plain::-webkit-scrollbar {
    display: none;
}


.auction-about .lot-strip__viewport.is-plain .lot-strip__track {
    display: flex;
    gap: 16px;
}


/* 끌 때 브라우저 기본 이미지 드래그가 끼어들지 않게 한다 */
.auction-about .lot-card__thumb img {
    -webkit-user-drag: none;
}


/* 스트립 다음 카드는 시안에 구분선이 없고, 스트립과 160(margin 80 + padding 80) 떨어져 있다.
   스트립과 카드 사이에 모바일 전용 버튼 래퍼가 하나 끼므로 인접(+)이 아니라 이후(~)로 찾는다 */
.auction-about .lot-strip~.intro-inner .auction-card {
    margin-top: 80px;
    border-top: 0;
}


/* 모바일 전용 버튼 — 데스크톱에서는 카드 본문 안의 것을 쓴다 (④ 반응형 참고) */
.auction-about .lot-strip__cta {
    display: none;
}

.auction-about .lot-strip__cta svg {
    width: 16px;
    height: 16px;
}

/* ---- 출품작 카드 --------------------------------------------------------- */
.auction-about .lot-card {
    position: relative;
    flex: none;
    width: 260px;
    border-radius: 6px;
    border: 1px solid var(--ka-border-gray-lighter);
    background: var(--ka-surface-white);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.04);
    transition: box-shadow .15s ease;
}


/* 호버는 그림자만 진해진다 (Figma `state=hovered` 19197:7621) */
.auction-about .lot-card:hover,
.auction-about .lot-card:focus-within {
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16);
}


.auction-about .lot-card__link {
    display: block;
    padding: 0 16px 12px;
    color: inherit;
    text-decoration: none;
}


.auction-about .lot-card__top {
    display: flex;
    gap: 12px;
    padding-bottom: 8px;
}


.auction-about .lot-card__thumb {
    flex: none;
    width: 60px;
    height: 60px;
    margin-top: 13px;
    border-radius: 2px;
    background: var(--ka-surface-gray-lighter);
    overflow: hidden;
}


.auction-about .lot-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}


.auction-about .lot-card__text {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
    min-width: 0;
    padding-top: 12px;
}


/* 출품작 카드는 리스트 컴포넌트에서 온 것이라 `.ka-typo--*` 와 자간·줄높이가
   다르다. 대응 클래스가 없어 시안값을 그대로 적는다. */
.auction-about .lot-card__num {
    display: flex;
    align-items: center;
    height: 16px;
    /* 하트 자리 */
    padding-right: 24px;
    font-size: 12px;
    line-height: 15px;
    letter-spacing: -0.36px;
}


.auction-about .lot-card__artist {
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: -0.48px;
}


.auction-about .lot-card__work {
    /* 시안의 본문색 #333 — text 그룹에 대응 토큰이 없어 원시 팔레트를 쓴다
       (--ka-text-gray-darker 는 #4E4E4E 로 한 단계 밝다) */
    color: var(--ka-color-gray-900);
    font-size: 13px;
    line-height: 17px;
    letter-spacing: -0.13px;
}


.auction-about .lot-card__artist,
.auction-about .lot-card__work {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.auction-about .lot-card__price {
    display: block;
    color: var(--ka-text-secondary);
    font-size: 13px;
    font-weight: 500;
    line-height: 17px;
    letter-spacing: -0.13px;
}


.auction-about .lot-card__like {
    position: absolute;
    top: 12px;
    right: 16px;
    width: 16px;
    height: 16px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ka-text-secondary);
    cursor: pointer;
}


.auction-about .lot-card__like svg {
    display: block;
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
}


.auction-about .lot-card__like[aria-pressed="true"] {
    color: var(--ka-text-primary);
}


.auction-about .lot-card__like[aria-pressed="true"] svg {
    fill: currentColor;
}


/* ---- 경매 일정 안내 ------------------------------------------------------ */
.auction-about .schedule {
    position: relative;
    width: 100%;
    margin-top: 160px;
    overflow: hidden;
    /* 사진은 장식이라 배경으로 넣는다. 폭이 넓어져도 빈 곳이 없어야 하는데,
       cover 를 쓰면 1920 에서 원본(2710)이 축소돼 시안보다 넓게 잡힌다.
       그래서 크기를 밴드 폭 기준 %로 준다: 2710 / 1920 = 141.1458%.
       세로 시안값은 -739px 이고, 이 밴드만은 글 길이에 따라 높이가 변해
       (밴드 - 사진) 이 고정이 아니다. 시안 비율(높이 340)에서 환산한
         -739/1920 / (340/1920 - 2710/1920 * 1525/2710) = 62.3646%
       를 그대로 쓴다 → 밴드가 늘어나면 크롭 위치가 조금 내려가지만,
       베일에 덮이는 장식 사진이라 눈에 띄지 않는다. */
    background-color: var(--intro-schedule-surface);
    background-image: url("../../img/howto/auction-about/schedule-bg.png");
    background-position: 0 62.3646%;
    background-size: 141.1458% auto;
    background-repeat: no-repeat;
    /* 시안 340 고정. 글이 길어지면 밴드가 따라 늘어난다 */
    min-height: 340px;
    padding-bottom: 40px;
}


.auction-about .schedule::after {
    /* 글 영역을 덮는 밝은 그러데이션 */
    content: "";
    position: absolute;
    top: 0;
    left: 29.8958%;
    /* 시안 574 (= 574/1920) — 밴드 폭 기준 */
    right: 0;
    /* 넓어지면 오른쪽 끝까지 따라 늘어난다 */
    bottom: 0;
    /* 시안에선 400 인데 밴드(340)보다 커서 아래로 넘간다.
       가로 그러데이션이라 세로로 꽉 채운 결과가 같다. */
    background: linear-gradient(to left,
            rgba(var(--intro-schedule-veil), 1) 66.3%,
            rgba(var(--intro-schedule-veil), 0) 100%);
}


.auction-about .schedule__body {
    position: relative;
    z-index: 1;
    width: 49%;
    margin-left: 51%;
    /* 시안 972 - inner 시작 360 */
    padding-top: 63px;
}


.auction-about .schedule__body .desc {
    margin-top: 16px;
}


.auction-about .schedule__channels {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* 시안 24 / 자기 콘텐츠 폭 524 (= .schedule__body 588 - 좌우 여백 24+40) */
    gap: 4.5802%;
    height: 56px;
    margin-top: 32px;
    /* 좌 24 · 우 40 / .schedule__body 588 */
    padding: 16px 6.8027% 16px 4.0816%;
    border-radius: 4px;
    background: rgba(255, 255, 255, .5);
}

.auction-about .schedule__channels li {
    padding-left: 0;
    line-height: normal;
}

/* 타이포는 조상 `.schedule__channels` 의 `.ka-typo--sm-sb`(14/20/600) 에서 상속된다 */
.auction-about .schedule__channels a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px 10px;
    white-space: nowrap;
    line-height: 20px;
}

.auction-about .schedule__channels a:hover {
    color: var(--ka-text-default)
}


/* ---- 안내 페이지 바로가기 ------------------------------------------------ */
.auction-about .guide-links {
    display: flex;
    /* 시안 24 / 컨테이너 1200 */
    gap: 2%;
    width: min(var(--howto-content), 100% - var(--howto-gutter) * 2);
    /* 시안: 경매 일정 밴드 4645 → 안내 바로가기 4805 */
    margin: 160px auto 0;
}


/* 타이포는 마크업의 `.ka-typo--lg-sb` / `.ka-typo--sm` 가 담당한다.
   색은 시안 #868686 기준 --ka-text-secondary(설명 문구).
   용도표의 "제목 아래 보조 텍스트"(--ka-text-gray-dark #6A6A6A)는 값이 달라 쓰지 않는다. */
.auction-about .guide-link__desc {
    color: var(--ka-text-secondary);
}

/* 시안 여백 */
.bid-guide .guide-links {
    margin-top: 160px;
}

/* =============================================================================
   응찰 안내 — Figma `응찰안내` 1630:2449 (1920x10928) 본문
   공통 리셋·GNB·푸터는 ka.common.css.
   색·버튼·타이포는 디자인 시스템(foundations.css / components.css)을 따른다.
     이 페이지는 Figma 변수가 DS 토큰과 1:1 로 대응한다 —
       heading/lg-sb → .ka-typo--lg-sb / body_label/md-sb → .ka-typo--md-sb
       body_label/md → .ka-typo--md   / body_label/sm    → .ka-typo--sm
       text|surface|divider/* → --ka-text|surface|divider-*
     스케일에 없는 시안 전용 값(48px 타이틀, 28px 스텝명, 16/26 본문)만 여기 남긴다.

   ▶ 스코프 : 모든 규칙을 페이지 최상위 `main.bid-guide` 아래로 한정한다.
     공통 셸은 여러 페이지가 공유하므로 ka.common.css 에서 스코프하지 않는다.
   ========================================================================== */

.bid-guide {
    /* 디자인 시스템에 대응 토큰이 없는 값만 페이지 변수로 둔다 */
    --bid-catalog-surface: #2b3a52;
    /* 도록 배너 배경 — Figma 변수 미연결 raw 색 */
    --bid-content: 1200px;
    /* 시안 고정 컨테이너 (x 360~1560) */
}


/* ---- 본문 공통 타이포 ----------------------------------------------------- */
/* 28/33.41 — 스텝 이름. 스케일에 없는 시안 전용 값 */
.bid-guide .step__name,
.bid-guide .catalog__body h2 {
    font-size: 28px;
    font-weight: 600;
    line-height: 33.41px;
    letter-spacing: -0.224px;
}


/* ---- 히어로 -------------------------------------------------------------- */
/* Figma `응찰안내` 19134:527 — 600 밴드는 화면 폭을 꽉 채우고 배경은 surface/default.
   그 위에 1200x675 영상(이미지)이 가운데·상단 기준으로 놓여 아래 75px 이 잘린다.
   해상도가 넓어지면 미디어 좌우로 배경색이 이어진다. */
.bid-guide .bid-hero {
    width: 100%;
    /* 시안 600 고정 */
    height: 600px;
    margin-top: 80px;
    overflow: hidden;
    background: var(--ka-surface-default);
}


.bid-guide .bid-hero img {
    display: block;
    width: min(var(--bid-content), 100%);
    margin: 0 auto;
    height: auto;
}


/* 시안에는 없고 구 화면에서 이어받은 영상 — 구매 방법 안내(유튜브 임베드).
   영상을 자르면 재생 컨트롤까지 가려지므로, 밴드 높이(600)에 맞추고
   폭은 16:9 비율대로 따라오게 한다 (600 x 16/9 = 1066.67). */
.bid-guide .bid-hero iframe {
    display: block;
    width: auto;
    height: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    margin: 0 auto;
    border: 0;
}


/* ---- 레이아웃 골격 -------------------------------------------------------- */
/* 섹션은 항상 전체 폭(전면 배경을 놓을 수 있게), 가운데 콘텐츠는 .inner 가 맡는다.
   `.inner` 는 이름이 일반적이라 반드시 `.bid-guide` 스코프 안에서만 쓴다. */
.bid-guide .step-inner {
    margin-inline: auto;
    width: min(var(--bid-content), 100% - var(--howto-gutter) * 2);
}


/* ---- 스텝 공통 ----------------------------------------------------------- */
.bid-guide .step {
    width: 100%;
    margin-top: 80px;
}


/* 전면 밴드(프리뷰) 다음 스텝은 시안 간격이 160 이다 (2922 → 3082) */
.bid-guide .step--preview+.step {
    margin-top: 160px;
}


.bid-guide .step__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}


.bid-guide .step__label {
    display: flex;
    align-items: center;
    flex: none;
    gap: 24px;
}


/* 스텝 번호 — 시안 22/26, 스케일에 없음 */
.bid-guide .step__num {
    color: var(--ka-text-default);
    font-size: 16px;
    font-weight: 700;
    line-height: 26px;
}


.bid-guide .step__head .desc {
    width: 49%;
}


/* ---- 스텝 안 2단 블록 ---------------------------------------------------- */
.bid-guide .pair {
    display: flex;
    /* 시안: 588 + 24 → 두 번째 x=972. 24 / 컨테이너 1200 */
    gap: 2%;
    margin-top: 80px;
}


.bid-guide .text-pair {
    /* 시안 64 / 컨테이너 1200 */
    gap: 5.3333%;
}


/* 시안: 이미지쌍 → 본문쌍 20 (1458→1478), 본문쌍 → 이미지쌍 은 기본 80 (3603→3683) */
.bid-guide .pair+.text-pair {
    margin-top: 24px;
}


.bid-guide .pair__media {
    flex: 0 1 49%;
    width: auto;
    height: auto;
    object-fit: cover;
    background: var(--ka-surface-gray-light);
    aspect-ratio: 588 / 300;
    min-width: 0;
}


.bid-guide .pair__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 0 1 45.6667%;
    width: auto;
    /* 시안 본문 폭 */
    min-width: 0;
}


.bid-guide .pair__body .desc {
    margin-top: 12px;
    word-break: keep-all;
}


.bid-guide .pair__link {
    margin-top: 24px;
    padding-right: 14px
}


.bid-guide .pair__link svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}


/* ---- 이미지 + 우측 본문 (04·05 스텝) ------------------------------------- */
.bid-guide .split {
    display: flex;
    align-items: center;
    /* 시안 오프셋 98·111·150 = (520 - 본문높이)/2 */
    margin-top: 80px;
    /* 시안 이미지 x=454 (컨테이너 360 기준) → 94/1200 */
    padding-left: 7.8333%;
    /* 시안: 이미지 454~854, 본문 1074.
       왼쪽 여백을 뺀 콘텐츠 폭(1106) 기준 %라 gap 을 따로 주지 않고
       space-between 이 남는 220 을 그대로 사이 간격으로 만든다. */
    gap: 0;
    justify-content: space-between;
}


.bid-guide .split__media {
    flex: none;
    width: 36.17%;
    height: auto;
    object-fit: cover;
    background: var(--ka-surface-gray-lighter);
    aspect-ratio: 400 / 520;
}


.bid-guide .split__body {
    display: flex;
    flex-direction: column;
    gap: 40px;
    flex: none;
    width: 43.94%;
}


.bid-guide .split__item .desc {
    margin-top: 12px;
}

.bid-guide .split__item a {
    color: var(--ka-text-primary);
}


/* ---- 섹션 내비 ----------------------------------------------------------- */
/* 탭이 아니라 앵커다 — 모든 블록이 페이지에 다 있고, 내비는 해당 블록으로 스크롤한다.
   시안이 같은 헤더를 반복해 그린 이유가 이것이며, 각 블록의 내비는 자기 항목이 활성이다.
   그래서 활성 표시는 마크업에 고정(.is-current)이고 JS 가 필요 없다. */
.bid-guide .step__head--nav {
    justify-content: space-between;
}


.bid-guide .step__nav {
    display: flex;
    gap: 24px;
    /* 시안: 91 + 24 → 두 번째 x=115 */
    /* flex:none 으로 두면 폭이 좁아져도 max-content 를 고집해 스텝명 위쪽을 덮친다.
       줄어들 수 있게 열어 두고, 남는 폭이 부족하면 다음 줄로 넘긴다. */
    flex: 0 1 auto;
    min-width: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
    padding-top: 2.5px;
    /* 시안: 내비가 스텝명보다 2.5px 아래 */
}


/* 타이포는 마크업의 `.ka-typo--lg-sb`(20/28, 시안 heading/lg-sb) */
.bid-guide .step__nav a {
    color: var(--ka-text-disabled);
    transition: color .15s ease;
}


.bid-guide .step__nav a:hover {
    color: var(--ka-text-secondary);
}


.bid-guide .step__nav a.is-current {
    color: var(--ka-text-default);
}


/* 앵커 이동 시 고정 GNB(80) + 서브 GNB(56) 아래에 멈춘다.
   sub-gnb.js 가 이 값을 그대로 읽어 바가 나타나는 기준선으로 쓴다 — 그래서
   첫 앵커(회원가입)로 이동해도 바가 조건에서 벗어나 사라지지 않는다. */
.bid-guide .step {
    scroll-margin-top: 136px;
}


/* 시안 간격 — 내비 헤더(33px) 뒤: 이미지쌍 24 / 이미지+본문 40 */
.bid-guide .step__head--nav+.pair {
    margin-top: 40px;
}


/* 시안 불일치를 그대로 반영 — 라이브 블록은 24(3115→3139)인데
   온라인 블록만 40(4288→4328)이다. 안 맞추면 아래 블록 전체가 16px 밀린다. */
.bid-guide #bid-online .step__head--nav+.pair {
    margin-top: 40px;
}


.bid-guide .step__head--nav+.split {
    margin-top: 40px;
}


/* 블록과 블록 사이는 160 (예: 3082 → 4255 라이브 끝 4095) */
.bid-guide .step+.step {
    margin-top: 160px;
}


/* ---- 소제목 -------------------------------------------------------------- */
/* 타이포는 마크업의 `.ka-typo--md-sb`(16/24, 시안 body_label/md-sb) */
.bid-guide .block-title {
    margin-top: 80px;
}


/* 표 바로 아래 소제목만 40 — 표 아래 리스트(.notice)와 같은 간격이고
   본문 뒤(80)와는 다르다 (시안: 표 끝 9454 → 입금 안내 9494) */
.bid-guide .table+.block-title {
    margin-top: 40px;
}


.bid-guide .block-lead {
    margin-top: 40px;
}


/* 시안: 소제목(24) 바로 아래 리스트는 16, 표 아래 리스트는 40 */
.bid-guide .block-title+.notice {
    margin-top: 16px;
}


/* ---- 표 ------------------------------------------------------------------ */
/* 시안 1630:2652 — 위/아래 2px, 헤더 아래 2px, 본문 행 사이 1px, 셀 사이 세로 1px.
   타이포(16/24)는 마크업의 `.ka-typo--md` 가 담당하고 여기서 다시 쓰지 않는다.
   구분선은 전부 divider/gray(#d7d7d7). 정렬은 가로·세로 모두 가운데.
   헤더 행에는 세로 구분선이 없다(시안 헤더 프레임에 divider 노드 없음). */

.bid-guide .table {
    width: 100%;
    /* 레거시 `.table` (ka.fe.css) 의 margin-top: 5px 도 이 값이 덮는다 */
    margin-top: 40px;
    border-top: 2px solid var(--ka-border-selected);
    border-bottom: 2px solid var(--ka-border-selected);
    border-collapse: collapse;
    /* auto — 열 폭은 아래 % 로 시안 비율을 주고, 영문처럼 쪼갤 수 없는 긴 단어가
       그 폭을 넘으면 해당 열만 넓어진다. fixed 면 글자가 칸 밖으로 넘친다. */
    table-layout: auto;
    color: var(--ka-text-default);
}


.bid-guide .table th,
.bid-guide .table td {
    padding: 14px 12px;
    /* 시안 행 52 = 14 + 24 + 14 */
    font-weight: 400;
    /* <th> UA 기본 bold 를 되돌린다 (크기는 조상 클래스) */
    text-align: center;
    vertical-align: middle;
    /* 행 병합 셀도 세로 가운데 */
    font-size: 16px;
    letter-spacing: -0.128px;
    /* 국문은 어절 단위로만 줄바꿈 — 영문에는 영향 없다 */
    word-break: keep-all;
}

/* 레거시 `.table thead tr th` (ka.fe.css) 의 uppercase · letter-spacing .06em ·
   첫 칸 padding-left 18px !important 를 되돌린다. 디자인 서버에는 ka.fe.css 가 없다. */
.bid-guide .table thead th {
    padding: 12px;
    /* 시안 헤더 48 = 12 + 24 + 12 */
    font-weight: 600;
    text-transform: none;
    border-bottom: 2px solid var(--ka-border-selected);
}

.bid-guide .table thead tr th:first-child {
    padding-left: 12px !important;
}

.bid-guide .table thead th br.mo {
    display: none;
}


/* 가로 구분선 — 행 병합 셀은 자기 그룹 시작 행에서만 선을 받으므로,
   그룹 안 하위 행은 자동으로 부분 선(가운데 열만)이 된다. 시안과 같은 동작. */
.bid-guide .table tbody th,
.bid-guide .table tbody td {
    border-top: 1px solid var(--ka-divider-gray);
}


/* 결제수단 표는 <tbody> 가 둘이다 — 맨 위 행만 헤더 아래 2px 에 선을 겹치지 않는다 */
.bid-guide .table tbody:first-of-type tr:first-child>* {
    border-top: 0;
}


/* 세로 구분선 — 1열은 항상 <th scope="row">, 나머지는 <td> 다.
   td 에만 걸면 행 병합으로 셀이 밀린 행에서도 선이 빠지지 않는다. */
.bid-guide .table td {
    border-left: 1px solid var(--ka-divider-gray);
}


/* 열 폭 — 시안 px 를 1200 기준 % 로 옮겨 헤더 셀에 준다.
   폭을 안 준 열은 글자 길이대로 나눠 가져 균등하지 않으므로 모든 열에 준다.
   모바일은 수수료·결제수단 표만 비율이 달라진다 (④ 반응형). */

/* 시안 282 / 459 / 459 */
.bid-guide .table--fee thead th {
    width: 38.25%;
}

.bid-guide .table--fee thead th:first-child {
    width: 23.5%;
}

/* 시안 180 / 340 / 340 / 340 */
.bid-guide .table--pay thead th {
    width: 28.3333%;
}

.bid-guide .table--pay thead th:first-child {
    width: 15%;
}

/* 시안 400 / 400 / 400 — 헤더 1열이 colspan 이라 폭은 본문 첫 행에서 준다 */
.bid-guide .table--ship thead th:last-child,
.bid-guide .table--ship tbody tr:first-child>* {
    width: 33.3333%;
}

/* 시안 300 × 4 */
.bid-guide .table--install thead th {
    width: 25%;
}

/* 비고 — 데스크톱은 열, 모바일은 행이다 (④ 반응형에서 뒤바뀐다) */
.bid-guide .table__mo {
    display: none;
}


/* 표 앞 간격 — 시안값 그대로 */
.bid-guide .block-title+.table {
    margin-top: 16px;
}


/* 5993 → 6009 */
.bid-guide .split+.table {
    margin-top: 80px;
}


/* 7254 → 7334 */
.bid-guide .block-lead+.table {
    margin-top: 40px;
}

.bid-guide .table__highlight {
    background: var(--ka-surface-gray-lightest);
}

.bid-guide .table .table__border-b {
    border-bottom: 2px solid var(--ka-border-selected);
}


/* 9584 → 9614 */

/* ---- 안내 리스트 --------------------------------------------------------- */
/* 시안 surface/gray-lightest = DS "주의사항 배경" 용도와 정확히 일치 */
.bid-guide .notice {
    margin-top: 40px;
    /* 좌우 40 / 컨테이너 1200 */
    padding: 24px 3.3333%;
    background: var(--ka-surface-gray-lightest);
}


/* 타이포는 조상 `.notice` 의 `.ka-typo--md` 에서 상속된다 (시안 body_label/md) */
.bid-guide .notice li {
    position: relative;
    padding-left: 9.5px;
    color: var(--ka-text-gray-darker);
    word-break: keep-all;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: -0.128px;
}


.bid-guide .notice li+li {
    margin-top: 8px;
}


.bid-guide .notice li::before {
    content: "";
    position: absolute;
    top: 10.25px;
    /* 시안 dot y=10.25 */
    left: 0;
    width: 3.5px;
    height: 3.5px;
    border-radius: 50%;
    background: var(--ka-color-gray-400);
}



/* ---- 02 프리뷰 (배경 이미지 위 오버레이) --------------------------------- */
/* 전시장 사진은 장식이라 배경으로 넣는다.
   높이는 시안대로 600 고정. 폭이 넓어져도 사진을 자르거나 늘리지 않고
   원본 비율(1920x600) 그대로 가운데 두고, 남는 좌우는 사진 가장자리 색을 이어 칠한다.
   가장자리 실측: 상단 ~70% 가 #F5F5F5, 아래로 갈수록 바닥 때문에 #E3E4E6 까지 어두워진다.
   그래서 단색이 아니라 같은 흐름의 세로 그러데이션을 두 번째 레이어로 깐다.
   → 1920 에서는 사진이 밴드를 꽉 채워 그러데이션이 보이지 않는다. */
.bid-guide .step--preview {
    position: relative;
    width: 100%;
    margin-top: 160px;
    overflow: hidden;
    background-image: url("../../img/howto/bid-guide/preview-bg@1.5x.jpg"),
        linear-gradient(180deg, #f5f5f5 0%, #f5f5f5 70%, #e3e4e6 100%);
    background-position: 50% 0, 0 0;
    background-size: auto 100%, 100% 100%;
    background-repeat: no-repeat, no-repeat;
    /* 시안 600 고정. 글이 길어지면 밴드가 따라 늘어난다 */
    min-height: 600px;
    padding-bottom: 80px;
}


.bid-guide .step--preview .step-inner {
    position: relative;
    /* 배경 이미지 위로 올린다 */
    z-index: 1;
    /* 시안 80 */
    padding-top: 80px;
}


/* ---- 도록 구독 배너 ------------------------------------------------------ */
.bid-guide .bid-catalog {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 88px;
    width: 100%;
    margin-top: 160px;
    padding-top: 79px;
    /* 시안: 본문 y=79 */
    background: linear-gradient(0deg, #353A4F 0%, #353A4F 100%), #353A4F;
    color: var(--ka-text-white);
    overflow: hidden;
    /* 시안 340 고정. 글이 길어지면 배너가 따라 늘어난다 */
    min-height: 340px;
    padding-bottom: 60px;
}


.bid-guide .bid-catalog .step-inner {
    display: flex;
    justify-content: space-between;
}


.bid-guide .catalog__books {
    display: flex;
    gap: -6px;
    flex: 0 1 45.1667%;
    transform: translateX(-10px);
    min-width: 0;
}


.bid-guide .catalog__books img {
    width: 25.83%;
    height: auto;
    margin-right: -1.1%;
    /* 시안: 표지 간격 134 (140 겹침) */
    object-fit: cover;
    aspect-ratio: 140 / 201;
    transform: translateX(-8px);
}


.bid-guide .catalog__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: none;
    width: 49%;
}

.bid-guide .catalog__body h2 {
    color: var(--ka-text-white);
}


.bid-guide .catalog__body .desc {
    margin-top: 16px;
}


.bid-guide .catalog__link {
    margin-top: 40px;
    padding-right: 14px;
}


.bid-guide .catalog__link svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}




/* =============================================================================
   위탁 안내 — Figma `위탁안내` 19134:956 (1920x8214) 본문
   색·버튼·타이포는 디자인 시스템(ds/ka.foundations.css / ds/ka.components.css)을 따른다.
     이 페이지도 Figma 변수가 DS 토큰과 1:1 로 대응한다 —
       heading/xl-sb → .ka-typo--xl-sb    / heading/lg-sb   → .ka-typo--lg-sb
       body_label/md-sb → .ka-typo--md-sb / body_label/md   → .ka-typo--md
       text|surface|divider|border/* → --ka-text|surface|divider|border-*
     스케일에 없는 시안 전용 값(28px 섹션명 등)만 여기 남긴다.
     48px 타이틀과 본문 16/26 은 이제 `.howto2` 공통이 이미 맡는다.

   ▶ 스코프 : 모든 규칙을 페이지 최상위 `.consign-guide` 아래로 한정한다.

   고정 1920 시안이라 세로 간격은 시안 좌표에서 계산한 값을 그대로 쓴다.
   ========================================================================== */

.consign-guide {
    /* 시안 고정 컨테이너 (x 360~1560) */
    --consign-content: 1200px;
}


/* ---- 본문 공통 타이포 ----------------------------------------------------- */
/* 28/33.41 — 섹션명(Why K Auction? · 괄목할만한 경매 결과 · 위탁절차).
   스케일에 없는 시안 전용 값 */
.consign-guide .section-title {
    font-size: 28px;
    font-weight: 600;
    line-height: 33.41px;
    letter-spacing: -0.224px;
}

/* ---- 레이아웃 골격 -------------------------------------------------------- */
/* 섹션은 항상 전체 폭(전면 배경을 놓을 수 있게), 가운데 콘텐츠는 .consign-inner 가 맡는다.
   이름을 길게 둔 이유는 형제 페이지의 `.inner` / `.step-inner` 와 섞이지 않게 하려는 것이다. */
.consign-guide .consign-inner {
    width: min(var(--consign-content), 100% - var(--howto-gutter) * 2);
    margin-inline: auto;
}


/* ---- 페이지 머리 --------------------------------------------------------- */
/* 시안에서 이 페이지만 형제 페이지 탭이 없고 제목이 머리 맨 위에 온다.
   (탭 자리에 CTA 버튼이 들어가고, 형제 페이지 이동은 하단 안내 바로가기가 맡는다) */
.consign-guide .intro__cta {
    margin-top: 40px;
}


/* ---- 히어로 -------------------------------------------------------------- */
/* 시안: 1920x600 밴드 가운데 1067x600(16:9) 영상. 재생 컨트롤까지 다 보이도록
   밴드 높이에 맞추고 폭은 비율대로 따라온다. 해상도가 넓어지면 좌우로 배경색이 이어진다. */
.consign-guide .consign-hero {
    width: 100%;
    /* 시안 600 고정 */
    height: 600px;
    margin-top: 80px;
    overflow: hidden;
    background: var(--ka-surface-default);
}


/* 위탁 안내 영상(유튜브 임베드, `Config.ConsignGuideYoutubeUrl`) — 응찰 안내 히어로와 같은 방식이다.
   600 x 16/9 = 1066.67 */
.consign-guide .consign-hero iframe {
    display: block;
    width: auto;
    height: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    margin: 0 auto;
    border: 0;
}


/* 서브 GNB 앵커(Why K Auction? · 위탁 절차)가 멈출 자리 — 고정 GNB(80) + 서브 GNB(56) 아래.
   sub-gnb.js 가 첫 앵커 대상(.why)의 이 값을 바가 나타나는 기준선으로 쓴다 —
   그래서 첫 앵커로 이동해도 바가 조건에서 벗어나 사라지지 않는다.
   ▶ 프로젝트 전용 — 원본은 `calc(var(--howto-header-h) + 56px)` 지만 _Layout 의 헤더는
     그 변수를 보내지 않으므로 응찰 안내(.bid-guide .step)와 같이 헤더 높이를 직접 적는다. */
.consign-guide .why,
.consign-guide .step {
    scroll-margin-top: 136px;
}


/* ---- Why K Auction? ------------------------------------------------------ */
.consign-guide .why {
    width: 100%;
    margin-top: 80px;
}


/* 섹션명 왼쪽, 리드 문장 오른쪽 (시안 x=972, 폭 588) */
.consign-guide .section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}


.consign-guide .section-head .desc {
    width: 49%;
}


.consign-guide .feature-list {
    margin-top: 80px;
    padding-top: 80px;
    border-top: 1px solid var(--ka-divider-gray-light);
}


/* 이미지 588 + 여백 126 + 본문 486 = 1200 */
.consign-guide .feature {
    display: flex;
    align-items: center;
    gap: min(126px, 10.5%);
    padding-left: 0;
}


.consign-guide .feature+.feature {
    margin-top: 160px;
}


/* 모바일(768 이하)은 시안 전용 이미지로 바꾼다 — <picture> 는 자리를 차지하지 않고 img 가 그대로 flex 항목이 된다 */
.consign-guide .feature picture {
    display: contents;
}


/* picture 가 지워지면 <source> 도 빈 flex 항목이 되어 gap 이 한 번 더 붙는다(본문이 오른쪽으로 밀려 잘림) */
.consign-guide .feature source {
    display: none;
}


.consign-guide .feature__media {
    flex: none;
    width: 49%;
    height: auto;
    object-fit: cover;
    background: var(--ka-surface-gray-lighter);
    aspect-ratio: 588 / 380;
}


.consign-guide .feature__body {
    flex: none;
    width: 40.5%;
}


/* 타이포는 마크업의 `.ka-typo--xl-sb`(24/32, 시안 heading/xl-sb) */
.consign-guide .feature__body .desc {
    margin-top: 12px;
}


/* 모바일 시안에만 있는 줄바꿈 */
.consign-guide br.mo {
    display: none;
}


/* ---- 괄목할만한 경매 결과 ------------------------------------------------ */
.consign-guide .results {
    width: 100%;
    margin-top: 160px;
    padding: 80px 0 100px;
    background: var(--ka-surface-gray-lighter);
}


.consign-guide .results__title {
    text-align: center;
}


/* 588 그룹 두 개 — 라벨 하나가 카드 두 장을 덮는다.
   라벨 문구 길이가 서로 달라 한쪽만 두 줄이 되는데, 그래도 두 라벨의 높이는 같아야 한다.
   그래서 그룹에 값을 새겨 넣지 않고 바깥 그리드의 행(1 라벨 · 2 카드)을 subgrid 로
   같이 쓰게 한다 → 1행 높이가 두 라벨 중 큰 쪽으로 한 번에 정해진다.
   (subgrid 를 모르는 브라우저는 이 선언만 버리고 그룹별로 쌓는 안전 동작이 된다) */
.consign-guide .results__groups {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto;
    /* 시안 24 / 컨테이너 1200 */
    column-gap: 2%;
    margin-top: 40px;
}


.consign-guide .results__group {
    display: grid;
    grid-row: 1 / span 2;
    grid-template-rows: subgrid;
    /* 시안: 라벨 → 카드 20 */
    row-gap: 20px;
}


/* 타이포는 마크업의 `.ka-typo--md-sb`(16/24, 시안 body_label/md-sb).
   navy-1000 은 대응하는 시맨틱 토큰이 없어 원시 팔레트를 쓴다. */
.consign-guide .results__label {
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--ka-color-navy-1000);
    color: var(--ka-text-white);
    padding: 9px 16px;
    /* 두 줄로 접혔을 때 둘째 줄도 가운데로 */
    text-align: center;
}


.consign-guide .results__cards {
    display: flex;
    /* 시안 16 / 그룹 폭 588 (= (1200 - 24) / 2) */
    gap: 2.7211%;
}


/* flex 항목의 기본 최소 폭(auto)은 이미지 폭을 따라간다 — 이미지가 로드에 실패하면
   width 속성(186 등)이 그대로 최소 폭이 되어 두 카드 폭이 어긋나므로 0 으로 푼다 */
.consign-guide .results__card {
    flex: 1;
    min-width: 0;
    background: var(--ka-surface-white);
    box-shadow: 4px 4px 20px 0 rgba(0, 0, 0, 0.08);
    padding-left: 0;
}


/* 시안: 286x264 액자 안에 여백 12 — 회색 면은 여백 안쪽(262x240)에만 깔린다 */
.consign-guide .results__thumb {
    --results-thumb-pad: 12px;
    position: relative;
    height: auto;
    padding: var(--results-thumb-pad);
    background: var(--ka-surface-gray-lighter);
    background-clip: content-box;
    aspect-ratio: 286 / 264;
}


/* 이미지를 흐름에서 빼 액자 안쪽을 채우고 contain 으로 가운데 맞춘다.
   흐름 안에 두고 max-height: 100% 로 가두면 iOS Safari 가 aspect-ratio 높이를 기준으로
   못 잡아, 세로 긴 작품이 폭에 맞춰 커지면서 액자까지 세로로 늘어난다. */
.consign-guide .results__thumb img {
    position: absolute;
    top: var(--results-thumb-pad);
    left: var(--results-thumb-pad);
    width: calc(100% - var(--results-thumb-pad) * 2);
    height: calc(100% - var(--results-thumb-pad) * 2);
    object-fit: contain;
}


.consign-guide .results__body {
    padding: 12px 24px 24px;
}


/* 타이포는 마크업의 `.ka-typo--lg-sb`(20/28, 시안 heading/lg-sb) */
.consign-guide .results__meta {
    margin-top: 16px;
}


.consign-guide .results__date {
    color: var(--ka-text-secondary);
}


/* ---- 위탁절차 ------------------------------------------------------------ */
.consign-guide .step {
    width: 100%;
    margin-top: 160px;
}


.consign-guide .step__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    /* 내비가 여러 줄로 넘어가면 섹션명과의 간격이 붙는다. 24 / 컨테이너 1200 */
    gap: 2%;
}


/* 탭이 아니라 앵커다 — 네 블록이 페이지에 다 있고, 내비는 해당 블록으로 스크롤한다.
   시안이 같은 헤더를 네 번 그린 이유가 이것이며, 각 블록의 내비는 자기 항목이 활성이다.
   그래서 활성 표시는 마크업에 고정(.is-current)이고 JS 가 필요 없다. */
.consign-guide .step__nav {
    display: flex;
    align-items: center;
    gap: 16px;
    /* flex:none 으로 두면 폭이 좁아져도 max-content 를 고집해 섹션명 위쪽을 덮친다.
       항목이 넷이라 영문에서는 1200 컨테이너에서도 아슬아슬하다.
       줄어들 수 있게 열어 두고, 남는 폭이 부족하면 다음 줄로 넘긴다. */
    flex: 0 1 auto;
    min-width: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
    /* 시안: 내비가 섹션명보다 2.5px 아래 */
    padding-top: 2.5px;
}


/* 타이포는 마크업의 `.ka-typo--lg-sb`(20/28, 시안 heading/lg-sb) */
.consign-guide .step__nav a {
    color: var(--ka-text-disabled);
    transition: color .15s ease;
}


.consign-guide .step__nav a:hover {
    color: var(--ka-text-secondary);
}


.consign-guide .step__nav a.is-current {
    color: var(--ka-text-default);
}


.consign-guide .step__nav-sep {
    flex: none;
    width: 8px;
    height: 12px;
    color: var(--ka-text-disabled);
}


/* ---- 이미지 + 우측 본문 -------------------------------------------------- */
.consign-guide .split {
    display: flex;
    /* 시안: 본문이 이미지 높이 가운데에 온다 */
    align-items: center;
    margin-top: 40px;
    /* 시안 이미지 x=454 (컨테이너 360 기준) → 94/1200 */
    padding-left: 7.8333%;
    /* 시안: 이미지 454~854, 본문 1074.
       왼쪽 여백을 뺀 콘텐츠 폭(1106) 기준 %라 gap 을 따로 주지 않고
       space-between 이 남는 220 을 그대로 사이 간격으로 만든다. */
    gap: 0;
    justify-content: space-between;
}


.consign-guide .split__media {
    flex: none;
    width: 36.17%;
    height: auto;
    object-fit: cover;
    background: var(--ka-surface-gray-lighter);
    aspect-ratio: 400 / 520;
}


.consign-guide .split__body {
    display: flex;
    flex-direction: column;
    gap: 40px;
    flex: none;
    width: 43.94%;
}


/* ---- 아이콘 + 제목 + 설명 블록 ------------------------------------------- */
.consign-guide .info-block__head {
    display: flex;
    align-items: center;
    /* 시안 16 / .split__body 527.28 (= 1200 * 43.94%) */
    gap: 16px;
    height: 40px;
}


.consign-guide .info-block__icon {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    border: 1px solid var(--ka-color-gray-150);
    /* 시안에선 원형이다 (프로세스 카드의 8px 라운드와 다르다) */
    border-radius: 50%;
    background: var(--ka-surface-gray-lightest);
    color: var(--ka-text-default);
}


.consign-guide .info-block__icon svg {
    width: 20px;
    height: 20px;
}


.consign-guide .info-block__desc {
    margin-top: 10px;
}


/* ---- 글머리 목록 --------------------------------------------------------- */
/* 타이포는 마크업의 `.ka-typo--md`(16/24, 시안 body_label/md).
   `.bullets` 는 본문 안(배경 없음), `.notice` 는 회색 박스 안에 쓴다. */
.consign-guide .bullets {
    margin-top: 10px;
}


.consign-guide .bullets li,
.consign-guide .notice li {
    position: relative;
    /* 시안: dot 3.5 + 여백 6 */
    padding-left: 9.5px;
    color: var(--ka-text-gray-darker);
}


.consign-guide .bullets li+li,
.consign-guide .notice li+li {
    margin-top: 8px;
}


.consign-guide .bullets li::before,
.consign-guide .notice li::before {
    content: "";
    position: absolute;
    /* 시안 dot y=10.25 */
    top: 10.25px;
    left: 0;
    width: 3.5px;
    height: 3.5px;
    border-radius: 50%;
    /* 시안에서 dot 은 본문(gray-darker)보다 옅은 gray-400 이다 */
    background: var(--ka-color-gray-400);
}


/* 시안 surface/gray-lightest = DS "주의사항 배경" 용도와 정확히 일치 */
.consign-guide .notice {
    margin-top: 80px;
    /* 좌우 40 / 컨테이너 1200 */
    padding: 24px 3.3333%;
    background: var(--ka-surface-gray-lightest);
}


/* ---- 위탁 진행 4단계 카드 ------------------------------------------------ */
.consign-guide .process {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 열 간격 16 / .split__body 527.28 — 행 간격은 세로라 px 로 둔다 */
    gap: 16px 3.0344%;
}


.consign-guide .process__item {
    /* 시안 안쪽 여백 21 = 보더 1 + 20 */
    padding: 20px;
    border: 1px solid var(--ka-border-gray-lightest);
    border-radius: 8px;
    background: var(--ka-surface-gray-lightest);
}

.consign-guide .process__icon {
    display: block;
    width: 24px;
    height: 24px;
    color: var(--ka-text-default);
}

/* 시안에서 번호와 이름은 서체가 다르다 — 둘 다 Medium(500) 이지만
   번호는 15/23(= body/2), 이름은 16/26 이다. 스케일에 없어 값을 직접 쓴다. */
.consign-guide .process__label {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    font-weight: 500;
    color: var(--ka-text-default);
}

.consign-guide .process__num {
    font-size: 15px;
    line-height: 23px;
    letter-spacing: -0.12px;
    transform: translateY(1px);
}


.consign-guide .process__name {
    font-size: 16px;
    line-height: 26px;
    letter-spacing: -0.128px;
}

/* ---- 위탁 대금 산식 ------------------------------------------------------ */
/* 산식(lg-sb 20/28) 옆 괄호 문구(md 16)를 세로 가운데에 맞춘다.
   top 이면 1.5px 뜨고 middle 이면 2px 처진다 — .1em 올리면 두 글자 높이의 중심이 맞는다
   (차이 0.1px, 1300 · 375 폭 실측). */
.consign-guide .formula__note {
    color: var(--ka-text-secondary);
    line-height: 26px;
    vertical-align: .1em;
    margin-left: 2px;
}

/* ---- 위탁문의 신청 버튼 · 안내 페이지 바로가기 --------------------------- */
.consign-guide .consign-apply {
    margin-top: 160px;
    text-align: center;
}

/* 시안 여백 */
.consign-guide .guide-links {
    margin-top: 160px;
}


/* ---- 우측 하단 위탁문의 바로가기 ----------------------------------------- */
/* 시안: 40 원형 버튼이 화면 오른쪽 16 · 아래 32 에 붙고, 그 위 14 에 말풍선이 뜬다.
   말풍선 꼬리는 버튼 가운데를 가리킨다. GNB 보다는 아래에 둔다.
   ▶ 프로젝트 전용 — 시안의 "맨 위로" 버튼은 _Layout 의 공용 버튼(`.quick-menu-cnt`
     안의 `#alltop-btn`)이 이미 같은 모양·같은 동작(위로 올릴 때만 뜬다)으로 있으므로
     새로 만들지 않고 그 버튼과 자리를 맞춘다. 공용 버튼은 오른쪽 16 · 아래 30 이고
     모바일 하단 메뉴가 떠 있으면(body.is-bottom-menu) 그 메뉴를 피해 아래 68 로 올라간다
     — 바로가기도 같은 줄에 선다. */
.consign-guide .consign-quick {
    position: fixed;
    right: 16px;
    bottom: 30px;
    z-index: 90;
    /* 모바일은 맨 위로 버튼이 뜨면 한 칸 올라간다 — 맨 위로 버튼 슬라이드(.3s)와 맞춘다 */
    transition: bottom .3s ease;
}


/* 맨 위로 버튼은 이 버튼 왼쪽에 선다
   (`위탁안내 (스크롤업)` 19510:7833 — 40 + 간격 8 → 오른쪽 64).
   공용 버튼은 이 페이지 바깥(_Layout)에 있어 형제 선택자가 닿지 않으므로 :has 로 잡는다.
   다른 페이지처럼 옆에서 미끄러져 들어오되, 이 페이지는 출발점이 화면 밖이 아니라
   바로가기 자리(오른쪽 16)다 — 바로가기 뒤에 겹쳐 있다가 왼쪽으로 빠져 나온다.
   그래서 `.hide` 동안에는 바로가기(z-index 90)보다 아래에 깔고, 반투명한
   바로가기 배경(흰색 90%) 너머로 비치지 않도록 투명도도 같이 준다. */
body:has(.consign-guide .consign-quick) .quick-menu-cnt {
    right: 64px;
    z-index: 89;
    opacity: 1;
    visibility: visible;
    transition: right .3s ease, bottom .3s ease, transform .3s ease, opacity .3s ease, visibility 0s;
}


/* 숨은 동안에는 바로가기와 겹쳐 있으므로 클릭까지 막는다 */
body:has(.consign-guide .consign-quick) .quick-menu-cnt.hide {
    right: 16px;
    transform: none;
    opacity: 0;
    visibility: hidden;
    transition: right .3s ease, bottom .3s ease, transform .3s ease, opacity .3s ease, visibility 0s linear .3s;
}


/* 뒤로가기 버튼(_Layout `.back-btn`)도 맨 위로 버튼과 같은 박자로 들어오게 맞춘다.
   공용처럼 화면 밖에서 미끄러져 들어오면 비치기 시작하는 맨 위로 버튼과 박자가 어긋난다.
   그래서 출발점만 바꿔 같은 거리(48)를 미끄러지며 같이 비친다 — 속도·투명도 전환은
   공용 `.back-btn`(ka.home.css) 것을 그대로 쓴다. visibility 는 ka.main.js 가
   인라인으로 켜 두므로 숨은 동안의 클릭은 pointer-events 로 막는다. */
body:has(.consign-guide .consign-quick) .back-btn.active {
    left: -32px;
    transform: none;
    opacity: 0;
    pointer-events: none;
}


.consign-guide .consign-quick__btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--ka-border-gray-lightest);
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    color: var(--ka-text-default);
    transition: border-color .15s ease;
}


/* 호버 시 보더만 한 단계 진하게 */
.consign-guide .consign-quick__btn:hover,
.consign-guide .consign-quick__btn:focus-visible {
    border-color: var(--ka-border-gray);
}


.consign-guide .consign-quick__btn svg {
    width: 18px;
}


/* 타이포는 마크업의 `.ka-typo--sm-medium`(14/20) */
.consign-guide .consign-quick__tip {
    position: absolute;
    right: 0;
    bottom: calc(100% + 14px);
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 8px 10px 8px 12px;
    border-radius: 8px;
    background: var(--ka-surface-primary);
    color: var(--ka-text-white);
    white-space: nowrap;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .08));
    /* 말풍선 어디를 눌러도 닫힌다 (consign-guide.js) */
    cursor: pointer;
    transition: opacity .3s ease, transform .3s ease;
}

/* 문구 하이라이트 (Figma 메모 260921, 19788:45635)
   흰색 60% 글자 위로 80 폭 흰 띠가 좌우로 오간다. 아이콘·말풍선에 호버하면 멈추고 흰색 100% */
.consign-guide .consign-quick__tip span {
    color: var(--ka-text-white);
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .7) 20%, #fff 50%, rgba(255, 255, 255, .7) 80%, rgba(255, 255, 255, 0)) -60px 0 / 80px 100% no-repeat,
        linear-gradient(rgba(255, 255, 255, .6), rgba(255, 255, 255, .6));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: consign-quick-shine 1.6s ease-in-out infinite alternate;
}


.consign-guide .consign-quick:hover .consign-quick__tip span {
    background: none;
    -webkit-text-fill-color: currentColor;
    animation: none;
}


@keyframes consign-quick-shine {
    to {
        background-position: calc(100% + 60px) 0, 0 0;
    }
}


/* 누르면 사라진다 — 페이드가 끝나면 consign-guide.js 가 hidden 을 붙인다 */
.consign-guide .consign-quick__tip.is-leaving {
    opacity: 0;
    transform: translateY(4px);
    pointer-events: none;
}


.consign-guide .consign-quick__tip[hidden] {
    display: none;
}


@media (prefers-reduced-motion: reduce) {
    .consign-guide .consign-quick__tip {
        transition: none;
    }

    .consign-guide .consign-quick__tip span {
        background: none;
        -webkit-text-fill-color: currentColor;
        animation: none;
    }
}


/* 꼬리 16x12 — 말풍선 아래로 6 튀어나오고, 오른쪽 12 에서 버튼 중심(20)을 가리킨다 */
.consign-guide .consign-quick__tip::after {
    content: "";
    position: absolute;
    right: 12px;
    bottom: -6px;
    width: 16px;
    height: 12px;
    background: inherit;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}


.consign-guide .consign-quick__close {
    position: relative;
    display: block;
    width: 12px;
    height: 12px;
    color: inherit;
}


/* 12px 아이콘은 누르기 어려워 터치 영역만 넓힌다 */
.consign-guide .consign-quick__close::before {
    content: "";
    position: absolute;
    inset: -8px;
}


.consign-guide .consign-quick__close svg {
    display: block;
    width: 12px;
    height: 12px;
}


/* 공용 맨 위로 버튼과 같이 모바일 하단 메뉴를 피해 올라간다(ka.home.css) */
body.is-bottom-menu .consign-guide .consign-quick {
    bottom: 68px;
}


/* 데스크톱 줄맞춤용 <br> — 본문이 줄어드는 1200 부터는 줄바꿈 자리가 맞지 않아 흘려보낸다.
   모바일 시안에만 있는 줄바꿈(br.mo)은 대상이 아니다 (768 이하에서 켠다) */
@media (max-width: 1200px) {

    .auction-about .desc br,
    .bid-guide .desc br,
    .consign-guide .section-head .desc br:not(.mo),
    .consign-guide .split br,
    .consign-guide .feature__body .desc br:not(.mo) {
        display: none;
    }
}


/* 채널 바가 좁아지면 영문 라벨(KakaoTalk Channel 등)이 바 밖으로 밀려난다 —
   아이콘을 라벨 위로 올려 한 항목의 폭을 라벨 폭만큼으로 줄인다. 768 이하는 2x2 그리드. */
@media (min-width: 769px) and (max-width: 1200px) {
    .auction-about .schedule__channels {
        height: auto;
    }

    .auction-about .schedule__channels a {
        flex-direction: column;
    }
}


/* 그래도 넘치는 폭(약 830 이하)은 모바일처럼 2x2 로 나눈다 */
@media (min-width: 769px) and (max-width: 900px) {
    .auction-about .schedule__channels {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}


/* =============================================================================
   ④ 반응형 — 모바일 본문
   Figma `경매소개-경매있을때` 19214:11003 (375 기준, 좌우 여백 20 → 본문 335)

   768 이하에서 데스크톱 2단을 세로로 풀고 시안값으로 갈아끼운다. GNB·푸터는
   모바일 전용 컴포넌트가 따로 있어 이 절에서 다루지 않는다(공통 셸).

   시안의 세로 간격은 단순하다 — 큰 덩어리 사이 120, 이미지→본문 24,
   본문→출품작 40, 출품작→버튼 40. 데스크톱에 있던 카드 위 구분선은 없다.
   ========================================================================== */
@media (max-width: 768px) {
    .ka-container {
        padding-top: 56px;
    }

    /* ---- 서브 GNB — 시안 375x42 (`응찰안내 (스크롤다운)` 19402:102616) ---- */
    .howto2 .sub-gnb {
        height: 42px;
    }

    /* 경매 카드 앵커 착지 — 서브 GNB 높이를 따라간다 (데스크톱 규칙 참고) */
    .auction-about .auction-card {
        scroll-margin-top: 42px;
    }

    /* 시안 body_label/sm-sb — 데스크톱 15/23 에서 내려온다 */
    .howto2 .sub-gnb__page-btn {
        font-size: 14px;
        line-height: 20px;
        letter-spacing: -0.112px;
    }

    /* 현재 앵커(왼쪽)와 다음 앵커(오른쪽) 두 개만 보인다 — 어느 둘인지는 sub-gnb.js 가 정한다.
       두 앵커가 바 폭을 넘기면 말줄임으로 자른다. */
    .howto2 .sub-gnb__anchors {
        gap: 16px;
        min-width: 0;
        margin-left: 16px;
    }

    .howto2 .sub-gnb__anchors li {
        display: none;
    }

    .howto2 .sub-gnb__anchors li.is-shown {
        display: block;
        flex: 0 1 auto;
        min-width: 0;
    }

    .howto2 .sub-gnb__anchors li.is-shown a {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .howto2 .sub-gnb__anchors a {
        font-size: 14px;
        line-height: 20px;
        letter-spacing: -0.112px;
    }

    /* 영문은 앵커 이름이 길어 두 개만 보여도 바를 넘긴다 — 말줄임 대신 가로 스크롤로 넘겨 본다.
       스크롤바는 42 바 안에 자리가 없어 감춘다 (짝이 바뀌면 sub-gnb.js 가 맨 앞으로 되돌린다) */
    html:lang(en) .howto2 .sub-gnb__anchors {
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    html:lang(en) .howto2 .sub-gnb__anchors::-webkit-scrollbar {
        display: none;
    }

    html:lang(en) .howto2 .sub-gnb__anchors li.is-shown {
        flex: none;
    }

    html:lang(en) .howto2 .sub-gnb__anchors li.is-shown a {
        overflow: visible;
        text-overflow: clip;
    }

    /* ---- 페이지 머리 ---------------------------------------------------- */
    .howto2 .intro__head {
        /* 시안: 상단 바 112 → 제목 144 */
        margin-top: 32px;
    }

    .howto2 .intro__title {
        font-size: 32px;
    }

    /* ---- 히어로 — 시안 375x400 ------------------------------------------ */
    .auction-about .hero {
        height: 400px;
        /* 시안: 제목 끝 182 → 히어로 222 */
        margin-top: 40px;
    }

    /* 시안: 앞 버튼 끝 1588 → 온라인 히어로 1708 */
    .auction-about .intro__section+.intro__section .hero {
        margin-top: 120px;
    }

    /* 시안 88 (데스크톱 160). 자간은 em 이라 따라 줄어든다 */
    .auction-about .hero__label {
        font-size: 88px;
    }

    .auction-about .desc {
        word-break: break-all;
    }

    /* 영문은 break-all 이면 단어 중간이 잘려 읽히지 않으므로 기본 줄바꿈으로 되돌린다.
       (_Layout 이 영문일 때 <html lang="en-US"> 를 준다) */
    html:lang(en) .auction-about .desc {
        word-break: normal;
    }

    /* 온라인 히어로 — 데스크톱은 태블릿·화면 두 장을 합성하지만 모바일 시안은
       사진 한 장이다. 우측 끝 어두운 띠도 모바일 시안에는 없다.
       사진 1195.184x950 을 (-348, -319) 에 놓는다:
         가로 calc(50% + N) = (375 - 1195.184) / 2 + N = -348  →  N = +62 */
    .auction-about .hero--online {
        background-color: #ccc;
        background-image: url("../../img/howto/auction-about/online-hero-mobile.jpg");
        background-position: calc(50% + 62px) -319px;
        background-size: 1195.184px 950px;
    }

    .auction-about .hero--online::after {
        display: none;
    }

    /* ---- 섹션 리드 — 제목 위, 설명 아래 --------------------------------- */
    .auction-about .intro__lead {
        flex-direction: column;
        margin-top: 40px;
    }

    /* 시안 heading/xl-sb — 데스크톱 28 에서 내려온다 */
    .auction-about .intro__lead h3 {
        width: auto;
        font-size: 24px;
        line-height: 32px;
        letter-spacing: -0.192px;
    }

    .auction-about .intro__lead .desc {
        margin-top: 12px;
    }

    /* ---- 경매 종류 카드 — 이미지 위, 본문 아래 -------------------------- */
    .auction-about .auction-card,
    .auction-about .intro__section+.intro__section .auction-card,
    .auction-about .lot-strip~.intro-inner .auction-card {
        display: block;
        /* 시안: 앞 블록에서 120, 구분선 없음 */
        margin-top: 120px;
        padding-top: 0;
        border-top: 0;
    }

    .auction-about .auction-card__media {
        display: block;
        width: 100%;
    }

    .auction-about .auction-card__body {
        width: 100%;
        /* 시안: 이미지 → 본문 24 */
        margin-top: 24px;
    }

    .auction-about .auction-card__type {
        margin-bottom: 12px;
    }

    .auction-about .auction-card__body .desc {
        margin-top: 12px;
    }

    /* ---- 예정 경매 (경매 없을 경우) — 시안 335x166 ---------------------- */
    /* 좌우 여백만 데스크톱(본문 폭의 6.5844% = 32)에서 시안 20 으로 바뀐다.
       위아래 여백·테두리·안쪽 간격·일정 타이포는 데스크톱과 같은 값이다.
       카드 안 폭이 293 이라 일정의 값 칸은 293 - 76 - 40 = 177 이 남는다. */
    .auction-about .auction-card__upcoming {
        padding-inline: 20px;
    }

    /* ---- 출품작 스트립과 버튼 ------------------------------------------- */
    /* 시안에서 버튼이 스트립 뒤로 내려간다. 부모가 달라 CSS 로는 옮길 수 없어
       마크업에 둘 다 두고 여기서 바꿔 단다. */
    .auction-about .auction-card__link {
        display: none;
    }

    .auction-about .lot-strip {
        margin-top: calc(40px - var(--lot-shadow-room));
    }

    .auction-about .lot-strip__cta {
        display: inline-flex;
        width: 100%;
        margin-top: 40px;
        padding-right: 14px;
    }

    /* ---- 경매 일정 안내 -------------------------------------------------- */
    /* 시안 375x604 — 사진 1196x673(폭이 375 의 318.9333%)을 (0, -277) 에 놓는다.
       시안은 사진을 좌우로 뒤집어 쓰는데 schedule-bg.png 가 이미 그 방향이라
       그대로 얹으면 된다 — 손과 노트가 있는 왼쪽 끝이 밴드에 들어온다. */
    .auction-about .schedule {
        margin-top: 120px;
        min-height: 604px;
        padding-bottom: 80px;
        background-position: 0 -277px;
        background-size: 318.9333% auto;
    }

    /* 밝은 베일이 가로가 아니라 세로로 깔린다 (시안: y=108 부터) */
    .auction-about .schedule::after {
        top: 108px;
        left: 0;
        background: linear-gradient(to bottom,
                rgba(var(--intro-schedule-veil), 0) 0%,
                rgba(var(--intro-schedule-veil), 1) 33.7%);
    }

    .auction-about .schedule__body {
        width: 100%;
        margin-left: 0;
        /* 시안: 밴드 상단에서 240 */
        padding-top: 240px;
    }

    .auction-about .schedule__body .desc {
        margin-top: 12px;
    }

    /* 채널 넷을 2x2 로 — 시안 335x96, 좌우 20 / 상하 16, 행 간격 24 */
    .auction-about .schedule__channels {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px 16px;
        height: auto;
        /* 시안: 설명 끝 148 → 채널 188 */
        margin-top: 40px;
        padding: 16px 20px;
    }

    /* 모바일은 칸 안에서 왼쪽부터 · 아이콘과 라벨 사이 10, 라벨이 길면 줄바꿈 */
    .auction-about .schedule__channels a {
        justify-content: flex-start;
        gap: 10px;
        white-space: normal;
    }

    /* =========================================================================
       응찰 안내 — Figma `응찰안내` 19402:102159 (375x13077)

       좌우 여백 20 → 본문 335 로 `--howto-gutter` 와 같다. 세로 간격도 단순하다 —
       스텝(블록) 사이 120, 헤더 → 첫 이미지 24, 이미지 → 본문 24, 본문 → 다음 이미지 80.
       데스크톱 2단(이미지쌍 · 본문쌍)이 세로로 풀리면서 이미지 → 본문 순으로
       번갈아 오는 것이 이 화면의 핵심 변화다.
       ====================================================================== */

    /* ---- 히어로 --------------------------------------------------------- */
    /* 시안은 제목 아래를 빈 칸으로 두었다. 영상(16:9)을 자르면 재생 컨트롤까지
       가려지므로 밴드 높이를 없애고 폭에 맞춰 그대로 눕힌다. */
    .bid-guide .bid-hero {
        height: auto;
        /* 시안: 제목 끝 182 → 히어로 222 */
        margin-top: 40px;
    }

    .bid-guide .bid-hero iframe {
        width: 100%;
        height: auto;
    }

    /* ---- 스텝 공통 ------------------------------------------------------ */
    /* 시안: 히어로 끝 -5824 → 01 회원가입 -5784 (데스크톱 80 에서 내려온다) */
    .bid-guide .bid-hero+.step {
        margin-top: 40px;
    }

    /* 앵커 이동 자리 — 모바일 헤더(56) + 서브 GNB(42).
       헤더는 768 이하에서 56 이다 — ka.home.css `body .header { height: 56px }` */
    .bid-guide .step {
        scroll-margin-top: 98px;
    }

    /* 블록 사이 120 — 데스크톱 160 에서 내려온다 (전면 밴드 뒤도 같은 값이다) */
    .bid-guide .step+.step,
    .bid-guide .step--preview+.step {
        margin-top: 120px;
    }

    /* 번호·이름 위, 설명(또는 내비) 아래 */
    .bid-guide .step__head {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    /* 시안: 이름 끝 3087 → 내비 3103 */
    .bid-guide .step__head--nav {
        gap: 16px;
    }

    .bid-guide .step__head .desc {
        width: 100%;
    }

    .bid-guide .desc,
    .bid-guide .pair__body .desc {
        word-break: normal;
    }

    /* 시안: 번호 21 + 12 → 이름 x=33 */
    .bid-guide .step__label {
        gap: 12px;
    }

    /* 시안 18/26 — 데스크톱 16 에서 올라간다 */
    .bid-guide .step__num {
        font-size: 18px;
        letter-spacing: -0.144px;
    }

    /* 시안 heading/xl-sb — 스텝명·도록 배너 제목 모두 데스크톱 28 에서 내려온다 */
    .bid-guide .step__name,
    .bid-guide .catalog__body h2 {
        font-size: 24px;
        line-height: 32px;
        letter-spacing: -0.192px;
    }

    /* 같은 스텝의 두 번째 블록부터는 시안에 번호·이름이 없고 내비만 남는다.
       aria-labelledby 는 display:none 인 요소도 이름으로 읽으므로 그대로 둔다. */
    .bid-guide #bid-online .step__label,
    .bid-guide #result-pay .step__label,
    .bid-guide #install .step__label,
    .bid-guide #storage .step__label {
        display: none;
    }

    .bid-guide .step__nav {
        justify-content: flex-start;
        padding-top: 0;
    }

    /* ---- 이미지쌍 · 본문쌍 — 이미지 → 본문 순으로 번갈아 --------------- */
    /* 두 묶음의 부모가 달라 순서를 CSS 로만 섞을 수 없다.
       묶음을 `display: contents` 로 지워 네 장(또는 두 장)을 스텝 안 직접 자식으로
       만들고, 거기서 순서를 다시 매긴다. 묶음이 사라지므로 세로 간격도
       묶음이 아니라 이미지·본문 각자가 가진다. */
    .bid-guide .step-inner {
        display: flex;
        flex-direction: column;
    }

    /* 소제목·표·안내 리스트는 쌍 뒤에 그대로 이어진다 */
    .bid-guide .step-inner>:not(.pair) {
        order: 9;
    }

    .bid-guide .step-inner>.step__head {
        order: 0;
    }

    .bid-guide .pair {
        display: contents;
    }

    .bid-guide .step-inner>.pair:nth-child(2)>:first-child {
        order: 1;
    }

    .bid-guide .step-inner>.pair:nth-child(3)>:first-child {
        order: 2;
    }

    .bid-guide .step-inner>.pair:nth-child(2)>:last-child {
        order: 3;
    }

    .bid-guide .step-inner>.pair:nth-child(3)>:last-child {
        order: 4;
    }

    .bid-guide .step-inner>.pair:nth-child(4)>:first-child {
        order: 5;
    }

    .bid-guide .step-inner>.pair:nth-child(5)>:first-child {
        order: 6;
    }

    .bid-guide .step-inner>.pair:nth-child(4)>:last-child {
        order: 7;
    }

    .bid-guide .step-inner>.pair:nth-child(5)>:last-child {
        order: 8;
    }

    /* 시안: 본문 끝 → 다음 이미지 80 (1101 → 1181) */
    .bid-guide .pair__media {
        flex: none;
        width: 100%;
        /* 모바일 본문 335px 기준 높이 176px, 너비에 비례해 조절 */
        aspect-ratio: 335 / 176;
        margin-top: 80px;
    }

    /* 시안: 이미지 끝 → 본문 24 (907 → 931) */
    .bid-guide .pair__body {
        flex: none;
        width: auto;
        margin-top: 24px;
    }

    /* 내비가 붙은 헤더 뒤 첫 이미지만 24 다 (3131 → 3155).
       번호·설명만 있는 헤더 뒤는 기본 80 (651 → 731). */
    .bid-guide .step__head--nav+.pair>.pair__media:first-child {
        margin-top: 24px;
    }

    /* 시안: 본문 끝 1551 → 버튼 1591, 폭은 본문 전체 */
    .bid-guide .pair__link,
    .bid-guide .catalog__link {
        width: 100%;
        /* 시안 46 — 데스크톱 42 에서 올라간다 */
        height: 46px;
        /* 데스크톱은 화살표 쪽 여백을 14 로 좁혔다. 가운데 정렬로 돌린다 */
        padding-right: 16px;
    }

    .bid-guide .pair__link {
        margin-top: 40px;
    }

    /* ---- 이미지 + 본문 (04·05 스텝) — 이미지 위, 본문 아래 -------------- */
    .bid-guide .split {
        flex-direction: column;
        align-items: stretch;
        padding-left: 0;
    }

    .bid-guide .step__head--nav+.split {
        margin-top: 24px;
    }

    .bid-guide .split__media {
        width: 100%;
    }

    .bid-guide .split__body {
        /* 시안: 이미지 끝 6935 → 본문 6959 */
        width: 100%;
        margin-top: 24px;
    }

    .bid-guide .split__item .desc {
        margin-top: 12px;
    }

    /* ---- 도록 구독 배너 -------------------------------------------------- */
    /* 표지 넉 장 위, 본문 아래. 시안 375x604 */
    .bid-guide .bid-catalog {
        display: block;
        margin-top: 120px;
        /* 시안: 밴드 1757 → 표지 1840 */
        padding-top: 83px;
        /* 시안: 버튼 끝 2281 → 밴드 끝 2361 */
        padding-bottom: 80px;
    }

    .bid-guide .bid-catalog .step-inner {
        display: block;
    }

    /* 표지는 시안에서 좌우로 넘쳐 흐른다 — 432 폭을 화면 x=-33 에 놓는다.
       본문이 x=20 에서 시작하므로 본문 기준으로는 -53 이다.
       값은 본문 폭(335) 기준 %라 폭이 달라져도 비율이 그대로다. */
    .bid-guide .catalog__books {
        display: flex;
        width: 128.9552%;
        margin-left: -15.8209%;
        transform: none;
    }

    .bid-guide .catalog__books img {
        /* 시안 112 / 표지 띠 432 — 간격 107 이라 5 씩 겹친다 */
        width: 25.9259%;
        margin-right: -1.1574%;
        transform: translateX(0);
    }

    .bid-guide .catalog__body {
        /* 시안: 표지 끝 2001 → 본문 2073 */
        width: 100%;
        margin-top: 72px;
    }

    .bid-guide .catalog__body .desc {
        margin-top: 12px;
    }

    /* ---- 02 프리뷰 ------------------------------------------------------- */
    /* 데스크톱은 사진이 밴드를 다 덮지만, 모바일 시안은 위가 단색이고 사진이
       아래 174 만 띠로 남는다. preview-bg.png(1920x600)를 높이 174 로 줄이면
       폭이 556.8 — 시안의 560 과 거의 같아 그대로 쓴다. */
    .bid-guide .step--preview {
        min-height: 454px;
        margin-top: 120px;
        background-color: #f5f5f5;
        background-image: url("../../img/howto/bid-guide/preview-bg@1.5x.jpg");
        background-position: 50% 100%;
        background-size: auto 174px;
        /* 사진 띠 자리 — 글이 길어져도 사진을 덮지 않는다 */
        padding-bottom: 174px;
    }

    /* ---- 소제목 ---------------------------------------------------------- */
    /* 시안: 내비 끝 11542 → 설명 11566 */
    .bid-guide .step__head--nav+.block-lead {
        margin-top: 24px;
    }

    /* 시안: 설명 끝 11618 → 표 11642 */
    .bid-guide .block-lead+.table {
        margin-top: 24px;
    }

    /* ---- 표 — 시안 335 폭 ------------------------------------------------ */
    /* 타이포가 body_label/sm(14/20) 로 한 단 내려간다 */
    .bid-guide .table th,
    .bid-guide .table td {
        /* 시안 행 40 = 10 + 20 + 10 */
        padding: 10px 8px;
        font-size: 14px;
        line-height: 20px;
        letter-spacing: -0.112px;
    }

    .bid-guide .table thead th {
        padding: 8px;
    }

    .bid-guide .table thead tr th:first-child {
        padding-left: 8px !important;
    }

    .bid-guide .table thead th br.mo {
        display: block;
    }

    /* 시안 96 / 119.5 / 119.5 — 결제수단 표는 비고 열이 접혀 세 열이 된다.
       배송비(1/3)·설치비(1/4) 표는 데스크톱 비율 그대로다. */
    .bid-guide .table--fee thead th,
    .bid-guide .table--pay thead th {
        width: 35.6716%;
    }

    .bid-guide .table--fee thead th:first-child,
    .bid-guide .table--pay thead th:first-child {
        width: 28.6567%;
    }

    /* 비고 — 열을 접고 묶음마다 마지막 행으로 내린다 */
    .bid-guide .table__pc {
        display: none;
    }

    .bid-guide .table__mo {
        display: table-row;
    }

    /* 데스크톱은 마지막 행이 병합 셀 때문에 아래 선을 셀에서 받는다.
       모바일은 그 아래 비고 행이 하나 더 붙으므로 선도 그 행으로 옮긴다. */
    .bid-guide .table--pay .table__border-b {
        border-bottom: 0;
    }

    .bid-guide .table--pay tbody:last-of-type tr:last-child>td {
        border-bottom: 2px solid var(--ka-border-selected);
    }

    /* ---- 안내 리스트 — 화면 폭으로 넓어진다 ----------------------------- */
    .bid-guide .notice {
        /* 시안 375x344 — 본문 컨테이너를 좌우 여백만큼 넘어선다 */
        margin-inline: calc(var(--howto-gutter) * -1);
        padding: 20px;
        font-size: 14px;
        line-height: 20px;
        letter-spacing: -0.112px;
    }

    .bid-guide .notice li {
        font-size: 14px;
        line-height: 20px;
        letter-spacing: -0.112px;
        word-break: normal;
    }

    .bid-guide .notice li+li {
        margin-top: 6px;
    }

    /* 줄높이가 26 에서 20 으로 줄어 dot 도 따라 올라간다 (시안 y=8.25) */
    .bid-guide .notice li::before {
        top: 8.25px;
    }

    .howto2 em {
        word-break: normal;
    }

    /* ---- 안내 페이지 바로가기 — 세로 2단 -------------------------------- */
    .howto2 .guide-links {
        flex-direction: column;
        gap: 16px;
    }

    .howto2 .guide-link {
        padding: 20px;
    }

    .auction-about .guide-links {
        margin: 120px auto 0;
    }

    /* 시안: 보관 설명 끝 12201 → 안내 바로가기 12321 */
    .bid-guide .guide-links {
        margin-top: 120px;
    }

    /* 시안: 안내 바로가기 끝 5000 → 푸터 5120 (파일 머리 참고) */
    .howto2 {
        padding-bottom: 120px;
    }
}


@media (max-width: 768px) {
    /* =========================================================================
       위탁 안내 — 모바일 본문
       Figma `위탁안내` 19510:8171 (375 기준, 좌우 여백 20 → 본문 335)

       데스크톱 2단(이미지 + 본문)을 세로로 풀고 시안값으로 갈아끼운다.
       세로 간격 — 큰 덩어리 사이 120, 섹션명 → 목록 80, 이미지 → 본문 24,
       본문 블록 사이 40. 주의사항 회색 박스는 화면 폭을 꽉 채운다.
       사진은 데스크톱과 같은 파일·같은 비율이라 폭만 100% 로 늘린다.
       푸터 앞 120 은 위 블록의 `.howto2` padding-bottom 이 맡는다.
       ========================================================================= */

    /* ---- 본문 공통 ------------------------------------------------------ */
    /* 섹션명 — 시안 heading/xl-sb 24/32 (데스크톱 28) */
    .consign-guide .section-title {
        font-size: 24px;
        line-height: 32px;
        letter-spacing: -0.192px;
    }

    /* 모바일 시안에만 있는 줄바꿈을 켠다 (데스크톱 줄바꿈은 1200 에서 이미 흘려보냄) */
    .consign-guide br.mo {
        display: inline;
    }

    /* ---- 페이지 머리 · 히어로 ------------------------------------------- */
    /* 시안 머리에는 CTA 가 없다 — 신청은 하단 버튼과 우측 하단 바로가기가 맡는다 */
    .consign-guide .intro__cta {
        display: none;
    }

    /* 화면 폭 16:9 영상. 시안: 제목 끝 → 영상 40 */
    .consign-guide .consign-hero {
        height: auto;
        margin-top: 40px;
    }

    .consign-guide .consign-hero iframe {
        width: 100%;
        height: auto;
    }

    /* ---- Why K Auction? ------------------------------------------------- */
    .consign-guide .why {
        margin-top: 40px;
    }

    .consign-guide .section-head {
        display: block;
    }

    .consign-guide .section-head .desc {
        width: auto;
        margin-top: 12px;
        word-break: normal;
    }

    .consign-guide .feature__body .desc {
        word-break: normal;
    }

    /* 데스크톱의 구분선 없이 섹션명 → 첫 항목 80 */
    .consign-guide .feature-list {
        margin-top: 80px;
        padding-top: 0;
        border-top: 0;
    }

    .consign-guide .feature {
        display: block;
    }

    .consign-guide .feature+.feature {
        margin-top: 80px;
    }

    .consign-guide .feature__media {
        width: 100%;
    }

    .consign-guide .feature__body {
        width: auto;
        margin-top: 24px;
    }

    /* 시안 heading/lg-sb 20/28 — 마크업의 `.ka-typo--xl-sb`(24/32) 에서 내려온다 */
    .consign-guide .feature__body h3 {
        font-size: 20px;
        line-height: 28px;
        letter-spacing: -0.16px;
    }

    /* ---- 괄목할만한 경매 결과 ------------------------------------------- */
    /* 안쪽 위 80 · 아래 100 은 데스크톱과 같다 */
    .consign-guide .results {
        margin-top: 120px;
    }

    /* 그룹을 세로로 쌓는다 — 한 줄에 라벨이 하나뿐이라 높이를 맞출 subgrid 가 필요 없다 */
    .consign-guide .results__groups {
        display: block;
        margin-top: 24px;
    }

    .consign-guide .results__group {
        row-gap: 24px;
    }

    .consign-guide .results__group+.results__group {
        margin-top: 80px;
    }

    .consign-guide .results__cards {
        gap: 8px;
    }

    /* 시안 163.5x151 액자 안에 여백 8 — 회색 면은 147.5x135 */
    .consign-guide .results__thumb {
        --results-thumb-pad: 8px;
        aspect-ratio: 163.5 / 151;
    }

    .consign-guide .results__body {
        padding: 8px 16px 16px;
    }

    /* 시안 body_label/md-sb 16/24 — "낙찰가" 가 윗줄에 따로 선다 */
    .consign-guide .results__price {
        font-size: 16px;
        line-height: 24px;
        letter-spacing: -0.128px;
    }

    .consign-guide .results__price-label {
        display: block;
    }

    /* 시안 caption/xs 13/19 */
    .consign-guide .results__meta {
        margin-top: 8px;
        font-size: 13px;
        line-height: 19px;
        letter-spacing: -0.104px;
    }

    /* ---- 위탁절차 ------------------------------------------------------- */
    .consign-guide .step {
        margin-top: 120px;
    }

    .consign-guide .step__head {
        position: relative;
        display: block;
    }

    .consign-guide .step .section-title {
        margin-bottom: 16px;
    }

    /* 섹션명은 첫 블록에만 보이고 나머지 블록은 내비만 있다.
       섹션 이름표(aria-labelledby)로 쓰이므로 지우지 않고 화면에서만 뺀다. */
    .consign-guide .step+.step .section-title {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    /* 네 단계를 한 줄로 두고 가로로 민다 — 화면 끝까지 닿도록 좌우 여백만큼 밖으로 뺀다.
       블록마다 자기 단계가 왼쪽 여백 자리에서 시작하게 하는 건 consign-guide.js 가 맡는다. */
    .consign-guide .step__nav {
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 12px;
        margin-inline: calc(-1 * var(--howto-gutter));
        padding: 0 var(--howto-gutter);
        overflow-x: auto;
        scrollbar-width: none;
    }

    .consign-guide .step__nav::-webkit-scrollbar {
        display: none;
    }

    .consign-guide .step__nav a {
        flex: none;
        white-space: nowrap;
    }

    /* 오른쪽 끝 흐림 — 시안 20 */
    .consign-guide .step__head::after {
        content: "";
        position: absolute;
        right: calc(-1 * var(--howto-gutter));
        bottom: 0;
        width: 20px;
        height: 28px;
        background: linear-gradient(to left, var(--ka-surface-white), rgba(255, 255, 255, 0));
        pointer-events: none;
    }

    /* 이미지 위, 본문 아래 — 내비 → 이미지 24, 이미지 → 본문 24 */
    .consign-guide .split {
        display: block;
        margin-top: 24px;
        padding-left: 0;
    }

    .consign-guide .split__media {
        width: 100%;
    }

    .consign-guide .split__body {
        width: auto;
        margin-top: 24px;
    }

    .consign-guide .split__body .desc {
        word-break: normal;
    }

    .consign-guide .split__body .formula {
        line-height: normal;
    }

    .consign-guide .split__body .formula .formula__note {
        margin-left: 3px;
    }

    .consign-guide .info-block__head {
        gap: 16px;
    }

    /* 주의사항 — 화면 폭 회색 박스. 시안: 본문 끝 → 40, 안쪽 20, 글 14/20, 항목 사이 6 */
    .consign-guide .notice {
        margin: 40px calc(-1 * var(--howto-gutter)) 0;
        padding: 20px var(--howto-gutter);
        font-size: 14px;
        line-height: 20px;
        letter-spacing: -0.112px;
    }

    .consign-guide .notice li+li {
        margin-top: 6px;
    }

    /* 점은 첫 줄 가운데 — 시안 y=8.25 (줄높이 20) */
    .consign-guide .notice li::before {
        top: 8.25px;
    }

    /* 위탁 진행 4단계 — 2x2, 간격 8 */
    .consign-guide .process {
        gap: 8px;
    }

    /* 아이콘 · 번호가 윗줄 양끝에 서고, 이름은 카드 바닥에 붙는다(옆 카드의 두 줄
       이름과 높이가 맞춰진다). 마크업은 데스크톱 순서(아이콘 → "번호 이름")라
       라벨을 풀어 그리드에 바로 올린다. */
    .consign-guide .process__item {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto 1fr;
        align-items: center;
        row-gap: 12px;
        padding: 20px 16px;
    }

    .consign-guide .process__label {
        display: contents;
    }

    .consign-guide .process__num {
        grid-area: 1 / 2;
        color: var(--ka-text-secondary);
        transform: none;
    }

    /* 카드 안쪽 폭이 130 이라 이름이 두 줄로 접힌다 — 낱말 중간에서 끊기지 않게 한다 */
    .consign-guide .process__name {
        grid-column: 1 / -1;
        grid-row: 2;
        align-self: end;
        word-break: keep-all;
    }

    /* ---- 위탁문의 신청 버튼 · 안내 페이지 바로가기 ---------------------- */
    /* 시안: 앞 블록 끝 → 120, 본문 폭 버튼 */
    .consign-guide .consign-apply {
        width: min(var(--consign-content), 100% - var(--howto-gutter) * 2);
        margin: 120px auto 0;
    }

    .consign-guide .consign-apply .ka-btn {
        width: 100%;
    }

    .consign-guide .guide-links {
        margin-top: 120px;
    }

    .consign-guide .notice li {
        line-height: 20px;
    }
}


@media (max-width: 768px) {
    /* =========================================================================
       위탁 안내 — 스크롤 상태
       Figma `위탁안내 (스크롤다운)` 19510:8451 · `위탁안내 (스크롤업)` 19510:8755
       서브 GNB 모양은 `.howto2 .sub-gnb` 공용 규칙(42 바)이 그대로 맞는다.
       ========================================================================= */

    /* 앵커 착지 자리 — 모바일 헤더(56) + 모바일 서브 GNB(42) */
    .consign-guide .why,
    .consign-guide .step {
        scroll-margin-top: 98px;
    }

    /* 시안은 맨 위로 버튼이 바로가기 자리를 차지하고, 바로가기는 그 위
       10 간격으로 올라간다. 공용 버튼 자리 기준: 30 + 40 + 10 = 80,
       하단 메뉴가 떠 있으면 68 + 40 + 10 = 118. 말풍선은 버튼에 붙어 같이 움직인다. */
    body:has(.quick-menu-cnt:not(.hide)) .consign-guide .consign-quick {
        bottom: 80px;
    }

    body.is-bottom-menu:has(.quick-menu-cnt:not(.hide)) .consign-guide .consign-quick {
        bottom: 118px;
    }

    /* 여기서는 두 버튼이 좌우가 아니라 위아래로 서므로 바로가기 뒤에 숨을 자리가 없다 —
       데스크톱처럼 살짝 빠져나오는 대신 공용 규칙대로 화면 밖에서 들어온다.
       겹치지 않으니 데스크톱에서 주던 투명도는 되돌린다. */
    body:has(.consign-guide .consign-quick) .quick-menu-cnt {
        right: 16px;
    }

    body:has(.consign-guide .consign-quick) .quick-menu-cnt.hide {
        transform: translateX(calc(100% + 16px));
        opacity: 1;
        visibility: visible;
        transition: transform .3s ease, bottom .3s ease;
    }

    body:has(.consign-guide .consign-quick) .back-btn.active {
        left: 16px;
        transform: translateX(calc(-100% - 16px));
        opacity: 1;
        pointer-events: auto;
    }

    /* 말풍선 — 시안 13/20 · 상하 6 (데스크톱 14/20 · 상하 8) */
    .consign-guide .consign-quick__tip {
        font-size: 13px;
        letter-spacing: -0.104px;
    }
}