@charset "UTF-8";

/* 기업서비스 소개 + 초기 100기업 모집 이벤트. 정식 메인 셸 위에 본문만 정의한다.
   styles.css 의 body{font-family:Inter!important} 를 이겨야 Pretendard 가 적용된다. */
.compsvc-page,
.compsvc-renewal { font-family:Pretendard,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif!important; }

.compsvc-main { padding:0 0 84px; background:#f7f9fc; }
.compsvc-main .main-content-width { width:min(1180px, calc(100% - 40px)); margin:0 auto; }

.compsvc-breadcrumb { display:flex; align-items:center; gap:6px; padding:18px 0 14px; color:#8a93a4; font-size:13px; }
.compsvc-breadcrumb a { color:#8a93a4; }
.compsvc-breadcrumb a:hover { color:#2163d8; text-decoration:underline; text-underline-offset:3px; }
.compsvc-breadcrumb span[aria-current] { color:#4d596d; font-weight:600; }

/* 히어로 */
.compsvc-hero { position:relative; overflow:hidden; padding:44px 44px 42px; border-radius:18px; background:linear-gradient(135deg,#12307f 0%,#1b45bd 46%,var(--m2-blue) 100%); color:#fff; }
.compsvc-hero::after { content:""; position:absolute; right:-70px; bottom:-90px; width:280px; height:280px; border-radius:50%; background:radial-gradient(circle,rgba(255,216,77,.28),transparent 68%); pointer-events:none; }
.compsvc-hero-kicker { display:inline-flex; align-items:center; gap:5px; height:26px; padding:0 11px; border-radius:13px; background:rgba(255,255,255,.16); color:#fff; font-size:12px; font-weight:700; }
/* styles.css 가 h1 에 어두운 색을 걸어 두어 상속만으로는 흰 글자가 안 나온다 */
.compsvc-hero h1 { position:relative; margin:16px 0 12px; color:#fff; font-size:34px; line-height:1.34; font-weight:700; letter-spacing:-.5px; word-break:keep-all; }
.compsvc-hero h1 em { color:#ffd84d; font-style:normal; }
.compsvc-hero p { position:relative; margin:0; max-width:640px; color:rgba(255,255,255,.86); font-size:15px; line-height:1.72; word-break:keep-all; }
.compsvc-hero-actions { position:relative; display:flex; flex-wrap:wrap; gap:9px; }

.compsvc-button { display:inline-flex; align-items:center; justify-content:center; gap:5px; height:48px; padding:0 24px; border-radius:10px; font-size:15px; font-weight:700; cursor:pointer; }
.compsvc-button.is-primary { background:#fff; color:#1b45bd!important; }
.compsvc-button.is-primary:hover { background:#ffd84d; color:#5b3d00!important; }
.compsvc-button.is-ghost { border:1px solid rgba(255,255,255,.5); color:#fff!important; }
.compsvc-button.is-ghost:hover { border-color:#fff; background:rgba(255,255,255,.12); }
.compsvc-button.is-blue { background:var(--m2-blue); color:#fff!important; }
.compsvc-button.is-blue:hover { background:#1a4ba8; }
.compsvc-button.is-line { border:1px solid #d5dce8; background:#fff; color:#3f4a5c!important; }
.compsvc-button.is-line:hover { border-color:#b9c4d6; color:#1c2535!important; }
/* 카카오톡 문의. 우측 하단 플로팅 버튼과 같은 색을 쓴다. */
.compsvc-button.is-kakao { background:#fee500; color:#3c1e1e!important; }
.compsvc-button.is-kakao:hover { background:#f5dd00; }
.compsvc-button i { font-size:18px; }

/* 공통 섹션 */
.compsvc-section { margin-top:44px; }
.compsvc-section-head { margin-bottom:20px; }
.compsvc-section-head span { display:block; margin-bottom:7px; color:#2163d8; font-size:12px; font-weight:700; }
.compsvc-section-head h2 { margin:0 0 8px; color:#171e2c; font-size:24px; line-height:1.36; font-weight:700; letter-spacing:-.5px; }
.compsvc-section-head p { margin:0; color:#7b8493; font-size:14px; line-height:1.7; word-break:keep-all; }

/* 이벤트 구간 */
.compsvc-event { overflow:hidden; border:2px solid #ffd84d; border-radius:18px; background:#fff; box-shadow:0 12px 30px rgba(33,48,78,.08); scroll-margin-top:24px; }
.compsvc-event-head { position:relative; overflow:hidden; padding:32px 34px 28px; background:linear-gradient(120deg,#fffaf0 0%,#fff5d9 100%); }
.compsvc-event-head::after { content:""; position:absolute; top:-40px; right:-30px; width:190px; height:190px; border-radius:50%; background:radial-gradient(circle,rgba(255,216,77,.5),transparent 66%); pointer-events:none; }
.compsvc-event-badge { position:relative; display:inline-flex; align-items:center; gap:5px; height:27px; padding:0 12px; border-radius:14px; background:#ffd84d; color:#5b3d00; font-size:12px; font-weight:700; }
.compsvc-event-badge i { font-size:15px; }
.compsvc-event-head h2 { position:relative; margin:14px 0 10px; color:#1c2535; font-size:28px; line-height:1.36; font-weight:700; letter-spacing:-.5px; word-break:keep-all; }
.compsvc-event-head p { position:relative; margin:0; color:#7a6636; font-size:14px; line-height:1.72; word-break:keep-all; }
/* 신조. 모집 안내와 톤을 끊어야 해서 왼쪽 선을 대고 한 칸 들여 놓는다. */
.compsvc-event-creed { position:relative; margin:16px 0 0!important; padding:2px 0 2px 15px; border-left:3px solid #ffd84d; color:#6d5c33!important; font-size:14px!important; line-height:1.76!important; }
/* 포유잡이 내건 문장이라 한 줄을 통째로 준다. 본문보다 크고 굵게. */
.compsvc-event-creed strong { display:block; margin:9px 0 5px; color:#12307f; font-size:18px; font-weight:900; letter-spacing:-.02em; line-height:1.5; }

.compsvc-event-body { padding:28px 34px 30px; }
.compsvc-event-list { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; margin:0 0 24px; }
.compsvc-event-list > div { padding:20px 20px 18px; border:1px solid #eef0f4; border-radius:12px; background:#fbfcfe; }
.compsvc-event-list dt { display:flex; align-items:center; gap:7px; margin-bottom:8px; color:#1c2535; font-size:15px; font-weight:700; }
.compsvc-event-list dt i { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:8px; background:#eaf1fd; color:#2163d8; font-size:16px; }
.compsvc-event-list dd { margin:0; color:#5b6679; font-size:13px; line-height:1.68; word-break:keep-all; }
/* 인증기업 우선 노출 */
.compsvc-event-list > div.is-highlight { grid-column:1 / -1; border-color:#2163d8; background:linear-gradient(120deg,#f2f7ff 0%,#eaf1fd 100%); }
.compsvc-event-list > div.is-highlight dt { font-size:17px; }
.compsvc-event-list > div.is-highlight dt i { width:32px; height:32px; background:#2163d8; color:#fff; font-size:18px; }
.compsvc-event-list > div.is-highlight dd { color:#31435f; font-size:14px; line-height:1.75; }

/* 초기 참여 기업 지원 안내 */
.compsvc-event-offer { margin:0 0 16px; padding:22px 24px 20px; border:1px solid #ffd84d; border-radius:12px; background:linear-gradient(120deg,#fffdf5 0%,#fff8e6 100%); }
.compsvc-event-offer strong { display:flex; align-items:center; gap:7px; margin-bottom:11px; color:#1c2535; font-size:16px; font-weight:700; }
.compsvc-event-offer strong i { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:9px; background:#ffd84d; color:#5b3d00; font-size:17px; }
.compsvc-event-offer p { margin:0 0 9px; color:#4f5b6f; font-size:14px; line-height:1.78; word-break:keep-all; }
.compsvc-event-offer p:last-of-type { margin-bottom:12px; }
.compsvc-event-offer small { display:block; padding-top:11px; border-top:1px solid rgba(255,216,77,.7); color:#9a8a5e; font-size:12px; line-height:1.68; word-break:keep-all; }

.compsvc-event-note { display:flex; gap:9px; padding:15px 18px; border-radius:10px; background:#f5f7fa; color:#7b8493; font-size:13px; line-height:1.7; }
.compsvc-event-note i { flex:none; color:#98a0ae; font-size:16px; }
.compsvc-event-note ul { margin:0; padding-left:16px; }
.compsvc-event-note li { margin:2px 0; }
/* 모집 종료 조건. 안내 목록과 톤을 끊어야 해서 빨강으로 둔다 */
.compsvc-event-end { margin:10px 0 0; padding-top:10px; border-top:1px solid #f0d4d4; color:#d92d20; font-size:13px; font-weight:700; }

.compsvc-event-foot { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:22px; }
.compsvc-event-foot .compsvc-button { height:50px; }

/* 기능 카드 */
.compsvc-feature-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; }
.compsvc-feature { padding:24px 22px 22px; border:1px solid #e6eaf1; border-radius:14px; background:#fff; }
.compsvc-feature-icon { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; margin-bottom:14px; border-radius:12px; background:#eaf1fd; color:#2163d8; font-size:21px; }
.compsvc-feature h3 { margin:0 0 8px; color:#1c2535; font-size:16px; line-height:1.42; font-weight:700; }
.compsvc-feature p { margin:0; color:#6b7688; font-size:14px; line-height:1.72; word-break:keep-all; }

/* 이용 절차 */
.compsvc-steps { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:14px; counter-reset:compsvc-step; }
.compsvc-step { position:relative; padding:24px 20px 22px; border:1px solid #e6eaf1; border-radius:14px; background:#fff; }
/* 첫 단계인 카카오톡 문의만 카카오 색으로 구분한다. */
.compsvc-step.is-kakao { border-color:#f5dd00; background:#fffdf0; }
.compsvc-step.is-kakao::before { background:#fee500; color:#3c1e1e; }
.compsvc-step-link { display:inline-flex; align-items:center; gap:3px; margin-top:11px; color:#8a6d00; font-size:13px; font-weight:700; }
.compsvc-step-link:hover { color:#5b3d00; text-decoration:underline; text-underline-offset:3px; }
.compsvc-step-link i { font-size:15px; }
.compsvc-step::before { counter-increment:compsvc-step; content:counter(compsvc-step); display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; margin-bottom:13px; border-radius:50%; background:var(--m2-blue); color:#fff; font-size:13px; font-weight:700; }
.compsvc-step h3 { margin:0 0 7px; color:#1c2535; font-size:15px; line-height:1.42; font-weight:700; }
.compsvc-step p { margin:0; color:#6b7688; font-size:13px; line-height:1.7; word-break:keep-all; }

/* 문답 */
.compsvc-faq { border:1px solid #e6eaf1; border-radius:14px; background:#fff; }
.compsvc-faq details { border-top:1px solid #eef0f4; }
.compsvc-faq details:first-child { border-top:0; }
.compsvc-faq summary { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:19px 24px; color:#1c2535; font-size:15px; font-weight:700; cursor:pointer; list-style:none; }
.compsvc-faq summary::-webkit-details-marker { display:none; }
.compsvc-faq summary::after { content:"\ea5f"; flex:none; font-family:tabler-icons; color:#98a0ae; font-size:18px; font-weight:400; transition:transform .18s ease; }
.compsvc-faq details[open] summary::after { transform:rotate(180deg); }
.compsvc-faq details[open] summary { color:#2163d8; }
.compsvc-faq p { margin:0; padding:0 24px 21px; color:#5b6679; font-size:14px; line-height:1.78; word-break:keep-all; }

/* 하단 안내 */
.compsvc-cta { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px; margin-top:44px; padding:32px 34px; border:1px solid #e3e7ee; border-radius:16px; background:#fff; }
.compsvc-cta strong { display:block; margin-bottom:7px; color:#171e2c; font-size:20px; line-height:1.4; font-weight:700; letter-spacing:-.5px; }
.compsvc-cta p { margin:0; color:#7b8493; font-size:14px; line-height:1.7; }
.compsvc-cta-actions { display:flex; flex-wrap:wrap; gap:9px; }

@media (max-width:1024px) {
    .compsvc-event-list { grid-template-columns:repeat(2, minmax(0,1fr)); }
    .compsvc-feature-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
    .compsvc-steps { grid-template-columns:repeat(3, minmax(0,1fr)); }
}

@media (max-width:768px) {
    .compsvc-main { padding-bottom:60px; }
    .compsvc-main .main-content-width { width:calc(100% - 32px); }
    .compsvc-hero { padding:32px 22px 30px; border-radius:14px; }
    .compsvc-hero h1 { font-size:25px; }
    .compsvc-hero p { font-size:14px; }
    .compsvc-button { width:100%; }
    .compsvc-section { margin-top:34px; }
    .compsvc-section-head h2 { font-size:20px; }
    .compsvc-event-head { padding:26px 20px 22px; }
    .compsvc-event-head h2 { font-size:22px; }
    .compsvc-event-body { padding:22px 20px 24px; }
    .compsvc-event-list { grid-template-columns:minmax(0,1fr); }
    .compsvc-feature-grid { grid-template-columns:minmax(0,1fr); }
    .compsvc-steps { grid-template-columns:minmax(0,1fr); }
    .compsvc-faq summary { padding:17px 18px; font-size:14px; }
    .compsvc-faq p { padding:0 18px 19px; font-size:14px; }
    .compsvc-cta { padding:26px 20px; }
    .compsvc-cta-actions { width:100%; }
}

/* 가입만 하면 적용되는 항목. 이벤트 카드 밖이라 배경 없이 섹션 폭을 그대로 쓴다. */
.compsvc-base-list { margin-bottom:20px; }
.compsvc-base-list > div { background:#fff; }
/* 가입에 문턱이 없다는 점이 핵심이라 한 줄로 세워 강조한다. */
.compsvc-base-foot { display:flex; align-items:center; gap:8px; margin:0; padding:15px 18px; border:1px solid #dfe6f2; border-radius:10px; background:#fff; color:#4d596d; font-size:15px; font-weight:600; }
.compsvc-base-foot i { flex:none; color:var(--m2-blue); font-size:19px; }


/* 제목 안에서 한 단어만 키워 강조한다. em 의 기울임 대신 테마 색을 쓴다. */
.compsvc-accent { color:var(--m2-blue); font-size:1.18em; font-weight:800; font-style:normal; letter-spacing:-.02em; }
.compsvc-base-foot .compsvc-accent { font-size:1.1em; }

/* 이벤트 제목의 핵심 문구. 형광펜을 깐 것처럼 노란 띠를 글자 아래에 겹친다. */
.compsvc-event-accent { position:relative; z-index:0; color:#12307f; font-size:1.16em; font-weight:900; letter-spacing:-.03em; }
.compsvc-event-accent::after { content:""; position:absolute; left:-3px; right:-3px; bottom:1px; height:11px; border-radius:5px; background:rgba(255,216,77,.75); z-index:-1; }

/* 안내 목록에서 앞 항목과 성격이 다른 줄은 한 줄 띄워 구분한다. */
.compsvc-event-note li.is-spaced { margin-top:12px; }