/* ============================================================
   AgentRigor (p_agentrigor)
   반응형 기준:(1240 / 960 / 640 / 480)
   - 데스크톱 시안 1920 기준, 콘텐츠 폭 1250px
   - 모바일 시안 375 기준, 좌우 여백 16px
============================================================ */

/* ---------- 공통 ---------- */
/* 사이트 공통 #container/.contents의 overflow:hidden이 position:sticky(비교표 핀)를 막으므로 이 페이지만 해제 */
.p_agentrigor #container,
.p_agentrigor #container .contents{overflow: visible;}
.p_agentrigor .quick_wrap{display: none;}
/* 헤더 GNB: 흰 히어로 배경 대비 — 상단 메뉴 글자 + KR/EN 어둡게 (로고는 기본 유지) */
.p_agentrigor #gnb_layout .depth1_ul > li > a span,
.p_agentrigor #gnb_layout .depth1_ul > li > a:hover span{ color: #1c1c1c; } /* 평상시·호버 모두 어둡게 유지 */
.p_agentrigor #top_layout .lan .item{ border-color: #1c1c1c; }
.p_agentrigor #top_layout .lan .link{ color: #1c1c1c; }
.p_agentrigor #container .contents{
    font-family: 'Noto Sans KR', sans-serif;
    color: #3B3E43;
    padding-top: 72px; /* 고정 GNB 높이 */
    word-break: keep-all; /* 어절 단위 줄바꿈 — 한 글자만 다음 줄로 떨어지는 것 방지 */
    overflow-wrap: break-word; /* 너무 긴 영단어 등은 예외적으로 허용 */
}
.p_agentrigor .ar_section{position: relative;}
.p_agentrigor .ar_section .inner{
    position: relative;
    max-width: 1250px;
    margin: 0 auto;
    padding: 0 20px;
}
.p_agentrigor .ar_tit{
    text-align: center;
    font-size: 36px;
    font-weight: 500;
    line-height: 48px;
    color: #3B3E43;
}
.p_agentrigor .ar_sub{
    text-align: center;
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    color: #3B3E43;
}
.p_agentrigor .ar_btn_cta{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 20px 40px;
    background: #5677F1;
    border-radius: 42px;
    color: #fff;
    font-size: 20px;
    font-weight: 500;
    transition: background .2s;
}
.p_agentrigor .ar_btn_cta:hover{background: #4062e0;}
/* 보조 CTA(데모 영상 보러가기) — 연한 라벤더 배경 + 파란 글자 */
.p_agentrigor .ar_btn_cta_sub{
    background: #DDE4FC;
    color: #5677F1;
}
.p_agentrigor .ar_btn_cta_sub:hover{background: #C9D5FA;}
.p_agentrigor .blind_txt{
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}
.p_agentrigor .mo_br{display: none;} /* 모바일 전용 줄바꿈 (≤640에서만 표시) */
.p_agentrigor .pc_br{display: inline;} /* 데스크톱 전용 줄바꿈 (≤640에서 숨김) */

/* ---------- 스크롤 리빌 (클래스는 JS가 부여 — JS 꺼진 환경에선 전부 그냥 보임) ---------- */
.p_agentrigor .ar-reveal{
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1);
}
.p_agentrigor .ar-reveal.is-in{
    opacity: 1;
    transform: none;
}
.p_agentrigor .ar-stagger > *{
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1);
}
.p_agentrigor .ar-stagger.is-in > *{opacity: 1; transform: none;}
.p_agentrigor .ar-stagger.is-in > *:nth-child(1){transition-delay: .05s;}
.p_agentrigor .ar-stagger.is-in > *:nth-child(2){transition-delay: .15s;}
.p_agentrigor .ar-stagger.is-in > *:nth-child(3){transition-delay: .25s;}
.p_agentrigor .ar-stagger.is-in > *:nth-child(4){transition-delay: .35s;}
.p_agentrigor .ar-stagger.is-in > *:nth-child(5){transition-delay: .45s;}
.p_agentrigor .ar-stagger.is-in > *:nth-child(6){transition-delay: .55s;}
@media (prefers-reduced-motion: reduce){
    .p_agentrigor .ar-reveal,
    .p_agentrigor .ar-stagger > *{
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ---------- Section 01. Hero ---------- */
.p_agentrigor .ar_hero{
    overflow: hidden;
    background: #fff;
}
.p_agentrigor .ar_hero .inner{
    display: flex;
    align-items: center;
    min-height: 680px;
    padding-top: 60px;
    padding-bottom: 60px;
}
.p_agentrigor .ar_hero .hero_txt{
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    max-width: 620px;
    margin-left: -40px; /* 본문을 컨테이너 기준선보다 왼쪽으로 — 이미지와의 간격 확보 */
}
.p_agentrigor .ar_hero .hero_logo img{
    display: block;
    max-width: 460px;
    width: 100%;
}
/* 로고 - Powered by AxDC 위아래 간격 (부모 gap 40px 상쇄, 값 조절해서 튜닝) */
.p_agentrigor .ar_hero .hero_slogan,
.p_agentrigor .ar_hero .hero_logo_sub{
    margin-top: -30px;
}
.p_agentrigor .ar_hero .hero_logo_sub img{
    display: block;
    max-width: 260px;
    width: 100%;
}
.p_agentrigor .ar_hero .hero_slogan,
.p_agentrigor .ar_hero .hero_desc{
    font-size: 20px;
    line-height: 34px;
    color: #3B3E43;
}
.p_agentrigor .ar_hero .hero_btns{
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
.p_agentrigor .ar_hero .hero_img{
    position: absolute;
    left: 58%; /* 본문과 이미지 사이 간격 — 값 키울수록 이미지가 오른쪽으로 밀려 간격 넓어짐 */
    bottom: 0;
    width: clamp(560px, 58vw, 1000px);
    aspect-ratio: 1000 / 530;
    overflow: hidden;
}
.p_agentrigor .ar_hero .hero_img img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center; /* 왼쪽 기준 정렬 → 넘치는 오른쪽이 잘림 */
}

/* ---------- Section 02. 인공지능기본법 ---------- */
.p_agentrigor .ar_law{
    background: #F9FAFC;
    padding: 100px 0;
}
.p_agentrigor .ar_law .law_list{
    display: grid;
    grid-template-columns: repeat(1, auto);
    gap: 24px 60px;
    justify-content: center;
    margin-top: 60px;
}
.p_agentrigor .ar_law .law_list li{
    display: flex;
    align-items: center;
    gap: 16px;
}
.p_agentrigor .ar_law .law_list .ico{
    flex-shrink: 0;
    width: 25px; height: 25px;
}
.p_agentrigor .ar_law .law_list strong{
    flex-shrink: 0;
    width: 110px;
    font-size: 20px;
    font-weight: 500;
}
.p_agentrigor .ar_law .law_list span{
    font-size: 16px;
    line-height: 24px;
}
.p_agentrigor .ar_law .law_cards{
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 60px;
}
.p_agentrigor .ar_law .law_cards .card{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    width: 300px;
    padding: 40px 20px;
    background: rgba(255,255,255,.9);
    border-radius: 20px;
}
.p_agentrigor .ar_law .law_cards .thumb{
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: 160px;
    margin-bottom: 18px;
}
.p_agentrigor .ar_law .law_cards .thumb img{
    max-height: 100%;
}
.p_agentrigor .ar_law .law_cards .card_tit{
    font-size: 20px;
    font-weight: 900;
}
.p_agentrigor .ar_law .law_cards .card_txt{
    text-align: center;
    font-size: 16px;
    line-height: 24px;
}

/* ---------- Section 03. 문제 정의 + 솔루션 ---------- */
.p_agentrigor .ar_problem{
    padding: 120px 0;
    /* 섹션 중앙 기준 라벤더(#BBC9F9) 원형 radial */
    background: radial-gradient(circle 1700px at 50% 50%, rgba(187, 201, 249, 0.4) 0%, rgba(187, 201, 249, 0) 80%);
}
.p_agentrigor .ar_problem .problem_head .ar_sub{margin-top: 40px;}
.p_agentrigor .ar_problem .problem_list{
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 90px;
}
.p_agentrigor .ar_problem .problem_list li{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 84px;
    flex: 1;
    max-width: 303px;
}
/* 말풍선 → 키워드 연결 점선 화살표 (키워드 pill 기준으로 위치 고정 — 카드 높이와 무관) */
.p_agentrigor .ar_problem .problem_list li::before{
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 96px;  /* 화살촉 위에서 시작 — 꼬리 아래 10px, pill 위 14px 여백 */
    height: 34px;
    border-left: 2px dashed rgba(86, 119, 241, 0.35);
}
.p_agentrigor .ar_problem .problem_list li::after{
    content: "";
    position: absolute;
    left: 50%;
    bottom: 84px;
    width: 9px;
    height: 9px;
    border-right: 2px solid rgba(86, 119, 241, 0.45);
    border-bottom: 2px solid rgba(86, 119, 241, 0.45);
    transform: translateX(-50%) rotate(45deg); /* 아래 방향 화살촉 */
}
/* 주의: 텍스트를 .q_in 스팬으로 감싸 flex 아이템을 1개로 유지 —
   스팬 없이 flex를 걸면 <strong>·텍스트 조각이 각각 아이템으로 쪼개져 줄이 늘어남 */
.p_agentrigor .ar_problem .problem_list .quote{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center; /* 높이를 고정해도 문구는 항상 세로 중앙 */
    min-height: 180px;
    padding: 45px 12px; /* 3줄(30px×3=90px) 기준 세로 중앙: (180-90)/2 = 45px */
    background: #fff;
    border-radius: 30px;
    text-align: center;
    font-size: 20px;
    line-height: 30px;
    font-weight: 400;
    white-space: nowrap; /* 자동 줄바꿈 금지 — <br> 위치대로 무조건 3줄 고정 */
}
/* 말풍선 꼬리 — 카드 아래 중앙의 흰 삼각형 (시안의 잘린 꼬리 복원) */
.p_agentrigor .ar_problem .problem_list .quote::after{
    content: "";
    position: absolute;
    bottom: -14px;
    left: 50%;
    transform: translateX(-50%);
    border: 15px solid transparent;
    border-top: 14px solid #fff;
    border-bottom: 0;
}
.p_agentrigor .ar_problem .problem_list .quote strong{font-weight: 500;}
.p_agentrigor .ar_problem .problem_list .keyword{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 70px;
    /* 단순 반투명 틴트 — 섹션 라벤더(#BBC9F9)와 같은 계열이라 배경과 섞여 은은한 블루로 보임 */
    background: rgba(187, 201, 249, 0.4);
    box-shadow: inset 0 1px 5px rgba(86, 119, 241, 0.18); /* 안쪽 그림자 — 살짝 눌린 유리 느낌 (범위 최소화) */
    border-radius: 30px;
    font-size: 20px;
    font-weight: 500;
}
.p_agentrigor .ar_problem .solution_wrap{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
    margin-top: 120px;
}
.p_agentrigor .ar_problem .solution_wrap .ar_tit{font-weight: 600;}
.p_agentrigor .ar_problem .solution_list{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.p_agentrigor .ar_problem .solution_list li{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    line-height: 30px;
}
.p_agentrigor .ar_problem .solution_list .ico{
    flex-shrink: 0;
    width: 24px; height: 24px;
}

/* 핵심 기능 카드 — CSS scroll-snap 캐러셀 (첫 페인트부터 가로 배치라 로딩 중 세로 리스트 노출 없음) */
.p_agentrigor .ar_problem .feature_slider{
    position: relative;
    margin-top: 90px;
}
.p_agentrigor .ar_problem .feature_cards{
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.p_agentrigor .ar_problem .feature_cards::-webkit-scrollbar{display: none;}
.p_agentrigor .ar_problem .feature_card{
    flex: 0 0 100%;
    scroll-snap-align: start;
    contain: layout paint; /* 카드별 페인트 격리 — 전환 스크롤 시 재그리기 범위 축소(버벅임 완화) */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 44px 32px;
    background: #F9FAFC;
    border-radius: 20px;
    box-shadow: 0 -13px 14px rgba(86,119,241,.04);
    overflow: hidden;
    position: relative;
}
/* 카드 배경 글로우 — 시안의 파란(#5677F1) radial 그라데이션 (브라우저 전용, 모바일은 아래 미디어쿼리에서 해제) */
.p_agentrigor .ar_problem .feature_card::before{
    content: "";
    position: absolute;
    left: 50%;
    top: 62%;
    width: 34%;
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(86,119,241,.10) 0%, rgba(86,119,241,0) 100%);
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
    opacity: 0; /* 콘텐츠(다이어그램)와 함께 페이드인 — 초기 로딩 시 글로우만 먼저 보이는 현상 방지 */
    transition: opacity .7s ease;
}
.p_agentrigor .ar_problem .feature_card.is-active::before{opacity: 1;}

.p_agentrigor .ar_problem .feature_card:nth-child(1)::before{
    left: 60%; /* 기본(50%)에서 살짝 오른쪽으로 */
    top: 48%; /* 기본(62%)보다 위로 */
    width: 44%; /* 기본(34%)보다 크게 */
    background: radial-gradient(circle, rgba(86,119,241,.10) 0%, rgba(86,119,241,0) 70%); /* 끝단 페이드를 앞당겨 경계가 흐려지게 */
}

.p_agentrigor .ar_problem .feature_card:nth-child(2)::before{
    left: 27%;
    top: 62%;
    background: radial-gradient(circle, rgba(86,119,241,.10) 0%, rgba(86,119,241,0) 70%); /* 끝단 페이드를 앞당겨 잘리는 경계가 흐려지게 */
}

.p_agentrigor .ar_problem .feature_card:nth-child(3)::before{
    left: 84%;
    top: 63%;
    background: radial-gradient(circle, rgba(86,119,241,.10) 0%, rgba(86,119,241,0) 70%); /* 끝단 페이드를 앞당겨 잘리는 경계가 흐려지게 */
}
.p_agentrigor .ar_problem .feature_card:nth-child(4)::before{display: none;}
.p_agentrigor .ar_problem .feature_card:nth-child(4) .card_diagram{position: relative; overflow: hidden;}
.p_agentrigor .ar_problem .feature_card:nth-child(4) .card_diagram::before{
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 84%;
    aspect-ratio: 1 / 1;
    transform: translate(-50%, 50%);
    background: radial-gradient(circle, rgba(86,119,241,.21) 0%, rgba(86,119,241,0) 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
}
/* 화살표 — 캐러셀에 마우스 호버 시에만 표시 */
.p_agentrigor .ar_problem .feature_slider .btn_prev,
.p_agentrigor .ar_problem .feature_slider .btn_next{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s, visibility .25s;
}
.p_agentrigor .ar_problem .feature_slider:hover .btn_prev,
.p_agentrigor .ar_problem .feature_slider:hover .btn_next,
.p_agentrigor .ar_problem .feature_slider .btn_prev:focus-visible,
.p_agentrigor .ar_problem .feature_slider .btn_next:focus-visible{
    opacity: 1;
    visibility: visible;
}
.p_agentrigor .ar_problem .feature_slider .btn_prev{left: 20px;}
.p_agentrigor .ar_problem .feature_slider .btn_next{right: 20px;}
.p_agentrigor .ar_problem .feature_slider .btn_prev::after,
.p_agentrigor .ar_problem .feature_slider .btn_next::after{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    border-top: 2px solid #3B3E43;
    border-right: 2px solid #3B3E43;
}
.p_agentrigor .ar_problem .feature_slider .btn_prev::after{transform: translate(-30%,-50%) rotate(-135deg);}
.p_agentrigor .ar_problem .feature_slider .btn_next::after{transform: translate(-70%,-50%) rotate(45deg);}
.p_agentrigor .ar_problem .feature_card .card_logo{
    height: 34px;
    margin-bottom: 28px;
}
.p_agentrigor .ar_problem .feature_card .card_tit{
    font-size: 30px;
    font-weight: 600;
    text-align: center;
}
.p_agentrigor .ar_problem .feature_card .card_desc{
    margin-top: 18px;
    text-align: center;
    font-size: 18px;
    line-height: 29px;
}
.p_agentrigor .ar_problem .feature_card .card_diagram{
    width: 100%;
    max-width: 960px;
    margin-top: 36px;
}
.p_agentrigor .ar_problem .feature_card .card_diagram img,
.p_agentrigor .ar_problem .feature_card .card_diagram svg{
    display: block;
    width: 100%;
    height: auto;
}


.p_agentrigor .ar_problem .feature_card .card_diagram{
    opacity: 0;
    transition: opacity .7s ease;
}
.p_agentrigor .ar_problem .feature_card.is-active .card_diagram{
    opacity: 1;
}

.p_agentrigor .ar_problem .card_diagram svg .anim-bar{
    transform: scaleX(0);
    transform-origin: left center;
    transform-box: fill-box;
    transition: transform 1.4s cubic-bezier(.25,.6,.3,1);
}
.p_agentrigor .ar_problem .feature_card.is-active .card_diagram svg .anim-bar{
    transform: scaleX(var(--bar-fill, 1)); /* 게이지 값 도트가 있으면 그 위치까지만 채움(--bar-fill), 없으면 가득 */
}

.p_agentrigor .ar_problem .card_diagram svg .anim-dot{
    transform: scale(0);
    transform-origin: center;
    transform-box: fill-box;
    transition: transform .45s cubic-bezier(.34,1.56,.64,1);
}
.p_agentrigor .ar_problem .feature_card.is-active .card_diagram svg .anim-dot{
    transform: scale(1);
}

.p_agentrigor .ar_problem .card_diagram svg .anim-dot-ride{
    transform: translateX(var(--dot-ride, 0));
    transform-origin: center;
    transform-box: fill-box;
    transition: transform 1.4s cubic-bezier(.25,.6,.3,1);
}
.p_agentrigor .ar_problem .feature_card.is-active .card_diagram svg .anim-dot-ride{
    transform: translateX(0);
}

/* 게이지 빈 구간: 처음엔 트랙 전체를 덮었다가(scaleX 1) 파란 채움만큼 오른쪽으로 줄어듦(--track-shrink).
   파란 바(anim-bar)와 동일 transition이라 줄어드는 왼쪽 경계 = 파란 채움 선두 = 도트에 정확히 맞물림 */
.p_agentrigor .ar_problem .card_diagram svg .anim-track{
    transform: scaleX(1);
    transform-origin: right center;
    transform-box: fill-box;
    transition: transform 1.4s cubic-bezier(.25,.6,.3,1);
}
.p_agentrigor .ar_problem .feature_card.is-active .card_diagram svg .anim-track{
    transform: scaleX(var(--track-shrink, 1));
}

.p_agentrigor .ar_problem .card_diagram svg .anim-file{
    opacity: 0;
    transform: translateX(-16px);
    transform-box: fill-box;
    transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1);
}
.p_agentrigor .ar_problem .feature_card.is-active .card_diagram svg .anim-file{
    opacity: 1;
    transform: translateX(0);
}

.p_agentrigor .ar_problem .card_diagram svg .anim-panel{
    opacity: 0;
    transform: translateY(8px);
    transform-box: fill-box;
    transition: opacity .5s ease, transform .5s ease;
}
.p_agentrigor .ar_problem .feature_card.is-active .card_diagram svg .anim-panel{
    opacity: 1;
    transform: translateY(0);
}
/* 알약/작은 패널: 부드러운 팝 (scale 0.85→1 + 페이드) */
.p_agentrigor .ar_problem .card_diagram svg .anim-pop{
    opacity: 0;
    transform: scale(.85);
    transform-origin: center;
    transform-box: fill-box;
    transition: opacity .45s ease, transform .45s cubic-bezier(.34,1.56,.64,1);
}
.p_agentrigor .ar_problem .feature_card.is-active .card_diagram svg .anim-pop{
    opacity: 1;
    transform: scale(1);
}
/* 산점도 점: 빠른 팝 (여러 개가 후두둑 찍히는 용도라 짧고 가볍게) */
.p_agentrigor .ar_problem .card_diagram svg .anim-scatter{
    transform: scale(0);
    transform-origin: center;
    transform-box: fill-box;
    transition: transform .3s cubic-bezier(.34,1.4,.64,1);
}
.p_agentrigor .ar_problem .feature_card.is-active .card_diagram svg .anim-scatter{
    transform: scale(1);
}
.no-svg-shadow .card_diagram svg [filter]{filter: none !important;}

/* 점선 연결 화살표(Improve): 보고서 등장 후 이어지듯 페이드 */
.p_agentrigor .ar_problem .card_diagram svg .anim-arrow{
    opacity: 0;
    transition: opacity .5s ease;
}
.p_agentrigor .ar_problem .feature_card.is-active .card_diagram svg .anim-arrow{
    opacity: 1;
}
/* 상관선: stroke-dashoffset 드로잉 (초기 offset은 JS가 선 길이로 지정) */
.p_agentrigor .ar_problem .card_diagram svg .anim-line{
    transition: stroke-dashoffset .9s ease;
}
.p_agentrigor .ar_problem .feature_card.is-active .card_diagram svg .anim-line{
    stroke-dashoffset: 0 !important; /* 인라인 초기값(선 길이)을 덮기 위해 !important */
}

/* 모션 최소화 설정 사용자: 애니메이션 없이 정적 표시 */
@media (prefers-reduced-motion: reduce){
    .p_agentrigor .ar_problem .feature_card::before,
    .p_agentrigor .ar_problem .feature_card .card_diagram,
    .p_agentrigor .ar_problem .card_diagram svg .anim-dot,
    .p_agentrigor .ar_problem .card_diagram svg .anim-file,
    .p_agentrigor .ar_problem .card_diagram svg .anim-panel,
    .p_agentrigor .ar_problem .card_diagram svg .anim-pop,
    .p_agentrigor .ar_problem .card_diagram svg .anim-arrow,
    .p_agentrigor .ar_problem .card_diagram svg .anim-scatter{
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
    /* 게이지: 움직임 없이 최종(값) 상태로 정지 표시 */
    .p_agentrigor .ar_problem .card_diagram svg .anim-bar{
        transform: scaleX(var(--bar-fill, 1)) !important;
        transition: none !important;
    }
    .p_agentrigor .ar_problem .card_diagram svg .anim-track{
        transform: scaleX(var(--track-shrink, 1)) !important;
        transition: none !important;
    }
    .p_agentrigor .ar_problem .card_diagram svg .anim-dot-ride{
        transform: translateX(0) !important;
        transition: none !important;
    }
    .p_agentrigor .ar_problem .card_diagram svg .anim-line{
        stroke-dashoffset: 0 !important;
        transition: none !important;
    }
}

/* ---------- Section 04. 기능 비교표 ---------- */
.p_agentrigor .ar_compare{
    padding: 120px 0;
    background:
            radial-gradient(ellipse 60% 40% at 100% 56%, rgba(166,183,244,.9) 0%, rgba(166,183,244,0) 100%),
            radial-gradient(ellipse 60% 40% at 0% 54%, rgba(166,183,244,.9) 0%, rgba(166,183,244,0) 100%),
            #fff
}
.p_agentrigor .ar_compare .ar_tit{font-weight: 600;}
.p_agentrigor .ar_compare .ar_sub{margin-top: 20px;}

.p_agentrigor .ar_compare .inner{max-width: 1400px;}
.p_agentrigor .ar_compare .table_scroll{
    margin-top: 60px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(187, 201, 249, 0.45);
    border-radius: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.p_agentrigor .compare_table{
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.p_agentrigor .compare_table .col_item{width: 33%;}
.p_agentrigor .compare_table .col_ar{width: 21%;}
.p_agentrigor .compare_table th,
.p_agentrigor .compare_table td{
    padding: 18px 10px;
    text-align: center;
    vertical-align: middle;
    font-weight: 400;
}
.p_agentrigor .compare_table thead th{
    font-size: 24px;
    line-height: 41px;
    color: #9A9DA6;
}
.p_agentrigor .compare_table thead th.col_highlight{
    font-size: 28px;
    font-weight: 600;
    color: #3B3E43;
    position: relative;
    top: -12px;
}
/* AgentRigor 헤더 오른쪽 로고 아이콘 */
.p_agentrigor .compare_table thead th.col_highlight .th_ico{
    width: 18px;
    height: 18px;
    margin-left: 8px;
    vertical-align: baseline;
}
.p_agentrigor .compare_table tbody th{
    text-align: left;
    font-size: 24px;
    line-height: 39px;
}


.p_agentrigor .ar_compare .table_scroll{position: relative;}
.p_agentrigor .ar_compare .table_scroll::before{
    content: "";
    position: absolute;
    top: -20px;
    bottom: -20px;
    left: calc(20px + (100% - 40px) * 0.33);
    width: calc((100% - 40px) * 0.21);
    background:
        radial-gradient(ellipse 100% 55% at 50% 50%, rgba(166,183,244,.10) 0%, rgba(166,183,244,0) 100%),
        #fff;
    border-radius: 24px;
    box-shadow: 5px 0 21px rgba(157,160,226,.18), 0 12px 24px rgba(157,160,226,.18);
    pointer-events: none;
}
.p_agentrigor .compare_table{position: relative; z-index: 1;}
.p_agentrigor .compare_table .col_highlight{background: transparent;}
.p_agentrigor .compare_table td:not(.col_highlight) .mark{opacity: .55;}
.p_agentrigor .compare_table .mark{
    display: inline-block;
    text-indent: -9999px;
    overflow: hidden;
    vertical-align: middle;
}
.p_agentrigor .compare_table .mark.full{
    width: 11px; height: 11px;
    background: #3B3E43;
    border-radius: 50%;
}
.p_agentrigor .compare_table .mark.partial{
    width: 14px; height: 12px;
    background: transparent no-repeat center/contain
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12'%3E%3Cpath d='M7 1 L13 11 L1 11 Z' fill='none' stroke='%233B3E43' stroke-width='1.2'/%3E%3C/svg%3E");
}
.p_agentrigor .compare_table .mark.none{
    width: 10px; height: 2px;
    background: #3B3E43;
}
.p_agentrigor .compare_table .mark.roadmap{
    text-indent: 0;
    padding: 4px 14px;
    border: 1px solid #3B3E43;
    border-radius: 16px;
    font-size: 16px;
    line-height: 1.2;
}
.p_agentrigor .ar_compare .scroll_hint{
    display: none;
    margin-top: 16px;
    text-align: center;
    font-size: 12px;
    color: #8C8C94;
}

/* ---------- Section 05. FAQ ---------- */
.p_agentrigor .ar_faq{
    padding: 120px 0;
    background: #fff;
}
.p_agentrigor .ar_faq .ar_tit{font-weight: 600;}
.p_agentrigor .ar_faq .faq_list{
    max-width: 842px;
    margin: 60px auto 0;
}
.p_agentrigor .ar_faq .faq_q{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 20px 16px;
    border-bottom: 1px solid #E0E0E0;
    font-size: 20px;
    font-weight: 500;
    line-height: 30px;
    color: #3B3E43;
}
.p_agentrigor .ar_faq .faq_q:after{
    content: "";
    flex-shrink: 0;
    width: 12px; height: 12px;
    border-right: 2px solid #3B3E43;
    border-bottom: 2px solid #3B3E43;
    transform: rotate(45deg);
    transition: transform .2s;
    margin-top: -6px;
}
.p_agentrigor .ar_faq .faq_item.on .faq_q:after{
    transform: rotate(225deg);
    margin-top: 6px;
}
.p_agentrigor .ar_faq .faq_a{
    display: none;
    padding: 30px 40px;
    font-size: 16px;
    line-height: 25.6px;
}
.p_agentrigor .ar_faq .faq_item.on .faq_a{display: block;}

/* ---------- Section 05. Use case / Section 07. Insights ----------
   카드 리스트(.news_list/.news_card)는 두 섹션이 동일 → 섹션 선택자 없이 공용 */
.p_agentrigor .ar_usecase,
.p_agentrigor .ar_news{
    padding: 120px 0;
    background: #fff;
}
.p_agentrigor .ar_usecase .ar_tit,
.p_agentrigor .ar_news .ar_tit{font-weight: 600;}
.p_agentrigor .news_list{
    display: flex;
    justify-content: center;
    gap: 60px;
    margin-top: 60px;
}
.p_agentrigor .news_card{
    flex: 1;
    max-width: 595px;
}
.p_agentrigor .news_card a{
    display: block;
    height: 100%;
    border: 1px solid #E0E0E0;
    border-radius: 40px;
    overflow: hidden;
    background: #fff;
    transition: box-shadow .2s;
}
.p_agentrigor .news_card a:hover{
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.p_agentrigor .news_card .thumb img{
    display: block;
    width: 100%;
    aspect-ratio: 595 / 335;
    object-fit: cover;
}
.p_agentrigor .news_card .txt_wrap{
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 30px 30px 40px;
}
.p_agentrigor .news_card .news_tit{
    font-size: 24px;
    font-weight: 600;
    color: #3B3E43;
}
.p_agentrigor .news_card .news_txt{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 14px;
    line-height: 21px;
    color: #3B3E43;
}
.p_agentrigor .news_card .news_date{
    margin-top: 6px;
    font-size: 16px;
    color: #868686;
}

/* ---------- Section 07. 문의폼 (메인 index.html의 폼과 동일 — home_v2.css에서 이식) ---------- */
.main-contact-us2{padding:80px 20px; margin-top:0; width:100%; border-top:1px solid #ddd; box-sizing:border-box;}
.main-contact-us2 .cont{margin:0 auto; max-width:1220px; width:100%; box-sizing:border-box;}
.main-contact-us .cont{display:flex; justify-content: flex-end;}
.main-contact-us .inner{margin-left:auto; padding-left:0; max-width:1220px; width:100%;}
.main-contact-us .tit-area{position:relative; margin-bottom:3.375rem; padding-left:26px;}
.main-contact-us .tit-area:before{position:absolute; left:0; top:0; width:4px; height:100%; background-color:#161616; display:block; content:"";}
.main-contact-us .tit-area h2,
.main-contact-us .tit-area h3{font-size:30px; font-weight:400; color:#161616; line-height:1.4;}
.main-contact-us .tit-area h2 strong,
.main-contact-us .tit-area h3 strong{display:block; font-weight:700;}
.main-contact-us .tit-area p{margin-top:14px; font-size:17px; font-weight:500; color:#3c3c3c; line-height:1.5;}
.main-contact-us .form-area{position:relative; padding-bottom:1.875rem; display:flex;}
.main-contact-us .form-area:before{position:absolute; left:0; bottom:0; width:100%; height:1px; background-color:#d1d1d1; display:block; content:""; background: linear-gradient(91deg, #2268FD 0%, #7E46FF 40%, #7E46FF 65%, #F22C82 100%);}
.main-contact-us .left-area{width:46%;}
.main-contact-us .right-area{margin-left:auto; width:46%;}
.main-contact-us .form-area li{margin-bottom:2.25rem; list-style:none;}
.main-contact-us .form-area li:last-child{margin-bottom:0;}
.main-contact-us .form-area .d-flex{display:flex; gap:10px; align-items: center; flex-wrap:wrap;}
.main-contact-us .form-area .d-flex .error_txt{margin-top:0;}
.main-contact-us .form-area label{font-size:1rem; font-weight:700; color:#161616; display:block;}
.main-contact-us .form-area label strong{display:inline-block; color:#ff4054; font-weight:inherit;}
.main-contact-us .form-area input[type=text]{padding-left:0 !important; width:100%; height:55px; line-height:54px; border:none; border-bottom:1px solid #d1d1d1; font-size:1rem; color:#3c3c3c; padding:0 10px; box-sizing:border-box; transition: all 0.6s ease-out; background:transparent;}
.main-contact-us .form-area textarea::placeholder,
.main-contact-us .form-area input[type=text]::placeholder{color:#9c9c9c; transition: all 0.6s ease-out;}
.main-contact-us .form-area input[type=text]:focus{border:none; outline: none; border-bottom:1px solid #0074FF;}
.main-contact-us .form-area textarea:focus{border-color:#0074ef; outline: none;}
.main-contact-us .form-area textarea{margin-top:1rem; padding:1.25rem; width:100%; height:252px; border:1px solid #d1d1d1; font-size:1rem; color:#3c3c3c; resize:none; box-sizing:border-box; display:block; transition: all 0.6s ease-out; font-family:inherit;}
.main-contact-us .form-area .text_number{margin-top:10px; width:100%; display:block; text-align:right; font-size:0.8125rem; color:#6d6d6d;}
.main-contact-us .form-area .error_txt{margin-top:0.5rem; font-size:0.875rem; color:#ff4054;}
.main-contact-us .agree_txt{display:flex; gap:10px; align-items: flex-start; flex-wrap: wrap;}
.main-contact-us .agree_txt input[type=checkbox]{-webkit-appearance: checkbox !important;}
.main-contact-us .agree_txt label{font-size:0.875rem; color:#3c3c3c; font-family:inherit; font-weight:600; cursor:pointer;}
.main-contact-us .agree_txt label span{margin-top:0.875rem; display:block; font-size:0.875rem; color:#6680b3; font-weight:400;}
.main-contact-us .agree_txt label span strong{font-size:inherit; color:inherit; font-family:inherit; font-weight:inherit;}
.main-contact-us .agree_txt span a{color:#0074ff; display:inline-block; text-decoration:underline;}
.main-contact-us .btn-area{margin-top:1.875rem; text-align:center;}
.main-contact-us .btn-area .btn-submit{position:relative; width:194px; height:60px; line-height:60px; display:inline-block; text-align: center; background: linear-gradient(91deg, #2268FD 0%, #7E46FF 40%, #7E46FF 65%, #F22C82 100%); border-radius:2em; font-size:1.125rem; color:#fff; border:none; cursor:pointer;}
/* AJAX 진행 중 — 제출 버튼 스피너 */
.main-contact-us .btn-area .btn-submit.is-submitting{color:transparent !important; cursor:wait !important;}
.main-contact-us .btn-area .btn-submit.is-submitting::after{content:""; position:absolute; left:50%; top:50%; width:24px; height:24px; margin:-12px 0 0 -12px; border:3px solid rgba(255,255,255,0.35); border-top-color:#fff; border-radius:50%; animation:ar-btn-spin 0.8s linear infinite; box-sizing:border-box;}
@keyframes ar-btn-spin{to{transform:rotate(360deg);}}
@media (max-width: 1200px) {
    .main-contact-us .form-area{display:block;}
    .main-contact-us .left-area{margin-bottom:20px; width:100%;}
    .main-contact-us .right-area{width:100%;}
}
@media (max-width: 960px) {
    .main-contact-us2{padding:60px 16px; margin-top:0;}
}
@media (max-width: 768px) {
    .main-contact-us .form-area input[type=text]{height:48px; line-height:48px; font-size: 1rem;}
    .main-contact-us .form-area textarea{font-size:1rem;}
    .main-contact-us .form-area{padding-left:0;}
    .main-contact-us .tit-area{padding-left:15px;}
    .main-contact-us .tit-area h2,
    .main-contact-us .tit-area h3{font-size:23px;}
    .main-contact-us .tit-area p{font-size:16px;}
    .main-contact-us .form-area label{font-size:1rem;}
    .main-contact-us .form-area .error_txt{font-size:0.875rem;}
    .main-contact-us .form-area .agree_txt label{font-size:0.875rem; line-height:1.6;}
    .main-contact-us .agree_txt label span{font-size:0.875rem;}
    .main-contact-us .agree_txt input[type=checkbox]{margin-top:2px;}
    .main-contact-us .btn-area .btn-submit{width:140px; height:50px; line-height:50px; font-size:1rem;}
}

/* ============================================================
   반응형 (blackolive 기준 브레이크포인트)
============================================================ */

/* ----- ~1240 : 콘텐츠 폭 축소 ----- */
@media (max-width: 1240px){
    .p_agentrigor .ar_hero .inner{min-height: 560px;}
    .p_agentrigor .ar_hero .hero_txt{margin-left: 0;} /* 좁은 화면에선 왼쪽 시프트 해제 (화면 밖 잘림 방지) */
    .p_agentrigor .ar_hero .hero_img{width: 55vw;}
    .p_agentrigor .ar_law .law_cards{flex-wrap: wrap; justify-content: center;}
    .p_agentrigor .ar_law .law_cards .card{width: calc(50% - 8px); max-width: 300px;}
    .p_agentrigor .ar_problem .problem_list{flex-wrap: wrap; justify-content: center;}
    .p_agentrigor .ar_problem .problem_list li{flex: 0 0 calc(50% - 6px); max-width: 303px;}
    .p_agentrigor .compare_table thead th{font-size: 20px;}
    .p_agentrigor .compare_table thead th.col_highlight{font-size: 20px; top: 0; white-space: nowrap;}
    .p_agentrigor .compare_table thead th.col_highlight .th_ico{width: 14px; height: 14px; margin-left: 6px;}
    .p_agentrigor .compare_table tbody th{font-size: 18px; line-height: 30px;}
}

/* ----- ~960 : 태블릿 ----- */
@media (max-width: 960px){
    .p_agentrigor .ar_tit{font-size: 30px; line-height: 44px;}
    .p_agentrigor .ar_sub{font-size: 18px; line-height: 28px;}

    /* hero: 세로 스택 */
    .p_agentrigor .ar_hero .inner{
        flex-direction: column;
        justify-content: center;
        min-height: 0;
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .p_agentrigor .ar_hero .hero_txt{align-items: center; text-align: center; max-width: none;}
    .p_agentrigor .ar_hero .hero_img{
        position: static;
        transform: none;
        width: 100%;
        max-width: 640px;
        margin-top: 40px;
    }
    .p_agentrigor .ar_law .law_list{grid-template-columns: auto; justify-content: center;}
    .p_agentrigor .ar_problem .feature_card .card_tit{font-size: 28px;}
    .p_agentrigor .ar_problem .feature_card .card_desc{font-size: 18px; line-height: 28px;}

    /* 비교표: 가로 스크롤 */
    /* 수동 가로 스크롤 제거(핀 스크롤만 표를 움직임).
       박스는 유지하되 오른쪽 변만 연 형태 — 표가 화면 밖으로 이어지는 느낌 */
    .p_agentrigor .ar_compare .table_scroll{
        overflow-x: hidden;
        border: 1px solid rgba(187, 201, 249, 0.45);
        border-right: 0;
        border-radius: 20px 0 0 20px;
        background: rgba(255, 255, 255, 0.1);
        -webkit-backdrop-filter: none; /* 모바일 성능 위해 blur 없이 */
        backdrop-filter: none;
        box-shadow: none;
        padding: 12px 0 12px 12px;
        margin-right: -16px; /* 오른쪽 화면 끝까지 블리드 */
    }
    .p_agentrigor .ar_compare .pin_sticky .ar_sub{margin-bottom: 24px;} /* 제목 블록과 표 사이 간격 */
    .p_agentrigor .compare_table{min-width: 760px;}
    /* 핀 고정: 세로 스크롤 동안 표가 화면에 붙어 가로로 팬됨 (높이는 JS가 계산) */
    .p_agentrigor .ar_compare .pin_sticky{position: sticky; top: 76px;}
    /* 가로 스크롤 컨테이너에선 오버레이 카드가 표와 함께 움직이지 못하므로 끄고, 셀 배경으로 대체 */
    .p_agentrigor .ar_compare .table_scroll::before{display: none;}
    /* 셀별 blur는 셀 경계마다 이음선을 만들므로 폴백에선 반투명 배경만 사용 */
    .p_agentrigor .compare_table .col_highlight{
        background: rgba(255, 255, 255, 0.55);
    }
    .p_agentrigor .compare_table thead .col_highlight{border-radius: 16px 16px 0 0;}
    .p_agentrigor .compare_table tbody tr:last-child .col_highlight{border-radius: 0 0 16px 16px;}

    .p_agentrigor .news_list{gap: 24px;}
}

/* ----- ~768 : 실기기 폰(뷰포트 749) -----
   이 구간부터 mo_br이 켜져 말풍선이 4~6줄로 제각각이 됨 → 최대 줄 수(6줄) 기준으로 높이 고정.
   nowrap이라 가장 긴 줄(약 9.6em)이 카드 폭 안에 들어가야 함 → 폰트는 폭에 비례(vw)시키고
   높이는 em으로 잡아 폰트가 바뀌어도 4개가 항상 같은 높이로 유지되게 함.
   ※ 아래 ~640 블록보다 먼저 와야 375 시안 값이 정상적으로 덮어씀 */
@media (max-width: 768px){
    .p_agentrigor .ar_problem .problem_list .quote{
        min-height: 0;
        padding: 24px 12px;
        font-size: clamp(16px, 3.2vw, 26px); /* 749에서 24px */
        line-height: 1.55;
        height: calc(9.3em + 48px); /* 6줄(1.55em×6) + 상하 패딩 24px×2 */
    }
}

/* ----- ~640 : 모바일 (375 시안 기준) ----- */
@media (max-width: 640px){
    .p_agentrigor #container .contents{padding-top: 60px;}
    .p_agentrigor .ar_section .inner{padding: 0 16px;}
    .p_agentrigor .ar_tit{font-size: 26px; line-height: 40px;}
    .p_agentrigor .ar_sub{font-size: 16px; line-height: 24px;}
    .p_agentrigor .ar_btn_cta{padding: 14px 40px; font-size: 16px;}

    /* hero — 시안 순서(설명 → 이미지 → 버튼)를 위해 텍스트 블록을 풀어(contents) 상위 flex에서 order로 재배치 */
    .p_agentrigor .ar_hero .hero_txt{display: contents;}
    .p_agentrigor .ar_hero .inner{gap: 24px; align-items: center; padding-top: 72px; padding-bottom: 72px;} /* 로고 위 / 버튼 아래 여백 */
    .p_agentrigor .ar_hero .hero_img{order: 5; margin-top: 0;}
    /* hero_txt가 display:contents라 버튼 묶음이 상위 flex 아이템 — order는 묶음에 걸어야 함.
       좁은 화면에선 두 버튼이 세로로 쌓이므로, 묶음 폭을 '더 넓은 버튼' 기준(fit-content)으로 잡고
       자식을 stretch → 두 버튼 너비가 항상 같아짐 */
    .p_agentrigor .ar_hero .hero_btns{
        order: 6;
        flex-direction: column;
        align-items: stretch;
        width: fit-content;
        gap: 12px;
    }
    .p_agentrigor .ar_hero .hero_btns .ar_btn_cta{width: 100%;}
    /* 모바일: 로고 두 개를 한 덩어리처럼 — 덩어리는 중앙 정렬, 내부는 왼쪽(start) 정렬.
       서브 로고 박스를 메인 로고와 같은 폭(220px)으로 맞추면 중앙 배치 시 왼쪽 시작점이 일치 */
    .p_agentrigor .ar_hero .hero_logo img{max-width: 220px;}
    .p_agentrigor .ar_hero .hero_logo_sub{margin-top: -12px; width: 220px;}
    .p_agentrigor .ar_hero .hero_logo_sub img{max-width: 130px; margin: 0;}
    .p_agentrigor .ar_hero .hero_slogan{font-size: 14px; line-height: 24px; margin-top: -8px; margin-bottom: 10px; text-align: center;} /* 로고와 16px, 아래 설명문과 34px (gap 24 + 10) */
    .p_agentrigor .mo_br{display: inline;} /* 모바일 전용 줄바꿈 활성화 */
    .p_agentrigor .ar_hero .hero_desc{font-size: 16px; line-height: 28px; text-align: left; align-self: stretch;} /* 모바일 시안: 설명문은 왼쪽 정렬 */
    .p_agentrigor .ar_hero .hero_desc br{display: none;}

    /* 인공지능기본법 */
    .p_agentrigor .ar_law{padding: 60px 0;}
    /* 그리드 auto 트랙(max-content)이 화면 폭을 넘겨 페이지 전체 가로 overflow 유발 → 100% 고정 + 설명 줄바꿈 허용 */
    .p_agentrigor .ar_law .law_list{gap: 12px; margin-top: 48px; grid-template-columns: auto; width: auto; justify-content: center;}
    .p_agentrigor .ar_law .law_list .ico{width: 18px; height: 18px;}
    .p_agentrigor .ar_law .law_list li{gap: 6px; align-items: flex-start;}
    .p_agentrigor .ar_law .law_list strong{width: 96px; font-size: 16px;}
    .p_agentrigor .ar_law .law_list span{flex: 1; min-width: 0; font-size: 14px; line-height: 22px;}
    /* 도메인 카드: 모바일은 2×2 그리드 */
    .p_agentrigor .ar_law .law_cards{display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 48px;}
    .p_agentrigor .ar_law .law_cards .card{width: 100%; max-width: none; padding: 16px 10px; gap: 12px;}
    .p_agentrigor .ar_law .law_cards .thumb{height: 100px; margin-bottom: 0;}
    .p_agentrigor .ar_law .law_cards .card_tit{font-size: 16px; font-weight: 600;}
    .p_agentrigor .ar_law .law_cards .card_txt{font-size: 12px; line-height: 18px;}

    /* 문제 정의 + 솔루션 */
    .p_agentrigor .ar_problem{padding: 40px 0;}
    .p_agentrigor .ar_problem .problem_head .ar_sub{margin-top: 20px;}
    .p_agentrigor .ar_problem .problem_list{margin-top: 48px; gap: 32px 12px;}
    .p_agentrigor .ar_problem .problem_list li{gap: 24px;}
    /* 카드-키워드 간격 24px엔 점선 화살표 공간이 없음 — 시안(모바일)에도 없으므로 숨김, 꼬리는 축소 */
    .p_agentrigor .ar_problem .problem_list li::before,
    .p_agentrigor .ar_problem .problem_list li::after{display: none;}
    .p_agentrigor .ar_problem .problem_list .quote::after{border-width: 10px; border-top-width: 9px; bottom: -9px;}
    .p_agentrigor .ar_problem .problem_list .quote{
        min-height: 0;
        padding: 16px 8px; /* 좌우 최소화 — 문구가 카드 안에 들어가도록 */
        font-size: clamp(11px, 3.7vw, 16px); /* 375에서 약 14px — 카드 폭(약 149px)에 9.6em이 들어가는 상한 */
        line-height: 1.55;
        height: calc(9.3em + 32px); /* 6줄(1.55em×6) + 상하 패딩 16px×2 — 4개 높이 통일 */
        white-space: nowrap; /* 모바일도 <br> 위치대로 줄 고정 */
    }
    .p_agentrigor .pc_br{display: none;} /* 모바일에선 데스크톱 전용 줄바꿈 숨김 */
    .p_agentrigor .ar_problem .problem_list .keyword{height: 48px; font-size: 14px;}
    .p_agentrigor .ar_problem .solution_wrap{gap: 40px; margin-top: 60px;}
    /* 모바일: 리스트 블록은 중앙, 항목들의 시작선(체크 아이콘 x좌표)은 통일 */
    .p_agentrigor .ar_problem .solution_list{
        width: fit-content;
        margin: 0 auto;
    }
    .p_agentrigor .ar_problem .solution_list li{
        justify-content: flex-start;
        align-items: flex-start;
        font-size: 14px;
        line-height: 21px;
    }
    .p_agentrigor .ar_problem .solution_list .ico{width: 18px; height: 18px; margin-top: 2px;}
    /* 모바일: 다이어그램 SVG의 그림자 필터 비활성화*/
    .p_agentrigor .ar_problem .card_diagram svg [filter]{filter: none !important;}
    .p_agentrigor .ar_problem .card_diagram svg g.anim-pop,
    .p_agentrigor .ar_problem .card_diagram svg g.anim-dot{
        filter: drop-shadow(0 2px 5px rgba(156, 160, 226, 0.35)) !important;
    }
    .p_agentrigor .ar_problem .feature_slider{margin-top: 48px;}
    .p_agentrigor .ar_problem .feature_cards{gap: 16px;}
    .p_agentrigor .ar_problem .feature_card{padding: 34px 16px; border-radius: 8px;}
    .p_agentrigor .ar_problem .feature_card::before{display: none;} /* 모바일: 카드 배경 글로우 미적용 */
    .p_agentrigor .ar_problem .feature_card .card_logo{height: 30px; margin-bottom: 16px;}
    .p_agentrigor .ar_problem .feature_card .card_tit{font-size: 16px;}
    .p_agentrigor .ar_problem .feature_card .card_desc{margin-top: 14px; font-size: 14px; line-height: 21px; max-width: 260px;} /* 모바일: 설명 폭 제한 — 줄이 너무 길게 퍼지지 않게 */
    .p_agentrigor .ar_problem .feature_card .card_diagram{margin-top: 28px; transition-duration: .35s;} /* 모바일: 페이드 단축 */

    /* 비교표 */
    .p_agentrigor .ar_compare{padding: 60px 0;}
    .p_agentrigor .ar_compare .table_scroll{margin-top: 32px; padding: 12px 0 12px 12px;} /* 오른쪽은 계속 열린 채로 */
    .p_agentrigor .compare_table{min-width: 620px;}
    .p_agentrigor .compare_table thead th{font-size: 14px; line-height: 24px;}
    .p_agentrigor .compare_table thead th.col_highlight{font-size: 16px;}
    .p_agentrigor .compare_table tbody th{font-size: 12px; line-height: 20px;}
    .p_agentrigor .compare_table th,
    .p_agentrigor .compare_table td{padding: 12px 8px;}
    .p_agentrigor .compare_table .mark.roadmap{font-size: 12px; padding: 3px 10px;}

    /* FAQ */
    .p_agentrigor .ar_faq{padding: 60px 0;}
    .p_agentrigor .ar_faq .faq_list{margin-top: 32px;}
    .p_agentrigor .ar_faq .faq_q{font-size: 16px; line-height: 24px;}
    .p_agentrigor .ar_faq .faq_a{padding: 20px 16px; font-size: 14px; line-height: 22.4px;}

    /* Use case / Insights */
    .p_agentrigor .ar_usecase,
    .p_agentrigor .ar_news{padding: 60px 0;}
    .p_agentrigor .news_list{margin-top: 32px;}
    .p_agentrigor .news_card .txt_wrap{padding: 20px 22px;}
    .p_agentrigor .news_card .news_tit{font-size: 18px; font-weight: 500;}
    .p_agentrigor .news_card .news_txt{font-size: 13px; line-height: 19.5px;}
    .p_agentrigor .news_card .news_date{font-size: 14px;}

}

/* ----- ~768 : Use case / Insights 모바일 캐러셀 -----
   화살표 없이 가로 스와이프만으로 넘기고, 다음 카드가 살짝 보이도록 폭을 78%로.
   ※ 실기기 폰 뷰포트가 749라 640이 아닌 768 기준.
   ※ ~640 블록보다 뒤에 와야 세로 스택 규칙을 덮음 */
@media (max-width: 768px){
    .p_agentrigor .news_list{
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 16px;
        overflow-x: auto;
        overflow-y: hidden; /* 세로 스와이프를 리스트가 가로채지 않도록 */
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        /* 왼쪽 여백은 inner 그대로 둬서 첫 카드 시작선 = 제목·본문 시작선.
           오른쪽만 화면 끝까지 흘려보내(margin) 다음 카드가 화면 밖으로 이어지게 함.
           ※ 왼쪽에 padding을 주면 mandatory 스냅이 그 여백만큼 스크롤을 밀어
              첫 카드가 화면 왼쪽 끝에 붙어버림 (scroll-margin은 %를 못 써서 대체 불가) */
        margin-right: calc(50% - 50vw);
        padding-right: calc(50vw - 50%);
        scrollbar-width: none; /* 스크롤바 숨김 — 스와이프 힌트는 '다음 카드 살짝 보이기'로 대체 */
        -ms-overflow-style: none;
    }
    .p_agentrigor .news_list::-webkit-scrollbar{display: none;}
    .p_agentrigor .news_card{
        flex: 0 0 88%; /* 다음 카드가 40px 안팎으로 살짝 보이는 폭 */
        max-width: none;
        scroll-snap-align: start;
    }
}

/* ----- ~480 : 소형 모바일 ----- */
@media (max-width: 480px){
    .p_agentrigor .ar_tit{font-size: 24px; line-height: 36px;}
    .p_agentrigor .ar_problem .problem_list li{flex: 0 0 calc(50% - 6px);}
}

/* ----- ~320 : 초소형 화면 — 비교표는 핀-스크롤(세로→가로 변환) 대신 일반 가로 스크롤.
   좁은 폭에서 표가 팬(pan)되며 왼쪽 라벨 첫 글자가 잘리던 문제 방지. JS(measure)도 ≤320에선 핀 로직을 끔. ----- */
@media (max-width: 320px){
    .p_agentrigor .ar_compare .pin_wrap{height: auto !important;}
    .p_agentrigor .ar_compare .pin_sticky{position: static; top: auto;}
    .p_agentrigor .ar_compare .table_scroll{
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-right: 0;
        border: 1px solid rgba(187, 201, 249, 0.45);
        border-radius: 20px;
    }
    .p_agentrigor .ar_compare .table_scroll::before{display: none;}
    .p_agentrigor .compare_table{zoom: 1 !important;}
    /* 가로 스크롤 안내 문구 — 이 경우(≤320)에만 작은 회색 글자로 표시 */
    .p_agentrigor .ar_compare .scroll_hint{display: block;}
}

/* 모바일 전용 줄바꿈(mo_br/pc_br) 기준을 768로 상향 —
   이 사이트는 실기기 뷰포트가 749로 고정되므로, ≤640 기준이면 실기기에서 모바일 줄바꿈이 안 뜸.
   ≤768로 올려야 실제 폰(749)에서도 디자인대로 줄바꿈됨. */
@media (max-width: 768px){
    .p_agentrigor .mo_br{display: inline;}
    .p_agentrigor .pc_br{display: none;}
}