@charset "utf-8";
/* ==========================================================================
   gt_ft_D3 — 병원·클리닉형 푸터 (맺음말 + 3열 정보 + 배경사진) · 관리자 옵션판
   CSS_VER 1.3.0   ※ footer.php 와 반드시 같이 올리세요
   --------------------------------------------------------------------------
   1.3.0 : (D3) 로고 최대 크기를 변수로 — --gtftd-logo-w/-h, 휴대폰 --gtftd-logo-w-mo/-h-mo
           대체값이 종전 값(230×56 / 170×44)이라 설정을 안 하면 그대로입니다
   1.2.0 : SNS 아이콘을 평소에도 브랜드 색으로 표시(테두리·호버 효과는 유지)
   1.1.0 : 맺음말 여백 복구(특이도) / 맺음말 폰트·크기·굵기·줄간격 설정 지원
   1.0.0 : 최초
   --------------------------------------------------------------------------
   [줄 간격]
   세로 여백은 전부 calc(기준값 * var(--gtftd-sp)) 로 씁니다.
   --gtftd-sp-base 는 footer.php 의 $gt_ft['space'] 가 정합니다(기본 0.9).
   화면이 좁아지면 아래 미디어쿼리가 그 값을 한 번 더 줄입니다.
   ★ 새 여백을 추가할 때도 반드시 calc(... * var(--gtftd-sp)) 로 쓰세요.
     고정 px 로 쓰면 그 항목만 설정을 안 따라갑니다.
   ★ 미디어쿼리에서 --gtftd-sp 를 줄일 때는 반드시 --gtftd-sp-base 를 곱합니다.
     --gtftd-sp:calc(var(--gtftd-sp) * .8) 은 순환 참조라 선언 전체가 무효입니다.

   [특이도 주의]  ★ 이 파일에서 가장 많이 밟는 함정입니다
   아래 리셋들은 전부 특이도 (0,1,1) 입니다.
       .gtftd ul / ol / li / dl / dt / dd   {margin:0; padding:0}
       .gtftd p                            {margin:0}
       .gtftd h3                           {margin:0}
   `.gtftd_msg{margin-bottom:...}` 처럼 클래스 하나(0,1,0)로 쓰면 리셋이 이겨서
   여백이 조용히 사라집니다(에러도 안 나고, 코드만 보면 절대 안 보입니다).
   ★ ul·ol·li·dl·dt·dd·p·h3 태그에 margin/padding 을 주는 규칙은 반드시
     `.gtftd .gtftd_xxx` 로 클래스 두 개를 겹쳐 쓰세요.
     실제로 1.0.0 에서 .gtftd_msg(p) 와 .gtftd_copy(p) 가 이 문제로
     여백이 사라진 채 나갔습니다 — 1.1.0 에서 고쳤습니다.

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

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

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

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

   맺음말 전용 -msg-font / -msg-size / -msg-weight / -msg-lh 는 ★설정했을 때만★
   내려옵니다. 그래서 아래 :root 목록에 기본값을 두지 않고, 쓰는 자리에서
   var(--gtftd-msg-size, clamp(...)) 처럼 대체값을 적었습니다.
   여기에 기본값을 적어 두면 '설정 안 함'과 '설정함'을 구분할 수 없습니다.

   ★ 강조컬러(--gtftd-pt)만은 PHP 가 내려보내지 않습니다.
     인라인/스코프로 색을 박으면 CSS 폴백 경로가 죽어서, 강조컬러 미리보기가
     이 푸터에서만 안 먹는 상태가 됩니다. 아래 var() 사슬이 스스로 찾습니다.
     PHP 는 '대비 보정판'(--gtftd-pt-safe)만 추가로 넘깁니다.               */
.gtftd{
    --gtftd-pt      : var(--rb-point, var(--gtftd-fallback, #C8A96A));
    --gtftd-bg      : #2F2C28;
    --gtftd-line    : rgba(255,255,255,.16);
    --gtftd-tx      : #A9A5A0;
    --gtftd-tx-dim  : #96918B;
    --gtftd-tx-on   : #F4F3F2;
    --gtftd-topbg   : rgba(0,0,0,.28);
    --gtftd-sp-base : .9;    /* 줄 간격 배율 (footer.php 설정) */
    --gtftd-sp      : var(--gtftd-sp-base, .9);
    --gtftd-top     : 96px;  /* TOP 버튼 한 변 */
    --gtftd-edge    : 0px;   /* 본문 오른쪽 끝까지의 거리 (footer.php 계산) */
    --gtftd-band    : 3px;   /* 상단 강조띠 두께 */
    --gtftd-img-pos : center center;
    --gtftd-scrim   : rgba(0,0,0,.78);  /* 사진 위 덮개 (footer.php 가 rgba 로 계산) */

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

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

/* --- 배경사진 -------------------------------------------------------------
   사진과 덮개(스크림)를 ★한 요소의 background-image 두 겹★ 으로 그립니다.
   덮개를 별도 요소로 두면 쌓임 순서를 맞추기가 까다롭습니다 — 위치가
   지정된 ::before(z-index:0)는 정적 형제의 내용보다 나중에 그려지므로,
   덮개를 자식에 -1 로 두면 오히려 사진 뒤로 들어갑니다.
   --gtftd-scrim 은 footer.php 가 배경색 + 덮기 비율로 계산한 rgba 값입니다. */
.gtftd.has_img::before{
    content:"";
    position:absolute; left:0; top:0; right:0; bottom:0;
    background-image:
        linear-gradient(var(--gtftd-scrim, rgba(0,0,0,.78)), var(--gtftd-scrim, rgba(0,0,0,.78))),
        var(--gtftd-img, none);
    background-size:cover;
    background-position:var(--gtftd-img-pos, center center);
    background-repeat:no-repeat;
    z-index:0;
}
.gtftd.has_img.img_fix::before{background-attachment:scroll, fixed;}
/* 사진 위에 본문이 오도록 래퍼를 위치 지정 요소로 만듭니다(z-index 는 주지 않습니다 —
   주면 새 쌓임 맥락이 생겨 TOP 버튼·강조띠와의 순서가 꼬입니다) */
.gtftd.has_img .gtftd_wrap{position:relative;}

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

/* --- 바깥 래퍼 : 세로 여백은 여기 ---------------------------------------- */
.gtftd_wrap{
    padding-top   :calc(96px * var(--gtftd-sp));
    padding-bottom:calc(72px * var(--gtftd-sp));
}
.gtftd_inner{margin:0 auto;}

/* --- 맺음말 -------------------------------------------------------------- */
/* ★ .gtftd .gtftd_msg — 클래스 두 개입니다. 위 리셋 `.gtftd p`(0,1,1)를 이기려면
   반드시 이 형태여야 합니다. 한 개로 쓰면 margin 이 조용히 0 이 됩니다. */
.gtftd .gtftd_msg{
    margin-bottom:calc(66px * var(--gtftd-sp));
}
.gtftd_msg{
    /* TOP 버튼 자리를 비워 둡니다(좁은 화면에서 글자가 버튼 밑으로 들어가지 않게) */
    padding-right:calc(var(--gtftd-top) + 30px);
    font-family:var(--gtftd-msg-font, inherit);
    font-size:var(--gtftd-msg-size, clamp(20px, 2.05vw, 32px));
    font-weight:var(--gtftd-msg-weight, 300);
    line-height:var(--gtftd-msg-lh, 1.5);
    letter-spacing:-.01em;
    color:var(--gtftd-tx-on);
}
.gtftd_msg em,
.gtftd_msg b,
.gtftd_msg strong{
    font-weight:500;
    color:var(--gtftd-pt-safe, var(--gtftd-pt));
}

/* --- 정보 열 ------------------------------------------------------------- */
.gtftd_cols{
    display:grid;
    grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr);
    column-gap:40px;
    row-gap:calc(48px * var(--gtftd-sp));
    padding-top   :calc(60px * var(--gtftd-sp));
    padding-bottom:calc(60px * var(--gtftd-sp));
    border-top:1px solid var(--gtftd-line);
}
.gtftd.c2 .gtftd_cols{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);}
.gtftd.c1 .gtftd_cols{grid-template-columns:minmax(0,1fr);}
/* 맺음말을 끄면 위쪽에 아무것도 없는 구분선만 남습니다 — 그 줄과 여백을 없앱니다 */
.gtftd.no_msg .gtftd_cols{padding-top:0; border-top:0;}

/* 로고 · 주소 */
.gtftd_logo a{display:inline-block;}
.gtftd_logo img{
    display:block;
    max-width:var(--gtftd-logo-w, 230px); max-height:var(--gtftd-logo-h, 56px);   /* 1.3.0 : 관리자 설정, 대체값 = 종전 값 */
    width:auto; height:auto;
}
.gtftd .gtftd_addr{margin-top:calc(30px * var(--gtftd-sp));}
.gtftd_addr{
    font-size:15px;
    line-height:1.75;
    color:var(--gtftd-tx);
}

/* 열 제목 (진료 예약 / 진료시간) */
.gtftd_lb{
    display:block;
    margin-bottom:calc(22px * var(--gtftd-sp));
    font-size:14px;
    font-weight:500;
    letter-spacing:.08em;
    color:var(--gtftd-tx-dim);
}

/* 대표 전화 */
.gtftd_tel{
    display:inline-block;
    font-size:clamp(22px, 1.75vw, 28px);
    font-weight:700;
    line-height:1.25;
    letter-spacing:-.01em;
    color:var(--gtftd-tx-on);
    transition:color .18s;
}
.gtftd.tel_pt .gtftd_tel{color:var(--gtftd-pt-safe, var(--gtftd-pt));}
.gtftd_tel:hover,.gtftd_tel:focus-visible{color:var(--gtftd-pt-safe, var(--gtftd-pt));}

/* 이메일 · 팩스 등 보조 연락처 */
.gtftd .gtftd_sub{margin-top:calc(26px * var(--gtftd-sp));}
.gtftd .gtftd_sub li+li{margin-top:calc(14px * var(--gtftd-sp));}
.gtftd_sub{
    font-size:15px;
    line-height:1.7;
    color:var(--gtftd-tx);
}
.gtftd_sub .gtftd_k{
    margin-right:8px;
    color:var(--gtftd-tx-dim);
}
.gtftd_sub a:hover,.gtftd_sub a:focus-visible{color:var(--gtftd-tx-on);}

/* 진료시간 — dt(요일) / dd(시간) 두 칸 그리드 */
.gtftd_hours{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    column-gap:34px;
    row-gap:calc(14px * var(--gtftd-sp));
    font-size:15px;
    line-height:1.6;
}
.gtftd_hours dt{color:var(--gtftd-tx-dim);}
.gtftd_hours dd{color:var(--gtftd-tx);}
.gtftd_hours dd.is_off{color:var(--gtftd-tx-dim);}

/* --- 하단 : 사업자정보 · 약관 · 카피라이트 -------------------------------- */
.gtftd_bottom{
    padding-top:calc(46px * var(--gtftd-sp));
    border-top:1px solid var(--gtftd-line);
}

.gtftd_biz,
.gtftd_policy{
    display:flex;
    flex-wrap:wrap;
    row-gap:calc(10px * var(--gtftd-sp));
    font-size:13.5px;
    line-height:1.8;
    color:var(--gtftd-tx-dim);
}
/* 구분선은 '앞 항목'의 ::after — 줄바꿈돼도 다음 줄 첫머리에 남지 않습니다 */
.gtftd_biz li:not(:last-child)::after,
.gtftd_policy li:not(:last-child)::after{
    content:"";
    display:inline-block;
    width:1px; height:11px;
    margin:0 17px;
    vertical-align:-1px;
    background:currentColor;
    opacity:.34;
}
/* b 를 inline-block 으로 만들면 가상요소 끝의 공백이 잘려 '대표 :이대표' 가 됩니다.
   inline 으로 두고 공백은 줄바꿈 안 되는 공백(\00a0)으로 못박습니다. */
.gtftd_biz li b{font-weight:400; color:var(--gtftd-tx-dim);}
.gtftd_biz li b::after{content:"\00a0:\00a0";}
.gtftd_biz a:hover,.gtftd_biz a:focus-visible{color:var(--gtftd-tx-on);}

.gtftd .gtftd_policy{margin-top:calc(16px * var(--gtftd-sp));}
.gtftd_policy a{color:var(--gtftd-tx-dim); transition:color .18s;}
.gtftd_policy a:hover,.gtftd_policy a:focus-visible{color:var(--gtftd-pt-safe, var(--gtftd-pt));}
.gtftd_policy a.is_key{font-weight:600; color:var(--gtftd-tx);}

/* ★ 여기도 클래스 두 개 — 리셋 `.gtftd p` 를 이기기 위함입니다 */
.gtftd .gtftd_copy{margin-top:calc(18px * var(--gtftd-sp));}
.gtftd_copy{
    font-size:13px;
    line-height:1.7;
    letter-spacing:.01em;
    color:var(--gtftd-tx-dim);
    opacity:.82;
}

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

/* --- TOP 버튼 : 푸터 오른쪽 위, 본문 폭에 맞춘 위치 -----------------------
   right 을 두 번 선언합니다. 아래 줄(calc/max)을 못 읽는 브라우저에서는
   윗줄이 남아 화면 오른쪽 끝에 붙습니다(폴백). max() 없이 calc() 만 쓰면
   화면이 본문보다 좁을 때 음수가 되어 버튼이 화면 밖으로 나갑니다. */
.gtftd_top{
    position:absolute;
    top:0;
    right:0;
    right:var(--gtftd-edge, 0px);
    z-index:4;
    width:var(--gtftd-top);
    height:var(--gtftd-top);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:0;
    border:0;
    background:var(--gtftd-topbg);
    color:var(--gtftd-tx-on);
    cursor:pointer;
    transition:background-color .18s, color .18s;
}
.gtftd_top svg{
    width:18px; height:18px;
    fill:none; stroke:currentColor; stroke-width:1.6;
}
.gtftd_top strong{
    font-size:11px;
    font-weight:600;
    letter-spacing:.12em;
    text-transform:uppercase;
}
.gtftd_top:hover,.gtftd_top:focus-visible{
    background:var(--gtftd-pt-safe, var(--gtftd-pt));
    color:var(--gtftd-pt-on, var(--rb-point-on, #fff));
}

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

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

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

@media all and (max-width:1024px){
    .gtftd{--gtftd-sp:calc(var(--gtftd-sp-base, .9) * .8);}
    /* 로고·주소 열을 한 줄 통째로 쓰고, 나머지 두 열을 아래에 나란히 둡니다 */
    .gtftd_cols,
    .gtftd.c2 .gtftd_cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
    .gtftd_brand{grid-column:1 / -1;}
    .gtftd.c1 .gtftd_cols{grid-template-columns:minmax(0,1fr);}
    .gtftd_biz li:not(:last-child)::after,
    .gtftd_policy li:not(:last-child)::after{margin:0 14px;}
}

@media all and (max-width:780px){
    .gtftd{--gtftd-top:72px;}
    .gtftd_msg{padding-right:calc(var(--gtftd-top) + 18px);}
    .gtftd_addr,.gtftd_sub,.gtftd_hours{font-size:14px;}
}

@media all and (max-width:500px){
    .gtftd{font-size:13px; --gtftd-sp:calc(var(--gtftd-sp-base, .9) * .7); --gtftd-top:60px;}
    /* 설정으로 크기를 지정한 경우엔 그 값을 존중합니다(PHP 가 min() 으로 넘겨
       좁은 화면에서도 넘치지 않습니다). 지정이 없을 때만 19px 로 줄입니다. */
    .gtftd_msg{font-size:var(--gtftd-msg-size, 19px); line-height:var(--gtftd-msg-lh, 1.55);}
    .gtftd_logo img{max-width:var(--gtftd-logo-w-mo, 170px); max-height:var(--gtftd-logo-h-mo, 44px);}
    .gtftd_inner{padding-left:16px; padding-right:16px;}

    /* 열을 한 줄에 하나씩 */
    .gtftd_cols,
    .gtftd.c2 .gtftd_cols{grid-template-columns:minmax(0,1fr);}
    .gtftd_hours{column-gap:18px;}

    /* 항목도 한 줄에 하나씩 — 구분선은 감춥니다 */
    .gtftd_biz,
    .gtftd_policy{display:block; font-size:13px;}
    .gtftd_biz li,
    .gtftd_policy li{display:block;}
    .gtftd .gtftd_biz li+li,
    .gtftd .gtftd_policy li+li{margin-top:calc(10px * var(--gtftd-sp));}
    .gtftd_biz li:not(:last-child)::after,
    .gtftd_policy li:not(:last-child)::after{display:none;}

    .gtftd_sns a{width:38px; height:38px;}
    .gtftd_sns img{width:20px; height:20px;}

    /* 배경사진 고정은 모바일에서 성능·렌더링 문제가 잦아 해제합니다 */
    .gtftd.has_img.img_fix::before{background-attachment:scroll;}
}

@media (prefers-reduced-motion: reduce){
    .gtftd_sns a,.gtftd_top,.gtftd_tel,.gtftd_policy a{transition:none;}
    .gtftd_sns a:hover{transform:none;}
}