/* ══════════════════════════════════════════════════════════════
   단번 공통 기본 스타일 (2026-08-06 신설 — UX 검수 W-071 · W-068)
   전 페이지가 함께 읽는다. Tailwind CDN이 만들어 내는 유틸리티를
   덮어써야 하므로 !important 를 쓴다 (주입 순서가 보장되지 않음).
   ══════════════════════════════════════════════════════════════ */

/* ── W-071: 브라우저 "글꼴 크기" 설정을 따라가게 ──
   화면 글자 대부분이 text-[12px] 같은 고정 px로 지정돼 있어,
   어르신이 기기에서 글씨를 키워도 열에 아홉은 크기가 그대로였다(실측 247곳 중 219곳).
   같은 크기를 rem으로 다시 적어 두면, 보이는 크기는 그대로면서
   브라우저 설정을 키운 만큼 함께 커진다. (Ctrl+확대는 원래부터 정상 동작) */
.text-\[8px\]  { font-size: 0.625rem !important; }   /* 8·9px는 너무 작아 10px 바닥값으로 올린다 (C-004) */
.text-\[9px\]  { font-size: 0.625rem !important; }
.text-\[10px\] { font-size: 0.625rem !important; }
.text-\[11px\] { font-size: 0.6875rem !important; }
.text-\[12px\] { font-size: 0.75rem !important; }
.text-\[13px\] { font-size: 0.8125rem !important; }
.text-\[14px\] { font-size: 0.875rem !important; }
.text-\[15px\] { font-size: 0.9375rem !important; }
.text-\[16px\] { font-size: 1rem !important; }

/* ── W-083: 넓은 화면에서만 쓰는 글자 크기도 같이 따라가게 (W-071의 남은 절반) ──
   위 규칙은 접두사가 없는 text-[Npx] 만 덮는다. md:text-[15px] 처럼 화면 폭 조건이 붙은
   임의값은 여기에 대응 규칙이 없어 px로 굳어 있었고, 게다가 위 !important 가
   미디어 쿼리와 무관하게 이기기 때문에 넓은 화면에서 md: 값이 아예 먹지 않았다.
   같은 크기를 rem으로, 같은 !important 강도로 다시 적어 둔다.
   (같은 강도끼리는 뒤에 선언된 이 블록이 이긴다 — 이 블록은 위 블록보다 아래에 있어야 한다.)
   실측 대상: index.html md:text-[15px] 22곳 · md:text-[14px] 6곳 · md:text-[13px] 1곳 */
@media (min-width: 768px) {
  .md\:text-\[13px\] { font-size: 0.8125rem !important; }
  .md\:text-\[14px\] { font-size: 0.875rem !important; }
  .md\:text-\[15px\] { font-size: 0.9375rem !important; }
}

/* ── W-068: 흰 배경에 묻히던 옅은 회색 글씨 ──
   실측 명암비 #A3A3A3 = 2.46:1, #9CA3AF = 2.54:1 (WCAG 일반 텍스트 기준 4.5:1).
   같은 색을 테두리·배경으로 쓰는 곳은 그대로 두고, "글자 색"으로 쓴 곳만 한 단계 진하게 한다.
   #6B7280 = 4.83:1 로 기준을 넘는다. */
.text-\[\#A3A3A3\] { color: #6B7280 !important; }
.text-\[\#9CA3AF\] { color: #6B7280 !important; }
/* 파란 칸 안의 흰 숫자가 흐릿하던 곳 — 흰색은 그대로 두되 반투명 흰색만 올린다 */
.text-white\/50 { color: rgba(255, 255, 255, 0.8) !important; }
.text-white\/60 { color: rgba(255, 255, 255, 0.85) !important; }

/* ── P-100 · P-102 · P-105: 흰 바탕에 묻히던 옅은 회색 «표준 클래스» 글자 (2026-08-13) ──
   W-068은 임의값(#A3A3A3 · #9CA3AF)만 덮었는데, 같은 밝기를 표준 클래스로 적은 곳
   (text-neutral-300 = 1.48:1 · text-neutral-400 = 2.52:1)이 그대로 남아 있었다.
   글자수 표시·잔액 미리보기·안내 줄·로그인 탭이 여기에 해당한다. 같은 기준(#6B7280 = 4.83:1)으로 올린다.
   실측: text-neutral-300/400을 글자색으로 쓰는 파일은 admin.html·partner.html 두 곳뿐이고
   전부 밝은 바탕 위라 어두운 배경 쪽 부작용은 없다. */
.text-neutral-300 { color: #6B7280 !important; }
.text-neutral-400 { color: #6B7280 !important; }
/* 위 !important 가 마우스 올림(hover)·group-hover 색까지 이겨 버리면 단추가 반응 없는 것처럼 보인다.
   앱에서 실제로 쓰는 상태 색을 같은 강도로 되살린다 (W-068의 #A3A3A3 덮개에도 같은 문제가 있었다). */
.hover\:text-\[\#2260EA\]:hover { color: #2260EA !important; }
.hover\:text-\[\#1B4FC4\]:hover { color: #1B4FC4 !important; }
.hover\:text-\[\#172B53\]:hover { color: #172B53 !important; }
.hover\:text-\[\#DC2626\]:hover { color: #DC2626 !important; }
.hover\:text-red-500:hover { color: #EF4444 !important; }
.hover\:text-amber-900:hover { color: #78350F !important; }
.hover\:text-white:hover { color: #FFFFFF !important; }
.group:hover .group-hover\:text-\[\#2260EA\] { color: #2260EA !important; }
.group:hover .group-hover\:text-white { color: #FFFFFF !important; }

/* ── W-193: 글꼴 확대 시 공개 화면 상단 메뉴 겹침 (2026-08-19, W-071·W-083 후속) ──
   글꼴을 150%로 키우면 rem 글자·여백은 1.5배가 되는데, 데스크탑 메뉴/햄버거를 가르는 기준(Tailwind md·lg)은
   화면 폭 px 그대로라, 768~1280px에서 가운데 메뉴(제품~고객센터)와 오른쪽 단추(마이페이지·신청)가
   서로 겹치고 「파트너」가 세로로 쪼개졌다. 미디어 쿼리의 em은 html{font-size}를 따라가지 않으므로
   헤더 자체를 컨테이너로 삼아 컨테이너 쿼리 em(= 헤더의 글꼴 크기 기준)으로 가른다.
   · 100%: 48em = 768px → 지금과 같은 자리에서 데스크탑 메뉴로 바뀐다(동작 변화 없음).
   · 150%: 48em = 1152px → 그 아래에서는 데스크탑 메뉴·마이페이지·신청 단추를 접고 햄버거만 남긴다.
   마이페이지 글자(lg:inline)·메뉴 여백(lg:px-4)도 같은 식으로 64em(100%: 1024 / 150%: 1536)부터만 편다.
   이 규칙은 "접는" 쪽으로만 일하므로(펴는 것은 여전히 Tailwind md·lg가 결정) 100%에서는 아무것도 달라지지 않는다.
   컨테이너 쿼리를 모르는 옛 브라우저는 이 블록을 무시하고 예전(Tailwind px 기준)대로 동작한다.
   각 공개 화면의 <header>에 클래스 하나만 붙이면 같이 먹는다 —
   · db-header      : 가운데 메뉴 + 마이페이지/신청 단추 + 햄버거 형(index·about·guide·glossary·products·partners·
                      notice·inquiry·partner-inquiry·danmate·quiz·partner-list)
   · db-header-flat : 오른쪽 정렬 목차 5개 + 신청 단추 + 햄버거 형(terms·privacy·refund-policy). <header> 자체에
                      좌우 여백(md:px-8 = 2rem)이 있고 컨테이너 쿼리는 여백을 뺀 안쪽 폭을 재므로 기준을 2rem 낮춘
                      44em(100%: 안쪽 704px = 화면 768px)으로 잰다. */
.db-header, .db-header-flat { container-type: inline-size; container-name: db-header; }
/* 메뉴 글자·단추는 어떤 폭에서도 줄을 바꾸지 않는다 — 좁으면 아래 규칙이 통째로 햄버거로 접는다 */
.db-header nav a, .db-header-flat nav a { white-space: nowrap; }
@container db-header (max-width: 47.999em) {
  .db-header nav.md\:flex { display: none !important; }        /* 가운데 데스크탑 메뉴 */
  .db-header .md\:inline-flex { display: none !important; }    /* 마이페이지 */
  .db-header .md\:inline-block { display: none !important; }   /* 단번 신청하기 */
  .db-header #menu-btn { display: flex !important; }           /* 햄버거 */
}
@container db-header (max-width: 63.999em) {
  .db-header .lg\:inline { display: none !important; }         /* 마이페이지 글자 — 아이콘만 */
  /* 150%에서는 1152~1535px 구간이 100%의 768~1023px에 해당하는데 lg(1024px)가 px 기준이라 넓은 여백(lg:px-4)이
     먼저 붙어 「고객센터」와 마이페이지 단추가 다시 닿았다(실측 1160px). 여백도 같은 기준으로 px-3 값을 유지한다. */
  .db-header .lg\:px-4 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
}
@container db-header (max-width: 43.999em) {
  .db-header-flat .md\:inline-block { display: none !important; }   /* 목차 5개 */
  .db-header-flat #menu-btn { display: flex !important; }           /* 햄버거 */
}

/* ══════════════════════════════════════════════════════════════
   A묶음 (2026-08-19 민정 님 요청 1·2·6) — 공개 화면 공용 부품
   ══════════════════════════════════════════════════════════════ */

/* ── 요청 1: 제품 카드 사진 확대 ──
   카드에 마우스를 올리면 «사진만» 살짝 커진다. 칸(카드)의 크기는 그대로라
   옆 카드가 밀리지 않는다 — 사진을 감싼 칸에 overflow:hidden 이 이미 있어
   커진 만큼은 칸 밖으로 나가지 않고 잘린다.
   · 손가락으로 쓰는 기기에는 «마우스 올리기»가 없다. 흉내 낸 hover 가 한 번 걸리면
     손을 떼도 커진 채 남으므로, 마우스가 있는 기기에서만 적용한다.
   · 기기 설정에서 「동작 줄이기」를 켠 이용자에게는 움직임을 끈다. */
@media (hover: hover) and (pointer: fine) {
  .db-zoom-img { transition: transform .25s ease; }
  .group:hover .db-zoom-img { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .db-zoom-img { transition: none !important; }
  .group:hover .db-zoom-img { transform: none !important; }
}

/* ── 요청 2: 타이틀 바 — 글 칸과 그림 칸을 나눈다 ──
   예전에는 그림을 «배경»으로 깔고 그 위에 글을 얹었다(background-image + right center).
   그래서 글이 길어지면 그림 위로 올라탔다. 이제 글과 그림은 서로 다른 칸에 있어
   구조상 겹칠 수가 없다.
   · 넓은 화면(768px~): 왼쪽 절반 글 / 오른쪽 절반 그림. 글 칸에 max-width:50% 를 주면
     좌우 여백이 얼마든 글의 오른쪽 끝은 «화면 정중앙»에 정확히 떨어진다
     (여백 p 일 때 p + (W-2p)/2 = W/2). 그림 칸은 화면 정중앙부터 오른쪽 끝까지라 딱 맞물린다.
   · 좁은 화면(~767px): 위에 글, 아래에 그림으로 쌓는다.
   · 그림은 잘라 채우기(cover) + 오른쪽 기준이라 왼쪽부터 잘린다. 가장 많이 잘리는 경우가
     «오른쪽 49%만 남는» 상태(768×1024 실측)라, 캐릭터·물건이 원본 가로 1350px 뒤쪽에 있으면
     어느 화면에서도 온전히 보인다. 규격 문서는 docs/디자인/2026-08-19-타이틀바-이미지-규격.md */
.db-titlebar { position: relative; display: flex; flex-direction: column; overflow: hidden; }
.db-titlebar-media { display: block; width: 100%; }
.db-titlebar-media img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 10;                 /* 좁은 화면 — 원본(21:9)의 오른쪽 부분만 보여 캐릭터가 크게 보인다 */
  object-fit: cover; object-position: right center;
}
@media (min-width: 768px) {
  .db-titlebar { flex-direction: row; align-items: center; min-height: min(42.1875vw, 60vh); }
  .db-titlebar-media { position: absolute; top: 0; right: 0; bottom: 0; width: 50%; }
  .db-titlebar-media img { height: 100%; aspect-ratio: auto; }
  /* 글은 화면 절반을 넘지 않는다. 오른쪽 여백은 글과 그림 사이 간격. */
  .db-titlebar-text { max-width: 50%; padding-right: 2.5rem; }
}

/* ── 요청 6: 하단 고정 「무료 견적 신청하기」 바 ──
   cta-bar.js 가 넣는다. 높이는 한 곳(--db-cta-h)에서만 정하고,
   본문 아래 여백(body.has-cta-bar)도 같은 값을 쓴다 — 둘이 어긋나면 맨 아래 내용이 가려진다.
   손가락 기기의 홈 버튼 영역(env(safe-area-inset-bottom))만큼 아래를 더 띄운다.
   z-index 55 = 헤더(60)·모바일 메뉴(70) 아래 — 메뉴가 열리면 자연히 가려진다. */
:root { --db-cta-h: 56px; }
@media (min-width: 768px) { :root { --db-cta-h: 58px; } }
body.has-cta-bar { padding-bottom: calc(var(--db-cta-h) + env(safe-area-inset-bottom)); }
.db-cta-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  display: flex; align-items: center; justify-content: center; gap: 0.375rem;
  min-height: calc(var(--db-cta-h) + env(safe-area-inset-bottom));
  padding: 0 1rem env(safe-area-inset-bottom);
  background: #2260EA; color: #FFFFFF;
  font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em;
  text-align: center; text-decoration: none;
  transition: background-color .2s ease;
}
.db-cta-bar:hover { background: #1B4FC4; color: #FFFFFF; }
.db-cta-bar:focus-visible { outline: 2px solid #FFFFFF; outline-offset: -4px; }
.db-cta-bar svg { flex: none; }
/* 팝업이 떠 있는 동안은 숨긴다 — B묶음(관리자 팝업)이 body 에 has-popup 을 붙여 쓰는 자리 */
body.has-popup .db-cta-bar { display: none; }

/* ── 터치 영역 바닥값 (Q-003 · C-013) ──
   글자 높이가 곧 누르는 자리라 자꾸 빗나가던 작은 글자 단추들.
   프로젝트 기준은 44px (mobile-menu.js 주석 — 어르신 사용성). */
.tap-target {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}