:root {
  color-scheme: dark;
  --bg: #07080d;
  --panel: rgba(12, 13, 22, 0.82);
  --panel-strong: rgba(20, 22, 34, 0.94);
  --line: rgba(255, 255, 255, 0.15);
  --line-strong: rgba(242, 191, 107, 0.42);
  --text: #fff8ef;
  --muted: rgba(255, 248, 239, 0.74);
  --soft: rgba(255, 248, 239, 0.56);
  --gold: #f3c46f;
  --rose: #ff8f9a;
  --teal: #54c5d6;
  --green: #8ce6b8;
  --danger: #ff7474;
  --shadow: 0 28px 80px rgba(0, 0, 0, 0.46);
  --radius: 8px;
  font-family:
    "Pretendard",
    "Apple SD Gothic Neo",
    "Malgun Gothic",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--bg);
}

body {
  min-height: 100%;
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 15% 10%, rgba(84, 197, 214, 0.14), transparent 30%),
    radial-gradient(circle at 88% 18%, rgba(255, 143, 154, 0.11), transparent 28%),
    linear-gradient(180deg, #05060b 0%, #111018 52%, #07080d 100%);
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
}

.phone {
  position: relative;
  width: min(100%, 430px);
  min-height: 100svh;
  margin: 0 auto;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(8, 9, 17, 0.92), rgba(8, 9, 17, 0.98)),
    #080911;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), var(--shadow);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px 10px;
  background: linear-gradient(180deg, rgba(6, 7, 12, 0.96), rgba(6, 7, 12, 0.78));
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(18px);
}

.brand {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
  text-decoration: none;
}

.brand-mark,
.icon-button {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(9, 10, 17, 0.58);
  color: var(--text);
}

.brand-mark svg,
.icon-button svg {
  width: 18px;
  height: 18px;
}

.icon-button {
  border: 0;
}

.stage {
  display: grid;
  gap: 18px;
  padding: 22px 20px max(34px, env(safe-area-inset-bottom));
}

.hero-panel,
.panel,
.section-card,
.result-card,
.form-card,
.notice-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  backdrop-filter: blur(18px);
}

.hero-panel {
  position: relative;
  overflow: hidden;
  padding: 24px 18px 18px;
  border-color: rgba(242, 191, 107, 0.34);
  background:
    radial-gradient(circle at 85% 8%, rgba(243, 196, 111, 0.22), transparent 35%),
    radial-gradient(circle at 18% 4%, rgba(84, 197, 214, 0.14), transparent 38%),
    rgba(12, 13, 22, 0.88);
}

.hero-visual {
  display: block;
  width: calc(100% + 36px);
  max-height: 168px;
  margin: -24px -18px 16px;
  object-fit: cover;
  object-position: center 28%;
}

.hero-panel::after {
  display: none;
}

.panel,
.form-card,
.notice-card {
  padding: 18px;
}

.kicker,
.eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  margin-bottom: 12px;
  padding: 7px 10px;
  border: 1px solid rgba(243, 196, 111, 0.34);
  border-radius: var(--radius);
  background: rgba(7, 8, 13, 0.62);
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1 {
  font-size: 34px;
  line-height: 1.1;
  font-weight: 950;
  letter-spacing: 0;
  text-wrap: balance;
}

h2 {
  font-size: 24px;
  line-height: 1.18;
  font-weight: 950;
  letter-spacing: 0;
  text-wrap: balance;
}

h3 {
  font-size: 17px;
  line-height: 1.3;
  font-weight: 920;
  letter-spacing: 0;
}

.hero-panel p,
.panel p,
.section-card p,
.notice-card p {
  margin-top: 12px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.58;
  font-weight: 650;
  word-break: keep-all;
}

.accent {
  color: var(--gold);
}

.rose {
  color: var(--rose);
}

.teal {
  color: var(--teal);
}

.soft {
  color: var(--soft);
}

.meta-grid,
.summary-grid,
.scope-grid,
.result-grid,
.action-grid {
  display: grid;
  gap: 10px;
}

.meta-grid {
  margin-top: 18px;
}

.meta-row,
.summary-row,
.fact-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  min-height: 38px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--soft);
  font-size: 13px;
  line-height: 1.4;
}

.meta-row:last-child,
.summary-row:last-child,
.fact-row:last-child {
  border-bottom: 0;
}

.meta-row strong,
.summary-row strong,
.fact-row strong {
  color: var(--text);
  font-size: 14px;
  text-align: right;
  word-break: keep-all;
}

.button-row,
.actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 18px;
}

.primary-button,
.secondary-button,
.text-button,
.chip-button,
.link-button {
  min-height: 52px;
  border-radius: var(--radius);
  font-weight: 950;
  letter-spacing: 0;
}

.primary-button {
  border: 0;
  background: linear-gradient(135deg, #f4d477 0%, #ff8f9a 100%);
  color: #15100a;
  box-shadow: 0 18px 42px rgba(236, 156, 110, 0.28);
}

.secondary-button {
  border: 1px solid rgba(84, 197, 214, 0.38);
  background: rgba(6, 19, 26, 0.74);
  color: var(--text);
}

.text-button {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.055);
  color: var(--muted);
}

.link-button {
  display: inline-grid;
  place-items: center;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.055);
  color: var(--text);
  text-decoration: none;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.chip,
.chip-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.055);
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.chip-button.is-active,
.chip.is-active {
  border-color: rgba(243, 196, 111, 0.46);
  background: rgba(243, 196, 111, 0.12);
  color: var(--gold);
}

.form-card {
  display: grid;
  gap: 16px;
}

.field-grid {
  display: grid;
  gap: 12px;
}

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

label {
  display: grid;
  gap: 7px;
  color: rgba(255, 248, 239, 0.86);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.35;
}

input,
select,
textarea {
  width: 100%;
  min-height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  background: rgba(3, 4, 9, 0.74);
  color: var(--text);
  padding: 12px;
  outline: 0;
}

textarea {
  min-height: 104px;
  resize: vertical;
  line-height: 1.55;
}

input:focus,
select:focus,
textarea:focus,
button:focus-visible,
a:focus-visible {
  outline: 3px solid rgba(84, 197, 214, 0.78);
  outline-offset: 3px;
}

.helper {
  color: var(--soft);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  word-break: keep-all;
}

.error {
  display: none;
  min-height: 22px;
  color: var(--danger);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

.error.is-visible {
  display: block;
}

.profile-status {
  display: grid;
  gap: 12px;
  padding: 15px;
  border: 1px solid rgba(84, 197, 214, 0.36);
  border-radius: var(--radius);
  background: rgba(6, 19, 26, 0.74);
}

.profile-status strong {
  font-size: 16px;
  line-height: 1.35;
}

.profile-status span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  word-break: keep-all;
}

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

.section-card,
.result-card {
  display: grid;
  gap: 10px;
  padding: 15px;
}

.result-card {
  text-align: left;
  color: var(--text);
}

button.result-card {
  width: 100%;
}

.result-card strong {
  font-size: 16px;
  line-height: 1.35;
}

.result-card span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.48;
  word-break: keep-all;
}

.result-card small {
  color: var(--gold);
  font-size: 12px;
  font-weight: 850;
}

.group-block {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.045);
}

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

.group-head strong {
  font-size: 17px;
  line-height: 1.32;
}

.group-head span {
  flex: 0 0 auto;
  color: var(--teal);
  font-size: 12px;
  font-weight: 950;
}

.item-list {
  display: grid;
  gap: 8px;
}

.item-link {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  background: rgba(3, 4, 9, 0.52);
  color: var(--text);
  text-align: left;
  text-decoration: none;
}

.item-link strong {
  font-size: 14px;
  line-height: 1.38;
}

.item-link span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  word-break: keep-all;
}

.teaser-answer {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  padding: 18px;
  border: 1px solid rgba(84, 197, 214, 0.38);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 88% 10%, rgba(84, 197, 214, 0.16), transparent 32%),
    rgba(6, 19, 26, 0.76);
}

.teaser-answer strong {
  font-size: 21px;
  line-height: 1.28;
  letter-spacing: 0;
}

.signal-list,
.detail-list {
  display: grid;
  gap: 9px;
  margin-top: 14px;
}

.signal-item,
.detail-item {
  display: grid;
  gap: 5px;
  min-height: 54px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.05);
}

.signal-item b,
.detail-item b {
  color: var(--text);
  font-size: 14px;
  line-height: 1.35;
}

.signal-item span,
.detail-item span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.48;
  word-break: keep-all;
}

.lock-panel {
  display: grid;
  gap: 12px;
  padding: 22px 18px;
  border: 1px solid rgba(255, 143, 154, 0.36);
  border-radius: var(--radius);
  background: rgba(30, 10, 18, 0.78);
}

.chat-shell {
  display: grid;
  min-height: calc(100svh - 62px);
  grid-template-rows: auto 1fr auto;
}

.chat-scroll {
  display: grid;
  gap: 14px;
  padding: 20px;
  overflow: auto;
}

.chat-composer {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 12px 14px max(16px, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(6, 7, 12, 0.94);
}

.chat-composer input {
  min-height: 46px;
}

.send-button {
  width: 48px;
  min-height: 46px;
  border: 0;
  border-radius: var(--radius);
  background: var(--gold);
  color: #15100a;
  font-weight: 950;
}

.detail-hero {
  display: grid;
  gap: 14px;
}

.detail-section {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.045);
}

.detail-section h2 {
  font-size: 20px;
}

.detail-section p {
  margin-top: 0;
}

.nav-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.fineprint {
  color: rgba(255, 248, 239, 0.55);
  font-size: 12px;
  line-height: 1.55;
  word-break: keep-all;
}

.footer {
  padding: 18px 20px 34px;
  color: rgba(255, 248, 239, 0.42);
  font-size: 12px;
  text-align: center;
}

@media (max-width: 360px) {
  .stage,
  .chat-scroll {
    padding-inline: 16px;
  }

  h1 {
    font-size: 30px;
  }

  h2 {
    font-size: 22px;
  }

  .field-grid.two,
  .nav-pair {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 820px) {
  body {
    padding: 24px 0;
  }

  .phone {
    border-radius: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }
}

/* Shared UMSH chrome: keep the fixed bottom nav clear of the page's last section.
   The shell publishes its measured height, but that measurement can land before
   layout settles, so the floor keeps the reserve honest either way. */
body.umsh-has-chrome { padding-bottom: calc(max(74px, var(--umsh-chrome-bottom-h, 74px)) + env(safe-area-inset-bottom, 0px)); }
/* .phone is overflow:hidden, which makes it a scroll container the page never scrolls.
   overflow:clip keeps the same clipping without the scrollport, so anything sticky
   inside it binds to the viewport instead of a box that never moves. */
body.umsh-has-chrome .phone { overflow: clip; }
/* UMSHChrome renders the shared bar as header.umsh-chrome-appbar inside its own shell,
   and that header still carries the page's own .topbar class. On 01 that class is
   position:fixed + left:50% + translateX(-50%) + pointer-events:none, which dragged the
   shared bar half a screen to the left and made it unclickable. Hand the box back. */
body.umsh-has-chrome .umsh-chrome-appbar {
  left: auto;
  right: auto;
  width: auto;
  transform: none;
  pointer-events: auto;
}
/* The saved 사주 profile the account already holds, shown instead of re-asking. */
.jobchoice-saved-profile { display: grid; gap: 6px; border: 1px solid rgba(150, 140, 255, 0.42); border-radius: 10px; background: rgba(150, 140, 255, 0.1); padding: 14px; margin-bottom: 14px; }
.jobchoice-saved-profile b { color: #d8d2ff; font-size: 14px; }
.jobchoice-saved-profile span { color: rgba(240, 238, 255, 0.78); font-size: 13px; line-height: 1.55; }
.jobchoice-saved-profile button { justify-self: start; margin-top: 4px; min-height: 38px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; background: rgba(255, 255, 255, 0.06); color: inherit; padding: 0 12px; font: inherit; font-weight: 800; cursor: pointer; }