/* ==========================================================
   사주박사 — 사용자 서비스 디자인 시스템
   리포트 HTML의 팔레트(--primary #6c5ce7)와 통일했다.
   ========================================================== */

:root {
  --primary: #6c5ce7;
  --primary-dark: #5b4bd6;
  --primary-soft: #ebe7ff;
  --secondary: #a29bfe;
  --accent: #fdcb6e;
  --danger: #ff7675;
  --success: #00b894;
  --info: #0984e3;

  --ink: #2d3436;
  --ink-2: #4b4b55;
  --ink-3: #687080;
  --ink-4: #9299a8;
  /* 경계는 배경보다 두 단계 어둡게 둔다. 좋은 패널에서도 카드·입력칸의
     구조가 사라지지 않되, 서비스의 밝은 인상은 유지한다. */
  --line: #d5d9e4;
  --line-2: #e7e9f0;
  --bg: #f4f5fa;
  --card: #ffffff;

  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 4px 20px rgba(45, 52, 54, 0.08);
  --shadow-lg: 0 12px 40px rgba(45, 52, 54, 0.12);
  --font: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo',
          'Malgun Gothic', system-ui, sans-serif;
}

* { box-sizing: border-box; }

/* 세로 스크롤바 자리를 **항상** 비워 둔다.
   이게 없으면 페이지마다 내용 길이에 따라 스크롤바가 생겼다 없어지고,
   그때마다 화면 폭이 15~17px 달라져 가운데 정렬된 본문이 7~8px씩 좌우로 움직인다.
   실제로 궁합 화면만 조금 어긋나 보인다는 지적이 있었는데, 원인이 이것이었다.
   (궁합 화면이 다른 신청 화면보다 조금 길어서, 창 높이에 따라 혼자만 스크롤이 생겼다)

   맥·모바일은 스크롤바가 내용 위에 겹쳐 떠서 이런 일이 없지만,
   윈도우 크롬·엣지는 스크롤바가 자리를 차지한다. 개발은 리눅스에서 하고
   운영은 윈도우에서 도는 이 프로젝트에서는 특히 눈에 띈다. */
html { scrollbar-gutter: stable; }

/* scrollbar-gutter 를 모르는 옛 브라우저에서는 스크롤바를 늘 띄워 같은 효과를 낸다 */
@supports not (scrollbar-gutter: stable) {
  html { overflow-y: scroll; }
}

html, body {
  margin: 0; padding: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ==========================================================
   레이아웃 시스템
   ----------------------------------------------------------
   화면 폭은 딱 하나(--page-w)로 고정한다. 페이지마다 폭을 바꾸면
   메뉴·로고·카드의 좌우 기준선이 흔들려 서로 다른 사이트처럼 보인다.
   좁게 보여야 하는 화면은 '프레임을 줄이는' 대신 아래 세 골격 중
   하나를 골라 안쪽을 나눈다.

     1) .wrap 단독            — 정보를 보여주는 화면 (대시보드·목록·리포트)
     2) .layout.layout-side   — 입력·처리 화면 (폼·주문·상세) : 본문 + 우측 요약
     3) .auth-shell           — 행동이 하나뿐인 화면 (로그인·오류·완료)
   ========================================================== */
:root {
  --page-w: 1120px;      /* 모든 페이지 공통 프레임 폭 */
  --gutter: 24px;
  --aside-w: 320px;
  --auth-w: 460px;
  --topbar-h: 62px;
}

.wrap { max-width: var(--page-w); margin: 0 auto; padding: 0 var(--gutter); }
/* 구버전 호환: 더 이상 폭을 줄이지 않는다 */
.wrap-narrow { max-width: var(--page-w); margin: 0 auto; padding: 0 var(--gutter); }
.page { padding: 32px 0 80px; }
.stack > * + * { margin-top: 16px; }

/* 페이지 머리 — 모든 화면이 같은 형태의 제목 영역을 갖는다 */
.page-head { margin-bottom: 20px; }
.page-head .back { display: inline-block; font-size: 13.5px; margin-bottom: 8px; }
.page-head h1 { font-size: 25px; margin: 0; letter-spacing: -0.7px; line-height: 1.35; }
.page-head p { margin: 5px 0 0; color: var(--ink-3); font-size: 14px; }
.page-head .row-between { align-items: flex-end; }

/* 본문 + 우측 요약 */
.layout { display: grid; gap: 22px; align-items: start; }
.layout-side { grid-template-columns: minmax(0, 1fr) var(--aside-w); }
.layout > .col { min-width: 0; }
.layout > .col > * + * { margin-top: 16px; }
.aside > * + * { margin-top: 16px; }
.aside-sticky { position: sticky; top: calc(var(--topbar-h) + 20px); }
@media (max-width: 960px) {
  .layout-side { grid-template-columns: 1fr; }
  .aside-sticky { position: static; }
}

/* 행동이 하나뿐인 화면 */
.auth-shell { max-width: var(--auth-w); margin: 28px auto 0; }
.auth-shell > * + * { margin-top: 16px; }
.auth-shell h1 { font-size: 23px; margin: 0 0 6px; letter-spacing: -0.6px; }
.auth-shell .lead { color: var(--ink-3); font-size: 14px; margin: 0 0 20px; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 12px;
               flex-wrap: wrap; }
.spacer { flex: 1; }

.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ---------- 헤더 ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
/* 상단 줄은 **어떤 경우에도 한 줄**이다.
   두 줄로 접히면 메뉴가 깨진 것처럼 보이므로, 모든 항목에 줄바꿈 금지를 걸고
   화면이 좁아지면 글자와 여백만 줄인다. 더 좁아지면 메뉴를 감추고
   하단 탭바가 대신한다. */
.topbar-inner {
  display: flex; align-items: center; gap: 16px; height: 62px;
  flex-wrap: nowrap; white-space: nowrap;
}
.topbar-inner > * { flex: 0 0 auto; }
.brand {
  font-weight: 800; font-size: 19px; color: var(--ink);
  letter-spacing: -0.5px; white-space: nowrap;
}
.brand:hover { text-decoration: none; }
.brand span { color: var(--primary); }
.nav { display: flex; gap: 2px; align-items: center; flex-wrap: nowrap; min-width: 0; }
.nav a {
  padding: 8px 11px; border-radius: 9px; color: var(--ink-2);
  font-size: 14px; font-weight: 600; white-space: nowrap;
}
.nav a:hover { background: var(--line-2); text-decoration: none; }
.nav a.on { color: var(--primary); background: var(--primary-soft); }

/* 좁아질수록 글자와 여백만 줄여서 끝까지 한 줄을 지킨다 */
@media (max-width: 1180px) {
  .topbar-inner { gap: 11px; }
  .nav a { padding: 7px 8px; font-size: 13.5px; }
}
@media (max-width: 1010px) {
  .topbar-inner { gap: 8px; }
  .nav a { padding: 6px 6px; font-size: 12.5px; }
  .brand { font-size: 17px; }
}
@media (max-width: 860px) { .nav.desktop { display: none; } }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px; background: var(--primary-soft);
  color: var(--primary); font-weight: 800; font-size: 13.5px;
  white-space: nowrap;
}
.bell { position: relative; font-size: 19px; padding: 6px; }
.bell .dot {
  position: absolute; top: 2px; right: 0;
  min-width: 17px; height: 17px; padding: 0 4px;
  background: var(--danger); color: #fff; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; line-height: 17px; text-align: center;
}

/* 모바일 하단 탭 — 상단 메뉴가 숨는 지점과 같아야 '메뉴가 없는 구간'이 안 생긴다 */
.tabbar { display: none; }
@media (max-width: 860px) {
  .tabbar {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
    background: #fff; border-top: 1px solid var(--line);
    padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
  }
  .tabbar a {
    flex: 1; text-align: center; font-size: 11px; color: var(--ink-3);
    font-weight: 700; padding: 4px 0;
  }
  .tabbar a:hover { text-decoration: none; }
  .tabbar a.on { color: var(--primary); }
  .tabbar .ico { display: block; font-size: 19px; line-height: 1.3; }
  body { padding-bottom: 68px; }
}

/* ---------- 카드 ---------- */
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow);
}
.card-tight { padding: 18px; }
.card-title { font-size: 17px; font-weight: 800; margin: 0 0 14px; letter-spacing: -0.3px; }
.card-sub { color: var(--ink-3); font-size: 13.5px; margin: -8px 0 16px; }

.hero {
  background: linear-gradient(135deg, #6c5ce7 0%, #8e7bff 55%, #a29bfe 100%);
  color: #fff; border-radius: 22px; padding: 48px 40px; box-shadow: var(--shadow-lg);
}
.hero h1 { font-size: 34px; line-height: 1.35; margin: 0 0 12px; letter-spacing: -1px; }
.hero p { font-size: 16px; opacity: .92; margin: 0 0 26px; }
@media (max-width: 620px) {
  .hero { padding: 34px 24px; border-radius: 18px; }
  .hero h1 { font-size: 25px; }
}

/* ---------- 버튼 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 12px 20px; border-radius: var(--radius-sm); border: 1px solid transparent;
  font-family: var(--font); font-size: 14.5px; font-weight: 700; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  background: var(--primary); color: #fff; text-decoration: none;
}
.btn:hover { background: var(--primary-dark); text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn-line { background: #fff; color: var(--ink); border-color: var(--line); }
.btn-line:hover { background: var(--line-2); color: var(--ink); }
.btn-ghost { background: transparent; color: var(--primary); }
.btn-ghost:hover { background: var(--primary-soft); }
.btn-danger { background: var(--danger); }
.btn-danger:hover { background: #e66; }
.btn-white { background: #fff; color: var(--primary); }
.btn-white:hover { background: #f4f2ff; color: var(--primary); }
.btn-sm { padding: 8px 14px; font-size: 13px; border-radius: 8px; }
.btn-lg { padding: 15px 30px; font-size: 16px; }
.btn-block { width: 100%; }

/* 한 줄 배치 유틸리티 — 버튼·입력창을 옆으로 나란히 놓는다.
   없으면 flex 컨테이너가 아니라 그냥 블록이라 요소마다 줄이 바뀐다. */
.flex { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.flex > .input { flex: 1 1 auto; min-width: 0; width: auto; }
.flex > .btn { flex: 0 0 auto; }

/* 사주 목록(pick) 안의 수정·삭제 버튼 — 목록 우측에 작게.
   .pp-act 는 서비스 디자인의 작은 링크 버튼과 같은 결으로. */
.pick > label { position: relative; }
.pick-acts { position: absolute; top: 8px; right: 10px; display: flex; gap: 4px;
             opacity: 0; transition: opacity .12s; z-index: 2; }
.pick > label:hover .pick-acts { opacity: 1; }
.pp-act { font-size: 12px; font-weight: 600; color: var(--ink-3); cursor: pointer;
          background: none; border: 1px solid var(--line); border-radius: var(--radius-sm);
          padding: 3px 8px; text-decoration: none; display: inline-block; }
.pp-act:hover { color: var(--primary); border-color: var(--primary); text-decoration: none; }
.pp-act-danger:hover { color: var(--danger); border-color: var(--danger); }

/* ---------- 폼 ---------- */
label.f { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink-2);
          margin-bottom: 7px; }
.input, select.input, textarea.input {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); font-family: var(--font); font-size: 15px;
  background: #fff; color: var(--ink); transition: border-color .12s;
}
.input:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(108, 92, 231, .12);
}
textarea.input { resize: vertical; min-height: 92px; line-height: 1.6; }
.field + .field { margin-top: 16px; }
/* 그리드 안에서는 칸마다 간격을 gap이 담당한다.
   여기에 margin-top이 더 붙으면 옆 칸과 라벨 높이가 어긋난다. */
.grid > .field + .field { margin-top: 0; }
/* 그리드 한 줄 다음에 오는 단독 입력칸도 같은 간격을 갖는다 */
.grid + .field, .field + .grid { margin-top: 16px; }
.hint { font-size: 12.5px; color: var(--ink-3); margin-top: 6px; }
.check { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; cursor: pointer; }
.check input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--primary); }

/* 선택형 카드 (라디오) */
.pick { display: grid; gap: 10px; }
.pick label {
  display: block; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  padding: 14px 16px; cursor: pointer; transition: all .12s; background: #fff;
}
.pick label:hover { border-color: var(--secondary); }
.pick input { display: none; }
.pick input:checked + .pick-body { color: var(--primary); }
.pick label:has(input:checked) {
  border-color: var(--primary); background: var(--primary-soft);
  box-shadow: 0 0 0 3px rgba(108, 92, 231, .10);
}
.pick-title { font-weight: 800; font-size: 15px; }
.pick-desc { font-size: 13px; color: var(--ink-3); margin-top: 3px; }

/* 선택형 조각 (여러 개 고를 수 있는 작은 버튼) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chip { cursor: pointer; }
.chip > span {
  display: block; border: 1.5px solid var(--line); border-radius: 999px;
  padding: 9px 15px; font-size: 13.5px; font-weight: 700; color: var(--ink-2);
  background: #fff; transition: all .12s; line-height: 1.35;
}
.chip > span:hover { border-color: var(--secondary); }
.chip > span em { font-weight: 500; font-size: 11.5px; margin-top: 1px; }
.chip:has(input:checked) > span {
  border-color: var(--primary); background: var(--primary-soft); color: var(--primary);
}
.chip input:focus-visible + span { box-shadow: 0 0 0 3px rgba(108, 92, 231, .18); }

/* 접었다 펴는 칸 — summary 를 그대로 버튼처럼 쓴다 */
.fold > summary { list-style: none; cursor: pointer; }
.fold > summary::-webkit-details-marker { display: none; }

/* 기억해 둔 것 — 읽기 전용 조각 */
.memo { display: flex; flex-wrap: wrap; gap: 7px; }
.memo-item {
  display: inline-flex; align-items: baseline; gap: 6px;
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px;
  font-size: 13px; background: #fff;
}
.memo-item b { font-weight: 700; color: var(--ink); }
.memo-item i { font-style: normal; font-size: 11.5px; color: var(--ink-3); }

/* ---------- 사이드 요약 목록 ---------- */
.sum { font-size: 14px; }
.sum > .row-between { padding: 7px 0; gap: 10px; flex-wrap: nowrap; }
.sum > .row-between > span { color: var(--ink-3); white-space: nowrap; }
.sum > .row-between > b { text-align: right; }
.sum-line { height: 1px; background: var(--line); margin: 7px 0; }
.text-danger { color: var(--danger); }

.note-list { margin: 0; padding-left: 18px; font-size: 13.5px; color: var(--ink-2); }
.note-list li + li { margin-top: 7px; }

/* ---------- 배지 / 상태 ---------- */
.badge {
  display: inline-block; padding: 3px 10px; border-radius: 7px;
  font-size: 12px; font-weight: 800; white-space: nowrap;
}
.b-gray { background: #eef0f4; color: #6b7280; }
.b-blue { background: #e3f0ff; color: #1f6feb; }
.b-green { background: #e2f7ef; color: #067a5b; }
.b-red { background: #ffe9e8; color: #d63a34; }
.b-orange { background: #fff3e0; color: #c77700; }

/* ---------- 표 ---------- */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; padding: 11px 12px; background: #fafafd; color: var(--ink-3);
  font-weight: 700; font-size: 12.5px; border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.table td { padding: 13px 12px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.table tr:last-child td { border-bottom: none; }
.table-wrap { overflow-x: auto; margin: 0 -4px; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- 알림 / 메시지 ---------- */
.alert {
  padding: 13px 16px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600;
  border: 1px solid transparent;
}
.alert-info { background: #eef4ff; color: #2d5bb9; border-color: #d9e5ff; }
.alert-error { background: #ffefee; color: #c0392b; border-color: #ffd9d6; }
.alert-ok { background: #e8f9f3; color: #067a5b; border-color: #cdf0e3; }
.alert-warn { background: #fff8e6; color: #a06d00; border-color: #ffeab8; }

.empty { text-align: center; padding: 56px 20px; color: var(--ink-3); }
.empty .ico { font-size: 42px; display: block; margin-bottom: 12px; opacity: .55; }

/* ---------- 리스트 아이템 ---------- */
.item {
  display: flex; gap: 14px; align-items: center; padding: 16px 0;
  border-bottom: 1px solid var(--line-2);
}
.item:last-child { border-bottom: none; }
.item .ico {
  width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px;
  background: var(--primary-soft); display: grid; place-items: center; font-size: 20px;
}
.item .body { flex: 1; min-width: 0; }
.item .t { font-weight: 700; font-size: 15px; }
.item .d { color: var(--ink-3); font-size: 13px; margin-top: 2px; }
.item.unread { background: linear-gradient(90deg, var(--primary-soft), transparent 60%); }

/* ---------- 통계 ---------- */
.stat { text-align: center; }
.stat .v { font-size: 26px; font-weight: 800; letter-spacing: -0.8px; }
.stat .k { font-size: 12.5px; color: var(--ink-3); font-weight: 600; margin-top: 2px; }

.steps { display: flex; gap: 6px; align-items: center; }
.step {
  flex: 1; height: 5px; border-radius: 3px; background: var(--line);
}
.step.on { background: var(--primary); }

/* ---------- 진행 상태 ---------- */
.progress-box { text-align: center; padding: 46px 20px; }
.spinner {
  width: 44px; height: 44px; border: 4px solid var(--line);
  border-top-color: var(--primary); border-radius: 50%;
  animation: spin 0.9s linear infinite; margin: 0 auto 20px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.stage-list { display: inline-flex; flex-direction: column; gap: 9px; text-align: left;
              margin-top: 20px; }
.stage-list li { list-style: none; color: var(--ink-4); font-size: 14px; font-weight: 600; }
.stage-list li.on { color: var(--primary); }
.stage-list li.done { color: var(--success); }

/* ---------- 상담 채팅 ---------- */
.chat { display: flex; flex-direction: column; gap: 14px; padding: 6px 2px 12px; }
.msg { display: flex; gap: 10px; max-width: 86%; }
.msg .av {
  width: 32px; height: 32px; flex: 0 0 32px; border-radius: 10px;
  background: var(--primary-soft); display: grid; place-items: center; font-size: 16px;
}
.msg .bubble {
  padding: 13px 16px; border-radius: 15px; font-size: 14.8px; line-height: 1.72;
  white-space: pre-wrap; background: #fff; border: 1px solid var(--line);
}
.msg.me { align-self: flex-end; flex-direction: row-reverse; }
.msg.me .bubble { background: var(--primary); color: #fff; border-color: var(--primary); }
.chat-input { display: flex; gap: 10px; align-items: flex-end;
              border-top: 1px solid var(--line); padding-top: 14px; }
.typing span {
  display: inline-block; width: 6px; height: 6px; margin-right: 3px; border-radius: 50%;
  background: var(--ink-4); animation: blink 1.3s infinite;
}
.typing span:nth-child(2) { animation-delay: .2s; }
.typing span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

/* ---------- 리포트 뷰어 ---------- */
/* 리포트는 iframe이 아니라 페이지 본문에 직접 펼친다.
   안쪽에 또 스크롤이 생기지 않도록 높이를 고정하지 않는다. */
.report-doc {
  display: block; width: 100%;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  /* overflow:hidden 이었는데, 모델이 만든 본문이 넘치면 **글자가 잘려 사라졌다.**
     보호막(report_embed.GUARD_CSS)이 넘침을 막지만, 그래도 넘치는 경우가 있다면
     잘라 없애는 것보다 밀어서라도 읽게 하는 편이 낫다. */
  overflow-x: auto;
  overflow-y: visible;
}
/* 구버전 호환 */
.report-frame {
  width: 100%; min-height: 78vh; border: 1px solid var(--line);
  border-radius: var(--radius); background: #fff;
}

@media print {
  .no-print, .topbar, .tabbar, .footer { display: none !important; }
  body { background: #fff; padding: 0; }
  .page { padding: 0; }
  .wrap { max-width: none; padding: 0; }
  .report-doc { border: none; box-shadow: none; border-radius: 0; }
}

/* ---------- 푸터 ---------- */
.footer {
  border-top: 1px solid var(--line); margin-top: 64px; padding: 32px 0 44px;
  color: var(--ink-4); font-size: 13px;
}
.footer a { color: var(--ink-3); }

.htmx-request .hide-loading { display: none; }
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline-flex; }

/* ==========================================================
   출생지 선택기 (지도)
   ========================================================== */
.bp { position: relative; }
.bp-searchbar { position: relative; margin-bottom: 10px; }
.bp-searchbar .input { padding-left: 40px; }
.bp-searchbar .ico {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--ink-4); font-size: 15px; pointer-events: none;
}
#bp-results {
  display: none; position: absolute; z-index: 800; left: 0; right: 0; top: 100%;
  margin: 4px 0 0; padding: 6px; list-style: none; max-height: 260px; overflow-y: auto;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
}
#bp-results li {
  padding: 10px 12px; border-radius: 8px; cursor: pointer; font-size: 14px; line-height: 1.45;
}
#bp-results li:hover { background: var(--primary-soft); }
#bp-results li b { display: block; font-weight: 700; }
#bp-results li span {
  display: block; color: var(--ink-3); font-size: 12.5px; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#bp-results li.bp-empty { color: var(--ink-3); cursor: default; }
#bp-results li.bp-empty:hover { background: transparent; }

#bp-map {
  height: 320px; border-radius: var(--radius-sm); border: 1px solid var(--line);
  z-index: 1; background: #eef0f5;
}
@media (max-width: 620px) { #bp-map { height: 260px; } }
.bp-fallback {
  height: 100%; display: grid; place-items: center; text-align: center;
  color: var(--ink-3); font-size: 14px; line-height: 1.7;
}
.leaflet-container { font-family: var(--font); }

.bp-selected {
  display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 13px 15px;
  background: var(--primary-soft); border-radius: var(--radius-sm);
}
.bp-selected .pin { font-size: 19px; }
.bp-selected .body { flex: 1; min-width: 0; }
#bp-label { font-weight: 700; font-size: 15px; }
#bp-label.bp-muted { color: var(--ink-3); font-weight: 500; font-size: 13.5px; }
#bp-coords {
  font-size: 12.5px; color: var(--ink-3); margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.bp-error { color: var(--danger) !important; font-weight: 600; }
.bp-manual { display: none; margin-top: 12px; }

/* ---------- 내 정보 드롭다운 ---------- */
.menu { position: relative; }
.menu-panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 100;
  width: 268px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); padding: 6px;
}
.menu-head { padding: 12px 14px 10px; border-bottom: 1px solid var(--line-2); margin-bottom: 6px; }
.menu-head b { display: block; font-size: 14.5px; }
.menu-head span { display: block; color: var(--ink-3); font-size: 12.5px; margin-top: 1px;
                  overflow: hidden; text-overflow: ellipsis; }
.menu-panel a {
  display: block; padding: 10px 14px; border-radius: 8px;
  color: var(--ink); font-size: 14px; font-weight: 600;
}
.menu-panel a:hover { background: var(--primary-soft); text-decoration: none; }
.menu-panel a em {
  display: block; font-style: normal; font-weight: 500;
  color: var(--ink-3); font-size: 12px; margin-top: 1px;
}
.menu-sep { height: 1px; background: var(--line-2); margin: 6px 8px; }
[x-cloak] { display: none !important; }

/* ---------- 서비스 카드 (아이콘 + 설명형) ---------- */
.svc {
  display: flex; gap: 16px; align-items: flex-start; padding: 22px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); color: inherit; transition: transform .12s, box-shadow .12s;
}
.svc:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.svc .ico {
  width: 52px; height: 52px; flex: 0 0 52px; border-radius: 14px;
  background: var(--primary-soft); display: grid; place-items: center; font-size: 25px;
}
.svc .body { flex: 1; min-width: 0; }
.svc h3 { margin: 0 0 5px; font-size: 17px; letter-spacing: -0.3px; }
.svc p { margin: 0; color: var(--ink-3); font-size: 13.8px; line-height: 1.6; }
.svc .meta { display: flex; gap: 8px; align-items: center; margin-top: 12px; }

/* ---------- 안내 배너 (다음 할 일) ---------- */
.todo {
  display: flex; gap: 14px; align-items: center; padding: 18px 22px;
  border-radius: var(--radius); border: 1px solid var(--primary);
  background: var(--primary-soft);
}
.todo .n {
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%;
  background: var(--primary); color: #fff; display: grid; place-items: center;
  font-weight: 800; font-size: 14px;
}
.todo .body { flex: 1; min-width: 0; }
.todo .body b { font-size: 15px; }
.todo .body div { color: var(--ink-2); font-size: 13.5px; margin-top: 2px; }

/* ---------- 탭 ---------- */
.tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.tabs a {
  padding: 11px 16px; font-size: 14.5px; font-weight: 700; color: var(--ink-3);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs a:hover { text-decoration: none; color: var(--ink); }
.tabs a.on { color: var(--primary); border-bottom-color: var(--primary); }

/* ---------- 소셜 로그인 — 3종을 한 줄에 나란히 ---------- */
.social { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.social .sns {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 13px 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  font-family: var(--font); font-size: 14px; font-weight: 700; cursor: pointer;
  white-space: nowrap; transition: filter .12s, transform .12s;
}
.social .sns:hover { filter: brightness(.96); text-decoration: none; transform: translateY(-1px); }
.social .kakao { background: #FEE500; border-color: #FEE500; color: #191600; }
.social .naver { background: #03C75A; border-color: #03C75A; color: #fff; }
.social .google { background: #fff; }
.social .sq {
  width: 20px; height: 20px; flex: 0 0 20px; display: grid; place-items: center;
  font-weight: 900; font-size: 12.5px; border-radius: 5px;
}
.social .not-ready { opacity: .5; }
.social-note {
  margin-top: 9px; text-align: center;
  font-size: 12.5px; color: var(--ink-4); font-weight: 600;
}
/* 폭이 아주 좁으면 세로로 접는다 */
@media (max-width: 360px) {
  .social { grid-template-columns: 1fr; }
}
.divider {
  display: flex; align-items: center; gap: 12px; margin: 22px 0 14px;
  color: var(--ink-4); font-size: 13px;
}
.divider::before, .divider::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}

/* ---------- 사주 정보 순서 변경 ---------- */
.ord { display: flex; flex-direction: column; gap: 4px; flex: 0 0 auto; }
.ord form { line-height: 0; }
.ord button {
  width: 28px; height: 24px; padding: 0; cursor: pointer;
  border: 1px solid var(--line); background: #fff; color: var(--ink-3);
  border-radius: 7px; font-size: 10px; line-height: 1;
}
.ord button:hover:not(:disabled) { background: var(--primary-soft); color: var(--primary); }
.ord button:disabled { opacity: .3; cursor: default; }
.ord-no {
  display: grid; place-items: center; width: 22px; height: 22px; flex: 0 0 22px;
  border-radius: 7px; background: var(--line-2); color: var(--ink-3);
  font-size: 12px; font-weight: 800;
}

/* ---------- 세그먼트 선택 (등록정보 / 직접입력) ---------- */
.seg { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.seg label {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 12px; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; font-size: 14px; font-weight: 700; color: var(--ink-3);
  cursor: pointer; text-align: center; transition: all .12s;
}
.seg label:hover { border-color: var(--secondary); }
.seg label.on { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.seg input { display: none; }
@media (max-width: 520px) { .seg { grid-template-columns: 1fr; } }
.seg.seg-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) { .seg.seg-3 { grid-template-columns: 1fr; } }

/* ---------- 화풍 선택 ---------- */
.style-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.style-grid label {
  display: block; padding: 16px; border: 1.5px solid var(--line);
  border-radius: var(--radius-sm); background: #fff; cursor: pointer; transition: all .12s;
}
.style-grid label:hover { border-color: var(--secondary); }
.style-grid label.on {
  border-color: var(--primary); background: var(--primary-soft);
  box-shadow: 0 0 0 3px rgba(108, 92, 231, .10);
}
.style-grid input { display: none; }
.style-grid .ico { display: block; font-size: 22px; line-height: 1.2; }
.style-grid b { display: block; margin-top: 8px; font-size: 15px; }
.style-grid em { display: block; margin-top: 3px; font-style: normal;
                 color: var(--ink-3); font-size: 12.8px; line-height: 1.55; }
@media (max-width: 620px) { .style-grid { grid-template-columns: 1fr; } }

/* ---------- 디지털 부적 ---------- */
.talis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) { .talis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .talis { grid-template-columns: 1fr; } }
.talis-card { overflow: hidden; padding: 0; }
.talis-card .shot {
  display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover;
  background: var(--line-2); border-bottom: 1px solid var(--line);
}
.talis-card .meta { padding: 16px 18px 18px; }
.talis-card .meta h3 { margin: 0 0 4px; font-size: 16px; }
.talis-card .meta .d { color: var(--ink-3); font-size: 12.8px; }
.talis-wait {
  display: grid; place-items: center; width: 100%; aspect-ratio: 2 / 3;
  background: var(--line-2); color: var(--ink-3); font-size: 13.5px; text-align: center;
}
.talis-view { max-width: 420px; width: 100%; border-radius: var(--radius);
              border: 1px solid var(--line); box-shadow: var(--shadow); }

/* ---------- 상담 — 답변의 근거 리포트 ---------- */
.basis-report {
  display: flex; gap: 12px; align-items: center;
  padding: 13px 14px; border-radius: var(--radius-sm);
  background: var(--primary-soft); color: inherit; transition: filter .12s;
}
.basis-report:hover { text-decoration: none; filter: brightness(.97); }
.basis-report .ico { font-size: 20px; flex: 0 0 auto; }
.basis-report .body { min-width: 0; }
.basis-report b { display: block; font-size: 14px; line-height: 1.4; }
.basis-report em {
  display: block; font-style: normal; margin-top: 2px;
  color: var(--ink-3); font-size: 12.5px;
}

/* ---------- 지난 상담 목록 (주문 화면 사이드) ---------- */
.past-list { display: flex; flex-direction: column; gap: 6px; }
.past-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: #fff; color: inherit;
  transition: border-color .12s, background .12s;
}
.past-item:hover { text-decoration: none; border-color: var(--primary); background: var(--primary-soft); }
.past-item .body { min-width: 0; flex: 1; }
.past-item b { display: block; font-size: 13.8px; line-height: 1.4;
               overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.past-item em { display: block; font-style: normal; margin-top: 2px;
                color: var(--ink-3); font-size: 12px; }

/* ==========================================================
   운세 모니터링 — 달력과 하루 판정
   색은 세 단계뿐이다. 길일(초록) · 평이(회색) · 주의일(붉은색).
   숫자를 크게 쓰기보다 '왜 그런지'가 읽히도록 여백을 준다.
   ========================================================== */
.fx-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.fx-tabs a {
  padding: 8px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 700;
  border: 1px solid var(--line); background: #fff; color: var(--ink-2);
}
.fx-tabs a:hover { border-color: var(--secondary); text-decoration: none; }
.fx-tabs a.on { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }

/* ---------- 오늘의 판정 ---------- */
.fx-hero { border-left: 5px solid var(--ink-4); }
.fx-hero.fx-good { border-left-color: var(--success); }
.fx-hero.fx-bad { border-left-color: var(--danger); }
.fx-hero.fx-normal { border-left-color: var(--ink-4); }

.fx-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.fx-when { font-size: 13px; color: var(--ink-3); font-weight: 700; }
.fx-when .badge { margin-left: 6px; }
.fx-headline {
  font-size: 21px; font-weight: 800; letter-spacing: -0.4px;
  line-height: 1.35; margin-top: 4px;
}
.fx-score { flex: 0 0 auto; text-align: right; line-height: 1; }
.fx-score b { font-size: 34px; font-weight: 800; font-variant-numeric: tabular-nums; }
.fx-score span { font-size: 14px; color: var(--ink-3); margin-left: 2px; }
.fx-grade {
  display: block; font-style: normal; margin-top: 6px;
  font-size: 12px; font-weight: 800; color: var(--ink-3);
}
.fx-good .fx-score b, .fx-good .fx-grade { color: var(--success); }
.fx-bad .fx-score b, .fx-bad .fx-grade { color: var(--danger); }

.fx-message { margin: 14px 0 0; font-size: 15px; line-height: 1.75; color: var(--ink-2); }

.fx-reasons {
  margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line);
  display: flex; flex-direction: column; gap: 7px;
}
.fx-reasons-head { font-size: 12.5px; font-weight: 800; color: var(--ink-3); margin-bottom: 3px; }
.fx-reason {
  display: flex; align-items: baseline; gap: 9px;
  font-size: 13.8px; line-height: 1.55; color: var(--ink-2);
}
.fx-tag {
  flex: 0 0 auto; min-width: 62px; text-align: center;
  padding: 2px 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 800;
  background: #eef0f4; color: #6b7280;
}
.fx-sign-up .fx-tag { background: #e2f7ef; color: #067a5b; }
.fx-sign-down .fx-tag { background: #ffe9e8; color: #d63a34; }
.fx-foot { margin-top: 16px; font-size: 12.5px; color: var(--ink-4); }

/* ---------- 달력 ---------- */
.fx-cal { display: flex; flex-direction: column; gap: 5px; }
.fx-cal-head, .fx-cal-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.fx-cal-head span {
  text-align: center; font-size: 11.5px; font-weight: 800; color: var(--ink-4);
  padding-bottom: 2px;
}
.fx-cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px;
  /* 예전에는 aspect-ratio: 1/1 이었다. 화면이 넓으면 칸 하나가 142×142px 이 되어
     달력만 900px 을 차지했고, 아래 글을 보려면 한 화면을 통째로 넘겨야 했다.
     칸에 든 것은 날짜와 점수 두 줄뿐이라 이만한 높이가 필요 없다. */
  min-height: 52px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; color: var(--ink-2);
  transition: transform .1s, border-color .12s;
}
.fx-cell:hover { text-decoration: none; border-color: var(--primary); transform: translateY(-1px); }
.fx-cell b { font-size: 14px; font-weight: 700; line-height: 1; }
.fx-cell em {
  font-style: normal; font-size: 10.5px; font-weight: 700;
  color: var(--ink-4); font-variant-numeric: tabular-nums; line-height: 1;
}
.fx-cell.fx-empty { border: 0; background: transparent; pointer-events: none; }
.fx-cell.fx-good { background: #e9f9f3; border-color: #b9ead9; }
.fx-cell.fx-good em { color: #067a5b; }
.fx-cell.fx-bad { background: #fff0ef; border-color: #f6c9c6; }
.fx-cell.fx-bad em { color: #d63a34; }
.fx-cell.fx-none { background: var(--line-2); color: var(--ink-4); }
.fx-cell.is-past { opacity: .5; }
.fx-cell.is-past:hover { opacity: 1; }
.fx-cell.is-today { box-shadow: inset 0 0 0 2px var(--primary); }
.fx-cell.is-sel { border-color: var(--primary); background: var(--primary-soft); }

.fx-legend {
  display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px;
  font-size: 12.5px; color: var(--ink-3);
}
.fx-legend span { display: inline-flex; align-items: center; gap: 6px; }
.fx-dot { width: 11px; height: 11px; border-radius: 3px; display: inline-block;
          border: 1px solid var(--line); }
.fx-dot.fx-good { background: #e9f9f3; border-color: #b9ead9; }
.fx-dot.fx-bad { background: #fff0ef; border-color: #f6c9c6; }
.fx-dot.fx-normal { background: #fff; }
.fx-dot.fx-none { background: var(--line-2); }

/* ---------- 무료 리포트 ---------- */
/* 리포트 본문은 종합 리포트와 같은 .report-doc 을 그대로 쓴다 —
   생김새가 같아야 "같은 집에서 만든 것"으로 읽힌다.
   받기 전에는 다섯 장의 내용을 한눈에 훑을 수 있는 조용한 프리뷰를 둔다. */
.fr-start { padding: 26px 24px 24px; }
.fr-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.fr-intro .card-title { margin: 7px 0 0; }
.fr-intro > p { max-width: 330px; margin: 2px 0 0; color: var(--ink-3); font-size: 13px; line-height: 1.65; }
.fr-kicker {
  display: inline-flex; align-items: center; padding: 5px 9px; border-radius: 999px;
  background: var(--primary-soft); color: var(--primary); font-size: 10.5px;
  letter-spacing: .08em; font-weight: 800; white-space: nowrap;
}
.fr-roadmap { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; margin-top: 22px; }
.fr-step {
  position: relative; min-height: 126px; padding: 15px 62px 13px 13px; overflow: hidden;
  border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(150deg, #fff 35%, #fbfaff);
}
.fr-step-no { display: block; margin-bottom: 17px; color: var(--primary); font-size: 11px; font-weight: 800; letter-spacing: .06em; }
.fr-step-art { position: absolute; right: 8px; bottom: 7px; width: 58px; height: 58px; color: #c9c1ff;
  opacity: .78; pointer-events: none; }
.fr-step-art svg { display: block; width: 100%; height: 100%; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.fr-step b, .fr-step p { position: relative; z-index: 1; }
.fr-step b { display: block; color: var(--ink); font-size: 14px; letter-spacing: -0.25px; }
.fr-step p { margin: 6px 0 0; color: var(--ink-3); font-size: 12px; line-height: 1.55; word-break: keep-all; }
.fr-run { margin: 18px 0 4px; }

/* 리포트 본문 — .report-doc(종이) + .md-body(활자) 위에 얹는 최소한의 규칙 */
.fr-doc { padding: 36px 42px 44px; }
.fr-doc h1 {
  font-size: 22px; margin: 48px 0 8px; padding: 0 0 13px;
  border-bottom: 2px solid var(--ink); color: var(--ink); letter-spacing: -0.55px;
}
.fr-doc h1:first-child { margin-top: 0; font-size: 25px; }
/* 챕터 제목 바로 아래의 *(부제)* 는 본문이 아니라 안내다 */
.fr-doc h1 + p em, .fr-doc h2 + p em { color: var(--ink-4); font-size: 13.5px; }
.fr-doc h2 { font-size: 16.5px; border-top: 0; padding-top: 0; margin: 26px 0 10px; }
.fr-doc img {
  display: block; width: 100%; max-width: 760px; height: auto;
  margin: 18px auto; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none;
}
.fr-doc hr { margin: 34px 0 0; border-top: 0; }
.fr-doc table { font-size: 13.5px; }
.fr-doc td { line-height: 1.7; }

@media (max-width: 600px) {
  .fr-start { padding: 20px 17px; }
  .fr-intro { display: block; }
  .fr-intro > p { margin-top: 10px; }
  .fr-intro > .fr-kicker { position: absolute; right: 28px; top: 22px; }
  .fr-start { position: relative; }
  .fr-roadmap { grid-template-columns: 1fr; gap: 7px; margin-top: 18px; }
  .fr-step { min-height: 0; padding: 12px 59px 12px 47px; }
  .fr-step-no { position: absolute; top: 13px; left: 14px; margin: 0; }
  .fr-step-art { right: 9px; bottom: 7px; width: 48px; height: 48px; }
  .fr-step p { margin-top: 3px; }
  .fr-doc { padding: 24px 17px 30px; }
  .fr-doc h1 { font-size: 20px; margin-top: 35px; }
  .fr-doc h1:first-child { font-size: 23px; }
  .fr-doc img { margin: 14px auto; }
}

.dy-ganji { margin-left: 8px; color: var(--ink-4); font-weight: 600; }

/* 앞으로 며칠 — 점수와 등급만. 문장은 그날 아침에 만든다.
   칸 수가 설정으로 바뀌므로 개수를 못 박지 않고 자동으로 채운다. */
.dy-preview {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
.dy-day {
  display: flex; flex-direction: column; gap: 3px;
  padding: 12px 13px; border: 1px solid var(--line); border-radius: 11px;
  background: #fff;
}
.dy-day b { font-size: 14px; }
.dy-day .dy-date { font-size: 12px; color: var(--ink-4); }
.dy-day em {
  font-size: 24px; font-weight: 800; font-style: normal; line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.dy-day .dy-grade { font-size: 12.5px; color: var(--ink-3); font-weight: 700; }
.dy-day.fx-good { background: #e9f9f3; border-color: #b9ead9; }
.dy-day.fx-good em, .dy-day.fx-good .dy-grade { color: #067a5b; }
.dy-day.fx-bad { background: #fff0ef; border-color: #f6c9c6; }
.dy-day.fx-bad em, .dy-day.fx-bad .dy-grade { color: #d63a34; }

/* ---------- 질문 타로 ---------- */
.tarot-hero { position:relative; overflow:hidden; padding:30px; color:#f7f3e9; background:linear-gradient(135deg,#17152f,#3b326c); }
.tarot-hero h2 { position:relative; z-index:1; margin:8px 0; color:#fff; font-size:23px; }
.tarot-hero p { position:relative; z-index:1; max-width:540px; margin:0; color:#d8d2f2; line-height:1.7; font-size:14px; }
.tarot-eyebrow { position:relative; z-index:1; color:#d8c57d; letter-spacing:.12em; font-size:10px; font-weight:800; }
.tarot-backs { position:absolute; right:30px; bottom:-36px; display:flex; gap:8px; transform:rotate(-11deg); opacity:.5; }
.tarot-backs i { display:grid; width:76px; height:116px; place-items:center; border:1px solid #d8c57d; border-radius:7px; color:#e5d58c; font-size:25px; font-style:normal; background:repeating-linear-gradient(45deg,transparent 0 7px,rgba(216,197,125,.14) 7px 8px); }
.tarot-topics { display:flex; flex-wrap:wrap; gap:8px; margin:15px 0; }
.tarot-topics input { position:absolute; opacity:0; }
.tarot-topics span { display:block; padding:8px 12px; border:1px solid var(--line); border-radius:999px; color:var(--ink-3); font-size:13px; cursor:pointer; }
.tarot-topics input:checked + span { border-color:var(--primary); background:var(--primary-soft); color:var(--primary); font-weight:800; }
.tarot-topic-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.tarot-topic-option span { min-height:70px; padding:12px 13px; border-radius:12px; }
.tarot-topic-option span b { display:block; color:var(--ink); font-size:13px; }
.tarot-topic-option span small { display:block; margin-top:5px; color:var(--ink-3); font-size:11.5px; font-weight:500; line-height:1.45; }
.tarot-topic-option input:checked + span b { color:var(--primary); }
.tarot-preset-hint { margin:0; }
.tarot-history-card { display:flex; flex-direction:column; gap:9px; padding:15px; }
.tarot-history-card .row-between b { color:var(--ink); font-size:14px; }
.tarot-history-card .row-between a { color:var(--primary); font-size:12px; font-weight:800; }
.tarot-history-item { display:grid; grid-template-columns:auto 1fr; gap:3px 8px; padding:10px 0 0; border-top:1px solid var(--line-2); color:inherit; }
.tarot-history-item span { color:var(--primary); font-size:11px; font-weight:800; }
.tarot-history-item strong { overflow:hidden; color:var(--ink); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.tarot-history-item small { grid-column:1 / -1; color:var(--ink-3); font-size:11px; }
.tarot-question { min-height:108px; resize:vertical; }
.tarot-note, .tarot-small { display:flex; flex-direction:column; gap:5px; border-color:#e7e0ff; background:#fcfbff; }
.tarot-note b, .tarot-small b { font-size:13px; color:#393262; }
.tarot-note span, .tarot-small span { color:var(--ink-3); font-size:12.5px; line-height:1.6; }
.tarot-reading-doc .md-body h2 { margin:30px 0 12px; padding-top:0; border-top:0; }
.tarot-reading-doc .md-body hr { display:none; }
.tarot-result-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:20px 0 28px; }
.tarot-result-card { position:relative; min-height:210px; padding:17px 13px; overflow:hidden; border:1px solid #d8cfad; border-radius:10px; color:#f4edcf; text-align:center; background:linear-gradient(145deg,#211d3d,#4b3d76); }
.tarot-result-card:before { content:'✦'; position:absolute; inset:8px; display:grid; place-items:center; border:1px solid rgba(221,201,128,.55); border-radius:6px; color:rgba(234,216,151,.35); font-size:54px; }
.tarot-result-card > * { position:relative; z-index:1; }
.tarot-result-card em { display:block; color:#dec979; font-size:11px; font-style:normal; font-weight:800; letter-spacing:.08em; }
.tarot-result-card b { display:block; margin:48px 0 9px; color:#fffaf0; font-size:15px; line-height:1.45; }
.tarot-result-card span { font-size:12px; color:#dcd5ee; }
@media (max-width:600px) { .tarot-hero { padding:24px 20px; } .tarot-backs { right:10px; opacity:.25; } .tarot-result-cards { grid-template-columns:1fr; } .tarot-result-card { min-height:145px; } .tarot-result-card b { margin:28px 0 8px; } }

/* ---------- 질문 타로: 사용자가 고르는 실물 메이저 아르카나 ---------- */
.tarot-card-art { display:block; width:100%; aspect-ratio:2 / 3; border-radius:7px; background-image:url('/static/img/tarot/major-arcana-deck-v1.webp'); background-size:400% 600%; background-repeat:no-repeat; box-shadow:0 10px 20px rgba(19,16,39,.2); }
.tarot-art-fool { background-position:0 0; } .tarot-art-magician { background-position:33.333% 0; } .tarot-art-priestess { background-position:66.667% 0; } .tarot-art-empress { background-position:100% 0; }
.tarot-art-emperor { background-position:0 20%; } .tarot-art-hierophant { background-position:33.333% 20%; } .tarot-art-lovers { background-position:66.667% 20%; } .tarot-art-chariot { background-position:100% 20%; }
.tarot-art-strength { background-position:0 40%; } .tarot-art-hermit { background-position:33.333% 40%; } .tarot-art-wheel { background-position:66.667% 40%; } .tarot-art-justice { background-position:100% 40%; }
.tarot-art-hanged { background-position:0 60%; } .tarot-art-death { background-position:33.333% 60%; } .tarot-art-temperance { background-position:66.667% 60%; } .tarot-art-devil { background-position:100% 60%; }
.tarot-art-tower { background-position:0 80%; } .tarot-art-star { background-position:33.333% 80%; } .tarot-art-moon { background-position:66.667% 80%; } .tarot-art-sun { background-position:100% 80%; }
.tarot-art-judgement { background-position:0 100%; } .tarot-art-world { background-position:33.333% 100%; } .tarot-art-back { background-position:100% 100%; }
.tarot-art-back { background-image:url('/static/img/tarot/tarot-back-v2.webp'); background-size:cover; background-position:center; }
.tarot-face-0, .tarot-face-1, .tarot-face-2 { background-image:url('/static/img/tarot/reading-faces-v1.webp'); background-size:300% 100%; }
.tarot-face-0 { background-position:0 0; }.tarot-face-1 { background-position:50% 0; }.tarot-face-2 { background-position:100% 0; }
.tarot-card-art.is-reversed { transform:rotate(180deg); }

.tarot-draw-page .page-head { margin-bottom:0; }
.tarot-draw-intro { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:18px; padding:18px 22px; background:linear-gradient(105deg,#1e1939,#373066); color:#f8f4e9; border-color:#4d4381; }
.tarot-draw-intro b { display:block; font-size:15px; } .tarot-draw-intro p { margin:4px 0 0; color:#d6d0ed; font-size:13px; }
.tarot-step { color:#dac66f; font-weight:800; letter-spacing:.08em; font-size:11px; }
.tarot-draw-intro strong { color:#fff3bb; font-size:20px; white-space:nowrap; }
.tarot-deck { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:15px; align-items:center; padding:8px 0 20px; perspective:1400px; }
.tarot-pick { position:relative; display:block; appearance:none; border:0; padding:0; border-radius:9px; background:transparent; cursor:pointer; transform:translateY(0) rotate(var(--tilt, 0deg)); transition:transform .24s ease, filter .24s ease; }
.tarot-pick:nth-child(1) { --tilt:-7deg; } .tarot-pick:nth-child(2) { --tilt:-4deg; } .tarot-pick:nth-child(3) { --tilt:-2deg; } .tarot-pick:nth-child(5) { --tilt:2deg; } .tarot-pick:nth-child(6) { --tilt:4deg; } .tarot-pick:nth-child(7) { --tilt:7deg; }
.tarot-pick:hover { transform:translateY(-13px) rotate(var(--tilt, 0deg)); } .tarot-pick:focus-visible { outline:3px solid var(--primary); outline-offset:4px; }
.tarot-pick-inner { display:block; position:relative; transform-style:preserve-3d; transition:transform .62s cubic-bezier(.2,.75,.25,1); }
.tarot-pick .tarot-card-art { backface-visibility:hidden; border:1px solid #b99d52; }
.tarot-card-face { position:absolute; inset:0; transform:rotateY(180deg); }
.tarot-card-face.is-reversed { transform:rotateY(180deg) rotate(180deg); }
.tarot-pick.is-picked { transform:translateY(-22px) rotate(0); z-index:2; } .tarot-pick.is-picked .tarot-pick-inner { transform:rotateY(180deg); }
.tarot-pick.is-picked .tarot-card-back { opacity:0; }
.tarot-pick-order { position:absolute; z-index:3; top:-10px; right:-9px; display:none; width:27px; height:27px; border-radius:50%; place-items:center; background:var(--primary); color:#fff; font-size:12px; font-weight:800; box-shadow:0 3px 10px rgba(74,58,183,.35); }
.tarot-pick.is-picked .tarot-pick-order { display:grid; }
.tarot-choice-bar { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 22px; border-color:#ddd7f6; background:#fdfcff; }.tarot-choice-bar b { display:block; margin:3px 0; font-size:17px; }.tarot-choice-bar p { margin:0; color:var(--ink-3); font-size:13px; }.tarot-choice-bar .btn:disabled { opacity:.48; pointer-events:none; }
.tarot-draw-hint { text-align:center; }

/* 결과에는 카드 그림을 중심에 두고 설명은 카드 밖에 둔다. */
.tarot-result-card { display:grid; grid-template-columns:94px 1fr; min-height:0; gap:13px; padding:12px; text-align:left; color:var(--ink); background:#fff; border-color:#e5dfc7; }.tarot-result-card:before { display:none; }.tarot-result-card .tarot-card-art { align-self:start; }.tarot-result-card div { display:flex; min-width:0; flex-direction:column; justify-content:center; }.tarot-result-card em { color:#8b7642; }.tarot-result-card b { margin:8px 0 6px; color:var(--ink); }.tarot-result-card span { color:var(--ink-3); line-height:1.6; }
.tarot-reading-wait { min-height:360px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; overflow:hidden; background:radial-gradient(circle at 50% 30%,#423875,#1d1938 70%); color:#fff; }.tarot-reading-wait h2 { margin:10px 0 8px; }.tarot-reading-wait p { max-width:470px; margin:0; color:#d8d2ed; font-size:14px; line-height:1.7; }.tarot-wait-orbit { position:relative; width:56px; height:56px; margin-bottom:16px; border:1px solid rgba(223,202,114,.35); border-radius:50%; animation:tarot-orbit 4s linear infinite; }.tarot-wait-orbit i { position:absolute; width:7px; height:7px; border-radius:50%; background:#e4ca71; }.tarot-wait-orbit i:nth-child(1) { top:-4px; left:24px; }.tarot-wait-orbit i:nth-child(2) { right:2px; bottom:7px; }.tarot-wait-orbit i:nth-child(3) { left:2px; bottom:7px; }.tarot-wait-cards { display:flex; gap:12px; margin-top:24px; }.tarot-wait-cards .tarot-card-art { width:74px; box-shadow:0 12px 25px rgba(0,0,0,.28); }.tarot-wait-cards .tarot-card-art:nth-child(1) { transform:rotate(-7deg); }.tarot-wait-cards .tarot-card-art:nth-child(3) { transform:rotate(7deg); }@keyframes tarot-orbit { to { transform:rotate(360deg); } }
@media (max-width:760px) { .tarot-draw-intro { grid-template-columns:1fr auto; }.tarot-draw-intro .tarot-step { grid-column:1 / -1; }.tarot-deck { grid-template-columns:repeat(4, minmax(0,1fr)); gap:13px; padding:10px 6px 22px; }.tarot-pick:nth-child(n) { --tilt:0deg; }.tarot-choice-bar { align-items:flex-start; flex-direction:column; }.tarot-choice-bar .btn { width:100%; }.tarot-result-cards { grid-template-columns:1fr; }.tarot-result-card { min-height:0; } }

/* 테이블 위에 펼친 덱 → 세 자리로 드래그 → 리딩 때만 앞면 공개 */
.tarot-table { --tarot-card-w:78px; --tarot-card-h:117px; padding:28px 30px 34px; border:1px solid #d9d2f0; border-radius:var(--radius); background:radial-gradient(circle at 50% -70%,#554787,#252044 57%,#1c1835); box-shadow:inset 0 1px rgba(255,255,255,.12); }
.tarot-fan-wrap { max-width:1080px; margin:auto; }.tarot-zone-label { margin:0; color:#eee9ff; font-size:13px; font-weight:800; letter-spacing:.02em; }.tarot-zone-label span { margin-left:8px; color:#bdb3da; font-size:11px; font-weight:600; }
.tarot-fan { position:relative; z-index:10; height:286px; margin:14px auto 48px; max-width:1040px; overflow:visible; }.tarot-fan .tarot-pick { position:absolute; width:var(--tarot-card-w); left:calc(50% + var(--x)); bottom:var(--bottom); margin-left:calc(var(--tarot-card-w) / -2); z-index:1; transform-origin:50% 100%; transform:rotate(var(--rot)); touch-action:none; }.tarot-fan .tarot-pick:hover { z-index:90; filter:brightness(1.06); transform:rotate(var(--rot)) translateY(-9px); }.tarot-pick.is-dragging { z-index:100!important; cursor:grabbing; transition:none; filter:drop-shadow(0 18px 15px rgba(0,0,0,.4)); }.tarot-reading-slots { position:relative; z-index:1; }
.tarot-reading-slots { display:grid; grid-template-columns:repeat(3,var(--tarot-card-w)); justify-content:center; gap:72px; margin:0 auto; }.tarot-reading-position { display:flex; flex-direction:column; align-items:center; gap:10px; }.tarot-slot-label { display:flex; align-items:baseline; justify-content:center; gap:6px; color:#f4eed8; white-space:nowrap; }.tarot-slot-label span { color:#dfca75; font-size:10px; font-weight:800; }.tarot-slot-label b { font-size:12px; }.tarot-reading-slot { position:relative; display:grid; box-sizing:border-box; width:var(--tarot-card-w); height:var(--tarot-card-h); place-items:center; overflow:hidden; border:1px dashed rgba(234,219,157,.65); border-radius:8px; color:#c5bcdf; background:rgba(9,7,25,.28); text-align:center; transition:border-color .2s,background .2s; }.tarot-reading-slot:has(.tarot-pick) { border-style:solid; background:rgba(0,0,0,.15); }.tarot-reading-slot small { font-size:11px; }.tarot-reading-slot .tarot-pick { position:relative; width:var(--tarot-card-w); height:var(--tarot-card-h); left:auto; bottom:auto; margin:0; transform:none!important; cursor:pointer; }.tarot-reading-slot .tarot-pick-inner,.tarot-reading-slot .tarot-card-art { width:100%; height:100%; aspect-ratio:auto; }.tarot-reading-slot .tarot-card-art { border-radius:7px; }.tarot-reading-slot .tarot-pick.is-picked { transform:none!important; }.tarot-reading-slot .tarot-pick.is-picked .tarot-pick-inner { transform:none; }.tarot-reading-slot .tarot-pick.is-picked .tarot-card-back { opacity:1; }.tarot-reading-slot .tarot-pick.is-revealed .tarot-pick-inner { transform:rotateY(180deg); }.tarot-reading-slot .tarot-pick.is-revealed .tarot-card-back { opacity:0; }
.tarot-choice-bar { margin-top:24px; }.tarot-draw-hint { margin:24px auto 0; }
@media (max-width:760px){.tarot-table{--tarot-card-w:56px;--tarot-card-h:84px;padding:22px 12px}.tarot-fan{height:215px;margin-bottom:36px;max-width:680px}.tarot-reading-slots{grid-template-columns:repeat(3,var(--tarot-card-w));gap:28px}.tarot-reading-position{gap:7px}.tarot-slot-label{display:block;text-align:center}.tarot-slot-label span,.tarot-slot-label b{display:block;font-size:10px}.tarot-reading-slot small{display:none}.tarot-zone-label span{display:none}}

/* 카드가 들어간 자리에는 안내 문구를 남기지 않는다. 프레임과 카드가 1:1이다. */
.tarot-reading-slot:has(.tarot-pick) > small { display:none; }

.free-summary-note {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 17px;
  border: 1px solid #e6e1ff; border-left: 4px solid var(--primary); border-radius: 12px; background: #fbfaff;
}
.free-summary-note b { display: block; color: var(--ink); font-size: 14px; }
.free-summary-note span { display: block; margin-top: 3px; color: var(--ink-3); font-size: 12.5px; line-height: 1.55; }
.free-summary-note a { flex: 0 0 auto; color: var(--primary); font-size: 13px; font-weight: 800; white-space: nowrap; }
.dy-more-head { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 15px; }
.dy-more-head span { color: var(--primary); font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.dy-more-head .card-title { margin: 4px 0 0; }
.dy-more-head p { max-width: 390px; margin: 0; color: var(--ink-3); font-size: 12.5px; line-height: 1.6; }
.dy-more-grid { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dy-more-grid a {
  position: relative; display: flex; flex-direction: column; gap: 5px;
  padding: 14px 15px; border: 1px solid var(--line); border-radius: 12px;
  color: var(--ink-1);
}
.dy-more-grid a:hover { border-color: var(--primary); text-decoration: none; }
.dy-more-grid a em { color: var(--primary); font-size: 11px; font-style: normal; font-weight: 800; letter-spacing: .06em; }
.dy-more-grid a > span { font-size: 13px; color: var(--ink-3); line-height: 1.65; }

@media (max-width: 600px) {
  .dy-more-grid { grid-template-columns: 1fr; }
  .free-summary-note, .dy-more-head { display: block; }
  .free-summary-note a { display: inline-block; margin-top: 9px; }
  .dy-more-head p { margin-top: 8px; }
}

/* ---------- 대시보드 요약 ---------- */
.fx-today-mini { display: flex; align-items: center; gap: 14px; }
.fx-today-mini .fx-score b { font-size: 26px; }

@media (max-width: 600px) {
  .fx-headline { font-size: 18px; }
  .fx-score b { font-size: 28px; }
  .fx-cell { min-height: 38px; }
  .fx-tag { min-width: 54px; }
}

/* 화면이 좁을 때 사이드가 아래로 내려가는 것은 기존 .layout-side 규칙을 따른다 */

/* 빌드 표식 — 눈에 띄지 않되, 찾으면 바로 보이는 크기 */
.build-tag {
  margin-left: 8px; padding: 1px 7px; border-radius: 999px;
  background: var(--line-2); color: var(--ink-4);
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}

/* ---------- 지켜보는 사주 목록 ---------- */
.fw-list { display: grid; gap: 14px; }
.fw-card {
  display: block; color: inherit; border-left: 5px solid var(--ink-4);
  transition: transform .1s, box-shadow .12s;
}
.fw-card:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.fw-card.fx-good { border-left-color: var(--success); }
.fw-card.fx-bad { border-left-color: var(--danger); }
.fw-card.is-off { opacity: .6; border-left-color: var(--line); }
.fw-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.fw-who b { font-size: 16.5px; font-weight: 800; letter-spacing: -0.3px; }
.fw-who span { color: var(--ink-3); font-size: 13.5px; margin-left: 6px; }
.fw-today { margin-top: 6px; font-size: 17px; font-weight: 800; letter-spacing: -0.3px; }
.fw-msg { margin: 8px 0 0; color: var(--ink-2); font-size: 14.2px; line-height: 1.7; }
.fw-foot {
  margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line);
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  font-size: 12.5px; color: var(--ink-3);
}
.fw-stat { display: inline-flex; align-items: center; gap: 6px; }
.fw-more { margin-left: auto; color: var(--primary); font-weight: 700; }

/* ---------- 마크다운 본문 (월간 운세) ---------- */
.md-body { font-size: 15px; line-height: 1.85; color: var(--ink-2); }
.md-body h1 { font-size: 23px; letter-spacing: -0.6px; margin: 4px 0 18px; color: var(--ink); }
.md-body h2 {
  font-size: 18px; margin: 32px 0 12px; padding-top: 20px; color: var(--ink);
  border-top: 1px solid var(--line-2);
}
.md-body h3 { font-size: 15.5px; margin: 22px 0 8px; color: var(--ink); }
.md-body p { margin: 10px 0; }
.md-body ul, .md-body ol { margin: 10px 0; padding-left: 22px; }
.md-body li { margin: 5px 0; }
.md-body strong { color: var(--ink); font-weight: 800; }
.md-body code {
  background: var(--line-2); padding: 1px 6px; border-radius: 6px;
  font-size: 13px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.md-body hr { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }
.md-body blockquote {
  margin: 18px 0; padding: 14px 18px; border-left: 4px solid var(--primary);
  background: var(--primary-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--ink-2);
}
.md-table-wrap { overflow-x: auto; margin: 16px 0; }
.md-body table { border-collapse: collapse; width: 100%; font-size: 13.8px; }
.md-body th, .md-body td {
  border: 1px solid var(--line); padding: 9px 12px; text-align: left; vertical-align: top;
}
.md-body th { background: var(--line-2); font-weight: 800; color: var(--ink); white-space: nowrap; }
.md-body :first-child { margin-top: 0; }

/* ---------- 월간 운세 달력 ---------- */
.mo-head { align-items: flex-start; gap: 16px; }
.mo-month {
  flex: 0 0 auto; font-size: 15px; font-weight: 800; color: var(--primary);
  background: var(--primary-soft); padding: 6px 12px; border-radius: 999px;
}
.mo-good { color: var(--success); }
.mo-bad { color: var(--danger); }

.mo-cell { font: inherit; cursor: pointer; }
.mo-cell.is-sel { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }

.mo-detail {
  margin-top: 16px; padding: 16px 18px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); border-left: 4px solid var(--ink-4);
  background: #fff;
}
.mo-detail.fx-good { border-left-color: var(--success); background: #f6fdfa; }
.mo-detail.fx-bad { border-left-color: var(--danger); background: #fffaf9; }
.mo-detail-top { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.mo-detail-top b { font-size: 16px; font-weight: 800; }
.mo-detail-top span { color: var(--ink-3); font-size: 13px; }
.mo-detail-top em {
  margin-left: auto; font-style: normal; font-weight: 800; font-size: 13px;
  color: var(--ink-2);
}
.mo-detail p { margin: 8px 0 0; font-size: 14.2px; line-height: 1.7; color: var(--ink-2); }
.mo-detail .mo-field { color: var(--ink-3); font-size: 13px; }

.mo-sub { font-size: 13px; font-weight: 800; margin-bottom: 10px; }
.mo-row {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 9px 0; border-top: 1px solid var(--line-2); font-size: 14px;
}
.mo-row b { flex: 0 0 auto; font-weight: 800; }
.mo-score { flex: 0 0 auto; font-size: 12.5px; font-weight: 800; }
.mo-row em {
  flex: 1 1 100%; font-style: normal; color: var(--ink-3);
  font-size: 13px; line-height: 1.55;
}

/* 달력 옆의 좁은 칸에서는 한 줄로 줄인다.
   이유 문장을 다 펼치면 카드가 1,073px 이 되어 달력(518px)보다 두 배 길어지고,
   결국 본문이 다시 저 아래로 밀린다. 자세한 이유는 날짜를 누르면 나온다. */
.mo-top .mo-picks .mo-row { padding: 7px 0; gap: 6px; }
.mo-top .mo-picks .mo-row em {
  flex: 1 1 100%;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
  overflow: hidden; font-size: 12.5px; line-height: 1.45;
}
.mo-picks .mo-hint { color: var(--ink-4); font-size: 12px; margin: 12px 0 0; }
@media (max-width: 960px) {
  /* 아래로 내려오면 자리가 넉넉하므로 이유를 다시 펼친다 */
  .mo-top .mo-picks .mo-row em { -webkit-line-clamp: 3; font-size: 13px; }
}

/* ---------- 약관 · 개인정보처리방침 ---------- */
/* 법률 문서는 '읽히는 것'이 목적이다. 줄 길이를 제한하고 조문 사이를 넉넉히
   띄워, 조 단위로 눈이 끊어 읽을 수 있게 한다. */
.legal { font-size: 15px; line-height: 1.85; color: var(--ink-2); }
.legal > :first-child { margin-top: 0; }
.legal h2 {
  font-size: 17px; font-weight: 800; color: var(--ink); letter-spacing: -0.3px;
  margin: 34px 0 12px; padding-top: 20px; border-top: 1px solid var(--line-2);
}
.legal h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 8px; }
.legal p { margin: 10px 0; max-width: 62em; }
.legal ol, .legal ul { margin: 10px 0; padding-left: 22px; max-width: 62em; }
.legal li { margin: 6px 0; }
.legal li > ul, .legal li > ol { margin: 6px 0; }
.legal b, .legal strong { color: var(--ink); font-weight: 800; }

/* 특히 눈에 띄어야 하는 고지 — 서비스의 성격, 국외 이전 */
.legal-note {
  margin: 18px 0; padding: 16px 18px; border-left: 4px solid var(--primary);
  background: var(--primary-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.legal-note p { margin: 6px 0; }
.legal-note > :first-child { margin-top: 0; }
.legal-note > :last-child { margin-bottom: 0; }

/* 표는 좁은 화면에서 페이지를 밀지 않고 자기 안에서만 가로로 스크롤한다 */
.legal-table {
  border-collapse: collapse; width: 100%; font-size: 13.8px; margin: 14px 0;
  display: block; overflow-x: auto;
}
.legal-table.wide { min-width: 0; }
.legal-table th, .legal-table td {
  border: 1px solid var(--line); padding: 9px 12px; text-align: left; vertical-align: top;
}
.legal-table th {
  background: var(--line-2); font-weight: 800; color: var(--ink); white-space: nowrap;
}
.legal-table thead th { text-align: left; }

.legal-foot {
  margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--line-2);
  color: var(--ink-3); font-size: 13.5px;
}

/* ---------- 누른 즉시 반응 (ui.js) ---------- */
/* 제출 중인 버튼 — 클릭만 막고 disabled 는 쓰지 않는다.
   disabled 로 만들면 그 버튼의 name/value 가 전송 데이터에서 빠진다. */
.is-busy {
  pointer-events: none;
  opacity: .75;
  cursor: progress;
}
.spin {
  display: inline-block; width: 13px; height: 13px; margin-right: 7px;
  vertical-align: -2px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* 화면 이동 진행 막대 — 링크를 눌렀을 때도 바로 뜬다 */
.nav-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 9999;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  transform-origin: 0 50%; transform: scaleX(0);
  transition: transform .18s ease-out;
  pointer-events: none;
}

/* 움직임을 줄이도록 설정한 사용자에게는 회전·전환을 멈춘다 */
@media (prefers-reduced-motion: reduce) {
  .spin { animation: none; border-right-color: currentColor; opacity: .5; }
  .nav-progress { transition: none; }
}

/* ---------- 월간 운세 상단 — 달력과 목록을 나란히 ---------- */
/* 예전에는 달력 카드 아래에 '눈여겨볼 날' 카드가 또 쌓여서, 본문에 닿기까지
   1,700px 넘게 내려야 했다. 둘은 같은 정보를 다르게 보여 주는 것이므로
   나란히 두는 편이 읽기에도 낫다. */
.mo-top {
  display: grid; gap: 16px;
  grid-template-columns: minmax(0, 1fr) 330px;
  align-items: start;
}
.mo-top > * { min-width: 0; }

/* 좁은 칸에 들어가는 '눈여겨볼 날'은 좋은 날/조심할 날을 위아래로 쌓는다 */
.mo-top .mo-picks .grid-2 { grid-template-columns: 1fr; gap: 14px; }

@media (max-width: 960px) {
  .mo-top { grid-template-columns: 1fr; }
  .mo-top .mo-picks .grid-2 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .mo-top .mo-picks .grid-2 { grid-template-columns: 1fr; }
}
.mo-more {
  margin-left: 6px; font-size: 11px; font-weight: 700; color: var(--ink-4);
  background: var(--line-2); padding: 1px 7px; border-radius: 999px;
}

/* ---------- AI 상담사(페르소나) 선택 ---------- */
/* 카드로 고르게 한다. 드롭다운으로는 '누구에게 물어보는가'가 전달되지 않는다. */
.persona-pick { display: grid; gap: 10px; }
.persona {
  display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius);
  cursor: pointer; background: #fff; transition: border-color .15s, box-shadow .15s;
}
.persona:hover { border-color: var(--ink-4); }
.persona.on { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-weak, rgba(99,102,241,.14)); }
.persona.on .pe { background: var(--primary-weak, rgba(99,102,241,.14)); }
/* 고른 카드에 체크 표시 — 테두리 색만으로는 무엇이 선택됐는지 한눈에 안 들어온다 */
.persona.on .pb b::after {
  content: "✓"; margin-left: 7px; font-size: 12px; font-weight: 800; color: var(--primary);
}
.persona input { position: absolute; opacity: 0; pointer-events: none; }
/* 라디오를 숨겼으므로 키보드로 옮겨 다닐 때 어디에 있는지 보이게 한다 */
.persona:focus-within { border-color: var(--primary); outline: 2px solid var(--primary); outline-offset: 2px; }
.persona .pe {
  font-size: 26px; line-height: 1; text-align: center;
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  background: var(--line-2); border-radius: 12px;
}
.persona .pb { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.persona .pb b { font-size: 15px; }
.persona .pb em { font-style: normal; font-size: 13px; color: var(--ink-3); }
.persona .pb i { font-style: normal; font-size: 12px; color: var(--ink-4); line-height: 1.5; }
.persona .pp {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  font-weight: 800; color: var(--primary); white-space: nowrap;
}
.persona .pp small { font-weight: 600; font-size: 11px; color: var(--ink-4); }

/* 상담방 사이드바의 상담사 카드 */
.persona-head { display: flex; gap: 12px; align-items: center; }
.persona-head .pe {
  font-size: 24px; width: 42px; height: 42px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--line-2); border-radius: 12px;
}
.persona-head .pb { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.persona-head .pb em { font-style: normal; font-size: 12px; color: var(--ink-3); }

/* "생각 중" 진행 문구 — 점 세 개 앞에 붙는다 */
.think-line { color: var(--ink-3); font-size: 13px; }

@media (max-width: 560px) {
  .persona { grid-template-columns: 40px 1fr; }
  .persona .pp { grid-column: 2; flex-direction: row; gap: 8px; align-items: baseline; }
}

/* 어조 눈금 — 상담사 카드에서 '얼마나 센 말투인가'를 눈으로 보여 준다 */
.persona .tone { display: flex; align-items: center; gap: 7px; margin: 2px 0 1px; }
.persona .tone-bars { display: inline-flex; gap: 3px; }
.persona .tone-bars i {
  width: 13px; height: 5px; border-radius: 3px; background: var(--line-2);
}
.persona .tone-bars i.on { background: var(--primary); }
.persona .tone-txt { font-size: 11.5px; color: var(--ink-4); font-style: normal; }

/* ---------- 상담 근거 고정 패널 ---------- */
/* 리포트에서 '이 리포트로 상담하기'로 넘어왔을 때, 무엇을 근거로 상담하는지
   화면 맨 위에 못 박는다. 이것이 없으면 메뉴로 그냥 들어온 것과 구분되지 않는다. */
.basis-lock { border-left: 4px solid var(--primary); }
.basis-lock .bl-head { display: flex; gap: 14px; align-items: flex-start; }
.basis-lock .bl-ico {
  font-size: 24px; line-height: 1; flex: none;
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  background: var(--primary-weak, rgba(99,102,241,.14)); border-radius: 12px;
}
.basis-lock .bl-body { min-width: 0; }
.basis-lock .bl-tag {
  font-size: 11.5px; font-weight: 800; letter-spacing: .02em;
  color: var(--primary); margin-bottom: 3px;
}
.basis-lock .bl-title { font-size: 16px; display: block; line-height: 1.4; }
.basis-lock .bl-meta { font-size: 12.5px; color: var(--ink-4); margin-top: 4px; }
.basis-lock .bl-note {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--ink-3); line-height: 1.7;
}
.basis-lock .bl-change {
  display: inline-block; margin-top: 10px; font-size: 12.5px; color: var(--ink-4);
}

/* 사주 목록에서 '이 사람은 어느 리포트를 근거로 삼는가' */
.pick-basis {
  margin-top: 7px; padding-top: 7px; border-top: 1px dashed var(--line);
  font-size: 12px; color: var(--ink-3); line-height: 1.6;
}
.pick-basis .muted { color: var(--ink-4); }

/* 상담방 머리말 — 누구를 근거로 한 상담인지 항상 보이게 */
.room-subject { line-height: 1.7; }