/* =============================================================================
   OpenMain 홈 guide — 이용 가이드 페이지 전용
   -----------------------------------------------------------------------------
   문서 카드(.legal-*)는 legal.css 를 그대로 재사용한다. 이 파일에는 가이드에만
   있는 요소(좌측 목차 / 전체 흐름도 / 필드 설명표 / 포털 화면 도식)와,
   약관용 문서 스타일을 매뉴얼용으로 되잡는 재정의만 둔다.
   로드 순서: base.css → styles.css → media.css → legal.css → guide.css
   규칙: PROJECT_RULES.md → Code Rules → CSS 코어 규칙

   목차
   1. 문서 레이아웃 (목차 + 본문 2열)
   2. 좌측 목차
   3. 섹션 카드 — 약관 문서체를 매뉴얼체로 되잡는다
   4. 전체 흐름도
   5. 필드 설명표
   6. 포털 화면 도식
   7. 보조 요소
   8. 맨 위로
   9. 반응형
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. 문서 레이아웃 — 왼쪽 목차를 고정하고 오른쪽 문서만 흐르게 한다
   -------------------------------------------------------------------------- */

.guide-layout {
  display: grid;
  grid-template-columns: 26rem minmax(0, 1fr);
  gap: 3.2rem;
  align-items: start;
}

/* legal.css 의 .legal-doc 은 조항 전체를 한 장의 흰 종이로 묶는다.
   가이드는 11개 절이 각각 독립한 장(章)이라 종이 대신 카드를 쌓는다. */
.guide-layout .legal-doc {
  gap: 2rem;
  border: none;
  padding: 0;
  background: none;
  box-shadow: none;
}

/* -----------------------------------------------------------------------------
   2. 좌측 목차 — 문서가 길어 현재 위치와 남은 분량이 보여야 한다
   -------------------------------------------------------------------------- */

.guide-toc {
  position: sticky;
  /* 헤더(7.3rem) + 문서 바(6rem) 아래에 붙되 한 줄 여유를 둔다 */
  top: 15rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 2rem 1.4rem;
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.guide-toc__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.2rem;
  padding-left: 0.8rem;
}

.guide-toc__label {
  margin: 0;
  color: var(--muted);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* 시트를 닫는 버튼 — 데스크톱 사이드바에는 닫을 것이 없다 */
.guide-toc__close {
  display: none;
  align-items: center;
  justify-content: center;
  width: 3.6rem;
  height: 3.6rem;
  border: none;
  border-radius: 999px;
  background: var(--surface);
  color: var(--body);
  cursor: pointer;
}

.guide-toc__list {
  display: grid;
  gap: 0.2rem;
}

.guide-toc__list a {
  display: flex;
  align-items: center;
  gap: 1rem;
  border-radius: 0.8rem;
  padding: 0.75rem 1rem;
  color: var(--body);
  font-size: 1.45rem;
  line-height: 1.35;
  word-break: keep-all;
  transition: background .15s var(--ease), color .15s var(--ease);
}

.guide-toc__list a:hover {
  background: var(--green-50);
  color: var(--green-700);
}

/* 현재 읽고 있는 절 — 9,000px 짜리 문서에서 위치를 잃지 않게 한다 */
.guide-toc__list .is-current {
  background: var(--green-50);
  color: var(--green-700);
  font-weight: 700;
}

.guide-toc__list b {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 0.6rem;
  background: var(--surface);
  color: var(--muted);
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.guide-toc__list .is-current b {
  background: var(--green);
  color: var(--white);
}

/* -----------------------------------------------------------------------------
   3. 섹션 카드 — 약관 문서체를 매뉴얼체로 되잡는다
   -------------------------------------------------------------------------- */

.guide-layout .legal-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 3.2rem 3.6rem 3.6rem;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  scroll-margin-top: 11rem;
}

/* 도입부 카드는 제목줄이 없어 아래 여백만 본문 카드와 다르게 둔다 */
.guide-layout .legal-card--intro {
  padding: 3.2rem 3.6rem;
}

/* 제목과 본문 사이를 선으로 끊어 절의 시작을 눈에 보이게 만든다 */
.guide-layout .legal-card__head {
  align-items: center;
  margin-bottom: 2.4rem;
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 1.8rem;
}

.guide-layout .legal-card__num {
  min-width: 3.4rem;
  height: 3.4rem;
  background: var(--green);
  color: var(--white);
  font-size: 1.5rem;
}

.guide-layout .legal-card__title {
  padding-top: 0;
  font-size: 2.2rem;
}

/* 한 줄이 길면 눈이 다음 줄 첫 글자를 놓친다. 표·도식은 폭을 줄이지 않는다. */
.guide-layout .legal-card p,
.guide-layout .legal-list {
  max-width: 78rem;
}

/* 설명 문단 없이 표로 바로 시작하는 절(내 정보·자주 막히는 지점) — 제목선과 표가 뜬다 */
.guide-layout .legal-card__head + .guide-fields {
  margin-top: 0;
}

/* legal.css 의 .legal-card p 에는 여백이 없다 — 약관은 카드 하나에 문단이 하나였다.
   가이드는 한 카드 안에서 설명·표·목록이 이어지므로 뒤따르는 문단만 띄운다. */
.guide-layout .legal-card p + p,
.guide-layout .legal-card ul + p,
.guide-layout .legal-card ol + p,
.guide-layout .legal-card table + p {
  margin-top: 1.6rem;
}

/* -----------------------------------------------------------------------------
   4. 전체 흐름도 — 가입부터 리포트까지 몇 단계인지 먼저 보여준다
   -------------------------------------------------------------------------- */

.guide-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem;
  margin: 2.4rem 0 0;
}

.guide-flow li {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.8rem 1.8rem 1.8rem 2.2rem;
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

/* 단계임을 왼쪽 색 띠로 표시한다 — 카드 6장이 같은 무게로 흩어지는 것을 막는다 */
.guide-flow li::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0.4rem;
  background: var(--green);
}

.guide-flow b {
  display: block;
  color: var(--green-700);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: .06em;
}

.guide-flow span {
  display: block;
  margin-top: 0.5rem;
  color: var(--ink);
  font-size: 1.6rem;
  font-weight: 700;
}

.guide-flow small {
  display: block;
  margin-top: 0.6rem;
  color: var(--muted);
  font-size: 1.35rem;
  line-height: 1.6;
  word-break: keep-all;
}

/* 광고주가 직접 하지 않는 단계 — 기다리는 구간임을 배경과 띠 색으로 구분한다 */
.guide-flow .guide-flow__ours {
  border-style: dashed;
  background: var(--surface);
  box-shadow: none;
}

.guide-flow .guide-flow__ours::before {
  background: #cfd6e0;
}

.guide-flow .guide-flow__ours b {
  color: var(--muted);
}

/* -----------------------------------------------------------------------------
   5. 필드 설명표 — 화면의 입력 항목과 설명을 1:1 로 맞춘다
   -------------------------------------------------------------------------- */

/* 표를 한 덩어리 면으로 세워 본문 문단과 구분한다.
   문단이 이어지는 흐름 위에 표가 그냥 놓이면 어디까지가 목록인지 보이지 않는다. */
.guide-fields {
  width: 100%;
  margin: 1.8rem 0 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  border-collapse: separate;
  border-spacing: 0;
  background: var(--white);
  font-size: 1.5rem;
  text-align: left;
  overflow: hidden;
}

.guide-fields th {
  width: 20rem;
  border-top: 1px solid var(--line-soft);
  padding: 1.3rem 1.8rem;
  background: var(--surface);
  color: var(--ink);
  font-weight: 700;
  line-height: 1.55;
  vertical-align: top;
  word-break: keep-all;
}

.guide-fields td {
  border-top: 1px solid var(--line-soft);
  padding: 1.3rem 2rem;
  color: var(--body);
  line-height: 1.7;
  vertical-align: top;
  word-break: keep-all;
}

.guide-fields tr:first-child th,
.guide-fields tr:first-child td {
  border-top: none;
}

/* 광고주 포털 화면 도식.
   실제 화면(admin.css 의 .advertiser-sidebar)의 색과 배치를 그대로 따른다 —
   사이드바는 흰색이고 현재 메뉴만 파란 박스다. 캡처 대신 구조만 그린다. */
.guide-screen {
  display: grid;
  grid-template-columns: 17rem minmax(0, 1fr);
  overflow: hidden;
  margin: 2rem 0 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.guide-screen__side {
  border-right: 1px solid var(--line);
  padding: 1.4rem 1.2rem;
  background: #fff;
}

.guide-screen__brand {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1.6rem;
  padding: 0 0.4rem;
  color: #1b2436;
  font-size: 1.35rem;
  font-weight: 800;
}

.guide-screen__brand::before {
  content: "";
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  background: var(--green);
}

.guide-screen__menu {
  display: grid;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.guide-screen__menu li {
  display: flex;
  align-items: center;
  border-radius: 0.7rem;
  padding: 0.85rem 1.1rem;
  color: #3d4759;
  font-size: 1.3rem;
}

.guide-screen__menu .guide-screen__active {
  background: #3a5bd9;
  color: #fff;
  font-weight: 700;
}

/* 사이드바 아래의 계정 블록 */
.guide-screen__account {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 1.6rem;
  border-top: 1px solid var(--line);
  padding: 1.2rem 0.4rem 0;
  color: var(--muted);
  font-size: 1.2rem;
}

.guide-screen__account::before {
  content: "";
  flex: 0 0 2rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--surface);
}

.guide-screen__main {
  padding: 1.8rem 2rem;
  background: var(--surface);
}

.guide-screen__title {
  margin: 0 0 1.4rem;
  color: var(--ink);
  font-size: 1.7rem;
  font-weight: 800;
}

/* 본문의 흰 카드 — 대시보드는 계정 정보 한 장이다 */
.guide-screen__panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem 1.8rem;
  background: var(--white);
}

.guide-screen__panel > b {
  display: block;
  margin-bottom: 1.2rem;
  color: var(--ink);
  font-size: 1.45rem;
  font-weight: 700;
}

.guide-screen__rows {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.guide-screen__rows li {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: 1.2rem;
  align-items: center;
  border-top: 1px solid var(--line-soft);
  padding: 1rem 0;
  font-size: 1.3rem;
}

.guide-screen__rows li:first-child {
  border-top: none;
}

.guide-screen__rows b {
  color: var(--muted);
  font-weight: 600;
}

.guide-screen__rows span {
  color: var(--body);
}

.guide-screen__chip {
  justify-self: start;
  border-radius: 999px;
  padding: 0.2rem 0.9rem;
  background: #eef1fb;
  color: #4a5a8a;
  font-size: 1.2rem;
  font-weight: 700;
}

/* .legal-card p 보다 한 단계 강하게 걸어야 본문 크기에 눌리지 않는다 */
.legal-card .guide-screen__caption {
  margin: 1.2rem 0 0;
  color: var(--muted);
  font-size: 1.35rem;
}

/* -----------------------------------------------------------------------------
   7. 보조 요소
   -------------------------------------------------------------------------- */

/* 한 항목 안에서 화면의 입력 구획을 나누는 소제목.
   legal.css 의 .legal-clause__title 은 .legal-card p 에 밀려 본문 크기로 눌린다. */
.guide-subhead {
  margin: 3.2rem 0 0;
  border-left: 0.3rem solid var(--green);
  padding-left: 1.2rem;
  color: var(--ink);
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -.015em;
  word-break: keep-all;
}

/* 소제목 바로 뒤 문단은 소제목에 딸린 설명이라 간격을 좁힌다 */
.guide-layout .guide-subhead + p {
  margin-top: 1rem;
}

/* 특정 계정에만 보이는 메뉴 표시 */
.guide-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 0.6rem;
  border-radius: 999px;
  padding: 0.2rem 0.8rem;
  background: var(--green-50);
  color: var(--green-700);
  font-size: 1.2rem;
  font-weight: 700;
  vertical-align: middle;
}

/* legal.css 는 카드 제목 안의 span 을 제목 위 라벨(블록)로 쓴다 — 뱃지만 한 줄에 되돌린다 */
.legal-card__title .guide-badge {
  display: inline-flex;
  margin-bottom: 0;
  font-size: 1.2rem;
  letter-spacing: normal;
}

/* 화면에 그대로 적힌 버튼·메뉴 이름 */
.guide-ui {
  display: inline-block;
  margin: 0 0.25rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  padding: 0.1rem 0.6rem;
  background: var(--surface);
  color: var(--ink);
  font-size: .94em;
  font-weight: 700;
  /* 줄 높이를 넘기면 문단 줄 간격이 밀려 글자와 붙어 보인다 */
  line-height: 1.5;
  vertical-align: baseline;
  white-space: nowrap;
}

/* -----------------------------------------------------------------------------
   8. 떠 있는 도구 — 본문이 8,000px 를 넘어 스크롤로 되돌아가기 어렵다
   -------------------------------------------------------------------------- */

.guide-tools {
  position: fixed;
  right: 2.4rem;
  bottom: 2.4rem;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.8rem;
}

.guide-tool {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1rem 1.6rem;
  background: var(--white);
  color: var(--body);
  font-size: 1.35rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(16, 24, 40, .12);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s var(--ease);
}

.guide-tool:hover {
  border-color: var(--green);
  color: var(--green-700);
}

/* 「맨 위로」는 첫 화면을 벗어난 뒤에만 쓸모가 있다 */
.guide-tool--top {
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.8rem);
}

.guide-tool--top.is-shown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* 목차 시트는 좌측 사이드바가 사라지는 좁은 화면에서만 필요하다 */
.guide-tool--menu {
  display: none;
}

.guide-scrim {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(16, 24, 40, .45);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s var(--ease), visibility .2s var(--ease);
}

.guide-scrim.is-shown {
  opacity: 1;
  visibility: visible;
}

/* -----------------------------------------------------------------------------
   9. 반응형
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .guide-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }

  /* 좁은 화면에서는 목차를 문서 맨 위 카드가 아니라 아래에서 올라오는 시트로 쓴다.
     12행짜리 카드가 첫 화면을 통째로 차지하고, 정작 본문을 읽다 다른 절로 가려면
     맨 위까지 되돌아가야 했다. 목록은 한 벌뿐이라 현재 절 표시도 그대로 따라온다. */
  .guide-toc {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 55;
    /* 12개 절이 한 화면에 다 들어가는 높이. 더 짧은 기기에서는 시트 안이 스크롤된다. */
    max-height: 80vh;
    overflow-y: auto;
    border: none;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: 1.6rem 1.6rem calc(2.4rem + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -8px 30px rgba(16, 24, 40, .18);
    visibility: hidden;
    transform: translateY(100%);
    transition: transform .24s var(--ease), visibility .24s var(--ease);
  }

  .guide-toc.is-open {
    visibility: visible;
    transform: translateY(0);
  }

  .guide-toc__head {
    padding-left: 1rem;
  }

  .guide-toc__close {
    display: inline-flex;
  }

  /* 손가락 목표를 48px 로 — 사이드바 시절 39px 은 눌러 맞히기 어렵다 */
  .guide-toc__list a {
    min-height: 4.8rem;
    padding: 0.9rem 1rem;
    font-size: 1.55rem;
  }

  .guide-tool--menu {
    display: inline-flex;
  }

  .guide-layout .legal-card {
    padding: 2.8rem;
  }

  .guide-layout .legal-card--intro {
    padding: 2.8rem;
  }
}

@media (max-width: 900px) {
  .guide-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .guide-screen {
    grid-template-columns: minmax(0, 1fr);
  }

  .guide-screen__menu {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .guide-screen__cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .guide-fields th {
    width: 16rem;
  }
}

@media (max-width: 640px) {
  .guide-screen__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .guide-flow {
    grid-template-columns: minmax(0, 1fr);
  }

  .guide-layout .legal-card {
    padding: 2.2rem 1.8rem 2.4rem;
  }

  .guide-layout .legal-card--intro {
    padding: 2.2rem 1.8rem;
  }

  .guide-layout .legal-card__head {
    margin-bottom: 1.8rem;
    padding-bottom: 1.4rem;
  }

  .guide-subhead {
    margin-top: 2.6rem;
  }

  /* 표를 좌우로 밀지 않고 라벨을 값 위로 올린다 */
  .guide-fields th,
  .guide-fields td {
    display: block;
    width: auto;
  }

  .guide-fields th {
    border-top: 1px solid var(--line-soft);
    padding: 1.1rem 1.6rem 0.9rem;
  }

  .guide-fields td {
    border-top: none;
    padding: 0 1.6rem 1.4rem;
  }

  .guide-screen__menu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* iOS 홈 인디케이터에 버튼이 물리지 않게 띄운다 */
  .guide-tools {
    right: 1.6rem;
    bottom: calc(1.6rem + env(safe-area-inset-bottom, 0px));
  }

  .guide-tool {
    padding: 0.9rem 1.4rem;
  }
}

/* -----------------------------------------------------------------------------
   10. 문서 바 — 시작 가이드 / 영상 / 활용 팁 세 문서를 오가는 서브 내비
   -------------------------------------------------------------------------- */

/* 헤더 바로 아래에 붙인다. 헤더는 스크롤해도 높이가 변하지 않고 테두리만 생기므로
   실측값 73px = min-height 7.2rem + 아래 테두리 1px 을 그대로 쓴다. */
.guide-docbar {
  position: sticky;
  top: calc(7.2rem + 1px);
  z-index: 20;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(1.2rem);
}

.guide-docbar__inner {
  display: flex;
  gap: 3.2rem;
}

.guide-docbar__item {
  position: relative;
  padding: 1.7rem 0;
  color: var(--muted);
  font-size: 1.5rem;
  font-weight: 600;
  white-space: nowrap;
  transition: color .15s var(--ease);
}

.guide-docbar__item:hover {
  color: var(--green-700);
}

.guide-docbar__item.is-current {
  color: var(--ink);
  font-weight: 800;
}

/* 밑줄이 바의 아래 테두리를 덮어 현재 문서를 가리킨다. */
.guide-docbar__item.is-current::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: var(--green);
}

/* 히어로의 메타는 알약을 벗긴다 — 바로 아래 문서 바와 둥근 조각이 두 줄 겹쳐 보인다.
   legal.css 의 알약은 privacy·terms 등 다른 문서가 그대로 쓰므로 가이드에서만 덮는다. */
.legal-hero--guide .legal-hero__meta {
  gap: 0 2.4rem;
}

.legal-hero--guide .legal-hero__meta li {
  border: none;
  padding: 0.4rem 0;
  background: none;
  color: var(--muted);
  font-size: 1.35rem;
}

/* -----------------------------------------------------------------------------
   11. 활용 팁 — 링크를 어디에 어떻게 거는지 보여주는 요소들

/* 두 방법 중 무엇을 쓸지 고르는 카드. 카드 자체가 선택지라 클릭 가능해 보이면 안 된다. */
.tip-pick {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem;
  margin: 2rem 0 0;
}

.tip-pick__item b {
  display: block;
  margin-bottom: 0.6rem;
  color: var(--ink);
  font-size: 1.55rem;
  font-weight: 700;
}

.tip-pick__item > span {
  display: block;
  color: var(--body);
  font-size: 1.4rem;
  line-height: 1.6;
  word-break: keep-all;
}

.tip-pick__tag {
  display: inline-flex;
  margin-bottom: 1.2rem;
  border-radius: 999px;
  padding: 0.4rem 1rem;
  background: var(--green-50);
  color: var(--green-700);
  font-size: 1.2rem;
  font-weight: 700;
}

/* 동작 환경표. '안 되는 환경' 을 숨기지 않고 같은 표에 둔다. */
.tip-env b {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 999px;
  padding: 0.35rem 1rem;
  font-size: 1.25rem;
  font-weight: 700;
  white-space: nowrap;
}

.tip-env .is-best {
  background: var(--green-50);
  color: var(--green-700);
}

.tip-env .is-ok {
  background: #eef3fb;
  color: #3f6ea8;
}

.tip-env .is-no {
  background: #fdeeee;
  color: #c0453f;
}

/* 블로그·메신저에 링크를 붙였을 때 생기는 링크 카드의 모양.
   본문 글과 섞이면 "예시"인지 알 수 없어, 캡션을 단 판 위에 얹는다. */
.tip-preview {
  margin: 1.6rem 0;
}

.tip-preview__cap {
  display: block;
  margin-bottom: 1rem;
  color: var(--muted);
  font-size: 1.3rem;
}

/* og:image 가 있으면 이미지가 위에 깔리는 세로형 카드가 된다(실제 확인 2026-09-15).
   이미지가 없을 때만 파비콘 옆에 글이 붙는 작은 가로형이 된다. */
.tip-preview__card {
  overflow: hidden;
  border: 1px solid #dfe4ea;
  border-radius: 0.6rem;
  background: #fff;
}

.tip-preview__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  height: 11rem;
  background: #eef1f5;
  color: var(--muted);
  font-size: 1.3rem;
  font-weight: 700;
}

.tip-preview__thumb::before {
  content: "";
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 0.5rem;
  background: var(--green);
}

.tip-preview__body {
  border-top: 1px solid #eef1f5;
  padding: 1.2rem 1.4rem;
}

.tip-preview__body b {
  display: block;
  color: var(--ink);
  font-size: 1.4rem;
  font-weight: 700;
}

.tip-preview__body span {
  display: block;
  margin-top: 0.4rem;
  color: var(--muted);
  font-size: 1.3rem;
  line-height: 1.5;
}

.tip-preview__body i {
  display: block;
  margin-top: 0.6rem;
  color: var(--green-700);
  font-size: 1.25rem;
  font-style: normal;
}

/* -----------------------------------------------------------------------------
   12. 영상 — 재생 영역과 장면 목록
   -------------------------------------------------------------------------- */

.video-stage {
  overflow: hidden;
  margin: 0 0 2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #0d1117;
  box-shadow: var(--shadow-card);
}

.video-stage video,
.video-stage iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: none;
}

/* 세로 촬영본(모바일 화면 녹화)은 가로를 다 채우면 과하게 커진다. */
.video-stage--portrait {
  width: min(32rem, 100%);
  margin-inline: auto;
}

.video-stage--portrait video,
.video-stage--portrait iframe {
  aspect-ratio: 9 / 16;
}

.video-clips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.6rem;
  margin: 2rem 0 0;
}

.video-clips figure {
  margin: 0;
}

.video-clips__frame {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 9 / 16;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--muted);
  font-size: 1.3rem;
  text-align: center;
}

.video-clips figcaption {
  margin-top: 0.9rem;
  color: var(--body);
  font-size: 1.4rem;
  line-height: 1.5;
  word-break: keep-all;
}

/* -----------------------------------------------------------------------------
   13. 반응형 — 10~12 절
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
  .tip-pick,
  .video-clips {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 헤더가 6.4rem 으로 줄어든다(media.css). 바가 헤더에 물리지 않게 기준을 맞춘다. */
@media (max-width: 840px) {
  .guide-docbar {
    top: calc(6.4rem + 1px);
  }
}

@media (max-width: 640px) {
  /* 문서 3개가 한 줄에 안 들어가면 줄바꿈 대신 가로 스크롤로 한 줄을 유지한다. */
  .guide-docbar__inner {
    gap: 2.2rem;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .guide-docbar__inner::-webkit-scrollbar {
    display: none;
  }

  .guide-docbar__item {
    font-size: 1.4rem;
  }
}

/* 영상 파일이 준비되기 전 자리를 잡아 두는 판. 파일을 넣으면 이 블록째 지운다. */
.video-stage__hold {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 9 / 16;
  padding: 2rem;
  color: #8a94a6;
  font-size: 1.4rem;
  text-align: center;
}

/* -----------------------------------------------------------------------------
   14. 화면 재현 — 안내카드가 실제로 어떻게 보이는지 그대로 보여준다
   -------------------------------------------------------------------------- */

/* 임베드가 그리는 카드(embed_src/src/ui-renderer.ts 의 STYLES)를 옮겨 온 것이라
   이 절만 px 을 쓴다. rem 으로 환산하면 실제 화면과 크기가 어긋난다. */
.mock {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 340px;
  max-width: 100%;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--white);
  box-shadow: var(--shadow-card);
  /* 옆의 설명 글이 길어도 화면이 따라 늘어나지 않게 한다 */
  align-self: start;
}

.mock__bar {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  background: #f2f4f6;
  color: #9aa3ad;
  font-size: 11px;
}

.mock__body {
  /* 카드를 절대배치하면 카드가 커질 때 화면 밖으로 넘친다.
     흐름에 두고 위쪽 여백을 밀어 아래에 붙인다. */
  display: flex;
  flex-direction: column;
  min-height: 430px;
  padding: 14px 12px 0;
  /* 광고주 페이지 자리는 빈 회색으로 둔다 — 가짜 콘텐츠를 그리면
     "저 배경까지 만들어 주느냐"는 오해를 산다(영업 현장 문의). */
  background: #f0f2f5;
}

/* 안내카드 — 화면 아래에 붙어 올라온다.
   아래 값은 embed_src/src/ui-renderer.ts 의 STYLES 를 그대로 옮긴 것이다.
   임의로 바꾸면 실제 노출과 어긋나므로 원본이 바뀔 때만 함께 고친다. */
.omcard {
  position: relative;
  margin: auto -12px 0;
  padding: 18px 18px 16px;
  border-radius: 16px 16px 0 0;
  background: #fff;
  box-shadow: 0 -8px 26px rgba(0, 0, 0, .18);
  color: #111;
  text-align: left;
}

.omcard__close,
.omcard__info {
  position: absolute;
  top: 10px;
  color: #8a9099;
  line-height: 1;
}

.omcard__close {
  right: 12px;
  font-size: 20px;
}

.omcard__info {
  right: 44px;
  font-size: 16px;
}

.omcard__title {
  margin: 0 76px 8px 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}

.omcard__cap {
  margin: 0 0 12px;
  color: #444;
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
}

.omcard__cap b {
  color: #03883f;
}

/* 네이버 저장 화면을 미리 알려 주는 삽화. 실제 카드 안에 들어 있는 그림이다. */
.omcard__sheet {
  overflow: hidden;
  margin: 0 0 14px;
  border: 1px solid #e3e8ee;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}

.omcard__sheet-h {
  margin: 0;
  padding: 11px 8px 9px;
  color: #222;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

.omcard__opt {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 12px 8px;
  padding: 9px 11px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #222;
  font-size: 13px;
}

.omcard__opt.is-on {
  border-color: #9fe0b8;
  background: #eafaf0;
}

.omcard__opt.is-on .omcard__lbl {
  color: #03883f;
  font-weight: 700;
}

/* 두 항목 모두 초록 아이콘이다 — 선택 여부로 색이 달라지지 않는다 */
.omcard__ic {
  display: inline-flex;
  flex: 0 0 20px;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: #03c75a;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}

.omcard__lbl {
  flex: 1;
  min-width: 0;
}

/* 어느 항목을 고르는지 가리키는 손 모양. 실제 카드에도 들어 있다. */
.omcard__hand {
  margin: 0 4px 0 2px;
  font-size: 15px;
  line-height: 1;
}

.omcard__r {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin-left: auto;
  border: 2px solid #cfd4db;
  border-radius: 50%;
}

.omcard__opt.is-on .omcard__r {
  border-color: #03c75a;
  background: radial-gradient(#03c75a 42%, #fff 46%);
}

.omcard__save {
  border-top: 1px solid #eef1f5;
  margin-top: 2px;
  padding: 9px;
  color: #03883f;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.omcard__actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.omcard__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 8px;
  background: #f2f4f6;
  color: #333;
  font-size: 13px;
}

/* 네이버가 그리는 공식 버튼(openmainBtn.js, 기본 W2). 흰 바탕에 초록 아이콘이다. */
.nvbtn {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 10px;
  border: 1px solid #e3e8ee;
  border-radius: 6px;
  background: #fff;
}

.nvbtn__ic {
  display: inline-flex;
  flex: 0 0 22px;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: #03c75a;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

.nvbtn__txt {
  flex: 1;
  color: #222;
  font-size: 13px;
  text-align: center;
  white-space: nowrap;
}

.nvbtn__txt b {
  color: #03c75a;
  font-weight: 800;
}
/* 히어로의 소개서 내려받기. 메타 줄 아래에 한 칸 띄워 둔다. */
.guide-hero__actions {
  margin-top: 2rem;
}

/* 본문 안의 메일 복사 버튼은 문단 글자 크기에 맞춘다(푸터 것은 더 작다). */
.guide-contact .copy-mail {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink);
  vertical-align: -0.1rem;
}

/* 선택 카드 안의 예시 주소. 별도 박스로 빼면 "방법 1" 배지가 두 번 나온다. */
.tip-pick__url {
  display: block;
  margin-top: 1.2rem;
  color: var(--ink);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.5;
  word-break: break-all;
}

.tip-pick__url b {
  color: var(--green-700);
  font-weight: 800;
}

/* 줄 끝에서 문장이 어색하게 끊기는 것만 브라우저가 조정하게 둔다.
   <br> 로 문장마다 강제 개행하면 짧은 문장이 한 줄씩 차지해 문서가 비어 보인다. */
.legal-doc p,
.legal-doc li,
.legal-doc td {
  text-wrap: pretty;
}

/* -----------------------------------------------------------------------------
   17. 블록 규격 — 외형은 여기서만 정한다
   컴포넌트별 규칙에는 레이아웃(grid/flex/gap)만 남긴다. 외형을 각자 적으면
   패딩·테두리가 조금씩 어긋나 같은 화면에서 다른 물건처럼 보인다.
   -------------------------------------------------------------------------- */

/* 흰 카드 — 설명 블록·따라하기 단계·주소 규칙·선택 카드 */
.callouts > li,
.howto > li,
.urlrule__row,
.tip-pick__item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem 1.8rem;
  background: var(--white);
}

/* 번호를 다는 블록은 왼쪽을 비워 둔다 */
.howto > li {
  padding-left: 5.4rem;
}

/* 회색 예시 상자 — 주소·링크 카드 미리보기 */

.tip-pick__url,
.tip-preview {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem 1.6rem;
  background: var(--surface);
}

/* 번호 원 */
.callouts > li::before,
.howto > li::before,
.scene__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--green);
  color: var(--white);
  font-size: 1.3rem;
  font-weight: 800;
}

/* 문장 단위 줄바꿈. 줄 끝에 문장이 다 안 들어가면 문장째 다음 줄로 내려간다 —
   <br> 과 달리 자리가 남으면 같은 줄에 그대로 이어 붙는다. */
.sn {
  display: inline-block;
}

/* 히어로 — 제목 왼쪽, 소개서 버튼 오른쪽.
   버튼을 제목 아래에 두면 넓은 화면에서 오른쪽이 통째로 비어 보인다.
   legal-hero 는 privacy·terms 와 공유하므로 가이드 전용 modifier 에만 건다. */
@media (min-width: 861px) {
  .legal-hero--guide .section-head {
    /* 기본 82rem 제한 때문에 right:0 이 컨테이너 오른쪽 끝에 닿지 않는다 */
    max-width: none;
    position: relative;
    padding-right: 22rem;
  }

  .legal-hero--guide .guide-hero__actions {
    position: absolute;
    right: 0;
    bottom: 0.4rem;
    margin: 0;
  }
}

/* 카드의 보조 버튼(닫기) — 주 버튼은 네이버가 그리는 .nvbtn 이다 */
.omcard__btn--sub {
  flex: 0 0 62px;
}

/* 화면과 설명을 나란히 둔다 */
.showcase {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: 2.8rem;
  align-items: start;
  margin: 2rem 0 0;
}

/* 방법 1 / 방법 2 배지. 카드(흰 배경)·소제목·콜아웃(연초록 배경) 어디에나 들어가므로
   바탕을 흰색으로 고정하고 테두리로 구분한다 — 배경색이 같아 사라지는 일이 없다. */
.mtag {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.2rem 0.9rem;
  background: var(--white);
  font-size: 1.3rem;
  font-weight: 800;
  white-space: nowrap;
}

.mtag--1 {
  box-shadow: inset 0 0 0 1px #b6e3c9;
  color: var(--green-700);
}

.mtag--2 {
  box-shadow: inset 0 0 0 1px #c3d6ee;
  color: #3f6ea8;
}

.tip-pick__item b .mtag,
.guide-subhead .mtag,
.legal-callout__title .mtag {
  display: inline-flex;
  margin-right: 0.6rem;
}

p .mtag {
  margin: 0 0.2rem;
}

/* 주소 뒤에 표시를 붙이는 규칙 — ? 와 & 를 헷갈리는 일이 가장 잦다 */
.urlrule {
  display: grid;
  gap: 1rem;
  margin: 1.6rem 0 0;
}

.urlrule__when {
  color: var(--muted);
  font-size: 1.35rem;
  font-weight: 700;
  word-break: keep-all;
}

.urlrule__url {
  color: var(--ink);
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1.6;
  word-break: break-all;
}

.urlrule__url b {
  border-radius: 0.4rem;
  padding: 0.1rem 0.4rem;
  background: var(--green-50);
  color: var(--green-700);
  font-weight: 800;
}

/* 올리기 전에 짚는 목록 */
.checklist {
  display: grid;
  gap: 1rem;
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
}

.checklist li {
  position: relative;
  padding-left: 3.2rem;
  color: var(--body);
  font-size: 1.45rem;
  line-height: 1.65;
  word-break: keep-all;
}

/* 체크 표식은 두 변만 남긴 사각형을 기울여 그린다 */
.checklist li::before {
  content: "";
  position: absolute;
  top: 0.55rem;
  left: 0.65rem;
  width: 0.6rem;
  height: 1.1rem;
  border: solid var(--green-700);
  border-width: 0 0.25rem 0.25rem 0;
  transform: rotate(45deg);
}

/* -----------------------------------------------------------------------------
   네이버 앱 메인 재현 — 추가된 아이콘이 어디에 보이는지 (영상 페이지)
   -------------------------------------------------------------------------- */

/* 네이버 화면을 그대로 옮긴 삽화라 아이콘 아래에 라벨을 둔다.
   (자사 화면에서 아이콘과 라벨을 나란히 두는 규칙과 다른 이유다.) */
.ommain {
  padding: 4px 2px 0;
}

.ommain__head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 12px;
  padding-bottom: 9px;
  border-bottom: 1px solid #eef1f5;
}

.ommain__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: #03c75a;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

.ommain__search {
  flex: 1;
  height: 20px;
  border-radius: 999px;
  background: #f2f4f6;
}

.ommain__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ommain__grid li {
  text-align: center;
}

.ommain__ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin: 0 auto 5px;
  border-radius: 11px;
  background: #eef1f5;
  color: #aab2bd;
  font-size: 13px;
  font-weight: 800;
}

.ommain__grid b {
  display: block;
  color: #6b7688;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.3;
}

/* 이번에 추가된 아이콘 — 어디에 생기는지 한눈에 보이게 표시한다 */
.ommain__grid .is-new .ommain__ic {
  background: #03c75a;
  color: #fff;
  box-shadow: 0 0 0 3px rgba(3, 199, 90, .18);
}

.ommain__grid .is-new b {
  color: #03883f;
  font-weight: 800;
}

/* 장면마다 화면 하나와 설명 하나를 나란히 둔다 (영상 페이지) */
.scene {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 2.6rem;
  align-items: start;
  margin: 1.6rem 0 0;
  border-top: 1px solid var(--line-soft);
  padding-top: 2.4rem;
}

.scene:first-of-type {
  border-top: none;
  padding-top: 0;
}

.scene .mock {
  width: 300px;
}

.scene .mock__body {
  min-height: 380px;
}

.scene__step {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1rem;
}

.scene__time {
  border-radius: 0.5rem;
  padding: 0.25rem 0.7rem;
  background: var(--surface);
  color: var(--muted);
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.scene__body h3 {
  margin: 0 0 0.8rem;
  color: var(--ink);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -.02em;
}

.scene__body p {
  margin: 0 0 1.2rem;
  color: var(--body);
  font-size: 1.5rem;
  line-height: 1.7;
  word-break: keep-all;
}

.scene__body p:last-child {
  margin-bottom: 0;
}

/* 그 장면에서 놓치기 쉬운 한 줄 */
.scene__hint {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  border-radius: var(--radius);
  padding: 1.2rem 1.4rem;
  background: var(--green-50);
  color: var(--green-700);
  font-size: 1.4rem;
  line-height: 1.6;
  word-break: keep-all;
}

.scene__hint b {
  font-weight: 800;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .showcase,
  .scene {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }

  .urlrule__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.6rem;
  }
}

/* -----------------------------------------------------------------------------
   18. 절 성격 구분 — 같은 블록만 반복되면 눈에 들어오지 않는다
   조작 순서는 .howto(번호), 자리 안내는 .spots(용어+설명), 비교는 표를 쓴다.
   -------------------------------------------------------------------------- */

/* 절 제목 옆의 채널 표시. 어느 채널 이야기인지 스크롤 중에도 잡히게 한다. */
.ch-tag {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  border-radius: 999px;
  padding: 0.3rem 1rem;
  background: var(--surface);
  color: var(--muted);
  font-size: 1.25rem;
  font-weight: 700;
  white-space: nowrap;
}

.ch-tag--naver {
  background: var(--green-50);
  color: var(--green-700);
}

/* 자리 안내 — 어디에 넣을 수 있는지. 순서가 없으므로 번호를 쓰지 않는다. */
.spots {
  display: grid;
  gap: 1.2rem;
  margin: 1.8rem 0 0;
  padding: 0;
  list-style: none;
}

.spots > li {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: 1.6rem;
  align-items: baseline;
  border-left: 3px solid var(--green-50);
  padding: 0.2rem 0 0.2rem 1.6rem;
}

.spots b {
  color: var(--ink);
  font-size: 1.5rem;
  font-weight: 700;
  word-break: keep-all;
}

.spots span {
  color: var(--body);
  font-size: 1.45rem;
  line-height: 1.65;
  word-break: keep-all;
}

@media (max-width: 720px) {
  .spots > li {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.4rem;
  }
}

/* -----------------------------------------------------------------------------
   19. 번호 블록 본체 — 외형은 17절, 여기서는 배치와 번호만 정한다
   -------------------------------------------------------------------------- */

/* 화면 옆 설명 — 그림과 범례처럼 짝을 이룬다 */
.callouts {
  counter-reset: callout;
  display: grid;
  gap: 1.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.callouts > li {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: 1.4rem;
  align-items: start;
}

.callouts > li::before {
  counter-increment: callout;
  content: counter(callout);
}

.callouts b {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--ink);
  font-size: 1.5rem;
}

.callouts p {
  margin: 0;
  color: var(--body);
  font-size: 1.45rem;
  line-height: 1.65;
  word-break: keep-all;
}

/* 따라하기 — 번호는 왼쪽 여백 자리에 절대배치한다 */
.howto {
  counter-reset: howto;
  display: grid;
  gap: 1.4rem;
  margin: 1.8rem 0 0;
  padding: 0;
  list-style: none;
}

.howto > li {
  position: relative;
}

.howto > li::before {
  counter-increment: howto;
  content: counter(howto);
  position: absolute;
  top: 1.6rem;
  left: 1.8rem;
}

.howto b {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--ink);
  font-size: 1.5rem;
}

.howto p {
  margin: 0;
  color: var(--body);
  font-size: 1.45rem;
  line-height: 1.65;
  word-break: keep-all;
}

.howto p + p {
  margin-top: 0.8rem;
}

/* 본문 속 코드 조각(주소·파라미터·경로). 버튼명을 나타내는 .guide-ui 와 같은
   상자 형태를 쓰되, 등폭 글꼴과 글자색으로 성격을 구분한다. */
.guide-layout .legal-card code,
.guide-layout .legal-card p code,
.howto code,
.spots code {
  display: inline-block;
  margin: 0 0.15rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  padding: 0.05rem 0.55rem;
  background: var(--surface);
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: .9em;
  font-weight: 600;
  line-height: 1.5;
  vertical-align: baseline;
  white-space: nowrap;
}

/* 카드 안의 예시 주소는 상자가 이미 있으므로 테두리를 겹치지 않는다 */
.guide-layout .legal-card code.tip-pick__url {
  display: block;
  margin: 1.2rem 0 0;
  border: none;
  padding: 1.4rem 1.6rem;
  white-space: normal;
}

/* -----------------------------------------------------------------------------
   20. 여백 — 블록이 서로 붙어 보이지 않게 한 단계 키운다
   -------------------------------------------------------------------------- */

.spots {
  gap: 1.6rem;
}

/* 문단 뒤에 블록이 바로 오면 숨 쉴 자리를 준다 */
.guide-layout .legal-card p + .howto,
.guide-layout .legal-card p + .spots,
.guide-layout .legal-card p + .checklist,
.guide-layout .legal-card p + .urlrule,
.guide-layout .legal-card p + .tip-pick,
.guide-layout .legal-card p + .showcase {
  margin-top: 2rem;
}

/* 블록 뒤에 문단이 오는 경우도 마찬가지 */
.guide-layout .legal-card .howto + p,
.guide-layout .legal-card .spots + p,
.guide-layout .legal-card .urlrule + p,
.guide-layout .legal-card .tip-pick + p,
.guide-layout .legal-card .guide-fields + p {
  margin-top: 2rem;
}

/* 소제목은 위 블록과 확실히 떨어뜨린다 */
.guide-layout .legal-card .guide-subhead {
  margin-top: 3.2rem;
}

.guide-layout .legal-card .legal-card__head + .guide-subhead {
  margin-top: 0;
}


/* -----------------------------------------------------------------------------
   21. 단계 안의 실제 화면 캡처
   캡처를 설명 아래에 두면 옆이 통째로 비고 세로만 길어진다. 설명과 나란히 놓되
   작게 싣고, 안의 글씨를 읽어야 할 때는 눌러 키운다.
   -------------------------------------------------------------------------- */

.howto > li.has-shot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 30rem);
  gap: 2.4rem;
  align-items: start;
}

.howto__shot {
  display: block;
  /* 오른쪽 끝에 붙인다 — 칸 안에서 왼쪽 정렬하면 바깥쪽에 빈 띠가 남는다 */
  justify-self: end;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  background: #fff;
  cursor: zoom-in;
  transition: box-shadow .15s var(--ease), border-color .15s var(--ease);
}

.howto__shot:hover,
.howto__shot:focus-visible {
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-50);
  outline: none;
}

/* 아이콘처럼 작은 캡처는 원본 크기로 둔다 — 늘리면 뭉갠다 */
/* 세로로 긴 캡처는 같은 폭이어도 훨씬 길어 옆이 빈다. 더 줄인다. */
.howto__shot--tall {
  max-width: 21rem;
}

.howto__shot--icon {
  width: 48px;
  border-radius: 0.4rem;
  cursor: default;
}

.howto__shot--icon:hover {
  border-color: var(--line);
  box-shadow: none;
}

/* 눌러 키운 화면 */
.shotbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 2.4rem;
  background: rgba(16, 24, 40, .72);
  cursor: zoom-out;
}

.shotbox img {
  max-width: min(100%, 120rem);
  max-height: 100%;
  border-radius: 0.8rem;
  background: #fff;
  box-shadow: var(--shadow-md);
}

.shotbox__close {
  position: absolute;
  top: 1.6rem;
  right: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.4rem;
  height: 4.4rem;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  font-size: 2.2rem;
  cursor: pointer;
}

.shotbox__close:hover {
  background: rgba(255, 255, 255, .28);
}

@media (max-width: 900px) {
  .howto > li.has-shot {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.4rem;
  }

  .howto__shot {
    max-width: 30rem;
  }
}

/* -----------------------------------------------------------------------------
   22. 참고 상자 두 개를 나란히
   같은 모양이 세로로 쌓이면 읽는 리듬이 끊기고 절이 길어진다.
   -------------------------------------------------------------------------- */

.notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem;
  margin: 2rem 0 0;
}

.notes .legal-callout {
  height: 100%;
  margin: 0;
  padding: 1.6rem 1.8rem;
}

@media (max-width: 860px) {
  .notes {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* 본문 링크. legal.css 는 밑줄을 늘 켜 두고 가리키면 글자를 밝은 연두(--green)로
   바꾸는데, 어두운 초록 밑줄은 검은 줄처럼 보이고 밝은 연두는 흰 바탕에서 흐려진다.
   평소에는 색으로만 구분하고, 가리키면 밑줄이 나타나게 한다. */
.guide-layout .legal-card a {
  text-decoration: none;
  text-underline-offset: .2em;
  text-decoration-thickness: 1px;
}

.guide-layout .legal-card a:hover,
.guide-layout .legal-card a:focus-visible {
  color: var(--green-700);
  text-decoration: underline;
  text-decoration-color: currentColor;
}