/* AI & Digital Healthcare Watch — 공통 스타일
 * 페이지가 다섯으로 늘어 각 파일에 CSS를 복사하는 방식을 그만두고 여기로 모았다.
 * 페이지 고유 스타일만 각 HTML의 <style>에 남긴다.
 */
/* ═══ Apple design-md tokens ═══ */
  :root {
    --primary: #0066cc;
    --primary-focus: #0071e3;
    --primary-on-dark: #2997ff;
    --ink: #1d1d1f;
    --body-on-dark: #ffffff;
    --body-muted: #cccccc;
    --ink-muted-80: #333333;
    --ink-muted-48: #707070;   /* 흰 4.95:1 · 파치먼트 4.55:1 (구 #7a7a7a는 3.94~4.29로 미달) */
    --divider-soft: #f0f0f0;
    --hairline: #e0e0e0;
    --canvas: #ffffff;
    --parchment: #f5f5f7;
    --pearl: #fafafc;
    --tile-1: #272729;
    --tile-2: #2a2a2c;
    --tile-3: #252527;
    --black: #000000;
    --font: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Apple SD Gothic Neo", "Pretendard", "Noto Sans KR", sans-serif;
    --font-display: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Apple SD Gothic Neo", "Pretendard", "Noto Sans KR", sans-serif;
  }
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    background: var(--canvas);
    color: var(--ink);
    font-family: var(--font);
    font-size: 17px;
    line-height: 1.47;
    letter-spacing: -0.374px;
    word-break: keep-all;
    overflow-wrap: break-word;
    -webkit-font-smoothing: antialiased;
  }
  a { color: var(--primary); text-decoration: none; }
  a:hover { text-decoration: underline; }
  a:focus-visible { outline: 2px solid var(--primary-focus); outline-offset: 2px; border-radius: 4px; }

  /* ═══ Global nav (black, 44px) ═══ */
  .gnav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    height: 44px;
  }
  .gnav-inner {
    max-width: 980px;
    margin: 0 auto;
    height: 44px;
    padding: 0 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
  }
  .gnav .wordmark {
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.374px;
    white-space: nowrap;
  }
  .gnav .wordmark:hover { text-decoration: none; }
  .gnav .brand { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
  .gnav .updated {
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: -0.12px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  @media (max-width: 480px) {
    .gnav .updated { display: none; }
  }
  .gnav nav {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 9999px;
    padding: 4px;
  }
  .gnav nav a {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: -0.224px;
    line-height: 1;
    padding: 8px 14px;
    border-radius: 9999px;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s;
  }
  .gnav nav a:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.16);
    text-decoration: none;
  }
  .gnav nav a:active { transform: scale(0.96); }
  .gnav nav a.current {
    background: var(--primary);
    color: #ffffff;
  }
  .gnav nav a.ext {
    color: var(--primary-on-dark);
  }
  .gnav nav a.ext:hover { color: #ffffff; }

  /* ═══ Full-bleed tiles ═══ */
  .tile { padding: 96px 22px; }
  .tile-white { background: var(--canvas); }
  .tile-parchment { background: var(--parchment); }
  .tile-dark { background: var(--tile-1); color: var(--body-on-dark); }
  .tile-dark-2 { background: var(--tile-2); color: var(--body-on-dark); }
  .tile-inner { max-width: 980px; margin: 0 auto; }

  /* ═══ NEW 배지 ═══
   * 이번 업데이트에서 새로 들어온 항목에만 붙는다. 항목에 심어둔
   * data-added 중 가장 최근 값만 표시하므로, 다음 업데이트가 올라오면
   * 지난주 표시는 스크립트가 손대지 않아도 저절로 사라진다. */
  .badge-new {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1;
    padding: 4px 6px;
    border-radius: 5px;
    background: var(--primary);
    color: #ffffff;
    white-space: nowrap;
  }
  /* 날짜 칸 아래로 떨어뜨린다(동향·해외·LLM·제품 소식) */
  .date .badge-new { margin-top: 7px; }
  /* 논문 리뷰는 태그 줄에 섞여 들어간다 */
  .r-tags .badge-new { align-self: center; }
  /* 어두운 타일 위에서는 흰 글씨가 파랑에 묻히므로 밝은 파랑 + 검정 */
  .tile-dark .badge-new,
  .tile-dark-2 .badge-new { background: var(--primary-on-dark); color: #000000; }

  /* ═══ 가로 스크롤 단서 ═══
   * 320px에서 섹션 띠는 링크 2개를, 타임라인은 항목 6개 중 4개를 화면 밖에 둔다.
   * macOS·iOS는 스크롤바가 평소 보이지 않으므로 오른쪽 끝을 흐리게 해서
   * "더 있다"를 알린다. 끝까지 밀면 스크립트가 .at-end를 붙여 단서를 지운다. */
  .subnav-inner,
  .timeline-scroll {
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 36px), transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 36px), transparent 100%);
  }
  .subnav-inner.at-end,
  .timeline-scroll.at-end {
    -webkit-mask-image: none;
    mask-image: none;
  }
  /* 마스크를 못 쓰는 브라우저를 위해 오른쪽 경계선을 하나 남긴다 */
  @supports not (mask-image: linear-gradient(to right, #000, transparent)) {
    .subnav-inner, .timeline-scroll { border-right: 1px solid var(--hairline); }
  }

  /* ═══ 어두운 타일에서의 보조 텍스트 ═══
   * --ink-muted-48 은 "지금 표면 위의 보조 텍스트"라는 역할이고, 값은 흰·파치먼트
   * 기준으로 정해져 있다. 어두운 타일에서 그대로 쓰면 2.9:1 까지 떨어졌다
   * (핵심 카드 출처, 차트 설명, 제품 카탈로그의 회사명·메타 등 여러 곳).
   * 컴포넌트마다 색을 덮어쓰는 대신 타일 안에서 토큰을 다시 정의한다 —
   * 앞으로 추가되는 컴포넌트도 자동으로 맞는 값을 받는다. */
  .tile-dark,
  .tile-dark-2 { --ink-muted-48: #999999; }   /* 어두운 타일 위 5.03~5.23:1 */

  /* ═══ 본문 바로가기 ═══
   * 고정 상단바 + 섹션 띠를 지나야 본문에 닿으므로, 키보드 첫 탭에서 건너뛴다. */
  .skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 300;
    background: var(--primary);
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    padding: 12px 18px;
    border-radius: 0 0 10px 0;
  }
  .skip-link:focus-visible {
    left: 0;
    text-decoration: none;
    outline: 2px solid var(--primary-focus);
    outline-offset: 2px;
  }

  /* ═══ 설치 권유 띠 ═══
   * 아직 홈 화면에 추가하지 않은 방문자에게만 보인다. 닫으면 다시 뜨지 않는다.
   * 고정(sticky)이 아니라 스크롤과 함께 지나가므로 읽기를 방해하지 않는다. */
  /* 히어로 쪽으로 끌어올려 빈 공간을 줄인다. 이때 position이 없으면 히어로가
   * 위치 지정 요소(position:relative)라는 이유로 나중에 칠해져 이 띠의 윗부분을
   * 덮어버린다(글자 위쪽이 잘린다). 그래서 띠에도 위치를 주어 순서를 뒤집는다. */
  .install-hint { padding: 0 22px; margin: -34px auto 0; position: relative; z-index: 1; }
  .install-hint-inner {
    max-width: 980px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--parchment);
    border: 1px solid var(--hairline);
    border-radius: 16px;
    padding: 16px 18px;
  }
  .install-hint-icon { flex: 0 0 auto; width: 24px; height: 24px; }
  .install-hint-icon svg {
    width: 24px; height: 24px;
    stroke: var(--primary); stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round; fill: none;
  }
  .install-hint p {
    flex: 1 1 auto;
    margin: 0;
    font-size: 15px;
    line-height: 1.45;
    letter-spacing: -0.224px;
  }
  .install-hint .btn-pill { flex: 0 0 auto; font-size: 15px; padding: 8px 18px; }
  .install-hint-close {
    flex: 0 0 auto;
    font: inherit;
    font-size: 22px;
    line-height: 1;
    background: none;
    border: 0;
    color: var(--ink-muted-48);
    cursor: pointer;
    border-radius: 8px;
    /* 손가락으로 누르는 버튼이라 보이는 크기와 별개로 44px는 확보한다 */
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 넓힌 만큼 안쪽 여백을 상쇄해 띠가 두꺼워지지 않게 한다 */
    margin: -7px -8px -7px 0;
  }
  .install-hint-close:hover { color: var(--ink); }

  @media (max-width: 640px) {
    .install-hint { padding: 0 18px; margin-top: -20px; }
    .install-hint-inner { flex-wrap: wrap; gap: 12px; padding: 15px 16px; }
    .install-hint p { flex: 1 1 100%; order: 2; font-size: 14.5px; }
    .install-hint-icon { order: 1; }
    .install-hint-close { order: 1; margin-left: auto; }
    .install-hint .btn-pill { order: 3; }
  }
  .tile-inner-wide { max-width: 1200px; margin: 0 auto; }

  /* ═══ Hero ═══ */
  .hero {
    text-align: center;
    padding: 88px 22px 70px;
    position: relative;
    overflow: hidden;
  }
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url("/bg-hero.jpg") center 35% / cover no-repeat;
    opacity: 0.14;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,1) 30%, rgba(0,0,0,0.9) 60%, transparent 96%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,1) 30%, rgba(0,0,0,0.9) 60%, transparent 96%);
    pointer-events: none;
  }
  .hero > * { position: relative; z-index: 1; }
  .hero .issue-tag {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.374px;
    color: var(--ink-muted-80);
    margin: 0 0 18px;
    font-variant-numeric: tabular-nums;
  }
  @media (max-width: 640px) {
    .hero .issue-tag { font-size: 16px; }
  }
  .hero .issue-tag strong { color: var(--primary); font-weight: 600; }
  .hero h1 {
    font-family: var(--font-display);
    font-size: clamp(34px, 7vw, 64px);
    font-weight: 700;
    line-height: 1.07;
    letter-spacing: -0.02em;
    margin: 0 0 18px;
    text-wrap: balance;
  }
  .hero .lead {
    font-family: var(--font-display);
    font-size: clamp(19px, 3vw, 26px);
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: 0;
    color: var(--ink-muted-48);
    max-width: 640px;
    margin: 0 auto 30px;
    text-wrap: balance;
  }
  .cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
  .btn-pill {
    display: inline-block;
    background: var(--primary);
    color: #ffffff;
    font-size: 17px;
    font-weight: 400;
    letter-spacing: -0.374px;
    padding: 11px 22px;
    border-radius: 9999px;
    border: 1px solid var(--primary);
    transition: transform 0.15s ease;
  }
  .btn-pill:hover { text-decoration: none; background: var(--primary-focus); border-color: var(--primary-focus); }
  .btn-pill:active { transform: scale(0.96); }
  .btn-ghost {
    display: inline-block;
    background: transparent;
    color: var(--primary);
    font-size: 17px;
    letter-spacing: -0.374px;
    padding: 11px 22px;
    border-radius: 9999px;
    border: 1px solid var(--primary);
    transition: transform 0.15s ease;
  }
  .btn-ghost:hover { text-decoration: none; background: var(--primary); color: #ffffff; }
  .btn-ghost:active { transform: scale(0.96); }

  /* ═══ 이번 주 (히어로 안 · 매주 교체되는 유일한 초점) ═══ */
  .this-week {
    max-width: 720px;
    margin: 0 auto;
    padding: 22px 26px 24px;
    border: 1px solid var(--hairline);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.84);
    -webkit-backdrop-filter: saturate(160%) blur(16px);
    backdrop-filter: saturate(160%) blur(16px);
    text-align: left;
  }
  .tw-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.08px;
    color: var(--primary);
    margin: 0 0 10px;
    font-variant-numeric: tabular-nums;
  }
  .tw-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--primary);
    flex: none;
    animation: tw-pulse 2.4s ease-in-out infinite;
  }
  @keyframes tw-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.3; transform: scale(0.8); }
  }
  @media (prefers-reduced-motion: reduce) {
    .tw-dot { animation: none; }
  }
  .tw-head {
    font-family: var(--font-display);
    font-size: clamp(21px, 2.9vw, 28px);
    font-weight: 700;
    line-height: 1.26;
    letter-spacing: -0.02em;
    margin: 0 0 12px;
    text-wrap: balance;
  }
  .tw-head a { color: var(--ink); }
  .tw-head a:hover { color: var(--primary); text-decoration: none; }
  .tw-more {
    margin: 0;
    font-size: 15px;
    line-height: 1.62;
    color: var(--ink-muted-48);
  }
  .tw-more a { color: var(--ink-muted-48); }
  .tw-more a:hover { color: var(--primary); }
  .tw-more .sep { margin: 0 9px; color: var(--hairline); }
  @media (max-width: 640px) {
    .this-week { padding: 18px 18px 20px; border-radius: 16px; }
    .tw-more { font-size: 14px; }
    .tw-more .sep { margin: 0 6px; }
  }

  /* ═══ ECG line ═══ */
  .ecg-wrap { max-width: 900px; margin: 24px auto 0; overflow: hidden; }
  .ecg { width: 100%; height: 64px; display: block; }
  .ecg-path {
    stroke: var(--primary);
    stroke-dasharray: 1290;
    stroke-dashoffset: 1290;
    animation: ecg-draw 4.5s linear infinite;
  }
  @keyframes ecg-draw {
    0% { stroke-dashoffset: 1290; opacity: 1; }
    70% { stroke-dashoffset: 0; opacity: 1; }
    88% { opacity: 0.25; }
    100% { stroke-dashoffset: 0; opacity: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .ecg-path { animation: none; stroke-dashoffset: 0; }
  }

  /* ═══ Stats strip ═══ */
  .stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 22px;
    max-width: 780px;
    margin: 52px auto 0;
  }
  .stat .num {
    font-family: var(--font-display);
    font-size: clamp(40px, 6vw, 56px);
    font-weight: 700;
    line-height: 1.07;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
  }
  .stat .num .unit { font-size: 0.5em; font-weight: 600; }
  .stat .label {
    font-size: 14px;
    letter-spacing: -0.224px;
    color: var(--ink-muted-48);
    margin-top: 6px;
    line-height: 1.43;
  }

  /* ═══ 이번 호의 키워드 ═══ */
  .kw-heading { margin: 0; }
  .kw-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--primary);
    margin: 0 0 14px;
  }
  .kw-term {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(64px, 12vw, 116px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.045em;
    color: var(--ink);
    margin: 0;
  }
  .kw-full {
    font-size: clamp(16px, 2.4vw, 20px);
    font-weight: 400;
    letter-spacing: -0.224px;
    color: var(--ink-muted-48);
    margin: 12px 0 0;
  }
  .kw-def {
    font-size: clamp(19px, 2.8vw, 25px);
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: -0.374px;
    color: var(--ink);
    margin: 30px 0 0;
    padding-left: 20px;
    border-left: 3px solid var(--primary);
    max-width: 46ch;
    text-wrap: balance;
  }
  .kw-body {
    margin-top: 34px;
    columns: 2;
    column-gap: 44px;
    max-width: 900px;
  }
  .kw-body p {
    margin: 0 0 15px;
    font-size: 16px;
    line-height: 1.62;
    letter-spacing: -0.224px;
    color: var(--ink-muted-80);
    break-inside: avoid;
  }
  .kw-body p strong { color: var(--ink); font-weight: 600; }
  .kw-link {
    margin-top: 26px;
    padding: 16px 20px;
    background: var(--canvas);
    border-radius: 14px;
    font-size: 14.5px;
    line-height: 1.55;
    letter-spacing: -0.224px;
    color: var(--ink-muted-80);
    max-width: 74ch;
  }
  .kw-link strong { color: var(--ink); font-weight: 600; }
  @media (max-width: 720px) {
    .kw-body { columns: 1; }
  }

  /* ═══ Section badge ═══ */
  .sec-badge {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    background: rgba(0, 102, 204, 0.09);
  }
  .sec-badge svg {
    width: 22px;
    height: 22px;
    stroke: var(--primary);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
  }
  .tile-dark .sec-badge, .tile-dark-2 .sec-badge { background: rgba(41, 151, 255, 0.14); }
  .tile-dark .sec-badge svg, .tile-dark-2 .sec-badge svg { stroke: var(--primary-on-dark); }

  /* ═══ Section headline grammar ═══ */
  .sec-head {
    font-family: var(--font-display);
    font-size: clamp(30px, 5vw, 44px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.015em;
    margin: 0 0 12px;
    text-wrap: balance;
  }
  .sec-sub {
    font-size: clamp(17px, 2.5vw, 21px);
    font-weight: 400;
    letter-spacing: 0;
    color: var(--ink-muted-48);
    margin: 0 0 48px;
    max-width: 60ch;
  }
  .tile-dark .sec-sub, .tile-dark-2 .sec-sub { color: var(--body-muted); }

  /* ═══ 핵심 (dark tile) ═══ */
  .highlight-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
  }
  .highlight {
    background: var(--tile-2);
    border-radius: 18px;
    padding: 32px 28px;
  }
  .highlight .h-num {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.224px;
    color: var(--primary-on-dark);
    margin-bottom: 10px;
    font-variant-numeric: tabular-nums;
  }
  .highlight h3 {
    font-size: 21px;
    font-weight: 600;
    line-height: 1.24;
    letter-spacing: -0.374px;
    margin: 0 0 10px;
    color: #ffffff;
  }
  .highlight p {
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: -0.224px;
    color: var(--body-muted);
    margin: 0;
  }
  .highlight h3 a { color: #ffffff; transition: color 0.2s; }
  .highlight h3 a:hover { color: var(--primary-on-dark); text-decoration: none; }
  .highlight .h-src {
    margin-top: 12px;
    font-size: 13px;
    letter-spacing: -0.12px;
    color: var(--ink-muted-48);
  }
  .highlight .h-src a { color: var(--ink-muted-48); }
  .highlight .h-src a:hover { color: var(--primary-on-dark); }

  /* ═══ 미니 차트 (dark tile) ═══ */
  .chart-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 20px;
  }
  .chart-card {
    background: var(--tile-2);
    border-radius: 18px;
    padding: 32px 28px 24px;
  }
  .chart-card h3 {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.374px;
    color: #ffffff;
    margin: 0 0 4px;
  }
  .chart-card .chart-cap {
    font-size: 13px;
    letter-spacing: -0.12px;
    color: var(--ink-muted-48);
    margin: 0 0 18px;
  }
  .chart-card svg { width: 100%; height: auto; display: block; }
  .bar { fill: var(--primary-on-dark); rx: 4; }
  .bar-label {
    font-family: var(--font);
    font-size: 15px;
    font-weight: 600;
    fill: #ffffff;
  }
  .bar-axis {
    font-family: var(--font);
    font-size: 11.5px;
    fill: var(--body-muted);
  }
  .bar-base { stroke: rgba(255, 255, 255, 0.18); stroke-width: 1.8; }
  html.js .bar {
    transform-box: fill-box;
    transform-origin: bottom;
    transform: scaleY(0);
    transition: transform 0.9s cubic-bezier(0.25, 0.1, 0.25, 1);
  }
  html.js .reveal.in .bar { transform: scaleY(1); }
  html.js .reveal.in .bar:nth-child(2) { transition-delay: 0.12s; }
  html.js .reveal.in .bar:nth-child(3) { transition-delay: 0.24s; }

  /* ═══ 카드 아이콘 ═══ */
  .card-icon {
    width: 24px;
    height: 24px;
    stroke: var(--primary-on-dark);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    display: block;
    margin-bottom: 14px;
  }

  /* ═══ 학계·학회 (parchment) ═══ */
  .acad-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
  }
  .acad-card {
    background: var(--canvas);
    border: 1px solid var(--hairline);
    border-radius: 18px;
    padding: 28px 26px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .acad-card .a-date {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.12px;
    color: var(--primary);
    font-variant-numeric: tabular-nums;
  }
  .acad-card h3 {
    font-size: 19px;
    font-weight: 600;
    line-height: 1.32;
    letter-spacing: -0.374px;
    margin: 0;
    text-wrap: balance;
  }
  .acad-card h3 a { color: var(--ink); transition: color 0.2s; }
  .acad-card h3 a:hover { color: var(--primary); text-decoration: none; }
  .acad-card p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.5;
    letter-spacing: -0.224px;
    color: var(--ink-muted-80);
  }
  .acad-card .a-src {
    margin-top: auto;
    padding-top: 10px;
    font-size: 13px;
    letter-spacing: -0.12px;
  }
  .acad-card .a-src a { color: var(--ink-muted-48); }
  .acad-card .a-src a:hover { color: var(--primary); }
  .acad-card .card-icon { stroke: var(--primary); margin-bottom: 6px; }

  /* ═══ 학회 일정 캘린더 ═══ */
  .conf-note {
    font-size: 14px;
    line-height: 1.55;
    letter-spacing: -0.224px;
    color: var(--ink-muted-48);
    margin: 0 0 26px;
    max-width: 74ch;
  }
  .conf-group {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--ink-muted-48);
    margin: 30px 0 2px;
  }
  .conf-group:first-of-type { margin-top: 0; }
  .conf-list { border-top: 1px solid var(--hairline); }
  .conf-item {
    display: grid;
    grid-template-columns: 118px 1fr;
    gap: 22px;
    padding: 20px 0;
    border-bottom: 1px solid var(--hairline);
  }
  .conf-date {
    font-variant-numeric: tabular-nums;
    padding-top: 2px;
  }
  .conf-date .d-main {
    display: block;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.374px;
    color: var(--primary);
    white-space: nowrap;
  }
  .conf-date .d-year {
    display: block;
    font-size: 12.5px;
    letter-spacing: -0.12px;
    color: var(--ink-muted-48);
    margin-top: 1px;
  }
  .conf-item h4 {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.374px;
    margin: 0 0 5px;
    text-wrap: balance;
  }
  .conf-item h4 a { color: var(--ink); border-bottom: 1px solid transparent; }
  .conf-item h4 a:hover { color: var(--primary); border-bottom-color: var(--primary); text-decoration: none; }
  .conf-item h4 .abbr {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--primary);
    background: rgba(0, 102, 204, 0.09);
    border-radius: 100px;
    padding: 2px 9px;
    margin-left: 7px;
    vertical-align: 2px;
    white-space: nowrap;
  }
  .conf-item h4 .abbr.gen { color: #5f5f5f; background: rgba(0, 0, 0, 0.05); }   /* 배지 배경 위 5.27:1 (구 4.08) */
  .conf-desc {
    margin: 0 0 9px;
    font-size: 14.5px;
    line-height: 1.5;
    letter-spacing: -0.224px;
    color: var(--ink-muted-80);
    max-width: 70ch;
  }
  .conf-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 10px;
    font-size: 13px;
    letter-spacing: -0.12px;
    color: var(--ink-muted-48);
    align-items: center;
  }
  .conf-meta .loc::before { content: "📍 "; }
  .conf-meta .dl {
    background: var(--canvas);
    border: 1px solid var(--hairline);
    border-radius: 100px;
    padding: 3px 11px;
    color: var(--ink-muted-80);
  }
  .conf-meta .dl.urgent {
    border-color: var(--primary);
    color: var(--primary);
    font-weight: 600;
  }
  .conf-item.past .conf-date .d-main { color: var(--ink-muted-48); }

  /* ═══ 타임라인 (parchment) ═══ */
  .timeline-scroll { overflow-x: auto; padding: 8px 0 16px; }
  .timeline {
    display: flex;
    min-width: 760px;
    border-top: 1px solid var(--hairline);
    padding-top: 22px;
  }
  .tl-item { flex: 1 1 0; padding-right: 20px; position: relative; }
  .tl-item::before {
    content: "";
    position: absolute;
    top: -27px;
    left: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--primary);
  }
  .tl-date {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.224px;
    color: var(--primary);
    font-variant-numeric: tabular-nums;
    margin-bottom: 4px;
  }
  .tl-item p {
    margin: 0;
    font-size: 14px;
    line-height: 1.43;
    letter-spacing: -0.224px;
    color: var(--ink-muted-80);
  }

  /* ═══ 뉴스 (white) ═══ */
  /* ═══ 에디터스 노트 콜아웃 ═══ */
  .editors-note {
    background: var(--parchment);
    border-radius: 18px;
    padding: 30px 32px;
    margin-bottom: 44px;
  }
  .editors-note .en-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
  }
  .editors-note .en-head svg {
    width: 20px;
    height: 20px;
    stroke: var(--primary);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    flex-shrink: 0;
  }
  .editors-note .en-head h3 {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.224px;
    color: var(--primary);
    margin: 0;
  }
  .editors-note p {
    font-size: 15.5px;
    line-height: 1.62;
    letter-spacing: -0.224px;
    color: var(--ink-muted-80);
    margin: 0 0 12px;
    max-width: 72ch;
  }
  .editors-note p:last-child { margin-bottom: 0; }
  .editors-note strong { color: var(--ink); font-weight: 600; }

  /* ═══ 국내/해외 전환 토글 ═══ */
  .scope-toggle {
    display: inline-flex;
    gap: 4px;
    background: var(--parchment);
    border-radius: 9999px;
    padding: 4px;
    margin-bottom: 20px;
  }
  .scope-btn {
    font-family: var(--font);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.224px;
    color: var(--ink-muted-48);
    background: transparent;
    border: none;
    border-radius: 9999px;
    padding: 9px 22px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
  }
  .scope-btn:hover { color: var(--ink); }
  .scope-btn:active { transform: scale(0.96); }
  .scope-btn[aria-selected="true"] {
    background: var(--canvas);
    color: var(--ink);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  }
  .scope-btn:focus-visible { outline: 2px solid var(--primary-focus); outline-offset: 2px; }
  .scope-btn .cnt {
    font-size: 13px;
    font-weight: 400;
    color: var(--ink-muted-48);
    margin-left: 5px;
    font-variant-numeric: tabular-nums;
  }

  /* ═══ 해외 동향 (압축형) ═══ */
  .intl-note {
    font-size: 14px;
    line-height: 1.55;
    letter-spacing: -0.224px;
    color: var(--ink-muted-48);
    margin: 0 0 22px;
    max-width: 72ch;
  }
  .intl-list { border-top: 1px solid var(--divider-soft); }
  .intl-item {
    display: grid;
    grid-template-columns: 104px 1fr;
    gap: 20px;
    padding: 15px 0;
    border-bottom: 1px solid var(--divider-soft);
    align-items: baseline;
  }
  .intl-item .date {
    font-size: 13.5px;
    letter-spacing: -0.224px;
    color: var(--ink-muted-48);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .intl-item .txt {
    font-size: 15.5px;
    line-height: 1.5;
    letter-spacing: -0.224px;
    color: var(--ink);
  }
  .intl-item .txt a { color: var(--ink); border-bottom: 1px solid transparent; }
  .intl-item .txt a:hover { color: var(--primary); border-bottom-color: var(--primary); text-decoration: none; }
  .intl-item .org {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--primary);
    background: rgba(0, 102, 204, 0.09);
    border-radius: 100px;
    padding: 2px 9px;
    margin-right: 8px;
    vertical-align: 1px;
  }
  .intl-item .src { font-size: 13px; letter-spacing: -0.12px; margin-left: 6px; }
  .intl-item .src a { color: var(--ink-muted-48); }
  .intl-item .src a:hover { color: var(--primary); }

  /* ═══ 더 보기 ═══ */
  .more-row { margin-top: 26px; }
  .btn-more {
    font-family: var(--font);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.224px;
    color: var(--primary);
    background: transparent;
    border: 1px solid var(--hairline);
    border-radius: 9999px;
    padding: 11px 24px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
  }
  .btn-more:hover { background: var(--parchment); border-color: var(--ink-muted-48); }
  .btn-more:active { transform: scale(0.96); }
  .btn-more:focus-visible { outline: 2px solid var(--primary-focus); outline-offset: 2px; }
  .entry.folded, .intl-item.folded { display: none; }

  .filter-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 40px;
  }
  .filter-chip {
    font-family: var(--font);
    font-size: 14px;
    letter-spacing: -0.224px;
    color: var(--ink);
    background: var(--canvas);
    border: 1px solid var(--hairline);
    border-radius: 9999px;
    padding: 10px 18px;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.2s, background 0.2s;
  }
  .filter-chip:hover { border-color: var(--ink-muted-48); }
  .filter-chip:active { transform: scale(0.96); }
  .filter-chip[aria-pressed="true"] {
    border: 2px solid var(--primary-focus);
    padding: 9px 17px;
    font-weight: 600;
  }
  .filter-chip:focus-visible { outline: 2px solid var(--primary-focus); outline-offset: 2px; }

  .entry {
    display: grid;
    grid-template-columns: 104px 1fr;
    gap: 24px;
    padding: 26px 0;
    border-bottom: 1px solid var(--divider-soft);
  }
  .entry.hidden { display: none; }
  .entry .date {
    font-size: 14px;
    letter-spacing: -0.224px;
    color: var(--ink-muted-48);
    font-variant-numeric: tabular-nums;
    padding-top: 3px;
    white-space: nowrap;
  }
  .entry .cat {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -0.12px;
    color: var(--ink-muted-48);
    text-transform: none;
    margin-bottom: 6px;
  }
  .entry h3 {
    font-size: 19px;
    font-weight: 600;
    line-height: 1.32;
    letter-spacing: -0.374px;
    margin: 0 0 8px;
    text-wrap: balance;
  }
  .entry h3 a { color: var(--ink); transition: color 0.2s; }
  .entry h3 a:hover { color: var(--primary); text-decoration: none; }
  .entry p {
    margin: 0 0 8px;
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: -0.224px;
    color: var(--ink-muted-80);
    max-width: 66ch;
  }
  .entry .src { font-size: 13px; letter-spacing: -0.12px; }
  .entry .src a { color: var(--ink-muted-48); }
  .entry .src a:hover { color: var(--primary); }

  /* ═══ 제품 (dark-2 tile) ═══ */
  .products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
  }
  .pcard {
    background: var(--tile-3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 26px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .pcard .ptype {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -0.12px;
    color: var(--primary-on-dark);
  }
  .pcard h4 {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.374px;
    margin: 0;
  }
  .pcard h4 a { color: #ffffff; transition: color 0.2s; }
  .pcard h4 a:hover { color: var(--primary-on-dark); text-decoration: none; }
  .pcard .company {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: -0.12px;
    color: var(--ink-muted-48);
  }
  .pcard p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: -0.224px;
    color: var(--body-muted);
  }
  .pcard .pmeta {
    margin-top: auto;
    padding-top: 10px;
    font-size: 12px;
    letter-spacing: -0.12px;
    color: var(--ink-muted-48);
    font-variant-numeric: tabular-nums;
  }

  /* ═══ 제품 수록 기준 ═══ */
  .product-note {
    font-size: 14px;
    line-height: 1.55;
    letter-spacing: -0.224px;
    color: var(--ink-muted-48);
    margin: -30px 0 34px;
    max-width: 78ch;
  }
  /* 이 컴포넌트는 원래 어두운 제품 타일용이었는데 밝은 타일(#llm)에서도 쓰인다.
   * 기본값을 밝은 표면 기준으로 두고, 어두운 타일에서만 되돌린다.
   * (구: strong이 #cccccc라 파치먼트 위에서 1.47:1 — 사실상 보이지 않았다) */
  .product-note strong { color: var(--ink); font-weight: 600; }
  .product-note a { color: var(--primary); }
  .tile-dark .product-note,
  .tile-dark-2 .product-note { color: var(--body-muted); }
  .tile-dark .product-note strong,
  .tile-dark-2 .product-note strong { color: #ffffff; }
  .tile-dark .product-note a,
  .tile-dark-2 .product-note a { color: var(--primary-on-dark); }

  /* ═══ 논문 리뷰 티저 ═══ */
  .paper-teasers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
    margin-bottom: 28px;
  }
  .pt-card {
    background: var(--tile-3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 26px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .pt-card .pt-tag {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -0.12px;
    color: var(--primary-on-dark);
  }
  .pt-card h3 {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.374px;
    margin: 0;
    text-wrap: balance;
  }
  .pt-card h3 a { color: #ffffff; transition: color 0.2s; }
  .pt-card h3 a:hover { color: var(--primary-on-dark); text-decoration: none; }
  .pt-card .pt-journal {
    font-size: 13px;
    letter-spacing: -0.12px;
    color: var(--ink-muted-48);
  }
  .pt-card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: -0.224px;
    color: var(--body-muted);
  }

  /* ═══ 소개·문의 ═══ */
  .contact-card {
    background: var(--canvas);
    border: 1px solid var(--hairline);
    border-radius: 18px;
    padding: 34px 32px;
    display: flex;
    gap: 26px;
    align-items: flex-start;
    max-width: 680px;
  }
  .contact-card .avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(0, 102, 204, 0.09);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .contact-card .avatar svg {
    width: 30px;
    height: 30px;
    stroke: var(--primary);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
  }
  .contact-card h3 {
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -0.374px;
    margin: 0 0 2px;
  }
  .contact-card .role {
    font-size: 14px;
    letter-spacing: -0.224px;
    color: var(--ink-muted-48);
    margin: 0 0 12px;
  }
  .contact-card p.bio {
    font-size: 15px;
    line-height: 1.55;
    letter-spacing: -0.224px;
    color: var(--ink-muted-80);
    margin: 0 0 18px;
    max-width: 52ch;
  }
  .contact-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 32px;
  }
  .cl-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--ink-muted-48);
    margin-bottom: 1px;
  }
  .contact-links a {
    font-size: 14.5px;
    letter-spacing: -0.224px;
    color: var(--primary);
    word-break: break-all;
  }
  @media (max-width: 560px) {
    .contact-card { flex-direction: column; }
    .contact-links { grid-template-columns: 1fr; }
  }

  /* ═══ Footer (parchment) ═══ */
  footer {
    background: var(--parchment);
    padding: 48px 22px;
  }
  footer .tile-inner {
    font-size: 12px;
    line-height: 1.6;
    letter-spacing: -0.12px;
    color: var(--ink-muted-48);
  }
  footer p { margin: 0 0 8px; max-width: 76ch; }

  /* ═══ Reveal motion — html.js가 있을 때만 숨김(무JS 환경에서는 항상 표시) ═══ */
  html.js .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.7s cubic-bezier(0.25, 0.1, 0.25, 1);
  }
  html.js .reveal.in { opacity: 1; transform: none; }

  @media (max-width: 640px) {
    .tile { padding: 64px 22px; }
    .hero { padding: 58px 22px 46px; }
    .entry { grid-template-columns: 1fr; gap: 6px; }
    .entry .date { padding-top: 0; }
    /* 모바일: 브랜드 아래에 메뉴를 가로 스크롤 띠로 */
    .gnav { height: auto; }
    .gnav-inner {
      height: auto;
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      padding: 9px 0 8px;
    }
    .brand { padding: 0 18px 8px; }
    .gnav .wordmark { font-size: 16px; letter-spacing: -0.3px; }
    .gnav nav {
      background: transparent;
      border-radius: 0;
      padding: 2px 18px 3px;
      gap: 7px;
      overflow-x: auto;
      overscroll-behavior-x: contain;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    .gnav nav::-webkit-scrollbar { display: none; width: 0; height: 0; }
    .gnav nav a {
      background: rgba(255, 255, 255, 0.13);
      padding: 8px 13px;
      font-size: 14px;
      flex: 0 0 auto;
    }
    .gnav nav a.current { background: var(--primary); }
    .tile[id], .hero[id] { scroll-margin-top: 96px; }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; transition: none; }
    * { animation: none !important; }
  }

  /* ═══ 알림 받기 ═══ */
  #notify[hidden] { display: none; }
  .notify-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 22px;
  }
  .btn-notify {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--primary);
    color: #ffffff;
    font-family: inherit;
    font-size: 17px;
    letter-spacing: -0.374px;
    padding: 11px 22px;
    border-radius: 9999px;
    border: 1px solid var(--primary);
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
  }
  /* 터치 기기는 탭 뒤에도 :hover가 남는다. 켜짐 상태(.is-on)는 파란 글씨라
   * hover 배경이 파랗게 칠해지면 글씨가 배경에 묻혀 보이지 않았다.
   * 그래서 hover 효과는 진짜 포인터가 있는 기기에서만 적용한다. */
  @media (hover: hover) and (pointer: fine) {
    .btn-notify:hover:not(:disabled) { background: var(--primary-focus); border-color: var(--primary-focus); }
    .btn-notify.is-on:hover:not(:disabled) {
      background: rgba(0, 102, 204, 0.08);
      color: var(--primary);
      border-color: var(--primary);
    }
  }
  .btn-notify:active:not(:disabled) { transform: scale(0.96); }
  .btn-notify:disabled { opacity: 0.5; cursor: default; }
  .btn-notify.is-on {
    background: transparent;
    color: var(--primary);
    border-color: var(--primary);
  }
  .btn-notify svg {
    width: 17px; height: 17px; fill: none;
    stroke: currentColor; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round;
  }
  .notify-status {
    font-size: 14.5px;
    letter-spacing: -0.224px;
    color: var(--ink-muted-48);
  }
  .notify-note {
    margin-top: 16px;
    font-size: 14px;
    line-height: 1.6;
    letter-spacing: -0.224px;
    color: var(--ink-muted-48);
    max-width: 66ch;
  }
  .notify-note strong { color: var(--ink-muted-80); font-weight: 600; }


  /* ═══ 하위 내비 (브리핑 섹션 이동) ═══ */
  .subnav {
    position: sticky;
    top: 44px;               /* 검정 내비 높이만큼 내려 붙인다 */
    z-index: 99;
    background: rgba(245, 245, 247, 0.92);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--hairline);
  }
  .subnav-inner {
    max-width: 980px;
    margin: 0 auto;
    padding: 0 22px;
    height: 42px;
    display: flex;
    align-items: center;
    gap: 2px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .subnav-inner::-webkit-scrollbar { display: none; width: 0; height: 0; }
  .subnav a {
    flex: 0 0 auto;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: -0.224px;
    color: var(--ink-muted-80);
    padding: 6px 12px;
    border-radius: 9999px;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s;
  }
  .subnav a:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--ink);
    text-decoration: none;
  }
  .subnav a:active { transform: scale(0.96); }
  /* 지금 보고 있는 섹션 표시 (스크롤 감지 스크립트가 .current를 붙인다) */
  .subnav a.current {
    background: var(--primary);
    color: #ffffff;
  }
  /* 검정 내비(44) + 섹션띠(42)에 제목이 가리지 않도록 */
  .tile[id], .hero[id] { scroll-margin-top: 100px; }
  @media (max-width: 640px) {
    .subnav-inner { padding: 0 16px; height: 40px; }
    .subnav a { font-size: 13px; padding: 6px 10px; }
    .tile[id], .hero[id] { scroll-margin-top: 96px; }
  }

/* ═══ 서브페이지 머리말 ═══
 * 홈은 히어로가 있지만 논문·제품·문의 페이지는 제목 블록으로 시작한다. */
.page-head {
  background: var(--canvas);
  padding: 72px 22px 40px;
}
.page-head-inner { max-width: 980px; margin: 0 auto; }
.page-head h1 {
  font-family: var(--font-display);
  font-size: clamp(34px, 6vw, 56px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0 0 14px;
}
.page-sub {
  font-size: clamp(17px, 2.5vw, 21px);
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--ink-muted-48);
  margin: 0;
  max-width: 62ch;
}
@media (max-width: 640px) {
  .page-head { padding: 52px 18px 32px; }
}

/* ═══ 브리핑 드롭다운 ═══
 * hover만으로 만들면 터치 기기에서 열 수단이 없어진다.
 *   - 마우스: hover (@media (hover: hover) 안에서만)
 *   - 터치:   탭하면 열림 (JS가 .open 토글)
 *   - 키보드: focus-within
 */
.gnav nav .menu-wrap { position: relative; display: flex; }
.gnav nav .menu-wrap > a { display: inline-flex; align-items: center; gap: 5px; }
.gnav nav .menu-wrap > a::after {
  content: "";
  width: 5px; height: 5px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  opacity: 0.75;
  transition: transform 0.2s;
}
.dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 190px;
  background: rgba(28, 28, 30, 0.92);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}
.dropdown a {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.224px;
  color: rgba(255, 255, 255, 0.86);
  padding: 9px 13px;
  border-radius: 9px;
  white-space: nowrap;
}
.dropdown a:hover { background: rgba(255, 255, 255, 0.14); color: #ffffff; text-decoration: none; }
.dropdown .dd-sep { height: 1px; background: rgba(255, 255, 255, 0.12); margin: 5px 4px; }

.menu-wrap.open > .dropdown,
.menu-wrap:focus-within > .dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.menu-wrap.open > a::after { transform: rotate(-135deg) translate(-2px, -2px); }

@media (hover: hover) and (pointer: fine) {
  .menu-wrap:hover > .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
  .menu-wrap:hover > a::after { transform: rotate(-135deg) translate(-2px, -2px); }
}

@media (max-width: 640px) {
  .dropdown { min-width: 170px; }
  .dropdown a { font-size: 13.5px; padding: 8px 12px; }
}

/* ═══ 갱신 주기 배지 ═══
 * 섹션마다 자연스러운 갱신 속도가 달라(뉴스는 매주, 키워드·핵심은 매월)
 * 제목 옆에 주기를 표시한다. 독자가 언제 다시 오면 되는지 알 수 있다. */
.cadence {
  display: inline-block;
  vertical-align: middle;
  margin-left: 12px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 5px 10px;
  border-radius: 9999px;
  background: rgba(0, 102, 204, 0.1);
  color: #005bb8;            /* 배지 배경 위 5.27:1 (구 var(--primary)는 4.45) */
  white-space: nowrap;
  transform: translateY(-4px);
}
.tile-dark .cadence, .tile-dark-2 .cadence {
  background: rgba(255, 255, 255, 0.14);
  color: #7cc0ff;            /* 어두운 타일 위 4.94:1 (구 #2997ff는 3.17) */
}
@media (max-width: 640px) {
  .cadence { font-size: 11.5px; padding: 4px 9px; margin-left: 8px; }
}

/* ═══ 하단 탭바 (모바일·앱) ═══
 * 390px에서는 긴 워드마크와 5개 메뉴가 44px 한 줄에 들어가지 않아 두 줄로
 * 밀리고 잘렸다. 모바일에서는 상단 메뉴를 감추고 탭바가 이동을 맡는다.
 * iPhone 홈 인디케이터를 피하려고 safe-area 만큼 아래 여백을 준다. */
.tabbar { display: none; }

@media (max-width: 640px) {
  /* 상단은 워드마크만 남긴다.
   * 원래 모바일 스타일은 상단바를 세로 2단(브랜드 + 메뉴)으로 쌓는데,
   * .gnav 높이는 44px로 고정돼 있어 내용이 넘쳐 잘렸다. 메뉴를 탭바로
   * 옮겼으니 한 줄짜리 바로 되돌린다. */
  .gnav nav { display: none; }
  .gnav-inner {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    height: 44px;
    padding: 0 16px;
    gap: 10px;
  }
  .brand { padding: 0; display: flex; align-items: baseline; gap: 8px; min-width: 0; }
  .gnav .wordmark { overflow: hidden; text-overflow: ellipsis; }
  /* 날짜는 푸터에도 있으므로 좁은 화면에서는 감춘다 */
  .gnav .updated { display: none; }

  .tabbar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-top: 1px solid var(--hairline);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .tabbar a {
    flex: 1 1 0;
    min-width: 0;          /* 이게 없으면 항목이 콘텐츠 폭 밑으로 못 줄어 5개가 안 들어간다 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 2px 7px;
    min-height: 50px;
    color: var(--ink-muted-48);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: -0.2px;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
  }
  .tabbar a span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .tabbar a:hover { text-decoration: none; }
  .tabbar a:active { background: rgba(0, 0, 0, 0.04); }
  .tabbar svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .tabbar a[aria-current="page"] { color: var(--primary); }

  /* 탭바에 본문이 가리지 않도록 */
  body { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
}