/**
 * AIMORY PROJECTION — 메인 스타일시트
 * ============================================================
 *  이 파일은 index.html 의 디자인을 담당합니다.
 *  - 색상 팔레트, 폰트, 레이아웃, 애니메이션
 *  - 색 하나 바꾸려면 :root 변수만 수정
 *  - 섹션별 스타일 블록은 주석 구분선으로 구분되어 있음
 * ============================================================
 */

:root{
  /* 아이보리 톤 — 배경·카드·푸터 베이스 */
  --ivory:#FAF8F3;
  --ivory-deep:#F0EBE0;
  --ivory-mid:#E8E0D0;
  --cream:#FFF9EF;
  /* 브랜드 골드 — 필라·하이라이트·구분선 */
  --gold:#B8976A;
  --gold-light:#D4B896;
  --gold-bright:#E8C97A;
  --glow:rgba(184,151,106,0.18);
  /* 다크 톤 — 본문·헤더·푸터 반전 영역 */
  --charcoal:#1C1917;
  --charcoal-mid:#2D2B28;
  --slate:#4A4540;
  --muted:#8A8278;
  --border:#DDD5C4;
  /* 다크 톤 위 반투명 잉크(노티스 테이블·푸터) — 계층형 흐림 단계 */
  --ink-dim-1:rgba(250,248,243,.5);
  --ink-dim-2:rgba(250,248,243,.4);
  --ink-dim-3:rgba(250,248,243,.3);
  /* 작은 글자 사이즈 토큰 — 공고 테이블 보조 텍스트용 */
  --fs-xxs:.72rem;
  --fs-xs:.75rem;
  --fs-sm:.78rem;
  /* 하단 고정 티커 높이 — .ticker 와 body padding-bottom 이 공유한다.
   * 한 곳만 바꾸면 레이아웃이 자동으로 재정렬되도록 토큰화. */
  --ticker-h:40px;

  /* ── 영문 타이포그래피 변수 (4 범주) ──
   * 여기 정의된 값은 index.html 의 applyTypography() 가
   * content.js 의 C.typography 를 읽어 런타임에 덮어쓴다.
   * 이 폴백들은 JS 가 로드되기 전 짧은 순간의 기본값이다.
   *
   * 각 범주(brand/display/label/body)마다 네 개의 하위 변수:
   *   --font-{cat}-family     font-family
   *   --font-{cat}-style      font-style   (normal|italic)
   *   --font-{cat}-weight     font-weight  (400|500|…)
   *   --font-{cat}-tracking   letter-spacing
   *   --font-{cat}-scale      각 섹션 요소가 calc() 로 곱하는 크기 배율
   *
   * 사용 예:
   *   .logo {
   *     font-family:  var(--font-brand-family);
   *     font-style:   var(--font-brand-style);
   *     font-weight:  var(--font-brand-weight);
   *     letter-spacing: var(--font-brand-tracking);
   *     font-size: calc(1rem * var(--font-brand-scale));
   *   }
   */
  --font-brand-family:'Pinyon Script','Cormorant Garamond',serif;
  --font-brand-style:normal;
  --font-brand-weight:400;
  --font-brand-tracking:.02em;
  --font-brand-scale:1.25;

  --font-display-family:'Italianno','Cormorant Garamond',serif;
  --font-display-style:normal;
  --font-display-weight:400;
  --font-display-tracking:.01em;
  --font-display-scale:1.75;

  --font-label-family:'Cormorant Garamond',serif;
  --font-label-style:italic;
  --font-label-weight:500;
  --font-label-tracking:.03em;
  --font-label-scale:1.00;

  --font-body-family:'Cormorant Garamond',serif;
  --font-body-style:italic;
  --font-body-weight:400;
  --font-body-tracking:.012em;
  --font-body-scale:1.05;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--ivory);color:var(--charcoal);
  font-family:'Noto Sans KR',sans-serif;font-weight:300;
  overflow-x:hidden;
  /* 하단 고정 티커가 본문을 가리지 않도록 여백 확보 */
  padding-bottom:var(--ticker-h);
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:4px;}
::-webkit-scrollbar-track{background:var(--ivory-deep);}
::-webkit-scrollbar-thumb{background:var(--gold);}

/* ── NOISE TEXTURE ── */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  opacity:.4;
}

/* ── HEADER ──
 * 레이아웃 규칙:
 *   [LOGO] ··················· [NAV] [LANG] [≡(모바일)]
 *
 *   · 로고는 항상 좌측 고정 (flex-shrink:0)
 *   · nav 가 `margin-inline-start:auto` 로 남은 여백을 모두 차지해,
 *     자기 자신과 뒤따르는 lang-toggle 을 우측으로 몰아붙인다.
 *     → 덕분에 메뉴 항목이 3개든 10개든 항상 우측 정렬이 유지된다.
 *   · gap / 폰트 크기는 clamp() 로 뷰포트에 따라 부드럽게 축소되므로,
 *     메뉴 항목이 추가되어도 햄버거 전환 직전까지 여유 있게 버틴다.
 *   · 항목이 정말 많아지면 flex-wrap 덕에 다음 줄로 흐르지만, 실제로는
 *     680px 이하에서 햄버거가 켜져 오버레이 네비로 전환된다.
 */
header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  padding:0 4vw;
  display:flex;align-items:center;
  gap:clamp(1rem, 2vw, 2rem);
  height:72px;
  background:rgba(250,248,243,0.85);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(184,151,106,0.2);
  transition:box-shadow .3s;
  min-width:0;
}
.logo{
  /* "AIMORY PROJECTION" 는 항상 영어라 어느 언어 모드에서도 brand 범주
   * (기본값: Pinyon Script) 로 표시된다. 실제 글꼴은 content.js →
   * applyTypography() 가 :root 의 --font-brand-* 를 덮어써 결정. */
  font-family:var(--font-brand-family);
  font-style:var(--font-brand-style);
  font-weight:var(--font-brand-weight);
  letter-spacing:var(--font-brand-tracking);
  font-size:calc(1.15rem * var(--font-brand-scale));
  color:var(--charcoal);text-decoration:none;
  display:flex;align-items:center;gap:.6rem;
  flex-shrink:0;                                 /* 로고는 축소되지 않는다 */
}
.logo-icon{
  width:32px;height:32px;
  background:linear-gradient(135deg,var(--gold),var(--gold-bright));
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:.75rem;color:#fff;font-weight:600;
  box-shadow:0 2px 12px rgba(184,151,106,.4);
  flex-shrink:0;
}
nav{
  display:flex;align-items:center;
  gap:clamp(1.1rem, 2.2vw, 2.4rem);
  margin-inline-start:auto;                      /* 좌측 여백을 모두 먹어 우측 정렬 */
  flex-wrap:wrap;
  justify-content:flex-end;
  min-width:0;
}
/* 헤더 네비 타이포그래피 — label 범주 (기본값: Cormorant Garamond italic).
 * content.js 의 nav 레이블("Members" / "About" / "Public Notices") 이 항상
 * 영어 고정이므로 언어 모드와 무관하게 label 글꼴로 통일한다. */
nav a{
  font-family:var(--font-label-family);
  font-style:var(--font-label-style);
  font-weight:var(--font-label-weight);
  letter-spacing:var(--font-label-tracking);
  font-size:calc(1.02rem * var(--font-label-scale));
  text-transform:none;                           /* 이탤릭 세리프는 대소문자 그대로가 더 예쁨 */
  color:var(--slate);text-decoration:none;
  transition:color .2s;
  position:relative;
  padding-bottom:4px;
  white-space:nowrap;                            /* 메뉴 레이블은 절대 줄바꿈하지 않음 */
}
nav a::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .25s;
}
nav a:hover{color:var(--charcoal);}
nav a:hover::after{transform:scaleX(1);}
/* 강조 메뉴(현재 Notices) — 차콜 배경 + 아이보리 글자 + 얇은 골드 테두리.
 * label 범주 글꼴을 그대로 쓰되 배경·굵기만 강조해 다른 네비 항목과 같은
 * 타이포 리듬을 유지한다. */
nav .notice-link{
  background:var(--charcoal);color:var(--ivory)!important;
  padding:.35rem 1.1rem .3rem;
  border:1px solid var(--gold);
  border-radius:1px;
  font-family:var(--font-label-family);
  font-style:var(--font-label-style);
  font-weight:var(--font-label-weight);
  letter-spacing:var(--font-label-tracking);
  font-size:calc(.98rem * var(--font-label-scale));
  text-transform:none;
  transition:background .25s,color .25s;
}
nav .notice-link:hover{background:var(--gold);color:var(--charcoal)!important;}
nav .notice-link::after{display:none;}
.menu-toggle{
  display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;
  flex-shrink:0;
}
.menu-toggle span{width:22px;height:1.5px;background:var(--charcoal);display:block;transition:.3s;}

/* ── LANG TOGGLE ──
 * gap 이 있는 부모(header) 아래에 있으므로 별도 margin 은 두지 않는다.
 * 헤더의 gap 이 로고/네비/랭 사이 간격을 일괄 관리한다. */
.lang-toggle{
  display:flex;align-items:center;gap:.35rem;
  padding-left:1rem;
  border-left:1px solid var(--border);
  font-family:var(--font-label-family);
  font-style:var(--font-label-style);
  flex-shrink:0;
}
.lang-btn{
  background:none;border:none;cursor:pointer;padding:.15rem .25rem;
  font-family:inherit;font-style:inherit;
  font-weight:var(--font-label-weight);
  letter-spacing:var(--font-label-tracking);
  font-size:calc(.95rem * var(--font-label-scale));
  color:var(--muted);transition:color .2s;
}
.lang-btn:hover{color:var(--charcoal);}
.lang-btn.active{color:var(--gold);font-weight:600;}
.lang-sep{color:var(--border);font-size:.7rem;user-select:none;}

/* ── HERO ──
   워드 스톰 SVG 전용. 하단 고정 티커를 피해 첫 화면에 SVG 가 완전히 보이도록
   #hero 높이에서 --ticker-h 를 덜어낸다. */
#hero{
  min-height:calc(100vh - var(--ticker-h));display:flex;align-items:center;justify-content:center;
  padding:110px 3vw 60px;
  background:
    radial-gradient(ellipse 70% 60% at 80% 40%, rgba(184,151,106,.1) 0%, transparent 65%),
    radial-gradient(ellipse 50% 70% at 10% 80%, rgba(107,91,138,.06) 0%, transparent 60%),
    var(--ivory);
  position:relative;overflow:hidden;
}
/* 우측 상단에 얹히는 부드러운 골드 원 — 중앙 AIMORY 뒤로 따뜻한 분위기를 만든다 */
.hero-deco{
  position:absolute;right:-80px;top:50%;transform:translateY(-50%);
  width:min(600px,70vw);height:min(600px,70vw);
  border-radius:50%;
  background:radial-gradient(circle, rgba(212,184,150,.18) 0%, transparent 70%);
  border:1px solid rgba(184,151,106,.12);
  pointer-events:none;
}
.hero-deco::before{
  content:'';position:absolute;inset:30px;border-radius:50%;
  border:1px solid rgba(184,151,106,.08);
}
.hero-content{max-width:1680px;width:100%;position:relative;z-index:1;}
.hero-title{margin:0;}
/* SVG 본체 — 가로는 컨테이너 가득, 세로는 화면 높이에서 헤더+티커를 뺀 만큼으로 제한.
   이 max-height 덕에 portrait 뷰박스(모바일)에서도 화면 밖으로 넘치지 않는다.
   히어로 워드 스톰은 "brand" 범주이므로 SVG 루트에서 brand 변수를 상속시켜,
   내부 모든 <text> 요소가 같은 글꼴로 렌더된다. */
.hero-word-storm{
  display:block;width:100%;height:auto;max-height:calc(100vh - 240px);margin:0 auto;
  font-family:var(--font-brand-family);
  font-style:var(--font-brand-style);
  font-weight:var(--font-brand-weight);
  letter-spacing:var(--font-brand-tracking);
}

/* ── TICKER ──
 * 뷰포트 하단에 고정되는 스크롤 바. body 에 padding-bottom:var(--ticker-h)
 * 가 걸려 있어 본문/푸터가 티커에 가려지지 않는다. 높이를 바꾸려면
 * :root 의 --ticker-h 만 조정하면 된다. */
.ticker{
  position:fixed;left:0;right:0;bottom:0;z-index:900;
  height:var(--ticker-h);
  display:flex;align-items:center;
  background:var(--charcoal);
  overflow:hidden;white-space:nowrap;
  border-top:1px solid rgba(184,151,106,.3);
  box-shadow:0 -2px 16px rgba(28,25,23,.18);
}
.ticker-inner{
  display:inline-flex;gap:0;
  animation:ticker 40s linear infinite;
}
.ticker-inner span{
  font-family:var(--font-label-family);
  font-style:var(--font-label-style);
  font-weight:var(--font-label-weight);
  letter-spacing:var(--font-label-tracking);
  font-size:calc(.92rem * var(--font-label-scale));
  color:rgba(250,248,243,.6);padding:0 2rem;
}
.ticker-inner .sep{color:var(--gold);padding:0;}
@keyframes ticker{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}

/* ── SECTION COMMON ── */
section{padding:100px 8vw;}
.section-label{
  font-family:var(--font-label-family);
  font-style:var(--font-label-style);
  font-weight:var(--font-label-weight);
  letter-spacing:var(--font-label-tracking);
  font-size:calc(1rem * var(--font-label-scale));
  color:var(--gold);margin-bottom:1rem;
  display:flex;align-items:center;gap:.6rem;
  text-transform:none;
}
.section-label::before{content:'';width:24px;height:1px;background:var(--gold);}
.section-title{
  /* 기본 — 한국어 모드용 (Cormorant Garamond, 얇은 웨이트).
   * 영어 모드에선 아래 html[lang="en"] 블록에서 display 범주 변수로
   * 덮어써진다 (기본값: Italianno). */
  font-family:'Cormorant Garamond',serif;font-size:clamp(2rem,3.5vw,3rem);
  font-weight:300;color:var(--charcoal);margin-bottom:1rem;
}
.section-divider{
  width:48px;height:1px;background:var(--gold);margin:1.5rem 0 3rem;
}

/* ── TALENTS ── */
#talents{background:var(--ivory-deep);}
.talents-intro{max-width:520px;margin-bottom:4rem;}
.talents-intro p{font-size:.88rem;color:var(--muted);line-height:1.9;}
.talents-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2px;}
.talent-card{
  background:var(--ivory);padding:2.5rem;position:relative;overflow:hidden;
  cursor:pointer;transition:transform .3s;
  border:1px solid transparent;
}
.talent-card:hover{transform:translateY(-4px);border-color:var(--gold);}
.talent-avatar{
  width:90px;height:90px;border-radius:50%;margin-bottom:1.5rem;
  display:flex;align-items:center;justify-content:center;
  font-size:2.5rem;
  border:1.5px solid var(--border);
  background:linear-gradient(135deg,var(--ivory-mid),var(--cream));
  box-shadow:inset 0 0 20px rgba(184,151,106,.08);
}
.talent-name{
  font-family:'Cormorant Garamond',serif;font-size:1.6rem;
  font-weight:400;color:var(--charcoal);margin-bottom:.3rem;
}
.talent-role{
  font-family:var(--font-label-family);
  font-style:var(--font-label-style);
  font-weight:var(--font-label-weight);
  letter-spacing:var(--font-label-tracking);
  font-size:calc(.95rem * var(--font-label-scale));
  color:var(--gold);
  margin-bottom:1rem;
  text-transform:none;
}
.talent-desc{font-size:.83rem;color:var(--muted);line-height:1.8;}
.talent-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.2rem;}
.talent-tag{
  font-size:.68rem;letter-spacing:.08em;color:var(--muted);
  border:1px solid var(--border);padding:.2rem .7rem;
}
.talent-card-deco{
  position:absolute;bottom:-30px;right:-30px;width:100px;height:100px;
  border-radius:50%;background:var(--glow);
  transition:all .3s;
}
.talent-card:hover .talent-card-deco{transform:scale(2);opacity:.5;}

/* ── ABOUT ── */
#about{
  display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:center;
  background:
    radial-gradient(ellipse 40% 60% at 5% 50%, rgba(107,91,138,.05) 0%, transparent 60%),
    var(--ivory);
}
.about-visual{
  aspect-ratio:3/4;max-width:440px;
  background:linear-gradient(160deg,var(--ivory-mid) 0%,var(--ivory-deep) 100%);
  border:1px solid var(--border);position:relative;
  display:flex;align-items:center;justify-content:center;
}
.about-visual-inner{
  width:70%;height:70%;
  background:linear-gradient(135deg,rgba(184,151,106,.15),rgba(107,91,138,.1));
  display:flex;align-items:center;justify-content:center;
  font-family:'Cormorant Garamond',serif;font-size:4rem;color:var(--gold);
  border:1px solid rgba(184,151,106,.2);
}
.about-visual::after{
  content:'';position:absolute;bottom:-12px;right:-12px;
  width:60%;height:60%;border:1px solid rgba(184,151,106,.25);
  z-index:-1;
}
.about-phrases{
  list-style:none;padding:0;margin:2rem 0 0;
  display:flex;flex-direction:column;gap:.65rem;
}
.about-phrases li{
  font-family:'Cormorant Garamond',serif;
  font-size:1.25rem;font-weight:400;font-style:italic;
  color:var(--charcoal);letter-spacing:.01em;
  padding-left:1.4rem;position:relative;
}
.about-phrases li::before{
  content:'';position:absolute;left:0;top:.72rem;
  width:.8rem;height:1px;background:var(--gold);
}
.work-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.8rem 2rem;margin-top:3rem;}
.work-item{
  border-left:2px solid var(--gold);padding-left:1.1rem;
}
.work-title{
  font-family:var(--font-label-family);
  font-style:var(--font-label-style);
  font-weight:var(--font-label-weight);
  letter-spacing:var(--font-label-tracking);
  font-size:calc(1.08rem * var(--font-label-scale));
  color:var(--gold);margin-bottom:.55rem;
  text-transform:none;
}
.work-desc{
  font-size:.78rem;line-height:1.7;color:var(--slate);
}

/* ── NOTICE (전자공고) ── */
#notice{background:var(--charcoal);color:var(--ivory);}
#notice .section-label{color:var(--gold-light);}
#notice .section-title{color:var(--ivory);}
.notice-controls{
  display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:2rem;align-items:center;
}
.notice-search{
  display:flex;flex:1;min-width:220px;max-width:360px;
  border:1px solid rgba(250,248,243,.12);
}
.notice-search input{
  flex:1;background:rgba(250,248,243,.05);border:none;
  padding:.65rem 1rem;color:var(--ivory);font-size:.82rem;
  font-family:'Noto Sans KR',sans-serif;outline:none;
}
.notice-search input::placeholder{color:rgba(250,248,243,.3);}
.notice-search button{
  background:var(--gold);border:none;padding:.65rem 1rem;
  color:var(--charcoal);cursor:pointer;font-size:.8rem;
  font-family:'Noto Sans KR',sans-serif;letter-spacing:.05em;
}
.notice-filter{display:flex;gap:.5rem;flex-wrap:wrap;}
.filter-btn{
  background:transparent;border:1px solid rgba(250,248,243,.15);
  color:rgba(250,248,243,.6);padding:.45rem 1rem;
  font-size:.75rem;cursor:pointer;font-family:'Noto Sans KR',sans-serif;
  letter-spacing:.08em;transition:all .2s;
}
.filter-btn.active,.filter-btn:hover{
  background:var(--gold);border-color:var(--gold);color:var(--charcoal);
}
.notice-table{width:100%;border-collapse:collapse;margin-bottom:1.5rem;}
.notice-table th{
  font-size:.7rem;letter-spacing:.15em;color:rgba(250,248,243,.4);
  padding:.8rem 1rem;text-align:left;
  border-bottom:1px solid rgba(250,248,243,.08);
  font-weight:400;
}
.notice-table td{
  padding:.9rem 1rem;border-bottom:1px solid rgba(250,248,243,.05);
  font-size:.82rem;vertical-align:middle;
}
.notice-table tr:hover td{background:rgba(250,248,243,.03);}
.notice-badge{
  display:inline-block;padding:.2rem .6rem;font-size:.65rem;
  letter-spacing:.08em;border-radius:2px;
}
.badge-merger{background:rgba(107,91,138,.3);color:#C4B5E0;}
.badge-finance{background:rgba(61,122,122,.3);color:#9ECECE;}
.badge-corp{background:rgba(184,151,106,.2);color:var(--gold-light);}
.badge-shareholder{background:rgba(100,120,180,.2);color:#A0B4E0;}
.notice-link{color:var(--ivory);text-decoration:none;transition:color .2s;}
.notice-link:hover{color:var(--gold-light);}
/* 공고 테이블 컬럼 폭 — 인라인 width 대신 클래스 기반 */
.notice-table .col-no  {width:60px;}
.notice-table .col-cat {width:100px;}
.notice-table .col-date{width:110px;}
.notice-table .col-view{
  width:90px;text-align:center;padding-left:.4rem;padding-right:.4rem;
}
.notice-divider{background:rgba(184,151,106,.4);}
.notice-view-btn{
  display:inline-block;white-space:nowrap;
  font-size:.72rem;letter-spacing:.05em;
  color:var(--ivory);text-decoration:none;
  border:1px solid rgba(250,248,243,.18);
  padding:.3rem .7rem;transition:all .2s;
}
.notice-view-btn:hover{
  color:var(--charcoal);background:var(--gold-light);
  border-color:var(--gold-light);
}
.notice-pagination{
  display:flex;justify-content:center;gap:.5rem;margin-top:1.5rem;
}
.page-btn{
  width:32px;height:32px;background:transparent;
  border:1px solid rgba(250,248,243,.12);color:rgba(250,248,243,.5);
  cursor:pointer;font-size:.8rem;font-family:'Noto Sans KR',sans-serif;
  transition:all .2s;
}
.page-btn.active,.page-btn:hover{background:var(--gold);border-color:var(--gold);color:var(--charcoal);}
.notice-legal-note{
  font-size:.72rem;color:rgba(250,248,243,.3);line-height:1.8;
  border-top:1px solid rgba(250,248,243,.07);padding-top:1.5rem;
  margin-top:2rem;
}

/* ── NOTICE MODAL ── */
.modal-overlay{
  position:fixed;inset:0;background:rgba(28,25,23,.85);
  z-index:2000;display:none;align-items:center;justify-content:center;
  padding:2rem;backdrop-filter:blur(4px);
}
.modal-overlay.open{display:flex;}
.modal{
  background:var(--ivory);max-width:680px;width:100%;max-height:82vh;
  overflow-y:auto;position:relative;
}
.modal-header{
  background:var(--charcoal);padding:2rem;
  border-bottom:1px solid rgba(184,151,106,.2);
}
.modal-cat{font-size:.68rem;letter-spacing:.2em;color:var(--gold-light);margin-bottom:.5rem;}
.modal-title{font-family:'Cormorant Garamond',serif;font-size:1.5rem;color:var(--ivory);}
.modal-meta{font-size:.72rem;color:rgba(250,248,243,.4);margin-top:.5rem;display:flex;gap:1.5rem;}
.modal-modified{color:var(--gold-light);}
.modal-body{padding:2rem;}
.modal-body p{font-size:.85rem;line-height:2;color:var(--slate);margin-bottom:1rem;}
.modal-body strong{color:var(--charcoal);}
.modal-pdfhint{margin-top:1.5rem;padding-top:1rem;border-top:1px dashed var(--border);color:var(--muted);font-size:.78rem;}
.disclosures-missing{color:#c33;}
.disclosures-missing-hint{color:rgba(250,248,243,.4);}
.modal-actions{
  display:flex;justify-content:space-between;align-items:center;
  padding:1.2rem 2rem;border-top:1px solid var(--border);
  gap:1rem;flex-wrap:wrap;
}
.modal-actions-left{display:flex;gap:.6rem;flex-wrap:wrap;}
.modal-download{
  font-size:.75rem;color:var(--gold);text-decoration:none;
  border:1px solid var(--gold);padding:.4rem .9rem;
  transition:all .2s;
}
.modal-download:hover{background:var(--gold);color:var(--ivory);}
.modal-print{
  font-size:.75rem;color:var(--muted);
  border:1px solid var(--border);background:transparent;padding:.4rem .9rem;
  cursor:pointer;font-family:'Noto Sans KR',sans-serif;transition:all .2s;
}
.modal-print:hover{border-color:var(--gold);color:var(--gold);}
.modal-close{
  background:var(--charcoal);color:var(--ivory);border:none;
  padding:.45rem 1.2rem;cursor:pointer;font-family:'Noto Sans KR',sans-serif;
  font-size:.78rem;letter-spacing:.08em;
}
.modal-close:hover{background:var(--gold);color:var(--charcoal);}
@media print{
  body > *:not(#printArea){ display:none !important; }
  #printArea{
    display:block !important;position:fixed;inset:0;background:#fff;
    color:#111;padding:3rem;font-family:'Noto Sans KR',sans-serif;z-index:99999;
  }
  #printArea h2{font-size:1.3rem;margin-bottom:.4rem;}
  #printArea .ph-wrap{border-bottom:2px solid #111;padding-bottom:1rem;margin-bottom:1.5rem;}
  #printArea .ph-label{font-size:.7rem;color:#888;letter-spacing:.15em;margin-bottom:.5rem;text-transform:uppercase;}
  #printArea .pm{font-size:.78rem;color:#555;margin-bottom:1.2rem;display:flex;gap:1.5rem;flex-wrap:wrap;}
  #printArea .pb p{font-size:.85rem;line-height:1.9;margin-bottom:.8rem;}
  #printArea .ph-footer{margin-top:2rem;padding-top:1rem;border-top:1px solid #ccc;font-size:.68rem;color:#888;line-height:1.6;}
}

/* ── FOOTER ──
 * 구조: [.footer-brand] [.footer-cols (auto-fit grid)]
 * 푸터 링크 컬럼이 1개든 5개든 .footer-cols 가 minmax+auto-fit 으로
 * 자동 배치하므로 CSS 수정 없이 content.js 만 바꾸면 된다. */
footer{
  background:var(--charcoal-mid);padding:3.5rem 8vw;
  display:grid;grid-template-columns:1.4fr 2.6fr;gap:4rem;
  border-top:1px solid rgba(184,151,106,.15);
}
.footer-cols{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:2.5rem;
}
.footer-brand .logo{margin-bottom:1rem;}
.footer-brand .footer-logo{color:var(--ivory-deep);}
.footer-brand .footer-corp{margin-top:1rem;}
.footer-brand p{font-size:.75rem;color:rgba(250,248,243,.35);line-height:1.8;}
.footer-col h4{
  font-family:var(--font-label-family);
  font-style:var(--font-label-style);
  font-weight:var(--font-label-weight);
  letter-spacing:var(--font-label-tracking);
  font-size:calc(1rem * var(--font-label-scale));
  color:var(--gold-light);margin-bottom:1.2rem;
  text-transform:none;
}
.footer-col a{
  display:block;font-size:.78rem;color:rgba(250,248,243,.4);
  text-decoration:none;margin-bottom:.6rem;transition:color .2s;
}
.footer-col a:hover{color:var(--gold-light);}
.footer-bottom{
  background:var(--charcoal);padding:1.2rem 8vw;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem;
}
.footer-bottom p{font-size:.7rem;color:rgba(250,248,243,.25);letter-spacing:.05em;}
.footer-bottom a{color:rgba(250,248,243,.3);text-decoration:none;font-size:.7rem;}

/* ── MOBILE ──
 * 3-step 브레이크포인트:
 *   ≤900px : 태블릿 — 그리드 1열 전환, 섹션 패딩 축소
 *   ≤680px : 폰   — 햄버거 메뉴, 히어로 portrait, 폰트/패딩 축소
 *   ≤420px : 소폰  — 공고 테이블 추가 컬럼 숨김, 섹션 타이틀 축소
 */
@media(max-width:900px){
  /* 섹션 공통 패딩: 100px 8vw → 70px 6vw */
  section{padding:70px 6vw;}
  #about{grid-template-columns:1fr;gap:3rem;}
  .about-visual{display:none;}
  footer{grid-template-columns:1fr;gap:2.5rem;padding:3rem 6vw;}
  .footer-bottom{padding:1rem 6vw;}
}
@media(max-width:680px){
  /* 헤더 / 네비 — 햄버거 메뉴
   * 모바일에선 nav 가 fixed 로 화면 밖에 빠져 있어서 header 플로우에
   * 남는 건 [로고][랭][햄버거] 세 개 뿐이다. 랭을 lang-toggle 에
   * margin-inline-start:auto 로 밀어 우측 정렬한다. */
  header{padding:0 5vw;}
  nav{
    display:none;position:fixed;inset:0;top:72px;background:var(--ivory);
    flex-direction:column;align-items:center;justify-content:center;
    gap:2rem;font-size:1.1rem;padding:2rem;
    margin-inline-start:0;                        /* 오버레이 모드에선 auto 해제 */
  }
  nav.open{display:flex;}
  .menu-toggle{display:flex;}
  .lang-toggle{margin-inline-start:auto;padding-left:0;border-left:none;}

  /* 섹션 공통 — 추가 패딩 축소 + 디바이더 간격 축소 */
  section{padding:60px 5vw;}
  .section-divider{margin:1rem 0 2rem;}

  /* 히어로 — portrait SVG 가 화면을 채우도록 패딩↓ + 장식 원 숨김 */
  #hero{padding:90px 3vw 30px;}
  .hero-deco{display:none;}
  .hero-word-storm{max-height:calc(100vh - 140px);}

  /* 티커 — 글자 작게, 간격 좁게 */
  .ticker-inner span{font-size:.62rem;padding:0 1.2rem;}

  /* 탤런트 — 1열, 카드 패딩 축소, 아바타 축소 */
  .talents-grid{grid-template-columns:1fr;}
  .talents-intro{margin-bottom:2.5rem;}
  .talent-card{padding:1.8rem;}
  .talent-avatar{width:72px;height:72px;font-size:2rem;margin-bottom:1rem;}
  .talent-name{font-size:1.4rem;}

  /* 어바웃 — 통계 간격 축소 */
  .about-phrases{margin-top:1.5rem;gap:.5rem;}
  .about-phrases li{font-size:1.05rem;padding-left:1.2rem;}
  .about-phrases li::before{top:.6rem;width:.7rem;}
  .work-grid{gap:1.2rem 1rem;margin-top:2rem;}
  .work-title{font-size:.74rem;letter-spacing:.2em;}
  .work-desc{font-size:.74rem;}

  /* 전자공고 — 컨트롤바 풀폭, 버튼 소형화 */
  .notice-controls{gap:.7rem;margin-bottom:1.5rem;}
  .notice-search{max-width:none;width:100%;}
  .notice-filter{width:100%;}
  .filter-btn{font-size:.68rem;padding:.35rem .7rem;letter-spacing:.05em;}
  /* 공고 테이블 — 번호(1) · 공고일(4) · 공고기간(5) 숨김. 남는 컬럼: 제목·구분·열람 */
  .notice-table th:nth-child(1),
  .notice-table td:nth-child(1),
  .notice-table th:nth-child(4),
  .notice-table td:nth-child(4),
  .notice-table th:nth-child(5),
  .notice-table td:nth-child(5){display:none;}
  .notice-table th,.notice-table td{padding:.7rem .5rem;font-size:.75rem;}
  .notice-badge{font-size:.6rem;padding:.15rem .45rem;}

  /* 공고 모달 — 거의 전체 화면 차지 */
  .modal-overlay{padding:0;}
  .modal{max-height:100vh;height:100vh;border-radius:0;}
  .modal-header{padding:1.5rem;}
  .modal-title{font-size:1.2rem;}
  .modal-meta{flex-direction:column;gap:.3rem;}
  .modal-body{padding:1.5rem;}
  .modal-body p{font-size:.8rem;line-height:1.9;}
  .modal-actions{padding:1rem 1.5rem;gap:.5rem;}
  .modal-download,.modal-print,.modal-close{font-size:.7rem;padding:.35rem .7rem;}

  /* 푸터 — 1열, 패딩 축소, 바텀바 세로 정렬 */
  footer{grid-template-columns:1fr;gap:2rem;padding:2.5rem 5vw;}
  .footer-bottom{padding:1rem 5vw;flex-direction:column;align-items:flex-start;gap:.4rem;}
}
@media(max-width:420px){
  /* 아주 작은 폰 — 섹션 타이틀 축소 + 공고 "구분" 컬럼도 숨김 */
  section{padding:50px 4vw;}
  .section-title{font-size:1.65rem;}
  .talent-card{padding:1.4rem;}
  .notice-table th:nth-child(3),
  .notice-table td:nth-child(3){display:none;}
  .modal-header,.modal-body{padding:1.2rem;}
  .modal-actions{padding:.8rem 1.2rem;}
}

/* ── ENGLISH TYPOGRAPHY (DISPLAY + BODY 범주) ────────────────
 * 이 블록은 "언어 토글에 따라 전환되는" 요소만 담당한다.
 * 항상 영어인 구조 요소(.logo · 네비 · 티커 · 섹션 라벨 · 푸터 헤딩 ·
 * 히어로 SVG 등) 는 위쪽 정의에서 바로 label/brand 변수를 참조하므로
 * 여기 포함되지 않는다.
 *
 * ── 범주 할당 ──
 *   display : 섹션 타이틀 · 탤런트 이름 · 모달 타이틀
 *             (영어 모드일 때만 display 범주 폰트 사용 — 기본값: Italianno)
 *   body    : 그 외 본문/설명/표/모달 본문/푸터 링크 등
 *             (영어 모드일 때만 body 범주 폰트 사용 — 기본값: Cormorant italic)
 *
 * 한국어 모드에선 기본 Noto Sans KR 이 그대로 유지된다. 언어 토글이
 * `document.documentElement.lang = "en"` 을 세팅하는 순간 이 규칙들이
 * 활성화되어 영문 폰트로 전환된다.
 *
 * 카테고리별 글꼴/웨이트/자간을 바꾸려면 main.css 가 아니라 content.js 의
 * C.typography 에서 수정하면 된다 — 그 객체를 applyTypography() 가 :root
 * 의 --font-{cat}-* 변수에 주입한다. */

/* ── DISPLAY 범주 (영어 모드 전용) ── */
html[lang="en"] .section-title,
html[lang="en"] .talent-name,
html[lang="en"] .modal-title{
  font-family:var(--font-display-family);
  font-style:var(--font-display-style);
  font-weight:var(--font-display-weight);
  letter-spacing:var(--font-display-tracking);
}
/* display 폰트(예: Italianno) 는 x-height 가 매우 작아 px 가 같아도
 * 왜소하게 보인다. scale 변수로 보정. */
html[lang="en"] .section-title{
  font-size:calc(clamp(2rem,3.5vw,3rem) * var(--font-display-scale));
  line-height:1.1;
}
html[lang="en"] .talent-name{
  font-size:calc(1.6rem * var(--font-display-scale));
}
html[lang="en"] .modal-title{
  font-size:calc(1.5rem * var(--font-display-scale));
}

/* ── BODY 범주 (영어 모드 전용) ── */
html[lang="en"] body,
html[lang="en"] .hero-content,
html[lang="en"] .talents-intro p,
html[lang="en"] .talent-desc,
html[lang="en"] .talent-tag,
html[lang="en"] .about-phrases li,
html[lang="en"] .work-desc,
html[lang="en"] .notice-search input,
html[lang="en"] .notice-search button,
html[lang="en"] .filter-btn,
html[lang="en"] .notice-table th,
html[lang="en"] .notice-table td,
html[lang="en"] .notice-badge,
html[lang="en"] .notice-view-btn,
html[lang="en"] .page-btn,
html[lang="en"] .notice-legal-note,
html[lang="en"] .modal-cat,
html[lang="en"] .modal-meta,
html[lang="en"] .modal-body p,
html[lang="en"] .modal-body strong,
html[lang="en"] .modal-pdfhint,
html[lang="en"] .modal-download,
html[lang="en"] .modal-print,
html[lang="en"] .modal-close,
html[lang="en"] .footer-brand p,
html[lang="en"] .footer-col a,
html[lang="en"] .footer-bottom p,
html[lang="en"] .footer-bottom a{
  font-family:var(--font-body-family);
  font-style:var(--font-body-style);
  font-weight:var(--font-body-weight);
  letter-spacing:var(--font-body-tracking);
}
/* body 폰트가 Cormorant 기준으로 가독성 보정 — 핵심 읽기 영역만 소폭 확대 */
html[lang="en"] .talents-intro p,
html[lang="en"] .talent-desc,
html[lang="en"] .work-desc,
html[lang="en"] .modal-body p,
html[lang="en"] .notice-table td,
html[lang="en"] .footer-brand p{
  font-size:calc(.92rem * var(--font-body-scale));
  line-height:1.75;
}
/* 검색창 placeholder 는 별도 pseudo-element 라 위 셀렉터로는 못 잡는다 */
html[lang="en"] .notice-search input::placeholder{
  font-family:var(--font-body-family);
  font-style:var(--font-body-style);
}

/* ── ANIMATIONS ── */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .7s;}
.reveal.in{opacity:1;transform:none;}

/* ── UTILITIES ──
 * 공고 테이블/푸터 등 다크 톤 영역에서 반복되던 inline style 을 흡수한
 * 얕은 유틸 클래스. 여기서만 사용되는 일회성 토큰이 아니라 :root 변수
 * (--ink-dim-*, --fs-*) 를 참조해 테마 조정이 한 곳에서 끝나도록 한다.
 */
.t-mute-1{color:var(--ink-dim-1);}
.t-mute-2{color:var(--ink-dim-2);}
.t-mute-3{color:var(--ink-dim-3);}
.t-xxs{font-size:var(--fs-xxs);}
.t-xs{font-size:var(--fs-xs);}
.t-sm{font-size:var(--fs-sm);}
.t-center{text-align:center;}
.p-2{padding:2rem;}