/* =========================================================
   카이스 — 업무 절차 / 업무 분야 페이지 전용 스타일
   ========================================================= */

/* page wrapper top padding (fixed header) */
.subpage{ padding-top:69px; }

/* ---------- shared page intro ---------- */
.page-intro{ text-align:center; max-width:760px; margin:0 auto; padding-top:clamp(20px,3vw,40px); }
.page-intro .eyebrow{ display:block; }
.page-intro h1{ font-size:clamp(34px,4.6vw,58px); font-weight:800; letter-spacing:-.035em; color:var(--c-strong); margin-top:14px; }
.page-intro .sub{ font-size:clamp(15px,1.25vw,18px); color:var(--c-default); margin-top:18px; line-height:1.7; }

/* ============================================================
   업무 절차 (process)
   ============================================================ */
.proc-card{ background:linear-gradient(180deg,#fbfcfe,#f4f6f9); border:1px solid var(--border); border-radius:24px;
  padding:clamp(32px,4vw,52px) clamp(22px,3.5vw,48px); margin-top:clamp(28px,3.5vw,44px); box-shadow:var(--shadow-sm); }
.proc-flow{ display:flex; align-items:flex-start; justify-content:center; gap:0; }
.proc-step{ position:relative; flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 6px; }
.proc-step .num{ position:absolute; top:-14px; left:50%; transform:translateX(-50%); z-index:3;
  width:34px; height:34px; border-radius:50%; background:var(--brand-default); color:#fff;
  font-size:13px; font-weight:800; display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 10px -2px rgba(183,40,60,.5); border:3px solid #fff; }
.proc-step .disc{ width:clamp(96px,8.5vw,128px); height:clamp(96px,8.5vw,128px); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:#fff; position:relative;
  box-shadow:0 16px 30px -12px rgba(22,32,58,.5); }
.proc-step .disc::before{ content:""; position:absolute; inset:-9px; border-radius:50%; border:1px solid var(--border); }
.proc-step .disc svg{ width:46%; height:46%; }
/* navy gradient — 단계마다 점점 진하게 (step은 홀수 nth-child: 1,3,5,7,9,11) */
.proc-step:nth-child(1) .disc{ background:linear-gradient(160deg,#3a527d,#2a3c5e); }
.proc-step:nth-child(3) .disc{ background:linear-gradient(160deg,#33496f,#243450); }
.proc-step:nth-child(5) .disc{ background:linear-gradient(160deg,#2c3f60,#1d2c47); }
.proc-step:nth-child(7) .disc{ background:linear-gradient(160deg,#253653,#16243c); }
.proc-step:nth-child(9) .disc{ background:linear-gradient(160deg,#1f2e49,#121d31); }
.proc-step:nth-child(11) .disc{ background:linear-gradient(160deg,#16223a,#0c1322); }
.proc-step .tt{ font-size:clamp(14px,1.15vw,18px); font-weight:700; color:var(--c-strong); margin-top:20px; letter-spacing:-.02em; line-height:1.3; }
.proc-step .st{ font-size:clamp(12px,.95vw,13.5px); color:var(--c-default); margin-top:7px; line-height:1.45; }
.proc-arrow{ flex:0 0 auto; align-self:flex-start; display:flex; align-items:center; justify-content:center;
  height:clamp(96px,8.5vw,128px); color:var(--gray-300); }
.proc-arrow svg{ width:20px; height:20px; }

.proc-note{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:34px; font-size:13.5px; color:var(--c-default); }
.proc-note svg{ color:var(--brand-default); flex:none; }

/* extra: 절차 보조 카드 (선택) */
.proc-aside{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:clamp(28px,3.5vw,44px); }
.proc-ac{ background:var(--bg); border:1px solid var(--border); border-radius:var(--r-lg); padding:26px 24px; box-shadow:var(--ring-card); }
.proc-ac .ai{ width:46px; height:46px; border-radius:12px; background:var(--brand-faint); color:var(--brand-default); display:flex; align-items:center; justify-content:center; }
.proc-ac .ai svg{ width:23px; height:23px; }
.proc-ac h4{ font-size:17px; font-weight:700; color:var(--c-strong); margin-top:16px; }
.proc-ac p{ font-size:14px; color:var(--c-default); line-height:1.65; margin-top:8px; }

@media (max-width:900px){
  .proc-flow{ flex-wrap:wrap; justify-content:center; gap:32px 0; }
  .proc-step{ flex:0 0 33.333%; }
  .proc-arrow{ display:none; }
  .proc-aside{ grid-template-columns:1fr; }
}
@media (max-width:520px){
  .proc-step{ flex:0 0 50%; }
}

/* ============================================================
   업무 분야 (fields detail page)
   ============================================================ */
.fld-tabs{ position:sticky; top:69px; z-index:30; background:rgba(255,255,255,.92); backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--border); margin-top:0; }
.fld-tabs-inner{ max-width:920px; margin:0 auto; padding:0 var(--gutter); display:grid; grid-template-columns:repeat(5, 1fr); }
.fld-tabs a{ position:relative; background:none; border:0; padding:19px 8px; font-size:15.5px; font-weight:600;
  color:var(--c-default); white-space:nowrap; transition:.16s var(--ease); text-align:center;
  text-decoration:none; cursor:pointer; display:block; }
.fld-tabs a:hover{ color:var(--c-strong); }
.fld-tabs a.on{ color:var(--brand-default); }
.fld-tabs a.on::after{ content:""; position:absolute; left:50%; transform:translateX(-50%); width:46px; bottom:0; height:2.5px; background:var(--brand-default); border-radius:2px; }
@media (max-width:680px){
  .fld-tabs-inner{ display:flex; gap:2px; overflow-x:auto; }
  .fld-tabs a{ flex:none; padding:18px 16px; }
}

.fld-hero{ position:relative; overflow:hidden; padding:clamp(48px,6vw,84px) 0;
  background:linear-gradient(160deg,#243860,#16243c); color:#fff; }
.fld-hero .emblem{ position:absolute; right:-40px; top:50%; transform:translateY(-50%); width:min(36vw,400px); opacity:.06; }
.fld-hero .fh-num{ font-size:14px; font-weight:700; color:var(--brand-subtle); letter-spacing:.08em; }
.fld-hero h1{ color:#fff; font-size:clamp(30px,4vw,52px); font-weight:800; letter-spacing:-.03em; margin-top:12px; }
.fld-hero .fh-desc{ color:rgba(255,255,255,.78); font-size:clamp(15px,1.3vw,18px); margin-top:18px; max-width:620px; line-height:1.7; }
.fld-hero .fh-chips{ display:flex; flex-wrap:wrap; gap:9px; margin-top:24px; }
.fld-hero .fh-chip{ font-size:13px; font-weight:600; color:#fff; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r-full); padding:7px 15px; }

.fld-body{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(28px,4vw,56px); align-items:center; margin-top:clamp(28px,3.5vw,44px); }
.fld-first{ padding-top:clamp(28px,3.5vw,44px); }
.fld-first .fld-body{ margin-top:0; }
.fld-body > *{ min-width:0; }
.fld-photo{ border-radius:var(--r-lg); overflow:hidden; min-height:360px; box-shadow:var(--ring-card); }
.fld-photo img{ width:100%; height:100%; min-height:360px; object-fit:cover; display:block; }
.fld-detail .eyebrow{ display:block; }
.fld-detail h2{ font-size:clamp(24px,2.6vw,34px); font-weight:800; letter-spacing:-.025em; color:var(--c-strong); margin-top:12px; line-height:1.3; }
.fld-detail .lead{ margin-top:16px; }
.fld-points{ list-style:none; margin-top:24px; display:flex; flex-direction:column; gap:13px; }
.fld-points li{ display:flex; gap:11px; font-size:15px; color:var(--c-emph); line-height:1.5; }
.fld-points svg{ flex:none; margin-top:3px; color:var(--brand-default); }
.fld-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:30px; }
.fld-chips{ display:flex; flex-wrap:wrap; gap:9px; margin-top:24px; }
.fld-chip{ font-size:13px; font-weight:600; color:var(--c-emph); background:var(--bg-muted); border:1px solid var(--border);
  border-radius:var(--r-full); padding:7px 15px; transition:.15s var(--ease); }
.fld-docs, .fld-process{ margin-top:28px; }
.fld-docs h3, .fld-process h3{ font-size:15px; font-weight:800; color:var(--c-strong); margin-bottom:10px; letter-spacing:-.01em; }
.fld-docs ul{ list-style:disc; padding-left:19px; }
.fld-docs li, .fld-process li{ font-size:14.5px; color:var(--c-emph); line-height:1.6; margin:5px 0; }
.fld-process ol{ padding-left:19px; }
.fld-process li{ padding-left:2px; }
.fld-chip:hover{ border-color:var(--brand-line); color:var(--brand-default); background:var(--brand-faint); }

/* 절차 미니 + 체크리스트 carry from kit */
.fld-strip{ background:var(--bg-muted); }
.fld-faq{ margin-top:clamp(28px,3.5vw,44px); }
.fld-faq h3{ font-size:clamp(19px,4.6vw,22px); font-weight:700; color:var(--c-strong); letter-spacing:-.02em; word-break:keep-all; }
.fld-qa{ margin-top:22px; display:flex; flex-direction:column; gap:12px; }
.qa{ background:var(--bg); border:1px solid var(--border); border-radius:var(--r-lg); padding:clamp(16px,3.6vw,22px) clamp(16px,4vw,24px); box-shadow:var(--ring-card); }
.qa .q{ display:flex; gap:10px; font-size:clamp(15px,3.8vw,16px); font-weight:700; color:var(--c-strong); line-height:1.45; word-break:keep-all; }
.qa .q .qm{ color:var(--brand-default); font-weight:800; flex:none; }
.qa .a{ font-size:clamp(13.5px,3.5vw,14.5px); color:var(--c-default); line-height:1.7; margin-top:10px; padding-left:24px; word-break:keep-all; }

@media (max-width:900px){
  .fld-body{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .qa .a{ padding-left:0; margin-top:8px; }
}