/* ============================================================
   KNDA × 한화시스템 — Design System
   Reverse-engineered from https://knda-hanwhasystems.com/training/detail/19
   (live page ships as 9 flattened JPGs; tokens below are pixel-sampled)
   ============================================================ */

/* ---------- fonts ---------- */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');
@import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap');

:root{
  /* ===== brand: orange ===== */
  --k-orange:        #F37321;  /* Hanwha signature */
  --k-orange-lt:     #FF9131;  /* card gradient top */
  --k-orange-dk:     #E2661A;  /* pressed / gradient bottom */
  --k-orange-deep:   #C6551A;  /* text on cream */

  /* ===== brand: navy (3-step intensity ramp) ===== */
  --k-navy-mute:     #576587;  /* step 1 — least emphasis */
  --k-navy-mid:      #283C6B;  /* step 2 */
  --k-navy:          #123063;  /* default surface */
  --k-navy-deep:     #02184E;  /* step 3 — max emphasis */

  /* ===== accent blue (split label — pixel-sampled bevel stops) ===== */
  --k-blue:          #115BAB;
  --k-blue-lt:       #1363B9;
  --k-blue-hi:       #4A83C0;  /* top highlight */
  --k-blue-lip:      #00469B;  /* bottom lip */

  /* ===== label accent text — the modifier word, never white ===== */
  --k-yellow:        #FFF79A;

  /* ===== cream / peach (card interiors on orange sections) ===== */
  --k-cream-50:      #FEF8F3;
  --k-cream-100:     #FEF3ED;
  --k-cream-200:     #FEEDE3;
  --k-cream-300:     #FCEBE0;
  --k-cream-line:    #F4DDCE;

  /* ===== neutral ===== */
  --k-white:         #FFFFFF;
  --k-gray-50:       #F8F8F8;
  --k-gray-100:      #F3F3F3;  /* page bg for light sections */
  --k-gray-200:      #EBECEE;
  --k-gray-300:      #D7D7DD;
  --k-ink:           #101010;
  --k-ink-dim:       #5A6687;
  --k-ink-faint:     #919191;

  /* ===== gradients ===== */
  --k-grad-orange:   linear-gradient(180deg, var(--k-orange-lt) 0%, var(--k-orange) 55%, var(--k-orange-dk) 100%);
  --k-grad-navy:     linear-gradient(180deg, #16306E 0%, var(--k-navy-deep) 100%);
  --k-grad-navy-x:   linear-gradient(90deg, #16306E 0%, var(--k-navy-deep) 100%);
  --k-grad-blue:     linear-gradient(180deg, var(--k-blue-lt) 0%, var(--k-blue) 100%);
  /* embossed bevel: highlight → body → lip. Stops measured off the live artwork. */
  --k-emboss-blue:   linear-gradient(180deg,
                       #4A83C0 0%, #2A6DB4 2.5%, #135DAE 4.5%,
                       #115CAD 7%, #1159A9 92%,
                       #0751A2 95.5%, #00469B 100%);
  --k-emboss-navy:   linear-gradient(180deg,
                       #3A5490 0%, #22376F 2.5%, #16306E 4.5%,
                       #142C63 7%, #0A1F52 92%,
                       #05123C 95.5%, #030D30 100%);
  --k-emboss-gray:   linear-gradient(180deg,
                       #F8F8F8 0%, #F4F4F4 3%,
                       #F4F4F4 95%, #E7EAEE 97.5%, #DFE2E7 100%);
  --k-grad-mute:     linear-gradient(180deg, #6B7799 0%, var(--k-navy-mute) 100%);
  --k-grad-mid:      linear-gradient(180deg, #38507F 0%, var(--k-navy-mid) 100%);

  /* ===== radius ===== */
  --k-r-pill:        999px;
  --k-r-xl:          28px;   /* outer cream container */
  --k-r-lg:          20px;   /* cards */
  --k-r-md:          14px;   /* rows, boxes */
  --k-r-sm:          10px;

  /* ===== elevation ===== */
  --k-sh-card:       0 10px 26px rgba(23, 30, 60, .10);
  --k-sh-raise:      0 16px 40px rgba(23, 30, 60, .16);
  --k-sh-orange:     0 12px 28px rgba(198, 85, 26, .28);
  --k-sh-inset-cream:0 2px 0 rgba(255,255,255,.7) inset;

  /* ===== type ===== */
  --k-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
            system-ui, Roboto, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  --k-hand: 'Nanum Pen Script', var(--k-sans);   /* ⚠ 임시 대체 — 원본 손글씨 폰트 확인 필요 */

  /* ===== layout ===== */
  --k-maxw:          1180px;
  --k-gutter:        20px;
}

/* ============================================================
   base
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--k-sans);
  color:var(--k-ink);
  background:var(--k-white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;             /* NOT hidden — keeps sticky alive */
  word-break:keep-all;         /* Korean line-breaking */
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul,ol{list-style:none;}
.k-wrap{max-width:var(--k-maxw);margin:0 auto;padding:0 var(--k-gutter);}

/* ============================================================
   section shells  — 4 surfaces the live page alternates between
   ============================================================ */
.k-sec{position:relative;padding:88px 0;}
.k-sec--light  {background:var(--k-gray-100);}
.k-sec--white  {background:var(--k-white);}
.k-sec--orange {background:var(--k-orange);overflow:hidden;}
.k-sec--navy   {background:var(--k-grad-navy);}

/* Oversized wordmark watermark (the live page bakes this into its JPGs).
   Lives in the background: cropped by the top edge, biased left — it never
   sits behind the content, so it reads as texture rather than clutter. */
.k-sec--orange::before{
  content:attr(data-watermark);
  position:absolute;top:-.34em;left:-.06em;
  font-size:clamp(110px,17vw,250px);font-weight:800;letter-spacing:-.045em;line-height:.86;
  color:rgba(255,255,255,.12);
  pointer-events:none;user-select:none;white-space:nowrap;
}

/* ============================================================
   section head  — orange rule → heading → optional pill
   ============================================================ */
.k-head{text-align:center;margin-bottom:44px;}
.k-head__rule{
  width:34px;height:3px;border-radius:2px;
  background:var(--k-orange);margin:0 auto 18px;
}
.k-sec--orange .k-head__rule{background:var(--k-white);}
.k-head h2{
  font-size:clamp(24px,3vw,34px);font-weight:800;letter-spacing:-.02em;
  line-height:1.35;color:var(--k-navy-deep);
}
.k-head h2 em{font-style:normal;color:var(--k-orange);}
.k-sec--orange .k-head h2{color:var(--k-white);}
.k-sec--orange .k-head h2 em{color:var(--k-navy-deep);}
.k-head p{margin-top:8px;font-size:15px;color:var(--k-ink-dim);}
.k-sec--orange .k-head p{color:rgba(255,255,255,.9);}
.k-head__hand{
  font-family:var(--k-hand);
  font-size:clamp(28px,3.6vw,42px);
  color:var(--k-orange);line-height:1.2;
}

/* ============================================================
   pills & chips
   ============================================================ */
.k-pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 18px;border-radius:var(--k-r-pill);
  font-size:14px;font-weight:700;line-height:1.4;
}
.k-pill--navy   {background:var(--k-grad-navy);color:var(--k-white);}
.k-pill--orange {background:var(--k-grad-orange);color:var(--k-white);}
.k-pill--ghost  {background:transparent;color:var(--k-navy-deep);border:1.5px solid var(--k-navy-deep);}
.k-pill--ghost-w{background:transparent;color:var(--k-white);border:1.5px solid rgba(255,255,255,.8);}
.k-pill--cream  {background:var(--k-cream-200);color:var(--k-orange-deep);}
.k-pill em{font-style:normal;color:var(--k-orange);}

.k-chiprow{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;}
.k-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 13px;border-radius:var(--k-r-pill);
  font-family:var(--p-mono, inherit);font-size:12.5px;
  background:rgba(255,255,255,.92);color:var(--k-ink-dim);
  border:1px solid #E2E3E8;
}
.k-chip b{color:#17181D;font-weight:600;}

/* ============================================================
   cream container  — the big rounded panel on orange sections
   ============================================================ */
.k-panel{
  background:var(--k-cream-200);
  border-radius:var(--k-r-xl);
  padding:30px;
  box-shadow:var(--k-sh-raise);
}
.k-panel--white{background:var(--k-white);}
.k-panel + .k-panel{margin-top:26px;}

/* ============================================================
   group header bar  — "Ⓐ 직무훈련 … 264h·66%"
   ============================================================ */
.k-groupbar{
  display:flex;align-items:center;gap:12px;
  background:var(--k-grad-navy);color:var(--k-white);
  border-radius:var(--k-r-pill);
  padding:14px 24px;margin-bottom:16px;
}
.k-groupbar__badge{
  flex:0 0 auto;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--k-white);color:var(--k-navy-deep);
  font-weight:800;font-size:16px;
}
.k-groupbar__title{font-size:17px;font-weight:800;}
.k-groupbar__path{font-size:13px;color:rgba(255,255,255,.72);font-weight:500;}
.k-groupbar__meta{margin-left:auto;font-size:14px;font-weight:700;}

/* ============================================================
   numbered row  — "01 · AI 서비스 백엔드 … · 56h"
   ============================================================ */
.k-rows{display:flex;flex-direction:column;gap:9px;}
.k-row{
  display:flex;align-items:center;gap:14px;
  background:var(--k-cream-100);
  border-radius:var(--k-r-pill);
  padding:12px 18px 12px 12px;
  box-shadow:var(--k-sh-inset-cream);
}
.k-row__num{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--k-grad-orange);color:var(--k-white);
  font-weight:800;font-size:14px;
  box-shadow:0 4px 10px rgba(198,85,26,.3);
}
.k-row__body{flex:1;min-width:0;}
.k-row__title{display:block;font-size:15.5px;font-weight:700;color:var(--k-navy-deep);}
.k-row__sub{display:block;font-size:12.5px;color:var(--k-ink-dim);margin-top:1px;}
.k-row__hour{
  flex:0 0 auto;
  background:var(--k-grad-navy);color:var(--k-white);
  border-radius:var(--k-r-pill);padding:7px 16px;
  font-size:13.5px;font-weight:700;
}
/* highlighted row (e.g. H-Agent Challenge) */
.k-row--hi{background:var(--k-grad-navy-x);box-shadow:var(--k-sh-card);}
.k-row--hi .k-row__title{color:var(--k-white);}
.k-row--hi .k-row__title em{font-style:normal;color:var(--k-orange);}
.k-row--hi .k-row__sub{color:rgba(255,255,255,.72);}
.k-row--hi .k-row__hour{background:var(--k-white);color:var(--k-navy-deep);}

/* compact 2-up variant */
.k-rows--grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:9px;}

/* ============================================================
   split box  — navy label (left) + content (right)
   NOTE: filled block, deliberately NOT a border-left accent rail
   ============================================================ */
.k-split{
  display:grid;grid-template-columns:200px 1fr;
  border-radius:var(--k-r-md);overflow:hidden;
  box-shadow:var(--k-sh-card);
}
.k-split + .k-split{margin-top:14px;}
.k-split__label{
  background:var(--k-emboss-blue);color:var(--k-white);
  display:grid;place-items:center;text-align:center;
  padding:22px 16px;font-size:17px;font-weight:800;line-height:1.35;
}
/* the distinguishing modifier is pale yellow — the rest of the label stays white */
.k-split__label em{font-style:normal;color:var(--k-yellow);}
.k-split__label--navy{background:var(--k-emboss-navy);}
.k-split__body{background:var(--k-emboss-gray);padding:20px 26px;}

/* check list inside split body */
.k-checks li{
  position:relative;padding-left:24px;
  font-size:15px;color:var(--k-ink-dim);line-height:2;
}
.k-checks li::before{
  content:"✓";position:absolute;left:2px;top:0;
  color:var(--k-blue);font-weight:800;font-size:13px;
}
.k-checks b{color:var(--k-navy-deep);font-weight:700;border-bottom:1.5px solid var(--k-blue);}

/* ============================================================
   orange stat card  — icon + title + lines
   ============================================================ */
.k-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:24px;}
.k-ocard{
  background:var(--k-grad-orange);
  border-radius:var(--k-r-lg);
  padding:28px 24px;text-align:center;color:var(--k-white);
  box-shadow:var(--k-sh-orange);
}
.k-ocard__icon{height:96px;margin:0 auto 10px;display:grid;place-items:center;}
.k-ocard__icon img{max-height:96px;width:auto;}
.k-ocard h3{font-size:19px;font-weight:800;margin-bottom:8px;}
.k-ocard p{font-size:14.5px;line-height:1.8;}
.k-ocard u{text-decoration:none;border-bottom:1.5px solid rgba(255,255,255,.85);}
.k-ocard .k-note{
  display:inline-block;margin-top:6px;font-weight:700;
  border-bottom:1.5px solid rgba(255,255,255,.85);
}

/* ============================================================
   value card  — navy header + cream body w/ icon rows
   ============================================================ */
.k-vcard{
  border-radius:var(--k-r-lg);overflow:hidden;
  background:var(--k-cream-100);
  box-shadow:var(--k-sh-card);
}
.k-vcard__head{
  background:var(--k-grad-navy);color:var(--k-white);
  padding:14px 20px;text-align:center;
  font-size:18px;font-weight:800;
  display:flex;align-items:center;justify-content:center;gap:10px;
}
.k-vcard__head img{height:24px;width:auto;}
.k-vcard__body{padding:8px 24px 20px;}
.k-vrow{display:flex;align-items:center;gap:18px;padding:18px 0;}
.k-vrow + .k-vrow{border-top:1px dashed var(--k-cream-line);}
.k-vrow__icon{
  flex:0 0 auto;width:60px;height:60px;border-radius:50%;
  display:grid;place-items:center;overflow:hidden;
}
.k-vrow__icon img{width:100%;height:100%;object-fit:cover;}
.k-vrow__icon--orange{background:var(--k-grad-orange);}
.k-vrow__icon--blue{background:var(--k-grad-blue);}
.k-vrow h4{font-size:16px;font-weight:800;color:var(--k-navy-deep);}
.k-vrow p{font-size:13.5px;color:var(--k-ink-dim);}

/* ============================================================
   track card  — 3-step intensity ramp (mute → mid → deep)
   ============================================================ */
.k-tracks{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:20px;}
.k-track{
  background:var(--k-white);border-radius:var(--k-r-md);
  overflow:hidden;box-shadow:var(--k-sh-card);
  display:flex;flex-direction:column;
}
.k-track__head{padding:14px 16px;text-align:center;color:var(--k-white);}
.k-track__head strong{display:block;font-size:20px;font-weight:800;color:var(--k-orange);letter-spacing:.02em;}
.k-track__head span{font-size:14px;font-weight:600;}
.k-track--1 .k-track__head{background:var(--k-grad-mute);}
.k-track--2 .k-track__head{background:var(--k-grad-mid);}
.k-track--3 .k-track__head{background:var(--k-grad-navy);}
.k-track__body{padding:22px 18px;text-align:center;flex:1;}
.k-track__icon{
  width:74px;height:74px;border-radius:50%;margin:0 auto 14px;
  background:#E9EEF6;display:grid;place-items:center;
}
.k-track__icon img{width:44px;height:44px;}
.k-track__body h4{font-size:17px;font-weight:800;color:var(--k-navy-deep);margin-bottom:10px;}
.k-track__body li{font-size:13.5px;color:var(--k-ink-dim);line-height:1.9;}

/* result box under each track — same ramp */
.k-result{
  border-radius:var(--k-r-md);padding:16px;text-align:center;
  color:var(--k-white);font-size:16px;font-weight:800;line-height:1.4;
  box-shadow:var(--k-sh-card);
}
.k-result--1{background:var(--k-grad-mute);}
.k-result--2{background:var(--k-grad-mid);}
.k-result--3{background:var(--k-grad-navy);}
.k-result u{text-decoration:none;border-bottom:2px solid rgba(255,255,255,.5);}

/* down arrow connector */
.k-arrow-down{
  display:grid;place-items:center;height:44px;
  color:var(--k-navy-mute);font-size:22px;
}
.k-arrow-down--deep{color:var(--k-navy-deep);}

/* ============================================================
   navy banner  — trophy + headline
   ============================================================ */
.k-banner{
  background:var(--k-grad-navy-x);border-radius:var(--k-r-md);
  padding:22px 28px;display:flex;align-items:center;justify-content:center;gap:20px;
  text-align:center;box-shadow:var(--k-sh-card);
  background-image:var(--k-grad-navy-x);
}
.k-banner img{height:60px;width:auto;}
.k-banner strong{display:block;font-size:22px;font-weight:800;color:var(--k-orange);}
.k-banner span{font-size:17px;font-weight:700;color:var(--k-white);}

/* ============================================================
   flow diagram  — boxes + arrows
   ============================================================ */
.k-flow{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;}
.k-fbox{
  background:var(--k-grad-navy);color:var(--k-white);
  border-radius:var(--k-r-md);padding:16px 22px;text-align:center;
  box-shadow:var(--k-sh-card);
}
.k-fbox strong{display:block;font-size:17px;font-weight:800;}
.k-fbox span{font-size:13.5px;color:rgba(255,255,255,.82);}
.k-fbox em{font-style:normal;color:var(--k-orange);}
.k-fbox--hub{padding:24px 30px;}
.k-fbox--hub strong{font-size:20px;color:var(--k-orange);}
.k-farrow{
  display:grid;place-items:center;color:var(--k-ink-dim);font-size:20px;
  min-width:34px;
}
.k-farrow small{font-size:11.5px;font-weight:600;display:block;text-align:center;}

/* ============================================================
   curriculum table  — peach header
   ============================================================ */
.k-table{width:100%;border-collapse:collapse;font-size:14px;}
.k-table thead th{
  background:var(--k-cream-100);color:var(--k-navy-deep);
  font-weight:800;font-size:15px;padding:14px;
  border-bottom:1.5px solid var(--k-cream-line);
}
.k-table th[scope="row"],
.k-table td.k-table__cat{
  font-weight:800;color:var(--k-navy-deep);text-align:center;
  font-size:15px;vertical-align:middle;
  border-right:1px solid var(--k-gray-200);
}
/* key/value variant (모집개요): short labels read as misaligned when centred */
.k-table--kv th[scope="row"]{text-align:left;padding-left:22px;}
.k-table td{padding:14px 18px;border-bottom:1px solid var(--k-gray-200);vertical-align:top;color:var(--k-ink-dim);}
.k-table ol{counter-reset:n;}
.k-table ol li{counter-increment:n;position:relative;padding-left:22px;line-height:1.9;}
.k-table ol li::before{
  content:counter(n);position:absolute;left:0;top:5px;
  width:15px;height:15px;border-radius:50%;
  background:var(--k-navy-deep);color:var(--k-white);
  font-size:9.5px;font-weight:700;display:grid;place-items:center;
}
.k-table ul li{position:relative;padding-left:14px;line-height:1.9;}
.k-table ul li::before{content:"-";position:absolute;left:0;color:var(--k-ink-faint);}
.k-table ul ul li::before{content:"→";font-size:11px;}

/* ============================================================
   venue card  — photo grid + location footer
   ============================================================ */
.k-venue{background:var(--k-cream-100);border-radius:var(--k-r-lg);padding:16px;box-shadow:var(--k-sh-card);}
.k-venue__grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.k-venue__grid img{aspect-ratio:1/.86;object-fit:cover;border-radius:var(--k-r-sm);width:100%;}
.k-venue__foot{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:14px;flex-wrap:wrap;}
.k-venue__place{font-size:17px;font-weight:800;color:var(--k-navy-deep);}
.k-venue__count{font-size:22px;font-weight:800;color:var(--k-orange);}

/* ============================================================
   footnote
   ============================================================ */
.k-foot{
  text-align:center;margin-top:18px;
  font-size:12.5px;color:var(--k-ink-faint);
}
.k-sec--orange .k-foot{color:rgba(255,255,255,.85);}

/* ============================================================
   responsive
   ============================================================ */
@media(max-width:900px){
  .k-sec{padding:60px 0;}
  .k-panel{padding:20px 14px;}
  .k-split{grid-template-columns:1fr;}
  .k-split__label{padding:14px;font-size:16px;}
  .k-split__body{padding:16px 18px;}
  .k-groupbar{border-radius:var(--k-r-md);flex-wrap:wrap;padding:12px 16px;}
  .k-groupbar__meta{margin-left:0;width:100%;}
  .k-row{border-radius:var(--k-r-md);flex-wrap:wrap;}
  .k-row__hour{margin-left:auto;}
  .k-banner{flex-direction:column;gap:12px;}
  .k-flow{flex-direction:column;}
  .k-farrow{transform:rotate(90deg);height:30px;}
}
@media(max-width:640px){
  :root{--k-gutter:16px;}
  .k-table{font-size:12.5px;}
  .k-table td{padding:10px 12px;}
}

/* ============================================================
   motion
   ============================================================ */
/* Gated on .has-js: without scripting the content must stay visible, never opacity:0 */
.has-js .k-reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease;}
.has-js .k-reveal.is-in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){
  .has-js .k-reveal{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
}