/* ==========================================================
   Hive Design — 공통 유틸리티 CSS
   그누보드 default.css 와 분리된 전용 유틸리티
   ========================================================== */

/* 타입 스케일 */
:root {
    --t-label:   11px;
    --t-caption: 13px;
    --t-body:    16px;
    --t-lead:    18px;
    --t-sub:     24px;
    --t-heading: clamp(32px, 4vw, 52px);
    --t-display: clamp(60px, 9vw, 120px);
}

/* 기본 리셋 (default.css 공통 부분 흡수) */
html { overflow-y: scroll; }
body { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; border: 0; font-size: 1em; }
ul, ol, dl, dt, dd { margin: 0; padding: 0; list-style: none; }
p { margin: 0; padding: 0; word-break: keep-all; }
a { color: inherit; text-decoration: none; }
img { vertical-align: middle; max-width: 100%; }
*, *::before, *::after { box-sizing: border-box; }

/* 공통 visibility */
.is-hidden { display: none !important; }
.is-visible { display: block !important; }
.pc-only { display: none; }
@media (min-width: 769px) { .pc-only { display: block !important; } }
.mobile-only { display: block; }
@media (min-width: 769px) { .mobile-only { display: none !important; } }

/* 접근성 — 스크린리더 전용 */
.msg_sound_only,
.sound_only { display: inline-block !important; position: absolute; top: 0; left: 0; width: 0; height: 0; margin: 0 !important; padding: 0 !important; font-size: 0; line-height: 0; border: 0 !important; overflow: hidden !important; }
#hd_login_msg { position: absolute; top: 0; left: 0; font-size: 0; line-height: 0; overflow: hidden; }
#skip_to_container a { z-index: 100000; position: absolute; top: 0; left: 0; width: 1px; height: 1px; font-size: 0; line-height: 0; overflow: hidden; }
#skip_to_container a:focus,
#skip_to_container a:active { width: 100%; height: 75px; background: #21272e; color: #fff; font-size: 2em; font-weight: bold; text-align: center; text-decoration: none; line-height: 3.3em; }

body { }
body.bg_set { background: var(--hv-bg); }
body.hv-lock { overflow: hidden; }
address { font-style: normal; }

/* 접근성 */
.sr-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;
    clip-path: inset(50%) !important;
    white-space: nowrap !important; border: 0 !important;
}

/* 기본 유틸 */
.over_texts { overflow: hidden; }
.t_center { text-align: center; }
.text_up { text-transform: uppercase; }
.word_keep { word-break: keep-all; }
.index_ib { display: inline-block !important; }
.index_b { font-weight: bold; }

/* clearfix — float 레이아웃 부모 높이 붕괴 방지 */
.cf::after {
    display: block;
    visibility: hidden;
    clear: both;
    content: "";
}

/* 색상 변수 기반 (--main / --main2 통일, !important 적용) */
.index_color   { color:         var(--main)  !important; }
.index_color2  { color:         var(--main2) !important; }
.index_bg      { background:    var(--main)  !important; }
.index_bg2     { background:    var(--main2) !important; }
.index_bg_line { border-color:  var(--line)  !important; }

/* 배경 고정색 */
.bg_w    { background: #fff !important; }
.bg_b    { background: #000 !important; }
.bg_main { background: var(--main)  !important; }

/* 테두리 */
.bd_main { border-color: var(--main)  !important; }
.bd_line { border-color: var(--line)  !important; }

/* 고정 색상 텍스트 */
.c_g  { color: #979593 !important; }
.c_g2 { color: #41413f !important; }
.c_by { color: #3e3838 !important; }
.c_w  { color: #fff    !important; }
.c_b  { color: #000    !important; }
.c_y  { color: #e5cc68 !important; }

/* font-weight */
.fw100 { font-weight: 100 !important; }
.fw300 { font-weight: 300 !important; }
.fw500 { font-weight: 400 !important; }
.fw900 { font-weight: 900 !important; }

/* 폰트 이징 */
.index_ls10 { letter-spacing: 10px !important; }
.index_ls20 { letter-spacing: 20px !important; }

/* ==========================================================
   높이 유틸 (h*)
   ========================================================== */
.h5   { height:   5px; }
.h10  { height:  10px; }
.h15  { height:  15px; }
.h20  { height:  20px; }
.h30  { height:  30px; }
.h40  { height:  40px; }
.h50  { height:  50px; }
.h60  { height:  60px; }
.h70  { height:  70px; }
.h80  { height:  80px; }
.h90  { height:  90px; }
.h100 { height: 100px; }

/* ==========================================================
   폰트 사이즈 (index_f*)
   단일 clamp — 모바일 미디어쿼리 없이 전 해상도 대응
   vw 계수: max / 12  (1200px 뷰포트에서 최대값 도달)
   min 값: 모바일 375px 기준 최소 가독성 보장
   ========================================================== */
.index_f5   { font-size: clamp(  4px,  0.4vw,   5px) !important; word-break: keep-all; }
.index_f10  { font-size: clamp(  8px,  0.8vw,  10px) !important; word-break: keep-all; }
.index_f12  { font-size: clamp(  9px,  1.0vw,  12px) !important; word-break: keep-all; }
.index_f14  { font-size: clamp( 11px,  1.2vw,  14px) !important; word-break: keep-all; }
.index_f15  { font-size: clamp( 11px,  1.25vw, 15px) !important; word-break: keep-all; }
.index_f16  { font-size: clamp( 13px,  1.3vw,  16px) !important; word-break: keep-all; line-height: 1.6;}
.index_f18  { font-size: clamp( 14px,  1.5vw,  18px) !important; word-break: keep-all; line-height: 1.8; }
.index_f20  { font-size: clamp( 15px,  1.65vw, 20px) !important; word-break: keep-all; line-height: 1.9; }
.index_f22  { font-size: clamp( 16px,  1.8vw,  22px) !important; word-break: keep-all; }
.index_f25  { font-size: clamp( 17px,  2.1vw,  25px) !important; word-break: keep-all; }
.index_f30  { font-size: clamp( 17px,  2.5vw,  30px) !important; word-break: keep-all; }
.index_f35  { font-size: clamp( 20px,  2.9vw,  35px) !important; word-break: keep-all; }
.index_f40  { font-size: clamp( 22px,  3.3vw,  40px) !important; word-break: keep-all; }
.index_f45  { font-size: clamp( 25px,  3.75vw, 45px) !important; word-break: keep-all; }
.index_f50  { font-size: clamp( 28px,  4.2vw,  50px) !important; word-break: keep-all; }
.index_f55  { font-size: clamp( 27px,  4.6vw,  55px) !important; word-break: keep-all; }
.index_f60  { font-size: clamp( 28px,  5.0vw,  60px) !important; word-break: keep-all; }
.index_f65  { font-size: clamp( 30px,  5.4vw,  65px) !important; word-break: keep-all; }
.index_f70  { font-size: clamp( 32px,  5.8vw,  70px) !important; word-break: keep-all; }
.index_f80  { font-size: clamp( 36px,  6.7vw,  80px) !important; word-break: keep-all; }
.index_f90  { font-size: clamp( 38px,  7.5vw,  90px) !important; word-break: keep-all; }
.index_f100 { font-size: clamp( 40px,  8.3vw, 100px) !important; word-break: keep-all; }
.index_f130 { font-size: clamp( 50px, 10.8vw, 130px) !important; word-break: keep-all; }
.index_f150 { font-size: clamp( 55px, 12.5vw, 150px) !important; word-break: keep-all; }

/* letter-spacing 모바일 보정 */
@media only screen and (max-width: 900px) {
    .index_ls10 { letter-spacing: 5px !important; }
    .index_ls20 { letter-spacing: 10px !important; }
}

/* ==========================================================
   컨테이너 / 가로 사이즈
   ========================================================== */
.hive_b {
    width: 95%; max-width: 1250px !important;
    margin: 0 auto;
    padding: 50px 0 80px 0 !important;
    display: block;
}
.index_w50 { width: 100%; max-width:  50%; margin: 0 auto; }
.index_w60 { width: 100%; max-width:  60%; margin: 0 auto; }
.index_w70 { width: 100%; max-width:  70%; margin: 0 auto; }
.index_w80 { width: 100%; max-width:  80%; margin: 0 auto; }
.index_w90 { width: 100%; max-width:  90%; margin: 0 auto; }
.index_w95 { width: 100%; max-width:  95%; margin: 0 auto; }

@media only screen and (max-width: 900px) {
    .hive_b { padding: 10px 0 !important; }
}

/* ==========================================================
   PC / 모바일 가시성
   ========================================================== */
.pc     {}
.mobile { display: none !important; }

@media only screen and (max-width: 900px) {
    .pc     { display: none !important; }
    /* revert: 각 요소 브라우저 기본값 복원 (div->block, span->inline, img->inline 등) */
    .mobile { display: revert !important; }

    /* 특정 display 타입이 필요할 때 조합 사용 */
    .mobile.ib  { display: inline-block !important; }
    .mobile.fx  { display: flex         !important; }
    .mobile.ifx { display: inline-flex  !important; }
}

/* ==========================================================
   상하 여백
   ========================================================== */
.index_mar10 { margin:  10px 0; }
.index_mar20 { margin:  20px 0; }
.index_mar30 { margin:  30px 0; }
.index_mar40 { margin:  40px 0; }
.index_mar50 { margin:  50px 0; }

.index_pa10  { padding: 10px 0; }
.index_pa20  { padding: 20px 0; }
.index_pa30  { padding: 30px 0; }
.index_pa40  { padding: 40px 0; }
.index_pa50  { padding: 50px 0; }

/* ==========================================================
   라인 표기
   ========================================================== */
.index_g_line { width: 50px; height: 2px; background: #999; display: block; margin: 0 auto; }
.index_b_line { width: 50px; height: 2px; background: #000; display: block; margin: 0 auto; }
.index_w_line { width: 50px; height: 2px; background: #fff; display: block; margin: 0 auto; }

/* 라인 높이 유틸 */
.index_line1 { line-height: 20px; }
.index_line2 { line-height: 25px; }

/* ==========================================================
   그림자
   ========================================================== */
.index_sw      { box-shadow: 4px 2px 10px rgba(0,0,0,0.1); }
.index_sw2     { box-shadow: 4px 2px 10px rgba(0,0,0,0.3); }
.index_text_sw { text-shadow: 1px 2px 1px rgba(0,0,0,0.1); }

/* ==========================================================
   라인 애니메이션
   ========================================================== */
.line_eff {
    background: var(--hv-line);
    transition: width 1.2s var(--expo) 0.3s, height 1.5s var(--expo);
}
.horizontal         { width: 0;    height: 1px; }
.horizontal.visible { width: 100%; }
.horizontal2        { width: 100%; height: 1px; }
.horizontal2.visible{ width: 0; }
.vertical           { width: 1px;  height: 0; }
.vertical.visible   { height: 100%; }

/* ==========================================================
   Swiper 페이지네이션
   ========================================================== */
.swiper-pagination-bullet {
    width: 6px; height: 6px;
    border-radius: 50%; background: #999;
    margin: 10px !important; opacity: 1;
}
.swiper-pagination-bullet-active {
    width: 22px !important; height: 6px !important;
    background: var(--hv-main) !important;
    border-radius: 5px !important;
    transition: width 0.4s var(--expo);
}

/* ==========================================================
   공통 버튼 시스템 (hb_btn)
   ========================================================== */
.hb_btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 100px; height: 44px; padding: 0 18px;
    border-radius: 12px; border: 1px solid transparent;
    cursor: pointer; text-decoration: none;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.hb_btn:hover  { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.08); }
.hb_btn:active { transform: translateY(0); transition-duration: 0.08s; }

.hb_btn_primary       { background: var(--hv-main); color: #fff; }
.hb_btn_primary:hover { filter: brightness(1.06); }
.hb_btn_gray          { background: #f2f2f2; color: #333; }
.hb_btn_gray:hover    { background: #e5e5e5; }
.hb_btn_line          { background: #fff; border-color: rgba(0,0,0,0.12); color: #333; }
.hb_btn_line:hover    { background: #111; color: #fff; }
.hb_btn_danger        { background: #ff4d4f; color: #fff; }

.hb_btn_wrap  { width: 100%; display: flex; justify-content: flex-end; margin-top: 20px; }
.hb_btn_group { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0; }

@media (max-width: 900px) {
    .hb_btn_wrap  { justify-content: center; }
    .hb_btn_group { width: 100%; justify-content: center; }
    .hb_btn       { flex: 1; min-width: unset; height: 40px; }
}

/* ==========================================================
   페이징 (default.css 개선 버전으로 덮어쓰기)
   ========================================================== */
.pg_wrap {
    clear: both; width: 100%;
    display: flex; align-items: center; justify-content: center; gap: 4px;
    padding: 28px 0 8px; box-sizing: border-box;
}
.pg_page, .pg_current {
    display: inline-flex; align-items: center; justify-content: center;
    vertical-align: middle; box-sizing: border-box;
}
.pg_page {
    color: #555; font-size: 13px;
    height: 34px; line-height: 1; padding: 0 10px; min-width: 34px;
    text-decoration: none; border-radius: 6px;
    border: 1px solid #e0e0e0; background: #fff;
    transition: background .18s cubic-bezier(.4,0,.2,1),
                color .18s cubic-bezier(.4,0,.2,1),
                border-color .18s cubic-bezier(.4,0,.2,1);
}
.pg_page:hover { background: #f5f5f5; border-color: #bbb; color: #111; }
.pg_start, .pg_prev, .pg_end, .pg_next {
    text-indent: 0; overflow: visible; background: none; padding: 0;
    border: 1px solid #e0e0e0; border-radius: 6px;
    color: #555; font-size: 13px; height: 34px; min-width: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .18s cubic-bezier(.4,0,.2,1),
                color .18s cubic-bezier(.4,0,.2,1);
}
.pg_start:hover, .pg_prev:hover, .pg_end:hover, .pg_next:hover {
    background: #f5f5f5; border-color: #bbb; color: #111;
}
.pg_current {
    background: #111; border: 1px solid #111; color: #fff;
    font-size: 13px; font-weight: 600;
    height: 34px; line-height: 1; padding: 0 10px; min-width: 34px; border-radius: 6px;
}


/* ==========================================================
   SEO용 숨김 h1
   ========================================================== */
.seo_h1 {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ==========================================================
   스크롤바 / 셀렉션
   ========================================================== */
body::-webkit-scrollbar       { width: 10px; }
body::-webkit-scrollbar-thumb { background: var(--main, #333); border-radius: 10px; }
body::-webkit-scrollbar-track { background: #fafafa; }
::selection { color: #fff; background: var(--main, #333); }

/* ==========================================================
   Hover 클래스 (over_*)
   ========================================================== */

/* over_hd: 이미지 호버 확대 */
.over_hd { overflow: hidden; }
.over_hd img {
    transition: transform 0.65s var(--ease-smooth, cubic-bezier(0.16, 1, 0.3, 1));
}
.over_hd:hover img { transform: scale(1.06); }

/* over_up: 카드 위로 살짝 이동 */
.over_up {
    transition: transform 0.45s var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)),
                box-shadow 0.45s var(--ease-smooth, cubic-bezier(0.16, 1, 0.3, 1));
}
.over_up:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.1);
}

/* over_line: 텍스트 밑줄 왼쪽에서 슬라이드 */
.over_line { position: relative; display: inline-block; }
.over_line::after {
    content: '';
    position: absolute;
    left: 0; bottom: -2px;
    width: 100%; height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.48s var(--ease-smooth, cubic-bezier(0.16, 1, 0.3, 1));
}
.over_line:hover::after { transform: scaleX(1); }

/* over_line_out: 이탈 시 오른쪽으로 사라짐 */
.over_line_out::after { transform-origin: right center; }
.over_line_out:hover::after { transform-origin: left center; transform: scaleX(1); }

/* over_fill: 배경 왼쪽에서 채우기 */
.over_fill { position: relative; overflow: hidden; z-index: 0; }
.over_fill::before {
    content: '';
    position: absolute; inset: 0;
    background: var(--fill-color, currentColor);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.55s var(--ease-smooth, cubic-bezier(0.16, 1, 0.3, 1));
    z-index: -1;
}
.over_fill:hover::before { transform: scaleX(1); }
.over_fill:hover { color: #fff !important; }

.of_rect  { padding: 13px 30px; border: 1.5px solid var(--fill-color); color: var(--fill-color); border-radius: 4px; }
.of_round { padding: 13px 30px; border: 1.5px solid var(--fill-color); color: var(--fill-color); border-radius: 100px; }
.of_sharp { padding: 14px 36px; border: 1px solid var(--fill-color); color: var(--fill-color); border-radius: 0; letter-spacing: 0.1em; }

/* over_dim: 이미지 딤 오버레이 */
.over_dim { position: relative; overflow: hidden; }
.over_dim::after {
    content: '';
    position: absolute; inset: 0;
    background: rgba(0,0,0,0);
    transition: background 0.52s var(--ease-smooth, cubic-bezier(0.16, 1, 0.3, 1));
}
.over_dim:hover::after { background: rgba(0,0,0,0.18); }

/* over_btn: 버튼 hover 기본 */
.over_btn {
    transition: transform 0.32s var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)),
                opacity 0.32s var(--ease-smooth, cubic-bezier(0.16, 1, 0.3, 1));
}
.over_btn:hover { transform: translateY(-2px); opacity: 0.88; }
.over_btn:active { transform: translateY(0); transition-duration: 0.1s; }

/* ==========================================================
   btn_sf: 슬라이드 플립 버튼
   ========================================================== */
.btn_sf {
    --sf-color: var(--main, #333);
    --sf-w: 180px; --sf-h: 50px; --sf-radius: 4px;
    position: relative; display: inline-flex;
    align-items: center; justify-content: center;
    width: var(--sf-w); height: var(--sf-h);
    overflow: hidden; cursor: pointer; text-decoration: none;
    border-radius: var(--sf-radius);
    border: 1.5px solid var(--sf-color);
    flex-shrink: 0;
}
.btn_sf .sf_bg {
    position: absolute; inset: 0;
    background: var(--sf-color);
    border-radius: calc(var(--sf-radius) - 1px);
    transform: translateY(102%);
    transition: transform 0.58s var(--ease-smooth, cubic-bezier(0.16, 1, 0.3, 1));
    z-index: 0;
}
.btn_sf .sf_front,
.btn_sf .sf_back {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center; gap: 7px;
    font-size: 14px; font-weight: 500; white-space: nowrap;
    transition: transform 0.58s var(--ease-smooth, cubic-bezier(0.16, 1, 0.3, 1)),
                opacity   0.45s var(--ease-smooth, cubic-bezier(0.16, 1, 0.3, 1));
    z-index: 1;
}
.btn_sf .sf_front { color: var(--sf-color); transform: translateY(0); opacity: 1; }
.btn_sf .sf_back  { color: #fff; transform: translateY(102%); opacity: 0; }
.btn_sf:hover .sf_bg    { transform: translateY(0); }
.btn_sf:hover .sf_front { transform: translateY(-102%); opacity: 0; }
.btn_sf:hover .sf_back  { transform: translateY(0); opacity: 1; }

/* ==========================================================
   btn_bl: 테두리 시계방향 드로우 버튼
   ========================================================== */
.btn_bl {
    --bl-color: var(--main, #333); --bl-t: 0.24s;
    position: relative; display: inline-flex;
    align-items: center; justify-content: center;
    overflow: hidden; cursor: pointer; text-decoration: none;
    flex-shrink: 0; font-size: 14px; font-weight: 500;
    color: var(--bl-color); background: transparent; border: none;
}
.btn_bl .bl_t, .btn_bl .bl_r, .btn_bl .bl_b, .btn_bl .bl_l { position: absolute; background: var(--bl-color); }
.btn_bl .bl_t { top:0;    left:0;  width:100%;  height:1.5px; transform:scaleX(0); transform-origin:left;   transition:transform var(--bl-t) var(--ease-smooth, cubic-bezier(0.16,1,0.3,1)); transition-delay:0s; }
.btn_bl .bl_r { top:0;    right:0; width:1.5px; height:100%;  transform:scaleY(0); transform-origin:top;    transition:transform var(--bl-t) var(--ease-smooth, cubic-bezier(0.16,1,0.3,1)); transition-delay:calc(var(--bl-t)*1); }
.btn_bl .bl_b { bottom:0; left:0;  width:100%;  height:1.5px; transform:scaleX(0); transform-origin:right;  transition:transform var(--bl-t) var(--ease-smooth, cubic-bezier(0.16,1,0.3,1)); transition-delay:calc(var(--bl-t)*2); }
.btn_bl .bl_l { top:0;    left:0;  width:1.5px; height:100%;  transform:scaleY(0); transform-origin:bottom; transition:transform var(--bl-t) var(--ease-smooth, cubic-bezier(0.16,1,0.3,1)); transition-delay:calc(var(--bl-t)*3); }
.btn_bl:hover .bl_t { transform:scaleX(1); }
.btn_bl:hover .bl_r { transform:scaleY(1); }
.btn_bl:hover .bl_b { transform:scaleX(1); }
.btn_bl:hover .bl_l { transform:scaleY(1); }
.btn_bl .bl_bg  { position:absolute; inset:0; background:var(--bl-color); transform:scale(0); opacity:0; transition:none; z-index:0; }
.btn_bl .bl_txt { position:relative; z-index:1; transition:color 0.24s var(--ease-smooth, cubic-bezier(0.16,1,0.3,1)); transition-delay:calc(var(--bl-t)*4); }
.btn_bl.fill:hover .bl_bg  { transform:scale(1); opacity:1; transition:transform 0.3s var(--ease-smooth, cubic-bezier(0.16,1,0.3,1)), opacity 0.3s; transition-delay:calc(var(--bl-t)*4); }
.btn_bl.fill:hover .bl_txt { color:#fff; }

/* ==========================================================
   btn_ar: 화살표 버튼
   ========================================================== */
.btn_ar {
    --ar-color: var(--main, #333); --ar-w: 180px; --ar-h: 50px; --ar-r: 4px;
    position: relative; display: inline-flex;
    align-items: center; justify-content: center;
    width: var(--ar-w); height: var(--ar-h);
    overflow: hidden; cursor: pointer; text-decoration: none;
    border-radius: var(--ar-r); flex-shrink: 0;
    font-size: 14px; font-weight: 500;
}
.btn_ar .ar_front, .btn_ar .ar_back {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    gap: 7px; white-space: nowrap; z-index: 1;
    transition: transform 0.56s var(--ease-smooth, cubic-bezier(0.16,1,0.3,1)),
                opacity   0.48s var(--ease-smooth, cubic-bezier(0.16,1,0.3,1));
}
.btn_ar .ar_bg { position: absolute; inset: 0; z-index: 0; transition: transform 0.56s var(--ease-smooth, cubic-bezier(0.16,1,0.3,1)); }

.ar_type2 { border: none; background: var(--ar-color); }
.ar_type2 .ar_bg    { background: var(--main2, #555); transform: translateY(102%); }
.ar_type2 .ar_front { color: #fff; transform: translateY(0); opacity: 1; }
.ar_type2 .ar_back  { color: #fff; transform: translateY(102%); opacity: 0; }
.ar_type2:hover .ar_bg    { transform: translateY(0); }
.ar_type2:hover .ar_front { transform: translateY(-102%); opacity: 0; }
.ar_type2:hover .ar_back  { transform: translateY(0); opacity: 1; }

.ar_type3 { border: 1.5px solid var(--ar-color); background: transparent; justify-content: flex-start; padding: 0 24px; }
.ar_type3 .ar_txt { color: var(--ar-color); font-size: 14px; font-weight: 500; white-space: nowrap; position: relative; z-index: 1; transition: transform 0.5s var(--ease-smooth, cubic-bezier(0.16,1,0.3,1)); }
.ar_type3 .ar_ico { display: inline-flex; align-items: center; color: var(--ar-color); width: 0; overflow: hidden; opacity: 0; position: relative; z-index: 1; transition: width 0.5s var(--ease-smooth, cubic-bezier(0.16,1,0.3,1)), opacity 0.4s var(--ease-smooth, cubic-bezier(0.16,1,0.3,1)), margin 0.5s var(--ease-smooth, cubic-bezier(0.16,1,0.3,1)); }
.ar_type3 .ar_bg  { transform: translateX(-102%); border-radius: var(--ar-r); }
.ar_type3:hover .ar_bg  { transform: translateX(0); }
.ar_type3:hover .ar_txt { transform: translateX(-6px); }
.ar_type3:hover .ar_ico { width: 20px; opacity: 1; margin-left: 8px; }

.ar_link {
    position: relative; display: inline-flex; align-items: center; gap: 0;
    padding: 4px 0; font-size: 14px; font-weight: 400;
    background: none; border: none; cursor: pointer; text-decoration: none;
    flex-shrink: 0; transition: color 0.38s var(--ease-smooth, cubic-bezier(0.16,1,0.3,1));
}
.ar_link::after {
    content: ''; position: absolute; bottom: 0; left: 0;
    width: 100%; height: 1px; background: currentColor;
    transform: scaleX(0); transform-origin: left;
    transition: transform 0.48s var(--ease-smooth, cubic-bezier(0.16,1,0.3,1));
}
.ar_link .al_ico { display: inline-flex; align-items: center; width: 0; overflow: hidden; opacity: 0; transition: width 0.45s var(--ease-spring, cubic-bezier(0.34,1.56,0.64,1)), opacity 0.38s var(--ease-smooth, cubic-bezier(0.16,1,0.3,1)), margin 0.45s var(--ease-spring, cubic-bezier(0.34,1.56,0.64,1)); }
.ar_link:hover::after  { transform: scaleX(1); }
.ar_link:hover .al_ico { width: 18px; opacity: 1; margin-left: 6px; }

/* ==========================================================
   텍스트 Reveal 애니메이션
   ========================================================== */
.reveal_wrap { overflow: hidden; display: block; }
.reveal_line {
    display: block;
    transform: translateY(105%);
    opacity: 0;
    transition: transform 0.9s var(--ease-enter, cubic-bezier(0.05, 0.7, 0.1, 1.0)),
                opacity   0.9s var(--ease-smooth, cubic-bezier(0.16, 1, 0.3, 1));
}
.reveal_line.visible { transform: translateY(0); opacity: 1; }

.w_wrap  { display: inline-block; overflow: hidden; vertical-align: bottom; }
.w_inner {
    display: inline-block;
    transform: translateY(110%) rotate(3deg);
    opacity: 0;
    transition: transform 0.65s var(--ease-enter, cubic-bezier(0.05, 0.7, 0.1, 1.0)),
                opacity   0.5s  var(--ease-smooth, cubic-bezier(0.16, 1, 0.3, 1));
}
.stagger_words.active .w_inner { transform: translateY(0) rotate(0deg); opacity: 1; }

/* ==========================================================
   이미지 와이프 Reveal
   ========================================================== */
.wipe_wrap { position: relative; overflow: hidden; }
.wipe_wrap::after {
    content: '';
    position: absolute; inset: 0;
    background: var(--bg, #fff);
    transform: scaleX(1);
    transform-origin: right;
    transition: transform 0.9s var(--ease-enter, cubic-bezier(0.05, 0.7, 0.1, 1.0));
}
.wipe_wrap.revealed::after { transform: scaleX(0); }

/* ==========================================================
   클립패스 Reveal
   ========================================================== */
.clip_reveal {
    clip-path: inset(100% 0 0 0);
    transition: clip-path 0.9s var(--ease-enter, cubic-bezier(0.05, 0.7, 0.1, 1.0));
}
.clip_reveal.visible { clip-path: inset(0% 0 0 0); }

/* ==========================================================
   마키 텍스트 스트립
   ========================================================== */
.marquee_strip { overflow: hidden; white-space: nowrap; }
.marquee_track { display: inline-flex; animation: marquee 24s linear infinite; }
@keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.marquee_track:hover { animation-play-state: paused; }

/* ==========================================================
   아이콘 hover 색상 전환
   ========================================================== */
.icon_wrap { transition: color 0.22s var(--ease-smooth, cubic-bezier(0.16, 1, 0.3, 1)); color: #999; }
.icon_wrap:hover { color: var(--main, #333); }

/* ==========================================================
   스크롤 프로그레스 바
   ========================================================== */
#progress_bar  { position: fixed; top: 0; left: 0; right: 0; height: 2px; background: var(--line, #ddd); z-index: 9999; pointer-events: none; }
#progress_fill { height: 100%; background: var(--main, #333); transform: scaleX(0); transform-origin: left; }

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}