:root {
  --fr-bg: var(--color-bg-base, #f6f6f7);
  --fr-bg-deep: var(--color-bg-surface-alt, #f2ede6);
  --fr-card: var(--color-bg-surface, #fff);
  --fr-card-strong: var(--color-bg-surface, #fff);
  --fr-ink: var(--color-content-primary, #1f232b);
  --fr-muted: var(--color-content-secondary, #6b7280);
  --fr-line: var(--color-border-subtle, rgba(31, 35, 43, 0.08));
  --fr-green: #47755b;
  --fr-green-dark: #315943;
  --fr-moss: #91aa76;
  --fr-gold: #d69d43;
  --fr-peach: #f2aa82;
  --fr-sky: #8ab9cb;
  --fr-lilac: #a897c9;
  --fr-danger: #a34545;
  --fr-forest: var(--fr-green-dark);
  --fr-shadow: var(--shadow-ambient, 0 2px 4px rgba(31, 35, 43, 0.035), 0 14px 28px -10px rgba(31, 35, 43, 0.1));
  --fr-radius-lg: 22px;
  --fr-radius-md: 16px;
  --fr-radius-sm: 12px;
}

* {
  box-sizing: border-box;
}

.friendship-page {
  min-height: 100vh;
  margin: 0;
  padding: env(safe-area-inset-top, 0) 0 env(safe-area-inset-bottom, 0);
  overflow-x: hidden;
  color: var(--fr-ink);
  background:
    radial-gradient(circle at 12% 8%, rgba(242, 170, 130, 0.17) 0 2px, transparent 3px),
    radial-gradient(circle at 84% 15%, rgba(214, 157, 67, 0.2) 0 2px, transparent 3px),
    radial-gradient(circle at 92% 45%, rgba(138, 185, 203, 0.19) 0 2px, transparent 3px),
    linear-gradient(180deg, #fffdf5 0%, var(--fr-bg) 42%, #f8f0df 100%);
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  line-height: 1.55;
  word-break: keep-all;
  text-wrap: pretty;
}

.friendship-page [hidden] { display: none !important; }

.friendship-page::before,
.friendship-page::after {
  position: fixed;
  z-index: -1;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  content: "";
  filter: blur(3px);
  pointer-events: none;
}

.friendship-page::before {
  top: 16vh;
  left: -150px;
  background: rgba(145, 170, 118, 0.12);
}

.friendship-page::after {
  right: -150px;
  bottom: 8vh;
  background: rgba(168, 151, 201, 0.11);
}

.fr-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.fr-hidden {
  display: none !important;
}

.fr-skip-link {
  position: fixed;
  z-index: 100;
  top: 8px;
  left: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  color: #fff;
  background: var(--fr-green-dark);
  transform: translateY(-150%);
}

.fr-skip-link:focus {
  transform: translateY(0);
}

.fr-site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(100%, 520px);
  min-height: 64px;
  margin: 0 auto;
  padding: 12px 20px;
}

.fr-brand {
  display: inline-flex;
  gap: 9px;
  align-items: center;
  color: var(--fr-ink);
  font-size: 17px;
  font-weight: 900;
  text-decoration: none;
}

.fr-brand-mark {
  display: grid;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(214, 157, 67, 0.35);
  border-radius: 11px;
  place-items: center;
  color: var(--fr-gold);
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 7px 20px rgba(139, 109, 58, 0.12);
}

.fr-header-label {
  color: var(--fr-muted);
  font-size: 12px;
  font-weight: 750;
}

.fr-public-root {
  width: min(100% - 32px, 480px);
  min-height: calc(100vh - 170px);
  margin: 0 auto;
  outline: none;
}

.fr-hero {
  padding: 28px 10px 24px;
  text-align: center;
}

.fr-eyebrow {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  margin: 0 0 10px;
  color: var(--fr-green);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.06em;
}

.fr-hero h1,
.fr-card h1,
.fr-card h2,
.fr-card h3 {
  margin-top: 0;
  color: var(--fr-ink);
  line-height: 1.3;
}

.fr-hero h1 {
  max-width: 390px;
  margin: 0 auto 12px;
  font-size: clamp(28px, 8vw, 38px);
  letter-spacing: -0.055em;
}

.fr-hero p {
  max-width: 390px;
  margin: 0 auto;
  color: var(--fr-muted);
  font-size: 15px;
  line-height: 1.55;
}

.fr-sky-mark {
  position: relative;
  display: grid;
  width: 94px;
  height: 94px;
  margin: 0 auto 18px;
  border: 1px solid rgba(214, 157, 67, 0.26);
  border-radius: 50%;
  place-items: center;
  font-size: 43px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 16px 34px rgba(112, 92, 57, 0.13);
}

.fr-sky-mark::before,
.fr-sky-mark::after {
  position: absolute;
  color: var(--fr-gold);
  content: "✦";
}

.fr-sky-mark::before {
  top: 3px;
  right: -2px;
  font-size: 18px;
}

.fr-sky-mark::after {
  bottom: 8px;
  left: 0;
  color: var(--fr-sky);
  font-size: 12px;
}

.fr-card {
  position: relative;
  padding: 22px;
  border: 1px solid var(--fr-line);
  border-radius: var(--fr-radius-lg);
  background: var(--fr-card);
  box-shadow: var(--fr-shadow);
}

.fr-card + .fr-card {
  margin-top: 14px;
}

.fr-boot-card,
.fr-off-card,
.fr-error-card {
  margin-top: 12vh;
  text-align: center;
}

.fr-boot-card h1,
.fr-off-card h1,
.fr-error-card h1 {
  margin-bottom: 10px;
  font-size: 22px;
}

.fr-boot-card p,
.fr-off-card p,
.fr-error-card p {
  margin: 0;
  color: var(--fr-muted);
  font-size: 14px;
}

.fr-orbit {
  display: grid;
  width: 52px;
  height: 52px;
  margin: 0 auto 16px;
  border: 1px dashed rgba(71, 117, 91, 0.42);
  border-radius: 50%;
  place-items: center;
  color: var(--fr-gold);
  animation: fr-orbit 2.2s linear infinite;
}

.fr-form {
  display: grid;
  gap: 22px;
}

.fr-field {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.fr-label,
.fr-legend {
  color: var(--fr-ink);
  font-size: 15px;
  font-weight: 850;
}

.fr-required {
  margin-left: 3px;
  color: var(--fr-danger);
}

.fr-hint {
  margin: -2px 0 0;
  color: var(--fr-muted);
  font-size: 12px;
}

.fr-input,
.fr-select {
  width: 100%;
  min-height: 50px;
  padding: 13px 14px;
  border: 1.5px solid var(--fr-line);
  border-radius: var(--fr-radius-sm);
  outline: none;
  color: var(--fr-ink);
  background: var(--fr-card-strong);
  font: inherit;
  font-size: 16px;
}

.fr-input:hover,
.fr-select:hover {
  border-color: rgba(71, 117, 91, 0.35);
}

.fr-input:focus-visible,
.fr-select:focus-visible,
.fr-choice input:focus-visible + span,
.fr-avatar-option input:focus-visible + span,
.fr-tab:focus-visible,
.fr-btn:focus-visible,
.fr-icon-btn:focus-visible,
.fr-link:focus-visible {
  outline: 3px solid rgba(71, 117, 91, 0.27);
  outline-offset: 2px;
}

.fr-input[aria-invalid="true"] {
  border-color: var(--fr-danger);
}

.fr-inline-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(118px, 0.42fr);
  gap: 10px;
}

.fr-segmented {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.fr-choice,
.fr-avatar-option {
  position: relative;
  cursor: pointer;
}

.fr-choice input,
.fr-avatar-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.fr-choice span {
  display: grid;
  min-height: 46px;
  border: 1.5px solid var(--fr-line);
  border-radius: 13px;
  place-items: center;
  color: var(--fr-muted);
  background: rgba(255, 255, 255, 0.76);
  font-size: 14px;
  font-weight: 780;
}

.fr-choice input:checked + span {
  border-color: var(--fr-green);
  color: var(--fr-green-dark);
  background: rgba(145, 170, 118, 0.17);
  box-shadow: inset 0 0 0 1px rgba(71, 117, 91, 0.1);
}

.fr-avatar-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
}

.fr-avatar-option span {
  display: grid;
  min-height: 51px;
  border: 1.5px solid transparent;
  border-radius: 15px;
  place-items: center;
  background: rgba(255, 255, 255, 0.67);
  font-size: 26px;
}

.fr-avatar-option input:checked + span {
  border-color: var(--fr-green);
  background: rgba(145, 170, 118, 0.19);
  box-shadow: 0 5px 16px rgba(71, 117, 91, 0.13);
  transform: translateY(-1px);
}

.fr-check-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 13px;
  border: 1px solid var(--fr-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.64);
  cursor: pointer;
}

.fr-check-row input {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  margin: 2px 0 0;
  accent-color: var(--fr-green);
}

.fr-check-copy {
  display: grid;
  gap: 3px;
  font-size: 15px;
  line-height: 1.45;
}

.fr-check-copy small {
  color: var(--fr-muted);
  font-size: 14px;
  line-height: 1.5;
}

.fr-privacy-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: -8px 0 0;
  padding: 12px 13px;
  border-radius: 14px;
  color: var(--fr-green-dark);
  background: rgba(138, 185, 203, 0.13);
  font-size: 12px;
}

.fr-form-error {
  min-height: 20px;
  margin: -8px 0 0;
  color: var(--fr-danger);
  font-size: 13px;
  font-weight: 720;
}

.fr-btn {
  display: inline-flex;
  min-height: 50px;
  padding: 13px 18px;
  border: 0;
  border-radius: 15px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #fff;
  background: var(--fr-green);
  box-shadow: 0 10px 24px rgba(49, 89, 67, 0.23);
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  font-weight: 850;
  text-decoration: none;
}

.fr-btn:hover {
  background: var(--fr-green-dark);
}

.fr-btn:active {
  transform: translateY(1px);
}

.fr-btn:disabled,
.fr-btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: wait;
  transform: none;
}

.fr-btn-secondary {
  border: 1px solid var(--fr-line);
  color: var(--fr-green-dark);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: none;
}

.fr-btn-secondary:hover {
  background: rgba(145, 170, 118, 0.12);
}

.fr-btn-soft {
  color: var(--fr-green-dark);
  background: rgba(145, 170, 118, 0.2);
  box-shadow: none;
}

.fr-btn-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.fr-link {
  color: var(--fr-green-dark);
  font-weight: 750;
  text-underline-offset: 3px;
}

.fr-link-button {
  display: block;
  margin: 14px auto 0;
  padding: 8px;
  border: 0;
  color: var(--fr-muted);
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.fr-host-card {
  display: flex;
  gap: 13px;
  align-items: center;
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid rgba(214, 157, 67, 0.24);
  border-radius: 18px;
  background: rgba(255, 249, 236, 0.86);
}

.fr-avatar {
  display: grid;
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  border-radius: 16px;
  place-items: center;
  background: rgba(145, 170, 118, 0.16);
  font-size: 27px;
}

.fr-host-copy strong,
.fr-host-copy span {
  display: block;
}

.fr-host-copy strong {
  font-size: 15px;
}

.fr-host-copy span {
  margin-top: 2px;
  color: var(--fr-muted);
  font-size: 14px;
}

.fr-result-shell {
  display: grid;
  gap: 14px;
  padding-bottom: 20px;
}

.fr-result-hero {
  overflow: hidden;
  text-align: center;
  background:
    radial-gradient(circle at 20% 15%, rgba(255, 255, 255, 0.42) 0 2px, transparent 3px),
    radial-gradient(circle at 78% 24%, rgba(255, 255, 255, 0.45) 0 2px, transparent 3px),
    linear-gradient(145deg, #466957, #355342 62%, #293e35);
}

.fr-result-hero h1,
.fr-result-hero h2,
.fr-result-hero p,
.fr-result-hero .fr-eyebrow {
  color: #fffef7;
}

.fr-sign-art {
  position: relative;
  display: grid;
  width: 108px;
  height: 108px;
  margin: 8px auto 16px;
  border: 1px solid rgba(255, 255, 255, 0.33);
  border-radius: 50%;
  place-items: center;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 30px rgba(255, 255, 255, 0.09);
  font-size: 53px;
}

.fr-sign-art::before {
  position: absolute;
  inset: -7px;
  border: 1px dashed rgba(255, 239, 194, 0.45);
  border-radius: 50%;
  content: "";
}

.fr-result-hero h1 {
  margin-bottom: 8px;
  font-size: 27px;
  letter-spacing: -0.04em;
}

.fr-result-hero p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 15px;
  line-height: 1.55;
}

.fr-axis-list {
  display: grid;
  gap: 18px;
}

.fr-axis-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
  font-size: 15px;
  font-weight: 800;
}

.fr-axis-head span:last-child {
  color: var(--fr-muted);
  font-size: 14px;
}

.fr-meter {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--fr-bg-deep);
}

.fr-meter > span {
  display: block;
  width: var(--fr-score, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--fr-moss), var(--fr-green));
  transition: width 0.55s ease;
}

.fr-tip-list,
.fr-plain-list,
.fr-friend-list,
.fr-request-list,
.fr-chat-list,
.fr-story-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fr-tip {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 13px;
  border-radius: 15px;
  background: rgba(145, 170, 118, 0.1);
  font-size: 15px;
  line-height: 1.55;
}

.fr-tip-icon {
  flex: 0 0 auto;
  font-size: 19px;
}

.fr-disclaimer {
  margin: 0;
  color: var(--fr-muted);
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}

.fr-claim-card {
  border-color: rgba(168, 151, 201, 0.3);
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.94), rgba(234, 227, 245, 0.78));
}

.fr-claim-card h2 {
  margin-bottom: 7px;
  font-size: 19px;
}

.fr-claim-card p {
  margin: 0 0 14px;
  color: var(--fr-muted);
  font-size: 15px;
  line-height: 1.55;
}

.fr-public-footer {
  display: grid;
  width: min(100% - 36px, 480px);
  gap: 7px;
  margin: 24px auto 0;
  padding: 18px 0 calc(26px + env(safe-area-inset-bottom, 0px));
  color: var(--fr-muted);
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}

.fr-public-footer p {
  margin: 0;
}

.fr-public-footer nav {
  display: flex;
  justify-content: center;
  gap: 14px;
}

.fr-public-footer a {
  color: inherit;
  text-underline-offset: 3px;
}

.fr-friendly-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-color: rgba(145, 170, 118, 0.32);
  background: linear-gradient(135deg, rgba(247, 252, 239, 0.96), rgba(255, 250, 234, 0.96));
}

.fr-friendly-notice p { margin: 4px 0 0; color: var(--fr-muted); font-size: 14px; line-height: 1.55; }

.fr-noscript {
  width: min(100% - 28px, 480px);
  margin: 20px auto;
  padding: 14px;
  border-radius: 14px;
  color: var(--fr-danger);
  background: #fff;
  text-align: center;
}

/* 앱 내부 우정 허브 ----------------------------------------------------- */
.fr-app-screen {
  width: min(100%, 600px);
  min-height: 100dvh;
  margin: 0 auto;
  padding: max(14px, env(safe-area-inset-top, 0px)) clamp(14px, 4vw, 20px) calc(120px + env(safe-area-inset-bottom, 0px));
  scroll-padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px));
}

.fr-app-shell {
  display: grid;
  gap: 14px;
  width: 100%;
  color: var(--fr-ink);
}

.fr-app-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.fr-app-heading h2 {
  margin: 0;
  font-size: 22px;
  letter-spacing: -0.04em;
}

.fr-app-heading p {
  margin: 3px 0 0;
  color: var(--fr-muted);
  font-size: 12px;
}

.fr-heading-actions {
  display: flex;
  gap: 7px;
}

.fr-guide-help {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: var(--fr-muted);
  font-size: 15px;
  font-weight: 900;
}

.fr-icon-btn {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border: 1px solid var(--fr-line);
  border-radius: 15px;
  place-items: center;
  color: var(--fr-green-dark);
  background: var(--fr-card-strong);
  cursor: pointer;
  font: inherit;
  font-size: 20px;
}

.fr-sign-summary {
  display: flex;
  gap: 14px;
  align-items: center;
}

.fr-traditional summary {
  cursor: pointer;
  font-weight: 800;
  color: var(--fr-forest);
}

.fr-traditional[open] summary {
  margin-bottom: 12px;
}

.fr-traditional ul {
  margin: 10px 0;
  padding-left: 20px;
  color: var(--fr-ink);
}

.fr-traditional li + li {
  margin-top: 7px;
}

.fr-map-handoff {
  margin-top: 2px;
  background: rgba(255, 255, 255, 0.68);
  box-shadow: 0 10px 28px rgba(89, 76, 52, 0.08);
}

.fr-sign-summary .fr-sign-art {
  width: 72px;
  height: 72px;
  flex: 0 0 auto;
  margin: 0;
  color: var(--fr-ink);
  background: rgba(145, 170, 118, 0.15);
  font-size: 35px;
}

.fr-sign-summary .fr-sign-art::before {
  border-color: rgba(71, 117, 91, 0.25);
}

.fr-sign-summary h3 {
  margin: 0 0 4px;
  font-size: 18px;
}

.fr-sign-summary p {
  margin: 0;
  color: var(--fr-muted);
  font-size: 12px;
}

.fr-relationship-card {
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 44%, rgba(242, 170, 130, 0.16), transparent 32%),
    linear-gradient(155deg, rgba(255, 254, 250, 0.96), rgba(244, 234, 215, 0.72));
}

.fr-relationship-card .fr-section-head {
  position: relative;
  z-index: 2;
  align-items: flex-start;
}

.fr-relationship-card .fr-section-head h3 {
  margin-top: 3px;
}

.fr-map-stage {
  position: relative;
  isolation: isolate;
  height: 356px;
  margin: 8px -4px 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 24px;
  touch-action: none;
  background:
    radial-gradient(ellipse at 50% 46%, rgba(255, 255, 255, 0.92) 0 9%, rgba(255, 250, 230, 0.58) 24%, transparent 45%),
    radial-gradient(circle at 18% 18%, rgba(242, 170, 130, 0.27), transparent 30%),
    radial-gradient(circle at 82% 22%, rgba(168, 151, 201, 0.26), transparent 33%),
    radial-gradient(circle at 74% 88%, rgba(138, 185, 203, 0.24), transparent 34%),
    linear-gradient(160deg, #f9efd9 0%, #eef2df 43%, #ede8f1 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84), inset 0 -28px 70px rgba(79, 88, 74, 0.06);
  cursor: grab;
}

.fr-map-stage::before,
.fr-map-stage::after {
  position: absolute;
  z-index: 1;
  content: "";
  pointer-events: none;
}

.fr-map-stage::before {
  inset: 0;
  background:
    linear-gradient(105deg, transparent 0 37%, rgba(255, 255, 255, 0.34) 49%, transparent 63%),
    radial-gradient(ellipse at 50% 112%, rgba(255, 255, 255, 0.46), transparent 58%);
}

.fr-map-stage::after {
  inset: auto 7% 8px;
  height: 42px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(75, 82, 68, 0.12), transparent 68%);
  transform: scaleY(0.34);
}

.fr-map-stage.is-dragging { cursor: grabbing; }
.fr-map-stage.is-pinching { cursor: zoom-in; }

.fr-map-tools {
  position: relative;
  z-index: 4;
  display: flex;
  margin: 10px -1px 6px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.fr-map-search { min-width: 0; flex: 1 1 auto; }
.fr-map-search input {
  width: 100%;
  height: 36px;
  padding: 0 12px 0 32px;
  border: 1px solid rgba(79, 103, 87, 0.16);
  border-radius: 14px;
  outline: none;
  color: var(--fr-ink);
  background: rgba(255, 253, 247, 0.86) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23637669' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 11px 50% no-repeat;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
  font: inherit;
  font-size: 11px;
}
.fr-map-search input:focus { border-color: rgba(63, 104, 76, 0.5); box-shadow: 0 0 0 3px rgba(95, 139, 106, 0.12); }

.fr-map-zoom {
  display: flex;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid rgba(79, 103, 87, 0.16);
  border-radius: 14px;
  background: rgba(255, 253, 247, 0.9);
}
.fr-map-zoom button {
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 0;
  border-left: 1px solid rgba(79, 103, 87, 0.1);
  color: var(--fr-green-dark);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 17px;
  font-weight: 850;
}
.fr-map-zoom button:first-child { border-left: 0; }
.fr-map-zoom button:disabled { opacity: 0.35; cursor: default; }
.fr-map-zoom .fr-map-reset { min-width: 58px; font-size: 9.5px; }

.fr-spatial-canvas,
.fr-spatial-haze {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.fr-spatial-haze {
  z-index: 3;
  width: 124px;
  height: 124px;
  margin: auto;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 239, 173, 0.36), rgba(255, 255, 255, 0.08) 42%, transparent 70%);
  animation: fr-spatial-haze 4.8s ease-in-out infinite;
}

.fr-map-center {
  position: absolute;
  z-index: 32;
  top: 49%;
  left: 50%;
  display: grid;
  width: 86px;
  height: 86px;
  padding: 13px 9px 9px;
  border: 1px solid rgba(255, 255, 255, 0.68);
  border-radius: 50%;
  place-items: center;
  color: #fff;
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.35) 0 7%, transparent 24%),
    linear-gradient(145deg, #71947b, #315943 72%);
  box-shadow: 0 18px 34px rgba(49, 89, 67, 0.24), 0 0 0 8px rgba(145, 170, 118, 0.11), inset 0 -8px 14px rgba(30, 61, 43, 0.2);
  transform: translate(-50%, -50%);
  text-align: center;
}

.fr-center-rings {
  position: absolute;
  z-index: -1;
  inset: -15px;
  border: 1px solid rgba(71, 117, 91, 0.18);
  border-radius: 50%;
  box-shadow: 0 0 0 9px rgba(255, 255, 255, 0.12);
  animation: fr-center-rings 5.4s ease-in-out infinite;
}

.fr-center-star { height: 22px; color: #fff1b9; font-size: 21px; line-height: 1; text-shadow: 0 0 12px rgba(255, 238, 163, 0.82); }
.fr-map-center strong { max-width: 66px; overflow: hidden; font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.fr-map-center small { margin-top: -3px; color: rgba(255, 255, 255, 0.72); font-size: 8.5px; font-weight: 750; }

.fr-spatial-node {
  --fr-node-anchor: 26px;
  --fr-label-gap: 32px;
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  display: grid;
  width: 98px;
  height: 52px;
  padding: 0;
  border: 0;
  place-items: center;
  color: var(--fr-ink);
  background: transparent;
  will-change: transform;
  cursor: pointer;
  font: inherit;
  text-align: center;
}

.fr-spatial-node[hidden] { display: none !important; }

.fr-map-label {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  display: flex;
  max-width: 96px;
  padding: 3px 7px;
  align-items: baseline;
  gap: 3px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  background: rgba(255, 253, 245, 0.84);
  box-shadow: 0 5px 13px rgba(76, 68, 53, 0.09);
  text-overflow: ellipsis;
  transform: translateX(-50%);
  white-space: nowrap;
}

.is-spatial-ready .fr-spatial-node:not(.is-label-visible) .fr-map-label {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(3px);
}
.is-spatial-ready .fr-spatial-node.is-label-visible .fr-map-label { opacity: 1; transition: opacity 180ms ease, transform 180ms ease; }
.is-spatial-ready .fr-spatial-node[data-fr-label-placement="left"]:not(.is-label-visible) .fr-map-label,
.is-spatial-ready .fr-spatial-node[data-fr-label-placement="right"]:not(.is-label-visible) .fr-map-label { transform: translateY(-50%) translateX(3px); }

.fr-spatial-node[data-fr-label-placement="above"] .fr-map-label { top: auto; bottom: calc(100% + 6px); }
.fr-spatial-node[data-fr-label-placement="left"] .fr-map-label,
.fr-spatial-node[data-fr-label-placement="right"] .fr-map-label { top: 50%; bottom: auto; transform: translateY(-50%); }
.fr-spatial-node[data-fr-label-placement="left"] .fr-map-label { right: calc(50% + var(--fr-label-gap)); left: auto; }
.fr-spatial-node[data-fr-label-placement="right"] .fr-map-label { right: auto; left: calc(50% + var(--fr-label-gap)); }

.fr-spatial-node .fr-map-name {
  min-width: 0;
  overflow: hidden;
  font-size: 11px;
  font-weight: 900;
  text-overflow: ellipsis;
}

.fr-spatial-node small { flex: none; color: rgba(57, 69, 61, 0.7); font-size: 9px; font-weight: 750; }
.fr-spatial-node:focus-visible { outline: none; }
.fr-spatial-node:focus-visible .fr-spatial-star { box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--fr-green); }

.fr-spatial-star {
  --fr-star: #d49a38;
  --fr-star-soft: #fff0c9;
  --fr-star-halo: rgba(214, 157, 67, 0.24);
  position: relative;
  display: grid;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 50%;
  place-items: center;
  color: var(--fr-star);
  background: radial-gradient(circle at 34% 27%, #fff 0 8%, var(--fr-star-soft) 34%, rgba(255, 255, 255, 0.72) 72%);
  box-shadow: 0 9px 22px rgba(75, 68, 54, 0.16), inset 0 -6px 12px rgba(98, 84, 62, 0.07), 0 0 18px var(--fr-star-halo);
}

.fr-spatial-star::after {
  position: absolute;
  z-index: -2;
  width: 62px;
  height: 12px;
  border-radius: 50%;
  content: "";
  background: linear-gradient(90deg, transparent, var(--fr-star-halo), transparent);
  transform: rotate(-28deg);
}

.fr-spatial-star i {
  position: absolute;
  z-index: -1;
  inset: -7px;
  border: 1px solid var(--fr-star-halo);
  border-radius: 50%;
}

.fr-spatial-star b {
  color: currentColor;
  font-size: 27px;
  line-height: 1;
  text-shadow: 0 0 10px var(--fr-star-halo);
}

.fr-spatial-cluster .fr-spatial-star {
  width: 58px;
  height: 58px;
  box-shadow: 0 12px 28px rgba(75, 68, 54, 0.18), inset 0 -6px 12px rgba(98, 84, 62, 0.07), 0 0 25px var(--fr-star-halo);
}
.fr-spatial-cluster .fr-spatial-star i { inset: -10px; border-width: 2px; }
.fr-cluster-count {
  position: absolute;
  z-index: 3;
  top: -5px;
  left: calc(50% + 13px);
  display: grid;
  min-width: 24px;
  height: 24px;
  padding: 0 5px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  place-items: center;
  color: #fff;
  background: var(--fr-green-dark);
  box-shadow: 0 4px 10px rgba(49, 89, 67, 0.22);
  font-size: 9px;
  font-weight: 900;
}
.fr-map-stage[data-fr-spatial-mode="clusters"] .fr-map-center { box-shadow: 0 18px 34px rgba(49, 89, 67, 0.24), 0 0 0 13px rgba(145, 170, 118, 0.1), inset 0 -8px 14px rgba(30, 61, 43, 0.2); }

.fr-spatial-star-1 { --fr-star:#70a567; --fr-star-soft:#e9f4df; --fr-star-halo:rgba(112,165,103,.28); }
.fr-spatial-star-2 { --fr-star:#db8992; --fr-star-soft:#fde7e9; --fr-star-halo:rgba(219,137,146,.28); }
.fr-spatial-star-3 { --fr-star:#a37445; --fr-star-soft:#f1e2ce; --fr-star-halo:rgba(163,116,69,.25); }
.fr-spatial-star-4 { --fr-star:#7e9da8; --fr-star-soft:#e3f0f3; --fr-star-halo:rgba(126,157,168,.26); }
.fr-spatial-star-5 { --fr-star:#dfa12d; --fr-star-soft:#ffefbd; --fr-star-halo:rgba(223,161,45,.3); }
.fr-spatial-star-6 { --fr-star:#977dc4; --fr-star-soft:#ece5fa; --fr-star-halo:rgba(151,125,196,.27); }
.fr-spatial-star-7 { --fr-star:#6f82b3; --fr-star-soft:#e5e9f6; --fr-star-halo:rgba(111,130,179,.28); }
.fr-spatial-star-8 { --fr-star:#59699b; --fr-star-soft:#dfe5f4; --fr-star-halo:rgba(89,105,155,.28); }
.fr-spatial-star-9 { --fr-star:#c28744; --fr-star-soft:#f9e8cc; --fr-star-halo:rgba(194,135,68,.27); }
.fr-spatial-star-10 { --fr-star:#62a09a; --fr-star-soft:#dcf0ed; --fr-star-halo:rgba(98,160,154,.27); }
.fr-spatial-star-11 { --fr-star:#608db4; --fr-star-soft:#dcebf7; --fr-star-halo:rgba(96,141,180,.28); }
.fr-spatial-star-12 { --fr-star:#ca7b68; --fr-star-soft:#f7dfda; --fr-star-halo:rgba(202,123,104,.28); }

.fr-spatial-star-2 i,
.fr-spatial-star-6 i,
.fr-spatial-star-10 i { border-style: dashed; transform: rotate(18deg) scaleX(1.13); }
.fr-spatial-star-3 i,
.fr-spatial-star-7 i,
.fr-spatial-star-11 i { border-radius: 42% 58% 45% 55%; transform: rotate(-22deg); }
.fr-spatial-star-4 i,
.fr-spatial-star-8 i,
.fr-spatial-star-12 i { inset: -9px 0; border-radius: 50%; transform: rotate(48deg); }

.fr-spatial-ghost { pointer-events: none; }
.fr-spatial-ghost .fr-spatial-star { opacity: 0.22; }
.fr-spatial-ghost .fr-map-name,
.fr-spatial-ghost small { display: none; }

.fr-type-star {
  display: grid;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border-radius: 50%;
  place-items: center;
  color: #d49a38;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 7px 18px rgba(89, 76, 52, 0.14), inset 0 0 0 1px rgba(214, 157, 67, 0.2);
  font-size: 25px;
}

.fr-type-star-1 { color: #70a567; background: #f0f7e9; }
.fr-type-star-2 { color: #dd8e91; background: #fff0f1; }
.fr-type-star-3 { color: #a37445; background: #f6ebdc; }
.fr-type-star-4 { color: #86a5af; background: #edf6f8; }
.fr-type-star-5 { color: #e0a22f; background: #fff4cf; }
.fr-type-star-6 { color: #9a82c5; background: #f3effd; }
.fr-type-star-7 { color: #7184b4; background: #eef1fa; }
.fr-type-star-8 { color: #5d6b9e; background: #e9edf8; }
.fr-type-star-9 { color: #c48a48; background: #fff1db; }
.fr-type-star-10 { color: #6ca4a0; background: #eaf7f5; }
.fr-type-star-11 { color: #638eb3; background: #eaf3fb; }
.fr-type-star-12 { color: #ce806c; background: #fcedea; }

.fr-map-caption { display: flex; margin: 8px 2px 0; align-items: center; justify-content: center; gap: 5px; color: var(--fr-muted); font-size: 10.5px; text-align: center; }
.fr-map-caption strong { flex: none; color: var(--fr-green-dark); font-size: inherit; }
.fr-map-caption span { max-width: 278px; }
.fr-map-status {
  min-height: 18px;
  margin: 7px 0 -2px;
  color: var(--fr-green-dark);
  font-size: 10px;
  font-weight: 800;
  text-align: center;
}

.fr-error-detail {
  margin-top: 13px;
  color: var(--fr-muted);
  font-size: 11px;
}

.fr-error-detail summary { cursor: pointer; }

.fr-guide-modal {
  position: fixed;
  z-index: 12700;
  inset: 0;
  display: grid;
  padding: max(14px, env(safe-area-inset-top, 0px)) 14px max(14px, env(safe-area-inset-bottom, 0px));
  place-items: center;
  background: #f5eee2;
}

.fr-guide-sheet {
  display: grid;
  grid-template-rows: auto minmax(190px, 232px) auto minmax(52px, auto) auto auto;
  align-content: start;
  width: 100%;
  max-width: 500px;
  max-height: calc(100dvh - max(28px, env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px)));
  padding: 18px 18px 16px;
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 28px;
  color: var(--fr-ink);
  background: linear-gradient(165deg, #fffdf5, #f7edda);
  box-shadow: 0 28px 80px rgba(39, 31, 20, 0.28);
}

.fr-guide-sheet > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.fr-guide-sheet > header button {
  display: grid;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  place-items: center;
  color: var(--fr-ink);
  background: rgba(255, 255, 255, 0.76);
  font-size: 23px;
}

.fr-guide-sheet h2 { margin: 12px 0 6px; font-size: clamp(21px, 6.2vw, 25px); line-height: 1.3; letter-spacing: -0.04em; }
.fr-guide-copy { min-height: 52px; margin: 0; color: var(--fr-muted); font-size: 14px; line-height: 1.62; }
.fr-guide-art { min-width: 0; min-height: 190px; margin-top: 8px; overflow: hidden; }
.fr-guide-demo .fr-relationship-card { padding: 10px; box-shadow: none; }
.fr-guide-demo .fr-relationship-card .fr-section-head,
.fr-guide-demo .fr-map-caption { display: none; }
.fr-guide-demo .fr-map-tools,
.fr-guide-demo .fr-map-status,
.fr-guide-demo .fr-spatial-cluster { display: none !important; }
.fr-guide-demo .fr-map-stage { height: 232px; margin: 0; }
.fr-guide-demo .fr-map-center { width: 64px; height: 64px; padding: 10px 7px 7px; }
.fr-guide-demo .fr-map-center strong { font-size: 9px; }
.fr-guide-demo .fr-map-center small { display: none; }
.fr-guide-demo .fr-center-star { height: 17px; font-size: 17px; }
.fr-guide-demo .fr-spatial-node { --fr-node-anchor: 20px; --fr-label-gap: 25px; width: 76px; height: 40px; }
.fr-guide-demo .fr-spatial-star { width: 40px; height: 40px; }
.fr-guide-demo .fr-spatial-star b { font-size: 21px; }
.fr-guide-demo .fr-map-label { max-width: 74px; padding: 2px 5px; gap: 2px; }
.fr-guide-demo .fr-spatial-node .fr-map-name { font-size: 9.5px; }
.fr-guide-demo .fr-spatial-node small { font-size: 8px; }

.fr-guide-seed-preview {
  position: relative;
  display: grid;
  min-height: 216px;
  padding: 18px 12px 12px;
  overflow: hidden;
  border: 1px solid rgba(71, 117, 91, 0.12);
  border-radius: 24px;
  background:
    radial-gradient(circle at 82% 12%, rgba(255, 238, 165, 0.78), transparent 28%),
    radial-gradient(circle at 12% 96%, rgba(157, 193, 169, 0.35), transparent 35%),
    rgba(255, 255, 255, 0.7);
}

.fr-guide-seed-core {
  display: grid;
  width: 132px;
  min-height: 92px;
  margin: 0 auto -10px;
  padding: 12px;
  z-index: 1;
  border: 1px solid rgba(214, 157, 67, 0.25);
  border-radius: 25px;
  place-items: center;
  color: var(--fr-green-dark);
  background: rgba(255, 254, 247, 0.94);
  box-shadow: 0 14px 30px rgba(70, 82, 55, 0.14);
}

.fr-guide-seed-core > span { height: 25px; color: var(--fr-gold); font-size: 24px; line-height: 1; }
.fr-guide-seed-core small { color: var(--fr-muted); font-size: 9px; }
.fr-guide-seed-core strong { font-size: 17px; letter-spacing: -0.03em; }

.fr-guide-seed-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  align-self: end;
}

.fr-guide-seed-cards span {
  display: grid;
  min-width: 0;
  min-height: 72px;
  padding: 18px 7px 8px;
  border: 1px solid rgba(71, 117, 91, 0.12);
  border-radius: 15px;
  align-content: center;
  gap: 3px;
  background: rgba(255, 255, 255, 0.88);
  text-align: center;
}

.fr-guide-seed-cards b { font-size: 10px; line-height: 1.35; }
.fr-guide-seed-cards small { color: var(--fr-muted); font-size: 8.5px; }

.fr-demo-captions {
  position: relative;
  height: 22px;
  margin-top: 4px;
  color: var(--fr-green-dark);
  font-size: 12px;
  font-weight: 850;
  text-align: center;
}

.fr-demo-captions span {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: fr-demo-caption 6s ease-in-out infinite;
}
.fr-demo-captions span:nth-child(2) { animation-delay: 2s; }
.fr-demo-captions span:nth-child(3) { animation-delay: 4s; }

.fr-guide-steps-art,
.fr-guide-merge-art,
.fr-guide-safe-art {
  display: flex;
  min-height: 190px;
  align-items: center;
  justify-content: center;
  gap: 9px;
}

.fr-guide-steps-art span,
.fr-guide-merge-art span,
.fr-guide-safe-art span {
  display: grid;
  min-height: 78px;
  flex: 1;
  padding: 12px 8px;
  border: 1px solid var(--fr-line);
  border-radius: 17px;
  place-items: center;
  background: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  font-weight: 850;
  text-align: center;
}

.fr-guide-steps-art span small {
  display: grid;
  width: 23px;
  height: 23px;
  margin-bottom: 6px;
  border-radius: 50%;
  place-items: center;
  color: #fff;
  background: var(--fr-green);
  font-size: 10px;
}

.fr-guide-merge-art span { min-width: 0; color: var(--fr-gold); font-size: 26px; }
.fr-guide-merge-art small,
.fr-guide-safe-art small { display: block; color: var(--fr-muted); font-size: 10px; }
.fr-guide-safe-art span { font-size: 24px; }

.fr-guide-progress {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 14px 0;
}

.fr-guide-progress span { width: 7px; height: 7px; border-radius: 999px; background: rgba(71, 117, 91, 0.2); transition: width 180ms ease; }
.fr-guide-progress .is-active { width: 24px; background: var(--fr-green); }
.fr-guide-actions { display: flex; gap: 9px; }
.fr-guide-actions .fr-btn { width: auto; flex: 1; }

.fr-tabs {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 2px 1px 5px;
  scrollbar-width: none;
}

.fr-tabs::-webkit-scrollbar {
  display: none;
}

.fr-tab {
  min-height: 42px;
  flex: 0 0 auto;
  padding: 10px 13px;
  border: 1px solid var(--fr-line);
  border-radius: 999px;
  color: var(--fr-muted);
  background: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
}

.fr-tab[aria-selected="true"] {
  border-color: var(--fr-green);
  color: #fff;
  background: var(--fr-green);
}

.fr-tab-badge {
  display: inline-grid;
  min-width: 18px;
  height: 18px;
  margin-left: 4px;
  padding: 0 5px;
  border-radius: 999px;
  place-items: center;
  color: var(--fr-green-dark);
  background: #fff;
  font-size: 10px;
}

.fr-panel[hidden] {
  display: none;
}

.fr-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 13px;
}

.fr-section-head h3 {
  margin: 0;
  font-size: 16px;
}

.fr-section-head span {
  color: var(--fr-muted);
  font-size: 11px;
}

.fr-list-card {
  display: flex;
  gap: 11px;
  align-items: center;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--fr-line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
}

.fr-list-main {
  min-width: 0;
  flex: 1;
}

.fr-list-main strong,
.fr-list-main span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fr-list-main strong {
  font-size: 14px;
}

.fr-list-main span {
  margin-top: 2px;
  color: var(--fr-muted);
  font-size: 11px;
}

.fr-list-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 6px;
}

.fr-mini-btn {
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid var(--fr-line);
  border-radius: 11px;
  color: var(--fr-green-dark);
  background: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
}

.fr-mini-btn-primary {
  border-color: var(--fr-green);
  color: #fff;
  background: var(--fr-green);
}

.fr-unread {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--fr-peach);
  box-shadow: 0 0 0 4px rgba(242, 170, 130, 0.14);
}

.fr-story-date {
  color: var(--fr-green);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.04em;
}

.fr-empty {
  padding: 30px 12px;
  color: var(--fr-muted);
  text-align: center;
}

.fr-empty-emoji {
  display: block;
  margin-bottom: 8px;
  font-size: 32px;
}

.fr-empty strong {
  display: block;
  margin-bottom: 4px;
  color: var(--fr-ink);
  font-size: 14px;
}

.fr-empty span {
  font-size: 12px;
}

.fr-skeleton {
  min-height: 82px;
  border-radius: 16px;
  background: linear-gradient(100deg, rgba(224, 216, 197, 0.6) 15%, rgba(255, 255, 255, 0.8) 40%, rgba(224, 216, 197, 0.6) 65%);
  background-size: 220% 100%;
  animation: fr-shimmer 1.6s ease-in-out infinite;
}

.fr-chat-modal {
  position: fixed;
  inset: 0;
  z-index: 12620;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-top: env(safe-area-inset-top, 0);
  background: rgba(46, 36, 26, 0.48);
}

.fr-chat-sheet {
  width: min(100%, 520px);
  max-height: 90vh;
  padding: 20px 18px calc(18px + env(safe-area-inset-bottom, 0px));
  overflow: auto;
  border-radius: 24px 24px 0 0;
  color: var(--fr-ink);
  background: var(--fr-bg);
}

.fr-chat-sheet > header,
.fr-chat-sheet [data-chat-form] {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fr-chat-sheet > header { justify-content: space-between; }
.fr-chat-sheet > header h2 { margin: 0; font-size: 18px; }
.fr-chat-sheet > header button {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  font-size: 24px;
  background: rgba(255, 255, 255, 0.75);
}

.fr-action-sheet {
  display: grid;
  gap: 18px;
}

.fr-action-grid {
  display: grid;
  gap: 10px;
}

.fr-action-choice {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 2px 12px;
  width: 100%;
  padding: 14px;
  border: 1px solid var(--fr-line);
  border-radius: 16px;
  color: var(--fr-ink);
  background: rgba(255, 255, 255, 0.76);
  cursor: pointer;
  text-align: left;
}

.fr-action-choice > span {
  grid-row: 1 / span 2;
  align-self: center;
  font-size: 27px;
  text-align: center;
}

.fr-action-choice > strong { font-size: 15px; }
.fr-action-choice > small { color: var(--fr-muted); font-size: 12px; }

.fr-code-display {
  padding: 18px;
  border: 1px dashed rgba(71, 117, 91, 0.48);
  border-radius: 16px;
  color: var(--fr-green-dark);
  background: rgba(145, 170, 118, 0.13);
  font-size: 24px;
  letter-spacing: 0.08em;
  text-align: center;
}

.fr-result-card {
  padding: 16px;
  border: 1px solid var(--fr-line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.7);
}

.fr-result-card h3 { margin: 4px 0 8px; }

.fr-axis-list {
  display: grid;
  gap: 8px;
  margin: 14px 0;
}

.fr-axis-list p {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 10px;
  margin: 0;
  padding: 10px 12px;
  border-radius: 13px;
  background: rgba(145, 170, 118, 0.12);
}

.fr-axis-list p > span { font-weight: 760; }
.fr-axis-list p > strong { color: var(--fr-green-dark); font-size: 18px; }
.fr-axis-list p > small { grid-column: 1 / -1; color: var(--fr-muted); font-size: 14px; line-height: 1.5; }

.fr-chat-messages {
  min-height: 180px;
  margin: 14px 0;
  padding: 12px;
  border: 1px solid var(--fr-line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.74);
}

.fr-chat-messages p {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin: 7px 0;
  padding: 9px 11px;
  border-radius: 12px;
  background: rgba(157, 188, 152, 0.15);
}

.fr-chat-messages small { flex: none; color: var(--fr-muted); }
.fr-chat-sheet [data-chat-form] .fr-input { flex: 1; }
.fr-chat-sheet [data-chat-form] .fr-btn { width: auto; flex: none; }

.fr-chat-appointments {
  margin: 14px 0;
  padding: 12px;
  border: 1px solid var(--fr-line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.58);
}

.fr-chat-appointments h3 { margin: 0 0 10px; font-size: 15px; }
.fr-chat-appointments p,
.fr-chat-appointments form { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.fr-chat-appointments p { justify-content: space-between; }
.fr-chat-appointments form { flex-wrap: wrap; }
.fr-chat-appointments form .fr-input { flex: 1 1 170px; }

.fr-private-photo {
  display: block;
  width: min(100%, 320px);
  aspect-ratio: 1;
  margin: 16px auto;
  object-fit: cover;
  border-radius: 22px;
}

.fr-claim-code {
  display: grid;
  gap: 6px;
  margin-top: 14px;
  padding: 14px;
  border: 1px dashed var(--fr-line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.7);
  text-align: center;
}

.fr-claim-code strong {
  color: var(--fr-ink);
  font-size: clamp(20px, 6vw, 28px);
  letter-spacing: 0.08em;
  user-select: all;
}

.fr-claim-code .fr-btn { width: 100%; }

.fr-claim-code small { color: var(--fr-muted); line-height: 1.5; }

.fr-claim-form {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.fr-claim-form .fr-input {
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fr-play-questions {
  padding: 14px;
  border: 1px solid var(--fr-line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.45);
}

.fr-play-questions > summary {
  cursor: pointer;
}

.fr-play-questions > .fr-label {
  display: block;
  margin-top: 14px;
}

.fr-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fr-chip-grid label {
  padding: 8px 10px;
  border: 1px solid var(--fr-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.76);
  font-size: 13px;
}

/* 우리 아기 사주별 — 개인 사주 결과 ----------------------------------- */
.fr-section-tabs,
.fr-mode-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 5px;
  border: 1px solid rgba(71, 117, 91, 0.14);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.62);
}

.fr-section-tabs button,
.fr-mode-tabs button {
  min-height: 44px;
  border: 0;
  border-radius: 14px;
  color: var(--fr-muted);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 850;
}

.fr-section-tabs button[aria-pressed="true"],
.fr-mode-tabs button[aria-pressed="true"] {
  color: #fff;
  background: linear-gradient(135deg, #537b60, #315943);
  box-shadow: 0 8px 20px rgba(49, 89, 67, 0.18);
}

.fr-seed-hero {
  position: relative;
  overflow: hidden;
  padding: 26px 22px;
  border: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: 28px;
  background:
    radial-gradient(circle at 84% 18%, rgba(255, 244, 187, 0.95), transparent 25%),
    radial-gradient(circle at 14% 90%, rgba(179, 209, 188, 0.42), transparent 38%),
    linear-gradient(145deg, #fffdf5, #f5f0df 60%, #e5efdf);
  box-shadow: 0 18px 40px rgba(70, 82, 55, 0.12);
}

.fr-seed-hero::after {
  position: absolute;
  top: -28px;
  right: -18px;
  width: 125px;
  height: 125px;
  border: 1px solid rgba(92, 126, 91, 0.15);
  border-radius: 50%;
  box-shadow: 0 0 0 18px rgba(255, 255, 255, 0.18), 0 0 0 38px rgba(92, 126, 91, 0.04);
  content: '';
}

.fr-seed-symbol {
  position: relative;
  z-index: 1;
  display: grid;
  width: 68px;
  height: 68px;
  margin-bottom: 16px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 24px;
  place-items: center;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 10px 26px rgba(80, 92, 61, 0.13);
  font-size: 35px;
}

.fr-seed-hero h3 { margin: 2px 0 7px; font-size: 28px; letter-spacing: -0.055em; }
.fr-seed-hero > strong { display: block; color: var(--fr-green-dark); font-size: 15px; }
.fr-seed-hero > p:not(.fr-eyebrow) { max-width: 390px; margin: 9px 0 12px; color: var(--fr-muted); line-height: 1.65; }
.fr-seed-hero > span { color: rgba(49, 89, 67, 0.72); font-size: 11px; font-weight: 750; }

.fr-personal-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.fr-personal-cards .fr-card { padding: 18px; }
.fr-personal-cards .fr-card + .fr-card { margin-top: 0; }
.fr-personal-cards p:not(.fr-eyebrow) { min-height: 82px; margin: 8px 0 14px; font-size: 12px; line-height: 1.6; }
.fr-guardian-tip { display: grid; gap: 4px; padding-top: 10px; border-top: 1px solid var(--fr-line); }
.fr-guardian-tip strong { color: var(--fr-green-dark); font-size: 11px; }
.fr-guardian-tip span { color: var(--fr-muted); font-size: 11px; line-height: 1.5; }
.fr-daily-card { background: linear-gradient(135deg, rgba(255, 249, 218, 0.92), rgba(255, 255, 255, 0.94)); }
.fr-daily-card h3 { margin: 3px 0 0; }
.fr-daily-card > strong { display: block; margin-top: 12px; color: var(--fr-green-dark); font-size: 12px; }
.fr-theme-section { display: grid; min-width: 0; gap: 10px; }
.fr-theme-section .fr-section-head { min-width: 0; margin: 0 2px 2px; }
.fr-theme-section .fr-section-head > div { min-width: 0; }
.fr-theme-section .fr-section-head h3 { font-size: 17px; line-height: 1.35; }
.fr-theme-section .fr-section-head .fr-eyebrow { margin-bottom: 5px; }
.fr-theme-section .fr-section-head .fr-mini-btn { max-width: 48%; flex: 0 0 auto; white-space: normal; line-height: 1.3; text-align: center; }
.fr-theme-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 10px; }
.fr-theme-grid .fr-card + .fr-card { margin-top: 0; }
.fr-theme-card { display: grid; min-width: 0; min-height: 158px; height: 100%; padding: 18px 16px; grid-template-rows: auto minmax(4.5em, 1fr) auto; gap: 9px; cursor: pointer; text-align: left; }
.fr-theme-card strong { color: var(--fr-ink); font-size: 15px; line-height: 1.4; }
.fr-theme-card span { min-width: 0; color: var(--fr-muted); font-size: 12px; line-height: 1.55; overflow-wrap: anywhere; }
.fr-theme-card small { align-self: end; color: var(--fr-green-dark); font-weight: 850; }
.fr-btn-row > :only-child { grid-column: 1 / -1; width: 100%; }
.fr-disclaimer { padding: 8px 14px 20px; line-height: 1.65; }
.fr-personal-empty { padding: 38px 24px; text-align: center; }
.fr-personal-empty > span { font-size: 40px; }
.fr-seed-orbit { display: flex; align-items: center; justify-content: center; gap: 13px; min-height: 130px; font-size: 26px; }
.fr-seed-orbit b { display: grid; width: 68px; height: 68px; border-radius: 50%; place-items: center; color: #fff1b9; background: var(--fr-green); box-shadow: 0 0 0 18px rgba(71, 117, 91, 0.08); animation: fr-center-rings 3s ease-in-out infinite; }
.fr-map-center { cursor: pointer; font: inherit; }

@media (max-width: 520px) {
  .fr-personal-cards { grid-template-columns: 1fr; }
  .fr-personal-cards p:not(.fr-eyebrow) { min-height: 0; }
}

@media (max-width: 370px) {
  .fr-theme-grid { grid-template-columns: 1fr; }
  .fr-theme-card { min-height: 132px; grid-template-rows: auto auto auto; }
  .fr-theme-section .fr-section-head { align-items: flex-end; }
  .fr-theme-section .fr-section-head .fr-mini-btn { max-width: 46%; }
}

@media (max-height: 700px) {
  .fr-guide-sheet { grid-template-rows: auto minmax(150px, 190px) auto auto auto auto; padding-top: 14px; }
  .fr-guide-art { min-height: 150px; }
  .fr-guide-demo .fr-map-stage { height: 176px; }
  .fr-guide-seed-preview { min-height: 176px; padding-top: 10px; }
  .fr-guide-seed-core { min-height: 78px; }
  .fr-guide-steps-art,
  .fr-guide-merge-art,
  .fr-guide-safe-art { min-height: 170px; }
}

@keyframes fr-orbit {
  to { transform: rotate(360deg); }
}

@keyframes fr-shimmer {
  to { background-position-x: -220%; }
}

@keyframes fr-spatial-haze {
  50% { opacity: 0.62; transform: scale(1.09); }
}

@keyframes fr-center-rings {
  50% { opacity: 0.52; transform: scale(1.07); }
}

@keyframes fr-demo-caption {
  0%, 8% { opacity: 0; transform: translateY(5px); }
  14%, 29% { opacity: 1; transform: translateY(0); }
  35%, 100% { opacity: 0; transform: translateY(-4px); }
}

@media (min-width: 640px) {
  .fr-public-root {
    width: min(100% - 48px, 520px);
  }

  .fr-card {
    padding: 26px;
  }
}

@media (max-width: 390px) {
  .fr-inline-fields,
  .fr-btn-row {
    grid-template-columns: 1fr;
  }

  .fr-avatar-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .fr-list-card {
    align-items: flex-start;
  }

  .fr-list-actions {
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (forced-colors: active) {
  .fr-card,
  .fr-input,
  .fr-select,
  .fr-choice span,
  .fr-list-card,
  .fr-tab {
    border: 1px solid CanvasText;
  }
}

/* ── 키우리 사주뜰 · 놀이·체험 장소 ─────────────────────────────── */
.fr-destination-places { display:grid; gap:18px; }
.fr-place-entry { display:flex; width:100%; min-height:88px; align-items:center; justify-content:space-between; gap:14px; padding:17px 18px; border:1px solid var(--fr-line); color:var(--fr-ink); background:linear-gradient(135deg,color-mix(in srgb,var(--fr-green) 10%,var(--fr-card)),var(--fr-card)); text-align:left; cursor:pointer; }
.fr-place-entry > span { display:grid; gap:3px; }
.fr-place-entry small { color:var(--fr-green); font-size:13px; font-style:normal; font-weight:800; }
.fr-place-entry strong { font-size:17px; line-height:1.35; }
.fr-place-entry em { color:var(--fr-muted); font-size:14px; line-height:1.5; font-style:normal; font-weight:500; }
.fr-place-entry > b { font-size:26px; font-weight:400; }
.fr-place-guide { display:grid; gap:14px; }
.fr-place-guide > p { margin:0; color:var(--fr-muted); font-size:15px; line-height:1.6; }
.fr-place-guide > div:last-child { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.fr-place-guide article { position:relative; display:grid; grid-template-columns:8px 1fr; gap:12px; padding:18px; overflow:hidden; }
.fr-place-guide article > span { width:8px; height:100%; min-height:80px; border-radius:999px; background:linear-gradient(180deg,#75aa80,#d9a86c); }
.fr-place-guide article:nth-child(2) > span { background:linear-gradient(180deg,#78a8c7,#a69bd0); }
.fr-place-guide article:nth-child(3) > span { background:linear-gradient(180deg,#b49bce,#7fb4ad); }
.fr-place-guide h4 { margin:0 0 7px; font:800 16px/1.35 var(--font-body); color:var(--fr-ink); }
.fr-place-guide article p { margin:0; font-size:15px; line-height:1.55; color:var(--fr-ink); }
.fr-place-guide article small { display:block; margin-top:8px; font-size:13px; line-height:1.5; color:var(--fr-muted); }
.fr-place-search-form { display:grid; gap:18px; padding:20px; }
.fr-place-search-form fieldset { min-width:0; margin:0; padding:0; border:0; }
.fr-place-search-form legend { margin-bottom:10px; font-size:15px; font-weight:800; color:var(--fr-ink); }
.fr-place-option-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.fr-place-option-grid label,.fr-place-filter-chips label { position:relative; cursor:pointer; }
.fr-place-option-grid input,.fr-place-filter-chips input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.fr-place-option-grid label > span { display:grid; gap:4px; min-height:82px; padding:13px; border:1px solid var(--fr-line); border-radius:16px; background:var(--fr-surface); transition:border-color .15s,background .15s,transform .15s; }
.fr-place-option-grid strong { font-size:14px; line-height:1.35; color:var(--fr-ink); }
.fr-place-option-grid small { color:var(--fr-muted); font-size:13px; line-height:1.45; }
.fr-place-option-grid input:checked + span,.fr-place-filter-chips input:checked + span { border-color:var(--fr-green); background:color-mix(in srgb,var(--fr-green) 11%,var(--fr-surface)); box-shadow:inset 0 0 0 1px var(--fr-green); }
.fr-place-option-grid input:focus-visible + span,.fr-place-filter-chips input:focus-visible + span { outline:3px solid color-mix(in srgb,var(--fr-green) 35%,transparent); outline-offset:2px; }
.fr-place-filter-chips { display:flex; flex-wrap:wrap; gap:8px; }
.fr-place-filter-chips label > span { display:flex; align-items:center; min-height:44px; padding:9px 14px; border:1px solid var(--fr-line); border-radius:999px; color:var(--fr-ink); background:var(--fr-surface); font-size:14px; font-weight:700; }
.fr-place-more { margin-top:10px; border-top:1px solid var(--fr-line); }
.fr-place-more summary { display:flex; align-items:center; min-height:44px; color:var(--fr-green); font-size:14px; font-weight:800; cursor:pointer; }
.fr-place-more .fr-label { display:grid; gap:7px; margin-top:12px; font-size:14px; }
.fr-place-region-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.fr-place-region-grid .fr-label { display:grid; gap:7px; font-size:14px; font-weight:700; }
.fr-place-location-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.fr-place-search-form .fr-hint { margin:0; font-size:14px; line-height:1.55; }
.fr-place-search-form .fr-hint a { color:var(--fr-green); font-weight:800; text-underline-offset:3px; }
.fr-place-results { display:grid; gap:12px; }
.fr-place-results > ul { display:grid; gap:10px; margin:0; padding:0; list-style:none; }
.fr-place-result { display:grid; grid-template-columns:112px 1fr; gap:15px; padding:14px; }
.fr-place-result > img,.fr-place-image-placeholder { width:112px; height:112px; border-radius:16px; object-fit:cover; background:radial-gradient(circle at 36% 34%,#fff 0 9%,transparent 10%),linear-gradient(145deg,#dcebd8,#c6dce9 58%,#efe0c8); }
.fr-place-image-placeholder { position:relative; }
.fr-place-image-placeholder::after { content:""; position:absolute; inset:33%; border:3px solid color-mix(in srgb,var(--fr-green) 70%,transparent); border-radius:50% 50% 50% 0; transform:rotate(-45deg); }
.fr-place-result h3 { margin:2px 0 5px; font-size:17px; line-height:1.35; color:var(--fr-ink); }
.fr-place-result p { margin:3px 0; font-size:14px; line-height:1.5; color:var(--fr-muted); }
.fr-place-facilities { display:flex; flex-wrap:wrap; gap:5px; margin:10px 0; }
.fr-place-facility { display:inline-flex; gap:4px; padding:6px 9px; border-radius:9px; background:var(--fr-soft); color:var(--fr-muted); font-size:14px; line-height:1.35; }
.fr-place-facility-yes { color:var(--fr-green); background:color-mix(in srgb,var(--fr-green) 10%,var(--fr-surface)); }
.fr-place-facility-no { color:var(--fr-muted); text-decoration:none; }
.fr-place-facility-unknown { border:1px dashed var(--fr-line); background:transparent; }
.fr-place-empty { padding:22px; }
.fr-place-empty strong { display:block; margin-bottom:6px; font-size:17px; }
.fr-place-empty p { margin:0; color:var(--fr-muted); font-size:15px; line-height:1.55; }
.fr-place-detail { display:grid; gap:12px; font-size:15px; line-height:1.6; }
.fr-place-detail p { margin:0; }
.fr-place-detail dl { display:grid; gap:0; margin:0; border:1px solid var(--fr-line); border-radius:16px; overflow:hidden; }
.fr-place-detail dl > div { display:grid; grid-template-columns:90px 1fr; gap:12px; padding:12px 14px; border-bottom:1px solid var(--fr-line); }
.fr-place-detail dl > div:last-child { border-bottom:0; }
.fr-place-detail dt { font-weight:800; }
.fr-place-detail dd { margin:0; color:var(--fr-muted); }
.fr-location-consent { display:grid; gap:14px; font-size:15px; line-height:1.6; }
.fr-location-consent p,.fr-location-consent ul { margin:0; }
.fr-location-consent ul { padding-left:20px; color:var(--fr-muted); }
.fr-location-consent a { color:var(--fr-green); font-weight:800; text-underline-offset:3px; }
.fr-place-settings summary { display:flex; min-height:44px; align-items:center; color:var(--fr-ink); font-size:16px; font-weight:800; cursor:pointer; }
.fr-place-settings > p { margin:10px 0 0; color:var(--fr-muted); font-size:14px; line-height:1.6; }
.fr-place-settings-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.fr-place-settings-actions .fr-mini-btn { min-height:44px; }

@media (max-width:560px) {
  .fr-place-guide > div:last-child,.fr-place-option-grid { grid-template-columns:1fr; }
  .fr-place-option-grid label > span { min-height:0; }
}
@media (max-width:390px) {
  .fr-place-region-grid,.fr-place-location-actions { grid-template-columns:1fr; }
  .fr-place-result { grid-template-columns:88px 1fr; gap:12px; }
  .fr-place-result > img,.fr-place-image-placeholder { width:88px; height:88px; }
}
@media (prefers-reduced-motion: reduce) {
  .fr-place-option-grid label > span { transition:none; }
}

/* =====================================================================
   아가들의 우정 v4 — 키우리 본체와 같은 형태 위에 사주 행성 세계관을 얹는다.
   ===================================================================== */
.friendship-page,
.fr-app-screen {
  color: var(--fr-ink);
  font-family: var(--font-body, "Pretendard"), "Apple SD Gothic Neo", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

.friendship-page h1,
.friendship-page h2,
.friendship-page h3,
.friendship-page h4,
.fr-app-screen h1,
.fr-app-screen h2,
.fr-app-screen h3,
.fr-app-screen h4 {
  font-family: var(--font-display, "Quicksand", "Pretendard"), system-ui, sans-serif;
  letter-spacing: -0.025em;
}

.fr-card {
  padding: 20px;
  border-radius: 22px;
  background: var(--fr-card);
  box-shadow: var(--fr-shadow);
}

.fr-card + .fr-card { margin-top: 0; }

.fr-app-screen {
  width: min(100%, 600px);
  padding: 0 max(16px, env(safe-area-inset-left, 0px)) calc(124px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-right, 0px));
  background: var(--fr-bg);
  scroll-padding-bottom: calc(124px + env(safe-area-inset-bottom, 0px));
}

.fr-app-shell { gap: 20px; }

.fr-app-heading {
  position: sticky;
  z-index: 80;
  top: 0;
  min-height: 72px;
  margin: 0 -16px;
  padding: max(12px, env(safe-area-inset-top, 0px)) 20px 12px;
  gap: 10px;
  border-bottom: 1px solid var(--fr-line);
  background: color-mix(in srgb, var(--fr-card) 94%, transparent);
  backdrop-filter: saturate(150%) blur(16px);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
}

.fr-app-heading > div:nth-child(2) { min-width: 0; flex: 1; }
.fr-app-heading h2 { font-size: 18px; font-weight: 800; line-height: 1.25; }
.fr-app-heading p { margin-top: 5px; font-size: 14px; line-height: 1.45; }

.fr-icon-btn,
.fr-guide-help {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border-color: var(--fr-line);
  color: var(--fr-muted);
  background: var(--fr-card);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(31, 35, 43, 0.08));
}

.fr-method-note {
  display: flex;
  min-height: 44px;
  margin: -8px 0 0;
  padding: 10px 12px;
  align-items: flex-start;
  gap: 8px;
  border-radius: 12px;
  color: var(--fr-muted);
  background: color-mix(in srgb, var(--fr-sky) 10%, var(--fr-card));
  font-size: 14px;
  line-height: 1.55;
}

.fr-method-note strong { flex: 0 0 auto; color: var(--fr-green-dark); font-weight: 750; }
.fr-method-note span { min-width: 0; }

.fr-loading-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.fr-loading-tabs span {
  display: grid;
  min-height: 44px;
  padding: 9px 12px;
  border-radius: 999px;
  place-items: center;
  color: var(--fr-muted);
  font-size: 13px;
  font-weight: 700;
}

.fr-loading-tabs .is-active { color: var(--fr-card); background: var(--fr-ink); }

.fr-loading-card {
  display: flex;
  min-height: 78px;
  padding: 12px 14px;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--fr-line);
  border-radius: 16px;
  color: var(--fr-green);
  background: var(--fr-card);
}

.fr-loading-card > div { display: grid; min-width: 0; }
.fr-loading-card strong { color: var(--fr-ink); font-size: 14px; }
.fr-loading-card span { color: var(--fr-muted); font-size: 12px; }
.fr-skeleton-hero { min-height: 220px; }

.fr-section-tabs,
.fr-mode-tabs {
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  border-color: var(--fr-line);
  background: var(--fr-bg-deep);
}

.fr-section-tabs button,
.fr-mode-tabs button {
  min-height: 44px;
  padding: 9px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}

.fr-section-tabs button[aria-pressed="true"],
.fr-mode-tabs button[aria-pressed="true"] {
  color: var(--fr-card);
  background: var(--fr-ink);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(31, 35, 43, 0.08));
}

.fr-eyebrow {
  margin-bottom: 7px;
  color: var(--fr-green-dark);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 750;
  letter-spacing: 0.025em;
}

.fr-btn {
  min-height: 48px;
  padding: 12px 16px;
  border-radius: 14px;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 750;
  box-shadow: none;
}

.fr-btn:active,
.fr-mini-btn:active,
.fr-icon-btn:active { transform: scale(0.97); }

.fr-mini-btn {
  min-height: 44px;
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
}

.fr-hint,
.fr-disclaimer,
.fr-map-caption,
.fr-map-status { font-size: 14px; line-height: 1.6; }

/* 생성형 아트는 SVG 대체 표식 위에 겹쳐 로딩 실패에도 의미를 잃지 않는다. */
.fr-art-stack {
  position: relative;
  display: inline-grid;
  width: var(--fr-art-size, 64px);
  height: var(--fr-art-size, 64px);
  flex: 0 0 auto;
  place-items: center;
  isolation: isolate;
}

.fr-art-stack > * { grid-area: 1 / 1; }
.fr-art-stack > .fr-symbol { width: 72%; height: 72%; opacity: 0.24; }
.fr-generated-art { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; }

/* 240가지 개인 대표명은 10개 바탕 행성 위에 안전한 결정론 레이어를 조합한다. */
.fr-personal-identity-art {
  --fr-identity-accent: #7eaa73;
  --fr-identity-season: #a9cf9f;
  position: relative;
  display: inline-grid;
  width: var(--fr-art-size, 148px);
  height: var(--fr-art-size, 148px);
  flex: 0 0 auto;
  place-items: center;
  isolation: isolate;
}

.fr-personal-identity-art[data-fr-identity-accent="wood"] { --fr-identity-accent: #6fa66f; }
.fr-personal-identity-art[data-fr-identity-accent="fire"] { --fr-identity-accent: #e98567; }
.fr-personal-identity-art[data-fr-identity-accent="earth"] { --fr-identity-accent: #c99651; }
.fr-personal-identity-art[data-fr-identity-accent="metal"] { --fr-identity-accent: #8c8eaa; }
.fr-personal-identity-art[data-fr-identity-accent="water"] { --fr-identity-accent: #68a8c1; }
.fr-personal-identity-art--spring { --fr-identity-season: #9fcf98; }
.fr-personal-identity-art--summer { --fr-identity-season: #efb65d; }
.fr-personal-identity-art--autumn { --fr-identity-season: #e8936e; }
.fr-personal-identity-art--winter { --fr-identity-season: #83b8cf; }

.fr-identity-aura,
.fr-identity-orbit,
.fr-identity-core { grid-area: 1 / 1; }

.fr-identity-aura {
  width: 88%;
  height: 88%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, color-mix(in srgb, var(--fr-identity-season) 48%, transparent) 0 4%, transparent 5%),
    radial-gradient(circle at 72% 70%, color-mix(in srgb, var(--fr-identity-accent) 38%, transparent) 0 5%, transparent 6%),
    radial-gradient(circle, color-mix(in srgb, var(--fr-identity-season) 28%, transparent), transparent 67%);
  filter: blur(0.2px);
  opacity: 0.9;
}

.fr-identity-core { position: relative; z-index: 3; display: grid; place-items: center; }
.fr-identity-core .fr-art-stack { width: calc(var(--fr-art-size) * 0.78); height: calc(var(--fr-art-size) * 0.78); }

.fr-identity-orbit {
  position: relative;
  z-index: 2;
  width: 91%;
  height: 62%;
  border: 1.5px solid color-mix(in srgb, var(--fr-identity-accent) 66%, transparent);
  border-radius: 50%;
  transform: rotate(-17deg);
  animation: fr-identity-orbit 12s linear infinite;
}

.fr-identity-orbit-secondary {
  width: 69%;
  height: 91%;
  border-color: color-mix(in srgb, var(--fr-identity-season) 62%, transparent);
  transform: rotate(31deg);
  animation-duration: 17s;
  animation-direction: reverse;
}

.fr-identity-orbit i {
  position: absolute;
  width: 6.5%;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--fr-card) 78%, transparent);
  border-radius: 50%;
  background: var(--fr-identity-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fr-identity-accent) 16%, transparent), 0 4px 9px rgba(31, 35, 43, 0.12);
}

.fr-identity-orbit i:nth-child(1) { top: 1%; left: 23%; }
.fr-identity-orbit i:nth-child(2) { right: 4%; bottom: 18%; }
.fr-identity-orbit i:nth-child(3) { bottom: 2%; left: 19%; }
.fr-personal-identity-art--gather .fr-identity-orbit-primary { width: 78%; height: 55%; }
.fr-personal-identity-art--gather .fr-identity-orbit-secondary { width: 60%; height: 78%; }
.fr-personal-identity-art--spread .fr-identity-aura { transform: scale(1.08); }
.fr-personal-identity-art--root .fr-identity-orbit { border-style: solid; }
.fr-personal-identity-art--flow .fr-identity-orbit { border-style: dashed; }
.fr-personal-identity-art--flow .fr-identity-orbit-secondary { transform: rotate(52deg); }
.fr-personal-identity-art--expand .fr-identity-orbit { border-style: dotted; border-width: 2px; }
.fr-personal-identity-art--expand .fr-identity-orbit-primary { transform: rotate(-31deg) scaleX(1.06); }

@keyframes fr-identity-orbit {
  to { rotate: 1turn; }
}

/* 사주 우정지도 — 유일한 대표 장면 */
.fr-map-hero {
  position: relative;
  min-width: 0;
  padding: 20px;
  overflow: visible;
  border: 1px solid var(--fr-line);
  border-radius: 22px;
  background: var(--fr-card);
  box-shadow: var(--fr-shadow);
}

.fr-map-hero-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.fr-map-hero-head > div { min-width: 0; }
.fr-map-hero-head h3 { margin: 0; font-size: 18px; font-weight: 800; line-height: 1.35; }
.fr-map-hero-head p:last-child { margin: 6px 0 0; color: var(--fr-muted); font-size: 15px; line-height: 1.55; }
.fr-map-hero-head > span { flex: 0 0 auto; padding: 5px 9px; border-radius: 999px; color: var(--fr-green-dark); background: color-mix(in srgb, var(--fr-moss) 18%, transparent); font-size: 13px; font-weight: 700; }

.fr-map-tools {
  min-height: 44px;
  margin: 14px 0 10px;
  gap: 10px;
}

.fr-map-gesture-hint { color: var(--fr-muted); font-size: 12px; }
.fr-map-tool-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.fr-map-search input { height: 44px; padding-left: 36px; border-radius: 12px; font-size: 13px; }
.fr-map-zoom { border-radius: 12px; }
.fr-map-zoom button { min-width: 44px; height: 44px; font-size: 18px; }
.fr-map-zoom .fr-map-reset { min-width: 52px; font-size: 12px; }
.fr-map-motion { min-height: 44px; padding: 8px 11px; border: 1px solid var(--fr-line); border-radius: 12px; color: var(--fr-muted); background: var(--fr-card); font: inherit; font-size: 12px; font-weight: 700; }

.fr-map-stage {
  height: clamp(320px, 92vw, 460px);
  margin: 0;
  border-radius: 20px;
  border-color: color-mix(in srgb, var(--fr-green) 16%, transparent);
  touch-action: pan-y pinch-zoom;
  background:
    radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--fr-card) 92%, transparent) 0 8%, transparent 32%),
    radial-gradient(circle at 16% 12%, color-mix(in srgb, var(--fr-peach) 19%, transparent), transparent 31%),
    radial-gradient(circle at 84% 18%, color-mix(in srgb, var(--fr-lilac) 20%, transparent), transparent 32%),
    radial-gradient(circle at 75% 88%, color-mix(in srgb, var(--fr-sky) 18%, transparent), transparent 34%),
    linear-gradient(155deg, color-mix(in srgb, var(--fr-card) 88%, #f4e7cb), color-mix(in srgb, var(--fr-bg) 90%, var(--fr-moss)) 46%, color-mix(in srgb, var(--fr-bg) 88%, var(--fr-lilac)));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--fr-card) 90%, transparent);
}

.fr-map-center {
  width: 98px;
  height: 98px;
  padding: 8px 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  color: var(--fr-ink);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 12px 28px rgba(49, 89, 67, 0.16), 0 0 0 8px rgba(145, 170, 118, 0.1);
}

.fr-center-star { display: grid; height: 46px; place-items: center; color: var(--fr-green); text-shadow: none; }
.fr-map-center strong { max-width: 76px; font-size: 12px; }
.fr-map-center small { margin-top: -3px; color: var(--fr-muted); font-size: 12px; }

.fr-spatial-star {
  width: 62px;
  height: 62px;
  border: 0;
  color: var(--fr-star);
  background: transparent;
  box-shadow: none;
}

.fr-spatial-star::after { opacity: 0.45; }
.fr-spatial-star .fr-art-stack { filter: drop-shadow(0 8px 9px rgba(49, 43, 36, 0.14)); }
.fr-spatial-star .fr-symbol { opacity: 0.15; }
.fr-spatial-star i { inset: -1px; opacity: 0.4; }
.fr-type-star { width: 54px; height: 54px; border-radius: 0; background: transparent; box-shadow: none; }

.fr-map-caption { max-width: 420px; margin: 10px auto 0; color: var(--fr-muted); text-align: center; }
.fr-map-caption span { max-width: none; }
.fr-map-status { min-height: 19px; margin: 9px 0 0; }
.fr-map-primary-actions { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 9px; margin-top: 16px; }

/* 친구 상태는 내용 1개와 명확한 다음 행동만 보인다. */
.fr-tabs { gap: 4px; padding: 4px; border: 1px solid var(--fr-line); border-radius: 999px; background: var(--fr-bg-deep); }
.fr-tab { min-height: 44px; flex: 1 0 auto; padding: 9px 11px; border: 0; border-radius: 999px; background: transparent; font-size: 12px; font-weight: 700; }
.fr-tab[aria-selected="true"] { color: var(--fr-card); background: var(--fr-ink); }
.fr-panel { padding: 20px; border-radius: 22px; box-shadow: none; }
.fr-section-head { margin-bottom: 14px; }
.fr-section-head h3 { font-size: 16px; font-weight: 750; }
.fr-section-head span { font-size: 12px; }

.fr-list-card {
  display: grid;
  grid-template-columns: auto minmax(88px, 1fr) auto auto;
  gap: 10px;
  min-height: 72px;
  padding: 12px;
  overflow: visible;
  border-radius: 14px;
  background: var(--fr-card);
}

.fr-list-main strong { font-size: 14px; }
.fr-list-main span { font-size: 12px; }
.fr-list-card > .fr-mini-btn-primary { white-space: nowrap; }
.fr-friend-manage { position: relative; }
.fr-friend-manage > summary { display: grid; width: 44px; height: 44px; border: 1px solid var(--fr-line); border-radius: 12px; place-items: center; color: var(--fr-muted); background: var(--fr-card); cursor: pointer; font-weight: 800; letter-spacing: 0.04em; list-style: none; }
.fr-friend-manage > summary::-webkit-details-marker { display: none; }
.fr-friend-manage-menu { position: absolute; z-index: 90; top: 49px; right: 0; display: grid; width: min(230px, calc(100vw - 64px)); padding: 7px; border: 1px solid var(--fr-line); border-radius: 14px; background: var(--fr-card); box-shadow: var(--shadow-md, 0 10px 28px rgba(31, 35, 43, 0.16)); }
.fr-friend-manage-menu button { min-height: 44px; padding: 10px 12px; border: 0; border-radius: 9px; color: var(--fr-ink); background: transparent; font: inherit; font-size: 13px; text-align: left; }
.fr-friend-manage-menu button:active { background: var(--fr-bg-deep); }

.fr-map-handoff,
.fr-evidence {
  padding: 18px 20px;
  border: 1px solid var(--fr-line);
  border-radius: 22px;
  background: var(--fr-card);
  box-shadow: none;
}
.fr-map-handoff summary,
.fr-evidence summary { display: flex; min-height: 44px; align-items: center; color: var(--fr-ink); font-size: 16px; font-weight: 700; cursor: pointer; }
.fr-group-card { padding: 20px; border: 1px solid var(--fr-line); border-radius: 22px; background: color-mix(in srgb, var(--fr-lilac) 9%, var(--fr-card)); }
.fr-group-card h3 { margin: 0 0 8px; font-size: 18px; }
.fr-group-card p { margin: 0; }
.fr-group-card .fr-hint { margin-top: 12px; }

/* 개인 사주별 */
.fr-seed-hero {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  gap: 18px;
  padding: 22px;
  align-items: center;
  border-radius: 22px;
  border-color: var(--fr-line);
  background:
    radial-gradient(circle at 86% 14%, color-mix(in srgb, var(--fr-gold) 18%, transparent), transparent 29%),
    radial-gradient(circle at 12% 92%, color-mix(in srgb, var(--fr-moss) 18%, transparent), transparent 40%),
    linear-gradient(145deg, color-mix(in srgb, var(--fr-card) 96%, #fff4cf), color-mix(in srgb, var(--fr-card) 90%, var(--fr-moss)));
  box-shadow: var(--fr-shadow);
}

.fr-seed-symbol { width: 148px; height: 148px; margin: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.fr-seed-copy { position: relative; z-index: 1; min-width: 0; }
.fr-seed-hero :is(h1, h3) { margin: 0 0 5px; font-size: 26px; }
.fr-identity-title > span,
.fr-identity-title > strong { display: block; }
.fr-identity-title > span { color: var(--fr-muted); font-size: 16px; font-weight: 700; line-height: 1.35; }
.fr-identity-title > strong { color: var(--fr-ink); font: inherit; line-height: 1.18; }
.fr-seed-hero > .fr-seed-copy > strong { display: block; color: var(--fr-green-dark); font-size: 16px; line-height: 1.4; }
.fr-seed-hero > .fr-seed-copy > p:not(.fr-eyebrow) { margin: 8px 0 12px; color: var(--fr-muted); font-size: 15px; line-height: 1.55; }
.fr-seed-hero > .fr-seed-copy > span { color: var(--fr-muted); font-size: 14px; line-height: 1.5; }

.fr-personal-cards { grid-template-columns: 1fr; gap: 10px; }
.fr-insight-card { position: relative; min-height: 0; padding: 18px 18px 18px 48px; border: 1px solid var(--fr-line); border-radius: 16px; background: var(--fr-card); }
.fr-insight-index { position: absolute; top: 18px; left: 16px; color: var(--fr-green); font-size: 12px; font-weight: 800; }
.fr-insight-card > .fr-eyebrow { font-size: 15px; line-height: 1.4; }
.fr-insight-card > p:not(.fr-eyebrow) { margin: 0 0 12px; color: var(--fr-ink); font-size: 15px; line-height: 1.6; }
.fr-guardian-tip { padding-top: 11px; }
.fr-guardian-tip strong { font-size: 14px; line-height: 1.45; }
.fr-guardian-tip span { font-size: 14px; line-height: 1.5; }

.fr-flow-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fr-flow-card { min-width: 0; min-height: 170px; padding: 18px; border: 1px solid var(--fr-line); border-radius: 16px; background: var(--fr-card); }
.fr-flow-card-today { background: color-mix(in srgb, #fff3bd 34%, var(--fr-card)); }
.fr-flow-card-year { background: color-mix(in srgb, var(--fr-sky) 10%, var(--fr-card)); }
.fr-flow-card h3 { margin: 0 0 8px; font-size: 18px; line-height: 1.35; }
.fr-flow-card > p:not(.fr-eyebrow) { margin: 0; color: var(--fr-muted); font-size: 15px; line-height: 1.55; }
.fr-flow-card > strong { display: block; margin-top: 12px; color: var(--fr-green-dark); font-size: 14px; line-height: 1.5; }

.fr-deep-dive { overflow: hidden; border: 1px solid var(--fr-line); border-radius: 18px; background: var(--fr-card); }
.fr-deep-dive > summary { display: flex; min-height: 72px; padding: 14px 18px; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; }
.fr-deep-dive > summary::-webkit-details-marker { display: none; }
.fr-deep-dive > summary span { display: grid; }
.fr-deep-dive > summary small { color: var(--fr-muted); font-size: 14px; }
.fr-deep-dive > summary strong { font-size: 17px; }
.fr-deep-dive > summary b { color: var(--fr-green); font-size: 22px; transition: transform 180ms ease; }
.fr-deep-dive[open] > summary b { transform: rotate(45deg); }
.fr-deep-dive-body { display: grid; gap: 16px; padding: 0 16px 16px; }
.fr-traditional-gate { padding: 18px; border-radius: 14px; background: var(--fr-bg-deep); }
.fr-traditional-gate h3 { margin: 0 0 7px; font-size: 16px; }
.fr-traditional-gate p { margin: 0 0 14px; color: var(--fr-muted); font-size: 15px; line-height: 1.55; }

.fr-theme-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
.fr-theme-card { min-height: 142px; padding: 16px; border: 1px solid var(--fr-line); border-radius: 14px; background: var(--fr-card); box-shadow: none; }
.fr-theme-card strong { font-size: 16px; line-height: 1.4; }
.fr-theme-card span { font-size: 14px; line-height: 1.55; }
.fr-personal-empty { padding: 32px 22px; border: 1px solid var(--fr-line); border-radius: 22px; background: var(--fr-card); }
.fr-personal-empty .fr-art-stack { margin: 0 auto 12px; }
.fr-personal-empty h3 { margin: 0 0 7px; font-size: 19px; }
.fr-personal-empty p { margin: 0 auto 16px; max-width: 360px; color: var(--fr-muted); }
.fr-privacy-note { margin: 0; padding: 14px 16px 20px; border-radius: 14px; color: var(--fr-muted); background: var(--fr-bg-deep); font-size: 14px; line-height: 1.6; text-align: left; }

/* 관계 상세 — 직접 등록·초대·연결 모두 같은 정보 위계 */
.fr-relationship-detail { display: grid; gap: 18px; }
.fr-relationship-hero { padding: 18px; border-radius: 18px; background: var(--fr-bg-deep); text-align: center; }
.fr-relationship-hero h3 { margin: 8px 0 4px; font-size: 20px; }
.fr-relationship-hero > p:last-child { margin: 0; color: var(--fr-muted); font-size: 15px; line-height: 1.55; }
.fr-relationship-pair { display: flex; min-height: 60px; align-items: center; justify-content: center; gap: 8px; }
.fr-relationship-star { width: 38px; height: 38px; border-radius: 50%; background: color-mix(in srgb, var(--fr-sky) 28%, var(--fr-card)); box-shadow: 0 6px 12px rgba(31, 35, 43, 0.09); }
.fr-relationship-star-friend { background: color-mix(in srgb, var(--fr-peach) 30%, var(--fr-card)); }
.fr-relationship-link { width: 52px; height: 1px; background: linear-gradient(90deg, var(--fr-sky), var(--fr-peach)); }
.fr-relationship-result { text-align: center; }
.fr-relationship-result > h3 { margin: 0 0 5px; font-size: 24px; }
.fr-relationship-result > p:not(.fr-eyebrow) { margin: 0 auto; max-width: 390px; color: var(--fr-muted); }
.fr-relationship-sign { display: grid; min-height: 154px; place-items: center; }
.fr-relationship-axes,
.fr-relationship-play { margin-top: 20px; padding: 18px; border: 1px solid var(--fr-line); border-radius: 16px; text-align: left; }
.fr-relationship-axes h4,
.fr-relationship-play h4 { margin: 0 0 14px; font-size: 16px; }
.fr-relationship-axes ul,
.fr-relationship-tips { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.fr-relationship-axis-head { display: flex; justify-content: space-between; font-size: 15px; }
.fr-relationship-axis > p { margin: 5px 0 0; color: var(--fr-muted); font-size: 14px; line-height: 1.5; }
.fr-relationship-meter { height: 8px; margin-top: 6px; overflow: hidden; border-radius: 999px; background: var(--fr-bg-deep); }
.fr-relationship-meter span { display: block; width: var(--fr-score); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--fr-sky), var(--fr-green)); }
.fr-relationship-tips li { padding: 12px; border-radius: 12px; background: color-mix(in srgb, var(--fr-moss) 12%, var(--fr-card)); }
.fr-relationship-play-cards { display: grid; gap: 9px; margin-top: 12px; }
.fr-relationship-play-cards article { padding: 13px; border: 1px solid var(--fr-line); border-radius: 12px; }
.fr-relationship-play-cards p { margin: 4px 0; color: var(--fr-muted); font-size: 14px; line-height: 1.5; }
.fr-relationship-evidence,
.fr-relationship-private { margin-top: 16px; padding: 14px 16px; border: 1px solid var(--fr-line); border-radius: 14px; }
.fr-relationship-evidence summary,
.fr-relationship-private summary { display: flex; min-height: 44px; align-items: center; cursor: pointer; font-weight: 700; }
.fr-relationship-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.fr-relationship-actions > p { grid-column: 1 / -1; margin: 0; color: var(--fr-muted); font-size: 14px; line-height: 1.5; }
.fr-relationship-pending { padding: 18px; border-radius: 16px; background: var(--fr-bg-deep); text-align: center; }
.fr-relationship-pending p { margin: 5px 0 0; color: var(--fr-muted); }

/* 첫 방문 안내 — 실제 화면 위에서 기능을 하나씩 비추는 코치마크 */
.fr-coachmark {
  --fr-coach-safe-top: env(safe-area-inset-top, 0px);
  --fr-coach-safe-right: env(safe-area-inset-right, 0px);
  --fr-coach-safe-bottom: env(safe-area-inset-bottom, 0px);
  --fr-coach-safe-left: env(safe-area-inset-left, 0px);
  position: fixed;
  z-index: 12700;
  inset: 0;
  overflow: hidden;
  color: var(--fr-ink);
  font-family: var(--font-body, "Pretendard Variable", Pretendard, system-ui, sans-serif);
  touch-action: none;
}

.fr-coachmark-open { overflow: hidden; }

.fr-coachmark-transition-shield {
  position: fixed;
  z-index: 12750;
  inset: 0;
  background: transparent;
  pointer-events: auto;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

.fr-coachmark-highlight,
.fr-coachmark-hitbox,
.fr-coachmark-popover {
  position: fixed;
}

.fr-coachmark-highlight {
  z-index: 1;
  min-width: 44px;
  min-height: 44px;
  border: 2px solid rgba(255, 255, 255, 0.98);
  border-radius: 16px;
  pointer-events: none;
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--fr-moss) 72%, transparent),
    0 0 0 9999px rgba(20, 27, 24, 0.66);
  transition: top 160ms ease, left 160ms ease, width 160ms ease, height 160ms ease;
}

.fr-coachmark-hitbox {
  z-index: 2;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.fr-coachmark-popover {
  z-index: 3;
  display: grid;
  max-height: min(46dvh, 360px);
  padding: 17px;
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--fr-line) 82%, transparent);
  border-radius: 20px;
  color: var(--fr-ink);
  background: var(--fr-card);
  box-shadow: 0 18px 50px rgba(20, 27, 24, 0.3);
  outline: none;
}

.fr-coachmark-popover > header {
  display: flex;
  min-height: 44px;
  margin: -8px -5px 0;
  align-items: center;
  justify-content: space-between;
}

.fr-coachmark-popover > header span {
  color: var(--fr-green-dark);
  font-size: 12px;
  font-weight: 800;
}

.fr-coachmark-popover > header button {
  min-width: 64px;
  min-height: 44px;
  padding: 8px;
  border: 0;
  color: var(--fr-muted);
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
}

.fr-coachmark-popover h2 {
  margin: 5px 0 7px;
  font-family: var(--font-display, "Plus Jakarta Sans", "Pretendard Variable", Pretendard, sans-serif);
  font-size: 19px;
  line-height: 1.4;
  letter-spacing: -0.035em;
}

.fr-coachmark-popover > p {
  margin: 0;
  color: var(--fr-muted);
  font-size: 14px;
  line-height: 1.62;
}

.fr-coachmark-popover .fr-coachmark-hint {
  margin-top: 9px;
  color: var(--fr-green-dark);
  font-size: 12px;
}

.fr-coachmark-actions {
  display: flex;
  margin-top: 14px;
  gap: 9px;
}

.fr-coachmark-actions .fr-btn {
  width: auto;
  min-height: 48px;
  flex: 1;
}

@media (max-height: 560px), (max-width: 340px) {
  .fr-coachmark-popover {
    top: auto !important;
    right: auto;
    bottom: max(12px, env(safe-area-inset-bottom, 0px));
    left: 50% !important;
    width: min(480px, calc(100vw - 24px)) !important;
    max-height: calc(100dvh - max(24px, env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px)));
    transform: translateX(-50%);
  }

  .fr-coachmark[data-fr-coachmark-anchor="quick-add"] .fr-coachmark-popover,
  .fr-coachmark[data-fr-coachmark-anchor="invite"] .fr-coachmark-popover {
    top: max(12px, env(safe-area-inset-top, 0px)) !important;
    bottom: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fr-coachmark-highlight { transition: none; }
}

@media (forced-colors: active) {
  .fr-coachmark-highlight { border: 3px solid Highlight; box-shadow: 0 0 0 9999px Canvas; }
  .fr-coachmark-popover { border: 2px solid CanvasText; }
}

.fr-chat-sheet { max-height: min(90dvh, 760px); border-radius: 22px 22px 0 0; }
.fr-chat-sheet > header button { width: 44px; height: 44px; }

@media (min-width: 640px) {
  .fr-personal-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fr-insight-card { padding-left: 42px; }
}

@media (max-width: 430px) {
  .fr-seed-hero { grid-template-columns: 1fr; gap: 6px; text-align: center; }
  .fr-seed-symbol { width: 138px; height: 138px; margin: 0 auto; }
  .fr-seed-copy .fr-eyebrow { justify-content: center; }
  .fr-flow-grid,
  .fr-theme-grid { grid-template-columns: 1fr; }
  .fr-flow-card { min-height: 0; }
  .fr-list-card { grid-template-columns: auto minmax(0, 1fr) auto; }
  .fr-list-card > .fr-mini-btn-primary { grid-column: 2 / 3; width: 100%; }
  .fr-list-card > .fr-friend-manage { grid-column: 3; grid-row: 1; }
  .fr-map-primary-actions { grid-template-columns: 1fr; }
  .fr-map-tools { align-items: flex-start; flex-direction: column; }
  .fr-map-search { width: 100%; }
  .fr-map-tool-actions { width: 100%; margin-left: 0; justify-content: space-between; }
  .fr-relationship-actions { grid-template-columns: 1fr; }
  .fr-relationship-actions > p { grid-column: auto; }
}

@media (max-width: 350px) {
  .fr-app-screen { padding-right: 16px; padding-left: 16px; }
  .fr-method-note { display: grid; gap: 2px; }
  .fr-map-hero { padding: 16px; }
  .fr-map-hero-head { flex-wrap: wrap; }
  .fr-map-hero-head > span { margin-left: auto; }
  .fr-map-stage { height: 310px; }
  .fr-section-tabs button { padding-right: 8px; padding-left: 8px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .fr-identity-orbit { animation: none; }
}

/* =====================================================================
   아가들의 우정 v7 — 첫 화면은 한 장면, 나머지는 고정 하단 메뉴로 분리한다.
   ===================================================================== */
.fr-app-screen {
  margin: 0 auto;
  flex-shrink: 0;
  padding-bottom: calc(var(--fr-dock-height, calc(88px + env(safe-area-inset-bottom, 0px))) + 16px);
  scroll-padding-bottom: calc(var(--fr-dock-height, calc(88px + env(safe-area-inset-bottom, 0px))) + 16px);
}

.fr-app-shell { gap: 14px; }
.fr-destination { display: grid; gap: 14px; min-width: 0; }

.fr-bottom-nav {
  position: fixed;
  z-index: 70;
  right: 0;
  bottom: 0;
  left: 50%;
  display: grid;
  width: min(100%, 600px);
  min-height: calc(70px + env(safe-area-inset-bottom, 0px));
  padding: 6px max(6px, env(safe-area-inset-right, 0px)) max(7px, env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-left, 0px));
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--fr-line);
  background: color-mix(in srgb, var(--fr-card) 96%, transparent);
  box-shadow: 0 -10px 30px rgba(49, 43, 36, 0.08);
  transform: translateX(-50%);
  backdrop-filter: saturate(150%) blur(18px);
  -webkit-backdrop-filter: saturate(150%) blur(18px);
}

.fr-bottom-nav button {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 64px;
  padding: 7px 2px 5px;
  align-content: center;
  justify-items: center;
  gap: 2px;
  border: 0;
  border-radius: 16px;
  color: var(--fr-muted);
  background: transparent;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}

.fr-bottom-nav button > span:last-child { max-width: 100%; overflow-wrap: anywhere; text-align: center; }

.fr-bottom-nav button[aria-current="page"] {
  color: var(--fr-green-dark);
  background: color-mix(in srgb, var(--fr-moss) 16%, var(--fr-card));
  font-weight: 850;
}

.fr-bottom-nav-icon { position: relative; display: grid; width: 27px; height: 27px; place-items: center; }
.fr-bottom-nav-icon svg { width: 23px; height: 23px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fr-bottom-nav button[aria-current="page"] .fr-bottom-nav-icon svg { fill: color-mix(in srgb, currentColor 16%, transparent); }
.fr-bottom-nav-icon b { position: absolute; top: -5px; right: -10px; display: grid; min-width: 18px; height: 18px; padding: 0 4px; border: 2px solid var(--fr-card); border-radius: 999px; place-items: center; color: #fff; background: var(--fr-green); font-size: 9px; line-height: 1; }

html.dark .fr-bottom-nav button[aria-current="page"] { color: #bde7c9; background: color-mix(in srgb, var(--fr-moss) 22%, var(--fr-card)); }
html.dark .fr-map-center {
  border-color: color-mix(in srgb, var(--fr-moss) 34%, transparent);
  color: var(--fr-ink);
  background: color-mix(in srgb, var(--fr-card) 94%, transparent);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.26), 0 0 0 8px color-mix(in srgb, var(--fr-moss) 12%, transparent);
}

.fr-personal-glance {
  padding: 18px 20px;
  border: 1px solid var(--fr-line);
  border-radius: 22px;
  background: var(--fr-card);
  box-shadow: var(--fr-shadow);
}

.fr-personal-glance-list { display: grid; gap: 0; }
.fr-personal-glance .fr-section-head h3 { font-size: 18px; line-height: 1.35; }
.fr-personal-glance-list article { display: grid; min-height: 58px; padding: 10px 0; grid-template-columns: 30px minmax(0, 1fr); align-items: start; gap: 8px; border-top: 1px solid var(--fr-line); }
.fr-personal-glance-list article:first-child { border-top: 0; }
.fr-personal-glance-list article > span { padding-top: 2px; color: var(--fr-green); font-size: 12px; font-weight: 850; }
.fr-personal-glance-list article strong { display: block; color: var(--fr-ink); font-size: 16px; line-height: 1.35; }
.fr-personal-glance-list article p { margin: 3px 0 0; color: var(--fr-muted); font-size: 15px; line-height: 1.55; }
.fr-personal-actions { display: grid; grid-template-columns: 1fr; }

.fr-personal-more { padding: 0; overflow: hidden; }
.fr-personal-more > summary { display: flex; min-height: 62px; padding: 12px 18px; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; }
.fr-personal-more > summary::-webkit-details-marker { display: none; }
.fr-personal-more > summary span { display: grid; }
.fr-personal-more > summary small { color: var(--fr-muted); font-size: 14px; }
.fr-personal-more > summary strong { color: var(--fr-ink); font-size: 18px; }
.fr-personal-more > summary b { color: var(--fr-green); font-size: 22px; transition: transform 180ms ease; }
.fr-personal-more[open] > summary b { transform: rotate(45deg); }
.fr-personal-more-body { display: grid; gap: 14px; padding: 0 16px 16px; }

.fr-map-status-link {
  display: flex;
  width: 100%;
  min-height: 64px;
  padding: 12px 16px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--fr-line);
  border-radius: 18px;
  color: var(--fr-ink);
  background: var(--fr-card);
  box-shadow: none;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.fr-map-status-link span { display: grid; gap: 2px; }
.fr-map-status-link small { color: var(--fr-muted); font-size: 14px; }
.fr-map-status-link strong { font-size: 16px; }
.fr-map-status-link b { color: var(--fr-green); font-size: 26px; font-weight: 500; }

.fr-friends-overview > p { margin: 0 0 14px; color: var(--fr-muted); font-size: 13px; line-height: 1.55; }
.fr-list-more { width: 100%; margin-top: 14px; }
.fr-safety-note { padding: 0 18px; box-shadow: none; }
.fr-safety-note > summary { display: flex; min-height: 52px; align-items: center; color: var(--fr-ink); font-size: 14px; font-weight: 750; cursor: pointer; }
.fr-safety-note > p { margin: 0; padding: 0 0 16px; color: var(--fr-muted); font-size: 14px; line-height: 1.6; }

@media (max-width: 430px) {
  .fr-bottom-nav button > span:last-child {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: normal;
    word-break: break-all;
    line-height: 1.05;
    text-align: center;
  }
  .fr-seed-hero {
    grid-template-columns: 104px minmax(0, 1fr);
    grid-template-areas:
      "art eyebrow"
      "art title"
      "art headline"
      "description description"
      "note note";
    column-gap: 12px;
    row-gap: 3px;
    padding: 18px;
    text-align: left;
  }
  .fr-seed-symbol { width: 104px; height: 104px; margin: 0; grid-area: art; align-self: center; }
  .fr-seed-copy { display: contents; }
  .fr-seed-copy .fr-eyebrow { grid-area: eyebrow; margin: 0; align-self: end; }
  .fr-seed-copy :is(h1, h3) { grid-area: title; align-self: center; }
  .fr-seed-copy > strong { grid-area: headline; align-self: start; }
  .fr-seed-copy > p:not(.fr-eyebrow) { grid-area: description; }
  .fr-seed-copy > .fr-saju-origin-note { grid-area: note; }
  .fr-seed-copy .fr-eyebrow { justify-content: flex-start; }
  .fr-seed-hero :is(h1, h3) { margin: 0; font-size: 24px; line-height: 1.2; }
  .fr-seed-symbol > :is(.fr-art-stack, .fr-personal-identity-art) { width: 100%; height: 100%; }
  .fr-seed-symbol > .fr-personal-identity-art .fr-identity-core .fr-art-stack { width: 78%; height: 78%; }
  .fr-seed-hero > .fr-seed-copy > strong { font-size: 16px; line-height: 1.4; }
  .fr-seed-hero > .fr-seed-copy > p:not(.fr-eyebrow) { margin: 8px 0 0; font-size: 15px; line-height: 1.55; }
  .fr-destination-map .fr-map-hero { padding: 16px; }
  .fr-destination-map .fr-map-tools {
    min-height: 44px;
    margin: 10px 0 8px;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
  .fr-destination-map .fr-map-tool-actions { width: auto; min-width: 0; margin-left: auto; flex: 1 1 auto; flex-wrap: wrap; justify-content: flex-end; }
  .fr-map-zoom button { height: auto; min-height: 44px; line-height: 1; }
  .fr-map-center small,
  .fr-spatial-node small { display: none; }
  .fr-map-center strong,
  .fr-spatial-node .fr-map-name { max-width: 100%; overflow: hidden; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
  .fr-destination-map .fr-map-stage { height: clamp(260px, 66vw, 310px); }
  .fr-destination-map .fr-map-caption { margin-top: 8px; font-size: 14px; line-height: 1.5; }
  .fr-destination-map .fr-map-status { margin-top: 5px; }
  .fr-destination-map .fr-map-primary-actions { margin-top: 12px; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .fr-destination-map .fr-map-hero-dense .fr-map-tools { display: grid; grid-template-columns: 1fr; }
  .fr-destination-map .fr-map-hero-dense .fr-map-search { width: 100%; }
  .fr-destination-map .fr-map-hero-dense .fr-map-tool-actions { width: 100%; margin-left: 0; justify-content: space-between; }
}

@media (max-width: 350px) {
  .fr-seed-hero { grid-template-columns: 88px minmax(0, 1fr); padding: 15px; }
  .fr-seed-symbol { width: 88px; height: 88px; }
  .fr-destination-map .fr-map-hero-head { display: flex; padding-right: 0; flex-wrap: wrap; }
  .fr-destination-map .fr-map-hero-head > div { flex: 1 1 160px; }
  .fr-destination-map .fr-map-hero-head > span { position: static; margin: 0 0 0 auto; }
  .fr-destination-map .fr-map-gesture-hint { display: none; }
  .fr-destination-map .fr-map-tool-actions { width: 100%; margin-left: 0; justify-content: space-between; }
  .fr-destination-map .fr-map-stage { height: 220px; }
  .fr-destination-map .fr-map-center { width: 88px; height: 88px; }
  .fr-destination-map .fr-map-caption { line-height: 1.4; }
  .fr-bottom-nav button { font-size: 12.5px; }
  .fr-bottom-nav-icon svg { width: 21px; height: 21px; }
}

@media (max-width: 350px) and (max-height: 680px) {
  .fr-destination-map .fr-map-stage { height: 180px; }
  .fr-destination-map .fr-map-caption { min-height: 18px; margin-top: 4px; font-size: 14px; line-height: 1.45; }
  .fr-destination-map .fr-map-caption-detail { display: none; }
}

@media (max-width: 260px) {
  .fr-seed-hero {
    grid-template-columns: 1fr;
    grid-template-areas: "art" "eyebrow" "title" "headline" "description" "note";
    text-align: center;
  }
  .fr-seed-symbol { margin: 0 auto 4px; }
  .fr-seed-copy .fr-eyebrow { justify-content: center; }
}

@media (prefers-reduced-transparency: reduce) {
  .fr-bottom-nav { background: var(--fr-card); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

@media (forced-colors: active) {
  .fr-bottom-nav { border: 1px solid CanvasText; background: Canvas; box-shadow: none; }
  .fr-bottom-nav button { color: CanvasText; }
  .fr-bottom-nav button[aria-current="page"] { color: HighlightText; background: Highlight; }
}

body.split-on .fr-bottom-nav,
body.split-force.split-on .fr-bottom-nav {
  right: 0;
  left: 50%;
  width: auto;
  max-width: none;
  transform: none;
}

body.split-force.split-on #screen-stars {
  height: 100vh !important;
  max-height: 100vh !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch !important;
}

@media (max-width: 1366px) {
  body.split-force.split-on .fr-bottom-nav { left: 60%; }
}