@charset "utf-8";
/* ==========================================================================
   gt_ft_B — 3열 정보형 푸터
   CSS_VER 1.4.0   ※ footer.php 와 반드시 같이 올리세요
   --------------------------------------------------------------------------
   1.4.0 : 1360px 이하에서 좌우 20px 여백 추가(테마 mobile.css 가 안 주는 부분)
   1.3.0 : SNS 아이콘을 평소에도 브랜드 색으로 표시(테두리·호버 효과는 유지)
   1.2.0 : 줄 간격 조절 노브(--gtftb-sp) 추가
   1.1.0 : 배경색 설정 / TOP 버튼 이동 / 여백 특이도 버그 수정

   [줄 간격]
   세로 여백은 전부 calc(기준값 * var(--gtftb-sp)) 로 씁니다.
   --gtftb-sp-base 는 footer.php 의 $gt_ft['space'] 가 정합니다(기본 0.75).
   화면이 좁아지면 아래 미디어쿼리가 그 값을 한 번 더 줄입니다.
   ★ 새 여백을 추가할 때도 반드시 calc(... * var(--gtftb-sp)) 로 쓰세요.
     고정 px 로 쓰면 그 항목만 설정을 안 따라갑니다.

   [특이도 주의]
   리스트 리셋 `.gtftb ul,.gtftb ol,.gtftb li` 는 특이도 (0,1,1) 입니다.
   `.gtftb_cs_info{margin-top:...}` 처럼 클래스 하나(0,1,0)로 쓰면 리셋이 이겨서
   여백이 조용히 사라집니다. 그래서 ul/ol/li 에 여백을 주는 규칙은 전부
   `.gtftb .gtftb_xxx` 로 한 단계 더 한정했습니다. 새 규칙도 같이 하세요.

   [강조컬러]
   PHP 가 인라인으로 내리지 않습니다. :root 의 --rb-point(onweb_rbcolor 엔진)
   → .gtftb 의 --gtftb-fallback(footer.php 가 심는 테마색) → 기본값 순으로
   CSS 가 스스로 찾습니다.

   브레이크포인트 : 1360px(테마 모바일 전환) / 1024px / 780px / 500px
   ========================================================================== */

/* --- 토큰 ----------------------------------------------------------------
   --gtftb-bg / -bar / -line / -tx / -tx-dim / -tx-strong / -chip / -sp-base /
   -edge 는 footer.php 가 설정에 맞춰 계산해 <style> 로 덮어씁니다.
   여기 값은 그 <style> 이 없을 때(구버전 PHP)의 기본값입니다. */
.gtftb{
    --gtftb-pt        : var(--rb-point, var(--gtftb-fallback, #00A3FF));
    --gtftb-bg        : #F6F4F2;
    --gtftb-bar       : #EFECE9;
    --gtftb-line      : rgba(0,0,0,.10);
    --gtftb-tx        : #454443;
    --gtftb-tx-dim    : #6F6E6D;
    --gtftb-tx-strong : #191818;
    --gtftb-chip      : #FFFFFF;
    --gtftb-sp-base   : .75;   /* 줄 간격 배율 (footer.php 설정) */
    --gtftb-sp        : var(--gtftb-sp-base, .75);
    --gtftb-top       : 72px;  /* TOP 버튼 한 변 */
    --gtftb-edge      : 0px;   /* 본문 오른쪽 끝까지의 거리 (footer.php 계산) */

    position:relative;
    background:var(--gtftb-bg);
    border-top:1px solid var(--gtftb-line);
    color:var(--gtftb-tx);
    font-size:15px;
    line-height:1.6;
    word-break:keep-all;
}
.gtftb *{box-sizing:border-box;}
.gtftb a{color:inherit; text-decoration:none;}
.gtftb ul,.gtftb ol,.gtftb li{margin:0; padding:0; list-style:none;}

.gtftb_blind{
    position:absolute; width:1px; height:1px; margin:-1px; padding:0;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* --- 본문 3열 ------------------------------------------------------------
   세로 여백은 .inner 바깥에 둡니다. 가로폭 설정이 100% 이면 .inner 에 인라인
   padding:0px 40px 이 붙는데, 인라인은 CSS 를 이기므로 여기에 세로 여백을
   두면 통째로 날아갑니다. */
.gtftb_main{
    padding-top   :calc(90px * var(--gtftb-sp));
    padding-bottom:calc(74px * var(--gtftb-sp));
}

.gtftb_grid{
    margin:0 auto;
    display:grid;
    grid-template-columns:1.35fr 1fr 1fr;
    column-gap:calc(70px * var(--gtftb-sp));
    row-gap   :calc(70px * var(--gtftb-sp));
    align-items:start;
}

.gtftb_col h3{
    margin:0 0 calc(30px * var(--gtftb-sp));
    font-size:14px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--gtftb-pt);
}

/* 1열 : 로고 + 사업자정보 */
.gtftb_logo{display:block; margin:0 0 calc(36px * var(--gtftb-sp));}
.gtftb_logo img{
    display:block;
    max-width:210px; max-height:54px;
    width:auto; height:auto;
}
.gtftb .gtftb_biz li{
    font-size:14px;
    line-height:1.7;
    color:var(--gtftb-tx-dim);
}
.gtftb .gtftb_biz li+li{margin-top:calc(15px * var(--gtftb-sp));}
.gtftb_biz li b{
    font-weight:400;
    color:var(--gtftb-tx-dim);
}
/* inline-block 으로 두면 가상요소 끝의 공백이 잘려 "상호 :값" 으로 붙습니다.
   인라인으로 두고 구분자 뒤 공백은 \00a0(줄바꿈 안 되는 공백)로 확실히 남깁니다. */
.gtftb_biz li b::after{content:"\00a0:\00a0";}

/* 2열 : 고객센터 */
.gtftb_tel{
    display:inline-block;
    font-size:clamp(26px,2.4vw,34px);
    font-weight:700;
    letter-spacing:-.02em;
    line-height:1.15;
    color:var(--gtftb-tx-strong);
    transition:color .18s;
}
.gtftb_tel:hover,.gtftb_tel:focus-visible{color:var(--gtftb-pt);}

.gtftb .gtftb_cs_info{
    margin-top :calc(32px * var(--gtftb-sp));
    padding-top:calc(30px * var(--gtftb-sp));
    border-top:1px solid var(--gtftb-line);
}
.gtftb .gtftb_cs_info li{
    display:flex;
    align-items:baseline;
    gap:16px;
    font-size:14px;
    line-height:1.7;
    color:var(--gtftb-tx-dim);
}
.gtftb .gtftb_cs_info li+li{margin-top:calc(16px * var(--gtftb-sp));}
.gtftb_cs_info li>span{
    flex:0 0 54px;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--gtftb-tx-strong);
}
.gtftb_cs_info li a:hover{color:var(--gtftb-pt); text-decoration:underline;}

.gtftb_time{
    margin:calc(26px * var(--gtftb-sp)) 0 0;
    font-size:14px;
    line-height:1.7;
    color:var(--gtftb-tx-dim);
}

/* 3열 : 바로가기 + SNS */
.gtftb .gtftb_lnk li+li{margin-top:calc(19px * var(--gtftb-sp));}
.gtftb_lnk a{
    display:inline-block;
    font-size:15px;
    line-height:1.6;
    color:var(--gtftb-tx);
    transition:color .18s;
}
.gtftb_lnk a:hover,.gtftb_lnk a:focus-visible{color:var(--gtftb-pt);}
.gtftb_lnk a.is_key{font-weight:700; color:var(--gtftb-tx-strong);}

.gtftb_sns{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:calc(42px * var(--gtftb-sp));
}
.gtftb_sns a{
    display:flex;
    align-items:center;
    justify-content:center;
    width:42px; height:42px;
    border:1px solid var(--gtftb-line);
    border-radius:10px;
    background:transparent;
    transition:border-color .18s, background-color .18s, transform .18s;
}
/* sns_g 의 g_*.svg 는 이름과 달리 '브랜드 컬러 원형 배지'입니다
   (카카오채널 #FAE100, 페이스북 #445D97 …).
   1.2.0 까지는 무채색 푸터에서 튀지 않게 grayscale 로 눌러 두었는데,
   배경에 묻혀 마우스를 올리기 전에는 무슨 아이콘인지 알아보기 어려웠습니다.
   1.3.0 부터 ★평소에도 브랜드 색 그대로★ 보여 줍니다.
   테두리·배경칩·떠오르는 효과는 그대로 둡니다. (gt_ft_C · gt_ft_D 와 같은 처리) */
.gtftb_sns img{
    width:24px; height:24px;
    filter:none;      /* 브랜드 색 그대로 */
    opacity:1;
    transition:filter .18s;
}
.gtftb_sns a:hover,.gtftb_sns a:focus-visible{
    border-color:var(--gtftb-pt);
    background:var(--gtftb-chip);
    transform:translateY(-2px);
}
/* 올렸을 때는 테두리·배경이 바뀌고 살짝 떠오릅니다.
   아이콘 자체는 아주 조금만 밝게 해서 "눌린다"는 느낌만 줍니다. */
.gtftb_sns a:hover img,.gtftb_sns a:focus-visible img{filter:brightness(1.1);}

/* 앱 다운로드 버튼(선택) */
.gtftb_app{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-top:calc(32px * var(--gtftb-sp));
    padding:0 22px;
    height:46px;
    border:1px solid var(--gtftb-line);
    border-radius:46px;
    background:transparent;
    font-size:14px;
    color:var(--gtftb-tx);
    cursor:pointer;
    transition:border-color .18s, color .18s;
}
.gtftb_app:hover{border-color:var(--gtftb-pt); color:var(--gtftb-pt);}
.gtftb_app svg{width:18px; height:18px; fill:currentColor;}

/* --- 하단 바 ------------------------------------------------------------- */
.gtftb_bar{
    border-top:1px solid var(--gtftb-line);
    background:var(--gtftb-bar);
}
.gtftb_bar .gtftb_bar_in{
    margin:0 auto;
    min-height:calc(76px * var(--gtftb-sp));
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:10px 26px;
}
.gtftb_copy{
    font-style:normal;
    font-size:13px;
    letter-spacing:.01em;
    line-height:1.7;
    color:var(--gtftb-tx-dim);
}
.gtftb_copy a:hover{color:var(--gtftb-pt);}
.gtftb_count{
    font-size:13px;
    line-height:1.7;
    color:var(--gtftb-tx-dim);
}
.gtftb_count .visit_flex{margin-top:0 !important;}

/* --- TOP 버튼 : 푸터 오른쪽 위, 본문 폭에 맞춘 위치 -----------------------
   right 을 두 번 선언합니다. 아래 줄(calc/max)을 못 읽는 브라우저에서는
   윗줄이 남아 화면 오른쪽 끝에 붙습니다(예전 동작). */
.gtftb_top{
    position:absolute;
    top:0;
    right:0;
    right:var(--gtftb-edge, 0px);
    width:var(--gtftb-top);
    height:var(--gtftb-top);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    padding:0;
    border:0;
    background:var(--gtftb-pt);
    color:var(--rb-point-on, #fff);
    cursor:pointer;
    transition:filter .18s, transform .18s;
}
.gtftb_top svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7;}
.gtftb_top strong{
    font-size:11px;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
}
.gtftb_top:hover,.gtftb_top:focus-visible{filter:brightness(1.12); transform:translateY(2px);}

/* --- 반응형 --------------------------------------------------------------
   여백은 --gtftb-sp 한 줄만 줄이면 전부 따라옵니다.
   (자기 자신을 참조하면 무효가 되므로 반드시 --gtftb-sp-base 를 곱합니다) */

/* 1361~1400px 안전장치.
   .inner 에는 PHP 가 인라인으로 width:1400px 을 박습니다. 1360px 이하는 테마
   mobile.css 의 .inner{width:100% !important} 가 받아 주지만, 그 사이 구간에서는
   화면보다 넓어져 가로 스크롤이 생깁니다. 폭이 화면을 넘지 못하게만 막습니다. */
@media all and (min-width:1361px){
    .gtftb_grid,
    .gtftb_bar .gtftb_bar_in{
        box-sizing:border-box;
        max-width:calc(100% - 40px) !important;
    }
}

@media all and (max-width:1360px){
    .gtftb{
        --gtftb-sp:calc(var(--gtftb-sp-base, .75) * .88);
        border-top:1px solid var(--gtftb-line);   /* 테마 mobile.css 의 border-top:0 상쇄 */
    }
    /* 테마 mobile.css 가 이 구간에서 .inner 를 width:100% 로 만드는데 좌우 여백은
       주지 않습니다. 그대로 두면 글자가 화면 끝에 붙습니다(헤더는 20px 을 씁니다).
       가로폭 100% 설정이면 .inner 에 인라인 padding:0px 40px 이 붙어 그쪽이 이깁니다. */
    .gtftb_grid,
    .gtftb_bar .gtftb_bar_in{padding-left:20px; padding-right:20px;}
}

@media all and (max-width:1024px){
    .gtftb{--gtftb-sp:calc(var(--gtftb-sp-base, .75) * .8); --gtftb-top:64px;}
    .gtftb_grid{grid-template-columns:1fr 1fr;}
    .gtftb_brand{grid-column:1 / -1;}
}

@media all and (max-width:780px){
    .gtftb_grid{grid-template-columns:1fr;}
}

@media all and (max-width:500px){
    .gtftb{font-size:14px; --gtftb-sp:calc(var(--gtftb-sp-base, .75) * .68); --gtftb-top:56px;}
    .gtftb_logo img{max-width:160px; max-height:42px;}
    .gtftb .gtftb_biz li,
    .gtftb .gtftb_cs_info li,
    .gtftb_time{font-size:13px;}
    .gtftb_cs_info li>span{flex-basis:46px;}
    .gtftb_sns a{width:38px; height:38px; border-radius:9px;}
    .gtftb_sns img{width:21px; height:21px;}

    .gtftb_bar .gtftb_bar_in{
        justify-content:center;
        text-align:center;
    }
    .gtftb_copy,.gtftb_count{width:100%; text-align:center; font-size:12px;}
}