/* 디자인 토큰(색·타이포), 전역 리셋, 모션, 가로 오버플로 안전장치 */

:root {
  --color-base: #fbfcfe;
  --color-surface: #f2f5f9;
  --color-surface-2: #eef2f7;
  --color-paper: #ffffff;
  --color-ink: #16293f;
  --color-ink-soft: #384451;
  --color-primary: #17845b;
  --color-primary-deep: #0d5c3f;
  --color-accent: #4eae78;
  --color-accent-soft: #a6dcc0;
  --color-coral: #d9694e;
  --color-muted: #55606f;
  --color-line: #e5eaf1;
  --color-line-strong: #d0d9e4;

  --font-sans: "Pretendard", system-ui, -apple-system, sans-serif;
  --font-serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --radius-card: 0.75rem;
  --shadow-card: 0 1px 3px rgba(32, 60, 90, 0.06), 0 1px 2px rgba(32, 60, 90, 0.04);
  --shadow-focus: 0 0 0 3px var(--color-accent-soft);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* 타이포 기준은 원본 사이트(precisionfoodlab.co.kr)의 실측값을 따른다.
   본문 17px / 줄간격 1.5 / 자간 normal. 본문 자간을 좁히지 않는 것이 원본의 규칙이다. */
body {
  margin: 0;
  background-color: var(--color-base);
  color: #14202e;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: normal;
}

/* 한글은 단어 중간에서 끊기면 안 읽힌다. 원본은 전역으로 keep-all을 쓴다.
   긴 URL 등 끊을 데가 없는 문자열만 예외로 break-word가 받아준다. */
html,
body {
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 가로 오버플로 안전장치. 어떤 페이지도 좌우로 스크롤되면 안 된다. */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
}

/* 제목 자간·줄간격도 원본 실측값을 따른다. 원본 h2(48px)는 -0.025em / 1.0,
   히어로(72px)는 -0.009em / 1.0으로 우리 기존값(-0.03em / 1.1)보다 느슨하다.
   다만 원본 h2는 한 줄짜리 짧은 제목이고 우리 제목은 두 줄로 넘어가는 게 있어
   1.0 대신 1.05로 아주 조금만 여유를 둔다. */
h1,
h2,
h3 {
  letter-spacing: -0.025em;
  line-height: 1.05;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}
a:hover {
  color: var(--color-primary-deep);
}

::selection {
  background: var(--color-accent);
  color: #fff;
}

:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: 4px;
}

/* 지표 숫자. 자릿수가 흔들리지 않도록 tabular-nums를 쓴다. */
.metric-num {
  font-family: var(--font-mono);
  font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -0.04em;
  line-height: 0.9;
}

.serif {
  font-family: var(--font-serif);
}

/* 로고 파동에서 온 히어로 배경 텍스처 */
.wave-field {
  background: linear-gradient(180deg, rgba(32, 60, 90, 0.025), transparent 72%), var(--color-base);
}

/* 첫 화면의 좌우 균형과 움직임 없는 연구 정보 패널 */
.home-hero { display: grid; align-items: center; gap: 40px; padding-top: 48px; padding-bottom: 48px; }
.home-hero-copy { min-width: 0; }
.home-hero-title { font-size: clamp(2rem, 3.1vw, 2.9rem); font-weight: 750; line-height: 1.24; letter-spacing: -0.04em; }
.home-hero-image { min-width: 0; margin: 0; }
.home-hero-image img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 3px; }
.home-hero-image figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding-top: 14px; font-size: 11px; color: var(--color-muted); }
.home-hero-image figcaption span:first-child { letter-spacing: 0.12em; }
.research-note { padding: 24px 0 24px 28px; border-left: 1px solid var(--color-line-strong); align-self: center; }
.research-note .research-note-label { margin: 0 0 20px; color: var(--color-primary); font: 500 11px var(--font-mono); letter-spacing: 0.12em; }
.research-note strong { display: block; margin-bottom: 8px; font-size: 22px; font-weight: 600; }
.research-note p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--color-muted); }
.research-note a { display: inline-block; margin-top: 20px; font-size: 13px; font-weight: 600; }
@media (min-width: 1024px) {
  .home-hero { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 56px; }
}
@media (max-width: 1023px) {
  .home-hero-image img { aspect-ratio: 16 / 9; }
  .research-note { border-left: 0; border-top: 1px solid var(--color-line-strong); padding: 22px 0 0; }
}
@media (max-width: 599px) {
  .home-hero { gap: 30px; padding-top: 32px; padding-bottom: 32px; }
  .home-hero-title { font-size: 2rem; }
}

/* 페이지마다 다른 연구·기록·협력 맥락을 보여주는 히어로 */
.page-hero-grid { display: grid; gap: 40px; align-items: start; }
.hero-aside { min-width: 0; padding: 30px; border: 1px solid var(--color-line); border-radius: 4px; background: var(--color-paper); }
.hero-aside .hero-eyebrow { margin: 0 0 24px; font: 500 10px var(--font-mono); letter-spacing: 0.12em; color: var(--color-muted); }
.hero-aside-title { margin: 0; font-size: 25px; line-height: 1.35; font-weight: 650; letter-spacing: -0.035em; }
.hero-aside-copy { margin: 16px 0 0; font-size: 14px; line-height: 1.7; color: var(--color-muted); }
.hero-aside-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--color-line); font-size: 12px; }
.hero-aside-bottom > span { color: var(--color-muted); }
.hero-aside-bottom a, .hero-text-link { font-size: 12px; font-weight: 600; }
.hero-news { border-top: 2px solid var(--color-primary); }
.news-date { display: flex; align-items: baseline; gap: 15px; margin-bottom: 24px; }
.news-date span { font: 500 13px var(--font-mono); color: var(--color-muted); }
.news-date strong { font: 500 52px/1 var(--font-mono); letter-spacing: -0.06em; }
.hero-news .hero-aside-title { font-size: 20px; }
.hero-team { background: var(--color-ink); border-color: var(--color-ink); color: white; }
.hero-team .hero-eyebrow, .hero-team .hero-aside-bottom a { color: #a6dcc0; }
.hero-team .hero-aside-copy, .hero-team .hero-aside-bottom > span { color: #c8d5e2; }
.hero-team .hero-aside-bottom { border-color: #3b4f64; }
.hero-research { background: #f0f5f3; border-color: #dce7e0; }
.hero-process { list-style: none; padding: 0; margin: 0; }
.hero-process li { display: grid; grid-template-columns: 26px 1fr; gap: 14px; padding: 0 0 23px; }
.hero-process li + li { padding-top: 20px; border-top: 1px solid #d7e2dc; }
.hero-process li > span { padding-top: 2px; font: 500 12px var(--font-mono); color: var(--color-primary); }
.hero-process strong { display: block; font-size: 17px; font-weight: 600; }
.hero-process p { margin: 6px 0 0; font-size: 12px; line-height: 1.6; color: var(--color-muted); }
.hero-industry { border-left: 3px solid var(--color-primary); background: #f6f8fb; }
.hero-steps { margin: 22px 0 0; padding: 0; list-style: none; }
.hero-steps li { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--color-line-strong); font-size: 14px; }
.hero-steps span { font: 500 10px var(--font-mono); color: var(--color-muted); }
.hero-aside-footnote { margin: 16px 0 0; font-size: 11px; color: var(--color-muted); }
.hero-contact { background: #faf9f5; border-color: #e6e3d9; }
.contact-checklist { margin: 22px 0 0; padding: 0; list-style: none; }
.contact-checklist li { padding: 10px 0; border-top: 1px solid #e6e3d9; font-size: 13px; }
.contact-checklist li::before { content: '✓'; margin-right: 12px; color: var(--color-primary); }
#news-archive, #research-axes { scroll-margin-top: 120px; }

.member-portrait { display: block; width: 100%; aspect-ratio: 7 / 9; object-fit: cover; object-position: center; border-radius: 8px; margin-bottom: 20px; }
.professor-portrait { display:block; width:100%; aspect-ratio:7 / 9; object-fit:cover; align-self:flex-start; }
.professor-about-portrait { display:block; width:154px; aspect-ratio:7 / 9; object-fit:cover; border-radius:8px; margin-bottom:22px; }

/* 날짜·환경 요약을 모든 화면에서 로고와 메뉴 사이에 유지한다. */
.site-header-row { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; min-height: 76px; }
.site-brand { min-width: 0; }
.site-brand img { width: 156px; height: auto; }
.header-environment { position: relative; justify-self: center; min-width: 0; font-size: 11px; line-height: 1.5; color: var(--color-muted); }
.header-environment summary { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; list-style: none; padding: 4px; border-radius: 4px; }
.header-environment summary::-webkit-details-marker { display: none; }
.header-environment summary:hover { background: var(--color-surface); }
.environment-date { white-space: nowrap; font-size: 11px; font-variant-numeric: tabular-nums; }
.environment-full-date { display: block; margin-top: 3px; font-size: 11px; }
.environment-summary { display: flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--color-ink); }
.environment-summary b { font-weight: 600; }
.environment-divider { color: #b0b8c2; }
[data-tone="good"] { color: #17845b; } [data-tone="fair"] { color: #427598; } [data-tone="poor"] { color: #986020; } [data-tone="bad"] { color: #b43d36; }
.environment-panel { position: absolute; z-index: 60; width: 310px; left: 50%; top: calc(100% + 9px); transform: translateX(-50%); padding: 20px; border: 1px solid var(--color-line); border-radius: 8px; background: white; box-shadow: 0 12px 30px #16293f15; font-size: 12px; }
.environment-panel-heading { display: flex; align-items: center; justify-content: space-between; color: var(--color-ink); }
.environment-panel-heading strong { font-size: 15px; }
.environment-panel-heading button { width: 28px; height: 28px; font-size: 22px; cursor: pointer; }
.environment-readings { margin: 16px 0; }
.environment-readings > div { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--color-line); }
.environment-readings dt span { font-size: 10px; }
.environment-readings dd { margin: 0; font-weight: 600; color: var(--color-ink); }
.environment-time { margin: 14px 0 8px; font-size: 10px; }
.environment-source { margin: 0; font-size: 10px; line-height: 1.6; }
.environment-links { display: flex; align-items: center; gap: 12px; margin-top: 12px; font-size: 10px; }
.environment-links button { margin-left: auto; color: var(--color-ink); text-decoration: underline; cursor: pointer; }
.environment-links button:disabled { opacity: 0.5; cursor: wait; }
@media (min-width: 1024px) {
  .page-hero-grid { grid-template-columns: minmax(0, 1fr) 24rem; gap: 48px; }
}
@media (max-width: 1199px) {
  .site-header-row .site-desktop-nav { display: none; }
  .site-header-row #nav-toggle { display: flex; grid-column: 3; grid-row: 1; }
  #mobile-nav:not(.hidden) { display: block; }
  .header-environment { justify-self: end; }
  .environment-panel { left: auto; right: 0; transform: none; }
}
@media (max-width: 599px) {
  .hero-aside { padding: 24px; }
  .hero-aside-title { font-size: 23px; }
  .page-hero-grid { gap: 28px; }
  header .site-header-row { min-height: 68px; gap: 8px; padding-left: 16px; padding-right: 16px; }
  .site-brand img { width: 136px; }
  .header-environment { position: static; }
  .header-environment summary { padding: 4px 0; }
  .environment-date, .environment-dust-prefix { display: none; }
  .environment-summary { font-size: 11px; gap: 5px; }
  .environment-panel { width: auto; left: 16px; right: 16px; top: calc(100% - 2px); }
  .site-header-row #nav-toggle { width: 36px; height: 36px; }
}
@media (max-width: 359px) {
  .site-brand img { width: 112px; }
  header .site-header-row { gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    animation: none !important;
    transition: none !important;
  }
}