@charset "utf-8";

/* =========================================================
   나우하이텍 — 디자인 토큰
   원본(2006년 테이블/이미지 레이아웃)의 색을 샘플링해 고정.
   navy #323175 = 로고, green #468510~#94c34b = 서브메뉴 그라디언트
   ========================================================= */
:root {
  --navy: #2f2e6e;
  --navy-deep: #23224f;
  --navy-soft: #4a49a0;
  --green: #4d8f13;
  --green-light: #94c34b;
  --green-pale: #f0f6e8;

  --ink: #16191d;
  --ink-2: #3c434c;
  --muted: #6b737d;
  --line: #e2e6ea;
  --line-soft: #eef1f4;
  --bg: #ffffff;
  --bg-soft: #f6f8f9;

  --wrap: 1120px;
  --gutter: 20px;

  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;

  --shadow-1: 0 1px 2px rgba(22, 25, 29, .06), 0 6px 18px rgba(22, 25, 29, .05);
  --shadow-2: 0 2px 6px rgba(22, 25, 29, .08), 0 14px 40px rgba(22, 25, 29, .08);

  --font: "Pretendard", "Pretendard Variable", -apple-system, BlinkMacSystemFont,
          "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "맑은 고딕", sans-serif;
  --font-en: "Helvetica Neue", Arial, var(--font);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-2);
  background: var(--bg);
  word-break: keep-all;
  overflow-wrap: anywhere;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { color: var(--ink); line-height: 1.35; margin: 0; font-weight: 700; letter-spacing: -.02em; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: var(--r-sm); }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--navy); color: #fff; padding: 10px 18px; border-radius: 0 0 var(--r-md) 0;
}
.skip:focus { left: 0; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* =========================================================
   Header
   ========================================================= */
.site-header { position: sticky; top: 0; z-index: 100; background: #fff; border-bottom: 1px solid var(--line); }

.utility { background: var(--navy-deep); color: rgba(255,255,255,.82); font-size: 13px; }
.utility .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 34px; }
.utility ul { display: flex; gap: 18px; flex-wrap: wrap; }
.utility a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.utility .tel { font-family: var(--font-en); letter-spacing: .01em; }
.utility .tel strong { color: #fff; font-weight: 600; }
@media (max-width: 720px) { .utility .u-links { display: none; } .utility .wrap { justify-content: flex-end; } }

.masthead .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 74px; }

/* 로고는 원본 사이트의 이미지를 그대로 쓴다. 원본이 192×48 뿐이라 그보다 키우지 않는다. */
.brand { display: flex; align-items: center; padding: 6px 0; }
.brand img { height: 36px; width: auto; }
@media (max-width: 400px) { .brand img { height: 30px; } }

.nav-toggle {
  display: none; width: 44px; height: 44px; border: 1px solid var(--line);
  border-radius: var(--r-md); background: #fff; cursor: pointer;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  display: block; width: 20px; height: 2px; background: var(--ink); margin: 0 auto; content: ""; position: relative;
}
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after { position: absolute; top: 6px; }

.gnb > ul { display: flex; align-items: center; gap: 4px; }
.gnb__link {
  display: block; padding: 12px 16px; font-size: 16px; font-weight: 600; color: var(--ink);
  border-radius: var(--r-md); position: relative;
}
.gnb__link::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 6px; height: 2px;
  background: var(--green); transform: scaleX(0); transform-origin: left; transition: transform .18s ease;
}
.gnb li:hover > .gnb__link::after, .gnb__link:focus-visible::after { transform: scaleX(1); }
.gnb__link[aria-current="page"], .gnb li.is-current > .gnb__link { color: var(--green); }
.gnb li.is-current > .gnb__link::after { transform: scaleX(1); }

.gnb__sub {
  position: absolute; top: 100%; left: 0; min-width: 220px; padding: 8px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-2); opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.gnb li { position: relative; }
.gnb li:hover > .gnb__sub, .gnb li:focus-within > .gnb__sub { opacity: 1; visibility: visible; transform: translateY(0); }
.gnb__sub a { display: block; padding: 9px 12px; font-size: 15px; border-radius: var(--r-sm); color: var(--ink-2); }
.gnb__sub a:hover { background: var(--green-pale); color: var(--green); }

@media (max-width: 960px) {
  .nav-toggle { display: block; }
  .gnb {
    position: fixed; inset: 108px 0 0; background: #fff; padding: 8px var(--gutter) 40px;
    overflow-y: auto; display: none; border-top: 1px solid var(--line);
  }
  .gnb.is-open { display: block; }
  .gnb > ul { display: block; }
  /* 아코디언 — 대분류를 누르면 하위가 펼쳐진다. 여는 동작은 assets/js/nav.js */
  .gnb__link {
    padding: 16px 4px; font-size: 18px; border-bottom: 1px solid var(--line-soft); border-radius: 0;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
  }
  .gnb__link::after {
    display: block; content: ""; position: static; transform: none; opacity: 1;
    width: 10px; height: 10px; margin-right: 6px; background: none;
    border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
    rotate: 45deg;                              /* 아래를 가리키는 화살표 */
    transition: rotate .2s ease, border-color .2s ease;
  }
  .gnb li.is-expanded > .gnb__link::after { rotate: -135deg; border-color: var(--green); }
  .gnb li.is-current > .gnb__link::after { border-color: var(--green); }

  .gnb__sub {
    position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none;
    border: 0; border-radius: 0; padding: 0 0 0 4px;
    display: none;                              /* 접힌 상태가 기본 */
  }
  .gnb li.is-expanded > .gnb__sub {
    display: block; padding: 4px 0 12px 4px; border-bottom: 1px solid var(--line-soft);
  }
  .gnb__sub a { padding: 10px 12px; color: var(--muted); }
}

/* =========================================================
   Home — hero
   ========================================================= */
/* 키배너는 사진 3장이 2.5초마다 교차한다. 넘기는 동작은 assets/js/hero.js.
   사진 위에 글자를 얹으므로, 대비 확보용 어두운 막(.hero__scrim)을 사이에 깐다. */
.hero { position: relative; overflow: hidden; background: var(--navy-deep); }

.hero__stage { position: absolute; inset: 0; z-index: 0; }
/* --hero-focus 는 사진마다 build.py 가 넣는다. 잘려도 남아야 할 높이(간판·로고 등). */
.hero__slide {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center var(--hero-focus, 50%);
  /* 간격 1.8초에 페이드 0.8초. 페이드를 길게 잡아 부드럽게 넘어가게 한다.
     (260820 페리 지시 — 짧은 페이드가 급해 보인다는 피드백) */
  opacity: 0; transition: opacity .8s ease-in-out;
}
.hero__slide.is-active { opacity: 1; }

/* 왼쪽(글자가 놓이는 쪽)을 더 어둡게 눌러 가독성을 만든다. */
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(15,17,40,.72) 0%, rgba(15,17,40,.44) 48%, rgba(15,17,40,.12) 100%),
    linear-gradient(180deg, rgba(15,17,40,.30) 0%, transparent 38%, rgba(15,17,40,.38) 100%);
}

/* 좌우값을 0 으로 두면 `.wrap` 의 여백을 덮어써서 좁은 화면에서 글자가 화면 끝에 붙는다. */
.hero__inner {
  position: relative; z-index: 2;
  padding: 72px var(--gutter) 92px;
  min-height: 420px; display: flex; flex-direction: column; justify-content: center;
}
.hero__eyebrow { font-size: 17px; font-weight: 600; color: #dfe6ff; margin: 0 0 6px; }
.hero__title {
  font-family: var(--font-en); font-size: clamp(38px, 8vw, 76px); font-weight: 800;
  letter-spacing: -.03em; line-height: 1; margin: 0 0 18px; color: #fff;
  text-shadow: 0 2px 18px rgba(0,0,0,.34);
}
.hero__title em { font-style: normal; color: var(--green-light); }
.hero__lead { max-width: 30em; font-size: 15px; color: rgba(255,255,255,.88); margin: 0 0 24px; }
.hero__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.hero__tags li {
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.42); color: #fff;
  border-radius: 999px; padding: 7px 16px; font-size: 14px; font-weight: 600;
  backdrop-filter: saturate(1.4) blur(2px);
}

/* 현재 위치 표시. 색만으로 구분하지 않도록 폭도 함께 늘린다. */
.hero__dots {
  position: absolute; z-index: 3; left: 50%; transform: translateX(-50%); bottom: 20px;
  display: flex; gap: 9px;
}
.hero__dot {
  width: 10px; height: 10px; padding: 0; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.75); background: rgba(255,255,255,.28);
  transition: width .25s ease, background-color .25s ease;
}
.hero__dot.is-active { width: 28px; background: #fff; }
.hero__dot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (min-width: 861px) {
  .hero__inner { padding: 108px var(--gutter) 128px; min-height: 560px; }
  .hero__dots { left: auto; right: calc((100% - var(--wrap)) / 2 + var(--gutter)); transform: none; bottom: 28px; }
}

/* 좁은 화면에서는 사진의 세로가 거의 그대로 들어오므로 높이 지정이 따로 필요 없다.
   배너 자체만 낮춘다. */
@media (max-width: 640px) {
  .hero__inner { min-height: 380px; padding: 56px var(--gutter) 76px; }
}

/* OS 에서 "동작 줄이기"를 켠 사용자에게는 교차 효과도 없앤다 (자동 롤링은 hero.js 가 멈춘다). */
@media (prefers-reduced-motion: reduce) {
  .hero__slide { transition: none; }
  .hero__dot { transition: none; }
}

/* =========================================================
   Home — sections
   ========================================================= */
.section { padding: 56px 0; }
.section--soft { background: var(--bg-soft); }
.section__head { margin-bottom: 28px; }
.section__eyebrow {
  font-family: var(--font-en); font-size: 12px; font-weight: 700; letter-spacing: .18em;
  color: var(--green); text-transform: uppercase; margin: 0 0 8px;
}
.section__title { font-size: clamp(22px, 4vw, 30px); }
.section__desc { margin-top: 10px; color: var(--muted); font-size: 15px; }

.cards { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cards--3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  display: block; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 24px; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
a.card:hover { border-color: var(--green-light); box-shadow: var(--shadow-1); transform: translateY(-2px); }
.card__label { font-family: var(--font-en); font-size: 11px; font-weight: 700; letter-spacing: .16em; color: var(--green); margin: 0 0 8px; }
.card__title { font-size: 19px; margin: 0 0 10px; }
.card__body { font-size: 15px; color: var(--muted); margin: 0; }
.card__more { display: inline-block; margin-top: 14px; font-size: 14px; font-weight: 600; color: var(--navy); }
.card__more::after { content: " →"; }
.card--quote { background: var(--navy); border-color: var(--navy); color: rgba(255,255,255,.8); }
.card--quote .card__title, .card--quote blockquote { color: #fff; }
.card--quote .card__label { color: var(--green-light); }
.card--quote .card__body { color: rgba(255,255,255,.78); }
.card--quote blockquote { margin: 0 0 12px; font-size: 17px; font-weight: 600; line-height: 1.6; }

.contact-strip { display: grid; gap: 20px; }
@media (min-width: 860px) { .contact-strip { grid-template-columns: 1.1fr 1fr; align-items: center; } }
.contact-strip dl { display: grid; grid-template-columns: 78px 1fr; gap: 6px 12px; margin: 0; font-size: 15px; }
.contact-strip dt { color: var(--muted); font-weight: 600; }
.contact-strip dd { margin: 0; font-family: var(--font-en); color: var(--ink); }
.contact-strip .big {
  font-size: clamp(21px, 3.4vw, 30px); font-weight: 800; letter-spacing: -.03em; color: var(--navy);
  font-family: var(--font-en); overflow-wrap: normal; word-break: keep-all; white-space: nowrap;
}

.notice-list { border-top: 2px solid var(--ink); }
.notice-list li { border-bottom: 1px solid var(--line); }
.notice-list a { display: flex; gap: 14px; align-items: baseline; padding: 16px 4px; }
.notice-list a:hover .notice-list__title { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.notice-list__badge {
  flex: none; font-size: 12px; font-weight: 700; color: #fff; background: var(--green);
  border-radius: 999px; padding: 2px 10px; align-self: center;
}
.notice-list__title { flex: 1; font-weight: 600; color: var(--ink); }
.notice-list__date { flex: none; font-family: var(--font-en); font-size: 13px; color: var(--muted); }

/* =========================================================
   Sub page shell
   ========================================================= */
.page-head { background: var(--navy); color: #fff; padding: 34px 0; }
.page-head__section { font-family: var(--font-en); font-size: 12px; font-weight: 700; letter-spacing: .18em; color: var(--green-light); margin: 0 0 6px; }
.page-head__title { color: #fff; font-size: clamp(26px, 5vw, 36px); }
.breadcrumb { margin-top: 12px; font-size: 13px; color: rgba(255,255,255,.7); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 8px; }
.breadcrumb li + li::before { content: "›"; margin-right: 8px; color: rgba(255,255,255,.45); }
.breadcrumb a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb [aria-current="page"] { color: #fff; }

/* 좁은 화면에서는 block, 넓은 화면(900px~)에서만 두 칸 grid.
   block 인 이유는 좌측 메뉴를 머리말 아래 붙여 두기 위해서다 — 아래 .lnb 주석 참조. */
.layout { padding: 32px 0 72px; }
/* 그리드 칸의 기본 최소폭은 내용 크기(min-width:auto)라, 안쪽에 줄바꿈 없는 알약 메뉴나
   620px 표가 들어가면 칸이 그만큼 벌어져 좁은 화면에서 페이지가 가로로 밀린다. */
.layout > * { min-width: 0; }

/* 좁은 화면에서 좌측 메뉴 탭을 누르면 본문만 갈아끼운다 (assets/js/section-tabs.js).
   내용이 오는 동안 잠깐 흐려지게 해 눌린 것이 보이게 한다. */
.layout.is-loading .content { opacity: .45; transition: opacity .12s ease; }
.content:focus { outline: none; }
@media (prefers-reduced-motion: reduce) {
  .layout.is-loading .content { transition: none; }
}

.lnb__title { display: none; }

/* 좁은 화면에서 탭 줄을 머리말 바로 아래에 붙여 둔다. (260821 페리 지시)
   본문을 내려 읽는 동안에도 지금 어느 항목인지 보이고, 바로 옆 항목으로 옮겨 갈 수 있다.

   ⚠️ .layout 이 grid 인 채로는 sticky 가 먹지 않는다. 좁은 화면에서는 메뉴와 본문이
   각각 다른 칸에 놓이는데, 메뉴 칸의 높이가 메뉴 높이와 같아 움직일 범위가 0 이 된다.
   그래서 좁은 화면에서만 block 으로 되돌린다. gap 이 사라지므로 여백은 margin 으로 준다.

   좌우 음수 여백은 배경을 화면 끝까지 닿게 하려는 것. 없으면 양옆 틈으로 본문이 지나간다. */
.layout { display: block; }
.lnb {
  /* 머리말 높이는 111px 이지만 110px 로 잡아 1px 겹치게 한다.
     딱 맞추면 소수점 반올림 탓에 1~2px 틈이 생기고 그 사이로 본문이 지나간다. (260821 수정) */
  position: sticky; top: 110px; z-index: 90;
  background: #fff; border-bottom: 1px solid var(--line);
  margin: 0 calc(var(--gutter) * -1);
  padding: 10px var(--gutter);
}
.content { margin-top: 24px; }
/* 좌우로 미는 동작은 그대로 두되 스크롤 막대는 숨긴다. 칩 아래 회색 줄이 보이던 것을 없앴다.
   (260821 페리 지시 — 기능은 남기고 보이는 것만 뺀다) */
.lnb__list {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 0;
  scrollbar-width: none;              /* 파이어폭스 */
  -ms-overflow-style: none;           /* 구형 엣지 */
}
.lnb__list::-webkit-scrollbar { display: none; }   /* 크롬·사파리 */
.lnb__list a {
  display: block; white-space: nowrap; padding: 9px 16px; font-size: 15px; font-weight: 600;
  border: 1px solid var(--line); border-radius: 999px; color: var(--ink-2); background: #fff;
}
.lnb__list a:hover { border-color: var(--green-light); color: var(--green); }
.lnb__list a[aria-current="page"] { background: var(--green); border-color: var(--green); color: #fff; }

@media (min-width: 900px) {
  /* 넓은 화면에서는 세로 목록이라 배경·경계선·음수 여백이 필요 없다. */
  .layout { display: grid; grid-template-columns: 216px 1fr; gap: 48px; padding: 48px 0 96px; }
  .content { margin-top: 0; }
  .lnb {
    position: sticky; top: 128px; align-self: start;
    background: none; border-bottom: 0; margin: 0; padding: 0;
  }
  .lnb__title {
    display: block; background: linear-gradient(135deg, var(--green-light), var(--green));
    color: #fff; border-radius: var(--r-md) var(--r-md) 0 0; padding: 20px 18px;
  }
  .lnb__title strong { display: block; font-size: 20px; font-weight: 700; }
  .lnb__title span { font-family: var(--font-en); font-size: 11px; font-weight: 700; letter-spacing: .14em; color: rgba(255,255,255,.85); }
  .lnb__list { display: block; overflow: visible; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--r-md) var(--r-md); }
  .lnb__list li + li { border-top: 1px solid var(--line-soft); }
  .lnb__list a { border: 0; border-radius: 0; padding: 13px 18px; white-space: normal; font-size: 15px; display: flex; justify-content: space-between; gap: 8px; }
  .lnb__list a::after { content: "›"; color: var(--green-light); }
  .lnb__list a:hover { background: var(--green-pale); }
  .lnb__list a[aria-current="page"] { background: #fff; color: var(--green); }
  .lnb__list a[aria-current="page"]::after { color: var(--green); }
}

.lnb__call {
  margin-top: 16px; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 16px 18px; background: var(--bg-soft);
}
.lnb__call h3 { font-size: 13px; letter-spacing: .1em; font-family: var(--font-en); color: var(--muted); margin-bottom: 6px; }
.lnb__call .num {
  font-family: var(--font-en); font-size: 17px; font-weight: 800; color: var(--navy);
  letter-spacing: -.03em; margin: 0; white-space: nowrap;
}
.lnb__call dl { display: grid; grid-template-columns: 46px 1fr; gap: 2px 8px; margin: 8px 0 0; font-size: 13px; }
.lnb__call dt { color: var(--muted); }
.lnb__call dd { margin: 0; font-family: var(--font-en); }
@media (max-width: 899px) { .lnb__call { display: none; } }

/* =========================================================
   Content blocks
   ========================================================= */
.content > * + * { margin-top: 20px; }
.content h2 {
  font-size: 21px; margin-top: 48px; padding-left: 14px; position: relative;
}
.content h2::before {
  content: ""; position: absolute; left: 0; top: .28em; width: 5px; height: 1em;
  background: var(--green); border-radius: 2px;
}
.content h2:first-child { margin-top: 0; }
.content h3 { font-size: 17px; margin-top: 28px; color: var(--navy); }
.content p { font-size: 16px; }
.content .lead { font-size: 18px; color: var(--ink); font-weight: 500; }

/* 글 제목은 목록 아래 본문이라 앞의 초록 막대를 쓰지 않는다.
   여백만 지우고 막대를 남기면 글자와 겹친다. */
/* 게시글 — 글 사이를 가르는 줄은 하나면 된다.
   목록 마지막 줄과 구분선이 겹쳐 빈 항목처럼 보이던 것을 첫 글에서 걷어낸다. */
.post { border-top: 1px solid var(--line); padding: 28px 0; }
.post:first-of-type { border-top: 0; padding-top: 0; margin-top: 44px; }
/* 앞의 `.content h2` 가 더 강해서, 클래스 하나만으로는 왼쪽 여백을 되돌리지 못한다. */
.content .post__title { margin-top: 0; padding-left: 0; }
.content .post__title::before { display: none; }

.rule { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }

.list-num { counter-reset: n; display: grid; gap: 10px; }
.list-num li { counter-increment: n; position: relative; padding-left: 32px; }
.list-num li::before {
  content: counter(n); position: absolute; left: 0; top: .25em;
  width: 22px; height: 22px; border-radius: 50%; background: var(--green-pale); color: var(--green);
  font-size: 12px; font-weight: 700; display: grid; place-items: center; font-family: var(--font-en);
}

.callout {
  background: var(--green-pale); border-left: 4px solid var(--green);
  padding: 20px 22px; border-radius: 0 var(--r-md) var(--r-md) 0;
}
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: var(--green); }

.note {
  font-size: 13px; color: var(--muted); background: var(--bg-soft);
  border: 1px dashed var(--line); border-radius: var(--r-md); padding: 12px 16px;
}
.note code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }

/* 인사말 */
/* 사진과 글 사이, 그리고 이 블록과 아래 문단 사이를 좌측 메뉴 간격에 맞춘다.
   좁은 화면 32px / 넓은 화면 48px — .layout 이 쓰는 값 그대로다.
   페이지 안에서 벌어지는 간격이 한 값으로 모이게 하려는 것. (260821 페리 지시) */
.greeting { display: grid; gap: 24px; margin-bottom: 32px; }
/* 사진 높이를 옆 글 높이에 맞춘다. 사진이 짧아 아래쪽이 비어 보이던 것을 없앴다. (260821 페리 지시)
   원본이 가로로 긴 사진이라 좌우가 잘리는데, 대표 얼굴이 가운데 있어 남는다. */
@media (min-width: 760px) { .greeting { grid-template-columns: 300px 1fr; align-items: stretch; gap: 32px; } }
@media (min-width: 900px) { .greeting { gap: 48px; margin-bottom: 48px; } }
/* figure 는 브라우저 기본으로 좌우 40px 여백을 가진다. 그대로 두면 300px 칸에
   220px 만 들어가 사진이 작아지고 왼쪽이 어긋난다. (260821 발견) */
.greeting__photo { margin: 0; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-1); }
/* 초점을 위쪽에 두어 대표 얼굴이 잘리지 않게 한다. (260821 페리 지시)
   옆 글이 짧아지면 사진도 납작해지는데, 그때 잘려 나가는 쪽은 늘 아래(책상)여야 한다. */
.greeting__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
/* 글이 아주 짧은 경우까지 감안한 최소 높이. 이보다 낮아지면 얼굴이 답답해 보인다. */
.greeting__photo { min-height: 200px; }
/* 좁은 화면에서는 위아래로 놓이므로 늘리지 않고 원본 비율대로 둔다. */
@media (max-width: 759px) { .greeting__photo { min-height: 0; } .greeting__photo img { height: auto; } }
.greeting__title { font-size: clamp(21px, 4vw, 27px); color: var(--navy); margin-bottom: 4px; padding-left: 0; }
.greeting__title::before { display: none; }
.greeting__sub { font-size: 17px; font-weight: 600; color: var(--green); margin-bottom: 18px; }
.greeting__sign { margin-top: 28px; font-size: 17px; font-weight: 700; color: var(--ink); letter-spacing: .3em; }

/* 조직도 */
.org { display: grid; gap: 18px; }
.org__top { display: flex; justify-content: center; }
.org__ceo {
  background: linear-gradient(135deg, #b3a24a, #8d7c22); color: #fff; font-weight: 700;
  padding: 12px 40px; border-radius: var(--r-md); box-shadow: var(--shadow-1);
}
.org__stem { width: 2px; height: 22px; background: var(--line); margin: 0 auto; }
.org__grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .org__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) {
  .org__grid { grid-template-columns: repeat(5, 1fr); position: relative; padding-top: 22px; }
  /* 5칸이 한 줄로 서는 폭에서만 연결선을 그린다 */
  .org__grid::before {
    content: ""; position: absolute; top: 0; left: 10%; right: 10%; height: 2px; background: var(--line);
  }
  .org__unit::before {
    content: ""; position: absolute; top: -22px; width: 2px; height: 22px; background: var(--line);
    left: 50%; transform: translateX(-50%); z-index: 1;
  }
}
.org__unit {
  border: 1px solid var(--line); border-radius: var(--r-md); background: #fff;
  align-self: start; position: relative;
}
.org__name {
  background: var(--green); color: #fff; font-weight: 700; text-align: center;
  padding: 10px 8px; font-size: 15px; margin: 0; border-radius: 7px 7px 0 0;
}
.org__role { background: #eaf3e1; color: var(--ink); text-align: center; padding: 9px 8px; font-size: 14px; font-weight: 600; margin: 0; }
.org__unit > :last-child { border-radius: 0 0 7px 7px; }
.org__role--gray { background: #ededed; color: var(--ink-2); }
.org__tasks { padding: 12px 14px; display: grid; gap: 6px; font-size: 13px; color: var(--ink-2); }
.org__tasks li { padding-left: 12px; position: relative; }
.org__tasks li::before { content: ""; position: absolute; left: 0; top: .6em; width: 4px; height: 4px; background: var(--green); border-radius: 1px; }

/* 연혁 */
.history { display: grid; gap: 0; }
.history__year {
  display: grid; gap: 6px 20px; padding: 22px 0; border-top: 1px solid var(--line);
}
@media (min-width: 700px) { .history__year { grid-template-columns: 120px 1fr; } }
.history__label {
  font-family: var(--font-en); font-size: 26px; font-weight: 800; color: var(--navy); line-height: 1;
}
.history__label span { display: block; font-family: var(--font); font-size: 12px; font-weight: 600; color: var(--green); letter-spacing: .04em; margin-top: 6px; }
.history__items { display: grid; gap: 14px; }
.history__desc strong { display: block; color: var(--ink); font-weight: 600; }
.history__meta { margin: 4px 0 0; font-size: 14px; color: var(--muted); display: grid; gap: 2px; }

/* 갤러리 (인증서 / 설비 / 제품 / 도면) */
.gallery { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.gallery--wide { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
/* 사진 갤러리는 원본 비율이 제각각이라 4:3 프레임에 맞춰 줄을 세운다 (잘라내지 않고 여백 처리) */
.gallery--photo .tile__frame { aspect-ratio: 4 / 3; background: var(--bg-soft); padding: 0; }
/* 썸네일은 칸을 꽉 채운다. 가로로 긴 사진에 위아래 여백이 크게 남던 것을 없앴다. (260821 페리 지시)
   잘려 나가는 부분은 눌러서 여는 팝업에서 온전히 보인다. */
.gallery--photo .tile__frame img { width: 100%; height: 100%; object-fit: cover; }
.tile { display: flex; flex-direction: column; gap: 10px; }
.tile__frame {
  border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: #fff;
  display: grid; place-items: center; padding: 8px;
}
.tile__frame img { width: 100%; }

/* 눌러서 크게 볼 수 있는 사진. button 이므로 기본 모양을 지우고 손가락 커서를 준다. */
.tile__frame--zoom {
  width: 100%; font: inherit; color: inherit; cursor: zoom-in;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.tile__frame--zoom:hover { border-color: var(--navy-soft); box-shadow: var(--shadow-1); }
.tile__frame--zoom:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.tile__cap { font-size: 14px; font-weight: 600; color: var(--ink); padding-left: 16px; position: relative; }
.tile__cap::before {
  content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px;
  background: var(--green); border-radius: 2px;
}
/* 사진이 많아 화면이 길어졌다. 오른쪽에 목차를 세워 원하는 자리로 바로 가게 한다.
   평소에는 짧은 선만 보이고, 마우스를 올리면 목차가 펼쳐진다. (260922 페리 지시 — 노션 방식)
   접힌 상태는 폭이 좁아 본문을 가리지 않는다. 펼친 목차는 그 위에 잠깐 겹쳐 뜬다.
   마우스가 없는 기기(휴대폰·태블릿)에서는 아예 만들지 않는다. */
.toc { display: none; }
@media (min-width: 1180px) and (hover: hover) {
  .toc {
    display: block; position: fixed; right: 20px; top: 50%; transform: translateY(-50%);
    z-index: 30; padding: 10px 6px;
  }
  /* 접힘 — 짧은 선만 */
  .toc__mini { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
  .toc__mini span {
    display: block; width: 16px; height: 2px; border-radius: 1px; background: #c9d0d7;
    transition: width .18s ease, background .18s ease, opacity .18s ease;
  }
  .toc__mini span[data-on] { width: 26px; background: var(--green); }
  .toc:hover .toc__mini, .toc:focus-within .toc__mini { opacity: 0; }

  /* 펼침 — 실제 목차 */
  .toc__full {
    position: absolute; right: 0; top: 50%; transform: translateY(-50%) translateX(6px);
    width: 250px; max-height: 70vh; display: flex; flex-direction: column;
    padding: 12px 6px 12px 12px; border: 1px solid var(--line); border-radius: var(--r-md);
    background: rgba(255, 255, 255, .97); backdrop-filter: blur(8px); box-shadow: var(--shadow-1);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
  }
  .toc:hover .toc__full, .toc:focus-within .toc__full {
    opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(-50%) translateX(0);
  }
  /* 목차가 길어 스크롤될 때도 제목은 위에 남는다 */
  .toc__head {
    position: sticky; top: 0; z-index: 1; flex: none;
    margin: 0 0 8px; padding: 0 6px 8px 8px; border-bottom: 1px solid var(--line);
    background: #fff; font-size: 12px; font-weight: 700; color: var(--navy);
  }
  .toc ul { list-style: none; margin: 0; padding: 0; overflow-y: auto; min-height: 0; }
  .toc__item {
    width: 100%; padding: 5px 8px 5px 10px; border: 0; border-left: 2px solid transparent;
    background: none; font: inherit; font-size: 12.5px; line-height: 1.35; color: var(--muted);
    text-align: left; cursor: pointer; border-radius: 0 var(--r-md) var(--r-md) 0;
    display: flex; align-items: center; gap: 6px;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
  }
  /* 이름이 길면 한 줄로 자른다. 전체 이름은 마우스를 올리면 뜬다(title). */
  .toc__name { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .toc__n { flex: none; font-size: 10.5px; color: #9aa4ae; font-variant-numeric: tabular-nums; }
  .toc__item:hover { color: var(--ink); background: var(--bg-soft); }
  .toc__item:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; }
  .toc__item[aria-current="true"] { color: var(--navy); font-weight: 700; border-left-color: var(--green); }
  .toc__item[aria-current="true"] .toc__n { color: var(--green); }
}
@media (prefers-reduced-motion: reduce) {
  .toc__item, .toc__full, .toc__mini span { transition: none; }
}

.tile__meta { margin: 0; font-size: 13px; color: var(--muted); padding-left: 16px; }
.tile__meta dt { display: inline; font-weight: 600; }
.tile__meta dd { display: inline; margin: 0 0 0 4px; }
.tile__meta div + div::before { content: " · "; color: #b6bec6; }
.tile__meta div { display: inline; }
.btn-pdf {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  background: var(--navy); color: #fff; font-size: 14px; font-weight: 600;
  padding: 9px 16px; border-radius: var(--r-sm); margin-left: 16px;
}
.btn-pdf:hover { background: var(--navy-soft); }
.btn-pdf::before { content: "PDF"; font-family: var(--font-en); font-size: 10px; font-weight: 800; letter-spacing: .06em; background: rgba(255,255,255,.2); padding: 2px 5px; border-radius: 2px; }

/* 표 */
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
/* 5열 표는 좁은 화면에서 2열만 보인다. 나머지가 있다는 것을 알려준다. */
.scroll-hint { display: none; font-size: 13px; color: var(--muted); margin: 0 0 8px; }
.scroll-hint::before { content: "↔ "; color: var(--green); font-weight: 700; }
@media (max-width: 720px) { .scroll-hint { display: block; } }
.data-table { min-width: 620px; font-size: 14px; }
.data-table caption { text-align: left; padding: 14px 16px 0; font-weight: 600; color: var(--muted); font-size: 13px; }
.data-table th, .data-table td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--line-soft); }
.data-table thead th { background: var(--navy); color: #fff; font-weight: 600; font-size: 13px; letter-spacing: .01em; border-bottom: 0; white-space: nowrap; }
.data-table tbody tr:nth-child(even) { background: var(--bg-soft); }
.data-table tbody tr:hover { background: var(--green-pale); }
.data-table td:nth-child(1) { font-weight: 600; color: var(--ink); }
.data-table .num { font-family: var(--font-en); text-align: right; }

/* 오시는길 */
.map-frame {
  border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--bg-soft);
  min-height: 260px; display: grid; place-items: center; text-align: center; padding: 32px 20px;
}
.map-frame p { color: var(--muted); font-size: 14px; margin: 0 0 14px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px; background: var(--green); color: #fff;
  font-weight: 600; font-size: 15px; padding: 11px 22px; border-radius: var(--r-sm);
}
.btn:hover { background: #3f7a0d; }
.btn--ghost { background: #fff; color: var(--navy); border: 1px solid var(--line); }
.btn--ghost:hover { background: var(--bg-soft); border-color: var(--navy); }

.info-table { border-top: 2px solid var(--ink); }
.info-table tr { border-bottom: 1px solid var(--line); }
.info-table th {
  width: 140px; text-align: left; padding: 14px 16px; background: var(--bg-soft);
  font-size: 14px; font-weight: 600; color: var(--ink); vertical-align: top;
}
.info-table td { padding: 14px 16px; font-size: 15px; }
@media (max-width: 560px) {
  .info-table th, .info-table td { display: block; width: auto; }
  .info-table th { padding-bottom: 4px; background: none; color: var(--muted); }
  .info-table td { padding-top: 0; }
}

/* 빈 상태 / 에러 */
.empty {
  border: 1px dashed var(--line); border-radius: var(--r-lg); padding: 56px 24px;
  text-align: center; color: var(--muted); background: var(--bg-soft);
}
.empty h2 { font-size: 18px; margin-bottom: 8px; padding: 0; }
.empty h2::before { display: none; }
.empty p { font-size: 15px; margin-bottom: 20px; }

/* 문의 유도 배너 (Q&A · 인재 채용) — 사진 위에 글자를 얹으므로 어두운 막을 사이에 깐다. */
.invite {
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  background: var(--navy-deep) url("../img/qna-invite.jpg") center 42% / cover no-repeat;
  margin-bottom: 40px;
}
.invite::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12,14,32,.62) 0%, rgba(12,14,32,.44) 100%);
}
/* 인재 채용 쪽은 사진만 갈아 끼운다. 나머지 짜임은 협업 문의와 같다. */
.invite--recruit { background-image: url("../img/recruit-invite.jpg"); }

/* 오시는길 지도. 지도는 읽어야 하는 그림이라 다른 배너와 다루는 법이 다르다.
   - 잘리면 길을 못 찾으므로 원본 비율(3:2)을 그대로 잡아 전체가 보이게 한다
   - 어두운 막은 글자가 놓이는 아래쪽에만 옅게 깐다. 위쪽 도로명과 표시가 묻히면 안 된다
   (260821 페리 지시) */
/* 카드 높이는 인재 채용 배너와 같은 316px 로 맞춘다. (260821 페리 지시)
   3:2 지도를 이 높이에 담으면 위아래가 잘리므로, 회사 표시가 가운데 남도록 위치를 잡았다.
   잘려 나간 범위까지 보려면 아래 버튼으로 네이버 지도를 연다. */
.invite--location {
  background-image: url("../img/location-map.jpg");
  background-position: center 66%;   /* 회사 표시가 글자 위로 오도록 */
  height: 316px;
}
@media (max-width: 640px) { .invite--location { height: 260px; } }
/* 어두운 막을 걷어냈다. 얹을 글자가 없어졌고, 막이 있으면 지도만 어두워진다. (260821 페리 지시) */
.invite--location::before { background: none; }
/* 막이 없어진 대신 버튼에 그림자를 줘 지도 위에 떠 보이게 한다.
   지도의 건물 경계선과 겹쳐도 버튼 테두리가 묻히지 않는다. */
.invite--location .btn { box-shadow: 0 4px 14px rgba(12, 14, 32, .3); }
.invite--location .btn:hover { box-shadow: 0 6px 18px rgba(12, 14, 32, .38); }
/* 글자를 빼고 버튼만 남겼다. 버튼은 바닥에서 띄워 지도 아래쪽 도로명을 덜 가리게 한다. */
.invite--location .invite__body {
  height: 100%; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 24px 20px 76px;
}
@media (max-width: 640px) {
  .invite--location .invite__body { padding: 20px 14px 54px; }
}

.invite__body {
  position: relative; padding: 72px 24px; text-align: center; color: #fff;
}
.invite__title {
  font-size: 26px; color: #fff; margin: 0 0 12px; padding: 0;
  text-shadow: 0 2px 14px rgba(0,0,0,.35);
}
.invite__title::before { display: none; }   /* h2 앞 초록 사각형을 여기서는 쓰지 않는다 */
.invite__desc { font-size: 15px; color: rgba(255,255,255,.9); margin: 0 0 24px; line-height: 1.8; }
.invite__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
/* 두 버튼의 가로·세로를 맞춘다. 글자 수가 달라도 같은 크기로 보이게. (260821 페리 지시)
   테두리를 투명으로 깔아 두는 이유는, 고스트 버튼의 1px 테두리만큼 키가 커지는 것을 막기 위해서다. */
.invite .btn {
  min-width: 170px; justify-content: center; border: 1px solid transparent;
}
/* 어두운 배경 위에서는 흰 바탕 고스트 버튼이 튀므로 테두리형으로 바꾼다. */
.invite .btn--ghost {
  background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.5);
}
.invite .btn--ghost:hover { background: rgba(255,255,255,.24); border-color: #fff; }

@media (max-width: 640px) {
  .invite__body { padding: 40px 18px; }
  .invite__title { font-size: 22px; }
}

.error-page { padding: 96px 0 120px; text-align: center; }
.error-page__code { font-family: var(--font-en); font-size: 76px; font-weight: 800; color: var(--green-pale); line-height: 1; }
.error-page h1 { font-size: 26px; margin: 8px 0 12px; }
.error-page p { color: var(--muted); margin-bottom: 24px; }

/* =========================================================
   Footer
   ========================================================= */
.site-footer { background: var(--bg-soft); border-top: 1px solid var(--line); padding: 36px 0 44px; font-size: 14px; color: var(--muted); }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 20px; }
.site-footer__links a { font-weight: 600; color: var(--ink-2); }
.site-footer__links a::before { content: "+"; color: var(--green); margin-right: 6px; font-weight: 700; }
.site-footer__links a:hover { color: var(--green); }
.site-footer__grid { display: grid; gap: 18px; }
@media (min-width: 860px) { .site-footer__grid { grid-template-columns: 1fr auto; align-items: end; } }
.site-footer dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 10px; margin: 0 0 12px; }
@media (min-width: 620px) { .site-footer dl { grid-template-columns: repeat(2, max-content 1fr); gap: 4px 12px; } }
.site-footer dt { font-weight: 600; color: var(--ink-2); }
.site-footer dd { margin: 0; }
.site-footer .copy { font-family: var(--font-en); font-size: 12px; letter-spacing: .02em; color: #98a0a9; margin: 0; }

/* 인쇄 */
@media print {
  .site-header, .lnb, .site-footer__links, .btn, .btn-pdf { display: none !important; }
  body { font-size: 12pt; }
  .layout { display: block; padding: 0; }
}

/* =========================================================
   검수용 진입 게이트 (assets/js/gate.js)
   ⚠️ 실서버 이관 시 이 블록과 gate.js, build.py 의 삽입부를 함께 걷는다.
   ========================================================= */

/* 잠긴 동안 본문을 통째로 숨긴다. gate.js 가 <head> 에서 클래스를 붙이므로
   body 가 그려지기 전에 규칙이 걸려 내용이 비치지 않는다. */
html.nh-locked { overflow: hidden; }
html.nh-locked body > *:not(.nh-gate) { display: none !important; }

.nh-gate {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
  background: var(--bg-soft);
}

.nh-gate__box {
  width: 100%;
  max-width: 340px;
  padding: 32px 24px 28px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  text-align: center;
}

.nh-gate__logo { height: 36px; width: auto; margin: 0 0 20px; }

.nh-gate__title {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -.01em;
}

.nh-gate__desc { margin: 0 0 20px; font-size: 14px; color: var(--muted); }

/* 라벨은 화면에서 감추되 스크린리더에는 남긴다. */
.nh-gate__label {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.nh-gate__input {
  width: 100%;
  height: 52px;
  padding: 0 14px;
  font-family: var(--font-en);
  font-size: 22px;
  letter-spacing: .5em;
  text-indent: .5em;          /* 자간이 마지막 글자 뒤에도 붙어 왼쪽으로 치우치는 것 상쇄 */
  text-align: center;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.nh-gate__input:focus {
  outline: none;
  border-color: var(--navy-soft);
  box-shadow: 0 0 0 3px rgba(74, 73, 160, .15);
}

.nh-gate.is-error .nh-gate__input {
  border-color: #c0392b;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, .12);
  animation: nh-gate-shake .3s ease;
}
@keyframes nh-gate-shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-5px); }
  75%      { transform: translateX(5px); }
}
@media (prefers-reduced-motion: reduce) {
  .nh-gate.is-error .nh-gate__input { animation: none; }
}

.nh-gate__error {
  margin: 10px 0 0;
  font-size: 13px;
  color: #c0392b;
}
.nh-gate__error[hidden] { display: none; }

.nh-gate__submit {
  width: 100%;
  height: 48px;
  margin-top: 16px;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: var(--navy);
  border: 0;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background .15s ease;
}
.nh-gate__submit:hover { background: var(--navy-deep); }
.nh-gate__submit:focus-visible {
  outline: 2px solid var(--navy-soft);
  outline-offset: 2px;
}

/* =========================================================
   사진 크게 보기 (라이트박스) — assets/js/lightbox.js
   ========================================================= */
.lb-open { overflow: hidden; }            /* 팝업이 떠 있는 동안 뒤 화면은 안 움직인다 */

.lb {
  /* 헤더가 z-index 100 으로 고정돼 있어 그보다 위로 올린다. */
  position: fixed; inset: 0; z-index: 200;
  background: rgba(8, 10, 20, .92);
  display: grid; place-items: center;
  padding: 56px 20px 24px;
}
.lb[hidden] { display: none; }

.lb__figure {
  margin: 0; display: flex; flex-direction: column; gap: 16px;
  width: 100%; max-height: 100%;
}

/* [버튼자리] [사진칸] [버튼자리] 한 줄.
   사진칸은 폭이 고정이고, 버튼자리가 남는 공간을 반씩 나눠 가진다.
   그래서 사진이 가로로 길든 세로로 길든 버튼은 같은 자리에 머문다. (260821 페리 지시)
   고정폭 1040px 은 가장 가로로 긴 사진(1600Ton SCRAP SHEAR)이 꽉 차는 값이다. */
.lb__stage { display: flex; align-items: center; justify-content: center; min-height: 0; }
.lb__side { flex: 1 1 0; display: grid; place-items: center; }

/* 140px = 좌우 버튼자리 70px 씩. 화면이 좁으면 사진칸이 먼저 줄어든다. */
.lb__frame {
  flex: 0 0 auto; width: min(1040px, calc(100% - 140px));
  display: grid; place-items: center; min-height: 0;
}
.lb__img {
  display: block; max-width: 100%;
  max-height: calc(100vh - 220px); object-fit: contain;
  border-radius: var(--r-md); background: #fff;
}

.lb__cap { color: #fff; text-align: center; max-width: 46em; margin: 0 auto; }
.lb__count { margin: 0 0 6px; font-size: 13px; color: rgba(255,255,255,.62); letter-spacing: .04em; }
.lb__title { margin: 0 0 6px; font-size: 18px; font-weight: 700; line-height: 1.4; color: #fff; }
.lb__desc { margin: 0; font-size: 14px; color: rgba(255,255,255,.78); line-height: 1.6; }

/* 닫기 · 앞뒤 이동 */
.lb__close, .lb__nav {
  position: absolute; z-index: 1; cursor: pointer; color: #fff;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px; display: grid; place-items: center;
  transition: background-color .18s ease;
}
.lb__close:hover, .lb__nav:hover { background: rgba(255,255,255,.26); }
.lb__close:focus-visible, .lb__nav:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.lb__close { position: absolute; top: 14px; right: 16px; width: 44px; height: 44px; }
/* 앞뒤 버튼은 .lb__side 안에서 가운데 정렬된다. 위치를 따로 잡지 않는다. */
.lb__nav { position: static; width: 48px; height: 48px; }
.lb__nav[hidden] { display: none; }

/* 아이콘은 SVG 로 그린다. place-items:center 가 정확히 가운데 놓는다. */
.lb__icon {
  width: 22px; height: 22px; display: block;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.lb__close .lb__icon { width: 20px; height: 20px; }

@media (max-width: 640px) {
  .lb { padding: 52px 8px 20px; }
  .lb__img { max-height: calc(100vh - 240px); }
  /* 좁은 화면에서는 버튼자리를 버튼 크기만큼만 남긴다. 사진이 조금 좁아질 뿐 겹치지는 않는다. */
  .lb__frame { width: calc(100% - 92px); }
  .lb__nav { width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .lb__close, .lb__nav, .tile__frame--zoom { transition: none; }
}