/* 운영툴 발행 콘텐츠 전용 스타일.
   style.css 는 디자이너 파일이라 건드리지 않는다 — 데이터가 만드는 상태(빈 목록,
   실제 이미지가 들어온 썸네일)만 여기서 처리한다. */

/* ⚠ [hidden] 은 display 에 밀린다. .period 처럼 display:flex 가 걸린 요소에 hidden 을 주면
   숨긴 줄 알았던 줄이 그대로 남는다(웹스토어에서 실제로 겪은 함정). 한 번에 막는다. */
[hidden] { display: none !important; }

/* 빈 상태 · 실패 상태 — 시안에 없는 상태라 담백하게만 둔다 */
.dr-empty {
  padding: 56px 16px;
  text-align: center;
  color: var(--text-sub, #7A8394);
  font-size: 14px;
  line-height: 1.6;
}

/* 썸네일에 실제 이미지가 들어온 경우 — 기본값은 "썸네일" 플레이스홀더 박스다 */
.news-card .thumb.has-img { padding: 0; overflow: hidden; }
.news-card .thumb.has-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 상단 이미지도 마찬가지 — 이미지가 있으면 .img-ph 를 벗고 실물이 들어온다 */
.top-img img { width: 100%; height: auto; border-radius: 12px; display: block; }

/* ── 법무 문서 (terms/privacy/refund — legal-view.js 가 그린다) ──────────
   lg-* 마크업은 운영툴 lib/ops/legal-render.ts 가 만든다. 이름을 바꾸면 양쪽을 같이. */
.legal-page { width: 860px; max-width: calc(100% - 32px); }
.legal-page .lg-meta { color: var(--text-sub, #7A8394); font-size: 13px; margin: 4px 0 12px; }
.legal-page .lg-country { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.legal-page .lg-country select {
  padding: 6px 10px; border: 1px solid var(--line, #D7DCE4); border-radius: 8px;
  background: #fff; font-size: 14px;
}
.legal-page .lg-sublinks { display: flex; flex-wrap: wrap; gap: 14px; margin: 10px 0 4px; font-size: 14px; }
.legal-page .lg-sublinks a { text-decoration: underline; }
.legal-page .a-body-slot { margin-top: 16px; }

.lg-p { font-size: 14px; line-height: 1.8; margin: 0 0 12px; word-break: keep-all; overflow-wrap: anywhere; }
.lg-dots { line-height: 2; }
.lg-h { margin: 24px 0 10px; line-height: 1.4; }
h2.lg-h { font-size: 19px; }
h3.lg-h { font-size: 16px; }
h4.lg-h { font-size: 15px; }
.lg-ul { margin: 0 0 12px; padding-left: 22px; }
.lg-ul li { font-size: 14px; line-height: 1.8; margin: 2px 0; }
.lg-rule { border: 0; border-top: 1px solid var(--line, #D7DCE4); margin: 20px 0; }

/* ── 라이선스 고지 (licenses.html — 정적 본문) ──
   목록은 .lg-ul 재사용. .lic-text = 라이선스 전문(영문·긴 문단) — 본문보다 한 단계 작고 흐리게, 테두리로 구분. */
.legal-page .lic-text { font-size: 13px; line-height: 1.7; color: var(--text-sub, #7A8394); margin: 0 0 8px;
  padding: 12px 14px; border: 1px solid var(--line, #D7DCE4); border-radius: 8px; overflow-wrap: anywhere; }
.legal-page .lic-text p { margin: 0 0 10px; }
.legal-page .lic-text p:last-child { margin-bottom: 0; }

/* 표는 좁은 화면에서 안쪽 스크롤 — 페이지 가로 스크롤을 만들지 않는다 */
.lg-table-wrap { overflow-x: auto; margin: 0 0 12px; }
.lg-table { border-collapse: collapse; font-size: 13px; line-height: 1.6; min-width: 480px; }
.lg-table th, .lg-table td {
  border: 1px solid var(--line, #D7DCE4); padding: 8px 10px; text-align: left; vertical-align: top;
}
.lg-table th { background: rgba(0, 0, 0, 0.04); }

/* 스티키 푸터 — 내용이 짧은 페이지(고객지원·404·빈 목록)에서 푸터가 화면 중간에 뜨지 않게.
   구조: body > .tabbar + .stage(내부에 .footer) — 고정/숨김 오버레이는 플로우 밖이라 무영향.
   전역 리셋(*{margin:0})이라 margin 컬랩스 변화 없음 — flex 전환 안전 */
html { height: 100%; }
body { min-height: 100%; display: flex; flex-direction: column; }
/* width:100% 필수 — .stage 는 style.css 에서 margin:0 auto 로 가운데 정렬한다.
   세로 flex 의 교차축(가로)에 auto 마진이 있으면 stretch 가 무효화돼 shrink-to-fit 이
   되고, 내용 최대폭(카드류 1280)까지만 늘어나 max-width:1920 이 死문이 된다. */
.stage { flex: 1 0 auto; display: flex; flex-direction: column; width: 100%; }
.stage > .footer { margin-top: auto; }

/* 탭 Active — site.js 스크롤스파이가 붙인다. 색·굵기는 사이트 .on 관례 — 확정 스타일은 디자이너 조정 대상 */
.tabbar nav a.on, .m-menu a.m-row.on { color: var(--primary); font-weight: 700; }