/* =========================================================
   채용 (news-recruit) — main.css + about.css 위에 얹는 페이지 전용 스타일
   ========================================================= */

/* 히어로 버튼 */
.sub-ctas{ margin-top:40px; display:flex; flex-wrap:wrap; gap:12px }
.ico-out{ display:inline-block; width:18px; height:18px; flex:none; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8 7h9v9'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8 7h9v9'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:translate .3s var(--ease) }
a:hover .ico-out{ translate:2px -2px }
.btn .ico-out{ margin-left:8px }
@media (max-width:767px){ .sub-ctas{ margin-top:28px } .sub-ctas .btn{ width:100% } }

/* ---------- 인재상 ---------- */
.vals{ background:#fff }
.vcards{ margin-top:64px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap) }
.vcard{ position:relative; display:flex; flex-direction:column; min-height:440px; padding:40px; border-radius:var(--r-xl); background:var(--bg-light);
  overflow:hidden; isolation:isolate; transition:translate .5s var(--ease), box-shadow .5s var(--ease) }
.vcard:hover{ translate:0 -6px; box-shadow:0 40px 70px -40px rgba(47,31,196,.4) }
.vcard__no{ font-size:16px; font-weight:700; letter-spacing:.08em; color:var(--text-sub) }
.vcard__ic{ margin-top:auto; width:64px; height:64px; display:grid; place-items:center; border-radius:20px; background:#fff; color:var(--point);
  box-shadow:0 0 0 1px rgba(18,16,34,.05) }
.vcard__ic svg{ width:30px; height:30px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.vcard h3{ margin-top:28px; font-size:40px; font-weight:700; letter-spacing:-.045em; line-height:1.2; color:var(--text-strong) }
.vcard__en{ margin-top:6px; font-size:16px; font-weight:600; letter-spacing:.1em; color:var(--point) }
.vcard > p:last-child{ margin-top:18px; font-size:18px; line-height:1.65; color:var(--text-body) }
.vcard--point{ background:linear-gradient(160deg,var(--point),var(--point-deep) 60%,#1B1460); color:#fff }
.vcard--point::after{ content:""; position:absolute; z-index:-1; right:-30%; top:-30%; width:80%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(127,216,255,.45), transparent 65%) }
.vcard--point .vcard__no{ color:rgba(255,255,255,.6) }
.vcard--point .vcard__ic{ background:rgba(255,255,255,.12); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.2) }
.vcard--point h3{ color:#fff } .vcard--point .vcard__en{ color:#B3A9FF }
.vcard--point > p:last-child{ color:rgba(255,255,255,.8) }
@media (max-width:1024px){ .vcard{ min-height:380px; padding:32px } .vcard h3{ font-size:34px } }
@media (max-width:767px){
  .vcards{ margin-top:36px; grid-template-columns:1fr; gap:12px }
  .vcard{ min-height:0; padding:28px }
  .vcard__ic{ margin-top:36px; width:56px; height:56px; border-radius:16px }
  .vcard h3{ font-size:30px; margin-top:22px }
  .vcard > p:last-child br{ display:none }
}

/* ---------- 채용 절차 ---------- */
.proc{ background:var(--bg-light) }
.steps{ margin-top:64px; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:var(--gap); counter-reset:s }
.step{ position:relative; display:flex; flex-direction:column; gap:10px; padding:32px 28px 36px; border-radius:var(--r-lg); background:#fff;
  box-shadow:0 0 0 1px rgba(18,16,34,.05) }
.step::after{ content:""; position:absolute; top:50px; right:calc(var(--gap) * -1); width:var(--gap); height:2px; background:var(--line-strong) }
.step--last::after{ display:none }
.step__no{ width:40px; height:40px; display:grid; place-items:center; border-radius:50%; font-size:16px; font-weight:700; color:var(--point); background:var(--point-light);
  font-variant-numeric:tabular-nums }
.step b{ margin-top:16px; font-size:22px; font-weight:700; letter-spacing:-.035em; color:var(--text-strong) }
.step p{ font-size:16px; line-height:1.6; color:var(--text-sub) }
.step--last{ background:var(--text-strong) }
.step--last .step__no{ background:var(--point); color:#fff }
.step--last b{ color:#fff } .step--last p{ color:rgba(255,255,255,.65) }
@media (max-width:1280px){ .step{ padding:28px 22px 30px } .step b{ font-size:20px } }
@media (max-width:1024px){
  .steps{ grid-template-columns:repeat(3,minmax(0,1fr)) }
  .step:nth-child(3)::after{ display:none }
}
@media (max-width:767px){
  .steps{ margin-top:36px; grid-template-columns:1fr; gap:0 }
  .step{ display:grid; grid-template-columns:40px 1fr; column-gap:18px; row-gap:4px; padding:20px 22px; border-radius:var(--r-md) }
  .step + .step{ margin-top:12px }
  .step__no{ grid-row:1 / 3 }
  .step b{ margin-top:0; font-size:19px; align-self:end }
  .step::after,.step:nth-child(3)::after{ display:block; top:auto; bottom:-12px; left:41px; right:auto; width:2px; height:12px }
  .step--last::after{ display:none }
}

/* ---------- 복리후생 (다크) ---------- */
.bene{ background:var(--bg-dark); color:rgba(255,255,255,.72) }
.bene .sec-title{ color:#fff } .bene .sec-title em{ color:var(--point-on-dark) } .bene .sec-lead{ color:rgba(255,255,255,.62) }
.bgrid{ margin-top:64px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap) }
.bg{ padding:36px 36px 40px; border-radius:var(--r-lg); background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px var(--line-dark);
  transition:background-color .4s var(--ease), box-shadow .4s var(--ease) }
.bg:hover{ background:rgba(167,158,255,.07); box-shadow:inset 0 0 0 1px rgba(167,158,255,.3) }
.bg h3{ font-size:16px; font-weight:700; letter-spacing:.04em; color:var(--point-on-dark) }
.bg ul{ margin-top:24px; display:flex; flex-direction:column; gap:18px }
.bg li{ display:grid; grid-template-columns:44px 1fr; align-items:center; gap:16px; font-size:18px; font-weight:500; line-height:1.5; color:#fff; letter-spacing:-.02em }
.bg i{ width:44px; height:44px; display:grid; place-items:center; border-radius:14px; background:rgba(255,255,255,.07); color:#B3A9FF }
.bg svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
@media (max-width:1024px){ .bgrid{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:767px){ .bgrid{ margin-top:36px; grid-template-columns:1fr; gap:12px } .bg{ padding:26px 24px 28px } .bg li{ font-size:17px } }

/* ---------- FAQ ---------- */
.faq{ background:#fff }
.faq .grid{ align-items:start; row-gap:40px }
.faq__head{ grid-column:1 / 5; position:sticky; top:calc(var(--header) + 96px) }
.faq__mail{ color:var(--point); font-weight:600; text-decoration:underline; text-underline-offset:3px }
.faq__list{ grid-column:6 / 13; border-top:1px solid var(--text-strong) }
.qa{ border-bottom:1px solid var(--line) }
.qa summary{ position:relative; display:flex; align-items:center; gap:20px; min-height:88px; padding:24px 64px 24px 0; cursor:pointer; list-style:none;
  font-size:20px; font-weight:600; line-height:1.5; letter-spacing:-.025em; color:var(--text-strong); transition:color .3s var(--ease) }
.qa summary::-webkit-details-marker{ display:none }
.qa summary::before{ content:"Q"; flex:none; font-size:20px; font-weight:800; color:var(--point) }
.qa summary::after{ content:""; position:absolute; right:4px; top:50%; width:40px; height:40px; margin-top:-20px; border-radius:50%;
  background:var(--bg-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121022' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/18px no-repeat;
  transition:rotate .35s var(--ease), background-color .3s var(--ease) }
.qa summary:hover{ color:var(--point) }
.qa[open] summary::after{ rotate:45deg; background-color:var(--point-light) }
.qa__a{ padding:0 64px 32px 36px; display:flex; flex-direction:column; gap:12px; font-size:17px; line-height:1.75; color:var(--text-body) }
.qa__a a{ color:var(--point); font-weight:600; text-decoration:underline; text-underline-offset:3px }
@media (max-width:1024px){ .faq__head{ grid-column:1 / -1; position:static } .faq__list{ grid-column:1 / -1 } }
@media (max-width:767px){
  .qa summary{ min-height:72px; padding:20px 52px 20px 0; gap:14px; font-size:17px }
  .qa summary::before{ font-size:17px }
  .qa summary::after{ width:36px; height:36px; margin-top:-18px }
  .qa__a{ padding:0 0 24px 30px; font-size:16px }
}

.page-recruit .cta{ background:#fff }

@media (max-width:767px){ .vcard h3{ margin-top:16px } .vcard > p:last-child{ margin-top:12px; font-size:16px } }