@charset "UTF-8";
/* ============================================================================
   canadavisaapply.com — eTA 접수 신청서 전용 스타일 (apply.php 만 로드)
   style.css 의 .cform / .cf-grid / .cf-row / .cf-full / .cf-hint / .cf-agree / .cf-submit / .cf-error / .cf-hp 를
   그대로 쓰고, 여권 업로드 · 라디오 · 수수료 상자 · 상태 표시만 여기서 추가한다.
   RTL 안전: 물리 방향 속성 대신 논리 속성(inline-start/end) 사용. 토스트 중앙정렬만 물리 left+translateX.
   ========================================================================== */

/* ── 수수료 상자 ─────────────────────────────────────────────────── */
.doc-body .ap-fee{border:1px solid var(--line); border-inline-start:3px solid var(--accent);
  background:var(--paper-2); border-radius:0 10px 10px 0; padding:18px 20px 16px; margin:4px 0 28px}
[dir="rtl"] .doc-body .ap-fee{border-radius:10px 0 0 10px}
.ap-fee-h{display:block; font-family:var(--f-mono); font-size:var(--fz-label); font-weight:500;
  letter-spacing:.06em; color:var(--accent); margin-bottom:6px}
.ap-fee-rows{margin:0}
.ap-fee-rows > div{display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:9px 0; border-top:1px solid var(--line)}
.ap-fee-rows > div:first-child{border-top:0}
.ap-fee-rows dt{margin:0; font-size:14.5px; color:var(--ink-2)}
.ap-fee-rows dd{margin:0; font-size:14.5px; font-weight:700; color:var(--ink); text-align:end}
.ap-fee-rows .ap-fee-total dt{font-weight:700; color:var(--ink); font-size:15.5px}
.ap-fee-rows .ap-fee-total dd{font-family:var(--f-disp); font-size:clamp(22px,2.2vw,28px); font-weight:800;
  letter-spacing:-.03em; color:var(--accent); line-height:1.1}
.doc-body .ap-fee-note{margin:12px 0 0; font-size:13.5px; line-height:1.7; color:var(--ink-2)}
.doc-body .ap-fee-note a{white-space:nowrap}

/* ── 폼 공통 ─────────────────────────────────────────────────────── */
.ap-form{position:relative}
/* display:flex/block 를 주는 요소들이 hidden 속성(UA display:none)을 덮어쓰지 않도록 */
.ap-form [hidden]{display:none !important}
.ap-form .cf-grid{margin-top:4px}
.ap-form .cf-row label small{font-weight:500; color:var(--ink-3); font-size:12.5px; margin-inline-start:2px}
.ap-form .cf-row select{appearance:auto; -webkit-appearance:auto; cursor:pointer;
  padding-inline-end:36px; background-color:var(--paper)}
.ap-form .cf-row input[type="date"]{min-height:49px; -webkit-appearance:none; appearance:none}
.ap-form .cf-row input[type="date"]::-webkit-date-and-time-value{text-align:start}
.ap-err{display:block; font-size:12.5px; line-height:1.55; color:#93202F}
.ap-warn{display:block; font-size:12.5px; line-height:1.55; color:#8A5A00}
.ap-form .cf-row.is-invalid input:not([type="radio"]):not([type="checkbox"]):not(.ap-file),
.ap-form .cf-row.is-invalid select{border-color:#C8102E; box-shadow:0 0 0 3px rgba(200,16,46,.12)}
.ap-form .cf-row.is-invalid legend{color:#93202F}
.ap-form .cf-row.ap-filled input:not([type="radio"]):not([type="checkbox"]):not(.ap-file),
.ap-form .cf-row.ap-filled select{background-color:#F4FAF6; border-color:#8DC3A0}
.ap-form .cf-row.ap-filled.is-invalid input:not(.ap-file),
.ap-form .cf-row.ap-filled.is-invalid select{background-color:#FFF7F7; border-color:#C8102E}
.ap-guess-hint{color:#8A5A00}

/* 공용 스팸가드 필드(인라인 left:-9999px)를 1px 상자 안에 가둔다 — RTL 가로스크롤 방지 */
.ap-sg{position:absolute; inset-inline-start:0; top:0; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); pointer-events:none}

/* ── A. 여권 업로드 ───────────────────────────────────────────────── */
.ap-pass{margin:4px 0 20px}
.ap-drop{position:relative; border:2px dashed var(--line); border-radius:12px; background:var(--paper-2);
  padding:26px 20px; min-height:150px; display:grid; place-items:center; text-align:center;
  transition:border-color var(--d-hover) var(--e-ui), background-color var(--d-hover) var(--e-ui)}
.ap-drop:hover,.ap-drop.is-over{border-color:var(--accent); background:var(--accent-soft)}
.ap-drop:focus-within{outline:2px solid var(--accent); outline-offset:3px}
.ap-drop.is-set{border-style:solid; text-align:start; place-items:stretch}
.ap-form .cf-row input.ap-file{position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0;
  border:0; opacity:0; cursor:pointer; z-index:2; font-size:0}
.ap-drop-body{display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--ink-2); max-width:52ch}
.ap-drop-body svg{color:var(--accent); margin-bottom:2px}
.ap-drop-body b{font-size:15.5px; line-height:1.5; color:var(--ink)}
.ap-drop-sub{font-size:12.5px; line-height:1.6; color:var(--ink-3)}
.ap-drop-btn{margin-top:8px; padding:9px 18px; font-size:14px; pointer-events:none}
.ap-drop.is-set .ap-drop-body{display:none}
.ap-thumb{display:flex; align-items:center; gap:16px; margin:0}
.ap-thumb img{width:180px; max-width:46%; max-height:120px; object-fit:contain; background:#fff;
  border:1px solid var(--line); border-radius:6px; flex:0 0 auto}
.ap-thumb figcaption{display:flex; flex-direction:column; gap:5px; font-size:13.5px; line-height:1.5;
  color:var(--ink-2); min-width:0}
.ap-thumb figcaption span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink)}
.ap-thumb em{font-style:normal; font-weight:600; color:var(--ink-2); text-decoration:underline; text-underline-offset:3px}
.ap-drop.is-ok{border-color:#2F8F5B; background:#F1F8F3}
.ap-drop.is-ok .ap-thumb figcaption span{color:#1F6B3A; font-weight:700; white-space:normal}
.ap-drop.is-warn{border-color:#D9A441; background:#FFF8EC}
.ap-drop.is-warn .ap-thumb figcaption span{color:#8A5A00; font-weight:700; white-space:normal}
.ap-camera-off{display:none !important}

.doc-body .ap-status{display:flex; align-items:center; flex-wrap:wrap; gap:8px 10px; margin:10px 0 0;
  font-size:13.5px; line-height:1.55; color:var(--ink-2)}
.ap-status progress{width:120px; height:6px; flex:0 0 auto; accent-color:var(--accent);
  border:0; border-radius:99px; overflow:hidden; background:var(--line)}
.ap-status progress::-webkit-progress-bar{background:var(--line); border-radius:99px}
.ap-status progress::-webkit-progress-value{background:var(--accent); border-radius:99px}
.ap-status progress::-moz-progress-bar{background:var(--accent); border-radius:99px}
.ap-status.is-ok{color:#1F6B3A}
.ap-status.is-warn{color:#8A5A00}
.ap-status.is-err{color:#93202F}
.ap-status.is-busy::before{content:""; width:14px; height:14px; flex:0 0 auto; border-radius:50%;
  border:2px solid rgba(163,37,47,.3); border-top-color:var(--accent); animation:ap-spin .7s linear infinite}
.doc-body .ap-scan{padding:10px 14px; border-radius:6px; background:var(--paper-2); border:1px solid var(--line)}
.doc-body .ap-scan.is-ok{background:#F1F8F3; border-color:#BFE0CA}
.doc-body .ap-scan.is-warn{background:#FFF8EC; border-color:#F0D7A2}
.doc-body .ap-scan.is-err{background:#FDF2F2; border-color:#F5C6C6}

/* ── B. 고용/학교 상세 (P5 — 직업에 따라 표시) ────────────────────── */
.ap-form .ap-emp{padding:18px 18px 16px; border:1px solid var(--line); border-inline-start:3px solid var(--accent);
  border-radius:0 10px 10px 0; background:var(--paper-2)}
[dir="rtl"] .ap-form .ap-emp{border-radius:10px 0 0 10px}
.doc-body .ap-form .ap-emp-h{margin:0 0 6px; font-size:15.5px; font-weight:700; color:var(--ink); letter-spacing:-.01em}
.doc-body .ap-form .ap-emp-intro{display:block; margin:0 0 14px}
.ap-form .ap-emp-grid{margin-top:0}
.ap-form .ap-minor-block{margin-top:0}
@media (max-width:720px){ .ap-form .ap-emp{padding:14px 14px 12px} }

/* ── 전화번호 (국가코드 + 번호) ───────────────────────────────────── */
.ap-phone-row{display:grid; grid-template-columns:minmax(150px,42%) minmax(0,1fr); gap:10px}

/* ── 질문 블록 (라디오) ───────────────────────────────────────────── */
.ap-form fieldset.ap-q{display:block; border:0; margin:0; padding:0; min-width:0}
.ap-form .ap-q legend{display:block; float:inline-start; width:100%; padding:0; margin:0 0 10px;
  font-size:14.5px; font-weight:700; line-height:1.55; color:var(--ink); letter-spacing:-.01em}
.ap-form .ap-q legend + *{clear:both}
.ap-radios{display:flex; flex-wrap:wrap; gap:8px 12px; clear:both}
.ap-radio{display:inline-flex; align-items:center; gap:9px; padding:9px 16px; min-width:112px;
  border:1px solid var(--line); border-radius:6px; background:var(--paper); cursor:pointer;
  font-size:15px; color:var(--ink); transition:border-color var(--d-hover) var(--e-ui), background-color var(--d-hover) var(--e-ui)}
.ap-radio:hover{border-color:var(--accent)}
.ap-radio:has(input:checked){border-color:var(--accent); background:var(--accent-soft); font-weight:700}
.ap-radio:has(input:focus-visible){outline:2px solid var(--accent); outline-offset:2px}
.ap-form .ap-radio input[type="radio"]{width:18px; height:18px; margin:0; padding:0; border:0; box-shadow:none;
  flex:0 0 auto; accent-color:var(--accent); cursor:pointer}
.doc-body .ap-cond{margin:0 0 12px; padding-inline-start:4px}
.doc-body .ap-cond li{margin-bottom:4px; font-size:14.5px; line-height:1.65}
.ap-form .ap-bg fieldset.ap-q{padding:16px 18px; border:1px solid var(--line); border-radius:8px; background:var(--paper)}
.ap-form .ap-bg fieldset.ap-q.is-invalid{border-color:#C8102E; background:#FFFAFA}
.ap-bg-block{margin-top:16px}

/* ── E. 동의 ──────────────────────────────────────────────────────── */
.cf-agree.ap-agree > label{align-items:flex-start; margin:0 0 12px; font-size:15px; line-height:1.55}
.cf-agree.ap-agree > label:last-of-type{margin-bottom:0}
.ap-agree-item input[type="checkbox"]{flex:0 0 auto; margin-top:3px}
.ap-agree-item a{display:inline-block; margin-inline-start:6px; font-size:13.5px; font-weight:500; white-space:nowrap}
.ap-agree-item.is-invalid{color:#93202F}
.ap-agree .table-wrap{margin-top:16px}
.doc-body .ap-agree table{min-width:0}
.doc-body .ap-agree tbody th{white-space:normal; width:5.5em}
.ap-agree .ap-err{margin-top:8px}

/* ── 제출 ─────────────────────────────────────────────────────────── */
.ap-submit-note{display:block; margin-top:12px}
.ap-form .btn[disabled]{opacity:.5; pointer-events:none}
.ap-form .btn.is-loading{opacity:.75; pointer-events:none; cursor:progress}
.ap-form .btn .ap-spin{display:inline-block; width:15px; height:15px; border-radius:50%;
  border:2px solid rgba(163,37,47,.3); border-top-color:var(--accent); animation:ap-spin .7s linear infinite}
@keyframes ap-spin{to{transform:rotate(360deg)}}
#apply-toast{position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(20px);
  max-width:calc(100vw - 32px); background:var(--ink); color:#fff; padding:12px 18px; border-radius:10px;
  font-size:14px; line-height:1.5; z-index:99999; opacity:0; pointer-events:none;
  transition:opacity .25s, transform .25s}
#apply-toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

/* ── 모바일 ───────────────────────────────────────────────────────── */
@media (max-width:720px){
  .ap-phone-row{grid-template-columns:minmax(128px,44%) minmax(0,1fr)}
}
@media (max-width:480px){
  .doc-body .ap-fee{padding:16px 14px 14px}
  .ap-fee-rows > div{flex-wrap:wrap}
  .ap-drop{padding:20px 14px; min-height:130px}
  .ap-thumb{flex-direction:column; align-items:flex-start}
  .ap-thumb img{max-width:100%; width:100%; max-height:150px}
  .ap-radio{flex:1 1 calc(50% - 6px); justify-content:center; min-width:0}
  .ap-form .ap-bg fieldset.ap-q{padding:14px 14px}
  .doc-body .ap-agree th,.doc-body .ap-agree td{padding:10px 10px; font-size:13.5px}
  .ap-agree-item a{white-space:normal; margin-inline-start:0; display:block}
}
@media (max-width:360px){
  .ap-phone-row{grid-template-columns:1fr}
  .ap-radio{flex-basis:100%}
}
@media (prefers-reduced-motion:reduce){
  .ap-status.is-busy::before,.ap-form .btn .ap-spin{animation-duration:1.5s}
}