/* MATCHSIK enrollment finish v29.7
   Teacher detail, application form, bank transfer and Kakao visual QA.
   Keep the current main-page navy / blue / orange system; Kakao uses its familiar yellow. */

/* ---------- Step 5 · teacher detail modal ---------- */
body.apply-standalone #teacherDetailModal{
  z-index:520!important;
  padding:clamp(14px,3vw,34px)!important;
  background:rgba(4,18,38,.58)!important;
  backdrop-filter:blur(14px)!important;
  -webkit-backdrop-filter:blur(14px)!important;
  align-items:center!important;
  justify-content:center!important;
}
body.apply-standalone #teacherDetailModal .m2813-detail-card{
  position:relative!important;
  width:min(820px,100%)!important;
  max-height:min(88dvh,900px)!important;
  overflow:auto!important;
  padding:0!important;
  border:1px solid #dce6f2!important;
  border-radius:24px!important;
  background:#fff!important;
  box-shadow:0 34px 100px rgba(4,18,38,.28)!important;
  scrollbar-width:thin!important;
  scrollbar-color:#bdcce0 transparent!important;
}
body.apply-standalone #teacherDetailModal .modal-close{
  position:sticky!important;
  float:right!important;
  top:16px!important;
  right:16px!important;
  z-index:5!important;
  width:42px!important;
  height:42px!important;
  margin:16px 16px -58px 0!important;
  border:1px solid #d9e4f0!important;
  border-radius:13px!important;
  background:rgba(255,255,255,.94)!important;
  color:#173a67!important;
  box-shadow:0 7px 20px rgba(8,28,59,.08)!important;
  font-size:20px!important;
}
body.apply-standalone #teacherDetailBody{min-width:0!important}
body.apply-standalone #teacherDetailBody .m2813-detail-head{
  display:grid!important;
  grid-template-columns:72px minmax(0,1fr)!important;
  gap:18px!important;
  align-items:center!important;
  padding:28px 76px 24px 28px!important;
  border-bottom:1px solid #e1e9f3!important;
  background:radial-gradient(circle at 85% 0,rgba(23,103,255,.12),transparent 32%),linear-gradient(115deg,#eef5ff,#fff 68%)!important;
}
body.apply-standalone #teacherDetailBody .m2813-detail-avatar{
  width:72px!important;height:72px!important;min-width:72px!important;
  border:1px solid #d6e2f0!important;border-radius:20px!important;
  overflow:hidden!important;background:#edf3fb!important;color:#315f9c!important;
  box-shadow:0 10px 24px rgba(8,28,59,.09)!important;
}
body.apply-standalone #teacherDetailBody .m2813-detail-avatar img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center 25%!important}
body.apply-standalone #teacherDetailBody .m2813-name-row{display:flex!important;align-items:center!important;gap:8px!important;flex-wrap:wrap!important}
body.apply-standalone #teacherDetailBody .m2813-name-row h2,
body.apply-standalone #teacherDetailBody .m2813-name-row h3{margin:0!important;color:#081c3b!important;font-size:24px!important;letter-spacing:-.045em!important}
body.apply-standalone #teacherDetailBody .m2813-verified-icon{width:20px!important;height:20px!important;display:block!important;flex:none!important}
body.apply-standalone #teacherDetailBody .m2813-detail-role{margin-top:5px!important;color:#68809f!important;font-size:12px!important;line-height:1.55!important}
body.apply-standalone #teacherDetailBody .m2813-detail-media{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;
  margin:20px 28px 0!important;
}
body.apply-standalone #teacherDetailBody .m2813-detail-photo{overflow:hidden!important;border:1px solid #e0e8f2!important;border-radius:14px!important;background:#f6f9fd!important;aspect-ratio:16/9!important}
body.apply-standalone #teacherDetailBody .m2813-detail-photo img{width:100%!important;height:100%!important;object-fit:cover!important}
body.apply-standalone #teacherDetailBody section{
  margin:14px 28px 0!important;padding:18px!important;
  border:1px solid #e0e8f2!important;border-radius:14px!important;background:#fbfdff!important;
}
body.apply-standalone #teacherDetailBody section h3{margin:0 0 8px!important;color:#173a67!important;font-size:15px!important}
body.apply-standalone #teacherDetailBody section p{margin:0!important;color:#607693!important;font-size:12px!important;line-height:1.75!important}
body.apply-standalone #teacherDetailBody .m2813-detail-assignments{display:flex!important;gap:7px!important;flex-wrap:wrap!important}
body.apply-standalone #teacherDetailBody .m2813-detail-assignments span{padding:7px 10px!important;border:1px solid #d7e5fa!important;border-radius:999px!important;background:#edf5ff!important;color:#315f9e!important;font-size:11px!important;font-weight:800!important}
body.apply-standalone #teacherDetailBody .m2813-detail-metrics{
  display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important;margin:14px 28px 0!important;
}
body.apply-standalone #teacherDetailBody .m2813-detail-metrics>div{padding:15px!important;border:1px solid #e1e9f2!important;border-radius:13px!important;background:#f5f8fc!important}
body.apply-standalone #teacherDetailBody .m2813-detail-metrics small{display:block!important;color:#7c8da4!important;font-size:10px!important}
body.apply-standalone #teacherDetailBody .m2813-detail-metrics b{display:block!important;margin-top:5px!important;color:#081c3b!important;font-size:14px!important}
body.apply-standalone #teacherDetailBody .m2813-detail-reviews{margin:14px 28px 0!important}
body.apply-standalone #teacherDetailBody .m2813-detail-actions{
  position:sticky!important;bottom:0!important;z-index:4!important;
  display:grid!important;grid-template-columns:1fr!important;
  margin-top:20px!important;padding:14px 28px calc(16px + env(safe-area-inset-bottom))!important;
  border-top:1px solid #dfe7f1!important;background:rgba(255,255,255,.96)!important;backdrop-filter:blur(14px)!important;
}
body.apply-standalone #teacherDetailBody .m2813-detail-actions .btn{min-height:50px!important;border-radius:10px!important}

/* ---------- Step 6 · familiar application form grouping ---------- */
body.apply-standalone #appPage .request-panel{max-width:920px!important;padding:24px!important;background:#fff!important}
body.apply-standalone #appPage .request-panel .identity-banner{
  display:grid!important;grid-template-columns:42px minmax(0,1fr)!important;gap:13px!important;align-items:center!important;
  margin:0 0 22px!important;padding:14px 16px!important;border:1px solid #d8e6f7!important;border-radius:12px!important;
  background:linear-gradient(110deg,#f0f6ff,#fbfdff 66%)!important;
}
body.apply-standalone #appPage .request-panel .identity-banner img{width:42px!important;height:42px!important;border-radius:11px!important}
body.apply-standalone #appPage .request-panel .identity-banner b{color:#173a67!important;font-size:13px!important}
body.apply-standalone #appPage .request-panel .identity-banner span{margin-top:2px!important;color:#6e829d!important;font-size:11px!important;line-height:1.55!important}
body.apply-standalone #appPage .request-panel .field-grid{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;
  margin:0!important;padding:18px 0!important;border-top:1px solid #e7edf5!important;
}
body.apply-standalone #appPage .request-panel .field-grid:has(#name)::before{content:"01  기본 정보"}
body.apply-standalone #appPage .request-panel .field-grid:has(#phone)::before{content:"02  연락 정보"}
body.apply-standalone #appPage .request-panel .field-grid:has(#accessPin)::before{content:"03  조회 비밀번호"}
body.apply-standalone #appPage .request-panel .field-grid:has(#depositor)::before{content:"04  입금·수강 정보"}
body.apply-standalone #appPage .request-panel .field-grid:has(#request)::before{content:"05  강사에게 전달할 요청"}
body.apply-standalone #appPage .request-panel .field-grid:has(#name)::before,
body.apply-standalone #appPage .request-panel .field-grid:has(#phone)::before,
body.apply-standalone #appPage .request-panel .field-grid:has(#accessPin)::before,
body.apply-standalone #appPage .request-panel .field-grid:has(#depositor)::before,
body.apply-standalone #appPage .request-panel .field-grid:has(#request)::before{
  grid-column:1/-1!important;display:block!important;margin-bottom:1px!important;color:#1767ff!important;
  font-size:10px!important;font-weight:900!important;letter-spacing:.05em!important;
}
body.apply-standalone #appPage .request-panel .field{display:grid!important;align-content:start!important;gap:7px!important;min-width:0!important}
body.apply-standalone #appPage .request-panel .field label{margin:0!important;color:#173a67!important;font-size:13px!important;font-weight:850!important}
body.apply-standalone #appPage .request-panel .control,
body.apply-standalone #appPage .request-panel .readonly-value{
  width:100%!important;min-height:50px!important;border:1px solid #cddaea!important;border-radius:10px!important;background:#fbfdff!important;
  padding:12px 14px!important;color:#142e51!important;box-shadow:inset 0 1px 0 rgba(8,28,59,.02)!important;
}
body.apply-standalone #appPage .request-panel .control::placeholder{color:#a0afc2!important}
body.apply-standalone #appPage .request-panel .control:focus{background:#fff!important;border-color:#6fa1ff!important;box-shadow:0 0 0 3px rgba(23,103,255,.08)!important}
body.apply-standalone #appPage .request-panel .readonly-value{display:flex!important;align-items:center!important;background:#f3f6fa!important;color:#5d7089!important}
body.apply-standalone #appPage .request-panel textarea.control{min-height:120px!important;resize:vertical!important;line-height:1.65!important}
body.apply-standalone #appPage .request-panel .input-help{margin-top:0!important;color:#7a8ba1!important;font-size:11px!important;line-height:1.55!important}
body.apply-standalone #appPage .request-panel .legal-consent-box{margin-top:20px!important;border:1px solid #dde6f1!important;border-radius:14px!important;box-shadow:none!important}
body.apply-standalone #appPage .request-panel .legal-warning{margin-top:12px!important;border-color:#f1d7c5!important;background:#fff7f2!important;color:#7d4b31!important}

/* ---------- Bank transfer modal: clean hierarchy, no legacy green/beige ---------- */
body.apply-standalone #paymentModal{padding:16px!important;background:rgba(4,18,38,.58)!important;backdrop-filter:blur(14px)!important;-webkit-backdrop-filter:blur(14px)!important}
body.apply-standalone #paymentModal .payment-modal-card{
  width:min(620px,100%)!important;max-height:calc(100dvh - 32px)!important;overflow:auto!important;
  padding:30px!important;border:1px solid #dce6f2!important;border-radius:24px!important;background:#fff!important;
  box-shadow:0 34px 100px rgba(4,18,38,.28)!important;
}
body.apply-standalone #paymentModal .payment-close{top:16px!important;right:16px!important;width:42px!important;height:42px!important;border:1px solid #dce5f0!important;border-radius:12px!important;background:#f4f8fd!important;color:#183a65!important}
body.apply-standalone #paymentModal .payment-modal-mark{
  width:48px!important;height:48px!important;border-radius:14px!important;background:linear-gradient(145deg,#0b2b59,#1767ff)!important;color:#fff!important;
  box-shadow:0 10px 24px rgba(23,103,255,.18)!important;font-size:20px!important;
}
body.apply-standalone #paymentModal .modal-kicker{margin-top:12px!important;color:#1767ff!important;font-size:10px!important;letter-spacing:.12em!important}
body.apply-standalone #paymentModal h2{margin:7px 0 6px!important;color:#081c3b!important;font-size:28px!important;letter-spacing:-.045em!important}
body.apply-standalone #paymentModal .payment-modal-card>p{max-width:500px!important;color:#697f9b!important;font-size:12px!important;line-height:1.7!important}
body.apply-standalone #paymentModal .payment-account{
  display:grid!important;grid-template-columns:minmax(0,1fr) 122px!important;gap:16px!important;align-items:stretch!important;
  margin-top:20px!important;padding:20px!important;border:1px solid #224976!important;border-radius:16px!important;
  background:radial-gradient(circle at 90% 0,rgba(23,103,255,.30),transparent 42%),linear-gradient(135deg,#081c3b,#0d315e)!important;color:#fff!important;
}
body.apply-standalone #paymentModal .payment-account-copy small{color:#9eb4ce!important;font-size:10px!important}
body.apply-standalone #paymentModal .payment-account-copy strong{margin:6px 0!important;color:#fff!important;font-size:21px!important;line-height:1.4!important;letter-spacing:-.025em!important;font-variant-numeric:tabular-nums!important}
body.apply-standalone #paymentModal .payment-account-copy span{color:#c8d5e4!important;font-size:11px!important}
body.apply-standalone #paymentModal .payment-copy-button{
  min-height:92px!important;border:1px solid rgba(255,255,255,.30)!important;border-radius:12px!important;background:rgba(255,255,255,.96)!important;color:#173a67!important;
  padding:12px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:4px!important;box-shadow:none!important;
}
body.apply-standalone #paymentModal .payment-copy-button span{margin:0!important;color:#71839a!important;font-size:9px!important}
body.apply-standalone #paymentModal .payment-copy-button b{color:#173a67!important;font-size:14px!important}
body.apply-standalone #paymentModal .payment-facts{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important;margin-top:10px!important}
body.apply-standalone #paymentModal .payment-facts>div{min-width:0!important;padding:14px 15px!important;border:1px solid #dfe7f1!important;border-radius:12px!important;background:#f8fbff!important}
body.apply-standalone #paymentModal .payment-facts>div:nth-child(1),body.apply-standalone #paymentModal .payment-facts>div:nth-child(2){background:#f8fbff!important}
body.apply-standalone #paymentModal .payment-facts small{color:#7a8da5!important;font-size:10px!important}
body.apply-standalone #paymentModal .payment-facts b{margin-top:4px!important;color:#102b50!important;font-size:14px!important;font-variant-numeric:tabular-nums!important}
body.apply-standalone #paymentModal .payment-fixed-note{
  margin-top:10px!important;padding:14px 15px!important;border:1px solid #d8e6f7!important;border-radius:12px!important;background:linear-gradient(110deg,#eef5ff,#fbfdff)!important;
}
body.apply-standalone #paymentModal .payment-fixed-note b{color:#1767ff!important;font-size:11px!important}
body.apply-standalone #paymentModal .payment-fixed-note span{color:#627a98!important;font-size:11px!important;line-height:1.65!important}
body.apply-standalone #paymentModal .payment-choice-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:9px!important;margin-top:16px!important}
body.apply-standalone #paymentModal .payment-choice-actions .btn{min-height:50px!important;border-radius:10px!important}
body.apply-standalone #paymentModal [data-payment-done]{background:#1767ff!important;color:#fff!important;border-color:#1767ff!important;box-shadow:0 10px 22px rgba(23,103,255,.15)!important}

/* Payment confirmation follows the same visual system */
body.apply-standalone #paymentConfirmModal{background:rgba(4,18,38,.58)!important;backdrop-filter:blur(14px)!important}
body.apply-standalone #paymentConfirmModal .payment-confirm-card{border-color:#dce6f2!important;background:#fff!important;color:#081c3b!important;box-shadow:0 34px 100px rgba(4,18,38,.28)!important}
body.apply-standalone #paymentConfirmModal .confirm-symbol{background:#edf5ff!important;color:#1767ff!important}
body.apply-standalone #paymentConfirmModal .confirm-warning{border-color:#f0d9c9!important;background:#fff7f2!important}
body.apply-standalone #paymentConfirmModal .confirm-warning b{color:#8b4c2a!important}
body.apply-standalone #paymentConfirmModal .confirm-warning span{color:#7b6a61!important}

/* ---------- Payment checking + Kakao identity ---------- */
body.apply-standalone #appPage .checking-step.done{border-color:#cfe0ff!important;background:#f0f6ff!important}
body.apply-standalone #appPage .checking-step.done i{background:#1767ff!important;color:#fff!important}
body.apply-standalone #appPage .checking-step.active{border-color:#8fb5ff!important;background:#edf4ff!important;box-shadow:0 0 0 3px rgba(23,103,255,.07)!important}
body.apply-standalone #appPage [data-student-kakao-connect-now]{
  position:relative!important;background:#FEE500!important;color:#191919!important;border:1px solid #F0D800!important;
  box-shadow:0 8px 20px rgba(136,113,0,.12)!important;font-weight:900!important;
}
body.apply-standalone #appPage [data-student-kakao-connect-now]::before{
  content:""!important;display:inline-block!important;width:18px!important;height:14px!important;margin-right:2px!important;
  border-radius:50%!important;background:#191919!important;vertical-align:-2px!important;
  clip-path:polygon(4% 6%,96% 6%,96% 74%,63% 74%,52% 96%,44% 74%,4% 74%)!important;
}
body.apply-standalone #appPage [data-student-kakao-connect-now]:hover{background:#F5DE00!important;transform:translateY(-1px)!important}
body.apply-standalone #appPage [data-student-kakao-connect-now]:focus-visible{outline:3px solid rgba(25,25,25,.22)!important;outline-offset:2px!important}

/* ---------- Responsive completion ---------- */
@media(max-width:780px){
  body.apply-standalone #teacherDetailModal{padding:max(8px,env(safe-area-inset-top)) 8px max(8px,env(safe-area-inset-bottom))!important;align-items:flex-end!important}
  body.apply-standalone #teacherDetailModal .m2813-detail-card{max-height:92dvh!important;border-radius:20px 20px 14px 14px!important}
  body.apply-standalone #teacherDetailBody .m2813-detail-head{grid-template-columns:58px minmax(0,1fr)!important;gap:12px!important;padding:22px 60px 18px 18px!important}
  body.apply-standalone #teacherDetailBody .m2813-detail-avatar{width:58px!important;height:58px!important;min-width:58px!important;border-radius:16px!important}
  body.apply-standalone #teacherDetailBody .m2813-name-row h2,body.apply-standalone #teacherDetailBody .m2813-name-row h3{font-size:20px!important}
  body.apply-standalone #teacherDetailBody .m2813-detail-media{grid-template-columns:1fr!important;margin:14px 14px 0!important}
  body.apply-standalone #teacherDetailBody section{margin:10px 14px 0!important;padding:14px!important}
  body.apply-standalone #teacherDetailBody .m2813-detail-metrics{margin:10px 14px 0!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important}
  body.apply-standalone #teacherDetailBody .m2813-detail-metrics>div{padding:10px!important}
  body.apply-standalone #teacherDetailBody .m2813-detail-reviews{margin:10px 14px 0!important}
  body.apply-standalone #teacherDetailBody .m2813-detail-actions{padding:10px 14px calc(12px + env(safe-area-inset-bottom))!important}

  body.apply-standalone #appPage .request-panel{padding:15px!important}
  body.apply-standalone #appPage .request-panel .field-grid{grid-template-columns:1fr!important;padding:16px 0!important;gap:11px!important}
  body.apply-standalone #appPage .request-panel .identity-banner{grid-template-columns:36px minmax(0,1fr)!important;padding:12px!important}
  body.apply-standalone #appPage .request-panel .identity-banner img{width:36px!important;height:36px!important}
  body.apply-standalone #appPage .request-panel .control,body.apply-standalone #appPage .request-panel .readonly-value{min-height:49px!important;font-size:16px!important}
  body.apply-standalone #appPage .request-panel textarea.control{min-height:110px!important}

  body.apply-standalone #paymentModal{padding:8px!important;align-items:flex-end!important}
  body.apply-standalone #paymentModal .payment-modal-card{max-height:92dvh!important;padding:22px 16px calc(16px + env(safe-area-inset-bottom))!important;border-radius:20px 20px 14px 14px!important}
  body.apply-standalone #paymentModal h2{font-size:24px!important}
  body.apply-standalone #paymentModal .payment-account{grid-template-columns:1fr!important;gap:10px!important;padding:16px!important}
  body.apply-standalone #paymentModal .payment-copy-button{min-height:46px!important;flex-direction:row!important}
  body.apply-standalone #paymentModal .payment-facts{grid-template-columns:1fr 1fr!important}
  body.apply-standalone #paymentModal .payment-choice-actions{grid-template-columns:1fr!important}
  body.apply-standalone #paymentModal .payment-choice-actions [data-payment-done]{order:-1!important}
  body.apply-standalone #appPage .checking-actions{display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
}
@media(max-width:390px){
  body.apply-standalone #teacherDetailBody .m2813-detail-metrics{grid-template-columns:1fr!important}
  body.apply-standalone #paymentModal .payment-facts{grid-template-columns:1fr!important}
}
@media(prefers-reduced-motion:reduce){
  body.apply-standalone #appPage [data-student-kakao-connect-now]:hover{transform:none!important}
}