/* site.css 는 시안에서 뽑은 생성물이라 고치지 않는다. 시안에 없던 상태·서버 렌더링 때문에 필요한 규칙만 여기 둔다. */

/* .card-p 등이 display 를 지정해서 hidden 속성이 안 먹는다 — 상품 탭이 hidden 으로 거른다 */
[hidden] { display: none !important; }

/* 브랜드 소개 본문은 줄바꿈을 허용한다 (NFS Validation 「브랜드 소개 본문 — 줄바꿈 허용」) */
#s-body1, #s-body2 { white-space: pre-line; }

/* 상품이 없는 탭 (FSD U-02 §8) — 시안 C 에 없는 상태 */
.grid-empty { grid-column: 1 / -1; margin: 0; padding: 48px 16px; text-align: center; color: var(--ink-2); font-weight: 600; }

/* 상품 사진을 못 불러오면 아이콘으로 바꾼다 (FSD U-02 §8). 모양은 시안의 .thumb--none 그대로 */
.card-p .thumb .thumb-fallback { display: contents; }

/* 입력칸 아래 오류 (NFS ErrorMessage E-01~E-04) — 시안 C 에 없는 상태 */
.field-error { margin: 0; font-size: 13px; font-weight: 700; color: var(--coral-deep); }
.control[aria-invalid="true"] { border-color: var(--coral); }
.form button[type="submit"][disabled] { opacity: .6; cursor: progress; }

/* FONT_SET=safe — G마켓산스 라이선스 확인 전 배포용 (README_개발자 §4-2).
   제목을 Pretendard 로 돌리고, 히어로 제목의 주아(OFL)는 시안 그대로 둔다 (site.css `html.f-mix.v-c .hero-title` 과 같은 값) */
html.f-safe { --round: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; }
html.f-safe.v-c .hero-title { font-family: "Jua", "Pretendard", "Malgun Gothic", sans-serif; font-weight: 400; letter-spacing: 0; line-height: 1.16; }

/* ── 표준 모드 보정 ────────────────────────────────────────────────────────
   시안 C 는 <!doctype> 이 없어 쿼크 모드(document.compatMode = BackCompat)로 그려진다. 우리는 표준 모드다.
   요소별 계산 스타일을 전수 대조했더니 쿼크가 실제로 바꾼 곳은 아래 두 가지뿐이었다 (2026-09-17, 682개 요소).
   시안과 같은 픽셀이 나오도록 쿼크의 결과를 명시한다. */

/* ① 쿼크 모드의 table 은 body 의 line-height·font-weight 를 물려받지 않는다 → 가맹비용 표 행이 14px 씩 커졌다 */
.cost-card table { line-height: normal; font-weight: 400; }

/* ② 쿼크 모드는 그림만 있는 줄에 글자 받침(descender) 자리를 두지 않는다 → 캐릭터 아래 8px 이 벌어졌다 */
.hero-chars svg, .tl-char svg, .apply-chars svg, .menu-chars svg { vertical-align: top; }

/* 토스트는 left:50% 에서 시작해 폭이 화면의 절반으로 줄어든다 — 360px 에서 「문구가 / 저장되었습니다」로 꺾였다.
   글자 길이만큼 넓히되 화면을 넘지 않게 한다 */
.toast { width: max-content; max-width: calc(100vw - 32px); text-align: center; }

/* ── 접근성·반응형 보정 (작업지시서 a11y-qa) — 시안의 모양은 그대로 두고 누르는 영역·읽히는 이름만 고친다 ── */

/* 화면에는 안 보이고 스크린리더만 읽는 글자 */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* 본문 바로가기 — 초점을 받을 때만 보인다 */
.skip-link { position: fixed; left: 12px; top: -80px; z-index: 100; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 12px; background: var(--ink); color: #fff; font-weight: 800; }
.skip-link:focus { top: 12px; }
main:focus { outline: none; }

/* 창업문의 폼의 필수 표시 */
.form .req { font-weight: 600; color: var(--coral-deep); }

/* 누르는 영역 44px (NFS/Responsive). 글줄 안의 링크는 위아래 여백을 늘려도 줄 높이가 안 바뀐다 — 모양은 그대로, 눌리는 곳만 커진다 */
.tel { padding-block: 7px; }
.ci-value a { padding-block: 12px; }
/* 푸터 링크는 flex 항목이라 여백이 자리를 밀어낸다 — 늘린 만큼 바깥 여백으로 되돌려 자리는 그대로 둔다 */
.ft-links a { padding-block: 12px; margin-block: -12px; }
.tel { margin-block: -7px; }
/* 사이드 점은 8px 그림이다. 점 사이가 12px 이라 위아래로는 20px 까지만 넓힐 수 있다 — 옆으로 44px */
.side-dots a { position: relative; }
.side-dots a::before { content: ""; position: absolute; inset: -6px -18px; }

/* 떠 있는 창업문의 버튼 — 창업문의 섹션에서는 물러난다 */
.fab { transition: opacity .2s, visibility .2s; }
.fab.is-away { opacity: 0; visibility: hidden; pointer-events: none; }

/* 인쇄 — 화면에 떠 있는 것들을 뺀다 (NFS/Browser 「인쇄」) */
@media print {
  .fab, .hd, .side-dots, .menu, #toast-region, .skip-link, .bands { display: none !important; }
}

/* ── 이용약관·개인정보처리방침 페이지 (시안에 없는 화면 — 시안의 토큰만 쓴다) ── */
.doc { padding-block: 140px 100px; }
.doc-body { max-width: 860px; }
.doc-body h1 { margin: 0 0 32px; font: var(--hw, 700) clamp(32px, 4vw, 48px)/1.25 var(--round); letter-spacing: var(--ls, 0); }
.doc-body h2 { margin: 48px 0 12px; font-size: 22px; font-weight: 800; line-height: 1.4; }
.doc-body h3 { margin: 32px 0 8px; font-size: 18px; font-weight: 800; }
.doc-body p, .doc-body li { color: var(--ink-2); }
.doc-body ul, .doc-body ol { padding-left: 1.3em; }
.doc-body a { color: var(--coral-deep); text-decoration: underline; text-underline-offset: 3px; }
.doc-table { overflow-x: auto; margin-block: 16px; }
/* site.css 가 table·th·td 를 맨몸으로 꾸민다(가운데 정렬·굵기·최소 폭 620px) — 문서 표로 되돌린다 */
.doc-table table { min-width: 0; font-size: 15px; line-height: 1.6; border-collapse: collapse; }
.doc-table th, .doc-table td { padding: 10px 14px; text-align: left; font-weight: 500; border: 1px solid var(--line); white-space: normal; }
.doc-table th { font-weight: 800; background: var(--white); white-space: nowrap; }

/* 동의 문구 옆 「전문 보기」 */
.agree-more { flex: none; margin-left: auto; padding-block: 12px; margin-block: -12px; font-size: 14px; font-weight: 700; color: var(--coral-deep); text-decoration: underline; text-underline-offset: 3px; }