@charset "utf-8";
/* ============================================================
   falette.org — 디자인 토큰
   컨셉: Data Broadsheet (Terminal x Daily)
   생성: 2026-07-27
   ------------------------------------------------------------
   적용 규칙
   - 이 파일은 blog_style.css 보다 "먼저" 로드한다.
   - 기존 --fal-* 변수와 prefix를 공유하므로, 중복 정의된
     변수는 이 파일 값으로 통일하고 기존 정의는 제거한다.
   - 다크모드 기준은 data-bs-theme="dark" 단일 기준.
     .dark-mode / [data-theme] 셀렉터는 사용하지 않는다.
   ============================================================ */

:root {

  /* ---------- 폰트 스택 ----------
     헤드라인만 세리프, 본문은 산세리프, 숫자는 시스템 모노.
     모노는 웹폰트를 받지 않으므로 추가 로딩 비용이 0이다. */
  --fal-font-head: 'Noto Serif KR', 'Nanum Myeongjo', serif;
  --fal-font-body: 'Pretendard Variable', Pretendard, 'Noto Sans KR', system-ui, sans-serif;
  --fal-font-num:  ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  /* ---------- 타입 스케일 ----------
     rem 기준. html { font-size:16px } 를 전제로 한다.
     body 의 font-size:0.9em 은 반드시 제거할 것. */
  --fal-fs-lead:    1.75rem;  /* 28px  리드 헤드라인 */
  --fal-fs-h1:      1.375rem; /* 22px  본문 제목 */
  --fal-fs-h2:      1.125rem; /* 18px  섹션 헤딩 */
  --fal-fs-title:   1rem;     /* 16px  목록 제목 */
  --fal-fs-body:    0.9375rem;/* 15px  본문 */
  --fal-fs-sm:      0.875rem; /* 14px  보조 */
  --fal-fs-meta:    0.8125rem;/* 13px  날짜/조회수 */
  --fal-fs-micro:   0.75rem;  /* 12px  최소 바닥선. 이하 금지 */

  --fal-lh-tight:   1.35;
  --fal-lh-normal:  1.6;
  --fal-lh-loose:   1.75;     /* 게시글 본문 */

  --fal-fw-normal:  400;
  --fal-fw-medium:  500;
  --fal-fw-bold:    700;

  /* ---------- 간격 (4px 배수) ---------- */
  --fal-sp-1: 4px;
  --fal-sp-2: 8px;
  --fal-sp-3: 12px;
  --fal-sp-4: 16px;
  --fal-sp-5: 24px;
  --fal-sp-6: 32px;
  --fal-sp-7: 48px;

  /* ---------- 모서리 ----------
     지면 요소는 각지게, 조작 요소는 둥글게.
     전부 0으로 만들면 브로드시트 클리셰가 된다. */
  --fal-radius-0:   0;        /* 목록 행, 구분선 영역 */
  --fal-radius-sm:  6px;      /* 배지, 태그 */
  --fal-radius-md:  8px;      /* 버튼, 입력창 */
  --fal-radius-lg:  12px;     /* 카드 */

  /* ---------- 색: 지면 ---------- */
  --fal-paper:      #FAFAF9;  /* 페이지 바탕 */
  --fal-surface:    #FFFFFF;  /* 카드/패널 */
  --fal-surface-2:  #F4F4F3;  /* 눌린 면, 코드블럭 */

  /* ---------- 색: 잉크 ----------
     순흑이 아니라 푸른기가 도는 먹. 신문 잉크의 실제 색. */
  --fal-ink:        #16191D;  /* 헤드라인, 본문 */
  --fal-ink-2:      #4A5057;  /* 보조 텍스트 */
  --fal-ink-3:      #7C838B;  /* 메타, 날짜 */
  --fal-ink-4:      #A8AEB4;  /* 비활성, placeholder */

  /* ---------- 색: 괘선 ---------- */
  --fal-rule:       #E3E3E1;  /* 기본 헤어라인 */
  --fal-rule-2:     #CBCBC8;  /* 강조 구분선 */
  --fal-rule-heavy: #16191D;  /* 마스트헤드 하단 2px */

  /* ---------- 색: 브랜드 (딥 틸 단일축) ---------- */
  --fal-brand:      #0D6E6E;
  --fal-brand-hover:#0A5555;
  --fal-brand-tint:  rgba(13,110,110,0.08);
  --fal-brand-rule:  rgba(13,110,110,0.30);

  /* ---------- 색: 시맨틱 (티커 전용) ----------
     브랜드 틸과 색상환에서 충분히 떨어뜨려 충돌을 막는다. */
  --fal-up:         #157F3D;
  --fal-up-tint:     rgba(21,127,61,0.09);
  --fal-down:       #C0322B;
  --fal-down-tint:   rgba(192,50,43,0.09);
  --fal-warn:       #8A6100;
  --fal-warn-tint:   rgba(138,97,0,0.10);

  /* ---------- 그림자 ----------
     지면 컨셉이므로 거의 쓰지 않는다. 떠 있는 것만. */
  --fal-shadow-none: none;
  --fal-shadow-pop:  0 4px 16px rgba(22,25,29,0.10);

  /* ---------- 레이아웃 ---------- */
  --fal-maxw:        1280px;
  --fal-col-gap:     32px;
  --fal-sticky-top:  2rem;
}

/* ============================================================
   다크모드 — paper/ink 반전
   기준은 data-bs-theme="dark" 하나뿐이다.
   ============================================================ */

[data-bs-theme="dark"] {
  --fal-paper:      #0E1116;
  --fal-surface:    #161A20;
  --fal-surface-2:  #1E232B;

  --fal-ink:        #E8EAED;
  --fal-ink-2:      #AEB5BD;
  --fal-ink-3:      #7F878F;
  --fal-ink-4:      #5A6169;

  --fal-rule:       #262C34;
  --fal-rule-2:     #363D46;
  --fal-rule-heavy: #E8EAED;

  --fal-brand:      #4FD1C5;
  --fal-brand-hover:#7BE0D6;
  --fal-brand-tint:  rgba(79,209,197,0.12);
  --fal-brand-rule:  rgba(79,209,197,0.35);

  --fal-up:         #4ADE80;
  --fal-up-tint:     rgba(74,222,128,0.13);
  --fal-down:       #F87171;
  --fal-down-tint:   rgba(248,113,113,0.13);
  --fal-warn:       #FBBF24;
  --fal-warn-tint:   rgba(251,191,36,0.13);

  --fal-shadow-pop:  0 4px 16px rgba(0,0,0,0.45);
}

/* ============================================================
   부트스트랩 브릿지
   부트스트랩 컴포넌트가 토큰을 따라오게 한다.
   이게 없으면 카드/버튼/드롭다운이 따로 논다.
   ============================================================ */

:root,
[data-bs-theme="dark"] {
  --bs-body-bg:            var(--fal-paper);
  --bs-body-color:         var(--fal-ink);
  --bs-secondary-color:    var(--fal-ink-2);
  --bs-tertiary-bg:        var(--fal-surface-2);
  --bs-emphasis-color:     var(--fal-ink);
  --bs-border-color:       var(--fal-rule);
  --bs-link-color:         var(--fal-brand);
  --bs-link-hover-color:   var(--fal-brand-hover);
  --bs-border-radius:      var(--fal-radius-md);
  --bs-body-font-family:   var(--fal-font-body);
}

/* ============================================================
   기반 리셋
   기존 blog_style.css 상단의 `body{font-size:0.9em}` 과
   전역 `li{list-style:none}` 를 대체한다.
   ============================================================ */

html {
  font-size: 16px;
  overflow-x: clip;
}

body {
  font-family: var(--fal-font-body);
  font-size: var(--fal-fs-body);
  line-height: var(--fal-lh-normal);
  color: var(--fal-ink);
  background-color: var(--fal-paper);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   유틸리티
   ============================================================ */

/* 헤드라인 — 세리프. 제목에만 쓴다. UI 라벨에는 쓰지 않는다. */
.fal-head {
  font-family: var(--fal-font-head);
  font-weight: var(--fal-fw-bold);
  line-height: var(--fal-lh-tight);
  color: var(--fal-ink);
  letter-spacing: -0.01em;
  word-break: keep-all;      /* 한글 단어 중간 줄바꿈 방지 */
  overflow-wrap: break-word;
}

/* 숫자 — 모노 + 등폭. 시세, 조회수, 날짜, 페이지 번호 전부. */
.fal-num {
  font-family: var(--fal-font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: 0;
}

/* 눈썹 라벨 — 섹션 위에 붙는 작은 대문자 라벨 */
.fal-eyebrow {
  font-family: var(--fal-font-num);
  font-size: var(--fal-fs-micro);
  letter-spacing: 0.08em;
  color: var(--fal-ink-3);
  text-transform: uppercase;
}

/* 마스트헤드 하단 굵은 괘선 */
.fal-rule-heavy {
  border-bottom: 2px solid var(--fal-rule-heavy);
}

/* 목록 행 — 카드 대신 쓰는 밀도형 라인 */
.fal-row {
  display: flex;
  align-items: baseline;
  gap: var(--fal-sp-3);
  padding: var(--fal-sp-3) 0;
  border-bottom: 1px solid var(--fal-rule);
  border-radius: var(--fal-radius-0);
}
.fal-row:last-child { border-bottom: 0; }
.fal-row:hover { background: var(--fal-brand-tint); }

/* 티커 상승/하락 */
.fal-up   { color: var(--fal-up); }
.fal-down { color: var(--fal-down); }

/* ============================================================
   접근성 — 없으면 키보드 사용자가 길을 잃는다
   ============================================================ */

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--fal-brand);
  outline-offset: 2px;
  border-radius: var(--fal-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   반응형 타입
   좁은 화면에서 리드 헤드라인만 줄인다.
   나머지는 그대로 두어야 가독성이 유지된다.
   ============================================================ */

@media (max-width: 768px) {
  :root {
    --fal-fs-lead: 1.375rem;  /* 22px */
    --fal-fs-h1:   1.1875rem; /* 19px */
    --fal-col-gap: 20px;
  }
}

/* ============================================================
   마스트헤드 — 로고행+메뉴바 통합, 신문 지면 상단 경계
   삽입 위치: fal_tokens.css 로드 이후, blog_style.css 로드 이전.
   (변수 참조만 하므로 blog_style.css 보다 먼저 와도 무방하나,
    !important 로 덮어쓰는 규칙과 섞이지 않도록 별도 파일 유지)
   ============================================================ */

.fal-masthead-wrap {
    background-color: var(--fal-surface);
    border-bottom: 2px solid var(--fal-rule-heavy);
}

.fal-masthead-row {
    display: flex;
    align-items: center;
    gap: var(--fal-sp-5);
    padding: var(--fal-sp-3) 0;
    min-height: 56px;
}

.fal-masthead-logo {
    flex: 0 0 auto;
    text-decoration: none;
    line-height: 1;
}

/* 기존 .site-logo-text 규칙(blog_style.css)을 그대로 상속하되
   accent 색만 브랜드 틸로 정정한다.
   명시도를 blog_style.css:50 (.site-logo-text .logo-org, 0-2-0)보다
   높여야 이긴다 — .fal-masthead-logo 로 0-3-0 확보(2026-07-27 보정 B) */
.fal-masthead-logo .logo-org {
    color: var(--fal-brand) !important;
}

.fal-masthead-stats {
    flex: 1 1 auto;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: var(--fal-sp-2);
    font-size: var(--fal-fs-meta);
    color: var(--fal-ink-3);
    white-space: nowrap;
    overflow: hidden;
}

.fal-masthead-dot {
    color: var(--fal-ink-4);
}

.fal-masthead-search {
    flex: 0 0 auto;
    width: 280px;
}

/* ------------------------------------------------------------
   메뉴바 — header_menu.php 안의 컨테이너를 마스트헤드에 붙여
   같은 괘선 아래 이어지도록 만든다. 기존 mb-3(16px 하단마진)과
   상단 padding 을 없애 로고행과의 간격을 좁힌다.
   ------------------------------------------------------------ */

.fal-masthead-wrap .container.mb-3 {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

/* 좌우 40px = 로고행 .container 의 1400px 기준 실측 여백(보정 A,
   2026-07-27). header_menu.php 45/143행의 래퍼 div를 제거해
   nav가 .fal-masthead-wrap(container-fluid)에 직접 붙으므로,
   로고 시작 x좌표와 맞추려면 이 padding으로 흉내내야 한다. */
.fal-masthead-wrap .navbar {
    min-height: 40px;
    padding: 4px 40px;
}

.fal-masthead-wrap .nav-link {
    font-family: var(--fal-font-body);
    color: var(--fal-ink-2);
}

.fal-masthead-wrap .nav-link:hover,
.fal-masthead-wrap .nav-link.active {
    color: var(--fal-brand);
}

/* 테마 토글 버튼 — accent 잔재 제거 */
.fal-masthead-wrap #themeToggleBtn {
    color: var(--fal-ink-2);
}
.fal-masthead-wrap #themeToggleBtn:hover {
    color: var(--fal-brand);
}

/* ------------------------------------------------------------
   1199px 이하: 마스트헤드 전체 숨김(기존 d-xl-block 유지),
   모바일 topnav/m_menu 가 대신 담당. 여기서는 폭 좁을 때
   상태줄만 먼저 지워 레이아웃 붕괴를 막는다(과도기 대비).
   ------------------------------------------------------------ */

@media (max-width: 1399px) {
    .fal-masthead-stats { display: none; }
    .fal-masthead-row { justify-content: space-between; }
}