.static-page-container {max-width: 800px;margin: 20px auto;padding: 30px;font-family: var(--font-family-base);background-color: #fff;border-radius: 8px;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);line-height: 1.7;color: #333}
.static-page-container h1 {font-size: 1.8em;font-weight: 700;color: #1c1e21;margin-bottom: 10px;padding-bottom: 15px;border-bottom: 2px solid #1877f2}
.static-page-container .last-updated {font-size: 0.85em;color: #606770;margin-bottom: 25px}
.static-page-container h2 {font-size: 1.3em;font-weight: 600;color: #1c1e21;margin-top: 30px;margin-bottom: 15px;padding-bottom: 8px;border-bottom: 1px solid #ddd}
.static-page-container h3 {font-size: 1.1em;font-weight: 600;color: #444;margin-top: 20px;margin-bottom: 10px}
.static-page-container p {margin-bottom: 15px}
.static-page-container ul {margin: 10px 0 15px 20px;padding-left: 0}
.static-page-container li {margin-bottom: 8px;list-style-type: disc}
.static-page-container section {margin-bottom: 25px}
.static-page-container strong {color: #1c1e21}
.disclosure-table {width: 100%;border-collapse: collapse;margin: 20px 0}
.disclosure-table th,
.disclosure-table td {padding: 15px;border: 1px solid #ddd;text-align: left;vertical-align: top}
.disclosure-table th {background-color: #f7f8fa;font-weight: 600;color: #1c1e21;width: 30%;white-space: nowrap}
.disclosure-table td {background-color: #fff}
.disclosure-table td small {display: block;margin-top: 5px;color: #606770;font-size: 0.85em}
.disclosure-table td ul {margin: 0;padding-left: 20px}
.disclosure-table td li {margin-bottom: 5px}
.static-page-container .back-link {display: inline-block;margin-top: 30px;color: #1877f2;text-decoration: none}
.static-page-container .back-link:hover {text-decoration: underline}
.github-issues-page {max-width: 1080px;border: 1px solid #d5dce6;background: #f8fbff}
.github-issues-hero {padding: 16px 18px;border: 1px solid #d5dce6;border-radius: 12px;background: linear-gradient(140deg, #0f172a 0%, #1e293b 80%);color: #f1f5f9;display: grid;gap: 12px}
.github-issues-hero-main {display: grid;gap: 6px}
.github-issues-kicker {margin: 0 0 6px;font-size: 0.75rem;letter-spacing: 0.08em;text-transform: uppercase;color: #7dd3fc}
.github-issues-page h1 {margin: 0;padding: 0;border: 0;color: #fff;font-size: 1.5rem}
.github-issues-lead {margin: 0;color: #d7e3f4;font-size: 0.92rem}
.github-issues-sync-time {margin: 0;display: inline-flex;align-items: center;gap: 8px;flex-wrap: wrap;padding: 6px 10px;border-radius: 8px;background: rgba(15, 23, 42, 0.45);border: 1px solid rgba(148, 163, 184, 0.35)}
.github-issues-sync-label {font-size: 0.75rem;color: #cbd5e1}
.github-issues-sync-value {font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-size: 0.8rem;color: #fff}
.github-issues-section {--section-accent: #94a3b8;margin-top: 16px;padding: 14px;border: 1px solid #d5dce6;border-radius: 12px;background: #fff;position: relative;overflow: hidden;box-shadow: 0 6px 16px rgba(15, 23, 42, 0.04)}
.github-issues-section::before {content: "";position: absolute;top: 0;left: 0;bottom: 0;width: 4px;background: var(--section-accent)}
.github-issues-section-development {--section-accent: #3b82f6;background: linear-gradient(180deg, #f5f9ff 0%, #eff6ff 100%);border-color: #bfdbfe}
.github-issues-section-improvement {--section-accent: #f59e0b;background: linear-gradient(180deg, #fffdf3 0%, #fefce8 100%);border-color: #fde68a}
.github-issues-section-bugfix {--section-accent: #ef4444;background: linear-gradient(180deg, #fff6f6 0%, #fef2f2 100%);border-color: #fecaca}
.github-issues-section-admin-request {--section-accent: #475569;background: linear-gradient(180deg, #fbfdff 0%, #f8fafc 100%);border-color: #cbd5e1}
.github-issues-section-header {display: flex;align-items: flex-start;justify-content: space-between;gap: 10px}
.github-issues-section-heading {min-width: 0}
.github-issues-section-header h2 {margin: 0;padding: 0;border: 0;font-size: 1.05rem;color: #0f172a}
.github-issues-section-grid {margin-top: 12px;display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: 12px}
.github-issues-subsection {margin-top: 0;border: 1px solid rgba(148, 163, 184, 0.28);border-radius: 10px;padding: 10px;background: rgba(255, 255, 255, 0.8)}
.github-issues-subsection h3 {margin: 0 0 8px;color: #334155;font-size: 0.9rem;padding-bottom: 6px;border-bottom: 1px solid rgba(148, 163, 184, 0.22)}
.github-issues-list {list-style: none;margin: 0;padding: 0;display: flex;flex-direction: column;gap: 6px}
.github-issues-list li {list-style: none;list-style-type: none}
.github-issue-row {list-style: none;margin: 0;border: 1px solid #dbe5f0;border-radius: 10px;background: #fff}
.github-issue-toggle {list-style: none;margin: 0;padding: 8px 28px 8px 10px;display: block;cursor: pointer;position: relative}
.github-issue-toggle::-webkit-details-marker {display: none}
.github-issue-toggle::marker {content: ""}
.github-issue-toggle::after {content: "+";position: absolute;right: 10px;top: 50%;transform: translateY(-50%);color: #64748b;font-weight: 700}
.github-issue-row[open] .github-issue-toggle::after {content: "-"}
.github-issue-summary-main {display: flex;align-items: center;justify-content: flex-start;gap: 8px;margin-right: 6px}
.github-issue-details {padding: 0 10px 8px;border-top: 1px solid #e2e8f0}
.github-issue-row[open] .github-issue-toggle {background: #f8fbff}
.github-issue-title {margin: 0;font-weight: 700;color: #0f172a;line-height: 1.35;font-size: 0.9rem;flex: 1 1 auto;min-width: 0}
.github-issue-number {font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;color: #2563eb;font-weight: 700}
.github-issue-status-badge {display: inline-flex;align-items: center;justify-content: center;flex-shrink: 0;min-width: 86px;padding: 1px 8px;font-size: 0.72rem;font-weight: 700;text-align: center;color: #334155;background: #f1f5f9;border: 1px solid #cbd5e1;border-radius: 999px}
.github-issue-status-badge[data-status="対応中"] {color: #075985;background: #e0f2fe;border-color: #7dd3fc}
.github-issue-status-badge[data-status="実装中"] {color: #075985;background: #e0f2fe;border-color: #7dd3fc}
.github-issue-status-badge[data-status="テスト中"] {color: #6b21a8;background: #f3e8ff;border-color: #d8b4fe}
.github-issue-status-badge[data-status="着手前"],
.github-issue-status-badge[data-status="未着手"] {color: #854d0e;background: #fef3c7;border-color: #fcd34d}
.github-issue-status-badge[data-status="完了"] {color: #166534;background: #dcfce7;border-color: #86efac}
.github-issue-comment {margin: 8px 0 0;color: #475569;line-height: 1.55;font-size: 0.82rem;white-space: pre-wrap;overflow-wrap: anywhere}
.admin-request-chat-section {margin-top: 16px}
.admin-request-chat-header {display: grid;gap: 4px;margin-bottom: 8px}
.admin-request-chat-title {margin: 0;font-size: 1.05rem;color: #0f172a}
.admin-request-chat-lead {margin: 0;color: #475569;font-size: 0.82rem}
.admin-request-chat-form {margin-top: 0;border: 1px solid rgba(148, 163, 184, 0.34);border-radius: 10px;background: rgba(255, 255, 255, 0.88);padding: 10px;display: flex;flex-direction: column;gap: 8px}
.admin-request-chat-error {margin: 0 0 8px;color: #b91c1c;font-size: 0.8rem;font-weight: 700}
.admin-request-chat-categories {display: flex;flex-wrap: wrap;gap: 6px}
.admin-request-chat-category {position: relative}
.admin-request-chat-category-input {position: absolute;opacity: 0;pointer-events: none}
.admin-request-chat-category-label {display: inline-flex;align-items: center;justify-content: center;padding: 4px 10px;border: 1px solid #cbd5e1;border-radius: 999px;font-size: 0.74rem;font-weight: 700;color: #334155;background: #fff;cursor: pointer}
.admin-request-chat-category-input:focus-visible + .admin-request-chat-category-label {outline: 2px solid #fda4af;outline-offset: 1px}
.admin-request-chat-category-input:checked + .admin-request-chat-category-label[data-category="new_feature"] {border-color: #93c5fd;background: #eff6ff;color: #1d4ed8}
.admin-request-chat-category-input:checked + .admin-request-chat-category-label[data-category="improvement"] {border-color: #fcd34d;background: #fefce8;color: #a16207}
.admin-request-chat-category-input:checked + .admin-request-chat-category-label[data-category="bug"] {border-color: #fca5a5;background: #fef2f2;color: #b91c1c}
.admin-request-chat-textarea {width: 100%;max-width: 100%;box-sizing: border-box;margin: 0;border: 1px solid #cbd5e1;border-radius: 10px;padding: 8px 10px;resize: vertical;min-height: 78px;font-size: 0.86rem;line-height: 1.5}
.admin-request-chat-textarea:focus {outline: 2px solid #fda4af;outline-offset: 1px}
.admin-request-chat-counter {margin: 0;color: #64748b;font-size: 0.74rem;text-align: right;font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}
.admin-request-chat-upload {margin: 0;border: 1px solid #dbe5f0;border-radius: 10px;background: #f8fbff;padding: 8px}
.admin-request-chat-upload-head {display: flex;align-items: center;justify-content: space-between;gap: 8px;flex-wrap: wrap}
.admin-request-chat-upload-label {display: inline-flex;font-size: 0.75rem;font-weight: 700;color: #334155;margin: 0}
.admin-request-chat-upload-actions {display: inline-flex;align-items: center;gap: 8px}
.admin-request-chat-upload-status {display: inline-flex;align-items: center;border: 1px solid #cbd5e1;border-radius: 999px;background: #f8fafc;color: #334155;font-size: 0.7rem;font-weight: 700;padding: 1px 8px}
.admin-request-chat-upload-clear {border: 1px solid #cbd5e1;border-radius: 999px;background: #fff;color: #334155;font-size: 0.68rem;font-weight: 700;line-height: 1.2;padding: 2px 8px;cursor: pointer}
.admin-request-chat-upload-clear:focus-visible {outline: 2px solid #fda4af;outline-offset: 1px}
.admin-request-chat-upload-note {margin: 4px 0 6px;color: #64748b;font-size: 0.72rem}
.admin-request-chat-upload-input {width: 100%;max-width: 100%;box-sizing: border-box;border: 1px solid #cbd5e1;border-radius: 8px;background: #fff;font-size: 0.78rem;padding: 6px}
.admin-request-chat-upload-input::file-selector-button {border: 1px solid #cbd5e1;border-radius: 8px;background: #f8fafc;color: #334155;font-size: 0.74rem;font-weight: 700;padding: 4px 8px;margin-right: 8px;cursor: pointer}
.admin-request-chat-upload-input:focus {outline: 2px solid #fda4af;outline-offset: 1px}
.admin-request-chat-upload-input.is-disabled {background: #f8fafc;color: #94a3b8;cursor: not-allowed}
.admin-request-chat-upload-input.is-disabled::file-selector-button {border-color: #cbd5e1;background: #e2e8f0;color: #64748b;cursor: not-allowed}
.admin-request-chat-upload-previews {margin: 8px 0 0;display: grid;grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));gap: 6px}
.admin-request-chat-upload-preview-item {position: relative;border: 1px solid #fbcfe8;border-radius: 8px;background: #fff;overflow: hidden}
.admin-request-chat-upload-preview-open {appearance: none;display: block;width: 100%;padding: 0;border: 0;background: transparent;cursor: zoom-in}
.admin-request-chat-upload-preview-open:focus-visible {outline: 2px solid #fda4af;outline-offset: -2px}
.admin-request-chat-upload-preview-image {width: 100%;display: block;aspect-ratio: 1 / 1;object-fit: cover;background: #f8fafc}
.admin-request-chat-upload-preview-video {width: 100%;display: block;aspect-ratio: 1 / 1;object-fit: cover;background: #0f172a}
.admin-request-chat-upload-preview-item.is-video::after {content: "VIDEO";position: absolute;left: 6px;bottom: 6px;border-radius: 999px;background: rgba(15, 23, 42, 0.72);color: #fff;font-size: 0.58rem;font-weight: 700;letter-spacing: 0.03em;padding: 2px 6px}
.admin-request-chat-upload-preview-fallback {position: absolute;inset: auto 6px 6px 6px;border-radius: 6px;background: rgba(15, 23, 42, 0.75);color: #fff;font-size: 0.62rem;line-height: 1.3;padding: 4px 6px}
.admin-request-chat-upload-preview-remove {position: absolute;top: 4px;right: 4px;width: 22px;height: 22px;border: 1px solid rgba(255, 255, 255, 0.75);border-radius: 999px;background: rgba(15, 23, 42, 0.64);color: #fff;font-size: 0.9rem;line-height: 1;padding: 0;cursor: pointer}
.admin-request-chat-upload-preview-remove:focus-visible {outline: 2px solid #fda4af;outline-offset: 1px}
.admin-request-chat-submit {margin-top: 2px;border: 1px solid #1d4ed8;background: #1d4ed8;color: #fff;border-radius: 8px;font-size: 0.8rem;font-weight: 700;padding: 6px 12px;cursor: pointer}
.admin-request-chat-submit:disabled {background: #cbd5e1;border-color: #cbd5e1;cursor: not-allowed}
.admin-request-chat-login {margin-top: 10px;border: 1px solid #dbe5f0;border-radius: 12px;background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);padding: 12px;display: grid;grid-template-columns: auto minmax(0, 1fr);column-gap: 10px;row-gap: 8px;align-items: center}
.admin-request-chat-login-icon {width: 34px;height: 34px;border-radius: 10px;background: #e0ecff;color: #1d4ed8;display: inline-flex;align-items: center;justify-content: center;font-size: 0.95rem}
.admin-request-chat-login-content {min-width: 0}
.admin-request-chat-login-title {margin: 0;color: #0f172a;font-size: 0.84rem;font-weight: 700}
.admin-request-chat-login-text {margin: 2px 0 0;color: #64748b;font-size: 0.76rem}
.admin-request-chat-login-actions {grid-column: 1 / -1;display: flex;flex-wrap: wrap;gap: 8px}
.admin-request-chat-login-button {display: inline-flex;align-items: center;justify-content: center;border-radius: 999px;font-size: 0.74rem;font-weight: 700;line-height: 1.2;padding: 6px 12px;text-decoration: none;transition: background-color 0.15s, border-color 0.15s, color 0.15s}
.admin-request-chat-login-button--primary {border: 1px solid #1d4ed8;background: #1d4ed8;color: #ffffff}
.admin-request-chat-login-button--primary:hover {background: #1e40af;border-color: #1e40af}
.admin-request-chat-login-button--secondary {border: 1px solid #cbd5e1;background: #ffffff;color: #334155}
.admin-request-chat-login-button--secondary:hover {border-color: #94a3b8;background: #f8fafc}
.admin-request-chat-login-button:focus-visible {outline: 2px solid #93c5fd;outline-offset: 1px}
.admin-request-chat-stream {margin-top: 10px;max-height: 440px;overflow-y: auto;border: 1px solid rgba(148, 163, 184, 0.34);border-radius: 10px;background: rgba(255, 255, 255, 0.88);padding: 8px}
.admin-request-chat-preview-open {overflow: hidden}
.admin-request-chat-preview-overlay {position: fixed;inset: 0;z-index: 3000;display: flex;align-items: center;justify-content: center;padding: 16px;background: rgba(15, 23, 42, 0.82)}
.admin-request-chat-preview-overlay.hidden {display: none}
.admin-request-chat-preview-dialog {position: relative;width: min(960px, 100%);max-height: calc(100vh - 32px);display: flex;align-items: center;justify-content: center}
.admin-request-chat-preview-close {position: absolute;top: -10px;right: -10px;width: 36px;height: 36px;border: 1px solid rgba(255, 255, 255, 0.6);border-radius: 999px;background: rgba(15, 23, 42, 0.7);color: #fff;font-size: 1.3rem;line-height: 1;cursor: pointer}
.admin-request-chat-preview-close:focus-visible {outline: 2px solid #fda4af;outline-offset: 2px}
.admin-request-chat-preview-image,
.admin-request-chat-preview-video {max-width: 100%;max-height: calc(100vh - 56px);width: auto;height: auto;object-fit: contain;border-radius: 10px;background: #020617;box-shadow: 0 24px 48px rgba(2, 6, 23, 0.42)}
@media (max-width: 768px) {.admin-request-chat-preview-close {top: 8px;right: 8px}}
.admin-request-chat-list {list-style: none;margin: 0;padding: 0;display: flex;flex-direction: column;gap: 8px}
.admin-request-chat-list li {list-style: none;list-style-type: none}
.admin-request-chat-list li::marker {content: ""}
.admin-request-chat-item {border: 1px solid #dbe5f0;border-radius: 10px;background: #fff;padding: 8px}
.admin-request-chat-item-line {display: flex;flex-direction: column;gap: 6px}
.admin-request-chat-item-header {display: flex;align-items: center;justify-content: space-between;gap: 8px;min-width: 0}
.admin-request-chat-user {display: flex;align-items: center;gap: 6px;text-decoration: none;min-width: 0}
.admin-request-chat-user-name {color: #1e293b;font-size: 0.82rem;font-weight: 700;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}
.admin-request-chat-user:hover .admin-request-chat-user-name {text-decoration: underline}
.admin-request-chat-badge {display: flex;align-items: center;justify-content: center;align-self: stretch;border: 1px solid #cbd5e1;background: #fff;color: #334155;border-radius: 999px;font-size: 0.7rem;font-weight: 700;padding: 2px 8px;flex-shrink: 0}
.admin-request-chat-badge[data-category="new_feature"] {border-color: #93c5fd;background: #eff6ff;color: #1d4ed8}
.admin-request-chat-badge[data-category="improvement"] {border-color: #fcd34d;background: #fefce8;color: #a16207}
.admin-request-chat-badge[data-category="bug"] {border-color: #fca5a5;background: #fef2f2;color: #b91c1c}
.admin-request-chat-meta {display: flex;align-items: center;justify-content: center;gap: 6px;flex-shrink: 0}
.admin-request-chat-delete-form {margin: 0;display: inline-flex}
.admin-request-chat-delete-button {display: flex;align-items: center;justify-content: center;width: 28px;height: 28px;border: none;border-radius: 50%;background: transparent;color: #9ca3af;padding: 0;cursor: pointer;opacity: 0.45;transition: opacity 0.15s, background-color 0.15s, color 0.15s}
.admin-request-chat-delete-button:hover {color: #ef4444;background: rgba(239, 68, 68, 0.1);opacity: 1}
.admin-request-chat-delete-button:focus-visible {outline: 2px solid #fda4af;outline-offset: 1px;opacity: 1}
.admin-request-chat-item .admin-request-chat-body {min-width: 0;margin: 0;margin-block: 0;color: #334155;line-height: 1.45;font-size: 0.82rem;white-space: normal;overflow-wrap: anywhere}
.admin-request-chat-media-grid {margin-top: 8px;display: grid;grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));gap: 6px}
.admin-request-chat-media-item {border: 1px solid #fecdd3;border-radius: 8px;background: #fff;overflow: hidden}
.admin-request-chat-media-open {display: block;width: 100%;padding: 0;border: 0;background: transparent;cursor: zoom-in}
.admin-request-chat-media-open:focus-visible {outline: 2px solid #fda4af;outline-offset: -2px}
.admin-request-chat-media-image,
.admin-request-chat-media-video {display: block;width: 100%;aspect-ratio: 4 / 3;object-fit: cover;background: #f8fafc}
.admin-request-chat-empty {border: 1px dashed #fecdd3;border-radius: 10px;padding: 10px;color: #64748b;font-size: 0.82rem}
.github-issue-comment-empty {margin: 4px 0 0;color: #94a3b8;font-size: 0.8rem}
.github-issues-empty-text {margin: 0;color: #64748b;font-size: 0.84rem}
@media (max-width: 768px) {.static-page-container {margin: 10px;padding: 20px}
.static-page-container h1 {font-size: 1.5em}
.static-page-container h2 {font-size: 1.2em}
.static-page-container h3 {font-size: 1em}
.disclosure-table th {width: 35%;white-space: normal;font-size: 0.9em}
.disclosure-table th,
.disclosure-table td {padding: 12px 10px}
.github-issues-section-header {align-items: center}
.github-issues-hero {padding: 14px}
.github-issues-overview {grid-template-columns: 1fr}
.github-issues-page h1 {font-size: 1.3rem}
.github-issues-section {padding: 10px}
.github-issues-section-header {flex-direction: column;align-items: flex-start}
.github-issues-section-grid {grid-template-columns: 1fr;gap: 10px}
.github-issue-row {padding: 0}
.github-issue-toggle {padding: 8px 28px 8px 8px}
.github-issue-summary-main {margin-right: 12px;flex-wrap: wrap;align-items: flex-start;gap: 6px}
.github-issue-title {width: 100%;flex: 1 1 100%}
.github-issue-details {padding: 0 8px 8px}
.admin-request-chat-form {padding: 8px}
.admin-request-chat-login {grid-template-columns: 1fr;align-items: flex-start}
.admin-request-chat-login-icon {width: 32px;height: 32px}
.admin-request-chat-login-actions {width: 100%}
.admin-request-chat-login-button {flex: 1 1 100%}
.admin-request-chat-stream {max-height: 52vh}
.admin-request-chat-item-header {align-items: flex-start}
.admin-request-chat-meta {flex-direction: row;align-items: center;gap: 4px}
.admin-request-chat-delete-button {opacity: 1}}
.fishing-ship-guide {max-width: 100%;margin: 0;padding: 0;font-family: var(--font-family-base);color: #333;line-height: 1.7}
.guide-hero {background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 50%, #0369a1 100%);color: white;padding: 60px 20px;text-align: center}
.guide-hero-content h1 {font-size: 1.8rem;font-weight: 700;margin: 0 0 16px;display: flex;align-items: center;justify-content: center;gap: 12px;flex-wrap: wrap}
.guide-hero-content h1 i {font-size: 2rem}
.guide-hero-subtitle {font-size: 1.1rem;opacity: 0.95;margin: 0;line-height: 1.8}
.sp-only {display: none}
.guide-beta-notice {background: #fffbeb;border-bottom: 1px solid #fcd34d;padding: 14px 20px}
.guide-beta-notice-inner {max-width: 800px;margin: 0 auto;display: flex;align-items: center;gap: 12px;font-size: 14px;color: #92400e;line-height: 1.6}
.guide-beta-notice-inner i {flex-shrink: 0;font-size: 18px;color: #d97706}
.guide-beta-notice-inner p {margin: 0}
.guide-samples {padding: 50px 20px;background: white}
.guide-samples h2 {text-align: center;font-size: 1.5rem;font-weight: 700;color: #1c1e21;margin: 0 0 8px}
.guide-samples-description {text-align: center;font-size: 0.95rem;color: #606770;margin: 0 0 24px}
.guide-sample-cards {display: flex;flex-direction: column;gap: 12px;max-width: 500px;margin: 0 auto}
.guide-sample-card {display: flex;align-items: center;gap: 16px;background: #f7f8fa;padding: 16px 20px;border-radius: 12px;text-decoration: none;transition: all 0.2s ease;border: 2px solid transparent}
.guide-sample-card:hover {background: #f0f9ff;border-color: #0ea5e9;transform: translateX(4px)}
.guide-sample-card-icon {width: 48px;height: 48px;background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);border-radius: 10px;display: flex;align-items: center;justify-content: center;flex-shrink: 0}
.guide-sample-card-icon i {font-size: 1.3rem;color: white}
.guide-sample-card-content {flex: 1}
.guide-sample-card-content h3 {font-size: 1rem;font-weight: 600;color: #1c1e21;margin: 0 0 4px}
.guide-sample-card-content p {font-size: 0.85rem;color: #606770;margin: 0}
.guide-sample-card-arrow {color: #94a3b8;font-size: 0.9rem;transition: transform 0.2s ease}
.guide-sample-card:hover .guide-sample-card-arrow {transform: translateX(4px);color: #0ea5e9}
.guide-features {padding: 50px 20px;background: #f7f8fa}
.guide-features h2 {text-align: center;font-size: 1.5rem;font-weight: 700;color: #1c1e21;margin: 0 0 30px}
.guide-feature-cards {display: grid;grid-template-columns: repeat(2, 1fr);gap: 20px;max-width: 700px;margin: 0 auto}
.guide-feature-card {background: white;border-radius: 12px;padding: 24px;text-align: center;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);transition: transform 0.2s ease, box-shadow 0.2s ease}
.guide-feature-card:hover {transform: translateY(-4px);box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12)}
.guide-feature-icon {width: 60px;height: 60px;background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);border-radius: 50%;display: flex;align-items: center;justify-content: center;margin: 0 auto 16px}
.guide-feature-icon i {font-size: 1.5rem;color: white}
.guide-feature-card h3 {font-size: 1.1rem;font-weight: 600;color: #1c1e21;margin: 0 0 8px}
.guide-feature-card p {font-size: 0.9rem;color: #606770;margin: 0}
.guide-considerations {padding: 50px 20px;background: #fff8f0}
.guide-considerations h2 {text-align: center;font-size: 1.5rem;font-weight: 700;color: #1c1e21;margin: 0 0 30px}
.guide-consideration-list {max-width: 700px;margin: 0 auto;display: flex;flex-direction: column;gap: 16px}
.guide-consideration-item {display: flex;gap: 16px;background: white;padding: 20px;border-radius: 12px;border-left: 4px solid #f59e0b;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06)}
.guide-consideration-icon {width: 44px;height: 44px;background: #fef3c7;border-radius: 50%;display: flex;align-items: center;justify-content: center;flex-shrink: 0}
.guide-consideration-icon i {font-size: 1.1rem;color: #d97706}
.guide-consideration-content {flex: 1}
.guide-consideration-content h3 {font-size: 1rem;font-weight: 600;color: #92400e;margin: 0 0 4px}
.guide-consideration-content p {font-size: 0.9rem;color: #78716c;margin: 0}
.guide-consideration-note {margin-top: 8px !important;padding: 8px 12px;background: #fef3c7;border-radius: 6px;font-size: 0.85rem !important;color: #92400e !important}
.guide-consideration-item--important {border-left-color: #dc2626;background: #fef2f2}
.guide-consideration-item--important .guide-consideration-icon {background: #fee2e2}
.guide-consideration-item--important .guide-consideration-icon i {color: #dc2626}
.guide-consideration-item--important .guide-consideration-content h3 {color: #991b1b}
.guide-steps {padding: 50px 20px;background: white}
.guide-steps h2 {text-align: center;font-size: 1.5rem;font-weight: 700;color: #1c1e21;margin: 0 0 30px}
.guide-step-list {max-width: 600px;margin: 0 auto}
.guide-step {display: flex;gap: 16px;margin-bottom: 24px;position: relative}
.guide-step:not(:last-child)::after {content: '';position: absolute;left: 19px;top: 44px;width: 2px;height: calc(100% - 20px);background: #e4e6eb}
.guide-step-number {width: 40px;height: 40px;background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);color: white;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-weight: 700;font-size: 1.1rem;flex-shrink: 0;position: relative;z-index: 1}
.guide-step-content {flex: 1;padding-top: 4px}
.guide-step-content h3 {font-size: 1rem;font-weight: 600;color: #1c1e21;margin: 0 0 4px}
.guide-step-content p {font-size: 0.9rem;color: #606770;margin: 0}
.guide-cta {padding: 50px 20px;background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);text-align: center}
.guide-cta h2 {font-size: 1.5rem;font-weight: 700;color: #1c1e21;margin: 0 0 12px}
.guide-cta > p {font-size: 1rem;color: #606770;margin: 0 0 24px}
.guide-cta-buttons {display: flex;flex-direction: column;gap: 12px;max-width: 320px;margin: 0 auto}
.guide-cta-button {display: flex;align-items: center;justify-content: center;gap: 8px;padding: 14px 24px;border-radius: 8px;font-size: 1rem;font-weight: 600;text-decoration: none;transition: all 0.2s ease}
.guide-cta-button--primary {background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);color: white}
.guide-cta-button--primary:hover {transform: translateY(-2px);box-shadow: 0 4px 12px rgba(14, 165, 233, 0.4)}
.guide-cta-button--secondary {background: white;color: #0284c7;border: 2px solid #0284c7}
.guide-cta-button--secondary:hover {background: #f0f9ff}
.guide-contact {padding: 40px 20px;background: white;text-align: center}
.guide-contact h2 {font-size: 1.2rem;font-weight: 600;color: #1c1e21;margin: 0 0 8px}
.guide-contact > p {font-size: 0.9rem;color: #606770;margin: 0 0 16px}
.guide-contact-links {display: flex;justify-content: center;gap: 12px}
.guide-contact-link {display: inline-flex;align-items: center;gap: 8px;padding: 10px 20px;background: #1c1e21;color: white;border-radius: 8px;text-decoration: none;font-size: 0.9rem;transition: all 0.2s ease}
.guide-contact-link:hover {background: #333;transform: translateY(-2px)}
.guide-contact-link i {font-size: 1.1rem}
.guide-back {padding: 20px;background: #f7f8fa;text-align: center}
.guide-back-link {display: inline-flex;align-items: center;gap: 8px;color: #606770;text-decoration: none;font-size: 0.9rem;transition: color 0.2s ease}
.guide-back-link:hover {color: #1877f2}
@media (max-width: 768px) {.guide-hero {padding: 40px 16px}
.guide-hero-content h1 {font-size: 1.4rem}
.guide-hero-content h1 i {font-size: 1.6rem}
.guide-hero-subtitle {font-size: 1rem}
.sp-only {display: inline}
.guide-samples {padding: 40px 16px}
.guide-samples h2 {font-size: 1.3rem}
.guide-sample-card {padding: 14px 16px;gap: 12px}
.guide-sample-card-icon {width: 44px;height: 44px}
.guide-features,
.guide-considerations,
.guide-steps,
.guide-cta {padding: 40px 16px}
.guide-features h2,
.guide-considerations h2,
.guide-steps h2,
.guide-cta h2 {font-size: 1.3rem}
.guide-consideration-item {padding: 16px;gap: 12px}
.guide-consideration-icon {width: 40px;height: 40px}
.guide-consideration-content h3 {font-size: 0.95rem}
.guide-feature-cards {grid-template-columns: 1fr}
.guide-feature-card {padding: 20px}
.guide-step {gap: 12px}
.guide-step-number {width: 36px;height: 36px;font-size: 1rem}
.guide-step:not(:last-child)::after {left: 17px;top: 40px}
.guide-cta-buttons {max-width: 100%}}
body.sample-page .main-content {display: flex;flex-direction: column;align-items: stretch;justify-content: flex-start;overflow: auto}
.sample-page-notice {background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);color: white;padding: 12px 16px;display: flex;align-items: center;justify-content: center;gap: 8px;font-size: 0.9rem;text-align: center;position: sticky;top: 0;z-index: 100;flex-wrap: wrap}
.sample-page-notice i {font-size: 1.1rem;flex-shrink: 0}
.sample-page-notice-sub {width: 100%;font-size: 0.75rem;opacity: 0.9;margin-top: 4px}
.sample-page-cta {background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);color: white;padding: 20px 16px;display: flex;align-items: center;justify-content: center;gap: 12px;flex-wrap: wrap;font-size: 0.95rem;margin-top: auto}
.sample-page-cta-btn {display: inline-flex;align-items: center;gap: 6px;background: white;color: #0284c7;padding: 10px 20px;border-radius: 20px;text-decoration: none;font-size: 0.9rem;font-weight: 600;transition: all 0.2s ease}
.sample-page-cta-btn:hover {transform: scale(1.05);box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2)}
.fishing-ship-show-no-image.sample-image {display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 12px;background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);border: 2px dashed #0ea5e9}
.sample-image-label {font-size: 0.85rem;color: #0369a1}
.sample-map {background: #f1f5f9;border: 2px dashed #94a3b8;border-radius: 8px;padding: 40px 20px;margin-bottom: 16px}
.sample-map-placeholder {display: flex;flex-direction: column;align-items: center;gap: 12px;color: #64748b}
.sample-map-placeholder i {font-size: 3rem;color: #94a3b8}
.sample-certificate .sample-certificate-placeholder {display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 12px;background: #f8fafc;border: 2px dashed #cbd5e1;border-radius: 8px;padding: 40px 20px;color: #64748b}
.sample-certificate-placeholder i {font-size: 2.5rem;color: #94a3b8}
.sample-dashboard-features {background: #f0f9ff;padding: 40px 20px;margin-top: 40px;border-radius: 12px}
.sample-dashboard-features h2 {text-align: center;font-size: 1.3rem;font-weight: 700;color: #1c1e21;margin: 0 0 24px}
.sample-dashboard-features h2 i {color: #0ea5e9;margin-right: 8px}
.sample-dashboard-features-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));gap: 20px;max-width: 900px;margin: 0 auto}
.sample-dashboard-feature {background: white;padding: 20px;border-radius: 10px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06)}
.sample-dashboard-feature i {font-size: 1.8rem;color: #0ea5e9;margin-bottom: 12px}
.sample-dashboard-feature h3 {font-size: 1rem;font-weight: 600;color: #1c1e21;margin: 0 0 8px}
.sample-dashboard-feature p {font-size: 0.85rem;color: #606770;margin: 0;line-height: 1.6}
.captain-ship-card-v2__stats {margin: 12px 0;padding: 8px 12px;background: #f0f9ff;border-radius: 6px}
.captain-ship-card-v2__stat {display: flex;align-items: center;gap: 8px;font-size: 0.85rem;color: #0369a1}
.captain-ship-card-v2__stat i {color: #0ea5e9}
.guide-samples-category {font-size: 1rem;font-weight: 600;color: #1c1e21;margin: 24px 0 12px;padding-left: 8px;display: flex;align-items: center;gap: 8px;max-width: 500px;margin-left: auto;margin-right: auto}
.guide-samples-category i {color: #0ea5e9}
.sample-ship-list-container {max-width: 800px;margin: 0 auto;padding: 20px}
.sample-ship-list-header {text-align: center;margin-bottom: 24px}
.sample-ship-list-header h1 {font-size: 1.5rem;font-weight: 700;color: #1c1e21;margin: 0 0 8px}
.sample-ship-list-header p {color: #606770;margin: 0}
.sample-ship-list-filter {display: flex;align-items: center;gap: 8px;margin-bottom: 20px;flex-wrap: wrap}
.sample-filter-label {font-size: 0.85rem;color: #606770}
.sample-filter-btn {padding: 6px 12px;border: 1px solid #e4e6eb;border-radius: 20px;background: white;font-size: 0.85rem;color: #606770;cursor: pointer}
.sample-filter-btn.active {background: #0ea5e9;border-color: #0ea5e9;color: white}
.sample-ship-list-cards {display: flex;flex-direction: column;gap: 16px}
.sample-ship-list-card {background: white;border-radius: 12px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);overflow: hidden;display: flex}
.sample-ship-list-card-image {width: 120px;min-height: 120px;background: #f0f9ff;position: relative;flex-shrink: 0}
.sample-ship-list-card-no-image {width: 100%;height: 100%;display: flex;align-items: center;justify-content: center}
.sample-ship-list-card-no-image i {font-size: 2rem;color: #0ea5e9}
.sample-ship-list-card-badge {position: absolute;top: 8px;left: 8px;background: #10b981;color: white;font-size: 0.7rem;padding: 2px 8px;border-radius: 10px}
.sample-ship-list-card-body {flex: 1;padding: 12px;display: flex;flex-direction: column}
.sample-ship-list-card-name {font-size: 1rem;font-weight: 600;color: #1c1e21;margin: 0 0 6px}
.sample-ship-list-card-meta {font-size: 0.8rem;color: #606770;display: flex;gap: 12px;margin-bottom: 8px}
.sample-ship-list-card-price {display: flex;align-items: baseline;gap: 4px;margin-bottom: 8px}
.sample-ship-list-card-price-label {font-size: 0.75rem;color: #606770}
.sample-ship-list-card-price-value {font-size: 1.1rem;font-weight: 700;color: #0ea5e9}
.sample-ship-list-card-price-value small {font-size: 0.8rem}
.sample-ship-list-card-schedule {font-size: 0.8rem;color: #10b981;margin-bottom: 8px}
.sample-ship-list-card-btn {display: inline-flex;align-items: center;gap: 4px;font-size: 0.85rem;color: #0ea5e9;text-decoration: none;margin-top: auto}
.sample-reservation-form-container {max-width: 500px;margin: 0 auto;padding: 20px}
.sample-reservation-form-header {margin-bottom: 20px}
.sample-reservation-form-header h1 {font-size: 1.3rem;font-weight: 700;color: #1c1e21;margin: 0}
.sample-reservation-schedule-info {background: #f0f9ff;border-radius: 12px;padding: 16px;margin-bottom: 20px}
.sample-reservation-schedule-ship {display: flex;align-items: center;gap: 8px;font-weight: 600;color: #0369a1;margin-bottom: 12px}
.sample-reservation-schedule-details {display: flex;gap: 16px}
.sample-reservation-schedule-date {display: flex;flex-direction: column;align-items: center;background: white;padding: 8px 12px;border-radius: 8px}
.sample-schedule-date-month {font-size: 0.8rem;color: #0369a1}
.sample-schedule-date-day {font-size: 1.5rem;font-weight: 700;color: #0369a1}
.sample-schedule-date-wday {font-size: 0.8rem;color: #606770}
.sample-reservation-schedule-meta {flex: 1}
.sample-schedule-fish {font-weight: 600;color: #1c1e21;margin-bottom: 4px}
.sample-schedule-time,
.sample-schedule-price {font-size: 0.85rem;color: #606770;margin-bottom: 2px}
.sample-reservation-form {background: white;border-radius: 12px;padding: 20px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06)}
.sample-form-group {margin-bottom: 20px}
.sample-form-group label {display: block;font-size: 0.9rem;font-weight: 600;color: #1c1e21;margin-bottom: 8px}
.sample-number-input {display: flex;align-items: center;gap: 12px}
.sample-number-btn {width: 40px;height: 40px;border: 1px solid #e4e6eb;border-radius: 8px;background: white;font-size: 1.2rem;cursor: pointer}
.sample-number-input input {width: 60px;text-align: center;font-size: 1.2rem;font-weight: 600;border: 1px solid #e4e6eb;border-radius: 8px;padding: 8px}
.sample-form-hint {font-size: 0.8rem;color: #606770;margin-top: 6px}
.sample-form-textarea {width: 100%;padding: 12px;border: 1px solid #e4e6eb;border-radius: 8px;font-size: 0.9rem;resize: vertical;min-height: 80px}
.sample-reservation-summary {background: #f7f8fa;border-radius: 8px;padding: 16px;margin-bottom: 16px}
.sample-reservation-summary h3 {font-size: 0.9rem;font-weight: 600;color: #1c1e21;margin: 0 0 12px}
.sample-summary-row {display: flex;justify-content: space-between;font-size: 0.9rem;color: #606770;margin-bottom: 8px}
.sample-summary-total {display: flex;justify-content: space-between;font-size: 1.1rem;font-weight: 700;color: #1c1e21;padding-top: 8px;border-top: 1px solid #e4e6eb}
.sample-summary-note {font-size: 0.8rem;color: #606770;margin: 12px 0 0}
.sample-reservation-agreement {margin-bottom: 16px}
.sample-reservation-agreement label {display: flex;align-items: center;gap: 8px;font-size: 0.85rem;color: #606770}
.sample-reservation-agreement a {color: #0ea5e9}
.sample-reservation-submit {width: 100%;padding: 14px;background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);color: white;border: none;border-radius: 8px;font-size: 1rem;font-weight: 600;cursor: pointer}
.sample-reservation-complete-container {max-width: 500px;margin: 0 auto;padding: 20px}
.sample-reservation-complete-header {text-align: center;margin-bottom: 24px}
.sample-complete-icon {width: 80px;height: 80px;background: #d1fae5;border-radius: 50%;display: flex;align-items: center;justify-content: center;margin: 0 auto 16px}
.sample-complete-icon i {font-size: 2.5rem;color: #10b981}
.sample-reservation-complete-header h1 {font-size: 1.5rem;font-weight: 700;color: #1c1e21;margin: 0 0 8px}
.sample-reservation-complete-header p {color: #606770;margin: 0}
.sample-reservation-complete-card {background: white;border-radius: 12px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);overflow: hidden;margin-bottom: 24px}
.sample-complete-card-header {background: #f0f9ff;padding: 12px 16px;display: flex;justify-content: space-between;align-items: center}
.sample-complete-card-label {font-size: 0.85rem;color: #606770}
.sample-complete-card-number {font-weight: 600;color: #0369a1}
.sample-complete-card-body {padding: 16px}
.sample-complete-ship {display: flex;align-items: center;gap: 8px;font-weight: 600;color: #1c1e21;margin-bottom: 16px}
.sample-complete-schedule {display: flex;gap: 16px;padding-bottom: 16px;border-bottom: 1px solid #e4e6eb;margin-bottom: 16px}
.sample-complete-date {display: flex;flex-direction: column;align-items: center;background: #f0f9ff;padding: 8px 12px;border-radius: 8px}
.sample-complete-month {font-size: 0.8rem;color: #0369a1}
.sample-complete-day {font-size: 1.5rem;font-weight: 700;color: #0369a1}
.sample-complete-wday {font-size: 0.8rem;color: #606770}
.sample-complete-meta {flex: 1;font-size: 0.9rem;color: #606770}
.sample-complete-meta div {margin-bottom: 4px}
.sample-complete-details {margin-bottom: 16px}
.sample-complete-detail-row {display: flex;justify-content: space-between;font-size: 0.9rem;color: #606770;margin-bottom: 8px}
.sample-complete-detail-row.total {font-size: 1.1rem;font-weight: 700;color: #1c1e21}
.sample-complete-payment-note {display: flex;align-items: center;gap: 8px;background: #fef3c7;padding: 12px;border-radius: 8px;font-size: 0.85rem;color: #92400e}
.sample-complete-next-steps {background: white;border-radius: 12px;padding: 20px;margin-bottom: 24px}
.sample-complete-next-steps h2 {font-size: 1rem;font-weight: 600;color: #1c1e21;margin: 0 0 12px}
.sample-complete-next-steps ol {margin: 0;padding-left: 20px}
.sample-complete-next-steps li {font-size: 0.9rem;color: #606770;margin-bottom: 8px}
.sample-complete-actions {display: flex;flex-direction: column;gap: 12px}
.sample-complete-btn {display: flex;align-items: center;justify-content: center;gap: 8px;padding: 14px;border-radius: 8px;font-size: 1rem;font-weight: 600;text-decoration: none}
.sample-complete-btn.primary {background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);color: white}
.sample-complete-btn.secondary {background: white;color: #606770;border: 1px solid #e4e6eb}
.sample-my-reservations-container {max-width: 600px;margin: 0 auto;padding: 20px}
.sample-my-reservations-header {text-align: center;margin-bottom: 20px}
.sample-my-reservations-header h1 {font-size: 1.3rem;font-weight: 700;color: #1c1e21;margin: 0 0 8px}
.sample-my-reservations-header p {color: #606770;margin: 0}
.sample-my-reservations-tabs {display: flex;gap: 8px;margin-bottom: 20px}
.sample-tab {flex: 1;padding: 10px;border: 1px solid #e4e6eb;border-radius: 8px;background: white;font-size: 0.85rem;color: #606770;cursor: pointer}
.sample-tab.active {background: #0ea5e9;border-color: #0ea5e9;color: white}
.sample-my-reservations-list {display: flex;flex-direction: column;gap: 12px}
.sample-my-reservation-card {background: white;border-radius: 12px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);padding: 16px}
.sample-my-reservation-card.cancelled {opacity: 0.6}
.sample-my-reservation-status {margin-bottom: 12px}
.sample-status-badge {display: inline-block;padding: 4px 10px;border-radius: 20px;font-size: 0.75rem;font-weight: 600}
.sample-status-badge.confirmed {background: #d1fae5;color: #059669}
.sample-status-badge.completed {background: #e0e7ff;color: #4f46e5}
.sample-status-badge.cancelled {background: #fee2e2;color: #dc2626}
.sample-my-reservation-main {display: flex;gap: 12px;margin-bottom: 12px}
.sample-my-reservation-date {display: flex;flex-direction: column;align-items: center;background: #f7f8fa;padding: 8px 12px;border-radius: 8px;min-width: 60px}
.sample-res-month {font-size: 0.75rem;color: #606770}
.sample-res-day {font-size: 1.3rem;font-weight: 700;color: #1c1e21}
.sample-res-wday {font-size: 0.75rem;color: #606770}
.sample-my-reservation-info {flex: 1}
.sample-my-reservation-ship {font-size: 1rem;font-weight: 600;color: #1c1e21;margin: 0 0 6px}
.sample-my-reservation-meta {font-size: 0.8rem;color: #606770;display: flex;flex-wrap: wrap;gap: 8px;margin-bottom: 6px}
.sample-my-reservation-details {font-size: 0.85rem;color: #1c1e21;display: flex;gap: 12px}
.sample-my-reservation-actions {display: flex;gap: 8px;padding-top: 12px;border-top: 1px solid #e4e6eb}
.sample-my-reservation-btn {flex: 1;padding: 10px;border-radius: 8px;font-size: 0.85rem;font-weight: 600;text-align: center;text-decoration: none}
.sample-my-reservation-btn.detail {background: #f0f9ff;color: #0369a1}
.sample-my-reservation-btn.cancel {background: #fef2f2;color: #dc2626}
.sample-captain-reservations-container {max-width: 700px;margin: 0 auto;padding: 20px}
.sample-captain-reservations-header {margin-bottom: 20px}
.sample-captain-reservations-header h1 {font-size: 1.2rem;font-weight: 700;color: #1c1e21;margin: 0}
.sample-captain-reservations-summary {display: grid;grid-template-columns: repeat(3, 1fr);gap: 12px;margin-bottom: 20px}
.sample-summary-card {background: white;border-radius: 12px;padding: 16px;text-align: center;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06)}
.sample-summary-value {display: block;font-size: 1.5rem;font-weight: 700;color: #0ea5e9}
.sample-summary-label {font-size: 0.75rem;color: #606770}
.sample-captain-reservations-filter {display: flex;gap: 8px;margin-bottom: 20px;flex-wrap: wrap}
.sample-captain-reservations-list {display: flex;flex-direction: column;gap: 12px}
.sample-captain-reservation-card {background: white;border-radius: 12px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);overflow: hidden}
.sample-captain-reservation-header {display: flex;justify-content: space-between;align-items: center;padding: 12px 16px;background: #f7f8fa}
.sample-captain-status-badge {display: inline-block;padding: 4px 10px;border-radius: 20px;font-size: 0.75rem;font-weight: 600}
.sample-captain-status-badge.confirmed {background: #d1fae5;color: #059669}
.sample-captain-status-badge.completed {background: #e0e7ff;color: #4f46e5}
.sample-captain-reservation-id {font-size: 0.8rem;color: #606770}
.sample-captain-reservation-body {padding: 16px}
.sample-captain-reservation-schedule {display: flex;align-items: center;gap: 12px;margin-bottom: 12px}
.sample-captain-res-date {font-weight: 600;color: #1c1e21}
.sample-captain-fish {background: #f0f9ff;color: #0369a1;padding: 4px 10px;border-radius: 20px;font-size: 0.85rem}
.sample-captain-reservation-user {display: flex;gap: 16px;margin-bottom: 12px}
.sample-captain-user-name,
.sample-captain-user-phone {font-size: 0.9rem;color: #1c1e21}
.sample-captain-reservation-details {display: flex;gap: 16px;font-size: 0.9rem;color: #606770;margin-bottom: 12px}
.sample-captain-reservation-note {background: #fef3c7;padding: 10px 12px;border-radius: 8px;font-size: 0.85rem;color: #92400e}
.sample-captain-reservation-actions {display: flex;gap: 8px;padding: 12px 16px;background: #f7f8fa}
.sample-captain-action-btn {flex: 1;padding: 10px;border: none;border-radius: 8px;font-size: 0.85rem;font-weight: 600;cursor: pointer}
.sample-captain-action-btn.complete {background: #10b981;color: white}
.sample-captain-action-btn.no-show {background: #ef4444;color: white}
.sample-emails-container {max-width: 700px;margin: 0 auto;padding: 20px}
.sample-emails-header {text-align: center;margin-bottom: 24px}
.sample-emails-header h1 {font-size: 1.3rem;font-weight: 700;color: #1c1e21;margin: 0 0 8px}
.sample-emails-header p {color: #606770;margin: 0}
.sample-emails-flow {background: #f0f9ff;border-radius: 12px;padding: 20px;margin-bottom: 24px}
.sample-emails-flow h2 {font-size: 1rem;font-weight: 600;color: #1c1e21;margin: 0 0 16px}
.sample-flow-legend {display: flex;flex-wrap: wrap;gap: 8px;margin-bottom: 12px}
.sample-flow-legend-item {display: inline-flex;align-items: center;gap: 6px;font-size: 0.75rem;color: #475569;background: #ffffff;border: 1px solid #e2e8f0;border-radius: 999px;padding: 4px 10px}
.sample-flow-list {list-style: none;padding: 0;margin: 0;display: flex;flex-direction: column;gap: 12px}
.sample-flow-item {position: relative;padding-left: 16px}
.sample-flow-item::before {content: "";position: absolute;left: 8px;top: 0;bottom: -12px;width: 2px;background: #e2e8f0}
.sample-flow-item:last-child::before {bottom: 12px}
.sample-flow-step {display: flex;align-items: flex-start;gap: 12px}
.sample-flow-icon-wrap {display: flex;flex-direction: column;align-items: center;gap: 6px;flex-shrink: 0}
.sample-flow-icon {width: 48px;height: 48px;border-radius: 50%;display: flex;align-items: center;justify-content: center;flex-shrink: 0}
.sample-flow-icon.user {background: #dbeafe;color: #2563eb}
.sample-flow-icon.mail {background: #d1fae5;color: #059669}
.sample-flow-icon-text {font-size: 0.72rem;color: #475569}
.sample-flow-step-body {background: #ffffff;border: 1px solid #e2e8f0;border-radius: 10px;padding: 12px 14px;box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);flex: 1}
.sample-flow-step-title {display: flex;align-items: center;gap: 8px;font-size: 0.9rem;font-weight: 600;color: #0f172a;margin: 0 0 4px}
.sample-flow-step-number {display: inline-flex;align-items: center;justify-content: center;width: 22px;height: 22px;border-radius: 50%;background: #0ea5e9;color: #ffffff;font-size: 0.7rem;font-weight: 700}
.sample-flow-step-text {font-size: 0.85rem;color: #475569;margin: 0 0 8px}
.sample-flow-mail {display: flex;flex-direction: column;align-items: flex-start;gap: 8px;font-size: 0.82rem;color: #0f766e;background: #ecfeff;border: 1px solid #bae6fd;border-radius: 8px;padding: 6px 8px}
.sample-flow-mail-title {display: flex;align-items: center;gap: 6px;font-weight: 600;color: #0f172a}
.sample-flow-mail i {color: #0ea5e9}
.sample-flow-mail-recipients {display: flex;flex-wrap: wrap;gap: 6px}
.sample-flow-recipient-badge {font-size: 0.72rem;font-weight: 600;border-radius: 999px;padding: 2px 8px}
.sample-flow-recipient-badge.user {background: #dbeafe;color: #1d4ed8}
.sample-flow-recipient-badge.captain {background: #fef3c7;color: #92400e}
.sample-flow-mail-text {margin: 0;color: #0f766e}
.sample-emails-list {display: flex;flex-direction: column;gap: 20px}
.sample-email-card {background: white;border-radius: 12px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);overflow: hidden}
.sample-email-card-header {display: flex;align-items: center;gap: 12px;padding: 12px 16px;background: #f7f8fa}
.sample-email-badge {padding: 4px 10px;border-radius: 20px;font-size: 0.75rem;font-weight: 600}
.sample-email-badge.captain {background: #fef3c7;color: #92400e}
.sample-email-badge.user {background: #dbeafe;color: #1d4ed8}
.sample-email-card-header h3 {font-size: 1rem;font-weight: 600;color: #1c1e21;margin: 0}
.sample-email-preview {padding: 16px}
.sample-email-meta {font-size: 0.85rem;color: #606770;margin-bottom: 16px;padding-bottom: 16px;border-bottom: 1px solid #e4e6eb}
.sample-email-meta div {margin-bottom: 4px}
.sample-email-body {font-size: 0.9rem;color: #1c1e21;line-height: 1.7}
.sample-email-body p {margin: 0 0 12px}
.sample-email-info-box {background: #f7f8fa;border-radius: 8px;padding: 16px;margin: 12px 0}
.sample-email-info-box.highlight {background: #f0f9ff;border: 1px solid #bae6fd}
.sample-email-info-box.warning {background: #fef2f2;border: 1px solid #fecaca}
.sample-email-info-box p {margin: 0 0 8px}
.sample-email-info-box ul {margin: 0;padding-left: 20px}
.sample-email-info-box li {margin-bottom: 4px}
.sample-email-body > ul {margin: 8px 0;padding-left: 20px}
.sample-email-body > ul li {margin-bottom: 4px}
.sample-email-body h4 {font-size: 1.1rem;font-weight: 600;color: #1c1e21;margin: 0 0 16px;padding-bottom: 8px;border-bottom: 2px solid #0ea5e9}
.sample-email-warning {background: #fef3c7;border-left: 4px solid #f59e0b;padding: 12px 16px;margin: 12px 0;border-radius: 0 8px 8px 0}
.sample-email-table {width: 100%;border-collapse: collapse;margin: 8px 0}
.sample-email-table th,
.sample-email-table td {padding: 8px 12px;text-align: left;border-bottom: 1px solid #e4e6eb}
.sample-email-table th {background: #f7f8fa;font-weight: 600;color: #606770;width: 120px}
.sample-email-table td {color: #1c1e21}
.sample-emails-section-title {font-size: 1rem;font-weight: 600;color: #1c1e21;margin: 32px 0 16px;padding: 12px 16px;background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);border-radius: 8px;display: flex;align-items: center;gap: 8px}
.sample-emails-section-title:first-child {margin-top: 0}
.sample-emails-section-title i {color: #0ea5e9}
.sample-flow-icon.captain {background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);color: #92400e}
@media (max-width: 768px) {.sample-page-notice {padding: 10px 12px;font-size: 0.85rem}
.sample-page-cta {flex-direction: column;gap: 12px;padding: 16px 12px;font-size: 0.85rem}
.guide-samples-category {padding-left: 16px}
.sample-ship-list-card {flex-direction: column}
.sample-ship-list-card-image {width: 100%;height: 120px}
.sample-captain-reservations-summary {grid-template-columns: 1fr}
.sample-flow-item {padding-left: 0}
.sample-flow-item::before {display: none}
.sample-dashboard-features {padding: 30px 16px;margin-top: 30px}
.sample-dashboard-features-grid {grid-template-columns: 1fr}}
.captain-manual h1 {display: flex;align-items: center;gap: 12px;border-bottom-color: #0ea5e9}
.captain-manual h1 i {color: #0ea5e9}
.captain-manual h2 {display: flex;align-items: center;gap: 8px}
.captain-manual h2 i {color: #0ea5e9}
.captain-manual__toc {background: #f0f9ff;border-radius: 12px;padding: 20px 24px;margin-bottom: 30px}
.captain-manual__toc h2 {font-size: 1.1rem;margin: 0 0 12px;padding: 0;border: none}
.captain-manual__toc ol {margin: 0;padding-left: 20px;display: grid;grid-template-columns: repeat(2, 1fr);gap: 8px 24px}
.captain-manual__toc li {list-style-type: decimal;margin: 0}
.captain-manual__toc a {color: #0369a1;text-decoration: none}
.captain-manual__toc a:hover {text-decoration: underline}
.captain-manual__steps {margin: 16px 0;padding: 0;counter-reset: step-counter}
.captain-manual__steps li {list-style: none;margin-bottom: 16px;padding-left: 48px;position: relative}
.captain-manual__steps li::before {content: counter(step-counter);counter-increment: step-counter;position: absolute;left: 0;top: 0;width: 32px;height: 32px;background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);color: white;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-weight: 600;font-size: 0.9rem}
.captain-manual__steps li strong {display: block;font-size: 1rem;margin-bottom: 4px}
.captain-manual__steps li p {margin: 0;font-size: 0.9rem;color: #606770}
.captain-manual__steps li ul {margin-top: 8px}
.captain-manual__table {width: 100%;border-collapse: collapse;margin: 20px 0;font-size: 0.9rem}
.captain-manual__table th,
.captain-manual__table td {padding: 12px;border: 1px solid #e4e6eb;text-align: left;vertical-align: top}
.captain-manual__table th {background: #f7f8fa;font-weight: 600;color: #1c1e21}
.captain-manual__table td .required {display: inline-block;background: #dc2626;color: white;font-size: 0.7rem;padding: 2px 6px;border-radius: 4px}
.captain-manual__note,
.captain-manual__warning,
.captain-manual__alert {display: flex;gap: 16px;padding: 16px 20px;border-radius: 12px;margin: 20px 0}
.captain-manual__greeting {display: flex;gap: 16px;background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);border: 1px solid #e2e8f0;border-radius: 12px;padding: 20px;margin: 20px 0}
.captain-manual__greeting-icon {width: 48px;height: 48px;background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);border-radius: 50%;display: flex;align-items: center;justify-content: center;flex-shrink: 0}
.captain-manual__greeting-icon i {color: #fff;font-size: 1.4rem}
.captain-manual__greeting-content h3 {margin: 0 0 12px;font-size: 1.1rem;color: #1e293b;border-bottom: none;padding-bottom: 0}
.captain-manual__greeting-content p {margin: 0 0 10px;font-size: 0.95rem;color: #475569;line-height: 1.8}
.captain-manual__greeting-content p:last-child {margin-bottom: 0}
.captain-manual__note {background: #f0f9ff;border-left: 4px solid #0ea5e9}
.captain-manual__note > i {color: #0ea5e9;font-size: 1.2rem;flex-shrink: 0;margin-top: 2px}
.captain-manual__warning {background: #fef3c7;border-left: 4px solid #f59e0b}
.captain-manual__warning > i {color: #d97706;font-size: 1.2rem;flex-shrink: 0;margin-top: 2px}
.captain-manual__alert {background: #fee2e2;border-left: 4px solid #dc2626}
.captain-manual__alert > i {color: #dc2626;font-size: 1.2rem;flex-shrink: 0;margin-top: 2px}
.captain-manual__note div,
.captain-manual__warning div,
.captain-manual__alert div {flex: 1}
.captain-manual__note strong,
.captain-manual__warning strong,
.captain-manual__alert strong {display: block;margin-bottom: 8px;font-size: 0.95rem}
.captain-manual__note p,
.captain-manual__warning p,
.captain-manual__alert p {margin: 0 0 8px;font-size: 0.9rem}
.captain-manual__note ul,
.captain-manual__warning ul,
.captain-manual__alert ul {margin: 8px 0 0}
.captain-manual__comparison {display: grid;grid-template-columns: repeat(2, 1fr);gap: 16px;margin: 20px 0}
.captain-manual__comparison-item {background: #f7f8fa;border-radius: 12px;padding: 20px}
.captain-manual__comparison-item h4 {display: flex;align-items: center;gap: 8px;font-size: 1rem;font-weight: 600;color: #1c1e21;margin: 0 0 8px}
.captain-manual__comparison-item h4 i {color: #0ea5e9}
.captain-manual__comparison-item p {font-size: 0.9rem;color: #606770;margin: 0 0 12px}
.captain-manual__comparison-item ul {margin: 0}
.captain-manual__comparison-item li {font-size: 0.85rem;margin-bottom: 4px}
.captain-manual__disclaimer {background: #f8fafc;border: 1px solid #e2e8f0;border-radius: 12px;padding: 24px;margin: 20px 0}
.captain-manual__disclaimer h3 {font-size: 1rem;color: #1c1e21;margin: 0 0 12px;padding-bottom: 8px;border-bottom: 1px solid #e2e8f0}
.captain-manual__disclaimer h3:not(:first-child) {margin-top: 24px}
.captain-manual__disclaimer p {font-size: 0.9rem;margin: 0 0 12px}
.captain-manual__disclaimer ul {margin: 8px 0 0}
.captain-manual__disclaimer li {font-size: 0.9rem;margin-bottom: 6px}
.captain-manual__footer {text-align: center;color: #606770;font-size: 0.9rem;margin-top: 40px;padding-top: 20px;border-top: 1px solid #e4e6eb}
.captain-manual__footer a {color: #0ea5e9;text-decoration: none}
.captain-manual__footer a:hover {text-decoration: underline}
.captain-manual__contact {margin-top: 24px;display: flex;justify-content: center}
.captain-manual__twitter-link {display: flex;align-items: center;gap: 12px;padding: 12px 20px;background: #f0f9ff;border: 1px solid #bae6fd;border-radius: 12px;text-decoration: none;transition: all 0.2s ease}
.captain-manual__twitter-link:hover {background: #e0f2fe;border-color: #7dd3fc;transform: translateY(-1px)}
.captain-manual__twitter-icon {width: 36px;height: 36px;background: #000;border-radius: 50%;display: flex;align-items: center;justify-content: center;color: #fff}
.captain-manual__twitter-info {display: flex;flex-direction: column}
.captain-manual__twitter-label {font-size: 0.75rem;color: #64748b}
.captain-manual__twitter-handle {font-size: 1rem;font-weight: 600;color: #0284c7}
@media (max-width: 768px) {.captain-manual__greeting {flex-direction: column;align-items: center;text-align: center;padding: 16px}
.captain-manual__greeting-icon {width: 44px;height: 44px}
.captain-manual__greeting-content h3 {font-size: 1rem}
.captain-manual__greeting-content p {font-size: 0.9rem}
.captain-manual__toc ol {grid-template-columns: 1fr}
.captain-manual__comparison {grid-template-columns: 1fr}
.captain-manual__table {font-size: 0.8rem}
.captain-manual__table th,
.captain-manual__table td {padding: 8px}
.captain-manual__steps li {padding-left: 40px}
.captain-manual__steps li::before {width: 28px;height: 28px;font-size: 0.8rem}
.captain-manual__note,
.captain-manual__warning,
.captain-manual__alert {padding: 14px 16px;gap: 12px}
.captain-manual__disclaimer {padding: 16px}}
.reservation-test-guide {border: 1px solid #e5e7eb;box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08)}
.reservation-test-guide__hero {background: linear-gradient(135deg, #0f766e 0%, #0f766e 38%, #0f172a 100%);color: #fff;border-radius: 12px;padding: 24px;margin-bottom: 24px}
.reservation-test-guide__eyebrow {margin: 0 0 8px;font-size: 0.78rem;letter-spacing: 0.12em;font-weight: 700;opacity: 0.88}
.reservation-test-guide__hero h1 {color: #fff;border-bottom: none;margin: 0 0 10px;padding: 0}
.reservation-test-guide__lead {margin: 0;font-size: 1rem;color: rgba(255, 255, 255, 0.94)}
.reservation-test-guide__scope h2 {margin-top: 0}
.reservation-test-guide__scope-grid {display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: 14px}
.reservation-test-guide__scope-card {background: #f8fafc;border: 1px solid #e2e8f0;border-radius: 10px;padding: 14px 16px}
.reservation-test-guide__scope-card h3 {margin-top: 0;margin-bottom: 10px;color: #0f172a}
.reservation-test-guide__scope-card ol {margin: 0;padding-left: 20px}
.reservation-test-guide__scope-card li {list-style: decimal;margin-bottom: 6px}
.reservation-test-guide__panel {background: #f8fafc;border: 1px solid #e2e8f0;border-radius: 10px;padding: 14px 16px}
.reservation-test-guide__panel h2 {margin-top: 0}
.reservation-test-guide__warning {background: #fff5f5;border: 2px solid #fca5a5;border-radius: 10px;padding: 14px 16px}
.reservation-test-guide__warning h2 {border-bottom: none;margin-top: 0;color: #b91c1c}
.reservation-test-guide__warning ul {margin-bottom: 0}
.reservation-test-guide__warning strong {color: #991b1b}
.reservation-test-guide__warning--name {background: #fff7ed;border-color: #fdba74}
.reservation-test-guide__warning--name h2 {color: #9a3412}
.reservation-test-guide__warning--name strong {color: #9a3412}
.reservation-test-guide__sample-image-wrap {margin: 0;padding: 10px;border-radius: 10px;border: 1px dashed #94a3b8;background: #fff;text-align: center;cursor: zoom-in}
.reservation-test-guide__sample-gallery {display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: 12px;margin: 12px 0}
.reservation-test-guide__sample-image {max-width: 220px;width: 100%;height: auto;border-radius: 8px;transition: transform 0.2s ease, box-shadow 0.2s ease, max-width 0.2s ease}
.reservation-test-guide__sample-image.is-expanded {max-width: 94vw;max-height: 92vh;width: auto;height: auto;box-shadow: 0 14px 36px rgba(15, 23, 42, 0.45);cursor: zoom-out;z-index: 2;position: relative}
.reservation-test-guide__sample-image-wrap.is-fullscreen {position: fixed;inset: 0;z-index: 1200;margin: 0;border: none;border-radius: 0;padding: 16px;background: rgba(15, 23, 42, 0.88);display: flex;align-items: center;justify-content: center}
.reservation-test-guide__sample-image-wrap.is-fullscreen figcaption {position: fixed;bottom: 16px;left: 0;right: 0;color: #e2e8f0}
.reservation-test-guide__sample-image-wrap figcaption {margin-top: 8px;font-size: 0.85rem;color: #475569}
.reservation-test-guide__note-danger {margin-bottom: 0;color: #9a3412;font-weight: 700}
.reservation-test-guide__mail-list li {margin-bottom: 6px}
.reservation-test-guide__mail-list--boxed {margin: 10px 0 14px;padding: 0;list-style: none}
.reservation-test-guide__mail-list--boxed li {margin: 0 0 8px;padding: 10px 12px;border: 1px solid #dbeafe;border-radius: 8px;background: #f8fbff}
.reservation-test-guide__mail-list--boxed li span {display: block;font-weight: 700;color: #1e3a8a}
.reservation-test-guide__mail-list--boxed li small {display: block;margin-top: 2px;color: #475569}
.reservation-test-guide__card-sample {margin-top: 8px;padding: 12px;border-radius: 8px;border: 1px solid #cbd5e1;background: #f8fafc}
.reservation-test-guide__card-row {display: flex;align-items: center;gap: 10px;margin-bottom: 10px}
.reservation-test-guide__card-row label {min-width: 72px;font-size: 0.86rem;color: #475569}
.reservation-test-guide__card-row code {flex: 1;padding: 8px 10px;border-radius: 6px;border: 1px solid #e2e8f0;background: #fff;font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-size: 0.95rem;color: #0f172a}
.reservation-test-guide__card-row--split {gap: 12px}
.reservation-test-guide__card-row--split > div {display: flex;align-items: center;gap: 8px;flex: 1}
.reservation-test-guide__copy-btn {border: 1px solid #1d4ed8;background: #eff6ff;color: #1d4ed8;border-radius: 6px;padding: 7px 10px;font-size: 0.82rem;font-weight: 700;cursor: pointer}
.reservation-test-guide__copy-btn:hover {background: #dbeafe}
.reservation-test-guide__copy-btn--full {width: 100%;margin-top: 4px}
.reservation-test-guide__cta {margin-top: 14px;display: flex;justify-content: flex-start}
.reservation-test-guide__cta-btn {display: inline-flex;align-items: center;gap: 10px;padding: 8px 14px;border-radius: 999px;background: #0f172a;color: #fff;text-decoration: none;font-weight: 700;font-size: 0.95rem;border: 1px solid #0f172a}
.reservation-test-guide__cta-btn i {font-size: 1rem}
.reservation-test-guide__cta-btn:hover {background: #1e293b;border-color: #1e293b}
@media (max-width: 768px) {.reservation-test-guide__hero {padding: 18px 16px}
.reservation-test-guide__scope-grid {grid-template-columns: 1fr}
.reservation-test-guide__sample-gallery {grid-template-columns: 1fr}
.reservation-test-guide__sample-image.is-expanded {max-width: 92vw;max-height: 86vh}
.reservation-test-guide__card-row {flex-direction: column;align-items: stretch;gap: 6px}
.reservation-test-guide__card-row label {min-width: auto}
.reservation-test-guide__card-row--split {flex-direction: row}}