@charset "utf-8";
/* ==========================================================================
   gt_ft_A3 — 유틸바(RealCount) + 기본 정돈형 푸터 · 관리자 옵션판
   CSS_VER 1.1.0   ※ footer.php 와 반드시 같이 올리세요
   --------------------------------------------------------------------------
   1.1.0 : (A3) 휴대폰(500px 이하) 로고 크기 변수 --gtfta1-logoh-mo / -logow-mo.
           없으면 종전대로(높이 = PC 의 85%, 폭 = PC 와 같음)
   --------------------------------------------------------------------------
   [줄 간격]
   세로 여백은 전부 calc(기준값 * var(--gtfta1-sp)) 로 씁니다.
   --gtfta1-sp-base 는 footer.php 의 $gt_ft['space'] 가 정합니다(기본 0.75).
   화면이 좁아지면 아래 미디어쿼리가 그 값을 한 번 더 줄입니다.
   ★ 새 여백을 추가할 때도 반드시 calc(... * var(--gtfta1-sp)) 로 쓰세요.
     고정 px 로 쓰면 그 항목만 설정을 안 따라갑니다.
   ★ 미디어쿼리에서 --gtfta1-sp 를 줄일 때는 반드시 --gtfta1-sp-base 를 곱합니다.
     --gtfta1-sp:calc(var(--gtfta1-sp) * .8) 은 순환 참조라 선언 전체가 무효입니다.

   [특이도 주의]  ★ 이 파일에서 가장 많이 밟는 함정입니다
   아래 리셋들은 전부 특이도 (0,1,1) 입니다.
       .gtfta1 ul / ol / li   {margin:0; padding:0}
       .gtfta1 p              {margin:0}
       .gtfta1 h3             {margin:0}
   `.gtfta1_biz{margin-top:...}` 처럼 클래스 하나(0,1,0)로 쓰면 리셋이 이겨서
   여백이 조용히 사라집니다(에러도 안 나고, 코드만 보면 절대 안 보입니다).
   ★ ul·ol·li·p·h3 태그에 margin/padding 을 주는 규칙은 반드시
     `.gtfta1 .gtfta1_xxx` 로 클래스 두 개를 겹쳐 쓰세요.

   [세로 여백의 위치]
   .inner 에는 가로폭 설정이 100% 일 때 인라인 padding:0px 40px 이 붙습니다.
   인라인은 CSS 를 이기므로 .inner 에 세로 여백을 주면 통째로 날아갑니다.
   세로 여백은 바깥 래퍼(.gtfta1_wrap / .gtfta1_util)와 각 블록에 줍니다.

   [구분선]
   항목 사이 구분선(|)은 글자가 아니라 '앞 항목'의 ::after 입니다. 절대배치로
   li 왼쪽에 그리면 줄바꿈됐을 때 다음 줄 첫머리에 막대만 홀로 남습니다.

   [RealCount]
   방문자스킨(skin/visit/rb.basic)·현재접속스킨의 style.css 는 add_stylesheet()
   로 걸려 있어 푸터 시점(=</head> 이후)에는 실릴 보장이 없습니다. 그래서 이
   파일이 필요한 모양을 직접 그립니다. 다만 그 스킨 CSS 가 실리는 경우도 있고
   거기 `.RealCount_t{font-size:10px !important}` 가 있어, 그 한 줄만 !important
   로 되받습니다. .cc_total_cnt 의 배경색은 건드리지 않습니다 — set.point.css 가
   강조컬러를 넣어 주는 자리입니다.

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

/* --- 토큰 ----------------------------------------------------------------
   -bg / -line / -tx / -tx-dim / -tx-on / -topbg / -chip / -utilbg /
   -sp-base / -edge / -edge-mo / -band / -top-base / -utilh-base / -padt / -padb /
   -sns / -logoh / -logow / -pt-on 은 footer.php 가 설정에 맞춰 계산해
   <style> 로 덮어씁니다.
   여기 값은 그 <style> 이 없을 때(구버전 PHP · 배포 누락)의 기본값입니다.

   ★ -pt-safe(강조컬러 대비 보정판)는 설정 'pt_fix' 가 켜져 있을 때만 내려옵니다.
     그래서 이 파일은 어디서나 var(--gtfta1-pt-safe, var(--gtfta1-pt)) 로 씁니다 —
     보정을 끄면 값이 아예 없으니 자동으로 원색으로 떨어집니다.
     ※ 여기 :root 목록에 -pt-safe 기본값을 적으면 안 됩니다. 적는 순간
       '보정 끔'이 동작하지 않습니다(항상 그 값이 잡혀 버립니다).

   ★ 그 <style> 은 이 파일보다 나중에 실립니다. 그래서 미디어쿼리에서 같은 이름을
     다시 정하려면 특이도를 올려야 합니다(`.gtfta1.gtfta1`). 그렇지 않은 값은
     반드시 `-base` 짝을 두고 배율만 곱합니다 — --sp / --sp-base,
     --top / --top-base, --utilh / --utilh-base 가 그 방식입니다.

   ★ 강조컬러(--gtfta1-pt)만은 PHP 가 내려보내지 않습니다.
     인라인/스코프로 색을 박으면 CSS 폴백 경로가 죽어서, 강조컬러 미리보기가
     이 푸터에서만 안 먹는 상태가 됩니다. 아래 var() 사슬이 스스로 찾습니다.
     PHP 는 '대비 보정판'(--gtfta1-pt-safe)만 추가로 넘깁니다.               */
.gtfta1{
    --gtfta1-pt      : var(--rb-point, var(--gtfta1-fallback, #E03A2F));
    --gtfta1-bg      : #F1F2F4;
    --gtfta1-utilbg  : #E9EAEC;
    --gtfta1-line    : rgba(0,0,0,.11);
    --gtfta1-tx      : #55585C;
    --gtfta1-tx-dim  : #6D7074;
    --gtfta1-tx-on   : #17181A;
    --gtfta1-topbg   : rgba(0,0,0,.055);
    --gtfta1-chip    : rgba(0,0,0,.045);
    --gtfta1-sp-base : .75;   /* 줄 간격 배율 (footer.php 설정) */
    --gtfta1-sp      : var(--gtfta1-sp-base, .75);
    --gtfta1-edge    : 20px;  /* 본문 글자 오른쪽 끝까지의 거리 (footer.php 계산) */
    --gtfta1-edge-mo : 20px;  /* 1360px 이하에서의 같은 값 (구간마다 다릅니다) */
    --gtfta1-band    : 3px;   /* 상단 강조띠 두께 */
    --gtfta1-top-base: 88px;  /* TOP 버튼 한 변 (footer.php 설정) */
    --gtfta1-top     : var(--gtfta1-top-base, 88px);
    --gtfta1-utilh-base: 68px; /* 유틸바 최소 높이 (footer.php 설정) */
    --gtfta1-utilh   : var(--gtfta1-utilh-base, 68px);
    --gtfta1-padt    : 58px;  /* 본문 위 여백 기준값 (footer.php 설정 · --sp 가 곱해짐) */
    --gtfta1-padb    : 100px; /* 본문 아래 여백 기준값 */
    --gtfta1-sns     : 40px;  /* SNS 아이콘 한 칸 */
    --gtfta1-logoh   : 34px;
    --gtfta1-logow   : 200px;

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

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

/* 키보드 포커스는 어느 요소에서든 보이게 합니다 */
.gtfta1 a:focus-visible,
.gtfta1 button:focus-visible{
    outline:2px solid var(--gtfta1-pt-safe, var(--gtfta1-pt));
    outline-offset:2px;
}

.gtfta1_inner{margin:0 auto;}

/* --- 상단 강조띠 ---------------------------------------------------------- */
.gtfta1.band_point::before,
.gtfta1.band_gradient::before{
    content:"";
    position:absolute; left:0; top:0; right:0;
    height:var(--gtfta1-band, 3px);
    z-index:3;
}
.gtfta1.band_point::before{background:var(--gtfta1-pt);}
.gtfta1.band_gradient::before{
    background:linear-gradient(90deg, var(--gtfta1-pt), rgba(0,0,0,0) 78%);
}

/* ==========================================================================
   상단 유틸바 — 약관 링크 · RealCount · 현재접속
   ========================================================================== */
.gtfta1_util{background:var(--gtfta1-utilbg);}

/* 구분선은 footer.php 의 'util_line' 설정이 켭니다
   (both / bottom · 기본 / top / none). 위·아래를 따로 켜므로 네 조합이 다 됩니다. */
.gtfta1.uline_t .gtfta1_util{border-top:1px solid var(--gtfta1-line);}
.gtfta1.uline_b .gtfta1_util{border-bottom:1px solid var(--gtfta1-line);}

/* util_bg 를 'none' 으로 두면 배경 없이 구분선만 남습니다 */
.gtfta1.util_plain .gtfta1_util{background:transparent;}
/* 유틸바를 끄거나(no_util) 배경을 없애면(util_plain) 푸터 윗변에 아무 경계가
   없어져 본문과 이어져 보입니다 — 그때만 푸터 자신이 윗선을 갖습니다.
   'util_line' 을 top/both 로 켜 둔 경우에만 그립니다(none 이면 아무것도 안 그립니다). */
.gtfta1.uline_t.no_util,
.gtfta1.uline_t.util_plain{border-top:1px solid var(--gtfta1-line);}

.gtfta1_util .gtfta1_inner{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:calc(10px * var(--gtfta1-sp)) 30px;
    /* 최소 높이입니다 — 글자가 두 줄로 접히면 그보다 커집니다.
       세로 padding 은 접혔을 때만 의미가 있어 작게 둡니다. */
    min-height:var(--gtfta1-utilh, 68px);
    padding-top:calc(10px * var(--gtfta1-sp));
    padding-bottom:calc(10px * var(--gtfta1-sp));
}

/* --- 약관 링크 ------------------------------------------------------------ */
.gtfta1_pol{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    row-gap:calc(6px * var(--gtfta1-sp));
    font-size:13.5px;
}
.gtfta1_pol a{
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:var(--gtfta1-tx-on);
    transition:color .18s;
}
.gtfta1_pol a:hover{color:var(--gtfta1-pt-safe, var(--gtfta1-pt));}
.gtfta1_pol a.is_key{font-weight:600;}
/* 구분선은 '앞 항목'의 ::after — 줄바꿈돼도 다음 줄 첫머리에 남지 않습니다 */
.gtfta1_pol li:not(:last-child)::after{
    content:"";
    display:inline-block;
    width:1px; height:11px;
    margin:0 17px;
    vertical-align:-1px;
    background:currentColor;
    opacity:.26;
}
/* 아이콘은 Material Icons 가 아니라 인라인 SVG 입니다.
   테마가 그 폰트를 공통으로 싣지 않아, 폰트가 없는 사이트에서는 아이콘 자리에
   'block' 이라는 글자가 그대로 보였습니다. */
.gtfta1_ico{
    width:15px; height:15px;
    flex:none;
    fill:none;
    stroke:var(--gtfta1-pt-safe, var(--gtfta1-pt));
    stroke-width:1.7;
    stroke-linecap:round;
}

/* 유틸바를 껐을 때 본문 안으로 내려오는 판 */
.gtfta1 .gtfta1_pol_in{margin-top:calc(20px * var(--gtfta1-sp)); font-size:13px;}

/* --- RealCount · 현재접속 -------------------------------------------------
   방문자스킨이 내보내는 마크업
     <div class="visit_flex"><ul><li class="RealCount_t …">RealCount</li>
       <li>오늘 <span class="font-B">330</span></li> … </ul></div>
   현재접속스킨이 내보내는 마크업
     <span class="cc_total_cnt font-B">4</span>
   두 스킨의 style.css 는 실릴 보장이 없으므로 여기서 직접 그립니다.        */
.gtfta1_count{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:calc(6px * var(--gtfta1-sp)) 16px;
    font-size:12.5px;
    color:var(--gtfta1-tx-dim);
    font-variant-numeric:tabular-nums;
}
/* 클래스 세 개(0,3,0) — 스킨 CSS 의 `.visit_flex ul`(0,2,0)보다 강합니다 */
.gtfta1 .gtfta1_count .visit_flex{
    display:flex;
    margin:0 !important;      /* 스킨의 margin-top:30px 을 되받습니다 */
    padding:0;
}
.gtfta1 .gtfta1_count .visit_flex ul{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:2px 12px;
    margin:0;
}
.gtfta1 .gtfta1_count .visit_flex li{
    font-size:12.5px;
    color:var(--gtfta1-tx-dim);
}
.gtfta1 .gtfta1_count .visit_flex li span{
    margin-left:3px;
    font-weight:700;
    color:var(--gtfta1-tx-on);
}
/* 스킨 CSS 에 `.RealCount_t{font-size:10px !important}` 가 있어 이 한 줄만
   !important 로 되받습니다(그 파일이 실린 사이트에서도 크기가 맞도록). */
.gtfta1 .gtfta1_count .RealCount_t{
    padding-right:4px;
    font-size:12px !important;
    font-weight:700;
    letter-spacing:.01em;
    color:var(--gtfta1-pt-safe, var(--gtfta1-pt));
}
.gtfta1_now{
    display:inline-flex;
    align-items:center;
    gap:2px;
    color:var(--gtfta1-tx-on);
    transition:color .18s;
}
.gtfta1_now:hover{color:var(--gtfta1-pt-safe, var(--gtfta1-pt));}
/* 현재접속 배지.
   모양(display·padding·radius)은 현재접속스킨의 style.css 에만 있어서, 그 파일이
   안 실리면 배지가 그냥 숫자로 보입니다 — 여기서 직접 그립니다.
   색은 rb/rb.css/set.point.css 가 `:root:root .cc_total_cnt`(0,3,0)로 넣어 주는데
   이 선택자도 (0,3,0)이고 나중에 실리므로 이깁니다. 그래서 같은 var() 사슬을
   그대로 쓰되, 강조컬러 엔진이 없는 사이트를 위해 마지막 폴백만 이 푸터의
   값으로 바꿔 둡니다(엔진이 있으면 결과가 완전히 동일합니다). */
.gtfta1 .gtfta1_count .cc_total_cnt{
    display:inline-block;
    vertical-align:middle;
    margin-left:6px;
    padding:0 6px;
    border-radius:3px;
    background-color:var(--rb-point, var(--gtfta1-pt-safe, var(--gtfta1-pt)));
    color:var(--rb-point-on, var(--gtfta1-pt-on, #fff));
    font-size:11px;
    font-weight:700;
    line-height:19px;
}

/* ==========================================================================
   본문 — 왼쪽 로고·사업자정보 / 오른쪽 SNS·앱버튼
   ========================================================================== */
/* 위·아래 여백은 footer.php 의 'pad_top' / 'pad_bottom' 이 정하고,
   거기에 줄간격 배율(--gtfta1-sp)이 곱해집니다.
   예) pad_bottom 100 + space 'compact'(.75) → 75px */
.gtfta1_wrap{
    position:relative;                       /* TOP 버튼의 기준점 */
    padding-top   :calc(var(--gtfta1-padt, 58px) * var(--gtfta1-sp));
    padding-bottom:calc(var(--gtfta1-padb, 100px) * var(--gtfta1-sp));
}
.gtfta1_body{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
    justify-content:space-between;
    gap:calc(26px * var(--gtfta1-sp)) 40px;
}
.gtfta1_left{
    flex:1 1 480px;
    min-width:0;
}
.gtfta1_right{
    flex:none;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:calc(16px * var(--gtfta1-sp));
}
/* TOP 버튼이 켜져 있으면 오른쪽 열이 그 밑으로 들어가지 않게 자리를 비웁니다.
   버튼은 본문 폭 오른쪽 끝(--gtfta1-edge)에 절대배치되므로, 폭을 예약하는 쪽이
   위치를 계산하는 것보다 안전합니다. */
.gtfta1.has_top .gtfta1_right{padding-right:calc(var(--gtfta1-top) + 20px);}

/* --- 로고 ----------------------------------------------------------------- */
.gtfta1_logo a{display:inline-block;}
/* max-height 와 max-width 를 함께 겁니다. height 만 고정하면 가로로 긴 로고가
   폭을 무한정 차지해 오른쪽 열을 밀어냅니다. */
.gtfta1_logo img{
    display:block;
    max-height:var(--gtfta1-logoh, 34px);
    max-width :var(--gtfta1-logow, 200px);
    width:auto; height:auto;
}

/* --- 사업자정보 ----------------------------------------------------------- */
/* ★ 클래스 두 개 — 위 리셋 `.gtfta1 ul`(0,1,1)을 이기기 위함입니다 */
.gtfta1 .gtfta1_biz{margin-top:calc(22px * var(--gtfta1-sp));}
.gtfta1 .gtfta1_biz2{margin-top:calc(7px * var(--gtfta1-sp));}
.gtfta1_biz{
    display:flex;
    flex-wrap:wrap;
    row-gap:calc(6px * var(--gtfta1-sp));
    font-size:13.5px;
    line-height:1.8;
    color:var(--gtfta1-tx);
}
.gtfta1_biz li:not(:last-child)::after{
    content:"";
    display:inline-block;
    width:1px; height:11px;
    margin:0 15px;
    vertical-align:-1px;
    background:currentColor;
    opacity:.3;
}
/* b 를 inline-block 으로 만들면 가상요소 끝의 공백이 잘려 '대표자 :박용기' 가
   됩니다. inline 으로 두고 공백은 줄바꿈 안 되는 공백(\00a0)으로 못박습니다. */
.gtfta1_biz li b{font-weight:400; color:var(--gtfta1-tx-dim);}
.gtfta1_biz li b::after{content:"\00a0:\00a0";}
.gtfta1_biz a:hover{color:var(--gtfta1-pt-safe, var(--gtfta1-pt));}

/* --- 카피라이트 ----------------------------------------------------------- */
/* ★ 여기도 클래스 두 개 — 리셋 `.gtfta1 p` 를 이기기 위함입니다 */
.gtfta1 .gtfta1_copy{margin-top:calc(20px * var(--gtfta1-sp));}
.gtfta1_copy{
    font-size:12.5px;
    line-height:1.7;
    letter-spacing:.01em;
    color:var(--gtfta1-tx-dim);
}
.gtfta1_copy a:hover{color:var(--gtfta1-pt-safe, var(--gtfta1-pt));}

/* --- SNS ------------------------------------------------------------------
   sns_g 의 g_*.svg 는 이름과 달리 '브랜드 컬러 원형 배지'입니다
   (카카오채널 #FAE100, 페이스북 #445D97 …). 아래 네 가지 모양을 지원합니다.
     sns_circle : 테두리 원 안에 브랜드 색 (기본)
     sns_plain  : 테두리 없이 아이콘만
     sns_mono   : 평소엔 무채색, 올리면 브랜드 색
     sns_chip   : 배경이 살짝 깔린 사각 칩                                    */
.gtfta1_sns{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:9px;
}
.gtfta1_sns a{
    display:flex;
    align-items:center;
    justify-content:center;
    width:var(--gtfta1-sns, 40px);
    height:var(--gtfta1-sns, 40px);
    border:1px solid transparent;
    border-radius:50%;
    transition:border-color .18s, background-color .18s, transform .18s;
}
.gtfta1_sns img{
    width:58%; height:58%;
    transition:filter .18s, opacity .18s;
}
.gtfta1_sns a:hover,
.gtfta1_sns a:focus-visible{transform:translateY(-2px);}

.gtfta1.sns_circle .gtfta1_sns a{border-color:var(--gtfta1-line);}
.gtfta1.sns_circle .gtfta1_sns a:hover{border-color:var(--gtfta1-pt);}

.gtfta1.sns_plain .gtfta1_sns a{border-color:transparent;}
.gtfta1.sns_plain .gtfta1_sns img{width:100%; height:100%;}

.gtfta1.sns_mono .gtfta1_sns a{border-color:var(--gtfta1-line);}
.gtfta1.sns_mono .gtfta1_sns img{filter:grayscale(1); opacity:.55;}
.gtfta1.sns_mono.is_dark .gtfta1_sns img{filter:grayscale(1) brightness(1.6); opacity:.6;}
.gtfta1.sns_mono .gtfta1_sns a:hover img,
.gtfta1.sns_mono .gtfta1_sns a:focus-visible img{filter:none; opacity:1;}
.gtfta1.sns_mono .gtfta1_sns a:hover{border-color:var(--gtfta1-pt);}

.gtfta1.sns_chip .gtfta1_sns a{
    border-radius:6px;
    background:var(--gtfta1-chip);
    border-color:transparent;
}
.gtfta1.sns_chip .gtfta1_sns a:hover{background:var(--gtfta1-line);}

/* --- 공식 앱 다운로드 버튼 -------------------------------------------------- */
.gtfta1_app{
    display:inline-flex;
    align-items:center;
    gap:8px;
    height:38px;
    padding:0 16px;
    border:1px solid var(--gtfta1-line);
    border-radius:19px;
    background:transparent;
    color:var(--gtfta1-tx-on);
    font-family:inherit;
    font-size:13px;
    line-height:1;
    cursor:pointer;
    transition:border-color .18s, color .18s;
}
.gtfta1_app img{width:16px; height:16px;}
.gtfta1_app:hover{
    border-color:var(--gtfta1-pt-safe, var(--gtfta1-pt));
    color:var(--gtfta1-pt-safe, var(--gtfta1-pt));
}
.gtfta1_note{
    max-width:280px;
    text-align:right;
    font-size:12px;
    line-height:1.6;
    color:var(--gtfta1-tx-dim);
}

/* --- TOP 버튼 -------------------------------------------------------------
   .gtfta1_wrap 안에 두어 유틸바 바로 아래에서 시작하게 했습니다
   (푸터 최상단에 두면 RealCount 줄을 가립니다).
   right 을 두 번 선언합니다. 아래 줄(max/calc)을 못 읽는 브라우저에서는 윗줄이
   남아 화면 오른쪽 끝에 붙습니다. max() 없이 calc() 만 쓰면 화면이 본문보다
   좁을 때 음수가 되어 버튼이 화면 밖으로 나갑니다.                          */
.gtfta1_top{
    position:absolute;
    top:0;
    right:0;
    right:var(--gtfta1-edge, 0px);
    z-index:4;
    width:var(--gtfta1-top);
    height:var(--gtfta1-top);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    padding:0;
    border:0;
    background:var(--gtfta1-topbg);
    color:var(--gtfta1-tx-on);
    font-family:inherit;
    cursor:pointer;
    transition:background-color .18s, color .18s, border-color .18s, filter .18s;
}
.gtfta1_top svg{
    width:17px; height:17px;
    fill:none; stroke:currentColor; stroke-width:1.6;
}
.gtfta1_top strong{
    font-size:10.5px;
    font-weight:600;
    letter-spacing:.12em;
    text-transform:uppercase;
}
/* --- TOP 버튼 : 모양 ------------------------------------------------------ */
/* 원형 — 살짝 띄워서 배치합니다 */
.gtfta1.top_round .gtfta1_top{
    top:calc(6px * var(--gtfta1-sp));
    border:1px solid var(--gtfta1-line);
    border-radius:50%;
    gap:2px;
}
.gtfta1.top_round .gtfta1_top strong{font-size:9.5px;}
/* 채우지 않는(soft) 원형만 배경을 비웁니다 — top_pt 가 배경을 정할 수 있도록
   여기서 무조건 transparent 로 덮지 않습니다. */
.gtfta1.top_round:not(.top_pt) .gtfta1_top{background:transparent;}

/* 글자만 — 배경 없이 아이콘 + top */
.gtfta1.top_text .gtfta1_top{
    top:calc(4px * var(--gtfta1-sp));
    background:transparent;
    gap:3px;
}
.gtfta1.top_text:not(.top_pt) .gtfta1_top{color:var(--gtfta1-tx-dim);}

/* --- TOP 버튼 : 색 --------------------------------------------------------
   ★ 채우는 면에는 보정하지 않은 원래 강조컬러(--gtfta1-pt)를 씁니다.
     대비를 재야 할 상대가 푸터 배경이 아니라 '버튼 위에 얹은 글자'이기 때문입니다.
     여기에 --pt-safe(배경 대비 보정판)를 쓰면 브랜드 색이 칙칙해집니다.
     반대로 배경 위에 글자만 놓는 top_text 는 보정판을 씁니다.               */
.gtfta1.top_pt:not(.top_text) .gtfta1_top{
    background:var(--gtfta1-pt);
    border-color:var(--gtfta1-pt);
    color:var(--rb-point-on, var(--gtfta1-pt-on, #fff));
}
.gtfta1.top_pt.top_text .gtfta1_top{color:var(--gtfta1-pt-safe, var(--gtfta1-pt));}

/* 마우스 올렸을 때 — soft 는 강조컬러로 채워지고, 이미 채워진 것은 살짝 밝아집니다 */
.gtfta1_top:hover,
.gtfta1_top:focus-visible{
    background:var(--gtfta1-pt);
    border-color:var(--gtfta1-pt);
    color:var(--rb-point-on, var(--gtfta1-pt-on, #fff));
}
.gtfta1.top_pt:not(.top_text) .gtfta1_top:hover,
.gtfta1.top_pt:not(.top_text) .gtfta1_top:focus-visible{filter:brightness(1.1);}
.gtfta1.top_text .gtfta1_top:hover,
.gtfta1.top_text .gtfta1_top:focus-visible{
    background:transparent;
    color:var(--gtfta1-pt-safe, var(--gtfta1-pt));
}

/* ==========================================================================
   반응형 — 여백은 --gtfta1-sp 한 줄만 줄이면 전부 따라옵니다
   ========================================================================== */

/* 1361~1400px 안전장치.
   .inner 의 인라인 width:1400px 은 1360px 이하에서만 테마 mobile.css 가
   100% 로 덮어 줍니다. 그 사이 40px 구간이 비어 가로 스크롤이 생깁니다.
   기존 설정(1400 이하)에서는 조건이 성립하지 않아 아무 변화가 없습니다. */
@media all and (min-width:1361px){
    .gtfta1_inner{
        box-sizing:border-box;
        max-width:calc(100% - 40px) !important;
    }
}

@media all and (max-width:1360px){
    .gtfta1.gtfta1{--gtfta1-sp:calc(var(--gtfta1-sp-base, .75) * .9); --gtfta1-top:calc(var(--gtfta1-top-base, 88px) * .86);}
    /* 테마 mobile.css 가 이 구간에서 .inner 를 width:100% 로 만드는데 좌우 여백은
       주지 않습니다. 그대로 두면 글자가 화면 끝에 붙습니다(헤더는 20px 을 씁니다).
       가로폭 100% 설정이면 .inner 에 인라인 padding:0px 40px 이 붙어 그쪽이 이깁니다. */
    .gtfta1_inner{padding-left:20px; padding-right:20px;}
    /* 이 구간에서는 가로 스크롤 안전장치(max-width)가 걸리지 않아 본문 오른쪽
       끝까지의 거리가 달라집니다. footer.php 가 구간별 값을 따로 보내 줍니다.
       ★ 클래스를 두 번 겹쳐 (0,2,0) 으로 씁니다 — footer.php 의 스코프 <style>
         `.gtfta1{--gtfta1-edge:…}` 이 이 파일보다 나중에 실리므로, 한 번만 쓰면
         특이도가 같아 그쪽이 이겨서 이 줄이 무효가 됩니다. */
    .gtfta1.gtfta1{--gtfta1-edge:var(--gtfta1-edge-mo, 20px);}
    .gtfta1_biz li:not(:last-child)::after{margin:0 13px;}
    .gtfta1_pol li:not(:last-child)::after{margin:0 14px;}
}

@media all and (max-width:1024px){
    .gtfta1.gtfta1{--gtfta1-sp:calc(var(--gtfta1-sp-base, .75) * .82); --gtfta1-top:calc(var(--gtfta1-top-base, 88px) * .77);}
    /* 오른쪽 열을 왼쪽 아래로 내리고 왼쪽 정렬로 바꿉니다 */
    .gtfta1_body{flex-direction:column; align-items:stretch;}
    /* ★ flex-basis 는 '주축' 기준입니다. 세로 배치로 바꾸는 순간 위쪽의
       `flex:1 1 480px` 이 너비가 아니라 ★높이 480px★ 로 해석되어, 왼쪽 열이
       빈 공간을 480px 까지 밀어냅니다(푸터가 400px 가까이 길어집니다).
       세로 배치에서는 반드시 basis 를 auto 로 되돌립니다. */
    .gtfta1_left{flex:0 0 auto;}
    .gtfta1_right{align-items:flex-start;}
    .gtfta1_sns{justify-content:flex-start;}
    .gtfta1_note{text-align:left; max-width:none;}
    /* 열이 세로로 쌓이면 TOP 버튼과 겹칠 일이 없으므로 예약해 둔 폭을 돌려줍니다 */
    .gtfta1.has_top .gtfta1_right{padding-right:0;}
    /* 대신 왼쪽 열(로고·정보)이 버튼 밑으로 들어가지 않게 첫 줄만 비웁니다 */
    .gtfta1.has_top .gtfta1_left{padding-right:calc(var(--gtfta1-top) + 16px);}
}

@media all and (max-width:780px){
    .gtfta1.gtfta1{--gtfta1-sp:calc(var(--gtfta1-sp-base, .75) * .76); --gtfta1-top:calc(var(--gtfta1-top-base, 88px) * .68); --gtfta1-utilh:calc(var(--gtfta1-utilh-base, 68px) * .85);}
    .gtfta1_util .gtfta1_inner{justify-content:flex-start;}
    .gtfta1_count{width:100%;}
    .gtfta1_biz{font-size:13px;}
}

@media all and (max-width:500px){
    .gtfta1.gtfta1{font-size:13px; --gtfta1-sp:calc(var(--gtfta1-sp-base, .75) * .68); --gtfta1-top:calc(var(--gtfta1-top-base, 88px) * .59); --gtfta1-utilh:calc(var(--gtfta1-utilh-base, 68px) * .75);}
    /* 좌우 여백은 1360px 구간에서 준 20px 을 그대로 씁니다 — 여기서 16px 로
       줄이면 TOP 버튼(--gtfta1-edge 기준 20px)만 글자보다 4px 안쪽에 놓입니다. */
    .gtfta1_logo img{max-height:var(--gtfta1-logoh-mo, calc(var(--gtfta1-logoh, 34px) * .85)); max-width:var(--gtfta1-logow-mo, var(--gtfta1-logow, 200px));}   /* 1.1.0 : 휴대폰 로고 설정 */

    /* 항목을 한 줄에 하나씩 — 구분선은 감춥니다 */
    .gtfta1_biz{display:block; font-size:12.5px; line-height:1.75;}
    .gtfta1_biz li{display:block;}
    .gtfta1 .gtfta1_biz li+li{margin-top:calc(6px * var(--gtfta1-sp));}
    .gtfta1_biz li:not(:last-child)::after{display:none;}

    /* 약관 링크는 두 줄로 접히게 두되 구분선 간격만 줄입니다 */
    .gtfta1_pol{font-size:12.5px;}
    .gtfta1_pol li:not(:last-child)::after{margin:0 10px;}

    .gtfta1_count{font-size:11.5px; gap:4px 10px;}
    .gtfta1 .gtfta1_count .visit_flex ul{gap:2px 8px;}
    .gtfta1 .gtfta1_count .visit_flex li{font-size:11.5px;}
    .gtfta1 .gtfta1_count .RealCount_t{font-size:11px !important;}
    .gtfta1 .gtfta1_count .cc_total_cnt{font-size:10px; line-height:17px;}

    .gtfta1_sns{gap:7px;}
    .gtfta1.has_top .gtfta1_left{padding-right:calc(var(--gtfta1-top) + 12px);}
}

@media (prefers-reduced-motion: reduce){
    .gtfta1_sns a,.gtfta1_top,.gtfta1_app,.gtfta1_pol a,.gtfta1_now{transition:none;}
    .gtfta1_sns a:hover,.gtfta1_sns a:focus-visible{transform:none;}
}