/* ══════════════════════════════════════════════════════════════
   해안AI간호교육연구소 — 원페이지 랜딩 (rev4)
   색·간격·글자 크기는 전부 아래 :root 한 곳에서 바꿉니다.
   ══════════════════════════════════════════════════════════════ */

:root{
  /* ── 브랜드 색 7종 ─────────────────────────────── */
  --navy:      #031D44;  /* 주색: 헤더 글자, 제목, 버튼 */
  --navy-2:    #04395E;  /* 보조색 */
  --gold:      #DAB785;  /* 포인트 원색 — 네이비 배경 위 선·면 전용 */
  --bg:        #E3E9F6;  /* 기본 배경 (옅은 네이비) — 이보다 더 진하게 내리지 마세요 */
  --surface:   #FFFFFF;  /* 카드·콘텐츠 면 */
  --ink:       #1F2937;  /* 본문 글자 */
  --muted:     #5C6775;  /* 설명·캡션 */

  /* ── 대비 확보용 파생 색 (건드리지 마세요) ─────────── */
  --gold-ink:  #7D633D;  /* 밝은 배경 위 '골드 느낌' 글자 */
  --gold-mid:  #C89A57;  /* 밝은 배경 위 장식 골드 선·바 (글자에는 쓰지 않습니다) */
  --gold-soft: #FBF8F2;  /* 골드 계열 최연한 면 — 더 어둡게 바꾸면 글자가 안 읽힙니다 */
  --ink-invert:        #FFFFFF;
  --ink-on-navy-muted: #B8C6D6;

  /* ── 괘선 ─────────────────────────────────────── */
  --line:        #CDD5E7;
  --line-strong: #B9C5DD;
  --line-on-navy:#1E3A5C;

  /* ── 상태 ─────────────────────────────────────── */
  --focus:        #04395E;
  --focus-invert: #DAB785;

  /* ── 그림자 ───────────────────────────────────── */
  --shadow-card:  0 1px 2px rgba(3,29,68,.04), 0 6px 16px rgba(3,29,68,.05);
  --shadow-hover: 0 2px 4px rgba(3,29,68,.05), 0 12px 28px rgba(3,29,68,.08);
  --shadow-head:  0 1px 0 var(--line), 0 4px 16px rgba(3,29,68,.05);

  /* ── 모서리 둥글기 ─────────────────────────────── */
  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 10px;
  --r-pill: 999px;

  /* ── 레이아웃 ─────────────────────────────────── */
  --wrap: 1200px;
  --gutter: 1.5rem;
  --header-h: 72px;
  --sec-pad: clamp(4.5rem, 7vw, 7rem);

  /* ── 글꼴 ─────────────────────────────────────── */
  --font: "Pretendard Variable", "Pretendard", "Noto Sans KR",
          -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
          "Malgun Gothic", "맑은 고딕", system-ui, sans-serif;

  /* ── 글자 크기 ────────────────────────────────── */
  --fs-hero:  clamp(2.125rem, 5.2vw, 3.75rem);
  --fs-h2:    clamp(1.625rem, 3.4vw, 2.5rem);
  --fs-h3:    1.25rem;
  --fs-h4:    1.125rem;
  --fs-lead:  clamp(1.0625rem, 1.5vw, 1.25rem);
  --fs-body:  1rem;
  --fs-sm:    0.9375rem;
  --fs-cap:   0.875rem;
  --fs-label: 0.8125rem;
  --fs-micro: 0.8125rem;
}

/* ══════════════ 리셋 ══════════════ */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
body{
  font-family:var(--font);
  font-size:var(--fs-body);
  line-height:1.8;
  color:var(--ink);
  background:var(--bg);
  word-break:keep-all;
  overflow-wrap:break-word;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
ul{ list-style:none; padding:0; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; border-radius:4px; }
body.is-locked{ overflow:hidden; }

.wrap{
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:300;
  background:var(--navy); color:var(--ink-invert);
  padding:.75rem 1.25rem; border-radius:0 0 var(--r-sm) 0;
  font-size:var(--fs-sm); font-weight:600; text-decoration:none;
}
.skip:focus{ left:0; }

/* ══════════════ 섹션 공통 ══════════════ */
.sec{ padding:var(--sec-pad) 0; background:var(--surface); }
.sec--bg{ background:var(--bg); }
.sec--navy{ background:var(--navy); }
section[id]{ scroll-margin-top:calc(var(--header-h) + 16px); }

.sec-head{ margin-bottom:clamp(2rem, 4vw, 3rem); }
.sec-head__label{
  display:flex; align-items:center; gap:.75rem;
  font-size:var(--fs-label); font-weight:700; line-height:1.4;
  letter-spacing:.14em; color:var(--gold-ink);
  margin-bottom:.75rem;
}
.sec-head__label::before{      /* 골드 ① — 라벨 앞 대시 */
  content:""; width:24px; height:2px; background:var(--gold-mid); flex:none;
}
.sec-head h2{
  font-size:var(--fs-h2); font-weight:700; line-height:1.32;
  letter-spacing:-.02em; color:var(--navy);
}
.sec-head__lead{
  margin-top:1rem; max-width:62ch;
  font-size:var(--fs-lead); font-weight:500; line-height:1.75;
  color:var(--muted);
}
/* 네이비 배경 섹션 — 골드는 원색을 씁니다(어두운 면 위에서 가장 선명합니다) */
.sec-head--invert .sec-head__label{ color:var(--gold); }
.sec-head--invert h2{ color:var(--ink-invert); }
.sec-head--invert .sec-head__lead{ color:var(--ink-on-navy-muted); max-width:68ch; }
.sec-head__label--invert{ color:var(--gold); }
.sec--navy .sec-head__label::before{ background:var(--gold); }
/* 센터 정렬 (영상 섹션만) */
.sec-head--center{ text-align:center; }
.sec-head--center .sec-head__label{ justify-content:center; }
.sec-head--center .sec-head__label::before{ display:none; }
.sec-head--center .sec-head__label{
  flex-direction:column; gap:.625rem;
}
.sec-head--center .sec-head__label::after{
  content:""; order:-1; width:24px; height:2px; background:var(--gold-mid);
}
.sec-head--center .sec-head__lead{ margin-inline:auto; }

/* ══════════════ 버튼 ══════════════ */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:46px; padding:.8125rem 1.5rem;
  border-radius:var(--r-pill);
  font-size:var(--fs-sm); font-weight:600; line-height:1.2;
  text-decoration:none; text-align:center;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn:active{ transform:translateY(1px); }
.btn--primary{ background:var(--navy); color:var(--ink-invert); }
.btn--primary:hover{ background:var(--navy-2); color:var(--ink-invert); }
.btn--outline{ background:transparent; color:var(--navy); border:1.5px solid var(--navy); }
.btn--outline:hover{ background:var(--gold-soft); }
.btn--on-navy{ background:transparent; color:var(--ink-invert); border:1.5px solid var(--gold); } /* 골드 ⑦ */
.btn--on-navy:hover{ background:var(--navy-2); }
.btn--ghost-navy{ background:var(--ink-invert); color:var(--navy); }
.btn--ghost-navy:hover{ background:var(--gold-soft); }
.btn__icon{ flex:none; margin-left:.125rem; }
.btn--sm{ min-height:42px; padding:.625rem 1.125rem; font-size:var(--fs-cap); }
/* 네이비 배경 위에서는 포커스 외곽선을 골드로 바꿔야 보입니다 */
.sec--navy .btn:focus-visible,
.sec--navy a:focus-visible,
.ftr .btn:focus-visible{ outline-color:var(--focus-invert); }

/* ══════════════ 액자 (흰 배경 이미지의 경계) ══════════════ */
.frame{
  display:block;
  background:#FFF;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:.75rem;
}
.frame > img{ width:100%; height:100%; object-fit:contain; }

/* ══════════════ SECTION 01. 헤더 ══════════════ */
/* ⚠ .hdr 에 흐림 효과나 변형 효과(반투명 유리 헤더 등)를 추가하지 마세요.
   추가하면 모바일 메뉴와 라이트박스가 헤더 높이 안에 갇혀 잘려 보입니다. */
.hdr{
  position:sticky; top:0; z-index:100;
  background:var(--surface);
  border-bottom:1px solid var(--line);
}
.hdr.is-stuck{ box-shadow:var(--shadow-head); }
.hdr__in{
  height:var(--header-h);
  display:flex; align-items:center; gap:1.5rem;
}
.hdr__brand{
  display:flex; align-items:center; gap:.625rem;
  text-decoration:none; flex:none;
}
.hdr__brand img{ width:36px; height:36px; border-radius:50%; }
.hdr__word{
  font-size:1.0625rem; font-weight:700; color:var(--navy);
  letter-spacing:-.01em; white-space:nowrap;
}
.hdr__nav{
  display:flex; align-items:center; gap:1.5rem;
  margin-left:auto;
}
.hdr__nav a{
  position:relative;
  padding:.5rem 0;
  font-size:var(--fs-sm); font-weight:500; color:var(--ink);
  text-decoration:none; white-space:nowrap;
  transition:color .2s ease;
}
.hdr__nav a:hover{ color:var(--navy-2); }
.hdr__nav a.is-active{ color:var(--navy); font-weight:700; }
.hdr__nav a.is-active::after{      /* 골드 ② */
  content:""; position:absolute; left:0; right:0; bottom:-2px;
  height:2px; background:var(--gold-mid);
}
.hdr__cta{ flex:none; min-height:42px; padding:.625rem 1.25rem; }
.hdr__burger{
  display:none;
  width:44px; height:44px; margin-left:auto;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.hdr__burger span{
  display:block; width:22px; height:2px; background:var(--navy); border-radius:2px;
}

/* ══════════════ SECTION 02. Hero ══════════════ */
/* 히어로는 흰 면입니다. 위쪽 경계는 헤더의 1px 아래 괘선(.hdr)이 만듭니다 */
/* ══════════════ SECTION 02. 첫 화면 (사진 배경 + 어두운 막) ══════════════ */
.hero{
  position:relative; isolation:isolate;
  display:flex; align-items:flex-end;
  min-height:clamp(420px, 62vh, 620px);
  padding:clamp(3.5rem, 8vw, 7rem) 0 clamp(3rem, 6vw, 5rem);
  background:var(--navy);
  overflow:hidden;
}
.hero__bg{ position:absolute; inset:0; z-index:-1; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; display:block; }
/* 어두운 막 — 사진 위 글자의 대비를 만듭니다. 사진을 밝은 것으로 바꾸면 값을 올리세요 */
.hero__veil{
  position:absolute; inset:0;
  background:linear-gradient(100deg,
    rgba(3,29,68,.94) 0%, rgba(3,29,68,.88) 42%, rgba(3,29,68,.68) 100%);
}
.hero__inner{
  position:relative;
  /* flex 자식은 폭이 콘텐츠 크기로 줄어듭니다.
     100% 를 주지 않으면 .wrap 의 margin:auto 가 글을 화면 가운데로 밀어
     아래 섹션들과 좌측 정렬선이 어긋납니다 */
  width:100%;
}
.hero__title{
  font-size:var(--fs-hero); font-weight:800; line-height:1.22;
  letter-spacing:-.03em; color:var(--ink-invert);
}
.hero__sub{
  margin-top:1.5rem; max-width:34ch;
  font-size:var(--fs-lead); font-weight:500; line-height:1.75; color:var(--ink);
  color:var(--ink-on-navy-muted);
}
.hero__sub strong{ color:var(--ink-invert); font-weight:600; }
.hero__stmt{
  display:flex; align-items:center; gap:.75rem;
  margin-top:1.5rem;
  font-size:var(--fs-cap); font-weight:700; letter-spacing:.04em;
  color:var(--gold);
}
.hero__stmt::before{
  content:""; width:28px; height:1px; background:var(--line-strong); flex:none;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem; }


/* ══════════════ 안내 블록 (첫 화면 아래 목차) ══════════════ */
.quick{ background:var(--surface); padding-bottom:clamp(2.5rem, 5vw, 4rem); }
.quick__grid{
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.quick__item{
  display:flex; flex-direction:column; gap:.375rem;
  padding:1.5rem 1.5rem 1.5rem 0;
  text-decoration:none;
  border-right:1px solid var(--line);
  transition:background .2s ease;
}
.quick__item:last-child{ border-right:0; }
.quick__item + .quick__item{ padding-left:1.5rem; }
.quick__item:hover{ background:var(--gold-soft); }
.quick__label{
  font-size:var(--fs-h4); font-weight:700; color:var(--navy);
  display:flex; align-items:center; gap:.5rem;
}
.quick__label::after{
  content:"→"; color:var(--gold-ink); font-weight:400;
  transition:transform .2s ease;
}
.quick__item:hover .quick__label::after{ transform:translateX(3px); }
.quick__desc{ font-size:var(--fs-cap); color:var(--muted); }

/* ══════════════ SECTION 03. About ══════════════ */
.about__grid{
  display:grid;
  grid-template-columns:340px minmax(0, 1fr);
  gap:clamp(1.75rem, 3.5vw, 3rem);
  align-items:start;
}
/* 글 두 덩어리를 하나로 묶습니다.
   각각을 격자 행으로 두면 옆 사진 높이만큼 행이 늘어나 사이가 크게 벌어집니다 */
.about__text{ display:flex; flex-direction:column; gap:1.5rem; }
.about__key p{
  font-size:var(--fs-h3); font-weight:700; line-height:1.6; color:var(--navy);
  padding-top:1.25rem;
  border-top:2px solid var(--line-strong);
  max-width:28ch;
}
/* 연구소 마스코트 — 흰 배경 그림이라 흰 액자에 담아 옅은 배경과 경계를 만듭니다 */
.mascot{
  max-width:100%;
  background:#FFF;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:1.25rem;
}
.mascot img{
  display:block; width:100%; height:auto;
  max-width:100%; margin-inline:auto;
}

.about__body p{ max-width:none; }
.about__body p + p{ margin-top:1.25rem; }

/* 미래 간호교육 밴드 — 소개 섹션 안에 들어가는 어두운 구획입니다.
   섹션이 아니라 안쪽 블록이므로 좌우 여백을 직접 만듭니다 */
.band-navy{
  background:var(--navy);
  margin-top:clamp(3rem, 5vw, 4.5rem);
  padding:clamp(3rem, 5vw, 4.5rem) 0;
}

.about__media{
  border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; background:#FFF;
}
.about__media img{
  display:block; width:100%; height:auto;
  aspect-ratio:1/1; object-fit:cover; object-position:center center;
}

.emph{                                  /* 골드 ④ */
  margin-top:clamp(2.5rem, 4vw, 3.5rem);
  padding:1.5rem 1.75rem;
  background:var(--gold-soft);
  border-left:4px solid var(--gold-mid);
  border-radius:0 var(--r-md) var(--r-md) 0;
  font-size:var(--fs-h3); font-weight:700; letter-spacing:.02em;
  color:var(--gold-ink);
}

/* ══════════════ SECTION 04. 교육 분야 (괘선 그리드) ══════════════ */
.svc{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:0;
  border-top:1px solid var(--line);
}
.svc__cell{
  padding:2rem 1.75rem;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  transition:background-color .2s ease;
}
.svc__cell:nth-child(3n){ border-right:0; }
.svc__cell:hover{ background:var(--gold-soft); }
.svc__no{
  font-size:var(--fs-h3); font-weight:800; line-height:1.2;
  color:var(--gold-ink); font-variant-numeric:tabular-nums;
}
.svc__no::after{                        /* 골드 ⑤ */
  content:""; display:block; width:20px; height:2px;
  background:var(--gold-mid); margin:.625rem 0 1rem;
}
.svc__cell h3{
  font-size:var(--fs-h4); font-weight:700; line-height:1.5;
  letter-spacing:-.01em; color:var(--navy);
  margin-bottom:1rem;
}
.svc__cell li{
  position:relative; padding-left:1rem;
  font-size:var(--fs-sm); font-weight:500; line-height:1.7; color:var(--ink);
}
.svc__cell li + li{ margin-top:.625rem; }
.svc__cell li::before{
  content:""; position:absolute; left:0; top:.65em;
  width:5px; height:5px; background:var(--navy-2);
}

/* ══════════════ SECTION 05. 갤러리 ══════════════ */
.gal-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1.5rem;
}
.gal{
  display:flex; flex-direction:column; text-align:left;
  background:var(--surface);
  /* 이 섹션은 배경이 흰색이라 카드 테두리를 한 단계 진한 괘선으로 씁니다.
     --line 으로 낮추면 카드 경계가 배경에 묻힙니다 */
  border:1px solid var(--line-strong);
  border-radius:var(--r-lg);
  overflow:hidden;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
  box-shadow:var(--shadow-card);
}
.gal:hover{
  border-color:var(--gold-mid);
  box-shadow:var(--shadow-hover);
  transform:translateY(-2px);
}
.gal__frame{
  position:relative; display:block;
  /* min-height:0 이 없으면 세로로 긴 원본일수록 액자가 늘어나 카드마다 제목 높이가 어긋납니다 */
  aspect-ratio:3/4; min-height:0;
  background:#FFF; padding:.75rem;
  border-bottom:1px solid var(--line);
}
.gal__frame img{ width:100%; height:100%; object-fit:contain; }
.gal__zoom{
  position:absolute; top:.75rem; right:.75rem;
  width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.92);
  border:1px solid var(--line);
  color:var(--navy-2);
  opacity:.75; transition:opacity .2s ease;
}
.gal:hover .gal__zoom, .gal:focus-visible .gal__zoom{ opacity:1; }
.gal__meta{ display:block; padding:1.125rem 1.25rem 1.375rem; }
.gal__title{
  display:block;
  font-size:var(--fs-h4); font-weight:700; line-height:1.5; color:var(--navy);
}
.gal__cat{
  display:block; margin-top:.25rem;
  font-size:var(--fs-cap); font-weight:400; line-height:1.65; color:var(--muted);
}
.gal-note__swipe{ display:none; }
.gal-note{
  margin-top:1.25rem;
  font-size:var(--fs-cap); color:var(--muted);
}

/* ══════════════ 배너형 캐러셀 (좁은 화면 전용) ══════════════
   넓은 화면에서는 화살표·점이 숨겨지고 안쪽 격자가 그대로 보입니다.
   좁은 화면에서만 한 장씩 넘어갑니다 (JS: main.js 의 7번 항목) */
.carousel{ position:relative; }
.carousel__viewport{ position:relative; }
.carousel__nav,
.carousel__dots{ display:none; }

/* ══════════════ SECTION 06. 미래 간호교육 ══════════════ */
.future__grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:1.5rem;
}
.future__item .lb-open{
  display:block; width:100%; padding:0;
  border-radius:var(--r-md);
  transition:box-shadow .2s ease, transform .2s ease;
}
.future__item .lb-open:hover{ transform:translateY(-2px); box-shadow:var(--shadow-hover); }
.future__item .frame{ padding:.75rem; }
.future__item .frame img{ aspect-ratio:3/2; }
.future__item figcaption{
  margin-top:.75rem;
  font-size:var(--fs-cap); color:var(--ink-on-navy-muted);
}
.sec--navy .lb-open:focus-visible{ outline-color:var(--focus-invert); }

.chips{
  display:flex; flex-wrap:wrap; align-items:center; gap:1.5rem;
  margin-top:clamp(2rem, 4vw, 2.75rem);
}
.chips li{
  position:relative;
  padding:.5rem 1.125rem;
  border:1px solid var(--line-on-navy); border-radius:var(--r-pill);
  font-size:var(--fs-sm); font-weight:600; color:var(--ink-invert);
}
.chips li + li::before{        /* 칩 사이 간격 안에 놓이는 + 기호 (장식) */
  content:"+"; position:absolute; left:-1.5rem; top:0; bottom:0;
  width:1.5rem; display:flex; align-items:center; justify-content:center;
  color:var(--gold);
}
.chips--sm{ gap:.75rem; }
.chips--sm li{ padding:.4375rem .9375rem; font-size:var(--fs-cap); font-weight:500; }
.chips--sm li + li::before{ content:none; }

/* ══════════════ SECTION 07. 영상 ══════════════ */
.subsec{ margin-top:clamp(3.5rem, 6vw, 5.5rem); }
.subsec .sec-head{ margin-bottom:clamp(1.75rem, 3vw, 2.5rem); }

/* 교육 영상 목록 — 포스터 갤러리와 같은 3열 격자입니다.
   가운데로 모으면 섹션 제목(좌측 정렬)과 축이 어긋나 불안정해 보입니다 */
.video-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(1rem, 2vw, 1.5rem);
  margin-top:clamp(1.75rem, 3.5vw, 2.75rem);
  text-align:left;
}
.video-cell{
  background:#FFF; border:1px solid var(--line-strong);
  border-radius:var(--r-lg); padding:.75rem;
  box-shadow:var(--shadow-card);
}
.video-cell video{
  /* 영상은 480x720 세로형입니다. 썸네일은 아래 100px 여백을 더한 480x820.
     위쪽 정렬이라 아래 여백이 남고, 재생 컨트롤이 그 여백에 앉아 자막을 가리지 않습니다 */
  width:100%; aspect-ratio:24/41;
  object-fit:contain; object-position:center top;
  border-radius:var(--r-md); background:#000; display:block;
  color:var(--ink-invert);
}
.video-cell figcaption{
  margin-top:.6875rem; text-align:center;
  font-size:var(--fs-sm); font-weight:700; color:var(--navy);
}

/* 영상 다음에 오는 안내 칸 — 영상이 아니라는 것이 드러나도록 남색 면으로 둡니다 */
.video-note{
  display:flex; flex-direction:column;
  /* 내용이 옆 영상 칸보다 짧으므로 세로 가운데로 모읍니다.
     위로 붙이면 아래쪽이 크게 비어 덜 만든 칸처럼 보입니다 */
  justify-content:center;
  background:var(--navy); border-color:var(--navy);
  padding:clamp(1.75rem, 2.5vw, 2.25rem);
}
.video-note__label{
  font-size:var(--fs-label); font-weight:700; letter-spacing:.14em;
  color:var(--gold);
  margin-bottom:.875rem;
}
.video-note__title{
  font-size:var(--fs-h3); font-weight:700; line-height:1.4;
  color:var(--ink-invert);
  margin-bottom:1rem;
}
.video-note__body{
  font-size:var(--fs-sm); line-height:1.75;
  color:var(--ink-on-navy-muted);
}
.video-note__credit{
  /* 본문의 연장이므로 바로 아래에 붙입니다 */
  margin-top:1.25rem; padding-top:1.25rem;
  font-size:var(--fs-cap); line-height:1.7;
  color:var(--ink-on-navy-muted);
  border-top:1px solid var(--line-on-navy);
}
.video-note__cta{ margin-top:1.5rem; align-self:flex-start; }


/* ══════════════ SECTION 08. 주요 저서 ══════════════ */
.pub__grid{
  display:grid; grid-template-columns:5fr 7fr;
  gap:clamp(2rem, 4vw, 3.5rem); align-items:start;
}
.pub__media{ position:sticky; top:calc(var(--header-h) + 2rem); }
.pub__frame{ display:block; }
.pub__frame img{ aspect-ratio:577/596; }
.pub__media figcaption{
  margin-top:.75rem; font-size:var(--fs-cap); color:var(--muted);
}
.pub__group{
  font-size:var(--fs-h3); font-weight:700; color:var(--navy);
  padding-bottom:.75rem; margin-bottom:.5rem;
  border-bottom:1px solid var(--line-strong);
}
.pub__group--gap{ margin-top:2.5rem; }
.pub-row{
  display:flex; align-items:baseline; gap:.5rem;
  padding:1.125rem 0;
  border-bottom:1px solid var(--line);
}
.pub-row:last-child{ border-bottom:0; }
.pub-row__no{
  flex:none; width:2.25rem;
  font-size:var(--fs-cap); font-weight:700; color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.pub-row__title{
  font-size:var(--fs-h4); font-weight:600; line-height:1.55;
  color:var(--navy); word-break:keep-all;
}
.pub-row--paper{                        /* 골드 ⑥ */
  display:block;
  border-left:3px solid var(--gold-mid);
  border-bottom:0;
  background:var(--gold-soft);
  border-radius:0 var(--r-md) var(--r-md) 0;
  padding:1.25rem 1.5rem;
}
.pub-row__sub{ margin-top:.5rem; font-size:var(--fs-sm); color:var(--ink); }
.pub-row__meta{
  margin-top:.375rem;
  font-size:var(--fs-cap); color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.pub-row__go{
  display:inline; color:var(--navy);
  /* 평소에는 밑줄 없이 두고, 링크라는 신호는 뒤의 화살표가 담당합니다.
     굵은 글씨 + 겹낫표 + 밑줄이 겹치면 목록이 산만해집니다 */
  text-decoration:none;
}
.pub-row__go:hover{
  color:var(--navy-2);
  text-decoration:underline;
  text-decoration-color:var(--navy-2);
  text-underline-offset:4px;
}
.pub-row__ext{
  margin-left:.375rem; vertical-align:baseline;
  color:var(--gold-ink); flex:none;
}
.pub-row__link{
  display:inline-flex; align-items:center; gap:.3125rem;
  margin-top:.75rem; min-height:44px;
  font-size:var(--fs-cap); font-weight:700;
  color:var(--gold-ink); text-decoration:underline; text-underline-offset:3px;
}

/* ══════════════ SECTION 09. 대표 소개 ══════════════ */
/* 이 섹션만 제목과 소개를 좌우 2단으로 놓습니다 */
#director .sec-head__label{ margin-bottom:clamp(1.75rem, 3vw, 2.5rem); }
.dir-head{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline;
  gap:2rem;
  padding-bottom:1.25rem;
  border-bottom:1px solid var(--line);
}
.dir-head__name{
  font-size:var(--fs-h2); font-weight:700; line-height:1.32;
  letter-spacing:-.02em; color:var(--navy);
}
.dir-head__role{
  font-size:var(--fs-sm); color:var(--muted); text-align:right;
}

.dir__grid{
  display:grid;
  /* [마스코트 | 오른쪽 전체] — 첫 열을 고정폭으로 둡니다.
     auto 로 두면 남는 공간을 그 열이 흡수합니다 */
  grid-template-columns:320px minmax(0, 1fr);
  gap:clamp(2rem, 3.5vw, 3rem);
  align-items:start;
}
/* 오른쪽: 이름 → 구분선 → 학력·경력 / 주요 활동 두 칸 */
.dir__cols{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:clamp(2rem, 3.5vw, 3rem);
  margin-top:clamp(1.75rem, 3vw, 2.5rem);
  align-items:start;
}
.dir__col + .dir__col{
  border-left:1px solid var(--line);
  padding-left:clamp(2rem, 4vw, 3.5rem);
}
.dir__h{
  font-size:var(--fs-h4); font-weight:700; color:var(--navy);
  margin-bottom:1.25rem;
}
.dir__time{
  position:relative; padding-left:1.25rem;
  border-left:2px solid var(--line-strong);
}
.dir__time li{
  position:relative;
  font-size:var(--fs-sm); line-height:1.7; color:var(--ink);
}
.dir__time li + li{ margin-top:.875rem; }
.dir__time li::before{
  content:""; position:absolute; left:calc(-1.25rem - 4.5px); top:.6em;
  width:7px; height:7px; border-radius:50%; background:var(--navy-2);
}
.dir__time li.is-now{ font-weight:600; color:var(--navy); }
.dir__acts li{
  padding:.625rem 0;
  border-bottom:1px solid var(--line);
  font-size:var(--fs-sm); color:var(--ink);
}
.dir__acts li:last-child{ border-bottom:0; }

/* ══════════════ SECTION 10. Contact ══════════════ */
.contact__grid{
  display:grid; grid-template-columns:7fr 5fr;
  gap:clamp(2rem, 4vw, 4rem); align-items:center;
}
.contact__copy{
  margin-top:.75rem;
  font-size:clamp(1.75rem, 3.2vw, 2.5rem); font-weight:700; line-height:1.4;
  letter-spacing:-.02em; color:var(--ink-invert);
}
.contact__grid .chips{ margin-top:1.75rem; }
.contact__info{
  display:grid; grid-template-columns:4rem 1fr;
  gap:.5rem 1rem; align-items:baseline;
  margin-top:2rem;
}
.contact__info dt{
  font-size:var(--fs-cap); font-weight:700; color:var(--gold);
}
.contact__mail{
  font-size:var(--fs-lead); font-weight:700; color:var(--ink-invert);
  overflow-wrap:anywhere;
}
/* 블로그 주소는 위의 이메일 주소와 같은 크기·굵기·색으로 맞추고,
   링크라는 것이 보이도록 밑줄만 더합니다 */
.contact__blog{
  font-size:var(--fs-lead); font-weight:700; color:var(--ink-invert);
  overflow-wrap:anywhere;
  text-decoration:underline; text-underline-offset:4px;
  text-decoration-thickness:1px;
}
.contact__blog:hover{ text-decoration-thickness:2px; }
.contact__cta{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem; }

.qr{
  background:#FFF; border-radius:var(--r-lg);
  border-top:3px solid var(--gold-mid);   /* 골드 ⑦ QR 카드(흰 면) */
  padding:1.5rem; text-align:center;
  justify-self:center; width:100%; max-width:300px;
}
.qr__img{
  width:clamp(160px, 100%, 200px); aspect-ratio:1/1;
  margin-inline:auto;
}
.qr__name{
  margin-top:1rem;
  font-size:var(--fs-cap); font-weight:700; color:var(--navy);
}
.qr__cap{ font-size:var(--fs-cap); color:var(--muted); }

/* ══════════════ SECTION 11. 푸터 ══════════════ */
.ftr{
  background:var(--navy);
  border-top:2px solid var(--gold);       /* 골드 ⑧ */
  padding:3.5rem 0 2.25rem;
}
.ftr__top{
  display:flex; flex-wrap:wrap; justify-content:space-between;
  gap:2rem; padding-bottom:2rem;
  border-bottom:1px solid var(--line-on-navy);
}
.ftr__brand{ display:flex; align-items:flex-start; gap:1rem; }
.ftr__brand img{ width:44px; height:44px; border-radius:50%; flex:none; }
.ftr__nav{ display:flex; flex-wrap:wrap; gap:.75rem 1.5rem; align-items:flex-start; }
.ftr__nav a{
  font-size:var(--fs-sm); color:var(--ink-on-navy-muted);
  text-decoration:none;
}
.ftr__nav a:hover{ color:var(--ink-invert); text-decoration:underline; text-underline-offset:3px; }
.ftr__word{
  font-size:1.125rem; font-weight:700; color:var(--ink-invert); line-height:1.5;
}
.ftr__vision{
  font-size:var(--fs-sm); color:var(--ink-on-navy-muted); line-height:1.6;
}
.ftr__mail-line{
  font-size:var(--fs-sm); color:var(--ink-on-navy-muted); margin-bottom:.75rem;
}
.ftr__mail-addr{
  font-size:var(--fs-lead); font-weight:700; color:var(--ink-invert);
  overflow-wrap:anywhere;
}
.ftr__biz{
  margin-top:1.75rem;
  font-size:var(--fs-micro); line-height:1.7; color:var(--ink-on-navy-muted);
}
.ftr__copy{
  margin-top:.5rem;
  font-size:var(--fs-micro); line-height:1.7; color:var(--ink-on-navy-muted);
}

/* ══════════════ 모바일 서랍 메뉴 ══════════════ */
.drawer-scrim{
  position:fixed; inset:0; z-index:180;
  background:rgba(3,29,68,.45);
  opacity:0; transition:opacity .28s ease;
}
.drawer-scrim.is-open{ opacity:1; }
.drawer{
  position:fixed; top:0; right:0; z-index:190;
  width:min(76vw, 340px); height:100dvh;
  display:flex; flex-direction:column;
  background:var(--surface);
  border-left:1px solid var(--line);
  padding:0 1.25rem 1.5rem;
  /* 닫힌 서랍이 화면 밖에 있어도 키보드 탭 순서에는 남기 때문에 visibility로 완전히 뺍니다 */
  visibility:hidden;
  transform:translateX(100%);
  transition:transform .28s cubic-bezier(.4,0,.2,1), visibility .28s;
  overflow-y:auto;
}
.drawer.is-open{ transform:translateX(0); visibility:visible; }
html.is-resizing .drawer,
html.is-resizing .drawer-scrim{ transition:none; }
.drawer__head{
  display:flex; align-items:center; justify-content:space-between;
  height:60px; margin-bottom:.5rem;
  border-bottom:1px solid var(--line);
}
.drawer__word{ font-size:var(--fs-sm); font-weight:700; color:var(--navy); }
.drawer__close{
  width:44px; height:44px; margin-right:-.625rem;
  display:flex; align-items:center; justify-content:center; color:var(--navy);
}
.drawer__nav{ display:flex; flex-direction:column; }
.drawer__nav a{
  display:flex; align-items:center; height:52px;
  border-bottom:1px solid var(--line);
  font-size:var(--fs-sm); font-weight:600; color:var(--ink);
  text-decoration:none;
}
.drawer__cta{ margin-top:1.5rem; width:100%; }

/* ══════════════ 라이트박스 ══════════════ */
.lb{
  position:fixed; inset:0; z-index:200;
  background:rgba(3,29,68,.93);
  display:flex; align-items:center; justify-content:center;
  padding:1rem;
  opacity:0; transition:opacity .2s ease;
}
.lb.is-open{ opacity:1; }
.lb[hidden]{ display:none; }
.lb__stage{ display:flex; flex-direction:column; align-items:center; gap:1rem; }
.lb__box{
  position:relative;
  background:#FFF; padding:.5rem; border-radius:var(--r-md);
  min-width:200px; min-height:160px;
  display:flex; align-items:center; justify-content:center;
}
.lb__img{
  max-width:92vw; max-height:84dvh; object-fit:contain;
  border-radius:calc(var(--r-md) - 6px);
}
.lb__img[hidden]{ display:none; }
.lb__loading{ font-size:var(--fs-cap); color:var(--muted); }
.lb__loading[hidden]{ display:none; }
.lb__cap{ text-align:center; }
.lb__title{
  display:block;
  font-size:1.0625rem; font-weight:700; color:var(--ink-invert);
}
.lb__sub{
  display:block; margin-top:.25rem;
  font-size:var(--fs-cap); color:var(--ink-on-navy-muted);
}
.lb__close,
.lb__nav{
  position:absolute; z-index:2;
  width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.12); color:var(--ink-invert);
  transition:background-color .2s ease;
}
.lb__close:hover, .lb__nav:hover{ background:rgba(255,255,255,.24); }
.lb__close{ top:1rem; right:1rem; }
.lb__nav--prev{ left:1rem; top:50%; margin-top:-24px; }
.lb__nav--next{ right:1rem; top:50%; margin-top:-24px; }
.lb__nav[hidden]{ display:none; }
.lb :focus-visible{ outline-color:var(--focus-invert); }

/* ══════════════ 복사 알림 토스트 ══════════════ */
.toast{
  position:fixed; left:50%; bottom:1.5rem; z-index:250;
  transform:translateX(-50%);
  max-width:calc(100% - 2.5rem);
  padding:.875rem 1.25rem;
  background:var(--navy); color:var(--ink-invert);
  border-radius:var(--r-sm);
  font-size:var(--fs-sm); line-height:1.5; text-align:center;
  box-shadow:var(--shadow-hover);
  opacity:0; visibility:hidden;
  transition:opacity .2s ease, visibility .2s ease;
}
.toast.is-on{ opacity:1; visibility:visible; }

/* ══════════════ 스크롤 등장 효과 ══════════════ */
/* 기본은 '보임'입니다. JS가 정상 동작할 때만 숨겼다가 등장시킵니다. */
.js-reveal .reveal{
  opacity:0; transform:translateY(12px);
  transition:opacity .5s ease-out, transform .5s ease-out;
}
.js-reveal .reveal.is-in{ opacity:1; transform:none; }

/* ══════════════════════════════════════════════════════════════
   반응형 — 화면이 좁아질 때의 규칙은 전부 아래에 모았습니다.
   ══════════════════════════════════════════════════════════════ */

/* ── 태블릿 (1023px 이하) ────────────────────────── */
@media (max-width:1023px){
  .hdr__nav{ gap:1rem; }
  .hdr__nav a{ font-size:var(--fs-cap); }
  .svc{ grid-template-columns:repeat(2, 1fr); }
  .svc__cell:nth-child(3n){ border-right:1px solid var(--line); }
  .svc__cell:nth-child(2n){ border-right:0; }
  .gal-grid{ grid-template-columns:repeat(2, 1fr); }
  .quick__grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .quick__item:nth-child(2n){ border-right:0; }
  .quick__item:nth-child(-n+2){ border-bottom:1px solid var(--line); }
  .about__grid{ grid-template-columns:minmax(0, 1fr); }
  .about__grid .about__media{ max-width:300px; margin-inline:auto; }
  .pub__grid{ grid-template-columns:1fr; }
  .pub__media{ position:static; max-width:380px; margin-inline:auto; }
  .dir__grid{ grid-template-columns:minmax(0, 1fr); }
  .dir__grid .mascot{ max-width:240px; margin-inline:auto; }
  .contact__grid{ grid-template-columns:1fr; }
  .qr{ justify-self:start; max-width:260px; }
  .sec{ padding:4rem 0; }
}

/* ── 992px 이하: 헤더 내비를 햄버거로 전환 ──────────── */
@media (max-width:991px){
  .hdr__nav, .hdr__cta{ display:none; }
  .hdr__burger{ display:flex; }
}

/* ── 모바일 (767px 이하) ─────────────────────────── */
@media (max-width:767px){
  :root{ --gutter:1.25rem; --header-h:60px; }
  .hdr__brand img{ width:30px; height:30px; }
  .hdr__word{ font-size:var(--fs-sm); }

  .hero{ min-height:auto; padding-top:3.5rem; }
  .hero__cta{ flex-direction:column; }
  .hero__cta .btn{ width:100%; min-height:48px; }

  .quick__grid{ grid-template-columns:minmax(0, 1fr); }
  /* 데스크톱의 `.quick__item + .quick__item` 이 특이성이 더 높으므로 같은 형태로 덮습니다 */
  .quick__item{ border-right:0; border-bottom:1px solid var(--line); }
  .quick__item + .quick__item{ padding-left:0; }
  .quick__item:last-child{ border-bottom:0; }

  .about__grid{ grid-template-columns:1fr; }
  .about__grid .about__media{ max-width:280px; }
  .about__key p{ max-width:none; }
  .about__body p{ max-width:none; }

  .svc{ grid-template-columns:1fr; }
  .svc__cell,
  .svc__cell:nth-child(2n),
  .svc__cell:nth-child(3n){ border-right:0; }
  .svc__cell{ padding:1.5rem 0; }

  /* 좁은 화면: 포스터와 영상을 배너처럼 한 장씩 넘깁니다.
     6장·5편을 세로로 쌓으면 각 단락이 화면 대여섯 개 분량이 됩니다 */
  .gal-grid,
  .video-grid{
    display:flex;
    grid-template-columns:none;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    gap:0;
    margin:0;
    scrollbar-width:none;              /* 배너처럼 보이도록 스크롤막대를 숨깁니다 */
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
  }
  .gal-grid::-webkit-scrollbar,
  .video-grid::-webkit-scrollbar{ display:none; }
  .gal,
  .video-cell{
    flex:0 0 100%;
    max-width:none; margin-inline:0;
    scroll-snap-align:center;
  }

  /* 좌우 화살표 */
  .carousel__nav{
    display:flex; align-items:center; justify-content:center;
    position:absolute; top:38%; transform:translateY(-50%); z-index:3;
    width:40px; height:40px; border-radius:50%;
    background:rgba(255,255,255,.94);
    border:1px solid var(--line-strong);
    color:var(--navy);
    box-shadow:var(--shadow-card);
  }
  .carousel__nav--prev{ left:-4px; }
  .carousel__nav--next{ right:-4px; }
  .carousel__nav[disabled]{ opacity:.35; }

  /* 하단 점 */
  .carousel__dots{
    display:flex; justify-content:center; gap:.5rem;
    margin-top:1rem;
  }
  .carousel__dot{
    width:8px; height:8px; border-radius:50%;
    background:var(--line-strong);
    transition:background-color .2s ease, width .2s ease;
  }
  .carousel__dot.is-active{ width:22px; border-radius:4px; background:var(--navy); }

  .gal-note__swipe{ display:inline; }

  .future__grid{ grid-template-columns:1fr; }
  /* 칩이 여러 줄로 접히면 + 기호가 줄 맨 앞에 홀로 남으므로 좁은 화면에서는 끕니다 */
  .chips li + li::before{ content:none; }

  .pub-row{ padding:1.25rem 0; }
  /* 위 규칙과 특이성이 같아 종이책 카드의 좌우 여백까지 지워집니다.
     카드는 배경과 왼쪽 굵은 선이 있으므로 안쪽 여백을 다시 지정합니다 */
  .pub-row--paper{ padding:1.25rem 1.25rem; }
  .pub-row__title{ line-height:1.6; }

  /* 좁은 화면에서는 제목과 소개를 위아래로 풀고 좌측 정렬로 되돌립니다 */
  .dir-head{ flex-direction:column; align-items:flex-start; gap:.5rem; }
  .dir-head__role{ text-align:left; }
  /* 세로로 쌓이므로 구분선을 세로선에서 가로선으로 바꿉니다 */
  .dir__grid{ grid-template-columns:1fr; }
  .dir__cols{ grid-template-columns:1fr; gap:0; }
  .dir__col + .dir__col{
    border-left:0; padding-left:0;
    border-top:1px solid var(--line);
    margin-top:1.5rem; padding-top:1.5rem;
  }
  .dir__grid .mascot{ max-width:220px; margin:0 auto; }

  /* 라벨을 값 위로 올려 긴 블로그 주소가 한 줄에 들어가게 합니다 */
  .contact__info{ grid-template-columns:1fr; gap:0; }
  .contact__info dt{ margin-top:1rem; }
  .contact__info dt:first-child{ margin-top:0; }

  .qr{ justify-self:center; }

  .ftr__top{ flex-direction:column; }
  .ftr__biz{ line-height:1.8; }

  .sec{ padding:3.5rem 0; }
}

/* ── 소형 (480px 이하) ──────────────────────────── */
@media (max-width:479px){
  .br-hero{ display:none; }
  .chips--sm li{ padding:.375rem .75rem; }
  /* 좁은 화면에서는 이전/다음 버튼을 좌우가 아니라 하단 중앙에 나란히 둡니다 */
  .lb__nav{ top:auto; bottom:.75rem; margin-top:0; }
  .lb__nav--prev{ left:calc(50% - 56px); }
  .lb__nav--next{ left:calc(50% + 8px); right:auto; }
  .lb__cap{ margin-bottom:3.5rem; }
}

/* ── 모션 최소화 설정 존중 ─────────────────────────── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{ opacity:1 !important; transform:none !important; }
}