/* 찰떡 사주 궁합 (/gunghap/saju). Colors come only from theme.css tokens. */

.ct button { font-family: inherit; cursor: pointer; }
.ct button.btn { border: 0; font-size: var(--fs-button); font-weight: var(--weight-button); }
.ct button.btn-secondary { border: 1px solid var(--color-ink); background: transparent; }
.ct [hidden] { display: none !important; }

.ct-lead { max-width: 34em; line-height: 1.6; text-wrap: balance; }
.ct-h2 { margin-bottom: 12px; font-size: 24px; font-weight: var(--weight-title); }
.ct-h3 { margin: 32px 0 12px; font-size: 18px; font-weight: var(--weight-title); }
.ct-step { margin-top: 24px; }

/* ---------- form ---------- */
.ct-form { display: flex; flex-direction: column; gap: 20px; margin-top: 28px; }
.ct-person {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 20px;
  border: 1px solid var(--color-line);
  border-radius: 20px;
  background: var(--color-surface);
}
.ct-person legend { padding: 0 6px; font-weight: var(--weight-title); }
.ct-row { display: flex; flex-wrap: wrap; gap: 10px; }
.ct-date .ct-field, .ct-time .ct-field { flex: 1 1 0; min-width: 0; }
.ct-field { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-small); color: var(--color-ink-soft); }
.ct-field input, .ct-field select {
  width: 100%;
  height: 52px;
  padding: 0 12px;
  border: 1px solid var(--color-line);
  border-radius: 14px;
  background: var(--color-bg);
  color: var(--color-ink);
  font: inherit;
  font-size: 18px;
}
.ct-field select:disabled { color: var(--color-ink-soft); }
.ct-name input { font-weight: var(--weight-title); }
.ct-field input:focus-visible, .ct-field select:focus-visible, .ct-chip:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; }
.ct-cal { display: flex; align-items: center; gap: 8px; }
.ct-chip {
  height: 40px;
  padding: 0 18px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: var(--color-bg);
  color: var(--color-ink);
  font-size: 16px;
}
.ct-chip.is-on { border-color: var(--color-ink); font-weight: var(--weight-title); }
.ct-leap { display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; font-size: 16px; }
.ct-error { font-size: var(--fs-small); font-weight: var(--weight-title); }
.ct-actions { justify-content: flex-start; flex-wrap: wrap; }

/* ---------- invite ---------- */
.ct-link {
  margin-top: 20px;
  padding: 16px;
  border: 1px dashed var(--color-ink-soft);
  border-radius: 16px;
  background: var(--color-surface);
  font-size: var(--fs-small);
  overflow-wrap: anywhere;
  user-select: all;
}
.ct-banner {
  padding: 16px 20px;
  border-radius: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  font-weight: var(--weight-title);
  line-height: 1.6;
}
.ct-toast { margin-top: 12px; font-size: var(--fs-small); }

/* ---------- result ---------- */
.ct-result { text-align: left; }
.ct-couple-label { font-size: var(--fs-small); color: var(--color-ink-soft); text-align: center; }
.page .ct-couple-label + .ct-couple { margin-top: 4px; }
.ct-couple { font-size: clamp(30px, 6vw, 44px); font-weight: var(--weight-title); letter-spacing: var(--tracking-title); text-align: center; text-wrap: balance; }
.ct-names { margin-top: 4px; color: var(--color-ink-soft); text-align: center; }
.ct-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; }
.ct-role {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 16px;
  border: 1px solid var(--color-line);
  border-radius: 20px;
  background: var(--color-surface);
  text-align: center;
}
.page .ct-role p + p { margin-top: 0; }
.ct-role-to { font-size: var(--fs-small); color: var(--color-ink-soft); }
.ct-role-word { font-size: clamp(26px, 5vw, 34px); font-weight: var(--weight-title); }
.ct-role-word::after { content: ""; display: block; width: 24px; height: 3px; margin: 8px auto 0; border-radius: 3px; background: var(--color-rose); }
.ct-role-line { margin-top: 8px; font-size: 15px; line-height: 1.6; text-wrap: pretty; }
.ct-count { margin-top: 20px; font-weight: var(--weight-title); text-align: center; }

.ct-points { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ct-point { padding: 16px 18px; border-radius: 16px; background: var(--color-surface); border: 1px solid var(--color-line); }
.ct-good .ct-point { border-left: 4px solid var(--color-rose); }
.ct-care .ct-point { border-left: 4px solid var(--color-ink-soft); }
.ct-point-title { font-weight: var(--weight-title); }
.page .ct-point p + p { margin-top: 4px; }
.ct-point-why { font-size: 15px; color: var(--color-ink-soft); }
.ct-fix { font-size: 15px; }
.ct-fix-label { font-weight: var(--weight-title); }
.page .ct-point .ct-fix { margin-top: 10px; }

.ct-areas { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ct-area { padding: 14px 18px; border-radius: 16px; background: var(--color-surface); border: 1px solid var(--color-line); }
.ct-area-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ct-area-name { font-weight: var(--weight-title); }
.ct-badge { padding: 2px 10px; border-radius: 999px; font-size: var(--fs-small); font-weight: var(--weight-title); border: 1px solid var(--color-line); }
.ct-area.is-good .ct-badge { border-color: var(--color-rose); }
.ct-area.is-care .ct-badge { border-color: var(--color-ink-soft); }
.page .ct-area p + p { margin-top: 4px; }
.ct-area-line { font-size: 15px; }
.ct-area .ct-fix { color: var(--color-ink-soft); }
.ct-note { margin-top: 20px; font-size: var(--fs-small); color: var(--color-ink-soft); text-wrap: balance; }
.ct-result .actions { margin-top: 28px; }

/* ---------- how ---------- */
.ct-how { margin-top: 48px; border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
.ct-how summary { padding: 18px 0; font-weight: var(--weight-title); cursor: pointer; list-style: none; display: flex; justify-content: space-between; }
.ct-how summary::-webkit-details-marker { display: none; }
.ct-how summary::after { content: "+"; font-weight: var(--weight-body); }
.ct-how[open] summary::after { content: "−"; }
.ct-how p { padding-bottom: 14px; font-size: 15px; line-height: 1.7; }
.ct > .meta { margin-top: 32px; }

@media (max-width: 599px) {
  .ct-person { padding: 16px; }
  .ct-roles { grid-template-columns: 1fr; }
  .ct-form .btn, .ct-step .btn { width: 100%; }
}
@media (min-width: 720px) {
  .ct-areas { grid-template-columns: 1fr 1fr; }
}

/* ---------- deeper result (2026-11-02 v2) ---------- */
.ct-hint { font-size: var(--fs-small); color: var(--color-ink-soft); }
.ct-nav {
  display: flex;
  gap: 8px;
  margin: 24px -16px 0;
  padding: 4px 16px 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.ct-nav::-webkit-scrollbar { display: none; }
.ct-nav a {
  flex: none;
  padding: 8px 14px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: var(--color-surface);
  font-size: var(--fs-small);
  text-decoration: none;
  white-space: nowrap;
}
.ct-sec { scroll-margin-top: calc(var(--nav-height) + 12px); }
.ct-card {
  padding: 20px;
  border: 1px solid var(--color-line);
  border-radius: 20px;
  background: var(--color-surface);
}
.page .ct-card p + p { margin-top: 8px; }
.ct-kicker { font-size: var(--fs-small); color: var(--color-ink-soft); }
.ct-h4 { margin: 4px 0 0; font-size: 22px; font-weight: var(--weight-title); letter-spacing: var(--tracking-title); }
.ct-sub { font-weight: var(--weight-title); }
.ct-small { font-size: 15px; color: var(--color-ink-soft); }
.ct-lines { margin: 8px 0 0; padding-left: 18px; }
.ct-lines li { margin-top: 4px; line-height: 1.6; }
.ct-sec-title { margin-top: 16px; font-size: var(--fs-small); font-weight: var(--weight-title); color: var(--color-ink-soft); }
.page .ct-card .ct-sec-title { margin-top: 16px; }

.ct-people { display: grid; grid-template-columns: 1fr; gap: 12px; }
.ct-bars { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; }
.ct-bar { display: grid; grid-template-columns: 52px 1fr 20px; align-items: center; gap: 8px; font-size: var(--fs-small); }
.ct-bar-track { height: 10px; border-radius: 999px; background: var(--color-bg); overflow: hidden; }
.ct-bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--color-rose); }
.ct-bar-fill.is-0 { width: 0; }
.ct-bar-fill.is-1 { width: 12.5%; }
.ct-bar-fill.is-2 { width: 25%; }
.ct-bar-fill.is-3 { width: 37.5%; }
.ct-bar-fill.is-4 { width: 50%; }
.ct-bar-fill.is-5 { width: 62.5%; }
.ct-bar-fill.is-6 { width: 75%; }
.ct-bar-fill.is-7 { width: 87.5%; }
.ct-bar-fill.is-8 { width: 100%; }
.ct-bar-n { text-align: right; font-variant-numeric: tabular-nums; }

.ct-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.ct-zodiac-side { padding: 14px; border-radius: 16px; background: var(--color-bg); text-align: center; }
.page .ct-zodiac-side p + p { margin-top: 4px; }
.ct-zodiac-sign { font-size: 24px; font-weight: var(--weight-title); }
.ct-rel { font-weight: var(--weight-title); }
.ct-rel::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--color-rose); vertical-align: middle; }

.ct-sec .ct-lens { margin-top: 32px; }
.ct-lens-title { margin: 4px 0 12px; font-size: 22px; font-weight: var(--weight-title); letter-spacing: var(--tracking-title); }
.ct-items { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ct-item { padding: 12px 14px; border-radius: 14px; background: var(--color-bg); }
.page .ct-item p + p { margin-top: 4px; }
.ct-item.is-good .ct-badge { border-color: var(--color-rose); }
.ct-item.is-care .ct-badge { border-color: var(--color-ink-soft); }
.ct-item .ct-fix { font-size: 15px; }

.ct-past { border-style: dashed; }
.ct-story { font-size: 17px; line-height: 1.75; text-wrap: pretty; }
.ct-date-list { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 16px 0 0; }
.ct-date-list dt { font-size: var(--fs-small); font-weight: var(--weight-title); color: var(--color-ink-soft); }
.ct-date-list dd { margin: 0; }

@media (min-width: 720px) {
  .ct-people { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 599px) {
  .ct-two { grid-template-columns: 1fr 1fr; }
  .ct-card { padding: 16px; }
}

/* ---------- deeper result (2026-11-03 v3) ---------- */
.ct-stack { display: flex; flex-direction: column; gap: 12px; }
.ct-basis { margin-top: 12px; font-size: var(--fs-small); color: var(--color-ink-soft); line-height: 1.6; }
.ct-pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 16px; }
.ct-pillar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 4px;
  border: 1px solid var(--color-line);
  border-radius: 14px;
  background: var(--color-bg);
}
.ct-pillar.is-me { border-color: var(--color-rose); }
.ct-pillar-pos { font-size: 12px; color: var(--color-ink-soft); }
.ct-pillar-char { font-size: 26px; font-weight: var(--weight-title); line-height: 1.25; }
.ct-pillar-char.is-empty { color: var(--color-ink-soft); }
.ct-pillar-god { font-size: 12px; color: var(--color-ink-soft); }
.ct-item.is-info { background: var(--color-bg); }
.ct-item-more { margin-top: 6px; font-size: 15px; line-height: 1.65; }
.page .ct-item p.ct-item-more + p.ct-item-more { margin-top: 4px; }
.ct-ties { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.ct-tie { padding: 12px 14px; border-radius: 14px; background: var(--color-bg); }
.ct-tie.is-hap { border-left: 4px solid var(--color-rose); }
.ct-tie.is-clash { border-left: 4px solid var(--color-ink-soft); }
.ct-tie .ct-badge { display: inline-block; margin-bottom: 6px; }
.page .ct-tie p + p { margin-top: 2px; }
.ct-tie-line { font-size: 15px; font-weight: var(--weight-title); }
.ct-more { margin-top: 10px; }
.ct-more summary { padding: 8px 0; font-size: var(--fs-small); font-weight: var(--weight-title); cursor: pointer; }
.ct-namebox { border-top: 1px solid var(--color-line); padding-top: 12px; }
.ct-namebox summary { font-weight: var(--weight-title); cursor: pointer; }
.ct-namebox[open] summary { margin-bottom: 12px; }
.ct-namebox .ct-field + .ct-two-surname { margin: 8px 0 0; }
.ct-hanja { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin: 12px 0 8px; }
.ct-hanja-field select { font-size: 16px; }
.ct-name-chars { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; margin: 12px 0 4px; }
.ct-name-char { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; border: 1px solid var(--color-line); border-radius: 14px; background: var(--color-bg); }
.ct-name-elem { font-size: 14px; font-weight: var(--weight-title); }
.ct-badge { white-space: nowrap; }
.ct-item-title { margin-top: 4px; font-weight: var(--weight-title); }
.ct-bars.is-pair .ct-bar { grid-template-columns: 52px 1fr 36px; }

/* ct-font:start */
/* Generated by scripts/fonts.js: letters only the 찰떡 result shows. */
@font-face {
  font-family: "Danji Sans";
  src: url("/fonts/DanjiSans-ct.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+AC16,U+ACAA,U+ACB8,U+ACB9,U+AD34,U+AD70,U+ADE0,U+AE09,U+AE43,U+AE4E,U+AE5D,U+AE65,U+AECF,U+AF3D,U+AF64,U+AFB9,U+AFC0,U+AFCB,U+B053,U+B057,U+B059,U+B08C,U+B0AD,U+B0B3,U+B0BC,U+B0C9,U+B109,U+B128,U+B140,U+B150,U+B158,U+B179,U+B17C,U+B18D,U+B192,U+B2A0,U+B2A5,U+B2A6,U+B2CC,U+B355,U+B369,U+B3CB,U+B3D5,U+B3DB,U+B454,U+B465,U+B4DD,U+B4E3,U+B4EF,U+B518,U+B6AB,U+B6B1,U+B72C,U+B744,U+B79C,U+B7AC,U+B7F0,U+B835,U+B838,U+B839,U+B86D,U+B86F,U+B8B0,U+B8E1,U+B8F0,U+B9D9,U+B9E1,U+B9E8,U+BA48,U+BAAB,U+BABD,U+BB54,U+BC00,U+BC16,U+BC8C,U+BCCD,U+BCD5,U+BD09,U+BD89,U+BED0,U+C058,U+C05C,U+C060,U+C068,U+C0B6,U+C11E,U+C12D,U+C140,U+C14B,U+C154,U+C19C,U+C19F,U+C219,U+C274,U+C2B5,U+C2B7,U+C2F9,U+C370,U+C37C,U+C3D8,U+C3DF,U+C3E0,U+C42C,U+C4F8,U+C500,U+C53B,U+C553,U+C554,U+C5BB,U+C61B,U+C678,U+C695,U+C6C5,U+C6EC,U+C728,U+C735,U+C785,U+C7A6,U+C7C1,U+C80A,U+C811,U+C880,U+C989,U+C990,U+C9CA,U+C9F1,U+CC0D,U+CC2C,U+CC38,U+CCAD,U+CD1D,U+CD9C,U+CE21,U+CE60,U+CE6D,U+CE90,U+CF20,U+CF8C,U+D0AC,U+D0C1,U+D0C4,U+D0D3,U+D0D5,U+D138,U+D141,U+D15C,U+D1F4,U+D288,U+D2F0,U+D30E,U+D33D,U+D478,U+D47C,U+D504,U+D540,U+D587,U+D5C8,U+D5E4,U+D611,U+D61C,U+D640,U+D669,U+D6D7,U+D765,U+D769,U+D76C;
}
/* ct-font:end */