/* basic / skin_1 — 베이직 (요소 빌더) */

.section-basic-skin-1 {
    width: 100%;
    box-sizing: border-box;
    position: relative;   /* absolute 말풍선(speechbubble)의 위치 기준점 */
    /* overflow-x: hidden; */
}

/* ── DB(배너) 배경 슬라이더 — 이미지/영상이 섹션 전체 배경으로 깔리고, 콘텐츠는 그 위에 ── */
.section-basic-skin-1.has-bg-slider .section-basic__bg-slider,
.section-basic-skin-1.has-bg-slider .section-basic__bg-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.section-basic-skin-1.has-bg-slider .section-basic__bg-slider { z-index: 0; }
.section-basic-skin-1.has-bg-slider .section-basic__bg-overlay { z-index: 1; }
.section-basic-skin-1.has-bg-slider .section-basic__inner { position: relative; z-index: 2; }
.section-basic-skin-1 .section-basic__bg-slider,
.section-basic-skin-1 .section-basic__bg-slider .swiper-wrapper,
.section-basic-skin-1 .section-basic__bg-slide { height: 100%; }
.section-basic-skin-1 .basic-bg-slide {
    position: relative;
    overflow: hidden;
    background: #000;
}
.section-basic-skin-1 .basic-bg-slide__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-size: cover;
    background-position: center;
    border: 0;
    display: block;
}
.section-basic-skin-1 .basic-bg-slide__media iframe,
.section-basic-skin-1 .basic-bg-slide__media video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
}
/* 배경 영상은 커버하려면 화면보다 크게 — 좌우/상하 잘림 허용 */
.section-basic-skin-1 .basic-bg-slide__video iframe {
    width: 100vw;
    height: 56.25vw;        /* 16:9 → 가로 꽉 채우고 세로 넘침 */
    min-height: 100%;
    min-width: 177.78vh;    /* 세로 꽉 채울 때 가로 넘침 */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.section-basic-skin-1 .section-basic__inner {
    max-width: var(--inner-width);
    margin: 0 auto;

    box-sizing: border-box;
}

/* ── 가로 full 모드 — 본문 너비 제한 + 좌우 padding 해제 ── */
@media (min-width: 768px) {
    .section-basic-skin-1.is-full-pc .section-basic__inner {
        max-width: none;
        padding-left: 0;
        padding-right: 0;
    }
}
@media (max-width: 767px) {
    .section-basic-skin-1.is-full-mo .section-basic__inner {
        max-width: none;
        padding-left: 0;
        padding-right: 0;
        width: auto;
    }
}

/* ── 요소 목록 (PC/MO 각각 별도 DOM, 미디어쿼리로 토글) ── */
.section-basic-skin-1 .section-basic__list {
    display: flex;
    flex-direction: column;
}
@media (min-width: 768px) {
    .section-basic-skin-1 .section-basic__list--mo { display: none; }
}
@media (max-width: 767px) {
    .section-basic-skin-1 .section-basic__list--pc { display: none; }
}

/* ── 요소 공통 ── */
.section-basic-skin-1 .basic-el {
    min-width: 0;
}
/* 요소별 간격 모드(per_gap): 각 요소를 감싸 margin-bottom 으로 간격 적용. 마지막 요소의 아래 여백은 제거 */
.section-basic-skin-1 .basic-el-wrap { min-width: 0; }
.section-basic-skin-1 .section-basic__list > *:last-child { margin-bottom: 0 !important; }
.section-basic-skin-1 .basic-el--text,
.section-basic-skin-1 .basic-el--title,
.section-basic-skin-1 .basic-el--desc {
    word-break: break-word;
    line-height: 1.6;
}
/* 텍스트 강조([[ ]]) — 색상은 인라인 style로 주입, 원형은 rough-notation(JS) */
.section-basic-skin-1 .basic-el__accent {
    white-space: nowrap;
}

/* 이미지 / 이미지버튼 */
.section-basic-skin-1 .basic-el--image img,
.section-basic-skin-1 .basic-el--imagebutton img {
    display: inline-block;
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}
.section-basic-skin-1 .basic-el--image a,
.section-basic-skin-1 .basic-el--imagebutton a { display: inline-block; }
.section-basic-skin-1 .basic-el--imagebutton a { cursor: pointer; transition: opacity .15s ease; }
.section-basic-skin-1 .basic-el--imagebutton a:hover { opacity: .9; }

/* 영상 */
.section-basic-skin-1 .basic-el__video-box {
    display: inline-block;
    position: relative;
    aspect-ratio: 16 / 9;
    max-width: 100%;
    vertical-align: middle;
}
.section-basic-skin-1 .basic-el__video-box.is-portrait {
    aspect-ratio: 9 / 16;
    max-width: min(100%, 420px);
}
.section-basic-skin-1 .basic-el__video-box iframe,
.section-basic-skin-1 .basic-el__video-box video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: #000;
}

/* 버튼 */
.section-basic-skin-1 .basic-el__btn {
    display: inline-block;
    padding: 12px 28px;
    border-radius: 4px;
    font-size: 15px;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: opacity .15s ease;
}

/* 라벨텍스트 — 버튼 모양이지만 클릭/호버 효과 없음 */
.section-basic-skin-1 .basic-el__btn--label { cursor: default; }

/* 가격 — 값(숫자) + 단위. 색·크기·굵기는 인라인 style로 주입 */
.section-basic-skin-1 .basic-el__price-value { line-height: 1.2; }
.section-basic-skin-1 .basic-el__price-unit  { line-height: 1.2; margin-left: 4px; }


/* ── 카드 그리드 ── */
/* 그리드는 .section-basic__inner 안에서 본문너비로 표시 — 풀블리드(100vw 좌우 당김) 사용 안 함 */
.section-basic-skin-1 .basic-cg-bleed {
    width: auto;
    margin-left: 0;
}
.section-basic-skin-1 .basic-cg-box {
    margin: 0 auto;
    box-sizing: border-box;
}
.section-basic-skin-1 .basic-cg-grid {
    display: grid;
    gap: 16px;
}
.section-basic-skin-1 .basic-cg-card {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    min-width: 0;
}
/* 필드 간격은 각 필드의 margin-bottom 으로 — 마지막 필드의 아래 여백은 제거 */
.section-basic-skin-1 .basic-cg-card > *:last-child { margin-bottom: 0 !important; }
.section-basic-skin-1 .basic-cg-card img {
    max-width: 100%;
    height: auto;
}
.section-basic-skin-1 .basic-cg-f { min-width: 0; font-size:0; }
.section-basic-skin-1 .basic-cg-title { line-height: 1.4; }
.section-basic-skin-1 .basic-cg-desc { line-height: 1.6; }

/* ── 카드 그리드 — 캐러셀(Swiper) 모드 ── */
/* 카드가 곧 .swiper-slide. 슬라이드 높이를 맞춰 카드가 꽉 차도록 */
.section-basic-skin-1 .basic-cg-carousel { --swiper-navigation-size: 22px; --swiper-navigation-color: #111; --swiper-theme-color: #111; }
.section-basic-skin-1 .basic-cg-carousel .swiper-slide { height: auto; }
/* 화살표가 카드와 겹칠 때 가독성 — 옅은 배경 원형(선택적, 과하지 않게) */
.section-basic-skin-1 .basic-cg-ca-prev,
.section-basic-skin-1 .basic-cg-ca-next { color: var(--swiper-navigation-color, #111); }

/* ── 가맹비용 (feepanel) ── */
/* 카드(분할) 한 칸 = 제목 + 항목 여러 줄(라벨·설명 좌 / 가격·뱃지 우) + 합계 행 */
.section-basic-skin-1 .basic-fp-card { display: block; }
.section-basic-skin-1 .basic-fp-head {
    display: flex;
    align-items: center;
    gap: 10px;
    word-break: break-word;
}
.section-basic-skin-1 .basic-fp-bullet {
    flex-shrink: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
}
.section-basic-skin-1 .basic-fp-rows { display: flex; flex-direction: column; }
.section-basic-skin-1 .basic-fp-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    min-width: 0;
}
.section-basic-skin-1 .basic-fp-left { min-width: 0; flex: 1 1 auto; }
.section-basic-skin-1 .basic-fp-label { word-break: break-word; }
.section-basic-skin-1 .basic-fp-sub { word-break: break-word; }
.section-basic-skin-1 .basic-fp-rightwrap {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.section-basic-skin-1 .basic-fp-right {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.section-basic-skin-1 .basic-fp-badge { transform-origin: center; }
.section-basic-skin-1 .basic-fp-badge-l1,
.section-basic-skin-1 .basic-fp-badge-l2 { display: block; line-height: 1.15; }
/* 겹치기(오버레이) 모드 — 뱃지를 행 위에 절대배치 */
.section-basic-skin-1 .basic-fp-row--rel { position: relative; }
.section-basic-skin-1 .basic-fp-total .basic-fp-row { align-items: center; }

/* ── 배너 그리드 (카드 그리드 기반 + 좌/우 영역) ── */
/* 카드 한 칸이 좌/우 두 영역으로 분할. 비율/간격/세로정렬/세로전환은 인스턴스별 .bn-N 스타일에서 제어 */
.section-basic-skin-1 .basic-bn-row {
    display: flex;
    width: 100%;
    min-width: 0;
}
.section-basic-skin-1 .basic-bn-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
    box-sizing: border-box;
    font-size:0;
}
/* 영역 마지막 필드의 아래 여백 제거 (필드 간격은 각 필드 margin-bottom) */
.section-basic-skin-1 .basic-bn-col > *:last-child { margin-bottom: 0 !important; }
.section-basic-skin-1 .basic-el--bannergrid img { max-width: 100%; height: auto; }

/* ── 제품 그리드 (카드 그리드 기반 + 상/하 영역) ── */
/* 카드 한 칸이 상(top)·하(bot) 두 블록으로 세로 분할. 블록별 좌/우 여백·상하 간격은 인스턴스 .pg-N 스타일에서 제어 */
.section-basic-skin-1 .basic-pg-top,
.section-basic-skin-1 .basic-pg-bot { display: flex; flex-direction: column; min-width: 0; box-sizing: border-box; }
.section-basic-skin-1 .basic-pg-top > *:last-child,
.section-basic-skin-1 .basic-pg-bot > *:last-child { margin-bottom: 0 !important; }
.section-basic-skin-1 .basic-el--productgrid img { max-width: 100%; height: auto; }
/* 상단 이미지를 카드 끝까지(여백 0) 쓸 때 라운드 모서리 밖으로 삐져나오지 않게 클립 */
.section-basic-skin-1 .basic-el--productgrid .basic-cg-card { overflow: hidden; }

/* ── 주의사항 그리드 (카드 그리드 기반 + 아이콘/텍스트 가로 배치) ── */
/* 카드 한 칸 = 아이콘(둥근사각형+느낌표) 왼쪽 + 텍스트(제목/설명) 오른쪽, 세로 가운데 정렬 */
.section-basic-skin-1 .basic-ct-row {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
}
.section-basic-skin-1 .basic-ct-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
.section-basic-skin-1 .basic-ct-text { min-width: 0; flex: 1 1 auto; }
.section-basic-skin-1 .basic-ct-title { word-break: break-word; }
.section-basic-skin-1 .basic-ct-desc { word-break: break-word; }

/* ── 라벨 그리드 (주의사항 그리드 기반 + 라벨 뱃지/텍스트 가로 배치) ── */
/* 카드 한 칸 = 라벨(알약형 뱃지) 왼쪽 + 텍스트(제목/설명) 오른쪽, 세로 가운데 정렬 */
.section-basic-skin-1 .basic-lg-row {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
}
.section-basic-skin-1 .basic-lg-label {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    white-space: nowrap;
    line-height: 1.2;
}
.section-basic-skin-1 .basic-lg-text { min-width: 0; flex: 1 1 auto; }
.section-basic-skin-1 .basic-lg-title { word-break: break-word; }
.section-basic-skin-1 .basic-lg-desc { word-break: break-word; }

/* ── 이미지 라벨 그리드 (주의사항 그리드 기반 + 아이콘 이미지/텍스트 가로 배치) ── */
/* 카드 한 칸 = 아이콘 이미지(카드별) 왼쪽 + 텍스트(제목/설명) 오른쪽, 세로 가운데 정렬 */
.section-basic-skin-1 .basic-il-row {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
}
.section-basic-skin-1 .basic-il-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
.section-basic-skin-1 .basic-il-icon img { display: block; }
.section-basic-skin-1 .basic-il-text { min-width: 0; flex: 1 1 auto; }
.section-basic-skin-1 .basic-il-title { word-break: break-word; }
.section-basic-skin-1 .basic-il-desc { word-break: break-word; }
/* 카드 링크 래퍼 — 행 전체를 블록 링크로, 색/밑줄 상속 */
.section-basic-skin-1 .basic-il-link { display: block; color: inherit; text-decoration: none; }

/* ── 리스트 그리드 (원형 도트 + 텍스트) ── */
.section-basic-skin-1 .basic-li-box {
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}
.section-basic-skin-1 .basic-li-grid {
    display: grid;
}
.section-basic-skin-1 .basic-li-card {
    display: block;
}
.section-basic-skin-1 .basic-li-row {
    display: flex;
    align-items: flex-start;
    width: 100%;
    min-width: 0;
}
.section-basic-skin-1 .basic-li-text {
    min-width: 0;
    flex: 1 1 auto;
    word-break: break-word;
}

/* ── 에디터 요소 (CKEditor 산출 HTML) ── */
.section-basic-skin-1 .basic-el--editor { line-height: 1.6; word-break: break-word; }
.section-basic-skin-1 .basic-el--editor img { max-width: 100%; height: auto; }
.section-basic-skin-1 .basic-el--editor figure { margin: 1em 0; }
.section-basic-skin-1 .basic-el--editor figure.image img { display: block; }
.section-basic-skin-1 .basic-el--editor a { color: var(--color-point, #6B4EFF); text-decoration: underline; }
.section-basic-skin-1 .basic-el--editor ul { list-style: disc; padding-left: 1.4em; margin: .5em 0; }
.section-basic-skin-1 .basic-el--editor ol { list-style: decimal; padding-left: 1.4em; margin: .5em 0; }
.section-basic-skin-1 .basic-el--editor blockquote { border-left: 3px solid #ddd; margin: .5em 0; padding-left: 1em; color: #666; }
.section-basic-skin-1 .basic-el--editor table { border-collapse: collapse; max-width: 100%; }
.section-basic-skin-1 .basic-el--editor table td,
.section-basic-skin-1 .basic-el--editor table th { border: 1px solid #ddd; padding: 6px 10px; }
.section-basic-skin-1 .basic-el--editor hr { border: 0; border-top: 1px solid #e0e0e0; margin: 1em 0; }

/* ── 버튼 그룹 ── */
.section-basic-skin-1 .basic-bg-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

/* ── 탭그리드 ── */
.section-basic-skin-1 .basic-el--tabgrid { min-width: 0; }
.section-basic-skin-1 .basic-tg-tab { display: inline-block; box-sizing: border-box; }
.section-basic-skin-1 .basic-tg-panel[hidden] { display: none; }
/* 유니파이드 카드 탭 필터 — display:flex 를 반드시 덮어야 하므로 !important */
.section-basic-skin-1 .basic-cg-card[hidden] { display: none !important; }

/* ── 표(table) ── */
.section-basic-skin-1 .basic-el--table { width: 100%; }
.section-basic-skin-1 .basic-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}
.section-basic-skin-1 .basic-table th,
.section-basic-skin-1 .basic-table td {
    word-break: break-word;
    vertical-align: middle;
}
/* 모바일 가로스크롤(PC 데이터 동일) — 좁은 화면에서 표를 가로로 스크롤 */
.section-basic-skin-1 .basic-table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.section-basic-skin-1 .basic-table-scroll .basic-table {
    width: auto;
    min-width: 100%;
}
.section-basic-skin-1 .basic-table-scroll .basic-table th,
.section-basic-skin-1 .basic-table-scroll .basic-table td {
    white-space: nowrap;
}
.basic-skin-1 .basic-table-scroll .basic-table td{
    line-height: 1.3em;
}
/* 가로스크롤 전용 열 너비(고정폭) 지정 시 — 지정 폭을 강제하려면 셀이 줄바꿈돼야 함
   (nowrap이면 내용폭이 colgroup 폭을 이겨 무시됨) */
.section-basic-skin-1 .basic-table-scroll .basic-table--fixedcols th,
.section-basic-skin-1 .basic-table-scroll .basic-table--fixedcols td {
    white-space: normal;
    word-break: break-word;
}
/* px 고정폭: 테이블을 지정 폭 합계만큼 키움(내용폭). 합계가 화면보다 크면 가로스크롤 */
.section-basic-skin-1 .basic-table-scroll .basic-table--scrollpx {
    width: max-content;
    min-width: 100%;
    max-width: none;
}
/* 우측 화면 끝까지 붙이기 — 모바일 본문여백(가운데 정렬 max-width %)의 우측 틈만 해제.
   좌측 정렬은 유지하고 오른쪽 끝(viewport)까지 확장. 전체폭(is-full-mo)이면 50%==50vw라 자동 무효. */
@media (max-width: 767px) {
    .section-basic-skin-1 .basic-el--table-bleedr {
        width: calc(100% + 50vw - 50%);
        margin-right: calc(50% - 50vw);
    }
}

/* ── 말풍선 (speechbubble) ── */
/* outer(.basic-el--speechbubble): 위치(relative/absolute)는 인스턴스 .sb-N <style>에서 주입.
   inner(.basic-bubble__inner): 박스(색·여백·라운드)·꼬리(::after)·둥둥은 인스턴스 <style>에서 주입. */
.section-basic-skin-1 .basic-el--speechbubble { min-width: 0; }
.section-basic-skin-1 .basic-bubble__inner {
    display: inline-flex;
    flex-direction: column;
    position: relative;
    box-sizing: border-box;
    max-width: 100%;
    text-align: left;
    vertical-align: top;
}
.section-basic-skin-1 .basic-sb-item { min-width: 0; }
.section-basic-skin-1 .basic-sb-item .basic-el { margin: 0; }
@keyframes basic-bubble-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}