/* ============================================================================
   품티켓 템플릿 — 바탕 (2026-09-21)
   ----------------------------------------------------------------------------
   ★이 파일의 핵심은 `.wrap` 하나다. 폭과 좌우 여백은 **여기서만** 정한다.
     섹션·FAQ·격자·카드에 max-width / width / margin:0 auto / padding-left|right 를
     따로 주지 않는다. 좁게 보이려면 .wrap **안에서** grid·flex 로 칸을 나눈다.
   ============================================================================ */

/* ── 0. 초기화 ─────────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }

/* ★overflow-x 는 반드시 clip. hidden 으로 주면 세로 스크롤까지 먹혀
   모바일에서 화면이 안 내려간다(2026-09-19 eundev 사고). */
html,body{ overflow-x:clip; }

html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--pt-white); color:var(--pt-ink);
  font-family:var(--pt-font); font-size:var(--pt-body); line-height:var(--pt-lh-body);
}
img,svg,video{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

/* ── 1. 폭은 한 곳에서만 ───────────────────────────────────────────────── */
/* 콘텐츠 1180 · 거터 PC 50 / 태블릿 32 / 모바일 18 — 이 세 값만 쓴다.
   calc 의 뺄 값은 거터 × 2 다(50→100 · 32→64 · 18→36). */
.wrap{ width:min(var(--pt-content), calc(100% - var(--pt-gutter) * 2)); margin-inline:auto; }

/* 좁은 글줄이 필요한 하위문서 본문. .wrap 을 줄이지 말고 이것을 .wrap **안에** 쓴다. */
.wrap-doc{ width:min(var(--pt-doc), 100%); margin-inline:auto; }

/* ── 2. 섹션 : 다른 것은 배경색과 위아래 padding 뿐, 좌우는 건드리지 않는다 ── */
section{ padding-block:var(--pt-sec-y); }
.sec-off{ background:var(--pt-off); }
.sec-dark{ background:var(--pt-dark); color:var(--pt-dark-fg); }
.sec-dark h1,.sec-dark h2,.sec-dark h3{ color:#fff; }
.sec-dark p,.sec-dark li{ color:rgba(255,255,255,.88); }

/* 화면 끝까지 붙는 것(히어로 배경·전체폭 이미지·하단 고정 바)만 거터 예외다.
   그 안의 글은 다시 .wrap 안에 넣는다. */
.bleed{ width:100%; }

/* ── 3. 글자 ──────────────────────────────────────────────────────────── */
h1,h2,h3,h4{ margin:0; word-break:keep-all; text-wrap:balance; line-height:var(--pt-lh-head); }
h1{ font-size:var(--pt-h1); font-weight:var(--pt-w-h1); }
h2{ font-size:var(--pt-h2); font-weight:var(--pt-w-h2); }
h3{ font-size:var(--pt-h3); font-weight:var(--pt-w-h3); }
p,li,dd,dt,figcaption,td,th{ word-break:keep-all; text-wrap:pretty; }
p{ margin:0 0 1em; }
small,.small{ font-size:var(--pt-small); color:var(--pt-grey); }

/* ── 4. 전화 표기 : PC 는 글자, 모바일은 누르는 버튼 (품티켓 공통) ────── */
.tel-pc{ display:inline; }
.tel-mo{ display:none; }
@media (max-width:767px){
  .tel-pc{ display:none; }
  .tel-mo{ display:inline-flex; }
}

/* ── 5. 카드·버튼 같은 부품은 여기 없다 ────────────────────────────────
   템플릿마다 새로 만든다. 지켜야 할 것은 수치 규칙뿐이고 규칙.md 에 적혀 있다
   (누르는 것 최소 높이 56px · 카드 안쪽 여백은 --pt-card-pad · 카드에 좌우 margin 금지). */

/* ── 6. 접근성 ────────────────────────────────────────────────────────── */
:focus-visible{ outline:3px solid var(--pt-primary); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } }