/* ================================================================
   넛지디자인연구소 — 공통 스타일 (인지심리학 연구 저널 톤)
   ----------------------------------------------------------------
   수정 가이드
   - 색상·폰트·간격은 @layer tokens 의 :root 변수만 바꾸면 전체에 반영됩니다.
   - 라벨/번호/메타 글자는 .mono 클래스 하나로 통일되어 있습니다.
   - 페이지 고유 스타일은 각 html 의 <style> 이 아니라 아래 @layer pages 에 추가하세요.
   - 레이어 순서: tokens → base → layout → components → pages → utilities
     (뒤 레이어가 항상 이깁니다. !important 없이 덮어쓰기.)
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');
@layer tokens, base, layout, components, pages, utilities;

/* ================================================================ 1. 토큰 */
@layer tokens {
  :root {
    /* 색 — 종이 · 잉크 · 시그널 하나 */
    --bg: #f4f4f0;
    --bg-2: #ebebe5;
    --surface: #ffffff;
    --surface-2: #e6e6df;
    --ink: #141518;
    --ink-2: #4b4f55;
    --ink-3: #8b9096;
    --on-ink: #ffffff;
    --line: #d8d9d2;
    --line-2: #c4c6be;
    --line-strong: var(--ink);
    --signal: #2447e0;
    --signal-ink: #1a35b0;
    --signal-bg: #e6ebfc;
    --danger: #b3261e;
    --focus: var(--signal);

    /* 타이포 */
    --font-sans: 'IBM Plex Sans KR', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --fs-display: clamp(36px, 5.2vw, 64px);
    --fs-h1: clamp(26px, 3.6vw, 40px);
    --fs-h2: 22px;
    --fs-h3: 17px;
    --fs-body: 16px;
    --fs-sm: 14px;
    --fs-xs: 12.5px;
    --fs-mono: 12px;
    --lh-body: 1.75;
    --lh-tight: 1.12;
    --track-tight: -.02em;
    --track-mono: .04em;

    /* 간격 스케일 + 리듬 */
    --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
    --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
    --section-gap: var(--s-9);
    --section-gap-sm: var(--s-8);
    --section-gap-xs: var(--s-6);
    --hero-pt: 88px;
    --hero-pb: 64px;

    /* 형태 · 선 · 모션 · 레이아웃 */
    --r-1: 2px;
    --r-pill: 999px;
    --hair: 1px solid var(--line);
    --rule: 2px solid var(--line-strong);
    --t-fast: .15s;
    --t-base: .3s;
    --ease: cubic-bezier(.2, .7, .2, 1);
    --max: 1200px;
    --max-prose: 760px;
    --pad: 24px;
    --nav-h: 64px;
    --grid-gap: 20px;
  }
}

/* ================================================================ 2. 베이스 */
@layer base {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
  body {
    font-family: var(--font-sans); background: var(--bg); color: var(--ink);
    font-size: var(--fs-body); line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased; min-height: 100vh;
  }
  a { color: inherit; text-decoration: none; }
  img { display: block; max-width: 100%; height: auto; }
  ul, ol { list-style: none; }
  button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
  code {
    font-family: var(--font-mono); font-size: .9em;
    background: var(--surface-2); padding: 1px 6px; border-radius: var(--r-1);
  }
  [hidden] { display: none !important; }
  ::selection { background: var(--signal-bg); }

  :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  :focus:not(:focus-visible) { outline: none; }

  .visually-hidden {
    position: absolute !important; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  .skip-link {
    position: absolute; left: var(--s-4); top: -100px; z-index: 200;
    padding: var(--s-2) var(--s-4); background: var(--ink); color: var(--on-ink);
    border-radius: var(--r-1); font-size: var(--fs-sm);
  }
  .skip-link:focus { top: var(--s-4); }

  /* 라벨 · 번호 · 메타 = 모노 */
  .mono {
    font-family: var(--font-mono); font-size: var(--fs-mono);
    letter-spacing: var(--track-mono); font-variant-numeric: tabular-nums;
    text-transform: uppercase; font-weight: 500;
  }

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

/* ================================================================ 3. 레이아웃 */
@layer layout {
  .container { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
  .container--prose { max-width: calc(var(--max-prose) + var(--pad) * 2); }

  .section { margin-top: var(--section-gap); }
  .section--sm { margin-top: var(--section-gap-sm); }
  .section--xs { margin-top: var(--section-gap-xs); }

  .cluster { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
  .stack > * + * { margin-top: var(--s-4); }
  .rule-top { border-top: var(--rule); }

  .grid { display: grid; gap: var(--grid-gap); }
  .grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
  .grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

  @media (max-width: 960px) {
    .grid.cols-4 { grid-template-columns: repeat(3, 1fr); }
    .grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 640px) {
    .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 440px) {
    .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; }
  }
}

/* ================================================================ 4. 컴포넌트 */
@layer components {

  /* ---------- 내비게이션 ---------- */
  .nav { position: sticky; top: 0; z-index: 100; background: var(--bg); border-bottom: var(--hair); }
  .nav-inner {
    max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); height: var(--nav-h);
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
  }
  .nav-logo { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; letter-spacing: -.01em; }
  .nav-logo .mark { display: flex; }
  .nav-logo .mark i { width: 14px; height: 14px; border-radius: 50%; display: block; }
  .nav-logo .mark i:first-child { background: var(--ink); }
  .nav-logo .mark i:last-child { background: var(--signal); margin-left: -5px; }
  .nav-links { display: flex; align-items: center; gap: var(--s-1); }
  .nav-links a {
    padding: 6px 12px; font-size: var(--fs-sm); color: var(--ink-2);
    border-radius: var(--r-1); transition: color var(--t-fast);
  }
  .nav-links a:hover { color: var(--ink); }
  .nav-links a.active { color: var(--ink); box-shadow: inset 0 -2px 0 var(--signal); }
  .nav-toggle { display: none; font-size: 22px; line-height: 1; padding: 4px 8px; }

  /* ---------- 푸터 ---------- */
  .footer { border-top: var(--rule); margin-top: var(--s-9); }
  .footer-inner {
    max-width: var(--max); margin: 0 auto; padding: var(--s-7) var(--pad);
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s-5);
  }
  .footer .brand { font-weight: 600; font-size: 15px; }
  .footer .brand small { display: block; font-weight: 400; font-size: var(--fs-xs); color: var(--ink-3); margin-top: 4px; }
  .footer-links { display: flex; gap: var(--s-5); font-size: 13px; color: var(--ink-2); }
  .footer-links a:hover { color: var(--signal); }
  .footer .copy { width: 100%; color: var(--ink-3); text-transform: none; }

  /* ---------- 타이포 컴포넌트 ---------- */
  .eyebrow { color: var(--signal); margin-bottom: var(--s-3); }
  .eyebrow a:hover { text-decoration: underline; }
  .page-title {
    font-size: var(--fs-display); font-weight: 700; line-height: var(--lh-tight);
    letter-spacing: var(--track-tight); text-wrap: balance;
  }
  .page-title em { font-style: normal; color: var(--signal); }
  .page-desc { font-size: var(--fs-body); color: var(--ink-2); margin-top: var(--s-4); max-width: 600px; }
  .hero { padding: var(--hero-pt) 0 var(--hero-pb); }
  .hero--list { padding-bottom: var(--s-5); }
  .hero-actions { margin-top: var(--s-6); }

  .section-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4);
    border-bottom: var(--rule); padding-bottom: var(--s-3); margin-bottom: var(--s-6);
  }
  .section-head h2 {
    font-size: var(--fs-h2); font-weight: 600; letter-spacing: -.01em;
    display: flex; align-items: baseline; gap: var(--s-3);
  }
  .section-no { color: var(--signal); }
  .section-head a { font-size: var(--fs-sm); color: var(--ink-2); white-space: nowrap; }
  .section-head a:hover { color: var(--signal); }

  /* ---------- 버튼 ---------- */
  .btn {
    display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px;
    font-size: var(--fs-sm); font-weight: 500; border: 1px solid var(--ink); border-radius: var(--r-1);
    background: var(--ink); color: var(--on-ink);
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  }
  .btn:hover { background: var(--signal); border-color: var(--signal); color: var(--on-ink); }
  .btn.ghost { background: transparent; color: var(--ink); }
  .btn.ghost:hover { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }

  /* ---------- 필터 칩 ---------- */
  .chip-row { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-5) 0 var(--s-4); }
  .chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px;
    font-size: 13px; line-height: 1.4; border: 1px solid var(--line-2); border-radius: var(--r-pill);
    background: var(--surface); color: var(--ink-2); user-select: none; appearance: none;
    transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
  }
  .chip:hover { border-color: var(--ink); color: var(--ink); }
  .chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
  .chip-count { font-family: var(--font-mono); font-size: 11px; opacity: .7; }
  .grid-status { color: var(--ink-3); margin: 0 0 var(--s-4); }
  .empty { color: var(--ink-3); padding: var(--s-7) 0; text-align: center; }

  /* ---------- 카드 (표본) ---------- */
  .card {
    background: var(--surface); border: var(--hair); border-radius: var(--r-1);
    display: flex; flex-direction: column; overflow: hidden;
    transition: border-color var(--t-fast), transform var(--t-fast);
  }
  .card:hover { border-color: var(--ink); transform: translateY(-2px); }
  .card-thumb { aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-2); border-bottom: var(--hair); }
  .card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-base) var(--ease); }
  .card:hover .card-thumb img { transform: scale(1.03); }
  .card-thumb.is-missing img { visibility: hidden; }
  .card-body { padding: var(--s-4); }
  .card-meta { color: var(--ink-3); margin-bottom: 6px; }
  .card-title {
    font-size: 15px; font-weight: 600; line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .card-desc {
    font-size: 13px; color: var(--ink-2); margin-top: 6px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .card-foot { color: var(--ink-3); margin-top: var(--s-3); padding-top: var(--s-3); border-top: var(--hair); }
  .card--text .card-body { padding: var(--s-5) var(--s-4); }
  .card--text .card-title { font-size: 16px; }
  .card--text .card-desc { -webkit-line-clamp: 3; }

  /* ---------- 연구 인덱스 (홈) ---------- */
  .index-strip {
    display: grid; grid-template-columns: repeat(3, 1fr);
    border: var(--hair); border-radius: var(--r-1); background: var(--surface); overflow: hidden;
  }
  .index-item + .index-item { border-left: var(--hair); }
  .index-item a {
    display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto;
    column-gap: var(--s-4); row-gap: 2px; padding: var(--s-5); height: 100%;
    transition: background var(--t-fast);
  }
  .index-item a:hover { background: var(--signal-bg); }
  .index-item .idx { grid-row: 1 / 4; color: var(--signal); font-size: var(--fs-sm); padding-top: 6px; }
  .index-item .name { font-size: 20px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
  .index-item .en { color: var(--ink-3); }
  .index-item .count { color: var(--ink-2); margin-top: var(--s-3); }

  /* ---------- 패널 (큰 박스) ---------- */
  .panel { display: block; border: var(--rule); border-radius: var(--r-1); padding: var(--s-7) var(--s-6); }
  .panel--link { transition: background var(--t-fast); }
  .panel--link:hover { background: var(--surface); }
  .panel-title { font-size: clamp(22px, 3vw, 30px); font-weight: 700; letter-spacing: var(--track-tight); line-height: 1.2; }
  .panel-desc { font-size: var(--fs-sm); color: var(--ink-2); margin-top: var(--s-2); max-width: 640px; }
  .panel .btn { margin-top: var(--s-5); }

  /* ---------- 상세 (프로젝트 / 포스트) ---------- */
  .detail-head { padding: var(--s-8) 0 var(--s-6); border-bottom: var(--hair); }
  .detail-head .card-meta { margin-bottom: 0; }
  .detail-head h1 {
    font-size: var(--fs-h1); font-weight: 700; letter-spacing: var(--track-tight); line-height: 1.2;
    margin: var(--s-2) 0 var(--s-3); text-wrap: balance;
  }
  .detail-desc { font-size: 15px; color: var(--ink-2); max-width: 720px; }
  .detail-actions { margin-top: var(--s-5); }
  .detail-meta { display: flex; gap: var(--s-6); flex-wrap: wrap; font-size: var(--fs-sm); color: var(--ink-2); margin-top: var(--s-5); }
  .detail-meta b { display: block; color: var(--ink-3); margin-bottom: 2px; }
  .detail-img { margin: var(--s-6) 0; border: var(--hair); background: var(--surface); border-radius: var(--r-1); overflow: hidden; }
  .detail-img:empty { display: none; }
  .detail-img img { width: 100%; }
  .detail-nav {
    display: flex; justify-content: space-between; gap: var(--s-5);
    padding: var(--s-6) 0; border-top: var(--hair); margin-top: var(--s-7);
  }
  .detail-nav a { font-size: var(--fs-sm); color: var(--ink-2); }
  .detail-nav a:hover { color: var(--signal); }
  .detail-nav span:last-child { text-align: right; }

  /* ---------- 안내 / 오류 ---------- */
  .notice { border: var(--rule); border-radius: var(--r-1); padding: var(--s-6); margin: var(--s-7) 0; background: var(--surface); }
  .notice--error { border-color: var(--danger); }
  .notice--error .eyebrow { color: var(--danger); }
  .notice-title { font-size: var(--fs-h2); font-weight: 600; margin-bottom: var(--s-2); }
  .notice-msg { color: var(--ink-2); }
  .notice-hint { font-size: var(--fs-sm); color: var(--ink-3); margin-top: var(--s-3); }
  .notice .btn { margin-top: var(--s-4); }

  /* ---------- LAB ---------- */
  .lab-item {
    display: flex; justify-content: space-between; align-items: center; gap: var(--s-5);
    padding: var(--s-6) var(--s-1); border-bottom: var(--hair); transition: background var(--t-fast);
  }
  .lab-entry--open .lab-item { border-bottom: 0; }
  .lab-item:hover { background: var(--surface); }
  .lab-item .num { color: var(--signal); min-width: 36px; }
  .lab-item .info { flex: 1; }
  .lab-item h3 { font-size: 18px; font-weight: 600; }
  .lab-item p { font-size: var(--fs-sm); color: var(--ink-2); margin-top: 2px; }
  .lab-item .tags { display: flex; gap: 6px; flex-wrap: wrap; }
  .lab-item .tags span { padding: 3px 10px; border: var(--hair); border-radius: var(--r-pill); color: var(--ink-2); }
  .lab-item .arrow { font-size: 20px; color: var(--ink-3); }
  .lab-item:hover .arrow { color: var(--signal); }
  .lab-versions { margin: 0; padding: 0 var(--s-1) var(--s-5) 52px; border-bottom: var(--hair); }

  /* ---------- 연구 분야 / 연구 방법 / 연혁 / 클라이언트 ---------- */
  .about-lead {
    font-size: clamp(22px, 3vw, 32px); font-weight: 600; line-height: 1.5;
    letter-spacing: -.01em; max-width: 820px; text-wrap: balance;
  }
  .about-lead em { font-style: normal; color: var(--signal); }

  .pillar { border-top: var(--rule); padding-top: var(--s-5); }
  .pillar .no { color: var(--signal); }
  .pillar h3 { font-size: 18px; font-weight: 600; margin: var(--s-2) 0 var(--s-3); }
  .pillar p { font-size: var(--fs-sm); color: var(--ink-2); }
  .pillar .apply { font-size: 13px; color: var(--ink-3); margin-top: var(--s-3); padding-top: var(--s-3); border-top: var(--hair); }

  .method { display: grid; grid-template-columns: repeat(4, 1fr); border: var(--hair); background: var(--surface); border-radius: var(--r-1); overflow: hidden; }
  .method-step { padding: var(--s-5); }
  .method-step + .method-step { border-left: var(--hair); }
  .method-step .no { color: var(--signal); }
  .method-step h3 { font-size: 16px; font-weight: 600; margin: var(--s-2) 0; }
  .method-step p { font-size: 13px; color: var(--ink-2); }

  .timeline { border-left: 2px solid var(--line-2); margin-left: 6px; padding-left: 28px; }
  .timeline li { position: relative; padding-bottom: 28px; }
  .timeline li::before {
    content: ''; position: absolute; left: -35px; top: 9px;
    width: 10px; height: 10px; border-radius: 50%; background: var(--signal);
  }
  .timeline .year { color: var(--signal-ink); }
  .timeline h3 { font-size: 16px; font-weight: 600; margin: 2px 0; }
  .timeline p { font-size: var(--fs-sm); color: var(--ink-2); }

  .client-wall { display: flex; flex-wrap: wrap; gap: var(--s-3); }
  .client-wall span {
    padding: 10px 22px; border: var(--hair); background: var(--surface); border-radius: var(--r-1);
    font-size: var(--fs-sm); font-weight: 500; color: var(--ink-2);
  }

  /* ---------- 반응형 ---------- */
  @media (max-width: 960px) {
    .pillars { grid-template-columns: 1fr 1fr; }
    .method { grid-template-columns: 1fr 1fr; }
    .method-step:nth-child(3) { border-left: 0; }
    .method-step:nth-child(n + 3) { border-top: var(--hair); }
  }
  @media (max-width: 640px) {
    .hero { padding: var(--s-8) 0 var(--s-6); }
    .nav-links {
      display: none; position: absolute; top: var(--nav-h); left: 0; right: 0;
      flex-direction: column; align-items: stretch; background: var(--bg);
      border-bottom: var(--hair); padding: var(--s-3) var(--pad);
    }
    .nav-links.open { display: flex; }
    .nav-links a { padding: 12px 8px; font-size: 15px; }
    .nav-links a.active { box-shadow: none; color: var(--signal); }
    .nav-toggle { display: block; }
    .index-strip { grid-template-columns: 1fr; }
    .index-item + .index-item { border-left: 0; border-top: var(--hair); }
    .pillars { grid-template-columns: 1fr; }
    .method { grid-template-columns: 1fr; }
    .method-step + .method-step { border-left: 0; border-top: var(--hair); }
    .lab-item { flex-wrap: wrap; }
    .lab-versions { padding-left: var(--s-1); }
    .detail-meta { gap: var(--s-4); }
    .panel { padding: var(--s-6) var(--s-5); }
  }
}

/* ================================================================ 5. 페이지별 */
@layer pages {

  /* ---------- Post 본문 ---------- */
  .post-body { margin-top: var(--s-6); font-size: 16px; line-height: 1.9; color: var(--ink); }
  .post-body p { margin-bottom: 1.4em; }
  .post-body h2 { font-size: 22px; font-weight: 600; margin: 2em 0 .8em; padding-top: .8em; border-top: var(--rule); }
  .post-body h3 { font-size: 18px; font-weight: 600; margin: 1.8em 0 .6em; }
  .post-body ul, .post-body ol { margin: 0 0 1.4em 1.3em; }
  .post-body li { margin-bottom: .5em; }
  .post-body ul li { list-style: disc; }
  .post-body ol li { list-style: decimal; }
  .post-body figure { margin: 2em 0; }
  .post-body figure img { width: 100%; border: var(--hair); }
  .post-body figcaption, .post-body .caption {
    font-size: 13px; color: var(--ink-3); text-align: center; margin: -1em 0 2em; line-height: 1.6;
  }
  .post-body figure figcaption { margin: .6em 0 0; }
  .post-body blockquote {
    margin: 1.6em 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--signal);
    color: var(--ink-2); font-size: 15px;
  }
  .post-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s-6); padding-top: var(--s-5); border-top: var(--hair); }
  .post-tags:empty { display: none; }
  .post-tags span { font-size: 12px; padding: 4px 12px; border: var(--hair); border-radius: var(--r-pill); color: var(--ink-2); }
}

/* ================================================================ 6. 유틸리티 */
@layer utilities {
  .text-2 { color: var(--ink-2); }
  .text-3 { color: var(--ink-3); }
  .accent { color: var(--signal); }
}