@charset "utf-8";
/**
 * ============================================================================
 * TalentProX | CSS — [공통]
 * ----------------------------------------------------------------------------
 * 파일명 : client/css/layout/common.css
 * 분류   : 공통
 * 용도   : GNB/서브/LNB/카드/버튼/푸터·레거시 chrome 중화(.cli-shell)
 * 사용처 : cli_typelink.jsp 항상 로드
 * 로드   : /inc/front_typelink.jsp [A] 공통
 * 주의   : 토큰·리셋은 base/default.css. 레거시 layout.css 뒤에 로드해야 덮음
 * ============================================================================
 */

/* ---------- util ---------- */
.cli-wrap{min-height:100vh;display:flex;flex-direction:column;}
.cli-main{flex:1;}
.cli-container{max-width:var(--c-max);margin:0 auto;padding:0 24px;}

/* ---------- button ---------- */
.cli-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:40px;min-height:40px;padding:0 18px;
  border:1px solid transparent;border-radius:var(--c-r);
  font-size:14px;font-weight:600;line-height:1;letter-spacing:-.02em;
  text-decoration:none !important;
  transition:background .15s,border-color .15s,color .15s;
}
.cli-btn.primary{background:var(--c-navy);color:#fff;}
.cli-btn.primary:hover{background:#0a5c4c;}
.cli-btn.ghost{background:#fff;border-color:var(--c-line-strong);color:var(--c-ink);}
.cli-btn.ghost:hover{border-color:var(--c-navy);color:var(--c-navy);}
.cli-btn.sm{height:32px;min-height:32px;padding:0 12px;font-size:13px;}

/* ---------- header ---------- */
.cli-header{
  background:rgba(255,255,255,.94);
  border-bottom:1px solid var(--c-line);
  position:fixed;top:0;left:0;right:0;z-index:50;
  height:auto;min-height:64px;
  backdrop-filter:saturate(160%) blur(16px);
  -webkit-backdrop-filter:saturate(160%) blur(16px);
}
.cli-header .bar{
  display:flex;align-items:center;justify-content:space-between;gap:28px;
  height:64px;min-height:64px;
  position:relative;z-index:2;background:transparent;
}
.cli-logo{
  font-size:20px;font-weight:800;color:#011c50;letter-spacing:-.045em;
  text-decoration:none !important;white-space:nowrap;
}
.cli-logo:hover{text-decoration:none !important;}
.cli-logo span{color:#004a98;font-weight:800;}
.cli-gnb{
  display:flex;gap:0;flex:0 0 auto;list-style:none;margin:0 0 0 auto;padding:0;
  justify-content:flex-end;
}
.cli-gnb > li > a{
  display:flex;align-items:center;padding:0 18px;height:64px;
  font-size:15px;font-weight:600;color:var(--c-ink);letter-spacing:-.03em;
  text-decoration:none !important;
  box-shadow:inset 0 -3px 0 transparent;
  transition:color .15s,box-shadow .15s;
}
.cli-gnb > li > a:hover{color:var(--c-navy);}
.cli-gnb > li.on > a{color:var(--c-navy);font-weight:700;box-shadow:inset 0 -3px 0 var(--c-navy);}

/* sub nav - quiet white strip, no glass/blur */
.cli-sub{
  display:none;
  position:absolute;left:0;right:0;top:100%;
  width:100%;z-index:3;pointer-events:none;
  background:#fff;
  border-bottom:1px solid var(--c-line);
  box-shadow:0 2px 6px rgba(20,24,22,.05);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.cli-sub.is-open{display:block;}
.cli-sub-row{
  display:flex;align-items:center;justify-content:flex-end;gap:0;
  min-height:44px;
  padding-top:0 !important;padding-bottom:0 !important;
}
.cli-sub-spacer{display:none;}
.cli-sub-links{
  flex:0 0 auto;min-width:0;
  display:flex;gap:0 24px;flex-wrap:wrap;align-items:center;justify-content:flex-end;
  padding:11px 0;
  pointer-events:auto;background:transparent;border:0;box-shadow:none;border-radius:0;
}
.cli-sub-links a{
  font-size:13px;font-weight:500;color:var(--c-muted);letter-spacing:-.02em;
  text-decoration:none !important;padding:4px 0;
  transition:color .15s;
}
.cli-sub-links a:hover,.cli-sub-links a.on{color:var(--c-navy);font-weight:600;}

/* ---------- page with LNB ---------- */
.cli-page{display:grid;grid-template-columns:200px 1fr;gap:40px;padding:36px 0 72px;}
.cli-lnb{
  background:transparent;border:0;border-radius:0;
  padding:0;align-self:start;overflow:visible;
  position:sticky;top:64px;z-index:4;
  width:200px;max-width:200px;
  overflow-anchor:none;
}
.cli-lnb .title{
  margin:0;padding:2px 12px 14px;
  background:transparent;color:var(--c-muted);
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
}
.cli-lnb ul{list-style:none;margin:0;padding:0;}
.cli-lnb a{
  display:block;padding:10px 12px;border-radius:999px;
  min-height:40px;box-sizing:border-box;
  font-size:14px;font-weight:600;color:var(--c-muted);letter-spacing:-.02em;
  text-decoration:none !important;
  line-height:20px;
}
.cli-lnb a:hover{background:rgba(20,24,22,.04);color:var(--c-ink);}
.cli-lnb a.on,.cli-lnb a.selected{
  background:var(--c-navy-deep);color:#fff;font-weight:600;
  box-shadow:none;
}
.cli-lnb a.on:hover,.cli-lnb a.selected:hover{background:var(--c-navy-deep);color:#fff;}

.cli-content{min-width:0;}
.cli-page-title{
  margin:0 0 6px;font-size:24px;font-weight:800;line-height:1.3;letter-spacing:-.04em;color:var(--c-ink);
}
.cli-page-desc{margin:0 0 24px;font-size:13px;line-height:1.6;color:var(--c-muted);}
.cli-breadcrumb{
  display:flex;gap:6px;flex-wrap:wrap;list-style:none;
  margin:0 0 14px;padding:0;font-size:12px;color:var(--c-muted);
}
.cli-breadcrumb a{color:var(--c-muted);text-decoration:none !important;}
.cli-breadcrumb a:hover{color:var(--c-navy);}
.cli-breadcrumb li:not(:last-child)::after{content:"/";margin-left:6px;opacity:.45;}

/* sub-page title — editorial, not a navy band */
.cli-page-hero{
  position:relative;overflow:visible;
  margin:0 0 28px;padding:4px 0 22px;
  border-radius:0;color:var(--c-ink);
  background:transparent;border-bottom:1px solid var(--c-line);
}
.cli-page-hero::before{display:none;}
.cli-page-hero > *{position:relative;z-index:1;}
.cli-page-hero .cli-breadcrumb{margin:0 0 14px;color:var(--c-muted);}
.cli-page-hero .cli-breadcrumb a{color:var(--c-muted);}
.cli-page-hero .cli-breadcrumb a:hover{color:var(--c-navy);}
.cli-page-hero .cli-breadcrumb li:not(:last-child)::after{color:var(--c-line-strong);}
.cli-page-hero .cli-page-title{
  margin:0 0 8px;color:var(--c-ink);
  font-size:clamp(28px,3.2vw,36px);letter-spacing:-.05em;
}
.cli-page-hero .cli-page-title::after{
  content:"";display:block;width:32px;height:3px;margin-top:14px;
  background:var(--c-navy);border-radius:99px;
}
.cli-page-hero .cli-page-desc{margin:0;color:var(--c-muted);font-size:14px;}
.cli-page-hero-media{display:none;}
.cli-page-hero--photo{
  overflow:hidden;min-height:220px;
  margin:0 0 28px;padding:28px 42% 32px 28px;
  border:0;border-radius:var(--c-r);color:var(--c-ink);
  background:
    radial-gradient(ellipse 90% 80% at 12% -10%, #f3d5c4 0%, transparent 58%),
    radial-gradient(ellipse 80% 90% at 0% 110%, #c8e6dc 0%, transparent 52%),
    linear-gradient(180deg, #f7f3ee 0%, #efe8df 100%);
}
.cli-page-hero--photo .cli-page-hero-media{
  display:block;position:absolute;z-index:0;pointer-events:none;
  top:16px;right:16px;bottom:16px;width:36%;
  border-radius:10px;overflow:hidden;
  box-shadow:0 10px 28px rgba(20,24,22,.12);
}
.cli-page-hero--photo .cli-page-hero-media img{
  display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center 28%;
}
.cli-page-hero--photo::before{
  content:"";display:block;position:absolute;z-index:1;pointer-events:none;
  top:16px;right:16px;bottom:16px;width:36%;
  border-radius:10px;
  background:linear-gradient(90deg, rgba(239,232,223,.92) 0%, rgba(239,232,223,.18) 42%, transparent 70%);
}
.cli-page-hero--photo::after{
  content:"";position:absolute;z-index:1;pointer-events:none;
  left:46%;bottom:28px;width:72px;height:72px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #c8e6dc 0%, #a8c5b5 42%, transparent 70%);
  opacity:.9;
}
.cli-page-hero--photo .cli-breadcrumb,
.cli-page-hero--photo .cli-breadcrumb a,
.cli-page-hero--photo .cli-page-desc{color:var(--c-muted);}
.cli-page-hero--photo .cli-breadcrumb a:hover{color:var(--c-navy);}
.cli-page-hero--photo .cli-breadcrumb li:not(:last-child)::after{color:var(--c-line-strong);}
.cli-page-hero--photo .cli-page-title{color:var(--c-navy-deep);}
.cli-page-hero--photo .cli-page-title::after{background:var(--c-navy);width:36px;}

/* ---------- card ---------- */
.cli-card{
  background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--c-r);
  padding:24px 26px;box-shadow:0 8px 24px rgba(20,24,22,.04);
}
.cli-card + .cli-card{margin-top:16px;}
.cli-card h2{margin:0 0 14px;font-size:15px;font-weight:700;letter-spacing:-.03em;}
.cli-card .cli-sec-title{margin-top:0;}

/* ---------- footer ---------- */
.cli-footer{
  margin-top:auto;background:var(--c-navy-deep);color:rgba(255,255,255,.55);
  font-size:12px;line-height:1.6;padding:28px 0;
}
.cli-footer .cli-container{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center;}
.cli-footer a{color:rgba(255,255,255,.72);text-decoration:none;}
.cli-footer a:hover{color:#fff;text-decoration:none;}
.cli-footer .brand{font-size:14px;font-weight:700;color:#fff;letter-spacing:-.03em;margin-bottom:2px;}
.cli-footer .links{display:flex;gap:18px;flex-wrap:wrap;}

/* ---------- layer popup ---------- */
.cli-layer{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:20px;}
.cli-layer.is-open{display:flex;}
.cli-layer-dim{position:absolute;inset:0;background:rgba(10,20,40,.45);}
.cli-layer-box{
  position:relative;z-index:1;width:100%;max-width:420px;background:#fff;border-radius:var(--c-r);
  box-shadow:0 12px 32px rgba(20,24,22,.18);padding:24px 22px 18px;
}
.cli-layer-box h3{margin:0 0 10px;font-size:16px;font-weight:800;}
.cli-layer-box p{margin:0 0 18px;font-size:14px;line-height:1.6;color:var(--c-ink);}
.cli-layer-actions{display:flex;justify-content:flex-end;gap:8px;}

@media (max-width:900px){
  .cli-page{grid-template-columns:1fr;gap:0;}
  .cli-lnb{display:none;}
  .cli-gnb{overflow-x:auto;}
  .cli-gnb > li > a{padding:0 12px;font-size:14px;}
  .cli-page-hero--photo{min-height:auto;padding:22px 20px 148px;}
  .cli-page-hero--photo .cli-page-hero-media,
  .cli-page-hero--photo::before{
    top:auto;left:16px;right:16px;bottom:16px;width:auto;height:112px;
  }
  .cli-page-hero--photo::after{left:auto;right:28px;bottom:28px;width:56px;height:56px;}
}

/* ================================================================
   JSP shell: neutralise legacy layout.css / object.css chrome
   ================================================================ */
#wrap.cli-shell,
html.cli-shell #wrap{
  min-height:100vh !important;
  display:flex !important;
  flex-direction:column !important;
  background:var(--c-bg) !important;
  width:auto !important;
  font-family:var(--c-font) !important;
  padding-top:64px;
}
.cli-shell header.cli-header{
  position:fixed !important;
  height:auto !important;
  width:100% !important;
  overflow:visible !important;
  top:0;left:0;right:0;
}
/* legacy/object.css still asks for NanumBarunGothic + NanumSquareR in dozens
   of rules; those webfonts are not served, so pin everything to Noto Sans KR. */
#wrap.cli-shell,
html.cli-shell #wrap,
#wrap.cli-shell *,
html.cli-shell #wrap *{font-family:var(--c-font) !important;}
.cli-shell .cli-main{flex:1 0 auto;}
.cli-shell .cli-content-host{min-width:0;width:100%;}
.cli-shell .contents_wrap,
.cli-shell .contents_wrap.lnb_open,
.cli-shell .contents_wrap.lnb_close{
  float:none !important;
  display:block !important;
  width:auto !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  min-height:0 !important;
}
.cli-shell .contetns{margin:0 !important;}

/* legacy page_title -> editorial header (same as .cli-page-hero) */
.cli-shell .page_title{
  height:auto !important;
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  gap:0 !important;
  overflow:visible;
  margin:0 0 28px !important;
  padding:4px 0 22px !important;
  border:0 !important;border-bottom:1px solid var(--c-line) !important;border-radius:0 !important;
  color:var(--c-ink) !important;
  background:transparent !important;
}
.cli-shell .page_title::before{display:none !important;}
.cli-shell .page_title .location,
.cli-shell .page_title .title,
.cli-shell .page_title .description{
  position:relative !important;z-index:1;
  float:none !important;
  top:auto !important;left:auto !important;right:auto !important;
  background:none !important;
  padding:0 !important;margin:0 !important;
  font-family:var(--c-font) !important;
  color:inherit !important;
}
.cli-shell .page_title .location{
  order:1;
  display:flex !important;gap:6px;flex-wrap:wrap;
  list-style:none !important;
  margin:0 0 14px !important;
  font-size:12px !important;font-weight:400 !important;
  color:var(--c-muted) !important;
}
.cli-shell .page_title .location li{
  float:none !important;background:none !important;padding:0 !important;margin:0 !important;
}
.cli-shell .page_title .location li:not(:last-child)::after{content:"/";margin-left:6px;color:var(--c-line-strong);}
.cli-shell .page_title .location li a,
.cli-shell .page_title .location li.currentpage a{
  color:var(--c-muted) !important;font-weight:400 !important;text-decoration:none !important;
}
.cli-shell .page_title .location li a:hover{color:var(--c-navy) !important;}
.cli-shell .page_title .title{
  order:2;
  display:block !important;
  font-size:clamp(28px,3.2vw,36px) !important;font-weight:800 !important;line-height:1.25 !important;
  letter-spacing:-.05em;
  color:var(--c-ink) !important;
  margin:0 0 8px !important;
}
.cli-shell .page_title .title::after{
  content:"";display:block;width:32px;height:3px;margin-top:14px;
  background:var(--c-navy);border-radius:99px;
}
.cli-shell .page_title .description{
  order:3;
  display:block !important;
  font-size:14px !important;font-weight:400 !important;line-height:1.6 !important;
  color:var(--c-muted) !important;
  margin:0 !important;
}

/* LNB inside shell */
.cli-shell .cli-lnb .title{
  background:transparent !important;
  color:var(--c-muted) !important;
  height:auto !important;
  padding:2px 12px 14px !important;
  margin:0 !important;
  border-bottom:0 !important;
  font-size:11px !important;font-weight:700 !important;line-height:1.4 !important;
  letter-spacing:.12em !important;text-transform:uppercase;
}
.cli-shell .cli-lnb ul li{
  height:auto !important;background:none !important;border:0 !important;
  line-height:normal !important;padding:0 !important;
}
.cli-shell .cli-lnb a{
  color:var(--c-muted) !important;font-weight:600 !important;
}
.cli-shell .cli-lnb a.on,
.cli-shell .cli-lnb a.selected{
  background:var(--c-navy-deep) !important;color:#fff !important;font-weight:600 !important;
  box-shadow:none;
}

/* recruitment steps list should not inherit legacy list bullets */
.cli-shell .cli-process{
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:10px !important;
  list-style:none !important;margin:0 !important;padding:0 !important;
  float:none !important;width:100% !important;
}
.cli-shell .cli-process li{
  float:none !important;width:auto !important;height:auto !important;
  background:#fff !important;list-style:none !important;
}
.cli-shell ol.cli-process{counter-reset:none;}
.cli-header-right{display:flex;align-items:center;gap:16px;margin-left:auto;}

/* notice list runs full width (no LNB) */
.cli-page.cli-notice-full{grid-template-columns:1fr !important;gap:0 !important;}
.cli-page.cli-notice-full .cli-lnb{display:none !important;}
.cli-shell .sec-head{
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
}
.cli-shell .cli-paging-wrap{margin-top:28px;text-align:center;}

/* legacy headings that survive inside .contetns */
.cli-shell .contetns h1,
.cli-shell .contetns h2,
.cli-shell .contetns h3,
.cli-shell .contetns h4,
.cli-shell .contetns h5{font-family:var(--c-font) !important;letter-spacing:-.03em;}

/* legacy status pills: strip the AS-IS green */
.cli-shell .rec_type,
.cli-shell .qna_type{
  display:inline-flex;align-items:center;justify-content:center;
  width:auto;min-width:58px;height:22px;padding:0 8px;
  border-radius:var(--c-r);
  font-family:var(--c-font);font-size:11px;font-weight:700;letter-spacing:-.02em;
}
.cli-shell .rec_type,
.cli-shell .rec_type.type1,
.cli-shell .rec_type.type2{background:var(--c-navy) !important;color:#fff !important;}
.cli-shell .rec_type.type3{background:var(--c-quiet) !important;color:var(--c-muted) !important;}
.cli-shell .qna_type{background:var(--c-quiet) !important;}
.cli-shell .qna_type.type1{background:var(--c-quiet) !important;color:var(--c-muted) !important;font-weight:600;}
.cli-shell .qna_type.type2{background:var(--c-tint) !important;color:var(--c-navy) !important;font-weight:700;}
.cli-shell .secret{
  display:inline-flex;align-items:center;height:20px;margin-left:6px;padding:0 6px;
  border-radius:var(--c-r);background:var(--c-quiet);color:var(--c-muted);
  font-size:11px;font-weight:600;
}