/* 세자 v1.3 — 디자인 토큰 + P0 랜딩 (DESIGN.md / design-mockup.html 기반) */

:root {
  --ink-deepest: #0A0A0C;
  --ink-deep:    #15151A;
  --ink-mid:     #1E1E24;
  --ink-light:   #2A2A33;
  --ink-line:    #3A3A45;

  --hanji-white: #F4EFE2;
  --hanji-cream: #E8E2D2;
  --hanji-mute:  #8B8B95;
  --hanji-fade:  #5A5A63;

  --gold-bright:  #D4B26A;
  --gold-primary: #C9A658;
  --gold-deep:    #8B7339;
  --gold-faint:   rgba(201, 166, 88, 0.12);

  --font-display: "Noto Serif KR", "Noto Serif TC", serif;
  --font-body: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-han: "Noto Serif TC", "Noto Serif KR", serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--ink-deepest); color: var(--hanji-white); font-family: var(--font-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  min-height: 100vh;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.96 0 0 0 0 0.94 0 0 0 0 0.88 0 0 0 0.018 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; }

.page.p0 {
  max-width: 480px;
  margin: 0 auto;
  padding: 56px 28px 56px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.logo { margin-bottom: 56px; }
.logo .name {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.logo .romaji {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--gold-deep);
  margin-left: 12px;
  letter-spacing: 0.3em;
  vertical-align: middle;
  text-transform: lowercase;
}
.logo .underline { height: 1px; width: 56px; background: var(--gold-deep); margin-top: 12px; }

.headline {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 64px;
}
.headline .em { color: var(--gold-bright); font-weight: 700; }

.card {
  display: block;
  background: var(--ink-mid);
  border: 1px solid var(--ink-line);
  border-left: 3px solid var(--gold-deep);
  border-radius: 0;
  padding: 28px 24px;
  margin-bottom: 20px;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.25s;
  position: relative;
}
.card:hover {
  border-color: var(--gold-deep);
  border-left-color: var(--gold-primary);
  transform: translateY(-1px);
}
.card:active {
  transform: scale(0.98) rotate(-0.5deg);
}
.card.featured {
  border-left-color: var(--gold-primary);
  border-left-width: 4px;
  background: linear-gradient(to right, var(--ink-light) 0%, var(--ink-mid) 60%);
}

.card-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 8px;
}
.card-title .han {
  font-family: var(--font-han);
  font-size: 0.7em;
  color: var(--gold-deep);
  margin-left: 8px;
  font-weight: 500;
}
.card-tag {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--gold-primary);
  border: 1px solid var(--gold-deep);
  padding: 3px 10px;
  margin-bottom: 16px;
  font-weight: 500;
}
.card-desc {
  font-size: 15px;
  color: var(--hanji-cream);
  line-height: 1.6;
  margin-bottom: 24px;
}
.card-cta {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-size: 14px;
  color: var(--gold-primary);
  font-weight: 500;
}
.card-cta .arrow { margin-left: 8px; transition: transform 0.2s; }
.card:hover .card-cta .arrow { transform: translateX(4px); }

.footer {
  margin-top: auto;
  padding-top: 56px;
  border-top: 1px solid var(--ink-line);
  font-size: 11px;
  color: var(--hanji-fade);
  letter-spacing: 0.15em;
  text-align: center;
}

/* 진입 staggered */
.logo, .headline, .card, .footer {
  opacity: 0;
  transform: translateY(8px);
  animation: rise-in 0.6s ease-out forwards;
}
.logo { animation-delay: 0.0s; }
.headline { animation-delay: 0.08s; }
.card:nth-of-type(1) { animation-delay: 0.16s; }
.card:nth-of-type(2) { animation-delay: 0.24s; }
.footer { animation-delay: 0.32s; }
@keyframes rise-in { to { opacity: 1; transform: translateY(0); } }