/* 나란히컴페니 대표 명함 — Option 01 (Stationery Pair)
 * Tokens & self-hosted webfonts from Stayhealthy88/Naranhi_Company_brandkit (v1.2)
 * Web surfaces never use pure white (#FFFFFF); informational panels use 0px corners & no shadows.
 */

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("./assets/fonts/PlusJakartaSans-Variable-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("./assets/fonts/PlusJakartaSans-Variable-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Pretendard Variable';
  font-style: normal;
  font-weight: 45 920;
  font-display: swap;
  src: url("./assets/fonts/PretendardVariable.woff2") format("woff2");
}

@font-face {
  font-family: 'Pretendard';
  font-style: normal;
  font-weight: 45 920;
  font-display: swap;
  src: url("./assets/fonts/PretendardVariable.woff2") format("woff2");
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./assets/fonts/JetBrainsMono-Regular.woff2") format("woff2");
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./assets/fonts/JetBrainsMono-Medium.woff2") format("woff2");
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./assets/fonts/JetBrainsMono-Bold.woff2") format("woff2");
}

:root {
  color-scheme: light;

  /* Ink & Paper v1.2 */
  --nc-ink: #0B0B09;
  --nc-ink-800: #26251F;
  --nc-ink-600: #67645A;
  --nc-ink-400: #8C8A80;

  --nc-paper: #F7F2EA;
  --nc-paper-deep: #EFE9DC;
  --nc-desk: #F0EEE6;
  --nc-line: #DCD5C6;
  --nc-line-strong: #C4BCA9;
  --nc-line-control: #8F8670;

  /* Highlighter yellow (fill only, <= 10% area) */
  --nc-accent: #FACC15;
  --nc-accent-deep: #C99A06;
  --nc-accent-ink: #7A5C00;
  --nc-accent-wash: #FDF3C8;

  /* Fonts */
  --nc-font-latin: 'Plus Jakarta Sans', 'Pretendard Variable', Pretendard, system-ui, sans-serif;
  --nc-font-ko: 'Pretendard Variable', Pretendard, 'Plus Jakarta Sans', 'Noto Sans KR', sans-serif;
  --nc-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --nc-track-title: -0.035em;
  --nc-track-headline: -0.045em;
  --nc-track-body-ko: -0.022em;
  --nc-track-meta: 0.08em;
}

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

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--nc-paper);
  color: var(--nc-ink);
  font-family: var(--nc-font-ko);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

@media (min-width: 520px) {
  body {
    background: var(--nc-desk);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 36px 20px;
  }
}

.card-shell {
  width: 100%;
  max-width: 440px;
  min-height: 100dvh;
  margin: 0 auto;
  background: var(--nc-paper);
  padding: calc(24px + env(safe-area-inset-top, 0px)) 20px calc(28px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

@media (min-width: 520px) {
  .card-shell {
    min-height: auto;
    padding: 32px 28px 30px;
    border: 1px solid var(--nc-line);
  }
}

/* Optional explicit notice banner (for temporary LAN URL or pending contact fields) */
.notice-banner {
  margin-bottom: 18px;
  padding: 10px 12px;
  background: var(--nc-accent-wash);
  border: 1px solid var(--nc-accent-deep);
  color: var(--nc-accent-ink);
  font: 500 12px/1.55 var(--nc-font-ko);
  letter-spacing: -0.01em;
}

.notice-banner strong {
  font-weight: 700;
}

.notice-code {
  font-family: var(--nc-font-mono);
  font-size: 11px;
}

/* Header Lockup */
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--nc-line);
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-mark {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: block;
}

.brand-wordmark {
  font: 800 13.5px/1.02 var(--nc-font-latin);
  letter-spacing: var(--nc-track-title);
  color: var(--nc-ink);
}

.meta-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px 4px;
  border: 1px solid var(--nc-line);
  color: var(--nc-ink-600);
  font: 500 10.5px/1 var(--nc-font-mono);
  letter-spacing: var(--nc-track-meta);
  text-transform: uppercase;
  white-space: nowrap;
}

/* Identity Hero */
.identity-section {
  padding: 26px 0 22px;
}

.name-ko-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
}

.name-ko {
  margin: 0;
  font: 800 34px/1.06 var(--nc-font-ko);
  letter-spacing: var(--nc-track-headline);
  color: var(--nc-ink);
}

.title-ko {
  font: 500 15.5px/1.35 var(--nc-font-ko);
  letter-spacing: var(--nc-track-body-ko);
  color: var(--nc-ink-600);
}

.name-en-row {
  margin-top: 6px;
  font: 600 14.5px/1.4 var(--nc-font-latin);
  letter-spacing: -0.015em;
  color: var(--nc-ink-600);
}

.name-en-sep {
  margin: 0 6px;
  color: var(--nc-ink-400);
}

.tagline-block {
  margin-top: 18px;
}

.tagline-ko {
  margin: 0;
  font: 700 18.5px/1.44 var(--nc-font-ko);
  letter-spacing: -0.03em;
  color: var(--nc-ink);
  word-break: keep-all;
}

.tagline-ko mark {
  background: var(--nc-accent);
  color: var(--nc-ink);
  padding: 0 5px;
}

.tagline-en {
  margin: 5px 0 0;
  font: 400 13.5px/1.5 var(--nc-font-latin);
  letter-spacing: -0.01em;
  color: var(--nc-ink-600);
}

/* Primary Action (.vcf Save) — 6px control radius per Brandkit Button convention */
.cta-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.btn-save {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 50px;
  padding: 13px 18px;
  border-radius: 6px;
  border: 1px solid var(--nc-ink);
  background: var(--nc-ink);
  color: var(--nc-paper);
  text-decoration: none;
  font: 600 15px/1.2 var(--nc-font-ko);
  letter-spacing: -0.02em;
  cursor: pointer;
  transition: background-color 120ms ease;
  -webkit-tap-highlight-color: transparent;
}

.btn-save:hover {
  background: var(--nc-ink-800);
}

.btn-save:focus-visible {
  outline: 2px solid var(--nc-ink);
  outline-offset: 2px;
}

.btn-save-en {
  font-family: var(--nc-font-latin);
  font-weight: 500;
  font-size: 13.5px;
  color: rgba(247, 242, 234, 0.72);
}

.cta-caption {
  margin: 0;
  font: 400 12px/1.5 var(--nc-font-ko);
  color: var(--nc-ink-600);
  text-align: center;
}

/* Section Header & 0px Sharp Info Panel */
.info-section {
  margin-top: 26px;
}

.section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.section-pill {
  display: inline-block;
  padding: 3px 7px 3px;
  background: var(--nc-ink);
  color: var(--nc-paper);
  font: 800 11.5px/1.15 var(--nc-font-latin);
  letter-spacing: -0.02em;
}

.section-sub {
  font: 500 10.5px/1 var(--nc-font-mono);
  letter-spacing: var(--nc-track-meta);
  color: var(--nc-ink-600);
  text-transform: uppercase;
}

/* 0px sharp rectangular panel, zero shadow */
.info-panel {
  border: 1px solid var(--nc-line);
  background: var(--nc-paper);
}

.info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 56px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--nc-line);
  text-decoration: none;
  color: inherit;
}

.info-row:last-child {
  border-bottom: none;
}

a.info-row {
  transition: background-color 120ms ease;
  -webkit-tap-highlight-color: transparent;
}

a.info-row:hover,
a.info-row:active {
  background: var(--nc-paper-deep);
}

a.info-row:focus-visible {
  outline: 2px solid var(--nc-ink);
  outline-offset: -2px;
}

.row-label-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
}

.row-label-ko {
  font: 600 14px/1.35 var(--nc-font-ko);
  letter-spacing: var(--nc-track-body-ko);
  color: var(--nc-ink);
}

.row-label-en {
  font: 500 10px/1.2 var(--nc-font-mono);
  letter-spacing: var(--nc-track-meta);
  color: var(--nc-ink-600);
  text-transform: uppercase;
}

.row-value-group {
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: right;
  min-width: 0;
}

.row-value-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  min-width: 0;
}

.row-value-primary {
  font: 600 14px/1.35 var(--nc-font-ko);
  letter-spacing: -0.02em;
  color: var(--nc-ink);
  word-break: break-all;
}

.row-value-mono {
  font: 500 13.5px/1.35 var(--nc-font-mono);
  letter-spacing: -0.01em;
  color: var(--nc-ink);
  word-break: break-all;
}

.row-value-sub {
  font: 400 11.5px/1.35 var(--nc-font-latin);
  color: var(--nc-ink-600);
}

.row-chevron {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--nc-ink-600);
}

/* Status badge for unconfirmed contact items (shape + symbol + word) */
.pending-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  background: var(--nc-paper-deep);
  border: 1px dashed var(--nc-line-control);
  color: var(--nc-ink-600);
  font: 500 11.5px/1.2 var(--nc-font-ko);
  letter-spacing: -0.01em;
}

/* Footer (strictly within approved scope: company, name/title, ROK — no street address or reg number) */
.card-footer {
  margin-top: 28px;
  padding-top: 14px;
  border-top: 1px solid var(--nc-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.footer-org {
  font: 500 12px/1.55 var(--nc-font-ko);
  color: var(--nc-ink-600);
}

.footer-org-en {
  font-family: var(--nc-font-latin);
}

.footer-country {
  font: 500 11px/1.4 var(--nc-font-mono);
  letter-spacing: var(--nc-track-meta);
  color: var(--nc-ink-600);
}