/* ============================================================
   FeecoStudio — company site
   Design system: Ollama (radical minimalism)
   - Pure white, black text, 1px borders, zero shadows
   - Two font weights only (400 / 500)
   - No transitions, no animations
   ============================================================ */

/* Pretendard — dynamic subset webfont (변수 폰트, 서브셋 자동 로드) */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css");

/* ---------------- Tokens ---------------- */
:root {
  /* Color */
  --color-black:            #000000;
  --color-near-black:       #262626;
  --color-darkest-surface:  #090909;
  --color-white:            #ffffff;
  --color-snow:             #fafafa;
  --color-light-gray:       #e5e5e5;
  --color-stone:            #737373;
  --color-mid-gray:         #525252;
  --color-silver:           #a3a3a3;
  --color-border:           #e5e5e5;
  --color-border-light:     #d4d4d4;
  --color-focus-ring:       rgba(59, 130, 246, 0.5);

  --fg-primary:    var(--color-black);
  --fg-secondary:  var(--color-stone);
  --fg-tertiary:   var(--color-silver);
  --fg-muted:      var(--color-mid-gray);
  --bg-page:       var(--color-white);
  --bg-surface:    var(--color-snow);

  /* Type */
  --font-display: ui-rounded, "SF Pro Rounded", "Pretendard Variable",
                  Pretendard, system-ui, -apple-system, sans-serif;
  --font-body:    "Pretendard Variable", Pretendard, ui-sans-serif, system-ui,
                  -apple-system, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
                  "Liberation Mono", "Courier New", monospace;

  --weight-regular: 400;
  --weight-medium:  500;

  --text-display: 3rem;
  --text-section: 2.25rem;
  --text-card:    1.5rem;
  --text-lg:      1.125rem;
  --text-base:    1rem;
  --text-sm:      0.875rem;
  --text-xs:      0.75rem;

  --leading-display: 1.0;
  --leading-tight:   1.11;
  --leading-normal:  1.5;
  --leading-relaxed: 1.56;

  /* Radius — binary system */
  --radius-container: 12px;
  --radius-pill:      9999px;

  /* Spacing */
  --space-1: 4px;   --space-3: 8px;   --space-4: 12px;
  --space-5: 16px;  --space-6: 20px;  --space-7: 24px;
  --space-8: 32px;  --space-9: 40px;  --space-10: 48px;
  --space-11: 88px; --space-12: 112px;

  --page-max: 720px;
}

/* ---------------- Reset ---------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--fg-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--space-1);
}

/* ---------------- Layout ---------------- */
.wrap {
  max-width: var(--page-max);
  margin: 0 auto;
  padding-inline: var(--space-7);
}

.section { padding-block: var(--space-11); }
.section + .section { border-top: 1px solid var(--color-border); }

@media (max-width: 640px) {
  .section { padding-block: var(--space-10); }
  :root { --text-display: 2.25rem; --text-section: 1.75rem; }
}

/* ---------------- Header ---------------- */
.site-header {
  border-bottom: 1px solid var(--color-border);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
.wordmark {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  letter-spacing: -0.01em;
}
.site-nav {
  display: flex;
  gap: var(--space-7);
  font-size: var(--text-sm);
  color: var(--fg-secondary);
}
.site-nav a:hover { color: var(--fg-primary); }

/* ---------------- Typography ---------------- */
h1, .display {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: var(--weight-medium);
  line-height: var(--leading-display);
  letter-spacing: -0.02em;
}
h2, .section-heading {
  font-family: var(--font-display);
  font-size: var(--text-section);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  letter-spacing: -0.015em;
}
h3 {
  font-family: var(--font-body);
  font-size: var(--text-card);
  font-weight: var(--weight-medium);
  line-height: 1.33;
}
.lead {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--fg-secondary);
}
.eyebrow {
  font-size: var(--text-sm);
  color: var(--fg-tertiary);
  margin-bottom: var(--space-5);
}

/* ---------------- Hero ---------------- */
.hero { padding-block: var(--space-12) var(--space-11); }
.hero .lead { margin-top: var(--space-7); max-width: 34em; }

/* ---------------- Buttons ---------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  border-radius: var(--radius-pill);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  line-height: 1;
  border: 1px solid transparent;
  cursor: pointer;
  transition: none;
}
.btn-black {
  background: var(--color-black);
  color: var(--color-white);
  border-color: var(--color-black);
}
.btn-black:hover { background: var(--color-near-black); }
.btn-white {
  background: var(--color-white);
  color: var(--color-button-text-dark, #404040);
  border-color: var(--color-border-light);
}
.btn-white:hover { border-color: var(--color-stone); }

/* ---------------- Product cards ---------------- */
.cards {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-9);
}
.card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-container);
  padding: var(--space-8);
  background: var(--color-white);
}
.card p { color: var(--fg-secondary); margin-top: var(--space-4); }
.card .btn { margin-top: var(--space-7); }
.card-status {
  display: inline-block;
  margin-left: var(--space-4);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
  border: 1px solid var(--color-border);
  font-size: var(--text-xs);
  color: var(--fg-secondary);
  vertical-align: middle;
}

/* ---------------- Footer ----------------
   회사·사업자 정보는 여기에만 둔다. 별도 Company 섹션 없음.
   Apple 심사가 찾는 법인명(feeco)이 .footer-legal 안에 텍스트로 들어있어야 한다. */
.site-footer {
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-9) var(--space-10);
  font-size: var(--text-sm);
  color: var(--fg-secondary);
}
.footer-top {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-7);
  align-items: baseline;
  justify-content: space-between;
}
.footer-brand {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--fg-primary);
  letter-spacing: -0.01em;
}
.footer-links { display: flex; gap: var(--space-7); flex-wrap: wrap; }
.footer-links a:hover { color: var(--fg-primary); }

.footer-legal {
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-xs);
  line-height: 1.7;
  color: var(--fg-tertiary);
}
.footer-legal strong { font-weight: var(--weight-medium); color: var(--fg-secondary); }
.footer-legal a { text-decoration: underline; text-underline-offset: 2px; }
.footer-legal a:hover { color: var(--fg-secondary); }

.footer-copy {
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  color: var(--fg-tertiary);
}

/* ---------------- Legal pages ---------------- */
.doc { padding-block: var(--space-10) var(--space-11); }
.doc h2 { margin-top: var(--space-10); }
.doc h3 { margin-top: var(--space-8); }
.doc p, .doc li { color: var(--fg-muted); margin-top: var(--space-5); }
.doc ul { list-style: disc; padding-left: 1.25em; }
.doc li { margin-top: var(--space-3); }
.doc a { text-decoration: underline; text-underline-offset: 2px; }
.doc .updated { font-size: var(--text-sm); color: var(--fg-tertiary); }