/* ══════════════════════════════════════════════════════════════
   바우하우스 디자인 토큰 (고객 피드백 2026-09-04)
   · 폰트: 영문 본문 Manrope → Jost(Futura 계열, 바우하우스 시대 기하학 서체)
           영문 라벨·숫자 → Righteous(Bauhaus 93 계열 디스플레이)
           국문은 Noto Sans KR 유지 (바우하우스 국문 서체는 없음)
   · 배경: 순백 → 아이보리
   · 원색 3색 + 검정: 진입 게이트 등 바우하우스 조형 요소에 사용
   svca.css / sub.css / popup.css / ext.css 의 "Manrope" 는 전부 var(--font-en) 으로 치환했다.
   이 파일은 ext.css 뒤에 로드되어 사이트 전역 토큰과 표면색을 덮어쓴다.
   ══════════════════════════════════════════════════════════════ */
:root {
  --font-en: "Jost", "Noto Sans KR", sans-serif;
  --font-display: "Righteous", "Jost", sans-serif;
  /* 2026-09-07 고객 결정 — 국문 제목은 Gothic A1(기하 고딕, Jost 와 결이 맞음), 큰 낱말(게이트 제목·홈 히어로·푸터 학회명)은 Black Han Sans.
     본문은 Noto Sans KR 그대로. Google Fonts 유니코드 범위 분할 로드라 국문 서체 추가 부담은 작다((site)/layout.tsx). */
  --font-ko-head: "Gothic A1", "Noto Sans KR", "Apple SD Gothic Neo", sans-serif;
  --font-ko-poster: "Black Han Sans", "Gothic A1", "Noto Sans KR", sans-serif;

  --ivory: #f7f3ea;      /* 바탕 */
  --ivory-2: #fbf8f1;    /* 카드·패널 표면 (바탕보다 한 단계 밝음) */
  --ivory-3: #efe9dc;    /* 구분면·호버 */
  --ivory-line: rgba(20, 20, 20, 0.12);

  --bh-red: #d62828;
  --bh-blue: #234ea0;
  --bh-yellow: #f4c20d;
  --bh-black: #141414;
}

/* ══════════════════════════════════════════════════════════════
   [피드백 2] 표면색 — 순백 → 아이보리
   svca.css / sub.css / popup.css / ext.css 가 #fff 로 박아 둔 밝은 표면만 골라 덮어쓴다.
   · 바탕(body·섹션 그라운드·슬라이드 패널) = --ivory
   · 바탕 위에 떠 있는 카드·패널·입력창 = --ivory-2 (바탕보다 한 단계 밝아 "떠 있음"이 읽힌다)
   · 구분면(이미지 슬롯·팝업 푸터·저널 패인) = --ivory-3
   어두운 면(헤더 green-header·햄버거 패널·푸터·.pn.ink·.oc.root·CTA 밴드)과 그 위의 흰 글자·
   흰 호버는 그대로 둔다 — 어두운 면 위에서는 흰색이 "강조"로 읽히고 아이보리로 바꿔도 이득이 없다.
   테마 규칙([data-theme="…"] .x, 특이도 0,2,0)은 여기의 단일 클래스(0,1,0)보다 높아 그대로 이긴다.
   ══════════════════════════════════════════════════════════════ */
:root {
  --white: var(--ivory);   /* body { background: var(--white) } → 페이지 바탕이 아이보리가 된다 */
  /* 보조 글자색(--muted #68797d)은 순백 위 4.55:1 로 AA 를 간신히 넘기게 맞춘 값이라 아이보리 위에서는
     4.10:1(ivory) · 3.76:1(ivory-3) 로 떨어진다. 같은 청회색 계열에서 한 단계 어둡게 —
     ivory 5.02 · ivory-2 5.24 · ivory-3 4.60 로 세 표면 모두 AA(4.5:1) 를 지킨다. 다른 글자색은 건드리지 않는다 */
  --muted: #5a6b71;
}

/* ── 헤더(라이트 테마 전용) ── green-header/green/sky/rainbow 는 (0,2,0) 테마 규칙이 이긴다 */
.site-header { background: rgba(247, 243, 234, .97); }   /* = --ivory 를 원본과 같은 .97 로 */

/* ── 홈 히어로 ── 바탕 위의 카드라 한 단계 밝은 아이보리. 저널 패인은 원본이 #f6f8f7(차가운 회녹색)로
   구분했는데 따뜻한 바탕에서 얼룩처럼 보여 같은 계열의 구분면(--ivory-3)으로 바꾼다 */
.hero { background: var(--ivory-2); }
.pane-journal { background: var(--ivory-3); }
/* 인터뷰 패인 사진의 아래쪽 페이드가 #fff 로 끝나면 아이보리 패인 위에 흰 띠가 남는다 → 패인 색으로 맞춘다 */
.interview-portrait {
  background-image:
    linear-gradient(90deg, #fbf8f1 0%, rgba(251, 248, 241, .95) 13%, rgba(251, 248, 241, .2) 47%, transparent 69%),
    url("generated_images/exec-18665b1a-be5d-4d49-8b77-d365a8240982.png");
}
.hero-split .interview-portrait {
  background-image:
    linear-gradient(180deg, transparent 30%, rgba(251, 248, 241, .55) 62%, rgba(251, 248, 241, .95) 86%, #fbf8f1 100%),
    url("generated_images/exec-18665b1a-be5d-4d49-8b77-d365a8240982.png");
}
/* 히어로 이미지/영상 위 가독성 그라데이션(ext.css)도 흰색 → 패인 아이보리로 */
.hero-media::after {
  background: linear-gradient(180deg, rgba(251, 248, 241, .1) 30%, rgba(251, 248, 241, .75) 78%, rgba(251, 248, 241, .92) 100%);
}
.hero-dots { background: var(--ivory); }

/* ── 홈 섹션 그라운드 ── 무지개 카드·광고 섹션의 바탕. 카드 자체는 파스텔/베이지/틸이라 건드리지 않는다 */
.quick-links { background: var(--ivory); }
.ad-section { background: var(--ivory); }

/* ── 슬라이드 패널 ── 검색·로그인 패널은 화면을 덮는 "바탕"이라 --ivory, 닫기 버튼은 그 위의 원이라 --ivory-2.
   .panel-close 를 단독으로 잡으면 어두운 햄버거 닫기 버튼(.menu-panel-close, 반투명 흰색)까지 덮으므로 패널로 한정한다 */
.search-panel { background: var(--ivory); }
.login-panel { background: var(--ivory); }
.search-panel .panel-close,
.login-panel .panel-close { background: var(--ivory-2); }
/* 로그인 패널 입력창은 밑줄만 있는 형태 — UA 기본 흰 필드가 아이보리 위에서 사각형으로 드러나 투명으로 둔다 */
.login-panel .login-form input { background: transparent; }

/* ── 언어 드롭다운 ── */
.lang-menu { background: var(--ivory-2); }

/* ── 서브페이지 공용 카드 ── */
.tile { background: var(--ivory-2); }           /* .tile.accent(그라데이션)·[data-theme="green"] .tile 이 이긴다 */
.step { background: var(--ivory-2); }
.member-gate { background: var(--ivory-2); }
.logo-cell { background: var(--ivory-2); }
/* 후원사 로고 26개 중 21개가 흰 바탕을 깔고 있어 아이보리 칸 안에서 흰 상자로 떴다(2026-09-06 리뷰).
   multiply 는 흰색을 칸 색으로 녹이고 유채색 로고는 그대로 둔다. 어두운 전체 테마(green)는 칸이 어두워 되돌린다. */
.logo-cell img { mix-blend-mode: multiply; }
[data-theme="green"] .logo-cell img { mix-blend-mode: normal; }
.tb-card { background: var(--ivory-2); }
.community-form { background: var(--ivory-2); }

/* ── 입력 필드·버튼 ── 흰 필드는 아이보리 바탕에서 가장 튀는 요소다. 테두리가 경계를 그리므로
   카드와 같은 --ivory-2 로 두어도 필드로 읽힌다. 특이도는 원본(속성 선택자 포함)과 같게 맞춘다 */
.journal-search input,
.search-again input,
.signup-grid input, .signup-grid select,
.signup-check-btn,
.member-gate .login-form input,
.btn { background: var(--ivory-2); }
.signup-field input[type="text"], .signup-field input[type="email"],
.signup-field input[type="password"], .signup-field input[type="tel"] { background: var(--ivory-2); }
.community-form input[type="text"],
.community-form textarea { background: var(--ivory-2); }

/* ── 팝업 ── */
.popup-box { background: var(--ivory-2); }
.popup-foot { background: var(--ivory-3); }     /* 원본 #f7f9fa(차가운 회색) → 같은 계열 구분면 */

/* ── 패널 그리드(방향 C) ── 격자 컨테이너 배경(--line)이 1px 틈으로 비치는 구조라 패널만 바꿔도 격자는 유지된다.
   .pn.tint / .pn.tint2 / .pn.ink 는 (0,2,0) 으로 그대로 이긴다 */
.pn { background: var(--ivory-2); }
.pn.slot { background: var(--ivory-3); }
.slot-box { background: var(--ivory-3); }
.pn.tint .pn-tag, .pn.tint2 .pn-tag { background: var(--ivory-2); }
/* .doc-meta .tools 는 var(--c1) 색면 — :not() 으로 빼지 않으면 뒤에 실린 이 파일이 덮어 버린다 */
.doc-meta > div:not(.tools) { background: var(--ivory-2); }
.ystrip a { background: var(--ivory-2); }       /* .ystrip a.mark(c2) 가 이긴다 */
.hrows .mk { background: var(--ivory-2); }
/* 조직도 셀 — orgtree.css(이 파일 뒤에 로드)가 다시 그린다. 여기는 흰 판이 남지 않게 하는 바닥값 */
.oc { background: var(--ivory-2); }             /* .oc.root(ink)·.oc.lead(c2) 가 이긴다 */
.vp9 div, .inst4 div { background: var(--ivory-2); }
.contact-grid div { background: var(--ivory-2); }
/* CI 페이지 무대 — .sig-board.dark(ink)·.dont-stage.d3(줄무늬) 가 이긴다 */
.sig-board, .sym-stage, .wm-stage, .clear-stage, .dont-stage,
.min-stage div { background: var(--ivory-2); }

/* ══════════════════════════════════════════════════════════════
   [피드백 10] 바우하우스 디스플레이 서체 — 영문 라벨·숫자에 Righteous(Bauhaus 93 계열)
   · 영문 본문·UI 는 이미 var(--font-en)=Jost. 여기서는 "영문만 담는" 라벨과 숫자에 var(--font-display) 를 얹는다.
   · Righteous 는 단일 웨이트(400)라 font-weight 를 반드시 400 으로 내린다 — 700/800 이 남으면 브라우저가
     가짜 굵기를 합성해 번진다. 원본이 font: 축약형이라 family/weight/size 롱핸드만 덮어 line-height 등은 유지한다.
   · Righteous 는 Jost 보다 폭이 넓어 작은 라벨은 +1px 키운다. 반응형으로 크기가 여러 번 바뀌는 요소
     (.link-card .num, .sub-num, .pn-num, 큼직한 연도·숫자)는 크기를 건드리지 않는다.
   · 한글이 섞이는 요소(.crumb, .card-detail b, .tile .tag, .pn-tag, .menu-group-head 본문, .sec-head h2, .ad-card p)
     에는 절대 얹지 않는다 — Righteous 에 한글이 없어 폴백이 섞여 조판이 깨진다.
   · 진입 게이트(.entry-gate)는 다른 스트림 소유라 제외한다.
   ══════════════════════════════════════════════════════════════ */
/* 다른 컴포넌트가 영문 디스플레이 라벨을 만들 때 쓰는 헬퍼 */
.bh-display { font-family: var(--font-display); font-weight: 400; }

/* ── 홈 히어로 ── eyebrow 는 영문 라벨 + 틸 배지(span). 진입 게이트의 eyebrow 는 제외 */
.eyebrow:not(.entry-gate .eyebrow) { font-family: var(--font-display); font-weight: 400; font-size: 11px; }
.section-intro > span { font: 400 12px var(--font-display); letter-spacing: 2px; }

/* ── 섹션 헤더 영문 라벨 ── 모바일(ext.css 10.5px)도 같은 비율로 +1px */
.sec-head span { font-family: var(--font-display); font-weight: 400; font-size: 13px; }
@media (max-width: 850px) { .sec-head span { font-size: 11.5px; } }

/* ── 서브 히어로 ── 영문 라벨과 워터마크 숫자(96px/모바일 64px 은 sub.css 크기를 그대로 쓴다) */
.sub-hero .en { font-family: var(--font-display); font-weight: 400; font-size: 14px; }
.sub-num { font-family: var(--font-display); font-weight: 400; letter-spacing: -3px; }

/* ── 무지개 카드 ── 번호(모바일 19px/38px 칸: "01" ≈ 22px, 데스크탑 호버 30px/68px 칸: ≈ 35px — 자간 -2px 에서도 넉넉하다)
   .home-stage 세로 컬럼은 (0,3,0) 으로 font-weight 600 을 박아 두어 같은 형태로 400 을 되찾는다 */
.link-card .num { font-family: var(--font-display); font-weight: 400; }
.home-stage .link-card .num { font-weight: 400; }
.card-short em { font-family: var(--font-display); font-weight: 400; font-size: 13px; }

/* ── 무지개 카드 제목 "한글 | English" 한 줄 (고객 요청 2026-09-06) ──
   원본은 국문(strong) 아래 영문(small)을 8px 블록으로 깔고, 모바일·측면 컬럼·호버 상태마다 display 를 바꾼다.
   그 규칙들(svca.css / ext.css .home-stage …)과 같은 특이도의 선택자를 여기(뒤에 실리는 파일)에 두어
   모든 상태에서 한 줄(flex, 넘치면 영문 묶음이 통째로 다음 줄)로 만든다. 영문은 디스플레이 서체 0.6em, 구분자 "|" 는 영문에 붙는다. */
.home-stage .link-card .card-copy strong,
.home-stage .link-card:hover .card-copy strong,
.home-stage .link-card.is-hovered .card-copy strong,
.home-stage .link-card:focus-visible .card-copy strong {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.38em;
  row-gap: 2px;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.home-stage .link-card .card-copy strong .card-ko { white-space: nowrap; }
.home-stage .link-card .card-copy strong small,
.home-stage .link-card:hover .card-copy strong small,
.home-stage .link-card.is-hovered .card-copy strong small,
.home-stage .link-card:focus-visible .card-copy strong small {
  display: inline;
  margin: 0;
  white-space: nowrap;
  opacity: 0.78;
  font: 400 0.6em/1 var(--font-display);
  letter-spacing: 0.04em;
  text-transform: none;
}
.home-stage .card-copy strong .card-sep {
  margin-right: 0.45em;
  font: 300 1.15em/1 var(--font-en);
  font-style: normal;
  opacity: 0.5;
}
/* 09 COUNCIL ON VERTICAL URBANISM — 국문 없이 영문 전체 이름이 제목이라 좁은 컬럼에서 두 줄로 접는다 */
.home-stage .link-card.black .card-copy strong .card-ko {
  white-space: normal;
  font-size: 0.72em;
  line-height: 1.2;
  letter-spacing: 0;
  word-break: keep-all;
}

/* ── 헤더 ── LOGIN/MEMBER 라벨(0,3,0 규격 규칙과 같은 특이도), KO/EN, MENU(현재 숨김이지만 형태는 맞춘다) */
/* 크기는 ext.css 끝 블록(항목 8, 12px 주 라벨)이 정한다 — 이 파일이 뒤에 실려 여기서 크기를 박으면 그 결정을 덮는다(실측 2026-09-06: 10px 로 눌림) */
.header-auth-en,
.header-bar .header-side .header-auth-en { font-family: var(--font-display); font-weight: 400; }
.lang-switch summary b { font-family: var(--font-display); font-weight: 400; font-size: 12px; }
.menu small,
.header-actions .menu small { font-family: var(--font-display); font-weight: 400; }

/* ── 햄버거 패널 ── 워터마크 숫자, 그룹 번호(01~08), MEMBER ACCESS / SEARCH / OJS JOURNAL 라벨 */
.menu-watermark { font-family: var(--font-display); font-weight: 400; }
.menu-group-head > span { font-family: var(--font-display); font-weight: 400; font-size: 12px; }
.menu-ojs-link span,
.menu-login-trigger span { font-family: var(--font-display); font-weight: 400; font-size: 9px; }

/* ── 로그인 패널·회원 게이트 라벨 ── MEMBER ACCESS / MEMBERS ONLY */
.login-copy > span { font-family: var(--font-display); font-weight: 400; font-size: 10px; }
.member-gate-copy > span { font-family: var(--font-display); font-weight: 400; font-size: 12px; }

/* ── 패널 그리드(방향 C) ── 인덱스("PANELS 06"), 패널 번호, 영문 소제목, 조직도 LEVEL/번호 */
.pg-index { font-family: var(--font-display); font-weight: 400; font-size: 12px; }
.pg-index b { font-weight: 400; }               /* 숫자 강조는 색(--page-ink)으로만 — 합성 굵기 방지 */
.pn-num { font-family: var(--font-display); font-weight: 400; }
.pn-en { font-family: var(--font-display); font-weight: 400; font-size: 12px; }
.ol i { font-family: var(--font-display); font-weight: 400; font-size: 12px; }
.vp9 i { font-family: var(--font-display); font-weight: 400; font-size: 13px; }

/* ── 홈 광고 카드 ── DATABASE / JOURNAL 라벨과 SCOPUS INDEXED 소제목(영문 시딩). 국문 h2·p 는 제외 */
.ad-card .label { font-family: var(--font-display); font-weight: 400; font-size: 9px; }
.ad-card small { font-family: var(--font-display); font-weight: 400; font-size: 10px; }

/* ── 숫자만 담는 큼직한 요소 ── 절차 번호(01), 연혁 연도·날짜, 우편번호. 크기는 원본 clamp 를 그대로 쓴다 */
.step::before,
.ybar .ynum,
.mile .mdate,
.ystrip a,
.zip { font-family: var(--font-display); font-weight: 400; }

/* ── 잉크(검정) 패널 위의 보조 라벨 ── --muted 를 어둡게 한 대가로 검정 면 위에서는 더 죽는다(/ci 캡션 2.58:1).
   잉크 패널의 영문 라벨(.pn.ink .pn-en)과 같은 밝은 회녹색으로 맞춘다 */
.pn.ink .ci-caption,
.pn.ink .quote-src,
.pn.ink .pg-index { color: rgba(223, 232, 230, 0.72); }

/* ══════════════════════════════════════════════════════════════
   국문 서체 (고객 결정 2026-09-07) — 제목 계열만 Gothic A1 900, 큰 낱말만 Black Han Sans.
   svca.css / sub.css / ext.css 의 "Noto Sans KR" 제목 규칙과 같은 선택자를 여기(뒤에 실리는 파일)에서 덮는다.
   본문·설명·목록·버튼은 건드리지 않는다. entry-gate.css 는 이 파일 뒤라 게이트 제목은 그 파일이 정한다.
   ══════════════════════════════════════════════════════════════ */
.sec-head h2,
.pg-head .sec-head h2,
.pn .pn-title,
.tile h3,
.cta-band h2,
.ad-card h2,
.member-gate h2,
.member-gate-modal h2,
.tallest-gate h2,
.mrows strong,
.sub-hero h1,
.popup-body h2,
.menu-panel .menu-group-head strong,
.menu-panel .menu-group-title,
.home-stage .link-card .card-copy strong .card-ko {
  font-family: var(--font-ko-head);
  font-weight: 900;
  letter-spacing: -0.03em;
}
.mrows strong { font-weight: 800; }
.home-stage .link-card .card-copy strong .card-ko { font-weight: 800; letter-spacing: -0.02em; }
/* 큰 낱말 — 홈 히어로 헤드라인 */
.hero-pane h1,
.slide h1 {
  font-family: var(--font-ko-poster);
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* ══════════════════════════════════════════════════════════════
   전체 통일 — 푸터(아이보리 + 검정 괘선) 문법으로 (고객 요청 2026-09-07 3차)
   · "흰백 배경"이던 떠 있는 면(--ivory-2)을 바탕과 같은 아이보리로 — 경계는 그림자·헤어라인 대신 검정 괘선.
   · 패널 격자(.pg)는 2px 검정 격자, 먹색 패널은 푸터와 같은 #141414, 태그는 검정 테두리 칩, 영문 라벨·번호 포인트는 빨강.
   · 페이지별 파스텔(--c1~3·--page-ink)은 chrome.tsx themeStyle 이 중립 세트로 바꿔 끼운다(관리자 팔레트 값은 DB 에 유지).
   · 무지개 카드(.link-stack)는 건드리지 않는다(고객 요청).
   ══════════════════════════════════════════════════════════════ */
:root { --ivory-2: var(--ivory); }
.pg { gap: 2px; padding: 2px; background: #141414; box-shadow: none; }
.pn { background: var(--ivory); color: #152b31; }
.pn.tint { background: var(--c1); }
.pn.tint2 { background: var(--c2); }
.pn.ink { background: #141414; color: #f7f3ea; }
.pn.ink .pn-body, .pn.ink .pn-en { color: rgba(247, 243, 234, 0.82); }
.pn-num { color: #141414; }
.pn.ink .pn-num { color: #f4c20d; }
.pn-tag { background: transparent; border: 1.5px solid #141414; color: #141414; padding: 6px 11px; }
.pn.tint .pn-tag, .pn.tint2 .pn-tag { background: transparent; }
.pn.ink .pn-tag { background: transparent; border-color: rgba(247, 243, 234, 0.6); color: #f7f3ea; }
.pg-index b, .sec-head span, .quote::before { color: #d62828; }
.pn-links a { color: #141414; }
.pn-links a:hover { color: #d62828; }
.pn.ink .pn-links a { color: #f4c20d; }
.pn.ink .go { border: 2px solid rgba(247, 243, 234, 0.7); color: #f7f3ea; background: transparent; }
.pn.ink .go:hover { background: #f7f3ea; color: #141414; }
/* 옛 어휘 — 타일·단계·CTA 밴드·목록·회원 게이트 */
.tile { background: var(--ivory); border: 2px solid #141414; box-shadow: none; border-radius: 0; }
.tile:hover { transform: none; box-shadow: none; }
.tile.accent { background: var(--c1); border-color: #141414; }
.step { background: var(--ivory); border: 2px solid #141414; box-shadow: none; border-radius: 0; }
.cta-band { background: #141414; }
.rows { border-top: 6px solid #141414; }
.rows a:hover { background: var(--c1); }
.member-gate { background: var(--ivory); border: 2px solid #141414; border-radius: 0; }
.hero { background: var(--ivory); }

/* ── 무지개 카드 영문 라벨 확대 + 한 줄 고정 (고객 요청 2026-09-09) ──
   "영문을 조금 키우되 줄바꿈 없이 한 줄만". 영문 0.6em → 0.8em(16px 제목 기준 9.6 → 12.8px).
   줄바꿈은 막고(nowrap), 카드 폭보다 길면 ext.js fitCardTitles() 가 --fit-en(영문만) → --fit(제목 전체) 순으로 줄여 한 줄에 맞춘다.
   09 카드(국문 없이 영문 전체 이름)도 두 줄 접기 대신 한 줄로. 위 "한 줄" 블록과 같은 선택자(같은 특이도, 뒤에 실림)로 덮는다. */
.home-stage .link-card .card-copy strong,
.home-stage .link-card:hover .card-copy strong,
.home-stage .link-card.is-hovered .card-copy strong,
.home-stage .link-card:focus-visible .card-copy strong {
  flex-wrap: nowrap;
  white-space: nowrap;
}
.home-stage .link-card .card-copy strong small,
.home-stage .link-card:hover .card-copy strong small,
.home-stage .link-card.is-hovered .card-copy strong small,
.home-stage .link-card:focus-visible .card-copy strong small {
  font-size: calc(0.8em * var(--fit-en, 1));
}
.home-stage .link-card.black .card-copy strong .card-ko { white-space: nowrap; }
@media (min-width: 851px) {
  .home-stage .link-card .card-copy strong { font-size: calc(clamp(14.5px, 1.15vw, 16px) * var(--fit, 1)); }
  .home-stage .link-card:hover .card-copy strong,
  .home-stage .link-card.is-hovered .card-copy strong,
  .home-stage .link-card:focus-visible .card-copy strong { font-size: calc(clamp(15.5px, 1.25vw, 17px) * var(--fit, 1)); }
}