/*
 * 한국서빙로봇설계센터 /theme/basic/css/style2.css
 * PC 최대 720px 중앙 정렬 · 모바일 100% · 이미지 원본 비율 유지
 * 헤더: 로고와 메뉴 버튼 세로 중앙 정렬
 * PC 메뉴: 메인 이미지 영역의 전체 높이 / 모바일: 화면 높이 패널
 */
*, *::before, *::after { box-sizing: border-box; }
html { margin: 0; padding: 0; }
body.sr-page {
    margin: 0;
    padding: 0;
    min-width: 0;
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}
body.sr-page--home { background: #292929; }
body.sr-page--sub { background: #fff; }
body.sr-menu-open { overflow: hidden; }



/* 팝업레이어 */
#hd_pop {z-index:1000;position:relative;margin:0 auto;height:0}
#hd_pop h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
.hd_pops {position:fixed;border:1px solid #e9e9e9;margin:10px;background:#fff}
/* 팝업 이미지 여백 완전 제거 */
.hd_pops_con {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0;
}

.hd_pops_con p {
    margin: 0 !important;
    padding: 0 !important;
}

.hd_pops_con img {
    display: block !important;
    max-width: 100%;
    height: auto;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: top;
}

/* 이미지 앞뒤에 생기는 빈 태그 제거 */
.hd_pops_con p:empty,
.hd_pops_con p:has(> br:only-child) {
    display: none !important;
}

/* 팝업 하단 버튼 영역 */
.hd_pops_footer {
    margin: 0 !important;
    padding: 0;
}
.hd_pops_footer {padding:0;background:#000;color:#fff;text-align:left;position:relative}
.hd_pops_footer:after {display:block;visibility:hidden;clear:both;content:""}
.hd_pops_footer button {padding:10px;border:0;color:#fff}
.hd_pops_footer .hd_pops_reject {background:#000;text-align:left}
.hd_pops_footer .hd_pops_close {background:#393939;position:absolute;top:0;right:0}





.sr-page button { font: inherit; }

.sr-shell {
    position: relative;
    width: 100%;
    max-width: 720px;
    min-width: 0;
    margin: 0 auto;
    padding: 0;
    background: #fff;
    isolation: isolate;
}
.sr-main { display: block; width: 100%; margin: 0; padding: 0; line-height: 0; }
.sr-main__visual {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    object-fit: contain;
}

/* 로고와 햄버거 아이콘의 중심선을 일치시킴 */
.sr-header {
    position: absolute;
    z-index: 40;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    padding: 7.2% 4.5% 0;
    background: transparent;
}
.sr-brand {
    position: relative;
    display: block;
    flex: 0 1 68.5%;
    width: 68.5%;
    max-width: 500px;
    min-width: 0;
    line-height: 0;
    text-decoration: none;
    isolation: isolate;
    padding: 10px 16px 10px 12px;
}
.sr-brand::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: -8px -14px -8px -14px;
    border-radius: 999px;
    background: radial-gradient(ellipse at center, rgba(255,255,255,.98) 0%, rgba(255,255,255,.92) 42%, rgba(255,255,255,.56) 70%, rgba(255,255,255,0) 100%);
    filter: blur(8px);
    opacity: .97;
}
.sr-brand img { display: block; width: 100%; height: auto; border: 0; }
.sr-page--sub .sr-shell { min-height: 100vh; }
.sr-page--sub .sr-header {
    position: relative;
    padding-top: 24px;
    padding-bottom: 24px;
    background: #fff;
}

/* 첫 화면의 햄버거 (열기 전용; 닫기는 패널 안의 별도 X 버튼) */
.sr-menu-toggle {
    position: relative;
    z-index: 40;
    display: flex;
    flex: 0 0 52px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 52px;
    height: 52px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(233, 236, 240, .98);
    border-radius: 18px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 8px 22px rgba(15,25,38,.12);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -webkit-backdrop-filter: blur(12px) saturate(135%);
    backdrop-filter: blur(12px) saturate(135%);
}
.sr-menu-toggle__line {
    display: block;
    width: 24px;
    height: 2.5px;
    border-radius: 3px;
    background: #2b3340;
    transition: width .2s ease, background .2s ease;
}
.sr-menu-toggle:hover .sr-menu-toggle__line:nth-child(2) { width: 18px; }
.sr-menu-toggle:focus-visible,
.sr-menu__close:focus-visible,
.sr-menu__link:focus-visible { outline: 2px solid #0b72f0; outline-offset: 3px; }

/* PC: 이미지를 전체 높이까지 어둡게 덮고, 패널도 같은 높이 */
.sr-menu-backdrop {
    position: absolute;
    z-index: 50;
    inset: 0;
    background: rgba(5, 14, 30, .58);
}
.sr-menu-backdrop[hidden], .sr-menu[hidden], .sr-menu__feedback[hidden] { display: none !important; }
.sr-menu {
    position: absolute;
    z-index: 60;
    top: 0;
    right: 0;
    bottom: 0;
    display: block;
    width: min(60%, 430px);
    background: #fff;
    box-shadow: -18px 0 55px rgba(0, 0, 0, .15);
    animation: sr-menu-fade .18s ease-out both;
}
@keyframes sr-menu-fade {
    from { opacity: .4; }
    to { opacity: 1; }
}

/* 닫기 버튼은 스크롤 영역 밖의 패널에 고정. 모바일 화면 밖으로 나가지 않음. */
.sr-menu__close {
    position: absolute;
    z-index: 5;
    top: 22px;
    right: 24px;
    display: block;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.sr-menu__close::before, .sr-menu__close::after {
    content: '';
    position: absolute;
    top: 21px;
    left: 10px;
    width: 24px;
    height: 2.5px;
    background: #06132a;
    border-radius: 4px;
    transform: rotate(45deg);
    transition: background .2s ease;
}
.sr-menu__close::after { transform: rotate(-45deg); }
.sr-menu__close:hover { background: #f0f5fb; }
.sr-menu__scroll {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 73px 30px 32px;
}
.sr-menu__content { flex: 0 0 auto; }
.sr-menu__top { padding: 0 38px 24px 0; }
.sr-menu__eyebrow {
    display: block;
    margin-bottom: 13px;
    color: #0c72e8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .18em;
}
.sr-menu__heading {
    display: block;
    color: #07122b;
    font-size: 30px;
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: -.065em;
}
.sr-menu__heading span { color: #1578f0; }
.sr-menu__desc { margin: 13px 0 0; color: #757f91; font-size: 12px; line-height: 1.6; }
.sr-menu__links { border-top: 2px solid #09152b; }
.sr-menu__link {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 15px;
    align-items: center;
    gap: 8px;
    min-height: 73px;
    padding: 12px 2px;
    border-bottom: 1px solid #e9edf3;
    color: #0a1730;
    text-decoration: none;
    transition: background .18s ease, padding-left .18s ease;
}
.sr-menu__link:hover { padding-left: 8px; background: #f4f8ff; }
.sr-menu__num { align-self: start; padding-top: 3px; color: #0c72e8; font-size: 11px; font-weight: 800; }
.sr-menu__label { min-width: 0; color: #101b34; font-size: 14px; font-weight: 800; line-height: 1.4; letter-spacing: -.055em; }
.sr-menu__label small { display: block; margin-top: 5px; color: #9fa9b7; font-size: 9px; font-weight: 700; letter-spacing: .065em; }
.sr-menu__arrow { color: #9caabe; font-size: 18px; font-weight: 300; text-align: right; }
.sr-menu__feedback { margin: 12px 0 0; padding: 11px 12px; background: #edf5ff; color: #1568c6; font-size: 12px; }

/* 패널 높이가 길어도 하단이 휑하지 않도록 푸터 영역을 바닥에 정렬 */
.sr-menu__footer {
    margin-top: auto;
    padding-top: 36px;
    color: #07152d;
}
.sr-menu__footer::before { content: ''; display: block; width: 100%; height: 1px; background: #e5ebf2; margin-bottom: 25px; }
.sr-menu__footer-caption { display: block; color: #0c72e8; font-size: 9px; font-weight: 800; letter-spacing: .16em; }
.sr-menu__footer p { margin: 10px 0 22px; font-size: 17px; line-height: 1.5; font-weight: 800; letter-spacing: -.055em; }
.sr-menu__footer small { display: block; color: #a7b0bf; font-size: 9px; font-weight: 800; letter-spacing: .06em; }

/* 모바일: 메뉴는 뷰포트 전체를 채우고, X를 우측 안쪽에 고정 */
@media (max-width: 720px) {
    .sr-menu-backdrop {
        position: fixed;
        inset: 0;
    }
    .sr-menu {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        max-height: 100dvh;
        box-shadow: none;
    }
    .sr-menu__close {
        top: max(12px, env(safe-area-inset-top));
        right: max(16px, env(safe-area-inset-right));
    }
    .sr-menu__scroll { padding: 76px 26px 26px; }
}
@media (max-width: 480px) {
    .sr-menu-toggle { flex-basis: 48px; width: 48px; height: 48px; gap: 5px; border-radius: 16px; }
    .sr-menu-toggle__line { width: 22px; height: 2.5px; }
    .sr-menu__scroll { padding: 72px 24px 25px; }
    .sr-menu__heading { font-size: 27px; }
    .sr-menu__top { padding-bottom: 20px; }
    .sr-menu__link { min-height: 67px; padding-top: 10px; padding-bottom: 10px; }
    .sr-menu__label { font-size: 14px; }
    .sr-menu__footer { padding-top: 32px; }
}
@media (prefers-reduced-motion: reduce) {
    .sr-menu, .sr-menu-toggle__line, .sr-menu__link { animation: none; transition: none; }
}

/* v3: 3장의 세로형 이미지는 간격/크롭 없이 원본 비율 그대로 이어서 노출 */
.sr-image-section { display: block; width: 100%; margin: 0; padding: 0; }
.sr-main__visual { vertical-align: top; }

/* 이미지 디자인을 가리지 않는 읽기 쉬운 접이식 설명 - 사용자에게도 제공되는 정보 */
.sr-a11y-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.sr-info { margin: 0; color: #101b34; background: #fff; line-height: 1.7; }
.sr-info__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    cursor: pointer;
    padding: 21px 7%;
    color: #172441;
    border-top: 1px solid #edf0f4;
    background: #f6f9ff;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.5;
    list-style: none;
}
.sr-info__summary::-webkit-details-marker { display: none; }
.sr-info__summary:focus-visible { outline: 2px solid #126bf0; outline-offset: -3px; }
.sr-info__chevron { width: 10px; height: 10px; flex: 0 0 10px; border-right: 2px solid #126bf0; border-bottom: 2px solid #126bf0; transform: rotate(45deg); transition: transform .2s ease; }
.sr-info[open] .sr-info__chevron { transform: rotate(225deg); }
.sr-info__body { padding: 16px 7% 32px; font-size: 14px; line-height: 1.8; }
.sr-info__body section { margin: 0; padding: 18px 0; border-bottom: 1px solid #edf0f4; }
.sr-info__body section:last-child { border-bottom: 0; }
.sr-info__body h2 { font-size: 18px; font-weight: 800; margin: 0 0 10px; letter-spacing: -.04em; }
.sr-info__body h3 { font-size: 15px; font-weight: 800; margin: 16px 0 5px; }
.sr-info__body p { margin: 0; }
.sr-info__body ul { padding: 0 0 0 19px; margin: 0; }
.sr-info__body li { padding: 3px 0; }
@media (max-width: 480px) {
    .sr-info__summary { padding-top: 18px; padding-bottom: 18px; font-size: 13px; }
    .sr-info__body { font-size: 13px; }
    .sr-info__body h2 { font-size: 16px; }
}

/* 3장으로 본문이 길어져도 PC 메뉴 패널은 화면 높이에 맞춰 유지 */
@media (min-width: 721px) {
    .sr-menu {
        bottom: auto;
        height: min(100vh, 1080px);
        height: min(100dvh, 1080px);
    }
}


/* v4: 통이미지 img4.jpg의 3개 버튼 위치에 각각 펼침 이미지를 끼워 넣는 아코디언 */
.sr-guide, .sr-guide * { box-sizing: border-box; }
.sr-guide { display: block; width: 100%; max-width: 100%; padding: 0; margin: 0; background: #ffe9df; line-height: 0; }
.sr-guide__piece { position: relative; display: block; width: 100%; margin: 0; padding: 0; overflow: hidden; }
.sr-guide__art { display: block; width: 100%; height: auto; margin: 0; padding: 0; overflow: hidden; }
/* v5: 개별 화살표가 아닌, 각 안내 카드의 전체 면적을 클릭 대상으로 사용 */
.sr-guide__button {
    position: absolute;
    z-index: 2;
    display: block;
    left: 5.2%;
    right: 5.2%;
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 26px;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    appearance: none;
    touch-action: manipulation;
}
/* 좌표는 원본 1080x1801 img4.jpg 기준의 각 이미지 분할 위치에 맞춤 */
.sr-guide__button--one { top: 71.3%; height: 27.7%; }
.sr-guide__button--two { top: 3.5%; height: 93.0%; }
.sr-guide__button--three { top: 3.5%; height: 93.0%; }
.sr-guide__button:hover { background: rgba(255, 63, 75, .045); }
.sr-guide__button:focus-visible {
    outline: 3px solid #e92040;
    outline-offset: -4px;
    background: rgba(255,255,255,.10);
}
@media (max-width: 480px) {
    .sr-guide__button { border-radius: 14px; }
}
.sr-guide__answer {
    display: grid;
    grid-template-rows: 0fr;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    visibility: hidden;
    transition: grid-template-rows .37s cubic-bezier(.2,.8,.2,1), visibility .37s;
}
.sr-guide__answer--open { grid-template-rows: 1fr; visibility: visible; }
.sr-guide__answer-inner { min-height: 0; min-width: 0; overflow: hidden; line-height: 0; }
.sr-guide__answer img { display: block; width: 100%; height: auto; max-width: none; border: 0; margin: 0; padding: 0; }
@media (prefers-reduced-motion: reduce) {
    .sr-guide__answer { transition: none; }
}


/* V11: img4 카드 펼침 상태의 추가 화살표/배경 오버레이 제거. 원본 이미지 표시 유지. */

/* v6: 5개의 카드 전체 클릭 및 img5_1~5 펼침. img4와 동일한 아코디언 모션 재사용 */
.sr-care { background: #ccecff; }
.sr-care__button { left: 3.8%; right: 3.8%; border-radius: 25px; }
/* img5.jpg (1080x1801): 원본 픽셀 경계 기준, 반응형으로 자동 축소 */
.sr-care__button--first  { top: 72.1%; height: 26.8%; }
.sr-care__button--second { top: 4.7%; height: 91.8%; }
.sr-care__button--third  { top: 4.7%; height: 91.8%; }
.sr-care__button--fourth { top: 5.0%; height: 91.0%; }
.sr-care__button--fifth  { top: 4.5%; height: 91.5%; }
.sr-care__button:hover { background: rgba(6, 103, 222, .045); }
.sr-care__button:focus-visible { outline-color: #0879ef; }
@media (max-width: 480px) {
    .sr-care__button { border-radius: 12px; }
}


/* v8: img7.jpg (1080×1801) STEP 01~06, 원본 통이미지를 카드 사이에서 분할 표시 */
.sr-steps { background: #fff9f2; }
.sr-steps__button {
    left: 3.0%;
    right: 3.0%;
    border-radius: 26px;
}
/* 버튼은 STEP 숫자 원형과 카드 본문 전체를 덮습니다. 상세 이미지 배치는 각 카드 바로 아래입니다. */
.sr-steps__button--1 { top: 76.8%; height: 22.1%; }
.sr-steps__button--2 { top: 3.3%; height: 94%; }
.sr-steps__button--3 { top: 3.3%; height: 94%; }
.sr-steps__button--4 { top: 3.3%; height: 94%; }
.sr-steps__button--5 { top: 3.3%; height: 94%; }
.sr-steps__button--6 { top: 3.3%; height: 94%; }
.sr-steps__button:hover { background: rgba(19, 110, 243, .04); }
.sr-steps__button:focus-visible { outline-color: #0079ef; }
/* V11: img7 카드 펼침 상태의 추가 화살표/배경 오버레이 제거. 원본 이미지 표시 유지. */

.sr-info__body ol { margin: 0; padding: 0 0 0 21px; }
.sr-info__body ol li { padding: 3px 0; }


/* V9: img8.jpg (1080x1800), 6개 브랜드 전체 박스 클릭 아코디언 */
.sr-models { background: #282a2c; }
.sr-models__button { left: 3.4%; right: 3.4%; border-radius: 23px; }
.sr-models__button--1 { top: 58%; height: 40.5%; }
.sr-models__button--2 { top: 2%; height: 96%; }
.sr-models__button--3 { top: 2%; height: 96%; }
.sr-models__button--4 { top: 2%; height: 96%; }
.sr-models__button--5 { top: 2%; height: 96%; }
/* 마지막 조각은 '안내 로봇' 소제목을 포함하므로 카드 영역만 클릭 */
.sr-models__button--6 { top: 30%; height: 56%; }
.sr-models__button:hover { background: rgba(34, 99, 240, .045); }
.sr-models__button:focus-visible { outline-color: #167aff; }
/* V11: img8 카드 펼침 상태의 추가 화살표/배경 오버레이 제거. 원본 이미지 표시 유지. */

@media (max-width: 480px) { .sr-models__button { border-radius: 12px; } }

/* V10: img9.jpg는 통이미지를 그대로 표시하고 카드 전체를 투명 버튼으로 연결 */
.sr-video-showcase { position: relative; display: block; width: 100%; margin: 0; padding: 0; line-height: 0; }
.sr-video-showcase__image { display: block; width: 100%; height: auto; vertical-align: top; }
.sr-video-showcase__hotspot {
    position: absolute;
    display: block;
    left: 4.0%;
    width: 92.0%;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 5vw;
    background: transparent;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.sr-video-showcase__hotspot--1 { top: 29.7%; height: 11.2%; }
.sr-video-showcase__hotspot--2 { top: 42.6%; height: 11.2%; }
.sr-video-showcase__hotspot--3 { top: 55.7%; height: 11.6%; }
.sr-video-showcase__hotspot--4 { top: 69.3%; height: 11.9%; }
.sr-video-showcase__hotspot:hover { background: rgba(255, 70, 93, .045); }
.sr-video-showcase__hotspot:focus-visible,
.sr-video-showcase__channel:focus-visible { outline: 3px solid #ef3349; outline-offset: -4px; }
.sr-video-showcase__channel {
    position: absolute;
    display: block;
    left: 21.4%;
    top: 90.6%;
    width: 57.2%;
    height: 6.1%;
    border-radius: 99px;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.sr-video-showcase__channel:hover { background: rgba(255, 255, 255, .08); }

/* 유튜브 팝업 - 브라우저 전체 화면 기준, 큰 닫기 버튼 */
.sr-video-popup[hidden] { display: none !important; }
.sr-video-popup {
    position: fixed;
    z-index: 9999;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
             max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    background: rgba(3, 9, 23, .89);
    line-height: 1.5;
}
.sr-video-popup__dialog {
    display: flex;
    flex-direction: column;
    position: relative;
    width: min(100%, 900px);
    max-height: calc(100dvh - 24px);
    min-height: 0;
    color: #fff;
}
.sr-video-popup__dialog--short { width: min(100%, 430px, calc((100dvh - 113px) * 9 / 16)); }
.sr-video-popup__header { display: flex; align-items: center; justify-content: space-between; min-height: 60px; gap: 12px; }
.sr-video-popup__title { display: block; min-width: 0; color: #fff; font-weight: 800; font-size: clamp(13px, 2.3vw, 17px); letter-spacing: -.04em; }
.sr-video-popup__close {
    display: flex;
    flex: 0 0 56px;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    padding: 0;
    margin: 0;
    border: 1px solid rgba(255,255,255,.26);
    border-radius: 50%;
    color: #fff;
    background: rgba(255,255,255,.12);
    font-size: 40px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.sr-video-popup__close:hover { background: rgba(255,255,255,.25); }
.sr-video-popup__close:focus-visible { outline: 3px solid #8dc5ff; outline-offset: 3px; }
.sr-video-popup__frame {
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 0;
    overflow: hidden;
    border-radius: 12px;
    background: #000;
}
.sr-video-popup__dialog--short .sr-video-popup__frame { aspect-ratio: 9 / 16; }
.sr-video-popup__frame iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (max-width: 480px) {
    .sr-video-showcase__hotspot { border-radius: 16px; }
    .sr-video-popup__header { min-height: 58px; }
    .sr-video-popup__close { width: 52px; height: 52px; flex-basis: 52px; font-size: 38px; }
}
@media (prefers-reduced-motion: reduce) {
    .sr-video-popup, .sr-video-showcase__hotspot { transition: none; }
}

.sr-video-popup__external {
    display: inline-block;
    align-self: flex-end;
    padding: 9px 2px;
    color: #dae8ff;
    font-size: 12px;
    line-height: 1.5;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.sr-video-popup__external:focus-visible { outline: 2px solid #8dc5ff; outline-offset: 3px; }


/* V12: img14.jpg (Q1~Q6) + img15.jpg (Q7~Q24) 이미지형 FAQ */
.sr-faq { background: #f8fbff; }
.sr-faq__primary, .sr-faq__more-inner { width: 100%; margin: 0; padding: 0; line-height: 0; }
/* 보이는 원본 질문 카드 전체만 클릭 대상으로 사용합니다. 화살표를 덧그리지 않습니다. */
.sr-faq__button { left: 2.8%; right: 2.8%; border-radius: 24px; }
.sr-faq__button--first { top: 82.2%; height: 16%; }
.sr-faq__button--regular { top: 7%; height: 85%; }
.sr-faq__button--extra-first { top: 77%; height: 21%; }
.sr-faq__button--extra { top: 6.5%; height: 85%; }
.sr-faq__button:hover { background: rgba(48, 132, 245, .035); }
.sr-faq__button:focus-visible,
.sr-faq__more-button:focus-visible { outline: 3px solid #2580ef; outline-offset: -4px; }
.sr-faq__more-button {
    position: absolute;
    z-index: 2;
    left: 2.8%; right: 2.8%;
    top: 20%; height: 48%;
    width: auto;
    border: 0;
    padding: 0; margin: 0;
    background: transparent;
    border-radius: 26px;
    appearance: none;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.sr-faq__more-button:hover { background: rgba(48, 132, 245, .035); }
.sr-faq__more {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    min-width: 0;
    width: 100%;
    overflow: hidden;
    transition: grid-template-rows .37s cubic-bezier(.2,.8,.2,1), visibility .37s;
}
.sr-faq__more--open { grid-template-rows: 1fr; visibility: visible; }
.sr-faq__more-inner { min-height: 0; overflow: hidden; }
@media (max-width: 480px) {
    .sr-faq__button, .sr-faq__more-button { border-radius: 13px; }
}
@media (prefers-reduced-motion: reduce) {
    .sr-faq__more { transition: none; }
}


/* V13 - 온라인 문의: img16 비주얼 + 실제 PHP 폼 / 기존 이미지 및 FAQ 레이아웃 유지 */
.sr-consult { width: 100%; margin: 0; padding: 0 0 24px; background: linear-gradient(155deg,#f3f7fb 0%,#fff 42%,#f4f7fb 100%); color: #071021; line-height: 1.5; }
.sr-consult__banner { display: block; width: 100%; height: auto; }
.sr-consult__symbols { position:absolute; width:0; height:0; overflow:hidden; }
.sr-consult__form {
    width: calc(100% - clamp(26px,6.2%,44px));
    margin: 0 auto;
    padding: clamp(14px,3.4vw,26px) clamp(11px,2.3vw,20px) clamp(18px,3.8vw,30px);
    border-radius: 20px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 10px 30px rgba(42,58,79,.045);
}
.sr-consult__row { display: grid; grid-template-columns: minmax(0,35%) minmax(0,1fr); gap: clamp(7px,1.6vw,12px); width:100%; margin: 0 0 clamp(8px,1.6vw,13px); align-items: stretch; }
.sr-consult__label { display:flex; gap:clamp(6px,1.3vw,12px); align-items:center; min-width:0; min-height:clamp(52px,9.5vw,78px); padding: 9px clamp(8px,2vw,18px); color:#fff; background:linear-gradient(130deg,#3c4044,#595f65); border-radius:8px; font-weight:600; font-size:clamp(12px,2.7vw,21px); line-height:1.3; letter-spacing:-.055em; }
.sr-consult__label span { min-width:0; overflow-wrap:break-word; }
.sr-consult__label b { font-weight:700; color:#fff; }
.sr-consult__icon { display:block; flex:0 0 clamp(18px,3vw,28px); width:clamp(18px,3vw,28px); height:clamp(18px,3vw,28px); fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.sr-consult__control { display:flex; min-width:0; position:relative; }
.sr-consult__control input, .sr-consult__control select, .sr-consult__control textarea { display:block; width:100%; min-width:0; height:100%; min-height:clamp(52px,9.5vw,78px); margin:0; border:1.5px solid #b4bac4; border-radius:8px; box-shadow:none; background:#fff; color:#121926; padding:12px clamp(10px,2.6vw,22px); font:inherit; font-size:clamp(12px,2.7vw,21px); line-height:1.4; appearance:none; -webkit-appearance:none; outline:0; }
.sr-consult__control input::placeholder, .sr-consult__control textarea::placeholder { color:#777f8d; opacity:1; }
.sr-consult__control input:focus, .sr-consult__control select:focus, .sr-consult__control textarea:focus { border-color:#1680f5; box-shadow:0 0 0 3px rgba(37,126,239,.16); }
.sr-consult__control--select::after { content:""; position:absolute; pointer-events:none; width:11px; height:11px; right:clamp(12px,2.6vw,23px); top:calc(50% - 8px); border-right:3px solid #101520; border-bottom:3px solid #101520; transform:rotate(45deg); }
.sr-consult__control select { padding-right:clamp(30px,5vw,48px); cursor:pointer; }
.sr-consult__row--message .sr-consult__label { align-items:center; min-height:clamp(142px,25vw,206px); }
.sr-consult__row--message .sr-consult__control textarea { min-height:clamp(142px,25vw,206px); resize:vertical; }
.sr-consult__privacy { margin: clamp(15px,2.7vw,22px) 1px 16px; color:#343d4a; font-size:clamp(11px,1.75vw,13px); line-height:1.65; }
.sr-consult__agree-label { display:flex; align-items:flex-start; gap:9px; cursor:pointer; font-size:clamp(12px,2.1vw,15px); font-weight:700; }
.sr-consult__agree-label input { flex:0 0 18px; width:18px; height:18px; margin:3px 0 0; accent-color:#1379e9; }
.sr-consult__agree-label b { color:#e4484e; }
.sr-consult__privacy p { margin:7px 0 0 27px; }
.sr-consult__privacy a { text-decoration:underline; text-underline-offset:2px; color:#1269d3; }
.sr-consult__submit { display:flex; align-items:center; justify-content:center; gap:12px; width:100%; min-height:clamp(51px,9vw,70px); padding:12px 16px; border:0; border-radius:12px; color:#fff; background:linear-gradient(110deg,#0785ed,#0051c5); box-shadow:0 8px 18px rgba(0,106,219,.22); font-size:clamp(15px,2.9vw,21px); font-weight:800; letter-spacing:-.04em; cursor:pointer; }
.sr-consult__submit:hover { filter:brightness(1.08); }
.sr-consult__submit:focus-visible { outline:3px solid #1c80ed; outline-offset:3px; }
.sr-consult__submit span { font-size:1.35em; line-height:1; }
.sr-consult__required { margin:10px 0 0; color:#707784; text-align:center; font-size:12px; }
.sr-consult__honey { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
@media (max-width:420px) {
 .sr-consult__form { width:calc(100% - 20px); padding:13px 9px 20px; border-radius:14px; }
 .sr-consult__row { grid-template-columns:minmax(0,37%) minmax(0,1fr); gap:6px; margin-bottom:7px; }
 .sr-consult__label { padding:9px 6px; font-size:12px; gap:6px; border-radius:6px; }
 .sr-consult__icon { width:18px; height:18px; flex-basis:18px; }
 .sr-consult__control input, .sr-consult__control select, .sr-consult__control textarea { padding:9px 8px; font-size:12px; border-radius:6px; }
 .sr-consult__control select { padding-right:23px; }
 .sr-consult__control--select::after { width:8px; height:8px; border-width:2px; right:10px; top:calc(50% - 6px); }
}


html { scroll-behavior: smooth; }
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* V14: 개인정보처리방침을 현재 신청폼 아래 펼쳐서 확인 */
.sr-consult__policy { margin:12px 0 0 26px; border:1px solid #dce7f2; border-radius:10px; overflow:hidden; background:#f7faff; }
.sr-consult__policy summary { display:flex; justify-content:space-between; align-items:center; gap:10px; cursor:pointer; padding:12px; color:#145ea6; font-size:clamp(11px,1.9vw,13px); font-weight:750; list-style:none; }
.sr-consult__policy summary::-webkit-details-marker{display:none}
.sr-consult__policy summary span {font-size:22px; transition:transform .25s;}
.sr-consult__policy[open] summary span{transform:rotate(180deg)}
.sr-consult__policy-scroll { max-height:265px; overflow-y:auto; background:white; border-top:1px solid #dce7f2; padding:14px; color:#3a475a; }
.sr-consult__policy-scroll pre { white-space:pre-wrap; overflow-wrap:anywhere; word-break:keep-all; font:inherit; font-size:12px; line-height:1.9; margin:0; }
@media(max-width:480px){.sr-consult__policy{margin-left:0}}

/* V14: 청소로봇 신규 상세 콘텐츠 제공 전의 안전한 안내 영역 */
.sr-robot-coming[hidden]{display:none!important}
.sr-robot-coming{display:block;padding:45px 30px 50px;background:linear-gradient(135deg,#f1f7ff,#fff);color:#10213e;text-align:center;line-height:1.7;}
.sr-robot-coming__eyebrow{font-size:10px;letter-spacing:.15em;font-weight:800;color:#2a78db}
.sr-robot-coming h2{font-size:28px;letter-spacing:-.04em;margin:10px 0}
.sr-robot-coming p{font-size:14px;color:#5e6f84;max-width:460px;margin:0 auto 20px}
.sr-robot-coming a{display:inline-block;background:#0c69d7;border-radius:40px;color:#fff;text-decoration:none;padding:12px 26px;font-weight:700;font-size:14px}

/* V26: 퀵메뉴 바탕 #FFFFFF, 캡슐 버튼 #F1F1F3 (크기·아이콘·폰트 유지) */
.sr-quick {
    position: fixed;
    z-index: 70;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    width: min(100%, 720px);
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px));
    /* 요청 색상: 완전 불투명 흰색 */
    background: #FFFFFF;
    border-top: 1px solid rgba(255, 255, 255, .96);
    border-left: 1px solid rgba(255, 255, 255, .80);
    border-right: 1px solid rgba(255, 255, 255, .80);
    border-radius: 15px 15px 0 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 -8px 26px rgba(23, 38, 57, .10),
                inset 0 1px 1px rgba(255, 255, 255, .90);
    font-family: inherit;
    transition: opacity .18s ease, visibility .18s ease;
}
.sr-quick__link {
    display: inline-flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    min-height: 57px;
    padding: 11px 5px;
    border: 1px solid rgba(255,255,255,.98);
    border-radius: 999px;
    background: #F1F1F3;
    color: #141414;
    text-decoration: none;
    box-shadow: 0 4px 13px rgba(32,47,66,.045), inset 0 2px 2px rgba(255,255,255,.78);
    font-size: clamp(14px, 3.35vw, 18px);
    font-weight: 800;
    line-height: 1.25;
    white-space: nowrap;
    transition: background .18s ease, box-shadow .18s ease;
    -webkit-tap-highlight-color: transparent;
}
.sr-quick__link:hover {
    background: #F1F1F3;
    box-shadow: 0 5px 16px rgba(20,28,40,.095);
    color: #141414;
}
.sr-quick__link:focus-visible {
    outline: 3px solid #126ee1;
    outline-offset: 2px;
}
.sr-quick__link svg {
    display: block;
    flex: 0 0 25px;
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.sr-quick__link .sr-quick__filled-icon { fill: currentColor; stroke: currentColor; }
.sr-quick__link .sr-quick__chat-dot { fill: #F1F1F3; stroke: none; }
body.sr-menu-open .sr-quick,
.sr-quick.sr-quick--off {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
@media (max-width: 480px) {
    .sr-quick {
        gap: 6px;
        padding: 10px 7px calc(10px + env(safe-area-inset-bottom, 0px));
    }
    .sr-quick__link {
        min-height: 54px;
        gap: 5px;
        padding: 10px 3px;
        font-size: clamp(13px, 3.55vw, 16px);
    }
    .sr-quick__link svg {
        flex-basis: 21px;
        width: 21px;
        height: 21px;
    }
}
@media (max-width: 355px) {
    .sr-quick { gap: 4px; padding-left: 4px; padding-right: 4px; }
    .sr-quick__link { gap: 3px; font-size: 12px; }
    .sr-quick__link svg { flex-basis: 19px; width: 19px; height: 19px; }
}

/* V14: 국세청 사업자등록증 기초 회사정보를 사용하는 공통 푸터 */
.sr-business-footer{padding:31px 25px 132px;color:#6a7480;background:#f4f6f8;font-size:12px;line-height:1.9;word-break:keep-all}
.sr-business-footer__top{display:flex;flex-direction:column;border-bottom:1px solid #dce2ea;padding-bottom:16px;margin-bottom:17px;gap:3px}
.sr-business-footer__top strong{color:#17243a;font-size:17px;letter-spacing:-.03em}
.sr-business-footer__top span{font-size:9px;letter-spacing:.13em;color:#95a2b5}
.sr-business-footer p{margin:5px 0;color:#677384}
.sr-business-footer p span{font-weight:700;color:#38475d}
.sr-business-footer p i{font-style:normal;margin:0 5px}
.sr-business-footer__links{display:flex;flex-wrap:wrap;gap:8px 14px;margin:18px 0 12px}
.sr-business-footer__links a{color:#4a5b70;font-weight:700;text-decoration:none}
.sr-business-footer__links a:hover{text-decoration:underline}
.sr-business-footer small{font-size:10px;color:#9da7b2}


/* V19 : 헤더는 처음 위치에만 표시하고, 스크롤 따라다니지 않음 */
html { scroll-padding-top: 24px; }
.sr-page .sr-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 80;
    transform: none;
    width: 100%;
    max-width: none;
    padding: clamp(20px, 7.2vw, 52px) 4.5% 0;
    background: transparent;
    box-shadow: none;
    border: 0;
}
.sr-page .sr-header.sr-header--scrolled,
.sr-page--sub .sr-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: clamp(20px, 7.2vw, 52px) 4.5% 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    border: 0;
}
.sr-page .sr-header.sr-header--scrolled .sr-brand,
.sr-page--sub .sr-header .sr-brand,
.sr-page .sr-header .sr-brand {
    flex: 0 1 68.5%;
    width: 68.5%;
    max-width: 500px;
}
.sr-page--sub .sr-shell { padding-top: 0; }
.sr-page .sr-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 90;
}
.sr-page .sr-menu {
    position: fixed;
    top: 0;
    bottom: auto;
    right: max(0px, calc((100vw - 720px) / 2));
    z-index: 100;
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    width: min(60%, 430px);
}
#sr-site-menu .sr-menu__link { text-decoration: none; }
@media (max-width:720px) {
    .sr-page .sr-menu { inset: 0; width: 100%; height: 100dvh; }
    .sr-page .sr-header .sr-brand,
    .sr-page .sr-header.sr-header--scrolled .sr-brand,
    .sr-page--sub .sr-header .sr-brand {
        width: 72%;
        max-width: 430px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .sr-page .sr-header, .sr-page .sr-header .sr-brand {transition:none;}
}


/* =============================================================
   V20 — 회사소개 등 서브페이지 헤더 레이아웃 보정
   메인(index3.php)의 이미지 위 절대 위치 헤더는 그대로 유지.
   서브페이지에서는 헤더를 문서 흐름에 포함하여 본문과 겹침 방지.
   ============================================================= */
body.sr-page.sr-page--sub .sr-shell {
    padding-top: 0;
}
body.sr-page.sr-page--sub .sr-header,
body.sr-page.sr-page--sub .sr-header.sr-header--scrolled {
    position: relative;
    z-index: 80;
    top: auto;
    left: auto;
    right: auto;
    transform: none;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 4.5% 18px;
    border: 0;
    border-bottom: 1px solid #edf1f5;
    background: linear-gradient(180deg, #fff 0%, #fbfdff 100%);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
body.sr-page.sr-page--sub .sr-header .sr-brand,
body.sr-page.sr-page--sub .sr-header.sr-header--scrolled .sr-brand {
    flex: 0 1 63%;
    width: 63%;
    max-width: 408px;
    min-width: 0;
}
body.sr-page.sr-page--sub .sr-header .sr-brand::before {
    opacity: .58;
    filter: blur(10px);
}
body.sr-page.sr-page--sub .sr-header .sr-menu-toggle {
    flex-shrink: 0;
}
@media (max-width: 480px) {
    body.sr-page.sr-page--sub .sr-header,
    body.sr-page.sr-page--sub .sr-header.sr-header--scrolled {
        padding: 12px 4% 13px;
        gap: 10px;
    }
    body.sr-page.sr-page--sub .sr-header .sr-brand,
    body.sr-page.sr-page--sub .sr-header.sr-header--scrolled .sr-brand {
        flex-basis: 69%;
        width: 69%;
        max-width: none;
    }
}

/* =====================================================
   V21: 로고를 첨부 우측 예시 크기로 축소
   - 메인/회사소개 동일 적용
   - 햄버거와 세로 중앙 정렬
   - 로고 배경의 은은한 흰색 번짐 유지
   ===================================================== */
body.sr-page .sr-header .sr-brand,
body.sr-page .sr-header.sr-header--scrolled .sr-brand,
body.sr-page.sr-page--sub .sr-header .sr-brand,
body.sr-page.sr-page--sub .sr-header.sr-header--scrolled .sr-brand {
    flex: 0 1 305px;
    width: 305px;
    max-width: 305px;
    min-width: 0;
    padding: 5px 12px;
}
body.sr-page .sr-header,
body.sr-page.sr-page--sub .sr-header {
    align-items: center;
}
@media (max-width: 420px) {
    body.sr-page .sr-header .sr-brand,
    body.sr-page .sr-header.sr-header--scrolled .sr-brand,
    body.sr-page.sr-page--sub .sr-header .sr-brand,
    body.sr-page.sr-page--sub .sr-header.sr-header--scrolled .sr-brand {
        padding: 4px 8px;
    }
}

/* V22: 메인 모바일에서만 로고 + 햄버거를 약 12px 위로 이동.
   PC와 회사소개 페이지의 헤더는 변경하지 않습니다. */
@media (max-width: 720px) {
    body.sr-page.sr-page--home .sr-header,
    body.sr-page.sr-page--home .sr-header.sr-header--scrolled {
        padding-top: clamp(9px, 4vw, 20px);
    }
}

/* V27: 모바일 햄버거 버튼의 외곽 크기를 로고 왼쪽 원형 심볼과 동일한 비율로 조정.
   로고 이미지 자체와 PC 크기, 헤더의 세로 중앙 정렬은 그대로 유지. */
@media (max-width: 480px) {
    body.sr-page .sr-header .sr-menu-toggle {
        flex: 0 0 clamp(40px, 11.2vw, 52px);
        width: clamp(40px, 11.2vw, 52px);
        height: clamp(40px, 11.2vw, 52px);
        border-radius: clamp(13px, 3.9vw, 17px);
        gap: 4px;
    }
    body.sr-page .sr-header .sr-menu-toggle__line {
        width: 50%;
        height: 2px;
    }
    body.sr-page .sr-header .sr-menu-toggle:hover .sr-menu-toggle__line:nth-child(2) {
        width: 40%;
    }
}


/* V28: 새로운 img8.jpg (1080 × 1930) 하단의 두 제품을 독립 페이지로 연결 */
.sr-models__guide-link {
    position: absolute;
    z-index: 3;
    display: block;
    top: 24.5%;
    height: 57%;
    border-radius: 18px;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.sr-models__guide-link--mini { left: 36%; width: 29%; }
.sr-models__guide-link--nova { left: 67%; width: 29%; }
.sr-models__guide-link:hover { background: rgba(29, 103, 248, .055); }
.sr-models__guide-link:focus-visible { outline: 3px solid #1680ff; outline-offset: -3px; }

/* 햄버거 메뉴: 안내로봇 → 제품별 하위 메뉴 (서빙로봇은 기존 앵커 이동) */
.sr-menu__group { margin: 0; padding: 0; }
.sr-menu__group > summary {
    cursor: pointer;
    list-style: none;
    -webkit-tap-highlight-color: transparent;
}
.sr-menu__group > summary::-webkit-details-marker { display: none; }
.sr-menu__group > summary::marker { content: ''; }
.sr-menu__group > summary .sr-menu__arrow--expand {
    display: inline-block;
    font-size: 23px;
    line-height: 1;
    transform: translateY(-2px) rotate(0deg);
    transition: transform .25s ease;
}
.sr-menu__group[open] > summary .sr-menu__arrow--expand {
    transform: translateY(1px) rotate(180deg);
}
.sr-menu__group > summary:focus-visible,
.sr-menu__children a:focus-visible { outline: 2px solid #0b72f0; outline-offset: -2px; }
.sr-menu__children {
    display: grid;
    gap: 0;
    overflow: hidden;
    padding: 2px 0 10px 36px;
    background: #f6f9fe;
    border-bottom: 1px solid #e9edf3;
    animation: sr-guide-children-in .27s cubic-bezier(.16,.84,.2,1) both;
}
@keyframes sr-guide-children-in {
    from { opacity: 0; transform: translateY(-9px); }
    to { opacity: 1; transform: translateY(0); }
}
.sr-menu__children a {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 13px 9px 13px 0;
    color: #0d213b;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    line-height: 1.4;
    border-bottom: 1px solid #e7edf5;
}
.sr-menu__children a:last-child { border-bottom: 0; }
.sr-menu__children a:hover { color: #126ae1; }
.sr-menu__children small {
    color: #8c9aac;
    font-size: 9px;
    font-weight: 650;
    letter-spacing: .05em;
}
.sr-menu__children a span { margin-left: auto; color: #80a1c7; }
@media (max-width: 480px) {
    .sr-models__guide-link { border-radius: 9px; }
    .sr-menu__children { padding-left: 36px; }
}
@media (prefers-reduced-motion: reduce) {
    .sr-menu__children { animation: none; }
    .sr-menu__group > summary .sr-menu__arrow--expand { transition: none; }
}

/* V30: shared page components on robot-model pages */
body.sr-product-menu-open .sr-quick { opacity: 0; visibility: hidden; pointer-events: none; }
.sr-product-common { max-width: 720px; margin: 0 auto; background: #fff; }
.sr-product-common .sr-consult { margin-top: 0; }


/* ================================================================
   PC 홈 (2026-10-26)
   기존 720px 모바일/서브페이지 CSS는 변경하지 않습니다.
   PC에서는 1200px 이미지 + 실제 세부 펼침 / 영상 / FAQ 지원
   ================================================================ */
.sr-pc-section { display: none; }
.sr-pc-section, .sr-pc-section * { box-sizing: border-box; }
.sr-pc-full, .sr-pc-art { display:block;width:100%;height:auto;max-width:none;margin:0;padding:0;vertical-align:top; }
.sr-pc-piece, .sr-pc-full-wrap { position:relative;display:block;width:100%;padding:0;margin:0;overflow:hidden;line-height:0; }
.sr-pc-hotspot { position:absolute;z-index:2;display:block;padding:0;margin:0;border:0;border-radius:12px;background:transparent;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;appearance:none; }
.sr-pc-hotspot:hover { background:rgba(19,98,238,.06); }
.sr-pc-hotspot[aria-expanded="true"] { background:rgba(19,98,238,.045); }
.sr-pc-guide .sr-pc-hotspot:hover { background:rgba(240,45,70,.07); }
.sr-pc-hotspot:focus-visible,.sr-pc-faq-row-button:focus-visible,.sr-pc-faq-more-trigger:focus-visible {outline:3px solid #1769ed;outline-offset:-3px;}
.sr-pc-answer { display:grid;grid-template-rows:0fr;visibility:hidden;width:100%;margin:0;padding:0;overflow:hidden;background:transparent;transition:grid-template-rows .35s ease,visibility .35s; }
.sr-pc-answer--open { grid-template-rows:1fr;visibility:visible; }
.sr-pc-answer-inner { min-width:0;min-height:0;overflow:hidden;margin:0 auto; width:100%;padding:0;line-height:0; }
.sr-pc-answer-inner img {display:block;width:100%;max-width:1080px;height:auto;margin:0 auto;padding:0;border:0;}
.sr-pc-guide,.sr-pc-steps,.sr-pc-care {background:#f9edf0;}
.sr-pc-models {background:#11202e;}
.sr-pc-faq {position:relative;background:#e9f7ff;color:#07132c;}
.sr-pc-faq-more-trigger {position:absolute;z-index:5;top:calc(100% - 101px);left:31%;width:38%;height:70px;padding:0;border:0;border-radius:25px;background:transparent;cursor:pointer;}
/* FAQ 더보기 버튼은 접힘 영역 아래에서 이미지 마지막 조각 바로 위에 배치 */
.sr-pc-faq-more { display:grid;grid-template-rows:0fr;visibility:hidden;overflow:hidden;width:100%;transition:grid-template-rows .35s ease,visibility .35s; }
.sr-pc-faq-more--open {grid-template-rows:1fr;visibility:visible;}
.sr-pc-faq-more-inner {min-height:0;overflow:hidden;padding:18px 32px 45px;background:#eaf7ff;line-height:1.35;}
.sr-pc-faq-additional-header {padding:12px 26px 18px;line-height:1.25;color:#07122d;}
.sr-pc-faq-additional-header span {display:inline-block;padding:7px 16px;border-radius:100px;background:#d5edff;color:#0860e4;font-weight:800;font-size:16px;}
.sr-pc-faq-additional-header h3 {margin:10px 0 6px;font-size:52px;letter-spacing:-.06em;font-weight:900;}
.sr-pc-faq-additional-header h3 em {font-style:normal;color:#0860ed;}
.sr-pc-faq-additional-header p {margin:0;font-size:20px;}
.sr-pc-faq-row {margin:8px 0;}
.sr-pc-faq-row-button {display:flex;align-items:center;gap:16px;width:100%;min-height:62px;padding:9px 19px;border:0;border-radius:14px;background:#fff;cursor:pointer;text-align:left;font-family:inherit;color:#06132d;line-height:1.4;}
.sr-pc-faq-num {flex:0 0 78px;display:flex;align-items:center;justify-content:center;padding:7px 3px;background:#dff1ff;border-radius:50px;font-size:23px;font-weight:800;color:#005ff2;}
.sr-pc-faq-row-title {flex:1;min-width:0;font-size:21px;font-weight:800;word-break:keep-all;}
.sr-pc-faq-arrow {width:38px;height:38px;flex:0 0 38px;background:#e4f4ff;border-radius:50%;display:flex;align-items:center;justify-content:center;}
.sr-pc-faq-arrow::after {content:'';width:12px;height:12px;border-right:3px solid #075cde;border-bottom:3px solid #075cde;transform:translateY(-3px) rotate(45deg);transition:transform .2s;}
.sr-pc-faq-row-button[aria-expanded="true"] .sr-pc-faq-arrow::after {transform:translateY(3px) rotate(225deg);}
.sr-pc-faq .sr-pc-answer {background:#f5fbff;}
.sr-pc-faq .sr-pc-answer-inner {padding:0 2%;}
.sr-pc-faq .sr-pc-answer-inner img {max-width:1080px;}
@media (min-width:900px) {
  body.sr-page.sr-page--home { background:#ededed; }
  body.sr-page.sr-page--home .sr-shell { max-width:1200px;width:100%; }
  body.sr-page.sr-page--home .sr-main {width:100%;max-width:1200px;margin:auto;}
  body.sr-page.sr-page--home .sr-main > .sr-image-section,
  body.sr-page.sr-page--home .sr-main > .sr-guide,
  body.sr-page.sr-page--home .sr-main > .sr-video-showcase {display:none !important;}
  body.sr-page.sr-page--home .sr-pc-section {display:block;}
  body.sr-page.sr-page--home .sr-header,
  body.sr-page.sr-page--home .sr-header.sr-header--scrolled {padding:20px 32px 0;}
  body.sr-page.sr-page--home .sr-header .sr-brand,
  body.sr-page.sr-page--home .sr-header.sr-header--scrolled .sr-brand {flex:0 0 390px;width:390px;max-width:390px;}
  body.sr-page.sr-page--home .sr-menu {right:max(0px,calc((100vw - 1200px)/2));width:min(460px,45vw);}
  body.sr-page.sr-page--home .sr-quick {
    left:auto;right:clamp(16px,2.3vw,40px);bottom:22px;transform:none;
    flex-direction:column;align-items:stretch;gap:8px;
    width:182px;padding:10px;border:1px solid #fff;border-radius:18px;
    box-shadow:0 10px 35px rgba(12,35,68,.18);background:rgba(255,255,255,.97);
  }
  body.sr-page.sr-page--home .sr-quick__link {flex:0 0 auto;min-height:48px;font-size:15px;gap:8px;padding:10px 12px;}
  body.sr-page.sr-page--home .sr-quick__link svg {width:21px;height:21px;flex-basis:21px;}
  body.sr-page.sr-page--home .sr-consult {padding:28px 0 46px;}
  body.sr-page.sr-page--home .sr-consult__banner {max-width:720px;margin:0 auto;}
  body.sr-page.sr-page--home .sr-consult__form {max-width:780px;}
  body.sr-page.sr-page--home .sr-business-footer {padding-bottom:64px;}
}
@media (prefers-reduced-motion:reduce) {
  .sr-pc-answer,.sr-pc-faq-more,.sr-pc-faq-arrow::after {transition:none;}
}

.sr-pc-faq-more-surface {position:relative;}
.sr-pc-faq-more-surface .sr-pc-faq-more-trigger {top:6%;height:80%;}

/* ============================================================
   PC 수정 2026-10-26: 펼침 색상 + 1200px 문의 배너
   모바일 아코디언/로고/햄버거 스타일은 그대로 유지
   ============================================================ */
.sr-consult__picture {display:block;width:100%;line-height:0;}
.sr-consult__picture .sr-consult__banner {display:block;width:100%;height:auto;}

@media (min-width: 900px) {
  /* 메인 PC 로고: 기존 305px에서 390px로 확대 */
  body.sr-page.sr-page--home .sr-header .sr-brand,
  body.sr-page.sr-page--home .sr-header.sr-header--scrolled .sr-brand {
    flex:0 0 390px;
    width:390px;
    max-width:390px;
  }

  /* 펼쳤을 때 원본 PC 카드 배경과 연결되도록 영역별 색상 지정 */
  body.sr-page.sr-page--home .sr-pc-guide .sr-pc-answer { background:#fed2cf; } /* pc_img4 */
  body.sr-page.sr-page--home .sr-pc-steps .sr-pc-answer { background:#fdf3e7; } /* pc_img7 */
  body.sr-page.sr-page--home .sr-pc-care .sr-pc-answer  { background:#caebfe; } /* pc_img5 */
  body.sr-page.sr-page--home .sr-pc-faq .sr-pc-answer   { background:#eef7fe; } /* pc_img14 */

  /* 문의 이미지: PC에서 1200px 원본 폭으로 표시 (기존 720px 제한 해제) */
  body.sr-page.sr-page--home .sr-consult__picture,
  body.sr-page.sr-page--home .sr-consult__banner {
    width:100%;max-width:1200px;margin:0 auto;
  }
}


/* ============================================================
   2026-10-29 수정 / 전체 배경 흰색, PC 펼침 상세 원본 비율,
   상담 폼: 참조 이미지의 상단 레이블 + 2열 카드 + 짧은 입력 높이
   실제 폼 POST / 개인정보 동의 기능은 sr-consult.php 그대로 사용
   ============================================================ */
body.sr-page.sr-page--home { background: #ffffff; }
.sr-consult { background: #ffffff; }

/* PC 펼침 이미지는 별도 1200px 버전을 온전히 표시합니다. */
.sr-pc-answer-inner img,
.sr-pc-faq .sr-pc-answer-inner img {
    width: 100%;
    max-width: 1200px;
    height: auto;
}

/* 폼과 필드 2열 배치 */
.sr-consult__form {
    width: calc(100% - 40px);
    max-width: 1128px;
    margin: 0 auto;
    padding: 26px 28px 30px;
    border: 1px solid #dce3ed;
    border-radius: 15px;
    background: #ffffff;
    box-shadow: none;
}
.sr-consult__fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 38px;
    row-gap: 26px;
    width: 100%;
}
.sr-consult__fields .sr-consult__row {
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-width: 0;
    width: 100%;
    margin: 0;
}
.sr-consult__fields .sr-consult__label {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: #09152b;
    background: transparent;
    box-shadow: none;
    font-size: clamp(15px, 1.7vw, 20px);
    font-weight: 800;
    line-height: 1.45;
    letter-spacing: -.035em;
}
.sr-consult__fields .sr-consult__label span { overflow-wrap: normal; }
.sr-consult__fields .sr-consult__label b { color: #075cff; font-weight: 800; }
.sr-consult__fields .sr-consult__icon { display: none; }
.sr-consult__fields .sr-consult__control { display: block; width: 100%; min-width: 0; }
.sr-consult__fields .sr-consult__control input,
.sr-consult__fields .sr-consult__control select,
.sr-consult__fields .sr-consult__control textarea {
    display: block;
    width: 100%;
    height: 60px;
    min-height: 60px;
    margin: 0;
    padding: 12px 18px;
    border: 1px solid #9eacca;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: none;
    color: #182743;
    font-size: clamp(15px, 1.7vw, 19px);
    font-weight: 400;
    line-height: 1.5;
}
.sr-consult__fields .sr-consult__control input::placeholder,
.sr-consult__fields .sr-consult__control textarea::placeholder { color: #4d5e7d; }
.sr-consult__fields .sr-consult__control--select::after {
    width: 10px;
    height: 10px;
    right: 20px;
    top: calc(50% - 8px);
    border-width: 2px;
    border-color: #09152b;
}
.sr-consult__fields .sr-consult__control select { padding-right: 40px; }
.sr-consult__fields .sr-consult__row--message,
.sr-consult__fields .sr-consult__row:has(textarea) { grid-column: 1 / -1; }
.sr-consult__fields .sr-consult__row--message .sr-consult__label { min-height: 0; align-items: center; }
.sr-consult__fields .sr-consult__control textarea,
.sr-consult__fields .sr-consult__row--message .sr-consult__control textarea {
    height: 103px;
    min-height: 103px;
    resize: vertical;
}
.sr-consult__privacy { margin-top: 21px; }

@media (min-width: 900px) {
    body.sr-page.sr-page--home { background: #ffffff; }
    body.sr-page.sr-page--home .sr-consult { padding: 0 0 46px; background: #ffffff; }
    body.sr-page.sr-page--home .sr-consult__form {
        width: calc(100% - 80px);
        max-width: 1128px;
        padding: 30px 32px;
    }
}
@media (max-width: 639px) {
    .sr-consult__form {
        width: calc(100% - 24px);
        padding: 18px 15px 23px;
        border-radius: 13px;
    }
    .sr-consult__fields { grid-template-columns: minmax(0, 1fr); row-gap: 15px; }
    .sr-consult__fields .sr-consult__row { gap: 6px; }
    .sr-consult__fields .sr-consult__label { min-height: 0; padding: 0; font-size: 14px; }
    .sr-consult__fields .sr-consult__control input,
    .sr-consult__fields .sr-consult__control select,
    .sr-consult__fields .sr-consult__control textarea { height: 48px; min-height: 48px; padding: 10px 12px; font-size: 15px; }
    .sr-consult__fields .sr-consult__control textarea { height: 86px; min-height: 86px; }
    .sr-consult__fields .sr-consult__control--select::after { right: 13px; width: 8px; height: 8px; top: calc(50% - 6px); }
    .sr-consult__privacy { margin-top: 16px; }
}


/* ============================================================
   2026-11-01 검색·AI 노출 개선
   1) 이미지 조각(sr-slice): SVG <image> 대신 지연 로딩 <img> 사용
      → 숨겨진 PC/모바일 레이아웃의 큰 이미지를 내려받지 않습니다.
      --sr-y: 원본에서 잘라 보여줄 시작 y, --sr-w: 원본 폭, --sr-h: 보여줄 높이
   2) FAQ 답변 텍스트 카드: 기존 img14_N.jpg 디자인을 텍스트로 재현
   3) 하단 안내의 서빙로봇 사양 비교표
   ============================================================ */
.sr-slice {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: var(--sr-w) / var(--sr-h);
    overflow: hidden;
    line-height: 0;
}
.sr-slice > img {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    margin: calc(var(--sr-y) / var(--sr-w) * -100%) 0 0;
    padding: 0;
    border: 0;
}
.sr-image-section picture,
.sr-pc-section picture { display: block; line-height: 0; }

.sr-faq-card {
    background: #fbeff3;
    padding: clamp(6px, 1.1vw, 13px);
    line-height: 1.65;
    text-align: left;
}
.sr-faq-card__box {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: clamp(10px, 1.8vw, 22px);
    background: #fffafc;
    border: 2px solid #eeb3c3;
    border-radius: clamp(12px, 1.7vw, 20px);
    padding: clamp(14px, 2.2vw, 26px) clamp(14px, 2.4vw, 30px);
}
.sr-faq-card__num {
    flex: 0 0 auto;
    min-width: 2.6em;
    padding: .35em .55em;
    border-radius: .6em;
    background: #f6d4db;
    color: #1e2a55;
    font-size: clamp(13px, 1.6vw, 20px);
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
}
.sr-faq-card__text {
    margin: 0;
    color: #111111;
    font-size: clamp(15px, 1.9vw, 24px);
    font-weight: 700;
    line-height: 1.65;
    letter-spacing: -.02em;
    word-break: keep-all;
    overflow-wrap: anywhere;
}
@media (min-width: 900px) {
    .sr-faq-card { padding: 12px 14px; }
    .sr-faq-card__box { gap: 22px; padding: 24px 30px; border-radius: 20px; }
    .sr-faq-card__text { font-size: 24px; }
    .sr-faq-card__num { font-size: 20px; }
}

.sr-spec-table__wrap {
    margin: 12px 0 14px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #e3e8f0;
    border-radius: 10px;
}
.sr-spec-table__wrap:focus-visible { outline: 2px solid #126bf0; outline-offset: 2px; }
.sr-spec-table {
    width: 100%;
    min-width: 1360px;
    border-collapse: collapse;
    font-size: 13px;
    line-height: 1.5;
}
.sr-spec-table th,
.sr-spec-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #edf0f4;
    border-right: 1px solid #f1f3f7;
    text-align: left;
    vertical-align: top;
    word-break: keep-all;
}
.sr-spec-table thead th { background: #f3f7fd; font-weight: 800; white-space: nowrap; }
.sr-spec-table tbody th { font-weight: 800; white-space: nowrap; }
.sr-spec-table tbody th[scope="rowgroup"] { background: #fafbfd; }
.sr-spec-table tbody th small { display: block; font-weight: 600; color: #64738b; }
.sr-spec-table__size,
.sr-spec-table__weight,
.sr-spec-table__aisle,
.sr-spec-table__runtime,
.sr-spec-table__charge,
.sr-spec-table__speed { white-space: nowrap; }
.sr-spec-table__payload,
.sr-spec-table__tray { min-width: 150px; }
.sr-spec-table__features { min-width: 300px; }