@import url("/stylesheets/typography.css?v=1");

@font-face {
  font-family: 'SchoolSafeUniverse';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2307-2@1.0/HakgyoansimWoojuR.woff2') format('woff2');
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: 'Binggre';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/Binggrae.woff') format('woff');
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: 'Binggre';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2110@1.0/Binggrae-Bold.woff2') format('woff2');
  font-display: swap;
  font-style: normal;
  font-weight: 700;
}

@font-face {
  font-family: 'Pretendard';
  src: url('/fonts/Pretendard-Regular.woff2') format('woff2');
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}
@font-face {
  font-family: 'Pretendard';
  src: url('/fonts/Pretendard-SemiBold.woff2') format('woff2');
  font-display: swap;
  font-style: normal;
  font-weight: 600;
}
@font-face {
  font-family: 'Pretendard';
  src: url('/fonts/Pretendard-Bold.woff2') format('woff2');
  font-display: swap;
  font-style: normal;
  font-weight: 700;
}

/* Keep figures level across the app without making semibold labels look heavier than the display face. */
@font-face {
  font-family: 'AppNumerals';
  src: url('/fonts/Pretendard-Regular.woff2') format('woff2');
  font-display: swap;
  font-style: normal;
  font-weight: 400 700;
  unicode-range: U+0025, U+002B-003A;
}

:root {
  --page-content-max: 720px;
  --page-content-width: min(calc(100% - 32px), var(--page-content-max));
  --page-navigation-width: min(calc(100% - 16px), var(--page-content-max));
  --brand-purple: #6a2c8f;
  --surface-white: #fdfbff;
  --element-wood-color: #c5e0bd;
  --element-fire-color: #ff95c6;
  --element-earth-color: #ffd386;
  --element-metal-color: #e5b7ff;
  --element-water-color: #9bc2ff;
  --pillar-wood-surface: #e4ede0;
  --pillar-fire-surface: #ffe2f1;
  --pillar-earth-surface: #ffeddb;
  --pillar-metal-surface: #f0e9ff;
  --pillar-water-surface: #e2eaff;
  --score-color: #825ede;
  font-family: 'AppNumerals', 'SchoolSafeUniverse', 'Pretendard', system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: .02em;
  color: #191f28;
  background-color: #f1e4fc;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

*, *::before, *::after { letter-spacing: .02em !important; }
* { box-sizing: border-box; }
h1, h2, h3, h4, h5, h6, strong, b, th { font-weight: 600; }
html { min-height: 100vh; min-height: 100svh; background-color: #f1e4fc; }
body { min-width: 320px; min-height: 100vh; min-height: 100svh; margin: 0; background-color: #f1e4fc; }
button, input, select, textarea { font: inherit; }
a { color: inherit; }
[data-voice-surface] { min-width: 0; overflow-wrap: anywhere; }

/* Shared status toasts */
.app-toast-region {
  position: fixed;
  z-index: 160;
  top: calc(16px + env(safe-area-inset-top, 0px));
  left: 50%;
  display: grid;
  width: min(calc(100% - 28px), 680px);
  max-height: calc(100svh - 32px - env(safe-area-inset-top, 0px));
  gap: 10px;
  transform: translateX(-50%);
  pointer-events: none;
}
body:has(.app-header) .app-toast-region {
  top: calc(82px + env(safe-area-inset-top, 0px));
  max-height: calc(100svh - 98px - env(safe-area-inset-top, 0px));
}
.app-toast {
  --app-toast-frame: url("/images/pixel_frame_toast_error.svg?v=1");
  --app-toast-accent: #a53d69;
  --app-toast-copy: #6f4057;
  --app-toast-heading: #9d3d66;
  --app-toast-spark: #efc4d6;
  --app-toast-spark-soft: #f7dce7;
  --app-toast-spark-deep: #e8b1c8;
  --app-toast-icon-surface: #f3d4e1;
  --app-toast-icon-highlight: #fff7fb;
  --app-toast-icon-shadow: #dfa3bc;
  --app-toast-icon-depth: #c45b87;
  --app-toast-action-border: #c57698;
  --app-toast-action-surface: #fff3f8;
  --app-toast-action-shadow: #e6b4c9;
  --app-toast-action-copy: #91405f;
  --app-toast-close-surface: #f7e5ed;
  --app-toast-close-hover: #f1d5e1;
  --app-toast-close-shadow: #dca3ba;
  --app-toast-close-depth: #bd5a82;
  --app-toast-close-copy: #8f3b5e;

  position: relative;
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: 36px minmax(0, 1fr) 30px;
  align-items: start;
  gap: 10px;
  padding: 10px 10px 10px 12px;
  border: 14px solid transparent;
  border-image-source: var(--app-toast-frame);
  border-image-slice: 14 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  background-clip: border-box;
  background-origin: border-box;
  box-shadow: none;
  clip-path: none;
  color: var(--app-toast-copy);
  pointer-events: auto;
  image-rendering: pixelated;
  animation: app-toast-enter 180ms ease-out both;
}
.app-toast--success {
  --app-toast-frame: url("/images/pixel_frame_toast_success.svg?v=1");
  --app-toast-accent: #247049;
  --app-toast-copy: #315f49;
  --app-toast-heading: #247049;
  --app-toast-spark: #b9dfcc;
  --app-toast-spark-soft: #d9eee3;
  --app-toast-spark-deep: #a6d2bb;
  --app-toast-icon-surface: #d9eee3;
  --app-toast-icon-highlight: #f7fffa;
  --app-toast-icon-shadow: #a9d8c1;
  --app-toast-icon-depth: #4f9d79;
  --app-toast-action-border: #70ac8e;
  --app-toast-action-surface: #eff9f4;
  --app-toast-action-shadow: #b8dec9;
  --app-toast-action-copy: #286849;
  --app-toast-close-surface: #e2f2e9;
  --app-toast-close-hover: #d2eadc;
  --app-toast-close-shadow: #a9d8c1;
  --app-toast-close-depth: #4f9d79;
  --app-toast-close-copy: #286849;
}
.app-toast::after {
  position: absolute;
  top: 8px;
  right: 51px;
  width: 4px;
  height: 4px;
  background: var(--app-toast-spark);
  box-shadow:
    7px 5px 0 var(--app-toast-spark-soft),
    13px -1px 0 var(--app-toast-spark-deep);
  content: "";
}
.app-toast.is-leaving { animation: app-toast-leave 150ms ease-in both; }
.app-toast__icon {
  display: grid;
  width: 34px;
  height: 34px;
  margin-top: 1px;
  background: var(--app-toast-icon-surface);
  box-shadow:
    inset 2px 2px 0 var(--app-toast-icon-highlight),
    inset -2px -2px 0 var(--app-toast-icon-shadow),
    2px 2px 0 var(--app-toast-icon-depth);
  clip-path: polygon(4px 0, calc(100% - 4px) 0, calc(100% - 4px) 2px, 100% 2px, 100% calc(100% - 4px), calc(100% - 2px) calc(100% - 4px), calc(100% - 2px) 100%, 4px 100%, 4px calc(100% - 2px), 0 calc(100% - 2px), 0 4px, 2px 4px, 2px 2px, 4px 2px);
  color: var(--app-toast-accent);
  font-size: var(--type-card-title);
  font-weight: 600;
  line-height: 1;
  place-items: center;
}
.app-toast__copy {
  display: grid;
  min-width: 0;
  align-self: center;
  gap: 3px;
}
.app-toast__copy strong {
  padding-right: 18px;
  color: var(--app-toast-heading);
  font-size: var(--type-label);
  font-weight: 600;
  letter-spacing: .02em;
}
.app-toast__copy p {
  margin: 0;
  color: var(--app-toast-copy);
  font-size: var(--type-body);
  font-weight: 600;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.app-toast__action {
  display: inline-grid;
  min-height: 27px;
  justify-self: start;
  align-items: center;
  margin-top: 5px;
  padding: 0 9px;
  border: 2px solid var(--app-toast-action-border);
  background: var(--app-toast-action-surface);
  box-shadow: 2px 2px 0 var(--app-toast-action-shadow);
  color: var(--app-toast-action-copy);
  font-size: var(--type-caption);
  font-weight: 600;
  text-decoration: none;
}
.app-toast__close {
  position: relative;
  z-index: 1;
  display: grid;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: var(--app-toast-close-surface);
  box-shadow:
    inset 2px 2px 0 #ffffff,
    inset -2px -2px 0 var(--app-toast-close-shadow),
    2px 2px 0 var(--app-toast-close-depth);
  color: var(--app-toast-close-copy);
  font-size: var(--type-card-title);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  place-items: center;
}
.app-toast__close:hover { background: var(--app-toast-close-hover); }
.app-toast__close:active {
  box-shadow: inset 2px 2px 0 var(--app-toast-close-shadow);
  transform: translate(2px, 2px);
}
.app-toast__close:focus-visible,
.app-toast__action:focus-visible { outline: 3px solid #5a43bc; outline-offset: 3px; }
@keyframes app-toast-enter {
  from { transform: translateY(-10px) scale(.985); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes app-toast-leave {
  from { transform: translateY(0) scale(1); opacity: 1; }
  to { transform: translateY(-7px) scale(.985); opacity: 0; }
}
@media (max-width: 639px) {
  .app-toast-region { top: calc(10px + env(safe-area-inset-top, 0px)); width: min(calc(100% - 20px), 680px); }
  body:has(.app-header) .app-toast-region { top: calc(72px + env(safe-area-inset-top, 0px)); }
  .app-toast { grid-template-columns: 32px minmax(0, 1fr) 28px; gap: 8px; padding: 9px 8px 9px 10px; }
  .app-toast__icon { width: 30px; height: 30px; font-size: var(--type-subtitle); }
  .app-toast__close { width: 26px; height: 26px; }
  .app-toast__copy p { font-size: var(--type-small); }
}

/* Relationship report: first-view keyring discovery reward. */
.tamami-reading .keyring-reward {
  position: relative;
  display: grid;
  gap: 24px;
  margin-top: 44px;
  padding: 26px 28px 24px;
  border: 14px solid transparent;
  border-image: url("/images/pixel_frame_input.svg?v=1") 14 fill / 14px / 0 stretch;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.keyring-reward__header {
  display: flex;
  align-items: center;
  gap: 14px;
}
.keyring-reward__header-sparkles {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  object-fit: contain;
  image-rendering: pixelated;
}
.keyring-reward__header h2 {
  margin: 0;
  color: var(--tamami-title);
  font-size: var(--type-section-title);
  line-height: 1.45;
}
.keyring-reward__header p {
  margin: 4px 0 0;
  color: var(--tamami-point);
  font-size: var(--type-body);
  line-height: 1.7;
}
.keyring-reward__content {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: 28px;
}
.keyring-reward__art {
  position: relative;
  display: grid;
  width: min(100%, 270px);
  aspect-ratio: 1;
  justify-self: center;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 48%, rgb(255 255 255 / 94%) 0 45%, transparent 46%),
    radial-gradient(circle, #f3e9ff 0 65%, rgb(243 233 255 / 25%) 66% 72%, transparent 73%);
}
.keyring-reward__material {
  position: relative;
  z-index: 1;
  width: 86%;
  height: 86%;
  object-fit: contain;
  image-rendering: pixelated;
}
.keyring-reward__art-sparkles {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  image-rendering: pixelated;
}
.keyring-reward__story {
  position: relative;
  display: grid;
  min-width: 0;
  gap: 8px;
  padding: 26px 28px;
  border: 8px solid transparent;
  border-image: url("/images/pixel_frame_narrative_section_white.svg?v=1") 8 fill / 8px / 0 stretch;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.keyring-reward__story h3 {
  margin: 0;
  color: var(--tamami-title);
  font-size: var(--type-section-title);
  line-height: 1.5;
}
.keyring-reward__story > strong {
  display: block;
  margin: 0 0 10px;
  padding-bottom: 18px;
  border-bottom: 3px dotted var(--tamami-border-strong);
  color: var(--tamami-point);
  font-size: var(--type-body);
  font-weight: 600;
  line-height: 1.7;
}
.keyring-reward__story p {
  margin: 0;
  color: var(--tamami-text);
  font-size: var(--type-body);
  line-height: 1.9;
  overflow-wrap: break-word;
  word-break: keep-all;
}
.keyring-copy__emoticon { display: inline-block; white-space: nowrap; }
.tamami-reading .keyring-reward__action {
  display: grid;
  min-height: 70px;
  padding: 10px 24px;
  place-items: center;
  border: 14px solid transparent;
  border-image: url("/images/pixel_frame_settings_primary.svg?v=1") 14 fill / 14px / 0 stretch;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #fff;
  font-size: var(--type-body-lg);
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
}
.tamami-reading .keyring-reward__action:hover { color: #fff; filter: brightness(1.04); }
.tamami-reading .keyring-reward__action:focus-visible {
  outline: 3px solid var(--tamami-accent);
  outline-offset: 4px;
  border-radius: 0;
}
.keyring-material-library__empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 28px 20px;
  color: #786d8e;
  font-size: var(--type-body);
  line-height: 1.8;
  text-align: center;
}

@media (max-width: 639px) {
  .tamami-reading .keyring-reward {
    gap: 22px;
    margin-top: 36px;
    padding: 20px 14px 16px;
  }
  .keyring-reward__header { align-items: flex-start; gap: 10px; }
  .keyring-reward__header-sparkles { width: 36px; height: 36px; flex-basis: 36px; }
  .keyring-reward__header h2 { font-size: var(--type-card-title); }
  .keyring-reward__header p { font-size: var(--type-small); }
  .keyring-reward__content { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .keyring-reward__art { width: min(82%, 250px); }
  .keyring-reward__story { padding: 20px 18px; }
  .keyring-reward__story h3 { font-size: var(--type-card-title); }
  .tamami-reading .keyring-reward__action { min-height: 64px; font-size: var(--type-body); }
}

/* Home entry banner */
.home-entry-banner-dialog {
  --home-entry-banner-surface: #fffafd;
  width: min(calc(100% - 32px), 480px);
  max-width: none;
  max-height: min(90dvh, 760px);
  margin: auto;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 22px;
  background: transparent;
  color: #33293d;
  box-shadow: 0 24px 70px rgba(36, 22, 45, 0.28);
}
.home-entry-banner-dialog::backdrop {
  background: rgba(25, 18, 30, 0.64);
  backdrop-filter: blur(2px);
}
.home-entry-banner-card {
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: min(90dvh, 760px);
  overflow: hidden;
  border: 1px solid rgba(118, 82, 130, 0.2);
  border-radius: 22px;
  background: var(--home-entry-banner-surface);
  overscroll-behavior: contain;
}
.home-entry-banner-content {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}
.home-entry-banner-close {
  position: absolute;
  z-index: 2;
  top: 10px;
  right: 10px;
  display: grid;
  width: 40px;
  height: 40px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(74, 54, 81, 0.16);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: #4d4054;
  font: 700 25px/1 sans-serif;
  cursor: pointer;
}
.home-entry-banner-close:focus-visible,
.home-entry-banner-actions button:focus-visible,
.home-entry-banner-cta:focus-visible {
  outline: 3px solid #735596;
  outline-offset: 3px;
}
.home-entry-banner-image {
  overflow: hidden;
  border-radius: 22px 22px 0 0;
  background: var(--home-entry-banner-surface);
  aspect-ratio: 16 / 9;
}
.home-entry-banner-image[hidden] { display: none; }
.home-entry-banner-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.home-entry-banner-copy { padding: 25px 27px 12px; }
.home-entry-banner-eyebrow {
  margin: 0 0 7px;
  color: #8f699e;
  font-size: var(--type-label);
  font-weight: 800;
  letter-spacing: 0.12em;
}
.home-entry-banner-copy h2 {
  margin: 0;
  color: #3b3042;
  font-size: clamp(var(--type-section-title), 6.96vw, var(--type-page-title));
  line-height: 1.35;
  word-break: keep-all;
}
.home-entry-banner-description {
  margin: 12px 0 0;
  color: #655d69;
  font-size: var(--type-body);
  line-height: 1.75;
  white-space: pre-line;
  word-break: keep-all;
}
.home-entry-banner-cta {
  display: flex;
  min-height: 48px;
  margin-top: 20px;
  padding: 10px 18px;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  background: #684c7b;
  color: #fff;
  font-size: var(--type-body);
  font-weight: 800;
  text-decoration: none;
}
.home-entry-banner-actions {
  display: flex;
  gap: 8px;
  margin: 0;
  justify-content: space-between;
}
.home-entry-banner-footer {
  flex: 0 0 auto;
  padding: 4px 17px;
  background: var(--home-entry-banner-surface);
}
.home-entry-banner-dialog--image-only .home-entry-banner-image {
  aspect-ratio: auto;
}
.home-entry-banner-dialog--image-only .home-entry-banner-image img {
  height: auto;
}
.home-entry-banner-image-fallback {
  margin: 0;
  padding: 24px;
  color: #6b667a;
  font-size: var(--type-body);
  line-height: 1.75;
  overflow-wrap: anywhere;
}
.home-entry-banner-actions button {
  min-height: 44px;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  color: #746b78;
  font-size: var(--type-body);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.home-entry-banner-status {
  margin: 0;
  color: #8a5664;
  font-size: var(--type-small);
  line-height: 1.5;
}
.home-entry-banner-status:empty { display: none; }
.home-entry-banner-status:not(:empty) { padding: 4px 10px; }
@media (max-width: 359px) {
  .home-entry-banner-dialog { width: calc(100% - 20px); }
  .home-entry-banner-copy { padding: 22px 18px 10px; }
  .home-entry-banner-footer { padding-inline: 13px; }
  .home-entry-banner-actions { gap: 0; }
  .home-entry-banner-actions button { padding-inline: 5px; }
}
@media (prefers-reduced-motion: no-preference) {
  .home-entry-banner-dialog[open] { animation: home-entry-banner-in 180ms ease-out; }
  @keyframes home-entry-banner-in {
    from { opacity: 0; transform: translateY(8px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
}

/* Admin home entry banner */
.admin-home-banner-editor { max-width: 820px; }
.admin-home-banner-form > div[data-home-banner-standard-fields] { display: grid; gap: 16px; }
.admin-home-banner-form [hidden] { display: none; }
.admin-home-banner-form textarea {
  width: 100%;
  min-height: 120px;
  padding: 11px;
  resize: vertical;
  border: 1px solid #cfd5dc;
  border-radius: 6px;
  background: #fff;
}
.admin-home-banner-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.admin-home-banner-fieldset {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 16px;
  border: 1px solid #d9dee4;
  border-radius: 8px;
}
.admin-home-banner-fieldset legend { color: #3c4857; font-size: var(--type-small); font-weight: 800; }
.admin-home-banner-thumbnail {
  display: block;
  width: min(100%, 360px);
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 8px;
}
.admin-home-banner-form input[type="file"] {
  height: auto;
  min-height: 52px;
  padding: 9px;
  color: #384251;
}
.admin-home-banner-form label.admin-confirm-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border: 1px solid #d9dee4;
  border-radius: 7px;
  background: #f8f9fa;
  cursor: pointer;
}
.admin-home-banner-form .admin-confirm-check input[type="checkbox"] {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  padding: 0;
  accent-color: #344863;
}
.admin-home-banner-check-copy { display: grid; gap: 3px; }
.admin-home-banner-check-copy strong { color: #384251; font-size: var(--type-label); }
.admin-home-banner-check-copy small { color: #687383; font-size: var(--type-caption); font-weight: 400; line-height: 1.5; }
.admin-home-banner-file-reset {
  margin: 0;
  padding: 10px 12px;
  border-radius: 6px;
  background: #fbeaec;
}
.admin-home-banner-submit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 4px;
}
.admin-home-banner-submit p { margin: 0; color: #687383; font-size: var(--type-caption); line-height: 1.5; }
.admin-home-banner-form input.admin-primary-button[type="submit"] {
  width: auto;
  min-width: 150px;
  border: 0;
  background: #344863;
  color: #fff;
}
.admin-home-banner-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.admin-home-banner-actions form { margin: 0; }
.admin-home-banner-preview {
  position: relative;
  min-height: 760px;
  padding: 36px 16px;
  border-radius: 12px;
  background: #ede7f0;
}
.admin-home-banner-preview .home-entry-banner-dialog[open] {
  position: relative;
  inset: auto;
  display: block;
}
@media (max-width: 639px) {
  .admin-home-banner-form-grid { grid-template-columns: minmax(0, 1fr); }
  .admin-home-banner-submit { align-items: stretch; flex-direction: column; }
  .admin-home-banner-form input.admin-primary-button[type="submit"] { width: 100%; }
}


@media (prefers-reduced-motion: reduce) {
  .app-toast, .app-toast.is-leaving { animation: none; }
}

.viewport-frame { width: 100%; max-width: var(--page-content-max); min-height: 100svh; margin-inline: auto; background-color: #f1e4fc; }
.app-shell { min-height: 100svh; background: transparent; }
.impersonation-banner {
  position: fixed;
  z-index: 40;
  top: 0;
  left: 50%;
  display: flex;
  width: 100%;
  max-width: var(--page-content-max);
  min-height: 44px;
  transform: translateX(-50%);
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 7px 16px;
  border-bottom: 1px solid #6d4ba8;
  background: #56328f;
  color: #fff;
  font-size: var(--type-small);
  line-height: 1.4;
}
.impersonation-banner strong { color: #fff1a8; }
.impersonation-banner form { flex: 0 0 auto; margin: 0; }
.impersonation-banner__exit {
  min-height: 29px;
  padding: 0 10px;
  border: 1px solid rgb(255 255 255 / 68%);
  border-radius: 6px;
  background: #fff;
  color: #56328f;
  font-size: var(--type-label);
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
body:has(.impersonation-banner) .viewport-frame { padding-top: 126px; }
body:has(.impersonation-banner) .app-header { top: 54px; }
body:has(.impersonation-banner) .app-toast-region { top: 132px; }
.member-navigation {
  --member-nav-label: #7762bc;
  --member-nav-selected: #4c30af;
  --member-nav-ring: #b5a1ec;
  --member-nav-accent: #f4b5da;
  --member-nav-face-surface: #fad4eb;
  position: fixed;
  z-index: 20;
  right: auto;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  display: grid;
  width: var(--page-navigation-width);
  height: 70px;
  transform: translateX(-50%);
  grid-template-columns: repeat(2, minmax(0, 1fr)) 74px repeat(2, minmax(0, 1fr));
  gap: 2px;
  padding: 6px;
  border: 1px solid #cdbbea;
  border-radius: 8px;
  background: #fbf5fe;
  box-shadow: none;
}
.member-navigation a {
  min-width: 0;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--member-nav-label);
  font-size: var(--type-small);
  font-weight: 400;
  line-height: 18px;
  text-decoration: none;
}
.member-navigation__icon {
  display: block;
  width: 34px;
  max-width: 100%;
  height: 20px;
  flex: 0 0 auto;
  object-fit: contain;
  image-rendering: pixelated;
  pointer-events: none;
}
.member-navigation a > span:not(.sr-only) { white-space: nowrap; }
.member-navigation a.active:not(.nav-centerpiece) {
  width: 100%;
  max-width: 112px;
  justify-self: center;
  color: var(--member-nav-selected);
  font-weight: 600;
}
.member-navigation a.active:not(.nav-centerpiece) > span {
  text-decoration: underline;
  text-decoration-color: var(--member-nav-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.member-navigation a:focus-visible {
  outline: 2px solid var(--member-nav-selected);
  outline-offset: 3px;
}
.member-navigation a.nav-centerpiece {
  position: relative;
  z-index: 2;
  width: 74px;
  min-width: 74px;
  max-width: 74px;
  height: 74px;
  min-height: 74px;
  margin: -18px 0 0;
  justify-self: center;
  border: 2px solid var(--member-nav-ring);
  border-radius: 50%;
  overflow: visible;
  background-color: var(--member-nav-face-surface);
  background-image: none;
  box-shadow: inset 0 0 0 3px #fff;
}
.member-navigation .nav-centerpiece__sparkles {
  position: absolute;
  top: -8px;
  left: -17px;
  display: block;
  width: calc(100% + 34px);
  max-width: none;
  height: calc(100% + 18px);
  pointer-events: none;
  image-rendering: pixelated;
}
.member-navigation .nav-centerpiece__face {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 80%;
  max-width: none;
  height: 80%;
  flex: 0 0 auto;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  image-rendering: pixelated;
  transform: translate(-50%, -50%);
}
.member-navigation .nav-centerpiece.active { border-color: var(--member-nav-selected); }
body:has(.member-navigation) .viewport-frame { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
body:has(.app-header) .viewport-frame { padding-top: 82px; }
body:has(.app-header) .app-shell > .top-bar,
body:has(.app-header) .app-shell > .page-header { display: none; }
.app-header {
  position: fixed;
  z-index: 30;
  top: 10px;
  left: 50%;
  display: flex;
  width: var(--page-content-width);
  height: 64px;
  transform: translateX(-50%);
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
  border: 0;
  background: transparent;
}
.app-header::before {
  position: absolute;
  z-index: -1;
  top: -10px;
  bottom: -7px;
  left: -18px;
  width: calc(100% + 36px);
  border-bottom: 1px solid transparent;
  background: transparent;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition: background-color 0.25s ease, backdrop-filter 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  content: "";
}
.app-header.is-scrolled::before {
  border-bottom-color: rgba(216, 197, 244, 0.75);
  background: rgba(247, 238, 253, 0.88) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 4px 20px rgba(75, 43, 130, 0.08);
}
.app-logo {
  display: inline-flex;
  flex: 0 0 auto;
  transform: translateX(8px);
  align-items: center;
  line-height: 0;
  text-decoration: none;
}
.app-logo .brand-logo-image { height: 48px; }
.app-header-actions { display: flex; align-items: center; gap: 8px; }
.header-credit-balance {
  --header-credit-frame: url("/images/pixel_badge_keyring.svg?v=1");
  --header-credit-slice: 3;
  box-sizing: border-box;
  display: inline-flex;
  width: 64px;
  min-width: 64px;
  height: 30px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 6px;
  border: calc(var(--header-credit-slice) * 1px) solid transparent;
  border-image-source: var(--header-credit-frame);
  border-image-slice: var(--header-credit-slice) fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  background-clip: border-box;
  background-origin: border-box;
  box-shadow: none;
  clip-path: none;
  color: #5a43bc;
  font-size: var(--type-small);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  image-rendering: pixelated;
  transform: none;
  transition: filter .15s ease;
}
.header-credit-balance:hover { filter: brightness(1.03); }
.header-credit-balance > img { display: block; width: 21px; height: 21px; flex: 0 0 21px; object-fit: contain; image-rendering: pixelated; }
.header-credit-balance > span { min-width: 1ch; text-align: center; }
.header-tamabuddy-link {
  display: grid;
  width: 84px;
  height: 34px;
  flex: 0 0 auto;
  align-self: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  line-height: 0;
  text-decoration: none;
  cursor: pointer;
  place-items: center;
  transition: filter .15s ease, transform .15s ease;
}
.header-tamabuddy-link:hover { filter: brightness(1.03); }
.header-tamabuddy-link:active { transform: translateY(1px); }
.header-tamabuddy-link:focus-visible { outline: 3px solid #4c30af; outline-offset: 2px; }
.header-tamabuddy-logo {
  display: block;
  width: 72px;
  max-width: 100%;
  height: auto;
  max-height: 32px;
  object-fit: contain;
  pointer-events: none;
  transform: translateY(-2px);
}
.header-tamabuddy-hint {
  --tamabuddy-hint-border: #b5a1ec;
  --tamabuddy-hint-surface: #fff;
  --tamabuddy-hint-text: #4c30af;
  position: absolute;
  top: calc(50% + 30px);
  right: 40px;
  width: max-content;
  max-width: calc(100vw - 64px);
  padding: 10px 26px 10px 10px;
  border: 2px solid var(--tamabuddy-hint-border);
  border-radius: 12px;
  background: var(--tamabuddy-hint-surface);
  box-shadow: none;
  color: var(--tamabuddy-hint-text);
  font-family: inherit;
  font-size: var(--type-small);
  line-height: 1.5;
  text-align: center;
  word-break: keep-all;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.header-tamabuddy-hint::before {
  position: absolute;
  top: -8px;
  right: 48px;
  width: 12px;
  height: 12px;
  border-top: 2px solid var(--tamabuddy-hint-border);
  border-left: 2px solid var(--tamabuddy-hint-border);
  background: var(--tamabuddy-hint-surface);
  transform: rotate(45deg);
  content: "";
}
.header-tamabuddy-hint > span,
.header-tamabuddy-hint > strong { display: block; }
.header-tamabuddy-hint > strong { font-weight: 600; }
.header-tamabuddy-hint > .lucide { position: absolute; top: 8px; right: 8px; width: 14px; height: 14px; }
.header-tamabuddy-hint:hover { --tamabuddy-hint-border: #8c77ce; }
.header-tamabuddy-hint:focus-visible { --tamabuddy-hint-border: var(--tamabuddy-hint-text); }
.header-icon-button { position: relative; display: grid; width: 42px; height: 42px; padding: 0; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #6944bf; cursor: pointer; place-items: center; }
.header-icon-button:hover, .header-icon-button[aria-expanded="true"] { border-color: #d8c5f4; background: #eee5ff; }
.header-icon-button .lucide { width: 24px; height: 24px; }
.header-notification-dot { position: absolute; top: 4px; right: 3px; box-sizing: border-box; width: 10px; height: 10px; border: 2px solid #f7eefd; border-radius: 50%; background: #d95897; }
.notification-count { position: absolute; top: 1px; right: 0; display: grid; min-width: 18px; height: 18px; padding: 0 4px; border: 2px solid #f7eefd; border-radius: 9px; background: #d95897; color: #fff; font-size: var(--type-caption); font-weight: 600; line-height: 14px; place-items: center; }
.header-popup { position: absolute; z-index: 40; top: -10px; right: auto; left: -18px; width: calc(100% + 36px); max-height: 80svh; overflow: auto; border: 0; border-bottom: 1px solid #cdbbea; border-radius: 0 0 8px 8px; background: #fbf5fe; box-shadow: none; }
.header-popup > header { display: flex; min-height: 54px; align-items: center; justify-content: space-between; padding: 0 16px; border-bottom: 1px solid #e6dbf7; }
.header-popup > header strong { color: #53329d; font-size: var(--type-section-title); }
.header-popup > header button, .notification-header-actions > button { display: grid; width: 34px; height: 34px; padding: 0; border: 0; background: transparent; color: #8069aa; cursor: pointer; place-items: center; }
.header-popup > header button .lucide, .notification-header-actions > button .lucide { width: 20px; height: 20px; }
.notification-header-actions { display: flex; align-items: center; gap: 5px; }
.notification-read-all-form { margin: 0; }
.header-popup > header .notification-read-all { width: auto; height: 30px; padding: 0 8px; border: 1px solid #dfd1f5; border-radius: 5px; background: #f7f1ff; color: #7650c6; font-size: var(--type-caption); font-weight: 600; }
.notification-list { max-height: min(520px, calc(80svh - 54px)); overflow-y: auto; }
.notification-item-form { margin: 0; border-bottom: 1px solid #eee6fa; }
.notification-item { display: grid; width: 100%; min-height: 88px; grid-template-columns: 8px minmax(0, 1fr) 18px; align-items: center; gap: 10px; padding: 13px 16px; border: 0; background: #fbf5fe; color: inherit; text-align: left; cursor: pointer; }
.notification-item:hover { background: #f5efff; }
.notification-item.is-unread { background: #f1e8ff; }
.notification-item-mark { width: 7px; height: 7px; border-radius: 50%; background: transparent; }
.notification-item.is-unread .notification-item-mark { background: #8a60d4; }
.notification-item-copy { display: grid; min-width: 0; gap: 4px; }
.notification-item-copy strong { overflow: hidden; color: #5632ad; font-size: var(--type-body); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.notification-item-copy small { display: -webkit-box; overflow: hidden; color: #756487; font-size: var(--type-label); line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.notification-item--point-grant .notification-item-copy small {
  display: block;
  overflow: visible;
  word-break: keep-all;
  overflow-wrap: anywhere;
  -webkit-line-clamp: unset;
}
.notification-item-copy time { color: #9b8aaa; font-size: var(--type-caption); }
.notification-item-arrow { width: 17px; height: 17px; color: #a18bbf; }
.notification-empty { display: grid; min-height: 210px; align-content: center; justify-items: center; padding: 24px; text-align: center; }
.notification-empty-tamami {
  display: block;
  width: 96px;
  height: auto;
  margin-bottom: 10px;
  object-fit: contain;
  filter: drop-shadow(0 7px 10px rgba(83, 46, 143, 0.14));
  image-rendering: pixelated;
}
.notification-empty strong { color: #35224f; font-size: var(--type-body-lg); font-weight: 600; }
.notification-empty p { max-width: 390px; margin: 7px 0 0; color: #806f9f; font-size: var(--type-body); font-weight: 600; line-height: 1.6; }
dialog.menu-popup {
  --menu-surface: #f8f3fe;
  --menu-border: #dfd1fa;
  --menu-title: #5a43bc;
  --menu-copy: #6b667a;
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px);
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--menu-surface);
  color: var(--menu-title);
  overscroll-behavior: none;
}
dialog.menu-popup[open] { display: grid; }
dialog.menu-popup::backdrop { background: var(--menu-surface); }
html:has(.menu-popup[open]), body:has(.menu-popup[open]) { overflow: hidden; }
.menu-popup > header,
.menu-popup nav a,
.menu-popup__footer form { width: min(100%, var(--page-content-max)); margin-inline: auto; }
.menu-popup > header { min-height: 64px; padding-block: 10px; border-bottom-color: var(--menu-border); }
.menu-popup > header strong { color: var(--menu-title); }
.menu-popup > header button { width: 44px; height: 44px; }
.menu-popup__header-actions { display: flex; align-items: center; gap: 4px; }
.menu-popup__notification-button { position: relative; }
.menu-popup > nav { display: grid; min-height: 0; align-content: start; overflow-y: auto; overscroll-behavior-y: contain; }
.menu-popup nav a { display: grid; min-height: 68px; grid-template-columns: 34px minmax(0, 1fr) 16px; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--menu-border); text-decoration: none; }
.menu-popup nav a:hover { background: #f5efff; }
.menu-popup nav a > .lucide { width: 21px; height: 21px; color: #7650c8; }
.menu-popup nav a > .menu-popup__icon {
  display: block;
  width: 21px;
  height: 21px;
  object-fit: contain;
  image-rendering: pixelated;
  pointer-events: none;
}
.menu-popup nav a > .lucide:last-child { width: 17px; height: 17px; color: #9a82c1; }
.menu-popup nav span { display: grid; min-width: 0; gap: 4px; word-break: keep-all; overflow-wrap: anywhere; }
.menu-popup nav strong { color: var(--menu-title); }
.menu-popup nav small { color: var(--menu-copy); font-size: var(--type-body); }
.menu-popup__footer { padding-bottom: env(safe-area-inset-bottom, 0px); border-top: 1px solid var(--menu-border); background: var(--menu-surface); }
.menu-popup__footer form { margin-block: 0; padding: 12px 16px; }
.menu-logout {
  --tamami-action-frame: url("/images/pixel_frame_settings_primary.svg?v=1");
  appearance: none;
  box-sizing: border-box;
  display: flex;
  width: 100%;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 14px solid transparent;
  border-image-source: var(--tamami-action-frame);
  border-image-slice: 14 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  background-clip: border-box;
  background-origin: border-box;
  box-shadow: none;
  clip-path: none;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  image-rendering: pixelated;
  cursor: pointer;
  transition: filter .15s ease, transform .15s ease;
}
.menu-logout:hover { filter: brightness(1.03); }
.menu-logout:active { filter: brightness(.96); transform: translateY(1px); }
.menu-logout:focus-visible { outline: 3px solid var(--ui-focus, #5a43bc); outline-offset: 2px; }
.menu-logout:disabled { cursor: not-allowed; filter: grayscale(.18); opacity: .5; transform: none; }
.top-bar, .page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: var(--page-content-width);
  height: 64px;
  margin: 0 auto;
}
.page-header { justify-content: flex-start; gap: 20px; }
.brand {
  display: inline-flex;
  flex: 0 0 auto;
  transform: translateX(8px);
  align-items: center;
  line-height: 0;
  text-decoration: none;
}
.brand-logo-image {
  display: block;
  width: auto;
  height: 44px;
  object-fit: contain;
}
.text-button, .back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 4px;
  border: 0;
  background: transparent;
  color: #4e5968;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.back-link .lucide { display: block; width: 20px; height: 20px; }
.top-bar form { margin: 0; }
.home-actions { display: flex; align-items: center; gap: 14px; }
.guest-login-link .lucide { width: 17px; height: 17px; }
.guest-home-shell .top-bar .brand {
  text-shadow: none;
}
.guest-home-shell .top-bar .guest-login-link {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 14px;
  border: none;
  border-radius: 0;
  background: #d8c4e8;
  color: #54276f;
  font-size: var(--type-body);
  font-weight: 600;
  text-decoration: none;
  image-rendering: pixelated;
  box-shadow:
    -2px -2px 0 0 #79558f,
    2px -2px 0 0 #79558f,
    -2px 2px 0 0 #79558f,
    2px 2px 0 0 #79558f,
    -4px 0 0 0 #79558f,
    4px 0 0 0 #79558f,
    0 -4px 0 0 #79558f,
    0 4px 0 0 #79558f,
    inset 2px 2px 0 0 #ffffff,
    inset -2px -2px 0 0 #b294c9;
  transition: transform 0.15s ease, background 0.15s ease;
}
.guest-home-shell .top-bar .guest-login-link:hover {
  transform: translateY(-1px);
  background: #e2d2ee;
}
.guest-home-shell .top-bar .guest-login-link:active {
  transform: translateY(1px);
}

.main-content { width: var(--page-content-width); margin: 0 auto; }
.fortune-entry { max-width: 560px; padding: 112px 0 64px; }
html:has(.guest-home-shell),
body:has(.guest-home-shell) {
  background-color: #f7eefd;
}
body:has(.guest-home-shell) {
  background-image:
    linear-gradient(to bottom, rgba(247, 238, 253, 0) 0%, rgba(247, 238, 253, 0) 35%, rgba(247, 238, 253, 0.55) 65%, rgba(247, 238, 253, 0.95) 85%, #f7eefd 100%),
    url("/images/background_top.png");
  background-position: top center, top center;
  background-repeat: no-repeat, no-repeat;
  background-size:
    100% max(680px, 100svh),
    max(1208px, 100vw) auto;
}
body:has(.guest-home-shell) .viewport-frame {
  background: transparent;
}

body:has(.member-home-shell),
body:has(.member-dashboard) {
  background-color: #f1e4fc;
  background-image:
    linear-gradient(
      to bottom,
      rgba(241, 228, 252, 0) 0%,
      rgba(241, 228, 252, 0) 35%,
      rgba(241, 228, 252, 0.22) 52%,
      rgba(241, 228, 252, 0.62) 70%,
      rgba(241, 228, 252, 0.9) 87%,
      #f1e4fc 100%
    ),
    url("/images/background_logged_in.png");
  background-position: top center, top center;
  background-repeat: no-repeat, no-repeat;
  background-size:
    100% max(680px, 56.3vw),
    max(1208px, 100vw) auto;
}
body:has(.member-home-shell) .viewport-frame,
body:has(.member-dashboard) .viewport-frame {
  background: transparent;
}
body:has(.member-home-shell) .app-header::before,
body:has(.member-dashboard) .app-header::before {
  background: transparent;
}

/* Shared full-page artwork treatment. New page backgrounds only need to set
   --page-art-image and, when necessary, --page-art-size on their body selector. */
html:has(.page-art-background),
body:has(.page-art-background) {
  background-color: #f1e4fc;
}
body:has(.page-art-background) {
  background-image:
    linear-gradient(
      to bottom,
      rgb(241 228 252 / 0%) 0%,
      rgb(241 228 252 / 0%) 66.666%,
      rgb(241 228 252 / 72%) 84%,
      #f1e4fc 100%
    ),
    var(--page-art-image);
  background-position: center top, center top;
  background-repeat: no-repeat, no-repeat;
  background-size:
    100% var(--page-art-size, max(720px, 100vw)),
    var(--page-art-size, max(720px, 100vw)) auto;
}
body:has(.page-art-background) .viewport-frame,
.page-art-background {
  background: transparent;
}
body:has(.page-art-background) .app-header::before {
  background: transparent;
}
body:has(.fortune-page-shell) {
  --page-art-image: url("/images/fortune_page_background.png?v=3");
  --page-art-size: max(720px, 100vw);
}
body:has(.unified-page-shell) {
  --page-art-image: url("/images/unified_page_background.png");
  --page-art-size: max(720px, 100vw);
}
body:has(.unified-page-shell--alternate) {
  --page-art-image: url("/images/unified_page_background_alt.png");
}
body:has(.decoration-page-shell) {
  --page-art-image: url("/images/tamami_decoration_page_background.png?v=1");
  --page-art-size: max(840px, 100vw);
  background-color: #f4e9fb;
}
.unified-page-main {
  padding-top: 18px !important;
}
.unified-page-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: 145px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 30px 36px;
  overflow: hidden;
  border-style: solid;
  border-width: 2px;
  border-image: url("/images/pixel_frame_purple.svg") 14 stretch;
  background: #9478ce;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 28%), 0 4px 0 rgb(83 48 112 / 32%);
  clip-path: polygon(
    14px 0, calc(100% - 14px) 0,
    calc(100% - 14px) 2px, calc(100% - 10px) 2px,
    calc(100% - 10px) 4px, calc(100% - 6px) 4px,
    calc(100% - 6px) 6px, calc(100% - 4px) 6px,
    calc(100% - 4px) 10px, calc(100% - 2px) 10px,
    calc(100% - 2px) 14px, 100% 14px,
    100% calc(100% - 14px), calc(100% - 2px) calc(100% - 14px),
    calc(100% - 2px) calc(100% - 10px), calc(100% - 4px) calc(100% - 10px),
    calc(100% - 4px) calc(100% - 6px), calc(100% - 6px) calc(100% - 6px),
    calc(100% - 6px) calc(100% - 4px), calc(100% - 10px) calc(100% - 4px),
    calc(100% - 10px) calc(100% - 2px), calc(100% - 14px) calc(100% - 2px),
    calc(100% - 14px) 100%, 14px 100%,
    14px calc(100% - 2px), 10px calc(100% - 2px),
    10px calc(100% - 4px), 6px calc(100% - 4px),
    6px calc(100% - 6px), 4px calc(100% - 6px),
    4px calc(100% - 10px), 2px calc(100% - 10px),
    2px calc(100% - 14px), 0 calc(100% - 14px),
    0 14px, 2px 14px,
    2px 10px, 4px 10px,
    4px 6px, 6px 6px,
    6px 4px, 10px 4px,
    10px 2px, 14px 2px
  );
}
.unified-page-hero::after {
  position: absolute;
  z-index: -1;
  top: -70px;
  right: 52px;
  width: 190px;
  height: 190px;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 50%;
  box-shadow: 0 0 0 44px rgb(255 255 255 / 7%);
  content: "";
}
.unified-page-hero-copy { position: relative; z-index: 1; min-width: 0; padding-right: 132px; }
.unified-page-hero-copy > p {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: #fff18a;
  font-size: var(--type-label);
  font-weight: 600;
  letter-spacing: .03em;
}
.unified-page-hero-copy h1 {
  max-width: 500px;
  margin: 13px 0 0;
  color: #fff;
  font-size: var(--type-page-title-lg);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -.02em;
  text-shadow: 0 2px 0 rgb(74 34 111 / 30%);
  word-break: keep-all;
}
.unified-page-hero-description {
  display: block;
  max-width: 480px;
  margin-top: 8px;
  color: #f4ecfb;
  font-size: var(--type-body);
  font-weight: 600;
  line-height: 1.55;
  word-break: keep-all;
}
.unified-page-hero-art {
  position: absolute;
  z-index: 1;
  right: 22px;
  bottom: -8px;
  width: 112px;
  height: auto;
  filter: drop-shadow(0 8px 14px rgb(49 18 86 / 20%));
  image-rendering: pixelated;
  pointer-events: none;
}
.unified-page-hero-art--orb { right: 18px; bottom: -19px; width: 130px; }
.unified-page-hero-art--face { right: 18px; bottom: -5px; width: 128px; }
.unified-page-hero-art--moon { right: 36px; bottom: 28px; width: 84px; }
.unified-page-hero-art--telescope { right: 18px; bottom: -6px; width: 158px; }
.unified-page-hero-art--report-moon {
  top: 50%;
  right: -16px;
  bottom: auto;
  width: 207px;
  transform: translateY(-45%);
}
.unified-page-hero-spark { position: absolute; z-index: 0; color: #fff18a; line-height: 1; }
.unified-page-hero-spark--one { top: 18px; right: 22px; font-size: var(--type-subtitle); }
.unified-page-hero-spark--two { right: 150px; bottom: 16px; color: rgb(255 255 255 / 78%); font-size: var(--type-body); }
.compatibility-main > .unified-page-hero,
.support-main > .unified-page-hero { margin-bottom: 12px; }
.support-index-actions { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.unified-hero-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 12px 0 20px;
}
.unified-hero-context > p {
  margin: 0;
  color: #715d89;
  font-size: var(--type-small);
  font-weight: 600;
  line-height: 1.55;
}
.report-archive-banner,
.report-archive-banner__action {
  border: 14px solid transparent;
  border-image-source: var(--report-credit-frame-image);
  border-image-slice: 14 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  background-clip: border-box;
  background-origin: border-box;
  box-shadow: none;
  clip-path: none;
  image-rendering: pixelated;
}
@media (max-width: 639px) {
  .unified-page-main { padding-top: 12px !important; }
  .unified-page-hero {
    min-height: 145px;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 24px 18px;
  }
  .unified-page-hero-copy { padding-right: 92px; }
  .unified-page-hero-copy > p { font-size: var(--type-caption); }
  .unified-page-hero-copy h1 { max-width: 250px; margin-top: 10px; font-size: var(--type-section-title-lg); }
  .unified-page-hero-description { max-width: 235px; margin-top: 7px; font-size: var(--type-small); }
  .unified-page-hero-art { right: 10px; bottom: -4px; width: 86px; }
  .unified-page-hero-art--orb { right: 7px; bottom: -10px; width: 96px; }
  .unified-page-hero-art--face { right: 5px; bottom: 4px; width: 102px; }
  .unified-page-hero-art--moon { right: 18px; bottom: 30px; width: 68px; }
  .unified-page-hero-art--telescope { right: 5px; bottom: 4px; width: 112px; }
  .unified-page-hero-art--report-moon {
    top: 50%;
    right: -40px;
    bottom: auto;
    width: 207px;
    transform: translateY(-45%);
  }
  .unified-page-hero-spark--two { display: none; }
  .unified-hero-context { align-items: flex-start; flex-direction: column; gap: 8px; }
}

.guest-entry { position: relative; display: grid; min-height: calc(100svh - 128px); align-items: center; padding: 44px 0 72px; }
.guest-product-hero { display: grid; grid-template-columns: minmax(270px, .88fr) minmax(0, 1.12fr); align-items: center; gap: 36px; }
.guest-hero-copy { min-width: 0; }
.guest-hero-copy h1 { margin: 0; color: #5e4296; font-size: clamp(var(--type-display-md), 6.996vw, var(--type-display-xl)); line-height: 1.16; letter-spacing: -.042em; word-break: keep-all; }
.guest-hero-copy > p { max-width: 390px; margin: 18px 0 0; color: #746487; font-size: var(--type-body-lg); font-weight: 600; line-height: 1.72; word-break: keep-all; }
.guest-hero-actions { display: flex; align-items: center; gap: 15px; margin-top: 26px; }
.guest-entry-cta,
.pixel-primary-link {
  position: relative;
  display: inline-flex;
  width: auto;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 2px 20px 4px;
  border-style: solid;
  border-width: 14px;
  border-image: url('data:image/svg+xml;utf8,<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14 2H34V4H38V6H42V10H44V14H46V34H44V38H42V42H38V44H34V46H14V44H10V42H6V38H4V34H2V14H4V10H6V6H10V4H14V2Z" fill="%23c8a6f0"/><rect x="14" y="2" width="20" height="2" fill="%23ffffff"/><rect x="10" y="4" width="4" height="2" fill="%23ffffff"/><rect x="6" y="6" width="4" height="2" fill="%23ffffff"/><rect x="4" y="8" width="2" height="4" fill="%23ffffff"/><rect x="2" y="12" width="2" height="22" fill="%23ffffff"/><rect x="44" y="14" width="2" height="22" fill="%23b290e8"/><rect x="42" y="36" width="2" height="4" fill="%23b290e8"/><rect x="38" y="40" width="4" height="2" fill="%23b290e8"/><rect x="34" y="42" width="4" height="2" fill="%23b290e8"/><rect x="14" y="44" width="20" height="2" fill="%23b290e8"/><rect x="14" y="0" width="20" height="2" fill="%23896bcc"/><rect x="10" y="2" width="4" height="2" fill="%23896bcc"/><rect x="6" y="4" width="4" height="2" fill="%23896bcc"/><rect x="4" y="6" width="2" height="4" fill="%23896bcc"/><rect x="2" y="10" width="2" height="4" fill="%23896bcc"/><rect x="0" y="14" width="2" height="20" fill="%23896bcc"/><rect x="34" y="2" width="4" height="2" fill="%23896bcc"/><rect x="38" y="4" width="4" height="2" fill="%23896bcc"/><rect x="42" y="6" width="2" height="4" fill="%23896bcc"/><rect x="44" y="10" width="2" height="4" fill="%23896bcc"/><rect x="46" y="14" width="2" height="20" fill="%23896bcc"/><rect x="2" y="34" width="2" height="4" fill="%23896bcc"/><rect x="4" y="38" width="2" height="4" fill="%23896bcc"/><rect x="6" y="42" width="4" height="2" fill="%23896bcc"/><rect x="10" y="44" width="4" height="2" fill="%23896bcc"/><rect x="14" y="46" width="20" height="2" fill="%23896bcc"/><rect x="44" y="34" width="2" height="4" fill="%23896bcc"/><rect x="42" y="38" width="2" height="4" fill="%23896bcc"/><rect x="38" y="42" width="4" height="2" fill="%23896bcc"/><rect x="34" y="44" width="4" height="2" fill="%23896bcc"/></svg>') 14 fill stretch;
  color: #ffffff;
  font-size: var(--type-body-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  image-rendering: pixelated;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.guest-entry-cta:hover,
.pixel-primary-link:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
}
.guest-entry-cta:active,
.pixel-primary-link:active {
  transform: translateY(1px);
}
.pixel-arrow-right {
  display: inline-block;
  width: 9px;
  height: 12px;
  background-image: url('data:image/svg+xml;utf8,<svg width="9" height="12" viewBox="0 0 9 12" xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" width="2" height="2" fill="%23ffffff"/><rect x="2" y="2" width="2" height="2" fill="%23ffffff"/><rect x="4" y="4" width="2" height="2" fill="%23ffffff"/><rect x="6" y="5" width="2" height="2" fill="%23ffffff"/><rect x="4" y="6" width="2" height="2" fill="%23ffffff"/><rect x="2" y="8" width="2" height="2" fill="%23ffffff"/><rect x="0" y="10" width="2" height="2" fill="%23ffffff"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  image-rendering: pixelated;
  transition: transform 0.15s ease;
}
.guest-entry-cta:hover .pixel-arrow-right,
.pixel-primary-link:hover .pixel-arrow-right { transform: translateX(3px); }

.guest-hero-product-link {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  color: #6b4aa7;
  font-size: var(--type-body-lg);
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.15s ease, opacity 0.15s ease;
}
.guest-hero-product-link:hover {
  color: #4b2d86;
  text-decoration: underline;
}
.guest-hero-product-link:active {
  opacity: 0.8;
}
.guest-hero-trust { display: flex; flex-wrap: wrap; gap: 8px 12px; margin: 19px 0 0; padding: 0; list-style: none; }
.guest-hero-trust li { display: flex; align-items: center; gap: 4px; color: #88799a; font-size: var(--type-caption); font-weight: 600; }
.guest-hero-trust .lucide { width: 13px; height: 13px; color: #7d59c3; }
.guest-hero-character { position: relative; display: grid; min-height: 430px; align-items: end; justify-items: center; isolation: isolate; }
.guest-hero-character::before { position: absolute; z-index: -1; right: 2%; bottom: 5%; width: 94%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(239, 212, 251, .88) 0 52%, rgba(247, 238, 253, 0) 72%); content: ""; }
.guest-hero-character > img { display: block; width: min(100%, 332px); height: auto; filter: drop-shadow(0 20px 24px rgba(84, 50, 139, .18)); image-rendering: pixelated; }
.guest-hero-bubble {
  position: absolute;
  z-index: 2;
  top: 46px;
  right: 18px;
}
.guest-hero-bubble > p {
  margin: 0;
  padding: 14px 18px;
  border-style: solid;
  border-width: 14px;
  border-image: url('data:image/svg+xml;utf8,<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14 2H34V4H38V6H42V10H44V14H46V34H44V38H42V42H38V44H34V46H14V44H10V42H6V38H4V34H2V14H4V10H6V6H10V4H14V2Z" fill="%23ffffff"/><rect x="14" y="2" width="20" height="2" fill="%23ffffff"/><rect x="10" y="4" width="4" height="2" fill="%23ffffff"/><rect x="6" y="6" width="4" height="2" fill="%23ffffff"/><rect x="4" y="8" width="2" height="4" fill="%23ffffff"/><rect x="2" y="12" width="2" height="22" fill="%23ffffff"/><rect x="44" y="14" width="2" height="22" fill="%23b290e8"/><rect x="42" y="36" width="2" height="4" fill="%23b290e8"/><rect x="38" y="40" width="4" height="2" fill="%23b290e8"/><rect x="34" y="42" width="4" height="2" fill="%23b290e8"/><rect x="14" y="44" width="20" height="2" fill="%23b290e8"/><rect x="14" y="0" width="20" height="2" fill="%23896bcc"/><rect x="10" y="2" width="4" height="2" fill="%23896bcc"/><rect x="6" y="4" width="4" height="2" fill="%23896bcc"/><rect x="4" y="6" width="2" height="4" fill="%23896bcc"/><rect x="2" y="10" width="2" height="4" fill="%23896bcc"/><rect x="0" y="14" width="2" height="20" fill="%23896bcc"/><rect x="34" y="2" width="4" height="2" fill="%23896bcc"/><rect x="38" y="4" width="4" height="2" fill="%23896bcc"/><rect x="42" y="6" width="2" height="4" fill="%23896bcc"/><rect x="44" y="10" width="2" height="4" fill="%23896bcc"/><rect x="46" y="14" width="2" height="20" fill="%23896bcc"/><rect x="2" y="34" width="2" height="4" fill="%23896bcc"/><rect x="4" y="38" width="2" height="4" fill="%23896bcc"/><rect x="6" y="42" width="4" height="2" fill="%23896bcc"/><rect x="10" y="44" width="4" height="2" fill="%23896bcc"/><rect x="14" y="46" width="20" height="2" fill="%23896bcc"/><rect x="44" y="34" width="2" height="4" fill="%23896bcc"/><rect x="42" y="38" width="2" height="4" fill="%23896bcc"/><rect x="38" y="42" width="4" height="2" fill="%23896bcc"/><rect x="34" y="44" width="4" height="2" fill="%23896bcc"/></svg>') 14 fill stretch;
  background-color: transparent;
  clip-path: polygon(
    14px 0, calc(100% - 14px) 0,
    calc(100% - 14px) 2px, calc(100% - 10px) 2px,
    calc(100% - 10px) 4px, calc(100% - 6px) 4px,
    calc(100% - 6px) 6px, calc(100% - 4px) 6px,
    calc(100% - 4px) 10px, calc(100% - 2px) 10px,
    calc(100% - 2px) 14px, 100% 14px,
    100% calc(100% - 14px), calc(100% - 2px) calc(100% - 14px),
    calc(100% - 2px) calc(100% - 10px), calc(100% - 4px) calc(100% - 10px),
    calc(100% - 4px) calc(100% - 6px), calc(100% - 6px) calc(100% - 6px),
    calc(100% - 6px) calc(100% - 4px), calc(100% - 10px) calc(100% - 4px),
    calc(100% - 10px) calc(100% - 2px), calc(100% - 14px) calc(100% - 2px),
    calc(100% - 14px) 100%, 14px 100%,
    14px calc(100% - 2px), 10px calc(100% - 2px),
    10px calc(100% - 4px), 6px calc(100% - 4px),
    6px calc(100% - 6px), 4px calc(100% - 6px),
    4px calc(100% - 10px), 2px calc(100% - 10px),
    2px calc(100% - 14px), 0 calc(100% - 14px),
    0 14px, 2px 14px,
    2px 10px, 4px 10px,
    4px 6px, 6px 6px,
    6px 4px, 10px 4px,
    10px 2px, 14px 2px
  );
  color: #5632ad;
  font-size: var(--type-card-title);
  font-weight: 600;
  line-height: 1.25;
  word-break: keep-all;
}
.guest-hero-bubble::before {
  position: absolute;
  right: 28px;
  bottom: -9px;
  z-index: 3;
  width: 0;
  height: 0;
  border-top: 10px solid #896bcc;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  content: "";
}
.guest-hero-bubble::after {
  position: absolute;
  right: 30px;
  bottom: -6px;
  z-index: 4;
  width: 0;
  height: 0;
  border-top: 8px solid #ffffff;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  content: "";
}
.guest-hero-star { position: absolute; z-index: 1; color: #c091e7; line-height: 1; text-shadow: 0 4px 12px rgba(123, 85, 199, .2); }
.guest-hero-star-one { top: 86px; left: 2px; font-size: var(--type-section-title-lg); }
.guest-hero-star-two { top: 145px; right: 3px; color: #e7b94f; font-size: var(--type-page-title-lg); }
.guest-hero-star-three { bottom: 84px; left: -3px; color: #e7b94f; font-size: var(--type-subtitle); }
.guest-preview-section { scroll-margin-top: 22px; padding: 70px 0 104px; }
.guest-preview-heading { max-width: 520px; }
.guest-preview-heading > span { color: #8c64d2; font-size: var(--type-label); font-weight: 600; letter-spacing: .12em; }
.guest-preview-heading h2 { margin: 9px 0 0; color: #472b79; font-size: var(--type-page-title-lg); letter-spacing: -.03em; word-break: keep-all; }
.guest-preview-heading p { margin: 9px 0 0; color: #88769e; font-size: var(--type-body); font-weight: 600; word-break: keep-all; }
.guest-preview-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.guest-preview-card { position: relative; display: flex; min-width: 0; min-height: 410px; flex-direction: column; padding: 19px 17px 17px; overflow: hidden; border: 1px solid #dfd0f1; border-top: 4px solid #8d68d4; border-radius: 18px; background: #fffaff; box-shadow: 0 12px 30px rgba(84, 50, 139, .07); }
.guest-preview-card::after { position: absolute; top: -48px; right: -48px; width: 118px; height: 118px; border-radius: 50%; background: rgba(225, 209, 249, .5); content: ""; }
.guest-preview-card > header { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.guest-preview-card > header > .lucide { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: #e9ddfa; color: #7650c6; }
.guest-preview-badge { padding: 5px 7px; border: 1px solid #ddcff2; border-radius: 999px; background: rgb(253 251 255 / 82%); color: #80669c; font-size: var(--type-caption); font-weight: 600; white-space: nowrap; }
.guest-preview-kicker { margin: 22px 0 6px; color: #966bd7; font-size: var(--type-caption); font-weight: 600; }
.guest-preview-card h3 { margin: 0; color: #493066; font-size: var(--type-section-title); line-height: 1.4; letter-spacing: -.025em; word-break: keep-all; }
.guest-product-price { display: flex; min-height: 48px; align-items: baseline; gap: 7px; margin: 16px 0 0; padding-bottom: 14px; border-bottom: 1px solid #eadff3; }
.guest-product-price strong { color: #6842bc; font-size: var(--type-section-title-lg); font-weight: 600; letter-spacing: -.03em; }
.guest-product-price span { color: #9a8aa7; font-size: var(--type-caption); font-weight: 600; }
.guest-mini-ratings { display: grid; gap: 7px; margin: 19px 0 15px; }
.guest-mini-ratings p { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; color: #79678e; font-size: var(--type-label); font-weight: 600; }
.guest-mini-ratings b { color: #9b70db; font-size: var(--type-caption); letter-spacing: -1px; white-space: nowrap; }
.guest-mini-ratings em { color: #ddd1e8; font-style: normal; }
.guest-preview-copy { margin: 15px 0 0; color: #6f617d; font-size: var(--type-label); font-weight: 600; line-height: 1.7; word-break: keep-all; }
.guest-preview-topics { display: flex; flex-wrap: wrap; gap: 5px; margin: 15px 0 0; }
.guest-preview-topics span { padding: 5px 7px; border-radius: 999px; background: #f0e8f8; color: #80699a; font-size: var(--type-caption); font-weight: 600; }
.guest-preview-pass-note { margin: 10px 0 0; padding-top: 9px; border-top: 1px dashed #e2d7eb; color: #9a8aa7; font-size: var(--type-caption); font-weight: 600; line-height: 1.5; word-break: keep-all; }
.guest-preview-self { border-top-color: #d39a3c; background: #fcf9ff; }
.guest-preview-self > header > .lucide { background: #fff0c8; color: #c98a2e; }
.guest-preview-self::after { background: rgba(255, 232, 173, .54); }
.guest-preview-self .guest-product-price strong { color: #b57924; }
.guest-preview-relation { border-top-color: #d36b9f; background: #fff9fc; }
.guest-preview-relation > header > .lucide { background: #f5dced; color: #cc5d96; }
.guest-preview-relation::after { background: rgba(245, 216, 235, .62); }
.guest-preview-relation .guest-product-price strong { color: #bd4d86; }
.guest-preview-footer { display: grid; justify-items: center; margin-top: 24px; }
.guest-preview-footer > p { display: flex; align-items: flex-start; justify-content: center; gap: 6px; margin: 0; color: #9585a5; font-size: var(--type-label); font-weight: 600; line-height: 1.55; text-align: center; word-break: keep-all; }
.guest-preview-footer > p .lucide { width: 13px; min-width: 13px; height: 13px; margin-top: 1px; }
.guest-preview-cta { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; gap: 7px; margin-top: 16px; padding: 0 18px; border: 1px solid #d6c2ef; border-radius: 13px; background: #f7effd; color: #7148bd; font-size: var(--type-body); font-weight: 600; text-decoration: none; transition: transform .18s ease, background .18s ease; }
.guest-preview-cta:hover { transform: translateY(-2px); background: #f0e4fa; }
.guest-preview-cta .lucide { width: 16px; height: 16px; }
.guest-preview-card[data-preview-open] { cursor: pointer; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.guest-preview-card[data-preview-open]:hover { transform: translateY(-5px); border-color: #c9afe8; box-shadow: 0 18px 36px rgba(84, 50, 139, .13); }
.guest-preview-card[data-preview-open]:focus-visible { outline: 3px solid #9670dd; outline-offset: 4px; }
.guest-preview-open-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 13px; border-top: 1px solid #eadff3; color: #7950c5; font-size: var(--type-label); font-weight: 600; }
.guest-preview-open-label .lucide { width: 14px; height: 14px; transition: transform .18s ease; }
.guest-preview-card[data-preview-open]:hover .guest-preview-open-label .lucide { transform: translateX(3px); }

.guest-result-dialog { --result-accent: #7b55ca; --result-soft: #eee3fb; width: min(680px, calc(100% - 32px)); max-width: 680px; max-height: calc(100dvh - 32px); margin: auto; padding: 0; overflow: hidden; border: 0; border-radius: 24px; background: #fffaff; box-shadow: 0 28px 90px rgba(44, 24, 76, .3); color: #4c3760; }
.guest-result-dialog::backdrop { background: rgba(37, 23, 50, .58); backdrop-filter: blur(4px); }
.guest-result-self { --result-accent: #c4862d; --result-soft: #fff0ca; }
.guest-result-relation { --result-accent: #c85d94; --result-soft: #f6ddeb; }
.guest-result-dialog[open] { animation: guest-result-enter .24s ease-out; }
.guest-result-dialog[open]::backdrop { animation: guest-result-backdrop .2s ease-out; }
.guest-result-dialog-shell { display: flex; max-height: calc(100dvh - 32px); flex-direction: column; }
.guest-result-dialog-header { z-index: 3; display: flex; min-height: 58px; align-items: center; justify-content: space-between; padding: 0 22px; border-bottom: 1px solid #eee5f4; background: rgba(255, 250, 255, .96); }
.guest-result-dialog-brand { display: inline-flex; align-items: center; line-height: 0; }
.guest-result-dialog-brand .brand-logo-image { height: 38px; }
.guest-result-dialog-header button { display: grid; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 12px; background: #f2e9f8; color: #735a8d; cursor: pointer; place-items: center; }
.guest-result-dialog-header button:hover { background: #e9ddf2; }
.guest-result-dialog-header button .lucide { width: 18px; height: 18px; }
.guest-result-dialog-scroll { min-height: 0; padding: 24px 24px 30px; overflow-y: auto; overscroll-behavior: contain; }
.guest-result-mock-label { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 12px; padding: 6px 9px; border-radius: 999px; background: var(--result-soft); color: var(--result-accent); font-size: var(--type-label); font-weight: 600; }
.guest-result-mock-label .lucide { width: 13px; height: 13px; }
.guest-result-product-heading { padding: 4px 2px 0; }
.guest-result-product-heading > p { margin: 0; color: var(--result-accent); font-size: var(--type-label); font-weight: 600; }
.guest-result-product-heading > h2 { margin: 6px 0 0; color: #4f2aa5; font-size: var(--type-page-title); letter-spacing: -.025em; }
.guest-result-product-heading > span { display: block; margin-top: 7px; color: #806d99; font-size: var(--type-small); font-weight: 600; line-height: 1.6; word-break: keep-all; }
.guest-fortune-preview .fortune-overview { margin-top: 18px; }
.guest-fortune-preview .fortune-narrative { margin-top: 14px; }
.guest-report-preview .executive-summary { margin-top: 18px; }
.guest-report-preview .snapshot-overview { margin-top: 24px; }
.guest-report-basis { margin-top: 24px; padding: 20px; border: 1px solid #dfd1f5; border-radius: 8px; background: #fbf5fe; }
.guest-report-basis > h2 { margin: 0; color: #5632ad; font-size: var(--type-section-title); line-height: 1.45; word-break: keep-all; }
.guest-report-basis-intro { margin: 9px 0 0; color: #806d99; font-size: var(--type-body); font-weight: 600; line-height: 1.7; word-break: keep-all; }
.guest-report-subjects { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; margin-top: 16px; }
.guest-report-subjects article { min-width: 0; padding: 15px; border: 1px solid #e4d8ef; border-radius: 8px; background: var(--surface-white); }
.guest-report-subjects header { display: grid; gap: 3px; }
.guest-report-subjects header span { color: #9a70df; font-size: var(--type-label); font-weight: 600; }
.guest-report-subjects header strong { color: #604d76; font-size: var(--type-body); }
.guest-report-subjects dl { display: grid; gap: 9px; margin: 13px 0 0; }
.guest-report-subjects dl div { padding-top: 9px; border-top: 1px solid #eee5f5; }
.guest-report-subjects dt { color: #9a87b1; font-size: var(--type-caption); font-weight: 600; }
.guest-report-subjects dd { margin: 4px 0 0; color: #563d69; font-size: var(--type-small); font-weight: 600; line-height: 1.55; word-break: keep-all; }
.guest-report-basis-note { margin: 13px 0 0; color: #9584a4; font-size: var(--type-label); font-weight: 600; line-height: 1.6; word-break: keep-all; }
.guest-result-disclaimer { display: flex; align-items: flex-start; gap: 6px; margin: 24px 0 0; padding: 12px 14px; border-radius: 12px; background: #f5eff7; color: #8b7b96; font-size: var(--type-label); font-weight: 600; line-height: 1.55; word-break: keep-all; }
.guest-result-disclaimer .lucide { width: 14px; min-width: 14px; height: 14px; margin-top: 1px; }
.guest-result-dialog-footer { z-index: 3; display: flex; min-height: 76px; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 22px; border-top: 1px solid #eadff0; background: rgba(255, 250, 255, .98); box-shadow: 0 -8px 24px rgba(74, 45, 99, .06); }
.guest-result-dialog-footer > p { display: grid; gap: 2px; margin: 0; }
.guest-result-dialog-footer > p strong { color: #55386c; font-size: var(--type-body); }
.guest-result-dialog-footer > p span { color: #9988a4; font-size: var(--type-label); font-weight: 600; }
.guest-result-dialog-footer > a { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; gap: 7px; padding: 0 17px; border-radius: 13px; background: #7c55cf; color: #fff; font-size: var(--type-small); font-weight: 600; text-decoration: none; white-space: nowrap; }
.guest-result-dialog-footer > a:hover { background: #7048c4; }
.guest-result-dialog-footer > a .lucide { width: 15px; height: 15px; }
@keyframes guest-result-enter { from { transform: translateY(14px) scale(.985); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes guest-result-backdrop { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .guest-entry-cta, .pixel-primary-link, .guest-entry-cta .lucide, .guest-preview-cta, .guest-preview-card[data-preview-open], .guest-preview-open-label .lucide { transition: none; }
  .guest-result-dialog[open], .guest-result-dialog[open]::backdrop { animation: none; }
}
.member-dashboard { padding: 0 0 104px; container-type: inline-size; }
.dashboard-heading { max-width: 680px; }
.dashboard-hero-shell {
  position: relative;
  width: 100%;
  margin-inline: auto;
  overflow: visible;
}
.dashboard-hero {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  margin: 0;
  overflow: hidden;
  border-style: solid;
  border-width: 14px;
  border-image: url('data:image/svg+xml;utf8,<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="14" y="2" width="20" height="2" fill="%23ffffff"/><rect x="10" y="4" width="4" height="2" fill="%23ffffff"/><rect x="6" y="6" width="4" height="2" fill="%23ffffff"/><rect x="4" y="8" width="2" height="4" fill="%23ffffff"/><rect x="2" y="12" width="2" height="22" fill="%23ffffff"/><rect x="44" y="14" width="2" height="22" fill="%23b290e8"/><rect x="42" y="36" width="2" height="4" fill="%23b290e8"/><rect x="38" y="40" width="4" height="2" fill="%23b290e8"/><rect x="34" y="42" width="4" height="2" fill="%23b290e8"/><rect x="14" y="44" width="20" height="2" fill="%23b290e8"/><rect x="14" y="0" width="20" height="2" fill="%23896bcc"/><rect x="10" y="2" width="4" height="2" fill="%23896bcc"/><rect x="6" y="4" width="4" height="2" fill="%23896bcc"/><rect x="4" y="6" width="2" height="4" fill="%23896bcc"/><rect x="2" y="10" width="2" height="4" fill="%23896bcc"/><rect x="0" y="14" width="2" height="20" fill="%23896bcc"/><rect x="34" y="2" width="4" height="2" fill="%23896bcc"/><rect x="38" y="4" width="4" height="2" fill="%23896bcc"/><rect x="42" y="6" width="2" height="4" fill="%23896bcc"/><rect x="44" y="10" width="2" height="4" fill="%23896bcc"/><rect x="46" y="14" width="2" height="20" fill="%23896bcc"/><rect x="2" y="34" width="2" height="4" fill="%23896bcc"/><rect x="4" y="38" width="2" height="4" fill="%23896bcc"/><rect x="6" y="42" width="4" height="2" fill="%23896bcc"/><rect x="10" y="44" width="4" height="2" fill="%23896bcc"/><rect x="14" y="46" width="20" height="2" fill="%23896bcc"/><rect x="44" y="34" width="2" height="4" fill="%23896bcc"/><rect x="42" y="38" width="2" height="4" fill="%23896bcc"/><rect x="38" y="42" width="4" height="2" fill="%23896bcc"/><rect x="34" y="44" width="4" height="2" fill="%23896bcc"/></svg>') 14 fill stretch;
  background-color: transparent;
  background-image: url("/images/dashboard_hero_bg.png");
  background-position: center;
  background-repeat: no-repeat;
  background-origin: border-box;
  background-clip: border-box;
  background-size: cover;
  clip-path: polygon(
    14px 0, calc(100% - 14px) 0,
    calc(100% - 14px) 2px, calc(100% - 10px) 2px,
    calc(100% - 10px) 4px, calc(100% - 6px) 4px,
    calc(100% - 6px) 6px, calc(100% - 4px) 6px,
    calc(100% - 4px) 10px, calc(100% - 2px) 10px,
    calc(100% - 2px) 14px, 100% 14px,
    100% calc(100% - 14px), calc(100% - 2px) calc(100% - 14px),
    calc(100% - 2px) calc(100% - 10px), calc(100% - 4px) calc(100% - 10px),
    calc(100% - 4px) calc(100% - 6px), calc(100% - 6px) calc(100% - 6px),
    calc(100% - 6px) calc(100% - 4px), calc(100% - 10px) calc(100% - 4px),
    calc(100% - 10px) calc(100% - 2px), calc(100% - 14px) calc(100% - 2px),
    calc(100% - 14px) 100%, 14px 100%,
    14px calc(100% - 2px), 10px calc(100% - 2px),
    10px calc(100% - 4px), 6px calc(100% - 4px),
    6px calc(100% - 6px), 4px calc(100% - 6px),
    4px calc(100% - 10px), 2px calc(100% - 10px),
    2px calc(100% - 14px), 0 calc(100% - 14px),
    0 14px, 2px 14px,
    2px 10px, 4px 10px,
    4px 6px, 6px 6px,
    6px 4px, 10px 4px,
    10px 2px, 14px 2px
  );
  box-shadow: none;
}
.dashboard-hero--decorated {
  background-image: var(--dashboard-hero-background-image);
}
.dashboard-hero--decorated .tamami-stage--compact .tamami-layer--background {
  opacity: 0;
}
.pixel-sky { position: absolute; inset: 0; overflow: hidden; image-rendering: pixelated; }
.pixel-sky::before { display: none; }
.pixel-star, .pixel-moon { display: none; }
.dashboard-cat-button { position: absolute; z-index: 1; top: 58%; left: 50%; width: auto; height: 74%; padding: 0; transform: translate(-50%, -50%); border: 0; background: transparent; cursor: pointer; }
.dashboard-hero-image { display: block; width: auto; height: 100%; image-rendering: pixelated; }
.dashboard-cat-speech-wrap {
  position: absolute;
  z-index: 2;
  top: 4px;
  left: 50%;
  width: min(320px, 84%);
  transform: translateX(-50%);
}
.dashboard-cat-speech {
  --dashboard-cat-speech-frame-image: url("/images/pixel_frame_input.svg");
  position: relative;
  display: grid;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 6px 12px;
  border: 14px solid transparent;
  border-image-source: var(--dashboard-cat-speech-frame-image);
  border-image-slice: 14 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  background-clip: border-box;
  background-origin: border-box;
  clip-path: none;
  color: #4b2d86;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--type-body);
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  overflow-wrap: normal;
  white-space: pre-line;
  word-break: keep-all;
  place-items: center;
  box-shadow: none;
  image-rendering: pixelated;
}
.dashboard-cat-speech:focus-visible {
  outline: 3px solid rgba(79, 45, 168, .42);
  outline-offset: 2px;
}
.dashboard-cat-speech__emoticon {
  display: inline-block;
  white-space: nowrap;
}

/* Checkout, legal, and commerce review surfaces */
.checkout-shell { padding: 0 0 120px; }
.checkout-result-shell, .legal-shell { padding: 92px 0 120px; }
.checkout-main, .checkout-result, .legal-page { width: var(--page-content-width); margin: 0 auto; }
.checkout-heading { display: flex; min-height: 46px; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.checkout-heading h1, .legal-page h1, .checkout-result h1 { margin: 2px 0 0; color: #4f2da8; font-size: var(--type-page-title); font-weight: 600; }
.checkout-back, .checkout-secure-label { display: inline-flex; align-items: center; gap: 6px; color: #7858bf; font-size: var(--type-body); font-weight: 600; text-decoration: none; }
.checkout-back { min-height: 40px; padding: 0 4px; }
.checkout-back .lucide, .checkout-secure-label .lucide { width: 17px; height: 17px; }
.checkout-secure-label { color: #8a789f; }
.checkout-order-hero { position: relative; display: grid; min-height: 170px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; margin-bottom: 12px; padding: 26px 28px; overflow: hidden; border: 1px solid #d8c5f4; border-radius: 8px; background: #e8d9fb; }
.checkout-order-hero::after { position: absolute; top: -42px; right: -28px; width: 138px; height: 138px; border-radius: 50%; background: rgba(255, 250, 255, .38); content: ""; }
.checkout-order-copy, .checkout-order-total { position: relative; z-index: 1; }
.checkout-order-tamami { display: block; width: 36px; height: 32px; margin: 0 0 7px; object-fit: contain; image-rendering: pixelated; }
.checkout-order-copy h1 { max-width: 390px; margin: 0; color: #4f2aa5; font-size: var(--type-page-title-lg); font-weight: 600; letter-spacing: -.025em; line-height: 1.25; word-break: keep-all; }
.checkout-order-copy span { display: block; max-width: 390px; margin-top: 10px; color: #75608d; font-size: var(--type-body); font-weight: 600; line-height: 1.6; word-break: keep-all; }
.checkout-order-total { display: grid; min-width: 156px; justify-items: end; padding: 18px 19px; border: 1px solid rgba(150, 115, 205, .34); border-radius: 8px; background: rgba(255, 250, 255, .68); }
.checkout-order-total > span { color: #8a75a2; font-size: var(--type-label); font-weight: 600; }
.checkout-order-total strong { margin-top: 5px; color: #5632ad; font-size: var(--type-page-title-lg); font-weight: 600; letter-spacing: -.03em; }
.checkout-order-total strong em { margin-left: 2px; font-size: var(--type-body-lg); font-style: normal; letter-spacing: 0; }
.checkout-order-total small { margin-top: 3px; color: #9989aa; font-size: var(--type-caption); font-weight: 600; }
.checkout-product, .checkout-customer, .checkout-payment, .checkout-policy { margin-bottom: 12px; padding: 20px; border: 1px solid #ddcef2; border-radius: 8px; background: #fbf5fe; }
.checkout-product { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 14px; }
.checkout-product-icon { display: block; width: 64px; height: 52px; object-fit: contain; image-rendering: pixelated; }
.checkout-product-copy { min-width: 0; }
.checkout-product h2, .checkout-customer h2, .checkout-payment h2, .checkout-policy h2 { margin: 0 0 10px; color: #5031a4; font-size: var(--type-card-title); font-weight: 600; }
.checkout-product h2 { margin-bottom: 4px; }
.checkout-product p, .checkout-customer p, .checkout-policy li { color: #715f8d; font-size: var(--type-body); font-weight: 600; line-height: 1.65; }
.checkout-product p { margin: 0; }
.checkout-badge { display: inline-block; margin-bottom: 5px; color: #9b54cc; font-size: var(--type-label); font-weight: 600; }
.checkout-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.checkout-fields label { color: #624a88; font-size: var(--type-small); font-weight: 600; }
.checkout-fields input { width: 100%; height: 42px; margin-top: 6px; padding: 0 12px; border: 1px solid #d8c5ee; border-radius: 6px; background: var(--surface-white); color: #39285b; font: inherit; box-sizing: border-box; }
.checkout-policy ul { margin: 0; padding-left: 18px; }
.checkout-policy-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.checkout-policy-links a { color: #7858bf; font-size: var(--type-small); font-weight: 600; }
.checkout-status { margin-top: 14px; }
.checkout-action { margin-top: 16px; padding: 15px 16px 17px; border: 1px solid #d8c5f4; border-radius: 8px; background: #f2e8fa; }
.checkout-action > p { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0 0 11px; color: #806d99; font-size: var(--type-label); font-weight: 600; }
.checkout-action > p .lucide { width: 14px; height: 14px; color: #8060ce; }
.checkout-submit { display: flex; width: 100%; min-height: 58px; align-items: center; justify-content: center; gap: 10px; padding: 0 22px; border: 1px solid #7550c6; border-radius: 8px; background: #7c55cf; box-shadow: 0 4px 0 #5e39ac; color: #fff; font-size: var(--type-subtitle); font-weight: 600; cursor: pointer; transition: transform .16s ease, box-shadow .16s ease, background .16s ease; }
.checkout-submit strong { font-weight: 600; }
.checkout-submit .lucide { width: 19px; height: 19px; transition: transform .16s ease; }
.checkout-submit:not(:disabled):hover { transform: translateY(1px); background: #7048c4; box-shadow: 0 3px 0 #5e39ac; }
.checkout-submit:not(:disabled):hover .lucide { transform: translateX(3px); }
.checkout-submit:disabled { box-shadow: none; cursor: wait; opacity: .45; transform: translateY(4px); }
.checkout-result { padding: 34px 22px; border: 1px solid #ddcef2; border-radius: 8px; background: #fbf5fe; text-align: center; }
.checkout-result-icon { display: block; width: 112px; height: auto; margin: 0 auto 4px; image-rendering: pixelated; }
.checkout-result > p { color: #715f8d; font-size: var(--type-body-lg); line-height: 1.6; }
.checkout-result dl, .business-info-page dl { margin: 22px 0; border-top: 1px solid #e1d5ef; }
.checkout-result dl div, .business-info-page dl div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 11px 0; border-bottom: 1px solid #e1d5ef; text-align: left; }
.checkout-result dt, .business-info-page dt { color: #8a789f; font-size: var(--type-small); font-weight: 600; }
.checkout-result dd, .business-info-page dd { margin: 0; overflow-wrap: anywhere; color: #4c376d; font-size: var(--type-body); font-weight: 600; }
.checkout-result-guide { padding: 12px; border: 2px dotted #b99ae2; border-radius: 0; background: #f1e7fb; }
.checkout-result.is-failed .checkout-result-link {
  --checkout-result-action-frame: url("/images/pixel_frame_settings_primary.svg?v=1");

  box-sizing: border-box;
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  margin-top: 18px;
  padding: 0 12px;
  border: 14px solid transparent !important;
  border-image-source: var(--checkout-result-action-frame) !important;
  border-image-slice: 14 fill !important;
  border-image-width: 1 !important;
  border-image-repeat: stretch !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-clip: border-box !important;
  background-origin: border-box !important;
  box-shadow: none !important;
  clip-path: none !important;
  color: #ffffff !important;
  text-decoration: none;
  text-shadow: 1px 1px 0 rgb(73 26 144 / 40%);
  image-rendering: pixelated;
  transition: filter .15s ease, transform .15s ease;
}
.checkout-result.is-failed .checkout-result-link:hover { filter: brightness(1.03); }
.checkout-result.is-failed .checkout-result-link:active {
  box-shadow: none !important;
  filter: brightness(.96);
  transform: translateY(1px) !important;
}
.checkout-result.is-failed .checkout-result-link:focus-visible { outline: 3px solid var(--ui-focus, #5a43bc); outline-offset: 2px; }

/* Payment completion owns its filled frames, independent of legacy result surfaces. */
.payment-success-shell {
  --payment-success-title: #4c30af;
  --payment-success-heading: #5a43bc;
  --payment-success-text: #6b667a;
  --payment-success-divider: #f0e9fd;
  padding: 40px 0 120px;
  font-family: 'SchoolSafeUniverse', 'Pretendard', system-ui, sans-serif;
}
.payment-success,
.payment-success__action {
  box-sizing: border-box;
  border: 14px solid transparent;
  border-image-source: var(--payment-success-frame);
  border-image-slice: 14 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  background-clip: border-box;
  background-origin: border-box;
  box-shadow: none;
  clip-path: none;
  image-rendering: pixelated;
}
.payment-success {
  --payment-success-frame: url("/images/pixel_frame_payment_success.svg?v=1");
  width: var(--page-content-width);
  margin: 0 auto;
  padding: 22px;
  color: var(--payment-success-text);
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.payment-success__hero { text-align: center; }
.payment-success__tamami {
  display: block;
  width: 80px;
  height: 80px;
  margin: 0 auto 16px;
  object-fit: contain;
  image-rendering: pixelated;
}
.payment-success__hero h1 {
  margin: 0;
  color: var(--payment-success-title);
  font-size: var(--type-page-title);
  font-weight: 600;
  line-height: 1.35;
}
.payment-success__hero p {
  max-width: 440px;
  margin: 12px auto 0;
  color: var(--payment-success-text);
  font-size: var(--type-body);
  line-height: 1.8;
}
.payment-success__details { margin: 28px 0; border-top: 1px solid var(--payment-success-divider); }
.payment-success__details > div {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: baseline;
  gap: 16px;
  padding: 15px 0;
  border-bottom: 1px solid var(--payment-success-divider);
}
.payment-success__details dt { font-size: var(--type-small); line-height: 1.7; }
.payment-success__details dd { min-width: 0; margin: 0; font-size: var(--type-body); line-height: 1.7; text-align: right; }
.payment-success__product dd { color: var(--payment-success-heading); font-weight: 600; }
.payment-success__amount dd { color: var(--payment-success-title); font-size: var(--type-section-title); font-weight: 600; }
.payment-success__order dd { font-size: var(--type-small); }
.payment-success__action {
  --payment-success-frame: url("/images/pixel_frame_date_time_primary.svg?v=1");
  display: flex;
  width: 100%;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  color: #fff;
  font-size: var(--type-body);
  font-weight: 600;
  line-height: 26px;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transform: none;
  transition: filter .15s ease, transform .15s ease;
}
.payment-success__action:hover { filter: brightness(1.03); }
.payment-success__action:active { filter: brightness(.96); transform: translateY(1px); }
/* Keep this action keyboard-visible even when the global focus reset is loaded. */
.payment-success #payment-success-wallet:focus-visible {
  outline: 3px solid var(--payment-success-heading) !important;
  outline-offset: 3px !important;
}
@media (max-width: 639px) {
  .payment-success-shell { padding-top: 24px; }
  .payment-success { padding: 10px; }
  .payment-success__tamami { width: 64px; height: 64px; }
  .payment-success__hero h1 { font-size: var(--type-section-title-lg); }
  .payment-success__details > div { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; }
  .payment-success__details > .payment-success__order { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .payment-success__order dd { text-align: left; }
}
.legal-page { color: #5c496f; font-size: var(--type-body); line-height: 1.8; }
.legal-top-nav { margin-bottom: 24px; }
.legal-top-nav-outside { width: var(--page-content-width); margin: 0 auto 12px; }
.legal-back {
  --tamami-legal-back-frame: url("/images/pixel_frame_input.svg?v=1");

  box-sizing: border-box;
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border: 14px solid transparent;
  border-image-source: var(--tamami-legal-back-frame);
  border-image-slice: 14 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  background-clip: border-box;
  background-origin: border-box;
  box-shadow: none;
  clip-path: none;
  color: #7858bf;
  font-size: var(--type-body);
  font-weight: 600;
  text-decoration: none;
  image-rendering: pixelated;
  transition: filter .15s ease, transform .15s ease;
}
.legal-back:hover { filter: brightness(1.03); }
.legal-back:active { filter: brightness(.96); transform: translateY(1px); }
.legal-back .lucide { width: 17px; height: 17px; }
.legal-back:focus-visible { outline: 3px solid #90c2ff; outline-offset: 2px; }
.legal-effective { margin-bottom: 24px; color: #8c7b9e; font-size: var(--type-body); }
.legal-page section { padding: 18px 0; border-bottom: 1px solid #ddcef2; }
.legal-page section h2 { margin: 0 0 8px; color: #5031a4; font-size: var(--type-subtitle); }
.legal-page section p { margin: 0; }
.commerce-footer { width: var(--page-content-width); margin: 28px auto 96px; padding: 18px 0; border-top: 1px solid #ddcef2; color: #8b7b9c; }
.commerce-footer nav { display: flex; flex-wrap: wrap; gap: 12px; }
.commerce-footer a { display: inline-flex; min-height: 36px; align-items: center; padding: 6px 2px; color: #6f5995; font-size: var(--type-small); font-weight: 600; }
.commerce-footer nav button { min-height: 36px; padding: 6px 2px; border: 0; background: transparent; color: #6f5995; font: inherit; font-size: var(--type-small); font-weight: 600; text-decoration: underline; cursor: pointer; }
.commerce-footer p { margin: 7px 0 0; font-size: var(--type-label); line-height: 1.55; }
.analytics-consent,
.analytics-consent-actions button {
  --tamami-analytics-frame: url("/images/pixel_frame_input.svg?v=1");

  border: 14px solid transparent;
  border-image-source: var(--tamami-analytics-frame);
  border-image-slice: 14 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  background-clip: border-box;
  background-origin: border-box;
  box-shadow: none;
  clip-path: none;
  image-rendering: pixelated;
}
.analytics-consent {
  position: fixed;
  z-index: 110;
  right: 0;
  bottom: calc(94px + env(safe-area-inset-bottom, 0px));
  left: 0;
  display: flex;
  width: var(--page-content-width);
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 12px;
  color: #604d76;
}
.analytics-consent[hidden] { display: none; }
.analytics-consent strong { display: block; color: #5632ad; font-size: var(--type-body-lg); font-weight: 600; }
.analytics-consent p { margin: 5px 0 0; font-size: var(--type-label); line-height: 1.55; }
.analytics-consent-actions { display: flex; flex: 0 0 auto; gap: 7px; }
.analytics-consent-actions button {
  min-width: 64px;
  min-height: 48px;
  padding: 0 4px;
  color: #7650c6;
  font-size: var(--type-small);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: filter .15s ease, transform .15s ease;
}
.analytics-consent-actions .analytics-consent-accept {
  --tamami-analytics-frame: url("/images/pixel_frame_settings_primary.svg?v=1");

  color: #ffffff;
}
.analytics-consent-actions button:hover { filter: brightness(1.03); }
.analytics-consent-actions button:active { filter: brightness(.96); transform: translateY(1px); }
.analytics-consent-actions button:focus-visible { outline: 3px solid var(--ui-focus, #5a43bc); outline-offset: 2px; }

@media (max-width: 480px) {
  .analytics-consent { align-items: stretch; flex-direction: column; gap: 12px; }
  .analytics-consent-actions { justify-content: flex-end; }
}
.commerce-config-warning { color: #a24972; font-weight: 600; }
.report-credit-dialog,
.report-credit-dialog-icon,
.report-credit-dialog-note,
.report-credit-dialog-actions > * {
  border: 14px solid transparent;
  border-image-source: var(--report-dialog-frame);
  border-image-slice: 14 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  background-clip: border-box;
  background-origin: border-box;
  box-shadow: none;
  clip-path: none;
  image-rendering: pixelated;
}
.report-credit-dialog { --report-dialog-frame: url("/images/pixel_frame_input.svg?v=1"); width: min(400px, calc(100% - 32px)); max-width: 400px; margin: auto; padding: 0; overflow: visible; color: #604d76; }
.report-credit-dialog::backdrop { background: rgba(39, 25, 51, .55); backdrop-filter: blur(3px); }
.report-credit-dialog[open] { animation: report-credit-enter .2s ease-out; }
.report-credit-dialog-shell { position: relative; display: grid; justify-items: center; padding: 24px 18px 18px; text-align: center; }
.report-credit-dialog-icon { --report-dialog-frame: url("/images/pixel_frame_report_credit_dialog_icon.svg?v=1"); display: grid; width: 54px; height: 54px; color: #7c55cf; place-items: center; }
.report-credit-dialog-icon .lucide { width: 25px; height: 25px; }
.report-credit-dialog-eyebrow { margin: 14px 0 0; color: #9a70df; font-size: var(--type-label); font-weight: 600; letter-spacing: .08em; }
.report-credit-dialog h2 { margin: 5px 0 0; color: #4f2aa5; font-size: var(--type-section-title-lg); letter-spacing: -.025em; line-height: 1.4; word-break: keep-all; }
.report-credit-dialog h2 span { overflow-wrap: anywhere; }
.report-credit-dialog-description { margin: 10px 0 0; color: #806d99; font-size: var(--type-body); line-height: 1.65; word-break: keep-all; }
.report-credit-dialog strong { color: #6842b5; }
.report-credit-dialog-note { --report-dialog-frame: url("/images/pixel_frame_report_credit_dialog_note.svg?v=1"); display: flex; width: 100%; align-items: flex-start; justify-content: center; gap: 7px; margin: 18px 0 0; padding: 0; color: #806d99; font-size: var(--type-label); font-weight: 600; line-height: 1.55; word-break: keep-all; }
.report-credit-dialog-note .lucide { width: 14px; min-width: 14px; height: 14px; margin-top: 1px; color: #8d61dc; }
.report-credit-dialog-actions { display: grid; width: 100%; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 8px; margin-top: 20px; }
.report-credit-dialog-actions button,
.report-credit-dialog-actions a { display: flex; width: 100%; min-width: 0; height: 54px; min-height: 54px; align-items: center; justify-content: center; padding: 0 4px; appearance: none; font-size: var(--type-small); font-weight: 600; white-space: nowrap; text-align: center; cursor: pointer; text-decoration: none; }
.report-credit-dialog-actions > [hidden] { display: none; }
.report-credit-dialog-cancel { --report-dialog-frame: url("/images/pixel_frame_report_credit_dialog_cancel.svg?v=1"); grid-column: 1; grid-row: 1; color: #765f8b; }
.report-credit-dialog-confirm { --report-dialog-frame: url("/images/pixel_frame_settings_primary.svg?v=1"); grid-column: 2; grid-row: 1; color: #fff; }
.report-credit-dialog-actions > * { transition: filter .15s ease; }
.report-credit-dialog-actions > :hover { filter: brightness(1.03); }
.report-credit-dialog-actions > :active { filter: brightness(.96); transform: translateY(1px); }
.report-credit-dialog-actions > :focus-visible { outline: 3px solid var(--ui-focus, #5a43bc); outline-offset: 2px; }
.report-credit-dialog-actions > :disabled { cursor: not-allowed; filter: grayscale(.18); opacity: .5; transform: none; }
@keyframes report-credit-enter { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .report-credit-dialog[open] { animation: none; } }
@media (max-width: 420px) {
  .report-credit-dialog-shell { padding: 22px 12px 12px; }
  .report-credit-dialog-actions { grid-template-columns: 1fr; }
  .report-credit-dialog-cancel,
  .report-credit-dialog-confirm { grid-column: 1; grid-row: auto; }
}
@media (max-width: 520px) {
  .checkout-fields { grid-template-columns: 1fr; }
  .checkout-order-hero { min-height: 0; grid-template-columns: 1fr; gap: 18px; padding: 22px 18px; }
  .checkout-order-copy h1 { font-size: var(--type-page-title); }
  .checkout-order-total { width: 100%; min-width: 0; grid-template-columns: 1fr auto; align-items: end; justify-items: start; padding: 14px 16px; }
  .checkout-order-total strong { grid-row: 1 / span 2; grid-column: 2; align-self: center; }
  .checkout-order-total small { grid-column: 1; }
  .checkout-product { grid-template-columns: 62px minmax(0, 1fr); padding: 17px 16px; }
  .checkout-product-icon { width: 56px; height: 48px; }
  .checkout-secure-label { font-size: var(--type-label); }
  .checkout-action { padding: 13px 12px 15px; }
  .checkout-submit { min-height: 54px; }
}
.pixel-orb { position: absolute; top: 46px; left: 50%; display: grid; width: 176px; height: 176px; transform: translateX(-50%); border: 7px solid #f8f3ff; border-radius: 50%; background: #c7aaf5; box-shadow: 0 0 0 5px #8d68d5, inset 12px 12px 0 #ddcefb; place-items: center; }
.pixel-orb span { color: #fff7a8; font-size: var(--type-display-xxl); text-shadow: 5px 5px 0 #8b64d6; }
.pixel-orb-base { position: absolute; top: 170px; left: 50%; width: 220px; height: 66px; transform: translateX(-50%); border: 5px solid #7952c5; border-radius: 8px; background: #9f78df; box-shadow: inset 0 -14px 0 #7e58c5, 0 8px 0 #d4c0f4; }
.dashboard-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 24px; border: 0; }
.dashboard-item { display: grid; min-width: 0; min-height: 126px; align-content: center; gap: 6px; padding: 16px; border: 2px solid #dfd1f5; border-radius: 8px; background: #fbf5fe; box-shadow: 0 3px 0 #eee6fa; text-decoration: none; }
.dashboard-item i { color: #7a50d0; font-size: var(--type-page-title); font-style: normal; }
.dashboard-item strong { font-size: var(--type-section-title); }
.dashboard-item span { color: #806f9f; font-size: var(--type-body-lg); overflow-wrap: anywhere; }
.dashboard-service-catalog { display: grid; min-width: 0; gap: 22px; margin-top: 20px; }
.dashboard-service-group {
  --service-accent: #7650c6;
  --service-soft: #f7f0ff;
  --service-icon: #ede2ff;
  --dashboard-service-group-frame-image: url("/images/pixel_frame_home_service_group_purple.svg?v=2");
  --dashboard-service-card-frame-image: url("/images/pixel_frame_home_service_purple.svg?v=2");

  box-sizing: border-box;
  min-width: 0;
  padding: 10px 6px 5px;
  border: 14px solid transparent;
  border-image-source: var(--dashboard-service-group-frame-image);
  border-image-slice: 14 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  background-clip: border-box;
  background-origin: border-box;
  box-shadow: none;
  clip-path: none;
  image-rendering: pixelated;
}
.dashboard-service-group--reports { --service-accent: #6d55bd; --service-soft: #f8f2ff; --service-icon: #eee5ff; }
.dashboard-service-group--compatibility {
  --service-accent: #a25291;
  --service-soft: #fff3fb;
  --service-icon: #f9def1;
  --dashboard-service-group-frame-image: url("/images/pixel_frame_home_service_group_pink.svg?v=2");
  --dashboard-service-card-frame-image: url("/images/pixel_frame_home_service_pink.svg?v=2");
}
.dashboard-service-heading { display: flex; min-height: 30px; align-items: center; justify-content: space-between; gap: 12px; padding-inline: 3px; }
.dashboard-service-heading h2 {
  margin: 0;
  color: #4f2a98;
  font-family: 'AppNumerals', 'Binggre', 'SchoolSafeUniverse', 'Pretendard', system-ui, sans-serif;
  font-size: var(--type-section-title);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -.025em;
}
.dashboard-service-all-link { display: inline-flex; min-height: 28px; flex: 0 0 auto; align-items: center; gap: 3px; padding: 4px 2px 4px 8px; color: #9b84bf; font-size: var(--type-caption); font-weight: 600; text-decoration: none; transition: color .16s ease, transform .16s ease; }
.dashboard-service-all-link:hover { color: #7045b8; transform: translateX(2px); }
.dashboard-service-all-link:focus-visible { border-radius: 5px; outline: 2px solid #7c50c9; outline-offset: 2px; }
.dashboard-service-all-link .lucide { width: 13px; height: 13px; }
.dashboard-service-track {
  display: grid;
  width: 100%;
  max-width: 100%;
  grid-auto-columns: 160px;
  grid-auto-flow: column;
  gap: 8px;
  margin: 4px 0 0;
  padding: 4px 0 7px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scrollbar-color: #c7afea transparent;
  scrollbar-width: thin;
  scroll-padding-inline: 2px;
  scroll-snap-type: inline proximity;
  list-style: none;
}
.dashboard-service-track::-webkit-scrollbar { height: 4px; }
.dashboard-service-track::-webkit-scrollbar-track { background: transparent; }
.dashboard-service-track::-webkit-scrollbar-thumb { border-radius: 99px; background: #c7afea; }
.dashboard-service-track > li { min-width: 0; scroll-snap-align: start; }
.dashboard-service-card {
  position: relative;
  box-sizing: border-box;
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 5px;
  padding: 0;
  overflow: visible;
  border: 14px solid transparent;
  border-image-source: var(--dashboard-service-card-frame-image);
  border-image-slice: 14 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  background-clip: border-box;
  background-origin: border-box;
  box-shadow: none;
  clip-path: none;
  color: #4d327c;
  text-decoration: none;
  image-rendering: pixelated;
  transition: filter .15s ease, transform .15s ease;
}
.dashboard-service-card:hover { filter: brightness(1.02); transform: translateY(-2px); }
.dashboard-service-card:active { filter: brightness(.98); transform: translateY(1px); }
.dashboard-service-card:focus-visible { outline: 3px solid var(--ui-focus, #5a43bc); outline-offset: 2px; }
.dashboard-service-card__badge { position: absolute; z-index: 2; top: -6px; right: -6px; display: inline-flex; min-height: 18px; align-items: center; justify-content: center; padding: 2px 6px; border: 1px solid #b79bdc; border-radius: 999px; background: #f1e8ff; box-shadow: 1px 1px 0 rgb(104 72 161 / 22%); color: #67429e; font-size: var(--type-caption); font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.dashboard-service-card__badge--free { border-color: #d5ab55; background: #fff3ba; color: #80571d; }
.dashboard-service-card__badge--preview { border-color: #ad8ad9; background: #efe3ff; color: #68429d; }
.dashboard-service-card__header { display: grid; width: 100%; min-width: 0; grid-template-columns: 44px minmax(0, 1fr); align-items: start; gap: 8px; }
.dashboard-service-card__icon { display: grid; width: 44px; height: 44px; border-radius: 11px; background: var(--service-icon); place-items: center; }
.dashboard-service-card__icon img { width: 41px; height: 41px; object-fit: contain; image-rendering: pixelated; }
.dashboard-service-group--fortune .dashboard-service-card__icon img { width: calc(41px * 2 / 3); height: calc(41px * 2 / 3); place-self: center; object-position: center; }
.dashboard-service-card__copy { display: grid; min-width: 0; gap: 2px; }
.dashboard-service-card__copy small { color: var(--service-accent); font-size: var(--type-caption); font-weight: 700; line-height: 1.3; word-break: keep-all; }
.dashboard-service-card__copy strong { color: #4b2d86; font-size: var(--type-body); font-weight: 700; line-height: 1.3; word-break: keep-all; }

/* 홈 사주 리포트: 주제색 위에 큰 타마미 장면을 조용한 배경으로 사용한다. */
.dashboard-service-group--reports .dashboard-service-track {
  grid-auto-columns: max-content;
}
.dashboard-service-group--reports .dashboard-service-card {
  --home-report-accent: #8c77ce;
  --home-report-title: #4f299d;
  --dashboard-service-card-frame-image: url("/images/pixel_frame_home_report_core.svg?v=1");

  width: max-content;
  min-height: 84px;
  align-content: center;
}
.dashboard-service-group--reports .dashboard-service-card__header {
  position: relative;
  display: block;
  width: max-content;
  min-width: 0;
  min-height: 56px;
  overflow: hidden;
  isolation: isolate;
}
.dashboard-service-group--reports .dashboard-service-card__icon {
  position: absolute;
  z-index: 0;
  inset: 0 auto 0 0;
  display: block;
  width: 64px;
  height: 100%;
  border-radius: 0;
  background: transparent;
  opacity: 1;
  pointer-events: none;
}
.dashboard-service-group--reports .dashboard-service-card__icon img,
.dashboard-service-group--reports .dashboard-service-card__icon img.tamami-speech-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
  transform: none;
  filter: none;
}
.dashboard-service-group--reports .dashboard-service-card__copy {
  position: relative;
  z-index: 1;
  width: max-content;
  min-height: 56px;
  align-content: center;
  gap: 4px;
  padding: 2px 0 2px 64px;
}
.dashboard-service-group--reports .dashboard-service-card__copy small {
  color: var(--home-report-accent);
}
.dashboard-service-group--reports .dashboard-service-card__copy strong {
  max-width: none;
  color: var(--home-report-title);
  font-size: var(--type-body-lg);
  line-height: 1.38;
  white-space: nowrap;
}
.dashboard-service-group--reports .dashboard-service-card--work-money {
  --home-report-accent: #d39b2d;
  --home-report-title: #765134;
  --dashboard-service-card-frame-image: url("/images/pixel_frame_home_report_work_money.svg?v=1");
}
.dashboard-service-group--reports .dashboard-service-card--love {
  --home-report-accent: #e58bcb;
  --home-report-title: #8f416d;
  --dashboard-service-card-frame-image: url("/images/pixel_frame_home_report_love.svg?v=1");
}
.dashboard-service-group--reports .dashboard-service-card--life-flow {
  --home-report-accent: #7898eb;
  --home-report-title: #405b96;
  --dashboard-service-card-frame-image: url("/images/pixel_frame_home_report_life_flow.svg?v=1");
}
.dashboard-service-group--reports .dashboard-service-card--mental-emotion {
  --home-report-accent: #8c77ce;
  --home-report-title: #5a43bc;
  --dashboard-service-card-frame-image: url("/images/pixel_frame_home_report_mental_emotion.svg?v=1");
}
.dashboard-service-group--reports .dashboard-service-card--relationship {
  --home-report-accent: #78ad6a;
  --home-report-title: #456d43;
  --dashboard-service-card-frame-image: url("/images/pixel_frame_home_report_relationship.svg?v=1");
}
.dashboard-service-group--reports .dashboard-service-card--independence-living {
  --home-report-accent: #b47c49;
  --home-report-title: #765134;
  --dashboard-service-card-frame-image: url("/images/pixel_frame_home_report_independence_living.svg?v=1");
}
.dashboard-service-group--reports .dashboard-service-card--stay-move {
  --home-report-accent: #6faeca;
  --home-report-title: #356d8e;
  --dashboard-service-card-frame-image: url("/images/pixel_frame_home_report_stay_move.svg?v=1");
}
.dashboard-service-group--reports .dashboard-service-card--astrology {
  --home-report-accent: #7762bc;
  --home-report-title: #4c3f96;
  --dashboard-service-card-frame-image: url("/images/pixel_frame_home_report_astrology.svg?v=1");
}
.dashboard-service-group--reports .dashboard-service-card--astrology .dashboard-service-card__icon {
  display: grid;
  place-items: center start;
}
.dashboard-service-group--reports .dashboard-service-card--astrology .dashboard-service-card__icon img,
.dashboard-service-group--reports .dashboard-service-card--astrology .dashboard-service-card__icon img.tamami-speech-icon {
  width: 51px;
  height: 45px;
}
.home-new-year-entry {
  position: relative;
  isolation: isolate;
  padding: 8px 6px;
}
.home-new-year-entry::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -10px;
  pointer-events: none;
  background: url("/images/new-year/home-new-year-dawn.png") right center / max(100%, 560px) auto no-repeat;
  image-rendering: pixelated;
  /* Clip only the scenery inside the existing filled 14px frame and its bevel. */
  clip-path: polygon(
    10px 0, calc(100% - 10px) 0,
    calc(100% - 10px) 2px, calc(100% - 6px) 2px,
    calc(100% - 6px) 6px, calc(100% - 2px) 6px,
    calc(100% - 2px) 10px, 100% 10px,
    100% calc(100% - 10px), calc(100% - 2px) calc(100% - 10px),
    calc(100% - 2px) calc(100% - 6px), calc(100% - 6px) calc(100% - 6px),
    calc(100% - 6px) calc(100% - 2px), calc(100% - 10px) calc(100% - 2px),
    calc(100% - 10px) 100%, 10px 100%,
    10px calc(100% - 2px), 6px calc(100% - 2px),
    6px calc(100% - 6px), 2px calc(100% - 6px),
    2px calc(100% - 10px), 0 calc(100% - 10px),
    0 10px, 2px 10px, 2px 6px, 6px 6px, 6px 2px, 10px 2px
  );
}
.home-new-year-entry__link {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px;
  align-items: center;
  gap: 16px;
  padding: 4px;
  color: #4c30af;
  text-decoration: none;
}
.home-new-year-entry__copy { min-width: 0; }
.home-new-year-entry__copy h2 {
  margin: 0;
  font-size: var(--type-section-title);
  font-weight: 600;
  line-height: 1.4;
  word-break: keep-all;
}
.home-new-year-entry__copy p {
  margin: 8px 0 12px;
  color: #6b667a;
  font-size: var(--type-body);
  line-height: 1.7;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.home-new-year-entry__action { display: inline-flex; align-items: center; gap: 6px; color: #5a43bc; font-size: var(--type-small); }
.home-new-year-entry__action .lucide { width: 16px; height: 16px; }
.home-new-year-entry__art { display: block; width: 112px; height: 112px; object-fit: contain; image-rendering: pixelated; }
.home-new-year-entry__link:is(:hover, :focus-visible) .home-new-year-entry__action { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 480px) {
  .home-new-year-entry::before {
    opacity: .85;
    mask-image: linear-gradient(to right, transparent 15%, rgb(0 0 0 / 15%) 45%, #000 85%);
  }
  .home-new-year-entry__link { grid-template-columns: minmax(0, 1fr) 72px; gap: 8px; }
  .home-new-year-entry__art { width: 72px; height: 72px; }
}
.home-notice-section,
.notice-index-panel,
.notice-dialog {
  --notice-frame-image: url("/images/pixel_frame_home_service_group_purple.svg?v=2");

  box-sizing: border-box;
  border: 14px solid transparent;
  border-image-source: var(--notice-frame-image);
  border-image-slice: 14 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  background-clip: border-box;
  background-origin: border-box;
  box-shadow: none;
  clip-path: none;
  image-rendering: pixelated;
}
.home-notice-section { min-width: 0; margin-top: 22px; padding: 10px 9px 7px; }
.home-notice-section__heading { display: flex; min-height: 30px; align-items: center; justify-content: space-between; gap: 12px; padding-inline: 3px; }
.home-notice-section__heading h2 { margin: 0; color: #4c30af; font-size: var(--type-section-title); line-height: 1.3; }
.notice-list { margin: 6px 0 0; padding: 0; list-style: none; }
.notice-list li + li { border-top: 1px solid #f0e9fd; }
.notice-list__button {
  display: grid;
  width: 100%;
  min-height: 62px;
  grid-template-columns: minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 11px;
  padding: 10px 5px;
  border: 0;
  background: transparent;
  color: #6b667a;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.notice-list__button:hover { background: rgb(240 233 253 / 45%); }
.notice-list__button:focus-visible { outline: 3px solid var(--ui-focus, #5a43bc); outline-offset: 1px; }
.notice-list__main { display: flex; min-width: 0; align-items: center; gap: 8px; }
.notice-list__main strong { min-width: 0; color: #5a43bc; font-size: var(--type-body); font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; word-break: keep-all; }
.notice-list__button time { color: #8f88a6; font-size: var(--type-caption); white-space: nowrap; }
.notice-list__button > .lucide { width: 16px; height: 16px; color: #a18dde; }
.notice-important-badge {
  --notice-badge-frame: url("/images/pixel_badge_new_pink.svg?v=1");
  --notice-badge-slice: 3;

  box-sizing: border-box;
  display: inline-grid;
  min-height: 22px;
  flex: 0 0 auto;
  align-items: center;
  padding: 0 3px;
  border: calc(var(--notice-badge-slice) * 1px) solid transparent;
  border-image-source: var(--notice-badge-frame);
  border-image-slice: var(--notice-badge-slice) fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  clip-path: none;
  color: #4c30af;
  font-size: var(--type-caption);
  font-weight: 700;
  line-height: 14px;
  white-space: nowrap;
  image-rendering: pixelated;
  transform: none;
}
.notice-dialog {
  width: min(560px, calc(100% - 32px));
  max-width: 560px;
  max-height: calc(100svh - 32px);
  margin: auto;
  padding: 0;
  overflow: visible;
  color: #6b667a;
}
.notice-dialog::backdrop { background: rgb(45 28 68 / 58%); backdrop-filter: blur(3px); }
.notice-dialog[open] { animation: notice-dialog-enter 160ms ease-out both; }
.notice-dialog__shell { display: grid; max-height: calc(100svh - 60px); grid-template-rows: auto minmax(0, 1fr) auto; padding: 20px 18px 16px; }
.notice-dialog__header { position: relative; padding: 0 42px 17px 0; border-bottom: 1px solid #f0e9fd; }
.notice-dialog__header > div { display: flex; min-height: 22px; align-items: center; gap: 9px; }
.notice-dialog__header time { color: #8f88a6; font-size: var(--type-caption); }
.notice-dialog__header h2 { margin: 9px 0 0; color: #4c30af; font-size: var(--type-section-title-lg); line-height: 1.45; overflow-wrap: anywhere; word-break: keep-all; }
.notice-dialog__icon-close { position: absolute; top: 0; right: 0; display: grid; width: 38px; height: 38px; padding: 0; border: 0; background: transparent; color: #7762bc; cursor: pointer; place-items: center; }
.notice-dialog__icon-close .lucide { width: 20px; height: 20px; }
.notice-dialog__icon-close:focus-visible { outline: 3px solid var(--ui-focus, #5a43bc); outline-offset: 1px; }
.notice-dialog__body { min-height: 100px; padding: 20px 3px; overflow: auto; overscroll-behavior: contain; }
.notice-dialog__body p { margin: 0; color: #6b667a; font-size: var(--type-body); line-height: 1.8; overflow-wrap: anywhere; word-break: keep-all; }
.notice-dialog__body p + p { margin-top: 14px; }
.notice-dialog__footer { padding-top: 4px; }
.notice-dialog__close {
  --notice-action-frame: url("/images/pixel_frame_settings_primary.svg?v=1");

  appearance: none;
  box-sizing: border-box;
  display: inline-flex;
  width: 100%;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 14px solid transparent;
  border-image-source: var(--notice-action-frame);
  border-image-slice: 14 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  background-clip: border-box;
  background-origin: border-box;
  box-shadow: none;
  clip-path: none;
  color: #fff;
  font-size: var(--type-body);
  font-weight: 600;
  cursor: pointer;
  image-rendering: pixelated;
  transition: filter .15s ease, transform .15s ease;
}
.notice-dialog__close:hover { filter: brightness(1.03); }
.notice-dialog__close:active { filter: brightness(.96); transform: translateY(1px); }
.notice-dialog__close:focus-visible { outline: 3px solid var(--ui-focus, #5a43bc); outline-offset: 2px; }
@keyframes notice-dialog-enter { from { opacity: 0; } to { opacity: 1; } }
.notice-page { padding-top: 46px; padding-bottom: 110px; }
.notice-page__heading { margin-bottom: 25px; }
.notice-page__heading h1 { margin: 0; color: #4c30af; font-size: var(--type-page-title-lg); line-height: 1.35; }
.notice-page__heading span { display: block; margin-top: 9px; color: #6b667a; font-size: var(--type-body-lg); line-height: 1.7; word-break: keep-all; }
.notice-index-panel { padding: 13px 14px 10px; }
.notice-index-panel .notice-list { margin-top: 0; }
.notice-index-empty { margin: 0; padding: 70px 16px; color: #8f88a6; font-size: var(--type-body); text-align: center; }
.notice-pagination { display: grid; grid-template-columns: 80px 1fr 80px; align-items: center; gap: 12px; margin-top: 18px; text-align: center; }
.notice-pagination a { min-height: 44px; color: #5a43bc; font-size: var(--type-small); font-weight: 600; line-height: 44px; text-decoration: none; }
.notice-pagination a:last-child { grid-column: 3; }
.notice-pagination span { grid-column: 2; grid-row: 1; color: #8f88a6; font-size: var(--type-small); }
.admin-notice-form textarea { width: 100%; padding: 12px; border: 1px solid #cfd5dc; border-radius: 6px; background: #fff; color: #202632; font: inherit; line-height: 1.65; resize: vertical; }
.admin-notice-form textarea:focus { border-color: #344863; outline: 3px solid rgb(52 72 99 / 15%); }
.admin-notice-form label.admin-confirm-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border: 1px solid #d9dee4;
  border-radius: 7px;
  background: #f8f9fa;
  cursor: pointer;
}
.admin-notice-form .admin-confirm-check input[type="checkbox"] {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  padding: 0;
  accent-color: #344863;
}
.admin-notice-form .admin-confirm-check span { display: grid; gap: 3px; }
.admin-notice-form .admin-confirm-check strong { color: #384251; font-size: var(--type-label); }
.admin-notice-form .admin-confirm-check small { color: #687383; font-size: var(--type-caption); font-weight: 400; line-height: 1.5; }
.admin-notice-form input.admin-primary-button[type="submit"] {
  width: auto;
  min-width: 150px;
  justify-self: end;
  border: 0;
  background: #344863;
  color: #fff;
}
.admin-notice-actions { margin-top: 18px; }
@media (max-width: 520px) {
  .home-notice-section { margin-top: 18px; padding: 7px 3px 4px; }
  .home-notice-section__heading h2 { font-size: var(--type-card-title); }
  .notice-list__button { min-height: 66px; grid-template-columns: minmax(0, 1fr) 16px; gap: 7px; padding: 9px 3px; }
  .notice-list__main { align-items: flex-start; flex-direction: column; gap: 4px; }
  .notice-list__button time { grid-column: 1; grid-row: 2; }
  .notice-list__button > .lucide { grid-column: 2; grid-row: 1 / 3; }
  .notice-dialog { width: calc(100% - 16px); max-height: calc(100svh - 12px); }
  .notice-dialog__shell { max-height: calc(100svh - 40px); padding: 17px 10px 10px; }
  .notice-dialog__header h2 { font-size: var(--type-section-title); }
  .notice-dialog__body { padding: 17px 2px; }
  .notice-page { padding-top: 28px; }
  .notice-page__heading h1 { font-size: var(--type-page-title); }
  .notice-page__heading span { font-size: var(--type-body); }
  .notice-index-panel { padding: 8px 4px 5px; }
  .admin-notice-form input.admin-primary-button[type="submit"] { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .notice-dialog[open] { animation: none; }
  .notice-dialog__close { transition: none; }
}
.home-popular-saju-ticker {
  --home-popular-saju-frame: url("/images/pixel_frame_home_service_group_pink.svg?v=2");

  box-sizing: border-box;
  position: relative;
  display: grid;
  width: 100%;
  min-height: 48px;
  grid-template-columns: max-content max-content max-content minmax(0, 1fr) max-content;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0 10px;
  border: 14px solid transparent;
  border-image-source: var(--home-popular-saju-frame);
  border-image-slice: 14 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  background-clip: border-box;
  background-origin: border-box;
  box-shadow: none;
  clip-path: none;
  color: #4c30af;
  image-rendering: pixelated;
}
.home-popular-saju-ticker__link {
  position: absolute;
  inset: -14px;
  z-index: 1;
  cursor: pointer;
}
.home-popular-saju-ticker__link:focus-visible {
  outline: 2px solid #4c30af;
  outline-offset: -4px;
}
.home-popular-saju-ticker__cta,
.home-popular-saju-ticker__art,
.home-popular-saju-ticker h2,
.home-popular-saju-ticker__point,
.home-popular-saju-ticker__viewport {
  position: relative;
  z-index: 2;
  pointer-events: none;
}
.home-popular-saju-ticker__art {
  display: block;
  width: 24px;
  height: 17px;
  object-fit: contain;
  image-rendering: pixelated;
}
.home-popular-saju-ticker__cta {
  box-sizing: border-box;
  display: inline-flex;
  width: max-content;
  height: 22px;
  min-height: 22px;
  align-items: center;
  justify-content: center;
  padding: 0 7px;
  border: 3px solid transparent;
  border-image: url("/images/pixel_badge_new_pink.svg?v=1") 3 fill / 3px / 0 stretch;
  border-radius: 0;
  background: transparent;
  color: #fff;
  font-size: var(--type-caption);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}
.home-popular-saju-ticker h2 {
  margin: 0;
  color: #5a43bc;
  font-size: var(--type-label);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.home-popular-saju-ticker h2 span,
.home-popular-saju-ticker__point { color: #e58bcb; }
.home-popular-saju-ticker__point { font-size: var(--type-small); line-height: 1; }
.home-popular-saju-ticker__viewport {
  position: relative;
  min-width: 0;
  height: 22px;
  overflow: hidden;
}
.home-popular-saju-ticker__item {
  position: absolute;
  inset: 0;
  display: flex;
  min-width: 0;
  align-items: center;
  color: #4c30af;
  font-size: var(--type-body);
  font-weight: 700;
  line-height: 22px;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  text-decoration: underline;
  text-decoration-color: #f4b5da;
  text-decoration-thickness: 3px;
  text-underline-offset: 3px;
  transform: translateY(120%);
  transition: opacity .38s ease, transform .38s ease;
  white-space: nowrap;
}
.home-popular-saju-ticker__item span { overflow: hidden; text-overflow: ellipsis; }
.home-popular-saju-ticker__item.is-active {
  opacity: 1;
  transform: translateY(0);
}
.home-popular-saju-ticker__item.is-leaving { transform: translateY(-120%); }
@media (prefers-reduced-motion: reduce) {
  .home-popular-saju-ticker__item { transition: none; }
}
.dashboard-secondary-services { margin-top: 20px; }
.dashboard-secondary-shortcuts { position: relative; margin-top: 8px; }
/* Fixed-size artwork keeps the stepped outline and tail on one pixel surface. */
.home-tamami-invitation {
  --home-tamami-invitation-art: url("/images/home_tamami_invitation.svg?v=2");
  --home-tamami-invitation-text: #4c30af;
  position: absolute;
  z-index: 3;
  bottom: calc(100% - 10px);
  left: 24px;
  display: flex;
  box-sizing: border-box;
  width: 184px;
  height: 56px;
  padding: 0 12px 14px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: 0;
  background: var(--home-tamami-invitation-art) no-repeat;
  background-size: 184px 56px;
  box-shadow: none;
  clip-path: none;
  color: var(--home-tamami-invitation-text);
  font-size: var(--type-small);
  font-weight: 600;
  line-height: 20px;
  white-space: nowrap;
  image-rendering: pixelated;
  pointer-events: none;
  transform: none;
}
.home-tamami-invitation__icon {
  display: block;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  object-fit: contain;
  image-rendering: pixelated;
}
.home-service-catalog-jump {
  --home-catalog-jump-frame: url("/images/pixel_frame_input.svg?v=1");
  --home-catalog-jump-text: #4c30af;

  box-sizing: border-box;
  display: flex;
  width: max-content;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 4px auto 4px;
  padding: 0;
  border: 14px solid transparent;
  border-image-source: var(--home-catalog-jump-frame);
  border-image-slice: 14 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  clip-path: none;
  color: var(--home-catalog-jump-text);
  font-size: 8pt;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  image-rendering: pixelated;
}
/* Use the frame's filled inner area without compressing its pixel corners. */
.home-service-catalog-jump > span { margin-block: -4px; }
.home-service-catalog-jump:hover { filter: brightness(1.03); }
.home-service-catalog-jump:active { transform: translateY(1px); }
.home-service-catalog-jump:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
#home-service-fortune { scroll-margin-top: 94px; }
@media (prefers-reduced-motion: no-preference) {
  html:has(.home-service-catalog-jump) { scroll-behavior: smooth; }
}
.report-product-card[id] { scroll-margin-top: 94px; }
.dashboard-shortcuts { display: grid; width: 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 18px auto 0; }
.dashboard-shortcut {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 108px;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  justify-items: center;
  gap: 8px;
  padding: 2px 0 4px;
  border-style: solid;
  border-width: 14px;
  border-image: url('data:image/svg+xml;utf8,<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14 2H34V4H38V6H42V10H44V14H46V34H44V38H42V42H38V44H34V46H14V44H10V42H6V38H4V34H2V14H4V10H6V6H10V4H14V2Z" fill="%23f5edfc"/><rect x="14" y="2" width="20" height="2" fill="%23ffffff"/><rect x="10" y="4" width="4" height="2" fill="%23ffffff"/><rect x="6" y="6" width="4" height="2" fill="%23ffffff"/><rect x="4" y="8" width="2" height="4" fill="%23ffffff"/><rect x="2" y="12" width="2" height="22" fill="%23ffffff"/><rect x="44" y="14" width="2" height="22" fill="%23b290e8"/><rect x="42" y="36" width="2" height="4" fill="%23b290e8"/><rect x="38" y="40" width="4" height="2" fill="%23b290e8"/><rect x="34" y="42" width="4" height="2" fill="%23b290e8"/><rect x="14" y="44" width="20" height="2" fill="%23b290e8"/><rect x="14" y="0" width="20" height="2" fill="%23896bcc"/><rect x="10" y="2" width="4" height="2" fill="%23896bcc"/><rect x="6" y="4" width="4" height="2" fill="%23896bcc"/><rect x="4" y="6" width="2" height="4" fill="%23896bcc"/><rect x="2" y="10" width="2" height="4" fill="%23896bcc"/><rect x="0" y="14" width="2" height="20" fill="%23896bcc"/><rect x="34" y="2" width="4" height="2" fill="%23896bcc"/><rect x="38" y="4" width="4" height="2" fill="%23896bcc"/><rect x="42" y="6" width="2" height="4" fill="%23896bcc"/><rect x="44" y="10" width="2" height="4" fill="%23896bcc"/><rect x="46" y="14" width="2" height="20" fill="%23896bcc"/><rect x="2" y="34" width="2" height="4" fill="%23896bcc"/><rect x="4" y="38" width="2" height="4" fill="%23896bcc"/><rect x="6" y="42" width="4" height="2" fill="%23896bcc"/><rect x="10" y="44" width="4" height="2" fill="%23896bcc"/><rect x="14" y="46" width="20" height="2" fill="%23896bcc"/><rect x="44" y="34" width="2" height="4" fill="%23896bcc"/><rect x="42" y="38" width="2" height="4" fill="%23896bcc"/><rect x="38" y="42" width="4" height="2" fill="%23896bcc"/><rect x="34" y="44" width="4" height="2" fill="%23896bcc"/></svg>') 14 fill stretch;
  color: #4b2d86;
  text-decoration: none;
  image-rendering: pixelated;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.dashboard-shortcut i { display: grid; width: 52px; height: 52px; background-image: var(--shortcut-icon, none); background-position: center; background-repeat: no-repeat; background-size: var(--shortcut-icon-size, contain); color: transparent; text-shadow: none; image-rendering: pixelated; place-items: center; }
.dashboard-shortcut strong { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 4px; padding: 0 4px; color: #4b2d86; font-size: var(--type-body); font-weight: 600; white-space: nowrap; }
.dashboard-shortcut .sparkle { display: flex; flex: 1; align-items: center; color: #896bcc; font-size: var(--type-caption); font-weight: 400; opacity: 0.85; }
.dashboard-shortcut .sparkle--left { justify-content: flex-start; }
.dashboard-shortcut .sparkle--left::after { display: block; flex: 1; height: 1px; margin-left: 4px; border-bottom: 1px dotted #b290e8; content: ""; }
.dashboard-shortcut .sparkle--right { justify-content: flex-end; }
.dashboard-shortcut .sparkle--right::before { display: block; flex: 1; height: 1px; margin-right: 4px; border-bottom: 1px dotted #b290e8; content: ""; }
.dashboard-shortcut:hover { transform: translateY(-2px); filter: brightness(1.02); }
.dashboard-shortcut:active { transform: translateY(1px); }
.shortcut-fortune { --shortcut-icon: var(--shortcut-fortune-image, url("/images/home_shortcut_fortune.png")); --shortcut-icon-size: 190%; }
.daily-fortune-notification {
  --daily-fortune-notification-frame: url("/images/pixel_badge_daily_fortune.svg?v=2");
  position: absolute;
  top: -6px;
  right: -6px;
  z-index: 1;
  display: block;
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  padding: 0;
  border: 4px solid transparent;
  border-image-source: var(--daily-fortune-notification-frame);
  border-image-slice: 4 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  clip-path: none;
  transform: none;
  image-rendering: pixelated;
  pointer-events: none;
}
.daily-fortune-notification[hidden] { display: none; }
.shortcut-history { --shortcut-icon: var(--shortcut-history-image, url("/images/home_shortcut_history.png")); --shortcut-icon-size: 190%; }
.shortcut-report { --shortcut-icon: var(--shortcut-report-image, url("/images/home_shortcut_report.png")); --shortcut-icon-size: 190%; }
.shortcut-compatibility { --shortcut-icon: var(--shortcut-compatibility-image, url("/images/home_shortcut_compatibility.png")); --shortcut-icon-size: 190%; }
.shortcut-tamami { --shortcut-icon: var(--shortcut-tamami-image, url("/images/tamami/미니_웃는얼굴.png")); --shortcut-icon-size: contain; }
.shortcut-archives { --shortcut-icon: var(--shortcut-archives-image, url("/images/home_shortcut_archives.png")); --shortcut-icon-size: auto 90%; }
.shortcut-profile { --shortcut-icon: var(--shortcut-profile-image, url("/images/home_shortcut_profile.png")); --shortcut-icon-size: 90% auto; }
.shortcut-wallet { --shortcut-icon: url("/images/home_shortcut_wallet.png"); --shortcut-icon-size: auto 90%; }
.dashboard-shortcut--placeholder { cursor: default; filter: saturate(.65); opacity: .68; }
.dashboard-shortcut--placeholder:hover,
.dashboard-shortcut--placeholder:active { transform: none; filter: saturate(.65); }
.dashboard-shortcut--placeholder strong { color: #806f9f; }
:is(.guest-tamami-about-banner, .home-tamabuddy-entry) {
  --tamami-about-frame: url("/images/pixel_frame_home_tamami_about.svg?v=1");
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: 124px;
  grid-template-columns: minmax(0, 1fr) 30px;
  align-items: center;
  gap: 18px;
  margin-top: 18px;
  padding: 6px 18px 6px 14px;
  overflow: visible;
  border: 14px solid transparent;
  border-image-source: var(--tamami-about-frame);
  border-image-slice: 14 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  background-clip: border-box;
  background-origin: border-box;
  box-shadow: none;
  clip-path: none;
  color: #4c30af;
  text-decoration: none;
  image-rendering: pixelated;
  transition: filter .15s ease, transform .15s ease;
}
:is(.guest-tamami-about-banner, .home-tamabuddy-entry)::before {
  position: absolute;
  z-index: 0;
  /* Absolute positioning starts at the padding box. Reach across the 14px
     slice, then crop only the artwork to the SVG's inner 2px contour.
     The frame owner stays unclipped so every outline pixel remains intact. */
  inset: -14px;
  clip-path: polygon(
    14px 2px, calc(100% - 14px) 2px,
    calc(100% - 14px) 4px, calc(100% - 10px) 4px,
    calc(100% - 10px) 6px, calc(100% - 6px) 6px,
    calc(100% - 6px) 10px, calc(100% - 4px) 10px,
    calc(100% - 4px) 14px, calc(100% - 2px) 14px,
    calc(100% - 2px) calc(100% - 14px), calc(100% - 4px) calc(100% - 14px),
    calc(100% - 4px) calc(100% - 10px), calc(100% - 6px) calc(100% - 10px),
    calc(100% - 6px) calc(100% - 6px), calc(100% - 10px) calc(100% - 6px),
    calc(100% - 10px) calc(100% - 4px), calc(100% - 14px) calc(100% - 4px),
    calc(100% - 14px) calc(100% - 2px), 14px calc(100% - 2px),
    14px calc(100% - 4px), 10px calc(100% - 4px),
    10px calc(100% - 6px), 6px calc(100% - 6px),
    6px calc(100% - 10px), 4px calc(100% - 10px),
    4px calc(100% - 14px), 2px calc(100% - 14px),
    2px 14px, 4px 14px, 4px 10px, 6px 10px,
    6px 6px, 10px 6px, 10px 4px, 14px 4px
  );
  background:
    linear-gradient(90deg, rgb(248 243 254 / 90%), rgb(248 243 254 / 60%) 45%, rgb(248 243 254 / 0%) 75%),
    url("/images/home_tamami_about_starlight.png") center 58% / cover no-repeat;
  content: "";
  pointer-events: none;
}
.home-tamabuddy-entry::before {
  background:
    linear-gradient(90deg, #f8f3fe 55%, rgb(248 243 254 / 0%) 75%),
    url("/images/home_tamabuddy_constellations.png") right center / auto 100% no-repeat,
    #f8f3fe;
}
.guest-tamami-about-banner__copy { position: relative; z-index: 1; display: grid; min-width: 0; gap: 3px; }
.guest-tamami-about-banner__copy small {
  color: #5a43bc;
  font-size: var(--type-caption);
  font-weight: 600;
  letter-spacing: .08em;
}
.guest-tamami-about-banner__copy strong {
  color: #4c30af;
  font-size: var(--type-card-title);
  font-weight: 600;
  line-height: 1.35;
  word-break: keep-all;
}
.guest-tamami-about-banner__copy > span {
  color: #4c30af;
  font-size: var(--type-small);
  font-weight: 500;
  line-height: 1.55;
  word-break: keep-all;
}
.guest-tamami-about-banner__arrow {
  position: relative;
  z-index: 1;
  color: #4c30af;
  font-size: var(--type-display-sm);
  line-height: 1;
  text-align: center;
  transition: transform .15s ease;
}
:is(.guest-tamami-about-banner, .home-tamabuddy-entry):hover { filter: brightness(1.06); transform: translateY(-2px); }
:is(.guest-tamami-about-banner, .home-tamabuddy-entry):hover .guest-tamami-about-banner__arrow { transform: translateX(2px); }
:is(.guest-tamami-about-banner, .home-tamabuddy-entry):active { filter: brightness(.97); transform: translateY(1px); }
:is(.guest-tamami-about-banner, .home-tamabuddy-entry):focus-visible { outline: 3px solid var(--ui-focus, #5a43bc); outline-offset: 2px; }
.home-insight-grid { display: grid; min-width: 0; }
.home-daily-stack { display: grid; min-width: 0; align-content: start; }
.home-guide-float {
  --home-guide-float-frame: url("/images/pixel_frame_input.svg?v=1");

  position: fixed;
  z-index: 19;
  right: max(12px, calc((100vw - var(--page-content-max)) / 2 + 12px));
  bottom: calc(94px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  display: grid;
  width: 166px;
  min-height: 78px;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  padding: 0 1px;
  border: 14px solid transparent;
  border-image-source: var(--home-guide-float-frame);
  border-image-slice: 14 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  background-clip: border-box;
  background-origin: border-box;
  box-shadow: none;
  clip-path: none;
  color: #5a43bc;
  text-decoration: none;
  image-rendering: pixelated;
  transition: filter .15s ease, transform .15s ease;
}
.home-guide-float__sprout {
  position: relative;
  display: block;
  width: 38px;
  height: 40px;
  overflow: hidden;
}
.home-guide-float__sprout img {
  position: absolute;
  top: 5px;
  left: 4px;
  display: block;
  width: 152px;
  max-width: none;
  height: auto;
  image-rendering: pixelated;
}
.home-guide-float__copy { display: grid; min-width: 0; align-content: center; line-height: 1.25; word-break: keep-all; }
.home-guide-float__copy small { color: #7762bc; font-size: var(--type-caption); font-weight: 500; }
.home-guide-float__copy strong { color: #4c30af; font-size: var(--type-label); font-weight: 700; white-space: nowrap; }
.home-guide-float__copy > span { display: inline-flex; align-items: center; color: #5a43bc; font-size: var(--type-caption); font-weight: 600; }
.home-guide-float__copy .lucide { width: 12px; height: 12px; }
.home-guide-float:hover { filter: brightness(1.03); }
.home-guide-float:active { filter: brightness(.96); transform: translateY(1px); }
.home-guide-float:focus-visible { outline: 3px solid #4c30af; outline-offset: 2px; }
.today-flow-card,
.daily-zodiac-card,
.birth-chart-card {
  position: relative;
  margin-top: 18px;
  padding: 16px 20px 18px;
  border-style: solid;
  border-width: 14px;
  border-image: url('data:image/svg+xml;utf8,<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14 2H34V4H38V6H42V10H44V14H46V34H44V38H42V42H38V44H34V46H14V44H10V42H6V38H4V34H2V14H4V10H6V6H10V4H14V2Z" fill="%23fcf7ff"/><rect x="14" y="2" width="20" height="2" fill="%23ffffff"/><rect x="10" y="4" width="4" height="2" fill="%23ffffff"/><rect x="6" y="6" width="4" height="2" fill="%23ffffff"/><rect x="4" y="8" width="2" height="4" fill="%23ffffff"/><rect x="2" y="12" width="2" height="22" fill="%23ffffff"/><rect x="44" y="14" width="2" height="22" fill="%23b290e8"/><rect x="42" y="36" width="2" height="4" fill="%23b290e8"/><rect x="38" y="40" width="4" height="2" fill="%23b290e8"/><rect x="34" y="42" width="4" height="2" fill="%23b290e8"/><rect x="14" y="44" width="20" height="2" fill="%23b290e8"/><rect x="14" y="0" width="20" height="2" fill="%23896bcc"/><rect x="10" y="2" width="4" height="2" fill="%23896bcc"/><rect x="6" y="4" width="4" height="2" fill="%23896bcc"/><rect x="4" y="6" width="2" height="4" fill="%23896bcc"/><rect x="2" y="10" width="2" height="4" fill="%23896bcc"/><rect x="0" y="14" width="2" height="20" fill="%23896bcc"/><rect x="34" y="2" width="4" height="2" fill="%23896bcc"/><rect x="38" y="4" width="4" height="2" fill="%23896bcc"/><rect x="42" y="6" width="2" height="4" fill="%23896bcc"/><rect x="44" y="10" width="2" height="4" fill="%23896bcc"/><rect x="46" y="14" width="2" height="20" fill="%23896bcc"/><rect x="2" y="34" width="2" height="4" fill="%23896bcc"/><rect x="4" y="38" width="2" height="4" fill="%23896bcc"/><rect x="6" y="42" width="4" height="2" fill="%23896bcc"/><rect x="10" y="44" width="4" height="2" fill="%23896bcc"/><rect x="14" y="46" width="20" height="2" fill="%23896bcc"/><rect x="44" y="34" width="2" height="4" fill="%23896bcc"/><rect x="42" y="38" width="2" height="4" fill="%23896bcc"/><rect x="38" y="42" width="4" height="2" fill="%23896bcc"/><rect x="34" y="44" width="4" height="2" fill="%23896bcc"/></svg>') 14 fill stretch;
  background-color: transparent;
  clip-path: polygon(
    14px 0, calc(100% - 14px) 0,
    calc(100% - 14px) 2px, calc(100% - 10px) 2px,
    calc(100% - 10px) 4px, calc(100% - 6px) 4px,
    calc(100% - 6px) 6px, calc(100% - 4px) 6px,
    calc(100% - 4px) 10px, calc(100% - 2px) 10px,
    calc(100% - 2px) 14px, 100% 14px,
    100% calc(100% - 14px), calc(100% - 2px) calc(100% - 14px),
    calc(100% - 2px) calc(100% - 10px), calc(100% - 4px) calc(100% - 10px),
    calc(100% - 4px) calc(100% - 6px), calc(100% - 6px) calc(100% - 6px),
    calc(100% - 6px) calc(100% - 4px), calc(100% - 10px) calc(100% - 4px),
    calc(100% - 10px) calc(100% - 2px), calc(100% - 14px) calc(100% - 2px),
    calc(100% - 14px) 100%, 14px 100%,
    14px calc(100% - 2px), 10px calc(100% - 2px),
    10px calc(100% - 4px), 6px calc(100% - 4px),
    6px calc(100% - 6px), 4px calc(100% - 6px),
    4px calc(100% - 10px), 2px calc(100% - 10px),
    2px calc(100% - 14px), 0 calc(100% - 14px),
    0 14px, 2px 14px,
    2px 10px, 4px 10px,
    4px 6px, 6px 6px,
    6px 4px, 10px 4px,
    10px 2px, 14px 2px
  );
  box-shadow: none;
}
.today-flow-header { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 28px; margin-bottom: 24px; gap: 4px; }
.today-flow-card h2 { margin: 0; color: #5632ad; font-size: var(--type-section-title); font-weight: 600; }
.today-flow-title { display: inline-flex; min-width: 0; align-items: center; line-height: 1.25; overflow-wrap: normal; word-break: keep-all; }
.today-flow-card--empty { isolation: isolate; }
.today-flow-card__dimmed {
  opacity: 0.28;
  filter: grayscale(0.2) saturate(0.6);
  pointer-events: none;
  user-select: none;
}
.today-flow-card--loading .today-flow-card__dimmed {
  animation: today-flow-loading-pulse 1.8s ease-in-out infinite;
}
.today-flow-generation-fallback {
  position: absolute;
  z-index: 1;
  inset: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  border-radius: 8px;
  background: rgba(250, 245, 253, 0.48);
  text-align: center;
}
.today-flow-generation-fallback[hidden] { display: none; }
.today-flow-generation-fallback p {
  margin: 0;
  color: #5f478d;
  font-size: var(--type-body-lg);
  font-weight: 600;
  line-height: 1.65;
  text-wrap: auto;
  word-break: keep-all;
}
.today-flow-generation-fallback a {
  color: #6845b5;
  font-size: var(--type-small);
  font-weight: 600;
  text-underline-offset: 3px;
}
@keyframes today-flow-loading-pulse {
  0%, 100% { opacity: 0.22; }
  50% { opacity: 0.42; }
}
.today-flow-content { display: grid; grid-template-columns: minmax(190px, 0.8fr) minmax(0, 1.35fr); align-items: center; gap: 26px; }
.today-score-summary { display: flex; min-width: 0; align-items: center; gap: 18px; padding-right: 24px; border-right: 1px solid #e2d6f4; }
.today-score-summary p { display: flex; align-items: baseline; margin: 0; color: var(--score-color); }
.today-score-summary strong { font-size: var(--type-display-lg); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.today-score-summary span { margin-left: 4px; color: var(--score-color); font-size: var(--type-body-lg); font-weight: 600; }
.today-flow-donut { width: 64px; height: 64px; flex: 0 0 auto; border-radius: 50%; background: conic-gradient(var(--element-fire-color) 0 var(--relationship-end), var(--element-earth-color) var(--relationship-end) var(--work-end), var(--element-metal-color) var(--work-end) var(--money-end), var(--element-water-color) var(--money-end) var(--energy-end), #d9d4df var(--energy-end) 100%); }
.today-flow-card--empty .today-flow-donut { background: #d9d4df; }
.today-flow-donut::after { display: block; width: 42px; height: 42px; margin: 11px; border-radius: 50%; background: #fbf5fe; content: ""; }
.today-domain-ratings { display: grid; gap: 12px; }
.today-domain-rating { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 8px; }
.today-domain-rating > span { color: #5f478d; font-size: var(--type-body); font-weight: 600; }
.today-domain-rating b { display: flex; align-items: center; justify-content: center; gap: 5px; }
.today-domain-rating__score-slot { display: grid; width: 18px; height: 18px; flex: 0 0 18px; place-items: center; }
.today-domain-rating__score-icon { display: block; width: 18px; height: 18px; object-fit: contain; object-position: center; image-rendering: pixelated; }
.today-domain-rating.work .today-domain-rating__score-icon { width: 17px; height: 17px; }
.today-domain-rating em { color: #ddd1ee; font-size: var(--type-section-title); font-style: normal; }
.today-domain-rating em.filled { color: #7953ce; text-shadow: 1px 1px 0 #b99fe6; }
.fortune-lucky-items.fortune-lucky-items--compact { position: relative; margin-top: 17px; padding: 15px 0 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; clip-path: none; }
.fortune-lucky-items.fortune-lucky-items--compact::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  background: #e2d6f4;
  content: "";
}
.fortune-lucky-items.fortune-lucky-items--compact > header { margin-bottom: 12px; }
.fortune-lucky-items.fortune-lucky-items--compact header h3 { margin: 0; color: #8060ce; font-size: var(--type-small); }
.fortune-lucky-items.fortune-lucky-items--compact ul { grid-template-columns: 1fr; gap: 12px; background: transparent; }
.fortune-lucky-items.fortune-lucky-items--compact li { min-height: 30px; grid-template-columns: 30px 122px minmax(0, 1fr); align-items: center; align-content: center; justify-items: start; gap: 8px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; text-align: left; }
.fortune-lucky-items.fortune-lucky-items--compact li + li { border-top: 0; }
.fortune-lucky-items.fortune-lucky-items--compact li > i { grid-row: 1; grid-column: 1; width: 30px; height: 30px; align-self: center; }
.fortune-lucky-items.fortune-lucky-items--compact li > span { grid-row: 1; grid-column: 2; color: #5f478d; font-size: var(--type-body); }
.fortune-lucky-items.fortune-lucky-items--compact li > strong { grid-row: 1; grid-column: 3; color: #6040b2; font-size: var(--type-body); line-height: 1.35; }
.fortune-lucky-items li > strong.lucky-item-color-name {
  display: inline-grid;
  min-width: 64px;
  padding: 5px 12px;
  border: 0;
  border-radius: 0;
  background: var(--lucky-color);
  color: var(--lucky-color-text, #ffffff);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  box-shadow: none;
  clip-path: polygon(
    4px 0, calc(100% - 4px) 0,
    calc(100% - 4px) 2px, calc(100% - 2px) 2px,
    calc(100% - 2px) 4px, 100% 4px,
    100% calc(100% - 4px), calc(100% - 2px) calc(100% - 4px),
    calc(100% - 2px) calc(100% - 2px), calc(100% - 4px) calc(100% - 2px),
    calc(100% - 4px) 100%, 4px 100%,
    4px calc(100% - 2px), 2px calc(100% - 2px),
    2px calc(100% - 4px), 0 calc(100% - 4px),
    0 4px, 2px 4px,
    2px 2px, 4px 2px
  );
  place-items: center;
}
.daily-zodiac-card {
  color: #5f478d;
}
.daily-zodiac-card__header {
  position: relative;
  padding-bottom: 12px;
  border-bottom: 0;
}
.daily-zodiac-main::after {
  position: absolute;
  right: 0;
  left: 0;
  height: 2px;
  background: #e2d6f4;
  content: "";
}
.daily-zodiac-card__header > span {
  display: block;
  margin-bottom: 4px;
  color: #a18acb;
  font-size: var(--type-caption);
  font-weight: 600;
  letter-spacing: 0.08em;
}
.daily-zodiac-card__header h2 {
  margin: 0;
  color: #5632ad;
  font-size: var(--type-section-title);
  line-height: 1.25;
}
.daily-zodiac-main { position: relative; padding: 14px 0; border-bottom: 0; }
.daily-zodiac-main::after { bottom: 0; }
.daily-zodiac-main__identity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
}
.daily-zodiac-main__identity > img {
  display: block;
  width: auto;
  height: auto;
  max-width: 56px;
  max-height: 56px;
  flex: 0 0 auto;
  object-fit: scale-down;
  image-rendering: pixelated;
}
.daily-zodiac-main__identity > p {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 2px 8px;
  margin: 0;
}
.daily-zodiac-main__identity span {
  grid-column: 1 / -1;
  color: #9079be;
  font-size: var(--type-label);
  font-weight: 600;
}
.daily-zodiac-main__identity strong {
  min-width: 0;
  color: #5d38b2;
  font-size: var(--type-section-title);
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.daily-zodiac-main__identity b {
  color: #e65c9d;
  font-size: var(--type-card-title);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.daily-zodiac-main__message {
  margin: 10px 0 0;
  color: #6e579b;
  font-size: var(--type-small);
  font-weight: 600;
  line-height: 1.55;
}
.daily-zodiac-groups {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 9px 8px;
  padding-top: 12px;
}
.daily-zodiac-group {
  display: grid;
  min-width: 0;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
}
.daily-zodiac-group h3 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: #8060ce;
  font-size: var(--type-small);
  white-space: nowrap;
}
.daily-zodiac-group h3 img {
  display: block;
  width: 18px;
  height: auto;
  flex: 0 0 auto;
  image-rendering: pixelated;
}
.daily-zodiac-group--compatible h3 { color: #e94aa3; }
.daily-zodiac-group--caution h3 { color: #5d7392; }
.daily-zodiac-group ul {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.daily-zodiac-tag {
  --daily-zodiac-tag-frame: url("/images/pixel_tag_frame_pink.svg?v=2");
  box-sizing: border-box;
  display: inline-flex;
  min-height: 25px;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border: 3px solid transparent;
  border-image: var(--daily-zodiac-tag-frame) 3 fill stretch;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  clip-path: none;
  color: #e94aa3;
  font-size: var(--type-caption);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.daily-zodiac-group--caution .daily-zodiac-tag {
  --daily-zodiac-tag-frame: url("/images/pixel_tag_frame_sky.svg?v=2");
  color: #5d7392;
}
.birth-chart-card > header { display: flex; align-items: center; justify-content: space-between; padding-inline: 3px; }
.birth-chart-card h2 { margin: 0; color: #5632ad; font-size: var(--type-section-title); font-weight: 600; }
.birth-chart-title { display: inline-flex; min-width: 0; align-items: center; line-height: 1.25; }
.birth-chart-edit {
  position: relative;
  display: grid;
  width: 30px;
  height: 30px;
  padding: 0;
  border-style: solid;
  border-width: 6px;
  border-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="6" y="2" width="12" height="2" fill="%23ffffff"/><rect x="4" y="4" width="2" height="2" fill="%23ffffff"/><rect x="2" y="6" width="2" height="12" fill="%23ffffff"/><rect x="20" y="6" width="2" height="12" fill="%23b290e8"/><rect x="18" y="18" width="2" height="2" fill="%23b290e8"/><rect x="6" y="20" width="12" height="2" fill="%23b290e8"/><rect x="6" y="0" width="12" height="2" fill="%23896bcc"/><rect x="4" y="2" width="2" height="2" fill="%23896bcc"/><rect x="2" y="4" width="2" height="2" fill="%23896bcc"/><rect x="0" y="6" width="2" height="12" fill="%23896bcc"/><rect x="2" y="18" width="2" height="2" fill="%23896bcc"/><rect x="4" y="20" width="2" height="2" fill="%23896bcc"/><rect x="6" y="22" width="12" height="2" fill="%23896bcc"/><rect x="18" y="0" width="2" height="2" fill="%23896bcc"/><rect x="20" y="2" width="2" height="2" fill="%23896bcc"/><rect x="20" y="4" width="2" height="2" fill="%23896bcc"/><rect x="22" y="6" width="2" height="12" fill="%23896bcc"/><rect x="20" y="18" width="2" height="2" fill="%23896bcc"/><rect x="18" y="20" width="2" height="2" fill="%23896bcc"/></svg>') 6 fill stretch;
  background-color: transparent;
  clip-path: polygon(
    6px 0, calc(100% - 6px) 0,
    calc(100% - 6px) 2px, calc(100% - 4px) 2px,
    calc(100% - 4px) 4px, calc(100% - 2px) 4px,
    calc(100% - 2px) 6px, 100% 6px,
    100% calc(100% - 6px), calc(100% - 2px) calc(100% - 6px),
    calc(100% - 2px) calc(100% - 4px), calc(100% - 4px) calc(100% - 4px),
    calc(100% - 4px) calc(100% - 2px), calc(100% - 6px) calc(100% - 2px),
    calc(100% - 6px) 100%, 6px 100%,
    6px calc(100% - 2px), 4px calc(100% - 2px),
    4px calc(100% - 4px), 2px calc(100% - 4px),
    2px calc(100% - 6px), 0 calc(100% - 6px),
    0 6px, 2px 6px,
    2px 4px, 4px 4px,
    4px 2px, 6px 2px
  );
  color: #5632ad;
  text-decoration: none;
  box-shadow: none;
  place-items: center;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.birth-chart-edit .lucide { width: 17px; height: 17px; }
.birth-chart-edit:hover { transform: translateY(-1px); filter: brightness(1.03); }
.birth-chart-edit:active { transform: translateY(1px); }
.element-summary {
  display: grid;
  grid-template-columns: minmax(128px, 0.7fr) minmax(0, 1.5fr);
  align-items: center;
  gap: 24px;
  margin-top: 26px;
}
.home-birth-chart .element-summary {
  position: relative;
  padding-top: 18px;
}
.home-birth-chart .element-summary::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  background: #e2d6f4;
  content: "";
}
.element-bars { display: grid; gap: 9px; }
.element-row { display: grid; grid-template-columns: 72px minmax(60px, 1fr) 26px; align-items: center; gap: 8px; color: #5f478d; font-size: var(--type-body); font-weight: 600; }
.element-row > span { display: flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; }
.element-row .element-icon { display: block; width: 16px; height: 16px; flex: 0 0 auto; object-fit: contain; image-rendering: pixelated; }
.element-row b { height: 9px; overflow: hidden; border-radius: 5px; background: #eee8f7; }
.home-birth-chart .element-row b { border: 1px solid #d8c6ed; }
.element-row em { display: block; height: 100%; min-width: 3px; border-radius: 5px; background: currentColor; }
.element-bars .element-row > strong { color: #8b95a1; font-weight: 600; font-variant-numeric: tabular-nums; }
.element-row.wood { color: var(--element-wood-color); }
.element-row.fire { color: var(--element-fire-color); }
.element-row.earth { color: var(--element-earth-color); }
.element-row.metal { color: var(--element-metal-color); }
.element-row.water { color: var(--element-water-color); }
.element-donut-panel { display: grid; min-width: 0; align-content: center; justify-items: center; gap: 10px; }
.element-donut-panel h3 { width: 100%; margin: 0; color: #8060ce; font-size: var(--type-small); font-weight: 600; text-align: left; }
.element-donut {
  display: grid;
  width: 142px;
  height: 142px;
  justify-self: center;
  border-radius: 50%;
  background: conic-gradient(
    var(--element-wood-color) 0 var(--wood-end),
    var(--element-fire-color) var(--wood-end) var(--fire-end),
    var(--element-earth-color) var(--fire-end) var(--earth-end),
    var(--element-metal-color) var(--earth-end) var(--metal-end),
    var(--element-water-color) var(--metal-end) 100%
  );
  place-items: center;
}
.home-birth-chart .element-donut { border: 1px solid #d8c6ed; }
.element-donut::before { width: 76px; height: 76px; border-radius: 50%; background: #fbf5fe; content: ""; grid-area: 1 / 1; }
.home-insight-action {
  --home-insight-action-frame: url("/images/pixel_frame_settings_primary.svg?v=1");

  appearance: none;
  box-sizing: border-box;
  display: flex;
  width: 100%;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  margin-top: 18px;
  padding: 0 12px;
  border: 14px solid transparent;
  border-image-source: var(--home-insight-action-frame);
  border-image-slice: 14 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  background-clip: border-box;
  background-origin: border-box;
  box-shadow: none;
  clip-path: none;
  color: #fff;
  font-size: var(--type-body);
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  text-shadow: 1px 1px 0 rgb(73 26 144 / 40%);
  white-space: nowrap;
  image-rendering: pixelated;
  transform: none;
  transition: filter .15s ease, transform .15s ease;
}
.home-insight-action:hover { color: #fff; filter: brightness(1.03); }
.home-insight-action:active { filter: brightness(.96); transform: translateY(1px); }
.home-insight-action:focus-visible {
  outline: 3px solid var(--ui-focus, #5a43bc);
  outline-offset: 2px;
}
@container (min-width: 650px) {
  .home-insight-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr); align-items: start; gap: 12px; }
  .home-insight-grid > section,
  .home-insight-grid > .home-daily-stack { min-width: 0; }
  .home-insight-grid .today-flow-card { padding: 18px; }
  .home-insight-grid .today-flow-content { grid-template-columns: 1fr; align-content: start; gap: 16px; }
  .home-insight-grid .today-score-summary { justify-content: center; padding: 0 0 16px; border-right: 0; border-bottom: 0; }
  .home-insight-grid .today-domain-rating { grid-template-columns: 75px minmax(0, 1fr); gap: 5px; }
  .home-insight-grid .today-domain-rating > span { font-size: var(--type-label); }
  .home-insight-grid .today-domain-rating b { gap: 2px; }
  .home-insight-grid .today-domain-rating__score-icon { width: 18px; height: 18px; }
  .home-insight-grid .today-domain-rating.work .today-domain-rating__score-icon { width: 17px; height: 17px; }
  .home-insight-grid .today-domain-rating em { font-size: var(--type-body-lg); }
  .home-insight-grid .fortune-lucky-items--compact li { grid-template-columns: 25px 105px minmax(0, 1fr); gap: 5px; }
  .home-insight-grid .fortune-lucky-items--compact li > i { width: 25px; height: 25px; }
  .home-insight-grid .fortune-lucky-items--compact li > span,
  .home-insight-grid .fortune-lucky-items--compact li > strong { font-size: var(--type-label); }
  .home-insight-grid .fortune-lucky-items--compact li > strong.lucky-item-color-name { padding: 5px 4px; font-size: var(--type-caption); }
  .home-insight-grid .birth-chart-card { padding: 18px; }
  .home-insight-grid .element-summary { grid-template-columns: 102px minmax(0, 1fr); gap: 10px; margin-top: 18px; }
  .home-insight-grid .element-bars { gap: 7px; }
  .home-insight-grid .element-row { grid-template-columns: 56px minmax(38px, 1fr) 16px; gap: 4px; font-size: var(--type-caption); }
  .home-insight-grid .element-row .element-icon { width: 12px; height: 12px; }
  .home-insight-grid .element-donut { width: 100px; height: 100px; }
  .home-insight-grid .element-donut::before { width: 56px; height: 56px; }
}
.date-label { margin: 0 0 12px; color: #3182f6; font-size: var(--type-subtitle); font-weight: 600; }
h1 { margin: 0; font-size: var(--type-display-lg); line-height: 1.25; }
.supporting-copy { margin: 18px 0 32px; color: #6b7684; font-size: var(--type-section-title); line-height: 1.6; }

.primary-button, .secondary-button, .social-button {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  padding: 0 22px;
  border: 0;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.primary-button { background: #3182f6; color: #ffffff; }
.secondary-button { background: #f2f4f6; color: #4e5968; }
.full-button { width: 100%; }

.auth-main { width: var(--page-content-width); margin: 0 auto; }
.auth-panel { width: min(100%, 420px); margin: 0 auto; padding: 56px 0 80px; }
.auth-panel h1, .page-title h1 { font-size: var(--type-display-sm); }
.stack-form, .profile-form { display: grid; gap: 20px; margin-top: 36px; }
.stack-form label, .input-field > span, .field-group legend {
  color: #4e5968;
  font-size: var(--type-body-lg);
  font-weight: 600;
}
.stack-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.input-field input, .input-field select {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border: 1px solid #d1d6db;
  border-radius: 8px;
  background: var(--surface-white);
  color: #191f28;
  outline: none;
}
.stack-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
.input-field input:focus, .input-field select:focus {
  border-color: #3182f6;
  box-shadow: 0 0 0 3px #e8f3ff;
}
.mode-link { display: block; margin: 18px auto 0; color: #3182f6; text-align: center; text-decoration: none; font-weight: 600; }
.divider { display: flex; align-items: center; gap: 12px; margin: 32px 0 20px; color: #8b95a1; font-size: var(--type-body-lg); }
.divider::before, .divider::after { height: 1px; background: #e5e8eb; content: ""; flex: 1; }
.social-actions { display: grid; gap: 10px; }
.social-button.kakao { background: #fee500; color: #191919; }
.social-button.google { border: 1px solid #d1d6db; background: var(--surface-white); }
.auth-header { gap: 11px; }
.auth-home-link {
  position: relative;
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  border-style: solid;
  border-width: 6px;
  border-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="6" y="2" width="12" height="2" fill="%23ffffff"/><rect x="4" y="4" width="2" height="2" fill="%23ffffff"/><rect x="2" y="6" width="2" height="12" fill="%23ffffff"/><rect x="20" y="6" width="2" height="12" fill="%23b290e8"/><rect x="18" y="18" width="2" height="2" fill="%23b290e8"/><rect x="6" y="20" width="12" height="2" fill="%23b290e8"/><rect x="6" y="0" width="12" height="2" fill="%23896bcc"/><rect x="4" y="2" width="2" height="2" fill="%23896bcc"/><rect x="2" y="4" width="2" height="2" fill="%23896bcc"/><rect x="0" y="6" width="2" height="12" fill="%23896bcc"/><rect x="2" y="18" width="2" height="2" fill="%23896bcc"/><rect x="4" y="20" width="2" height="2" fill="%23896bcc"/><rect x="6" y="22" width="12" height="2" fill="%23896bcc"/><rect x="18" y="0" width="2" height="2" fill="%23896bcc"/><rect x="20" y="2" width="2" height="2" fill="%23896bcc"/><rect x="20" y="4" width="2" height="2" fill="%23896bcc"/><rect x="22" y="6" width="2" height="12" fill="%23896bcc"/><rect x="20" y="18" width="2" height="2" fill="%23896bcc"/><rect x="18" y="20" width="2" height="2" fill="%23896bcc"/></svg>') 6 fill stretch;
  background-color: transparent;
  clip-path: polygon(
    6px 0, calc(100% - 6px) 0,
    calc(100% - 6px) 2px, calc(100% - 4px) 2px,
    calc(100% - 4px) 4px, calc(100% - 2px) 4px,
    calc(100% - 2px) 6px, 100% 6px,
    100% calc(100% - 6px), calc(100% - 2px) calc(100% - 6px),
    calc(100% - 2px) calc(100% - 4px), calc(100% - 4px) calc(100% - 4px),
    calc(100% - 4px) calc(100% - 2px), calc(100% - 6px) calc(100% - 2px),
    calc(100% - 6px) 100%, 6px 100%,
    6px calc(100% - 2px), 4px calc(100% - 2px),
    4px calc(100% - 4px), 2px calc(100% - 4px),
    2px calc(100% - 6px), 0 calc(100% - 6px),
    0 6px, 2px 6px,
    2px 4px, 4px 4px,
    4px 2px, 6px 2px
  );
  color: #5632ad;
  text-decoration: none;
  box-shadow: none;
  transition: transform 0.15s ease, filter 0.15s ease;
  place-items: center;
}
.auth-home-link:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
}
.auth-home-link:active {
  transform: translateY(1px);
}
.auth-home-link .lucide { width: 18px; height: 18px; }
.auth-page { padding: 18px 0 96px; }
.auth-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  align-items: center;
  gap: 12px;
  padding: 34px 36px;
  overflow: hidden;
  border: 2px solid rgb(255 255 255 / 34%);
  border-radius: 24px;
  background: #9478ce;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 28%), 0 4px 0 rgb(83 48 112 / 42%);
}
.login-shell .auth-hero {
  border-style: solid;
  border-width: 2px;
  border-image: url("/images/pixel_frame_purple.svg") 14 stretch;
  border-radius: 0;
  clip-path: polygon(
    14px 0, calc(100% - 14px) 0,
    calc(100% - 14px) 2px, calc(100% - 10px) 2px,
    calc(100% - 10px) 4px, calc(100% - 6px) 4px,
    calc(100% - 6px) 6px, calc(100% - 4px) 6px,
    calc(100% - 4px) 10px, calc(100% - 2px) 10px,
    calc(100% - 2px) 14px, 100% 14px,
    100% calc(100% - 14px), calc(100% - 2px) calc(100% - 14px),
    calc(100% - 2px) calc(100% - 10px), calc(100% - 4px) calc(100% - 10px),
    calc(100% - 4px) calc(100% - 6px), calc(100% - 6px) calc(100% - 6px),
    calc(100% - 6px) calc(100% - 4px), calc(100% - 10px) calc(100% - 4px),
    calc(100% - 10px) calc(100% - 2px), calc(100% - 14px) calc(100% - 2px),
    calc(100% - 14px) 100%, 14px 100%,
    14px calc(100% - 2px), 10px calc(100% - 2px),
    10px calc(100% - 4px), 6px calc(100% - 4px),
    6px calc(100% - 6px), 4px calc(100% - 6px),
    4px calc(100% - 10px), 2px calc(100% - 10px),
    2px calc(100% - 14px), 0 calc(100% - 14px),
    0 14px, 2px 14px,
    2px 10px, 4px 10px,
    4px 6px, 6px 6px,
    6px 4px, 10px 4px,
    10px 2px, 14px 2px
  );
}
.auth-hero::before {
  position: absolute;
  z-index: 0;
  top: 30px;
  right: 48px;
  width: 9px;
  height: 9px;
  transform: rotate(45deg);
  background: #fff18a;
  box-shadow:
    -218px 156px 0 -2px rgb(255 255 255 / 58%),
    -98px 70px 0 -3px #fff18a,
    72px 72px 0 -2px rgb(255 255 255 / 72%);
  content: "";
}
.auth-hero > div { position: relative; z-index: 1; min-width: 0; }
.auth-hero p {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: #fff18a;
  font-size: var(--type-label);
  font-weight: 600;
  letter-spacing: .03em;
}
.auth-hero p::before {
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  background: #fff18a;
  box-shadow: 0 0 8px rgb(255 241 138 / 48%);
  content: "";
  flex: 0 0 auto;
}
.auth-hero h1 { max-width: 470px; margin: 16px 0 0; color: #ffffff; font-size: var(--type-page-title-lg); font-weight: 600; line-height: 1.25; text-shadow: 0 2px 0 rgb(74 34 111 / 35%); word-break: keep-all; }
.auth-hero span { display: block; max-width: 400px; margin-top: 12px; color: #eee5f7; font-size: var(--type-body); font-weight: 600; line-height: 1.65; word-break: keep-all; }
.auth-hero img {
  position: absolute;
  z-index: 1;
  right: -12px;
  bottom: -52px;
  width: 265px;
  height: auto;
  filter: drop-shadow(0 10px 18px rgb(49 18 86 / 28%));
  image-rendering: pixelated;
  pointer-events: none;
}
.auth-hero img.auth-hero-illustration--telescope {
  right: 26px;
  bottom: -8px;
  width: 164px;
}
.signup-conversation-hero { position: relative; display: grid; min-height: 206px; grid-template-columns: 184px minmax(0, 1fr); align-items: center; gap: 8px; padding: 18px 26px 18px 8px; overflow: hidden; border: 1px solid #d8c5f4; border-radius: 24px; background: #f1e3fc; }
.signup-conversation-hero::after { position: absolute; right: 18px; bottom: 15px; width: 9px; height: 9px; transform: rotate(45deg); background: #fff18a; box-shadow: -330px -120px 0 #fff18a; content: ""; }
.signup-conversation-hero img { z-index: 1; display: block; width: 174px; height: auto; align-self: end; filter: drop-shadow(0 12px 14px rgba(82, 47, 144, .12)); image-rendering: pixelated; }
.signup-conversation-hero > div { position: relative; z-index: 2; padding: 20px 22px; border: 1px solid #d1b8ef; border-radius: 20px; background: rgba(255, 250, 255, .9); }
.signup-conversation-hero > div::before { position: absolute; top: 50%; left: -15px; width: 0; height: 0; transform: translateY(-50%); border-width: 11px 15px 11px 0; border-style: solid; border-color: transparent #d1b8ef transparent transparent; content: ""; }
.signup-conversation-hero > div::after { position: absolute; top: 50%; left: -12px; width: 0; height: 0; transform: translateY(-50%); border-width: 9px 13px 9px 0; border-style: solid; border-color: transparent #fffaff transparent transparent; content: ""; }
.signup-conversation-hero p { display: flex; align-items: center; gap: 5px; margin: 0 0 7px; color: #8d61dc; font-size: var(--type-small); font-weight: 600; }
.signup-conversation-hero p .lucide { width: 14px; height: 14px; }
.signup-conversation-hero h1 { margin: 0; color: #4f2aa5; font-size: var(--type-page-title); line-height: 1.25; }
.signup-conversation-hero span { display: block; margin-top: 9px; color: #75608d; font-size: var(--type-body); font-weight: 600; line-height: 1.6; }
.onboarding-main { width: min(calc(100% - 32px), 680px); margin: 0 auto; padding: 18px 0 42px; }
.conversation-onboarding { padding: 28px; border: 1px solid #d8c6ee; border-radius: 28px; background: rgba(255, 250, 255, .72); box-shadow: 0 24px 70px rgba(78, 43, 137, .08); }
.onboarding-progress { display: grid; grid-template-columns: auto minmax(40px, 1fr) auto; align-items: center; gap: 12px; margin-bottom: 28px; padding: 0 6px; }
.onboarding-progress > i { height: 2px; border-radius: 2px; background: #ddceef; }
.onboarding-progress span { display: flex; align-items: center; gap: 6px; color: #a797b7; font-size: var(--type-small); }
.onboarding-progress span .lucide { width: 15px; height: 15px; }
.onboarding-progress span.active { color: #7148c4; }
.onboarding-progress span.complete { color: #5a9c79; }
.tamami-prompt { display: grid; grid-template-columns: 70px minmax(0, 1fr); align-items: end; gap: 10px; }
.tamami-prompt > img { display: block; width: 70px; height: 70px; border: 1px solid #ceb8ed; border-radius: 22px; background: #eadcff; object-fit: cover; image-rendering: pixelated; }
.tamami-prompt > div { position: relative; padding: 17px 19px; border: 1px solid #d7c5ef; border-radius: 20px 20px 20px 6px; background: #fffaff; }
.tamami-prompt > div::before { position: absolute; bottom: 0; left: -10px; width: 14px; height: 14px; border-bottom: 1px solid #d7c5ef; background: #fffaff; clip-path: polygon(100% 0, 100% 100%, 0 100%); content: ""; }
.tamami-prompt small { color: #8e65d2; font-size: var(--type-label); font-weight: 600; }
.tamami-prompt h1 { margin: 5px 0 0; color: #4a2a8b; font-size: var(--type-page-title); line-height: 1.25; word-break: keep-all; }
.tamami-prompt p { margin: 7px 0 0; color: #806f94; font-size: var(--type-body); font-weight: 600; line-height: 1.5; }
.onboarding-error { margin: 16px 0 0 !important; }
.clue-conversation-form { display: grid; gap: 14px; margin-top: 24px; }
.clue-exchange { padding: 19px; border: 1px solid #e1d5f1; border-radius: 20px; background: #fbf6ff; }
.clue-question { display: flex; align-items: center; gap: 11px; }
.clue-question > .lucide { width: 22px; height: 22px; color: #7d56cb; }
.clue-question small { color: #a187c6; font-size: var(--type-caption); font-weight: 600; }
.clue-question h2 { margin: 2px 0 0; color: #513593; font-size: var(--type-card-title); }
.clue-answer { display: grid; gap: 10px; width: calc(100% - 18px); margin: 14px 0 0 auto; padding: 14px; border: 1px solid #d5c1ed; border-radius: 18px 18px 6px 18px; background: #eee4fb; }
.clue-chip-group { display: flex; flex-wrap: wrap; gap: 7px; }
.clue-chip-group label { cursor: pointer; }
.clue-chip-group input { position: absolute; opacity: 0; pointer-events: none; }
.clue-chip-group span { display: grid; min-height: 40px; align-items: center; padding: 0 17px; border: 1px solid #d3c0e9; border-radius: 999px; background: #fffaff; color: #725d89; font-size: var(--type-body); font-weight: 600; }
.clue-chip-group input:checked + span { border-color: #7f58ca; background: #7f58ca; box-shadow: 0 4px 0 #603bab; color: #fff; }
.clue-chip-group input:focus-visible + span { outline: 3px solid #90c2ff; outline-offset: 2px; }
.clue-chip-group.wide label { flex: 1; }
.clue-chip-group.wide span { justify-content: center; }
.sentence-input { display: flex; min-height: 52px; align-items: center; gap: 9px; padding: 7px 12px; border-radius: 13px; background: rgba(255, 250, 255, .86); color: #6f5b84; font-size: var(--type-body); font-weight: 600; }
.sentence-input input { min-width: 0; height: 38px; border: 0; border-bottom: 2px solid #bba4db; outline: 0; background: transparent; color: #452a7e; font-size: var(--type-subtitle); font-weight: 600; flex: 1; }
.sentence-input input:focus { border-color: #7046c0; }
.sentence-input.place input { font-size: var(--type-body-lg); }
.clue-unknown { cursor: pointer; }
.clue-unknown input { position: absolute; opacity: 0; pointer-events: none; }
.clue-unknown span { display: flex; min-height: 40px; align-items: center; gap: 7px; padding: 0 12px; border: 1px dashed #bfa9da; border-radius: 12px; background: rgba(255, 250, 255, .55); color: #765e90; font-size: var(--type-small); font-weight: 600; }
.clue-unknown span .lucide { width: 16px; height: 16px; }
.clue-unknown input:checked + span { border-style: solid; border-color: #8060bd; background: #ddd0f2; color: #583699; }
.clue-select { display: flex; align-items: center; gap: 10px; color: #7a6690; font-size: var(--type-small); font-weight: 600; }
.clue-select select { min-width: 0; height: 38px; padding: 0 9px; border: 1px solid #cbb6e5; border-radius: 10px; outline: 0; background: #fffaff; color: #563b86; flex: 1; }
.clue-answer .precision-notice { margin: 0; padding: 9px 11px; border-radius: 10px; font-size: var(--type-label); }
.onboarding-consent { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: start; gap: 10px; margin-top: 4px; padding: 15px; border: 1px solid #d9c8ee; border-radius: 17px; background: #f3ebfc; cursor: pointer; }
.onboarding-consent > input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: #7b52ca; }
.onboarding-consent > span { display: grid; grid-template-columns: 19px minmax(0, 1fr); gap: 3px 7px; color: #61477f; }
.onboarding-consent .lucide { width: 17px; height: 17px; color: #7b52ca; }
.onboarding-consent b { font-size: var(--type-body); }
.onboarding-consent small { grid-column: 2; color: #8c7a9f; font-size: var(--type-caption); line-height: 1.55; }
.onboarding-consent a { color: #6845b5; font-weight: 600; }
.onboarding-next-button { display: flex; width: 100%; min-height: 54px; align-items: center; justify-content: center; gap: 8px; margin-top: 4px; border: 0; border-radius: 16px; background: #7b52ca; box-shadow: 0 7px 0 #5d38a7; color: #fff; font-size: var(--type-body-lg); font-weight: 600; cursor: pointer; }
.onboarding-next-button:hover { transform: translateY(2px); box-shadow: 0 5px 0 #5d38a7; }
.onboarding-next-button .lucide { width: 18px; height: 18px; }
html:has(.onboarding-shell),
body:has(.onboarding-shell) {
  background-color: #f1e4fc !important;
  background-image:
    linear-gradient(to bottom, rgba(241, 228, 252, 0) 45%, rgba(241, 228, 252, 0.88) 78%, #f1e4fc 100%),
    url("/images/signup_outer_background.png") !important;
  background-position: center top, center top !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: 100% 100%, cover !important;
}

html:has(.login-shell),
body:has(.login-shell) {
  background-color: #fbeaf7 !important;
  background-image: url("/images/login_outer_background.png") !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  background-size: 100% auto !important;
}

body:has(.onboarding-shell) .viewport-frame,
body:has(.login-shell) .viewport-frame,
.onboarding-shell,
.login-shell {
  background: transparent !important;
}

.account-onboarding {
  min-width: 0;
  overflow: visible;
  background-color: #e5d4fc;
  background-image: url("/images/signup_star_background.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.account-onboarding .onboarding-progress span { color: #896bcc; }
.account-onboarding .onboarding-progress span.active { color: #4a2a8b; font-weight: 600; }
.account-onboarding .onboarding-progress span.complete { color: #2e8b57; }
.account-onboarding .onboarding-progress > i { background: rgba(137, 107, 204, 0.25); }
.account-prompt { margin-bottom: 17px; }
.saved-clue-preview { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 14px; border: 1px dashed #c6addf; border-radius: 17px; background: #f1e8fb; }
.saved-clue-preview > div { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 7px; min-width: 0; }
.saved-clue-preview > div > .lucide { width: 18px; height: 18px; color: #8059c8; }
.saved-clue-preview span { display: grid; min-width: 0; gap: 2px; }
.saved-clue-preview small { color: #967eae; font-size: var(--type-caption); }
.saved-clue-preview strong { overflow: hidden; color: #604181; font-size: var(--type-small); text-overflow: ellipsis; white-space: nowrap; }
.saved-clue-preview > a { position: absolute; right: 10px; bottom: -31px; display: flex; align-items: center; gap: 4px; color: #7650b6; font-size: var(--type-caption); font-weight: 600; text-decoration: none; }
.saved-clue-preview > a .lucide { width: 12px; height: 12px; }
.account-conversation-form { display: grid; gap: 9px; margin-top: 44px; }
.account-conversation-form .account-security-notice { width: 100%; margin: 8px 0 0; padding: 14px 16px; border: 1px solid #d7c5ef; border-radius: 15px; background: #f5edfc; color: #6f5b84; font-size: var(--type-small); font-weight: 600; line-height: 1.65; }
.account-details-form { display: block; }
.account-form-card { padding: 30px 28px 26px; border: 1px solid #dfd1f0; border-radius: 24px; background: #fbf6ff; }
.account-form-header { text-align: center; }
.account-form-header .clue-step-icon { margin-bottom: 12px; }
.account-form-header > p { margin: 0; color: #9d82bd; font-size: var(--type-caption); font-weight: 600; }
.account-form-header > h2 { margin: 5px 0 0; color: #4c2d8b; font-size: var(--type-page-title); line-height: 1.35; word-break: keep-all; }
.account-form-header > span { display: block; margin-top: 7px; color: #8a789d; font-size: var(--type-body); font-weight: 600; line-height: 1.65; word-break: keep-all; }
.account-form-fields { display: grid; gap: 13px; margin-top: 24px; }
.account-form-field { display: grid; gap: 7px; text-align: left; }
.account-form-field > span { color: #806c96; font-size: var(--type-small); font-weight: 600; }
.account-form-field input { width: 100%; min-width: 0; min-height: 56px; padding: 0 16px; border: 1px solid #cdb8e6; border-radius: 15px; outline: 0; background: #fffaff; color: #4d2e83; font-size: var(--type-subtitle); font-weight: 600; }
.account-form-field input::placeholder { color: #b3a3c3; font-weight: 600; }
.account-form-field input:focus-visible { border-color: #7046c0; box-shadow: 0 0 0 3px rgba(112, 70, 192, .18); }
.account-password-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 5px; padding-top: 17px; border-top: 1px solid #e5d9f2; }
.account-password-heading strong { color: #60427f; font-size: var(--type-body); }
.account-password-heading span { color: #9482a7; font-size: var(--type-label); font-weight: 600; }
.account-details-form .precision-notice { width: 100%; margin: 0; }
.account-details-form .onboarding-next-button.final { margin-top: 22px; }
.account-question { display: flex; align-items: flex-end; gap: 7px; }
.tamami-mini { width: 34px; height: 34px; overflow: hidden; border: 1px solid #d0baea; border-radius: 11px; background: #eadcff; flex: 0 0 auto; }
.tamami-mini img { display: block; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.account-question p { margin: 0; padding: 11px 13px; border: 1px solid #ddcff0; border-radius: 15px 15px 15px 5px; background: #fffaff; color: #665277; font-size: var(--type-small); font-weight: 600; }
.account-answer { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; width: calc(100% - 42px); min-height: 56px; margin: 0 0 7px auto; padding: 8px 13px; border: 1px solid #cdb8e7; border-radius: 17px 17px 5px 17px; background: #eee3fa; color: #684f83; font-size: var(--type-small); font-weight: 600; }
.account-answer input { min-width: 0; height: 39px; border: 0; border-bottom: 2px solid #aa8cce; outline: 0; background: transparent; color: #432776; font-size: var(--type-body-lg); font-weight: 600; }
.account-answer input:focus { border-color: #6f45bf; }
.onboarding-next-button.final { margin-top: 14px; }
.clue-wizard-main { max-width: 590px; }
.clue-wizard {
  min-width: 0;
  min-height: 650px;
  overflow: visible;
  background-color: #e5d4fc;
  background-image: url("/images/signup_star_background.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.clue-wizard .onboarding-progress > i { position: relative; overflow: hidden; background: rgba(137, 107, 204, 0.25); }
.clue-wizard .onboarding-progress > i em { position: absolute; inset: 0 auto 0 0; width: 20%; border-radius: inherit; background: #896bcc; transition: width .35s ease; }
.clue-wizard .onboarding-progress span { color: #896bcc; }
.clue-wizard .onboarding-progress span.active { color: #4a2a8b; font-weight: 600; text-shadow: none; }
.signup-draft-cleared { margin: 12px 0 0; padding: 11px 13px; border: 1px solid #b9d8c5; border-radius: 13px; background: #eef9f2; color: #3f7654; font-size: var(--type-small); font-weight: 600; line-height: 1.5; }
.tamami-guide { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; gap: 8px; margin: 0 0 16px; padding-left: 2px; }
.tamami-guide > img { display: block; width: 112px; height: auto; filter: drop-shadow(0 8px 12px rgba(83, 46, 143, .18)); image-rendering: pixelated; }
.tamami-guide-bubble {
  --tamami-guide-tail-anchor: -8px;
  position: relative;
  min-width: 0;
}
.tamami-guide-card {
  position: relative;
  min-width: 0;
  padding: 16px 20px;
  border-style: solid;
  border-width: 14px;
  border-image: url('data:image/svg+xml;utf8,<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14 2H34V4H38V6H42V10H44V14H46V34H44V38H42V42H38V44H34V46H14V44H10V42H6V38H4V34H2V14H4V10H6V6H10V4H14V2Z" fill="%23ffffff"/><rect x="14" y="2" width="20" height="2" fill="%23ffffff"/><rect x="10" y="4" width="4" height="2" fill="%23ffffff"/><rect x="6" y="6" width="4" height="2" fill="%23ffffff"/><rect x="4" y="8" width="2" height="4" fill="%23ffffff"/><rect x="2" y="12" width="2" height="22" fill="%23ffffff"/><rect x="44" y="14" width="2" height="22" fill="%23b290e8"/><rect x="42" y="36" width="2" height="4" fill="%23b290e8"/><rect x="38" y="40" width="4" height="2" fill="%23b290e8"/><rect x="34" y="42" width="4" height="2" fill="%23b290e8"/><rect x="14" y="44" width="20" height="2" fill="%23b290e8"/><rect x="14" y="0" width="20" height="2" fill="%23896bcc"/><rect x="10" y="2" width="4" height="2" fill="%23896bcc"/><rect x="6" y="4" width="4" height="2" fill="%23896bcc"/><rect x="4" y="6" width="2" height="4" fill="%23896bcc"/><rect x="2" y="10" width="2" height="4" fill="%23896bcc"/><rect x="0" y="14" width="2" height="20" fill="%23896bcc"/><rect x="34" y="2" width="4" height="2" fill="%23896bcc"/><rect x="38" y="4" width="4" height="2" fill="%23896bcc"/><rect x="42" y="6" width="2" height="4" fill="%23896bcc"/><rect x="44" y="10" width="2" height="4" fill="%23896bcc"/><rect x="46" y="14" width="2" height="20" fill="%23896bcc"/><rect x="2" y="34" width="2" height="4" fill="%23896bcc"/><rect x="4" y="38" width="2" height="4" fill="%23896bcc"/><rect x="6" y="42" width="4" height="2" fill="%23896bcc"/><rect x="10" y="44" width="4" height="2" fill="%23896bcc"/><rect x="14" y="46" width="20" height="2" fill="%23896bcc"/><rect x="44" y="34" width="2" height="4" fill="%23896bcc"/><rect x="42" y="38" width="2" height="4" fill="%23896bcc"/><rect x="38" y="42" width="4" height="2" fill="%23896bcc"/><rect x="34" y="44" width="4" height="2" fill="%23896bcc"/></svg>') 14 fill stretch;
  background-color: #ffffff;
  clip-path: polygon(
    14px 0, calc(100% - 14px) 0,
    calc(100% - 14px) 2px, calc(100% - 10px) 2px,
    calc(100% - 10px) 4px, calc(100% - 6px) 4px,
    calc(100% - 6px) 6px, calc(100% - 4px) 6px,
    calc(100% - 4px) 10px, calc(100% - 2px) 10px,
    calc(100% - 2px) 14px, 100% 14px,
    100% calc(100% - 14px), calc(100% - 2px) calc(100% - 14px),
    calc(100% - 2px) calc(100% - 10px), calc(100% - 4px) calc(100% - 10px),
    calc(100% - 4px) calc(100% - 6px), calc(100% - 6px) calc(100% - 6px),
    calc(100% - 6px) calc(100% - 4px), calc(100% - 10px) calc(100% - 4px),
    calc(100% - 10px) calc(100% - 2px), calc(100% - 14px) calc(100% - 2px),
    calc(100% - 14px) 100%, 14px 100%,
    14px calc(100% - 2px), 10px calc(100% - 2px),
    10px calc(100% - 4px), 6px calc(100% - 4px),
    6px calc(100% - 6px), 4px calc(100% - 6px),
    4px calc(100% - 10px), 2px calc(100% - 10px),
    2px calc(100% - 14px), 0 calc(100% - 14px),
    0 14px, 2px 14px,
    2px 10px, 4px 10px,
    4px 6px, 6px 6px,
    6px 4px, 10px 4px,
    10px 2px, 14px 2px
  );
}
.tamami-guide-bubble::before {
  position: absolute;
  top: 50%;
  left: var(--tamami-guide-tail-anchor);
  z-index: 3;
  width: 0;
  height: 0;
  transform: translateY(-50%);
  border-top: 6px solid transparent;
  border-right: 10px solid #896bcc;
  border-bottom: 6px solid transparent;
  content: "";
}
.tamami-guide-bubble::after {
  position: absolute;
  top: 50%;
  left: calc(var(--tamami-guide-tail-anchor) + 3px);
  z-index: 4;
  width: 0;
  height: 0;
  transform: translateY(-50%);
  border-top: 4px solid transparent;
  border-right: 8px solid #ffffff;
  border-bottom: 4px solid transparent;
  content: "";
}
.tamami-guide small { color: #8e65d2; font-size: var(--type-caption); font-weight: 600; }
.tamami-guide h1 { margin: 4px 0 0; color: #4a2a8b; font-size: var(--type-card-title); line-height: 1.25; }
.tamami-guide h1 span { display: block; }
.clue-step-form { position: relative; min-width: 0; margin-top: 18px; }
.clue-step {
  position: relative;
  min-width: 0;
  min-inline-size: 0;
  min-height: 0;
  margin: 0;
  padding: 32px 28px 26px;
  border-style: solid;
  border-width: 14px;
  border-image: url('data:image/svg+xml;utf8,<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14 2H34V4H38V6H42V10H44V14H46V34H44V38H42V42H38V44H34V46H14V44H10V42H6V38H4V34H2V14H4V10H6V6H10V4H14V2Z" fill="%23fbf6ff"/><rect x="14" y="2" width="20" height="2" fill="%23ffffff"/><rect x="10" y="4" width="4" height="2" fill="%23ffffff"/><rect x="6" y="6" width="4" height="2" fill="%23ffffff"/><rect x="4" y="8" width="2" height="4" fill="%23ffffff"/><rect x="2" y="12" width="2" height="22" fill="%23ffffff"/><rect x="44" y="14" width="2" height="22" fill="%23b290e8"/><rect x="42" y="36" width="2" height="4" fill="%23b290e8"/><rect x="38" y="40" width="4" height="2" fill="%23b290e8"/><rect x="34" y="42" width="4" height="2" fill="%23b290e8"/><rect x="14" y="44" width="20" height="2" fill="%23b290e8"/><rect x="14" y="0" width="20" height="2" fill="%23896bcc"/><rect x="10" y="2" width="4" height="2" fill="%23896bcc"/><rect x="6" y="4" width="4" height="2" fill="%23896bcc"/><rect x="4" y="6" width="2" height="4" fill="%23896bcc"/><rect x="2" y="10" width="2" height="4" fill="%23896bcc"/><rect x="0" y="14" width="2" height="20" fill="%23896bcc"/><rect x="34" y="2" width="4" height="2" fill="%23896bcc"/><rect x="38" y="4" width="4" height="2" fill="%23896bcc"/><rect x="42" y="6" width="2" height="4" fill="%23896bcc"/><rect x="44" y="10" width="2" height="4" fill="%23896bcc"/><rect x="46" y="14" width="2" height="20" fill="%23896bcc"/><rect x="2" y="34" width="2" height="4" fill="%23896bcc"/><rect x="4" y="38" width="2" height="4" fill="%23896bcc"/><rect x="6" y="42" width="4" height="2" fill="%23896bcc"/><rect x="10" y="44" width="4" height="2" fill="%23896bcc"/><rect x="14" y="46" width="20" height="2" fill="%23896bcc"/><rect x="44" y="34" width="2" height="4" fill="%23896bcc"/><rect x="42" y="38" width="2" height="4" fill="%23896bcc"/><rect x="38" y="42" width="4" height="2" fill="%23896bcc"/><rect x="34" y="44" width="4" height="2" fill="%23896bcc"/></svg>') 14 fill stretch;
  background-color: transparent;
  clip-path: polygon(
    14px 0, calc(100% - 14px) 0,
    calc(100% - 14px) 2px, calc(100% - 10px) 2px,
    calc(100% - 10px) 4px, calc(100% - 6px) 4px,
    calc(100% - 6px) 6px, calc(100% - 4px) 6px,
    calc(100% - 4px) 10px, calc(100% - 2px) 10px,
    calc(100% - 2px) 14px, 100% 14px,
    100% calc(100% - 14px), calc(100% - 2px) calc(100% - 14px),
    calc(100% - 2px) calc(100% - 10px), calc(100% - 4px) calc(100% - 10px),
    calc(100% - 4px) calc(100% - 6px), calc(100% - 6px) calc(100% - 6px),
    calc(100% - 6px) calc(100% - 4px), calc(100% - 10px) calc(100% - 4px),
    calc(100% - 10px) calc(100% - 2px), calc(100% - 14px) calc(100% - 2px),
    calc(100% - 14px) 100%, 14px 100%,
    14px calc(100% - 2px), 10px calc(100% - 2px),
    10px calc(100% - 4px), 6px calc(100% - 4px),
    6px calc(100% - 6px), 4px calc(100% - 6px),
    4px calc(100% - 10px), 2px calc(100% - 10px),
    2px calc(100% - 14px), 0 calc(100% - 14px),
    0 14px, 2px 14px,
    2px 10px, 4px 10px,
    4px 6px, 6px 6px,
    6px 4px, 10px 4px,
    10px 2px, 14px 2px
  );
  text-align: center;
}
.clue-step.is-entering-forward { animation: clue-enter-forward .32s cubic-bezier(.22, .8, .32, 1); }
.clue-step.is-entering-back { animation: clue-enter-back .32s cubic-bezier(.22, .8, .32, 1); }
.clue-step.is-leaving-forward { animation: clue-leave-forward .22s ease-in both; }
.clue-step.is-leaving-back { animation: clue-leave-back .22s ease-in both; }
@keyframes clue-enter-forward { from { transform: translateX(45px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes clue-enter-back { from { transform: translateX(-45px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes clue-leave-forward { to { transform: translateX(-38px); opacity: 0; } }
@keyframes clue-leave-back { to { transform: translateX(38px); opacity: 0; } }
.clue-step-count { display: none !important; }
.clue-step-icon {
  position: relative;
  display: grid;
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  border-style: solid;
  border-width: 14px;
  border-image: url('data:image/svg+xml;utf8,<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14 2H34V4H38V6H42V10H44V14H46V34H44V38H42V42H38V44H34V46H14V44H10V42H6V38H4V34H2V14H4V10H6V6H10V4H14V2Z" fill="%23e9ddf8"/><rect x="14" y="2" width="20" height="2" fill="%23ffffff"/><rect x="10" y="4" width="4" height="2" fill="%23ffffff"/><rect x="6" y="6" width="4" height="2" fill="%23ffffff"/><rect x="4" y="8" width="2" height="4" fill="%23ffffff"/><rect x="2" y="12" width="2" height="22" fill="%23ffffff"/><rect x="44" y="14" width="2" height="22" fill="%23cbb2f5"/><rect x="42" y="36" width="2" height="4" fill="%23cbb2f5"/><rect x="38" y="40" width="4" height="2" fill="%23cbb2f5"/><rect x="34" y="42" width="4" height="2" fill="%23cbb2f5"/><rect x="14" y="44" width="20" height="2" fill="%23cbb2f5"/><rect x="14" y="0" width="20" height="2" fill="%23896bcc"/><rect x="10" y="2" width="4" height="2" fill="%23896bcc"/><rect x="6" y="4" width="4" height="2" fill="%23896bcc"/><rect x="4" y="6" width="2" height="4" fill="%23896bcc"/><rect x="2" y="10" width="2" height="4" fill="%23896bcc"/><rect x="0" y="14" width="2" height="20" fill="%23896bcc"/><rect x="34" y="2" width="4" height="2" fill="%23896bcc"/><rect x="38" y="4" width="4" height="2" fill="%23896bcc"/><rect x="42" y="6" width="2" height="4" fill="%23896bcc"/><rect x="44" y="10" width="2" height="4" fill="%23896bcc"/><rect x="46" y="14" width="2" height="20" fill="%23896bcc"/><rect x="2" y="34" width="2" height="4" fill="%23896bcc"/><rect x="4" y="38" width="2" height="4" fill="%23896bcc"/><rect x="6" y="42" width="4" height="2" fill="%23896bcc"/><rect x="10" y="44" width="4" height="2" fill="%23896bcc"/><rect x="14" y="46" width="20" height="2" fill="%23896bcc"/><rect x="44" y="34" width="2" height="4" fill="%23896bcc"/><rect x="42" y="38" width="2" height="4" fill="%23896bcc"/><rect x="38" y="42" width="4" height="2" fill="%23896bcc"/><rect x="34" y="44" width="4" height="2" fill="%23896bcc"/></svg>') 14 fill stretch;
  background-color: transparent;
  clip-path: polygon(
    14px 0, calc(100% - 14px) 0,
    calc(100% - 14px) 2px, calc(100% - 10px) 2px,
    calc(100% - 10px) 4px, calc(100% - 6px) 4px,
    calc(100% - 6px) 6px, calc(100% - 4px) 6px,
    calc(100% - 4px) 10px, calc(100% - 2px) 10px,
    calc(100% - 2px) 14px, 100% 14px,
    100% calc(100% - 14px), calc(100% - 2px) calc(100% - 14px),
    calc(100% - 2px) calc(100% - 10px), calc(100% - 4px) calc(100% - 10px),
    calc(100% - 4px) calc(100% - 6px), calc(100% - 6px) calc(100% - 6px),
    calc(100% - 6px) calc(100% - 4px), calc(100% - 10px) calc(100% - 4px),
    calc(100% - 10px) calc(100% - 2px), calc(100% - 14px) calc(100% - 2px),
    calc(100% - 14px) 100%, 14px 100%,
    14px calc(100% - 2px), 10px calc(100% - 2px),
    10px calc(100% - 4px), 6px calc(100% - 4px),
    6px calc(100% - 6px), 4px calc(100% - 6px),
    4px calc(100% - 10px), 2px calc(100% - 10px),
    2px calc(100% - 14px), 0 calc(100% - 14px),
    0 14px, 2px 14px,
    2px 10px, 4px 10px,
    4px 6px, 6px 6px,
    6px 4px, 10px 4px,
    10px 2px, 14px 2px
  );
  color: #5632ad;
  place-items: center;
}
.clue-step-icon .lucide { width: 26px; height: 26px; }
.clue-step-count { margin: 0; color: #9d82bd; font-size: var(--type-caption); font-weight: 600; }
.clue-step h2 { margin: 5px auto 0; color: #4c2d8b; font-size: var(--type-page-title); line-height: 1.35; overflow-wrap: anywhere; word-break: keep-all; }
.clue-step-copy { margin: 7px 0 22px; color: #8a789d; font-size: var(--type-body); font-weight: 600; line-height: 1.65; overflow-wrap: anywhere; }
.clue-back-button {
  position: absolute;
  top: 10px;
  left: 10px;
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  border-style: solid;
  border-width: 6px;
  border-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="6" y="2" width="12" height="2" fill="%23ffffff"/><rect x="4" y="4" width="2" height="2" fill="%23ffffff"/><rect x="2" y="6" width="2" height="12" fill="%23ffffff"/><rect x="20" y="6" width="2" height="12" fill="%23b290e8"/><rect x="18" y="18" width="2" height="2" fill="%23b290e8"/><rect x="6" y="20" width="12" height="2" fill="%23b290e8"/><rect x="6" y="0" width="12" height="2" fill="%23896bcc"/><rect x="4" y="2" width="2" height="2" fill="%23896bcc"/><rect x="2" y="4" width="2" height="2" fill="%23896bcc"/><rect x="0" y="6" width="2" height="12" fill="%23896bcc"/><rect x="2" y="18" width="2" height="2" fill="%23896bcc"/><rect x="4" y="20" width="2" height="2" fill="%23896bcc"/><rect x="6" y="22" width="12" height="2" fill="%23896bcc"/><rect x="18" y="0" width="2" height="2" fill="%23896bcc"/><rect x="20" y="2" width="2" height="2" fill="%23896bcc"/><rect x="20" y="4" width="2" height="2" fill="%23896bcc"/><rect x="22" y="6" width="2" height="12" fill="%23896bcc"/><rect x="20" y="18" width="2" height="2" fill="%23896bcc"/><rect x="18" y="20" width="2" height="2" fill="%23896bcc"/></svg>') 6 fill stretch;
  background-color: transparent;
  clip-path: polygon(
    6px 0, calc(100% - 6px) 0,
    calc(100% - 6px) 2px, calc(100% - 4px) 2px,
    calc(100% - 4px) 4px, calc(100% - 2px) 4px,
    calc(100% - 2px) 6px, 100% 6px,
    100% calc(100% - 6px), calc(100% - 2px) calc(100% - 6px),
    calc(100% - 2px) calc(100% - 4px), calc(100% - 4px) calc(100% - 4px),
    calc(100% - 4px) calc(100% - 2px), calc(100% - 6px) calc(100% - 2px),
    calc(100% - 6px) 100%, 6px 100%,
    6px calc(100% - 2px), 4px calc(100% - 2px),
    4px calc(100% - 4px), 2px calc(100% - 4px),
    2px calc(100% - 6px), 0 calc(100% - 6px),
    0 6px, 2px 6px,
    2px 4px, 4px 4px,
    4px 2px, 6px 2px
  );
  color: #5632ad;
  box-shadow: none;
  cursor: pointer;
  place-items: center;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.clue-back-button:hover { transform: translateY(-1px); filter: brightness(1.03); }
.clue-back-button .lucide { width: 17px; height: 17px; }
.personalized-greeting { margin: 0 48px 8px; color: #744db5; font-size: var(--type-body-lg); font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.display-name-answer { display: grid; width: 100%; gap: 7px; margin: 24px 0 0; text-align: left; }
.display-name-answer > span { color: #806c96; font-size: var(--type-small); font-weight: 600; }
.display-name-answer input {
  --display-name-frame: url("/images/pixel_frame_input.svg?v=1");

  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 56px;
  min-height: 56px;
  padding: 0 4px;
  border: 14px solid transparent !important;
  border-image-source: var(--display-name-frame) !important;
  border-image-slice: 14 fill !important;
  border-image-width: 1 !important;
  border-image-repeat: stretch !important;
  border-radius: 0 !important;
  outline: 0;
  background: transparent !important;
  background-clip: border-box !important;
  background-origin: border-box !important;
  box-shadow: none !important;
  clip-path: none !important;
  color: #4d2e83;
  font-size: var(--type-section-title);
  font-weight: 600;
  image-rendering: pixelated;
}
.display-name-answer input:focus,
.display-name-answer input:focus-visible { outline: 3px solid rgb(137 107 204 / 42%) !important; outline-offset: 2px; }
.display-name-answer input[aria-invalid="true"] { outline: 3px solid rgb(200 92 131 / 42%) !important; outline-offset: 2px; }
.clue-field-error { width: min(100%, 410px); margin: 9px auto 0; color: #b54e76; font-size: var(--type-small); font-weight: 600; line-height: 1.55; overflow-wrap: anywhere; text-align: left; }
.calendar-fieldset, .lunar-fieldset, .choice-fieldset { min-width: 0; min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.calendar-fieldset > legend, .lunar-fieldset > legend { width: 100%; margin-bottom: 7px; color: #8e76aa; font-size: var(--type-label); font-weight: 600; text-align: center; }
.lunar-fieldset { margin-bottom: 12px; }
.calendar-kind-switch, .lunar-kind-switch { display: inline-flex; gap: 5px; padding: 4px; border: 1px solid #896bcc; border-radius: 12px; background: var(--surface-white); box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #e4d8f8; }
.calendar-kind-switch label, .lunar-kind-switch label { cursor: pointer; }
.calendar-kind-switch input, .lunar-kind-switch input { position: absolute; opacity: 0; pointer-events: none; }
.calendar-kind-switch span, .lunar-kind-switch span { display: grid; min-width: 70px; min-height: 34px; align-items: center; border: 1px solid transparent; border-radius: 8px; color: #806b94; font-size: var(--type-small); font-weight: 600; }
.calendar-kind-switch input:checked + span, .lunar-kind-switch input:checked + span { border-color: #896bcc; background: #eee3fb; color: #4b2d86; }
.birthday-selects, .birthtime-selects { display: flex; align-items: end; justify-content: center; gap: 8px; margin: 16px 0; }
.birthday-selects label, .birthtime-selects label { position: relative; display: grid; min-width: 0; flex: 1; }
.birthday-selects label:first-child { flex: 1.35; }
.birthday-selects label > span, .birthtime-selects label > span { margin-bottom: 5px; color: #9a84b3; font-size: var(--type-caption); font-weight: 600; text-align: left; }
.birthday-selects select, .birthtime-selects select { width: 100%; height: 58px; padding: 0 28px 0 13px; border: 2px solid #896bcc; border-radius: 12px; outline: 0; appearance: none; background: var(--surface-white); color: #4d2e83; font-size: var(--type-section-title); font-weight: 600; text-align: center; cursor: pointer; box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #e4d8f8; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.birthday-selects select:focus, .birthtime-selects select:focus { border-color: #5632ad; box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #cbb2f5, 0 0 0 3px rgba(137, 107, 204, 0.25); }
.birthday-selects select,
.birthtime-selects select {
  --clue-select-frame: url("/images/pixel_frame_birth_profile_input.svg?v=5");

  box-sizing: border-box;
  padding: 0 2px !important;
  border: 14px solid transparent !important;
  border-image-source: var(--clue-select-frame) !important;
  border-image-slice: 14 fill !important;
  border-image-width: 1 !important;
  border-image-repeat: stretch !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-clip: border-box !important;
  background-origin: border-box !important;
  box-shadow: none !important;
  clip-path: none !important;
  image-rendering: pixelated;
}
.birthday-selects label::after, .birthtime-selects label::after { position: absolute; right: 10px; bottom: 22px; width: 6px; height: 6px; transform: rotate(45deg); border-right: 2px solid #9476b7; border-bottom: 2px solid #9476b7; pointer-events: none; content: ""; }
.birthday-selects small, .birthtime-selects small { margin-top: 5px; color: #88739d; font-size: var(--type-label); font-weight: 600; }
.clue-answer-button {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  border-style: solid;
  border-width: 14px;
  border-image: url('data:image/svg+xml;utf8,<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14 2H34V4H38V6H42V10H44V14H46V34H44V38H42V42H38V44H34V46H14V44H10V42H6V38H4V34H2V14H4V10H6V6H10V4H14V2Z" fill="%23c8a6f0"/><rect x="14" y="2" width="20" height="2" fill="%23ffffff"/><rect x="10" y="4" width="4" height="2" fill="%23ffffff"/><rect x="6" y="6" width="4" height="2" fill="%23ffffff"/><rect x="4" y="8" width="2" height="4" fill="%23ffffff"/><rect x="2" y="12" width="2" height="22" fill="%23ffffff"/><rect x="44" y="14" width="2" height="22" fill="%23b290e8"/><rect x="42" y="36" width="2" height="4" fill="%23b290e8"/><rect x="38" y="40" width="4" height="2" fill="%23b290e8"/><rect x="34" y="42" width="4" height="2" fill="%23b290e8"/><rect x="14" y="44" width="20" height="2" fill="%23b290e8"/><rect x="14" y="0" width="20" height="2" fill="%23896bcc"/><rect x="10" y="2" width="4" height="2" fill="%23896bcc"/><rect x="6" y="4" width="4" height="2" fill="%23896bcc"/><rect x="4" y="6" width="2" height="4" fill="%23896bcc"/><rect x="2" y="10" width="2" height="4" fill="%23896bcc"/><rect x="0" y="14" width="2" height="20" fill="%23896bcc"/><rect x="34" y="2" width="4" height="2" fill="%23896bcc"/><rect x="38" y="4" width="4" height="2" fill="%23896bcc"/><rect x="42" y="6" width="2" height="4" fill="%23896bcc"/><rect x="44" y="10" width="2" height="4" fill="%23896bcc"/><rect x="46" y="14" width="2" height="20" fill="%23896bcc"/><rect x="2" y="34" width="2" height="4" fill="%23896bcc"/><rect x="4" y="38" width="2" height="4" fill="%23896bcc"/><rect x="6" y="42" width="4" height="2" fill="%23896bcc"/><rect x="10" y="44" width="4" height="2" fill="%23896bcc"/><rect x="14" y="46" width="20" height="2" fill="%23896bcc"/><rect x="44" y="34" width="2" height="4" fill="%23896bcc"/><rect x="42" y="38" width="2" height="4" fill="%23896bcc"/><rect x="38" y="42" width="4" height="2" fill="%23896bcc"/><rect x="34" y="44" width="4" height="2" fill="%23896bcc"/></svg>') 14 fill stretch;
  background-color: transparent;
  box-shadow: none;
  color: #4b2d86;
  font-size: var(--type-body-lg);
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.clue-answer-button:hover { transform: translateY(-2px); filter: brightness(1.03); }
.clue-answer-button:disabled { transform: none; filter: grayscale(0.5); cursor: wait; opacity: .7; }
.clue-answer-button .lucide { width: 17px; height: 17px; }
.birthtime-selects { width: 100%; margin: 22px 0 16px; }
.birthtime-selects > b { padding-bottom: 24px; color: #795ba1; font-size: var(--type-page-title); }
.unknown-time-answer { display: block; width: min(100%, 330px); margin: 0 auto; cursor: pointer; }
.unknown-time-answer input { position: absolute; opacity: 0; pointer-events: none; }
.unknown-time-answer span { display: flex; min-height: 45px; align-items: center; justify-content: center; gap: 7px; border: 1px dashed #bea7d9; border-radius: 13px; background: #fffaff; color: #766288; font-size: var(--type-small); font-weight: 600; }
.unknown-time-answer span .lucide { width: 16px; height: 16px; }
.unknown-time-answer input:checked + span { border-style: solid; border-color: #7750bd; background: #e2d4f3; color: #573594; }
.clue-step .precision-notice {
  width: min(100%, 360px);
  margin: 12px auto 0;
  padding: 10px 14px;
  border: 1px dashed #bea7d9;
  border-radius: 12px;
  background: #f5edfc;
  color: #6a4c9c;
  font-size: var(--type-small);
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
}
.single-choice-answers { display: grid; gap: 10px; width: 100%; margin: 30px 0 0; }
.single-choice-answers label { cursor: pointer; }
.single-choice-answers input { position: absolute; opacity: 0; pointer-events: none; }
.single-choice-answers span {
  --signup-choice-frame: url("/images/pixel_frame_input.svg?v=1");

  display: grid;
  min-height: 67px;
  grid-template-columns: 26px 1fr 18px;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  border: 14px solid transparent;
  border-image-source: var(--signup-choice-frame);
  border-image-slice: 14 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  background-clip: border-box;
  background-origin: border-box;
  box-shadow: none;
  clip-path: none;
  color: #4b2d86;
  font-weight: 600;
  text-align: left;
  image-rendering: pixelated;
  transition: filter .16s ease, transform .16s ease;
}
.single-choice-answers span .lucide { width: 21px; height: 21px; color: #8865bc; }
.single-choice-answers span .lucide:last-child { width: 17px; height: 17px; justify-self: end; }
.single-choice-answers label:hover span,
.single-choice-answers input:checked + span {
  --signup-choice-frame: url("/images/pixel_frame_signup_choice_selected.svg?v=1");

  filter: brightness(1.01);
  transform: translateX(4px);
}
.place-select-answer { position: relative; display: grid; width: 100%; min-height: 72px; grid-template-columns: 24px minmax(0, 1fr) 18px; align-items: center; gap: 10px; margin: 36px 0 0; padding: 0 17px; border: 2px solid #896bcc; border-radius: 12px; background: var(--surface-white); color: #4b2d86; box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #e4d8f8; }
.place-select-answer > .lucide { width: 21px; height: 21px; pointer-events: none; }
.place-select-answer > .lucide:last-child { width: 17px; height: 17px; }
.place-select-answer select { width: 100%; height: 70px; border: 0; outline: 0; appearance: none; background: transparent; color: #4f337d; font-size: var(--type-body-lg); font-weight: 600; cursor: pointer; }
.final-consent-answer { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: start; gap: 11px; width: 100%; margin: 28px 0 0; padding: 17px; border: 2px solid #896bcc; border-radius: 12px; background: var(--surface-white); cursor: pointer; text-align: left; box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #e4d8f8; }
.final-consent-answer > input { position: absolute; opacity: 0; pointer-events: none; }
.final-consent-answer > span { display: grid; width: 24px; height: 24px; border: 2px solid #b49acb; border-radius: 8px; background: #f7effc; color: transparent; place-items: center; }
.final-consent-answer > span .lucide { width: 15px; height: 15px; }
.final-consent-answer > input:checked + span { border-color: #7045bd; background: #7045bd; color: #fff; }
.final-consent-answer > div { display: grid; gap: 5px; }
.final-consent-answer strong { color: #60427f; font-size: var(--type-body); }
.final-consent-answer small { color: #8c7a9e; font-size: var(--type-label); line-height: 1.6; }
.final-consent-answer a { color: #6845b5; font-weight: 600; }
.clue-back-button:focus-visible, .clue-answer-button:focus-visible, .onboarding-next-button:focus-visible { outline: 3px solid #90c2ff; outline-offset: 3px; }
.calendar-kind-switch input:focus-visible + span, .lunar-kind-switch input:focus-visible + span,
.single-choice-answers input:focus-visible + span, .unknown-time-answer input:focus-visible + span,
.final-consent-answer > input:focus-visible + span { outline: 3px solid #90c2ff; outline-offset: 2px; }
.birthday-selects select:focus-visible, .birthtime-selects select:focus-visible,
.place-select-answer select:focus-visible { outline: 3px solid #90c2ff; outline-offset: 2px; }
.tamami-guide h1, .account-prompt h1, .account-prompt p { overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) {
  .clue-step, .clue-wizard .onboarding-progress > i em { animation: none !important; transition: none !important; }
}
.auth-card {
  position: relative;
  margin-top: 12px;
  padding: 24px;
  border-style: solid;
  border-width: 14px;
  border-image: url('data:image/svg+xml;utf8,<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14 2H34V4H38V6H42V10H44V14H46V34H44V38H42V42H38V44H34V46H14V44H10V42H6V38H4V34H2V14H4V10H6V6H10V4H14V2Z" fill="%23fbf6ff"/><rect x="14" y="2" width="20" height="2" fill="%23ffffff"/><rect x="10" y="4" width="4" height="2" fill="%23ffffff"/><rect x="6" y="6" width="4" height="2" fill="%23ffffff"/><rect x="4" y="8" width="2" height="4" fill="%23ffffff"/><rect x="2" y="12" width="2" height="22" fill="%23ffffff"/><rect x="44" y="14" width="2" height="22" fill="%23b290e8"/><rect x="42" y="36" width="2" height="4" fill="%23b290e8"/><rect x="38" y="40" width="4" height="2" fill="%23b290e8"/><rect x="34" y="42" width="4" height="2" fill="%23b290e8"/><rect x="14" y="44" width="20" height="2" fill="%23b290e8"/><rect x="14" y="0" width="20" height="2" fill="%23896bcc"/><rect x="10" y="2" width="4" height="2" fill="%23896bcc"/><rect x="6" y="4" width="4" height="2" fill="%23896bcc"/><rect x="4" y="6" width="2" height="4" fill="%23896bcc"/><rect x="2" y="10" width="2" height="4" fill="%23896bcc"/><rect x="0" y="14" width="2" height="20" fill="%23896bcc"/><rect x="34" y="2" width="4" height="2" fill="%23896bcc"/><rect x="38" y="4" width="4" height="2" fill="%23896bcc"/><rect x="42" y="6" width="2" height="4" fill="%23896bcc"/><rect x="44" y="10" width="2" height="4" fill="%23896bcc"/><rect x="46" y="14" width="2" height="20" fill="%23896bcc"/><rect x="2" y="34" width="2" height="4" fill="%23896bcc"/><rect x="4" y="38" width="2" height="4" fill="%23896bcc"/><rect x="6" y="42" width="4" height="2" fill="%23896bcc"/><rect x="10" y="44" width="4" height="2" fill="%23896bcc"/><rect x="14" y="46" width="20" height="2" fill="%23896bcc"/><rect x="44" y="34" width="2" height="4" fill="%23896bcc"/><rect x="42" y="38" width="2" height="4" fill="%23896bcc"/><rect x="38" y="42" width="4" height="2" fill="%23896bcc"/><rect x="34" y="44" width="4" height="2" fill="%23896bcc"/></svg>') 14 fill stretch;
  background-color: transparent;
  clip-path: polygon(
    14px 0, calc(100% - 14px) 0,
    calc(100% - 14px) 2px, calc(100% - 10px) 2px,
    calc(100% - 10px) 4px, calc(100% - 6px) 4px,
    calc(100% - 6px) 6px, calc(100% - 4px) 6px,
    calc(100% - 4px) 10px, calc(100% - 2px) 10px,
    calc(100% - 2px) 14px, 100% 14px,
    100% calc(100% - 14px), calc(100% - 2px) calc(100% - 14px),
    calc(100% - 2px) calc(100% - 10px), calc(100% - 4px) calc(100% - 10px),
    calc(100% - 4px) calc(100% - 6px), calc(100% - 6px) calc(100% - 6px),
    calc(100% - 6px) calc(100% - 4px), calc(100% - 10px) calc(100% - 4px),
    calc(100% - 10px) calc(100% - 2px), calc(100% - 14px) calc(100% - 2px),
    calc(100% - 14px) 100%, 14px 100%,
    14px calc(100% - 2px), 10px calc(100% - 2px),
    10px calc(100% - 4px), 6px calc(100% - 4px),
    6px calc(100% - 6px), 4px calc(100% - 6px),
    4px calc(100% - 10px), 2px calc(100% - 10px),
    2px calc(100% - 14px), 0 calc(100% - 14px),
    0 14px, 2px 14px,
    2px 10px, 4px 10px,
    4px 6px, 6px 6px,
    6px 4px, 10px 4px,
    10px 2px, 14px 2px
  );
  box-shadow: none;
}
.auth-card-header, .auth-card > .auth-form, .auth-card > .auth-mode-prompt, .auth-card > .auth-divider, .auth-card > .auth-social-actions, .auth-card > .auth-error { width: min(100%, 500px); margin-right: auto; margin-left: auto; }
.auth-card-header { display: flex; align-items: center; gap: 11px; }
.auth-card-header > span {
  position: relative;
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-style: solid;
  border-width: 6px;
  border-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="6" y="2" width="12" height="2" fill="%23ffffff"/><rect x="4" y="4" width="2" height="2" fill="%23ffffff"/><rect x="2" y="6" width="2" height="12" fill="%23ffffff"/><rect x="20" y="6" width="2" height="12" fill="%23b290e8"/><rect x="18" y="18" width="2" height="2" fill="%23b290e8"/><rect x="6" y="20" width="12" height="2" fill="%23b290e8"/><rect x="6" y="0" width="12" height="2" fill="%23896bcc"/><rect x="4" y="2" width="2" height="2" fill="%23896bcc"/><rect x="2" y="4" width="2" height="2" fill="%23896bcc"/><rect x="0" y="6" width="2" height="12" fill="%23896bcc"/><rect x="2" y="18" width="2" height="2" fill="%23896bcc"/><rect x="4" y="20" width="2" height="2" fill="%23896bcc"/><rect x="6" y="22" width="12" height="2" fill="%23896bcc"/><rect x="18" y="0" width="2" height="2" fill="%23896bcc"/><rect x="20" y="2" width="2" height="2" fill="%23896bcc"/><rect x="20" y="4" width="2" height="2" fill="%23896bcc"/><rect x="22" y="6" width="2" height="12" fill="%23896bcc"/><rect x="20" y="18" width="2" height="2" fill="%23896bcc"/><rect x="18" y="20" width="2" height="2" fill="%23896bcc"/></svg>') 6 fill stretch;
  background-color: transparent;
  clip-path: polygon(
    6px 0, calc(100% - 6px) 0,
    calc(100% - 6px) 2px, calc(100% - 4px) 2px,
    calc(100% - 4px) 4px, calc(100% - 2px) 4px,
    calc(100% - 2px) 6px, 100% 6px,
    100% calc(100% - 6px), calc(100% - 2px) calc(100% - 6px),
    calc(100% - 2px) calc(100% - 4px), calc(100% - 4px) calc(100% - 4px),
    calc(100% - 4px) calc(100% - 2px), calc(100% - 6px) calc(100% - 2px),
    calc(100% - 6px) 100%, 6px 100%,
    6px calc(100% - 2px), 4px calc(100% - 2px),
    4px calc(100% - 4px), 2px calc(100% - 4px),
    2px calc(100% - 6px), 0 calc(100% - 6px),
    0 6px, 2px 6px,
    2px 4px, 4px 4px,
    4px 2px, 6px 2px
  );
  color: #5632ad;
  box-shadow: none;
  place-items: center;
}
.auth-card-header > span .lucide { width: 18px; height: 18px; }
.auth-card-header p { margin: 0 0 3px; color: #9a70df; font-size: var(--type-label); font-weight: 600; }
.auth-card-header h2 { margin: 0; color: #5031a4; font-size: var(--type-card-title); font-weight: 600; }
.auth-error { margin-top: 14px !important; margin-bottom: 0 !important; padding: 12px 14px; border: 1px solid #efbfd2; border-radius: 7px; background: #fff3f8; color: #b54e76; font-size: var(--type-small); font-weight: 600; line-height: 1.55; }
.auth-form { display: grid; gap: 13px; margin-top: 20px; }
.auth-input-field { display: grid; gap: 7px; }
.auth-input-field > span { color: #624b83; font-size: var(--type-small); font-weight: 600; }
.auth-input-field input { width: 100%; height: 44px; padding: 0 13px; border: 2px solid #896bcc; border-radius: 10px; outline: 0; background: var(--surface-white); color: #4b2d86; font-size: var(--type-body); font-weight: 600; box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #e4d8f8; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.auth-input-field input::placeholder { color: #b4a5c5; font-weight: 400; }
.auth-input-field input:focus { border-color: #5632ad; box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #cbb2f5, 0 0 0 3px rgba(137, 107, 204, 0.25); }
.auth-remember-row { display: flex; align-items: flex-start; gap: 9px; padding: 2px 1px; color: #624b83; cursor: pointer; }
.auth-remember-row input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: #835adc; flex: 0 0 auto; }
.auth-remember-row span { display: grid; gap: 2px; }
.auth-remember-row strong { font-size: var(--type-small); }
.auth-remember-row small { color: #8a789f; font-size: var(--type-label); line-height: 1.45; }
.auth-primary-button {
  position: relative;
  min-height: 48px;
  margin-top: 3px;
  border-style: solid;
  border-width: 14px;
  border-image: url('data:image/svg+xml;utf8,<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14 2H34V4H38V6H42V10H44V14H46V34H44V38H42V42H38V44H34V46H14V44H10V42H6V38H4V34H2V14H4V10H6V6H10V4H14V2Z" fill="%23c8a6f0"/><rect x="14" y="2" width="20" height="2" fill="%23ffffff"/><rect x="10" y="4" width="4" height="2" fill="%23ffffff"/><rect x="6" y="6" width="4" height="2" fill="%23ffffff"/><rect x="4" y="8" width="2" height="4" fill="%23ffffff"/><rect x="2" y="12" width="2" height="22" fill="%23ffffff"/><rect x="44" y="14" width="2" height="22" fill="%23b290e8"/><rect x="42" y="36" width="2" height="4" fill="%23b290e8"/><rect x="38" y="40" width="4" height="2" fill="%23b290e8"/><rect x="34" y="42" width="4" height="2" fill="%23b290e8"/><rect x="14" y="44" width="20" height="2" fill="%23b290e8"/><rect x="14" y="0" width="20" height="2" fill="%23896bcc"/><rect x="10" y="2" width="4" height="2" fill="%23896bcc"/><rect x="6" y="4" width="4" height="2" fill="%23896bcc"/><rect x="4" y="6" width="2" height="4" fill="%23896bcc"/><rect x="2" y="10" width="2" height="4" fill="%23896bcc"/><rect x="0" y="14" width="2" height="20" fill="%23896bcc"/><rect x="34" y="2" width="4" height="2" fill="%23896bcc"/><rect x="38" y="4" width="4" height="2" fill="%23896bcc"/><rect x="42" y="6" width="2" height="4" fill="%23896bcc"/><rect x="44" y="10" width="2" height="4" fill="%23896bcc"/><rect x="46" y="14" width="2" height="20" fill="%23896bcc"/><rect x="2" y="34" width="2" height="4" fill="%23896bcc"/><rect x="4" y="38" width="2" height="4" fill="%23896bcc"/><rect x="6" y="42" width="4" height="2" fill="%23896bcc"/><rect x="10" y="44" width="4" height="2" fill="%23896bcc"/><rect x="14" y="46" width="20" height="2" fill="%23896bcc"/><rect x="44" y="34" width="2" height="4" fill="%23896bcc"/><rect x="42" y="38" width="2" height="4" fill="%23896bcc"/><rect x="38" y="42" width="4" height="2" fill="%23896bcc"/><rect x="34" y="44" width="4" height="2" fill="%23896bcc"/></svg>') 14 fill stretch;
  background-color: transparent;
  box-shadow: none;
  color: #4b2d86;
  font-size: var(--type-body);
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.auth-primary-button:hover { transform: translateY(-2px); filter: brightness(1.03); }
.auth-mode-prompt { margin-top: 16px; margin-bottom: 0; color: #8a789f; font-size: var(--type-small); font-weight: 600; text-align: center; }
.auth-mode-prompt a { margin-left: 4px; color: #6845b5; font-weight: 600; text-decoration: none; }
.auth-divider { display: flex; align-items: center; gap: 11px; margin-top: 19px; color: #a291b5; font-size: var(--type-label); }
.auth-divider::before, .auth-divider::after { height: 1px; background: #eadff6; content: ""; flex: 1; }
.auth-social-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.auth-social-button { display: grid; min-height: 44px; grid-template-columns: 25px minmax(0, 1fr); align-items: center; gap: 7px; padding: 0 12px; border-radius: 10px; font-size: var(--type-small); font-weight: 600; text-decoration: none; }
.auth-social-button i { display: grid; width: 22px; height: 22px; border-radius: 50%; background: rgb(253 251 255 / 70%); font-size: var(--type-label); font-style: normal; place-items: center; }
.auth-social-button__google-icon { display: block; width: 20px; height: 20px; justify-self: center; }
.auth-social-button.kakao { border: 2px solid #e2cb2c; background: #fee500; color: #3b3200; box-shadow: inset 1px 1px 0 #fffb9d, inset -1px -1px 0 #d9c31b; }
.auth-social-button.google { border: 2px solid #896bcc; background: var(--surface-white); color: #4b2d86; box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #e4d8f8; }
.auth-login-card .auth-card-header p { font-size: var(--type-body); margin-bottom: 0}
.auth-login-card .auth-card-header h2 { font-size: var(--type-section-title); }
.auth-login-card::before {
  position: absolute;
  z-index: 0;
  inset: -12px;
  background-color: #f3e9fb;
  background-image: url("/images/login_form_background.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  clip-path: inherit;
  content: "";
  pointer-events: none;
}
.auth-login-card > * { position: relative; z-index: 1; }
.auth-login-card .auth-input-field > span,
.auth-login-card .auth-remember-row strong,
.auth-login-card .auth-mode-prompt,
.auth-login-card .auth-social-button { font-size: var(--type-body); }
.auth-login-card .auth-input-field input,
.auth-login-card .auth-primary-button { font-size: var(--type-body-lg); }
.auth-login-card .auth-remember-row small,
.auth-login-card .auth-divider,
.auth-login-card .auth-social-button i { font-size: var(--type-body); }
.auth-consent-row { display: flex; align-items: flex-start; gap: 9px; padding: 12px; border: 1px solid #dfd1f5; border-radius: 7px; background: #f5edfc; color: #755f8e; font-size: var(--type-label); font-weight: 600; line-height: 1.6; cursor: pointer; }
.auth-consent-row input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: #8d61dc; flex: 0 0 auto; }
.auth-consent-row a { color: #6845b5; font-weight: 600; }
@media (max-width: 639px) {
  .auth-page { padding-top: 8px; }
  .auth-hero { min-height: 210px; grid-template-columns: minmax(0, 1fr) 108px; gap: 0; padding: 25px 18px; border-radius: 20px; }
  .auth-hero p { font-size: var(--type-caption); }
  .auth-hero h1 { max-width: 220px; margin-top: 13px; font-size: var(--type-section-title-lg); }
  .auth-hero span { max-width: 205px; margin-top: 9px; font-size: var(--type-small); line-height: 1.55; }
  .auth-hero img { right: -17px; bottom: -34px; width: 154px; }
  .auth-hero.auth-hero--detailed img { right: -8px; bottom: -15px; width: 112px; }
  .auth-hero img.auth-hero-illustration--telescope { right: 8px; bottom: 12px; width: 120px; }
  .auth-card { padding: 18px 16px; }
  .auth-social-actions { grid-template-columns: 1fr; }
}

.profile-main { width: var(--page-content-width); margin: 0 auto; padding: 48px 0 96px; }
.page-title { margin-bottom: 40px; }
.page-title > p:not(.complete-label) { margin: 12px 0 0; color: #6b7684; line-height: 1.6; }
.profile-form { gap: 28px; margin-top: 0; }
.field-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.field-group legend, .input-field > span { display: block; margin-bottom: 10px; }
.input-field { display: grid; }
.input-field small { margin-top: 8px; color: #8b95a1; font-size: var(--type-body-lg); line-height: 1.5; }
.segmented-control { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 8px; background: #f2f4f6; }
.segmented-control label { min-width: 0; cursor: pointer; }
.segmented-control input { position: absolute; opacity: 0; }
.segmented-control span { display: grid; min-height: 44px; border-radius: 6px; color: #6b7684; font-weight: 600; place-items: center; }
.segmented-control input:checked + span { background: var(--surface-white); color: #191f28; box-shadow: 0 1px 4px rgb(0 0 0 / 8%); }
.check-row, .consent-row { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.check-row input, .consent-row input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: #3182f6; flex: 0 0 auto; }
.consent-row { padding: 18px; border: 1px solid #e5e8eb; border-radius: 8px; color: #4e5968; font-size: var(--type-body-lg); line-height: 1.55; }
.precision-notice { margin: 24px 0 0; padding: 16px; border-left: 3px solid #3182f6; background: #f7f9fb; color: #4e5968; font-size: var(--type-body-lg); line-height: 1.55; }
.notice.error { color: #e42939; font-size: var(--type-body-lg); line-height: 1.5; }
.notice.success { margin: 0 0 20px; padding: 13px 15px; border: 1px solid #cde6d7; border-radius: 8px; background: #eef8f2; color: #247049; font-size: var(--type-body); font-weight: 600; line-height: 1.55; }
.summary-list { margin: 0; border-top: 1px solid #e5e8eb; }
.summary-list > div { display: grid; grid-template-columns: minmax(120px, 0.6fr) minmax(0, 1fr); gap: 24px; padding: 20px 0; border-bottom: 1px solid #e5e8eb; }
.summary-list dt { color: #8b95a1; }
.summary-list dd { min-width: 0; margin: 0; color: #333d4b; font-weight: 600; overflow-wrap: anywhere; text-align: right; }
.confirmed-consent, .complete-label { color: #00a86b; font-size: var(--type-body-lg); font-weight: 600; }
.confirmed-consent { margin: 24px 0 0; }
.complete-label { margin: 0 0 12px; }
.confirmation-actions { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; margin-top: 36px; }
.confirmation-actions form { margin: 0; }
.edit-link { margin-top: 36px; }
.profile-main.birth-profile-main { padding-top: 0; }
.birth-profile-hero { position: relative; display: grid; min-height: 178px; grid-template-columns: minmax(0, 1fr) 150px; align-items: center; gap: 18px; padding: 25px 28px; overflow: hidden; border: 1px solid #d8c5f4; border-radius: 8px; background: #e8d9fb; }
.birth-profile-hero::before, .birth-profile-hero::after { position: absolute; width: 10px; height: 10px; transform: rotate(45deg); background: #fff18a; content: ""; }
.birth-profile-hero::before { top: 26px; left: 51%; }
.birth-profile-hero::after { right: 26px; bottom: 24px; }
.birth-profile-hero > div { position: relative; z-index: 1; }
.birth-profile-hero p { margin: 0 0 6px; color: #8d61dc; font-size: var(--type-small); font-weight: 600; }
.birth-profile-hero h1 { margin: 0; color: #4f2aa5; font-size: var(--type-page-title-lg); font-weight: 600; }
.birth-profile-hero span { display: block; max-width: 360px; margin-top: 10px; color: #75608d; font-size: var(--type-body); font-weight: 600; line-height: 1.65; }
.birth-profile-hero img { position: absolute; right: 27px; bottom: 17px; width: 118px; height: 118px; object-fit: contain; image-rendering: pixelated; }
.birth-profile-card, .birth-profile-form-card { margin-top: 12px; padding: 20px; border: 1px solid #dfd1f5; border-radius: 8px; background: #fbf5fe; }
.birth-profile-card-header { display: grid; grid-template-columns: 50px minmax(0, 1fr); align-items: center; gap: 12px; }
.birth-profile-avatar { display: grid; width: 50px; height: 50px; overflow: hidden; border: 1px solid #d7c1f3; border-radius: 50%; background: #f3d8ed; place-items: center; }
.birth-profile-avatar img { width: 126%; height: auto; margin-top: 8px; image-rendering: pixelated; }
.birth-profile-avatar--unframed { overflow: visible; border: 0; border-radius: 0; background: transparent; }
.birth-profile-avatar--unframed img { display: block; width: 100%; height: auto; margin: 0; }
.birth-profile-card-header p, .birth-profile-form-card > header p { margin: 0 0 3px; color: #9a70df; font-size: var(--type-label); font-weight: 600; }
.birth-profile-card-header h2, .birth-profile-form-card > header h2 { margin: 0; color: #5031a4; font-size: var(--type-card-title); font-weight: 600; }
.birth-profile-summary { display: grid; margin: 18px 0 0; border-top: 1px solid #eadff6; }
.birth-profile-card--saved { --birth-profile-card-inline-padding: 20px; }
.birth-profile-card--saved .birth-profile-summary { position: relative; border-top: 0; }
.birth-profile-card--saved .birth-profile-summary::before {
  position: absolute;
  top: 0;
  right: calc(2px - var(--birth-profile-card-inline-padding) - var(--pixel-surface-width));
  left: calc(2px - var(--birth-profile-card-inline-padding) - var(--pixel-surface-width));
  height: 2px;
  background: #eadff6;
  content: "";
  pointer-events: none;
}
.birth-profile-summary > div { display: grid; min-height: 47px; grid-template-columns: minmax(112px, .7fr) minmax(0, 1.3fr); align-items: center; gap: 14px; border-bottom: 1px solid #eadff6; }
.birth-profile-summary dt { color: #8b7aa3; font-size: var(--type-small); font-weight: 600; }
.birth-profile-summary dd { min-width: 0; margin: 0; overflow-wrap: anywhere; color: #584071; font-size: var(--type-small); font-weight: 600; text-align: right; }
.birth-profile-precision { margin: 14px 0 0; padding: 12px 13px; border-left: 3px solid #9a70df; border-radius: 0 7px 7px 0; background: #f2e8fa; color: #755f8e; font-size: var(--type-label); font-weight: 600; line-height: 1.65; }
.birth-profile-edit-link, .birth-profile-primary-button, .birth-profile-secondary-button { display: flex; width: 100%; min-height: 44px; align-items: center; justify-content: center; border-radius: 7px; font-size: var(--type-body); font-weight: 600; text-decoration: none; cursor: pointer; }
.birth-profile-edit-link,
.wallet-purchase-button {
  --tamami-action-frame: url("/images/pixel_frame_settings_primary.svg?v=1");

  box-sizing: border-box;
  min-height: 54px;
  padding: 0 12px;
  border: 14px solid transparent;
  border-image-source: var(--tamami-action-frame);
  border-image-slice: 14 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  background-clip: border-box;
  background-origin: border-box;
  box-shadow: none;
  clip-path: none;
  color: #fff;
  text-align: center;
  text-shadow: 1px 1px 0 rgb(73 26 144 / 40%);
  white-space: nowrap;
  image-rendering: pixelated;
  transition: filter .15s ease, transform .15s ease;
}
.birth-profile-edit-link { margin-top: 14px; }
.birth-profile-edit-link::after { margin-left: 5px; content: "›"; }
.birth-profile-edit-link:hover,
.wallet-purchase-button:hover { filter: brightness(1.03); }
.birth-profile-edit-link:active,
.wallet-purchase-button:active { filter: brightness(.96); transform: translateY(1px); }
.birth-profile-edit-link:focus-visible,
.wallet-purchase-button:focus-visible { outline: 3px solid var(--ui-focus, #5a43bc); outline-offset: 2px; }
.birth-profile-secondary-button:hover { border-color: #b99ae8; background: #eee3fc; }
.birth-profile-primary-button { border: 0; background: #835adc; color: #fff; }
.birth-profile-primary-button:hover { background: #7048ca; }
.birth-profile-secondary-button { border: 1px solid #d8c5f4; background: #f3eaff; color: #6845b5; }
.birth-profile-form-card > header { display: flex; align-items: center; gap: 11px; }
.birth-profile-form-card > header > span { display: grid; width: 36px; height: 36px; flex: 0 0 auto; border: 1px solid #d8c5f4; border-radius: 7px; background: #f1e6fc; color: #7a55ca; font-size: var(--type-card-title); font-weight: 600; place-items: center; }
.birth-profile-form { gap: 20px; margin-top: 22px; }
.birth-profile-form .field-group legend, .birth-profile-form .input-field > span { margin-bottom: 8px; color: #624b83; font-size: var(--type-small); font-weight: 600; }
.birth-profile-form .input-field input, .birth-profile-form .input-field select { height: 44px; padding: 0 13px; border-color: #d8c8ed; border-radius: 7px; background: #fffafd; color: #382750; font-size: var(--type-body); }
.birth-profile-form .input-field input:focus, .birth-profile-form .input-field select:focus { border-color: #936bd3; box-shadow: 0 0 0 2px rgba(141, 97, 220, .12); }
.birth-profile-form .input-field small { margin-top: 7px; color: #9a8aaa; font-size: var(--type-label); }
.birth-profile-form .segmented-control { gap: 3px; padding: 3px; border: 1px solid #e2d5f2; border-radius: 7px; background: #f2e8fa; }
.birth-profile-form .birth-profile-sex-field .segmented-control { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.birth-profile-form .segmented-control span { min-height: 38px; border-radius: 5px; color: #806d99; font-size: var(--type-small); }
.birth-profile-form .segmented-control input:checked + span { background: #8d61dc; box-shadow: none; color: #fff; }
.birth-profile-form .check-row { align-items: center; color: #6f588b; font-size: var(--type-small); font-weight: 600; }
.birth-profile-form .check-row input { width: 18px; height: 18px; accent-color: #8d61dc; }
.birth-profile-form .precision-notice { margin: 0; border-left-color: #9a70df; border-radius: 0 7px 7px 0; background: #f2e8fa; color: #755f8e; font-size: var(--type-label); }
.birth-profile-error { margin: 12px 0 0; padding: 13px 15px; border: 1px solid #efbfd2; border-radius: 8px; background: #fff3f8; font-size: var(--type-body) !important; font-weight: 600; }
.birth-profile-confirmation-actions { margin-top: 16px; }
.birth-profile-confirmation-actions .birth-profile-primary-button { height: 44px; }
@media (min-width: 640px) {
  .birth-profile-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .birth-profile-form > .birth-profile-calendar-field { grid-column: 1; grid-row: 1; }
  .birth-profile-form > .birth-profile-birth-date-field { grid-column: 2; grid-row: 1; }
  .birth-profile-form > .birth-profile-sex-field { grid-column: 1; grid-row: 2; }
  .birth-profile-form > .birth-profile-lunar-field { grid-column: 2; grid-row: 2; }
  .birth-profile-form > .birth-profile-time-field { grid-column: 1; grid-row: 3; }
  .birth-profile-form > .birth-profile-time-unknown-field { grid-column: 2; grid-row: 3; }
  .birth-profile-form > .birth-profile-hour-policy-field { grid-column: 1; grid-row: 4; }
  .birth-profile-form > .birth-profile-primary-button { grid-column: 1 / -1; }
}
@media (max-width: 639px) {
  .birth-profile-hero { min-height: 168px; grid-template-columns: minmax(0, 1fr) 100px; padding: 22px 18px; }
  .birth-profile-hero h1 { font-size: var(--type-page-title); }
  .birth-profile-hero span { max-width: 205px; font-size: var(--type-small); }
  .birth-profile-hero img { right: 13px; bottom: 25px; width: 90px; height: 90px; }
  .birth-profile-card, .birth-profile-form-card { padding: 17px 16px; }
  .birth-profile-card--saved { --birth-profile-card-inline-padding: 16px; }
  .birth-profile-card-header { grid-template-columns: 44px minmax(0, 1fr); gap: 10px; }
  .birth-profile-avatar { width: 44px; height: 44px; }
  .birth-profile-card-header h2 { font-size: var(--type-body-lg); }
  .birth-profile-summary > div { grid-template-columns: minmax(95px, .75fr) minmax(0, 1.25fr); gap: 10px; }
}
.report-main { width: var(--page-content-width); margin: 0 auto; padding: 48px 0 96px; }
.report-catalog { border-top: 1px solid #e5e8eb; }
.access-notice { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0 0 28px; padding: 16px; border-left: 3px solid #3182f6; background: #f7f9fb; color: #4e5968; font-size: var(--type-body-lg); }
.access-notice a { color: #1b64da; font-weight: 600; text-decoration: none; white-space: nowrap; }
.report-item { display: flex; min-height: 116px; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; border-bottom: 1px solid #e5e8eb; }
.report-item h2 { margin: 0; font-size: var(--type-section-title-lg); }
.report-item p { margin: 8px 0 0; color: #6b7684; line-height: 1.5; }
.report-item form { margin: 0; }
.relation-report-form { display: flex; align-items: center; gap: 8px; }
.relation-report-form select { max-width: 132px; height: 44px; padding: 0 10px; border: 1px solid #d1d6db; border-radius: 8px; background: var(--surface-white); }
.compact-button { min-height: 44px; padding: 0 18px; }
.pending-label { color: #8b95a1; font-size: var(--type-body-lg); font-weight: 600; white-space: nowrap; }
.report-reading { max-width: 720px; }
.report-title { padding-bottom: 32px; border-bottom: 1px solid #e5e8eb; }
.analysis-tabs { position: sticky; z-index: 5; top: 0; display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 0 48px; border-bottom: 1px solid #d1d6db; background: rgb(255 255 255 / 96%); }
.analysis-tabs a { display: grid; min-height: 52px; color: #8b95a1; font-weight: 600; text-decoration: none; place-items: center; }
.analysis-tabs a.active { border-bottom: 2px solid #191f28; color: #191f28; }
.reading-navigator { position: sticky; z-index: 4; top: 52px; margin: -48px 0 40px; background: rgb(255 255 255 / 97%); border-bottom: 1px solid #e5e8eb; }
.reading-progress { height: 2px; background: #e5e8eb; }.reading-progress i { display: block; width: 0; height: 100%; background: #3182f6; }
.reading-controls { display: flex; align-items: center; min-height: 48px; }
.reading-controls select, .reading-controls button { height: 34px; border: 1px solid #d1d6db; border-radius: 6px; background: var(--surface-white); color: #333d4b; font: inherit; font-size: var(--type-body); }
.reading-controls select { min-width: 0; padding: 0 8px; }.reading-controls button { padding: 0 10px; cursor: pointer; }
.reading-controls span { font-size: var(--type-body-lg); font-weight: 600; word-break: keep-all; }
.summary-reading-mode .interpretation-basis, .summary-reading-mode .long-form-content, .summary-reading-mode .professional-metric, .summary-reading-mode .story-evidence { display: none; }
.story-chapter-heading { scroll-margin-top: 118px; }
@media (max-width: 720px) { .reading-controls { display: flex; } .reading-controls [data-current-chapter] { display: none; } .reading-controls button { padding: 0 7px; } }
.analysis-introduction { margin-bottom: 32px; }
.analysis-introduction h2 { margin: 0; font-size: var(--type-page-title-lg); }
.analysis-introduction > p:last-child { margin: 14px 0 0; color: #4e5968; font-size: var(--type-card-title); line-height: 1.7; }
.editorial-overview { margin: 36px 0 56px; padding-block: 30px; border-block: 1px solid #d1d6db; }
.calculation-subject { margin: 38px 0 0; padding: 26px; border: 1px solid #d1d6db; border-radius: 8px; }
.calculation-subject h2 { margin: 0; font-size: var(--type-page-title); }
.executive-summary { margin-top: 56px; padding: 36px 0; border-block: 2px solid #191f28; }
.executive-summary h2 { max-width: 620px; margin: 0; font-size: var(--type-display-sm); line-height: 1.4; }
.executive-summary-prose { margin-top: 24px; }
.core-structure { margin-top: 64px; }
.core-structure h2 { margin: 0; font-size: var(--type-page-title-lg); line-height: 1.4; }
.core-structure-prose { margin-top: 26px; border-top: 1px solid #d1d6db; }
.core-structure-prose section { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; padding: 24px 0; border-bottom: 1px solid #e5e8eb; }
.core-structure-prose span { color: #3182f6; font-size: var(--type-body); font-weight: 600; }
.core-structure-prose p { margin: 0; color: #333d4b; font-size: var(--type-card-title); line-height: 1.85; }
.subject-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 22px 0 0; border-top: 1px solid #e5e8eb; }
.subject-facts div { min-width: 0; padding: 13px 0; border-bottom: 1px solid #e5e8eb; }
.subject-facts div:nth-child(odd) { padding-right: 18px; }
.subject-facts dt { color: #8b95a1; font-size: var(--type-small); }
.subject-facts dd { margin: 6px 0 0; color: #333d4b; font-size: var(--type-body-lg); font-weight: 600; overflow-wrap: anywhere; }
.subject-chart-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 22px; }
.subject-chart-summary div { min-width: 0; }
.subject-chart-summary span { color: #8b95a1; font-size: var(--type-small); font-weight: 600; }
.subject-chart-summary p { margin: 7px 0 0; color: #333d4b; font-size: var(--type-body-lg); line-height: 1.6; overflow-wrap: anywhere; }
.subject-unavailable { margin: 18px 0 0; color: #6b7684; font-size: var(--type-body-lg); line-height: 1.6; }
.editorial-overview h2 { margin: 0; font-size: var(--type-page-title-lg); line-height: 1.4; }
.editorial-overview > p:last-of-type { margin: 12px 0 0; color: #4e5968; line-height: 1.7; }
.editorial-overview ol { margin: 26px 0 0; padding: 0; list-style: none; }
.editorial-overview li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-top: 1px solid #e5e8eb; }
.editorial-overview li > span { color: #3182f6; font-size: var(--type-body); font-weight: 600; }
.editorial-overview li div { display: grid; gap: 5px; }
.editorial-overview li strong { font-size: var(--type-subtitle); }
.editorial-overview li small { color: #8b95a1; line-height: 1.5; }
.analysis-unavailable { margin: 32px 0 56px; padding: 24px; border: 1px solid #d1d6db; border-radius: 8px; }
.analysis-unavailable > strong { font-size: var(--type-section-title-lg); }
.analysis-unavailable p { margin: 10px 0 0; color: #6b7684; line-height: 1.65; }
.professional-story { border-top: 1px solid #d1d6db; }
.story-chapter-heading { padding: 34px 0 8px; border-bottom: 2px solid #191f28; }
.story-chapter-heading span { font-size: var(--type-section-title-lg); font-weight: 600; }
.story-chapter-heading p { margin: 8px 0 0; color: #6b7684; font-size: var(--type-body-lg); line-height: 1.55; }
.story-chapter { padding: 48px 0; border-bottom: 1px solid #d1d6db; }
.story-chapter > header { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.story-chapter > header > div { display: flex; align-items: center; gap: 10px; }
.story-chapter > header p { margin: 0; color: #6b7684; font-size: var(--type-body-lg); font-weight: 600; }
.chapter-number { color: #3182f6; font-size: var(--type-body-lg); font-weight: 600; }
.signal-score { min-width: 52px; font-size: var(--type-display-sm); text-align: right; }
.story-chapter h3 { margin: 18px 0 0; font-size: var(--type-page-title); line-height: 1.45; }
.signal-scale-summary { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 5px 12px; margin-top: 14px; padding: 12px 0; border-block: 1px solid #e5e8eb; }
.signal-scale-summary strong { color: #1b64da; font-size: var(--type-body-lg); }
.signal-scale-summary span { color: #4e5968; font-size: var(--type-body-lg); line-height: 1.5; }
.signal-scale-summary small { grid-column: 1 / -1; color: #8b95a1; font-size: var(--type-small); }
.signal-scale-chart { grid-column: 1 / -1; min-width: 0; margin: 18px 0 0; }
.scale-direction-labels { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 9px; }
.scale-direction-labels span { color: #6b7684; font-size: var(--type-label); font-weight: 600; line-height: 1.35; }
.scale-direction-labels span:last-child { text-align: right; }
.scale-axis { position: relative; display: grid; grid-template-columns: 20fr 15fr 10fr 10fr 10fr 15fr 20fr; height: 12px; overflow: visible; border-radius: 6px; }
.scale-zone:first-child { border-radius: 6px 0 0 6px; }
.scale-zone:last-of-type { border-radius: 0 6px 6px 0; }
.zone-very-low { background: #f8c9c5; }
.zone-low { background: #fbdedb; }
.zone-moderate-low { background: #fcebea; }
.zone-center { background: #e5e8eb; }
.zone-moderate-high { background: #dff5eb; }
.zone-high { background: #c4ecd9; }
.zone-very-high { background: #9eddbf; }
.scale-midline { position: absolute; top: -4px; bottom: -4px; left: 50%; width: 1px; background: #6b7684; }
.scale-marker { position: absolute; top: 50%; left: var(--marker-position); width: 18px; height: 18px; border: 3px solid #ffffff; border-radius: 50%; background: #191f28; box-shadow: 0 1px 5px rgb(0 0 0 / 28%); transform: translate(-50%, -50%); }
.scale-marker em { position: absolute; bottom: calc(100% + 5px); left: 50%; padding: 2px 5px; border-radius: 4px; background: #191f28; color: #ffffff; font-size: var(--type-label); font-style: normal; line-height: 1.3; transform: translateX(-50%); }
.scale-ticks { display: flex; justify-content: space-between; margin-top: 7px; color: #8b95a1; font-size: var(--type-label); }
.signal-scale-chart figcaption { margin-top: 10px; color: #8b95a1; font-size: var(--type-label); line-height: 1.45; }
.signal-not-calculated { display: grid; gap: 7px; margin-top: 14px; padding: 16px; border-left: 3px solid #8b95a1; background: #f7f9fb; }
.signal-not-calculated strong { color: #4e5968; font-size: var(--type-body-lg); }
.signal-not-calculated span { color: #6b7684; font-size: var(--type-body-lg); line-height: 1.6; }
.story-explanation { margin: 14px 0 0; color: #333d4b; font-size: var(--type-card-title); line-height: 1.8; }
.interpretation-basis { margin-top: 24px; padding: 20px; border-left: 3px solid #c47a00; background: #fffaf0; }
.interpretation-basis > span { color: #9a6700; font-size: var(--type-body); font-weight: 600; }
.interpretation-basis > p { margin: 10px 0 0; color: #4e5968; font-size: var(--type-body-lg); line-height: 1.7; }
.interpretation-basis dl { margin: 16px 0 0; border-top: 1px solid #eadfca; }
.interpretation-basis dl div { display: grid; grid-template-columns: 125px minmax(0, 1fr); gap: 14px; padding: 12px 0; border-bottom: 1px solid #eadfca; }
.interpretation-basis dt { color: #9a6700; font-size: var(--type-small); font-weight: 600; }
.interpretation-basis dd { margin: 0; color: #4e5968; font-size: var(--type-body); line-height: 1.6; overflow-wrap: anywhere; }
.long-form-content { margin-top: 28px; }
.strength-shadow-pair, .practice-question { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.strength-shadow-pair section, .practice-question section { min-width: 0; padding: 18px; border-radius: 8px; background: #f7f9fb; }
.strength-shadow-pair section:first-child { border-top: 2px solid #00a86b; }
.strength-shadow-pair section:last-child { border-top: 2px solid #f04452; }
.long-form-content span { color: #6b7684; font-size: var(--type-body); font-weight: 600; }
.long-form-content p { margin: 9px 0 0; color: #333d4b; font-size: var(--type-body-lg); line-height: 1.7; }
.scene-list { margin-top: 20px; padding: 18px 0; border-block: 1px solid #e5e8eb; }
.scene-list ul { display: grid; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.scene-list li { position: relative; padding-left: 16px; color: #4e5968; font-size: var(--type-body-lg); line-height: 1.65; }
.scene-list li::before { position: absolute; top: 0.65em; left: 2px; width: 4px; height: 4px; border-radius: 50%; background: #3182f6; content: ""; }
.practice-question { margin-top: 20px; }
.practice-question section:first-child { background: #f2fbf7; }
.practice-question section:last-child { background: #fff8e8; }
.professional-metric { margin-top: 24px; padding: 18px; border-left: 3px solid #3182f6; background: #f7f9fb; }
.professional-metric > span { display: block; margin-bottom: 8px; color: #6b7684; font-size: var(--type-body); font-weight: 600; }
.professional-metric code, .formula-line code { color: #191f28; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--type-body-lg); overflow-wrap: anywhere; }
.professional-metric dl { display: grid; grid-template-columns: repeat(3, 1fr); margin: 16px 0 0; border-top: 1px solid #d1d6db; }
.professional-metric dl div { display: grid; gap: 5px; padding-top: 13px; }
.professional-metric dt { color: #8b95a1; font-size: var(--type-body); }
.professional-metric dd { margin: 0; font-weight: 600; }
.story-contexts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 28px; }
.story-contexts div { min-width: 0; }
.story-contexts span { color: #8b95a1; font-size: var(--type-body-lg); font-weight: 600; }
.story-contexts p { margin: 8px 0 0; color: #4e5968; line-height: 1.65; }
.story-evidence { margin-top: 28px; border-top: 1px solid #e5e8eb; }
.story-evidence summary { padding: 18px 0; color: #4e5968; cursor: pointer; font-size: var(--type-body-lg); font-weight: 600; }
.story-evidence summary strong { color: #3182f6; }
.story-evidence ul { margin: 0; padding: 0 0 8px; list-style: none; }
.story-evidence li { display: flex; gap: 12px; padding: 16px 0; border-top: 1px solid #e5e8eb; }
.story-evidence li > div { min-width: 0; }
.story-evidence li p { margin: 5px 0; color: #333d4b; font-weight: 600; overflow-wrap: anywhere; }
.story-evidence li small { color: #8b95a1; line-height: 1.5; }
.evidence-balance { display: grid; gap: 18px; padding-bottom: 10px; }
.evidence-group { border-top: 2px solid #d1d6db; }
.evidence-group-reinforcing { border-top-color: #00a86b; }
.evidence-group-moderating { border-top-color: #f04452; }
.evidence-group-contextual { border-top-color: #3182f6; }
.evidence-group > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; }
.evidence-group > header strong { color: #333d4b; font-size: var(--type-body-lg); }
.evidence-group > header span { color: #8b95a1; font-size: var(--type-small); }
.evidence-group ul { margin: 0; padding: 0; list-style: none; }
.evidence-group li { display: flex; gap: 12px; padding: 14px 0; border-top: 1px solid #e5e8eb; }
.evidence-group li > div { min-width: 0; }
.evidence-group li p { margin: 5px 0; color: #333d4b; font-weight: 600; overflow-wrap: anywhere; }
.evidence-group li small { color: #8b95a1; line-height: 1.5; }
.evidence-group .empty-evidence { margin: 0; padding: 12px 0; color: #8b95a1; font-size: var(--type-body); }
.snapshot-overview { margin-top: 56px; }
.snapshot-overview h2 { margin: 0; font-size: var(--type-page-title-lg); line-height: 1.4; }
.snapshot-highlights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 24px; }
.snapshot-highlight { min-width: 0; padding: 20px; border: 1px solid #d1d6db; border-radius: 8px; }
.snapshot-highlight > span { color: #00a86b; font-size: var(--type-body); font-weight: 600; }
.snapshot-highlight > p:first-of-type { margin: 8px 0 0; color: #6b7684; font-size: var(--type-body-lg); font-weight: 600; }
.snapshot-highlight > strong { display: block; margin-top: 8px; font-size: var(--type-display-md); }
.snapshot-highlight h3 { margin: 12px 0 0; font-size: var(--type-card-title); line-height: 1.45; }
.snapshot-highlight .signal-scale-summary + p { margin: 10px 0 0; color: #4e5968; font-size: var(--type-body-lg); line-height: 1.65; }
.snapshot-highlight .signal-scale-summary { grid-template-columns: 1fr; }
.snapshot-highlight .signal-scale-summary small { grid-column: auto; }
.snapshot-highlight .signal-scale-chart { grid-column: auto; }
.snapshot-highlight small { display: block; margin-top: 16px; padding-top: 14px; border-top: 1px solid #e5e8eb; color: #00875a; line-height: 1.55; }
.full-calculations { margin-top: 64px; padding-top: 48px; border-top: 1px solid #d1d6db; }
.solar-time-proof { margin-top: 28px; padding: 20px; border-left: 3px solid #3182f6; background: #f7f9fb; }
.solar-time-proof h3 { margin: 0 0 14px; font-size: var(--type-card-title); }
.formula-line { margin: 0; padding: 18px; background: #f7f9fb; line-height: 1.8; }
.report-section { margin-top: 64px; }
.report-section h2 { margin: 0; font-size: var(--type-page-title-lg); line-height: 1.4; }
.section-kicker { margin: 0 0 10px; color: #3182f6; font-size: var(--type-body-lg); font-weight: 600; }
.section-description { margin: 12px 0 28px; color: #6b7684; line-height: 1.65; }
.report-conclusion { margin-top: 48px; }
.report-prose { color: #333d4b; font-size: var(--type-card-title); line-height: 1.85; }
.report-prose p { margin: 0 0 24px; }
.evidence-limitation, .fixture-warning { display: flex; gap: 12px; margin: 28px 0 0; padding: 16px; border-left: 3px solid #f04452; background: #fff6f6; color: #4e5968; font-size: var(--type-body-lg); line-height: 1.55; }
.evidence-limitation strong, .fixture-warning strong { color: #e42939; white-space: nowrap; }
.evidence-list { margin: 28px 0 0; padding: 0; border-top: 1px solid #d1d6db; list-style: none; }
.evidence-item { padding: 24px 0; border-bottom: 1px solid #e5e8eb; }
.evidence-heading { display: flex; align-items: center; gap: 8px; }
.evidence-heading strong { margin-left: 4px; font-size: var(--type-section-title); }
.evidence-id, .evidence-source { display: inline-flex; min-height: 24px; align-items: center; padding: 0 7px; border-radius: 5px; font-size: var(--type-body); font-weight: 600; }
.evidence-id { background: #e8f3ff; color: #1b64da; }
.evidence-source { background: #f2f4f6; color: #6b7684; }
.evidence-fact { display: flex; gap: 12px; margin: 14px 0 8px; color: #191f28; font-weight: 600; }
.evidence-fact span { color: #8b95a1; font-size: var(--type-body-lg); font-weight: 600; }
.evidence-explanation { margin: 0; color: #6b7684; line-height: 1.65; }
.signal-table-wrap { max-width: 100%; margin-top: 24px; overflow-x: auto; border-block: 1px solid #e5e8eb; }
.evidence-table { width: 100%; border-collapse: collapse; color: #4e5968; font-size: var(--type-body-lg); }
.evidence-table th, .evidence-table td { padding: 13px 12px; border-bottom: 1px solid #e5e8eb; text-align: left; white-space: nowrap; }
.evidence-table th { color: #6b7684; font-weight: 600; }
.evidence-table--explained td:last-child { min-width: 300px; white-space: normal; line-height: 1.65; }
.signal-table td:not(:first-child), .signal-table th:not(:first-child) { text-align: right; }
.weight-note { margin: 14px 0 0; color: #8b95a1; font-size: var(--type-body-lg); }
.calculation-details { margin-top: 18px; border-block: 1px solid #d1d6db; }
.calculation-details + .calculation-details { margin-top: -1px; }
.calculation-details summary { min-height: 76px; display: flex; align-items: center; cursor: pointer; list-style: none; }
.calculation-details summary::-webkit-details-marker { display: none; }
.calculation-details summary::after { margin-left: auto; color: #8b95a1; font-size: var(--type-section-title-lg); content: "+"; }
.calculation-details[open] summary::after { content: "−"; }
.calculation-details summary span { display: grid; gap: 5px; }
.calculation-details summary strong { font-size: var(--type-section-title); }
.calculation-details summary small { color: #8b95a1; font-size: var(--type-body-lg); }
.calculation-details > :last-child { margin-bottom: 28px; }
.pillar-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 8px 0 32px; border-block: 1px solid #e5e8eb; }
.pillar-grid div { display: grid; gap: 8px; padding: 20px 8px; text-align: center; }
.pillar-grid span { color: #8b95a1; font-size: var(--type-body-lg); }
.pillar-grid strong { font-family: serif; font-size: var(--type-page-title); }
.calculation-subsection { margin-top: 36px; }
.calculation-subsection h3 { margin: 0 0 16px; font-size: var(--type-card-title); }
.compact-facts { margin: 0; border-top: 1px solid #e5e8eb; }
.compact-facts div { display: flex; min-height: 52px; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid #e5e8eb; }
.compact-facts dt { color: #8b95a1; font-size: var(--type-body-lg); }
.compact-facts dd { min-width: 0; margin: 0; color: #333d4b; font-weight: 600; overflow-wrap: anywhere; text-align: right; }
.full-calculations .element-bars { display: grid; gap: 12px; margin-top: 20px; }
.full-calculations .element-bars > div { display: grid; grid-template-columns: 48px minmax(0, 1fr) 40px; align-items: center; gap: 12px; color: #6b7684; font-size: var(--type-body-lg); }
.full-calculations .element-bars meter { width: 100%; height: 10px; }
.full-calculations .element-bars strong { color: #333d4b; text-align: right; }
.evidence-tags { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.evidence-tags li { display: flex; min-width: 0; gap: 10px; padding: 12px 14px; background: #f7f9fb; color: #6b7684; font-size: var(--type-body-lg); overflow-wrap: anywhere; }
.evidence-tags span { color: #1b64da; font-weight: 600; }
.evidence-tags strong { color: #333d4b; }
.evidence-tags--explained li { display: grid; gap: 6px; }
.evidence-tags--explained li > div { display: flex; flex-wrap: wrap; gap: 8px 12px; }
.evidence-tags--explained li p { margin: 0; color: #4e5968; line-height: 1.65; }
.evidence-tags--explained li small { color: #8b95a1; line-height: 1.55; }
.correction-reasons small { display: block; margin-top: 4px; color: #8b95a1; line-height: 1.55; }
.empty-evidence { color: #8b95a1; font-size: var(--type-body-lg); }
.metadata-details { margin-bottom: 64px; }
.fortune-main { width: var(--page-content-width); margin: 0 auto; padding: 24px 0 112px; }
.conversation-page-hero {
  --conversation-hero-title-size: clamp(var(--type-section-title-lg), 4.8vw, var(--type-display-sm));

  position: relative;
  display: grid;
  min-height: 172px;
  grid-template-columns: minmax(150px, .78fr) minmax(210px, 1.22fr);
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  padding: 16px 4px 12px 18px;
  overflow: visible;
  border-style: solid;
  border-width: 14px;
  border-image: url('data:image/svg+xml;utf8,<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14 2H34V4H38V6H42V10H44V14H46V34H44V38H42V42H38V44H34V46H14V44H10V42H6V38H4V34H2V14H4V10H6V6H10V4H14V2Z" fill="%23f5edfc"/><rect x="14" y="2" width="20" height="2" fill="%23ffffff"/><rect x="10" y="4" width="4" height="2" fill="%23ffffff"/><rect x="6" y="6" width="4" height="2" fill="%23ffffff"/><rect x="4" y="8" width="2" height="4" fill="%23ffffff"/><rect x="2" y="12" width="2" height="22" fill="%23ffffff"/><rect x="44" y="14" width="2" height="22" fill="%23b290e8"/><rect x="42" y="36" width="2" height="4" fill="%23b290e8"/><rect x="38" y="40" width="4" height="2" fill="%23b290e8"/><rect x="34" y="42" width="4" height="2" fill="%23b290e8"/><rect x="14" y="44" width="20" height="2" fill="%23b290e8"/><rect x="14" y="0" width="20" height="2" fill="%23896bcc"/><rect x="10" y="2" width="4" height="2" fill="%23896bcc"/><rect x="6" y="4" width="4" height="2" fill="%23896bcc"/><rect x="4" y="6" width="2" height="4" fill="%23896bcc"/><rect x="2" y="10" width="2" height="4" fill="%23896bcc"/><rect x="0" y="14" width="2" height="20" fill="%23896bcc"/><rect x="34" y="2" width="4" height="2" fill="%23896bcc"/><rect x="38" y="4" width="4" height="2" fill="%23896bcc"/><rect x="42" y="6" width="2" height="4" fill="%23896bcc"/><rect x="44" y="10" width="2" height="4" fill="%23896bcc"/><rect x="46" y="14" width="2" height="20" fill="%23896bcc"/><rect x="2" y="34" width="2" height="4" fill="%23896bcc"/><rect x="4" y="38" width="2" height="4" fill="%23896bcc"/><rect x="6" y="42" width="4" height="2" fill="%23896bcc"/><rect x="10" y="44" width="4" height="2" fill="%23896bcc"/><rect x="14" y="46" width="20" height="2" fill="%23896bcc"/><rect x="44" y="34" width="2" height="4" fill="%23896bcc"/><rect x="42" y="38" width="2" height="4" fill="%23896bcc"/><rect x="38" y="42" width="4" height="2" fill="%23896bcc"/><rect x="34" y="44" width="4" height="2" fill="%23896bcc"/></svg>') 14 fill stretch;
  border-radius: 0;
  background: transparent;
  color: #5632ad;
  box-shadow: none;
  image-rendering: pixelated;
}
.conversation-page-hero__copy {
  position: relative;
  z-index: 2;
  display: grid;
  min-width: 0;
  min-height: 140px;
  align-content: center;
  justify-items: start;
}
.conversation-page-hero__title {
  min-width: 0;
  margin: 0;
  color: #351785;
  font-family: 'Pretendard', 'SchoolSafeUniverse', system-ui, sans-serif;
  font-size: clamp(var(--type-section-title-lg), 4.8vw, var(--type-display-sm));
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.035em;
  word-break: keep-all;
  text-shadow: none;
}
.conversation-page-hero__title-row {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: clamp(10px, 2.4vw, 18px);
}
.conversation-page-hero__face {
  display: block;
  width: auto;
  height: calc(var(--conversation-hero-title-size) * .7);
  flex: 0 0 auto;
  object-fit: contain;
  image-rendering: pixelated;
}
@media (min-width: 640px) {
  .conversation-page-hero__face {
    height: calc(var(--conversation-hero-title-size) * .84);
  }
}
.conversation-page-hero__divider {
  display: block;
  width: min(100%, 240px);
  height: 3px;
  margin-top: 16px;
  background: #b6a0dc;
}
.conversation-page-hero__description {
  max-width: 280px;
  margin: 17px 0 0;
  color: #806d99;
  font-size: var(--type-small);
  font-weight: 600;
  line-height: 1.6;
  word-break: keep-all;
}
.conversation-page-hero__emoticon {
  display: inline-block;
  white-space: nowrap;
}
.conversation-page-hero__conversation {
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 148px;
  overflow: visible;
}
.conversation-page-hero__speech {
  --conversation-speech-shape: polygon(
    10px 0, calc(100% - 10px) 0,
    calc(100% - 10px) 2px, calc(100% - 6px) 2px,
    calc(100% - 6px) 4px, calc(100% - 2px) 4px,
    calc(100% - 2px) 8px, 100% 8px,
    100% calc(100% - 22px), calc(100% - 2px) calc(100% - 22px),
    calc(100% - 2px) calc(100% - 18px), calc(100% - 8px) calc(100% - 18px),
    100% 100%, calc(100% - 28px) calc(100% - 18px),
    10px calc(100% - 18px), 10px calc(100% - 20px),
    6px calc(100% - 20px), 6px calc(100% - 22px),
    2px calc(100% - 22px), 2px calc(100% - 26px),
    0 calc(100% - 26px), 0 8px,
    2px 8px, 2px 4px, 6px 4px,
    6px 2px, 10px 2px
  );
  position: absolute;
  z-index: 1;
  isolation: isolate;
  top: 0;
  right: clamp(62px, 25%, 96px);
  box-sizing: border-box;
  width: min(200px, calc(100% - 48px));
  min-height: 90px;
  margin: 0;
  padding: 14px 22px 24px;
  background: transparent;
  color: #351785;
  font-size: clamp(var(--type-small), 2.58vw, var(--type-subtitle));
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -.025em;
  word-break: keep-all;
}
.conversation-page-hero__speech::before,
.conversation-page-hero__speech::after {
  position: absolute;
  clip-path: var(--conversation-speech-shape);
  content: "";
  pointer-events: none;
}
.conversation-page-hero__speech::before {
  z-index: 0;
  inset: 0;
  background: #896bcc;
}
.conversation-page-hero__speech::after {
  z-index: 1;
  inset: 2px;
  background: #fff;
}
.conversation-page-hero__speech span {
  position: relative;
  z-index: 2;
  display: block;
  white-space: nowrap;
}
.conversation-page-hero__character {
  position: absolute;
  z-index: 0;
  right: 0;
  bottom: -2px;
  width: clamp(96px, 38%, 132px);
  height: auto;
  filter: drop-shadow(0 6px 7px rgb(70 41 122 / 9%));
  image-rendering: pixelated;
}
.fortune-tabs {
  --fortune-tab-selected-frame: url("/images/pixel_frame_fortune_tab_selected.svg?v=1");
  --fortune-tab-idle-frame: url("/images/pixel_frame_fortune_tab_idle.svg?v=2");

  position: relative;
  isolation: isolate;
  display: grid;
  width: min(100%, 300px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: clamp(12px, 3vw, 22px);
  margin: 14px 0 32px;
  padding: 6px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  clip-path: none;
  image-rendering: pixelated;
  box-shadow: none;
}
.fortune-tabs::before {
  position: absolute;
}
.fortune-tabs a {
  --fortune-tab-frame: var(--fortune-tab-idle-frame);

  position: relative;
  z-index: 1;
  display: grid;
  box-sizing: border-box;
  min-width: 0;
  min-height: 48px;
  padding: 0 8px;
  border: 14px solid transparent;
  border-image-source: var(--fortune-tab-frame);
  border-image-slice: 14 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  background-clip: border-box;
  background-origin: border-box;
  box-shadow: none;
  clip-path: none;
  color: #6b667a;
  font-size: var(--type-body-lg);
  font-weight: 700;
  image-rendering: pixelated;
  text-align: center;
  text-shadow: none;
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s ease, filter .15s ease, transform .15s ease;
  place-items: center;
}
.fortune-tabs a::after {
  display: none;
  content: none;
}
.fortune-tabs a:hover {
  color: #4c30af;
  filter: brightness(1.03);
  transform: translateY(-1px);
}
.fortune-tabs a:focus-visible {
  outline: 3px solid #5a43bc;
  outline-offset: 2px;
}
.fortune-tabs a.active {
  --fortune-tab-frame: var(--fortune-tab-selected-frame);

  overflow: visible;
  color: #51309a;
  filter: none;
}
.fortune-tabs a.active::before {
  position: absolute;
  z-index: 2;
  top: -19px;
  left: 50%;
  color: #fff18a;
  font-size: var(--type-body);
  line-height: 1;
  text-shadow: 2px 2px 0 rgb(83 48 112 / 34%);
  transform: translateX(-50%);
  content: "✦";
}
/* Conversation hero themes: each page family can supply its own background. */
.conversation-page-hero.conversation-page-hero--fortune {
  --fortune-header-background: url("/images/fortune_header_background_default.png?v=1");
  --conversation-hero-title-size: clamp(var(--type-page-title), 5.6vw, var(--type-display-sm));

  display: block;
  min-height: 145px;
  aspect-ratio: auto;
  margin-bottom: 32px;
  padding: 0;
  overflow: visible;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  clip-path: none;
}
.conversation-page-hero.conversation-page-hero--fortune::before {
  position: absolute;
  z-index: 0;
  inset: -10px;
  background-color: #7669c7;
  background-image:
    linear-gradient(to bottom, rgb(73 52 144 / 10%), rgb(73 52 144 / 24%)),
    var(--fortune-header-background);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow:
    inset 0 0 0 2px rgb(255 255 255 / 58%),
    inset 0 -32px 48px rgb(80 52 155 / 14%);
  clip-path: polygon(
    12px 0, calc(100% - 12px) 0,
    calc(100% - 12px) 2px, calc(100% - 8px) 2px,
    calc(100% - 8px) 4px, calc(100% - 4px) 4px,
    calc(100% - 4px) 8px, calc(100% - 2px) 8px,
    calc(100% - 2px) 12px, 100% 12px,
    100% calc(100% - 12px), calc(100% - 2px) calc(100% - 12px),
    calc(100% - 2px) calc(100% - 8px), calc(100% - 4px) calc(100% - 8px),
    calc(100% - 4px) calc(100% - 4px), calc(100% - 8px) calc(100% - 4px),
    calc(100% - 8px) calc(100% - 2px), calc(100% - 12px) calc(100% - 2px),
    calc(100% - 12px) 100%, 12px 100%,
    12px calc(100% - 2px), 8px calc(100% - 2px),
    8px calc(100% - 4px), 4px calc(100% - 4px),
    4px calc(100% - 8px), 2px calc(100% - 8px),
    2px calc(100% - 12px), 0 calc(100% - 12px),
    0 12px, 2px 12px,
    2px 8px, 4px 8px,
    4px 4px, 8px 4px,
    8px 2px, 12px 2px
  );
  content: "";
  pointer-events: none;
}
.conversation-page-hero.conversation-page-hero--background-00 {
  --fortune-header-background: url("/images/fortune_header_background_default.png?v=1");
}
.conversation-page-hero.conversation-page-hero--background-01 {
  --fortune-header-background: url("/images/fortune_header_background_today.png?v=1");
}
.conversation-page-hero.conversation-page-hero--background-03 {
  --fortune-header-background: url("/images/fortune_header_background_week.png?v=1");
}
.conversation-page-hero.conversation-page-hero--background-05 {
  --fortune-header-background: url("/images/fortune_header_background_month.png?v=1");
}
.conversation-page-hero.conversation-page-hero--fortune-today {
  --fortune-header-background: url("/images/fortune_header_background_today.png?v=1");
}
.conversation-page-hero.conversation-page-hero--fortune-week {
  --fortune-header-background: url("/images/fortune_header_background_week.png?v=1");
}
.conversation-page-hero.conversation-page-hero--fortune-month {
  --fortune-header-background: url("/images/fortune_header_background_month.png?v=1");
}
.conversation-page-hero--fortune .conversation-page-hero__copy {
  display: grid;
  min-height: 0;
  align-content: end;
  justify-items: start;
  padding: 10px clamp(18px, 4.4vw, 32px) 6px;
}
.conversation-page-hero--fortune .conversation-page-hero__divider {
  display: none;
}
.conversation-page-hero--fortune .conversation-page-hero__title {
  color: #fff;
  font-family: 'AppNumerals', 'Binggre', 'SchoolSafeUniverse', 'Pretendard', system-ui, sans-serif;
  font-size: clamp(var(--type-page-title), 5.6vw, var(--type-display-sm));
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.035em !important;
  -webkit-text-stroke: 1px #7e76d5;
  text-shadow:
    0 0 2px rgb(255 255 255 / 42%),
    2px 2px 0 rgb(91 65 170 / 30%);
}
.conversation-page-hero--fortune .conversation-page-hero__face {
  filter:
    drop-shadow(2px 0 0 #fff)
    drop-shadow(-2px 0 0 #fff)
    drop-shadow(0 2px 0 #fff)
    drop-shadow(0 -2px 0 #fff);
}
.conversation-page-hero--fortune .conversation-page-hero__guidance {
  max-width: 100%;
  margin: 5px 0 0;
  color: rgb(245 239 255 / 86%);
  font-family: inherit;
  font-size: var(--type-label);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -.015em;
  word-break: keep-all;
  text-shadow: 1px 1px 0 rgb(72 45 139 / 24%);
}
.conversation-page-hero--fortune.conversation-page-hero--no-tabs .conversation-page-hero__copy {
  min-height: 117px;
  align-content: center;
  padding-block: 14px;
}
.conversation-page-hero--fortune.conversation-page-hero--no-tabs .conversation-page-hero__divider {
  display: block;
  width: min(100%, 240px);
  height: 2px;
  margin-top: 10px;
  background: rgb(245 239 255 / 76%);
}
.conversation-page-hero--fortune.conversation-page-hero--no-tabs .conversation-page-hero__guidance {
  margin-top: 8px;
}
.conversation-page-hero--fortune .fortune-tabs.fortune-tabs--hero {
  width: min(100%, 240px);
  margin: 6px 0 0;
  padding: 6px 0 0;
  background: transparent;
  box-shadow: none;
}
.conversation-page-hero--fortune .fortune-tabs.fortune-tabs--hero a {
  font-family: 'AppNumerals', 'SchoolSafeUniverse', 'Pretendard', system-ui, sans-serif;
  font-size: var(--type-label);
  font-weight: 700;
}
.conversation-page-hero--fortune .fortune-tabs.fortune-tabs--hero a:hover {
  background-color: transparent;
  color: #4c30af;
}
.conversation-page-hero--fortune .fortune-tabs.fortune-tabs--hero a.active {
  color: #51309a;
}

@media (max-width: 639px) {
  .conversation-page-hero.conversation-page-hero--fortune {
    --conversation-hero-title-size: clamp(var(--type-section-title-lg), 9.6vw, var(--type-page-title-lg));

    min-height: 145px;
    aspect-ratio: auto;
  }
  .conversation-page-hero--fortune .conversation-page-hero__copy {
    padding: 10px 14px 6px;
  }
  .conversation-page-hero--fortune .conversation-page-hero__title {
    font-size: clamp(var(--type-section-title-lg), 9.6vw, var(--type-page-title-lg));
  }
  .conversation-page-hero--fortune .fortune-tabs.fortune-tabs--hero {
    width: min(100%, 240px);
    gap: 12px;
    margin-top: 6px;
  }
  .conversation-page-hero--fortune .fortune-tabs.fortune-tabs--hero a {
    min-height: 52px;
    padding: 0 6px;
  }
}
.fortune-generation {
  position: relative;
  display: grid;
  min-height: 440px;
  grid-template-columns: minmax(230px, .78fr) minmax(320px, 1.22fr);
  align-items: center;
  gap: 34px;
  padding: clamp(34px, 5vw, 62px) 34px;
  overflow: hidden;
  border: 14px solid transparent;
  border-image: url("/images/pixel_frame_purple.svg") 14 stretch;
  border-radius: 0;
  background:
    linear-gradient(rgb(255 252 255 / 84%), rgb(250 243 255 / 88%)),
    url("/images/fortune_overall_background.png?v=1") center / 760px auto;
  background-clip: padding-box;
  box-shadow: 0 16px 30px rgb(79 42 139 / 10%);
  text-align: left;
  isolation: isolate;
}
.fortune-generation::before {
  position: absolute;
  z-index: 0;
  inset: 8px;
  background: transparent;
  content: "";
  pointer-events: none;
}
.fortune-generation::after {
  position: absolute;
  z-index: 0;
  top: 46px;
  bottom: 46px;
  left: 40.5%;
  width: 2px;
  background: rgb(141 97 220 / 25%);
  content: "";
  pointer-events: none;
}
.fortune-generation > * { position: relative; z-index: 1; }
.fortune-generation-visual {
  display: grid;
  min-width: 0;
  min-height: 310px;
  row-gap: 12px;
  transform: translateX(-16px);
  place-items: center;
}
.fortune-generation-visual::before {
  position: absolute;
  z-index: -1;
  width: min(86%, 260px);
  height: 184px;
  background: rgb(239 226 252 / 62%);
  clip-path: polygon(
    14px 0, calc(100% - 14px) 0,
    calc(100% - 14px) 2px, calc(100% - 8px) 2px,
    calc(100% - 8px) 4px, calc(100% - 4px) 4px,
    calc(100% - 4px) 8px, 100% 8px,
    100% calc(100% - 8px), calc(100% - 4px) calc(100% - 8px),
    calc(100% - 4px) calc(100% - 4px), calc(100% - 8px) calc(100% - 4px),
    calc(100% - 8px) calc(100% - 2px), calc(100% - 14px) calc(100% - 2px),
    calc(100% - 14px) 100%, 14px 100%,
    14px calc(100% - 2px), 8px calc(100% - 2px),
    8px calc(100% - 4px), 4px calc(100% - 4px),
    4px calc(100% - 8px), 0 calc(100% - 8px),
    0 8px, 4px 8px,
    4px 4px, 8px 4px,
    8px 2px, 14px 2px
  );
  content: "";
}
.fortune-generation-oracle {
  position: relative;
  display: grid;
  width: min(92%, 278px);
  filter: drop-shadow(0 12px 10px rgb(71 42 127 / 17%));
  line-height: 0;
  place-items: center;
}
.fortune-generation-oracle-image {
  width: 100%;
  height: auto;
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(7px) scale(.96);
  filter: brightness(1.08) saturate(.92);
  image-rendering: pixelated;
  transition:
    opacity .42s ease,
    transform .56s cubic-bezier(.2, .75, .25, 1),
    filter .42s ease;
}
.fortune-generation-oracle-image.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: brightness(1) saturate(1);
}
.fortune-generation-moon {
  position: absolute;
  z-index: 2;
  top: 31px;
  right: 7%;
  width: 48px;
  height: 48px;
  filter: drop-shadow(3px 5px 0 rgb(97 63 160 / 10%));
  image-rendering: pixelated;
  animation: fortune-generation-moon-bob 3.2s steps(2, end) infinite;
}
.fortune-generation-spark {
  position: absolute;
  z-index: 3;
  color: #e3af35;
  line-height: 1;
  text-shadow: 2px 2px 0 rgb(103 64 166 / 14%);
}
.fortune-generation-spark--one { top: 70px; left: 4%; font-size: var(--type-card-title); }
.fortune-generation-spark--two { right: 5%; bottom: 68px; color: #8f68d5; font-size: var(--type-body-lg); }
.fortune-generation-pixels {
  display: flex;
  justify-self: center;
  gap: 7px;
}
.fortune-generation-pixels i {
  width: 8px;
  height: 8px;
  background: #c7afe5;
  box-shadow: 2px 2px 0 rgb(99 61 158 / 11%);
  animation: fortune-generation-pixel-pulse 1.8s steps(1, end) infinite;
}
.fortune-generation-pixels i:nth-child(2) { animation-delay: .18s; }
.fortune-generation-pixels i:nth-child(3) { animation-delay: .36s; }
.fortune-generation-pixels i:nth-child(4) { animation-delay: .54s; }
.fortune-generation-pixels i:nth-child(5) { animation-delay: .72s; }
.fortune-generation-content {
  display: grid;
  width: min(100%, 292px);
  min-width: 0;
  justify-self: center;
  align-content: center;
  gap: 22px;
}
.fortune-generation-copy { max-width: 540px; }
.fortune-generation-kicker {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  gap: 7px;
  margin: 0 0 12px;
  padding: 5px 10px;
  background: #eee3fa;
  clip-path: polygon(
    6px 0, calc(100% - 6px) 0,
    calc(100% - 6px) 2px, 100% 2px,
    100% calc(100% - 2px), calc(100% - 6px) calc(100% - 2px),
    calc(100% - 6px) 100%, 6px 100%,
    6px calc(100% - 2px), 0 calc(100% - 2px),
    0 2px, 6px 2px
  );
  color: #7650c6;
  font-size: var(--type-label);
  font-weight: 600;
  letter-spacing: .04em;
}
.fortune-generation-kicker > span:first-child { color: #d5a52e; }
.fortune-generation-copy h1 {
  max-width: 520px;
  margin: 0;
  color: #4f2aa5;
  font-size: clamp(var(--type-page-title), 3.6vw, var(--type-display-sm));
  line-height: 1.36;
  letter-spacing: -.035em;
  word-break: keep-all;
}
.fortune-generation-copy > p:last-child {
  min-height: 48px;
  margin: 14px 0 0;
  color: #766487;
  font-size: var(--type-body);
  line-height: 1.7;
  word-break: keep-all;
}
.fortune-generation-tamami-note {
  display: grid;
  width: min(100%, 520px);
  grid-template-columns: 84px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin: 0;
}
.fortune-generation-tamami-note img {
  display: block;
  width: 84px;
  height: auto;
  filter: drop-shadow(0 5px 4px rgb(80 47 139 / 12%));
  image-rendering: pixelated;
  animation: fortune-generation-tamami-bob 2.6s ease-in-out infinite;
}
.fortune-generation-tamami-note p {
  position: relative;
  margin: 0;
  padding: 13px 15px;
  border: 2px solid #c9b2e7;
  border-radius: 10px;
  background: rgb(255 253 255 / 92%);
  color: #66469b;
  font-size: var(--type-small);
  font-weight: 600;
  line-height: 1.6;
  word-break: keep-all;
  box-shadow: 3px 3px 0 rgb(109 71 167 / 8%);
}
.fortune-generation-tamami-note p::before {
  position: absolute;
  top: 50%;
  left: -8px;
  width: 12px;
  height: 12px;
  border-bottom: 2px solid #c9b2e7;
  border-left: 2px solid #c9b2e7;
  background: #fff;
  transform: translateY(-50%) rotate(45deg);
  content: "";
}
.fortune-generation-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
}
.fortune-generation-actions form { margin: 0; }
.fortune-generation-retry {
  display: inline-grid;
  min-height: 40px;
  padding: 9px 15px;
  border: 0;
  border-radius: 0;
  clip-path: polygon(
    6px 0, calc(100% - 6px) 0,
    calc(100% - 6px) 2px, 100% 2px,
    100% calc(100% - 2px), calc(100% - 6px) calc(100% - 2px),
    calc(100% - 6px) 100%, 6px 100%,
    6px calc(100% - 2px), 0 calc(100% - 2px),
    0 2px, 6px 2px
  );
  font: inherit;
  font-size: var(--type-label);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform .14s ease, filter .14s ease;
  place-items: center;
}
.fortune-generation-retry { background: #7650c6; color: #fff; }
.fortune-generation-retry:hover { filter: brightness(.98); transform: translateY(-1px); }
.fortune-generation-retry:focus-visible { outline: 3px solid #5a43bc; outline-offset: 3px; }
.fortune-generation--failed .fortune-generation-oracle {
  filter: grayscale(.55) opacity(.72) drop-shadow(0 12px 10px rgb(71 42 127 / 10%));
}
.fortune-generation--failed .fortune-generation-oracle-image {
  transition: none;
}
.fortune-generation--failed .fortune-generation-moon {
  filter: grayscale(.45) opacity(.7);
  animation: none;
}
.fortune-generation--failed .fortune-generation-pixels,
.fortune-generation--failed .fortune-generation-tamami-note { display: none; }
.fortune-generation--failed .fortune-generation-kicker {
  background: #f2e5ee;
  color: #8a5470;
}
@keyframes fortune-generation-moon-bob {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(2px, -3px); }
}
@keyframes fortune-generation-tamami-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
@keyframes fortune-generation-pixel-pulse {
  0%, 35% { background: #d9c8ed; transform: translateY(0); }
  36%, 70% { background: #7650c6; transform: translateY(-3px); }
  71%, 100% { background: #c7afe5; transform: translateY(0); }
}
@media (max-width: 720px) {
  .fortune-generation {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 24px 18px 30px;
    text-align: center;
  }
  .fortune-generation::after { display: none; }
  .fortune-generation-visual { min-height: 220px; row-gap: 10px; transform: none; }
  .fortune-generation-visual::before { width: min(76%, 230px); height: 154px; }
  .fortune-generation-oracle { width: min(72%, 205px); }
  .fortune-generation-moon { top: 17px; right: 14%; width: 42px; height: 42px; }
  .fortune-generation-spark--one { top: 46px; left: 12%; }
  .fortune-generation-spark--two { right: 13%; bottom: 47px; }
  .fortune-generation-content { width: 100%; justify-items: center; gap: 18px; }
  .fortune-generation-copy { display: grid; justify-items: center; }
  .fortune-generation-copy h1 { font-size: clamp(var(--type-section-title-lg), 8.04vw, var(--type-page-title-lg)); }
  .fortune-generation-copy > p:last-child { min-height: 44px; }
  .fortune-generation-tamami-note {
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 9px;
    text-align: left;
  }
  .fortune-generation-tamami-note img { width: 68px; }
  .fortune-generation-tamami-note p { padding: 11px 12px; font-size: var(--type-label); }
  .fortune-generation-actions { justify-content: center; }
}
@media (max-width: 440px) {
  .fortune-generation { border-width: 10px; padding-inline: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .fortune-generation-oracle-image,
  .fortune-generation-moon,
  .fortune-generation-tamami-note img,
  .fortune-generation-pixels i { animation: none; }
  .fortune-generation-oracle-image { transition: none; }
}
.temporary-cache-tool {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: -20px 0 24px;
  padding: 11px 15px;
  border: 1px dashed #896bcc;
  border-radius: 10px;
  background: var(--surface-white);
  box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #e4d8f8;
}
.temporary-cache-tool > div { display: grid; gap: 3px; }
.temporary-cache-tool strong { color: #7650c6; font-size: var(--type-label); }
.temporary-cache-tool span { color: #8b769f; font-size: var(--type-caption); line-height: 1.45; }
.temporary-cache-tool form { flex: none; }
.temporary-cache-button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #896bcc;
  border-radius: 6px;
  background: var(--surface-white);
  color: #5632ad;
  font-size: var(--type-label);
  font-weight: 600;
  cursor: pointer;
  box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #e4d8f8;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.temporary-cache-button:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
}
.temporary-cache-button:disabled {
  border-color: #d8cfe3;
  background: #f3eef6;
  color: #a396ad;
  cursor: not-allowed;
  box-shadow: none;
}
.temporary-cache-button:disabled:hover { transform: none; filter: none; }
.fortune-score-band { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 32px 0; border-block: 1px solid #e5e8eb; }
.fortune-score-band div { display: grid; gap: 6px; padding: 20px 8px; text-align: center; }
.fortune-score-band strong { color: var(--score-color); font-size: var(--type-page-title); }
.fortune-score-band span { color: #8b95a1; font-size: var(--type-body-lg); }
.locked-state {
  position: relative;
  display: grid;
  min-height: 250px;
  grid-template-columns: minmax(0, 1fr) 190px;
  align-items: center;
  gap: 20px;
  padding: 32px 34px;
  overflow: hidden;
  border-style: solid;
  border-width: 14px;
  border-image: url('data:image/svg+xml;utf8,<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14 2H34V4H38V6H42V10H44V14H46V34H44V38H42V42H38V44H34V46H14V44H10V42H6V38H4V34H2V14H4V10H6V6H10V4H14V2Z" fill="%23fcf7ff"/><rect x="14" y="2" width="20" height="2" fill="%23ffffff"/><rect x="10" y="4" width="4" height="2" fill="%23ffffff"/><rect x="6" y="6" width="4" height="2" fill="%23ffffff"/><rect x="4" y="8" width="2" height="4" fill="%23ffffff"/><rect x="2" y="12" width="2" height="22" fill="%23ffffff"/><rect x="44" y="14" width="2" height="22" fill="%23b290e8"/><rect x="42" y="36" width="2" height="4" fill="%23b290e8"/><rect x="38" y="40" width="4" height="2" fill="%23b290e8"/><rect x="34" y="42" width="4" height="2" fill="%23b290e8"/><rect x="14" y="44" width="20" height="2" fill="%23b290e8"/><rect x="14" y="0" width="20" height="2" fill="%23896bcc"/><rect x="10" y="2" width="4" height="2" fill="%23896bcc"/><rect x="6" y="4" width="4" height="2" fill="%23896bcc"/><rect x="4" y="6" width="2" height="4" fill="%23896bcc"/><rect x="2" y="10" width="2" height="4" fill="%23896bcc"/><rect x="0" y="14" width="2" height="20" fill="%23896bcc"/><rect x="34" y="2" width="4" height="2" fill="%23896bcc"/><rect x="38" y="4" width="4" height="2" fill="%23896bcc"/><rect x="42" y="6" width="2" height="4" fill="%23896bcc"/><rect x="44" y="10" width="2" height="4" fill="%23896bcc"/><rect x="46" y="14" width="2" height="20" fill="%23896bcc"/><rect x="2" y="34" width="2" height="4" fill="%23896bcc"/><rect x="4" y="38" width="2" height="4" fill="%23896bcc"/><rect x="6" y="42" width="4" height="2" fill="%23896bcc"/><rect x="10" y="44" width="4" height="2" fill="%23896bcc"/><rect x="14" y="46" width="20" height="2" fill="%23896bcc"/><rect x="44" y="34" width="2" height="4" fill="%23896bcc"/><rect x="42" y="38" width="2" height="4" fill="%23896bcc"/><rect x="38" y="42" width="4" height="2" fill="%23896bcc"/><rect x="34" y="44" width="4" height="2" fill="%23896bcc"/></svg>') 14 fill stretch;
  background-color: transparent;
  clip-path: polygon(
    14px 0, calc(100% - 14px) 0,
    calc(100% - 14px) 2px, calc(100% - 10px) 2px,
    calc(100% - 10px) 4px, calc(100% - 6px) 4px,
    calc(100% - 6px) 6px, calc(100% - 4px) 6px,
    calc(100% - 4px) 10px, calc(100% - 2px) 10px,
    calc(100% - 2px) 14px, 100% 14px,
    100% calc(100% - 14px), calc(100% - 2px) calc(100% - 14px),
    calc(100% - 2px) calc(100% - 10px), calc(100% - 4px) calc(100% - 10px),
    calc(100% - 4px) calc(100% - 6px), calc(100% - 6px) calc(100% - 6px),
    calc(100% - 6px) calc(100% - 4px), calc(100% - 10px) calc(100% - 4px),
    calc(100% - 10px) calc(100% - 2px), calc(100% - 14px) calc(100% - 2px),
    calc(100% - 14px) 100%, 14px 100%,
    14px calc(100% - 2px), 10px calc(100% - 2px),
    10px calc(100% - 4px), 6px calc(100% - 4px),
    6px calc(100% - 6px), 4px calc(100% - 6px),
    4px calc(100% - 10px), 2px calc(100% - 10px),
    2px calc(100% - 14px), 0 calc(100% - 14px),
    0 14px, 2px 14px,
    2px 10px, 4px 10px,
    4px 6px, 6px 6px,
    6px 4px, 10px 4px,
    10px 2px, 14px 2px
  );
  box-shadow: none;
}
.locked-state::before, .locked-state::after { position: absolute; width: 9px; height: 9px; transform: rotate(45deg); background: #fff18a; content: ""; }
.locked-state::before { top: 26px; right: 34%; }
.locked-state::after { right: 24px; bottom: 22px; }
.locked-state-copy { position: relative; z-index: 1; min-width: 0; }
.locked-state-kicker { display: inline-flex; align-items: center; gap: 6px; color: #8d61dc; font-size: var(--type-small); font-weight: 600; }
.locked-state-kicker .lucide { width: 15px; height: 15px; }
.locked-state h1 { margin: 9px 0 0; color: #4f2aa5; font-size: var(--type-page-title); font-weight: 600; line-height: 1.35; }
.locked-state-copy > p { max-width: 390px; margin: 11px 0 0; color: #806d99; font-size: var(--type-body); font-weight: 600; line-height: 1.7; word-break: keep-all; }
.locked-state-action { display: inline-grid; min-width: 174px; min-height: 44px; grid-template-columns: 18px 1fr 16px; align-items: center; gap: 8px; margin-top: 21px; padding: 0 14px; border-radius: 8px; border: 1px solid #896bcc; background: #835adc; color: #fff; font-size: var(--type-body); font-weight: 600; text-decoration: none; box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #6747ab; transition: transform 0.15s ease, filter 0.15s ease; }
.locked-state-action:hover { transform: translateY(-1px); filter: brightness(1.03); }
.locked-state-action .lucide { width: 17px; height: 17px; }
.locked-state-action .lucide:last-child { width: 15px; height: 15px; }
.locked-state-art { position: relative; align-self: stretch; min-height: 186px; }
.locked-state-art span { position: absolute; z-index: 2; top: 4px; left: 50%; width: max-content; transform: translateX(-50%); padding: 8px 11px; border: 2px solid #896bcc; border-radius: 8px; background: var(--surface-white); color: #5632ad; font-size: var(--type-label); font-weight: 600; box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #e4d8f8; }
.locked-state-art span::after { position: absolute; bottom: -6px; left: 50%; width: 10px; height: 10px; transform: translateX(-50%) rotate(45deg); border-right: 2px solid #896bcc; border-bottom: 2px solid #896bcc; background: var(--surface-white); content: ""; }
.locked-state-art img { position: absolute; right: -12px; bottom: -80px; width: 190px; height: auto; filter: drop-shadow(0 10px 10px rgba(82, 47, 144, .1)); image-rendering: pixelated; }
.fortune-heading { padding: 2px 4px 0; }
.fortune-heading .date-label { color: #896bcc; font-size: var(--type-body); font-weight: 600; }
.fortune-heading h1 { max-width: 620px; margin: 6px 0 8px; color: #4f2aa5; font-family: 'AppNumerals', 'SchoolSafeUniverse', 'Pretendard', system-ui, sans-serif; font-size: var(--type-page-title); font-weight: 700; line-height: 1.45; }
.fortune-range { margin: 0; color: #a18ebf; font-size: var(--type-body); font-weight: 600; }
.fortune-overview {
  position: relative;
  display: grid;
  grid-template-columns: 126px minmax(0, 1fr);
  align-items: start;
  column-gap: 24px;
  row-gap: 12px;
  margin: 24px 0 16px;
  padding: 20px 24px;
  border-style: solid;
  border-width: 14px;
  border-image: url('data:image/svg+xml;utf8,<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14 2H34V4H38V6H42V10H44V14H46V34H44V38H42V42H38V44H34V46H14V44H10V42H6V38H4V34H2V14H4V10H6V6H10V4H14V2Z" fill="%23fcf7ff"/><rect x="14" y="2" width="20" height="2" fill="%23ffffff"/><rect x="10" y="4" width="4" height="2" fill="%23ffffff"/><rect x="6" y="6" width="4" height="2" fill="%23ffffff"/><rect x="4" y="8" width="2" height="4" fill="%23ffffff"/><rect x="2" y="12" width="2" height="22" fill="%23ffffff"/><rect x="44" y="14" width="2" height="22" fill="%23b290e8"/><rect x="42" y="36" width="2" height="4" fill="%23b290e8"/><rect x="38" y="40" width="4" height="2" fill="%23b290e8"/><rect x="34" y="42" width="4" height="2" fill="%23b290e8"/><rect x="14" y="44" width="20" height="2" fill="%23b290e8"/><rect x="14" y="0" width="20" height="2" fill="%23896bcc"/><rect x="10" y="2" width="4" height="2" fill="%23896bcc"/><rect x="6" y="4" width="4" height="2" fill="%23896bcc"/><rect x="4" y="6" width="2" height="4" fill="%23896bcc"/><rect x="2" y="10" width="2" height="4" fill="%23896bcc"/><rect x="0" y="14" width="2" height="20" fill="%23896bcc"/><rect x="34" y="2" width="4" height="2" fill="%23896bcc"/><rect x="38" y="4" width="4" height="2" fill="%23896bcc"/><rect x="42" y="6" width="2" height="4" fill="%23896bcc"/><rect x="44" y="10" width="2" height="4" fill="%23896bcc"/><rect x="46" y="14" width="2" height="20" fill="%23896bcc"/><rect x="2" y="34" width="2" height="4" fill="%23896bcc"/><rect x="4" y="38" width="2" height="4" fill="%23896bcc"/><rect x="6" y="42" width="4" height="2" fill="%23896bcc"/><rect x="10" y="44" width="4" height="2" fill="%23896bcc"/><rect x="14" y="46" width="20" height="2" fill="%23896bcc"/><rect x="44" y="34" width="2" height="4" fill="%23896bcc"/><rect x="42" y="38" width="2" height="4" fill="%23896bcc"/><rect x="38" y="42" width="4" height="2" fill="%23896bcc"/><rect x="34" y="44" width="4" height="2" fill="%23896bcc"/></svg>') 14 fill stretch;
  background-color: transparent;
  clip-path: polygon(
    14px 0, calc(100% - 14px) 0,
    calc(100% - 14px) 2px, calc(100% - 10px) 2px,
    calc(100% - 10px) 4px, calc(100% - 6px) 4px,
    calc(100% - 6px) 6px, calc(100% - 4px) 6px,
    calc(100% - 4px) 10px, calc(100% - 2px) 10px,
    calc(100% - 2px) 14px, 100% 14px,
    100% calc(100% - 14px), calc(100% - 2px) calc(100% - 14px),
    calc(100% - 2px) calc(100% - 10px), calc(100% - 4px) calc(100% - 10px),
    calc(100% - 4px) calc(100% - 6px), calc(100% - 6px) calc(100% - 6px),
    calc(100% - 6px) calc(100% - 4px), calc(100% - 10px) calc(100% - 4px),
    calc(100% - 10px) calc(100% - 2px), calc(100% - 14px) calc(100% - 2px),
    calc(100% - 14px) 100%, 14px 100%,
    14px calc(100% - 2px), 10px calc(100% - 2px),
    10px calc(100% - 4px), 6px calc(100% - 4px),
    6px calc(100% - 6px), 4px calc(100% - 6px),
    4px calc(100% - 10px), 2px calc(100% - 10px),
    2px calc(100% - 14px), 0 calc(100% - 14px),
    0 14px, 2px 14px,
    2px 10px, 4px 10px,
    4px 6px, 6px 6px,
    6px 4px, 10px 4px,
    10px 2px, 14px 2px
  );
  box-shadow: none;
}
.fortune-score { position: relative; display: flex; width: 126px; height: 126px; grid-column: 1; grid-row: 1 / 4; align-self: center; align-items: center; justify-content: center; gap: 3px; border-radius: 50%; border: 3px solid #896bcc; background: conic-gradient(#8d61dc 0 var(--fortune-score), #eadff6 var(--fortune-score) 100%); color: var(--score-color); isolation: isolate; box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #e4d8f8; }
.fortune-score::before { position: absolute; z-index: -1; inset: 8px; border-radius: 50%; background: var(--surface-white); content: ""; }
.fortune-score strong { font-size: var(--type-display-md); line-height: 1; font-variant-numeric: tabular-nums; }
.fortune-score span { color: var(--score-color); font-size: var(--type-small); font-weight: 600; }
.fortune-score-copy { grid-column: 2; grid-row: 1; }
.fortune-score-copy strong { color: #5632ad; font-size: var(--type-card-title); }
.fortune-score-copy p { margin: 8px 0 0; color: #806d99; font-size: var(--type-body); line-height: 1.6; }
.score-track { grid-column: 2; grid-row: 2; height: 9px; overflow: hidden; border: 1px solid #896bcc; border-radius: 5px; background: var(--surface-white); }
.score-track i { display: block; height: 100%; border-radius: 3px; background: #8d61dc; }
.score-scale { display: flex; grid-column: 2; grid-row: 3; justify-content: space-between; color: #a18ebf; font-size: var(--type-label); }
.fortune-domains { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.fortune-domain,
.fortune-lucky-items { --fortune-copy-color: #6b667a; }
.fortune-lucky-items {
  position: relative;
  margin-top: 16px;
  padding: 20px;
  border-style: solid;
  border-width: 14px;
  border-image: url('data:image/svg+xml;utf8,<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14 2H34V4H38V6H42V10H44V14H46V34H44V38H42V42H38V44H34V46H14V44H10V42H6V38H4V34H2V14H4V10H6V6H10V4H14V2Z" fill="%23fcf7ff"/><rect x="14" y="2" width="20" height="2" fill="%23ffffff"/><rect x="10" y="4" width="4" height="2" fill="%23ffffff"/><rect x="6" y="6" width="4" height="2" fill="%23ffffff"/><rect x="4" y="8" width="2" height="4" fill="%23ffffff"/><rect x="2" y="12" width="2" height="22" fill="%23ffffff"/><rect x="44" y="14" width="2" height="22" fill="%23b290e8"/><rect x="42" y="36" width="2" height="4" fill="%23b290e8"/><rect x="38" y="40" width="4" height="2" fill="%23b290e8"/><rect x="34" y="42" width="4" height="2" fill="%23b290e8"/><rect x="14" y="44" width="20" height="2" fill="%23b290e8"/><rect x="14" y="0" width="20" height="2" fill="%23896bcc"/><rect x="10" y="2" width="4" height="2" fill="%23896bcc"/><rect x="6" y="4" width="4" height="2" fill="%23896bcc"/><rect x="4" y="6" width="2" height="4" fill="%23896bcc"/><rect x="2" y="10" width="2" height="4" fill="%23896bcc"/><rect x="0" y="14" width="2" height="20" fill="%23896bcc"/><rect x="34" y="2" width="4" height="2" fill="%23896bcc"/><rect x="38" y="4" width="4" height="2" fill="%23896bcc"/><rect x="42" y="6" width="2" height="4" fill="%23896bcc"/><rect x="44" y="10" width="2" height="4" fill="%23896bcc"/><rect x="46" y="14" width="2" height="20" fill="%23896bcc"/><rect x="2" y="34" width="2" height="4" fill="%23896bcc"/><rect x="4" y="38" width="2" height="4" fill="%23896bcc"/><rect x="6" y="42" width="4" height="2" fill="%23896bcc"/><rect x="10" y="44" width="4" height="2" fill="%23896bcc"/><rect x="14" y="46" width="20" height="2" fill="%23896bcc"/><rect x="44" y="34" width="2" height="4" fill="%23896bcc"/><rect x="42" y="38" width="2" height="4" fill="%23896bcc"/><rect x="38" y="42" width="4" height="2" fill="%23896bcc"/><rect x="34" y="44" width="4" height="2" fill="%23896bcc"/></svg>') 14 fill stretch;
  background-color: transparent;
  clip-path: polygon(
    14px 0, calc(100% - 14px) 0,
    calc(100% - 14px) 2px, calc(100% - 10px) 2px,
    calc(100% - 10px) 4px, calc(100% - 6px) 4px,
    calc(100% - 6px) 6px, calc(100% - 4px) 6px,
    calc(100% - 4px) 10px, calc(100% - 2px) 10px,
    calc(100% - 2px) 14px, 100% 14px,
    100% calc(100% - 14px), calc(100% - 2px) calc(100% - 14px),
    calc(100% - 2px) calc(100% - 10px), calc(100% - 4px) calc(100% - 10px),
    calc(100% - 4px) calc(100% - 6px), calc(100% - 6px) calc(100% - 6px),
    calc(100% - 6px) calc(100% - 4px), calc(100% - 10px) calc(100% - 4px),
    calc(100% - 10px) calc(100% - 2px), calc(100% - 14px) calc(100% - 2px),
    calc(100% - 14px) 100%, 14px 100%,
    14px calc(100% - 2px), 10px calc(100% - 2px),
    10px calc(100% - 4px), 6px calc(100% - 4px),
    6px calc(100% - 6px), 4px calc(100% - 6px),
    4px calc(100% - 10px), 2px calc(100% - 10px),
    2px calc(100% - 14px), 0 calc(100% - 14px),
    0 14px, 2px 14px,
    2px 10px, 4px 10px,
    4px 6px, 6px 6px,
    6px 4px, 10px 4px,
    10px 2px, 14px 2px
  );
  box-shadow: none;
}
.fortune-lucky-items > header {
  display: grid;
  width: 100%;
  gap: 7px;
  margin-bottom: 15px;
}
.fortune-lucky-items > header h2 {
  width: 100%;
  margin: 0;
  color: #5632ad;
  font-size: var(--type-card-title);
  font-weight: 600;
  white-space: nowrap;
}
.fortune-lucky-items > header p {
  width: 100%;
  margin: 0;
  color: var(--fortune-copy-color);
  font-size: var(--type-label);
  line-height: 1.5;
  text-align: left;
}
.fortune-lucky-items ul {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.fortune-lucky-items li {
  display: grid;
  min-width: 0;
  min-height: 58px;
  grid-template-columns: 36px minmax(115px, .28fr) minmax(0, 1fr);
  align-items: center;
  align-content: center;
  justify-items: start;
  gap: 10px;
  padding: 8px;
  border: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
}
.fortune-lucky-items li + li { border-top: 1px dotted #d9c7f0; }
.fortune-lucky-items li > i { display: grid; width: 36px; height: 36px; color: #8d61dc; place-items: center; }
.fortune-lucky-items li > .lucide { padding: 5px; background: #e9ddf9; stroke-width: 1.8; }
.fortune-lucky-items .lucky-item-pixel-icon img { display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.fortune-lucky-items li > span { color: #6f5798; font-size: var(--type-small); font-weight: 600; white-space: nowrap; }
.fortune-lucky-items .lucky-item-label-mark { margin-left: 2px; font-weight: 500; }
.fortune-lucky-items li > strong { color: #6040b2; font-size: var(--type-body-lg); line-height: 1.45; overflow-wrap: anywhere; }
.fortune-domain,
.fortune-period-overview,
.narrative-section {
  position: relative;
  margin-top: 18px;
  padding: 22px;
  border-style: solid;
  border-width: 14px;
  border-image: url('data:image/svg+xml;utf8,<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14 2H34V4H38V6H42V10H44V14H46V34H44V38H42V42H38V44H34V46H14V44H10V42H6V38H4V34H2V14H4V10H6V6H10V4H14V2Z" fill="%23fcf7ff"/><rect x="14" y="2" width="20" height="2" fill="%23ffffff"/><rect x="10" y="4" width="4" height="2" fill="%23ffffff"/><rect x="6" y="6" width="4" height="2" fill="%23ffffff"/><rect x="4" y="8" width="2" height="4" fill="%23ffffff"/><rect x="2" y="12" width="2" height="22" fill="%23ffffff"/><rect x="44" y="14" width="2" height="22" fill="%23b290e8"/><rect x="42" y="36" width="2" height="4" fill="%23b290e8"/><rect x="38" y="40" width="4" height="2" fill="%23b290e8"/><rect x="34" y="42" width="4" height="2" fill="%23b290e8"/><rect x="14" y="44" width="20" height="2" fill="%23b290e8"/><rect x="14" y="0" width="20" height="2" fill="%23896bcc"/><rect x="10" y="2" width="4" height="2" fill="%23896bcc"/><rect x="6" y="4" width="4" height="2" fill="%23896bcc"/><rect x="4" y="6" width="2" height="4" fill="%23896bcc"/><rect x="2" y="10" width="2" height="4" fill="%23896bcc"/><rect x="0" y="14" width="2" height="20" fill="%23896bcc"/><rect x="34" y="2" width="4" height="2" fill="%23896bcc"/><rect x="38" y="4" width="4" height="2" fill="%23896bcc"/><rect x="42" y="6" width="2" height="4" fill="%23896bcc"/><rect x="44" y="10" width="2" height="4" fill="%23896bcc"/><rect x="46" y="14" width="2" height="20" fill="%23896bcc"/><rect x="2" y="34" width="2" height="4" fill="%23896bcc"/><rect x="4" y="38" width="2" height="4" fill="%23896bcc"/><rect x="6" y="42" width="4" height="2" fill="%23896bcc"/><rect x="10" y="44" width="4" height="2" fill="%23896bcc"/><rect x="14" y="46" width="20" height="2" fill="%23896bcc"/><rect x="44" y="34" width="2" height="4" fill="%23896bcc"/><rect x="42" y="38" width="2" height="4" fill="%23896bcc"/><rect x="38" y="42" width="4" height="2" fill="%23896bcc"/><rect x="34" y="44" width="4" height="2" fill="%23896bcc"/></svg>') 14 fill stretch;
  background-color: transparent;
  clip-path: polygon(
    14px 0, calc(100% - 14px) 0,
    calc(100% - 14px) 2px, calc(100% - 10px) 2px,
    calc(100% - 10px) 4px, calc(100% - 6px) 4px,
    calc(100% - 6px) 6px, calc(100% - 4px) 6px,
    calc(100% - 4px) 10px, calc(100% - 2px) 10px,
    calc(100% - 2px) 14px, 100% 14px,
    100% calc(100% - 14px), calc(100% - 2px) calc(100% - 14px),
    calc(100% - 2px) calc(100% - 10px), calc(100% - 4px) calc(100% - 10px),
    calc(100% - 4px) calc(100% - 6px), calc(100% - 6px) calc(100% - 6px),
    calc(100% - 6px) calc(100% - 4px), calc(100% - 10px) calc(100% - 4px),
    calc(100% - 10px) calc(100% - 2px), calc(100% - 14px) calc(100% - 2px),
    calc(100% - 14px) 100%, 14px 100%,
    14px calc(100% - 2px), 10px calc(100% - 2px),
    10px calc(100% - 4px), 6px calc(100% - 4px),
    6px calc(100% - 6px), 4px calc(100% - 6px),
    4px calc(100% - 10px), 2px calc(100% - 10px),
    2px calc(100% - 14px), 0 calc(100% - 14px),
    0 14px, 2px 14px,
    2px 10px, 4px 10px,
    4px 6px, 6px 6px,
    6px 4px, 10px 4px,
    10px 2px, 14px 2px
  );
  box-shadow: none;
}
.fortune-domain {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: start;
  column-gap: 20px;
  margin-top: 0;
  padding: 10px 15px;
}
.fortune-domain header {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 26px max-content minmax(18px, 1fr) auto;
  align-items: center;
  gap: 2px;
  color: #806d99;
  font-weight: 600;
}
.fortune-domain-label {
  color: #6f5e86;
  font-size: clamp(var(--type-body), 1.92vw, var(--type-body-lg));
  font-weight: 600;
  line-height: 1.35;
  word-break: keep-all;
}
.fortune-domain header strong {
  display: inline-flex;
  grid-column: 4;
  align-items: baseline;
  gap: 2px;
  color: var(--score-color);
  font-size: clamp(var(--type-page-title-lg), 4.8vw, var(--type-display-sm));
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.fortune-domain-score-number { font-family: 'AppNumerals', 'SchoolSafeUniverse', 'Pretendard', system-ui, sans-serif; font-weight: 700; }
.fortune-domain-score-unit { font-size: var(--type-body); font-weight: 600; }
.fortune-domain-icon {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
}
.fortune-domain-icon img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}
.fortune-domain-shell {
  position: relative;
  min-width: 0;
  margin-top: 72px;
}
.fortune-domain-tamami {
  position: absolute;
  z-index: 2;
  top: -83px;
  right: 18px;
  display: block;
  width: 104px;
  line-height: 0;
  pointer-events: none;
}
.fortune-domain-tamami img {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
}
.fortune-domain h2 {
  grid-column: 1;
  margin: 0;
  padding-top: 10px;
  color: #5632ad;
  font-family: 'AppNumerals', 'SchoolSafeUniverse', 'Pretendard', system-ui, sans-serif;
  font-size: clamp(var(--type-section-title-lg), 3.84vw, var(--type-page-title));
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.35;
  word-break: keep-all;
}
.fortune-domain p {
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  grid-column: 2;
  justify-self: end;
  margin: 0;
  padding-top: 10px;
  color: var(--fortune-copy-color);
  font-size: var(--type-body);
  line-height: 1.65;
  overflow-wrap: normal;
  word-break: keep-all;
}
.fortune-period-overview h2,
.narrative-section h2,
.narrative-section h3 { margin: 0 0 18px; color: #5632ad; font-size: var(--type-section-title); font-weight: 600; }
.fortune-period-overview {
  --period-purple: #6541bd;

  overflow: hidden;
  padding: 12px 20px 18px;
  background: #fdf9ff;
}
.period-overview-title-row {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: 96px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 0 6px;
}
.period-overview-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}
.period-overview-header__tamami {
  display: block;
  width: 64px;
  height: auto;
  flex: 0 0 auto;
  image-rendering: pixelated;
}
.period-overview-header::before,
.period-overview-header::after {
  position: absolute;
  color: #966cf0;
  font-weight: 600;
  content: "✦";
}
.period-overview-header::before { top: -13px; left: -10px; font-size: var(--type-body); }
.period-overview-header::after { right: 10px; bottom: 4px; color: #df59c5; font-size: var(--type-card-title); }
.period-overview-header h2 {
  margin: 0;
  color: #5f3bad;
  font-family: 'AppNumerals', 'SchoolSafeUniverse', 'Pretendard', system-ui, sans-serif;
  font-size: clamp(var(--type-page-title), 5.28vw, var(--type-display-sm));
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: .04em;
  text-shadow: none;
  word-break: keep-all;
}
.period-overview-progress {
  --period-progress-edge-shift: 40px;
  --period-progress-arrow-shift: 20px;

  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns:
    minmax(12px, 1fr) auto minmax(28px, 1fr) auto
    minmax(28px, 1fr) auto minmax(12px, 1fr);
  align-items: center;
  margin: 5px 0 9px;
}
.period-overview-progress > * { z-index: 1; }
.period-overview-progress__step {
  position: relative;
  z-index: 2;
  display: block;
  width: clamp(58px, 9.8vw, 72px);
  height: auto;
  background: radial-gradient(
    ellipse 47% 38% at 50% 58%,
    #fdf9ff 0 96%,
    transparent 100%
  );
  image-rendering: pixelated;
}
.period-overview-progress > .period-overview-progress__step:first-of-type {
  transform: translateX(calc(-1 * var(--period-progress-edge-shift)));
}
.period-overview-progress > .period-overview-progress__step:last-of-type {
  transform: translateX(var(--period-progress-edge-shift));
}
.period-overview-progress__rail {
  position: relative;
  display: block;
  min-width: 0;
  height: 24px;
  background-image: url("/images/fortune-period/progress-line.png");
  background-repeat: repeat-x;
  background-position: center;
  background-size: auto 3px;
}
.period-overview-progress__rail--start {
  background-image:
    url("/images/fortune-period/progress-start.png"),
    url("/images/fortune-period/progress-line.png");
  background-repeat: no-repeat, repeat-x;
  background-position: left center, center;
  background-size: 9px 9px, auto 3px;
}
.period-overview-progress__rail--end {
  background-image:
    url("/images/fortune-period/progress-end.png"),
    url("/images/fortune-period/progress-line.png");
  background-repeat: no-repeat, repeat-x;
  background-position: right center, center;
  background-size: auto 16px, auto 3px;
}
.period-overview-progress__rail--between:nth-of-type(2)::before,
.period-overview-progress__rail--between:nth-of-type(3)::after {
  position: absolute;
  top: 50%;
  width: var(--period-progress-edge-shift);
  height: 3px;
  background: url("/images/fortune-period/progress-line.png") repeat-x center / auto 3px;
  content: "";
  transform: translateY(-50%);
}
.period-overview-progress__rail--between:nth-of-type(2)::before { right: 100%; }
.period-overview-progress__rail--between:nth-of-type(3)::after { left: 100%; }
.period-overview-progress__rail--between img {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 10px;
  height: auto;
  padding: 2px 0;
  background: #fdf9ff;
  image-rendering: pixelated;
  transform: translate(-50%, -50%);
}
.period-overview-progress__rail--between:nth-of-type(2) img {
  left: calc(50% - var(--period-progress-arrow-shift));
}
.period-overview-progress__rail--between:nth-of-type(3) img {
  left: calc(50% + var(--period-progress-arrow-shift));
}
.period-overview-phases {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.period-overview-phase {
  --phase-accent: #8161db;
  --phase-tint: #8a68e1;
  --period-phase-frame-image: url("/images/pixel_frame_period_phase_purple.svg?v=4");

  position: relative;
  min-width: 0;
  text-align: center;
}
.period-overview-phase:nth-child(2) {
  --phase-accent: #e24a99;
  --phase-tint: #ea5ba8;
  --period-phase-frame-image: url("/images/pixel_frame_period_phase_pink.svg?v=4");
}
.period-overview-phase:nth-child(3) {
  --phase-accent: #6768dc;
  --phase-tint: #7074e4;
  --period-phase-frame-image: url("/images/pixel_frame_period_phase_blue.svg?v=4");
}
.period-overview-phase__content {
  position: relative;
  display: grid;
  height: 100%;
  min-height: 224px;
  grid-template-rows: auto auto minmax(42px, auto) 2px minmax(45px, auto);
  align-content: start;
  justify-items: center;
  gap: 9px;
  padding: 18px 20px;
  isolation: isolate;
}
.period-overview-phase__content::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  border: 14px solid transparent;
  border-image-source: var(--period-phase-frame-image);
  border-image-slice: 14 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  background-clip: border-box;
  background-origin: border-box;
  box-shadow: none;
  clip-path: none;
  content: "";
  pointer-events: none;
  image-rendering: pixelated;
}
.period-overview-phase__cue-label {
  position: relative;
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  justify-content: center;
  padding: 2px 12px;
  border-radius: 99px;
  background: var(--phase-tint);
  color: #ffffff;
  font-size: var(--type-caption);
  font-weight: 600;
  letter-spacing: .04em;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 48%), 0 2px 0 color-mix(in srgb, var(--phase-accent) 24%, transparent);
  white-space: nowrap;
}
.period-overview-phase__cue-label::before,
.period-overview-phase__cue-label::after {
  margin-inline: 5px;
  color: #fff4c8;
  content: "✦";
}
.period-overview-phase h3 {
  margin: 1px 0 0;
  color: var(--phase-accent);
  font-size: var(--type-body);
  line-height: 1.45;
  word-break: keep-all;
}
.period-overview-phase p {
  margin: 0;
  color: #5c3bac;
  font-size: var(--type-label);
  line-height: 1.65;
  word-break: keep-all;
}
.period-overview-phase__divider {
  display: block;
  width: 100%;
  height: 2px;
  align-self: center;
  image-rendering: pixelated;
}
.period-overview-phase small {
  display: grid;
  width: 100%;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  color: #5632ad;
  font-size: var(--type-caption);
  line-height: 1.55;
  text-align: left;
}
.period-overview-phase small > img {
  display: block;
  width: auto;
  max-width: 34px;
  height: auto;
  max-height: 31px;
  justify-self: center;
  image-rendering: pixelated;
}
.period-overview-phase small span { display: grid; min-width: 0; }
.period-overview-phase small b { font-weight: 600; overflow-wrap: anywhere; }
.period-overview-transition {
  position: relative;
  z-index: 1;
  display: grid;
  width: 100%;
  min-height: 64px;
  grid-template-columns: 102px minmax(0, 1fr) 48px;
  align-items: center;
  gap: 12px;
  margin: 16px 0 0;
  padding: 6px 12px;
  border: 1px solid #cbb6ee;
  border-radius: 18px;
  background: rgb(255 252 255 / 88%);
  box-shadow: 0 4px 0 #e7dcf7;
  color: #5b3aac;
  font-size: var(--type-label);
  line-height: 1.65;
}
.period-overview-transition__meta { display: grid; gap: 5px; justify-items: center; }
.period-overview-transition__badge {
  position: relative;
  display: grid;
  width: 100px;
  min-height: 26px;
  place-items: center;
}
.period-overview-transition__badge img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}
.period-overview-transition__badge strong {
  position: relative;
  z-index: 1;
  display: block;
  min-width: 54px;
  color: #5a36ad;
  font-size: var(--type-caption);
  text-align: center;
  white-space: nowrap;
}
.period-overview-transition__copy {
  display: block;
  min-width: 0;
  padding-left: 13px;
  border-left: 1px solid #dfd1f3;
  word-break: keep-all;
}
.period-overview-transition__decoration {
  display: block;
  width: 48px;
  height: auto;
  justify-self: end;
  image-rendering: pixelated;
}
.counterpart-list { margin-top: 32px; border-top: 1px solid #e5e8eb; }
.counterpart-item { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; border-bottom: 1px solid #e5e8eb; }
.counterpart-item h2 { margin: 0; font-size: var(--type-section-title); }
.counterpart-item p { margin: 7px 0 0; color: #8b95a1; font-size: var(--type-body-lg); }
.counterpart-actions { display: flex; align-items: center; gap: 10px; }
.counterpart-actions form { margin: 0; }
.counterpart-empty { padding: 28px 0; border-bottom: 1px solid #e5e8eb; }
.compatibility-main { padding-top: 30px; }
.compatibility-main .conversation-page-hero__description {
  -webkit-text-stroke: 1px rgb(255 255 255 / 72%);
  paint-order: stroke fill;
}
.compatibility-title { margin-bottom: 24px; }
.compatibility-title .date-label { color: #a06bd9; font-size: var(--type-body); }
.compatibility-title h1 { color: #4f2aa5; font-size: var(--type-page-title); font-weight: 600; }
.compatibility-title > p:last-child { color: #806d99; font-size: var(--type-body-lg); }
.compatibility-main .access-notice { border: 1px solid #ddcef3; border-left: 3px solid #9a70df; border-radius: 8px; background: #fbf5fe; color: #705d89; }
.compatibility-main .access-notice a { color: #7650c6; }
.compatibility-flash {
  --pixel-surface-width: 4px;

  position: relative;
  isolation: isolate;
  display: grid;
  min-height: 40px;
  grid-template-columns: 42px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
  padding: 0 10px 0 8px;
  overflow: hidden;
  border: 4px solid transparent;
  background: #f7efff;
  box-shadow: 0 5px 0 rgb(98 62 150 / 16%);
}
.compatibility-flash::after {
  position: absolute;
  z-index: -1;
  top: -31px;
  right: 47px;
  width: 78px;
  height: 78px;
  border: 1px solid rgb(154 112 223 / 13%);
  transform: rotate(45deg);
  content: "";
}
.compatibility-flash__avatar {
  display: grid;
  width: 42px;
  height: 36px;
  place-items: center;
}
.compatibility-flash__avatar img {
  display: block;
  width: 41px;
  max-width: none;
  height: auto;
  image-rendering: pixelated;
}
.compatibility-flash__copy { min-width: 0; }
.compatibility-flash__copy strong {
  color: #5632ad;
  font-size: var(--type-body-lg);
  font-weight: 600;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.compatibility-flash__check {
  display: grid;
  width: 22px;
  height: 22px;
  background: #825ede;
  box-shadow: inset 2px 2px 0 #bba7ee, inset -2px -2px 0 #6440ba, 2px 2px 0 #d9c8f3;
  color: #ffffff;
  font-size: var(--type-small);
  font-weight: 600;
  line-height: 1;
  place-items: center;
}
.compatibility-person-card { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 16px; padding: 18px; border: 1px solid #dfd1f5; border-radius: 8px; background: #fbf5fe; }
.compatibility-avatar, .counterpart-mini-avatar { display: grid; border: 1px solid #d8c5f4; border-radius: 50%; background: #f3d8ed; color: #e95f9f; place-items: center; }
.compatibility-avatar { width: 66px; height: 66px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.compatibility-avatar img { display: block; width: 72px; max-width: none; height: auto; image-rendering: pixelated; }
.compatibility-person-copy { display: grid; min-width: 0; gap: 3px; }
.compatibility-person-copy > span, .compatibility-section-header > div > span, .compatibility-empty > div > span { color: #9a70df; font-size: var(--type-small); font-weight: 600; }
.compatibility-person-copy strong { min-width: 0; color: var(--tamami-title, #4c30af); font-size: var(--type-section-title); overflow-wrap: anywhere; word-break: keep-all; }
.compatibility-person-copy__day-pillar { color: var(--tamami-emphasis, #7762bc); font-size: var(--type-body); font-weight: 400; white-space: nowrap; }
.compatibility-person-copy p { margin: 0; color: #907ba9; font-size: var(--type-small); }
.compatibility-person-control { display: grid; min-width: 0; max-width: 100%; grid-column: 1 / -1; gap: 6px; margin: 0; padding: 0; border: 0; }
.compatibility-person-control legend { padding: 0; color: #806d99; font-size: var(--type-label); font-weight: 600; }
.compatibility-person-options { display: grid; min-width: 0; grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); gap: 8px; padding: 6px; }
.compatibility-person-option,
.compatibility-person-add {
  border: 14px solid transparent;
  border-image-source: var(--compatibility-person-control-frame);
  border-image-slice: 14 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  background-clip: border-box;
  background-origin: border-box;
  box-shadow: none;
  clip-path: none;
  image-rendering: pixelated;
}
.compatibility-person-option {
  --compatibility-person-control-frame: url("/images/pixel_frame_input.svg?v=1");
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 82px;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  padding: 0;
}
.compatibility-person-option:hover,
.compatibility-person-option:has(input:checked) {
  --compatibility-person-control-frame: url("/images/pixel_frame_signup_choice_selected.svg?v=1");
}
.compatibility-person-option:has(input:focus-visible),
.compatibility-person-add:focus-visible,
.compatibility-person-action:focus-visible { outline: 3px solid var(--ui-focus, #5a43bc); outline-offset: 0; }
.compatibility-person-option-label { display: grid; min-width: 0; height: 100%; align-content: center; padding: 0 8px; color: #6845b5; cursor: pointer; }
.compatibility-person-option-label input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.compatibility-person-option-copy { display: grid; min-width: 0; gap: 2px; }
.compatibility-person-option-copy strong { min-width: 0; color: #5632ad; font-size: var(--type-small); line-height: 1.35; overflow-wrap: anywhere; }
.compatibility-person-option-copy small { overflow: hidden; padding-right: 58px; color: #8e79a7; font-size: var(--type-label); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.compatibility-person-actions { position: absolute; top: -7px; right: -7px; display: flex; align-items: center; gap: 0; }
.compatibility-person-delete-form { display: grid; margin: 0; place-items: center; }
.compatibility-person-action {
  appearance: none;
  box-sizing: border-box;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  text-decoration: none;
  transform: none;
}
.compatibility-person-action-surface {
  --compatibility-person-action-frame: url("/images/pixel_badge_counterpart_delete.svg?v=2");
  --compatibility-person-action-slice: 5;

  box-sizing: border-box;
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: calc(var(--compatibility-person-action-slice) * 1px) solid transparent;
  border-image-source: var(--compatibility-person-action-frame);
  border-image-slice: var(--compatibility-person-action-slice) fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  background-clip: border-box;
  background-origin: border-box;
  box-shadow: none;
  clip-path: none;
  color: #a94670;
  image-rendering: pixelated;
  transform: none;
}
.compatibility-person-edit-link .compatibility-person-action-surface {
  --compatibility-person-action-frame: url("/images/pixel_badge_counterpart_edit.svg?v=1");
  color: #6845b5;
}
.compatibility-person-action-surface > i { display: block; font-size: var(--type-label); font-style: normal; font-weight: 600; line-height: 1; transform: none; }
.compatibility-person-edit-link svg { width: 10px; height: 10px; stroke-width: 2.4; }
.compatibility-person-delete-button .compatibility-person-action-surface > i { position: relative; top: -1px; }
.compatibility-person-action:hover .compatibility-person-action-surface { filter: brightness(.97) saturate(1.04); }
.compatibility-person-action:active { transform: translateY(1px); }
.compatibility-person-add {
  --compatibility-person-control-frame: url("/images/pixel_frame_input.svg?v=1");
  display: grid;
  min-width: 0;
  height: 82px;
  align-content: center;
  justify-items: center;
  gap: 2px;
  color: #6845b5;
  text-decoration: none;
}
.compatibility-person-add:hover { --compatibility-person-control-frame: url("/images/pixel_frame_signup_choice_selected.svg?v=1"); }
.compatibility-person-add > span { font-size: var(--type-section-title); line-height: 1; }
.compatibility-person-add strong { font-size: var(--type-label); }
.compatibility-reports, .saved-counterparts { margin-top: 28px; }
.compatibility-section-header { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 14px; padding: 0 3px; }
.compatibility-section-header h2 { margin: 3px 0 0; color: #5632ad; font-size: var(--type-section-title); }
.compatibility-section-header p { margin: 5px 0 0; color: #907ba9; font-size: var(--type-small); }
.compatibility-report-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.compatibility-report-card { position: relative; display: grid; min-width: 0; min-height: 188px; align-content: space-between; gap: 16px; padding: 18px; overflow: hidden; border: 1px solid #dfd1f5; border-radius: 8px; background: #fbf5fe; }
.compatibility-report-card::before { position: absolute; top: -22px; right: -20px; width: 72px; height: 72px; border-radius: 50%; background: #f0e5fb; content: ""; }
.compatibility-report-card > i { position: relative; display: grid; width: 38px; height: 38px; border-radius: 7px; background: #f3d8ed; color: #e95f9f; font-size: var(--type-section-title-lg); font-style: normal; place-items: center; }
.compatibility-report-card.report-tone-2 > i { background: #e6ddfa; color: #8060ce; }
.compatibility-report-card.report-tone-3 > i { background: #fff0cc; color: #e8a43e; }
.compatibility-report-card h3 { margin: 0; color: #5632ad; font-size: var(--type-card-title); }
.compatibility-report-card p { margin: 7px 0 0; color: #806d99; font-size: var(--type-small); line-height: 1.55; }
.compatibility-report-card form { margin: 0; }
.compatibility-generate-button, .compatibility-primary-link { display: grid; width: 100%; min-height: 40px; border: 0; border-radius: 6px; background: #8d61dc; color: #ffffff; font-size: var(--type-body); font-weight: 600; text-decoration: none; cursor: pointer; place-items: center; }
.compatibility-generate-button:hover, .compatibility-primary-link:hover { background: #744ac2; }
.compatibility-report-card.report-tone-1 .compatibility-generate-button { background: #d95897; }
.compatibility-report-card.report-tone-3 .compatibility-generate-button { background: #d38b32; }
.compatibility-report-card.is-report-generating > i,
.compatibility-report-card.is-report-generating > div:not(.report-card-status) { opacity: .78; }
.compatibility-reports.is-preview .compatibility-report-card { min-height: 142px; opacity: 0.7; }
.compatibility-empty { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 24px; padding: 26px; border: 1px solid #dfd1f5; border-radius: 8px; background: #fbf5fe; }
.compatibility-empty-art { display: grid; width: 132px; height: 112px; place-items: center; }
.compatibility-empty-art img { display: block; width: 140px; max-width: none; height: auto; image-rendering: pixelated; }
.compatibility-empty-copy { min-width: 0; }
.compatibility-empty h2 { margin: 5px 0 8px; color: #5632ad; font-size: var(--type-section-title-lg); }
.compatibility-empty p { margin: 0 0 16px; color: #806d99; font-size: var(--type-body); line-height: 1.65; }
.compatibility-empty .compatibility-primary-link {
  --compatibility-empty-action-frame: url("/images/pixel_frame_settings_primary.svg?v=1");

  box-sizing: border-box;
  width: min(240px, 100%);
  height: 54px;
  min-height: 54px;
  padding: 0 12px;
  border: 14px solid transparent;
  border-image-source: var(--compatibility-empty-action-frame);
  border-image-slice: 14 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  background-clip: border-box;
  background-origin: border-box;
  box-shadow: none;
  clip-path: none;
  text-align: center;
  white-space: nowrap;
  image-rendering: pixelated;
  transition: filter .15s ease, transform .15s ease;
}
.compatibility-empty .compatibility-primary-link:hover { background: transparent; filter: brightness(1.03); }
.compatibility-empty .compatibility-primary-link:active { filter: brightness(.96); transform: translateY(1px); }
.compatibility-empty .compatibility-primary-link:focus-visible { outline: 3px solid var(--ui-focus, #5a43bc); outline-offset: 2px; }
.compatibility-add-link { padding: 7px 0; color: #8d61dc; font-size: var(--type-small); font-weight: 600; text-decoration: none; white-space: nowrap; }
.counterpart-card-list { display: grid; gap: 8px; }
.counterpart-card { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 13px 15px; border: 1px solid #dfd1f5; border-radius: 8px; background: #fbf5fe; }
.counterpart-mini-avatar { width: 42px; height: 42px; font-size: var(--type-card-title); }
.counterpart-card h3 { margin: 0; color: #5632ad; font-size: var(--type-body-lg); }
.counterpart-card p { margin: 4px 0 0; color: #907ba9; font-size: var(--type-label); }
.counterpart-card .counterpart-actions { gap: 5px; }
.counterpart-edit-link, .counterpart-delete-button { padding: 7px 8px; border: 0; background: transparent; font-size: var(--type-label); font-weight: 600; text-decoration: none; cursor: pointer; }
.counterpart-edit-link { color: #7650c6; }
.counterpart-delete-button { color: #b49fc4; }
.counterpart-empty-small { margin: 0; padding: 24px; border: 1px dashed #d8c5f4; border-radius: 8px; color: #907ba9; font-size: var(--type-body); text-align: center; }
.faq-main { width: var(--page-content-width); margin: 0 auto; padding: 0 0 112px; }
.faq-hero { position: relative; display: grid; min-height: 190px; grid-template-columns: minmax(0, 1fr) 180px; align-items: center; gap: 20px; padding: 26px 28px; overflow: hidden; border: 1px solid #d8c5f4; border-radius: 8px; background: #e8d9fb; }
.faq-hero::before, .faq-hero::after { position: absolute; width: 10px; height: 10px; transform: rotate(45deg); background: #fff18a; content: ""; }
.faq-hero::before { top: 30px; left: 48%; }
.faq-hero::after { right: 24px; bottom: 24px; }
.faq-hero > div { position: relative; z-index: 1; }
.faq-hero p { margin: 0 0 6px; color: #8d61dc; font-size: var(--type-small); font-weight: 600; }
.faq-hero h1 { color: #4f2aa5; font-size: var(--type-page-title-lg); font-weight: 600; }
.faq-hero span { display: block; max-width: 330px; margin-top: 10px; color: #75608d; font-size: var(--type-body); line-height: 1.65; }
.faq-hero img { position: absolute; right: 16px; bottom: -18px; width: 170px; height: auto; image-rendering: pixelated; }
.faq-section { margin-top: 30px; }
.faq-section > header { margin-bottom: 12px; padding: 0 3px; }
.faq-section > header span { color: #9a70df; font-size: var(--type-label); font-weight: 600; }
.faq-section > header h2 { margin: 3px 0 0; color: #5632ad; font-size: var(--type-section-title); }
.faq-list { display: grid; gap: 8px; }
.faq-list details { border: 1px solid #dfd1f5; border-radius: 8px; background: #fbf5fe; }
.faq-list summary { position: relative; display: flex; min-height: 58px; align-items: center; padding: 13px 46px 13px 16px; color: #604d76; font-size: var(--type-body-lg); font-weight: 600; line-height: 1.5; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { position: absolute; right: 16px; color: #9a70df; font-size: var(--type-section-title-lg); font-weight: 400; content: "+"; }
.faq-list details[open] summary { color: #5632ad; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list details p { margin: 0 16px 16px; padding-top: 14px; border-top: 1px solid #eadff6; color: #756487; font-size: var(--type-body); line-height: 1.75; }
.faq-help { display: grid; grid-template-columns: 82px minmax(0, 1fr); align-items: center; gap: 16px; margin-top: 30px; padding: 18px 22px; border: 1px solid #dfd1f5; border-radius: 8px; background: #f2e8fa; }
.faq-help img { width: 78px; height: auto; image-rendering: pixelated; }
.faq-help strong { color: #5632ad; font-size: var(--type-body-lg); }
.faq-help p { margin: 5px 0 0; color: #806d99; font-size: var(--type-small); line-height: 1.6; }
.faq-help-link { display: inline-flex; margin-top: 7px; color: #7043c6; font-size: var(--type-small); font-weight: 700; text-underline-offset: 3px; }
.wallet-main {
  --wallet-offer-title: #4c30af;
  --wallet-offer-heading: #5a43bc;
  --wallet-offer-text: #6b667a;
  --wallet-offer-divider: #dfd1fa;
  --wallet-offer-note: #f8f3fe;
  --wallet-frame-clip: polygon(
    14px 0, calc(100% - 14px) 0,
    calc(100% - 14px) 2px, calc(100% - 10px) 2px,
    calc(100% - 10px) 4px, calc(100% - 6px) 4px,
    calc(100% - 6px) 6px, calc(100% - 4px) 6px,
    calc(100% - 4px) 10px, calc(100% - 2px) 10px,
    calc(100% - 2px) 14px, 100% 14px,
    100% calc(100% - 14px), calc(100% - 2px) calc(100% - 14px),
    calc(100% - 2px) calc(100% - 10px), calc(100% - 4px) calc(100% - 10px),
    calc(100% - 4px) calc(100% - 6px), calc(100% - 6px) calc(100% - 6px),
    calc(100% - 6px) calc(100% - 4px), calc(100% - 10px) calc(100% - 4px),
    calc(100% - 10px) calc(100% - 2px), calc(100% - 14px) calc(100% - 2px),
    calc(100% - 14px) 100%, 14px 100%,
    14px calc(100% - 2px), 10px calc(100% - 2px),
    10px calc(100% - 4px), 6px calc(100% - 4px),
    6px calc(100% - 6px), 4px calc(100% - 6px),
    4px calc(100% - 10px), 2px calc(100% - 10px),
    2px calc(100% - 14px), 0 calc(100% - 14px),
    0 14px, 2px 14px,
    2px 10px, 4px 10px,
    4px 6px, 6px 6px,
    6px 4px, 10px 4px,
    10px 2px, 14px 2px
  );
  --wallet-frame-inner-clip: polygon(
    12px 0, calc(100% - 12px) 0,
    calc(100% - 12px) 2px, calc(100% - 8px) 2px,
    calc(100% - 8px) 4px, calc(100% - 4px) 4px,
    calc(100% - 4px) 8px, calc(100% - 2px) 8px,
    calc(100% - 2px) 12px, 100% 12px,
    100% calc(100% - 12px), calc(100% - 2px) calc(100% - 12px),
    calc(100% - 2px) calc(100% - 8px), calc(100% - 4px) calc(100% - 8px),
    calc(100% - 4px) calc(100% - 4px), calc(100% - 8px) calc(100% - 4px),
    calc(100% - 8px) calc(100% - 2px), calc(100% - 12px) calc(100% - 2px),
    calc(100% - 12px) 100%, 12px 100%,
    12px calc(100% - 2px), 8px calc(100% - 2px),
    8px calc(100% - 4px), 4px calc(100% - 4px),
    4px calc(100% - 8px), 2px calc(100% - 8px),
    2px calc(100% - 12px), 0 calc(100% - 12px),
    0 12px, 2px 12px,
    2px 8px, 4px 8px,
    4px 4px, 8px 4px,
    8px 2px, 12px 2px
  );
  --wallet-control-clip: polygon(
    4px 0, calc(100% - 4px) 0,
    calc(100% - 4px) 2px, 100% 2px,
    100% calc(100% - 2px), calc(100% - 4px) calc(100% - 2px),
    calc(100% - 4px) 100%, 4px 100%,
    4px calc(100% - 2px), 0 calc(100% - 2px),
    0 2px, 4px 2px
  );
  width: var(--page-content-width);
  margin: 0 auto;
  padding: 0 0 112px;
}
.wallet-hero { position: relative; display: grid; min-height: 190px; grid-template-columns: minmax(0, 1fr) 178px; align-items: center; gap: 18px; padding: 27px 28px; overflow: hidden; border: 1px solid #d8c5f4; border-radius: 8px; background: #e8d9fb; }
.wallet-hero::before, .wallet-hero::after { position: absolute; width: 10px; height: 10px; transform: rotate(45deg); background: #fff18a; content: ""; }
.wallet-hero::before { top: 28px; left: 48%; }
.wallet-hero::after { right: 25px; bottom: 28px; }
.wallet-hero > div { position: relative; z-index: 1; }
.wallet-hero p { margin: 0 0 6px; color: #8d61dc; font-size: var(--type-small); font-weight: 600; }
.wallet-hero h1 { color: #4f2aa5; font-size: var(--type-page-title-lg); font-weight: 600; }
.wallet-hero span { display: block; max-width: 350px; margin-top: 10px; color: #75608d; font-size: var(--type-body); font-weight: 600; line-height: 1.65; }
.wallet-hero img { position: absolute; right: 7px; bottom: -66px; width: 178px; height: auto; image-rendering: pixelated; }
.wallet-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.wallet-provider-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid #d8c8f2;
  background: #f8f3ff;
  color: #5d4782;
  font-size: var(--type-small);
  line-height: 1.5;
}
.wallet-provider-notice > span { display: grid; gap: 2px; }
.wallet-provider-notice strong { color: #4c30af; font-size: var(--type-body); }
.wallet-provider-notice.is-portone { border-color: #ebc4d8; background: #fff5fa; }
.wallet-provider-notice.is-portone strong { color: #a83f78; }
.wallet-provider-switch {
  flex: none;
  min-height: 36px;
  padding: 8px 12px;
  background: #4c30af;
  color: #fff;
  font-size: var(--type-label);
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
}
.wallet-provider-notice.is-portone .wallet-provider-switch { background: #a83f78; }
.wallet-provider-switch:hover { color: #fff; filter: brightness(1.06); }
.wallet-provider-switch:focus-visible { outline: 3px solid #5a43bc; outline-offset: 3px; }
.wallet-summary > div {
  --wallet-card-accent: #7650c6;
  --wallet-card-border: #9573d2;
  --wallet-card-surface: #fbf5fe;
  position: relative;
  isolation: isolate;
  display: grid;
  min-width: 0;
  min-height: 82px;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 15px 17px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background-color: var(--wallet-card-surface);
  clip-path: var(--wallet-frame-clip);
  filter: drop-shadow(0 3px 0 rgb(92 55 139 / 12%));
}
.wallet-summary > div::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: var(--wallet-card-border);
  clip-path: var(--wallet-frame-clip);
  content: "";
  pointer-events: none;
}
.wallet-summary > div::after {
  position: absolute;
  z-index: 1;
  inset: 2px;
  background-color: var(--wallet-card-surface);
  background-image: none;
  box-shadow: inset 0 0 0 3px rgb(255 255 255 / 40%);
  clip-path: var(--wallet-frame-inner-clip);
  content: "";
  pointer-events: none;
}
.wallet-summary > div > * { position: relative; z-index: 2; }
.wallet-summary > div + div {
  --wallet-card-accent: #c84e8c;
  --wallet-card-border: #d58ab4;
  --wallet-card-surface: #fff4fa;
}
.wallet-summary__icon { display: block; width: 48px; height: auto; margin: 0 auto; image-rendering: pixelated; }
.wallet-summary__credit-icon { width: 33px; }
.wallet-summary span { display: grid; min-width: 0; gap: 3px; color: #71549f; font-size: var(--type-label); font-weight: 600; }
.wallet-summary strong { color: #5632ad; font-size: var(--type-section-title); }
.wallet-summary .wallet-summary__pass strong { font-size: var(--type-body-lg); line-height: 1.25; }
.wallet-section { margin-top: 30px; }
.wallet-checkout-customer { margin-top: 28px; padding: 22px; border: 1px solid #e1cef3; border-radius: 8px; background: #fbf5fe; }
.wallet-checkout-customer h2 { margin: 0 0 14px; color: #5734b5; font-size: var(--type-card-title); }
.wallet-checkout-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.wallet-checkout-fields label { display: grid; gap: 7px; color: #5f4e78; font-size: var(--type-body-lg); font-weight: 600; }
.wallet-checkout-fields input { width: 100%; min-height: 44px; border: 1px solid #dcc8f1; border-radius: 6px; background: #fffaff; color: #312343; padding: 0 12px; font: inherit; }
.wallet-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 12px; padding: 0 3px; }
.wallet-section-heading div { display: grid; gap: 2px; }
.wallet-section-heading span { color: #8f66d0; font-size: var(--type-label); font-weight: 600; letter-spacing: .09em; }
.wallet-section-heading h2 { display: flex; align-items: center; gap: 8px; margin: 0; color: #5632ad; font-size: var(--type-section-title); }
.wallet-section-heading h2::after {
  width: 6px;
  height: 6px;
  transform: rotate(45deg);
  background: #9a70df;
  content: "";
}
.wallet-section-heading p { max-width: 55%; margin: 0; color: #8a799f; font-size: var(--type-body); line-height: 1.45; text-align: right; }
.wallet-pass-guide {
  --wallet-guide-title: #5a43bc;
  --wallet-guide-text: #6b667a;
  --wallet-guide-border: #dfd1fa;
  --wallet-guide-divider: #f0e9fd;
  --wallet-guide-surface: #fff;

  scroll-margin-top: 88px;
}
.wallet-pass-guide .wallet-section-heading { display: grid; gap: 8px; }
.wallet-pass-guide .wallet-section-heading h2 { color: var(--wallet-guide-title); word-break: keep-all; }
.wallet-pass-guide .wallet-section-heading p {
  max-width: none;
  color: var(--wallet-guide-text);
  line-height: 1.75;
  text-align: left;
  word-break: keep-all;
}
.wallet-pass-guide__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 20px 18px;
  border: 1px solid var(--wallet-guide-border);
  background: var(--wallet-guide-surface);
  list-style: none;
}
.wallet-pass-guide__list li {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 10px;
  padding: 0 18px;
}
.wallet-pass-guide__list li:first-child { padding-left: 0; }
.wallet-pass-guide__list li:last-child { padding-right: 0; }
.wallet-pass-guide__list li + li { border-left: 1px solid var(--wallet-guide-divider); }
.wallet-pass-guide__icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
}
.wallet-pass-guide__icon img {
  display: block;
  max-width: 32px;
  max-height: 32px;
  object-fit: contain;
  image-rendering: pixelated;
}
.wallet-pass-guide__list div { display: grid; gap: 4px; }
.wallet-pass-guide__list strong {
  color: var(--wallet-guide-title);
  font-size: var(--type-body-lg);
  line-height: 1.45;
}
.wallet-pass-guide__list div > span {
  color: var(--wallet-guide-text);
  font-size: var(--type-small);
  line-height: 1.65;
  overflow-wrap: anywhere;
  word-break: keep-all;
}
.wallet-product-list { display: grid; gap: 10px; }
.wallet-pass-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wallet-credit-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wallet-product {
  --wallet-card-accent: #7650c6;
  --wallet-card-border: #8d6bd4;
  --wallet-card-surface: #f8f0fd;
  --wallet-button-background: #7650c6;
  position: relative;
  isolation: isolate;
  display: grid;
  min-width: 0;
  min-height: 224px;
  grid-template-rows: auto 1fr auto;
  gap: 14px;
  padding: 20px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background-color: var(--wallet-card-surface);
  clip-path: var(--wallet-frame-clip);
  filter: drop-shadow(0 3px 0 rgb(92 55 139 / 13%));
  transition: filter .16s ease, transform .16s ease;
}
.wallet-product::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: var(--wallet-card-border);
  clip-path: var(--wallet-frame-clip);
  content: "";
  pointer-events: none;
}
.wallet-product::after {
  position: absolute;
  z-index: 1;
  inset: 2px;
  background-color: var(--wallet-card-surface);
  background-image:
    linear-gradient(180deg, rgb(255 255 255 / 58%), rgb(255 255 255 / 8%)),
    url("/images/report_saju_background.png");
  background-position: center, center bottom;
  background-repeat: no-repeat;
  background-size: cover, auto 130%;
  box-shadow: inset 0 0 0 3px rgb(255 255 255 / 38%);
  clip-path: var(--wallet-frame-inner-clip);
  content: "";
  pointer-events: none;
}
.wallet-product-tone-2 {
  --wallet-card-accent: #c88a2e;
  --wallet-card-border: #d2a04f;
  --wallet-card-surface: #fff7e8;
  --wallet-button-background: #a96818;
}
.wallet-product-tone-3 {
  --wallet-card-accent: #ce528f;
  --wallet-card-border: #d57bad;
  --wallet-card-surface: #fff0f8;
  --wallet-button-background: #b5457e;
}
.wallet-credit-product--purple {
  --wallet-card-accent: #7650c6;
  --wallet-card-border: #9573d2;
  --wallet-card-surface: #f4e9ff;
}
.wallet-credit-product--sky {
  --wallet-card-accent: #5798c8;
  --wallet-card-border: #80add5;
  --wallet-card-surface: #eaf7ff;
}
.wallet-credit-product--pink {
  --wallet-card-accent: #ce528f;
  --wallet-card-border: #d57bad;
  --wallet-card-surface: #fff0f8;
}
.wallet-pass-product--monthly {
  --wallet-card-accent: #b85c91;
  --wallet-card-border: #d89dbc;
  --wallet-card-surface: #fff6e2;
}
.wallet-pass-product--quarterly {
  --wallet-card-accent: #7650c6;
  --wallet-card-border: #9573d2;
  --wallet-card-surface: #f3e9ff;
}
.wallet-product-icon {
  position: relative;
  z-index: 2;
  display: grid;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 0;
  background: color-mix(in srgb, var(--wallet-card-accent) 14%, white);
  box-shadow: inset 0 -5px 0 color-mix(in srgb, var(--wallet-card-accent) 12%, transparent);
  clip-path: var(--wallet-control-clip);
  color: var(--wallet-card-accent);
  font-size: var(--type-section-title-lg);
  font-style: normal;
  place-items: center;
}
.wallet-product-icon--ticket {
  display: block;
  width: 48px;
  height: auto;
  background: transparent;
  box-shadow: none;
  clip-path: none;
  image-rendering: pixelated;
}
.wallet-product-icon--credit {
  display: block;
  width: 35px;
  height: auto;
  background: transparent;
  box-shadow: none;
  clip-path: none;
  object-fit: contain;
  image-rendering: pixelated;
}
.wallet-product-copy, .wallet-row > div { position: relative; z-index: 2; display: grid; min-width: 0; align-content: start; gap: 5px; }
.wallet-product strong, .wallet-row strong { color: #5632ad; font-size: var(--type-body-lg); }
.wallet-product b { margin-top: 5px; color: color-mix(in srgb, var(--wallet-card-accent) 86%, #3d225f); font-size: var(--type-section-title); }
.wallet-product b small { color: #9b8baa; font-size: var(--type-label); font-weight: 600; }
.wallet-product span, .wallet-row span, .wallet-policy, .empty-state { color: #71549f; font-size: var(--type-small); line-height: 1.55; }
.wallet-product .wallet-credit-composition {
  color: #5a43bc;
  font-weight: 600;
}
.wallet-credit-composition em {
  color: #4c30af;
  font-style: normal;
}
.wallet-product .wallet-pass-deal { color: #6b5592; font-weight: 600; }
.wallet-pass-deal s { color: #a597b6; font-weight: 500; }
.wallet-pass-deal em {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #ffe4f1;
  color: #c2367c;
  font-size: var(--type-label);
  font-style: normal;
  font-weight: 700;
}
/* 좁은 모바일 카드에서도 깨지지 않도록 칩 대신 짧은 목록으로 보여준다. */
.wallet-pass-deal__price { white-space: nowrap; }
.wallet-pass-perks { display: grid; gap: 1px; margin: 2px 0 0; padding: 0; list-style: none; }
.wallet-pass-perks li {
  position: relative;
  padding-left: 13px;
  color: #6a4fa4;
  font-size: var(--type-label);
  font-weight: 600;
  line-height: 1.5;
  word-break: keep-all;
}
.wallet-pass-perks li::before {
  content: "✦";
  position: absolute;
  left: 0;
  color: #b48ae6;
  font-size: 9px;
  line-height: 1.9;
}
.wallet-pass-product__header {
  position: relative;
  z-index: 2;
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 14px;
}
.wallet-pass-product__header img { flex: 0 0 auto; }
.wallet-pass-offer { display: grid; min-width: 0; gap: 3px; margin: 0; word-break: keep-all; }
.wallet-pass-offer span { color: var(--wallet-offer-heading); font-size: var(--type-body-lg); line-height: 1.4; }
.wallet-pass-offer strong { color: var(--wallet-offer-title); font-size: var(--type-section-title-lg); line-height: 1.3; }
.wallet-pass-product .wallet-pass-product__name { color: var(--wallet-offer-text); font-size: var(--type-small); }
.wallet-pass-delivery {
  margin: 6px 0;
  color: var(--wallet-offer-text);
  font-size: var(--type-body);
  line-height: 1.75;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.wallet-pass-product .wallet-pass-perks { gap: 6px; }
.wallet-pass-product .wallet-pass-perks li { padding: 0; color: var(--wallet-offer-heading); font-size: var(--type-small); line-height: 1.65; }
.wallet-pass-product .wallet-pass-perks li::before { content: none; }
.wallet-pass-product .wallet-pass-deal {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--wallet-offer-divider);
  color: var(--wallet-offer-text);
  font-weight: 400;
  word-break: keep-all;
}
.wallet-pass-terms {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding: 16px 18px;
  background: var(--wallet-offer-note);
  color: var(--wallet-offer-text);
  font-size: var(--type-small);
  line-height: 1.75;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.wallet-pass-terms p { margin: 0; }
#owned-passes, #pass-products { scroll-margin-top: 88px; }
.wallet-product form { position: relative; z-index: 2; width: 100%; margin: 0; }
.wallet-product > .wallet-purchase-button,
.wallet-product > .pending-label { position: relative; z-index: 2; }
.wallet-purchase-button {
  appearance: none;
  display: grid;
  width: 100%;
  font: inherit;
  font-size: var(--type-small);
  font-weight: 600;
  cursor: pointer;
  place-items: center;
}
.wallet-policy { margin: 14px 3px 0; padding-top: 11px; border-top: 2px dotted rgb(141 97 220 / 34%); }
.wallet-access-note {
  margin: 0 0 10px;
  padding: 11px 14px;
  border: 0;
  border-radius: 0;
  background: #f2e8fa;
  box-shadow: inset 4px 0 0 #9a70df;
  clip-path: var(--wallet-control-clip);
  color: #7457ad;
  font-size: var(--type-small);
  font-weight: 600;
}
.wallet-history-section {
  --wallet-card-accent: #7650c6;
  --wallet-card-border: #9977d5;
  --wallet-card-surface: #faf3fe;
  position: relative;
  isolation: isolate;
  padding: 22px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background-color: var(--wallet-card-surface);
  clip-path: var(--wallet-frame-clip);
  filter: drop-shadow(0 3px 0 rgb(92 55 139 / 10%));
}
.wallet-history-section::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: var(--wallet-card-border);
  clip-path: var(--wallet-frame-clip);
  content: "";
  pointer-events: none;
}
.wallet-history-section::after {
  position: absolute;
  z-index: 1;
  inset: 2px;
  background-color: var(--wallet-card-surface);
  background-image: none;
  box-shadow: inset 0 0 0 3px rgb(255 255 255 / 36%);
  clip-path: var(--wallet-frame-inner-clip);
  content: "";
  pointer-events: none;
}
.wallet-history-section > * { position: relative; z-index: 2; }
.wallet-history-credits {
  --wallet-card-accent: #bd568c;
  --wallet-card-border: #cd8db3;
  --wallet-card-surface: #fff5fb;
}
.wallet-credit-guide {
  --wallet-card-accent: #5a43bc;
  --wallet-card-border: #dfd1fa;
  --wallet-card-surface: #fff;

  scroll-margin-top: 88px;
}
.wallet-credit-guide .wallet-row { align-items: flex-start; padding: 16px 0; }
.wallet-credit-guide .wallet-row > div { flex: 1 1 auto; }
.wallet-history-section .wallet-section-heading {
  margin-bottom: 0;
  padding: 0 0 14px;
  border-bottom: 2px dotted color-mix(in srgb, var(--wallet-card-accent) 38%, transparent);
}
.wallet-history-pass .wallet-section-heading,
.wallet-history-credits .wallet-section-heading { border-bottom-style: solid; }
.wallet-history-heading { justify-content: flex-start; gap: 10px; }
.wallet-history-heading__icon {
  display: block;
  width: 36px;
  height: auto;
  flex: 0 0 auto;
  image-rendering: pixelated;
}
.wallet-history-heading__icon--credits { width: 44px; }
.wallet-row {
  display: flex;
  min-height: 70px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-top: 2px dotted color-mix(in srgb, var(--wallet-card-accent) 26%, transparent);
}
.wallet-section-heading + .wallet-row { border-top: 0; }
.wallet-row form { flex: none; margin: 0; }
.wallet-row .primary-button, .wallet-row .secondary-button { min-height: 38px; padding: 0 14px; border: 0; border-radius: 0; clip-path: var(--wallet-control-clip); font-size: var(--type-small); }
.wallet-row .secondary-button { background: #eee3fa; box-shadow: 0 3px 0 #cab8e1; color: #6842b5; }
.wallet-pass-row { padding: 16px 0; }
.wallet-pass-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wallet-pass-status {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 2px 9px;
  border: 0;
  border-radius: 0;
  background: #eee3fa;
  clip-path: var(--wallet-control-clip);
  color: #7650c6;
  font-size: var(--type-label);
  font-weight: 600;
}
.wallet-pass-activation {
  display: grid;
  width: min(52%, 520px);
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 13px 14px;
  border: 0;
  border-radius: 0;
  background: #f5edfb;
  box-shadow: inset 4px 0 0 #bda3e3;
  clip-path: var(--wallet-control-clip);
}
.wallet-pass-activation-copy { display: grid; min-width: 0; gap: 2px; }
.wallet-pass-activation-copy strong { color: #6040a5; font-size: var(--type-small); }
.wallet-pass-activation-copy span { color: #71549f; font-size: var(--type-label); line-height: 1.45; word-break: keep-all; }
.wallet-activation-button {
  --wallet-activation-frame: url("/images/pixel_frame_support_primary.svg?v=1");

  appearance: none;
  box-sizing: border-box;
  min-height: 54px;
  padding: 0 12px;
  border: 14px solid transparent;
  border-image-source: var(--wallet-activation-frame);
  border-image-slice: 14 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  background-clip: border-box;
  background-origin: border-box;
  box-shadow: none;
  clip-path: none;
  color: #fff;
  font: inherit;
  font-size: var(--type-small);
  font-weight: 600;
  text-align: center;
  text-shadow: 1px 1px 0 rgb(73 26 144 / 40%);
  white-space: nowrap;
  image-rendering: pixelated;
  cursor: pointer;
  transform: none;
  transition: filter .15s ease, transform .15s ease;
}
.wallet-activation-button:hover { filter: brightness(1.03); }
.wallet-activation-button:active { filter: brightness(.96); transform: translateY(1px); }
.wallet-activation-button:focus-visible { outline: 3px solid #5a43bc; outline-offset: 3px; }
.wallet-history-section .empty-state { margin: 0; padding: 18px 0 4px; border-top: 0; }
.pending-label { position: relative; z-index: 2; display: grid; min-height: 40px; border-radius: 0; background: #eee7f6; clip-path: var(--wallet-control-clip); color: #8a799f; font-size: var(--type-small); font-weight: 600; place-items: center; }
.wallet-main button:disabled, .wallet-main input[type="submit"]:disabled { cursor: not-allowed; opacity: .45; }
.wallet-main .wallet-purchase-button:disabled { filter: grayscale(.18); opacity: .5; transform: none; }

@media (max-width: 639px) {
  .wallet-provider-notice { align-items: stretch; flex-direction: column; }
  .wallet-provider-switch { display: grid; width: 100%; text-align: center; place-items: center; }
  .wallet-hero { min-height: 168px; grid-template-columns: minmax(0, 1fr) 100px; padding: 22px 18px; }
  .wallet-hero h1 { font-size: var(--type-page-title); }
  .wallet-hero span { max-width: 215px; font-size: var(--type-small); }
  .wallet-hero img { right: 0; bottom: -36px; width: 122px; }
  .wallet-summary { gap: 8px; }
  .wallet-summary > div { min-height: 72px; grid-template-columns: 64px minmax(0, 1fr); gap: 9px; padding: 12px; }
  .wallet-summary__icon { width: 43px; }
  .wallet-summary__credit-icon { width: 29px; }
  .wallet-summary strong { font-size: var(--type-card-title); }
  .wallet-checkout-fields { grid-template-columns: 1fr; }
  .wallet-checkout-customer { padding: 18px 16px; }
  .wallet-section-heading { display: grid; }
  .wallet-section-heading p { max-width: none; text-align: left; }
  .wallet-pass-guide__list { grid-template-columns: 1fr; padding: 16px; }
  .wallet-pass-guide__list li {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    padding: 14px 0;
  }
  .wallet-pass-guide__list li:first-child { padding-top: 0; }
  .wallet-pass-guide__list li:last-child { padding-bottom: 0; }
  .wallet-pass-guide__list li + li { border-top: 1px solid var(--wallet-guide-divider); border-left: 0; }
  .wallet-pass-products, .wallet-credit-products { grid-template-columns: 1fr; }
  .wallet-product { min-height: 112px; grid-template: auto / 64px minmax(0, 1fr) 86px; align-items: center; gap: 11px; padding: 14px; }
  .wallet-product-icon { width: 38px; height: 38px; }
  .wallet-product-icon--ticket { width: 43px; height: auto; }
  .wallet-product-icon--credit { width: 32px; height: auto; }
  .wallet-product b { margin-top: 2px; font-size: var(--type-card-title); }
  .wallet-product form { width: auto; }
  .wallet-pass-product { grid-template: auto 1fr auto / minmax(0, 1fr); align-items: start; gap: 14px; }
  .wallet-pass-product > form,
  .wallet-pass-product > .wallet-purchase-button,
  .wallet-pass-product > .pending-label { grid-column: 1 / -1; width: 100%; }
  .pending-label { min-height: 38px; }
  .wallet-history-section { padding: 17px 16px; }
  .wallet-history-heading { display: flex; }
  .wallet-history-heading__icon { width: 33px; }
  .wallet-row { gap: 10px; }
  .wallet-credit-guide .wallet-row { align-items: stretch; flex-direction: column; }
  .wallet-row .primary-button, .wallet-row .secondary-button { padding-right: 12px; padding-left: 12px; }
  .wallet-pass-row { align-items: stretch; flex-direction: column; gap: 14px; }
  .wallet-pass-activation { width: 100%; gap: 12px; }
}
.settings-main { width: var(--page-content-width); margin: 0 auto; padding: 0 0 112px; }
.settings-hero { position: relative; display: grid; min-height: 190px; grid-template-columns: minmax(0, 1fr) 178px; align-items: center; gap: 18px; padding: 27px 28px; overflow: hidden; border: 1px solid #d8c5f4; border-radius: 8px; background: #e8d9fb; }
.settings-hero::before, .settings-hero::after { position: absolute; width: 10px; height: 10px; transform: rotate(45deg); background: #fff18a; content: ""; }
.settings-hero::before { top: 28px; left: 48%; }
.settings-hero::after { right: 25px; bottom: 28px; }
.settings-hero-copy { position: relative; z-index: 1; }
.settings-hero-copy p { margin: 0 0 6px; color: #8d61dc; font-size: var(--type-small); font-weight: 600; }
.settings-hero-copy h1 { color: #4f2aa5; font-size: var(--type-page-title-lg); font-weight: 600; }
.settings-hero-copy span { display: block; max-width: 340px; margin-top: 10px; color: #75608d; font-size: var(--type-body); font-weight: 600; line-height: 1.65; }
.settings-hero img { position: absolute; right: 7px; bottom: -66px; width: 178px; height: auto; image-rendering: pixelated; }
.settings-notice, .settings-success { margin: 12px 0 0; padding: 13px 15px; border-radius: 8px; font-size: var(--type-body); font-weight: 600; }
.settings-notice { border: 1px solid #efbfd2; background: #fff3f8; }
.settings-success { border: 1px solid #b8dfcf; background: #f2fbf7; color: #368668; }
.settings-account-card, .settings-section, .danger-zone { margin-top: 12px; padding: 20px; border: 1px solid #dfd1f5; border-radius: 8px; background: #fbf5fe; }
.settings-card-header { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.settings-avatar { display: grid; width: 50px; height: 50px; overflow: visible; border: 0; border-radius: 0; background: transparent; place-items: center; }
.settings-avatar img { display: block; width: 100%; height: auto; margin: 0; image-rendering: pixelated; }
.settings-card-header p, .settings-section-header p { margin: 0 0 3px; color: #9a70df; font-size: var(--type-label); font-weight: 600; }
.settings-card-header h2 { min-width: 0; margin: 0; overflow: hidden; color: #5031a4; font-size: var(--type-subtitle); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.settings-status {
  --settings-status-frame-image: url("/images/pixel_badge_settings_active.svg?v=4");
  --settings-status-frame-slice: 4;

  display: inline-flex;
  box-sizing: border-box;
  width: 72px;
  min-height: 24px;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: calc(var(--settings-status-frame-slice) * 1px) solid transparent;
  border-image-source: var(--settings-status-frame-image);
  border-image-slice: var(--settings-status-frame-slice) fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  clip-path: none;
  color: #7650c6;
  font-size: var(--type-caption);
  font-weight: 600;
  line-height: 16px;
  white-space: nowrap;
  image-rendering: pixelated;
  transform: none;
}
.settings-summary-list { display: grid; margin: 18px 0 0; border-top: 1px solid #eadff6; }
.settings-summary-list > div { display: flex; min-height: 46px; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid #eadff6; }
.settings-summary-list dt { color: #8b7aa3; font-size: var(--type-small); font-weight: 600; }
.settings-summary-list dd { display: flex; align-items: center; gap: 6px; margin: 0; color: #584071; font-size: var(--type-small); font-weight: 600; text-align: right; }
.settings-summary-list .settings-together-row { min-height: 52px; }
.settings-summary-list .settings-together-days { gap: 0; }
.settings-together-days strong { color: #4c30af; font-size: var(--type-body-lg); line-height: 1; }
.settings-dot { width: 7px; height: 7px; border-radius: 50%; background: #d5c8e7; }
.settings-dot.is-ready { background: #65bd83; }
.settings-profile-link {
  --settings-control-frame-image: url("/images/pixel_frame_settings_primary.svg?v=1");

  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
  font-size: var(--type-body);
  font-weight: 600;
  text-decoration: none;
  transition: filter .15s ease, transform .15s ease;
}
.settings-profile-link::after { margin-left: 5px; content: "›"; }
.settings-profile-link:hover { filter: brightness(.98) saturate(1.04); }
.settings-profile-link:active { filter: brightness(.96); transform: translateY(1px); }
.settings-profile-link:focus-visible { outline: 3px solid var(--ui-focus, #5a43bc); outline-offset: 2px; }
.settings-section-header { display: flex; align-items: center; gap: 11px; }
.settings-disclosure > summary { min-height: 44px; cursor: pointer; list-style: none; }
.settings-disclosure > summary::-webkit-details-marker { display: none; }
.settings-disclosure > summary:focus-visible { outline: 3px solid var(--ui-focus, #5a43bc); outline-offset: 4px; }
.settings-disclosure-chevron { width: 18px; height: 18px; flex: 0 0 auto; margin-left: auto; color: var(--ui-focus, #5a43bc); }
.settings-disclosure[open] > summary .settings-disclosure-chevron { transform: rotate(180deg); }
.settings-section-icon { display: grid; width: 36px; height: 36px; flex: 0 0 auto; border: 1px solid #d8c5f4; border-radius: 7px; background: #f1e6fc; color: #7a55ca; font-size: var(--type-card-title); font-weight: 600; place-items: center; }
.settings-section-icon .lucide { width: 18px; height: 18px; }
.settings-section-icon.danger { border-color: #efc9d8; background: #fff0f6; color: #c45d87; }
.settings-section-header h2 { margin: 0; color: #5031a4; font-size: var(--type-card-title); font-weight: 600; }
.settings-description { margin: 14px 0 0; color: #806d99; font-size: var(--type-small); font-weight: 600; line-height: 1.65; }
.settings-password-form, .settings-deletion-form { display: grid; max-width: none; gap: 12px; margin-top: 18px; }
.settings-input-field { display: grid; gap: 7px; }
.settings-input-field > span { color: #624b83; font-size: var(--type-small); font-weight: 600; }
.settings-input-field input { width: 100%; height: 44px; padding: 0 13px; border: 1px solid #d8c8ed; border-radius: 7px; outline: 0; background: #fffafd; color: #382750; font-size: var(--type-body); }
.settings-input-field input::placeholder { color: #b4a5c5; }
.settings-input-field input:focus { border-color: #936bd3; box-shadow: 0 0 0 2px rgba(141, 97, 220, .12); }
.settings-field-help { margin: -2px 0 0; color: #9a8aaa; font-size: var(--type-label); line-height: 1.5; }
.settings-submit-button { min-height: 45px; margin-top: 2px; border: 0; border-radius: 7px; background: #835adc; color: #fff; font-size: var(--type-body); font-weight: 600; cursor: pointer; }
.settings-submit-button:hover { background: #7048ca; }
.settings-provider-notice { display: grid; min-height: 88px; grid-template-columns: minmax(0, 1fr); align-items: center; margin-top: 16px; padding: 12px 16px; border-radius: 7px; background: #f2e8fa; }
.settings-provider-notice p { margin: 0; color: #755f8e; font-size: var(--type-small); font-weight: 600; line-height: 1.65; }
.danger-zone > p { margin: 14px 0 0; color: #806d99; font-size: var(--type-small); font-weight: 600; line-height: 1.7; }
.settings-main .settings-deletion-status {
  padding: 14px 16px;
  border-radius: 7px;
  background: #f4ebfb;
  color: #70588a !important;
  font-size: var(--type-label) !important;
  line-height: 1.8;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.settings-deletion-form .settings-deletion-status { margin: 0; }
.danger-zone .danger-button { min-height: 43px; border: 1px solid #e8b8cb; background: #fff3f8; color: #b84f79; font-size: var(--type-small); }
.danger-zone .danger-button:hover { background: #fce6ef; }
@media (min-width: 640px) and (max-width: 899px) {
  .settings-password-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-password-form .settings-input-field:first-of-type,
  .settings-password-form .settings-field-help,
  .settings-password-form .settings-submit-button { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  .settings-password-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .settings-password-form .settings-field-help,
  .settings-password-form .settings-submit-button { grid-column: 1 / -1; }
}
@media (max-width: 639px) {
  .settings-main { padding-top: 16px; }
  .settings-hero { min-height: 172px; grid-template-columns: minmax(0, 1fr) 108px; padding: 22px 18px; }
  .settings-hero-copy h1 { font-size: var(--type-page-title); }
  .settings-hero-copy span { max-width: 190px; font-size: var(--type-small); }
  .settings-hero img { right: -5px; bottom: -45px; width: 136px; }
  .settings-account-card, .settings-section, .danger-zone { padding: 17px 16px; }
  .settings-card-header { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; }
  .settings-avatar { width: 44px; height: 44px; }
  .settings-card-header h2 { font-size: var(--type-body-lg); }
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.danger-button { min-height: 52px; padding: 0 22px; border: 0; border-radius: 8px; background: #e42939; color: #ffffff; font-weight: 600; cursor: pointer; }
.operations-main { width: var(--page-content-width); margin: 0 auto; padding: 48px 0 96px; }
.operations-section { margin-top: 48px; padding-top: 28px; border-top: 1px solid #e5e8eb; }
.operations-section h3 { margin: 24px 0 8px; font-size: var(--type-card-title); }
.operations-table-wrap { max-width: 100%; overflow-x: auto; border-block: 1px solid #e5e8eb; }
.operations-table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: var(--type-body-lg); }
.operations-table th, .operations-table td { padding: 13px 12px; border-bottom: 1px solid #e5e8eb; text-align: left; white-space: nowrap; }
.operations-table th { color: #8b95a1; font-weight: 600; }
.operations-table td { color: #4e5968; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid #90c2ff; outline-offset: 3px; }
/* Static dialog content and announcements receive focus without looking selected. */
[tabindex="-1"]:not(:where(a[href], button, input, select, textarea, summary, [role="button"], [contenteditable])):focus {
  outline: none;
}

@media (max-width: 639px) {
  html { scroll-padding-bottom: 96px; }
  body:has(.member-navigation) .viewport-frame { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  body:has(.app-header) .viewport-frame { padding-top: 62px; }
  body:has(.impersonation-banner) .viewport-frame { padding-top: 108px; }
  body:has(.impersonation-banner) .app-header { top: 53px; }
  body:has(.impersonation-banner) .app-toast-region { top: 116px; }
  .impersonation-banner { min-height: 46px; justify-content: space-between; gap: 8px; padding: 6px 10px; font-size: var(--type-caption); }
  .impersonation-banner__exit { min-height: 28px; padding-inline: 8px; font-size: var(--type-caption); }
  .app-header { top: 7px; height: 58px; padding: 0; }
  .app-header::before { top: -7px; bottom: -7px; left: -16px; width: calc(100% + 32px); }
  .app-logo .brand-logo-image { height: 44px; }
  .app-header-actions { gap: 4px; }
  .header-credit-balance { width: 56px; min-width: 56px; padding-inline: 2px; gap: 2px; }
  .header-credit-balance > img { width: 18px; height: 18px; flex-basis: 18px; }
  .header-tamabuddy-link { width: 78px; height: 34px; }
  .header-tamabuddy-hint { right: 32px; }
  .header-tamabuddy-hint::before { right: 42px; }
  .header-icon-button { width: 38px; height: 38px; }
  .header-popup { top: -7px; right: auto; left: -16px; width: calc(100% + 32px); border-width: 0 0 1px; }
  .member-navigation { bottom: calc(8px + env(safe-area-inset-bottom, 0px)); height: 70px; grid-template-columns: repeat(2, minmax(0, 1fr)) 64px repeat(2, minmax(0, 1fr)); padding: 5px; }
  .member-navigation a { min-height: 56px; padding: 0; border-radius: 5px; font-size: var(--type-label); }
  .member-navigation a.nav-centerpiece { width: 64px; min-width: 64px; max-width: 64px; height: 64px; min-height: 64px; margin: -14px 0 0; border-width: 2px; }
  .check-row, .consent-row, .input-field, button { scroll-margin-bottom: 96px; }
  .top-bar, .page-header { height: 56px; }
  .fortune-entry { padding-top: 64px; }
  .guest-entry { min-height: 0; padding: 28px 0 54px; }
  .guest-product-hero { grid-template-columns: 1fr; gap: 48px; }
  .guest-hero-copy h1 { font-size: clamp(var(--type-display-md), 12.528vw, var(--type-display-lg)); }
  .guest-hero-copy > p { margin-top: 15px; font-size: var(--type-body-lg); }
  .guest-hero-actions { align-items: stretch; flex-direction: column; gap: 8px; margin-top: 22px; }
  .guest-entry-cta { width: 100%; min-height: 54px; }
  .guest-hero-product-link { text-align: center; }
  .guest-hero-trust { justify-content: center; margin-top: 14px; }
  .guest-hero-character { min-height: 342px; margin-top: -4px; }
  .guest-hero-character::before { right: 7%; bottom: 0; width: 86%; }
  .guest-hero-character > img { width: min(76%, 292px); }
  .guest-hero-bubble { top: 14px; right: 8%; }
  .guest-hero-star-one { top: 68px; left: 8%; }
  .guest-hero-star-two { top: 126px; right: 6%; }
  .guest-hero-star-three { bottom: 64px; left: 7%; }
  .guest-preview-section { padding: 54px 0 76px; }
  .guest-preview-heading { text-align: left; }
  .guest-preview-heading h2 { font-size: var(--type-page-title); }
  .guest-preview-heading p { font-size: var(--type-small); line-height: 1.55; }
  .guest-preview-grid { grid-template-columns: 1fr; gap: 12px; margin-top: 22px; }
  .guest-preview-card { min-height: 390px; padding: 20px; }
  .guest-preview-card h3 br { display: none; }
  .guest-preview-kicker { margin-top: 21px; }
  .guest-product-price { min-height: 44px; }
  .guest-preview-copy { font-size: var(--type-small); }
  .guest-preview-pass-note { font-size: var(--type-label); }
  .guest-preview-footer { margin-top: 21px; }
  .guest-preview-footer > p { max-width: 310px; }
  .guest-preview-cta { width: 100%; min-height: 50px; }
  .guest-preview-open-label { font-size: var(--type-small); }
  .guest-result-dialog { inset: auto 0 0; width: 100%; max-width: none; max-height: calc(100dvh - 10px); margin: 0; border-radius: 24px 24px 0 0; }
  .guest-result-dialog-shell { max-height: calc(100dvh - 10px); }
  .guest-result-dialog-header { position: relative; min-height: 62px; padding: 7px 16px 0; }
  .guest-result-dialog-header::before { position: absolute; top: 7px; left: 50%; width: 38px; height: 4px; transform: translateX(-50%); border-radius: 99px; background: #ddd0e6; content: ""; }
  .guest-result-dialog-scroll { padding: 20px 16px 26px; }
  .guest-result-product-heading > h2 { font-size: var(--type-section-title-lg); }
  .guest-result-product-heading > span { font-size: var(--type-body); }
  .guest-result-dialog-footer { min-height: 72px; padding: 10px 16px; }
  .guest-result-dialog-footer > p { display: none; }
  .guest-result-dialog-footer > a { width: 100%; min-height: 50px; font-size: var(--type-body); }
  .member-dashboard { padding: 18px 0 56px; }
  .home-popular-saju-ticker {
    grid-template-columns: max-content max-content max-content minmax(0, 1fr) max-content;
    gap: 5px;
    padding-inline: 4px;
  }
  .home-popular-saju-ticker h2 { font-size: var(--type-caption); }
  .home-popular-saju-ticker__item { font-size: var(--type-label); }
  .home-popular-saju-ticker__point { font-size: var(--type-caption); }
  .dashboard-hero { height: auto; }
  .dashboard-cat-speech-wrap { width: min(224px, 58.8%); }
  .dashboard-cat-speech { min-height: 31px; padding: 4px 8px; font-size: var(--type-caption); }
  .pixel-orb { top: 38px; width: 156px; height: 156px; }
  .pixel-orb-base { top: 166px; width: 198px; }
  .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 18px; }
  .dashboard-item { min-height: 116px; padding: 14px; }
  .dashboard-service-catalog { gap: 18px; margin-top: 16px; }
  .dashboard-service-heading { padding-inline: 2px; }
  .dashboard-service-heading h2 { font-size: var(--type-card-title); }
  .dashboard-service-track { grid-auto-columns: 160px; gap: 7px; margin-top: 3px; padding-top: 4px; padding-bottom: 7px; }
  .dashboard-service-card { gap: 4px; padding: 0; border-radius: 0; }
  .dashboard-service-card__header { grid-template-columns: 39px minmax(0, 1fr); gap: 7px; }
  .dashboard-service-card__icon { width: 39px; height: 39px; border-radius: 10px; }
  .dashboard-service-card__icon img { width: 37px; height: 37px; }
  .dashboard-service-group--fortune .dashboard-service-card__icon img { width: calc(37px * 2 / 3); height: calc(37px * 2 / 3); }
  .dashboard-service-card__copy small { font-size: var(--type-caption); }
  .dashboard-service-card__copy strong { font-size: var(--type-body); }
  .dashboard-secondary-services { margin-top: 34px; }
  .home-tamami-invitation { left: 4px; }
  .dashboard-shortcuts { gap: 4px; margin-top: 14px; padding-inline: 2px; }
  .dashboard-secondary-shortcuts { margin-top: 6px; }
  .dashboard-shortcut { min-height: 98px; grid-template-rows: 44px 28px; gap: 4px; padding-inline: 0; }
  .dashboard-shortcut i { width: 44px; height: 44px; }
  .dashboard-shortcut strong { height: 28px; justify-content: center; gap: 2px; font-size: var(--type-small); font-weight: 600; }
  .dashboard-shortcut strong > span:not(.sparkle) { text-align: center; white-space: normal; word-break: keep-all; }
  .dashboard-shortcut .sparkle--left::after,
  .dashboard-shortcut .sparkle--right::before { display: none; }
  :is(.guest-tamami-about-banner, .home-tamabuddy-entry) {
    min-height: 104px;
    grid-template-columns: minmax(0, 1fr) 20px;
    gap: 10px;
    margin-top: 14px;
    padding: 4px 8px 4px 6px;
  }
  .guest-tamami-about-banner__copy { gap: 2px; }
  .guest-tamami-about-banner__copy small { font-size: var(--type-caption); letter-spacing: .04em; }
  .guest-tamami-about-banner__copy strong { font-size: var(--type-body-lg); }
  .guest-tamami-about-banner__copy > span { font-size: var(--type-caption); line-height: 1.45; }
  .guest-tamami-about-banner__arrow { font-size: var(--type-page-title); }
  .today-flow-card { padding: 16px 14px 18px; }
  .today-flow-card .today-flow-title { margin: 0; }
  .today-flow-content { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .today-score-summary { display: none; }
  .today-flow-donut { width: 51px; height: 51px; }
  .today-flow-donut::after { width: 33px; height: 33px; margin: 9px; }
  .today-score-summary strong { font-size: var(--type-display-md); }
  .today-score-summary span { font-size: var(--type-small); }
  .today-domain-ratings { gap: 10px; }
  .today-domain-rating { grid-template-columns: 130px max-content; gap: 8px; }
  .today-domain-rating b { grid-column: 2; justify-self: start; gap: 3px; }
  .today-domain-rating__score-icon { width: 18px; height: 18px; }
  .today-domain-rating.work .today-domain-rating__score-icon { width: 17px; height: 17px; }
  .today-domain-rating em { font-size: var(--type-body-lg); }
  .daily-zodiac-main__identity strong { overflow-wrap: normal; white-space: nowrap; word-break: keep-all; }
  .birth-chart-card { padding: 16px 14px 18px; }
  .birth-chart-edit { width: 32px; height: 32px; }
  .home-birth-chart .element-summary { grid-template-columns: 92px minmax(0, 1fr); gap: 10px; margin-top: 18px; }
  .home-birth-chart .element-bars { gap: 7px; }
  .home-birth-chart .element-row { grid-template-columns: 54px minmax(36px, 1fr) 14px; gap: 4px; font-size: var(--type-caption); }
  .home-birth-chart .element-row .element-icon { width: 12px; height: 12px; }
  .home-birth-chart .element-row b { height: 7px; }
  .home-birth-chart .element-donut { width: 90px; height: 90px; }
  .home-birth-chart .element-donut::before { width: 50px; height: 50px; }
  h1 { font-size: var(--type-display-md); }
  .supporting-copy { font-size: var(--type-card-title); }
  .auth-panel { padding-top: 36px; }
  .signup-conversation-hero { min-height: 184px; grid-template-columns: 112px minmax(0, 1fr); padding: 14px 14px 14px 3px; border-radius: 20px; }
  .signup-conversation-hero img { width: 116px; }
  .signup-conversation-hero > div { padding: 16px 14px; border-radius: 17px; }
  .signup-conversation-hero h1 { font-size: var(--type-section-title); }
  .signup-conversation-hero span { font-size: var(--type-label); }
  .onboarding-main { width: min(calc(100% - 24px), 680px); padding: 8px 0 42px; }
  .conversation-onboarding { padding: 18px 14px 22px; border-radius: 23px; }
  .onboarding-progress { margin-bottom: 22px; }
  .tamami-prompt { grid-template-columns: 56px minmax(0, 1fr); gap: 8px; }
  .tamami-prompt > img { width: 56px; height: 56px; border-radius: 18px; }
  .tamami-prompt > div { padding: 14px 15px; border-radius: 17px 17px 17px 5px; }
  .tamami-prompt h1 { font-size: var(--type-section-title); }
  .tamami-prompt p { font-size: var(--type-label); }
  .clue-conversation-form { margin-top: 18px; }
  .clue-exchange { padding: 15px 12px; border-radius: 17px; }
  .clue-answer { width: calc(100% - 10px); padding: 11px; border-radius: 16px 16px 5px 16px; }
  .sentence-input { align-items: flex-start; flex-direction: column; gap: 2px; }
  .sentence-input input { width: 100%; }
  .clue-select { align-items: flex-start; flex-direction: column; }
  .clue-select select { width: 100%; }
  .saved-clue-preview { grid-template-columns: 1fr; }
  .account-answer { grid-template-columns: 1fr; gap: 2px; }
  .account-form-card { padding: 26px 15px 22px; border-radius: 20px; }
  .account-form-header > h2 { font-size: var(--type-section-title-lg); }
  .account-password-heading { align-items: flex-start; flex-direction: column; gap: 3px; }
  .clue-wizard { min-height: 620px; padding-inline: 12px; }
  .tamami-guide { grid-template-columns: 94px minmax(0, 1fr); margin-top: -5px; }
  .tamami-guide > img { width: 100px; }
  .tamami-guide-bubble { --tamami-guide-tail-anchor: 5px; padding: 12px 13px; }
  .tamami-guide h1 { font-size: var(--type-body-lg); }
  .clue-step-form { margin-top: 12px; }
  .clue-step { min-height: 0; padding: 27px 15px 22px; border-radius: 20px; }
  .clue-step h2 { font-size: var(--type-section-title-lg); }
  .personalized-greeting { margin-right: 42px; margin-left: 42px; }
  .birthday-selects { gap: 5px; }
  .birthday-selects select { height: 54px; padding-inline: 8px 20px; font-size: var(--type-subtitle); }
  .birthday-selects label::after { right: 7px; }
  .calendar-kind-switch span, .lunar-kind-switch span { min-width: 62px; }
  .profile-main { padding-top: 32px; }
  .page-title h1 { font-size: var(--type-page-title-lg); }
  .summary-list > div { grid-template-columns: minmax(100px, 0.65fr) minmax(0, 1fr); gap: 12px; }
  .confirmation-actions { grid-template-columns: 1fr; }
  .confirmation-actions form { grid-row: 1; }
  .report-main { padding-top: 32px; }
  .report-section { margin-top: 48px; }
  .analysis-tabs { margin-bottom: 36px; }
  .analysis-introduction h2 { font-size: var(--type-page-title); }
  .story-chapter { padding: 38px 0; }
  .story-chapter h3 { font-size: var(--type-section-title-lg); }
  .signal-score { font-size: var(--type-page-title-lg); }
  .professional-metric dl { grid-template-columns: 1fr; gap: 10px; }
  .story-contexts { grid-template-columns: 1fr; gap: 18px; }
  .strength-shadow-pair, .practice-question { grid-template-columns: 1fr; }
  .interpretation-basis dl div { grid-template-columns: 1fr; gap: 5px; }
  .snapshot-overview { margin-top: 44px; }
  .calculation-subject { padding: 20px; }
  .executive-summary { margin-top: 44px; padding: 30px 0; }
  .executive-summary h2 { font-size: var(--type-page-title); }
  .core-structure { margin-top: 48px; }
  .core-structure h2 { font-size: var(--type-page-title); }
  .core-structure-prose section { grid-template-columns: 26px minmax(0, 1fr); gap: 10px; padding: 20px 0; }
  .core-structure-prose p { font-size: var(--type-subtitle); }
  .subject-facts, .subject-chart-summary { grid-template-columns: 1fr; }
  .subject-facts div:nth-child(odd) { padding-right: 0; }
  .snapshot-highlights { grid-template-columns: 1fr; }
  .snapshot-highlight { padding: 18px; }
  .report-section h2 { font-size: var(--type-page-title); }
  .evidence-limitation, .fixture-warning { flex-direction: column; gap: 4px; }
  .evidence-heading { flex-wrap: wrap; }
  .evidence-heading strong { width: 100%; margin: 4px 0 0; }
  .evidence-fact { flex-direction: column; gap: 5px; }
  .pillar-grid strong { font-size: var(--type-section-title-lg); }
  .report-item { align-items: flex-end; }
  .access-notice { align-items: flex-start; flex-direction: column; gap: 8px; }
  .relation-report-form { width: 100%; align-items: stretch; flex-direction: column; }
  .relation-report-form select { width: 100%; max-width: none; }
  .fortune-tabs { margin-bottom: 36px; }
  .locked-state { min-height: 360px; grid-template-columns: 1fr; align-content: start; gap: 0; padding: 24px 20px 0; }
  .locked-state::before { top: 22px; right: 22px; }
  .locked-state h1 { font-size: var(--type-section-title-lg); }
  .locked-state-copy > p { font-size: var(--type-small); }
  .locked-state-action { width: 100%; margin-top: 18px; }
  .locked-state-art { min-height: 150px; }
  .locked-state-art span { top: 19px; }
  .locked-state-art img { right: 50%; bottom: -78px; width: 165px; transform: translateX(50%); }
  .fortune-score-band strong { font-size: var(--type-section-title-lg); }
  .fortune-heading h1 { font-size: var(--type-page-title-lg); }
  .fortune-overview { grid-template-columns: 1fr; gap: 16px; }
  .fortune-score { min-width: 0; grid-row: auto; }
  .fortune-score-copy { grid-column: 1; grid-row: 2; }
  .score-track { grid-column: 1; grid-row: 3; }
  .score-scale { grid-column: 1; grid-row: 4; }
  .fortune-domains { grid-template-columns: 1fr; }
  .fortune-domain { min-height: 0; grid-template-columns: minmax(0, 1fr); }
  .fortune-domain p { grid-column: 1; width: auto; justify-self: stretch; }
  .fortune-lucky-items:not(.fortune-lucky-items--compact) li {
    grid-template-columns: 36px minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 6px;
  }
  .fortune-lucky-items:not(.fortune-lucky-items--compact) li > i { grid-column: 1; grid-row: 1 / 3; }
  .fortune-lucky-items:not(.fortune-lucky-items--compact) li > span { grid-column: 2; grid-row: 1; }
  .fortune-lucky-items:not(.fortune-lucky-items--compact) li > strong { grid-column: 2; grid-row: 2; max-width: 100%; }
  .fortune-lucky-items:not(.fortune-lucky-items--compact) li > strong.lucky-item-color-name { min-width: 0; white-space: normal; }
  .fortune-domain-shell { margin-top: 54px; }
  .fortune-domain-tamami { top: -67px; right: 14px; width: 84px; }
  .fortune-period-overview { padding: 18px 14px 20px; }
  .period-overview-title-row { min-height: 80px; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 0; }
  .period-overview-header::before { top: -7px; }
  .period-overview-header { gap: 9px; }
  .period-overview-header__tamami { width: 52px; }
  .period-overview-header h2 { margin: 0; font-size: clamp(var(--type-section-title-lg), 9.24vw, var(--type-page-title-lg)); }
  .period-overview-progress { display: none; }
  .period-overview-phases { grid-template-columns: 1fr; gap: 12px; }
  .period-overview-phase { text-align: center; }
  .period-overview-phase__content {
    width: 100%;
    min-height: 174px;
    grid-template-rows: auto auto minmax(36px, auto) 2px minmax(40px, auto);
    justify-items: center;
    padding: 13px 20px;
  }
  .period-overview-phase small { width: min(220px, 100%); }
  .period-overview-transition {
    width: 100%;
    min-height: 0;
    grid-template-columns: 82px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    margin-top: 15px;
    padding: 9px 10px;
    border-radius: 16px;
  }
  .period-overview-transition__meta { justify-items: center; }
  .period-overview-transition__badge {
    width: 82px;
    min-height: 24px;
  }
  .period-overview-transition__badge strong { font-size: var(--type-caption); }
  .period-overview-transition__copy {
    grid-column: 2;
    padding: 0 24px 0 9px;
    border-top: 0;
    border-left: 1px solid #dfd1f3;
    font-size: var(--type-caption);
    line-height: 1.55;
  }
  .period-overview-transition__decoration {
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 26px;
    opacity: .3;
  }
  .compatibility-main { padding-top: 26px; }
  .compatibility-title h1 { font-size: var(--type-page-title); }
  .compatibility-person-card { grid-template-columns: 58px minmax(0, 1fr); gap: 12px; padding: 15px; }
  .compatibility-avatar { width: 54px; height: 54px; }
  .compatibility-avatar img { width: 58px; }
  .compatibility-person-options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 4px; }
  .compatibility-person-option { min-height: 78px; }
  .compatibility-person-add { height: 78px; }
  .compatibility-person-option-label { padding: 0 6px; }
  .compatibility-report-grid { grid-template-columns: 1fr; }
  .compatibility-report-card { grid-template-columns: 44px minmax(0, 1fr) 78px; min-height: 94px; align-items: center; gap: 10px; padding: 14px; }
  .compatibility-report-card::before { display: none; }
  .compatibility-report-card > i { width: 38px; height: 38px; }
  .compatibility-report-card .relation-report-form { width: auto; }
  .compatibility-generate-button { min-height: 38px; }
  .compatibility-reports.is-preview .compatibility-report-card { grid-template-columns: 44px minmax(0, 1fr); min-height: 88px; }
  .compatibility-empty { grid-template-columns: 1fr; justify-items: center; gap: 18px; padding: 22px 18px; text-align: center; }
  .compatibility-empty-art { width: 116px; height: 94px; }
  .compatibility-empty-art img { width: 120px; }
  .compatibility-empty .compatibility-primary-link { width: 100%; }
  .compatibility-section-header { align-items: start; }
  .counterpart-card { grid-template-columns: 42px minmax(0, 1fr); }
  .counterpart-card .counterpart-actions { grid-column: 2; width: auto; justify-content: flex-end; }
  .faq-main { padding-top: 24px; }
  .faq-hero { min-height: 180px; grid-template-columns: minmax(0, 1fr) 110px; padding: 22px 18px; }
  .faq-hero h1 { font-size: var(--type-page-title); }
  .faq-hero span { max-width: 190px; font-size: var(--type-small); }
  .faq-hero img { right: 4px; bottom: -10px; width: 130px; }
  .faq-list summary { min-height: 56px; font-size: var(--type-body); }
  .faq-help { grid-template-columns: 66px minmax(0, 1fr); padding: 15px; }
  .faq-help img { width: 64px; }
  .counterpart-item { align-items: flex-start; flex-direction: column; }
  .counterpart-actions { width: 100%; flex-wrap: wrap; }
}

@media (max-width: 359px) {
  .app-logo { transform: translateX(2px); }
  .app-logo .brand-logo-image { height: 40px; }
  .header-tamabuddy-link { width: 72px; }
  .header-tamabuddy-hint::before { right: 39px; }
}

/* Customer support */
.support-main { width: var(--page-content-width); margin: 0 auto; padding: 34px 0 110px; }
.support-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 20px 0 28px; }
.support-heading h1, .support-detail-heading h1 { color: #5632ad; font-size: var(--type-page-title-lg); }
.support-heading p:not(.date-label), .support-detail-heading p { margin: 8px 0 0; color: #806d99; font-size: var(--type-body-lg); line-height: 1.6; }
.support-new-button, .support-submit { display: inline-grid; min-height: 42px; padding: 0 18px; border: 0; border-radius: 7px; background: #8d61dc; color: #fff; font-size: var(--type-body); font-weight: 600; text-decoration: none; cursor: pointer; place-items: center; }
.support-new-button {
  --support-new-frame-image: url("/images/pixel_frame_support_new.svg?v=1");
  box-sizing: border-box;
  width: 80px;
  height: 48px;
  min-height: 48px;
  padding: 0;
  border: 14px solid transparent;
  border-image-source: var(--support-new-frame-image);
  border-image-slice: 14 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  background-clip: border-box;
  background-origin: border-box;
  box-shadow: none;
  clip-path: none;
  image-rendering: pixelated;
  transition: filter .15s ease, transform .15s ease;
}
.support-new-button:hover { filter: brightness(1.03); }
.support-new-button:active { filter: brightness(.96); transform: translateY(1px); }
.support-new-button:focus-visible { outline: 3px solid var(--ui-focus, #5a43bc); outline-offset: 2px; }
.support-ticket-list { display: grid; gap: 9px; }
.support-ticket-card { position: relative; display: grid; min-height: 92px; grid-template-columns: 88px minmax(0, 1fr) 22px; align-items: center; gap: 12px; padding: 16px 18px; border: 1px solid #dfd1f5; border-radius: 8px; background: #fbf5fe; text-decoration: none; }
.support-ticket-card strong { color: #5632ad; font-size: var(--type-body-lg); }
.support-ticket-card small { grid-column: 2; color: #917dae; font-size: var(--type-label); }
.support-ticket-card b { grid-row: 1 / 3; grid-column: 3; color: #9a83c5; font-size: var(--type-page-title); font-weight: 400; }
.support-ticket-status {
  --support-status-badge-frame: url("/images/pixel_badge_support_status.svg?v=4");
  --support-status-badge-slice: 4;

  grid-row: 1 / 3;
  display: grid;
  box-sizing: border-box;
  min-height: 30px;
  padding: 0 2px;
  border: calc(var(--support-status-badge-slice) * 1px) solid transparent;
  border-image-source: var(--support-status-badge-frame);
  border-image-slice: var(--support-status-badge-slice) fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  clip-path: none;
  color: #7650c6;
  font-size: var(--type-small);
  font-weight: 600;
  line-height: 20px;
  white-space: nowrap;
  image-rendering: pixelated;
  transform: none;
  place-items: center;
}
.support-empty { display: grid; min-height: 380px; justify-items: center; align-content: center; padding: 32px; border: 1px solid #dfd1f5; border-radius: 8px; background: #fbf5fe; text-align: center; }
.support-empty img { width: 118px; height: 118px; object-fit: contain; image-rendering: pixelated; }
.support-empty h2 { margin: 16px 0 6px; color: #5632ad; font-size: var(--type-section-title); }
.support-empty p { margin: 0 0 18px; color: #806d99; font-size: var(--type-body); }
.support-empty a { color: #7650c6; font-size: var(--type-body); font-weight: 600; }
.support-form, .support-reply-form { display: grid; gap: 20px; padding: 24px; border: 1px solid #dfd1f5; border-radius: 8px; background: #fbf5fe; }
.support-form label, .support-reply-form label { display: grid; gap: 9px; color: #604d76; font-size: var(--type-body); font-weight: 600; }
.support-form input, .support-form select, .support-form textarea, .support-reply-form textarea { width: 100%; padding: 12px 14px; border: 1px solid #d8c5f4; border-radius: 7px; background: var(--surface-white); color: #49365f; outline: 0; resize: vertical; }
.support-form input, .support-form select { height: 46px; }
.support-form input:focus, .support-form select:focus, .support-form textarea:focus, .support-reply-form textarea:focus { border-color: #8d61dc; box-shadow: 0 0 0 3px #eee5ff; }
.support-form .support-submit, .support-reply-form .support-submit { justify-self: end; }
.support-detail-page > .back-link { display: flex; width: max-content; }
.support-detail-heading { margin: 22px 0 24px; padding-bottom: 20px; border-bottom: 1px solid #dfd1f5; }
.support-detail-heading > .support-detail-status {
  grid-row: auto;
  display: inline-grid;
  width: 76px;
  vertical-align: top;
}
.support-conversation, .admin-conversation { display: grid; gap: 12px; }
.support-message { max-width: 86%; padding: 15px 17px; border: 1px solid #dfd1f5; border-radius: 8px; background: #fbf5fe; }
.support-message.customer { justify-self: end; background: #eee5ff; }
.support-message.staff { justify-self: start; }
.support-message header { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.support-message header strong { color: #5632ad; font-size: var(--type-small); }
.support-message time { color: #a18ebf; font-size: var(--type-caption); }
.support-message > p { margin: 0; color: #604d76; font-size: var(--type-body); line-height: 1.7; white-space: pre-wrap; }
.support-message > p p { margin: 0; }
.support-reply-form { margin-top: 20px; }
.support-closed { padding: 18px; border: 1px solid #dfd1f5; border-radius: 8px; background: #fbf5fe; color: #806d99; font-size: var(--type-body); text-align: center; }

/* Operations console */
.admin-body { min-width: 360px; background: #f4f6f8; color: #202632; }
.admin-frame { display: grid; min-height: 100svh; grid-template-columns: 224px minmax(0, 1fr); }
.admin-sidebar {
  --admin-nav-title: #4c30af;
  --admin-nav-text: #6b667a;
  --admin-nav-border: #dfd1fa;
  --admin-nav-surface: #f8f3fe;
  --admin-nav-hover: #f0e9fd;
  --admin-nav-active: #fcebfa;
  position: sticky;
  top: 0;
  display: flex;
  box-sizing: border-box;
  height: 100svh;
  min-height: 0;
  flex-direction: column;
  padding: 24px 14px 18px;
  overflow: hidden;
  border-right: 1px solid var(--admin-nav-border);
  background: var(--admin-nav-surface);
  color: var(--admin-nav-text);
}
.admin-brand { display: grid; flex-shrink: 0; justify-items: start; gap: 4px; padding: 0 10px 22px; color: var(--admin-nav-title); text-decoration: none; }
.admin-brand .brand-logo-image { width: 136px; height: auto; }
.admin-brand span { color: var(--admin-nav-text); font-size: var(--type-label); font-weight: 600; }
.admin-navigation { display: flex; min-height: 0; flex: 1; flex-direction: column; gap: 12px; }
.admin-navigation a,
.admin-nav-group-heading {
  display: flex;
  min-height: 44px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 6px;
  color: var(--admin-nav-text);
  font-size: var(--type-body);
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
  word-break: keep-all;
}
.admin-navigation-home { flex-shrink: 0; }
.admin-navigation-scroll { min-height: 0; flex: 1; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.admin-navigation-groups { display: flex; min-height: 100%; flex-direction: column; gap: 4px; padding-bottom: 12px; }
.admin-nav-group { flex-shrink: 0; }
.admin-nav-group-heading { justify-content: space-between; gap: 8px; color: var(--admin-nav-title); list-style: none; cursor: pointer; }
.admin-nav-group-heading::-webkit-details-marker { display: none; }
.admin-nav-group-heading .lucide { width: 16px; height: 16px; flex-shrink: 0; }
.admin-nav-group[open] > .admin-nav-group-heading .lucide { transform: rotate(90deg); }
.admin-nav-group-links { display: grid; gap: 2px; margin: 2px 0 8px 12px; padding-left: 8px; border-left: 1px solid var(--admin-nav-border); }
.admin-nav-group-links a { font-size: var(--type-small); font-weight: 400; }
.admin-navigation a:hover,
.admin-nav-group-heading:hover,
.admin-navigation a:focus-visible,
.admin-nav-group-heading:focus-visible { background: var(--admin-nav-hover); color: var(--admin-nav-title); }
.admin-navigation a:focus-visible,
.admin-nav-group-heading:focus-visible,
.admin-sidebar-footer button:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.admin-navigation a.active { background: var(--admin-nav-active); color: var(--admin-nav-title); font-weight: 600; box-shadow: inset 3px 0 var(--admin-nav-title); }
.admin-nav-group-settings { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--admin-nav-border); }
.admin-sidebar-footer { display: grid; flex-shrink: 0; gap: 4px; padding: 14px 10px 0; border-top: 1px solid var(--admin-nav-border); }
.admin-sidebar-footer span { color: var(--admin-nav-title); font-size: var(--type-small); font-weight: 600; }
.admin-sidebar-footer small { overflow-wrap: anywhere; color: var(--admin-nav-text); font-size: var(--type-caption); }
.admin-sidebar-footer form { margin-top: 4px; }
.admin-sidebar-footer button { min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--admin-nav-text); font-size: var(--type-label); cursor: pointer; }
.admin-workspace { min-width: 0; }
.admin-topbar { display: flex; height: 56px; align-items: center; justify-content: space-between; padding: 0 28px; border-bottom: 1px solid #dde2e7; background: #fff; }
.admin-topbar strong { font-size: var(--type-body-lg); }.admin-topbar a { color: #687383; font-size: var(--type-label); text-decoration: none; }
.admin-menu-toggle { display: none; border: 0; background: transparent; font-size: var(--type-section-title-lg); }
.admin-main { width: min(calc(100% - 48px), 1360px); margin: 0 auto; padding: 34px 0 70px; }.admin-main.narrow { max-width: 640px; }
.admin-audit-page {
  --audit-title: #4c30af;
  --audit-heading: #5a43bc;
  --audit-text: #6b667a;
  --audit-border: #dfd1fa;
  --audit-control-border: #b5a1ec;
  --audit-surface: #f8f3fe;
  color: var(--audit-text);
}
.admin-audit-page .admin-page-heading h1 { color: var(--audit-title); }
.admin-audit-page .admin-page-heading p,
.admin-audit-page .admin-panel header p,
.admin-audit-page .admin-table td,
.admin-audit-page .admin-empty { color: var(--audit-text); }
.admin-audit-page .admin-panel,
.admin-audit-page .admin-table-panel { border-color: var(--audit-border); }
.admin-audit-page .admin-panel h2 { color: var(--audit-heading); }
.admin-audit-filters { margin-bottom: 20px; }
.admin-audit-filter-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.admin-audit-filter-form > div { display: grid; min-width: 0; gap: 7px; }
.admin-audit-filter-form label { color: var(--audit-heading); font-size: var(--type-label); }
.admin-audit-filter-form input,
.admin-audit-filter-form select {
  width: 100%; min-width: 0; height: 44px; padding: 0 10px;
  border: 1px solid var(--audit-control-border); border-radius: 6px;
  background: #fff; color: var(--audit-text); font: inherit; font-size: var(--type-label);
}
.admin-audit-request-filter { grid-column: span 2; }
.admin-audit-filter-form .admin-audit-filter-actions {
  display: flex; grid-column: span 2; align-items: end; flex-wrap: wrap; gap: 8px;
}
.admin-audit-page .admin-primary-button { min-height: 44px; background: var(--audit-heading); }
.admin-audit-page .admin-secondary-button { min-height: 44px; border-color: var(--audit-control-border); color: var(--audit-heading); }
.admin-audit-download-help { margin: 14px 0 0; font-size: var(--type-caption); line-height: 1.65; }
.admin-audit-result-count { margin: 0 0 12px; font-size: var(--type-label); }
.admin-audit-result-count strong { color: var(--audit-title); }
.admin-audit-errors { margin-bottom: 16px; padding: 12px; background: var(--audit-surface); color: var(--audit-title); }
.admin-audit-errors p { margin: 0; line-height: 1.75; }
.admin-audit-table { min-width: 940px; table-layout: fixed; }
.admin-audit-page .admin-table th { background: var(--audit-surface); color: var(--audit-heading); border-color: var(--audit-border); }
.admin-audit-table td { overflow-wrap: anywhere; }
.admin-audit-table th:nth-child(1) { width: 155px; }
.admin-audit-table th:nth-child(2) { width: 110px; }
.admin-audit-table th:nth-child(6) { width: 170px; }
.admin-audit-table summary { display: list-item; min-height: 44px; align-content: center; cursor: pointer; color: var(--audit-heading); }
.admin-audit-table pre { max-height: 260px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--type-caption); }
.admin-audit-page .admin-pagination { margin-top: 20px; color: var(--audit-text); }
.admin-audit-page .admin-pagination a { min-height: 44px; color: var(--audit-heading); border-color: var(--audit-control-border); }
.admin-audit-page :is(input, select, button, a, summary):focus-visible { border-color: var(--audit-title); text-decoration: underline; text-decoration-thickness: 2px; }
@media (max-width: 1100px) {
  .admin-audit-filter-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-audit-filter-form .admin-audit-filter-actions { align-items: center; }
}
@media (max-width: 600px) {
  .admin-audit-filter-form { grid-template-columns: minmax(0, 1fr); }
  .admin-audit-request-filter,
  .admin-audit-filter-form .admin-audit-filter-actions { grid-column: auto; }
}
.admin-page-heading { display: flex; min-height: 72px; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.admin-page-heading > div { min-width: 0; }.admin-page-heading h1 { overflow-wrap: anywhere; }
.admin-eyebrow { margin: 0 0 6px; color: #798595; font-size: var(--type-caption); font-weight: 600; letter-spacing: 0; }
.admin-page-heading h1, .admin-login h1 { margin: 0; color: #202632; font-size: var(--type-page-title); }
.admin-page-heading p:not(.admin-eyebrow), .admin-login p { margin: 7px 0 0; color: #687383; font-size: var(--type-small); line-height: 1.55; }
.admin-page-heading time { color: #8b95a1; font-size: var(--type-label); }
.admin-stat-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.admin-stat-grid article { display: grid; min-height: 106px; align-content: center; gap: 7px; padding: 17px; border: 1px solid #dde2e7; border-radius: 7px; background: #fff; }
.admin-stat-grid span { color: #687383; font-size: var(--type-label); font-weight: 600; }.admin-stat-grid strong { font-size: var(--type-section-title-lg); }.admin-stat-grid small { color: #8b95a1; font-size: var(--type-caption); }
.admin-dashboard-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.admin-stat-grid article.admin-stat-link-card { padding: 0; overflow: hidden; border-color: #dfd1fa; }
.admin-stat-link-card > a { display: grid; min-height: 104px; align-content: center; gap: 7px; padding: 17px; color: inherit; text-decoration: none; }
.admin-stat-link-card > a:hover { background: #f8f3fe; }
.admin-stat-link-card > a:focus-visible { outline: 3px solid #4c30af; outline-offset: -3px; }
.admin-stat-link-card > a strong { color: #4c30af; }
.admin-unused-credit-page {
  --unused-credit-title: #4c30af;
  --unused-credit-heading: #5a43bc;
  --unused-credit-text: #6b667a;
  --unused-credit-border: #dfd1fa;
  --unused-credit-surface: #f8f3fe;
  color: var(--unused-credit-text);
}
.admin-unused-credit-page .admin-page-heading h1 { color: var(--unused-credit-title); }
.admin-unused-credit-page .admin-page-heading p:not(.admin-eyebrow) { color: var(--unused-credit-text); }
.admin-unused-credit-page .admin-back { color: var(--unused-credit-heading); }
.admin-unused-credit-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.admin-unused-credit-summary article { border-color: var(--unused-credit-border); }
.admin-unused-credit-summary strong { color: var(--unused-credit-title); }
.admin-unused-credit-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 10px; }
.admin-unused-credit-section-heading h2 { margin: 0; color: var(--unused-credit-heading); font-size: var(--type-body-lg); }
.admin-unused-credit-section-heading p { margin: 5px 0 0; color: var(--unused-credit-text); font-size: var(--type-caption); line-height: 1.65; word-break: keep-all; }
.admin-unused-credit-section-heading > span { flex-shrink: 0; color: #8f88a6; font-size: var(--type-caption); }
.admin-unused-credit-page .admin-table-panel { border-color: var(--unused-credit-border); }
.admin-unused-credit-page .admin-table th { border-color: var(--unused-credit-border); background: var(--unused-credit-surface); color: var(--unused-credit-heading); }
.admin-unused-credit-page .admin-table td { color: var(--unused-credit-text); }
.admin-unused-credit-page .admin-table td a { color: var(--unused-credit-title); }
.admin-unused-credit-page .admin-table td strong { color: var(--unused-credit-title); font-size: var(--type-small); }
.admin-unused-credit-table { min-width: 680px; }
.admin-unused-credit-page :is(a, button):focus-visible { outline: 3px solid var(--unused-credit-title); outline-offset: 2px; }
.admin-dashboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.admin-panel, .admin-table-panel, .admin-key-values, .admin-action-panel { border: 1px solid #dde2e7; border-radius: 7px; background: #fff; }
.admin-panel { padding: 19px; }.admin-panel > header { display: flex; align-items: start; justify-content: space-between; gap: 15px; margin-bottom: 14px; }
.admin-panel h2, .admin-action-panel h2, .admin-record-section h2, .admin-ticket-sidebar h2 { margin: 0; font-size: var(--type-body-lg); }
.admin-panel header p { margin: 4px 0 0; color: #798595; font-size: var(--type-caption); }.admin-panel header a { color: #4a6fa5; font-size: var(--type-caption); text-decoration: none; }
.admin-list { display: grid; }.admin-list > a { display: grid; min-height: 61px; grid-template-columns: 92px minmax(0, 1fr); align-items: center; column-gap: 10px; padding: 8px 0; border-top: 1px solid #edf0f2; text-decoration: none; }
.admin-list > a strong { overflow: hidden; font-size: var(--type-small); text-overflow: ellipsis; white-space: nowrap; }.admin-list > a small { grid-column: 2; color: #8b95a1; font-size: var(--type-caption); }
.admin-badge { display: inline-flex; width: fit-content; min-height: 23px; align-items: center; padding: 0 7px; border-radius: 5px; background: #eef1f4; color: #526071; font-size: var(--type-caption); font-weight: 600; white-space: nowrap; }
.status-waiting_on_staff { background: #fff0d6; color: #8e5c12; }.status-waiting_on_user { background: #e6f1ff; color: #285f9f; }.status-resolved, .status-closed { background: #e7f5ed; color: #247049; }
.admin-empty { padding: 32px 16px; color: #8b95a1; font-size: var(--type-label); text-align: center; }
.admin-incidents { margin-top: 12px; }.admin-incidents > p { display: flex; gap: 10px; margin: 0; padding: 10px 0; border-top: 1px solid #edf0f2; font-size: var(--type-label); }
.admin-filter-tabs { display: flex; gap: 4px; margin-bottom: 12px; overflow-x: auto; }
.admin-filter-tabs a { min-height: 34px; padding: 0 12px; border: 1px solid #dde2e7; border-radius: 5px; background: #fff; color: #687383; font-size: var(--type-caption); font-weight: 600; line-height: 32px; text-decoration: none; white-space: nowrap; }
.admin-filter-tabs a.active { border-color: #344863; background: #344863; color: #fff; }
.admin-table-panel { overflow-x: auto; }.admin-table { width: 100%; border-collapse: collapse; font-size: var(--type-label); }
.admin-table th { height: 42px; padding: 0 13px; border-bottom: 1px solid #dde2e7; background: #f8f9fa; color: #687383; font-size: var(--type-caption); text-align: left; white-space: nowrap; }
.admin-table td { min-height: 48px; padding: 12px 13px; border-bottom: 1px solid #edf0f2; color: #384251; vertical-align: middle; }
.admin-table td a { color: #315f95; font-weight: 600; text-decoration: none; }.admin-table td small { display: block; margin-top: 3px; color: #8b95a1; font-size: var(--type-caption); }
.admin-back { display: inline-block; margin-bottom: 18px; color: #687383; font-size: var(--type-label); text-decoration: none; }
.admin-ticket-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; align-items: start; gap: 14px; }
.admin-conversation { padding: 18px; border: 1px solid #dde2e7; border-radius: 7px; background: #fff; }
.admin-conversation .support-message { border-color: #dde2e7; background: #f7f8fa; }.admin-conversation .support-message.customer { background: #eef3f8; }
.admin-reply-form { display: grid; gap: 9px; margin-top: 14px; padding-top: 16px; border-top: 1px solid #dde2e7; }.admin-reply-form label { font-size: var(--type-label); font-weight: 600; }
.admin-reply-form textarea { width: 100%; padding: 12px; border: 1px solid #cfd5dc; border-radius: 6px; resize: vertical; }.admin-reply-form input { justify-self: end; }
.admin-ticket-sidebar { padding: 18px; border: 1px solid #dde2e7; border-radius: 7px; background: #fff; }
.admin-form { display: grid; gap: 16px; }.admin-form.compact { gap: 12px; margin-top: 16px; }
.admin-form label { display: grid; gap: 7px; color: #526071; font-size: var(--type-caption); font-weight: 600; }
.admin-form input, .admin-form select, .admin-search input { width: 100%; height: 43px; padding: 0 11px; border: 1px solid #cfd5dc; border-radius: 6px; background: #fff; }
.admin-primary-button, .admin-secondary-button, .admin-danger-button, .admin-primary-link { display: inline-grid; min-height: 38px; padding: 0 14px; border: 0; border-radius: 5px; font-size: var(--type-caption); font-weight: 600; cursor: pointer; place-items: center; text-decoration: none; }
.admin-primary-button, .admin-primary-link { background: #344863; color: #fff; }.admin-secondary-button { border: 1px solid #cfd5dc; background: #fff; color: #384251; }.admin-danger-button { background: #b23b46; color: #fff; }
.admin-box-link { display: block; margin-top: 12px; padding: 12px; border: 1px solid #dde2e7; border-radius: 5px; color: #315f95; font-size: var(--type-caption); font-weight: 600; text-align: center; text-decoration: none; }
.admin-search { display: flex; max-width: 480px; gap: 7px; margin-bottom: 12px; }.admin-search input { flex: 1; }.admin-search input[type="submit"] { width: auto; border-color: #344863; background: #344863; color: #fff; cursor: pointer; }
.admin-detail-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px; margin-bottom: 14px; }.admin-detail-grid article { display: grid; min-height: 90px; align-content: center; gap: 5px; padding: 14px; border: 1px solid #dde2e7; border-radius: 7px; background: #fff; }.admin-detail-grid span, .admin-detail-grid small { color: #798595; font-size: var(--type-caption); }.admin-detail-grid strong { font-size: var(--type-subtitle); }
.admin-action-panel { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; padding: 15px; }.admin-action-panel form { display: flex; gap: 6px; }.admin-action-panel select, .admin-action-panel input[type="number"] { width: 105px; height: 38px; border: 1px solid #cfd5dc; border-radius: 5px; }
.admin-cache-tools-panel p { word-break: keep-all; overflow-wrap: anywhere; }
.admin-cache-tools-panel .admin-cache-tools-form { flex-shrink: 0; flex-wrap: wrap; align-items: center; }
.admin-cache-tools-form label { white-space: nowrap; }
.admin-notification-panel { display: grid; grid-template-columns: minmax(190px, .7fr) minmax(320px, 1.3fr); align-items: start; gap: 24px; margin-bottom: 20px; padding: 20px; border: 1px solid #dde2e7; border-radius: 7px; background: #fff; }
.admin-notification-panel h2 { margin: 0; font-size: var(--type-body-lg); }
.admin-notification-panel > div > p:not(.admin-eyebrow) { margin: 7px 0 0; color: #687383; font-size: var(--type-caption); line-height: 1.6; }
.admin-notification-form { display: grid; gap: 10px; }
.admin-notification-form label { display: grid; gap: 6px; color: #526071; font-size: var(--type-caption); font-weight: 600; }
.admin-notification-form input[type="text"], .admin-notification-form textarea { width: 100%; padding: 10px 11px; border: 1px solid #cfd5dc; border-radius: 6px; background: #fff; color: #202632; font: inherit; }
.admin-notification-form input[type="text"] { height: 41px; }
.admin-notification-form textarea { min-height: 90px; line-height: 1.55; resize: vertical; }
.admin-notification-form input[type="submit"] { justify-self: end; }
.admin-point-grant-panel { display: grid; grid-template-columns: minmax(220px, .7fr) minmax(420px, 1.3fr); align-items: start; gap: 24px; margin-bottom: 20px; padding: 20px; border: 1px solid #cad8e7; border-left: 4px solid #315f95; border-radius: 7px; background: #fafdff; }
.admin-point-grant-intro h2 { margin: 0; font-size: var(--type-body-lg); }.admin-point-grant-intro p:not(.admin-eyebrow) { margin: 7px 0 0; color: #687383; font-size: var(--type-caption); line-height: 1.6; }.admin-point-grant-intro strong { color: #244f80; }
.admin-point-grant-form { display: grid; gap: 12px; }.admin-point-grant-fields { display: grid; grid-template-columns: minmax(120px, .4fr) minmax(180px, .6fr); gap: 10px; }
.admin-point-grant-target { margin: 0; padding: 9px 11px; border-radius: 5px; background: #eaf2fa; color: #526071; font-size: var(--type-caption); }.admin-point-grant-target strong { color: #244f80; }
.admin-point-grant-fields label, .admin-point-grant-reversal-form > label:not(.admin-confirm-check) { display: grid; gap: 6px; color: #526071; font-size: var(--type-caption); font-weight: 600; }
.admin-point-grant-fields input, .admin-point-grant-fields select, .admin-point-grant-fields textarea, .admin-point-grant-reversal-form textarea { width: 100%; padding: 9px 11px; border: 1px solid #bfcbd8; border-radius: 6px; background: #fff; color: #202632; font: inherit; }
.admin-point-grant-fields input, .admin-point-grant-fields select { height: 41px; }.admin-point-grant-fields textarea, .admin-point-grant-reversal-form textarea { min-height: 76px; line-height: 1.5; resize: vertical; }
.admin-point-grant-detail-field { grid-column: 1 / -1; }.admin-point-grant-checks { display: flex; flex-wrap: wrap; gap: 8px 18px; }.admin-point-grant-form > input[type="submit"] { justify-self: end; }
.admin-point-grant-history code { font-size: var(--type-caption); overflow-wrap: anywhere; }.admin-point-grant-history .status-reversed { background: #fbeaec; color: #9a303b; }.admin-muted-copy { color: #8b95a1; font-size: var(--type-caption); }
.admin-point-grant-reversal { min-width: 230px; }.admin-point-grant-reversal summary { width: fit-content; color: #9a303b; font-size: var(--type-caption); font-weight: 600; cursor: pointer; }.admin-point-grant-reversal[open] summary { margin-bottom: 10px; }
.admin-point-grant-reversal-form { display: grid; gap: 8px; padding: 11px; border: 1px solid #e8c5c9; border-radius: 6px; background: #fffafb; }.admin-point-grant-reversal-form .admin-danger-button { justify-self: start; }
.admin-record-section { margin-top: 20px; }.admin-record-section > h2 { margin-bottom: 9px; }
.admin-product-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }.admin-product-strip article { display: grid; gap: 5px; padding: 14px; border: 1px solid #dde2e7; border-radius: 6px; background: #fff; }.admin-product-strip span, .admin-product-strip small { color: #798595; font-size: var(--type-caption); }.admin-product-strip strong { overflow: hidden; font-size: var(--type-label); text-overflow: ellipsis; white-space: nowrap; }.admin-table-button { min-height: 28px; padding: 0 8px; border: 1px solid #cfd5dc; border-radius: 4px; background: #fff; color: #384251; font-size: var(--type-caption); cursor: pointer; }
.admin-key-values { padding: 18px; }.admin-key-values dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }.admin-key-values dl div { padding: 14px; border-bottom: 1px solid #edf0f2; }.admin-key-values dt { color: #798595; font-size: var(--type-caption); }.admin-key-values dd { margin: 6px 0 0; font-size: var(--type-small); font-weight: 600; overflow-wrap: anywhere; }
.admin-privacy-note { padding: 12px; border-left: 3px solid #9aa4b2; background: #f3f5f7; color: #687383; font-size: var(--type-caption); line-height: 1.6; }
.admin-report-raw-data { display: grid; gap: 12px; }.admin-report-raw-data > h2 { margin-bottom: 0; }.admin-report-raw-data > .admin-privacy-note { margin: 0; }.admin-report-raw-data article { min-width: 0; padding: 18px; border: 1px solid #dde2e7; border-radius: 7px; background: #fff; }.admin-report-raw-data article h3 { margin: 0; font-size: var(--type-body-lg); }.admin-report-raw-data article p { margin: 6px 0 0; color: #798595; font-size: var(--type-caption); line-height: 1.6; }.admin-report-raw-data pre { max-height: 520px; margin: 14px 0 0; padding: 14px; overflow: auto; border: 1px solid #edf0f2; border-radius: 5px; background: #f8f9fa; color: #384251; font: 12px/1.65 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; overflow-wrap: normal; white-space: pre-wrap; word-break: break-word; }
.runtime-option-group { scroll-margin-top: 16px; }
.runtime-option-table td:first-child { min-width: 210px; }.runtime-option-table td:nth-child(3) { min-width: 180px; font-weight: 600; }
.runtime-option-table td:last-child { min-width: 360px; }
.runtime-state-enabled { background: #e7f5ed; color: #247049; }.runtime-state-disabled { background: #eef1f4; color: #526071; }
.runtime-state-warning { background: #fff0d6; color: #8e5c12; }.runtime-state-info { background: #e6f1ff; color: #285f9f; }
.runtime-env-list { display: grid; gap: 8px; margin: 0; }
.runtime-env-list > div { display: grid; grid-template-columns: minmax(190px, .8fr) minmax(150px, 1fr); gap: 2px 10px; padding-bottom: 8px; border-bottom: 1px solid #edf0f2; }
.runtime-env-list > div:last-child { padding-bottom: 0; border-bottom: 0; }
.runtime-env-list dt, .runtime-env-list dd { margin: 0; overflow-wrap: anywhere; }
.runtime-env-list code { color: #344863; font-size: var(--type-caption); font-weight: 600; }
.runtime-env-list dd { font-size: var(--type-caption); }.runtime-env-list dd.configured { color: #247049; }.runtime-env-list dd.missing { color: #8b95a1; }
.runtime-env-list small { grid-column: 1 / -1; margin: 0 !important; color: #8b95a1; line-height: 1.45; }
.runtime-no-env { color: #8b95a1; font-size: var(--type-caption); }
.admin-maintenance-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.admin-maintenance-card { padding: 18px; border: 1px solid #dde2e7; border-radius: 7px; background: #fff; }
.admin-maintenance-card.danger { border-color: #e8c5c9; }.admin-maintenance-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.admin-maintenance-card h3 { margin: 0; font-size: var(--type-body-lg); }.admin-maintenance-card > p { min-height: 48px; margin: 12px 0 16px; color: #687383; font-size: var(--type-caption); line-height: 1.6; }
.admin-maintenance-form { display: grid; gap: 9px; }.admin-maintenance-form > label:not(.admin-confirm-check) { color: #526071; font-size: var(--type-caption); font-weight: 600; }
.admin-maintenance-form input[type="text"] { width: 100%; height: 40px; padding: 0 10px; border: 1px solid #cfd5dc; border-radius: 6px; }
.admin-confirm-check { display: flex; align-items: flex-start; gap: 7px; color: #687383; font-size: var(--type-caption); line-height: 1.45; }.admin-confirm-check input { margin-top: 2px; }
.admin-maintenance-form .admin-danger-button { justify-self: start; }
.admin-flash { width: min(calc(100% - 48px), 1360px); margin: 12px auto 0; padding: 11px 14px; border-radius: 5px; font-size: var(--type-label); }.admin-flash.success { background: #e7f5ed; color: #247049; }.admin-flash.error { background: #fbeaec; color: #9a303b; }
.admin-login { display: grid; min-height: 100svh; padding: 24px; background: #f4f6f8; place-items: center; }.admin-login > section { width: min(100%, 390px); padding: 30px; border: 1px solid #dde2e7; border-radius: 8px; background: #fff; }.admin-login .admin-form { margin-top: 24px; }.admin-text-link { display: block; margin-top: 18px; color: #687383; font-size: var(--type-caption); text-align: center; }
.admin-login .admin-form input.admin-primary-button[type="submit"] {
  width: 100%;
  border: 0;
  background: #344863;
  color: #fff;
}

@media (max-width: 980px) {
  .admin-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .admin-detail-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .admin-ticket-layout { grid-template-columns: 1fr; }.admin-ticket-sidebar { order: -1; }
}
@media (max-width: 1200px) and (min-width: 981px) {
  .admin-dashboard-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .support-heading { align-items: flex-start; flex-direction: column; }
  .support-ticket-card { grid-template-columns: 76px minmax(0, 1fr) 16px; padding: 14px; }
  .admin-frame { display: block; }.admin-sidebar { position: fixed; z-index: 80; width: 224px; transform: translateX(-100%); transition: transform .2s ease; }.admin-sidebar.open { transform: translateX(0); }
  .admin-menu-toggle { display: block; }.admin-topbar { padding: 0 16px; }.admin-main { width: min(calc(100% - 28px), 1360px); padding-top: 24px; }
  .admin-stat-grid, .admin-dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.admin-stat-grid article:last-child { grid-column: span 2; }
  .admin-dashboard-stats article:last-child { grid-column: auto; }
  .admin-page-heading { flex-direction: column; }.admin-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-action-panel { align-items: stretch; flex-direction: column; }.admin-action-panel form { flex-wrap: wrap; }
  .admin-notification-panel { grid-template-columns: 1fr; }
  .admin-point-grant-panel { grid-template-columns: 1fr; }
  .admin-maintenance-grid { grid-template-columns: 1fr; }
  .admin-key-values dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-product-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .temporary-cache-tool { align-items: stretch; flex-direction: column; margin-top: -18px; }.temporary-cache-tool form, .temporary-cache-button { width: 100%; }
}
@media (max-width: 600px) {
  .admin-unused-credit-page .admin-table-panel { overflow: visible; border: 0; background: transparent; }
  .admin-unused-credit-table { min-width: 0; }
  .admin-unused-credit-table thead { display: none; }
  .admin-unused-credit-table tbody { display: grid; gap: 10px; }
  .admin-unused-credit-table tr { display: grid; padding: 4px 12px; border: 1px solid var(--unused-credit-border); border-radius: 12px; background: #fff; }
  .admin-unused-credit-table td { display: grid; min-width: 0; min-height: 0; grid-template-columns: minmax(112px, .45fr) minmax(0, 1fr); align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f0e9fd; overflow-wrap: anywhere; }
  .admin-unused-credit-table td:last-child { border-bottom: 0; }
  .admin-unused-credit-table td::before { color: var(--unused-credit-heading); content: attr(data-label); font-size: var(--type-caption); font-weight: 600; }
  .admin-unused-credit-table td small { grid-column: 2; margin-top: -6px; }
}
@media (max-width: 480px) {
  .admin-unused-credit-summary { grid-template-columns: 1fr; }
  .admin-unused-credit-summary article:last-child { grid-column: auto; }
  .admin-unused-credit-section-heading { align-items: flex-start; flex-direction: column; gap: 7px; }
  .admin-point-grant-panel { gap: 17px; padding: 16px; }
  .admin-point-grant-fields { grid-template-columns: 1fr; }
  .admin-point-grant-detail-field { grid-column: auto; }
  .admin-point-grant-checks { display: grid; }
  .admin-point-grant-form > input[type="submit"] { width: 100%; }
}
/* Coupon gift surface */
.coupon-main {
  display: grid;
  width: min(100%, 920px);
  gap: 18px;
  padding-bottom: 72px;
}
.coupon-main > .unified-page-hero { margin-bottom: 4px; }
.coupon-alert {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 15px 17px;
  border: 2px solid #d16a88;
  border-radius: 8px;
  background: #fff1f5;
  box-shadow: 3px 3px 0 rgb(133 57 91 / 12%);
  color: #754057;
  outline: 0;
}
.coupon-alert > span {
  display: grid;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background: #d16a88;
  color: #fff;
  font-size: var(--type-card-title);
  font-weight: 600;
  place-items: center;
}
.coupon-alert strong { color: #8d3659; font-size: var(--type-body); }
.coupon-alert p { margin: 3px 0 0; font-size: var(--type-small); line-height: 1.55; }
.coupon-alert a {
  display: inline-block;
  margin-top: 7px;
  color: #7243bb;
  font-size: var(--type-label);
  font-weight: 600;
}
.coupon-blocked-card {
  border-color: #7951c7;
  background: #f5edfb;
  box-shadow: 3px 3px 0 rgb(83 45 144 / 12%);
  color: #5e438c;
}
.coupon-blocked-card > span { background: #7951c7; }
.coupon-blocked-card h2 { margin: 0; color: #5632ad; font-size: var(--type-section-title); }
.coupon-blocked-card p { max-width: 620px; margin-top: 7px; color: #71549f; }
.coupon-blocked-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 13px; margin-top: 16px; }
.coupon-blocked-card .coupon-result-button {
  display: grid;
  width: auto;
  min-height: 44px;
  margin: 0;
  padding: 0 18px;
  color: #fff;
  font-size: var(--type-small);
  place-items: center;
}
.coupon-blocked-card .coupon-result-secondary { margin: 0; color: #6740b0; }
.coupon-register-card {
  position: relative;
  display: grid;
  min-height: 238px;
  grid-template-columns: 126px minmax(180px, .7fr) minmax(300px, 1fr);
  align-items: center;
  gap: 22px;
  padding: 26px;
  overflow: hidden;
  border: 14px solid transparent;
  border-image: url("/images/pixel_frame_purple.svg") 14 stretch;
  background: #fbf5fe;
  box-shadow: 0 12px 26px rgb(83 45 144 / 10%);
}
.coupon-register-card::before,
.coupon-register-card::after {
  display: none;
  content: none;
}
.coupon-gift-art {
  display: block;
  width: 108px;
  height: auto;
  justify-self: center;
  image-rendering: pixelated;
}
.coupon-register-copy { position: relative; z-index: 1; min-width: 0; }
.coupon-guide header p {
  margin: 0;
  color: #71549f;
  font-size: var(--type-caption);
  font-weight: 600;
  letter-spacing: .12em;
}
.coupon-register-copy h2 { margin: 0; color: #5632ad; font-size: var(--type-section-title-lg); }
.coupon-register-copy > span {
  display: block;
  margin-top: 8px;
  color: #71549f;
  font-size: var(--type-small);
  line-height: 1.55;
  word-break: keep-all;
}
.coupon-register-form { position: relative; z-index: 1; display: grid; gap: 11px; }
.coupon-code-field { display: grid; gap: 7px; }
.coupon-code-field label { color: #604d76; font-size: var(--type-label); font-weight: 600; }
.coupon-code-field input {
  --coupon-input-frame: url("/images/pixel_frame_input.svg?v=1");

  box-sizing: border-box;
  width: 100%;
  height: 54px;
  padding: 0 1px;
  border: 14px solid transparent;
  border-image-source: var(--coupon-input-frame);
  border-image-slice: 14 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  background-clip: border-box;
  background-origin: border-box;
  box-shadow: none;
  clip-path: none;
  color: #4f3482;
  font: inherit;
  font-size: var(--type-subtitle);
  font-weight: 600;
  letter-spacing: .055em;
  text-transform: uppercase;
  outline: 0;
}
.coupon-code-field input::placeholder { color: #71549f; font-size: var(--type-small); letter-spacing: .02em; opacity: 1; }
.coupon-code-field input:focus {
  outline: 3px solid #5a43bc;
  outline-offset: 2px;
  box-shadow: none;
}
.coupon-code-field input[aria-invalid="true"] { --coupon-input-frame: url("/images/pixel_frame_error.svg?v=1"); }
.coupon-code-field small { color: #71549f; font-size: var(--type-caption); }
.coupon-submit-button,
.coupon-result-button {
  --coupon-action-frame: url("/images/pixel_frame_settings_primary.svg?v=1");

  display: grid;
  box-sizing: border-box;
  min-height: 54px;
  padding: 0 12px;
  border: 14px solid transparent;
  border-image-source: var(--coupon-action-frame);
  border-image-slice: 14 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  background-clip: border-box;
  background-origin: border-box;
  box-shadow: none;
  clip-path: none;
  color: #fff;
  font: inherit;
  font-size: var(--type-body);
  font-weight: 600;
  cursor: pointer;
  image-rendering: pixelated;
  place-items: center;
  text-decoration: none;
  white-space: nowrap;
}
.coupon-submit-button:hover,
.coupon-result-button:hover { filter: brightness(1.03); }
.coupon-submit-button:active,
.coupon-result-button:active { filter: brightness(.96); transform: translateY(1px); }
.coupon-submit-button:focus-visible,
.coupon-result-button:focus-visible,
.coupon-result-secondary:focus-visible,
.wallet-coupon-entry:focus-visible {
  outline: 3px solid #ffd75e;
  outline-offset: 3px;
}
.coupon-submit-button:disabled { cursor: wait; opacity: .7; }
.coupon-submit-status { min-height: 16px; margin: 0; color: #71549f; font-size: var(--type-caption); }
.coupon-guide {
  --coupon-surface-frame: url("/images/pixel_frame_surface.svg?v=1");

  padding: 24px;
  border: 8px solid transparent;
  border-image-source: var(--coupon-surface-frame);
  border-image-slice: 8 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  background-clip: border-box;
  background-origin: border-box;
  box-shadow: none;
  clip-path: none;
  image-rendering: pixelated;
}
.coupon-guide > header { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.coupon-guide-heading-art {
  display: block;
  width: 38px;
  height: auto;
  flex: 0 0 auto;
  image-rendering: pixelated;
}
.coupon-guide h2 { margin: 3px 0 0; color: #5632ad; font-size: var(--type-card-title); }
.coupon-guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.coupon-guide-grid article {
  --coupon-benefit-frame: url("/images/pixel_frame_input.svg?v=1");

  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: start;
  gap: 11px;
  padding: 8px;
  border: 14px solid transparent;
  border-image-source: var(--coupon-benefit-frame);
  border-image-slice: 14 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  background-clip: border-box;
  background-origin: border-box;
  box-shadow: none;
  clip-path: none;
  image-rendering: pixelated;
}
.coupon-benefit-art {
  display: block;
  width: 54px;
  height: 48px;
  object-fit: contain;
  image-rendering: pixelated;
}
.coupon-benefit-art--credit { width: 42px; justify-self: center; }
.coupon-guide-grid strong { color: #6040a5; font-size: var(--type-small); }
.coupon-guide-grid p,
.coupon-policy-note { margin: 4px 0 0; color: #71549f; font-size: var(--type-label); line-height: 1.6; }
.coupon-policy-note {
  --coupon-policy-frame: url("/images/pixel_frame_input.svg?v=1");

  margin-top: 13px;
  padding: 4px 6px;
  border: 14px solid transparent;
  border-image-source: var(--coupon-policy-frame);
  border-image-slice: 14 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  background-clip: border-box;
  background-origin: border-box;
  box-shadow: none;
  clip-path: none;
  image-rendering: pixelated;
}
.coupon-result-main { max-width: 760px; }
.coupon-result-card {
  position: relative;
  display: grid;
  justify-items: center;
  padding: 38px 32px 34px;
  overflow: hidden;
  border: 14px solid transparent;
  border-image: url("/images/pixel_frame_purple.svg") 14 stretch;
  background: #fffaff;
  text-align: center;
}
.coupon-result-card::before {
  position: absolute;
  inset: 8px;
  border: 2px dotted #d8c3f2;
  content: "";
  pointer-events: none;
}
.coupon-result-card > * { position: relative; z-index: 1; }
.coupon-result-sparkles { color: #e3b445; font-size: var(--type-card-title); letter-spacing: .2em; }
.coupon-result-card h2 { margin: 10px 0 0; color: #5632ad; font-size: var(--type-page-title-lg); }
.coupon-result-facts {
  display: grid;
  width: min(100%, 480px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 24px;
}
.coupon-result-facts > div {
  display: grid;
  gap: 5px;
  padding: 15px;
  border: 1px solid #e1d4f2;
  border-radius: 7px;
  background: #f7effd;
}
.coupon-result-facts span { color: #71549f; font-size: var(--type-caption); }
.coupon-result-facts strong { color: #6b43c2; font-size: var(--type-section-title); }
.coupon-result-card > p {
  max-width: 540px;
  margin: 18px 0 0;
  color: #71549f;
  font-size: var(--type-small);
  line-height: 1.7;
  word-break: keep-all;
}
.coupon-result-card .coupon-result-deadline {
  margin-top: 10px;
  padding: 10px 13px;
  border-radius: 6px;
  background: #fff0d2;
  color: #805d2e;
}
.coupon-result-button { width: min(100%, 340px); margin-top: 25px; }
.coupon-result-secondary {
  margin-top: 13px;
  color: #7652bb;
  font-size: var(--type-label);
  font-weight: 600;
}
.wallet-summary small {
  display: block;
  margin-top: 2px;
  color: #71549f;
  font-size: var(--type-caption);
  font-weight: 600;
}
.wallet-coupon-entry {
  --wallet-card-accent: #7650c6;
  --wallet-card-border: #9874d5;
  --wallet-card-surface: #f7effd;
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: 86px;
  grid-template-columns: 42px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 13px;
  padding: 15px 18px;
  margin-top: 24px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background-color: var(--wallet-card-surface);
  color: inherit;
  clip-path: var(--wallet-frame-clip);
  filter: drop-shadow(0 3px 0 rgb(92 55 139 / 11%));
  text-decoration: none;
  transition: filter .16s ease, transform .16s ease;
}
.wallet-coupon-entry::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: var(--wallet-card-border);
  clip-path: var(--wallet-frame-clip);
  content: "";
  pointer-events: none;
}
.wallet-coupon-entry::after {
  position: absolute;
  z-index: 1;
  inset: 2px;
  background-color: var(--wallet-card-surface);
  background-image: none;
  box-shadow: inset 0 0 0 3px rgb(255 255 255 / 42%);
  clip-path: var(--wallet-frame-inner-clip);
  content: "";
  pointer-events: none;
}
.wallet-coupon-entry > * { position: relative; z-index: 2; }
.wallet-coupon-entry-icon {
  display: block;
  width: 41px;
  height: auto;
  image-rendering: pixelated;
}
.wallet-coupon-entry > span:nth-child(2) { display: grid; gap: 2px; }
.wallet-coupon-entry small { color: #71549f; font-size: var(--type-caption); font-weight: 600; letter-spacing: .13em; }
.wallet-coupon-entry strong { color: #5632ad; font-size: var(--type-body-lg); }
.wallet-coupon-entry em { color: #71549f; font-size: var(--type-label); font-style: normal; line-height: 1.45; }
.wallet-coupon-entry > b { color: #8259cc; font-size: var(--type-section-title-lg); }
.wallet-coupon-entry:hover { filter: drop-shadow(0 6px 0 rgb(92 55 139 / 14%)); transform: translateY(-3px); }
.wallet-coupon-entry:active { filter: drop-shadow(0 2px 0 rgb(92 55 139 / 12%)); transform: translateY(1px); }

@media (max-width: 639px) {
  .coupon-main { gap: 14px; padding-bottom: 54px; }
  .coupon-register-card {
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 13px;
    padding: 18px 15px 20px;
  }
  .coupon-gift-art { width: 68px; }
  .coupon-register-copy h2 { margin-top: 5px; font-size: var(--type-section-title); }
  .coupon-register-copy > span { margin-top: 5px; font-size: var(--type-label); }
  .coupon-register-form { grid-column: 1 / -1; margin-top: 3px; }
  .coupon-code-field input { height: 52px; padding: 0 12px; font-size: var(--type-subtitle); }
  .coupon-guide { padding: 17px 15px; }
  .coupon-guide-grid { grid-template-columns: 1fr; }
  .coupon-guide-grid article { padding: 13px; }
  .coupon-alert { grid-template-columns: 32px minmax(0, 1fr); padding: 13px; }
  .coupon-alert > span { width: 31px; height: 31px; }
  .coupon-result-card { padding: 31px 16px 28px; }
  .coupon-result-card h2 { font-size: var(--type-section-title-lg); }
  .coupon-result-facts { gap: 7px; margin-top: 19px; }
  .coupon-result-facts > div { padding: 12px 8px; }
  .coupon-blocked-actions { align-items: stretch; flex-direction: column; }
  .coupon-blocked-card .coupon-result-button,
  .coupon-blocked-card .coupon-result-secondary { width: 100%; text-align: center; }
  .coupon-result-facts strong { font-size: var(--type-card-title); }
  .wallet-summary small { font-size: var(--type-caption); white-space: nowrap; }
  .wallet-coupon-entry { grid-template-columns: 38px minmax(0, 1fr) 18px; padding: 13px; }
  .wallet-coupon-entry-icon { width: 36px; height: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .coupon-submit-button,
  .coupon-result-button,
  .wallet-product,
  .wallet-purchase-button,
  .wallet-activation-button,
  .wallet-coupon-entry { transition: none; }
  .wallet-purchase-button:active,
  .wallet-activation-button:active,
  .wallet-coupon-entry:hover,
  .wallet-coupon-entry:active { transform: none; }
}

.distribution-charts { margin: 36px 0; }
.distribution-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.distribution-panel h3 { margin: 0 0 18px; font-size: var(--type-section-title); }
.distribution-bars { display: grid; gap: 12px; }
.distribution-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) 38px; gap: 10px; align-items: center; font-size: var(--type-body-lg); }
.distribution-row strong { text-align: right; font-variant-numeric: tabular-nums; }
.distribution-row > small { grid-column: 1 / -1; color: #8b95a1; font-size: var(--type-small); line-height: 1.55; }
.distribution-track { height: 12px; overflow: hidden; background: #e5e8eb; border-radius: 3px; }
.distribution-track i { display: block; height: 100%; background: #3182f6; border-radius: 3px; }
.distribution-panel:nth-child(2) .distribution-track i { background: #00a980; }
.chart-note { margin: 18px 0 0; color: #6b7684; font-size: var(--type-body-lg); line-height: 1.65; }
@media (max-width: 720px) { .distribution-grid { grid-template-columns: 1fr; } }
.astrology-chart-section { margin: 36px 0; }
.astrology-chart-orientation { max-width: 720px; margin: 8px 0 22px; color: #6b7684; font-size: var(--type-body-lg); line-height: 1.7; }
.astrology-chart-orientation strong { color: #5632ad; }
.natal-chart-figure { margin: 0; }
.natal-chart-figure figcaption { max-width: 680px; margin: 16px auto 0; color: #6b7684; font-size: var(--type-body); line-height: 1.65; text-align: center; word-break: keep-all; }
.astrology-wheel { display: block; width: min(100%, 620px); aspect-ratio: 1; margin-inline: auto; overflow: visible; color: #191f28; }
.wheel-surface { fill: #fffdf7; }
.aspect-surface { fill: #fff; }
.wheel-ring, .zodiac-inner-ring, .planet-inner-ring, .aspect-boundary { fill: none; stroke: #a9906a; stroke-width: 1.2; }
.wheel-ring { stroke-width: 1.7; }
.planet-inner-ring, .aspect-boundary { stroke: #d8c8ae; stroke-width: .8; }
.zodiac-tick { stroke: #a9906a; stroke-width: .8; }
.astrology-wheel .zodiac-glyph { font-family: 'Arial Unicode MS', 'Noto Sans Symbols 2', 'Segoe UI Symbol', sans-serif; font-size: var(--type-subtitle); font-weight: 700; paint-order: stroke; stroke: #fffdf7; stroke-width: 2px; stroke-linejoin: round; }
.zodiac-glyph--aries, .zodiac-glyph--leo, .zodiac-glyph--sagittarius { fill: #e5484d; }
.zodiac-glyph--taurus, .zodiac-glyph--virgo, .zodiac-glyph--capricorn { fill: #8a7600; }
.zodiac-glyph--gemini, .zodiac-glyph--libra, .zodiac-glyph--aquarius { fill: #00a4a6; }
.zodiac-glyph--cancer, .zodiac-glyph--scorpio, .zodiac-glyph--pisces { fill: #4054d6; }
.house-cusp { stroke: #b8a585; stroke-width: .72; }
.house-cusp--axis { stroke: #7d6748; stroke-width: 1.15; }
.astrology-wheel .house-label { fill: #675d50; font-size: var(--type-chart-label); font-weight: 750; paint-order: stroke; stroke: #fff; stroke-width: 2.4px; stroke-linejoin: round; }
.aspect-line { stroke: #8b95a1; stroke-width: .85; opacity: .68; }
.aspect-line.square, .aspect-line.opposition { stroke: #ec5aa5; }
.aspect-line.trine, .aspect-line.sextile { stroke: #38aee8; }
.aspect-line.conjunction { stroke: #d97706; }
.angle-axis { stroke: #7c8692; stroke-width: 1.05; opacity: .75; }
.angle-axis--asc, .angle-axis--dsc { stroke: #7650c6; }
.angle-label-bg { fill: #fff; stroke: #7c8692; stroke-width: .7; }
.angle-marker--asc .angle-label-bg, .angle-marker--dsc .angle-label-bg { fill: #f7f1ff; stroke: #7650c6; }
.astrology-wheel .angle-label { fill: #5f6975; font-family: 'Arial Unicode MS', 'Noto Sans Symbols 2', 'Segoe UI Symbol', sans-serif; font-size: var(--type-chart-micro); font-weight: 800; letter-spacing: .05px; }
.astrology-wheel .angle-marker--asc .angle-label, .astrology-wheel .angle-marker--dsc .angle-label { fill: #6843b0; }
.planet-leader { stroke: currentColor; stroke-width: .55; opacity: .5; }
.planet-exact-point { fill: currentColor; }
.astrology-wheel .planet-glyph { fill: currentColor; font-family: 'Arial Unicode MS', 'Noto Sans Symbols 2', 'Segoe UI Symbol', sans-serif; font-size: var(--type-body-lg); font-weight: 700; paint-order: stroke; stroke: #fffdf7; stroke-width: 2.5px; stroke-linejoin: round; }
.astrology-wheel .planet-position { fill: currentColor; font-family: 'Arial Unicode MS', 'Noto Sans Symbols 2', 'Segoe UI Symbol', sans-serif; font-size: var(--type-chart-micro); font-weight: 750; paint-order: stroke; stroke: #fffdf7; stroke-width: 2.2px; stroke-linejoin: round; }
.planet-marker--sun, .planet-tone--sun { color: #bd6200; }
.planet-marker--moon, .planet-tone--moon { color: #4452c7; }
.planet-marker--mercury, .planet-tone--mercury { color: #8b32a8; }
.planet-marker--venus, .planet-tone--venus { color: #07978a; }
.planet-marker--mars, .planet-tone--mars { color: #e5484d; }
.planet-marker--jupiter, .planet-tone--jupiter { color: #55606d; }
.planet-marker--saturn, .planet-tone--saturn { color: #9a6700; }
.planet-marker--uranus, .planet-tone--uranus { color: #4f5bd5; }
.planet-marker--neptune, .planet-tone--neptune { color: #0093a9; }
.planet-marker--pluto, .planet-tone--pluto { color: #b42318; }
.planet-marker--true_node, .planet-tone--true_node { color: #111827; }
.chart-legend { --chart-legend-title: #5a43bc; --chart-legend-border: #dfd1fa; --chart-legend-surface: #fff; max-width: 680px; margin: 28px auto 0; border: 1px solid var(--chart-legend-border); border-radius: 12px; background: var(--chart-legend-surface); }
.chart-legend > summary { display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; cursor: pointer; list-style: none; border-radius: 12px; }
.chart-legend > summary::-webkit-details-marker { display: none; }
.chart-legend > summary:focus-visible { outline: 2px solid var(--chart-legend-title); outline-offset: 3px; }
.chart-legend h3 { margin: 0; color: var(--chart-legend-title); font-size: var(--type-card-title); }
.chart-legend-toggle { flex: 0 0 auto; color: var(--chart-legend-title); font-size: var(--type-section-title-lg); line-height: 1; }
.chart-legend-toggle::before { content: "+"; }
.chart-legend[open] .chart-legend-toggle::before { content: "−"; }
.chart-legend ul { list-style: none; margin: 0 16px 16px; padding: 10px 0 0; border-top: 1px solid var(--chart-legend-border); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; }
.chart-legend li { display: grid; min-width: 0; grid-template-columns: minmax(70px, max-content) minmax(0, 1fr); align-items: start; gap: 10px; border-bottom: 1px solid #e5e8eb; padding: 9px 0; font-size: var(--type-body); }
.chart-legend strong { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.chart-legend li > span { min-width: 0; color: #6b7684; line-height: 1.5; text-align: right; word-break: keep-all; }
.chart-legend-glyph { display: inline-grid; width: 20px; height: 20px; flex: 0 0 20px; font-family: 'Arial Unicode MS', 'Noto Sans Symbols 2', 'Segoe UI Symbol', sans-serif; font-size: var(--type-subtitle); font-style: normal; place-items: center; }
@media (max-width: 720px) { .chart-legend ul { grid-template-columns: 1fr; } }
.astrology-specialist { margin: 42px 0; }
.astrology-specialist-heading { margin-bottom: 24px; }
.astrology-specialist-heading h2 { margin: 0; color: #5632ad; font-size: var(--type-section-title-lg); }
.astrology-specialist-heading > p:last-child { max-width: 760px; margin: 10px 0 0; color: #806d99; font-size: var(--type-body); line-height: 1.75; }
.astrology-reading-list { display: grid; gap: 9px; }
.astrology-reading-group { margin: 22px 2px 4px; color: #7650c6; font-size: var(--type-body); }
.astrology-reading-group:first-child { margin-top: 0; }
.astrology-reading-item { overflow: hidden; border: 1px solid #dfd1f5; border-radius: 9px; background: #fbf5fe; }
.astrology-reading-header { display: grid; min-height: 76px; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; align-items: center; padding: 13px 15px; }
.astrology-reading-glyph { display: grid; width: 36px; height: 36px; border-radius: 50%; background: #e9ddf9; color: #6842b5; font-family: 'Nanum Myeongjo', 'Noto Serif KR', serif; font-size: var(--type-section-title); font-weight: 600; place-items: center; }
.astrology-reading-label { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr); gap: 3px; align-items: baseline; word-break: keep-all; overflow-wrap: anywhere; }
.astrology-reading-label h4 { margin: 0; color: #5632ad; font-size: var(--type-body-lg); }
.astrology-reading-label small { color: #806d99; font-size: var(--type-label); }
.astrology-reading-label em { grid-column: 1 / -1; color: #9a83b4; font-size: var(--type-label); font-style: normal; font-variant-numeric: tabular-nums; }
.astrology-reading-body { padding: 4px 20px 20px 63px; border-top: 1px solid #eadff6; }
.astrology-reading-body > p { margin: 12px 0 0; color: #685678; font-size: var(--type-body); line-height: 1.78; word-break: keep-all; }
.astrology-reading-body .astrology-reading-summary { color: #6040b2; font-weight: 600; }
.astrology-reading-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; margin: 17px 0 0; }
.astrology-reading-points div { padding: 11px 0; border-top: 1px solid #eee5f6; }
.astrology-reading-points dt { color: #8d61dc; font-size: var(--type-label); font-weight: 600; }
.astrology-reading-points dd { margin: 5px 0 0; color: #685678; font-size: var(--type-small); line-height: 1.65; }
@media (max-width: 639px) {
  .astrology-reading-header { grid-template-columns: 34px minmax(0, 1fr); gap: 8px; padding: 12px; }
  .astrology-reading-glyph { width: 32px; height: 32px; font-size: var(--type-card-title); }
  .astrology-reading-label { gap: 2px; }
  .astrology-reading-body { padding: 3px 14px 16px; }
  .astrology-reading-points { grid-template-columns: 1fr; }
}
.report-focus-chart { margin: 36px 0; }
.focus-chart-legend { display: flex; gap: 18px; margin: 12px 0 22px; color: #6b7684; font-size: var(--type-body-lg); }
.focus-chart-legend span { display: flex; align-items: center; gap: 6px; }
.focus-chart-legend i { width: 12px; height: 12px; border-radius: 2px; background: #3182f6; }
.focus-chart-legend .astrology-key { background: #00a980; }
.focus-chart-rows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.focus-chart-rows h3 { font-size: var(--type-card-title); margin: 0 0 12px; }
.divergent-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) 32px; align-items: center; gap: 8px; margin: 8px 0; font-size: var(--type-body-lg); }
.divergent-track { position: relative; height: 10px; background: #e5e8eb; }
.divergent-track i { position: absolute; top: 0; height: 100%; max-width: 50%; background: #3182f6; }
.divergent-track i.astrology { background: #00a980; }
.divergent-track i.positive { left: 50%; }.divergent-track i.negative { right: 50%; }
@media (max-width: 720px) { .focus-chart-rows { grid-template-columns: 1fr; } }
.term-glossary {
  --term-glossary-frame: url("/images/pixel_frame_narrative_section_white.svg?v=1");

  margin: 24px 0;
  border: 14px solid transparent;
  border-image-source: var(--term-glossary-frame);
  border-image-slice: 14 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  background-clip: border-box;
  background-origin: border-box;
  box-shadow: none;
  clip-path: none;
  image-rendering: pixelated;
}
.term-glossary summary {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 16px 14px;
  cursor: pointer;
  list-style: none;
}
.term-glossary summary::-webkit-details-marker { display: none; }
.term-glossary summary:focus { outline: 0; }
.term-glossary summary:focus-visible {
  outline: 0;
  box-shadow: inset 0 0 0 2px #d2bdec;
}
.term-glossary summary::before {
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid #7650c6;
  content: "";
  transform-origin: center;
}
.term-glossary[open] summary::before { transform: rotate(90deg); }
.term-glossary[open] summary { margin-bottom: 14px; border-bottom: 2px solid #eadff6; }
.term-glossary summary span { display: flex; justify-content: space-between; gap: 16px; }
.term-glossary summary small { color: #8b95a1; }
.term-glossary-groups { padding: 0 14px 8px; }
.term-glossary-groups section + section { margin-top: 20px; }
.term-glossary-groups h3 { margin: 0; color: #7650c6; font-size: var(--type-body-lg); }
.term-glossary dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; margin: 8px 0 22px; }
.term-glossary dl div { padding: 14px 0; border-top: 1px solid #f2f4f6; }
.term-glossary dt { font-weight: 600; margin-bottom: 5px; }.term-glossary dd { margin: 0; color: #4e5968; line-height: 1.65; }
@media (max-width: 720px) { .term-glossary summary { padding: 14px 10px; } .term-glossary-groups { padding-inline: 10px; } .term-glossary dl { grid-template-columns: 1fr; } .term-glossary summary span { display: block; } .term-glossary summary small { display: block; margin-top: 4px; } }
.story-toc {
  margin: 2rem 0;
  padding: 1.5rem;
  background-color: #f9f9f9;
  border-radius: 8px;
}
.story-toc h2 {
  font-size: var(--type-section-title);
  margin-top: 0;
  margin-bottom: 1rem;
  color: #333d4b;
}
.story-toc ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.story-toc li {
  margin-bottom: 0.5rem;
}
.story-toc a {
  text-decoration: none;
  color: #3182f6;
  font-weight: 400;
}
.story-toc a:hover {
  text-decoration: underline;
}

/* Report visual system */
.report-reading { color: #58466d; font-family: 'AppNumerals', 'SchoolSafeUniverse', 'Pretendard', system-ui, sans-serif; }
.report-reading .report-title { margin-bottom: 24px; padding-bottom: 22px; border-bottom: 1px solid #dfd1f5; }
.report-reading .report-title h1 { color: #4f2aa5; font-size: var(--type-page-title); font-weight: 600; letter-spacing: 0; }
.report-reading .report-title > p:last-of-type { margin-top: 9px; color: #806d99; font-size: var(--type-body); }
.analysis-tabs { top: 90px; gap: 4px; margin: 0 0 26px; padding: 4px; border: 1px solid #dfd1f5; border-radius: 8px; background: rgb(247 238 253 / 96%); backdrop-filter: blur(8px); }
.analysis-tabs a { min-height: 40px; border-radius: 6px; color: #917dae; font-size: var(--type-body); }
.analysis-tabs a.active { border: 0; background: #8d61dc; color: #ffffff; }
.reading-navigator { top: 140px; margin: -18px 0 18px; border: 1px solid #dfd1f5; border-radius: 0 0 8px 8px; background: rgb(251 245 254 / 97%); }
.reading-progress { height: 3px; background: #e9dff5; }
.reading-progress i { background: #8d61dc; }
.reading-controls { min-height: 38px; padding: 0 12px; }
.reading-controls span { color: #7650c6; font-size: var(--type-small); }
.story-toc { margin: 18px 0 26px; padding: 18px; border: 1px solid #dfd1f5; background: #fbf5fe; }
.story-toc h2 { margin: 0 0 12px; color: #5632ad; font-size: var(--type-card-title); }
.story-toc ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 18px; }
.story-toc li { min-width: 0; margin: 0; }
.story-toc a { display: block; color: #8060ce; font-size: var(--type-small); font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.analysis-introduction { margin: 0 0 18px; padding: 4px 3px 0; }
.analysis-introduction .section-kicker, .report-reading .section-kicker { margin-bottom: 6px; color: #9a70df; font-size: var(--type-small); font-weight: 600; }
.analysis-introduction h2 { color: #5632ad; font-size: var(--type-section-title-lg); font-weight: 600; }
.analysis-introduction > p:last-child { margin-top: 9px; color: #806d99; font-size: var(--type-body-lg); line-height: 1.7; }
.calculation-subject { margin: 18px 0 0; padding: 20px; border-color: #dfd1f5; background: #fbf5fe; }
.calculation-subject h2 { color: #5632ad; font-size: var(--type-section-title); }
.subject-facts { margin-top: 16px; border-color: #eadff6; }
.subject-facts div { border-color: #eadff6; }
.subject-facts dt, .subject-chart-summary span { color: #9a83b4; font-size: var(--type-label); }
.subject-facts dd, .subject-chart-summary p { color: #604d76; font-family: 'AppNumerals', 'SchoolSafeUniverse', 'Pretendard', system-ui, sans-serif; font-size: var(--type-body); }
.subject-chart-summary { gap: 12px; margin-top: 16px; }
.subject-chart-summary div { padding: 13px; border-radius: 6px; background: #f2e8fa; }
.executive-summary { margin-top: 22px; padding: 24px; border: 1px solid #dfd1f5; border-radius: 8px; background: #fbf5fe; }
.executive-summary h2 { color: #4f2aa5; font-size: var(--type-section-title-lg); }
.executive-summary-heading--with-tamami { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: start; gap: 18px; }
.executive-summary-tamami { display: block; width: 58px; height: auto; object-fit: contain; }
.executive-summary-prose { display: grid; gap: 7px; margin-top: 18px; }
.executive-summary-prose p {
  margin: 0;
  color: #604d76;
  font-family: 'AppNumerals', 'SchoolSafeUniverse', 'Pretendard', system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.75;
  word-break: keep-all;
}
.five-element-profile { margin-top: 26px; padding: 24px; border: 1px solid #dfd1f5; border-radius: 8px; background: #fbf5fd; }
.five-element-profile h2 { margin: 0; color: #5632ad; font-size: var(--type-section-title); }
.five-element-profile-heading { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: start; gap: 18px; }
.five-element-profile-tamami { display: block; width: 58px; height: auto; object-fit: contain; }
.five-element-profile-prose { display: grid; gap: 12px; margin-top: 16px; }
.five-element-profile-prose p { margin: 0; color: #685678; line-height: 1.8; word-break: keep-all; }
.element-summary-basis { display: block; margin-top: 2px; color: #8a77a3; font-size: 11px; font-weight: 500; }
.person-core-structure-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.person-core-structure-facts div { display: flex; gap: 6px; align-items: baseline; padding: 6px 10px; border: 1px solid #e6daf7; border-radius: 999px; background: #fff; }
.person-core-structure-facts dt { color: #8a77a3; font-size: 12px; }
.person-core-structure-facts dd { margin: 0; color: #5632ad; font-size: 13px; font-weight: 700; }
.core-structure, .integrated-synthesis, .editorial-overview { margin-top: 26px; }
.core-structure h2, .editorial-overview h2 { color: #5632ad; font-size: var(--type-section-title); }
.core-structure-prose { margin-top: 16px; border-color: #dfd1f5; }
.core-structure-prose section, .editorial-overview li { border-color: #e7dcf4; }
.core-structure-prose span, .editorial-overview li > span { color: #9a70df; }
.core-structure-prose p, .editorial-overview > p:last-of-type { color: #604d76; font-size: var(--type-body-lg); line-height: 1.75; }
.integrated-synthesis > p:not(.section-kicker) { margin: 9px 0 0; color: #806d99; font-size: var(--type-body); line-height: 1.7; }
.synthesis-group { margin-top: 12px; padding: 16px; border: 1px solid #dfd1f5; border-radius: 8px; background: #fbf5fe; }
.synthesis-group > h3 { margin: 0; color: #5632ad; font-size: var(--type-body-lg); }
.synthesis-group > h3 + p { margin: 5px 0 0; color: #9a87b1; font-size: var(--type-label); }
.synthesis-group ul { display: grid; gap: 8px; margin: 13px 0 0; padding: 0; list-style: none; }
.synthesis-group li { display: grid; grid-template-columns: minmax(92px, .4fr) minmax(0, 1fr); gap: 5px 12px; padding: 12px; border-radius: 7px; background: #f3eafa; }
.synthesis-group li > strong { color: #6040b2; font-size: var(--type-body); }
.synthesis-group li > span { color: #917dae; font-size: var(--type-label); font-weight: 600; text-align: right; }
.synthesis-group li > p { grid-column: 1 / -1; margin: 2px 0 0; color: #685678; font-size: var(--type-small); line-height: 1.65; word-break: keep-all; }
.editorial-overview { margin-bottom: 28px; padding: 22px 20px; border: 1px solid #dfd1f5; border-radius: 8px; background: #fbf5fe; }
.professional-story { border: 0; }
.story-chapter-heading { margin-top: 28px; padding: 0 3px 10px; border-color: #9a70df; }
.story-chapter-heading span { color: #5632ad; font-size: var(--type-card-title); }
.story-chapter-heading p { margin-top: 5px; color: #917dae; font-size: var(--type-small); }
.story-chapter { margin-top: 10px; padding: 20px; border: 1px solid #dfd1f5; border-radius: 8px; background: #fbf5fe; }
.story-chapter > header p { color: #806d99; font-size: var(--type-small); }
.chapter-number { color: #9a70df; font-size: var(--type-small); }
.signal-score { color: var(--score-color); font-size: var(--type-page-title); }
.story-chapter h3 { margin-top: 13px; color: #5632ad; font-size: var(--type-section-title); overflow-wrap: anywhere; word-break: keep-all; }
.story-explanation { color: #604d76; font-size: var(--type-body-lg); line-height: 1.8; }
.signal-scale-summary { border-color: #eadff6; }
.signal-scale-summary strong { color: #8060ce; font-size: var(--type-small); }
.signal-scale-summary span { color: #6f5b86; font-size: var(--type-small); }
.signal-scale-summary small, .scale-direction-labels span, .scale-ticks, .signal-scale-chart figcaption { color: #9a87b1; }
.scale-marker { border-color: #fbf5fe; background: #6d46bd; }
.scale-marker em { background: #6d46bd; }
.interpretation-basis, .professional-metric { border-left-color: #9a70df; background: #f2e8fa; }
.interpretation-basis > span, .interpretation-basis dt { color: #7650c6; }
.interpretation-basis > p, .interpretation-basis dd, .long-form-content p, .scene-list li, .story-contexts p { color: #685678; font-size: var(--type-body); }
.interpretation-basis dl, .interpretation-basis dl div { border-color: #dfd1f5; }
.strength-shadow-pair section, .practice-question section { border: 1px solid #eadff6; background: #f7effd; }
.strength-shadow-pair section:first-child { border-top-color: #76b994; }
.strength-shadow-pair section:last-child { border-top-color: #e584a7; }
.professional-metric code, .formula-line code { color: #49365f; font-size: var(--type-body); }
.professional-metric dl { border-color: #dfd1f5; }
.story-evidence { border-color: #dfd1f5; }
.story-evidence summary { color: #6f5b86; font-size: var(--type-body); }
.story-evidence summary strong { color: #8d61dc; }
.story-evidence li, .evidence-group li { border-color: #eadff6; }
.evidence-group { border-top-color: #c8b2e8; }
.evidence-group-reinforcing { border-top-color: #76b994; }
.evidence-group-moderating { border-top-color: #e584a7; }
.evidence-group-contextual { border-top-color: #7398d6; }
.snapshot-overview { margin-top: 28px; }
.snapshot-overview h2 { color: #5632ad; font-size: var(--type-section-title); }
.snapshot-highlights { gap: 10px; margin-top: 16px; }
.snapshot-highlight { padding: 16px; border-color: #dfd1f5; background: #fbf5fe; }
.snapshot-highlight > span { color: #9a70df; font-size: var(--type-label); }
.snapshot-highlight > p:first-of-type { color: #806d99; font-size: var(--type-small); }
.snapshot-highlight > strong { color: var(--score-color); font-size: var(--type-page-title-lg); }
.snapshot-highlight h3 { color: #5632ad; font-size: var(--type-body-lg); }
.snapshot-highlight .signal-scale-summary + p { color: #685678; font-size: var(--type-body); }
.snapshot-highlight small { border-color: #eadff6; color: #6f9f83; font-size: var(--type-label); }
.signal-table-wrap { border: 1px solid #dfd1f5; border-radius: 8px; background: #fbf5fe; }
.evidence-table { color: #685678; font-size: var(--type-small); }
.evidence-table th, .evidence-table td { padding: 11px 10px; border-color: #eadff6; }
.evidence-table th { color: #765f8d; }
.report-section { margin-top: 32px; }
.report-section h2 { color: #5632ad; font-size: var(--type-section-title); }
.section-description, .report-prose, .evidence-explanation { color: #685678; font-size: var(--type-body); }
.evidence-limitation, .fixture-warning { border: 1px solid #eccbd8; border-left: 3px solid #d96d94; border-radius: 8px; background: #fbedf3; color: #79586a; font-size: var(--type-body); }
.evidence-list, .evidence-item, .evidence-fact { border-color: #eadff6; }
.evidence-id { background: #e9ddf9; color: #7650c6; }
.evidence-source { background: #f3eaf9; color: #806d99; }
.calculation-details { border-color: #dfd1f5; }
.calculation-details summary, .term-glossary summary { color: #604d76; }
.calculation-details summary strong { font-size: var(--type-body-lg); }
.calculation-details summary small, .term-glossary summary small { color: #917dae; font-size: var(--type-small); }
.compact-facts div, .term-glossary dl div { border-color: #eadff6; }
.compact-facts dt { color: #917dae; font-size: var(--type-small); }
.compact-facts dd, .term-glossary dd { color: #685678; font-size: var(--type-small); }
.pillar-grid { border-color: #eadff6; }
.pillar-grid span { color: #917dae; font-size: var(--type-small); }
.pillar-grid strong { color: #49365f; font-family: 'AppNumerals', 'SchoolSafeUniverse', 'Pretendard', system-ui, sans-serif; font-size: var(--type-section-title-lg); }
.distribution-track, .divergent-track { background-color: #e9dff5; }
.distribution-track i, .focus-chart-legend i, .divergent-track i { background: #8d61dc; }
.distribution-panel:nth-child(2) .distribution-track i, .focus-chart-legend .astrology-key, .divergent-track i.astrology { background: #e06b9f; }
.distribution-row.element-wood .distribution-track i { background: var(--element-wood-color); }
.distribution-row.element-fire .distribution-track i { background: var(--element-fire-color); }
.distribution-row.element-earth .distribution-track i { background: var(--element-earth-color); }
.distribution-row.element-metal .distribution-track i { background: var(--element-metal-color); }
.distribution-row.element-water .distribution-track i { background: var(--element-water-color); }
.wheel-surface { fill: #fbf5fe; }
.aspect-surface { fill: #fffafd; }
.wheel-ring, .zodiac-inner-ring, .planet-inner-ring, .aspect-boundary { fill: none; stroke: #bda7dc; }
.zodiac-tick { stroke: #dfd1f5; }
.report-birth-chart {
  margin-top: 18px;
}
.report-birth-chart--compact {
  margin-inline: auto;
}
.report-birth-chart > .report-birth-chart__header {
  display: flex;
  align-items: self-start;
  justify-content: flex-start;
  gap: 8px;
  margin-bottom: 14px;
  padding: 0 3px 11px;
  border-bottom: 2px dotted rgb(141 97 220 / 36%);
}
.home-birth-chart > .report-birth-chart__header {
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 0;
}
.report-birth-chart.home-birth-chart > .birth-chart-identity-strip {
  position: relative;
  margin-top: 8px;
}
.report-birth-chart.home-birth-chart > .birth-chart-identity-strip::after {
  content: none;
}
.report-birth-chart__spark { color: #8f6bd4; font-size: var(--type-body); }
.report-birth-chart .birth-chart-identity-strip { margin-top: 0; }
.ten-god-fortunes { margin-top: 38px; }
.ten-god-fortunes-heading { padding: 0 3px 18px; border-bottom: 2px solid #9a70df; }
.ten-god-fortunes-heading h2 { margin: 0; color: #4f2aa5; font-size: var(--type-section-title-lg); }
.ten-god-fortune-list { display: grid; gap: 18px; margin-top: 18px; }
.ten-god-fortune { padding: 24px; border: 1px solid #dfd1f5; border-radius: 10px; background: #fdf8fe; box-shadow: 0 8px 22px rgb(93 55 137 / 5%); }
.ten-god-fortune > header { display: flex; align-items: center; gap: 13px; padding-bottom: 16px; border-bottom: 1px solid #e8dcf5; }
.ten-god-fortune > header > span { display: grid; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; background: #7650c6; color: #fff; font-size: var(--type-label); font-weight: 600; letter-spacing: .06em; place-items: center; }
.ten-god-fortune > header > div { min-width: 0; }
.ten-god-fortune > header p { margin: 0 0 3px; color: #6f5888; font-size: var(--type-label); font-weight: 600; }
.ten-god-fortune > header h3 { margin: 0; color: #5632ad; font-size: var(--type-section-title); }
.ten-god-fortune-prose { display: grid; gap: 6px; margin-top: 18px; }
.ten-god-fortune-prose p { margin: 0; overflow-wrap: anywhere; color: #685678; line-height: 1.8; word-break: keep-all; }
.ten-god-fortune-advice { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 13px; margin-top: 20px; padding: 14px 16px; border: 1px solid #d6c2f1; border-radius: 9px; background: #f1e8fb; }
.ten-god-fortune-advice img { width: 52px; height: 52px; object-fit: contain; }
.ten-god-fortune-advice strong { color: #6441ad; font-size: var(--type-label); font-weight: 600; }
.ten-god-fortune-advice p { margin: 4px 0 0; color: #604d76; font-weight: 600; line-height: 1.65; word-break: keep-all; }
.five-element-profile-prose > strong { display: block; margin-top: 17px; color: #6541aa; font-size: var(--type-body); }
.executive-summary-prose > strong {
  display: block;
  margin-top: 10px;
  color: #6541aa;
  font-family: 'AppNumerals', 'SchoolSafeUniverse', 'Pretendard', system-ui, sans-serif;
  font-size: var(--type-body);
}
.executive-summary-prose > .report-tamami-note-title,
.five-element-profile-prose > .report-tamami-note-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #f0e9fd;
}
.report-tamami-note-title img {
  display: block;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  object-fit: contain;
  image-rendering: pixelated;
}
.person-core-closing { margin-top: 48px; padding-top: 30px; border-top: 2px solid #9a70df; }
.person-core-closing-heading { padding: 0 3px; }
.person-core-closing-heading h2 { margin: 0; color: #4f2aa5; font-size: var(--type-section-title-lg); letter-spacing: -.025em; }
.person-core-closing-guidance { display: grid; gap: 14px; margin-top: 20px; }
.person-core-closing-panel { padding: 24px; border: 1px solid #dfd1f5; border-radius: 10px; background: #fdf8fe; box-shadow: 0 8px 22px rgb(93 55 137 / 5%); }
.person-core-closing-panel > header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.person-core-closing-panel > header span { display: grid; width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; background: #7650c6; color: #fff; font-size: var(--type-caption); font-weight: 600; letter-spacing: .05em; place-items: center; }
.person-core-closing-panel h3 { margin: 0; color: #5632ad; font-size: var(--type-card-title); }
.person-core-closing-panel div { display: grid; gap: 13px; }
.person-core-closing-panel p { margin: 0; color: #685678; line-height: 1.88; word-break: keep-all; }
.person-core-closing-caution { border-color: #ead5df; background: #fef5f8; box-shadow: none; }
.person-core-closing-caution > header span { background: #cf6f96; }
.person-core-closing-caution h3 { color: #9a4c70; }
.person-core-closing-advice { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 12px; margin-top: 16px; padding: 12px 16px; overflow: hidden; border: 1px solid #ccb4ed; border-radius: 12px; background: #f8effd; }
.person-core-closing-advice::after { position: absolute; top: -42px; right: -28px; width: 120px; height: 120px; border-radius: 50%; background: rgb(255 255 255 / 35%); content: ""; }
.person-core-closing-advice img { position: relative; z-index: 1; width: 48px; height: 48px; object-fit: contain; }
.person-core-closing-advice div { position: relative; z-index: 1; }
.person-core-closing-advice strong { color: #6441ad; font-size: var(--type-small); font-weight: 600; }
.person-core-closing-advice p { margin: 6px 0 0; color: #59456f; font-weight: 600; line-height: 1.7; word-break: keep-all; }
.executive-summary-prose p,
.five-element-profile-prose p,
.ten-god-fortune-prose p,
.ten-god-fortune-advice p,
.person-core-closing-panel p,
.person-core-closing-advice p {
  font-family: 'AppNumerals', 'SchoolSafeUniverse', 'Pretendard', system-ui, sans-serif;
  font-size: var(--type-body-lg);
}
.saju-story { margin-top: 30px; }
.saju-story-section > header { justify-content: flex-start; }
.saju-story-section h3 { margin-bottom: 14px; }
.saju-story-prose { display: grid; gap: 13px; }
.saju-story-prose p { margin: 0; overflow-wrap: anywhere; color: #685678; font-size: var(--type-body-lg); line-height: 1.85; word-break: keep-all; }
.saju-story-prose strong { display: inline; margin-right: 4px; color: #7650c6; font-size: var(--type-small); }
.saju-story-opening { margin-bottom: 3px !important; }
.saju-more { margin-top: 54px; padding-top: 28px; border-top: 2px solid #9a70df; }
.saju-more--person-core {
  --saju-more-frame: url("/images/pixel_frame_decoration_quiet.svg?v=1");

  padding: 22px 20px 18px;
  border: 14px solid transparent;
  border-image-source: var(--saju-more-frame);
  border-image-slice: 14 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  background-clip: border-box;
  background-origin: border-box;
  box-shadow: none;
  clip-path: none;
  image-rendering: pixelated;
}
.saju-more > header { margin-bottom: 16px; }
.saju-more > header h2 { margin: 0; color: #5632ad; font-size: var(--type-section-title-lg); }
.saju-more > header > p:last-child { margin: 8px 0 0; color: #917dae; font-size: var(--type-body); line-height: 1.65; }
.saju-more-details { margin-top: 10px; border-block: 1px solid #dfd1f5; }
.saju-more-details summary { display: flex; min-height: 72px; align-items: center; color: #604d76; cursor: pointer; list-style: none; }
.saju-more-details summary::-webkit-details-marker { display: none; }
.saju-more-details summary::after { margin-left: auto; color: #917dae; font-size: var(--type-section-title-lg); content: "+"; }
.saju-more-details[open] summary::after { content: "−"; }
.saju-more-details summary span { display: grid; gap: 5px; }
.saju-more-details summary strong { font-size: var(--type-body-lg); }
.saju-more-details summary small { color: #917dae; font-size: var(--type-small); }
.saju-more-details .distribution-charts { margin: 0 0 24px; }
.saju-more-details .distribution-charts > .section-kicker,
.saju-more-details .distribution-charts > h2 { position: absolute; overflow: hidden; width: 1px; height: 1px; clip: rect(0 0 0 0); white-space: nowrap; }
.saju-more .full-calculations { margin-top: -1px; padding-top: 0; }
.saju-more .metadata-details { margin: -1px 0 0; }
.saju-more .term-glossary { margin-top: 12px; }
.saju-raw-explained { padding: 4px 0 24px; }
.saju-raw-explained > section { padding: 20px 0; border-top: 1px solid #eadff6; }
.saju-raw-explained > section:first-child { border-top: 0; }
.saju-raw-explained h3 { margin: 0; color: #5632ad; font-size: var(--type-body-lg); }
.saju-raw-explained section > p { margin: 8px 0 0; color: #685678; font-size: var(--type-small); line-height: 1.7; word-break: keep-all; }
.saju-raw-explained .pillar-grid span { font-size: var(--type-caption); }
.saju-raw-explained .pillar-grid strong { font-size: var(--type-subtitle); }
.saju-raw-explained .raw-reading-result { padding: 12px 14px; border-radius: 7px; background: #f2e8fa; }
.saju-raw-explained .raw-reading-result strong { color: #7650c6; }
.report-main:not(.report-reading) .page-title { margin-bottom: 26px; }
.report-main:not(.report-reading) .page-title .date-label { color: #9a70df; font-size: var(--type-small); }
.report-main:not(.report-reading) .page-title h1 { color: #4f2aa5; font-size: var(--type-page-title); font-weight: 600; }
.report-main:not(.report-reading) .page-title > p:last-of-type { color: #806d99; font-size: var(--type-body); }
.report-main:not(.report-reading) .access-notice { border: 1px solid #ddcef3; border-left: 3px solid #9a70df; border-radius: 8px; background: #fbf5fe; color: #705d89; }
.report-main:not(.report-reading) .access-notice a { color: #7650c6; }
.compatibility-person-card + .report-family,
.compatibility-empty + .report-family { margin-top: 42px; }
.report-family + .report-family { margin-top: 42px; }
.report-catalog-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 14px; padding: 0 3px; }
.report-catalog-heading .date-label { margin: 0 0 4px; color: #7951c2; font-size: var(--type-label); font-weight: 600; letter-spacing: .1em; }
.report-catalog-heading h2 { display: flex; align-items: center; gap: 8px; margin: 0; color: #5632ad; font-size: var(--type-section-title); }
.report-heading-spark { color: #8f6bd4; font-size: var(--type-body); }
.report-catalog-heading > p { max-width: 390px; margin: 0 0 2px; color: #8064a8; font-size: var(--type-small); line-height: 1.55; text-align: right; word-break: keep-all; }
/* Relationship catalogs stay three-up; the personal report catalog uses two columns until the full PC width. */
.report-catalog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; border: 0; }
.report-main:not(.report-reading) .report-catalog-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
@media (min-width: 720px) {
  .report-main:not(.report-reading) .report-catalog-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.report-product-card {
  --report-card-accent: #8d61dc;
  --report-card-border: #8d6bd4;
  --report-card-background: #f5eefc;
  --report-card-image: url("/images/report_saju_background.png");
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 304px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-items: start;
  justify-items: center;
  gap: 4px;
  padding: 12px 12px 10px;
  overflow: hidden;
  border: 0;
  background: var(--report-card-border);
  clip-path: polygon(
    14px 0, calc(100% - 14px) 0,
    calc(100% - 14px) 2px, calc(100% - 10px) 2px,
    calc(100% - 10px) 4px, calc(100% - 6px) 4px,
    calc(100% - 6px) 6px, calc(100% - 4px) 6px,
    calc(100% - 4px) 10px, calc(100% - 2px) 10px,
    calc(100% - 2px) 14px, 100% 14px,
    100% calc(100% - 14px), calc(100% - 2px) calc(100% - 14px),
    calc(100% - 2px) calc(100% - 10px), calc(100% - 4px) calc(100% - 10px),
    calc(100% - 4px) calc(100% - 6px), calc(100% - 6px) calc(100% - 6px),
    calc(100% - 6px) calc(100% - 4px), calc(100% - 10px) calc(100% - 4px),
    calc(100% - 10px) calc(100% - 2px), calc(100% - 14px) calc(100% - 2px),
    calc(100% - 14px) 100%, 14px 100%,
    14px calc(100% - 2px), 10px calc(100% - 2px),
    10px calc(100% - 4px), 6px calc(100% - 4px),
    6px calc(100% - 6px), 4px calc(100% - 6px),
    4px calc(100% - 10px), 2px calc(100% - 10px),
    2px calc(100% - 14px), 0 calc(100% - 14px),
    0 14px, 2px 14px,
    2px 10px, 4px 10px,
    4px 6px, 6px 6px,
    6px 4px, 10px 4px,
    10px 2px, 14px 2px
  );
  filter: drop-shadow(0 2px 0 rgb(105 66 178 / 10%));
  text-align: center;
  transition: filter .18s ease, transform .18s ease;
  isolation: isolate;
}
.report-main:not(.report-reading) .report-product-card { min-height: 280px; }
.report-product-card::before {
  position: absolute;
  z-index: 0;
  inset: 2px;
  background-color: var(--report-card-background);
  background-image: var(--report-card-image);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: auto 122%;
  clip-path: polygon(
    12px 0, calc(100% - 12px) 0,
    calc(100% - 12px) 2px, calc(100% - 8px) 2px,
    calc(100% - 8px) 4px, calc(100% - 4px) 4px,
    calc(100% - 4px) 8px, calc(100% - 2px) 8px,
    calc(100% - 2px) 12px, 100% 12px,
    100% calc(100% - 12px), calc(100% - 2px) calc(100% - 12px),
    calc(100% - 2px) calc(100% - 8px), calc(100% - 4px) calc(100% - 8px),
    calc(100% - 4px) calc(100% - 4px), calc(100% - 8px) calc(100% - 4px),
    calc(100% - 8px) calc(100% - 2px), calc(100% - 12px) calc(100% - 2px),
    calc(100% - 12px) 100%, 12px 100%,
    12px calc(100% - 2px), 8px calc(100% - 2px),
    8px calc(100% - 4px), 4px calc(100% - 4px),
    4px calc(100% - 8px), 2px calc(100% - 8px),
    2px calc(100% - 12px), 0 calc(100% - 12px),
    0 12px, 2px 12px,
    2px 8px, 4px 8px,
    4px 4px, 8px 4px,
    8px 2px, 12px 2px
  );
  content: "";
}
.report-product-card > * { position: relative; z-index: 1; }
.report-product-icon { display: block; width: 102px; height: 102px; margin: -4px auto -5px; object-fit: contain; image-rendering: pixelated; }
.report-main:not(.report-reading) .report-product-icon { width: 44px; height: 44px; margin: 8px auto 4px; }
.report-product-icon.compatibility-content-icon { transform: scale(.75); }
.dashboard-service-card__icon img.tamami-speech-icon,
.report-product-icon.tamami-speech-icon { transform: scale(.9); }
#report-person-core > .report-product-icon { transform: scale(1.15); }
#report-person-relationship > .report-product-icon { transform: scale(.81); }
.report-product-copy { display: flex; width: 100%; min-width: 0; align-items: center; align-self: stretch; flex-direction: column; }
@media (min-width: 640px) {
  .report-product-copy { justify-content: center; }
  .report-product-card:has(> .report-card-status--guest) {
    grid-template-rows: auto auto minmax(0, 1fr);
  }
}
.report-product-card h3 { margin: 0; color: #4f299d; font-size: var(--type-card-title); line-height: 1.3; }
.report-main:not(.report-reading) .report-product-card h3 { font-size: var(--type-body-lg); }
.report-product-divider { display: flex; width: 100%; align-items: center; gap: 5px; margin: 10px 0 9px; color: var(--report-card-accent); font-size: var(--type-caption); opacity: .58; }
.report-product-divider i { height: 1px; border-bottom: 2px dotted currentColor; flex: 1; }
.report-product-card p { margin: 0; color: #644d84; font-size: var(--type-small); font-weight: 600; line-height: 1.72; word-break: keep-all; }
.report-main:not(.report-reading) .report-product-card p { font-size: var(--type-label); }
.report-product-card > .report-product-form { display: contents; position: static; }
.report-card-action {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  appearance: none;
  background: transparent;
  color: transparent;
  cursor: pointer;
}
.report-card-action:focus { outline: 0; }
.report-card-state-badge {
  position: absolute;
  z-index: 3;
  top: 10px;
  right: 10px;
  display: inline-flex;
  min-height: 23px;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  border: 2px dotted #b99ae2;
  background: #f0e6fc;
  color: #6842b5;
  font-size: var(--type-caption);
  font-weight: 600;
  line-height: 1;
}
.report-card-state-badge--generating { border-color: #dfbd76; background: #fff2cf; color: #9a681f; }
[data-report-pending-state][hidden],
[data-report-available-state][hidden],
[data-report-scope-state][hidden] { display: none; }
.report-card-state-badge--scope { border-color: #e2b55c; background: #fff4d4; color: #99651e; }
.report-product-astrology .report-card-state-badge--ready { border-color: #9ebbe9; background: #e4effc; color: #496fb5; }
.report-card-status {
  display: flex;
  width: 100%;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 9px;
  border-top: 2px dotted color-mix(in srgb, var(--report-card-accent) 52%, transparent);
  background: transparent;
  color: #7051ad;
  font-size: var(--type-label);
  font-weight: 600;
  line-height: 1.35;
}
.report-card-status time { font-variant-numeric: tabular-nums; }
.report-card-status--ready > span:first-child { min-width: 0; word-break: keep-all; }
.report-card-status-arrow {
  margin-left: 0;
  color: var(--report-card-accent);
  font-size: var(--type-section-title-lg);
  font-weight: 600;
  line-height: 1;
  transition: opacity .18s ease, transform .18s ease;
}
.report-card-status--available .report-card-status-arrow { opacity: 0; transform: translateX(-5px); }
.report-card-status--purchase .report-card-status-arrow { opacity: .82; transform: translateX(0); }
.report-card-status--unavailable { opacity: .34; }
.report-card-status--locked { color: #7051ad; }
.report-card-status--preview { color: #7043bd; }
.report-card-status--generating {
  justify-content: center;
  color: #8e672b;
  letter-spacing: .01em;
}
.report-generating-spark {
  color: #d99b36;
  animation: report-generating-twinkle 1.2s steps(2, end) infinite;
}
.report-generating-dots { display: inline-flex; align-items: center; gap: 3px; }
.report-generating-dots i {
  width: 3px;
  height: 3px;
  background: currentColor;
  animation: report-generating-dot 1.2s steps(2, end) infinite;
}
.report-generating-dots i:nth-child(2) { animation-delay: .2s; }
.report-generating-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes report-generating-twinkle {
  0%, 100% { opacity: .42; transform: scale(.85); }
  50% { opacity: 1; transform: scale(1); }
}
@keyframes report-generating-dot {
  0%, 60%, 100% { opacity: .28; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-2px); }
}
.report-product-tone-2 {
  --report-card-accent: #dc9c38;
}
.report-product-tone-3 {
  --report-card-accent: #df6eae;
}
.report-product-tone-4 {
  --report-card-accent: #e17a45;
  --report-card-background: #fff5dd;
  --report-card-border: #da885b;
}
.report-product-tone-4 h3 { color: #81502f; }
.report-product-tone-4 p, .report-product-tone-4 .report-card-status { color: #7a624d; }
.report-product-astrology {
  --report-card-accent: #7898eb;
  --report-card-background: #eaf3fd;
  --report-card-image: url("/images/report_astrology_background.png");
  --report-card-border: #80a9ea;
}
.report-product-astrology h3 { color: #405dac; }
.report-product-astrology p { color: #5772a4; }
.report-product-astrology .report-card-status { color: #5878b1; }
.is-report-generating .report-product-icon,
.is-report-generating .report-product-copy { opacity: .78; }
.is-report-generating .report-product-form { pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .report-product-card:has(.report-card-action):hover {
    z-index: 2;
    filter: drop-shadow(0 7px 0 rgb(105 66 178 / 16%)) drop-shadow(0 13px 16px rgb(105 66 178 / 14%));
    transform: translateY(-6px);
  }
  .report-product-card:has(.report-card-action):hover .report-card-status--available .report-card-status-arrow {
    opacity: .82;
    transform: translateX(0);
  }
}
.report-product-card:has(.report-card-action:focus-visible) {
  z-index: 2;
  filter: drop-shadow(0 7px 0 rgb(105 66 178 / 18%)) drop-shadow(0 13px 16px rgb(105 66 178 / 16%));
  transform: translateY(-6px);
}
.report-product-card:has(.report-card-action:focus-visible)::before { box-shadow: inset 0 0 0 3px rgb(255 255 255 / 82%); }
.report-product-card:has(.report-card-action:active) {
  filter: drop-shadow(0 3px 0 rgb(105 66 178 / 14%));
  transform: translateY(-2px);
}
.report-product-card:has(.report-card-action:focus-visible) .report-card-status--available .report-card-status-arrow {
  opacity: .82;
  transform: translateX(0);
}
.report-upcoming-badge { display: inline-flex; padding: 4px 7px; border-radius: 999px; background: #e2ecfb; color: #5275a8; font-size: var(--type-caption); font-weight: 600; }
.report-family-note { display: flex; align-items: center; gap: 5px; margin: 12px 3px 0; color: #8f78aa; font-size: var(--type-label); }
.report-family-note > span { color: #7951c2; font-size: var(--type-body); }
.compatibility-keyring-guide {
  --compatibility-keyring-guide-frame: url("/images/pixel_frame_input.svg?v=1");

  display: grid;
  box-sizing: border-box;
  grid-template-columns: 100px minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  margin-top: 42px;
  padding: 12px 20px;
  border: 14px solid transparent;
  border-image-source: var(--compatibility-keyring-guide-frame);
  border-image-slice: 14 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  background-clip: border-box;
  background-origin: border-box;
  box-shadow: none;
  clip-path: none;
  image-rendering: pixelated;
}
.compatibility-keyring-guide__art {
  display: grid;
  width: 100px;
  height: 88px;
  place-items: center;
}
.compatibility-keyring-guide__art img {
  display: block;
  width: 100px;
  height: auto;
  image-rendering: pixelated;
}
.compatibility-keyring-guide__copy { min-width: 0; }
.compatibility-keyring-guide h2 {
  margin: 0;
  color: var(--tamami-section-title, #5a43bc);
  font-size: var(--type-card-title);
  font-weight: 600;
  line-height: 1.45;
  word-break: keep-all;
}
.compatibility-keyring-guide p {
  margin: 7px 0 0;
  color: var(--tamami-text, #6b667a);
  font-size: var(--type-body);
  font-weight: 400;
  line-height: 1.75;
  overflow-wrap: anywhere;
  word-break: keep-all;
}
.report-archive-cta { margin-top: 30px; }
.report-archive-banner {
  --report-credit-frame-image: url("/images/pixel_frame_input.svg?v=1");

  position: relative;
  display: grid;
  min-height: 112px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 8px 10px;
  color: inherit;
  text-decoration: none;
  transition: filter .18s ease, transform .18s ease;
}
.report-archive-banner__copy { display: grid; min-width: 0; gap: 4px; }
.report-archive-banner__copy .date-label {
  margin: 0;
  color: #9a70df;
  font-size: var(--type-label);
  font-weight: 600;
  letter-spacing: .12em;
}
.report-archive-banner__copy h2 { margin: 0; color: #5632ad; font-size: var(--type-section-title); line-height: 1.3; }
.report-archive-banner__copy > span:last-child {
  color: #8064a8;
  font-size: var(--type-small);
  line-height: 1.55;
  word-break: keep-all;
}
.report-archive-banner__action {
  --report-credit-frame-image: url("/images/pixel_frame_settings_primary.svg?v=1");

  display: inline-flex;
  min-width: 116px;
  min-height: 54px;
  flex: none;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  color: #ffffff;
  font-size: var(--type-small);
  font-weight: 600;
  text-align: center;
  text-shadow: 1px 1px 0 rgb(73 26 144 / 40%);
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
  .report-archive-banner:hover {
    filter: brightness(1.03);
    transform: translateY(-2px);
  }
}
.report-archive-banner:focus-visible {
  outline: 3px solid rgb(104 66 181 / 28%);
  outline-offset: 3px;
}
.report-archive-banner:active { transform: translateY(1px); }
.archive-report-section { margin-top: 0; }
.archive-report-section .report-catalog-heading { margin-bottom: 16px; }
.archive-report-grid { margin-top: 0; }
.archive-report-card { min-height: 300px; }
.archive-report-card .report-product-copy { justify-content: flex-start; }
.archive-report-family-badge { max-width: calc(100% - 20px); }
.archive-report-card--relation {
  --report-card-accent: #dc70aa;
  --report-card-background: #fff0f8;
  --report-card-border: #d978ab;
}
.archive-report-card--relation h3 { color: #9c3d75; }
.archive-report-card--relation p { color: #8b5674; }
.archive-report-card--relation .report-card-status { color: #9b4e79; }
.archive-report-card--relation-communication {
  --report-card-accent: #8d61dc;
  --report-card-background: #f5eefc;
  --report-card-border: #8d6bd4;
}
.archive-report-card--relation-communication h3 { color: #4f299d; }
.archive-report-card--relation-communication p { color: #644d84; }
.archive-report-card--relation-communication .report-card-status { color: #7051ad; }
.archive-empty-state {
  display: grid;
  min-height: 270px;
  align-content: center;
  justify-items: center;
  padding: 34px 24px;
  border: 2px dashed #cdb7e9;
  border-radius: 12px;
  background: rgb(255 250 255 / 68%);
  box-shadow: inset 0 0 0 4px rgb(255 255 255 / 28%);
  text-align: center;
}
.archive-empty-state img { width: 86px; height: 86px; object-fit: contain; image-rendering: pixelated; }
.archive-empty-state strong { margin-top: 4px; color: #5632ad; font-size: var(--type-card-title); }
.archive-empty-state p { margin: 8px 0 0; color: #806d99; font-size: var(--type-small); line-height: 1.6; }
.archive-empty-action {
  --archive-empty-action-frame: url("/images/pixel_frame_settings_primary.svg?v=1");

  appearance: none;
  box-sizing: border-box;
  display: inline-flex;
  height: 54px;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  margin-top: 18px;
  padding: 0 12px;
  border: 14px solid transparent;
  border-image-source: var(--archive-empty-action-frame);
  border-image-slice: 14 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  background-clip: border-box;
  background-origin: border-box;
  box-shadow: none;
  clip-path: none;
  color: #fff;
  font-size: var(--type-small);
  font-weight: 600;
  text-align: center;
  text-shadow: 1px 1px 0 rgb(73 26 144 / 40%);
  text-decoration: none;
  white-space: nowrap;
  image-rendering: pixelated;
  transform: none;
  transition: filter .15s ease, transform .15s ease;
}
.archive-empty-action:hover { filter: brightness(1.03); }
.archive-empty-action:active { filter: brightness(.96); transform: translateY(1px); }
.archive-empty-action:focus-visible { outline: 3px solid var(--ui-focus, #5a43bc); outline-offset: 2px; }
.story-chapter-heading { scroll-margin-top: 198px; }






@media (max-width: 639px) {
  .report-reading .report-title h1 { font-size: var(--type-section-title-lg); }
  .analysis-tabs { top: 82px; margin-bottom: 22px; }
  .reading-navigator { top: 130px; }
  .story-toc ul { grid-template-columns: 1fr; }
  .analysis-introduction h2 { font-size: var(--type-section-title); }
  .calculation-subject, .executive-summary, .five-element-profile, .editorial-overview, .story-chapter { padding: 16px; }
  .subject-facts, .subject-chart-summary { grid-template-columns: 1fr; }
  .subject-facts div:nth-child(odd) { padding-right: 0; }
  .executive-summary h2 { font-size: var(--type-section-title); }
  .executive-summary-heading--with-tamami { grid-template-columns: 58px minmax(0, 1fr); gap: 12px; }
  .executive-summary-tamami { width: 58px; }
  .story-explanation { font-size: var(--type-body-lg); }
  .five-element-profile h2 { font-size: var(--type-card-title); }
  .five-element-profile-heading { grid-template-columns: 58px minmax(0, 1fr); gap: 12px; }
  .five-element-profile-tamami { width: 58px; }
  .ten-god-fortunes { margin-top: 30px; }
  .ten-god-fortunes-heading h2 { font-size: var(--type-section-title); }
  .ten-god-fortune { padding: 17px; }
  .ten-god-fortune > header { align-items: flex-start; }
  .ten-god-fortune-prose p { line-height: 1.8; }
  .ten-god-fortune-advice { grid-template-columns: 44px minmax(0, 1fr); padding: 12px; }
  .ten-god-fortune-advice img { width: 44px; height: 44px; }
  .person-core-closing { margin-top: 38px; padding-top: 24px; }
  .person-core-closing-heading h2 { font-size: var(--type-section-title); }
  .person-core-closing-panel { padding: 17px; }
  .person-core-closing-panel p { line-height: 1.82; }
  .person-core-closing-advice { grid-template-columns: 36px minmax(0, 1fr); gap: 9px; padding: 10px 12px; }
  .person-core-closing-advice img { width: 36px; height: 36px; }
  .story-chapter > header { align-items: flex-start; }
  .story-chapter h3 { font-size: var(--type-card-title); }
  .strength-shadow-pair, .practice-question, .professional-metric dl { grid-template-columns: 1fr; }
  .snapshot-highlights { grid-template-columns: 1fr; }
  .evidence-table { min-width: 560px; }
  .report-main:not(.report-reading) .page-title h1 { font-size: var(--type-section-title-lg); }
  .report-catalog-heading { display: grid; gap: 7px; }
  .report-catalog-heading > p { max-width: none; margin: 0; text-align: left; }
  .report-catalog-grid { grid-template-columns: 1fr; }
  .report-main:not(.report-reading) .report-catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .report-product-card {
    min-height: 196px;
    grid-template-columns: 88px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    align-items: start;
    justify-items: stretch;
    gap: 2px 5px;
    padding: 4px 5px 6px;
    text-align: left;
  }
  .report-product-icon { width: 88px; height: 88px; margin: 8px 0 0; align-self: start; }
  .report-product-copy { align-items: flex-start; padding: 17px 8px 4px 0; }
  .report-product-card h3 { font-size: var(--type-card-title); }
  .report-product-divider { max-width: 190px; margin: 8px 0; }
  .report-product-card p { max-width: 270px; font-size: var(--type-label); line-height: 1.62; }
  .report-card-state-badge { top: 8px; right: 8px; }
  .report-card-status { min-height: 42px; grid-column: 1 / -1; grid-row: 2; padding: 0 8px; }
  .report-main:not(.report-reading) .report-product-card {
    min-height: 248px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    justify-items: center;
    gap: 3px;
    padding: 4px 8px 6px;
    text-align: center;
  }
  .report-main:not(.report-reading) .report-product-icon {
    width: 38px;
    height: 38px;
    margin: 10px auto 5px;
    align-self: auto;
  }
  .report-main:not(.report-reading) .report-product-copy {
    align-items: center;
    justify-content: center;
    padding: 0 2px 3px;
  }
  .report-main:not(.report-reading) .report-product-divider {
    width: 100%;
    max-width: none;
    margin: 7px 0;
  }
  .report-main:not(.report-reading) .report-product-card p {
    max-width: none;
    font-size: var(--type-label);
  }
  .report-main:not(.report-reading) .report-card-status {
    grid-column: 1;
    grid-row: 3;
    padding: 0 5px;
  }
  .compatibility-keyring-guide {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 12px;
    padding: 8px 10px;
  }
  .compatibility-keyring-guide__art { width: 76px; height: 72px; }
  .compatibility-keyring-guide__art img { width: 76px; }
  .compatibility-keyring-guide h2 { font-size: var(--type-body-lg); }
  .compatibility-keyring-guide p { margin-top: 5px; font-size: var(--type-small); line-height: 1.65; }
  .report-archive-banner {
    min-height: 126px;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    padding: 6px 8px;
  }
  .report-archive-banner__copy > span:last-child { max-width: 230px; }
  .report-archive-banner__action { min-width: 104px; }
  .archive-report-card {
    min-height: 0;
    grid-template-rows: auto auto;
  }
  .archive-report-card > .report-product-icon {
    align-self: center;
    margin: 16px 0 10px;
  }
  .archive-report-card .report-product-copy {
    align-self: center;
    padding: 32px 8px 10px 0;
  }
  .archive-empty-state { min-height: 240px; padding: 28px 18px; }
  .love-timing-windows { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .report-product-card,
  .report-card-status-arrow,
  .report-archive-banner { transition: none; }
  .report-generating-spark,
  .report-generating-dots i { animation: none; }
  .report-product-card:has(.report-card-action):hover,
  .report-product-card:has(.report-card-action:focus-visible),
  .report-product-card:has(.report-card-action:active),
  .report-archive-banner:hover,
  .report-archive-banner:active { transform: none; }
}
.correction-change-notice { margin: 12px 0 0; padding: 12px 13px; border-left: 3px solid #9a70df; border-radius: 0 7px 7px 0; background: #f2e8fa; color: #755f8e; font-size: var(--type-small); font-weight: 600; line-height: 1.65; }

.birth-profile-detail-level { grid-column: 1 / -1; }
.saju-detail-level {
  display: grid;
  min-width: 0;
  gap: 10px;
  margin: 0;
  padding: 18px 0 0;
  border: 0;
  border-top: 1px solid #eadff6;
}
.saju-detail-level > legend {
  padding: 0;
  color: #60427f;
  font-size: var(--type-body-lg);
  font-weight: 700;
  line-height: 1.45;
}
.saju-detail-level__intro {
  margin: 0;
  color: #8c7a9e;
  font-size: var(--type-label);
  line-height: 1.6;
}
.saju-detail-level__choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.saju-detail-level__choice {
  --saju-detail-choice-frame: url("/images/pixel_frame_birth_profile_input.svg?v=5");

  box-sizing: border-box;
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 54px;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  border: 14px solid transparent;
  border-image-source: var(--saju-detail-choice-frame);
  border-image-slice: 14 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  background-clip: border-box;
  background-origin: border-box;
  color: #60427f;
  cursor: pointer;
  image-rendering: pixelated;
}
.saju-detail-level__choice > input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.saju-detail-level__radio {
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  border: 2px solid #ad95c7;
  border-radius: 50%;
  background: #fffaff;
}
.saju-detail-level__choice > strong {
  overflow: hidden;
  font-size: var(--type-small);
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.saju-detail-level__choice:has(input:checked) { filter: saturate(1.18) brightness(.98); }
.saju-detail-level__choice > input:checked + .saju-detail-level__radio {
  border-color: #7045bd;
  background: #7045bd;
  box-shadow: inset 0 0 0 4px #fffaff;
}
.saju-detail-level__choice > input:focus-visible + .saju-detail-level__radio {
  outline: 3px solid #c5a7f1;
  outline-offset: 2px;
}
.saju-detail-level__details {
  border-top: 1px solid #eadff6;
  color: #725f85;
}
.saju-detail-level__details summary {
  position: relative;
  padding: 11px 24px 2px 0;
  color: #6542a8;
  font-size: var(--type-small);
  font-weight: 700;
  line-height: 1.5;
  list-style: none;
  cursor: pointer;
}
.saju-detail-level__details summary::-webkit-details-marker { display: none; }
.saju-detail-level__details summary::after {
  position: absolute;
  top: 10px;
  right: 2px;
  content: "+";
  font-size: var(--type-body-lg);
  line-height: 1;
}
.saju-detail-level__details[open] summary::after { content: "−"; }
.saju-detail-level__details > div {
  display: grid;
  gap: 10px;
  padding: 10px 0 2px;
}
.saju-detail-level__details p { margin: 0; font-size: var(--type-small); line-height: 1.6; }
.saju-detail-level__details p:not(.saju-detail-level__note) { display: grid; gap: 2px; }
.saju-detail-level__details strong { color: #60427f; }
.saju-detail-level__note { padding: 9px 10px; background: #f5edf9; color: #806d99; }
.saju-detail-level--onboarding {
  --saju-detail-frame: url("/images/pixel_frame_birth_profile_option_group.svg?v=5");

  box-sizing: border-box;
  width: 100%;
  padding: 7px 8px 8px;
  border: 14px solid transparent;
  border-image-source: var(--saju-detail-frame);
  border-image-slice: 14 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  background: transparent;
  background-clip: border-box;
  background-origin: border-box;
  image-rendering: pixelated;
  text-align: left;
}
.saju-detail-level--onboarding + .final-consent-answer { margin-top: 12px; }

@media (max-width: 420px) {
  .saju-detail-level__choices { grid-template-columns: 1fr; }
}

.saju-correction-basis {
  margin: 18px 0;
  padding: 18px 20px;
  border: 1px solid #dfd1f5;
  border-radius: 8px;
  background: #fbf5fe;
}
.saju-correction-basis h2 { margin: 0 0 10px; color: #6040b2; font-size: var(--type-body-lg); font-weight: 600; }
.saju-correction-basis h3 { margin: 14px 0 6px; color: #806d99; font-size: var(--type-small); }
.saju-correction-basis > p { margin: 0 0 10px; color: #806d99; font-size: var(--type-small); line-height: 1.6; }
.saju-correction-basis dl { margin: 0; }
.saju-correction-basis dl div { display: flex; min-height: 42px; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid #eadff6; }
.saju-correction-basis dt { color: #806d99; font-size: var(--type-body); }
.saju-correction-basis dd { margin: 0; color: #6040b2; font-size: var(--type-body); font-weight: 600; }
.saju-correction-schedule { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.saju-correction-schedule > li { padding: 0 12px 4px; border: 1px solid #eadff6; border-radius: 8px; background: rgb(255 255 255 / 56%); }
.final-consent-answer { --correction-surface-frame: url("/images/pixel_frame_input.svg?v=1"); }

.final-consent-answer {
  box-sizing: border-box;
  border: 14px solid transparent;
  border-image-source: var(--correction-surface-frame);
  border-image-slice: 14 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  background-clip: border-box;
  background-origin: border-box;
  box-shadow: none;
  clip-path: none;
  image-rendering: pixelated;
}

.final-consent-answer { padding: 10px; }

.final-consent-answer > span {
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 0;
  background: transparent url("/images/pixel_checkbox_birth_profile.svg?v=4") center / 18px 18px no-repeat;
  box-shadow: none;
  clip-path: none;
  color: transparent;
  image-rendering: pixelated;
  transform: none;
}

.final-consent-answer > span .lucide { display: none; }

.final-consent-answer > input:checked + span {
  border: 0;
  background-color: transparent;
  background-image: url("/images/pixel_checkbox_birth_profile_checked.svg?v=4");
  color: transparent;
}

@keyframes tamami-dialog-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .today-flow-card--loading .today-flow-card__dimmed { animation: none; }
}

/* Signup answer groups use one filled 9-slice surface for the solid line and
   stepped corner dots highlighted in the onboarding review. */
.clue-answer-panel,
.saved-clue-preview,
.account-details-panel {
  --onboarding-answer-frame: url("/images/pixel_frame_home_service_purple.svg?v=2");

  box-sizing: border-box;
  width: 100%;
  border: 14px solid transparent;
  border-image-source: var(--onboarding-answer-frame);
  border-image-slice: 14 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  background-clip: border-box;
  background-origin: border-box;
  box-shadow: none;
  clip-path: none;
  image-rendering: pixelated;
}

.clue-answer-panel--date {
  margin: 24px 0 0;
  padding: 8px 8px 2px;
}

.clue-answer-panel--date .birthday-selects { margin-bottom: 8px; }
.clue-answer-panel--date .lunar-fieldset { margin: 12px 0 8px; }

.clue-answer-panel--time {
  margin: 22px 0 0;
  padding: 4px 10px 10px;
}

.clue-answer-panel--time .birthtime-selects { margin: 4px 0 16px; }

.clue-answer-panel--sex {
  margin: 30px 0 0;
  padding: 8px;
}

.clue-answer-panel--sex .single-choice-answers { margin: 0; }

.place-select-answer.clue-answer-panel--place {
  min-height: 86px;
  padding: 0 10px;
}

.place-select-answer.clue-answer-panel--place select { height: 58px; }

.clue-answer-panel--consent {
  margin: 28px 0 0;
  padding: 4px;
}

.clue-answer-panel--consent .saju-detail-level--onboarding { margin: 0; }

@media (max-width: 480px) {
  .clue-answer-panel--consent,
  .clue-answer-panel--consent .saju-detail-level--onboarding {
    border: 0;
    border-image: none;
    padding-inline: 0;
  }
}

.saved-clue-preview { padding: 8px 6px; }

.account-details-panel {
  margin-top: 24px;
  padding: 8px;
}

.account-details-panel .account-form-fields { margin-top: 0; }
.account-details-panel .onboarding-next-button.final { margin-top: 22px; }

.account-details-panel :is(
  .account-form-field input,
  .account-security-notice,
  .onboarding-next-button.final
),
.account-conversation-form > .precision-notice {
  border: 14px solid transparent !important;
  border-image-source: var(--account-control-frame) !important;
  border-image-slice: 14 fill !important;
  border-image-width: 1 !important;
  border-image-repeat: stretch !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-clip: border-box !important;
  background-origin: border-box !important;
  box-shadow: none !important;
  clip-path: none !important;
  image-rendering: pixelated;
}

.account-details-panel .account-form-field input {
  --account-control-frame: url("/images/pixel_frame_input.svg?v=1");
}

.account-details-panel .account-security-notice,
.account-conversation-form > .precision-notice {
  --account-control-frame: url("/images/pixel_frame_signup_security_notice.svg?v=1");

  padding: 8px 12px;
}

.account-conversation-form > .precision-notice {
  box-sizing: border-box;
  width: 100%;
  margin: 8px 0 0;
  color: #6f5b84;
  font-size: var(--type-small);
  font-weight: 600;
  line-height: 1.65;
}

.account-details-panel .account-password-later-notice {
  box-sizing: border-box;
  width: 100%;
  margin: 8px 0 0;
  padding: 0;
  border: 0 !important;
  border-image: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  clip-path: none !important;
  color: #6f5b84;
  font-size: var(--type-small);
  font-weight: 600;
  line-height: 1.65;
}

.signup-pending-layout :is(
  .signup-pending-pixel-input,
  .signup-pending-pixel-action,
  .signup-pending-pixel-cancel
) {
  box-sizing: border-box;
  border: 14px solid transparent !important;
  border-image-source: var(--signup-pending-control-frame) !important;
  border-image-slice: 14 fill !important;
  border-image-width: 1 !important;
  border-image-repeat: stretch !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-clip: border-box !important;
  background-origin: border-box !important;
  box-shadow: none !important;
  clip-path: none !important;
  image-rendering: pixelated;
}

.signup-pending-layout .signup-pending-pixel-input {
  --signup-pending-control-frame: url("/images/pixel_frame_input.svg?v=1");
  width: 100%;
  height: 54px;
  min-height: 54px;
  padding: 0 12px;
}

.signup-pending-layout .signup-pending-pixel-input:focus,
.signup-pending-layout .signup-pending-pixel-input:focus-visible {
  border-color: transparent !important;
  outline: 3px solid var(--ui-focus, #5a43bc) !important;
  outline-offset: 2px;
  filter: brightness(.97) saturate(1.08);
}

.signup-pending-layout .signup-pending-pixel-action {
  --signup-pending-control-frame: url("/images/pixel_frame_settings_primary.svg?v=1");
  width: 100%;
  min-height: 54px;
  padding: 0 12px;
  color: #fff !important;
  text-align: center;
  text-shadow: 1px 1px 0 rgb(73 26 144 / 40%);
  white-space: nowrap;
  transition: filter .15s ease, transform .15s ease;
}

.signup-pending-layout .signup-pending-pixel-action:hover {
  filter: brightness(1.03);
  transform: none;
}

.signup-pending-layout .signup-pending-pixel-action:active {
  filter: brightness(.96);
  transform: translateY(1px);
}

.signup-pending-layout .signup-pending-pixel-action:focus-visible {
  outline: 3px solid var(--ui-focus, #5a43bc);
  outline-offset: 2px;
}

.signup-pending-layout .signup-pending-pixel-action:disabled {
  cursor: not-allowed;
  filter: grayscale(.18);
  opacity: .5;
  transform: none;
}

.signup-pending-layout .signup-pending-pixel-cancel {
  --signup-pending-control-frame: url("/images/pixel_frame_settings_danger.svg?v=1");
  justify-content: center;
  min-height: 54px;
  padding: 0 12px;
  color: #9a3f5a;
  text-align: center;
  white-space: nowrap;
  transition: filter .15s ease, transform .15s ease;
}

.signup-pending-layout .signup-pending-pixel-cancel:hover {
  filter: brightness(1.02) saturate(1.04);
}

.signup-pending-layout .signup-pending-pixel-cancel:active {
  filter: brightness(.97);
  transform: translateY(1px);
}

.signup-pending-layout .signup-pending-pixel-cancel:focus-visible {
  outline: 3px solid var(--ui-focus, #5a43bc);
  outline-offset: 2px;
}

.account-details-panel .onboarding-next-button.final {
  --account-control-frame: url("/images/pixel_frame_settings_primary.svg?v=1");

  appearance: none;
  box-sizing: border-box;
  min-height: 54px;
  padding: 0 12px;
  text-align: center;
  white-space: nowrap;
  transition: filter .15s ease, transform .15s ease;
}

.account-details-panel .onboarding-next-button.final:hover {
  filter: brightness(1.03);
  transform: none !important;
}

.account-details-panel .onboarding-next-button.final:active {
  filter: brightness(.96);
  transform: translateY(1px) !important;
}

.account-details-panel .onboarding-next-button.final:disabled {
  cursor: not-allowed;
  filter: grayscale(.18);
  opacity: .5;
  transform: none !important;
}

/* The account handoff opens with Tamami and a looping pixel meteor welcome.
   The decoration is CSS-only so the verified signup flow also works without JS. */
.account-welcome-stage {
  position: relative;
  z-index: 1;
  min-height: 248px;
  overflow: hidden;
  margin: -8px -14px -10px;
  isolation: isolate;
}

.account-welcome-stage::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: transparent;
  content: "";
  pointer-events: none;
}

.account-welcome-tamami {
  position: absolute;
  z-index: 2;
  bottom: -9px;
  left: 50%;
  display: block;
  width: 218px;
  max-width: 45%;
  height: auto;
  filter: drop-shadow(0 7px 0 rgb(91 56 157 / 18%));
  image-rendering: pixelated;
  animation: account-welcome-tamami-arrive 760ms steps(6, end) 80ms both;
}

.account-welcome-meteors {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.account-welcome-meteors i {
  --account-meteor-color: #ff8fc2;
  --account-meteor-duration: 4.2s;
  --account-meteor-delay: 0s;

  position: absolute;
  top: 16%;
  left: 72%;
  width: 6px;
  height: 6px;
  background: var(--account-meteor-color);
  box-shadow:
    -4px 0 0 var(--account-meteor-color),
    4px 0 0 var(--account-meteor-color),
    0 -4px 0 var(--account-meteor-color),
    0 4px 0 var(--account-meteor-color),
    0 0 10px rgb(255 255 255 / 88%);
  color: var(--account-meteor-color);
  opacity: 0;
  image-rendering: pixelated;
  animation: account-welcome-meteor-fall var(--account-meteor-duration) linear var(--account-meteor-delay) infinite;
}

.account-welcome-meteors i::after {
  position: absolute;
  top: -1px;
  left: 8px;
  width: 68px;
  height: 3px;
  background: currentcolor;
  content: "";
  opacity: .85;
  transform: rotate(-24deg);
  transform-origin: left center;
}

.account-welcome-meteors i:nth-child(1) { top: 19%; left: 23%; --account-meteor-color: #ff8fc2; --account-meteor-duration: 3.8s; --account-meteor-delay: -1.2s; }
.account-welcome-meteors i:nth-child(2) { top: 32%; left: 83%; --account-meteor-color: #68c9ff; --account-meteor-duration: 4.6s; --account-meteor-delay: -3.4s; }
.account-welcome-meteors i:nth-child(3) { top: 8%; left: 58%; --account-meteor-color: #ffd65c; --account-meteor-duration: 4.1s; --account-meteor-delay: -2.3s; }
.account-welcome-meteors i:nth-child(4) { top: 50%; left: 94%; --account-meteor-color: #b785ff; --account-meteor-duration: 5.1s; --account-meteor-delay: -.6s; }
.account-welcome-meteors i:nth-child(5) { top: 62%; left: 37%; --account-meteor-color: #ff7fb8; --account-meteor-duration: 4.4s; --account-meteor-delay: -3.8s; }
.account-welcome-meteors i:nth-child(6) { top: 4%; left: 95%; --account-meteor-color: #ffe36f; --account-meteor-duration: 5.4s; --account-meteor-delay: -1.9s; }
.account-welcome-meteors i:nth-child(7) { top: 74%; left: 75%; --account-meteor-color: #71d0ff; --account-meteor-duration: 3.9s; --account-meteor-delay: -2.8s; }

@keyframes account-welcome-tamami-arrive {
  from { opacity: 0; transform: translate(-50%, 48px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes account-welcome-meteor-fall {
  0% { opacity: 0; transform: translate3d(112px, -60px, 0); }
  12% { opacity: .95; }
  62% { opacity: .82; }
  100% { opacity: 0; transform: translate3d(-190px, 112px, 0); }
}

@media (max-width: 639px) {
  .account-welcome-stage {
    min-height: 204px;
    margin: -7px -16px -8px;
  }

  .account-welcome-tamami { width: 164px; max-width: 58%; }
  .account-details-panel { padding: 4px; }
  .account-welcome-meteors i::after { width: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .account-welcome-tamami {
    animation: none;
    transform: translateX(-50%);
  }

  .account-welcome-meteors i {
    opacity: .58;
    animation: none;
    transform: none;
  }
}

/* Calendar and lunar-month switches share the same segmented pixel geometry. */
.calendar-kind-switch,
.lunar-kind-switch {
  --onboarding-segment-frame: url("/images/pixel_frame_birth_profile_segment.svg?v=5");
  --onboarding-segment-inset: 4px;
  --onboarding-segment-overlap: calc(14px - var(--onboarding-segment-inset));

  position: relative;
  box-sizing: border-box;
  width: min(100%, 176px);
  height: 54px;
  gap: 3px;
  overflow: visible;
  padding: 0;
  border: 14px solid transparent;
  border-image-source: var(--onboarding-segment-frame);
  border-image-slice: 14 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  background-clip: border-box;
  background-origin: border-box;
  box-shadow: none;
  clip-path: none;
  image-rendering: pixelated;
}

.calendar-kind-switch label,
.lunar-kind-switch label {
  position: relative;
  min-width: 0;
  flex: 1;
}

.calendar-kind-switch span,
.lunar-kind-switch span {
  position: absolute;
  top: calc(-1 * var(--onboarding-segment-overlap));
  right: 0;
  bottom: calc(-1 * var(--onboarding-segment-overlap));
  left: 0;
  min-width: 0;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
}

.calendar-kind-switch label:first-child span,
.lunar-kind-switch label:first-child span { left: calc(-1 * var(--onboarding-segment-overlap)); }

.calendar-kind-switch label:last-child span,
.lunar-kind-switch label:last-child span { right: calc(-1 * var(--onboarding-segment-overlap)); }

.day-pillar-character {
  --day-pillar-character-size: 52px;
  --day-pillar-character-outline: #b5a1ec;
  display: inline-grid;
  min-width: 0;
  grid-template-areas: "caption character";
  grid-template-columns: max-content var(--day-pillar-character-size);
  align-items: center;
  gap: 7px;
  margin: 0;
}
.day-pillar-character[data-tone="wood"] { --day-pillar-character-outline: var(--element-wood-color); }
.day-pillar-character[data-tone="fire"] { --day-pillar-character-outline: var(--element-fire-color); }
.day-pillar-character[data-tone="earth"] { --day-pillar-character-outline: var(--element-earth-color); }
.day-pillar-character[data-tone="metal"] { --day-pillar-character-outline: var(--element-metal-color); }
.day-pillar-character[data-tone="water"] { --day-pillar-character-outline: var(--element-water-color); }
.day-pillar-character__filters { position: absolute; pointer-events: none; }
.day-pillar-character__outline-color { flood-color: var(--day-pillar-character-outline); }
.day-pillar-character__caption { min-width: 0; grid-area: caption; }
.day-pillar-character__caption strong {
  display: inline-flex;
  min-height: 27px;
  align-items: center;
  padding: 0 9px;
  border: 1px solid #ded0f1;
  border-radius: 999px;
  background: rgba(246, 238, 252, .78);
  color: #7358a5;
  font-size: var(--type-small);
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}
.day-pillar-character__portrait {
  display: block;
  width: var(--day-pillar-character-size);
  height: var(--day-pillar-character-size);
  grid-area: character;
}
.day-pillar-character__image {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 3px 3px rgba(82, 47, 144, .08));
  object-fit: contain;
}
.day-pillar-character--home { --day-pillar-character-size: 58px; margin-left: auto; }
.day-pillar-character--home .day-pillar-character__caption strong { background: #f3e9fb; }
.day-pillar-character--fortune { --day-pillar-character-size: 58px; justify-self: end; }
.day-pillar-character--report_catalog { --day-pillar-character-size: 46px; margin-top: 13px; }
.day-pillar-character--report_cover { --day-pillar-character-size: 50px; margin-top: 13px; }
.birth-chart-identity-strip {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin: 12px 0 14px;
}
.birth-chart-identity-strip .day-pillar-character--home,
.birth-chart-identity-strip .day-pillar-character--report_cover {
  --day-pillar-character-size: 64px;
  display: grid;
  grid-template-areas: "character" "caption";
  grid-template-columns: 64px;
  justify-items: center;
  gap: 4px;
  margin: 0;
}
.birth-chart-identity-strip .day-pillar-character--home .day-pillar-character__image,
.birth-chart-identity-strip .day-pillar-character--report_cover .day-pillar-character__image {
  padding: 5px;
  border: 1px solid #d8c4f1;
  border-radius: 14px;
  background: #f3e9fb;
}
.birth-chart-identity-strip .day-pillar-character--home .day-pillar-character__caption strong,
.birth-chart-identity-strip .day-pillar-character--report_cover .day-pillar-character__caption strong {
  display: block;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #8065ad;
  font-size: var(--type-caption);
  line-height: 1.3;
  text-align: center;
  white-space: normal;
}
.birth-chart-identity-strip .day-pillar-character--home .day-pillar-character__caption,
.birth-chart-identity-strip .day-pillar-character--report_cover .day-pillar-character__caption {
  transform: translateY(-5px);
}
.birth-chart-identity-strip .birth-chart-meta {
  display: flex;
  min-width: 0;
  min-height: 64px;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 12px 16px;
  border: 1px solid #d8c4f1;
  border-radius: 14px;
  background: #fffaff;
  color: #6d4eaa;
  font-size: var(--type-body);
  font-weight: 600;
  line-height: 1.5;
}
.birth-chart-identity-strip .birth-chart-meta strong { color: #4f2aa5; font-variant-numeric: tabular-nums; }
.birth-chart-identity-strip .birth-chart-meta__rows { display: grid; min-width: 0; gap: 2px; }
.birth-chart-identity-strip .birth-chart-meta__row { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.birth-chart-identity-strip .birth-chart-meta__fact { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.birth-chart-identity-strip .birth-chart-meta__separator { color: #b19ad3; }
.birth-chart-identity-strip .birth-chart-meta .birth-chart-meta__lead { color: #8055d2; font-size: var(--type-body-lg); }
.report-birth-chart .birth-chart-identity-strip {
  grid-template-columns: 160px minmax(0, 1fr);
  align-items: center;
  gap: 22px;
  margin: 15px 2px 22px;
}
.report-birth-chart .day-pillar-character--report_cover {
  --day-pillar-character-size: 64px;
  width: 100%;
  grid-template-areas: "character" "caption";
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 7px;
  margin: 0;
}
.report-birth-chart .day-pillar-character--report_cover .day-pillar-character__image {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  filter: drop-shadow(0 7px 7px rgb(82 47 144 / 15%));
}
.home-birth-chart .day-pillar-character--report_cover {
  --day-pillar-character-size: 72px;
}
.home-birth-chart .day-pillar-character--report_cover .day-pillar-character__portrait,
.daily-zodiac-main__identity > img {
  box-sizing: border-box;
  width: 72px;
  height: 72px;
  max-width: none;
  max-height: none;
  padding: 0;
  border: 6px solid transparent;
  border-image: url('data:image/svg+xml;utf8,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6 0H14V2H16V4H18V6H20V14H18V16H16V18H14V20H6V18H4V16H2V14H0V6H2V4H4V2H6V0ZM6 2V4H4V6H2V14H4V16H6V18H14V16H16V14H18V6H16V4H14V2H6Z" fill="%239b73d4"/></svg>') 6 stretch;
  border-radius: 0;
  background: #fbf5fe;
  clip-path: none;
  filter: none;
}
.daily-zodiac-main__identity > img {
  width: 48px;
  height: 48px;
}
.home-birth-chart .day-pillar-character--report_cover .day-pillar-character__portrait {
  overflow: hidden;
}
.home-birth-chart .day-pillar-character--report_cover .day-pillar-character__image {
  border: 0;
  background: transparent;
  filter: none;
  image-rendering: pixelated;
  transform: none;
}
.home-birth-chart .day-pillar-character__eyebrow { display: none; }
.report-birth-chart .day-pillar-character--report_cover .day-pillar-character__caption {
  display: grid;
  justify-items: center;
  gap: 2px;
  transform: none;
}
.report-birth-chart .day-pillar-character--report_cover .day-pillar-character__eyebrow {
  color: #9b83bd;
  font-size: var(--type-caption);
  font-weight: 600;
  letter-spacing: .08em;
}
.report-birth-chart .day-pillar-character--report_cover .day-pillar-character__caption strong {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #5f3aa9;
  font-size: var(--type-body);
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
}
.home-birth-chart .day-pillar-character--report_cover .day-pillar-character__caption strong {
  width: 100%;
  overflow-wrap: normal;
  font-size: var(--type-ui-micro);
  letter-spacing: -.06em;
  white-space: nowrap;
  word-break: normal;
}
.report-birth-chart .birth-chart-meta {
  min-height: 78px;
  align-content: center;
  gap: 10px;
  padding: 7px 0 7px 24px;
  border: 0;
  border-left: 2px dotted rgb(141 97 220 / 35%);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.home-birth-chart .birth-chart-meta { border-left: 0; }
.home-birth-chart .precision-notice {
  --tamami-border-strong: #b5a1ec;
  --tamami-section: #f8f3fe;
  --tamami-text: #6b667a;

  padding-block: 8px;
  border-left-color: var(--tamami-border-strong);
  background: var(--tamami-section);
  color: var(--tamami-text);
  font-size: var(--type-caption);
  line-height: 1.8;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.report-birth-chart .birth-chart-meta .birth-chart-meta__lead {
  color: #8d61dc;
  font-size: var(--type-card-title);
}
.report-birth-chart .birth-chart-meta__rows { gap: 5px; }
.report-birth-chart .birth-chart-meta__row:first-child {
  color: #5632ad;
  font-size: var(--type-subtitle);
}
.home-birth-chart .birth-chart-meta__row:first-child { font-size: var(--type-body-lg); }
.report-birth-chart .birth-chart-meta__row:nth-child(2) {
  color: #765ca4;
  font-size: var(--type-body);
}
.home-birth-chart .birth-chart-identity-strip {
  --home-birth-id-frame: url("/images/pixel_frame_input.svg?v=1");
  --home-birth-portrait-column: 72px;
  --home-birth-identity-gap: 14px;
  --home-birth-identity-row-gap: 6px;
  --home-birth-meta-inset: 0px;
  min-height: 148px;
  grid-template-columns: var(--home-birth-portrait-column) minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: start;
  column-gap: var(--home-birth-identity-gap);
  row-gap: var(--home-birth-identity-row-gap);
  border: 14px solid transparent;
  border-image-source: var(--home-birth-id-frame);
  border-image-slice: 14 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  background-clip: border-box;
  background-origin: border-box;
  box-shadow: none;
  clip-path: none;
  image-rendering: pixelated;
}
.home-birth-chart .day-pillar-character--home {
  width: var(--home-birth-portrait-column);
  justify-items: start;
}
.home-birth-chart .birth-chart-id-meta {
  display: grid;
  min-width: 0;
  grid-column: 2;
  grid-row: 2;
  align-content: start;
  gap: 8px;
  margin: 0;
  padding: 0;
}
.home-birth-chart .birth-chart-id-meta > div {
  display: grid;
  min-width: 0;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: baseline;
  gap: 6px;
}
.home-birth-chart .birth-chart-id-name {
  --birth-chart-name-badge-frame: url("/images/pixel_badge_report_preview.svg?v=1");
  --birth-chart-name-badge-slice: 4;

  box-sizing: border-box;
  display: inline-flex;
  grid-column: 1 / -1;
  grid-row: 1;
  width: max-content;
  max-width: 100%;
  min-width: 0;
  align-items: center;
  gap: 3px;
  justify-content: flex-start;
  justify-self: start;
  margin: 0;
  padding: 0 4px;
  border: calc(var(--birth-chart-name-badge-slice) * 1px) solid transparent;
  border-image-source: var(--birth-chart-name-badge-frame);
  border-image-slice: var(--birth-chart-name-badge-slice) fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  background-clip: border-box;
  background-origin: border-box;
  box-shadow: none;
  clip-path: none;
  color: #4c30af;
  font-size: calc(var(--type-body) + 4px);
  font-weight: 700;
  line-height: 1.15;
  image-rendering: pixelated;
  text-align: left;
  transform: none;
  word-break: keep-all;
}
.home-birth-chart .birth-chart-id-name__tamami {
  display: block;
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  object-fit: contain;
  image-rendering: pixelated;
}
.home-birth-chart .birth-chart-id-name strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  overflow-wrap: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-birth-chart .birth-chart-id-meta dt {
  color: #a38abc;
  font-family: 'AppNumerals', 'SchoolSafeUniverse', 'Pretendard', system-ui, sans-serif;
  font-size: var(--type-caption);
  font-weight: 700;
  white-space: nowrap;
}
.home-birth-chart .birth-chart-id-meta dd {
  min-width: 0;
  margin: 0;
  color: #6d4eaa;
  font-family: 'AppNumerals', 'SchoolSafeUniverse', 'Pretendard', system-ui, sans-serif;
  font-size: var(--type-label);
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.home-birth-chart .birth-chart-id-meta dd strong {
  color: #4f2aa5;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.home-birth-chart .birth-chart-id-meta dd span { color: #8065ad; white-space: nowrap; }
.home-birth-chart .birth-chart-id-meta > div:first-child dd {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  column-gap: 5px;
}
.home-birth-chart .day-pillar-character--report_cover .day-pillar-character__portrait {
  width: 72px;
  height: 72px;
  padding: 4px 6px;
  background: #f7effd;
}
.home-birth-chart .day-pillar-character--report_cover {
  grid-column: 1;
  grid-row: 2;
  grid-template-areas: "character" "caption";
  grid-template-rows: auto auto;
  row-gap: var(--home-birth-identity-row-gap);
}
.home-birth-chart .day-pillar-character--report_cover .day-pillar-character__caption {
  position: static;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  min-height: var(--type-ui-micro);
  max-width: var(--home-birth-portrait-column);
  grid-area: caption;
  line-height: 1.3;
}
.home-birth-chart .day-pillar-character--report_cover .day-pillar-character__caption strong {
  display: block;
  width: 100%;
  height: auto;
  min-height: var(--type-ui-micro);
  overflow: visible;
  font-family: 'AppNumerals', 'SchoolSafeUniverse', 'Pretendard', system-ui, sans-serif;
  line-height: 1.3;
  letter-spacing: -.1em;
  opacity: 1;
  visibility: visible;
  text-overflow: unset;
  transform: none;
}
.birth-chart-identity-strip--home {
  position: relative;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 0;
  margin: 18px 0 22px;
  isolation: isolate;
}
.birth-chart-identity-strip--home .day-pillar-character--home {
  --day-pillar-character-size: 76px;
  z-index: 2;
  width: 96px;
  grid-template-columns: 76px;
  gap: 1px;
  transform: translateX(4px);
}
.birth-chart-identity-strip--home .day-pillar-character--home .day-pillar-character__image {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  filter: drop-shadow(0 9px 9px rgba(82, 47, 144, .16));
}
.birth-chart-identity-strip--home .day-pillar-character--home .day-pillar-character__caption {
  z-index: 1;
}
.birth-chart-identity-strip--home .day-pillar-character--home .day-pillar-character__caption strong {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 3px 9px;
  border: 1px solid rgba(211, 188, 238, .72);
  border-radius: 999px;
  background: rgba(255, 252, 255, .9);
  box-shadow: 0 5px 14px rgba(89, 54, 139, .08);
  font-size: var(--type-caption);
  white-space: nowrap;
}
.birth-chart-identity-strip--home .birth-chart-meta {
  min-height: 82px;
  margin-left: -28px;
  padding: 15px 18px 15px 48px;
  border-color: rgba(201, 174, 235, .72);
  border-radius: 19px;
  background: rgba(253, 249, 255, .86);
  box-shadow: 0 12px 28px rgba(90, 54, 146, .07);
  flex-wrap: nowrap;
}
.birth-chart-identity-strip--home .birth-chart-meta .birth-chart-meta__lead {
  color: #8d61dc;
  font-size: var(--type-small);
}
.saju-pillar-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid #cdb4eb;
  border-radius: 14px;
  background: #fffaff;
}
.saju-pillar { min-width: 0; }
.saju-pillar + .saju-pillar { border-left: 1px solid #d8c4ef; }
.saju-pillar__label {
  margin: 0;
  padding: 9px 4px;
  background: #f7effc;
  color: #6944b5;
  font-size: var(--type-small);
  font-weight: 600;
  text-align: center;
}
.saju-pillar__characters { display: grid; }
.saju-pillar-glyph {
  appearance: none;
  display: grid;
  width: 100%;
  min-height: 74px;
  align-content: center;
  justify-items: center;
  gap: 5px;
  padding: 9px 3px 8px;
  border: 0;
  border-top: 1px solid rgba(104, 72, 161, .18);
  color: var(--pillar-color);
  cursor: pointer;
  font: inherit;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.saju-pillar-glyph + .saju-pillar-glyph { border-top-color: #cdb4eb; }
.saju-pillar-glyph strong {
  font-family: 'AppNumerals', 'SchoolSafeUniverse', 'Pretendard', system-ui, sans-serif;
  font-size: var(--type-section-title-lg);
  font-weight: 600;
  line-height: 1;
}
.saju-pillar-glyph small { display: flex; align-items: center; gap: 4px; color: #765f91; font-size: var(--type-caption); font-weight: 600; }
.saju-pillar-glyph small b { color: var(--pillar-color); font-weight: 600; }
.saju-pillar-glyph small b::before { margin-right: 4px; color: #a991c7; content: "·"; }
.saju-pillar-glyph--wood { --pillar-color: #64b075; background: var(--pillar-wood-surface); }
.saju-pillar-glyph--fire { --pillar-color: #ff6d9a; background: var(--pillar-fire-surface); }
.saju-pillar-glyph--earth { --pillar-color: #ef9731; background: var(--pillar-earth-surface); }
.saju-pillar-glyph--metal { --pillar-color: #9e90b8; background: var(--pillar-metal-surface); }
.saju-pillar-glyph--water { --pillar-color: #518ee3; background: var(--pillar-water-surface); }
.saju-pillar-note { margin: 7px 2px 0; color: #8b74a7; font-size: var(--type-caption); font-weight: 600; text-align: right; }
.report-birth-chart .saju-pillar-grid {
  gap: 6px;
  padding: 2px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.report-birth-chart .saju-pillar {
  display: grid;
  align-content: start;
  gap: 5px;
}
.report-birth-chart .saju-pillar + .saju-pillar { border-left: 0; }
.report-birth-chart .saju-pillar__characters { gap: 5px; }
.report-birth-chart .saju-pillar__label,
.report-birth-chart .saju-pillar-glyph,
.report-birth-chart .saju-pillar__fallback {
  --saju-chip-frame: url("/images/pixel_frame_saju_label.svg?v=4");
  position: relative;
  overflow: visible;
  border: 14px solid transparent;
  border-image-source: var(--saju-chip-frame);
  border-image-slice: 14 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  background-clip: border-box;
  background-origin: border-box;
  box-shadow: none;
  clip-path: none;
  filter: none;
  image-rendering: pixelated;
  isolation: isolate;
  transform: none;
  transition: transform 45ms ease-out;
}
.report-birth-chart .saju-pillar__label {
  height: 32px;
  min-height: 0;
  padding: 0 2px;
}
.report-birth-chart .saju-pillar__label > span {
  position: absolute;
  inset: -14px;
  display: grid;
  place-items: center;
  line-height: 1;
}
.report-birth-chart .saju-pillar-glyph,
.report-birth-chart .saju-pillar-glyph + .saju-pillar-glyph {
  min-height: 0;
  padding: 0 2px;
  border-top: 14px solid transparent;
}
.report-birth-chart .saju-pillar-glyph { height: 74px; }
.report-birth-chart .saju-pillar-glyph:active { transform: translateY(2px); }
.report-birth-chart .saju-pillar-glyph:focus-visible {
  outline: 3px solid var(--ui-focus, #5a43bc);
  outline-offset: 1px;
}
.report-birth-chart .saju-pillar-glyph small {
  width: calc(100% + 24px);
  justify-content: center;
  margin-inline: -12px;
  white-space: nowrap;
}
.report-birth-chart .saju-pillar-glyph--wood { --saju-chip-frame: url("/images/pixel_frame_saju_wood.svg?v=4"); }
.report-birth-chart .saju-pillar-glyph--fire { --saju-chip-frame: url("/images/pixel_frame_saju_fire.svg?v=4"); }
.report-birth-chart .saju-pillar-glyph--earth { --saju-chip-frame: url("/images/pixel_frame_saju_earth.svg?v=4"); }
.report-birth-chart .saju-pillar-glyph--metal { --saju-chip-frame: url("/images/pixel_frame_saju_metal.svg?v=4"); }
.report-birth-chart .saju-pillar-glyph--water { --saju-chip-frame: url("/images/pixel_frame_saju_water.svg?v=4"); }
.report-birth-chart .saju-pillar__fallback { --saju-chip-frame: url("/images/pixel_frame_saju_fallback.svg?v=4"); }
@media (prefers-reduced-motion: reduce) {
  .report-birth-chart .saju-pillar-glyph { transition: none; }
  .report-birth-chart .saju-pillar-glyph:active { transform: none; }
}
.saju-pillar-details { display: grid; gap: 10px; margin-top: 20px; padding-top: 18px; border-top: 1px solid #e1d4f2; }
.saju-detail-card { overflow: hidden; border: 1px solid #dfd1f1; border-radius: 12px; background: #fffaff; }
.saju-detail-card > header { display: flex; align-items: center; gap: 8px; padding: 11px 13px 9px; }
.saju-detail-card > header > i, .saju-detail-card > header > .lucide {
  display: grid;
  width: 25px;
  height: 25px;
  flex: 0 0 auto;
  border-radius: 8px;
  background: #eee4fa;
  color: #8258ce;
  place-items: center;
}
.saju-detail-card > header > .lucide { padding: 5px; }
.saju-detail-card > header h3 { margin: 0; color: #5b36aa; font-size: var(--type-body-lg); font-weight: 600; }
.saju-detail-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid #eadff5; }
.saju-detail-grid > div {
  display: grid;
  min-width: 0;
  min-height: 58px;
  align-content: center;
  justify-items: center;
  gap: 6px;
  padding: 9px 4px 10px;
  text-align: center;
}
.saju-detail-grid > div + div { border-left: 1px solid #eee5f7; }
.saju-detail-grid small { color: #a089bf; font-size: var(--type-caption); font-weight: 600; }
.saju-detail-grid strong { color: #6446a6; font-size: var(--type-body); font-weight: 600; }
.saju-detail-card--stage .saju-detail-grid > div { background: #fdf8fe; }
.saju-interaction-list { display: grid; margin: 0; border-top: 1px solid #eadff5; }
.saju-interaction-list > div { display: grid; grid-template-columns: 76px minmax(0, 1fr); min-height: 46px; }
.saju-interaction-list > div + div { border-top: 1px solid #eee5f7; }
.saju-interaction-list dt {
  display: flex;
  align-items: center;
  padding: 9px 11px;
  background: #faf5fd;
  color: #7253a5;
  font-size: var(--type-label);
  font-weight: 600;
}
.saju-interaction-list dd { display: flex; align-items: center; min-width: 0; margin: 0; padding: 7px 10px; }
.saju-interaction-list ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.saju-interaction-list li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 999px;
  background: #f2eafb;
}
.saju-interaction-list li strong { color: #6446a6; font-size: var(--type-label); font-weight: 600; }
.saju-interaction-list li small { color: #8f7aa9; font-size: var(--type-caption); font-weight: 600; }
.saju-interaction-list li small::before { margin-right: 6px; color: #b7a3cf; content: "·"; }
.saju-detail-card--sinsal .saju-detail-grid > div { min-height: 94px; align-content: start; }
.saju-detail-card--sinsal ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.saju-detail-card--sinsal li {
  padding: 3px 5px;
  border-radius: 999px;
  background: #f2eafb;
  color: #7253a5;
  font-size: var(--type-caption);
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.saju-detail-help { margin: 0; padding: 9px 12px 11px; border-top: 1px solid #eee5f7; color: #8f7aa9; font-size: var(--type-label); line-height: 1.6; }
.saju-detail-help--terms { display: grid; gap: 7px; }
.saju-detail-help--terms div { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px; }
.saju-detail-help--terms dt { color: #7253a5; font-weight: 600; }
.saju-detail-help--terms dd { margin: 0; }
.saju-detail-empty { color: #c5b5d7; font-size: var(--type-body); }
.report-birth-chart .saju-pillar-details {
  --saju-detail-panel-clip: polygon(
    16px 0, calc(100% - 16px) 0,
    calc(100% - 16px) 2px, calc(100% - 12px) 2px,
    calc(100% - 12px) 4px, calc(100% - 10px) 4px,
    calc(100% - 10px) 6px, calc(100% - 8px) 6px,
    calc(100% - 8px) 8px, calc(100% - 6px) 8px,
    calc(100% - 6px) 10px, calc(100% - 4px) 10px,
    calc(100% - 4px) 12px, calc(100% - 2px) 12px,
    calc(100% - 2px) 16px, 100% 16px,
    100% calc(100% - 16px), calc(100% - 2px) calc(100% - 16px),
    calc(100% - 2px) calc(100% - 12px), calc(100% - 4px) calc(100% - 12px),
    calc(100% - 4px) calc(100% - 10px), calc(100% - 6px) calc(100% - 10px),
    calc(100% - 6px) calc(100% - 8px), calc(100% - 8px) calc(100% - 8px),
    calc(100% - 8px) calc(100% - 6px), calc(100% - 10px) calc(100% - 6px),
    calc(100% - 10px) calc(100% - 4px), calc(100% - 12px) calc(100% - 4px),
    calc(100% - 12px) calc(100% - 2px), calc(100% - 16px) calc(100% - 2px),
    calc(100% - 16px) 100%, 16px 100%,
    16px calc(100% - 2px), 12px calc(100% - 2px),
    12px calc(100% - 4px), 10px calc(100% - 4px),
    10px calc(100% - 6px), 8px calc(100% - 6px),
    8px calc(100% - 8px), 6px calc(100% - 8px),
    6px calc(100% - 10px), 4px calc(100% - 10px),
    4px calc(100% - 12px), 2px calc(100% - 12px),
    2px calc(100% - 16px), 0 calc(100% - 16px),
    0 16px, 2px 16px,
    2px 12px, 4px 12px,
    4px 10px, 6px 10px,
    6px 8px, 8px 8px,
    8px 6px, 10px 6px,
    10px 4px, 12px 4px,
    12px 2px, 16px 2px
  );
  --saju-detail-panel-inner-clip: polygon(
    14px 0, calc(100% - 14px) 0,
    calc(100% - 14px) 2px, calc(100% - 10px) 2px,
    calc(100% - 10px) 4px, calc(100% - 8px) 4px,
    calc(100% - 8px) 6px, calc(100% - 6px) 6px,
    calc(100% - 6px) 8px, calc(100% - 4px) 8px,
    calc(100% - 4px) 10px, calc(100% - 2px) 10px,
    calc(100% - 2px) 14px, 100% 14px,
    100% calc(100% - 14px), calc(100% - 2px) calc(100% - 14px),
    calc(100% - 2px) calc(100% - 10px), calc(100% - 4px) calc(100% - 10px),
    calc(100% - 4px) calc(100% - 8px), calc(100% - 6px) calc(100% - 8px),
    calc(100% - 6px) calc(100% - 6px), calc(100% - 8px) calc(100% - 6px),
    calc(100% - 8px) calc(100% - 4px), calc(100% - 10px) calc(100% - 4px),
    calc(100% - 10px) calc(100% - 2px), calc(100% - 14px) calc(100% - 2px),
    calc(100% - 14px) 100%, 14px 100%,
    14px calc(100% - 2px), 10px calc(100% - 2px),
    10px calc(100% - 4px), 8px calc(100% - 4px),
    8px calc(100% - 6px), 6px calc(100% - 6px),
    6px calc(100% - 8px), 4px calc(100% - 8px),
    4px calc(100% - 10px), 2px calc(100% - 10px),
    2px calc(100% - 14px), 0 calc(100% - 14px),
    0 14px, 2px 14px,
    2px 10px, 4px 10px,
    4px 8px, 6px 8px,
    6px 6px, 8px 6px,
    8px 4px, 10px 4px,
    10px 2px, 14px 2px
  );
  --saju-detail-item-clip: polygon(
    8px 0, calc(100% - 8px) 0,
    calc(100% - 8px) 1px, calc(100% - 5px) 1px,
    calc(100% - 5px) 2px, calc(100% - 2px) 2px,
    calc(100% - 2px) 4px, calc(100% - 1px) 4px,
    calc(100% - 1px) 6px, 100% 6px,
    100% calc(100% - 6px), calc(100% - 1px) calc(100% - 6px),
    calc(100% - 1px) calc(100% - 4px), calc(100% - 2px) calc(100% - 4px),
    calc(100% - 2px) calc(100% - 2px), calc(100% - 5px) calc(100% - 2px),
    calc(100% - 5px) calc(100% - 1px), calc(100% - 8px) calc(100% - 1px),
    calc(100% - 8px) 100%, 8px 100%,
    8px calc(100% - 1px), 5px calc(100% - 1px),
    5px calc(100% - 2px), 2px calc(100% - 2px),
    2px calc(100% - 4px), 1px calc(100% - 4px),
    1px calc(100% - 6px), 0 calc(100% - 6px),
    0 6px, 1px 6px,
    1px 4px, 2px 4px,
    2px 2px, 5px 2px,
    5px 1px, 8px 1px
  );
  --saju-detail-item-inner-clip: polygon(
    7px 0, calc(100% - 7px) 0,
    calc(100% - 7px) 1px, calc(100% - 4px) 1px,
    calc(100% - 4px) 3px, calc(100% - 1px) 3px,
    calc(100% - 1px) 5px, 100% 5px,
    100% calc(100% - 5px), calc(100% - 1px) calc(100% - 5px),
    calc(100% - 1px) calc(100% - 3px), calc(100% - 4px) calc(100% - 3px),
    calc(100% - 4px) calc(100% - 1px), calc(100% - 7px) calc(100% - 1px),
    calc(100% - 7px) 100%, 7px 100%,
    7px calc(100% - 1px), 4px calc(100% - 1px),
    4px calc(100% - 3px), 1px calc(100% - 3px),
    1px calc(100% - 5px), 0 calc(100% - 5px),
    0 5px, 1px 5px,
    1px 3px, 4px 3px,
    4px 1px, 7px 1px
  );
  --saju-detail-tag-clip: polygon(
    6px 0, calc(100% - 6px) 0,
    calc(100% - 6px) 1px, calc(100% - 3px) 1px,
    calc(100% - 3px) 2px, calc(100% - 1px) 2px,
    calc(100% - 1px) 4px, 100% 4px,
    100% calc(100% - 4px), calc(100% - 1px) calc(100% - 4px),
    calc(100% - 1px) calc(100% - 2px), calc(100% - 3px) calc(100% - 2px),
    calc(100% - 3px) calc(100% - 1px), calc(100% - 6px) calc(100% - 1px),
    calc(100% - 6px) 100%, 6px 100%,
    6px calc(100% - 1px), 3px calc(100% - 1px),
    3px calc(100% - 2px), 1px calc(100% - 2px),
    1px calc(100% - 4px), 0 calc(100% - 4px),
    0 4px, 1px 4px,
    1px 2px, 3px 2px,
    3px 1px, 6px 1px
  );
  --saju-detail-tag-inner-clip: polygon(
    5px 0, calc(100% - 5px) 0,
    calc(100% - 5px) 1px, calc(100% - 2px) 1px,
    calc(100% - 2px) 3px, 100% 3px,
    100% calc(100% - 3px), calc(100% - 2px) calc(100% - 3px),
    calc(100% - 2px) calc(100% - 1px), calc(100% - 5px) calc(100% - 1px),
    calc(100% - 5px) 100%, 5px 100%,
    5px calc(100% - 1px), 2px calc(100% - 1px),
    2px calc(100% - 3px), 0 calc(100% - 3px),
    0 3px, 2px 3px,
    2px 1px, 5px 1px
  );
  display: grid;
  gap: 12px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 0;
  border-top: 2px dotted rgb(141 97 220 / 28%);
  background: transparent;
}
.report-birth-chart .saju-detail-card {
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #9b73d4;
  clip-path: var(--saju-detail-panel-clip);
  filter: drop-shadow(0 2px 0 rgb(94 54 160 / 8%));
  isolation: isolate;
}
.report-birth-chart .saju-detail-card::before {
  position: absolute;
  z-index: -1;
  inset: 2px;
  background: #fbf7fe;
  clip-path: var(--saju-detail-panel-inner-clip);
  content: "";
}
.report-birth-chart .saju-detail-card > header {
  min-height: 46px;
  gap: 9px;
  padding: 9px 11px 8px;
}
.report-birth-chart .saju-detail-card > header::after {
  height: 2px;
  margin-left: 2px;
  border-top: 2px dotted rgb(141 97 220 / 25%);
  background: transparent;
  content: "";
  flex: 1;
}
.report-birth-chart .saju-detail-card__icon {
  position: relative;
  display: grid;
  width: 28px;
  height: 28px;
  background: #c7afe5;
  clip-path: var(--saju-detail-item-clip);
  flex: 0 0 28px;
  isolation: isolate;
  place-items: center;
}
.report-birth-chart .saju-detail-card__icon::before {
  position: absolute;
  z-index: -1;
  inset: 1px;
  background: #eee5fa;
  clip-path: var(--saju-detail-item-inner-clip);
  content: "";
}
.report-birth-chart .saju-detail-card__icon > i,
.report-birth-chart .saju-detail-card__icon > .lucide {
  width: 16px;
  height: 16px;
  color: #7650c6;
  stroke-width: 2;
}
.report-birth-chart .saju-detail-card > header h3 {
  color: #5632ad;
  font-size: var(--type-body);
}
.report-birth-chart .saju-detail-grid {
  gap: 4px;
  padding: 0 8px 8px;
  border-top: 0;
}
.report-birth-chart .saju-detail-grid > div,
.report-birth-chart .saju-interaction-list > div {
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #d4c1eb;
  clip-path: var(--saju-detail-item-clip);
  isolation: isolate;
}
.report-birth-chart .saju-detail-grid > div::before,
.report-birth-chart .saju-interaction-list > div::before {
  position: absolute;
  z-index: -1;
  inset: 1px;
  background: rgb(255 252 255 / 94%);
  clip-path: var(--saju-detail-item-inner-clip);
  content: "";
}
.report-birth-chart .saju-detail-grid > div + div { border-left: 0; }
.report-birth-chart .saju-detail-card--stage .saju-detail-grid > div { background: #d4c1eb; }
.report-birth-chart .saju-detail-card--stage .saju-detail-grid > div::before {
  background: rgb(251 247 253 / 95%);
}
.report-birth-chart .saju-interaction-list {
  gap: 4px;
  padding: 0 8px 8px;
  border-top: 0;
}
.report-birth-chart .saju-interaction-list > div + div { border-top: 0; }
.report-birth-chart .saju-interaction-list dt,
.report-birth-chart .saju-interaction-list dd {
  position: relative;
  z-index: 1;
  background: transparent;
}
.report-birth-chart .saju-interaction-list dt {
  margin: 5px 0 5px 5px;
  padding: 5px 8px;
  border-right: 1px dotted #d5c2ea;
}
.report-birth-chart .saju-interaction-list li,
.report-birth-chart .saju-detail-card--sinsal li {
  position: relative;
  overflow: hidden;
  border-radius: 0;
  background: #cfb9e8;
  clip-path: var(--saju-detail-tag-clip);
  box-shadow: none;
  isolation: isolate;
}
.report-birth-chart .saju-interaction-list li::before,
.report-birth-chart .saju-detail-card--sinsal li::before {
  position: absolute;
  z-index: -1;
  inset: 1px;
  background: #f0e7fa;
  clip-path: var(--saju-detail-tag-inner-clip);
  content: "";
}
.report-birth-chart .saju-detail-card--sinsal .saju-detail-grid > div { background: #d4c1eb; }
.report-birth-chart .saju-detail-help {
  margin: 0 8px 8px;
  padding: 9px 4px 3px;
  border-top: 0;
  border-top: 2px dotted rgb(141 97 220 / 21%);
  background: transparent;
}
.saju-pillar__fallback {
  display: grid;
  min-height: 148px;
  margin: 0;
  border-top: 1px solid #d8c4ef;
  background: #f3eef7;
  color: #917dae;
  font-size: var(--type-body);
  font-weight: 600;
  place-items: center;
}
.fortune-heading-copy { min-width: 0; }
.fortune-narrative {
  display: grid;
  gap: 18px;
  margin-top: 18px;
}
.fortune-page-shell,
.guest-fortune-preview { --score-color: #eb48d1; }
.fortune-narrative--overall {
  position: relative;
  gap: 0;
  margin-top: 28px;
}
.fortune-overall-speech {
  --fortune-speech-shape: polygon(
    10px 0, calc(100% - 10px) 0,
    calc(100% - 10px) 2px, calc(100% - 6px) 2px,
    calc(100% - 6px) 4px, calc(100% - 2px) 4px,
    calc(100% - 2px) 8px, 100% 8px,
    100% calc(100% - 26px),
    calc(100% - 2px) calc(100% - 26px),
    calc(100% - 2px) calc(100% - 22px),
    calc(100% - 6px) calc(100% - 22px),
    calc(100% - 6px) calc(100% - 20px),
    calc(100% - 10px) calc(100% - 20px),
    calc(100% - 10px) calc(100% - 18px),
    calc(50% + 18px) calc(100% - 18px),
    50% 100%,
    calc(50% - 8px) calc(100% - 18px),
    10px calc(100% - 18px), 10px calc(100% - 20px),
    6px calc(100% - 20px), 6px calc(100% - 22px),
    2px calc(100% - 22px), 2px calc(100% - 26px),
    0 calc(100% - 26px), 0 8px,
    2px 8px, 2px 4px, 6px 4px,
    6px 2px, 10px 2px
  );
  position: relative;
  z-index: 3;
  isolation: isolate;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 18px 24px 36px;
  background: transparent;
  color: #351785;
  font-size: var(--type-body-lg);
  font-weight: 600;
  line-height: 1.65;
  letter-spacing: -.02em;
  text-align: center;
  word-break: keep-all;
}
.fortune-overall-speech::before,
.fortune-overall-speech::after {
  position: absolute;
  clip-path: var(--fortune-speech-shape);
  content: "";
  pointer-events: none;
}
.fortune-overall-speech::before {
  z-index: 0;
  inset: 0;
  background: #896bcc;
}
.fortune-overall-speech::after {
  z-index: 1;
  inset: 2px;
  background: #fff;
}
.fortune-overall-speech strong {
  position: relative;
  z-index: 2;
  display: block;
  font: inherit;
}
.fortune-overall-score-mascot {
  position: relative;
  z-index: 2;
  width: 156px;
  margin: -22px auto -48px;
  line-height: 0;
}
.fortune-overall-score-mascot img {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
}
.fortune-overall-score-mascot > strong {
  position: absolute;
  right: 20%;
  bottom: 8%;
  left: 20%;
  display: flex;
  min-height: 33px;
  align-items: center;
  justify-content: center;
  gap: 1px;
  color: var(--score-color);
  font-family: 'AppNumerals', 'SchoolSafeUniverse', 'Pretendard', system-ui, sans-serif;
  font-size: var(--type-section-title);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.fortune-overall-score-mascot > strong small {
  font-size: var(--type-caption);
  font-weight: inherit;
}
.fortune-domain + .narrative-section,
.fortune-domain-shell + .narrative-section { margin-top: 0; }
.narrative-section {
  --narrative-section-frame-image: url("/images/pixel_frame_narrative_section_white.svg?v=1");

  min-width: 0;
  padding: 11px;
  overflow-wrap: anywhere;
  border: 14px solid transparent;
  border-image-source: var(--narrative-section-frame-image);
  border-image-slice: 14 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  background-clip: border-box;
  background-origin: border-box;
  box-shadow: none;
  clip-path: none;
  color: #645477;
  image-rendering: pixelated;
}
.fortune-page-shell .narrative-section[data-fortune-section="overall"] {
  --narrative-section-frame-image: url("/images/pixel_frame_narrative_section_white.svg?v=1");

  background-color: transparent;
  background-image: none;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.fortune-page-shell .narrative-section:not([data-fortune-section="overall"]) {
  --narrative-section-frame-image: url("/images/pixel_frame_narrative_section_lilac.svg?v=1");

  background-color: transparent;
  background-image: none;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.fortune-page-shell .narrative-section:not([data-fortune-section="overall"]) .narrative-body {
  color: #4f425d;
}
.narrative-section > h2 { margin: 0 0 18px; color: #5632ad; font-size: var(--type-section-title); }
.narrative-section-title--with-icon { display: flex; align-items: center; gap: 8px; }
.narrative-section-title--with-icon .fortune-domain-icon { flex-shrink: 0; }
.narrative-summary-frame {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: 48px;
  grid-template-columns: 46px minmax(0, 1fr) 46px;
  align-items: center;
  gap: 16px;
  padding: 15px 18px;
  background: none;
}
.narrative-summary-frame::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  border: 18px solid transparent;
  border-image: url("/images/fortune-summary-frame.png?v=1") 80 fill stretch;
  content: "";
  pointer-events: none;
}
.narrative-summary-frame > * {
  position: relative;
  z-index: 1;
}
.narrative-summary {
  grid-column: 2;
  margin: 0;
  color: #5632ad;
  font-size: var(--type-subtitle);
  line-height: 1.75;
  text-align: center;
  word-break: keep-all;
}
.narrative-summary-sparkles {
  position: relative;
  grid-column: 3;
  display: block;
  width: 42px;
  height: 30px;
  color: #a17ee5;
  font-size: var(--type-body-lg);
  line-height: 1;
}
.narrative-summary-sparkles i,
.narrative-summary-sparkles b { position: absolute; font-style: normal; font-weight: 400; }
.narrative-summary-sparkles i { top: 15px; right: 0; font-size: var(--type-caption); }
.narrative-summary-sparkles b { right: 14px; bottom: 0; font-size: var(--type-caption); }
.narrative-body { margin-top: 18px; color: #645477; font-size: var(--type-body-lg); line-height: 1.85; word-break: keep-all; }
.narrative-body > p { margin: 0; }
.narrative-body > p + p { margin-top: 14px; }
.narrative-basis { margin-top: 14px; border: 1px solid #e5d9f2; border-radius: 10px; background: #faf7fc; }
.narrative-basis summary {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 9px;
  padding: 0 14px;
  color: #7253a5;
  cursor: pointer;
  list-style: none;
}
.narrative-basis summary:focus-visible { outline: 3px solid #cdb7eb; outline-offset: 2px; }
.narrative-basis summary::-webkit-details-marker { display: none; }
.narrative-basis summary::after {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-right: 2px solid #967eb6;
  border-bottom: 2px solid #967eb6;
  content: "";
  transform: rotate(45deg) translateY(-2px);
  transition: transform 160ms ease;
}
.narrative-basis[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.narrative-basis summary span { font-size: var(--type-body); font-weight: 600; }
.narrative-basis summary small { color: #9a88ad; font-size: var(--type-small); font-weight: 600; }
.narrative-basis__content { padding: 14px 16px 16px; border-top: 1px solid #e5d9f2; background: #f7f0fc; }
.narrative-basis h3 { margin: 0 0 10px; color: #7253a5; font-size: var(--type-body); }
.narrative-basis ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.narrative-basis li { display: grid; gap: 3px; line-height: 1.65; }
.narrative-basis__heading { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.narrative-basis li strong { color: #5632ad; font-size: var(--type-body); }
.narrative-basis li span { font-size: var(--type-body); }
.narrative-basis__period-label {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  padding: 2px 7px;
  border: 1px solid #d7c5ed;
  border-radius: 999px;
  background: #eee4f9;
  color: #7253a5;
  font-size: var(--type-caption);
  font-weight: 600;
}

@media (max-width: 639px) {
  .conversation-page-hero {
    --conversation-hero-title-size: clamp(var(--type-section-title), 7.44vw, var(--type-page-title));

    min-height: 170px;
    grid-template-columns: minmax(125px, .78fr) minmax(0, 1.22fr);
    align-items: center;
    gap: 2px;
    padding: 14px 2px 10px 12px;
    overflow: hidden;
  }
  .conversation-page-hero__copy { max-width: none; min-height: 142px; }
  .conversation-page-hero__title { font-size: clamp(var(--type-section-title), 7.44vw, var(--type-page-title)); }
  .conversation-page-hero__divider { width: min(100%, 150px); margin-top: 13px; }
  .conversation-page-hero__description { margin-top: 13px; font-size: var(--type-label); line-height: 1.5; }
  .fortune-tabs.fortune-tabs--hero { width: 240px; }
  .conversation-page-hero__conversation { min-height: 146px; }
  .conversation-page-hero__speech {
    top: 15px;
    right: clamp(54px, 24%, 72px);
    width: min(174px, calc(100% - 58px));
    min-height: 82px;
    padding: 17px 14px 21px;
    font-size: clamp(var(--type-caption), 3.36vw, var(--type-small));
  }
  .conversation-page-hero__speech span { white-space: normal; }
  .conversation-page-hero__character { right: -2px; bottom: 0; width: clamp(84px, 43%, 108px); }
  .day-pillar-character { --day-pillar-character-size: 44px; gap: 5px; }
  .day-pillar-character__caption strong { min-height: 24px; padding-inline: 7px; font-size: var(--type-label); }
  .day-pillar-character--home { --day-pillar-character-size: 48px; }
  .day-pillar-character--fortune { --day-pillar-character-size: 48px; justify-self: start; }
  .day-pillar-character--report_catalog { --day-pillar-character-size: 42px; }
  .day-pillar-character--report_cover { --day-pillar-character-size: 44px; }
  .birth-chart-identity-strip { grid-template-columns: 56px minmax(0, 1fr); gap: 8px; margin: 9px 0 12px; }
  .birth-chart-identity-strip .day-pillar-character--home,
  .birth-chart-identity-strip .day-pillar-character--report_cover { --day-pillar-character-size: 52px; grid-template-columns: 52px; }
  .birth-chart-identity-strip .day-pillar-character--home .day-pillar-character__image,
  .birth-chart-identity-strip .day-pillar-character--report_cover .day-pillar-character__image { padding: 4px; border-radius: 12px; }
  .birth-chart-identity-strip .day-pillar-character--home .day-pillar-character__caption strong,
  .birth-chart-identity-strip .day-pillar-character--report_cover .day-pillar-character__caption strong { font-size: var(--type-caption); }
  .birth-chart-identity-strip .birth-chart-meta { min-height: 52px; gap: 4px; padding: 8px 10px; border-radius: 12px; font-size: var(--type-label); }
  .birth-chart-identity-strip .birth-chart-meta .birth-chart-meta__lead { font-size: var(--type-small); }
  .report-birth-chart .birth-chart-identity-strip {
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 10px;
    margin: 11px 0 16px;
  }
  .report-birth-chart .day-pillar-character--report_cover {
    --day-pillar-character-size: 56px;
    grid-template-columns: 1fr;
    gap: 5px;
  }
  .report-birth-chart .day-pillar-character--report_cover .day-pillar-character__image {
    padding: 0;
    border-radius: 0;
  }
  .home-birth-chart .day-pillar-character--report_cover {
    --day-pillar-character-size: 64px;
  }
  .home-birth-chart .day-pillar-character--report_cover .day-pillar-character__portrait,
  .daily-zodiac-main__identity > img {
    width: 64px;
    height: 64px;
    padding: 0;
    border-width: 6px;
  }
  .daily-zodiac-main__identity > img {
    width: 48px;
    height: 48px;
  }
  .report-birth-chart .day-pillar-character--report_cover .day-pillar-character__eyebrow { font-size: var(--type-caption); }
  .report-birth-chart .day-pillar-character--report_cover .day-pillar-character__caption strong { font-size: var(--type-label); }
  .report-birth-chart .birth-chart-meta {
    min-height: 68px;
    gap: 6px;
    padding: 5px 0 5px 12px;
    border-radius: 0;
  }
  .home-birth-chart .birth-chart-meta { border-left: 0; }
  .report-birth-chart .birth-chart-meta .birth-chart-meta__lead { font-size: var(--type-body-lg); }
  .report-birth-chart .birth-chart-meta__rows { gap: 4px; }
  .report-birth-chart .birth-chart-meta__row:first-child { font-size: var(--type-body-lg); font-weight: 600; }
  .home-birth-chart .birth-chart-meta__row:first-child { font-size: var(--type-body); }
  .report-birth-chart .birth-chart-meta__row:nth-child(2) { font-size: var(--type-body); font-weight: 600; }
  .home-birth-chart .birth-chart-identity-strip {
    --home-birth-portrait-column: 72px;
    --home-birth-identity-gap: 9px;
    --home-birth-identity-row-gap: 4px;
    --home-birth-meta-inset: 0px;
    min-height: 132px;
    grid-template-columns: var(--home-birth-portrait-column) minmax(0, 1fr);
    column-gap: var(--home-birth-identity-gap);
    row-gap: var(--home-birth-identity-row-gap);
  }
  .home-birth-chart .day-pillar-character--report_cover .day-pillar-character__caption {
    position: relative;
    height: calc(var(--type-ui-micro) * 1.3);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  .home-birth-chart .day-pillar-character--report_cover .day-pillar-character__caption strong {
    /* Keep the visible 8px label below mobile browsers' minimum font size. */
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    font-size: calc(var(--type-ui-micro) * 2);
    transform: scale(.5);
    transform-origin: top left;
  }
  .home-birth-chart .day-pillar-character--home { width: var(--home-birth-portrait-column); }
  .home-birth-chart .day-pillar-character--report_cover .day-pillar-character__portrait {
    width: 72px;
    height: 72px;
    min-height: 56px;
    padding: 4px 5px;
  }
  .home-birth-chart .birth-chart-id-meta { padding: 0; }
  .home-birth-chart .birth-chart-id-meta > div { grid-template-columns: 52px minmax(0, 1fr); gap: 8px; }
  .home-birth-chart .birth-chart-id-name { font-size: calc(var(--type-label) + 4px); }
  .birth-chart-identity-strip--home { grid-template-columns: 68px minmax(0, 1fr); gap: 0; margin: 14px 0 18px; }
  .birth-chart-identity-strip--home .day-pillar-character--home {
    --day-pillar-character-size: 60px;
    width: 76px;
    grid-template-columns: 60px;
    gap: 0;
    transform: translateX(2px);
  }
  .birth-chart-identity-strip--home .day-pillar-character--home .day-pillar-character__image { padding: 0; border-radius: 0; }
  .birth-chart-identity-strip--home .day-pillar-character--home .day-pillar-character__caption strong { min-height: 20px; padding: 2px 6px; font-size: var(--type-caption); }
  .birth-chart-identity-strip--home .birth-chart-meta { min-height: 66px; margin-left: -20px; gap: 4px; padding: 10px 8px 10px 34px; border-radius: 16px; font-size: var(--type-body-lg); }
  .birth-chart-identity-strip--home .birth-chart-meta .birth-chart-meta__lead { font-size: var(--type-body-lg); }
  .saju-pillar-grid { border-radius: 12px; }
  .saju-pillar__label { padding: 7px 2px; font-size: var(--type-label); }
  .saju-pillar-glyph { min-height: 64px; gap: 4px; padding: 7px 2px 6px; }
  .saju-pillar-glyph strong { font-size: var(--type-card-title); }
  .saju-pillar-glyph small { gap: 2px; font-size: var(--type-caption); }
  .saju-pillar-glyph small b::before { margin-right: 2px; }
  .saju-pillar__fallback { min-height: 128px; font-size: var(--type-label); }
  .saju-pillar-details { gap: 8px; margin-top: 16px; padding-top: 14px; }
  .saju-detail-card { border-radius: 10px; }
  .saju-detail-card > header { gap: 6px; padding: 9px 10px 7px; }
  .saju-detail-card > header > i, .saju-detail-card > header > .lucide { width: 22px; height: 22px; border-radius: 7px; }
  .saju-detail-card > header h3 { font-size: var(--type-body); }
  .saju-detail-grid > div { min-height: 52px; gap: 4px; padding: 7px 2px 8px; }
  .saju-detail-grid strong { font-size: var(--type-small); }
  .saju-interaction-list > div { grid-template-columns: 63px minmax(0, 1fr); min-height: 42px; }
  .saju-interaction-list dt { padding: 7px 8px; font-size: var(--type-caption); }
  .saju-interaction-list dd { padding: 6px 7px; }
  .saju-interaction-list li { gap: 4px; padding: 4px 6px; }
  .saju-interaction-list li strong { font-size: var(--type-caption); }
  .saju-interaction-list li small { font-size: var(--type-caption); }
  .saju-interaction-list li small::before { margin-right: 4px; }
  .saju-detail-card--sinsal .saju-detail-grid > div { min-height: 84px; }
  .saju-detail-card--sinsal li { padding: 3px; font-size: var(--type-caption); }
  .saju-detail-help { padding: 7px 8px 8px; font-size: var(--type-caption); }
  .report-birth-chart .saju-pillar-grid { gap: 4px; padding: 1px; }
  .report-birth-chart .saju-pillar,
  .report-birth-chart .saju-pillar__characters { gap: 3px; }
  .report-birth-chart .saju-pillar-glyph { height: 64px; }
  .fortune-narrative--overall { margin-top: 24px; }
  .fortune-overall-speech { padding: 16px 15px 33px; font-size: var(--type-body); }
  .fortune-overall-score-mascot { width: 144px;}
  .fortune-overall-score-mascot > strong { min-height: 33px; font-size: var(--type-card-title); }
  .narrative-section > h2 { font-size: var(--type-card-title); }
  .narrative-summary-frame {
    min-height: 48px;
    grid-template-columns: 22px minmax(0, 1fr) 22px;
    gap: 8px;
    padding: 12px 17px;
  }
  .narrative-summary { font-size: var(--type-body); line-height: 1.6; }
  .narrative-summary-sparkles { width: 22px; transform: scale(.8); transform-origin: center; }
  .narrative-body { font-size: var(--type-body); }
  .narrative-basis summary { min-height: 44px; padding: 0 12px; }
  .narrative-basis__content { padding: 13px; }
}

@media (min-resolution: 2dppx) and (max-width: 400px) {
  .narrative-section { padding-top:36px; overflow-x: hidden; }
}

/* Tamami grounded AI conversation */
.tamami-shell {
  --tamami-ink: #35224f;
  --tamami-muted: #746784;
  --tamami-purple: #6840b8;
  --tamami-purple-dark: #4e2c93;
  --tamami-lilac: #f2ebfb;
  --tamami-line: #e5d9f1;
  min-height: 100vh;
  color: var(--tamami-ink);
}
.tamami-main {
  width: min(100% - 32px, 760px);
  margin: 0 auto;
  padding: 28px 0 calc(126px + env(safe-area-inset-bottom));
}
.tamami-main .unified-page-hero { margin-bottom: 20px; }
.tamami-main .tamami-hero-art {
  right: 18px;
  bottom: -26px;
  width: min(32vw, 178px);
  filter: drop-shadow(0 14px 14px rgba(62, 34, 105, 0.16));
}
.tamami-value-card {
  --tamami-value-card-frame: url("/images/pixel_frame_input.svg?v=1");

  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  margin: 20px 0;
  padding: 18px 0 26px;
  border: 14px solid transparent !important;
  border-image-source: var(--tamami-value-card-frame) !important;
  border-image-slice: 14 fill !important;
  border-image-width: 1 !important;
  border-image-repeat: stretch !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-clip: border-box !important;
  background-origin: border-box !important;
  box-shadow: none;
  clip-path: none !important;
  image-rendering: pixelated;
}
.tamami-value-card__copy { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) 66px; align-items: center; gap: 8px; padding: 0 16px 12px; }
.tamami-value-card__mascot { display: block; width: 66px; height: auto; justify-self: end; image-rendering: pixelated; }
.tamami-value-card h2 { margin: 0; color: #5a43bc; font-size: var(--type-section-title); font-weight: 400; line-height: 1.45; word-break: keep-all; }
.tamami-value-card__description { grid-column: 1 / -1; margin: 0; color: #6b667a; font-size: var(--type-small); line-height: 1.8; word-break: keep-all; overflow-wrap: anywhere; }
.tamami-value-card__description span { display: block; }
.tamami-value-topics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tamami-value-topics li {
  position: relative;
  min-width: 0;
  color: #4c30af;
  font-size: var(--type-body-lg);
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
}
.tamami-value-topics img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.tamami-value-topics span { position: absolute; inset: auto 4px 10%; word-break: keep-all; }
.tamami-value-card__footer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  padding: 0 8px;
  border: 14px solid transparent;
  border-image: var(--tamami-value-card-frame) 14 fill / 1 / 0 stretch;
}
.tamami-value-card__footer p { display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 0; margin: 0; color: #5a43bc; font-size: var(--type-body); line-height: 1.5; word-break: keep-all; overflow-wrap: anywhere; }
.tamami-value-card__footer p + p { padding-left: 12px; margin-left: 12px; border-left: 2px dotted #cdbdf3; }
.tamami-value-card__footer img { flex: 0 0 30px; width: 30px; height: 32px; object-fit: contain; image-rendering: pixelated; }
.tamami-value-card__footer strong { color: #4c30af; font-weight: 700; }
.tamami-open-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  margin: 18px 0 26px;
  padding: 21px;
  border: 1px solid #d9c5ec;
  border-radius: 20px;
  background: #faf5fe;
}
.tamami-open-card__avatar {
  display: block;
  width: 44px;
  height: 44px;
  object-fit: contain;
  image-rendering: pixelated;
}
.tamami-open-card p { margin: 0 0 5px; color: var(--tamami-muted); font-size: var(--type-body); }
.tamami-open-card h2 { margin: 0 0 5px; font-size: var(--type-card-title); }
.tamami-primary-action {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 19px;
  border: 0;
  border-radius: 14px;
  background: #6840b8;
  box-shadow: 0 9px 20px rgba(93, 54, 157, 0.23);
  color: #fff;
  font-size: var(--type-body);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.tamami-primary-action:hover { color: #fff; transform: translateY(-1px); }
.tamami-primary-action:focus-visible,
.tamami-suggestion-groups button:focus-visible,
.tamami-followup-suggestions button:focus-visible,
.tamami-feedback-button:focus-visible,
.tamami-conversation-main button:focus-visible,
.tamami-conversation-main summary:focus-visible {
  outline: 3px solid #bda4e5;
  outline-offset: 3px;
}
.tamami-start-action,
.tamami-open-action,
.tamami-restart-action,
.tamami-profile-notice__action,
.tamami-pass-notice__action,
.tamami-submit {
  --tamami-action-frame: url("/images/pixel_frame_settings_primary.svg?v=1");

  box-sizing: border-box;
  width: 100%;
  min-height: 54px;
  padding: 0 12px;
  border: 14px solid transparent;
  border-image-source: var(--tamami-action-frame);
  border-image-slice: 14 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  background-clip: border-box;
  background-origin: border-box;
  box-shadow: none;
  clip-path: none;
  image-rendering: pixelated;
  transition: filter .15s ease, transform .15s ease;
}
.tamami-start-action { margin: 4px 0 28px; }
.tamami-open-action { width: auto; margin-top: 4px; }
.tamami-open-card > .tamami-open-action { grid-column: 2; }
.tamami-open-action:hover { filter: brightness(1.03); transform: none; }
.tamami-open-action:active { filter: brightness(.96); transform: translateY(1px); }
.tamami-start-action:hover { filter: brightness(1.03); transform: none; }
.tamami-start-action:active { filter: brightness(.96); transform: translateY(1px); }
.tamami-restart-action { height: 54px; line-height: 1.4; text-align: center; white-space: nowrap; }
.tamami-restart-action:hover { filter: brightness(1.03); transform: none; }
.tamami-restart-action:active { filter: brightness(.96); transform: translateY(1px); }
.tamami-profile-notice,
.tamami-pass-notice { font-size: var(--type-small); }
.tamami-profile-notice__copy,
.tamami-pass-notice__copy { display: flex; align-items: center; gap: 10px; min-width: 0; color: #6b667a; line-height: 1.7; word-break: keep-all; overflow-wrap: anywhere; }
.tamami-profile-notice__copy img { flex: 0 0 48px; width: 48px; height: auto; image-rendering: pixelated; }
.tamami-pass-notice__copy img { flex: 0 0 28px; width: 28px; height: auto; image-rendering: pixelated; }
.tamami-profile-notice .tamami-profile-notice__action,
.tamami-pass-notice .tamami-pass-notice__action { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: auto; color: #fff; font-size: var(--type-small); line-height: 1.4; text-align: center; }
.tamami-profile-notice__action:hover,
.tamami-pass-notice__action:hover { filter: brightness(1.03); }
.tamami-profile-notice__action:active,
.tamami-pass-notice__action:active { filter: brightness(.96); transform: translateY(1px); }
.tamami-profile-notice__action:focus-visible,
.tamami-pass-notice__action:focus-visible { outline: 3px solid #5a43bc; outline-offset: 3px; }
.tamami-archive { margin-top: 32px; }
.tamami-archive > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 14px;
}
.tamami-archive > header h2 { margin: 2px 0 0; font-size: var(--type-section-title-lg); }
.tamami-archive > header > p { margin: 0; color: var(--tamami-muted); font-size: var(--type-body); }
.tamami-empty-state {
  display: grid;
  justify-items: center;
  padding: 40px 22px;
  border: 1px dashed #d8c8e7;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.72);
  text-align: center;
}
.tamami-empty-state__mascot { display: block; width: 64px; height: auto; margin-bottom: 16px; image-rendering: pixelated; }
.tamami-empty-state strong { font-size: var(--type-subtitle); }
.tamami-empty-state p { max-width: 420px; margin: 8px 0 0; color: var(--tamami-muted); font-size: var(--type-body); line-height: 1.7; }
.tamami-archive-list { display: grid; gap: 8px; }
.tamami-archive-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--tamami-line);
  border-radius: 17px;
  background: #fff;
  color: #6b667a;
  text-decoration: none;
}
.tamami-archive-card:hover { border-color: #b5a1ec; }
.tamami-archive-card:focus-visible { outline: 3px solid #5a43bc; outline-offset: 3px; }
.tamami-archive-card__header { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto 18px; align-items: center; gap: 12px; }
.tamami-archive-card__icon { display: block; width: 32px; height: 32px; object-fit: contain; image-rendering: pixelated; }
.tamami-archive-card__heading { display: grid; min-width: 0; gap: 2px; }
.tamami-archive-card__heading time { color: #7762bc; font-size: var(--type-label); line-height: 1.5; }
.tamami-archive-card__heading strong { color: #5a43bc; font-size: var(--type-body); font-weight: 600; line-height: 1.5; word-break: keep-all; }
.tamami-archive-card__header > .lucide { width: 18px; color: #7762bc; }
.tamami-archive-card__progress { display: grid; gap: 2px; color: #5a43bc; font-size: var(--type-label); line-height: 1.5; text-align: right; white-space: nowrap; }
.tamami-archive-card__progress > span + span { color: #6b667a; }
@media (max-width: 639px) {
  .tamami-archive-card__header { grid-template-columns: 24px minmax(0, 1fr) auto 14px; gap: 8px; }
  .tamami-archive-card__icon { width: 24px; height: 24px; }
  .tamami-archive-card__header > .lucide { width: 14px; }
}

.tamami-start-main { padding-top: 20px; }
.tamami-back-nav { margin-bottom: 22px; }
.tamami-back-nav a { color: #6f5b84; font-size: var(--type-body); font-weight: 600; text-decoration: none; }
.tamami-start-heading { margin-bottom: 23px; }
.tamami-start-heading h1 { margin: 6px 0 8px; font-size: clamp(var(--type-page-title), 6.0vw, var(--type-display-sm)); line-height: 1.25; letter-spacing: -0.04em; }
.tamami-start-heading > p:last-child { margin: 0; color: var(--tamami-muted); line-height: 1.7; }
.tamami-session-note {
  --tamami-session-note-frame: url("/images/pixel_frame_input.svg?v=1");

  position: relative;
  box-sizing: border-box;
  display: grid;
  min-height: 176px;
  grid-template-columns: minmax(0, 1fr) 150px;
  align-items: stretch;
  gap: 16px;
  margin: 18px 0 22px;
  padding: 7px 8px 4px 12px;
  overflow: hidden;
  border: 14px solid transparent;
  border-image-source: var(--tamami-session-note-frame);
  border-image-slice: 14 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  background-clip: border-box;
  background-origin: border-box;
  box-shadow: none;
  clip-path: none;
  image-rendering: pixelated;
}
.tamami-session-note-copy { position: relative; z-index: 2; display: grid; min-width: 0; align-content: center; }
.tamami-session-note p {
  display: grid;
  min-width: 0;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 14px 0;
}
.tamami-session-note p + p { border-top: 1px dashed #dfd1fa; }
.tamami-session-note .lucide { width: 30px; height: 30px; justify-self: center; color: #5a43bc; stroke-width: 1.8; }
.tamami-session-note-icon { display: block; width: 36px; height: 36px; object-fit: contain; image-rendering: pixelated; }
.tamami-session-note-text { display: grid; min-width: 0; gap: 3px; }
.tamami-session-note strong { color: #5a43bc; font-size: var(--type-body); font-weight: 600; line-height: 1.5; word-break: keep-all; overflow-wrap: anywhere; }
.tamami-session-note-text > span { color: #8f88a6; font-size: var(--type-label); line-height: 1.55; word-break: keep-all; overflow-wrap: anywhere; }
.tamami-session-note-mascot { position: relative; z-index: 1; align-self: end; height: 140px; pointer-events: none; }
.tamami-session-note-mascot > img {
  position: absolute;
  right: -8px;
  bottom: -38px;
  display: block;
  width: 158px;
  height: auto;
  image-rendering: pixelated;
}

.tamami-start-form { display: grid; min-width: 0; gap: 22px; }
.tamami-choice-fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.tamami-choice-fieldset legend,
.tamami-context-field > label,
.tamami-question-field > label {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 11px;
  color: var(--tamami-ink);
  font-size: var(--type-subtitle);
  font-weight: 600;
}
.tamami-choice-fieldset legend > span,
.tamami-context-field > label > span,
.tamami-question-field > label > span {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 9px;
  background: var(--tamami-purple);
  color: #fff;
  font-size: var(--type-small);
}
.tamami-context-field label em { color: #a08eae; font-size: var(--type-label); font-style: normal; }
.tamami-topic-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.tamami-style-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.tamami-choice-card { position: relative; min-width: 0; cursor: pointer; }
.tamami-choice-card input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.tamami-choice-card input:focus-visible { outline: none; }
.tamami-choice-card > span {
  display: grid;
  min-height: 76px;
  align-content: center;
  gap: 5px;
  padding: 12px 10px;
  border: 1px solid var(--tamami-line);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.94);
  text-align: center;
  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}
.tamami-choice-card input:checked + span {
  border-color: #7b51c7;
  background: #f2eafd;
  box-shadow: none;
}
.tamami-choice-card input:focus-visible + span { outline: none; }
.tamami-choice-card input:focus-visible + span strong {
  text-decoration: underline;
  text-decoration-color: #5a43bc;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.tamami-choice-card strong { font-size: var(--type-body); }
.tamami-choice-card small { color: var(--tamami-muted); font-size: var(--type-caption); line-height: 1.45; }
.tamami-topic-card > span {
  box-sizing: border-box;
  height: 100%;
  min-height: 0;
  align-content: start;
  gap: 4px;
  padding: 5px 5px 4px;
  overflow: hidden;
}
.tamami-topic-card__art {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
}
.tamami-topic-card__visual { position: relative; }
.tamami-topic-card__visual strong {
  position: absolute;
  z-index: 1;
  right: 10px;
  bottom: 7px;
  left: 10px;
}
.tamami-topic-card small { padding-inline: 5px; word-break: keep-all; overflow-wrap: anywhere; }
.tamami-topic-card input:checked + span strong::after { margin-left: 5px; color: #5a43bc; content: "✓"; }
.tamami-style-card > span {
  box-sizing: border-box;
  height: 100%;
  min-height: 136px;
  grid-template-columns: 86px minmax(0, 1fr) 24px;
  align-content: center;
  align-items: center;
  gap: 14px;
  padding: 18px 16px;
  border-color: #dfd1fa;
  border-radius: 16px;
  background: #fff;
  text-align: left;
}
.tamami-style-card[data-answer-style="BALANCED"] > span { border-color: #f4b5da; background: #fcebfa; }
.tamami-style-card[data-answer-style="PRACTICAL"] > span,
.tamami-style-card[data-answer-style="DIRECT"] > span { background: #f8f3fe; }
.tamami-style-card input:checked + span {
  border-color: #e58bcb;
  background: #fcebfa;
  box-shadow: none;
}
.tamami-style-card__art {
  display: block;
  width: 86px;
  height: 86px;
  object-fit: contain;
  image-rendering: pixelated;
}
/* Compensate for the wider transparent padding in the heart and cloud assets. */
.tamami-style-card[data-answer-style="BALANCED"] .tamami-style-card__art,
.tamami-style-card[data-answer-style="ENCOURAGING"] .tamami-style-card__art {
  transform: scale(1.6);
}
.tamami-style-card__copy { display: grid; min-width: 0; gap: 7px; }
.tamami-style-card__copy strong {
  color: #4c30af;
  font-size: var(--type-body-lg);
  font-weight: 600;
  line-height: 1.4;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.tamami-style-card__copy small {
  color: #6b667a;
  font-size: var(--type-label);
  line-height: 1.55;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.tamami-style-card__indicator {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  align-self: start;
  border: 2px solid #a18dde;
  border-radius: 50%;
  background: #fff;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}
.tamami-style-card input:checked + span .tamami-style-card__indicator {
  border-color: #e58bcb;
  background: #e58bcb;
}
.tamami-style-card input:checked + span .tamami-style-card__indicator::before { content: "✓"; }
.tamami-context-field,
.tamami-question-field {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  padding: 19px;
  border: 1px solid var(--tamami-line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
}
.tamami-message-field { overflow: hidden; }
.tamami-context-field > p,
.tamami-question-field > p { margin: -3px 0 10px; color: var(--tamami-muted); font-size: var(--type-small); line-height: 1.6; }
.tamami-question-field > .tamami-question-privacy-hint { margin: 9px 0 0; }
.tamami-context-field textarea,
.tamami-question-field textarea,
.tamami-composer-wrap textarea {
  display: block;
  box-sizing: border-box;
  width: 100%;
  resize: vertical;
  border: 1px solid #d9cae7;
  border-radius: 13px;
  background: #fcfbfd;
  color: var(--tamami-ink);
  font: inherit;
  font-size: var(--type-body-lg);
  line-height: 1.7;
}
.tamami-context-field textarea,
.tamami-question-field textarea { padding: 13px 14px; }
.tamami-message-field textarea { min-height: 174px; }
.tamami-context-field textarea:focus,
.tamami-question-field textarea:focus,
.tamami-composer-wrap textarea:focus {
  border-color: #5a43bc;
  outline: none;
  box-shadow: none;
}
.tamami-suggestion-groups { width: 100%; min-width: 0; max-width: 100%; margin-top: 16px; padding-top: 15px; overflow: hidden; border-top: 1px solid #f0e9fd; }
.tamami-suggestion-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.tamami-suggestion-heading { display: flex; min-width: 0; align-items: center; gap: 7px; color: #5a43bc; }
.tamami-suggestion-heading img { flex: 0 0 30px; width: 30px; height: 30px; object-fit: contain; image-rendering: pixelated; }
.tamami-suggestion-heading strong { font-size: var(--type-body); line-height: 1.4; word-break: keep-all; }
.tamami-suggestion-refresh {
  appearance: none;
  display: inline-flex;
  min-height: 36px;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  padding: 5px 3px;
  border: 0;
  background: transparent;
  color: #5a43bc;
  font: inherit;
  font-size: var(--type-label);
  font-weight: 600;
  cursor: pointer;
}
.tamami-suggestion-refresh .lucide { width: 15px; height: 15px; }
.tamami-suggestion-list {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  gap: 7px;
  margin: 0 -3px;
  padding: 0 3px 7px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
  scrollbar-color: #cdbdf3 transparent;
  scrollbar-width: thin;
}
.tamami-suggestion-list[hidden] { display: none; }
.tamami-followup-suggestions { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
.tamami-suggestion-groups button,
.tamami-followup-suggestions button {
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid #d9c9e8;
  border-radius: 999px;
  background: #f8f3fc;
  color: #65479a;
  font-size: var(--type-label);
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
}
.tamami-suggestion-list button { flex: 0 0 auto; max-width: min(82vw, 320px); white-space: nowrap; scroll-snap-align: start; }
.tamami-suggestion-groups .tamami-suggestion-refresh { padding: 5px 3px; border: 0; border-radius: 0; background: transparent; }
.tamami-disclosure {
  padding: 18px;
  border: 1px solid #d8cbe5;
  border-radius: 17px;
  background: #f8f4fb;
}
.tamami-disclosure > strong { display: flex; align-items: center; gap: 7px; font-size: var(--type-body); }
.tamami-disclosure .lucide { width: 18px; color: var(--tamami-purple); }
.tamami-disclosure p { margin: 8px 0 0; color: #6f617d; font-size: var(--type-small); line-height: 1.65; }
.tamami-disclosure > a { display: inline-block; margin: 8px 0; color: #5d3c9c; font-size: var(--type-small); font-weight: 600; }
.tamami-disclosure label,
.tamami-credit-confirm {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 11px;
  color: #544661;
  font-size: var(--type-small);
  line-height: 1.6;
}
.tamami-disclosure input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--tamami-purple); }
.tamami-processing-dialog-trigger {
  --tamami-processing-trigger-frame: url("/images/pixel_badge_settings_active.svg?v=4");

  appearance: none;
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  justify-self: start;
  gap: 6px;
  padding: 2px 7px;
  border: 4px solid transparent;
  border-image-source: var(--tamami-processing-trigger-frame);
  border-image-slice: 4 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  clip-path: none;
  color: #6842b5;
  font: inherit;
  font-size: var(--type-label);
  font-weight: 600;
  cursor: pointer;
  image-rendering: pixelated;
}
.tamami-processing-dialog-trigger .lucide { width: 15px; height: 15px; }
.tamami-processing-dialog-trigger:hover { filter: brightness(1.03); }
.tamami-processing-dialog-trigger:active { filter: brightness(.96); transform: translateY(1px); }
.tamami-processing-dialog-trigger:focus-visible,
.tamami-processing-dialog-close:focus-visible,
.tamami-processing-dialog-confirm:focus-visible { outline: 3px solid var(--ui-focus, #5a43bc); outline-offset: 2px; }

.tamami-processing-dialog {
  --tamami-processing-dialog-frame: url("/images/pixel_frame_home_service_purple.svg?v=2");

  box-sizing: border-box;
  width: min(440px, calc(100% - 32px));
  max-width: 440px;
  max-height: calc(100svh - 24px);
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 14px solid transparent;
  border-image-source: var(--tamami-processing-dialog-frame);
  border-image-slice: 14 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  background-clip: border-box;
  background-origin: border-box;
  box-shadow: none;
  clip-path: none;
  color: #655176;
  image-rendering: pixelated;
  overscroll-behavior: contain;
}
.tamami-processing-dialog::backdrop { background: rgb(45 28 68 / 58%); backdrop-filter: blur(3px); }
.tamami-processing-dialog[open] { animation: tamami-dialog-enter 160ms ease-out both; }
.tamami-processing-dialog-shell { position: relative; display: grid; justify-items: center; padding: 27px 22px 20px; text-align: center; }
.tamami-processing-dialog-close {
  appearance: none;
  position: absolute;
  top: 2px;
  right: 2px;
  display: grid;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #7254a5;
  cursor: pointer;
  place-items: center;
}
.tamami-processing-dialog-close .lucide { width: 18px; height: 18px; }
.tamami-processing-dialog-icon { width: 28px; height: 28px; color: var(--tamami-purple); }
.tamami-processing-dialog-shell > p:first-of-type { margin: 8px 0 0; color: #9267d4; font-size: var(--type-label); font-weight: 600; }
.tamami-processing-dialog h2 { margin: 4px 0 0; color: #4f2aa5; font-size: var(--type-section-title-lg); line-height: 1.4; word-break: keep-all; text-wrap: balance; }
.tamami-processing-dialog #tamami-processing-dialog-description { margin: 12px 0 0; color: #725f85; font-size: var(--type-body); line-height: 1.75; text-align: left; word-break: keep-all; }
.tamami-processing-dialog a { margin-top: 13px; color: #6842b5; font-size: var(--type-small); font-weight: 600; }
.tamami-processing-dialog-confirm {
  --tamami-processing-action-frame: url("/images/pixel_frame_settings_primary.svg?v=1");

  appearance: none;
  box-sizing: border-box;
  width: 100%;
  min-height: 54px;
  margin-top: 18px;
  padding: 0 12px;
  border: 14px solid transparent;
  border-image-source: var(--tamami-processing-action-frame);
  border-image-slice: 14 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  clip-path: none;
  color: #fff;
  font: inherit;
  font-size: var(--type-body);
  font-weight: 600;
  cursor: pointer;
  image-rendering: pixelated;
}
.tamami-processing-dialog-confirm:hover { filter: brightness(1.03); }
.tamami-processing-dialog-confirm:active { filter: brightness(.96); transform: translateY(1px); }
.tamami-credit-confirm input {
  appearance: none;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin-top: 1px;
  border: 0;
  border-radius: 0;
  background: transparent url("/images/pixel_checkbox_birth_profile.svg?v=4") center / 18px 18px no-repeat;
  box-shadow: none;
  clip-path: none;
  cursor: pointer;
  image-rendering: pixelated;
  transform: none;
}
.tamami-credit-confirm input:checked {
  background-image: url("/images/pixel_checkbox_birth_profile_checked.svg?v=4");
}
.tamami-credit-confirm input:focus-visible {
  outline: 3px solid rgb(90 67 188 / 82%);
  outline-offset: 2px;
}
.tamami-credit-confirm { margin: -6px 2px 0; }
.tamami-submit {
  display: grid;
  grid-template-columns: 30px auto 30px;
  font-size: var(--type-subtitle);
}
.tamami-submit::after { width: 30px; height: 30px; content: ""; }
.tamami-submit-mascot {
  display: block;
  width: 30px;
  height: 30px;
  object-fit: contain;
  image-rendering: pixelated;
}
.tamami-submit:hover { color: #fff; filter: brightness(1.03); transform: none; }
.tamami-submit:active { filter: brightness(.96); transform: translateY(1px); }
.tamami-submit:disabled { cursor: not-allowed; filter: grayscale(0.45); opacity: 0.55; transform: none; }
.tamami-submit-status { margin: -10px 0 0; color: #6e5e7f; font-size: var(--type-body); text-align: center; }
.tamami-safety-panel {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 12px;
  margin: 16px 0;
  padding: 18px;
  border: 1px solid #e0b88f;
  border-radius: 18px;
  background: #fff8ef;
}
.tamami-safety-panel > .lucide { color: #a46022; }
.tamami-safety-panel h2 { margin: 0 0 6px; font-size: var(--type-subtitle); }
.tamami-safety-panel p { margin: 0; color: #6d5643; font-size: var(--type-body); line-height: 1.75; white-space: normal; }
.tamami-safety-panel small { display: block; margin-top: 8px; color: #97765d; font-size: var(--type-label); }
.tamami-safety-crisis { border-color: #e5aaa8; background: #fff3f2; }
.tamami-safety-crisis > .lucide { color: #aa413d; }

.tamami-conversation-shell { background: #f7f4fa; }
.tamami-conversation-main {
  width: min(100%, 720px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 0 20px 24px;
}
.tamami-conversation-header {
  position: sticky;
  z-index: 5;
  top: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 48px;
  gap: 11px;
  align-items: center;
  min-height: 88px;
  margin: 0 -20px 22px;
  padding: env(safe-area-inset-top) 20px 0;
  border-bottom: 1px solid rgba(216, 204, 227, 0.9);
  background: rgba(250, 248, 252, 0.94);
  backdrop-filter: blur(12px);
}
.tamami-circle-back {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid var(--tamami-line);
  border-radius: 50%;
  background: #fff;
  color: var(--tamami-ink);
}
.tamami-circle-back .lucide { width: 18px; }
.tamami-conversation-header > div { min-width: 0; text-align: center; }
.tamami-conversation-header p { overflow: hidden; margin: 0; color: #8c7c9b; font-size: var(--type-caption); text-overflow: ellipsis; white-space: nowrap; }
.tamami-conversation-header h1 { margin: 2px 0; font-size: var(--type-subtitle); }
.tamami-conversation-header small { color: #715f83; font-size: var(--type-caption); }
.tamami-header-cat { overflow: hidden; width: 46px; height: 46px; border-radius: 15px; background: #efe4fa; }
.tamami-header-cat img { width: 100%; height: 100%; object-fit: contain; }
.tamami-precision-note {
  margin: 0 0 18px;
  padding: 11px 13px;
  border-radius: 12px;
  background: #eee8f5;
  color: #6c5a7e;
  font-size: var(--type-label);
  line-height: 1.6;
}
.tamami-thread { display: grid; gap: 30px; }
.tamami-turn { display: grid; gap: 15px; scroll-margin-top: 102px; }
.tamami-user-row { display: grid; justify-items: end; }
.tamami-user-bubble {
  max-width: min(82%, 480px);
  padding: 12px 15px;
  border-radius: 17px 17px 4px 17px;
  background: var(--tamami-purple);
  color: #fff;
  font-size: var(--type-body);
  line-height: 1.7;
  word-break: break-word;
}
.tamami-user-bubble p { margin: 0; }
.tamami-user-row > time,
.tamami-answer-column > time { margin-top: 5px; color: #a496ae; font-size: var(--type-caption); }
.tamami-answer-row { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 9px; align-items: start; }
.tamami-avatar { overflow: hidden; width: 38px; height: 38px; border-radius: 13px; background: #e9dcf7; }
.tamami-avatar img { width: 100%; height: 100%; object-fit: contain; }
.tamami-answer-column { min-width: 0; }
.tamami-ai-label { display: flex; align-items: center; gap: 5px; margin: 0 0 5px; color: #8b789d; font-size: var(--type-caption); font-weight: 600; }
.tamami-ai-label .lucide { width: 12px; height: 12px; }
.tamami-answer-bubble {
  padding: 19px;
  border: 1px solid var(--tamami-line);
  border-radius: 5px 20px 20px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(60, 36, 94, 0.06);
}
.tamami-answer-bubble > h2 { margin: 0 0 12px; color: #4f2f84; font-size: var(--type-card-title); line-height: 1.45; letter-spacing: -0.02em; }
.tamami-answer-bubble > div { color: #51475a; font-size: var(--type-body); line-height: 1.9; word-break: keep-all; }
.tamami-answer-bubble > div p { margin: 0; }
.tamami-answer-bubble > div p + p { margin-top: 10px; }
.tamami-evidence-list,
.tamami-actions,
.tamami-session-summary { margin-top: 18px; padding-top: 16px; border-top: 1px solid #eee6f4; }
.tamami-actions > h3,
.tamami-session-summary > h3 { margin: 0 0 10px; font-size: var(--type-body); }
.tamami-evidence-list > summary {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: -10px 0;
  padding: 10px 2px;
  color: #5a43bc;
  font-size: var(--type-body);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.tamami-evidence-list > summary::-webkit-details-marker { display: none; }
.tamami-evidence-list > summary .lucide {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: #7762bc;
  transition: transform 160ms ease;
}
.tamami-evidence-list[open] > summary .lucide { transform: rotate(180deg); }
.tamami-evidence-content { display: grid; gap: 8px; margin-top: 16px; }
.tamami-evidence-list article { padding: 11px 12px; border-radius: 12px; background: #f7f2fb; }
.tamami-evidence-list strong { color: #684b94; font-size: var(--type-small); }
.tamami-evidence-list p { margin: 4px 0 0; color: #5f526c; font-size: var(--type-small); line-height: 1.65; }
.tamami-actions ol { display: grid; gap: 8px; margin: 0; padding: 0; counter-reset: tamami-action; list-style: none; }
.tamami-actions li { display: grid; grid-template-columns: 23px minmax(0, 1fr); gap: 8px; color: #55475f; font-size: var(--type-small); line-height: 1.65; counter-increment: tamami-action; }
.tamami-actions li::before { display: grid; width: 23px; height: 23px; place-items: center; border-radius: 8px; background: #e9ddf7; color: #603e98; content: counter(tamami-action); font-size: var(--type-caption); font-weight: 600; }
.tamami-session-summary { padding: 16px; border: 0; border-radius: 14px; background: #f7ecf4; }
.tamami-session-summary .date-label { margin: 0 0 3px; font-size: var(--type-caption); }
.tamami-session-summary > p:not(.date-label) { margin: 0; color: #5b4b67; font-size: var(--type-small); line-height: 1.7; }
.tamami-session-summary ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.tamami-session-summary li { padding: 5px 8px; border-radius: 999px; background: #fff; color: #674a8f; font-size: var(--type-caption); font-weight: 600; }
.tamami-feedback {
  display: block;
  margin-top: 10px;
}
.tamami-feedback > span { display: inline-block; margin-right: 3px; vertical-align: middle; color: #91829d; font-size: var(--type-caption); }
.tamami-feedback form { margin: 0; }
.tamami-feedback > form { display: inline-block; margin-right: 2px; vertical-align: middle; }
.tamami-feedback-button {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border: 1px solid #dfd4e8;
  border-radius: 999px;
  background: #fff;
  color: #746580;
  font-size: var(--type-caption);
  cursor: pointer;
}
.tamami-feedback-button[aria-pressed="true"],
.tamami-dislike-detail > summary[aria-pressed="true"],
.tamami-dislike-detail[open] > summary { border-color: #8a68c3; background: #f0e8f9; color: #5f3b96; }
.tamami-feedback-button .lucide { width: 13px; height: 13px; }
/* Keep the voting buttons inline while the expanded form reserves space below. */
.tamami-dislike-detail { display: inline; }
.tamami-dislike-detail > summary { vertical-align: middle; list-style: none; }
.tamami-dislike-detail > summary::-webkit-details-marker { display: none; }
.tamami-dislike-detail form {
  display: grid;
  box-sizing: border-box;
  width: min(300px, 100%);
  gap: 9px;
  margin-top: 6px;
  padding: 13px;
  border: 1px solid var(--tamami-line);
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(53, 34, 79, 0.16);
}
.tamami-dislike-detail label { display: grid; min-width: 0; gap: 6px; color: #6e5d7d; font-size: var(--type-caption); }
.tamami-dislike-detail select { width: 100%; min-width: 0; max-width: 100%; padding: 8px; border: 1px solid #ddd1e7; border-radius: 8px; background: #fff; font: inherit; }
.tamami-dislike-actions { display: flex; gap: 6px; }
.tamami-dislike-actions button { flex: 1; padding: 8px; border: 0; border-radius: 8px; background: var(--tamami-purple); color: #fff; font: inherit; font-weight: 600; }
.tamami-dislike-actions .tamami-feedback-clear { border: 1px solid #d7c8e3; background: #fff; color: #715889; }
.tamami-report-response { margin-top: 9px; color: #8b7d97; font-size: var(--type-caption); }
.tamami-report-response > summary { width: max-content; cursor: pointer; text-decoration: underline; }
.tamami-report-response p { width: 100%; max-width: none; margin: 8px 0; line-height: 1.6; }
.tamami-report-response form { display: grid; box-sizing: border-box; width: 100%; max-width: none; gap: 8px; padding: 10px; border-radius: 10px; background: #eee8f3; }
.tamami-report-response label { display: flex; gap: 7px; line-height: 1.55; }
.tamami-report-response input[type="submit"] { justify-self: start; padding: 7px 10px; border: 0; border-radius: 8px; background: #635371; color: #fff; font-size: var(--type-caption); font-weight: 600; }
.tamami-generation-turn { scroll-margin-top: 90px; }
.tamami-generation-panel {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
  margin: 12px 0 28px 46px;
  padding: 18px;
  border: 1px solid #ded1e9;
  border-radius: 18px;
  background: #f7f1fc;
  box-shadow: 0 12px 30px rgba(56, 34, 87, .11);
}
.tamami-generation-notice { margin-block: 20px; }
.tamami-generation-notice .tamami-answer-bubble,
.tamami-generation-panel[data-initial-status="FAILED"] {
  border-color: #dfd1fa;
  background: #fff;
  box-shadow: none;
}
.tamami-generation-panel[data-initial-status="FAILED"] { align-items: start; }
.tamami-generation-notice .tamami-answer-bubble > h2,
.tamami-generation-panel[data-initial-status="FAILED"] .tamami-generation-copy > strong { color: #5a43bc; }
.tamami-generation-notice .tamami-answer-bubble > div,
.tamami-generation-panel[data-initial-status="FAILED"] .tamami-generation-copy > small {
  color: #6b667a;
  font-size: var(--type-body);
  line-height: 1.75;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.tamami-generation-panel[data-initial-status="FAILED"] .tamami-generation-retry { min-height: 44px; }
.tamami-generation-copy { display: grid; min-width: 0; gap: 5px; }
.tamami-generation-copy > p {
  margin: 0;
  color: #8b70a4;
  font-size: var(--type-caption);
  font-weight: 600;
  letter-spacing: .06em;
}
.tamami-generation-copy > strong { color: var(--tamami-ink); font-size: var(--type-body); line-height: 1.45; }
.tamami-generation-copy > small { color: #766683; font-size: var(--type-label); line-height: 1.55; }
.tamami-generation-copy .tamami-loading-dots { margin-top: 2px; }
.tamami-generation-panel [hidden] { display: none; }
.tamami-generation-retry {
  justify-self: start;
  margin-top: 6px;
  padding: 9px 12px;
  border: 0;
  border-radius: 10px;
  background: var(--tamami-purple);
  color: #fff;
  font: inherit;
  font-size: var(--type-label);
  font-weight: 600;
  cursor: pointer;
}
.tamami-generation-revise { justify-self: stretch; margin-top: 5px; }
.tamami-generation-revise > summary {
  width: max-content;
  min-height: 44px;
  padding: 10px 2px;
  color: #5a43bc;
  font-size: var(--type-label);
  font-weight: 600;
  cursor: pointer;
}
.tamami-generation-revise > form {
  display: grid;
  gap: 8px;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid #f0e9fd;
}
.tamami-generation-revise label {
  color: #5a43bc;
  font-size: var(--type-label);
  font-weight: 600;
}
.tamami-generation-revise textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 96px;
  resize: vertical;
  padding: 12px;
  border: 1px solid #dfd1fa;
  border-radius: 12px;
  background: #fff;
  color: #6b667a;
  font: inherit;
  font-size: var(--type-body);
  line-height: 1.65;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.tamami-generation-revise textarea:focus-visible {
  border-color: #5a43bc;
  outline: 3px solid rgba(90, 67, 188, .2);
  outline-offset: 2px;
}
.tamami-generation-revise form > small {
  color: #8f88a6;
  font-size: var(--type-caption);
}
.tamami-generation-revise input[type="submit"] {
  justify-self: start;
  min-height: 44px;
  padding: 9px 12px;
  border: 2px solid #5632ad;
  border-radius: 0;
  background: #7951c7;
  box-shadow: 4px 4px 0 #bba3df;
  color: #fff;
  font: inherit;
  font-size: var(--type-label);
  font-weight: 600;
  cursor: pointer;
}
.tamami-composer-wrap {
  position: sticky;
  z-index: 4;
  bottom: calc(72px + env(safe-area-inset-bottom));
  margin: 28px -10px 14px;
  border: 1px solid #ded1e9;
  border-radius: 19px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 15px 40px rgba(56, 34, 87, 0.17);
  backdrop-filter: blur(12px);
}
.tamami-composer-toggle,
.tamami-composer-content {
  transition: filter .18s ease, opacity .18s ease;
}
.tamami-composer-wrap[data-loading="true"] > .tamami-composer-toggle,
.tamami-composer-wrap[data-loading="true"] > .tamami-composer-content {
  filter: blur(1.5px);
  opacity: .24;
}
.tamami-composer-toggle {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-sizing: border-box;
  padding: 12px 14px;
  border-radius: inherit;
  cursor: pointer;
  list-style: none;
}
.tamami-composer-toggle::-webkit-details-marker { display: none; }
.tamami-composer-toggle::marker { content: ""; }
.tamami-composer-toggle > span { font-size: var(--type-body); font-weight: 600; }
.tamami-composer-toggle strong { color: var(--tamami-purple); }
.tamami-composer-toggle > .lucide {
  flex: 0 0 auto;
  width: 18px;
  color: #806b96;
  transition: transform .18s ease;
}
.tamami-composer-wrap[open] > .tamami-composer-toggle > .lucide { transform: rotate(180deg); }
.tamami-composer-wrap[open] > .tamami-composer-toggle { padding-bottom: 9px; }
.tamami-composer-content { padding: 0 14px 14px; }
.tamami-composer-content > p { margin: 0 0 9px; color: #8a7b97; font-size: var(--type-caption); }
.tamami-composer-wrap form { position: relative; }
.tamami-composer-wrap textarea { min-height: 64px; padding: 10px 48px 10px 12px; font-size: var(--type-body); }
.tamami-composer-wrap form > button {
  position: absolute;
  right: 9px;
  bottom: 9px;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 0;
  border-radius: 11px;
  background: var(--tamami-purple);
  color: #fff;
  cursor: pointer;
}
.tamami-composer-wrap form > button .lucide { width: 17px; height: 17px; }
.tamami-composer-wrap form > p { margin: 8px 0 0; color: #6e5c80; font-size: var(--type-caption); }
.tamami-composer-loading {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 13px;
  align-content: center;
  justify-content: center;
  padding: 18px;
  border-radius: inherit;
  background: rgba(249, 247, 252, .84);
  backdrop-filter: blur(3px);
}
.tamami-composer-loading[hidden] { display: none; }
.tamami-loading-avatar {
  position: relative;
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  border-radius: 16px;
  background: #eee3f8;
}
.tamami-loading-avatar::after {
  position: absolute;
  inset: -4px;
  border: 2px solid rgba(106, 65, 169, .18);
  border-top-color: var(--tamami-purple);
  border-radius: 19px;
  animation: tamami-loading-spin .9s linear infinite;
  content: "";
}
.tamami-loading-avatar img { width: 44px; height: 44px; object-fit: contain; }
.tamami-loading-copy { display: grid; min-width: 0; align-content: center; }
.tamami-loading-copy strong { color: #4f3478; font-size: var(--type-body); line-height: 1.4; }
.tamami-loading-copy small { margin-top: 3px; color: #796889; font-size: var(--type-caption); line-height: 1.55; }
.tamami-loading-dots { display: flex; gap: 4px; margin-top: 8px; }
.tamami-loading-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--tamami-purple);
  animation: tamami-loading-dot 1.15s ease-in-out infinite;
}
.tamami-loading-dots i:nth-child(2) { animation-delay: .16s; }
.tamami-loading-dots i:nth-child(3) { animation-delay: .32s; }
@keyframes tamami-loading-spin { to { transform: rotate(360deg); } }
@keyframes tamami-loading-dot {
  0%, 60%, 100% { opacity: .28; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}
.tamami-finish-button {
  display: block;
  margin: 10px auto 30px;
  border: 0;
  background: transparent;
  color: #7d6c89;
  font-size: var(--type-label);
  text-decoration: underline;
  cursor: pointer;
}
.tamami-complete-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  margin: 30px 0;
  padding: 19px;
  border: 1px solid #d8c7e7;
  border-radius: 18px;
  background: #f2ebf9;
}
.tamami-complete-card__avatar { display: block; width: 44px; height: 44px; object-fit: contain; image-rendering: pixelated; }
.tamami-complete-card strong { color: #5a43bc; font-size: var(--type-body-lg); }
.tamami-complete-card p { margin: 5px 0 12px; color: #6b667a; font-size: var(--type-label); line-height: 1.6; word-break: keep-all; overflow-wrap: anywhere; }
.tamami-complete-card .tamami-primary-action { grid-column: 1 / -1; }
.tamami-delete-panel { margin: 24px 0 0; padding: 14px; border-top: 1px solid #e0d6e8; color: #76677f; font-size: var(--type-label); }
.tamami-delete-panel > summary { cursor: pointer; font-weight: 600; }
.tamami-delete-panel p { line-height: 1.65; }
.tamami-delete-panel form { display: grid; gap: 9px; justify-items: start; }
.tamami-delete-panel label { display: flex; align-items: flex-start; gap: 7px; }
.tamami-delete-panel input[type="submit"] { padding: 7px 10px; border: 1px solid #b86262; border-radius: 8px; background: #fff; color: #a23a3a; font-size: var(--type-caption); font-weight: 600; }
.legal-disclosure-list { display: grid; gap: 8px; }
.legal-disclosure-list div { display: grid; grid-template-columns: minmax(110px, 0.4fr) 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid #eee; }
.legal-disclosure-list dt { font-weight: 600; }
.legal-disclosure-list dd { margin: 0; }

@media (max-width: 639px) {
  .tamami-main { width: min(100% - 24px, 760px); padding-top: 16px; }
  .tamami-main .unified-page-hero { min-height: 166px; }
  .tamami-main .unified-page-hero-copy { max-width: calc(100% - 96px); }
  .tamami-main .unified-page-hero h1 { font-size: clamp(var(--type-section-title), 7.68vw, var(--type-page-title)); }
  .tamami-main .tamami-hero-art { right: -1px; bottom: -15px; width: 132px; }
  .tamami-value-card { grid-template-columns: 1fr; gap: 12px; padding: 8px 0 16px; }
  .tamami-value-topics { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
  .tamami-value-topics li { grid-column: span 2; font-size: var(--type-small); }
  .tamami-value-topics li:nth-last-child(2) { grid-column: 2 / span 2; }
  .tamami-value-card__footer { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 0; }
  .tamami-value-card__footer p { justify-content: flex-start; font-size: var(--type-small); }
  .tamami-value-card__footer p + p { padding: 8px 0 0; margin: 0; border-left: 0; border-top: 2px dotted #cdbdf3; }
  .tamami-value-card__copy { grid-template-columns: minmax(0, 1fr) 58px; }
  .tamami-value-card__mascot { width: 58px; }
  .tamami-value-card h2 { font-size: var(--type-subtitle); }
  .tamami-profile-notice .tamami-profile-notice__action,
  .tamami-pass-notice .tamami-pass-notice__action { align-self: flex-end; }
  .tamami-open-card { gap: 10px 12px; padding: 12px; }
  .tamami-open-card > .tamami-open-action { grid-column: 1 / -1; margin-top: 0; }
  .tamami-archive > header { align-items: start; flex-direction: column; gap: 5px; }
  .tamami-topic-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tamami-topic-grid .tamami-topic-card:last-child { width: auto; grid-column: auto; justify-self: stretch; }
  .tamami-style-grid { grid-template-columns: 1fr; }
  .tamami-choice-card > span { min-height: 66px; }
  .tamami-topic-card > span { min-height: 0; }
  .tamami-topic-card__visual strong {
    right: 3px;
    bottom: 8px;
    left: 3px;
    font-size: var(--type-caption);
  }
  .tamami-topic-card small {
    font-size: var(--type-caption);
    line-height: 1.35;
  }
  .tamami-style-card > span {
    min-height: 116px;
    grid-template-columns: 72px minmax(0, 1fr) 22px;
    gap: 12px;
    padding: 15px 13px;
  }
  .tamami-style-card__art { width: 72px; height: 72px; }
  .tamami-session-note { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 4px 4px 0; }
  .tamami-session-note p { grid-template-columns: 34px minmax(0, 1fr); gap: 10px; padding: 13px 0; }
  .tamami-session-note-icon { width: 31px; height: 31px; }
  .tamami-session-note .lucide { width: 27px; height: 27px; }
  .tamami-session-note strong { font-size: var(--type-small); }
  .tamami-session-note-mascot { display: none; }
  .tamami-context-field, .tamami-question-field { padding: 15px; }
  .tamami-conversation-main { padding-inline: 14px; }
  .tamami-conversation-header { grid-template-columns: 40px minmax(0, 1fr) 42px; margin-inline: -14px; padding-inline: 14px; }
  .tamami-answer-row { grid-template-columns: 32px minmax(0, 1fr); gap: 7px; }
  .tamami-avatar { width: 32px; height: 32px; border-radius: 11px; }
  .tamami-answer-bubble { padding: 15px; }
  .tamami-answer-bubble > h2 { font-size: var(--type-subtitle); }
  .tamami-answer-bubble > div { font-size: var(--type-body); }
  .tamami-generation-panel { margin-left: 39px; }
  .tamami-composer-wrap { margin-inline: -5px; }
}

@media (max-width: 350px) {
  .tamami-user-bubble { max-width: 90%; }
  .tamami-answer-bubble { padding: 13px; }
  .tamami-feedback > span { width: 100%; }
  .tamami-generation-panel {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 9px;
    margin-left: 0;
    padding: 14px;
  }
  .tamami-generation-panel .tamami-loading-avatar { width: 40px; height: 40px; }
  .tamami-composer-wrap { position: static; margin-bottom: 32px; }
}

/* Tamami reward points: extends the existing pixel-room visual language. */
.stardust-icon {
  display: block;
  width: 32px;
  height: auto;
  flex-shrink: 0;
  object-fit: contain;
  image-rendering: pixelated;
}

.tamami-stage {
  position: relative;
  box-sizing: border-box;
  width: min(100%, 620px);
  aspect-ratio: 16 / 10;
  margin: 0 auto;
  overflow: hidden;
  isolation: isolate;
  border: 4px solid #6f4f97;
  border-radius: 22px;
  background: #dcd5ff;
  box-shadow: 0 5px 0 #4d356f, inset 0 0 0 4px rgb(255 255 255 / 45%);
}

.tamami-stage--compact {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: auto;
  margin: 0;
  transform: none;
  border: 0;
  border-radius: inherit;
  background: transparent;
  box-shadow: none;
}

.tamami-layer {
  position: absolute;
  pointer-events: none;
}

.tamami-layer[data-placement-key],
.tamami-layer[data-follow-tamami] {
  top: var(--placement-y, 50%);
  left: var(--placement-x, 50%);
  transform: translate(-50%, -50%);
}

.tamami-layer--background {
  z-index: 0;
  inset: 0;
  background-color: #dcd5ff;
  background-image:
    var(--decor-background-image, none),
    radial-gradient(circle at 24% 24%, rgb(255 255 255 / 72%) 0 2px, transparent 3px),
    linear-gradient(155deg,
      hsl(var(--decor-hue) 72% 91%),
      hsl(calc(var(--decor-hue) + 35deg) 68% 80%));
  background-position: center, center, center;
  background-repeat: no-repeat, repeat, no-repeat;
  background-size: cover, 34px 34px, auto;
  opacity: 0;
  image-rendering: pixelated;
}

.tamami-layer--background.is-equipped { opacity: 1; }

.tamami-layer--item {
  display: block;
  image-rendering: pixelated;
}

.tamami-layer--item > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.tamami-layer--furniture {
  z-index: 1;
  width: 40%;
  height: 56%;
}

.tamami-layer--stand {
  z-index: 2;
  width: 32%;
  height: 48%;
}

.tamami-layer--display-prop {
  z-index: 3;
  width: 17%;
  height: 25%;
}

.tamami-layer--tamami {
  z-index: 4;
  display: block;
  width: 42%;
  height: 72%;
  padding: 0;
  border: 0;
  background: transparent;
  image-rendering: pixelated;
}

.tamami-layer--tamami > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  image-rendering: pixelated;
}

.tamami-layer--effect {
  z-index: 5;
  width: 100%;
  height: 100%;
}

.tamami-layer--crystal-effect {
  --effect-sparkle-lift: 0px;

  z-index: 3;
  width: 42%;
  height: 72%;
  pointer-events: none;
}

.tamami-layer--wearable {
  z-index: 6;
  width: 32%;
  height: 48%;
}

.tamami-layer--hand-prop {
  z-index: 7;
  width: 19%;
  height: 31%;
}

.tamami-layer--effect > img,
.tamami-layer--crystal-effect > img {
  transform: translateY(var(--crystal-effect-offset-y, 0)) scale(var(--crystal-effect-scale, 1));
  animation: reward-sparkle 2.4s steps(2, end) infinite;
  filter:
    drop-shadow(0 0 2px rgb(76 48 119 / 52%))
    drop-shadow(0 0 5px rgb(255 255 255 / 58%));
}

.tamami-stage.is-editing {
  cursor: default;
  user-select: none;
}

.tamami-stage.is-editing [data-placement-editable="true"] {
  pointer-events: auto;
  touch-action: none;
  cursor: grab;
  outline: 2px dashed rgb(86 50 173 / 74%);
  outline-offset: -3px;
}

.tamami-stage.is-editing [data-placement-editable="true"]:focus-visible,
.tamami-stage.is-editing .is-placement-active {
  outline: 3px solid #ffd86f;
  outline-offset: -4px;
}

.tamami-stage.is-editing .is-placement-dragging {
  cursor: grabbing;
}

.tamami-stage .dashboard-cat-button {
  z-index: 4;
  pointer-events: auto;
}

.point-main,
.decoration-main {
  width: min(100% - 32px, 1040px);
  margin: 0 auto;
  padding: 30px 0 120px;
}

.point-balance-card {
  --point-surface-frame: url("/images/pixel_frame_points_balance.svg?v=2");
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 8px 18px;
  overflow: hidden;
}

.point-balance-card,
.point-history,
.point-debt-notice {
  box-sizing: border-box;
  border: 14px solid transparent;
  border-image-source: var(--point-surface-frame);
  border-image-slice: 14 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  background-clip: border-box;
  background-origin: border-box;
  box-shadow: none;
  clip-path: none;
  image-rendering: pixelated;
}

.point-balance-card > div:not(.point-balance-art) {
  display: grid;
  gap: 3px;
  padding-left: 56px;
}
.point-balance-card > div:not(.point-balance-art),
.point-balance-card > .point-primary-link,
.point-balance-card > .point-debt-notice { position: relative; z-index: 2; }
.point-balance-art {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: -28px;
  display: block;
  width: 112px;
  height: 88px;
  transform: translateY(-50%);
  pointer-events: none;
}
.point-balance-art img {
  position: absolute;
  display: block;
  height: auto;
  object-fit: contain;
  image-rendering: pixelated;
}
.point-balance-art__stardust {
  top: 24px;
  left: 36px;
  width: 44px;
}
.point-balance-card span { color: #685779; font-size: var(--type-body); font-weight: 600; }
.point-balance-card strong {
  color: #38234e;
  font-family: 'AppNumerals', 'SchoolSafeUniverse', 'Pretendard', system-ui, sans-serif;
  font-size: var(--type-display-md);
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.point-balance-card strong small { margin-left: 3px; font-size: var(--type-subtitle); font-weight: 400; }

.point-primary-link,
.point-primary-button,
.decoration-buy-button,
.decoration-apply-button {
  display: inline-flex;
  min-height: 46px;
  padding: 0 18px;
  align-items: center;
  justify-content: center;
  color: #fff;
  border: 2px solid #4e336d;
  border-radius: 8px;
  background: #76509f;
  box-shadow: 3px 3px 0 #4e336d;
  font-weight: 600;
  text-decoration: none;
}

.point-primary-link {
  --tamami-action-frame: url("/images/pixel_frame_settings_primary.svg?v=1");
  appearance: none;
  box-sizing: border-box;
  height: 54px;
  min-height: 54px;
  align-self: center;
  padding: 0 12px;
  border: 14px solid transparent;
  border-image-source: var(--tamami-action-frame);
  border-image-slice: 14 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  clip-path: none;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  image-rendering: pixelated;
  transition: filter .15s ease, transform .15s ease;
}

.point-primary-link:hover { filter: brightness(1.03); }
.point-primary-link:active { filter: brightness(.96); transform: translateY(1px); }
.point-primary-link:focus-visible {
  outline: 3px solid var(--ui-focus, #5a43bc);
  outline-offset: 2px;
}

.point-debt-notice {
  --point-surface-frame: url("/images/pixel_frame_points_debt.svg?v=2");
  grid-column: 1 / -1;
  margin: 2px 0 0;
  padding: 10px 12px;
  color: #704a2e;
  font-size: var(--type-body);
}

/* One filled pixel surface owns the outline, stepped corners and interior. */
.point-earning-guide,
.point-earning-guide__methods > div,
.point-earning-guide__action {
  box-sizing: border-box;
  border: 14px solid transparent;
  border-image-source: var(--point-guide-frame);
  border-image-slice: 14 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  background-clip: border-box;
  background-origin: border-box;
  box-shadow: none;
  clip-path: none;
  image-rendering: pixelated;
}
.point-earning-guide {
  --point-guide-frame: url("/images/pixel_frame_points_guide.svg?v=1");
  --point-guide-title: #4c30af;
  --point-guide-text: #6b667a;
  margin-top: 24px;
  padding: 18px;
  color: var(--point-guide-text);
  font-size: var(--type-body);
  line-height: 1.8;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.point-earning-guide__intro { display: grid; grid-template-columns: 80px minmax(0, 1fr); align-items: center; gap: 20px; margin-bottom: 24px; }
.point-earning-guide__tamami { display: block; width: 80px; height: 80px; object-fit: contain; }
.point-earning-guide h2 { margin: 0; color: var(--point-guide-title); font-size: var(--type-card-title); line-height: 1.5; }
.point-earning-guide__intro p { margin: 6px 0 0; }
.point-earning-guide__methods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; }
.point-earning-guide__methods > div { --point-guide-frame: url("/images/pixel_frame_points_guide_item.svg?v=1"); min-width: 0; padding: 8px; }
.point-earning-guide dt { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 12px; color: var(--point-guide-title); font-weight: 600; line-height: 1.6; }
.point-earning-guide dt img { display: block; width: 48px; height: 48px; object-fit: contain; }
.point-earning-guide__gift-icon { transform: scale(.875); }
.point-earning-guide__fortune-icon { transform: scale(1.3); }
.point-earning-guide__credit-icon { transform: scale(.8); }
.point-earning-guide dd { margin: 12px 0 0; }
.point-earning-guide__action {
  --point-guide-frame: url("/images/pixel_frame_points_guide_action.svg?v=2");
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 54px;
  margin-top: 20px;
  padding: 0 12px;
  color: var(--point-guide-title);
  font-weight: 600;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: filter .15s ease, transform .15s ease;
}
.point-earning-guide__action:hover { filter: brightness(1.03); }
.point-earning-guide__action:active { filter: brightness(.96); transform: translateY(1px); }
.point-earning-guide__action:focus-visible { outline: 3px solid var(--point-guide-title); outline-offset: 2px; }
@media (max-width: 639px) {
  .point-earning-guide { padding: 10px; }
  .point-earning-guide__intro { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; margin-bottom: 18px; }
  .point-earning-guide__tamami { width: 64px; height: 64px; }
  .point-earning-guide__methods { grid-template-columns: minmax(0, 1fr); }
}

.point-history-filters {
  display: flex;
  gap: 8px;
  margin: 28px 0 18px;
  padding-bottom: 6px;
  overflow-x: auto;
}

.point-history-filters a {
  --point-badge-frame: url("/images/pixel_badge_points_filter.svg?v=1");
  --point-badge-slice: 4;
  flex: 0 0 auto;
  padding: 8px 13px;
  color: #62566d;
  font-size: var(--type-body);
  font-weight: 600;
  text-decoration: none;
}

.point-history-filters a.active {
  --point-badge-frame: url("/images/pixel_badge_points_filter_active.svg?v=1");
  color: #fff;
}

.point-history-filters a,
.point-history-icon {
  box-sizing: border-box;
  border: calc(var(--point-badge-slice) * 1px) solid transparent;
  border-image-source: var(--point-badge-frame);
  border-image-slice: var(--point-badge-slice) fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  clip-path: none;
  image-rendering: pixelated;
  transform: none;
}

.point-history-filters a:focus-visible {
  outline: 3px solid var(--ui-focus, #5a43bc);
  outline-offset: 2px;
}

.point-history {
  --point-surface-frame: url("/images/pixel_frame_points_history.svg?v=2");
  padding: 24px;
}

.point-history h2 {
  margin: 0 0 16px;
  color: #3f2c51;
  font-family: var(--font-serif);
}

.point-history ol { margin: 0; padding: 0; list-style: none; }
.point-history li {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  gap: 12px;
  padding: 15px 0;
  align-items: center;
  border-bottom: 1px dashed #d7cadf;
}
.point-history li:last-child { border-bottom: 0; }
.point-history-icon {
  --point-badge-frame: url("/images/pixel_badge_points_icon.svg?v=1");
  --point-badge-slice: 4;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: #573b74;
  font-weight: 600;
}
.point-history li > div { display: grid; gap: 3px; }
.point-history li > div strong { color: #3e2b50; font-size: var(--type-body-lg); }
.point-history li > div small { color: #8a7e91; font-size: var(--type-label); }
.point-history li > div em { color: #845f36; font-size: var(--type-label); font-style: normal; }
.point-history li > p { display: grid; margin: 0; text-align: right; }
.point-history li > p b { font-size: var(--type-subtitle); }
.point-history li > p.plus b { color: #7350a0; }
.point-history li > p.minus b { color: #9c5361; }
.point-history li > p small { color: #8a7e91; font-size: var(--type-label); }
.point-pagination {
  display: flex;
  gap: 14px;
  margin-top: 18px;
  justify-content: center;
  align-items: center;
}
.point-pagination a { color: #684b8b; font-weight: 600; }
.point-empty { display: grid; padding: 36px 16px; place-items: center; text-align: center; }
.point-empty > .stardust-icon { width: 44px; }
.point-empty strong { margin-top: 8px; color: #443153; }
.point-empty p { margin: 6px 0 14px; color: #796e80; }
.point-empty a { color: #67458c; font-weight: 600; }

.fortune-point-claim {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  margin: 30px 0;
  padding: 12px 22px 4px;
  border: 14px solid transparent;
  border-image: url("/images/dashboard_shortcut_frame.svg?v=1") 14 stretch;
  border-radius: 0;
  background: transparent;
  color: #49335d;
}
.fortune-point-claim::before {
  position: absolute;
  z-index: 0;
  inset: -10px;
  background-color: #fff;
  background-image:
    linear-gradient(rgb(255 255 255 / 80%), rgb(255 255 255 / 80%)),
    url("/images/stardust.png");
  background-position: center, right 16px center;
  background-repeat: no-repeat;
  background-size: cover, 88px 81px;
  clip-path: polygon(
    12px 0, calc(100% - 12px) 0,
    calc(100% - 12px) 2px, calc(100% - 8px) 2px,
    calc(100% - 8px) 4px, calc(100% - 4px) 4px,
    calc(100% - 4px) 8px, calc(100% - 2px) 8px,
    calc(100% - 2px) 12px, 100% 12px,
    100% calc(100% - 12px), calc(100% - 2px) calc(100% - 12px),
    calc(100% - 2px) calc(100% - 8px), calc(100% - 4px) calc(100% - 8px),
    calc(100% - 4px) calc(100% - 4px), calc(100% - 8px) calc(100% - 4px),
    calc(100% - 8px) calc(100% - 2px), calc(100% - 12px) calc(100% - 2px),
    calc(100% - 12px) 100%, 12px 100%,
    12px calc(100% - 2px), 8px calc(100% - 2px),
    8px calc(100% - 4px), 4px calc(100% - 4px),
    4px calc(100% - 8px), 2px calc(100% - 8px),
    2px calc(100% - 12px), 0 calc(100% - 12px),
    0 12px, 2px 12px,
    2px 8px, 4px 8px,
    4px 4px, 8px 4px,
    8px 2px, 12px 2px
  );
  content: "";
  pointer-events: none;
}
.fortune-point-claim > * { position: relative; z-index: 1; }
.fortune-point-claim__copy {
  display: grid;
  min-width: 0;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}
.fortune-point-claim__tamami {
  display: block;
  width: 48px;
  height: auto;
  image-rendering: pixelated;
}
.fortune-point-claim__message { display: grid; min-width: 0; gap: 2px; }
.fortune-point-claim h2 {
  margin: 0;
  color: #5632ad;
  font-size: var(--type-card-title);
  line-height: 1.25;
  letter-spacing: -.025em;
  word-break: keep-all;
}
.fortune-point-claim p { margin: 0; color: #81758f; font-size: var(--type-small); line-height: 1.4; word-break: keep-all; }
.fortune-point-claim p strong { color: #6952a3; font-family: 'AppNumerals', 'SchoolSafeUniverse', 'Pretendard', system-ui, sans-serif; font-weight: 700; }
.fortune-point-claim__form { width: 100%; margin: 0; }
.fortune-point-claim-button,
.fortune-point-claimed {
  display: flex;
  width: 100%;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  appearance: none;
  color: #fff;
  border: 0;
  border-radius: 0;
  background: #9476d9;
  box-shadow: inset 3px 3px 0 rgb(255 255 255 / 30%), inset -3px -4px 0 rgb(104 75 166 / 24%);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, calc(100% - 8px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 8px, 100% 8px, 100% calc(100% - 8px), calc(100% - 4px) calc(100% - 8px), calc(100% - 4px) calc(100% - 4px), calc(100% - 8px) calc(100% - 4px), calc(100% - 8px) 100%, 8px 100%, 8px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 8px), 0 calc(100% - 8px), 0 8px, 4px 8px, 4px 4px, 8px 4px);
  filter: drop-shadow(0 5px 0 #7456b5);
  font-size: var(--type-subtitle);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.fortune-point-claim-button:hover,
.fortune-point-claimed:hover { filter: brightness(1.04) drop-shadow(0 5px 0 #7456b5); }
.fortune-point-claim-button:active,
.fortune-point-claimed:active { transform: translateY(2px); filter: drop-shadow(0 3px 0 #7456b5); }

.decoration-balance {
  display: grid;
  min-width: 138px;
  padding: 9px 13px;
  color: #4c365f;
  border: 3px solid #8969a5;
  border-radius: 10px;
  background: #fff;
  box-shadow: 3px 3px 0 #674a83;
  text-align: right;
  text-decoration: none;
}
.decoration-balance span { font-size: var(--type-label); font-weight: 600; }
.decoration-balance strong { font-size: var(--type-card-title); }
.decoration-section-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: -10px 0 24px;
}
.decoration-section-tabs a {
  display: grid;
  min-height: 44px;
  place-items: center;
  border: 2px solid #aa92bd;
  background: rgb(255 255 255 / 88%);
  color: #665272;
  font-size: var(--type-body);
  font-weight: 600;
  text-decoration: none;
}
.decoration-section-tabs a.is-active {
  border-color: #593780;
  background: #7650a0;
  color: #fff;
}

.decoration-preview {
  display: grid;
  grid-template-columns: minmax(180px, .65fr) minmax(320px, 1.35fr);
  gap: 24px;
  padding: 24px;
  align-items: center;
  border: 4px solid #735092;
  border-radius: 20px;
  background: #f7f0ff;
  box-shadow: 5px 5px 0 #4d356a;
}
.decoration-preview-copy > p {
  margin: 0;
  color: #9974aa;
  font-size: var(--type-label);
  font-weight: 600;
  letter-spacing: .1em;
}
.decoration-preview-copy h2 {
  margin: 6px 0 8px;
  color: #3c2851;
  font-family: var(--font-serif);
  font-size: var(--type-section-title-lg);
}
.decoration-preview-copy span { color: #776a7d; font-size: var(--type-body); line-height: 1.6; }
.decoration-stage-editor {
  display: grid;
  min-width: 0;
  gap: 12px;
}
.decoration-editor-controls {
  display: grid;
  gap: 8px;
}
.decoration-editor-start,
.decoration-editor-save,
.decoration-editor-cancel {
  min-height: 42px;
  padding: 0 14px;
  border: 2px solid #563a78;
  border-radius: 8px;
  font: inherit;
  font-size: var(--type-small);
  font-weight: 600;
  cursor: pointer;
}
.decoration-editor-start,
.decoration-editor-save {
  background: #76509f;
  color: #fff;
}
.decoration-editor-cancel {
  background: #fff;
  color: #5f4b6e;
}
.decoration-editor-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.decoration-editor-actions[hidden],
.decoration-editor-object-list[hidden] { display: none; }
.decoration-editor-save:disabled { cursor: not-allowed; opacity: .48; }
.decoration-editor-object-list {
  display: flex;
  gap: 6px;
  padding: 2px 1px 4px;
  overflow-x: auto;
}
.decoration-editor-object-list button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 10px;
  border: 2px solid #b9a2cb;
  border-radius: 999px;
  background: #fff;
  color: #5a4668;
  font-size: var(--type-label);
  font-weight: 600;
  cursor: pointer;
}
.decoration-editor-object-list button[aria-pressed="true"] {
  border-color: #6e48a0;
  background: #eee3fa;
  color: #4c2d72;
}
.decoration-editor-help,
.decoration-editor-fixed-note,
.decoration-editor-status {
  margin: 0;
  color: #776a7d;
  font-size: var(--type-label);
  line-height: 1.5;
}
.decoration-editor-fixed-note {
  padding: 10px 12px;
  border: 1px solid #cfbddb;
  background: #fff;
  font-weight: 600;
}
.decoration-editor-status {
  min-height: 17px;
  color: #68458c;
  font-weight: 600;
}
.decoration-purchase-success {
  grid-column: 1 / -1;
  display: flex;
  gap: 10px;
  padding: 12px;
  align-items: center;
  border: 2px solid #9a7fb0;
  border-radius: 10px;
  background: #fff;
}
.decoration-purchase-success > strong { margin-right: auto; }
.decoration-purchase-success > a { color: #654787; font-weight: 600; }

.decoration-composition {
  margin-top: 18px;
  padding: 18px;
  border: 2px solid #bca8cc;
  background: rgb(255 255 255 / 90%);
}
.decoration-composition > header,
.decoration-composition-slot > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.decoration-composition > header { margin-bottom: 14px; }
.decoration-composition > header p {
  margin: 0 0 3px;
  color: #9a70df;
  font-size: var(--type-caption);
  font-weight: 600;
  letter-spacing: .1em;
}
.decoration-composition > header h2 {
  margin: 0;
  color: #3c2851;
  font-family: var(--font-serif);
  font-size: var(--type-section-title-lg);
}
.decoration-composition > header > strong {
  color: #6842a1;
  font-size: var(--type-card-title);
}
.decoration-composition-slots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.decoration-composition-slot {
  min-width: 0;
  padding: 11px;
  border: 2px solid #d4c4df;
  background: #faf6ff;
}
.decoration-composition-slot > header h3 {
  margin: 0;
  color: #49365a;
  font-size: var(--type-body);
}
.decoration-composition-slot > header span {
  color: #765695;
  font-size: var(--type-small);
  font-weight: 600;
}
.decoration-composition-slot > p {
  margin: 12px 0 3px;
  color: #9a8da2;
  font-size: var(--type-label);
}
.decoration-composition-slot ul {
  display: grid;
  gap: 7px;
  margin: 9px 0 0;
  padding: 0;
  list-style: none;
}
.decoration-composition-slot li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  min-width: 0;
}
.decoration-composition-slot li > img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  background: #eee4f8;
}
.decoration-composition-slot li > span {
  overflow: hidden;
  color: #54445f;
  font-size: var(--type-label);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.decoration-remove-button {
  min-height: 34px;
  padding: 0 9px;
  border: 2px solid #967bb0;
  background: #fff;
  color: #62447e;
  cursor: pointer;
  font-size: var(--type-label);
  font-weight: 600;
}
.decoration-card-actions .decoration-remove-button { width: 100%; min-height: 42px; }
.decoration-shop-cta {
  display: grid;
  gap: 4px;
  margin-top: 14px;
  padding: 16px 18px;
  border: 2px solid #8f70aa;
  background: rgb(255 255 255 / 92%);
  color: #695178;
  text-decoration: none;
}
.decoration-shop-cta span { font-size: var(--type-label); }
.decoration-shop-cta strong { color: #513072; font-size: var(--type-body-lg); }

.decoration-shop { margin-top: 34px; }
.decoration-shop > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
}
.decoration-shop h2 {
  margin: 4px 0 0;
  color: #3c2851;
  font-family: var(--font-serif);
  font-size: var(--type-page-title);
}
.decoration-shop > header > span { color: #75677e; font-size: var(--type-body); font-weight: 600; }
.decoration-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 10px;
  margin: 18px 0 12px;
  padding: 14px;
  border: 2px solid #c8b7d6;
  border-radius: 12px;
  background: rgb(255 255 255 / 88%);
}
.decoration-filters label {
  display: grid;
  gap: 5px;
  color: #675a70;
  font-size: var(--type-label);
  font-weight: 600;
}
.decoration-filters select,
.decoration-filters button {
  min-height: 42px;
  padding: 0 10px;
  color: #443352;
  border: 2px solid #a68db9;
  border-radius: 7px;
  background: #fff;
  font-weight: 600;
}
.decoration-filters button {
  align-self: end;
  color: #fff;
  border-color: #50366c;
  background: #725093;
}
.decoration-slot-defaults {
  display: flex;
  gap: 7px;
  padding: 5px 0 15px;
  overflow-x: auto;
}
.decoration-slot-defaults form { flex: 0 0 auto; }
.decoration-reset-button {
  min-height: 36px;
  padding: 0 11px;
  color: #5f4e69;
  border: 1px solid #bcaac8;
  border-radius: 999px;
  background: #fff;
  font-size: var(--type-small);
  font-weight: 600;
}
.decoration-reset-button:disabled { cursor: not-allowed; opacity: .45; }
.decoration-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.decoration-card {
  display: grid;
  grid-template-rows: 128px 1fr auto;
  min-width: 0;
  overflow: hidden;
  border: 3px solid #c8b6d5;
  border-radius: 13px;
  background: #fff;
  box-shadow: 3px 3px 0 #a890b8;
}
.decoration-card.is-owned { border-color: #8c69a7; }
.decoration-card.is-selected { outline: 3px solid #f0b84d; outline-offset: 2px; }
.decoration-card-preview {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #f6eff2;
  text-decoration: none;
}
.decoration-card-preview > span {
  display: grid;
  width: 78px;
  height: 70px;
  place-items: center;
  color: hsl(var(--decor-hue) 40% 30%);
  border: 4px solid hsl(var(--decor-hue) 40% 42%);
  background: hsl(var(--decor-hue) 80% 86%);
  box-shadow: 5px 5px 0 hsl(var(--decor-hue) 35% 33%);
}
.decoration-card-preview > img {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}
.decoration-card-preview > .decoration-card-art--background { object-fit: cover; }
.decoration-card-preview > .decoration-card-art--item {
  box-sizing: border-box;
  padding: 7px;
  object-fit: contain;
}
.decoration-card-preview b { font-family: var(--font-serif); font-size: var(--type-display-sm); }
.decoration-card-preview small {
  position: absolute;
  right: 7px;
  bottom: 7px;
  padding: 3px 6px;
  color: #584465;
  border-radius: 5px;
  background: rgb(255 255 255 / 88%);
  font-size: var(--type-caption);
  font-weight: 600;
}
.decoration-card-copy { padding: 13px; }
.decoration-card-copy > span { color: #8a7893; font-size: var(--type-caption); font-weight: 600; }
.decoration-card-copy h3 { margin: 5px 0; color: #3d2c4a; font-size: var(--type-subtitle); }
.decoration-card-copy p {
  min-height: 36px;
  margin: 0 0 8px;
  color: var(--decoration-body-text);
  font-size: var(--type-body);
  line-height: 1.75;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.decoration-card-copy > strong { color: #69478e; font-size: var(--type-subtitle); }
.decoration-card-actions { padding: 0 12px 13px; }
.decoration-card-actions form,
.decoration-card-actions input[type="submit"] { width: 100%; }
.decoration-card-actions details summary {
  display: grid;
  min-height: 42px;
  place-items: center;
  color: #fff;
  border: 2px solid #50366c;
  border-radius: 7px;
  background: #725093;
  cursor: pointer;
  font-size: var(--type-body);
  font-weight: 600;
  list-style: none;
}
.decoration-card-actions details[open] summary { margin-bottom: 8px; }
.decoration-confirm {
  padding: 9px;
  border: 1px solid #c8b5d4;
  border-radius: 7px;
  background: #faf6ff;
}
.decoration-confirm p { margin: 0 0 7px; color: #665970; font-size: var(--type-label); }
.decoration-confirm label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px;
  margin-bottom: 8px;
  color: #716678;
  font-size: var(--type-caption);
  line-height: 1.35;
}
.decoration-buy-button,
.decoration-apply-button { width: 100%; font-size: var(--type-small); }
.decoration-state-badge {
  display: grid;
  min-height: 42px;
  place-items: center;
  color: #5d4770;
  border: 2px solid #baa6c8;
  border-radius: 7px;
  background: #eee6f4;
  font-size: var(--type-small);
  font-weight: 600;
}
.decoration-pagination {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: center;
  margin-top: 20px;
  text-align: center;
}
.decoration-pagination a,
.decoration-pagination span {
  display: grid;
  min-height: 42px;
  place-items: center;
  border: 2px solid #9b80b2;
  background: #fff;
  color: #5d4176;
  font-size: var(--type-small);
  font-weight: 600;
  text-decoration: none;
}
.decoration-pagination span[aria-disabled="true"] { opacity: .42; }
.decoration-pagination strong { color: #61427d; font-size: var(--type-small); }

@keyframes reward-sparkle {
  0%, 100% {
    transform: translateY(var(--crystal-effect-offset-y, 0)) scale(var(--crystal-effect-scale, 1));
    opacity: .82;
  }
  50% {
    transform: translateY(calc(var(--crystal-effect-offset-y, 0px) + var(--effect-sparkle-lift, -4px))) scale(var(--crystal-effect-scale, 1));
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tamami-layer--effect > img,
  .tamami-layer--crystal-effect > img { animation: none; }
}

@media (max-width: 820px) {
  .decoration-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .decoration-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .decoration-composition-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 639px) {
  .point-main,
  .decoration-main { width: min(100% - 24px, 1040px); padding-top: 20px; }
  .point-balance-card { grid-template-columns: 1fr; gap: 8px; padding: 8px 12px; }
  .point-balance-card > div:not(.point-balance-art) { min-height: 60px; padding-left: 64px; }
  .point-balance-art {
    top: 22px;
    right: auto;
    left: 8px;
    width: 78px;
    height: 68px;
    transform: none;
  }
  .point-balance-art__stardust { top: 10px; left: 10px; }
  .fortune-point-claim { gap: 6px; padding: 12px 8px 4px; }
  .fortune-point-claim__copy { grid-template-columns: 40px minmax(0, 1fr); gap: 8px; }
  .fortune-point-claim__tamami { width: 40px; }
  .fortune-point-claim h2 { font-size: var(--type-body-lg); }
  .fortune-point-claim p { font-size: var(--type-caption); }
  .point-primary-link,
  .fortune-point-claim-button,
  .fortune-point-claimed { width: 100%; justify-content: center; }
  .fortune-point-claim-button,
  .fortune-point-claimed { min-height: 36px; font-size: var(--type-small); }
  .point-history { padding: 16px; }
  .point-history li { grid-template-columns: 34px 1fr; }
  .point-history li > p { grid-column: 2; text-align: left; }
  .decoration-balance { align-self: flex-start; text-align: left; }
  .decoration-preview { grid-template-columns: 1fr; padding: 16px; }
  .decoration-preview .tamami-stage { width: 100%; }
  .decoration-purchase-success { align-items: stretch; flex-direction: column; }
  .decoration-composition { padding: 14px; }
  .decoration-composition-slots { grid-template-columns: 1fr; }
  .decoration-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .decoration-filters { grid-template-columns: 1fr; }
  .decoration-card { grid-template-rows: 110px 1fr auto; }
}

@media (max-width: 390px) {
  .decoration-grid { grid-template-columns: 1fr; }
  .decoration-card {
    grid-template-columns: 112px 1fr;
    grid-template-rows: auto auto;
  }
  .decoration-card-preview { grid-row: 1 / 3; }
  .decoration-card-actions { grid-column: 2; }
}

.admin-point-item-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.admin-point-item-list article {
  padding: 14px;
  border: 1px solid #ddd3e5;
  border-radius: 10px;
  background: #fff;
}

.admin-point-item-list article > header {
  display: grid;
  gap: 3px;
  margin-bottom: 10px;
}

.admin-point-item-list article > header span {
  color: #82758b;
  font-size: var(--type-small);
}

.admin-point-item-list form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.admin-point-item-list label {
  display: grid;
  gap: 4px;
  color: #665b6d;
  font-size: var(--type-label);
  font-weight: 600;
}

.admin-point-item-list input,
.admin-point-item-list select {
  min-width: 0;
  min-height: 38px;
  border: 1px solid #b9a9c5;
  border-radius: 6px;
}

.admin-point-item-list .admin-secondary-button {
  align-self: end;
}

/* Point operations */
.admin-points-main .admin-detail-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.admin-points-panel {
  display: grid;
  align-items: stretch;
  gap: 12px;
}

.admin-points-panel > h2 {
  white-space: nowrap;
}

.admin-points-panel .admin-points-form {
  display: grid;
  width: 100%;
  min-width: 0;
  align-items: end;
  gap: 10px;
}

.admin-points-form label {
  display: grid;
  min-width: 0;
  gap: 6px;
  color: #526071;
  font-size: var(--type-caption);
  font-weight: 600;
  white-space: nowrap;
}

.admin-points-form input:not([type="submit"]),
.admin-points-form select {
  width: 100%;
  min-width: 0;
  height: 40px;
  padding: 0 11px;
  border: 1px solid #cfd5dc;
  border-radius: 5px;
  background: #fff;
  color: #202632;
}

.admin-point-display-form {
  grid-template-columns: minmax(130px, 1fr) 80px minmax(220px, 2fr) auto;
}

.admin-point-policy-form {
  grid-template-columns: minmax(150px, 1fr) repeat(2, minmax(100px, .65fr))
    minmax(180px, 1.2fr) minmax(180px, 1.5fr) auto;
}

.admin-point-adjustment-form {
  grid-template-columns: minmax(90px, .65fr) minmax(120px, .8fr)
    minmax(210px, 1.4fr) minmax(210px, 1.4fr) auto;
}

.admin-points-form > input[type="submit"] {
  white-space: nowrap;
}

.admin-points-panel > .admin-privacy-note {
  margin: 0;
}

.admin-point-link-panel {
  justify-items: start;
}

@media (max-width: 1180px) {
  .admin-point-display-form,
  .admin-point-policy-form,
  .admin-point-adjustment-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-points-form label:last-of-type {
    grid-column: 1 / -1;
  }

  .admin-points-form > input[type="submit"] {
    justify-self: start;
  }
}

@media (max-width: 860px) {
  .admin-point-item-list { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .admin-points-main .admin-detail-grid,
  .admin-point-display-form,
  .admin-point-policy-form,
  .admin-point-adjustment-form {
    grid-template-columns: 1fr;
  }

  .admin-points-form label:last-of-type {
    grid-column: auto;
  }

  .admin-points-form > input[type="submit"],
  .admin-point-link-panel .admin-primary-link {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tamami-primary-action:not(.tamami-start-action):not(.tamami-open-action),
  .tamami-open-action,
  .tamami-choice-card > span { transition: none; }
  .tamami-loading-avatar::after,
  .tamami-loading-dots i { animation: none; }
}

/* Coupon operations — neutral console with small pixel accents */
.admin-menu-scrim { display: none; }
.admin-coupon-heading { position: relative; }
.admin-coupon-heading .admin-eyebrow { color: #7652bb; letter-spacing: .08em; }
.admin-coupon-heading h1::after {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 10px;
  border: 2px solid #7951c7;
  background: #ffd75e;
  box-shadow: 5px -5px 0 #e7d9fa;
  content: "";
  image-rendering: pixelated;
}
.admin-coupon-filter-panel,
.admin-coupon-settings,
.admin-coupon-action-grid,
.admin-coupon-table-panel { margin-bottom: 18px; }
.admin-coupon-filter-panel { border-top: 3px solid #7951c7; }
.admin-coupon-search {
  display: grid;
  max-width: none;
  grid-template-columns: max-content minmax(160px, 1fr) max-content minmax(130px, .55fr) auto;
  align-items: end;
  gap: 7px 10px;
  margin: 0;
}
.admin-coupon-search label {
  align-self: center;
  color: #526071;
  font-size: var(--type-caption);
  font-weight: 600;
}
.admin-coupon-search input,
.admin-coupon-search select {
  box-sizing: border-box;
  width: 100%;
  height: 43px;
  min-width: 0;
  padding: 0 11px;
  border: 1px solid #cfd5dc;
  border-radius: 6px;
  background: #fff;
  color: #202632;
  font: inherit;
  font-size: var(--type-label);
}
.admin-coupon-search input[type="submit"] {
  width: auto;
  border-color: #344863;
  background: #344863;
  color: #fff;
  cursor: pointer;
}
.admin-coupon-search input::placeholder { color: #526071; opacity: 1; }
.admin-coupon-form {
  padding: 22px;
  border: 1px solid #dde2e7;
  border-top: 3px solid #7951c7;
  border-radius: 7px;
  background: #fff;
}
.admin-coupon-form input,
.admin-coupon-form select,
.admin-coupon-form textarea,
.admin-coupon-revoke-dialog input {
  box-sizing: border-box;
  width: 100%;
  border: 1px solid #cfd5dc;
  border-radius: 6px;
  background: #fff;
  color: #202632;
  font: inherit;
  font-size: var(--type-label);
}
.admin-coupon-form input,
.admin-coupon-form select,
.admin-coupon-revoke-dialog input { height: 43px; padding: 0 11px; }
.admin-coupon-form textarea { min-height: 112px; padding: 11px; line-height: 1.6; resize: vertical; }
.admin-coupon-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.admin-coupon-form-grid > div { display: grid; gap: 7px; }
.admin-field-hint,
.admin-field-error { margin: -10px 0 0; font-size: var(--type-caption); line-height: 1.5; }
.admin-field-hint { color: #798595; }
.admin-field-error { color: #a3313d; font-weight: 600; }
.admin-coupon-form [aria-invalid="true"],
.admin-coupon-revoke-dialog [aria-invalid="true"] { border-color: #b23b46; background: #fffafb; }
.admin-coupon-impact,
.admin-coupon-initial-batch {
  display: grid;
  gap: 10px;
  margin: 2px 0;
  padding: 16px;
  border: 1px solid #d9cdec;
  border-radius: 7px;
  background: #faf7fd;
}
.admin-coupon-impact legend,
.admin-coupon-initial-batch legend {
  padding: 0 6px;
  color: #5e438c;
  font-size: var(--type-label);
  font-weight: 600;
}
.admin-coupon-impact p { margin: 0; color: #687383; font-size: var(--type-label); line-height: 1.6; }
.admin-coupon-form-actions,
.admin-dialog-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-coupon-settings h2 { margin: 0 0 10px; font-size: var(--type-body-lg); }
.admin-coupon-settings .admin-privacy-note { margin-top: 12px; }
.admin-coupon-settings .admin-privacy-note strong { display: block; margin-bottom: 4px; color: #526071; }
.admin-coupon-row-actions { min-width: 150px; }
.admin-coupon-row-actions form { display: inline; margin: 0 4px; }
.admin-coupon-copy-status {
  display: block;
  min-height: 14px;
  margin-top: 5px;
  color: #526071;
  font-size: var(--type-caption);
  line-height: 1.45;
}
.admin-coupon-heading > div > p:not(.admin-eyebrow),
.admin-coupon-filter-panel header p,
.admin-coupon-action-grid .admin-panel header p,
.admin-coupon-reveal-panel header p,
.admin-coupon-revoke-panel header p,
.admin-coupon-table-panel .admin-empty,
.admin-record-section .admin-coupon-table + .admin-empty,
.admin-coupon-table td small,
.admin-coupon-settings dt,
.admin-coupon-code-detail dt,
.admin-coupon-form .admin-field-hint,
.admin-coupon-settings .admin-privacy-note,
.admin-coupon-action-grid .admin-privacy-note,
.admin-coupon-reveal-panel .admin-privacy-note,
.admin-coupon-revoke-panel + .admin-privacy-note,
.admin-pagination {
  color: #526071;
}
.coupon-status-available { background: #e7f5ed; color: #247049; }
.coupon-status-scheduled { background: #e6f1ff; color: #285f9f; }
.coupon-status-paused { background: #fff0d6; color: #8e5c12; }
.coupon-status-ended,
.coupon-status-revoked { background: #f1f2f4; color: #626d7a; }
.coupon-status-redeemed { background: #eee7f8; color: #6845a2; }
.admin-pagination {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 4px 0 20px;
  color: #687383;
  font-size: var(--type-label);
}
.admin-pagination form { margin: 0; }
.admin-pagination a,
.admin-pagination button,
.admin-pagination > .disabled {
  display: grid;
  min-width: 58px;
  min-height: 34px;
  padding: 0;
  border: 1px solid #cfd5dc;
  border-radius: 5px;
  background: #fff;
  color: #315f95;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  place-items: center;
  text-decoration: none;
}
.admin-coupon-code-detail,
.admin-coupon-reveal-panel,
.admin-coupon-revoke-panel { margin-bottom: 16px; }
.admin-coupon-reveal-panel { border-top: 3px solid #7951c7; }
.admin-coupon-revoke-panel { border-color: #e5c6ca; }
.admin-coupon-code-dialog,
.admin-coupon-revoke-dialog {
  box-sizing: border-box;
  width: min(calc(100% - 32px), 520px);
  padding: 24px;
  border: 1px solid #c9b6e7;
  border-top: 4px solid #7951c7;
  border-radius: 9px;
  background: #fff;
  color: #202632;
  box-shadow: 0 24px 70px rgb(26 31 39 / 28%);
}
.admin-coupon-revoke-dialog { border-color: #e2b8bd; border-top-color: #b23b46; }
.admin-coupon-code-dialog::backdrop,
.admin-coupon-revoke-dialog::backdrop { background: rgb(23 27 34 / 55%); backdrop-filter: blur(2px); }
.admin-coupon-code-dialog h2,
.admin-coupon-revoke-dialog h2 { margin: 0; font-size: var(--type-card-title); }
.admin-coupon-code-dialog > p:not(.admin-eyebrow),
.admin-coupon-revoke-dialog > p { color: #687383; font-size: var(--type-label); line-height: 1.6; }
.admin-coupon-code-dialog > label,
.admin-coupon-revoke-dialog label { color: #526071; font-size: var(--type-caption); font-weight: 600; }
.admin-coupon-code-dialog > input {
  box-sizing: border-box;
  width: 100%;
  height: 48px;
  margin: 7px 0 14px;
  padding: 0 12px;
  border: 2px solid #9f80d1;
  border-radius: 6px;
  background: #faf7fd;
  color: #4f3482;
  font: inherit;
  font-size: var(--type-body);
  font-weight: 600;
  letter-spacing: .04em;
}
.admin-dialog-close-form { position: absolute; top: 10px; right: 10px; margin: 0; }
.admin-dialog-close-form button {
  display: grid;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 5px;
  background: #f1f2f4;
  color: #526071;
  font-size: var(--type-section-title);
  cursor: pointer;
  place-items: center;
}
.admin-coupon-dialog-status { min-height: 16px; margin: 10px 0 0; color: #526071; font-size: var(--type-caption); }
.admin-coupon-revoke-dialog .admin-form { margin-top: 14px; }
.admin-coupon-revoke-dialog .admin-confirm-check input { width: 17px; height: 17px; padding: 0; }
.admin-coupon-revoke-dialog .admin-dialog-actions { margin-top: 2px; }
.admin-coupon-revoke-dialog .admin-dialog-actions input { width: auto; }
.admin-coupon-table a:focus-visible,
.admin-coupon-form :focus-visible,
.admin-coupon-search :focus-visible,
.admin-pagination a:focus-visible,
.admin-pagination button:focus-visible,
.admin-menu-toggle:focus-visible,
.admin-sidebar a:focus-visible,
.admin-coupon-code-dialog :focus-visible,
.admin-coupon-revoke-dialog :focus-visible {
  outline: 3px solid #ffd75e;
  outline-offset: 2px;
}

@media (max-width: 720px) {
  .admin-body.admin-menu-open { overflow: hidden; }
  .admin-sidebar { height: 100dvh; overflow: hidden; }
  .admin-menu-scrim {
    position: fixed;
    z-index: 70;
    inset: 0;
    display: block;
    border: 0;
    background: rgb(23 27 34 / 48%);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }
  .admin-menu-open .admin-menu-scrim { opacity: 1; pointer-events: auto; }
  .admin-menu-toggle {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    cursor: pointer;
  }
  .admin-coupon-search { grid-template-columns: 1fr; align-items: stretch; }
  .admin-coupon-search label { margin-top: 3px; }
  .admin-coupon-search input[type="submit"] { width: 100%; }
  .admin-coupon-form { padding: 17px 14px; }
  .admin-coupon-form-grid { grid-template-columns: 1fr; }
  .admin-coupon-form-actions > * { flex: 1; }
  .admin-coupon-table-panel {
    overflow: visible;
    border: 0;
    background: transparent;
  }
  .admin-coupon-table { display: block; }
  .admin-coupon-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
  .admin-coupon-table tbody { display: grid; gap: 10px; }
  .admin-coupon-table tr {
    display: grid;
    padding: 8px 12px;
    border: 1px solid #d8dde3;
    border-top: 3px solid #8c6bc2;
    border-radius: 7px;
    background: #fff;
    box-shadow: 0 4px 12px rgb(32 38 50 / 5%);
  }
  .admin-coupon-table td {
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-columns: minmax(82px, .42fr) minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid #edf0f2;
    overflow-wrap: anywhere;
  }
  .admin-coupon-table td:last-child { border-bottom: 0; }
  .admin-coupon-table td::before {
    color: #526071;
    content: attr(data-label);
    font-size: var(--type-caption);
    font-weight: 600;
  }
  .admin-coupon-row-actions {
    grid-template-columns: minmax(82px, .42fr) minmax(0, 1fr);
  }
  .admin-coupon-row-actions::before { grid-row: 1 / span 4; align-self: start; }
  .admin-coupon-row-actions > * { grid-column: 2; justify-self: start; }
  .admin-coupon-row-actions form { margin: 2px 0; }
  .admin-coupon-copy-status { margin: 2px 0 0; }
  .admin-coupon-settings dl { grid-template-columns: 1fr; }
  .admin-coupon-action-grid { grid-template-columns: 1fr; }
  .admin-coupon-code-detail dl { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .admin-body { min-width: 0; }
  .admin-topbar { padding: 0 12px; }
  .admin-main { width: calc(100% - 24px); }
  .admin-page-heading h1 { font-size: var(--type-section-title-lg); }
  .admin-stat-grid { gap: 8px; }
  .admin-stat-grid article { min-height: 88px; padding: 13px; }
  .admin-stat-grid strong { font-size: var(--type-section-title); }
  .admin-coupon-code-dialog,
  .admin-coupon-revoke-dialog { width: calc(100% - 20px); padding: 20px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .admin-sidebar,
  .admin-menu-scrim { transition: none; }
}

/* Unified customer-facing pixel surface system
   The outline is a transparent 9-slice frame. Surface art extends beneath it,
   while the shared clip keeps every stepped corner free of white gutters. */
:root {
  --ui-ink: #4f3768;
  --ui-muted: #806d99;
  --ui-heading: #5632ad;
  --ui-accent: #7951c7;
  --ui-accent-strong: #6840b8;
  --ui-line: #d8c5f4;
  --ui-surface: #fffaff;
  --ui-surface-soft: #f5edfc;
  --ui-focus: #5a43bc;
  --pixel-surface-frame: url("/images/pixel_frame_tintable.svg");
  --pixel-surface-width: 8px;
  --pixel-surface-clip: polygon(
    8px 0, calc(100% - 8px) 0,
    calc(100% - 8px) 2px, calc(100% - 4px) 2px,
    calc(100% - 4px) 4px, calc(100% - 2px) 4px,
    calc(100% - 2px) 8px, 100% 8px,
    100% calc(100% - 8px), calc(100% - 2px) calc(100% - 8px),
    calc(100% - 2px) calc(100% - 4px), calc(100% - 4px) calc(100% - 4px),
    calc(100% - 4px) calc(100% - 2px), calc(100% - 8px) calc(100% - 2px),
    calc(100% - 8px) 100%, 8px 100%,
    8px calc(100% - 2px), 4px calc(100% - 2px),
    4px calc(100% - 4px), 2px calc(100% - 4px),
    2px calc(100% - 8px), 0 calc(100% - 8px),
    0 8px, 2px 8px,
    2px 4px, 4px 4px,
    4px 2px, 8px 2px
  );
}

body:has(.unified-page-shell) {
  color: var(--ui-ink);
}

body:has(.unified-page-shell) .viewport-frame {
  background: transparent;
}

:where(
  .auth-card,
  .conversation-onboarding,
  .account-form-card,
  .auth-panel.consent-gate,
  .birth-profile-card,
  .birth-profile-form-card,
  .profile-main > .profile-form,
  .compatibility-flash,
  .compatibility-person-card,
  .compatibility-report-card,
  .compatibility-empty,
  .counterpart-card,
  .report-product-card,
  .archive-empty-state,
  .story-toc,
  .calculation-subject,
  .executive-summary,
  .five-element-profile,
  .synthesis-group,
  .editorial-overview,
  .story-chapter,
  .snapshot-highlight,
  .signal-table-wrap,
  .ten-god-fortune,
  .person-core-closing-panel,
  .person-core-closing-advice,
  .wallet-summary > div,
  .wallet-product,
  .wallet-history-section,
  .wallet-coupon-entry,
  .coupon-register-card,
  .coupon-guide,
  .coupon-guide-grid article,
  .coupon-result-card,
  .settings-account-card,
  .settings-section,
  .danger-zone,
  .consent-row,
  .faq-list details,
  .faq-help,
  .support-ticket-card,
  .support-empty,
  .support-form,
  .support-reply-form,
  .support-message,
  .support-closed,
  .tamami-value-card,
  .tamami-guide-card,
  .tamami-safety-panel,
  .tamami-open-card,
  .tamami-empty-state,
  .tamami-archive-card,
  .tamami-choice-card > span,
  .tamami-context-field,
  .tamami-question-field,
  .tamami-disclosure,
  .tamami-answer-bubble,
  .tamami-generation-panel,
  .tamami-composer-wrap,
  .tamami-complete-card,
  .checkout-product,
  .checkout-customer,
  .checkout-payment,
  .checkout-policy,
  .checkout-action,
  .checkout-result,
  .legal-page,
  .operations-section
) {
  border: var(--pixel-surface-width) solid transparent !important;
  border-image: var(--pixel-surface-frame) 8 stretch !important;
  border-radius: 0 !important;
  background-clip: border-box !important;
  background-origin: border-box !important;
  clip-path: var(--pixel-surface-clip) !important;
}

body:has(.unified-page-shell) :where(.access-notice, .precision-notice:not(.fortune-precision-notice), .wallet-access-note) {
  border: var(--pixel-surface-width) solid transparent !important;
  border-image: var(--pixel-surface-frame) 8 stretch !important;
  border-radius: 0 !important;
  background-color: var(--ui-surface) !important;
  background-clip: border-box !important;
  background-origin: border-box !important;
  box-shadow: none !important;
  clip-path: var(--pixel-surface-clip) !important;
}

.access-notice.access-notice--email-verification {
  --access-notice-frame: url("/images/pixel_frame_signup_security_notice.svg?v=1");

  box-sizing: border-box;
  border: 14px solid transparent !important;
  border-image-source: var(--access-notice-frame) !important;
  border-image-slice: 14 fill !important;
  border-image-width: 1 !important;
  border-image-repeat: stretch !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-clip: border-box !important;
  background-origin: border-box !important;
  box-shadow: none !important;
  clip-path: none !important;
  image-rendering: pixelated;
}

body:has(.unified-page-shell) .saju-correction-basis,
.fortune-page-shell:is(.fortune-page-shell--week, .fortune-page-shell--month) .saju-correction-basis {
  border: var(--pixel-surface-width) solid transparent !important;
  border-image: var(--pixel-surface-frame) 8 stretch !important;
  border-radius: 0 !important;
  background-color: var(--ui-surface) !important;
  background-clip: border-box !important;
  background-origin: border-box !important;
  box-shadow: none !important;
  clip-path: var(--pixel-surface-clip) !important;
}

body:has(.unified-page-shell) .saju-correction-schedule > li,
.fortune-page-shell:is(.fortune-page-shell--week, .fortune-page-shell--month) .saju-correction-schedule > li {
  border-radius: 0;
}

.member-navigation {
  --member-navigation-frame-image: url("/images/pixel_frame_input.svg?v=1");
  align-content: center;
  height: 70px;
  padding: 0;
  border: 14px solid transparent;
  border-image-source: var(--member-navigation-frame-image);
  border-image-slice: 14 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  background-clip: border-box;
  background-origin: border-box;
  box-shadow: none;
  clip-path: none;
  image-rendering: pixelated;
}

body:has(.unified-page-shell) .compatibility-person-card {
  --compatibility-person-card-frame: url("/images/pixel_frame_input.svg?v=1");

  border: 14px solid transparent !important;
  border-image-source: var(--compatibility-person-card-frame) !important;
  border-image-slice: 14 fill !important;
  border-image-width: 1 !important;
  border-image-repeat: stretch !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-clip: border-box !important;
  background-origin: border-box !important;
  box-shadow: none !important;
  clip-path: none !important;
  image-rendering: pixelated;
}

.member-navigation .nav-centerpiece {
  transform: translateY(-2px);
}

@media (max-width: 639px) {
  .member-navigation .nav-centerpiece {
    transform: translateY(-10px);
  }
}

/* Keep keyboard focus visible without reintroducing the legacy yellow flash. */
:focus-visible {
  outline-color: #5a43bc !important;
}

.tamami-value-card dl div {
  border-radius: 0;
}

.temporary-cache-tool,
.report-archive-banner,
.auth-error,
.notice.success,
.settings-notice,
.settings-success {
  border-radius: 0 !important;
}

.unified-page-shell .tamami-composer-loading {
  inset: calc(-1 * var(--pixel-surface-width));
  border-radius: 0;
}

.settings-section-icon,
.birth-profile-form-card > header > span,
.compatibility-report-card > i,
.tamami-open-card > span,
.tamami-archive-icon {
  border-radius: 0 !important;
}

/* Surfaces that previously drew a clipped rectangle in pseudo-elements now
   paint their art on the inner layer while the 9-slice owns the outline. */
.auth-login-card {
  background-color: #f3e9fb !important;
  background-image: url("/images/login_form_background.png") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
}

.auth-login-card::before,
.wallet-summary > div::before,
.wallet-summary > div::after,
.wallet-product::before,
.wallet-product::after,
.wallet-history-section::before,
.wallet-history-section::after,
.wallet-coupon-entry::before,
.wallet-coupon-entry::after,
.report-product-card::before {
  display: none !important;
}

.report-product-card {
  background-color: var(--report-card-background) !important;
  background-image: var(--report-card-image) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: auto 122% !important;
}

.wallet-summary > div {
  background-color: var(--wallet-card-surface) !important;
  background-image: none !important;
}

.wallet-product {
  background-color: var(--wallet-card-surface) !important;
  background-image: none !important;
  border-image-source: url("/images/pixel_frame_tintable.svg") !important;
  background-clip: border-box !important;
}

.wallet-history-section {
  background-color: var(--wallet-card-surface) !important;
  background-image: none !important;
}

.wallet-coupon-entry {
  background-color: var(--wallet-card-surface) !important;
  background-image: none !important;
}

.profile-main > .profile-form,
.auth-panel.consent-gate,
.operations-section,
.legal-page {
  background-color: rgb(255 250 255 / 94%) !important;
}

.profile-main > .profile-form,
.auth-panel.consent-gate {
  padding: 24px;
}

.operations-section {
  margin-top: 24px;
  padding: 24px;
}

.operations-section:first-of-type { margin-top: 28px; }

.legal-page {
  padding: 28px;
}

.coupon-ticket-stub {
  border: var(--pixel-surface-width) solid transparent !important;
  border-image: var(--pixel-surface-frame) 8 stretch !important;
  border-radius: 0 !important;
  background: #9d75e4 border-box !important;
  clip-path: var(--pixel-surface-clip) !important;
}

:where(
  .profile-main,
  .report-main,
  .faq-main,
  .wallet-main,
  .settings-main,
  .support-main,
  .coupon-main,
  .tamami-main,
  .tamami-conversation-main,
  .operations-main,
  .checkout-main,
  .checkout-result,
  .legal-page
) :where(h1, h2, h3) {
  color: var(--ui-heading);
  text-wrap: auto;
}

:where(
  .profile-main,
  .report-main,
  .faq-main,
  .wallet-main,
  .settings-main,
  .support-main,
  .coupon-main,
  .tamami-main,
  .tamami-conversation-main,
  .operations-main,
  .checkout-main,
  .checkout-result,
  .legal-page,
  .auth-main,
  .onboarding-main
) .date-label {
  color: #9a70df;
  font-size: var(--type-label);
  font-weight: 600;
  letter-spacing: .1em;
}

body:has(.unified-page-shell) :where(
  .profile-main,
  .report-main,
  .faq-main,
  .wallet-main,
  .settings-main,
  .support-main,
  .coupon-main,
  .tamami-main,
  .operations-main,
  .checkout-main,
  .checkout-result,
  .legal-page
) {
  padding-bottom: 112px;
}

:where(
  .profile-main,
  .settings-main,
  .support-main,
  .coupon-main,
  .tamami-main,
  .tamami-conversation-main,
  .operations-main,
  .checkout-main,
  .legal-page,
  .auth-main,
  .onboarding-main
) :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]),
  select,
  textarea
) {
  border: 2px solid #cbb6e5 !important;
  border-radius: 0 !important;
  background-color: var(--ui-surface) !important;
  color: var(--ui-ink) !important;
}

:where(
  .profile-main,
  .settings-main,
  .support-main,
  .coupon-main,
  .tamami-main,
  .tamami-conversation-main,
  .operations-main,
  .checkout-main,
  .legal-page,
  .auth-main,
  .onboarding-main
) :where(input, select, textarea):focus-visible {
  border-color: var(--ui-accent-strong) !important;
  outline: 3px solid rgb(90 67 188 / 82%) !important;
  outline-offset: 2px;
  box-shadow: none !important;
}

:is(
  .tamami-start-main .tamami-question-field,
  .tamami-conversation-main .tamami-composer-wrap
) textarea:focus-visible {
  border-color: #cbb6e5 !important;
  outline: none !important;
  box-shadow: none !important;
}

body:has(.unified-page-shell) :where(
  .primary-button,
  .birth-profile-primary-button,
  .compatibility-generate-button,
  .settings-submit-button,
  .support-submit,
  .coupon-submit-button,
  .coupon-result-button,
  .tamami-primary-action:not(.tamami-start-action):not(.tamami-open-action):not(.tamami-restart-action):not(.tamami-submit),
  .tamami-generation-retry,
  .checkout-submit
),
.auth-shell :where(.auth-primary-button, .onboarding-next-button, .primary-button) {
  border: 2px solid #5632ad !important;
  border-radius: 0 !important;
  background: #7951c7 !important;
  box-shadow: 4px 4px 0 #bba3df !important;
  clip-path: none !important;
  color: #fff !important;
}

body:has(.unified-page-shell) :where(
  .secondary-button,
  .birth-profile-secondary-button,
  .counterpart-edit-link,
  .coupon-result-secondary
),
.auth-shell :where(.secondary-button, .text-button) {
  border: 2px solid #896bcc !important;
  border-radius: 0 !important;
  background: #fffaff !important;
  box-shadow: 3px 3px 0 #ddd0f1 !important;
  clip-path: none !important;
  color: #6842b5 !important;
}

body:has(.unified-page-shell) :where(
  .primary-button,
  .birth-profile-primary-button,
  .compatibility-generate-button,
  .settings-submit-button,
  .support-submit,
  .coupon-submit-button,
  .coupon-result-button,
  .tamami-primary-action:not(.tamami-start-action):not(.tamami-open-action):not(.tamami-restart-action):not(.tamami-submit),
  .tamami-generation-retry,
  .checkout-submit
):active,
.auth-shell :where(.auth-primary-button, .onboarding-next-button, .primary-button):active {
  box-shadow: 1px 1px 0 #bba3df !important;
  transform: translate(3px, 3px);
}

/* Checkout surfaces use filled 48px frames so the stepped contour, bevel,
   shadow, and surface color stay connected without a second CSS clip. */
.checkout-main :is(
  .checkout-order-hero,
  .checkout-order-total,
  .checkout-product,
  .checkout-customer,
  .checkout-payment,
  .checkout-policy,
  .checkout-action,
  .checkout-fields input,
  .checkout-submit
) {
  box-sizing: border-box;
  border: 14px solid transparent !important;
  border-image-source: var(--checkout-frame-image) !important;
  border-image-slice: 14 fill !important;
  border-image-width: 1 !important;
  border-image-repeat: stretch !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-clip: border-box !important;
  background-origin: border-box !important;
  box-shadow: none !important;
  clip-path: none !important;
  image-rendering: pixelated;
}

.checkout-order-hero {
  --checkout-frame-image: url("/images/pixel_frame_checkout_hero.svg?v=1");
  padding: 13px 15px;
}

.checkout-order-total {
  --checkout-frame-image: url("/images/pixel_frame_checkout_total.svg?v=1");
  padding: 5px 6px;
}

.checkout-main :is(.checkout-product, .checkout-customer, .checkout-payment, .checkout-policy) {
  --checkout-frame-image: url("/images/pixel_frame_checkout_surface.svg?v=1");
  padding: 14px;
}

.checkout-action {
  --checkout-frame-image: url("/images/pixel_frame_checkout_action.svg?v=1");
  padding: 9px 10px 11px;
}

.checkout-main .checkout-fields input {
  --checkout-frame-image: url("/images/pixel_frame_input.svg?v=1");
  height: 48px;
  padding: 0;
}

.checkout-main .checkout-fields input:focus,
.checkout-main .checkout-fields input:focus-visible {
  border-color: transparent !important;
  outline: 3px solid var(--ui-focus, #5a43bc) !important;
  outline-offset: 2px;
  filter: brightness(.97) saturate(1.08);
}

.checkout-main .checkout-submit {
  --checkout-frame-image: url("/images/pixel_frame_settings_primary.svg?v=1");
  min-height: 54px;
  padding: 0 12px;
  text-shadow: 1px 1px 0 rgb(73 26 144 / 40%);
  white-space: nowrap;
  transform: none;
  transition: filter .15s ease, transform .15s ease;
}

.checkout-main .checkout-submit:not(:disabled):hover {
  filter: brightness(1.03);
  transform: none;
}

.checkout-main .checkout-submit:not(:disabled):active {
  filter: brightness(.96);
  transform: translateY(1px);
}

.checkout-main .checkout-submit:disabled {
  cursor: not-allowed;
  filter: grayscale(.18);
  opacity: .5;
  transform: none;
}

.auth-panel.consent-gate h1 {
  font-size: var(--type-page-title);
}

.auth-panel.consent-gate .consent-gate-pixel-action,
.birth-profile-pixel-action--primary {
  --tamami-wide-action-frame: url("/images/pixel_frame_settings_primary.svg?v=1");
}

.birth-profile-pixel-action--secondary {
  --tamami-wide-action-frame: url("/images/pixel_frame_input.svg?v=1");
}

:is(
  .auth-panel.consent-gate .consent-gate-pixel-action,
  .birth-profile-pixel-action
) {
  appearance: none;
  box-sizing: border-box;
  width: 100%;
  height: 54px !important;
  min-height: 54px;
  padding: 0 12px;
  border: 14px solid transparent !important;
  border-image-source: var(--tamami-wide-action-frame) !important;
  border-image-slice: 14 fill !important;
  border-image-width: 1 !important;
  border-image-repeat: stretch !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-clip: border-box !important;
  background-origin: border-box !important;
  box-shadow: none !important;
  clip-path: none !important;
  color: #fff !important;
  text-align: center;
  text-shadow: 1px 1px 0 rgb(73 26 144 / 40%);
  white-space: nowrap;
  image-rendering: pixelated;
  transform: none;
  transition: filter .15s ease, transform .15s ease;
}

.birth-profile-pixel-action--secondary {
  color: #6842b5 !important;
  text-shadow: none;
}

:is(
  .auth-panel.consent-gate .consent-gate-pixel-action,
  .birth-profile-pixel-action
):hover {
  filter: brightness(1.03);
}

:is(
  .auth-panel.consent-gate .consent-gate-pixel-action,
  .birth-profile-pixel-action
):active {
  box-shadow: none !important;
  filter: brightness(.96);
  transform: translateY(1px);
}

:is(
  .auth-panel.consent-gate .consent-gate-pixel-action,
  .birth-profile-pixel-action
):focus-visible {
  outline: 3px solid var(--ui-focus, #5a43bc);
  outline-offset: 2px;
}

:is(
  .auth-panel.consent-gate .consent-gate-pixel-action,
  .birth-profile-pixel-action
):disabled {
  cursor: not-allowed;
  filter: grayscale(.18);
  opacity: .5;
  transform: none;
}

body:has(.unified-page-shell) :where(a, button, input, select, textarea, summary):focus-visible,
.auth-shell :where(a, button, input, select, textarea, summary):focus-visible {
  outline-color: var(--ui-focus);
}

@media (max-width: 639px) {
  :root { --pixel-surface-width: 8px; }

  :where(
    .auth-card,
    .conversation-onboarding,
    .account-form-card,
    .birth-profile-card,
    .birth-profile-form-card,
    .support-form,
    .support-reply-form,
    .settings-section,
    .legal-page,
    .checkout-result
  ) {
    padding-right: 16px;
    padding-left: 16px;
  }

  .operations-section,
  .legal-page,
  .profile-main > .profile-form,
  .auth-panel.consent-gate {
    padding: 18px 16px;
  }

  .wallet-summary { grid-template-columns: 1fr; }
  .wallet-pass-products,
  .wallet-credit-products { grid-template-columns: 1fr; }
  .report-product-card { background-size: auto 116% !important; }
  .checkout-order-hero { padding: 9px 5px; }
  .checkout-order-total { padding: 1px 3px; }
  .checkout-main .checkout-product { padding: 11px 10px; }
  .checkout-action { padding: 7px 6px 9px; }
}

@media (max-width: 350px) {
  .unified-page-shell {
    overflow-x: clip;
  }
  .report-main:not(.report-reading) .report-product-card { padding-right: 4px; padding-left: 4px; }
  .report-main:not(.report-reading) .report-product-card h3 { font-size: var(--type-body); }
  .report-main:not(.report-reading) .report-product-card p { font-size: var(--type-caption); }
}

/* Tamami decoration catalog: unified customer-facing pixel surfaces. */
.decoration-page-shell {
  --decoration-body-text: #6b667a;
  --decoration-focus: #5a43bc;
  position: relative;
  isolation: isolate;
}

.decoration-page-shell::before {
  position: absolute;
  z-index: -1;
  inset: min(1080px, 100vw) 0 0;
  content: "";
  pointer-events: none;
  background: #f4e9fb;
}

.decoration-page-shell .decoration-main {
  color: var(--ui-ink);
  padding-bottom: 112px;
}

.decoration-page-shell :where(
  .decoration-balance,
  .decoration-preview,
  .decoration-composition,
  .decoration-discovery,
  .decoration-filters,
  .decoration-card,
  .decoration-purchase-success,
  .decoration-preview .tamami-stage
) {
  border: var(--pixel-surface-width) solid transparent !important;
  border-image: var(--pixel-surface-frame) 8 stretch !important;
  border-radius: 0 !important;
  background-clip: border-box !important;
  background-origin: border-box !important;
  box-shadow: none !important;
  clip-path: var(--pixel-surface-clip) !important;
}

.decoration-page-shell :where(.decoration-section-tabs a, .decoration-shop-cta) {
  border-radius: 0 !important;
  box-shadow: 3px 3px 0 #d7c5eb;
}

.decoration-page-shell .decoration-balance {
  width: 100%;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  margin: 18px 0 24px;
  padding: 14px 18px;
  background-color: var(--ui-surface) !important;
  background-image: none;
  color: var(--ui-ink);
  text-align: left;
}

.decoration-page-shell .decoration-balance span {
  display: inline-flex;
  gap: 15px;
  align-items: center;
  color: #8064a8;
  font-size: var(--type-body);
  letter-spacing: .04em;
}

.decoration-page-shell .decoration-balance span img {
  width: 28px;
  height: auto;
  object-fit: contain;
  image-rendering: pixelated;
}

.decoration-page-shell .decoration-balance strong { color: var(--ui-heading); }

.decoration-page-shell .decoration-preview {
  background-color: #f5edfc !important;
  background-image: none;
}

.decoration-page-shell .decoration-preview-copy > p,
.decoration-page-shell .decoration-shop .date-label {
  color: #9a70df;
  font-size: var(--type-label);
  font-weight: 600;
  letter-spacing: .1em;
}

.decoration-page-shell :where(.decoration-preview-copy h2, .decoration-shop h2, .decoration-card h3) {
  color: var(--ui-heading);
  text-wrap: auto;
}

.decoration-page-shell .decoration-preview-copy span,
.decoration-page-shell .decoration-shop > header > span {
  color: var(--ui-muted);
}

.decoration-page-shell .decoration-preview .tamami-stage {
  background-clip: border-box !important;
}

.decoration-page-shell .decoration-purchase-success {
  background-color: var(--ui-surface) !important;
}

.decoration-page-shell .decoration-composition {
  background-color: rgb(255 250 255 / 96%) !important;
  background-image: none;
}

.decoration-page-shell .decoration-purchase-success > a {
  color: var(--ui-accent-strong);
}

.decoration-page-shell .decoration-discovery {
  display: grid;
  gap: 20px;
  margin: 18px 0 24px;
  padding: 22px;
  background-color: rgb(255 250 255 / 96%) !important;
  background-image: none;
}

.decoration-search { display: grid; gap: 7px; }
.decoration-search > label,
.decoration-filter-group > strong {
  color: #6a469f;
  font-size: var(--type-small);
  font-weight: 600;
  letter-spacing: .025em;
}
.decoration-search > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}
.decoration-search input {
  min-width: 0;
  min-height: 48px;
  padding: 0 15px;
  border: 2px solid #c6afe2;
  border-radius: 0;
  background: #fff;
  color: #42295f;
  font-size: var(--type-body);
  font-weight: 600;
}
.decoration-search input::placeholder { color: #a795b4; font-weight: 600; }
.decoration-search button {
  min-width: 78px;
  min-height: 48px;
  padding: 0 18px;
  border: 2px solid #5632ad;
  border-radius: 0;
  background: #7951c7;
  box-shadow: 4px 4px 0 #c2afe2;
  color: #fff;
  font-size: var(--type-body);
  font-weight: 600;
  cursor: pointer;
}
.decoration-search button:active { box-shadow: 1px 1px 0 #c2afe2; transform: translate(3px, 3px); }

.decoration-filter-group { display: grid; min-width: 0; gap: 9px; }
.decoration-chip-scroller,
.decoration-chip-row {
  display: flex;
  gap: 8px;
  padding: 3px 2px 5px;
}
.decoration-chip-scroller {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
}
.decoration-filter-chip {
  display: inline-flex;
  min-height: 42px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 13px;
  border: 2px solid #c8b4e2;
  border-radius: 0;
  background: #fff;
  box-shadow: 3px 3px 0 #e0d4ef;
  color: #75568f;
  font-size: var(--type-label);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  scroll-snap-align: start;
}
.decoration-filter-chip > span {
  min-width: 21px;
  padding: 2px 5px;
  background: #eee5f7;
  color: #8b72a1;
  font-size: var(--type-caption);
  text-align: center;
}
.decoration-filter-chip:hover { border-color: #8d67c2; color: #5e3894; }
.decoration-filter-chip.is-active {
  border-color: #5632ad;
  background: #7450bb;
  box-shadow: 3px 3px 0 #bca5dc;
  color: #fff;
}
.decoration-filter-chip.is-active > span { background: rgb(255 255 255 / 18%); color: #fff4b5; }

.decoration-theme-filter {
  border: 2px solid #d3c2e6;
  background: rgb(255 255 255 / 66%);
}
.decoration-theme-filter > summary {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 14px;
  color: #694694;
  font-size: var(--type-small);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.decoration-theme-filter > summary::-webkit-details-marker { display: none; }
.decoration-theme-filter > summary::after { content: "+"; color: #956cc3; font-size: var(--type-section-title); }
.decoration-theme-filter[open] > summary::after { content: "−"; }
.decoration-theme-filter > summary small {
  margin-left: auto;
  color: #9b88aa;
  font-size: var(--type-caption);
  font-weight: 600;
}
.decoration-theme-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 3px 14px 16px;
  border-top: 1px dotted #d5c5e5;
}
.decoration-secondary-filters { display: grid; grid-template-columns: 1.2fr .8fr; gap: 18px; }
.decoration-secondary-filters .decoration-filter-group:last-child { grid-column: 1 / -1; }
.decoration-chip-row { flex-wrap: wrap; }

.decoration-applied-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  padding-top: 14px;
  border-top: 2px dotted #d5c3e5;
}
.decoration-applied-filters > strong { margin-right: 3px; color: #806499; font-size: var(--type-caption); }
.decoration-applied-filters > a {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid #b99bd8;
  background: #f2e9fa;
  color: #67418f;
  font-size: var(--type-caption);
  font-weight: 600;
  text-decoration: none;
}
.decoration-applied-filters > a span { color: #9b5d92; font-size: var(--type-body); }
.decoration-applied-filters > .decoration-applied-filters__clear {
  border-color: transparent;
  background: transparent;
  color: #8c718f;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.decoration-page-shell .decoration-filters {
  background-color: rgb(255 250 255 / 96%) !important;
  background-image: none;
}

.decoration-page-shell .decoration-filters label {
  color: var(--ui-muted);
  letter-spacing: .02em;
}

.decoration-page-shell .decoration-filters select {
  border: 2px solid #cbb6e5 !important;
  border-radius: 0 !important;
  background-color: var(--ui-surface) !important;
  color: var(--ui-ink) !important;
  box-shadow: none !important;
}

.decoration-page-shell :where(
  .decoration-filters button,
  .decoration-card-actions details summary,
  .decoration-buy-button,
  .decoration-apply-button,
  .decoration-purchase-success .point-primary-button
) {
  border: 2px solid #5632ad !important;
  border-radius: 0 !important;
  background: #7951c7 !important;
  box-shadow: 4px 4px 0 #bba3df !important;
  color: #fff !important;
  clip-path: none !important;
}

.decoration-page-shell :where(
  .decoration-filters button,
  .decoration-card-actions details summary,
  .decoration-buy-button,
  .decoration-apply-button,
  .decoration-purchase-success .point-primary-button
):active {
  box-shadow: 1px 1px 0 #bba3df !important;
  transform: translate(3px, 3px);
}

.decoration-page-shell .decoration-reset-button {
  min-height: 38px;
  border: 2px solid #896bcc !important;
  border-radius: 0 !important;
  background: var(--ui-surface) !important;
  box-shadow: 3px 3px 0 #ddd0f1 !important;
  color: var(--ui-accent-strong) !important;
}

.decoration-page-shell .decoration-reset-button:active {
  box-shadow: 1px 1px 0 #ddd0f1 !important;
  transform: translate(2px, 2px);
}

.decoration-page-shell .decoration-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.decoration-page-shell .decoration-card {
  --decoration-card-surface: #f8f0fd;
  --decoration-card-accent: #7650c6;
  grid-template-rows: 132px minmax(0, 1fr) auto;
  background-color: var(--decoration-card-surface) !important;
  background-image: none;
}

.decoration-page-shell .decoration-card:nth-child(3n + 2) {
  --decoration-card-surface: #fff7e8;
  --decoration-card-accent: #b87925;
}

.decoration-page-shell .decoration-card:nth-child(3n) {
  --decoration-card-surface: #fff0f8;
  --decoration-card-accent: #bd4d87;
}

.decoration-page-shell .decoration-card.is-selected {
  outline: 2px solid #e4ad3f;
  outline-offset: 2px;
}

.decoration-page-shell .decoration-card-preview {
  border-bottom: 2px dotted color-mix(in srgb, var(--decoration-card-accent) 38%, transparent);
  background: color-mix(in srgb, var(--decoration-card-accent) 8%, #fff);
}

.decoration-page-shell .decoration-card-preview > span {
  border-radius: 0;
  box-shadow: 4px 4px 0 hsl(var(--decor-hue) 35% 33%);
}

.decoration-page-shell .decoration-card-preview small {
  border: 1px solid color-mix(in srgb, var(--decoration-card-accent) 34%, transparent);
  border-radius: 0;
  background: rgb(255 250 255 / 92%);
  color: var(--decoration-card-accent);
}

.decoration-page-shell .decoration-card-copy > span { color: var(--ui-muted); }
.decoration-page-shell .decoration-card-copy > strong { color: var(--decoration-card-accent); }

.decoration-page-shell .decoration-confirm {
  border: 2px solid #cbb6e5;
  border-radius: 0;
  background: var(--ui-surface-soft);
}

.decoration-page-shell .decoration-state-badge {
  border: 2px solid #a98ace;
  border-radius: 0;
  background: var(--ui-surface);
  color: var(--ui-accent-strong);
}

.decoration-page-shell :where(a, button, input, select, summary):focus-visible {
  outline: 3px solid var(--decoration-focus) !important;
  outline-offset: 2px;
}

@media (max-width: 820px) {
  .decoration-page-shell .decoration-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 639px) {
  .decoration-page-shell .decoration-preview,
  .decoration-page-shell .decoration-filters,
  .decoration-page-shell .decoration-discovery {
    padding-right: 16px;
    padding-left: 16px;
  }

  .decoration-page-shell .decoration-discovery { gap: 17px; }
  .decoration-secondary-filters { grid-template-columns: 1fr; }
  .decoration-secondary-filters .decoration-filter-group:last-child { grid-column: auto; }
  .decoration-theme-grid { flex-wrap: nowrap; overflow-x: auto; }
  .decoration-chip-scroller { margin-right: -16px; padding-right: 16px; }

  .decoration-page-shell .decoration-balance {
    margin-top: 14px;
    padding: 12px 14px;
  }
}

@media (max-width: 520px) {
  .decoration-search > div { grid-template-columns: minmax(0, 1fr) 66px; }
  .decoration-search button { min-width: 0; padding: 0 10px; }

  .decoration-shop > header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .decoration-page-shell .decoration-grid {
    grid-template-columns: 1fr;
  }

  .decoration-page-shell .decoration-card {
    grid-template-columns: 112px minmax(0, 1fr);
    grid-template-rows: auto auto;
  }

  .decoration-page-shell .decoration-card-preview {
    min-height: 164px;
    grid-row: 1 / 3;
  }

  .decoration-page-shell .decoration-card-actions {
    grid-column: 2;
  }
}

/* Public landing product previews share the report catalog's pixel-card language. */
.guest-preview-grid.report-catalog-grid { margin-top: 28px; }
.guest-product-card { min-height: 340px; }
.guest-product-card .guest-product-icon { width: 112px; height: 112px; margin-top: -5px; }
.guest-product-today .guest-product-icon { transform: scale(1.08); }
.guest-product-card .report-product-copy { justify-content: flex-start; }
.guest-product-card .report-product-copy p { max-width: 250px; }
.guest-product-card .guest-preview-status { color: #6842b5; }
.guest-product-card .guest-preview-status > span:first-child { letter-spacing: -.01em; }
.guest-product-card .guest-preview-status .report-card-status-arrow {
  opacity: .82;
  transform: translateX(0);
}
.guest-preview-available-badge { border-color: #a989dd; background: #eee2fb; }
.guest-preview-upcoming-badge { border-color: #cfc0df; background: rgb(255 250 255 / 86%); color: #806d99; }
.guest-product-card.is-upcoming .report-product-icon,
.guest-product-card.is-upcoming .report-product-copy { opacity: .72; }
.guest-product-card .guest-preview-status--upcoming { justify-content: center; color: #907da5; }

@media (max-width: 639px) {
  .guest-preview-grid.report-catalog-grid { margin-top: 22px; }
  .guest-product-card { min-height: 218px; }
  .guest-product-card .guest-product-icon { width: 88px; height: 88px; margin-top: 8px; }
  .guest-product-card .report-product-copy p { max-width: 270px; }
}

/* Recent daily-fortune history: the three period tabs stay dedicated to period selection. */
.fortune-history-entry {
  --fortune-entry-frame: url("/images/dashboard_shortcut_frame.svg?v=1");
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: 58px;
  grid-template-columns: 44px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 11px;
  margin: 28px 0 0;
  padding: 10px 14px;
  border: 14px solid transparent;
  border-image-source: var(--fortune-entry-frame);
  border-image-slice: 14 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  color: #5d3aa8;
  text-decoration: none;
  box-shadow: none;
  transition: filter .15s ease, transform .15s ease;
}
.fortune-history-entry > * { position: relative; z-index: 1; }
.fortune-history-entry:hover {
  transform: translateY(-1px);
  filter: brightness(1.02);
}
.fortune-history-entry:focus-visible { outline: 3px solid #5a43bc; outline-offset: 3px; }
.fortune-history-entry__icon {
  position: relative;
  top: -2px;
  display: grid;
  width: 44px;
  height: 38px;
  place-items: center;
}
.fortune-history-entry__icon img {
  display: block;
  width: 44px;
  height: auto;
  image-rendering: pixelated;
}
.fortune-history-entry__copy { display: grid; min-width: 0; gap: 2px; }
.fortune-history-entry__copy strong { font-size: var(--type-body); letter-spacing: -.02em; }
.fortune-history-entry__copy small { color: #8b769f; font-size: var(--type-caption); line-height: 1.4; }
.fortune-history-entry > svg { width: 16px; height: 16px; }
.fortune-entry-list { display: grid; gap: 10px; margin-top: 28px; }
.fortune-entry-list .fortune-history-entry { margin-top: 0; }
.fortune-history-entry--selected-day .fortune-history-entry__icon img { width: 34px; height: 34px; object-fit: contain; }
.fortune-history-main { padding-bottom: 72px; }
.fortune-history-policy {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin: 0 0 20px;
  padding: 16px 18px;
  border: 1px solid #d4c1ec;
  border-radius: 14px;
  background: rgb(249 244 253 / 95%);
  box-shadow: 0 10px 22px rgb(84 49 135 / 8%);
}
.fortune-history-policy__icon {
  display: grid;
  width: 42px;
  height: 42px;
  border: 1px solid #bca1df;
  border-radius: 50%;
  background: #fff;
  color: #7650c6;
  place-items: center;
}
.fortune-history-policy__icon svg { width: 20px; height: 20px; }
.fortune-history-policy h2 { margin: 0 0 5px; color: #533095; font-size: var(--type-body); }
.fortune-history-policy p { margin: 0; color: #776689; font-size: var(--type-label); line-height: 1.65; word-break: keep-all; }
.fortune-history-policy p strong { color: #6842b5; }
.fortune-history-calendar {
  margin: 0 0 24px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline proximity;
  scrollbar-width: thin;
  scrollbar-color: #bca2dd transparent;
  -webkit-overflow-scrolling: touch;
}
.fortune-history-calendar:focus-visible { outline: 3px solid #5a43bc; outline-offset: 3px; }
.fortune-history-calendar ol {
  display: grid;
  width: max-content;
  min-width: 100%;
  grid-template-columns: repeat(30, 72px);
  gap: 7px;
  margin: 0;
  padding: 3px 3px 10px;
  list-style: none;
}
.fortune-history-date {
  display: grid;
  scroll-snap-align: start;
  min-height: 82px;
  align-content: center;
  justify-items: center;
  gap: 3px;
  padding: 8px 5px;
  border: 1px solid #d7cae6;
  border-radius: 10px;
  background: rgb(255 254 255 / 92%);
  color: #73569f;
  text-decoration: none;
  box-shadow: 0 4px 10px rgb(75 45 121 / 5%);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
a.fortune-history-date:hover { border-color: #9e77d0; transform: translateY(-2px); }
a.fortune-history-date:focus-visible { outline: 3px solid #5a43bc; outline-offset: 2px; }
.fortune-history-date small { font-size: var(--type-caption); font-weight: 600; }
.fortune-history-date strong { color: #51308e; font-size: var(--type-section-title-lg); line-height: 1; }
.fortune-history-date span { font-size: var(--type-caption); font-weight: 600; }
.fortune-history-date.is-today small { color: #b17d19; }
.fortune-history-date.is-selected {
  border-color: #7650c6;
  background: #7650c6;
  color: #fff;
  box-shadow: 0 7px 14px rgb(88 53 152 / 18%), inset 2px 2px 0 #9e81d4;
}
.fortune-history-date.is-selected strong { color: #fff; }
.fortune-history-date--missing {
  border-style: dashed;
  background: rgb(247 243 249 / 75%);
  color: #aa9db4;
  box-shadow: none;
}
.fortune-history-date--missing strong { color: #a89bb2; }

.fortune-history-detail {
  display: grid;
  gap: 24px;
  padding: clamp(20px, 4vw, 34px);
  border: 14px solid transparent;
  border-image: url("/images/pixel_frame_purple.svg") 14 stretch;
  background: rgb(255 253 255 / 93%);
  background-clip: padding-box;
  box-shadow: 0 18px 34px rgb(76 43 127 / 10%);
}
.fortune-history-detail__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding-bottom: 20px;
  border-bottom: 1px dashed #cdb8e5;
}
.fortune-history-detail__header p { margin: 0 0 7px; color: #9478bb; font-size: var(--type-caption); font-weight: 600; letter-spacing: .04em; }
.fortune-history-detail__header h2 { margin: 0; color: #4f2aa5; font-size: clamp(var(--type-section-title-lg), 4.8vw, var(--type-display-sm)); line-height: 1.35; letter-spacing: -.035em; word-break: keep-all; }
.fortune-history-detail__score {
  display: grid;
  width: 74px;
  height: 74px;
  border: 2px solid #8e6bc4;
  border-radius: 50%;
  background: #f4ecfc;
  color: #5d37ac;
  box-shadow: inset 0 0 0 4px #fff;
  place-items: center;
}
.fortune-history-detail__score strong { font-size: var(--type-page-title); line-height: 1; }
.fortune-history-detail__score small { margin-left: 2px; font-size: var(--type-caption); }
.fortune-history-narrative { display: grid; gap: 22px; }
.fortune-history-narrative .fortune-domain { margin-bottom: -12px; }
.fortune-history-detail__footer { display: flex; justify-content: center; padding-top: 4px; }
.fortune-history-detail__footer a,
.fortune-history-empty a {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 15px;
  border: 1px solid #896bcc;
  border-radius: 8px;
  background: #fff;
  color: #6742b1;
  font-size: var(--type-label);
  font-weight: 600;
  text-decoration: none;
}
.fortune-history-detail__footer a:focus-visible,
.fortune-history-empty a:focus-visible { outline: 3px solid #5a43bc; outline-offset: 3px; }
.fortune-history-detail__footer svg { width: 15px; height: 15px; }

.fortune-history-empty {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: clamp(34px, 7vw, 60px) 22px;
  border: 1px dashed #bfa6df;
  border-radius: 16px;
  background: rgb(255 253 255 / 90%);
  text-align: center;
}
.fortune-history-empty img { width: 112px; height: 112px; object-fit: contain; image-rendering: pixelated; }
.fortune-history-empty h2 { margin: 0; color: #5632a2; font-size: clamp(var(--type-section-title), 4.8vw, var(--type-page-title)); }
.fortune-history-empty > p { max-width: 410px; margin: 0 0 8px; color: #806e90; font-size: var(--type-small); line-height: 1.75; word-break: keep-all; }

@media (max-width: 639px) {
  .fortune-history-entry { grid-template-columns: 36px minmax(0, 1fr) 14px; gap: 8px; margin-top: 22px; padding-inline: 11px; }
  .fortune-history-entry__icon { width: 36px; height: 32px; }
  .fortune-history-entry__icon img { width: 36px; }
  .fortune-history-entry--selected-day .fortune-history-entry__icon img { width: 32px; height: 32px; }
  .fortune-history-entry__copy small { font-size: var(--type-caption); }
  .fortune-history-policy { grid-template-columns: 38px minmax(0, 1fr); gap: 11px; padding: 14px; }
  .fortune-history-policy__icon { width: 36px; height: 36px; }
  .fortune-history-calendar ol { grid-template-columns: repeat(30, 66px); }
  .fortune-history-date { min-height: 76px; }
  .fortune-history-detail { gap: 20px; border-width: 10px; padding: 18px 13px 24px; }
  .fortune-history-detail__header { gap: 10px; }
  .fortune-history-detail__score { width: 62px; height: 62px; }
  .fortune-history-detail__score strong { font-size: var(--type-section-title-lg); }
  .fortune-history-narrative { gap: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .fortune-history-entry,
  .fortune-history-date { transition: none; }
}

/* Relationship core report */
.relationship-core-report { display: grid; gap: 18px; margin-top: 24px; }
.relationship-core-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 5vw, 48px);
  border: 1px solid #7f5ac8;
  border-radius: 18px;
  background: #8158ca;
  box-shadow: 0 14px 36px rgb(77 39 147 / 18%);
  color: #fff;
}
.relationship-core-hero::after {
  position: absolute;
  right: -28px;
  bottom: -54px;
  width: 180px;
  height: 180px;
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: 50%;
  box-shadow: 0 0 0 22px rgb(255 255 255 / 6%), 0 0 0 48px rgb(255 255 255 / 4%);
  content: "";
}
.relationship-core-kicker {
  position: relative;
  z-index: 1;
  display: inline-flex;
  padding: 6px 10px;
  border: 1px solid rgb(255 255 255 / 35%);
  border-radius: 999px;
  background: rgb(255 255 255 / 12%);
  font-size: var(--type-label);
  font-weight: 600;
  letter-spacing: .08em;
}
.relationship-core-hero h2 {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 18px 0 12px;
  color: #fff;
  font-size: clamp(var(--type-page-title), 6.0vw, var(--type-display-md));
  line-height: 1.3;
  letter-spacing: -.035em;
  word-break: keep-all;
}
.relationship-core-hero p { position: relative; z-index: 1; max-width: 650px; margin: 0; color: #eee6ff; font-size: var(--type-body); line-height: 1.7; }
.relationship-core-section { padding: clamp(22px, 4vw, 34px); border: 1px solid #ddcef3; border-radius: 14px; background: rgb(255 253 255 / 94%); box-shadow: 0 8px 26px rgb(91 51 155 / 8%); }
.relationship-core-section > header { display: flex; align-items: center; gap: 13px; margin-bottom: 24px; }
.relationship-core-number { display: grid; width: 42px; height: 42px; border-radius: 11px; background: #f0e6fb; color: #744abb; font-size: var(--type-body); font-weight: 600; place-items: center; }
.relationship-core-section > header p { margin: 0 0 2px; color: #aa88d5; font-size: var(--type-caption); font-weight: 600; letter-spacing: .16em; }
.relationship-core-section > header h2 { margin: 0; color: #4d2b95; font-size: var(--type-section-title-lg); }
.relationship-role-map { display: grid; grid-template-columns: minmax(0, 1fr) 62px minmax(0, 1fr); align-items: stretch; }
.relationship-role-map article { display: grid; align-content: center; gap: 9px; min-height: 150px; padding: 22px; border: 1px solid #eadff7; border-radius: 13px; background: #fcf8ff; }
.relationship-role-map article:last-child { background: #fff8fc; }
.relationship-role-map article > span { color: #a17bc9; font-size: var(--type-label); font-weight: 600; }
.relationship-role-map article > strong { color: #59416e; font-size: var(--type-subtitle); line-height: 1.7; word-break: keep-all; }
.relationship-role-link { display: flex; align-items: center; justify-content: center; gap: 2px; color: #9a70df; }
.relationship-role-link i { color: #e0b536; font-size: var(--type-caption); font-style: normal; }
.relationship-role-link b { font-size: var(--type-section-title-lg); }
.relationship-core-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.relationship-core-stats > div { display: flex; min-height: 64px; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 18px; border: 1px solid #eadff7; border-radius: 11px; background: #fff; }
.relationship-core-stats > div > span:first-child { color: #806693; font-size: var(--type-small); font-weight: 600; }
.relationship-stars { display: inline-flex; gap: 3px; }
.relationship-stars i { color: #ded5e6; font-size: var(--type-card-title); font-style: normal; }
.relationship-stars i.is-active { color: #f2bd3d; filter: drop-shadow(0 2px 3px rgb(224 181 54 / 25%)); }
.relationship-difficulty-badge { padding: 6px 10px; border-radius: 999px; font-size: var(--type-caption); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.relationship-difficulty-badge--easy { background: #e5f7ee; color: #2e8c60; }
.relationship-difficulty-badge--normal { background: #eee8ff; color: #7052b6; }
.relationship-difficulty-badge--hard { background: #fff0d6; color: #b66d20; }
.relationship-difficulty-badge--extreme { background: #fde5eb; color: #c14f70; }
.relationship-effects { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.relationship-effect { padding: 18px; border-radius: 11px; }
.relationship-effect--buff { border: 1px solid #cfeadf; background: #f3fbf7; }
.relationship-effect--debuff { border: 1px solid #f1d9e2; background: #fff7fa; }
.relationship-effect > span { color: #695778; font-size: var(--type-label); font-weight: 600; }
.relationship-effect ul { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.relationship-effect li { display: flex; gap: 8px; color: #6e5d7b; font-size: var(--type-small); line-height: 1.5; }
.relationship-effect li i { display: grid; flex: 0 0 18px; height: 18px; border-radius: 50%; font-size: var(--type-label); font-style: normal; font-weight: 600; place-items: center; }
.relationship-effect--buff li i { background: #d9f3e7; color: #328560; }
.relationship-effect--debuff li i { background: #f8e1e9; color: #c65c7d; }
.relationship-chemistry-explanation { margin-top: 14px; padding: 22px; border: 1px solid #e6daf5; border-radius: 12px; background: #fcf9fc; }
.relationship-chemistry-explanation__heading { display: flex; align-items: center; gap: 9px; margin-bottom: 13px; }
.relationship-chemistry-explanation__heading i { display: grid; width: 25px; height: 25px; border-radius: 50%; background: #efe4fb; color: #8b5fc7; font-size: var(--type-label); font-style: normal; place-items: center; }
.relationship-chemistry-explanation__heading h3 { margin: 0; color: #5d3a91; font-size: var(--type-body-lg); }
.relationship-chemistry-explanation > p { margin: 9px 0 0; color: #675675; font-size: var(--type-body); line-height: 1.78; word-break: keep-all; }
.relationship-core-prose { position: relative; }
.relationship-core-prose::before { position: absolute; top: 34px; right: 36px; color: #eadb7d; content: "✦"; font-size: var(--type-card-title); }
.relationship-core-paragraph { display: grid; gap: 0; padding-left: 55px; }
.relationship-core-paragraph p { position: relative; margin: 0; padding: 0 0 17px 22px; border-left: 1px solid #e4d8f2; color: #604f70; font-size: var(--type-body-lg); line-height: 1.82; word-break: keep-all; }
.relationship-core-paragraph p::before { position: absolute; top: .63em; left: -4px; width: 7px; height: 7px; border: 2px solid #fff; border-radius: 50%; background: #a47bd9; box-shadow: 0 0 0 1px #d7c4ec; content: ""; }
.relationship-core-paragraph p:last-child { padding-bottom: 0; }
.relationship-core-emotion .relationship-core-number { background: #ffe8f0; color: #bd557b; }
.relationship-core-emotion .relationship-core-paragraph p::before { background: #d87599; }
.relationship-core-reality .relationship-core-number { background: #e5f5ed; color: #3d8b68; }
.relationship-core-reality .relationship-core-paragraph p::before { background: #57a27e; }
.relationship-core-flow .relationship-core-number { background: #fff0d9; color: #b77629; }
.relationship-core-flow .relationship-core-paragraph p::before { background: #dca64b; }
.relationship-core-advice { position: relative; overflow: hidden; padding: clamp(24px, 4vw, 38px); border: 1px solid #7651b4; border-radius: 16px; background: #7651b4; box-shadow: 0 12px 30px rgb(74 42 129 / 16%); color: #fff; }
.relationship-core-advice::after { position: absolute; right: -36px; bottom: -62px; width: 180px; height: 180px; border: 1px solid rgb(255 255 255 / 14%); border-radius: 50%; box-shadow: 0 0 0 25px rgb(255 255 255 / 5%); content: ""; }
.relationship-core-advice > header { position: relative; z-index: 1; display: flex; align-items: center; gap: 13px; margin-bottom: 18px; }
.relationship-core-advice > header > span { display: grid; flex: 0 0 42px; height: 42px; border: 1px solid rgb(255 255 255 / 28%); border-radius: 50%; background: rgb(255 255 255 / 10%); color: #f2cd63; place-items: center; }
.relationship-core-advice header p { margin: 0 0 2px; color: #d9c8f2; font-size: var(--type-caption); font-weight: 600; letter-spacing: .16em; }
.relationship-core-advice h2 { margin: 0; color: #fff; font-size: var(--type-section-title-lg); }
.relationship-core-advice > div { position: relative; z-index: 1; display: grid; gap: 10px; max-width: 760px; }
.relationship-core-advice > div p { margin: 0; color: #f6f0ff; font-size: var(--type-body); line-height: 1.8; word-break: keep-all; }

@media (max-width: 639px) {
  .relationship-core-report { gap: 12px; }
  .relationship-core-hero { padding: 26px 20px; border-radius: 14px; }
  .relationship-core-hero h2 { margin-top: 14px; font-size: var(--type-section-title-lg); }
  .relationship-core-section { padding: 18px 14px; }
  .relationship-role-map { grid-template-columns: 1fr; gap: 8px; }
  .relationship-role-map article { min-height: 0; padding: 17px; }
  .relationship-role-link { height: 28px; transform: rotate(90deg); }
  .relationship-core-stats, .relationship-effects { grid-template-columns: 1fr; }
  .relationship-chemistry-explanation { padding: 17px; }
  .relationship-core-paragraph { padding-left: 0; }
  .relationship-core-paragraph p { padding-left: 17px; font-size: var(--type-body); }
  .relationship-core-advice { padding: 22px 18px; }
  .relationship-core-advice > div p { font-size: var(--type-body); }
}

/* Relationship deep dive — friend edition */
.friend-deep-dive { display: grid; gap: 18px; margin-top: 24px; color: #574566; }
.friend-deep-dive-hero {
  position: relative;
  display: grid;
  min-height: 300px;
  overflow: hidden;
  align-items: center;
  padding: clamp(32px, 6vw, 58px);
  border: 1px solid #7850bd;
  border-radius: 20px;
  background: #6e49b1;
  box-shadow: 0 16px 38px rgb(71 36 132 / 20%);
  color: #fff;
}
.friend-deep-dive-hero::before {
  position: absolute;
  width: 270px;
  height: 270px;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 50%;
  box-shadow: 0 0 0 26px rgb(255 255 255 / 5%), 0 0 0 58px rgb(255 255 255 / 3%);
  content: "";
  inset: auto -45px -82px auto;
}
.friend-deep-dive-hero > div:first-child { position: relative; z-index: 1; }
.friend-deep-dive-edition { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid rgb(255 255 255 / 38%); border-radius: 999px; background: rgb(255 255 255 / 12%); font-size: var(--type-caption); font-weight: 600; letter-spacing: .12em; }
.friend-deep-dive-edition i { color: #ffe37d; font-style: normal; }
.friend-deep-dive-hero p { margin: 22px 0 3px; color: #e9dcff; font-size: var(--type-body); font-weight: 600; }
.friend-deep-dive-hero h2 { margin: 0 0 16px; color: #fff; font-size: clamp(var(--type-page-title-lg), 7.2vw, var(--type-display-lg)); line-height: 1.22; letter-spacing: -.045em; word-break: keep-all; }
.friend-deep-dive-hero > div:first-child > span:last-child { color: #f2eafa; font-size: var(--type-small); line-height: 1.6; }
.friend-deep-dive-emblem { position: absolute; right: clamp(30px, 8vw, 88px); bottom: 42px; z-index: 1; display: grid; width: 126px; height: 126px; border: 1px solid rgb(255 255 255 / 35%); border-radius: 50%; background: rgb(255 255 255 / 10%); box-shadow: 0 0 0 10px rgb(255 255 255 / 6%); place-items: center; transform: rotate(-7deg); }
.friend-deep-dive-emblem span, .friend-deep-dive-emblem b { position: absolute; color: #fff; font-size: var(--type-page-title-lg); font-weight: 600; }
.friend-deep-dive-emblem span { top: 28px; left: 28px; }
.friend-deep-dive-emblem b { right: 26px; bottom: 26px; }
.friend-deep-dive-emblem i { color: #ffe273; font-size: var(--type-display-md); font-style: normal; font-weight: 600; }
.friend-chapter { padding: clamp(24px, 4.5vw, 38px); border: 1px solid #dfd1ef; border-radius: 16px; background: rgb(255 253 255 / 96%); box-shadow: 0 8px 28px rgb(80 47 131 / 8%); }
.friend-chapter-heading { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.friend-chapter-heading > span { display: grid; width: 58px; height: 48px; border-radius: 12px; background: #efe5fb; color: #714bb2; font-size: var(--type-caption); font-weight: 600; letter-spacing: .06em; line-height: 1.25; text-align: center; place-items: center; }
.friend-chapter-heading p { margin: 0 0 2px; color: #b18ad2; font-size: var(--type-caption); font-weight: 600; letter-spacing: .15em; }
.friend-chapter-heading h2 { margin: 0; color: #4d2c8d; font-size: var(--type-section-title-lg); letter-spacing: -.03em; }
.friend-bond-reason { position: relative; display: grid; min-height: 148px; align-content: center; gap: 12px; overflow: hidden; padding: 28px clamp(22px, 4vw, 38px); border: 1px solid #dfc9f2; border-radius: 15px; background: #fdf5fd; }
.friend-bond-reason::after { position: absolute; right: 24px; color: #ead45e; content: "✦"; font-size: var(--type-page-title); opacity: .75; }
.friend-bond-reason span { color: #9571bd; font-size: var(--type-label); font-weight: 600; }
.friend-bond-reason strong { max-width: 760px; color: #52356f; font-size: clamp(var(--type-section-title), 3.96vw, var(--type-page-title)); line-height: 1.5; letter-spacing: -.025em; word-break: keep-all; }
.friend-view-grid { display: grid; grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr); align-items: stretch; margin-top: 12px; }
.friend-view-grid article { padding: 22px; border: 1px solid #e8def3; border-radius: 13px; background: #fff; }
.friend-view-grid article:last-child { background: #fff8fb; }
.friend-view-grid article span { color: #a479c2; font-size: var(--type-label); font-weight: 600; }
.friend-view-grid article p { margin: 9px 0 0; color: #604c70; font-size: var(--type-body); font-weight: 600; line-height: 1.75; word-break: keep-all; }
.friend-view-link { display: grid; color: #a47bd5; font-size: var(--type-section-title); place-items: center; }
.friend-genre-card { display: grid; grid-template-columns: 138px minmax(0, 1fr); gap: 24px; align-items: center; margin-top: 12px; padding: 20px; border: 1px solid #ebd9bd; border-radius: 14px; background: #fffbf1; }
.friend-genre-poster { position: relative; display: grid; min-height: 150px; align-content: center; padding: 18px; border: 1px solid #b7789e; border-radius: 10px; background: #a65c9f; box-shadow: 5px 5px 0 #ead6ae; color: #fff; }
.friend-genre-poster span { font-size: var(--type-small); font-weight: 600; letter-spacing: .2em; }
.friend-genre-poster strong { font-size: var(--type-section-title-lg); line-height: 1.05; }
.friend-genre-poster i { position: absolute; right: 15px; bottom: 13px; color: #ffe27a; font-size: var(--type-section-title); font-style: normal; }
.friend-genre-card > div:last-child > span { color: #aa7c54; font-size: var(--type-caption); font-weight: 600; }
.friend-genre-card h3 { margin: 5px 0 9px; color: #69417d; font-size: var(--type-section-title-lg); }
.friend-genre-card p { margin: 0; color: #6d5b6d; font-size: var(--type-body); line-height: 1.7; word-break: keep-all; }
.friend-genre-card ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 13px 0 0; padding: 0; list-style: none; }
.friend-genre-card li { padding: 5px 8px; border-radius: 999px; background: #f3e7f5; color: #76508c; font-size: var(--type-caption); font-weight: 600; }
.friend-position-block > h3 { margin: 0 0 12px; color: #72558c; font-size: var(--type-body); }
.friend-position-grid { display: grid; grid-template-columns: minmax(0, 1fr) 76px minmax(0, 1fr); align-items: stretch; }
.friend-position-grid article { display: grid; min-height: 130px; align-content: center; gap: 8px; padding: 22px; border: 1px solid #e6d8f3; border-radius: 14px; background: #fcf8ff; }
.friend-position-grid article:last-child { background: #fffbfd; }
.friend-position-grid article span { color: #a37cc2; font-size: var(--type-caption); font-weight: 600; }
.friend-position-grid article strong { color: #593e70; font-size: var(--type-subtitle); line-height: 1.55; word-break: keep-all; }
.friend-position-grid > div { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 2px; color: #9d75cf; }
.friend-position-grid > div i { color: #e5bf49; font-size: var(--type-caption); font-style: normal; }
.friend-position-grid > div span { font-size: var(--type-caption); font-weight: 600; letter-spacing: .1em; }
.friend-frequency { display: grid; grid-template-columns: minmax(230px, .8fr) minmax(0, 1.6fr); gap: 22px; margin-top: 14px; padding: 24px; border: 1px solid #d7e2ee; border-radius: 14px; background: #f8fbff; }
.friend-frequency-meter { display: grid; align-content: center; gap: 7px; padding: 18px; border-radius: 11px; background: #fff; }
.friend-frequency-meter > span { color: #7c8ca1; font-size: var(--type-caption); font-weight: 600; }
.friend-frequency-meter > strong { color: #4f5e88; font-size: var(--type-subtitle); line-height: 1.45; }
.friend-frequency-bars { display: flex; height: 42px; align-items: end; gap: 5px; margin-top: 7px; }
.friend-frequency-bars i { width: 13px; height: calc(8px + (var(--bar) * 6px)); border-radius: 3px 3px 1px 1px; background: #e1e6ef; }
.friend-frequency-bars i.is-active { background: #8f75d0; box-shadow: 0 3px 8px rgb(106 91 187 / 18%); }
.friend-frequency-copy { display: grid; align-content: center; gap: 10px; }
.friend-frequency-copy p { margin: 0; color: #5f5870; font-size: var(--type-body); line-height: 1.75; word-break: keep-all; }
.friend-moment-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.friend-moment-card { position: relative; min-height: 245px; overflow: hidden; padding: 22px; border: 1px solid #e5d9ee; border-radius: 14px; background: #fbf8ff; }
.friend-moment-card::after { position: absolute; right: -16px; bottom: -28px; width: 84px; height: 84px; border: 1px solid rgb(137 94 184 / 13%); border-radius: 50%; box-shadow: 0 0 0 13px rgb(137 94 184 / 5%); content: ""; }
.friend-moment-card--support { background: #fff8fa; }
.friend-moment-card--team { background: #fffaf1; }
.friend-moment-card > span { display: flex; align-items: center; gap: 7px; color: #9673af; font-size: var(--type-caption); font-weight: 600; }
.friend-moment-card > span b { display: grid; width: 25px; height: 25px; border-radius: 7px; background: #eee3fa; color: #7150aa; font-size: var(--type-caption); place-items: center; }
.friend-moment-card h3 { margin: 19px 0 10px; color: #563d6e; font-size: var(--type-card-title); line-height: 1.45; word-break: keep-all; }
.friend-moment-card p { margin: 0; color: #6b5e75; font-size: var(--type-small); line-height: 1.75; word-break: keep-all; }
.friend-manual-grid { display: grid; gap: 12px; }
.friend-warning { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 15px; align-items: start; padding: 20px; border: 1px solid #f0d2d9; border-radius: 13px; background: #fff7f8; }
.friend-warning > span { display: grid; width: 42px; height: 42px; border-radius: 50%; background: #f9dfe6; color: #bd5574; font-size: var(--type-section-title); font-weight: 600; place-items: center; }
.friend-warning h3 { margin: 1px 0 7px; color: #9b4962; font-size: var(--type-body-lg); }
.friend-warning p { margin: 0; color: #735b66; font-size: var(--type-body); line-height: 1.75; word-break: keep-all; }
.friend-repair { padding: 22px; border: 1px solid #d8e5df; border-radius: 13px; background: #f7fcf9; }
.friend-manual-label { color: #4d896e; font-size: var(--type-small); font-weight: 600; }
.friend-repair ol { display: grid; gap: 9px; margin: 15px 0 0; padding: 0; list-style: none; }
.friend-repair li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: center; }
.friend-repair li > span { display: grid; width: 28px; height: 28px; border-radius: 8px; background: #dcefe5; color: #438064; font-size: var(--type-caption); font-weight: 600; place-items: center; }
.friend-repair li p { margin: 0; color: #5b6d64; font-size: var(--type-small); line-height: 1.65; word-break: keep-all; }
.friend-promise { display: grid; gap: 9px; padding: 22px; border: 1px solid #ead9a9; border-radius: 13px; background: #fffaf0; text-align: center; }
.friend-promise span { color: #a77c31; font-size: var(--type-caption); font-weight: 600; }
.friend-promise strong { color: #75572e; font-size: var(--type-card-title); line-height: 1.55; word-break: keep-all; }
.friend-conclusion { position: relative; overflow: hidden; padding: clamp(30px, 5vw, 48px); border: 1px solid #8563bd; border-radius: 18px; background: #f9f1fc; box-shadow: 0 10px 30px rgb(76 43 126 / 10%); }
.friend-conclusion::after { position: absolute; top: 24px; right: 30px; color: #ddb83e; content: "✦"; font-size: var(--type-section-title-lg); }
.friend-conclusion > span { color: #9e7ac6; font-size: var(--type-caption); font-weight: 600; letter-spacing: .14em; }
.friend-conclusion h2 { max-width: 680px; margin: 8px 0 22px; color: #4f3183; font-size: clamp(var(--type-section-title-lg), 4.8vw, var(--type-display-sm)); line-height: 1.4; letter-spacing: -.03em; word-break: keep-all; }
.friend-conclusion > div { display: grid; gap: 11px; max-width: 780px; }
.friend-conclusion p { margin: 0; color: #635371; font-size: var(--type-body); line-height: 1.8; word-break: keep-all; }

@media (max-width: 639px) {
  .friend-deep-dive { gap: 12px; }
  .friend-deep-dive-hero { min-height: 282px; padding: 27px 20px; border-radius: 15px; }
  .friend-deep-dive-hero h2 { font-size: var(--type-page-title-lg); }
  .friend-deep-dive-emblem { right: 24px; bottom: 24px; width: 82px; height: 82px; opacity: .62; }
  .friend-deep-dive-emblem span, .friend-deep-dive-emblem b { font-size: var(--type-card-title); }
  .friend-deep-dive-emblem span { top: 18px; left: 18px; }
  .friend-deep-dive-emblem b { right: 17px; bottom: 17px; }
  .friend-deep-dive-emblem i { font-size: var(--type-page-title); }
  .friend-chapter { padding: 19px 14px; }
  .friend-chapter-heading { margin-bottom: 20px; }
  .friend-chapter-heading > span { width: 50px; height: 43px; }
  .friend-chapter-heading h2 { font-size: var(--type-section-title); }
  .friend-bond-reason { min-height: 130px; padding: 22px 18px; }
  .friend-bond-reason strong { padding-right: 18px; font-size: var(--type-card-title); }
  .friend-view-grid, .friend-position-grid { grid-template-columns: 1fr; gap: 8px; }
  .friend-view-link { height: 23px; transform: rotate(90deg); }
  .friend-genre-card { grid-template-columns: 1fr; padding: 15px; }
  .friend-genre-poster { min-height: 115px; }
  .friend-position-grid > div { height: 32px; flex-direction: row; }
  .friend-frequency { grid-template-columns: 1fr; gap: 12px; padding: 14px; }
  .friend-moment-grid { grid-template-columns: 1fr; }
  .friend-moment-card { min-height: 0; }
  .friend-conclusion { padding: 27px 20px; }
  .friend-conclusion p { font-size: var(--type-body); }
}

/* Relationship deep dive — flirting, lover, and broken editions */
.deep-edition {
  --deep-accent: #be5d94;
  --deep-accent-dark: #6f326b;
  --deep-soft: #fff1f7;
  --deep-soft-2: #f4eaff;
  --deep-hero-start: #5d327f;
  --deep-hero-mid: #a44f86;
  --deep-hero-end: #eea36e;
  display: grid;
  gap: 18px;
  margin-top: 24px;
}
.deep-edition--lover {
  --deep-accent: #a64269;
  --deep-accent-dark: #65294b;
  --deep-soft: #fff0f4;
  --deep-soft-2: #f5e9fa;
  --deep-hero-start: #492356;
  --deep-hero-mid: #8f3e69;
  --deep-hero-end: #cf777f;
}
.deep-edition--broken {
  --deep-accent: #627a95;
  --deep-accent-dark: #3d5069;
  --deep-soft: #f1f5f8;
  --deep-soft-2: #edeaf5;
  --deep-hero-start: #25344c;
  --deep-hero-mid: #4d6079;
  --deep-hero-end: #8b778b;
}
.deep-edition-hero {
  position: relative;
  min-height: 330px;
  overflow: hidden;
  padding: clamp(34px, 6vw, 58px);
  border: 1px solid color-mix(in srgb, var(--deep-accent) 75%, #fff);
  border-radius: 20px;
  background: var(--deep-hero-mid);
  box-shadow: 0 16px 38px color-mix(in srgb, var(--deep-accent-dark) 24%, transparent);
  color: #fff;
}
.deep-edition-hero::after { position: absolute; right: -50px; bottom: -82px; width: 260px; height: 260px; border: 1px solid rgb(255 255 255 / 19%); border-radius: 50%; box-shadow: 0 0 0 25px rgb(255 255 255 / 5%), 0 0 0 57px rgb(255 255 255 / 3%); content: ""; }
.deep-edition-hero__copy { position: relative; z-index: 2; max-width: 760px; }
.deep-edition-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid rgb(255 255 255 / 38%); border-radius: 999px; background: rgb(255 255 255 / 12%); font-size: var(--type-caption); font-weight: 600; letter-spacing: .11em; }
.deep-edition-badge i { color: #ffe477; font-style: normal; }
.deep-edition-hero__copy > p { margin: 21px 0 5px; color: rgb(255 255 255 / 78%); font-size: var(--type-small); font-weight: 600; }
.deep-edition-hero h2 { max-width: 710px; margin: 0; color: #fff; font-size: clamp(var(--type-page-title), 6.0vw, var(--type-display-md)); line-height: 1.35; letter-spacing: -.04em; word-break: keep-all; }
.deep-edition-hero__copy > span:last-of-type { display: block; max-width: 650px; margin-top: 15px; color: rgb(255 255 255 / 82%); font-size: var(--type-small); line-height: 1.7; word-break: keep-all; }
.deep-edition-hero ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 20px 0 0; padding: 0; list-style: none; }
.deep-edition-hero li { padding: 5px 8px; border: 1px solid rgb(255 255 255 / 21%); border-radius: 999px; background: rgb(255 255 255 / 10%); color: #fff; font-size: var(--type-caption); font-weight: 600; }
.deep-edition-hero__mark { position: absolute; right: clamp(28px, 7vw, 78px); bottom: 42px; z-index: 1; display: grid; width: 118px; height: 118px; border: 1px solid rgb(255 255 255 / 28%); border-radius: 50%; background: rgb(255 255 255 / 8%); box-shadow: 0 0 0 10px rgb(255 255 255 / 5%); place-items: center; transform: rotate(-8deg); }
.deep-edition-hero__mark span { color: rgb(255 255 255 / 74%); font-size: var(--type-display-lg); font-weight: 600; }
.deep-edition-hero__mark i { position: absolute; top: 14px; right: 17px; color: #ffe477; font-size: var(--type-body); font-style: normal; }
.deep-edition-chapter { padding: clamp(24px, 4.5vw, 38px); border: 1px solid color-mix(in srgb, var(--deep-accent) 23%, #e8e0ef); border-radius: 16px; background: rgb(255 253 255 / 96%); box-shadow: 0 8px 28px rgb(71 43 115 / 8%); }
.deep-edition-heading { display: flex; align-items: center; gap: 14px; margin-bottom: 25px; }
.deep-edition-heading > span { display: grid; width: 58px; height: 49px; border-radius: 12px; background: var(--deep-soft-2); color: var(--deep-accent-dark); font-size: var(--type-caption); font-weight: 600; letter-spacing: .05em; text-align: center; place-items: center; }
.deep-edition-heading > span b { display: block; font-size: var(--type-small); }
.deep-edition-heading p { margin: 0 0 2px; color: color-mix(in srgb, var(--deep-accent) 72%, #9f91ad); font-size: var(--type-caption); font-weight: 600; letter-spacing: .14em; }
.deep-edition-heading h2 { margin: 0; color: var(--deep-accent-dark); font-size: var(--type-section-title-lg); letter-spacing: -.03em; }
.deep-edition-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.deep-edition-card { position: relative; min-width: 0; padding: 23px; border: 1px solid color-mix(in srgb, var(--deep-accent) 18%, #e5dcea); border-radius: 14px; background: var(--deep-soft); }
.deep-edition-card--one_line, .deep-edition-card--pair { grid-column: 1 / -1; }
.deep-edition-card--one_line { min-height: 165px; background: var(--deep-soft-2); }
.deep-edition-card--one_line::after { position: absolute; top: 23px; right: 25px; color: #dec24e; content: "✦"; font-size: var(--type-section-title); }
.deep-edition-card__label { color: color-mix(in srgb, var(--deep-accent) 78%, #6e6176); font-size: var(--type-caption); font-weight: 600; }
.deep-edition-card h3 { max-width: 520px; margin: 10px 0 14px; color: var(--deep-accent-dark); font-size: var(--type-card-title); line-height: 1.55; letter-spacing: -.02em; word-break: keep-all; }
.deep-edition-card--one_line h3 { padding-right: 32px; font-size: clamp(var(--type-section-title), 4.08vw, var(--type-page-title)); }
.deep-edition-card__body { display: grid; gap: 8px; }
.deep-edition-card__body p { margin: 0; color: #65596d; font-size: var(--type-small); line-height: 1.76; word-break: keep-all; }
.deep-edition-pair { display: grid; grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1fr); align-items: stretch; margin: 14px 0; }
.deep-edition-pair > div { display: grid; min-height: 116px; align-content: center; gap: 8px; padding: 19px; border: 1px solid color-mix(in srgb, var(--deep-accent) 17%, #e7dfea); border-radius: 12px; background: #fff; }
.deep-edition-pair > div > span { color: color-mix(in srgb, var(--deep-accent) 72%, #887b90); font-size: var(--type-caption); font-weight: 600; }
.deep-edition-pair > div strong { color: #594961; font-size: var(--type-body-lg); line-height: 1.65; word-break: keep-all; }
.deep-edition-pair__link { display: grid; color: var(--deep-accent); font-size: var(--type-card-title); place-items: center; }
.deep-edition-score { display: flex; align-items: end; gap: 5px; min-height: 50px; margin: 5px 0 15px; }
.deep-edition-score i { width: 15px; height: 13px; border-radius: 3px 3px 1px 1px; background: #e4dfe8; }
.deep-edition-score i:nth-child(2) { height: 19px; }
.deep-edition-score i:nth-child(3) { height: 25px; }
.deep-edition-score i:nth-child(4) { height: 31px; }
.deep-edition-score i:nth-child(5) { height: 37px; }
.deep-edition-score i.is-active { background: var(--deep-accent); box-shadow: 0 3px 7px color-mix(in srgb, var(--deep-accent) 22%, transparent); }
.deep-edition-score strong { margin-left: auto; color: var(--deep-accent-dark); font-size: var(--type-section-title-lg); }
.deep-edition-score small { color: #9f91a4; font-size: var(--type-caption); }
.deep-edition-final { position: relative; overflow: hidden; padding: clamp(31px, 5vw, 48px); border: 1px solid color-mix(in srgb, var(--deep-accent) 55%, #d9cbe6); border-radius: 18px; background: var(--deep-soft-2); box-shadow: 0 11px 32px rgb(70 40 115 / 11%); }
.deep-edition-final::after { position: absolute; top: 25px; right: 30px; color: #d8b842; content: "✦"; font-size: var(--type-section-title-lg); }
.deep-edition-final > span { color: var(--deep-accent); font-size: var(--type-caption); font-weight: 600; letter-spacing: .14em; }
.deep-edition-final h2 { max-width: 690px; margin: 8px 0 21px; color: var(--deep-accent-dark); font-size: clamp(var(--type-section-title-lg), 4.8vw, var(--type-display-sm)); line-height: 1.42; letter-spacing: -.03em; word-break: keep-all; }
.deep-edition-final > div { display: grid; gap: 10px; max-width: 780px; }
.deep-edition-final p { margin: 0; color: #605467; font-size: var(--type-body); line-height: 1.8; word-break: keep-all; }

@media (max-width: 639px) {
  .deep-edition { gap: 12px; }
  .deep-edition-hero { min-height: 340px; padding: 27px 20px; border-radius: 15px; }
  .deep-edition-hero h2 { font-size: var(--type-section-title-lg); }
  .deep-edition-hero__copy { max-width: 100%; }
  .deep-edition-hero__copy > span:last-of-type { padding-right: 46px; }
  .deep-edition-hero__mark { right: 24px; bottom: 25px; width: 78px; height: 78px; opacity: .58; }
  .deep-edition-hero__mark span { font-size: var(--type-page-title-lg); }
  .deep-edition-chapter { padding: 19px 14px; }
  .deep-edition-heading { margin-bottom: 19px; }
  .deep-edition-heading > span { width: 50px; height: 44px; }
  .deep-edition-heading h2 { font-size: var(--type-section-title); }
  .deep-edition-card-grid { grid-template-columns: 1fr; }
  .deep-edition-card--one_line, .deep-edition-card--pair { grid-column: auto; }
  .deep-edition-card { padding: 19px 17px; }
  .deep-edition-card h3 { font-size: var(--type-subtitle); }
  .deep-edition-card--one_line h3 { font-size: var(--type-card-title); }
  .deep-edition-pair { grid-template-columns: 1fr; gap: 7px; }
  .deep-edition-pair__link { height: 22px; transform: rotate(90deg); }
  .deep-edition-pair > div { min-height: 0; }
  .deep-edition-final { padding: 27px 20px; }
  .deep-edition-final p { font-size: var(--type-body); }
}

/* Auspicious date selection and report */
.auspicious-date-main,
.auspicious-result-main {
  display: grid;
  width: var(--page-content-width);
  max-width: 920px;
  margin: 0 auto;
  gap: 18px;
  padding: 18px 0 40px;
}
.auspicious-date-main > .conversation-page-hero { margin-bottom: 14px; }
.auspicious-date-form { display: grid; gap: 18px; }
.auspicious-history {
  padding: 20px clamp(18px, 4vw, 30px);
  border: 1px solid #ddcff0;
  border-radius: 16px;
  background: rgb(255 253 255 / 96%);
  box-shadow: 0 9px 28px rgb(72 41 116 / 7%);
}
.auspicious-history > header { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.auspicious-history .date-label { margin: 0 0 3px; color: #9569d7; }
.auspicious-history h2 { margin: 0; color: #432473; font-size: clamp(var(--type-card-title), 3.6vw, var(--type-section-title-lg)); letter-spacing: -.03em; }
.auspicious-history header p:last-child { margin: 5px 0 0; color: #82718f; font-size: var(--type-small); line-height: 1.55; word-break: keep-all; }
.auspicious-history-all { display: inline-flex; min-height: 38px; flex: 0 0 auto; align-items: center; gap: 5px; padding: 0 12px; border: 1px solid #cab5e5; border-radius: 9px; background: #f7f0fc; color: #6a45a3; font-size: var(--type-label); font-weight: 600; text-decoration: none; }
.auspicious-history-all .lucide { width: 14px; height: 14px; }
.auspicious-history-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 15px; }
.auspicious-history-card { display: grid; min-width: 0; min-height: 66px; grid-template-columns: 34px minmax(0, 1fr) 16px; align-items: center; gap: 9px; padding: 10px 11px; border: 1px solid #e0d4ed; border-radius: 10px; background: #fbf7ff; color: #675376; text-decoration: none; transition: transform .16s ease, border-color .16s ease, background-color .16s ease; }
.auspicious-history-card:hover { transform: translateY(-1px); border-color: #b99add; background: #f5edfc; }
.auspicious-history-card > span { display: grid; width: 34px; height: 34px; border-radius: 9px; background: #eadff7; color: #8057bf; place-items: center; }
.auspicious-history-card > span .lucide { width: 17px; height: 17px; }
.auspicious-history-card > div { min-width: 0; }
.auspicious-history-card strong { display: block; overflow: hidden; color: #563779; font-size: var(--type-small); text-overflow: ellipsis; white-space: nowrap; }
.auspicious-history-card small { display: block; margin-top: 3px; overflow: hidden; color: #9684a2; font-size: var(--type-caption); text-overflow: ellipsis; white-space: nowrap; }
.auspicious-history-card > .lucide { width: 15px; height: 15px; color: #9c83b4; }
.auspicious-history-empty { margin: 14px 0 0; padding: 12px 14px; border-radius: 9px; background: #f8f3fb; color: #8a7897; font-size: var(--type-label); line-height: 1.55; word-break: keep-all; }
.auspicious-date-block,
.auspicious-date-preview,
.auspicious-submit-panel {
  padding: clamp(22px, 4vw, 34px);
  border: 1px solid #d9c7f2;
  border-radius: 16px;
  background: rgb(255 253 255 / 96%);
  box-shadow: 0 9px 28px rgb(72 41 116 / 8%);
}
.auspicious-step-heading { display: flex; align-items: center; gap: 15px; margin-bottom: 22px; }
.auspicious-step-heading > span {
  display: grid;
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  border: 1px solid #cdb2ee;
  border-radius: 14px;
  background: #eee2fb;
  color: #6d41bf;
  font-size: var(--type-card-title);
  font-weight: 600;
  place-items: center;
}
.auspicious-step-heading .date-label,
.auspicious-date-preview .date-label { margin: 0 0 3px; color: #9569d7; }
.auspicious-step-heading h2,
.auspicious-date-preview h2,
.auspicious-evidence h2 { margin: 0; color: #432473; font-size: clamp(var(--type-section-title), 4.2vw, var(--type-page-title)); letter-spacing: -.035em; }
.auspicious-step-heading p:last-child,
.auspicious-date-preview > header > p:last-child,
.auspicious-evidence > header > p:last-child { margin: 6px 0 0; color: #82718f; font-size: var(--type-body); line-height: 1.6; }
.auspicious-purpose-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; border: 0; }
.auspicious-purpose-option {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 205px;
  align-content: center;
  justify-items: center;
  gap: 6px;
  padding: 15px 10px 16px;
  overflow: hidden;
  border: 2px solid #e2d5f3;
  border-radius: 18px;
  background: #fff;
  color: #4f337d;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgb(74 42 117 / 4%);
  transition: transform .16s ease, border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.auspicious-purpose-option:hover { transform: translateY(-2px); border-color: #baa0df; background: #fdfaff; box-shadow: 0 9px 18px rgb(83 48 132 / 9%); }
.auspicious-purpose-option:has(input:checked) { border-color: #8558cf; background: #f5effd; box-shadow: inset 0 0 0 1px #9e79d8, 0 8px 18px rgb(84 49 133 / 12%); color: #4e2d87; }
.auspicious-purpose-option:has(input:focus-visible) { outline: 3px solid #5a43bc; outline-offset: 3px; }
.auspicious-purpose-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.auspicious-purpose-image { display: grid; width: 100%; height: 104px; align-items: center; justify-items: center; }
.auspicious-purpose-image img { display: block; width: auto; max-width: 90%; height: auto; max-height: 90px; object-fit: contain; image-rendering: pixelated; }
.auspicious-purpose-option strong { font-size: var(--type-card-title); letter-spacing: -.025em; }
.auspicious-purpose-option small { color: #806b9d; font-size: var(--type-small); line-height: 1.35; word-break: keep-all; }
.auspicious-purpose-option > .lucide { position: absolute; top: 10px; right: 10px; display: none; width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: #8054ca; color: #fff; stroke-width: 3; }
.auspicious-purpose-option:has(input:checked) > .lucide { display: block; }
.auspicious-date-field { display: grid; max-width: 560px; gap: 8px; }
.auspicious-date-field > span { display: flex; align-items: center; gap: 7px; color: #5a3d82; font-size: var(--type-body); font-weight: 600; }
.auspicious-date-field > span .lucide { width: 18px; height: 18px; color: #8d61d6; }
.auspicious-date-field input {
  width: 100%;
  min-height: 58px;
  padding: 0 16px;
  border: 1px solid #cdbbea;
  border-radius: 11px;
  background: #fbf8ff;
  color: #37224f;
  font-size: var(--type-subtitle);
  font-weight: 600;
  color-scheme: light;
}
.auspicious-date-field input:focus { border-color: #8054cf; outline: 3px solid rgb(128 84 207 / 14%); }
.auspicious-date-field small { color: #94849f; font-size: var(--type-label); line-height: 1.5; }
.auspicious-candidate-picker { display: grid; gap: 14px; }
.auspicious-candidate-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.auspicious-candidate-row { display: grid; grid-template-columns: minmax(0, 1fr) 42px; align-items: end; gap: 7px; padding: 12px; border: 1px solid #ded1ee; border-radius: 12px; background: #fbf8ff; }
.auspicious-candidate-row label { display: grid; min-width: 0; gap: 6px; }
.auspicious-candidate-row label > span { color: #7855a4; font-size: var(--type-caption); font-weight: 600; letter-spacing: .05em; }
.auspicious-candidate-row input { width: 100%; min-height: 48px; padding: 0 12px; border: 1px solid #cdbbea; border-radius: 9px; background: #fff; color: #37224f; font-size: var(--type-body); font-weight: 600; color-scheme: light; }
.auspicious-candidate-row input:focus { border-color: #8054cf; outline: 3px solid rgb(128 84 207 / 14%); }
.auspicious-candidate-remove { display: grid; width: 42px; height: 42px; margin-bottom: 3px; border: 1px solid #dfd1eb; border-radius: 9px; background: #f5eefb; color: #896da1; cursor: pointer; place-items: center; }
.auspicious-candidate-remove:disabled { opacity: .35; cursor: not-allowed; }
.auspicious-candidate-remove .lucide { width: 17px; height: 17px; }
.auspicious-candidate-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.auspicious-candidate-add { display: inline-flex; min-height: 42px; align-items: center; gap: 7px; padding: 0 15px; border: 1px solid #bfa4df; border-radius: 10px; background: #f2e9fb; color: #633c9f; font-size: var(--type-small); font-weight: 600; cursor: pointer; }
.auspicious-candidate-add:disabled { opacity: .45; cursor: not-allowed; }
.auspicious-candidate-add .lucide { width: 16px; height: 16px; }
.auspicious-candidate-controls > span { color: #8b7899; font-size: var(--type-label); font-weight: 600; }
.auspicious-candidate-help { margin: 0; color: #94849f; font-size: var(--type-label); line-height: 1.55; word-break: keep-all; }
.auspicious-candidate-help.is-error { color: #b64d6c; font-weight: 600; }
.auspicious-date-preview { background: #f9f2fc; }
.auspicious-date-preview > header { margin-bottom: 19px; text-align: center; }
.auspicious-date-preview ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 0; padding: 0; list-style: none; }
.auspicious-date-preview li { display: grid; min-height: 104px; align-content: center; gap: 4px; padding: 14px; border: 1px solid #e0d2f0; border-radius: 12px; background: rgb(255 255 255 / 76%); }
.auspicious-date-preview li > span { color: #a37ada; font-size: var(--type-caption); font-weight: 600; letter-spacing: .08em; }
.auspicious-date-preview li strong { color: #523576; font-size: var(--type-body-lg); }
.auspicious-date-preview li small { color: #8c7a9b; font-size: var(--type-label); line-height: 1.4; }
.auspicious-ai-review-note { max-width: 700px; margin: 16px auto 0; color: #776685; font-size: var(--type-label); line-height: 1.6; text-align: center; word-break: keep-all; }
.auspicious-submit-panel { display: grid; justify-items: center; background: #fff; text-align: center; }
.auspicious-credit-status { display: flex; width: min(100%, 480px); align-items: center; justify-content: space-between; margin-bottom: 15px; padding: 12px 14px; border-radius: 10px; background: #f5effb; color: #715f80; font-size: var(--type-body); }
.auspicious-credit-status span { display: flex; align-items: center; gap: 7px; }
.auspicious-credit-status .lucide { width: 17px; height: 17px; color: #8456ce; }
.auspicious-credit-status strong { color: #5a2e9f; font-size: var(--type-subtitle); }
.auspicious-submit-button,
.auspicious-primary-link {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 24px;
  border: 0;
  border-radius: 11px;
  background: #7d51c7;
  box-shadow: 0 6px 0 #5a339c;
  color: #fff;
  font-size: var(--type-body);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.auspicious-submit-button:hover,
.auspicious-primary-link:hover { background: #6d43b7; }
.auspicious-submit-button:active,
.auspicious-primary-link:active { transform: translateY(3px); box-shadow: 0 3px 0 #5a339c; }
.auspicious-submit-button .lucide { width: 19px; height: 19px; }
.auspicious-submit-button--wallet { background: #6e5c7d; box-shadow: 0 6px 0 #4d4058; }
.auspicious-submit-panel > p { max-width: 540px; margin: 15px 0 0; color: #8c7c98; font-size: var(--type-small); line-height: 1.6; word-break: keep-all; }
.auspicious-generation-overlay { position: fixed; z-index: 10000; inset: 0; display: grid; padding: 20px; background: rgb(35 22 48 / 72%); backdrop-filter: blur(5px); place-items: center; }
.auspicious-generation-overlay[hidden] { display: none; }
.auspicious-generation-card { display: grid; width: min(430px, 100%); justify-items: center; padding: 34px 28px 29px; border: 1px solid #d9c5ef; border-radius: 20px; background: #fffaff; box-shadow: 0 28px 80px rgb(27 15 39 / 38%); text-align: center; }
.auspicious-generation-orbit { position: relative; display: grid; width: 112px; height: 112px; margin-bottom: 13px; border-radius: 50%; background: #f1e6fb; place-items: center; }
.auspicious-generation-orbit::before { position: absolute; inset: -7px; border: 2px dashed #b996df; border-radius: 50%; content: ""; animation: auspicious-orbit-spin 5s linear infinite; }
.auspicious-generation-orbit img { width: 78px; height: 78px; object-fit: contain; image-rendering: pixelated; }
.auspicious-generation-orbit i { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #f4ce59; box-shadow: 0 0 0 3px rgb(244 206 89 / 18%); animation: auspicious-star-pulse 1.4s ease-in-out infinite alternate; }
.auspicious-generation-orbit i:nth-of-type(1) { top: 1px; right: 13px; }
.auspicious-generation-orbit i:nth-of-type(2) { right: 0; bottom: 24px; animation-delay: .35s; }
.auspicious-generation-orbit i:nth-of-type(3) { bottom: 4px; left: 10px; animation-delay: .7s; }
.auspicious-generation-card .date-label { margin: 0; color: #9568d5; }
.auspicious-generation-card h2 { margin: 7px 0 0; color: #4c2b77; font-size: var(--type-section-title-lg); letter-spacing: -.035em; word-break: keep-all; }
.auspicious-generation-card > p:not(.date-label) { min-height: 44px; margin: 10px 0 0; color: #7d6b8a; font-size: var(--type-body); line-height: 1.65; word-break: keep-all; }
.auspicious-generation-progress { display: block; width: 100%; height: 8px; margin-top: 17px; overflow: hidden; border-radius: 999px; background: #eadff4; }
.auspicious-generation-progress i { display: block; width: 42%; height: 100%; border-radius: inherit; background: #8a5acb; animation: auspicious-progress 1.8s ease-in-out infinite; }
.auspicious-generation-card > small { display: flex; align-items: center; gap: 6px; margin-top: 15px; color: #947fa2; font-size: var(--type-label); line-height: 1.5; word-break: keep-all; }
.auspicious-generation-card > small .lucide { width: 14px; height: 14px; flex: 0 0 auto; color: #8054c7; }
body.is-auspicious-generating { overflow: hidden; }

.period-one-line,
.period-reasons {
  width: min(920px, 100%);
  margin: 24px auto;
}
.period-one-line {
  --period-one-line-frame-image: url("/images/pixel_frame_period_one_line.svg?v=1");
  --period-one-line-quote-frame-image: url("/images/pixel_frame_period_phase_purple.svg?v=4");

  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(88px, 10vw, 96px);
  align-items: center;
  gap: clamp(8px, 1.4vw, 12px);
  border: 14px solid transparent;
  border-image-source: var(--period-one-line-frame-image);
  border-image-slice: 14 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  background-clip: border-box;
  background-origin: border-box;
  box-shadow: none;
  clip-path: none;
  image-rendering: pixelated;
}
.period-one-line__quote {
  display: grid;
  min-width: 0;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 14px solid transparent;
  border-image-source: var(--period-one-line-quote-frame-image);
  border-image-slice: 14 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  background-clip: border-box;
  background-origin: border-box;
  box-shadow: none;
  clip-path: none;
  image-rendering: pixelated;
}
.period-one-line__cue {
  display: block;
  width: 18px;
  height: auto;
  align-self: start;
  margin-top: 5px;
  image-rendering: pixelated;
}
.period-one-line h1 {
  max-width: 26em;
  margin: 0;
  color: #3f3151;
  font-size: clamp(var(--type-body), 1.8vw, var(--type-body-lg));
  line-height: 1.55;
  word-break: keep-all;
}
.period-one-line__tamami {
  display: block;
  width: 80px;
  height: auto;
  align-self: center;
  margin-bottom: 0;
  image-rendering: pixelated;
}
.fortune-period-overview--story .period-overview-phase__content {
  min-height: 224px;
  grid-template-rows: auto auto auto 2px auto;
  row-gap: 11px;
}
.fortune-period-overview--story .period-overview-header h2 {
  font-size: clamp(var(--type-page-title), 5.28vw, var(--type-display-sm));
}
.fortune-period-overview--story .period-overview-phase__cue-label {
  font-size: var(--type-label);
}
.fortune-period-overview--story .period-overview-phase h3 {
  font-size: var(--type-body-lg);
}
.fortune-period-overview--story .period-overview-phase p {
  font-size: var(--type-small);
  line-height: 1.75;
}
.fortune-period-overview--story .period-overview-phase small {
  grid-template-columns: 28px minmax(0, 1fr);
  font-size: var(--type-label);
}
.fortune-period-overview--story .period-overview-phase__icon {
  max-width: 28px;
  max-height: 25px;
}
.fortune-period-overview--story .period-overview-transition {
  margin-bottom: 22px;
  font-size: var(--type-small);
}
.fortune-period-overview--story .period-overview-transition__badge strong {
  font-size: var(--type-label);
}
.fortune-period-overview--story .period-overview-transition__copy {
  font-size: var(--type-small);
}
.period-checkpoints {
  --period-checkpoints-frame-image: url("/images/pixel_frame_period_phase_purple.svg?v=4");

  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
  margin-top: 18px;
  padding: 34px 26px 26px;
  border: 14px solid transparent;
  border-image-source: var(--period-checkpoints-frame-image);
  border-image-slice: 14 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  background-clip: border-box;
  background-origin: border-box;
  box-shadow: none;
  clip-path: none;
  image-rendering: pixelated;
}
.period-checkpoints > h3 {
  --period-checkpoints-title-frame-image: url("/images/pixel_frame_period_phase_purple.svg?v=4");

  position: relative;
  z-index: 1;
  display: inline-flex;
  width: fit-content;
  min-height: 52px;
  align-items: center;
  gap: 7px;
  margin: 0 0 28px;
  padding: 0 12px;
  border: 14px solid transparent;
  border-image-source: var(--period-checkpoints-title-frame-image);
  border-image-slice: 14 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  background-clip: border-box;
  background-origin: border-box;
  box-shadow: none;
  color: #4c3b5e;
  font-size: var(--type-subtitle);
  clip-path: none;
  image-rendering: pixelated;
  white-space: nowrap;
}
.period-checkpoints__title-paw {
  display: block;
  width: 26px;
  height: auto;
  flex: 0 0 auto;
  image-rendering: pixelated;
}
.period-checkpoints > h3::before {
  position: absolute;
  top: -25px;
  left: -22px;
  width: 46px;
  height: 22px;
  background: url("/images/period-checkpoint-tape-purple.png?v=1") center / 100% 100% no-repeat;
  content: "";
  pointer-events: none;
  transform: rotate(-38deg);
  transform-origin: center;
  image-rendering: pixelated;
}
.period-checkpoints__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  column-gap: 32px;
  row-gap: 48px;
}
.period-checkpoints article {
  --period-checkpoint-frame-image: url("/images/pixel_frame_period_checkpoint_purple.svg?v=2");
  --period-checkpoint-tape-image: url("/images/period-checkpoint-tape-purple.png?v=1");

  position: relative;
  display: grid;
  min-width: 0;
  min-height: 240px;
  align-content: start;
  gap: 8px;
  padding: 22px 18px 18px;
  border: 14px solid transparent;
  border-image-source: var(--period-checkpoint-frame-image);
  border-image-slice: 14 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  background-clip: border-box;
  background-origin: border-box;
  box-shadow: none;
  clip-path: none;
  image-rendering: pixelated;
}
.period-checkpoints article::before {
  position: absolute;
  top: -31px;
  left: 50%;
  width: 88px;
  height: 43px;
  background: var(--period-checkpoint-tape-image) center / 100% 100% no-repeat;
  content: "";
  pointer-events: none;
  transform: translateX(-50%);
  image-rendering: pixelated;
}
.period-checkpoints article:nth-child(even) {
  --period-checkpoint-frame-image: url("/images/pixel_frame_period_checkpoint_pink.svg?v=2");
  --period-checkpoint-tape-image: url("/images/period-checkpoint-tape-pink.png?v=1");
}
.period-checkpoints article > span {
  color: #815bb8;
  font-size: var(--type-small);
  font-weight: 600;
  white-space: nowrap;
}
.period-checkpoints article strong { color: #43344f; font-size: var(--type-body-lg); }
.period-checkpoints article p { margin: 4px 0 0; color: #5b4f65; font-size: var(--type-body-lg); line-height: 1.6; }
.period-checkpoints article small { color: #8c7b98; font-size: var(--type-small); }
.period-reasons details { padding: 22px 24px; border: 1px solid #e5d9f2; border-radius: 18px; background: #faf7fc; }
.period-reasons summary { color: #66439b; font-weight: 600; cursor: pointer; }
.period-reasons__paw {
  color: #815bb8;
  font-family: Arial, sans-serif;
  line-height: 1;
}
.period-reasons ul { display: grid; gap: 18px; margin: 20px 0 0; padding: 0; list-style: none; }
.period-reasons li { display: grid; gap: 5px; }
.period-reasons li strong { color: #563783; }
.period-reasons li p { margin: 0; color: #51465b; line-height: 1.7; }
.period-reasons li small { color: #9586a1; }
@media (max-width: 639px) {
  .period-one-line {
    grid-template-columns: minmax(0, 1fr) 78px;
    gap: 6px;
  }
  .period-one-line__quote {
    grid-template-columns: 14px minmax(0, 1fr);
    gap: 8px;
  }
  .period-one-line__cue { width: 14px; height: auto; margin-top: 4px; }
  .period-one-line h1 { font-size: clamp(var(--type-label), 3.6vw, var(--type-small)); line-height: 1.55; }
  .period-one-line__tamami { margin-bottom: 0; }
  .fortune-period-overview { padding-top: 8px; }
  .fortune-period-overview--story .period-overview-header h2 {
    font-size: clamp(var(--type-section-title), 5.28vw, var(--type-page-title));
  }
  .fortune-period-overview--story .period-overview-phase__content {
    min-height: 224px;
    padding: 18px 22px;
    row-gap: 10px;
  }
  .fortune-period-overview--story .period-overview-transition__copy {
    font-size: var(--type-label);
  }
  .period-checkpoints { padding: 34px 18px 22px; }
}
@keyframes auspicious-orbit-spin { to { transform: rotate(360deg); } }
@keyframes auspicious-star-pulse { to { transform: scale(.55); opacity: .45; } }
@keyframes auspicious-progress { 0% { transform: translateX(-105%); } 55%, 100% { transform: translateX(245%); } }
.auspicious-date-empty { display: grid; grid-template-columns: 130px minmax(0, 1fr); align-items: center; gap: 24px; }
.auspicious-date-empty img { width: 130px; height: 130px; object-fit: contain; }
.auspicious-date-empty h2 { margin: 5px 0 8px; color: #432473; font-size: var(--type-section-title-lg); }
.auspicious-date-empty p:not(.date-label) { margin: 0 0 18px; color: #756582; font-size: var(--type-body); line-height: 1.7; }

.auspicious-result-main { max-width: 820px; }
.auspicious-result-cover {
  position: relative;
  overflow: hidden;
  min-height: 475px;
  padding: clamp(30px, 6vw, 54px);
  border: 1px solid #7e58b8;
  border-radius: 20px;
  background: #7649b4;
  box-shadow: 0 18px 40px rgb(63 35 103 / 22%);
  color: #fff;
}
.auspicious-result-cover::after { position: absolute; right: -75px; bottom: -105px; width: 310px; height: 310px; border: 1px solid rgb(255 255 255 / 16%); border-radius: 50%; box-shadow: 0 0 0 32px rgb(255 255 255 / 5%), 0 0 0 72px rgb(255 255 255 / 3%); content: ""; }
.auspicious-result-cover .date-label { margin: 0; color: #e2c9ff; }
.auspicious-result-purpose { display: inline-flex; align-items: center; gap: 5px; margin-top: 22px; padding: 6px 10px; border: 1px solid rgb(255 255 255 / 28%); border-radius: 999px; background: rgb(255 255 255 / 9%); font-size: var(--type-label); font-weight: 600; }
.auspicious-result-cover h1 { max-width: 620px; margin: 12px 0 4px; font-size: clamp(var(--type-page-title-lg), 7.2vw, var(--type-display-lg)); letter-spacing: -.045em; }
.auspicious-result-cover > time { color: rgb(255 255 255 / 76%); font-size: var(--type-body); font-weight: 600; }
.auspicious-grade-lockup { position: relative; z-index: 1; display: flex; align-items: center; gap: 23px; margin-top: 36px; }
.auspicious-score-ring { position: relative; display: grid; width: 120px; height: 120px; flex: 0 0 auto; border-radius: 50%; background: conic-gradient(#ffdf69 var(--auspicious-score), rgb(255 255 255 / 17%) 0); place-items: center; }
.auspicious-score-ring::before { position: absolute; width: 94px; height: 94px; border-radius: 50%; background: #5d3691; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 17%); content: ""; }
.auspicious-score-ring strong,
.auspicious-score-ring small { position: relative; z-index: 1; }
.auspicious-score-ring strong { align-self: end; font-size: var(--type-display-sm); line-height: 1; }
.auspicious-score-ring small { align-self: start; margin-top: 5px; color: #dfcaef; font-size: var(--type-caption); }
.auspicious-grade-lockup > div:last-child > span { color: #ddc8ef; font-size: var(--type-label); font-weight: 600; }
.auspicious-grade-lockup > div:last-child > strong { display: block; margin-top: 3px; color: #ffdf69; font-size: clamp(var(--type-section-title-lg), 5.4vw, var(--type-display-sm)); }
.auspicious-grade-lockup p { max-width: 400px; margin: 7px 0 0; color: rgb(255 255 255 / 82%); font-size: var(--type-body); line-height: 1.6; word-break: keep-all; }
.auspicious-cover-note { position: relative; z-index: 1; max-width: 590px; margin: 25px 0 0; padding-top: 16px; border-top: 1px solid rgb(255 255 255 / 16%); color: rgb(255 255 255 / 66%); font-size: var(--type-label); line-height: 1.6; }
.auspicious-result-cover__stars i { position: absolute; color: #ffe676; font-style: normal; }
.auspicious-result-cover__stars i:nth-child(1) { top: 40px; right: 85px; font-size: var(--type-subtitle); }
.auspicious-result-cover__stars i:nth-child(2) { top: 92px; right: 145px; }
.auspicious-result-cover__stars i:nth-child(3) { top: 140px; right: 58px; font-size: var(--type-label); }
.auspicious-comparison { padding: clamp(24px, 5vw, 38px); border: 1px solid #cdb6e7; border-radius: 17px; background: #fbf7fd; box-shadow: 0 9px 28px rgb(72 41 116 / 8%); }
.auspicious-comparison > header { margin-bottom: 19px; text-align: center; }
.auspicious-comparison > header .date-label { margin: 0 0 4px; color: #986fd0; }
.auspicious-comparison > header h2 { margin: 0; color: #44266d; font-size: clamp(var(--type-section-title-lg), 4.8vw, var(--type-page-title-lg)); letter-spacing: -.035em; }
.auspicious-comparison > header > p:last-child { max-width: 640px; margin: 8px auto 0; color: #776583; font-size: var(--type-body); line-height: 1.65; word-break: keep-all; }
.auspicious-comparison > header .auspicious-comparison-counts { display: flex; justify-content: center; gap: 6px; margin-top: 11px; color: #72578d; font-size: var(--type-label); }
.auspicious-comparison-counts strong { color: #603a91; }
.auspicious-comparison-alert { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 14px; padding: 13px 15px; border: 1px solid #e4c4cf; border-radius: 10px; background: #fff5f7; color: #875064; font-size: var(--type-small); line-height: 1.6; word-break: keep-all; }
.auspicious-comparison-alert .lucide { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 1px; }
.auspicious-comparison-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.auspicious-candidate-card { display: grid; min-width: 0; align-content: start; gap: 9px; padding: 18px; border: 1px solid #ded2ea; border-radius: 13px; background: rgb(255 255 255 / 82%); }
.auspicious-candidate-card--recommended,
.auspicious-candidate-card--relative-best { grid-column: 1 / -1; border-color: #8e62cb; background: #7042a5; color: #fff; box-shadow: 0 9px 22px rgb(86 49 135 / 18%); }
.auspicious-candidate-card--caution { border-color: #e2c6ce; background: #fff8fa; }
.auspicious-candidate-card > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.auspicious-candidate-card > header span { color: #8764ad; font-size: var(--type-caption); font-weight: 600; letter-spacing: .05em; }
.auspicious-candidate-card > header strong { color: #5e368c; font-size: var(--type-subtitle); }
.auspicious-candidate-card--recommended > header span,
.auspicious-candidate-card--relative-best > header span { color: #ead8ff; }
.auspicious-candidate-card--recommended > header strong,
.auspicious-candidate-card--relative-best > header strong { color: #ffe477; }
.auspicious-candidate-card > time { color: #3f245f; font-size: var(--type-card-title); font-weight: 600; letter-spacing: -.025em; }
.auspicious-candidate-card--recommended > time,
.auspicious-candidate-card--relative-best > time { color: #fff; font-size: var(--type-section-title-lg); }
.auspicious-candidate-grade { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px; }
.auspicious-candidate-grade strong { color: #7044a5; font-size: var(--type-body-lg); }
.auspicious-candidate-grade small { color: #9684a2; font-size: var(--type-caption); }
.auspicious-candidate-card--recommended .auspicious-candidate-grade strong,
.auspicious-candidate-card--relative-best .auspicious-candidate-grade strong { color: #ffe477; }
.auspicious-candidate-card--recommended .auspicious-candidate-grade small,
.auspicious-candidate-card--relative-best .auspicious-candidate-grade small { color: #dfcced; }
.auspicious-candidate-judgment { width: fit-content; padding: 4px 8px; border-radius: 999px; background: #eee6f7; color: #68468d; font-size: var(--type-caption); font-weight: 600; }
.auspicious-candidate-judgment--very-good,
.auspicious-candidate-judgment--good { background: #e9f5ed; color: #39714b; }
.auspicious-candidate-judgment--caution,
.auspicious-candidate-judgment--avoid-if-possible { background: #fbe8ed; color: #9e4661; }
.auspicious-candidate-card--recommended .auspicious-candidate-judgment,
.auspicious-candidate-card--relative-best .auspicious-candidate-judgment { background: rgb(255 255 255 / 15%); color: #fff; }
.auspicious-candidate-card > p { margin: 0; color: #72617d; font-size: var(--type-small); line-height: 1.6; word-break: keep-all; }
.auspicious-candidate-card--recommended > p,
.auspicious-candidate-card--relative-best > p { color: rgb(255 255 255 / 82%); }
.auspicious-candidate-pressure { color: #a24e68 !important; font-weight: 600; }
.auspicious-candidate-card > footer { display: flex; align-items: center; gap: 6px; padding-top: 8px; border-top: 1px solid #eadff0; color: #8b6aa4; font-size: var(--type-caption); font-weight: 600; }
.auspicious-candidate-card--recommended > footer,
.auspicious-candidate-card--relative-best > footer { border-color: rgb(255 255 255 / 16%); color: #e9dcf3; }
.auspicious-candidate-card > footer .lucide { width: 14px; height: 14px; }
.auspicious-quick-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.auspicious-quick-facts article { display: grid; min-height: 128px; align-content: center; gap: 5px; padding: 18px; border: 1px solid #dac9ed; border-radius: 14px; background: #fffaff; }
.auspicious-quick-facts span { display: flex; align-items: center; gap: 6px; color: #8d6caf; font-size: var(--type-caption); font-weight: 600; }
.auspicious-quick-facts .lucide { width: 15px; height: 15px; }
.auspicious-quick-facts strong { color: #492b70; font-size: var(--type-section-title); }
.auspicious-quick-facts small { color: #887696; font-size: var(--type-label); line-height: 1.45; word-break: keep-all; }
.auspicious-section-nav { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; padding: 9px; border: 1px solid #d8c8eb; border-radius: 12px; background: #f9f4fd; }
.auspicious-section-nav a { display: grid; min-height: 57px; align-content: center; justify-items: center; gap: 3px; border-radius: 8px; color: #665574; font-size: var(--type-caption); font-weight: 600; text-align: center; text-decoration: none; }
.auspicious-section-nav a:hover { background: #eee3f8; color: #573197; }
.auspicious-section-nav span { color: #9b74d4; font-size: var(--type-caption); }
.auspicious-report-sections { display: grid; gap: 13px; }
.auspicious-report-section { scroll-margin-top: 92px; padding: clamp(24px, 5vw, 39px); border: 1px solid #ded0ed; border-radius: 16px; background: rgb(255 253 255 / 97%); box-shadow: 0 8px 25px rgb(71 41 104 / 7%); }
.auspicious-report-section--caution { border-color: #e4c6ce; background: #fff7f9; }
.auspicious-report-section > header { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.auspicious-report-section > header > span { display: grid; width: 52px; height: 46px; flex: 0 0 auto; border-radius: 12px; background: #eee3f9; color: #7850bd; font-size: var(--type-label); font-weight: 600; place-items: center; }
.auspicious-report-section--caution > header > span { background: #f7dfe5; color: #a54c68; }
.auspicious-report-section header p { margin: 0 0 3px; color: #9b73cd; font-size: var(--type-caption); font-weight: 600; letter-spacing: .11em; }
.auspicious-report-section--caution header p { color: #b66b81; }
.auspicious-report-section h2 { margin: 0; color: #47296e; font-size: clamp(var(--type-section-title), 4.8vw, var(--type-page-title)); letter-spacing: -.035em; }
.auspicious-report-section--caution h2 { color: #773d50; }
.auspicious-section-copy { display: grid; gap: 11px; }
.auspicious-section-copy p { margin: 0; color: #5f5368; font-size: var(--type-body-lg); line-height: 1.82; word-break: keep-all; }
.auspicious-section-copy p:first-child { color: #4e3370; font-size: var(--type-subtitle); font-weight: 600; }
.auspicious-report-section--caution .auspicious-section-copy p:first-child { color: #803f55; }
.auspicious-evidence { padding: clamp(24px, 5vw, 38px); border: 1px solid #d6c4ea; border-radius: 16px; background: #fbf5ff; }
.auspicious-evidence > header { margin-bottom: 19px; }
.auspicious-evidence .date-label { margin: 0 0 4px; color: #9b73d3; }
.auspicious-evidence-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.auspicious-evidence-list article { min-width: 0; padding: 18px; border: 1px solid #e0d4ee; border-radius: 12px; background: rgb(255 255 255 / 78%); }
.auspicious-evidence-list article.pressure { border-color: #ead1d7; background: #fff9fa; }
.auspicious-evidence-list span { color: #9571c4; font-size: var(--type-caption); font-weight: 600; letter-spacing: .08em; }
.auspicious-evidence-list article.pressure span { color: #b7677f; }
.auspicious-evidence-list h3 { margin: 6px 0 8px; color: #503270; font-size: var(--type-subtitle); }
.auspicious-evidence-list p { margin: 0; color: #71657a; font-size: var(--type-small); line-height: 1.72; word-break: keep-all; }
.auspicious-safety-notice { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: start; gap: 10px; padding: 17px 19px; border: 1px solid #ddcfeb; border-radius: 12px; background: #f7f2fb; color: #786a83; }
.auspicious-safety-notice .lucide { width: 19px; height: 19px; color: #8964bd; }
.auspicious-safety-notice p { margin: 0; font-size: var(--type-small); line-height: 1.7; word-break: keep-all; }
.auspicious-result-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 16px 0 4px; }
.auspicious-secondary-link { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; padding: 0 24px; border: 1px solid #cbb8e4; border-radius: 11px; background: #faf6fd; color: #68469c; font-size: var(--type-body); font-weight: 600; text-decoration: none; }
.archive-report-card--auspicious { background: #faf4fb; }
.archive-report-card--auspicious .report-product-icon {
  padding: 22px;
  image-rendering: pixelated;
}

@media (max-width: 767px) {
  .auspicious-purpose-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .auspicious-history-list { grid-template-columns: 1fr; }
  .auspicious-candidate-list { grid-template-columns: 1fr; }
  .auspicious-date-preview ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .auspicious-result-cover { min-height: 440px; }
}
@media (max-width: 519px) {
  .auspicious-date-main,
  .auspicious-result-main { gap: 12px; padding-top: 8px; }
  .auspicious-date-block,
  .auspicious-date-preview,
  .auspicious-submit-panel { padding: 20px 14px; border-radius: 14px; }
  .auspicious-history { padding: 18px 14px; border-radius: 14px; }
  .auspicious-history > header { align-items: flex-start; flex-direction: column; gap: 12px; }
  .auspicious-history-all { width: 100%; justify-content: center; }
  .auspicious-step-heading { align-items: flex-start; gap: 11px; margin-bottom: 18px; }
  .auspicious-step-heading > span { width: 42px; height: 42px; border-radius: 11px; font-size: var(--type-subtitle); }
  .auspicious-step-heading h2,
  .auspicious-date-preview h2 { font-size: var(--type-section-title); }
  .auspicious-purpose-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .auspicious-purpose-option { min-height: 171px; padding: 12px 7px 13px; border-radius: 14px; }
  .auspicious-purpose-image { height: 82px; }
  .auspicious-purpose-image img { max-width: 88%; max-height: 72px; }
  .auspicious-purpose-option strong { font-size: var(--type-subtitle); }
  .auspicious-purpose-option small { font-size: var(--type-caption); }
  .auspicious-generation-card { padding: 29px 19px 24px; border-radius: 16px; }
  .auspicious-generation-card h2 { font-size: var(--type-section-title); }
  .auspicious-date-preview li { min-height: 96px; padding: 12px; }
  .auspicious-candidate-controls { align-items: stretch; flex-direction: column; }
  .auspicious-candidate-controls > span { text-align: right; }
  .auspicious-candidate-add { justify-content: center; }
  .auspicious-comparison { padding: 21px 14px; }
  .auspicious-comparison-grid { grid-template-columns: 1fr; }
  .auspicious-candidate-card--recommended,
  .auspicious-candidate-card--relative-best { grid-column: auto; }
  .auspicious-submit-button,
  .auspicious-primary-link,
  .auspicious-secondary-link { width: 100%; }
  .auspicious-date-empty { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .auspicious-date-empty img { width: 106px; height: 106px; }
  .auspicious-result-cover { min-height: 440px; padding: 28px 20px; border-radius: 15px; }
  .auspicious-result-cover h1 { font-size: var(--type-page-title-lg); }
  .auspicious-grade-lockup { align-items: flex-start; gap: 15px; margin-top: 31px; }
  .auspicious-score-ring { width: 100px; height: 100px; }
  .auspicious-score-ring::before { width: 78px; height: 78px; }
  .auspicious-score-ring strong { font-size: var(--type-page-title); }
  .auspicious-grade-lockup > div:last-child > strong { font-size: var(--type-page-title); }
  .auspicious-result-cover__stars i:nth-child(2) { right: 80px; }
  .auspicious-quick-facts { grid-template-columns: 1fr; }
  .auspicious-quick-facts article { min-height: 103px; }
  .auspicious-section-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .auspicious-report-section { padding: 23px 17px; border-radius: 14px; }
  .auspicious-report-section > header { align-items: flex-start; margin-bottom: 20px; }
  .auspicious-report-section h2 { font-size: var(--type-section-title); }
  .auspicious-section-copy p { font-size: var(--type-body-lg); line-height: 1.78; }
  .auspicious-section-copy p:first-child { font-size: var(--type-body-lg); }
  .auspicious-evidence { padding: 22px 14px; }
  .auspicious-evidence-list { grid-template-columns: 1fr; }
  .auspicious-result-actions { display: grid; grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .auspicious-generation-orbit::before,
  .auspicious-generation-orbit i,
  .auspicious-generation-progress i { animation: none; }
  .auspicious-generation-progress i { width: 70%; }
}

/* Daily fortune — pixel-dot artwork treatment */
.fortune-page-shell--today {
  --daily-dot: #9d7bda;
  --daily-dot-soft: #cdb7ef;
  --daily-ink: #3f268f;
  --daily-paper: #fbf7ff;
}

.fortune-precision-notice,
.fortune-precision-notice__icon {
  border: 14px solid transparent;
  border-image-source: var(--fortune-precision-frame);
  border-image-slice: 14 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  background-clip: border-box;
  background-origin: border-box;
  box-shadow: none;
  clip-path: none;
  image-rendering: pixelated;
}

.fortune-precision-notice {
  --fortune-precision-frame: url("/images/pixel_frame_decoration_quiet.svg?v=1");
  --tamami-section-title: #5a43bc;
  --tamami-text: #6b667a;

  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  margin: 12px 0 16px;
  padding: 0;
  color: var(--tamami-text);
  font-size: var(--type-caption);
  line-height: 1.6;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.fortune-precision-notice__icon {
  --fortune-precision-frame: url("/images/pixel_frame_points_guide.svg?v=1");

  display: grid;
  width: 44px;
  height: 44px;
  color: var(--tamami-section-title);
  place-items: center;
}

.fortune-precision-notice__icon .lucide {
  width: 16px;
  height: 16px;
  stroke-width: 2;
}

@media (max-width: 639px) {
  .fortune-precision-notice {
    gap: 6px;
    margin: 10px 0 14px;
  }
}

.fortune-page-shell--today .conversation-page-hero--fortune::before {
  background-position: left top;
}

.fortune-page-shell--today .fortune-overall-speech {
  padding: 6px 28px 8px;
  border: 14px solid transparent;
  border-image: url("/images/dashboard_shortcut_frame.svg?v=1") 14 fill stretch;
  background: transparent;
  color: var(--daily-ink);
}
.fortune-page-shell--today .fortune-overall-speech::before,
.fortune-page-shell--today .fortune-overall-speech::after { content: none; }
.fortune-page-shell--today .fortune-overall-speech-frame {
  position: relative;
  z-index: 3;
}
.fortune-page-shell--today .fortune-overall-speech-tail {
  position: absolute;
  z-index: 4;
  top: calc(100% - 6px);
  left: 50%;
  width: 36px;
  height: 21px;
  transform: translateX(-50%);
  image-rendering: pixelated;
  pointer-events: none;
}
.fortune-page-shell--today .fortune-overall-score-mascot {
  margin: -5px auto -65px;
}

.fortune-page-shell--today .narrative-section {
  --narrative-card-background-color: var(--daily-paper);
  position: relative;
  isolation: isolate;
  padding: 16px;
  overflow: visible;
  border: 14px solid transparent;
  border-image: url("/images/dashboard_shortcut_frame.svg?v=1") 14 stretch;
  border-radius: 0;
  background: transparent;
  clip-path: none;
}
.fortune-page-shell--today .narrative-section::before {
  position: absolute;
  z-index: 0;
  inset: -10px;
  background-color: var(--narrative-card-background-color);
  background-image: none;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  clip-path: polygon(
    12px 0, calc(100% - 12px) 0,
    calc(100% - 12px) 2px, calc(100% - 8px) 2px,
    calc(100% - 8px) 4px, calc(100% - 4px) 4px,
    calc(100% - 4px) 8px, calc(100% - 2px) 8px,
    calc(100% - 2px) 12px, 100% 12px,
    100% calc(100% - 12px), calc(100% - 2px) calc(100% - 12px),
    calc(100% - 2px) calc(100% - 8px), calc(100% - 4px) calc(100% - 8px),
    calc(100% - 4px) calc(100% - 4px), calc(100% - 8px) calc(100% - 4px),
    calc(100% - 8px) calc(100% - 2px), calc(100% - 12px) calc(100% - 2px),
    calc(100% - 12px) 100%, 12px 100%,
    12px calc(100% - 2px), 8px calc(100% - 2px),
    8px calc(100% - 4px), 4px calc(100% - 4px),
    4px calc(100% - 8px), 2px calc(100% - 8px),
    2px calc(100% - 12px), 0 calc(100% - 12px),
    0 12px, 2px 12px,
    2px 8px, 4px 8px,
    4px 4px, 8px 4px,
    8px 2px, 12px 2px
  );
  content: "";
  pointer-events: none;
}
.fortune-page-shell--today .narrative-section > :not(.pixel-dot-border) { position: relative; z-index: 1; }
.fortune-page-shell--today .narrative-section > .pixel-dot-border { display: none; }
.pixel-dot-border { display: none; }
.fortune-page-shell--today .pixel-dot-border {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  color: var(--daily-dot);
  pointer-events: none;
}
.fortune-page-shell--today .pixel-dot-border rect { shape-rendering: geometricPrecision; }
.fortune-page-shell--today .narrative-section[data-fortune-section="overall"] {
  --narrative-card-background-color: #fbf7ff;
  margin-top: 37px;
  background-color: transparent;
  background-image: none;
}
.fortune-page-shell--today .narrative-section:not([data-fortune-section="overall"]) {
  --narrative-card-background-color: #efe5ff;
  background-color: transparent;
  background-image: none;
}

:is(.fortune-page-shell--today, .fortune-history-shell) .narrative-basis-frame {
  --narrative-basis-frame-image: url("/images/dashboard_shortcut_frame.svg?v=1");

  position: relative;
  z-index: 1;
  margin-top: 12px;
  border: 14px solid transparent;
  border-image-source: var(--narrative-basis-frame-image);
  border-image-slice: 14 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  background-clip: border-box;
  background-origin: border-box;
  box-shadow: none;
  clip-path: none;
  image-rendering: pixelated;
}
:is(.fortune-page-shell--today, .fortune-history-shell) .narrative-basis-frame > .pixel-dot-border { display: none; }
:is(.fortune-page-shell--today, .fortune-history-shell) .narrative-basis {
  /* Use the frame's inner space while keeping a full-height touch target. */
  margin-block: -8px;
  border: 0;
  border-radius: 0;
  background: transparent;
}
:is(.fortune-page-shell--today, .fortune-history-shell) .narrative-basis summary {
  min-height: 44px;
  padding: 0 20px;
  color: var(--daily-ink);
}
.narrative-basis__leaf,
.narrative-basis__bullet {
  display: none;
  flex: 0 0 auto;
  object-fit: contain;
  image-rendering: pixelated;
}
:is(.fortune-page-shell--today, .fortune-history-shell) .narrative-basis__leaf,
:is(.fortune-page-shell--today, .fortune-history-shell) .narrative-basis__bullet { display: block; }
:is(.fortune-page-shell--today, .fortune-history-shell) .narrative-basis__leaf { width: 18px; }
:is(.fortune-page-shell--today, .fortune-history-shell) .narrative-basis summary span { color: #785cd1; font-size: var(--type-body-lg); }
:is(.fortune-page-shell--today, .fortune-history-shell) .narrative-basis__content {
  padding: 20px 20px 22px;
  border-right: 0;
  border-left: 0;
  border-top: 2px solid #896bcc;
  background: transparent;
}
:is(.fortune-page-shell--today, .fortune-history-shell) .narrative-basis ul { gap: 16px; }
:is(.fortune-page-shell--today, .fortune-history-shell) .narrative-basis li {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
}
:is(.fortune-page-shell--today, .fortune-history-shell) .narrative-basis__bullet { width: 12px; height: auto; margin-top: 3px; }
.narrative-basis__item-copy { display: grid; min-width: 0; gap: 3px; }
:is(.fortune-page-shell--today, .fortune-history-shell) .narrative-basis li strong { color: #8662cb; font-size: var(--type-body); }
:is(.fortune-page-shell--today, .fortune-history-shell) .narrative-basis li span { color: #504065; }

@media (max-width: 639px) {
  .fortune-page-shell--today .fortune-overall-speech {
    padding: 6px 12px 8px;
    border-width: 14px;
  }
  .fortune-page-shell--today .narrative-section { padding: 10px 4px; }
  :is(.fortune-page-shell--today, .fortune-history-shell) .narrative-basis summary { min-height: 44px; padding: 0 16px 0 11px; }
  :is(.fortune-page-shell--today, .fortune-history-shell) .narrative-basis summary small { font-size: var(--type-caption); }
  :is(.fortune-page-shell--today, .fortune-history-shell) .narrative-basis__content { padding: 17px 13px 19px; }
}

/* Public app preview */
.guest-header-login {
  --guest-header-login-frame: url("/images/pixel_frame_input.svg?v=1");

  box-sizing: border-box;
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 4px;
  border: 14px solid transparent;
  border-image-source: var(--guest-header-login-frame);
  border-image-slice: 14 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  background-clip: border-box;
  background-origin: border-box;
  box-shadow: none;
  clip-path: none;
  color: #6240ae;
  font-size: var(--type-small);
  font-weight: 700;
  text-decoration: none;
  image-rendering: pixelated;
  transform: none;
  transition: filter .15s ease, transform .15s ease;
}
.guest-header-login:hover { filter: brightness(1.03); }
.guest-header-login:active { filter: brightness(.96); transform: translateY(1px); }
.guest-header-login:focus-visible { outline: 3px solid var(--ui-focus, #5a43bc); outline-offset: 2px; }
.guest-header-login .lucide { width: 17px; height: 17px; }

.guest-example-notice,
.guest-catalog-notice {
  display: grid;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 20px;
  padding: 15px 17px;
  border: 1px solid #ccb6ec;
  border-radius: 10px;
  background: rgba(251, 247, 255, 0.92);
  color: #554568;
  box-shadow: 0 7px 18px rgba(80, 49, 126, 0.07);
}
.guest-example-notice {
  grid-template-columns: 28px minmax(0, 1fr) auto;
  margin-top: 18px;
}
.guest-example-notice > span:first-child {
  display: grid;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #e9dcfb;
  color: #754ac1;
  place-items: center;
}
.guest-example-notice > span:first-child .lucide { width: 16px; height: 16px; }
.guest-example-notice p { margin: 0; font-size: var(--type-small); line-height: 1.65; word-break: keep-all; }
.guest-example-notice strong { color: #51319b; }
.guest-example-notice__guide { color: #6840b8; font-weight: 700; text-underline-offset: 3px; }
.guest-example-notice > a,
.guest-catalog-notice > a,
.guest-example-conversion a {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border-radius: 6px;
  background: #7650c8;
  color: #fff;
  font-size: var(--type-label);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.guest-example-notice {
  --guest-example-frame: url("/images/pixel_frame_home_service_purple.svg?v=2");

  box-sizing: border-box;
  padding: 10px 12px;
  border: 14px solid transparent;
  border-image-source: var(--guest-example-frame);
  border-image-slice: 14 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  background-clip: border-box;
  background-origin: border-box;
  box-shadow: none;
  clip-path: none;
  image-rendering: pixelated;
}
.guest-example-notice > a {
  --guest-example-action-frame: url("/images/pixel_frame_settings_primary.svg?v=1");

  box-sizing: border-box;
  min-height: 54px;
  padding: 0 12px;
  border: 14px solid transparent;
  border-image-source: var(--guest-example-action-frame);
  border-image-slice: 14 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  background-clip: border-box;
  background-origin: border-box;
  box-shadow: none;
  clip-path: none;
  image-rendering: pixelated;
  transform: none;
  transition: filter .15s ease, transform .15s ease;
}
.guest-example-notice > a:hover { filter: brightness(1.03); }
.guest-example-notice > a:active { filter: brightness(.96); transform: translateY(1px); }
.guest-example-notice > a:focus-visible { outline: 3px solid var(--ui-focus, #5a43bc); outline-offset: 2px; }
.guest-example-badge {
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 21px;
  align-items: center;
  margin-left: 5px;
  padding: 0 7px;
  border: 1px solid #b99ee5;
  border-radius: 999px;
  background: #f2eaff;
  color: #744cc0;
  font-size: var(--type-caption);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  word-break: keep-all;
  vertical-align: middle;
}
.guest-catalog-notice {
  grid-template-columns: minmax(0, 1fr) auto;
}
.guest-catalog-notice strong { color: #51319b; font-size: var(--type-body); }
.guest-catalog-notice span { grid-column: 1; color: #746487; font-size: var(--type-label); line-height: 1.55; }
.guest-catalog-notice > a { grid-row: 1 / span 2; grid-column: 2; }
.report-card-status--guest { color: #6847ae; }
.guest-example-conversion {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin-top: 22px;
  padding: 20px;
  border: 1px solid #d7c5ee;
  border-radius: 10px;
  background: #fbf7ff;
  text-align: center;
}
.guest-example-conversion p { margin: 0; color: #665775; font-size: var(--type-small); line-height: 1.6; }
.guest-example-conversion > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

@media (max-width: 639px) {
  .guest-example-notice { grid-template-columns: 25px minmax(0, 1fr); margin-inline: 2px; }
  .guest-example-notice > span:first-child { width: 25px; height: 25px; }
  .guest-example-notice > a { grid-column: 2; justify-self: start; }
  .guest-catalog-notice { grid-template-columns: 1fr; }
  .guest-catalog-notice span,
  .guest-catalog-notice > a { grid-row: auto; grid-column: 1; }
  .guest-catalog-notice > a { justify-self: start; }
}

/* Life-flow catalog tone */
.report-product-tone-5 {
  --report-card-accent: #6676bd;
  --report-card-background: #f0f1ff;
  --report-card-border: #929bd1;
}
.report-product-tone-5 h3 { color: #4d578f; }
.report-product-tone-5 p,
.report-product-tone-5 .report-card-status { color: #68709a; }


/* Tamami keyrings: touch-first hanger and database-backed material catalog. */
.keyring-charm {
  position: relative;
  display: grid;
  width: var(--keyring-charm-size, calc(var(--keyring-scale, 12px) * 5));
  height: var(--keyring-charm-size, calc(var(--keyring-scale, 12px) * 5));
  flex: 0 0 auto;
  filter: drop-shadow(2px 2px 0 rgb(61 43 89 / 20%));
  place-items: center;
}
.keyring-charm img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.tamami-keyring-chain { --keyring-charm-size: clamp(60px, 8vw, 88px); position: absolute; z-index: 8; top: 1.9%; left: 8.8%; display: flex; flex-direction: column; align-items: center; transform: translateX(-50%); pointer-events: none; }
.tamami-keyring-chain__hook,
.tamami-keyring-chain__link { position: relative; z-index: 2; display: block; flex: 0 0 auto; }
.tamami-keyring-chain__hook { width: clamp(18px, 2.2vw, 24px); height: clamp(18px, 2.2vw, 24px); margin-bottom: calc(var(--keyring-charm-size) * -.16); }
.tamami-keyring-chain__link { width: clamp(6px, .7vw, 8px); height: clamp(14px, 1.4vw, 18px); }
.tamami-keyring-chain__link { margin: calc(var(--keyring-charm-size) * -.14) 0; }
.tamami-keyring-chain__hook img,
.tamami-keyring-chain__link img { display: block; width: 100%; height: 100%; object-fit: contain; }
.tamami-keyring-chain__link img { image-rendering: pixelated; }
/* Equipped keyrings stay on the fixed hanger anchor; only the empty CTA moves inward. */
.dashboard-hero-shell > .tamami-keyring-chain { top: -4px; }
.dashboard-hero-shell > .tamami-keyring-empty {
  --tamami-title: #4c30af;
  --tamami-section-title: #5a43bc;
  --tamami-card-title: #8c77ce;
  --tamami-point: #a18dde;
  --tamami-border-strong: #b5a1ec;
  --tamami-accent: #e58bcb;
  position: absolute;
  z-index: 9;
  top: 18px;
  left: 14px;
  width: 0;
}
.tamami-keyring-empty__add {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--tamami-section-title);
  text-decoration: none;
  place-items: start;
}
.tamami-keyring-empty__add-frame {
  --tamami-keyring-add-frame: url("/images/pixel_frame_keyring_add.svg?v=1");
  display: grid;
  box-sizing: border-box;
  width: 36px;
  height: 36px;
  border: 7px solid transparent;
  border-image-source: var(--tamami-keyring-add-frame);
  border-image-slice: 7 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  background-clip: border-box;
  background-origin: border-box;
  box-shadow: none;
  clip-path: none;
  color: var(--tamami-section-title);
  place-items: center;
  image-rendering: pixelated;
}
.tamami-keyring-empty__add-frame > span {
  display: block;
  margin: 0;
  transform: translateY(-1px);
  font-family: Arial, sans-serif;
  font-size: var(--type-section-title);
  font-weight: 700;
  line-height: 1;
}
.tamami-keyring-empty__add:hover .tamami-keyring-empty__add-frame { color: var(--tamami-title); filter: brightness(1.02); }
.tamami-keyring-empty__add:active .tamami-keyring-empty__add-frame { transform: translateY(1px); filter: brightness(.97); }
.tamami-keyring-empty__add:focus-visible,
.tamami-keyring-empty__prompt:focus-visible {
  outline: 3px solid var(--tamami-title);
  outline-offset: 2px;
}
.tamami-keyring-empty__prompt {
  --tamami-keyring-prompt-frame: url("/images/pixel_frame_keyring_prompt.svg?v=1");
  position: absolute;
  top: 26px;
  left: 14px;
  display: grid;
  box-sizing: border-box;
  width: max-content;
  max-width: calc(100vw - 24px);
  min-height: 58px;
  padding: 4px 6px;
  border: 7px solid transparent;
  border-image-source: var(--tamami-keyring-prompt-frame);
  border-image-slice: 7 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  background-clip: border-box;
  background-origin: border-box;
  box-shadow: none;
  clip-path: none;
  color: var(--tamami-section-title);
  cursor: pointer;
  font-family: 'AppNumerals', 'SchoolSafeUniverse', 'Pretendard', system-ui, sans-serif;
  font-size: var(--type-small);
  font-weight: 400;
  line-height: 1.3;
  text-align: left;
  word-break: keep-all;
  image-rendering: pixelated;
}
.tamami-keyring-empty__prompt[hidden] { display: none; }
.tamami-keyring-empty__prompt-kicker {
  display: block;
  margin-bottom: 2px;
  color: var(--tamami-title);
  font-size: var(--type-label);
  font-weight: 400;
  line-height: 1.2;
}
.tamami-keyring-empty__prompt strong { color: var(--tamami-section-title); font-weight: 400; white-space: nowrap; }
.tamami-keyring-empty__prompt-heart {
  display: inline-block;
  margin-left: 3px;
  color: var(--tamami-accent);
  font-size: var(--type-body);
  line-height: 1;
  vertical-align: -.08em;
}

@media (max-width: 639px) {
  .tamami-keyring-empty__add-frame { width: 27px; height: 27px; }
  .tamami-keyring-empty__add-frame > span { transform: translateY(-2px); font-size: var(--type-body-lg); }
  .tamami-keyring-empty__prompt {
    top: 18px;
  }
}

.keyring-workbench {
  --tamami-title: #4c30af;
  --tamami-section-title: #5a43bc;
  --tamami-emphasis: #7762bc;
  --tamami-card-title: #8c77ce;
  --tamami-border-strong: #b5a1ec;
  --tamami-border: #dfd1fa;
  --tamami-divider: #f0e9fd;
  --tamami-accent: #e58bcb;
  --tamami-accent-soft: #fcebfa;
  --tamami-text: #6b667a;
  --tamami-text-muted: #8f88a6;
  --tamami-page: #f6f0fe;
  --tamami-section: #f8f3fe;
  --tamami-surface: #fff;
  display: grid;
  gap: 22px;
  scroll-margin-top: 16px;
}
.keyring-workbench__header,
.keyring-hanger-card,
.keyring-material-library,
.keyring-hanger,
.keyring-slot,
.keyring-material-card,
.keyring-picker-dialog,
.keyring-picker-dialog__shell > header button,
.keyring-picker-option,
.keyring-selection-preview,
.keyring-selection-preview__visual {
  --keyring-frame: url("/images/pixel_frame_decoration_surface.svg?v=1");
  box-sizing: border-box;
  border: 14px solid transparent;
  border-image-source: var(--keyring-frame);
  border-image-slice: 14 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  background-clip: border-box;
  background-origin: border-box;
  box-shadow: none;
  clip-path: none;
  image-rendering: pixelated;
}
.keyring-workbench__header {
  --keyring-frame: url("/images/pixel_frame_decoration_quiet.svg?v=1");
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  padding: 14px 18px;
}
.keyring-workbench__header h2 { margin: 0 0 7px; color: var(--tamami-title); font-size: var(--type-section-title-lg); font-weight: 600; line-height: 1.35; }
.keyring-workbench__header span { color: var(--tamami-text); font-size: var(--type-body); line-height: 1.7; word-break: keep-all; overflow-wrap: anywhere; }
.keyring-workbench__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; }
.keyring-hanger-card,
.keyring-material-library { padding: 14px 16px 18px; }
.keyring-hanger-card > header,
.keyring-material-library > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.keyring-hanger-card > header h3,
.keyring-material-library > header h3 { margin: 0; color: var(--tamami-section-title); font-size: var(--type-card-title); font-weight: 600; }
.keyring-workbench__header > strong,
.keyring-hanger-card > header > span,
.keyring-material-library > header > span,
.keyring-material-card__top span,
.keyring-material-card dt,
.keyring-selection-preview dt,
.keyring-picker-dialog__shell > header p {
  --keyring-badge-frame: url("/images/pixel_badge_keyring.svg?v=1");
  --keyring-badge-slice: 3;
  box-sizing: border-box;
  display: inline-flex;
  width: max-content;
  min-height: 24px;
  align-items: center;
  justify-content: center;
  padding: 1px 7px;
  border: calc(var(--keyring-badge-slice) * 1px) solid transparent;
  border-image-source: var(--keyring-badge-frame);
  border-image-slice: var(--keyring-badge-slice) fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  clip-path: none;
  color: var(--tamami-section-title);
  font-size: var(--type-caption);
  font-weight: 600;
  line-height: 1.2;
  image-rendering: pixelated;
  transform: none;
}
.keyring-workbench__header > strong { min-width: 68px; min-height: 36px; color: var(--tamami-title); font-size: var(--type-body-lg); }
.keyring-hanger-card > header > span,
.keyring-material-library > header > span { flex: 0 0 auto; }
.keyring-hanger {
  --keyring-frame: url("/images/pixel_frame_decoration_quiet.svg?v=1");
  position: relative;
  padding: 24px 8px 10px;
  overflow: hidden;
}
.keyring-hanger__hook { position: absolute; z-index: 2; top: -7px; left: 40px; width: 30px; height: 22px; border: 4px solid var(--tamami-title); border-top: 0; background: var(--tamami-border-strong); box-shadow: 4px 3px 0 var(--tamami-card-title); clip-path: polygon(0 0, 100% 0, 100% 70%, 80% 70%, 80% 100%, 20% 100%, 20% 70%, 0 70%); }
.keyring-hanger__hook i { position: absolute; bottom: -14px; left: 50%; width: 5px; height: 14px; transform: translateX(-50%); background: var(--tamami-title); box-shadow: 3px 0 0 var(--tamami-card-title); }
.keyring-hanger ol { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.keyring-hanger li { position: relative; min-width: 0; }
.keyring-hanger li::before { position: absolute; z-index: 2; top: -12px; left: 43px; width: 7px; height: 16px; background: url("/images/keyrings/chain-link-edge-12x40.png") center / contain no-repeat; content: ""; image-rendering: pixelated; }
.keyring-hanger li.is-locked::before { filter: grayscale(1); opacity: .42; }
.keyring-slot { position: relative; z-index: 1; display: grid; width: 100%; min-height: 108px; margin: 0; padding: 2px 4px; color: var(--tamami-text); font: inherit; text-align: left; }
button.keyring-slot { cursor: pointer; touch-action: manipulation; }
.keyring-slot--filled { --keyring-scale: 11px; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: 10px; }
.keyring-slot--filled:hover,
.keyring-slot--filled:focus-visible { filter: brightness(1.02); }
.keyring-slot__copy { display: grid; min-width: 0; gap: 4px; }
.keyring-slot__copy b { color: var(--tamami-section-title); font-size: var(--type-body); }
.keyring-slot__copy small { color: var(--tamami-text); font-size: var(--type-caption); line-height: 1.55; word-break: keep-all; }
.keyring-slot--empty,
.keyring-slot--locked { --keyring-frame: url("/images/pixel_frame_decoration_quiet.svg?v=1"); grid-template-columns: 38px minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; column-gap: 8px; }
.keyring-slot--empty > span,
.keyring-slot--locked > span { grid-row: 1 / 3; align-self: center; color: var(--tamami-emphasis); font-size: var(--type-section-title-lg); text-align: center; }
.keyring-slot--empty b,
.keyring-slot--locked b { align-self: end; color: var(--tamami-section-title); font-size: var(--type-body); }
.keyring-slot--empty small,
.keyring-slot--locked small { align-self: start; color: var(--tamami-text); font-size: var(--type-caption); }
.keyring-slot--empty:hover,
.keyring-slot--empty:focus-visible { --keyring-frame: url("/images/pixel_frame_decoration_selected.svg?v=1"); }
.keyring-slot--locked { opacity: .62; }
.keyring-hanger-card__help { margin: 12px 2px 0; color: var(--tamami-text); font-size: var(--type-caption); line-height: 1.65; word-break: keep-all; }

.keyring-material-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.keyring-material-card { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 13px; min-width: 0; padding: 4px; overflow: visible; }
.keyring-material-card.is-in-use { --keyring-frame: url("/images/pixel_frame_decoration_selected.svg?v=1"); }
.keyring-material-card__top { --keyring-scale: 12px; display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 12px; align-items: center; }
.keyring-material-card__top > div { min-width: 0; }
.keyring-material-card__top span { max-width: 100%; min-height: 20px; padding: 0 5px; overflow: hidden; font-size: calc(var(--type-caption) - 1px); text-overflow: ellipsis; white-space: nowrap; }
.keyring-material-card__top h4 { margin: 4px 0 1px; color: var(--tamami-section-title); font-size: var(--type-body); }
.keyring-material-card__top small { color: var(--tamami-text-muted); font-size: var(--type-caption); }
.keyring-material-card dl,
.keyring-selection-preview dl { display: grid; gap: 10px; margin: 0; }
.keyring-material-card dl > div,
.keyring-selection-preview dl > div { display: grid; gap: 4px; }
.keyring-material-card dt,
.keyring-selection-preview dt { min-height: 22px; padding-inline: 6px; }
.keyring-material-card dd,
.keyring-selection-preview dd { margin: 0; color: var(--tamami-text); font-size: var(--type-label); line-height: 1.65; text-wrap: pretty; word-break: keep-all; }
.keyring-material-card > button,
.keyring-picker-dialog footer input[type="submit"] {
  --keyring-action-frame: url("/images/pixel_frame_settings_primary.svg?v=1");
  appearance: none;
  box-sizing: border-box;
  width: 100%;
  min-height: 54px;
  padding: 0 10px;
  border: 14px solid transparent;
  border-image-source: var(--keyring-action-frame);
  border-image-slice: 14 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  clip-path: none;
  color: #fff;
  font: inherit;
  font-size: var(--type-label);
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  image-rendering: pixelated;
  cursor: pointer;
  touch-action: manipulation;
}
.keyring-material-card > button:active,
.keyring-picker-dialog footer input[type="submit"]:active { transform: translateY(1px); }
.keyring-material-card > button:disabled,
.keyring-picker-dialog footer input[type="submit"]:disabled { --keyring-action-frame: url("/images/pixel_frame_decoration_quiet.svg?v=1"); color: var(--tamami-text-muted); cursor: default; transform: none; }
.keyring-workbench__footer { margin: 0; }
.keyring-workbench__footer form { margin: 0; }
.keyring-clear-all-button {
  --keyring-clear-frame: url("/images/pixel_frame_settings_primary.svg?v=1");

  appearance: none;
  box-sizing: border-box;
  width: 100%;
  min-height: 54px;
  padding: 0 12px;
  border: 14px solid transparent;
  border-image-source: var(--keyring-clear-frame);
  border-image-slice: 14 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  background-clip: border-box;
  background-origin: border-box;
  box-shadow: none;
  clip-path: none;
  color: #fff;
  font: inherit;
  font-size: var(--type-body);
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  image-rendering: pixelated;
  cursor: pointer;
  touch-action: manipulation;
  transition: filter .15s ease, transform .15s ease;
}
.keyring-clear-all-button:hover { filter: brightness(1.03); }
.keyring-clear-all-button:active { filter: brightness(.96); transform: translateY(1px); }
.keyring-clear-all-button:focus-visible { outline: 3px solid var(--ui-focus, #5a43bc); outline-offset: 2px; }
.keyring-clear-all-button:disabled { filter: grayscale(.18); opacity: .5; cursor: not-allowed; transform: none; }

.keyring-picker-dialog { --keyring-frame: url("/images/pixel_frame_decoration_quiet.svg?v=2"); width: min(760px, calc(100% - 28px)); max-width: 760px; max-height: calc(100dvh - 32px); margin: auto; padding: 0; overflow: hidden; color: var(--tamami-text); filter: drop-shadow(0 18px 34px rgb(76 48 175 / 20%)); }
.keyring-picker-dialog::backdrop { background: rgb(38 24 49 / 58%); backdrop-filter: blur(3px); }
.keyring-picker-dialog[open] { animation: keyring-dialog-enter .2s ease-out; }
.keyring-picker-dialog__shell { display: flex; max-height: calc(100dvh - 32px); flex-direction: column; }
.keyring-picker-dialog__shell > header { position: relative; z-index: 2; display: flex; min-height: 88px; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--tamami-divider); background: var(--tamami-section); }
.keyring-picker-dialog__shell > header p { margin: 0 0 4px; }
.keyring-picker-dialog__shell > header h2 { margin: 0 0 4px; color: var(--tamami-title); font-size: var(--type-card-title); }
.keyring-picker-dialog__shell > header span { color: var(--tamami-text); font-size: var(--type-label); line-height: 1.55; word-break: keep-all; }
.keyring-picker-dialog__shell > header button { display: grid; width: 46px; height: 46px; flex: 0 0 auto; padding: 0; color: var(--tamami-section-title); font-family: Arial, sans-serif; font-size: var(--type-section-title); line-height: 1; cursor: pointer; place-items: center; }
.keyring-picker-dialog__scroll { min-height: 0; padding: 18px 20px 22px; overflow-y: auto; overscroll-behavior: contain; }
.keyring-picker-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.keyring-picker-option { --keyring-scale: 11px; display: grid; min-height: 98px; grid-template-columns: 54px minmax(0, 1fr); gap: 12px; align-items: center; padding: 2px 4px; color: var(--tamami-text); font: inherit; text-align: left; cursor: pointer; touch-action: manipulation; }
.keyring-picker-option > span { display: grid; min-width: 0; gap: 3px; }
.keyring-picker-option b { color: var(--tamami-section-title); font-size: var(--type-label); }
.keyring-picker-option small { color: var(--tamami-text); font-size: var(--type-caption); line-height: 1.5; word-break: keep-all; }
.keyring-picker-option[aria-pressed="true"] { --keyring-frame: url("/images/pixel_frame_decoration_selected.svg?v=1"); }
.keyring-picker-option:disabled { opacity: .46; cursor: not-allowed; }
.keyring-selection-preview { --keyring-frame: url("/images/pixel_frame_decoration_quiet.svg?v=1"); display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 18px; padding: 4px; }
.keyring-selection-preview[hidden] { display: none; }
.keyring-selection-preview__visual { --keyring-scale: 18px; display: grid; min-height: 138px; place-items: center; }
.keyring-selection-preview > div:last-child > span { color: var(--tamami-emphasis); font-size: var(--type-caption); font-weight: 600; }
.keyring-selection-preview h3 { margin: 3px 0 12px; color: var(--tamami-section-title); font-size: var(--type-card-title); }
.keyring-picker-dialog footer { z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 12px 20px 16px; border-top: 1px solid var(--tamami-divider); background: var(--tamami-section); }
.keyring-picker-dialog footer form[hidden] { display: none; }
.keyring-picker-dialog footer input[type="submit"] { font-size: var(--type-body); }
.keyring-picker-dialog footer form[data-keyring-remove-form] input { --keyring-action-frame: url("/images/pixel_frame_decoration_selected.svg?v=1"); color: var(--tamami-section-title); }
.keyring-picker-dialog footer input:disabled { opacity: .58; }
.keyring-slot:focus-visible,
.keyring-material-card > button:focus-visible,
.keyring-picker-option:focus-visible,
.keyring-picker-dialog button:focus-visible,
.keyring-picker-dialog input:focus-visible { outline: 3px solid var(--tamami-title); outline-offset: 2px; }

@keyframes keyring-dialog-enter {
  from { transform: translateY(12px) scale(.985); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

@media (max-width: 639px) {
  .decoration-section-tabs { gap: 5px; }
  .decoration-section-tabs a { min-height: 48px; padding: 5px; font-size: var(--type-small); }
  .keyring-workbench__header { padding: 18px 16px; }
  .keyring-workbench__header > strong { min-width: 62px; min-height: 52px; }
  .keyring-hanger-card,
  .keyring-material-library { padding: 16px; }
  .keyring-slot { min-height: 112px; }
  .keyring-material-grid { grid-template-columns: 1fr; }
  .keyring-material-card { padding: 16px; }
  .keyring-material-card > button { min-height: 50px; }
  .keyring-picker-dialog { inset: auto 0 0; width: 100%; max-width: none; max-height: calc(100dvh - 10px); margin: 0; }
  .keyring-picker-dialog__shell { max-height: calc(100dvh - 10px); }
  .keyring-picker-dialog__shell > header { min-height: 98px; padding: 22px 16px 14px; }
  .keyring-picker-dialog__shell > header::before { position: absolute; top: 7px; left: 50%; width: 38px; height: 4px; transform: translateX(-50%); border-radius: 99px; background: #d9c9e3; content: ""; }
  .keyring-picker-dialog__scroll { padding: 14px 16px 18px; }
  .keyring-picker-grid { grid-template-columns: 1fr; }
  .keyring-picker-option { min-height: 104px; }
  .keyring-selection-preview { grid-template-columns: 112px minmax(0, 1fr); gap: 12px; padding: 12px; }
  .keyring-selection-preview__visual { --keyring-scale: 16px; min-height: 126px; }
  .keyring-picker-dialog footer { grid-template-columns: 1fr; padding: 10px 16px max(10px, env(safe-area-inset-bottom)); }
  .keyring-picker-dialog footer form[data-keyring-remove-form] { grid-row: 2; }
}

@media (max-width: 370px) {
  .decoration-section-tabs a { font-size: var(--type-label); }
  .keyring-workbench__header { grid-template-columns: 1fr; }
  .keyring-workbench__header > strong { width: 100%; min-height: 44px; }
  .keyring-selection-preview { grid-template-columns: 1fr; }
  .keyring-selection-preview__visual { min-height: 124px; }
}

@media (prefers-reduced-motion: reduce) {
  .keyring-picker-dialog[open] { animation: none; }
}

/* Login window -----------------------------------------------------------
   The 1046x1275 source is rendered as a nine-slice. The top 104px keeps the
   title bar intact, while the 32px outer slices preserve the pixel corners.
   Only the undecorated middle around the supplied 49.7% / 54.7% guide point
   stretches as the form grows. */
.login-shell .auth-page {
  margin-right: auto;
  margin-left: round(nearest, calc((100% - var(--page-content-width)) / 2), 1px);
  padding-top: clamp(16px, 3vw, 24px);
}

.auth-login-card {
  box-sizing: border-box;
  width: 100%;
  min-height: clamp(720px, calc((100vw - 32px) * 1.22), 878px);
  margin-top: 0;
  padding:
    clamp(30px, 8.3vw, 60px)
    clamp(8px, 2.2vw, 16px)
    clamp(42px, 7vw, 52px);
  border-style: solid !important;
  border-width:
    clamp(36px, 9.6vw, 72px)
    clamp(11px, 3vw, 22px)
    clamp(11px, 3vw, 22px) !important;
  border-image-source: url("/images/login_window_background.png") !important;
  border-image-slice: 104 32 32 32 fill !important;
  border-image-width: 1 !important;
  border-image-repeat: stretch !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-clip: border-box !important;
  background-origin: border-box !important;
  box-shadow: none !important;
  clip-path: none !important;
}

.auth-login-card::before {
  display: none !important;
}

.auth-login-card > * {
  position: relative;
  z-index: 1;
}

.auth-login-card > :where(
  .auth-card-header,
  .auth-form,
  .auth-mode-prompt,
  .auth-divider,
  .auth-social-actions,
  .auth-error,
  .notice
) {
  width: 100%;
  max-width: none;
}

.auth-login-heading {
  display: grid;
  width: min(100%, 500px);
  height: 88px;
  grid-template-columns: clamp(58px, 13.3vw, 96px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(10px, 2.8vw, 20px);
  margin-right: auto;
  margin-left: auto;
}

.auth-login-heading > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.auth-login-heading p {
  display: inline-block;
  margin: 0 0 5px;
  color: #9b73e7;
  font-size: clamp(var(--type-body), 3.2vw, var(--type-section-title)) !important;
  font-weight: 600;
  line-height: 30px;
}

.auth-login-heading h1 {
  margin: 0;
  color: #33179a;
  font-size: clamp(var(--type-page-title), 6.1vw, var(--type-display-sm));
  font-weight: 600;
  line-height: 48px;
  text-shadow: 2px 2px 0 rgb(255 255 255 / 68%);
}

.auth-login-card .notice.success {
  --success-notice-frame-image: url("/images/pixel_notice_support_success.svg?v=4");
  --success-notice-frame-slice: 4;

  margin: 20px 0 0;
}

.auth-login-card .auth-form {
  gap: clamp(17px, 3vw, 22px);
  margin-top: clamp(28px, 4.5vw, 34px);
}

.auth-login-card .auth-input-field {
  gap: clamp(8px, 1.7vw, 12px);
}

.auth-login-card .auth-input-field > span:first-child {
  color: #4d2a9e;
  font-size: clamp(var(--type-body-lg), 3.2vw, var(--type-section-title));
  font-weight: 600;
  line-height: 1.25;
  text-shadow: 1px 1px 0 #ffffff;
}

/* Filled pixel-frame contract: the SVG owns the corner, outline, and surface.
   Keeping the 14px border matched to slice 14 prevents clipping, detached
   endpoints, and transparent gutters at every responsive size. */
.auth-login-card :where(
  .auth-input-control,
  .auth-primary-button,
  .auth-social-button
) {
  border: 14px solid transparent !important;
  border-image-source: var(--login-control-frame-image) !important;
  border-image-slice: 14 fill !important;
  border-image-width: 1 !important;
  border-image-repeat: stretch !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-clip: border-box !important;
  background-origin: border-box !important;
  box-shadow: none !important;
  clip-path: none !important;
  image-rendering: pixelated;
}

.auth-login-card .auth-input-control {
  --login-control-frame-image: url("/images/pixel_frame_input.svg");
  display: grid;
  min-height: clamp(54px, 9.2vw, 67px);
  grid-template-columns: clamp(28px, 5vw, 36px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(11px, 2.4vw, 18px);
  padding: 0 clamp(8px, 1.8vw, 13px);
}

.auth-login-card .auth-input-control:focus-within {
  filter: brightness(.97) saturate(1.12);
  outline: 3px solid rgb(255 238 132 / 88%);
  outline-offset: 2px;
}

.auth-login-card .auth-input-control > img {
  display: block;
  width: 100%;
  max-height: 38px;
  object-fit: contain;
  image-rendering: pixelated;
}

.auth-login-card .auth-input-control input {
  width: 100%;
  height: 100%;
  min-width: 0;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #4a2897 !important;
  font: inherit;
  font-size: clamp(var(--type-body-lg), 3.2vw, var(--type-section-title)) !important;
  font-weight: 600;
}

.auth-login-card .auth-input-control input::placeholder {
  color: #b59be2;
  opacity: 1;
}

.auth-login-card .auth-remember-row {
  display: grid;
  grid-template-columns: clamp(28px, 5vw, 36px) minmax(0, 1fr);
  align-items: start;
  gap: clamp(10px, 2.3vw, 17px);
  padding: 5px 1px 0;
  color: #4d2a9e;
}

.auth-login-card .auth-remember-row input[type="checkbox"] {
  appearance: none;
  width: clamp(28px, 5vw, 36px);
  height: clamp(28px, 5vw, 36px);
  margin: 0;
  border: 4px solid transparent;
  border-image: url("/images/pixel_frame_tintable.svg") 8 stretch;
  border-radius: 0;
  background: #fffaff;
  background-clip: padding-box;
  background-origin: border-box;
  box-shadow: none;
  cursor: pointer;
  clip-path: none;
}

.auth-login-card .auth-remember-row input[type="checkbox"]:checked {
  background-color: #7e55d0;
  background-image:
    linear-gradient(45deg, transparent 42%, #ffffff 42% 57%, transparent 57%),
    linear-gradient(-45deg, transparent 47%, #ffffff 47% 62%, transparent 62%);
  background-position: 1px 7px, 9px 1px;
  background-repeat: no-repeat;
  background-size: 13px 18px, 20px 24px;
}

.auth-login-card .auth-remember-row input[type="checkbox"]:focus-visible {
  outline: 3px solid rgb(255 238 132 / 88%) !important;
  outline-offset: 2px;
}

.auth-login-card .auth-remember-row span {
  gap: 3px;
}

.auth-login-card .auth-remember-row strong {
  color: #4c2999;
  font-size: clamp(var(--type-body-lg), 3.2vw, var(--type-section-title));
  font-weight: 600;
  line-height: 1.25;
}

.auth-login-card .auth-remember-row small {
  color: #9779d6;
  font-size: clamp(var(--type-small), 2.6vw, var(--type-subtitle));
  line-height: 1.42;
}

.login-shell .auth-login-card .auth-primary-button {
  --login-control-frame-image: url("/images/pixel_frame_settings_primary.svg?v=1");
  width: 100%;
  min-height: clamp(58px, 10.3vw, 74px);
  margin-top: clamp(6px, 1.7vw, 12px);
  padding: 0 18px;
  color: #ffffff !important;
  font: inherit;
  font-size: clamp(var(--type-card-title), 4vw, var(--type-section-title-lg)) !important;
  font-weight: 600;
  text-shadow: 2px 2px 0 rgb(73 26 144 / 40%);
}

.login-shell .auth-login-card .auth-primary-button:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
}

.login-shell .auth-login-card .auth-primary-button:active {
  transform: translateY(4px);
  filter: brightness(.96);
  box-shadow: none !important;
}

/* Password recovery uses the standard filled 48px pixel-frame contract.
   The SVG owns the border and interior, so generic auth control paint must
   stay transparent through focus, hover, active, and responsive states. */
.password-reset-form :where(
  .password-reset-pixel-input,
  .password-reset-pixel-action
),
.password-reset-success-login {
  box-sizing: border-box;
  border: 14px solid transparent !important;
  border-image-source: var(--password-reset-control-frame) !important;
  border-image-slice: 14 fill !important;
  border-image-width: 1 !important;
  border-image-repeat: stretch !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-clip: border-box !important;
  background-origin: border-box !important;
  box-shadow: none !important;
  clip-path: none !important;
  image-rendering: pixelated;
}

.password-reset-form .password-reset-pixel-input {
  --password-reset-control-frame: url("/images/pixel_frame_input.svg");
  width: 100%;
  height: 54px;
  padding: 0 12px;
}

.password-reset-form .password-reset-pixel-input:focus,
.password-reset-form .password-reset-pixel-input:focus-visible {
  border-color: transparent !important;
  outline: 3px solid var(--ui-focus, #5a43bc) !important;
  outline-offset: 2px;
  filter: brightness(.97) saturate(1.08);
}

.password-reset-form .password-reset-pixel-action {
  --password-reset-control-frame: url("/images/pixel_frame_settings_primary.svg?v=1");
  width: 100%;
  min-height: 54px;
  padding: 0 12px;
  color: #fff !important;
  text-shadow: 1px 1px 0 rgb(73 26 144 / 40%);
  white-space: nowrap;
}

.password-reset-form .password-reset-pixel-action:hover {
  filter: brightness(1.03);
  transform: none;
}

.password-reset-form .password-reset-pixel-action:active {
  filter: brightness(.96);
  transform: translateY(1px);
}

.password-reset-form .password-reset-pixel-action:focus-visible {
  outline: 3px solid var(--ui-focus, #5a43bc);
  outline-offset: 2px;
}

.password-reset-form .password-reset-pixel-action:disabled {
  cursor: not-allowed;
  filter: grayscale(.18);
  opacity: .5;
  transform: none;
}

.password-reset-success-action .password-reset-success-login {
  --password-reset-control-frame: url("/images/pixel_frame_settings_primary.svg?v=1");
  display: flex;
  width: 100%;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  margin-left: 0;
  padding: 0 12px;
  color: #fff;
  font-size: var(--type-body);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  text-shadow: 1px 1px 0 rgb(73 26 144 / 40%);
  white-space: nowrap;
  transition: filter .15s ease, transform .15s ease;
}

.password-reset-success-action .password-reset-success-login:hover {
  filter: brightness(1.03);
}

.password-reset-success-action .password-reset-success-login:active {
  filter: brightness(.96);
  transform: translateY(1px);
}

.password-reset-success-action .password-reset-success-login:focus-visible {
  outline: 3px solid var(--ui-focus, #5a43bc);
  outline-offset: 2px;
}

.auth-login-card .auth-mode-prompt {
  margin-top: clamp(14px, 2.7vw, 20px);
  color: #8263c5;
  font-size: clamp(var(--type-body), 2.9vw, var(--type-card-title)) !important;
  font-weight: 600;
  line-height: 1.45;
  text-shadow: 1px 1px 0 #ffffff;
}

.auth-login-card .auth-mode-prompt + .auth-mode-prompt {
  margin-top: clamp(8px, 1.5vw, 11px);
}

.auth-login-card .auth-mode-prompt a {
  color: #7150bd;
  font-weight: 600;
}

.auth-login-card .auth-mode-prompt a[href*="signup"] {
  color: #e66aaf;
}

.auth-login-card .auth-divider {
  margin-top: clamp(17px, 3vw, 22px);
  color: #9779d6;
  font-size: clamp(var(--type-small), 2.3vw, var(--type-body)) !important;
}

.auth-login-card .auth-divider::before,
.auth-login-card .auth-divider::after {
  background: #cdb6ee;
}

.auth-login-card .auth-social-actions {
  grid-template-columns: minmax(0, 1fr);
  margin-top: 20px;
}

.auth-login-card .auth-social-button {
  --login-control-frame-image: url("/images/pixel_frame_input.svg");
  min-height: 48px;
  font-size: clamp(var(--type-small), 2.5vw, var(--type-body-lg)) !important;
}

.auth-login-card .auth-social-button.kakao {
  --login-control-frame-image: url("/images/pixel_frame_kakao.svg");
}

.auth-login-card .auth-social-actions + .auth-mode-prompt,
.auth-login-card > .auth-mode-prompt:last-child {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-top: clamp(24px, 4.2vw, 31px);
  padding: 5px 13px;
  background: rgb(255 250 255 / 34%);
  color: #8569c5;
}

@media (max-width: 639px) {
  .login-shell .auth-page {
    padding-top: 16px;
  }

  .auth-login-card {
    padding-top: 32px;
    padding-right: 9px;
    padding-bottom: 36px;
    padding-left: 9px;
    border-right-width: round(nearest, clamp(11px, 3vw, 22px), 1px) !important;
    border-left-width: round(nearest, clamp(11px, 3vw, 22px), 1px) !important;
  }

  .auth-login-heading {
    height: 76px;
  }

  .auth-login-heading p {
    line-height: 24px;
  }

  .auth-login-heading h1 {
    line-height: 42px;
  }

  .auth-login-card .auth-remember-row input[type="checkbox"] {
    border-width: 4px;
  }
}

/* Settings controls use one filled 48×48 frame contract. The frame asset owns
   the stepped silhouette, outline, shadow, highlight, and surface color. */
.settings-main .settings-section-icon--image {
  width: 30px;
  height: 30px;
  border: 0 !important;
  background: transparent !important;
  color: inherit;
}

.settings-main .settings-section-icon--image.danger {
  border: 0 !important;
  background: transparent !important;
}

.settings-main .settings-section-icon--image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.settings-main .settings-password-section .settings-section-icon--image img {
  width: 27px;
  height: 27px;
}

.settings-main :where(
  .settings-input-field input,
  .settings-consent-checkbox
) {
  --settings-control-frame-image: url("/images/pixel_frame_input.svg");
}

.settings-main .settings-consent-checkbox {
  --settings-control-frame-image: url("/images/pixel_frame_settings_checkbox_compact.svg?v=1");
}

.settings-main :where(.settings-profile-link, .settings-submit-button) {
  --settings-control-frame-image: url("/images/pixel_frame_settings_primary.svg?v=1");
}

.settings-main .settings-deletion-form .danger-button {
  --settings-control-frame-image: url("/images/pixel_frame_settings_danger.svg?v=1");
}

body:has(.unified-page-shell) .settings-main :where(
  .settings-profile-link,
  .settings-input-field input,
  .settings-submit-button,
  .settings-deletion-form .danger-button
) {
  border: 14px solid transparent !important;
  border-image-source: var(--settings-control-frame-image) !important;
  border-image-slice: 14 fill !important;
  border-image-width: 1 !important;
  border-image-repeat: stretch !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-clip: border-box !important;
  background-origin: border-box !important;
  box-shadow: none !important;
  clip-path: none !important;
  image-rendering: pixelated;
}

body:has(.unified-page-shell) .settings-main .settings-input-field input {
  height: 54px !important;
  padding: 0 8px !important;
}

body:has(.unified-page-shell) .settings-main .settings-input-field input:focus-visible {
  outline: 3px solid rgb(90 67 188 / 82%) !important;
  outline-offset: 2px;
  filter: brightness(.98) saturate(1.06);
}

body:has(.unified-page-shell) .settings-main :where(
  .settings-profile-link,
  .settings-submit-button,
  .settings-deletion-form .danger-button
) {
  appearance: none;
  width: 100%;
  min-height: 54px !important;
  padding: 0 12px !important;
  cursor: pointer;
  transition: filter .15s ease, transform .15s ease;
}

body:has(.unified-page-shell) .settings-main :where(
  .settings-profile-link,
  .settings-submit-button
) {
  color: #ffffff !important;
  text-shadow: 1px 1px 0 rgb(73 26 144 / 40%);
}

body:has(.unified-page-shell) .settings-main .settings-deletion-form .danger-button {
  color: #b84f79 !important;
}

.settings-main .settings-social-reauth-actions {
  width: 100%;
  grid-template-columns: minmax(0, 1fr);
  margin-top: 0;
}

.settings-main .settings-social-reauth-button {
  --settings-reauth-frame-image: url("/images/pixel_frame_input.svg?v=1");

  box-sizing: border-box;
  display: flex;
  width: 100%;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 14px solid transparent;
  border-image-source: var(--settings-reauth-frame-image);
  border-image-slice: 14 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  background-clip: border-box;
  background-origin: border-box;
  box-shadow: none;
  clip-path: none;
  color: #4b2d86;
  text-align: center;
  white-space: nowrap;
  image-rendering: pixelated;
  transform: none;
  transition: filter .15s ease, transform .15s ease;
}

.settings-main .settings-social-reauth-button.kakao {
  --settings-reauth-frame-image: url("/images/pixel_frame_kakao.svg?v=1");

  color: #3b3200;
}

.settings-main .settings-social-reauth-button:hover {
  filter: brightness(1.03);
}

.settings-main .settings-social-reauth-button:active {
  filter: brightness(.96);
  transform: translateY(1px);
}

.settings-main .settings-social-reauth-button:focus-visible {
  outline: 3px solid var(--ui-focus, #5a43bc);
  outline-offset: 2px;
}

body:has(.unified-page-shell) .settings-main :where(
  .settings-profile-link,
  .settings-submit-button,
  .settings-deletion-form .danger-button
):hover {
  filter: brightness(1.03);
}

body:has(.unified-page-shell) .settings-main :where(
  .settings-profile-link,
  .settings-submit-button,
  .settings-deletion-form .danger-button
):active {
  box-shadow: none !important;
  filter: brightness(.96);
  transform: translateY(1px) !important;
}

body:has(.unified-page-shell) .settings-main :where(
  .settings-submit-button,
  .settings-deletion-form .danger-button
):disabled {
  cursor: not-allowed;
  filter: grayscale(.18);
  opacity: .5;
  transform: none !important;
}

.settings-main .settings-deletion-form .consent-row {
  display: grid;
  align-items: start;
  gap: 8px;
  padding: 6px 8px;
  font-size: var(--type-small);
  line-height: 1.5;
}

.settings-main .settings-deletion-form .consent-row > p {
  margin: 0;
  line-height: 1.8;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.settings-main .settings-consent-confirm {
  display: inline-flex;
  justify-self: start;
  align-items: center;
  min-height: 44px;
  gap: 8px;
  cursor: pointer;
}

.settings-main .settings-consent-checkbox {
  border: 3px solid transparent;
  border-image-source: var(--settings-control-frame-image);
  border-image-slice: 3 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  clip-path: none;
  image-rendering: pixelated;
  position: relative;
  display: grid;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  cursor: pointer;
  place-items: center;
}

.settings-main .settings-consent-checkbox input {
  appearance: none !important;
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  cursor: pointer;
  opacity: 0;
}

.settings-main .settings-consent-checkbox::after {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 4px;
  border: solid #6845b5;
  border-width: 0 0 2px 2px;
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -66%) rotate(-45deg);
}

.settings-main .settings-consent-checkbox:has(input:checked)::after {
  opacity: 1;
}

.settings-main .settings-consent-checkbox:has(input:focus-visible) {
  outline: 3px solid rgb(90 67 188 / 82%);
  outline-offset: 2px;
}

/* New support ticket page: reuse the home edit-button motif and render every
   form control as one filled pixel surface. */
.support-new-page .support-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #4e5968;
  font-weight: 600;
  text-decoration: none;
}

.support-new-page .support-back-link__icon {
  flex: 0 0 auto;
  clip-path: none;
}

.support-new-page .support-back-link:hover .support-back-link__icon {
  filter: brightness(1.03);
  transform: translateY(-1px);
}

.support-new-page .support-back-link:active .support-back-link__icon {
  transform: translateY(1px);
}

.support-new-page .support-form {
  position: relative;
  z-index: 1;
}

.support-new-page .support-form :where(
  select,
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]),
  textarea
) {
  --support-control-frame-image: url("/images/pixel_frame_input.svg");
}

.support-new-page .support-form .support-submit {
  --support-control-frame-image: url("/images/pixel_frame_support_primary.svg?v=1");
}

body:has(.unified-page-shell) .support-new-page .support-form :where(
  select,
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]),
  textarea,
  .support-submit
) {
  border: 14px solid transparent !important;
  border-image-source: var(--support-control-frame-image) !important;
  border-image-slice: 14 fill !important;
  border-image-width: 1 !important;
  border-image-repeat: stretch !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-clip: border-box !important;
  background-origin: border-box !important;
  box-shadow: none !important;
  clip-path: none !important;
  image-rendering: pixelated;
}

body:has(.unified-page-shell) .support-new-page .support-form :where(
  select,
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"])
) {
  height: 54px !important;
  padding: 0 8px !important;
}

body:has(.unified-page-shell) .support-new-page .support-form select {
  padding-right: 28px !important;
}

body:has(.unified-page-shell) .support-new-page .support-form textarea {
  min-height: 180px;
  padding: 8px !important;
}

body:has(.unified-page-shell) .support-new-page .support-form .support-submit {
  appearance: none;
  width: 100%;
  min-height: 54px;
  justify-self: stretch;
  padding: 0 12px !important;
  color: #ffffff !important;
  text-shadow: 1px 1px 0 rgb(73 26 144 / 40%);
  transition: filter .15s ease, transform .15s ease;
}

body:has(.unified-page-shell) .support-new-page .support-form :where(
  select,
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]),
  textarea,
  .support-submit
):focus-visible {
  outline: 3px solid rgb(90 67 188 / 82%) !important;
  outline-offset: 2px;
}

body:has(.unified-page-shell) .support-new-page .support-form .support-submit:hover {
  filter: brightness(1.03);
}

body:has(.unified-page-shell) .support-new-page .support-form .support-submit:active {
  box-shadow: none !important;
  filter: brightness(.96);
  transform: translateY(1px) !important;
}

/* Success flashes: the 1px stepped outline and green fill live in one
   resizable pixel asset rather than a CSS border and rounded background. */
.support-main .support-success-notice {
  --success-notice-frame-image: url("/images/pixel_notice_support_success.svg?v=4");
  --success-notice-frame-slice: 4;
}

.auth-login-card .notice.success,
.support-main .support-success-notice {
  padding: 10px 12px !important;
  border: calc(var(--success-notice-frame-slice) * 1px) solid transparent !important;
  border-image-source: var(--success-notice-frame-image) !important;
  border-image-slice: var(--success-notice-frame-slice) fill !important;
  border-image-width: 1 !important;
  border-image-repeat: stretch !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-clip: border-box !important;
  background-origin: border-box !important;
  box-shadow: none !important;
  clip-path: none !important;
  line-height: 24px;
  image-rendering: pixelated;
  transform: none;
}

/* Support reply controls: the textarea keeps an exact 1px stepped outline,
   while the compact send action reuses the filled support bevel. */
.support-detail-page .support-reply-form textarea {
  --support-reply-control-frame: url("/images/pixel_frame_support_reply_input.svg?v=5");
}

.support-detail-page .support-reply-form .support-submit {
  --support-reply-control-frame: url("/images/pixel_frame_support_primary.svg?v=1");
}

body:has(.unified-page-shell) .support-detail-page .support-reply-form :where(
  textarea,
  .support-submit
) {
  box-sizing: border-box;
  border: 14px solid transparent !important;
  border-image-source: var(--support-reply-control-frame) !important;
  border-image-slice: 14 fill !important;
  border-image-width: 1 !important;
  border-image-repeat: stretch !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-clip: border-box !important;
  background-origin: border-box !important;
  box-shadow: none !important;
  clip-path: none !important;
  image-rendering: pixelated;
  transform: none;
}

body:has(.unified-page-shell) .support-detail-page .support-reply-form textarea {
  min-height: 140px;
  padding: 8px !important;
}

body:has(.unified-page-shell) .support-detail-page .support-reply-form .support-submit {
  appearance: none;
  width: 120px;
  height: 54px;
  min-height: 54px;
  padding: 0 12px !important;
  color: #ffffff !important;
  text-align: center;
  text-shadow: 1px 1px 0 rgb(73 26 144 / 40%);
  white-space: nowrap;
  transition: filter .15s ease, transform .15s ease;
}

body:has(.unified-page-shell) .support-detail-page .support-reply-form :where(
  textarea,
  .support-submit
):focus-visible {
  outline: 3px solid rgb(90 67 188 / 82%) !important;
  outline-offset: 2px;
}

body:has(.unified-page-shell) .support-detail-page .support-reply-form .support-submit:hover {
  filter: brightness(1.03);
}

body:has(.unified-page-shell) .support-detail-page .support-reply-form .support-submit:active {
  box-shadow: none !important;
  filter: brightness(.96);
  transform: translateY(1px) !important;
}

body:has(.unified-page-shell) .support-detail-page .support-reply-form .support-submit:disabled {
  cursor: not-allowed;
  filter: grayscale(.18);
  opacity: .5;
  transform: none !important;
}

/* Counterpart create/edit controls use one filled 48x48 frame contract. The
   selected asset owns each stepped corner, contour, bevel, and surface fill. */
.counterpart-profile-form .input-field :where(input, select) {
  --counterpart-control-frame: url("/images/pixel_frame_input.svg?v=1");
}

.counterpart-profile-form .counterpart-submit-button {
  --counterpart-control-frame: url("/images/pixel_frame_settings_primary.svg?v=1");
}

body:has(.unified-page-shell) .counterpart-profile-form :where(
  .input-field input,
  .input-field select,
  .counterpart-submit-button
) {
  box-sizing: border-box;
  border: 14px solid transparent !important;
  border-image-source: var(--counterpart-control-frame) !important;
  border-image-slice: 14 fill !important;
  border-image-width: 1 !important;
  border-image-repeat: stretch !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-clip: border-box !important;
  background-origin: border-box !important;
  box-shadow: none !important;
  clip-path: none !important;
  image-rendering: pixelated;
}

body:has(.unified-page-shell) .counterpart-profile-form .input-field :where(input, select) {
  height: 54px !important;
  padding: 0 8px !important;
}

body:has(.unified-page-shell) .counterpart-profile-form .input-field select {
  padding-right: 28px !important;
}

body:has(.unified-page-shell) .counterpart-profile-form .input-field :where(input, select):focus-visible {
  border-color: transparent !important;
  outline: 3px solid rgb(90 67 188 / 82%) !important;
  outline-offset: 2px;
  filter: brightness(.98) saturate(1.06);
}

body:has(.unified-page-shell) .counterpart-profile-form .input-field :where(input, select):disabled {
  cursor: not-allowed;
  filter: grayscale(.18);
  opacity: .55;
}

/* Counterpart checkboxes are fixed-size pixel controls, so each state is a
   complete non-stretched surface instead of a native browser outline. */
.counterpart-profile-form input[type="checkbox"] {
  --counterpart-checkbox-image: url("/images/pixel_checkbox_birth_profile.svg?v=4");
}

.counterpart-profile-form input[type="checkbox"]:checked {
  --counterpart-checkbox-image: url("/images/pixel_checkbox_birth_profile_checked.svg?v=4");
}

.counterpart-profile-form .consent-row {
  line-height: 28px;
}

body:has(.unified-page-shell) .counterpart-profile-form input[type="checkbox"] {
  appearance: none;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-image: var(--counterpart-checkbox-image) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 18px 18px !important;
  box-shadow: none !important;
  clip-path: none !important;
  cursor: pointer;
  flex: 0 0 auto;
  image-rendering: pixelated;
  transform: none;
}

body:has(.unified-page-shell) .counterpart-profile-form input[type="checkbox"]:focus-visible {
  outline: 3px solid rgb(90 67 188 / 82%) !important;
  outline-offset: 2px;
}

body:has(.unified-page-shell) .counterpart-profile-form input[type="checkbox"]:disabled {
  cursor: not-allowed;
  filter: grayscale(.18);
  opacity: .55;
}

body:has(.unified-page-shell) .counterpart-profile-form .counterpart-submit-button {
  appearance: none;
  width: 100%;
  height: 54px !important;
  min-height: 54px !important;
  padding: 0 12px !important;
  color: #ffffff !important;
  font: inherit;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  text-shadow: 1px 1px 0 rgb(73 26 144 / 40%);
  white-space: nowrap;
  cursor: pointer;
  transform: none;
  transition: filter .15s ease, transform .15s ease;
}

body:has(.unified-page-shell) .counterpart-profile-form .counterpart-submit-button:hover {
  filter: brightness(1.03);
}

body:has(.unified-page-shell) .counterpart-profile-form .counterpart-submit-button:active {
  box-shadow: none !important;
  filter: brightness(.96);
  transform: translateY(1px) !important;
}

body:has(.unified-page-shell) .counterpart-profile-form .counterpart-submit-button:focus-visible {
  border-color: transparent !important;
  outline: 3px solid var(--ui-focus, #5a43bc) !important;
  outline-offset: 2px;
}

body:has(.unified-page-shell) .counterpart-profile-form .counterpart-submit-button:disabled {
  cursor: not-allowed;
  filter: grayscale(.18);
  opacity: .5;
  transform: none !important;
}

/* Birth-profile edit controls keep their surface color inside one pixel frame.
   The 48×48 assets render a 1px outline while preserving full 14px corners. */
.birth-profile-form-card > header > .birth-profile-form-icon {
  display: grid;
  width: 44px;
  height: 42px;
  border: 0 !important;
  background: transparent !important;
  color: inherit;
  place-items: center;
}

.birth-profile-form-icon img {
  display: block;
  width: 44px;
  height: 40px;
  object-fit: contain;
  image-rendering: pixelated;
}

.birth-profile-form .input-field :where(input, select),
.birth-profile-form .birth-profile-native-frame {
  --birth-profile-control-frame: url("/images/pixel_frame_birth_profile_input.svg?v=5");
}

.birth-profile-form .segmented-control {
  --birth-profile-control-frame: url("/images/pixel_frame_birth_profile_segment.svg?v=5");
}

body:has(.unified-page-shell) .birth-profile-form :where(
  .input-field > input,
  .input-field select,
  .birth-profile-native-frame,
  .segmented-control
) {
  box-sizing: border-box;
  border: 14px solid transparent !important;
  border-image-source: var(--birth-profile-control-frame) !important;
  border-image-slice: 14 fill !important;
  border-image-width: 1 !important;
  border-image-repeat: stretch !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-clip: border-box !important;
  background-origin: border-box !important;
  box-shadow: none !important;
  clip-path: none !important;
  image-rendering: pixelated;
}

body:has(.unified-page-shell) .birth-profile-form .input-field :where(input, select) {
  height: 54px !important;
  padding: 0 8px !important;
}

body:has(.unified-page-shell) .birth-profile-form .input-field select {
  padding-right: 28px !important;
}

/* Keep native date/time sizing independent of the pixel frame on iOS. */
.birth-profile-form > .input-field {
  min-width: 0;
}

body:has(.unified-page-shell) .birth-profile-form .birth-profile-native-frame {
  display: block;
  width: 100%;
  min-width: 0;
  height: 54px;
  margin: 0;
  padding: 0 8px;
}

body:has(.unified-page-shell) .birth-profile-form .birth-profile-native-frame > input {
  display: block;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 100% !important;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  border-image: none !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
}

body:has(.unified-page-shell) .birth-profile-form .birth-profile-native-frame:focus-within {
  outline: 2px solid #936bd3;
  outline-offset: 2px;
}

body:has(.unified-page-shell) .birth-profile-form .segmented-control {
  --birth-profile-segment-inset: 4px;
  --birth-profile-segment-overlap: calc(14px - var(--birth-profile-segment-inset));

  position: relative;
  height: 54px;
  gap: 3px;
  overflow: visible;
  padding: 0 !important;
}

body:has(.unified-page-shell) .birth-profile-form .segmented-control label {
  position: relative;
}

body:has(.unified-page-shell) .birth-profile-form .segmented-control span {
  position: absolute;
  top: calc(-1 * var(--birth-profile-segment-overlap));
  right: 0;
  bottom: calc(-1 * var(--birth-profile-segment-overlap));
  left: 0;
  box-sizing: border-box;
  min-height: 0;
  border-radius: 0;
  pointer-events: none;
}

body:has(.unified-page-shell) .birth-profile-form .segmented-control label:first-of-type span {
  left: calc(-1 * var(--birth-profile-segment-overlap));
}

body:has(.unified-page-shell) .birth-profile-form .segmented-control label:last-of-type span {
  right: calc(-1 * var(--birth-profile-segment-overlap));
}

/* Selected segments use the same 48×48 silhouette and 14px corner extent as
   their outer frame, so both end caps keep one consistent pixel radius. */
:is(
  .calendar-kind-switch,
  .lunar-kind-switch,
  .birth-profile-form .segmented-control
) input:checked + span {
  box-sizing: border-box;
  border: 14px solid transparent;
  border-image-source: url("/images/pixel_frame_birth_profile_segment_selected.svg?v=2");
  border-image-slice: 14 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  background-clip: border-box;
  background-origin: border-box;
  box-shadow: none;
  clip-path: none;
  color: #ffffff;
  image-rendering: pixelated;
}

.birth-profile-form .check-row input[type="checkbox"] {
  appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent url("/images/pixel_checkbox_birth_profile.svg?v=4") center / 18px 18px no-repeat;
  box-shadow: none;
  clip-path: none;
  image-rendering: pixelated;
  transform: none;
}

.birth-profile-form .check-row input[type="checkbox"]:checked {
  background-image: url("/images/pixel_checkbox_birth_profile_checked.svg?v=4");
}

.birth-profile-form .check-row input[type="checkbox"]:focus-visible {
  outline: 3px solid rgb(90 67 188 / 82%) !important;
  outline-offset: 2px;
}

/* The former left rail is replaced by the standard stepped Tamami contour. */
body:has(.unified-page-shell) .birth-profile-form .correction-change-notice {
  --birth-profile-change-frame: url("/images/pixel_notice_birth_profile_change.svg?v=3");

  padding: 8px 10px !important;
  border: 14px solid transparent !important;
  border-image-source: var(--birth-profile-change-frame) !important;
  border-image-slice: 14 fill !important;
  border-image-width: 1 !important;
  border-image-repeat: stretch !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-clip: border-box !important;
  background-origin: border-box !important;
  box-shadow: none !important;
  clip-path: none !important;
  image-rendering: pixelated;
}

/* 예시/미리보기 뱃지는 외곽선, 계단 모서리, 채움을 하나의 compact 9-slice SVG로 렌더링한다. */
.dashboard-service-card__badge--preview,
.dashboard-service-card__badge--free,
.guest-example-badge {
  --compact-badge-frame: url("/images/pixel_badge_report_preview.svg?v=1");
  --compact-badge-slice: 4;

  box-sizing: border-box;
  display: inline-flex;
  width: max-content;
  height: 22px;
  min-height: 22px;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border: calc(var(--compact-badge-slice) * 1px) solid transparent;
  border-image-source: var(--compact-badge-frame);
  border-image-slice: var(--compact-badge-slice) fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  background-clip: border-box;
  background-origin: border-box;
  box-shadow: none;
  clip-path: none;
  color: #68429d;
  font-size: var(--type-caption);
  font-weight: 800;
  line-height: 1;
  image-rendering: pixelated;
  transform: none;
}

.dashboard-service-card__badge--free {
  --compact-badge-frame: url("/images/pixel_badge_home_free.svg?v=1");
}

.person-core-preview { min-width: 0; }
.person-core-preview__snapshot-note { margin: 14px 0 0; padding: 11px 13px; border-left: 3px solid #9a70df; background: #f5effb; color: #755f8e; font-size: var(--type-label); line-height: 1.65; }
.person-core-preview .preview-excerpt-card { position: relative; overflow: hidden; }
.person-core-preview__fade {
  --person-core-preview-fade-gutter: 24px;

  position: relative;
  display: grid;
  min-height: 88px;
  align-content: end;
  gap: 9px;
  margin: 14px calc(var(--person-core-preview-fade-gutter) * -1)
    calc(var(--person-core-preview-fade-gutter) * -1);
  padding: 30px var(--person-core-preview-fade-gutter) 18px;
  background: rgb(251 245 254 / 88%);
  pointer-events: none;
}
.five-element-profile .person-core-preview__fade {
  background: rgb(248 240 252 / 90%);
}
.person-core-preview__fade i {
  display: block;
  height: 8px;
  border-radius: 0;
  background: #dfd1ed;
  filter: blur(2px);
  opacity: .54;
}
.person-core-preview__fade i:nth-child(1) { width: 92%; }
.person-core-preview__fade i:nth-child(2) { width: 76%; }
.person-core-preview__fade i:nth-child(3) { width: 58%; }
.person-core-preview__unlock {
  display: grid;
  justify-items: center;
  margin-top: 28px;
  padding: 28px 24px;
  border: 1px solid #ccb7ec;
  background: #f9f2fc;
  text-align: center;
}
.person-core-preview__unlock > span { color: #9a70df; font-size: var(--type-section-title-lg); }
.person-core-preview__unlock h2 { margin: 5px 0 0; color: #4f2aa5; font-size: var(--type-section-title-lg); }
.person-core-preview__unlock p { margin: 10px 0 0; color: #705d89; font-size: var(--type-body); line-height: 1.65; word-break: keep-all; }
.person-core-preview__unlock small { margin-top: 5px; color: #917da9; font-size: var(--type-label); line-height: 1.55; }
.person-core-preview__unlock form { width: 100%; margin-top: 20px; }
.person-core-preview__unlock-action {
  --person-core-preview-action-frame: url("/images/pixel_frame_settings_primary.svg?v=1");

  appearance: none;
  box-sizing: border-box;
  display: flex;
  width: 100%;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  padding: 0 12px;
  border: 14px solid transparent;
  border-image-source: var(--person-core-preview-action-frame);
  border-image-slice: 14 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  background-clip: border-box;
  background-origin: border-box;
  box-shadow: none;
  clip-path: none;
  color: #fff;
  cursor: pointer;
  font-size: var(--type-body);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  text-shadow: 1px 1px 0 rgb(73 26 144 / 40%);
  white-space: nowrap;
  image-rendering: pixelated;
  transition: filter .15s ease, transform .15s ease;
}
.person-core-preview__unlock form .person-core-preview__unlock-action { margin-top: 0; }
.person-core-preview__unlock-action:hover { filter: brightness(1.03); }
.person-core-preview__unlock-action:active { filter: brightness(.96); transform: translateY(1px); }
.person-core-preview__unlock-action:focus-visible { outline: 3px solid var(--ui-focus, #5a43bc); outline-offset: 2px; }
.report-credit-dialog-confirm:focus-visible { outline: 3px solid var(--ui-focus, #5a43bc); outline-offset: 2px; }
.wallet-catalog-section { scroll-margin-top: 24px; }

@media (max-width: 639px) {
  .person-core-preview__fade { --person-core-preview-fade-gutter: 16px; }
  .ten-god-fortune .person-core-preview__fade { --person-core-preview-fade-gutter: 17px; }
  .person-core-preview__unlock { padding: 23px 16px; }
}

/* Tamami decoration operations */
.admin-decoration-rollout,
.admin-decoration-item-form,
.decoration-owned-inventory {
  border: 1px solid #dde2e7;
  border-radius: 8px;
  background: #fff;
}
.admin-decoration-rollout { margin-bottom: 20px; padding: 20px; }
.admin-decoration-rollout > header p,
.admin-decoration-table-heading span,
.admin-decoration-fieldset .admin-field-hint {
  margin: 5px 0 0;
  color: #687383;
  font-size: var(--type-caption);
  line-height: 1.55;
}
.admin-decoration-rollout-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.admin-decoration-rollout-grid article {
  padding: 14px;
  border: 1px solid #dfe5eb;
  border-radius: 7px;
  background: #f9fafb;
}
.admin-decoration-rollout-grid h3 { margin: 0 0 10px; font-size: var(--type-body); }
.admin-decoration-rollout-grid form { display: grid; gap: 9px; }
.admin-decoration-rollout-grid .admin-confirm-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: #313a47;
  font-size: var(--type-caption);
}
.admin-decoration-rollout-grid .admin-confirm-check input { margin-top: 3px; }
.admin-decoration-rollout-grid .admin-confirm-check span { display: grid; gap: 2px; }
.admin-decoration-rollout-grid .admin-confirm-check small { color: #768191; }
.admin-decoration-rollout-grid form > label:last-of-type {
  display: grid;
  gap: 5px;
  color: #526071;
  font-size: var(--type-caption);
  font-weight: 600;
}
.admin-decoration-rollout-grid input[type="text"] {
  width: 100%;
  height: 38px;
  padding: 0 9px;
  border: 1px solid #cfd5dc;
  border-radius: 5px;
  background: #fff;
}
.admin-decoration-search-panel { display: block; }
.admin-decoration-search {
  display: grid !important;
  grid-template-columns: minmax(180px, 1.4fr) repeat(3, minmax(120px, .8fr)) auto auto;
  align-items: end;
  gap: 9px !important;
  width: 100%;
}
.admin-decoration-search label {
  display: grid;
  gap: 5px;
  color: #526071;
  font-size: var(--type-caption);
  font-weight: 600;
}
.admin-decoration-search input,
.admin-decoration-search select {
  width: 100% !important;
  height: 40px !important;
  padding: 0 10px;
  border: 1px solid #cfd5dc;
  border-radius: 5px;
  background: #fff;
}
.admin-decoration-table-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.admin-decoration-table-heading h2 { margin: 0; font-size: var(--type-body-lg); }
.admin-decoration-table td:first-child { min-width: 210px; }
.admin-decoration-table td:first-child,
.admin-decoration-table td:nth-child(2),
.admin-decoration-table td:nth-child(3) { vertical-align: middle; }
.admin-decoration-table td:first-child { display: flex; align-items: center; gap: 10px; }
.admin-decoration-table td:first-child img {
  flex: 0 0 auto;
  border: 1px solid #e1e5eb;
  border-radius: 6px;
  background: #f5f1fa;
  object-fit: contain;
}
.admin-decoration-table td span,
.admin-decoration-table td small { display: block; }
.admin-decoration-table td small { margin-top: 3px; color: #7a8491; font-size: var(--type-caption); }
.admin-pagination .disabled { pointer-events: none; cursor: default; opacity: .45; }
.admin-decoration-item-form { max-width: 880px; padding: 22px; }
.admin-decoration-fieldset {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 18px;
  border: 1px solid #dfe5eb;
  border-radius: 7px;
}
.admin-decoration-fieldset legend {
  padding: 0 7px;
  color: #303b49;
  font-size: var(--type-body);
  font-weight: 700;
}
.admin-decoration-item-form input:not([type="submit"]),
.admin-decoration-item-form select,
.admin-decoration-item-form textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 10px 11px;
  border: 1px solid #cfd5dc;
  border-radius: 6px;
  background: #fff;
  color: #202632;
  font: inherit;
}
.admin-decoration-item-form input:not([type="submit"]),
.admin-decoration-item-form select { height: 43px; }
.admin-decoration-item-form input[readonly] { background: #f1f3f5; color: #65707d; }
.admin-decoration-item-form textarea { min-height: 90px; line-height: 1.55; resize: vertical; }
.admin-decoration-item-form [aria-invalid="true"] { border-color: #b4232d; }
.admin-decoration-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.admin-decoration-form-grid > div { display: grid; align-content: start; gap: 6px; }
.admin-decoration-thumbnail {
  width: 140px;
  height: 100px;
  margin-top: 6px;
  border: 1px solid #dfe5eb;
  border-radius: 6px;
  background: #f5f1fa;
  object-fit: contain;
}
.admin-decoration-form-actions { display: flex; justify-content: flex-end; gap: 9px; }

.decoration-owned-inventory { margin-top: 18px; padding: 18px; }
.decoration-owned-inventory > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}
.decoration-owned-inventory > header p { margin: 0; color: #8a62ac; font-size: var(--type-caption); font-weight: 700; }
.decoration-owned-inventory > header h2 { margin: 3px 0 0; font-size: var(--type-section-title); }
.decoration-owned-inventory > header > span { color: #776985; font-size: var(--type-caption); }
.decoration-owned-groups { display: grid; gap: 18px; margin-top: 17px; }
.decoration-owned-groups section > h3 { margin: 0 0 9px; color: #6a4a82; font-size: var(--type-body); }
.decoration-owned-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.decoration-owned-card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 9px;
  border: 1px solid #ddcfea;
  border-radius: 6px;
  background: #fffbff;
}
.decoration-owned-card.is-selected { border-color: #9270b6; background: #f5edfb; }
.decoration-owned-card img { width: 52px; height: 52px; object-fit: contain; }
.decoration-owned-card > div { display: grid; min-width: 0; gap: 2px; }
.decoration-owned-card strong { overflow: hidden; font-size: var(--type-label); text-overflow: ellipsis; white-space: nowrap; }
.decoration-owned-card small { color: #867692; font-size: var(--type-caption); }
.decoration-owned-card form { margin: 0; }
.decoration-owned-card .decoration-apply-button { min-height: 34px; padding: 0 9px; white-space: nowrap; }
.decoration-owned-empty { margin: 17px 0 0; color: #887994; text-align: center; }

@media (max-width: 980px) {
  .admin-decoration-rollout-grid,
  .decoration-owned-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-decoration-search { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 639px) {
  .admin-decoration-rollout { padding: 15px; }
  .admin-decoration-rollout-grid,
  .admin-decoration-search,
  .admin-decoration-form-grid,
  .decoration-owned-grid { grid-template-columns: minmax(0, 1fr); }
  .admin-decoration-item-form { padding: 15px; }
  .admin-decoration-fieldset { padding: 14px; }
  .admin-decoration-form-actions { align-items: stretch; flex-direction: column-reverse; }
  .admin-decoration-form-actions > * { width: 100%; text-align: center; }
  .decoration-owned-inventory > header { align-items: flex-start; flex-direction: column; }
  .decoration-owned-card { grid-template-columns: 48px minmax(0, 1fr); }
  .decoration-owned-card > form,
  .decoration-owned-card > .decoration-state-badge { grid-column: 1 / -1; }
}

/* Selected-day fortune: reuse the fortune shell and filled Tamami pixel surfaces. */
.selected-day-main { padding-bottom: 72px; }
.selected-day-picker {
  --selected-day-frame: url("/images/dashboard_shortcut_frame.svg?v=1");
  margin-top: 16px;
  padding: 20px;
  border: 14px solid transparent;
  border-image-source: var(--selected-day-frame);
  border-image-slice: 14 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  background-clip: border-box;
  background-origin: border-box;
  box-shadow: none;
  clip-path: none;
  image-rendering: pixelated;
}
.selected-day-picker header > p { margin: 0; color: #9a70df; font-size: var(--type-label); font-weight: 600; }
.selected-day-picker h2 { margin: 4px 0 0; color: #5632a2; font-size: var(--type-page-title); }
.selected-day-picker header > span { display: block; margin-top: 8px; color: #75658a; font-size: var(--type-small); line-height: 1.6; word-break: keep-all; }
.selected-day-form { display: grid; gap: 10px; margin-top: 22px; }
.selected-day-form > label { color: #624b83; font-size: var(--type-small); font-weight: 600; }
.selected-day-form input[type="date"] {
  --selected-day-input-frame: url("/images/pixel_frame_input.svg?v=1");
  box-sizing: border-box;
  width: 100%;
  min-height: 58px;
  padding: 0 8px;
  border: 14px solid transparent;
  border-image-source: var(--selected-day-input-frame);
  border-image-slice: 14 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  background-clip: border-box;
  background-origin: border-box;
  box-shadow: none;
  clip-path: none;
  color: #493461;
  font: inherit;
  image-rendering: pixelated;
}
.selected-day-form > p { min-height: 20px; margin: 0; color: #8b769f; font-size: var(--type-caption); line-height: 1.5; }
.selected-day-form [data-selected-day-status]:not(:empty) { color: #9a4d67; font-weight: 600; }
.selected-day-submit {
  --tamami-action-frame: url("/images/pixel_frame_settings_primary.svg?v=1");
  box-sizing: border-box;
  display: flex;
  width: 100%;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 14px solid transparent;
  border-image-source: var(--tamami-action-frame);
  border-image-slice: 14 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  background-clip: border-box;
  background-origin: border-box;
  box-shadow: none;
  clip-path: none;
  color: #fff;
  font: inherit;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  text-shadow: 1px 1px 0 rgb(73 26 144 / 40%);
  white-space: nowrap;
  image-rendering: pixelated;
  transition: filter .15s ease, transform .15s ease;
}
.selected-day-submit:hover { filter: brightness(1.03); }
.selected-day-submit:active { filter: brightness(.96); transform: translateY(1px); }
.selected-day-submit:focus-visible { outline: 3px solid var(--ui-focus, #5a43bc); outline-offset: 2px; }
.selected-day-submit:disabled { cursor: not-allowed; filter: grayscale(.18); opacity: .5; transform: none; }
.selected-day-form > small { color: #806d99; font-size: var(--type-caption); text-align: center; }
.selected-day-recent { margin-top: 24px; }
.selected-day-recent > header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.selected-day-recent h2 { margin: 0; color: #5632a2; font-size: var(--type-section-title); }
.selected-day-recent header a { color: #6845b5; font-size: var(--type-small); font-weight: 600; }
.selected-day-recent > div { display: grid; gap: 8px; margin-top: 12px; }
.selected-day-result-actions > a { color: #5d3aa8; font-weight: 600; text-decoration: none; }
.selected-day-recent-card {
  --tamami-frame-image: url("/images/pixel_frame_selected_day_recent.svg?v=1");
  display: block;
  box-sizing: border-box;
  min-width: 0;
  padding: 10px 14px;
  border: 14px solid transparent;
  border-image-source: var(--tamami-frame-image);
  border-image-slice: 14 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  background-clip: border-box;
  background-origin: border-box;
  box-shadow: none;
  clip-path: none;
  image-rendering: pixelated;
  color: #6b667a;
  text-decoration: none;
}
.selected-day-recent-card:hover { filter: brightness(.98); }
.selected-day-recent-card:focus-visible { outline: 3px solid var(--ui-focus, #5a43bc); outline-offset: 3px; }
.selected-day-result-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 28px; }
.selected-day-result-actions > a { padding: 13px; text-align: center; }
.selected-day-deep-dive { margin-top: 38px; }
.selected-day-deep-dive > header { margin-bottom: 18px; }
.selected-day-deep-dive > header p { margin: 0; color: #9a70df; font-size: var(--type-label); font-weight: 600; }
.selected-day-deep-dive > header h2 { margin: 5px 0 0; color: #5632a2; font-size: var(--type-section-title-lg); }
.selected-day-deep-dive .narrative-section {
  --selected-day-deep-dive-frame: url("/images/fortune-summary-frame.png?v=1");

  border: 18px solid transparent;
  border-image-source: var(--selected-day-deep-dive-frame);
  border-image-slice: 80 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  background-clip: border-box;
  background-origin: border-box;
  box-shadow: none;
  clip-path: none;
  image-rendering: pixelated;
}

@media (max-width: 639px) {
  .selected-day-picker { padding: 17px 12px; }
  .selected-day-result-actions { grid-template-columns: 1fr; }
}

/* Seven destiny notes: shared Tamami reading system. */
html:has(.tamami-reading), body:has(.tamami-reading) {
  /* Match the supplied artwork's lower edge, then fade its remaining texture. */
  --tamami-reading-page: #f9f1fd;
  background-color: var(--tamami-reading-page);
  background-image: none;
}
html:has(.tamami-reading) { scroll-padding-block: 90px 120px; }
body:has(.tamami-reading) { position: relative; isolation: isolate; }
body:has(.tamami-reading)::before {
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  /* Size the artwork and fade together, including when a scrollbar is present. */
  aspect-ratio: 941 / 1672;
  background-image:
    linear-gradient(to bottom, rgb(249 241 253 / 0%) 70%, var(--tamami-reading-page) 100%),
    url("/images/report_destiny_note_background.png");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% auto;
  pointer-events: none;
  content: '';
}
body:has(.tamami-reading) .app-header::before { background: transparent; }
.tamami-reading {
  --tamami-title: #4c30af;
  --ui-focus: var(--tamami-title);
  --tamami-section-title: #5a43bc;
  --tamami-emphasis: #7762bc;
  --tamami-point: #a18dde;
  --tamami-border-strong: #b5a1ec;
  --tamami-label-surface: #cdbdf3;
  --tamami-border: #dfd1fa;
  --tamami-divider: #f0e9fd;
  --tamami-text: #6b667a;
  --tamami-page: var(--tamami-reading-page);
  --tamami-section: #f8f3fe;
  --tamami-surface: #fff;
  --tamami-accent: #e58bcb;
  --tamami-accent-soft: #fcebfa;
  color: var(--tamami-text);
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.tamami-reading .report-title { margin: 0 0 28px; padding: 8px 4px 0; border: 0; text-align: left; }
.tamami-reading .report-title h1 { margin: 0; color: var(--tamami-title); font-size: var(--type-page-title); line-height: 1.35; font-weight: 600; }
.tamami-reading .report-title > p:last-of-type { margin: 14px 0 0; color: var(--tamami-text); font-size: var(--type-body); line-height: 1.85; }
.tamami-reading .report-title > .tamami-reading-context { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; color: var(--tamami-section-title); font-size: var(--type-label); font-weight: 600; }
.tamami-reading-context::before { content: ''; width: 20px; height: 3px; background: var(--tamami-accent); }
.tamami-reading .section-kicker { margin: 0; color: var(--tamami-section-title); font-size: var(--type-label); font-weight: 600; line-height: 1.6; }
.tamami-reading-report, .tamami-reading-chapters { display: grid; min-width: 0; gap: 28px; }
.tamami-reading :where(h2, h3, h4, p, ol, ul, dl) { min-width: 0; }
.tamami-reading :where(h2, h3, h4) { font-family: inherit; font-weight: 600; }
.tamami-reading :where(p, dd) { font-weight: 400; }
.tamami-reading :where(a, summary):focus-visible { outline: 2px solid var(--tamami-title); outline-offset: 4px; border-radius: 8px; }
.tamami-reading-hero, .tamami-reading-overview, .tamami-reading-toc, .tamami-reading-chapter {
  min-width: 0;
  padding: 28px 32px;
  border: 1px solid var(--tamami-border);
  border-radius: 20px;
  background: var(--tamami-surface);
}
.tamami-reading-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 112px; align-items: center; gap: 24px; overflow: hidden; }
.tamami-reading-hero__copy { position: relative; z-index: 1; min-width: 0; }
.tamami-reading-hero__copy h2 { margin: 12px 0 0; color: var(--tamami-title); font-size: var(--type-section-title); line-height: 1.5; }
.tamami-reading-hero__copy > h2:first-child { margin-top: 0; }
.tamami-reading-hero__copy > strong { display: block; margin-top: 12px; color: var(--tamami-section-title); font-size: var(--type-body-lg); font-weight: 600; line-height: 1.7; }
.tamami-reading-hero__copy > p:last-child { margin: 16px 0 0; color: var(--tamami-text); font-size: var(--type-body); line-height: 1.9; }
.tamami-reading-hero__art { position: relative; z-index: 1; grid-column: 2; grid-row: 1; width: 112px; height: 112px; object-fit: contain; image-rendering: pixelated; }
.tamami-reading-hero::after { position: absolute; top: 0; right: 0; width: 112px; height: 112px; border-radius: 0 0 0 100%; background: var(--tamami-divider); content: ''; }
.tamami-reading-overview > header { margin-bottom: 18px; }
.tamami-reading-overview :where(h2, h3) { margin: 6px 0 10px; color: var(--tamami-section-title); font-size: var(--type-body-lg); line-height: 1.6; }
.tamami-reading-overview > header > :first-child { margin-top: 0; }
.tamami-reading-overview > header > p:last-child { margin: 0; color: var(--tamami-text); font-size: var(--type-body); line-height: 1.85; }
.tamami-reading-toc { background: var(--tamami-section); }
.tamami-reading-toc:not([open]) { padding-block: 12px; }
.tamami-reading-toc > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; color: var(--tamami-section-title); cursor: pointer; list-style: none; }
.tamami-reading-toc > summary::-webkit-details-marker { display: none; }
.tamami-reading-toc > summary::marker { content: ''; }
.tamami-reading-toc h2 { margin: 0; color: var(--tamami-section-title); font-size: var(--type-body-lg); line-height: 1.5; }
.tamami-reading-toc > nav { margin-top: 14px; }
.tamami-reading-toc ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin: 0; padding: 0; list-style: none; }
.tamami-reading-toc a { display: grid; grid-template-columns: 26px minmax(0, 1fr) 14px; align-items: center; gap: 8px; min-height: 48px; padding: 10px 0; border-bottom: 1px solid var(--tamami-border); color: var(--tamami-section-title); font-size: var(--type-small); line-height: 1.7; text-decoration: none; }
.tamami-reading-toc-number { font-size: var(--type-label); font-variant-numeric: tabular-nums; }
.tamami-reading-toc-summary { grid-column: 1 / -1; }
.tamami-reading-toc-summary a { grid-template-columns: minmax(0, 1fr) 14px; }
.tamami-reading-toc svg { width: 14px; height: 14px; color: var(--tamami-border-strong); }
.tamami-reading-toc > summary svg { flex: 0 0 auto; }
.tamami-reading-toc[open] > summary svg { transform: rotate(180deg); }
.tamami-reading-toc a:hover { text-decoration: underline; text-underline-offset: 4px; }
.tamami-reading-chapter { scroll-margin-top: 24px; }
.tamami-reading-heading { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 20px; }
.tamami-reading-heading > span:first-child { display: grid; flex: 0 0 32px; min-height: 32px; padding: 4px; place-items: center; border-radius: 9px; background: var(--tamami-label-surface); color: var(--tamami-title); font-size: var(--type-label); font-weight: 600; line-height: 1.6; }
.tamami-reading-heading h2 { margin: 3px 0 0; color: var(--tamami-section-title); font-size: var(--type-body-lg); line-height: 1.55; }
.tamami-reading .work-money-section__emoji { display: none; }
.tamami-reading-chapter > h3 { margin: 0 0 24px; color: var(--tamami-title); font-size: var(--type-section-title); line-height: 1.55; }
.tamami-reading-summary {
  border-color: var(--tamami-label-surface);
  background:
    radial-gradient(ellipse at top right, var(--tamami-accent-soft), transparent 60%),
    linear-gradient(135deg, var(--tamami-divider), var(--tamami-section) 65%, var(--tamami-surface));
}
.tamami-reading-summary .tamami-reading-heading { margin-bottom: 16px; }
.tamami-reading-summary .tamami-reading-heading h2 { margin-top: 0; }
.tamami-reading-prose { display: grid; gap: 18px; }
.tamami-reading-prose p { margin: 0; color: var(--tamami-text); font-size: var(--type-body); line-height: 1.9; }
.tamami-reading-list, .tamami-reading-cards { display: grid; gap: 14px; margin: 24px 0 0; padding: 0; list-style: none; }
.tamami-reading-list > li { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: start; gap: 12px; padding: 18px; border: 1px solid var(--tamami-border); border-radius: 14px; background: var(--tamami-section); }
.tamami-reading-list > li > span { display: grid; min-height: 28px; place-items: center; color: var(--tamami-title); background: var(--tamami-label-surface); border-radius: 50%; font-size: var(--type-label); line-height: 1.6; }
.tamami-reading-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tamami-reading-cards > li { min-width: 0; padding: 18px; border: 1px solid var(--tamami-border); border-radius: 14px; background: var(--tamami-section); }
.tamami-reading :where(.tamami-reading-list, .tamami-reading-cards) h4 { margin: 0 0 10px; color: var(--tamami-section-title); font-size: var(--type-body-lg); line-height: 1.6; }
.tamami-reading :where(.tamami-reading-list, .tamami-reading-cards) p { margin: 0; color: var(--tamami-text); font-size: var(--type-body); line-height: 1.85; }
.tamami-reading :where(.tamami-reading-list small, .tamami-reading-cards > li > strong, .tamami-reading-cards > li > span) { display: block; margin-bottom: 10px; color: var(--tamami-section-title); font-size: var(--type-small); line-height: 1.7; }
.tamami-reading-clues { display: grid; gap: 12px; margin-top: 26px; }
.tamami-reading-clues details { min-width: 0; border: 1px solid var(--tamami-border); border-radius: 14px; background: var(--tamami-surface); }
.tamami-reading .tamami-reading-clues summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding: 14px 18px; color: var(--tamami-section-title); font-size: var(--type-small); line-height: 1.75; font-weight: 600; cursor: pointer; list-style: none; }
.tamami-reading .tamami-reading-clues summary::-webkit-details-marker { display: none; }
.tamami-reading .tamami-reading-clues summary::after { content: '+'; flex: 0 0 auto; color: var(--tamami-section-title); font-size: var(--type-subtitle); }
.tamami-reading .tamami-reading-clues details[open] > summary::after { content: '−'; }
.tamami-reading .tamami-reading-clues details[open] > summary { margin-bottom: 16px; border-bottom: 1px solid var(--tamami-divider); }
.tamami-reading :where(.tamami-reading-clues details) > :not(summary) { margin: 0 18px 18px; }
.tamami-reading .tamami-reading-clues p { color: var(--tamami-text); font-size: var(--type-body); line-height: 1.85; }
.tamami-reading .tamami-reading-clues ul { display: grid; gap: 10px; padding: 0; list-style: none; }
.tamami-reading-clues dl { display: grid; gap: 12px; padding: 18px; border-radius: 12px; background: var(--tamami-section); }
.tamami-reading-clues dl div { display: grid; grid-template-columns: minmax(0, 112px) minmax(0, 1fr); gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--tamami-divider); font-size: var(--type-small); line-height: 1.8; }
.tamami-reading-clues dl div:last-child { padding-bottom: 0; border-bottom: 0; }
.tamami-reading-clues dt { color: var(--tamami-section-title); }
.tamami-reading-clues dd { margin: 0; color: var(--tamami-text); }
.tamami-reading-timeline { display: grid; gap: 20px; margin: 26px 0 0; padding: 0 0 0 20px; border-left: 1px solid var(--tamami-label-surface); list-style: none; }
.tamami-reading-timeline > li { position: relative; display: grid; grid-template-columns: minmax(0, 112px) minmax(0, 1fr); gap: 20px; align-items: start; }
.tamami-reading-timeline > li::before { position: absolute; top: 8px; left: -25px; width: 9px; height: 9px; border-radius: 50%; background: var(--tamami-point); content: ''; }
.tamami-reading-timeline > li > div:last-child { min-width: 0; padding: 18px; border: 1px solid var(--tamami-border); border-radius: 14px; background: var(--tamami-section); }
.tamami-reading-timeline :where(h3, h4) { margin: 0 0 10px; color: var(--tamami-section-title); font-size: var(--type-body-lg); line-height: 1.6; }
.tamami-reading-timeline p { margin: 0; color: var(--tamami-text); font-size: var(--type-body); line-height: 1.85; }
.tamami-reading-timeline > li > div:first-child { display: grid; gap: 8px; color: var(--tamami-section-title); font-size: var(--type-body); line-height: 1.7; }
.tamami-reading-timeline :where(small, time) { color: var(--tamami-text); font-size: var(--type-small); }
.tamami-reading-timeline > li.is-current::before { background: var(--tamami-accent); }
.tamami-reading-timeline > li.is-current > div:last-child { border-color: var(--tamami-accent); background: var(--tamami-accent-soft); }
.tamami-reading-notice { margin-top: 24px; padding: 18px; border: 1px solid var(--tamami-border); border-radius: 14px; background: var(--tamami-section); color: var(--tamami-text); font-size: var(--type-body); line-height: 1.85; }
.tamami-reading-notice strong { color: var(--tamami-section-title); }
.tamami-reading-notice p { margin: 10px 0 0; }
.tamami-reading .work-money-snapshot > header { display: flex; align-items: center; gap: 10px; }
.tamami-reading .work-money-snapshot > header > span { color: var(--tamami-border-strong); }
.tamami-reading .work-money-snapshot h3 { margin: 0; }
.tamami-reading .work-money-snapshot__lines { display: grid; gap: 18px; }
.tamami-reading .work-money-snapshot__lines p { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; margin: 0; color: var(--tamami-text); font-size: var(--type-body); line-height: 1.85; }
.tamami-reading .work-money-snapshot__lines p span { display: grid; align-self: start; min-height: 28px; place-items: center; border-radius: 50%; background: var(--tamami-label-surface); color: var(--tamami-title); font-size: var(--type-label); }
.tamami-reading .work-money-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; padding: 0; list-style: none; }
.tamami-reading .work-money-tags li { color: var(--tamami-emphasis); font-size: var(--type-small); line-height: 1.8; }
.tamami-reading .work-money-note { margin-top: 24px; padding: 18px; border-left: 2px solid var(--tamami-border-strong); border-radius: 0 12px 12px 0; background: var(--tamami-section); }
.tamami-reading .work-money-note > span { color: var(--tamami-section-title); font-size: var(--type-label); }
.tamami-reading .work-money-note p { margin: 10px 0 0; color: var(--tamami-text); font-size: var(--type-body); line-height: 1.85; }
.tamami-reading .work-money-timing__notice { display: grid; gap: 8px; margin: 24px 0 0; padding-top: 18px; border-top: 1px solid var(--tamami-divider); color: var(--tamami-text); font-size: var(--type-small); line-height: 1.85; }
.tamami-reading .work-money-timing__notice strong { color: var(--tamami-section-title); }
.tamami-reading .life-flow-map ol { display: grid; gap: 0; margin: 0; padding: 0 0 0 24px; border-left: 1px solid var(--tamami-label-surface); list-style: none; }
.tamami-reading .life-flow-map li { position: relative; display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 6px 16px; padding: 16px 0; border-bottom: 1px solid var(--tamami-border); }
.tamami-reading .life-flow-map li::before { position: absolute; left: -29px; top: 23px; width: 9px; height: 9px; border-radius: 50%; background: var(--tamami-point); content: ''; }
.tamami-reading .life-flow-map li > span { color: var(--tamami-section-title); font-size: var(--type-label); line-height: 1.8; }
.tamami-reading .life-flow-map small { color: var(--tamami-text); font-size: var(--type-small); line-height: 1.8; }
.tamami-reading .life-flow-map strong { grid-column: 2; color: var(--tamami-section-title); font-size: var(--type-body); font-weight: 400; line-height: 1.8; }
.tamami-reading .tamami-tendency-reading { display: grid; gap: 24px; }
.tamami-reading .tamami-tendency-reading__header { margin: 0; }
.tamami-reading .tamami-tendency-reading__header > p { margin: 0 0 6px; color: var(--tamami-section-title); font-size: var(--type-label); font-weight: 600; line-height: 1.6; }
.tamami-reading .tamami-tendency-reading__header > h2 { margin: 0; color: var(--tamami-title); font-size: var(--type-section-title); line-height: 1.45; }
.tamami-reading .tamami-tendency-reading__header > small { display: block; margin-top: 10px; color: var(--tamami-text); font-size: var(--type-label); line-height: 1.7; }
.tamami-reading .tamami-tendency-reading > h3 { margin: 0; color: var(--tamami-title); font-size: var(--type-card-title); line-height: 1.55; }
.tamami-reading .tamami-tendency-reading__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: -8px 0 0; padding: 0; list-style: none; }
.tamami-reading .tamami-tendency-reading__tags li { padding: 7px 11px; border: 1px solid var(--tamami-border); border-radius: 999px; background: var(--tamami-section); color: var(--tamami-emphasis); font-size: var(--type-label); line-height: 1.5; }
.tamami-reading .tamami-tendency-reading blockquote { position: relative; margin: 0; padding: 18px 20px 18px 24px; border: 0; border-radius: 0 12px 12px 0; background: var(--tamami-section); color: var(--tamami-title); font-size: var(--type-body-lg); font-weight: 600; line-height: 1.7; word-break: keep-all; overflow-wrap: anywhere; }
.tamami-reading .tamami-tendency-reading blockquote::before { position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--tamami-accent); content: ''; }
.tamami-reading .tamami-tendency-reading__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.tamami-reading .tamami-tendency-reading__cards li { min-width: 0; padding: 18px; border: 1px solid var(--tamami-border); border-radius: 14px; background: var(--tamami-surface); }
.tamami-reading .tamami-tendency-reading__cards li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.tamami-reading .tamami-tendency-reading__cards h4 { margin: 0 0 8px; color: var(--tamami-section-title); font-size: var(--type-body-lg); line-height: 1.55; }
.tamami-reading .tamami-tendency-reading__cards p { margin: 0; color: var(--tamami-text); font-size: var(--type-body); line-height: 1.85; word-break: keep-all; overflow-wrap: anywhere; }
.tamami-reading .life-flow-chapters { display: grid; gap: 28px; margin: 28px 0 0; padding: 0 0 0 20px; border-left: 1px solid var(--tamami-label-surface); list-style: none; }
.tamami-reading .life-flow-chapter { position: relative; min-width: 0; padding: 24px; border: 1px solid var(--tamami-border); border-radius: 16px; }
.tamami-reading .life-flow-chapter::before { position: absolute; left: -26px; top: 30px; width: 9px; height: 9px; border-radius: 50%; background: var(--tamami-point); content: ''; }
.tamami-reading .life-flow-chapter > header { display: grid; gap: 10px; margin-bottom: 20px; }
.tamami-reading .life-flow-chapter > header > span { color: var(--tamami-section-title); font-size: var(--type-body); font-weight: 600; }
.tamami-reading .life-flow-chapter > header small { color: var(--tamami-text); font-size: var(--type-small); line-height: 1.8; }
.tamami-reading .life-flow-chapter h4 { margin: 0; color: var(--tamami-title); font-size: var(--type-card-title); line-height: 1.6; }
.tamami-reading .life-flow-phase-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.tamami-reading .life-flow-phase-pair > div { padding: 16px; border-radius: 12px; background: var(--tamami-section); font-size: var(--type-small); line-height: 1.85; }
.tamami-reading .life-flow-phase-pair span { color: var(--tamami-section-title); font-size: var(--type-label); }
.tamami-reading .life-flow-phase-pair strong { display: block; margin: 8px 0; color: var(--tamami-section-title); font-weight: 400; }
.tamami-reading .life-flow-phase-pair p { margin: 0; color: var(--tamami-text); }
.tamami-reading .life-flow-domains { display: grid; gap: 16px; margin: 24px 0 0; }
.tamami-reading .life-flow-domains > div { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; padding-top: 16px; border-top: 1px solid var(--tamami-divider); font-size: var(--type-body); line-height: 1.85; }
.tamami-reading .life-flow-domains dt { color: var(--tamami-section-title); }
.tamami-reading .life-flow-domains dd { margin: 0; color: var(--tamami-text); }
.tamami-reading .life-flow-chapter__legacy { display: grid; gap: 8px; margin: 24px 0 0; padding: 16px; border-left: 2px solid var(--tamami-border-strong); background: var(--tamami-section); font-size: var(--type-body); line-height: 1.85; }
.tamami-reading .life-flow-chapter__legacy strong { color: var(--tamami-section-title); font-size: var(--type-small); font-weight: 400; }
.tamami-reading .life-flow-clue-line { display: grid; gap: 6px; margin: 18px 0 0; color: var(--tamami-text); font-size: var(--type-small); line-height: 1.85; }
.tamami-reading .life-flow-clue-line strong { color: var(--tamami-section-title); font-weight: 400; }
.tamami-reading :where(.independence-living-periods, .stay-move-periods) { padding-left: 20px; border-left: 1px solid var(--tamami-label-surface); }
.tamami-reading :where(.independence-living-periods, .stay-move-periods) > li { position: relative; background: var(--tamami-surface); }
.tamami-reading :where(.independence-living-periods, .stay-move-periods) > li::before { position: absolute; left: -26px; top: 24px; width: 9px; height: 9px; border-radius: 50%; background: var(--tamami-point); content: ''; }
.tamami-reading :where(.saju-more, .saju-correction-basis) { margin-top: 32px; border-color: var(--tamami-border); background: var(--tamami-surface); box-shadow: none; }
.tamami-reading :where(.saju-more > header h2, .saju-correction-basis h2) { color: var(--tamami-section-title); font-size: var(--type-body-lg); }
.tamami-reading :where(.saju-more > header > p, .saju-correction-basis p) { color: var(--tamami-text); line-height: 1.85; }
.tamami-reading :where(.saju-more-details, .calculation-details, .saju-correction-basis) > summary { color: var(--tamami-section-title); }
.tamami-reading .work-money-saju-overview .report-birth-chart { margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.tamami-reading .saju-more--reading-basis {
  box-sizing: border-box;
  padding: 28px 32px;
  border: 1px solid var(--tamami-border);
  border-radius: 20px;
}
.tamami-reading .saju-more--reading-basis > header { margin-bottom: 22px; }
.tamami-reading .saju-more--reading-basis > header h2 {
  margin-top: 6px;
  color: var(--tamami-title);
  font-size: var(--type-section-title);
  line-height: 1.5;
}
.tamami-reading .saju-more--reading-basis :where(.saju-more-details, .calculation-details, .term-glossary) {
  margin: 10px 0 0;
  padding: 0;
  border: 1px solid var(--tamami-border);
  border-image: none;
  border-radius: 14px;
  background: var(--tamami-surface);
  image-rendering: auto;
}
.tamami-reading .saju-more--reading-basis :where(.saju-more-details, .calculation-details, .term-glossary) > summary {
  box-sizing: border-box;
  min-height: 64px;
  padding: 12px 18px;
}
.tamami-reading .saju-more--reading-basis .term-glossary summary {
  display: flex;
  gap: 16px;
}
.tamami-reading .saju-more--reading-basis .term-glossary summary::before { display: none; }
.tamami-reading .saju-more--reading-basis .term-glossary summary::after {
  margin-left: auto;
  color: var(--tamami-section-title);
  font-size: var(--type-section-title-lg);
  content: '+';
}
.tamami-reading .saju-more--reading-basis .term-glossary[open] summary::after { content: '−'; }
.tamami-reading .saju-more--reading-basis :where(.saju-more-details, .calculation-details, .term-glossary)[open] > summary {
  margin-bottom: 0;
  border-bottom: 1px solid var(--tamami-divider);
}
.tamami-reading .saju-more--reading-basis .saju-raw-explained { padding: 4px 18px 20px; }
.tamami-reading .saju-more--reading-basis .metadata-details .compact-facts { margin: 0 18px 18px; }
.tamami-reading .saju-more--reading-basis .term-glossary-groups { padding: 18px 18px 8px; }
body:has(.unified-page-shell) .lifetime-love-reading-page .saju-correction-basis {
  border: 1px solid var(--tamami-border) !important;
  border-image: none !important;
  border-radius: 14px !important;
  background: var(--tamami-surface) !important;
  background-clip: padding-box !important;
  box-shadow: none !important;
  clip-path: none !important;
}

@media (max-width: 639px) {
  .tamami-reading .report-title { padding-inline: 0; }
  .tamami-reading .report-title h1 { font-size: var(--type-section-title-lg); }
  .tamami-reading-report, .tamami-reading-chapters { gap: 24px; }
  .tamami-reading-hero, .tamami-reading-overview, .tamami-reading-toc, .tamami-reading-chapter { padding: 22px 18px; border-radius: 18px; }
  .tamami-reading-hero { grid-template-columns: minmax(0, 1fr) 64px; gap: 12px; }
  .tamami-reading-hero__copy { display: contents; }
  .tamami-reading-hero__copy > * { position: relative; z-index: 1; grid-column: 1 / -1; }
  .tamami-reading-hero__copy > :first-child { grid-column: 1; grid-row: 1; align-self: center; }
  .tamami-reading-hero__art { width: 64px; height: 64px; grid-column: 2; grid-row: 1; }
  .tamami-reading-hero__copy h2 { margin-top: 0; font-size: var(--type-card-title); }
  .tamami-reading-hero__copy > strong { margin-top: 0; font-size: var(--type-body); }
  .tamami-reading-hero__copy > p:last-child { margin-top: 0; }
  .tamami-reading-toc ol, .tamami-reading-cards, .tamami-reading .life-flow-phase-pair { grid-template-columns: minmax(0, 1fr); }
  .tamami-reading-heading { gap: 10px; }
  .tamami-reading-chapter > h3 { font-size: var(--type-card-title); }
  .tamami-reading-list > li { padding: 16px 14px; gap: 10px; }
  .tamami-reading-clues dl { padding: 14px; }
  .tamami-reading-clues dl div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .tamami-reading-timeline > li { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .tamami-reading-timeline > li > div:first-child { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
  .tamami-reading .life-flow-map li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .tamami-reading .life-flow-map strong { grid-column: 1; }
  .tamami-reading .tamami-tendency-reading { gap: 20px; }
  .tamami-reading .tamami-tendency-reading > h3 { font-size: var(--type-body-lg); }
  .tamami-reading .tamami-tendency-reading blockquote { padding: 16px 16px 16px 20px; font-size: var(--type-body); }
  .tamami-reading .tamami-tendency-reading__cards { grid-template-columns: minmax(0, 1fr); }
  .tamami-reading .tamami-tendency-reading__cards li:last-child:nth-child(odd) { grid-column: auto; }
  .tamami-reading .life-flow-chapters { padding-left: 14px; }
  .tamami-reading .life-flow-chapter { padding: 18px 14px; }
  .tamami-reading .life-flow-chapter::before { left: -20px; }
  .tamami-reading .life-flow-domains > div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .tamami-reading .life-flow-chapter__legacy { padding: 14px; }
  .tamami-reading .saju-more--reading-basis { padding: 22px 18px; border-radius: 18px; }
  .tamami-reading .saju-more--reading-basis :where(.saju-more-details, .calculation-details, .term-glossary) > summary { padding-inline: 14px; }
  .tamami-reading .saju-more--reading-basis .saju-raw-explained { padding-inline: 14px; }
  .tamami-reading .saju-more--reading-basis .metadata-details .compact-facts { margin-inline: 14px; }
  .tamami-reading .saju-more--reading-basis .term-glossary-groups { padding-inline: 14px; }
}

/* Mandatory privacy consent: calm, compact guidance with one Tamami anchor. */
.privacy-consent-main {
  --tamami-title: #4c30af;
  --tamami-section-title: #5a43bc;
  --tamami-emphasis: #7762bc;
  --tamami-border: #dfd1fa;
  --tamami-text: #6b667a;
  --tamami-text-muted: #8f88a6;
  --tamami-section: #f8f3fe;
  --tamami-surface: #fff;

  width: min(calc(100% - 48px), var(--page-content-max));
}

.privacy-consent-main .consent-gate {
  box-sizing: border-box;
  width: min(100%, 400px);
  padding: 28px;
}

.consent-gate-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px;
  align-items: start;
  gap: 14px;
}

.consent-gate-intro > div { min-width: 0; }

.auth-panel.consent-gate .consent-gate-intro h1 {
  color: var(--tamami-title);
  font-size: var(--type-section-title-lg);
  line-height: 1.4;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.auth-panel.consent-gate .supporting-copy {
  margin: 14px 0 0;
  color: var(--tamami-text);
  font-size: var(--type-body);
  line-height: 1.75;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.consent-gate-tamami {
  display: block;
  width: 88px;
  height: auto;
  align-self: end;
  margin-top: 14px;
  image-rendering: pixelated;
}

.privacy-consent-main .stack-form {
  gap: 16px;
  margin-top: 24px;
}

.privacy-consent-main .consent-row {
  padding: 14px;
  color: var(--tamami-text);
  font-size: var(--type-body);
  font-weight: 400;
  line-height: 1.7;
  word-break: keep-all;
}

.privacy-consent-main .consent-row a {
  color: var(--tamami-section-title);
  font-weight: 600;
}

.privacy-consent-main .consent-gate-exit {
  margin: 18px 0 0;
  color: var(--tamami-text-muted);
  font-size: var(--type-small);
  line-height: 1.65;
  text-align: center;
  word-break: keep-all;
}

@media (max-width: 639px) {
  .privacy-consent-main {
    width: min(calc(100% - 48px), var(--page-content-max));
  }

  .privacy-consent-main .consent-gate {
    padding: 22px 18px;
  }

  .consent-gate-intro {
    position: relative;
    display: block;
  }

  .auth-panel.consent-gate .consent-gate-intro h1 {
    max-width: calc(100% - 72px);
    font-size: var(--type-section-title);
  }

  .consent-gate-tamami {
    position: absolute;
    top: 8px;
    right: -4px;
    width: 72px;
    margin: 0;
  }
}

/* Account deletion result: a single calm notice rather than a report hero and status card. */
.deletion-complete-main {
  --tamami-title: #4c30af;
  --tamami-section-title: #5a43bc;
  --tamami-emphasis: #7762bc;
  --tamami-border-strong: #b5a1ec;
  --tamami-border: #dfd1fa;
  --tamami-divider: #f0e9fd;
  --tamami-accent: #e58bcb;
  --tamami-accent-soft: #fcebfa;
  --tamami-text: #6b667a;
  --tamami-text-muted: #8f88a6;
  --tamami-section: #f8f3fe;
  --tamami-surface: #fff;

  display: grid;
  place-items: start center;
}

.deletion-complete-notice {
  box-sizing: border-box;
  width: min(100%, 600px);
  padding: 32px;
  border: 1px solid var(--tamami-border);
  border-radius: 22px;
  background: var(--tamami-surface);
}

.deletion-complete-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 104px;
  align-items: center;
  gap: 20px;
}

.deletion-complete-intro > div { min-width: 0; }

.deletion-complete-kicker {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 10px;
  color: var(--tamami-emphasis);
  font-size: var(--type-label);
  font-weight: 600;
  letter-spacing: .08em;
}

.deletion-complete-kicker span { color: var(--tamami-accent); }

.deletion-complete-intro h1 {
  margin: 0;
  color: var(--tamami-title);
  font-size: var(--type-page-title);
  font-weight: 600;
  line-height: 1.35;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.deletion-complete-intro > div > p:last-child {
  margin: 14px 0 0;
  color: var(--tamami-text);
  font-size: var(--type-body-lg);
  line-height: 1.8;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.deletion-complete-tamami {
  display: block;
  width: 104px;
  height: auto;
  image-rendering: pixelated;
}

.deletion-complete-guidance {
  margin-top: 28px;
  padding: 20px;
  border-left: 3px solid var(--tamami-accent);
  background: var(--tamami-section);
}

.deletion-complete-guidance h2 {
  margin: 0;
  color: var(--tamami-section-title);
  font-size: var(--type-body-lg);
  font-weight: 600;
  line-height: 1.5;
}

.deletion-complete-guidance p {
  margin: 8px 0 0;
  color: var(--tamami-text);
  font-size: var(--type-body);
  line-height: 1.75;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.deletion-complete-status {
  display: flex;
  min-height: 56px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 20px;
  padding: 0 4px 20px;
  border-bottom: 1px solid var(--tamami-divider);
  color: var(--tamami-text-muted);
  font-size: var(--type-small);
}

.deletion-complete-status strong {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--tamami-section-title);
  font-size: var(--type-body);
  font-weight: 600;
}

.deletion-complete-status strong span {
  display: grid;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--tamami-accent-soft);
  color: var(--tamami-section-title);
  font-size: var(--type-label);
  place-items: center;
}

.deletion-complete-action {
  min-height: 48px;
  margin-top: 24px;
}

@media (max-width: 639px) {
  .deletion-complete-main { padding-top: 18px !important; }

  .deletion-complete-notice { padding: 24px 20px; }

  .deletion-complete-intro {
    grid-template-columns: minmax(0, 1fr) 72px;
    align-items: start;
    gap: 12px;
  }

  .deletion-complete-intro h1 { font-size: var(--type-section-title-lg); }

  .deletion-complete-intro > div > p:last-child {
    grid-column: 1 / -1;
    font-size: var(--type-body);
  }

  .deletion-complete-tamami { width: 72px; }

  .deletion-complete-guidance {
    margin-top: 24px;
    padding: 17px 16px;
  }

  .deletion-complete-status {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
    padding-inline: 0;
  }
}

/* Coupon redemption: keep every interactive/card edge on one filled pixel frame. */
.coupon-main > .conversation-page-hero--background-01 {
  --fortune-header-background: url("/images/fortune_header_background_default.png?v=1");
}

body:has(.coupon-page-shell) .coupon-register-card,
body:has(.coupon-page-shell) .coupon-guide,
body:has(.coupon-page-shell) .coupon-guide-grid article,
body:has(.coupon-page-shell) .coupon-policy-note {
  border: 14px solid transparent !important;
  border-image-source: url("/images/pixel_frame_input.svg?v=1") !important;
  border-image-slice: 14 fill !important;
  border-image-width: 1 !important;
  border-image-repeat: stretch !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-clip: border-box !important;
  background-origin: border-box !important;
  box-shadow: none !important;
  clip-path: none !important;
  image-rendering: pixelated;
}

body:has(.coupon-page-shell) .coupon-code-field input {
  border: 14px solid transparent !important;
  border-image-source: var(--coupon-input-frame) !important;
  border-image-slice: 14 fill !important;
  border-image-width: 1 !important;
  border-image-repeat: stretch !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-clip: border-box !important;
  background-origin: border-box !important;
  box-shadow: none !important;
  clip-path: none !important;
}

body:has(.coupon-page-shell) .coupon-code-field input:focus-visible {
  border-color: transparent !important;
  outline: 3px solid #5a43bc !important;
}

body:has(.coupon-page-shell) :is(.coupon-submit-button, .coupon-result-button) {
  border: 14px solid transparent !important;
  border-image-source: var(--coupon-action-frame) !important;
  border-image-slice: 14 fill !important;
  border-image-width: 1 !important;
  border-image-repeat: stretch !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-clip: border-box !important;
  background-origin: border-box !important;
  box-shadow: none !important;
  clip-path: none !important;
}

@media (max-width: 639px) {
  body:has(.coupon-page-shell) .coupon-register-card {
    grid-template-columns: 76px minmax(0, 1fr);
    padding: 12px;
  }

  body:has(.coupon-page-shell) .coupon-guide,
  body:has(.coupon-page-shell) .coupon-guide-grid article {
    padding: 8px;
  }
}

/* Signup email handoff: one clear status, one next action, and quiet recovery details. */
.signup-pending-account-prompt {
  display: grid;
  grid-template-columns: 59px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  margin-bottom: 0;
  padding: 16px 20px;
  border: 1px solid #dfd1fa;
  border-radius: 24px;
  background: rgb(255 255 255 / 88%);
}

.signup-pending-account-prompt > .signup-pending-mail-tamami {
  align-self: center;
  width: 59px;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  object-fit: contain;
}

.signup-pending-account-prompt > div {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.signup-pending-account-prompt > div::before { display: none; }
.signup-pending-account-prompt small {
  color: #7762bc;
  font-size: var(--type-label);
  font-weight: 600;
}
.signup-pending-account-prompt h1 {
  margin: 4px 0 0;
  color: #4c30af;
  font-size: var(--type-section-title-lg);
  line-height: 1.4;
}
.signup-pending-account-prompt p {
  margin: 7px 0 0;
  color: #6b667a;
  font-size: var(--type-label);
  font-weight: 400;
  line-height: 1.7;
}

.signup-pending-layout {
  display: grid;
  gap: 0;
  margin-top: 18px;
}

.signup-pending-summary {
  display: grid;
  gap: 5px;
  padding: 18px 20px;
  border: 1px solid #dfd1fa;
  border-radius: 16px;
  background: #fff;
}
.signup-pending-summary p { margin: 0; }
.signup-pending-summary > p:first-child {
  color: #8f88a6;
  font-size: var(--type-caption);
  font-weight: 600;
}
.signup-pending-summary > strong {
  min-width: 0;
  color: #4c30af;
  font-size: var(--type-body-lg);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.signup-pending-summary > p:last-child {
  color: #6b667a;
  font-size: var(--type-label);
  line-height: 1.65;
}

.signup-pending-recovery {
  margin: 0;
  padding: 0;
}
.signup-pending-disclosure.signup-pending-recovery > summary {
  min-height: 52px;
  color: #5a43bc;
  font-size: var(--type-body-lg);
}
.signup-pending-recovery p {
  margin: 0;
  color: #6b667a;
  font-size: var(--type-label);
  line-height: 1.65;
}
.signup-pending-recovery p strong { color: #4c30af; }
.signup-pending-recovery .signup-pending-disclosure__body { gap: 12px; }
.signup-pending-recovery .signup-pending-disclosure__body > form { margin: 0; }
.signup-pending-layout :is(.signup-pending-pixel-action, .signup-pending-pixel-cancel) {
  width: 100%;
}

.signup-pending-options {
  margin-top: 18px;
  border-top: 1px solid #f0e9fd;
}
.signup-pending-disclosure { border-bottom: 1px solid #f0e9fd; }
.signup-pending-disclosure summary {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px;
  color: #7762bc;
  font-size: var(--type-small);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.signup-pending-disclosure summary::-webkit-details-marker { display: none; }
.signup-pending-disclosure summary .lucide {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: #a18dde;
  transition: transform .15s ease;
}
.signup-pending-disclosure[open] summary .lucide { transform: rotate(180deg); }
.signup-pending-disclosure summary:focus-visible {
  outline: 3px solid var(--ui-focus, #5a43bc);
  outline-offset: 2px;
}
.signup-pending-disclosure__body {
  display: grid;
  gap: 10px;
  padding: 4px 0 16px;
}
.signup-pending-disclosure:not([open]) > .signup-pending-disclosure__body { display: none; }
.signup-pending-disclosure__body > p {
  margin: 0;
  color: #6b667a;
  font-size: var(--type-label);
  line-height: 1.65;
}
.signup-pending-disclosure__body form {
  display: grid;
  gap: 8px;
  margin: 0;
}
.signup-pending-disclosure__body label {
  color: #6b667a;
  font-size: var(--type-small);
  font-weight: 600;
}
.signup-pending-disclosure__body .auth-error { overflow-wrap: anywhere; }

@media (max-width: 480px) {
  .signup-pending-account-prompt {
    grid-template-columns: 43px minmax(0, 1fr);
    gap: 10px;
    padding: 12px 14px;
    border-radius: 18px;
  }
  .signup-pending-account-prompt > .signup-pending-mail-tamami { width: 43px; }
  .signup-pending-account-prompt h1 { font-size: var(--type-body-lg); }
  .signup-pending-account-prompt p { font-size: var(--type-small); }
  .signup-pending-summary { padding: 15px 16px; }
}

/* Verified signup handoff: a review form, never a chat transcript. */
.signup-complete-screen {
  --signup-complete-title: #4c30af;
  --signup-complete-heading: #5a43bc;
  --signup-complete-emphasis: #7762bc;
  --signup-complete-border: #dfd1fa;
  --signup-complete-divider: #f0e9fd;
  --signup-complete-text: #6b667a;
  --signup-complete-muted: #8f88a6;
  --signup-complete-surface: #fff;

  padding: 24px 28px 30px;
  border: 1px solid #cdbdf3;
  border-radius: 24px;
  background: rgb(246 240 254 / 82%);
  box-shadow: none;
}

.signup-complete-progress {
  margin-bottom: 22px;
  padding-inline: 4px;
}

.signup-complete-progress span.complete { color: #3f8c62; }

.signup-complete-hero {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  align-items: center;
  margin-bottom: 24px;
}

.signup-complete-hero > img {
  z-index: 1;
  display: block;
  width: 84px;
  height: auto;
  margin-right: -6px;
  image-rendering: pixelated;
}

.signup-complete-hero > div {
  min-width: 0;
  padding: 22px 24px;
  border: 1px solid var(--signup-complete-border);
  border-radius: 22px;
  background: var(--signup-complete-surface);
}

.signup-complete-hero small {
  color: var(--signup-complete-emphasis);
  font-size: var(--type-label);
  font-weight: 600;
}

.signup-complete-hero h1 {
  margin: 5px 0 0;
  color: var(--signup-complete-title);
  font-size: var(--type-section-title-lg);
  font-weight: 600;
  line-height: 1.4;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.signup-complete-hero p {
  margin: 8px 0 0;
  color: var(--signup-complete-text);
  font-size: var(--type-body);
  line-height: 1.7;
  word-break: keep-all;
}

.signup-complete-summary {
  border: 1px solid var(--signup-complete-border);
  border-radius: 18px;
  background: var(--signup-complete-surface);
}

.signup-password-card {
  --signup-password-card-frame: url("/images/pixel_frame_home_service_purple.svg?v=2");

  box-sizing: border-box;
  width: 100%;
  border: 14px solid transparent;
  border-image-source: var(--signup-password-card-frame);
  border-image-slice: 14 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  background-clip: border-box;
  background-origin: border-box;
  box-shadow: none;
  clip-path: none;
  image-rendering: pixelated;
}

.signup-complete-summary { padding: 12px 16px; }

.signup-complete-summary__heading,
.signup-password-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.signup-complete-summary h2,
.signup-password-card h2 {
  margin: 0;
  color: var(--signup-complete-heading);
  font-size: var(--type-body-lg);
  font-weight: 600;
  line-height: 1.5;
}

.signup-complete-edit {
  --signup-complete-edit-frame: url("/images/pixel_badge_counterpart_edit.svg?v=1");
  --signup-complete-edit-slice: 5;

  box-sizing: border-box;
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 6px;
  border: calc(var(--signup-complete-edit-slice) * 1px) solid transparent;
  border-image-source: var(--signup-complete-edit-frame);
  border-image-slice: var(--signup-complete-edit-slice) fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  background-clip: border-box;
  background-origin: border-box;
  box-shadow: none;
  clip-path: none;
  color: var(--signup-complete-heading);
  font-size: var(--type-label);
  font-weight: 600;
  text-decoration: none;
  image-rendering: pixelated;
  transform: none;
}

.signup-complete-edit .lucide { width: 15px; height: 15px; }
.signup-complete-edit:hover { filter: brightness(.97) saturate(1.04); }
.signup-complete-edit:active { transform: translateY(1px); }
.signup-complete-edit:focus-visible { outline: 3px solid var(--ui-focus, #5a43bc); outline-offset: 2px; }

.signup-complete-summary dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 8px 0 0;
}

.signup-complete-summary dl > div {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 9px;
  min-width: 0;
  align-items: center;
}

.signup-complete-summary dl .lucide {
  grid-row: 1 / 3;
  width: 22px;
  height: 22px;
  color: #8c77ce;
}

.signup-complete-summary dt {
  color: var(--signup-complete-muted);
  font-size: var(--type-caption);
  line-height: 1.45;
}

.signup-complete-summary dd {
  min-width: 0;
  margin: 2px 0 0;
  overflow: hidden;
  color: var(--signup-complete-title);
  font-size: var(--type-small);
  font-weight: 600;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.signup-complete-form {
  display: grid;
  gap: 22px;
  margin-top: 22px;
}

.signup-password-card { padding: 10px 12px 12px; }

.signup-password-card > header {
  justify-content: flex-start;
  color: #8c77ce;
}

.signup-password-card > header .lucide { width: 22px; height: 22px; }

.signup-password-card > p {
  margin: 14px 0 16px;
  color: var(--signup-complete-text);
  font-size: var(--type-small);
  line-height: 1.65;
}

.signup-password-field {
  display: block;
  margin-top: 10px;
}

.signup-password-field input,
.signup-complete-submit {
  box-sizing: border-box;
  width: 100%;
  border: 14px solid transparent !important;
  border-image-source: var(--signup-complete-control-frame) !important;
  border-image-slice: 14 fill !important;
  border-image-width: 1 !important;
  border-image-repeat: stretch !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-clip: border-box !important;
  background-origin: border-box !important;
  box-shadow: none !important;
  clip-path: none !important;
  image-rendering: pixelated;
}

.signup-password-field input {
  --signup-complete-control-frame: url("/images/pixel_frame_decoration_surface.svg?v=1");
  height: 54px;
  padding: 0 12px;
  color: var(--signup-complete-title);
  font: inherit;
}

.signup-password-field input::placeholder { color: #ada3d0; }
.signup-password-field input:focus-visible { outline: 3px solid var(--ui-focus, #5a43bc); outline-offset: 2px; }

.signup-password-warning {
  margin: 7px 4px 0;
  color: #9a3f5a;
  font-size: var(--type-label);
  font-weight: 600;
  line-height: 1.55;
}

.signup-password-warning[hidden] { display: none; }

.signup-complete-submit {
  --signup-complete-control-frame: url("/images/pixel_frame_settings_primary.svg?v=1");
  appearance: none;
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 12px;
  color: #fff;
  font: inherit;
  font-weight: 600;
  text-align: center;
  text-shadow: 1px 1px 0 rgb(73 26 144 / 40%);
  white-space: nowrap;
  cursor: pointer;
  transition: filter .15s ease, transform .15s ease;
}

.signup-complete-submit .lucide { width: 20px; height: 20px; }
.signup-complete-submit:hover { filter: brightness(1.03); }
.signup-complete-submit:active { filter: brightness(.96); transform: translateY(1px); }
.signup-complete-submit:focus-visible { outline: 3px solid var(--ui-focus, #5a43bc); outline-offset: 2px; }
.signup-complete-submit:disabled { cursor: not-allowed; filter: grayscale(.18); opacity: .5; transform: none; }

@media (max-width: 480px) {
  .signup-complete-screen {
    padding: 18px 14px 22px;
    border-radius: 20px;
  }

  .signup-complete-progress { margin-bottom: 18px; }

  .signup-complete-hero {
    grid-template-columns: 53px minmax(0, 1fr);
    margin-bottom: 18px;
  }

  .signup-complete-hero > img { width: 57px; margin-right: -4px; }
  .signup-complete-hero > div { padding: 17px 16px; border-radius: 18px; }
  .signup-complete-hero h1 { font-size: var(--type-body-lg); }
  .signup-complete-hero p { font-size: var(--type-label); }

  .signup-complete-summary { border-radius: 16px; }

  .signup-complete-summary { padding: 12px 14px; }
  .signup-complete-summary dl { grid-template-columns: 1fr; gap: 10px; margin-top: 8px; }
  .signup-complete-summary dd { white-space: normal; overflow-wrap: anywhere; }
  .signup-complete-form { gap: 18px; margin-top: 18px; }
  .signup-password-card { padding: 8px 6px 10px; }
  .signup-password-card > p span { display: block; }
}

/* Inline explanations for Saju terms in fortune, report, and compatibility prose. */
.saju-term-trigger {
  --saju-term-accent: var(--tamami-accent, #e58bcb);
  --saju-term-focus: var(--tamami-section-title, #5a43bc);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin: 0 1px;
  padding: 0;
  border: 0;
  appearance: none;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 500;
  line-height: inherit;
  vertical-align: baseline;
  -webkit-tap-highlight-color: transparent;
}
.saju-term-trigger__label {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--saju-term-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.saju-term-search {
  position: relative;
  display: inline-block;
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  transform: translateY(-1px);
}
.saju-term-search::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 5px;
  border: 1px solid var(--saju-term-accent);
  border-radius: 50%;
}
.saju-term-search::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 4px;
  width: 3px;
  height: 1px;
  border-radius: 1px;
  background: var(--saju-term-accent);
  transform: rotate(45deg);
  transform-origin: left center;
}
.saju-term-trigger:hover .saju-term-trigger__label { text-decoration-color: var(--saju-term-focus); }
.saju-term-trigger:focus-visible {
  border-radius: 5px;
  outline: 3px solid var(--saju-term-focus);
  outline-offset: 3px;
}
.saju-term-popover {
  position: fixed;
  z-index: 1200;
  width: min(320px, calc(100vw - 24px));
  padding: 18px 20px;
  border: 1px solid #b5a1ec;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 10px 28px rgb(76 48 175 / 14%);
  color: #6b667a;
  font-family: 'AppNumerals', 'SchoolSafeUniverse', 'Pretendard', system-ui, sans-serif;
  font-size: var(--type-body);
  line-height: 1.75;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.saju-term-popover[hidden] { display: none; }
.saju-term-popover::before {
  content: "";
  position: absolute;
  left: var(--saju-term-caret-left, 24px);
  width: 12px;
  height: 12px;
  background: #fff;
  transform: translateX(-50%) rotate(45deg);
}
.saju-term-popover[data-placement="bottom"]::before {
  top: -7px;
  border-top: 1px solid #b5a1ec;
  border-left: 1px solid #b5a1ec;
}
.saju-term-popover[data-placement="top"]::before {
  bottom: -7px;
  border-right: 1px solid #b5a1ec;
  border-bottom: 1px solid #b5a1ec;
}
.saju-term-popover__title {
  display: block;
  margin: 0 0 8px;
  color: #4c30af;
  font-size: var(--type-body-lg);
  font-weight: 600;
  line-height: 1.55;
}
.saju-term-popover__definition { margin: 0; }

/* ============================================================================
 * 2027 신년운세 테마 (docs/2027-new-year-reading-design.md §8.1, 시안 docs/2027-new-year-ui.html).
 *      <article>에 tamami-reading--new-year 를 붙이면 켜진다. 기존 리포트는 그대로다.
 *      타마미 디자인 가이드(.agents/skills/tamami-design-guide)의 색 역할을 그대로 두고,
 *      보라·분홍 자리에 신년 색(적갈·금·홍·한지)을 넣었다. 그라데이션은 쓰지 않는다.
 * ========================================================================== */

/* 페이지: 한지색 단색. 기존 리포트의 보랏빛 은하 그림(body::before)은 끈다 */
html:has(.tamami-reading--new-year), body:has(.tamami-reading--new-year) { --tamami-reading-page: #fbf5ea; }
body:has(.tamami-reading--new-year)::before { content: none; }

.tamami-reading--new-year {
  /* 가이드 역할 → 신년 값 (가이드 원래 값) */
  --tamami-title: #8e2a22;          /* P01 페이지 제목 (#4C30AF) */
  --tamami-section-title: #9c3a2e;  /* P02 장 제목 (#5A43BC) */
  --tamami-emphasis: #a34a2c;       /* P03 흰 바탕 강조 글 (#7762BC) */
  --tamami-card-title: #b8663f;     /* P04 카드 제목·큰 숫자 (#8C77CE) */
  --tamami-point: #c9962f;          /* P05 작은 점, 금 (#A18DDE) */
  --tamami-border-strong: #dcbf8f;  /* S01 기본 테두리·아이콘 (#B5A1EC) */
  --tamami-label-surface: #ecd9b8;  /* S02 번호 칸 (#CDBDF3) */
  --tamami-border: #efe2cc;         /* S03 카드 테두리 (#DFD1FA) */
  --tamami-control-muted: #f5ecdc;  /* S04 (#EBE2FD) */
  --tamami-divider: #f8f1e4;        /* S05 구분선 (#F0E9FD) */
  --tamami-accent: #c8372d;         /* A01 한두 곳에만 쓰는 홍 (#E58BCB) */
  --tamami-accent-surface: #f2b5aa; /* A02 (#F4B5DA) */
  --tamami-alert-surface: #f7d3cb;  /* A03 (#FAD4EB) */
  --tamami-accent-soft: #fbe8e3;    /* A04 (#FCEBFA) */
  --tamami-text: #6b667a;           /* T01 본문은 가이드 값 그대로 */
  --tamami-text-muted: #8f88a6;     /* T02 그대로 */
  --tamami-page: #fbf5ea;           /* B01 한지 (#F6F0FE) */
  --tamami-section: #fdf8ef;        /* B02 (#F8F3FE) */
  --tamami-surface: #fff;           /* B03 그대로 */
  --new-year-indigo: #2f4a7a;       /* 버거운 달 표시에만. 글자·범례와 항상 같이 쓴다 */
}

/* 히어로: 위쪽 색동 띠 한 줄 + 해 하나 + 복주머니 타마미. 장식은 이 둘뿐이다 */
.tamami-reading--new-year .tamami-reading-hero { padding-top: 36px; }
.tamami-reading--new-year .tamami-reading-hero::before {
  /* 색동: 색 경계가 딱 끊기는 줄무늬(번지는 그라데이션 아님) */
  position: absolute; inset: 0 0 auto; height: 8px; content: '';
  background: repeating-linear-gradient(90deg,
    #d9473b 0 16px, #f2b134 16px 32px, #4f9a5e 32px 48px,
    #3c6fb4 48px 64px, #fbf5ea 64px 80px, #d4699b 80px 96px);
}
/* 기존 리포트의 보라 사분원 대신, 타마미 그림 자체의 바탕을 동그랗게 칠한 해 */
.tamami-reading--new-year .tamami-reading-hero::after { content: none; }
.tamami-reading--new-year .tamami-reading-hero__art { border-radius: 50%; background: var(--tamami-alert-surface); }

/* 기존 00장 요약 카드의 그라데이션 대신 흰 카드 */
.tamami-reading--new-year .tamami-reading-summary { border-color: var(--tamami-border-strong); background: var(--tamami-surface); }

/* 픽셀 뱃지 (tamami-pixel-frame 소형 뱃지 계약, 기존 10×10 뱃지와 같은 실루엣) */
.new-year-badge {
  --new-year-badge-frame: url("/images/new-year/pixel_badge_new_year_neutral.svg");
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px;
  border: 4px solid transparent; border-image-source: var(--new-year-badge-frame);
  border-image-slice: 4 fill; border-image-width: 1; border-image-repeat: stretch;
  border-radius: 0; background: transparent; box-shadow: none; clip-path: none;
  image-rendering: pixelated; transform: none;
  color: var(--tamami-emphasis); font-size: var(--type-label); line-height: 1.5;
}
.new-year-badge--accent { --new-year-badge-frame: url("/images/new-year/pixel_badge_new_year_accent.svg"); color: var(--tamami-title); font-weight: 600; }
.new-year-badge--point { --new-year-badge-frame: url("/images/new-year/pixel_badge_new_year_point.svg"); color: var(--tamami-title); }
.new-year-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }

/* 00 한 줄: 홍색은 이 장의 키워드 뱃지 하나에만 */
.new-year-keyword { margin: 0 0 12px; font-size: var(--type-small); }
.new-year-keyword b { color: var(--tamami-accent); }
.new-year-shape { margin: 22px 0 0; padding: 18px 16px 14px; border-radius: 14px; background: var(--tamami-section); }
.new-year-shape figcaption { margin-bottom: 14px; color: var(--tamami-section-title); font-size: var(--type-small); font-weight: 600; }
.new-year-shape ol { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.new-year-shape > ol > li { position: relative; display: grid; grid-template-rows: 44px 44px 18px; justify-items: center; }
.new-year-shape > ol > li::before { position: absolute; top: 44px; left: -3px; right: -3px; border-top: 1px solid var(--tamami-border-strong); content: ''; }
.new-year-shape i { display: block; width: 100%; max-width: 16px; }
.new-year-shape [data-sign="plus"] i { grid-row: 1; align-self: end; height: calc(var(--v) * 16px); background: var(--tamami-accent); }
.new-year-shape [data-sign="minus"] i { grid-row: 2; align-self: start; height: calc(var(--v) * 16px); background: var(--new-year-indigo); }
.new-year-shape [data-sign="zero"] i { grid-row: 1; align-self: end; height: 2px; background: var(--tamami-border-strong); }
.new-year-shape > ol > li span { grid-row: 3; align-self: end; font-size: var(--type-caption); line-height: 1.5; }
.new-year-shape [data-peak] span { color: var(--tamami-title); font-weight: 600; }
.new-year-shape [data-peak]::after { position: absolute; top: -10px; width: 6px; height: 6px; background: var(--tamami-point); content: ''; }
.new-year-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 12px 0 0; padding: 0; list-style: none; font-size: var(--type-caption); }
.new-year-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 5px; vertical-align: -1px; }
.new-year-legend i[data-sign="plus"] { background: var(--tamami-accent); }
.new-year-legend i[data-sign="minus"] { background: var(--new-year-indigo); }
.new-year-legend i[data-sign="peak"] { background: var(--tamami-point); }
.new-year-shape p { margin: 10px 0 0; font-size: var(--type-small); line-height: 1.8; }

/* 07 달마다 달라지는 흐름: 흰 카드 2열. 순풍·버거움은 글자 뱃지와 작은 네모로, 정점 달만 금색 테두리 */
.new-year-months { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 20px 0 0; padding: 0; list-style: none; }
.new-year-month { display: grid; align-content: start; gap: 6px; min-width: 0; padding: 18px; border: 1px solid var(--tamami-border); border-radius: 14px; background: var(--tamami-surface); }
.new-year-month[data-peak] { border-color: var(--tamami-point); }
.new-year-month header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.new-year-month header b { color: var(--tamami-card-title); font-size: var(--type-card-title); line-height: 1.3; }
.new-year-month header small { font-size: var(--type-caption); }
.new-year-month strong { color: var(--tamami-section-title); font-size: var(--type-small); }
.new-year-month .new-year-badges { margin-top: 2px; }
.new-year-month .sign::before { display: inline-block; width: 8px; height: 8px; content: ''; }
.new-year-month .sign[data-sign="plus"]::before { background: var(--tamami-accent); }
.new-year-month .sign[data-sign="minus"]::before { background: var(--new-year-indigo); }
.new-year-month .sign[data-sign="zero"]::before { background: var(--tamami-border-strong); }
.new-year-month p { margin: 4px 0 0; font-size: var(--type-small); line-height: 1.85; }
.new-year-month .lead-in { font-size: var(--type-caption); }
.new-year-tip { margin: 8px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--tamami-accent-soft); color: var(--tamami-title); font-size: var(--type-small); line-height: 1.7; }

/* 08 타이밍 */
.new-year-timing { margin: 0; padding: 0; list-style: none; }
.new-year-timing li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 4px 10px; padding: 14px 0; border-bottom: 1px solid var(--tamami-divider); }
.new-year-timing li:last-child { border-bottom: 0; }
.new-year-timing li::before { grid-row: span 2; width: 8px; height: 8px; margin: 9px 0 0 4px; background: var(--tamami-point); content: ''; }
.new-year-timing b { color: var(--tamami-section-title); font-size: var(--type-body); }
.new-year-timing p { margin: 0; font-size: var(--type-small); line-height: 1.8; }

/* 09 사용 설명서: 조용한 바탕의 번호 목록 */
.new-year-manual { margin: 0; padding: 20px 22px; border: 1px solid var(--tamami-border); border-radius: 14px; background: var(--tamami-section); }
.new-year-manual ol { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: manual; }
.new-year-manual li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: center; color: var(--tamami-title); font-size: var(--type-body); line-height: 1.7; counter-increment: manual; }
.new-year-manual li::before { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 8px; background: var(--tamami-label-surface); color: var(--tamami-title); font-size: var(--type-label); font-weight: 600; content: counter(manual); }

.new-year-notice { margin: 16px 0 0; font-size: var(--type-small); line-height: 1.8; }
.new-year-domains { display: grid; gap: 16px; margin: 20px 0 0; }
.new-year-domains > div { display: grid; gap: 6px; padding-top: 16px; border-top: 1px solid var(--tamami-divider); }
.new-year-domains dt { color: var(--tamami-section-title); font-size: var(--type-small); font-weight: 600; }
.new-year-domains dd { margin: 0; }
.new-year-domains dd p { margin: 0 0 8px; font-size: var(--type-body); line-height: 1.85; }
.new-year-domains dd p:last-child { margin-bottom: 0; }

@media (max-width: 639px) {
.tamami-reading--new-year .tamami-reading-hero { padding-top: 30px; }
.new-year-months { grid-template-columns: minmax(0, 1fr); }
.new-year-shape ol { gap: 3px; }
.new-year-month { padding: 16px; }
}

/* 리포트 목록·보관함 카드 */
.report-product-tone-new-year {
  --report-card-accent: #c8372d;
  --report-card-background: #fbf5ea;
  --report-card-image: url("/images/report_new_year_background.png");
  --report-card-border: #dcbf8f;
}
.report-product-tone-new-year h3 { color: #8e2a22; }
.report-product-tone-new-year p, .report-product-tone-new-year .report-card-status { color: #6b667a; }

#report-person-new-year {
  background-size: 100% 100% !important;
}

#report-person-lifetime-love {
  --report-card-accent: #e58bcb;
  --report-card-background: #fff2f8;
  --report-card-image: url("/images/report_lifetime_love_background.png");
  --report-card-border: #d88ab6;
}
#report-person-lifetime-love h3 { color: #8f416d; }
#report-person-lifetime-love p,
#report-person-lifetime-love .report-card-status { color: #745769; }

#report-person-life-flow {
  --report-card-accent: #7898eb;
  --report-card-background: #eef6ff;
  --report-card-image: url("/images/report_life_flow_background.png");
  --report-card-border: #8da8dc;
}

#report-person-mental-emotion {
  --report-card-accent: #8c77ce;
  --report-card-background: #f4f0ff;
  --report-card-image: url("/images/report_mental_emotion_background.png");
  --report-card-border: #9b87d7;
}
#report-person-mental-emotion h3 { color: #5a43bc; }

#report-person-relationship {
  --report-card-accent: #78ad6a;
  --report-card-background: #f1f9ee;
  --report-card-image: url("/images/report_relationship_background.png");
  --report-card-border: #86ae79;
}
#report-person-relationship h3 { color: #456d43; }
#report-person-relationship p,
#report-person-relationship .report-card-status { color: #5c705b; }

#report-person-independence-living {
  --report-card-accent: #b47c49;
  --report-card-background: #fbf2e3;
  --report-card-image: url("/images/report_independence_living_background.png");
  --report-card-border: #bd8a59;
}
#report-person-independence-living h3 { color: #765134; }
#report-person-independence-living p,
#report-person-independence-living .report-card-status { color: #6f5c4d; }

#report-person-stay-move {
  --report-card-accent: #6faeca;
  --report-card-background: #edf9ff;
  --report-card-image: url("/images/report_stay_move_background.png");
  --report-card-border: #7fb4cd;
}
#report-person-stay-move h3 { color: #356d8e; }
#report-person-stay-move p,
#report-person-stay-move .report-card-status { color: #557080; }

.report-main:not(.report-reading) .report-product-card {
  --report-product-icon-scale: 4;

  gap: 0;
}

.report-main:not(.report-reading) .report-product-card > .report-product-icon,
.report-main:not(.report-reading) #report-person-core > .report-product-icon,
.report-main:not(.report-reading) #report-person-relationship > .report-product-icon {
  transform: translateY(38px) scale(var(--report-product-icon-scale));
  transform-origin: center;
}

.report-main:not(.report-reading) #report-person-core { --report-product-icon-scale: 3.26; }
.report-main:not(.report-reading) #report-person-work-money { --report-product-icon-scale: 3.26; }
.report-main:not(.report-reading) #report-person-lifetime-love { --report-product-icon-scale: 3.3; }
.report-main:not(.report-reading) #report-person-life-flow { --report-product-icon-scale: 4.15; }
.report-main:not(.report-reading) #report-person-mental-emotion { --report-product-icon-scale: 3.4; }
.report-main:not(.report-reading) #report-person-relationship { --report-product-icon-scale: 3.53; }
.report-main:not(.report-reading) #report-person-independence-living { --report-product-icon-scale: 3.56; }
.report-main:not(.report-reading) #report-person-stay-move { --report-product-icon-scale: 3.22; }
.report-main:not(.report-reading) #report-astrology-core { --report-product-icon-scale: 3.4; }

.report-main:not(.report-reading) .report-product-copy {
  justify-content: flex-end;
  gap: 4px;
  padding: 0;
}

.report-main:not(.report-reading) .report-product-divider {
  display: none;
}

.report-main:not(.report-reading) .report-product-card h3,
.report-main:not(.report-reading) .report-product-card p {
  line-height: 1.4;
}

.report-main:not(.report-reading) .report-card-status {
  min-height: 36px;
}

#report-person-work-money {
  --report-card-accent: #d39b2d;
  --report-card-background: #fff9df;
  --report-card-image: url("/images/report_work_money_background.png");
  --report-card-border: #d8ac45;
}