/* ============================================================
   진재명 — jaemyeong.com
   Object brand system → personal homepage.
   Screen: editorial minimal one-pager.
   Print (@media print): A4 résumé (summary / detail).
   Values mirror the approved Claude Design prototype 1:1.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; background: var(--white); }

body {
  font-family: var(--font-sans);
  color: var(--oc-gray-7);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }

.dot { color: var(--brand-accent); }

/* ---- language visibility (runtime toggle, driven by [data-lang]) ---- */
[data-lang="ko"] .lang-en { display: none; }
[data-lang="en"] .lang-ko { display: none; }

/* ---- résumé is print-only ---- */
.resume { display: none; }
.detail-only { display: none; }

/* ---- focus-visible (a11y) ---- */
:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ---- skip link (a11y) ---- */
.skip {
  position: absolute; left: 12px; top: -48px; z-index: 100;
  background: var(--oc-gray-9); color: var(--white);
  font-size: 13px; font-weight: 600; padding: 9px 14px; border-radius: 8px;
  transition: top .15s;
}
.skip:focus { top: 12px; }

/* ============================================================
   SCREEN
   ============================================================ */

.wrap { max-width: 880px; margin: 0 auto; padding: 0 32px; }

/* ---- header ---- */
.hd {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap;
  padding: 26px 0; border-bottom: 1px solid var(--oc-gray-2);
}
.hd-brand { display: flex; flex-direction: column; gap: 5px; }
.hd-mono { font-weight: 800; letter-spacing: -0.03em; color: var(--oc-gray-9); font-size: 21px; line-height: 1; }
.hd-sub { font-weight: 600; color: var(--oc-gray-5); font-size: 10px; letter-spacing: 0.16em; line-height: 1; }

.hd-tools { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.hd-lang { display: flex; align-items: center; gap: 9px; }
.hd-print { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

.hd-label { font-size: 10px; font-weight: 600; letter-spacing: 0.14em; color: var(--oc-gray-5); }
.hd-label--icon { display: inline-flex; align-items: center; gap: 5px; }

.seg-group { display: flex; border: 1px solid var(--oc-gray-3); border-radius: 8px; overflow: hidden; }
.seg {
  cursor: pointer; border: none; background: transparent; font-family: inherit;
  font-size: 12px; font-weight: 600; letter-spacing: 0.03em; color: var(--oc-gray-6);
  padding: 7px 13px; line-height: 1; transition: background .15s, color .15s;
}
.seg:hover { color: var(--oc-gray-9); }
[data-lang="ko"] .seg-ko,
[data-lang="en"] .seg-en { background: var(--oc-gray-9); color: var(--white); }

.btn {
  cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 600;
  letter-spacing: 0.02em; border-radius: 8px; padding: 9px 15px; transition: background .15s, color .15s, border-color .15s;
}
.btn--solid { color: var(--white); background: var(--oc-gray-9); border: none; }
.btn--solid:hover { background: var(--oc-gray-8); }
.btn--ghost { color: var(--oc-gray-9); background: var(--white); border: 1px solid var(--oc-gray-3); }
.btn--ghost:hover { border-color: var(--oc-gray-5); }

/* ---- hero ---- */
.hero { padding: 84px 0 0; }
.eyebrow { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.16em; color: var(--oc-gray-5); text-transform: uppercase; }
.hero-name {
  margin: 22px 0 0; font-weight: 800; letter-spacing: -0.045em; line-height: 0.96;
  color: var(--oc-gray-9); font-size: clamp(56px, 11vw, 120px);
}
.hero-meta {
  margin: 26px 0 0; font-size: 14px; font-weight: 500; color: var(--oc-gray-6);
  letter-spacing: 0.02em; font-feature-settings: "tnum" 1;
}

/* ---- statement + intro ---- */
.statement { padding: 64px 0 0; }
.lead {
  margin: 0; max-width: 720px; font-size: clamp(24px, 3.4vw, 34px); font-weight: 600;
  line-height: 1.45; letter-spacing: -0.02em; color: var(--oc-gray-9); text-wrap: pretty;
}
.intro {
  margin: 32px 0 0; max-width: 640px; font-size: 16px; line-height: 1.75;
  color: var(--oc-gray-7); text-wrap: pretty;
}

/* ---- section heads ---- */
.sec-head--rule {
  display: flex; align-items: baseline; gap: 12px;
  border-bottom: 2px solid var(--oc-gray-9); padding-bottom: 14px;
}
.sec-title { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--oc-gray-9); }
.sec-meta { font-size: 13px; color: var(--oc-gray-5); }

/* ---- experience ---- */
.exp { padding: 92px 0 0; }
.exp-item {
  display: grid; grid-template-columns: 150px 1fr; gap: 28px;
  padding: 30px 0; border-bottom: 1px solid var(--oc-gray-2);
}
.exp-period { font-size: 13px; font-weight: 600; color: var(--oc-gray-7); font-feature-settings: "tnum" 1; letter-spacing: 0.01em; }
.exp-dur { margin-top: 4px; font-size: 12px; color: var(--oc-gray-5); font-feature-settings: "tnum" 1; }
.exp-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.exp-co { font-size: 22px; font-weight: 700; color: var(--oc-gray-9); letter-spacing: -0.015em; }
.exp-role { font-size: 14px; font-weight: 500; color: var(--oc-gray-6); }
.exp-desc { margin: 12px 0 0; font-size: 15px; line-height: 1.72; color: var(--oc-gray-7); max-width: 560px; text-wrap: pretty; }

/* ---- skills ---- */
.skills { padding: 88px 0 0; }
.skills .sec-head { margin-bottom: 26px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.chip {
  font-size: 14px; font-weight: 500; color: var(--oc-gray-7);
  border: 1px solid var(--oc-gray-3); border-radius: 8px; padding: 8px 14px; background: var(--oc-gray-0);
}

/* ---- contact / socials ---- */
.contact { padding: 88px 0 0; }
.contact .sec-head { margin-bottom: 30px; }
.links { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2px 36px; }
.slink {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 16px 0; border-bottom: 1px solid var(--oc-gray-2); color: var(--oc-gray-9); transition: color .15s;
}
.slink:hover { color: var(--brand-accent); }
.slink-label { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--oc-gray-5); flex-shrink: 0; min-width: 78px; }
.slink-value { font-size: 15px; font-weight: 500; text-align: right; word-break: break-all; }
.slink-arrow { color: var(--oc-gray-4); transition: transform .15s; display: inline-block; }
.slink:hover .slink-arrow { transform: translate(2px, -2px); }

/* ---- footer ---- */
.ft { padding: 80px 0 56px; margin-top: 56px; }
.ft-row {
  display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 12px;
  border-top: 1px solid var(--oc-gray-2); padding-top: 22px;
}
.ft-copy { font-size: 13px; color: var(--oc-gray-6); font-feature-settings: "tnum" 1; }
.ft-tag { font-size: 12px; color: var(--oc-gray-5); letter-spacing: 0.04em; }

/* ---- responsive ---- */
@media (max-width: 640px) {
  .wrap { padding: 0 22px; }
  .hero { padding: 64px 0 0; }
  .statement { padding: 52px 0 0; }
  .exp { padding: 76px 0 0; }
  .skills, .contact { padding: 72px 0 0; }
  .exp-item { grid-template-columns: 1fr; gap: 10px; padding: 26px 0; }
  .exp-when { display: flex; align-items: baseline; gap: 10px; }
  .exp-dur { margin-top: 0; }
  .exp-co { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ============================================================
   PRINT — 이력서 / résumé (A4)
   ============================================================ */
@media print {
  @page { size: A4; margin: 15mm 14mm; }
  html, body { background: var(--white); }
  body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  .site { display: none !important; }
  .resume { display: block !important; color: var(--oc-gray-8); font-size: 10pt; line-height: 1.5; }
  [data-print-mode="detail"] .detail-only { display: block; }

  .r-head { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 2pt solid var(--oc-gray-9); padding-bottom: 9pt; }
  .r-name { font-size: 22pt; font-weight: 800; letter-spacing: -0.03em; color: var(--oc-gray-9); line-height: 1; }
  .r-title { margin-top: 5pt; font-size: 10.5pt; font-weight: 500; color: var(--oc-gray-6); }
  .r-contact { text-align: right; font-size: 8.5pt; line-height: 1.6; color: var(--oc-gray-7); font-feature-settings: "tnum" 1; }

  .r-summary { margin: 11pt 0 0; font-size: 9.5pt; line-height: 1.6; color: var(--oc-gray-7); }

  .r-h2 { margin: 16pt 0 0; font-size: 9pt; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--oc-gray-9); border-bottom: 0.75pt solid var(--oc-gray-4); padding-bottom: 4pt; break-after: avoid; page-break-after: avoid; }

  .r-job { margin-top: 11pt; page-break-inside: avoid; break-inside: avoid; }
  .r-job-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12pt; }
  .r-job-co { font-size: 11pt; font-weight: 700; color: var(--oc-gray-9); }
  .r-job-role { font-size: 9pt; font-weight: 500; color: var(--oc-gray-6); }
  .r-job-period { font-size: 8.5pt; color: var(--oc-gray-6); white-space: nowrap; font-feature-settings: "tnum" 1; }
  .r-job-desc { margin: 4pt 0 0; font-size: 9pt; line-height: 1.55; color: var(--oc-gray-7); }

  .r-proj { margin: 6pt 0 0; padding-left: 13pt; }
  .r-proj li { margin: 0 0 3pt; font-size: 8.7pt; line-height: 1.5; color: var(--oc-gray-7); }
  .r-proj b { font-weight: 600; color: var(--oc-gray-9); }
  .r-proj-when { color: var(--oc-gray-5); font-feature-settings: "tnum" 1; }

  .r-line { margin: 7pt 0 0; font-size: 9pt; line-height: 1.7; color: var(--oc-gray-7); }

  .r-row { margin-top: 7pt; display: flex; justify-content: space-between; align-items: baseline; font-size: 9.5pt; color: var(--oc-gray-8); }
  .r-row b { font-weight: 700; color: var(--oc-gray-9); }
  .r-row-when { font-size: 8.5pt; color: var(--oc-gray-6); white-space: nowrap; font-feature-settings: "tnum" 1; }

  .r-awards { margin: 7pt 0 0; padding-left: 13pt; }
  .r-awards li { margin: 0 0 3pt; font-size: 9pt; line-height: 1.5; color: var(--oc-gray-7); }
  .r-when { color: var(--oc-gray-5); font-feature-settings: "tnum" 1; }

  .r-foot { margin-top: 14pt; border-top: 0.75pt solid var(--oc-gray-3); padding-top: 6pt; display: flex; justify-content: space-between; font-size: 7.5pt; color: var(--oc-gray-5); font-feature-settings: "tnum" 1; }
}