/* 사용자 가이드 전용. 실제 화면 위 빨간 사각형은 SVG 좌표로 함께 확대한다. */
.user-guide { padding-top: var(--space-7); padding-bottom: var(--space-7); }
.guide-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-5); padding-bottom: var(--space-6); border-bottom: 1px solid var(--color-border); }
.guide-intro h1 { margin: 0 0 var(--space-3); }
.guide-intro p { max-width: 66ch; color: var(--color-text-muted); }
.guide-intro .cluster { flex-shrink: 0; }
.guide-legend { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-4); font-size: var(--fs-small); }
.guide-legend-box { display: inline-block; width: 24px; height: 18px; border: 3px solid var(--color-danger); }
.guide-layout { display: grid; grid-template-columns: 208px minmax(0, 1fr); align-items: start; gap: var(--space-7); margin-top: var(--space-6); }
.guide-toc { position: sticky; top: calc(var(--header-height-site) + var(--space-5)); max-height: calc(100dvh - var(--header-height-site) - var(--space-7)); overflow-y: auto; }
.guide-toc h2 { font-size: var(--fs-body); margin: 0 0 var(--space-3); }
.guide-toc ol { list-style: none; padding: 0; margin: 0; }
.guide-toc a { display: flex; align-items: center; gap: var(--space-3); min-height: var(--touch-min); padding: var(--space-2); border-left: 3px solid transparent; color: var(--color-text-muted); font-size: var(--fs-small); text-decoration: none; }
.guide-toc a:hover { background: var(--color-surface-sunken); color: var(--color-text); }
.guide-toc a[aria-current="location"] { border-left-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-primary); font-weight: 700; }
.guide-toc-number { font-variant-numeric: tabular-nums; min-width: 1.25em; }
.guide-toc-extra { border-top: 1px solid var(--color-border); padding-top: var(--space-3); margin-top: var(--space-3); }
.guide-content { min-width: 0; }
.guide-step { padding: 0 0 var(--space-7); margin: 0 0 var(--space-7); border-bottom: 1px solid var(--color-border); scroll-margin-top: var(--space-5); }
.guide-step:last-child { border-bottom: 0; margin-bottom: 0; }
.guide-step-head { display: flex; gap: var(--space-3); align-items: flex-start; margin-bottom: var(--space-4); }
.guide-step-number { display: inline-flex; justify-content: center; align-items: center; min-width: 36px; height: 36px; background: var(--color-primary); color: var(--color-on-primary); border-radius: var(--radius-input); font-weight: 700; font-variant-numeric: tabular-nums; }
.guide-step h2 { font-size: var(--fs-h2); margin: 0 0 var(--space-2); }
.guide-step h3 { font-size: var(--fs-h3); margin: var(--space-5) 0 var(--space-3); }
.guide-location { color: var(--color-text-muted); font-size: var(--fs-small); }
.guide-instructions { padding-left: var(--space-5); margin: var(--space-4) 0; }
.guide-instructions li { padding-left: var(--space-1); margin-bottom: var(--space-2); line-height: 1.8; }
.guide-instructions strong { font-weight: 700; }
.guide-figure { margin: var(--space-5) 0; }
.guide-shot { position: relative; display: block; overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-input); cursor: zoom-in; }
.guide-shot:hover { border-color: var(--color-primary); }
.guide-shot img { display: block; width: 100%; height: auto; }
.guide-focus { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.guide-focus rect { fill: none; stroke: var(--color-danger); stroke-width: 3; vector-effect: non-scaling-stroke; }
.guide-focus .guide-pin { fill: var(--color-danger); stroke: var(--color-on-primary); stroke-width: 1; }
.guide-focus text { fill: var(--color-on-primary); font: 700 20px var(--font-sans); text-anchor: middle; dominant-baseline: central; }
.guide-figure figcaption { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); color: var(--color-text-muted); font-size: var(--fs-small); }
.guide-image-error { display: none; padding: var(--space-5); background: var(--color-warning-soft); color: var(--color-warning); }
.guide-figure[data-image-error] .guide-focus { display: none; }
.guide-figure[data-image-error] .guide-image-error { display: block; }
.guide-done { border-left: 3px solid var(--color-success); background: var(--color-success-soft); padding: var(--space-3) var(--space-4); margin-top: var(--space-4); }
.guide-note { border-left: 3px solid var(--color-info); background: var(--color-info-soft); padding: var(--space-3) var(--space-4); margin-top: var(--space-4); }
.guide-caution { border-left-color: var(--color-warning); background: var(--color-warning-soft); }
.guide-step-link { display: inline-flex; align-items: center; min-height: var(--touch-min); margin-top: var(--space-3); font-weight: 600; }
.guide-preparation { list-style: disc; padding-left: var(--space-5); margin: var(--space-4) 0; }
.guide-preparation li { margin-bottom: var(--space-2); }
.guide-status-list { margin: var(--space-4) 0; }
.guide-status-list dt { font-weight: 700; margin-top: var(--space-3); }
.guide-status-list dd { margin: var(--space-1) 0 0; color: var(--color-text-muted); }
.guide-faq details { border-bottom: 1px solid var(--color-border); padding: var(--space-4) 0; }
.guide-faq summary { cursor: pointer; font-weight: 600; min-height: var(--touch-min); display: list-item; align-content: center; }
.guide-faq details p { margin: var(--space-3) 0 0; max-width: 72ch; }
.guide-image-modal { width: min(1440px, 96vw); max-width: none; max-height: 94dvh; }
.guide-image-modal .modal-body { overflow: auto; }
.guide-expanded { position: relative; min-width: 960px; }
.guide-expanded img { display: block; width: 100%; height: auto; }
.guide-image-modal .modal-head { gap: var(--space-4); }
.guide-image-modal .modal-head h2 { font-size: var(--fs-h3); }
.guide-image-modal .modal-foot { justify-content: space-between; }

@media (max-width: 1024px) {
	.guide-layout { grid-template-columns: 172px minmax(0, 1fr); gap: var(--space-5); }
	.guide-intro { flex-direction: column; }
}
@media (max-width: 720px) {
	.user-guide { padding-top: var(--space-5); }
	.guide-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
	.guide-toc { position: static; max-height: none; border: 1px solid var(--color-border); border-radius: var(--radius-panel); padding: var(--space-4); background: var(--color-surface); }
	.guide-toc ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.guide-toc a { padding-left: var(--space-1); gap: var(--space-2); }
	.guide-step { padding-bottom: var(--space-6); margin-bottom: var(--space-6); }
	.guide-step h2 { font-size: var(--fs-h2); }
	.guide-figure { margin-left: calc(-1 * var(--space-2)); margin-right: calc(-1 * var(--space-2)); }
	.guide-figure figcaption { padding: 0 var(--space-2); }
	.guide-focus rect { stroke-width: 2; }
	.guide-image-modal { width: 98vw; }
}
@media print {
	.site-header, .site-footer, .guide-toc, .guide-intro .cluster, .guide-step-link, .guide-image-modal, .guide-zoom-hint, .toast-region, .modal-backdrop { display: none !important; }
	.user-guide { padding: 0; max-width: none; }
	.guide-layout { display: block; margin-top: var(--space-5); }
	.guide-intro { display: block; }
	.guide-step { break-inside: auto; margin-bottom: var(--space-5); padding-bottom: var(--space-5); scroll-margin-top: 0; }
	.guide-step-head, .guide-figure, .guide-note, .guide-done { break-inside: avoid; }
	.guide-focus rect { stroke: #B42318; }
	.guide-focus .guide-pin { fill: #B42318; }
	.guide-focus text { fill: #FFFFFF; }
	.guide-step-number { background: none; color: var(--color-text); border: 1px solid var(--color-border-strong); }
	.guide-faq details { break-inside: avoid; }
	.guide-faq details > :not(summary) { display: block !important; }
}