/* 우리의 족보 — 먹빛 남색과 수묵 산수.
   style.css·ux.css 의 배치는 그대로 두고, 색과 바탕과 첫 화면의 모습만 여기서
   다시 칠합니다. 이 파일을 빼면 이전 모습으로 돌아갑니다. */
:root {
  --paper: #f4efe3;
  --paper-raised: #fffdf8;
  --paper-sunk: #ece5d4;
  --ink: #1b2233;
  --ink-soft: #5c6273;
  --line: #d9d2c0;
  --line-soft: #e8e2d3;
  /* The app's own colour was pine green; it is now ink navy, with a clear blue
     for what is picked or pressed. The names stay so every rule follows. */
  --green: #1c3a6e;
  --green-deep: #12284f;
  --green-wash: #e6edf9;
  --blue: #1f5fd6;
  --navy: #13254a;
  --gold: #b08a45;
  --accent: #b3372a;
  /* Web fonts, so every PC shows the same type; the system's follow if the
     fonts cannot be fetched. */
  --serif: "Noto Serif KR", "Batang", "AppleMyungjo", serif;
  --sans: "Noto Sans KR", system-ui, "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
}

body {
  font-family: var(--sans);
}

/* 한지 바탕 위에, 창 아래쪽으로 수묵 산수가 번집니다. The hills sit on a
   layer of their own that stays with the window: a background fixed to the
   page itself has the browser paint it again at every step of a scroll,
   which made the wheel sluggish. */
body {
  background:
    radial-gradient(ellipse at 20% 0%, #fbf8f0 0%, transparent 60%),
    radial-gradient(ellipse at 90% 10%, #efe6d2 0%, transparent 55%),
    var(--paper);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url("landscape.svg") center bottom / 100% auto no-repeat;
  pointer-events: none;
  will-change: transform;
}

/* ── 머리 ─────────────────────────────────────── */
header {
  background: linear-gradient(90deg, #0f1f3f, #1a3363);
  border-bottom: 3px solid var(--gold);
  box-shadow: 0 2px 12px #0f1f3f40;
}

header strong {
  color: #fff;
}

header small {
  color: #dcc89a;
  border-color: #ffffff33;
}

header .seal {
  background: var(--accent);
  box-shadow: inset 0 0 0 2px #ffffff40, 0 2px 6px #00000040;
}

#logout,
#licenseOpen {
  border-color: #ffffff66;
  background: transparent;
  color: #fff;
}

/* 정식판 계정: 상태 표시라 조용하게, 무료 계정: 할 일이라 금빛으로 채웁니다. */
#licenseOpen {
  border-color: #d8bf85;
  color: #f1e3bd;
}

#licenseOpen.upgrade {
  background: #d8bf85;
  color: #13254a;
}

#licenseOpen.upgrade:hover {
  background: #e6cf98;
}

.header-actions {
  display: flex;
  gap: 8px;
}

#licenseOpen:hover,
#logout:hover {
  border-color: #fff;
  background: #ffffff1f;
}

/* ── 단추 ─────────────────────────────────────── */
button:hover {
  border-color: var(--blue);
  background: var(--blue);
}

.secondary:hover {
  border-color: var(--blue);
  background: var(--green-wash);
  color: var(--navy);
}

.view-bar nav button.active,
.view-bar nav .active {
  background: var(--navy);
  color: #fff;
}

/* ── 옆 칸: 남색 서가 ─────────────────────────── */
#workspace > aside {
  background: linear-gradient(180deg, #13254a 0%, #0f1f3f 100%);
  color: #e6ebf5;
  border-right: 0;
}

#workspace > aside > .eyebrow {
  color: #d8bf85;
}

#workspace > aside > .side-head h2,
#workspace > aside > label,
#workspace > aside > .muted {
  color: #e6ebf5;
}

#workspace > aside > .side-head .secondary {
  border-color: #ffffff55;
  background: transparent;
  color: #fff;
}

#workspace > aside > .side-head .secondary:hover {
  background: #ffffff1f;
}

/* The book's details stay a paper card inside the navy shelf. */
#workspace > aside form {
  color: var(--ink);
  border-color: #ffffff22;
  box-shadow: 0 6px 20px #0000003a;
}

/* ── 가계도 선 ───────────────────────────────── */
.parent-line,
.spouse-line {
  stroke: #3d5a8c;
}

.level-label {
  fill: var(--navy);
}

/* ── 본문 ─────────────────────────────────────── */
/* A person's dates stay on one line whatever the type's width. */
.person-card .person-body small {
  white-space: nowrap;
  font-size: 12px;
  letter-spacing: -0.2px;
}

.content {
  background: transparent;
}

.page-title h1 {
  color: var(--navy);
}

.page-title {
  border-bottom-color: var(--navy);
}

.book-facts,
.tree-options,
.zoom-bar,
.cards .person-card,
.panel {
  background: #fffdf8ee;
}

footer {
  background: #0f1f3fe6;
  border-top: 3px solid var(--gold);
  color: #dfe5f1;
}

/* ── 첫 화면: 소개와 로그인 ──────────────────── */
.welcome.intro {
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
  grid-template-areas:
    "copy side"
    "tiles tiles"
    "quote quote";
  gap: 36px 56px;
  align-items: start;
  max-width: 1200px;
  margin: 44px auto 28px;
}

.intro-copy {
  grid-area: copy;
}

.intro-side {
  grid-area: side;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0 18px;
}

.intro-side .intro-scroll {
  grid-column: 2;
  grid-row: 1;
}

.intro-side .panel {
  grid-column: 1;
  grid-row: 1;
}

.intro-lead {
  margin: 0 0 22px;
  color: var(--ink) !important;
  font: 500 clamp(18px, 1.8vw, 24px)/1.6 var(--serif);
}

.intro-title {
  margin: 0 0 22px;
  color: var(--navy);
  font: 900 clamp(40px, 5.4vw, 76px)/1.14 var(--sans);
  letter-spacing: -1.5px;
}

.intro-title em {
  color: var(--blue);
  font-style: normal;
}

.intro-text {
  margin: 0 0 22px;
  color: var(--ink) !important;
  font-size: 17px !important;
  line-height: 1.65;
}

.intro-motto {
  position: relative;
  margin: 30px 0 0;
  color: var(--ink) !important;
  font: 700 clamp(20px, 2vw, 26px)/1.5 var(--serif);
}

.intro-seal {
  display: inline-grid;
  width: 34px;
  height: 52px;
  margin-left: 10px;
  vertical-align: middle;
  writing-mode: vertical-rl;
  font-size: 18px;
}

.intro-side .panel {
  position: relative;
  z-index: 1;
  border-top: 4px solid var(--navy);
  background: #fffdf8f2;
  box-shadow: 0 12px 34px #13254a26;
}

.intro-side .panel h2 {
  color: var(--navy);
}

/* 족자: 百代之計 始於一家 */
.intro-scroll {
  display: flex;
  /* Written downward, so the block runs right to left: 百代之計, then 始於一家. */
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 24px 14px;
  width: max-content;
  border: 1px solid #c9b88f;
  border-top: 10px solid #5b4630;
  border-bottom: 10px solid #5b4630;
  background: linear-gradient(90deg, #efe6cf, #f8f2e2 50%, #efe6cf);
  box-shadow: 0 8px 20px #0000001f;
  writing-mode: vertical-rl;
  color: #1c1a16;
  font: 700 26px/1.3 var(--serif);
  letter-spacing: 6px;
}

.intro-scroll small {
  margin-top: 18px;
  color: #6b5b40;
  font: 13px/1.4 var(--serif);
  letter-spacing: 3px;
}

.intro-tiles {
  grid-area: tiles;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.intro-tiles li {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 22px 16px;
  border-radius: 12px;
  color: #fff;
  text-align: center;
  box-shadow: 0 10px 24px #13254a30;
}

.intro-tiles svg {
  width: 46px;
  height: 46px;
  fill: none;
  stroke: #fff;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.intro-tiles strong {
  font-size: 18px;
}

.intro-tiles span {
  color: #ffffffd9;
  font-size: 13.5px;
  line-height: 1.5;
}

.tile-navy { background: linear-gradient(160deg, #1f3c73, #13254a); }
.tile-green { background: linear-gradient(160deg, #22805a, #135c3e); }
.tile-purple { background: linear-gradient(160deg, #6a4bc0, #45308f); }
.tile-orange { background: linear-gradient(160deg, #ea7a2a, #c8531a); }

.intro-quote {
  grid-area: quote;
  margin: 0;
  padding: 22px 16px;
  border-radius: 12px;
  background: #13254ae6;
  color: #f3eedf !important;
  font: 400 clamp(16px, 1.6vw, 20px)/1.7 var(--serif) !important;
  text-align: center;
}

@media (max-width: 900px) {
  .welcome.intro {
    grid-template-columns: 1fr;
    grid-template-areas: "copy" "side" "tiles" "quote";
    margin-top: 24px;
  }

  .intro-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .intro-scroll {
    display: none;
  }
}

/* Paper gets none of the screen's dress. */
@media print {
  body {
    background: #fff;
  }

  body::before {
    display: none;
  }
}