/* ==========================================================================
   sp-lite 홈(/) — Figma 「웹 메인」(2122:5280) + 히어로 슬라이드 4장(2122:9447·7989·9271·9557)
   ---------------------------------------------------------------------------
   · 데스크톱 1920 기준 픽셀 좌표를 그대로 옮겼다. 히어로는 1920 프레임을 가운데 두고 넘치는 부분을 자른다.
   · 컨테이너 1280(= .sp-inner: 1320 − 좌우 20). 폰트: Pretendard(전역) + Lexend(히어로 영문, index.php 가 로드).
   · 1023px 이하 = 피그마에 없는 구간이라 우리 정의(세로 흐름·축소).
   · 헤더 94px 는 공용(inc/header.php). 히어로 좌표 = 피그마 y − 94.
   ========================================================================== */

/* 홈은 전폭 섹션이라 #wrapper 의 컨테이너 패딩을 끈다(:has 는 2023+ 브라우저 전부 지원) */
#wrapper:has(.sp-home) { max-width: none; padding: 0; }
.sp-home { --sp-blue: #1e64fd; --sp-ink-2: #1a2129; --sp-muted-2: rgba(0, 0, 0, .6); }
.sp-home img { max-width: none; }
.sp-home a { text-decoration: none; }

/* 그라데이션 텍스트(제목 강조) — 요소별 --g 로 색 지정 */
.sp-grad {
    background: var(--g, linear-gradient(90deg, #2268fe, #0095ff));
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
}

/* ==========================================================================
   1. 히어로 슬라이더 (1920×988 = 프레임 1082 − 헤더 94)
   ========================================================================== */
.sp-hero {
    position: relative;
    height: 988px;
    overflow: hidden;
    /* 프레임 배경(Rectangle 1, 세로 그라데이션 1082px, 헤더 94 만큼 위로) */
    background: linear-gradient(180deg, #f5f7f8 0%, #f1f5f8 27.3%, #eff7f9 69.8%, #f5f7f8 100%);
    background-size: 100% 1082px;
    background-position: 0 -94px;
}
.sp-hero__frame,
.sp-slide__frame {
    position: absolute;
    left: 50%;
    top: 0;
    width: 1920px;
    height: 988px;
    margin-left: -960px;
}

/* 애니메이션 배경(블롭 + 원본 윤곽 연속 회전) — Gerber Eyes 슬라이드에서만 켠다 */
.sp-hero__anim {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .7s ease;
    pointer-events: none;
}
.sp-hero.is-anim .sp-hero__anim { opacity: 1; }
.sp-hero__blob   { position: absolute; left: 345px; top: 78px; width: 1230px; height: 1230px; }   /* 950 원 + 블러 여백 140 */
.sp-hero__lines  { position: absolute; left: -65px; top: 154px; width: 2382.01px; height: 868.02px; } /* 정지 폴백 */
.sp-hero__organic{ position: absolute; left: -254px; top: 153px; width: 2740px; height: 1124px; display: none; overflow: visible; }
.sp-hero.is-organic .sp-hero__lines   { display: none; }
.sp-hero.is-organic .sp-hero__organic { display: block; }

/* 슬라이드 — 겹쳐 두고 크로스페이드 */
.sp-hero__slides { position: absolute; inset: 0; }
.sp-hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .7s ease, visibility 0s linear .7s;
}
.sp-hero__slide.is-active { opacity: 1; visibility: visible; transition: opacity .7s ease; z-index: 1; }
.sp-slide__frame > * { position: absolute; }
.sp-slide__pattern { pointer-events: none; }

/* 공통: 상단 텍스트 스택(가운데 정렬) */
.sp-slide__text { left: 0; right: 0; text-align: center; }
.sp-tags {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: Lexend, var(--sp-font);
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    color: var(--sp-blue);
    white-space: nowrap;
}
.sp-tags li { display: inline-flex; align-items: center; gap: 4px; }
.sp-tags svg { width: 11px; height: 12px; flex: 0 0 auto; }
.sp-hero__desc {
    margin: 0;
    font-size: 20px;
    font-weight: 500;
    line-height: 34px;
    letter-spacing: -.4px;
    color: var(--sp-muted-2);
}
.sp-hero__btns { display: flex; justify-content: center; gap: 24px; }
.sp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 64px;
    border-radius: 8px;
    font-size: 20px;
    font-weight: 600;
    line-height: 32px;
    letter-spacing: -.4px;
    white-space: nowrap;
    transition: filter .15s;
}
.sp-btn:hover { filter: brightness(1.06); }
.sp-btn--primary { background: var(--sp-blue); color: #fff; }
.sp-btn--primary:hover { color: #fff; }
.sp-btn--outline { border: 1.5px solid var(--sp-blue); color: var(--sp-blue); }
.sp-btn--outline:hover { background: rgba(30, 100, 253, .06); color: var(--sp-blue); }

/* — 슬라이드 1: Gerber Eyes 4.0 */
.sp-s1 .sp-slide__text { top: 73px; }
.sp-s1__title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 19px;                  /* "Gerber Eyes" 끝(1065)→"4.0"(1084) */
    margin: 14px 0 0;
    font-family: Lexend, var(--sp-font);
    font-size: 54px;
    font-weight: 500;
    line-height: 68px;
    letter-spacing: -1.08px;
    color: #000;
}
.sp-s1__title img { display: block; width: 83px; height: 41.4px; }
.sp-s1__sub {
    margin: 4px 0 0;
    font-family: Lexend, var(--sp-font);
    font-size: 36px;
    font-weight: 300;
    line-height: 45px;
    letter-spacing: -.72px;
    color: rgba(0, 0, 0, .9);
}
.sp-s1 .sp-hero__desc { margin-top: 22px; }
.sp-s1 .sp-hero__btns { margin-top: 30px; }
.sp-s1__monitor { left: 644px; top: 458px; width: 632.49px; height: 626px; }
.sp-s1__screen  { left: 657.59px; top: 474.06px; width: 593.57px; height: 400.24px; }

/* — 슬라이드 2: 제작까지 바로 (카드 3장) */
/* 물결 점 패턴(피그마 2122:7992): 점 1,100개가 전부 Color Dodge 블렌드 + 개별 불투명도라 export PNG(회색 구슬)에 블렌드를 CSS 로 되돌린다.
   블렌드는 같은 스태킹 컨텍스트 안의 배경과만 섞이므로 슬라이드 프레임에 히어로와 같은 그라데이션을 깐다(색 동일 → 이음새 없음). */
.sp-s2 .sp-slide__frame {
    background: linear-gradient(180deg, #f5f7f8 0%, #f1f5f8 27.3%, #eff7f9 69.8%, #f5f7f8 100%);
    background-size: 100% 1082px;
    background-position: 0 -94px;
}
.sp-s2 .sp-slide__pattern { left: -51px; top: 596px; width: 2268px; height: 521px; mix-blend-mode: color-dodge; }
.sp-s2 .sp-slide__text { top: 104px; }
.sp-s2__title {
    margin: 14px 0 0;
    font-size: 50px;
    font-weight: 700;
    line-height: 69px;
    letter-spacing: -1px;
    color: #000;
}
.sp-s2__title .sp-grad { --g: linear-gradient(90deg, #3978ff 0%, #333cf0 58%, #4e5ee9 100%); }
.sp-s2__sub {
    margin: 10px 0 0;
    font-size: 24px;
    font-weight: 500;
    line-height: 34px;
    letter-spacing: -.48px;
    color: var(--sp-muted-2);
}
.sp-s2__cards { left: 455px; top: 404px; display: flex; gap: 27px; }
.sp-pcard {
    position: relative;
    width: 318px;
    height: 444px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(31, 45, 80, .08);
    overflow: hidden;
}
.sp-pcard__media { display: block; width: 318px; height: 210px; background: #e6edf7; }
.sp-pcard__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sp-pcard__title {
    margin: 23px 0 0 30px;
    font-size: 30px;
    font-weight: 600;
    line-height: 32px;
    letter-spacing: -.6px;
    color: #000;
}
.sp-pcard__price {
    margin: 10px 0 0 30px;
    font-size: 26px;
    font-weight: 600;
    line-height: 32px;
    letter-spacing: -.52px;
    color: #3442f2;
}
.sp-pcard__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 26px 0 0 29px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -.32px;
    color: var(--sp-muted-2);
}
.sp-pcard__cal { position: relative; width: 14px; height: 14px; border: 1.5px solid #666; border-radius: 2px; flex: 0 0 auto; }
.sp-pcard__cal::after { content: ""; position: absolute; left: -1.5px; right: -1.5px; top: 2.5px; height: 1px; background: #666; }
.sp-pcard__dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(0, 0, 0, .6); margin: 0 -2px; }
.sp-pcard__btn {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 62px;
    background: #3442f2;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.4px;
}
.sp-pcard__btn:hover { color: #fff; background: #2b37d8; }
.sp-pcard__btn svg { width: 8px; height: 16px; }

/* — 슬라이드 3: KORLINX */
.sp-s3 .sp-slide__pattern { left: -80px; top: 175px; width: 1957px; height: 784px; }
.sp-s3 .sp-slide__text { top: 74px; }
.sp-s3 .sp-tags { color: #028ede; }
.sp-s3__brand {
    margin: 30px 0 0;
    font-family: Lexend, var(--sp-font);
    font-size: 46px;
    font-weight: 600;
    line-height: 36px;
    letter-spacing: -.5px;
    color: #000;
}
.sp-s3__title {
    margin: 27px 0 0;
    font-size: 50px;
    font-weight: 700;
    line-height: 47px;
    letter-spacing: -1px;
    color: #000;
}
.sp-s3__title .sp-grad { --g: linear-gradient(90deg, #00c4ff 0%, #00a0f1 63%, #008bd6 100%); }
.sp-s3 .sp-hero__desc { margin-top: 33px; }
.sp-s3 .sp-hero__btns { margin-top: 40px; }
.sp-s3__btn { background: linear-gradient(57.7deg, #018ede 19.4%, #00d0ff 100%); color: #f9fcfe; }
.sp-s3__btn:hover { color: #f9fcfe; }
.sp-s3__photo { left: 538px; top: 377px; width: 844px; height: 563px; }

/* — 슬라이드 4: One-Stop 제조서비스 */
.sp-s4 .sp-slide__pattern { left: -375px; top: -596px; width: 2849px; height: 2294px; }
.sp-s4 .sp-slide__text { top: 74px; }
.sp-s4 .sp-tags { color: #4770f4; }
.sp-s4__title {
    margin: 27px 0 0;
    font-size: 50px;
    font-weight: 700;
    line-height: 70px;
    letter-spacing: -1px;
    color: #000;
}
.sp-s4__title .sp-grad { --g: linear-gradient(90deg, #1e8eff 0%, #0048ff 100%); }
.sp-s4 .sp-hero__desc { margin-top: 26px; }
.sp-s4__cards {
    left: 565px;
    top: 345px;
    display: grid;
    grid-template-columns: 376px 376px;
    gap: 38px;
}
.sp-ocard {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 376px;
    height: 256px;
    padding: 14px 0 0;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}
.sp-ocard--bottom { padding: 0 0 14px; }
.sp-ocard__title {
    margin: 0;
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
    letter-spacing: -.48px;
    color: #000;
}
.sp-ocard__media { display: block; width: 376px; height: 198px; }
.sp-ocard__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sp-s4__circle {
    left: 805px;
    top: 465px;
    width: 310px;
    height: 310px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .3);
    -webkit-backdrop-filter: blur(20px);
            backdrop-filter: blur(20px);
    z-index: 1;
}
.sp-s4__circle::before {
    content: "";
    position: absolute;
    left: 30px;
    top: 30px;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: #fff;
    filter: blur(1px);
}
.sp-s4__circle p {
    position: relative;
    margin: 0;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    line-height: 34px;
    letter-spacing: -.48px;
    color: #6249dd;
}
.sp-s4__circle p b { font-weight: 900; }

/* — 이미지 슬라이드(관리자 업로드): 1920×988 커버 */
.sp-hero__slide--image .sp-slide__frame { left: 0; margin-left: 0; width: 100%; }
.sp-hero__slide--image a, .sp-hero__slide--image span { position: absolute; inset: 0; display: block; }
.sp-hero__slide--image img { width: 100%; height: 100%; object-fit: cover; }

/* — 점 내비게이션 */
.sp-hero__dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 30px;
    display: flex;
    justify-content: center;
    gap: 6px;
    z-index: 2;
}
.sp-hero__dot {
    width: 10px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: #2f4a6e;
    opacity: .21;
    cursor: pointer;
    transition: width .3s, opacity .3s;
}
.sp-hero__dot.is-active { width: 20px; opacity: .7; }
.sp-hero[data-count="1"] .sp-hero__dots { display: none; }

/* ==========================================================================
   2. 서비스 탭 8개 (Group 28: 히어로 아래 160px)
   ========================================================================== */
.sp-home-tabs { padding: 160px 0 0; }
.sp-home-tabs__row { display: flex; justify-content: center; gap: 10px; margin: 0 0 12px; padding: 0; list-style: none; }
.sp-home-tab {
    display: inline-flex;
    align-items: center;
    height: 46px;
    padding: 6px 20px;
    border-radius: 6px;
    background: #f0f2f6;
    color: #666;
    font-size: 20px;
    font-weight: 500;
    line-height: 34px;
    letter-spacing: -.4px;
    white-space: nowrap;
    transition: background .15s, color .15s;
}
.sp-home-tab:hover { background: #e4e8ef; color: #333; }
.sp-home-tab.is-active, .sp-home-tab.is-active:hover { background: var(--sp-blue); color: #fff; }

/* ==========================================================================
   3. 왜 우리를 선택 (Group 30: y 1406, 탭 하단 1346 → 60px 아래)
   ========================================================================== */
.sp-why {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 60px;
}
.sp-why__text { width: 488px; padding-top: 80px; }
.sp-why__title {
    margin: 0;
    font-size: 54px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -1.08px;
    color: var(--sp-ink-2);
}
.sp-why__title .sp-grad { --g: linear-gradient(90deg, #2268fe 0%, #0095ff 85%); }
.sp-why__desc {
    margin: 40px 0 0;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -.4px;
    color: var(--sp-muted-2);
}
.sp-why__media {
    display: block;
    width: 728px;
    height: 410px;
    border-radius: 20px;
    overflow: hidden;
    background: #0f172a;
}
.sp-why__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   4. 특징 카드 3장 (y 1916, 위 섹션 하단 1816 → 100px 아래)
   ========================================================================== */
.sp-feats { display: flex; gap: 31px; margin-top: 100px; }
.sp-feat {
    position: relative;
    width: 406px;
    height: 224px;
    border: 1px solid rgba(217, 217, 217, .62);
    border-radius: 20px;
    background: linear-gradient(160.8deg, #e9f5ff .94%, #fff 69.09%);
    overflow: hidden;
}
.sp-feat__title {
    position: absolute;
    left: 39px;
    top: 38px;
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    line-height: 34px;
    letter-spacing: -.52px;
    color: var(--sp-ink-2);
}
.sp-feat__desc {
    position: absolute;
    left: 39px;
    top: 90px;
    width: 213px;
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -.32px;
    color: var(--sp-muted-2);
}
.sp-feat__icon { position: absolute; top: 42px; height: 140px; overflow: hidden; }
.sp-feat__icon img { position: absolute; top: -32.1px; width: 294.5px; height: 195.8px; }
.sp-feat--1 .sp-feat__icon { left: 280px; width: 93px; }  .sp-feat--1 .sp-feat__icon img { left: -91.9px; }
.sp-feat--2 .sp-feat__icon { left: 275px; width: 106px; } .sp-feat--2 .sp-feat__icon img { left: -188.1px; }
.sp-feat--3 .sp-feat__icon { left: 282px; width: 91px; }  .sp-feat--3 .sp-feat__icon img { left: -4.1px; }

/* ==========================================================================
   5. 세 가지 방법 (Group 1000008823: y 2280~3301, 카드 하단 2140 → 140px 아래)
   ========================================================================== */
.sp-ways {
    margin-top: 140px;
    padding: 140px 0 141px;
    background: linear-gradient(180deg, #f8fafc 0%, rgba(255, 255, 255, 0) 100%);
}
.sp-ways__title {
    position: relative;
    margin: 0;
    text-align: center;
    font-size: 42px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -.84px;
    color: #000;
}
.sp-ways__title span { position: relative; z-index: 1; }
.sp-ways__hl {
    position: absolute;
    left: calc(50% - 176px);
    top: 41px;
    width: 624px;
    height: 21px;
    z-index: 0;
}
.sp-ways__desc {
    width: 932px;
    margin: 13px auto 0;
    text-align: center;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -.4px;
    color: var(--sp-muted-2);
}
.sp-ways__grid { display: flex; gap: 34px; margin-top: 60px; }
.sp-way {
    position: relative;
    width: 404px;
    height: 544px;
    border: 1px solid #d9d9d9;
    border-radius: 24px;
    overflow: hidden;
    --way-c: #199b5b;
    --way-bg: #eaf9ee;
    --way-btn: #eaf9ee;
    background: linear-gradient(180deg, var(--way-bg) 20.52%, #fff 52.31%);
}
.sp-way--parts { --way-c: #168e9f; --way-bg: #e3f9ff; --way-btn: rgba(0, 211, 243, .2); }
.sp-way--smt   { --way-c: #1e64fd; --way-bg: #dde7fc; --way-btn: rgba(30, 100, 253, .2); }
.sp-way__media { display: block; width: 100%; height: 180px; overflow: hidden; }
.sp-way__media img { display: block; width: 100%; height: 221px; margin-top: -20px; object-fit: cover; }
.sp-way__body { position: absolute; left: 30px; top: 210px; width: 342.5px; }
.sp-way__title {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -.48px;
    color: var(--way-c);
}
.sp-way__desc {
    margin: 8px 0 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -.32px;
    color: var(--sp-muted-2);
}
.sp-way__list { position: absolute; left: 30px; top: 332px; margin: 0; padding: 0; list-style: none; }
.sp-way__list li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -.28px;
    color: var(--sp-ink-2);
    white-space: nowrap;
}
.sp-way__list li:first-child { margin-top: 0; }
.sp-way__list img { width: 24px; height: 24px; flex: 0 0 auto; }
.sp-way__btn {
    position: absolute;
    left: 30px;
    top: 454px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 342.5px;
    height: 60px;
    border: 1px solid var(--way-c);
    border-radius: 30px;
    background: var(--way-btn);
    color: var(--way-c);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -.4px;
    white-space: pre;
    transition: filter .15s;
}
.sp-way__btn:hover { color: var(--way-c); filter: brightness(.97); }

/* ==========================================================================
   6. FAQ · 공지사항 · Q&A (Group 1000008814: y 3301~4559, 1258px)
   ========================================================================== */
.sp-boards {
    min-height: 1258px;
    padding: 140px 0 120px;
    background: #fbfbfb url(../img/home/faq-bg.svg) center top / 1920px 1258px no-repeat;
}
.sp-boards__h {
    margin: 0;
    font-size: 42px;
    font-weight: 600;
    line-height: 1.4;
    color: #000;
    white-space: nowrap;
}
.sp-boards__faq { display: flex; gap: 120px; align-items: flex-start; }
.sp-boards__faq .sp-boards__h { width: 238px; flex: 0 0 auto; }
.sp-boards__faq-body { width: 922px; }
.sp-card {
    background: rgba(255, 255, 255, .8);
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 28px 30px;
}
.sp-boards__row2 { display: flex; gap: 60px; margin-top: 90px; }
.sp-boards__col { width: 610px; }
.sp-boards__col .sp-card { margin-top: 24px; }

/* FAQ 카테고리 탭 */
.sp-faq-tabs { display: flex; gap: 14px; margin: 0 0 24px; padding: 0; list-style: none; }
.sp-faq-tabs button {
    position: relative;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.4;
    color: #000;
    cursor: pointer;
}
.sp-faq-tabs button.is-active { font-weight: 800; }
.sp-faq-tabs button.is-active::after { content: ""; position: absolute; left: 50%; bottom: -2px; width: 38px; height: 2px; margin-left: -19px; background: #000; }

/* FAQ 아코디언 */
.sp-faq__item { border-bottom: 1px solid #d9d9d9; padding-bottom: 16px; margin-bottom: 16px; }
.sp-faq__item:last-child, .sp-faq__item.is-last { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.sp-faq__item[hidden] { display: none; }
.sp-faq__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 40px;
    padding: 0 14px 0 0;
    border: 0;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
    color: #1b2b39;
}
.sp-faq__lead { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sp-faq__badge {
    flex: 0 0 auto;
    padding: 2px 8px;
    border: 1px solid #bceaf1;
    border-radius: 4px;
    background: #d7f5fa;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    color: #1b2b39;
}
.sp-faq__q { font-size: 18px; font-weight: 400; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-faq__toggle { position: relative; flex: 0 0 auto; width: 16px; height: 16px; }
.sp-faq__toggle::before, .sp-faq__toggle::after {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 16px;
    height: 2px;
    border-radius: 9px;
    background: #1b2b39;
    transition: transform .2s;
}
.sp-faq__toggle::after { transform: rotate(90deg); }
.sp-faq__item.is-open .sp-faq__toggle::after { transform: rotate(0); }
.sp-faq__body { display: none; padding-top: 10px; }
.sp-faq__item.is-open .sp-faq__body { display: block; }
.sp-faq__a { margin: 0; font-size: 16px; font-weight: 400; line-height: 1.5; color: #626363; }
.sp-faq__more { display: inline-block; margin-top: 4px; font-size: 14px; line-height: 1.5; color: #1b2b39; }
.sp-faq__more:hover { text-decoration: underline; color: #1b2b39; }

/* 공지·Q&A 목록 */
.sp-bl { margin: 0; padding: 0; list-style: none; }
.sp-bl__item { display: flex; align-items: center; justify-content: space-between; gap: 14px; height: 30px; }
.sp-bl__item + .sp-bl__item { margin-top: 16px; padding-top: 16px; border-top: 1px solid #d9d9d9; box-sizing: content-box; }
.sp-bl__link { display: flex; align-items: center; gap: 10px; min-width: 0; color: #1b2b39; }
.sp-bl__link:hover { color: #1b2b39; }
.sp-bl__link:hover .sp-bl__subj { text-decoration: underline; }
.sp-bl__q { flex: 0 0 28px; font-size: 28px; font-weight: 600; line-height: 1.2; }
.sp-bl__subj { font-size: 18px; font-weight: 400; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-bl__date { flex: 0 0 auto; font-size: 18px; line-height: 1.4; color: #626363; white-space: nowrap; }
.sp-bl__empty { font-size: 16px; color: #626363; }

/* ==========================================================================
   반응형 — 피그마 정의 밖(1023px 이하): 세로 흐름
   ========================================================================== */
@media (max-width: 1319.98px) {
    .sp-why { flex-direction: column; gap: 32px; }
    .sp-why__text { padding-top: 0; width: auto; }
    .sp-why__media { width: 100%; max-width: 728px; height: auto; aspect-ratio: 728 / 410; }
    .sp-feats { flex-wrap: wrap; justify-content: center; }
    .sp-ways__grid { flex-wrap: wrap; justify-content: center; }
    .sp-ways__desc { width: auto; }
    .sp-boards__faq { flex-direction: column; gap: 24px; }
    .sp-boards__faq-body { width: 100%; }
    .sp-boards__row2 { flex-direction: column; gap: 48px; }
    .sp-boards__col { width: 100%; }
    .sp-boards { background-size: 1920px auto; }
}

@media (max-width: 1023.98px) {
    .sp-hero { height: auto; background-size: 100% 100%; background-position: 0 0; }
    .sp-hero__frame { display: none; }
    .sp-hero__slides { position: relative; }
    .sp-hero__slide { position: relative; inset: auto; display: none; }
    .sp-hero__slide.is-active { display: block; }
    .sp-slide__frame { position: relative; left: 0; margin: 0; width: auto; height: auto; padding: 40px 20px 64px; overflow: hidden; }
    .sp-slide__frame > * { position: static; }
    .sp-slide__pattern { display: none; }
    .sp-tags { flex-wrap: wrap; gap: 8px 12px; font-size: 14px; }
    .sp-hero__desc { font-size: 16px; line-height: 1.6; }
    .sp-hero__desc br { display: none; }
    .sp-hero__btns { flex-wrap: wrap; gap: 12px; }
    .sp-btn { width: calc(50% - 6px); min-width: 140px; height: 52px; font-size: 17px; }
    .sp-s1__title { font-size: 36px; line-height: 1.2; gap: 10px; }
    .sp-s1__title img { width: 56px; height: 28px; }
    .sp-s1__sub { font-size: 22px; line-height: 1.3; }
    .sp-s1__monitor { display: block; width: 100%; max-width: 480px; height: auto; margin: 32px auto 0; }
    .sp-s1__screen { display: none; }
    .sp-s2__title, .sp-s3__title, .sp-s4__title { font-size: 30px; line-height: 1.3; letter-spacing: -.6px; }
    .sp-s2__sub { font-size: 16px; line-height: 1.5; }
    .sp-s2__cards { flex-direction: column; align-items: center; gap: 16px; margin-top: 28px; }
    .sp-pcard { width: 100%; max-width: 360px; }
    .sp-pcard__media { width: 100%; }
    .sp-s3__brand { font-size: 30px; line-height: 1.2; margin-top: 20px; }
    .sp-s3__photo { display: block; width: 100%; max-width: 560px; height: auto; margin: 28px auto 0; }
    .sp-s4__cards { grid-template-columns: 1fr; justify-items: center; gap: 16px; margin-top: 28px; }
    .sp-ocard { width: 100%; max-width: 376px; }
    .sp-ocard__media { width: 100%; }
    .sp-s4__circle { position: relative; width: 200px; height: 200px; margin: 20px auto 0; }
    .sp-s4__circle::before { left: 20px; top: 20px; width: 160px; height: 160px; }
    .sp-hero__slide--image .sp-slide__frame { padding: 0; }
    .sp-hero__slide--image a, .sp-hero__slide--image span { position: relative; }
    .sp-hero__slide--image img { height: auto; aspect-ratio: 1920 / 988; }
    .sp-hero__dots { bottom: 24px; }

    .sp-home-tabs { padding-top: 48px; }
    .sp-home-tabs__row { flex-wrap: wrap; gap: 8px; }
    .sp-home-tab { height: 38px; padding: 4px 14px; font-size: 15px; line-height: 30px; }
    .sp-why { margin-top: 40px; }
    .sp-why__title { font-size: 32px; letter-spacing: -.64px; }
    .sp-why__desc { margin-top: 20px; font-size: 16px; }
    .sp-feats { margin-top: 48px; gap: 16px; }
    .sp-feat { width: 100%; max-width: 406px; }
    .sp-feat--1 .sp-feat__icon { left: auto; right: 33px; }   /* 카드가 좁아져도 아이콘은 오른쪽 여백 기준 */
    .sp-feat--2 .sp-feat__icon { left: auto; right: 25px; }
    .sp-feat--3 .sp-feat__icon { left: auto; right: 33px; }
    .sp-feat__title { right: 135px; font-size: 22px; line-height: 30px; }        /* 아이콘 영역(오른쪽 135px) 안 침범 */
    .sp-feat__desc { top: 100px; right: 135px; width: auto; font-size: 14px; } /* 제목이 두 줄로 접혀도 안 겹치게 */
    .sp-ways { margin-top: 64px; padding: 64px 0; }
    .sp-ways__title { font-size: 26px; letter-spacing: -.52px; }
    .sp-ways__hl { display: none; }
    .sp-ways__desc { font-size: 16px; }
    .sp-ways__desc br { display: none; }
    .sp-ways__grid { gap: 20px; margin-top: 36px; }
    .sp-way { width: 100%; max-width: 404px; }
    .sp-way { height: auto; padding-bottom: 24px; }              /* 절대 배치 → 흐름 배치(폭에 따라 줄바꿈) */
    .sp-way__body, .sp-way__list, .sp-way__btn { position: static; width: auto; margin: 16px 20px 0; }
    .sp-way__body { margin-top: 20px; }
    .sp-way__list li { white-space: normal; }
    .sp-faq__head { height: auto; min-height: 40px; }
    .sp-faq__q { white-space: normal; }
    .sp-boards { min-height: 0; padding: 64px 0; }
    .sp-boards__h { font-size: 28px; }
    .sp-card { padding: 20px 18px; }
    .sp-faq__q, .sp-bl__subj, .sp-bl__date { font-size: 16px; }
    .sp-faq__badge { font-size: 14px; }
    .sp-bl__date { font-size: 14px; }
    .sp-bl__q { flex-basis: 24px; font-size: 22px; }
}