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

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

   [특이도 주의]
   리스트 리셋 `.gtftc ul,.gtftc ol,.gtftc li` 는 특이도 (0,1,1) 입니다.
   `.gtftc_note{margin:...}` 처럼 클래스 하나(0,1,0)로 쓰면 리셋이 이겨서
   여백이 조용히 사라집니다(실제로 그렇게 나왔습니다). 그래서 ul/ol/li 에
   여백을 주는 규칙은 전부 `.gtftc .gtftc_xxx` 로 한 단계 더 한정했습니다.

   [구분선]
   구분선(|)은 글자가 아니라 앞 항목의 ::after 입니다. 절대배치로 li 왼쪽에
   그리면 줄바꿈됐을 때 다음 줄 첫머리에 막대만 홀로 남습니다. ::after 는 앞
   항목에 붙어 있어 줄이 바뀌어도 따라가지 않고, 낭독기도 읽지 않습니다.

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

/* --- 토큰 ----------------------------------------------------------------
   --gtftc-bg / -line / -tx / -tx-dim / -tx-on / -topbg / -sp-base / -edge 는
   footer.php 가 설정에 맞춰 계산해 <style> 로 덮어씁니다.
   여기 값은 그 <style> 이 없을 때(구버전 PHP)의 기본값입니다. */
.gtftc{
    --gtftc-pt      : var(--rb-point, var(--gtftc-fallback, #00A3FF));
    --gtftc-bg      : #2F2C28;
    --gtftc-line    : rgba(255,255,255,.14);
    --gtftc-tx      : #A8A49F;
    --gtftc-tx-dim  : #948F8A;
    --gtftc-tx-on   : #F3F2F1;
    --gtftc-topbg   : rgba(0,0,0,.24);
    --gtftc-sp-base : .75;   /* 줄 간격 배율 (footer.php 설정) */
    --gtftc-sp      : var(--gtftc-sp-base, .75);
    --gtftc-top     : 96px;  /* TOP 버튼 한 변 */
    --gtftc-edge    : 0px;   /* 본문 오른쪽 끝까지의 거리 (footer.php 계산) */

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

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

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

/* --- 로고 ---------------------------------------------------------------- */
.gtftc_logo{
    margin:0 0 calc(40px * var(--gtftc-sp));
    /* TOP 버튼 자리를 비워 둡니다(좁은 화면에서 로고가 버튼 밑으로 들어가지 않게) */
    padding-right:calc(var(--gtftc-top) + 24px);
}
.gtftc_logo a{display:inline-block;}
.gtftc_logo img{
    display:block;
    max-width:200px; max-height:50px;
    width:auto; height:auto;
}

/* --- 정보 행 : 항목 사이 세로 구분선 ------------------------------------- */
.gtftc_row{
    display:flex;
    flex-wrap:wrap;
    row-gap:calc(14px * var(--gtftc-sp));
    font-size:14px;
    line-height:1.8;
    color:var(--gtftc-tx);
}
.gtftc .gtftc_row+.gtftc_row{margin-top:calc(20px * var(--gtftc-sp));}
.gtftc_row li:not(:last-child)::after{
    content:"";
    display:inline-block;
    width:1px; height:12px;
    margin:0 20px;
    vertical-align:-1px;
    background:currentColor;
    opacity:.32;
}
.gtftc_row li b{
    font-weight:400;
    color:var(--gtftc-tx-dim);
}
.gtftc_row li b::after{content:"\00a0:\00a0";}
.gtftc_row a:hover,.gtftc_row a:focus-visible{color:var(--gtftc-tx-on);}

/* --- 고지사항 ------------------------------------------------------------ */
.gtftc .gtftc_note{
    margin-top    :calc(46px * var(--gtftc-sp));
    margin-bottom :calc(46px * var(--gtftc-sp));
    padding-top   :calc(42px * var(--gtftc-sp));
    padding-bottom:calc(42px * var(--gtftc-sp));
    border-top:1px solid var(--gtftc-line);
    border-bottom:1px solid var(--gtftc-line);
}
.gtftc .gtftc_note li{
    position:relative;
    padding-left:22px;
    font-size:13px;
    line-height:1.85;
    color:var(--gtftc-tx-dim);
}
.gtftc .gtftc_note li+li{margin-top:calc(14px * var(--gtftc-sp));}
.gtftc_note li::before{
    content:"\203B";           /* ※ */
    position:absolute;
    left:0; top:0;
    color:var(--gtftc-pt);
    opacity:.85;
}

/* --- 약관 링크 ----------------------------------------------------------- */
.gtftc .gtftc_policy{
    display:flex;
    flex-wrap:wrap;
    row-gap:calc(12px * var(--gtftc-sp));
    margin-top:calc(42px * var(--gtftc-sp));
    font-size:14px;
    line-height:1.8;
}
.gtftc_policy li:not(:last-child)::after{
    content:"";
    display:inline-block;
    width:1px; height:12px;
    margin:0 20px;
    vertical-align:-1px;
    background:currentColor;
    opacity:.32;
}
.gtftc_policy a{
    color:var(--gtftc-tx);
    transition:color .18s;
}
.gtftc_policy a:hover,.gtftc_policy a:focus-visible{color:var(--gtftc-pt);}
.gtftc_policy a.is_key{font-weight:700; color:var(--gtftc-tx-on);}

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

/* --- 카피라이트 ---------------------------------------------------------- */
.gtftc_copy{
    display:block;
    margin-top:calc(42px * var(--gtftc-sp));
    font-size:13px;
    line-height:1.7;
    letter-spacing:.01em;
    color:var(--gtftc-tx-dim);
    opacity:.85;
}
.gtftc_copy a:hover{color:var(--gtftc-tx-on);}

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

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

/* 1361~1400px 안전장치 — gt_ft_B 와 같은 이유입니다(주석 참고). */
@media all and (min-width:1361px){
    .gtftc_inner{
        box-sizing:border-box;
        max-width:calc(100% - 40px) !important;
    }
}

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

@media all and (max-width:1024px){
    .gtftc{--gtftc-sp:calc(var(--gtftc-sp-base, .75) * .8);}
    .gtftc_row li:not(:last-child)::after,
    .gtftc_policy li:not(:last-child)::after{margin:0 15px;}
}

@media all and (max-width:780px){
    .gtftc{--gtftc-top:72px;}
}

@media all and (max-width:500px){
    .gtftc{font-size:13px; --gtftc-sp:calc(var(--gtftc-sp-base, .75) * .68); --gtftc-top:60px;}
    .gtftc_logo img{max-width:150px; max-height:40px;}

    /* 좁은 화면에서는 항목을 한 줄에 하나씩 — 구분선은 감춥니다 */
    .gtftc_row,
    .gtftc_policy{display:block; font-size:13px;}
    .gtftc_row li,
    .gtftc_policy li{display:block;}
    .gtftc .gtftc_row li+li,
    .gtftc .gtftc_policy li+li{margin-top:calc(14px * var(--gtftc-sp));}
    .gtftc_row li:not(:last-child)::after,
    .gtftc_policy li:not(:last-child)::after{display:none;}

    .gtftc .gtftc_note li{font-size:12px;}
    .gtftc_sns a{width:38px; height:38px;}
    .gtftc_sns img{width:21px; height:21px;}
}