/* =========================
   SUB PAGE — Left Rail (Fixed, no-footer-overlap)
   Scope: .sub-mount
   Vars: --brand --ink --ink-inv --muted --line --bg
========================= */
.sub-mount{
  position: relative;
  /* 기존 변수들 유지 */
  --container:1400px;
  --pad-x:clamp(16px,4vw,60px);
  --content-w:1150px;
  --content-pad-left:52px;

  --safe-top:0px;
  --safe-bottom:0px;

  --rail-w: calc(var(--container) - var(--content-w));
  --container-left: calc(50% - (min(var(--container), 100vw - var(--pad-x)*2) / 2));
  --content-left: calc(var(--container-left) + var(--rail-w));

  /* NEW: veil 가로 너비(좌측 고정영역) */
  --veil-w: calc(var(--container-left) + var(--rail-w));
}

:root{
  /* 기존 전역 */
  --brand-dark:#253a88;
  --ink-inv:#ffffff;
  --line:#e6e7ea;
}

/* 레이어 우선순위 */
.sub-mount .sub-sections,
.sub-mount .sec{position:relative; z-index:0}
.sub-mount .left-veil{z-index:10}
.sub-mount .left-rail{z-index:20}

/* --- Veil: 화면 고정, 보더 고정, 오버플로우 차단 --- */
.sub-mount .left-veil{
  position:absolute;
  top:0; bottom:0; left:0;
  width: var(--veil-w);            /* ← 한 줄로 정리 */
  background:var(--bg);
  border-right:1px solid var(--line);
}

/* --- Rail: 화면 고정, 내부만 스크롤 --- */
.sub-mount .left-rail{
  position:sticky;
  top: 120px;
  /*bottom:var(--safe-bottom);*/      /* footer와 겹침 방지 */
  left: var(--container-left);
  width: var(--rail-w);
  background:transparent;
  overflow:hidden;
}

.sub-mount .left-nav{
  position:relative;
  height:100%;
  overflow:auto;
  padding:24px 0;
}

/* Nav items */
.sub-mount .left-nav ul{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:4px;
}
.sub-mount .left-nav a{
  position: relative;
  display:block;
  padding:12px 0 12px 24px;
  font-weight:600;
  font-size:var(--fs-body);
  text-decoration:none;
  color:var(--muted);
  transition:color .18s, background-color .18s, border-color .18s;
}
.sub-mount .left-nav a::before{
  content:"";width: 8px;height: 8px;background: transparent;
  display: block;position: absolute;left: 0px;top: 50%;transform: translateY(-50%);
  transition: all ease .3s;
  border-radius: 50%;
}
.sub-mount .left-nav a:hover{
  color:var(--brand);
}
.sub-mount .left-nav a.on::before,
.sub-mount .left-nav a:hover::before{
  background: var(--brand);
}
.sub-mount .left-nav a.on,
.sub-mount .left-nav a:focus-visible{
  color:var(--brand);
}

/* Sections */
.sub-mount .sub-sections{color:var(--ink); background:var(--bg)}
.sub-mount .sec{
  position:relative;
  padding: clamp(90px, 15vw, 120px) 0 clamp(48px, 10vh, 120px);
}
/* ====== 콘텐츠 영역: 좌측 veil과 절대 겹치지 않게 ====== */
.sub-mount .sec .inner{
  /* 좌측 고정폭(veil) + 내부 좌측 패딩을 고려해 폭 산출 */
  width: clamp(320px, calc(100% - var(--veil-w) - var(--pad-x)), var(--content-w));
  margin-left: var(--veil-w);
  margin-right: auto;
  padding-left: var(--content-pad-left);
}

/* Tone */
.sub-mount .band-plain::before{background:var(--bg)}
.sub-mount .band-tint::before{background:color-mix(in oklab, var(--brand) 6%, var(--bg))}
.sub-mount .band-dark::before{background:color-mix(in oklab, var(--ink) 90%, var(--bg))}
.sub-mount .band-dark{color:var(--ink-inv)}

/* About intro */
.sub-mount .ai-logo{margin:0 0 60px;padding-bottom: 40px;border-bottom:3px solid var(--brand)}
.sub-mount .ai-logo img{width:min(578px,55vw); height:auto; display:block}
.sub-mount .ai-rule{border:0; height:3px; background:var(--brand); width:min(940px,100%); margin:8px 0 24px}
.sub-mount .ai-lead{font-size:var(--fs-body); line-height:var(--lh-body); margin:0 0 20px;word-break: keep-all}
.sub-mount .ai-lead strong{color:var(--brand); font-weight:800; font-size: 1.2em;}
.sub-mount .ai-body{font-size:var(--fs-body); line-height:var(--lh-body); margin:0 0 16px;word-break: keep-all}

/* Company brief bg */
.sub-mount #about-brief{color:var(--ink-inv)}
.sub-mount #about-brief{
  background:
    linear-gradient(0deg, color-mix(in oklab, var(--ink) 60%, #0000), #0000),
    url("/imgs/sub01_bg01.jpg") right center/cover no-repeat;
}

/* DL */
.sub-mount .brief-list{display:grid; gap:14px; margin:0}
.sub-mount .brief-list .row{display:grid; grid-template-columns:120px 1fr; gap:12px; align-items:start}
.sub-mount .brief-list dt{
  margin:0; font-weight:700; color:var(--point);
  font-size:var(--fs-body); line-height:var(--lh-body);
  position:relative; padding-left:18px
}
.sub-mount .brief-list dt::before{content:"•"; position:absolute; left:0; top:0; line-height:inherit; color:var(--point)}
.sub-mount .brief-list dd{
  margin:0; color:var(--ink-inv);
  font-size:var(--fs-body); line-height:var(--lh-body)
}


/* =========================
     Values (scoped to #values)
     - 기본: 파란 카드 배경 + 흰 텍스트
     - 아이콘: background-image 클래스 지정
     - 카드 배경: 아트 이미지 right bottom / contain
     - Hover: 카드/아이콘 배경, 보더 강조
     - 타이포: 타이틀 28px, 본문 20px/32px
     - 컨테이너 1100px, PC 상하 여백 확장
  ========================= */

  #values .values-head{margin:0 0 18px}
  #values .values-title{
    margin:0 0 12px;
    font-weight:800;
    font-size:var(--fs-sec-title);
    color:var(--brand);
  }
  #values .values-sub{
    margin:0; font-size:var(--fs-sec-desc); line-height:var(--lh-sec-desc); font-weight: 500; color:#222;
  }

  /* Grid */
  #values .values-grid{
    list-style:none; margin:22px 0 0; padding:0;
    display:grid; gap:18px;
    grid-template-columns:repeat(4,1fr);
  }
  @media (max-width:1480px){ #values .values-grid{grid-template-columns:repeat(2,1fr)} }
  @media (max-width:640px){  #values .values-grid{grid-template-columns:1fr} }

  /* Card base: 기본 파란 배경 + 카드 아트 */
  #values .values-card{
    /* 토큰 */
    --card-bg: var(--brand);
    --card-bg-hover: var(--brand-dark);
    --card-border: transparent;
    --card-border-hover: var(--brand-dark);
    --icon-bg: rgba(255,255,255,.16);
    --icon-bg-hover: rgba(255,255,255,.28);
    --card-art: none; /* 각 카드 클래스에서 설정 */
    position:relative;
    background: var(--card-bg) no-repeat right bottom / contain;
    border:4px solid var(--card-border);
    overflow: hidden;
    border-radius:12px;
    padding:var(--fs-sec-title) 18px var(--fs-sec-desc) 24px;
    min-height:220px;
    display:flex; flex-direction:column; gap:12px;
    transition:background-color .2s, border-color .2s, color .2s, box-shadow .2s, transform .4s, opacity .2s;
    box-shadow:0 2px 8px rgba(17,17,17,.08);
    color: var(--ink-inv);
  }
  #values .values-card::before{
    content:"";
    position:absolute;
    bottom: 0;right: 0;
    background: var(--card-art) no-repeat right bottom/contain; /* 아트 이미지 */
    inset:0;
    opacity:.2;             /* ← 배경에만 투명도 */
    pointer-events:none;
    z-index:0;
  }
  @media (max-width:1480px){
    #values .values-card::before{background-size: cover;}
  }
  /* Hover */
  #values .values-card:hover,
  #values .values-card:focus-within{
    background-color: var(--white);
    border-color: var(--card-border-hover);
    box-shadow:0 10px 26px rgba(48,69,165,.30);
    transform: translateY(-2px);
  }

  /* Icon block (64×64, bg-image) */
  #values .values-ico{
    width:64px; height:64px; border-radius:50%;
    background-position:left center;
    background-repeat:no-repeat;
    background-size:contain;
    transition: background-color .2s, transform .2s;
  }

  /* 아이콘 이미지 클래스 (아이콘 자체) */
  #values .values-card .ico-customer   { background-image:url('/imgs/icons/customer_focus_w.png'); }
  #values .values-card .ico-innovation { background-image:url('/imgs/icons/tech_innovation_w.png'); }
  #values .values-card .ico-quality    { background-image:url('/imgs/icons/quality_first_w.png'); }
  #values .values-card .ico-trust      { background-image:url('/imgs/icons/trust_accountability_w.png'); }
  #values .values-card:hover .ico-customer   { background-image:url('/imgs/icons/customer_focus_blue.png'); }
  #values .values-card:hover .ico-innovation { background-image:url('/imgs/icons/tech_innovation_blue.png'); }
  #values .values-card:hover .ico-quality    { background-image:url('/imgs/icons/quality_first_blue.png'); }
  #values .values-card:hover .ico-trust      { background-image:url('/imgs/icons/trust_accountability_blue.png'); }

  /* 카드 아트(워터마크) — 카드 배경에 배치 */
  #values .values-card.art-customer::before   { --card-art: url('/imgs/valuebg_customer_focus_b.png'); }
  #values .values-card.art-innovation::before { --card-art: url('/imgs/valuebg_tech_innovation_b.png'); }
  #values .values-card.art-quality::before    { --card-art: url('/imgs/valuebg_quality_first_b.png'); }
  #values .values-card.art-trust::before      { --card-art: url('/imgs/valuebg_trust_accountability_b.png'); }
  #values .values-card:hover::before   { opacity:.2; }
  #values .values-card.art-customer:hover::before   { --card-art: url('/imgs/valuebg_customer_focus_c.png'); }
  #values .values-card.art-innovation:hover::before { --card-art: url('/imgs/valuebg_tech_innovation_c.png'); }
  #values .values-card.art-quality:hover::before    { --card-art: url('/imgs/valuebg_quality_first_c.png'); }
  #values .values-card.art-trust:hover::before      { --card-art: url('/imgs/valuebg_trust_accountability_c.png'); }

  /* Typography */
  #values .values-title-sm{
    margin:6px 0 0;
    font-size:var(--fs-head); line-height:var(--lh-head); font-weight:800;
  }
  #values .values-body{
    margin:0;
    font-size:var(--fs-body); line-height:var(--lh-body);
    opacity:.95;
  }
  #values .values-card .values-title-sm,
  #values .values-card .values-body{color: var(--white);word-break: keep-all}
  #values .values-card:hover .values-title-sm{color: var(--brand);}
  #values .values-card:hover .values-body{color: var(--ink);}
  /* 키보드 접근성 */
  #values .values-card a, #values .values-card button{outline:none}
  #values .values-card:focus-within{outline:2px solid #91a2ff; outline-offset:2px}

  #greeting.band-dark{
    background: url('/imgs/greeting_bg.jpg') no-repeat right center/cover;
    color:#fff;
    padding:clamp(48px,8vw,96px) 0;
  }
  #greeting{transition: all ease 0.3s}
  .greeting-wrap{
    display:flex; align-items:center; justify-content:space-between;
    gap:40px; flex-wrap:wrap;
  }
  .greeting-text{flex:1 1 540px;}
  .greeting-image{flex:0 0 340px;}
  .greeting-image img{width:100%; height:auto; display:block;}

  .greeting-head{font-size:var(--fs-sec-title); line-height:var(--lh-sec-title); font-weight:800; margin:0 0 16px; color:#fff;}
  .greeting-sub{font-size:var(--fs-sec-desc); line-height:var(--lh-sec-desc); font-weight:600; margin:0 0 20px;}
  .greeting-text p{font-size:var(--fs-body); line-height:var(--lh-body); margin:0 0 18px;}
  .greeting-footer{margin-top:28px;}
  .greeting-ceo{font-weight:600;}
  .greeting-ceo strong{font-weight:800;}

  @media (max-width:1280px){
    #greeting.band-dark{background: #03000c;}
  }
  @media (max-width:768px){
    .greeting-wrap{flex-direction:column; text-align:center;}
  }

/* ===== History (structure preserved) ===== */
.history-head{margin-bottom:32px}
.history-title{margin:0; font-weight:800; font-size:var(--fs-sec-title); line-height:var(--lh-sec-title); color:var(--brand,#3045a5)}
.history-title small {font-size:var(--fs-sec-desc); line-height:var(--lh-sec-desc); color: #aaaaaa;font-weight: 700;}
.history-sub{margin:6px 0 0; color:#7a8396; font-size:var(--fs-body); line-height:var(--lh-body)}

/* 중앙 세로선: 섹션 상단부터 바닥까지 */
.history-list{
  position:relative; list-style:none; margin:0; padding:0;
}
.history-list::before{
  content:""; position:absolute; top:70px; bottom:70px;
  left:50%; transform:translateX(-50%);
  opacity: 0.35;
  width:4px; background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%232F3569FF' stroke-width='8' stroke-dasharray='16' stroke-dashoffset='28' stroke-linecap='butt'/%3e%3c/svg%3e");
}

/* 아이템: 좌우 반폭, 교차 배치 */
.history-item{
  position:relative; width:50%; box-sizing:border-box; padding:12px 0;
  display: flex;justify-content: end;
}
.history-item:nth-child(odd){  left:0;   text-align:right; }
.history-item:nth-child(even){ left:50%; text-align:left;  }

/* 점(노드): 라인에 걸치도록 반 넣기 */
.history-item::before{
  content:""; position:absolute; z-index:2;
  top:50%; transform:translateY(-50%);
  width:48px; height:48px; border-radius:50%;
}
.history-item:nth-child(odd)::before{
  right: -24px;
  background: url('/imgs/history_left.png') no-repeat left center/contain;
}
.history-item:nth-child(even)::before{
  left: -24px;
  background: url('/imgs/history_right.png') no-repeat right center/contain;
}

/* 내부 레이아웃: 연도 + 내용(설명+이미지) */
.history-year{
  font-weight:800;font-size: var(--fs-sec-desc);line-height: var(--lh-sec-desc);color:var(--brand,#3045a5);
  margin:0 0 4px;
}
.history-content{
  display:flex; justify-content: center;flex-direction:column; width:100%;
}
.history-item:nth-child(odd)  { flex-direction:row-reverse;}
.history-item:nth-child(even) { flex-direction:row;        }
.history-item:nth-child(odd)  .history-content{ padding-right:20px; }
.history-item:nth-child(even) .history-content{ padding-left:20px;  }

/* 텍스트와 이미지: PNG 사용 */
.history-desc{
  margin:0; font-size:var(--fs-body); line-height:var(--lh-body); color:#111;
}
.history-img{width:210px; height:140px; overflow:hidden; margin:0; flex:0 0 210px;}
.history-img img{display:block; width:100%; height:100%; object-fit:cover;}

.history-item:nth-child(odd)  .history-img { padding-right: 70px;}
.history-item:nth-child(even) .history-img { padding-left: 70px;}
/* =========================
   History — Mobile overrides only
   일자형(세로 스택) + 좌측 라인 고정
========================= */
@media (max-width:1024px){
  /* 좌측 세로 라인 위치와 내부 여백 */
  .history-list{ padding-left:56px; }
  .history-list::before{
    left:24px;                /* 중앙선 → 좌측 고정 */
    transform:none;           /* translateX 해제 */
    width:3px;
  }

  /* 아이템: 한 열, 교차 배치 해제 */
  .history-item{
    width:100%;
    left:0;                   /* even의 left:50% 덮어쓰기 */
    text-align:left;
    padding:18px 0 24px;
    display:flex;            /* 데스크톱의 flex 해제 */
    justify-content:initial;  /* 잔여 값 초기화 */
  }
  .history-item:nth-child(odd),
  .history-item:nth-child(even){
    left:0;                   /* 모든 교차 위치 무효화 */
    text-align:left;
    flex-direction:row;
  }
  /* 점(노드): 라인 중앙에 걸치기. 데스크톱 배경이미지 제거 */
  .history-item::before{
    top: 50%;
    width:36px; height:36px;
    transform:translate(-50%, -50%);
  }
  .history-item:nth-child(odd)::before,
  .history-item:nth-child(even)::before{
    left:-30px;
    background: url('/imgs/history_right.png') no-repeat right center/contain;
  }

  /* 내부 콘텐츠: 연도 → 내용 → 이미지 순서로 세로 스택 */
  .history-content{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    padding:0 0 0 40px;               /* 라인과의 간격 */
    width:auto;
  }
  /* 데스크톱의 교차 패딩 무효화 */
  .history-item:nth-child(odd)  .history-content{ padding-right:0; }
  .history-item:nth-child(even) .history-content{ padding-left:40px; }

  /* 텍스트 크기 조정 */
  .history-year{ margin:0 0 2px; }

  /* 이미지: 전체폭, 고정 비율 높이. 데스크톱 패딩 제거 */
  .history-img{
    display: inline-block;
    overflow: inherit;
    width:clamp(120px,30vw,160px);
    height:clamp(120px,30vw,160px);
    border-radius:10px;
    margin:8px 0 0;
    flex:unset;
    padding:0;                         /* odd/even의 70px 패딩 무효화 */
  }
  .history-item:nth-child(odd)  .history-img,
  .history-item:nth-child(even) .history-img{
    padding:0;
  }
  .history-img img{ width:auto; height:100%; object-fit:cover;margin-bottom: 12px; }

  /* 아이템 간 간격 */
  .history-item + .history-item{ margin-top:4px; }
}

/* 더 작은 화면 보정 */
@media (max-width:640px){
  .history-list{ padding-left:48px; }
  .history-list::before{ left:18px; }
  /* .history-item::before{ left:18px; top:20px; } */
  .history-content{ padding-left:32px; }
}

/* title */
.loc-title{
  margin:0 0 32px;
  font-weight:800;
  font-size:var(--fs-sec-title); line-height:var(--lh-sec-title);
  color:var(--brand);
}

/* top info bar */
.loc-bar{
  display:flex; gap:18px; align-items:center; justify-content: space-between;
  font-size: var(--fs-body);
  background:var(--brand);
  color:#fff;
  border-radius:2px 2px 0 0;
  padding:12px 16px;
}
.loc-item{display:flex; gap:10px; align-items:center; white-space:nowrap}
.loc-k{font-weight:700;border-right: 2px solid rgba(255,255,255,0.5);padding-right: 12px;}
.loc-v{font-weight:600}
.loc-note{font-weight:500; opacity:.9; margin-left:6px}

.loc-bar a{color:#fff; text-decoration:none}
.loc-bar a:focus-visible{outline:2px solid #fff; outline-offset:2px}

/* 반응형 지도 래퍼 */
.loc-map{
  position: relative;
  width: 100%;
  /* 기본 비율 */
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 2px 2px;
  overflow: hidden;
  background: var(--brand);
  border-bottom: 6px solid var(--brand);
}

/* 실제 프레임을 박스에 꽉 채움 */
.loc-map iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* 구형 브라우저 폴백: aspect-ratio 미지원 시 패딩 해크 */
@supports not (aspect-ratio: 1 / 1){
  .loc-map{ height: 0; padding-top: 56.25%; } /* 16:9 = 9/16 */
  .loc-map iframe{ position: absolute; inset: 0; }
}

/* 브레이크포인트: 태블릿에서 4:3로 약간 세로 확보 */
@media (max-width: 900px){
  .loc-map{ aspect-ratio: 4 / 3; }
}

/* 모바일: 고정 비율 해제 + 최소 높이 보장 */
@media (max-width: 600px){
  .loc-map{ aspect-ratio: auto; min-height: 300px; }
}
/* responsive */
@media (max-width:900px){
  .loc-bar{flex-wrap:wrap; gap:8px}
  .loc-item{white-space:normal}
  .loc-item + .loc-item{border-left:0; padding-left:0}
  .loc-map{min-height:360px}
}
@media (max-width:600px){
  .loc-map{aspect-ratio:auto; min-height:300px}
}

/* Responsive */
@media (max-width:1280px){
  .sub-mount{ --content-w:1000px; --rail-w:calc(var(--container) - var(--content-w)); }
  .sub-mount .left-veil{ display:none; }
  .sub-mount .sec .inner{
    /* veil이 사라지므로 일반 컨테이너 폭으로 전환 */
    margin-left: auto;
    width: min(var(--content-w), calc(100% - var(--pad-x)*2));
    padding-left: 0; /* 필요 시 유지 가능 */
  }
}
@media (max-width:1140px){
  .sub-mount{ --content-w:900px; --rail-w:calc(var(--container) - var(--content-w)); }
}
/* Mobile: rail 해제 후 탭형 */
@media (max-width:1024px){

  .sub-mount .left-rail{
    position:static; left:auto; width:auto;
    top:auto; bottom:auto; height:auto; overflow:visible
  }
  .sub-mount .left-nav{padding:8px 0; border-bottom:1px solid var(--line); height:auto; overflow:visible}
  .sub-mount .left-nav ul{flex-direction:row; flex-wrap:wrap; justify-content:center; gap:4px}
  .sub-mount .left-nav a{border-left:0; border-bottom:2px solid transparent; padding:4px 12px}
  .sub-mount .left-nav a.on{border-bottom-color:var(--brand)}
  .sub-mount .sec .inner{width:min(100%, calc(100% - var(--pad-x)*2)); margin:0 auto; padding-left:0}
}
@media (max-width:768px){
  .sub-mount .brief-list .row{grid-template-columns:100px 1fr;}
}
@media (prefers-reduced-motion:reduce){
  .sub-mount .left-nav a{transition:none}
}

/* Footer가 항상 레일 위에 오도록 */
.site-footer, footer, .footer{position:relative; z-index:100}