:root {
  /* 콘텐츠 폭(1080px) 우선 유지: 뷰포트가 1440 미만으로 줄어도 패딩이 먼저 양보(180→40)해서
     콘텐츠는 1080을 지킨다(≥1160). 1160 미만부터 패딩 40 고정·콘텐츠 축소 시작 →
     1080 미디어쿼리에서 구조 스냅. 콘텐츠 폭 자체는 비례 축소가 아니라 "버티다 스냅". */
  --kc-page-pad: clamp(40px, calc((100vw - 1080px) / 2), 180px);
}

/* 헤더/푸터 네비 메뉴 글씨 크기(19px→16px) — 과대했던 원본보다는 줄이되 일반적인 메뉴 폰트 크기 유지. */
[data-pencil-name="네비"] {
  font-size: 16px !important;
}
[data-pencil-name="네비"] > div,
[data-pencil-name="네비"] > div > span,
[data-kc-nav-toggle],
[data-kc-nav-toggle] span,
[data-kc-nav-panel] [role="menuitem"] {
  font-size: 16px !important;
}

html,
body {
  min-width: 0;
}

body > [data-pencil-name] {
  width: 100% !important;
  /* 1440px(시안 기준 최대폭) 초과 화면에선 콘텐츠가 계속 늘어나지 않고 캡+중앙정렬.
     배경(히어로/헤더/푸터 풀블리드)은 fullbleed.js가 이 캡과 무관하게 뷰포트 전체로 확장. */
  max-width: 1440px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  min-width: 0 !important;
  overflow: visible !important;
}

body > [data-pencil-name] > [data-pencil-name],
[style*="width: 1440px"],
[style*="width:1440px"] {
  width: 100% !important;
  max-width: 100% !important;
}

/* 헤더/푸터/본문 섹션: 좌우 패딩을 전부 var(--kc-page-pad)로 통일 — 콘텐츠 1080 유지 로직(위 :root)을
   전 요소가 똑같이 따라가야 좌우 끝자락 정렬이 유지된다. 인라인 180px은 여기서 덮어씀. */
[data-pencil-name="헤더"],
[data-pencil-name="헤더(로그인)"] {
  padding-left: var(--kc-page-pad) !important;
  padding-right: var(--kc-page-pad) !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 1000 !important;
  /* 시안 gap:0 + space-between → 폭이 줄면 로고와 첫 메뉴가 맞닿는다. 최소 간격 확보. */
  gap: 32px !important;
}

/* 로고는 줄어들지 않게(이미지 찌그러짐 방지), 네비가 먼저 양보하도록 */
[data-pencil-name="헤더"] > [data-pencil-name="로고"],
[data-pencil-name="헤더(로그인)"] > [data-pencil-name="로고"] {
  flex-shrink: 0 !important;
}

/* cart: 좌우 2열(테이블 | 주문 요약)은 어떤 폭에서도 성립하지 않는다 —
   테이블 최소폭(≈773) + 간격(32) + 주문 요약(380 고정) = 1185 > 콘텐츠 폭(1080).
   폭을 쥐어짜면 상품명이 세로로 깨지고 삭제 버튼이 요약 위로 올라탄다.
   → 전 구간 위아래 2단(표 위 / 요약 아래)으로 스택한다. */
div:has(> [data-pencil-name="장바구니 테이블"]):has(> [data-pencil-name="주문 요약"]) {
  align-items: stretch !important;
  flex-direction: column !important;
}

[data-pencil-name="장바구니 테이블"],
[data-pencil-name="주문 요약"] {
  max-width: 100% !important;
  width: 100% !important;
}

[data-pencil-name="푸터"] {
  padding-left: var(--kc-page-pad) !important;
  padding-right: var(--kc-page-pad) !important;
}

body > [data-pencil-name] > [data-pencil-name]:not([data-pencil-name="헤더"]):not(
    [data-pencil-name="헤더(로그인)"]
  ):not([data-pencil-name="푸터"]):not([data-pencil-name="다크 푸터"]):not([data-pencil-name="풀블리드 히어로"]) {
  padding-left: var(--kc-page-pad) !important;
  padding-right: var(--kc-page-pad) !important;
}

body > [data-pencil-name] > :is(div, main, section, article):not([data-pencil-name="헤더"]):not(
    [data-pencil-name="헤더(로그인)"]
  ):not([data-pencil-name="푸터"]):not([data-pencil-name="다크 푸터"]):not([data-pencil-name="풀블리드 히어로"]) {
  padding-left: var(--kc-page-pad) !important;
  padding-right: var(--kc-page-pad) !important;
}

/* 다크 푸터(절대좌표) 좌우 앵커도 var 추종. 사업자정보는 인라인 고정폭(1080)을 풀고
   좌우 앵커로 유연화 — 좁은 폭에서도 넘치지 않아 흐름 전환(스택) 없이 우측 링크가 제자리 유지. */
[data-pencil-name="푸터 브랜드"],
[data-pencil-name="푸터 사업자정보"] {
  left: var(--kc-page-pad) !important;
}
[data-pencil-name="푸터 사업자정보"] {
  right: var(--kc-page-pad) !important;
  width: auto !important;
}
[data-pencil-name="푸터 우측 링크"] {
  right: var(--kc-page-pad) !important;
}

/* 히어로 오버레이 밝기 — 예전엔 hero-fix.js가 로드된 뒤 교체해서 "어두웠다 밝아지는" 번쩍임(FOUC)이 있었다.
   CSS로 최종값을 박아 로드 즉시 밝게 나오게 한다(JS 교체 불필요). */
[data-pencil-name="히어로 그라디언트 오버레이"] {
  background-image: linear-gradient(rgba(8, 20, 13, 0.53) 0%, rgba(8, 20, 13, 0.44) 56%, rgba(8, 20, 13, 0.3) 100%) !important;
}

/* 홈 히어로(절대좌표) 전경 요소들의 좌우 앵커도 var 추종. 리드의 미세 오프셋(+2)은 원본 유지. */
[data-pencil-name="히어로 H1"],
[data-pencil-name="히어로 CTA행"] {
  left: var(--kc-page-pad) !important;
}
[data-pencil-name="히어로 리드 문구"] {
  left: calc(var(--kc-page-pad) + 2px) !important;
}
[data-pencil-name="히어로 스탯 스트립"] {
  left: var(--kc-page-pad) !important;
  right: var(--kc-page-pad) !important;
}
[data-pencil-name="과정 요약 카드"] {
  right: var(--kc-page-pad) !important;
}

[data-kc-mobile-nav-toggle] {
  display: none !important;
}

/* 구조 전환 전용 블록(≤1260px): 1440 기준 고정폭/절대좌표 요소들이 실제로 넘치기 시작하는
   지점(히어로·다크푸터 우측 끝 1260px, 상품 섹션 1181px)에 맞춰 흐름(flex)으로 전환한다.
   헤더 패딩·메뉴 폰트는 이 블록과 무관하게 1080까지 고정 유지(아래 1080 블록에서만 스냅). */
/* 홈 히어로 전경(사진 배너형 콘텐츠): 텍스트/카드/스탯을 낱개로 재배치하지 않고
   scale(zoom) 방식 폐기 — 글자까지 축소돼 나머지 사이트(글자 고정·폭만 반응)와 이질적이었음.
   대신 카드/스탯을 우측 앵커로 고정하고 좌측 텍스트는 축소된 폰트·폭으로 좌우 나란히 유지(≥1081).
   1080 이하는 아래 별도 블록에서 세로 스택으로 스냅. */
[data-pencil-name="히어로 콘텐츠"] {
  width: 100% !important;
}

/* (구 1260 상품 스택 규칙 제거 — 패딩 var(clamp) 도입으로 콘텐츠 1080이 유지돼 1181px 넘침이
   사라짐. 세로 스택은 1080 블록이 전담. H7 조기 스택 사례.) */

@media (max-width: 1080px) {
  :root {
    --kc-page-pad: 40px;
  }

  /* 태블릿 구간: 헤더/푸터도 본문 섹션과 동일한 --kc-page-pad로 (데스크톱 180px 고정 해제) */
  [data-pencil-name="헤더"],
  [data-pencil-name="헤더(로그인)"],
  [data-pencil-name="푸터"] {
    padding-left: var(--kc-page-pad) !important;
    padding-right: var(--kc-page-pad) !important;
  }

  body > [data-pencil-name] > [data-pencil-name]:not([data-pencil-name="헤더"]):not(
      [data-pencil-name="헤더(로그인)"]
    ):not([data-pencil-name="푸터"]):not([data-pencil-name="다크 푸터"]) {
    padding-left: var(--kc-page-pad) !important;
    padding-right: var(--kc-page-pad) !important;
  }

  body > [data-pencil-name] > :is(div, main, section, article):not([data-pencil-name="헤더"]):not([data-pencil-name="헤더(로그인)"]):not(
      [data-pencil-name="푸터"]
    ):not([data-pencil-name="다크 푸터"]) {
    padding-left: var(--kc-page-pad) !important;
    padding-right: var(--kc-page-pad) !important;
    width: 100% !important;
  }

  [data-pencil-name="공지사항 FAQ 2단 섹션"],
  [data-pencil-name="청구 상세"],
  [data-pencil-name="상품행"],
  [data-pencil-name="수강 카드"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  [data-pencil-name="장바구니 테이블"],
  [data-pencil-name="주문 요약"],
  [data-pencil-name="청구 상세"],
  [data-pencil-name="고객님의 주문"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* checkout: "청구 상세"+"고객님의 주문"을 감싼 무명 2단 row 래퍼가 태블릿에서
     컬럼으로 안 바뀌어 "고객님의 주문"(고정 440px)이 넘치던 문제 */
  body:has([data-pencil-name="고객님의 주문"]) div:has(> [data-pencil-name="청구 상세"]):has(> [data-pencil-name="고객님의 주문"]) {
    flex-direction: column !important;
  }

}

/* 1080 이하: 히어로를 좌우 나란히 → 세로 스택으로 스냅. 801~1080(태블릿) 구간 전담.
   800 이하 모바일 블록이 폰트 등 더 세밀한 값으로 재정의(카스케이드 뒤라 우선). */
@media (max-width: 1080px) {
  /* 상품 상세: 콘텐츠 폭 1000 이하에선 이미지(660 고정)+정보가 빡빡 → 세로 스택 스냅 */
  [data-pencil-name="상품 섹션"],
  [data-pencil-name="상세 섹션"] {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  [data-pencil-name="상품 이미지"],
  [data-pencil-name="상품 정보"] {
    max-width: 100% !important;
    width: 100% !important;
  }

  [data-pencil-name="풀블리드 히어로"] {
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 42px var(--kc-page-pad) 34px !important;
    position: relative !important;
  }

  [data-pencil-name="캠핑장 실사 배경"],
  [data-pencil-name="히어로 그라디언트 오버레이"] {
    height: 100% !important;
    left: 0 !important;
    position: absolute !important;
    top: 0 !important;
    width: 100% !important;
    /* fullbleed.js가 데스크톱용으로 넣는 translateX(-50%)가 남아 있으면 배경이 화면 절반만큼
       왼쪽으로 밀려 우측이 비어 보인다(left:0을 !important로 덮었기 때문). 반드시 함께 해제. */
    transform: none !important;
  }

  [data-pencil-name="히어로 그라디언트 오버레이"] {
    background-image: linear-gradient(180deg, #06130C66 0%, #06130C4D 55%, #06130C6E 100%) !important;
  }

  [data-pencil-name="히어로 콘텐츠"] {
    height: auto !important;
    position: relative !important;
    transform: none !important;
    width: 100% !important;
  }

  [data-pencil-name="히어로 콘텐츠"] > *:not([data-pencil-name="캠핑장 실사 배경"]):not(
      [data-pencil-name="히어로 그라디언트 오버레이"]
    ) {
    left: auto !important;
    right: auto !important;
    margin-top: 14px !important;
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    z-index: 2 !important;
  }


  [data-pencil-name="히어로 H1"] {
    margin-top: 18px !important;
    width: auto !important;
  }

  [data-pencil-name="히어로 리드 문구"] {
    width: auto !important;
  }

  [data-pencil-name="히어로 스탯 스트립"] {
    align-items: stretch !important;
    flex-direction: column !important;
    gap: 10px !important;
    height: auto !important;
    padding: 14px !important;
    width: 100% !important;
  }

  [data-pencil-name="히어로 스탯 스트립"] > [data-pencil-name^="스탯 "] {
    border-left: 0 !important;
    height: auto !important;
    justify-content: flex-start !important;
    left: auto !important;
    padding: 8px 0 !important;
    position: static !important;
    top: auto !important;
    width: 100% !important;
  }

  [data-pencil-name="히어로 CTA행"] {
    align-items: stretch !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  [data-pencil-name="수강신청 CTA"],
  [data-pencil-name="교육 안내 영상 버튼"] {
    align-items: center !important;
    display: flex !important;
    height: 52px !important;
    justify-content: center !important;
    width: 100% !important;
  }

  [data-pencil-name="수강신청 CTA 라벨"] {
    left: auto !important;
    position: static !important;
    top: auto !important;
  }
}

@media (max-width: 800px) {
  :root {
    --kc-page-pad: 20px;
  }

  body {
    align-items: stretch !important;
  }

  body > [data-pencil-name] [data-pencil-name] {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body > [data-pencil-name] [style*="white-space: nowrap"] {
    white-space: normal !important;
  }

  body > [data-pencil-name] svg {
    flex-shrink: 0 !important;
  }

  [data-pencil-name="헤더"],
  [data-pencil-name="헤더(로그인)"] {
    align-items: center !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 0 12px !important;
    justify-content: space-between !important;
    padding: 14px var(--kc-page-pad) !important;
  }

  [data-pencil-name="헤더"] > :first-child,
  [data-pencil-name="헤더(로그인)"] > :first-child {
    gap: 8px !important;
    max-width: 100% !important;
    width: auto !important;
  }

  [data-pencil-name="헤더"] > :first-child,
  [data-pencil-name="헤더(로그인)"] > :first-child {
    flex: 1 1 min(220px, calc(100% - 92px)) !important;
  }

  [data-kc-mobile-nav-toggle] {
    display: inline-flex !important;
  }

  [data-pencil-name="헤더"] img,
  [data-pencil-name="헤더(로그인)"] img {
    height: 45px !important;
    width: auto !important;
  }

  [data-pencil-name="헤더"] > :first-child > div:last-child,
  [data-pencil-name="헤더(로그인)"] > :first-child > div:last-child {
    font-size: 18px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
  }

  [data-pencil-name="헤더"]:not([data-kc-mobile-nav-open="true"]) [data-pencil-name="네비"],
  [data-pencil-name="헤더(로그인)"]:not([data-kc-mobile-nav-open="true"]) [data-pencil-name="네비"] {
    display: none !important;
  }

  [data-pencil-name="헤더"][data-kc-mobile-nav-open="true"] [data-pencil-name="네비"],
  [data-pencil-name="헤더(로그인)"][data-kc-mobile-nav-open="true"] [data-pencil-name="네비"] {
    align-items: stretch !important;
    background: #ffffff !important;
    border-top: 1px solid #e6edf2 !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    margin-top: 14px !important;
    padding-top: 8px !important;
    width: 100% !important;
  }

  [data-pencil-name="네비"] > div,
  [data-pencil-name="헤더(로그인)"] [data-pencil-name="네비"] > div {
    font-size: 17px !important;
    line-height: 1.25 !important;
    padding: 13px 0 !important;
    width: 100% !important;
  }

  [data-kc-nav-menu="info"] {
    position: relative !important;
  }

  [data-kc-nav-toggle="info"] {
    font-size: 17px !important;
    line-height: 1.25 !important;
  }

  [data-kc-nav-panel="info"] {
    box-shadow: none !important;
    border-radius: 10px !important;
    min-width: 0 !important;
    position: static !important;
    z-index: auto !important;
  }

  [data-kc-nav-panel="info"] > div {
    font-size: 16px !important;
    padding: 15px 18px !important;
  }

  [data-pencil-name="푸터"] {
    padding: 28px var(--kc-page-pad) !important;
  }

  [data-pencil-name="푸터"] > div,
  [data-pencil-name="푸터"] [data-pencil-name="푸터 우측 링크"] {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
  }

  [data-pencil-name="다크 푸터"] {
    height: auto !important;
    padding: 28px var(--kc-page-pad) !important;
    position: relative !important;
  }

  [data-pencil-name="다크 푸터"] > * {
    left: auto !important;
    position: static !important;
    top: auto !important;
    width: 100% !important;
  }

  body > [data-pencil-name] > [data-pencil-name]:not([data-pencil-name="헤더"]):not(
      [data-pencil-name="헤더(로그인)"]
    ):not([data-pencil-name="푸터"]):not([data-pencil-name="다크 푸터"]) {
    padding-left: var(--kc-page-pad) !important;
    padding-right: var(--kc-page-pad) !important;
  }

  body > [data-pencil-name] > :is(div, main, section, article):not([data-pencil-name="헤더"]):not([data-pencil-name="헤더(로그인)"]):not(
      [data-pencil-name="푸터"]
    ):not([data-pencil-name="다크 푸터"]) {
    padding-left: var(--kc-page-pad) !important;
    padding-right: var(--kc-page-pad) !important;
    width: 100% !important;
  }

  [data-pencil-name="풀블리드 히어로"] {
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 42px var(--kc-page-pad) 34px !important;
    position: relative !important;
  }

  [data-pencil-name="캠핑장 실사 배경"],
  [data-pencil-name="히어로 그라디언트 오버레이"] {
    height: 100% !important;
    left: 0 !important;
    position: absolute !important;
    top: 0 !important;
    width: 100% !important;
    /* fullbleed.js가 데스크톱용으로 넣는 translateX(-50%)가 남아 있으면 배경이 화면 절반만큼
       왼쪽으로 밀려 우측이 비어 보인다(left:0을 !important로 덮었기 때문). 반드시 함께 해제. */
    transform: none !important;
  }

  /* 모바일 세로 히어로: 데스크톱용 100deg(좌→우) 오버레이는 우측을 어둡게 덮으므로
     상하(180deg) 그라디언트로 교체 → 좌우 균일, 상단 텍스트 가독 유지 */
  [data-pencil-name="히어로 그라디언트 오버레이"] {
    background-image: linear-gradient(180deg, #06130C66 0%, #06130C4D 55%, #06130C6E 100%) !important;
  }

  /* 800px 이하: 데스크톱용 1440 고정폭 히어로 콘텐츠 래퍼(scale 대상)를 흐름으로 완전히 풀어
     세로 스택으로 전환 — 래퍼 자체와 그 자식(원래는 풀블리드 히어로 직계였던 요소들) 모두 대상. */
  [data-pencil-name="히어로 콘텐츠"] {
    height: auto !important;
    position: relative !important;
    transform: none !important;
    width: 100% !important;
  }

  [data-pencil-name="히어로 콘텐츠"] > *:not([data-pencil-name="캠핑장 실사 배경"]):not(
      [data-pencil-name="히어로 그라디언트 오버레이"]
    ) {
    left: auto !important;
    margin-top: 14px !important;
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    z-index: 2 !important;
  }


  [data-pencil-name="히어로 H1"] {
    font-size: 34px !important;
    line-height: 1.18 !important;
    margin-top: 18px !important;
  }

  [data-pencil-name="히어로 리드 문구"] {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }

  [data-pencil-name="히어로 스탯 스트립"] {
    align-items: stretch !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    height: auto !important;
    padding: 14px !important;
    width: 100% !important;
  }

  [data-pencil-name="히어로 스탯 스트립"] > [data-pencil-name^="스탯 "] {
    height: auto !important;
    justify-content: flex-start !important;
    left: auto !important;
    padding: 8px 0 !important;
    position: static !important;
    top: auto !important;
    width: 100% !important;
  }

  [data-pencil-name="스탯 구분선1"],
  [data-pencil-name="스탯 구분선2"] {
    display: none !important;
  }

  [data-pencil-name="과정 요약 카드"] {
    padding: 20px !important;
  }

  [data-pencil-name="히어로 CTA행"] {
    align-items: stretch !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  [data-pencil-name="수강신청 CTA"],
  [data-pencil-name="교육 안내 영상 버튼"] {
    align-items: center !important;
    display: flex !important;
    height: 52px !important;
    justify-content: center !important;
    width: 100% !important;
  }

  [data-pencil-name="수강신청 CTA 라벨"] {
    font-size: 17px !important;
    left: auto !important;
    position: static !important;
    top: auto !important;
  }

  [data-pencil-name="상품 섹션"],
  [data-pencil-name="상세 섹션"],
  [data-pencil-name="공지사항 FAQ 2단 섹션"],
  [data-pencil-name="5스텝 카드 행"],
  [data-pencil-name="학습 방식 타임라인"],
  [data-pencil-name^="후기행"],
  [data-pencil-name="CTA행"],
  [data-pencil-name="청구 상세"],
  [data-pencil-name="상품행"],
  [data-pencil-name="쿠폰 행"],
  [data-pencil-name="수강 카드"],
  [data-pencil-name="강의 목록"] {
    align-items: stretch !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
  }

  [data-pencil-name="5스텝 카드 행"] {
    height: auto !important;
  }

  [data-pencil-name="학습 방식 타임라인"] {
    align-items: stretch !important;
    flex-direction: column !important;
    gap: 16px !important;
    height: auto !important;
    width: 100% !important;
  }

  [data-pencil-name="학습 방식 섹션"] {
    height: auto !important;
  }

  [data-pencil-name="학습 방식 카드 총 5강 구성"],
  [data-pencil-name="학습 방식 카드 총 6강 구성"],
  [data-pencil-name="학습 방식 카드 강의마다 시험"],
  [data-pencil-name="학습 방식 카드 10문항 중 6개"],
  [data-pencil-name="학습 방식 카드 순차 잠금"],
  [data-pencil-name="학습 방식 카드 수료증 지급"] {
    display: flex !important;
    flex: none !important;
    flex-direction: column !important;
    gap: 8px !important;
    height: auto !important;
    min-height: 170px !important;
    padding: 22px !important;
    position: relative !important;
    width: 100% !important;
  }

  [data-pencil-name^="학습 방식 번호 배지"] {
    height: 44px !important;
    left: auto !important;
    position: static !important;
    top: auto !important;
    width: 44px !important;
  }

  [data-pencil-name="학습 방식 카드 총 5강 구성"] > svg,
  [data-pencil-name="학습 방식 카드 총 6강 구성"] > svg,
  [data-pencil-name="학습 방식 카드 강의마다 시험"] > svg,
  [data-pencil-name="학습 방식 카드 10문항 중 6개"] > svg,
  [data-pencil-name="학습 방식 카드 순차 잠금"] > svg,
  [data-pencil-name="학습 방식 카드 수료증 지급"] > svg {
    height: 22px !important;
    left: 33px !important;
    position: absolute !important;
    top: 33px !important;
    width: 22px !important;
  }

  [data-pencil-name^="학습 방식 카드 제목"],
  [data-pencil-name^="학습 방식 카드 설명"] {
    left: auto !important;
    position: static !important;
    top: auto !important;
    width: 100% !important;
  }

  [data-pencil-name^="학습 방식 카드 제목"] {
    font-size: 18px !important;
    line-height: 1.35 !important;
    margin-top: 6px !important;
  }

  [data-pencil-name^="학습 방식 카드 설명"] {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  [data-pencil-name^="스텝 카드"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    height: auto !important;
    min-height: 168px !important;
    padding: 20px !important;
    position: relative !important;
    width: 100% !important;
  }

  [data-pencil-name^="번호 원형"] {
    height: 40px !important;
    left: auto !important;
    position: static !important;
    top: auto !important;
    width: 40px !important;
  }

  [data-pencil-name^="스텝 카드"] > svg {
    height: 20px !important;
    left: 30px !important;
    position: absolute !important;
    top: 30px !important;
    width: 20px !important;
  }

  [data-pencil-name^="스텝 제목"],
  [data-pencil-name^="스텝 설명"] {
    left: auto !important;
    position: static !important;
    top: auto !important;
    width: 100% !important;
  }

  [data-pencil-name^="스텝 카드"] > div:not([data-pencil-name^="번호 원형"]) {
    max-width: 100% !important;
    position: static !important;
    width: 100% !important;
  }

  [data-pencil-name^="스텝 제목"] {
    font-size: 18px !important;
    line-height: 1.35 !important;
    margin-top: 4px !important;
  }

  [data-pencil-name^="스텝 설명"] {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  body > [data-pencil-name] [style*="flex-direction: row"] {
    flex-wrap: wrap !important;
  }

  /* 예외: 검색박스(돋보기 아이콘 + 입력)는 위 광역 wrap 규칙에서 제외 — 아이콘이 입력창 위로 떨어지는 것 방지.
     범용: data-icon-name="search" svg를 직계로 가진 컨테이너 전체(공지·강의실 등 모든 검색박스). */
  body > [data-pencil-name] div:has(> svg[data-icon-name="search"]) {
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: 340px !important;
  }
  body > [data-pencil-name] div:has(> svg[data-icon-name="search"]) > div {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
  }

  body > [data-pencil-name] [style*="flex: 1 1 0"] {
    min-width: min(180px, 100%) !important;
  }

  body > [data-pencil-name] [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  body > [data-pencil-name] [style*="width: 520px"],
  body > [data-pencil-name] [style*="width: 660px"],
  body > [data-pencil-name] [style*="width: 928px"],
  body > [data-pencil-name] [style*="width: 960px"],
  body > [data-pencil-name] [style*="width: 1080px"] {
    width: 100% !important;
  }

  [data-pencil-name="상품 이미지"] {
    aspect-ratio: 3 / 2 !important;
    height: auto !important;
    width: 100% !important;
  }

  [data-pencil-name="상품 이미지"] > [data-pencil-name="이미지"],
  [data-pencil-name="상품 이미지"] > [data-pencil-name="이미지 오버레이"] {
    height: 100% !important;
    width: 100% !important;
  }

  [data-pencil-name="재생 버튼"] {
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
  }

  [data-pencil-name="상품 정보"],
  [data-pencil-name="상세 설명 카드"],
  [data-pencil-name="전문 안내"],
  [data-pencil-name="커리큘럼"],
  [data-pencil-name="주의사항 카드"],
  [data-pencil-name="공지사항 카드"],
  [data-pencil-name="자주묻는 질문 카드"],
  [data-pencil-name="장바구니 테이블"],
  [data-pencil-name="주문 요약"],
  [data-pencil-name="고객님의 주문"],
  [data-pencil-name="청구 상세"],
  [data-pencil-name="로그인 카드"],
  [data-pencil-name="회원가입 카드"] {
    width: 100% !important;
  }

  [data-pencil-name="공지사항 카드"],
  [data-pencil-name="자주묻는 질문 카드"] {
    flex: none !important;
    height: auto !important;
    min-height: 0 !important;
    position: relative !important;
  }

  [data-pencil-name="공지사항 FAQ 2단 섹션"] {
    height: auto !important;
  }

  [data-pencil-name="공지사항 헤더"],
  [data-pencil-name="FAQ 헤더"] {
    height: auto !important;
    min-height: 44px !important;
  }

  [data-pencil-name="공지사항 제목"],
  [data-pencil-name="FAQ 제목"] {
    font-size: 28px !important;
    left: auto !important;
    line-height: 1.25 !important;
    position: static !important;
    top: auto !important;
    white-space: normal !important;
  }

  [data-pencil-name="공지사항 더보기"] {
    left: auto !important;
    right: 0 !important;
    top: 8px !important;
  }

  [data-pencil-name^="공지 항목"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    height: auto !important;
    min-height: 70px !important;
    padding: 10px 0 14px !important;
  }

  [data-pencil-name^="공지 날짜"],
  [data-pencil-name^="공지 내용"] {
    left: auto !important;
    position: static !important;
    top: auto !important;
    white-space: normal !important;
    width: 100% !important;
  }

  [data-pencil-name^="FAQ 항목"] {
    display: flex !important;
    flex-direction: row !important;
    gap: 12px !important;
    height: auto !important;
    min-height: 56px !important;
    padding: 12px 34px 12px 0 !important;
    position: relative !important;
  }

  [data-pencil-name^="FAQ 질문"] {
    left: auto !important;
    line-height: 1.45 !important;
    position: static !important;
    top: auto !important;
    white-space: normal !important;
    width: 100% !important;
  }

  [data-pencil-name^="FAQ 플러스"] {
    left: auto !important;
    right: 0 !important;
    top: 12px !important;
  }

  [data-pencil-name="장바구니 테이블"],
  [data-pencil-name="주문 요약"],
  [data-pencil-name="고객님의 주문"],
  [data-pencil-name="청구 상세"],
  [data-pencil-name="로그인 카드"],
  [data-pencil-name="회원가입 카드"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  [data-pencil-name="로그인 카드"],
  [data-pencil-name="회원가입 카드"] {
    flex-shrink: 1 !important;
    max-width: calc(100vw - (var(--kc-page-pad) * 2)) !important;
    min-width: 0 !important;
  }

  [data-pencil-name="로그인 카드"] > div,
  [data-pencil-name="회원가입 카드"] > div {
    max-width: 100% !important;
  }

  [data-pencil-name="쿠폰 펼침"] > div,
  [data-pencil-name="쿠폰 행"] > div {
    width: 100% !important;
  }

  [data-pencil-name="장바구니 테이블"] > :first-child {
    display: none !important;
  }

  .kc-notice-list-head,
  .kc-notice-detail-head {
    display: none !important;
  }

  .kc-notice-list-row {
    align-items: flex-start !important;
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    gap: 6px 12px !important;
    padding: 18px 0 !important;
  }

  .kc-notice-list-number {
    grid-row: 1 / span 3 !important;
    width: 34px !important;
  }

  .kc-notice-list-title,
  .kc-notice-list-meta {
    width: 100% !important;
  }

  .kc-notice-list-title {
    grid-column: 2 !important;
  }

  .kc-notice-list-meta {
    align-items: center !important;
    color: #68726b !important;
    display: inline-flex !important;
    flex-direction: row !important;
    flex-shrink: 1 !important;
    gap: 6px !important;
    grid-column: 2 !important;
    white-space: normal !important;
  }

  .kc-notice-list-author::before {
    color: #8a938c;
    content: "작성자";
    font-size: 13px;
    font-weight: 800;
  }

  .kc-notice-list-date::before {
    color: #8a938c;
    content: "등록일";
    font-size: 13px;
    font-weight: 800;
  }

  .kc-notice-list-views::before {
    color: #8a938c;
    content: "조회";
    font-size: 13px;
    font-weight: 800;
  }

  .kc-notice-detail-card {
    padding: 18px 22px 30px !important;
  }

  .kc-notice-detail-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 10px 0 22px !important;
  }

  .kc-notice-detail-title {
    font-size: 20px !important;
    margin-bottom: 6px !important;
    white-space: normal !important;
  }

  .kc-notice-detail-meta {
    align-items: center !important;
    display: inline-flex !important;
    gap: 7px !important;
    white-space: normal !important;
  }

  .kc-notice-detail-author::before {
    color: #8a938c;
    content: "작성자";
    font-size: 13px;
    font-weight: 800;
  }

  .kc-notice-detail-date::before {
    color: #8a938c;
    content: "등록일";
    font-size: 13px;
    font-weight: 800;
  }

  .kc-notice-detail-views::before {
    color: #8a938c;
    content: "조회";
    font-size: 13px;
    font-weight: 800;
  }

  input,
  textarea,
  select {
    max-width: 100% !important;
  }

  [role="button"],
  button,
  a {
    touch-action: manipulation;
  }
}

/* P12 시험 응시: 본문 폼이 width:900px 고정이라 뷰포트가 ~1000px보다 좁으면
   중앙정렬로 폼 좌우가 뷰포트 밖으로 삐져나가 왼쪽 문항이 잘렸다.
   폼을 뷰포트에 맞추고(항상), 좁은 화면에서 타이틀바·본문 패딩을 줄인다(넓은 화면은 원본 유지). */
[data-pencil-name="시험 폼"] {
  max-width: 100% !important;
}
@media (max-width: 1000px) {
  [data-pencil-name="시험 타이틀바"],
  [data-pencil-name="P12 시험 응시"] > [style*="padding: 48px 48px 64px 48px"] {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}