/* CORPLAB 하위 페이지 공통 스타일 — corplab-home.html 과 같은 색·글꼴 */
:root{
  --bg:#FBFCFE; --surface:#FFFFFF; --sunk:#F1F4F9; --line:#DDE4EE; --hair:#EDF1F7;
  --ink:#0D1928; --ink2:#3C4A60; --ink3:#76839A;
  --navy:#0F2340; --blue:#1B4F86; --bronze:#8C6B3F; --gold:#B79463; --gold2:#E7CE97;
  --good:#1F6B4A; --goodbg:#E9F3EE; --bad:#A63028; --badbg:#FBEEEC; --warn:#8A6A12; --warnbg:#FBF4E2;
  --sans:"Noto Sans KR",-apple-system,"Malgun Gothic",sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;letter-spacing:-.025em;text-wrap:balance}
p{margin:0}
.wrap{max-width:1100px;margin:0 auto;padding:0 24px}

/* 상단바 */
.nav{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--hair)}
.nav .wrap{display:flex;align-items:center;gap:24px;height:66px}
.mark{display:flex;align-items:center;gap:9px}
.mark svg{width:30px;height:30px;flex:none}
.mark .wm{font-weight:900;font-size:20px;letter-spacing:-.045em;line-height:1}
.mark .wm i{font-style:normal;color:var(--bronze)}
.mark .sub{font-size:9.5px;font-weight:600;letter-spacing:.16em;color:var(--ink3);display:block;margin-top:3px}
.nav ul{display:flex;gap:22px;list-style:none;margin:0 auto 0 16px;padding:0;font-size:14.5px;color:var(--ink2);font-weight:500}
.nav li a{display:inline-block;transition:transform .18s ease,color .18s ease}
.nav li a:hover{color:var(--ink);transform:scale(1.14)}
.nav li a.on{color:var(--ink);font-weight:800;box-shadow:inset 0 -2px 0 var(--bronze)}
@media(max-width:860px){.nav ul{display:none}}
.btn{display:inline-block;border-radius:8px;padding:9px 17px;font-size:14px;font-weight:700;border:1px solid transparent;cursor:pointer;white-space:nowrap;font-family:inherit}
.btn-fill{background:var(--blue);color:#fff} .btn-fill:hover{background:var(--navy)}
.btn-line{border-color:var(--line);color:var(--ink2);background:var(--surface)}
.btn-gold{background:var(--bronze);color:#fff}
.btn-lg{padding:15px 30px;font-size:16px;border-radius:10px}
.btn-block{display:block;width:100%;text-align:center}

/* 페이지 머리 */
.phero{background:linear-gradient(148deg,#08111F 0%,#0F2340 46%,#1B4F86 100%);color:#fff;padding:64px 0 58px}
.phero .kick{font-size:11.5px;letter-spacing:.24em;color:#9EB8D6;font-weight:700}
.phero h1{font-size:40px;font-weight:900;line-height:1.28;margin:16px 0 14px}
.phero h1 em{font-style:normal;color:var(--gold2)}
.phero p{font-size:17px;color:#C7D7E9;font-weight:300;max-width:62ch}
.crumb{font-size:12.5px;color:#9EB8D6;margin-bottom:10px}
.crumb a:hover{color:#fff}

.sec{padding:72px 0}
.sec.alt{background:var(--sunk);border-block:1px solid var(--hair)}
.sec.tight{padding:48px 0}
.eyebrow{font-size:11.5px;font-weight:800;letter-spacing:.2em;color:var(--bronze);margin-bottom:12px}
.h2{font-size:29px;font-weight:900;line-height:1.35}
.h2 em{font-style:normal;color:var(--bronze)}
.lead{font-size:16.5px;color:var(--ink2);margin-top:12px;max-width:66ch}

.grid{display:grid;gap:18px;margin-top:32px}
.c2{grid-template-columns:repeat(auto-fit,minmax(360px,1fr))}
.c3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.c4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.card{border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:26px}
.card h3{font-size:18px;font-weight:800;margin-bottom:8px}
.card p{font-size:14.5px;color:var(--ink2)}
.card .idx{font-size:11.5px;font-weight:800;color:var(--bronze);letter-spacing:.14em;margin-bottom:10px}
.card ul{margin:10px 0 0;padding-left:18px;font-size:14.5px;color:var(--ink2)}
.card li{margin:6px 0}
.card.dark{background:linear-gradient(140deg,#0F2340,#1B4F86);color:#fff;border:0}
.card.dark p,.card.dark li{color:#C7D7E9}
.card.dark .idx{color:var(--gold2)}
.card.tint{background:var(--sunk);border-color:var(--hair)}
.card a.more{display:inline-block;margin-top:14px;font-size:14px;font-weight:800;color:var(--blue)}
.card a.more::after{content:" →"}
.ic{width:40px;height:40px;margin-bottom:14px}
.tag{display:inline-block;font-size:11.5px;font-weight:800;padding:2px 9px;border-radius:99px;vertical-align:2px;margin-left:6px}
.tag.soon{background:var(--sunk);color:var(--ink3);border:1px solid var(--line)}
.tag.gold{background:#F6EEDD;color:var(--bronze)}
.tag.lock{background:var(--navy);color:var(--gold2)}
.tag.free{background:var(--goodbg);color:var(--good)}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-top:30px}
.stat{border-radius:14px;padding:22px;background:var(--surface);border:1px solid var(--line)}
.stat .n{font-size:30px;font-weight:900;letter-spacing:-.03em;color:var(--navy);line-height:1.15}
.stat .n small{font-size:15px;font-weight:700}
.stat .l{font-size:13.5px;color:var(--ink2);margin-top:6px}
.stat.gold{background:var(--navy);border:0} .stat.gold .n{color:var(--gold2)} .stat.gold .l{color:#C7D7E9}

/* 표 */
.tbl{width:100%;border-collapse:collapse;font-size:14.5px;margin-top:28px;background:var(--surface);border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.tbl th,.tbl td{padding:14px 16px;border-bottom:1px solid var(--hair);text-align:center}
.tbl th:first-child,.tbl td:first-child{text-align:left}
.tbl thead th{background:var(--navy);color:#fff;font-weight:800}
.tbl thead th.best{background:var(--bronze)}
.tbl td.y{color:var(--good);font-weight:800} .tbl td.n{color:var(--ink3)}

/* 폼 */
.form{display:grid;gap:14px}
.form label{display:block;font-size:13px;font-weight:700;color:var(--ink2);margin-bottom:6px}
.form input[type=text],.form input[type=email],.form input[type=password],.form input[type=tel],.form select,.form textarea{
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;font-size:15px;font-family:inherit;background:var(--surface);color:var(--ink)}
.form textarea{min-height:140px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--blue);outline-offset:1px}
.form .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form .hint{font-size:12.5px;color:var(--ink3);margin-top:5px}
.form .chk{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;color:var(--ink2);font-weight:500;margin:0}
.form .chk a{color:var(--blue);font-weight:700}
.agree{background:var(--sunk);border:1px solid var(--hair);border-radius:12px;padding:14px 16px;display:grid;gap:8px}
.agree .all{font-weight:800;color:var(--ink);border-bottom:1px solid var(--hair);padding-bottom:10px}
.notice{background:var(--warnbg);border:1px solid #E7D9A8;color:var(--warn);border-radius:10px;padding:12px 15px;font-size:13.5px;line-height:1.6}
.divider{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--ink3)}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
.oauth{display:grid;gap:10px}
.oauth button{padding:12px;border-radius:10px;border:1px solid var(--line);background:var(--surface);font-size:14.5px;font-weight:700;color:var(--ink2);cursor:pointer;font-family:inherit}
.oauth .kakao{background:#FEE500;border-color:#FEE500;color:#191600}
.oauth .naver{background:#03C75A;border-color:#03C75A;color:#fff}

/* 인증 화면: 페이지 안의 두 칸 */
.auth{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--surface);margin:48px 0 72px}
@media(max-width:860px){.auth{grid-template-columns:1fr}.auth .side{display:none}}
.auth .side{background:linear-gradient(150deg,#08111F,#0F2340 50%,#1B4F86);color:#fff;padding:44px}
.auth .side h2{font-size:26px;font-weight:900;line-height:1.35}
.auth .side h2 em{font-style:normal;color:var(--gold2)}
.auth .side ul{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:14px}
.auth .side li{display:flex;gap:12px;font-size:15px;color:#C7D7E9}
.auth .side li b{color:#fff;display:block;font-size:15.5px}
.auth .side .dot{flex:none;width:26px;height:26px;border-radius:50%;background:rgba(231,206,151,.15);color:var(--gold2);display:grid;place-items:center;font-weight:900;font-size:13px}
.auth .main{padding:44px}
.auth .main h1{font-size:26px;font-weight:900}
.auth .main .sub{font-size:14.5px;color:var(--ink3);margin:6px 0 24px}
.auth .foot{font-size:14px;color:var(--ink3);text-align:center;margin-top:18px}
.auth .foot a{color:var(--blue);font-weight:800}
.tabs{display:inline-flex;background:var(--sunk);border-radius:99px;padding:4px;margin-bottom:22px}
.tabs a{padding:8px 18px;border-radius:99px;font-size:14px;font-weight:800;color:var(--ink3)}
.tabs a.on{background:var(--surface);color:var(--ink);box-shadow:0 2px 8px rgba(15,35,64,.08)}

/* 문서(약관) */
.doc{max-width:860px;margin:0 auto}
.doc h2{font-size:18px;font-weight:800;margin:30px 0 8px;color:var(--navy)}
.doc p,.doc li{font-size:15px;color:var(--ink2)}
.doc ol,.doc ul{padding-left:20px}
.blank{background:#FFF3C4;padding:0 4px;border-radius:3px;color:var(--warn);font-weight:700}

/* 타임라인 */
.tl{list-style:none;margin:30px 0 0;padding:0;position:relative}
.tl::before{content:"";position:absolute;left:92px;top:6px;bottom:6px;width:2px;background:var(--line)}
.tl li{display:grid;grid-template-columns:80px 24px 1fr;gap:12px;padding:12px 0;align-items:start}
.tl .y{font-weight:900;color:var(--navy);text-align:right;font-size:15px}
.tl .d{width:14px;height:14px;border-radius:50%;background:var(--bronze);margin:5px 0 0 5px;box-shadow:0 0 0 4px var(--bg)}
.tl b{font-size:16px}
.tl p{font-size:14.5px;color:var(--ink2)}

/* 인용 */
.quote{font-size:26px;font-weight:900;line-height:1.5;letter-spacing:-.02em;color:var(--ink)}
.quote em{font-style:normal;color:var(--bronze)}

/* 푸터 */
footer{background:var(--navy);color:#93A9C4;padding:52px 0 40px;font-size:13.5px}
footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
@media(max-width:760px){footer .cols{grid-template-columns:1fr}}
footer h5{font-size:12px;font-weight:800;letter-spacing:.14em;color:#fff;margin:0 0 12px}
footer ul{list-style:none;margin:0;padding:0} footer li{margin:6px 0}
footer a:hover{color:#fff}
footer .mark .wm{color:#fff} footer .mark .sub{color:#7C90AB}
footer .biz{margin-top:30px;padding-top:22px;border-top:1px solid #22334C;font-size:12.5px;line-height:1.9}

/* ══════ 로고 움직임 (2026-09-23 상무님 지시: 회사 로고처럼) — 7초마다 반복
   돋보기가 세 번 깜빡 → 렌즈를 축으로 한 바퀴 → 커지며 빛나고 → 막대그래프가 차례로 솟고 → "LAB" 이 살짝 커진다.
   효과만 같은 결로 만들었다. 회사 홈페이지와 코드·링크는 연결하지 않는다. ══════ */
.mark svg{overflow:visible;animation:clGlow 7s ease-in-out infinite}
.mark svg circle,.mark svg line{transform-box:view-box;transform-origin:30px 11px;animation:clLens 7s ease-in-out infinite}
.mark svg rect:nth-of-type(n+2){transform-box:fill-box;transform-origin:50% 100%;animation:clBar 7s ease-in-out infinite}
.mark svg rect:nth-of-type(3){animation-delay:.12s}
.mark svg rect:nth-of-type(4){animation-delay:.24s}
.mark .wm i{display:inline-block;transform-origin:0 65%;animation:clWord 7s ease-in-out infinite}
@keyframes clLens{
  0%,12%{opacity:1;transform:rotate(0deg) scale(1)}
  2%{opacity:.2}4%{opacity:1}6%{opacity:.2}8%{opacity:1}10%{opacity:.2}
  42%{transform:rotate(360deg) scale(1)}
  46%{transform:rotate(360deg) scale(1.35)}
  56%,100%{opacity:1;transform:rotate(360deg) scale(1)}
}
@keyframes clGlow{
  0%,41%{filter:none}
  44%{filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 10px #E7CE97)}
  62%,100%{filter:none}
}
@keyframes clBar{
  0%,44%{transform:scaleY(1)}
  47%{transform:scaleY(.35)}
  52%{transform:scaleY(1.18)}
  57%,100%{transform:scaleY(1)}
}
@keyframes clWord{
  0%,50%{transform:scale(1);text-shadow:none}
  55%{transform:scale(1.22);text-shadow:0 0 10px rgba(231,206,151,.8)}
  64%,100%{transform:scale(1);text-shadow:none}
}
@media (prefers-reduced-motion:reduce){.mark svg,.mark svg circle,.mark svg line,.mark svg rect,.mark .wm i{animation:none}}

/* 맨 위 머리띠 = 컨설팅을더하다(공식 홈페이지 이름, 글자만·링크 없음) / 로고 옆 한글 이름 = 기업을더하다 */
.nav .head{background:var(--navy);color:var(--gold2,#E7CE97);height:28px;display:flex;align-items:center;font-size:11.5px;font-weight:800;letter-spacing:.1em}
.nav .head .hw{width:100%;max-width:1100px;margin:0 auto;padding:0 24px}
.nav .head .hw .of{font-weight:600;color:#9FB2CC;letter-spacing:.06em;margin-left:7px}
.mark .wm{display:flex;align-items:baseline}
.mark .wm .ko{font-style:normal;font-size:13px;font-weight:800;letter-spacing:-.03em;color:var(--blue);margin-left:9px;padding-left:9px;border-left:1.5px solid var(--gold)}
footer .mark .wm .ko{color:var(--gold2,#E7CE97)}
@media(max-width:480px){.mark .wm .ko{display:none}}
/* 상단 메뉴: 한 줄을 지키고(글자가 꺾이지 않게), 좁아지면 간격·글자를 줄인다 (2026-10-06 상무님: 메뉴가 두 줄로 깨져 보임) */
.nav .wrap{max-width:1280px;gap:clamp(12px,1.6vw,24px)}
.nav ul{flex:1 1 auto;min-width:0;flex-wrap:nowrap;gap:clamp(12px,1.5vw,22px);margin-left:clamp(4px,1vw,16px)}
.nav li{flex:none}
.nav li a{white-space:nowrap}
.nav .mark{flex:none}
.nav .mark .wm,.nav .mark .wm .ko,.nav .mark .sub{white-space:nowrap}
.nav [id=authArea],.nav .wrap>span:last-child{display:flex;align-items:center;gap:8px;flex:none;white-space:nowrap}
.nav [id=authArea] .btn,.nav .wrap>span:last-child .btn{padding:8px 14px;font-size:13.5px}
.nav [id=authArea] .btn-line,.nav .wrap>span:last-child .btn-line{max-width:240px;overflow:hidden;text-overflow:ellipsis}
@media(max-width:1180px){.nav .mark .wm .ko{display:none}.nav ul{font-size:13.5px}}
@media(max-width:1040px){.nav .btn small{display:none}.nav [id=authArea] .btn,.nav .wrap>span:last-child .btn{padding:7px 11px;font-size:12.5px}.nav .mark .sub{display:none}.nav [id=authArea]>span,.nav .wrap>span:last-child .tag{display:none!important}.nav [id=authArea] .btn-line,.nav .wrap>span:last-child .btn-line{max-width:190px}}