.help-page { --help-width: 1180px; }
.help-page :focus-visible { outline: 3px solid var(--v2-blue); outline-offset: 5px; }
.help-skip { position: fixed; z-index: 10; top: 8px; left: 12px; padding: 12px 18px; border-radius: 8px; color: #fff; background: var(--v2-ink); transform: translateY(-160%); }
.help-skip:focus { transform: none; }
.help-header, .help-main, .help-footer { width: min(var(--help-width), calc(100% - 52px)); margin: 0 auto; }
.help-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--v2-line); }
.help-header .v2-brand span { font-size: 2rem; }
.help-header nav { display: flex; align-items: center; gap: 18px 26px; flex-wrap: wrap; justify-content: flex-end; }
.help-header nav a { padding: 7px 0; font-size: 16px; font-weight: 800; text-decoration: none; }
.help-header nav a[aria-current="page"] { border-bottom: 3px solid var(--v2-blue); }
.help-intro { display: grid; grid-template-columns: 1.16fr .84fr; gap: 64px; align-items: center; padding: 72px 0 64px; }
.help-kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; color: var(--v2-blue); font-family: "DM Mono", monospace; font-size: 14px; font-weight: 500; letter-spacing: .035em; }
.help-kicker > span { width: 10px; height: 10px; flex: 0 0 10px; border-radius: 50%; background: var(--v2-coral); }
.help-intro h1 { margin: 0; font-size: clamp(43px, 5.6vw, 72px); font-weight: 900; line-height: 1.22; letter-spacing: -.055em; }
.help-intro h1 mark { padding: 0 .05em; color: var(--v2-ink); background: linear-gradient(transparent 55%, var(--v2-lime) 55%); }
.help-lead { max-width: 610px; margin: 26px 0 0; color: var(--v2-muted); font-size: 19px; line-height: 1.9; }
.guide-entry { padding: 30px; border: 2px solid var(--v2-ink); border-radius: 22px; background: var(--v2-white); box-shadow: 8px 8px 0 var(--v2-lime); }
.guide-entry-label { display: block; margin-bottom: 18px; font-size: 23px; }
.help-primary, .help-secondary { display: flex; align-items: center; justify-content: space-between; gap: 15px; min-height: 54px; padding: 15px 18px; border: 2px solid var(--v2-ink); border-radius: 11px; font-size: 17px; font-weight: 800; line-height: 1.5; text-decoration: none; }
.help-primary { color: var(--v2-white); background: var(--v2-ink); }
.help-primary > span { color: var(--v2-lime); font-size: 26px; }
.help-secondary { color: var(--v2-ink); background: var(--v2-white); }
.help-secondary > span { color: var(--v2-blue); font-size: 24px; }
.guide-entry .help-secondary { margin-top: 14px; }
.guide-entry p { margin: 22px 0 0; color: var(--v2-muted); font-size: 16px; line-height: 1.9; }
.guide-entry p b { color: var(--v2-ink); }
.guide-role { display: grid; grid-template-columns: 1fr 1.14fr; column-gap: 36px; padding: 35px 0; border-top: 1px solid var(--v2-line); }
.guide-role h2 { margin: 0; font-size: 30px; font-weight: 900; letter-spacing: -.03em; }
.guide-role > div > p:not(.help-kicker) { color: var(--v2-muted); font-size: 17px; }
.guide-role-buttons { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 16px; }
.guide-role-buttons button { min-height: 106px; padding: 18px; border: 2px solid var(--v2-line); border-radius: 16px; color: var(--v2-ink); background: var(--v2-white); font: inherit; font-size: 22px; font-weight: 900; text-align: left; cursor: pointer; }
.guide-role-buttons button::before { display: inline-block; width: 18px; height: 18px; margin-right: 9px; border: 2px solid var(--v2-ink); border-radius: 50%; content: ""; vertical-align: -1px; }
.guide-role-buttons button[aria-pressed="true"] { border-color: var(--v2-ink); background: var(--v2-lime-soft); box-shadow: 4px 4px 0 var(--v2-lime); }
.guide-role-buttons button[aria-pressed="true"]::before { background: var(--v2-blue); box-shadow: inset 0 0 0 4px #fff; }
.guide-role-buttons small { display: block; margin-top: 10px; color: var(--v2-muted); font-size: 14px; font-weight: 700; }
.help-status { margin: 16px 0 0; color: var(--v2-muted); font-size: 16px; line-height: 1.8; }
.guide-role > .help-status { grid-column: 1 / -1; }
.guide-jump { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 12px 0 50px; border: 1px solid var(--v2-ink); border-radius: 14px; overflow: hidden; background: var(--v2-lime-soft); }
.guide-jump a { display: flex; min-height: 90px; padding: 15px; border-right: 1px solid #b8c39c; flex-direction: column; justify-content: center; gap: 7px; font-size: 16px; font-weight: 800; text-decoration: none; }
.guide-jump a:last-child { border: 0; }
.guide-jump b { color: var(--v2-blue); font-family: "DM Mono", monospace; font-size: 15px; }
.guide-jump a:hover { color: #fff; background: var(--v2-ink); }
.guide-jump a:hover b { color: var(--v2-lime); }
.guide-step { display: grid; grid-template-columns: 72px 1fr; gap: 26px; position: relative; padding: 0 0 42px; scroll-margin-top: 24px; }
.guide-anchor { position: absolute; top: 0; scroll-margin-top: 24px; }
.guide-step:not(:last-child)::after { position: absolute; top: 72px; left: 35px; bottom: 0; width: 2px; background: var(--v2-line); content: ""; }
.guide-step:not(:last-child)::before { position: absolute; z-index: 1; bottom: 13px; left: 30px; width: 10px; height: 10px; border-right: 2px solid var(--v2-blue); border-bottom: 2px solid var(--v2-blue); content: ""; transform: rotate(45deg); }
.guide-step-number { display: grid; width: 72px; height: 72px; border: 2px solid var(--v2-ink); border-radius: 50%; place-items: center; color: var(--v2-ink); background: var(--v2-lime); font-family: "DM Mono", monospace; font-size: 25px; font-weight: 500; }
.guide-step details { min-width: 0; border: 1px solid var(--v2-line); border-radius: 18px; background: var(--v2-white); overflow: hidden; }
.guide-step details[open] { border-color: var(--v2-ink); }
.guide-step summary { display: flex; padding: 25px 28px; align-items: center; justify-content: space-between; gap: 18px; list-style: none; cursor: pointer; }
.guide-step summary::-webkit-details-marker { display: none; }
.guide-step summary small { color: var(--v2-blue); font-size: 15px; font-weight: 700; }
.guide-step h2 { margin: 7px 0 0; font-size: clamp(23px, 2.7vw, 31px); font-weight: 900; letter-spacing: -.03em; line-height: 1.5; }
.guide-expand { display: grid; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; place-items: center; color: var(--v2-ink); background: var(--v2-lime-soft); font-size: 25px; }
.guide-step details[open] .guide-expand { transform: rotate(45deg); }
.guide-step-content { padding: 0 28px 30px; }
.guide-step-content p, .guide-step-content li { font-size: 18px; line-height: 1.95; }
.guide-step-content p { margin: 18px 0; }
.guide-prerequisite { padding: 13px 17px; border-left: 4px solid var(--v2-blue); color: var(--v2-muted); background: #f3f6fc; }
.guide-task-label { display: inline-block; margin: 0 10px 3px 0; padding: 2px 10px; border-radius: 6px; color: var(--v2-ink); background: var(--v2-lime); font-size: 15px; }
.guide-staff-note { padding: 16px 20px; border-radius: 10px; color: #536581; background: #f2f5fa; }
.guide-staff-note b { color: var(--v2-ink); }
.guide-inline-link { display: inline-block; margin-top: 7px; color: var(--v2-blue); font-size: 18px; font-weight: 800; text-underline-offset: 5px; }
.guide-route-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 24px 0; }
.guide-route-grid section { padding: 20px; border: 1px solid var(--v2-line); border-radius: 12px; background: var(--v2-paper); }
.guide-step-content h3 { margin: 15px 0 0; font-size: 21px; }
.guide-route-grid h3 { margin: 0; }
.guide-route-grid p { margin-bottom: 0; }
.guide-package-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0; list-style: none; }
.guide-package-list li { padding: 11px 15px; border-radius: 8px; background: var(--v2-lime-soft); font-weight: 700; }
.guide-checkpoint { margin: 24px 0; padding: 18px 22px; border: 1px solid #d8c68b; border-radius: 11px; background: #fff9e8; }
.guide-checkpoint > b { font-size: 19px; }
.guide-checkpoint p { margin: 8px 0 0; color: #665a37; }
.help-bottom { display: grid; grid-template-columns: 1fr .8fr; align-items: center; gap: 54px; margin: 30px 0 70px; padding: 42px; border-radius: 22px; background: var(--v2-lime-soft); }
.help-bottom h2 { margin: 0; font-size: clamp(28px, 3vw, 38px); font-weight: 900; line-height: 1.45; }
.help-bottom p:not(.help-kicker) { max-width: 530px; margin-bottom: 0; color: #536581; font-size: 18px; line-height: 1.9; }
.help-bottom-links { display: grid; gap: 15px; }
.help-footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 0 40px; border-top: 1px solid var(--v2-line); }
.help-footer p { color: var(--v2-muted); font-size: 15px; }
.help-footer > a:last-child { font-size: 16px; font-weight: 800; text-underline-offset: 5px; }
.qa-intro { grid-template-columns: 1fr; padding-bottom: 40px; }
.qa-intro .help-lead { max-width: 740px; }
.qa-search-panel { display: grid; grid-template-columns: 1.4fr .6fr; gap: 22px; padding: 26px; border: 2px solid var(--v2-ink); border-radius: 17px; background: var(--v2-lime-soft); }
.qa-field { display: grid; gap: 10px; font-size: 17px; font-weight: 800; }
.qa-field input, .qa-field select { width: 100%; min-height: 51px; padding: 12px 14px; border: 1px solid #8997b2; border-radius: 9px; color: var(--v2-ink); background: var(--v2-white); font: inherit; font-size: 17px; font-weight: 500; }
.qa-results-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 34px; }
.qa-results-heading h2 { margin: 0; font-size: 27px; }
.qa-results-heading .help-status { margin: 0; }
.qa-list { margin: 22px 0 50px; }
.qa-item { margin-bottom: 15px; border: 1px solid var(--v2-line); border-radius: 13px; overflow: hidden; background: var(--v2-white); }
.qa-item[open] { border-color: var(--v2-ink); }
.qa-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px; list-style: none; cursor: pointer; }
.qa-item summary::-webkit-details-marker { display: none; }
.qa-item summary::after { display: grid; width: 31px; height: 31px; flex: 0 0 31px; border-radius: 50%; place-items: center; background: var(--v2-lime-soft); content: "＋"; font-size: 23px; }
.qa-item[open] summary::after { content: "−"; }
.qa-item summary strong { display: block; font-size: 21px; font-weight: 800; line-height: 1.6; }
.qa-category { display: block; margin-bottom: 6px; color: var(--v2-blue); font-size: 14px; font-weight: 700; }
.qa-answer { margin: 0; padding: 0 22px 25px; font-size: 18px; line-height: 1.95; white-space: pre-wrap; overflow-wrap: anywhere; }
.qa-empty { padding: 32px 22px; border: 1px dashed #8997b2; border-radius: 13px; color: var(--v2-muted); font-size: 18px; line-height: 1.8; }
.qa-error { padding: 22px; border-left: 4px solid #af3038; border-radius: 8px; color: #932a30; background: #fff1ed; font-size: 17px; line-height: 1.8; }
.qa-error p { margin-top: 0; }
.qa-retry { min-height: 46px; padding: 10px 20px; border: 1px solid var(--v2-ink); border-radius: 8px; color: var(--v2-ink); background: #fff; font: inherit; font-weight: 800; cursor: pointer; }
.help-page [hidden] { display: none !important; }
@media (max-width: 900px) { .help-intro { gap: 35px; }.help-header nav { gap: 10px 16px; }.guide-role { grid-template-columns: 1fr; row-gap: 12px; }.guide-role-buttons { max-width: 660px; }.guide-jump { grid-template-columns: repeat(3, minmax(0, 1fr)); }.guide-jump a:nth-child(3) { border-right: 0; }.guide-jump a:nth-child(-n+3) { border-bottom: 1px solid #b8c39c; }.guide-route-grid { grid-template-columns: 1fr; }.help-bottom { grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 680px) { .help-header, .help-main, .help-footer { width: calc(100% - 34px); }.help-header { align-items: start; gap: 16px; padding: 22px 0; }.help-header .v2-brand span { font-size: 1.65rem; }.help-header nav { max-width: 230px; column-gap: 13px; row-gap: 4px; }.help-header nav a { font-size: 14px; }.help-intro { grid-template-columns: 1fr; gap: 30px; padding: 44px 0; }.help-intro h1 { font-size: clamp(39px, 8.5vw, 55px); }.help-lead { font-size: 18px; }.guide-entry { padding: 23px; box-shadow: 5px 5px 0 var(--v2-lime); }.guide-role { padding: 28px 0; }.guide-role h2 { font-size: 27px; }.guide-role-buttons { gap: 12px; }.guide-role-buttons button { padding: 14px; font-size: 20px; }.guide-role-buttons small { font-size: 13px; }.guide-role-buttons button::before { width: 15px; height: 15px; margin-right: 6px; }.guide-jump { margin-bottom: 34px; }.guide-jump a { min-height: 83px; padding: 12px; font-size: 15px; }.guide-step { grid-template-columns: 40px 1fr; gap: 12px; padding-bottom: 30px; }.guide-step-number { width: 40px; height: 40px; font-size: 17px; }.guide-step:not(:last-child)::after { top: 40px; left: 19px; }.guide-step:not(:last-child)::before { left: 14px; bottom: 11px; }.guide-step summary { padding: 19px 17px; gap: 10px; }.guide-step h2 { font-size: 23px; }.guide-step summary small { font-size: 13px; }.guide-expand { width: 28px; height: 28px; flex-basis: 28px; font-size: 21px; }.guide-step-content { padding: 0 17px 23px; }.guide-step-content p, .guide-step-content li { font-size: 17px; }.guide-staff-note { padding: 14px; }.guide-package-list { grid-template-columns: 1fr; }.guide-checkpoint { padding: 15px; }.guide-checkpoint > b { font-size: 18px; }.help-bottom { padding: 27px 23px; margin-bottom: 44px; }.help-footer { align-items: start; flex-wrap: wrap; }.help-footer p { margin: 0; }.help-footer > a:last-child { width: 100%; }.qa-intro { padding-bottom: 28px; }.qa-search-panel { grid-template-columns: 1fr; gap: 17px; padding: 21px; }.qa-results-heading { align-items: start; flex-direction: column; gap: 9px; }.qa-item summary { padding: 19px; }.qa-item summary strong { font-size: 19px; }.qa-answer { padding: 0 19px 22px; font-size: 17px; } }
@media (prefers-reduced-motion: reduce) { .help-page { scroll-behavior: auto; }.help-page * { scroll-behavior: auto; } }
