/* FRONTREE — design tokens & components
   Reference stylesheet for the HTML handoff pages. */

/* ── Self-hosted fonts (see assets/fonts/) ──────────────
   Inter (latin) + Pretendard (korean), weights 400/500/600. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/Inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/Inter-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/Inter-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Pretendard';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/Pretendard-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Pretendard';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/Pretendard-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Pretendard';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/Pretendard-600.woff2') format('woff2');
}

:root {
  /* Color */
  --c-bg:            #FFFFFF;
  --c-bg-alt:        #F7F4EF; /* off-white band */
  --c-brand:         #0F4C3F; /* deep green — headings, footer, primary button */
  --c-brand-hover:   #0C3F34;
  --c-accent:        #F0703C; /* orange — accent only */
  --c-text:          #111111;
  --c-text-muted:    #6B7280;
  --c-line:          #E5E7EB;
  --c-line-alt:      #E0DBD2; /* divider on off-white band */
  --c-num-muted:     #D1D5DB; /* 01/02/03 index numerals */
  --c-nav-idle:      #C4C4C4; /* inactive KO / EN */
  --c-on-brand:      #FFFFFF;
  --c-on-brand-dim:  rgba(255,255,255,0.62);
  --c-on-brand-line: rgba(255,255,255,0.16);

  /* Type scale — desktop / mobile */
  --fs-hero: 68px;   --fs-hero-m: 38px;
  --fs-h1:   52px;   --fs-h1-m:   34px;
  --fs-h2:   42px;   --fs-h2-m:   30px;
  --fs-h3:   32px;   --fs-h3-m:   24px;
  --fs-h4:   21px;   --fs-h4-m:   19px;
  --fs-lead: 19px;   --fs-lead-m: 17px;
  --fs-body: 17px;   --fs-body-m: 15.5px;
  --fs-stat: 48px;   --fs-stat-m: 38px;
  --fs-year: 26px;   --fs-year-m: 20px;
  --fs-pub:  19px;   --fs-pub-m:  17px;
  --fs-nav:  15px;   --fs-nav-m:  17px;
  --fs-meta: 14px;
  --fs-small: 13px;
  --fs-badge: 12px;
  --fs-legal: 12.5px;
  --fs-eyebrow: 13px;

  /* Spacing */
  --sp-section: 132px;  --sp-section-m: 88px;
  --sp-page-top: 120px; --sp-page-top-m: 72px;
  --sp-hero-top: 164px; --sp-hero-top-m: 84px;
  --sp-hero-bottom: 148px; --sp-hero-bottom-m: 92px;
  --sp-col-gap: 72px;   --sp-col-gap-m: 40px;
  --sp-pub-row: 38px;   --sp-pub-row-m: 30px;
  --sp-block: 56px;     --sp-block-m: 40px;

  /* Layout */
  --w-content: 1160px;
  --pad-x: 48px;        /* >=1120px */
  --pad-x-tight: 40px;  /* 860–1119px */
  --pad-x-m: 24px;      /* <860px */
  --h-header: 72px;

  --radius: 0px;        /* square corners everywhere */
  --shadow: none;       /* no shadows anywhere */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Breakpoint: 860px (single JS/CSS switch). 1120px only changes horizontal padding. */

* { box-sizing: border-box; }
html, body { margin:0; padding:0; background: var(--c-bg); }
body {
  font-family: Inter, Pretendard, -apple-system, sans-serif;
  color: var(--c-text);
  word-break: keep-all;          /* Korean wraps at word boundaries */
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--c-brand); text-decoration: none; }
a:hover { color: var(--c-accent); }
h1,h2,h3,p,dl,dd { margin: 0; }

.wrap { max-width: var(--w-content); margin: 0 auto; }
.section { padding: var(--sp-section) var(--pad-x); }
.section--band { background: var(--c-bg-alt); }
.eyebrow { font-size: var(--fs-eyebrow); font-weight:500; letter-spacing:.08em; text-transform:uppercase; color: var(--c-text-muted); }

/* ── Header ───────────────────────────── */
.header { position: sticky; top:0; z-index:60; background: var(--c-bg); border-bottom:1px solid var(--c-line); }
.header__inner { height: var(--h-header); max-width: var(--w-content); margin:0 auto; padding:0 var(--pad-x);
  display:flex; align-items:center; justify-content:space-between; gap:24px; }
.header__logo img { height:26px; width:auto; display:block; }
.nav { display:flex; align-items:center; gap:38px; }
.nav a { font-size: var(--fs-nav); font-weight:500; color: var(--c-text); letter-spacing:-.01em;
  padding:26px 0; border-bottom:2px solid transparent; }
.nav a:hover { color: var(--c-accent); }
.nav a[aria-current="page"] { color: var(--c-brand); border-bottom-color: var(--c-accent); }
.lang { display:flex; align-items:center; gap:7px; font-size: var(--fs-small); font-weight:500; }
.lang a { color: var(--c-nav-idle); }
.lang a[aria-pressed="true"] { color: var(--c-brand); }
.lang span { color: var(--c-line); }
.burger { display:none; flex-direction:column; justify-content:center; gap:5px; width:24px; height:24px; }
.burger i { display:block; width:22px; height:1.5px; background: var(--c-brand); }
.mobile-nav { display:none; border-top:1px solid var(--c-line); padding:8px var(--pad-x-m) 20px; flex-direction:column; }
.mobile-nav a { font-size: var(--fs-nav-m); font-weight:500; color: var(--c-text); padding:14px 0; border-bottom:1px solid #F1F1F1; }
.mobile-nav a:last-child { border-bottom:none; }
.mobile-nav[data-open="true"] { display:flex; }

/* ── Hero ─────────────────────────────── */
.hero { position:relative; overflow:hidden; padding: var(--sp-hero-top) var(--pad-x) var(--sp-hero-bottom); }
.hero__ecg { position:absolute; left:0; right:0; bottom:72px; opacity:.09; pointer-events:none; }
.hero__ecg svg { width:100%; height:150px; display:block; }
.hero h1 { font-size: var(--fs-hero); line-height:1.18; font-weight:600; letter-spacing:-.035em; color: var(--c-brand); text-wrap:pretty; }
.hero__lead { margin-top:44px; max-width:640px; font-size: var(--fs-lead); line-height:1.68; text-wrap:pretty; }
.hero__en { margin-top:18px; max-width:620px; font-size:14px; line-height:1.6; color: var(--c-text-muted); }

/* ── Publications list ────────────────── */
.pub-head { display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  border-bottom:1px solid var(--c-line); padding-bottom:22px; }
.pub-head h2 { font-size: var(--fs-h3); font-weight:600; letter-spacing:-.02em; color: var(--c-brand); }
.pub-more { font-size: var(--fs-meta); font-weight:500; color: var(--c-text-muted); }
.pub-row { display:grid; grid-template-columns:120px 1fr; gap:32px; padding: var(--sp-pub-row) 0; border-top:1px solid var(--c-line); }
.pub-row:last-child { border-bottom:1px solid var(--c-line); }
.pub-year { font-size: var(--fs-year); font-weight:500; letter-spacing:-.02em; color: var(--c-brand); }
.pub-title { font-size: var(--fs-pub); font-weight:600; line-height:1.45; letter-spacing:-.015em; text-wrap:pretty; }
.pub-authors { margin-top:12px; font-size: var(--fs-small); line-height:1.6; color: var(--c-text-muted); }
.badge { display:inline-block; margin-top:16px; border:1px solid var(--c-accent); border-radius: var(--radius);
  padding:5px 10px; font-size: var(--fs-badge); line-height:1.2; color: var(--c-accent); }
.badge--neutral { border-color: var(--c-line); color: var(--c-text-muted); padding:6px 11px; margin-top:0; }

/* ── Definition list ──────────────────── */
.dl-row { display:grid; grid-template-columns:120px 1fr; gap:32px; padding:22px 0; border-top:1px solid var(--c-line); }
.dl-row:last-child { border-bottom:1px solid var(--c-line); }
.dl-row dt { font-size: var(--fs-meta); font-weight:500; color: var(--c-text-muted); }
.dl-row dd { font-size: var(--fs-body); line-height:1.65; }

/* ── Form ─────────────────────────────── */
.form { display:flex; flex-direction:column; gap:22px; background: var(--c-bg-alt); padding:44px; }
.field { display:flex; flex-direction:column; gap:8px; }
.field label { font-size: var(--fs-small); font-weight:500; color: var(--c-text-muted); }
.field input, .field select, .field textarea {
  font-family: inherit; font-size:15px; color: var(--c-text); background: var(--c-bg);
  border:1px solid var(--c-line); border-radius: var(--radius); padding:13px 14px; /* → 45px tall single-line */
  transition: border-color .15s var(--ease);
}
.field textarea { line-height:1.6; resize:vertical; min-height:120px; }
.field select { appearance:none; }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color: var(--c-brand); }
::placeholder { color:#9CA3AF; }
.btn { border:none; border-radius: var(--radius); background: var(--c-brand); color: var(--c-on-brand);
  padding:16px 20px; font-size:15px; font-weight:500; cursor:pointer; transition: background .15s var(--ease); }
.btn:hover { background: var(--c-brand-hover); }

/* ── Footer ───────────────────────────── */
.footer { background: var(--c-brand); padding:88px var(--pad-x) 44px; }
.footer__top { display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding-bottom:36px; border-bottom:1px solid var(--c-on-brand-line); }
.footer__top img { height:24px; width:auto; display:block; }
.footer__top a { color: var(--c-on-brand); font-size:15px; }
.footer__legal { margin-top:28px; display:flex; flex-direction:column; gap:7px; }
.footer__legal span { font-size: var(--fs-legal); line-height:1.6; color: var(--c-on-brand-dim); }

/* ── Scroll fade-in ───────────────────── */
[data-fade] { transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-fade][data-hidden] { opacity:0; transform: translateY(16px); }

/* ── Responsive ───────────────────────── */
@media (max-width: 1119px) { :root { --pad-x: var(--pad-x-tight); } }
@media (max-width: 859px) {
  :root {
    --pad-x: var(--pad-x-m);
    --sp-section: var(--sp-section-m);
    --sp-page-top: var(--sp-page-top-m);
    --sp-hero-top: var(--sp-hero-top-m);
    --sp-hero-bottom: var(--sp-hero-bottom-m);
    --sp-col-gap: var(--sp-col-gap-m);
    --sp-pub-row: var(--sp-pub-row-m);
    --sp-block: var(--sp-block-m);
    --fs-hero: var(--fs-hero-m); --fs-h1: var(--fs-h1-m); --fs-h2: var(--fs-h2-m);
    --fs-h3: var(--fs-h3-m); --fs-h4: var(--fs-h4-m); --fs-lead: var(--fs-lead-m);
    --fs-body: var(--fs-body-m); --fs-stat: var(--fs-stat-m); --fs-year: var(--fs-year-m);
    --fs-pub: var(--fs-pub-m);
  }
  .nav { display:none; }
  .burger { display:flex; }
  .hero__ecg { bottom:40px; }
  .hero__lead { margin-top:28px; }
  .pub-row, .dl-row { grid-template-columns:1fr; gap:10px; }
  .form { padding:28px; }
  .footer { padding:64px var(--pad-x) 44px; }
  .footer__top { flex-direction:column; align-items:flex-start; padding-bottom:28px; }
}

/* ── 추가: 언어 토글 / 페이지 제목 / 동의 체크박스 / 푸터 링크 ── */
.header__right { display:flex; align-items:center; gap:14px; }
.lang a.is-active { color: var(--c-brand); }
.lang a:hover { color: var(--c-accent); }

.page-title { font-size: var(--fs-h1); font-weight:600; letter-spacing:-.03em; color: var(--c-brand); }
.page-lead { margin-top:18px; font-size: var(--fs-lead); line-height:1.65; color: var(--c-text-muted); text-wrap:pretty; }

.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap: var(--sp-contact-gap, 96px); }

.consent { display:flex; align-items:flex-start; gap:10px; margin-top:6px; cursor:pointer; }
.consent input { width:16px; height:16px; margin:2px 0 0; flex:none; accent-color: var(--c-brand); border-radius:0; }
.consent span { font-size:13px; line-height:1.6; color: var(--c-text-muted); }
.consent a { color: var(--c-brand); border-bottom:1px solid var(--c-accent); padding-bottom:1px; }
.consent a:hover { color: var(--c-accent); }
.form .btn { margin-top:20px; }

.footer__links { margin-top:4px; }
.footer__links a { color: rgba(255,255,255,0.62); border-bottom:1px solid rgba(255,255,255,0.28); padding-bottom:1px; }
.footer__links a:hover { color:#fff; }

/* 푸터 고지 링크 줄 (구분선 아래, 법적 고지 위) */
.footer__nav { margin-top:28px; display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-size:13px; line-height:1.6; }
.footer__nav a { color: rgba(255,255,255,0.92); }
.footer__nav a:hover { text-decoration: underline; }
.footer__nav-sep { color: rgba(255,255,255,0.38); }

/* 개인정보처리방침 본문 */
.legal-body { max-width:820px; }
.legal-body h2 { font-size: var(--fs-h4); font-weight:600; color: var(--c-brand); margin:56px 0 16px; letter-spacing:-.01em; }
.legal-body h2:first-of-type { margin-top:64px; }
.legal-body p { font-size: var(--fs-body); line-height:1.75; margin-bottom:14px; text-wrap:pretty; }
.legal-body ul, .legal-body ol { margin:0 0 14px 20px; }
.legal-body li { font-size: var(--fs-body); line-height:1.75; margin-bottom:7px; }
.legal-body table { width:100%; border-collapse:collapse; margin:18px 0 22px; }
.legal-body th, .legal-body td { border:1px solid var(--c-line); padding:11px 13px; font-size:14px; line-height:1.6; text-align:left; vertical-align:top; }
.legal-body th { background: var(--c-bg-alt); font-weight:500; color: var(--c-text-muted); }
.legal-body .legal-meta { margin-top:56px; padding-top:22px; border-top:1px solid var(--c-line); font-size:14px; color: var(--c-text-muted); line-height:1.8; }
.legal-body a { color: var(--c-brand); }
.legal-body a:hover { color: var(--c-accent); }

@media (max-width: 860px) {
  .contact-grid { grid-template-columns:1fr; gap:56px; }
  .legal-body table { display:block; overflow-x:auto; white-space:nowrap; }
}