/* 기본 스타일 */
        body { font-family: sans-serif; padding: 15px; line-height: 1.6; }
        .container { max-width: 800px; margin: auto; }
        .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; flex-wrap: wrap; } /* wrap 추가 */
        .user-info { font-size: 0.9em; }
        .user-info a { margin-left: 10px; text-decoration: none; color: #007bff; }
        .user-info a:hover { text-decoration: underline; }
        #kakao-login-btn { display: inline-block; padding: 0; border: none; background: none; cursor: pointer; }
        #kakao-login-btn img { height: 45px; vertical-align: middle; } /* 세로 정렬 추가 */

        .upload-area { margin: 8px 0 28px; padding: 22px 18px 18px; border: 3px dashed #1f3b57; background: #f4f8fc; text-align: center; border-radius: 12px; }
        .upload-area h2 { margin: 0 0 8px; font-size: 1.35em; color: #1f3b57; }
        .upload-lead { margin: 0 0 14px; color: #333; line-height: 1.5; }
        .upload-btn { display: inline-block; padding: 16px 28px; background: #1f3b57; color: #fff; font-weight: 800; font-size: 1.1em; border-radius: 8px; cursor: pointer; }
        .upload-btn:hover { background: #163047; }
        .upload-hint { margin: 12px 0 0; font-size: 0.9em; color: #555; }
        #image-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
        #upload-form { position: relative; }
        #upload-form button[type="submit"] { display: none; }
        .result-area { margin-top: 20px; padding: 15px; border: 1px solid #eee; background-color: #f9f9f9; }
        .error { color: red; font-weight: bold; }

        /* 플래시 메시지 스타일 */
        .flash-messages { margin: 10px 0; }
        .alert { background-color: #d4edda; color: #155724; padding: 10px; margin-bottom: 10px; border-radius: 4px; border: 1px solid #c3e6cb; }
        .alert-error { background-color: #f8d7da; color: #721c24; border-color: #f5c6cb; }

        /* 이미지 뷰어 관련 스타일 */
        .image-viewer { margin-top: 15px; position: relative; }
        .preview-container { width: 100%; min-height: 100px; margin-bottom: 5px; }
        .preview-image { display: block; max-width: 100%; max-height: 400px; width: auto; height: auto; margin-left: auto; margin-right: auto; border: 1px solid #ddd; object-fit: contain; }
        .preview-image.fit-to-width { width: 100%; height: auto; max-height: none; object-fit: cover; }
        .image-controls { display: flex; justify-content: space-between; align-items: center; margin-top: 5px; flex-wrap: wrap; }
        .nav-button { padding: 5px 10px; cursor: pointer; background-color: #eee; border: 1px solid #ccc; border-radius: 4px; font-size: 1.2em; user-select: none; }
        .nav-button:disabled { cursor: not-allowed; opacity: 0.5; }
        #image-counter { font-size: 0.9em; color: #555; order: 1; margin: 5px 10px; }
        .preview-controls { text-align: right; font-size: 0.9em; color: #555; order: 3; margin: 5px 0; }
        .preview-controls label { cursor: pointer; }
        .nav-button-container { display: flex; order: 2; }
        #prev-image { margin-right: 5px; }

        /* 결과 표시 영역 스타일 */
        #formatted-results { padding: 10px; min-height: 100px; }
        .result-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
        .result-header h2 { margin: 0; margin-bottom: 5px; }
        .result-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
        #kakao-share-button { display: none; padding: 7px 14px; font-size: 0.95em; font-weight: bold; cursor: pointer; background-color: #FEE500; color: #191919; border: none; border-radius: 4px; }
        #kakao-share-button:hover { background-color: #f5dc00; }
        .hero { margin: 10px 0 5px; }
        .hero-lead { font-size: 1.1em; }
        .hero-points { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; margin: 12px 0; }
        .hero-points li { background: #fff8cc; border: 1px solid #f1e08a; border-radius: 14px; padding: 4px 12px; font-size: 0.9em; }
        #copy-all-button, #share-button { display: none; padding: 5px 10px; font-size: 0.9em; cursor: pointer; color: white; border: none; border-radius: 4px; }
        #copy-all-button { background-color: #007bff; } #copy-all-button:hover { background-color: #0056b3; } #copy-all-button.copied { background-color: #28a745; }
        #share-button { background-color: #ffc107; color: #212529; } #share-button:hover { background-color: #e0a800; }
        #excel-download-button { display: none; margin-top: 10px; padding: 8px 15px; cursor: pointer; background-color: #28a745; color: white; border: none; border-radius: 4px; font-size: 0.9em; width: 100%; box-sizing: border-box; }
        #excel-download-button:hover { background-color: #218838; }
        .result-block { border: 1px dashed #ccc; padding: 10px; margin-bottom: 15px; background-color: #fff; }
        .result-block h3 { margin-top: 0; font-size: 1.1em; border-bottom: 1px solid #eee; padding-bottom: 5px; }
        .result-item { margin-bottom: 8px; display: flex; flex-wrap: wrap; align-items: center; }
        .result-label { flex-basis: 130px; font-weight: bold; padding-right: 10px; text-align: right; color: #333; }
        .result-value { flex-grow: 1; word-break: break-all; margin-right: 5px; }
        .copy-button { padding: 2px 5px; font-size: 0.8em; cursor: pointer; border: 1px solid #ccc; background-color: #f0f0f0; border-radius: 3px; margin-left: auto; }
        .copy-button:hover { background-color: #e0e0e0; } .copy-button.copied { background-color: #d4edda; color: #155724; border-color: #c3e6cb; }
        .expiry-expired { color: red; font-weight: bold; } .expiry-warning { color: orange; font-weight: bold; } .expiry-ok { color: green; }
        .check-ok { color: green; font-weight: bold; } .check-warn { color: #c0392b; font-weight: bold; }
        .mrz-guide { margin: 15px 0; text-align: center; }
        .mrz-guide img { width: 100%; max-width: 480px; height: auto; }
        .mrz-guide p { margin: 6px 0 0; font-size: 0.9em; color: #555; }
        .ed-example { margin: 18px 0 8px; text-align: center; }
        .ed-example img { width: 100%; max-width: 560px; height: auto; border: 1px solid #ddd; border-radius: 8px; background: #fff; }
        .ed-example p { margin: 8px 0 0; font-size: 0.95em; color: #333; }

        /* 안내 섹션 (사용 방법 / 추출 정보 / FAQ) */
        .info-section { margin-top: 40px; padding-top: 10px; border-top: 1px solid #eee; }
        .info-section h2 { font-size: 1.3em; color: #1f3b57; margin-bottom: 12px; }
        .howto-steps { padding-left: 22px; }
        .howto-steps li { margin-bottom: 8px; }
        .field-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }
        .field-list li { background: #eef4f9; color: #1f3b57; border-radius: 14px; padding: 4px 12px; font-size: 0.9em; }
        .faq-item { border: 1px solid #e3e8ee; border-radius: 6px; margin-bottom: 10px; background: #fff; }
        .faq-item summary { cursor: pointer; padding: 12px 14px; font-weight: bold; list-style-position: inside; }
        .faq-item p { margin: 0; padding: 0 14px 14px; color: #333; }
        .site-footer { margin-top: 40px; padding: 15px 0; border-top: 1px solid #eee; font-size: 0.85em; color: #888; text-align: center; }
        #entry-actions { display: none; margin-top: 16px; padding: 14px; background: #fff4e5; border: 2px solid #f08c00; border-radius: 8px; }
        #entry-jp-btn { width: 100%; padding: 14px; font-size: 1.05em; font-weight: 800; cursor: pointer; border: none; border-radius: 6px; background: #c92a2a; color: #fff; }
        .dest-btn { flex: 1; min-width: 118px; }
        #entry-helper .only-jp, #entry-helper .only-cn, #entry-helper .only-online { display: none; }
        #entry-helper.dest-jp .only-jp { display: block; }
        #entry-helper.dest-cn .only-cn { display: block; }
        #entry-helper.dest-tw .only-online, #entry-helper.dest-ph .only-online { display: block; }
        .ed-item input[type=email], .ed-item input[type=date] { width: 100%; box-sizing: border-box; padding: 12px; font-size: 1.1em; border: 2px solid #adb5bd; border-radius: 6px; }
        #entry-helper { display: none; margin-top: 16px; }
        .ed-panel { background: #1f3b57; color: #fff; padding: 14px 16px; border-radius: 8px 8px 0 0; }
        .ed-panel h3 { margin: 0 0 4px; font-size: 1.2em; }
        .ed-panel p { margin: 0; font-size: 0.9em; opacity: .9; }
        .ed-body { background: #f4f6f8; border: 2px solid #1f3b57; border-top: none; padding: 16px; border-radius: 0 0 8px 8px; }
        .ed-passport { background: #e7f5ff; border: 2px solid #1c7ed6; border-radius: 8px; padding: 12px; margin-bottom: 14px; }
        .ed-passport b { font-size: 1.2em; }
        .ed-sec { font-weight: 800; color: #1f3b57; margin: 16px 0 8px; padding-bottom: 4px; border-bottom: 3px solid #1f3b57; }
        .ed-item { background: #fff; border: 2px solid #ced4da; border-radius: 8px; padding: 12px; margin: 10px 0; }
        .ed-item label { display: block; font-weight: 800; margin-bottom: 8px; color: #212529; }
        .ed-item .hint { font-weight: 400; color: #868e96; font-size: 0.85em; }
        .ed-item input[type=text], .ed-item input[type=tel], .ed-item input[type=number] { width: 100%; box-sizing: border-box; padding: 12px; font-size: 1.1em; border: 2px solid #adb5bd; border-radius: 6px; }
        .ed-item input:focus { outline: none; border-color: #1c7ed6; box-shadow: 0 0 0 3px rgba(28,126,214,.2); }
        .choice-row { display: flex; flex-wrap: wrap; gap: 8px; }
        .choice { padding: 10px 14px; border: 2px solid #adb5bd; background: #fff; border-radius: 8px; cursor: pointer; font-weight: 700; }
        .choice.on { border-color: #1c7ed6; background: #1c7ed6; color: #fff; }
        .choice-yesno .choice { min-width: 88px; text-align: center; }
        .choice-yesno .choice[data-val="yes"].on { background: #c92a2a; border-color: #c92a2a; }
        .choice-yesno .choice[data-val="no"].on { background: #2b8a3e; border-color: #2b8a3e; }
        #ed-make, #ed-print { width: 100%; padding: 14px; margin-top: 8px; font-size: 1.05em; font-weight: 800; border: none; border-radius: 6px; cursor: pointer; color: #fff; }
        #ed-make { background: #1f3b57; } #ed-print { background: #c92a2a; }
        #ed-kakao { background: #FEE500; color: #191919; width: 100%; padding: 14px; margin-top: 8px; font-size: 1.05em; font-weight: 800; border: none; border-radius: 6px; cursor: pointer; }
        #ed-save { background: #1f3b57; color: #fff; width: 100%; padding: 14px; margin-top: 8px; font-size: 1.05em; font-weight: 800; border: none; border-radius: 6px; cursor: pointer; }
        #ed-back { padding: 10px 14px; margin-right: 8px; cursor: pointer; }
        .ed-card { background: #fffef7; border: 2px solid #222; padding: 16px; }
        .cs-card { background: #fff8dc; border: 2px solid #8a6d3b; padding: 16px; margin-top: 18px; }
        .ed-top { display: flex; justify-content: space-between; gap: 12px; border-bottom: 2px solid #c00; padding-bottom: 8px; }
        .ed-title { font-size: 1.15em; font-weight: 800; } .ed-arrival { font-size: 1.3em; font-weight: 800; color: #c00; }
        .ed-note, .ed-foot, .ed-ko { font-size: 12px; color: #555; }
        .ed-grid2 { display: flex; gap: 8px; } .ed-grid2 > div { flex: 1; }
        .ed-field { border: 1px solid #888; padding: 8px; margin: 6px 0; } .ed-field span { display: block; font-size: 11px; color: #555; }
        .ed-field b { display: block; font-size: 1.25em; margin-top: 4px; }
        .ed-check-on { color: #c00; font-weight: 900; font-size: 1.45em; line-height: 1; }
        .ed-check-off { color: #999; font-size: 1.2em; }
        .ed-sign { margin-top: 16px; font-size: 15px; padding: 12px; border: 3px solid #c00; background: #fff0f0; }
        .ed-sign-mark { display: inline-block; background: #c00; color: #fff; font-weight: 900; padding: 4px 10px; border-radius: 4px; margin-right: 8px; letter-spacing: 0.04em; }
        .ed-checks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; font-weight: 700; }
        .ed-q { display: flex; justify-content: space-between; gap: 8px; border: 1px solid #888; padding: 8px; margin: 6px 0; font-size: 13px; }
        .ed-sign { margin-top: 14px; }
        .detailed-info { display: none; margin-top: 15px; padding-top: 10px; border-top: 1px dashed #ddd; }
        .details-toggle { display: block; margin: 10px auto 5px auto; padding: 5px 10px; font-size: 0.9em; cursor: pointer; background-color: #f8f9fa; border: 1px solid #dee2e6; border-radius: 4px; color: #0d6efd; }
        .details-toggle:hover { background-color: #e2e6ea; }

        /* 로딩 관련 스타일 */
        #progress-info { margin-top: 15px; font-weight: bold; text-align: center; }
        .loader { display: none; border: 4px solid #f3f3f3; border-radius: 50%; border-top: 4px solid #3498db; width: 30px; height: 30px; animation: spin 1s linear infinite; margin: 10px auto; }
        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
        
        /* 로그인 혜택 안내 박스 */
        .login-benefits {
            margin-bottom: 20px;
            padding: 15px;
            border-radius: 8px;
            background-color: #f8f9fa;
            border: 1px solid #ddd;
        }
        .login-benefits h3 {
            margin-top: 0;
            color: #0056b3;
            font-size: 1.1em;
        }
        .login-benefits ul {
            margin-bottom: 10px;
            padding-left: 25px;
        }
        .login-benefits button {
            padding: 8px 15px;
            background-color: #FEE500;
            color: #000;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-weight: bold;
        }

        /* 모바일 대응 CSS */
        @media (max-width: 600px) {
             body { padding: 10px; font-size: 14px; } .container { padding-left: 5px; padding-right: 5px;
} h1 { font-size: 1.5em; } .upload-area { padding: 15px; } #image-input { font-size: 0.9em; }
             button[type="submit"], #excel-download-button { font-size: 1em; padding: 10px 15px; width: 100%; box-sizing: border-box; margin-top: 10px; } #excel-download-button { margin-bottom: 10px;}
             .result-area { padding: 10px; } .result-block { padding: 8px; } .result-item { display: block; margin-bottom: 12px; }
             .result-label { display: block; text-align: left; margin-bottom: 2px; flex-basis: auto; width: auto; padding-right: 0; font-weight: bold; }
             .result-value { flex-basis: auto; margin-right: 0; margin-left: 0; display: inline-block; vertical-align: middle; }
             .copy-button { margin-left: 8px; vertical-align: middle; float: right; }
             .result-value[data-key^="mrz_"] { font-size: 0.9em; word-break: break-all; }
             .image-controls { flex-direction: column; } #image-counter { order: 1; margin-top: 5px; } .preview-controls { order: 3; text-align: center; margin-top: 10px; } .nav-button-container { display: flex; justify-content: center; width: 100%; margin-top: 10px; order: 2; }
             .result-header { flex-direction: column; align-items: flex-start; } .result-buttons { width: 100%; justify-content: flex-end; margin-top: 5px; gap: 5px; }
             #copy-all-button, #share-button { padding: 8px 10px; font-size: 0.85em; margin-bottom: 5px; flex-shrink: 0; }
             .details-toggle { width: 90%; }
        }

        /* 입국신고서 안내로 이어지는 링크 */
        .entry-actions-lead { margin: 0 0 10px; font-weight: 700; }
        a.choice.dest-link { flex: 1; min-width: 118px; text-align: center; text-decoration: none; color: #1f3b57; }
        a.choice.dest-link:hover { border-color: #1c7ed6; background: #e7f5ff; }
        .dest-mode { display: inline-block; font-size: 0.8em; font-weight: 600; color: #6c757d; }
        .entry-guide-list { padding-left: 20px; }
        .entry-guide-list li { margin-bottom: 8px; }
        .entry-guide-list a { color: #1f3b57; }

        /* 나라별 입국신고서 페이지 */
        .breadcrumb { font-size: 0.9em; margin: 4px 0 12px; }
        .breadcrumb a { color: #1c7ed6; text-decoration: none; }
        .entry-badge { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 0.85em; font-weight: 700; background: #e7f5ff; color: #1c7ed6; margin-left: 6px; vertical-align: middle; }
        .entry-badge.online { background: #fff4e6; color: #d9480f; }
        .entry-intro p { margin: 8px 0; }
        .official-link { display: inline-block; margin: 6px 0 4px; padding: 10px 14px; border: 2px solid #1f3b57; border-radius: 8px; color: #1f3b57; font-weight: 800; text-decoration: none; }
        .passport-source { margin: 18px 0; padding: 16px; border: 2px solid #1c7ed6; border-radius: 10px; background: #f4f8fc; }
        .passport-source h2 { margin: 0 0 6px; font-size: 1.15em; color: #1f3b57; }
        .passport-source .upload-btn { margin-top: 8px; }
        .passport-picker { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
        .agency-cta { margin: 24px 0; padding: 16px; border-radius: 10px; background: #fff9db; border: 2px solid #f59f00; }
        .agency-cta h2 { margin: 0 0 6px; font-size: 1.1em; }
        .agency-cta p { margin: 0 0 10px; }
        .agency-cta a { display: inline-block; padding: 12px 18px; border-radius: 8px; background: #f59f00; color: #fff; font-weight: 800; text-decoration: none; }
        #entry-helper .only-jp-inline { display: none; }
        #entry-helper.dest-jp .only-jp-inline { display: inline; }
        #entry-helper.dest-jp .only-notjp { display: none; }
        .ps-summary { background: #e7f5ff; border: 2px solid #1c7ed6; border-radius: 8px; padding: 12px 14px; margin-bottom: 14px; }
        .ps-summary h3 { margin: 0 0 6px; font-size: 1.05em; }
        .ps-summary dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 0; }
        .ps-summary dt { color: #555; } .ps-summary dd { margin: 0; font-weight: 800; }

/* 모바일: 실제 신고서 칸처럼 보이도록 칸·글자 크기를 폭에 맞춘다 (데스크탑은 그대로) */
@media (max-width: 600px) {
  .ed-card, .cs-card { padding: 10px 8px; }
  .ed-top { gap: 6px; }
  .ed-title { font-size: 15px; }
  .ed-arrival { font-size: 15px; white-space: nowrap; }
  .ed-grid2 { gap: 6px; }
  .ed-grid2 > div { min-width: 0; }
  .ed-field { padding: 6px 7px; margin: 5px 0; }
  .ed-field span { font-size: 10px; line-height: 1.3; }
  .ed-field b { font-size: 16px; line-height: 1.25; letter-spacing: 0; overflow-wrap: anywhere; word-break: keep-all; }
  .ed-checks { gap: 6px 10px; font-size: 13px; }
  .ed-q { gap: 8px; font-size: 12px; padding: 6px 7px; }
  .ed-q > div { min-width: 0; }
  .ed-q b { flex: none; white-space: nowrap; font-size: 12px; }
  .ed-sign { padding: 8px; font-size: 13px; }
  .ed-sign-mark { padding: 3px 8px; }
}