/* Reading and explaining a task: real screens first, short instructions directly below. */
.manual { background: var(--color-surface); }
.manual-title { padding-block: var(--space-8); }
.manual-tools { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; margin-top: var(--space-5); }
.manual-tools a { color: var(--color-action-text); text-underline-offset: 4px; }
.manual [hidden] { display: none; }
.manual-layout { display: grid; grid-template-columns: 240px minmax(0,1fr); gap: var(--space-8); align-items: start; padding-bottom: var(--space-12); }
.manual-body { min-width: 0; }
.manual-toc { position: sticky; top: calc(var(--size-gnb) + var(--space-4)); max-height: calc(100dvh - var(--size-gnb) - var(--space-8)); overflow-y: auto; scrollbar-gutter: stable; padding: var(--space-4) var(--space-3) var(--space-4) 0; font-size: var(--font-size-caption); }
.manual-toc ol { list-style: none; padding: 0; margin: var(--space-3) 0; }
.manual-toc > ol > li { margin-bottom: var(--space-5); }
.manual-toc > ol > li > a { font-size: var(--font-size-label); font-weight: 600; }
.manual-toc a { display: block; padding: var(--space-2); color: var(--color-ink-secondary); text-decoration: none; border-radius: var(--radius-sm); }
.manual-toc a:hover, .manual-toc a[aria-current="step"] { color: var(--color-action-text); background: var(--color-action-soft); }
.manual-roles { margin: var(--space-5) 0 var(--space-8); }
.manual-roles > div { display: grid; grid-template-columns: 150px minmax(0,1fr); gap: var(--space-4); border-bottom: 1px solid var(--color-line); padding-block: var(--space-3); }
.manual-roles dt { font-weight: 500; }
.manual-roles dt a { color: var(--color-action-text); }
.manual-roles dd { margin: 0; color: var(--color-ink-secondary); }
.manual-prep ul, .manual-presentation ol { padding-left: var(--space-6); }
.manual-prep li, .manual-presentation li { margin-block: var(--space-3); }
.manual-sample { border-top: 1px solid var(--color-line); padding-top: var(--space-4); color: var(--color-ink-muted); font-size: var(--font-size-caption); }
.manual-chapter { margin-top: var(--space-12); }
.manual-chapter > h2 { font-size: var(--font-size-title-lg); border-bottom: 2px solid var(--color-line-strong); padding-bottom: var(--space-4); }
.manual-step { padding-block: var(--space-8); border-bottom: 1px solid var(--color-line); scroll-margin-top: calc(var(--size-gnb) + var(--space-6)); }
.manual-who { font-size: var(--font-size-label); color: var(--color-action-text); margin: 0 0 var(--space-2); font-weight: 500; }
.manual-step h3 { font-size: var(--font-size-title-md); font-weight: 600; margin: 0 0 var(--space-5); line-height: 1.4; }
.manual-figure { margin: 0 0 var(--space-5); }
.manual-figure img { width: 100%; height: auto; display: block; border: 1px solid var(--color-line); border-radius: var(--radius-md); }
.manual-figure--phone { max-width: 390px; margin-inline: auto; }
.manual-figure figcaption { margin-top: var(--space-2); text-align: right; font-size: var(--font-size-caption); }
.manual-figure a { color: var(--color-action-text); }
.manual-actions { padding-left: var(--space-6); margin-block: var(--space-5); }
.manual-actions li { padding-left: var(--space-1); margin-block: var(--space-3); }
.manual-actions li::marker { font-variant-numeric: tabular-nums; color: var(--color-ink-secondary); font-weight: 600; }
.manual-result { margin: 0; padding: var(--space-4); background: var(--color-surface-sunk); border-radius: var(--radius-md); }
.manual-result strong { display: block; font-size: var(--font-size-label); margin-bottom: var(--space-1); }
.manual-next { display: inline-block; margin-top: var(--space-4); padding-block: var(--space-2); color: var(--color-action-text); }
.manual-help, .manual-presentation { margin-top: var(--space-12); }
.manual-help details { border-bottom: 1px solid var(--color-line); }
.manual-help summary { cursor: pointer; font-weight: 500; padding-block: var(--space-4); }
.manual-help details p { margin: 0 0 var(--space-5); }
.manual :is(h2,section[id]) { scroll-margin-top: calc(var(--size-gnb) + var(--space-6)); }
.manual a { overflow-wrap: anywhere; }
.manual :is(a,button,summary):focus-visible { outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: var(--focus-ring-offset); }
@media(max-width:1023px) {
 .manual-layout { grid-template-columns: minmax(0,1fr); gap: var(--space-5); }
 .manual-toc { position: static; max-height: none; overflow: visible; padding: var(--space-4); background: var(--color-bg); border-radius: var(--radius-md); }
 .manual-toc > ol { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-3); }
 .manual-toc > ol > li { margin: 0; }
 .manual-toc > ol > li > ol { display: none; }
 .manual-roles > div { grid-template-columns: minmax(0,1fr); gap: var(--space-1); }
}
@media(max-width:479px) {
 .manual-toc > ol { grid-template-columns: minmax(0,1fr); }
 .manual-title h1 { font-size: var(--font-size-title-lg); }
 .manual-tools { align-items: flex-start; flex-direction: column; gap: var(--space-3); }
 .manual-step { padding-block: var(--space-6); }
}
@media print {
 @page { size: A4; margin: 12mm; }
 body { background: var(--color-surface); color: var(--color-ink); }
 .gnb,.footer,.closing,.manual-toc,.manual-tools,.manual-next,.manual-title>a,.skip { display:none!important; }
 .wrap { width:100%; max-width:none; padding-inline:0; }
 .manual-layout { display:block; }
 .manual-title { padding-block:0; }
 .manual-prep { break-after:page; }
 .manual-chapter>h2 { break-before:page; }
 .manual-step { break-before:page; padding-top:0; }
 .manual-step h3,.manual-who { break-after:avoid; }
 .manual-figure { break-inside:avoid; }
 .manual-figure img { width:auto; max-width:100%; max-height:135mm; margin-inline:auto; }
 .manual-figure--phone img { max-height:115mm; }
 .manual-actions li { margin-block:2mm; }
 .manual-figure figcaption { display:none; }
 .manual-help details { break-inside:avoid; }
 .manual-help details>p { display:block; }
 .manual-presentation { break-inside:avoid; }
}
/* The manual uses document typography even when the public shell has large marketing headings. */
.manual { font-size: var(--font-size-body); line-height: 1.6; }
.manual h1 { font-size: var(--font-size-display); line-height: 1.3; font-weight: 600; }
.manual h2 { font-size: var(--font-size-title-md); line-height: 1.4; font-weight: 600; }
.manual-chapter > h2 { font-size: var(--font-size-title-lg); }
.manual-title { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; gap: var(--space-8); }
.manual-title h1 { margin-block: var(--space-4); }
.manual-preview .manual-figure { margin: 0; }
.manual-toc-disclosure > summary { cursor: pointer; font-weight: 600; padding-block: var(--space-2); }
@media(max-width:767px) {
 .manual-title { grid-template-columns: minmax(0,1fr); gap: var(--space-5); }
 .manual h1 { font-size: var(--font-size-title-lg); }
 .manual-tools { gap: var(--space-3); flex-direction: row; align-items: center; }
 .manual-tools > .btn:first-child { width: 100%; }
 .manual-print-help { display: none; }
}
@media print {
 .manual-title { display: block; }
 .manual-preview { display: none; }
 .manual h1 { font-size: var(--font-size-title-lg); }
}
.manual .btn:not(.btn-outline) { background: var(--color-action); border-color: var(--color-action); color: var(--color-action-ink); }
.manual .btn:not(.btn-outline):hover { background: var(--color-action-hover); border-color: var(--color-action-hover); }
.manual-toc-disclosure > summary { list-style: disclosure-closed; }
.manual-toc-disclosure[open] > summary { list-style: disclosure-open; }
.manual-help summary { list-style: disclosure-closed; }
.manual-help details[open] > summary { list-style: disclosure-open; }
.manual :is(.manual-toc-disclosure,.manual-help details) > summary::-webkit-details-marker { display: revert; }

/* Keep the print action secondary with the existing public site as well. */
.manual .btn-outline { background: transparent; border-color: var(--color-line-strong); color: var(--color-ink); }
.manual .btn-outline:hover { background: var(--color-bg); border-color: var(--color-line-strong); color: var(--color-ink); }

/* Korean task videos load only when requested; native controls support touch and keyboard. */
.manual-videos { margin-bottom: var(--space-12); }
.manual-video-list { list-style: none; padding: 0; margin: var(--space-5) 0 0; }
.manual-video-list > li { border-bottom: 1px solid var(--color-line); }
.manual-video-list summary { list-style: disclosure-closed; cursor: pointer; padding-block: var(--space-4); }
.manual-video-list summary > span:first-child { font-weight: 500; }
.manual-video-list summary .meta { display: block; margin-left: var(--space-5); }
.manual-video-list video { display: block; width: 100%; height: auto; background: var(--color-chrome); border-radius: var(--radius-md); }
.manual-video-list video:focus-visible { outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: var(--focus-ring-offset); }
.manual-video-links { display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: var(--font-size-label); }
.manual-video-links a { color: var(--color-action-text); }
@media print { .manual-videos { display: none; } }
.manual-video-list details[open] > summary { list-style: disclosure-open; }
.manual-video-list summary::-webkit-details-marker { display: revert; }

.manual-media {
  width: min(var(--layout-mkt-max), calc(100% - var(--space-8)));
  max-width: none;
  max-height: calc(100dvh - var(--space-8));
  margin: auto;
  padding: 0;
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-ink);
}
.manual-media[open] { display: flex; flex-direction: column; }
.manual-media::backdrop { background: var(--color-scrim); }
.manual-media__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4); border-bottom: 2px solid var(--color-ink); }
.manual-media__head h2 { min-width: 0; margin: 0; font-size: var(--font-size-title-md); font-weight: 600; }
.manual-media__head button { flex-shrink: 0; }
.manual-media__body { min-height: 0; padding: var(--space-3); overflow: auto; overscroll-behavior: contain; }
.manual-media__body img { display: block; width: 100%; height: auto; }
.manual-media__body video { display: block; width: 100%; max-height: calc(100dvh - var(--space-12) * 3); background: var(--color-chrome); }
.manual-media button:focus-visible, .manual-media video:focus-visible { outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: var(--focus-ring-offset); }
@media (max-width: 639px) {
  .manual-media { width: calc(100% - var(--space-4)); max-height: calc(100dvh - var(--space-4)); }
  .manual-media__head { align-items: flex-start; gap: var(--space-2); padding: var(--space-3); }
  .manual-media__head h2 { font-size: var(--font-size-title-sm); }
  .manual-media__body { padding: var(--space-2); }
}
@media print { .manual-media { display: none !important; } }

/* A long reference opens one task at a time; instructions are ordinary lists. */
.manual-step { padding-block: 0; }
.manual-task > summary { cursor: pointer; padding: var(--space-4) var(--space-1); list-style: disclosure-closed; }
.manual-task[open] > summary { list-style: disclosure-open; }
.manual-task > summary::-webkit-details-marker { display: revert; }
.manual-task > summary::marker { color: var(--color-ink-secondary); }
.manual-task h3 { display: inline; margin: 0; font-size: var(--font-size-title-sm); }
.manual-task .manual-who { display: block; margin: 0 0 var(--space-1) var(--space-4); font-size: var(--font-size-caption); line-height: 1.5; }
.manual-task-body { padding-bottom: var(--space-6); }
.manual-path { font-size: var(--font-size-label); color: var(--color-ink-secondary); margin: 0 0 var(--space-3); }
.manual-find { border-block: 2px solid var(--color-ink); padding-block: var(--space-4); scroll-margin-top: 88px; }
.manual-find-fields { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--space-4); }
.manual-find label { display: grid; gap: var(--space-1); font-weight: 500; font-size: var(--font-size-label); min-width: 0; }
.manual-find :is(input,select) { width: 100%; min-width: 0; height: var(--size-control-md); padding: var(--space-2); border: 1px solid var(--color-line-field); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-ink); font: inherit; }
.manual-find-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3); }
[data-manual-count] { margin-right: auto; font-size: var(--font-size-label); font-variant-numeric: tabular-nums; }
.manual-related,.manual-transcript { font-size: var(--font-size-label); }
.manual-related a { color: var(--color-action-text); }
.manual-transcript { color: var(--color-ink-secondary); }
.manual-data-flow { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin: 0 0 var(--space-5); border-block: 1px solid var(--color-line); }
.manual-data-flow > div { display: grid; gap: var(--space-2); padding: var(--space-4) var(--space-3); }
.manual-data-flow strong { font-weight: 600; color: var(--color-action-text); }
.manual-data-flow span { font-size: var(--font-size-label); }
.manual-data-flow figcaption { grid-column: 1/-1; padding: var(--space-3); }
.manual-toc-disclosure > ol > li > a { font-weight: 600; }
.manual-toc-disclosure > ol > li > ol { padding-left: var(--space-2); }
.manual :is(input,select):focus-visible { outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: var(--focus-ring-offset); }
@media(max-width:767px) {
 .manual-find-fields { grid-template-columns: minmax(0,1fr); gap: var(--space-3); }
 .manual-data-flow { grid-template-columns: minmax(0,1fr); }
 .manual-data-flow > div + div { border-top: 1px solid var(--color-line); }
 .manual-toc-disclosure > ol > li > ol { display: none; }
}
@media print {
 .manual-find,.manual-related,.manual-task > summary::marker { display: none!important; }
 .manual-task > summary { padding-block: 0; }
 .manual-task-body { padding-bottom: 0; }
 .manual-task h3 { font-size: var(--font-size-title-md); }
}