/*
 * 이룸투자자문 — BI 기반 디자인 시스템
 * 색상·서체는 BRAND.md(최상위 규범)를 그대로 토큰화한 것이며 임의로 바꾸지 않는다.
 * 3개 시안 중 에디토리얼형이 채택되어 사이트 전체의 단일 레이아웃 언어가
 * 되었다. 변형 스코프 클래스 없이 전 페이지 공통 베이스로 적용된다.
 *
 * 파일 구성
 *   1. BI 토큰 (:root)                — 공통, 절대 스코프하지 않음
 *   2. Reset-lite / 베이스 타이포      — 공통
 *   3. 레이아웃 유틸(container) — 공통
 *   4. 접근성(skip-link/focus-visible) — 공통
 *   5. 헤더/내비게이션                  — 공통 (head.php/foot.php는 전 페이지 공유)
 *   6. 버튼                            — 공통
 *   7. 화살표 링크 — 공통 컴포넌트
 *   8. 스탯(트랙레코드) 공통 베이스
 *   9. 인사이트 카드 공통 베이스
 *  10. 푸터                           — 공통
 *  11. reveal-on-scroll / 모션 가드    — 공통
 *  12. 에디토리얼 레이아웃 베이스 (채택된 시안) — 히어로/트랙레코드 레일/섹션 타이틀
 *  13. 홈페이지 전용 컴포넌트 — 투자철학 카드 / 공시·보도 리스트 / 정체성 안내 /
 *      상담 CTA 밴드
 *  14. 목록 페이지 (insights.php / disclosure.php) — 탭 필터 / 결과 건수 /
 *      게시물 리스트 / 페이지네이션. 12번 에디토리얼 베이스와 동일한 어휘
 *      (세리프 헤딩, 헤어라인, 골드 텍스트 레이블)를 따른다.
 *  15. 운용성과 페이지 (performance.php) — 연도별 성과 실제 표(feedback-f).
 *      나머지 요소(차트/스탯/시뮬레이터)는 8/8b번을 그대로 재사용.
 *
 * 다크모드 없음 (BRAND.md §5-1).
 */

/* ==========================================================================
   1. BI 토큰 — BRAND.md §1(전용 색상), §4(지정 서체) 그대로
   ========================================================================== */
:root {
  /* Main / Sub color (BS 10) */
  --iroom-blue: #211d67;
  --iroom-yellow: #ffcc00;
  --iroom-gold: #8a7340;
  --iroom-silver: #8b8d8e;

  /* 파생색 (웹 전용 — BRAND.md §1. 이 목록 외 색상 추가 금지) */
  --iroom-blue-hover: #16123f;
  --iroom-yellow-hover: #e6b800;
  --iroom-gold-text: #6f5c33;

  /* Neutrals (무채색 계조 — 팔레트 아님) */
  --bg: #ffffff;
  --bg-alt: #f7f7f8;
  --surface: #ffffff;
  --ink: #1a1a1f;
  --muted: #6b6e7e;
  --hairline: #dcdce3;

  /* 역할 별칭 (컴포넌트에서 사용) */
  --accent: var(--iroom-blue);
  --point: var(--iroom-gold);

  /* 네이비 배경 전용(BS 12 반전 규정) — 명도 단계: ink(불투명) > ink-soft > muted > hairline */
  --on-navy-ink: #ffffff;
  --on-navy-ink-soft: rgba(255, 255, 255, 0.92);
  --on-navy-muted: rgba(255, 255, 255, 0.72);
  --on-navy-hairline: rgba(255, 255, 255, 0.22);

  --footer-bg: var(--iroom-blue);
  --footer-ink: var(--on-navy-ink);
  --footer-muted: var(--on-navy-muted);
  --footer-hairline: var(--on-navy-hairline);

  --focus-ring: var(--iroom-blue);

  /* ─── 타이포 토큰 (BRAND.md §4 / typography-spec §5) ────────────────────────
     물리 스택은 "실제로 웹폰트로 로드되는 서체" 2종만 존재한다. Times New Roman은
     웹 배포가 불가능해(구글 폰트에 없음, 유료/시스템 서체) 1순위로 두면 OS별 글자꼴
     편차를 만들기 때문에 스택에서 제거했다(spec D1). CSS 규칙은 물리 스택을 직접
     참조하지 말고 반드시 아래 역할 토큰을 경유한다(BRAND.md §5 규칙 2의 '토큰 경유'
     취지를 서체까지 확장). */
  --font-sans-stack: 'Noto Sans KR', system-ui, 'Malgun Gothic', sans-serif;
  --font-serif-stack: 'Nanum Myeongjo', 'Batang', 'AppleMyungjo', serif;

  /* 역할 토큰 — 규칙에서 참조하는 것은 이 4개뿐이다.
     --font-display : 영문 표시 텍스트 전용 — 영문 섹션 헤딩(section-title__en--
                      myeongjo)·영문 카드 제목(philosophy-card__title).
                      feedback-i(2026-07-30, 사용자): 국문 표시 텍스트(대제목·
                      게시글 제목·슬로건·리드)는 전부 --font-body(고딕)로 통일 —
                      "폰트는 영문 제외 고딕체로 통일" 지시.
     --font-body    : 국문 표시 텍스트 전체 + 본문·UI·라벨·내비·버튼·표·eyebrow
     --font-num-perf: 성과/수익률 "표시" 숫자 (spec D3 — 숫자는 국문이 아니므로
                      영문 헤딩과 같은 세리프 악센트를 유지)
     --font-num-ui  : 기능 숫자 — 전화·날짜·페이지 번호·표 셀·차트 라벨 (spec D3) */
  --font-display: var(--font-serif-stack);
  --font-body: var(--font-sans-stack);
  --font-num-perf: var(--font-serif-stack);
  --font-num-ui: var(--font-sans-stack);

  /* 굵기 사다리 5단 고정(spec D5). head.php의 요청 weight 목록과 1:1이어야 한다.
     --w-semibold(600)은 Noto Sans KR 가변 range(400..700)로만 성립한다 — 요청
     URL을 정적 목록으로 되돌리면 600이 700으로 스냅되어 이 단계가 소멸한다. */
  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;
  --w-black: 800; /* 나눔명조 전용 — 본고딕에는 쓰지 않는다 */

  /* 라디우스 어휘 2종 고정(P3-1) — 이 두 토큰 외 border-radius 리터럴(예: 999px 필)
     추가 금지. 작은 요소(버튼/페이지네이션)는 --radius-sm, 카드/이미지 프레임은 --radius. */
  --radius-sm: 2px;
  --radius: 4px;
  --container-w: 1200px;
  /* --shadow-sm: 얕은 카드 hover 리프트(.philosophy-card) 전용.
     --shadow-md: 좀 더 두꺼운 hover 리프트(.book-card__cover — 표지 이미지
     카드는 면적이 커 --shadow-sm보다 존재감 있는 그림자가 자연스럽다) 전용.
     §5.2 리뷰 결정: 삭제 대신 두 토큰 모두 실제 CSS 선언에서 참조되는
     실사용처를 갖도록 채택한다 — 미참조 토큰으로 방치하지 않는다. */
  --shadow-sm: 0 1px 2px rgba(26, 26, 31, 0.06);
  --shadow-md: 0 8px 28px rgba(26, 26, 31, 0.08);

  --dur-fast: 150ms;
  --dur: 320ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* P3-2: 섹션 세로 패딩 중 여러 섹션에 그대로 반복되던 두 값만 토큰화한다
     (.philosophy/.insights--editorial/.list-page/.post-detail/.static-page의
     ≥1024px 값 112px, .disclosure의 두 값 72px) — 8px 그리드에 맞는 값이다.
     보수적 범위로 한정: 40/48/56/64/80/96px처럼 섹션마다 다른 값은 그대로
     둔다(디자인 차이를 강제로 수렴시키면 시각 회귀 위험이 있다 — C10 판단). */
  --space-section: 112px;
  --space-section-sm: 72px;

  /* feedback-d Item 2 — 이 페이지는 라이트 전용(BRAND.md §5-1: "다크모드를
     제공하지 않는다")임을 브라우저에도 명시한다. 아래 html 규칙 주석 참조. */
  color-scheme: light;
}

/* ==========================================================================
   2. Reset-lite / 베이스 타이포
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* feedback-d Item 2 (다크 오버스크롤 밴드) + feedback-e Bug 1 (네이비 오버플로우
   밴드) — 같은 html 규칙을 두 번 고친 이력을 여기 함께 남긴다.
   1단계(feedback-d): 스크롤 끝(바닥)에서 보이던 다크/블랙 오버스크롤 밴드의
   근본 원인은 html에 background-color가 선언된 적이 없어 initial(transparent)
   이었던 것 — color-scheme이 선언되지 않은 페이지를 OS/브라우저가 다크 모드로
   판단하면 Chromium/WebKit 계열은 body 배경의 캔버스 전파를 신뢰하지 않고
   오버스크롤 바운스·스크롤바 등 자체 UI 표면을 OS 다크 테마 색으로 그린다
   (MDN/web.dev color-scheme 문서에 명시된 동작). 진짜 수정은 아래 :root의
   `color-scheme: light`이고(브라우저가 더 이상 OS 다크 테마를 따라 UI 표면을
   칠하지 않는다), 그 뒤 html에 `background: var(--iroom-blue)`를 "혹시 몰라"
   방어선으로 추가했었다.
   2단계(feedback-e, 이번 수정): 그 방어선이 오히려 새 버그를 만들었다 — 문서
   안에 가로로 넘치는 요소가 하나라도 있으면(오늘 실측: 트랙레코드 접근성용
   .visually-hidden <table>이 table-layout:auto 기본값 때문에 width:1px를
   무시하고 ~1880px로 렌더됨 — 아래 .track-chart__table 규칙 참고) 문서
   (documentElement.scrollWidth)가 뷰포트보다 넓어지고, body(흰 배경)는 자기
   박스 너비까지만 칠하므로 그 오른쪽 초과 영역엔 html의 배경이 그대로
   드러난다 — 콘텐츠가 끝나는 지점부터 화면 오른쪽 전체가 네이비로 칠해지는
   "고장난 것처럼 보이는" 화면이 된 원인이 정확히 이것이다. 근본 수정은
   오버플로우 자체를 없애는 것(.track-chart__table 규칙)이고, 이 html 배경은
   var(--bg)(흰색, body와 동일)로 되돌린다 — 1단계의 진짜 수정(color-scheme:
   light)은 그대로 유지하므로 다크 오버스크롤 밴드는 재발하지 않으면서, 앞으로
   또 다른 오버플로우가 생기더라도 "방어선"이 네이비를 칠해 문제를 더
   눈에 띄게/이상하게 만드는 일은 없다. */
html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  /* P2-6: 한글은 어절(word) 단위로만 줄바꿈하고, 어절 자체가 넘치면(URL 등) 강제
     개행한다. 히어로/카드 제목처럼 줄바꿈 지점을 수동으로 잡아야 하는 곳은 기존
     방식대로 <br>+max-width를 그대로 쓴다(이 규칙과 충돌하지 않음). */
  word-break: keep-all;
  overflow-wrap: break-word;
}

img,
picture,
svg {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1,
h2,
h3 {
  font-weight: var(--w-bold);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.num,
.stat-num {
  font-variant-numeric: tabular-nums;
}

/* 타입 스케일 — 9단계 모듈러 스케일(P2-5, spec 2026-08-04 §3 개정). main.css의
   모든 font-size는 이 9개 값(px) 중 하나여야 한다: 12(각주) · 13(라벨/캡션) ·
   15(UI/링크/본문 보조) · 16(본문) · 19(카드·리스트 소제목) · 24(섹션 소제목, h2) ·
   26(성과 표시 숫자 — 사용자 결정 2026-08-04: "제목 유지, 수치 32→26", 가독성
   렌더 검토 통과) · 32(모바일 대제목) · 44(데스크톱 대제목). 새 규칙을 추가할 때
   이 9개 중 가장 가까운 값을 쓴다. tests/run.php의 소스 스캔 테스트가 고유값
   개수를 9종 이하로 강제한다(admin.css와의 합집합 기준 — P3-4/T14). 이 스캔은
   admin.css를 포함하되 아래 예외 하나를 제외한다.

   차트 SVG 텍스트 5종(`.track-chart__year` / `__growth-label` /
   `__baseline-label` / `__legend-label` / `__empty` — `__value`는 feedback-q로
   막대 패널과 함께 은퇴)의 font-size는 viewBox
   사용자 단위지만, feedback-k(2026-07-30) 이후 **이 단위가 CSS px와 1:1**이다 —
   app/track.php가 viewBox 폭을 데스크톱 실제 렌더 폭(1120)에 맞췄고,
   .perf-chart-wrap의 가로 스크롤이 좁은 화면에서 축소 렌더를 막는다. 따라서
   13/15/16 단위는 그대로 13/15/16 CSS px로 렌더되며 위 8단계 스케일과
   일치한다(P2-8/D7 당시의 "별개 단위계" 예외는 해소됐다 — 그때는 760 viewBox가
   1.474배로 늘어나 13이 19.2px, 15가 22.1px로 그려졌고 375px 뷰포트에서는
   반대로 5.7px까지 줄었다). 8단계 고유값 스캔에서는 여전히 이 6개 클래스를
   제외하고 별도로 {13,15,16} 부분집합 검사를 한다(tests/run.php T12) — 차트
   내부 스케일을 3단으로 좁게 유지하려는 별도 제약이다.

   한글 요소에 이탤릭(가짜 오블리크) 금지(P2-1). 국문 서체(나눔명조/본고딕)는
   이탤릭 글리프가 없어 브라우저가 강제로 기울이면(합성 오블리크) 자소가
   비틀어져 가독성이 떨어진다 — font-style: italic을 어떤 셀렉터에도 쓰지 않는다.
   기존에 이탤릭으로 강조하던 영문 eyebrow/라벨류는 sans 13px + letter-spacing
   0.14em + (라틴 문자는) uppercase + muted 또는 --iroom-gold-text 색으로
   대체한다. */

/* ==========================================================================
   3. 레이아웃 유틸
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 20px;
}

@media (min-width: 768px) {
  .container {
    padding: 0 32px;
  }
}

@media (min-width: 1024px) {
  .container {
    padding: 0 40px;
  }
}

/* ==========================================================================
   4. 접근성
   ========================================================================== */
.skip-link {
  position: absolute;
  left: 12px;
  top: -48px;
  z-index: 100;
  background: var(--iroom-blue);
  color: var(--on-navy-ink);
  padding: 10px 18px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: var(--w-semibold);
  transition: top var(--dur-fast) var(--ease);
}

.skip-link:focus {
  top: 12px;
}

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

/* 네이비 배경 위에서는 옐로 아웃라인이 훨씬 잘 보인다 (BS12 반전 규정에 맞춘 대비 보정).
   .cta-band는 feedback-a Item 1로 라이트 섹션이 되어 더 이상 이 보정이
   필요 없다(기본 --focus-ring 네이비 아웃라인이 흰 배경에서 충분한 대비). */
.site-footer :focus-visible {
  outline-color: var(--iroom-yellow);
}

/* ==========================================================================
   5. 헤더 / 내비게이션 (head.php/foot.php로 전 페이지 공유)
   ========================================================================== */
/* 모바일 드로어 컨테이닝 블록 버그 수정: backdrop-filter(그리고 filter/
   transform/perspective 일반)는 CSS 스펙상 그 요소를 자손 position:fixed
   요소의 containing block으로 만든다. .site-header가 backdrop-filter를
   갖고 있었을 때, 자손인 .site-nav.is-open(모바일 드로어, position:fixed;
   inset:0)의 inset이 뷰포트가 아니라 이 헤더 박스 기준으로 계산되어 드로어가
   헤더 높이(~76px)로만 열리는 버그가 있었다. 헤더는 이미 흰 배경 위라 블러
   스크림 효과는 체감 차이가 작으므로, 완전 불투명 배경(--surface)으로
   교체해 문제의 근본 원인 자체를 제거한다(filter류 속성을 아예 쓰지 않음). */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 76px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.brand {
  display: inline-flex;
  align-items: center;
}

.brand__logo {
  width: 130px;
  height: auto;
  display: none;
}

.brand__logo--compact {
  display: block;
}

@media (min-width: 768px) {
  .brand__logo--compact {
    display: none;
  }

  .brand__logo--full {
    display: block;
  }
}

.site-nav {
  display: none;
}

@media (min-width: 1024px) {
  .site-nav {
    display: block;
  }
}

.site-nav__list {
  display: flex;
  gap: 32px;
}

.site-nav__link {
  font-size: 15px;
  font-weight: var(--w-medium);
  color: var(--ink);
  position: relative;
  padding: 6px 2px;
  transition: color var(--dur-fast) var(--ease);
}

.site-nav__link:hover {
  color: var(--iroom-blue);
}

.site-nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--iroom-gold);
  transition: right var(--dur) var(--ease);
}

.site-nav__link:hover::after {
  right: 0;
}

/* feedback-m(2026-07-31, 사용자: "활성화된 탭은 밑줄, 그렇지 않은 것들은 폰트가
   동일해야") — 활성 탭의 유일한 표시는 밑줄이다. 이전에는 밑줄에 더해 색까지
   --iroom-blue로 바뀌어(비활성 --ink #1a1a1f vs 활성 #211d67) 구분 축이 둘이었다.
   서체 자체는 이미 5개 탭 전부 15px/500/본고딕으로 동일했다(실측) — 어긋난 것은
   색 하나뿐이었으므로 그 선언만 걷어낸다. 활성 상태는 밑줄 + aria-current="page"
   (스크린리더)로 계속 전달되므로 접근성 손실은 없다. */
.site-nav__link.is-active::after {
  right: 0;
}

/* CTA 링크 — 데스크톱에서는 header-actions에 이미 동일 CTA가 있으므로 숨기고,
   모바일 드로어가 열렸을 때만 site-nav 안에서 노출한다(P1-4). */
.site-nav__cta {
  display: none;
}

/* 모바일 내비게이션 드로어 (P1-4) — 1024px 미만에서 .site-nav.is-open이 되면
   전체 화면 시트로 전환된다. JS(main.js initNav)가 aria-expanded를 토글하고
   is-open 클래스를 site-nav에 부여한다. 배경은 IROOM Blue(BS12: 반전 배경 위
   White/Gold/Silver만 허용) — 문자는 on-navy 토큰만 쓴다. */
@media (max-width: 1023px) {
  .site-nav.is-open {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 60;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 40px;
    padding: 32px 24px;
    background: var(--iroom-blue);
    overflow-y: auto;
  }

  .site-nav.is-open .site-nav__list {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .site-nav.is-open .site-nav__link {
    display: block;
    padding: 14px 2px;
    font-size: 19px;
    font-weight: var(--w-semibold);
    color: var(--on-navy-ink);
    text-align: center;
  }

  .site-nav.is-open .site-nav__link::after {
    background: var(--iroom-yellow);
  }

  /* spec 2026-08-04 §3: 드로어 활성 탭도 데스크톱과 동일하게 밑줄 단일 축 —
     옐로 글자색 오버라이드는 은퇴(feedback-m의 원칙을 모바일까지 확장). */

  .site-nav.is-open .site-nav__cta {
    display: flex;
    justify-content: center;
    margin-top: 8px;
  }
}

/* 네이비 드로어 위에서는 옐로 아웃라인이 대비가 더 좋다 (기존 footer/cta-band
   보정과 동일한 원칙). */
.site-nav.is-open :focus-visible {
  outline-color: var(--iroom-yellow);
}

/* 햄버거 버튼 — 이모지/아이콘 폰트 없이 CSS로 그린 3단 바. 1024px 미만에서만
   보이며(.site-nav가 데스크톱 인라인 메뉴로 전환되는 지점과 동일 breakpoint),
   열림 상태(aria-expanded=true)에서 위/아래 바가 회전해 X 모양이 된다.
   position:relative + z-index:70(>.site-nav.is-open의 60)를 명시한다 — 버튼이
   position:static(비포지션 요소)면 그리기 순서상 explicit z-index를 가진
   드로어보다 항상 먼저 그려져(포지션 없는 콘텐츠 단계가 양수 z-index 포지션
   단계보다 앞선다) 드로어가 열렸을 때 버튼 위를 덮어버린다 — 그러면
   elementFromPoint()가 버튼이 아닌 드로어를 반환해 터치 사용자가 버튼을 다시
   탭해도 닫히지 않는 트랩이 된다. 이 규칙이 그 문제를 막는다. */
.nav-toggle {
  display: none;
  position: relative;
  z-index: 70;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
}

@media (max-width: 1023px) {
  .nav-toggle {
    display: inline-flex;
  }
}

.nav-toggle__bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}

.nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* 드로어가 열려 있는 동안 배경 스크롤 잠금(main.js가 부여). 드로어 자체가
   position:fixed 전체 화면이라 이중 안전장치 성격이다. */
body.nav-open {
  overflow: hidden;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

/* ==========================================================================
   6. 버튼
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: var(--w-semibold);
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  background: var(--iroom-blue);
  color: var(--on-navy-ink);
}

.btn--primary:hover {
  background: var(--iroom-blue-hover);
}

.btn--outline {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}

.btn--outline:hover {
  border-color: var(--iroom-blue);
  color: var(--iroom-blue);
}

.btn--sm {
  padding: 9px 18px;
  font-size: 13px;
}

/* 네이비 배경 위에서 쓰는 버튼 (BS12: White/Gold/Silver 반전, 옐로는 배경 칩으로만) */
.btn--yellow {
  background: var(--iroom-yellow);
  color: var(--iroom-blue);
}

.btn--yellow:hover {
  background: var(--iroom-yellow-hover);
}

/* feedback-s(H안 실구현): 영상/네이비 히어로 위 보조 버튼 — 흰 외곽선. */
.btn--ghost {
  background: transparent;
  border-color: var(--on-navy-ink-soft);
  color: var(--on-navy-ink);
}

.btn--ghost:hover {
  border-color: #fff;
}

/* ==========================================================================
   7. 화살표 링크
   ========================================================================== */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: var(--w-semibold);
  color: var(--iroom-blue);
}

.link-arrow::after {
  content: '\2192';
  transition: transform var(--dur-fast) var(--ease);
}

.link-arrow:hover::after {
  transform: translateX(4px);
}

/* ==========================================================================
   8. 스탯 / 트랙레코드 — 공통 베이스
   ========================================================================== */
.stat {
  text-align: left;
  padding: 0;
}

.stat-num {
  display: block;
  /* P1-2/D3: 성과·수익률 표시 숫자는 --font-num-perf(나눔명조) — 컨테이너는
     크기만 계층화하고 서체는 이 베이스 규칙 1곳에서만 선언한다(T1). */
  font-family: var(--font-num-perf);
  /* feedback-l(2026-07-30)에서 44→32px, spec 2026-08-04 §3(사용자: "제목 폰트
     사이즈는 유지하고 수치 32→26px … 가독성 검토하고 이상없으면")에서 32→26px.
     비교 렌더(num-size-compare) 이미지 검토 결과 26px 가독성 이상 없음 —
     표시 숫자는 사이트 전체에서 26px 단일 크기이며 9단계 스케일의 전용 단이다.
     32px는 이제 모바일 대제목 전용. */
  font-size: 26px;
  font-weight: var(--w-bold);
  color: var(--iroom-blue);
  margin-bottom: 8px;
}

/* (2026-08-05: .stat-num--kr 은퇴 — 업명 2줄 스탯이 사용자 피드백으로 누적
   수익률 스탯으로 대체되며 소비처 0. BRAND §4의 세리프 예외 조항도 함께 철회.) */

.stat__label {
  font-size: 13px;
  color: var(--muted);
}

.stat-band__note {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
  font-size: 12px;
  line-height: 1.8;
  color: var(--muted);
}

/* feedback-e Bug 2: the always-visible short footnote right below the
   primary headline stats — same base look as .stat-band__note, just a
   little closer to the numbers it annotates (no chart/table in between it
   and .rail__stats--primary any more; the full-length version of this note
   moves inside .track-detail below). */
.stat-band__note--summary {
  margin-top: 24px;
}

/* feedback-o: .stat-band__note--basis 삭제 — 유일 소비처였던 performance.php의
   Basis(산출기준 각주) 섹션이 사용자 지시로 제거됐다. index.php가 쓰는 기본
   .stat-band__note(12px)와 --summary 변형은 그대로다. */

/* feedback-f dead-code removal: the "calm rail" <details class="track-detail">
   / <details class="simulator-detail"> collapsible wrappers (feedback-e Bug
   2/Bug 3) are gone — the content they hid (chart/table/recent-year stats/
   simulator) moved to the dedicated /performance.php page per user decision
   ("상세실적은 홈에 나오기엔 좀 그런거 같아 … 시뮬레이션도 별도의 상세 실적의
   페이지 안에서"), and that page renders everything open by default (no
   <details> at all — it IS the detail view). Neither class has any markup
   consumer left in site/public (verified by grep), so the whole rule block
   is deleted rather than kept as unreferenced CSS.

   스크린리더 전용 요소 — 화면에서는 완전히 감추되(1px 클립) 보조기술에는
   그대로 노출된다. 트랙레코드 차트의 동반 데이터 <table>(app/track.php
   track_chart_table_html())에 쓰인다. display:none이 아닌 이유는
   display:none이 일부 스크린리더에서도 요소를 건너뛰기 때문. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* feedback-e Bug 1 (실측 근본 원인) — <table>은 위 .visually-hidden의
   width:1px 클립 기법을 따르지 않는다: table-layout이 기본값 auto인 <table>은
   지정된 width를 "제안"으로만 취급하고, 내용이 필요로 하는 최소(min-content)
   너비 밑으로는 절대 줄어들지 않는다 — 게다가 .visually-hidden이 함께 거는
   white-space:nowrap이 상속되어 각 열(연도/운용수익률/코스피 수익률/
   초과수익/비고)의 텍스트가 줄바꿈되지 못하므로, 이 5열 표는 실측
   ~1880px로 렌더된다(1920px 뷰포트에서 documentElement.scrollWidth가
   1905→3016으로 뛰는 것으로 확인). position:absolute + clip으로 화면에는
   보이지 않지만, 그 실제 박스 크기는 문서의 스크롤 가능 영역(scrollWidth)에
   그대로 반영되어 뷰포트보다 넓은 문서를 만들고, 그 초과 폭에서 html의
   배경색(위 html 규칙 참고)이 드러나는 "네이비 오버플로우 밴드" 버그의
   진짜 발생 지점이 바로 이 표였다(SVG 차트나 .rail__stats 그리드가 아니라).
   table-layout: fixed로 바꾸면 표가 자기 width를 있는 그대로 존중해
   1px로 렌더되고(셀 내용은 어차피 시각적으로 보이지 않으므로 잘려도 무방),
   문서 폭이 다시 뷰포트 이하로 돌아온다 — 이 규칙이 그 실제 수정이다. */
.track-chart__table {
  table-layout: fixed;
}

/* C6/P1-7+P2-13: 트랙레코드 서버 렌더 SVG 차트(app/track.php track_chart_svg()).
   값 텍스트는 전부 PHP number_format()으로 서버가 최종 렌더한 <text>이며,
   카운트업/막대 성장/경로 드로잉/SMIL 전무(BRAND.md §5 rule 3, 스펙 §4.2
   경계). 허용되는 동적 효과는 .reveal 전체 페이드와 아래 hover 색상 전환뿐 —
   둘 다 수치 텍스트 자체에는 손대지 않는다. */
.track-chart {
  display: block;
  width: 100%;
  height: auto;
  margin: 12px 0 4px;
}

/* feedback-k: 좁은 화면에서 차트 글씨가 다시 작아지지 않게 하는 스크롤 래퍼.
   차트는 viewBox 1120 폭을 CSS px와 1:1로 쓰기 때문에, 컨테이너가 1120px보다
   좁아지면 SVG 전체가 축소되면서 13px 라벨도 함께 줄어든다(수정 전 375px
   뷰포트 실측 5.7px — 사실상 읽을 수 없었다). min-width로 축소를 막고 넘치는
   만큼만 이 래퍼 안에서 가로 스크롤한다 — 같은 페이지의
   .performance-table-wrap과 동일한 처리 방식이고, 문서 자체는 넘치지 않으므로
   feedback-e Bug 1(네이비 오버플로우 밴드)의 재발 경로와 무관하다.
   18개년 값 전체는 바로 아래 "연도별 성과" 표가 항상 보여주므로, 스크롤을
   놓친 방문자에게도 정보 손실이 없다. */
.perf-chart-wrap {
  overflow-x: auto;
  /* feedback-q: 따라다니는 툴팁(.chart-tip)의 absolute 기준 컨테이너.
     차트가 1:1 px 스케일(min-width 1120)이라 SVG 좌표 = 이 컨테이너의
     CSS px 좌표다 — perf-chart.js가 점의 cx/cy를 그대로 left/top에 쓴다. */
  position: relative;
}

.perf-chart-wrap .track-chart {
  min-width: 1120px;
}

/* 2026-08-05 사용자: 모바일에서 Growth 그래프가 한 화면에 안 들어온다 —
   좁은 화면은 가로 스크롤(feedback-k) 대신 구글 파이낸스식 "화면 맞춤"으로
   전환한다. 1120 viewBox를 뷰포트 폭으로 축소 렌더(≈0.31@375px)하고, 축소로
   읽을 수 없어지는 SVG 텍스트만 viewBox 단위로 확대 보정한다(겉보기 ≈10px대).
   연도 라벨은 절반(--alt, track.php가 부여)을 숨겨 겹침을 막고 선 굵기도
   보정한다. 툴팁(HTML, 실제 px)은 perf-chart.js가 표시폭/1120 배율을 곱해
   점을 계속 따라온다. 이 블록의 font-size는 차트 6클래스 예외(T12/8단계
   스캔 제외 규칙)에 그대로 포섭된다. */
@media (max-width: 767px) {
  .perf-chart-wrap .track-chart {
    min-width: 0;
    width: 100%;
    height: auto;
  }

  .perf-chart-wrap .track-chart__year {
    font-size: 34px;
  }

  .perf-chart-wrap .track-chart__year--alt {
    display: none;
  }

  .perf-chart-wrap .track-chart__growth-label {
    font-size: 40px;
  }

  .perf-chart-wrap .track-chart__baseline-label {
    font-size: 34px;
  }

  .perf-chart-wrap .track-chart__legend-label {
    font-size: 34px;
  }

  .perf-chart-wrap .track-chart__growth-line {
    stroke-width: 5;
  }

  .perf-chart-wrap .track-chart__growth-baseline {
    stroke-width: 3;
  }
}

.track-chart__axis {
  stroke: var(--hairline);
  stroke-width: 1.5;
}

/* feedback-q(2026-08-04, 사용자 재지시): 연도별 초과수익 막대 패널 삭제 —
   .track-chart__bar/.track-chart__bar-group/.track-chart__value(호버 라벨)
   규칙군 전부 은퇴. 라인 그래프만 남고, 연도별 수치는 점을 따라다니는
   툴팁(.chart-tip)과 SR 동반 표가 전달한다. */

/* feedback-p/q: 연도 호버 히트존(슬롯 전폭×전고 투명 rect, track.php가 렌더).
   2026-08-05 2차 피드백: 클릭 동기화 기능 은퇴("hover만으로 충분") — 클릭 시
   나타나던 포커스 사각 테두리가 불필요한 UI였다. 마우스 클릭에는 아무 표시도
   남기지 않되, 키보드 사용자의 포커스 표시는 :focus-visible로 유지한다
   (tabindex 히트존은 focus 시 툴팁을 띄우는 접근성 경로라 tabindex 자체는
   존치). */
.track-chart__hit:focus {
  outline: none;
}

.track-chart__hit:focus-visible {
  outline: 2px solid var(--iroom-yellow);
  outline-offset: -2px;
}

/* feedback-r(사용자: "막대 단위의 셰도우는 없었으면") — 호버 열 워시 삭제.
   호버 위치는 연도 점(yeardot)과 구간 강조선이 대신 말해준다. */

/* feedback-r: 구간 강조 — 호버 시 svg에 .is-range가 붙으면 베이스 두 선은
   흐려지고(선 자체를 흐리게 — 배경 아님), 오버레이(.track-chart__range)가
   호버 연도→현재 구간만 원래 색·굵기로 그린다. opacity 전환은 서버가 그려
   둔 정적 도형의 표시 강약일 뿐 수치와 무관하다. */
.track-chart.is-range .track-chart__growth-line:not(.track-chart__range) {
  opacity: 0.22;
}

.track-chart.is-range .track-chart__growth-dot,
.track-chart.is-range .track-chart__growth-label {
  opacity: 0.35;
}

/* feedback-q: 연도별 마커 점 — 기본은 숨김, perf-chart.js가 호버된 연도의
   쌍(is-active)에만 켠다. 색은 각 계열의 선 색 그대로, 흰 테두리로 선에서
   또렷이 분리한다. opacity 토글은 이미 서버가 그려 둔 정적 도형의
   표시/숨김일 뿐이라 수치 애니메이션 금지 경계와 무관하다. */
.track-chart__yeardot {
  opacity: 0;
  stroke: #fff;
  stroke-width: 2;
  pointer-events: none;
}

.track-chart__yeardot.is-active {
  opacity: 1;
}

.track-chart__yeardot--fund {
  fill: var(--iroom-blue);
}

.track-chart__yeardot--kospi {
  fill: var(--iroom-silver);
}

/* feedback-q: 점을 따라다니는 툴팁 — 호버된 연도의 이룸 점 옆에 붙는 작은
   카드. 좌표는 perf-chart.js가 서버 렌더 점(cx/cy)을 읽어 그대로 옮긴다
   (차트 좌표계 = CSS px 1:1, feedback-k). 위치 이동은 수치가 아닌 박스라
   transition 없이 즉시 점프 — 구글 파이낸스와 동일한 즉물적 반응. */
/* feedback-r: 박스는 점의 "상단 우측"에 뜨고(perf-chart.js), 내용은 간략
   어휘(연도/운용/코스피/초과/투자 시)만 담는다. 그림자 대신 헤어라인만 —
   회의 피드백의 "셰도우 없이" 방향과 결이 같다. */
.chart-tip {
  position: absolute;
  z-index: 5;
  width: 190px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}

.chart-tip__title {
  font-size: 13px;
  font-weight: var(--w-bold);
  color: var(--iroom-blue);
  margin-bottom: 4px;
}

.chart-tip__row {
  font-size: 13px;
  line-height: 1.65;
  color: var(--ink);
}

.chart-tip__since {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--hairline);
  font-size: 12px;
  line-height: 1.55;
  color: var(--muted);
}

/* feedback-p: 차트 호버 인포바 — 삭제된 연도별 표의 세 수치(운용/코스피/
   초과수익)와 "그 해 투자 시 현재 기준 누적"을 연도 단위로 보여주는 두 줄.
   min-height를 고정해 호버로 문구가 바뀌어도 아래 레이아웃이 출렁이지 않게
   한다. 문자열은 전부 서버 사전 렌더 — perf-chart.js는 echo만. */
/* feedback-q: 하단 고정 인포바(.perf-hover 카드)는 잘못된 해석이라 삭제 —
   사용자 지시는 "점 옆에 작은 박스가 같이 움직이는" 툴팁(.chart-tip, 8번
   섹션)이었다. 안내·고지 각주(__note)만 남긴다. */
.perf-hover__note {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--muted);
  text-align: justify;
}

/* feedback-p: Growth 섹션 안으로 들어온 시뮬레이터 — 독립 섹션 시절의 상단
   헤어라인/섹션 패딩(.simulator 기본 규칙)을 무효화하고 위 요소와의 간격만
   남긴다. */
.simulator--embedded {
  padding: 0;
  border-top: 0;
  margin-top: 40px;
}

.simulator__lede {
  font-size: 15px;
  color: var(--muted);
  margin-bottom: 16px;
}

.track-chart__year {
  font-family: var(--font-num-ui);
  font-size: 13px;
  fill: var(--muted);
  font-variant-numeric: tabular-nums;
}

.track-chart__empty {
  font-family: var(--font-num-ui);
  font-size: 13px;
  fill: var(--muted);
}

/* P2-5: 8단계 스케일(12/13/15/16/19/24/32/44) 밖의 값을 새로 만들지 않는다 —
   15px는 이미 스케일에 존재하는 단계. 이 요소는 SVG가 아니라 일반 HTML
   <p>(문장 안에 숫자가 섞인 문구)라 §6 #33의 6종 SVG 텍스트에는 포함되지
   않는다 — --font-body(본문 어휘)를 쓴다. */
.track-chart__cumulative {
  margin-top: 20px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: var(--w-semibold);
  color: var(--iroom-blue);
  font-variant-numeric: tabular-nums;
}

/* feedback-o: .track-chart__source-note 삭제 — 유일 소비처였던 performance.php의
   출처 표기("출처: 회사소개서 202509 Ver3")가 Basis 섹션과 함께 제거됐다.
   (feedback-h가 이 규칙을 12->13px로 올렸던 이유 — "규제상 필수 표기는 잔글씨로
   두지 않는다" — 는 남아 있는 .simulator-disclaimer 13px에 그대로 적용된다.) */

/* D-data: long-term growth panel (app/track.php track_chart_svg()) —
   two static polylines (이룸/fund vs KOSPI), never path-drawn/animated
   (BRAND.md §5 rule 3, same boundary as the alpha bars below). J8:
   --iroom-silver stays the chart's KOSPI-series color, now on the line
   instead of the retired per-bar comparison annotation. */
.track-chart__growth-line {
  fill: none;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* feedback-k: viewBox가 760→1120으로 재스케일되면서 1 사용자 단위 = 1 CSS px가
   됐다. 선 굵기는 이전과 같은 렌더 결과를 유지하도록 같은 배수(1120/760)를
   곱한다 — 3→4.4, 2→3, 1→1.5. */
.track-chart__growth-line--fund {
  stroke: var(--iroom-blue);
  stroke-width: 4.4;
}

.track-chart__growth-line--kospi {
  stroke: var(--iroom-silver);
  stroke-width: 3;
}

.track-chart__growth-dot--fund {
  fill: var(--iroom-blue);
}

.track-chart__growth-dot--kospi {
  fill: var(--iroom-silver);
}

.track-chart__growth-baseline {
  stroke: var(--hairline);
  stroke-width: 1.5;
  stroke-dasharray: 4.5 4.5;
}

/* P2-8/D7: 12px -> 13px — 차트 내부 스케일을 4단(12/13/15/16)에서
   3단(13/15/16)으로 줄인다(.track-chart__legend-label과 함께). */
.track-chart__baseline-label {
  font-family: var(--font-num-ui);
  font-size: 13px;
  fill: var(--muted);
}

.track-chart__growth-label {
  font-family: var(--font-num-ui);
  font-size: 16px;
  font-weight: var(--w-bold);
  font-variant-numeric: tabular-nums;
}

.track-chart__growth-label--fund {
  fill: var(--iroom-blue);
}

/* feedback-h 대비 실측: --iroom-silver(#8b8d8e)는 흰 배경 대비 3.33:1로,
   16px 굵은 텍스트(대문자 aa 기준 "large text" 임계 18.66px 미만)에
   WCAG AA 4.5:1을 충족하지 못한다(그래픽 요소인 선/점/범례 스와치는 3:1
   기준만 적용돼 그대로 실버를 쓸 수 있지만, 이 라벨은 실제 수치를 전달하는
   텍스트다). --muted(#6b6e7e, 5.05:1)로 바꿔 AA를 통과시키되, 선·점·범례는
   그대로 실버를 유지해 KOSPI 계열의 시각적 구분은 잃지 않는다. */
.track-chart__growth-label--kospi {
  fill: var(--muted);
}

.track-chart__legend-swatch--fund {
  fill: var(--iroom-blue);
}

.track-chart__legend-swatch--kospi {
  fill: var(--iroom-silver);
}

/* P2-8/D7: 12px -> 13px (위 __baseline-label과 함께 4단 -> 3단). */
.track-chart__legend-label {
  font-family: var(--font-num-ui);
  font-size: 13px;
  fill: var(--muted);
}

/* ==========================================================================
   8b. 투자 시뮬레이터 (P2-14/C9, 게이트 상태로 출시 — config()['simulator_enabled']
   기본 false이므로 이 섹션은 현재 어떤 페이지에도 렌더되지 않는다. 스탯/차트
   (8번)와 동일한 어휘를 쓴다. 값 텍스트는 assets/js/simulator.js가 즉시 채워
   넣는 최종값뿐 — 카운트업 없음(BRAND.md §5 rule 3).
   ========================================================================== */
.simulator {
  padding: var(--space-section-sm) 0;
  border-top: 1px solid var(--hairline);
}

/* feedback-h: "자기완결적 카드" 요청 — 시뮬레이터는 이 페이지에서 유일하게
   입력을 받는 상호작용 요소라, 주변 서술형 섹션과 같은 흰 배경 위 텍스트로만
   두면 "여기서 뭔가 조작할 수 있다"는 신호가 약하다. --bg-alt(무채색 계조,
   새 색 아님) 배경 + 헤어라인 테두리로 카드 프레임을 주고, 기존 --radius
   토큰을 재사용한다. simulator.js는 `form.closest('.simulator')`로 결과
   슬롯을 찾으므로(계약 불변) 이 카드는 .simulator의 자식 래퍼일 뿐 그
   탐색 경로를 바꾸지 않는다. */
.simulator-card {
  background: var(--bg-alt);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 28px 24px;
}

@media (min-width: 768px) {
  .simulator-card {
    padding: 40px;
  }
}

.simulator-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 24px;
  margin: 0 0 32px;
}

.simulator-form__row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.simulator-form__label {
  font-size: 13px;
  color: var(--muted);
}

.simulator-form__select,
.simulator-form__input {
  font-family: var(--font-body);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  min-width: 200px;
}

.simulator-form__select:focus-visible,
.simulator-form__input:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
}

.simulator-result {
  display: flex;
  flex-direction: column;
  /* feedback-l: 행 사이 간격 8 -> 20px — 각 행이 라벨+값+비교 바의 묶음이
     되면서 묶음 간 구분이 더 필요해졌다. */
  gap: 20px;
  padding: 20px 0;
  border-top: 1px solid var(--hairline);
}

.simulator-result__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.simulator-result__label {
  font-size: 13px;
  color: var(--muted);
}

/* feedback-l "dynamic infographic": 원금/이룸/코스피 세 금액을 같은 눈금으로
   비교하는 가로 바. simulator.js가 세 최종 금액의 비율(최댓값 = 100%)로
   width를 즉시 세팅한다. width에 transition을 걸지 않는다 — 바가 자라나는
   중간 프레임은 실제와 다른 비율을 보여주게 되므로 BRAND.md §5-3(수치
   애니메이션 금지)이 차트에 적용하는 것과 같은 경계를 여기도 지킨다.
   색: 이룸 = 주조색, 코스피 = 실버(차트의 KOSPI 계열색 그대로), 원금 =
   헤어라인(무채색 기준선). 새 색 없음. */
.simulator-result__track {
  margin-top: 8px;
  height: 12px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.simulator-result__bar {
  display: block;
  height: 100%;
  width: 0;
}

.simulator-result__bar--fund {
  background: var(--iroom-blue);
}

.simulator-result__bar--kospi {
  background: var(--iroom-silver);
}

.simulator-result__bar--principal {
  background: var(--hairline);
}


/* feedback-h: 24 -> 32px — "결과 값은 크고 분명하게" 요청. 누적 성과 요약의
   .stat-num과 같은 세리프+굵게 어휘를 공유해 이 페이지 전체의 "큰 숫자는
   이렇게 강조한다"는 문법을 시뮬레이터 결과에도 일관 적용한다. */
.simulator-result__value {
  /* P1-1: --serif-en(Times New Roman) 폐기 — 텍스트가 simulator.js:41에서
     항상 '원'으로 끝나 TNR(숫자)과 나눔명조(한글, 폴백)가 섞여 그려지는
     혼합 런이었다. --font-num-perf(나눔명조)는 숫자·한글 글리프를 모두
     가지므로 혼합 런이 원천 소멸한다. */
  font-family: var(--font-num-perf);
  /* feedback-o(2026-08-03, 사용자: "예시금액 숫자 폰트만 사이즈가 큰데 다른
     숫자들이랑 같게") — 32 -> 19px. 시뮬레이터 결과 3행(원금/이룸/코스피)이
     이제 모두 19px로 같은 크기다. 세 값은 같은 질문에 대한 세 답이라 크기로
     서열을 매길 이유가 없었고, 어느 쪽이 이룸 값인지는 아래 --sub의 색 대비와
     각 행의 라벨·비교 바가 이미 말해준다. */
  font-size: 19px;
  font-weight: var(--w-bold);
  color: var(--iroom-blue);
  font-variant-numeric: tabular-nums;
}

/* feedback-l 보조 값(원금/코스피) — 이룸 예시 금액(네이비)과 같은 크기·서체를
   쓰되 색만 muted(#6b6e7e, 흰 배경 대비 5.05:1로 AA 통과)로 낮춘다.
   feedback-o에서 크기 차이(19 vs 32px)는 걷어냈고 색 대비만 남겼다.
   반드시 베이스 규칙 뒤에 와야 한다(동일 특이도 — 순서가 승자를 정한다). */
.simulator-result__value--sub {
  color: var(--muted);
}

.simulator-disclaimer {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
  font-size: 13px;
  line-height: 1.8;
  color: var(--muted);
}

/* ==========================================================================
   9. 인사이트 — 공통 베이스
   ========================================================================== */
/* §5.2 dead code: .insight-card__date/.insight-card__title(마크업 0건)와
   .insight-item__title(마크업 0건)을 그룹 셀렉터에서 제거. .insight-item__date만
   실사용이라 존치 — spec 2026-08-04 §2-④부터는 홈 뉴스 카드의 날짜가 이 클래스를
   소비한다(T6의 13px 5종 세트 구성원). */
.insight-item__date {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   10. 푸터 (head.php/foot.php로 전 페이지 공유)
   ========================================================================== */
.site-footer {
  background: var(--footer-bg);
  color: var(--footer-ink);
  padding: 40px 0 24px;
  /* footer는 페이지 끝의 유일한 네이비 블록(feedback-a Item 1 — .cta-band는
     라이트 섹션으로 바뀌어 더 이상 네이비가 연달아 오지 않는다). 이 헤어라인은
     이제 흰 cta-band와 네이비 footer 사이의 옅은 전환선 역할만 한다. */
  border-top: 1px solid var(--on-navy-hairline);
}

.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.site-footer__logo {
  /* BRAND.md §2: 워드마크 웹 최소 렌더 폭 120px 하한 — 132px에서 줄이되
     120px 밑으로는 내려가지 않는다. */
  width: 120px;
  height: auto;
}

/* 푸터 내비게이션 — JS 없이도 전 페이지 도달 가능한 no-JS 폴백(P1-4). */
.footer-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.footer-nav__link {
  font-size: 13px;
  color: var(--footer-muted);
  transition: color var(--dur-fast) var(--ease);
}

.footer-nav__link:hover {
  color: var(--footer-ink);
}

.footer-info__brand {
  font-size: 16px;
  font-weight: var(--w-bold);
  margin-bottom: 12px;
}

.footer-info__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 13px;
  color: var(--footer-muted);
  margin-bottom: 24px;
  /* P3-6: 사업자등록번호·전화번호 선언 위생 — 판정G에 따라 두 서체 모두
     기본 숫자가 이미 등폭이라 시각 효과는 없다(no-op). BRAND.md:124 문언
     준수 + 향후 서체 교체 대비용. */
  font-variant-numeric: tabular-nums;
}

.footer-disclaimer {
  font-size: 12px;
  color: var(--footer-muted);
  padding-top: 20px;
  border-top: 1px solid var(--footer-hairline);
  margin-bottom: 16px;
}

.footer-copy {
  font-size: 12px;
  color: var(--footer-muted);
}

/* ==========================================================================
   11. reveal-on-scroll / 모션 가드
   ========================================================================== */
/* Hiding-then-reveal only applies once JS is confirmed running (html.js,
   set by a tiny inline script in app/templates/head.php before first
   paint). Without JS, .reveal content stays visible by default so a
   no-JS/slow-JS/broken-JS visitor never sees permanently-hidden sections. */
html.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

html.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  html.js .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   12. 에디토리얼 레이아웃 베이스 (채택된 단일 디자인 언어)
   나눔명조 국문 대제목 중심의 저널 레이아웃, 그리드 분할, 인사이트를
   전면에 세운 리서치 하우스 톤. 옐로는 얇은 규칙선/마커로만 절제 사용.
   변형 스코프 없이 전 페이지 공통 베이스로 적용된다.
   ========================================================================== */

/* ══════════════════════════════════════════════════════════════════════════
   feedback-s(2026-08-04, 사용자 확정): 홈 히어로 = H안 실구현.
   설산(피크 우측) 배경 위에 (1) 무음 루프 등반 모션 영상, (2) BS16 정품
   모티프 프레임(피크 apex 중심), (3) 좌측 텍스트. 영상은 사진 연출이라
   BRAND §5-3(수치 애니메이션 금지)과 무관하며, 모션 민감 사용자는 poster
   스틸로 자동 대체된다.
   ══════════════════════════════════════════════════════════════════════════ */
.home-hero {
  position: relative;
  /* 사용자(2026-08-05): "어두운 화면이 하단 끝까지 커버" — 데스크톱 기본
     배율에서 히어로가 첫 화면 전체를 채운다(88vh -> 100vh). 모바일 72vh는
     주소창 변동(vh 점프) 때문에 그대로 둔다. */
  height: 100vh;
  min-height: 560px;
  overflow: hidden;
  background: var(--iroom-blue);
}

.home-hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.home-hero__fallback {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .home-hero__video {
    display: none;
  }

  .home-hero__fallback {
    display: block;
  }
}

.home-hero__scrim {
  position: absolute;
  inset: 0;
  /* 2026-08-05 2차 피드백: "블루 틴트와 어둡기가 과하다" — 각 정지점의 알파를
     30% 감산(0.72->0.50, 0.38->0.27, 0.06->0.04). 색상 자체는 기존과 동일한
     --iroom-blue-hover(#16123F) 파생 rgba. */
  background: linear-gradient(100deg, rgba(22, 18, 63, 0.50) 0%, rgba(22, 18, 63, 0.27) 46%, rgba(22, 18, 63, 0.04) 74%, rgba(22, 18, 63, 0) 100%);
}

/* BS16 정품 모티프 — 원본 패스 비율·두께 그대로(왜곡 금지). 중심 좌표는
   피크 apex 실측값(1280x792 기준 73.3%/25.8%). 좁은 화면에서는 cover 크롭으로
   apex 위치가 틀어지므로 프레임을 감춘다. */
.home-hero__frame {
  position: absolute;
  left: 73.3%;
  top: 25.8%;
  transform: translate(-50%, -50%);
  width: 372px;
  height: auto;
  z-index: 2;
  opacity: 0.96;
}

@media (max-width: 1023px) {
  .home-hero__frame {
    display: none;
  }

  .home-hero {
    height: 72vh;
  }
}

.home-hero > .container {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  align-items: center;
}

.home-hero__text {
  max-width: 560px;
}

.home-hero .hero__eyebrow--rule {
  color: var(--on-navy-muted);
}

.home-hero .hero__headline {
  color: var(--on-navy-ink);
}

.home-hero__sub {
  margin-top: 4px;
  /* 8단계 스케일(P2-5) 준수 — 목업의 17px는 스케일 밖이라 16px로 흡수. */
  font-size: 16px;
  line-height: 1.8;
  color: var(--on-navy-ink-soft);
  margin-bottom: 32px;
  word-break: keep-all;
}

/* (2026-08-05 2차 피드백: .home-intro 도입 문단 섹션 은퇴 — 가치 문구는
   히어로 서브 한 줄이 담당한다.) */

/* 오버레이 헤더 — 홈 히어로 위 투명 헤더(head.php hero_overlay 옵션).
   반전 워드마크 + 흰 내비 + 옐로 CTA. 모바일 드로어는 기존 그대로다. */
.site-header--overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  background: transparent;
  border-bottom: 0;
}

.site-header--overlay .brand__logo--full,
.site-header--overlay .brand__logo--compact {
  display: none;
}

.brand__logo--reversed {
  display: none;
  width: 150px;
  height: auto;
}

.site-header--overlay .brand__logo--reversed {
  display: block;
}

.site-header--overlay .site-nav__link {
  color: var(--on-navy-ink-soft);
}

.site-header--overlay .site-nav__link.is-active::after {
  background: var(--iroom-yellow);
}

/* 사용자(2026-08-05): 홈 오버레이 헤더의 상담 문의 CTA는 옐로 대신 히어로의
   회사소개 버튼과 같은 고스트(투명 배경·흰 테두리·흰 글자)로 통일. */
.site-header--overlay .header-actions .btn--primary {
  background: transparent;
  border-color: var(--on-navy-ink-soft);
  color: var(--on-navy-ink);
}

.site-header--overlay .header-actions .btn--primary:hover {
  border-color: var(--on-navy-ink);
}

.site-header--overlay .nav-toggle__bar {
  background: var(--on-navy-ink);
}

/* 트랙 카드 — 히어로 아래 통제 성과 모듈(H안). 기존 rail 스탯을 카드
   프레임으로 감싼다. 수치·고지·링크는 기존 어휘(stat_num/stat__label/
   stat-band__note--summary/link-arrow) 재사용. */
.track-card {
  padding: 72px 0 40px;
}

/* 사용자(2026-08-05): 회색 카드 프레임 제거 — 운용성과 섹션도 주변 섹션과
   같은 흰 배경 위에 그대로 놓인다(.track-card__box는 래퍼로만 남음). */

.track-card__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.track-card__basis {
  font-size: 13px;
  color: var(--muted);
}

.track-card__grid {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 28px;
}

@media (min-width: 640px) {
  .track-card__grid {
    grid-template-columns: repeat(3, 1fr);
    column-gap: 44px;
    row-gap: 0;
  }

  .track-card__item + .track-card__item {
    border-left: 1px solid var(--hairline);
    padding-left: 44px;
  }
}

.track-card .stat-band__note {
  border-top: 1px solid var(--hairline);
  margin-top: 28px;
}

.track-card .link-arrow {
  margin-top: 20px;
}

/* (구) 에디토리얼 히어로 — 홈이 home-hero로 전환된 뒤에도 다른 페이지가
   재사용할 수 있는 베이스로 유지한다. */
.hero--editorial {
  padding: 64px 0 0;
  border-bottom: 1px solid var(--hairline);
}

@media (min-width: 768px) {
  .hero--editorial {
    padding: 96px 0 0;
  }
}

@media (min-width: 1024px) {
  .hero--editorial {
    padding: 128px 0 0;
  }
}

.editorial-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  padding-bottom: 56px;
}

@media (min-width: 1024px) {
  .editorial-grid {
    grid-template-columns: 1.6fr 1fr;
    gap: 0;
    padding-bottom: 0;
  }
}

.editorial-grid__lead {
  padding-bottom: 0;
}

@media (min-width: 1024px) {
  .editorial-grid__lead {
    padding: 0 64px 72px 0;
    border-right: 1px solid var(--hairline);
  }
}

.hero__eyebrow--rule {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--w-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 24px;
}

.hero__eyebrow--rule::before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 3px;
  background: var(--iroom-yellow);
}

/* feedback-i(2026-07-30, 사용자): 국문 표시 텍스트는 전부 고딕(본고딕)으로
   통일한다 — 세리프(나눔명조)는 영문 헤딩(.section-title__en--myeongjo,
   .philosophy-card__title)과 성과 표시 숫자(--font-num-perf)에만 남는다.
   국문에는 --w-black(800)이 없으므로(Noto Sans KR range 400..700) 700을 쓴다.
   클래스명도 --myeongjo 접미사를 떼어 실제 서체와 일치시켰다(소비처 1곳뿐이라
   section-title__en--myeongjo의 "개명 비용 > 이득" 오너 결정과 달리 개명이 싸다).
   H1급 텍스트는 주조색 남색(feedback-i Item 2 — BRAND §1 "헤딩" 용도 그대로). */
.hero__headline {
  font-family: var(--font-body);
  font-weight: var(--w-bold);
  font-size: 32px;
  line-height: 1.42;
  color: var(--iroom-blue);
  margin-bottom: 24px;
  letter-spacing: -0.01em;
}

@media (min-width: 768px) {
  .hero__headline {
    font-size: 44px;
  }
}

.hero__sub {
  font-size: 16px;
  color: var(--muted);
  max-width: 48ch;
  margin-bottom: 36px;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* P3-8: 홈 히어로 3번째(보조) 링크 — 버튼 2개보다 한 단계 절제된 텍스트
   링크로, 트랙레코드 레일(#track-record)로 스크롤 앵커한다. */
.hero__track-link {
  display: inline-flex;
  margin-top: 20px;
  font-size: 15px;
}

.editorial-grid__rail {
  padding: 40px 0 56px;
}

@media (min-width: 1024px) {
  .editorial-grid__rail {
    padding: 0 0 72px 56px;
  }
}

.rail__heading {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--w-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* P3-1: 골드는 카테고리 라벨 전용 — eyebrow 라벨류는 muted로 통일 */
  color: var(--muted);
  margin-bottom: 24px;
}

.rail__stats {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 28px;
}

.rail__stats .stat {
  padding-left: 14px;
  border-left: 3px solid var(--iroom-yellow);
}

/* feedback-l: .rail__stats .stat-num { font-size: 32px } 오버라이드 삭제 —
   베이스 .stat-num이 이제 모든 폭에서 32px이라(44px 승격 규칙 삭제) 이
   선언은 no-op 중복이 됐다. */

/* feedback-l(2026-07-30, 사용자: "Recent도 테이블 다 보고 나서 정보가 노이즈
   처럼 오는 느낌") — .rail__stats--secondary(최근 3개년 보조 스탯) 삭제.
   유일 소비처였던 performance.php의 Recent 섹션이 제거됐다: 바로 위 "연도별
   성과" 표가 같은 세 값(2023/2024/2025 운용수익률)을 이미 보여주고 있어
   중복이었다. */

.section-title__en--myeongjo {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: var(--w-black);
  font-size: 24px;
  letter-spacing: 0;
}

/* 서브페이지 실제 <h1>(about/philosophy/contact의 static-page__head,
   insights/disclosure의 list-page__head, post.php 404의 post-detail__head)만
   격상한다 — 홈페이지가 같은 클래스를 <h2>(Philosophy/Insights/Disclosure
   섹션 제목)로 재사용하는 곳은 그대로 24px 유지(P2-5). h1:h2 = 44:24(≥1.5),
   32:24(모바일, ≥1.3) 모두 수용 기준을 만족한다. */
.static-page__head .section-title__en--myeongjo,
.list-page__head .section-title__en--myeongjo,
.post-detail__head .section-title__en--myeongjo {
  font-size: 32px;
  /* feedback-i Item 2: H1급 텍스트는 주조색 남색 — BRAND §1 IROOM BLUE의
     "헤딩" 용도 그대로. 섹션 h2(24px 베이스)는 ink를 유지해 h1과의 위계를
     크기+색 두 축으로 만든다. */
  color: var(--iroom-blue);
}

@media (min-width: 768px) {
  .static-page__head .section-title__en--myeongjo,
  .list-page__head .section-title__en--myeongjo,
  .post-detail__head .section-title__en--myeongjo {
    font-size: 44px;
  }
}

/* P2-4: .en-sub는 라틴 전용 어휘로 남긴다(현재 소비처 0 — 홈 Insights가
   spec 2026-08-04 §2-④로 kr-sub 표준에 합류하며 마지막 1건이 사라졌다.
   라틴 서브가 다시 필요해지면 이 클래스를 쓴다). 0.14em + uppercase 트래킹은
   라틴 대문자 eyebrow 어휘이고, 한글에는 uppercase가 아무 효과 없는 죽은
   선언이라 국문 서브에 재사용하지 않는다(BRAND §4). */
.section-title__en--myeongjo .en-sub {
  display: block;
  font-family: var(--font-body);
  font-weight: var(--w-semibold);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 10px;
}

/* P2-4: 한글 서브 26건 전용 — 트래킹/uppercase 없이 일반 eyebrow 어휘만 쓴다. */
.section-title__en--myeongjo .kr-sub {
  display: block;
  font-family: var(--font-body);
  font-weight: var(--w-semibold);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--muted);
  margin-top: 10px;
}

/* spec 2026-08-04 §2-④: 시안 I(tI-news) 이식 — 홈 인사이트는 뉴스 그리드
   3카드다(에디토리얼형 .editorial-insights__* 어휘는 통째로 은퇴). 카드 제목은
   목록 "행" 어휘(15px/500, T5)가 아니라 스케일 문서의 카드 소제목 단(19px).
   태그는 골드 텍스트 파생색 + 한글 라벨 표준(자간 0.02em, uppercase 없음 —
   시안 I 검증에서 잡힌 위반의 교정판을 그대로 계승). 날짜는 기존
   .insight-item__date(13px, T6 5종 세트)를 재사용한다. */
.insights {
  padding: 56px 0 80px;
}

@media (min-width: 1024px) {
  .insights {
    padding: 80px 0 var(--space-section);
  }
}

.news-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin: 36px 0 32px;
}

@media (min-width: 1024px) {
  .news-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
}

.news-card {
  background: var(--bg);
  border: 1px solid var(--hairline);
  padding: 28px 26px 24px;
}

.news-card__tag {
  font-size: 13px;
  font-weight: var(--w-bold);
  color: var(--iroom-gold-text);
  letter-spacing: 0.02em;
}

.news-card__title {
  font-family: var(--font-body);
  font-size: 19px;
  font-weight: var(--w-semibold);
  line-height: 1.55;
  margin: 12px 0 18px;
  color: var(--ink);
}

/* ==========================================================================
   13. 홈페이지 전용 컴포넌트 + 철학 카드 어휘
   등대 철학 밴드 / 공시·보도 리스트 / 상담 CTA 밴드. 철학 카드(.philosophy-grid/
   .philosophy-card__*)는 spec 2026-08-04 §2-②로 홈에서 은퇴했지만 philosophy.php의
   6원칙 그리드(.principle-grid)가 같은 어휘를 계속 소비하므로 규칙은 존속한다.
   (.philosophy 섹션 패딩 3블록만 소비처 0으로 함께 제거됨)
   ========================================================================== */

/* spec 2026-08-04 §2-②: 시안 I(tI-vband) 이식 — 등대 모션 밴드가 홈 투자철학
   섹션이다. 스크림은 히어로와 동일한 --iroom-blue-hover(#16123F) 파생 rgba만
   사용(팔레트 외 색 금지). prefers-reduced-motion은 히어로와 같은
   video/fallback 패턴. */
.philosophy-band {
  position: relative;
  min-height: 480px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--iroom-blue);
}

.philosophy-band__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.philosophy-band__fallback {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .philosophy-band__video {
    display: none;
  }

  .philosophy-band__fallback {
    display: block;
  }
}

.philosophy-band__scrim {
  position: absolute;
  inset: 0;
  /* 2026-08-05 2차 피드백: 히어로와 동일하게 어둡기 30% 감산(0.55->0.39) */
  background: rgba(22, 18, 63, 0.39);
}

.philosophy-band__inner {
  position: relative;
  z-index: 2;
  padding: 96px 0;
  max-width: 640px;
}

.philosophy-band .section-title__en--myeongjo {
  color: var(--on-navy-ink);
  margin-bottom: 22px;
}

.philosophy-band .kr-sub {
  color: var(--on-navy-muted);
}

.philosophy-band__inner > p {
  color: var(--on-navy-ink-soft);
  margin-bottom: 24px;
}

.philosophy-band .link-arrow {
  color: var(--on-navy-ink);
}

.philosophy-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin: 36px 0 40px;
}

@media (min-width: 768px) {
  .philosophy-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
}

.philosophy-card {
  padding-top: 20px;
  border-top: 2px solid var(--ink);
  transition: box-shadow var(--dur-fast) var(--ease);
}

/* --shadow-sm 채택처(§5.2): 카드에 은은한 hover 리프트 */
.philosophy-card:hover {
  box-shadow: var(--shadow-sm);
}

.philosophy-card__num {
  /* typography-spec P2-1: eyebrow 5형제(.hero__eyebrow--rule/.rail__heading/
     .static-section__eyebrow/.en-sub)와 동일 어휘(sans 13/600/0.14em)로
     통일한다. 세리프 표시는 --font-display 전용이며 라벨류엔 쓰지 않는다 —
     이 요소의 텍스트(01~06)는 라틴 숫자라 글리프 대체 문제는 없었지만,
     역할군 내에서 홀로 세리프였던 불일치와, 이 600이 TNR/명조 어느 쪽에도
     없어 700으로 스냅되던 문제(D1/판정 A)를 함께 해소한다. */
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--w-semibold);
  letter-spacing: 0.14em;
  /* P3-1: 골드는 카테고리 라벨 전용 — 카드 인덱스 번호는 muted */
  color: var(--muted);
  margin-bottom: 14px;
}

.philosophy-card__title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: var(--w-bold);
  color: var(--ink);
  margin-bottom: 12px;
}

.philosophy-card__text {
  font-size: 15px;
  line-height: 1.8;
  color: var(--muted);
}

/* 2026-08-05 2차 피드백: 인사이트·공시가 연속 흰 배경이라 지루하다는 지적 —
   공시를 회색(--bg-alt)으로. 판단 근거: 새 홈 리듬이 다크 히어로 -> 흰(성과) ->
   남색(밴드) -> 흰(인사이트) -> 회색(공시) -> 흰(CTA) -> 남색(푸터)으로 완전
   교대가 된다. 인사이트를 회색으로 하면 공시+CTA가 다시 연속 흰색이 되어
   사용자 제안(공시 회색)이 리듬상 정답이다. 배경이 구획을 만들므로 상단
   헤어라인은 제거. */
.disclosure {
  padding: 56px 0 var(--space-section-sm);
  background: var(--bg-alt);
}

@media (min-width: 1024px) {
  .disclosure {
    padding: var(--space-section-sm) 0 96px;
  }
}

.disclosure-list {
  display: flex;
  flex-direction: column;
  margin: 32px 0 28px;
}

.disclosure-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--hairline);
  font-size: 15px;
}

.disclosure-item:last-child {
  border-bottom: 1px solid var(--hairline);
}

.disclosure-item__type {
  font-size: 12px;
  font-weight: var(--w-bold);
  color: var(--iroom-gold-text);
  white-space: nowrap;
}

.disclosure-item__title {
  color: var(--ink);
  font-weight: var(--w-medium);
  transition: color var(--dur-fast) var(--ease);
}

.disclosure-item__title:hover {
  color: var(--iroom-blue);
}

.disclosure-item__date {
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .disclosure-item {
    grid-template-columns: auto 1fr;
    grid-template-areas: 'type date' 'title title';
    row-gap: 4px;
  }

  .disclosure-item__type {
    grid-area: type;
  }

  .disclosure-item__date {
    grid-area: date;
    justify-self: end;
  }

  .disclosure-item__title {
    grid-area: title;
  }
}

/* 정체성 방어 배너(.identity-notice) 제거(P2-2) — 이 배너의 한 문장은
   app/templates/foot.php의 .footer-disclaimer 문단으로 병합되어 바로 아래
   푸터에서 계속 노출된다. index.php에는 더 이상 이 섹션이 없다. */

/* 상담 CTA 밴드 (feedback-a Item 1) — 페이지 맨 아래 네이비 밴드가 바로 아래
   .site-footer(역시 네이비)와 맞붙어 헤어라인 하나로만 구분되던 문제를
   고친다. 이 섹션은 이제 라이트 섹션(흰 배경 + 상단 헤어라인)이고, 페이지
   끝에서 유일한 네이비 블록은 footer 하나뿐이다. 반전 워드마크는 여기 넣지
   않는다(P2-2 — 페이지 전체에 반전 로고 1회만 노출, 푸터가 그 자리를 맡는다).
   좌측 h2+전화, 우측 primary 버튼 1개의 컴팩트 구성은 그대로 유지. */
.cta-band {
  background: var(--bg);
  color: var(--ink);
  padding: 40px 0;
  border-top: 1px solid var(--hairline);
}

@media (min-width: 768px) {
  .cta-band {
    padding: 48px 0;
  }
}

.cta-band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  justify-content: space-between;
}

.cta-band__title {
  /* feedback-i: 국문("투자 상담 문의") — 고딕 통일 */
  font-family: var(--font-body);
  font-size: 19px;
  font-weight: var(--w-bold);
  color: var(--iroom-blue);
  margin-bottom: 4px;
}

/* P2-1+P3-3: 이탤릭/세리프 제거 — sans + tabular-nums(자식 .num) + bold.
   흰 배경 위라 네이비 텍스트(feedback-a Item 1)로 대비를 확보한다. */
.cta-band__phone {
  /* D3: 전화번호는 "기능 숫자" 경계 — --font-num-ui */
  font-family: var(--font-num-ui);
  font-weight: var(--w-bold);
  font-size: 16px;
  flex: 1 1 260px;
  color: var(--iroom-blue);
}

/* ==========================================================================
   14. 목록 페이지 — insights.php / disclosure.php
   ========================================================================== */
.list-page {
  padding: 56px 0 80px;
}

@media (min-width: 1024px) {
  .list-page {
    padding: 80px 0 var(--space-section);
  }
}

.list-page__head {
  padding-bottom: 28px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--hairline);
}

/* 필터 탭 — 999px 필 배경 대신 텍스트 탭 + inset 밑줄(P3-1). site-nav__link의
   좌→우 성장 밑줄과 동일한 어휘를 재사용해 사이트 전체 기하 어휘를 통일한다. */
.list-tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 28px;
}

.list-tabs__link {
  display: inline-flex;
  align-items: center;
  position: relative;
  padding: 8px 2px;
  font-size: 15px;
  font-weight: var(--w-semibold);
  color: var(--muted);
  transition: color var(--dur-fast) var(--ease);
}

.list-tabs__link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--iroom-blue);
  transition: right var(--dur) var(--ease);
}

.list-tabs__link:hover {
  color: var(--iroom-blue);
}

.list-tabs__link.is-active {
  color: var(--iroom-blue);
}

.list-tabs__link.is-active::after {
  right: 0;
}

.list-count {
  margin: 28px 0 4px;
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.list-empty {
  padding: 56px 0;
  border-top: 1px solid var(--hairline);
  text-align: center;
  font-size: 15px;
  color: var(--muted);
}

.post-list {
  display: flex;
  flex-direction: column;
  margin: 20px 0 40px;
}

.post-list__item {
  border-top: 1px solid var(--hairline);
}

.post-list__item:last-child {
  border-bottom: 1px solid var(--hairline);
}

.post-list__link {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 18px;
  padding: 18px 4px;
  transition: background-color var(--dur-fast) var(--ease);
}

.post-list__link:hover {
  background: var(--bg-alt);
}

.post-list__link:hover .post-list__title {
  color: var(--iroom-blue);
}

.post-list__link:hover .post-list__arrow {
  transform: translateX(4px);
}

.post-list__type {
  font-size: 12px;
  font-weight: var(--w-bold);
  color: var(--iroom-gold-text);
  white-space: nowrap;
}

.post-list__title {
  font-size: 15px;
  font-weight: var(--w-medium);
  color: var(--ink);
  transition: color var(--dur-fast) var(--ease);
}

.post-list__date {
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.post-list__arrow {
  color: var(--iroom-blue);
  transition: transform var(--dur-fast) var(--ease);
}

@media (max-width: 767px) {
  .post-list__link {
    grid-template-columns: auto 1fr;
    grid-template-areas: 'type date' 'title title';
    row-gap: 6px;
  }

  .post-list__type {
    grid-area: type;
  }

  .post-list__date {
    grid-area: date;
    justify-self: end;
  }

  .post-list__title {
    grid-area: title;
  }

  .post-list__arrow {
    display: none;
  }
}

/* 도서 표지 썸네일 그리드 (P2-8) — app/templates/book-grid.php. insights.php
   도서 탭(post-list.php가 분기)과 philosophy.php Library 섹션이 공유한다.
   표지 규격이 제각각(0.66~0.69 세로비)이라 --cover 카드 프레임이 크롭 없이
   흡수하고, 무표지 글은 같은 프레임 안에 세리프 제목으로 대체한다. */
.book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 28px;
  margin: 20px 0 40px;
}

.book-card__link {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.book-card__cover {
  display: block;
  aspect-ratio: 3 / 4;
  background: var(--bg-alt);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

/* --shadow-md 채택처(§5.2): 표지 카드는 면적이 커 --shadow-sm(.philosophy-card
   전용)보다 두꺼운 그림자가 리프트감을 준다. */
.book-card__link:hover .book-card__cover {
  border-color: var(--iroom-blue);
  box-shadow: var(--shadow-md);
}

.book-card__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 무표지 폴백 — 깨진 이미지 아이콘 대신 프레임 안에 제목을 채운다. P3-7:
   book-grid.php:43(fallback)과 :46(title)이 같은 문자열을 렌더하므로
   .book-card__title(§6 #11, sans 15/500)과 동일 어휘로 맞춘다 — 표지 없는
   항목이 추가되면 한 카드 안에 같은 제목이 두 서체로 나란히 보이는 사고를
   막는다. */
.book-card__fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 16px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: var(--w-medium);
  line-height: 1.5;
  color: var(--muted);
  text-align: center;
}

.book-card__title {
  font-size: 15px;
  font-weight: var(--w-medium);
  line-height: 1.5;
  color: var(--ink);
  /* 2줄 클램프 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.book-card__date {
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.pagination {
  padding-top: 8px;
}

.pagination__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--muted);
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  /* P3-6: 선언 위생 — 판정G(두 서체 모두 숫자가 이미 등폭)에 따라 시각
     효과는 없다(no-op). "정렬이 개선된다"는 근거는 쓰지 않는다. */
  font-variant-numeric: tabular-nums;
}

.pagination__link:hover {
  color: var(--iroom-blue);
}

.pagination__link.is-current {
  background: var(--iroom-blue);
  color: var(--on-navy-ink);
  font-weight: var(--w-bold);
}

.pagination__link--prev,
.pagination__link--next {
  font-weight: var(--w-semibold);
  color: var(--ink);
}

/* P2-10: windowed pagination ellipsis (render.php:pagination_window()) —
   same footprint as .pagination__link so the row doesn't jump. */
.pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  color: var(--muted);
  font-size: 13px;
}

/* ==========================================================================
   15. 글 상세 페이지 — post.php
   목록 페이지(14번)와 동일한 어휘(헤어라인, 골드 텍스트 레이블, post-list
   행 스타일)를 공유하며 관련 글 섹션은 post-list 클래스를 그대로 재사용한다.
   ========================================================================== */
.post-detail {
  padding: 56px 0 80px;
}

@media (min-width: 1024px) {
  .post-detail {
    padding: 80px 0 var(--space-section);
  }
}

.post-detail__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: var(--w-semibold);
  color: var(--iroom-blue);
  margin-bottom: 32px;
  transition: gap var(--dur-fast) var(--ease);
}

.post-detail__back:hover {
  gap: 12px;
}

/* P2-3: 헤더·본문·관련글을 동일 72ch 컬럼으로 정렬(제목·본문 좌우변 일치) */
.post-detail__head {
  max-width: 72ch;
  padding-bottom: 28px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--hairline);
}

/* P2-6: 13px -> 12px — .post-list__type/.disclosure-item__type과 같은
   type_label() 문자열을 렌더하면서 상세만 한 눈금 컸다. */
.post-detail__type {
  font-size: 12px;
  font-weight: var(--w-bold);
  color: var(--iroom-gold-text);
  margin-bottom: 12px;
}

.post-detail__title {
  /* feedback-i: 국문 게시글 제목 h1 — 고딕 통일(800은 명조 전용이라 700) +
     H1급 남색 */
  font-family: var(--font-body);
  font-size: 32px;
  font-weight: var(--w-bold);
  line-height: 1.45;
  color: var(--iroom-blue);
  margin-bottom: 16px;
}

@media (min-width: 768px) {
  .post-detail__title {
    font-size: 44px;
  }
}

.post-detail__date {
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.post-detail__body {
  max-width: 72ch;
  font-size: 16px;
  line-height: 1.9;
  color: var(--ink);
}

.post-detail__body p + p {
  margin-top: 20px;
}

/* P2-7: type-aware image presentation (post.php chooses the variant
   server-side from the post's type — bs/ic -> --doc, book -> --cover,
   everything else keeps the default). Replaces the old one-size
   `.post-detail__image { width: 100% }` rule, which stretched small book
   covers to full column width and gave financial-statement scans no way to
   zoom past a 72ch column. */
.post-detail__figure {
  width: auto;
  max-width: 100%;
  display: block;
  margin: 36px auto;
}

.post-detail__image {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 75vh;
  margin: 0 auto;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}

/* --doc (bs/ic, 38건): the image *is* the post body, so it runs full width
   with no top gap, and is wrapped in a same-image link to the original file
   (target=_blank) so a financial statement can be zoomed past the 72ch
   column and the 75vh cap. */
.post-detail__figure--doc {
  max-width: 100%;
  margin-top: 0;
}

.post-detail__figure--doc .post-detail__image {
  width: 100%;
  max-height: none;
}

.post-detail__figure-link {
  display: block;
}

.post-detail__zoom-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 13px;
  font-weight: var(--w-semibold);
  color: var(--iroom-blue);
}

/* --cover (book, 표지 보유분): capped and centered on a subtle neutral card
   so a small cover (198~480px wide originals) doesn't stretch past its
   natural size inside a 72ch body column. */
.post-detail__figure--cover {
  max-width: 280px;
  padding: 20px;
  background: var(--bg-alt);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}

.post-detail__figure--cover .post-detail__image {
  max-height: none;
  border: 0;
  border-radius: 0;
}

.post-detail__placeholder {
  padding: 40px 0;
  border-top: 1px solid var(--hairline);
  font-size: 15px;
  color: var(--muted);
  text-align: center;
}

.post-detail__attachment {
  margin-top: 32px;
}

/* feedback-d: CEO Naver-blog import "네이버 블로그에서 보기" button — same
   spacing rhythm as .post-detail__attachment; when both appear (a WP post
   matched to a blog post can carry an attachment too) the attachment block's
   own margin-top keeps them from touching. */
.post-detail__external {
  margin-top: 32px;
}

.post-detail__ext {
  font-size: 12px;
  font-weight: var(--w-bold);
  opacity: 0.75;
}

.post-detail__related {
  max-width: 72ch;
  margin-top: 64px;
  padding-top: 40px;
  border-top: 1px solid var(--hairline);
}

.post-detail__related-title {
  /* feedback-i: 국문("관련 글") — 고딕 통일 */
  font-family: var(--font-body);
  font-size: 19px;
  font-weight: var(--w-bold);
  color: var(--ink);
  margin-bottom: 4px;
}

.post-detail__notfound-msg {
  padding: 40px 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  font-size: 15px;
  color: var(--muted);
  text-align: center;
}

.post-detail__notfound-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  margin-top: 32px;
}

/* ==========================================================================
   16. 정적 페이지 공통 — about.php / philosophy.php / contact.php
   목록 페이지(14번)·글 상세(15번)와 동일한 어휘(헤어라인, 세리프 헤딩, 골드
   텍스트 레이블)를 공유한다. 섹션을 헤어라인으로 순서대로 구분하는 구조는
   philosophy.php처럼 섹션이 여러 개 이어지는 페이지에 맞춘 것이다.
   ========================================================================== */
.static-page {
  padding: 56px 0 80px;
}

@media (min-width: 1024px) {
  .static-page {
    padding: 80px 0 var(--space-section);
  }
}

.static-page__head {
  padding-bottom: 28px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--hairline);
}

/* feedback-d Item 3: 섹션 전환의 여백을 대칭(48/48)에서 비대칭(56/40)으로
   바꾼다 — 새 주제(h2)로 넘어가기 전에는 넉넉한 공백을, 그 섹션 자신의
   본문이 끝난 뒤에는 조금 더 좁힌 공백을 둬 "새 섹션 시작 전 공백 > 그
   섹션이 끝난 뒤 공백"을 명확히 한다(편집 디자인에서 흔한 리듬). 두 값의
   합(96px)은 기존 48+48과 동일해 전체 페이지 길이는 그대로다 — 재배분만
   했을 뿐 시각적 밀도를 바꾸지 않는다. */
.static-section {
  padding: 56px 0 40px;
  border-top: 1px solid var(--hairline);
}

.static-section--first {
  border-top: 0;
}

/* P2-3: 2컬럼 그리드(≥1024px) — h2(+eyebrow)를 좌측 sticky 레일에, 본문을
   우측 컬럼에 둔다. .static-section__rail이 없는 섹션이 생겨도
   .static-section__body에 명시적으로 grid-column:2를
   줘서 우변 정렬이 항상 일치한다(수용 기준: 전 섹션 본문 우변 정렬 일치).
   트랙 자체는 280px + minmax(0, 1fr)로 컨테이너 전폭(1120px, ≥1024px 기준)을
   모두 채운다 — 예전에는 두 번째 트랙을 minmax(0, 68ch)로 캡핑해 트랙 합이
   ~932px에 그쳤고, 그 결과 grid-column:1/-1(전폭 컴포넌트)도 실제로는 이
   932px에서 멈춰 컨테이너 우변까지 ~188px을 못 미쳤다. 이제 텍스트 읽기폭
   제한은 트랙이 아니라 .static-section__body 자신의 max-width로 옮겨,
   --wide 변형은 이 제한을 없애 트랙 전체(컨테이너 우변까지)를 실제로 채운다. */
@media (min-width: 1024px) {
  .static-section {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    column-gap: 48px;
    align-items: start;
  }

  .static-section__rail {
    grid-column: 1;
    position: sticky;
    top: 96px; /* site-header 높이(약 76px) + 여백 */
  }

  .static-section__body {
    grid-column: 2;
    max-width: 68ch;
  }

  /* 전폭 컴포넌트(표/카드 그리드 등)는 두 컬럼을 모두 차지하고, 읽기폭 캡도
     해제해 실제로 컨테이너 우변까지 닿는다. */
  .static-section__body--wide {
    grid-column: 1 / -1;
    max-width: none;
  }

  /* feedback-i Item 3(2026-07-30, 사용자: "Profile 구간 옆에 표가 나오는데,
     그 아래 Overview에서는 이 얼라인이 깨진다") — --wide는 본문 좌변을
     레일 밑(컨테이너 좌변)까지 끌어와, 산문 섹션들 사이에 끼면 좌변 정렬이
     73px vs 401px로 어긋난다(about.php Overview 실측). 이 변형은 본문
     컬럼(2)에 남되 68ch 캡만 해제한다 — 위아래 섹션과 좌변이 정확히 일치하고,
     표는 컬럼 실폭(~792px)을 써서 긴 소재지 주소가 한 줄에 들어간다. */
  .static-section__body--full {
    grid-column: 2;
    max-width: none;
  }
}

/* feedback-j: .static-section__eyebrow 삭제 — 유일 소비처였던 about.php CEO
   섹션의 eyebrow("CEO Message")+슬로건 특례가 표준 영문 h2 + kr-sub 패턴으로
   통일되면서 소비처가 사라졌다(미참조 CSS는 남기지 않는다). */

/* P3-5/판정I: font-size: 24px 삭제 — 소비처 17곳 전부 .section-title__en--myeongjo
   베이스가 이미 24px이고, 이 값을 32/44px로 올리는 규칙군(.static-page__head 등,
   특이도 0-2-0)의 하위에 들어가는 곳이 0건이라 이 선언은 어떤 경우에도 값을
   바꾸지 못했다(죽은 코드). 클래스명은 오너 결정(2026-07-30)에 따라
   유지한다 — 개명은 마크업 17곳을 건드리는 데 비해 사용자에게 보이는 이득이
   없다. 실제로 동작하는 선언(margin-bottom, 여백 전용)만 남긴다. */
.section-title--sm {
  margin-bottom: 28px;
}

/* feedback-i Item 4(2026-07-30, 사용자: "메인 텍스트도 양옆 줄맞춤을 해야해")
   — 산문 본문을 양쪽 정렬(justify)로 전환한다. 마지막 줄은 표준 동작대로
   왼쪽 정렬로 남는다. 이에 따라 feedback-d Item 3의 text-wrap: balance는
   제거한다 — balance는 줄 길이를 짧게 고르는 방식이라 justify와 결합하면
   짧아진 각 줄을 컨테이너 전폭으로 늘리며 어절 사이 공백만 커진다(두 기법은
   같은 문제(들쭉날쭉한 우변)의 상충하는 해법이고, 사용자가 justify를 명시
   지정했다). */
.prose {
  max-width: 72ch;
  font-size: 16px;
  line-height: 1.9;
  color: var(--ink);
  text-align: justify;
}

.prose p + p {
  margin-top: 20px;
}

/* feedback-j(2026-07-30, 사용자: "아직도 글들 중에 양옆 끝이 안 맞는 문단들이
   보여") — 양쪽 정렬을 .prose 하나가 아니라 "여러 줄로 흐르는 산문/각주" 어휘
   전체에 일괄 적용한다. 대상: 게시글 본문, 6원칙 카드 본문, 홈 인사이트 리드
   발췌, 상담 절차 리스트, 산출기준/각주류, 시뮬레이터 고지문, 푸터 고지문.
   제외(의도적): 제목·라벨·날짜·버튼(정렬 개념 없음), 가운데 정렬 블록
   (.contact-hero/.post-detail__placeholder), <br>로 강제 개행하는 히어로 서브
   (justify가 무효), 한 줄짜리 캡션류. */
.post-detail__body,
.philosophy-card__text,
.stat-band__note,
.simulator-disclaimer,
.footer-disclaimer {
  text-align: justify;
}
/* (spec 2026-08-04 §2-④: .editorial-insights__lead > p:not(...) 구성원은
   홈 인사이트 리드 발췌와 함께 은퇴 — 뉴스 카드에는 여러 줄 산문이 없다) */
/* (feedback-p: .step-list li는 후속 .process-flow__text가 자체 justify 선언을
   갖고 은퇴 — 이 그룹에서 제거) */

/* feedback-i Item 4: .prose--lead(24px 세리프 리드 문단)와 .static-section--lede
   레이아웃 변형은 삭제되었다 — 사용자 지시("Belief처럼 그 위에 텍스트가 폰트
   차라리 통일시키고 소제목을 하나 두는게 맞을거같고")에 따라 philosophy.php의
   첫 섹션이 Belief와 동일한 표준 섹션(rail h2 + 일반 .prose)으로 전환되어
   두 클래스 모두 소비처가 사라졌다(미참조 CSS는 남기지 않는다). */

/* CEO 인사말 — feedback-j: .ceo-greeting__slogan("소중한 고객자산의…" 24px
   헤딩)은 사용자 지시로 삭제 — 섹션이 표준 영문 h2 + kr-sub 패턴으로 통일되고
   본문이 인사말 서한 형식이 되면서 슬로건 헤딩의 소비처가 사라졌다. */
.ceo-greeting__sign {
  margin-top: 28px;
  font-size: 15px;
  font-weight: var(--w-bold);
  color: var(--ink);
}

/* 대표이사 약력 */
.profile-list {
  display: flex;
  flex-direction: column;
  margin-bottom: 24px;
}

.profile-list__item {
  padding: 14px 0;
  border-top: 1px solid var(--hairline);
  font-size: 15px;
  color: var(--ink);
}

.profile-list__item:last-child {
  border-bottom: 1px solid var(--hairline);
}

.profile-books {
  font-size: 13px;
  color: var(--muted);
}

/* 회사 개요 표 */
.info-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.info-table tr {
  border-top: 1px solid var(--hairline);
}

.info-table tr:last-child {
  border-bottom: 1px solid var(--hairline);
}

.info-table th,
.info-table td {
  padding: 14px 16px 14px 0;
  text-align: left;
  font-weight: var(--w-regular);
  vertical-align: top;
}

.info-table th {
  width: 9em;
  color: var(--muted);
  font-weight: var(--w-semibold);
  white-space: nowrap;
}

.info-table td {
  color: var(--ink);
}

/* P3-2: 559px는 표준 3종(768/1024 + 이들의 max-width 짝인 767/1023) 밖의
   유일한 예외 브레이크포인트로 의도적으로 남긴다 — 이 규칙은 "아주 좁은
   폰(iPhone SE급, ~375~420px)에서만 라벨 폭을 좁힌다"는 좁은 의도이고,
   767px로 올리면 태블릿 폭(560~767px)까지 라벨이 줄바꿈되어 원래 의도한
   범위보다 훨씬 넓게 레이아웃이 바뀐다(시각 회귀 위험) — 실화면 대조 없이
   전환하지 않는다(P3-2 acceptance: 예외 사유 주석). */
@media (max-width: 559px) {
  .info-table th {
    width: 6.5em;
    white-space: normal;
  }
}

/* 6원칙 카드 그리드 — philosophy-card(13번)와 어휘를 공유하되 6칸 배치.
   P3-2: 브레이크포인트를 640px에서 표준 768px로 통일(2컬럼 전환이 살짝
   늦어질 뿐 — 640~767px 폭에서 1컬럼으로 보이던 것이 그대로 유지되는
   방향이라 시각 회귀 없음). */
.principle-grid {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .principle-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .principle-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 문의 페이지 — feedback-p(2026-08-04, 회의 결정)로 세 번째 재구성:
   .contact-hero(페이지 하단 중앙 전화 블록, feedback-a/d의 산물)는 삭제되고
   전화번호는 상단 2열의 우측 "Call" 카드(.contact-call-card)로 들어갔다.
   Process는 도식형 스텝(.process-flow)으로, Location(주소·지도)은 하단으로. */
.contact-phone {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 16px;
}

.contact-phone__label {
  font-size: 13px;
  color: var(--muted);
}

/* P3-3/D3: 세리프/이탤릭 대신 sans + tabular-nums + 굵게 — 전화번호는
   "기능 숫자" 경계이므로 --font-num-ui(§6 #21, D3 경계의 sans 쪽). */
.contact-phone__num {
  font-family: var(--font-num-ui);
  font-size: 32px;
  font-weight: var(--w-bold);
  font-variant-numeric: tabular-nums;
  color: var(--iroom-blue);
  transition: color var(--dur-fast) var(--ease);
}

/* feedback-p: ≥768px 44px 승격 삭제 — 카드 폭(2열 그리드 ~532px) 안에서는
   32px이 적정하고, 표시 숫자 32px 단일 원칙(feedback-l)과도 맞는다. */

.contact-phone:hover .contact-phone__num {
  color: var(--iroom-blue-hover);
}

.contact-phone__hours {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 8px;
}

.contact-phone__note {
  font-size: 13px;
  color: var(--muted);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

@media (min-width: 768px) {
  .contact-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 56px;
  }
}

/* P2-3: contact-grid 섹션은 자체 2컬럼(Location/Process)이 전폭 컴포넌트라
   좌측 rail이 없다 — .static-section의 280px+68ch 템플릿을 덮어써 그대로
   전폭 2단으로 렌더한다(선택자 2개 조합이 .static-section 단독보다 우선). */
@media (min-width: 1024px) {
  .static-section.contact-grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 56px;
  }
}

.contact-block .prose {
  margin-bottom: 16px;
}

/* feedback-p: .step-list(번호 텍스트 리스트) → .process-flow(도식형 스텝 카드)
   교체 — 회의 결정 "세 단계를 PPT처럼 도식화된 시각화로". 번호 원 + 카드 +
   단계 사이 세로 연결선으로 절차의 흐름을 그린다. 연결선은 그래픽 요소라
   --hairline, 번호 원은 주조색 네이비 배경 + 흰 숫자(BS12 반전 규정 안). */
.process-flow {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 20px;
}

.process-flow__step {
  position: relative;
  display: flex;
  gap: 16px;
  padding: 0 0 28px 0;
}

.process-flow__step:last-child {
  padding-bottom: 0;
}

/* 번호 원 사이 세로 연결선 — 마지막 단계에는 그리지 않는다. */
.process-flow__step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 17px;
  top: 36px;
  bottom: 0;
  width: 1px;
  background: var(--hairline);
}

.process-flow__num {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: var(--iroom-blue);
  color: #fff;
  font-size: 15px;
  font-weight: var(--w-bold);
  font-variant-numeric: tabular-nums;
}

.process-flow__body {
  padding-top: 4px;
}

.process-flow__title {
  font-size: 16px;
  font-weight: var(--w-bold);
  color: var(--iroom-blue);
  margin-bottom: 6px;
}

.process-flow__text {
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink);
  text-align: justify;
}

/* 상담 신청 카드 — 전화번호 블록을 우측 열의 카드로 감싼다(이전의 페이지
   하단 중앙 히어로에서 이동, feedback-p 레이아웃 재배치). */
.contact-call-card {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--bg-alt);
  padding: 32px 28px;
  text-align: center;
}

/* 문의 페이지 지도 카드 (P2-9, feedback-a Item 5로 카카오 링크 제거,
   feedback-d Item 4로 Google Maps embed로 교체) — 이전에는 빌드 타임에 1회
   생성한 정적 OSM 합성 이미지(scripts/build_map.php ->
   assets/img/map-yeouido.png) 위에 CSS로 그린 옐로 마커를 겹쳤으나, 사용자
   피드백("위치가 잘 안 보임")에 따라 마커 오버레이를 없애고, 사용자가 명시
   요청한 대로("가능하면 구글지도로 대체") 키 없이 쓸 수 있는 Google Maps
   embed <iframe>으로 지도 자체를 교체했다 — 구글 지도 자체가 핀을 그려주므로
   더 이상 별도 마커나 OSM 저작자 표시가 필요 없다(.contact-map__marker/
   .contact-map__attribution 규칙 삭제 — contact.php가 더 이상 그 마크업을
   쓰지 않는다). 프레임 자체(4:3 비율, 헤어라인 테두리)는 그대로 유지한다. */
.contact-map {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  margin: 16px 0 20px;
}

.contact-map__iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ==========================================================================
   15. 운용성과 페이지 (performance.php) — 연도별 성과 표 (feedback-f) +
   가독성 재설계 전용 레이아웃 (feedback-h)
   feedback-f 당시엔 표 하나만 새로 필요했고 나머지(차트/스탯/시뮬레이터)는
   8/8b번을 그대로 재사용했다. feedback-h("신설한 페이지 UI 가독성 똑바로
   바꿔")는 그 재사용 자체가 문제였다는 진단에서 출발한다 — .static-section의
   280px 고정 rail + 68ch 본문은 about/philosophy 같은 산문 페이지용 틀인데,
   이 페이지는 산문이 아니라 데이터(누적 3스탯/18개년 차트/18행 표)다. 3스탯이
   rail 옆 좁은 본문 컬럼에 세로로 쌓이고 나머지 폭은 빈 채로 남는 실측 결과가
   그 증거였다. 그래서 이 페이지는 .static-section/__rail/__body를 전혀 쓰지
   않고 아래 .perf-section(헤딩+본문이 항상 전폭 1단, rail 없음)으로 완전히
   대체한다 — .static-section 자체(다른 정적 페이지가 여전히 쓴다)는 건드리지
   않는다.
   표는 그대로 이 섹션 전용이고, 나머지(차트/스탯/시뮬레이터)도 이제 이
   섹션에서 함께 관리한다. track_chart_table_html($years, false)가 렌더하는
   "실제로 보이는" 변형에만 적용되고, 화면에서 숨는 SR 전용 변형(8번의
   .visually-hidden + .track-chart__table)은 그대로 둔다.

   feedback-e Bug 1이 실측한 바로 그 오버플로우(테이블이 table-layout:auto
   기본값 때문에 컨테이너보다 넓게 렌더되는 문제)가 이 "진짜 보이는" 표에서
   재발하지 않도록 두 겹으로 막는다: table-layout:fixed + width:100%로 표
   자신이 컨테이너 폭을 넘지 않게 하고, .performance-table-wrap의
   overflow-x:auto를 두 번째 안전장치로 둔다(혹시 아주 좁은 화면에서 5번째
   '비고' 열까지 포함된 표의 내용이 최소폭을 요구하더라도, 표가 페이지 전체를
   밀어내는 대신 그 래퍼 안에서만 가로 스크롤된다). 색상은 negative/positive를
   red/green으로 구분하지 않는다 — BRAND.md에 그런 토큰이 없고, 부호(+/-)
   자체가 이미 텍스트로 드러나므로 타이포그래피만으로 충분하다(첫 열만 라벨
   성격으로 muted 처리). */
/* feedback-p(2026-08-04, 회의 결정): .performance-table-wrap과
   .track-chart__table--visible 규칙군(셀/헤더/비고 열/음수 색 포함) 전부 삭제
   — 화면 표시용 18행 표가 "높이가 너무 길어 가독성을 해친다"는 합의로
   제거됐고, 그 세 수치는 차트 호버 인포바(.perf-hover)가 대체한다. SR 전용
   표(.visually-hidden + .track-chart__table)는 유지 — 이제 보조기술의 유일한
   전체 수치 경로다. feedback-l(640px 압축)·feedback-m(중앙 정렬)의 이력은
   git에 남는다. .num-neg 스팬은 SR 표 마크업에 여전히 존재하지만 화면에
   그려지지 않으므로 색 규칙은 함께 삭제했다. */

/* --------------------------------------------------------------------------
   15b. .perf-section — feedback-h 전용 페이지 레이아웃.
   .static-section과 세로 리듬(56px 위/40px 아래 + 헤어라인)은 동일하게
   유지해 "확립된 헤딩 어휘"(영문 세리프 + 국문 sub + 헤어라인)를 그대로
   쓰지만, .static-section의 ≥1024px 280px rail 그리드는 절대 걸지 않는다
   — h2가 rail로 빠지지 않고 본문 바로 위에 있어, 모든 콘텐츠(3스탯 행/
   차트/표/시뮬레이터/각주)가 항상 전폭 1단으로 렌더된다. */
.perf-section {
  padding: 56px 0 40px;
  border-top: 1px solid var(--hairline);
}

.perf-section--first {
  border-top: 0;
}

/* 누적 성과 요약 — 이 페이지의 헤드라인. 세 수치를 세로로 쌓던 기존
   .rail__stats 대신, 전폭을 실제로 채우는 가로 3단을 쓴다(데스크톱). 모바일
   에서는 스택 + 상단 헤어라인으로 전환(요청: "모바일에서는 스택"). 숫자·
   라벨 자체는 기존 .stat-num/.stat__label을 그대로 재사용 — 새 폰트 크기
   없음(8단계 예산 유지). */
.perf-cumulative {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 32px;
  margin-top: 8px;
}

/* 2026-08-05 2차 피드백: Growth 위·아래의 Cumulative 3스탯과 시뮬레이터가
   차트보다 넓어 어긋나 보인다 — 차트 플롯 영역(track.php: margin_left 65 /
   margin_right 153, viewBox 1120 고정)과 좌우를 일치시킨다. 차트가 축소 없이
   그려지는 폭(컨테이너 내용폭 1120px = 뷰포트 ≥1200px)에서만 적용 — 그보다
   좁으면 차트는 가로 스크롤이라 정렬 기준 자체가 없다. */
@media (min-width: 1200px) {
  .perf-cumulative,
  .simulator--embedded {
    margin-left: 65px;
    margin-right: 153px;
  }

  /* 2026-08-05 추가 교정(사용자: "왼쪽은 맞는데 오른쪽이 떨어져 가운데가 안
     맞는 느낌") — 3열 1fr는 마지막 열 텍스트가 우측 경계에 못 미친다.
     내용폭 열 + space-between으로 첫 열은 플롯 좌측, 끝 열은 플롯 우측
     경계에 정확히 붙는다. */
  .perf-cumulative {
    grid-template-columns: repeat(3, auto);
    justify-content: space-between;
  }
}

@media (min-width: 640px) {
  .perf-cumulative {
    grid-template-columns: repeat(3, 1fr);
    column-gap: 48px;
    row-gap: 0;
  }
}

.perf-cumulative__item {
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
}

.perf-cumulative__item:first-child {
  padding-top: 0;
  border-top: 0;
}

@media (min-width: 640px) {
  .perf-cumulative__item {
    padding-top: 0;
    padding-left: 48px;
    border-top: 0;
    border-left: 1px solid var(--hairline);
  }

  .perf-cumulative__item:first-child {
    padding-left: 0;
    border-left: 0;
  }
}

/* ==========================================================================
   맨 위로 버튼 (2026-08-05 사용자 요청 — 전 페이지 공통, foot.php)
   애플식 마감: 반투명 흰 표면 + 블러(프로스티드 글라스), 등장/퇴장은
   opacity+4px 상승의 짧은 전환, 44px 원형(애플 최소 터치 타깃). 셰브론은
   ::before 보더 회전으로 그린다(인라인 SVG 금지 — 홈 스모크 svg=0 계약).
   그림자·표면 rgba는 --ink(#1A1A1F)·흰색 파생으로 팔레트 안. 스크롤 위치
   감지와 hidden 해제는 main.js initToTop() 담당. ========================== */
.to-top {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 40;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 4px 16px rgba(26, 26, 31, 0.12);
  cursor: pointer;
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.to-top.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.to-top::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  border-left: 2px solid var(--iroom-blue);
  border-top: 2px solid var(--iroom-blue);
  border-radius: 1px;
  transform: translate(-50%, -28%) rotate(45deg);
}

.to-top:hover {
  box-shadow: 0 6px 20px rgba(26, 26, 31, 0.18);
}

@media (prefers-reduced-motion: reduce) {
  .to-top {
    transition: none;
  }
}