/* =====================================================================
   이용 가이드 전용(10/6) — 셀러·공급사 포털 '이용 가이드'(seller/guide.html · partner/guide.html)와
   공개 시작 안내(public/guide_seller.html · guide_partner.html)만 읽는다. 클래스 앞머리 ug-(셀러 홈이 이미 .gd 를 씀).
   디자인 기준 v2: 그라데이션·그림자·아이콘·알약·번호 동그라미 없음 · 모서리 0 · 1px 선 · 단계 번호는 '1.' 글자.
   화면 사진 틀 = 1px 선, 모서리 0, 누르면 원본(새 탭). 폰(375px)에서 가로 넘침 없음 — 표는 줄마다 쌓고, 사진은 폭 가득.
   ===================================================================== */

/* ── 포털: 상태 띠 · 위 칸(준비할 것 + 차례) ─────────────────────────────── */
.ug-state { margin-bottom: 16px; justify-content: space-between; flex-wrap: wrap; }
.ug-state > span { flex: 1 1 260px; min-width: 0; word-break: keep-all; }
.ug-top { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.ug-top > .card + .card { margin-top: 0; }
.ug-top > * { min-width: 0; }

/* 준비할 것 — 빈 네모 칸 목록(두 줄로 나눔) */
.ug-checks { list-style: none; margin: -2px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
.ug-checks li { position: relative; padding: 9px 0 9px 24px; border-bottom: 1px solid var(--g5); font-size: 13.5px; line-height: 1.6; color: var(--g1);
  word-break: keep-all; overflow-wrap: anywhere; }
.ug-checks li::before { content: ""; position: absolute; left: 1px; top: 13px; width: 11px; height: 11px; border: 1px solid var(--g3); background: #fff; }

/* 차례 */
.ug-toc ol { list-style: none; margin: -6px 0 -4px; padding: 0; }
.ug-toc li + li { border-top: 1px solid var(--g5); }
.ug-toc a { display: block; padding: 8px 0; font-size: 13.5px; color: var(--g1); word-break: keep-all; }
.ug-toc a:hover { color: var(--blue); }
.ug-toc small { margin-left: 4px; font-size: 12px; color: var(--g3); }

/* 셀러룸 안내 한 줄 */
.ug-ref { margin-top: 16px; }
.ug-ref a { color: var(--blue); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ── 포털: 단계 카드 ─────────────────────────────────────────────────── */
/* 차례·홈 카드 링크(#g-…)로 뛰면 붙박이 윗줄(.ptop 58px, 폰은 약 50px) 아래에 제목이 숨던 것 — 윗줄 높이 + 여유 */
.ug-step { margin-top: 16px; scroll-margin-top: 74px; }
.ug-check { scroll-margin-top: 74px; }
.ug-page > .ug-step + .ug-step { margin-top: 16px; }
.ug-step .card-h h3 { word-break: keep-all; }
.ug-step .ug-opt { margin-left: 6px; font-size: 12px; font-weight: 500; color: var(--g3); letter-spacing: 0; }
.ug-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; align-items: start; }
.ug-step.noshot .ug-in { grid-template-columns: minmax(0, 1fr); }
.ug-in > * { min-width: 0; }
/* 넓은 화면: 사진이 글보다 길면 글 칸이 화면에 따라온다(윗줄 아래) — 사진을 보며 설명을 같이 읽게 */
@media (min-width: 1101px) { .ug-step:not(.noshot) .ug-tx { position: sticky; top: 74px; } }
.ug-body { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.ug-body li { position: relative; padding-left: 14px; font-size: 14px; line-height: 1.7; color: var(--g1); word-break: keep-all; overflow-wrap: anywhere; }
.ug-body li::before { content: ""; position: absolute; left: 1px; top: .72em; width: 4px; height: 4px; background: var(--navy); }
.ug-more { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--g5); font-size: 13px; }
.ug-more > span { color: var(--g3); font-weight: 600; }
.ug-more a { color: var(--blue); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--blue-line); }
.ug-more a:hover { text-decoration-color: var(--blue); }
.ug-more em { font-style: normal; color: var(--g2); }
.ug-noperm { font-size: 12.5px; color: var(--g3); font-weight: 500; }

/* 화면 사진 — 1px 선 틀, 누르면 원본 */
.ug-shots { display: grid; gap: 18px; }
.ug-shot { margin: 0; min-width: 0; }
.ug-shot > a { display: inline-block; max-width: 100%; vertical-align: top; border: 1px solid var(--g4); background: #fff; }
.ug-shot > a:hover { border-color: var(--g3); }
.ug-shot img { display: block; max-width: 100%; height: auto; }
.ug-shot figcaption { margin-top: 6px; font-size: 12px; color: var(--g3); line-height: 1.55; word-break: keep-all; }

/* ── 공개 시작 안내 ─────────────────────────────────────────────────── */
.ug-jump { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--g5); }
.ug-jump a { font-size: 14px; font-weight: 700; color: var(--g1); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--g4); }
.ug-jump a:hover { color: var(--blue); text-decoration-color: var(--blue); }
.ug-sec { scroll-margin-top: 80px; }
.ug-tbl .t td { vertical-align: top; font-size: 13.5px; line-height: 1.65; }
.ug-tbl .t .ug-item { font-weight: 700; color: var(--g1); min-width: 150px; }
.ug-tbl .t .ug-why { color: var(--g2); }
.ug-tbl .t .ug-need { white-space: nowrap; color: var(--g2); font-weight: 600; }
.ug-tbl .t .ug-need.must { color: var(--g1); font-weight: 800; }
.ug-tbl .t tr:hover td { background: transparent; }
.ug-fields span { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: baseline; }
.ug-fields span + span { margin-top: 4px; }
.ug-fields b { font-size: 12px; color: var(--g3); font-weight: 700; }
.ug-fields em { font-style: normal; }
.ug-notes { margin-top: 12px; }
.ug-notes li { font-size: 13px; color: var(--g2); }
.ug-notes a { color: var(--blue); font-weight: 600; }

/* 순서 — 번호 글 목록(1. 2. 3.), 동그라미 없음 */
.ug-flow { list-style: none; margin: 0; padding: 0; counter-reset: ugf; background: #fff; border-top: 2px solid var(--g1); border-bottom: 1px solid var(--g4); }
.ug-flow li { counter-increment: ugf; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; padding: 14px; }
.ug-flow li + li { border-top: 1px solid var(--g5); }
.ug-flow b { font-size: 15px; font-weight: 800; color: var(--g1); letter-spacing: -.03em; word-break: keep-all; }
.ug-flow b::before { content: counter(ugf) "."; margin-right: 6px; color: var(--blue); }
.ug-flow p { margin: 0; font-size: 14px; color: var(--g2); line-height: 1.7; word-break: keep-all; overflow-wrap: anywhere; }

.ug-pub .pb-box + .s-sec { margin-top: 44px; }
.ug-pub .ug-ref { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--g5); font-size: 14px; color: var(--g1); }
.ug-pub .ug-ref small { display: block; margin-top: 2px; font-size: 12px; color: var(--g3); }
.ug-cta-links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px !important; }
.ug-cta-links a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .5); }
.ug-cta-links a:hover { text-decoration-color: #fff; }

/* ── 좁은 화면 ─────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .ug-top { grid-template-columns: minmax(0, 1fr); }
  .ug-in { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .ug-toc ol { columns: 2; column-gap: 24px; } .ug-toc li { break-inside: avoid; } .ug-toc li + li { border-top: 0; } .ug-toc li { border-bottom: 1px solid var(--g5); }
}
@media (max-width: 760px) {
  .ug-checks { grid-template-columns: minmax(0, 1fr); }
  .ug-toc ol { columns: 1; }
  .ug-body li { font-size: 13.5px; }
  .ug-flow li { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 13px 4px; }
  /* 표는 줄마다 쌓는다(가로 밀기 없음) — 머리 줄 숨기고, 칸 이름은 글 순서로 */
  .ug-tbl { border-left: 0; border-right: 0; overflow: visible; }
  .ug-tbl .t, .ug-tbl .t tbody, .ug-tbl .t tr, .ug-tbl .t td { display: block; width: auto; min-width: 0; }
  .ug-tbl .t thead { display: none; }
  .ug-tbl .t tr { padding: 10px 2px; border-bottom: 1px solid var(--g5); }
  .ug-tbl .t td { padding: 2px 0; border: 0; white-space: normal; }
  .ug-tbl .t .ug-item { min-width: 0; font-size: 14px; }
  .ug-tbl .t .ug-need { margin-top: 4px; font-size: 12.5px; }
  .ug-tbl .t td[data-l]::before { content: attr(data-l); display: block; margin-top: 8px; font-size: 11.5px; font-weight: 700; color: var(--g3); }
}