@charset "UTF-8";
/* ps-guide.css — 이용 안내(/view/viewGuide.do), 대민 psView 스코프 [2026-10-12 신규].
   프리미티브(.ps-eyebrow/.ps-dot/.ps-display)는 ps-tokens.css 공용. 레이아웃은 ps-about.css 와 같은 결. */

.ps-guide section { padding-left: var(--ps-gutter); padding-right: var(--ps-gutter); }
.gd-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Hero ── */
.gd-hero { padding-top: clamp(4rem, 8vw, 8rem); padding-bottom: clamp(3rem, 6vw, 5rem); border-bottom: 1px solid var(--ps-ink); }
.gd-hero .ps-eyebrow { display: flex; align-items: center; gap: 8px; }
.gd-hero-t { margin: 24px 0 0; line-height: 0.86; letter-spacing: -0.03em; font-size: clamp(3.5rem, 1.4rem + 8vw, 9rem); }
.gd-hero-p { margin: 40px 0 0; max-width: 56ch; font-size: var(--ps-fs-lead); line-height: 1.7; color: var(--ps-mute-700); }

/* ── 공통 섹션 ── */
.gd-sec { padding-top: clamp(4rem, 7vw, 7rem); padding-bottom: clamp(4rem, 7vw, 7rem); border-bottom: 1px solid var(--ps-mute-100); }
.gd-sec-lb { margin: 0 0 24px; }
/* ps-tokens 의 .ps-scope .ps-eyebrow(0,2,0) 를 이기도록 .ps-guide 로 특이도 올림 */
.ps-guide .gd-sec-lb { margin-bottom: 15px; font-size: 15px; font-weight: 600; letter-spacing: 0.04em; }
.gd-sec-h { margin: 0 0 40px; font-size: var(--ps-fs-h3); line-height: 1.05; letter-spacing: var(--ps-tr-display); }
.gd-sec-p { margin: -16px 0 32px; color: var(--ps-mute-700); line-height: 1.7; }

/* ── 먼저 알아둘 것 3 ── */
.gd-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 48px 40px; }
@media (min-width: 900px) { .gd-facts { grid-template-columns: repeat(3, 1fr); } }
.gd-facts > li { border-top: 1px solid var(--ps-ink); padding-top: 20px; }
.gd-fact-n { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: var(--ps-tr-eyebrow); color: var(--ps-mute-500); }
.gd-fact-h { margin: 12px 0 12px; font-size: 1.375rem; line-height: 1.3; letter-spacing: -0.01em; }
.gd-fact-p { margin: 0; line-height: 1.75; color: var(--ps-mute-700); }
.gd-docs { width: 100%; border-collapse: collapse; font-size: 14px; }
.gd-docs th, .gd-docs td { text-align: left; vertical-align: top; padding: 10px 0; border-bottom: 1px solid var(--ps-mute-200); line-height: 1.5; }
.gd-docs th { width: 44%; padding-right: 12px; font-weight: 700; }
.gd-docs th span { display: block; font-weight: 400; font-size: 12px; color: var(--ps-mute-500); }

/* ── 경우 선택 탭 ── */
.gd-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 32px; }
.gd-tabs [role=tab] {
  border: 1px solid var(--ps-ink); background: var(--ps-paper); color: var(--ps-ink);
  padding: 10px 16px; font-size: 15px; font-weight: 700; cursor: pointer;
}
.gd-tabs [role=tab][aria-selected=true] { background: var(--ps-ink); color: var(--ps-paper); }
.gd-tabs [role=tab]:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 2px; }
.gd-pane-lead { margin: 0 0 28px; max-width: 70ch; line-height: 1.75; color: var(--ps-mute-700); }

/* 단계 목록 + 화면 재생기 2단 (좁으면 재생기가 위) */
.gd-flow { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 1000px) { .gd-flow { grid-template-columns: 5fr 7fr; align-items: start; } }
.gd-player { order: -1; }
@media (min-width: 1000px) { .gd-player { order: 0; position: sticky; top: calc(var(--ps-header-h) + 16px); } }

.gd-steps { list-style: none; margin: 0; padding: 0; counter-reset: gd; }
.gd-steps li {
  counter-increment: gd; position: relative; padding: 16px 12px 16px 56px; cursor: pointer;
  border-top: 1px solid var(--ps-mute-200); transition: background .2s var(--ps-ease);
}
.gd-steps li:last-child { border-bottom: 1px solid var(--ps-mute-200); }
.gd-steps li::before {
  content: counter(gd, decimal-leading-zero); position: absolute; left: 12px; top: 16px;
  font-size: 13px; font-weight: 700; color: var(--ps-mute-500);
}
.gd-steps li b { display: block; font-size: 16px; }
.gd-steps li span { display: block; margin-top: 6px; font-size: 14px; line-height: 1.65; color: var(--ps-mute-700); }
.gd-steps li span b { display: inline; font-size: inherit; }
.gd-steps li:hover { background: var(--ps-mute-50); }
.gd-steps li.is-on { background: var(--ps-mute-50); }
.gd-steps li.is-on::before { color: var(--ps-ink); }
.gd-steps li.is-on::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ps-ink); }
.gd-steps li:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: -2px; }

/* 재생기 */
.gd-frame { position: relative; width: 100%; aspect-ratio: 16 / 10; border: 1px solid var(--ps-ink); background: var(--ps-mute-50); overflow: hidden; }
.gd-frame img { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--ps-paper); animation: gdIn .35s var(--ps-ease); }
/* 이미지 실제 그려진 상자(JS 가 크기·위치를 맞춘다) — 클릭 표시의 % 기준 */
.gd-shot { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }

/* 클릭 위치 표시 [2026-10-12] — 서울 단청색 동그라미가 퍼지며 깜빡인다 + 말풍선 */
.gd-hot {
  position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; z-index: 2;
  border: 3px solid var(--ps-seoul-red); border-radius: 50%; background: rgb(229 91 64 / .18);
  box-shadow: 0 0 0 0 rgb(229 91 64 / .55); animation: gdPulse 1.6s ease-out infinite; pointer-events: none;
}
@keyframes gdPulse {
  0%   { box-shadow: 0 0 0 0 rgb(229 91 64 / .55); }
  70%  { box-shadow: 0 0 0 16px rgb(229 91 64 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(229 91 64 / 0); }
}
.gd-hot-l {
  position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
  background: var(--ps-ink); color: var(--ps-paper); font-size: 12px; font-weight: 700; line-height: 1.3;
  padding: 4px 8px; white-space: nowrap; animation: gdIn .35s var(--ps-ease) both;
}
.gd-hot.is-below .gd-hot-l { bottom: auto; top: calc(100% + 8px); }
.gd-hot.is-left .gd-hot-l { left: auto; right: 50%; transform: none; }
@media (prefers-reduced-motion: reduce) { .gd-hot { animation: none; box-shadow: 0 0 0 6px rgb(229 91 64 / .25); } }
@keyframes gdIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .gd-frame img { animation: none; } }
.gd-card { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 8%; gap: 10px; }
.gd-card-n { font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 800; line-height: 1; letter-spacing: -0.03em; }
.gd-card-t { font-size: clamp(1.125rem, 2vw, 1.5rem); font-weight: 700; }
.gd-card-s { font-size: 12px; font-weight: 700; letter-spacing: var(--ps-tr-eyebrow); color: var(--ps-mute-500); }
/* 누가 보는 화면 — 캡처 위 이름표. 최고관리자 전용 등은 is-strong 으로 빨갛게 */
.gd-who {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 0 8px; padding: 5px 10px;
  background: var(--ps-ink); color: var(--ps-paper); font-size: 13px; font-weight: 700;
}
.gd-who::before { content: "보는 사람"; font-size: 11px; font-weight: 700; letter-spacing: .04em; opacity: .65; }
.gd-who.is-strong { background: var(--ps-seoul-red); }
.gd-who[hidden] { display: none; }

/* 캡처 + 좌우 화살표 */
.gd-view { position: relative; }
.gd-arrow {
  position: absolute; top: 50%; z-index: 3; width: 40px; height: 64px; margin-top: -32px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; background: rgb(10 10 10 / .55); color: var(--ps-paper); cursor: pointer;
  opacity: .55; transition: opacity .2s var(--ps-ease), background .2s var(--ps-ease), color .2s var(--ps-ease);
}
.gd-arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: square; stroke-linejoin: miter; }
.gd-arrow.is-prev { left: 0; }
.gd-arrow.is-next { right: 0; }
.gd-view:hover .gd-arrow, .gd-arrow:focus-visible { opacity: 1; background: var(--ps-ink); }
.gd-arrow:hover { background: var(--ps-accent) !important; color: var(--ps-ink); }
.gd-arrow:active svg { transform: scale(.88); }
.gd-arrow:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 2px; }
@media (hover: none) { .gd-arrow { opacity: 1; background: var(--ps-ink); } }

/* 다음에 누가 무엇을 — 캡처 바로 아래 띠 */
.gd-nextbar {
  margin: 0; padding: 10px 14px; background: var(--ps-accent); color: var(--ps-ink);
  font-size: 14px; font-weight: 700; line-height: 1.45; border: 1px solid var(--ps-ink); border-top: 0;
}
.gd-nextbar[hidden] { display: none; }

.gd-ctrl { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.gd-pp { border: 1px solid var(--ps-ink); background: var(--ps-paper); padding: 5px 10px; font-size: 12px; font-weight: 700; cursor: pointer; }
.gd-dots { display: inline-flex; gap: 6px; }
.gd-dot { width: 10px; height: 10px; padding: 0; border: 1px solid var(--ps-ink); background: var(--ps-paper); cursor: pointer; }
.gd-dot.is-on { background: var(--ps-ink); }
.gd-pp:focus-visible, .gd-dot:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 2px; }
.gd-cap { font-size: 13px; color: var(--ps-mute-700); }

/* 공모 유형별 */
.gd-note { margin-top: 48px; padding: 20px 24px; background: var(--ps-mute-50); border-left: 3px solid var(--ps-ink); }
.gd-note-h { margin: 0 0 8px; font-weight: 700; }
.gd-note ul { margin: 0; padding-left: 18px; line-height: 1.8; color: var(--ps-mute-700); }

/* 매뉴얼 */
.gd-manuals { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 768px) { .gd-manuals { grid-template-columns: repeat(2, 1fr); } }
.gd-manuals li, .gd-manuals a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 20px; border: 1px solid var(--ps-ink); color: var(--ps-ink); text-decoration: none; }
.gd-manuals li.is-off { border-color: var(--ps-mute-300); color: var(--ps-mute-500); }
.gd-man-t { font-weight: 700; }
.gd-man-s { font-size: 12px; font-weight: 700; letter-spacing: var(--ps-tr-eyebrow); }

/* ── 미리보기 띠 [2026-10-13 4안] 왼쪽: 표시 → 제목(2줄) / 오른쪽: 오픈 예정일만 검정 상자로 강조. 바탕은 차분하게 ── */
.ps-guide .gd-preview { padding-top: 24px; padding-bottom: 24px; background: var(--ps-mute-50); border-bottom: 1px solid var(--ps-ink); }
.gd-preview-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; }
.gd-preview-tag { display: inline-block; margin: 0 0 10px; padding: 4px 10px; background: var(--ps-ink); color: var(--ps-paper); font-size: 12px; font-weight: 800; letter-spacing: .12em; }
.gd-preview-t { margin: 0; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem); font-weight: 800; line-height: 1.25; letter-spacing: -0.02em; }
.gd-preview-date { margin: 0; display: grid; gap: 4px; min-width: 210px; padding: 16px 22px; background: var(--ps-ink); color: var(--ps-paper); }
.gd-preview-date span { font-size: 12px; font-weight: 800; letter-spacing: .14em; color: var(--ps-accent); }
.gd-preview-date b { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 800; line-height: 1.2; }

/* ── 가장 먼저: 새로 회원가입 (공통) ── */
.gd-join-grid { display: grid; grid-template-columns: 1fr; gap: 32px 48px; align-items: start; }
@media (min-width: 1000px) { .gd-join-grid { grid-template-columns: 5fr 6fr; } }
.gd-join-warn { margin: 0 0 24px; padding: 16px 18px; border-left: 4px solid var(--ps-seoul-red); background: rgb(229 91 64 / .08); font-size: 16px; line-height: 1.7; }
.gd-join-warn b { font-size: 18px; }
.gd-join-list { list-style: none; margin: 0; padding: 0; counter-reset: gj; }
.gd-join-list li { counter-increment: gj; position: relative; padding: 14px 0 14px 48px; border-top: 1px solid var(--ps-mute-200); }
.gd-join-list li:last-child { border-bottom: 1px solid var(--ps-mute-200); }
.gd-join-list li::before { content: counter(gj, decimal-leading-zero); position: absolute; left: 0; top: 14px; font-size: 13px; font-weight: 700; color: var(--ps-mute-500); }
.gd-join-list li b { display: block; font-size: 16px; }
.gd-join-list li span { display: block; margin-top: 6px; font-size: 14px; line-height: 1.65; color: var(--ps-mute-700); }
.gd-join-list li span b { display: inline; font-size: inherit; }
.gd-join-shot { margin: 0; }
.gd-join-img { position: relative; border: 1px solid var(--ps-ink); background: var(--ps-paper); }
.gd-join-img img { display: block; width: 100%; height: auto; }
.gd-join-shot figcaption { margin-top: 8px; font-size: 13px; color: var(--ps-mute-500); }

/* 먼저 알아둘 것 — 회원가입을 공통 구역으로 옮겨 2칸 */
@media (min-width: 900px) { .gd-facts.is-2 { grid-template-columns: repeat(2, 1fr); } }

/* 회원가입 구역 재생기 [2026-10-13] — 세로로 긴 캡처라 프레임을 4:5 로 */
.gd-join-pane .gd-frame { aspect-ratio: 4 / 5; }
@media (min-width: 1000px) { .gd-join-pane { max-width: 560px; justify-self: start; width: 100%; } }