/* 묶음 외형은 명시적으로 선택한 렌더 DOM에만 적용한다. 원문 클래스·자식 배치는 유지한다. */
/* 느슨한 원문에 생긴 표시 경계가 사이트의 section 기본 여백을 받지 않게 한다.
   원문 인라인 여백과 사용자가 고른 카드 padding은 그대로 우선한다. */
.guide-content-group { padding: 0; }
:where([data-sj-guide-group-ready]) { box-sizing: border-box; min-width: 0; }
[data-sj-guide-group-ready][data-guide-group-style="card"] {
  border: 1px solid var(--line, #dfe4ec) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  padding: 24px !important;
}
[data-sj-guide-group-ready][data-guide-group-style="body"] {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
/* 강조 안내 본인의 배경은 기존 템플릿 또는 별도로 고른 색을 따른다. 외곽 카드만 기본 배경을 쓴다. */
[data-sj-guide-group-ready][data-guide-group-style="card"]:not(.ac-hero,.guide-content-hero) { background: #fff !important; }
[data-sj-guide-group-ready][data-guide-group-style="body"]:not(.ac-hero,.guide-content-hero) { background: transparent !important; }
/* 보험 안내표는 제목·행·추가 본문에 자체 여백이 있다. 외곽 padding을 중복하지 않는다. */
.guide-instable[data-sj-guide-group-ready][data-guide-group-style="card"] { padding: 0 !important; }

/* 기존 제목·보조 설명의 아래 선은 모양만 바꾼다. 색·두께·여백은 업체 원문을 따르며,
   설정을 지우면 아래 규칙도 해제되어 원래 CSS가 다시 적용된다. */
:is(.guide-sect, .ck-content) .guide-sec-head[data-guide-header-divider="none"] { border-bottom-style: none !important; }
:is(.guide-sect, .ck-content) .guide-sec-head[data-guide-header-divider="solid"] { border-bottom-style: solid !important; }
:is(.guide-sect, .ck-content) .guide-sec-head[data-guide-header-divider="dashed"] { border-bottom-style: dashed !important; }
:is(.guide-sect, .ck-content) .guide-sec-head[data-guide-header-divider="dotted"] { border-bottom-style: dotted !important; }

/* 독립 구분선: 신규 HR에는 기본 간격을 두고, 기존 HR은 선택한 속성만 덮어쓴다.
   위·아래 간격은 렌더러가 저장된 정수 값을 해당 HR의 margin에 적용한다. */
:is(.guide-sect, .ck-content) hr.guide-content-divider { display: block; margin: 16px 0; border: 0; border-top: 1px solid var(--line-strong, var(--line, #dfe4ec)); height: 0; padding: 0; background: transparent; }
:is(.guide-sect, .ck-content) hr[data-guide-divider-style]:where(:not([data-guide-divider-style="original"])) { border: 0 !important; border-top-width: 1px !important; border-top-color: var(--line-strong, var(--line, #dfe4ec)) !important; height: 0 !important; padding: 0 !important; background: transparent !important; }
:is(.guide-sect, .ck-content) hr[data-guide-divider-style="solid"] { border-top-style: solid !important; }
:is(.guide-sect, .ck-content) hr[data-guide-divider-style="dashed"] { border-top-style: dashed !important; }
:is(.guide-sect, .ck-content) hr[data-guide-divider-style="dotted"] { border-top-style: dotted !important; }

/* 새 일반 묶음과 차량 상세/예약 TD 안에서도 안내 블록의 기본 스타일을 사용할 수 있다.
   원문 table·g-* 선택자와 인라인 스타일보다 낮은 우선순위로 내부 디자인을 보존한다. */
:where(.guide-content-group[data-sj-guide-group-ready], [data-sj-guide-group-ready][data-guide-group-style]) :where(.guide-content-text) { margin-top: 16px; color: var(--ink-2, #4b5563); }
:where(.guide-content-group[data-sj-guide-group-ready], [data-sj-guide-group-ready][data-guide-group-style]) :where(.guide-content-text > p) { margin: 0; line-height: 1.7; }
:where(.guide-content-group[data-sj-guide-group-ready], [data-sj-guide-group-ready][data-guide-group-style]) :where(.guide-content-text > p + p) { margin-top: 8px; }
:where(.guide-content-group[data-sj-guide-group-ready], [data-sj-guide-group-ready][data-guide-group-style]) :where(.guide-content-list) { display: flex; flex-direction: column; gap: 6px; padding-left: 20px; list-style: disc; font-size: 14px; line-height: 1.7; color: var(--ink-2, #4b5563); }
:where(.guide-content-group[data-sj-guide-group-ready], [data-sj-guide-group-ready][data-guide-group-style]) :where(.guide-content-list li)::marker { color: var(--brand, #315de5); }
/* SJ 기본 목록은 li::before로 불릿을 그린다. 뒤늦게 로드된 CK의 ul 불릿과 겹치지 않게 한다.
   선택한 목록 모양과 원문의 인라인 스타일은 각각 기존 설정·우선순위를 유지한다. */
ul.g-list:not([data-guide-list-style]) { list-style-type: none; }
:where(.guide-content-group[data-sj-guide-group-ready], [data-sj-guide-group-ready][data-guide-group-style]) :where(.guide-content-table) { margin-top: 16px; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
:where(.guide-content-group[data-sj-guide-group-ready], [data-sj-guide-group-ready][data-guide-group-style]) :where(.guide-content-table table) { width: 100%; min-width: 420px; border-collapse: collapse; font-size: 13.5px; line-height: 1.65; }
:where(.guide-content-group[data-sj-guide-group-ready], [data-sj-guide-group-ready][data-guide-group-style]) :where(.guide-content-table th, .guide-content-table td) { border: 1px solid var(--line, #dfe4ec); padding: 12px 16px; text-align: left; vertical-align: top; }
:where(.guide-content-group[data-sj-guide-group-ready], [data-sj-guide-group-ready][data-guide-group-style]) :where(.guide-content-table th) { background: var(--bg-alt, #f5f7fa); font-weight: 700; }
:where(.guide-content-group[data-sj-guide-group-ready], [data-sj-guide-group-ready][data-guide-group-style]) :where(figure.image) { margin: 16px auto; max-width: 100%; }
:where(.guide-content-group[data-sj-guide-group-ready], [data-sj-guide-group-ready][data-guide-group-style]) :where(figure.image img) { max-width: 100%; height: auto; }
/* 이어진 이미지에만 줄 상자의 바닥 여유를 제거한다. 캡션/본문/원문 이미지 배치는 유지한다. */
:is(.guide-sect, .ck-content) [data-sj-guide-media-stack] :where(img) { display: block; }
:where(.guide-content-group[data-sj-guide-group-ready], [data-sj-guide-group-ready][data-guide-group-style]) :where(figure.image figcaption) { padding-top: 8px; color: var(--ink-3, #6b7280); font-size: 12px; text-align: center; }
:where(.guide-content-group[data-sj-guide-group-ready], [data-sj-guide-group-ready][data-guide-group-style]) :where(.image-style-align-left) { margin-left: 0; }
:where(.guide-content-group[data-sj-guide-group-ready], [data-sj-guide-group-ready][data-guide-group-style]) :where(.image-style-align-right) { margin-right: 0; }
:where(.guide-content-group[data-sj-guide-group-ready], [data-sj-guide-group-ready][data-guide-group-style]) :where(.guide-content-notice) { margin-block: 16px; padding: 12px 16px; border-left: 3px solid #d5a134; border-radius: 6px; background: #fffaf0; }
:where(.guide-content-group[data-sj-guide-group-ready], [data-sj-guide-group-ready][data-guide-group-style]) > :where(.guide-card-h, .gins-h2) + :where(.guide-content-text, .guide-content-list, .guide-content-table, .guide-content-notice) { margin-top: 0; }

/* 공통 카드 모음. 카드 단위로 편집하고, 좁은 화면에서는 한 열로 표시한다. */
:is(.guide-sect, .ck-content) .guide-content-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; min-width: 0; }
:is(.guide-sect, .ck-content) .guide-content-card-grid > .guide-content-card-item { box-sizing: border-box; min-width: 0; padding: 20px; border: 1px solid var(--line, #dfe4ec); border-radius: 12px; background: #fff; }
:is(.guide-sect, .ck-content) .guide-content-card-text { min-width: 0; overflow-wrap: anywhere; }
:is(.guide-sect, .ck-content) .guide-content-card-item strong { display: block; margin-bottom: 6px; color: var(--ink-1, #191c22); font-size: 16px; font-weight: 750; line-height: 1.45; }
:is(.guide-sect, .ck-content) .guide-content-card-item p { margin: 0; color: var(--ink-3, #6b7280); font-size: 14px; line-height: 1.6; }
@media (max-width: 900px) {
  :is(.guide-sect, .ck-content) .guide-content-card-grid { grid-template-columns: minmax(0, 1fr); }
}

/* 독립 버튼은 제목·설명 없이 어느 묶음에서든 연결 항목으로 추가할 수 있다. */
:is(.guide-sect, .ck-content) .guide-content-button { min-width: 0; }
:is(.guide-sect, .ck-content) .guide-content-button-link { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; max-width: 100%; min-height: 44px; padding: 10px 18px; border-radius: 8px; background: var(--brand, #315de5); color: #fff; font-size: 14px; font-weight: 700; line-height: 1.5; text-align: center; text-decoration: none; overflow-wrap: anywhere; }
:is(.guide-sect, .ck-content) .guide-content-button-link:focus-visible { outline: 2px solid var(--brand, #315de5); outline-offset: 3px; }

/* 공통 강조 안내. 업체 전용 템플릿(ac-hero 등)은 원래 디자인을 사용한다. */
:is(.guide-sect, .ck-content) .guide-content-hero { display: flex; gap: 24px; padding: 28px; border-radius: 16px; background: #202632; color: #fff; min-width: 0; }
:is(.guide-sect, .ck-content) .guide-content-hero-bar { flex: 0 0 4px; align-self: stretch; border-radius: 4px; background: var(--brand, #315de5); }
:is(.guide-sect, .ck-content) .guide-content-hero-text { min-width: 0; overflow-wrap: anywhere; }
:is(.guide-sect, .ck-content) .guide-content-hero-tag { margin: 0 0 12px; font-size: 12px; font-weight: 700; line-height: 1.5; letter-spacing: .06em; color: #a8bfff; }
:is(.guide-sect, .ck-content) .guide-content-hero-title { margin: 0; color: #fff; font-size: 26px; font-weight: 750; line-height: 1.4; letter-spacing: -.02em; }
:is(.guide-sect, .ck-content) .guide-content-hero-description { margin: 12px 0 0; color: #d1d7e0; font-size: 14px; line-height: 1.7; }
:is(.guide-sect, .ck-content) .guide-content-hero-action { display: inline-flex; align-items: center; justify-content: center; max-width: 100%; box-sizing: border-box; margin-top: 20px; padding: 12px 18px; border-radius: 8px; background: var(--brand, #315de5); color: #fff; font-size: 14px; font-weight: 700; line-height: 1.5; text-decoration: none; }
:is(.guide-sect, .ck-content) .guide-content-hero-action:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (max-width: 640px) {
  [data-sj-guide-group-ready][data-guide-group-style="card"] { padding: 18px !important; }
  .guide-instable[data-sj-guide-group-ready][data-guide-group-style="card"] { padding: 0 !important; }
  :where(.guide-content-group[data-sj-guide-group-ready], [data-sj-guide-group-ready][data-guide-group-style]) :where(.guide-content-table table) { min-width: 360px; font-size: 13px; }
  :is(.guide-sect, .ck-content) .guide-content-hero { gap: 16px; padding: 20px; }
  :is(.guide-sect, .ck-content) .guide-content-hero-title { font-size: 22px; }
}

/* 텍스트 유형(글자 서식 도구 ▾ 본문·제목·소제목·보조 설명): 사용자가 고른 요소(data-guide-text-style)에만 적용한다.
   표시가 없는 운영 원문과 기존 보조 설명(.guide-lead·.g-sub)은 원래 모양 그대로다.
   우선순위: 선택 효과가 업체 클래스(.gart-p·.gr-v·.guide-sect .gr-v > p 등, 최대 0,2,x)보다 보이도록 속성을 두 번 써 명시도 0,3,0.
   inline style(색·크기·굵기·줄 간격)은 원래대로 항상 우선한다(!important 없음).
   - 독립 문단(mode 없음, P/H2/H3): 글자 모양 + 기존 문단 간격.
   - 구조 안 문구(mode="visual", TD/TH/LI/SUMMARY/SPAN/DIV 등)·부분 글자(mode="inline", SPAN): 글자 모양만. display·margin·padding·border는 그대로라 표 행·목록·아코디언 구조가 유지된다. */
:is(.guide-sect, .ck-content) [data-guide-text-style][data-guide-text-style="heading"] { color: var(--ink-1, inherit); font-size: 24px; font-weight: 750; line-height: 1.4; letter-spacing: -.02em; }
:is(.guide-sect, .ck-content) [data-guide-text-style][data-guide-text-style="subheading"] { color: var(--ink-1, inherit); font-size: 18px; font-weight: 700; line-height: 1.45; letter-spacing: -.01em; }
:is(.guide-sect, .ck-content) [data-guide-text-style][data-guide-text-style="body"] { color: var(--ink-2, inherit); font-size: 14px; font-weight: 400; line-height: 1.7; letter-spacing: normal; }
:is(.guide-sect, .ck-content) [data-guide-text-style][data-guide-text-style="description"] { color: var(--ink-3, #6b7280); font-size: 13.5px; font-weight: 500; line-height: 1.65; letter-spacing: normal; }
/* 어두운 강조 안내는 원래 문맥의 글자색을 유지한다. 유형 변경으로 전역 검정색을 덮어쓰지 않는다. */
:is(.guide-sect, .ck-content) :is(.ac-hero, .guide-content-hero) [data-guide-text-style] { color: inherit; }
:is(.guide-sect, .ck-content) .ac-hero-text > :is(p, [data-guide-text-style-original*='"tag":"P"'])[data-guide-text-style],
:is(.guide-sect, .ck-content) .ac-hero [data-guide-text-style="description"] { color: rgba(255, 255, 255, .78); }
:is(.guide-sect, .ck-content) .guide-content-hero :is(.guide-content-hero-desc[data-guide-text-style], [data-guide-text-style="description"]) { color: #d1d7e0; }
:is(.guide-sect, .ck-content) .ac-hero .ac-hero-tag[data-guide-text-style] { color: #ff9c91; }
/* 구조 안 문구: 칸 안의 문단·제목(.gart-p 등 자체 크기 고정)이 칸에 고른 모양을 따르도록 상속. 링크·강조·글자색 span·아이콘은 건드리지 않는다.
   안쪽에 따로 고른 요소는 제외(그 요소의 선택이 우선). */
:is(.guide-sect, .ck-content) [data-guide-text-style][data-guide-text-style-mode="visual"] :where(p, h1, h2, h3, h4, h5, h6, li, dt, dd):not([data-guide-text-style]) { color: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; }
/* 독립 문단만 문단 간격(제목은 블록으로). 구조 안·부분 글자에는 적용하지 않는다. */
:is(.guide-sect, .ck-content) h2[data-guide-text-style][data-guide-text-style="heading"]:not([data-guide-text-style-mode]) { display: block; margin: 28px 0 12px; }
:is(.guide-sect, .ck-content) h3[data-guide-text-style][data-guide-text-style="subheading"]:not([data-guide-text-style-mode]) { display: block; margin: 22px 0 8px; }
:is(.guide-sect, .ck-content) :is(h2[data-guide-text-style="heading"], h3[data-guide-text-style="subheading"])[data-guide-text-style]:not([data-guide-text-style-mode]):first-child { margin-top: 0; }
@media (max-width: 640px) {
  :is(.guide-sect, .ck-content) [data-guide-text-style][data-guide-text-style="heading"] { font-size: 21px; }
  :is(.guide-sect, .ck-content) [data-guide-text-style][data-guide-text-style="subheading"] { font-size: 17px; }
  :is(.guide-sect, .ck-content) [data-guide-text-style][data-guide-text-style="description"] { font-size: 13px; }
  :is(.guide-sect, .ck-content) h2[data-guide-text-style][data-guide-text-style="heading"]:not([data-guide-text-style-mode]):not(:first-child) { margin-top: 24px; }
  :is(.guide-sect, .ck-content) h3[data-guide-text-style][data-guide-text-style="subheading"]:not([data-guide-text-style-mode]):not(:first-child) { margin-top: 18px; }
}

/* 신규 절차 카드만 공통 본문에서도 표시한다. 기존 절차 원문의 업체 CSS는 그대로 둔다. */
:where([data-guide-step-layout="cards"]) { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
:where([data-guide-step-layout="cards"] > .guide-step-card, [data-guide-step-layout="cards"] > .dr-flow-step) { min-width: 0; border-radius: 12px; background: var(--bg-alt, var(--bg-2, #f5f7fa)); padding: 20px; overflow-wrap: anywhere; }
:where([data-guide-step-layout="cards"] .guide-step-n, [data-guide-step-layout="cards"] .dr-flow-no) { display: block; color: var(--brand, #315de5); font-size: 11px; font-weight: 800; letter-spacing: .1em; }
:where([data-guide-step-layout="cards"] .guide-step-t, [data-guide-step-layout="cards"] .dr-flow-step > strong) { display: block; margin: 10px 0 8px; color: var(--ink, #17202b); font-size: 15px; font-weight: 800; line-height: 1.4; }
:where([data-guide-step-layout="cards"] .guide-step-d, [data-guide-step-layout="cards"] .dr-flow-step > p) { margin: 0; color: var(--ink-3, #6b7280); font-size: 13px; line-height: 1.65; }
/* 관리자 화면 크기는 캔버스만 줄인다. 신규 표시가 있는 절차만 업체 원문용 배치보다 우선한다. */
.fradmin-canvas :is(.guide-steps, .dr-flow)[data-guide-step-layout="cards"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fradmin-canvas:is(.is-mobile, [data-viewport="mobile"]) :is(.guide-steps, .dr-flow)[data-guide-step-layout="cards"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.fradmin-canvas:is(.is-mobile, [data-viewport="mobile"]) [data-guide-step-layout="cards"] > :is(.guide-step-card, .dr-flow-step) { padding: 16px; }
@media (max-width: 720px) {
  :where([data-guide-step-layout="cards"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :where([data-guide-step-layout="cards"] > .guide-step-card, [data-guide-step-layout="cards"] > .dr-flow-step) { padding: 16px; }
  .fradmin-canvas :is(.guide-steps, .dr-flow)[data-guide-step-layout="cards"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}