/* ═══════════════════════════════════════════════════════════════════════
   푸초밀 이벤트 — 공통 디자인 토큰
   근거: 무신사·29CM·마켓컬리·오늘의집·지그재그·펫프렌즈 모바일 실측(2026-08-13, 390×844)
   원칙 4가지 (이걸 어기면 «AI가 만든 티»가 난다)
     ① 그라데이션 0개. 보라는 «면적 10%»만 — 마켓컬리(보라 브랜드)가 그렇게 쓴다
     ② 카드에 1px 테두리 대신 «배경 밝기 계단»(흰색 대비 4% 어둡게)
     ③ 꽉 찬 버튼은 화면당 1개. 나머지는 폭 자동
     ④ 본문 15px / 행간 1.55 / 굵기는 400·500·700 세 가지만
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --font:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,
         system-ui,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;

  /* 글자 */
  --fs-caption:13px; --fs-sm:13px; --fs-body:15px; --fs-lg:17px;
  --fs-title:20px; --fs-headline:24px; --fs-display:30px; --fs-hero:34px;
  --lh-tight:1.25; --lh-heading:1.35; --lh-body:1.55;
  /* 자간은 이 3단만 쓴다 — 본문 / 제목 / 큰 글자. 숫자를 직접 적지 말고 이 눈금을 var() 로 부른다 */
  --ls-body:-0.01em; --ls-title:-0.02em; --ls-display:-0.03em;
  --fw-r:400; --fw-m:500; --fw-b:700;

  /* 색 — 보라는 소수 면적 */
  --brand:#6C216D; --brand-600:#5C1C5D; --brand-700:#49164A;
  --brand-100:#F0E9F0; --brand-050:#F9F6F9; --brand-200:#E5D7E5;
  --bg:#FFFFFF; --sunken:#F6F3F6; --sunken-2:#EFEAEF;
  --line:#E7E2E7; --line-strong:#D6CFD6;
  /* --text-3 은 #8A828C 였는데 크림·흰색·회색판 어디서도 대비 4.5:1 을 못 넘겼다(3.37~3.72).
     「값은 받지 않습니다」 같은 «읽혀야 하는» 글자가 여기 색이라 한 단계 어둡게 한다.
     #6F6971 = 세 배경 모두 4.85:1 이상. 회색 계열은 그대로라 톤은 안 바뀐다. */
  --text:#1B171C; --text-2:#4A444C; --text-3:#6F6971;
  --gold:#B8892B; --gold-bg:#FBF6EC;
  --kakao:#FEE500; --ok:#00875A;

  /* 여백 — 이 8개 밖의 값 금지 */
  /* 🚨 --sp5 를 «없는 채로» 두었다가 크게 당했다(2026-08-29). 없는 값을 var() 로 부르면
     브라우저가 그 줄을 «오류 한 줄 없이 조용히» 버리고 위쪽 옛 규칙으로 돌아간다.
     그 바람에 폰에서만 로고가 제목 뒤로 올라가 겹쳤고(실측 16,387px²),
     상자 두 개(.cond·.gate)의 바깥 여백이 0이 되어 있었다. → 눈금을 «빠짐없이» 채운다.
     새 눈금을 쓸 땐 반드시 여기에 먼저 만들어라. 점검 = `python _tools/check_css_tokens.py` */
  --sp1:4px; --sp2:8px; --sp3:12px; --sp4:16px; --sp5:20px; --sp6:24px; --sp8:32px; --sp10:40px; --sp14:56px;
  --gutter:16px; --maxw:560px;

  /* 모서리 — 2단계만 */
  --r-sm:6px; --r-md:10px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(27,23,28,.06);
  --sh-2:0 2px 8px rgba(27,23,28,.10);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--font);
  font-size:var(--fs-body); font-weight:var(--fw-r);
  line-height:var(--lh-body); letter-spacing:var(--ls-body);
  color:var(--text); background:var(--bg);
  -webkit-font-smoothing:antialiased;
  word-break:keep-all;          /* ★ 한글은 어절 단위로 줄바꿈 */
  overflow-wrap:break-word;
  text-align:left;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:var(--sp6) var(--gutter) var(--sp14)}

h1,h2,h3{margin:0;font-weight:var(--fw-b);line-height:var(--lh-heading);
  letter-spacing:var(--ls-title);text-wrap:balance}
h1{font-size:var(--fs-headline);letter-spacing:var(--ls-display);line-height:var(--lh-tight)}
h2{font-size:var(--fs-title)}
h3{font-size:var(--fs-lg)}
p{margin:0;color:var(--text-2);text-wrap:pretty}
.cap{font-size:var(--fs-caption);color:var(--text-3);line-height:1.35}
.sm{font-size:var(--fs-sm);color:var(--text-2)}
.mt1{margin-top:var(--sp1)} .mt2{margin-top:var(--sp2)} .mt3{margin-top:var(--sp3)}
.mt4{margin-top:var(--sp4)} .mt6{margin-top:var(--sp6)} .mt8{margin-top:var(--sp8)}
.mt10{margin-top:var(--sp10)}

/* 카드 — 테두리 없음. 배경 계단으로 구분 */
.card{background:var(--sunken);border:0;border-radius:var(--r-md);padding:var(--sp4)}

/* 버튼 — 꽉 찬 것은 화면당 1개 */
.btn{display:flex;align-items:center;justify-content:center;gap:var(--sp2);
  border:0;border-radius:var(--r-sm);font-family:inherit;cursor:pointer;
  text-decoration:none;letter-spacing:var(--ls-body);transition:background .12s ease}
.btn-main{width:100%;height:54px;background:var(--brand);color:#fff;
  font-size:var(--fs-lg);font-weight:var(--fw-b)}
.btn-main:active{background:var(--brand-600)}
.btn-main[disabled]{background:var(--line-strong);color:#fff}
.btn-kakao{width:100%;height:54px;background:var(--kakao);color:#191600;
  font-size:var(--fs-lg);font-weight:var(--fw-b)}
.btn-sub{height:44px;padding:0 var(--sp4);background:transparent;color:var(--text);
  border:1px solid var(--line-strong);font-size:var(--fs-body);font-weight:var(--fw-m)}
.btn-text{height:44px;padding:0 var(--sp2);background:none;color:var(--text-3);
  font-size:var(--fs-sm);font-weight:var(--fw-m)}
.row-btn{display:flex;gap:var(--sp2);align-items:center}

/* ═══════════════════════════════════════════════════════════════════════
   (설명은 CLAUDE.md·인수인계 문서에 있다)
   (설명은 CLAUDE.md·인수인계 문서에 있다)
   그냥 대충 만든 티가 너무 많이 난다. 로고는 매번 고정을 할 수 있도록"
   ─ 3칸 격자(44 / 남는칸 / 44)라서 뒤로가기가 있든 없든 로고가 «항상 정중앙».
     첫 화면의 중앙정렬이 안 깨진다.
   ═══════════════════════════════════════════════════════════════════════ */
.appbar{position:sticky;top:0;z-index:30;
  display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;
  height:56px;margin:0 calc(-1*var(--gutter)) var(--sp2);padding:0 var(--sp2);
  /* ★맨 위에서는 «투명»이어야 한다. 흰색을 깔면 사진관 살구빛 배경 위에
     앱바만 하얀 띠로 떠 보인다(실측으로 잡음). 스크롤이 내려가 글자가 뒤로
     지나갈 때만 흐림막을 켠다. */
  background:transparent;border-bottom:1px solid transparent;
  transition:background .18s ease, border-color .18s ease,
             -webkit-backdrop-filter .18s ease, backdrop-filter .18s ease}
.appbar.sep{background:rgba(255,255,255,.86);border-bottom-color:var(--line);
  -webkit-backdrop-filter:saturate(1.6) blur(10px);
  backdrop-filter:saturate(1.6) blur(10px)}

/* 뒤로가기 — 손끝이 닿는 최소 크기 44×44 (애플·구글 공통 권장) */
.ab-back{grid-column:1;justify-self:start;
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  border:0;background:none;cursor:pointer;color:var(--text-2);border-radius:var(--r-pill);font-family:inherit}
.ab-back:active{background:var(--sunken-2)}
.ab-back svg{width:22px;height:22px;display:block}
.ab-back[hidden]{display:none}

/* (설명은 CLAUDE.md·인수인계 문서에 있다)
   글자들 «뒷 배경»으로 연한 느낌으로(회사 푸터 구조처럼) PCM 이 글자 뒤에 들어가면 좋겠다」
   → 앱바의 «작은 로고 그림»을 지우고, 화면마다 «큰 로고를 아주 연하게» 뒤에 깐다(.mark).
   앱바에는 화면 이름만 남긴다 — 로고가 뒤에 있으니 앞에 또 둘 이유가 없다. */
.ab-logo{grid-column:2;justify-self:center;display:flex;align-items:center}
/* 로고는 「PET CARE MASTERY」(작은 줄) + 「PCM」 2단이다. 26px 로 줄이면
   윗줄이 실질 5px 가 되어 회색 얼룩으로 뭉갠다(실측). 32px 로 올린다 —
   56px 바 안에 위아래 12px 씩 남는다. 로고 자체는 안 건드린다. */
.ab-logo img{height:32px;width:auto;display:block}
.ab-right{grid-column:3;justify-self:end;
  font-size:var(--fs-caption);color:var(--text-3);padding-right:var(--sp1)}

/* 진행 단계 — 난독증 배려: 숫자만 두지 않고 «지금 무엇을 하는지» 글자를 같이 둔다.
   막대 3개 = 사진 고르기 → 등록증 → 친구에게. 지나온 칸은 채워 둔다(어디까지 왔는지 보이게). */
.steps{display:flex;align-items:center;gap:var(--sp2);margin:0 0 var(--sp6)}
.steps .bars{display:flex;gap:4px;flex:0 0 auto}
.steps .bars i{display:block;width:22px;height:4px;border-radius:var(--r-pill);
  background:var(--sunken-2);transition:background .2s ease}
.steps .bars i.done{background:var(--brand-200)}
.steps .bars i.now{background:var(--brand)}
.steps .txt{font-size:var(--fs-caption);color:var(--text-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.steps .txt b{color:var(--text-2);font-weight:var(--fw-m)}

/* 화면 제목 — 앱바가 생겼으니 제목은 «작게 시작»해서 계단을 만든다 */
.scr-h{font-size:var(--fs-headline);font-weight:var(--fw-b);line-height:var(--lh-tight);
  letter-spacing:var(--ls-display);margin:0}
/* ★2026-08-29 — 여백 «대비»를 벌린다.
   실측: 화면 안 세로 간격이 8·12·16·24 네 값뿐이고 가장 큰 것이 24px 이었다.
   「묶음 안(8)」과 「묶음 사이(24)」의 차이가 3배밖에 안 되어 화면 전체가
   «끊김 없는 한 목록»으로 읽혔다 — 이게 「AI가 찍어낸 화면」 느낌의 큰 원인이다.
   글자를 하나도 안 지우고 밀도를 낮추는 방법이다. */
.scr-s{font-size:var(--fs-sm);color:var(--text-3);margin-top:6px;line-height:1.5;
  margin-bottom:var(--sp10)}

/* 넓은 화면에서 «본문 폭 560px»을 잠깐 벗어나야 하는 것(등록증 진열 등) */
.bleed{width:min(920px,94vw);margin-left:50%;transform:translateX(-50%)}
@media (max-width:719px){.bleed{width:auto;margin-left:0;transform:none}}

/* ═══════════════════════════════════════════════════════════════════════
   뒷배경 로고 — «글자 뒤에 아주 연하게». 회사 푸터와 같은 결.
   ⚠️ 지켜야 할 것
     ① 반드시 «글자 뒤»여야 한다 → z-index:0 + 내용은 position:relative
     ② 손가락을 먹지 않게 pointer-events:none
     ③ 읽히면 안 된다 — 읽히는 순간 «워터마크»가 아니라 «배경 그림»이 되어 지저분해진다
     ④ 화면을 넘지 않게 overflow:hidden 으로 잘라낸다
   ═══════════════════════════════════════════════════════════════════════ */
/* ★2026-08-29 — 제목 «뒤»에서 뺐다.
   「큰 반투명 영문 워터마크 + 그 위에 한글 제목」은 랜딩페이지 템플릿의 대표 문법이라,
   대충 만든 티를 없애려고 넣은 것이 정확히 반대로 작동하고 있었다(실측: 제목과 겹침).
   → 작게 줄여 «오른쪽 아래»로 내린다. 종이 뒷면에 찍힌 도장처럼 보이게. */
.mark{position:absolute;top:0;left:50%;transform:translateX(-50%);
  /* 좌우가 잘리지 않을 만큼만. 150% 로 두니 「PET CARE MASTERY」의 P 와 Y 가 잘렸다(실측). */
  width:min(104%,620px);max-width:none;height:auto;
  opacity:.045;                      /* 이보다 진하면 글자가 안 읽힌다 */
  z-index:0;pointer-events:none;user-select:none;
  -webkit-user-drag:none}
/* (설명은 CLAUDE.md·인수인계 문서에 있다)
   ①「저희 집 세 아이입니다」 ②동의문 둘째 줄 ③고르기 부제 ④손글씨 ⑤작은 안내
   전부 «사람이 말하는 것처럼» 보이게 하는 장치다. */
.opts-toggle{display:block;width:100%;margin-top:var(--sp4);padding:11px;background:none;
  border:1px solid var(--line);border-radius:var(--r-md);cursor:pointer;
  font:inherit;font-size:var(--fs-sm);color:var(--text-3)}
.opts-toggle:active{background:var(--sunken)}
.opts-toggle[aria-expanded="true"]{color:var(--text-2);border-color:var(--line-strong)}

.ours{font-size:var(--fs-sm);color:var(--text-3);text-align:center;
  margin:var(--sp6) 0 var(--sp2);line-height:1.5}
/* 🚨 2026-08-31 2차 검수 — 여기 «거부 시 불이익·파기» 같은 법정 고지가 들어간다.
   예전엔 `opacity:.72` 때문에 명암비가 3.02:1 이었다(기준 4.5:1) — 정작 제일 중요한 문장이 제일 안 읽혔다.
   → 흐리게 하는 것을 걷어내고 «읽히는 회색»으로 바꿨다. 여기 opacity 를 다시 넣지 마라. */
.agree-2{color:var(--text-2)}
.ai-sub{font-size:var(--fs-sm);color:var(--text-3);text-align:center;
  margin:calc(var(--sp2) * -1) 0 var(--sp3);line-height:1.5}
/* 손글씨 한 줄 — 「기계가 그렸지만 사람이 봤다」는 신호.
   전용 글꼴을 «바깥에서 불러오지 않는다»(느려지고 못 받으면 깨진다). 기울임+간격으로 낸다. */
.sign2{font-size:var(--fs-sm);color:var(--text-3);text-align:right;
  font-style:italic;letter-spacing:.01em;margin-top:var(--sp3);opacity:.85}
.p3b{color:var(--text-3)}
/* 보상 «조건» — 보상보다 먼저, 그리고 읽히게. 작은 회색으로 숨기지 않는다. */
.cond{font-size:var(--fs-sm);color:var(--text-2);line-height:1.6;
  background:var(--sunken);border-radius:var(--r-md);padding:11px 13px;margin:var(--sp5) 0 var(--sp3)}
.cond b{color:var(--text);font-weight:var(--fw-m)}
.cond-2{color:var(--text-3)}

/* 회원 관문 — [등록증 만들기]를 누른 «그때»만 열린다.
   ⚠️ 겁주는 상자로 보이면 안 된다. 경고색(빨강·노랑)을 쓰지 않는다. */
.gate{margin-top:var(--sp5);padding:16px 15px;border-radius:var(--r-md);
  background:var(--sunken);border:1px solid var(--line)}
.gate-h{margin:0;font-size:var(--fs-lg);font-weight:var(--fw-b);color:var(--text);
  line-height:var(--lh-tight);letter-spacing:var(--ls-title)}
.gate-s{margin:8px 0 14px;font-size:var(--fs-sm);color:var(--text-2);line-height:1.6}
.gate .btn{width:100%}

/* 🚨 «숨김»이 지는 사고를 막는다 (2026-08-29 실제로 겪은 문제).
   `hidden` 속성의 브라우저 기본값은 `display:none` 인데, 우리가 `.kko{display:flex}` 처럼
   «요소에 display 를 직접» 주면 그게 이긴다(같은 순위인데 우리 것이 뒤에 있으니까).
   그래서 숨겨둔 [가입하기]·[가입 다 했어요] 버튼이 관문을 열자마자 다 보이고 있었다.
   → 화면 전체에 적용되는 안전선 한 줄. 새 규칙을 쓸 때마다 신경 쓰지 않아도 된다. */
[hidden]{display:none !important}

/* ★카카오 «공식» 버튼 — 색·아이콘을 카카오가 정한 그대로 쓴다.
   (설명은 CLAUDE.md·인수인계 문서에 있다)
   👉 우리 브랜드색(보라)으로 칠하면 «카카오»라는 신호가 사라진다. 여기서만 노랑을 쓴다. */
.kko{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  padding:14px 16px;border:none;border-radius:var(--r-md);cursor:pointer;
  background:#FEE500;color:#191600;font:inherit;font-size:var(--fs-body);
  font-weight:var(--fw-b);letter-spacing:var(--ls-title)}
.kko:active{background:#F2DA00}
.kko + .kko, .kko + .btn, .btn + .kko{margin-top:8px}
.kko svg{width:20px;height:20px;flex:0 0 20px;fill:#191600}

/* 두 번째 문 — 카카오가 막혀도 손님이 멈추지 않게 */
.gate-or{display:block;width:100%;margin-top:10px;padding:9px;background:none;border:none;
  font:inherit;font-size:var(--fs-sm);color:var(--text-3);text-decoration:underline;cursor:pointer}
.gate-or:active{color:var(--text-2)}
.gate-phone{margin-top:10px;padding-top:12px;border-top:1px solid var(--line)}
.gate-phone .flab{display:block;margin-bottom:6px}
.gate .btn + .btn{margin-top:8px}
.gate-t{margin:12px 0 0;font-size:var(--fs-caption);color:var(--text-3);line-height:1.5}

/* 「아까 고르신 사진 그대로 있어요」 — 다녀온 손님에게 «잃은 게 없다»를 즉시 알린다 */
.kept{font-size:var(--fs-sm);color:var(--text-2);line-height:1.55;
  background:var(--sunken);border-radius:var(--r-md);padding:10px 12px;margin:0 0 var(--sp3)}
.kept-x{background:none;border:none;padding:0;font:inherit;color:var(--brand);
  text-decoration:underline;cursor:pointer}

.tiny{font-size:var(--fs-caption);color:var(--text-3);line-height:1.55;
  margin-top:var(--sp4);text-align:center}
.guide .one{margin:0 0 var(--sp2);font-size:var(--fs-sm);color:var(--text-2);line-height:1.55}

.markwrap{position:relative;overflow:hidden}
.markwrap > *:not(.mark){position:relative;z-index:1}

/* (설명은 CLAUDE.md·인수인계 문서에 있다)
   (설명은 CLAUDE.md·인수인계 문서에 있다)
     너무 안 보이는 거 같아서 조금 더 잘 보이는 위치, 그리고 휴대폰 기준으로
     짤리지 않을까 걱정. 무조건 모바일 최적화까지 반응형으로."*

   🚨 실측으로 확인된 진짜 문제(`_tools\measure_mark.py`):
      **6개 화면 전부에서 잘리고 있었다** — 폰 89~91%, 태블릿·데스크톱 80%.
      원인은 `right:calc(--gutter * -1)`(음수) 로 «일부러 화면 밖»에 뒀는데
      부모 `.markwrap{overflow:hidden}` 이 그 부분을 잘라낸 것이다.
      「은은하게」를 노린 설계가 「반쪽 로고」가 됐다. 대표님 걱정이 정확했다.

   고친 원칙 3가지:
     (1) **음수 위치 금지** — 안쪽(양수 gutter)에만 둔다. 어떤 폭에서도 100% 보인다.
     (2) **진하기를 올린다** — .045 → .085(폰) / .075(넓은 화면).
         옛 주석은 「이보다 진하면 글자가 안 읽힌다」였지만, 로고가 놓인 자리는
         버튼·회색 안내문 «뒤»라 겹치는 글자가 없다(실측). 그래서 올려도 안전하다.
     (3) **크기를 화면 폭에 비례**시킨다(vw) — 폰에서 얼룩처럼 작던 것을 키운다.
   ⚠️ 값을 바꾸면 반드시 `python _tools\measure_mark.py` 로 «온전함 100%»를 다시 확인하라. */
.mark{
  /* ⚠️ 이 `bottom` 이 «없는 눈금»을 부르면 로고가 제목 뒤로 올라가 겹친다(2026-08-29 실제로 겪은 문제).
     값을 바꿀 땐 `python _tools/check_css_tokens.py` 와 `python _tools/measure_mark.py` 를 둘 다 돌려라. */
  /* ★2026-09-10 - 가운데로 옮겼다(예전엔 right 로 붙여 뒀다)
     예전엔 right 로 붙여 뒀다. 이제 가운데에 둔다. 폭이 작아 글자와 안 겹친다(실측). */
  /* 2026-09-10 - 로고를 «위»로 올렸다. 제목 글자 뒤에 흐릿하게 깔린다.
     예전엔 화면 아래(bottom)라 CTA 버튼 근처에 있었다. */
  position:absolute;top:var(--sp10);bottom:auto;
  left:50%;right:auto;transform:translateX(-50%);
  width:min(56vw,210px);max-width:none;height:auto;
  opacity:.085;z-index:0;pointer-events:none;user-select:none;-webkit-user-drag:none}
.scr .mark{top:var(--sp10)}
/* 넓은 화면 — 폭이 남으니 비율을 줄이고 진하기도 살짝 낮춘다(면적이 커서 더 눈에 띈다) */
@media (min-width:720px){
  .mark{width:min(24vw,250px);opacity:.075;top:var(--sp10);bottom:auto}
}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ═══ 상단 소식 띠 ═══════════════════════════════════════════════════════
   여기에 뜨는 것은 **전부 사실**이다. 있었던 일이거나, 우리가 실제로 지키는 약속이다.
   숫자를 부풀리거나 없는 사람을 지어내면 그 순간 과장광고가 된다.
   ⚠️ 문구 원칙 ③(화면1·2·3에 보상 0글자)의 «허용된 예외» — 되돌리지 마라. 왜인지는 CLAUDE.md §1-G.
   ★2026-09-10 개편: 깜빡이는 점 제거(만든 티가 난다) · 시간 표기 제거 · 글자 대비 올림 · 속도 조금 빠르게. */
.live{position:sticky;top:0;z-index:40;background:var(--brand-100);
      border-bottom:1px solid var(--brand-200);
      padding:10px var(--gutter);
      max-width:var(--maxw);margin:0 auto}
.live-win{height:20px;overflow:hidden;position:relative}
.live-tape{will-change:transform;transition:transform .34s cubic-bezier(.22,.7,.3,1)}
.live-tape > span{display:block;height:20px;line-height:20px;
                  font-size:13px;font-weight:var(--fw-m);letter-spacing:var(--ls-body);
                  color:var(--text);                       /* 흐릿하지 않게 — 본문과 같은 진하기 */
                  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
                  text-align:center}                        /* 가운데 정렬(2026-09-10 비교 후 선택) */
.live-tape b{color:var(--brand-700);font-weight:var(--fw-b)}
@media (prefers-reduced-motion:reduce){.live-tape{transition:none}}


/* === 자사몰과 같은 푸터 ==================================================
   puchomil.com 푸터를 그대로 옮겼다 - 자사몰의 연장선으로 보이게 하는 것이 목적이다.
   입금 계좌 안내만 뺐다: 이 화면에서는 돈을 받지 않으므로 손님이 오해한다.
   개인정보처리방침 링크가 여기 있다. 화면 위 고지 문단을 걷어낸 자리를 이 링크가 받는다.
   자세한 배경은 CLAUDE.md 에 있다. */
/* ★2026-10-05 대표님 «푸터가 너무 길다 · 정보는 그대로, 간격만 줄여라» — 위아래 여백·줄 간격만 줄였다(누르는 칸 44px 은 유지) */
.ftr{background:var(--brand);color:#fff;margin-top:var(--sp8);
     padding:var(--sp5) var(--gutter) var(--sp4)}
.ftr-in{max-width:var(--maxw);margin:0 auto;text-align:center}
.ftr-logo{width:84px;height:auto;margin:0 auto var(--sp1);display:block;
          filter:brightness(0) invert(1)}
.ftr h3{font-size:var(--fs-sm);font-weight:var(--fw-b);margin:0 8px 0 0;color:#fff;opacity:.95;display:inline-block;vertical-align:middle}
.ftr-tel{font-size:22px;font-weight:var(--fw-b);letter-spacing:var(--ls-title);
         color:#fff;text-decoration:none;display:inline-block;margin-bottom:0;vertical-align:middle}
/* 흐리면 안 읽힌다 - 보라 바탕에서 .75 는 거의 안 보였다(2026-09-10 캡처로 확인) */
/* 전역 p{color:어두운색} 이 흰 글자를 덮는다 - 반드시 색을 «명시»한다(2026-09-10 캡처로 잡음) */
.ftr-time{font-size:var(--fs-caption);line-height:1.5;color:#fff;opacity:.9;margin:0}
.ftr-line{border:0;border-top:1px solid rgba(255,255,255,.3);margin:var(--sp3) 0 0}
.ftr-links{display:flex;flex-wrap:wrap;justify-content:center;gap:0 var(--sp4);
           font-size:var(--fs-caption);margin-bottom:0}
.ftr-links a{color:#fff;opacity:.95;text-decoration:none;
  /* 🚨 2026-09-10 — 글자가 19px 이라 손가락으로 못 눌렀다(개인정보처리방침 포함).
     사람 손가락은 44px 가 최소다. 글자 크기는 그대로 두고 «누를 수 있는 넓이»만 키운다. */
  display:inline-flex;align-items:center;min-height:44px;padding:0 2px}
.ftr-links a:active{opacity:1;text-decoration:underline}
.ftr-sns{display:flex;justify-content:center;gap:10px;margin-bottom:0}
.ftr-sns a{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.45);
           display:flex;align-items:center;justify-content:center;color:#fff;text-decoration:none}
.ftr-sns svg{width:17px;height:17px;fill:currentColor}
.ftr-biz{font-size:12px;line-height:1.7;color:#fff;opacity:.85}
.ftr-biz summary{cursor:pointer;font-size:var(--fs-caption);color:#fff;opacity:.95;
                 margin-bottom:0;list-style:none}
.ftr-biz summary::-webkit-details-marker{display:none}
.ftr-copy{font-size:12px;color:#fff;opacity:.75;margin:var(--sp1) 0 0}

/* ── 손가락 기준 (2026-09-11 감사) ──────────────────────────────────────
   폰에서 누르는 것은 «44px 이상»이어야 한다. 실측에서 7곳이 20~40px 이었다.
   작은 칸은 글자 크기를 키우지 않고 «누를 수 있는 넓이»만 늘린다. */
.ftr-tel,.ftr-links a,.ftr-sns a,.ftr-biz summary,.ftr-biz > summary{
  display:inline-flex;align-items:center;min-height:44px}
.ftr-sns a{min-width:44px;justify-content:center}
.ftr-in > a:first-child{display:flex;justify-content:center;align-items:center;width:max-content;min-height:44px;margin:0 auto}   /* 로고는 따로 한 줄(대표님 2026-10-05) · 누르는 칸 44px */
.tip-btns .btn,.tip .btn{min-height:44px}
.kept-x{min-height:44px;padding:0 8px;display:inline-flex;align-items:center}
#gateTel,.gate-tel,.gate a,.gate .lnk{min-height:44px;display:inline-flex;align-items:center}