/* ===== ebenesel 채용 · 세로형 롱폼 (모바일 가독 흐름) ===== */
:root{
  --blue:#0031FF;
  --blue-2:#3A63FF;
  --blue-deep:#0024C2;
  --w:958px;
  --ink:#0B0B12;
  --gray-bg:#F3F4F7;
  --muted:#5E636C;
  --muted-soft:#8A8F98;
  --line:#E4E6EB;
  --w:958px;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; overflow-x:hidden; }
body{
  max-width:var(--w);
  width:100%;
  margin:0 auto;
  background:#fff;
  color:var(--ink);
  font-family:"Pretendard Variable",Pretendard,system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  word-break:keep-all;
  line-height:1.5;
}
img{ display:block; max-width:100%; }
image-slot{ display:block; }

/* ---- section shells ---- */
.ch{ width:100%; position:relative; overflow:hidden; padding:128px 0; }
.ch--tight{ padding:104px 0; }
.col{ max-width:700px; width:calc(100% - 48px); margin:0 auto; padding:0 24px; text-align:center; }
.col--wide{ max-width:820px; width:calc(100% - 48px); }

.ch--gray{ background:var(--gray-bg); }
.ch--blue{ background:linear-gradient(160deg,var(--blue) 0%,var(--blue-deep) 100%); color:#fff; }
.ch--ink{ background:var(--ink); color:#fff; }

/* ---- type scale (big, mobile-readable) ---- */
.kicker{
  font-size:28px; font-weight:800; letter-spacing:-.01em;
  color:var(--blue); margin:0 0 26px;
}
.ch--blue .kicker{ color:#BFCBFF; }
.ch--ink .kicker{ color:#8E98FF; }

.title{ margin:0; font-weight:800; font-size:52px; line-height:1.28; letter-spacing:-.03em; }
.title-xl{ font-size:64px; line-height:1.2; }
.lead{ margin:32px 0 0; font-size:25px; line-height:1.85; font-weight:500; color:var(--muted); }
.ch--blue .lead{ color:rgba(255,255,255,.86); }
.ch--ink .lead{ color:rgba(255,255,255,.82); }
.lead strong{ font-weight:800; color:var(--ink); }
.ch--blue .lead strong, .ch--ink .lead strong{ color:#fff; }
.emph{ margin:30px 0 0; font-size:30px; line-height:1.5; font-weight:800; letter-spacing:-.02em; color:var(--blue); }
.ch--blue .emph{ color:#fff; }
.accent{ color:var(--blue); }
.ch--blue .accent{ color:#fff; }

/* ---- button ---- */
.btn{
  display:inline-flex; align-items:center; gap:12px;
  font-size:21px; font-weight:800; text-decoration:none;
  padding:21px 42px; border-radius:999px; margin-top:48px;
  transition:transform .15s;
}
.btn svg{ width:20px; height:20px; }
.btn-primary{ background:var(--blue); color:#fff; }
.btn-white{ background:#fff; color:var(--blue); }

/* ================= CH01 HERO ================= */
.hero{ padding:120px 0 128px; background:linear-gradient(165deg,#1f49ff 0%,var(--blue) 45%,var(--blue-deep) 100%); color:#fff; }
.hero .blob{ position:absolute; border-radius:50%; filter:blur(2px); opacity:.5; pointer-events:none; }
.hero .b1{ width:320px; height:320px; right:-70px; top:-80px; background:radial-gradient(circle at 30% 30%,#5b7bff,transparent 70%); opacity:.7; }
.hero .b2{ width:240px; height:240px; left:-60px; top:160px; background:radial-gradient(circle at 40% 40%,#6f8cff,transparent 70%); }
.hero .b3{ width:200px; height:200px; right:90px; bottom:40px; background:radial-gradient(circle at 50% 50%,#1330b0,transparent 72%); opacity:.55; }
.hero-watermark{
  position:absolute; right:-30px; bottom:-90px; font-size:380px; font-weight:800;
  color:rgba(255,255,255,.06); line-height:1; pointer-events:none; font-style:italic;
}
.hero .col{ position:relative; z-index:2; }
.hero-logo{ height:48px; margin:0 auto 58px; }
.hero-year{ font-size:22px; font-weight:800; letter-spacing:.02em; color:#BFCBFF; margin:0 0 20px; }
.hero-title{ margin:0; font-weight:800; font-size:62px; line-height:1.24; letter-spacing:-.035em; color:#fff; }
.hero-quote{ margin:40px 0 0; font-size:27px; font-weight:700; color:#DCE3FF; letter-spacing:-.01em; }
.hero-desc{ margin:18px 0 0; font-size:24px; line-height:1.75; font-weight:500; color:rgba(255,255,255,.84); }
.hero-badge{
  display:inline-flex; align-items:center; gap:10px; margin-top:48px;
  background:#fff; color:var(--blue); font-size:19px; font-weight:800;
  padding:14px 26px; border-radius:999px;
  text-decoration:none; cursor:pointer; transition:transform .15s, box-shadow .15s;
}
.hero-badge:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.2); }
.hero-badge .dot{ width:10px; height:10px; border-radius:50%; background:var(--blue); animation:pulse 1.6s infinite; }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.3} }

/* ================= CH03 numbers ================= */
.nums{ margin-top:72px; display:flex; flex-direction:column; gap:0; }
.num{ padding:46px 0; border-top:1px solid rgba(255,255,255,.22); }
.num:last-child{ border-bottom:1px solid rgba(255,255,255,.22); }
.num-fig{ font-size:104px; font-weight:800; line-height:.92; letter-spacing:-.04em; color:#fff; }
.num-fig small{ font-size:40px; font-weight:800; margin-left:6px; }
.num-desc{ margin:16px 0 0; font-size:24px; font-weight:600; color:rgba(255,255,255,.9); }
.num-extra{ margin:6px 0 0; font-size:19px; font-weight:500; color:rgba(255,255,255,.62); }

/* ================= CH05 roles ================= */
.roles{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin:48px 0 8px; }
.role{ font-size:23px; font-weight:800; padding:16px 30px; border-radius:14px; background:#EBEFFF; color:var(--blue); }

/* ================= CH06 values ================= */
.values{ margin-top:64px; display:flex; flex-direction:column; gap:0; }
.value{ padding:52px 0; border-top:1px solid var(--line); }
.value:last-child{ border-bottom:1px solid var(--line); }
.value-word{ font-size:46px; font-weight:800; letter-spacing:-.03em; color:var(--blue); }
.value-en{ display:block; font-size:17px; font-weight:800; letter-spacing:.14em; color:var(--muted-soft); margin-bottom:10px; }
.value-desc{ margin:20px 0 0; font-size:23px; line-height:1.7; font-weight:500; color:var(--muted); }
.value-desc b{ display:block; margin-top:14px; color:var(--ink); font-weight:800; }

/* ================= CH07 AI screens ================= */
.ai-screens{ display:flex; flex-direction:column; gap:18px; margin:56px 0; }
.ai-cap{ margin:18px 0 0; font-size:21px; font-weight:700; color:#fff; }

/* ================= CH10 benefits ================= */
.bens{ margin-top:64px; display:flex; flex-direction:column; gap:0; text-align:left; }
.ben{ padding:46px 0; border-top:1px solid var(--line); }
.ben:last-child{ border-bottom:1px solid var(--line); }
.ben-k{ font-size:20px; font-weight:800; color:var(--blue); }
.ben-t{ font-size:34px; font-weight:800; letter-spacing:-.02em; margin:12px 0 18px; }
.ben-d{ margin:0; font-size:23px; line-height:1.75; font-weight:500; color:var(--muted); }
.ben-foot{ margin:40px 0 0; font-size:20px; font-weight:500; color:var(--muted-soft); }

/* ================= CH11 space ================= */
.space-stack{ display:flex; flex-direction:column; gap:16px; margin-top:56px; }
.space-row{ display:grid; gap:16px; }
.space-row.r2{ grid-template-columns:1fr 1fr; }
.space-cell{ position:relative; }
.space-cap{ position:absolute; left:18px; bottom:16px; background:rgba(11,11,18,.78); color:#fff; font-size:19px; font-weight:700; padding:9px 20px; border-radius:999px; }

/* ================= part divider ================= */
.part-div{ padding:80px 0; background:var(--ink); color:#fff; text-align:center; }
.part-div .pk{ font-size:19px; font-weight:800; letter-spacing:.14em; color:#8E98FF; }
.part-div .pt{ font-size:44px; font-weight:800; letter-spacing:-.03em; margin-top:16px; }

/* ================= job intro CH13 ================= */
.job-dept{ font-size:24px; font-weight:800; color:#BFCBFF; margin:0 0 14px; }
.job-name{ font-size:84px; font-weight:800; letter-spacing:-.04em; line-height:1; margin:0; color:#fff; }

/* ================= lists CH15/16 ================= */
.flow{ margin-top:56px; display:flex; flex-direction:column; gap:0; text-align:left; }
.flow-item{ display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:start; padding:32px 0; border-top:1px solid var(--line); }
.flow-item:last-child{ border-bottom:1px solid var(--line); }
.flow-n{ font-size:26px; font-weight:800; color:var(--blue); line-height:1.35; }
.flow-ck{ width:38px; height:38px; border-radius:50%; background:var(--blue); display:grid; place-content:center; }
.flow-ck svg{ width:20px; height:20px; }
.flow-tx{ font-size:25px; line-height:1.5; font-weight:600; }

/* ================= prefer chips CH17 ================= */
.prefers{ display:flex; flex-direction:column; gap:16px; margin-top:52px; }
.prefer{ font-size:24px; font-weight:700; padding:26px 30px; border-radius:18px; background:#EEF1FF; color:var(--blue); line-height:1.5; }

/* ================= conditions CH18 ================= */
.conds{ margin-top:56px; display:flex; flex-direction:column; gap:0; text-align:left; }
.cond{ display:grid; grid-template-columns:200px 1fr; gap:24px; align-items:baseline; padding:30px 0; border-top:1px solid var(--line); }
.cond:last-child{ border-bottom:1px solid var(--line); }
.cond-k{ font-size:22px; font-weight:800; color:var(--muted); }
.cond-v{ font-size:25px; font-weight:600; }

/* ================= steps CH19 ================= */
.steps{ display:flex; flex-direction:column; gap:14px; margin-top:56px; }
.step{ display:flex; align-items:center; gap:22px; background:#fff; border:1px solid var(--line); border-radius:18px; padding:28px 34px; text-align:left; }
.step-n{ font-size:18px; font-weight:800; color:var(--blue); letter-spacing:.06em; flex:0 0 auto; width:96px; }
.step-t{ font-size:28px; font-weight:800; letter-spacing:-.02em; white-space:nowrap; }

/* ================= CTA CH20 ================= */
.cta-docs{ display:flex; flex-direction:column; gap:22px; margin:48px 0 8px; }
.cta-doc{ font-size:22px; font-weight:600; color:rgba(255,255,255,.92); }
.cta-doc b{ font-weight:800; color:#fff; }

/* ================= footer ================= */
.foot{ padding:56px 0 64px; text-align:center; background:#fff; }
.foot img{ height:24px; margin:0 auto 16px; }
.foot p{ font-size:17px; color:var(--muted-soft); margin:0; }

@media (prefers-reduced-motion: reduce){ .hero-badge .dot{ animation:none; } }

/* ================= CH03 growth graph ================= */
.growth{ position:relative; margin:54px 0 4px; }
.growth-svg{ width:100%; height:auto; display:block; overflow:visible; }
.growth-line{ stroke:#fff; }
.growth-area{ fill:url(#garea); }
.growth-dot{ fill:#fff; }
.growth-ring{ stroke:rgba(255,255,255,.45); }
.growth-grid line{ stroke:rgba(255,255,255,.13); }
.growth-tag{ position:absolute; right:4px; top:-8px; background:#fff; color:var(--blue);
  font-size:18px; font-weight:800; padding:9px 18px; border-radius:999px; box-shadow:0 10px 26px rgba(0,0,0,.20); }
.growth-axis{ display:flex; justify-content:space-between; margin-top:18px; font-size:17px; font-weight:600; color:rgba(255,255,255,.72); }

/* ================= CH04 product card ================= */
.vision-product{ width:296px; margin:0 auto 18px; background:#fff; border-radius:26px;
  padding:30px 30px 20px; box-shadow:0 34px 70px rgba(11,11,18,.14); }
.vision-product img{ width:auto; height:300px; margin:0 auto; }

/* ============================================================
   TWEAK OVERRIDES — mood / headline / density
   ============================================================ */

/* ---- DENSITY (읽는 호흡) ---- */
body[data-density="airy"] .ch{ padding:170px 0; }
body[data-density="airy"] .hero{ padding:150px 0 170px; }
body[data-density="airy"] .lead{ font-size:26px; line-height:2; }
body[data-density="airy"] .col{ width:660px; }
body[data-density="compact"] .ch{ padding:84px 0; }
body[data-density="compact"] .hero{ padding:80px 0 88px; }
body[data-density="compact"] .lead{ margin-top:24px; }

/* ---- HEADLINE (제목 성격) ---- */
body[data-head="bold"] .title,
body[data-head="bold"] .hero-title,
body[data-head="bold"] .job-name{ font-weight:900; letter-spacing:-.05em; }
body[data-head="bold"] .title-xl{ font-size:70px; }
body[data-head="bold"] .hero-title{ font-size:66px; }
body[data-head="editorial"] .title,
body[data-head="editorial"] .hero-title,
body[data-head="editorial"] .job-name,
body[data-head="editorial"] .value-word{ font-family:"Nanum Myeongjo",serif; font-weight:800; letter-spacing:-.005em; }
body[data-head="editorial"] .hero-quote{ font-style:italic; }

/* ---- MOOD: 미니멀 (heavy blue blocks → light tint, hero stays) ---- */
body[data-mood="minimal"] .ch--blue:not(.hero){ background:#EDF0FF; color:var(--ink); }
body[data-mood="minimal"] .ch--blue:not(.hero) .kicker{ color:var(--blue); }
body[data-mood="minimal"] .ch--blue:not(.hero) .title,
body[data-mood="minimal"] .ch--blue:not(.hero) .job-name{ color:var(--ink); }
body[data-mood="minimal"] .ch--blue:not(.hero) .lead{ color:var(--muted); }
body[data-mood="minimal"] .ch--blue:not(.hero) .job-dept{ color:var(--blue); }
body[data-mood="minimal"] .ch--blue:not(.hero) .emph{ color:var(--blue); }
body[data-mood="minimal"] .ch--blue:not(.hero) .num{ border-color:rgba(11,11,18,.12); }
body[data-mood="minimal"] .ch--blue:not(.hero) .num-fig{ color:var(--blue); }
body[data-mood="minimal"] .ch--blue:not(.hero) .num-desc{ color:var(--ink); }
body[data-mood="minimal"] .ch--blue:not(.hero) .num-extra{ color:var(--muted-soft); }
body[data-mood="minimal"] .ch--blue:not(.hero) .btn-white{ background:var(--blue); color:#fff; }
body[data-mood="minimal"] .ch--blue:not(.hero) .cta-doc{ color:var(--muted); }
body[data-mood="minimal"] .ch--blue:not(.hero) .cta-doc b{ color:var(--ink); }
/* graph recolor on light */
body[data-mood="minimal"] .growth-line{ stroke:var(--blue); }
body[data-mood="minimal"] .growth-area{ fill:rgba(0,49,255,.08); }
body[data-mood="minimal"] .growth-dot{ fill:var(--blue); }
body[data-mood="minimal"] .growth-ring{ stroke:rgba(0,49,255,.32); }
body[data-mood="minimal"] .growth-grid line{ stroke:rgba(11,11,18,.08); }
body[data-mood="minimal"] .growth-tag{ background:var(--blue); color:#fff; }
body[data-mood="minimal"] .growth-axis{ color:var(--muted); }

/* ---- MOOD: 다크 (night theme) ---- */
body[data-mood="dark"]{ background:#06070C; }
body[data-mood="dark"] .ch{ background:#0C0D15; color:#E9EAF0; }
body[data-mood="dark"] .ch--gray{ background:#111219; }
body[data-mood="dark"] .ch--ink{ background:#000; }
body[data-mood="dark"] .title,
body[data-mood="dark"] .hero-title{ color:#fff; }
body[data-mood="dark"] .lead{ color:#A7ACB8; }
body[data-mood="dark"] .kicker{ color:#8E98FF; }
body[data-mood="dark"] .emph{ color:#A6B4FF; }
body[data-mood="dark"] .value{ border-color:rgba(255,255,255,.10); }
body[data-mood="dark"] .value-word{ color:#A6B4FF; }
body[data-mood="dark"] .value-en{ color:#5E6472; }
body[data-mood="dark"] .value-desc{ color:#A7ACB8; }
body[data-mood="dark"] .value-desc b{ color:#fff; }
body[data-mood="dark"] .ben,
body[data-mood="dark"] .flow-item,
body[data-mood="dark"] .cond{ border-color:rgba(255,255,255,.10); }
body[data-mood="dark"] .ben-t,
body[data-mood="dark"] .flow-tx,
body[data-mood="dark"] .cond-v{ color:#fff; }
body[data-mood="dark"] .ben-d{ color:#A7ACB8; }
body[data-mood="dark"] .ben-foot,
body[data-mood="dark"] .cond-k{ color:#7E848F; }
body[data-mood="dark"] .role{ background:rgba(122,138,255,.15); color:#A6B4FF; }
body[data-mood="dark"] .prefer{ background:rgba(122,138,255,.12); color:#AEB9FF; }
body[data-mood="dark"] .step{ background:#15171F; border-color:rgba(255,255,255,.08); }
body[data-mood="dark"] .step-t{ color:#fff; }
body[data-mood="dark"] .flow-n{ color:#8E98FF; }
body[data-mood="dark"] .foot{ background:#0C0D15; }
body[data-mood="dark"] .foot p{ color:#7E848F; }
body[data-mood="dark"] .vision-product{ box-shadow:0 34px 70px rgba(0,0,0,.5); }

/* ================= section background image ================= */
.ch--bg{ position:relative; }
/* 섹션 높이를 꽉 채우고 좌우를 크롭(cover) — 폭이 줄어도 아래 빈 공간 없음 */
.ch-bg{ position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; }
.ch-bg-overlay{ position:absolute; inset:0; z-index:1;
  background:radial-gradient(ellipse 62% 56% at 50% 46%, rgba(255,255,255,.82) 0%, rgba(255,255,255,.55) 55%, rgba(255,255,255,.32) 100%); }
.ch--bg .col{ position:relative; z-index:2; }
body[data-mood="dark"] .ch-bg-overlay{
  background:radial-gradient(ellipse 60% 54% at 50% 46%, rgba(12,13,21,.78) 0%, rgba(12,13,21,.5) 60%, rgba(12,13,21,.2) 100%); }

/* ================= CH05 team hero (dark image bg) ================= */
.ch--team{ position:relative; background:#000; color:#fff; padding:120px 0 80px; }
/* 상단 검은 하늘 영역 크롭: 가로배너 비율 고정 + 하단 정렬(캐릭터) — 모든 폭에서 동일 비율로 잘림 */
.team-band{ display:block; width:100%; aspect-ratio:11/5; object-fit:cover; object-position:center bottom; margin-top:40px; }
.ch--team .col{ position:relative; z-index:2; }
.ch-team-overlay{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(4,5,10,.66) 0%, rgba(4,5,10,.5) 38%, rgba(4,5,10,.28) 56%, rgba(4,5,10,0) 80%); }
.ch--team .kicker{ color:#C2CCFF; }
.ch--team .title{ color:#fff; }
.ch--team .lead{ color:rgba(255,255,255,.88); }
.ch--team .role{ background:rgba(255,255,255,.16); color:#fff; backdrop-filter:blur(2px); }

/* ================= print: single continuous long page ================= */
@media print {
  @page { size: 958px 17700px; margin: 0; }
  html, body { width: 958px !important; margin: 0 !important; background: #fff; }
  #tweaks-root { display: none !important; }
  .ch, .part-div, .foot { break-inside: avoid; }
}

/* ================= 모바일 반응형 ================= */
/* 기본 레이아웃이 max-width+width:100% 구조이므로 별도 960px 블록 불필요 */

@media (max-width: 600px) {
  .ch{ padding: 64px 0; }
  .hero{ padding: 72px 0 80px; }
  .hero-logo{ height: 36px; margin-bottom: 40px; }
  .hero-title{ font-size: 36px; line-height: 1.3; }
  .hero-year{ font-size: 16px; }
  .hero-quote{ font-size: 20px; }
  .hero-desc{ font-size: 18px; }
  .hero-badge{ font-size: 16px; padding: 12px 20px; margin-top: 36px; }
  .hero-watermark{ font-size: 220px; right: -20px; bottom: -60px; }

  .kicker{ font-size: 20px !important; margin-bottom: 18px; }
  .title{ font-size: 34px !important; }
  .title-xl{ font-size: 40px !important; }
  .lead{ font-size: 18px; margin-top: 20px; }
  .emph{ font-size: 22px; }

  /* 인라인 스타일 font-size 강제 오버라이드 */
  .ch--ink .emph strong{ font-size: 30px !important; }

  .btn{ font-size: 17px; padding: 18px 32px; margin-top: 36px; }

  /* CH03 숫자 */
  .num-fig{ font-size: 72px; }
  .num-fig small{ font-size: 30px; }
  .num-desc{ font-size: 18px; }
  .num-extra{ font-size: 15px; }
  .growth-tag{ font-size: 14px; padding: 7px 14px; }

  /* CH05 팀 */
  .ch--team{ padding: 72px 0 0; }
  .team-band{ margin-top: 32px; }
  .roles{ gap: 10px; margin: 32px 0 6px; }
  .role{ font-size: 17px; padding: 12px 22px; border-radius: 10px; }

  /* CH06 가치 */
  .value-word{ font-size: 36px; }
  .value-desc{ font-size: 18px; }

  /* CH07 AI */
  .ai-screens img{ height: 200px !important; }
  .ai-cap{ font-size: 16px; }

  /* CH10 혜택 */
  .ben-t{ font-size: 26px; }
  .ben-d{ font-size: 18px; }

  /* CH11 공간 */
  .space-row.r2{ grid-template-columns: 1fr; }
  .space-row.r2 .space-cell img{ height: 220px !important; }

  /* CH13 직무 */
  .job-name{ font-size: 52px; }
  .job-dept{ font-size: 18px; }

  /* CH15/16 리스트 */
  .flow-item{ gap: 16px; padding: 24px 0; }
  .flow-tx{ font-size: 18px; }
  .flow-n{ font-size: 20px; }

  /* CH17 우대 */
  .prefer{ font-size: 18px; padding: 20px 22px; }

  /* CH18 근무조건 */
  .cond{ grid-template-columns: 1fr; gap: 6px; padding: 24px 0; }
  .cond-k{ font-size: 16px; }
  .cond-v{ font-size: 18px; }

  /* CH19 채용절차 */
  .step{ padding: 22px 24px; gap: 16px; }
  .step-n{ font-size: 14px; width: 76px; }
  .step-t{ font-size: 22px; }

  /* CH20 CTA */
  .cta-doc{ font-size: 17px; }

  /* PART 구분 */
  .part-div .pt{ font-size: 32px; }
  .part-div .pk{ font-size: 15px; }

  /* footer */
  .foot{ padding: 40px 0 48px; }
}