/* 이거사주 사용법 (/guide) */
.guide-main {
  --guide-surface-frame: url("/images/pixel_frame_surface.svg?v=1");
  --guide-item-frame: url("/images/pixel_frame_input.svg?v=1");
  --guide-highlight-frame: url("/images/pixel_frame_home_service_pink.svg?v=2");
  --guide-cta-frame: url("/images/pixel_frame_home_service_purple.svg?v=2");
  --guide-primary-frame: url("/images/pixel_frame_settings_primary.svg?v=1");
  --guide-icon-surface: #f0e9fd;

  width: var(--page-content-width);
  margin: 0 auto;
  padding: 0 0 112px;
  color: var(--ui-ink);
}
.guide-main img { image-rendering: pixelated; }
.guide-main p { word-break: keep-all; }

/* Shared frames */
.guide-panel,
.guide-step,
.guide-use,
.guide-pass-card,
.guide-cta,
.guide-jump a,
.guide-button {
  box-sizing: border-box;
  border-style: solid;
  border-color: transparent;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  background-clip: border-box;
  background-origin: border-box;
}
.guide-panel,
.guide-jump a {
  border-width: 8px;
  border-image-source: var(--guide-surface-frame);
  border-image-slice: 8 fill;
}
.guide-step,
.guide-use,
.guide-button--quiet {
  border-width: 14px;
  border-image-source: var(--guide-item-frame);
  border-image-slice: 14 fill;
}

/* Table of contents */
.guide-jump {
  display: flex;
  gap: 6px;
  margin-top: 16px;
  padding: 2px 0 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.guide-jump::-webkit-scrollbar { display: none; }
.guide-jump a {
  flex: 0 0 auto;
  padding: 3px 10px;
  color: #6040a5;
  font-size: var(--type-small);
  font-weight: 600;
  text-decoration: none;
}
.guide-jump a:hover { color: #5632ad; filter: brightness(1.02); }
.guide-jump a:focus-visible { outline: 3px solid var(--ui-focus); outline-offset: 2px; }

/* Sections */
.guide-section { margin-top: 34px; scroll-margin-top: 92px; }
.guide-section__header { margin-bottom: 12px; padding: 0 3px; }
.guide-section__header h2 { margin: 0; color: var(--ui-heading); font-size: var(--type-section-title); line-height: 1.35; }
.guide-section__header p { margin: 6px 0 0; color: var(--ui-muted); font-size: var(--type-body); line-height: 1.65; }
.guide-panel { padding: 16px 18px; }
.guide-panel h3 { margin: 0 0 10px; color: var(--ui-heading); font-size: var(--type-body-lg); }

/* Steps */
.guide-steps { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.guide-step {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 6px 8px;
}
.guide-step__icon { width: 56px; height: 56px; object-fit: contain; }
.guide-step__icon--gift { transform: translateX(-2px); }
.guide-step__icon--leaf { width: 42px; height: 42px; justify-self: center; }
.guide-step strong { display: block; color: #5632ad; font-size: var(--type-body-lg); }
.guide-step p { margin: 3px 0 0; color: var(--ui-muted); font-size: var(--type-small); line-height: 1.6; }
.guide-step .guide-step__label { display: flex; align-items: center; gap: 6px; margin: 0 0 2px; }
.guide-step__label span { color: #9a70df; font-size: var(--type-caption); font-weight: 700; }
.guide-step__label em {
  padding: 1px 6px;
  background: #e9dcfb;
  color: #6840b8;
  font-size: var(--type-caption);
  font-style: normal;
  font-weight: 700;
}
.guide-step.is-done strong { color: #806d99; }

/* Free fortune */
.guide-feature-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.guide-feature-list li { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: start; gap: 12px; }
.guide-feature-list__asset {
  box-sizing: border-box;
  display: grid;
  width: 40px;
  height: 40px;
  padding: 6px;
  background: var(--guide-icon-surface);
  overflow: hidden;
  place-items: center;
}
.guide-feature-list__asset > img { width: 28px; height: 28px; object-fit: contain; }
.guide-feature-list__asset--tamami > img {
  width: 34px;
  height: 34px;
  transform: translate(-2px, -3px);
}
.guide-feature-list__asset--stardust > img { width: 30px; height: 26px; }
.guide-feature-list__asset--domains {
  grid-template-columns: repeat(2, 13px);
  grid-template-rows: repeat(2, 13px);
  gap: 2px;
}
.guide-feature-list__asset--domains > img { width: 13px; height: 13px; }
.guide-feature-list strong { display: block; color: #5632ad; font-size: var(--type-body); }
.guide-feature-list p { margin: 2px 0 0; color: var(--ui-muted); font-size: var(--type-small); line-height: 1.6; }
.guide-panel__bonus {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 16px 0 0;
  padding: 10px 12px;
  background: #fbeef7;
  color: #8a4a78;
  font-size: var(--type-small);
  line-height: 1.6;
}
.guide-panel__bonus-art { flex: 0 0 auto; width: 24px; height: 24px; margin-top: 0; object-fit: contain; }
.guide-panel__bonus strong { margin-right: 4px; color: #a53d81; }
.guide-link-button {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
  border: 14px solid transparent;
  border-image: var(--guide-primary-frame) 14 fill / 14px / 0 stretch;
  color: #fff;
  font-size: var(--type-body);
  font-weight: 700;
  text-decoration: none;
}
.guide-link-button::after { content: "→"; font-size: var(--type-body-lg); line-height: 1; }

/* Pass */
.guide-pass-card {
  padding: 8px 12px;
  border-width: 14px;
  border-image-source: var(--guide-highlight-frame);
  border-image-slice: 14 fill;
}
.guide-pass-card__head { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; border-bottom: 2px dashed #ecd2e6; }
.guide-pass-card__art { width: 59px; height: auto; }
.guide-pass-card__head strong { display: block; color: #8d3f78; font-size: var(--type-card-title); }
.guide-pass-card__head p { margin: 2px 0 0; color: #9b6a8e; font-size: var(--type-body); }
.guide-pass-card__head b { color: #a53d81; font-size: var(--type-subtitle); }
.guide-pass-benefits { display: grid; gap: 14px; margin: 14px 0 0; padding: 0; list-style: none; }
.guide-pass-benefits li { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: start; gap: 12px; }
.guide-pass-benefits__icon {
  display: grid;
  width: 36px;
  height: 36px;
  background: #fbe9f5;
  color: #b04a8c;
  place-items: center;
}
.guide-pass-benefits__icon img { width: 24px; height: auto; }
.guide-pass-benefits__icon .guide-pass-benefits__art--calendar { width: 23px; }
.guide-pass-benefits__icon .guide-pass-benefits__art--credit { width: 18px; }
.guide-pass-benefits strong { display: block; color: #5632ad; font-size: var(--type-body); }
.guide-pass-benefits p { margin: 2px 0 0; color: var(--ui-muted); font-size: var(--type-small); line-height: 1.6; }
.guide-pass-benefits .guide-pass-benefits__deal { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 6px; }
.guide-pass-benefits__deal s { color: #a597b6; }
.guide-pass-benefits__deal em {
  padding: 2px 7px;
  background: #ff7eb6;
  color: #fff;
  font-size: var(--type-label);
  font-style: normal;
  font-weight: 700;
}
.guide-pass-card__note {
  margin: 16px 0 0;
  padding: 10px 12px;
  background: #fbf2f8;
  color: #8a6a80;
  font-size: var(--type-small);
  line-height: 1.6;
}
.guide-pass-card__note strong { color: #8d3f78; }

/* Star piece uses */
.guide-uses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.guide-use {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 6px 8px;
}
.guide-use__icon { width: 52px; height: 52px; object-fit: contain; }
.guide-use strong { display: block; padding-right: 64px; color: #5632ad; font-size: var(--type-body); line-height: 1.5; }
.guide-use p { margin: 3px 0 0; color: var(--ui-muted); font-size: var(--type-small); line-height: 1.6; }
.guide-use__cost {
  position: absolute;
  top: 0;
  right: 0;
  padding: 1px 6px;
  background: #efe5fd;
  color: #7951c7;
  font-size: var(--type-caption);
  font-weight: 700;
}
.guide-topup { margin-top: 12px; }
.guide-topup__list { display: grid; margin: 0 0 12px; padding: 0; list-style: none; }
.guide-topup__list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 2px;
  border-bottom: 1px dashed #e1d3f4;
  font-size: var(--type-body);
}
.guide-topup__list li:last-child { border-bottom: 0; }
.guide-topup__list span { color: var(--ui-ink); }
.guide-topup__list em { margin-left: 4px; color: #b04a8c; font-size: var(--type-label); font-style: normal; font-weight: 600; }
.guide-topup__list b { color: #5632ad; white-space: nowrap; }
.guide-notes { display: grid; gap: 4px; margin: 0; padding: 12px 14px; background: var(--ui-surface-soft); list-style: none; }
.guide-notes li { position: relative; padding-left: 14px; color: var(--ui-muted); font-size: var(--type-small); line-height: 1.6; }
.guide-notes li::before { position: absolute; left: 0; color: #9a70df; content: "✦"; font-size: var(--type-caption); }
.guide-text-link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-top: 12px;
  color: #7043c6;
  font-size: var(--type-small);
  font-weight: 700;
  text-underline-offset: 3px;
}
.guide-text-link::after { content: "›"; font-size: var(--type-body-lg); line-height: 1; text-decoration: none; }

/* Stardust */
.guide-stardust { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 18px; }
.guide-stardust__tamami { width: 120px; height: auto; }
.guide-earn-list { display: grid; margin: 0; }
.guide-earn-list > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px dashed #e1d3f4;
}
.guide-earn-list > div:last-child { border-bottom: 0; }
.guide-earn-list dt { color: var(--ui-ink); font-size: var(--type-small); }
.guide-earn-list dd { margin: 0; color: #5632ad; font-size: var(--type-body); font-weight: 700; white-space: nowrap; }
.guide-earn-list dd::before { margin-right: 2px; color: #9a70df; content: "+"; }
.guide-earn-list small { margin-left: 4px; color: #b04a8c; font-size: var(--type-caption); font-weight: 600; }
.guide-stardust__use { margin: 12px 0 0; color: var(--ui-muted); font-size: var(--type-small); line-height: 1.6; }

.guide-decorate { display: grid; gap: 10px; }
.guide-panel h3 img { width: 22px; height: auto; margin-right: 6px; vertical-align: -3px; }

/* Keyrings */
.guide-keyring { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 18px; }
.guide-keyring__materials {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.guide-keyring__materials::before {
  position: absolute;
  z-index: -1;
  top: 6px;
  bottom: 6px;
  left: 50%;
  width: 2px;
  background: repeating-linear-gradient(#c7b0ea 0 4px, transparent 4px 7px);
  content: "";
}
.guide-keyring__materials li {
  display: grid;
  width: 48px;
  height: 48px;
  background: #f5eefe;
  place-items: center;
}
.guide-keyring__materials img { width: 40px; height: 40px; object-fit: contain; }
.guide-keyring__steps { display: grid; gap: 8px; margin: 0; padding: 0; counter-reset: guide-keyring; list-style: none; }
.guide-keyring__steps li {
  position: relative;
  padding-left: 28px;
  color: var(--ui-muted);
  font-size: var(--type-small);
  line-height: 1.6;
  counter-increment: guide-keyring;
}
.guide-keyring__steps li::before {
  position: absolute;
  top: 1px;
  left: 0;
  display: grid;
  width: 20px;
  height: 20px;
  background: #efe5fd;
  color: #7951c7;
  content: counter(guide-keyring);
  font-size: var(--type-caption);
  font-weight: 700;
  place-items: center;
}

/* Summary */
.guide-summary { padding: 6px 10px; }
.guide-summary table { width: 100%; border-collapse: collapse; font-size: var(--type-small); }
.guide-summary th,
.guide-summary td { padding: 11px 6px; border-bottom: 1px dashed #e1d3f4; text-align: center; vertical-align: middle; }
.guide-summary tbody tr:last-child > * { border-bottom: 0; }
.guide-summary thead th { color: #9a70df; font-size: var(--type-label); }
.guide-summary tbody th { color: var(--ui-ink); font-weight: 600; text-align: left; word-break: keep-all; }
.guide-summary td { width: 26%; color: #5632ad; font-weight: 600; word-break: keep-all; }
.guide-summary__check { display: inline-block; width: 18px; height: 18px; vertical-align: middle; }
.guide-summary__no { color: #c3b6d4; }

/* Closing CTA */
.guide-cta {
  display: grid;
  grid-template-columns: 106px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  margin-top: 34px;
  padding: 10px 12px;
  border-width: 14px;
  border-image-source: var(--guide-cta-frame);
  border-image-slice: 14 fill;
}
.guide-cta__tamami { width: 106px; height: auto; }
.guide-cta h2 { margin: 0; color: var(--ui-heading); font-size: var(--type-subtitle); line-height: 1.4; }
.guide-cta p { margin: 4px 0 0; color: var(--ui-muted); font-size: var(--type-small); line-height: 1.6; }
.guide-cta__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.guide-button {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  font-size: var(--type-body);
  font-weight: 700;
  text-decoration: none;
}
.guide-button--primary {
  border-width: 14px;
  border-image-source: var(--guide-primary-frame);
  border-image-slice: 14 fill;
  color: #fff;
}
.guide-button--quiet { color: #6040a5; }
.guide-button:hover,
.guide-link-button:hover { filter: brightness(1.03); }
.guide-button:active,
.guide-link-button:active { filter: brightness(.96); transform: translateY(1px); }
.guide-button:focus-visible,
.guide-link-button:focus-visible,
.guide-text-link:focus-visible { outline: 3px solid var(--ui-focus); outline-offset: 2px; }

@media (max-width: 639px) {
  .guide-section { margin-top: 28px; }
  .guide-section__header h2 { font-size: var(--type-subtitle); }
  .guide-section__header p { font-size: var(--type-small); }
  .guide-panel { padding: 14px; }
  .guide-step { grid-template-columns: 48px minmax(0, 1fr); gap: 12px; }
  .guide-step__icon { width: 48px; height: 48px; }
  .guide-step__icon--leaf { width: 36px; height: 36px; }
  .guide-step strong { font-size: var(--type-body); }
  .guide-uses { grid-template-columns: minmax(0, 1fr); }
  .guide-pass-card__art { width: 48px; }
  .guide-pass-card__head strong { font-size: var(--type-subtitle); }
  .guide-stardust { grid-template-columns: 84px minmax(0, 1fr); gap: 12px; align-items: start; }
  .guide-stardust__tamami { width: 84px; }
  .guide-keyring { grid-template-columns: 84px minmax(0, 1fr); gap: 12px; align-items: start; }
  .guide-summary th,
  .guide-summary td { padding: 10px 4px; }
  .guide-cta { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .guide-cta__tamami { justify-self: center; width: 88px; }
  .guide-cta__actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .guide-button { width: 100%; }
}