/* ============================================================
   HANJIN ENGINEERING — CI SYSTEM
   도로열선 전문기업 / Corporate Identity Tokens
   ============================================================ */

:root{
  /* ---- Brand Core ---------------------------------------- */
  --ci-navy-900:#05070d;   /* base ground */
  --ci-navy-850:#080c16;
  --ci-navy-800:#0b1120;   /* surface     */
  --ci-navy-700:#101a2e;   /* raised      */
  --ci-navy-600:#16233c;
  --ci-navy-500:#1e3155;

  --ci-amber:#f2a33c;      /* primary accent = 열(熱) */
  --ci-amber-hi:#ffc46b;
  --ci-amber-lo:#c9761a;
  --ci-ember:#ff7a18;

  --ci-ice:#7fb6ff;        /* secondary accent = 빙(氷) */
  --ci-ice-hi:#bcd9ff;
  --ci-ice-lo:#2f6dbb;

  --ci-alert:#e2453c;
  --ci-ok:#37c98a;

  /* ---- Text ---------------------------------------------- */
  --tx-1:#f4f7fb;
  --tx-2:#c3ccdb;
  --tx-3:#8b97ab;
  --tx-4:#5e6a7e;

  /* ---- Lines & Surfaces ---------------------------------- */
  --line:rgba(255,255,255,.085);
  --line-2:rgba(255,255,255,.16);
  --glass:rgba(255,255,255,.028);
  --glass-2:rgba(255,255,255,.05);

  /* ---- Gradients ----------------------------------------- */
  --grd-heat:linear-gradient(90deg,var(--ci-ember),var(--ci-amber) 55%,var(--ci-amber-hi));
  --grd-ice:linear-gradient(90deg,var(--ci-ice-lo),var(--ci-ice) 60%,var(--ci-ice-hi));
  /* 강조 텍스트 — 어두운 끝색 없이 밝은 앰버 구간만 사용 */
  --grd-text:linear-gradient(92deg,#ffd79a,#ffbe63 48%,#ffa93f);

  /* ---- Type ---------------------------------------------- */
  --ff:"Pretendard Variable",Pretendard,-apple-system,"Segoe UI",
       "Malgun Gothic","Apple SD Gothic Neo",system-ui,sans-serif;
  --ff-en:"Barlow Condensed","Pretendard Variable",Pretendard,sans-serif;

  --fs-display:clamp(1.75rem,5.2vw,4.6rem);
  --fs-h2:clamp(1.3rem,3.6vw,3.1rem);
  --fs-h3:clamp(1.02rem,2vw,1.6rem);
  --fs-lead:clamp(.88rem,1.4vw,1.22rem);
  --fs-body:clamp(.85rem,1.2vw,1.02rem);
  --fs-sm:clamp(.78rem,1.05vw,.9rem);
  --fs-eyebrow:clamp(.68rem,.9vw,.8rem);

  /* ---- Rhythm -------------------------------------------- */
  --wrap:1180px;
  --wrap-narrow:900px;
  --pad-x:clamp(12px,3.8vw,48px);
  --sec-y:clamp(56px,8vw,140px);
  --gap:clamp(10px,1.8vw,26px);
  --r-s:10px; --r-m:16px; --r-l:24px; --r-xl:32px;

  --shadow-1:0 2px 12px rgba(0,0,0,.4);
  --shadow-2:0 18px 50px -18px rgba(0,0,0,.85);
  --glow-amber:0 0 42px -8px rgba(242,163,60,.55);
  --glow-ice:0 0 42px -8px rgba(127,182,255,.45);

  --ease:cubic-bezier(.22,.68,.24,1);
  --dur:.7s;
}

/* ============================================================
   RESET
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;font-family:var(--ff);font-size:var(--fs-body);
  line-height:1.75;color:var(--tx-2);background:var(--ci-navy-900);
  letter-spacing:-.015em;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;display:block}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ci-amber);outline-offset:3px;border-radius:4px}
::selection{background:var(--ci-amber);color:#0a0a0a}

/* ============================================================
   TYPO PRIMITIVES & SMART WORD-BREAK
   ============================================================ */
h1, h2, h3, h4, h5, h6, p,
.display, .h2, .h3, .lead, .sm, .card__ttl,
.sec__head h2, .sec__head p, .callout h2, .callout h3, .callout p,
.flow__cause h4, .flow__cause p, .flow-card__title,
.ben h4, .ben p, .feat h4, .feat p, .step h3, .step__it,
.chk li, .tel-box a, .info dt, .info span {
  word-break: keep-all;
  overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6, .display, .h2, .h3, .lead, .sec__head h2, .sec__head p, .sec__head .lead, .callout h2, .callout h3, .callout p {
  text-wrap: balance;
}

p, .sm, .flow__cause p, .ben p, .card p, .feat p {
  text-wrap: pretty;
}

/* 모바일 화면에서 PC용 고정 br 숨김 -> 자연스러운 text-wrap: balance / keep-all 자동 줄바꿈 적용 */
@media (max-width: 640px) {
  .sec__head h2 br:not(.br-mo),
  .sec__head p br:not(.br-mo),
  .sec__head .lead br:not(.br-mo),
  .callout h2 br:not(.br-mo),
  .callout h3 br:not(.br-mo),
  .callout p br:not(.br-mo),
  .h2 br:not(.br-mo),
  .h3 br:not(.br-mo),
  .lead br:not(.br-mo),
  .hero h1 br:not(.br-mo),
  .hero p br:not(.br-mo) {
    display: none;
  }
}

.display{font-size:var(--fs-display);line-height:1.2;font-weight:800;color:var(--tx-1);letter-spacing:-.035em}
.h2{font-size:var(--fs-h2);line-height:1.28;font-weight:800;color:var(--tx-1);letter-spacing:-.032em}
.h3{font-size:var(--fs-h3);line-height:1.4;font-weight:700;color:var(--tx-1);letter-spacing:-.025em}
.lead{font-size:var(--fs-lead);line-height:1.72;color:var(--tx-2);font-weight:400}
.sm{font-size:var(--fs-sm);color:var(--tx-3);line-height:1.7}
.tx-hot{background:var(--grd-text);-webkit-background-clip:text;background-clip:text;color:transparent}
/* 그라데이션 없이 주황 단색만 (히어로 헤드라인 등) */
.tx-orange{color:#ff8c28;-webkit-text-fill-color:#ff8c28;background:none}
.tx-ice{color:var(--ci-ice)}
.tx-red{color:var(--ci-alert)}
.tx-ok{color:var(--ci-ok)}
.tx-w{color:var(--tx-1)}
.tx-dim{color:var(--tx-3)}
.nowrap{white-space:nowrap}
b,strong{font-weight:800}

.eyebrow{
  font-family:var(--ff-en);font-size:var(--fs-eyebrow);font-weight:600;
  letter-spacing:.42em;text-transform:uppercase;color:var(--ci-amber);
  display:inline-flex;align-items:center;gap:.7em;margin-bottom:1.1em;
}
.eyebrow::before{
  content:"";width:clamp(22px,4vw,44px);height:1px;
  background:var(--grd-heat);flex:none;
}
.eyebrow.is-ice{color:var(--ci-ice)}
.eyebrow.is-ice::before{background:var(--grd-ice)}

/* ============================================================
   LOGO (CI MARK)
   ============================================================ */
.logo{display:inline-flex;align-items:center;gap:.65em}
.logo__mark{
  width:2.35em;height:2.35em;flex:none;border-radius:9px;
  background:linear-gradient(150deg,#12305c,#0a1730);
  border:1px solid rgba(127,182,255,.28);
  display:grid;place-items:center;box-shadow:var(--shadow-1);
}
.logo__mark svg{width:62%;height:62%}
/* 이미지 로고를 넣은 마크 — 가로형이라 박스 장식을 걷어냄 */
.logo__mark--img{width:auto;height:2.35em;border:0;border-radius:0;
  background:none;box-shadow:none;display:block}
.logo__mark--img img{height:100%;width:auto;display:block;object-fit:contain}
.logo__tx{display:flex;flex-direction:column;line-height:1.12}
.logo__ko{font-size:1.02em;font-weight:800;color:var(--tx-1);letter-spacing:-.04em}
.logo__en{font-family:var(--ff-en);font-size:.62em;font-weight:500;
  letter-spacing:.3em;color:var(--tx-4);text-transform:uppercase}
/* 이미지 로고 (헤더) */
.logo--img{gap:.6em}
.logo--img .logo__tx{padding-left:.65em;border-left:1px solid var(--line-2)}
.logo__sub{font-size:.72em;font-weight:600;color:var(--tx-4);letter-spacing:-.02em}
.logo__img{display:block;width:auto;height:clamp(30px,3.4vw,40px);
  object-fit:contain;transition:height .4s var(--ease),opacity .25s}
.hdr.stuck .logo__img{height:clamp(26px,3vw,34px)}
.logo--img:hover .logo__img{opacity:.86}
@media (max-width:520px){.logo__img{height:28px}.logo__sub{display:none}}
@media (max-width:400px){.logo--img .logo__tx{display:none}}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  --bg:var(--grd-heat);
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:.95em 1.9em;border-radius:999px;border:0;cursor:pointer;
  font-weight:700;font-size:var(--fs-body);letter-spacing:-.02em;
  background:var(--bg);color:#160c02;position:relative;overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),filter .3s;
  box-shadow:var(--glow-amber);text-align:center;
}
.btn:hover{transform:translateY(-2px);filter:brightness(1.07);box-shadow:0 0 54px -6px rgba(242,163,60,.75)}
.btn:active{transform:translateY(0)}
.btn--ghost{background:transparent;color:var(--tx-1);border:1px solid var(--line-2);box-shadow:none}
.btn--ghost:hover{border-color:var(--ci-amber);color:var(--ci-amber-hi);box-shadow:none}
.btn--glass{
  background:rgba(255,255,255,.06);
  color:#ffffff;
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 4px 24px rgba(0,0,0,.25), inset 0 1px 1px rgba(255,255,255,.25);
  transition:all .3s var(--ease);
}
.btn--glass:hover{
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.38);
  color:#ffffff;
  box-shadow:0 8px 32px rgba(0,0,0,.35), inset 0 1px 1px rgba(255,255,255,.45);
  transform:translateY(-2px);
  filter:none;
}
.btn--glass:active{
  background:rgba(255,255,255,.09);
  transform:translateY(0);
}
.btn--green,
.btn--call{
  background:linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
  color:#ffffff;
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 4px 22px rgba(40,167,69,.45);
  transition:all .3s var(--ease);
}
.btn--green:hover,
.btn--call:hover{
  filter:brightness(1.08);
  box-shadow:0 8px 32px rgba(40,167,69,.68), 0 0 20px rgba(40,167,69,.4);
  transform:translateY(-2px);
  color:#ffffff;
}
.btn--green:active,
.btn--call:active{
  transform:translateY(0);
}
.btn--green svg,
.btn--call svg,
.btn__call-ico{
  color:#d1d5db;
  fill:#e5e7eb;
  stroke:#9ca3af;
  stroke-width:1px;
}
.btn--lg{padding:1.15em 2.4em;font-size:calc(var(--fs-body) * 1.06)}
.btn--block{width:100%}

/* ============================================================
   LAYOUT
   ============================================================ */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad-x)}
.wrap--narrow{max-width:var(--wrap-narrow)}
.sec{position:relative;padding-block:var(--sec-y);overflow:clip}
.sec--tight{padding-block:clamp(52px,7vw,96px)}
.sec__head{margin-bottom:clamp(34px,5vw,62px)}
.sec__head--c{text-align:center;display:flex;flex-direction:column;align-items:center}
.sec__head--c .eyebrow{justify-content:center}
.sec__head--c .lead{max-width:64ch;margin-top:1.1em}
.grid{display:grid;gap:var(--gap)}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-6{grid-template-columns:repeat(6,minmax(0,1fr))}
@media (max-width:900px){
  .g-3,.g-4,.g-6{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .g-2,.g-3,.g-4,.g-6{grid-template-columns:minmax(0,1fr)}
}

.sec__no{
  font-family:var(--ff-en);font-size:.78rem;letter-spacing:.34em;
  color:var(--tx-4);display:block;margin-bottom:.9em;font-weight:600;
}

/* ============================================================
   REVEAL
   ============================================================ */
.rv{opacity:0;transform:translateY(26px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.09s}.rv-d2{transition-delay:.18s}
.rv-d3{transition-delay:.27s}.rv-d4{transition-delay:.36s}
.rv-d5{transition-delay:.45s}.rv-d6{transition-delay:.54s}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  *{animation-duration:.001ms!important;animation-iteration-count:1!important}
}