/* ══════════════════════════════════════════════════
   부가가치세 신고대행 전용 (page-vat.php)
   ※ 공통은 style.css, 신고대행 공통(히어로 분할·안내카드·대상자·수수료·접수박스)은 filing.css
   ※ 이 파일은 '필요 서류' 섹션 전용
══════════════════════════════════════════════════ */

/* ── 필요 서류 ── */
.docs-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;align-items:start;}
.doc-card{
  background:#fff;border:1px solid var(--border);border-radius:var(--r);
  padding:26px 24px;
  transition:border-color .2s,box-shadow .2s;
}
.doc-card:hover{border-color:var(--navy-100);box-shadow:0 6px 20px rgba(20,31,54,.06);}
.doc-card.is-wide{grid-column:span 2;}

.doc-head{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.doc-head .icon-box{width:40px;height:40px;border-radius:10px;margin-bottom:0;}
.doc-head .icon-box svg{width:20px;height:20px;}
.doc-head h3{font-size:16px;font-weight:700;color:var(--ink);letter-spacing:-.3px;}
.doc-head .doc-tag{
  margin-left:auto;
  font-size:11px;font-weight:700;color:var(--navy-700);
  background:var(--navy-50);padding:4px 10px;border-radius:20px;white-space:nowrap;
}

/* 번호 목록 */
.doc-list{list-style:none;counter-reset:doc;}
.doc-list > li{
  counter-increment:doc;
  position:relative;
  padding:10px 0 10px 30px;
  border-bottom:1px solid var(--bg-soft);
  font-size:14px;color:var(--text-sub);line-height:1.65;
}
.doc-list > li:last-child{border-bottom:none;padding-bottom:0;}
.doc-list > li::before{
  content:counter(doc);
  position:absolute;left:0;top:11px;
  width:20px;height:20px;border-radius:6px;
  background:var(--navy-50);color:var(--navy-700);
  font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.doc-list > li strong{color:var(--ink);font-weight:700;}
.doc-sub{display:block;margin-top:3px;font-size:13px;color:var(--text-light);}

/* 매입 카드 안의 ①② 세부 안내 */
.doc-note{
  margin-top:10px;
  background:var(--bg-soft);border:1px solid var(--border);
  border-radius:10px;padding:14px 16px;
  display:flex;flex-direction:column;gap:10px;
}
.doc-note-item{font-size:13px;color:var(--text-sub);line-height:1.7;}
.doc-note-item b{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:50%;
  background:var(--navy-700);color:#fff;
  font-size:11px;font-weight:700;margin-right:6px;
  vertical-align:middle;
}
.doc-note-item .ok{color:var(--navy-700);font-weight:600;}
.doc-mail{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:6px;
  background:#fff;border:1px solid var(--navy-100);
  border-radius:8px;padding:7px 12px;
  font-size:13px;font-weight:700;color:var(--navy-700);
  text-decoration:none;transition:border-color .15s,background .15s;
}
.doc-mail:hover{border-color:var(--navy-700);background:var(--navy-50);}
.doc-mail svg{width:15px;height:15px;flex-shrink:0;}

/* 서류 안내 하단 팁 */
.docs-tip{
  margin-top:24px;
  background:#fff;border:1px solid var(--border);
  border-left:3px solid var(--gold);
  border-radius:0 var(--r) var(--r) 0;
  padding:18px 22px;
}
.docs-tip p{font-size:13.5px;color:var(--text-sub);line-height:1.8;}
.docs-tip strong{color:var(--ink);font-weight:700;}

/* ── 수수료 안내 문구 ── */
.fee-note{
  margin-top:28px;max-width:820px;margin-left:auto;margin-right:auto;
  background:#fff;border:1px solid var(--border);
  border-left:3px solid var(--gold);
  border-radius:0 var(--r) var(--r) 0;
  padding:20px 24px;
}
.fee-note p{font-size:13.5px;color:var(--text-sub);line-height:1.85;}
.fee-note p + p{margin-top:10px;}
.fee-note strong{color:var(--ink);font-weight:700;}

/* ══════════════════════════════════════════════════
   접수 영역 — PC: 폼(좌·크게) 우선 / 모바일: 카카오톡(위) 우선
══════════════════════════════════════════════════ */
.apply-grid{
  display:grid;grid-template-columns:1.6fr 1fr;
  gap:20px;align-items:start;
}

/* 결과 안내 */
.form-notice{
  border-radius:var(--r);padding:14px 18px;margin-bottom:18px;
  font-size:14px;font-weight:600;
}
.form-notice.is-ok{background:#eef6f0;border:1px solid #cfe6d7;color:#2c6b45;}
.form-notice.is-bad{background:#fdf1f1;border:1px solid #f0d4d4;color:#8c3b3b;}

/* ── 신청 폼 카드 ── */
.apply-form-card{
  background:#fff;border:1px solid var(--border);border-radius:var(--r);
  padding:32px 30px;
}
.apply-card-head{margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--bg-soft);}
.apply-card-head h3{font-size:19px;font-weight:800;color:var(--ink);letter-spacing:-.4px;margin-bottom:6px;}
.apply-card-head p{font-size:13.5px;color:var(--text-sub);line-height:1.7;}

.f-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.f-group{margin-bottom:16px;}
.f-label{display:block;font-size:13px;font-weight:700;color:var(--ink);margin-bottom:7px;}
.req{color:#b54a4a;}

.f-input,.f-select,.f-textarea{
  width:100%;padding:13px 14px;font-size:15px;font-family:inherit;
  border:1px solid #d5dae0;border-radius:10px;
  color:var(--ink);background:#fff;
  transition:border-color .18s,box-shadow .18s;
}
.f-textarea{resize:vertical;min-height:104px;line-height:1.7;}
.f-select{cursor:pointer;}
.f-input::placeholder,.f-textarea::placeholder{color:#aeb4bb;}
.f-input:focus,.f-select:focus,.f-textarea:focus{
  outline:none;border-color:var(--navy-700);
  box-shadow:0 0 0 3px rgba(39,64,110,.12);
}

/* 개인정보 동의 */
.f-agree{
  display:flex;align-items:center;gap:10px;
  padding:13px 15px;margin-top:4px;
  background:var(--bg-soft);border:1px solid var(--border);border-radius:10px;
  cursor:pointer;user-select:none;
}
.f-agree input[type="checkbox"]{
  width:18px;height:18px;accent-color:var(--navy-700);cursor:pointer;flex-shrink:0;
}
.f-agree span{font-size:13.5px;font-weight:600;color:var(--ink);}
.f-agree-detail{
  font-size:12px;color:var(--text-light);line-height:1.75;
  margin-top:8px;padding:0 2px;
}
.f-agree-detail strong{color:var(--text-sub);font-weight:700;}
.f-agree-detail a{color:var(--navy-700);font-weight:600;text-decoration:underline;text-underline-offset:2px;margin-left:4px;}

.f-submit{
  width:100%;margin-top:18px;
  background:var(--navy-700);color:#fff;border:1px solid var(--navy-700);
  padding:16px;border-radius:12px;
  font-size:16px;font-weight:800;font-family:inherit;letter-spacing:-.3px;
  cursor:pointer;min-height:54px;
  transition:background .15s,border-color .15s;
}
.f-submit:hover{background:var(--navy-600);border-color:var(--navy-600);}
.f-note{margin-top:10px;font-size:12px;color:var(--text-light);text-align:center;line-height:1.6;}

/* 스팸 차단용 숨김 칸 (화면·스크린리더 모두 노출 안 됨) */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* ── 카카오톡 카드 (PC 보조 / 모바일 우선) ── */
.apply-kakao-card{
  background:var(--navy-800);border-radius:var(--r);
  padding:30px 26px;text-align:center;
  border-top:2px solid var(--gold);
}
.kakao-mark{
  width:52px;height:52px;margin:0 auto 14px;
  background:var(--kakao);border-radius:14px;
  display:flex;align-items:center;justify-content:center;color:#1a1a1a;
}
.kakao-mark svg{width:26px;height:26px;}
.apply-kakao-card h3{font-size:19px;font-weight:800;color:#fff;line-height:1.4;letter-spacing:-.4px;margin-bottom:8px;}
.apply-kakao-card > p{font-size:13.5px;color:rgba(255,255,255,.72);line-height:1.7;margin-bottom:18px;}
.apply-kakao-card > p strong{color:#fff;font-weight:700;}

.kakao-btn-lg{
  display:flex;align-items:center;justify-content:center;
  width:100%;background:var(--kakao);color:#1a1a1a;
  padding:15px;border-radius:10px;
  font-size:15.5px;font-weight:800;text-decoration:none;
  min-height:52px;transition:opacity .15s;
}
.kakao-btn-lg:hover{opacity:.9;}

.apply-alt--stack{flex-direction:column;gap:8px;margin-top:14px;}
.apply-alt--stack .apply-alt-label{color:rgba(255,255,255,.5);}
.apply-alt--stack .apply-alt-btn{
  width:100%;justify-content:center;
  background:transparent;border-color:rgba(255,255,255,.28);color:rgba(255,255,255,.85);
}
.apply-alt--stack .apply-alt-btn:hover{border-color:rgba(255,255,255,.7);color:#fff;}

.kakao-points{
  list-style:none;margin-top:20px;padding-top:18px;
  border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-direction:column;gap:8px;
}
.kakao-points li{
  font-size:13px;color:rgba(255,255,255,.72);
  display:flex;align-items:center;justify-content:center;gap:7px;
}
.kakao-points li::before{
  content:'✓';color:var(--gold-light);font-weight:800;flex-shrink:0;
}

/* ── 접수: 카카오톡 외 대체 수단 ── */
.apply-alt{
  display:flex;align-items:center;justify-content:center;
  gap:10px;flex-wrap:wrap;margin-top:18px;
}
.apply-alt-label{font-size:13px;color:var(--text-light);}
.apply-alt-btn{
  display:inline-flex;align-items:center;gap:7px;
  background:#fff;border:1px solid var(--border);border-radius:10px;
  padding:10px 16px;font-size:13.5px;font-weight:600;
  color:var(--text-sub);text-decoration:none;
  transition:border-color .15s,color .15s;
}
.apply-alt-btn:hover{border-color:var(--navy-100);color:var(--navy-700);}
.apply-alt-btn svg{width:16px;height:16px;flex-shrink:0;}

/* ── 가산세 경고 배너 ── */
.warn-banner{
  background:#fdf1f1;border:1px solid #f0d4d4;
  border-radius:var(--r);padding:20px 24px;
  display:flex;gap:14px;align-items:flex-start;
  margin-top:24px;
}
.warn-banner .icon-box{
  width:38px;height:38px;border-radius:10px;margin-bottom:0;
  background:#fae4e4;color:var(--red-soft);flex-shrink:0;
}
.warn-banner .icon-box svg{width:19px;height:19px;}
.warn-banner h4{font-size:14.5px;font-weight:700;color:#8c3b3b;margin-bottom:4px;}
.warn-banner p{font-size:13.5px;color:#7a4a4a;line-height:1.75;}

/* ── 반응형 ── */
@media(max-width:768px){
  .docs-grid{grid-template-columns:1fr;gap:10px;}
  .doc-card{padding:20px 18px;}
  .doc-card.is-wide{grid-column:span 1;}
  .doc-card:hover{box-shadow:none;border-color:var(--border);}
  .doc-head h3{font-size:15px;}
  .doc-head .doc-tag{font-size:10px;padding:3px 8px;}
  .doc-list > li{font-size:13.5px;padding-left:28px;}
  .doc-note{padding:12px 14px;}
  .doc-mail{width:100%;justify-content:center;}
  .warn-banner{padding:16px 18px;flex-direction:column;gap:10px;}
  .fee-note{padding:16px 18px;}
  .apply-alt{flex-direction:column;gap:8px;}
  .apply-alt-btn{width:100%;justify-content:center;}

  /* 접수 영역: 폼 여백 축소 */
  .apply-form-card{padding:24px 20px;}
  .apply-card-head{margin-bottom:18px;padding-bottom:14px;}
  .apply-card-head h3{font-size:17px;}
  .f-row{grid-template-columns:1fr;gap:0;}
  /* iOS 확대 방지: 입력 폰트 16px 이상 */
  .f-input,.f-select,.f-textarea{font-size:16px;}
  .apply-kakao-card{padding:24px 20px;}
  .apply-kakao-card h3{font-size:18px;}
}

/* ── 접수 영역 반응형: 900px 이하에서 카카오톡을 위로 ── */
@media(max-width:900px){
  .apply-grid{grid-template-columns:1fr;gap:14px;}
  .apply-kakao-card{order:-1;}   /* 모바일 우선순위: 카카오톡 먼저 */
}